/* =============================================================================
   ByteMind - single stylesheet. No build step, no dependencies, no web fonts.

   Architecture: cascade layers, so specificity never needs escalating.
   Colour: OKLCH tokens through light-dark(), one definition per colour.
   Motion: view transitions + scroll-driven animations, pure CSS, opt-out aware.
   ========================================================================== */

@layer reset, tokens, base, layout, components, motion, utilities;

/* ---------------------------------------------------------------- reset -- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

  * { margin: 0; }

  html { -webkit-text-size-adjust: 100%; }

  body { min-block-size: 100svh; }

  img, svg, video { display: block; max-width: 100%; }

  input, button, textarea, select { font: inherit; color: inherit; }

  ul[class], ol[class] { list-style: none; padding: 0; }
}

/* --------------------------------------------------------------- tokens -- */
@layer tokens {
  :root {
    color-scheme: light dark;

    /* --- palette -------------------------------------------------------- */
    /* One accent hue, defined once. States are derived, never hand-picked. */
    --accent:        light-dark(oklch(0.532 0.196 264), oklch(0.760 0.132 264));
    --accent-hover:  light-dark(oklch(0.462 0.190 264), oklch(0.830 0.104 264));
    --accent-quiet:  light-dark(oklch(0.958 0.022 264), oklch(0.278 0.062 264));
    --on-accent:     light-dark(oklch(1 0 0),           oklch(0.185 0.021 264));

    --bg:         light-dark(oklch(0.994 0.002 264), oklch(0.171 0.014 264));
    --surface:    light-dark(oklch(0.975 0.004 264), oklch(0.212 0.017 264));
    --surface-2:  light-dark(oklch(0.948 0.007 264), oklch(0.252 0.019 264));
    --line:       light-dark(oklch(0.902 0.009 264), oklch(0.302 0.019 264));
    --line-loud:  light-dark(oklch(0.822 0.013 264), oklch(0.392 0.023 264));

    --text:       light-dark(oklch(0.216 0.019 264), oklch(0.945 0.006 264));
    --text-soft:  light-dark(oklch(0.380 0.017 264), oklch(0.820 0.010 264));
    --muted:      light-dark(oklch(0.505 0.017 264), oklch(0.700 0.013 264));

    --ok:  light-dark(oklch(0.470 0.118 162), oklch(0.790 0.132 162));
    --err: light-dark(oklch(0.510 0.181  27), oklch(0.760 0.135  27));

    /* --- elevation ------------------------------------------------------ */
    --shade: light-dark(oklch(0.30 0.04 264 / 0.09), oklch(0 0 0 / 0.46));
    --shadow-xs: 0 1px 1px -0.5px var(--shade);
    --shadow-sm: 0 1px 2px -1px var(--shade), 0 2px 6px -4px var(--shade);
    --shadow-md: 0 2px 4px -2px var(--shade), 0 10px 22px -10px var(--shade);
    --shadow-lg: 0 4px 8px -4px var(--shade), 0 20px 44px -18px var(--shade);

    /* --- type ----------------------------------------------------------- */
    --font: system-ui, -apple-system, "Segoe UI Variable Display", "Segoe UI",
            Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", SFMono-Regular, Consolas,
            "Liberation Mono", monospace;

    --text-2xs:  0.75rem;
    --text-xs:   0.8125rem;
    --text-sm:   0.875rem;
    --text-base: clamp(1rem, 0.975rem + 0.12vw, 1.0625rem);
    --text-md:   clamp(1.0625rem, 1.03rem + 0.18vw, 1.125rem);
    --text-lg:   clamp(1.125rem, 1.07rem + 0.28vw, 1.25rem);
    --text-xl:   clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --text-2xl:  clamp(1.5rem, 1.28rem + 1.05vw, 2.05rem);
    --text-3xl:  clamp(1.95rem, 1.5rem + 2.2vw, 2.9rem);
    --text-4xl:  clamp(2.3rem, 1.6rem + 3.3vw, 3.9rem);

    /* Optical tracking: the larger the type, the tighter it should set. */
    --track-tight: -0.022em;
    --track-snug:  -0.014em;
    --track-wide:   0.085em;

    /* --- space ---------------------------------------------------------- */
    --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
    --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
    --section: clamp(3.25rem, 1.9rem + 5.6vw, 6rem);

    /* --- shape ---------------------------------------------------------- */
    --r-xs: 6px;  --r-sm: 9px;  --r: 13px;  --r-lg: 18px;  --r-full: 999px;

    --maxw: 71rem;
    --measure: 68ch;

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --quick: 140ms var(--ease);
  }
}

/* ----------------------------------------------------------------- base -- */
@layer base {
  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--text-base);
    line-height: 1.62;
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3, h4 {
    line-height: 1.12;
    font-weight: 640;
    letter-spacing: var(--track-snug);
    text-wrap: balance;
  }

  h1 { font-size: var(--text-4xl); letter-spacing: var(--track-tight); line-height: 1.04; }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-lg); line-height: 1.24; }

  p, li { text-wrap: pretty; }
  p { margin-block-end: var(--s-4); }
  p:last-child { margin-block-end: 0; }

  a {
    color: var(--accent);
    text-underline-offset: 0.18em;
    text-decoration-thickness: from-font;
    transition: color var(--quick);
  }
  a:hover { color: var(--accent-hover); }

  strong, b { font-weight: 640; color: var(--text); }

  ul, ol { padding-inline-start: 1.2em; }
  li + li { margin-block-start: 0.35em; }

  hr { border: 0; border-block-start: 1px solid var(--line); margin-block: var(--s-7); }

  code, kbd, samp { font-family: var(--mono); font-size: 0.875em; }

  ::selection { background: var(--accent); color: var(--on-accent); }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--r-xs);
  }

  :target { scroll-margin-block-start: 6rem; }

  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }
}

/* --------------------------------------------------------------- layout -- */
@layer layout {
  .wrap {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: clamp(1.15rem, 0.6rem + 2.2vw, 2.5rem);
  }

  main > section { padding-block: var(--section); }
  main > section + section { border-block-start: 1px solid var(--line); }

  .skip {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: -100vmax;
    z-index: 100;
    background: var(--accent);
    color: var(--on-accent);
    padding: var(--s-3) var(--s-4);
    border-end-end-radius: var(--r);
    font-weight: 600;
    text-decoration: none;
  }
  .skip:focus { inset-inline-start: 0; }
}

/* ----------------------------------------------------------- components -- */
@layer components {

  /* -- eyebrow: editorial section label with a leading rule -------------- */
  .eyebrow {
    display: flex;
    align-items: center;
    gap: 0.7em;
    margin-block-end: var(--s-3);
    font-size: var(--text-xs);
    font-weight: 660;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--accent);
  }
  .eyebrow::before {
    content: "";
    inline-size: 1.75rem;
    block-size: 2px;
    border-radius: var(--r-full);
    background: currentColor;
    opacity: 0.55;
    flex: none;
  }
  .eyebrow a { color: inherit; text-decoration: none; }
  .eyebrow a:hover { text-decoration: underline; }

  .lede {
    font-size: var(--text-lg);
    line-height: 1.55;
    color: var(--text-soft);
    max-width: 54ch;
  }

  /* Headings sit flush by default (the reset zeroes margins), so give the
     element that follows a heading its own breathing room. Components that
     already declare a top margin win on specificity and keep theirs. */
  :is(h1, h2) + :is(p, .lede) { margin-block-start: var(--s-4); }

  /* -- header ------------------------------------------------------------ */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    background: color-mix(in oklab, var(--bg) 82%, transparent);
    border-block-end: 1px solid transparent;
    backdrop-filter: saturate(1.6) blur(14px);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
  }
  .site-header > .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    flex-wrap: wrap;
    min-block-size: 4.25rem;
    padding-block: var(--s-2);
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--text-md);
    font-weight: 680;
    letter-spacing: var(--track-snug);
    color: var(--text);
    text-decoration: none;
  }
  .brand:hover { color: var(--text); }
  .brand .mark {
    inline-size: 1.65rem;
    block-size: 1.65rem;
    flex: none;
    color: var(--accent);
    transition: rotate var(--quick), scale var(--quick);
  }
  .brand:hover .mark { rotate: -6deg; scale: 1.06; }

  .nav {
    display: flex;
    align-items: center;
    gap: clamp(0.6rem, 1.5vw, 1.4rem);
    flex-wrap: wrap;
  }
  .nav a {
    position: relative;
    font-size: var(--text-sm);
    font-weight: 520;
    color: var(--muted);
    text-decoration: none;
    padding-block: 0.3rem;
  }
  .nav a::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 1.5px;
    border-radius: var(--r-full);
    background: var(--accent);
    scale: 0 1;
    transition: scale var(--quick);
  }
  .nav a:hover { color: var(--text); }
  .nav a:hover::after { scale: 1 1; }

  /* The primary action stays a link, not a filled pill - it was the only
     filled element in a text nav. Weight and accent carry the emphasis. */
  .nav a.nav-cta { color: var(--accent); font-weight: 620; }
  .nav a.nav-cta:hover { color: var(--accent-hover); }

  /* -- buttons ----------------------------------------------------------- */
  .btn {
    --btn-bg: var(--accent);
    --btn-fg: var(--on-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.68rem 1.2rem;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: -0.005em;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition: background var(--quick), border-color var(--quick),
                box-shadow var(--quick), translate var(--quick);
  }
  .btn:hover {
    --btn-bg: var(--accent-hover);
    color: var(--btn-fg);
    box-shadow: var(--shadow-sm);
    translate: 0 -1px;
  }
  .btn:active { translate: 0 0; box-shadow: none; }

  .btn-ghost {
    --btn-bg: transparent;
    --btn-fg: var(--text);
    border-color: var(--line-loud);
    box-shadow: none;
  }
  .btn-ghost:hover {
    --btn-bg: var(--surface-2);
    --btn-fg: var(--text);
    border-color: var(--muted);
  }

  .btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-6); }

  /* -- hero -------------------------------------------------------------- */
  .hero-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
  @media (min-width: 62rem) {
    .hero-grid { grid-template-columns: minmax(0, 1.55fr) minmax(17rem, 0.9fr); }
  }

  .hero h1 { max-width: 16ch; }
  .hero .lede { margin-block-start: var(--s-5); font-size: var(--text-xl); line-height: 1.45; }
  .hero-note { margin-block-start: var(--s-5); font-size: var(--text-sm); color: var(--muted); }

  .hero-panel {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    padding: var(--s-5);
  }
  .hero-panel h2 {
    font-size: var(--text-2xs);
    font-weight: 660;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--muted);
    margin-block-end: var(--s-4);
  }
  .hero-panel dl { display: grid; gap: var(--s-4); }
  .hero-panel dt {
    font-size: var(--text-2xs);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--muted);
    margin-block-end: 0.15rem;
  }
  .hero-panel dd { margin: 0; font-size: var(--text-sm); font-weight: 560; line-height: 1.45; }
  .hero-panel .live { display: inline-flex; align-items: center; gap: 0.45em; color: var(--ok); }
  .hero-panel .live::before {
    content: "";
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: var(--r-full);
    background: currentColor;
    flex: none;
  }

  /* -- cards ------------------------------------------------------------- */
  .grid { display: grid; gap: var(--s-5); margin-block-start: var(--s-7); }
  .grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(17.5rem, 100%), 1fr)); }

  .card {
    container-type: inline-size;
    container-name: card;
    display: flex;
    flex-direction: column;
    padding: var(--s-5);
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    transition: border-color var(--quick), box-shadow var(--quick), translate var(--quick);
  }
  .card:hover {
    border-color: var(--line-loud);
    box-shadow: var(--shadow-md);
    translate: 0 -2px;
  }
  .card h3 { margin-block-end: var(--s-2); }
  .card .problem { color: var(--muted); font-size: var(--text-sm); }
  .card ul { margin-block: var(--s-2) var(--s-5); font-size: var(--text-sm); }
  .card .meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-2) var(--s-4);
    margin-block-start: auto;
    padding-block-start: var(--s-4);
    border-block-start: 1px solid var(--line);
    font-size: var(--text-xs);
    color: var(--muted);
  }
  .card .meta a { font-weight: 600; text-decoration: none; white-space: nowrap; }
  .card .meta a:hover { text-decoration: underline; }

  /* A card in a wide column can carry a larger heading than one in a narrow
     column: a decision about the card, not about the viewport. */
  @container card (min-width: 23rem) {
    .card h3 { font-size: var(--text-xl); }
    .card .problem { font-size: var(--text-base); }
  }

  /* -- steps ------------------------------------------------------------- */
  .steps {
    counter-reset: step;
    display: grid;
    gap: var(--s-5);
    margin-block-start: var(--s-7);
  }
  .steps li { counter-increment: step; margin: 0; padding-block-start: 2.9rem; position: relative; }
  .steps li::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    display: grid;
    place-items: center;
    inline-size: 2.1rem;
    block-size: 2.1rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: var(--accent-quiet);
    color: var(--accent);
    font-family: var(--mono);
    font-size: var(--text-2xs);
    font-weight: 700;
  }
  .steps h3 { font-size: var(--text-md); margin-block-end: var(--s-1); }
  .steps p { font-size: var(--text-sm); color: var(--muted); }

  @media (min-width: 58rem) {
    .steps { grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto; }
    /* subgrid: headings and body align across columns even when they wrap
       to different depths */
    .steps li { display: grid; grid-template-rows: subgrid; grid-row: span 2; gap: var(--s-1); }
  }

  #proof ul { max-width: var(--measure); }

  /* -- faq --------------------------------------------------------------- */
  .faq { display: grid; gap: var(--s-2); margin-block-start: var(--s-6); }
  .faq details {
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    padding-inline: var(--s-5);
    transition: border-color var(--quick), background var(--quick);
  }
  .faq details:hover { border-color: var(--line-loud); }
  .faq details[open] { background: var(--bg); border-color: var(--line-loud); }
  .faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding-block: var(--s-4);
    font-weight: 600;
    font-size: var(--text-md);
    text-wrap: balance;
    cursor: pointer;
    list-style: none;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: "";
    flex: none;
    inline-size: 0.62rem;
    block-size: 0.62rem;
    border-inline-end: 2px solid var(--accent);
    border-block-end: 2px solid var(--accent);
    rotate: 45deg;
    translate: 0 -0.15em;
    transition: rotate var(--quick), translate var(--quick);
  }
  .faq details[open] summary::after { rotate: 225deg; translate: 0 0.15em; }
  .faq details > p {
    margin-block-end: var(--s-4);
    max-width: 66ch;
    color: var(--muted);
    font-size: var(--text-sm);
  }

  /* -- forms ------------------------------------------------------------- */
  .contact-grid { display: grid; gap: var(--s-7); margin-block-start: var(--s-7); }
  @media (min-width: 54rem) { .contact-grid { grid-template-columns: 1.15fr 0.85fr; } }

  .field { margin-block-end: var(--s-4); }
  .field label {
    display: block;
    margin-block-end: 0.35rem;
    font-size: var(--text-sm);
    font-weight: 600;
    transition: color var(--quick);
  }
  .field .hint { font-weight: 400; color: var(--muted); }
  .field :is(input, textarea) {
    inline-size: 100%;
    padding: 0.68rem 0.8rem;
    border: 1px solid var(--line-loud);
    border-radius: var(--r-sm);
    background: var(--bg);
    color: var(--text);
    font-size: var(--text-base);
    transition: border-color var(--quick), box-shadow var(--quick);
  }
  .field :is(input, textarea):hover { border-color: var(--muted); }
  .field :is(input, textarea):focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent);
  }
  .field textarea { min-block-size: 8.5rem; resize: vertical; }

  /* :has() - the label reacts to its own input, no JS and no extra markup */
  .field:has(:focus-visible) label { color: var(--accent); }
  .field:has(:user-invalid) :is(input, textarea) { border-color: var(--err); }
  .field:has(:user-invalid) label { color: var(--err); }

  .hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }

  .form-status { margin-block-start: var(--s-4); font-size: var(--text-sm); font-weight: 520; }
  .form-status.ok  { color: var(--ok); }
  .form-status.err { color: var(--err); }

  .aside-block { margin-block-end: var(--s-5); }
  .aside-block h3 { font-size: var(--text-sm); margin-block-end: 0.2rem; }
  .aside-block p { font-size: var(--text-sm); color: var(--muted); }

  /* -- footer ------------------------------------------------------------ */
  .site-footer {
    border-block-start: 1px solid var(--line);
    background: var(--surface);
    padding-block: var(--s-7);
    font-size: var(--text-sm);
  }
  .footer-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s-5);
  }
  .footer-links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
  .footer-links li { margin: 0; }
  .footer-links a { color: var(--muted); text-decoration: none; }
  .footer-links a:hover { color: var(--text); text-decoration: underline; }
  .footer-bottom {
    margin-block-start: var(--s-6);
    padding-block-start: var(--s-4);
    border-block-start: 1px solid var(--line);
    color: var(--muted);
    font-size: var(--text-xs);
  }
  .footer-bottom p { margin-block-end: 0.3rem; }

  /* -- prose (legal pages + articles) ------------------------------------ */
  .prose { max-width: var(--measure); }
  /* Targeted by class, not by position: the first <p> child is often the
     .eyebrow or .doc-meta, and a positional selector outranks both. */
  .prose > .prose-lead { font-size: var(--text-md); color: var(--text-soft); }
  .prose h2 { margin-block-start: var(--s-7); font-size: var(--text-xl); }
  .prose h3 { margin-block-start: var(--s-5); font-size: var(--text-md); }
  .prose :is(h2, h3) + p { margin-block-start: var(--s-3); }
  .prose ul, .prose ol { margin-block-end: var(--s-4); }

  .doc-meta {
    margin-block: var(--s-3) var(--s-6);
    font-size: var(--text-sm);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
  }

  .toc {
    margin-block-end: var(--s-7);
    padding: var(--s-5);
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
  }
  .toc h2 {
    margin: 0 0 var(--s-3);
    font-size: var(--text-xs);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--muted);
  }
  .toc ol { margin: 0; padding-inline-start: 1.2em; columns: 2; column-gap: var(--s-6); }
  @media (max-width: 40rem) { .toc ol { columns: 1; } }
  .toc li { font-size: var(--text-sm); break-inside: avoid; }
  .toc a { text-decoration: none; }
  .toc a:hover { text-decoration: underline; }

  .callout {
    margin-block: var(--s-5);
    padding: var(--s-4) var(--s-5);
    border: 1px solid color-mix(in oklab, var(--accent) 28%, var(--line));
    border-inline-start: 3px solid var(--accent);
    border-radius: 0 var(--r) var(--r) 0;
    background: var(--accent-quiet);
    font-size: var(--text-sm);
  }

  blockquote {
    margin-block: var(--s-5);
    padding-inline-start: var(--s-4);
    border-inline-start: 2px solid var(--line-loud);
    color: var(--muted);
    font-style: italic;
  }

  .prose table { inline-size: 100%; border-collapse: collapse; margin-block: var(--s-5); font-size: var(--text-sm); }
  .prose :is(th, td) { padding: 0.65rem 0.8rem; text-align: start; vertical-align: top; border-block-end: 1px solid var(--line); }
  .prose th { font-weight: 640; background: var(--surface); }
  .prose tbody tr:last-child td { border-block-end: 0; }
  .prose tbody tr { transition: background var(--quick); }
  .prose tbody tr:hover { background: var(--surface); }
  .table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); margin-block: var(--s-5); }
  .table-scroll table { margin: 0; }

  .prose :not(pre) > code {
    padding: 0.14em 0.38em;
    border-radius: var(--r-xs);
    background: var(--surface-2);
    font-size: 0.86em;
  }
  .prose pre {
    margin-block: var(--s-5);
    padding: var(--s-4) var(--s-5);
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    overflow-x: auto;
    font-size: var(--text-xs);
    line-height: 1.6;
    tab-size: 2;
  }

  .formula {
    margin-block: var(--s-5);
    padding: var(--s-4) var(--s-5);
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    font-family: var(--mono);
    font-size: var(--text-xs);
    line-height: 1.85;
    overflow-x: auto;
  }

  .cta-end {
    margin-block-start: var(--s-8);
    padding-block-start: var(--s-6);
    border-block-start: 1px solid var(--line);
  }
  .cta-end h2 { margin-block-start: 0; }

  /* -- article index ----------------------------------------------------- */
  .article-list { display: grid; gap: var(--s-4); margin-block-start: var(--s-7); }
  .article-card {
    position: relative;
    padding: var(--s-5);
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    transition: border-color var(--quick), box-shadow var(--quick), translate var(--quick);
  }
  .article-card:hover { border-color: var(--line-loud); box-shadow: var(--shadow-md); translate: 0 -2px; }
  .article-card :is(h2, h3) { font-size: var(--text-xl); margin-block-end: var(--s-2); }
  .article-card :is(h2, h3) a { color: var(--text); text-decoration: none; }
  /* the whole card becomes the click target, without wrapping it in an anchor */
  .article-card :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .article-card:hover :is(h2, h3) a { color: var(--accent); }
  /* raised above the click overlay so the summary text stays selectable */
  .article-card p { position: relative; color: var(--muted); font-size: var(--text-sm); max-width: 82ch; }
  .article-meta {
    margin-block: var(--s-3) 0;
    font-family: var(--mono);
    font-size: var(--text-2xs);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
  }

  /* -- ROI calculator ---------------------------------------------------- */
  .calc {
    margin-block: var(--s-6);
    padding: clamp(var(--s-5), 3vw, var(--s-6));
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
  }
  .calc h3 { margin-block: 0 var(--s-5); font-size: var(--text-md); }
  .calc-grid { display: grid; gap: var(--s-4) var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(12.5rem, 100%), 1fr)); }
  .calc-field { display: flex; flex-direction: column; justify-content: flex-end; }
  .calc-field label { margin-block-end: 0.3rem; font-size: var(--text-xs); font-weight: 600; color: var(--muted); }
  .calc-field input {
    inline-size: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--line-loud);
    border-radius: var(--r-xs);
    background: var(--bg);
    color: var(--text);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    transition: border-color var(--quick), box-shadow var(--quick);
  }
  .calc-field input:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent);
  }
  .calc-out {
    display: grid;
    gap: var(--s-3);
    grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
    margin-block-start: var(--s-6);
    padding-block-start: var(--s-5);
    border-block-start: 1px solid var(--line);
  }
  .calc-stat { padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); }
  .calc-stat .k {
    display: block;
    margin-block-end: 0.25rem;
    font-size: var(--text-2xs);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--muted);
  }
  .calc-stat .v {
    font-size: var(--text-xl);
    font-weight: 680;
    letter-spacing: var(--track-snug);
    font-variant-numeric: tabular-nums;
  }
  .calc-stat .v.pos { color: var(--ok); }
  .calc-stat .v.neg { color: var(--err); }
  .calc-verdict { margin-block-start: var(--s-5); font-size: var(--text-sm); }
  .calc-note { margin-block-start: var(--s-3); font-size: var(--text-2xs); color: var(--muted); }

  /* -- centred message pages --------------------------------------------- */
  .center-page { min-block-size: 60svh; display: grid; place-items: center; text-align: center; }
  .center-page .inner { max-width: 36rem; margin-inline: auto; }
  .center-page .eyebrow { justify-content: center; }
  .center-page .lede { margin-inline: auto; }
}

/* --------------------------------------------------------------- motion -- */
@layer motion {

  /* Cross-document view transitions: navigating feels like an app,
     with no router and no JavaScript at all. */
  @view-transition { navigation: auto; }

  .site-header .brand { view-transition-name: brand; }

  @media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root) { animation: fade-out 120ms var(--ease) both; }
    ::view-transition-new(root) { animation: rise-in 260ms var(--ease) both; }
  }

  @keyframes fade-out { to { opacity: 0; } }
  @keyframes rise-in { from { opacity: 0; translate: 0 8px; } }

  /* Scroll-driven reveal: no observer, no main-thread work, no library. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .card,
      .article-card,
      .steps li,
      .calc,
      .hero-panel {
        animation: reveal linear both;
        animation-timeline: view();
        animation-range: entry 2% entry 40%;
      }
      @keyframes reveal {
        from { opacity: 0; translate: 0 18px; }
        to   { opacity: 1; translate: 0 0; }
      }

      /* The header earns its border and shadow only once the page moves. */
      .site-header {
        animation: header-settle linear both;
        animation-timeline: scroll(root block);
        animation-range: 0 90px;
      }
      @keyframes header-settle {
        to {
          border-block-end-color: var(--line);
          box-shadow: var(--shadow-sm);
        }
      }
    }
  }

  /* Without scroll timelines (Firefox today) the header's border and shadow
     would never be applied at all, since the keyframe is their only source. */
  @supports not (animation-timeline: view()) {
    .site-header { border-block-end-color: var(--line); }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation: none !important; }
    .site-header { border-block-end-color: var(--line); }
  }
}

/* ------------------------------------------------------------ utilities -- */
@layer utilities {
  .center { justify-content: center; }

  /* long-form copy outside a .prose container still needs a reading measure */
  .measure { max-width: var(--measure); }

  /* Windows High Contrast forces box-shadow to none and overrides border-color,
     which would leave the custom focus ring on form and calculator inputs with
     nothing visible at all. Give the UA a real outline to recolour. */
  @media (forced-colors: active) {
    .field :is(input, textarea):focus-visible,
    .calc-field input:focus-visible {
      outline: 2px solid Highlight;
      outline-offset: 2px;
    }
  }

  @media print {
    .site-header, .site-footer, .btn-row, .cta-end, .skip { display: none !important; }
    body { background: #fff; color: #000; font-size: 11pt; }
    .wrap { max-width: none; padding: 0; }
    .prose { max-width: none; }
    a { color: #000; text-decoration: underline; }
    .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
    .toc, .callout, .table-scroll { border: 1px solid #ccc; }
    h2, h3 { break-after: avoid; }
    table, pre, .formula { break-inside: avoid; }
  }
}