/* Vanta Gold design system — shared across all redesigned pages. Source of truth for the redesign. */
/* ============ Fonts (self-hosted) ============ */
@font-face { font-family: 'DINOT'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/DINOT.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/Newsreader-Regular-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/Newsreader-Regular-latinext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/Newsreader-Regular-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 300; font-display: swap; src: url('/fonts/Newsreader-LightItalic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 300; font-display: swap; src: url('/fonts/Newsreader-LightItalic-latinext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ============ Base ============ */
:root {
  --acc: 217,187,104;      /* gold  #D9BB68 — the accent: text, labels, borders, dots, hovers */
  --acc-soft: 201,185,146; /* champagne #C9B992 — washes only: mesh, pattern, grain tints, large glows, rain base */
  --ink: 238,236,231;      /* bone  #EEECE7 */
  --ink-hi: 189,182,169;   /* greige #BDB6A9 */
  --ink-mid: 182,175,163;
  --gx: clamp(24px, 5vw, 88px);
  --sec-y: clamp(90px, 11vw, 155px);
  --hairline: rgba(238,236,231,.12);
  --hairline-soft: rgba(238,236,231,.09);
  --serif: 'Newsreader', Georgia, serif;
  --sans: 'DINOT', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
html { background: #000; scroll-behavior: smooth; }
body { margin: 0; background: #000; color: rgb(var(--ink)); font-family: var(--sans); font-size: 16px; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; transition: opacity .2s ease-out; }
@media (hover: hover) { a:hover { opacity: .7; } }
a[data-navlink]:hover, a[data-btn]:hover { opacity: 1; }
button { font-family: inherit; }
:focus-visible { outline: 1px solid rgb(var(--acc)); outline-offset: 3px; }
::selection { background: rgba(var(--acc),.22); }

.page-root {
  position: relative;
  background-color: #000;
  background-image: linear-gradient(180deg, #000000 0%, #040302 14%, #090705 40%, #0b0906 52%, #080605 66%, #030202 86%, #000000 100%);
}
.bg-base, .bg-pattern { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.bg-pattern { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.026) 0 1px, rgba(255,255,255,0) 1px 10px); }
.bg-grain { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: .018; background-repeat: repeat; }
#ticker-canvas { position: absolute; inset: 0 auto auto 0; width: 100%; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .6s ease;
  -webkit-mask-image: radial-gradient(52% 46% at 50% 44%, transparent 26%, rgba(0,0,0,.5) 58%, #000 82%);
  mask-image: radial-gradient(52% 46% at 50% 44%, transparent 26%, rgba(0,0,0,.5) 58%, #000 82%); }
.content { position: relative; z-index: 2; }

/* ============ Scroll reveal ============ */
/* Gated on html.js (set by the one-line head snippet) so nothing is hidden without JS.
   Elements get [data-rv] only if they are below the fold at init — anything visible on
   first paint is never touched. The transition lives on .in, so tagging is instant. */
html.js [data-rv] { opacity: 0; transform: translateY(16px); will-change: opacity, transform; }
html.js [data-rv].in { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
html.js [data-rv-d="1"].in { transition-delay: .07s; }
html.js [data-rv-d="2"].in { transition-delay: .14s; }
html.js [data-rv-d="3"].in { transition-delay: .21s; }
html.js [data-rv-d="4"].in { transition-delay: .28s; }
html.js [data-rv-d="5"].in { transition-delay: .35s; }
html.js [data-rv-d="6"].in { transition-delay: .42s; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-rv] { opacity: 1; transform: none; transition: none; will-change: auto; }
}

/* ============ Type roles ============ */
.marker { font: italic 300 17px/1.4 var(--serif); color: rgba(var(--ink-mid), .62); text-shadow: 0 -1px 0 rgba(0,0,0,.8), 0 1px 0 rgba(var(--ink),.08); }
.serif-hi { font-family: var(--serif); font-weight: 300; letter-spacing: -.01em; color: rgb(var(--ink-hi)); text-shadow: 0 -1px 1px rgba(0,0,0,.9), 0 1px 0 rgba(var(--ink),.14); }
.serif-mid { font-family: var(--serif); font-weight: 300; color: rgb(var(--ink-mid)); text-shadow: 0 -1px 1px rgba(0,0,0,.85), 0 1px 0 rgba(var(--ink),.11); }
.mono-label { font-family: var(--sans); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--ink), .52); }
/* Section labels are real headings (Sep 11). :where() has zero specificity, so an h2/h3 carrying one of
   these classes renders exactly like the div it replaced: the class rules win, the UA heading styles lose. */
:where(h1, h2, h3, h4):where(.marker, .mono-label, .sec-num, .lead, .serif-mid, .closing-title, .opt-title, .fact-label, .ev-summary-label) { margin: 0; font: inherit; }
.mono-note { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(var(--ink), .48); }

/* ============ CTA buttons ============ */
[data-btn="cta"] {
  display: inline-flex; flex: 0 0 auto; white-space: nowrap; align-items: center; justify-content: center; box-sizing: border-box;
  padding: 14px 26px; background-color: transparent; background-repeat: no-repeat;
  border: 1px solid transparent;
  border-image: linear-gradient(115deg, rgba(var(--acc),.10), rgba(var(--acc),.32) 48%, rgba(var(--acc),.08)) 1;
  color: rgb(var(--acc)); font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 18px; line-height: 1;
  cursor: pointer; position: relative; overflow: hidden;
  transition: border-color .25s, background-color .25s, color .25s;
}
[data-btn="cta"].cta-lg { padding: 17px 34px; font-size: 25px; }
[data-btn="cta"].cta-md { font-size: 20px; }
[data-btn="cta"].cta-sm { font-size: 16px; }

/* ============ Nav ============ */
.nav {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between;
  padding: clamp(22px, 2.4vw, 40px) var(--gx);
  background: linear-gradient(180deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.66) 62%, rgba(0,0,0,0) 100%);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  transform: translateY(0); transition: transform .42s cubic-bezier(.22,.61,.36,1);
}
.nav-panel { display: flex; align-items: center; margin-left: auto; }
.nav-links, .nav-more { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--ink), .72); }
.nav-links { display: flex; gap: 34px; }
/* Secondary links live behind the burger on desktop: a hairline dropdown under the right edge. */
.nav-more {
  position: absolute; top: calc(100% - 8px); right: var(--gx); z-index: 41;
  display: flex; flex-direction: column; min-width: 224px; padding: 10px 24px 12px;
  background: rgba(0,0,0,.94); border: 1px solid var(--hairline);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .22s ease-out, transform .22s ease-out, visibility 0s .22s;
}
.nav-more > a { padding: 13px 0; border-bottom: 1px solid rgba(var(--ink), .08); }
.nav-more > a:last-child { border-bottom: 0; }
html[data-menu="1"] .nav-more { opacity: 1; visibility: visible; transform: none; transition: opacity .22s ease-out, transform .22s ease-out, visibility 0s 0s; }
html[data-menu="1"] .nav { transform: translateY(0) !important; }
.nav-end { display: flex; align-items: center; gap: 22px; margin-left: 40px; }
/* "Log in" is the one gold pill in the bar. */
.nav-login { display: inline-block; padding: 10px 16px; border: 1px solid rgba(var(--acc), .45); transition: border-color .2s ease-out; }
.nav-login:hover { border-color: rgba(var(--acc), .85); }
/* Paint-hover links: the resting colour is a flat gradient clipped to the glyphs; JS paints a gold radial under the pointer. */
a[data-navlink], .anchor-list a, .hero-menu a { position: relative; background-image: linear-gradient(rgba(238,236,231,.72), rgba(238,236,231,.72)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
a[data-navlink][aria-current="page"], a[data-navlink].is-current, a[data-navlink][data-login], .hero-menu a.is-active, .anchor-list a[aria-current="page"] { background-image: linear-gradient(rgb(var(--acc)), rgb(var(--acc))); }
.anchor-list a:hover, .hero-menu a:hover { opacity: 1; }
.burger { display: flex; appearance: none; background: transparent; border: 1px solid rgba(var(--acc),.28); cursor: pointer; width: 44px; height: 44px; padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.burger span { display: block; width: 18px; height: 1px; background: rgb(var(--acc)); transition: transform .3s ease, opacity .25s ease; }

/* ============ Hero ============ */
.hero {
  min-height: calc(78vh - 68px); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(80px, 10vw, 140px) var(--gx) clamp(90px, 11vw, 150px); text-align: center;
  background: radial-gradient(58% 62% at 50% 52%, rgba(0,0,0,.85) 0%, rgba(0,0,0,.5) 52%, rgba(0,0,0,0) 80%);
}
.hero h1 {
  margin: 0 auto; max-width: min(1240px, 94vw); text-wrap: balance;
  font: 300 clamp(33px, 3.78vw, 60px)/1.2 var(--serif); letter-spacing: .02em;
  color: rgb(var(--ink-hi)); text-shadow: 0 -1px 1px rgba(0,0,0,.9), 0 1px 0 rgba(var(--ink),.14);
}
.hero h1 span { display: block; white-space: nowrap; }
.hero-sub { margin: 40px auto 0; display: flex; flex-wrap: wrap; row-gap: 10px; justify-content: center; gap: 26px; font-size: 16.5px; color: rgba(var(--ink), .64); }
.hero-sub .slash { opacity: .3; }
.hero-cta { margin-top: 54px; }
.hero-cta-note { margin-top: 20px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; color: rgba(var(--ink), .5); }

/* ============ Sections ============ */
.sec { border-top: 1px solid var(--hairline); padding: var(--sec-y) var(--gx); }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 60px; }

.chips { padding: clamp(18px, 2.2vw, 30px) var(--gx) clamp(56px, 7vw, 96px); display: flex; justify-content: space-between; gap: 18px; font: italic 300 17px/1.4 var(--serif); color: rgba(var(--ink-mid), .74); text-shadow: 0 -1px 0 rgba(0,0,0,.8), 0 1px 0 rgba(var(--ink),.08); }
.hair { height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--ink),.2), transparent); }

/* Stats band */
.stats-wrap { padding: 0 var(--gx) var(--sec-y); }
.stats-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 52px; }
.stats { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats[data-count="5"] { grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); }
.stat { padding: 46px 34px 48px; }
.stat + .stat { border-left: 1px solid var(--hairline); }
.stat-value { font: 300 clamp(26px, 2.4vw, 34px)/1.2 var(--serif); letter-spacing: -.01em; color: rgb(var(--ink-hi)); text-shadow: 0 -1px 1px rgba(0,0,0,.9), 0 1px 0 rgba(var(--ink),.14); min-height: 41px; }
.stat-label { margin-top: 14px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; line-height: 1.6; color: rgba(var(--ink), .55); }
.stats-foot { margin-top: 22px; }

/* Alignment / two-col */
.two-col { display: grid; grid-template-columns: 1fr 1.4fr; gap: 110px; }
.two-col .lead { margin-top: 44px; font-size: 32px; line-height: 1.35; }
.prose { font-size: 17px; line-height: 1.6; color: rgba(var(--ink), .68); max-width: 560px; }
.prose p { margin: 0 0 22px; }
.prose p:last-child { margin-bottom: 0; }

/* Evaluation */
.eval-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 120px; }
.eval-lead { margin-top: 22px; font-size: 25px; line-height: 1.45; }
.eval-lead.serif-hi { font-size: clamp(30px, 2.9vw, 42px); line-height: 1.18; max-width: 560px; text-wrap: balance; }
.eval-note { margin-top: 26px; font-size: 15px; line-height: 1.6; color: rgba(var(--ink), .5); max-width: 440px; }
.stats-cta { margin-top: 30px; }
.eval-body { margin-top: 34px; font-size: 15.5px; line-height: 1.7; color: rgba(var(--ink), .64); max-width: 440px; }
.terms { display: flex; flex-direction: column; justify-content: flex-end; }
.term-row { display: flex; justify-content: space-between; align-items: baseline; gap: 32px; padding: 18px 0; border-top: 1px solid var(--hairline); font-size: 15px; }
.term-row .k { flex: 0 1 auto; max-width: 44%; }
.term-row > span:last-child:not(.k) { flex: 1 1 56%; text-align: right; }
.term-row:last-child { border-bottom: 1px solid var(--hairline); }
.term-row .k { color: rgba(var(--ink), .55); }

/* Configurator */
.config-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 100px; }
.opt-title { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--ink), .48); margin-bottom: 18px; }
.pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pill {
  appearance: none; text-align: left; cursor: pointer; background: transparent;
  border: 1px solid rgba(var(--ink), .16); color: rgba(var(--ink), .85);
  font: 400 14.5px/1 var(--sans); padding: 17px 18px 16px;
  transition: border-color .2s, background-color .2s;
}
@media (hover: hover) { .pill:hover { border-color: rgba(var(--acc), .5); } }
.pill .pl { font-size: 16px; }
.pill .ps { margin-top: 8px; font-size: 12px; color: rgba(var(--ink), .55); }
.pill[aria-pressed="true"] { border-color: rgba(var(--acc), .5); background-color: rgba(var(--acc), .07); }
.config-note { margin-top: 30px; font-size: 14px; line-height: 1.7; color: rgba(var(--ink), .55); max-width: 520px; }
.summary { border-left: 1px solid var(--hairline); padding-left: 44px; }
.summary-price { margin-top: 28px; font: 300 44px/1.1 var(--serif); letter-spacing: -.01em; color: rgb(var(--ink-hi)); text-shadow: 0 -1px 1px rgba(0,0,0,.9), 0 1px 0 rgba(var(--ink),.14); }
.summary-once { margin-top: 10px; font-size: 12.5px; color: rgba(var(--ink), .48); }
.summary-rows { margin-top: 36px; }
.summary-row { display: flex; justify-content: space-between; padding: 16px 0; border-top: 1px solid var(--hairline); font-size: 14.5px; }
.summary-row:last-child { border-bottom: 1px solid var(--hairline); }
.summary-row .k { color: rgba(var(--ink), .55); }
.summary-note { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--hairline); font-size: 13.5px; line-height: 1.6; color: rgba(var(--ink), .6); }

/* ============ Evaluation cards + inline configurator ============ */
/* Now the evaluation builder: three always-visible option groups on the left,
   a live-priced summary on the right. No cards, no panel to open. */
.ev-head { margin-bottom: 70px; }
.build { display: grid; grid-template-columns: 1.35fr 1fr; gap: 80px; align-items: start; }
.build > * { min-width: 0; }
/* Step number in the accent, the title in the usual label grey. */
.build .opt-title { display: flex; align-items: baseline; gap: 8px; }
.build .opt-step { font-family: var(--mono); color: rgba(var(--acc), .85); letter-spacing: .1em; }
/* Column count comes from the group, not the shared 3-column default. */
.build .pills[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.build .pills[data-cols="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.build .pill { padding: 16px 16px 15px; }
/* Label row: the Default tag sits to the right of the label when there is
   room and drops beneath it when there is not, so nothing ever overlaps. */
.build .pill .pl { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; }
.pill-tag { font: 400 10.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--acc), .85); }
.pill[disabled] .pill-tag { color: rgba(var(--ink), .28); }
/* Summary stays in view while the buyer works down the groups. */
.build .summary { position: sticky; top: 110px; }
/* "Pro eligible": a quiet mono label with a gold dot — a fact, not a button. */
.pro-tag { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; padding: 0; border: 0; font: 400 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--ink), .62); }
/* A size that cannot be promoted: same tag, muted rather than gold (Sep 16). */
.pro-tag.is-off { color: rgba(var(--ink), .42); }
.pro-tag::before { content: ""; flex: 0 0 auto; width: 4px; height: 4px; border-radius: 50%; background: rgb(var(--acc)); }

/* The rules shared by every evaluation, stated once beneath the groups. Each
   item is nowrap so a line break never lands in the middle of a fact. */
.build-facts { margin: 40px 0 0; font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; line-height: 2; color: rgba(var(--ink), .45); }
.build-facts-lead { color: rgba(var(--ink), .34); }
.build-facts-lead::after { content: ":"; }
.build-fact { white-space: nowrap; }
.build-facts span + span { margin-left: 10px; }
.build-fact + .build-fact::before { content: "·"; margin-right: 10px; opacity: .55; }

/* Price with "one time" beneath, sharing the summary's left edge. */
.summary-price-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
/* $100,000 accounts: the regular price struck through beside the fee (Sep 11). */
.summary-was { font: 300 22px/1.1 var(--serif); color: rgba(var(--ink), .42); text-decoration: line-through; text-decoration-thickness: 1px; }
.pill .ps s, .build-bar-line s { color: rgba(var(--ink), .4); text-decoration-thickness: 1px; margin-right: 2px; }
.tbl-row s.was { display: block; font-size: 12px; line-height: 1.3; color: rgba(var(--ink), .42); text-decoration-thickness: 1px; }
.ev-summary-label { letter-spacing: .12em; }
.ev-summary-cta { margin-top: 34px; }
.ev-markets-cta { margin-top: 26px; }

/* Phone bottom bar: price line + CTA, fixed while the builder is on screen
   and its summary is not. Off desktop entirely; JS toggles data-on. */
.build-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 38;
  display: none; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px var(--gx) calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(0,0,0,.96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--hairline);
  transform: translateY(102%); visibility: hidden;
  transition: transform .32s cubic-bezier(.22,.61,.36,1), visibility 0s .32s;
}
.build-bar[data-on="1"] { transform: translateY(0); visibility: visible; transition: transform .32s cubic-bezier(.22,.61,.36,1), visibility 0s 0s; }
.build-bar-line { min-width: 0; font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; color: rgba(var(--ink), .78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.build-bar [data-btn="cta"].cta-sm { padding: 11px 16px; font-size: 15px; min-height: 0; }

/* Between the two-column desktop and the single column, five splits do not
   fit one row inside the narrower left column: three and two instead. */
@media (max-width: 1240px) {
  .build .pills[data-cols="5"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .build { grid-template-columns: 1fr; gap: 44px; }
  .build .pills[data-cols="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .build .summary { position: static; border-left: 0; padding-left: 0; border-top: 1px solid var(--hairline); padding-top: 38px; }
  .build-bar { display: flex; }
}
@media (max-width: 560px) {
  .build .pill { padding: 14px 13px 13px; }
  .build .pills[data-cols="3"], .build .pills[data-cols="5"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .build-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; line-height: 1.6; }
  .build-fact { white-space: normal; }
  .build-facts span + span { margin-left: 0; }
  .build-fact + .build-fact::before { content: none; }
  .build-bar { gap: 12px; }
}

/* Onchain */
.onchain-band { background-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 9%, rgba(0,0,0,.93) 26%, rgba(0,0,0,.96) 50%, rgba(0,0,0,.93) 74%, rgba(0,0,0,.45) 91%, rgba(0,0,0,0) 100%); }
.onchain-lead { font-size: 25px; line-height: 1.45; max-width: 560px; }
.onchain-body { font-size: 15.5px; line-height: 1.7; color: rgba(var(--ink), .64); max-width: 540px; }

/* Testimonials */
.tp-eyebrow { display: flex; gap: 12px; font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: rgba(var(--ink), .5); }
.tp-widget-wrap { min-height: 140px; }
.tp-fallback { font-size: 16px; color: rgba(var(--ink), .6); }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: 220px 1fr; gap: 96px; }
.faq-list { border-bottom: 1px solid var(--hairline); }
.faq-list details { border-top: 1px solid var(--hairline); }
.faq-list summary { list-style: none; cursor: pointer; padding: 27px 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: 17px; color: rgba(var(--ink), .9); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list .plus { color: rgba(var(--ink), .48); font: 300 22px/1 var(--serif); transition: transform .2s ease-out; flex: 0 0 auto; }
.faq-list details[open] .plus { transform: rotate(45deg); }
.faq-answer { padding: 0 48px 27px 0; font-size: 15.5px; line-height: 1.7; color: rgba(var(--ink), .66); max-width: 620px; }
.faq-more { margin-top: 30px; }

/* Closing */
.closing { border-top: 1px solid var(--hairline); padding: clamp(100px, 12vw, 165px) var(--gx); text-align: center; }
.closing-title { font-size: 34px; }
.closing-sub { margin-top: 16px; font-size: 16px; color: rgba(var(--ink), .64); }
.closing-cta { margin-top: 40px; }

/* Footer */
.footer { border-top: 1px solid var(--hairline); padding: clamp(50px, 6vw, 74px) var(--gx) 40px; display: grid; grid-template-columns: 1fr auto auto auto; gap: 80px; }
.foot-col { display: flex; flex-direction: column; gap: 14px; font-size: 13px; color: rgba(var(--ink), .62); }
.foot-col .h { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--ink), .48); }
.foot-brand { max-width: 380px; }
.foot-news { margin-top: 34px; }
.foot-news .h { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--ink), .48); }
.foot-news p { margin: 12px 0 14px; font-size: 13.5px; line-height: 1.65; color: rgba(var(--ink), .62); }
.foot-form { display: flex; max-width: 320px; }
.foot-form input {
  flex: 1; min-width: 0; height: 44px; background: transparent; border: 1px solid rgba(var(--ink), .16); border-right: none;
  color: rgb(var(--ink)); padding: 0 14px; font-size: 14px; font-family: var(--sans); outline: none;
}
.foot-form input::placeholder { color: rgba(var(--ink), .35); }
.foot-form input:focus-visible { outline: 1px solid rgb(var(--acc)); outline-offset: 0; }
.foot-form button {
  height: 44px; background: transparent; border: 1px solid rgba(var(--acc), .32); color: rgb(var(--acc));
  padding: 0 20px; font: italic 300 15px/1 var(--serif); cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: border-color .25s, background-color .25s;
}
@media (hover: hover) { .foot-form button:hover { border-color: rgba(var(--acc), .6); background-color: rgba(var(--acc), .06); } }
.foot-bottom { padding: 46px var(--gx) 20px; display: flex; justify-content: space-between; align-items: flex-end; gap: 80px; }
.compliance { font-size: 12px; line-height: 1.75; color: rgba(var(--ink), .45); max-width: 620px; }
.compliance p { margin: 0 0 10px; }
.legal { display: flex; gap: 26px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(var(--ink), .45); flex-shrink: 0; }
.foot-legal-row { padding: 0 var(--gx) 46px; display: flex; justify-content: space-between; align-items: center; gap: 40px; font-size: 12px; color: rgba(var(--ink), .45); }
.net-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: rgb(var(--acc)); margin-right: 8px; vertical-align: 1px; }

.pill-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pill-row .pl { font-size: 15px; }
.pill-row .ps { margin-top: 0; }
.pill[disabled] { color: rgba(var(--ink), .22) !important; cursor: not-allowed; border-color: rgba(var(--ink), .12) !important; background-color: transparent !important; }
.pill[disabled] .ps { color: rgba(var(--ink), .28); }
.config-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
.config-duo .pills { grid-template-columns: 1fr; }
.opt-group + .opt-group { margin-top: 46px; }
.pro-note { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--hairline); font-size: 13.5px; line-height: 1.6; color: rgba(var(--ink), .6); }
.pro-tag { margin-top: 16px; }
.foot-form-status { margin-top: 10px; font-size: 13px; color: rgba(var(--ink), .6); min-height: 16px; }
.foot-form-status.is-error { color: rgba(220,160,140,.85); }

/* ============ Launch components ============ */
/* CTA pairing: primary CTA + a quiet text link; .cta-note sits beneath. */
.cta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 32px; }
.cta-link { font-family: var(--sans); font-size: 15px; color: rgba(var(--ink), .62); border-bottom: 1px solid rgba(var(--ink), .18); padding-bottom: 2px; transition: color .2s ease-out, border-color .2s ease-out; }
.cta-link:hover { opacity: 1; color: rgb(var(--acc)); border-bottom-color: rgba(var(--acc), .6); }
.cta-note { margin-top: 16px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; color: rgba(var(--ink), .5); }

/* Pro card: full-width beneath the three evaluation cards. Gold hairline top, no fill. */
.pro-card { margin-top: 56px; padding: 44px 0 46px; border-top: 1px solid rgba(var(--acc), .55); border-bottom: 1px solid var(--hairline); }
.pro-card-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--acc)); }
.pro-card-eyebrow::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: rgb(var(--acc)); }
.pro-card-line { margin-top: 22px; font: 300 clamp(24px, 2.4vw, 32px)/1.3 var(--serif); letter-spacing: -.005em; color: rgb(var(--ink-hi)); text-shadow: 0 -1px 1px rgba(0,0,0,.9), 0 1px 0 rgba(var(--ink),.14); max-width: 820px; text-wrap: balance; }
.pro-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 40px; margin-top: 40px; border-top: 1px solid var(--hairline-soft); }
.pro-fact { padding: 22px 0 24px; }
.pro-fact + .pro-fact { border-left: 1px solid var(--hairline-soft); padding-left: 32px; margin-left: -20px; }
.pro-fact .k { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(var(--ink), .52); }
.pro-fact .v { margin-top: 12px; font: 300 26px/1.2 var(--serif); color: rgb(var(--ink-mid)); text-shadow: 0 -1px 1px rgba(0,0,0,.85), 0 1px 0 rgba(var(--ink),.11); }
.pro-fact .v.mono { font: 400 16px/1.4 var(--mono); letter-spacing: .02em; color: rgba(var(--ink), .78); }
.pro-card .cta-row { margin-top: 40px; }

/* Compare: Standard vs Pro. First row is the header; first cell is the mono label. */
.compare { min-width: 560px; border-bottom: 1px solid var(--hairline); }
.compare-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 24px; padding: 18px 0; border-top: 1px solid var(--hairline); font-family: var(--sans); font-size: 15px; line-height: 1.5; color: rgba(var(--ink), .82); }
.compare-row > :first-child { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(var(--ink), .52); align-self: center; }
.compare-row.compare-head { padding: 0 0 16px; border-top: 0; }
.compare-row.compare-head > * { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--ink), .52); }
.compare-row.compare-head > :first-child { color: rgba(var(--ink), .32); }
.compare-row .is-hi, .compare-row.compare-head > .is-hi { color: rgb(var(--acc)); }

/* Take-home: four equal columns; the Vanta column (second) is gold. */
.take-home { min-width: 560px; border-bottom: 1px solid var(--hairline); }
.take-home-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 24px; padding: 16px 0; border-top: 1px solid var(--hairline); font-family: var(--mono); font-size: 14px; letter-spacing: .01em; color: rgba(var(--ink), .78); }
.take-home-row > :first-child { font-family: var(--sans); font-size: 15px; letter-spacing: 0; color: rgba(var(--ink), .58); }
.take-home-row > :not(:first-child) { text-align: right; }
.take-home-row.take-home-head { padding: 0 0 14px; border-top: 0; }
.take-home-row.take-home-head > * { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--ink), .52); }
.take-home-row > :nth-child(2), .take-home-row > .is-hi { color: rgb(var(--acc)); }
.take-home-row.take-home-head > :nth-child(2) { color: rgb(var(--acc)); }

/* Fact grid: the replacement for prose blocks. Mono label, serif value, one-line note. */
.fact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 44px; border-top: 1px solid var(--hairline); }
.fact-grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fact-grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; }
.fact { padding: 28px 0 30px; border-bottom: 1px solid var(--hairline); min-width: 0; }
.fact-label { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--ink), .52); }
.fact-value:first-child { margin-top: 0; }
.fact-value { margin-top: 14px; font: 300 clamp(26px, 2.3vw, 32px)/1.2 var(--serif); letter-spacing: -.01em; color: rgb(var(--ink-hi)); text-shadow: 0 -1px 1px rgba(0,0,0,.9), 0 1px 0 rgba(var(--ink),.14); overflow-wrap: anywhere; }
.fact-value.is-hi { color: rgb(var(--acc)); text-shadow: none; }
.fact-note { margin-top: 10px; font-family: var(--sans); font-size: 14px; line-height: 1.5; color: rgba(var(--ink), .58); }

/* Callout: one statement between gold hairlines. */
.callout { margin: 0; padding: 30px 0; border-top: 1px solid rgba(var(--acc), .45); border-bottom: 1px solid rgba(var(--acc), .45); font: italic 300 clamp(22px, 2.3vw, 30px)/1.35 var(--serif); color: rgb(var(--ink-hi)); text-shadow: 0 -1px 1px rgba(0,0,0,.9), 0 1px 0 rgba(var(--ink),.14); text-wrap: balance; }
.callout em, .callout .hi { font-style: inherit; color: rgb(var(--acc)); text-shadow: none; }

/* Mid-page mailing-list band. */
.news-band { border-top: 1px solid var(--hairline); padding: var(--sec-y) var(--gx); display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px 110px; align-items: center; }
.news-band-title { margin-top: 22px; font: 300 clamp(26px, 2.6vw, 36px)/1.25 var(--serif); letter-spacing: -.005em; color: rgb(var(--ink-hi)); text-shadow: 0 -1px 1px rgba(0,0,0,.9), 0 1px 0 rgba(var(--ink),.14); text-wrap: balance; }
.news-band-body { margin-top: 18px; font-size: 16px; line-height: 1.6; color: rgba(var(--ink), .64); max-width: 520px; }
.news-form { display: block; margin: 0; max-width: 480px; }
.news-form-row { display: flex; }
.news-form input { flex: 1; min-width: 0; height: 54px; background: transparent; border: 1px solid rgba(var(--ink), .18); border-right: none; color: rgb(var(--ink)); padding: 0 18px; font-size: 16px; font-family: var(--sans); outline: none; border-radius: 0; }
.news-form input::placeholder { color: rgba(var(--ink), .36); }
.news-form input:focus-visible { outline: 1px solid rgb(var(--acc)); outline-offset: 0; }
.news-form button { height: 54px; background: transparent; border: 1px solid rgba(var(--acc), .4); color: rgb(var(--acc)); padding: 0 26px; font: italic 300 18px/1 var(--serif); cursor: pointer; white-space: nowrap; flex-shrink: 0; border-radius: 0; transition: border-color .2s, background-color .2s; }
@media (hover: hover) { .news-form button:hover { border-color: rgba(var(--acc), .75); background-color: rgba(var(--acc), .06); } }
.news-form-status { margin-top: 12px; font-size: 13.5px; color: rgba(var(--ink), .62); min-height: 18px; }
.news-form-status.is-error, .foot-form-status.is-error { color: rgba(220,160,140,.85); }
.news-form-note { margin-top: 14px; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: rgba(var(--ink), .45); }

/* Trustpilot, built in-house. Gold stars, no green. */
.tp-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px 40px; margin-bottom: 48px; }
.tp-excellent { font: 300 clamp(30px, 3vw, 40px)/1.1 var(--serif); letter-spacing: -.01em; color: rgb(var(--ink-hi)); text-shadow: 0 -1px 1px rgba(0,0,0,.9), 0 1px 0 rgba(var(--ink),.14); }
.tp-stars { display: inline-flex; gap: 4px; color: rgb(var(--acc)); line-height: 0; }
.tp-stars svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.tp-stars.sm svg { width: 14px; height: 14px; }
.tp-stars .off { opacity: .22; }
.tp-head-l { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; margin-top: 18px; }
.tp-score { font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--ink), .58); }
.tp-mark { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 14px; letter-spacing: .02em; color: rgba(var(--ink), .78); transition: color .2s ease-out; }
.tp-mark svg { width: 16px; height: 16px; fill: currentColor; display: block; }
.tp-mark:hover { opacity: 1; color: rgb(var(--acc)); }
.tp-head-r { display: flex; align-items: center; gap: 28px; }
.tp-nav { display: flex; gap: 10px; }
.tp-nav button { appearance: none; width: 44px; height: 44px; padding: 0; background: transparent; border: 1px solid rgba(var(--ink), .18); color: rgba(var(--ink), .7); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font: 300 22px/1 var(--serif); transition: border-color .2s, color .2s; }
@media (hover: hover) { .tp-nav button:hover { border-color: rgba(var(--acc), .6); color: rgb(var(--acc)); } }
.tp-nav button[disabled] { opacity: .3; cursor: default; border-color: rgba(var(--ink), .12); color: rgba(var(--ink), .7); }
.tp-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
.tp-track::-webkit-scrollbar { display: none; }
.tp-card { flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start; display: flex; flex-direction: column; border: 1px solid var(--hairline); padding: 32px 30px 30px; min-width: 0; }
.tp-card .tp-stars { margin-bottom: 20px; }
.tp-title { font: 300 22px/1.3 var(--serif); color: rgb(var(--ink-mid)); text-shadow: 0 -1px 1px rgba(0,0,0,.85), 0 1px 0 rgba(var(--ink),.11); }
.tp-body { margin-top: 14px; font-size: 15px; line-height: 1.6; color: rgba(var(--ink), .64); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.tp-meta { margin-top: auto; padding-top: 24px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--ink), .5); }
.tp-link { display: inline-block; margin-top: 12px; font-family: var(--sans); font-size: 13.5px; color: rgb(var(--acc)); }
.tp-foot { margin-top: 28px; }

/* Steps: numbered how-it-works row. */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid var(--hairline); }
.step { padding: 30px 0 34px; min-width: 0; border-bottom: 1px solid var(--hairline); }
.step .sec-num { margin-bottom: 18px; }
.step-title { font: 300 23px/1.3 var(--serif); color: rgb(var(--ink-mid)); text-shadow: 0 -1px 1px rgba(0,0,0,.85), 0 1px 0 rgba(var(--ink),.11); }
.step-body { margin-top: 14px; font-size: 15.5px; line-height: 1.6; color: rgba(var(--ink), .62); }

@media (max-width: 1100px) {
  .tp-card { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 980px) {
  .fact-grid, .fact-grid[data-cols="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
  .pro-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
  .pro-fact + .pro-fact { border-left: 0; padding-left: 0; margin-left: 0; }
  .pro-fact:nth-child(even) { border-left: 1px solid var(--hairline-soft); padding-left: 24px; margin-left: -14px; }
  .news-band { grid-template-columns: 1fr; gap: 36px; }
  .compare-row { gap: 16px; font-size: 14.5px; }
  .two-col .lead { font-size: 29px; }
}

@media (max-width: 1080px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: 34px 24px; }
  .stat + .stat { border-left: none; }
  .stat:nth-child(even) { border-left: 1px solid var(--hairline); }
  .stat:nth-child(n+3) { border-top: 1px solid var(--hairline); }
  .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Default evaluation: a gold hairline on top, no fill. */
.ev-card[data-default] { border-top: 1px solid rgba(var(--acc), .55); }

/* ============ Post-review additions ============ */
/* Grid cells default to min-width:auto, so a 560px table inside a two-column
   section widened the cell instead of scrolling inside .tbl-scroll on phones. */
.two-col > *, .faq-grid > *, .config-grid > * { min-width: 0; }
/* Anchored sections clear the sticky nav when jumped to. */
.sec[id], .page-hero[id], [id].anchor-target { scroll-margin-top: 96px; }
/* Links inside data and answer blocks read in the accent, not inherited grey. */
.tbl a, .term-row a, .faq-answer a, .compare a, .take-home a, .fact-note a { color: rgb(var(--acc)); }

/* ============ Responsive ============ */
/* Nav: a 12px step before the burger takes over, so eight links never overflow. */
@media (max-width: 1180px) {
  .nav-links { gap: 24px; }
  .nav-links, .nav-more { font-size: 12px; letter-spacing: .13em; }
  .nav-end { margin-left: 28px; gap: 16px; }
}
@media (max-width: 1000px) {
  .nav-panel {
    position: fixed; left: 0; right: 0; top: 0; z-index: 39;
    display: flex; flex-direction: column; gap: 0; align-items: stretch; margin-left: 0;
    max-height: 100dvh; overflow-y: auto;
    padding: 88px 26px 34px; background: rgba(0,0,0,.96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    transform: translateY(-102%); visibility: hidden;
    transition: transform .42s cubic-bezier(.22,.61,.36,1), visibility 0s .42s;
  }
  html[data-menu="1"] .nav-panel { transform: translateY(0); visibility: visible; transition: transform .42s cubic-bezier(.22,.61,.36,1), visibility 0s 0s; }
  .nav-links, .nav-more { position: static; display: flex; flex-direction: column; gap: 0; min-width: 0; padding: 0; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; opacity: 1; visibility: inherit; transform: none; transition: none; font-size: 16px; letter-spacing: .1em; color: rgba(var(--ink), .78); }
  .nav-links > a, .nav-more > a { padding: 18px 0; border-bottom: 1px solid rgba(var(--ink), .1); }
  .nav-more > a:last-child { border-bottom: 1px solid rgba(var(--ink), .1); }
  .nav-end { margin-left: auto; gap: 14px; }
  /* The bar's own controls stay above the open panel so the close button is reachable. */
  .nav > a, .nav-end { position: relative; z-index: 42; }
  .nav-login { padding: 9px 13px; font-size: 12px; }
}
@media (max-width: 820px) {
  .tp-card { flex-basis: 88%; padding: 26px 22px 24px; }
  .tp-nav { display: none; }
  .tp-head { margin-bottom: 32px; }
  .pro-card { padding: 36px 0 38px; }
  .steps, .fact-grid[data-cols="4"] { grid-template-columns: 1fr 1fr; }
  .pro-card .cta-row, .cta-row { gap: 16px 24px; }
  .hero h1 span { display: inline; white-space: normal; }
  .chips { flex-wrap: wrap; gap: 14px 28px; justify-content: flex-start; }
  .two-col, .eval-grid, .config-grid, .faq-grid { grid-template-columns: 1fr; gap: 38px; }
  /* ID selector above, so this has to be an ID too to win here. */
  #split-pills { grid-template-columns: 1fr 1fr; }
  .ev-cards { display: flex; flex-direction: column; }
  .ev-card { padding: 38px 0 34px; border-left: 0; border-right: 0; }
  .ev-card[data-default] { border-left: 0; border-right: 0; }
  .ev-panel-inner { padding-top: 40px; }
  .config-duo { grid-template-columns: 1fr; gap: 38px; }
  .summary { border-left: 0; padding-left: 0; border-top: 1px solid var(--hairline); padding-top: 38px; margin-top: 6px; }
  .pills { grid-template-columns: 1fr 1fr; }
  [data-btn="cta"] { padding: 15px 22px; font-size: 19px; min-height: 48px; }
  [data-btn="cta"].cta-sm { font-size: 16px; }
  .sec-head { flex-direction: column; gap: 14px; margin-bottom: 44px; }
  .stats-head { flex-direction: column; gap: 14px; align-items: flex-start; }
  .footer { grid-template-columns: 1fr 1fr; gap: 48px; }
  .foot-bottom { display: block; }
  .legal { margin-top: 30px; flex-wrap: wrap; }
  .foot-legal-row { flex-direction: column; align-items: flex-start; gap: 14px; }
}
@media (hover: none) {
  .pill:hover { border-color: rgba(var(--ink), .16); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ============ Subpage layer ============ */
.page-hero { padding: clamp(110px, 13vw, 170px) var(--gx) clamp(36px, 4.5vw, 60px); }
.page-hero h1 { margin: 20px 0 0; font: 300 clamp(30px, 3.2vw, 48px)/1.2 var(--serif); letter-spacing: .01em; color: rgb(var(--ink-hi)); text-shadow: 0 -1px 1px rgba(0,0,0,.9), 0 1px 0 rgba(var(--ink),.14); max-width: 900px; text-wrap: balance; }
.page-hero .page-sub { margin-top: 24px; font-size: 17px; line-height: 1.65; color: rgba(var(--ink), .6); max-width: 620px; }
.page-hero.center { text-align: center; }
.page-hero.center h1, .page-hero.center .page-sub { margin-left: auto; margin-right: auto; }

.prose ul, .prose ol { margin: 0 0 22px; padding-left: 20px; }
.prose li { margin: 0 0 10px; }
.prose li::marker { color: rgba(var(--acc), .7); }
.prose strong { color: rgba(var(--ink), .85); font-weight: 400; }
.prose a { color: rgb(var(--acc)); }
.prose-wide { max-width: 680px; }

/* numbered section index (serif numerals) */
.sec-num { font: 300 17px/1 var(--serif); color: rgba(var(--acc), .8); letter-spacing: .04em; margin-bottom: 14px; }

/* generic data table (leverage/fees grids) */
.tbl-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.tbl { min-width: 560px; border-bottom: 1px solid var(--hairline); }
.tbl-row { display: grid; padding: 14px 0; border-top: 1px solid var(--hairline); font-family: var(--mono); font-size: 13.5px; color: rgba(var(--ink), .8); gap: 16px; }
.tbl-row.head { font-family: var(--sans); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--ink), .52); align-items: baseline; }
.tbl-row.head > span:first-child { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--ink), .52); }
.tbl-row > span:first-child { font-family: var(--sans); font-size: 14.5px; color: rgba(var(--ink), .55); }
.tbl-row > span:not(:first-child) { text-align: right; }

/* on-page anchor list (rules) */
.anchor-list { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 34px; }
.anchor-list a { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }

.faq-grid .anchor-list { flex-direction: column; gap: 12px; margin-top: 30px; }

/* FAQ category label */
.qa-cat { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--acc), .75); margin: 56px 0 6px; }
.qa-cat:first-child { margin-top: 0; }

/* quiet card (bordered block, e.g. contact / labs form shell) */
.quiet-card { border: 1px solid var(--hairline); padding: clamp(28px, 4vw, 44px); }

@media (max-width: 820px) {
  .page-hero { padding-top: 120px; }
}
@media (max-width: 560px) {
  /* Two up rather than one: a label, a figure and a short note fit side by side at 390px, and a
     five-tile band costs one screen instead of two (Sep 14 mobile pass). */
  .fact-grid, .fact-grid[data-cols="2"], .fact-grid[data-cols="4"], .steps, .pro-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }
  .pro-fact:nth-child(even) { border-left: 0; padding-left: 0; margin-left: 0; }
  .pro-fact + .pro-fact { border-top: 1px solid var(--hairline-soft); }
  .fact-value { font-size: 26px; }
  .news-form-row { flex-direction: column; }
  .news-form input { border-right: 1px solid rgba(var(--ink), .18); border-bottom: none; }
  .news-form button { width: 100%; }
}

/* ============ Evaluation cards: default is the last card (appended 2026-09-08, evaluations module) ============ */
/* The default (100/0) now sits last, not centred. It keeps the brighter left
   hairline from .ev-card[data-default]; the right edge goes, so the grid
   stays symmetric with the borderless first card. Mobile already zeroes both. */
.ev-card[data-default]:last-child { border-right: 0; }
/* "Default": a small mono tag beside the card price, sharing its baseline. */
.ev-tag { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--acc), .85); }

@media (max-width: 560px) {
  /* Brand and newsletter full width, the three short link lists three up, so the footer costs a
     third of a screen rather than a screen and a half (Sep 14 mobile pass). */
  .footer { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 20px; }
  .foot-brand, .foot-news { grid-column: 1 / -1; }
  .foot-col { font-size: 12.5px; gap: 12px; }
}

@media (max-width: 560px) {
  /* Shared-facts line wraps instead of pushing the page wider. */
  .ev-shared { display: flex; flex-wrap: wrap; gap: 6px 14px; }
  .ev-shared-item { white-space: normal; }
  /* Hero sub-line stacks its three items; the slashes are a desktop device. */
  .hero-sub { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .hero-sub .slash { display: none; }
}

/* ============ Payout ledger (appended 2026-09-10, rewards page) ============ */
/* Filter pills: quiet uppercase sans, hairline border, gold hairline when pressed. */
.ledger-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.ledger-pill { appearance: none; cursor: pointer; background: transparent; border: 1px solid rgba(var(--ink), .16); color: rgba(var(--ink), .62); font: 400 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: 11px 16px 10px; transition: border-color .2s ease-out, color .2s ease-out, background-color .2s ease-out; }
.ledger-pill:hover { border-color: rgba(var(--acc), .5); color: rgba(var(--ink), .85); }
.ledger-pill[aria-pressed="true"] { border-color: rgba(var(--acc), .5); color: rgb(var(--acc)); background-color: rgba(var(--acc), .07); }
/* The table itself: the .tbl look on a real <table>. Amounts right-aligned; ≥ $10,000 in gold. */
.ledger { width: 100%; min-width: 640px; border-collapse: collapse; border-bottom: 1px solid var(--hairline); font-family: var(--mono); font-size: 13.5px; color: rgba(var(--ink), .8); }
.ledger th, .ledger td { padding: 14px 20px 14px 0; border-top: 1px solid var(--hairline); text-align: left; vertical-align: baseline; white-space: nowrap; font-weight: 400; }
.ledger th:last-child, .ledger td:last-child { padding-right: 0; }
.ledger th { font-family: var(--sans); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--ink), .52); }
.ledger td:first-child { font-family: var(--sans); font-size: 14.5px; color: rgba(var(--ink), .55); }
.ledger .num { text-align: right; }
.ledger td.amt.is-hi { color: rgb(var(--acc)); }
.ledger td.ver .ref { color: rgba(var(--ink), .5); }
.ledger a { color: rgba(var(--ink), .8); border-bottom: 1px solid rgba(var(--ink), .18); padding-bottom: 1px; transition: color .2s ease-out, border-color .2s ease-out; }
.ledger a:hover { opacity: 1; color: rgb(var(--acc)); border-bottom-color: rgba(var(--acc), .6); }
.ledger tr.empty td { white-space: normal; text-align: center; padding: 36px 0; font-family: var(--sans); font-size: 14.5px; color: rgba(var(--ink), .45); }
/* Foot: row count, load more, latest-reward note. */
.ledger-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 32px; margin-top: 28px; }
.ledger-count { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: rgba(var(--ink), .48); }
.ledger-more { appearance: none; cursor: pointer; background: transparent; border: 1px solid rgba(var(--ink), .16); color: rgba(var(--ink), .72); font: 400 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: 13px 22px 12px; min-height: 42px; transition: border-color .2s ease-out, color .2s ease-out; }
.ledger-more:hover { border-color: rgba(var(--acc), .5); color: rgb(var(--acc)); }
.ledger-more[disabled] { cursor: default; color: rgba(var(--ink), .32); border-color: rgba(var(--ink), .1); }
.ledger-more[hidden] { display: none; }
@media (hover: none) {
  .ledger-pill:hover { border-color: rgba(var(--ink), .16); color: rgba(var(--ink), .62); }
  .ledger-pill[aria-pressed="true"]:hover { border-color: rgba(var(--acc), .5); color: rgb(var(--acc)); }
  .ledger-more:hover { border-color: rgba(var(--ink), .16); color: rgba(var(--ink), .72); }
}
@media (max-width: 560px) {
  .ledger-foot { flex-direction: column; align-items: flex-start; }
  .ledger-more { width: 100%; }
}

/* ============ Hero art + hero CTAs + Rules hero menu (appended 2026-09-10, hero-art module) ============ */
/* Subpage heroes split into copy (left, ≤640px) and an art column on the right at ≥981px.
   The art is a canvas mounted by js/vanta-hero-art.js into .hero-art-wrap; it sizes to the
   wrapper (min-height 360px) so nothing moves when it appears. Below 981px the art is hidden
   and the hero stacks. data-hero mesh behaviour is untouched. */
.hero-copy { min-width: 0; }
.page-hero .hero-cta { margin-top: 38px; }
.hero-art-wrap { display: none; }
.hero-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .9s ease-out;
  -webkit-mask-image: radial-gradient(78% 78% at 50% 50%, #000 42%, rgba(0,0,0,.55) 74%, transparent 100%);
  mask-image: radial-gradient(78% 78% at 50% 50%, #000 42%, rgba(0,0,0,.55) 74%, transparent 100%); }
.hero-art.is-on { opacity: 1; }
/* Rules: a numbered section menu. Mono, uppercase, hairline separators; champagne number,
   ink label, gold on hover; the number goes gold on the section in view (.is-active). */
.hero-menu { margin-top: 40px; }
.hero-menu ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; }
.hero-menu a { display: flex; align-items: baseline; gap: 14px; padding: 9px 0; border-top: 1px solid var(--hairline-soft);
  font-family: var(--mono); font-size: 12.5px; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(var(--ink), .62); transition: color .2s ease-out; }
.hero-menu li:last-child a { border-bottom: 1px solid var(--hairline-soft); }
.hero-menu .n { flex: 0 0 auto; }
.hero-menu .l { min-width: 0; }
@media (min-width: 981px) {
  .page-hero[data-hero-art], .page-hero.has-menu { display: grid; grid-template-columns: minmax(0, 640px) minmax(300px, 1fr); column-gap: clamp(40px, 6vw, 96px); align-items: stretch; }
  .page-hero[data-hero-art] > .hero-copy, .page-hero.has-menu > .hero-copy { align-self: center; }
  .hero-art-wrap { display: block; position: relative; min-height: 300px; }
  .hero-menu { margin-top: 0; align-self: center; justify-self: end; width: 100%; max-width: 600px; }
  .hero-menu ol { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(8, auto); grid-auto-flow: column; column-gap: 40px; }
  .hero-menu li:nth-child(8) a { border-bottom: 1px solid var(--hairline-soft); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art { transition: none; }
}
/* Payout ledger, continued: fixed column proportions so the amount sits beside the date rather than drifting to the centre. */
.ledger th:nth-child(1) { width: 17%; }
.ledger th:nth-child(2) { width: 17%; }
.ledger th:nth-child(3) { width: 18%; }
.ledger th:nth-child(4) { width: 34%; }

/* ============ Hover consistency + builder tooltip (Sep 10) ============ */
/* Outlined controls share one hover: border to gold (the pointer searchlight is applied by JS). */
.burger { transition: border-color .2s ease-out; }
@media (hover: hover) { .burger:hover, .tp-nav button:hover, .ledger-more:hover, .foot-form button:hover, .news-form button:hover { border-color: rgba(var(--acc), .75); } }
/* Underlined links share one hover: text and hairline to gold, no dimming. */
.cta-link, .ledger a, .tp-link, .tbl a, .term-row a, .faq-answer a, .compare a, .take-home a, .fact-note a, .prose a, .page-sub a, .eval-body a, .onchain-body a, .fact-value a, .callout a, .config-note a, .boost-tip a, .mono-note a, .news-band p a, .stats-foot a {
  border-bottom: 1px solid rgba(var(--acc), .3); padding-bottom: 1px; transition: color .2s ease-out, border-color .2s ease-out;
}
.cta-link:hover, .ledger a:hover, .tp-link:hover, .tbl a:hover, .term-row a:hover, .faq-answer a:hover, .compare a:hover, .take-home a:hover, .fact-note a:hover, .prose a:hover, .page-sub a:hover, .eval-body a:hover, .onchain-body a:hover, .fact-value a:hover, .callout a:hover, .config-note a:hover, .boost-tip a:hover, .mono-note a:hover, .news-band p a:hover, .stats-foot a:hover {
  opacity: 1; color: rgb(var(--acc)); border-bottom-color: rgba(var(--acc), .85);
}
/* Rows inside a scroll container fade in without the translate, so no scrollbar flashes while they reveal. */
html.js .tbl-scroll [data-rv], html.js .tp-track [data-rv] { transform: none; }
/* Buying-power tooltip under the pills: the hovered or selected level's per-class limits. */
.boost-tip { margin: 14px 0 0; min-height: 1.7em; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; line-height: 1.7; color: rgba(var(--ink), .55); }
.boost-tip strong { font-weight: 400; color: rgb(var(--acc)); }
.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; }

/* ============ Markets page (appended 2026-09-10, markets agent) ============ */
/* Five-up fact grid for the asset-class overview; steps to 3 columns on tablet and 1 on phones. */
.fact-grid[data-cols="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 28px; }
/* Ticker chips: a wrapped row of mono symbols inside hairline boxes, no fill. */
.tick-list { display: flex; flex-wrap: wrap; gap: 10px; }
.tick-list > span { font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; line-height: 1; padding: 9px 12px; border: 1px solid var(--hairline); color: rgba(var(--ink), .8); transition: border-color .2s ease-out, color .2s ease-out; }
@media (hover: hover) { .tick-list > span:hover { border-color: rgba(var(--acc), .55); color: rgb(var(--acc)); } }
@media (max-width: 980px) {
  .fact-grid[data-cols="5"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
}
@media (max-width: 560px) {
  .fact-grid[data-cols="5"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }
}

/* ============ Legal pages (terms, privacy, refund, affiliate) ============ */
/* A sticky mono contents list beside a long-form document. Same hairlines, same gold-on-hover as .hero-menu. */
.legal-page { display: grid; grid-template-columns: 1fr; gap: 48px; }
.legal-toc { min-width: 0; }
.legal-toc .mono-label { margin-bottom: 14px; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; }
.legal-toc li { border-top: 1px solid var(--hairline-soft); }
.legal-toc li:last-child { border-bottom: 1px solid var(--hairline-soft); }
.legal-toc a { display: block; padding: 9px 0; font-family: var(--mono); font-size: 12px; line-height: 1.35; letter-spacing: .1em; text-transform: uppercase; color: rgba(var(--ink), .62); transition: color .2s ease-out; }
.legal-toc a:hover, .legal-toc a.is-active { opacity: 1; color: rgb(var(--acc)); }
.legal-doc { min-width: 0; }
.legal-doc h2 { margin: 72px 0 26px; padding-top: 34px; border-top: 1px solid var(--hairline); font: 300 clamp(24px, 2.2vw, 32px)/1.25 var(--serif); letter-spacing: .01em; color: rgb(var(--ink-hi)); text-shadow: 0 -1px 1px rgba(0,0,0,.85), 0 1px 0 rgba(var(--ink),.11); scroll-margin-top: 96px; }
.legal-doc h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-doc h3 { margin: 40px 0 14px; font: 300 21px/1.3 var(--serif); color: rgb(var(--ink-mid)); text-shadow: 0 -1px 1px rgba(0,0,0,.85), 0 1px 0 rgba(var(--ink),.11); }
.legal-doc p, .legal-doc li { font-size: 16.5px; line-height: 1.7; color: rgba(var(--ink), .72); }
.legal-doc p { margin: 0 0 20px; max-width: 760px; }
.legal-doc ul, .legal-doc ol { margin: 0 0 24px; padding-left: 22px; max-width: 760px; }
.legal-doc li { margin: 0 0 10px; }
.legal-doc li::marker { color: rgba(var(--acc), .7); font-family: var(--mono); font-size: 12px; }
.legal-doc strong { font-weight: 400; color: rgba(var(--ink), .9); }
.legal-doc em { color: rgba(var(--ink), .6); }
.legal-doc a { color: rgba(var(--ink), .85); border-bottom: 1px solid rgba(var(--acc), .3); padding-bottom: 1px; transition: color .2s ease-out, border-color .2s ease-out; }
.legal-doc a:hover { opacity: 1; color: rgb(var(--acc)); border-bottom-color: rgba(var(--acc), .85); }
.legal-doc .tbl-scroll { margin: 8px 0 32px; }
.legal-doc table { width: 100%; min-width: 560px; border-collapse: collapse; border-bottom: 1px solid var(--hairline); }
.legal-doc th, .legal-doc td { padding: 14px 18px 14px 0; border-top: 1px solid var(--hairline); text-align: left; vertical-align: top; font-size: 14.5px; line-height: 1.55; color: rgba(var(--ink), .72); }
.legal-doc th { font-family: var(--sans); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--ink), .52); font-weight: 400; }
.legal-doc td:first-child { color: rgba(var(--ink), .85); }
.legal-meta { margin-top: 22px; }
@media (min-width: 980px) {
  .legal-page { grid-template-columns: 260px 1fr; gap: 80px; align-items: start; }
  .legal-page.no-toc { grid-template-columns: 1fr; }
  .legal-toc { position: sticky; top: 110px; max-height: calc(100vh - 130px); overflow-y: auto; scrollbar-width: thin; }
}
@media (max-width: 979px) {
  .legal-doc h2 { margin-top: 56px; padding-top: 28px; }
}
/* ============ /Legal pages ============ */

/* Ticker chips are labels, not links: no hover paint. */
.tick-list > span:hover { border-color: var(--hairline); color: inherit; }

/* ============ Modal (Sep 10) ============ */
dialog.vg-modal { border: 1px solid var(--hairline); background: rgba(6,6,6,.97); color: rgb(var(--ink)); padding: 0; margin: auto; width: min(920px, 92vw); max-height: 86vh; overflow: auto; }
dialog.vg-modal::backdrop { background: rgba(0,0,0,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
dialog.vg-modal[open] { animation: vg-modal-in .28s cubic-bezier(.22,.61,.36,1); }
@keyframes vg-modal-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.vg-modal-panel { position: relative; padding: 44px 48px 48px; }
.vg-modal-title { margin: 0 56px 26px 0; font: 300 clamp(24px, 2.2vw, 30px)/1.25 var(--serif); color: rgb(var(--ink-hi)); }
.vg-modal-close { position: absolute; top: 22px; right: 22px; appearance: none; background: transparent; border: 1px solid rgba(var(--acc), .35); color: rgba(var(--ink), .7); width: 40px; height: 40px; font: 300 22px/1 var(--serif); cursor: pointer; transition: border-color .2s ease-out, color .2s ease-out; }
@media (hover: hover) { .vg-modal-close:hover { border-color: rgba(var(--acc), .85); color: rgb(var(--acc)); } }
.vg-modal .tbl-scroll { margin-top: 6px; }
.vg-modal .mono-note { margin-top: 18px; }
html[data-modal="1"] { overflow: hidden; }
/* Text buttons that open a modal read like links. */
.modal-link { appearance: none; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; border-bottom: 1px solid rgba(var(--acc), .3); padding-bottom: 1px; transition: color .2s ease-out, border-color .2s ease-out; }
@media (hover: hover) { .modal-link:hover { color: rgb(var(--acc)); border-bottom-color: rgba(var(--acc), .85); } }
@media (prefers-reduced-motion: reduce) { dialog.vg-modal[open] { animation: none; } }
@media (max-width: 560px) { .vg-modal-panel { padding: 34px 22px 36px; } .vg-modal-close { top: 14px; right: 14px; } }

/* ============ Number roll ============ */
.odo { display: inline-flex; align-items: flex-start; line-height: var(--odo-h, 1.2em); font-variant-numeric: tabular-nums; }
.odo-c, .odo-d { display: inline-block; height: var(--odo-h, 1.2em); line-height: var(--odo-h, 1.2em); }
.odo-d { overflow: hidden; position: relative; }
.odo-s { display: block; will-change: transform; }
.odo-s > span { display: block; height: var(--odo-h, 1.2em); line-height: var(--odo-h, 1.2em); }

/* ============ Term tooltips ============ */
.tip { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 7px; vertical-align: 1px; padding: 0; border: 1px solid rgba(var(--acc), .5); border-radius: 50%; background: transparent; color: rgb(var(--acc)); font: italic 300 11px/1 var(--serif); letter-spacing: 0; text-transform: none; cursor: help; transition: border-color .2s ease-out, background-color .2s ease-out; }
.tip:focus-visible { border-color: rgb(var(--acc)); background-color: rgba(var(--acc), .08); outline: 0; }
@media (hover: hover) { .tip:hover { border-color: rgb(var(--acc)); background-color: rgba(var(--acc), .08); } }
.tip-bubble { position: fixed; z-index: 60; max-width: 300px; padding: 12px 14px; background: rgba(6,6,6,.97); border: 1px solid var(--hairline); color: rgba(var(--ink), .84); font: 400 13.5px/1.5 var(--sans); letter-spacing: 0; text-transform: none; text-align: left; opacity: 0; transform: translateY(4px); transition: opacity .18s ease-out, transform .18s ease-out; pointer-events: none; }
.tip-bubble.is-on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .tip-bubble { transition: none; } }

/* Term rows stack on phones: key above value, both left-aligned. */
@media (max-width: 560px) {
  .term-row { flex-direction: column; gap: 6px; align-items: flex-start; }
  .term-row .k { max-width: none; }
  .term-row > span:last-child:not(.k) { text-align: left; }
}

/* ============ Tradable markets (Sep 11) ============ */
/* "See all stocks" is a real button with the CTA look; the modal holds a search + every ticker. */
button[data-btn="cta"] { appearance: none; -webkit-appearance: none; }
.mkt-stocks { margin-top: 4px; }
.mkt-search { display: block; width: 100%; height: 48px; box-sizing: border-box; background: transparent; border: 1px solid rgba(var(--ink), .18); border-radius: 0; color: rgb(var(--ink)); padding: 0 16px; font-size: 16px; font-family: var(--sans); outline: none; appearance: none; -webkit-appearance: none; transition: border-color .2s ease-out; }
.mkt-search::placeholder { color: rgba(var(--ink), .36); }
.mkt-search::-webkit-search-cancel-button, .mkt-search::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.mkt-search:focus-visible { outline: 1px solid rgb(var(--acc)); outline-offset: 0; border-color: rgb(var(--acc)); }
.mkt-count { margin-top: 14px; }
.mkt-tick-list { margin-top: 18px; }
.tick-list > span[hidden] { display: none; }

/* ============ Mobile folds (Sep 14) ============
   Phone-only (max-width: 760px) folding of long blocks, driven by js/vanta-mobile.js. A block carrying
   data-m-fold="<label>" keeps its head children (marker, lead, callout …) visible; its body children
   get [data-m-hidden] and one .m-fold-toggle is appended as the block's last child. Above the
   breakpoint the toggle is display:none and [data-m-hidden] is never set, so the desktop layout is the
   pre-fold layout. Also here: the homepage phone order (hero → chips → builder), the paired hero CTAs,
   and the rewards ledger's phone paging button. */
.m-fold-toggle { display: none; }
/* Homepage hero: "Start your evaluation" and "See pricing" side by side, the /pro hero pairing. */
#hero .hero-cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 32px; }
@media (max-width: 760px) {
  [data-m-fold] > [data-m-hidden] { display: none !important; }
  .m-fold-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    width: 100%; min-height: 52px; margin: 32px 0 0; padding: 0;
    appearance: none; -webkit-appearance: none; background: transparent; border: 0; border-radius: 0;
    border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
    color: rgba(var(--ink), .9); font: 400 16px/1.3 var(--sans); letter-spacing: 0; text-align: left; cursor: pointer;
  }
  .m-fold-toggle .m-fold-label { min-width: 0; }
  .m-fold-toggle .plus { flex: 0 0 auto; color: rgba(var(--ink), .48); font: 300 22px/1 var(--serif); transition: transform .2s ease-out; }
  .m-fold-toggle[aria-expanded="true"] .plus { transform: rotate(45deg); }
  /* Closed, the toggle is the block's content: a .sec-head already carries its own gap beneath,
     and grid blocks space it with their row gap. */
  [data-m-fold]:not([data-m-open]):has(> .sec-head) > .m-fold-toggle { margin-top: 0; }
  .two-col > .m-fold-toggle, .eval-grid > .m-fold-toggle, .faq-grid > .m-fold-toggle, .config-grid > .m-fold-toggle, .hero-menu > .m-fold-toggle { margin-top: 0; }
  /* Rules hero menu, open: the list already ends in a hairline, so the toggle keeps only its bottom one. */
  .hero-menu[data-m-open] > .m-fold-toggle { border-top: 0; }

  /* Reading order on phones is the desktop order. "See pricing" in the hero is the shortcut to the
     builder; moving the section itself would put a configurator in front of the story. */
  /* Hero CTAs stack, centred. */
  #hero .hero-cta { flex-direction: column; align-items: center; gap: 14px; }

  /* Rewards ledger: the first 12 rows, then "Show 20 more" (js/vanta-rewards.js, phones only). */
  .ledger-show { margin-top: 22px; }
  .ledger-show [data-btn="cta"] { width: 100%; }
}

/* ============ The ladder: Classic → Earn → Grow → Pro (Sep 16) ============ */
/* A headline with its supporting line, four stage cards, a band showing that rewards run from Earn
   onward, then three reassurances. Stages the trader is paid in carry a gold top edge ([data-paid]),
   and the band sits under exactly those stages, so the picture says it before the copy does. */
.ladder-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: end; }
.ladder-title { margin: 0; font: 300 clamp(40px, 4.6vw, 64px)/1.04 var(--serif); letter-spacing: -.02em; color: rgb(var(--ink-hi));
  text-shadow: 0 -1px 1px rgba(0,0,0,.9), 0 1px 0 rgba(var(--ink),.12); text-wrap: balance; }
.ladder-title em { font-style: italic; color: rgb(var(--acc)); text-shadow: none; }
.ladder-sub { margin: 0; font-size: 17px; line-height: 1.7; color: rgba(var(--ink), .6); max-width: 520px; }
.ladder-sub strong { font-weight: 400; color: rgba(var(--ink), .92); }

.ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 64px; }
.rung { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 28px 26px 8px;
  border: 1px solid var(--hairline); background: rgba(255,255,255,.012); }
.rung[data-paid] { border-top-color: rgba(var(--acc), .85); box-shadow: inset 0 1px 0 rgba(var(--acc), .85); }
.rung[data-peak] { background: linear-gradient(180deg, rgba(var(--acc), .06), rgba(var(--acc), .01) 42%); }
.rung-num { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: rgba(var(--ink), .42); }
.rung[data-paid] .rung-num { color: rgba(var(--acc), .85); }
.rung-name { margin: 20px 0 0; font: 300 32px/1.1 var(--serif); color: rgb(var(--ink-hi)); }
.rung-line { margin-top: 10px; font-size: 15.5px; line-height: 1.4; color: rgba(var(--ink), .88); }
.rung[data-paid] .rung-line { color: rgb(var(--acc)); }
.rung-body { margin-top: 16px; font-size: 14.5px; line-height: 1.62; color: rgba(var(--ink), .56); }
.rung-body strong { font-weight: 400; color: rgba(var(--ink), .9); }
.rung-rows { margin-top: auto; padding-top: 26px; }
.rung-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 15px 0;
  border-top: 1px solid var(--hairline); font-size: 13.5px; }
.rung-row .k { color: rgba(var(--ink), .5); }
.rung-row .v { text-align: right; color: rgba(var(--ink), .88); }
.rung-row .v.hi { color: rgb(var(--acc)); }
.rung-row .v.dim { color: rgba(var(--ink), .4); }

/* The band: a quiet label under Classic, then one gold bar spanning Earn, Grow and Pro. */
.ladder-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 18px; align-items: stretch; }
.ladder-band-start { display: flex; align-items: center; gap: 14px; padding: 0 26px; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(var(--ink), .42); }
.ladder-band-start::after { content: ""; flex: 1; height: 1px; background: rgba(var(--acc), .45); }
.ladder-band-bar { grid-column: 2 / -1; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 20px 26px; border: 1px solid rgba(var(--acc), .5); background: rgba(var(--acc), .07); }
.ladder-band-bar .t { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: rgb(var(--acc)); }
.ladder-band-bar .n { font-size: 14px; color: rgba(var(--ink), .58); text-align: right; }

.ladder-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 44px; margin-top: 64px; }
.ladder-note { padding-top: 24px; border-top: 1px solid var(--hairline); }
.ladder-note h3 { margin: 0; font: 400 17px/1.35 var(--sans); color: rgba(var(--ink), .92); }
.ladder-note p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: rgba(var(--ink), .54); }

@media (max-width: 1100px) {
  .ladder, .ladder-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ladder-band-start { display: none; }
  .ladder-band-bar { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .ladder-head { grid-template-columns: 1fr; gap: 26px; }
  .ladder-notes { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 560px) {
  .ladder, .ladder-band { grid-template-columns: 1fr; gap: 14px; }
  .ladder { margin-top: 44px; }
  .rung { padding: 24px 22px 6px; }
  .rung-name { font-size: 28px; margin-top: 14px; }
  .ladder-band-bar { flex-direction: column; align-items: flex-start; gap: 6px; }
  .ladder-band-bar .n { text-align: left; }
  .ladder-band-bar .t { font-size: 12px; letter-spacing: .1em; }
  .ladder-notes { margin-top: 44px; }
}