/* ==========================================================================
   Offset — design tokens
   Dark green/near-black ground, mint accent, serif display. Fonts are
   self-hosted variable WOFF2s in fonts/ (Latin only, SIL OFL; licences beside
   them): Newsreader for display, Inter for text, Geist for the interface,
   Geist Mono for tickers.
   font-display: swap, so text paints in the fallback first.
   ========================================================================== */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/newsreader-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: 200 800;
  font-display: swap;
  src: url("fonts/newsreader-italic-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: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-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: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/geist-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: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/geist-mono-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;
}

:root {
  --bg: #070b0a;
  --bg-raised: #0c1311;
  --surface: #101917;
  --surface-2: #15211d;
  /* Hairlines follow Linear's approach: a translucent white edge rather than a
     solid colour, so a border reads as the lit edge of a surface and picks up
     whatever sits behind it. Measured there at 0.05-0.08 alpha, 0.5-1px. */
  --line: rgba(255, 255, 255, 0.08);
  --line-soft: rgba(255, 255, 255, 0.05);
  --line-mint: rgba(124, 224, 188, 0.22);

  --mint: #7ce0bc;
  --mint-dim: #4fae93;
  --mint-deep: #0e3a2e;
  --warn: #e0a65c;

  --text: #e9f1ec;
  --text-2: #a7b8b0;
  --text-3: #7c8d86;
  --on-mint: #04120d;

  --serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  /* Interface text: header pills, menu, buttons, tabs and toggles. */
  --ui: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --radius: 14px;
  --radius-sm: 9px;
  --wrap: 1140px;
  --gap: 22px;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Keep anchored sections clear of the sticky header. */
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 0.45em;
  color: var(--text);
  text-wrap: balance;
}

h1 { font-size: clamp(2.15rem, 1.35rem + 3.4vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem); }
h3 { font-size: 1.2rem; line-height: 1.25; }

p { margin: 0 0 1em; color: var(--text-2); }
p:last-child { margin-bottom: 0; }

a { color: var(--mint); text-decoration: none; }
a:hover { text-decoration: underline; }

strong { color: var(--text); font-weight: 600; }

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

::selection { background: var(--mint-deep); color: var(--text); }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}
.wrap-narrow { max-width: 760px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Honeypot: hidden from sight and from assistive tech, but still in the form. */
.visually-hidden-input {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  background: var(--mint);
  color: var(--on-mint);
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; text-decoration: none; }

/* ==========================================================================
   Header / navigation
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(7, 11, 10, 0.9);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line-soft);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 68px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.wordmark:hover { text-decoration: none; color: var(--text); }

/* The Offset mark (src/partials/logo-mark.html, built by tools/brand/build-logo.py). */
.wordmark-mark {
  display: block;
  width: 22px;
  height: 22px;
  flex: none;
}

.site-menu a {
  color: var(--text-2);
  font-size: 0.95rem;
  font-weight: 500;
}
.site-menu a:hover { color: var(--text); text-decoration: none; }
.site-menu .btn { color: var(--on-mint); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 9px 14px;
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--line-mint); }

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--mint);
  border-radius: 2px;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle-bars::before { top: -5px; }
.nav-toggle-bars::after { top: 5px; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { text-decoration: none; }

.btn-primary { background: var(--mint); color: var(--on-mint); }
.btn-primary:hover { background: #96ebcb; }

.btn-ghost {
  background: transparent;
  color: var(--mint);
  border-color: var(--line-mint);
}
.btn-ghost:hover { background: rgba(124, 224, 188, 0.08); border-color: var(--mint); }

.btn-sm { padding: 9px 16px; font-size: 0.92rem; }
.btn-lg { padding: 17px 34px; font-size: 1.05rem; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.cta-row-center { justify-content: center; }

/* ==========================================================================
   Section furniture
   ========================================================================== */

/* With no backgrounds or rules between sections, this padding is the only
   thing separating them, so it carries more weight than it used to. */
/* Between two sections you get two of these, so the gap reads as double. The
   reference is the space from What Offset Is down to the closing CTA's rule,
   which is one of them. */
.section { padding: clamp(30px, 3.2vw, 44px) 0; }

/* The gap above the closing CTA's rule is a single padding, not two, so halving
   the section rhythm halved it as well. Put it back: that one was right. */
.section:has(+ .final-cta) { padding-bottom: clamp(54px, 6vw, 84px); }
.section-alt { background: var(--bg-raised); border-block: 1px solid var(--line-soft); }
.section-tight { padding-top: 0; }
.section-page-head { padding-bottom: clamp(32px, 4vw, 48px); }

.section-eyebrow,
.eyebrow {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mint);
  margin: 0 0 12px;
}

.lede {
  font-size: 1.12rem;
  max-width: 62ch;
  color: var(--text-2);
}
/* Explanatory copy runs the full width of its container rather than sitting on
   a narrower measure: under a full-width heading, a short column left a visible
   empty gap down the right-hand side. The containers themselves set the measure
   -- .wrap-narrow is 760px, a panel is narrower still -- so this only widens the
   lines that sit directly in a full .wrap. */
.section-lede {
  font-size: 1.02rem;
  max-width: none;
  margin-bottom: 0;
}

.fineprint {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-3);
  max-width: none;
  margin-top: 22px;
}

.audience {
  margin-top: 26px;
  font-size: 0.95rem;
  color: var(--text-3);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 7vw, 104px) 0 clamp(56px, 7vw, 96px);
}

.hero-backdrop {
  position: absolute;
  inset: 0;
  color: rgba(124, 224, 188, 0.05);
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(105% 85% at 68% 52%, #000 18%, transparent 76%);
  mask-image: radial-gradient(105% 85% at 68% 52%, #000 18%, transparent 76%);
  pointer-events: none;
}
/* Homepage: compute.js draws every index's weekly changes as a heatmap here. */
.hero-backdrop-heat { opacity: 1; }
.hero-backdrop canvas { display: block; width: 100%; height: 100%; }

.hero-copy h1 { margin-bottom: 0.35em; }

/* ==========================================================================
   Worked example card
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  background: var(--mint-deep);
  color: var(--mint);
  border: 1px solid var(--line-mint);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.case-rows { margin: 0; }

.case-row dd.num {
  font-family: var(--mono);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Risk-category strip
   ========================================================================== */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.chips li {
  font-size: 0.85rem;
  color: var(--text-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 13px;
  background: var(--surface);
}
.chips-sm li { font-size: 0.8rem; padding: 4px 10px; }

/* ==========================================================================
   Use-case cards
   ========================================================================== */

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: 30px;
}

.case-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 22px;
}
.case-card h3 { margin-bottom: 16px; }
.case-card .chips { margin-bottom: 6px; }

.case-row {
  padding: 11px 0;
  border-top: 1px solid var(--line-soft);
}
.case-row dt {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 5px;
}
.case-row dd {
  margin: 0;
  font-size: 0.93rem;
  color: var(--text-2);
  line-height: 1.55;
}

/* ==========================================================================
   Panels, forms, assessment tool
   ========================================================================== */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 2.8vw, 28px);
}
.panel h3 { margin-bottom: 0.6em; }

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: 30px;
}

.ticks, .crosses {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.ticks li, .crosses li {
  position: relative;
  padding-left: 28px;
  font-size: 0.95rem;
  color: var(--text-2);
}
.ticks li::before, .crosses li::before {
  position: absolute;
  left: 0;
  top: -1px;
  font-weight: 700;
}
.ticks li::before { content: "\2713"; color: var(--mint); }
.crosses li::before { content: "\2715"; color: var(--warn); }

.note-panel { margin-top: var(--gap); }
.note-panel p { font-size: 0.96rem; }

/* Fields */

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.field { margin: 0; display: block; }
.field-full { grid-column: 1 / -1; }

.field label {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.field-hint {
  display: block;
  font-size: 0.85rem;
  color: var(--text-3);
  margin-bottom: 8px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
}
.field textarea { resize: vertical; min-height: 84px; }
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--mint) 50%),
                    linear-gradient(135deg, var(--mint) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-mint); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--mint);
  outline-offset: 1px;
  border-color: var(--mint);
}

.field-error {
  display: block;
  margin-top: 7px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--warn);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--warn);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}
.form-status { font-size: 0.9rem; color: var(--text-3); }

.form-note {
  margin: 18px 0 0;
  padding: 14px 16px;
  background: var(--bg-raised);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-3);
}

.form-error-summary {
  margin: 20px 0 0;
  padding: 13px 16px;
  border: 1px solid var(--warn);
  border-radius: var(--radius-sm);
  background: rgba(224, 166, 92, 0.09);
  color: var(--warn);
  font-size: 0.92rem;
}

.form-success { margin-top: var(--gap); border-color: var(--line-mint); }
.form-success h2, .form-success h3 { color: var(--mint); }
/* The success heading is an h2 so the outline is valid on both pages; keep it
   card-sized rather than section-sized. */
.form-success h2 { font-size: 1.25rem; }

.after-form { margin-top: var(--gap); }
.after-form .form-note { margin-top: 0; }

/* Assessment result */

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq { margin-top: 28px; }

.faq details {
  border-top: 1px solid var(--line);
}
.faq details:last-child { border-bottom: 1px solid var(--line); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 2px;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--mint); }
.faq summary::after {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--mint);
  border-bottom: 1.5px solid var(--mint);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }

.faq-body { padding: 0 2px 18px; max-width: 68ch; }
.faq-body p { font-size: 0.98rem; }
.faq-body ul { margin: 0 0 1em; padding-left: 20px; color: var(--text-2); }
.faq-body li { margin-bottom: 6px; font-size: 0.98rem; }

/* ==========================================================================
   Final CTA
   ========================================================================== */

.final-cta {
  padding: clamp(58px, 7vw, 92px) 0;
  text-align: center;
  border-top: 1px solid var(--line-soft);
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(124, 224, 188, 0.08), transparent 70%),
    var(--bg);
}
.final-cta h2 { max-width: 20ch; margin-inline: auto; }
.final-cta .lede { margin-inline: auto; text-align: center; }
.final-cta .fineprint { margin-inline: auto; text-align: center; }

/* ==========================================================================
   Long-form pages
   ========================================================================== */

.prose h2 {
  font-size: 1.35rem;
  margin-top: 2.2em;
  margin-bottom: 0.6em;
}
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 22px; margin: 0 0 1.1em; color: var(--text-2); }
.prose li { margin-bottom: 9px; }
.prose p, .prose li { font-size: 1rem; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 38px 0 44px;
  background: var(--bg-raised);
}
.footer-menu {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 36px);
}
.footer-menu .menu-group-title { margin-bottom: 12px; }
.footer-menu .menu-group ul a { margin-left: -10px; }

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { justify-self: start; }
}
@media (max-width: 560px) {
  .footer-menu { grid-template-columns: 1fr; gap: 20px; }
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: 32px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--line-soft);
}
.footer-brand { max-width: 34ch; justify-self: end; text-align: left; }
.footer-brand p {
  margin: 12px 0 0;
  font-size: 0.9rem;
  color: var(--text-3);
}

.footer-socials {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-top: 14px;
}
.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 0.9rem;
  color: var(--text-2);
}
.footer-social:hover { color: var(--mint); text-decoration: none; }
.footer-social-icon { flex: none; color: var(--mint); }
.footer-social-handle { color: var(--text-3); margin-left: 4px; }
.footer-social:hover .footer-social-handle { color: inherit; }

.footer-legal {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-3);
  max-width: 86ch;
  margin-bottom: 10px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  
  .hero-copy { max-width: 42rem; }
  
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


@media (max-width: 520px) {
  
  .panel { padding: 20px 18px; }
  
}

/* ==========================================================================
   Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Single-column hero
   ========================================================================== */

.hero-single { padding: clamp(58px, 7vw, 104px) 0 clamp(50px, 6vw, 84px); }
.hero-single .hero-copy {
  position: relative;
  z-index: 1;
  max-width: 50rem;
}
.hero-single h1 {
  font-size: clamp(2.2rem, 1.15rem + 4.2vw, 4rem);
  margin-bottom: 0.4em;
}
.hero-single .lede { font-size: 1.16rem; }
.hero-single .audience {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--text-2);
}

/* ==========================================================================
   Risk categories
   ========================================================================== */

.chips-lg { margin-top: 26px; gap: 10px; }
.chips-lg li { font-size: 0.94rem; padding: 9px 16px; background: var(--surface); }

.provider-chips { margin: 14px 0 16px; }

/* ==========================================================================
   Risk cohorts
   ========================================================================== */

.section-feature {
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(124, 224, 188, 0.07), transparent 70%),
    var(--bg);
  border-block: 1px solid var(--line-soft);
}

.cohort-copy { max-width: none; }
.cohort-copy p { font-size: 1.02rem; }

.cohort-viz {
  margin: 32px 0 0;
  padding: clamp(20px, 2.8vw, 30px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.cohort-viz-head { margin-bottom: 18px; }

.cohort-members {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.cohort-members li {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.cohort-name { font-size: 0.94rem; font-weight: 600; color: var(--text); }
.cohort-amount {
  font-family: var(--mono);
  font-size: 0.84rem;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.cohort-converge { display: flex; justify-content: center; padding: 12px 0; }
.cohort-chevron {
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--line-mint);
  border-bottom: 2px solid var(--line-mint);
  transform: rotate(45deg);
}

.cohort-node {
  text-align: center;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.98rem;
}
.cohort-event {
  background: rgba(124, 224, 188, 0.07);
  border: 1px solid var(--line-mint);
  color: var(--mint);
}
.cohort-result { background: var(--mint); color: var(--on-mint); }

/* ==========================================================================
   Exposure Report cards
   ========================================================================== */

.report-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.report-card h3 { margin-bottom: 0.5em; }
.report-card p { font-size: 0.94rem; margin: 0; }

/* ==========================================================================
   Monitoring dashboard (illustrative)
   ========================================================================== */

.dash {
  margin: 30px 0 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.dash-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 20px;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--line);
}
.dash-title-main {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}
.dash-rows { list-style: none; margin: 0; padding: 0; }
.dash-row { padding: 16px 20px; border-top: 1px solid var(--line-soft); }
.dash-row:first-child { border-top: 0; }
.dash-event { margin: 0 0 10px; font-size: 0.98rem; font-weight: 600; color: var(--text); }
.dash-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 20px;
  margin: 0;
}
.dash-metrics dt {
  margin-bottom: 3px;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.dash-metrics dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 1.05rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.num-up { color: var(--warn); }

.badge-warn {
  background: rgba(224, 166, 92, 0.12);
  color: var(--warn);
  border-color: rgba(224, 166, 92, 0.35);
}

/* ==========================================================================
   Intake form extras
   ========================================================================== */

.case-card .badge { align-self: flex-start; margin-bottom: 12px; }

.field-more {
  margin-top: 18px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.field-more summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}
.field-more summary::-webkit-details-marker { display: none; }
.field-more summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--mint);
  border-bottom: 1.5px solid var(--mint);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.18s ease;
}
.field-more[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.field-more-title { font-size: 0.95rem; font-weight: 600; color: var(--text); }
.field-more-hint { font-size: 0.85rem; color: var(--text-3); }
.field-more-grid { padding: 2px 16px 18px; }

.field-check { display: flex; align-items: flex-start; gap: 10px; }
.field-check input { width: auto; flex: none; margin-top: 3px; }
.field-check label { margin-bottom: 0; font-size: 0.92rem; font-weight: 400; color: var(--text-2); }

@media (max-width: 900px) {
  .cohort-members { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .dash-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
  .cohort-members { grid-template-columns: 1fr; }
  .dash-metrics { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Client exposure assessment (assess.html)
   --------------------------------------------------------------------------- */

.gate { max-width: 520px; }
.gate .field + .field { margin-top: 16px; }
.gate .field-error { margin-top: 12px; }
.gate h2 { margin-top: 0; }
.gate-lede { color: var(--text-2); margin-bottom: 20px; }
.gate .form-actions { margin-top: 18px; }

.assess-form-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
}
.assess-form-head h2 { margin: 0; }
.assess-form-actions { display: flex; gap: 10px; }

.assess-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--gap);
  margin-top: 26px;
}
.assess-group { margin: 0; border: 1px solid var(--line); }
.assess-group legend { padding: 0; }
.assess-group legend h3 { margin: 0 0 4px; font-size: 1.05rem; }
.assess-group-note {
  font-size: 0.85rem;
  color: var(--text-3);
  margin: 0 0 16px;
}
.assess-fields { display: grid; gap: 16px; }
.assess-fields .field input { padding: 10px 12px; }
.assess-fields .field-hint { margin: 6px 0 0; }
.assess-fields .field input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.results-heading { margin-top: 40px; }
.results-heading:first-of-type { margin-top: 28px; }

.result-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--gap);
}
.result-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}
.result-card-warn { border-color: rgba(224, 166, 92, 0.45); }
.result-card-label {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 10px;
}
.result-card-value {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1.1;
  margin: 0 0 10px;
  color: var(--text);
}
.result-card-warn .result-card-value { color: var(--warn); }
.result-card-note { font-size: 0.85rem; color: var(--text-2); margin: 0; }

.score-panel { margin-top: var(--gap); }
.score-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
}
.score-label {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 6px;
}
.score-value {
  font-family: var(--serif);
  font-size: 2.6rem;
  line-height: 1;
  margin: 0;
}
.score-max { font-size: 1.1rem; color: var(--text-3); }
.score-band {
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  margin: 0;
}
.score-band-low { background: rgba(124, 224, 188, 0.14); color: var(--mint); }
.score-band-moderate { background: rgba(124, 224, 188, 0.1); color: var(--mint-dim); }
.score-band-high { background: rgba(224, 166, 92, 0.16); color: var(--warn); }
.score-band-critical { background: rgba(224, 122, 92, 0.18); color: #e8917a; }
.score-verdict { color: var(--text-2); margin: 18px 0 22px; }

.score-components { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.score-components li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px auto;
  align-items: center;
  gap: 14px;
  font-size: 0.88rem;
}
.score-component-label { color: var(--text-2); }
.score-component-points {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text-3);
  white-space: nowrap;
}
.score-bar, .driver-bar {
  display: block;
  height: 6px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.score-bar > span, .driver-bar > span {
  display: block;
  height: 100%;
  background: var(--mint-dim);
  border-radius: 999px;
}
.score-note { font-size: 0.82rem; color: var(--text-3); margin: 22px 0 0; }

.table-scroll { overflow-x: auto; margin-top: var(--gap); }
.result-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.result-table th, .result-table td {
  text-align: right;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.result-table thead th {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 700;
  border-bottom-color: var(--line);
}
.result-table tbody th[scope="row"] {
  text-align: left;
  font-weight: 600;
  color: var(--text);
}
.result-table .row-sub {
  display: block;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--text-3);
}
.result-table td { color: var(--text-2); font-variant-numeric: tabular-nums; }
.result-table .cell-strong { color: var(--text); font-weight: 600; }

.driver-list { display: grid; gap: 11px; margin-top: var(--gap); }
.driver-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px auto 52px;
  align-items: center;
  gap: 14px;
  font-size: 0.9rem;
}
.driver-label { color: var(--text-2); }
.driver-amount {
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}
.driver-share {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-3);
  text-align: right;
}

.cashflow-panel { margin-top: var(--gap); }
.cashflow-lede { color: var(--text-2); margin: 0 0 22px; }
.cashflow-chart svg { width: 100%; height: 180px; display: block; }
.cashflow-area { fill: rgba(124, 224, 188, 0.1); stroke: none; }
.cashflow-line { fill: none; stroke: var(--mint); stroke-width: 2; vector-effect: non-scaling-stroke; }
.cashflow-liquidity {
  stroke: var(--warn);
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
  vector-effect: non-scaling-stroke;
}
.cashflow-axis {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--text-3);
}
.cashflow-key { color: var(--warn); }

.hedge-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--gap);
  margin-top: var(--gap);
}
.hedge-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}
.hedge-available { border-left-color: var(--mint); }
.hedge-partial { border-left-color: var(--mint-deep); }
.hedge-none { border-left-color: var(--warn); }
/* Badge above the title, not beside it: the titles are long and the columns get
   narrow, and a side-by-side badge squeezes them into a ladder of single words. */
.hedge-head {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.hedge-head h4 { margin: 0; font-size: 1.02rem; }
.hedge-badge {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 9px;
  white-space: nowrap;
}
.hedge-none .hedge-badge { color: var(--warn); border-color: rgba(224, 166, 92, 0.4); }
.hedge-amount {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--mint);
  margin: 0 0 12px;
}
.hedge-covers { font-size: 0.9rem; color: var(--text-2); margin: 0 0 12px; }
.hedge-gap { font-size: 0.85rem; color: var(--text-3); margin: 0 0 12px; }
.hedge-gap strong { color: var(--text-2); }
.hedge-market {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.pricing-panel { margin-top: var(--gap); }
.pricing-lede { color: var(--text-2); margin: 0 0 22px; }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--gap);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-soft);
}
.pricing-label {
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 8px;
}
.pricing-value {
  font-family: var(--serif);
  font-size: 1.5rem;
  margin: 0;
  color: var(--text);
}
.pricing-note { font-size: 0.85rem; color: var(--text-3); margin: 20px 0 0; }

.assess-cta { margin-top: 44px; }
#assess-disclosure { margin-top: 26px; }

@media (max-width: 640px) {
  .score-components li { grid-template-columns: minmax(0, 1fr) auto; }
  .score-components .score-bar { display: none; }
  .driver-row { grid-template-columns: minmax(0, 1fr) auto; }
  .driver-row .driver-bar, .driver-row .driver-share { display: none; }
}

@media print {
  .site-header, .site-footer, .assess-form-actions, .assess-cta, #gate-section { display: none !important; }
  .section-alt { background: none; }
}

/* The client log-in sits in the nav beside the primary CTA. Muted so it reads as
   a utility link rather than competing with "Assess my business risk". */

/* Account bar: who is signed in, their saved assessments, and the save controls. */
.account-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: var(--gap);
  align-items: end;
}
.account-who h2 { margin: 0 0 6px; font-size: 1.15rem; }
.account-email { margin: 0; font-size: 0.85rem; color: var(--text-3); word-break: break-all; }
.account-saved { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.account-saved .field label { font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.account-saved .field input, .account-saved .field select { padding: 9px 12px; font-size: 0.92rem; }
.account-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.account-status {
  grid-column: 1 / -1;
  margin: 0;
  min-height: 1.2em;
  font-size: 0.85rem;
  color: var(--mint-dim);
}
.account-status-error { color: var(--warn); }

@media (max-width: 900px) {
  .account-bar { grid-template-columns: 1fr; align-items: stretch; }
  .account-actions { justify-content: flex-start; }
}
@media (max-width: 460px) {
  .account-saved { grid-template-columns: 1fr; }
}

/* Client accounts admin page. */
.invite-form h2 { margin-top: 0; }
.invite-form .field-hint { margin-top: 8px; }
.invite-form .account-status { margin-top: 14px; }
#clients-table td, #clients-table th { vertical-align: middle; }
#clients-table tbody th[scope="row"] { word-break: break-all; }

/* ---------------------------------------------------------------------------
   Signed-out view: the log-in should fill the screen it lands on, not sit
   below the fold. Height is viewport minus the sticky header, measured at
   runtime into --header-h so there is no magic number to drift. The footer
   falls below the fold, which is normal for a sign-in screen. Once signed in,
   JS drops .auth-screen and the page flows normally.
   --------------------------------------------------------------------------- */
.auth-screen {
  /* min-height, not height: a short window scrolls rather than clipping. */
  min-height: calc(100svh - var(--header-h, 68px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(20px, 4vh, 56px);
}
.auth-screen .section { padding-block: 0; }
.auth-screen .section-page-head { padding-bottom: clamp(18px, 3vh, 30px); }
.auth-screen .gate { max-width: none; }
.auth-screen .lede { margin-bottom: 0; font-size: 1rem; }

/* The marketing-sized h1 costs two wrapped lines here; this screen needs the
   form in view more than it needs a display heading. */
.auth-screen h1 {
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  margin-bottom: 0.3em;
}
.auth-screen .section-eyebrow { margin-bottom: 8px; }

/* On a short window the intro is the first thing to go: it is marketing copy,
   and the form is why anyone is on this screen. */
@media (max-height: 820px) {
  .auth-screen .lede { display: none; }
  .auth-screen h1 { font-size: clamp(1.6rem, 2.6vw, 2rem); }
  .auth-screen .section-page-head { padding-bottom: clamp(14px, 2vh, 22px); }
}
.auth-screen .gate h2 { font-size: 1.35rem; }
.auth-screen .gate-lede { margin-bottom: 18px; font-size: 0.94rem; }
.auth-screen .form-note { margin-top: 18px; }

/* ---------------------------------------------------------------------------
   How it works: six circles on a connecting line. Hovering or focusing a circle
   reveals its summary in a reserved strip below, so nothing reflows. Each dot is
   a real <button>, which is what makes this work on a keyboard and on touch —
   :focus-within covers both, since a tap focuses the button.
   --------------------------------------------------------------------------- */
/* Sits tight under the lede it belongs to, and reads as an instruction rather
   than prose: different family, size and colour from the sentence above. */
.section-hint {
  margin: 7px 0 0;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--mint-dim);
}

.steps {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  position: relative;
  /* The space for a summary opens only while one is showing, so the track sits
     tight against the next section at rest and pushes the page down on hover.
     :has() lets the parent react to a child's state, which is what makes the
     reserve conditional rather than permanent. */
  --summary-space: 118px;
  --summary-gap: 10px;
  padding-bottom: 0;
  transition: padding-bottom 0.26s ease;
}
/* The dot is the only trigger, here and for the summary itself. When the summary
   answered to .step:hover it fired across the whole grid cell while the space to
   hold it opened only on the dot -- so hovering beside a circle showed a summary
   with nowhere to go, and it landed on top of the circles. */
.steps:has(.step-dot:hover),
.steps:has(.step-dot:focus-visible) {
  padding-bottom: calc(var(--summary-space) + var(--summary-gap));
}

/* The connecting line, behind the dots, stopping at the first and last centres. */
.steps::before {
  content: "";
  position: absolute;
  top: 27px;
  left: calc(100% / 12);
  right: calc(100% / 12);
  height: 2px;
  background: var(--line);
}

.step {
  /* Deliberately NOT position:relative — the summary is absolutely positioned
     against .steps so it spans the whole track rather than one sixth of it. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 6px;
}

.step-dot {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--bg-raised);
  color: var(--text-2);
  font: inherit;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.step-num { font-family: var(--serif); font-size: 1.25rem; line-height: 1; }

.step-dot:hover,
.step-dot:focus-visible {
  border-color: var(--mint);
  background: var(--mint-deep);
  color: var(--mint);
  transform: translateY(-2px);
}
.step-dot:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }

.step-title {
  font-size: 0.82rem;
  line-height: 1.35;
  text-align: center;
  color: var(--text-3);
  transition: color 0.18s ease;
}
.step-dot:hover ~ .step-title,
.step-dot:focus-visible ~ .step-title { color: var(--text); }

/* One summary strip shared by all six, spanning the track so it can never
   overflow the viewport the way a per-dot tooltip would at the ends. */
.step-summary {
  position: absolute;
  text-align: center;
  background: var(--surface-2);
  /* top:100% is the bottom of the padding box, so stepping back by the reserved
     space lands exactly at the top of it — directly under the titles. */
  top: calc(100% - var(--summary-space));
  left: 0;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line-mint);
  border-radius: var(--radius);
  padding: 26px 28px 24px;
  line-height: 1.4;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  pointer-events: none;
}
.step-summary strong { color: var(--text); font-weight: 600; }
/* The panel spans the track so its edges line up with the circles, but the text
   inside sits on a readable measure rather than running the full width. */
.step-summary span { display: block; max-width: 62ch; margin-inline: auto; }
/* Two tiers: the lead carries the point and does the catching, the detail says
   what the step actually involves. A single flat sentence of nouns read as a
   spec line and slid straight past the eye. */
.step-lead {
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.step-detail {
  margin-top: 6px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-3);
}
/* A short mint rule above the sentence: centred text on its own did not pull the
   eye down from the circles, and this marks the panel as the active thing
   without repeating the title already highlighted above it. */
.step-summary::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 50%;
  width: 26px;
  height: 2px;
  margin-left: -13px;
  border-radius: 2px;
  background: var(--mint);
}

.step-dot:hover ~ .step-summary,
.step-dot:focus-visible ~ .step-summary {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .steps, .step-dot, .step-title, .step-summary { transition: none; }
  .step-dot:hover, .step-dot:focus-visible { transform: none; }
}

/* Narrow screens: no hover to rely on, so the line runs vertically and every
   summary is simply shown. */
@media (max-width: 800px) {
  .steps {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-bottom: 0;
  }
  .steps::before {
    top: 10px;
    bottom: 10px;
    left: 27px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .step {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding: 0;
    text-align: left;
  }
  .step-dot { flex: 0 0 auto; }
  .step-title { display: none; }
  .step-summary {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    background: none;
    border: 0;
    padding: 8px 0 0;
    text-align: left;
  }
  .step-lead { font-size: 0.98rem; }
  .step-detail { margin-top: 3px; font-size: 0.86rem; }
  /* The summary is static here, so an absolutely positioned marker would escape
     to .steps and land somewhere arbitrary. */
  .step-summary::before { display: none; }
  .step-summary span { max-width: none; margin-inline: 0; }
  .section-hint { display: none; }
}


/* ---------------------------------------------------------------------------
   Menu panel
   One button at every breakpoint rather than inline links that collapse into a
   different component below a breakpoint: the same markup, the same script and
   the same keyboard behaviour on a phone and on a desktop. script.js already
   handles the toggle, Escape, click-outside and close-on-navigate.
   --------------------------------------------------------------------------- */
.nav-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }

/* The panel is positioned against the header's wrap, not the header, so it
   lines up with the wordmark on the left and the Menu button on the right
   instead of running the full width of the viewport. The inset repeats .wrap's
   own padding, because absolute positioning resolves against the padding box
   and the wordmark sits inside that padding. */
.site-header .nav { position: relative; --wrap-pad: clamp(20px, 4vw, 40px); }

.site-menu {
  position: absolute;
  top: 100%;
  left: var(--wrap-pad, 0px);
  right: var(--wrap-pad, 0px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 36px);
  margin-top: 10px;
  padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 28px) clamp(22px, 2.6vw, 30px);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 45;
}
.site-menu[data-open] { opacity: 1; visibility: visible; transform: translateY(0); }

.menu-group-title {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 14px;
}
.menu-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.menu-group-title:hover, .menu-group-title:focus-visible { color: var(--mint); text-decoration: none; }

.menu-group ul a {
  display: block;
  padding: 8px 10px;
  margin-left: -10px;
  border-radius: 7px;
  font-size: 0.98rem;
  color: var(--text-2);
}
.menu-group ul a:hover, .menu-group ul a:focus-visible { background: var(--surface); color: var(--text); }

/* The unlabelled group lines up with the others that carry a heading. */
.menu-group-plain ul { margin-top: calc(0.72rem * 1.2 + 14px); }

.nav-toggle { display: inline-flex; }

@media (prefers-reduced-motion: reduce) { .site-menu { transition: none; } }

@media (max-width: 620px) {
  .nav-login { padding: 7px 12px; white-space: nowrap; }
  .site-menu { grid-template-columns: 1fr; gap: 20px; }
  .menu-group-plain ul { margin-top: 0; }
}

/* ---------------------------------------------------------------------------
   Condensed header
   Past the fold the bar detaches from the edges and becomes a floating pill,
   with the page scrolling beneath it. script.js toggles .is-condensed; the
   threshold is deliberately small so the change happens once, early, rather
   than flickering around a scroll position the reader is likely to sit at.
   --------------------------------------------------------------------------- */
.site-header {
  transition: background 0.25s ease, border-color 0.25s ease, padding-top 0.3s ease;
}
.site-header .nav {
  transition: max-width 0.3s ease, padding 0.3s ease, min-height 0.3s ease,
    background 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease,
    border-color 0.3s ease;
  border: 1px solid transparent;
}

.site-header.is-condensed {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  /* Padding, not a margin on .nav: a child's top margin collapses straight
     through a parent with no top border or padding, so the gap never appeared. */
  padding-top: 10px;
}
.site-header.is-condensed .nav {
  /* Narrower than the wrap so it reads as a floating object, not a bar. */
  max-width: min(940px, calc(100% - 32px));
  min-height: 56px;
  padding-left: 22px;
  padding-right: 10px;
  background: rgba(12, 19, 17, 0.88);
  backdrop-filter: saturate(150%) blur(14px);
  border-color: var(--line);
  border-radius: 999px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.5);
  /* The panel lines up with the pill's inner edge rather than the wrap's. */
  --wrap-pad: 22px;
}

@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header .nav { transition: none; }
}
@media (max-width: 620px) {
  .site-header.is-condensed .nav {
    max-width: calc(100% - 20px);
    padding-left: 16px;
    padding-right: 8px;
  }
  .site-header.is-condensed { --wrap-pad: 16px; }
}

/* ---------------------------------------------------------------------------
   Account page: two side-by-side choices rather than two cards stranded in a
   three-column grid. Each card is a flex column so the buttons sit on a shared
   baseline however long the copy above them runs.
   --------------------------------------------------------------------------- */
.account-choices {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.account-choices .report-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 24px;
}
.account-choices .report-card h2 { margin: 0 0 10px; font-size: 1.15rem; }
.account-choices .report-card p { margin: 0; }
/* Needs .report-card in the selector: the rule above is (0,2,1) and a bare
   `.account-choices .cta-row` is (0,2,0), so its margin shorthand would win and
   zero the auto margin that does the aligning. */
.account-choices .report-card .cta-row {
  /* Pushes the button to the foot of the card, so both buttons line up. */
  margin-top: auto;
  padding-top: 20px;
  justify-content: center;
}
.account-soon { margin-top: var(--gap); }
.account-soon .fineprint { margin-bottom: 0; }

@media (max-width: 560px) {
  .account-choices { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Exposure Report explorer
   Six near-identical paragraphs read as one wall of text, so the sections are a
   tablist instead: one at a time, each with a small preview of what that part of
   the report actually looks like. The first panel ships open and the rest ship
   `hidden`, so the content is all in the document whether or not the script runs.
   --------------------------------------------------------------------------- */
.report-explorer {
  display: grid;
  grid-template-columns: minmax(210px, 0.85fr) minmax(0, 2fr);
  gap: clamp(20px, 2.6vw, 36px);
  margin-top: 30px;
  align-items: start;
}

.rp-tabs { display: grid; gap: 4px; }
.rp-tab {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding: 13px 15px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-3);
  font: inherit;
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.rp-tab:hover { background: var(--surface); color: var(--text-2); }
.rp-tab:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.rp-tab[aria-selected="true"] {
  background: var(--surface);
  border-color: var(--line-mint);
  color: var(--text);
}
.rp-num {
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--text-3);
}
.rp-tab[aria-selected="true"] .rp-num { color: var(--mint); }

.rp-panels {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 2.4vw, 28px);
}
.rp-panel h3 { margin: 0 0 10px; font-size: 1.15rem; }
.rp-desc { color: var(--text-2); margin: 0 0 22px; font-size: 0.95rem; }
.rp-caption {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 12px;
}
.rp-note { font-size: 0.85rem; color: var(--text-3); margin: 14px 0 0; }

/* The previews share one surface, so they need a common inner treatment. */
.rp-map, .rp-bars, .rp-changes, .rp-options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 0.9rem;
}
.rp-map li, .rp-changes li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, auto);
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}
.rp-event, .rp-label { color: var(--text); }
.rp-hits, .rp-when { color: var(--text-3); font-size: 0.84rem; text-align: right; }
.rp-arrow {
  width: 22px;
  height: 1px;
  background: var(--line);
  position: relative;
}
.rp-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -2px;
  width: 5px;
  height: 5px;
  border-top: 1px solid var(--mint-dim);
  border-right: 1px solid var(--mint-dim);
  transform: rotate(45deg);
}

.rp-bars li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(90px, 1.6fr) auto;
  align-items: center;
  gap: 14px;
}
.rp-bar {
  display: block;
  height: 7px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.rp-bar > span { display: block; height: 100%; background: var(--mint-dim); border-radius: 999px; }
.rp-bar > .rp-bar-you { background: var(--mint); }
.rp-val {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text-2);
  white-space: nowrap;
  text-align: right;
}

.rp-delta { font-family: var(--mono); font-size: 0.82rem; white-space: nowrap; }
.rp-up { color: var(--warn); }
.rp-down { color: var(--mint); }

.rp-options li {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}
.rp-covers { color: var(--text-2); font-size: 0.86rem; }
.rp-gap { color: var(--text-3); font-size: 0.82rem; }
.rp-gap::before { content: "\2014\00a0"; }

.rp-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.rp-table th, .rp-table td { text-align: right; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
.rp-table thead th {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 700;
}
.rp-table tbody th[scope="row"] { text-align: left; color: var(--text); font-weight: 600; }
.rp-table td { color: var(--text-2); font-variant-numeric: tabular-nums; }
.rp-table tbody tr:last-child th, .rp-table tbody tr:last-child td { border-bottom: 0; }

@media (prefers-reduced-motion: reduce) { .rp-tab { transition: none; } }

@media (max-width: 860px) {
  .report-explorer { grid-template-columns: 1fr; }
  /* The tabs become a horizontal strip above the panel rather than a column. */
  .rp-tabs {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 4px;
  }
  .rp-tab { white-space: nowrap; padding: 10px 13px; }
}
@media (max-width: 560px) {
  .rp-map li, .rp-changes li { grid-template-columns: 1fr auto; }
  .rp-arrow { display: none; }
  .rp-bars li { grid-template-columns: minmax(0, 1fr) auto; }
  .rp-bars .rp-bar { display: none; }
}



/* ---------------------------------------------------------------------------
   Exposure monitor
   .dash is chrome with no padding of its own -- .dash-head and .dash-row each
   bring theirs -- so anything dropped straight into it sits flush against the
   card edge. The body below supplies the same breathing room the report panel
   above it has, which is what stopped these two reading as one family.
   --------------------------------------------------------------------------- */
.monitor-body { padding: clamp(20px, 2.4vw, 28px); }

.monitor-bar {
  display: grid;
  /* The total sized to its content rather than 1fr: given a full-width column it
     left a wide empty gap before the slider, which took the leftovers on the far
     right. This way the slider starts next to the figure and takes the rest. */
  grid-template-columns: max-content minmax(320px, 1fr);
  align-items: start;
  gap: 20px 28px;
  padding-bottom: 22px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
}

.monitor-total { display: grid; gap: 4px; margin: 0; }
.monitor-total-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.monitor-total-value {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 2.6vw, 2.1rem);
  line-height: 1.05;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.monitor-total-delta { font-size: 0.85rem; color: var(--text-3); }
.monitor-total-delta-up { color: var(--warn); }
.monitor-total-delta-down { color: var(--mint); }

.monitor-scrub { margin: 0; align-self: end; }
.monitor-scrub label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-3);
  margin-bottom: 8px;
}
.monitor-scrub input[type="range"] {
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  accent-color: var(--mint);
  cursor: grab;
}
.monitor-scrub input[type="range"]:active { cursor: grabbing; }
.monitor-scrub input[type="range"]:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
.monitor-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--text-3);
}

.monitor-table {
  width: 100%;
  min-width: 440px;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.monitor-table th, .monitor-table td {
  text-align: right;
  padding: 13px 0 13px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.monitor-table thead th {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 700;
}
.monitor-table tbody th[scope="row"] {
  text-align: left;
  padding-left: 0;
  color: var(--text);
  font-weight: 600;
}
.monitor-table thead th:first-child { text-align: left; padding-left: 0; }
.monitor-table td { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.monitor-table tbody tr:last-child th,
.monitor-table tbody tr:last-child td { border-bottom: 0; }

/* Why the number moved, which is the point of a monitor. */
.dash-note {
  display: block;
  font-size: 0.76rem;
  font-weight: 400;
  color: var(--text-3);
  margin-top: 2px;
}
.num-up { color: var(--warn); }
.num-down { color: var(--mint); }
.num-flat, .num-new { color: var(--text-3); }

@media (max-width: 760px) {
  .monitor-bar { grid-template-columns: 1fr; }
  .monitor-scrub { align-self: start; }
}


/* ---------------------------------------------------------------------------
   Coverage picker
   Rests as a plain list of businesses; hovering one opens the space beneath.
   The panel animates on grid-template-rows 0fr -> 1fr, which is the one way to
   transition to an automatic height without measuring it in script.
   --------------------------------------------------------------------------- */
.coverage-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}
.cov-pick {
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--text-2);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cov-pick:hover { color: var(--text); border-color: var(--line-mint); }
.cov-pick:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.cov-pick.is-active {
  background: var(--mint-deep);
  border-color: var(--mint);
  color: var(--mint);
}

/* Not a button: the list is illustrative, and a dead control that looks live is
   worse than a label that plainly is not one. */
.cov-more { padding: 9px 4px; font-size: 0.9rem; color: var(--text-3); }

/* Open by default, so with no script the section still lists risks rather than
   showing an empty gap under the business names. company.js adds .js-ready on
   init, which is what makes collapsed the resting state. */
.coverage-reveal {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 0.28s ease, opacity 0.2s ease;
}
.coverage-reveal.js-init { transition: none; }
.coverage-reveal.js-ready { grid-template-rows: 0fr; opacity: 0; }
.coverage-reveal.js-ready.is-open { grid-template-rows: 1fr; opacity: 1; }
.coverage-reveal-inner { overflow: hidden; min-height: 0; }

.coverage-read {
  margin: 20px 0 0;
  font-size: 0.98rem;
  color: var(--text-2);
}
.coverage-chips { margin-top: 14px; }
.coverage-chips li { border-color: var(--line-mint); color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .cov-pick, .coverage-reveal { transition: none; }
}

/* ==========================================================================
   Administrator view of a client workspace
   ========================================================================== */

.admin-view-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-color: rgba(224, 166, 92, 0.4);
  background: rgba(224, 166, 92, 0.07);
}
.admin-view-label {
  margin: 0 0 6px;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--warn);
}
.admin-view-client { margin: 0 0 6px; color: var(--text); }
.admin-view-client strong { font-family: var(--mono); font-size: 0.95rem; }
.admin-view-note { margin: 0; font-size: 0.88rem; color: var(--text-3); max-width: 60ch; }

.row-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ==========================================================================
   About / How / Theory: header pills and their dialogs
   ========================================================================== */

.info-pills {
  display: flex;
  gap: 4px;
  padding: 3px;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
}
.info-pills + .nav-actions { margin-left: 0; }
.info-pill {
  font: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text-2);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 6px 13px;
  cursor: pointer;
}
.info-pill:hover { color: var(--text); background: var(--surface); }
.info-pill:focus-visible { outline: 2px solid var(--mint); outline-offset: 1px; }
.info-pill[aria-expanded="true"] { color: var(--on-mint); background: var(--mint); }

/* In the menu, the same three open as plain rows; shown only when the pills
   are hidden for want of room. */
.menu-info { display: none; }
.menu-info button {
  display: block;
  width: calc(100% + 10px);
  padding: 8px 10px;
  margin-left: -10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  font: inherit;
  font-size: 0.98rem;
  text-align: left;
  color: var(--text-2);
  cursor: pointer;
}
.menu-info button:hover, .menu-info button:focus-visible { background: var(--surface); color: var(--text); }

@media (max-width: 640px) {
  .info-pills { display: none; }
  .info-pills + .nav-actions { margin-left: auto; }
  .menu-info { display: block; }
}

.info-dialog {
  width: min(620px, calc(100% - 32px));
  max-height: min(86vh, 900px);
  padding: 0;
  color: var(--text);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  overflow: auto;
  overscroll-behavior: contain;
}
.info-dialog-wide { width: min(760px, calc(100% - 32px)); }
.info-dialog::backdrop { background: rgba(3, 6, 5, 0.72); backdrop-filter: blur(3px); }
.info-dialog[open] { animation: info-in 0.18s ease; }
@keyframes info-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .info-dialog[open] { animation: none; } }

.info-inner { padding: clamp(22px, 4vw, 36px); }
.info-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.info-head .section-eyebrow { margin: 0; }
.info-close {
  width: 36px; height: 36px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.info-close:hover { color: var(--text); border-color: var(--line-mint); }
.info-dialog h2 { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 1.95rem); margin-top: 16px; }
.info-dialog h3 { font-size: 1.06rem; margin-bottom: 0.35em; }

.info-list { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 12px; }
.info-list li {
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.95rem;
}
.info-list strong { display: block; margin-bottom: 2px; }

.info-steps { list-style: none; counter-reset: info-step; padding: 0; margin: 22px 0 0; display: grid; gap: 4px; }
.info-steps li {
  counter-increment: info-step;
  position: relative;
  padding: 0 0 18px 50px;
}
.info-steps li::before {
  content: counter(info-step);
  position: absolute; left: 0; top: -2px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--line-mint);
  border-radius: 50%;
  color: var(--mint);
  font-family: var(--serif);
  font-weight: 600;
}
.info-steps li:not(:last-child)::after {
  content: "";
  position: absolute; left: 16px; top: 34px; bottom: 4px;
  width: 1px;
  background: var(--line);
}
.info-steps p { font-size: 0.95rem; }

.info-theory { display: grid; gap: 26px; margin-top: 22px; }
.info-theory section { padding-top: 22px; border-top: 1px solid var(--line-soft); }
.info-theory p { font-size: 0.97rem; }
.info-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0 16px; }
.info-three div {
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.info-three dt { font-family: var(--serif); font-weight: 600; color: var(--mint); margin-bottom: 4px; }
.info-three dd { margin: 0; font-size: 0.88rem; color: var(--text-2); line-height: 1.5; }
@media (max-width: 560px) { .info-three { grid-template-columns: 1fr; } }

.info-fine { margin-top: 20px; font-size: 0.86rem; color: var(--text-3); }

/* ==========================================================================
   Market studies
   ========================================================================== */

.study-summary { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.study-table { min-width: 760px; }
.study-table th, .study-table td { text-align: left; vertical-align: top; }
.study-table thead th { white-space: nowrap; }
.study-cover { font-weight: 600; white-space: nowrap; }
.study-cover-low { color: var(--warn); }
.study-cover-ok { color: var(--mint); }

.study { border-top: 1px solid var(--line-soft); }
.study h2 { max-width: 28ch; }
.study-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: 24px;
}
.study-col {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 2.8vw, 28px);
}
.study-facts { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 12px; }
.study-facts li { font-size: 0.95rem; color: var(--text-2); line-height: 1.5; }
.study-fig {
  display: block;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.study-source { font-size: 0.85rem; color: var(--text-3); margin-top: 12px; }

.study-market {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  margin-bottom: 16px;
  border: 1px solid var(--line-mint);
  border-radius: var(--radius-sm);
  background: rgba(124, 224, 188, 0.04);
}
.study-q { color: var(--text); font-weight: 500; }
.study-ticker { font-family: var(--mono); font-size: 0.8rem; word-break: break-all; }

.study-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; }
.study-stats div { padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.study-stats dt {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.study-stats dd { margin: 2px 0 0; color: var(--text); font-size: 0.92rem; font-weight: 600; line-height: 1.35; }
.study-col p { font-size: 0.95rem; }

.study-read { margin-top: var(--gap); }
.study-read h3 { margin-bottom: 14px; }
.study-verdict {
  margin-top: 18px;
  padding: 16px 18px;
  border-left: 3px solid var(--mint);
  background: var(--surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.97rem;
}

@media (max-width: 860px) {
  .study-grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .study-stats { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Home: Try a real company, the Run-example machine, Business risk worlds,
   Worked examples. Driven by home.js + cases-data.js.
   ========================================================================== */

:root { --neg: #e0866c; }

.starter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 26px; }
.starter-label { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.starter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.starter-chip {
  font: inherit; font-size: 0.88rem; color: var(--text-2);
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.starter-chip:hover, .starter-chip:focus-visible { color: var(--text); border-color: var(--line-mint); background: rgba(124, 224, 188, 0.06); }

/* ---- Machine ---------------------------------------------------------- */

.machine { border-top: 1px solid var(--line-soft); }
.machine-picker { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 14px; }
.machine-pick {
  display: grid; text-align: left; gap: 1px; font: inherit; cursor: pointer;
  padding: 10px 16px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line); color: var(--text-2);
  transition: border-color 0.15s, background 0.15s;
}
.machine-pick strong { color: var(--text); font-size: 0.95rem; }
.machine-pick span { font-size: 0.8rem; color: var(--text-3); }
.machine-pick:hover { border-color: var(--line-mint); }
.machine-pick[aria-pressed="true"] { border-color: var(--mint); background: rgba(124, 224, 188, 0.08); }
.machine-pick[aria-pressed="true"] span { color: var(--mint); }

.machine-board {
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  background: radial-gradient(120% 80% at 100% 0%, rgba(124, 224, 188, 0.06), transparent 60%), var(--bg-raised);
  overflow: hidden;
}
.machine-sentence { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; padding: 18px clamp(18px, 2.6vw, 28px); border-bottom: 1px solid var(--line-soft); }
.machine-sentence blockquote { margin: 0; font-family: var(--serif); font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); line-height: 1.3; color: var(--text); }
.machine-source { font-size: 0.8rem; white-space: nowrap; }

/* One fixed screen; every stage replaces the one before it. */
.machine-screen { position: relative; overflow: hidden; transition: height 0.5s cubic-bezier(.2,.8,.2,1); }
.machine-idle { display: grid; place-items: center; padding: clamp(26px, 3vw, 36px) 20px; }
.machine-idle[hidden] { display: none; }
.machine-run { gap: 10px; animation: run-glow 2.4s ease-out infinite; }
.machine-run-icon { width: 0; height: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
@keyframes run-glow { 0% { box-shadow: 0 0 0 0 rgba(124, 224, 188, 0.45); } 70%, 100% { box-shadow: 0 0 0 18px rgba(124, 224, 188, 0); } }

.machine-output { }
.mframe {
  padding: 48px clamp(18px, 2.6vw, 28px) clamp(18px, 2.6vw, 26px);
  display: flex; flex-direction: column; gap: 16px;
  opacity: 0; transform: translateY(8px); transition: opacity 0.3s ease, transform 0.3s ease;
}
.mframe.is-in { opacity: 1; transform: none; }
.mframe-label { position: absolute; top: 16px; left: clamp(18px, 2.6vw, 28px); margin: 0; display: flex; gap: 10px; align-items: center; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.mframe-label span { color: var(--mint); font-family: var(--mono); letter-spacing: 0; }

.mfig, .mcand, .meq > * { opacity: 0; animation: m-in 0.4s ease forwards; animation-delay: var(--d, 0ms); }
@keyframes m-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.mfigs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mfig strong { display: block; font-family: var(--serif); font-size: clamp(2rem, 1.3rem + 2.6vw, 3.2rem); line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--text); }
.mfig span { font-size: 0.92rem; color: var(--text-3); }

.mcands { display: grid; gap: 10px; }
.mcand { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line-soft); background: var(--surface); }
.mcand strong { font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem); font-weight: 600; }
.mcand-mark { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; }
.mcand-rejected .mcand-mark { color: var(--neg); background: rgba(224, 134, 108, 0.12); }
.mcand-rejected strong { color: var(--text-3); text-decoration: line-through; text-decoration-color: rgba(224, 134, 108, 0.6); }
.mcand-chosen { border-color: var(--mint); background: rgba(124, 224, 188, 0.08); box-shadow: 0 10px 30px rgba(124, 224, 188, 0.08); }
.mcand-chosen .mcand-mark { background: var(--mint); color: var(--on-mint); }
.mcand-pick { font-family: var(--serif); font-size: 1.4rem; color: var(--mint); white-space: nowrap; }

.mbook-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(16px, 3vw, 40px); align-items: center; }
.mbook { display: grid; gap: 5px; font-variant-numeric: tabular-nums; }
.mbook-row { display: grid; grid-template-columns: 52px 1fr 76px; align-items: center; gap: 12px; opacity: 0.15; transition: opacity 0.2s; }
.mbook-row.is-in { opacity: 1; }
.mbook-price { font-family: var(--mono); font-size: 0.9rem; }
.mbook-bar { height: 16px; border-radius: 4px; background: rgba(255, 255, 255, 0.03); overflow: hidden; }
.mbook-fill { display: block; height: 100%; width: 0; border-radius: 4px; transition: width 0.5s cubic-bezier(.2,.8,.2,1); }
.mbook-row.is-in .mbook-fill { width: var(--w); }
.mbook-row.is-counted .mbook-fill { background: linear-gradient(90deg, var(--mint-dim), var(--mint)); }
.mbook-row.is-over .mbook-fill { background: rgba(255, 255, 255, 0.12); }
.mbook-row.is-over .mbook-price, .mbook-row.is-over .mbook-qty { color: var(--text-3); text-decoration: line-through; }
.mbook-qty { text-align: right; font-size: 0.9rem; color: var(--text-2); }
.mbook-side { display: grid; text-align: right; }
.mbook-total { font-family: var(--serif); font-size: clamp(2.4rem, 1.5rem + 3vw, 4rem); line-height: 1; color: var(--mint); font-variant-numeric: tabular-nums; }
.mbook-side span { font-size: 0.9rem; color: var(--text-3); }

.meq { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(10px, 2vw, 24px); text-align: center; }
.meq-line { display: grid; }
.meq-line b, .meq-result { font-family: var(--serif); font-weight: 600; font-size: clamp(1.8rem, 1.1rem + 2.6vw, 3rem); line-height: 1.05; font-variant-numeric: tabular-nums; }
.meq-line span { font-size: 0.9rem; color: var(--text-3); }
.meq-op { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); color: var(--mint); }
.meq-line.is-result .meq-result { color: var(--mint); min-width: 3ch; }

/* The result: one big number */
.mframe.is-result { padding-top: clamp(18px, 2.6vw, 26px); }
.mresult { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-areas: "main nums" "actions actions"; gap: 18px clamp(18px, 3vw, 40px); align-items: center; }
.mresult-main { grid-area: main; display: grid; justify-items: start; gap: 2px; }
.mresult-big { font-family: var(--serif); font-weight: 600; font-size: clamp(3.6rem, 2rem + 6vw, 6.4rem); line-height: 0.95; letter-spacing: -0.03em; color: var(--mint); font-variant-numeric: tabular-nums; margin-top: 10px; text-shadow: 0 0 40px rgba(124, 224, 188, 0.25); }
.mresult-big.is-low { color: var(--neg); text-shadow: 0 0 40px rgba(224, 134, 108, 0.2); }
.mresult-cap { font-size: 1rem; color: var(--text-2); }
.mresult-verdict { margin: 10px 0 0; font-family: var(--serif); font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); color: var(--text); }
.mresult-nums { grid-area: nums; margin: 0; display: grid; gap: 8px; }
.mresult-nums div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line-soft); }
.mresult-nums dt { font-size: 0.85rem; color: var(--text-3); }
.mresult-nums dd { margin: 0; font-family: var(--serif); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-variant-numeric: tabular-nums; }
.mresult-nums .is-pay dd { color: var(--mint); }
.mresult-actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 8px; }

.status-badge {
  display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line);
}
.status-badge.status-full { color: var(--on-mint); background: var(--mint); border-color: var(--mint); }
.status-badge.status-partial { color: var(--warn); border-color: rgba(224, 166, 92, 0.4); }
.status-badge.status-gap { color: var(--neg); border-color: rgba(224, 134, 108, 0.4); }
.status-badge.status-research { color: var(--text-3); }

@media (max-width: 700px) {
  .mfigs { grid-template-columns: 1fr; gap: 10px; }
  .mfig { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .mfig strong { font-size: 2rem; }
  .mcand { grid-template-columns: 26px minmax(0, 1fr); }
  .mcand-pick { grid-column: 2; }
  .mbook-wrap { grid-template-columns: 1fr; }
  .mbook-side { text-align: left; }
  .mbook-row { grid-template-columns: 44px 1fr 64px; }
  .mresult { grid-template-columns: 1fr; grid-template-areas: "main" "nums" "actions"; }
  .mresult-nums div { padding: 8px 12px; }
}

/* ---- Business risk ---------------------------------------------------- */

.risk { border-top: 1px solid var(--line-soft); }
.risk h2 { max-width: 22ch; }
.risk-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.risk-stats article { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); display: grid; gap: 2px; }
.risk-stats span { font-size: 0.9rem; color: var(--text-3); }
.risk-stats strong { font-family: var(--serif); font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.4rem); font-variant-numeric: tabular-nums; line-height: 1.05; }
.risk-stats .risk-stat-pay { border-color: var(--line-mint); background: rgba(124, 224, 188, 0.05); }
.risk-stats .risk-stat-pay strong { color: var(--mint); }

.world { margin-top: 16px; }
.world-switch { display: inline-flex; padding: 4px; gap: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); margin-bottom: 12px; }
.world-btn { font: inherit; font-size: 0.95rem; font-weight: 600; padding: 9px 20px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); cursor: pointer; transition: background 0.2s, color 0.2s; }
.world-btn.is-active { background: var(--mint); color: var(--on-mint); }
.world-btn[data-world="quiet"].is-active { background: var(--text-2); color: var(--bg); }

.world-stage {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 40px); align-items: center;
  padding: clamp(18px, 2.6vw, 28px); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px);
  background: var(--bg-raised); transition: border-color 0.3s;
}
.world-stage[data-world="happens"] { border-color: var(--line-mint); }
.world-ledger .section-eyebrow { margin-bottom: 6px; font-size: 0.85rem; }
.ledger-rows div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 1.05rem; }
.ledger-rows span { color: var(--text-2); }
.ledger-rows strong { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.is-neg { color: var(--neg); }
.is-pos { color: var(--mint); }
.ledger-net { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 10px; }
.ledger-net span { font-weight: 600; color: var(--text); font-size: 1.05rem; }
.ledger-net strong { font-family: var(--serif); font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.2rem); font-variant-numeric: tabular-nums; line-height: 1; }

.world-visual { display: grid; gap: 14px; }
.offset-bars { display: grid; gap: 12px; }
.ob-row { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 12px; }
.ob-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.ob-track { height: 28px; border-radius: 6px; background: rgba(255, 255, 255, 0.03); overflow: hidden; position: relative; }
.ob-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 6px; transition: width 0.8s cubic-bezier(.2,.8,.2,1); }
.ob-loss { background: linear-gradient(90deg, rgba(224, 134, 108, 0.55), var(--neg)); }
.ob-pay { background: linear-gradient(90deg, var(--mint-dim), var(--mint)); box-shadow: 0 0 14px rgba(124, 224, 188, 0.5); }
.ob-net { background: repeating-linear-gradient(135deg, rgba(224, 134, 108, 0.75) 0 6px, rgba(224, 134, 108, 0.45) 6px 12px); }
.ob-fill.is-sliver { min-width: 4px; animation: sliver 1.6s ease-in-out infinite; }
@keyframes sliver { 50% { opacity: 0.45; } }
.world-cancel { margin: 0; font-family: var(--serif); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); color: var(--text); }

.world-eligibility { margin: 12px 0 0; padding: 10px 16px; border-radius: var(--radius-sm); border: 1px solid rgba(224, 166, 92, 0.4); background: rgba(224, 166, 92, 0.07); color: var(--warn); font-size: 0.95rem; }

@media (max-width: 700px) {
  .risk-stats { grid-template-columns: 1fr; }
  .risk-stats article { display: flex; justify-content: space-between; align-items: baseline; }
  .world-stage { grid-template-columns: 1fr; }
}

/* ---- Worked examples -------------------------------------------------- */

.examples { border-top: 1px solid var(--line-soft); }
.examples-explorer { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: var(--gap); margin-top: 26px; align-items: start; }
.examples-source { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); margin-bottom: 12px; }
.examples-tab { font: inherit; font-size: 0.9rem; font-weight: 600; padding: 7px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); cursor: pointer; }
.examples-tab span { margin-left: 4px; font-size: 0.78rem; opacity: 0.75; }
.examples-tab.is-active { background: var(--text); color: var(--bg); }
.examples-rail { display: grid; gap: 6px; max-height: 520px; overflow-y: auto; padding-right: 4px; }
.examples-item {
  width: 100%; display: grid; grid-template-columns: 30px minmax(0, 1fr) 10px; align-items: center; gap: 12px;
  text-align: left; font: inherit; cursor: pointer;
  padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-soft); background: transparent; color: var(--text-2);
  transition: border-color 0.15s, background 0.15s;
}
.examples-item:hover { border-color: var(--line); background: var(--surface); }
.examples-item.is-active { border-color: var(--mint); background: rgba(124, 224, 188, 0.06); }
.examples-num { font-family: var(--mono); font-size: 0.8rem; color: var(--text-3); }
.examples-text { display: grid; min-width: 0; }
.examples-text strong { color: var(--text); font-size: 0.95rem; }
.examples-text small { font-size: 0.8rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-3); }
.status-dot.status-full { background: var(--mint); box-shadow: 0 0 8px rgba(124, 224, 188, 0.7); }
.status-dot.status-partial { background: var(--warn); }
.status-dot.status-gap { background: var(--neg); }
.status-dot.status-research { background: transparent; border: 1px dashed var(--text-3); }
.examples-item.status-research .examples-text strong { color: var(--text-2); }

.examples-preview {
  padding: clamp(20px, 3vw, 32px); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px);
  background: radial-gradient(100% 70% at 100% 0%, rgba(124, 224, 188, 0.05), transparent 60%), var(--bg-raised);
  animation: m-in 0.3s ease;
}
.preview-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.examples-preview h3 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); margin: 14px 0 2px; }
.preview-place { font-size: 0.88rem; color: var(--text-3); }
.examples-preview blockquote { margin: 16px 0; padding-left: 16px; border-left: 2px solid var(--line-mint); font-family: var(--serif); font-size: 1.1rem; line-height: 1.45; color: var(--text); }
.preview-finding { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--surface); }
.preview-finding span { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mint); }
.preview-finding strong { font-weight: 500; font-size: 0.97rem; line-height: 1.5; }
.preview-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.preview-stats div { padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.preview-stats dt { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.preview-stats dd { margin: 2px 0 0; font-family: var(--serif); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); color: var(--text); }
.preview-stats .is-pos dd { color: var(--mint); }
.preview-stats .is-neg dd { color: var(--neg); }
.preview-limit { font-size: 0.9rem; color: var(--text-3); }
.examples-preview .cta-row { margin-top: 14px; }

@media (max-width: 860px) {
  .examples-explorer { grid-template-columns: 1fr; }
  .examples-rail { max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
  .machine-screen { transition: none; }
  .machine-run, .ob-fill.is-sliver { animation: none; }
  .mframe, .mbook-row, .mbook-fill, .ob-fill { transition: none; }
  .mfig, .mcand, .meq > *, .examples-preview { animation: none; opacity: 1; }
}

/* ==========================================================================
   How / Theory: pinned visual beside scrolling text (script.js sets
   .scrolly-visual[data-active] from the step nearest the reading line)
   ========================================================================== */

.info-dialog-scrolly { width: min(1080px, calc(100% - 32px)); max-height: 90vh; }
.info-sub { font-size: 0.95rem; color: var(--text-3); }

.scrolly {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(20px, 3vw, 40px);
  margin-top: 18px;
  align-items: start;
}
.scrolly-text { padding-bottom: 14vh; }
.scrolly-step {
  min-height: 20vh;
  padding: 8px 0 8px 46px;
  position: relative;
  opacity: 0.35;
  transition: opacity 0.35s ease;
}
.scrolly-step.is-active { opacity: 1; }
.scrolly-num {
  position: absolute; left: 0; top: 10px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 600; font-size: 0.95rem;
  border: 1px solid var(--line); color: var(--text-3);
  transition: all 0.3s;
}
.scrolly-step.is-active .scrolly-num { border-color: var(--mint); color: var(--on-mint); background: var(--mint); box-shadow: 0 0 0 5px rgba(124, 224, 188, 0.12); }
.scrolly-step h3 { font-size: 1.2rem; }
.scrolly-step p { font-size: 1.05rem; }

.scrolly-visual {
  position: sticky;
  top: 76px;
  height: min(440px, 62vh);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  background:
    radial-gradient(90% 70% at 80% 10%, rgba(124, 224, 188, 0.09), transparent 60%),
    linear-gradient(180deg, var(--surface), var(--bg));
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}
.scrolly-visual::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 32px 32px; mask-image: radial-gradient(80% 80% at 50% 40%, #000, transparent);
}

.sv-dots { position: absolute; top: 16px; right: 18px; display: flex; gap: 6px; z-index: 2; }
.sv-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: all 0.3s; }
.scrolly-visual[data-active="1"] [data-dot="1"], .scrolly-visual[data-active="2"] [data-dot="2"],
.scrolly-visual[data-active="3"] [data-dot="3"], .scrolly-visual[data-active="4"] [data-dot="4"],
.scrolly-visual[data-active="5"] [data-dot="5"] { background: var(--mint); width: 20px; border-radius: 4px; }

.sv-scene {
  position: absolute; inset: 0;
  padding: clamp(22px, 3vw, 34px);
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
  opacity: 0; transform: translateY(18px) scale(0.98);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.scrolly-visual[data-active="1"] [data-scene="1"], .scrolly-visual[data-active="2"] [data-scene="2"],
.scrolly-visual[data-active="3"] [data-scene="3"], .scrolly-visual[data-active="4"] [data-scene="4"],
.scrolly-visual[data-active="5"] [data-scene="5"] { opacity: 1; transform: none; }

.sv-label { margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint); }
.sv-note { margin: 0; font-size: 0.84rem; color: var(--text-3); }

/* How 1: the sentence */
.sv-bubble {
  padding: 18px 20px; border-radius: 16px 16px 16px 4px;
  background: var(--bg-raised); border: 1px solid var(--line-mint);
  font-family: var(--serif); font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.4rem); line-height: 1.4; color: var(--text);
}
.sv-caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 3px; vertical-align: -0.15em; background: var(--mint); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.sv-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.sv-tags span { font-size: 0.8rem; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-2); }

/* How 2: sizing bars */
.sv-bars { display: grid; gap: 14px; }
.sv-bar { display: grid; grid-template-columns: 60px 1fr 64px; align-items: center; gap: 12px; }
.sv-bar span { font-family: var(--mono); font-size: 0.86rem; color: var(--text-2); }
.sv-bar b { height: 22px; border-radius: 5px; background: rgba(255, 255, 255, 0.03); position: relative; overflow: hidden; }
.sv-bar b::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, rgba(224, 134, 108, 0.5), var(--neg)); border-radius: 5px; transition: width 0.9s cubic-bezier(.2,.8,.2,1) 0.15s; }
.sv-bar strong { font-family: var(--serif); font-size: 1.1rem; text-align: right; }
.scrolly-visual[data-active="2"] .sv-bar b::after { width: var(--w); }
.sv-bar:nth-child(2) b::after { transition-delay: 0.3s; }
.sv-bar:nth-child(3) b::after { transition-delay: 0.45s; }

/* How 3: contract + meters */
.sv-contract { padding: 14px 16px; border: 1px solid var(--mint); border-radius: var(--radius-sm); background: rgba(124, 224, 188, 0.07); display: grid; gap: 2px; }
.sv-contract strong { font-size: 1.1rem; }
.sv-contract small { font-family: var(--mono); font-size: 0.74rem; color: var(--text-3); }
.sv-meters { display: grid; gap: 12px; }
.sv-meters div { display: grid; grid-template-columns: 56px 1fr 84px; gap: 12px; align-items: center; }
.sv-meters span { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.sv-meters b { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); overflow: hidden; }
.sv-meters i { display: block; height: 100%; width: 0; background: var(--mint); border-radius: 999px; transition: width 0.9s cubic-bezier(.2,.8,.2,1) 0.2s; }
.scrolly-visual[data-active="3"] .sv-meters i { width: var(--w); }
.sv-meters strong { font-family: var(--serif); text-align: right; }

/* How 4: watch list */
.sv-watch { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sv-watch li { display: grid; grid-template-columns: 12px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--bg-raised); font-size: 0.93rem; }
.sv-watch i { width: 9px; height: 9px; border-radius: 50%; }
.sv-watch i.is-live { background: var(--mint); animation: live 1.6s ease-in-out infinite; }
.sv-watch i.is-gap { border: 1px dashed var(--warn); }
.sv-watch strong { font-family: var(--mono); font-size: 0.86rem; }
@keyframes live { 0%, 100% { box-shadow: 0 0 0 0 rgba(124, 224, 188, 0.6); } 50% { box-shadow: 0 0 0 6px rgba(124, 224, 188, 0); } }

/* Theory 1: positions web */
.sv-web { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 40px; }
.sv-node { position: relative; padding: 12px 16px; border-radius: 999px; background: var(--mint); color: var(--on-mint); font-weight: 700; font-size: 0.92rem; white-space: nowrap; box-shadow: 0 0 0 8px rgba(124, 224, 188, 0.1); }
.sv-states { display: grid; gap: 12px; position: relative; }
.sv-states::before { content: ""; position: absolute; left: -20px; top: 22px; bottom: 22px; border-left: 1.5px dashed var(--line-mint); }
.sv-state { position: relative; display: grid; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-raised); font-size: 0.88rem; color: var(--text); opacity: 0; transform: translateX(-8px); transition: opacity 0.4s ease, transform 0.4s ease; }
.sv-state::before { content: ""; position: absolute; left: -21px; top: 50%; width: 20px; border-top: 1.5px dashed var(--line-mint); }
.sv-node::after { content: ""; position: absolute; left: 100%; top: 50%; width: 20px; border-top: 1.5px dashed var(--line-mint); }
.sv-state span { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--neg); }
.scrolly-visual[data-active="1"] .sv-state { opacity: 1; transform: none; }
.scrolly-visual[data-active="1"] .sv-state:nth-child(2) { transition-delay: 0.15s; }
.scrolly-visual[data-active="1"] .sv-state:nth-child(3) { transition-delay: 0.3s; }

/* Theory 2: Arrow claim flips into a listed contract */
.sv-flip { position: relative; height: 200px; perspective: 900px; }
.sv-face {
  position: absolute; inset: 0; padding: 22px; display: grid; align-content: center; gap: 8px;
  border-radius: var(--radius); backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform 0.9s cubic-bezier(.3,.7,.2,1) 0.5s;
}
.sv-face small { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.sv-face strong { font-family: var(--serif); font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.35rem); font-weight: 600; line-height: 1.3; }
.sv-front { background: #f3efe4; color: #1c1a16; border: 1px solid #d8d1bf; font-family: var(--serif); }
.sv-front small { color: #7a705c; }
.sv-back { background: var(--bg-raised); border: 1px solid var(--mint); transform: rotateY(180deg); }
.scrolly-visual[data-active="2"] .sv-front { transform: rotateY(-180deg); }
.scrolly-visual[data-active="2"] .sv-back { transform: rotateY(0); }
.sv-price { font-family: var(--serif); font-size: 2rem; color: var(--mint); }
.sv-price em { font-family: var(--sans); font-style: normal; font-size: 0.9rem; color: var(--text-3); margin-left: 6px; }

/* Theory 3: price / depth / covers */
.sv-compare { display: grid; gap: 10px; font-variant-numeric: tabular-nums; }
.sv-cmp-head, .sv-cmp-row { display: grid; grid-template-columns: 1.1fr 0.8fr 0.9fr 0.9fr; gap: 8px; align-items: center; }
.sv-cmp-head span { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.sv-cmp-row { padding: 14px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--bg-raised); row-gap: 10px; }
.sv-cmp-row span { font-family: var(--mono); font-size: 0.9rem; }
.sv-cmp-row b { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: rgba(224, 134, 108, 0.18); overflow: hidden; }
.sv-cmp-row i { display: block; height: 100%; width: 0; min-width: 0; background: var(--mint); transition: width 1s cubic-bezier(.2,.8,.2,1) 0.25s; }
.scrolly-visual[data-active="3"] .sv-cmp-row i { width: var(--w); min-width: 3px; }

/* Theory 4: the gap ledger */
.sv-ledger { padding: 18px; border: 1px dashed var(--warn); border-radius: var(--radius); background: rgba(224, 166, 92, 0.05); display: grid; gap: 10px; }
.sv-ledger .sv-label { color: var(--warn); }
.sv-ledger > strong { font-family: var(--serif); font-size: 1.2rem; line-height: 1.3; }
.sv-ledger dl { margin: 0; display: grid; gap: 6px; }
.sv-ledger dl div { display: flex; justify-content: space-between; gap: 12px; padding-top: 6px; border-top: 1px solid var(--line-soft); font-size: 0.86rem; }
.sv-ledger dt { color: var(--text-3); }
.sv-ledger dd { margin: 0; text-align: right; color: var(--text); }

/* Theory 5: loss and payout cancel */
.sv-cancel { display: grid; gap: 14px; }
.sv-cancel div { display: grid; grid-template-columns: 60px 1fr 74px; gap: 12px; align-items: center; }
.sv-cancel span { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.sv-cancel b { height: 24px; border-radius: 6px; background: rgba(255, 255, 255, 0.03); position: relative; overflow: hidden; }
.sv-cancel b::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 6px; transition: width 1s cubic-bezier(.2,.8,.2,1); }
.sv-cancel b.is-loss::after { background: var(--neg); }
.sv-cancel b.is-pay::after { background: var(--mint); box-shadow: 0 0 14px rgba(124, 224, 188, 0.5); transition-delay: 0.35s; }
.sv-cancel b.is-net::after { background: repeating-linear-gradient(135deg, rgba(224, 134, 108, 0.75) 0 6px, rgba(224, 134, 108, 0.4) 6px 12px); transition-delay: 0.7s; }
.scrolly-visual[data-active="5"] .sv-cancel b::after { width: var(--w); }
.sv-cancel strong { font-family: var(--mono); font-size: 0.9rem; text-align: right; }

@media (max-width: 760px) {
  .info-dialog-scrolly { max-height: 92vh; }
  .scrolly { grid-template-columns: 1fr; }
  .scrolly-visual { order: -1; top: 62px; height: 290px; z-index: 3; margin: 0 -4px; }
  .sv-note { font-size: 0.78rem; }
  .sv-contract strong { font-size: 1rem; }
  .sv-scene { padding: 18px; gap: 10px; }
  .sv-web { gap: 30px; }
  .sv-node::after { width: 15px; }
  .sv-states::before { left: -15px; }
  .sv-state::before { left: -16px; width: 15px; }
  .sv-state { padding: 6px 10px; font-size: 0.8rem; }
  .sv-flip { height: 150px; }
  .sv-bubble { font-size: 1rem; padding: 12px 14px; }
  .sv-watch li { padding: 8px 10px; font-size: 0.84rem; }
  .sv-ledger { padding: 12px; gap: 6px; }
  .sv-ledger > strong { font-size: 1rem; }
  .scrolly-step { min-height: 24vh; }
}

@media (prefers-reduced-motion: reduce) {
  .sv-scene, .sv-face, .sv-bar b::after, .sv-meters i, .sv-cmp-row i, .sv-cancel b::after, .scrolly-step { transition: none; }
  .sv-caret, .sv-watch i.is-live { animation: none; }
  .sv-state { transition: none; }
}

/* Tabs inside every About / How / Theory dialog: switch without closing. */
.info-tabs { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.info-tab { font: inherit; font-size: 0.88rem; font-weight: 600; padding: 6px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); cursor: pointer; }
.info-tab:hover { color: var(--text); }
.info-tab.is-current { background: var(--mint); color: var(--on-mint); }
.info-tab:focus-visible { outline: 2px solid var(--mint); outline-offset: 1px; }
.info-head { position: sticky; top: 0; z-index: 5; margin: calc(-1 * clamp(22px, 4vw, 36px)) calc(-1 * clamp(22px, 4vw, 36px)) 0; padding: clamp(14px, 2vw, 20px) clamp(22px, 4vw, 36px); background: rgba(12, 19, 17, 0.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-soft); }
.info-list li { font-size: 1rem; }
.info-list strong { display: inline; margin-right: 4px; }

/* ==========================================================================
   Market studies index (studies.js)
   ========================================================================== */

.sx-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.sx-search { flex: 1 1 280px; max-width: 460px; }
.sx-search input {
  width: 100%; font: inherit; font-size: 1rem; color: var(--text);
  padding: 12px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
}
.sx-search input:focus { outline: none; border-color: var(--mint); box-shadow: 0 0 0 3px rgba(124, 224, 188, 0.15); }
.sx-filters { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.sx-chip { font: inherit; font-size: 0.88rem; font-weight: 600; padding: 7px 13px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); cursor: pointer; }
.sx-chip span { margin-left: 5px; font-size: 0.76rem; opacity: 0.7; }
.sx-chip.is-on { background: var(--text); color: var(--bg); }
.sx-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 6px; }
.sx-cat { font: inherit; font-size: 0.86rem; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text-2); cursor: pointer; }
.sx-cat:hover { border-color: var(--line-mint); color: var(--text); }
.sx-cat.is-on { border-color: var(--mint); color: var(--mint); background: rgba(124, 224, 188, 0.07); }

.sx-group { margin-top: 26px; }
.sx-group-title { display: flex; align-items: baseline; gap: 10px; font-size: 1.1rem; margin-bottom: 10px; color: var(--text); }
.sx-group-title span { font-family: var(--sans); font-size: 0.8rem; color: var(--text-3); font-weight: 500; }
.sx-rows { display: grid; gap: 6px; }
.sx-row {
  display: grid; grid-template-columns: 10px minmax(0, 2fr) minmax(0, 1.2fr) 110px 120px 20px; gap: 16px; align-items: center;
  padding: 14px 18px; border-radius: var(--radius-sm); border: 1px solid var(--line-soft); background: var(--surface);
  color: var(--text-2); transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
a.sx-row:hover { text-decoration: none; border-color: var(--line-mint); background: var(--surface-2); transform: translateX(2px); }
.sx-row.is-research { background: transparent; border-style: dashed; }
.sx-name { display: grid; min-width: 0; }
.sx-name strong { color: var(--text); font-size: 1rem; }
.sx-name small, .sx-cov small { font-size: 0.8rem; color: var(--text-3); }
.sx-risk { font-size: 0.92rem; }
.sx-cov { display: grid; text-align: right; }
.sx-cov b { font-family: var(--serif); font-size: 1.3rem; color: var(--text); font-weight: 600; line-height: 1.1; }
.sx-row .status-badge { justify-self: start; }
.sx-go { color: var(--mint); font-size: 1.1rem; }
.sx-empty { color: var(--text-3); margin-top: 24px; }

@media (max-width: 760px) {
  .sx-row { grid-template-columns: 10px minmax(0, 1fr) auto; grid-template-areas: "dot name cov" "dot risk badge"; row-gap: 4px; }
  .sx-row .status-dot { grid-area: dot; align-self: start; margin-top: 8px; }
  .sx-name { grid-area: name; }
  .sx-risk { grid-area: risk; font-size: 0.85rem; color: var(--text-3); }
  .sx-cov { grid-area: cov; }
  .sx-row .status-badge { grid-area: badge; justify-self: end; }
  .sx-go { display: none; }
}

/* ==========================================================================
   One study: the full report (study.js)
   ========================================================================== */

.st-head { padding-bottom: 10px; }
.st-back { display: inline-block; font-size: 0.9rem; margin-bottom: 18px; }
.st-verdict { font-family: var(--serif); font-size: clamp(1.3rem, 1rem + 1.2vw, 1.9rem); color: var(--text); margin: 0 0 14px; }
.st-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 0.88rem; color: var(--text-3); }
.st-section { padding: clamp(18px, 2.4vw, 30px) 0; }
.st-kicker { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mint); }

.st-market {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 24px; align-items: center;
  padding: 18px 22px; border: 1px solid var(--mint); border-radius: var(--radius); background: rgba(124, 224, 188, 0.06);
}
.st-market-main { display: grid; gap: 2px; min-width: 0; }
.st-market-main strong { font-family: var(--serif); font-size: clamp(1.2rem, 1rem + 0.8vw, 1.55rem); font-weight: 600; color: var(--text); }
.st-market-main code { font-family: var(--mono); font-size: 0.78rem; color: var(--text-3); overflow-wrap: anywhere; }
.st-market-price { display: grid; text-align: right; }
.st-market-price span { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mint); }
.st-market-price strong { font-family: var(--serif); font-size: 2.2rem; line-height: 1; }
.st-also { grid-column: 1 / -1; margin: 4px 0 0; font-size: 0.86rem; color: var(--text-3); }
.st-also s { color: var(--text-2); text-decoration-color: rgba(224, 134, 108, 0.6); }

.st-receipt { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.st-rc { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); display: grid; gap: 2px; }
.st-rc span { font-size: 0.82rem; color: var(--text-3); }
.st-rc strong { font-family: var(--serif); font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.6rem); line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--text); }
.st-rc small { font-size: 0.82rem; color: var(--text-3); }
.st-rc.is-pay { border-color: var(--line-mint); background: rgba(124, 224, 188, 0.05); }
.st-rc.is-pay strong { color: var(--mint); }
.st-rc.is-bad strong { color: var(--neg); }

.st-plan { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.st-plan-controls { display: grid; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-raised); position: sticky; top: 90px; }
.st-plan-controls h2 { font-size: 1.5rem; margin: 0; }
.st-plan-controls .section-eyebrow { margin: 0; }
.st-field { display: grid; gap: 6px; }
.st-field label { font-size: 0.86rem; color: var(--text-2); font-weight: 600; }
.st-input { display: flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.st-input:focus-within { border-color: var(--mint); }
.st-input span { color: var(--text-3); }
.st-input input { flex: 1; min-width: 0; font: inherit; font-size: 1.1rem; font-variant-numeric: tabular-nums; color: var(--text); background: transparent; border: 0; padding: 10px 0; outline: none; }
.st-field input[type="range"] { width: 100%; accent-color: var(--mint); }
.st-plan-controls .btn { justify-self: start; }
.st-plan-out { margin: 4px 0 0; display: grid; gap: 0; border-top: 1px solid var(--line-soft); }
.st-plan-out div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.st-plan-out dt { font-size: 0.88rem; color: var(--text-3); }
.st-plan-out dd { margin: 0; font-family: var(--mono); font-size: 0.92rem; color: var(--text); }

.st-charts { display: grid; gap: 12px; }
.st-chart { margin: 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.st-chart figcaption { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
.st-svg { width: 100%; height: auto; display: block; font-family: var(--sans); }
.st-ax { fill: var(--text-2); font-size: 12px; font-family: var(--mono); }
.st-ax-sm { font-size: 11px; font-family: var(--sans); fill: var(--text-3); }
.st-bar { fill: rgba(255, 255, 255, 0.07); }
.st-bar-over { fill: rgba(255, 255, 255, 0.04); }
.st-bar-got { fill: var(--mint); transition: width 0.3s; }
.st-limit { stroke: var(--warn); stroke-dasharray: 4 4; stroke-width: 1; }
.st-limit-label { fill: var(--warn); font-size: 11px; }

.st-family { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.st-grid { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.st-grid th, .st-grid td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); text-align: center; white-space: nowrap; }
.st-grid thead th { font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }
.st-grid tbody th { text-align: left; font-weight: 600; color: var(--text); font-size: 0.92rem; }
.st-grid tr:last-child th, .st-grid tr:last-child td { border-bottom: 0; }
.st-cell { font-family: var(--mono); font-size: 0.92rem; color: var(--text); background: rgba(124, 224, 188, calc(var(--p, 0) * 0.42)); }
.st-cell small { display: block; font-family: var(--sans); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-mint); }
.st-cell.is-pick { outline: 2px solid var(--mint); outline-offset: -2px; background: var(--mint); color: var(--on-mint); font-weight: 700; }
.st-cell.is-paid { color: var(--text-3); font-family: var(--sans); font-size: 0.8rem; background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255, 255, 255, 0.03) 6px 12px); }
.st-cell.is-empty { color: var(--text-3); }

.st-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.st-card { padding: clamp(18px, 2.6vw, 26px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.st-card h3 { margin-bottom: 14px; }
.st-read { margin-top: var(--gap); padding: 18px 22px; border-left: 3px solid var(--mint); background: var(--surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.st-read p { margin: 6px 0 0; font-size: 1.02rem; color: var(--text); }

.st-record { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-raised); }
.st-record summary { display: flex; align-items: baseline; gap: 12px; padding: 18px 22px; cursor: pointer; list-style: none; }
.st-record summary::-webkit-details-marker { display: none; }
.st-record summary h2 { font-size: 1.3rem; margin: 0; }
.st-record summary span { font-size: 0.86rem; color: var(--text-3); }
.st-record summary::after { content: "+"; margin-left: auto; color: var(--mint); font-size: 1.3rem; }
.st-record[open] summary::after { content: "\2212"; }
.st-log { list-style: none; margin: 0; padding: 0 22px 18px; counter-reset: log; }
.st-log li { counter-increment: log; position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 2px 18px; padding: 12px 0 12px 34px; border-top: 1px solid var(--line-soft); }
.st-log li::before { content: counter(log); position: absolute; left: 0; top: 13px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 0.72rem; font-weight: 700; background: var(--mint-deep); color: var(--mint); }
.st-log time { grid-row: span 2; font-family: var(--mono); font-size: 0.8rem; color: var(--text-3); padding-top: 3px; }
.st-log strong { color: var(--text); }
.st-log p { margin: 0; font-size: 0.9rem; }

.st-pager { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; margin-top: 22px; }
.st-page { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.st-page:hover { text-decoration: none; border-color: var(--line-mint); }
.st-page span { font-size: 0.8rem; color: var(--text-3); }
.st-page strong { color: var(--text); font-size: 0.95rem; }
.st-page-all { text-align: center; }
.st-page-next { text-align: right; }

@media (max-width: 900px) {
  .st-receipt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-plan { grid-template-columns: 1fr; }
  .st-plan-controls { position: static; }
  .st-cols { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .st-market { grid-template-columns: 1fr auto; }
  .st-market .btn { grid-column: 1 / -1; justify-self: start; }
  .st-log li { grid-template-columns: 1fr; padding-left: 34px; }
  .st-log time { grid-row: auto; }
  .st-pager { grid-template-columns: 1fr; }
  .st-page-next, .st-page-all { text-align: left; }
}

/* ==========================================================================
   "No market? We help make one." Offset's next step, wherever it appears
   ========================================================================== */

.mbook-none { display: grid; justify-items: center; gap: 4px; text-align: center; }
.mbook-none strong { font-family: var(--serif); font-size: clamp(3rem, 2rem + 4vw, 5rem); line-height: 1; color: var(--neg); }
.mbook-none span { color: var(--text-2); font-size: 1rem; }
.mresult-next, .preview-next {
  grid-column: 1 / -1; margin: 0; padding: 10px 14px; font-size: 0.92rem; color: var(--text-2);
  border: 1px dashed var(--warn); border-radius: var(--radius-sm); background: rgba(224, 166, 92, 0.06);
}
.mresult-next strong, .preview-next strong { color: var(--warn); }
.preview-next { margin-top: 12px; }
.mresult { grid-template-areas: "main nums" "next next" "actions actions"; }
.mresult-next { grid-area: next; }
@media (max-width: 700px) { .mresult { grid-template-areas: "main" "nums" "next" "actions"; } }

.make { border-top: 1px solid var(--line-soft); }
.make-steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.make-steps li, .st-next-steps li { position: relative; padding: 18px 18px 18px 58px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.make-steps strong, .st-next-steps strong { display: block; color: var(--text); font-size: 1.05rem; margin-bottom: 2px; }
.make-steps p, .st-next-steps p { margin: 0; font-size: 0.93rem; }
.make-num { position: absolute; left: 16px; top: 16px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-weight: 600; background: var(--warn); color: #1d1406; }
.make-label { margin: 22px 0 10px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.make-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.make-case { display: grid; gap: 4px; padding: 14px 16px; border: 1px dashed var(--warn); border-radius: var(--radius-sm); background: rgba(224, 166, 92, 0.05); color: var(--text-2); font-size: 0.92rem; }
.make-case:hover { text-decoration: none; background: rgba(224, 166, 92, 0.1); }
.make-case strong { color: var(--text); font-size: 1rem; }
@media (max-width: 760px) { .make-steps { grid-template-columns: 1fr; } }

.sx-make { margin-top: 14px; max-width: 70ch; padding: 12px 16px; border: 1px dashed var(--warn); border-radius: var(--radius-sm); background: rgba(224, 166, 92, 0.06); font-size: 0.95rem; }
.sx-make strong { color: var(--warn); }

.st-market.is-none { border-color: var(--warn); background: rgba(224, 166, 92, 0.06); grid-template-columns: 1fr; }
.st-market.is-none .st-kicker { color: var(--warn); }
.st-next { margin-top: var(--gap); padding: clamp(18px, 2.6vw, 26px); border: 1px dashed var(--warn); border-radius: var(--radius); background: rgba(224, 166, 92, 0.05); display: grid; gap: 16px; }
.st-next .st-kicker { color: var(--warn); }
.st-next h3 { font-size: 1.4rem; margin: 6px 0 10px; }
.st-next-wanted { margin: 0; display: grid; gap: 2px; }
.st-next-wanted span { font-size: 0.8rem; color: var(--text-3); }
.st-next-wanted strong { font-family: var(--serif); font-size: 1.2rem; color: var(--text); font-weight: 600; }
.st-next-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 760px) { .st-next-steps { grid-template-columns: 1fr; } }

.machine-who { flex-basis: 100%; margin: 0 0 4px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mint); }

/* The other side of the same contract: pairs Offset can match in one block trade. */
.other-side {
  grid-column: 1 / -1; margin: 0; padding: 10px 14px; font-size: 0.92rem; color: var(--text-2);
  border: 1px solid var(--line-mint); border-radius: var(--radius-sm); background: rgba(124, 224, 188, 0.06);
}
.other-side strong { color: var(--mint); }
.examples-preview .other-side { margin-top: 12px; }
.mresult { grid-template-areas: "main nums" "side side" "next next" "actions actions"; }
.mresult > .other-side { grid-area: side; }
@media (max-width: 700px) { .mresult { grid-template-areas: "main" "nums" "side" "next" "actions"; } }

.st-other { margin-top: var(--gap); padding: clamp(18px, 2.6vw, 26px); border: 1px solid var(--line-mint); border-radius: var(--radius); background: rgba(124, 224, 188, 0.05); }
.st-other h3 { font-size: 1.3rem; margin: 6px 0 6px; }
.st-other p { font-size: 0.95rem; }
.st-other-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 12px; }
.st-other-list a { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-2); font-size: 0.86rem; }
.st-other-list a:hover { text-decoration: none; border-color: var(--mint); }
.st-other-list strong { color: var(--text); font-size: 0.98rem; }
.status-badge.status-archetype { color: var(--text-2); border-style: dashed; }

/* ==========================================================================
   Product: the four services
   ========================================================================== */

.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.svc { position: relative; display: grid; align-content: start; gap: 10px; padding: clamp(20px, 2.8vw, 28px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.svc h2 { font-size: 1.45rem; margin: 0; }
.svc-num { margin: 0; font-family: var(--mono); font-size: 0.8rem; color: var(--mint); }
.svc p { font-size: 0.97rem; }
.svc-out { padding-top: 10px; border-top: 1px solid var(--line-soft); font-size: 0.92rem !important; }
.svc-out strong { color: var(--text); }
.svc-link { font-size: 0.92rem; font-weight: 600; }
.svc-make { border-style: dashed; border-color: rgba(224, 166, 92, 0.5); background: rgba(224, 166, 92, 0.04); }
.svc-make .svc-num { color: var(--warn); }
@media (max-width: 760px) { .svc-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Company: business model
   ========================================================================== */

.model-flow { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1.1fr) 40px minmax(0, 1.3fr); align-items: center; gap: 0; margin-top: 22px; }
.mf-node { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.mf-node span { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--text); }
.mf-node small { font-size: 0.84rem; color: var(--text-3); }
.mf-offset { border-color: var(--mint); background: rgba(124, 224, 188, 0.08); box-shadow: 0 0 0 6px rgba(124, 224, 188, 0.06); }
.mf-offset span { color: var(--mint); }
.mf-out { display: grid; gap: 8px; }
.mf-other { border-style: dashed; }
.mf-arrow { height: 2px; background: var(--line-mint); position: relative; margin: 0 6px; }
.mf-arrow::after { content: ""; position: absolute; right: -2px; top: -4px; border-left: 8px solid var(--line-mint); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.model-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: 26px; }
.model-points h3 { font-size: 1.1rem; }
.model-points p { font-size: 0.95rem; }
@media (max-width: 860px) {
  .model-flow { grid-template-columns: 1fr; gap: 0; }
  .mf-arrow { width: 2px; height: 22px; margin: 4px auto; }
  .mf-arrow::after { right: -4px; top: auto; bottom: -2px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid var(--line-mint); border-bottom: 0; }
  .model-points { grid-template-columns: 1fr; }
}

.why-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.why-stats div { display: grid; gap: 6px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.why-stats strong { font-family: var(--serif); font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem); line-height: 1.05; color: var(--mint); }
.why-stats span { font-size: 0.93rem; color: var(--text-2); }
@media (max-width: 760px) { .why-stats { grid-template-columns: 1fr; } }

/* ==========================================================================
   Compute: the Offset Compute Index (compute.html, compute-methodology.html,
   and the board on the home page). Same tokens and motion as the rest of the
   site: mint for the index line, count-ups on figures, a line that draws in.
   ========================================================================== */

.cx-detail {
  display: grid;
  gap: 22px;
  padding: clamp(20px, 2.8vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(124, 224, 188, 0.06), transparent 70%),
    var(--surface);
}
.cx-detail-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 32px; }
.cx-ticker { margin: 0 0 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cx-ticker code, .cx-pick code, .hm-pick code { font-family: var(--mono); font-size: 0.86rem; color: var(--mint); letter-spacing: 0.02em; }
.cx-name { margin: 0 0 0.2em; }
.cx-desc { margin: 0; max-width: 60ch; }
.cx-level { text-align: right; }
.cx-figure { margin: 0; font-family: var(--serif); font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem); font-weight: 600; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.cx-unit { margin-left: 8px; font-family: var(--sans); font-size: 0.95rem; font-weight: 500; color: var(--text-3); }
.cx-asof { margin: 8px 0 0; font-size: 0.88rem; color: var(--text-3); max-width: 36ch; }

.cx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 0; }
.cx-stats > div { padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--bg-raised); }
.cx-stats dt { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 4px; }
.cx-stats dd { margin: 0; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }

.cx-chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: -10px; }
.cx-chart-title { margin: 0; }
.cx-seg { margin-bottom: 0; }
.cx-seg .world-btn { padding: 6px 14px; font-size: 0.86rem; }
.cx-chart { margin: 0; min-height: 220px; border-radius: var(--radius-sm); }
.cx-chart:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
.cx-svg { display: block; width: 100%; height: auto; overflow: visible; }
.cx-grid { stroke: var(--line-soft); stroke-width: 1; }
.cx-axis { fill: var(--text-3); font-size: 11px; font-family: var(--sans); font-variant-numeric: tabular-nums; }
.cx-area { fill: rgba(124, 224, 188, 0.07); stroke: none; }
.cx-line { fill: none; stroke: var(--mint); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.cx-line-carry { fill: none; stroke: var(--surface); stroke-width: 2.5; stroke-dasharray: 3 4; }
.cx-cursor { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 2 3; }
.cx-dot { fill: var(--mint); stroke: var(--bg); stroke-width: 2; filter: drop-shadow(0 0 6px rgba(124, 224, 188, 0.6)); }
.cx-hit { fill: transparent; cursor: crosshair; touch-action: pan-y; }
.cx-empty { margin: 0; padding: 48px 0; text-align: center; color: var(--text-3); }
.cx-readout { margin: -10px 0 0; font-size: 0.9rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.cx-sub { margin: 0 0 -12px; }

.cx-table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.cx-table th, .cx-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.cx-table th:first-child, .cx-table td:first-child { padding-left: 0; }
.cx-table th:last-child, .cx-table td:last-child { padding-right: 0; }
.cx-table .num { text-align: right; }
.cx-table thead th { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); border-bottom-color: var(--line); white-space: nowrap; }
.cx-table tbody th[scope="row"] { font-weight: 600; color: var(--text); }
.cx-table td { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-table .cx-strong { color: var(--text); font-weight: 700; }
.cx-legs { min-width: 560px; }
.cx-detail .table-scroll { margin-top: 0; }

.cx-board { min-width: 720px; }
.cx-board .cx-group th { padding-top: 26px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mint); border-bottom-color: var(--line); }
.cx-board tbody tr:first-child th { padding-top: 10px; }
.cx-board tbody tr:not(.cx-group) { transition: background 0.2s; }
.cx-board tbody tr:not(.cx-group):hover { background: rgba(255, 255, 255, 0.02); }
.cx-board tr.is-selected th, .cx-board tr.is-selected td { background: rgba(124, 224, 188, 0.06); }
.cx-board tr.is-selected th[scope="row"] { box-shadow: inset 3px 0 0 var(--mint); }
.cx-board tbody th[scope="row"] { padding: 0; }
.cx-pick {
  display: flex; align-items: baseline; gap: 14px; width: 100%; min-height: 44px;
  padding: 8px 14px; border: 0; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.cx-pick code { flex: none; min-width: 7.5rem; }
.cx-pick span { font-weight: 500; color: var(--text-2); transition: color 0.2s; }
.cx-pick:hover span, .cx-pick[aria-pressed="true"] span { color: var(--text); }
.cx-pick:focus-visible { outline: 2px solid var(--mint); outline-offset: -2px; }
.cx-spark-col { width: 112px; }
.cx-spark { display: block; }
.cx-spark-line { fill: none; stroke: var(--mint); stroke-width: 1.6; stroke-linejoin: round; }

.cx-calc { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap); align-items: start; margin-top: 22px; }
.cx-calc-inputs { display: grid; gap: 16px; }
.cx-calc-stats { margin-top: 0; }
.cx-calc-stats strong { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); }
.cx-calc-stats small { display: block; margin-top: 6px; font-size: 0.82rem; line-height: 1.45; color: var(--text-3); }
.cx-calc-out .fineprint { margin-top: 14px; }

.cx-modes { margin-bottom: 22px; }
.cx-modes li { padding-left: 18px; }
.cx-steps { margin: 0 0 26px; padding-left: 1.4em; color: var(--text-2); }
.cx-steps li { margin-bottom: 8px; }
.cx-desk-form { max-width: 760px; }
.cx-intent { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; }
.cx-intent legend { padding: 0; margin-bottom: 10px; font-size: 0.9rem; font-weight: 600; color: var(--text); }
.cx-intent-options { flex-wrap: wrap; }
.cx-intent-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cx-intent-options label {
  font-size: 0.92rem; font-weight: 600; padding: 9px 18px; border-radius: 999px; color: var(--text-2);
  cursor: pointer; transition: background 0.2s, color 0.2s; margin: 0;
}
.cx-intent-options input:checked + label { background: var(--mint); color: var(--on-mint); }
.cx-intent-options input:focus-visible + label { outline: 2px solid var(--mint); outline-offset: 2px; }

.cx-building { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cx-building li { display: grid; align-content: start; gap: 8px; padding: 18px 20px; border: 1px dashed rgba(224, 166, 92, 0.35); border-radius: var(--radius); background: var(--surface); }
.cx-building .badge { justify-self: start; }
.cx-building h3 { margin: 4px 0 0; }
.cx-building p { margin: 0; font-size: 0.93rem; }

.cx-data { max-width: 74ch; }

.cx-method h2 { scroll-margin-top: 96px; }
.cx-weights { margin: 16px 0; min-width: 520px; }
.cx-weights td { white-space: normal; }
.cx-weights td:last-child { min-width: 14rem; }
.cx-weights th code { white-space: nowrap; }
.cx-weights caption { text-align: left; font-weight: 600; color: var(--text); padding-bottom: 8px; }

@media (max-width: 1000px) {
  .cx-building { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .cx-calc { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .cx-level { text-align: left; }

}
@media (max-width: 560px) {
  .cx-building { grid-template-columns: 1fr; }
  .cx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Two sides of Offset (13 Oct 2026): the chooser at / and the links across
   from one side to the other.
   ========================================================================== */

.footer-switch { font-size: 0.92rem; }
.menu-group-switch .menu-group-title { color: var(--mint); }

/* Compute hero: the headline levels under the copy */
.cx-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 720px; margin-top: 30px; }
@media (max-width: 620px) { .cx-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cx-strip-item {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: rgba(16, 25, 23, 0.82); color: var(--text); backdrop-filter: blur(6px);
  transition: border-color 0.2s, background 0.2s;
}
.cx-strip-item:hover { text-decoration: none; border-color: var(--line-mint); background: rgba(124, 224, 188, 0.06); }
.cx-strip-item code { flex-basis: 100%; font-family: var(--mono); font-size: 0.78rem; color: var(--mint); }
.cx-strip-item strong { font-family: var(--serif); font-size: 1.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cx-strip-item span { font-size: 0.82rem; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-strip-item strong { white-space: nowrap; }
.cx-strip-item .cx-up { color: var(--warn); }
.cx-strip-item .cx-down { color: var(--mint); }

/* The chooser */
.chooser-hero { padding-bottom: clamp(28px, 3vw, 40px); }
.chooser-hero h1 { max-width: 16ch; }
.chooser-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.chooser-card {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.chooser-card:hover { text-decoration: none; transform: translateY(-3px); }
.chooser-compute { background: radial-gradient(80% 70% at 100% 0%, rgba(124, 224, 188, 0.1), transparent 70%), var(--surface); }
.chooser-compute:hover { border-color: var(--line-mint); box-shadow: 0 18px 40px -24px rgba(124, 224, 188, 0.45); }
.chooser-event { background: radial-gradient(80% 70% at 100% 0%, rgba(224, 166, 92, 0.09), transparent 70%), var(--surface); }
.chooser-event .section-eyebrow { color: var(--warn); }
.chooser-event:hover { border-color: rgba(224, 166, 92, 0.4); box-shadow: 0 18px 40px -24px rgba(224, 166, 92, 0.4); }
.chooser-card h2 { margin: 0; }
.chooser-card p { margin: 0; }
.chooser-figure { position: relative; display: grid; gap: 4px; margin-top: 8px; padding: 16px 18px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--bg-raised); overflow: hidden; }
.chooser-figure strong { position: relative; z-index: 1; font-family: var(--serif); font-size: clamp(2.2rem, 1.5rem + 2vw, 3rem); line-height: 1; font-variant-numeric: tabular-nums; }
.chooser-compute .chooser-figure strong { color: var(--mint); }
.chooser-event .chooser-figure strong { color: var(--warn); }
.chooser-figure span { position: relative; z-index: 1; font-size: 0.86rem; color: var(--text-3); }
.chooser-spark { display: block; width: 100%; height: 44px; margin-top: 8px; }
.chooser-spark-line { fill: none; stroke: var(--mint); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.chooser-spark-area { fill: rgba(124, 224, 188, 0.08); }
.chooser-cta { align-self: flex-start; margin-top: auto; }
.chooser-card:hover .btn-ghost { background: rgba(224, 166, 92, 0.08); border-color: var(--warn); }
.chooser-note { text-align: center; }
@media (max-width: 760px) {
  .chooser-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .chooser-card, .chooser-card:hover { transition: none; transform: none; }
}

/* Menus: Compute has four groups; the link across to the other side runs as a
   slim row along the foot of either menu. */
.side-compute .site-menu { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.menu-group-switch { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.menu-group-switch .menu-group-title { margin: 0; }
.menu-group-switch ul { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.menu-group-switch li { margin: 0; }
.menu-tag { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(224, 166, 92, 0.12); color: var(--warn); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 0.1em; }
@media (max-width: 860px) {
  .side-compute .site-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .side-compute .site-menu { grid-template-columns: 1fr; }
}

/* Compute landing: a short board, four cards, nothing else */
.cxh-board { min-width: 560px; }
.cxh-board tbody th[scope="row"] { padding: 0; }
.cxh-board tbody tr { opacity: 0; transform: translateY(6px); transition: opacity 0.4s ease, transform 0.4s ease; }
.cxh-board tbody tr.is-in { opacity: 1; transform: none; }
.cxh-board .cx-pick { padding-left: 0; }
.cxh-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.cxh-card {
  display: grid; align-content: start; gap: 8px; padding: 20px 20px 22px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text);
  transition: border-color 0.25s, transform 0.25s, background 0.25s;
}
.cxh-card:hover { text-decoration: none; border-color: var(--line-mint); background: rgba(124, 224, 188, 0.05); transform: translateY(-2px); }
.cxh-card-num { font-family: var(--mono); font-size: 0.78rem; color: var(--mint); }
.cxh-card strong { font-family: var(--serif); font-size: 1.2rem; }
.cxh-card p { margin: 0; font-size: 0.93rem; }
.cxh-card-building { border-style: dashed; border-color: rgba(224, 166, 92, 0.35); }
.cxh-card-building:hover { border-color: var(--warn); background: rgba(224, 166, 92, 0.05); }
.cxh-card-building .badge { justify-self: start; }

/* Compute curves: placeholder sketch until the curves are live */
.cx-curve-preview { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: center; padding: clamp(20px, 2.8vw, 30px); border: 1px dashed rgba(224, 166, 92, 0.35); border-radius: var(--radius); background: var(--surface); }
.cx-curve-preview h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.cx-curve-sketch { width: 100%; height: auto; }
.cx-curve-sketch-line { fill: none; stroke: var(--warn); stroke-width: 2.5; stroke-dasharray: 6 6; opacity: 0.8; }
.cx-curve-sketch-spot { stroke: var(--mint); stroke-width: 1.5; stroke-dasharray: 2 4; opacity: 0.7; }

@media (max-width: 1000px) { .cxh-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .cx-curve-preview { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cxh-cards { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .cxh-board tbody tr { opacity: 1; transform: none; transition: none; }
  .cxh-card, .cxh-card:hover { transition: none; transform: none; }
}
.cx-calc-stats article { align-content: start; }
.cx-stats dt { white-space: nowrap; }

/* ==========================================================================
   Compute: tokens (compute-tokens.html, tokens.js)
   ========================================================================== */

:root { --tk-frontier: #b49bff; --tk-mid: #74d8ee; --tk-fast: var(--mint); }

.tk-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tk-paths li { counter-increment: none; }
@media (max-width: 760px) { .tk-paths { grid-template-columns: 1fr; } }

.tk-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 12px; }
.tk-toolbar .sx-search { flex: 1 1 260px; max-width: 420px; }
.tk-book { min-width: 760px; }
.tk-book tbody th small, .tk-ledger tbody th small, .tk-src small { display: block; margin-top: 2px; font-size: 0.8rem; font-weight: 400; color: var(--text-3); white-space: normal; }
.tk-model { display: block; color: var(--text); }
.tk-src { white-space: normal !important; max-width: 300px; }
.tk-src a { font-size: 0.88rem; }

.tk-history { margin-top: 22px; }
.tk-provider-switch { flex-wrap: wrap; border-radius: 22px; max-width: 100%; }
.tk-provider-switch .world-btn { padding: 7px 14px; font-size: 0.86rem; }
.tk-chart { margin: 8px 0 18px; }
.tk-line { fill: none; stroke-width: 2; }
.tk-range { stroke-width: 2; stroke-opacity: 0.35; }
.tk-dot { stroke: var(--bg); stroke-width: 1.5; }
.tk-dot.is-today { stroke: var(--text); stroke-width: 2; }
.tk-line.tk-frontier { stroke: var(--tk-frontier); }
.tk-line.tk-mid { stroke: var(--tk-mid); }
.tk-line.tk-fast { stroke: var(--tk-fast); }
.tk-range.tk-frontier { stroke: var(--tk-frontier); } .tk-range.tk-mid { stroke: var(--tk-mid); } .tk-range.tk-fast { stroke: var(--tk-fast); }
.tk-dot.tk-frontier { fill: var(--tk-frontier); } .tk-dot.tk-mid { fill: var(--tk-mid); } .tk-dot.tk-fast { fill: var(--tk-fast); }
.tk-inception { stroke: var(--text-3); stroke-dasharray: 3 4; }
.tk-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 0.84rem; color: var(--text-2); }
.tk-key::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 50%; vertical-align: -1px; }
.tk-key.tk-frontier::before { background: var(--tk-frontier); }
.tk-key.tk-mid::before { background: var(--tk-mid); }
.tk-key.tk-fast::before { background: var(--tk-fast); }
.tk-key-note { color: var(--text-3); }
.tk-ledger { min-width: 760px; }
.tk-ledger td a { font-size: 0.88rem; white-space: normal; }

.tk-tabs { flex-wrap: wrap; margin-top: 22px; max-width: 100%; }
.tk-panel { margin-top: 10px; padding: clamp(20px, 2.8vw, 30px); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); background: var(--bg-raised); }
.tk-panel-head { max-width: 72ch; }
.tk-panel-head h3 { margin: 12px 0 8px; font-size: 1.35rem; }
.tk-panel-head p { font-size: 0.98rem; }
.tk-panel .cx-calc { margin-top: 18px; }
.tk-panel input[type="range"], #tk-calc input[type="range"] { width: 100%; accent-color: var(--mint); }
@media (max-width: 560px) { .tk-tabs .world-btn { padding: 8px 14px; font-size: 0.88rem; } }
.page-compute-tokens .cx-strip-item span, #cxh-tokens .cx-strip-item span { display: block; }
.tk-val { margin-left: 4px; color: var(--mint); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .tk-book, .tk-ledger { min-width: 0; }
  .tk-book th:nth-child(2), .tk-book td:nth-child(2), .tk-book th:nth-child(5), .tk-book td:nth-child(5),
  .tk-ledger th:nth-child(3), .tk-ledger td:nth-child(3), .tk-ledger th:nth-child(6), .tk-ledger td:nth-child(6) { display: none; }
  .tk-ledger td:first-child { white-space: normal; font-size: 0.84rem; }
  .tk-tabs { display: grid; grid-template-columns: 1fr; border-radius: 18px; width: 100%; }
  .tk-provider-switch { border-radius: 18px; }
}
.tk-mobile-src { display: none !important; }
@media (max-width: 640px) { .tk-mobile-src { display: block !important; } }

/* Chooser: Offset Compute shows both products, GPUs and tokens. */
.chooser-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.chooser-products .chooser-figure { margin-top: 0; align-content: start; }
.chooser-products .chooser-figure strong { font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.3rem); }
.chooser-product { font-size: 0.74rem !important; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mint) !important; }
.chooser-products .chooser-spark { height: 32px; }
@media (max-width: 420px) { .chooser-products { grid-template-columns: 1fr; } }

/* Compute menu: four sections on one row (Indices, GPUs, Tokens, Research), with
   a bar beneath them: the guided request (Get Priced) and the FAQ. */
.side-compute .site-menu-four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 28px); }
.side-compute .site-menu-four .menu-group ul a { font-size: 0.93rem; }
@media (max-width: 900px) { .side-compute .site-menu-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .side-compute .site-menu-four { grid-template-columns: 1fr; } }

.menu-bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
:is(.site-menu, .footer-menu) .menu-bar-request {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px 16px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border: 1px solid var(--line-mint);
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, rgba(124, 224, 188, 0.12), rgba(124, 224, 188, 0.03));
  color: var(--text);
  transition: border-color 0.2s, background 0.2s;
}
:is(.site-menu, .footer-menu) .menu-bar-request:hover,
:is(.site-menu, .footer-menu) .menu-bar-request:focus-visible { border-color: var(--mint); background: linear-gradient(90deg, rgba(124, 224, 188, 0.2), rgba(124, 224, 188, 0.05)); color: var(--text); }
.menu-bar-kicker { font-weight: 600; color: var(--mint); white-space: nowrap; }
.menu-bar-copy { flex: 1; min-width: 14ch; font-size: 0.9rem; color: var(--text-2); }
.menu-bar-go { color: var(--mint); font-size: 1.1rem; transition: transform 0.2s; }
.menu-bar-request:hover .menu-bar-go { transform: translateX(3px); }
:is(.site-menu, .footer-menu) .menu-bar-faq {
  display: flex;
  align-items: center;
  padding: 14px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
}
:is(.site-menu, .footer-menu) .menu-bar-faq:hover,
:is(.site-menu, .footer-menu) .menu-bar-faq:focus-visible { border-color: var(--line-mint); color: var(--text); background: var(--surface); }
@media (max-width: 620px) {
  .menu-bar-copy { display: none; }
  :is(.site-menu, .footer-menu) .menu-bar-request { flex-wrap: nowrap; justify-content: space-between; padding: 14px; }
  .menu-bar-faq, .lang-opt { padding-inline: 12px; }
  /* The header is sticky, so a menu taller than the screen could never be scrolled to its end. */
  .site-menu { max-height: calc(100dvh - 92px); overflow-y: auto; overscroll-behavior: contain; }
}
.footer-menu-four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
@media (max-width: 860px) { .footer-menu-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer-menu-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Stat tiles: a figure always fits its tile on one line. The tile is a size
   container, so the number scales down with the tile instead of spilling out. */
.risk-stats article { container-type: inline-size; min-width: 0; }
.risk-stats strong { font-size: min(clamp(2.2rem, 1.4rem + 2.6vw, 3.4rem), 14cqi); white-space: nowrap; }
@media (max-width: 760px) { .risk-stats strong { font-size: min(2.2rem, 12cqi); } }

/* Request sections on the capacity and tokens pages: centred heading, centred form. */
.section-centered > .wrap > .section-eyebrow,
.section-centered > .wrap > h2,
.section-centered > .wrap > .section-lede { text-align: center; margin-left: auto; margin-right: auto; }
.section-centered > .wrap > .section-lede { max-width: 62ch; }
.section-centered .cx-modes, .section-centered .cx-steps, .section-centered .cx-desk-form { max-width: 860px; margin-left: auto; margin-right: auto; }
.section-centered .cx-desk-form .cx-intent { text-align: center; }
.section-centered .cx-desk-form .cx-intent legend { margin-left: auto; margin-right: auto; }
.section-centered .cx-desk-form .form-actions { justify-content: center; }

/* GPUs / Tokens slider at the top of the compute How and Theory dialogs. */
.mode-switch { display: inline-flex; align-items: center; gap: 10px; margin: 16px 0 4px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.mode-label { font: inherit; font-size: 0.86rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); background: none; border: 0; padding: 4px 2px; cursor: pointer; transition: color 0.2s; }
.mode-label.is-on { color: var(--mint); }
.mode-toggle { position: relative; width: 52px; height: 28px; border-radius: 999px; border: 1px solid var(--line-mint); background: rgba(124, 224, 188, 0.12); cursor: pointer; padding: 0; }
.mode-thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--mint); transition: transform 0.25s cubic-bezier(.2,.7,.2,1); }
.mode-toggle[aria-checked="true"] .mode-thumb { transform: translateX(24px); }
.mode-toggle:focus-visible, .mode-label:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .mode-thumb { transition: none; } }
.cx-research-first { margin-top: 28px; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
@media (max-width: 640px) {
  .tk-board-table { min-width: 0; }
  .tk-board-table .tk-pick span { display: none; }
  .tk-board-table th:nth-child(4), .tk-board-table td:nth-child(4), .tk-board-table th:nth-child(5), .tk-board-table td:nth-child(5),
  .tk-board-table th:nth-child(6), .tk-board-table td:nth-child(6) { display: none; }
}
@media (max-width: 640px) { .tk-board-table th, .tk-board-table td { padding-left: 6px; padding-right: 6px; white-space: nowrap; } }

/* ==========================================================================
   GPU and token twins (14 Oct 2026): the two indices, the two request pages
   and the landing sections share one layout.
   ========================================================================== */

/* Stats under each index: eight tiles in a 4 x 2 grid, wide enough for every value on one line. */
.cx-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cx-stats > div { min-width: 0; }
.cx-stats dd { font-size: 1.05rem; }
@media (max-width: 720px) { .cx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cx-switch-link { margin: 14px 0 0; font-size: 0.95rem; color: var(--text-3); }

/* Landing: twin sections with centred heads. */
.section-twin > .wrap > .section-eyebrow,
.section-twin > .wrap > h2,
.section-twin > .wrap > .section-lede { text-align: center; margin-left: auto; margin-right: auto; }
.section-twin > .wrap > .section-lede { max-width: 62ch; margin-bottom: 8px; }
.section-twin > .wrap > .cta-row { justify-content: center; }
.section-twin > .wrap > .fineprint { text-align: center; margin-left: auto; margin-right: auto; }
.cxh-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-top: 24px; }
.cxh-col-head { display: inline-flex; gap: 8px; margin-bottom: 12px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mint); }
.cxh-col-head:hover { text-decoration: none; color: var(--text); }
.cxh-cards-stack { grid-template-columns: 1fr !important; margin-top: 0; }
.cxh-research { text-align: center; }
@media (max-width: 760px) { .cxh-pair { grid-template-columns: 1fr; } }
/* Side by side, the two columns share one set of rows (subgrid), and the 1fr rows
   take the tallest card's height, so all six cards line up and match. */
@media (min-width: 761px) {
  .cxh-pair { grid-template-rows: auto repeat(3, 1fr); row-gap: 12px; }
  .cxh-pair > .cxh-col { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
  .cxh-pair > .cxh-col > .cxh-cards { display: contents; }
  .cxh-pair > .cxh-col > .cxh-col-head { justify-self: start; margin-bottom: 0; }
}

/* The token members strip (token-visual.js): where the GPU index has its sparkline. */
.tk-strip { display: block; overflow: visible; }
.tk-strip-axis { stroke: var(--line); stroke-width: 1; }
.tk-strip-dot { stroke: var(--bg); stroke-width: 1; }
.tk-strip-dot.tk-frontier { fill: var(--tk-frontier); }
.tk-strip-dot.tk-mid { fill: var(--tk-mid); }
.tk-strip-dot.tk-fast { fill: var(--tk-fast); }
.tk-strip-label { fill: var(--text-3); font-size: 10px; font-family: var(--sans); }
.chooser-strip { position: relative; z-index: 1; margin-top: 8px; min-height: 44px; }

/* Token index chart, Members view: one row per member, input to output. */
.tk-member-hit { fill: transparent; }
.tk-member.is-on .tk-member-hit { fill: rgba(255, 255, 255, 0.04); }
.tk-member.is-on .tk-member-name { fill: var(--text); }
.tk-in { fill: var(--bg-raised); stroke-width: 2; }
.tk-in.tk-frontier { stroke: var(--tk-frontier); } .tk-in.tk-mid { stroke: var(--tk-mid); } .tk-in.tk-fast { stroke: var(--tk-fast); }
.tk-members-svg .tk-range { stroke-opacity: 0.6; stroke-width: 2.5; }
#tk-chart:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; border-radius: 6px; }

/* Request pages: room between the lede and the blocks under it. */
.section-centered > .wrap > .section-lede { margin-bottom: 32px; }
.section-centered .cx-modes { margin-top: 0; }
.section-centered .cx-desk-form { margin-top: 32px; }

/* Dialog head: tabs left; the GPUs/Tokens switch beside the close button, right. */
.info-head-end { display: flex; align-items: center; gap: 12px; }
.info-head .mode-switch { margin: 0; padding: 4px 8px; gap: 8px; }
.info-head .mode-label { font-size: 0.78rem; }
.info-head .mode-toggle { width: 44px; height: 24px; }
.info-head .mode-thumb { width: 16px; height: 16px; }
.info-head .mode-toggle[aria-checked="true"] .mode-thumb { transform: translateX(20px); }
@media (max-width: 560px) { .info-head { flex-wrap: wrap; } .info-head .mode-label { font-size: 0.72rem; } }
.footer-grid:has(.footer-menu-four) { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
@media (max-width: 860px) { .footer-grid:has(.footer-menu-four) { grid-template-columns: 1fr; } }
.site-menu-four .menu-group ul a, .footer-menu-four .menu-group ul a { white-space: nowrap; }

/* Regions on the homepage (14 Oct 2026): the interactive map. region-map.js
   fetches region-map.svg into .rm-canvas and drives the zoom; the land is
   drawn with non-scaling strokes so borders stay hairlines at any zoom. */
.rm { margin-top: 26px; }
.rm-tabs { flex-wrap: wrap; justify-content: center; margin: 0 auto 16px; display: flex; width: fit-content; max-width: 100%; border-radius: 22px; }
.rm-tabs .world-btn { font-size: 0.88rem; padding: 8px 16px; }
.rm-tabs .world-btn.is-preview { background: rgba(124, 224, 188, 0.12); color: var(--text); }
.rm-stage {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px);
  background:
    linear-gradient(rgba(124, 224, 188, 0.035) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(124, 224, 188, 0.035) 1px, transparent 1px) 0 0 / 48px 48px,
    var(--bg-raised);
}
.rm-canvas { aspect-ratio: 1000 / 434.73; }
.rm-canvas.rm-failed { aspect-ratio: auto; }
.rm-svg { display: block; width: 100%; height: 100%; }
.rm-svg path { vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.rm-land { fill: #17231f; stroke: rgba(255, 255, 255, 0.07); stroke-width: 0.6; }
.rm-land-dim { fill: #111a17; }
.rm-region path { fill: rgba(124, 224, 188, 0.2); stroke: rgba(124, 224, 188, 0.38); stroke-width: 0.6; cursor: pointer; transition: fill 0.35s ease, stroke 0.35s ease; }
.rm-svg[data-active]:not([data-active="world"]) .rm-region:not(.is-active) path { fill: rgba(124, 224, 188, 0.08); stroke: rgba(124, 224, 188, 0.18); }
.rm-region.is-active path { fill: rgba(124, 224, 188, 0.45); stroke: var(--mint); stroke-width: 1; }
.rm-hub { opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
.rm-hub.is-active { opacity: 1; }
.rm-hub-dot { fill: var(--mint); stroke: var(--bg); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.rm-hub-ring { fill: none; stroke: var(--mint); stroke-width: 1px; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; animation: rm-pulse 2.4s ease-out infinite; }
.rm-hub-label { font: 600 10.5px var(--sans); fill: var(--text); paint-order: stroke; stroke: rgba(7, 11, 10, 0.85); stroke-width: 3px; stroke-linejoin: round; transform: translate(6px, 3.5px); }
@keyframes rm-pulse { from { transform: scale(1); opacity: 0.9; } to { transform: scale(4.2); opacity: 0; } }

.rm-card {
  position: absolute; left: 16px; bottom: 16px; width: min(300px, calc(100% - 32px));
  display: grid; gap: 6px; padding: 16px 18px; text-align: left;
  background: rgba(12, 19, 17, 0.9); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 14px 38px rgba(0, 0, 0, 0.45);
}
.rm-card-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint); }
.rm-card strong { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; line-height: 1.2; color: var(--text); }
.rm-card p { margin: 0; font-size: 0.92rem; color: var(--text-2); }
.rm-card-hubs { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rm-card-hubs li { font-size: 0.78rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line-mint); color: var(--mint); background: var(--mint-deep); }
.rm-noscript { margin: 0; padding: 24px 28px; display: grid; gap: 8px; text-align: left; color: var(--text-2); }

@media (max-width: 760px) {
  .rm-card { position: static; width: auto; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; background: var(--bg-raised); }
}
@media (prefers-reduced-motion: reduce) {
  .rm-region path, .rm-hub { transition: none; }
  .rm-hub-ring { animation: none; opacity: 0; }
}

/* ==========================================================================
   Editorial details: square-marked labels, rolling button labels, the hero
   quote panel and the scroll-lit statement
   ========================================================================== */

.section-eyebrow::before,
.eyebrow::before,
.hq-label::before {
  content: "";
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  margin-right: 0.7em;
  vertical-align: 0.14em;
  background: currentColor;
}

.btn-roll { display: inline-grid; overflow: hidden; }
.btn-roll > span { grid-area: 1 / 1; transition: transform 0.42s cubic-bezier(0.22, 0.8, 0.24, 1); }
.btn-roll-b { transform: translateY(110%); }
.btn:hover .btn-roll-a,
.btn:focus-visible .btn-roll-a { transform: translateY(-110%); }
.btn:hover .btn-roll-b,
.btn:focus-visible .btn-roll-b { transform: none; }

/* Hero: copy on the left, the headline index on the right, the strip beneath both */
.hero-split {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
  gap: 36px clamp(32px, 5vw, 72px);
  align-items: end;
}
.hero-single .hero-split .hero-copy { max-width: none; }
.hero-split .cx-strip { grid-column: 1 / -1; max-width: none; margin-top: 0; }
@media (max-width: 900px) { .hero-split { grid-template-columns: minmax(0, 1fr); } }

.hq { border-top: 3px solid var(--mint); padding-top: 16px; }
.hq:empty { display: none; }
.hq-link { display: grid; gap: 10px; color: var(--text); }
.hq-link:hover { text-decoration: none; }
.hq-head {
  display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); white-space: nowrap;
}
.hq-label { color: var(--mint); }
.hq-value { display: flex; align-items: baseline; gap: 12px; margin-top: 8px; }
.hq-value strong {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(3.6rem, 2.2rem + 4.4vw, 5.8rem); line-height: 0.95; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hq-value span { font-family: var(--mono); font-size: 0.85rem; color: var(--text-3); white-space: nowrap; }
.hq-change { margin: 0; font-size: 0.92rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.hq-change span { white-space: nowrap; }
.hq-change .cx-up { color: var(--warn); }
.hq-change .cx-down { color: var(--mint); }
.hq-chart { display: block; width: 100%; height: 84px; margin-top: 4px; color: var(--mint); }
.hq-line { fill: none; stroke: var(--mint); stroke-width: 1.6; stroke-linejoin: round; transition: stroke-dashoffset 1.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hq-desc { margin: 0; font-size: 0.95rem; color: var(--text-2); max-width: 44ch; }
.hq-link:hover .hq-label { text-decoration: underline; text-underline-offset: 3px; }

/* The statement: a label column and the passage, each under its own rule */
.statement { padding: clamp(12px, 1.6vw, 24px) 0 clamp(48px, 6vw, 88px); }
.statement-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 18px clamp(24px, 3vw, 40px);
}
.statement-grid > * { margin: 0; padding-top: 18px; border-top: 1px solid var(--line); }
.statement-text {
  margin: 0;
  max-width: 30ch;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 1.1rem + 2vw, 2.7rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--text);
}
.statement .cta-row { margin-top: 30px; }
[data-scroll-lit].is-lit-ready .lit-word { color: rgba(233, 241, 236, 0.16); transition: color 0.4s ease; }
[data-scroll-lit].is-lit-ready .lit-word.is-lit { color: var(--text); }
@media (max-width: 760px) {
  .statement-grid { grid-template-columns: minmax(0, 1fr); }
  .statement-grid > .statement-body { padding-top: 0; border-top: 0; }
}

/* Interface text (--ui): the header and its pills, the menu, buttons, tabs and
   toggles. Declared last so it wins over their `font: inherit`. */
.site-header, .site-menu, .footer-menu, .btn, .world-btn, .info-tab, .cx-seg-btn, .mode-switch, .menu-info button {
  font-family: var(--ui);
}
.site-header .wordmark { font-family: var(--serif); }

/* Site background: background.js draws "Aurora" on a fixed canvas behind every
   page. The root keeps the plain ground, so without WebGL2 nothing changes. */
html { background: var(--bg); }
.has-site-bg body { background: transparent; }
.site-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100lvh;
  z-index: -1;
  display: block;
  pointer-events: none;
}

/* ==========================================================================
   Get Priced (compute-request.html): the guided request. One question at a
   time once request.js adds .is-guided; without it, every step stacks.
   ========================================================================== */

.rq-page { padding: clamp(40px, 6vw, 84px) 0 clamp(56px, 7vw, 100px); }
.rq-wrap { max-width: 820px; }
.rq-head { margin-bottom: clamp(28px, 4vw, 44px); }
.rq-head h1 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.4rem); }

.rq { position: relative; }
.rq-progress { height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; margin-bottom: 14px; }
.rq-progress-bar { display: block; height: 100%; width: 0; background: var(--mint); border-radius: inherit; transition: width 0.45s cubic-bezier(0.22, 0.8, 0.24, 1); }
.rq:not(.is-guided) .rq-progress { display: none; }
.rq-count { margin: 0 0 22px; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }

.rq-step { margin: 0 0 44px; padding: 0; border: 0; min-width: 0; }
.rq.is-guided .rq-step { margin-bottom: 0; min-height: 300px; }
.rq-step[disabled] { opacity: 1; }
.rq-q {
  display: block;
  padding: 0;
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.35rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text);
  text-wrap: balance;
}
.rq-sub { margin: 0 0 22px; color: var(--text-2); max-width: 56ch; }
.rq-q + .rq-choices, .rq-q + .rq-fields, .rq-q + .rq-field { margin-top: 22px; }
.rq-label { margin: 22px 0 10px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }

/* Choices: the radio or checkbox stays in the page for keyboards and screen readers; the label is the card. */
.rq-choices { display: grid; gap: 10px; }
.rq-choices-wide { max-width: 640px; }
.rq-choices-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.rq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rq-choices input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.rq-choices label {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 14px;
  row-gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(16, 25, 23, 0.72);
  backdrop-filter: blur(6px);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, transform 0.18s;
}
.rq-chips label { padding: 10px 14px; column-gap: 10px; }
.rq-choices label > strong { grid-column: 2; font-weight: 600; }
.rq-choices label > small { grid-column: 2; font-size: 0.9rem; color: var(--text-2); line-height: 1.45; }
.rq-key {
  grid-row: 1 / span 2;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line-mint);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--mint);
  transition: background 0.18s, color 0.18s;
}
.rq-chips .rq-key { width: 20px; height: 20px; font-size: 0.68rem; }
.rq-choices label:hover { border-color: var(--line-mint); background: rgba(124, 224, 188, 0.06); }
.rq-choices input:checked + label { border-color: var(--mint); background: rgba(124, 224, 188, 0.12); }
.rq-choices input:checked + label .rq-key { background: var(--mint); color: var(--on-mint); border-color: var(--mint); }
.rq-choices input:focus-visible + label { outline: 2px solid var(--mint); outline-offset: 2px; }
.rq-choices input:checked + label { animation: rq-pick 0.32s ease; }
@keyframes rq-pick { 40% { transform: scale(0.985); } }

/* Typed answers: large, on a single rule, like a form you write on. */
.rq-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px clamp(18px, 3vw, 36px); max-width: 640px; }
.rq-field { margin: 0; }
.rq-field-wide { max-width: 640px; }
.rq-field label { display: block; margin-bottom: 6px; font-size: 0.86rem; font-weight: 600; color: var(--text-2); }
.rq-field input, .rq-field select, .rq-field textarea {
  width: 100%;
  padding: 10px 2px;
  border: 0;
  border-bottom: 1px solid var(--line-mint);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 1.3rem;
  color-scheme: dark;
  transition: border-color 0.18s;
}
.rq-field textarea { font-size: 1.05rem; line-height: 1.5; resize: vertical; min-height: 110px; }
.rq-field select { appearance: none; padding-right: 36px; background: linear-gradient(45deg, transparent 50%, var(--mint) 50%) calc(100% - 16px) 55% / 6px 6px no-repeat, linear-gradient(135deg, var(--mint) 50%, transparent 50%) calc(100% - 10px) 55% / 6px 6px no-repeat; }
.rq-field select option, .rq-field select optgroup { background: var(--bg-raised); color: var(--text); }
.rq-field input::placeholder, .rq-field textarea::placeholder { color: var(--text-3); opacity: 0.7; }
.rq-field input:focus, .rq-field select:focus, .rq-field textarea:focus { outline: none; border-bottom-color: var(--mint); box-shadow: 0 1px 0 var(--mint); }
@media (max-width: 620px) { .rq-fields { grid-template-columns: minmax(0, 1fr); } }

.rq-error { margin: 14px 0 0; font-size: 0.92rem; font-weight: 500; color: var(--warn); }
.rq-shake { animation: rq-shake 0.36s ease; }
@keyframes rq-shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }

.rq-in-fwd { animation: rq-in-fwd 0.42s cubic-bezier(0.22, 0.8, 0.24, 1); }
.rq-in-back { animation: rq-in-back 0.42s cubic-bezier(0.22, 0.8, 0.24, 1); }
@keyframes rq-in-fwd { from { opacity: 0; transform: translateY(18px); } }
@keyframes rq-in-back { from { opacity: 0; transform: translateY(-18px); } }

.rq-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.rq-nav [hidden] { display: none; }
.rq-hint { font-size: 0.86rem; color: var(--text-3); }
.rq-hint kbd, .rq kbd { padding: 2px 7px; border: 1px solid var(--line); border-radius: 5px; font-family: var(--mono); font-size: 0.78rem; color: var(--text-2); }

.rq-recap { margin: 24px 0 8px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(12, 19, 17, 0.72); max-width: 640px; }
.rq-recap .rq-label { margin-top: 0; }
.rq-recap ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rq-recap li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.rq-recap li:last-child { padding-bottom: 0; border-bottom: 0; }
.rq-recap-q { grid-column: 1; font-size: 0.82rem; color: var(--text-3); }
.rq-recap-a { grid-column: 1; color: var(--text); }
.rq-edit { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--mint); font: inherit; font-family: var(--ui); font-size: 0.82rem; cursor: pointer; }
.rq-edit:hover { border-color: var(--line-mint); }
.rq-foot { margin-top: 40px; }

@media (prefers-reduced-motion: reduce) {
  .rq-in-fwd, .rq-in-back, .rq-shake, .rq-choices input:checked + label { animation: none; }
}
.rq-field input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.rq-field input[type=number]::-webkit-inner-spin-button,
.rq-field input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Language switch (EN / 한), beside Get Priced and FAQ in the menu and footer bars */
.lang-switch { display: flex; align-items: stretch; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.lang-opt { display: flex; align-items: center; justify-content: center; min-width: 38px; padding: 0 10px; border-radius: 6px; font-weight: 600; font-size: 0.9rem; color: var(--text-2); white-space: nowrap; }
.lang-opt.is-current { background: var(--mint); color: var(--on-mint); }
:is(.site-menu, .footer-menu) a.lang-opt { color: var(--text-2); }
:is(.site-menu, .footer-menu) a.lang-opt:hover,
:is(.site-menu, .footer-menu) a.lang-opt:focus-visible { background: var(--surface); color: var(--text); text-decoration: none; }

/* Korean pages: Hangul comes from the subset fonts in fonts/ko/ (Offset Serif KR, from
   Noto Serif KR, for display; Offset Sans KR, from Pretendard, for text and interface); Latin stays Newsreader / Inter / Geist.
   Korean breaks between words, not inside them, and wide tracking suits Latin capitals only. */
html:lang(ko) {
  --serif: "Newsreader", "Offset Serif KR", "AppleMyungjo", "Nanum Myeongjo", serif;
  --sans: "Inter", "Offset Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --ui: "Geist", "Offset Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
:lang(ko) { word-break: keep-all; overflow-wrap: break-word; }
.lang-ko :is(.eyebrow, .section-eyebrow, .menu-group-title, .rq-count, .rq-label) { letter-spacing: 0.04em; }
.lang-ko :is(h1, h2, h3, .rq-q, .statement-text) { letter-spacing: -0.01em; line-height: 1.25; }

/* Netlify injects a "Powered by Netlify" badge on published pages. Its script skips
   drawing when #nl-badge-frame already exists (the empty div at the top of
   src/shell.html); this hides it if the script runs before that div is parsed. */
#nl-badge-frame { display: none !important; }

/* Get the App (app.html) -------------------------------------------------------- */
.page-app .app-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
@media (max-width: 900px) { .page-app .app-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .page-app .app-steps { grid-template-columns: 1fr; } }
.page-app .app-dl { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.page-app .app-dl-note { margin-top: 12px; }
.page-app .app-access-form { margin-top: 18px; }
.page-app .app-access-form > .btn { margin-top: 16px; }
.page-app .app-access-status { min-height: 1.5em; margin: 10px 0 0; color: var(--mint); }
.page-app .app-access-status.is-error { color: var(--warn); }

/* ==========================================================================
   Buyers and sellers (20 Oct 2026): the gate at / (index.html, after adame.ai)
   and the seller home (sell.html). The logo on both sides leads back to the gate.
   ========================================================================== */

/* Both sides' menus and footers have three groups (buyers: Market, GPUs, Tokens;
   sellers: Market, Sell, App). */
.side-compute .site-menu.site-menu-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 620px) { .side-compute .site-menu.site-menu-three { grid-template-columns: 1fr; } }
.side-compute .footer-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
@media (max-width: 860px) { .side-compute .footer-grid { grid-template-columns: 1fr; } }
.side-compute .footer-menu .menu-group ul a { white-space: nowrap; }

/* Seller home (sell.html): one screen. Copy on the left, the racks (sell-hero.js)
   on the right; on a phone the racks sit under the copy. */
.sell-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100vh - 68px);
  min-height: calc(100svh - 68px);
  padding: clamp(48px, 7vw, 96px) 0;
  overflow: hidden;
}
.sell-racks {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
}
.sell-racks canvas { display: block; width: 100%; height: 100%; }
.sell-legend {
  position: absolute;
  right: clamp(20px, 4vw, 40px);
  bottom: 18px;
  display: flex;
  gap: 16px;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.sell-legend span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  vertical-align: 0;
}
.sell-legend .is-idle::before { background: rgba(233, 241, 236, 0.14); }
.sell-legend .is-listed::before { background: var(--warn); }
.sell-legend .is-filled::before { background: var(--mint); }
.sell-hero-copy { position: relative; z-index: 1; width: 100%; }
.sell-hero h1 {
  max-width: 9ch;
  font-size: clamp(3.2rem, 1.8rem + 6vw, 7rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin-bottom: 0.32em;
}
.lang-ko .sell-hero h1 { max-width: 8em; font-size: clamp(2.6rem, 1.6rem + 4.6vw, 5.6rem); line-height: 1.12; }
.sell-hero .lede { max-width: 32ch; }
.sell-hero .cta-row { margin-top: 30px; }
.sell-tape {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin: 34px 0 0;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--text-3);
}
.sell-tape a { color: var(--text-2); white-space: nowrap; }
.sell-tape a:hover { color: var(--text); text-decoration: none; }
.sell-tape code { color: var(--mint); }
.sell-tape strong { font-weight: 500; color: var(--text); }
.sell-tape-label { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; }
@media (max-width: 760px) {
  .sell-hero { align-items: flex-start; padding-bottom: 46vh; }
  .sell-racks {
    top: auto;
    width: 100%;
    height: 44vh;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 30%);
  }
  .sell-legend { left: clamp(20px, 4vw, 40px); right: auto; }
}

/* List capacity (sell-list.html) and the seller FAQ. */
.sell-steps { margin: 0; }
.page-sell-list #list .cx-desk-form { margin-top: 6px; }
.page-sell-faq .faq { margin-top: 26px; }
.page-sell-faq .cta-row { margin-top: 30px; }

/* The gate: one question, two bracketed choices, a one-line footer. The
   Aurora (background.js) is the only picture; gate.js flares it on a choice. */
body.side-root { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.side-root main { flex: 1; display: grid; place-items: center; padding: 40px 0 56px; }
.side-root .site-header { background: transparent; border-bottom-color: transparent; backdrop-filter: none; }
.entry-actions { gap: 18px; font-family: var(--ui); font-size: 0.9rem; }
.entry-login { color: var(--text-2); }
.entry-login:hover { color: var(--text); text-decoration: none; }
.entry-header .lang-switch { display: inline-flex; gap: 2px; padding: 0; border: 0; background: none; }
.entry-header .lang-opt { padding: 4px 8px; border-radius: 7px; color: var(--text-3); background: none; }
.entry-header .lang-opt.is-current { color: var(--text); background: none; }
.entry-header a.lang-opt:hover { color: var(--text); background: var(--surface); text-decoration: none; }

.entry {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-inline: clamp(20px, 4vw, 40px);
  animation: entry-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.entry-eyebrow { margin-bottom: 18px; }
.entry h1 { max-width: 18ch; margin-bottom: clamp(30px, 4vw, 46px); }
.entry-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px clamp(18px, 3vw, 34px); }

/* A choice: a pale field between two upright bars, the bars taller than the field. */
.entry-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(330px, 84vw);
  padding: 20px 22px 18px;
  background: rgba(233, 241, 236, 0.035);
  color: var(--text);
  transition: background-color 0.25s ease, opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.entry-choice::before,
.entry-choice::after {
  content: "";
  position: absolute;
  top: -7px;
  bottom: -7px;
  width: 2px;
  background: var(--text);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.25s ease;
}
.entry-choice::before { left: 0; }
.entry-choice::after { right: 0; }
.entry-choice:hover, .entry-choice:focus-visible { text-decoration: none; background: rgba(124, 224, 188, 0.08); }
.entry-choice:hover::before, .entry-choice:focus-visible::before { transform: translateX(-6px); background: var(--mint); }
.entry-choice:hover::after, .entry-choice:focus-visible::after { transform: translateX(6px); background: var(--mint); }
.entry-choice:focus-visible { outline: none; }
.entry-label {
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.entry-note { font-size: 0.86rem; color: var(--text-3); }

/* Leaving: the chosen field opens out, the other falls away. */
.is-leaving .entry-choice:not(.is-chosen) { opacity: 0; transform: translateY(6px); }
.is-leaving .entry-choice.is-chosen { background: rgba(124, 224, 188, 0.12); }
.is-leaving .entry-choice.is-chosen::before { transform: translateX(-22px); background: var(--mint); }
.is-leaving .entry-choice.is-chosen::after { transform: translateX(22px); background: var(--mint); }
.is-leaving .entry-eyebrow, .is-leaving .entry h1 { opacity: 0.35; transition: opacity 0.4s ease; }

@keyframes entry-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.entry-footer { padding: 0 0 22px; font-size: 0.8rem; color: var(--text-3); }
.entry-footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; }
.entry-footer-links { display: flex; gap: 16px; }
.entry-footer a { color: var(--text-3); text-decoration: underline; text-underline-offset: 3px; }
.entry-footer a:hover { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .entry { animation: none; }
  .entry-choice, .entry-choice::before, .entry-choice::after { transition: none; }
}
.footer-email { white-space: nowrap; }

/* Buyer home (buy.html), streamlined 20 Oct 2026: the request bar in the hero,
   one Market block with a GPUs | Tokens switch, three steps. */
.ask {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 640px;
  margin-top: 30px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(16, 25, 23, 0.82);
  backdrop-filter: blur(6px);
  transition: border-color 0.2s ease;
}
.ask:focus-within { border-color: var(--line-mint); }
.ask-tabs { display: flex; flex: none; gap: 2px; padding: 3px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.03); font-family: var(--ui); }
.ask-tabs input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ask-tabs label { padding: 8px 12px; border-radius: 7px; font-size: 0.88rem; font-weight: 500; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.ask-tabs label:hover { color: var(--text); }
.ask-tabs input:checked + label { background: var(--surface-2); color: var(--text); }
.ask-tabs input:focus-visible + label { outline: 2px solid var(--mint); outline-offset: 1px; }
.ask-input {
  flex: 1;
  min-width: 0;
  padding: 10px 8px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.98rem;
}
.ask-input::placeholder { color: var(--text-3); }
.ask-input:focus { outline: none; }
.ask-go { flex: none; padding: 11px 18px; }
.ask-note { margin: 12px 0 0; font-size: 0.86rem; color: var(--text-3); }
@media (max-width: 560px) {
  .ask { flex-wrap: wrap; }
  .ask-input { flex-basis: 100%; order: 2; padding: 12px 10px; }
  .ask-go { order: 3; width: 100%; }
}

.mk-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 22px; }
.mk-head h2 { margin-bottom: 0; }
.mk-tabs[hidden] { display: none; }
.mk-panel + .mk-panel { margin-top: 36px; }
.mk-panel[hidden] { display: none; }
.mk-more { margin: 14px 0 0; font-family: var(--ui); font-size: 0.92rem; }
.mk-more a span { display: inline-block; transition: transform 0.2s ease; }
.mk-more a:hover { text-decoration: none; }
.mk-more a:hover span { transform: translateX(3px); }

.cxh-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .cxh-cards-3 { grid-template-columns: 1fr; } }

/* "Your exposure" (exposure.js): the bill analyses on the GPU capacity and token
   pages. Inputs beside four tiles, then the charts and the what-if bars. */
.ex { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap); align-items: start; margin-top: 22px; }
.ex-inputs { display: grid; gap: 16px; }
.ex-term { border: 0; margin: 0; padding: 0; min-width: 0; }
.ex-term legend { padding: 0; margin-bottom: 8px; font-size: 0.9rem; font-weight: 600; color: var(--text); }
.ex-term-options { display: flex; width: 100%; margin-bottom: 0; }
.ex-term-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ex-term-options label { flex: 1; text-align: center; padding: 8px 6px; border-radius: 999px; font-family: var(--ui); font-size: 0.86rem; font-weight: 500; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.ex-term-options input:checked + label { background: var(--mint); color: var(--on-mint); }
.ex-term-options input:focus-visible + label { outline: 2px solid var(--mint); outline-offset: 2px; }
.ex-stats { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ex-stats article { align-content: start; }
.ex-stats strong { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); }
.ex-stats small { display: block; margin-top: 6px; font-size: 0.82rem; line-height: 1.45; color: var(--text-3); }

.ex-panels { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gap); margin-top: var(--gap); }
.ex-panel { margin: 0; min-width: 0; }
.ex-panel-full { grid-column: 1 / -1; }
.ex-cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 14px; }
.ex-cap-title { font-family: var(--sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mint); }
.ex-cap-title::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; vertical-align: 2px; background: currentColor; }
.lang-ko .ex-cap-title { letter-spacing: 0.04em; }
.ex-cap-sub { font-size: 0.82rem; color: var(--text-3); }
.ex-legend { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 0.8rem; color: var(--text-3); }
.ex-legend i { display: inline-block; width: 14px; height: 8px; margin-right: -8px; border-radius: 2px; }
.ex-legend .is-past { height: 2px; background: var(--mint); }
.ex-legend .is-range { background: rgba(224, 166, 92, 0.35); }
.ex-legend .is-fixed { height: 0; border-top: 2px dashed var(--text); }
.ex-chart { min-height: 120px; }
.ex-readout { margin: 10px 0 0; min-height: 1.4em; font-size: 0.86rem; color: var(--text-3); }
.ex-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ex-svg text { user-select: none; }

/* The fan: past year in mint, the range ahead in amber, the fixed rate dashed. */
.ex-band-1 { fill: rgba(224, 166, 92, 0.24); }
.ex-band-2 { fill: rgba(224, 166, 92, 0.09); }
.ex-today { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.ex-fixed { stroke: var(--text); stroke-width: 2; stroke-dasharray: 6 5; }
.ex-dot { fill: var(--bg); stroke: var(--mint); stroke-width: 2; pointer-events: none; }
.ex-lab { font-size: 11px; }
.ex-lab-up { fill: var(--warn); }
.ex-lab-fixed { fill: var(--text); font-weight: 600; }
.ex-lab-down { fill: var(--text-3); }
.ex-fan.is-drawing .ex-past { stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: ex-draw 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
.ex-fan.is-drawing .ex-fan-bands { opacity: 0; animation: ex-fade 0.8s 0.7s ease forwards; }
.ex-fan.is-drawing .ex-fixed { opacity: 0; animation: ex-fade 0.5s 1.2s ease forwards; }
@keyframes ex-draw { to { stroke-dashoffset: 0; } }
@keyframes ex-fade { to { opacity: 1; } }

/* Token charts: dots per model, provider trails, the biggest rise in amber. */
.ex-rail { stroke: var(--line-soft); stroke-width: 1; }
.ex-row-label { font-size: 12px; fill: var(--text-2); }
.ex-pt { fill: rgba(233, 241, 236, 0.28); stroke: var(--bg); stroke-width: 1.5; cursor: default; transition: r 0.15s; }
.ex-pt:hover { fill: var(--text); }
.ex-pt.is-mine { fill: rgba(124, 224, 188, 0.55); }
.ex-pt.is-me { fill: var(--mint); stroke: var(--bg); stroke-width: 2; }
.ex-me-label { fill: var(--mint); font-weight: 600; }
.ex-trail { fill: none; stroke: rgba(233, 241, 236, 0.12); stroke-width: 1.25; }
.ex-trail.is-me { stroke: rgba(124, 224, 188, 0.6); stroke-width: 1.75; }
.ex-jump { stroke: var(--warn); stroke-width: 2; stroke-dasharray: 4 3; }
.ex-jump-label { fill: var(--warn); font-weight: 600; }

/* What-if bars: falls to the left in mint, rises to the right in amber. */
.ex-scen { display: grid; gap: 10px; }
.ex-scen-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) auto; align-items: center; gap: 10px; }
.ex-scen-label { display: grid; line-height: 1.2; }
.ex-scen-label b { font-family: var(--mono); font-size: 0.86rem; font-weight: 500; color: var(--text); }
.ex-scen-label small { font-size: 0.74rem; color: var(--text-3); }
.ex-scen-row.is-mark .ex-scen-label b { color: var(--warn); }
.ex-scen-track { position: relative; height: 10px; border-radius: 3px; background: rgba(255, 255, 255, 0.03); }
.ex-scen-track::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--line); }
.ex-scen-track i { position: absolute; top: 0; bottom: 0; width: 0; border-radius: 2px; transition: width 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.ex-scen.is-in .ex-scen-track i { width: var(--w); }
.ex-scen-track .is-up { left: 50%; background: var(--warn); }
.ex-scen-track .is-down { right: 50%; background: var(--mint); }
.ex-scen-row strong { font-family: var(--mono); font-size: 0.86rem; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 900px) {
  .ex, .ex-panels { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ex-stats { grid-template-columns: 1fr; }
  .ex-scen-row { grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ex-scen-track i { transition: none; }
}

/* Exposure: the inputs panel and the four tiles end on the same line. The two
   number fields share a row; the tiles stretch to the panel's height, with
   each tile's note held to its foot. Stacked again below 900px. */
@media (min-width: 901px) {
  .ex { align-items: stretch; }
  .ex-inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; align-content: space-between; }
  .ex-inputs > .field:first-child, .ex-inputs > .ex-term { grid-column: 1 / -1; }
  .ex-out { display: flex; flex-direction: column; }
  .ex-stats { flex: 1; grid-auto-rows: 1fr; }
  .ex-stats article { display: flex; flex-direction: column; }
  .ex-stats article small { margin-top: auto; padding-top: 10px; }
}
.ex-hint { display: block; margin: 6px 0 0; }

/* "TBD" tag beside a menu item that is not built yet (Token contracts, 20 Oct 2026). */
.menu-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border: 1px solid rgba(224, 166, 92, 0.4); border-radius: 999px; font-family: var(--ui); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.06em; color: var(--warn); vertical-align: 1px; }
.page-tbd .section-eyebrow .badge { margin-left: 8px; vertical-align: 1px; }
.page-tbd .tbd { min-height: 46vh; }
/* List Capacity (sell-list.html) reuses Get Priced's guided form; how it works sits under it. */
.rq-how { margin-top: clamp(40px, 6vw, 64px); padding-top: 24px; border-top: 1px solid var(--line-soft); max-width: 640px; }
.rq-how .rq-label { margin-top: 0; }

/* "Launching soon" (index.html since 20 Oct 2026): the chooser's look, with a
   waitlist. The buying/selling choice reuses the bracketed .entry-choice. */
.soon h1 { max-width: none; margin-bottom: 18px; }
.soon-lede { max-width: 52ch; margin: 0 auto clamp(30px, 4vw, 42px); color: var(--text-2); }
.soon-form { width: min(680px, 100%); margin: 0 auto; text-align: left; }
.soon-role { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 30px; margin: 0 0 30px; padding: 0; border: 0; min-width: 0; }
.soon-role input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.soon-choice { cursor: pointer; width: min(300px, 84vw); }
.soon-role input:checked + .soon-choice { background: rgba(124, 224, 188, 0.1); }
.soon-role input:checked + .soon-choice::before { transform: translateX(-6px); background: var(--mint); }
.soon-role input:checked + .soon-choice::after { transform: translateX(6px); background: var(--mint); }
.soon-role input:focus-visible + .soon-choice { outline: 2px solid var(--mint); outline-offset: 6px; }
.soon-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px clamp(18px, 3vw, 30px); }
.soon-field { margin: 0; }
.soon-field-wide { grid-column: 1 / -1; }
.soon-field label { display: block; margin-bottom: 6px; font-size: 0.86rem; font-weight: 600; color: var(--text-2); }
.soon-field input {
  width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; color: var(--text); font: inherit; font-size: 1.1rem;
}
.soon-field input:focus { outline: none; border-bottom-color: var(--mint); box-shadow: 0 1px 0 var(--mint); }
.soon-go { display: flex; width: 100%; margin-top: 30px; }
.soon-status { min-height: 1.5em; margin: 14px 0 0; text-align: center; color: var(--mint); font-weight: 500; }
.soon-status.is-error { color: var(--warn); }
.soon-note { margin: 4px 0 0; text-align: center; font-size: 0.82rem; color: var(--text-3); }
.soon-form.is-done .soon-role, .soon-form.is-done .soon-fields, .soon-form.is-done .soon-go { display: none; }
.soon-form.is-done .soon-status { font-family: var(--serif); font-size: 1.5rem; }
@media (max-width: 560px) { .soon-fields { grid-template-columns: 1fr; } }