/* ROMER waitlist site
   Every size comes from one viewport unit (--vu = the smaller of 1vw and 1.8vh), so the layout
   rescales to the window it's in instead of switching at device breakpoints. Each section is one
   screen tall with its content centred; grids pick their own column count from the space they get.
   Messina Sans throughout, Cormorant Garamond (Google Fonts, OFL) for the hero headline; sentence case, night + photon blue, no rounded corners. */

@font-face { font-family: "Messina Sans"; src: url("fonts/messina-sans-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Messina Sans"; src: url("fonts/messina-sans-350.woff2") format("woff2"); font-weight: 350; font-display: swap; }
@font-face { font-family: "Messina Sans"; src: url("fonts/messina-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Messina Sans"; src: url("fonts/messina-sans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Messina Modern"; src: url("fonts/messina-modern-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Messina Modern"; src: url("fonts/messina-modern-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-garamond-var.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  color-scheme: dark;
  --night: #07080A;
  --night-2: #0D0F13;
  --rule: #1C1F25;
  --rule-hi: #2C3038;
  --hi: #F2F2EE;
  --mid: #8D919A;
  --lo: #50545C;
  --photon: #5EA8FF;
  --core: #EAF4FF;
  --glow: rgba(94, 168, 255, 0.5);
  --paper: #F2F1ED;
  --ink: #0B0C0E;
  --ink-mid: #5C5F66;
  --paper-rule: #D8D5CD;
  --sans: "Messina Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;

  /* the one scale unit */
  --vu: min(1vw, 1.8vh);
  --vu: min(1vw, 1.8svh);
  --nav: clamp(56px, calc(var(--vu) * 5), 76px);
  --gutter: clamp(16px, 5vw, 88px);
  --max: 1520px;

  --t-hero: clamp(2.6rem, calc(var(--vu) * 7.6), 9.5rem);
  --t-h2: clamp(1.9rem, calc(var(--vu) * 4.6), 5.25rem);
  --t-big: clamp(2.8rem, calc(var(--vu) * 9), 11.5rem);
  --t-h3: clamp(1.4rem, calc(var(--vu) * 2.6), 3.2rem);
  --t-lead: clamp(1.05rem, calc(0.75rem + var(--vu) * 0.6), 1.5rem);
  --t-body: clamp(0.98rem, calc(0.85rem + var(--vu) * 0.2), 1.125rem);
  --t-small: clamp(0.84rem, calc(0.76rem + var(--vu) * 0.12), 0.95rem);
  --s1: calc(var(--vu) * 1.2);
  --s2: calc(var(--vu) * 2.4);
  --s3: calc(var(--vu) * 4);
  --s4: calc(var(--vu) * 6);
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0 !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--night); color: var(--hi);
  font-family: var(--sans); font-weight: 350; font-size: var(--t-body); line-height: 1.55; letter-spacing: -0.004em;
  font-kerning: normal; font-feature-settings: "kern" 1, "liga" 1, "lnum" 1;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
a { color: inherit; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
ol, ul { margin: 0; padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
::selection { background: var(--photon); color: var(--night); }
:focus-visible { outline: 2px solid var(--photon); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--photon); color: var(--night); padding: 12px 16px; }
.skip:focus { left: 16px; top: 16px; }
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- the scrollbar: a beam of light in a fibre ----------
   The track is a dark glass fibre with a faint core; the thumb is the light travelling down it,
   a white-hot core fading through photon blue to nothing, dimming at both ends. */
::-webkit-scrollbar { width: 12px; height: 12px; background: var(--night); }
::-webkit-scrollbar-track {
  background:
    linear-gradient(90deg, transparent 5px, rgba(94,168,255,.07) 5px, rgba(94,168,255,.07) 7px, transparent 7px),
    linear-gradient(90deg, transparent 4px, #15181E 4px, #15181E 8px, transparent 8px),
    var(--night);
}
::-webkit-scrollbar-thumb {
  min-height: 140px;
  background:
    radial-gradient(4px 9px at 50% calc(100% - 10px), #fff 0, rgba(234,244,255,.9) 40%, rgba(94,168,255,0) 100%),
    linear-gradient(to bottom, rgba(7,8,10,1) 0, rgba(7,8,10,.85) 18%, rgba(7,8,10,0) 78%, rgba(7,8,10,0) calc(100% - 6px), rgba(7,8,10,1) 100%),
    linear-gradient(90deg, transparent 2px, rgba(94,168,255,.16) 3px, rgba(94,168,255,.5) 4.5px, var(--photon) 5.3px, var(--core) 6px, var(--photon) 6.7px, rgba(94,168,255,.5) 7.5px, rgba(94,168,255,.16) 9px, transparent 10px);
}
::-webkit-scrollbar-thumb:hover { background:
    radial-gradient(5px 11px at 50% calc(100% - 10px), #fff 0, rgba(234,244,255,.95) 45%, rgba(94,168,255,0) 100%),
    linear-gradient(to bottom, rgba(7,8,10,1) 0, rgba(7,8,10,.7) 14%, rgba(7,8,10,0) 70%, rgba(7,8,10,0) calc(100% - 6px), rgba(7,8,10,1) 100%),
    linear-gradient(90deg, transparent 1px, rgba(94,168,255,.25) 2px, rgba(94,168,255,.7) 4px, var(--photon) 5px, #fff 6px, var(--photon) 7px, rgba(94,168,255,.7) 8px, rgba(94,168,255,.25) 10px, transparent 11px); }
::-webkit-scrollbar-button, ::-webkit-scrollbar-corner { display: none; background: var(--night); }
@supports (-moz-appearance: none) { html { scrollbar-width: thin; scrollbar-color: var(--photon) #15181E; } }

/* ---------- layout primitives ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.screen { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: calc(var(--nav) + var(--s2)) var(--s3); }
.dim { color: var(--mid); }
.blue { color: var(--photon); }
.blue { color: var(--photon); }
.h2 { font-size: var(--t-h2); line-height: 0.98; letter-spacing: -0.045em; max-width: 18ch; }
.layers .h2 { max-width: 26ch; }

/* ---------- buttons & fields ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: clamp(48px, calc(var(--vu) * 4.2), 60px); padding-inline: clamp(18px, calc(var(--vu) * 1.8), 28px);
  border: 1px solid var(--hi); background: var(--hi); color: var(--night);
  font-size: clamp(0.95rem, calc(0.8rem + var(--vu) * 0.18), 1.05rem); font-weight: 400; letter-spacing: -0.01em; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease;
}
.btn:hover { background: var(--photon); border-color: var(--photon); }
.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }
.btn--sm { height: clamp(36px, calc(var(--vu) * 3.2), 44px); padding-inline: 16px; font-size: 0.95rem; }
.btn[disabled] { opacity: .55; cursor: progress; }
.field {
  height: clamp(48px, calc(var(--vu) * 4.2), 60px); flex: 1 1 14rem; min-width: 0; padding-inline: 18px;
  background: rgba(7,8,10,.55); border: 1px solid var(--rule-hi); color: var(--hi); font-size: 1.05rem; transition: border-color .18s ease;
}
.field::placeholder { color: var(--lo); }
.field:focus { outline: none; border-color: var(--photon); }
/* the field and button share a row while there's room, then stack, with no breakpoint */
.signup { display: flex; flex-wrap: wrap; width: 100%; max-width: 560px; }
.signup .btn { flex: 1 0 auto; }
.hero__fine { margin-top: 14px; font-size: var(--t-small); color: var(--mid); min-height: 1.5em; }
.hero__fine[data-state="ok"] { color: var(--hi); }
.hero__fine[data-state="error"] { color: #FF8A7A; }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px); border-bottom: 1px solid transparent; transition: background-color .25s ease, border-color .25s ease; }
.nav.is-solid { background: rgba(7,8,10,.9); border-bottom-color: var(--rule); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--nav); }
.nav__logo { color: var(--hi); line-height: 0; flex: none; }
.nav__logo svg { height: clamp(16px, calc(var(--vu) * 1.6), 22px); width: auto; }
/* links drop out as the bar runs out of room: they wrap onto a clipped second line, and the
   button (first in wrap order) always stays */
.nav__links { display: flex; flex-wrap: wrap-reverse; flex-direction: row-reverse; justify-content: flex-start; align-items: center; column-gap: clamp(16px, 2.4vw, 40px); height: clamp(36px, calc(var(--vu) * 3.2), 44px); overflow: hidden; }
.nav__links a:not(.btn) { display: flex; align-items: center; height: 100%; font-size: 0.95rem; color: var(--mid); text-decoration: none; transition: color .15s ease; }
.nav__links a:not(.btn):hover { color: var(--hi); }

/* ---------- 1 hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding-block: calc(var(--nav) + var(--s3)) calc(var(--s4) + 2vh); isolation: isolate; overflow: hidden; }
.hero__img { position: absolute; top: 0; right: 0; bottom: 0; width: min(62%, 1100px); z-index: -1; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 35%; }
.hero__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--night) 0%, rgba(7,8,10,.8) 20%, rgba(7,8,10,.25) 48%, rgba(7,8,10,0) 70%), linear-gradient(to top, var(--night) 0%, rgba(7,8,10,0) 30%); }
.hero__inner { display: grid; gap: var(--s2); }
.hero__title { font-family: var(--serif); font-size: var(--t-hero); font-weight: 500; line-height: 0.95; letter-spacing: -0.015em; margin-left: -0.04em; }
.hero__title span { display: block; }
.hero__sub { font-size: var(--t-lead); line-height: 1.4; letter-spacing: -0.012em; max-width: 36ch; color: var(--hi); }
/* tall, narrow windows (phones held upright): the engraving sits above the text instead of beside it */
@media (max-aspect-ratio: 4/5) {
  .hero { padding-top: 0; }
  .hero__img { position: relative; width: 100%; height: 42svh; order: -1; margin-bottom: calc(var(--vu) * -12); }
  .hero__img::after { background: linear-gradient(to bottom, rgba(7,8,10,.4), rgba(7,8,10,0) 30%, rgba(7,8,10,0) 50%, var(--night)); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero__title span { animation: rise 1s cubic-bezier(.2,.7,.1,1) both; }
  .hero__title span + span { animation-delay: .1s; }
  .hero__sub, .hero .signup, .hero .hero__fine { animation: fade 1s ease .35s both; }
  .hero__img img { animation: settle 2.4s cubic-bezier(.2,.7,.1,1) both; }
  @keyframes rise { from { transform: translateY(.22em); opacity: .001; } to { transform: none; opacity: 1; } }
  @keyframes fade { from { opacity: .001; } to { opacity: 1; } }
  @keyframes settle { from { transform: scale(1.06); } to { transform: none; } }
}

/* ---------- 2 where you trade from ---------- */
.stack { margin-top: var(--s2); display: grid; grid-template-columns: minmax(0, 1fr); }
.stack__row { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1) var(--s3); padding: calc(var(--vu) * 1.6) clamp(16px, calc(var(--vu) * 3), 48px); border: 1px solid var(--rule-hi); background: var(--night-2); }
.stack__row::before, .stack__row::after { content: ""; position: absolute; width: 12px; height: 12px; border-color: var(--mid); pointer-events: none; }
.stack__row::before { top: -1px; left: -1px; border-top: 1px solid; border-left: 1px solid; }
.stack__row::after { bottom: -1px; right: -1px; border-bottom: 1px solid; border-right: 1px solid; }
.stack__who { flex: 1 1 12rem; font-size: var(--t-small); color: var(--mid); }
.stack__where { flex: 3 1 18rem; font-size: clamp(1.1rem, calc(var(--vu) * 1.7), 1.75rem); letter-spacing: -0.02em; line-height: 1.25; color: var(--mid); }
.stack__v { flex: none; font-weight: 300; font-size: clamp(2.2rem, calc(var(--vu) * 4.4), 5rem); line-height: 1; letter-spacing: -0.05em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; color: var(--mid); }
.stack__v .u { font-size: 0.5em; letter-spacing: -0.02em; margin-left: 0.18em; }
.stack__gap { height: var(--s2); width: 1px; margin-inline: auto; background: repeating-linear-gradient(to bottom, var(--lo) 0 6px, transparent 6px 12px); }
.stack__row--pro { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s1); border-color: var(--photon); background: linear-gradient(100deg, rgba(94,168,255,.10), rgba(94,168,255,.02) 60%), var(--night-2); }
.stack__row--pro::before, .stack__row--pro::after { border-color: var(--photon); width: 18px; height: 18px; border-width: 2px; }
.stack__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; }
.stack__row--pro .stack__who { flex: 0 1 auto; color: var(--photon); }
.stack__row--pro .stack__v { color: var(--photon); }
/* up to five logos a row; fewer as the row narrows. Hairlines come from overlapping outlines,
   so an unfilled last row stays clean. */
.pros { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(140px, calc(100% / 5 - 1px)), 1fr)); }
.pros__cell { display: grid; place-items: center; height: clamp(56px, calc(var(--vu) * 5.2), 104px); padding: 0 clamp(12px, 2vw, 30px); outline: 1px solid var(--rule-hi); outline-offset: -0.5px; transition: background-color .2s ease, box-shadow .2s ease; }
.pros__cell img { max-width: 100%; max-height: clamp(18px, calc(var(--vu) * 2.2), 34px); width: auto; filter: brightness(0) invert(1); opacity: .72; transition: opacity .2s ease, transform .2s ease; }
.pros__cell:hover { background: rgba(94,168,255,.08); box-shadow: inset 0 0 0 1px var(--photon); }
.pros__cell:hover img { opacity: 1; transform: scale(1.04); }
.pros__cell--us { gap: 6px; align-content: center; background: rgba(94,168,255,.12); box-shadow: inset 0 0 0 1px var(--photon); }
.pros__cell--us svg { height: clamp(14px, calc(var(--vu) * 1.5), 22px); width: auto; color: var(--hi); }
.pros__cell--us span { font-size: 0.78rem; color: var(--photon); }

/* ---------- 3 the race (pinned, scroll-driven) ---------- */
.race__track { position: relative; height: 380vh; }
.race__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; background: radial-gradient(70% 60% at 50% 110%, rgba(94,168,255,.10), rgba(94,168,255,0) 70%), var(--night); }
.race__inner { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: clamp(10px, calc(var(--vu) * 1.8), 40px); padding-block: calc(var(--nav) + var(--s2)) var(--s2); }
.race__title { flex: none; font-size: clamp(1.5rem, calc(var(--vu) * 3.4), 3.8rem); line-height: 1.02; letter-spacing: -0.04em; max-width: 22ch; }
.lane { flex: none; display: grid; gap: clamp(6px, calc(var(--vu) * 0.8), 14px); }
.lane__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 32px; flex-wrap: wrap; }
.lane__who { font-size: var(--t-small); color: var(--mid); }
.lane__t { font-weight: 300; font-size: clamp(1.4rem, calc(var(--vu) * 2.8), 3.2rem); line-height: 1; letter-spacing: -0.045em; font-variant-numeric: lining-nums tabular-nums; }
.lane__track { position: relative; height: 22px; }
.lane__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: repeating-linear-gradient(90deg, var(--rule-hi) 0 8px, transparent 8px 14px); }
.lane__track::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 2px; background: var(--mid); }
.lane__trail { position: absolute; left: 0; top: 50%; height: 1px; width: 100%; background: var(--hi); transform-origin: 0 50%; transform: scaleX(var(--p, 1)); }
.lane__pulse { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--hi); box-shadow: 0 0 18px rgba(242,242,238,.5); transform: translateX(calc(var(--p, 1) * var(--w, 0px))); }
.lane__ends { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--lo); }
.lane--us { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.lane--us .lane__who { color: var(--photon); }
.lane__count { font-weight: 300; font-size: clamp(2.2rem, calc(var(--vu) * 5.6), 6.4rem); line-height: 0.95; letter-spacing: -0.055em; color: var(--photon); font-variant-numeric: lining-nums tabular-nums; }
.lane__unit { font-weight: 350; font-size: clamp(0.95rem, calc(0.7rem + var(--vu) * 0.5), 1.4rem); letter-spacing: -0.015em; color: var(--hi); }
.grid-box { position: relative; flex: 1 1 auto; min-height: 48px; }
.grid { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.race__note { flex: none; font-size: clamp(0.7rem, calc(0.6rem + var(--vu) * 0.16), 0.82rem); line-height: 1.45; color: var(--lo); max-width: 90ch; }
@media (max-height: 520px) { .race__note, .lane__ends { display: none; } }
@media (prefers-reduced-motion: reduce) { .race__track { height: auto; } .race__stage { position: relative; } }

/* ---------- 4 built for bots ---------- */
.free { gap: var(--s2); overflow: hidden; }
.quotes__label { font-size: var(--t-small); color: var(--mid); }
.ticker { overflow: hidden; margin-top: calc(var(--s1) * -0.5); -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ticker__row { display: flex; width: max-content; gap: 16px; padding-block: 4px; animation: tick 90s linear infinite; }
.ticker:hover .ticker__row, .ticker:focus-within .ticker__row { animation-play-state: paused; }
.quote { flex: none; width: clamp(260px, calc(var(--vu) * 26), 400px); display: grid; grid-template-rows: 1fr auto; gap: var(--s2); padding: clamp(18px, calc(var(--vu) * 1.8), 26px); border: 1px solid var(--rule-hi); background: var(--night-2); color: inherit; text-decoration: none; transition: border-color .2s ease, background-color .2s ease, transform .2s ease; }
.quote blockquote { margin: 0; font-size: clamp(1rem, calc(0.7rem + var(--vu) * 0.5), 1.3rem); line-height: 1.35; letter-spacing: -0.015em; color: var(--hi); text-indent: -0.42em; hanging-punctuation: first; }
.quote__src { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 0.85rem; color: var(--mid); padding-top: 14px; border-top: 1px solid var(--rule); transition: color .2s ease, border-color .2s ease; }
.quote__arrow { transition: transform .2s ease; }
.quote:hover, .quote:focus-visible { border-color: var(--photon); background: linear-gradient(160deg, rgba(94,168,255,.12), rgba(94,168,255,.02) 70%), var(--night-2); transform: translateY(-3px); }
.quote:hover .quote__src, .quote:focus-visible .quote__src { color: var(--photon); border-top-color: rgba(94,168,255,.35); }
.quote:hover .quote__arrow, .quote:focus-visible .quote__arrow { transform: translate(2px, -2px); }
.quote:focus-visible { outline: 2px solid var(--photon); outline-offset: 2px; }
@keyframes tick { to { transform: translateX(calc(-50% - 8px)); } }
@media (prefers-reduced-motion: reduce) { .ticker { overflow-x: auto; } .ticker__row { animation: none; } a.quote[aria-hidden="true"] { display: none; } }
.free__inner { display: grid; gap: var(--s2); }
.free__title { font-size: clamp(2.2rem, calc(var(--vu) * 5.2), 7rem); font-weight: 300; line-height: 0.94; letter-spacing: -0.05em; max-width: 19ch; }
.free__sub { font-size: var(--t-lead); line-height: 1.4; letter-spacing: -0.012em; color: var(--mid); max-width: 44ch; }

/* ---------- 5 how (pinned, scroll-driven) ----------
   One order book runs the whole time. Scrolling moves your algo through the three steps, and its
   orders change with it: outlined on recorded data, dashed while they shadow the live market,
   solid blue once they're real. The rule over each step fills as you scroll through it (solid,
   then dashed, then blue), and on step 3 the whole line turns blue. main.js adds .is-pinned; without
   it (no JS, reduced motion) this is a plain one-screen section. */
.how__track { position: relative; }
.how__stage { position: relative; }
/* two columns side by side (heading and steps | the book); stacked when the window is taller than wide */
.how__inner { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: var(--s2) var(--s4); align-items: stretch; padding-block: calc(var(--nav) + var(--s2)) var(--s3); min-height: 100vh; min-height: 100svh; }
.how__side { display: flex; flex-direction: column; justify-content: center; gap: var(--s2); min-width: 0; }
.how.is-pinned .how__track { height: 300vh; }
.how.is-pinned .how__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; }
.how.is-pinned .how__inner { flex: 1; min-height: 0; padding-block: calc(var(--nav) + var(--s2)) var(--s2); }
@media (max-aspect-ratio: 1/1) {
  .how__inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .how__side { display: contents; }
  .how__side .h2 { order: -2; }
  .how .ob { order: -1; }
}

.ob { min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: clamp(8px, calc(var(--vu) * 1), 16px); }
.how:not(.is-ready) .ob { visibility: hidden; }
.ob__head { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 24px; flex-wrap: wrap; font-size: var(--t-small); color: var(--mid); }
.book__cap { display: inline-flex; align-items: baseline; gap: 10px; color: var(--hi); }
.book__dot { flex: none; width: 7px; height: 7px; transform: translateY(-1px); border: 1px dotted var(--mid); }
.how[data-phase="1"] .book__dot { background: var(--hi); border: 1px solid var(--hi); animation: live 1.4s ease-in-out infinite; }
.how[data-phase="2"] .book__dot { background: var(--photon); border: 1px solid var(--photon); animation: live 1.4s ease-in-out infinite; }
@keyframes live { 50% { opacity: .25; } }
.book__count { font-variant-numeric: lining-nums tabular-nums; transition: color .4s ease; }
.how[data-phase="2"] .book__count { color: var(--photon); }
.book__src { font-size: 0.8rem; color: var(--lo); }

/* the book: asks on top, the price in the middle, bids below; your tags in their own column */
.ob__card { --row: clamp(24px, calc(var(--vu) * 2.1), 34px); border: 1px solid var(--rule-hi); background: var(--night-2); font-variant-numeric: lining-nums tabular-nums; }
.ob__cols, .ob__row { display: grid; grid-template-columns: minmax(8.5em, 1.2fr) 1fr 1fr 1fr; align-items: center; column-gap: 12px; padding-inline: clamp(12px, calc(var(--vu) * 1.4), 22px); }
.ob__cols { height: var(--row); font-size: 0.78rem; color: var(--lo); border-bottom: 1px solid var(--rule); }
.ob__cols > :not(:first-child), .ob__row > span:not(.ob__you):not(.ob__bar) { text-align: right; }
.ob__side { display: grid; }
.ob__row { position: relative; height: var(--row); font-size: clamp(0.82rem, calc(0.62rem + var(--vu) * 0.36), 1.02rem); color: var(--mid); transition: background-color .5s ease; }
.ob__bar { position: absolute; top: 2px; bottom: 2px; right: 0; width: 100%; transform-origin: 100% 50%; transform: scaleX(var(--d, 0)); transition: transform .18s ease-out; pointer-events: none; }
.ob__row--ask .ob__bar { background: rgba(236,94,94,.11); }
.ob__row--bid .ob__bar { background: rgba(63,185,140,.11); }
.ob__row--ask .ob__px { color: #EC6A6A; }
.ob__row--bid .ob__px { color: #45C295; }
.ob__row.is-top { color: var(--hi); }
.ob__row.is-top .ob__bar { filter: saturate(1.3) brightness(1.4); }
.ob__row > span:not(.ob__bar) { position: relative; white-space: nowrap; }
.ob__row.is-hit { background: rgba(242,242,238,.10); transition: none; }
.how[data-phase="2"] .ob__row.is-hit { background: rgba(94,168,255,.22); }
.ob__mid { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px clamp(12px, calc(var(--vu) * 1.4), 22px); border-block: 1px solid var(--rule); }
.ob__last { font-weight: 300; font-size: clamp(1.3rem, calc(var(--vu) * 1.9), 2rem); letter-spacing: -0.03em; color: var(--hi); transition: color .3s ease; }
.ob__last.is-up { color: #45C295; } .ob__last.is-down { color: #EC6A6A; }
.ob__spread { font-size: 0.8rem; color: var(--lo); }
/* your order's tag: dotted on recorded data, outlined while shadowing, solid blue when real */
.ob__you { justify-self: start; font-size: 0.78rem; line-height: 1; padding: 4px 7px; border: 1px dotted var(--mid); color: var(--mid); opacity: 0; transform: translateX(-4px); transition: opacity .25s ease, transform .25s ease; }
.ob__you.is-on { opacity: 1; transform: none; }
.how[data-phase="1"] .ob__you { border: 1px solid var(--hi); color: var(--hi); }
.how[data-phase="2"] .ob__you { border: 1px solid var(--photon); background: var(--photon); color: var(--night); box-shadow: 0 0 12px rgba(94,168,255,.5); }
.ob__fill { min-height: 1.5em; font-size: var(--t-small); color: var(--mid); font-variant-numeric: tabular-nums; }
.how[data-phase="2"] .ob__fill { color: var(--photon); }

.steps { display: grid; gap: var(--s1); }
@media (max-aspect-ratio: 1/1) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; } .how .step__text, .how .step__n { display: none; } .how .step__name { font-size: clamp(0.95rem, calc(0.7rem + var(--vu) * 0.9), 1.4rem); letter-spacing: -0.02em; } }
.step { position: relative; display: grid; gap: calc(var(--vu) * 0.7); align-content: start; padding-block: var(--s1) 0; border-top: 1px solid var(--rule-hi); }
.step__n { font-size: var(--t-small); color: var(--mid); font-variant-numeric: tabular-nums; }
.step__name { font-size: var(--t-h3); line-height: 1; letter-spacing: -0.04em; transition: color .4s ease; }
.step__text { color: var(--mid); max-width: 30ch; transition: color .4s ease; }
.step--live .step__name { color: var(--photon); }
/* the rule over each step is a progress line: solid for step 1, dashed for the shadow run, blue for real */
.step__bar { position: absolute; left: 0; right: 0; top: -1px; height: 2px; transform-origin: 0 50%; transform: scaleX(var(--f, 1)); background: repeating-linear-gradient(90deg, var(--mid) 0 2px, transparent 2px 6px); }
.step--shadow .step__bar { background: var(--hi); }
.step--live .step__bar { background: var(--photon); box-shadow: 0 0 10px rgba(94,168,255,.7); }
.step__bar::after { content: ""; position: absolute; inset: 0; background: var(--photon); box-shadow: 0 0 10px rgba(94,168,255,.7); transform-origin: 0 50%; transform: scaleX(0); transition: transform .5s cubic-bezier(.3,.7,.2,1); }
.how.is-live .step__bar::after { transform: none; }
.how.is-live .step:nth-child(2) .step__bar::after { transition-delay: .12s; }
.how.is-pinned .step__bar { transform: scaleX(var(--f, 0)); }
.how.is-pinned .step .step__name, .how.is-pinned .step .step__n { color: var(--lo); }
.how.is-pinned .step .step__text { color: var(--lo); }
.how.is-pinned .step.is-done .step__name { color: var(--mid); }
.how.is-pinned .step.is-on .step__name { color: var(--hi); }
.how.is-pinned .step.is-on .step__n, .how.is-pinned .step.is-on .step__text { color: var(--mid); }
.how.is-pinned .step--live.is-on .step__name { color: var(--photon); }
@media (max-height: 560px) { .how.is-pinned .step__text, .how.is-pinned .step__n { display: none; } }

/* ---------- 6 pricing (paper) ---------- */
.paper { background: var(--paper); color: var(--ink); }
.paper .dim { color: var(--ink-mid); }
.kicker { font-size: var(--t-small); color: var(--ink-mid); margin-bottom: var(--s1); }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 14px; margin-top: var(--s3); }
.plan { display: grid; grid-template-rows: auto 1fr auto; border: 1px solid var(--paper-rule); background: #FBFAF7; color: var(--ink); transition: border-color .2s ease; }
.plan:hover { border-color: var(--ink); }
.plan--pro { border-color: var(--ink); box-shadow: inset 0 3px 0 var(--photon-deep, #1C56D6); }
.plan__head { display: grid; gap: 6px; padding: clamp(18px, calc(var(--vu) * 2), 30px); border-bottom: 1px solid var(--paper-rule); }
.plan__name { font-size: var(--t-small); color: var(--ink-mid); }
.plan__size { font-weight: 300; font-size: clamp(2.4rem, calc(var(--vu) * 4.4), 5rem); line-height: 0.95; letter-spacing: -0.055em; font-variant-numeric: lining-nums tabular-nums; }
.plan__price { font-size: 1.1rem; letter-spacing: -0.015em; color: var(--ink-mid); }
.plan__price b { font-weight: 400; color: var(--ink); }
.plan__rules { margin: 0; padding: 4px clamp(18px, calc(var(--vu) * 2), 30px); }
.plan__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-block: clamp(7px, calc(var(--vu) * 0.8), 12px); border-bottom: 1px solid var(--paper-rule); font-size: clamp(0.88rem, calc(0.78rem + var(--vu) * 0.14), 1rem); }
.plan__row:last-child { border-bottom: 0; }
.plan__row dt { color: var(--ink-mid); }
.plan__row dd { margin: 0; text-align: right; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.01em; }
.plan__row .pct { margin-left: 8px; color: var(--ink-mid); font-size: 0.88em; }
.plan__cta { margin: 0 clamp(18px, calc(var(--vu) * 2), 30px) clamp(18px, calc(var(--vu) * 2), 30px); background: var(--ink); border-color: var(--ink); color: var(--paper); }
.plan__cta:hover { background: #1C56D6; border-color: #1C56D6; color: #fff; }
.vs { display: grid; margin-top: var(--s2); border-top: 1px solid var(--paper-rule); }
.vs__row { display: grid; grid-template-columns: minmax(5.5rem, 0.7fr) minmax(0, 1.3fr) minmax(0, 1.3fr); gap: 16px; padding-block: clamp(7px, calc(var(--vu) * 0.7), 11px); border-bottom: 1px solid var(--paper-rule); font-size: clamp(0.86rem, calc(0.76rem + var(--vu) * 0.14), 0.98rem); line-height: 1.35; }
.vs__row > :first-child { color: var(--ink-mid); }
.vs__row > :nth-child(2) { color: var(--ink-mid); }
.vs__row > :nth-child(3) { color: var(--ink); }
.vs__row--head { font-size: var(--t-small); padding-block: 8px; }
.vs__row--head > :nth-child(3) { color: #1C56D6; }
.paper .src { margin-top: var(--s1); font-size: 0.8rem; line-height: 1.5; color: var(--ink-mid); max-width: 110ch; }

/* ---------- 7 faq ---------- */
.faq__grid { display: flex; flex-wrap: wrap; gap: var(--s3) clamp(32px, 6vw, 120px); }
.faq__grid > .h2 { flex: 1 1 16rem; }
.faq { flex: 2 1 26rem; border-top: 1px solid var(--rule-hi); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 24px; align-items: center; padding-block: var(--s2); font-size: clamp(1.1rem, calc(0.8rem + var(--vu) * 0.55), 1.6rem); letter-spacing: -0.02em; line-height: 1.25; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 300; font-size: 1.7rem; line-height: 1; color: var(--mid); text-align: right; transition: transform .25s ease; }
.faq details[open] summary::after { transform: rotate(45deg); color: var(--photon); }
.faq details p { padding: 0 48px var(--s2) 0; color: var(--mid); max-width: 60ch; }

/* ---------- 8 join ---------- */
.final { isolation: isolate; overflow: hidden; justify-content: flex-end; }
.final__img { position: absolute; inset: 0; z-index: -1; }
.final__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.final__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--night) 0%, rgba(7,8,10,0) 30%, rgba(7,8,10,.15) 60%, var(--night) 100%); }
.final__inner { display: grid; gap: var(--s2); justify-items: start; }
.final__title { font-size: var(--t-big); font-weight: 300; line-height: 0.9; letter-spacing: -0.06em; }

/* ---------- footer ---------- */
.arrival { display: grid; gap: calc(var(--vu) * 0.8); padding-block: var(--s2) var(--s3); }
.arrival__k { font-size: var(--t-lead); letter-spacing: -0.012em; color: var(--mid); max-width: 40ch; }
.arrival__n { font-weight: 300; font-size: clamp(2.4rem, calc(var(--vu) * 6.4), 8rem); line-height: 0.9; letter-spacing: -0.06em; color: var(--photon); font-variant-numeric: lining-nums tabular-nums; }
.arrival__u { font-size: 0.32em; letter-spacing: -0.02em; color: var(--hi); }
.arrival__h { font-size: var(--t-lead); letter-spacing: -0.012em; color: var(--mid); }
.arrival__h span { color: var(--hi); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) { .arrival { opacity: 0; transform: translateY(12px); transition: opacity .8s ease, transform .8s ease; } .arrival.is-in { opacity: 1; transform: none; } }
.footer { padding-block: var(--s2) clamp(20px, calc(var(--vu) * 2.4), 40px); color: var(--mid); border-top: 1px solid var(--rule); }
.footer__mark { display: block; color: var(--hi); line-height: 0; }
.footer__mark svg { display: block; width: min(100%, calc(22vh * 5.816)); width: min(100%, calc(22svh * 5.816)); height: auto; }
.footer__row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: var(--s2); padding-top: var(--s1); border-top: 1px solid var(--rule); font-size: var(--t-small); }
.legal { margin-top: var(--s1); max-width: 110ch; font-size: 0.8rem; line-height: 1.6; color: var(--lo); }

/* ---------- the beam: our scrollbar ----------
   A line of light down the right edge of the screen fills as you scroll. At the bottom it keeps
   going: it races along the bottom edge, up the left side and back across the top, closing a
   circuit around the screen, which flashes once and then glows faintly while you're in the footer.
   Mouse devices only; touch keeps its native indicator. Geometry is set in main.js. */
html.has-beam { scrollbar-width: none; }
html.has-beam::-webkit-scrollbar { width: 0; height: 0; display: none; }
.beam { position: fixed; inset: 0; z-index: 70; pointer-events: none; display: none; }
html.has-beam .beam { display: block; }
.beam__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.beam__svg path { fill: none; stroke-linecap: butt; stroke-linejoin: miter; }
.beam__track { stroke: rgba(242,242,238,.06); stroke-width: 2; }
.beam__right { stroke: var(--photon); stroke-width: 2; filter: drop-shadow(0 0 4px rgba(94,168,255,.85)); }
.beam__loop, .beam__comet, .beam__ring { display: none; }
.beam__loop { stroke: var(--photon); stroke-width: 2; opacity: .9; filter: drop-shadow(0 0 4px rgba(94,168,255,.85)); transition: opacity .6s ease; }
.beam__comet { stroke: #fff; stroke-width: 3; opacity: 0; filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px rgba(94,168,255,1)); }
.beam.is-closed /* once the circuit is closed, a small pulse keeps travelling round the screen edge */
.beam__ring { stroke: #fff; stroke-width: 2.5; stroke-dasharray: 26 974; opacity: 0; filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 12px rgba(94,168,255,1)); transition: opacity .6s ease; }
.beam.is-closed .beam__ring { opacity: .9; animation: ring 6s linear infinite; }
@keyframes ring { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1000; } }
.beam.is-looping .beam__comet { opacity: 1; }
.beam.is-looping .beam.is-closed .beam__svg { animation: circuit 1.1s ease-out 1; }
.beam.is-closed .beam__loop, .beam.is-closed .beam__right { opacity: .8; }
@keyframes circuit { 0% { filter: none; } 16% { filter: drop-shadow(0 0 6px rgba(234,244,255,1)) drop-shadow(0 0 22px rgba(94,168,255,1)) drop-shadow(0 0 48px rgba(94,168,255,.7)); } 100% { filter: none; } }
.beam-grab { position: fixed; z-index: 71; top: 0; bottom: 0; right: 0; width: 16px; cursor: pointer; display: none; touch-action: none; }
html.has-beam .beam-grab { display: block; }
@media (prefers-reduced-motion: reduce) { .beam.is-closed .beam__svg, .beam.is-closed .beam__ring { animation: none; } .beam.is-closed .beam__ring { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .book__dot { animation: none !important; } }