/* ============================================================
   Bloodstock AI - marketing site
   Built to the Brand Sheet (v1, Aug 2026) and BloodStock-AI-Design-Tokens.md.
   Reference standard named in the tokens: Mercury / Linear / Sotheby's.
   Restraint, hierarchy earned by importance, colour as signal only.

   Brand rules honoured here:
     - Paper ground, Ink text, Teal as the single accent
     - Inter, weights 400 and 500 ONLY (no 600, no 700, no bold)
     - sentence case everywhere; micro-labels uppercase + tracked
     - tabular figures on every number
     - NO drop shadow, glow, gradient or outline anywhere
     - the wordmark is artwork, never typed
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

:root {
  /* brand */
  --brand:      #0F6E56;
  --brand-mid:  #1D9E75;
  --brand-tint: #E1F5EE;
  --brand-deep: #04342C;
  /* surfaces + text */
  --paper:      #FAF8F4;
  --card:       #FFFFFF;
  --ink:        #141210;
  --ink-2:      #55524C;
  --ink-3:      #85817A;
  --line:       rgba(20, 18, 16, 0.12);
  --line-2:     rgba(20, 18, 16, 0.20);
  /* semantic (meaning only, never decoration) */
  --pos-fg: #3B6D11;  --pos-bg: #EAF3DE;
  --cau-fg: #854F0B;  --cau-bg: #FAEEDA;
  --neu-fg: #444441;  --neu-bg: #F1EFE8;
  --con-fg: #A32D2D;  --con-bg: #FCEBEB;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* anchor targets clear the sticky header */
section[id], footer[id] { scroll-margin-top: 76px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 500;              /* brand: no bold, ever */
  color: var(--ink);
  letter-spacing: -0.021em;
  line-height: 1.12;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(2.4rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.12rem; letter-spacing: -0.012em; line-height: 1.3; }
p, li { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: 500; color: var(--ink); }
img, video, svg { max-width: 100%; }
img { display: block; }
button { font-family: inherit; }
/* every number, everywhere */
.s, .g, .num, .nums, .scale-row, .spec-row .s, td, .t-price { font-variant-numeric: tabular-nums; }

.wrap { width: min(1120px, 100% - 2.75rem); margin: 0 auto; }

/* ---------- micro-label ---------- */
.cap, .cap-dark {
  display: inline-block;
  font-size: 0.688rem; font-weight: 500;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--brand);
}
.cap-dark { color: var(--brand-mid); }

/* ---------- accessibility ---------- */
.skip {
  position: absolute; left: 0; top: -100%; z-index: 200;
  background: var(--brand); color: #fff; padding: 0.7rem 1.2rem; border-radius: 0 0 8px 0;
}
.skip:focus { top: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 3px;
}

/* ---------- masthead ---------- */
.mast {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 248, 244, 0.82);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
}
.mast-in { display: flex; align-items: center; gap: 1rem; height: 60px; }
/* the wordmark is ARTWORK: brand sheet forbids typing it */
.word { display: flex; align-items: center; }
.word img { height: 26px; width: auto; }
.mast nav { display: none; }
.mast nav a {
  position: relative; font-size: 0.875rem; color: var(--ink-2);
  padding: 0.3rem 0.85rem; transition: color 0.18s ease;
}
.mast nav a:hover { color: var(--ink); }
.mast nav a[aria-current="page"] { color: var(--ink); }
.mast nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: -0.15rem;
  height: 1.5px; background: var(--brand); border-radius: 2px;
}

.menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: auto; width: 2.5rem; height: 2.5rem;
  background: none; border: 1px solid var(--line-2); border-radius: 8px;
  color: var(--ink-2); font-size: 1.25rem; line-height: 1; cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.menu-btn:hover { color: var(--ink); border-color: var(--ink-3); }
.menu-btn[aria-expanded="true"] { color: var(--brand); border-color: var(--brand); }
.mast nav.open {
  display: flex; flex-direction: column; gap: 0.1rem;
  position: absolute; top: 100%; right: 1.4rem; min-width: 13rem; padding: 0.5rem 0;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
}
.mast nav.open a { padding: 0.7rem 1.15rem; }
.mast nav.open a[aria-current="page"]::after { left: 1.15rem; right: 1.15rem; bottom: 0.35rem; }
.mast .cta { margin-left: 0.6rem; }
/* no JS means no working toggle, so show the links inline instead */
html:not(.js) .menu-btn { display: none; }
html:not(.js) .mast nav { display: flex; flex-wrap: wrap; margin-left: auto; }
@media (min-width: 900px) {
  .menu-btn { display: none; }
  .mast nav { display: flex; margin-left: auto; }
  .mast .cta { margin-left: 1rem; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-size: 0.9375rem; font-weight: 500;
  padding: 0.72rem 1.35rem; border-radius: 8px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.08s ease;
}
.btn:active { transform: translateY(1px); }
.btn-ink, .btn-cream { background: var(--brand); color: #fff; }
.btn-ink:hover, .btn-cream:hover { background: var(--brand-deep); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-line:hover { border-color: var(--ink-3); background: rgba(20, 18, 16, 0.03); }
.btn-lg { padding: 0.9rem 1.7rem; font-size: 1rem; }
.full { width: 100%; }
.tlink { color: var(--brand); text-decoration: underline; text-underline-offset: 0.16em; }
.tlink:hover { color: var(--brand-mid); }

/* ---------- hero ---------- */
.cine, .overhero { position: relative; }
.cine {
  padding: clamp(4.5rem, 11vw, 8.5rem) 0 clamp(3.5rem, 7vw, 6rem);
  border-bottom: 1px solid var(--line);
}
.cine-in { max-width: 46rem; }
.cine h1 { margin: 1.1rem 0 0; }
.cine .sub {
  margin: 1.5rem 0 0; max-width: 33rem;
  font-size: 1.18rem; line-height: 1.55; color: var(--ink-2);
}
.cine-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.4rem; }
/* quiet fact row: real facts, stated plainly, no decoration */
.hud-strip {
  display: grid; gap: 1px; background: var(--line);
  border-block: 1px solid var(--line); margin-top: clamp(3rem, 6vw, 4.5rem);
}
.hud-strip .h { display: block; background: var(--paper); padding: 1.1rem 0.2rem; font-size: 0.78rem; color: var(--ink-3); }
.hud-strip .h b { display: block; margin-top: 0.3rem; font-size: 0.95rem; font-weight: 500; color: var(--ink); }
@media (min-width: 700px) { .hud-strip { grid-template-columns: repeat(4, 1fr); } .hud-strip .h { padding-inline: 1.3rem; } }
/* retired decorative hero overlay */
.scan, .xov, .kp, .mline, .mlab, .rev, .stage-note { display: none; }

/* ---------- sections ---------- */
.sec { padding: clamp(4rem, 8vw, 6.5rem) 0; }
.sec-white { background: var(--card); border-block: 1px solid var(--line); }
.panel { background: var(--brand-tint); padding: clamp(4rem, 8vw, 6.5rem) 0; }
.sec-head, .sh { max-width: 44rem; margin-bottom: 3rem; }
.sec-head h2, .sh h2 { margin: 0.85rem 0 0.9rem; }
.sec-head p, .sh p { margin: 0; max-width: 34rem; font-size: 1.06rem; color: var(--ink-2); }

.phead { padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(2rem, 4vw, 3rem); }
.phead h1 { margin: 0.9rem 0 0; }
.phead p { margin: 1.3rem 0 0; max-width: 34rem; font-size: 1.12rem; color: var(--ink-2); }

/* ---------- long-form ---------- */
.prose { max-width: 34rem; }
.prose h2 { font-size: 1.5rem; margin: 2.6rem 0 0.8rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 1.1rem; }
.prose ul { margin: 0 0 1.1rem; padding-left: 1.25rem; }
.prose li { margin-bottom: 0.5rem; }
.prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 0.16em; }
.lede { font-size: 1.18rem; line-height: 1.55; color: var(--ink); }

/* ---------- column grids ---------- */
.cols { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.col { background: var(--card); padding: 1.9rem 1.7rem; }
.col .no {
  display: block; font-size: 0.688rem; font-weight: 500; letter-spacing: 0.11em;
  color: var(--brand); margin-bottom: 0.9rem;
}
.col h3 { margin: 0 0 0.55rem; }
.col p { margin: 0; font-size: 0.95rem; color: var(--ink-2); }
@media (min-width: 620px) { .cols, .cols-3, .cols-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .cols   { grid-template-columns: repeat(4, 1fr); }
  .cols-3 { grid-template-columns: repeat(3, 1fr); }
  .cols-2 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- data rows (dense data = bordered rows, not raised cards) ---------- */
.specimen { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1.9rem; }
.spec-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; margin-bottom: 1.2rem; }
.spec-head .lot { display: block; font-size: 0.688rem; font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase; color: var(--brand); margin-bottom: 0.5rem; }
.spec-head h2 { font-size: 1.45rem; }
.spec-grade { text-align: right; }
.spec-grade .g { font-size: 2.5rem; font-weight: 500; color: var(--ink); line-height: 1; }
.spec-grade .gl { font-size: 0.72rem; color: var(--ink-3); }
.spec-rows { border-top: 1px solid var(--line); }
.spec-row { display: flex; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.spec-row .k { flex: 0 0 10.5rem; color: var(--ink); font-weight: 500; }
.spec-row .v { flex: 1; color: var(--ink-2); }
.spec-row .s { flex: 0 0 auto; color: var(--ink); font-weight: 500; }
@media (max-width: 640px) { .spec-row { flex-wrap: wrap; gap: 0.15rem 1rem; } .spec-row .k { flex-basis: 100%; } }

/* ---------- pricing tiers ---------- */
.tiers { display: grid; gap: 1.25rem; }
.tier { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1.9rem 1.7rem; display: flex; flex-direction: column; }
.tier.hot { border-color: var(--brand); }
.tier h3 { margin: 0 0 0.5rem; }
.tier ul { list-style: none; margin: 1.2rem 0; padding: 0; }
.tier li { position: relative; padding-left: 1.4rem; margin-bottom: 0.55rem; font-size: 0.95rem; }
.tier li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.tier .btn { margin-top: auto; align-self: flex-start; }
@media (min-width: 820px) { .tiers { grid-template-columns: repeat(3, 1fr); } }

/* ---------- faq ---------- */
.faq { max-width: 44rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1.5rem;
  padding: 1.15rem 0; font-size: 1.02rem; font-weight: 500; color: var(--ink);
  transition: color 0.18s ease;
}
.faq summary:hover { color: var(--brand); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--brand); font-weight: 400; font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 1.3rem; font-size: 0.98rem; max-width: 34rem; }

/* ---------- founder ---------- */
.founder { display: grid; gap: 1.9rem; align-items: start; }
.founder img { border-radius: 14px; width: 100%; max-width: 300px; }
.founder .quote { font-size: 1.28rem; line-height: 1.45; color: var(--ink); text-wrap: balance; margin: 0 0 0.9rem; }
.founder .who { font-size: 0.875rem; color: var(--ink-3); margin: 0 0 1rem; }
@media (min-width: 760px) { .founder { grid-template-columns: 300px 1fr; gap: 2.6rem; } }

/* ---------- forms ---------- */
.form-block { max-width: 34rem; }
.form-grid { display: grid; gap: 1rem; }
.field label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--ink); margin-bottom: 0.35rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.72rem 0.9rem; font: inherit; font-size: 0.95rem;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--line-2); border-radius: 8px;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.form-note { font-size: 0.875rem; color: var(--ink-3); }
.form-note a { color: var(--brand); text-decoration: underline; }

/* ---------- footer ---------- */
.foot { background: var(--brand-deep); color: rgba(250, 248, 244, 0.72); padding: 3.5rem 0 2rem; }
.foot a { color: rgba(250, 248, 244, 0.72); }
.foot a:hover { color: #fff; }
.foot-grid { display: grid; gap: 2.2rem; margin-bottom: 2.6rem; }
.foot-brand img { height: 24px; width: auto; margin-bottom: 0.9rem; }
.foot h3 { font-size: 0.688rem; font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase; color: var(--brand-mid); margin: 0 0 0.85rem; }
.foot a.fl { display: block; font-size: 0.9rem; padding: 0.22rem 0; transition: color 0.18s ease; }
.foot-bottom { border-top: 1px solid rgba(250, 248, 244, 0.14); padding-top: 1.3rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; font-size: 0.8rem; }
.ig { display: inline-flex; align-items: center; gap: 0.45rem; }
.ig svg { width: 15px; height: 15px; fill: currentColor; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; } }

/* ---------- grade scale ---------- */
.scale { border-top: 1px solid var(--line); }
.scale-row {
  display: flex; align-items: baseline; gap: 1.1rem;
  padding: 0.95rem 0; border-bottom: 1px solid var(--line);
}
.scale-row .g { flex: 0 0 2rem; font-size: 1.32rem; font-weight: 500; color: var(--ink); }
.scale-row .d { flex: 1; font-size: 0.95rem; color: var(--ink-2); }
.scale-row .r { flex: 0 0 auto; font-size: 0.8rem; font-weight: 500; color: var(--brand); }
/* colour carries meaning, so only the top band is tinted */
.scale-row.hot .g { color: var(--brand); }
@media (max-width: 620px) { .scale-row { flex-wrap: wrap; gap: 0.2rem 1.1rem; } .scale-row .d { flex-basis: 100%; order: 3; } }

/* ---------- stats band ---------- */
.nums { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.num { background: var(--card); padding: 1.7rem 1.5rem; }
.num .n { display: block; font-size: 2.1rem; font-weight: 500; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.num .l { display: block; margin-top: 0.4rem; font-size: 0.85rem; color: var(--ink-2); }
@media (min-width: 620px) { .nums { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .nums { grid-template-columns: repeat(4, 1fr); } }

/* ---------- closing band (brand deep green) ---------- */
.close { background: var(--brand-deep); color: rgba(250, 248, 244, 0.78); padding: clamp(4rem, 8vw, 6rem) 0; text-align: center; }
.close h2 { color: #fff; margin: 0.9rem 0 0.9rem; }
.close p { max-width: 34rem; margin: 0 auto; }
.close .btn { margin-top: 2rem; }
.close .btn-ink { background: #fff; color: var(--brand-deep); }
.close .btn-ink:hover { background: var(--brand-tint); }
.close .btn-line { color: #fff; border-color: rgba(250, 248, 244, 0.35); }
.close .btn-line:hover { border-color: #fff; background: rgba(255, 255, 255, 0.06); }

/* ---------- pricing tier meta ---------- */
.t-for { display: block; font-size: 0.688rem; font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase; color: var(--brand); margin-bottom: 0.6rem; }
.t-price { display: block; font-size: 0.9rem; color: var(--ink-3); margin-bottom: 0.4rem; }

/* ---------- misc ---------- */
.updated { font-size: 0.85rem; color: var(--ink-3); margin: 0 0 2rem; }
.field.sp2 { grid-column: 1 / -1; }
@media (min-width: 620px) { .form-grid { grid-template-columns: repeat(2, 1fr); } }
/* explore cards are links */
a.col { display: block; transition: background 0.18s ease; }
a.col:hover { background: var(--brand-tint); }
a.col h3 { color: var(--ink); }

/* ---------- reveal ---------- */
.rv { opacity: 1; transform: none; }
.js .rv { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.js .rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rv, .js .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn:active { transform: none; }
}

.tilt figcaption b { display: block; font-size: 0.85rem; font-weight: 500; }
.tilt figcaption span { font-size: 0.68rem; opacity: 0.9; }

/* champions rail: sideways-scrolling cards that also drift on their own */
.champs { padding: clamp(4rem,8vw,6rem) 0 0; background: var(--paper); overflow: hidden; }
.champs h2 { margin-top: 0.9rem; }
.champs-sub { margin: 1.1rem 0 0; max-width: 34rem; color: var(--ink-2); }
.champs-track {
  display: flex; gap: 1rem; margin-top: 2.4rem; padding: 0.2rem max(1.4rem, calc((100vw - 1120px) / 2)) 1.4rem;
  overflow-x: auto; scrollbar-width: none;
  cursor: grab;
}
.champs-track::-webkit-scrollbar { display: none; }
.champ {
  flex: 0 0 clamp(16rem, 24vw, 19.5rem);
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 1.5rem 1.4rem 1.4rem;
  transition: border-color .25s ease, transform .25s ease;
}
.champ:hover { border-color: var(--brand); transform: translateY(-3px); }
.champ-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.chip {
  font-size: 0.62rem; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 999px; padding: 0.18rem 0.6rem;
}
.chip-k { color: var(--brand); border-color: var(--brand); }
.champ h3 { margin-top: 0.9rem; font-size: 1.25rem; }
.champ-stat { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 1rem; border-top: 1px solid var(--line); padding-top: 0.9rem; }
.champ-stat b { font-weight: 500; font-size: 2.1rem; color: var(--brand); font-variant-numeric: tabular-nums; line-height: 1; }
.champ-stat span { font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.champ p { margin: 0.85rem 0 0; font-size: 0.86rem; line-height: 1.55; color: var(--ink-2); }
.champs-note { font-size: 0.78rem; color: var(--ink-3); padding-bottom: clamp(3rem,6vw,4.5rem); margin-top: 0.4rem; }

/* stats band: full bleed, the start of one continuous dark close
   (stats -> sale rings -> early access -> footer) so nothing clashes */
.stats {
  background: var(--brand-deep); color: rgba(250,248,244,0.8);
  padding: clamp(4rem,8vw,5.5rem) 0;
}

/* the sale rings of the world: interactive globe on the dark band */
.rings { background: var(--brand-deep); color: rgba(250,248,244,0.78); padding: clamp(3rem,6vw,5rem) 0 clamp(4rem,8vw,6rem); }
.rings h2 { color: #fff; margin-top: 0.9rem; }
.rings-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 940px) { .rings-grid { grid-template-columns: 0.9fr 1.1fr; } }
.rings-copy p { max-width: 30rem; }
.rings-list { margin: 1.8rem 0 0; }
.rings-list div { padding: 0.75rem 0; border-top: 1px solid rgba(250,248,244,0.16); }
.rings-list dt { font-size: 0.688rem; font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase; color: var(--brand-mid); }
.rings-list dd { margin: 0.3rem 0 0; font-size: 0.92rem; line-height: 1.55; }
.rings-note { font-size: 0.82rem; color: rgba(250,248,244,0.5); margin-top: 1.4rem; }
.rings-stage { position: relative; aspect-ratio: 1; max-width: 34rem; margin: 0 auto; width: 100%; }
#globe-canvas { width: 100%; height: 100%; display: block; touch-action: pan-y; }
.globe-tip {
  position: absolute; transform: translate(-50%, -100%);
  background: rgba(4,52,44,0.92); color: #fff; white-space: nowrap;
  font-size: 0.78rem; padding: 0.35rem 0.7rem; border-radius: 8px;
  border: 1px solid rgba(29,158,117,0.5);
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.globe-tip.on { opacity: 1; }
.stats h2 { color: #fff; margin-top: 0.9rem; }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 2rem; margin: 3.5rem 0 0; }
@media (min-width: 900px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat { border-top: 1px solid rgba(250,248,244,0.24); padding-top: 1.1rem; opacity: 0; transform: translateY(30px); transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.stat.in { opacity: 1; transform: none; }
.stat dd { margin: 0; }
.stat-v { display: block; font-size: clamp(2.6rem,5vw,4rem); font-weight: 500; color: #fff; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat-l { display: block; font-size: 0.85rem; color: rgba(250,248,244,0.66); margin-top: 0.6rem; }

/* grades */
.grades { padding: clamp(4rem,8vw,6rem) 0; }
.grades h2 { margin-top: 0.9rem; }
.grades .scale { margin-top: 2.6rem; max-width: 52rem; }
.grades-note { margin-top: 1.6rem; font-size: 0.85rem; color: var(--ink-3); max-width: 34rem; }

/* gait analysis stepper: walk once, then arrows step through the reads */
.gait { padding: clamp(4rem,8vw,6rem) 0; background: var(--card); border-block: 1px solid var(--line); }
.gait h2 { margin-top: 0.9rem; }
.gait-sub { margin: 1.1rem 0 2rem; max-width: 34rem; color: var(--ink-2); }
/* a quiet line of dots; the active one stretches into a pill */
.gait-dots { display: flex; align-items: center; gap: 0.55rem; margin-top: 1.2rem; }
.gait-dots button {
  width: 0.45rem; height: 0.45rem; padding: 0; border: 0; border-radius: 999px;
  cursor: pointer; background: var(--line-2);
  transition: background .3s ease, width .3s cubic-bezier(.16,1,.3,1);
}
.gait-dots button:hover { background: var(--ink-3); }
.gait-dots button.on { width: 1.6rem; background: var(--brand); }
.stage {
  position: relative; border-radius: 16px; overflow: hidden;
  background: var(--brand-deep); aspect-ratio: 16/9;
  /* fit on one screen: never taller than the viewport minus the heading */
  max-width: min(62rem, calc((100vh - 21rem) * 16 / 9));
  min-width: min(100%, 34rem);
}
.stage video { width: 100%; height: 100%; object-fit: cover; display: block; }
#gait-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.m-line { opacity: 0; animation: mline .45s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes mline { to { opacity: 1; } }
.m-line line, .m-line path, .m-line polyline { stroke: #E1F5EE; stroke-width: 0.28; stroke-dasharray: 1.1 0.7; fill: none; }
.m-line line.solid { stroke-dasharray: none; }
.m-line circle { fill: #1D9E75; stroke: #fff; stroke-width: 0.12; }
.m-line text { fill: #fff; font-size: 1.75px; font-family: var(--sans); paint-order: stroke; stroke: rgba(4,52,44,0.85); stroke-width: 0.45; }
.gait-hud {
  position: absolute; left: 1rem; bottom: 1rem; max-width: 60%;
  background: rgba(4,52,44,0.82); backdrop-filter: blur(6px); color: #fff;
  border-radius: 10px; padding: 0.55rem 0.9rem; font-size: 0.85rem;
  opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.gait-hud.on { opacity: 1; transform: none; }
.gait-caption { margin-top: 0.9rem; font-size: 0.85rem; color: var(--ink-3); }

/* orbit info panel */
.stage video { object-fit: fill; }   /* SVG coords map 1:1 to the frame */
.orbit-panel {
  position: absolute; right: 1rem; top: 1rem; bottom: 1rem; width: 15rem;
  background: rgba(4,52,44,0.88); backdrop-filter: blur(8px); color: #fff;
  border-radius: 12px; padding: 1.1rem 1.2rem;
  transform: translateX(110%); transition: transform .5s cubic-bezier(.16,1,.3,1);
  overflow: auto;
}
.orbit-panel.on { transform: none; }
.orbit-panel b { display: block; font-weight: 500; font-size: 0.95rem; margin-bottom: 0.7rem; }
.orbit-panel ul { list-style: none; margin: 0; padding: 0; }
.orbit-panel li { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.45rem 0; border-bottom: 1px solid rgba(250,248,244,0.16); font-size: 0.8rem; }
.orbit-panel li span { color: rgba(250,248,244,0.7); }
.orbit-panel li i { font-style: normal; font-weight: 500; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  .orbit-panel { width: 11rem; font-size: 0.9em; }
}



/* early access */
.close .cap-dark { color: var(--brand-mid); }
.close h2 { color: #fff; }
.close p { color: rgba(250,248,244,0.78); }
.ea-form { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin: 2rem auto 0; max-width: 34rem; }
.ea-form .field { flex: 1 1 12rem; margin: 0; }
.ea-form input {
  width: 100%; padding: 0.8rem 1rem; font: inherit; font-size: 0.95rem; border-radius: 8px;
  border: 1px solid rgba(250,248,244,0.28); background: rgba(255,255,255,0.08); color: #fff;
}
.ea-form input::placeholder { color: rgba(250,248,244,0.55); }
.btn-light { background: #fff; color: var(--brand-deep); }
.btn-light:hover { background: var(--brand-tint); }
.ea-note { margin-top: 1rem; font-size: 0.9rem; color: var(--brand-mid); min-height: 1.2em; }

/* footer brand mark */
.foot-brand img { height: 24px; width: auto; margin-bottom: 0.9rem; }

/* ============================================================
   MARKETING HERO v3 - the app on devices.
   Store-push layout: copy + store badges left, laptop and phone
   mockups right with the app UI built in HTML (no screenshots).
   Brand tokens only. The device frames use neutral ink tones,
   which is hardware, not palette.
   ============================================================ */

.mh { padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem); overflow: hidden; }
.mh-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 980px) { .mh-grid { grid-template-columns: 0.92fr 1.08fr; gap: 2.5rem; } }

.mh-copy .cap { margin-bottom: 0.9rem; }
.mh h1 { font-size: clamp(2.6rem, 5.6vw, 4.3rem); line-height: 1.02; letter-spacing: -0.03em; }
.h1-line { display: block; }
.mh-sub { margin: 1.4rem 0 0; max-width: 30rem; font-size: 1.13rem; line-height: 1.6; color: var(--ink-2); }
.mh-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.mh-note { margin: 1.4rem 0 0; font-size: 0.9rem; color: var(--ink-3); }
.mh-illus { margin-top: 2.2rem; font-size: 0.78rem; color: var(--ink-3); }

/* store badges */
.store {
  display: inline-flex; align-items: center; gap: 0.7rem;
  background: var(--ink); color: #fff; border-radius: 12px;
  padding: 0.6rem 1.1rem 0.6rem 0.9rem;
  transition: background 0.18s ease, transform 0.08s ease;
}
.store:hover { background: var(--brand-deep); }
.store:active { transform: translateY(1px); }
.store svg { width: 1.7rem; height: 1.7rem; fill: currentColor; flex: none; }
.store span { display: flex; flex-direction: column; line-height: 1.15; }
.store i { font-style: normal; font-size: 0.62rem; opacity: 0.75; letter-spacing: 0.02em; color: #fff; }
.store b { font-weight: 500; font-size: 1.02rem; color: #fff; }

/* ---------- devices ---------- */
.devices {
  position: relative; perspective: 1200px;
  display: flex; justify-content: center; align-items: flex-end;
  min-height: 24rem;
}

/* laptop */
.laptop {
  width: min(34rem, 92%);
  transition: transform 0.25s ease;
  transform-style: preserve-3d;
}
.lap-screen {
  background: var(--card);
  border: 1px solid rgba(20, 18, 16, 0.9);
  border-bottom-width: 0;
  border-radius: 14px 14px 0 0;
  box-shadow: inset 0 0 0 3px #141210, inset 0 0 0 4px #3a3733;
  padding: 0.9rem 0.9rem 1rem;
  min-height: 17.5rem;
}
.lap-base {
  height: 0.85rem;
  background: linear-gradient(#e8e4dd, #cfcac1);
  border-radius: 0 0 14px 14px;
  border: 1px solid rgba(20, 18, 16, 0.25); border-top: 0;
}
.lap-base::after {
  content: ""; display: block; width: 18%; height: 0.32rem; margin: 0 auto;
  background: #b9b3a8; border-radius: 0 0 8px 8px;
}

/* the app chrome inside the laptop */
.app-top {
  display: flex; align-items: center; gap: 0.6rem;
  border-bottom: 1px solid var(--line); padding: 0.15rem 0.2rem 0.6rem;
}
.app-top img { height: 1.05rem; width: auto; }
.app-crumb { font-size: 0.72rem; color: var(--ink-2); }
.app-mode { margin-left: auto; font-size: 0.66rem; color: var(--brand); border: 1px solid var(--brand); border-radius: 999px; padding: 0.15rem 0.6rem; }

.lap-views { position: relative; min-height: 20.25rem; }
.lap-view {
  position: absolute; inset: 0; padding: 0.9rem 0.2rem 0;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.lap-view.on { opacity: 1; transform: none; pointer-events: auto; }

.app-lot { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.app-k { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; color: var(--brand); }
.app-lot h3 { font-size: 1.06rem; margin-top: 0.25rem; max-width: 17rem; }
.app-score { text-align: right; white-space: nowrap; }
.app-score .n, .app-score b { font-size: 2rem; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.app-score i { font-style: normal; font-size: 0.8rem; color: var(--ink-3); }
.app-score-empty b { color: var(--ink-3); }

.app-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 0.95rem; }
/* lot view with the catalogue photo: horse left, analysis stacked right */
.app-split { display: grid; grid-template-columns: 10rem 1fr; gap: 0.8rem; margin-top: 0.95rem; align-items: stretch; }
.app-horse {
  margin: 0; border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper); padding: 0.55rem 0.55rem 0;
  display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
}
.app-horse img { width: 100%; height: auto; }
.app-tiles-stack { grid-template-columns: 1fr; gap: 0.45rem; margin-top: 0; }
@media (max-width: 460px) { .app-split { grid-template-columns: 7.5rem 1fr; } }
.tile { border: 1px solid var(--line); border-radius: 10px; padding: 0.55rem 0.65rem; background: var(--paper); }
.tile span { display: block; font-size: 0.58rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); }
.tile b { display: block; margin-top: 0.2rem; font-size: 0.82rem; font-weight: 500; color: var(--ink); }
.tile b.ok { color: var(--pos-fg); }
.tile b.warn { color: var(--cau-fg); }
.tile b.dim { color: var(--ink-3); font-weight: 400; }

.app-line { margin: 0.85rem 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 0.7rem; }

.lap-nav { display: flex; align-items: center; justify-content: center; gap: 0.7rem; padding-top: 0.55rem; border-top: 1px solid var(--line); margin-top: 0.6rem; }
.lap-prev, .lap-next {
  width: 1.7rem; height: 1.7rem; border-radius: 999px; border: 1px solid var(--line-2);
  background: none; color: var(--ink-2); cursor: pointer; font-size: 0.85rem; line-height: 1;
  transition: color .18s ease, border-color .18s ease;
}
.lap-prev:hover, .lap-next:hover { color: var(--brand); border-color: var(--brand); }
.lap-dots { display: flex; gap: 0.4rem; }
.lap-dots button {
  width: 0.38rem; height: 0.38rem; padding: 0; border: 0; border-radius: 999px;
  background: var(--line-2); cursor: pointer;
  transition: width .3s cubic-bezier(.16,1,.3,1), background .3s ease;
}
.lap-dots button[aria-current] { width: 1.1rem; background: var(--brand); }

/* phone, overlapping the laptop's right edge */
.phone {
  position: absolute; right: -0.5rem; bottom: -1.2rem;
  width: 10.2rem;
  background: #141210; border-radius: 22px; padding: 0.42rem;
  transform: rotate(4deg) translateY(-0.5rem);
  transition: transform 0.25s ease;
  transform-style: preserve-3d;
  box-shadow: 0 24px 50px rgba(20, 18, 16, 0.25);
}
@media (max-width: 979px) { .phone { right: 0; } }
.ph-notch {
  position: absolute; top: 0.55rem; left: 50%; transform: translateX(-50%);
  width: 34%; height: 0.5rem; background: #141210; border-radius: 999px; z-index: 2;
}
.ph-screen { background: var(--paper); border-radius: 17px; overflow: hidden; padding: 1.2rem 0.6rem 0.6rem; }
.ph-head { display: flex; align-items: center; gap: 0.4rem; padding: 0 0.15rem 0.5rem; border-bottom: 1px solid var(--line); }
.ph-head img { height: 0.85rem; width: auto; }
.ph-head span { font-size: 0.68rem; font-weight: 500; color: var(--ink); }
.ph-rows { list-style: none; margin: 0; padding: 0; }
.ph-rows .row {
  display: flex; align-items: baseline; gap: 0.45rem;
  padding: 0.5rem 0.15rem; border-bottom: 1px solid var(--line);
  font-size: 0.7rem;
}
.ph-rows .rl { color: var(--ink-3); flex: none; font-variant-numeric: tabular-nums; }
.ph-rows .rn { color: var(--ink); flex: 1; min-width: 0; }
.ph-rows .rs { color: var(--brand); font-weight: 500; font-variant-numeric: tabular-nums; }
.ph-rows .rs.dim { color: var(--ink-3); font-weight: 400; }
.ph-cta {
  margin-top: 0.55rem; text-align: center;
  background: var(--brand); color: #fff; border-radius: 9px;
  font-size: 0.66rem; font-weight: 500; padding: 0.5rem 0.4rem;
}

/* shadow is hardware presentation, not brand surface decoration */
.laptop { filter: drop-shadow(0 26px 40px rgba(20, 18, 16, 0.18)); }
@media (prefers-reduced-motion: reduce) {
  .lap-view, .laptop, .phone { transition: none; }
}