/* TrustUs — the shared page ---------------------------------------------------
   Eighty-nine pages render through this, and their markup is whatever the
   editor produced: paragraphs, lists, headings, images, the occasional table or
   embed. So the work here is a prose stylesheet — every element WordPress can
   output, set once, rather than a layout. */

.doc-head {
  padding-bottom: clamp(var(--sp-6), 4vw, var(--sp-7));
  background:
    radial-gradient(130% 95% at 50% 0%,
      rgba(167, 0, 30, .085) 0%,
      rgba(167, 0, 30, .035) 42%,
      rgba(167, 0, 30, 0) 100%),
    var(--paper);
}
/* The head this page borrows centres its contents, which is right on a page
   whose head is a statement and wrong on one that is a document: the trail
   started at 176, the title's text at 1148 and the article at 1052 — three
   alignments on one page. They all start where the trail does. */
.doc-head { text-align: start; }
.doc-head .tst-crumb { margin-bottom: clamp(var(--sp-5), 3vw, var(--sp-6)); }

/* --- The head, with a picture beside it ----------------------------------- */
/* The title reads on one side and the picture sits on the other, the way the
   homepage's About band is built — one row, not a banner the reader has to
   scroll past to reach the first sentence.

   Only when there is a picture: without one the copy has the row to itself and
   the head is what it always was. */
.doc-head--figured .doc-head__in {
  margin-top: clamp(var(--sp-5), 3vw, var(--sp-6));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(var(--sp-6), 4vw, var(--sp-8));
  align-items: center;
}
/* The column already limits the line; a character cap on top of it made a
   long post title six lines deep in a narrow ribbon. And the display size is
   set for a title with the page to itself — beside a picture it has half the
   width, so it comes down a step. Still twice the h2 under it. */
/* Bigger again. It is the h1 and it should read as one — the step down was
   cut too deep, and on a service page with a short title it sat level with the
   headings inside the article. The column still limits the line. */
.hp .doc-head--figured .doc-title {
  max-width: none;
  font-size: clamp(32px, 3.9vw, 52px);
}

/* The trail can be as long as the title it ends with, and on a post that is a
   sentence. It keeps to one line and gives way at the end. */
/* Its own row at the top of the head, the full width of the page — it is the
   trail to this page and belongs above it, not beside the picture halfway
   down the column. */
.doc-head .tst-crumb ol {
  flex-wrap: nowrap;
  max-width: 100%;
}
.doc-head .tst-crumb li:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The house treatment: the surface corner, and the offset hairline the About
   figure uses — the frame is drawn behind and to one side, so the picture sits
   on the page rather than floating over it. */
.doc-figure {
  position: relative;
  margin: 0;
  border-radius: var(--r-surface);
  background: var(--wash, #f6f7f9);
  /* Its own stacking context. The About band gets away with z-index: -1 on the
     frame because nothing is painted behind it; this head has a gradient, and
     the frame went behind that too and disappeared. Isolated here, "behind the
     picture" stops meaning "behind the page". */
  isolation: isolate;
}
.doc-figure::before {
  content: "";
  position: absolute;
  inset: -14px -14px 14px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  z-index: 0;
}
/* A hairline of the brand red along the reading edge, so the frame is ours and
   not a default border. */
.doc-figure::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset-block: 18%;
  inset-inline-end: -14px;
  width: 3px;
  background: var(--red);
  border-radius: 3px;
}
.doc-figure__img {
  position: relative;
  z-index: 1;          /* over the frame, so it tucks behind the picture */
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  height: auto;
  object-fit: cover;
  border-radius: var(--r-surface);
}

@media (max-width: 900px) {
  /* Stacked, and shorter: on a phone a 5:4 picture is most of the screen
     before a word of the article has been read. */
  .doc-head--figured .doc-head__in { grid-template-columns: minmax(0, 1fr); }
  .doc-head--figured .doc-title { max-width: none; }
  .doc-figure { margin-top: clamp(var(--sp-6), 5vw, var(--sp-7)); }
  .doc-figure__img { aspect-ratio: 16 / 10; }
  .doc-figure::before { inset: -10px -10px 10px 10px; }
  .doc-figure::after { inset-inline-end: -10px; }
}
/* Its own scale, not the site's two general tokens.
   --fs-display and --fs-h2 meet at the small end — 28px against 26px — so on
   a phone the page's title and the headings inside the article were two pixels
   apart and read as the same rank. An article needs the difference more than
   any other page does: it is a column of headings, and the title has to be the
   one you land on. The tokens are left alone; the homepage's hero is not this
   problem. */
.hp .doc-title {
  margin: 0;
  max-width: 22ch;
  color: var(--red);
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: var(--lh-tight);
}

.doc-body { padding-top: clamp(var(--sp-6), 4vw, var(--sp-7)); }

/* One measure for the reading. `.doc` on the front of everything below, because
   tu-system.css sets `.hp p`, `.hp h2` and `.hp ul` — all two-part selectors
   that beat a single class, and this file has to win over them without
   resorting to !important. */
/* Article and side column. The reading column keeps its measure and the aside
   takes a fixed track beside it — a fraction would have made the aside grow
   with the window, and a 4-line headline in a 400px card is not a side note. */
.doc-body__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 316px;
  gap: clamp(var(--sp-6), 4vw, var(--sp-8));
  align-items: start;
}
@media (max-width: 1000px) {
  /* Under the article, not beside it. Not hidden: on a phone it is the only
     thing on these pages that leads anywhere. */
  .doc-body__in { grid-template-columns: minmax(0, 1fr); }
  .doc-body__in .pst-aside { margin-top: clamp(var(--sp-7), 6vw, var(--sp-8)); }
}

.doc .doc-prose {
  width: min(74ch, 100%);
  /* At the start edge, not centred: the title above it is there, and a column
     that floats to the middle of the page under a title that does not is two
     columns. */
  margin-inline: 0;
}

/* --- The card at the top of the side column -------------------------------- */
.doc .pst-aside__cta {
  margin-bottom: clamp(var(--sp-6), 4vw, var(--sp-7));
  padding: clamp(var(--sp-5), 2.5vw, var(--sp-6));
  background: var(--red);
  border-radius: var(--r-surface);
  color: #fff;
}
.doc .pst-aside__cta h2 {
  margin: 0 0 var(--sp-3);
  color: #fff;
  font-size: clamp(19px, 1.7vw, 22px);
  font-weight: 800;
}
.doc .pst-aside__cta p {
  margin: 0 0 var(--sp-5);
  color: rgba(255, 255, 255, .84);
  font-size: var(--fs-small);
  line-height: 1.75;
}
/* White on the red, since the button's own red would vanish into it. */
.doc .pst-aside__cta .hp-btn {
  display: flex;
  width: 100%;
  background: #fff;
  border-color: #fff;
  color: var(--red);
}
.doc .pst-aside__cta .hp-btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* --- Text ------------------------------------------------------------------ */
.doc .doc-prose p {
  margin-block: 0 var(--sp-5);
  font-size: var(--fs-lead);
  line-height: 1.95;
  color: var(--ink);
}
.doc .doc-prose > :last-child { margin-bottom: 0; }

.doc .doc-prose h2 {
  margin: clamp(var(--sp-7), 5vw, var(--sp-8)) 0 var(--sp-4);
  font-size: clamp(23px, 2.2vw, 30px);
  line-height: 1.4;
  color: var(--red);
}
.doc .doc-prose h3 {
  margin: clamp(var(--sp-6), 4vw, var(--sp-7)) 0 var(--sp-4);
  font-size: var(--fs-h3);
  line-height: 1.5;
  color: var(--ink);
}
.doc .doc-prose h2:first-child,
.doc .doc-prose h3:first-child { margin-top: 0; }

.doc .doc-prose strong { color: var(--ink); font-weight: 800; }
.doc .doc-prose a { color: var(--red); border-bottom: 1px solid var(--red-edge); }
.doc .doc-prose a:hover { border-bottom-color: currentColor; }

/* --- Lists ------------------------------------------------------------------
   The editor's lists come with no markers at all through `.hp ul`, so they are
   put back here — a list of required documents is a list. */
.doc .doc-prose ul,
.doc .doc-prose ol {
  margin: 0 0 var(--sp-5);
  padding-inline-start: var(--sp-6);
  font-size: var(--fs-lead);
  line-height: 1.95;
  color: var(--ink);
}
.doc .doc-prose ul { list-style: disc; }
.doc .doc-prose ol { list-style: decimal; }
.doc .doc-prose li { margin-bottom: var(--sp-3); }
.doc .doc-prose li::marker { color: var(--red); }
.doc .doc-prose li:last-child { margin-bottom: 0; }
.doc .doc-prose li > ul,
.doc .doc-prose li > ol { margin-block: var(--sp-3) 0; }

/* --- Pictures and embeds ---------------------------------------------------
   Whatever size the editor inserted, they take the measure and keep their own
   proportion. */
.doc .doc-prose figure { margin: clamp(var(--sp-6), 4vw, var(--sp-7)) 0; }
.doc .doc-prose img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--r-surface);
}
.doc .doc-prose figcaption {
  margin-top: var(--sp-4);
  color: var(--muted);
  font-size: var(--fs-caption);
  text-align: center;
}
.doc .doc-prose iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: var(--r-surface);
}

/* --- Tables ----------------------------------------------------------------
   Rare, but a page of fees has one, and a table that sets the page's width is
   a page with a horizontal scrollbar. */
.doc .doc-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-small);
}
.doc .doc-prose th,
.doc .doc-prose td {
  padding: var(--sp-4);
  border: 1px solid var(--line);
  text-align: start;
}
.doc .doc-prose th { background: var(--wash); font-weight: 800; }

/* A quote, and the "اقرأ أيضاً" boxes the articles make out of one.
   The rule is on the reading edge and the ground is a tint of the brand rather
   than the pale blue a stray inline style was giving it, and the text sits
   where the article's text sits — centred, it read as a banner rather than as
   an aside. */
.doc .doc-prose blockquote {
  margin: clamp(var(--sp-6), 4vw, var(--sp-7)) 0;
  padding: clamp(14px, 2vw, 18px) clamp(16px, 2.2vw, 22px);
  border: 0;
  border-inline-start: 4px solid var(--red);
  border-radius: var(--r-control, 3px);
  background: rgba(167, 0, 30, .04);
  text-align: start;
  box-shadow: none;
}
.doc .doc-prose blockquote p { margin: 0 0 6px; }
.doc .doc-prose blockquote p:last-child { margin-bottom: 0; }
/* The label above the link is the quiet half, the link the loud one — the
   articles write them the other way round with <strong> on the label. */
.doc .doc-prose blockquote strong {
  display: block;
  color: var(--muted, #6b7280);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
}
.doc .doc-prose blockquote a {
  color: var(--red);
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.doc .doc-prose blockquote a:hover,
.doc .doc-prose blockquote a:focus-visible { border-bottom-color: currentColor; }
/* The <br> after the label is doing the label's line break, which the block
   above already does. */
.doc .doc-prose blockquote strong + br { display: none; }

/* --- A note ------------------------------------------------------------------
   The articles keep making one out of a bold paragraph, which reads as shouting
   rather than as an aside. This is the aside: tinted, ruled on the reading edge,
   and quieter than the text around it rather than louder. */
.doc .doc-prose .tu-note {
  margin-block: clamp(var(--sp-5), 3vw, var(--sp-6));
  padding: clamp(16px, 2.2vw, 22px) clamp(18px, 2.4vw, 24px);
  border-inline-start: 4px solid var(--red);
  border-radius: var(--r-control);
  background: var(--red-tint);
}
.doc .doc-prose .tu-note p { margin: 0; color: var(--ink); font-size: var(--fs-small); line-height: 1.85; }
.doc .doc-prose .tu-note p + p { margin-top: var(--sp-3); }
/* --- The call to action inside an article ------------------------------------
   Its own file styles it for anywhere on the site; these two are here because
   `.doc .doc-prose p` sets a colour and is two parts, so on this page the white
   on the red band lost to it and the words came out dark red on red. */
.doc .doc-prose .tu-cta__title { color: #fff; }
.doc .doc-prose .tu-cta__body { color: rgba(255, 255, 255, .86); }
.doc .doc-prose .tu-cta p { margin-bottom: 0; }

.doc .doc-prose .tu-note__title {
  color: var(--red);
  font-size: var(--fs-caption) !important;
  font-weight: 800;
  letter-spacing: .01em;
  margin-bottom: 6px !important;
}

/* --- The banner the client writes into the page itself ------------------------
   Eleven of these pages carry a red call-to-action pasted into the content as
   raw HTML, with every rule on the elements as inline style. It was authored
   against a full-width Divi column; in a measured reading column its 85% width,
   its 15px padding and a heading marked up as an inline <span> (so its
   margin-bottom did nothing) left the button wrapped onto a line of its own with
   a hole beside it.

   Overridden here rather than edited in the database: the content is the
   client's, they keep pasting these, and eleven pages would have to be opened to
   fix one that will come back with the twelfth. !important is not a shortcut
   around specificity here — an inline style cannot be beaten any other way.

   Matched on the brand red in the style attribute, which is what identifies the
   block; nothing else in these pages carries it. */
.doc .doc-prose div[style*="a7001e"] {
  width: 100% !important;
  margin-block: clamp(var(--sp-6), 4vw, var(--sp-7)) !important;
  padding: clamp(20px, 2.2vw, 28px) !important;
  border-radius: var(--r-surface) !important;
  gap: clamp(16px, 2vw, 28px) !important;
  align-items: center !important;
}
/* The text side takes what is left and its paragraph wraps inside it. Without
   min-width:0 a flex item refuses to go below its longest line, which is what
   pushed the button out of the row. */
.doc .doc-prose div[style*="a7001e"] > div:first-child {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: clamp(14px, 1.6vw, 20px) !important;
}
.doc .doc-prose div[style*="a7001e"] img {
  max-width: clamp(38px, 3.4vw, 48px) !important;
  flex: 0 0 auto;
}
/* A block, so the 10px under the heading is a gap and not nothing. */
.doc .doc-prose div[style*="a7001e"] span {
  display: block !important;
  margin-bottom: 6px !important;
  font-size: clamp(19px, 1.8vw, 23px) !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}
.doc .doc-prose div[style*="a7001e"] p {
  font-size: var(--fs-small) !important;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, .86) !important;
}
.doc .doc-prose div[style*="a7001e"] a {
  padding: 12px 26px !important;
  border: 0 !important;
  border-radius: var(--r-control) !important;
  color: var(--red) !important;
  font-weight: 800 !important;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.doc .doc-prose div[style*="a7001e"] a:hover {
  background: var(--ink) !important;
  color: #fff !important;
}

@media (max-width: 620px) {
  /* Stacked, and the button the full width of the card rather than a tab in a
     corner of it. */
  .doc .doc-prose div[style*="a7001e"] > div:last-child { width: 100%; }
  .doc .doc-prose div[style*="a7001e"] a { display: block !important; text-align: center; }
}

/* --- Contents ------------------------------------------------------------- */
/* Built from the article's own headings — see inc/toc.php. A <details> so a
   phone can put twenty-four of them away again, open to begin with, because a
   contents list that has to be found is not doing its job. */
.doc-toc {
  margin: 0 0 clamp(var(--sp-6), 4vw, var(--sp-7));
  padding: clamp(14px, 2vw, 18px) clamp(16px, 2.4vw, 22px);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--red);
  border-radius: var(--r-surface);
  background: var(--wash, #f8f8fa);
}
.doc-toc__title {
  cursor: pointer;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  list-style: none;
}
.doc-toc__title::-webkit-details-marker { display: none; }
/* Its own chevron, on the side the page reads from. */
.doc-toc__title::after {
  content: "";
  float: inline-end;
  width: 8px; height: 8px;
  margin-top: 4px;
  /* Physical, not logical: border-inline-end resolves to the left on this
     page, and the pair then draws a chevron pointing sideways instead of down.
     A chevron is a shape, not a reading direction. */
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.doc-toc[open] .doc-toc__title::after { transform: rotate(225deg); }

.doc-toc__nav { margin-top: clamp(10px, 1.6vw, 14px); }
/* Numbered by hand rather than by list-style, so a nested entry can carry its
   parent's number. Left to itself the second level restarted at one and the
   column read ١، ٢، ١، ٣ — two different ones, and no way to tell which
   belonged to what. ٢.١ says it. */
.doc .doc-toc ol {
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
  counter-reset: tu-toc;
}
.doc .doc-toc ol ol { margin-block: 4px; padding-inline-start: 1.4em; counter-reset: tu-toc-sub; }

.doc .doc-toc > .doc-toc__nav > ol > li { counter-increment: tu-toc; }
.doc .doc-toc ol ol > li { counter-increment: tu-toc-sub; }

.doc .doc-toc li > a::before {
  content: counter(tu-toc, decimal) ". ";
  color: var(--muted, #6b7280);
  font-size: 13px;
}
.doc .doc-toc ol ol > li > a::before {
  content: counter(tu-toc, decimal) "." counter(tu-toc-sub, decimal) " ";
}

/* An Arabic article counts in Arabic numerals. The English side keeps 1 and
   1.1 — a reader there should not be handed ١.١. */
[lang|="ar"] .doc .doc-toc li > a::before,
.doc .doc-toc[dir="rtl"] li > a::before { content: counter(tu-toc, arabic-indic) ". "; }
[lang|="ar"] .doc .doc-toc ol ol > li > a::before,
.doc .doc-toc[dir="rtl"] ol ol > li > a::before {
  content: counter(tu-toc, arabic-indic) "." counter(tu-toc-sub, arabic-indic) " ";
}

.doc .doc-toc li { margin: 0 0 5px; }
.doc .doc-toc a {
  color: var(--ink);
  text-decoration: none;
  font-size: 14.5px;
  line-height: 1.65;
  border-bottom: 1px solid transparent;
}
.doc .doc-toc a:hover,
.doc .doc-toc a:focus-visible { color: var(--red); border-bottom-color: currentColor; }

/* A heading jumped to should not sit under the floating header. */
.doc .doc-prose :is(h2, h3, h4) { scroll-margin-top: clamp(90px, 12vw, 120px); }

@media (prefers-reduced-motion: reduce) {
  .doc-toc__title::after { transition: none; }
}

/* When it was written and what it is about — a post has both, a page neither. */
.doc-meta {
  margin: clamp(12px, 1.6vw, 16px) 0 0;
  color: var(--muted, #6b7280);
  font-size: 14px;
}
.doc-meta a { color: var(--red); text-decoration: none; border-bottom: 1px solid transparent; }
.doc-meta a:hover,
.doc-meta a:focus-visible { border-bottom-color: currentColor; }
.doc-meta span { margin-inline: 8px; }

/* The call to action is inside the article, so .doc .doc-prose p — two classes
   and an element — was beating .tu-cta__title and .tu-cta__body and giving each
   line a paragraph's bottom margin. The bar came out 232px tall for 99px of
   words. */
.doc .doc-prose .tu-cta__title { margin: 0 0 6px; }
.doc .doc-prose .tu-cta__body  { margin: 0; }
.doc .doc-prose .tu-cta__icon  { margin: 0; }
.doc .doc-prose .tu-cta p:last-child { margin-bottom: 0; }

/* --- The line under the title --------------------------------------------- */
/* Who wrote it, what it is about, how long it is, when it was written, and how
   to pass it on. One row that wraps, rather than four things stacked. */
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(12px, 2vw, 20px);
  margin: clamp(16px, 2.4vw, 22px) 0 0;
  /* Both sides. It had padding above the row and none below, so the four
     34px share circles ended exactly on the row's bottom edge — flush against
     whatever the section put there, which reads as the circles being cut off
     along the bottom. */
  padding-block: clamp(14px, 2vw, 18px);
  border-top: 1px solid var(--line);
  color: var(--muted, #6b7280);
  font-size: 14px;
}
.doc-meta__by { display: flex; align-items: center; gap: 9px; }
.doc-meta__mark {
  width: 34px; height: 34px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  object-fit: contain;
}
.doc-meta__byname { color: var(--ink); font-weight: 800; }

.doc-meta__facts {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(10px, 1.6vw, 16px);
  margin: 0; padding: 0; list-style: none;
}
/* A hairline between the facts instead of a bullet character, which in an RTL
   line lands on whichever side the browser feels like. */
.doc-meta__facts li { position: relative; }
.doc-meta__facts li + li { padding-inline-start: clamp(10px, 1.6vw, 16px); }
.doc-meta__facts li + li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%; margin-top: -6px;
  width: 1px; height: 12px;
  background: var(--line);
}
.doc-meta__label { color: var(--muted, #6b7280); }
.doc-meta__cat a {
  color: var(--red);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.doc-meta__cat a:hover,
.doc-meta__cat a:focus-visible { border-bottom-color: currentColor; }

.doc-share { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.doc-share__label { color: var(--muted, #6b7280); }
.doc-share__btn {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
/* الأيقونة في منتصف الدائرة. «‎place-items:center‎» وحدها كانت تتركها أخفض
   بمقدار بكسلين (١٠ من فوق و٦ من تحت)، والهامش التلقائيّ يوزّع الفراغ
   بالتساوي في الشبكة فيستقرّ المركز على ٨ و٨. */
.doc-share__btn svg { margin: auto; }

.doc-share__btn:hover,
.doc-share__btn:focus-visible { color: #fff; background: var(--red); border-color: var(--red); }

/* The marks are the footer's, which is right — they are the same marks the
   footer shows. What was wrong was the colour: three of these are links and
   took the site's link red while the fourth is a button and stayed ink, so the
   row read as four different icons. The button decides, not the element it
   happens to be. */
.doc-share .doc-share__btn { color: var(--ink, #14121a); }
.doc-share .doc-share__btn:hover,
.doc-share .doc-share__btn:focus-visible { color: #fff; }
.doc-share .tu-ft__icon {
  display: block;
  width: 18px; height: 18px;
  fill: currentColor;
}
.doc-share__copy { position: relative; }
/* What it says after it copies, floated clear so it cannot resize the row. */
.doc-share__said {
  position: absolute;
  inset-inline-end: 0;
  bottom: calc(100% + 8px);
  padding: 6px 10px;
  border-radius: var(--r-control, 3px);
  background: var(--ink, #14121a);
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.doc-share__copy.is-said .doc-share__said { opacity: 1; }

@media (max-width: 700px) {
  .doc-share { margin-inline-start: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .doc-share__btn, .doc-share__said { transition: none; }
}