/* ==========================================================================
   Bedrock Algorithms — site stylesheet
   Ledger grid, hairline rules, heavy grotesque display, tabular data.
   No rounded corners, no drop shadows, no floating cards, anywhere.
   ========================================================================== */

/* --- tokens --------------------------------------------------------------- */
:root {
  --paper:     #ffffff;
  --bone:      #f3f2ed;   /* warm off-white for alternating bands */
  --ink:       #0b0b0c;
  --graphite:  #56585c;
  --mute:      #8a8c90;
  --rule:      #dedcd4;
  --rule-soft: #ebe9e2;
  --accent:    #0a5c3f;   /* deep green — the single signal colour */
  --accent-lo: #e4ede8;
  --neg:       #ae3a2c;
  --neg-lo:    #f4e6e3;

  --gut: clamp(18px, 3.4vw, 64px);   /* page gutter */
  --nav-h: 62px;
  --col: 6;                          /* ledger grid columns */
  --strip-cols: 4;                   /* stat-strip cells; the hero/phead ledger follows this */

  --t-display: clamp(2.75rem, 7.1vw, 7.6rem);
  --t-h1:      clamp(2.2rem, 5vw, 4.9rem);
  --t-h2:      clamp(1.7rem, 3vw, 3rem);
  --t-h3:      clamp(1.12rem, 1.5vw, 1.55rem);
  --t-lead:    clamp(1.05rem, 1.35vw, 1.4rem);
  --t-body:    clamp(0.98rem, 0.95vw, 1.1rem);
  --t-mono:    0.7rem;
  --prod-type: clamp(1.7rem, 3.2vw, 3rem);   /* product name AND its two figures */

  --ease: cubic-bezier(.2,.7,.3,1);
}

/* --- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; border-radius: 0 !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; background: none; border: 0; }
button { cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

::selection { background: var(--ink); color: var(--paper); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* --- type utilities ------------------------------------------------------- */
.mono {
  font-family: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1; }

.display {
  font-size: var(--t-display);
  font-weight: 800;
  line-height: .93;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.h1 { font-size: var(--t-h1); font-weight: 800; line-height: .98; letter-spacing: -.032em; }
.h2 { font-size: var(--t-h2); font-weight: 700; line-height: 1.02; letter-spacing: -.025em; }
.h3 { font-size: var(--t-h3); font-weight: 700; line-height: 1.14; letter-spacing: -.015em; }
.lead { font-size: var(--t-lead); line-height: 1.42; letter-spacing: -.012em; color: var(--graphite); }

.dim { color: var(--graphite); }
.faint { color: var(--mute); }
.pos { color: var(--accent); }
.neg { color: var(--neg); }
.measure { max-width: 34em; }
.measure-sm { max-width: 26em; }

/* --- ledger grid ---------------------------------------------------------- */
/* Vertical hairlines that run the full height of a section. The structural
   motif of the whole site: everything else sits on top of this ruled paper. */
.ruled { position: relative; }
.ruled::before {
  content: "";
  position: absolute; inset: 0;
  background-image: linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
  background-size: calc(100% / var(--col)) 100%;
  pointer-events: none;
  z-index: 0;
}
.ruled > * { position: relative; z-index: 1; }
@media (max-width: 900px) { :root { --col: 3; } }

/* --- shell ---------------------------------------------------------------- */
.pad { padding-inline: var(--gut); }
.rule-t { border-top: 1px solid var(--rule); }
.rule-b { border-bottom: 1px solid var(--rule); }

/* --- navigation ----------------------------------------------------------- */
/* There is no header bar. Navigation is a single floating control pinned to
   the top-right that stays put while the page scrolls; it opens a full-screen
   index of the site. The wordmark lives in the page content instead. */
.brand-mark {
  font-weight: 800; font-size: 1.02rem; letter-spacing: -.02em; text-transform: uppercase;
}
.brand-mark::after {
  content: ""; display: inline-block;
  width: 6px; height: 6px; margin-left: .5rem;
  background: var(--accent); vertical-align: baseline;
}

/* the wordmark as it appears in page content */
.wordmark {
  display: inline-flex; align-items: baseline;
  font-weight: 800; text-transform: uppercase;
  font-size: clamp(.9rem, 1.15vw, 1.1rem); letter-spacing: -.01em;
  transition: color .2s var(--ease);
}
.wordmark::after {
  content: ""; width: 6px; height: 6px; background: var(--accent);
  margin-left: .55rem; align-self: center;
}
.wordmark:hover { color: var(--accent); }
/* centred above the hero headline — stays inline-flex so the accent square
   keeps its box; the hero's own text-align does the centring */
.hero-brand { margin-bottom: clamp(1.8rem, 4.5vh, 3.2rem); }
/* top of an interior page header, in the left-aligned flow */
.page-brand { margin-bottom: clamp(1.4rem, 3.5vh, 2.6rem); }

/* The control and its panel share a wrapper so the pointer can travel from one
   to the other without the panel closing — they are flush, no dead gap. */
.navwrap {
  position: fixed; z-index: 120;
  top: clamp(14px, 2vw, 22px); right: clamp(14px, 2.4vw, 28px);
}
.navbtn {
  position: relative; z-index: 2;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--paper); border: 1px solid var(--rule);
  transition: border-color .2s var(--ease);
}
.navbtn i { position: relative; display: block; width: 20px; height: 12px; }
.navbtn i::before, .navbtn i::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 2px;
  background: var(--ink); transition: transform .28s var(--ease);
}
.navbtn i::before { top: 0; }
.navbtn i::after  { bottom: 0; }

.menu {
  position: absolute; top: 100%; right: 0; margin-top: -1px;
  width: min(288px, calc(100vw - 2 * var(--gut)));
  background: var(--paper); border: 1px solid var(--rule);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.menu-list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em;
  transition: background .18s var(--ease), color .18s var(--ease), padding-left .22s var(--ease);
}
.menu-list a:hover { background: var(--bone); color: var(--accent); padding-left: 1.5rem; }
.menu-list a[aria-current="page"] { color: var(--accent); }
.menu-list a .n {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--t-mono); font-weight: 500; letter-spacing: .14em; color: var(--mute);
}
.menu-foot {
  display: flex; flex-direction: column; gap: .4rem;
  padding: .9rem 1.1rem; color: var(--graphite);
}
.menu-foot a { transition: color .18s var(--ease); }
.menu-foot a:hover { color: var(--ink); }

/* open: on hover for a real pointer, on click/tap for everything else */
@media (hover: hover) and (pointer: fine) {
  .navwrap:hover .menu { opacity: 1; visibility: visible; transform: none; }
  .navwrap:hover .navbtn { border-color: var(--ink); }
  .navwrap:hover .navbtn i::before { transform: translateY(5px) rotate(45deg); }
  .navwrap:hover .navbtn i::after  { transform: translateY(-5px) rotate(-45deg); }
}
.navwrap:focus-within .menu,
body.menu-open .menu { opacity: 1; visibility: visible; transform: none; }
body.menu-open .navbtn { border-color: var(--ink); }
body.menu-open .navbtn i::before { transform: translateY(5px) rotate(45deg); }
body.menu-open .navbtn i::after  { transform: translateY(-5px) rotate(-45deg); }

/* --- hero ----------------------------------------------------------------- */
/* The hero and page headers carry a stat strip at their foot, so their ledger
   lines are driven by the strip's column count rather than the page default.
   The hairlines then land exactly on the strip's own dividers and read as one
   continuous rule instead of cutting through the cells. */
.hero, .phead { --col: var(--strip-cols); }

.hero {
  min-height: 100svh;
  display: flex; flex-direction: column;
  border-bottom: 1px solid var(--rule);
}
/* The hero carries the headline and nothing else: centred, with the single
   call to action sitting directly beneath it. */
.hero-body {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
  padding: clamp(2.5rem, 7vh, 6rem) var(--gut) clamp(2rem, 5vh, 4rem);
}
.eyebrow { display: flex; align-items: center; gap: .8rem; color: var(--graphite); margin-bottom: clamp(1.6rem, 4vh, 3rem); }
.eyebrow::before { content: ""; width: clamp(28px, 5vw, 72px); height: 1px; background: var(--ink); }
.hero h1 { max-width: 15ch; }
.hero-foot {
  display: flex; justify-content: center;
  margin-top: clamp(2rem, 5vh, 3.6rem);
}

/* On a phone the hero must still resolve inside one screen: tighten the
   vertical rhythm and the display size rather than letting the strip fall
   below the fold. */
@media (max-width: 620px) {
  .hero-body { padding-block: 1.4rem 1.1rem; }
  .hero h1 { font-size: clamp(2.2rem, 9.4vw, 3.1rem); }
  .eyebrow { margin-bottom: 1.1rem; }
  .hero-foot { margin-top: 1.3rem; gap: 1.1rem; }
  .hero .lead { font-size: 1rem; line-height: 1.38; }
  .strip > div { padding-block: .85rem; }
  .strip dt { margin-bottom: .55rem; }
  .strip .vs { margin-top: .4rem; }
}

/* --- stat strip ----------------------------------------------------------- */
/* Full-bleed row of figures divided by hairlines. Each cell carries the COS
   number large and the Nasdaq comparison small underneath. */
.strip { display: grid; grid-template-columns: repeat(var(--strip-cols), 1fr); border-top: 1px solid var(--rule); }
.strip > div {
  padding: clamp(1.1rem, 2.4vw, 2rem) clamp(.9rem, 1.8vw, 1.8rem);
  border-left: 1px solid var(--rule);
}
.strip > div:first-child { border-left: 0; padding-left: var(--gut); }
.strip > div:last-child { padding-right: var(--gut); }
.strip dt { color: var(--graphite); margin-bottom: .85rem; }
.strip dd { font-size: clamp(1.9rem, 3.4vw, 3.4rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
/* word-valued cells (e.g. "Systematic") need less scale than figures do */
.strip dd:not(.num) { font-size: clamp(1.35rem, 2.3vw, 2.2rem); letter-spacing: -.02em; }
.strip .vs { margin-top: .6rem; color: var(--mute); font-size: .68rem; letter-spacing: .1em; }
@media (max-width: 780px) {
  :root { --strip-cols: 2; }   /* ledger follows automatically */
  .strip > div:nth-child(odd) { border-left: 0; padding-left: var(--gut); }
  .strip > div:nth-child(even) { padding-right: var(--gut); }
  .strip > div:nth-child(n+3) { border-top: 1px solid var(--rule); }
}

/* --- section scaffolding -------------------------------------------------- */
.sec { border-bottom: 1px solid var(--rule); }
.sec.bone { background: var(--bone); }
.sec.ink { background: var(--ink); color: var(--paper); border-bottom-color: #26262a; }
.sec.ink .dim, .sec.ink .lead { color: #a7a9ad; }
.sec.ink .faint { color: #6f7175; }
.sec.ink .ruled::before { background-image: linear-gradient(90deg, #1d1d21 1px, transparent 1px); }

.sec-head {
  display: flex; align-items: baseline; gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(1rem, 2vw, 1.4rem) var(--gut);
  border-bottom: 1px solid var(--rule);
  color: var(--graphite);
}
.sec.ink .sec-head { border-bottom-color: #26262a; color: #8d8f93; }
.sec-head .idx { color: var(--accent); }
.sec.ink .sec-head .idx { color: #4fae86; }
.sec-head .grow { flex: 1; }

.sec-body { padding: clamp(2.6rem, 7vw, 7rem) var(--gut); }
.sec-body.tight { padding-block: clamp(2rem, 4vw, 3.4rem); }

/* two-column editorial split: statement left, prose right */
.split {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 7rem); align-items: start;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 2rem; } }

.prose p + p { margin-top: 1.15em; }
.prose p { color: var(--graphite); }
.prose strong { color: var(--ink); font-weight: 600; }
.sec.ink .prose strong { color: var(--paper); }

/* --- numbered rows (replaces card decks) ---------------------------------- */
.rows { border-top: 1px solid var(--rule); }
.sec.ink .rows { border-top-color: #26262a; }
.row {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(1rem, 3vw, 3.5rem);
  align-items: start;
  padding: clamp(1.8rem, 3.4vw, 3rem) var(--gut);
  border-bottom: 1px solid var(--rule);
}
.sec.ink .row { border-bottom-color: #26262a; }
.row:last-child { border-bottom: 0; }
.row .n { color: var(--accent); padding-top: .45rem; }
.sec.ink .row .n { color: #4fae86; }
@media (max-width: 820px) {
  .row { grid-template-columns: 1fr; gap: .7rem; }
  .row .n { padding-top: 0; }
}

/* --- data tables ---------------------------------------------------------- */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { min-width: 640px; }
.tbl th, .tbl td {
  padding: clamp(.85rem, 1.4vw, 1.15rem) 1rem;
  border-bottom: 1px solid var(--rule-soft);
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
}
.tbl thead th {
  border-bottom: 1px solid var(--ink);
  color: var(--graphite);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--t-mono); font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap;
}
.tbl th:first-child, .tbl td:first-child { text-align: left; padding-left: var(--gut); }
.tbl th:last-child,  .tbl td:last-child  { padding-right: var(--gut); }
.tbl tbody tr:hover { background: var(--bone); }
.tbl .lbl { font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.tbl .big { font-size: 1.05rem; font-weight: 700; }
.tbl tfoot td { border-bottom: 0; border-top: 1px solid var(--ink); color: var(--graphite); }
.tbl .rowspan-head td { background: var(--bone); font-weight: 600; }

/* swatch dot used in legends and table labels */
.dot { display: inline-block; width: 9px; height: 9px; margin-right: .55rem; vertical-align: baseline; }
.dot.cos { background: var(--accent); }
.dot.ndx { background: var(--mute); }

/* --- charts --------------------------------------------------------------- */
.fig { border-top: 1px solid var(--rule); }
.fig-head {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: baseline; justify-content: space-between;
  padding: clamp(1.1rem, 2vw, 1.6rem) var(--gut);
}
.legend { display: flex; gap: 1.4rem; flex-wrap: wrap; color: var(--graphite); }
.legend span { display: flex; align-items: center; }
.chart { width: 100%; display: block; }
.chart-note { padding: 0 var(--gut) clamp(1.2rem, 2.4vw, 2rem); color: var(--mute); }

.chart .axis      { stroke: var(--rule); stroke-width: 1; shape-rendering: crispEdges; }
.chart .axis-hard { stroke: var(--ink);  stroke-width: 1; shape-rendering: crispEdges; }
.chart .tick {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: .08em; fill: var(--mute);
}
.chart .line-cos { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.chart .line-ndx { fill: none; stroke: var(--mute);   stroke-width: 1.5; stroke-linejoin: round; }
.chart .area-cos { fill: var(--accent); opacity: .1; }
.chart .area-ndx { fill: var(--mute);   opacity: .1; }
.chart .bar-pos  { fill: var(--accent); }
.chart .bar-neg  { fill: var(--neg); }
.chart .bar-bench{ fill: none; stroke: var(--ink); stroke-width: 1.25; }
.chart .bar-pos, .chart .bar-neg { transition: opacity .15s var(--ease); }
.chart .bar-pos.is-hot, .chart .bar-neg.is-hot { opacity: .78; }
.chart .hit { fill: transparent; cursor: crosshair; }
.chart .hit:hover { fill: rgba(11,11,12,.04); }

/* pointer-following readout for chart hovers */
.chart-tip {
  position: fixed; z-index: 200; display: none; pointer-events: none;
  background: var(--ink); color: var(--paper);
  padding: .5rem .7rem .55rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}
.chart-tip .k {
  display: block; font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: #8d8f93;
}
.chart-tip .v {
  display: block; margin-top: .2rem; font-size: 1rem; font-weight: 700;
  letter-spacing: .01em; font-variant-numeric: tabular-nums;
}
.chart-tip .v.pos { color: #4fae86; }
.chart-tip .v.neg { color: #e0796a; }
.chart .oos-band { fill: var(--ink); opacity: .035; }
.chart .oos-line { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; }

/* --- recent months -------------------------------------------------------- */
.recent {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  border-top: 1px solid var(--rule);
}
.recent-month {
  padding: clamp(1.6rem, 3vw, 2.4rem) var(--gut);
  border-left: 1px solid var(--rule);
}
.recent-month:first-child { border-left: 0; }
.recent-label { margin-bottom: 1.1rem; }
.recent-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  padding: .7rem 0; border-bottom: 1px solid var(--rule-soft);
}
.recent-row .dot { margin-right: .5rem; }
.recent-val { font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 800; letter-spacing: -.03em; }
.recent-diff { margin-top: .9rem; text-transform: none; letter-spacing: .04em; }
@media (max-width: 620px) {
  .recent-month { border-left: 0; border-top: 1px solid var(--rule); }
  .recent-month:first-child { border-top: 0; }
}

/* --- comparison bars ------------------------------------------------------ */
.cmp { display: grid; gap: clamp(1.4rem, 2.6vw, 2.2rem); }
.cmp-item { display: grid; gap: .55rem; }
.cmp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.cmp-track { height: 34px; background: var(--rule-soft); position: relative; }
.cmp-fill { position: absolute; inset: 0 auto 0 0; background: var(--accent); transition: width .9s var(--ease); }
@media (prefers-reduced-motion: reduce) { .cmp-fill { transition: none; } }
.cmp-fill.bench { background: var(--ink); opacity: .18; }
.cmp-fill.risk { background: var(--neg); }
.cmp-val {
  position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
  font-size: .78rem; font-weight: 700; color: var(--paper);
  font-variant-numeric: tabular-nums;
  /* the label sits beyond the fill's right edge, which collapses its available
     width — without this it wraps to three lines and spills out of the track */
  white-space: nowrap;
}
.cmp-val.out { right: auto; left: calc(100% + .6rem); color: var(--ink); }

/* --- product accordion ---------------------------------------------------- */
/* Collapsed, the products page reads as an index of systems: one rule-divided
   row each, name on the left and the two figures that matter on the right.
   The name and both figures share --prod-type so they sit at one scale. */
.prod { border-bottom: 1px solid var(--rule); }

.prod-row {
  width: 100%; text-align: left; background: none;
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) auto 22px;
  grid-template-areas: "idx id met tog";
  gap: clamp(1rem, 3vw, 3.5rem);
  align-items: center;
  padding: clamp(1.5rem, 2.8vw, 2.6rem) var(--gut);
  transition: background .2s var(--ease);
}
.prod-row:hover { background: var(--bone); }
.prod-row:hover .prod-name { color: var(--accent); }

.prod-idx  { grid-area: idx; color: var(--graphite); }
.prod-id   { grid-area: id; min-width: 0; }
.prod-name {
  display: block;
  font-size: var(--prod-type); font-weight: 800;
  letter-spacing: -.045em; line-height: .95;
  transition: color .2s var(--ease);
}
.prod-sub { display: block; color: var(--graphite); margin-top: .7rem; }

.prod-metrics { grid-area: met; display: flex; gap: clamp(1.4rem, 3.4vw, 3.6rem); }
.prod-metric { text-align: right; }
.prod-metric .k { display: block; color: var(--graphite); margin-bottom: .55rem; white-space: nowrap; }
.prod-fig {
  display: block;
  font-size: var(--prod-type); font-weight: 800;
  letter-spacing: -.045em; line-height: .95;
  font-variant-numeric: tabular-nums lining-nums;
}
.prod-fig.pos { color: var(--accent); }
.prod-fig.neg { color: var(--neg); }
.prod-fig.na  { color: var(--rule); }

/* plus that becomes a minus */
.prod-toggle { grid-area: tog; position: relative; width: 22px; height: 22px; justify-self: end; }
.prod-toggle::before, .prod-toggle::after {
  content: ""; position: absolute; background: var(--ink);
  transition: transform .35s var(--ease);
}
.prod-toggle::before { left: 0; top: 10px; width: 22px; height: 2px; }
.prod-toggle::after  { top: 0; left: 10px; width: 2px; height: 22px; }
.prod-row[aria-expanded="true"] .prod-toggle::after { transform: scaleY(0); }

/* panel: 0fr → 1fr animates cleanly without measuring content height */
.prod-panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease);
}
.prod-panel > div { overflow: hidden; }
.prod-row[aria-expanded="true"] + .prod-panel { grid-template-rows: 1fr; }
.prod-panel-inner { border-top: 1px solid var(--rule); }
@media (prefers-reduced-motion: reduce) { .prod-panel { transition: none; } }

.tag {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--rule); padding: .3rem .7rem; color: var(--graphite); white-space: nowrap;
}
.tag::before { content: ""; width: 6px; height: 6px; background: var(--accent); }
.tag.idle::before { background: var(--mute); }

@media (max-width: 900px) {
  .prod-row {
    grid-template-columns: minmax(0, 1fr) 22px;
    grid-template-areas: "idx tog" "id id" "met met";
    gap: 1.1rem clamp(1rem, 3vw, 2rem);
    align-items: start;
  }
  .prod-metrics { justify-content: flex-start; gap: clamp(1.8rem, 8vw, 3rem); }
  .prod-metric { text-align: left; }
}


/* --- record meta line (backtests) ----------------------------------------- */
.record-meta {
  display: flex; flex-wrap: wrap; gap: .5rem .9rem;
  padding: clamp(1rem, 2vw, 1.4rem) var(--gut);
  border-bottom: 1px solid var(--rule);
  color: var(--graphite);
}
.record-meta .dot-sep { color: var(--rule); }

/* --- system picker (backtests) -------------------------------------------- */
/* Which system's record you are looking at. One live system today; each new
   one is another .pick button in the same row. */
.picker {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  border-bottom: 1px solid var(--rule);
}
.pick {
  position: relative; text-align: left;
  display: grid; gap: .55rem; align-content: start;
  padding: clamp(1.2rem, 2.2vw, 1.9rem) var(--gut);
  border-left: 1px solid var(--rule);
  transition: background .2s var(--ease);
}
.pick:first-child { border-left: 0; }
.pick:not([disabled]):hover { background: var(--bone); }
.pick[aria-expanded="true"] { background: var(--bone); }
.pick[aria-expanded="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: var(--accent);
}
.pick[disabled] { cursor: not-allowed; opacity: .5; }

/* expander glyph, matching the product rows */
.pick { padding-right: calc(var(--gut) + 34px); }
.pick-toggle {
  position: absolute; top: clamp(1.2rem, 2.2vw, 1.9rem); right: var(--gut);
  width: 20px; height: 20px;
}
.pick-toggle::before, .pick-toggle::after {
  content: ""; position: absolute; background: var(--ink);
  transition: transform .35s var(--ease);
}
.pick-toggle::before { left: 0; top: 9px; width: 20px; height: 2px; }
.pick-toggle::after  { top: 0; left: 9px; width: 2px; height: 20px; }
.pick[aria-expanded="true"] .pick-toggle::after { transform: scaleY(0); }

/* the record collapses and expands exactly like a product panel */
.record-panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease);
}
.record-panel > div { overflow: hidden; }
.record-panel.open { grid-template-rows: 1fr; }
@media (prefers-reduced-motion: reduce) { .record-panel { transition: none; } }

/* the record flows in the same way the rest of the site does, and replays
   each time a system is opened */
@media (prefers-reduced-motion: no-preference) {
  .record-panel.open > div > * { animation: enter .75s var(--ease) both; }
  .record-panel.open > div > *:nth-child(1) { animation-delay: .06s; }
  .record-panel.open > div > *:nth-child(2) { animation-delay: .15s; }
  .record-panel.open > div > *:nth-child(3) { animation-delay: .24s; }
  .record-panel.open > div > *:nth-child(4) { animation-delay: .32s; }
  .record-panel.open > div > *:nth-child(n+5) { animation-delay: .40s; }
}
.pick-name { font-size: clamp(1.25rem, 1.9vw, 1.7rem); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.pick-sub { color: var(--graphite); }
.pick-figs { display: flex; gap: 1.1rem; margin-top: .2rem; font-variant-numeric: tabular-nums; }
.pick-figs .pos { color: var(--accent); font-weight: 600; }
.pick-figs .neg { color: var(--neg); font-weight: 600; }
@media (max-width: 620px) {
  .picker { grid-template-columns: 1fr; }
  .pick { border-left: 0; border-top: 1px solid var(--rule); }
  .pick:first-child { border-top: 0; }
}

/* --- pricing -------------------------------------------------------------- */
.price {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(2rem, 4vw, 3.4rem) var(--gut);
}
.price-fig {
  font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 800;
  letter-spacing: -.05em; line-height: .9; margin: 1rem 0 .9rem;
  font-variant-numeric: tabular-nums;
}
.price-per { font-size: clamp(.8rem, 1vw, .95rem); font-weight: 500; letter-spacing: .1em; color: var(--graphite); margin-left: .6rem; }
/* reserve page: two licence options side by side */
.plans {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  border-bottom: 1px solid var(--rule);
}
.plan {
  padding: clamp(1.8rem, 3.4vw, 3rem) var(--gut);
  border-left: 1px solid var(--rule);
  display: grid; gap: .5rem; align-content: start;
}
.plan:first-child { border-left: 0; }
.plan .price-fig { margin: .6rem 0 .8rem; }
.plan-buy { margin-top: clamp(1.2rem, 2.4vw, 1.8rem); display: grid; gap: .8rem; justify-items: start; }
@media (max-width: 700px) {
  .plan { border-left: 0; border-top: 1px solid var(--rule); }
  .plan:first-child { border-top: 0; }
}

.price-opts { display: grid; gap: clamp(2rem, 4vw, 3rem); align-content: start; }
.price-opt + .price-opt { padding-top: clamp(1.6rem, 3vw, 2.4rem); border-top: 1px solid var(--rule-soft); }
.price-opt .price-fig { margin-block: .7rem .7rem; }
.price-opt strong { color: var(--ink); font-weight: 700; }
.price-list { align-self: end; }
.price-list > div {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding: .85rem 0; border-bottom: 1px solid var(--rule-soft);
}
.price-list > div:first-child { border-top: 1px solid var(--rule-soft); }
.price-list dt { color: var(--graphite); }
.price-list dd { font-weight: 600; text-align: right; }
@media (max-width: 820px) { .price { grid-template-columns: 1fr; } }

.spec { border-top: 1px solid var(--rule-soft); }
.spec-row {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.9fr);
  gap: clamp(1rem,3vw,3rem);
  padding: clamp(.9rem,1.6vw,1.15rem) var(--gut);
  border-bottom: 1px solid var(--rule-soft);
}
.spec-row dt { color: var(--graphite); }
.spec-row dd { font-weight: 500; }
@media (max-width: 620px) { .spec-row { grid-template-columns: 1fr; gap: .3rem; } }

/* --- buttons / links ------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: .9rem;
  padding: 1rem 1.6rem; border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--t-mono); font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover { background: var(--accent); border-color: var(--accent); }
.btn.ghost { background: none; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sec.ink .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.sec.ink .btn:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.btn .arw { transition: transform .2s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }

.tlink {
  display: inline-flex; align-items: center; gap: .7rem;
  padding-bottom: .3rem; border-bottom: 1px solid var(--ink);
  transition: gap .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.tlink:hover { gap: 1.1rem; color: var(--accent); border-color: var(--accent); }

/* --- page header (interior pages) ----------------------------------------- */
.phead {
  border-bottom: 1px solid var(--rule);
}
.phead-body { padding-top: clamp(5.5rem, 12vh, 9rem); }
.phead-body { padding: clamp(3rem, 9vh, 8rem) var(--gut) clamp(2rem, 5vh, 4rem); }
.phead h1 { max-width: 16ch; }

/* --- contact -------------------------------------------------------------- */
.contact {
  min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
}
.contact-left {
  background: var(--ink); color: var(--paper);
  padding: max(clamp(2.6rem, 6vw, 5.5rem), 84px) var(--gut) clamp(2.6rem, 6vw, 5.5rem);
  display: flex; flex-direction: column; justify-content: space-between; gap: 3rem;
}
.contact-right { padding: max(clamp(2.6rem, 6vw, 5.5rem), 84px) var(--gut) clamp(2.6rem, 6vw, 5.5rem); }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; min-height: 0; } }

.chan { border-top: 1px solid #26262a; padding-top: 1.1rem; margin-top: 1.1rem; }
.chan:first-of-type { border-top: 0; margin-top: 0; }
.chan dt { color: #8d8f93; margin-bottom: .45rem; }
.chan dd { font-size: 1.05rem; font-weight: 500; }
.chan a { border-bottom: 1px solid #3a3a3f; transition: border-color .2s; }
.chan a:hover { border-color: var(--paper); }

.field { border-bottom: 1px solid var(--rule); padding-block: .9rem 0; }
.field label { display: block; color: var(--graphite); margin-bottom: .5rem; }
.field input, .field textarea, .field select {
  width: 100%; padding-bottom: .85rem; font-size: 1.02rem; letter-spacing: -.01em;
}
.field textarea { resize: vertical; min-height: 6.5rem; }
.field input::placeholder, .field textarea::placeholder { color: #b9bbbe; }
.field:focus-within { border-bottom-color: var(--accent); }
.field select { appearance: none; cursor: pointer; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(1.2rem, 3vw, 2.4rem); }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }

.consent { display: flex; gap: .8rem; align-items: flex-start; margin-top: 2rem; color: var(--graphite); }
.consent input { width: 16px; height: 16px; margin-top: .2rem; accent-color: var(--accent); flex: none; }

.form-status { margin-top: 1.2rem; color: var(--accent); min-height: 1.2em; }

/* --- disclosure ----------------------------------------------------------- */
.disc { color: var(--mute); font-size: .82rem; line-height: 1.6; }
.disc p + p { margin-top: .8em; }


/* --- reserve flow --------------------------------------------------------- */
.step { border-bottom: 1px solid var(--rule); }
.step-head {
  display: grid; grid-template-columns: 4rem minmax(0,1fr) auto;
  gap: clamp(1rem, 3vw, 3rem); align-items: baseline;
  padding: clamp(1.6rem, 3vw, 2.4rem) var(--gut);
}
.step-n { color: var(--accent); }
.step-head .dim { margin-top: .5rem; }
.step-status { white-space: nowrap; }
.step-body { padding-bottom: clamp(1.6rem, 3vw, 2.6rem); }

/* a locked step stays visible so the whole flow is legible, but is inert */
.step.locked { opacity: .42; }
.step.locked .step-body { display: none; }

.step-actions {
  display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: center;
  padding: clamp(1.2rem, 2.4vw, 1.8rem) var(--gut) 0;
}
.step-actions .btn:disabled { opacity: .4; cursor: default; }
.step-actions .btn:disabled:hover { background: var(--ink); border-color: var(--ink); }

.embed-wrap { padding: 0 var(--gut); }
.cal-host { height: auto; min-height: clamp(620px, 76vh, 900px); overflow: hidden; }
.booked-summary {
  margin: 0 var(--gut) clamp(1rem, 2vw, 1.4rem);
  padding: .75rem .9rem;
  border: 1px solid var(--accent);
  background: var(--accent-lo);
  color: var(--accent);
  text-transform: none; letter-spacing: .04em;
}
.embed-frame {
  width: 100%; height: clamp(620px, 76vh, 900px);
  border: 1px solid var(--rule); display: block;
}
.setup-note {
  border: 1px dashed var(--neg); color: var(--neg);
  padding: 1rem 1.1rem; line-height: 1.7;
  text-transform: none; letter-spacing: .03em;
}
.setup-note strong { display: block; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .3rem; }
.setup-note code { background: var(--neg-lo); padding: .1rem .35rem; }

@media (max-width: 820px) {
  .step-head { grid-template-columns: minmax(0,1fr) auto; }
  .step-n { grid-column: 1 / -1; }
}

/* --- footer --------------------------------------------------------------- */
.foot { background: var(--ink); color: var(--paper); }
.foot-top {
  display: grid; grid-template-columns: minmax(0,1.6fr) repeat(2, minmax(0,1fr));
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(2.6rem, 5vw, 4.5rem) var(--gut) clamp(2rem, 4vw, 3rem);
}
.foot h4 { color: #8d8f93; margin-bottom: 1.1rem; }
.foot nav { display: flex; flex-direction: column; gap: .6rem; }
.foot nav a { color: #d3d4d6; transition: color .18s; }
.foot nav a:hover { color: var(--paper); }
.foot-bar {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  padding: 1.3rem var(--gut); border-top: 1px solid #26262a; color: #6f7175;
}
.foot-disc { padding: 0 var(--gut) clamp(2rem,4vw,3rem); }
.foot-disc p { color: #6f7175; font-size: .78rem; line-height: 1.65; max-width: 90ch; }
.foot-disc p + p { margin-top: .7em; }
@media (max-width: 780px) { .foot-top { grid-template-columns: 1fr; gap: 2rem; } }

/* --- page entrance -------------------------------------------------------- */
/* Above-the-fold content settles in rather than snapping on. Driven by a CSS
   animation, not a JS-toggled class, so a script failure can never leave the
   page invisible — the animation simply runs to its end state. */
@keyframes enter {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .enter {
    animation: enter .8s var(--ease) both;
    animation-delay: calc(var(--i, 0) * 85ms);
  }
  /* stat strip and system picker stagger cell by cell, no markup needed */
  .strip > div, .picker > .pick {
    animation: enter .8s var(--ease) both;
  }
  .strip > div:nth-child(1) { animation-delay: .34s; }
  .strip > div:nth-child(2) { animation-delay: .42s; }
  .strip > div:nth-child(3) { animation-delay: .50s; }
  .strip > div:nth-child(4) { animation-delay: .58s; }
  .picker > .pick:nth-child(1) { animation-delay: .68s; }
  .picker > .pick:nth-child(2) { animation-delay: .76s; }

  /* cross-page handoff: fade out before the next document loads */
  body { transition: opacity .18s ease; }
  body.leaving { opacity: 0; }
}

/* --- reveal on scroll ----------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .rise.in { opacity: 1; transform: none; }
}

/* --- print ---------------------------------------------------------------- */
@media print {
  .nav, .drawer, .btn { display: none; }
  body { color: #000; }
}