/* Fan Fusion — subpage components ("Afterhours Ember", dark)
   Loaded after style.css on every page. Built only on the tokens and base components in style.css
   (panel, glass, chip, tag, btn, kicker, eyebrow, lede, micro, section, rail, plans/plan, terms, calc,
   faq/faqsplit, matrix, cta, founder, checks, nos, guide, monogram, mini-mark, icon-tile).
   Every component here is documented with a paste-ready snippet in _spec/PAGE_COMPONENTS.md. */

:root {
  --measure: 720px;                               /* long-form line length */
  --sticky-top: calc(var(--header-h) + 28px);     /* sticky TOC / side CTA offset */
  --amber: #EBC07A;                               /* warning callouts only */
  --amber-tint: rgba(235, 192, 122, .07);
  --amber-line: rgba(235, 192, 122, .30);
  --card-bg: rgba(255, 255, 255, .026);
  --card-line: rgba(255, 255, 255, .07);
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E");
}

/* ============================================================ 1. breadcrumbs (rendered by build.py) */
.crumbs { position: relative; z-index: 3; padding-top: 20px; }
.crumbs ol { flex-wrap: nowrap; gap: 0; overflow-x: auto; scrollbar-width: none; white-space: nowrap; font: 500 13px/1.5 var(--f-body); }
.crumbs ol::-webkit-scrollbar { display: none; }
.crumbs li { display: inline-flex; align-items: center; flex-shrink: 0; }
.crumbs li + li::before {
  content: ""; width: 5px; height: 5px; margin: 0 11px 0 9px; flex-shrink: 0;
  border-top: 1.4px solid var(--faint); border-right: 1.4px solid var(--faint); transform: rotate(45deg);
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ember); }
.crumbs [aria-current] { color: var(--ink); flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================ 2. page hero */
.phero { position: relative; isolation: isolate; padding: 40px 0 76px; }
.phero::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: -150px; bottom: 0; pointer-events: none;
  background:
    radial-gradient(760px 420px at 16% 8%, rgba(242, 139, 115, .14), transparent 70%),
    radial-gradient(620px 420px at 86% 30%, rgba(242, 139, 115, .07), transparent 70%);
}
.phero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--hairline); }
.phero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 72px; align-items: center; }
.phero .kicker { margin-bottom: 24px; }
.phero__title { font-size: clamp(38px, 4.4vw, 62px); line-height: 1.04; letter-spacing: -0.042em; text-wrap: balance; }
.phero__lede { margin-top: 22px; }
.phero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.phero .micro { margin-top: 14px; }
.phero__facts { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.phero__facts .chip .i { color: var(--sage); stroke-width: 2.4; }
.phero__side { position: relative; min-width: 0; }
.phero--center { text-align: center; }
.phero--center .phero__inner { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.phero--center .phero__lede { margin-left: auto; margin-right: auto; }
.phero--center .phero__ctas, .phero--center .phero__facts { justify-content: center; }
.phero--flat { padding-bottom: 48px; }
.phero--flat::after { display: none; }

/* ------------------------------------------------------------ 2b. term-sheet / document mockup (hero side visual) */
.sheet {
  position: relative; margin: 0 14px 14px 0; padding: 24px 26px 20px; border-radius: var(--r-lg);
  background: #151219; border: 1px solid rgba(242, 139, 115, .26); box-shadow: var(--shadow-glow);
}
.sheet::before { content: ""; position: absolute; left: 14%; right: 14%; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(246, 167, 146, .9), transparent); }
.sheet::after {
  content: ""; position: absolute; z-index: -1; inset: 16px -14px -14px 16px; border-radius: inherit;
  background: #110F15; border: 1px solid var(--line); transform: rotate(1.6deg);
}
.sheet__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.sheet__title { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 600 15px/1 var(--f-display); color: var(--ink); }
.sheet__to { margin: 16px 0 4px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.sheet__blank { display: inline-block; min-width: 128px; padding: 0 2px; border-bottom: 1px dashed var(--line-strong); font: 500 12.5px/1.6 var(--f-mono); color: var(--faint); }
.sheet__rows { margin: 0; }
.sheet__rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.sheet__rows dt { font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.sheet__rows dd { margin: 0; text-align: right; font: 500 13.5px/1.35 var(--f-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.sheet__rows .is-key { align-items: center; margin: 10px -14px; padding: 14px; border: 1px solid rgba(242, 139, 115, .30); border-radius: 14px; background: var(--tint); }
.sheet__rows .is-key dt { color: var(--ink); font-weight: 600; }
.sheet__rows .is-key dt small { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; color: var(--muted); }
.sheet__rows .is-key dd { font-size: 26px; letter-spacing: -0.03em; color: var(--ember); text-shadow: 0 0 26px rgba(242, 139, 115, .3); }
.sheet__rows .is-key dd span { font-size: 13px; letter-spacing: 0; color: var(--muted); text-shadow: none; }
.sheet__rows > div:last-child { border-bottom: 0; }
.sheet__sign { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 18px; }
.sheet__sign span { display: block; height: 30px; border-bottom: 1px solid var(--line-strong); }
.sheet__sign p { margin: 8px 0 0; font: 700 10.5px/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.sheet__foot { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* ============================================================ 3. doc layout + sticky table of contents */
.doc { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 64px; align-items: start; }
.doc--article { grid-template-columns: 220px minmax(0, var(--measure)); justify-content: center; gap: 72px; }
.doc__aside { position: sticky; top: var(--sticky-top); display: grid; gap: 22px; max-height: calc(100vh - var(--sticky-top) - 20px); overflow-y: auto; scrollbar-width: none; }
.doc__aside::-webkit-scrollbar { display: none; }
.doc__main { min-width: 0; }
.doc__main > * + * { margin-top: 48px; }
.docsec + .docsec { margin-top: 96px; }
.docsec__head { margin: 0 0 28px; }
.docsec__head h2, .docsec > h2 { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.12; letter-spacing: -0.032em; }
.docsec__head .lede { margin-top: 14px; font-size: 17.5px; max-width: 680px; }
.docsec__head .eyebrow { margin-bottom: 14px; }
.docsec > * + * { margin-top: 24px; }
.docsec > .docsec__head + * { margin-top: 0; }

.toc { position: relative; }
.toc > summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 0 14px 18px; font: 700 11.5px/1.2 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
  cursor: default; user-select: none;
}
.toc > summary::-webkit-details-marker { display: none; }
.toc > summary::marker { content: ""; }
.toc__count { font: 500 11.5px/1 var(--f-mono); letter-spacing: 0; color: var(--faint); }
.toc__chev { display: none; }
.toc__list { list-style: none; margin: 0; padding: 0; counter-reset: toc; border-left: 1px solid var(--line); }
.toc__list a {
  position: relative; display: flex; gap: 12px; margin-left: -1px; padding: 7px 0 7px 18px;
  border-left: 1px solid transparent; color: var(--body); font: 500 14px/1.45 var(--f-body); text-decoration: none;
  transition: color .2s, border-color .2s;
}
.toc__list a::before { counter-increment: toc; content: counter(toc, decimal-leading-zero); flex-shrink: 0; padding-top: 1px; font: 500 11px/1.8 var(--f-mono); color: var(--faint); transition: color .2s; }
.toc__list a:hover, .toc__list a[aria-current="true"] { color: var(--ink); border-left-color: var(--ember); }
.toc__list a:hover::before, .toc__list a[aria-current="true"]::before { color: var(--ember); }
.toc__list a:focus-visible { outline-offset: 0; }
/* desktop: always expanded, the summary is only a label (Chrome/Safari/Firefox with ::details-content) */
@media (min-width: 981px) {
  .toc::details-content { content-visibility: visible; display: block; }
  .toc > summary { pointer-events: none; }
}
/* optional small CTA under the TOC */
.doc__cta { padding: 18px; border-radius: 16px; background: rgba(242, 139, 115, .05); border: 1px solid rgba(242, 139, 115, .2); }
.doc__cta p { margin: 0 0 12px; font: 600 14.5px/1.4 var(--f-display); color: var(--ink); }
.doc__cta p small { display: block; margin-top: 4px; font: 400 12.5px/1.45 var(--f-body); color: var(--muted); }
.doc__cta .btn { width: 100%; height: 42px; padding: 0 16px; font-size: 14px; }

/* ============================================================ 4. answer block (entity-first summary) */
.answer {
  position: relative; padding: 26px 30px 26px 34px; border-radius: var(--r-md);
  background: var(--card-bg); border: 1px solid var(--card-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.answer::before { content: ""; position: absolute; left: -1px; top: 24px; bottom: 24px; width: 3px; border-radius: 0 3px 3px 0; background: var(--grad); box-shadow: 0 0 16px rgba(242, 139, 115, .55); }
.answer__top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 14px; }
.answer__top .eyebrow { margin: 0; }
.answer__stamp { margin: 0; font: 500 12px/1 var(--f-mono); color: var(--muted); }
.answer__q { margin: 0 0 12px; font-size: clamp(22px, 2vw, 27px); line-height: 1.2; letter-spacing: -0.025em; }
.answer p:not(.eyebrow):not(.answer__stamp) { margin: 0; font-size: 17px; line-height: 1.72; color: var(--body); }
.answer p + p { margin-top: 12px !important; }

/* ============================================================ 5. long-form prose */
.prose { max-width: var(--measure); font-size: 17px; line-height: 1.75; color: var(--body); }
.prose > * { margin-top: 0; margin-bottom: 0; }
.prose > * + * { margin-top: 1.1em; }
.prose > h2 { margin-top: 2.2em; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.16; letter-spacing: -0.03em; }
.prose > h3 { margin-top: 1.9em; font-size: 21px; line-height: 1.3; letter-spacing: -0.015em; }
.prose > h4 { margin-top: 1.6em; font: 700 12px/1.3 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--ember); }
.prose > h2 + *, .prose > h3 + *, .prose > h4 + * { margin-top: .65em; }
.prose > :first-child { margin-top: 0; }
.prose a { color: var(--ember); text-decoration: underline; text-decoration-color: rgba(242, 139, 115, .45); text-underline-offset: 4px; }
.prose a:hover { color: var(--ember-hi); text-decoration-color: currentColor; }
.prose strong { color: var(--ink); }
.prose > ul:not([class]), .prose > ol:not([class]) { padding: 0; list-style: none; }
.prose > ul:not([class]) > li, .prose > ol:not([class]) > li { position: relative; padding-left: 30px; }
.prose > ul:not([class]) > li + li, .prose > ol:not([class]) > li + li { margin-top: .5em; }
.prose > ul:not([class]) > li::before { content: ""; position: absolute; left: 8px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 10px rgba(242, 139, 115, .5); }
.prose > ol:not([class]) { counter-reset: prose-ol; }
.prose > ol:not([class]) > li { counter-increment: prose-ol; padding-left: 36px; }
.prose > ol:not([class]) > li::before { content: counter(prose-ol) "."; position: absolute; left: 0; top: 0; min-width: 26px; font: 500 15px/1.75 var(--f-mono); color: var(--ember); }
.prose li > ul, .prose li > ol { margin-top: .5em; padding-left: 20px; }
.prose blockquote { position: relative; margin-left: 0; margin-right: 0; padding: 4px 0 4px 26px; border-left: 2px solid var(--ember); font: 500 19px/1.6 var(--f-body); color: var(--ink); }
.prose blockquote p { margin: 0; }
.prose blockquote cite { display: block; margin-top: 10px; font: 400 14px/1.4 var(--f-body); font-style: normal; color: var(--muted); }
.prose code, .legal code { padding: .12em .42em; border-radius: 6px; background: var(--inset); border: 1px solid var(--line); font: 400 .86em/1.4 var(--f-mono); color: var(--ink); overflow-wrap: anywhere; }
.prose hr { height: 1px; margin: 2.6em 0; border: 0; background: var(--hairline); }
.prose figure { margin-left: 0; margin-right: 0; }
.prose figure img { display: block; width: 100%; border-radius: var(--r-md); border: 1px solid var(--line); }
.prose figcaption, .figcap { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.prose > .callout, .prose > .tablewrap, .prose > .tpl, .prose > .criteria, .prose > .checklist, .prose > .formula, .prose > .duo, .prose > figure { margin-top: 1.6em; }
.prose > .callout + *, .prose > .tablewrap + *, .prose > .tpl + *, .prose > .criteria + *, .prose > .checklist + *, .prose > .formula + *, .prose > .duo + *, .prose > figure + * { margin-top: 1.6em; }
.prose--wide { max-width: none; }

/* ============================================================ 6. article header */
.arthead { position: relative; isolation: isolate; padding: 40px 0 44px; }
.arthead::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: -150px; bottom: -80px; pointer-events: none; background: radial-gradient(820px 440px at 50% 0%, rgba(242, 139, 115, .12), transparent 70%); }
.arthead__grid { display: grid; grid-template-columns: 220px minmax(0, var(--measure)); justify-content: center; gap: 72px; }
.arthead__body { grid-column: 2; min-width: 0; }
.arthead .kicker { margin-bottom: 22px; }
.arthead__title { font-size: clamp(34px, 3.8vw, 52px); line-height: 1.08; letter-spacing: -0.04em; text-wrap: balance; }
.arthead__summary { margin-top: 18px; font-size: 19px; line-height: 1.6; max-width: none; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.4; color: var(--muted); }
.meta__author { display: inline-flex; align-items: center; gap: 10px; color: var(--body); }
.meta__author .mini-mark { width: 30px; height: 30px; border-radius: 9px; font-size: 10.5px; }
.meta__author a { color: var(--ink); font-weight: 600; text-decoration: none; }
.meta__author a:hover { color: var(--ember); }
.meta__sep { width: 3px; height: 3px; flex-shrink: 0; border-radius: 50%; background: var(--faint); }
.meta time, .meta__mono { font: 500 13px/1 var(--f-mono); color: var(--body); }

/* ============================================================ 7. callouts */
.callout {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 18px 22px 18px 18px; border-radius: 16px;
  background: var(--card-bg); border: 1px solid rgba(255, 255, 255, .08); font-size: 15px; line-height: 1.65; color: var(--body);
}
.callout__icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--sage); background: rgba(143, 214, 180, .1); border: 1px solid rgba(143, 214, 180, .22); }
.callout__icon .i { width: 18px; height: 18px; stroke-width: 1.8; }
.callout__title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 4px; font: 600 15.5px/1.4 var(--f-display); color: var(--ink); }
.callout p { margin: 0; }
.callout p + p { margin-top: 8px; }
.callout a { font-weight: 600; }
.callout--warn { background: var(--amber-tint); border-color: var(--amber-line); }
.callout--warn .callout__icon { color: var(--amber); background: rgba(235, 192, 122, .1); border-color: rgba(235, 192, 122, .3); }
.callout--math { background: rgba(242, 139, 115, .045); border: 1px dashed rgba(242, 139, 115, .5); }
.callout--math .callout__icon { color: var(--ember); background: var(--tint); border-color: var(--tint-line); }

/* ============================================================ 8. data tables (+ comparison variant) */
.tablewrap {
  position: relative; overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--card-line); -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(90deg, #151219 30%, rgba(21, 18, 25, 0)) left center / 48px 100% no-repeat local,
    linear-gradient(270deg, #151219 30%, rgba(21, 18, 25, 0)) right center / 48px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(242, 139, 115, .5), transparent) left center / 16px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(242, 139, 115, .5), transparent) right center / 16px 100% no-repeat scroll,
    #151219;
}
.tablewrap:focus-visible { outline-offset: 2px; }
.dtable { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14.5px; line-height: 1.55; }
.dtable--fit { min-width: 0; }
.dtable caption { caption-side: bottom; padding: 12px 20px 14px; border-top: 1px solid var(--line); text-align: left; font-size: 13px; line-height: 1.5; color: var(--muted); }
.dtable th, .dtable td { padding: 14px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.dtable thead th { padding-top: 16px; padding-bottom: 14px; font: 700 11px/1.3 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); background: rgba(255, 255, 255, .018); white-space: nowrap; }
.dtable tbody th { font-weight: 600; color: var(--ink); }
.dtable tbody tr:last-child > * { border-bottom: 0; }
.dtable tbody tr { transition: background-color .2s; }
.dtable tbody tr:hover { background: rgba(255, 255, 255, .016); }
.dtable .num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.dtable .is-us { background: rgba(242, 139, 115, .055); }
.dtable thead .is-us { position: relative; color: var(--ink); }
.dtable thead .is-us::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grad); box-shadow: 0 0 14px rgba(242, 139, 115, .6); }
.dtable .np { color: var(--faint); font-style: italic; }
.dtable .yes, .dtable .warn { display: inline-flex; }
.dtable--compare tbody th, .dtable--compare thead th:first-child { position: sticky; left: 0; z-index: 1; background: #151219; box-shadow: 1px 0 0 var(--line); }
.dtable td[data-label]::before { display: none; }
.table-note { margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.table-note a { color: var(--body); }

/* ============================================================ 9. criteria list (numbered) + checklist */
.criteria { list-style: none; margin: 0; padding: 0; counter-reset: crit; display: grid; gap: 12px; }
.criteria--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.criteria > li { position: relative; counter-increment: crit; padding: 20px 22px 20px 76px; border-radius: 16px; background: var(--card-bg); border: 1px solid var(--card-line); }
.criteria > li::before {
  content: counter(crit, decimal-leading-zero); position: absolute; left: 20px; top: 18px; width: 38px; height: 38px;
  display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--ember); color: var(--ember);
  font: 500 12.5px/1 var(--f-mono); box-shadow: 0 0 20px -4px rgba(242, 139, 115, .45);
}
.criteria h3 { margin: 6px 0 6px; font-size: 17px; line-height: 1.35; }
.criteria p { margin: 0; font-size: 15px; line-height: 1.62; }
.criteria p + p { margin-top: 8px; }
.criteria__ask { color: var(--muted); }
.criteria__ask b { margin-right: 6px; font: 700 10.5px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ember); }

.checklist { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.checklist li { position: relative; padding: 13px 0 13px 38px; border-top: 1px solid var(--line); font-size: 15.5px; line-height: 1.6; }
.checklist li::before { content: ""; position: absolute; left: 2px; top: 16px; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line-strong); background: var(--inset); }
.checklist li small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--muted); }
.checklist--done li::before { border-color: transparent; background: var(--sage); -webkit-mask: none; }
.checklist--done li::after { content: ""; position: absolute; left: 6px; top: 20px; width: 12px; height: 12px; background: var(--bg); -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat; }

/* tick list (sage check, no inline SVG needed) — the positive twin of .nos in style.css */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.6; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 17px; height: 17px; background: var(--sage); -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat; }
.nos--lg li { font-size: 15px; line-height: 1.6; padding-left: 28px; }
.nos--lg li::before { top: 5px; width: 15px; height: 15px; }

/* ============================================================ 10. two-panel list comparison (do / don't) */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.listcard { padding: 26px 28px 28px; border-radius: var(--r-md); background: var(--card-bg); border: 1px solid var(--card-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.listcard__title { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 18px; line-height: 1.3; }
.listcard__title .i { color: var(--sage); }
.listcard--no .listcard__title .i { color: var(--ember); }
.listcard__note { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.55; color: var(--muted); }
.listcard__note a { font-weight: 600; }

/* ============================================================ 11. worked example (illustrative math) */
.formula { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 16px; border-radius: var(--r-lg); background: rgba(242, 139, 115, .035); border: 1px dashed rgba(242, 139, 115, .42); }
.formula__col { padding: 20px 22px 18px; border-radius: 16px; background: var(--inset); border: 1px solid var(--line); }
.formula__col--us { border-color: rgba(242, 139, 115, .3); box-shadow: 0 0 0 1px rgba(242, 139, 115, .06), 0 20px 50px -30px rgba(242, 139, 115, .45); }
.formula__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; font: 600 15.5px/1.3 var(--f-display); color: var(--ink); }
.formula__rows { margin: 0; }
.formula__rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.formula__rows dt { font-size: 14px; line-height: 1.4; color: var(--body); }
.formula__rows dd { margin: 0; font: 500 15px/1.2 var(--f-mono); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.formula__rows .is-minus dd { color: var(--muted); }
.formula__rows .is-sub { border-bottom-color: var(--line-strong); }
.formula__rows .is-sub dt { color: var(--ink); font-weight: 600; }
.formula__rows .is-total { border-bottom: 0; padding-top: 14px; }
.formula__rows .is-total dt { font-weight: 600; color: var(--ink); }
.formula__rows .is-total dd { font-size: 22px; letter-spacing: -0.03em; }
.formula__col--us .is-total dd { color: var(--sage); }
.formula__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 6px 2px; font-size: 14px; line-height: 1.6; color: var(--body); }
.formula__foot strong { color: var(--ink); }

/* ============================================================ 12. template block (copyable text) */
.tpl { margin: 0; border-radius: var(--r-md); background: var(--inset); border: 1px solid var(--line-strong); overflow: hidden; }
.tpl__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.tpl__title { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 600 14.5px/1.3 var(--f-display); color: var(--ink); }
.tpl__title .i { color: var(--ember); }
.tpl__hint { font-size: 12.5px; color: var(--muted); }
.tpl__body {
  margin: 0; padding: 20px 22px 24px; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2;
  font: 400 15px/1.75 var(--f-body); color: var(--body); -webkit-user-select: all; user-select: all; cursor: text;
}
.tpl__body:focus-visible { outline: 2px solid var(--ember); outline-offset: -4px; border-radius: 12px; }
.tpl__body mark, .tpl__hint mark { padding: 0 3px; border-radius: 4px; background: rgba(242, 139, 115, .14); color: var(--ember-hi); }
.tpl__body mark { white-space: nowrap; }

/* ============================================================ 13. author box */
.author { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; padding: 26px 28px; border-radius: var(--r-md); background: var(--card-bg); border: 1px solid var(--card-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.author__label { margin: 4px 0 6px; font: 700 11px/1.2 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.author__name { margin: 0; font: 600 20px/1.3 var(--f-display); letter-spacing: -0.01em; color: var(--ink); }
.author__name a { color: inherit; text-decoration: none; }
.author__name a:hover { color: var(--ember); }
.author__role { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 4px 0 14px; font-size: 14px; color: var(--muted); }
.author__sep { color: var(--faint); }
.author__bio { margin: 0 0 16px; font-size: 15.5px; line-height: 1.65; }
.author__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.author__note { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.55; color: var(--muted); }
.author__note .mono { color: var(--body); white-space: nowrap; }

/* ============================================================ 14. cards + related guides grid ({{articles_list}} output) */
.grid { display: grid; gap: 18px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card {
  position: relative; display: flex; flex-direction: column; margin: 0; padding: 24px 24px 22px; border-radius: var(--r-md);
  background: var(--card-bg); border: 1px solid var(--card-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.card:hover { transform: translateY(-3px); border-color: rgba(242, 139, 115, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 1px rgba(242, 139, 115, .06), 0 24px 60px -30px rgba(242, 139, 115, .35); }
.card:focus-within { outline: 2px solid var(--ember); outline-offset: 3px; }
.card .icon-tile { margin-bottom: 18px; width: 44px; height: 44px; }
.card__meta { margin: 0 0 12px; font: 500 12px/1.4 var(--f-mono); color: var(--muted); }
.card__title { margin: 0 0 10px; font-size: 18px; line-height: 1.35; letter-spacing: -0.01em; }
.card__title a { color: var(--ink); text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card__title a:focus-visible { outline: none; }
.card__text { margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; color: var(--body); }
.card__link { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--f-body); color: var(--ember); text-decoration: none; }
.card__link::after { content: ""; width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; transition: transform .2s var(--ease); }
.card:hover .card__link::after { transform: translateX(3px); }
.related__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; margin: 0 0 28px; }
.related__head h2 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.12; }
.related__head .eyebrow { margin-bottom: 12px; }

/* ============================================================ 15. legal prose (privacy, terms) */
.legal { max-width: 780px; font-size: 15.5px; line-height: 1.72; color: var(--body); counter-reset: lsec; }
.legal .legal__meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 36px; padding: 14px 18px; border-radius: 14px; background: var(--bg-alt); border: 1px solid var(--line); font: 500 12.5px/1.5 var(--f-mono); color: var(--muted); }
.legal__meta b { font-weight: 500; color: var(--ink); }
.legal h2 {
  counter-increment: lsec; counter-reset: lsub; display: flex; align-items: baseline; gap: 14px;
  margin: 44px 0 14px; padding-top: 26px; border-top: 1px solid var(--line); font-size: 22px; line-height: 1.3; letter-spacing: -0.02em;
}
.legal h2::before { content: counter(lsec) "."; min-width: 30px; flex-shrink: 0; font: 500 15px/1 var(--f-mono); color: var(--ember); }
.legal__meta + h2, .legal > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 { counter-increment: lsub; margin: 26px 0 8px; font-size: 16.5px; line-height: 1.4; }
.legal h3::before { content: counter(lsec) "." counter(lsub); margin-right: 10px; font: 500 13px/1 var(--f-mono); color: var(--muted); }
.legal p, .legal ul, .legal ol, .legal dl { margin: 0 0 12px; }
.legal ul, .legal ol { padding-left: 22px; }
.legal li + li { margin-top: 6px; }
.legal li::marker { color: var(--faint); }
.legal a { color: var(--ember); }
.legal dl > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.legal dt { font-weight: 600; color: var(--ink); }
.legal dd { margin: 0; }

/* ============================================================ 16. 404 hero */
.nf { position: relative; isolation: isolate; padding: 56px 0 104px; text-align: center; }
.nf::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: -150px; height: 760px; pointer-events: none; background: radial-gradient(760px 420px at 50% 20%, rgba(242, 139, 115, .16), transparent 70%); }
.nf__inner { display: flex; flex-direction: column; align-items: center; }
.nf__code {
  margin: 0 0 6px; font: 500 clamp(112px, 16vw, 200px)/1 var(--f-mono); letter-spacing: -0.07em;
  background: linear-gradient(180deg, #F6A792 10%, rgba(233, 116, 92, .12) 95%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 42px rgba(242, 139, 115, .28));
}
.nf__title { font-size: clamp(32px, 4vw, 52px); line-height: 1.06; letter-spacing: -0.04em; text-wrap: balance; }
.nf .lede { margin: 18px auto 0; }
.nf .phero__ctas { justify-content: center; }
.nf__links { list-style: none; width: 100%; max-width: 780px; margin: 48px auto 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; text-align: left; }

/* ============================================================ 17. section CTA band */
.ctaband {
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 32px 64px; align-items: center;
  padding: 48px 52px; border-radius: 28px; overflow: hidden;
  background: radial-gradient(720px 340px at 0% 0%, rgba(242, 139, 115, .17), transparent 70%), #151219;
  box-shadow: 0 30px 70px -30px rgba(242, 139, 115, .38);
}
.ctaband::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(165deg, rgba(246, 167, 146, .85), rgba(242, 139, 115, .12) 45%, rgba(242, 139, 115, .45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.ctaband .eyebrow { margin-bottom: 14px; }
.ctaband__title { margin: 0; font-size: clamp(28px, 3vw, 42px); line-height: 1.1; letter-spacing: -0.035em; text-wrap: balance; }
.ctaband__text > p:not(.eyebrow) { margin: 16px 0 0; font-size: 17px; line-height: 1.6; max-width: 560px; }
.ctaband__actions { display: flex; flex-direction: column; gap: 12px; }
.ctaband__actions .btn { width: 100%; }
.ctaband__actions .micro { margin: 2px 0 0; text-align: center; }

/* ============================================================ 18. extensions of home components */
/* plan cards: key facts + compact inclusions (inside .plan) */
.plan__facts { margin: 0 0 18px; padding: 4px 16px; border-radius: 14px; background: var(--inset); border: 1px solid var(--line); }
.plan__facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.plan__facts > div:last-child { border-bottom: 0; }
.plan__facts dt { font: 700 10.5px/1.3 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.plan__facts dd { margin: 0; text-align: right; font-size: 14px; line-height: 1.4; color: var(--ink); }
.plan .ticks { margin: 0 0 22px; gap: 8px; }
.plan .ticks li { font-size: 14.5px; }
.plan--featured .plan__facts { border-color: rgba(242, 139, 115, .22); }

/* terms table: numbered rows (01–14) + secondary line */
.terms__table--num tbody { counter-reset: term; }
.terms__table--num tbody th { position: relative; padding-left: 40px; }
.terms__table--num tbody th::before { counter-increment: term; content: counter(term, decimal-leading-zero); position: absolute; left: 0; top: 11px; font: 500 12px/1.75 var(--f-mono); color: var(--ember); }
.terms__table td .terms__sub { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.terms__table td .terms__sub a { font-weight: 600; }
.terms__table tr:target > * { background: var(--tint); }

/* plan cards with facts: align the facts row and the buttons across the three cards */
@media (min-width: 761px) {
  .plan:has(.plan__facts) .plan__for { min-height: calc(1.55em * 3); }
  .plan:has(.plan__facts) .ticks { flex-grow: 1; align-content: start; }
}

/* rail with fewer steps */
.rail--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rail--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* generic two-column split (e.g. calculator + explanation) */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.split--wide-left { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.doc .calc__mega { font-size: clamp(28px, 2.5vw, 38px); }

/* FAQ from front-matter ({{faq_html}}): draw the plus icon build.py leaves empty */
.faq__icon:empty::before, .faq__icon:empty::after { content: ""; position: absolute; width: 14px; height: 1.6px; border-radius: 2px; background: currentColor; }
.faq__icon:empty { position: relative; }
.faq__icon:empty::after { transform: rotate(90deg); }
.faq__a-inner { font-size: 16px; line-height: 1.7; }
.faq__a-inner a { font-weight: 600; }

/* ============================================================ responsive */
@media (max-width: 1180px) {
  .doc { grid-template-columns: 210px minmax(0, 1fr); gap: 48px; }
  .doc--article, .arthead__grid { grid-template-columns: 200px minmax(0, var(--measure)); gap: 48px; }
}

@media (max-width: 980px) {
  .phero__grid { grid-template-columns: 1fr; gap: 56px; }
  .phero__side { max-width: 560px; }
  .doc, .doc--article { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .arthead__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .arthead__body { grid-column: 1; }
  .doc__aside { position: static; max-height: none; overflow: visible; }
  .doc__cta { display: none; }
  .toc { border-radius: 16px; background: var(--card-bg); border: 1px solid rgba(255, 255, 255, .08); }
  .toc > summary { padding: 16px 18px; cursor: pointer; color: var(--ink); font-size: 12px; }
  .toc__chev { display: block; width: 18px; height: 18px; margin-left: auto; color: var(--muted); transition: transform .25s var(--ease); }
  .toc[open] .toc__chev { transform: rotate(180deg); }
  .toc__count { margin-left: 8px; }
  .toc > summary > span:first-child { display: inline-flex; align-items: baseline; }
  .toc__list { padding: 6px 18px 14px; border-left: 0; border-top: 1px solid var(--line); }
  .toc__list a { margin-left: 0; padding: 9px 0; border-left: 0; }
  .rail--3, .rail--4 { grid-template-columns: 1fr; }
  .split, .split--wide-left { grid-template-columns: minmax(0, 1fr); }
  .ctaband { grid-template-columns: minmax(0, 1fr); padding: 40px 36px; }
  .criteria--2col { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .crumbs { padding-top: 16px; }
  .crumbs ol { font-size: 12.5px; }
  .phero { padding: 28px 0 56px; }
  .phero .kicker { margin-bottom: 18px; }
  .phero__title { font-size: 36px; line-height: 1.07; letter-spacing: -0.04em; }
  .phero__lede { margin-top: 16px; font-size: 17px; }
  .phero__ctas { flex-direction: column; align-items: stretch; margin-top: 24px; gap: 10px; }
  .phero__ctas .btn { width: 100%; }
  .phero--center .phero__ctas { align-self: stretch; }
  .phero__facts { margin-top: 20px; gap: 6px; }
  .phero__facts .chip { min-height: 30px; padding: 5px 12px; font-size: 12.5px; }
  .phero__grid { gap: 44px; }
  .sheet { margin: 0 10px 10px 0; padding: 20px 18px 18px; }
  .sheet::after { inset: 12px -10px -10px 12px; }
  .sheet__rows dt, .sheet__rows dd { font-size: 13px; }
  .sheet__rows .is-key { margin: 8px -8px; padding: 12px; }
  .sheet__rows .is-key dd { font-size: 22px; }

  .docsec + .docsec { margin-top: 72px; }
  .docsec__head { margin-bottom: 22px; }
  .docsec__head h2, .docsec > h2 { font-size: 28px; line-height: 1.14; }
  .docsec__head .lede { font-size: 16.5px; }

  .answer { padding: 22px 20px 22px 24px; }
  .answer p:not(.eyebrow):not(.answer__stamp) { font-size: 16px; line-height: 1.68; }

  .prose { font-size: 16.5px; line-height: 1.72; }
  .prose > h2 { font-size: 26px; }
  .prose > h3 { font-size: 19px; }
  .prose blockquote { padding-left: 18px; font-size: 17.5px; }

  .arthead { padding: 28px 0 32px; }
  .arthead__title { font-size: 34px; line-height: 1.1; }
  .arthead__summary { font-size: 17px; }
  .meta { gap: 8px 12px; font-size: 13.5px; }

  .callout { padding: 16px 16px 16px 14px; gap: 12px; font-size: 14.5px; }
  .callout__icon { width: 32px; height: 32px; }
  .callout__title { margin-top: 4px; }

  .dtable th, .dtable td { padding: 12px 16px; }
  .dtable { font-size: 14px; }
  /* .dtable--stack: small tables turn into one card per row (cells need data-label) */
  .tablewrap:has(.dtable--stack) { overflow: visible; border: 0; border-radius: 0; background: none; }
  .dtable--stack { display: flex; flex-direction: column; width: 100%; min-width: 0; }
  .dtable--stack tbody { order: 1; }
  .dtable--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dtable--stack tbody, .dtable--stack tr, .dtable--stack th, .dtable--stack td { display: block; width: 100%; }
  .dtable--stack tr { margin-bottom: 10px; padding: 14px 16px 6px; border-radius: 16px; background: var(--card-bg); border: 1px solid var(--card-line); }
  .dtable--stack tbody th { padding: 0 0 8px; border: 0; font-size: 15px; }
  .dtable--stack td { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 0; border-top: 1px solid var(--line); text-align: right; }
  .dtable--stack td[data-label]::before { content: attr(data-label); display: block; flex-shrink: 0; text-align: left; font: 700 10.5px/1.9 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .dtable--stack td.is-us[data-label]::before { color: var(--ember); }
  .dtable--stack tbody tr:hover { background: var(--card-bg); }
  .dtable--stack caption { order: 2; display: block; padding: 2px 2px 0; border: 0; }

  .criteria > li { padding: 18px 18px 18px 64px; }
  .criteria > li::before { left: 16px; top: 16px; width: 34px; height: 34px; font-size: 12px; }

  .duo { grid-template-columns: 1fr; gap: 12px; }
  .listcard { padding: 22px 20px 22px; }

  .formula { grid-template-columns: 1fr; padding: 10px; gap: 10px; }
  .formula__col { padding: 16px 16px 14px; }
  .formula__foot { margin: 6px 6px 4px; font-size: 13.5px; }

  .tpl__body { padding: 16px 16px 20px; font-size: 14.5px; }

  .author { grid-template-columns: 1fr; gap: 14px; padding: 22px 20px; }

  .grid--2, .grid--3 { grid-template-columns: 1fr; gap: 12px; }
  .card { padding: 20px 20px 18px; }

  .legal { font-size: 15px; }
  .legal h2 { font-size: 19.5px; gap: 10px; }
  .legal dl > div { grid-template-columns: 1fr; gap: 4px; }

  .nf { padding: 36px 0 72px; }
  .nf__links { grid-template-columns: 1fr; margin-top: 36px; }
  .nf .phero__ctas { width: 100%; }

  .ctaband { padding: 32px 20px 24px; border-radius: 22px; gap: 24px; }
  .ctaband__title { font-size: 28px; }
  .ctaband__text > p:not(.eyebrow) { font-size: 16px; }

  .plan__facts { padding: 2px 14px; }
  .terms__table--num tbody th { padding-left: 34px; }
  .terms__table--num tbody th::before { top: 0; }
  .terms__table td .terms__sub { font-size: 13px; }
}

@media print {
  .doc__aside, .doc__cta, .sheet::after { display: none !important; }
  .doc { display: block; }
}

/* glow section on the base color (use when the section before it is .section--alt) */
.section--glow-base { background: radial-gradient(1000px 520px at 50% 105%, rgba(242, 139, 115, .15), transparent 70%), var(--bg); }

/* section that follows a hero directly (hero already provides the top spacing) */
.section--snug { padding-top: 24px; }
@media (max-width: 760px) { .section--snug { padding-top: 16px; } }

/* ============================================================ site-wide small-screen fixes (audit 2026-09-27) */
.nowrap { white-space: nowrap; }
@media (max-width: 760px) {
  /* author box: the role line stacks as three short lines instead of wrapping with a stray separator */
  .author__role { flex-direction: column; align-items: flex-start; gap: 2px; }
  .author__role .author__sep { display: none; }
  .author__role > span:not(.author__sep)::first-letter { text-transform: uppercase; }
}
@media (max-width: 480px) {
  /* guide meta line: author on its own line, so the date and reading time never start or end with a separator */
  .arthead .meta__author { flex-basis: 100%; }
  .arthead .meta__author + .meta__sep { display: none; }
}
@media (max-width: 400px) {
  /* long CTA labels wrap inside the button instead of pushing the band wider than the screen */
  .ctaband__actions .btn,
  .idpanel__actions .btn { height: auto; min-height: 52px; padding: 12px 16px; line-height: 1.25; white-space: normal; text-align: center; }
  .idpanel__actions .btn { min-height: 48px; }
}
@media (max-width: 340px) {
  .ctaband__actions .btn,
  .idpanel__actions .btn { padding-inline: 14px; gap: 8px; font-size: 14px; }
}