/* CryptoDigital. Midnight near-black, ivory type, a steel-blue data layer, and one champagne tone
   reserved for the extremes and for actions (never green or red: an extreme has no direction). Display: Source Serif 4 at
   optical size (JP 2026-09-14: Bodoni's hairlines were hard to read on black). Text and interface: Geist.
   Signature: the dial (one segmented mark per coin, gold at either end), in the hero and again behind the waitlist.
   "Built to be checked" carries the hero's warm light behind its log illustration. */
:root {
  --black: #05070d;
  --raised: #0b0f1a;
  --raised-2: #111727;
  --band: #0b0f1a;
  --deep: #030409;
  --line: rgba(170, 190, 225, .14);
  --line-strong: rgba(170, 190, 225, .26);
  --ivory: #f3efe7;
  --soft: #cfd3da;
  --mute: #8e9bb0;
  --data: #7f9cc7;
  --tile: #7f93b3;
  --champagne: #d8bc8a;
  --champagne-hi: #ead3a8;
  --glow: rgba(216, 188, 138, .16);

  --gutter: clamp(16px, 5vw, 64px);
  --wide: 78rem;
  --display: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --text: "Geist", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
/* `hidden` must win over any display rule (.signup is a grid) */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  /* the warm light sits on body, not a clipped box, so it has no edge under the header */
  background: radial-gradient(ellipse 48rem 36rem at 78% 16rem, rgba(216, 188, 138, .11), transparent 72%) no-repeat, var(--black);
  color: var(--ivory);
  font-family: var(--text);
  font-size: 1.0625rem;
  font-weight: 350;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* film grain: keeps a large black field from reading as a flat void */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: var(--line-strong); transition: color .2s, text-decoration-color .2s; }
a:hover { color: var(--champagne-hi); text-decoration-color: currentColor; }
:focus-visible { outline: 1px solid var(--champagne); outline-offset: 4px; border-radius: 2px; }
::selection { background: var(--champagne); color: var(--black); }

.wrap { max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: var(--gutter); top: 12px; background: var(--ivory); color: var(--black); padding: .5rem .8rem; z-index: 30; }

/* ── header ─────────────────────────────────────────────── */
.site-head { position: relative; z-index: 2; padding-block: 1.6rem; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.wordmark { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 500; font-size: 1.02rem; letter-spacing: .02em; min-height: 44px; }
.wordmark svg { width: 20px; height: 20px; flex: none; }
.head-side { display: flex; align-items: center; gap: .4rem; }
.head-tg { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--mute); transition: color .25s; }
.head-tg svg { width: 21px; height: 21px; }
.head-tg:hover { color: var(--champagne-hi); }
.head-link {
  font-size: .9rem; font-weight: 450; text-decoration: none; letter-spacing: .01em;
  padding: .55rem 1rem; border: 1px solid var(--line-strong); border-radius: 999px; white-space: nowrap;
  min-height: 44px; display: inline-flex; align-items: center;
  transition: border-color .25s, background-color .25s, color .25s;
}
.head-link:hover { color: var(--black); background: var(--champagne); border-color: var(--champagne); }

/* ── buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--text); font-weight: 500; font-size: .98rem; letter-spacing: .01em; text-decoration: none;
  padding: .95rem 1.6rem; border-radius: 999px; border: 1px solid var(--champagne); cursor: pointer;
  background: var(--champagne); color: var(--black);
  transition: background-color .25s, border-color .25s, color .25s;
}
.btn:hover { background: var(--champagne-hi); border-color: var(--champagne-hi); color: var(--black); }
.btn-quiet { background: transparent; color: var(--ivory); border-color: var(--line-strong); }
.btn-quiet:hover { background: transparent; color: var(--ivory); border-color: var(--ivory); }

/* ── hero ───────────────────────────────────────────────── */
.hero { position: relative; padding-block: clamp(2.5rem, 7vw, 6rem) clamp(4.5rem, 10vw, 8rem); }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.hero h1 {
  margin: 0; font-family: var(--display); font-optical-sizing: auto; font-weight: 500;
  font-size: clamp(2.6rem, 5vw, 4.8rem); line-height: 1.03; letter-spacing: -.02em; text-wrap: balance;
}
.lede { margin: clamp(1.6rem, 3vw, 2.2rem) 0 0; max-width: 44ch; font-size: clamp(1.06rem, 1.4vw, 1.2rem); color: var(--soft); }
.hero-kicker { margin: 1.3rem 0 0; font-family: var(--display); font-optical-sizing: auto; font-weight: 500; font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.3; color: var(--ivory); }
.actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.1rem; }

/* the lock screen: a clock in the display serif, and the example message settling in under it */
.lock-col { display: grid; justify-items: center; }
.lock { margin: 0; display: grid; justify-items: center; }
.lock-clock {
  display: flex; align-items: baseline; gap: .5rem; font-family: var(--display); font-optical-sizing: auto;
  font-weight: 500; font-size: clamp(4.5rem, 9vw, 8.5rem); line-height: 1; letter-spacing: -.03em;
  color: var(--ivory); font-variant-numeric: lining-nums;
}
.lock-clock small { font-family: var(--text); font-size: .9rem; letter-spacing: .04em; color: var(--mute); }
.note {
  width: 100%; max-width: 25rem; margin-top: clamp(1.6rem, 3vw, 2.4rem); padding: 1rem 1.15rem 1.1rem;
  background: linear-gradient(180deg, rgba(22, 29, 46, .8), rgba(11, 15, 27, .88));
  -webkit-backdrop-filter: blur(20px) saturate(120%); backdrop-filter: blur(20px) saturate(120%);
  border: 1px solid rgba(170, 190, 225, .18); border-radius: 22px;
  box-shadow: 0 50px 90px -40px rgba(216, 188, 138, .22), 0 30px 60px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .06);
  font-size: .95rem; line-height: 1.5; font-variant-numeric: tabular-nums;
}
.note p { margin: 0; color: var(--soft); }
.note p + p { margin-top: .45rem; }
.note-head { display: flex; align-items: center; gap: .55rem; margin-bottom: .6rem; font-size: .8rem; color: var(--mute); }
.note-head svg { width: 20px; height: 20px; flex: none; }
.note-app { color: var(--soft); font-weight: 500; letter-spacing: .01em; }
.note-time { margin-left: auto; }
.note .note-title { color: var(--ivory); font-weight: 500; }
.note-x { color: var(--champagne); }
.note .note-meta { font-size: .82rem; color: var(--mute); }
.note-block { margin-top: .7rem; padding-top: .65rem; border-top: 1px solid var(--line); }
.note .note-block-head { font-size: .82rem; color: var(--soft); }
.note-table { width: 100%; border-collapse: collapse; margin: .45rem 0 0; font-size: .74rem; line-height: 1.35; }
.note-table th, .note-table td { padding: .32rem 0 .32rem .55rem; text-align: right; font-weight: 400; white-space: nowrap; }
.note-table th:first-child, .note-table td:first-child { text-align: left; padding-left: 0; }
.note-table thead th { font-size: .68rem; color: var(--mute); padding-bottom: .2rem; }
.note-table tbody tr { border-top: 1px solid var(--line); }
.note-table tbody th { color: var(--mute); white-space: normal; }
.note-table td { color: var(--soft); }
.note-table .rng-cell { min-width: 0; white-space: normal; }
.note-table .ord-cell { white-space: normal; min-width: 0; color: var(--mute); }
.note-table tbody th .of { display: block; white-space: nowrap; opacity: .62; }
.rng { display: block; }
.rng-bar { position: relative; display: block; height: 3px; margin-top: .3rem; border-radius: 2px; background: rgba(170, 190, 225, .14); }
.rng-bar i { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: var(--data); }
.rng-bar b { position: absolute; left: 50%; top: -2px; width: 1px; height: 7px; background: var(--mute); }
.lock figcaption { display: flex; align-items: center; gap: .6rem; margin-top: 1.2rem; font-size: .85rem; color: var(--mute); }
/* the figures behind the example, kept out of the message itself */
.lock-fine { width: 100%; max-width: 25rem; margin-top: 1.35rem; }
.lock-fine p { margin: 0; font-size: .78rem; line-height: 1.5; color: var(--mute); }
.lock-fine p + p { margin-top: .6rem; }
.lock-fine .lf-note, .lock-fine .lf-disc { font-size: .72rem; opacity: .82; }
.dot { width: .42rem; height: .42rem; border-radius: 50%; background: var(--champagne); box-shadow: 0 0 0 4px var(--glow); }

.js .lock-clock { animation: fade 1.1s var(--ease) both; }
.js .note { animation: settle 1.1s .1s var(--ease) both; }
.js .example:not(.in) .lock, .js .example:not(.in) .lock *, .js .example:not(.in) .lock-fine p { animation-play-state: paused; }
.js .lock figcaption { animation: fade .8s .6s var(--ease) both; }
.js .lock .note-title, .js .lock .note-meta, .js .lock .note-block-head,
.js .lock .note-table thead tr, .js .lock .note-table tbody tr { animation: noterise .5s var(--ease) both; }
.js .lock .note-title { animation-delay: 0.7s; }
.js .lock .note-meta:nth-of-type(2) { animation-delay: 0.85s; }
.js .lock .note-meta:nth-of-type(3) { animation-delay: 1s; }
.js .lock .note-block-head { animation-delay: 1.15s; }
.js .lock .note-table thead tr { animation-delay: 1.3s; }
.js .lock .note-table tbody tr:nth-child(1) { animation-delay: 1.45s; }
.js .lock .note-table tbody tr:nth-child(2) { animation-delay: 1.6s; }
.js .lock .note-table tbody tr:nth-child(3) { animation-delay: 1.75s; }
.js .rng-bar i { transform-origin: left; animation: bargrow .6s var(--ease) both; }
.js .note-table tbody tr:nth-child(1) .rng-bar i { animation-delay: 1.7s; }
.js .note-table tbody tr:nth-child(2) .rng-bar i { animation-delay: 1.85s; }
.js .note-table tbody tr:nth-child(3) .rng-bar i { animation-delay: 2s; }
.js .lock-fine p { animation: noterise .5s var(--ease) both; }
.js .lock-fine p:nth-child(1) { animation-delay: 1.95s; }
.js .lock-fine p:nth-child(2) { animation-delay: 2.1s; }
.js .lock-fine p:nth-child(3) { animation-delay: 2.25s; }
@keyframes noterise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes bargrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes settle { from { opacity: 0; transform: translateY(-14px) scale(.97); } to { opacity: 1; transform: none; } }

/* ── sections ───────────────────────────────────────────── */
.section { position: relative; padding-block: clamp(3.6rem, 8vw, 6.4rem); }
/* dividers fade out at both ends instead of boxing each section */
.section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent); }
.section h2 {
  margin: 0 0 1.6rem; font-family: var(--display); font-optical-sizing: auto; font-weight: 500;
  font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height: 1.04; letter-spacing: -.015em; max-width: 20ch;
}
.section p { max-width: 60ch; }
.small { font-size: .92rem; }

/* how it works: a real sequence, so it is numbered */
.steps { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3.5rem); counter-reset: step; }
.steps li { counter-increment: step; padding-top: 1.6rem; border-top: 1px solid var(--line-strong); }
.steps li::before {
  content: counter(step); display: block; font-family: var(--display); font-optical-sizing: auto;
  font-weight: 500; font-style: italic; font-size: 3.4rem; line-height: 1; color: var(--champagne); margin-bottom: 1.4rem;
}
.steps h3 { margin: 0 0 .5rem; font-size: 1.15rem; font-weight: 500; line-height: 1.35; letter-spacing: .005em; }
.steps p { margin: 0; color: var(--mute); }
.steps .step-key { margin-top: .6rem; color: var(--ivory); }

/* what extreme means: statement, then the instrument */
.extreme-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 7vw, 6rem); align-items: start; }
.extreme-intro h2 { margin: 0; }
.define-statement {
  margin: 0; font-family: var(--display); font-optical-sizing: auto; font-weight: 500;
  font-size: clamp(1.5rem, 2.7vw, 2.2rem); line-height: 1.3; letter-spacing: -.01em; text-wrap: pretty;
}

/* the ask, repeated where interest peaks */
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.3rem; margin-top: clamp(2.2rem, 5vw, 3.4rem); }
.section .cta-row .cta-note { margin: 0; color: var(--mute); font-size: .95rem; }

/* who it's for: two typeset rows */
.who, .faq { margin-top: 2.5rem; border-top: 1px solid var(--line-strong); }
.who-row, .faq-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1rem, 7vw, 6rem); align-items: baseline; padding-block: clamp(1.8rem, 4vw, 2.8rem); border-bottom: 1px solid var(--line); }
.who h3, .faq h3 { margin: 0; font-family: var(--display); font-optical-sizing: auto; font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 500; letter-spacing: -.015em; line-height: 1.1; }
.who p, .faq p { margin: 0; color: var(--soft); font-size: 1.12rem; }
.faq h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }

/* waitlist */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 7vw, 6rem); align-items: start; }
.waitlist { background: radial-gradient(ellipse 70% 80% at 85% 100%, rgba(216, 188, 138, .09), transparent 70%), var(--deep); }
.waitlist p { color: var(--soft); }
.waitlist .wl-key { color: var(--ivory); font-family: var(--display); font-optical-sizing: auto; font-size: 1.35rem; line-height: 1.3; }
.form-shell {
  background: linear-gradient(180deg, var(--raised-2), var(--raised)); border: 1px solid var(--line);
  border-radius: 22px; padding: clamp(1.4rem, 3.5vw, 2.4rem);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.signup { display: grid; gap: 1.3rem; }
.field { display: grid; gap: .5rem; }
.field label { font-size: .92rem; font-weight: 450; color: var(--ivory); display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.opt { font-size: .82rem; font-weight: 400; color: var(--mute); }
.field input {
  width: 100%; font: inherit; font-size: 1.02rem; color: var(--ivory); background: rgba(5, 7, 13, .6);
  border: 1px solid var(--line-strong); border-radius: 14px; padding: .95rem 1.05rem;
  transition: border-color .2s, box-shadow .2s;
}
.field input::placeholder { color: #6b7488; }
.field input:hover { border-color: rgba(170, 190, 225, .4); }
.field input:focus { outline: none; border-color: var(--champagne); box-shadow: 0 0 0 4px var(--glow); }
.field input[aria-invalid="true"], .field input[aria-invalid="true"]:focus { border-color: #d7917f; box-shadow: 0 0 0 4px rgba(215, 145, 127, .16); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.signup-btn { justify-self: start; margin-top: .3rem; }
.signup-btn[disabled] { opacity: .6; cursor: progress; }
.waitlist .form-error { margin: 0; font-size: .92rem; color: #e6ab9b; }
.form-error:empty { display: none; }
.field-help { margin: .45rem 0 0; font-size: .84rem; line-height: 1.45; color: var(--mute); }
.form-note { margin: 0; font-size: .86rem; color: var(--mute); }
.waitlist .form-note { color: var(--mute); }
.signup-done { outline: none; }
.waitlist .signup-done p { margin: 0; color: var(--soft); }
.waitlist .signup-done .done-title { font-family: var(--display); font-optical-sizing: auto; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.1; color: var(--ivory); margin-bottom: .6rem; }
.js .signup-done:not([hidden]) { animation: fade .6s var(--ease) both; }

/* footer */
.site-foot { border-top: 1px solid var(--line); padding-block: 3rem 3.5rem; font-size: .9rem; color: var(--mute); }
.site-foot .wrap { display: grid; gap: 1.4rem; }
.disclaimer { color: var(--soft); max-width: 62ch; margin: 0; }
.foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.8rem; margin: 0; padding: 0; list-style: none; }
/* 44px tap height for thumbs, without changing how the row looks */
.foot-links a, .foot-links button { display: inline-flex; align-items: center; min-height: 44px; }
.foot-links button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: var(--line-strong); }
.foot-links button:hover { color: var(--champagne-hi); }

/* consent */
.consent {
  position: fixed; right: var(--gutter); bottom: 16px; z-index: 20;
  width: min(24rem, calc(100% - 2 * var(--gutter)));
  background: rgba(11, 15, 26, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--line-strong); border-radius: 18px; padding: 1.2rem 1.3rem;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9); font-size: .92rem; color: var(--soft);
}
.consent p { margin: 0 0 .8rem; }
.consent .row { display: flex; flex-wrap: wrap; gap: .6rem; }
.consent .btn { padding: .6rem 1.1rem; font-size: .9rem; }

/* legal pages */
.legal { padding-block: clamp(3rem, 7vw, 5rem) clamp(5rem, 9vw, 7rem); }
.legal article { max-width: 44rem; }
.legal h1 { font-family: var(--display); font-optical-sizing: auto; font-weight: 500; font-size: clamp(2.6rem, 5.5vw, 4rem); line-height: 1; letter-spacing: -.02em; margin: 0 0 .8rem; }
.legal .effective { color: var(--mute); margin: 0 0 3rem; }
.legal h2 { font-family: var(--text); font-weight: 500; font-size: 1.12rem; margin: 2.6rem 0 .6rem; color: var(--ivory); }
.legal p, .legal li { color: var(--soft); }
.legal strong { color: var(--ivory); font-weight: 500; }
.legal ul { padding-left: 1.2rem; }
.legal li + li { margin-top: .4rem; }
.legal .caps { text-transform: uppercase; font-size: .9rem; letter-spacing: .015em; }

/* ── the story: price looks calm, the layer underneath goes to an extreme ── */
.lead-note { margin-top: 1.4rem; color: var(--mute); }
.story { overflow-x: clip; }
.story-fig, .watch-fig { margin: clamp(2.2rem, 5vw, 3.6rem) 0 0; }
.story-chart {
  position: relative; padding: clamp(1.1rem, 3vw, 2.2rem) clamp(1rem, 3vw, 2.2rem) clamp(.9rem, 2vw, 1.4rem);
  border: 1px solid var(--line); border-radius: 24px;
  background: radial-gradient(ellipse 60% 80% at 100% 100%, rgba(216, 188, 138, .06), transparent 70%), linear-gradient(180deg, var(--raised), var(--black));
}
.lane { position: relative; height: clamp(96px, 15vw, 168px); }
.lane + .lane { margin-top: clamp(.9rem, 2vw, 1.4rem); padding-top: clamp(.9rem, 2vw, 1.4rem); border-top: 1px dashed var(--line); box-sizing: content-box; }
.lane-label { position: absolute; left: 0; top: -.2rem; z-index: 1; font-size: .82rem; color: var(--mute); }
.lane + .lane .lane-label { top: calc(clamp(.9rem, 2vw, 1.4rem) - .2rem); }
.lane-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lane-svg .band { fill: rgba(127, 156, 199, .06); stroke: rgba(127, 156, 199, .4); stroke-width: 1; stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; }
.lane-svg .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lane-price .line { stroke: var(--data); }
.lane-pos .line { stroke: var(--ivory); }
.lane-pos .line.tail { stroke: var(--champagne); stroke-width: 2.6; }
.end-dot {
  position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--champagne); box-shadow: 0 0 0 6px var(--glow), 0 0 30px 6px rgba(216, 188, 138, .45);
  opacity: 0; transform: scale(.4); transition: opacity .4s, transform .5s var(--ease);
}
.story-fig.is-extreme .end-dot { opacity: 1; transform: scale(1); animation: beat 1.8s 1s ease-in-out infinite; }
@keyframes beat { 0%, 100% { box-shadow: 0 0 0 6px var(--glow), 0 0 30px 6px rgba(216, 188, 138, .45); } 50% { box-shadow: 0 0 0 12px rgba(216, 188, 138, .08), 0 0 44px 10px rgba(216, 188, 138, .35); } }
.story-fig.is-extreme .band { stroke: rgba(216, 188, 138, .45); }
.story-axis { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--line); font-size: .82rem; color: var(--mute); }
.story-axis .now { color: var(--champagne); font-weight: 500; }
.story-axis .legend { display: inline-flex; align-items: center; gap: .45rem; }
.story-axis .legend i { width: 18px; height: 10px; border: 1px dashed rgba(127, 156, 199, .6); border-radius: 2px; background: rgba(127, 156, 199, .06); }
.story-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; margin-top: 1.4rem; }
.note-mini { max-width: 22rem; margin: 0; padding: .8rem 1rem .9rem; border-radius: 18px; opacity: 0; transform: translateY(-10px) scale(.97); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.js .note.note-mini { animation: none; }
.note-mini .note-head { margin-bottom: .35rem; }
.note-mini .note-title { font-size: .92rem; }
.story-fig.is-extreme .note-mini { opacity: 1; transform: none; }
.story-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; }
.story .story-status { margin: 0; color: var(--soft); min-width: 15rem; }
.story-fig.is-extreme .story-status { color: var(--champagne); }
.story-replay { padding: .7rem 1.2rem; font-size: .92rem; }
.story-fig figcaption, .watch-fig figcaption { margin-top: 1.1rem; font-size: .85rem; color: var(--mute); max-width: 66ch; }

/* ── how it works: a compact strip under the hero ── */
.how-strip { position: relative; padding-block: clamp(2rem, 4.5vw, 3.2rem); }
.how-strip::before, .how-strip::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent); }
.how-strip::before { top: 0; }
.how-strip::after { bottom: 0; }
.how-strip + .section::before { display: none; }
.how-grid { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 9.8fr); gap: clamp(1.4rem, 4vw, 3rem); align-items: start; }
.how-strip h2 { margin: .2rem 0 0; font-family: var(--display); font-optical-sizing: auto; font-weight: 500; font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.2; }
.how-strip .steps { margin: 0; gap: clamp(1.2rem, 3vw, 2.4rem); }
.how-strip .steps li { padding-top: 0; border-top: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: start; column-gap: .85rem; }
.how-strip .steps li::before { grid-row: span 2; margin: 0; font-size: 2.3rem; line-height: .95; }
.how-strip .steps h3 { margin: 0 0 .3rem; font-size: 1.12rem; }
.how-strip .steps .step-key { grid-column: 2; }
.how-strip .steps p { font-size: .98rem; line-height: 1.6; }

/* ── varied section layouts ── */
.centered { display: grid; justify-items: center; text-align: center; }
.checked h2 { margin: 0 0 1.4rem; font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--mute); }
.checked .define-statement { max-width: 24ch; font-size: clamp(1.9rem, 4.2vw, 3.3rem); line-height: 1.18; }
.checked .lead-note { margin: 1.6rem auto 0; }
.checked .checked-key { margin-top: 1rem; color: var(--soft); max-width: 44ch; text-wrap: balance; }

/* ── questions: tap to open ── */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: clamp(1.05rem, 2.3vw, 1.5rem); cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { margin: 0; transition: color .25s; }
.faq-item summary:hover h3 { color: var(--champagne-hi); }
.faq-icon { position: relative; flex: none; width: 24px; height: 24px; border: 1px solid var(--line-strong); border-radius: 50%; transition: border-color .3s; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 1px; background: var(--ivory); transform: translate(-50%, -50%); }
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .35s var(--ease); }
.faq-item[open] .faq-icon { border-color: var(--champagne); }
.faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq .faq-item p { margin: 0 0 clamp(1.05rem, 2.3vw, 1.5rem); max-width: 62ch; }

/* ── etched edges + glass depth: a hairline that turns from gold to steel around the edge ── */
.etched { position: relative; border-color: transparent !important; }
.etched::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(216, 188, 138, .55), rgba(127, 156, 199, .22) 32%, rgba(127, 156, 199, .12) 62%, rgba(216, 188, 138, .38));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.etched::after { content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(243, 239, 231, .38), transparent); }

/* ── light that follows the cursor (desktop, set by site.js) ── */
.spot { position: relative; }
.spot-light { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .45s var(--ease);
  mix-blend-mode: screen;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(216, 188, 138, .09), rgba(127, 156, 199, .05) 42%, transparent 72%); }
.spot.is-lit-by-cursor .spot-light { opacity: 1; }

/* ── slow aurora behind the hero ── */
.hero { isolation: isolate; overflow-x: clip; }
.hero::before, .hero::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(50px); mix-blend-mode: screen; }
.hero::before { width: 46rem; height: 30rem; right: -6rem; top: -8rem; background: radial-gradient(closest-side, rgba(216, 188, 138, .2), transparent); animation: drift-a 38s ease-in-out infinite alternate; }
.hero::after { width: 40rem; height: 26rem; right: 16rem; top: 10rem; background: radial-gradient(closest-side, rgba(127, 156, 199, .17), transparent); animation: drift-b 46s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate(-10rem, 6rem) scale(1.12); } }
@keyframes drift-b { to { transform: translate(9rem, -5rem) scale(.9); } }

/* ── radar rings at the breakout ── */
.end-dot::before, .end-dot::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--champagne); opacity: 0; pointer-events: none; }
.story-fig.is-extreme .end-dot { animation: none; }
.story-fig.is-extreme .end-dot::before { animation: ring 2.6s ease-out .15s 3; }
.story-fig.is-extreme .end-dot::after { animation: ring 2.6s ease-out 1.25s 3; }
@keyframes ring { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(6); opacity: 0; } }

@media (max-width: 600px) {
  .section { padding-block: clamp(2.8rem, 12vw, 3.4rem); }
  .hero::before { width: 24rem; height: 18rem; right: -8rem; top: -4rem; }
  .hero::after { width: 20rem; height: 16rem; right: 2rem; top: 14rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after, .story-fig.is-extreme .end-dot::before, .story-fig.is-extreme .end-dot::after { animation: none; }
}

/* ── tonal bands: sections separate by depth and light, not by lines ──
   raised bands fade in and out of the midnight at their top and bottom edges */
.how-strip { background: linear-gradient(90deg, transparent, var(--band) 14%, var(--band) 86%, transparent); }
.checked, #questions { background: linear-gradient(180deg, var(--black), var(--band) 4rem, var(--band) calc(100% - 4rem), var(--black)); }
.checked { background:
  radial-gradient(ellipse 44% 58% at 50% 52%, rgba(216, 188, 138, .11), rgba(216, 188, 138, .03) 55%, transparent 75%),
  linear-gradient(180deg, var(--black), var(--band) 4rem, var(--band) calc(100% - 4rem), var(--black)); }
.watch .define-statement { max-width: 26ch; }
.waitlist { box-shadow: inset 0 1px 0 rgba(170, 190, 225, .06); }
.site-foot { background: #080b13; }
/* where the tone changes, the hairline divider is redundant */
.checked::before, .checked + .section::before, #questions::before, #questions + .section::before { display: none; }

/* ── the dial: one mark per coin, drawn by site.js ── */
.hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.dial { margin: 0; display: grid; justify-items: center; }
.dial-stage { position: relative; width: min(100%, 38rem); aspect-ratio: 1; }
.dial-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dial-clock {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center;
  font-family: var(--display); font-optical-sizing: auto; font-weight: 500; font-size: clamp(2.2rem, 4.6vw, 3.9rem);
  line-height: 1; letter-spacing: -.03em; font-variant-numeric: lining-nums; color: var(--ivory);
}
.dial-clock small { margin-top: .35rem; font-family: var(--text); font-size: .78rem; letter-spacing: .06em; color: var(--mute); }
.dial-chip {
  position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); display: flex; align-items: center; gap: .55rem;
  padding: .55rem .95rem .55rem .6rem; border-radius: 999px; white-space: nowrap; font-size: .84rem; color: var(--soft);
  background: rgba(14, 19, 32, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(216, 188, 138, .35); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .9), 0 0 0 5px rgba(216, 188, 138, .05);
  opacity: 0; transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.dial-chip svg { width: 18px; height: 18px; flex: none; }
.dial-chip b { color: var(--champagne); font-weight: 500; }
.dial.is-lit .dial-chip { opacity: 1; transform: translateX(-50%) translateY(-4px); }
.dial figcaption { margin-top: 1rem; max-width: 34rem; text-align: center; font-size: .82rem; color: var(--mute); }
html:not(.js) .dial-chip { opacity: 1; }

/* ── what a message looks like ── */
.example-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 7vw, 6.5rem); align-items: center; }
.example .note { max-width: 27rem; margin-top: 0; }
.example .lock-fine { max-width: 27rem; }
.example-copy h2 { margin-bottom: 1.2rem; }
.example-copy .define-statement { max-width: 26ch; }
.parts { margin: 2.2rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2.2rem; }
.parts div { padding-top: 1rem; border-top: 1px solid var(--line-strong); }
.parts dt { font-weight: 500; color: var(--ivory); margin-bottom: .3rem; }
.parts dd { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--mute); }
.parts div:first-child { border-top-color: var(--champagne); }
.example { background: radial-gradient(ellipse 40% 60% at 22% 50%, rgba(127, 156, 199, .1), transparent 72%); }

/* ── built to be checked: dark, with the hero's warm light pooled behind the log ── */
.section.checked {
  isolation: isolate; overflow: hidden;
  background:
    radial-gradient(ellipse 34% 62% at 73% 50%, rgba(216, 188, 138, .15), rgba(216, 188, 138, .04) 55%, transparent 78%),
    radial-gradient(ellipse 40% 70% at 20% 40%, rgba(127, 156, 199, .08), transparent 75%),
    linear-gradient(180deg, var(--black), var(--band) 4rem, var(--band) calc(100% - 4rem), var(--black));
}
/* the same slow drifting light as around the hero clock */
.section.checked::after { content: ""; position: absolute; z-index: -1; pointer-events: none; width: 38rem; height: 26rem; right: 4%; top: 50%;
  margin-top: -13rem; border-radius: 50%; filter: blur(60px); mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(216, 188, 138, .16), transparent); animation: drift-a 40s ease-in-out infinite alternate; }
.checked-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2.5rem, 7vw, 6rem); align-items: center; }
.section.checked h2 { margin: 0 0 1.2rem; font-size: clamp(1.1rem, 1.6vw, 1.3rem); font-family: var(--text); font-weight: 500; letter-spacing: .005em; color: var(--champagne); }
.checked .define-statement { max-width: 20ch; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.12; }
.section.checked .lead-note { margin: 1.6rem 0 0; }
.section.checked .checked-key { margin-top: 1rem; color: var(--soft); max-width: 40ch; text-wrap: pretty; }
.ledger { margin: 0; }
.ledger-list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.ledger-list::before { content: ""; position: absolute; left: 22px; top: 24px; bottom: 24px; width: 1px; opacity: .6;
  background: repeating-linear-gradient(180deg, var(--data) 0 4px, transparent 4px 9px); }
.lg-row {
  position: relative; display: flex; align-items: center; gap: .9rem; min-height: 48px; padding: .7rem 1.1rem .7rem .6rem;
  background: linear-gradient(180deg, rgba(22, 29, 46, .85), rgba(11, 15, 27, .9)); border: 1px solid var(--line); border-radius: 14px;
  font-size: .92rem; color: var(--ivory); font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 16px 30px -22px rgba(0, 0, 0, .9);
}
.lk { position: relative; z-index: 1; flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--black); border: 1px solid var(--line-strong); }
.lk::before { content: ""; position: absolute; left: 7px; top: 4px; width: 6px; height: 6px; border: 1.5px solid var(--data); border-bottom: 0; border-radius: 4px 4px 0 0; }
.lk::after { content: ""; position: absolute; left: 5px; top: 10px; width: 12px; height: 8px; border-radius: 2px; background: var(--data); }
.lg-past .bar { display: block; height: 7px; border-radius: 4px; background: rgba(127, 156, 199, .14); }
.lg-past .bar:first-of-type { background: rgba(127, 156, 199, .26); }
.lg-new { border-color: rgba(216, 188, 138, .5); box-shadow: 0 0 0 4px var(--glow), 0 24px 50px -24px rgba(216, 188, 138, .35), inset 0 1px 0 rgba(255, 255, 255, .06); }
.lg-new .lk { border-color: rgba(216, 188, 138, .5); }
.lg-new .lk::before { border-color: var(--champagne); }
.lg-new .lk::after { background: var(--champagne); }
.lg-new b { font-weight: 600; }
.lg-new span { color: var(--mute); }
.lg-new em { margin-left: auto; font-style: normal; font-weight: 500; color: var(--champagne); }
.ledger figcaption { margin-top: 1rem; font-size: .84rem; color: var(--mute); }
.js .lg-new { transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .lg-new em { transition: opacity .4s .7s; }
.js .ledger:not(.in) .lg-new { opacity: 0; transform: translateY(-10px); }
.js .ledger:not(.in) .lg-new em { opacity: 0; }
@media (max-width: 900px) {
  .section.checked { background:
    radial-gradient(ellipse 80% 30% at 50% 78%, rgba(216, 188, 138, .15), rgba(216, 188, 138, .04) 55%, transparent 80%),
    linear-gradient(180deg, var(--black), var(--band) 4rem, var(--band) calc(100% - 4rem), var(--black)); }
  .section.checked::after { width: 26rem; height: 18rem; right: -4rem; top: auto; bottom: 4rem; margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .section.checked::after { animation: none; } }

/* ── who it's for: two panels, each with a small picture ── */
.who { border-top: 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2rem); }
.who-panel { padding: clamp(1.4rem, 3vw, 2.2rem); border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(180deg, var(--raised), var(--black)); }
.who-panel h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: .6rem; }
.who .who-panel p { font-size: 1.02rem; color: var(--mute); }
.who-pic { position: relative; display: flex; flex-wrap: wrap; align-content: flex-start; gap: .5rem; min-height: 7.4rem; margin-bottom: 1.6rem; padding: 1rem; border-radius: 16px; background: rgba(127, 156, 199, .05); border: 1px dashed var(--line); }
.who-pic-grid { display: grid; grid-template-columns: repeat(4, 1fr); align-content: center; }
.pill { display: inline-flex; align-items: center; justify-content: center; height: 2.1rem; padding: 0 .85rem; border-radius: 10px; border: 1px solid var(--line); font-size: .8rem; letter-spacing: .03em; color: var(--tile); background: rgba(127, 156, 199, .05); }
.pill.is-lit { color: var(--champagne); border-color: var(--champagne); background: rgba(216, 188, 138, .08); box-shadow: 0 0 0 4px var(--glow); }
.who-note { flex-basis: 100%; margin-top: .3rem; padding: .5rem .8rem; border-radius: 12px; font-size: .8rem; color: var(--soft); background: rgba(14, 19, 32, .9); border: 1px solid rgba(216, 188, 138, .3); }

/* ── the dial again, behind the waitlist ── */
.waitlist { isolation: isolate; overflow: hidden; }
.dial-echo { position: absolute; z-index: -1; left: -14rem; bottom: -20rem; width: 46rem; aspect-ratio: 1; opacity: .5; pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 40%, transparent 70%); mask-image: radial-gradient(circle at 50% 50%, #000 40%, transparent 70%); }
.dial-echo .dial-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.waitlist .wrap { position: relative; }

@media (max-width: 900px) {
  .example-grid, .checked-grid { grid-template-columns: 1fr; }
  .example-copy { order: -1; }
  .who { grid-template-columns: 1fr; }
  .dial-stage { width: min(100%, 30rem); }
  .dial-echo { left: -18rem; bottom: -22rem; opacity: .35; }
}
@media (max-width: 520px) {
  .parts { grid-template-columns: 1fr; }
  .dial-chip { font-size: .74rem; bottom: 0; padding: .45rem .75rem .45rem .5rem; }
  .lg-row { gap: .6rem; font-size: .82rem; padding-right: .8rem; }
  .who-pic-grid { grid-template-columns: repeat(3, 1fr); }
  .who-pic-grid .pill:nth-child(n+7) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dial-chip, .js .lg-new, .js .lg-new em { transition: none; }
}

/* ── narrow ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero-grid, .extreme-intro, .split, .who-row, .faq-row, .how-grid { grid-template-columns: 1fr; }
  .hero-grid { gap: 3.5rem; }
  .extreme-intro { gap: 1.4rem; }
  .who-row, .faq-row { gap: .6rem; }
  .steps { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .lock-clock, .js .note, .js .lock figcaption { animation: none; }
  .js .lock .note-title, .js .lock .note-meta, .js .lock .note-block-head, .js .lock .note-table thead tr, .js .lock .note-table tbody tr, .js .rng-bar i,
  .js .lock-fine p { animation: none; }
}

/* ── redesign tuning: the dial is the hero's bold moment, so it gets room beyond its column ── */
@media (min-width: 901px) {
  .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .hero h1 { font-size: clamp(2.6rem, 4.6vw, 4.5rem); }
  .dial-stage { width: min(128%, 40rem); }
  .dial { justify-self: end; }
}
body { background: radial-gradient(ellipse 44rem 36rem at 70% 30rem, rgba(216, 188, 138, .09), transparent 72%) no-repeat, var(--black); }
.example-copy .define-statement { font-size: clamp(1.3rem, 2vw, 1.7rem); }
.dial-echo { width: 52rem; left: auto; right: -7rem; bottom: auto; top: 50%; transform: translateY(-50%); opacity: .55;
  -webkit-mask-image: none; mask-image: none; }
@media (max-width: 900px) { .dial-echo { width: 40rem; right: -14rem; top: auto; bottom: -14rem; transform: none; opacity: .35; } }

/* ── behind every message: the algorithm and the figures ── */
.hero-proof { display: flex; align-items: center; gap: .6rem; margin: 1.4rem 0 0; font-size: .92rem; color: var(--mute); }
.hero-proof .dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--champagne); box-shadow: 0 0 0 4px var(--glow); }
.research-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 7vw, 6rem); align-items: center; }
.research .eyebrow { margin: 0 0 1rem; font-size: clamp(1.1rem, 1.6vw, 1.3rem); font-weight: 500; color: var(--champagne); }
.research h2 { margin-bottom: 1.4rem; }
.research .define-statement { max-width: 26ch; font-size: clamp(1.3rem, 2.2vw, 1.7rem); color: var(--soft); }
.figures { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.8rem, 2vw, 1.2rem); margin: 0; }
.fig { margin: 0; padding: clamp(1.2rem, 2.6vw, 1.8rem); border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(180deg, var(--raised), var(--black)); }
.fig dt { font-family: var(--display); font-optical-sizing: auto; font-weight: 500; font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.05; letter-spacing: -.015em; color: var(--champagne-hi); }
.fig dd { margin: .7rem 0 0; font-size: .92rem; line-height: 1.5; color: var(--mute); }
.research .figures-note { margin: 1.1rem 0 0; font-size: .85rem; color: var(--mute); max-width: 56ch; }
.checked-sub { margin: 2rem 0 .8rem; font-size: 1.05rem; font-weight: 500; color: var(--ivory); }
.checked-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; max-width: 52ch; }
.checked-list li { position: relative; padding-left: 1.3rem; color: var(--soft); }
.checked-list li::before { content: ""; position: absolute; left: 0; top: .8em; width: 7px; height: 1px; background: var(--champagne); }
@media (max-width: 900px) {
  .research-grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .figures { grid-template-columns: 1fr; }
}

/* ── story chart: a square locks on where the reading reaches the extreme ── */
.end-dot, .lock-ring { left: calc(var(--tx, 100) * 1%); }
.lock-ring {
  position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; pointer-events: none; opacity: 0;
  transform: scale(2.6) rotate(45deg);
  transition: opacity .35s, transform .6s var(--ease);
  --c: var(--champagne);
  background:
    linear-gradient(var(--c), var(--c)) left top / 12px 1.5px no-repeat,
    linear-gradient(var(--c), var(--c)) left top / 1.5px 12px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 12px 1.5px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 1.5px 12px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 12px 1.5px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 1.5px 12px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 12px 1.5px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 1.5px 12px no-repeat;
}
.story-fig.is-locked .lock-ring { opacity: 1; transform: none; }
.story-axis { position: relative; display: block; min-height: 1.1rem; }
.story-axis .now { position: absolute; top: .7rem; right: 0; }
.story-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: .7rem; font-size: .82rem; color: var(--mute); }
.story-legend .legend { display: inline-flex; align-items: center; gap: .45rem; }
.story-legend .legend i { width: 18px; height: 10px; border: 1px dashed rgba(127, 156, 199, .6); border-radius: 2px; background: rgba(127, 156, 199, .06); }
@media (prefers-reduced-motion: reduce) {
  .lock-ring { transition: none; }
}

/* ── behind every message: the hero's drifting light, over a faint field of readings ── */
.section.research { isolation: isolate; overflow: hidden; }
.research-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.research-bg::before, .research-bg::after { content: ""; position: absolute; border-radius: 50%; filter: blur(55px); mix-blend-mode: screen; }
.research-bg::before { width: 42rem; height: 28rem; right: -4rem; top: 10%; background: radial-gradient(closest-side, rgba(216, 188, 138, .17), transparent); animation: drift-a 36s ease-in-out infinite alternate; }
.research-bg::after { width: 36rem; height: 24rem; left: 8%; bottom: -6rem; background: radial-gradient(closest-side, rgba(127, 156, 199, .14), transparent); animation: drift-b 44s ease-in-out infinite alternate; }
.research-bg i { position: absolute; inset: 0; opacity: 1;
  background-image: radial-gradient(circle, rgba(190, 205, 232, .55) 1.1px, transparent 1.6px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 48% 70% at 70% 50%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 48% 70% at 70% 50%, #000 20%, transparent 78%);
  animation: field 60s linear infinite; }
@keyframes field { to { background-position: 180px -90px; } }
@media (max-width: 900px) {
  .research-bg::before { width: 24rem; height: 18rem; right: -8rem; top: auto; bottom: 20%; }
  .research-bg::after { width: 20rem; height: 16rem; left: -6rem; top: 4rem; bottom: auto; }
  .research-bg i { -webkit-mask-image: radial-gradient(ellipse 80% 40% at 50% 70%, #000, transparent 75%); mask-image: radial-gradient(ellipse 80% 40% at 50% 70%, #000, transparent 75%); }
}
@media (prefers-reduced-motion: reduce) {
  .research-bg::before, .research-bg::after, .research-bg i { animation: none; }
}

/* ── around the clock: the markets on a dot map, each with its live local time ── */
.world-fig { margin: clamp(2.2rem, 5vw, 3.6rem) 0 0; }
.world-card { position: relative; overflow: hidden; padding: clamp(1rem, 3vw, 2.4rem); border: 1px solid var(--line); border-radius: 24px;
  background: radial-gradient(ellipse 50% 70% at 50% 40%, rgba(127, 156, 199, .08), transparent 75%), linear-gradient(180deg, var(--raised), var(--black)); }
.world-map { position: relative; aspect-ratio: 150 / 56; }
.world-fig figcaption { margin-top: 1.1rem; font-size: .85rem; color: var(--mute); max-width: 66ch; }
.world-map img { display: block; width: 100%; height: 100%; opacity: .55; }
.hub { position: absolute; width: 0; height: 0; }
.hub i { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--data); opacity: .7;
  animation: hub 12s calc(var(--d) * -1s) ease-in-out infinite; }
.hub i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid currentColor; color: var(--data); opacity: 0;
  animation: hub-ring 12s calc(var(--d) * -1s) ease-out infinite; }
.hub.is-day i { background: var(--champagne); box-shadow: 0 0 10px 2px rgba(216, 188, 138, .45); opacity: 1; }
.hub.is-day i::after { color: var(--champagne); }
@keyframes hub { 0%, 14%, 100% { transform: scale(1); } 4% { transform: scale(1.6); } }
@keyframes hub-ring { 0% { transform: scale(1); opacity: .8; } 12% { transform: scale(6); opacity: 0; } 100% { opacity: 0; } }
.hub b { position: absolute; white-space: nowrap; font-size: .78rem; font-weight: 500; color: var(--soft); line-height: 1.2;
  padding: .25rem .5rem; border-radius: 8px; background: rgba(5, 7, 13, .78); border: 1px solid var(--line); }
.hub time { margin-left: .2rem; color: var(--mute); font-variant-numeric: tabular-nums; }
.hub.is-day time { color: var(--champagne); }
.lab-r b { left: 10px; top: 0; transform: translateY(-50%); }
.lab-l b { right: 10px; top: 0; transform: translateY(-50%); }
.lab-t b { left: 0; bottom: 10px; transform: translateX(-50%); }
.lab-b b { left: 0; top: 10px; transform: translateX(-50%); }
@media (max-width: 700px) {
  .world-card { padding: .9rem .6rem; }
  .lab-wide b { display: none; }
  .hub b { font-size: .62rem; padding: .15rem .35rem; border-radius: 6px; }
  .hub time { margin-left: .1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hub i, .hub i::after { animation: none; }
}
/* typewriter */
.tw-w { white-space: nowrap; }
.tw .tw-c { opacity: 0; }
.tw-ghost .tw-c { opacity: .035; }
.tw .tw-c.tw-on { opacity: 1; }
.tw .tw-cur, .tw .tw-end { position: relative; }
.tw .tw-cur::after, .tw .tw-end::after { content: ""; position: absolute; left: 100%; top: .12em; bottom: .08em; width: 2px; margin-left: 2px; background: var(--champagne); }
.tw .tw-end::after { animation: caret 1s steps(1) 6 forwards; }
@keyframes caret { 50% { opacity: 0; } 100% { opacity: 0; } }