/* ==========================================================================
   KuduDoc v6 — THE GUIDE KIT (pages/_guide.css)
   Shared by the hub (guides.html) and every guide. Loaded by <body data-kit="guide">, after theme.css and
   before the page's own pages/<slug>.css (build.py). A guide normally needs NO page CSS of its own.

   The look: the blue opening (breadcrumb, H1, answer-first lead, "Last checked"), then a calm article on the
   light ground — a ~62ch measure, a sticky "On this page" rail on wide screens (a contents card on phones),
   question H2s marked with the logo's slanted stroke, well-set tables, the FAQ, named sources, related guides,
   and the closing blue band. Flat colour and crisp edges only: no glows, no gradients beyond the approved
   opening fade, no icon on every card. Orange appears only on the primary button and the Sealed chip.

   ── THE MARKUP TO COPY (a guide) ─────────────────────────────────────────────────────────────────────────
   <body data-page="SLUG" data-kit="guide">
   <header class="site-header"></header>
   <main id="main">
   <div class="gd-page">
     <!-- 1 · the opening. .hero-cu makes theme.css paint the blue + poster and site.js give the nav its dark tone -->
     <section class="hero-cu gd-open" id="top">
       <div class="gd-wrap">
         <nav class="gd-crumbs" aria-label="Breadcrumb"><ol>
           <li><a href="https://kududoc.co.za/">Home</a></li>
           <li><a href="guides.html">Guides</a></li>
           <li aria-current="page">Short name from the page-map BreadcrumbList</li>
         </ol></nav>
         <h1 class="gd-title">The page-map h1, exactly</h1>
         <p class="gd-lead"><strong>First sentence (the answer).</strong> The rest of the verbatim lead.</p>
         <p class="gd-lead-next">Optional next line from the brief, with <a href="…">its link</a>.</p>
         <p class="gd-checked"><span>Last checked <time datetime="2026-09-24">24 September 2026</time></span>
           <a href="#sources">Read the sources</a></p>
       </div>
     </section>

     <!-- 2 · the body: contents rail + article -->
     <div class="gd-wrap gd-body">
       <nav class="gd-toc" aria-labelledby="toc-title">
         <p class="gd-toc-title" id="toc-title">On this page</p>
         <ol><li><a href="#first-id">Short label</a></li> … <li><a href="#faq">Questions people ask</a></li>
             <li><a href="#sources">Sources</a></li></ol>
       </nav>
       <article class="gd-article">
         <section class="gd-sec" id="first-id">
           <h2>A question-shaped heading?</h2>
           <p>Short paragraphs. Statutes link to their primary source.</p>
           <h3>A sub-question</h3> <p>…</p>
           <ul class="gd-list"><li>…</li></ul>                 (slanted-stroke bullets)
           <ol class="gd-steps"><li><b>Step name.</b> What to do.</li></ol>     (numbered steps; no HowTo markup)
           <ul class="gd-checklist"><li><b>Item</b> <span>where the original lives</span></li></ul>
                                                               (an empty square per item — never a tick)
           <dl class="gd-defs"><dt>Term</dt><dd>Plain meaning.</dd></dl>    (a short glossary)
         </section>
         …
       </article>
     </div>

     <section class="cta-gradient gd-cta" id="closing">    <!-- 9 · the one CTA band (full-bleed blue) -->
       <div class="gd-cta-inner">
         <p class="gd-cta-kicker">Personal is free</p>
         <h2>Headline, <span>second line in pale sky.</span></h2>
         <p>One line.</p>
         <div class="gd-cta-actions">
           <a class="btn btn-primary" href="https://kududoc.co.za/signup.html?plan=personal">Start free</a>
           <a class="btn btn-onblue-ghost" href="verify.html">Check a sealed PDF</a>   (optional, per brief)
         </div>
       </div>
     </section>
   </div>
   </main>

   ── BLOCKS FOR THE ARTICLE (each inside a .gd-sec, after its h2) ────────────────────────────────────────
   Statute quote   <figure class="gd-law"><blockquote><p>“Exact words of the section.”</p></blockquote>
                     <figcaption><a href="primary source">ECT Act 25 of 2002, s13(2)</a></figcaption></figure>
   Table           <div class="gd-table" role="region" aria-labelledby="t1" tabindex="0"><table>
                     <caption id="t1">What the table shows</caption>
                     <thead><tr><th scope="col">Item</th><th scope="col">…</th></tr></thead>
                     <tbody><tr><th scope="row">Row name</th><td data-label="Column name">…</td></tr></tbody>
                   </table></div>
                   · Give every <td> a data-label (its column name): under 640px the rows stack as cards (the
                     briefs' rule for 375/320px). A table without data-labels scrolls inside its own box instead;
                     add .gd-table--scroll to force that for a wide reference table.
   Callout         <aside class="gd-note"><p class="gd-note-label">In short</p><p>One takeaway.</p></aside>
                   · At most one or two per guide, for a takeaway the reader should keep. Never a disclaimer,
                     a status note or a banner (the briefs: dated notes are plain paragraphs).
   Case / record   <div class="gd-cases">                  (two side by side on wide screens; one alone is fine)
                     <article class="gd-case"><p class="gd-case-meta">Supreme Court of Appeal · 2014</p>
                       <h3><em>Case name</em></h3><p>What happened.</p><p>What the court held.</p>
                       <p class="gd-case-cite"><a href="primary source">[2014] ZASCA 178</a> · 21 November 2014</p>
                     </article>
                   </div>
                   · Also fits any dated legal record (a section, a notice). Uppercase is used only for short
                     labels (TOC title, table heads, app labels): never put a section number like s5(3)(e) in one.
   Product panel   <figure class="gd-figure">
                     <div class="gd-stage">                   (pale stage; add .gd-stage--pair for two apps)
                       <div class="gd-app">
                         <div class="gd-app-bar"><svg class="icon" aria-hidden="true"><use href="icons-kd.svg#k-lease"/></svg>
                           <b>File name.pdf</b><span class="gd-chip gd-chip--sealed">Sealed</span></div>
                         <div class="gd-app-body">
                           <p class="gd-app-label">Signing record</p>
                           <div class="gd-app-row"><span>Label</span><time>09:02</time></div>
                           <div class="gd-app-actions"><span class="gd-app-btn">Action</span>
                             <span class="gd-app-btn gd-app-btn--off">Disabled action</span></div>
                         </div>
                       </div>
                     </div>
                     <figcaption>What the panel shows, in one plain sentence (never "illustration" or "example").</figcaption>
                   </figure>
                   · Chips: .gd-chip (neutral) · --blue · --ink · --sealed (the one orange: the seal only).
                     No tick glyphs, no green: verdicts are words.
   Wide element    .gd-wide on any block lets it use the article's full width (tables, figures and cases already do).

   ── THE CLOSING SECTIONS (in this order, inside .gd-article) ─────────────────────────────────────────────
   FAQ             <section class="gd-sec gd-faq" id="faq"><h2>Questions people ask</h2>
                     <div class="gd-faq-list" data-faq>
                       <details><summary>Question, verbatim</summary><p>Answer, verbatim.</p></details> …
                     </div></section>
                   · data-faq on exactly one element: the build writes FAQPage JSON-LD from it.
   Sources         <section class="gd-sec gd-sources" id="sources"><h2>Sources</h2>
                     <ol class="gd-source-list">
                       <li><a href="https://www.gov.za/…">Name of the Act, judgment or page</a>
                         <span class="gd-src-host">gov.za</span>
                         <span class="gd-src-note">What it supports on this page</span></li> …
                     </ol>
                     <p class="gd-checked-foot"><span>Last checked <time datetime="2026-09-24">24 September 2026</time></span></p>
                   </section>
   Related         <section class="gd-sec gd-related" id="related"><h2>Related guides</h2>
                     <div class="gd-cards">
                       <article class="gd-card"><h3><a href="slug.html">The guide's H1</a></h3>
                         <p>Its one-line answer (the hub's card line).</p>
                         <p class="gd-card-date"><span>Last checked <time datetime="2026-09-24">24 September 2026</time></span></p>
                       </article> …
                     </div></section>

   ── THE HUB (guides.html) ──────────────────────────────────────────────────────────────────────────────
   <section class="gd-group" id="signing"><div class="gd-group-head"><h2>Group</h2><p>One line.</p></div>
     <div class="gd-index"><article class="gd-entry"><h3><a href="slug.html">Guide H1</a></h3>
       <p class="gd-entry-line">One-line answer.</p>
       <p class="gd-entry-date"><span>Last checked <time datetime="…">…</time></span></p>
     </article> …</div></section>
   · Visible order = the page-map ItemList order. A guide's H1 is its hub title; the hub line is brief §N10.4.

   ── RULES THAT KEEP THE KIT WORKING ──────────────────────────────────────────────────────────────────────
   · Wrap everything in main > div.gd-page, with the opening first (theme.css leaves a .hero-cu first child alone).
   · Every section a TOC links to is a .gd-sec with an id; scroll-margin clears the fixed nav. TOC labels may be
     shorter than their H2s; list the FAQ and Sources last.
   · No page scripts unless the brief names one (N7's calculator; N2's optional filter): the rest works with JS off.
   · Every "Last checked" is <span>Last checked <time datetime>…</time></span> (the span keeps the flex gap off
     the words). Opening, Sources foot and each card carry the same date for one guide.

   ── WHAT EACH GUIDE PAGE SAYS (the briefs, _shared-conventions.md) ──────────────────────────────────────────
   · Lead and FAQ verbatim from the brief (the FAQ strings equal the page-map FAQPage). Bold only the lead's first
     answer sentence. Statutes, regulations and judgments link to their primary source; a site link never says
     "Learn more". Related guides: two or three the brief already links to, with their hub lines.
   · Claim markers stay on the element: data-needs="feature:SEO-P0-66" (won't send), -67, -68, -69, SEO-P1-110
     ("with a free KuduDoc account"). The build strips them.
   · No status notes, banners, "example"/"illustration" labels, ticks, glows or emoji. The fixed sentences (won't
     send, reminders, link answerers' accounts) are in audit/seo/copy/_conventions.md; use them word for word.
   ========================================================================== */

/* ---------------------------------------------------------------- 0 · kit tokens */
body[data-kit="guide"] {
  --gd-ink: #102d49;
  --gd-text: #2b4460;
  --gd-slate: #56697f;
  --gd-mute: #6b7c8f;
  --gd-blue: #006bcb;
  --gd-ground: #2a64a0;
  --gd-sky: #a9dcff;
  --gd-pale: #d6eeff;
  --gd-line: rgba(16, 45, 73, .1);
  --gd-tint: #f3f8fd;
  --gd-stage: #e5eff9;
  --gd-card: inset 0 0 0 1px rgba(16, 45, 73, .07), 0 1px 2px rgba(16, 45, 73, .05), 0 16px 40px -24px rgba(16, 45, 73, .32);
  --gd-lift: inset 0 0 0 1px rgba(16, 45, 73, .06), 0 2px 4px rgba(6, 22, 42, .06), 0 22px 48px -22px rgba(6, 22, 42, .34);
  --gd-measure: 62ch;
  --gd-clear: 112px;              /* the floating nav's height plus air, for sticky and anchor targets */
  --gd-stroke: rotate(-8deg) skewX(-14deg);   /* the KuduDoc mark's lean */
}
html:has(body[data-kit="guide"]) { scroll-padding-top: var(--gd-clear, 112px); }
@media (prefers-reduced-motion: no-preference) { html:has(body[data-kit="guide"]) { scroll-behavior: smooth; } }

html body .gd-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 40px; box-sizing: border-box; }
@media (max-width: 640px) { html body .gd-wrap { padding: 0 20px; } }
html body .gd-page { position: relative; }

/* ---------------------------------------------------------------- 1 · the opening (theme.css paints .hero-cu blue with the poster) */
html body .gd-open { padding: 150px 0 184px; }         /* content ends before the last 150px, where the blue eases out */
html body .gd-open .gd-wrap { position: relative; z-index: 1; }

html body .gd-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin: 0; padding: 0; list-style: none; }
html body .gd-open .gd-crumbs li { display: inline-flex; align-items: center; margin: 0; color: var(--gd-pale); font: 500 14px/1.4 var(--font-sans); }
html body .gd-crumbs li:not(:last-child)::after {   /* on the item before, so a wrapped crumb never starts with a separator */
  content: ""; flex: none; width: 2px; height: 12px; margin: 0 13px 0 12px; border-radius: 2px;
  background: rgba(169, 220, 255, .55); transform: var(--gd-stroke);
}
html body .gd-open .gd-crumbs a { color: #fff; text-decoration: none; box-shadow: inset 0 -1px 0 rgba(214, 238, 255, .35); transition: box-shadow 140ms ease; }
html body .gd-open .gd-crumbs a:hover { box-shadow: inset 0 -1.5px 0 #fff; }
html body .gd-open .gd-crumbs [aria-current="page"] { color: var(--gd-pale); }

html body .gd-open h1.gd-title, html body .gd-open h1 {
  max-width: 21ch; margin: 30px 0 0; color: #fff;
  font: 650 clamp(38px, 4.6vw, 66px)/1.04 var(--font-display); letter-spacing: -.034em; text-wrap: balance;
}
html body .gd-open .gd-lead {
  max-width: 62ch; margin: 28px 0 0; color: rgba(236, 244, 252, .9);
  font: 400 clamp(18px, 1.5vw, 21px)/1.62 var(--font-sans); letter-spacing: -.006em; text-wrap: pretty;
}
html body .gd-open .gd-lead strong { color: #fff; font-weight: 600; }
html body .gd-open .gd-lead a, html body .gd-open .gd-lead-next a {
  color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: rgba(214, 238, 255, .5);
}
html body .gd-open :is(.gd-lead, .gd-lead-next) a:hover { text-decoration-color: #fff; }
html body .gd-open .gd-lead-next { max-width: 62ch; margin: 16px 0 0; color: rgba(226, 238, 250, .82); font: 400 16.5px/1.6 var(--font-sans); }

/* "Last checked": a short slanted stroke, the date, and a quiet link to the sources */
html body .gd-open .gd-checked {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 34px 0 0; padding-top: 22px;
  max-width: 62ch; border-top: 1px solid rgba(191, 227, 255, .22);
  color: var(--gd-pale); font: 500 14px/1.4 var(--font-sans);
}
html body .gd-open .gd-checked::before {
  content: ""; order: -1; width: 3px; height: 14px; margin-right: -8px; border-radius: 2px; background: var(--gd-sky); transform: var(--gd-stroke);
}
html body .gd-open .gd-checked time { margin-left: .3em; color: #fff; font-weight: 600; }
html body .gd-open .gd-checked a { margin-left: auto; color: #fff; text-decoration: none; box-shadow: inset 0 -1px 0 rgba(214, 238, 255, .4); }
html body .gd-open .gd-checked a::after { content: " \2193"; }
html body .gd-open .gd-checked a:hover { box-shadow: inset 0 -1.5px 0 #fff; }
@media (max-width: 640px) {
  html body .gd-open { padding: 118px 0 170px; }
  html body .gd-open h1.gd-title, html body .gd-open h1 { margin-top: 22px; font-size: clamp(32px, 8.6vw, 38px); line-height: 1.08; }
  html body .gd-open .gd-lead { margin-top: 20px; font-size: 17.5px; line-height: 1.6; }
  html body .gd-open .gd-checked { margin-top: 26px; padding-top: 18px; }
  html body .gd-open .gd-checked a { margin-left: 0; }
}

/* ---------------------------------------------------------------- 2 · the body: contents rail + article */
html body .gd-body {
  display: grid; grid-template-columns: 236px minmax(0, 1fr); column-gap: clamp(48px, 6vw, 88px); align-items: start;
  padding-top: 8px; padding-bottom: 128px;
}
html body .gd-toc { position: sticky; top: var(--gd-clear); padding: 6px 0 24px; }
html body .gd-toc-title {
  display: flex; align-items: center; gap: 10px; margin: 0 0 16px; color: var(--gd-blue);
  font: 600 12px/1 var(--font-sans); letter-spacing: .15em; text-transform: uppercase;
}
html body .gd-toc-title::before { content: ""; width: 3px; height: 13px; border-radius: 2px; background: var(--gd-blue); transform: var(--gd-stroke); }
html body .gd-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: gd-toc; border-left: 1px solid var(--gd-line); }
html body .gd-toc li { margin: 0; counter-increment: gd-toc; }
html body .gd-toc li a {
  position: relative; display: grid; grid-template-columns: 28px 1fr; align-items: baseline; margin-left: -1px; padding: 7px 0 7px 16px;
  border-left: 1px solid transparent; color: #3f5470; font: 500 14px/1.4 var(--font-sans); text-decoration: none;
  transition: color 140ms ease, border-color 140ms ease;
}
html body .gd-toc li a::before { content: counter(gd-toc, decimal-leading-zero); color: #8a99aa; font: 500 12px/1.4 var(--font-sans); font-variant-numeric: tabular-nums; }
html body .gd-toc li a:hover { color: var(--gd-blue); border-left-color: var(--gd-blue); }
html body .gd-toc li a:hover::before { color: var(--gd-blue); }

@media (max-width: 1099px) {
  html body .gd-body { grid-template-columns: minmax(0, 1fr); padding-top: 0; }
  html body .gd-toc {
    position: static; max-width: var(--gd-measure); margin: 0 0 56px; padding: 22px 24px 14px;
    border-radius: 20px; background: #fff; box-shadow: var(--gd-card);
  }
  html body .gd-toc ol { border-left: 0; }
  html body .gd-toc li + li a { border-top: 1px solid var(--gd-line); }
  html body .gd-toc li a { margin-left: 0; padding: 10px 0; border-left: 0; }
  html body .gd-toc li a:hover { border-left: 0; }
}

/* ---------------------------------------------------------------- 3 · the article: measure, type, rhythm */
html body .gd-article { min-width: 0; color: var(--gd-text); font: 400 18px/1.72 var(--font-sans); letter-spacing: -.003em; }
html body .gd-sec { scroll-margin-top: var(--gd-clear); }
html body .gd-sec > * { max-width: var(--gd-measure); }
html body .gd-sec > :is(.gd-table, .gd-figure, .gd-cases, .gd-cards, .gd-wide, .gd-faq-list) { max-width: none; }
html body .gd-sec + .gd-sec { margin-top: 96px; }

/* H2: a question, with the logo's slanted stroke hanging in the gutter as the section marker */
html body .gd-article h2 {
  position: relative; margin: 0 0 24px; color: var(--gd-ink);
  font: 650 clamp(27px, 2.5vw, 35px)/1.16 var(--font-display); letter-spacing: -.03em; text-wrap: balance;
}
html body .gd-article h2::before {
  content: ""; position: absolute; left: -32px; top: .12em; width: 5px; height: .92em; border-radius: 3px;
  background: var(--gd-blue); transform: var(--gd-stroke);
}
html body .gd-article h3 {
  margin: 44px 0 10px; color: var(--gd-ink);
  font: 650 clamp(19px, 1.5vw, 21px)/1.32 var(--font-display); letter-spacing: -.018em;
}
html body .gd-article h2 + h3 { margin-top: 30px; }
html body .gd-article p { margin: 0 0 18px; text-wrap: pretty; }
html body .gd-article strong { color: var(--gd-ink); font-weight: 600; }
html body .gd-article em { font-style: italic; }
html body .gd-article :is(p, li, td, th, figcaption, dd) a:not(.btn) {
  color: var(--gd-blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: rgba(0, 107, 203, .34); transition: text-decoration-color 140ms ease;
}
html body .gd-article :is(p, li, td, th, figcaption, dd) a:not(.btn):hover { text-decoration-color: var(--gd-blue); }
/* a link that leaves the site (a statute, a judgment) says so, quietly */
html body .gd-article :is(p, li, td, figcaption, dd) a[href^="http"]:not([href^="https://kududoc.co.za"])::after {
  content: "\2197"; display: inline-block; margin-left: .12em; font-size: .78em; line-height: 1; text-decoration: none; opacity: .7;
}
@media (max-width: 1099px) {
  html body .gd-article h2 { padding-left: 22px; }
  html body .gd-article h2::before { left: 2px; }
}
@media (max-width: 640px) {
  html body .gd-article { font-size: 17px; line-height: 1.7; }
  html body .gd-sec + .gd-sec { margin-top: 72px; }
  html body .gd-article h2 { margin-bottom: 20px; font-size: 26px; }
}

/* lists: the slanted stroke as the bullet; numbered steps */
html body .gd-article ul.gd-list, html body .gd-article ol.gd-steps { margin: 0 0 22px; padding: 0; list-style: none; }
html body .gd-article ul.gd-list > li { position: relative; margin: 0 0 10px; padding-left: 24px; }
html body .gd-article ul.gd-list > li::before {
  content: ""; position: absolute; left: 4px; top: .48em; width: 3px; height: .8em; border-radius: 2px; background: var(--gd-blue); transform: var(--gd-stroke);
}
html body .gd-article ol.gd-steps { counter-reset: gd-step; }
html body .gd-article ol.gd-steps > li { position: relative; counter-increment: gd-step; margin: 0 0 14px; padding-left: 44px; }
html body .gd-article ol.gd-steps > li::before {
  content: counter(gd-step); position: absolute; left: 0; top: .1em; display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 999px; background: #e3f0fc; color: #0b5cad; font: 650 14px/1 var(--font-display);
}

/* a checklist: an empty square to tick on paper — no tick glyph, ever */
html body .gd-article ul.gd-checklist { margin: 0 0 24px; padding: 0; list-style: none; border-top: 1px solid var(--gd-line); }
html body .gd-article ul.gd-checklist > li {
  position: relative; margin: 0; padding: 13px 0 13px 36px; border-bottom: 1px solid var(--gd-line); line-height: 1.55;
}
html body .gd-article ul.gd-checklist > li::before {
  content: ""; position: absolute; left: 2px; top: 16px; width: 16px; height: 16px; border-radius: 5px;
  box-shadow: inset 0 0 0 1.5px #8fb6dc; background: #fff;
}
html body .gd-article ul.gd-checklist > li b { color: var(--gd-ink); font-weight: 600; }
html body .gd-article ul.gd-checklist > li span { display: block; color: var(--gd-mute); font-size: .88em; }

/* a short glossary */
html body .gd-article dl.gd-defs { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr); margin: 8px 0 26px; border-top: 1px solid var(--gd-line); }
html body .gd-article dl.gd-defs dt, html body .gd-article dl.gd-defs dd { margin: 0; padding: 13px 0; border-bottom: 1px solid var(--gd-line); }
html body .gd-article dl.gd-defs dt { padding-right: 20px; color: var(--gd-ink); font: 650 16px/1.5 var(--font-display); letter-spacing: -.01em; }
html body .gd-article dl.gd-defs dd { font-size: 16.5px; line-height: 1.6; }
@media (max-width: 640px) {
  html body .gd-article dl.gd-defs { grid-template-columns: minmax(0, 1fr); }
  html body .gd-article dl.gd-defs dt { padding-bottom: 0; border-bottom: 0; }
  html body .gd-article dl.gd-defs dd { padding-top: 4px; }
}

/* ---------------------------------------------------------------- 4 · the statute quote */
html body .gd-law {
  position: relative; margin: 32px 0 36px; padding: 26px 30px 22px 58px; border-radius: 20px;
  background: #fff; box-shadow: var(--gd-card);
}
html body .gd-law::before {   /* the mark's stroke as the quote's rule */
  content: ""; position: absolute; left: 28px; top: 30px; width: 5px; height: 34px; border-radius: 3px;
  background: var(--gd-blue); transform: var(--gd-stroke);
}
html body .gd-law blockquote { margin: 0; padding: 0; border: 0; }
html body .gd-law blockquote p {
  margin: 0; color: var(--gd-ink); font: 500 clamp(18px, 1.55vw, 20.5px)/1.52 var(--font-display); letter-spacing: -.012em; text-wrap: pretty;
}
html body .gd-law figcaption { margin-top: 14px; color: var(--gd-slate); font: 600 13.5px/1.4 var(--font-sans); letter-spacing: 0; }
html body .gd-law figcaption a { color: var(--gd-blue) !important; text-decoration: none !important; }
html body .gd-law figcaption a:hover { text-decoration: underline !important; }
@media (max-width: 640px) {
  html body .gd-law { padding: 22px 20px 18px 44px; border-radius: 18px; }
  html body .gd-law::before { left: 19px; top: 25px; height: 28px; }
}

/* ---------------------------------------------------------------- 5 · tables: a white card; stacked rows on phones */
html body .gd-table {
  margin: 32px 0 38px; border-radius: 20px; background: #fff; box-shadow: var(--gd-card);
  overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
html body .gd-table:focus-visible { outline: 2px solid var(--gd-blue); outline-offset: 3px; }
html body .gd-table table { width: 100%; border-collapse: collapse; border-spacing: 0; color: var(--gd-text); font: 400 15.5px/1.55 var(--font-sans); }
html body .gd-table caption {
  caption-side: top; padding: 22px 24px 14px; text-align: left; color: var(--gd-ink);
  font: 650 17px/1.35 var(--font-display); letter-spacing: -.015em;
}
html body .gd-table thead :is(th, td) {
  padding: 13px 20px 12px; background: var(--gd-tint); border-top: 1px solid var(--gd-line); border-bottom: 1px solid var(--gd-line);
  color: var(--gd-mute); text-align: left; vertical-align: bottom; white-space: nowrap;
  font: 600 11.5px/1.3 var(--font-sans); letter-spacing: .12em; text-transform: uppercase;
}
html body .gd-table table:not(:has(caption)) thead :is(th, td) { border-top: 0; }
html body .gd-table thead :is(th, td):first-child, html body .gd-table tbody :is(th, td):first-child { padding-left: 24px; }
html body .gd-table thead :is(th, td):last-child, html body .gd-table tbody :is(th, td):last-child { padding-right: 24px; }
html body .gd-table tbody :is(th, td) { padding: 17px 20px; border-top: 1px solid var(--gd-line); text-align: left; vertical-align: top; }
html body .gd-table tbody tr:first-child :is(th, td) { border-top: 0; }
html body .gd-table tbody th { color: var(--gd-ink); font: 650 16px/1.4 var(--font-display); letter-spacing: -.012em; }
html body .gd-table tbody th small, html body .gd-table td small { display: block; margin-top: 4px; color: var(--gd-mute); font: 500 13px/1.45 var(--font-sans); letter-spacing: 0; }
html body .gd-table td b { color: var(--gd-ink); font-weight: 600; }
html body .gd-table .gd-num { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 8px; background: #e3f0fc; color: #0b5cad; font: 650 13px/1 var(--font-display); }
html body .gd-table--scroll table { min-width: 680px; }

@media (max-width: 640px) {
  html body .gd-table:has(td[data-label]):not(.gd-table--scroll) { overflow: visible; background: transparent; box-shadow: none; border-radius: 0; }
  html body .gd-table:has(td[data-label]):not(.gd-table--scroll) :is(table, tbody, tr, th, td) { display: block; }
  html body .gd-table:has(td[data-label]):not(.gd-table--scroll) caption { display: block; padding: 0 2px 14px; font-size: 16px; }
  html body .gd-table:has(td[data-label]):not(.gd-table--scroll) thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  html body .gd-table:has(td[data-label]):not(.gd-table--scroll) tbody tr {
    margin: 0 0 12px; padding: 18px 18px 12px; border-radius: 18px; background: #fff; box-shadow: var(--gd-card);
  }
  html body .gd-table:has(td[data-label]):not(.gd-table--scroll) tbody :is(th, td) { padding: 0 0 10px !important; border: 0; }
  html body .gd-table:has(td[data-label]):not(.gd-table--scroll) tbody th { padding-bottom: 12px !important; font-size: 17px; }
  html body .gd-table:has(td[data-label]):not(.gd-table--scroll) td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px; color: var(--gd-mute);
    font: 600 11px/1.4 var(--font-sans); letter-spacing: .11em; text-transform: uppercase;
  }
  html body .gd-table { border-radius: 18px; }
}

/* ---------------------------------------------------------------- 6 · the callout (a takeaway, not a banner) */
html body .gd-note { margin: 30px 0 34px; padding: 22px 26px 6px; border-radius: 20px; background: #e8f2fc; color: var(--gd-ink); }
html body .gd-note .gd-note-label {
  display: flex; align-items: center; gap: 10px; margin: 0 0 10px; color: var(--gd-blue);
  font: 600 12px/1 var(--font-sans); letter-spacing: .15em; text-transform: uppercase;
}
html body .gd-note .gd-note-label::before { content: ""; width: 3px; height: 13px; border-radius: 2px; background: var(--gd-blue); transform: var(--gd-stroke); }
html body .gd-note p:not(.gd-note-label) { font-size: 17.5px; line-height: 1.62; }

/* ---------------------------------------------------------------- 7 · case law / dated records */
html body .gd-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin: 30px 0 34px; }
html body .gd-case { display: flex; flex-direction: column; padding: 24px 26px 8px; border-radius: 20px; background: #fff; box-shadow: var(--gd-card); }
html body .gd-case-meta {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px !important; color: var(--gd-blue);
  font: 600 13.5px/1.4 var(--font-sans) !important; letter-spacing: .01em;   /* sentence case: legal refs keep their capitals */
}
html body .gd-case-meta::before { content: ""; flex: none; width: 3px; height: 13px; border-radius: 2px; background: var(--gd-blue); transform: var(--gd-stroke); }
html body .gd-article .gd-case .gd-case-cite {
  margin: auto 0 0 !important; padding: 14px 0 18px; border-top: 1px solid var(--gd-line);
  color: var(--gd-mute); font: 500 13.5px/1.45 var(--font-sans) !important;
}
html body .gd-case-cite a { font-weight: 600; }
html body .gd-case > p:nth-last-child(2) { margin-bottom: 20px; }
html body .gd-article .gd-case h3 { margin: 0 0 12px; font-size: 20px; }
html body .gd-case p:not(.gd-case-meta) { font-size: 16px; line-height: 1.65; }
html body .gd-case--quiet { background: transparent; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .12); }

/* ---------------------------------------------------------------- 8 · product panels (the app, drawn in HTML) */
html body .gd-figure { margin: 36px 0 44px; }
html body .gd-stage { padding: clamp(18px, 3vw, 36px); border-radius: 24px; background: var(--gd-stage); }
html body .gd-stage--pair { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 20px; align-items: start; }
html body .gd-figure figcaption {
  position: relative; max-width: 64ch; margin: 16px 0 0; padding-left: 18px; color: var(--gd-slate); font: 400 14.5px/1.55 var(--font-sans);
}
html body .gd-figure figcaption::before { content: ""; position: absolute; left: 3px; top: .38em; width: 2px; height: 12px; border-radius: 2px; background: #8fb6dc; transform: var(--gd-stroke); }
@media (max-width: 900px) { html body .gd-stage--pair { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { html body .gd-stage { margin: 0 -8px; padding: 14px; border-radius: 20px; } }

html body .gd-app {
  overflow: hidden; border-radius: 16px; background: #fff; box-shadow: var(--gd-lift);
  color: var(--gd-ink); font: 400 14px/1.45 var(--font-sans); letter-spacing: 0; text-align: left;
}
html body .gd-app-bar {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px;
  background: #f6f9fd; border-bottom: 1px solid rgba(16, 45, 73, .08);
}
html body .gd-app-bar .icon { flex: none; width: 17px; height: 17px; color: var(--gd-blue); }
html body .gd-app-bar b { overflow: hidden; min-width: 0; color: var(--gd-ink); font: 600 13.5px/1.3 var(--font-sans); white-space: nowrap; text-overflow: ellipsis; }
html body .gd-app-bar > :last-child:not(b) { margin-left: auto; flex: none; }
html body .gd-app-body { padding: 16px 18px 18px; }
html body .gd-app-label {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px !important;
  color: var(--gd-mute); font: 600 11px/1.3 var(--font-sans) !important; letter-spacing: .12em; text-transform: uppercase;
}
html body .gd-app-label span { color: var(--gd-slate); letter-spacing: .04em; text-transform: none; font-weight: 500; }
html body .gd-app-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 7px 0;
  border-top: 1px solid rgba(16, 45, 73, .07); color: var(--gd-text); font-size: 13.5px;
}
html body .gd-app-row time, html body .gd-app-row .gd-app-meta { flex: none; color: var(--gd-mute); font-size: 12.5px; font-variant-numeric: tabular-nums; }
html body .gd-app-row .gd-app-meta:not(:has(time)) { font-variant-numeric: normal; }   /* words ('Self-signed') keep their own spacing */
html body .gd-app-row b { color: var(--gd-ink); font-weight: 600; }
html body .gd-app-person {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 12px 0 4px;
}
html body .gd-app-person:first-of-type { margin-top: 2px; }
html body .gd-app-person i {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: #e3f0fc;
  color: #0b5cad; font: 650 11.5px/1 var(--font-display); font-style: normal;
}
html body .gd-app-person b { overflow: hidden; color: var(--gd-ink); font: 600 14px/1.3 var(--font-sans); white-space: nowrap; text-overflow: ellipsis; }
html body .gd-app-person small { display: block; color: var(--gd-mute); font: 500 12px/1.3 var(--font-sans); }
html body .gd-app-steps { margin: 0 0 6px 36px; }
html body .gd-app-steps .gd-app-row { padding: 5px 0; }
html body .gd-app-foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(16, 45, 73, .1); }
html body .gd-app-code { color: var(--gd-ink); font: 500 12px/1.4 var(--font-mono, ui-monospace, Menlo, monospace); letter-spacing: -.01em; }
html body .gd-app-alert {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 16px; border-radius: 14px; background: #f3f7fc;
  box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .08);
}
html body .gd-app-alert .gd-app-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--gd-ink); color: #fff; }
html body .gd-app-alert .gd-app-ic .icon { width: 19px; height: 19px; }
html body .gd-app-alert b { display: block; margin: 1px 0 4px; color: var(--gd-ink); font: 650 15.5px/1.3 var(--font-display); letter-spacing: -.012em; }
html body .gd-app-alert p { margin: 0 0 8px !important; color: var(--gd-text); font: 400 13.5px/1.55 var(--font-sans) !important; }
html body .gd-app-alert p:last-child { margin-bottom: 0 !important; }
html body .gd-app-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
html body .gd-app-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 999px;
  background: var(--gd-blue); color: #fff; font: 600 13px/1 var(--font-sans); white-space: nowrap;
}
html body .gd-app-btn .icon { width: 15px; height: 15px; }
html body .gd-app-btn--ghost { background: #fff; color: var(--gd-ink); box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .16); }
html body .gd-app-btn--off { background: #eef2f6; color: #9aa7b5; box-shadow: none; }

html body .gd-chip {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px;
  background: #eef2f7; color: #3f5470; font: 600 12px/1 var(--font-sans); white-space: nowrap;
}
html body .gd-chip--blue { background: #e3f0fc; color: #0b5cad; }
html body .gd-chip--ink { background: var(--gd-ink); color: #fff; }
html body .gd-chip--sealed { background: #fff0e6; color: #d8561c; box-shadow: inset 0 0 0 1px rgba(255, 118, 43, .4); font-weight: 700; }

/* ---------------------------------------------------------------- 9 · the FAQ: white cards, a round + that turns to − */
html body .gd-faq-list { display: grid; gap: 10px; max-width: 820px; }
html body .gd-faq-list details { margin: 0; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .08), 0 1px 2px rgba(16, 45, 73, .04); }
html body .gd-faq-list details[open] { box-shadow: inset 0 0 0 1.5px rgba(0, 107, 203, .32), 0 14px 32px -22px rgba(16, 45, 73, .38); }
html body .gd-faq-list details > summary {
  position: relative; display: block; padding: 21px 68px 21px 24px; list-style: none; cursor: pointer;
  color: var(--gd-ink); font: 600 17px/1.42 var(--font-sans); letter-spacing: -.008em; transition: color 140ms ease;
}
html body .gd-faq-list details > summary::-webkit-details-marker { display: none; }
html body .gd-faq-list details > summary::after {
  content: "+"; position: absolute; right: 20px; top: 50%; display: grid; place-items: center; width: 30px; height: 30px; margin-top: -15px;
  border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .14); color: var(--gd-blue); font: 500 19px/1 var(--font-sans);
  transition: box-shadow 140ms ease, background 140ms ease;
}
html body .gd-faq-list details[open] > summary::after { content: "\2212"; background: var(--gd-blue); color: #fff; box-shadow: none; }
html body .gd-faq-list details > summary:hover { color: var(--gd-blue); }
html body .gd-faq-list details > summary:hover::after { box-shadow: inset 0 0 0 1.5px var(--gd-blue); }
html body .gd-faq-list details > :not(summary) { max-width: 70ch; margin: 0; padding: 0 24px 0 24px; color: var(--gd-text); font: 400 16.5px/1.7 var(--font-sans); }
html body .gd-faq-list details > :not(summary) + :not(summary) { padding-top: 12px; }
html body .gd-faq-list details > :last-child:not(summary) { padding-bottom: 24px; }
@media (max-width: 640px) {
  html body .gd-faq-list details > summary { padding: 18px 58px 18px 18px; font-size: 16px; }
  html body .gd-faq-list details > summary::after { right: 14px; width: 28px; height: 28px; margin-top: -14px; }
  html body .gd-faq-list details > :not(summary) { padding-left: 18px; padding-right: 18px; font-size: 16px; }
}

/* ---------------------------------------------------------------- 10 · sources: numbered, named, with the host */
html body .gd-source-list { margin: 8px 0 0; padding: 0; list-style: none; counter-reset: gd-src; border-top: 1px solid var(--gd-line); }
html body .gd-source-list li {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; margin: 0; padding: 16px 0 16px 42px;
  border-bottom: 1px solid var(--gd-line); counter-increment: gd-src;
}
html body .gd-source-list li::before {
  content: counter(gd-src, decimal-leading-zero); position: absolute; left: 0; top: 18px; color: #8a99aa;
  font: 500 12.5px/1.4 var(--font-sans); font-variant-numeric: tabular-nums;
}
html body .gd-article .gd-source-list li > a:not(.btn) { color: var(--gd-ink); font: 600 16px/1.45 var(--font-sans); text-decoration-color: rgba(16, 45, 73, .25); }
html body .gd-article .gd-source-list li > a:not(.btn):hover { color: var(--gd-blue); text-decoration-color: var(--gd-blue); }
html body .gd-src-host {
  align-self: start; margin-top: 1px; padding: 3px 9px; border-radius: 999px; background: #eef4fb;
  color: #3f5470; font: 600 11.5px/1.3 var(--font-sans); white-space: nowrap;
}
html body .gd-src-note { grid-column: 1 / -1; color: var(--gd-mute); font: 400 14.5px/1.5 var(--font-sans); }
html body .gd-article .gd-checked-foot {
  display: flex; align-items: center; gap: 10px; margin: 20px 0 0; color: var(--gd-slate); font: 500 14.5px/1.4 var(--font-sans);
}
html body .gd-checked-foot::before { content: ""; width: 3px; height: 13px; border-radius: 2px; background: var(--gd-blue); transform: var(--gd-stroke); }
html body .gd-checked-foot time { color: var(--gd-ink); font-weight: 600; }
@media (max-width: 640px) {
  html body .gd-source-list li { grid-template-columns: minmax(0, 1fr); padding-left: 34px; }
  html body .gd-src-host { justify-self: start; }
}

/* ---------------------------------------------------------------- 11 · cards: related guides (and any guide card) */
html body .gd-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 8px; }
html body .gd-card {
  position: relative; display: flex; flex-direction: column; min-height: 188px; padding: 26px 28px 20px; border-radius: 20px;
  background: #fff; box-shadow: var(--gd-card); transition: box-shadow 160ms ease, transform 160ms ease;
}
html body .gd-article .gd-card h3, html body .gd-card h3 { margin: 0 0 10px; font: 650 19px/1.3 var(--font-display); letter-spacing: -.018em; }
html body .gd-card h3 a { color: var(--gd-ink) !important; text-decoration: none !important; }
html body .gd-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   /* the whole card is the link */
html body .gd-card h3 a:focus-visible { outline: none; }
html body .gd-card:has(h3 a:focus-visible) { outline: 2px solid var(--gd-blue); outline-offset: 3px; }
html body .gd-card p { margin: 0 0 16px; color: var(--gd-slate); font: 400 15.5px/1.6 var(--font-sans); }
html body .gd-card .gd-card-date {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: auto 0 0; padding-top: 14px;
  border-top: 1px solid var(--gd-line); color: var(--gd-mute); font: 500 13px/1.4 var(--font-sans);
}
html body .gd-card .gd-card-date::after { content: "\2192"; color: var(--gd-blue); font-size: 16px; transition: transform 160ms ease; }
html body .gd-card:hover { box-shadow: var(--gd-lift); transform: translateY(-2px); }
html body .gd-card:hover h3 a { color: var(--gd-blue) !important; }
html body .gd-card:hover .gd-card-date::after { transform: translateX(3px); }

/* ---------------------------------------------------------------- 12 · the hub: groups and the index of guides */
html body .gd-hub { padding-top: 8px; padding-bottom: 136px; }
html body .gd-group { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px clamp(40px, 6vw, 96px); align-items: start; scroll-margin-top: var(--gd-clear); }
html body .gd-group + .gd-group { margin-top: 88px; }
html body .gd-group-head { position: sticky; top: var(--gd-clear); padding-top: 18px; }
html body .gd-group-head h2 {
  position: relative; margin: 0 0 14px; padding-left: 24px; color: var(--gd-ink);
  font: 650 clamp(26px, 2.4vw, 32px)/1.14 var(--font-display); letter-spacing: -.03em;
}
html body .gd-group-head h2::before {
  content: ""; position: absolute; left: 2px; top: .12em; width: 5px; height: .92em; border-radius: 3px; background: var(--gd-blue); transform: var(--gd-stroke);
}
html body .gd-group-head p { margin: 0; padding-left: 24px; color: var(--gd-slate); font: 400 16px/1.6 var(--font-sans); }
html body .gd-index { border-radius: 22px; background: #fff; box-shadow: var(--gd-card); overflow: hidden; }
html body .gd-entry {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) 28px; gap: 6px 36px; align-items: start;
  padding: 28px 30px 26px; transition: background 160ms ease;
}
html body .gd-entry + .gd-entry { box-shadow: inset 0 1px 0 var(--gd-line); }
html body .gd-entry h3 { grid-column: 1; grid-row: 1 / span 2; margin: 0; font: 650 clamp(18px, 1.5vw, 20.5px)/1.3 var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
html body .gd-entry h3 a { color: var(--gd-ink); text-decoration: none; }
html body .gd-entry h3 a::after { content: ""; position: absolute; inset: 0; }
html body .gd-entry h3 a:focus-visible { outline: none; }
html body .gd-entry:has(h3 a:focus-visible) { outline: 2px solid var(--gd-blue); outline-offset: -4px; border-radius: 18px; }
html body .gd-entry-line { grid-column: 2; margin: 0; color: var(--gd-text); font: 400 16px/1.62 var(--font-sans); text-wrap: pretty; }
html body .gd-entry-date {
  grid-column: 2; display: flex; align-items: center; gap: 9px; margin: 8px 0 0; color: var(--gd-mute); font: 500 13px/1.4 var(--font-sans);
}
html body .gd-entry-date::before { content: ""; width: 2px; height: 11px; border-radius: 2px; background: #8fb6dc; transform: var(--gd-stroke); }
html body .gd-entry::after {
  content: "\2192"; grid-column: 3; grid-row: 1; justify-self: end; color: var(--gd-blue); font: 500 18px/1.3 var(--font-sans);
  transition: transform 160ms ease;
}
html body .gd-entry:hover { background: #f7fafd; }
html body .gd-entry:hover h3 a { color: var(--gd-blue); }
html body .gd-entry:hover::after { transform: translateX(4px); }
@media (max-width: 1099px) {
  html body .gd-group { grid-template-columns: minmax(0, 1fr); }
  html body .gd-group-head { position: static; padding-top: 0; max-width: 60ch; }
}
@media (max-width: 720px) {
  html body .gd-entry { grid-template-columns: minmax(0, 1fr) 24px; gap: 10px 14px; padding: 22px 20px 20px; }
  html body .gd-entry h3 { grid-column: 1; grid-row: auto; }
  html body .gd-entry-line, html body .gd-entry-date { grid-column: 1; }
  html body .gd-entry::after { grid-column: 2; grid-row: 1; }
  html body .gd-entry-line { font-size: 15.5px; }
  html body .gd-hub { padding-bottom: 104px; }
  html body .gd-group + .gd-group { margin-top: 64px; }
  html body .gd-group-head h2 { font-size: 26px; }
}

/* ---------------------------------------------------------------- 13 · the closing band (theme.css makes #closing.cta-gradient full-bleed blue) */
html body .gd-cta { position: relative; overflow: hidden !important; }
html body .gd-cta::after {   /* the mark's four strokes as a flat poster, cropped at the right */
  content: ""; position: absolute; inset: -12% -4vw auto auto; z-index: 0; width: min(46vw, 620px); height: 124%; pointer-events: none;
  opacity: 1; filter: none; transform: none; animation: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 72'%3E%3Cg transform='translate(40 36) rotate(-8) skewX(-14) translate(-31 -32)' stroke-linecap='round' stroke-width='6.5'%3E%3Cpath d='M13 14V50' stroke='%23004e99' stroke-opacity='.2'/%3E%3Cpath d='M25 9V55' stroke='%23004e99' stroke-opacity='.26'/%3E%3Cpath d='M37 13V51' stroke='%23004e99' stroke-opacity='.16'/%3E%3Cpath d='M49 18V46' stroke='%23004e99' stroke-opacity='.22'/%3E%3C/g%3E%3C/svg%3E") right center / contain no-repeat;
}
html body #closing.gd-cta > .gd-cta-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; }
html body .gd-cta .gd-cta-kicker {
  display: flex; align-items: center; gap: 10px; margin: 0 0 22px; color: var(--gd-pale);
  font: 600 12.5px/1 var(--font-sans); letter-spacing: .15em; text-transform: uppercase;
}
html body .gd-cta .gd-cta-kicker::before { content: ""; width: 3px; height: 13px; border-radius: 2px; background: var(--gd-sky); transform: var(--gd-stroke); }
html body #closing.gd-cta h2 { max-width: 20ch; margin: 0; text-wrap: balance; color: #fff; font: 650 clamp(34px, 4vw, 56px)/1.04 var(--font-display); letter-spacing: -.035em; }
html body #closing.gd-cta h2 span { display: block; text-wrap: balance; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--gd-sky); padding: 0; }
html body #closing.gd-cta p:not(.gd-cta-kicker) { max-width: 46ch; margin: 22px 0 0; color: rgba(236, 244, 252, .86); font: 400 clamp(17px, 1.5vw, 20px)/1.55 var(--font-sans); }
html body .gd-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
@media (max-width: 640px) {
  html body #closing.gd-cta { padding: 88px 20px 80px !important; }
  html body .gd-cta::after { width: 70vw; right: -24vw; opacity: .7; }
  html body .gd-cta-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------------------------------------------------------------- 14 · print: the article only */
@media print {
  html body :is(.nav, .mnav, .v6-foot-band, .gd-toc, .gd-cta) { display: none !important; }
  html body .gd-open { padding: 0 0 24px; background: none !important; color: #000; }
  html body .gd-open::after { display: none; }
  html body .gd-open :is(h1, .gd-lead, .gd-lead-next, .gd-checked, .gd-crumbs li, .gd-crumbs a, .gd-checked time) { color: #000 !important; }
  html body .gd-body { display: block; }
  html body .gd-faq-list details > :not(summary) { display: block; }
}