/* ============================================================
   sykloo.com: calm light, the app's own language at editorial scale.
   Full-width bands · hairlines, not boxes · gold rationed.
   Zero build, zero dependencies.
   ============================================================ */

/* ---------- fonts (self-hosted, variable; see fonts/LICENSE.txt) ---------- */
@font-face {
  font-family: "Geist";
  src: url("./fonts/GeistVariable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("./fonts/GeistMonoVariable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens (mirrored from the product) ---------- */
:root {
  --carbon: #0B0E13;
  --paper: #FCFCFD;
  --desk: #E2E4E9;   /* darker than the app desk so the gutter frame reads */
  --panel: #FFFFFF;
  --raised: #F4F5F7;
  --border: #E5E7EB;
  --border-strong: #D4D7DD;
  --fg-1: #13151A;
  --fg-2: #3B3F47;
  --fg-3: #5C616B;
  --fg-4: #767A82;
  --action: #1b1d24;
  --action-hover: #2a2d35;
  --gold: #FFC233;
  --gold-deep: #8A6500;
  --success: #1F9D55;
  --warning: #C77A0A;
  --danger: #DC3838;
  --info: #2F7DD0;
  --r-1: 8px; --r-2: 12px; --r-3: 18px; --r-4: 24px; --r-5: 28px; --r-pill: 999px;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.5, 1);
  --dur-1: 110ms; --dur-2: 170ms; --dur-3: 260ms;
  --font-sans: "Geist", -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --elev-pop: 0 16px 40px -12px rgba(20,21,26,0.18), 0 4px 10px rgba(20,21,26,0.06);
  /* grainy-gradient signature: noise over every color field */
  --grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0 0 0 0.085 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  /* full-bleed sections, content constrained: one inset to rule them all */
  --inset: max(clamp(22px, 5vw, 64px), calc((100vw - 1240px) / 2));
  /* the desk shows as a small gutter framing the whole page */
  --gutter: clamp(10px, 1.2vw, 16px);
}

/* ---------- base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-sans);
  font-size: 15px; line-height: 1.6; color: var(--fg-2);
  background: var(--desk);
  padding: var(--gutter);
  overflow: hidden;           /* the page scrolls INSIDE the frame */
  -webkit-font-smoothing: antialiased;
}
/* the content scrolls inside a rounded frame: the desk gutter stays
   visible on all four sides at all times */
.frame {
  height: 100%;
  overflow-y: auto;
  border-radius: var(--r-4);
  background: var(--panel);
  scroll-behavior: smooth;
}
h1, h2, h3 { color: var(--fg-1); font-weight: 650; letter-spacing: -0.02em; }
a { color: inherit; }
img { display: block; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; border-radius: 4px; }

.eyebrow {
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-3); font-weight: 550; margin-bottom: 14px;
}
.wordmark { font-weight: 700; letter-spacing: -0.04em; font-size: 17px; color: var(--fg-1); }

.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: var(--r-pill); cursor: pointer;
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 550;
  padding: 11px 22px; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.pill:active { transform: scale(0.98); }
.pill-ink { background: var(--action); color: var(--paper); }
.pill-ink:hover { background: var(--action-hover); }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: var(--gutter); left: var(--gutter); right: var(--gutter); z-index: 100;
  display: flex; align-items: center; gap: 28px;
  padding: 11px clamp(16px, 2.4vw, 28px);
  /* near-opaque: at 0.96 the ticker marquee ghosted through the bar */
  background: rgba(15, 17, 23, 0.99);
  border: 1px solid rgba(252, 252, 253, 0.08); border-radius: var(--r-3);
  box-shadow: 0 14px 38px -16px rgba(11, 14, 19, 0.5);
  transform: translateY(calc(-100% - var(--gutter) - 12px));
  transition: transform 320ms var(--ease-out);
}
.nav.on { transform: none; }
.nav-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.nav .wordmark { color: var(--paper); }
.nav-glyph { border-radius: 6px; }
.nav-links { display: flex; gap: 24px; margin-left: auto; }
.nav-links a {
  font-size: 13.5px; color: rgba(252, 252, 253, 0.62); text-decoration: none; font-weight: 500;
  transition: color var(--dur-2) var(--ease-out);
}
.nav-links a:hover { color: var(--paper); }
.nav-cta { padding: 9px 18px; }
.nav .pill-ink { background: var(--paper); color: var(--carbon); }
.nav .pill-ink:hover { background: #fff; }

/* ---------- hero ---------- */
.hero { position: relative; padding: clamp(92px, 13vh, 150px) var(--inset) 0; text-align: center; }
.hero > * { position: relative; z-index: 1; }
/* glyph + wordmark lockup: the brand is on screen before anyone scrolls */
.hero-brand { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 26px; }
.hero-brand .wordmark { font-size: 21px; }
.hero-glyph { border-radius: 8px; }
.display {
  font-size: clamp(42px, 6.4vw, 78px); line-height: 1.04; letter-spacing: -0.03em;
  font-weight: 650; margin: 0 auto 22px; max-width: 17ch;
}
.display .line { display: block; overflow: hidden; }
.display .line > span { display: inline-block; transform: translateY(112%); animation: rise 760ms var(--ease-out) forwards; }
.display .line:nth-child(1) > span { animation-delay: 120ms; }
.display .line:nth-child(2) > span { animation-delay: 210ms; }
.display .line:nth-child(3) > span { animation-delay: 300ms; }
@keyframes rise { to { transform: none; } }
.hero-brand, .hero .eyebrow { opacity: 0; animation: fadein 700ms var(--ease-out) 60ms forwards; }
.hero-sub, .hero .form { opacity: 0; animation: fadein 700ms var(--ease-out) 520ms forwards; }
@keyframes fadein { to { opacity: 1; } }
.hero-sub {
  max-width: 580px; margin: 0 auto 34px; font-size: clamp(15.5px, 1.4vw, 17px); color: var(--fg-3); line-height: 1.65;
}

/* ---------- demo form ---------- */
.form {
  display: grid; grid-template-columns: minmax(0, 320px) auto;
  gap: 10px; justify-content: center; align-items: start;
  min-height: 96px;  /* reserves space for the success swap: no layout shift */
}
.form input {
  height: 46px; padding: 0 18px; font: inherit; font-size: 14px;
  border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  background: var(--paper); color: var(--fg-1); width: 100%;
  transition: border-color var(--dur-2) var(--ease-out);
}
.form input:focus { outline: none; border-color: var(--fg-4); }
.form input::placeholder { color: var(--fg-4); }
.form.invalid input { border-color: var(--danger); }
.form .pill { height: 46px; }
.form-note, .form-done { grid-column: 1 / -1; text-align: center; font-size: 12.5px; color: var(--fg-4); margin-top: 2px; }
/* validation and retry notes matter (a missed retry is a lost lead);
   they get the danger color, not the muted neutral */
.form.invalid .form-note { color: var(--danger); }
.form-done { color: var(--fg-2); font-weight: 550; }
.form.done input, .form.done .pill, .form.done .form-note { display: none; }
.form.done .form-done { display: block; font-size: 15px; }
.gold-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--gold); color: var(--carbon); font-size: 12px; font-weight: 700;
  margin-right: 6px; vertical-align: -4px;
}

/* ---------- stage profile (the signature) ---------- */
.profile-wrap { position: relative; margin-top: clamp(44px, 7vh, 76px); height: 150px; color: var(--border-strong); }
.profile { width: 100%; height: 100%; display: block; }
/* dash values are fractions of pathLength="1", so the draw-in always spans
   the whole line no matter how wide the screen stretches it */
.profile-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.6s var(--ease-out) 300ms forwards; }
/* narrow screens ride the short ridgeline, wide screens the long one */
.profile-far { display: none; }
@media (min-width: 1100px) {
  .profile-near { display: none; }
  .profile-far { display: block; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
.profile-dot {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 3px rgba(255, 194, 51, 0.25);
  top: 0; left: 0; opacity: 0; transition: opacity 600ms var(--ease-out);
}
.profile-dot.on { opacity: 1; }
.hero .profile-wrap { margin-left: calc(var(--inset) * -1); margin-right: calc(var(--inset) * -1); }

/* ---------- ops ticker ---------- */
.ticker {
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  overflow: hidden; white-space: nowrap; padding: 14px 0;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker-track { display: inline-flex; gap: 52px; padding-right: 52px; animation: tick 46s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track span { font-family: var(--font-mono); font-size: 12px; color: var(--fg-4); }
.ticker-track b { color: var(--fg-2); font-weight: 550; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- sections: full-bleed bands, content held by --inset ---------- */
.section { padding: clamp(80px, 11vh, 128px) var(--inset); }
/* the nav floats over the frame; without this, anchor jumps land the
   section heading underneath it */
#product, #platform, #contact { scroll-margin-top: calc(var(--gutter) + 76px); }
.section + .section:not(.section-band):not(.section-dark) { border-top: 1px solid var(--border); }
.section-band {
  /* a rounded card like the vignette fields, not a full-bleed stripe;
     the padding compensates so content stays aligned with other sections.
     the max() floor matters on phones, where the inset shrinks toward the
     20px margin and the computed padding would otherwise collapse to 2px */
  margin-inline: 20px;
  border-radius: var(--r-4);
  padding-inline: max(20px, calc(var(--inset) - 20px));
  background-image:
    var(--grain-light),
    radial-gradient(70% 90% at 88% -4%, rgba(255, 194, 51, 0.18), transparent 55%),
    radial-gradient(60% 80% at 0% 104%, rgba(76, 141, 255, 0.14), transparent 55%),
    linear-gradient(180deg, #F4F5F7, #F0F1F5);
}
.section-band + .section { border-top: none !important; }
.section-copy { max-width: 620px; }
.section-copy h2 { font-size: clamp(27px, 3.4vw, 40px); line-height: 1.1; margin-bottom: 18px; }
.section-copy p { color: var(--fg-3); max-width: 56ch; }
.section-copy p + p { margin-top: 12px; }
.kicker { color: var(--fg-1) !important; font-weight: 550; }
.mini-cta { margin-top: 26px; }
.mini-cta a { font-size: 14px; font-weight: 550; color: var(--fg-1); text-decoration: none; border-bottom: 1px solid var(--border-strong); padding-bottom: 2px; transition: border-color var(--dur-2) var(--ease-out); }
.mini-cta a:hover { border-color: var(--fg-2); }

.section-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.section-split.flip .section-copy { order: 2; }
.section-split.flip .vignette { order: 1; }

/* ---------- scroll reveals ---------- */
html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
html.js .reveal.in { opacity: 1; transform: none; }

/* ---------- hub diagram (pain): the team around one record ---------- */
.hub { position: relative; width: 100%; max-width: 470px; aspect-ratio: 1; margin: 0 auto; }
.hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.hub-lines line { stroke: var(--border-strong); }
.chip {
  display: inline-block; font-size: 12.5px; color: var(--fg-3);
  border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 6px 14px; background: var(--raised); white-space: nowrap;
}
.hub-chip { position: absolute; transform: translate(-50%, -50%); z-index: 1; }
/* dots ride beneath the chips and the card, so they surface and dive */
.hub .fly-dot { z-index: 0; }
.hub-chip:nth-of-type(1) { left: 50%; top: 12%; }
.hub-chip:nth-of-type(2) { left: 83%; top: 31%; }
.hub-chip:nth-of-type(3) { left: 83%; top: 69%; }
.hub-chip:nth-of-type(4) { left: 50%; top: 88%; }
.hub-chip:nth-of-type(5) { left: 17%; top: 69%; }
.hub-chip:nth-of-type(6) { left: 17%; top: 31%; }
.hub-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; }
/* radar ping while the hub broadcasts back out to the roles */
@keyframes hub-ping {
  0% { box-shadow: var(--elev-pop), 0 0 0 0 rgba(255, 194, 51, 0.4); }
  100% { box-shadow: var(--elev-pop), 0 0 0 22px rgba(255, 194, 51, 0); }
}
/* each ring rides with one outbound dot wave (same 950ms, same two beats) */
.record-card.ping { animation: hub-ping 950ms var(--ease-out) 2; }
/* no card around it: the logo itself is the hub, floating on a shadow */
.record-card { display: inline-flex; border-radius: 10px; box-shadow: var(--elev-pop); }
.record-card svg { display: block; border-radius: 10px; }

/* ---------- vignettes (shared) ---------- */
.vignette {
  /* a square panel: four equal sides, the card floating at its centre */
  position: relative; aspect-ratio: 1 / 1; max-width: 560px; margin: 0 auto; width: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(28px, 5vw, 52px);
  /* the ::before smush extends 60px past the box for blur headroom; its
     clip-path already hides that, clip the layout overflow too so the
     page can't pan sideways on phones */
  overflow: clip;
}
.vignette::before {
  /* the smush: saturated blobs melted by blur, clipped to the rounded wash */
  content: ""; position: absolute; inset: -60px;
  background: var(--raised);
  filter: blur(32px) saturate(1.12);
  clip-path: inset(60px round var(--r-4));
  transform: translateZ(0);
}
/* each set piece gets its own smushy field */
.vignette[data-vignette="fit"]::before {
  background:
    radial-gradient(75% 80% at 80% 6%, rgba(255, 194, 51, 0.80), transparent 60%),
    radial-gradient(55% 70% at 102% 52%, rgba(255, 138, 76, 0.55), transparent 56%),
    radial-gradient(70% 80% at -4% 100%, rgba(76, 141, 255, 0.40), transparent 56%),
    linear-gradient(165deg, #F6F3EB, #EEEFF3);
}
.vignette[data-vignette="refill"]::before {
  background:
    radial-gradient(75% 85% at 16% 2%, rgba(76, 141, 255, 0.62), transparent 60%),
    radial-gradient(55% 75% at -6% 64%, rgba(45, 212, 191, 0.45), transparent 56%),
    radial-gradient(65% 85% at 100% 102%, rgba(255, 138, 76, 0.50), transparent 56%),
    linear-gradient(195deg, #EEF2F8, #F0F0F3);
}
.vignette[data-vignette="wear"]::before {
  background:
    radial-gradient(75% 85% at 86% 4%, rgba(45, 212, 191, 0.58), transparent 60%),
    radial-gradient(65% 80% at -4% 34%, rgba(255, 194, 51, 0.52), transparent 56%),
    radial-gradient(70% 80% at 52% 112%, rgba(76, 141, 255, 0.35), transparent 56%),
    linear-gradient(160deg, #EEF4F2, #F0F0F3);
}
.vignette::after {
  /* grain + a gloss highlight skating across the top edge of the wash */
  content: ""; position: absolute; inset: 0; border-radius: var(--r-4); pointer-events: none;
  background-image: linear-gradient(178deg, rgba(255, 255, 255, 0.4), transparent 26%), var(--grain-light);
}
.vcard {
  /* a veil, not a card: the field shows straight through (pure alpha, no
     backdrop-filter: that's both the reference look and the cheap path) */
  width: 100%; max-width: 470px; margin: 0 auto; position: relative;
  background: rgba(255, 255, 255, 0.28);
  border: 4px solid rgba(255, 255, 255, 0.55); border-radius: 22px;
  box-shadow: 0 30px 70px -32px rgba(20, 21, 26, 0.18);
  padding: 18px 20px 20px; overflow: hidden;
}
.vcard-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 600; color: var(--fg-1);
  padding-bottom: 12px; border-bottom: 1px solid rgba(19, 21, 26, 0.08); margin-bottom: 4px;
}
.vtag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); border: 1px solid rgba(19, 21, 26, 0.12); border-radius: var(--r-pill); padding: 2px 8px; }
.vrow { display: flex; align-items: center; gap: 10px; padding: 11px 2px; border-bottom: 1px solid rgba(19, 21, 26, 0.07); font-size: 13px; }
.vrow:last-child { border-bottom: none; }
.vrow-fit { border-bottom: none; }
.vk { color: var(--fg-2); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vv { font-size: 12.5px; color: var(--fg-1); }
.vv i { font-style: normal; color: var(--fg-4); margin-left: 4px; }
.vcols { display: flex; justify-content: space-between; font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-4); padding: 8px 2px 4px; }
.vdivider { height: 1px; background: rgba(19, 21, 26, 0.08); margin: 2px -20px; }
.vchip {
  font-size: 9.5px; letter-spacing: 0.06em; font-weight: 650; text-transform: uppercase;
  border-radius: var(--r-pill); padding: 3px 9px; white-space: nowrap;
}
.vchip-pending { color: var(--info); background: color-mix(in oklab, var(--info) 11%, transparent); text-transform: none; letter-spacing: 0; font-weight: 550; font-size: 11px; }
.vchip-drift { color: var(--warning); background: color-mix(in oklab, var(--warning) 13%, transparent); }
.vchip-ok { color: var(--success); background: color-mix(in oklab, var(--success) 11%, transparent); text-transform: none; letter-spacing: 0; }
.vchip-short { color: var(--warning); background: color-mix(in oklab, var(--warning) 13%, transparent); font-family: var(--font-mono); }
.vchip-warn { color: var(--warning); background: color-mix(in oklab, var(--warning) 13%, transparent); }
.vchip-danger { color: var(--danger); background: color-mix(in oklab, var(--danger) 10%, transparent); }
.vchip-uci { color: var(--info); background: color-mix(in oklab, var(--info) 11%, transparent); }
.vapprove {
  font: inherit; font-size: 11.5px; font-weight: 600; cursor: default;
  border: none; border-radius: var(--r-pill); padding: 5px 12px;
  background: var(--action); color: var(--paper);
}

/* fit vignette: default (no JS) is the FINAL state: 740, drift on 2+3,
   re-measured on 1, the proposal sub-row gone */
html:not(.js) [data-vignette="fit"] [data-proposal] { display: none; }
html:not(.js) [data-vignette="fit"] [data-bike="1"] [data-drift] { opacity: 0; }
/* the proposal sub-row slides open at state 1, closes again on approval */
.vsub {
  display: flex; align-items: center; gap: 8px; padding: 0 2px;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 380ms var(--ease-out), opacity 300ms var(--ease-out), padding 380ms var(--ease-out);
}
[data-vignette="fit"][data-state="1"] .vsub { max-height: 48px; opacity: 1; padding: 9px 2px 13px; }
/* on approval the statuses land row by row: re-measured, drift, drift */
html.js [data-vignette="fit"] [data-drift],
html.js [data-vignette="fit"] [data-fixed] { opacity: 0; transform: scale(0.85); }
[data-vignette="fit"] .vchip { transition: opacity 340ms var(--ease-spring), transform 340ms var(--ease-spring); }
html.js [data-vignette="fit"][data-state="2"] [data-bike="1"] [data-fixed],
html.js [data-vignette="fit"][data-state="2"] [data-bike="2"] [data-drift],
html.js [data-vignette="fit"][data-state="2"] [data-bike="3"] [data-drift] { opacity: 1; transform: none; }
[data-vignette="fit"][data-state="2"] [data-bike="2"] [data-drift] { transition-delay: 200ms; }
[data-vignette="fit"][data-state="2"] [data-bike="3"] [data-drift] { transition-delay: 400ms; }
.chip-swap { display: grid; }
.chip-swap > * { grid-area: 1 / 1; justify-self: end; }
/* the approval press + the value taking the change */
.vapprove { transition: transform 160ms var(--ease-out), background 160ms var(--ease-out); }
.vapprove.pressed { transform: scale(0.92); background: var(--success); }
.vv { display: inline-block; }
.vv-bump { animation: vbump 560ms var(--ease-spring); }
@keyframes vbump { 30% { transform: scale(1.14); color: var(--success); } }

/* refill vignette: default (no JS) shows full counts + OK, bar hidden */
[data-vignette="refill"] [data-short] { display: none; }
html.js [data-vignette="refill"] [data-short] { display: inline-flex; }
html.js [data-vignette="refill"] [data-ok] { display: none; }
[data-vignette="refill"] .vrow.done [data-short] { display: none; }
html.js [data-vignette="refill"] .vrow.done [data-ok] { display: inline-flex; animation: chippop 380ms var(--ease-spring); }
@keyframes chippop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
.vbar {
  /* above the fly-dots (z 5): the refill dots are born at the Service Course
     chip inside this bar, so they must rise out from behind it, not smear
     over its text */
  position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 6;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--action); color: var(--paper);
  border-radius: var(--r-2); padding: 9px 8px 9px 14px;
  box-shadow: var(--elev-pop); font-size: 12px;
}
html.js .vbar { opacity: 0; transform: translateY(140%); transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-spring); }
/* visible while armed (1); at state 2 the click has been accepted and the
   bar sinks away for good while the stock flows in */
html.js [data-vignette="refill"][data-state="1"] .vbar { opacity: 1; transform: none; }
html:not(.js) .vbar { display: none; }
[data-vignette="refill"] .vcard { padding-bottom: 64px; }
.vbar-label b { color: var(--gold); font-weight: 600; }
.vbar-btn {
  background: var(--paper); color: var(--action); font-weight: 650; font-size: 12px;
  border-radius: var(--r-1); padding: 6px 14px;
  transition: transform 160ms var(--ease-out);
}
.vbar-btn.pressed { transform: scale(0.92); }
/* the demo cursor that walks in and presses Refill */
.vcursor {
  position: absolute; z-index: 7; opacity: 0; pointer-events: none;
  transform-origin: 4px 3px; /* press pivots on the pointer tip */
  filter: drop-shadow(0 2px 3px rgba(19, 21, 26, 0.28));
}
.fly-dot {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  margin: -3.5px 0 0 -3.5px; /* left/top mark the path; center the dot on it */
  background: var(--action); z-index: 5; pointer-events: none;
}

/* wear vignette: bars fill, the chain flags, the swap resets it */
.wbar { width: 96px; height: 5px; border-radius: 3px; background: rgba(19, 21, 26, 0.08); overflow: hidden; flex: none; }
.wfill { display: block; height: 100%; border-radius: 3px; background: var(--success); transition: width 900ms var(--ease-out), background 400ms var(--ease-out); }
.wfill-warn { background: var(--warning); }
.wfill-danger { background: var(--danger); }
.wnum { text-align: right; }
/* fixed columns so every bar and percentage lines up across the rows;
   the status chip sits beside the part name and never shifts the bars */
.wrow { display: grid; grid-template-columns: minmax(0, 1fr) auto 96px 40px; }
.wrow > * { grid-row: 1; }
.wrow .chip-swap { grid-column: 2; }
.wrow .wbar { grid-column: 3; }
.wrow .wnum { grid-column: 4; }
.wv-warn { color: var(--warning); }
.wv-danger { color: var(--danger); }
.wrow.swapped .wfill-danger { background: var(--success); }
.wrow.swapped .wv-danger { color: var(--success); }
html.js [data-vignette="wear"] [data-flag],
html.js [data-vignette="wear"] [data-swapped] { opacity: 0; transform: scale(0.85); }
[data-vignette="wear"] .vchip { transition: opacity 340ms var(--ease-spring), transform 340ms var(--ease-spring); }
html.js [data-vignette="wear"][data-state="1"] [data-flag] { opacity: 1; transform: none; }
html.js [data-vignette="wear"][data-state="2"] [data-swapped] { opacity: 1; transform: none; }
html:not(.js) [data-vignette="wear"] [data-swapped] { opacity: 0; }

/* ---------- three-up: soft cards ---------- */
.threeup { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); }
.threeup-col {
  background: var(--raised); border-radius: var(--r-3);
  padding: clamp(24px, 2.6vw, 34px);
  display: flex; flex-direction: column;
}
.threeup-col h3 { font-size: 17px; margin-bottom: 10px; }
.threeup-col p { font-size: 13.5px; color: var(--fg-3); }
.frag {
  /* wrap instead of squeezing: on narrow cards the label keeps its line
     and the value + chip drop to the next, nothing forces the card wide */
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: auto; padding-top: 22px;
}
.frag .vk { font-size: 12.5px; flex: 1 1 auto; }
.frag .vv { font-size: 11px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- platform map (on the tinted band) ---------- */
.map { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 20px); margin-top: 56px; }
.map-cell {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-3);
  padding: 24px 24px 28px;
}
html.js .map-cell > * { opacity: 0; transform: translateY(8px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
html.js .map-cell.in > * { opacity: 1; transform: none; }
.map-cell img { opacity: 0.75; margin-bottom: 14px; }
.map-cell h3 { font-size: 14.5px; margin-bottom: 8px; }
.map-cell p { font-size: 12.5px; color: var(--fg-3); line-height: 1.55; }

/* ---------- onboarding steps: a connected rail ---------- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); margin-top: 56px; counter-reset: step; }
.steps li { position: relative; padding-top: 26px; }
.steps li::before {
  /* the rail */
  content: ""; position: absolute; top: 5px; left: 0; right: calc(-1 * clamp(28px, 4vw, 56px)); height: 1px; background: var(--border-strong);
}
.steps li:last-child::before { right: 0; }
.steps li::after {
  /* the stop on the rail */
  content: ""; position: absolute; top: 0; left: 0; width: 11px; height: 11px;
  border-radius: 50%; background: var(--panel); border: 1.5px solid var(--fg-1);
}
.step-n { display: block; font-size: 12px; color: var(--gold-deep); font-weight: 600; margin-bottom: 12px; }
.steps h3 { font-size: 16.5px; margin-bottom: 8px; }
.steps p { font-size: 13.5px; color: var(--fg-3); }

/* ---------- personas: an editorial manifest, hairlines not boxes ---------- */
.personas { margin-top: 56px; border-top: 1px solid var(--border); }
.persona {
  display: grid; grid-template-columns: 260px minmax(0, 1fr);
  gap: 10px 24px; align-items: baseline;
  padding: 17px 2px; border-bottom: 1px solid var(--border);
}
.persona h3 { font-size: 15px; display: flex; align-items: center; gap: 11px; }
.persona h3 img { opacity: 0.8; align-self: center; }
.persona p { font-size: 13.5px; color: var(--fg-3); line-height: 1.55; max-width: 64ch; }
@media (max-width: 680px) { .persona { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- craft & stats ---------- */
.craft { list-style: none; margin-top: 36px; max-width: 640px; }
.craft li { padding: 14px 0 14px 26px; border-bottom: 1px solid var(--border); position: relative; font-size: 14.5px; color: var(--fg-2); }
.craft li::before { content: ""; position: absolute; left: 2px; top: 23px; width: 8px; height: 1.5px; background: var(--fg-1); }
.craft li:last-child { border-bottom: none; }
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  margin: 56px 0 8px; padding: clamp(28px, 3vw, 40px);
  border-radius: var(--r-3);
  background-image:
    linear-gradient(178deg, rgba(255, 255, 255, 0.7), transparent 30%),
    var(--grain-light),
    radial-gradient(80% 130% at 92% 108%, rgba(255, 194, 51, 0.22), transparent 55%),
    radial-gradient(70% 120% at 2% -8%, rgba(76, 141, 255, 0.16), transparent 55%),
    linear-gradient(180deg, #F4F5F7, #EFF0F4);
  border: 1px solid rgba(255, 255, 255, 0.7);
}
.stat-n { display: block; font-size: clamp(34px, 4vw, 52px); font-weight: 600; color: var(--fg-1); letter-spacing: -0.02em; }
.stat-k { font-size: 12px; color: var(--fg-4); }
.calendar-line { margin-top: 44px; font-size: 15px; font-weight: 550; color: var(--fg-1); }

/* ---------- faq ---------- */
.faq { margin-top: 40px; }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;
  padding: 18px 2px; font-size: 15px; font-weight: 600; color: var(--fg-1);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--fg-4); font-weight: 400; font-size: 18px; transition: transform var(--dur-3) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 2px 20px; color: var(--fg-3); font-size: 14px; max-width: 58ch; }

/* ---------- closing: the carbon band ---------- */
.section-dark {
  position: relative; background: var(--carbon); overflow: hidden;
}
.section-dark > * { position: relative; z-index: 1; }
.section-dark::before {
  /* the smushy dawn: saturated ember and gold melted over carbon, cobalt sky */
  content: ""; position: absolute; inset: -100px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(820px 540px at 50% 116%, rgba(255, 138, 76, 0.78), transparent 64%),
    radial-gradient(700px 440px at 34% 112%, rgba(255, 194, 51, 0.55), transparent 60%),
    radial-gradient(620px 420px at 70% 120%, rgba(220, 56, 56, 0.42), transparent 58%),
    radial-gradient(940px 560px at 90% -12%, rgba(76, 141, 255, 0.42), transparent 62%),
    radial-gradient(700px 440px at 2% -8%, rgba(45, 212, 191, 0.24), transparent 58%);
  filter: blur(44px) saturate(1.15);
  clip-path: inset(100px);
  transform: translateZ(0);
}
.section-dark::after {
  /* heavy grain: the texture IS the look */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.9;
  background-image: var(--grain-dark);
}
.closing { text-align: center; padding-top: clamp(90px, 13vh, 150px); padding-bottom: clamp(90px, 13vh, 150px); }
.closing .section-copy { margin: 0 auto; }
.closing-h { font-size: clamp(30px, 4.4vw, 52px); color: var(--paper); }
.section-dark .section-copy p { color: rgba(252, 252, 253, 0.62); }
.form-center { margin-top: 38px; }
.section-dark .form input { background: rgba(252, 252, 253, 0.06); border-color: rgba(252, 252, 253, 0.22); color: var(--paper); }
.section-dark .form input::placeholder { color: rgba(252, 252, 253, 0.45); }
.section-dark .form input:focus { border-color: rgba(252, 252, 253, 0.5); }
.section-dark .pill-ink { background: var(--paper); color: var(--carbon); }
.section-dark .pill-ink:hover { background: #fff; }
.section-dark .form-note { color: rgba(252, 252, 253, 0.45); }
.section-dark .form-done { color: var(--paper); }

/* ---------- footer: the finish line ---------- */
.footer {
  padding: clamp(52px, 7vh, 76px) var(--inset) 40px;
  background: var(--panel);
  border-top: 1px solid var(--border);
}
.footer-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 32px 64px; flex-wrap: wrap;
}
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer-brand svg { border-radius: 5px; }
.footer-line { font-size: 13px; color: var(--fg-3); max-width: 32ch; }
.footer-nav { display: grid; gap: 11px; justify-items: start; }
.footer-nav a {
  font-size: 13.5px; font-weight: 500; color: var(--fg-3); text-decoration: none;
  transition: color var(--dur-2) var(--ease-out);
}
.footer-nav a:hover { color: var(--fg-1); }

/* the hero ridge, returned as the seam between the team and the fine print */
.footer-ridge { color: var(--border-strong); margin: 34px 0 24px; }
.footer-ridge svg { display: block; width: 100%; height: clamp(44px, 5vw, 60px); }

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px 24px; flex-wrap: wrap;
}
.footer-copy { font-size: 11.5px; color: var(--fg-4); }
.footer-social { display: flex; gap: 16px; }
.footer-social a { display: inline-flex; color: var(--fg-4); transition: color var(--dur-2) var(--ease-out); }
.footer-social a:hover { color: var(--gold-deep); }

/* ---------- responsive ---------- */
@media (max-width: 1060px) {
  .map { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
}
@media (max-width: 820px) {
  /* minmax(0,) so the square vignette's transferred intrinsic width
     can't blow the stacked column past the viewport */
  .section-split { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .section-split.flip .section-copy { order: 0; }
  .section-split.flip .vignette { order: 1; }
  .threeup, .steps { grid-template-columns: 1fr; }
  /* no rail when the steps stack, and no orphaned stops either;
     the numbered .step-n carries the sequence */
  .steps li::before, .steps li::after { display: none; }
  .steps li { padding-top: 0; }
  .nav-links { display: none; }
}
@media (max-width: 560px) {
  .form { grid-template-columns: 1fr; }
  .footer-top { flex-direction: column; gap: 26px; }
  .footer-nav { grid-auto-flow: column; justify-content: start; gap: 22px; }
  .hero { padding-top: 76px; }
  /* small enough that the three forced .line breaks each fit the width */
  .display { font-size: clamp(30px, 8.4vw, 42px); }
  .section { padding-block: 64px; }
  .map { grid-template-columns: 1fr; }
  /* the desktop 56px block-starts and roomy cells read as holes on a
     phone; pull the content back together */
  .map, .steps, .personas, .stats { margin-top: 36px; }
  .map-cell { padding: 18px 18px 22px; }
  .map-cell img { margin-bottom: 10px; }
  /* the wear card: a tighter field and slimmer fixed columns so the
     part name, bar and percentage all survive the narrow card */
  .vignette { padding: 18px; }
  .vcard { padding: 16px 14px; }
  .wbar { width: 56px; }
  .wrow { grid-template-columns: minmax(0, 1fr) auto 56px 36px; gap: 8px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .ticker-track { animation: none; }
  .profile-line { stroke-dashoffset: 0; animation: none; }
  .profile-dot { display: none; }
}