/* 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.ttf') format('truetype') }
@font-face { font-family:'Chakra Petch'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/chakra-petch-500.ttf') format('truetype') }
@font-face { font-family:'Chakra Petch'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/chakra-petch-600.ttf') format('truetype') }
@font-face { font-family:'Chakra Petch'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/chakra-petch-700.ttf') format('truetype') }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/ibm-plex-mono-400.ttf') format('truetype') }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/ibm-plex-mono-500.ttf') format('truetype') }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/ibm-plex-mono-600.ttf') format('truetype') }

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