/* AI From U design system.
 *
 * Extracted from web/sales/index.html, where the whole visual language lived as
 * inline style attributes on individual elements. Every browser-facing surface
 * loads this one file, because the alternative — each page carrying its own
 * approximation — is how one product ends up looking like three.
 *
 * Served content-hashed and immutable by internal/webassets, so the font URLs
 * below are relative: they resolve against the same hashed prefix this file is
 * served under, and a stale hash still serves the current bytes.
 */

@font-face { font-family:'Chakra Petch'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/chakra-petch-400.woff2') format('woff2') }
@font-face { font-family:'Chakra Petch'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/chakra-petch-500.woff2') format('woff2') }
@font-face { font-family:'Chakra Petch'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/chakra-petch-600.woff2') format('woff2') }
@font-face { font-family:'Chakra Petch'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/chakra-petch-700.woff2') format('woff2') }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/ibm-plex-mono-400.woff2') format('woff2') }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/ibm-plex-mono-500.woff2') format('woff2') }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/ibm-plex-mono-600.woff2') format('woff2') }

:root {
  color-scheme: light;

  --ink:        #071B4A;
  --ink-2:      #3D5484;
  --muted:      #4E6494;
  --muted-2:    #556A93;
  --on-dark:    #FDFEFF;
  --on-dark-2:  #A9BCE4;

  --brand:      #0868F2;
  --brand-ink:  #0A57C8;
  --brand-deep: #054FBB;
  --brand-mid:  #0550C0;

  --bg:         #F6FAFF;
  --panel:      #FDFEFF;
  --bg-alt:     #E8F0FC;
  --bg-dark:    #071B4A;
  /* One step lighter than --bg-dark. The design uses it for every inset dark
     surface — the hero portal preview and the API code cards. */
  --panel-dark: #0A1D46;

  --mint:       #8DDFD0;
  --sky:        #43B9FF;
  --warm:       #A8410F;
  --warm-bg:    rgba(255,154,107,0.12);
  --green:      #0F8A72;
  --green-ink:  #0B6B58;

  --line:       rgba(8,104,242,0.14);
  --line-2:     rgba(8,104,242,0.18);
  --line-3:     rgba(8,104,242,0.28);
  --line-4:     rgba(8,104,242,0.5);

  --sans: 'Chakra Petch', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* The header is sticky, so anchor targets need clearance or a jump lands
     underneath it. */
  --header-clearance: 96px;
}

html { scroll-behavior: smooth; scroll-padding-top: var(--header-clearance) }
html, body { margin:0; padding:0; background:var(--bg) }
body { font-family:var(--sans); color:var(--ink); font-size:16px; line-height:1.6 }
* { box-sizing: border-box }

a { color:var(--brand-ink); text-decoration:none }
a:hover { color:var(--brand-deep) }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible { outline:2px solid var(--brand-deep); outline-offset:2px }
::selection { background:var(--brand); color:#fff }
img { max-width:100%; height:auto }

/* ---- layout ------------------------------------------------------------- */

.aifu-container { max-width:1280px; margin:0 auto; padding:0 clamp(16px,4vw,48px) }
.aifu-section { border-top:1px solid var(--line); padding:clamp(36px,4.4vw,60px) 0 }
.aifu-section--alt { background:var(--bg-alt) }
.aifu-section--dark { background:var(--bg-dark); color:var(--on-dark) }
.aifu-section--dark a { color:var(--mint) }
.aifu-stack { display:flex; flex-direction:column; gap:28px }

/* ---- type --------------------------------------------------------------- */

h1 { font-size:clamp(28px,4.4vw,56px); font-weight:700; line-height:1.06; margin:0 0 12px }
h2 { font-size:clamp(28px,3.6vw,50px); font-weight:700; line-height:1.08; margin:0 }
h3 { font-size:19px; font-weight:600; margin:0 }

/* The section eyebrow: mono, wide-tracked, brand-coloured. In the design every
   section opens with one, numbered — "// 01 · PRICING". */
.aifu-tag { margin:0; font-family:var(--mono); font-size:14px; letter-spacing:0.2em; color:var(--brand-ink) }
.aifu-label { font-family:var(--mono); font-size:14px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted) }
.aifu-lede { font-size:17px; line-height:1.65; color:var(--ink-2); max-width:70ch; text-wrap:pretty; margin:0 }
.aifu-note { font-size:15px; color:var(--ink-2); max-width:78ch; margin:0 }
.aifu-num { font-family:var(--mono); font-variant-numeric:tabular-nums }

/* ---- controls ----------------------------------------------------------- */

.aifu-btn {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 20px; border:0; cursor:pointer;
  font-family:var(--mono); font-size:14px; letter-spacing:0.08em; text-transform:uppercase;
  background:var(--brand); color:#fff;
  transition:background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.aifu-btn:hover { background:var(--brand-deep); color:#fff }
.aifu-btn--ghost { background:transparent; border:1px solid var(--line-4); color:var(--brand-ink) }
.aifu-btn--ghost:hover { background:transparent; border-color:var(--brand-deep); color:var(--brand-deep) }

.aifu-field { display:flex; flex-direction:column; gap:6px; font-size:14.5px; color:var(--ink-2) }
.aifu-field input, .aifu-field select {
  min-height:48px; padding:0 14px; font:inherit; color:var(--ink);
  background:var(--panel); border:1px solid var(--line-3);
}
.aifu-field input:focus, .aifu-field select:focus { border-color:var(--brand) }

/* ---- surfaces ----------------------------------------------------------- */

.aifu-card { background:var(--panel); border:1px solid var(--line-3); padding:26px; display:flex; flex-direction:column; gap:14px }
.aifu-card--featured { border-color:var(--brand); box-shadow:0 18px 44px rgba(8,104,242,0.18); position:relative }

.aifu-chip { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:13px; letter-spacing:0.14em; padding:4px 10px; background:var(--warm); color:#fff }
.aifu-badge { font-family:var(--mono); font-size:12.5px; letter-spacing:0.14em; padding:2px 10px; border:1px solid var(--green); color:var(--green-ink); background:var(--panel) }
.aifu-callout { display:flex; align-items:center; gap:14px; flex-wrap:wrap; border:1px solid var(--warm); background:var(--warm-bg); padding:14px 18px; font-size:15.5px; color:var(--ink) }

.aifu-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:20px; align-items:stretch }

/* A price card that is itself the control. The grid used to carry one whole
   form per card -- eight input boxes across four cards, met before the buyer
   had read a price. Now the card is a <label> for a radio and the details are
   asked once, underneath.
 *
 * The radio is visually hidden but still focusable and still announced, and the
 * card carries the focus ring on its behalf. Sibling selectors rather than
 * :has(), so the selected state does not depend on how new the browser is. */
.aifu-choice { display:flex; position:relative }
.aifu-choice > input { position:absolute; width:1px; height:1px; margin:0; opacity:0; pointer-events:none }
.aifu-choice > .aifu-card { flex:1; cursor:pointer; transition:border-color 150ms ease, box-shadow 150ms ease }
.aifu-choice > .aifu-card:hover { border-color:var(--line-4) }
.aifu-choice > input:checked + .aifu-card { border-color:var(--brand); box-shadow:0 18px 44px rgba(8,104,242,0.18) }
.aifu-choice > input:focus-visible + .aifu-card { outline:2px solid var(--brand-deep); outline-offset:2px }

/* The drawn radio, so the card shows which plan is selected without asking the
   reader to infer it from a border. */
.aifu-pick { flex:none; width:18px; height:18px; border:2px solid var(--line-4); border-radius:50%; display:inline-block }
.aifu-choice > input:checked + .aifu-card .aifu-pick {
  border-color:var(--brand);
  background:radial-gradient(circle at center, var(--brand) 0 5px, transparent 5px);
}

/* Native disclosure, styled. The design tracked open/closed in JavaScript only
   to swap a marker, a border and a shadow; [open] does all three with no script.
 *
 * The design has two of these and they do not look alike. This is the FAQ one:
 * a card per question, separated rather than stacked, with a circular marker
 * that fills in when open and a brand-coloured bar inset down the left edge. */
.aifu-disclosure {
  background:var(--panel); border:1px solid rgba(8,104,242,0.2);
  transition:border-color 180ms ease, box-shadow 180ms ease;
}
.aifu-disclosure[open] {
  border-color:rgba(10,87,200,0.55);
  box-shadow:0 10px 26px rgba(7,27,74,0.1), inset 3px 0 0 var(--brand);
}
.aifu-disclosure > summary {
  list-style:none; cursor:pointer;
  display:grid; grid-template-columns:44px 1fr 32px; gap:14px; align-items:center;
  padding:19px 22px 19px 18px; min-height:48px;
  font-size:17px; font-weight:600; color:var(--ink);
  transition:color 150ms ease;
}
.aifu-disclosure > summary::-webkit-details-marker { display:none }
.aifu-disclosure > summary:hover { color:var(--brand-ink) }
.aifu-disclosure > :not(summary) { padding:0 64px 22px 76px; color:var(--ink-2); margin:0 }

/* The marker. A real element rather than ::after, because it is a filled disc
   in the design and a pseudo-element cannot carry its own border and centring
   as cleanly. */
.aifu-mark {
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:16px; line-height:1;
  background:rgba(8,104,242,0.08); color:var(--brand-ink); border:1px solid var(--line-3);
  transition:background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.aifu-mark::before { content:'+' }
.aifu-disclosure[open] .aifu-mark { background:var(--brand); color:#fff; border-color:var(--brand) }
.aifu-disclosure[open] .aifu-mark::before { content:'\2013' }

/* The other one: an aside rather than a question. Mono, brand-coloured, marker
   on the left as [+] / [-], and no shadow or bar when open. */
.aifu-disclosure--note, .aifu-disclosure--note[open] {
  border-color:var(--line-3); box-shadow:none;
}
.aifu-disclosure--note > summary {
  display:flex; gap:12px; align-items:center;
  padding:16px 20px; min-height:44px;
  font-family:var(--mono); font-size:14px; font-weight:400; letter-spacing:0.08em;
  color:var(--brand-ink);
  transition:background 150ms ease, color 150ms ease;
}
.aifu-disclosure--note > summary::before { content:'[+]'; flex:none; width:26px }
.aifu-disclosure--note[open] > summary::before { content:'[\2013]' }
.aifu-disclosure--note > summary:hover { color:var(--brand-deep); background:rgba(8,104,242,0.07) }
.aifu-disclosure--note > :not(summary) { padding:4px 20px 22px 40px }

table.aifu-table { width:100%; border-collapse:collapse; font-size:15px }
.aifu-table th { text-align:left; font-family:var(--mono); font-size:13.5px; letter-spacing:0.1em; color:var(--muted); font-weight:500; padding:13px 16px; border-bottom:1px solid var(--line-2) }
.aifu-table td { padding:13px 16px; border-bottom:1px solid var(--line) }
.aifu-table td.num, .aifu-table th.num { text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums }

/* The savings comparison sits at a larger scale than the weights tables — it is
   the argument of that section, not a reference appendix, and reading it at the
   same size as a footnote is what made it feel cramped against the design. */
.aifu-table--lg th { font-size:13.5px; letter-spacing:0.12em; padding:16px 20px }
.aifu-table--lg td { padding:18px 20px; font-size:16px }
.aifu-table--lg td.num { font-size:18px; color:var(--ink) }
.aifu-table--lg td.aifu-ours { font-size:19px; font-weight:600; background:rgba(8,104,242,0.08); color:var(--brand-mid) }

/* The code card is dark all the way through in the design, header included.
   Splitting it — light header, dark body — reads as two components stuck
   together rather than one terminal. */
.aifu-codecard { background:var(--panel-dark); border:1px solid rgba(7,27,74,0.4); box-shadow:0 16px 40px rgba(7,27,74,0.18) }
.aifu-codecard-head {
  display:flex; align-items:center; gap:12px; padding:12px 18px;
  border-bottom:1px solid rgba(67,185,255,0.2);
  font-family:var(--mono); font-size:14px; color:#8FA8D6;
}
pre.aifu-code { margin:0; overflow-x:auto; padding:20px; background:var(--panel-dark); color:#CFE3FF; font-family:var(--mono); font-size:14px; line-height:1.7 }
.aifu-kw { color:var(--mint) }
.aifu-str { color:#FFB38A }

/* ---- trust rows --------------------------------------------------------- */

/* The whole row inverts to the dark ground on hover. The numeral is outlined
   rather than filled — color:transparent with a stroke — which is the detail
   that makes the column read as typography instead of as a big grey number,
   and the one most easily lost by writing a plain colour there instead. */
.aifu-trust {
  display:grid;
  grid-template-columns:clamp(80px,10vw,150px) minmax(200px,0.9fr) 1.4fr;
  gap:clamp(16px,3vw,40px); align-items:center;
  padding:clamp(22px,2.6vw,34px) clamp(14px,2vw,28px);
  border-top:1px solid var(--line-3);
  transition:background 200ms ease;
}
.aifu-trust:last-child { border-bottom:1px solid var(--line-3) }
.aifu-trust-num {
  font-family:var(--mono); font-size:clamp(38px,4.6vw,62px); font-weight:600; line-height:1;
  color:transparent; -webkit-text-stroke:1.2px var(--brand-ink);
  transition:color 200ms ease, -webkit-text-stroke 200ms ease;
}
.aifu-trust-title { font-size:clamp(19px,1.8vw,24px); font-weight:600; line-height:1.25; text-wrap:balance }
.aifu-trust-body { margin:0; font-size:15.5px; line-height:1.65; color:var(--ink-2); max-width:56ch }
.aifu-trust-title, .aifu-trust-body { transition:color 200ms ease }
.aifu-trust:hover { background:var(--bg-dark) }
.aifu-trust:hover .aifu-trust-num { color:var(--mint); -webkit-text-stroke:1.2px var(--mint) }
.aifu-trust:hover .aifu-trust-title { color:var(--on-dark) }
.aifu-trust:hover .aifu-trust-body { color:var(--on-dark-2) }
@media (max-width:760px) {
  .aifu-trust { grid-template-columns:64px 1fr }
  .aifu-trust-body { grid-column:2 }
}

/* ---- model cards and the how-it-works rail ------------------------------ */

.aifu-model { transition:border-color 180ms ease, box-shadow 220ms ease, transform 220ms ease }
.aifu-model:hover { transform:translateY(-6px) }
.aifu-model--astra:hover { border-color:rgba(7,27,74,0.9);    box-shadow:0 18px 44px rgba(7,27,74,0.26) }
.aifu-model--luna:hover  { border-color:rgba(11,107,88,0.85); box-shadow:0 18px 44px rgba(11,107,88,0.24) }
.aifu-model--terra:hover { border-color:rgba(10,87,200,0.9);  box-shadow:0 18px 44px rgba(8,104,242,0.24) }
.aifu-model--sol:hover   { border-color:rgba(168,65,15,0.9);  box-shadow:0 18px 44px rgba(168,65,15,0.24) }

.aifu-step-icon {
  position:relative; z-index:1; flex:none; width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  outline:6px solid var(--bg);
  transition:transform 180ms ease, box-shadow 180ms ease;
}
.aifu-step-icon:hover { transform:scale(1.12) }
.aifu-step-icon--brand { background:var(--brand); box-shadow:0 10px 24px rgba(8,104,242,0.3) }
.aifu-step-icon--brand:hover { box-shadow:0 14px 30px rgba(8,104,242,0.45) }
.aifu-step-icon--done { background:var(--green); box-shadow:0 10px 24px rgba(22,163,74,0.35) }
.aifu-step-icon--done:hover { box-shadow:0 14px 30px rgba(22,163,74,0.5) }

/* The light travelling along the connector between the four steps. */
@keyframes aifuFlow { 0% { transform:translateX(-110%) } 100% { transform:translateX(520%) } }
.aifu-flow {
  position:absolute; top:0; bottom:0; width:20%; display:block;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.85),transparent);
  animation:aifuFlow 3s linear infinite;
}

/* ---- header and footer -------------------------------------------------- */

.aifu-header { position:sticky; top:0; z-index:60; background:rgba(246,250,255,0.92); backdrop-filter:blur(12px); border-bottom:1px solid rgba(8,104,242,0.16) }
.aifu-header .aifu-container { display:flex; align-items:center; gap:clamp(10px,2vw,28px); flex-wrap:wrap; padding-top:10px; padding-bottom:10px }
/* The links carry their own 44px target rather than relying on the text box,
   which is what the design does and what a thumb needs. The gap is small
   because the padding already separates them. */
.aifu-nav { display:flex; align-items:center; gap:2px; flex-wrap:wrap; font-size:15px }
.aifu-nav a { display:inline-flex; align-items:center; min-height:44px; padding:0 10px }
.aifu-spacer { margin-left:auto }

/* Centred brand lockup, not a bar of links: wordmark, the ruled wordmark line,
   then the tagline and the legal text stacked under it. */
.aifu-footer {
  border-top:1px solid rgba(8,104,242,0.2); padding:clamp(44px,5vw,68px) 0 36px;
  font-size:14.5px; color:var(--muted);
}
.aifu-footer .aifu-container { display:flex; flex-direction:column; align-items:center; gap:22px; text-align:center }
.aifu-footer a { color:var(--brand-ink) }
.aifu-footer-rule { display:flex; align-items:center; gap:14px; width:min(520px,100%) }
.aifu-footer-rule span:first-child { flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--brand)) }
.aifu-footer-rule span:last-child { flex:1; height:1px; background:linear-gradient(270deg,transparent,var(--brand)) }
.aifu-footer-dot { width:6px; height:6px; border-radius:50%; background:var(--brand); flex:none }
.aifu-footer-mark { font-family:var(--mono); font-size:14px; letter-spacing:0.35em; color:var(--brand-ink); white-space:nowrap }
.aifu-footer-links { display:flex; gap:22px; flex-wrap:wrap; justify-content:center }

/* ---- prose (terms, privacy, any long-form page) ------------------------- */

.aifu-prose { max-width:78ch; margin:0 auto; padding:40px 20px 72px }
.aifu-prose h1 { font-size:clamp(28px,4vw,44px) }
.aifu-prose h2 { font-size:19px; margin:36px 0 8px }
.aifu-prose p { margin:0 0 14px; color:var(--ink-2) }
.aifu-prose strong { color:var(--ink) }
.aifu-prose ol, .aifu-prose ul { padding-left:1.3em; color:var(--ink-2) }
.aifu-prose li { margin:8px 0 }
.aifu-prose .aifu-meta { font-family:var(--mono); font-size:13.5px; letter-spacing:0.08em; color:var(--muted); margin:0 0 28px }

/* The background grid the design carries behind every page. Decorative only,
   so it is inert to pointer events and hidden from assistive technology by the
   element that uses it. */
.aifu-grid-overlay {
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(ellipse 80% 50% at 25% -5%, rgba(8,104,242,0.08), transparent 65%),
    repeating-linear-gradient(to right, rgba(8,104,242,0.06) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(to bottom, rgba(8,104,242,0.045) 0 1px, transparent 1px 80px);
}
.aifu-above { position:relative; z-index:1 }
/* The header carries both classes, and the rule above is later in this file with
   the same specificity as the header's own — so it has been setting the header
   to position:relative since the grid overlay shipped, and the sticky
   declaration up at .aifu-header has never had any effect. Two classes beat
   one; the header keeps the stacking context .aifu-above gives everything else
   over the overlay, and gets its top:0 from .aifu-header. */
.aifu-header.aifu-above { position:sticky; z-index:60 }

/* ---- scroll-driven motion ------------------------------------------------ */

/* Both effects are CSS scroll-driven animations, deliberately: this surface
   ships no JavaScript, and a test holds it to that. Browsers without
   animation-timeline simply keep the static page — the guard below is the
   whole fallback story, so nothing in here may be load-bearing.

   Keyframe values win over inline styles (the animation origin outranks
   ordinary author declarations), which is what lets these shrink the wordmark
   even though its height is an inline style in the template. */
@supports (animation-timeline: scroll()) {
  /* The sticky header gives back most of its height once the reader is past
     the top: the wordmark drops 64px -> 42px and the container tightens, over
     the first 160px of scroll, driven directly by scroll position — so it
     grows back as smoothly on the way up. */
  @keyframes aifu-header-compact { to { padding-top:5px; padding-bottom:5px } }
  .aifu-header .aifu-container {
    animation:aifu-header-compact linear both;
    animation-timeline:scroll();
    animation-range:0 160px;
  }
  @keyframes aifu-wordmark-compact { to { height:42px } }
  .aifu-header img {
    animation:aifu-wordmark-compact linear both;
    animation-timeline:scroll();
    animation-range:0 160px;
  }

}

/* ---- reveal on first sight ---------------------------------------------- */

/* The pieces inside a section — eyebrow, heading, then the cards, rows or
   steps one after another — fade up the first time they scroll into view and
   then stay. Once, not scrubbed: an earlier version tied this to scroll
   position, which reversed on the way back up and on the tall sections read
   as nothing at all.

   Remembering "seen" needs a script, so reveal.js adds .aifu-in to each piece
   the first time it intersects the viewport — and, before anything else, puts
   .aifu-js on <html>. Only under that class is anything hidden: a browser
   that never runs the file never hides a pixel, so there is no clock to race.
   (The first version hid under (scripting: enabled) and showed everything by
   fail-safe 2.5 s after load — before the reader had scrolled to any of it.)
   Reduced motion opts out of the whole block — the page is simply visible.

   Individual translate, never the transform shorthand: .aifu-model:hover and
   .aifu-step-icon:hover own transform, and the two compose instead of
   fighting. Cells rather than rows in tables, because a transform on <tr> is
   still uneven across engines; the row carries the class, its cells move. */
@media (prefers-reduced-motion: no-preference) {
  .aifu-grid > *, .aifu-stats > div, .aifu-table tbody > tr > td,
  .aifu-disclosure,
  section#how .aifu-container > div > div > div,
  .aifu-section > .aifu-container > .aifu-tag,
  .aifu-section h2:not(.aifu-prose h2),
  .aifu-section > .aifu-container > .aifu-lede {
    /* The hover transitions ride along: a transition shorthand replaces the
       element's own, and this rule outranks .aifu-model's and
       .aifu-disclosure's by order — without transform, border-color and
       box-shadow here, the model cards' lift and the FAQ's open state snapped
       instead of moving. */
    transition:opacity 620ms ease-out, translate 620ms ease-out, scale 620ms ease-out,
      transform 220ms ease, border-color 180ms ease, box-shadow 220ms ease;
    /* One delay per property, in the order the shorthand above lists them. The
       three reveal properties wait 80ms plus their stagger, so a piece does not
       pop the instant its edge clears the fold; transform, border-color and
       box-shadow -- everything the :hover states move -- wait for nothing. A
       single value here applied the stagger to hover as well, holding a card's
       lift for 440ms in the fifth grid position and 800ms from the ninth on. */
    transition-delay:calc(80ms + var(--aifu-i,0) * var(--aifu-step,0ms) + var(--aifu-after,0ms)),
      calc(80ms + var(--aifu-i,0) * var(--aifu-step,0ms) + var(--aifu-after,0ms)),
      calc(80ms + var(--aifu-i,0) * var(--aifu-step,0ms) + var(--aifu-after,0ms)),
      0s, 0s, 0s;
  }

  /* Hidden until seen — and only once reveal.js has announced itself on
     <html>. Up for cards, stats, headings and FAQ items; in from the left for
     eyebrows and table rows; the steps also grow. The numbered trust rows are
     deliberately not here — the founder wants that list still. */
  html.aifu-js :is(.aifu-grid > :not(.aifu-in), .aifu-stats > div:not(.aifu-in),
    .aifu-section h2:not(.aifu-prose h2):not(.aifu-in),
    .aifu-section > .aifu-container > .aifu-lede:not(.aifu-in),
    .aifu-disclosure:not(.aifu-in)) { opacity:0; translate:0 18px }
  html.aifu-js :is(.aifu-table tbody > tr:not(.aifu-in) > td,
    .aifu-section > .aifu-container > .aifu-tag:not(.aifu-in)) { opacity:0; translate:-14px 0 }
  html.aifu-js section#how .aifu-container > div > div > div:not(.aifu-in) { opacity:0; translate:0 14px; scale:.9 }

  /* Spacing between siblings that arrive together, and the head's order:
     eyebrow first, heading 80ms later, lede after that. */
  .aifu-grid > *, .aifu-stats > div { --aifu-step:90ms }
  .aifu-table tbody > tr > td { --aifu-step:60ms }
  section#how .aifu-container > div > div > div { --aifu-step:110ms }
  .aifu-disclosure { --aifu-step:50ms }
  .aifu-section h2:not(.aifu-prose h2) { --aifu-after:80ms }
  .aifu-section > .aifu-container > .aifu-lede { --aifu-after:160ms }

  /* The index each child reads its delay from: set on the parents that hold a
     revealed list, eight deep — no group on the site repeats more than eight
     times — and inherited by table cells from their row. */
  /* The first child says so explicitly: custom properties inherit, and a grid
     that is itself the fourth child of its container would otherwise hand its
     own index down to its first card — which then revealed after the second. */
  :is(.aifu-grid, .aifu-stats, .aifu-table tbody, section#how .aifu-container > div > div, section#trust .aifu-container > div, section#faq .aifu-container > div, .aifu-stack) > :nth-child(1) { --aifu-i:0 }
  :is(.aifu-grid, .aifu-stats, .aifu-table tbody, section#how .aifu-container > div > div, section#trust .aifu-container > div, section#faq .aifu-container > div, .aifu-stack) > :nth-child(2) { --aifu-i:1 }
  :is(.aifu-grid, .aifu-stats, .aifu-table tbody, section#how .aifu-container > div > div, section#trust .aifu-container > div, section#faq .aifu-container > div, .aifu-stack) > :nth-child(3) { --aifu-i:2 }
  :is(.aifu-grid, .aifu-stats, .aifu-table tbody, section#how .aifu-container > div > div, section#trust .aifu-container > div, section#faq .aifu-container > div, .aifu-stack) > :nth-child(4) { --aifu-i:3 }
  :is(.aifu-grid, .aifu-stats, .aifu-table tbody, section#how .aifu-container > div > div, section#trust .aifu-container > div, section#faq .aifu-container > div, .aifu-stack) > :nth-child(5) { --aifu-i:4 }
  :is(.aifu-grid, .aifu-stats, .aifu-table tbody, section#how .aifu-container > div > div, section#trust .aifu-container > div, section#faq .aifu-container > div, .aifu-stack) > :nth-child(6) { --aifu-i:5 }
  :is(.aifu-grid, .aifu-stats, .aifu-table tbody, section#how .aifu-container > div > div, section#trust .aifu-container > div, section#faq .aifu-container > div, .aifu-stack) > :nth-child(7) { --aifu-i:6 }
  :is(.aifu-grid, .aifu-stats, .aifu-table tbody, section#how .aifu-container > div > div, section#trust .aifu-container > div, section#faq .aifu-container > div, .aifu-stack) > :nth-child(8) { --aifu-i:7 }
  :is(.aifu-grid, .aifu-stats, .aifu-table tbody, section#how .aifu-container > div > div, section#trust .aifu-container > div, section#faq .aifu-container > div, .aifu-stack) > :nth-child(n+9) { --aifu-i:8 }

}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto }
  * { transition-duration:0.01ms !important; animation-duration:0.01ms !important }
  /* An infinite animation still runs under the rule above, just 0.01ms per
     cycle, which is a strobe rather than a stilled page. Stop it outright. */
  .aifu-flow { animation:none !important; display:none }
  /* Scroll-driven animations ignore duration — their clock is the scroll
     position — so the blanket rule above does not touch them. The reveal is
     motion and goes; the header shrink is size, not travel, but a reader who
     asked for stillness gets the constant header too. */
  .aifu-header .aifu-container, .aifu-header img { animation:none !important }
  /* The first-sight reveals are gated on (prefers-reduced-motion:
     no-preference) at their own block and need nothing here. */
}

/* ---- the checkout details form ------------------------------------------ */

/* Added by checkout.js, so the padding that makes room for the reveal button
   exists only where there is one -- the name and email boxes keep their own. */
.aifu-field { position:relative }
.aifu-field--peek input { padding-right:82px }
.aifu-peek {
  position:absolute; right:1px; bottom:1px; min-height:44px; padding:0 14px;
  border:0; background:transparent; cursor:pointer;
  font-family:var(--mono); font-size:12.5px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--brand-ink);
}
.aifu-peek:hover { color:var(--brand-deep) }

/* The submit spends a second and a half hashing a password and opening a
   Creem session. Without this the page simply looked frozen, and the button
   stayed clickable while it did. */
.aifu-btn[aria-busy="true"] { opacity:.85; cursor:progress; position:relative; padding-right:46px }
.aifu-btn[aria-busy="true"]::after {
  content:""; position:absolute; right:18px; top:50%; width:14px; height:14px; margin-top:-7px;
  border:2px solid rgba(255,255,255,0.4); border-top-color:#fff; border-radius:50%;
  animation:aifu-spin 700ms linear infinite;
}
@keyframes aifu-spin { to { transform:rotate(360deg) } }

@media (prefers-reduced-motion: reduce) {
  /* The blanket rule above shortens every animation to 0.01ms, which for an
     infinite spinner is a strobe. Name it out of existence instead. */
  .aifu-btn[aria-busy="true"]::after { animation:none }
}

/* ---- portal tokens ------------------------------------------------------ */

/* The customer portal is the dashboard prototype, rebuilt on this file in portal.css.
 * The design carried its own :root; these are the tokens of it that this file
 * did not already have, at the design's own values.
 *
 * Additive on purpose — every name below is new. Nothing above is renamed or
 * redefined, so no page that already ships changes colour. In particular
 * --warn-bg is not --warm-bg: the design's status peach for a badge, not the
 * translucent wash the landing's callout is painted with.
 *
 * --warn is not in the brief's list because the brief read --warm as the same
 * token. It is not; both values are #A8410F, and the portal needs the name the
 * design's rules actually reference.
 */
:root {
  --surface:  #FFFFFF;
  --border:   #DCE7F7;
  --ok:       #0B6B58;
  --ok-bg:    #E2F6F1;
  --warn:     #A8410F;
  --warn-bg:  #FFF0E7;
  --err:      #B3261E;
  --err-bg:   #FCEBEA;
  --info:     #0A57C8;
  --info-bg:  #E8F0FC;
  --coral:    #FF9A6B;
}

/* ---- signed-in header ---------------------------------------------------- */
/* The greeting that replaces SIGN IN and GET STARTED for a customer who has
 * already done both. It sits beside the Dashboard button in the same row as
 * the language switch, so it is typed like the other mono controls up there
 * rather than like body copy — and it is the one thing in that row that is not
 * a control, which is why it is ink-2 and not a link colour. */
.aifu-hello {
  font-family:var(--mono); font-size:14px; letter-spacing:0.06em;
  color:var(--ink-2); white-space:nowrap;
  max-width:22ch; overflow:hidden; text-overflow:ellipsis;
}

/* ===== P-V: the AI Arena blog (2026-09-09) ===== */

/* The founder's external design session shipped /blog as its own dark world: an
 * arena with a lightning seam down the middle, a rates ticker, cards with team
 * stripes, and an article wearing crumb / toc / table / code / note / read-next
 * chrome. Its two stylesheets (docs/superpowers/plans/blog-arena-mockup/css/)
 * are merged into this file rather than shipped beside it, for the reason at the
 * top of this file: the alternative is one product that looks like three.
 *
 * What the merge changed on purpose, so the next reader does not "restore" it:
 *
 *  - Both mockup :root blocks are gone. Every colour of theirs that equals a
 *    token above IS that token now. Only the arena's own computed tones stay as
 *    literals (#040B22 ground, #050F2C code well, #2FBF97 seam, #10A37F force,
 *    the rgba washes), and they live as --c-* locals on .aifu-arena so the light
 *    mode swaps one small set instead of every rule.
 *  - The mockup's resets are gone — *, html, body, img and :focus-visible are
 *    all already here. Its body{background:#040B22} in particular belongs to
 *    .aifu-arena and nowhere else: the shared header and footer are not part of
 *    the blog and do not go dark.
 *  - blog-index.css closed its 1080px media query with a stray `}` that ate the
 *    820px one. All three breakpoints are live below (4 -> 3 -> 2 -> 1 columns).
 *  - .aifu-vs, .aifu-titan, .mock-note and the pager are dropped: nothing in the
 *    port's markup uses them, and the plan refuses a decorative pager on a blog
 *    with one post — a pager that pages nowhere is a lie about the archive.
 *  - The card covers carry no <img>: no post has a cover asset yet, so the thumb
 *    paints itself at the aspect-ratio a real cover will land in. The mockup's
 *    .aifu-logline--coral modifier is gone with it — the templates emit no
 *    modifier class, so the blue/coral alternation is :nth-child(even).
 *  - Both sheets' light-mode blocks and both of their reduced-motion blocks are
 *    merged into one of each; rules that only restated a --c-* swap are gone.
 *
 * .aifu-container, .aifu-lede, .aifu-note, .aifu-prose, .aifu-table and
 * .aifu-code already exist above and are NOT redefined: the container is reused
 * as-is, and the other five are overridden only inside .aifu-arena.
 */

/* The mockup sets long-form prose in IBM Plex Sans. No woff2 for it ships in
 * this pair, so the stack falls through to --sans — which is what every other
 * body of prose on this site already renders in. Nothing off-origin is fetched;
 * the day the fonts job adds the file, every arena surface picks it up. */
:root { --body: 'IBM Plex Sans', var(--sans) }

/* ---- the arena shell ---------------------------------------------------- */

/* Two forces colliding over the deep navy ground: a green-blue one from the
   left, a coral one from the right. The --c-* locals below are the entire
   surface the light mode has to swap. */
.aifu-arena {
  --c-card:         rgba(9,22,54,0.78);
  --c-card-line:    rgba(67,185,255,0.2);
  --c-card-line-hi: rgba(67,185,255,0.6);
  --c-title:        var(--on-dark);
  --c-text:         #C6D5F2;
  --c-meta:         rgba(169,188,228,0.8);
  --c-code:         #050F2C;
  --c-shadow:       0 18px 44px rgba(2,10,32,0.6);

  position:relative; overflow:hidden; min-height:100vh;
  padding-bottom:clamp(60px,8vw,110px);
  color:var(--c-text);
  background:
    radial-gradient(ellipse 55% 60% at 8% 30%, rgba(16,163,127,0.42), transparent 60%),
    radial-gradient(ellipse 55% 60% at 92% 30%, rgba(255,110,60,0.38), transparent 60%),
    radial-gradient(ellipse 70% 40% at 50% 110%, rgba(5,15,44,0.9), transparent 70%),
    #040B22;
}

/* The seam where the two forces meet. */
.aifu-arena::before {
  content:""; position:absolute; inset:-5% 0; left:50%; width:2px;
  transform:translateX(-50%) skewX(-7deg);
  background:linear-gradient(180deg,transparent,rgba(253,254,255,0.9) 18%,#2FBF97 40%,rgba(255,154,107,0.9) 62%,transparent 90%);
  box-shadow:0 0 40px 6px rgba(47,191,151,0.5), 0 0 80px 20px rgba(255,154,107,0.25);
  animation:aifu-clash 3.2s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes aifu-clash {
  from { opacity:0.55; transform:translateX(-50%) skewX(-7deg) }
  to   { opacity:1;    transform:translateX(-50%) skewX(-4deg) }
}

/* The combat grid floor, laid flat under the content. */
.aifu-arena::after {
  content:""; position:absolute; inset:auto 0 0 0; height:44%;
  background:
    linear-gradient(180deg,transparent,rgba(4,11,34,0.7) 80%),
    repeating-linear-gradient(to right, rgba(67,185,255,0.08) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(to bottom, rgba(67,185,255,0.06) 0 1px, transparent 1px 40px);
  transform:perspective(600px) rotateX(38deg); transform-origin:50% 100%;
  pointer-events:none;
}

/* ---- the reading-progress bar ------------------------------------------- */

/* Scroll-driven, like the header compaction above, and guarded the same way:
   a browser without animation-timeline simply never paints it. z-index clears
   the sticky header's 60 — at top:0 with a lower one the header covers the bar
   completely, which is the one thing the mockup could not have known. */
@supports (animation-timeline: scroll()) {
  .aifu-progress {
    position:fixed; top:0; left:0; right:0; height:3px; z-index:70; pointer-events:none;
    background:linear-gradient(90deg,#10A37F,var(--coral));
    transform-origin:0 50%; transform:scaleX(0);
    animation:aifu-grow linear both; animation-timeline:scroll(root);
  }
  @keyframes aifu-grow { to { transform:scaleX(1) } }
}

/* ---- the rates ticker ---------------------------------------------------- */

/* The track holds the run of rates twice and travels exactly half its width, so
   the loop is seamless. Hover pauses it — a reader who wants to read a rate
   should not have to chase it. */
.aifu-ticker { border-bottom:1px solid var(--c-card-line); background:var(--c-card); overflow:hidden; white-space:nowrap }
.aifu-ticker-track { display:inline-flex; padding:11px 0; animation:aifu-tick 36s linear infinite }
.aifu-ticker span { font-family:var(--mono); font-size:13px; letter-spacing:0.08em; color:var(--c-meta); padding:0 26px; border-right:1px solid var(--c-card-line) }
.aifu-ticker b { color:var(--mint); font-weight:500 }
.aifu-ticker i { font-style:normal; color:var(--sky) }
.aifu-ticker:hover .aifu-ticker-track { animation-play-state:paused }
@keyframes aifu-tick { to { transform:translateX(-50%) } }

/* ---- the light-mode toggle ----------------------------------------------- */

/* A checkbox and a label, no script: html:has(#aifu-mode:checked) does the rest
   further down. It lives inside the blog content rather than in the shared
   header, which the port does not touch — :has() reads it from anywhere. */
.aifu-mode { position:relative; z-index:5; display:flex; justify-content:flex-end; margin:10px 0 0 }
.aifu-mode input { position:absolute; opacity:0; width:44px; height:44px; cursor:pointer }
.aifu-mode label {
  display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 16px;
  border:1px solid var(--c-card-line); border-radius:999px;
  font-family:var(--mono); font-size:12px; letter-spacing:0.14em;
  color:var(--c-text); background:var(--c-card); cursor:pointer;
}
.aifu-mode label:hover { border-color:var(--c-card-line-hi) }
.aifu-mode i { width:10px; height:10px; border-radius:50%; background:var(--sky); font-style:normal }
.aifu-mode .aifu-mode-txt::after { content:"DARK MODE" }

/* ---- the masthead -------------------------------------------------------- */

.aifu-mast { position:relative; z-index:2; padding:clamp(10px,1.5vw,20px) 0 0 }
.aifu-mast-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(20px,3.5vw,48px); align-items:center }
.aifu-mast-copy { display:flex; flex-direction:column; align-items:flex-start; text-align:left }
.aifu-mast h1 {
  margin:20px 0 0; font-size:clamp(34px,5vw,62px); line-height:1;
  letter-spacing:-0.02em; font-weight:700; color:var(--c-title); text-wrap:balance;
  text-shadow:0 4px 40px rgba(4,11,34,0.9), 0 0 60px rgba(67,185,255,0.35);
}
.aifu-mast p { font-family:var(--body); font-size:clamp(15.5px,1.5vw,18px); color:var(--c-text); max-width:60ch; margin:18px auto 0; line-height:1.75 }
.aifu-duelart { width:100%; height:auto; filter:drop-shadow(0 24px 60px rgba(2,10,32,0.65)) }

/* The art leads on a phone and the copy centres under it. */
@media (max-width:860px) {
  .aifu-mast-grid { grid-template-columns:1fr }
  .aifu-duelart { order:-1; max-width:440px; margin:0 auto }
  .aifu-mast-copy { align-items:center; text-align:center }
}

/* ---- the post grid ------------------------------------------------------- */

.aifu-log {
  list-style:none; margin:clamp(22px,3vw,36px) 0 0; padding:0;
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.8vw,22px);
}
.aifu-logline {
  position:relative; display:flex; flex-direction:column;
  background:var(--c-card); backdrop-filter:blur(4px);
  border:1px solid var(--c-card-line); border-radius:14px; overflow:hidden;
  transition:border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.aifu-logline:hover { border-color:var(--c-card-line-hi); box-shadow:var(--c-shadow); transform:translateY(-3px) }
/* The team stripe across the top of the card. */
.aifu-logline::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:2; background:linear-gradient(90deg,var(--brand),var(--sky)) }

/* No post carries a cover asset yet and the template emits an empty div, so the
   thumb paints itself — at the aspect-ratio a real cover will occupy, so adding
   one later is a background swap and not a reflow. */
.aifu-log-thumb {
  position:relative; aspect-ratio:3/2; overflow:hidden;
  border-bottom:1px solid var(--c-card-line);
  background:
    radial-gradient(ellipse 90% 80% at 26% 18%, rgba(67,185,255,0.34), transparent 62%),
    linear-gradient(160deg, var(--panel-dark), #040B22);
}
.aifu-log-thumb::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(4,11,34,0) 60%,rgba(4,11,34,0.3)) }

.aifu-log-main { min-width:0; position:relative; padding:15px 17px 17px; display:flex; flex-direction:column; gap:8px; align-items:flex-start; flex:1 }
.aifu-log-head { display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.aifu-log-cat {
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--mint); border:1px solid rgba(141,223,208,0.35); border-radius:999px;
  padding:3px 10px; text-decoration:none; position:relative; z-index:1;
}
.aifu-log-cat:hover { background:rgba(141,223,208,0.14); color:var(--mint) }
.aifu-log-head time { font-family:var(--mono); font-size:12px; color:var(--c-meta); font-variant-numeric:tabular-nums }
.aifu-log-title { margin:0; font-size:17px; line-height:1.32; font-weight:600; text-wrap:pretty }
.aifu-log-title a { color:var(--c-title); text-decoration:none }
/* The headline covers the whole card, so the card is one target — and the
   category chip above sits on its own z-index so it stays a separate link. */
.aifu-log-title a::after { content:""; position:absolute; inset:0 }
.aifu-logline:hover .aifu-log-title a { color:var(--sky); text-shadow:0 0 26px rgba(67,185,255,0.5) }
.aifu-log-desc {
  font-family:var(--body); margin:0; font-size:13.5px; line-height:1.6; color:var(--c-text);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.aifu-log-more { margin-top:auto; padding-top:4px; font-family:var(--mono); font-size:12px; letter-spacing:0.08em; color:rgba(169,188,228,0.65) }
.aifu-logline:hover .aifu-log-more { color:var(--sky) }

/* The other side of the ring. The mockup marked it with a --coral modifier
   class; the templates emit none, so the alternation is the card's position. */
.aifu-logline:nth-child(even)::before { background:linear-gradient(90deg,var(--warm),var(--coral)) }
.aifu-logline:nth-child(even) .aifu-log-thumb {
  background:
    radial-gradient(ellipse 90% 80% at 74% 18%, rgba(255,154,107,0.3), transparent 62%),
    linear-gradient(200deg, var(--panel-dark), #040B22);
}
.aifu-logline:nth-child(even) .aifu-log-cat { color:var(--coral); border-color:rgba(255,154,107,0.4) }
.aifu-logline:nth-child(even) .aifu-log-cat:hover { background:rgba(255,154,107,0.14); color:var(--coral) }
.aifu-logline:nth-child(even):hover .aifu-log-title a { color:var(--coral); text-shadow:0 0 26px rgba(255,154,107,0.45) }
.aifu-logline:nth-child(even):hover .aifu-log-more { color:var(--coral) }

/* ---- the article --------------------------------------------------------- */

.aifu-article { max-width:780px; margin:0 auto }
.aifu-crumb { font-family:var(--mono); font-size:13px; letter-spacing:0.08em; color:var(--c-meta); margin:clamp(18px,3vw,30px) 0 0 }
.aifu-crumb a { color:var(--sky) }
.aifu-crumb a:hover { text-decoration:underline; text-underline-offset:3px }
.aifu-article-meta { display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin:clamp(18px,2.5vw,26px) 0 0 }
.aifu-cat {
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--mint); border:1px solid rgba(141,223,208,0.4); border-radius:999px;
  padding:4px 12px; text-decoration:none;
}
.aifu-article-meta time { font-family:var(--mono); font-size:13px; color:var(--c-meta); font-variant-numeric:tabular-nums }
.aifu-article h1 { margin:14px 0 0; font-size:clamp(30px,4.4vw,52px); line-height:1.1; letter-spacing:-0.018em; font-weight:700; color:var(--c-title); text-wrap:balance }
/* .aifu-lede above is the landing page's, ink-2 on light and capped at 70ch;
   inside the arena the article owns the measure and the ground is dark. */
.aifu-arena .aifu-lede { font-family:var(--body); margin:16px 0 0; max-width:none; font-size:clamp(16.5px,1.5vw,19px); line-height:1.7; color:var(--c-text); text-wrap:pretty }
.aifu-heroart { display:block; width:min(560px,88%); margin:clamp(20px,3vw,32px) auto 0; filter:drop-shadow(0 20px 50px rgba(2,10,32,0.55)) }

.aifu-toc { margin:clamp(24px,3vw,34px) 0; padding:16px 20px 18px; background:var(--c-card); border:1px solid var(--c-card-line); border-radius:12px }
.aifu-toc > span { display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--c-meta); margin-bottom:10px }
.aifu-toc ol { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px; counter-reset:t }
.aifu-toc li { counter-increment:t; display:flex; gap:12px; align-items:baseline }
.aifu-toc li::before { content:counter(t,decimal-leading-zero); font-family:var(--mono); font-size:12px; color:var(--sky) }
.aifu-toc a { font-size:15px; color:var(--c-text); text-decoration:none }
.aifu-toc a:hover { color:var(--sky); text-decoration:underline; text-underline-offset:3px }

/* .aifu-prose above is the terms/privacy column — 78ch, centred, with its own
   page padding. Inside the arena the article element owns the measure, so this
   keeps the type and hands the width back. */
.aifu-arena .aifu-prose { max-width:none; margin:0; padding:0; font-family:var(--body) }
.aifu-arena .aifu-prose p { margin:0 0 1.35em; font-size:17px; line-height:1.8; color:var(--c-text); text-wrap:pretty }
.aifu-arena .aifu-prose h2 { font-family:var(--sans); font-size:clamp(22px,2.4vw,27px); line-height:1.25; margin:2em 0 0.7em; color:var(--c-title); letter-spacing:-0.01em }
.aifu-arena .aifu-prose h3 { font-family:var(--sans); font-size:clamp(18px,1.9vw,20px); line-height:1.3; margin:1.7em 0 0.6em; color:var(--c-title) }
/* Both of these are painted --ink by the prose rules above — dark navy on the
   arena's dark navy, which is invisible rather than merely wrong. */
.aifu-arena .aifu-prose strong { color:var(--c-title) }
/* Inline code in a guide's prose (P-W): the field names and method calls the
   wave-1 posts teach; without this it fell back to the browser's default
   monospace at its default size beside 17px body text. */
.aifu-arena .aifu-prose code { font-family:var(--mono); font-size:0.92em; color:var(--c-title) }
.aifu-arena .aifu-prose ol, .aifu-arena .aifu-prose ul { color:var(--c-text) }
/* This file strips the underline from every <a>. In running prose it goes back
   on: inside a paragraph, colour alone is not a link. */
.aifu-arena .aifu-prose a { color:var(--sky); text-decoration:underline; text-underline-offset:3px }

/* The table scrolls inside its own wrapper rather than widening the page. */
.aifu-tablewrap { overflow-x:auto; border:1px solid var(--c-card-line); border-radius:12px; margin:1.5em 0; background:var(--c-card) }
.aifu-arena .aifu-table { border-collapse:collapse; width:100%; min-width:560px; font-size:15px }
.aifu-arena .aifu-table th { font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:var(--c-meta); text-align:left; padding:12px 16px; border-bottom:1px solid var(--c-card-line); white-space:nowrap }
.aifu-arena .aifu-table td { padding:13px 16px; border-bottom:1px solid var(--c-card-line); font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--c-title) }
.aifu-arena .aifu-table tr:last-child td { border-bottom:0 }
.aifu-arena .aifu-table td:first-child { color:var(--mint) }
/* .num is this file's own numeric column, and the weights table uses it. The
   th rule above ties with .aifu-table th.num on specificity and would win on
   order alone — which left-aligns a heading over a right-aligned column. */
.aifu-arena .aifu-table th.num, .aifu-arena .aifu-table td.num { text-align:right }

/* The code well stays dark in both modes — it is a terminal, not a surface. */
.aifu-arena .aifu-code {
  margin:1.5em 0; padding:20px 22px; overflow-x:auto;
  background:var(--c-code); color:#CFE3FF;
  font-family:var(--mono); font-size:14px; line-height:1.75;
  border:1px solid var(--c-card-line); border-radius:12px;
}

/* .aifu-note above is the landing page's small print; the arena's is a callout
   box with a mint rule down its left edge. */
.aifu-arena .aifu-note {
  margin:1.5em 0; padding:16px 20px; max-width:none;
  border:1px solid rgba(141,223,208,0.4); border-left:3px solid var(--mint);
  border-radius:0 12px 12px 0; background:var(--c-card);
  font-family:var(--body); font-size:15.5px; line-height:1.7; color:var(--c-text);
}

.aifu-readnext { margin:clamp(40px,5vw,60px) 0 0; border-top:1px solid var(--c-card-line); padding-top:clamp(22px,3vw,30px) }
.aifu-readnext > span { display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--c-meta); margin-bottom:14px }
.aifu-readnext ul { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:12px }
.aifu-readnext a { display:flex; flex-direction:column; gap:4px; padding:16px 18px; border:1px solid var(--c-card-line); border-radius:12px; background:var(--c-card); text-decoration:none; min-height:44px; justify-content:center }
.aifu-readnext a:hover { border-color:var(--c-card-line-hi) }
.aifu-readnext b { font-size:15.5px; font-weight:600; color:var(--c-title) }
.aifu-readnext a:hover b { color:var(--sky) }
.aifu-readnext small { font-family:var(--mono); font-size:12.5px; color:var(--c-meta); letter-spacing:0.04em }

/* ---- light mode, from one checkbox --------------------------------------- */

/* Dark is the arena's default and light is the opt-out, which is the reverse of
   every other page here — so the swap is scoped to .aifu-arena and to the
   handful of accents the --c-* locals cannot carry. Rules that only restated a
   local swap (the ticker's border, its span colour, the thumb's border) are not
   repeated below: they follow --c-card-line and --c-meta on their own. */
html:has(#aifu-mode:checked) .aifu-arena {
  --c-card:         var(--panel);
  --c-card-line:    var(--line-2);
  --c-card-line-hi: var(--line-4);
  --c-title:        var(--ink);
  --c-text:         var(--ink-2);
  --c-meta:         var(--muted);
  --c-code:         var(--ink);
  --c-shadow:       0 18px 40px rgba(8,104,242,0.14);
  background:
    radial-gradient(ellipse 55% 60% at 8% 30%, rgba(16,163,127,0.12), transparent 60%),
    radial-gradient(ellipse 55% 60% at 92% 30%, rgba(255,110,60,0.1), transparent 60%),
    var(--bg);
}
html:has(#aifu-mode:checked) .aifu-arena::before { opacity:0.35 }
html:has(#aifu-mode:checked) .aifu-arena::after {
  background:
    repeating-linear-gradient(to right, rgba(8,104,242,0.05) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(to bottom, rgba(8,104,242,0.04) 0 1px, transparent 1px 40px);
}
html:has(#aifu-mode:checked) .aifu-mast h1 { text-shadow:none }
html:has(#aifu-mode:checked) .aifu-ticker { background:var(--bg-alt) }
html:has(#aifu-mode:checked) .aifu-mode i { background:var(--brand) }
html:has(#aifu-mode:checked) .aifu-mode .aifu-mode-txt::after { content:"LIGHT MODE" }

/* Mint and sky are the dark ground's accents and neither of them holds 4.5:1 on
   white; on the light ground the same roles are played by --green-ink and
   --brand-ink, which are what the rest of this file already uses. */
html:has(#aifu-mode:checked) .aifu-ticker b,
html:has(#aifu-mode:checked) .aifu-arena .aifu-table td:first-child { color:var(--green-ink) }
html:has(#aifu-mode:checked) .aifu-log-cat,
html:has(#aifu-mode:checked) .aifu-cat { color:var(--green-ink); border-color:rgba(15,138,114,0.4) }
html:has(#aifu-mode:checked) .aifu-log-cat:hover { background:rgba(15,138,114,0.1); color:var(--green-ink) }
html:has(#aifu-mode:checked) .aifu-arena .aifu-note { border-color:rgba(15,138,114,0.4); border-left-color:var(--green) }
html:has(#aifu-mode:checked) .aifu-ticker i,
html:has(#aifu-mode:checked) .aifu-crumb a,
html:has(#aifu-mode:checked) .aifu-toc li::before,
html:has(#aifu-mode:checked) .aifu-toc a:hover,
html:has(#aifu-mode:checked) .aifu-arena .aifu-prose a,
html:has(#aifu-mode:checked) .aifu-readnext a:hover b { color:var(--brand-ink) }
html:has(#aifu-mode:checked) .aifu-logline:hover .aifu-log-title a { color:var(--brand-ink); text-shadow:none }
html:has(#aifu-mode:checked) .aifu-logline:hover .aifu-log-more { color:var(--brand-ink) }

/* The coral side keeps its own hue, at the --warm value the rest of the site
   uses for it — #FF9A6B is a dark-ground colour and fails on white. */
html:has(#aifu-mode:checked) .aifu-logline:nth-child(even) .aifu-log-cat { color:var(--warm); border-color:rgba(168,65,15,0.4) }
html:has(#aifu-mode:checked) .aifu-logline:nth-child(even) .aifu-log-cat:hover { background:rgba(168,65,15,0.1); color:var(--warm) }
html:has(#aifu-mode:checked) .aifu-logline:nth-child(even):hover .aifu-log-title a { color:var(--warm); text-shadow:none }
html:has(#aifu-mode:checked) .aifu-logline:nth-child(even):hover .aifu-log-more { color:var(--warm) }

/* The self-painted covers lighten with the cards; a navy slab on a white card
   reads as a broken image rather than as artwork. */
html:has(#aifu-mode:checked) .aifu-log-thumb {
  background:
    radial-gradient(ellipse 90% 80% at 26% 18%, rgba(8,104,242,0.18), transparent 62%),
    linear-gradient(160deg, var(--bg-alt), var(--panel));
}
html:has(#aifu-mode:checked) .aifu-logline:nth-child(even) .aifu-log-thumb {
  background:
    radial-gradient(ellipse 90% 80% at 74% 18%, rgba(255,154,107,0.28), transparent 62%),
    linear-gradient(200deg, var(--bg-alt), var(--panel));
}
html:has(#aifu-mode:checked) .aifu-log-thumb::after { background:linear-gradient(180deg,rgba(8,104,242,0) 60%,rgba(8,104,242,0.08)) }

/* ---- focus, on the arena's own ground ------------------------------------ */

/* The ring above is --brand-deep, drawn for a #F6FAFF page; on #040B22 it is
   very nearly invisible. Inside the arena the ring is --sky, and it comes back
   to --brand-deep when the reader turns the lights on. [tabindex] is in the
   list for the scrolling table region and the code block, which take focus so
   they can be scrolled by keyboard and which this file's ring does not cover. */
.aifu-arena :is(a,button,input,select,summary,[tabindex]):focus-visible { outline:3px solid var(--sky); outline-offset:2px }
html:has(#aifu-mode:checked) .aifu-arena :is(a,button,input,select,summary,[tabindex]):focus-visible { outline-color:var(--brand-deep) }
/* The toggle's own checkbox is opacity:0, so its ring would be invisible too —
   the label wears it instead. */
.aifu-mode:has(input:focus-visible) label { outline:3px solid var(--sky); outline-offset:2px }
html:has(#aifu-mode:checked) .aifu-mode:has(input:focus-visible) label { outline-color:var(--brand-deep) }

/* ---- the grid, down to 360px --------------------------------------------- */

/* All three of these: blog-index.css closed the first one twice and lost the
   820px step, so the grid jumped from three columns straight to one. */
@media (max-width:1080px) { .aifu-log { grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (max-width:820px)  { .aifu-log { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:520px)  { .aifu-log { grid-template-columns:1fr } }

/* ---- reduced motion ------------------------------------------------------ */

/* The blanket rule further up shortens every animation to 0.01ms, which for the
   three infinite ones here is a strobe rather than a stilled page — so they are
   named out of existence, the way .aifu-flow is. The progress bar's clock is
   scroll position, which no duration touches at all: it goes entirely. */
@media (prefers-reduced-motion: reduce) {
  .aifu-arena::before { animation:none !important }
  .aifu-ticker-track { animation:none !important }
  .aifu-progress { animation:none !important; display:none }
  .aifu-logline { transition:none }
  .aifu-logline:hover { transform:none }
}