/* Guidance section styles (warmloop.com/guidance/).

   Load order on every guidance page:
     /assets/fonts.css    self-hosted Fraunces + Inter (no third-party request)
     /assets/site.css     the site chrome: header, mobile menu, footer (every page)
     /assets/legal.css    the shared sheet: colour tokens, base type, eyebrow
     /assets/guidance.css this file: what the guidance pages need beyond legal.css

   The colour and type tokens come from legal.css, so this file does not redefine them.
   It adds only the tokens legal.css does not carry, with the values index.html uses
   (index.html :root, lines 42-48), and a few derived component colours chosen for
   WCAG AA contrast. Values copied from index.html are marked "(index.html:NNN)".

   Mobile first. No external resource. No script dependency. Respects reduced motion.
   Every rule for the article and index pages is scoped under body.gd or a gd- class,
   so nothing here can change the policy pages that also use legal.css. */

/* ---------- Tokens legal.css does not define ---------- */
:root {
  --verify: #1F8A5B;                 /* (index.html:42) */
  --flag: #C23B3B;                   /* (index.html:43) */
  --shadow: 0 1px 2px rgba(21,26,45,.04), 0 8px 30px rgba(21,26,45,.06);    /* (index.html:46) */
  --shadow-lg: 0 2px 6px rgba(21,26,45,.05), 0 24px 60px rgba(21,26,45,.12); /* (index.html:47) */
  --maxw: 1120px;                    /* (index.html:48) */

  /* Derived for text on tinted chips and callouts: each passes 4.5:1 on its tint. */
  --verify-ink: #14603F;             /* 6.5:1 on --verify-tint */
  --verify-tint: #E4F1EB;            /* --verify at 12% on white */
  --amber-ink: #7A4808;              /* 7.0:1 on --amber-tint */
  --amber-icon: #B87614;             /* the homepage's warn-icon colour (index.html:182) */
  --amber-tint: #FDF4E8;             /* --amber at 12% on white */
  --flag-ink: #9A2626;               /* 6.6:1 on --flag-tint */
  --flag-tint: #F8E7E7;              /* --flag at 12% on white */

  --gd-header-h: 68px;               /* header.site .nav height (legal.css:20) */
  --gd-measure: 36.5rem;             /* text measure, 584px: about 72 characters a line of English at 17px Inter (8.1px a character, measured) */
}

/* ---------- Base additions ---------- */
html { scroll-behavior: smooth; }
body.gd main { padding: 0; }                       /* legal.css pads main; the CTA band must meet the footer */
body.gd img, body.gd svg { display: block; }
body.gd :focus-visible { outline: 2px solid var(--ember-deep); outline-offset: 3px; border-radius: 4px; }
body.gd .band-dark :focus-visible,
body.gd footer.site :focus-visible { outline-color: var(--amber); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Anything a link can land on clears the sticky header. */
body.gd [id] { scroll-margin-top: calc(var(--gd-header-h) + 20px); }

/* ---------- Buttons (index.html:90-98) ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-size: 15.5px; font-weight: 600;
  padding: 13px 22px; border-radius: 12px; cursor: pointer; border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
  text-decoration: none; white-space: nowrap;
}
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 6px 18px rgba(228,87,46,.28); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(228,87,46,.34); text-decoration: none; }

/* ---------- Header, mobile menu and footer: /assets/site.css ---------- */

/* ---------- Breadcrumb ---------- */
.gd-crumbs { padding-top: clamp(22px, 4vw, 36px); }
.gd-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 14px; color: var(--ink-soft); }
.gd-crumbs li { display: inline-flex; align-items: center; }
.gd-crumbs li:not(:last-child)::after { content: "/"; margin: 0 10px; color: var(--muted); }   /* trailing, so a wrapped line never starts with one */
.gd-crumbs a { color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.gd-crumbs a:hover { color: var(--ink); text-decoration-color: currentColor; }
.gd-crumbs [aria-current="page"] { color: var(--ink); font-weight: 500; }

/* ---------- Title block ---------- */
.gd-head { max-width: 860px; padding: clamp(18px, 3vw, 28px) 0 clamp(26px, 4vw, 40px); border-bottom: 1px solid var(--line); margin-bottom: clamp(26px, 4vw, 40px); }
.gd-head h1 { font-size: clamp(32px, 5.4vw, 54px); margin: 16px 0 16px; overflow-wrap: break-word; }
.gd-standfirst { font-size: clamp(18px, 2.2vw, 21px); line-height: 1.5; color: var(--ink-soft); max-width: 62ch; margin: 0 0 22px; }
.gd-meta { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0 0 8px; font-size: 15px; color: var(--ink-soft); }
.gd-meta > span:not(:last-child)::after { content: "\00B7"; margin: 0 10px; color: var(--muted); }   /* trailing, so a wrapped line never starts with one */
.gd-meta b { color: var(--ink); font-weight: 600; }
.gd-current { margin: 0; font-size: 14.5px; color: var(--ink-soft); display: flex; gap: 8px; align-items: flex-start; }
.gd-current .dot { margin-top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(242,160,61,.2); flex: none; }
.gd-print-url { display: none; }

/* ---------- Layout: contents column + article column ---------- */
.gd-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-bottom: clamp(48px, 7vw, 88px); }
@media (min-width: 1080px) {
  .gd-layout { grid-template-columns: 232px minmax(0, 1fr); gap: 56px; align-items: start; }
}

/* ---------- On-page contents: inline on phones, sticky side column on wide screens ---------- */
.gd-toc { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; font-size: 15px; }
.gd-toc h2 { font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ember-deep); margin: 0 0 10px; }
.gd-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.gd-toc li { margin: 0; counter-increment: toc; }
.gd-toc a { display: grid; grid-template-columns: 1.6em 1fr; padding: 6px 0; color: var(--ink-soft); line-height: 1.4; }
.gd-toc a::before { content: counter(toc); color: var(--muted); font-variant-numeric: tabular-nums; }
.gd-toc a:hover { color: var(--ink); text-decoration: none; }
.gd-toc .gd-toc-sub a::before { content: ""; }
@media (min-width: 1080px) {
  .gd-toc {
    position: sticky; top: calc(var(--gd-header-h) + 24px);
    max-height: calc(100vh - var(--gd-header-h) - 48px); overflow-y: auto;
    background: transparent; border: 0; border-left: 1px solid var(--line); border-radius: 0; padding: 2px 0 2px 18px; font-size: 14.5px;
  }
}

/* ---------- Article prose ---------- */
/* Text keeps the reading measure; tables may use the full column (about 784px on wide screens). */
.gd-prose { min-width: 0; max-width: 820px; font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.gd-prose :is(p, ul, ol, h2, h3, blockquote, hr, .gd-answer, .gd-callout, .gd-about) { max-width: var(--gd-measure); }
@media (max-width: 640px) { .gd-prose { font-size: 16px; } }
.gd-prose > * + * { margin-top: 0; }
.gd-prose h2 { font-size: clamp(24px, 3.2vw, 31px); margin: 52px 0 14px; color: var(--ink); overflow-wrap: break-word; }
.gd-prose h3 { font-family: var(--sans); font-size: 19px; font-weight: 600; letter-spacing: -0.005em; margin: 32px 0 10px; color: var(--ink); line-height: 1.3; }
.gd-prose p { margin: 0 0 1.05em; }
.gd-prose ul, .gd-prose ol { padding-left: 1.3em; margin: 0 0 1.15em; }
.gd-prose li { margin: 0 0 .5em; }
.gd-prose li::marker { color: var(--muted); }
.gd-prose b, .gd-prose strong { color: var(--ink); font-weight: 600; }
.gd-prose a { color: var(--ember-deep); text-decoration: underline; text-decoration-color: rgba(199,67,31,.4); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.gd-prose a:hover { text-decoration-color: currentColor; }
.gd-prose blockquote { margin: 0 0 1.2em; padding: 2px 0 2px 18px; border-left: 2px solid var(--amber); color: var(--ink); }
.gd-prose blockquote p:last-child { margin-bottom: 0; }
.gd-prose hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
.gd-prose code { white-space: normal; overflow-wrap: anywhere; }   /* long setting names and paths must wrap on phones */
.gd-prose > section:first-child > h2:first-child,
.gd-prose > :first-child { margin-top: 0; }

/* ---------- Short answer ---------- */
.gd-answer { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 24px 24px 20px; margin: 0 0 36px; box-shadow: var(--shadow); overflow: hidden; }
.gd-answer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad); }
.gd-answer h2 { font-size: clamp(22px, 2.8vw, 26px); margin: 0 0 10px; }
.gd-answer p { color: var(--ink); }
.gd-answer > :last-child { margin-bottom: 0; }
@media (max-width: 520px) { .gd-answer { padding: 20px 18px 16px; border-radius: 14px; } }

/* ---------- Verdict chips (colour + icon + words: never colour alone) ---------- */
.gd-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; line-height: 1.25;
  padding: 5px 11px 5px 8px; border-radius: 999px; border: 1px solid; white-space: nowrap;
}
.gd-chip svg { width: 15px; height: 15px; flex: none; }
.gd-chip--ok   { background: var(--verify-tint); border-color: var(--verify); color: var(--verify-ink); }
.gd-chip--ok svg { stroke: var(--verify); }
.gd-chip--warn { background: var(--amber-tint); border-color: var(--amber); color: var(--amber-ink); }
.gd-chip--warn svg { stroke: var(--amber-icon); }
.gd-chip--flag { background: var(--flag-tint); border-color: var(--flag); color: var(--flag-ink); }
.gd-chip--flag svg { stroke: var(--flag); }

/* ---------- Verdict table: a real table; rows stack on phones ---------- */
.gd-verdicts { width: 100%; border-collapse: collapse; margin: 6px 0 12px; font-size: 15.5px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.gd-verdicts caption { text-align: left; font-size: 14px; color: var(--ink-soft); padding: 0 0 10px; caption-side: top; }
.gd-verdicts th, .gd-verdicts td { text-align: left; vertical-align: top; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); line-height: 1.5; }
.gd-verdicts tr:last-child > * { border-bottom: 0; }
.gd-verdicts thead th { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: var(--paper-2); }
.gd-verdicts tbody th { color: var(--ink); font-weight: 600; white-space: nowrap; }
.gd-verdicts tbody th a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.gd-verdicts td { color: var(--ink-soft); }
.gd-verdicts td.gd-v { white-space: nowrap; }
/* Wide screens: the chip column shrinks to its chip and the plan column wraps, so the reason gets the room. */
@media (min-width: 641px) {
  .gd-verdicts td.gd-v { width: 1%; }
  .gd-verdicts tbody th { width: 27%; white-space: normal; }
}
.gd-table-note { font-size: 14px; color: var(--ink-soft); margin: 0 0 28px; }
@media (max-width: 640px) {
  .gd-verdicts, .gd-verdicts tbody, .gd-verdicts tr, .gd-verdicts th, .gd-verdicts td { display: block; }
  .gd-verdicts caption { display: block; }
  .gd-verdicts thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .gd-verdicts tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); align-items: center; }
  .gd-verdicts tbody tr:last-child { border-bottom: 0; }
  .gd-verdicts th, .gd-verdicts td { padding: 0; border: 0; }
  .gd-verdicts tbody th { white-space: normal; }
  .gd-verdicts td.gd-reason { grid-column: 1 / -1; }
}
/* On a phone the longer verdict chips need the full row: the chip drops under the plan name. */
@media (max-width: 520px) {
  .gd-verdicts td.gd-v { grid-column: 1 / -1; }
}

/* ---------- Comparison table: scrolls inside its own box, never the page ---------- */
.gd-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 6px 0 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); max-width: 100%; }
.gd-scroll:focus-visible { outline-offset: 2px; }
/* min-width 700px fits the full article column (about 729px) and forces the scroll below it.
   A table that needs more: raise min-width AND the .gd-scroll-hint breakpoint together. */
.gd-compare { border-collapse: collapse; width: 100%; min-width: 700px; font-size: 14.5px; line-height: 1.5; }
/* Six plans plus the question column: each plan column needs about 150px to stay readable. */
.gd-compare.gd-compare--wide { min-width: 1080px; }
.gd-compare--wide td { min-width: 132px; }
.gd-compare caption { text-align: left; padding: 14px 16px 4px; font-size: 14px; color: var(--ink-soft); }
.gd-compare th, .gd-compare td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.gd-compare thead th { font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); background: var(--paper-2); white-space: nowrap; }
.gd-compare tbody th { color: var(--ink); font-weight: 600; min-width: 140px; }
.gd-compare td { color: var(--ink-soft); }
.gd-compare tbody tr:last-child > * { border-bottom: 0; }
/* First column stays in view while the rest scrolls. */
.gd-compare tbody th, .gd-compare thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--white); box-shadow: 1px 0 0 var(--line-soft); }
.gd-compare thead th:first-child { background: var(--paper-2); z-index: 2; }
.gd-scroll-wrap { position: relative; }
.gd-scroll-wrap::after {
  content: ""; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 40px; border-radius: 0 13px 13px 0;
  background: linear-gradient(to right, rgba(255,255,255,0), #fff 85%); pointer-events: none; opacity: 0; transition: opacity .2s ease;
}
.gd-scroll-wrap.is-more::after { opacity: 1; }
/* Without the script: shown on narrow screens. With it: shown only while the table overflows. */
.gd-scroll-hint { display: none; font-size: 13.5px; color: var(--ink-soft); margin: 0 0 6px; }
@media (max-width: 760px) { .gd-scroll-hint { display: block; } }
/* A table wider than the column (min-width above the column width) always overflows: show the hint without the script too. */
.gd-scroll-hint.gd-scroll-hint--always { display: block; }
.gd-scroll-hint.js { display: none; }
.gd-scroll-hint.js.is-on { display: block; }

/* ---------- Callouts ---------- */
.gd-callout { background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--ink-soft); border-radius: 12px; padding: 16px 20px; margin: 24px 0 28px; }
.gd-callout-label { display: flex; align-items: center; gap: 8px; font-size: 12.5px !important; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin: 0 0 6px !important; }
.gd-callout-label svg { width: 16px; height: 16px; flex: none; stroke: currentColor; }
.gd-callout > :last-child { margin-bottom: 0; }
.gd-callout--warning { border-left-color: var(--amber); background: var(--amber-tint); }
.gd-callout--warning .gd-callout-label { color: var(--amber-ink); }

/* ---------- Checklist (printable boxes; nothing is stored) ---------- */
.gd-checklist { list-style: none; padding: 0 !important; margin: 8px 0 28px !important; border-top: 1px solid var(--line); }
.gd-checklist li { position: relative; padding: 13px 0 13px 38px; margin: 0 !important; border-bottom: 1px solid var(--line); }
.gd-checklist li::before {
  content: ""; position: absolute; left: 2px; top: 16px; width: 18px; height: 18px;
  border: 1.5px solid var(--ink-soft); border-radius: 5px; background: var(--white);
}
.gd-checklist li b { display: block; margin-bottom: 2px; }
/* Answers (not tasks): the WarmLoop section answers the checklist questions, so no checkbox. */
.gd-checklist.gd-answers li { padding-left: 0; }
.gd-checklist.gd-answers li::before { content: none; }

/* ---------- Source-note markers and the notes list ---------- */
.gd-fn { font-size: .72em; line-height: 0; vertical-align: super; margin-left: 1px; font-feature-settings: "tnum"; }
.gd-prose .gd-fn a { text-decoration: none; font-weight: 600; padding: 0 2px; border-radius: 3px; }
.gd-prose .gd-fn a:hover { background: rgba(228,87,46,.1); }
.gd-notes-wrap h2 { margin-top: 56px; }
.gd-notes { font-size: 15px; line-height: 1.6; padding-left: 1.8em !important; }
.gd-notes li { padding: 6px 8px; margin: 0 0 4px -8px !important; border-radius: 8px; }
.gd-notes li::marker { color: var(--ink-soft); font-weight: 600; }
.gd-notes li:target { background: var(--amber-tint); box-shadow: inset 3px 0 0 var(--amber); }
.gd-notes a { word-break: break-word; }
.gd-back { margin-left: 6px; font-weight: 600; white-space: nowrap; }
.gd-prose .gd-back { text-decoration: none; }

/* ---------- About this article ---------- */
.gd-about { background: var(--paper-2); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; margin: 48px 0 0; font-size: 15.5px; }
.gd-about h2 { font-size: 22px !important; margin: 0 0 10px !important; }
.gd-about > :last-child { margin-bottom: 0; }

/* ---------- Closing CTA band (index.html:187, 193-197, 322-326) ---------- */
body.gd section.band-dark { padding: clamp(56px, 8vw, 96px) 0; }
.band-dark { background: var(--ink); color: #E7E9F0; }
.band-dark h2, .band-dark h3 { color: #fff; }
.band-dark .eyebrow { color: var(--amber); }
.cta-final { text-align: center; }
.cta-final .narrow { max-width: 760px; margin: 0 auto; }
.cta-final .eyebrow { justify-content: center; }
.cta-final h2 { font-size: clamp(30px, 4.4vw, 46px); margin: 16px 0 16px; }
.cta-final p { font-size: 18px; color: #AEB4C6; max-width: 600px; margin: 0 auto 30px; }
.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Guidance index page ---------- */
.gd-intro { max-width: 820px; padding: clamp(18px, 3vw, 28px) 0 clamp(30px, 5vw, 48px); }
.gd-intro h1 { font-size: clamp(34px, 5.6vw, 56px); margin: 16px 0 16px; }
.gd-intro p { font-size: clamp(17px, 2.1vw, 19.5px); color: var(--ink-soft); max-width: 62ch; }
.gd-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding-bottom: clamp(56px, 8vw, 96px); list-style: none; margin: 0; padding-left: 0; }
@media (min-width: 720px) { .gd-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .gd-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gd-card { position: relative; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 26px 26px 22px; box-shadow: var(--shadow); overflow: hidden; transition: box-shadow .18s ease, transform .12s ease; }
.gd-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad); }
.gd-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.gd-card:focus-within { outline: 2px solid var(--ember-deep); outline-offset: 3px; }
.gd-card-tag { align-self: flex-start; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; margin: 0 0 14px; }
.gd-card h2 { font-size: 23px; line-height: 1.2; margin: 0 0 10px; }
.gd-card h2 a { color: var(--ink); }
.gd-card h2 a::after { content: ""; position: absolute; inset: 0; }   /* the whole card is the link */
.gd-card h2 a:hover { text-decoration: none; }
.gd-card h2 a:focus-visible { outline: none; }
.gd-card p { font-size: 15.5px; color: var(--ink-soft); margin: 0 0 16px; }
.gd-card-meta { display: flex; flex-wrap: wrap; margin-top: auto !important; margin-bottom: 0 !important; font-size: 14px !important; color: var(--ink-soft); padding-top: 12px; border-top: 1px solid var(--line-soft); }
.gd-card-meta span:not(:last-child)::after { content: "\00B7"; margin: 0 8px; color: var(--muted); }

/* ---------- Generated-article additions (_src/build.mjs) ---------- */
/* Draft banner: only on a preview branch built with --drafts; never on main. */
.gd-draft { margin: 18px 0 0; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--flag); background: var(--flag-tint); color: var(--flag-ink); font-size: 15px; }
.gd-draft b { color: var(--flag-ink); }
/* Related guidance: up to three cards under an article. */
.gd-related { border-top: 1px solid var(--line); padding-top: clamp(32px, 5vw, 48px); }
.gd-related > h2 { font-size: clamp(24px, 3vw, 30px); margin: 0 0 20px; }
.gd-about h3 { font-family: var(--sans); font-size: 16px; font-weight: 600; margin: 18px 0 6px; color: var(--ink); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .btn-primary:hover, .gd-card:hover { transform: none; }
}

/* ---------- Print: the article only, with source URLs written out ---------- */
@media print {
  @page { margin: 18mm 16mm; }
  html, body.gd { background: #fff !important; color: #000; font-size: 11pt; }
  header.site, .nav-panel, .skip-link, .gd-crumbs, .gd-toc, .band-dark, .cta-final,
  footer.site .foot-row, .gd-back, .gd-scroll-hint, .gd-scroll-wrap::after { display: none !important; }
  .gd-print-url { display: block; font-size: 9.5pt; color: #333; margin: 0 0 8pt; }
  .gd-head { border-bottom: 1px solid #999; padding-top: 0; }
  .gd-head h1 { font-size: 24pt; }
  .gd-layout { display: block; padding: 0; }
  .gd-prose { max-width: none; color: #000; font-size: 11pt; line-height: 1.5; }
  .gd-prose h2 { font-size: 16pt; margin-top: 18pt; break-after: avoid; }
  .gd-prose h3 { font-size: 12.5pt; break-after: avoid; }
  .gd-prose a { color: #000; }
  .gd-answer, .gd-callout, .gd-about, .gd-verdicts, .gd-scroll { box-shadow: none !important; background: #fff !important; border-color: #999 !important; break-inside: avoid; }
  .gd-answer::before { display: none; }
  .gd-callout { border-left-color: #333 !important; }
  .gd-callout--warning { border-left-color: var(--amber) !important; }
  .gd-verdicts { border-radius: 0; }
  .gd-scroll { overflow: visible; border-radius: 0; }
  .gd-compare, .gd-compare.gd-compare--wide { min-width: 0; font-size: 8.5pt; }
  .gd-compare--wide td { min-width: 0; }
  .gd-compare thead th { white-space: normal; }
  .gd-compare tbody th { min-width: 0; }
  .gd-compare tbody th, .gd-compare thead th:first-child { position: static; box-shadow: none; }
  .gd-verdicts thead, .gd-compare thead { display: table-header-group; }
  tr, li { break-inside: avoid; }
  .gd-chip { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .gd-notes { font-size: 9.5pt; }
  /* Write out each source URL. Add class gd-url to a link whose visible text already is its URL. */
  .gd-notes a[href^="http"]:not(.gd-url)::after { content: " <" attr(href) ">"; word-break: break-all; font-weight: 400; }
  footer.site { background: #fff !important; color: #000; border-top: 1px solid #999; padding: 8pt 0 0; }
  footer.site .foot-legal { color: #333; border-top: 0; margin: 0; padding: 0; }
}