/* StageVO public site — shared styles.
   Layout concept: a navy "drawing sheet" band for the product story, cool-neutral page for reading,
   one signal-orange accent reserved for money and actions. Archivo (brand face) for display and figures,
   Plus Jakarta Sans (Yudiserve family face) for reading. */

:root {
  /* Palette A — Signal Orange (agreed 4 Oct). Other palettes override these tokens via [data-palette]. */
  --ground: #14181B;          /* navy band, product card text */
  --ground-2: #2A3036;        /* raised surface on navy */
  --on-ground: #D5DAE3;       /* body text on navy */
  --on-ground-strong: #FFFFFF;
  --on-ground-muted: #A9B4C6;
  --grid-line: rgba(213, 218, 227, 0.07);
  --accent: #D9571A;          /* ring, fills on light */
  --accent-bright: #F07A3D;   /* ring and buttons on navy; button fill everywhere */
  --accent-soft: #FFB48A;     /* labels on navy */
  --accent-ink: #B8460F;      /* accent text and links on light surfaces (AA) */
  --btn-fg: #14181B;          /* text on the bright accent button */
  --track: #3A4A63;           /* unfilled ring on navy */
  --track-light: #D8D4CC;     /* unfilled ring on light */

  --bg: #F5F6F8;              /* page */
  --surface: #FFFFFF;         /* cards */
  --paper: #F4F2EE;           /* warm surface (theme-aware) */
  --sheet: #F4F2EE;           /* the printed statement card: stays light in both themes */
  --sheet-hi: #FFF1E8;        /* ready-to-claim total on the sheet */
  --highlight: #FFF1E8;       /* "ready to claim" total */
  --fg: #142033;              /* headings */
  --body: #3E464C;            /* paragraphs */
  --muted: #5B6578;           /* captions */
  --border: #E1E4EA;
  --focus: #2F5BD3;

  /* Status (semantic, not accent) */
  --ok-fg: #11683B; --ok-bg: #E9F7EF;
  --due-fg: #9A4A0B; --due-bg: #FFF3E8;
  --late-fg: #A1262C; --late-bg: #FDECEC;

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.1875rem;
  --step-2: 1.5rem;
  --step-3: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  --step-4: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem);

  --radius: 14px;
  --radius-sm: 8px;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: light;
}


/* Alternative palettes, for the review preview only (B–E from the logo brief). */
:root[data-palette="d"] { --ground:#20232A; --ground-2:#2A2E37; --accent:#C98A12; --accent-bright:#E6A92E; --accent-soft:#F3D394; --accent-ink:#8A5A00; --btn-fg:#20232A; --track:#40444F; --track-light:#E6DCC8; --highlight:#FBF1DC; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--body);
  font-family: var(--font-body); font-size: var(--step-0); line-height: 1.65;
}
img, svg { max-width: 100%; }
a { color: var(--accent-ink); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 {
  font-family: var(--font-display); color: var(--fg); line-height: 1.12;
  margin: 0; text-wrap: balance; letter-spacing: -0.01em;
}
h1 { font-size: var(--step-4); font-weight: 800; font-stretch: 108%; letter-spacing: -0.02em; }
h2 { font-size: var(--step-3); font-weight: 800; font-stretch: 106%; }
h3 { font-size: var(--step-1); font-weight: 700; }
p { margin: 0; max-width: 65ch; }
.num, .fig { font-family: var(--font-display); font-variant-numeric: tabular-nums; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); color: var(--fg); padding: 8px 14px; border-radius: var(--radius-sm); z-index: 100; }
.skip:focus { left: 12px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(56px, 8vw, 104px); }
.section + .section { border-top: 1px solid var(--border); }
.section-head { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 48px); max-width: 760px; }
.kicker {
  font-family: var(--font-display); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-ink);
}
.lede { font-size: var(--step-1); color: var(--body); }

/* Header */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s;
}
.site-header.scrolled { border-bottom-color: var(--border); box-shadow: 0 6px 18px -14px rgba(10, 20, 40, .35); }
.header-row { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fg); flex-shrink: 0; }
.brand svg { width: 34px; height: 34px; }
.wordmark { font-family: var(--font-display); font-size: 1.45rem; letter-spacing: -0.06em; line-height: 1; color: var(--fg); }
.wordmark .st { font-weight: 500; }
.wordmark .vo { font-weight: 800; color: var(--accent-ink); }
.nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav a { color: var(--body); text-decoration: none; font-weight: 600; font-size: 0.94rem; padding: 8px 10px; border-radius: var(--radius-sm); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--fg); background: var(--surface); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--fg); cursor: pointer;
}
.icon-btn svg { width: 20px; height: 20px; }
.menu-btn { display: none; }
@media (max-width: 1120px) {
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch;
         background: var(--bg); border-bottom: 1px solid var(--border); padding: 8px var(--gutter) 16px; }
  .nav.open { display: flex; }
  .nav a { padding: 12px 10px; }
  .menu-btn { display: inline-grid; }
  .header-actions { margin-left: auto; }
  .header-actions .btn { display: none; }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
  padding: 0 22px; border-radius: 999px; font-weight: 700; font-size: 0.98rem; text-decoration: none;
  border: 2px solid transparent; cursor: pointer; font-family: var(--font-body); transition: transform .15s, background .15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent-bright); color: var(--btn-fg); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent-bright) 88%, #fff); }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--fg); }
.on-ground .btn-ghost { color: var(--on-ground-strong); border-color: rgba(255,255,255,.28); }
.on-ground .btn-ghost:hover { border-color: var(--on-ground-strong); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 0.9rem; }

/* Navy band ("drawing sheet") */
.on-ground {
  background-color: var(--ground); color: var(--on-ground);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
}
.on-ground h1, .on-ground h2, .on-ground h3 { color: var(--on-ground-strong); }
.on-ground .kicker { color: var(--accent-soft); }
.on-ground .lede, .on-ground p { color: var(--on-ground); }
.on-ground a:not(.btn) { color: var(--accent-soft); }

/* Hero */
.hero { padding-block: clamp(40px, 6vw, 80px) clamp(48px, 7vw, 96px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero-copy { display: grid; gap: 22px; }
.hero-lockup { display: flex; align-items: center; gap: 16px; }
.hl-mark svg { width: 64px; height: 64px; display: block; color: var(--on-ground-strong); }
.hl-text { display: grid; gap: 8px; }
.hl-word { font-size: 2.4rem; color: var(--on-ground-strong); }
.on-ground .hl-word .vo { color: var(--accent-bright); }
.hero-lockup .descriptor { font-size: 0.74rem; letter-spacing: 0.24em; }
@media (max-width: 480px) { .hl-mark svg { width: 52px; height: 52px; } .hl-word { font-size: 2rem; } .hero-lockup .descriptor { font-size: 0.66rem; letter-spacing: 0.18em; } }
.descriptor { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.22em; font-size: 0.8rem; color: var(--on-ground-muted); }
.descriptor b { color: var(--accent-bright); }
.hero .lede { max-width: 54ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note { font-size: var(--step--1); color: var(--on-ground-muted); }
@media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }

/* Statement card (the live mini demo) */
.statement {
  background: var(--sheet); color: #14181B; border-radius: var(--radius); padding: clamp(18px, 2.4vw, 26px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); display: grid; gap: 18px; min-width: 0;
}
.statement .title-block {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 0.78rem; letter-spacing: 0.04em;
  border: 1.5px solid currentColor; border-radius: 6px; padding: 8px 10px; opacity: .9;
}
.statement .title-block span { text-transform: uppercase; font-weight: 700; font-family: var(--font-display); }
.statement .title-block .tb-r { text-align: right; font-variant-numeric: tabular-nums; }
.statement h3 { color: #14181B; font-size: 1.08rem; }
.statement-top { display: flex; gap: 16px; align-items: center; }
.ring-wrap { position: relative; width: 92px; height: 92px; flex-shrink: 0; }
.ring-wrap svg { width: 92px; height: 92px; transform: rotate(-90deg); }
.ring-wrap .pct { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: #14181B; }
.ring-track { stroke: #D8D4CC; }
.ring-fill { stroke: var(--accent); transition: stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1); }
@media (prefers-reduced-motion: reduce) { .ring-fill { transition: none; } }
.claim-total { background: var(--sheet-hi); border-radius: 10px; padding: 12px 14px; display: grid; gap: 2px; flex: 1; min-width: 0; }
.claim-total small { font-weight: 700; font-size: 0.78rem; letter-spacing: .06em; text-transform: uppercase; color: #6A3A1C; }
.claim-total .fig { font-size: clamp(1.4rem, 1rem + 1.4vw, 1.9rem); font-weight: 800; color: #14181B; line-height: 1.1; }
.stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.stage { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; background: rgba(20, 24, 27, .05); font-size: 0.92rem; color: #14181B; }
.stage .dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #8792A3; display: grid; place-items: center; }
.stage.done .dot { background: #14181B; border-color: #14181B; }
.stage.done .dot::after { content: ""; width: 8px; height: 4px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.stage.current { background: rgba(240, 122, 61, .14); outline: 1.5px dashed #C2531A; }
.tag { font-size: 0.74rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.tag.ok { background: #E9F7EF; color: #11683B; }
.tag.due { background: #FFF3E8; color: #9A4A0B; }
.tag.late { background: #FDECEC; color: #A1262C; }
.tag.idle { background: rgba(20, 24, 27, .08); color: #3E464C; }
.statement-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.statement .btn-ghost { color: #14181B; border-color: rgba(20, 24, 27, .25); }
.statement .fine { font-size: 0.78rem; color: #3E464C; }
.btn-mark { background: #14181B; color: #fff; }
.btn-mark:hover { background: #2A3036; }
.btn-mark[disabled] { opacity: .5; cursor: default; }
.statement-log { font-size: 0.85rem; color: #14181B; min-height: 1.4em; }

/* Numbers strip */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.fact { padding: 22px 22px 24px; display: grid; gap: 8px; align-content: start; }
.fact + .fact { border-left: 1px solid var(--border); }
.fact .fig { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); font-weight: 800; color: var(--fg); line-height: 1; letter-spacing: -0.02em; }
.fact p { font-size: 0.92rem; }
.fact .src { font-size: 0.78rem; color: var(--muted); }
@media (max-width: 900px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fact:nth-child(3) { border-left: 0; } .fact:nth-child(n+3) { border-top: 1px solid var(--border); } }
@media (max-width: 520px) { .facts { grid-template-columns: minmax(0, 1fr); } .fact + .fact { border-left: 0; border-top: 1px solid var(--border); } }

/* Steps (a real sequence, so numbered) */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: step; }
.step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; display: grid; gap: 10px; align-content: start; }
.step .n { font-family: var(--font-display); font-weight: 800; font-size: 0.85rem; letter-spacing: .1em; color: var(--accent-ink); }
.step .who { font-size: 0.82rem; color: var(--muted); font-weight: 600; }
@media (max-width: 860px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* Watch list */
.watch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--border); }
.watch-item { padding: 22px 22px 22px 0; display: grid; gap: 8px; border-bottom: 1px solid var(--border); align-content: start; }
.watch-item:not(:nth-child(3n+1)) { padding-left: 22px; border-left: 1px solid var(--border); }
.watch-item h3 { display: flex; gap: 10px; align-items: baseline; }
.watch-item .ex { font-size: 0.86rem; color: var(--muted); }
@media (max-width: 860px) {
  .watch { grid-template-columns: minmax(0, 1fr); }
  .watch-item, .watch-item:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
}

/* Industries */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--ground-2); color: var(--on-ground-strong); font-weight: 600; font-size: 0.94rem; text-decoration: none; border: 1px solid rgba(255,255,255,.08); }
.chip:hover { border-color: var(--accent-bright); }
.chip small { color: var(--on-ground-muted); font-weight: 500; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } }
.proof { display: grid; gap: 16px; }
.proof-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.proof-figs div { background: var(--ground-2); border-radius: var(--radius-sm); padding: 14px 16px; }
.proof-figs .fig { font-size: 1.8rem; font-weight: 800; color: var(--on-ground-strong); display: block; line-height: 1.1; }
.proof-figs span:not(.fig) { font-size: 0.86rem; color: var(--on-ground-muted); }

/* Why list */
.why { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px; }
.why-item { display: grid; gap: 8px; }
.why-item h3 { font-size: 1.12rem; }
@media (max-width: 760px) { .why { grid-template-columns: minmax(0, 1fr); } }
.alongside { margin-top: 36px; padding: 18px 20px; border-radius: var(--radius); border: 1px dashed var(--border); display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.alongside strong { color: var(--fg); font-family: var(--font-display); }

/* Pricing summary */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.plan { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; display: grid; gap: 14px; align-content: start; position: relative; }
.plan.featured { border: 2px solid var(--accent); }
.plan .badge { position: absolute; top: -12px; left: 22px; background: var(--accent-bright); color: var(--btn-fg); font-size: 0.74rem; font-weight: 800; letter-spacing: .06em; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; }
.price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.price .fig { font-size: 2.2rem; font-weight: 800; color: var(--fg); letter-spacing: -0.02em; }
.price .per { font-size: 0.86rem; color: var(--muted); }
.founding { font-size: 0.9rem; background: var(--highlight); color: var(--fg); border-radius: var(--radius-sm); padding: 8px 12px; }
.plan ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 0.94rem; }
.plan .guide { font-size: 0.82rem; color: var(--muted); }
.plans-foot { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 0.9rem; color: var(--muted); }
@media (max-width: 900px) { .plans { grid-template-columns: minmax(0, 1fr); } }

/* Data list */
.data-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; list-style: none; padding: 0; margin: 0; }
.data-list li { padding: 14px 0 14px 30px; border-bottom: 1px solid var(--border); position: relative; }
.data-list li::before { content: ""; position: absolute; left: 4px; top: 22px; width: 12px; height: 7px; border: 2.5px solid var(--accent); border-top: 0; border-right: 0; transform: rotate(-45deg); }
.data-list strong { color: var(--fg); }
@media (max-width: 760px) { .data-list { grid-template-columns: minmax(0, 1fr); } }
.not-yet { margin-top: 18px; font-size: 0.9rem; color: var(--muted); }

/* Roadmap */
.road { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.road-item { border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; display: grid; gap: 10px; background: var(--surface); align-content: start; }
.status { justify-self: start; font-size: 0.74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--due-bg); color: var(--due-fg); }
.status.explore { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
@media (max-width: 860px) { .road { grid-template-columns: minmax(0, 1fr); } }

/* FAQ */
.faq { display: grid; gap: 0; border-top: 1px solid var(--border); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--border); padding: 4px 0; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; font-weight: 700; color: var(--fg); font-size: 1.04rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-display); font-size: 1.4rem; line-height: 1; color: var(--accent-ink); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding-bottom: 18px; }

/* Health Check form */
.cta-band { padding-block: clamp(56px, 8vw, 96px); }
.form-card { background: var(--sheet); color: #14181B; border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); display: grid; gap: 16px; min-width: 0; }
.form-card h3 { color: #14181B; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 600px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: 6px; }
.field label { font-weight: 700; font-size: 0.88rem; color: #14181B; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 0.98rem; padding: 11px 12px; border-radius: var(--radius-sm); min-height: 46px;
  border: 1.5px solid #C9CDD6; background: #FFFFFF; color: #142033; width: 100%;
}
.field input:focus, .field select:focus { outline: 3px solid var(--focus); outline-offset: 1px; border-color: transparent; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.86rem; color: #3E464C; }
.consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: #14181B; flex-shrink: 0; }
.hp { position: absolute; left: -5000px; }
.form-done { background: #E9F7EF; color: #11683B; border-radius: var(--radius-sm); padding: 12px 14px; font-weight: 600; }
.next-steps { display: grid; gap: 14px; counter-reset: ns; list-style: none; padding: 0; margin: 0; }
.next-steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; }
.next-steps li::before { counter-increment: ns; content: counter(ns); width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--accent-soft); color: var(--accent-soft); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; }

/* Footer */
.site-footer { padding-block: 48px 36px; border-top: 1px solid var(--border); font-size: 0.9rem; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 28px; }
.foot-grid h4 { font-size: 0.82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; color: var(--muted); }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot-grid a { color: var(--body); text-decoration: none; }
.foot-grid a:hover { color: var(--fg); text-decoration: underline; }
.foot-legal { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--muted); font-size: 0.84rem; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-grid > :first-child { grid-column: 1 / -1; } }

/* Placeholder pages */
.page-hero { padding-block: clamp(48px, 7vw, 88px); }
.page-hero .wrap { display: grid; gap: 16px; }
.soon { display: grid; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; max-width: 720px; }

/* Reveal motion: content is visible at rest; motion only adds a gentle lift. */
@media (prefers-reduced-motion: no-preference) {
  .reveal.pending { transform: translateY(14px); opacity: .001; }
  .reveal { transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s; }
}

/* Review-only palette switch */
.palette-switch { position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 80; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 6px; display: flex; gap: 6px; align-items: center; box-shadow: 0 10px 24px -12px rgba(0,0,0,.4); }
.palette-switch span { font-size: 0.74rem; font-weight: 700; color: var(--muted); padding: 0 6px; }
.palette-switch button { height: 30px; padding: 0 12px; border-radius: 999px; border: 2px solid var(--surface); cursor: pointer; font-size: 0.7rem; font-weight: 800; color: #fff; }
.palette-switch button[aria-pressed="true"] { outline: 2px solid var(--fg); outline-offset: 1px; }

/* Specificity fixes: content inside the light sheet and chips on navy keep their own colours. */
.on-ground .statement p, .on-ground .statement-log { color: #14181B; }
.on-ground .statement .fine { color: #3E464C; }
.on-ground a.chip { color: var(--on-ground-strong); }
.on-ground .form-card p:not(.form-done) { color: #3E464C; }

/* ---------- Demo page ---------- */
.btn-xs { min-height: 34px; padding: 0 12px; font-size: 0.82rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ind-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.ind-btn { text-align: left; display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--radius-sm); cursor: pointer; font: inherit;
  background: var(--surface); color: var(--fg); border: 2px solid var(--border); min-height: 72px; }
.ind-btn strong { font-family: var(--font-display); font-size: 1.05rem; }
.ind-btn span { font-size: 0.9rem; color: var(--body); line-height: 1.4; }
.ind-btn:hover { border-color: var(--accent); }
.ind-btn[aria-pressed="true"] { border-color: var(--accent); background: var(--highlight); box-shadow: inset 0 0 0 1px var(--accent); }
@media (max-width: 760px) { .ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .ind-grid { grid-template-columns: minmax(0, 1fr); } }

.demo-shell { display: grid; gap: 18px; }
.order-head { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; display: grid; gap: 10px; color: var(--fg); }
.order-head .title-block { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: 0.8rem; border: 1.5px solid var(--fg); border-radius: 6px; padding: 8px 10px; }
.order-head .title-block span { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.order-head .tb-r { text-align: right; font-variant-numeric: tabular-nums; }
.order-terms { font-size: 0.9rem; color: var(--body); max-width: none; }
.order-sig { font-weight: 600; color: var(--accent-ink); max-width: none; }

.toolbar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.clock { font-family: var(--font-display); font-weight: 800; color: var(--fg); font-variant-numeric: tabular-nums; min-width: 12ch; }
.scn { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }
.scn > span { font-size: 0.82rem; color: var(--muted); font-weight: 600; }
.scn button { font: inherit; font-size: 0.84rem; font-weight: 600; padding: 7px 12px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--bg); color: var(--body); cursor: pointer; min-height: 36px; }
.scn button[aria-pressed="true"] { border-color: var(--late-fg); color: var(--late-fg); background: var(--late-bg); }

.guide { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 0.88rem; color: var(--muted); }
.guide li { display: inline-flex; align-items: center; gap: 8px; }
.guide .n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--border); font-family: var(--font-display); font-weight: 800; font-size: 0.78rem; }
.guide li.done { color: var(--fg); }
.guide li.done .n { background: var(--accent-bright); border-color: var(--accent-bright); color: var(--btn-fg); }

.role-tabs { display: none; gap: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px; }
.role-tabs button { flex: 1; font: inherit; font-weight: 700; font-size: 0.88rem; border: 0; border-radius: 999px; padding: 9px 10px; background: transparent; color: var(--body); cursor: pointer; min-height: 40px; }
.role-tabs button[aria-selected="true"] { background: var(--fg); color: var(--bg); }
.panels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; align-items: start; }
.panel-wide { grid-column: 1 / -1; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; display: grid; gap: 12px; min-width: 0; font-size: 1rem; transition: box-shadow .2s, border-color .2s; }
.panel-h { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.panel-h .role { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--fg); }
.hidden-note { font-size: 0.76rem; color: var(--muted); font-weight: 600; }
.panel-sub { font-size: 0.85rem; color: var(--muted); }
@media (max-width: 899px) {
  .role-tabs { display: flex; }
  .panels { grid-template-columns: minmax(0, 1fr); }
  [data-role="works"] .panel:not([data-panel="works"]),
  [data-role="accounts"] .panel:not([data-panel="accounts"]),
  [data-role="owner"] .panel:not([data-panel="owner"]) { display: none; }
}

.panel .stage { background: var(--bg); color: var(--fg); grid-template-columns: 20px minmax(0, 1fr) auto; }
.panel .stage small { display: block; color: var(--muted); font-size: 0.78rem; }
.panel .stage .dot { border-color: var(--muted); }
.panel .stage.done .dot { background: var(--fg); border-color: var(--fg); }
.panel .stage.done .dot::after { border-color: var(--surface); }
.panel .stage.current { background: color-mix(in srgb, var(--accent-bright) 12%, var(--surface)); outline: 1.5px dashed var(--accent); }
.panel .stage.awaiting { background: var(--due-bg); }
.panel .stage.awaiting .dot { border-style: dashed; border-color: var(--due-fg); }

.tbl-wrap { overflow-x: auto; }
.claims { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.claims th { text-align: left; font-size: 0.74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--border); }
.claims td { padding: 9px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--fg); }
.claims td small { color: var(--muted); }
.claims .num { white-space: nowrap; font-family: var(--font-display); font-variant-numeric: tabular-nums; text-align: right; }
.claims tr.is-closed td { color: var(--muted); }
.reg-h { font-size: 0.78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-family: var(--font-body); }
.register { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 0.86rem; }
.register li { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--bg); color: var(--fg); }
.register li > span:first-child { flex: 1 1 140px; }
.register small { width: 100%; color: var(--muted); }
.register .num { font-family: var(--font-display); font-variant-numeric: tabular-nums; }

.found { background: var(--ground); color: var(--on-ground); border-radius: var(--radius-sm); padding: 14px 16px; display: grid; gap: 2px; }
.found small { font-size: 0.74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-soft); font-weight: 700; }
.found .fig { font-size: 1.9rem; font-weight: 800; color: var(--on-ground-strong); line-height: 1.1; }
.found-sub { font-size: 0.82rem; color: var(--on-ground-muted); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tile { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; display: grid; gap: 2px; font-size: 0.78rem; color: var(--muted); border-left-width: 4px; }
.tile small { font-weight: 700; color: var(--fg); font-size: 0.8rem; }
.tile .num { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--fg); }
.tile.due { border-left-color: var(--due-fg); }
.tile.late { border-left-color: var(--late-fg); }
.digest { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 0.84rem; }
.digest li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; padding: 7px 0; border-bottom: 1px dashed var(--border); color: var(--body); }
.digest .when { font-family: var(--font-display); font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.digest li.late span:last-child { color: var(--late-fg); }
.digest li.ok span:last-child { color: var(--ok-fg); }

.demo-end { border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); display: grid; gap: 12px; }
.demo-end .fig { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); font-weight: 800; color: var(--on-ground-strong); }
.demo-note { font-size: 0.86rem; color: var(--muted); }

/* Plans: who each plan suits */
.suits { display: grid; gap: 4px; font-size: 0.86rem; border-top: 1px solid var(--border); padding-top: 12px; }
.suits b { font-size: 0.74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.suits dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; }
.suits dt { color: var(--muted); }
.suits dd { margin: 0; color: var(--fg); font-weight: 600; }

/* ---------- Demo, session 3: guided and readable ---------- */
.demo-section { padding-top: 28px; }
.demo-shell { gap: 20px; }
.demo-h2 { font-size: 1.3rem; margin-bottom: 10px; }
.order-head { gap: 12px; }
.oh-co { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-weight: 700; color: var(--muted); font-size: 0.95rem; }
.oh-title { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); }
.oh-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 0.95rem; color: var(--body); max-width: none; }
.oh-meta strong { color: var(--fg); }
.oh-terms summary { cursor: pointer; font-weight: 700; color: var(--accent-ink); padding: 4px 0; }
.oh-terms ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; max-width: 560px; }
.oh-terms li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.oh-terms .num { font-family: var(--font-display); font-weight: 800; color: var(--fg); }

.coach { background: var(--ground); color: var(--on-ground); border-radius: var(--radius); padding: clamp(18px, 3vw, 28px); display: grid; gap: 12px; box-shadow: 0 18px 40px -26px rgba(0,0,0,.6); }
.coach-top { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 0.9rem; color: var(--on-ground-muted); }
.coach-step { font-family: var(--font-display); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-soft); }
.cdots { display: inline-flex; gap: 6px; }
.cdot { width: 10px; height: 10px; border-radius: 50%; background: var(--track); }
.cdot.done { background: var(--accent-soft); }
.cdot.now { background: var(--accent-bright); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-bright) 35%, transparent); }
.coach-date { margin-left: auto; font-weight: 700; color: var(--on-ground-strong); }
.coach-title { color: var(--on-ground-strong); font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem); }
.coach-text { font-size: 1.08rem; color: var(--on-ground); max-width: 62ch; }
.coach-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-big { min-height: 56px; padding: 0 26px; font-size: 1.06rem; }
.coach .btn-ghost { color: var(--on-ground-strong); border-color: rgba(255,255,255,.3); }
.happened { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-sm); padding: 12px 14px; display: grid; gap: 6px; }
.happened .kicker { color: var(--accent-soft); }
.happened ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.happened li { color: var(--on-ground-strong); }
.happened li.late { color: #FFB3B7; }
.happened li.ok { color: #A8E8C2; }

[data-focus="works"] [data-panel="works"], [data-focus="accounts"] [data-panel="accounts"], [data-focus="owner"] [data-panel="owner"] {
  border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.panel-h .role { font-size: 1.15rem; }
.panel-note { font-size: 0.82rem; color: var(--muted); font-weight: 600; }
.panel .stage { font-size: 0.98rem; padding: 10px 12px; }
.btn-xs { min-height: 40px; padding: 0 14px; font-size: 0.88rem; }

.bills { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bills li { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; display: grid; gap: 8px; color: var(--fg); }
.bills li.ready { border-color: var(--due-fg); }
.bill-top { display: flex; justify-content: space-between; gap: 6px 14px; align-items: baseline; flex-wrap: wrap; }
.bill-name { font-weight: 600; min-width: 0; }
.bill-name small { display: inline-block; font-size: 0.76rem; color: var(--muted); font-weight: 700; margin-left: 4px; }
.bill-amt { font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; white-space: nowrap; }
.bill-bottom { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.bill-bottom .tag { white-space: normal; font-size: 0.82rem; }
.paid summary { cursor: pointer; font-weight: 700; color: var(--muted); padding: 6px 0; }
.paid .bills li { opacity: .85; }

.owner-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.owner-grid > div { display: grid; gap: 10px; min-width: 0; }
.owner-grid .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile { font-size: 0.85rem; }
.tile small { font-size: 0.86rem; }
.tile .num { font-size: 1.15rem; }
.digest { font-size: 0.92rem; }
.digest li { grid-template-columns: 56px minmax(0, 1fr); }
@media (max-width: 899px) { .owner-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .owner-grid .tiles { grid-template-columns: minmax(0, 1fr); } }

.more-ctl { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 16px; }
.more-ctl summary { cursor: pointer; font-weight: 700; color: var(--fg); padding: 12px 0; }
.more-ctl .toolbar { border: 0; padding: 0 0 14px; background: transparent; }
.more-ctl .scn { margin-left: 0; }
.end-lead { font-size: 1.05rem; }

/* ---------- Dedicated plan box ---------- */
.dedicated { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.ded-head { background: var(--ground); color: var(--on-ground); padding: 26px; display: grid; gap: 14px; align-content: start;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 32px 32px; }
.ded-head .kicker { color: var(--accent-soft); }
.ded-head h3 { color: var(--on-ground-strong); font-size: 1.4rem; }
.ded-head .price .fig { color: var(--on-ground-strong); }
.ded-head .price .per { color: var(--on-ground-muted); }
.ded-head .suits { border-top-color: rgba(255,255,255,.15); }
.ded-head .suits b, .ded-head .suits dt { color: var(--on-ground-muted); }
.ded-head .suits dd { color: var(--on-ground-strong); }
.ded-head .btn { justify-self: start; }
.ded-body { padding: 26px; display: grid; gap: 12px; align-content: start; }
.ded-sub { font-size: 0.92rem; color: var(--muted); max-width: none; }
.ded-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 22px; }
.ded-list li { font-size: 0.93rem; padding-left: 22px; position: relative; }
.ded-list li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 10px; height: 6px; border: 2.5px solid var(--accent); border-top: 0; border-right: 0; transform: rotate(-45deg); }
.ded-list strong { color: var(--fg); }
@media (max-width: 860px) { .dedicated { grid-template-columns: minmax(0, 1fr); } .ded-list { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Industries page ---------- */
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.chip-light { display: inline-flex; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface); color: var(--fg); font-weight: 600; font-size: 0.9rem; text-decoration: none; }
.chip-light:hover { border-color: var(--accent); }
.ind-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 28px; padding-block: 32px; border-top: 1px solid var(--border); scroll-margin-top: 84px; }
.ind-intro { display: grid; gap: 12px; align-content: start; }
.ind-intro h2 { font-size: 1.45rem; }
.ind-intro .btn { justify-self: start; }
.ind-col h3 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-family: var(--font-body); margin-bottom: 10px; }
.terms-list, .found-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.terms-list li { padding: 8px 12px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); font-size: 0.94rem; color: var(--fg); }
.found-list li { padding-left: 24px; position: relative; font-size: 0.96rem; }
.found-list li::before { content: ""; position: absolute; left: 3px; top: 9px; width: 11px; height: 6px; border: 2.5px solid var(--accent); border-top: 0; border-right: 0; transform: rotate(-45deg); }
@media (max-width: 900px) { .ind-block { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
.ind-next { margin-top: 24px; padding: 28px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); display: grid; gap: 18px; }
.ind-next h2 { font-size: 1.4rem; margin-bottom: 6px; }
.ind-next .btn { justify-self: start; }

/* ---------- Pricing page ---------- */
.tbl-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 18px 16px; min-width: 0; }
.price-tbl { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.price-tbl th, .price-tbl td { padding: 12px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; color: var(--fg); }
.price-tbl thead th { font-size: 0.76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.price-tbl tbody th { font-weight: 600; }
.price-tbl .num { font-family: var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.price-tbl small { color: var(--muted); font-family: var(--font-body); }
.price-tbl tr.total th, .price-tbl tr.total td { font-weight: 800; border-bottom: 2px solid var(--fg); }
.price-tbl.cmp td { color: var(--body); }
.price-tbl.cmp tr.us th, .price-tbl.cmp tr.us td { background: var(--highlight); color: var(--fg); font-weight: 600; }
.price-tbl.small th { font-weight: 500; }
.tbl-note { font-size: 0.84rem; color: var(--muted); margin-top: 10px; max-width: none; }
.fo-rules .data-list li { padding-block: 12px; }
.vp-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--on-ground); }
.vp-fine { font-size: 0.86rem; color: var(--on-ground-muted); }
@media (max-width: 640px) {
  .price-tbl thead { display: none; }
  .price-tbl:not(.small) tr { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .price-tbl:not(.small) th, .price-tbl:not(.small) td { border: 0; padding: 2px 0; text-align: left; }
  .price-tbl:not(.small) .num { text-align: left; }
  .price-tbl:not(.small) td::before { content: attr(data-label); display: block; font-size: 0.74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
}
.fo-stack { display: grid; gap: 22px; }

/* ---------- Plans: more features, reassurance strip ---------- */
.plan ul li.more { list-style: none; margin-left: -18px; margin-top: 2px; }
.plan ul li.more a { font-weight: 700; text-decoration: none; }
.plan ul li.more a:hover { text-decoration: underline; }
.assure { margin-top: 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.assure-item { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.assure-item strong { display: block; color: var(--fg); font-family: var(--font-display); font-size: 1rem; margin-bottom: 2px; }
.assure-item p { font-size: 0.88rem; color: var(--body); }
.assure-mark { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--track-light); border-top-color: var(--accent); border-right-color: var(--accent); border-bottom-color: var(--accent); transform: rotate(45deg); }
.assure-links { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 980px) { .assure { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .assure { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Compare page ---------- */
.legend { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.mk-legend { font-size: 0.8rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.matrix-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.matrix { border-collapse: collapse; width: 100%; min-width: 760px; font-size: 0.9rem; }
.matrix th, .matrix td { padding: 10px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.matrix thead th { font-size: 0.74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); vertical-align: bottom; }
.matrix thead th:nth-child(2) { color: var(--accent-ink); }
.matrix tbody th { font-weight: 600; color: var(--fg); min-width: 220px; position: sticky; left: 0; background: var(--surface); }
.matrix tr.grp th { background: var(--bg); font-family: var(--font-display); font-weight: 800; color: var(--fg); font-size: 0.86rem; letter-spacing: .03em; text-transform: uppercase; position: static; }
.matrix td.mk span, .mk-legend { display: inline-block; }
.mk span { font-size: 0.78rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.m-yes span, .mk-legend.m-yes { background: var(--ok-bg); color: var(--ok-fg); }
.m-part span, .mk-legend.m-part { background: var(--due-bg); color: var(--due-fg); }
.m-no span, .mk-legend.m-no { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.m-later span, .mk-legend.m-later { background: color-mix(in srgb, var(--focus) 14%, var(--surface)); color: var(--focus); }
.m-explore span, .mk-legend.m-explore { background: var(--bg); color: var(--focus); border: 1px dashed var(--focus); }
.m-never span, .mk-legend.m-never { background: var(--late-bg); color: var(--late-fg); }
.matrix tbody td:nth-child(2) { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.plan-matrix { min-width: 620px; }
.plan-matrix tbody td:nth-child(2) { background: transparent; }
.limits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.limit-col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; display: grid; gap: 12px; align-content: start; }
.limit-col ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 0.93rem; }
.limit-col strong { color: var(--fg); }
.status.never { background: var(--late-bg); color: var(--late-fg); }
@media (max-width: 900px) { .limits { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Your data page ---------- */
.fact-rows { display: grid; gap: 0; border-top: 1px solid var(--border); }
.fact-row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--border); }
.fact-row h3 { font-size: 1.1rem; }
@media (max-width: 700px) { .fact-row { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* ---------- Roadmap page ---------- */
.road-item .btn { justify-self: start; margin-top: 4px; }
.road-item .status.explore { }
.notify-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
@media (max-width: 600px) { .notify-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Monthly / yearly switch ---------- */
.bill-toggle { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); margin-bottom: 18px; }
.bill-toggle button { font: inherit; font-weight: 700; font-size: 0.92rem; border: 0; border-radius: 999px; padding: 9px 16px; background: transparent; color: var(--body); cursor: pointer; min-height: 42px; }
.bill-toggle button small { font-weight: 700; font-size: 0.74rem; color: var(--ok-fg); background: var(--ok-bg); border-radius: 999px; padding: 2px 8px; margin-left: 6px; }
.bill-toggle button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.bill-toggle button[aria-pressed="true"] small { background: var(--accent-bright); color: var(--btn-fg); }

/* ---------- Cost table advantage column ---------- */
.price-tbl.cost th.adv-h { color: var(--accent-ink); }
/* Cost comparison: option and note on the left, figures kept on one line, advantages one per line */
.price-tbl.cost { table-layout: fixed; min-width: 860px; }
.price-tbl.cost col.c-opt { width: 30%; } .price-tbl.cost col.c-fig { width: 15%; } .price-tbl.cost col.c-adv { width: 40%; }
.price-tbl.cost th, .price-tbl.cost td { padding: 18px 14px; }
.price-tbl.cost tbody th .opt { display: block; font-weight: 700; color: var(--fg); line-height: 1.3; }
.price-tbl.cost tbody th .opt-note { display: block; margin-top: 6px; font-weight: 400; font-size: 0.85rem; line-height: 1.5; color: var(--muted); }
.price-tbl.cost .fig-cell span { display: block; font-weight: 700; color: var(--fg); }
.price-tbl.cost .fig-cell small { display: block; margin-top: 4px; font-size: 0.78rem; white-space: normal; line-height: 1.35; }
.price-tbl.cost tr.us .fig-cell span { color: var(--accent-ink); }
.price-tbl.cost td.adv { background: color-mix(in srgb, var(--accent) 6%, transparent); color: var(--fg); font-size: 0.9rem; }
.price-tbl.cost tr.us td.adv { background: var(--highlight); }
.adv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.adv-list li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: baseline; line-height: 1.45; }
.adv-list b { font-family: var(--font-display); font-size: 0.72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
.adv-base { margin: 0; color: var(--muted); font-style: italic; }
@media (max-width: 640px) {
  .price-tbl.cost { min-width: 0; table-layout: auto; display: block; }
  .price-tbl.cost colgroup { display: none; }
  .price-tbl.cost tbody { display: block; width: 100%; }
  .price-tbl.cost tr { display: grid; grid-template-columns: 1fr 1fr; padding: 16px 0; gap: 10px 16px; width: 100%; }
  .price-tbl.cost tbody th, .price-tbl.cost td.adv { grid-column: 1 / -1; }
  .price-tbl.cost th, .price-tbl.cost td { padding: 0; }
  .price-tbl.cost td.adv { padding: 12px; border-radius: 10px; }
  .price-tbl.cost .fig-cell span { display: inline; }
  .adv-list li { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- Demo loading ring ---------- */
.sv-loader { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--ground); transition: opacity .35s; }
.sv-loader.done { opacity: 0; pointer-events: none; }
.sv-loader-in { display: grid; gap: 16px; justify-items: center; color: var(--on-ground); font-weight: 600; }
.sv-loader svg { width: 96px; height: 96px; transform: rotate(-90deg); }
.sv-loader .ld-track { stroke: var(--track); }
.sv-loader .ld-fill { stroke: var(--accent-bright); stroke-dasharray: 163.4; stroke-dashoffset: 163.4; transition: stroke-dashoffset 1.15s cubic-bezier(.4,.1,.2,1); }
.sv-loader.run .ld-fill { stroke-dashoffset: 0; }
.sv-loader .ld-v { stroke: var(--on-ground-strong); transform: rotate(90deg); transform-origin: 32px 32px; }

/* ---------- Yudic chat ---------- */
.palette-switch { right: auto; left: 14px; }
.yd-launch { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 90; display: inline-flex; align-items: center; gap: 10px;
  padding: 0 20px 0 14px; min-height: 52px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-weight: 800;
  background: var(--ground); color: var(--on-ground-strong); box-shadow: 0 14px 30px -14px rgba(0,0,0,.6); }
.yd-dot { width: 26px; height: 26px; border-radius: 50%; border: 4px solid var(--track); border-top-color: var(--accent-bright); border-right-color: var(--accent-bright); border-bottom-color: var(--accent-bright); transform: rotate(45deg); }
.yd-panel { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 95; width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 100px));
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px -20px rgba(0,0,0,.55); }
.yd-panel[hidden] { display: none; }
.yd-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; background: var(--ground); color: var(--on-ground); }
.yd-head strong { display: block; color: var(--on-ground-strong); font-family: var(--font-display); font-size: 1.1rem; }
.yd-head span { font-size: 0.78rem; color: var(--on-ground-muted); }
.yd-head .icon-btn { background: transparent; color: var(--on-ground-strong); border-color: rgba(255,255,255,.25); font-size: 1.3rem; }
.yd-log { overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--bg); }
.yd-msg { max-width: 88%; padding: 10px 12px; border-radius: 14px; font-size: 0.93rem; line-height: 1.5; color: var(--fg); background: var(--surface); border: 1px solid var(--border); align-self: flex-start; }
.yd-msg.me { align-self: flex-end; background: var(--ground); color: var(--on-ground-strong); border-color: transparent; }
.yd-msg a { font-weight: 700; }
.yd-msg.typing { display: inline-flex; gap: 4px; padding: 12px; }
.yd-msg.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: yd-b 1s infinite; }
.yd-msg.typing i:nth-child(2) { animation-delay: .15s; } .yd-msg.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes yd-b { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .yd-msg.typing i { animation: none; } }
.yd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.yd-chips button { font: inherit; font-size: 0.85rem; font-weight: 700; padding: 7px 12px; border-radius: 999px; border: 1.5px solid var(--accent); background: var(--surface); color: var(--accent-ink); cursor: pointer; min-height: 36px; }
.yd-input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); background: var(--surface); }
.yd-input input { flex: 1; min-width: 0; font: inherit; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--bg); color: var(--fg); min-height: 42px; }
.yd-foot { font-size: 0.72rem; color: var(--muted); text-align: center; padding: 6px 10px 10px; background: var(--surface); max-width: none; }

/* ---------- About ---------- */
.quote-card { margin: 0; background: var(--ground); color: var(--on-ground); border-radius: var(--radius); padding: 28px; display: grid; gap: 16px; align-self: start; }
.quote-card blockquote { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 1rem + .8vw, 1.5rem); line-height: 1.35; color: var(--on-ground-strong); }
.quote-card blockquote::before { content: "\201C"; display: block; font-size: 3rem; line-height: .6; color: var(--accent-bright); }
.quote-card figcaption { display: grid; gap: 2px; font-size: 0.9rem; }
.quote-card figcaption strong { color: var(--on-ground-strong); }
.founders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.founder { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; }
.avatar { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--ground); color: var(--on-ground-strong); font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; }
.role-line { font-size: 0.88rem; color: var(--muted); font-weight: 600; margin: 4px 0 8px; }
@media (max-width: 760px) { .founders { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Contact ---------- */
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.way { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; display: grid; gap: 8px; align-content: start; }
.way-main { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--fg); user-select: all; word-break: break-word; }
.way .btn { justify-self: start; margin-top: 4px; }
@media (max-width: 860px) { .ways { grid-template-columns: minmax(0, 1fr); } }
.steps-light li::before { border-color: var(--accent); color: var(--accent-ink); }
.field textarea { font: inherit; font-size: 0.98rem; padding: 11px 12px; border-radius: var(--radius-sm); border: 1.5px solid #C9CDD6; background: #FFFFFF; color: #142033; width: 100%; resize: vertical; }

/* ---------- Legal pages ---------- */
.legal-wrap { max-width: 860px; }
.draft-note { background: var(--due-bg); color: var(--due-fg); border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 24px; max-width: none; }
.legal-part { font-size: 1.5rem; margin: 32px 0 6px; padding-top: 16px; border-top: 2px solid var(--fg); }
.legal-sec { padding: 18px 0; border-bottom: 1px solid var(--border); display: grid; gap: 10px; }
.legal-sec h2 { font-size: 1.15rem; }
.legal-sec ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.legal-sec p, .legal-sec li { max-width: 72ch; }
.legal-tbl { font-size: 0.88rem; }
.legal-tbl td { color: var(--body); }
.legal-tbl td:first-child { color: var(--fg); font-weight: 600; }

/* Header fit with seven links */
.nav a { white-space: nowrap; padding: 8px 9px; font-size: 0.92rem; }
.header-actions .btn { white-space: nowrap; }
.header-row { gap: 14px; }

/* ---------- Session 6 fixes ---------- */
/* Numeric column headers align with their figures */
.price-tbl th.num { text-align: right; }
@media (max-width: 640px) { .price-tbl th.num { text-align: left; } }

/* Yearly: original price struck through, saving shown */
.price .was { display: none; font-family: var(--font-display); font-size: 1.05rem; color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--late-fg); margin-right: 2px; }
.plan .save { display: none; justify-self: start; font-size: 0.82rem; font-weight: 800; color: var(--ok-fg); background: var(--ok-bg); border-radius: 999px; padding: 4px 10px; margin-top: -6px; }
:root[data-billing="y"] .price .was { display: inline; }
:root[data-billing="y"] .plan .save { display: inline-block; }

/* Feature matrix: header frozen while the table is in view; groups open and close */
.grp-tools { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.matrix-wrap { overflow: visible; }
.matrix thead th { position: sticky; top: calc(68px + env(safe-area-inset-top, 0px)); z-index: 3; background: var(--surface); box-shadow: 0 1px 0 var(--border); }
.matrix tbody th { position: static; }
.grp-b[data-open="false"] tr:not(.grp) { display: none; }
.matrix tr.grp th { padding: 0; }
.grp-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 10px; border: 0; background: var(--bg); cursor: pointer;
  font: inherit; font-family: var(--font-display); font-weight: 800; font-size: 0.86rem; letter-spacing: .03em; text-transform: uppercase; color: var(--fg); text-align: left; }
.grp-btn::before { content: ""; box-sizing: border-box; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid currentColor; margin-right: 10px; flex-shrink: 0;
  background: linear-gradient(currentColor, currentColor) center / 10px 2px no-repeat; }
.grp-btn[aria-expanded="false"]::before { background: linear-gradient(currentColor, currentColor) center / 10px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 10px no-repeat; }
.grp-btn > span:first-child { flex: 1; }
.grp-n { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--muted); font-size: 0.8rem; }
@media (max-width: 899px) {
  .matrix-wrap { overflow: auto; max-height: 78vh; -webkit-overflow-scrolling: touch; }
  .matrix thead th { top: 0; }
  .matrix tbody th { position: sticky; left: 0; background: var(--surface); z-index: 1; }
  .matrix thead th:first-child { left: 0; z-index: 4; }
}

/* Loader under reduced motion: shown, without the animation */
@media (prefers-reduced-motion: reduce) { .sv-loader .ld-fill { transition: none; stroke-dashoffset: 0; } }

/* Yudiserve logo */
/* Yudiserve logo: the light version used on dark grounds (white letters, lavender dot) */
.yds-logo { font-family: "Plus Jakarta Sans", var(--font-body); font-weight: 800; letter-spacing: -0.036em; color: #FFFFFF; font-size: 1.2rem; line-height: 1; white-space: nowrap; }
.yds-logo.big { font-size: 2rem; }
.yds-logo.inline { font-size: 1.04em; letter-spacing: -0.04em; }
.yds-dot { display: inline-block; width: .17em; height: .17em; border-radius: 50%; background: #A594FF; margin-left: .05em; }
.yds-link { display: inline-flex; align-items: baseline; text-decoration: none; }
a.yds-link:hover .yds-logo { color: #E6E0FF; }
.yds-head .yds-link { vertical-align: baseline; }

/* ---------- Footer ---------- */
.site-footer { border-top: 0; padding-block: 56px 28px; }
.site-footer.on-ground a:not(.btn) { color: var(--on-ground); text-decoration: none; }
.site-footer.on-ground a:not(.btn):hover { color: var(--on-ground-strong); text-decoration: underline; }
.site-footer .wordmark { color: var(--on-ground-strong); }
.site-footer .wordmark .vo { color: var(--accent-bright); }
.site-footer .brand svg polyline { stroke: var(--on-ground-strong); }
.site-footer .brand svg circle { stroke: var(--track); }
.foot-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 40px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.12); }
.foot-brand { display: grid; gap: 10px; align-content: start; }
.foot-tag { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--on-ground-strong); margin-top: 6px; }
.foot-desc { color: var(--on-ground-muted); font-size: 0.92rem; }
.foot-brand .cta-row { margin-top: 8px; }
.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.foot-cols h4 { font-size: 0.78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-soft); margin-bottom: 12px; font-family: var(--font-body); }
.foot-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 0.93rem; }
.foot-contact p { display: grid; gap: 0; margin-bottom: 10px; font-size: 0.92rem; }
.fc-label { font-size: 0.74rem; color: var(--on-ground-muted); text-transform: uppercase; letter-spacing: .06em; }
.fc-val { color: var(--on-ground-strong); font-weight: 700; user-select: all; word-break: break-word; }
.fc-note { color: var(--on-ground-muted); font-size: 0.84rem; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 24px; padding-top: 20px; }
.foot-by { display: inline-flex; align-items: center; gap: 10px; color: var(--on-ground-muted); font-size: 0.86rem; }
.site-footer .foot-legal { margin: 0; padding: 0; border: 0; color: var(--on-ground-muted); font-size: 0.84rem; gap: 6px 20px; }
@media (max-width: 900px) { .foot-top { grid-template-columns: minmax(0, 1fr); } .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .foot-cols { grid-template-columns: minmax(0, 1fr); } }
.foot-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); }
.fc-val { white-space: nowrap; word-break: normal; }
.site-footer { padding-bottom: 96px; }
@media (max-width: 900px) { .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .foot-cols { grid-template-columns: minmax(0, 1fr); } }
/* Founding line follows the monthly / yearly switch */
[data-bill-show="y"] { display: none; }
:root[data-billing="y"] [data-bill-show="m"] { display: none; }
:root[data-billing="y"] [data-bill-show="y"] { display: block; }

/* ===== Session 8: lighter home page ===== */
.more-link { margin-top: 22px; }
.arrow-link { font-weight: 700; color: var(--accent-ink); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.arrow-link::after { content: "→"; transition: transform .25s ease; }
.arrow-link:hover::after { transform: translateX(4px); }
.on-ground .arrow-link { color: var(--accent-bright); }
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; cursor: pointer; }
.ptease { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pt-card { display: grid; gap: 10px; align-content: start; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--fg); text-decoration: none; }
.pt-card:hover { border-color: var(--accent); }
.pt-name { font-family: var(--font-display); font-weight: 800; font-size: 0.82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.pt-price { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; line-height: 1; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pt-price small { font-family: var(--font-body); font-weight: 500; font-size: 0.82rem; color: var(--muted); letter-spacing: 0; }
.pt-fit { font-size: 0.86rem; color: var(--muted); }
.pt-ded { background: var(--ground); border-color: var(--ground); color: var(--on-ground-strong); }
.pt-ded .pt-name { color: var(--accent-bright); } .pt-ded .pt-price small, .pt-ded .pt-fit { color: var(--on-ground-muted); }
.pt-actions { margin-top: 22px; }
.trust-strip { list-style: none; margin: 28px 0 0; padding: 16px 0 0; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 0.92rem; font-weight: 600; color: var(--fg); }
.trust-strip li:not(:last-child)::before { content: "✓"; color: var(--ok-fg); margin-right: 8px; font-weight: 800; }
@media (max-width: 980px) { .ptease { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ptease { grid-template-columns: minmax(0, 1fr); } }

/* ===== Footer: closer to the section above it ===== */
.site-footer { padding-top: 36px; border-top: 1px solid rgba(255,255,255,.1); }
main > .on-ground:last-child, .pv-page > .on-ground:last-child { padding-bottom: clamp(36px, 4vw, 52px); }

/* ===== Motion. Everything here is off for visitors who ask for reduced motion. ===== */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--accent), var(--accent-bright)); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  /* Items in a grid arrive one after another */
  .st-item { opacity: 0; transform: translateY(22px) scale(.985); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i, 0) * 80ms); }
  .st-in > .st-item { opacity: 1; transform: none; }
  /* Section headings: the kicker draws a short line, then the heading rises */
  .reveal .kicker { position: relative; }
  .reveal .section-head h2 { transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .8s; }
  .reveal.pending .section-head h2 { transform: translateY(18px); opacity: 0; }
  .reveal .section-head .kicker::after { content: ""; display: inline-block; vertical-align: middle; height: 2px; width: 28px; margin-left: 10px; background: currentColor; transform-origin: 0 50%; transition: transform .7s .2s cubic-bezier(.2,.8,.2,1); }
  .reveal.pending .section-head .kicker::after { transform: scaleX(0); }
  /* Steps: an accent bar fills across the top of each card in turn */
  .step { position: relative; overflow: hidden; }
  .step::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i, 0) * 260ms + 200ms); }
  .st-in > .step::before { transform: scaleX(1); }
  /* Cards lift a little under the pointer */
  .fact, .step, .pt-card, .plan, .why-item, .road-item, .chip, .proof-figs div { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
  .step:hover, .pt-card:hover, .plan:hover, .road-item:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -22px rgba(10, 20, 40, .55); }
  .chip:hover { transform: translateY(-2px); }
  /* Hero: the ring draws itself, the V follows, then the copy rises in. Replays when the hero comes back into view. */
  .hero.play .lk-arc { stroke-dasharray: 100; stroke-dashoffset: 100; animation: lk-draw 1.2s .15s cubic-bezier(.6,0,.2,1) forwards; }
  .hero.play .lk-v { stroke-dasharray: 100; stroke-dashoffset: 100; animation: lk-draw .6s 1s ease-out forwards; }
  .hero.play .hero-copy > * { animation: rise .8s cubic-bezier(.2,.8,.2,1) both; }
  .hero.play .hero-copy > :nth-child(2) { animation-delay: .25s; } .hero.play .hero-copy > :nth-child(3) { animation-delay: .4s; }
  .hero.play .hero-copy > :nth-child(4) { animation-delay: .55s; } .hero.play .hero-copy > :nth-child(5) { animation-delay: .7s; }
  .hero.play .statement { animation: float-in 1s .45s cubic-bezier(.2,.8,.2,1) both; }
  .hero .descriptor b { display: inline-block; }
  .hero.play .descriptor b { animation: pop .5s both; }
  .hero.play .descriptor b:nth-of-type(1) { animation-delay: 1.3s; } .hero.play .descriptor b:nth-of-type(2) { animation-delay: 1.45s; } .hero.play .descriptor b:nth-of-type(3) { animation-delay: 1.6s; }
  /* Counting figures */
  .count { font-variant-numeric: tabular-nums; }
}
@keyframes lk-draw { to { stroke-dashoffset: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes float-in { from { opacity: 0; transform: translateY(30px) rotate(1.5deg); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.6); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .scroll-progress { display: none; } }
@media print { .st-item, .reveal.pending { opacity: 1 !important; transform: none !important; } .scroll-progress { display: none; } }

/* ===== Get started: three routes ===== */
.start .section-head { margin-bottom: 22px; }
.st-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 28px; }
.st-tab { display: grid; gap: 4px; text-align: left; padding: 14px 18px; border-radius: var(--radius-sm); border: 1.5px solid rgba(255,255,255,.18); background: var(--ground-2); color: var(--on-ground-strong); cursor: pointer; font: inherit; transition: border-color .2s, background .2s, transform .2s; }
.st-tab b { font-family: var(--font-display); font-size: 1.02rem; }
.st-tab span { font-size: 0.84rem; color: var(--on-ground-muted); }
.st-tab:hover { border-color: rgba(255,255,255,.4); }
.st-tab[aria-pressed="true"] { border-color: var(--sheet); background: var(--sheet); color: #14181B; box-shadow: inset 0 -3px 0 var(--accent); }
.st-tab[aria-pressed="true"] span { color: #3E464C; }
.st-body { align-items: start; }
.st-info { display: grid; gap: 18px; }
.st-info [data-start-panel] { display: grid; gap: 18px; }
.st-info [data-start-panel][hidden], .st-forms [data-start-panel][hidden] { display: none; }
.st-promise { padding: 14px 16px; border-left: 3px solid var(--accent-bright); background: var(--ground-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--on-ground); }
.st-promise strong { color: var(--on-ground-strong); }
.st-sub { font-size: 1.02rem; margin-top: 4px; }
.st-data { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.st-data li { position: relative; padding-left: 26px; font-size: 0.9rem; color: var(--on-ground); line-height: 1.5; }
.st-data li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 4px; background: var(--accent-bright);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1l6 2.5V8c0 3.5-2.6 6-6 7-3.4-1-6-3.5-6-7V3.5z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1l6 2.5V8c0 3.5-2.6 6-6 7-3.4-1-6-3.5-6-7V3.5z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; }
.st-data strong { color: var(--on-ground-strong); display: block; }
.st-points { margin: 0; padding-left: 1.1em; display: grid; gap: 10px; color: var(--on-ground); }
.q-est { background: #FFF4EC; border: 1px solid #F3D3BF; border-radius: var(--radius-sm); padding: 12px 14px; }
.q-hint { margin: 0; font-size: 0.82rem; color: #3E464C; }
.q-tbl { width: 100%; border-collapse: collapse; font-size: 0.9rem; color: #14181B; margin-bottom: 6px; }
.q-tbl th { text-align: left; font-weight: 500; padding: 4px 0; }
.q-tbl td { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; padding: 4px 0; white-space: nowrap; }
.q-tbl .q-total th, .q-tbl .q-total td { border-top: 1px solid #F3D3BF; padding-top: 8px; font-weight: 800; }
@media (max-width: 860px) { .st-forms { order: -1; } }
@media (max-width: 760px) { .st-tabs { gap: 6px; margin-bottom: 18px; } .st-tab { padding: 10px 8px; text-align: center; } .st-tab b { font-size: 0.86rem; } .st-tab span { display: none; } .st-data { grid-template-columns: minmax(0, 1fr); } }
.foot-contact a { font-weight: 600; }


/* ===== Phones (below 640 px): lighter pages ===== */
.mf-btn, .m-dots { display: none; }
@media (max-width: 640px) {
  /* Hide what a phone reader can skip */
  .hero .statement, .hero-note, .fact .src, .m-skip, .ind-next > div > p, .ded-body > .ded-sub:last-child { display: none; }
  .hero { padding-block: 28px 40px; }
  .section { padding-block: 44px; }
  .section-head { margin-bottom: 18px; }
  .section-head .lede, .section-head > p:not(.kicker) { font-size: 0.98rem; }
  /* Swipeable rows */
  .m-swipe { display: flex !important; grid-template-columns: none !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: -16px; padding: 4px 16px 10px; scrollbar-width: none; border: 0 !important; background: none !important; -webkit-overflow-scrolling: touch; }
  .m-swipe::-webkit-scrollbar { display: none; }
  .m-swipe > * { flex: 0 0 84%; scroll-snap-align: start; min-width: 0; }
  .facts.m-swipe > .fact, .watch.m-swipe > .watch-item { border: 1px solid var(--border) !important; border-radius: var(--radius); background: var(--surface); padding: 18px !important; }
  .on-ground .watch.m-swipe > .watch-item { background: var(--ground-2); }
  .ptease.m-swipe > * { flex-basis: 72%; }
  .plans.m-swipe > * { flex-basis: 88%; }
  .price-tbl, .price-tbl tbody.m-swipe { display: block; }
  .price-tbl tbody.m-swipe { display: flex !important; }
  .price-tbl tbody.m-swipe > tr { flex: 0 0 86%; border: 1px solid var(--border) !important; border-radius: var(--radius); padding: 16px !important; background: var(--surface); align-content: start; }
  .price-tbl tbody.m-swipe > tr.us { background: var(--highlight); }
  .tbl-wrap:has(> .price-tbl tbody.m-swipe) { overflow: visible; }
  .m-dots { display: flex; justify-content: center; gap: 6px; margin: 6px 0 4px; }
  .m-dots i { width: 7px; height: 7px; border-radius: 999px; background: var(--border); transition: width .25s, background .25s; }
  .m-dots i.on { width: 20px; background: var(--accent); }
  .on-ground .m-dots i { background: rgba(255,255,255,.25); } .on-ground .m-dots i.on { background: var(--accent-bright); }
  /* Folded detail */
  .mf-closed { display: none !important; }
  .mf-btn { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 16px; margin: 8px 0; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--fg); font: inherit; font-weight: 700; font-size: 0.95rem; text-align: left; cursor: pointer; }
  .mf-btn::after { content: "+"; font-family: var(--font-display); font-size: 1.3rem; line-height: 1; color: var(--accent-ink); }
  .mf-btn[aria-expanded="true"]::after { content: "–"; }
  .on-ground .mf-btn { background: var(--ground-2); border-color: rgba(255,255,255,.16); color: var(--on-ground-strong); }
  .on-ground .mf-btn::after { color: var(--accent-bright); }
  .st-sub { display: none; }
  .ind-block .ind-intro .btn { margin-bottom: 4px; }
}

/* ===== Tablets (641–1023 px) ===== */
@media (min-width: 641px) and (max-width: 900px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px; }
  .step { padding: 18px; }
  .watch { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .watch-item, .watch-item:not(:nth-child(3n+1)) { padding: 18px 18px 18px 0; border-left: 0; }
  .watch-item:nth-child(2n) { padding-left: 18px; border-left: 1px solid var(--border); }
  .road { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ways { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  /* Plans sit side by side and swipe, two at a time */
  .plans.m-swipe { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 0; gap: 14px; padding-bottom: 10px; scrollbar-width: none; }
  .plans.m-swipe::-webkit-scrollbar { display: none; }
  .plans.m-swipe > * { flex: 0 0 calc(50% - 7px); scroll-snap-align: start; }
  .plans + .m-dots { display: flex; justify-content: center; gap: 6px; margin: 6px 0; }
  .plans + .m-dots i { width: 7px; height: 7px; border-radius: 999px; background: var(--border); }
  .plans + .m-dots i.on { width: 20px; background: var(--accent); }
}
@media (max-width: 640px) {
  .m-swipe { scroll-padding-inline: 16px; }
  .bill-toggle { max-width: 100%; } .bill-toggle button { white-space: nowrap; padding-inline: 12px; font-size: 0.88rem; }
}
@media (max-width: 640px) {
  .jump { flex-wrap: nowrap !important; overflow-x: auto; margin-inline: -16px; padding: 4px 16px 10px; scrollbar-width: none; }
  .jump::-webkit-scrollbar { display: none; }
  .jump > * { flex: 0 0 auto; white-space: nowrap; }
}

/* ===== Sign in link ===== */
.signin-link { font-weight: 700; font-size: 0.92rem; color: var(--fg); text-decoration: none; padding: 8px 10px; border-radius: var(--radius-sm); white-space: nowrap; }
.signin-link:hover { background: var(--surface); }
.nav-signin { display: none !important; }
@media (max-width: 1120px) { .signin-link { display: none; } .nav-signin { display: block !important; border-top: 1px solid var(--border); margin-top: 6px; padding-top: 12px !important; } }

/* ===== Sign-in page demo (review preview only) ===== */
.si-demo { background: var(--bg); }
.si-note { max-width: 760px; margin: 0 auto 18px; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--highlight); color: var(--fg); font-size: 0.92rem; }
.si-browser { max-width: 760px; margin: 0 auto; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 30px 60px -40px rgba(10,20,40,.6); background: var(--ground); }
.si-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #E9ECF1; color: #3E464C; font-size: 0.82rem; }
.si-dots { display: flex; gap: 6px; } .si-dots i { width: 10px; height: 10px; border-radius: 50%; background: #C9CED6; }
.si-url { flex: 1; background: #fff; border-radius: 999px; padding: 5px 12px; font-family: ui-monospace, Menlo, monospace; font-size: 0.8rem; color: #14181B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-lock { font-weight: 700; color: #1E7A4F; }
.si-stage { min-height: 460px; display: grid; place-items: center; padding: 36px 18px; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 32px 32px; }
.si-card { width: min(420px, 100%); background: var(--sheet); color: #14181B; border-radius: var(--radius); padding: 28px; display: grid; gap: 14px; box-shadow: 0 20px 40px -28px rgba(0,0,0,.6); animation: rise .45s cubic-bezier(.2,.8,.2,1) both; }
.si-card[hidden], .si-app[hidden] { display: none; }
.si-card h2 { color: #14181B; font-size: 1.4rem; }
.si-card .kicker { color: var(--accent-ink); margin: 0; }
.si-brand { display: flex; align-items: center; gap: 10px; color: #14181B; } .si-brand svg { width: 34px; height: 34px; } .si-brand .wordmark { color: #14181B; font-size: 1.4rem; }
.si-brand.sm svg { width: 26px; height: 26px; } .si-brand.sm .wordmark { font-size: 1.1rem; }
.si-sub { color: #3E464C; margin: 0; font-size: 0.94rem; }
.si-card form { display: grid; gap: 8px; } .si-card label { font-weight: 700; font-size: 0.88rem; }
.si-card input { font: inherit; padding: 12px 14px; border-radius: 10px; border: 1px solid #C9CED6; background: #fff; color: #14181B; }
.si-err { margin: 0; color: #B42318; font-size: 0.86rem; }
.si-full { width: 100%; justify-content: center; margin-top: 6px; }
.si-fine { font-size: 0.8rem; color: #5A6575; margin: 0; }
.si-try { font-size: 0.8rem; color: #5A6575; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.si-try button { font: inherit; font-size: 0.78rem; padding: 4px 9px; border-radius: 999px; border: 1px solid #C9CED6; background: #fff; color: #14181B; cursor: pointer; }
.si-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--accent-ink); cursor: pointer; justify-self: start; }
.si-ws { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid #E2DED6; border-radius: 12px; background: #fff; }
.si-ws-mark { width: 40px; height: 40px; border-radius: 10px; background: #14181B; color: #fff; display: grid; place-items: center; font-weight: 800; }
.si-ws b { display: block; } .si-ws span { font-size: 0.84rem; color: #5A6575; font-family: ui-monospace, Menlo, monospace; }
.si-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.si-list { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; color: #3E464C; font-size: 0.92rem; }
.si-ms-step { border: 2px dashed #C9CED6; }
.si-wait { justify-items: center; text-align: center; }
.si-ring { width: 44px; height: 44px; border-radius: 50%; border: 4px solid #E2DED6; border-top-color: var(--accent); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.si-app { width: 100%; max-width: 640px; background: var(--sheet); color: #14181B; border-radius: var(--radius); padding: 22px; display: grid; gap: 12px; animation: rise .45s cubic-bezier(.2,.8,.2,1) both; }
.si-app h2 { color: #14181B; }
.si-app-top { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #E2DED6; }
.si-app-co { margin-left: auto; font-weight: 700; font-size: 0.9rem; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid #E2DED6; }
.si-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.si-tiles div { background: #fff; border: 1px solid #E2DED6; border-radius: 12px; padding: 14px; display: grid; gap: 4px; }
.si-tiles span { font-size: 0.8rem; color: #5A6575; } .si-tiles b { font-family: var(--font-display); font-size: 1.4rem; } .si-tiles small { font-size: 0.76rem; color: #5A6575; }
@media (max-width: 640px) { .si-tiles { grid-template-columns: minmax(0, 1fr); } .si-stage { padding: 22px 10px; min-height: 380px; } .si-card { padding: 20px; } }
@media (prefers-reduced-motion: reduce) { .si-card, .si-app { animation: none; } .si-ring { animation-duration: 2.5s; } }

/* ===== Industries: the chosen industry lights up briefly ===== */
.ind-block { padding-inline: 16px; margin-inline: -16px; border-radius: var(--radius); transition: background-color .6s ease, box-shadow .6s ease; }
.ind-block.flash { background-color: var(--highlight); box-shadow: 0 0 0 3px var(--accent), 0 0 0 10px color-mix(in srgb, var(--accent) 18%, transparent); }
@media (prefers-reduced-motion: no-preference) { .ind-block.flash { animation: flash-pulse 1.2s ease 2; } }
@keyframes flash-pulse { 50% { box-shadow: 0 0 0 3px var(--accent), 0 0 0 16px color-mix(in srgb, var(--accent) 6%, transparent); } }
.form-done.form-err { background: #FDECEA; color: #B42318; }
/* Form confirmations: strong contrast on every ground (the navy sections' paragraph colour no longer bleeds in) */
.form-card .form-done, .on-ground .form-card .form-done { background: #DDF3E6; color: #0B4F2C; border: 1px solid #9FD5B5; font-weight: 700; display: flex; gap: 10px; align-items: flex-start; }
.form-card .form-done::before { content: "✓"; flex: none; width: 22px; height: 22px; border-radius: 50%; background: #11683B; color: #fff; display: grid; place-items: center; font-size: 0.8rem; }
.form-card .form-done.form-err, .on-ground .form-card .form-done.form-err { background: #FDECEA; color: #8A1C12; border-color: #F3B8B1; }
.form-card .form-done.form-err::before { content: "!"; background: #B42318; }
.form-card .form-done[hidden] { display: none; }

/* =====================================================================================
   L2 (31 Oct 2026): Rounded Shop Floor brand, from the StageVO Website Design Spec
   (29 Oct 2026). Ink, gold and warm grey; Instrument Sans and JetBrains Mono; pill
   buttons and soft corners; no shadows and no gradients; light only.
   This layer comes last and overrides the earlier tokens and components.
   ===================================================================================== */
/* Fonts are served from this site (no third-party requests): Instrument Sans and JetBrains Mono, SIL Open Font Licence. */
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/instrument-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/instrument-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }
:root, :root[data-theme="dark"], :root[data-palette] {
  --ink: #14181B; --gold: #E0A93A; --steel: #3E464C; --steel-muted: #565F66;
  --line: #D2D2CC; --line-soft: #E1E1DB; --waiting: #E8E8E3; --outline-grey: #9AA3AA;
  --panel-2: #1F272C; --on-dark: #D4DADF; --on-dark-soft: #C4CCD2; --on-dark-muted: #9AA5AD;
  --on-dark-line: #3A434A; --on-dark-outline: #6B757D; --on-dark-tag: #E6EAED;

  --ground: var(--ink); --ground-2: var(--panel-2);
  --on-ground: var(--on-dark); --on-ground-strong: #FFFFFF; --on-ground-muted: var(--on-dark-muted);
  --grid-line: transparent;
  --accent: var(--gold); --accent-bright: var(--gold); --accent-soft: var(--gold); --accent-ink: var(--ink);
  --btn-fg: var(--ink); --track: var(--on-dark-line); --track-light: var(--line);

  --bg: #EDECE8; --surface: #FFFFFF; --paper: #FFFFFF; --sheet: #FFFFFF; --sheet-hi: #F6EBD3; --highlight: #F6EBD3;
  --fg: var(--ink); --body: var(--steel); --muted: var(--steel-muted); --border: var(--line); --focus: var(--ink);
  --ok-fg: #11683B; --ok-bg: #E6F2EA; --due-fg: #7A5410; --due-bg: #F6EBD3; --late-fg: #A1262C; --late-bg: #FBE9E9;

  --font-display: "Instrument Sans", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --radius: 18px; --radius-sm: 12px; --wrap: 1240px; --gutter: clamp(20px, 4vw, 48px);
  color-scheme: light;
}
body { font-family: var(--font-body); font-size: 18px; line-height: 1.55; color: var(--body); background: var(--bg); }
h1, h2, h3, h4 { font-family: var(--font-display); font-stretch: normal; font-weight: 700; color: var(--fg); text-wrap: balance; }
h1 { font-size: clamp(40px, 6.2vw, 80px); line-height: 0.98; letter-spacing: -0.05em; }
h2 { font-size: clamp(32px, 4.4vw, 60px); line-height: 1; letter-spacing: -0.045em; }
h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.fig, .num, .price .fig, .pt-price { font-family: var(--font-display); letter-spacing: -0.03em; }
.mono { font-family: var(--font-mono); }
a { color: var(--fg); }
a:hover { color: var(--steel-muted); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
.on-ground :focus-visible, .hp-claim :focus-visible, .hp-story :focus-visible, .on-ground:focus-visible { outline-color: var(--gold); }
.kicker { font-family: var(--font-mono); font-weight: 500; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--steel-muted); }
.on-ground .kicker, .on-ground .happened .kicker { color: var(--gold); }
.lede { font-size: 1.17rem; }
.wrap { max-width: var(--wrap); padding-inline: var(--gutter); }
.section + .section { border-top: 0; }

/* Header */
.site-header { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--line); }
.site-header.scrolled { box-shadow: none; border-bottom-color: var(--line); }
.header-row { min-height: 76px; gap: 24px; }
.brand svg { width: auto; height: 34px; display: block; }
.nav { gap: 2px; }
.nav a { color: var(--fg); font-weight: 500; font-size: 15px; padding: 8px 10px; border-radius: 999px; }
.nav a:hover, .nav a[aria-current="page"] { background: transparent; color: var(--fg); text-decoration: underline; text-underline-offset: 5px; }
.nav .nav-demo { display: none; }
.btn-nav { display: inline-flex; align-items: center; background: var(--ink); color: var(--gold); padding: 12px 22px; font-weight: 600; font-size: 15px; border-radius: 999px; text-decoration: none; white-space: nowrap; border: 0; min-height: 0; }
.btn-nav:hover { background: #2A3036; color: var(--gold); }
.icon-btn { border-color: var(--line); background: var(--surface); }
@media (max-width: 1120px) { .nav { background: var(--bg); border-bottom: 1px solid var(--line); } .nav .nav-demo { display: block; } }

/* Buttons */
.btn { font-family: var(--font-body); font-weight: 600; font-size: 16px; min-height: 54px; padding: 0 28px; border: 2px solid transparent; border-radius: 999px; transition: background .15s, color .15s; }
.btn:active { transform: none; }
.btn-primary { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }
.btn-primary:hover { background: #2A3036; border-color: #2A3036; color: #FFFFFF; }
.btn-secondary, .btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover, .btn-ghost:hover { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }
.btn-gold { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn-gold:hover { background: #E8BB5C; border-color: #E8BB5C; color: var(--ink); }
.btn-sm { min-height: 44px; padding: 0 20px; font-size: 15px; }
.on-ground:not(.page-hero) .btn-primary, .coach .btn-primary, .demo-end .btn-primary { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.on-ground:not(.page-hero) .btn-primary:hover, .coach .btn-primary:hover { background: #E8BB5C; border-color: #E8BB5C; }
.on-ground:not(.page-hero) .btn-ghost, .coach .btn-ghost { color: #FFFFFF; border-color: var(--on-dark-outline); }
.on-ground:not(.page-hero) .btn-ghost:hover, .coach .btn-ghost:hover { background: #FFFFFF; color: var(--ink); border-color: #FFFFFF; }
.form-card .btn-primary { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }
.arrow-link { color: var(--fg); font-weight: 600; }
.on-ground .arrow-link { color: var(--gold); }

/* Ink panels: soft-cornered blocks inside the 1240px column, not full-width bands */
.on-ground { background: var(--ink); background-image: none; }
.section.on-ground, .cta-band.on-ground { width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--wrap) - 2 * var(--gutter)); margin: clamp(24px, 4vw, 48px) auto; border-radius: 28px; padding-block: clamp(32px, 5vw, 72px); }
.section.on-ground > .wrap, .cta-band.on-ground > .wrap { padding-inline: clamp(20px, 4vw, 56px); }
main > .on-ground:last-child { padding-bottom: clamp(32px, 5vw, 72px); }

/* Inner-page heroes are light, on the warm grey ground */
.page-hero.on-ground { background: var(--bg); color: var(--body);
  --on-ground: var(--steel); --on-ground-strong: var(--ink); --on-ground-muted: var(--steel-muted); --ground-2: var(--surface); --accent-soft: var(--ink); }
.page-hero.on-ground .kicker { color: var(--steel-muted); }
.page-hero.on-ground a:not(.btn) { color: var(--ink); }
.page-hero.on-ground .btn-ghost { color: var(--ink); border-color: var(--ink); }
.page-hero.on-ground .chip { border-color: var(--line); }
.page-hero.on-ground .chip:hover { border-color: var(--ink); }
.page-hero { padding-block: clamp(40px, 6vw, 88px) clamp(28px, 4vw, 48px); }

/* No shadows anywhere; depth comes from colour blocks and corners */
.statement, .coach, .palette-switch, .step:hover, .pt-card:hover, .plan:hover, .road-item:hover, .hero-stats, .yd-panel { box-shadow: none; }
.scroll-progress { background: var(--gold); height: 3px; }
@media (prefers-reduced-motion: no-preference) {
  /* 1 Nov 2026: motion restored at Agnish's request (sections rise in, grids arrive in turn, figures count up); hover lifts keep no shadow */
  .step:hover, .pt-card:hover, .plan:hover, .road-item:hover { box-shadow: none; }
}

/* Cards and lists on light pages */
.step, .plan, .road-item, .panel, .order-head, .toolbar, .soon, .pt-card, .ind-btn { border-color: var(--line); border-radius: var(--radius); }
.plan.featured { border: 2px solid var(--ink); }
.plan .badge { background: var(--gold); color: var(--ink); font-family: var(--font-mono); font-weight: 500; letter-spacing: .05em; }
.pt-name, .step .n { font-family: var(--font-mono); font-weight: 500; letter-spacing: .06em; color: var(--steel-muted); }
.pt-ded .pt-name { color: var(--gold); }
.data-list li::before { border-color: var(--ink); }
.status { font-family: var(--font-mono); font-weight: 500; letter-spacing: .05em; }
.tag { font-family: var(--font-mono); font-weight: 500; letter-spacing: .02em; }
.faq summary { font-weight: 600; }
.faq summary h3 { font-size: 1.12rem; font-weight: 600; margin: 0; color: var(--fg); letter-spacing: -0.015em; }
.faq summary::after { color: var(--ink); font-family: var(--font-mono); }
.field input, .field select, .field textarea { border: 1.5px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--ink); outline-offset: 2px; border-color: var(--ink); }
.field label, .form-card h3 { color: var(--ink); }
.consent input { accent-color: var(--ink); }
.st-tab[aria-pressed="true"] { box-shadow: inset 0 -3px 0 var(--gold); color: var(--ink); }
.q-est { background: #F6EBD3; border-color: #E8D3A6; }
.q-tbl .q-total th, .q-tbl .q-total td { border-top-color: #E8D3A6; }
.draft-note { border-radius: var(--radius-sm); }
.ind-btn[aria-pressed="true"] { border-color: var(--ink); background: #F6EBD3; box-shadow: inset 0 0 0 1px var(--ink); }
.panel .stage.current { outline-color: var(--ink); }
.guide li.done .n { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.cdot.now { box-shadow: 0 0 0 3px rgba(224, 169, 58, .35); }

/* Footer: light, as in the spec */
.site-footer, .site-footer.on-ground { background: var(--bg); color: var(--steel); border-top: 1px solid var(--line); padding-block: 40px 32px; font-size: 14px; }
.site-footer a:not(.btn) { color: var(--ink); text-decoration: none; }
.site-footer a:not(.btn):hover { text-decoration: underline; color: var(--ink); }
.foot-top { border-bottom: 1px solid var(--line); }
.foot-logo svg { height: 30px; }
.foot-tag { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 1.1rem; letter-spacing: -0.02em; }
.foot-desc, .fc-note, .fc-label, .foot-by, .site-footer .foot-legal { color: var(--steel); }
.foot-cols h4 { font-family: var(--font-mono); font-weight: 500; font-size: 13px; letter-spacing: .06em; color: var(--steel-muted); }
.fc-val { color: var(--ink); font-weight: 600; }
.foot-by { gap: 8px; flex-wrap: wrap; }
.yds-logo-svg svg { height: 20px; width: auto; display: block; }
.yds-logo-svg.big svg { height: 34px; }
.foot-yd-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-footer { padding-bottom: 96px; }

/* Yudic launcher in the brand colours */
.yd-launch { background: var(--ink); color: #FFFFFF; box-shadow: none; border: 2px solid var(--ink); }
.yd-panel { border: 1.5px solid var(--line); }

/* ===================== The home page (spec sections 1 to 8) ===================== */
.home .wrap { max-width: var(--wrap); }
.hp-row { display: flex; flex-wrap: wrap; align-items: center; }
.eyebrow { display: inline-block; justify-self: start; background: var(--gold); color: var(--ink); font: 500 13px/1.55 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; padding: 7px 16px; border-radius: 999px; margin: 0; max-width: none; }
.hp-label { font: 500 13px/1.55 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--steel-muted); margin: 0 0 14px; }
.gold { color: var(--gold); }

/* 2. Hero */
.hp-hero { padding-block: clamp(40px, 6vw, 88px); }
.hp-hero .hp-row { gap: 48px; }
.hp-hero-copy { flex: 1 1 520px; min-width: 0; display: grid; gap: 24px; }
.hp-hero h1 { font-size: clamp(48px, 7.2vw, 104px); line-height: 0.94; letter-spacing: -0.05em; }
.hp-intro { font-size: 21px; line-height: 1.5; color: var(--steel); max-width: 34em; }
.hp-claim { flex: 1 1 420px; min-width: 0; background: var(--ink); color: #FFFFFF; border-radius: 24px; overflow: hidden; padding: 34px clamp(22px, 3vw, 32px) 24px; position: relative; }
.hp-claim::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: var(--gold); }
.hp-claim p { max-width: none; margin: 0; }
.hp-claim-l { font: 500 13px/1.55 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-muted); }
.hp-claim-n { font-weight: 700; font-size: clamp(48px, 5.6vw, 76px); line-height: 1; letter-spacing: -0.05em; color: var(--gold); margin-top: 8px !important; font-variant-numeric: tabular-nums; }
.hp-claim-n .rs { font-weight: 500; font-size: 34px; letter-spacing: 0; margin-right: 4px; vertical-align: 0.42em; }
.hp-claim-s { color: var(--on-dark-soft); margin-top: 6px !important; }
.hp-claim ul { list-style: none; margin: 18px 0 0; padding: 0; }
.hp-claim li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 0; border-top: 1px solid var(--on-dark-line); }
.hp-claim li b { display: block; color: #FFFFFF; font-weight: 600; }
.hp-claim li small { display: block; color: var(--on-dark-muted); font-size: 15px; }
.hp-tag { flex-shrink: 0; font: 500 13px/1.3 var(--font-mono); letter-spacing: .03em; padding: 7px 12px; border-radius: 999px; border: 1.5px solid; white-space: nowrap; }
.hp-tag.tag-gold { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.hp-tag.tag-outline { background: transparent; color: var(--on-dark-tag); border-color: var(--on-dark-outline); }
.hp-sample { font: 500 12px/1.55 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-muted); margin-top: 10px !important; }

/* 3. Built for */
.hp-built { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 36px; background: var(--gold); color: var(--ink); border-radius: 22px; padding: 22px clamp(20px, 3vw, 36px); }
.hp-built span { font: 500 13px/1.55 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.hp-built b { font-size: 23px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.3; }
.hp-built-more { margin-left: auto; font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* 4. How it works */
.hp-how .hp-row { gap: 56px; align-items: center; }
.hp-how-copy { flex: 1 1 360px; min-width: 0; }
.hp-how h2 { font-size: clamp(38px, 4.8vw, 68px); line-height: 0.98; letter-spacing: -0.045em; margin-bottom: 20px; }
.hp-ladder { flex: 1.4 1 460px; min-width: 0; background: var(--surface); border: 1.5px solid var(--ink); border-radius: 22px; overflow: hidden; }
.hp-ladder-h { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--ink); color: #FFFFFF; font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; padding: 14px 24px; }
.hp-ladder ol { list-style: none; margin: 0; padding: 0; }
.hp-ladder li { display: flex; align-items: center; gap: 16px; padding: 18px 24px; border-top: 1px solid var(--line-soft); }
.hp-ladder li:first-child { border-top: 0; }
.hp-n { flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--bg); font-size: 13px; color: var(--ink); }
.hp-sn { flex: 1; font-weight: 600; font-size: 21px; letter-spacing: -0.02em; color: var(--ink); min-width: 0; }
.hp-st { flex-shrink: 0; font-size: 13px; padding: 6px 14px; border: 1.5px solid; border-radius: 999px; white-space: nowrap; }
.st-paid { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }
.st-ready { background: var(--gold); color: var(--ink); border-color: var(--ink); }
.st-prog { background: #FFFFFF; color: var(--ink); border-color: var(--ink); }
.st-wait { background: var(--waiting); color: var(--steel); border-color: var(--waiting); }
.st-clock { background: #FFFFFF; color: var(--steel); border-color: var(--outline-grey); }
@media (max-width: 460px) { .hp-ladder li { padding: 14px 16px; gap: 10px; } .hp-sn { font-size: 17px; } .hp-st { padding: 5px 10px; font-size: 12px; } .hp-ladder-h { padding: 12px 16px; } }

/* 5. Feature cards */
.hp-feats { display: flex; flex-wrap: wrap; gap: 20px; }
.hp-feat { flex: 1 1 280px; background: var(--surface); border-radius: 18px; padding: 30px; }
.hp-feat h3 { font-size: 28px; font-weight: 700; line-height: 1.08; letter-spacing: -0.035em; margin-bottom: 14px; }
.hp-feat p { color: var(--steel); }

/* 6. Story panel */
.hp-story { display: flex; flex-wrap: wrap; gap: 56px; background: var(--ink); border-radius: 28px; padding: clamp(28px, 5vw, 72px); color: var(--on-dark); }
.hp-story-copy { flex: 1.2 1 400px; min-width: 0; display: grid; gap: 18px; align-content: start; }
.hp-story-copy .mono { font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; margin: 0; }
.hp-story h2 { color: #FFFFFF; font-size: clamp(42px, 5.4vw, 76px); line-height: 0.96; letter-spacing: -0.05em; }
.hp-story p { color: var(--on-dark); }
.hp-story .btn-gold { justify-self: start; min-height: 0; padding: 14px 26px; }
.hp-story-side { flex: 1 1 320px; min-width: 0; display: grid; gap: 12px; align-content: start; }
.hp-tiles { display: flex; flex-wrap: wrap; gap: 12px; }
.hp-tile { flex: 1 1 130px; background: var(--panel-2); border-radius: 14px; padding: 18px 20px; display: grid; gap: 4px; }
.hp-tile b { font-size: 52px; font-weight: 700; line-height: 1; letter-spacing: -0.06em; color: var(--gold); }
.hp-tile span { color: var(--on-dark-muted); font-size: 15px; line-height: 1.4; }
.hp-made { background: var(--panel-2); border-radius: 14px; padding: 20px 22px; }
.hp-made .mono { color: var(--on-dark-muted); font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
.hp-made ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hp-made li { position: relative; padding-left: 22px; color: var(--on-dark); font-size: 16px; line-height: 1.45; }
.hp-made li::before { content: "+"; position: absolute; left: 0; top: -1px; color: var(--gold); font-weight: 700; }

/* 7. Trust */
.hp-trust h2 { font-size: clamp(36px, 4.6vw, 64px); line-height: 0.98; letter-spacing: -0.045em; margin-bottom: 32px; max-width: 16em; }
.hp-trust-row { display: flex; flex-wrap: wrap; gap: 16px; }
.hp-tcard { flex: 1 1 240px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 18px; padding: 26px; }
.hp-tcard h3 { font-size: 22px; font-weight: 600; line-height: 1.15; letter-spacing: -0.025em; margin-bottom: 10px; }
.hp-tcard p { font-size: 17px; color: var(--steel); }

/* Questions */
.hp-faq h2 { font-size: clamp(32px, 4vw, 52px); margin-bottom: 24px; }
.hp-faq .faq { max-width: 900px; }

/* 8. Closing banner */
.hp-cta-wrap { padding-block: clamp(24px, 4vw, 48px) clamp(48px, 7vw, 104px); }
.hp-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; background: var(--gold); color: var(--ink); border-radius: 28px; padding: clamp(32px, 5vw, 72px); }
.hp-cta h2 { flex: 1 1 420px; font-size: clamp(42px, 5.8vw, 82px); line-height: 0.94; letter-spacing: -0.05em; color: var(--ink); }
.hp-cta .btn-secondary:hover { background: var(--ink); color: var(--gold); }
.hp-cta :focus-visible { outline-color: var(--ink); }

@media (max-width: 640px) { .hp-hero-copy .btn, .hp-cta .btn { width: 100%; } .hp-built-more { margin-left: 0; } }
@media print { .site-header, .yd-launch, .yd-panel { display: none; } }

/* L2 fixes after the first look */
.hp-story .gold { color: var(--gold); }
.btn-mark { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }
.btn-mark:hover { background: #2A3036; }
.sv-loader svg.ld-mark { transform: none; width: 80px; height: 80px; }
/* The Yudiserve wordmark: dark letters on light grounds, light letters on ink panels */
.yds-logo-svg { display: inline-block; vertical-align: baseline; }
.yds-logo-svg .yd-d { display: none; }
.on-ground:not(.page-hero) .yds-logo-svg .yd-l { display: none; }
.on-ground:not(.page-hero) .yds-logo-svg .yd-d { display: block; }
.yds-logo-svg.inline svg { height: 0.82em; margin-bottom: -0.12em; }
.yds-head .yds-link { display: inline-block; }

/* L2 review fixes */
/* 1. Compare cost table on phones: one column per card, text wraps */
@media (max-width: 760px) {
  .price-tbl.cost tr { grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
  .price-tbl.cost th, .price-tbl.cost td, .price-tbl.cost .fig-cell, .price-tbl.cost .fig-cell span { white-space: normal; min-width: 0; overflow-wrap: anywhere; }
  .price-tbl.cost tbody.m-swipe > tr { align-content: start; }
}
/* 2. Buttons on the Dedicated ink panel */
.ded-head .btn-primary { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.ded-head .btn-ghost { color: #FFFFFF; border-color: var(--on-dark-outline); }
/* 4. Focus ring on white cards inside ink panels stays ink */
.on-ground .form-card :focus-visible, .on-ground .st-tab[aria-pressed="true"]:focus-visible { outline-color: var(--ink); }
/* 7. Old-palette leftovers */
.tag.idle { background: var(--waiting); color: var(--steel); }
.st-tab[aria-pressed="true"] span { color: var(--steel); }
.form-card, .form-card h3, .field label, .q-tbl { color: var(--ink); }
.consent { color: var(--steel); }
.st-tab[aria-pressed="true"] { box-shadow: none; border-color: var(--gold); outline: 0; border-bottom: 3px solid var(--gold); }
.cdot.now { box-shadow: none; outline: 2px solid var(--gold); outline-offset: 2px; }
[data-focus="works"] [data-panel="works"], [data-focus="accounts"] [data-panel="accounts"], [data-focus="owner"] [data-panel="owner"] { box-shadow: none; border-color: var(--ink); outline: 2px solid var(--gold); outline-offset: 0; }
.stage.current { outline-color: var(--ink); }
/* 11. Floating Yudic button: smaller on phones so it does not cover the hero figure */
@media (max-width: 640px) { .yd-launch { padding: 10px 14px; font-size: 14px; bottom: 12px; right: 12px; } }
@media (max-width: 640px) { .price-tbl.cost tbody.m-swipe { align-items: flex-start; } }
/* Logo chosen 31 Oct 2026 (R7 with StageVO, VO in bold gold): a touch larger in the header */
.site-header .brand svg { height: 40px; }
@media (max-width: 640px) { .site-header .brand svg { height: 34px; } }
.foot-logo svg { height: 34px; }

/* ===== 1 Nov 2026: sizes for 13-inch laptops, and motion on the home page ===== */
/* Headings scale with the height of the screen as well as its width, so a 13-inch laptop
   (about 1280 to 1470 px wide and 700 to 800 px tall in the browser) gets calmer sizes. */
h1 { font-size: clamp(36px, min(4.8vw, 8vh), 64px); }
h2 { font-size: clamp(28px, min(3.4vw, 6vh), 46px); }
.hp-hero h1 { font-size: clamp(40px, min(5.6vw, 9vh), 84px); line-height: 0.96; }
.hp-intro { font-size: clamp(17px, 1.35vw, 20px); }
.hp-claim-n { font-size: clamp(40px, min(4.4vw, 7.5vh), 64px); }
.hp-claim-n .rs { font-size: 0.48em; }
.hp-built b { font-size: clamp(17px, 1.5vw, 21px); }
.hp-how h2 { font-size: clamp(30px, min(3.8vw, 6.5vh), 56px); }
.hp-sn { font-size: clamp(16px, 1.35vw, 19px); }
.hp-ladder li { padding-block: 14px; }
.hp-feat h3 { font-size: clamp(20px, 1.7vw, 24px); }
.hp-story h2 { font-size: clamp(32px, min(4.2vw, 7vh), 60px); }
.hp-tile b { font-size: clamp(36px, 3.2vw, 46px); }
.hp-trust h2 { font-size: clamp(28px, min(3.6vw, 6vh), 52px); }
.hp-tcard h3 { font-size: clamp(18px, 1.5vw, 21px); }
.hp-faq h2 { font-size: clamp(26px, min(3.2vw, 5.5vh), 44px); }
.hp-cta h2 { font-size: clamp(32px, min(4.4vw, 7.5vh), 64px); }
.hp-hero { padding-block: clamp(32px, 5vh, 72px); }

@media (prefers-reduced-motion: no-preference) {
  /* Hero: the copy rises in, the claim card floats up, its rows arrive one by one, the total counts up */
  .hp-hero-copy > * { animation: rise .8s cubic-bezier(.2,.8,.2,1) both; }
  .hp-hero-copy > :nth-child(2) { animation-delay: .12s; } .hp-hero-copy > :nth-child(3) { animation-delay: .26s; } .hp-hero-copy > :nth-child(4) { animation-delay: .4s; }
  .hp-claim { animation: float-in 1s .3s cubic-bezier(.2,.8,.2,1) both; }
  .hp-claim::before { transform-origin: 0 50%; animation: grow 1s .7s cubic-bezier(.6,0,.2,1) both; }
  .hp-claim li { animation: rise .6s cubic-bezier(.2,.8,.2,1) both; }
  .hp-claim li:nth-child(1) { animation-delay: .9s; } .hp-claim li:nth-child(2) { animation-delay: 1.05s; } .hp-claim li:nth-child(3) { animation-delay: 1.2s; }
  .hp-claim .tag-gold { animation: pill-pop .6s 1.5s both; }
  /* Built-for bar: names slide in */
  .hp-built.st-in b { animation: rise .6s cubic-bezier(.2,.8,.2,1) both; }
  .hp-built.st-in b:nth-of-type(2) { animation-delay: .08s; } .hp-built.st-in b:nth-of-type(3) { animation-delay: .16s; } .hp-built.st-in b:nth-of-type(4) { animation-delay: .24s; } .hp-built.st-in b:nth-of-type(5) { animation-delay: .32s; }
  /* Stage ladder: rows arrive in turn, then the stage that is ready to claim pops */
  .hp-ladder ol.st-in .st-ready { animation: pill-pop .6s 1s both; }
  /* Cards lift a little under the pointer (no shadow) */
  .hp-feat, .hp-tcard, .hp-tile { transition: transform .3s ease; }
  .hp-feat:hover, .hp-tcard:hover, .hp-tile:hover { transform: translateY(-4px); }
}
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pill-pop { 0% { transform: scale(.85); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }

/* ===== 1 Nov 2026: light and dark themes (Agnish), the smaller Ask Yudic button, the loading sign moves again ===== */
/* Logo: one version for each theme */
.brand .lg-l, .brand .lg-d { display: block; line-height: 0; }
.brand .lg-d { display: none; }
.theme-btn svg { width: 20px; height: 20px; }

/* Dark theme: the page and text change; the brand ink stays for panels and for text on gold.
   It follows the device until the visitor chooses with the switch (remembered in the browser). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1316; --surface: #1A2025; --paper: #1A2025; --fg: #EEF0EC; --body: #C4CCD2; --muted: #9AA5AD;
    --steel: #C4CCD2; --steel-muted: #9AA5AD; --line: #2E363C; --line-soft: #262D32; --border: #2E363C; --waiting: #262D32;
    --highlight: #3A2F17; --focus: var(--gold);
    --ok-fg: #8FE0B0; --ok-bg: #12301F; --due-fg: #F2C46A; --due-bg: #3A2F17; --late-fg: #FFA3A8; --late-bg: #3A1619;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0F1316; --surface: #1A2025; --paper: #1A2025; --fg: #EEF0EC; --body: #C4CCD2; --muted: #9AA5AD;
  --steel: #C4CCD2; --steel-muted: #9AA5AD; --line: #2E363C; --line-soft: #262D32; --border: #2E363C; --waiting: #262D32;
  --highlight: #3A2F17; --focus: var(--gold);
  --ok-fg: #8FE0B0; --ok-bg: #12301F; --due-fg: #F2C46A; --due-bg: #3A2F17; --late-fg: #FFA3A8; --late-bg: #3A1619;
  color-scheme: dark;
}
/* The same rules, written once for each way dark can be chosen */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .brand .lg-l { display: none; }
:root:not([data-theme="light"]) .brand .lg-d { display: block; }
:root:not([data-theme="light"]) :focus-visible { outline-color: var(--gold); }
:root:not([data-theme="light"]) a, :root:not([data-theme="light"]) a:hover { color: var(--fg); }
:root:not([data-theme="light"]) .btn-primary, :root:not([data-theme="light"]) .form-card .btn-primary, :root:not([data-theme="light"]) .btn-mark { background: var(--gold); color: #14181B; border-color: var(--gold); }
:root:not([data-theme="light"]) .btn-primary:hover, :root:not([data-theme="light"]) .btn-mark:hover { background: #E8BB5C; border-color: #E8BB5C; color: #14181B; }
:root:not([data-theme="light"]) .btn-secondary, :root:not([data-theme="light"]) .btn-ghost { color: var(--fg); border-color: #C4CCD2; }
:root:not([data-theme="light"]) .btn-secondary:hover, :root:not([data-theme="light"]) .btn-ghost:hover { background: #EEF0EC; color: #14181B; border-color: #EEF0EC; }
:root:not([data-theme="light"]) .hp-cta .btn-primary { background: #14181B; color: #FFFFFF; border-color: #14181B; }
:root:not([data-theme="light"]) .hp-cta .btn-secondary { color: #14181B; border-color: #14181B; }
:root:not([data-theme="light"]) .hp-cta .btn-secondary:hover { background: #14181B; color: var(--gold); }
:root:not([data-theme="light"]) .btn-nav { background: var(--gold); color: #14181B; }
:root:not([data-theme="light"]) .btn-nav:hover { background: #E8BB5C; color: #14181B; }
:root:not([data-theme="light"]) .icon-btn { background: var(--surface); border-color: var(--line); color: var(--fg); }
:root:not([data-theme="light"]) .page-hero.on-ground { --on-ground-strong: var(--fg); --accent-soft: var(--fg); background: var(--bg); }
:root:not([data-theme="light"]) .page-hero.on-ground a:not(.btn), :root:not([data-theme="light"]) .page-hero.on-ground .btn-ghost { color: var(--fg); border-color: #C4CCD2; }
:root:not([data-theme="light"]) .on-ground:not(.page-hero), :root:not([data-theme="light"]) .hp-claim, :root:not([data-theme="light"]) .hp-story { box-shadow: inset 0 0 0 1px #2E363C; }
:root:not([data-theme="light"]) .plan.featured { border-color: var(--gold); }
:root:not([data-theme="light"]) .data-list li::before { border-color: var(--fg); }
:root:not([data-theme="light"]) .faq summary::after { color: var(--fg); }
:root:not([data-theme="light"]) .ind-btn[aria-pressed="true"] { border-color: var(--gold); background: var(--highlight); box-shadow: inset 0 0 0 1px var(--gold); }
:root:not([data-theme="light"]) .panel .stage.current, :root:not([data-theme="light"]) .stage.current { outline-color: var(--gold); }
:root:not([data-theme="light"]) [data-focus="works"] [data-panel="works"], :root:not([data-theme="light"]) [data-focus="accounts"] [data-panel="accounts"], :root:not([data-theme="light"]) [data-focus="owner"] [data-panel="owner"] { border-color: var(--gold); }
:root:not([data-theme="light"]) .site-footer a:not(.btn), :root:not([data-theme="light"]) .site-footer a:not(.btn):hover, :root:not([data-theme="light"]) .foot-tag, :root:not([data-theme="light"]) .fc-val { color: var(--fg); }
:root:not([data-theme="light"]) .yds-logo-svg .yd-l { display: none; }
:root:not([data-theme="light"]) .yds-logo-svg .yd-d { display: block; }
:root:not([data-theme="light"]) .yd-launch { background: var(--surface); color: var(--fg); border-color: var(--line); }
:root:not([data-theme="light"]) .hp-ladder { border-color: #4A545C; }
:root:not([data-theme="light"]) .hp-ladder-h { box-shadow: inset 0 -1px 0 #2E363C; }
:root:not([data-theme="light"]) .hp-n { background: var(--bg); color: var(--fg); }
:root:not([data-theme="light"]) .hp-sn { color: var(--fg); }
:root:not([data-theme="light"]) .st-paid { background: #EEF0EC; color: #14181B; border-color: #EEF0EC; }
:root:not([data-theme="light"]) .st-ready { border-color: var(--gold); }
:root:not([data-theme="light"]) .st-prog { background: transparent; color: var(--fg); border-color: #C4CCD2; }
:root:not([data-theme="light"]) .st-wait { background: #262D32; color: #C4CCD2; border-color: #262D32; }
:root:not([data-theme="light"]) .st-clock { background: transparent; color: #C4CCD2; border-color: #6B757D; }
:root:not([data-theme="light"]) .tag.idle { background: #262D32; color: #C4CCD2; }
:root:not([data-theme="light"]) .price-tbl tr.us, :root:not([data-theme="light"]) .pt-ded { box-shadow: inset 0 0 0 1px #2E363C; }
}
:root[data-theme="dark"] .brand .lg-l { display: none; }
:root[data-theme="dark"] .brand .lg-d { display: block; }
:root[data-theme="dark"] :focus-visible { outline-color: var(--gold); }
:root[data-theme="dark"] a, :root[data-theme="dark"] a:hover { color: var(--fg); }
:root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .form-card .btn-primary, :root[data-theme="dark"] .btn-mark { background: var(--gold); color: #14181B; border-color: var(--gold); }
:root[data-theme="dark"] .btn-primary:hover, :root[data-theme="dark"] .btn-mark:hover { background: #E8BB5C; border-color: #E8BB5C; color: #14181B; }
:root[data-theme="dark"] .btn-secondary, :root[data-theme="dark"] .btn-ghost { color: var(--fg); border-color: #C4CCD2; }
:root[data-theme="dark"] .btn-secondary:hover, :root[data-theme="dark"] .btn-ghost:hover { background: #EEF0EC; color: #14181B; border-color: #EEF0EC; }
:root[data-theme="dark"] .hp-cta .btn-primary { background: #14181B; color: #FFFFFF; border-color: #14181B; }
:root[data-theme="dark"] .hp-cta .btn-secondary { color: #14181B; border-color: #14181B; }
:root[data-theme="dark"] .hp-cta .btn-secondary:hover { background: #14181B; color: var(--gold); }
:root[data-theme="dark"] .btn-nav { background: var(--gold); color: #14181B; }
:root[data-theme="dark"] .btn-nav:hover { background: #E8BB5C; color: #14181B; }
:root[data-theme="dark"] .icon-btn { background: var(--surface); border-color: var(--line); color: var(--fg); }
:root[data-theme="dark"] .page-hero.on-ground { --on-ground-strong: var(--fg); --accent-soft: var(--fg); background: var(--bg); }
:root[data-theme="dark"] .page-hero.on-ground a:not(.btn), :root[data-theme="dark"] .page-hero.on-ground .btn-ghost { color: var(--fg); border-color: #C4CCD2; }
:root[data-theme="dark"] .on-ground:not(.page-hero), :root[data-theme="dark"] .hp-claim, :root[data-theme="dark"] .hp-story { box-shadow: inset 0 0 0 1px #2E363C; }
:root[data-theme="dark"] .plan.featured { border-color: var(--gold); }
:root[data-theme="dark"] .data-list li::before { border-color: var(--fg); }
:root[data-theme="dark"] .faq summary::after { color: var(--fg); }
:root[data-theme="dark"] .ind-btn[aria-pressed="true"] { border-color: var(--gold); background: var(--highlight); box-shadow: inset 0 0 0 1px var(--gold); }
:root[data-theme="dark"] .panel .stage.current, :root[data-theme="dark"] .stage.current { outline-color: var(--gold); }
:root[data-theme="dark"] [data-focus="works"] [data-panel="works"], :root[data-theme="dark"] [data-focus="accounts"] [data-panel="accounts"], :root[data-theme="dark"] [data-focus="owner"] [data-panel="owner"] { border-color: var(--gold); }
:root[data-theme="dark"] .site-footer a:not(.btn), :root[data-theme="dark"] .site-footer a:not(.btn):hover, :root[data-theme="dark"] .foot-tag, :root[data-theme="dark"] .fc-val { color: var(--fg); }
:root[data-theme="dark"] .yds-logo-svg .yd-l { display: none; }
:root[data-theme="dark"] .yds-logo-svg .yd-d { display: block; }
:root[data-theme="dark"] .yd-launch { background: var(--surface); color: var(--fg); border-color: var(--line); }
:root[data-theme="dark"] .hp-ladder { border-color: #4A545C; }
:root[data-theme="dark"] .hp-ladder-h { box-shadow: inset 0 -1px 0 #2E363C; }
:root[data-theme="dark"] .hp-n { background: var(--bg); color: var(--fg); }
:root[data-theme="dark"] .hp-sn { color: var(--fg); }
:root[data-theme="dark"] .st-paid { background: #EEF0EC; color: #14181B; border-color: #EEF0EC; }
:root[data-theme="dark"] .st-ready { border-color: var(--gold); }
:root[data-theme="dark"] .st-prog { background: transparent; color: var(--fg); border-color: #C4CCD2; }
:root[data-theme="dark"] .st-wait { background: #262D32; color: #C4CCD2; border-color: #262D32; }
:root[data-theme="dark"] .st-clock { background: transparent; color: #C4CCD2; border-color: #6B757D; }
:root[data-theme="dark"] .tag.idle { background: #262D32; color: #C4CCD2; }
:root[data-theme="dark"] .price-tbl tr.us, :root[data-theme="dark"] .pt-ded { box-shadow: inset 0 0 0 1px #2E363C; }

/* Ask Yudic: about a third smaller (1 Nov 2026) */
.yd-launch { min-height: 36px; padding: 0 14px 0 10px; gap: 7px; font-size: 0.72rem; font-weight: 700; }
.yd-launch .yd-dot { width: 18px; height: 18px; border-width: 3px; }
@media (max-width: 640px) { .yd-launch { min-height: 34px; padding: 0 12px 0 9px; font-size: 0.7rem; bottom: 12px; right: 12px; } }

/* The demo's loading sign: the six stages light up in turn, then the tick */
@media (prefers-reduced-motion: no-preference) {
  .sv-loader .ld-mark path { opacity: .18; animation: stage-on .32s ease forwards; }
  .sv-loader .ld-mark path:nth-of-type(1) { animation-delay: .05s; } .sv-loader .ld-mark path:nth-of-type(2) { animation-delay: .17s; }
  .sv-loader .ld-mark path:nth-of-type(3) { animation-delay: .29s; } .sv-loader .ld-mark path:nth-of-type(4) { animation-delay: .41s; }
  .sv-loader .ld-mark path:nth-of-type(5) { animation-delay: .53s; } .sv-loader .ld-mark path:nth-of-type(6) { animation-delay: .65s; }
  .sv-loader .ld-mark polyline { stroke-dasharray: 40; stroke-dashoffset: 40; animation: tick-draw .45s .8s ease-out forwards; }
}
@keyframes stage-on { to { opacity: 1; } }
@keyframes tick-draw { to { stroke-dashoffset: 0; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hp-built a, :root:not([data-theme="light"]) .hp-cta a:not(.btn) { color: #14181B; } }
:root[data-theme="dark"] .hp-built a, :root[data-theme="dark"] .hp-cta a:not(.btn) { color: #14181B; }
/* The form card stays a light sheet in both themes, so its own text stays dark */
.form-card .consent, .st-tab[aria-pressed="true"] span { color: #3E464C; }
.form-card .consent a { color: #14181B; }

/* ===== 1 Nov 2026 (2): tighter sections, each clearly marked ===== */
.home .section { padding-block: clamp(36px, 4.5vw, 64px); }
.hp-hero { padding-block: clamp(28px, 4vh, 56px) clamp(20px, 3vh, 36px); }
.hp-built-wrap { padding-bottom: clamp(28px, 3.5vw, 48px); }
.hp-feats-wrap { padding-block: clamp(28px, 3.5vw, 48px); }
.hp-cta-wrap { padding-block: clamp(20px, 3vw, 40px) clamp(40px, 5vw, 72px); }
/* Bands: How it works and Questions sit on a white band with a rule above and below; the rest stay on the warm grey */
.hp-how, .hp-faq { background: var(--surface); border-block: 1px solid var(--line); }
.hp-how .hp-n { background: var(--bg); }
.hp-faq .faq details { border-color: var(--line); }
.hp-trust { border-top: 1px solid var(--line); }
.hp-label { margin-bottom: 10px; }
.hp-how h2, .hp-trust h2, .hp-faq h2 { margin-bottom: 18px; }
.hp-trust h2 { margin-bottom: 24px; }
.hp-hero h1 { font-size: clamp(38px, min(5.2vw, 8.5vh), 76px); }

/* ===== 1 Nov 2026 (3): inner pages get the home page's section rhythm; headings break naturally ===== */
/* Every page: tighter sections, alternate sections on a white band with a rule above and below */
.section { padding-block: clamp(36px, 4.5vw, 64px); }
main:not(.home) > .section:not(.on-ground):nth-of-type(even) { background: var(--surface); border-block: 1px solid var(--line); }
main:not(.home) > .section:not(.on-ground) + .section:not(.on-ground):nth-of-type(odd) { border-top: 1px solid var(--line); }
.page-hero { padding-block: clamp(32px, 4.5vw, 64px) clamp(24px, 3vw, 40px); border-bottom: 1px solid var(--line); }
.section-head { max-width: 980px; margin-bottom: clamp(20px, 3vw, 36px); gap: 10px; }
main:not(.home) > .section:nth-of-type(even) .road-item, main:not(.home) > .section:nth-of-type(even) .plan,
main:not(.home) > .section:nth-of-type(even) .step, main:not(.home) > .section:nth-of-type(even) .pt-card { background: var(--bg); }

/* Headings: calmer sizes, a little more space between letters, lines broken where they read well */
h1, h2, h3 { text-wrap: pretty; }
h1 { font-size: clamp(32px, min(4vw, 7vh), 56px); line-height: 1.04; letter-spacing: -0.035em; }
h2 { font-size: clamp(26px, min(2.8vw, 5.2vh), 40px); line-height: 1.08; letter-spacing: -0.03em; }
.page-hero h1 { max-width: 24ch; }
.section-head h2 { max-width: 30ch; }
/* Home page headings keep their own sizes, with the same easier letter spacing */
.hp-hero h1 { letter-spacing: -0.04em; line-height: 0.98; }
.hp-how h2, .hp-story h2, .hp-trust h2, .hp-faq h2, .hp-cta h2 { letter-spacing: -0.035em; line-height: 1.02; }