/* 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. This is only the fallback for a browser that runs no
     script: reveal.js sets it to the header's measured height plus a breath,
     because that height changes with the width and the language (112px wide,
     145px at 820px, 245px on a phone, measured 2026-10-04 -- a fixed 96px
     left every jumped-to heading under the header). */
  --header-clearance: 128px;
}

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 }
/* A table cell marked aifu-num holds an identifier -- an alias, a generation,
   a model name -- and a browser breaks a line after a hyphen, so in a narrow
   column sol-6.1 printed as "sol-" over "6.1" (every /docs table at 375px,
   2026-10-04). The table scrolls inside its frame instead. */
td.aifu-num { white-space:nowrap }
/* The landing's savings comparison: the reference box, the multiple and our
   box side by side, stacked on a phone. Side by side each box is as wide as
   its longest word (a 28px figure, an uppercase label), and the three needed
   more than a phone has: the landing laid out 381px wide at 360px and 392px
   in Spanish (2026-10-04). Stacked, the multiple sits between the two. */
.aifu-buys { display:grid; grid-template-columns:1fr clamp(56px,7vw,84px) 1fr; align-items:stretch }
@media (max-width:520px) { .aifu-buys { grid-template-columns:1fr } }
@media (max-width:520px) { .aifu-buys > :nth-child(2) { padding:12px 0 } }

/* ---- 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) }

/* The model grid's featured row (2026-10-04). Seven cards in three columns
   leave one alone on the last row, so astra takes the first row whole: it
   spans every column the grid has (on one column, the column it already had)
   and the six below it fill 3+3 at three columns and 2+2+2 at two. Its body is
   two blocks -- who it is, and what it is best for -- that stack exactly like
   the one block of every other card while the card is narrow (26px top, 11px
   between them, 20px bottom, 28px sides), and sit side by side from a 900px
   viewport, where the grid is ~828px wide; the right-hand 120px is left to the
   painted disc, which reaches 128px into the card and 142px down it. */
.aifu-model--wide { grid-column:1 / -1 }
.aifu-model-split { position:relative; z-index:1; display:flex; flex-direction:column }
.aifu-model-split > div { display:flex; flex-direction:column; gap:11px; padding:0 28px }
.aifu-model-split > div:first-child { padding-top:26px }
.aifu-model-split > div:last-child { padding-top:11px; padding-bottom:20px }
@media (min-width:900px) {
  .aifu-model-split { flex-direction:row; padding-right:120px }
  .aifu-model-split > div:first-child, .aifu-model-split > div:last-child { flex:1 1 0; min-width:0; padding:26px 28px 20px }
}

.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;
  }

}

/* ---- the phone header and checkout -------------------------------------- */

/* Measured on prod at 375x812 on /checkout/details?plan=starter, 2026-10-23
   (plan docs/superpowers/plans/2026-10-23-mobile-header-checkout.md): the
   header wrapped into a 229px sticky block, 28% of the screen at every scroll
   position, and the plan card pushed the form below the first screen. Below
   761px, then, and nowhere above it:

   - The header scrolls away with the page (P1). The rule names both classes
     and sits after .aifu-header.aifu-above above, which it has to beat on
     source order. The shrink-on-scroll animations go with it: a header that is
     not on screen has nothing to shrink, and resizing one as it scrolls off
     moves the page under the reader's thumb. An anchor then needs a breath
     above it rather than the header's height.
   - The header is compact (P2). The wordmark is 40px tall, as an !important
     height because 64px is an inline style on every header. The language
     switch and the sign-in sit beside it when they fit: the spacer's basis is
     0, so it joins the wordmark's row whenever its widest piece does (the
     switch, narrowed to 7px a side) and wraps under it otherwise, and its own
     rows close up to 4px. The nav is the last row, one line that scrolls
     sideways with its 44px targets kept. No menu button and no script.
   - The checkout puts the form first (P3). The card moves after it by order,
     not in the markup, and .aifu-details-summary says in one line under the
     H1 what is being bought, from the same fields the card prints. Above 760px
     the card is beside the form and the line is hidden.
   - The end of a page clears the contact launcher, 56px tall and 16px off the
     bottom edge (P4): the footer where there is one, and main where nothing
     follows it -- the return pages, the 404 and unsubscribe. A browser
     without :has() drops that one rule and keeps the 520px clearances
     further down. */
.aifu-details-summary { display:none; margin:0; font-size:15px; color:var(--brand-mid) }
@media (max-width:760px) {
  .aifu-header.aifu-above { position:static }
  html { scroll-padding-top:16px }
  .aifu-header .aifu-container, .aifu-header img { animation:none }
  .aifu-header .aifu-container { gap:4px 12px; padding-top:6px; padding-bottom:6px }
  .aifu-header img { height:40px !important }
  .aifu-header .aifu-spacer { flex:1 1 0%; justify-content:flex-end; row-gap:4px !important }
  .aifu-header .aifu-spacer [role="group"] a { padding:8px 7px !important }
  .aifu-nav { order:1; flex:1 1 100%; min-width:0; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none }
  .aifu-nav::-webkit-scrollbar { display:none }
  .aifu-nav a { flex:none; white-space:nowrap }
  .aifu-details-plan { order:1 }
  .aifu-details-summary { display:block }
  .aifu-footer { padding-bottom:96px }
  main.aifu-above:not(:has(~ .aifu-footer)) { padding-bottom:104px }
}

/* ---- 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 }
}

/* The PayPal row that leads the buy buttons where PayPal takes the payment
   (plan docs/superpowers/plans/2026-10-17-checkout-paypal-mark.md, D2). The
   logo is PayPal's file at 24px high with its own width following, never
   stretched, recoloured or cropped, and it keeps at least its own height of
   clear space: 24px of gap beside the words, and the row's 48px minimum height
   with the 12px gap under it above and below. A rule closes the row off from
   the buttons, so the mark reads as where the payment happens rather than as
   one more control. */
.aifu-paypal { display:flex; flex-direction:column; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--line-2) }
.aifu-paypal-row {
  display:flex; align-items:center; flex-wrap:wrap; gap:0 24px; min-height:48px; margin:0;
  font-size:15.5px; font-weight:600; color:var(--ink);
}
.aifu-paypal-row img { display:block; height:24px; width:auto; max-width:none }
.aifu-paypal-note { color:var(--muted) }

/* ---- 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);
  /* A stacking context of its own, so the two decorations below can sit at
     z-index:-1 — above this background, below every word in the arena. Without
     it they painted over the article, and a long post's last screen was dimmed
     by the floor's gradient (2026-10-28). */
  isolation:isolate;
  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; z-index:-1;
}
@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 — under it for real since
   2026-10-28 (z-index:-1 inside the arena's isolated stacking context): before
   that it was painted after the article and darkened whatever reached the
   bottom 44% of the section. */
.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; z-index:-1;
}

/* ---- 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)) }

/* The card's picture. An <img> of the post's cover when it has one, else an
   empty div that paints itself with the gradient below — the same box either
   way, so a cover arriving later is a swap and not a reflow. 16:9 since
   2026-10-28: every cover the blog has is 1200×630, within six percent of this
   box, and the old 3:2 box stretched them (there was no object-fit when the
   div became an img); cover crops a sliver off each side instead. */
.aifu-log-thumb {
  position:relative; display:block; width:100%; aspect-ratio:16/9; overflow:hidden;
  object-fit:cover; object-position:center;
  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)) }

/* Not positioned, on purpose (2026-10-29): the headline's stretched link
   below measures itself against the nearest positioned ancestor, and while
   this block was position:relative the link stopped at the text and the
   picture above it went nowhere on a click. The card (.aifu-logline) is the
   positioned box now, so the link covers all of it. */
.aifu-log-main { min-width:0; padding:15px 17px 17px; display:flex; flex-direction:column; gap:8px; align-items:flex-start; flex:1 }
/* The picture's own anchor: a block with no decoration of its own. */
.aifu-log-thumb-link { display:block; line-height:0 }
.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)) }

/* The chips under a post. P-AD5 drew them as text that went nowhere; since
   2026-10-28 each is a link to its tag archive at /blog/tag/<slug>, the way a
   WordPress tag is (the founder: "như blog wordpress là chuẩn nhất"). The
   archive is where the thin-page worry is answered now — one post makes it a
   page that is noindex,follow and out of the sitemap — so the chip may say
   "press me": the hover is the trail's sky and the card's bright edge, the two
   things this file already uses for a link on the dark ground. Scoped to a.,
   because .aifu-tag is also the landing's eyebrow and must not light up under a
   pointer there. A tag with no ASCII in it has no archive and stays a span. */
.aifu-tags { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:clamp(26px,3.4vw,38px) 0 0; padding-top:18px; border-top:1px solid var(--c-card-line) }
.aifu-tags-label { font-family:var(--mono); font-size:11.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--c-meta) }
/* Scoped to the strip since 2026-10-28: a bare .aifu-tag here, later in the
   file than the eyebrow rule above, restyled every "// 01 · PRICING" on the
   landing as a 12px pill in the arena's colours. */
.aifu-tags .aifu-tag { font-family:var(--mono); font-size:12px; color:var(--c-meta); background:var(--c-card); border:1px solid var(--c-card-line); border-radius:999px; padding:4px 12px; text-decoration:none }
.aifu-tags a.aifu-tag:hover { color:var(--sky); border-color:var(--c-card-line-hi) }

.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) }
/* A list item in the paragraph's own type. Without this an <li> fell through to
   the 16px/1.6 base while the paragraph beside it was 17px/1.8, and a post's
   price list, its "pick Terra for" lists and its Sources read smaller and
   tighter than the prose — which the founder read as "mờ" (2026-10-28). */
.aifu-arena .aifu-prose li { font-size:17px; line-height:1.8 }
/* 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 TikTok player inside a post (plan 2026-10-28-blog-tiktok-embed): a
   [tiktok <id>] line in the body is TikTok's own iframe, vertical, at a
   phone's width and centred — the article's full width would make a 9:16
   frame two screens tall. The card colour shows while the player loads. */
.aifu-embed--tiktok { max-width:360px; margin:1.6em auto; aspect-ratio:9/16 }
.aifu-embed--tiktok iframe { width:100%; height:100%; border:0; border-radius:14px; display:block; background:var(--c-card) }

/* 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,
.aifu-home-blog .aifu-log-cat { color:var(--green-ink); border-color:rgba(15,138,114,0.4) }
html:has(#aifu-mode:checked) .aifu-log-cat:hover,
.aifu-home-blog .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-tags a.aifu-tag:hover,
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,
.aifu-home-blog .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,
.aifu-home-blog .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,
.aifu-home-blog .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,
.aifu-home-blog .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,
.aifu-home-blog .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,
.aifu-home-blog .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,
.aifu-home-blog .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,
.aifu-home-blog .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,
.aifu-home-blog .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 } }

/* ---- the blog on the home page ------------------------------------------- */

/* The six newest posts between #trust and #faq (plan
   docs/superpowers/plans/2026-10-28-home-blog-section.md) are the blog's own
   cards, and every colour a card has reads the arena's --c-* locals, which
   nothing on the landing declares: without this rule a card there would have
   no ground, no border and no title colour. The wrapper declares the light set
   the arena's #aifu-mode:checked branch uses, value for value, because the
   landing has no toggle and its paper is always light, so the cards wear
   /blog's light mode. Repeated rather than shared: the arena's light set is a
   toggle's and this one is a page's. The accents the locals cannot carry (mint,
   sky and coral, which fail 4.5:1 on white) are not restated here; this
   wrapper joins the light mode's own rules for them, above.

   Around the list and not the section: .aifu-tag is the landing's eyebrow and
   also the blog's tag chip, whose rule reads these same locals, so a wrapper
   on the section would turn its eyebrow into a pill unlike the six above it. */
.aifu-home-blog {
  --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-shadow:       0 18px 40px rgba(8,104,242,0.14);
}
/* The stack's gap already sets the list off from the lede, and the margin the
   list keeps on /blog would double it. "read ->" at rest is a dark ground's
   pale blue, about 2:1 on white, so it takes the meta colour here. */
.aifu-home-blog .aifu-log { margin:0; grid-template-columns:repeat(3,minmax(0,1fr)) }
.aifu-home-blog .aifu-log-more { color:var(--muted) }
/* Three columns rather than the shelf's four: six cards in three columns are
   two even rows, and in four they are a full row and a ragged half. Then two
   on a tablet and one on a phone, at the shelf's own steps; the rule above
   outranks .aifu-log's steps, so it repeats the two it still needs. */
@media (max-width:820px) { .aifu-home-blog .aifu-log { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:520px) { .aifu-home-blog .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 }
}

/* ---- the floating contact stack ------------------------------------------ */

/* A round launcher in the bottom-right corner of every public page which opens
   into the short list of ways to reach a human. It is a native <details>: no
   script runs on this site's landing at all, and a disclosure widget the browser
   already implements is one that works before, during and after a failed load.
   The three discs are the brand colours of the services they open plus this
   site's own accent for the email, because a reader recognises the colour
   before the word. Every icon is an inline path — nothing is fetched. */

/* Midway up the right edge since 2026-10-27 (founder: "cho nó lên cao hơn đi
   e, cho lên giữa luôn"), where it no longer sits on the footer's last line.
   The list still opens above the launcher. */
.aifu-contact { position:fixed; right:16px; top:50%; transform:translateY(-50%); z-index:60 }
/* list-style covers Firefox and the ::-webkit-details-marker rule the rest;
   display:grid removes the triangle a third way and centres the glyph. */
.aifu-contact summary {
  list-style:none; cursor:pointer; width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; background:var(--brand);
  box-shadow:0 10px 24px rgba(8,104,242,0.3);
  transition:box-shadow 180ms ease, transform 180ms ease;
}
.aifu-contact summary::-webkit-details-marker { display:none }
.aifu-contact summary:hover { box-shadow:0 14px 30px rgba(8,104,242,0.45); transform:translateY(-1px) }
.aifu-contact summary svg { width:26px; height:26px; fill:var(--on-dark) }
/* Absolutely positioned rather than the details being a flex column-reverse:
   the list has to sit above the launcher, and changing a <details>' own display
   is the one thing that has historically taken its open/closed behaviour with
   it. position:fixed on the parent is the containing block this hangs from. */
.aifu-contact ul {
  position:absolute; right:0; bottom:66px; list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:10px; align-items:flex-end;
}
.aifu-contact li a { display:flex; align-items:center; gap:8px; text-decoration:none }
.aifu-contact li a span {
  background:var(--bg-dark); color:var(--on-dark); font-size:14px; font-weight:500;
  line-height:1; padding:9px 14px; border-radius:999px; white-space:nowrap;
  box-shadow:0 8px 20px rgba(7,27,74,0.18);
}
.aifu-contact li a i {
  flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  box-shadow:0 8px 20px rgba(7,27,74,0.18);
}
.aifu-contact li a i svg { width:22px; height:22px; fill:var(--on-dark) }
.aifu-contact li a:hover i { box-shadow:0 10px 26px rgba(7,27,74,0.28) }
.aifu-contact-tg { background:#229ed9 }
.aifu-contact-wa { background:#25d366 }
.aifu-contact-mail { background:var(--brand) }

/* The launcher is 56px of fixed furniture over the bottom-right corner, and on
   a 360px page that corner is where the footer's last line and the prose pages'
   last paragraph end. The clearance is given to them rather than to the body,
   whose padding would paint a strip of page background under the footer. */
@media (max-width:520px) {
  /* Three quarters down on a phone (founder, 2026-10-27: "dịch xuống 75% thay
     vì 50% hiện tại"): at mid-height it sat on the hero's paragraph. */
  .aifu-contact { right:12px; top:75% }
  .aifu-footer { padding-bottom:96px }
  .aifu-prose { padding-bottom:104px }
}

@media (prefers-reduced-motion: reduce) {
  .aifu-contact summary { transition:none }
  .aifu-contact summary:hover { transform:none }
}

/* ---- return pages ------------------------------------------------------- */
/* /checkout/success, /checkout/renewed, /checkout/cancelled and
   /checkout/expired (plan
   docs/superpowers/plans/2026-10-17-billing-card-and-return-pages.md, D3).
   They used to be plain prose on the grid, with nothing to say the purchase
   had worked. Now one centred card: a round mark (a check drawn in CSS when the
   provider vouched for the return, an "i" otherwise), the heading, a one-line
   lead, the steps with their own counters, and a row of buttons that wraps to
   full width on a phone. Tokens only; the side gutter is 16px, so the card
   fits a 360px screen. The bottom padding on a phone clears the contact
   launcher, as .aifu-prose does. */
.aifu-result-page { padding:clamp(32px,6vw,72px) 16px 72px }
.aifu-result {
  max-width:560px; margin:0 auto; padding:clamp(24px,5vw,40px);
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  box-shadow:0 1px 2px var(--line), 0 18px 40px -24px var(--line-4);
  text-align:center;
}
.aifu-result h1 { font-size:clamp(26px,4vw,36px); line-height:1.15; margin:0 0 10px; text-wrap:balance }
.aifu-result-lead { margin:0 auto 14px; max-width:46ch; font-size:16.5px; line-height:1.6; color:var(--ink-2); text-wrap:pretty }
.aifu-result-lead strong { color:var(--ink) }
.aifu-result-mark {
  display:grid; place-items:center; width:56px; height:56px; margin:0 auto 18px;
  border-radius:50%; font-family:var(--mono); font-size:24px; font-weight:600; line-height:1;
}
.aifu-result-mark--ok { background:var(--ok-bg); color:var(--ok) }
.aifu-result-mark--ok::before {
  content:""; width:12px; height:22px; margin-top:-4px;
  border:solid var(--ok); border-width:0 4px 4px 0; transform:rotate(45deg);
}
.aifu-result-mark--info { background:var(--info-bg); color:var(--info) }
.aifu-result-mark--info::before { content:"i" }
.aifu-result-steps {
  list-style:none; counter-reset:aifu-step; margin:8px 0 0; padding:0;
  display:flex; flex-direction:column; gap:12px; text-align:left;
}
.aifu-result-steps li {
  counter-increment:aifu-step; display:grid; grid-template-columns:28px 1fr; gap:12px;
  align-items:start; margin:0; color:var(--ink-2); line-height:1.55;
}
.aifu-result-steps li::before {
  content:counter(aifu-step); display:grid; place-items:center; width:28px; height:28px;
  border-radius:50%; background:var(--bg-alt); color:var(--brand-ink);
  font-family:var(--mono); font-size:14px; font-weight:600;
}
.aifu-result-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:24px 0 0 }
@media (max-width:520px) {
  .aifu-result-page { padding-bottom:104px }
  .aifu-result-actions .aifu-btn { flex:1 1 100% }
}