/* TAlexandria — shared styles.
   Look: dark first (light on the toggle), the "Pharos" palette: a lighthouse cyan-to-ice
   accent, a lighthouse beam sweeping across the top of each page, glass surfaces, motion on
   scroll. Kept calm on purpose (2026-10-31): quiet section labels, one moving light per page,
   a ruled FAQ, and the name set large at the foot of the page. Sections change
   ground to give the page a rhythm: an inverted band (.invert, How it works), a cyan-lit band
   (.band.lit, Pricing, with halftone dots on the featured plan) and one solid cyan block (the
   closing call to action). Keep it to one solid block. Chart colour always
   means something: gold = equilibrium and W warnings, verdigris = rebound, vermilion =
   correction, cyan = ECP equity; everything else is ink. Outside the charts, the lamp (--lamp,
   a warm apricot) paints small details only. plates.js reads --plate-bg, --ink,
   --ink-2, --ink-3, --candle, --rule, --rule-soft, --cyan, --gold, --verdigris and
   --vermilion, so those stay hex. Two ad-test palettes (Harbour, Lapis & Gold) override these
   tokens at the end of the file. */

:root {
  --bg: #05070c;
  --bg-2: #080b13;
  --card: #0c101a;
  --card-2: #111624;
  --plate-bg: #090d15;
  --ink: #eef1f8;
  --ink-2: #a9b1c4;
  --ink-3: #7c859d;
  --candle: #b6bdcd;
  --rule: #1e2535;
  --rule-soft: #141a27;
  --cyan: #3cc8ff;
  --ice: #a8f0ff;
  --cyan-deep: #22b8f5;
  --ice-deep: #7fe0ff;
  --on-accent: #03121b;
  --beam: #ffffff;
  /* The lamp: a warm apricot, the lighthouse's flame beside the cyan beam (2026-10-31). Small
     details only (section numbers, dots, ticks, markers), never text, buttons or charts. */
  --lamp: #ffb894;
  --gold: #f4b740;
  --verdigris: #2fd9a2;
  --vermilion: #ff5f7a;
  /* The chart colours set as small text (W/R/C letters, trade logs, chart labels): the same as
     above in dark, darker on light grounds so they read at 4.5:1 there (2026-11-03). Chart
     lines, fills and markers keep the bright tokens. */
  --gold-text: #f4b740;
  --verdigris-text: #2fd9a2;
  --vermilion-text: #ff5f7a;
  --fill: rgba(255, 255, 255, .035);
  --fill-2: rgba(255, 255, 255, .065);
  --edge: rgba(255, 255, 255, .075);
  --edge-hi: rgba(255, 255, 255, .14);
  --glass: rgba(12, 16, 26, .66);
  --grid-line: rgba(255, 255, 255, .045);
  --shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 30px 70px -30px rgba(0, 0, 0, .9);
  --glow-a: .5;
  --grain-a: .8;

  /* --accent paints text and lines; --accent-fill sits behind --on-accent text. */
  --accent: linear-gradient(120deg, var(--cyan) 0%, var(--ice) 100%);
  --accent-fill: linear-gradient(120deg, var(--cyan-deep) 0%, var(--ice-deep) 100%);
  --font-body: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-body);
  --font-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);

  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 32px);
  --radius: 14px;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f6f7fb;
  --bg-2: #eef0f7;
  --card: #ffffff;
  --card-2: #ffffff;
  --plate-bg: #ffffff;
  --ink: #0b1020;
  --ink-2: #464f68;
  --ink-3: #5d6680;
  --candle: #262d40;
  --rule: #dce1eb;
  --rule-soft: #eceff5;
  --cyan: #0272b0;
  --ice: #0891b2;
  --beam: #075985;
  --lamp: #96421a;
  --gold: #b57905;
  --verdigris: #08976a;
  --vermilion: #e0354f;
  --gold-text: #8a5a00;
  --verdigris-text: #05704f;
  --vermilion-text: #b8233b;
  --fill: rgba(11, 16, 32, .03);
  --fill-2: rgba(11, 16, 32, .055);
  --edge: rgba(11, 16, 32, .08);
  --edge-hi: rgba(11, 16, 32, .15);
  --glass: rgba(255, 255, 255, .72);
  --grid-line: rgba(11, 16, 32, .055);
  --shadow: 0 1px 2px rgba(11, 16, 32, .05), 0 24px 60px -30px rgba(11, 16, 32, .3);
  --glow-a: .26;
  --grain-a: .6;
  color-scheme: light;
}

/* An inverted band takes the other theme's ground and ink, so one section reads like a page
   from the guide: paper in dark mode, midnight in light mode. Keep these values in step with
   the two theme blocks above. Text colour must be set again on the band (`.invert` below):
   body's `color: var(--ink)` was resolved at body, so changing --ink here doesn't reach it. */
:root:not([data-theme="light"]) .invert {
  --bg: #f6f7fb; --bg-2: #eef0f7; --card: #ffffff; --card-2: #ffffff; --plate-bg: #ffffff;
  --ink: #0b1020; --ink-2: #464f68; --ink-3: #5d6680; --candle: #262d40;
  --rule: #dce1eb; --rule-soft: #eceff5; --cyan: #0272b0; --ice: #0891b2; --beam: #075985;
  --lamp: #96421a; --gold: #b57905; --verdigris: #08976a; --vermilion: #e0354f;
  --gold-text: #8a5a00; --verdigris-text: #05704f; --vermilion-text: #b8233b;
  --fill: rgba(11, 16, 32, .03); --fill-2: rgba(11, 16, 32, .055);
  --edge: rgba(11, 16, 32, .08); --edge-hi: rgba(11, 16, 32, .15);
  --glass: rgba(255, 255, 255, .72); --grid-line: rgba(11, 16, 32, .055);
  --shadow: 0 1px 2px rgba(11, 16, 32, .05), 0 24px 60px -30px rgba(11, 16, 32, .3);
  color-scheme: light;
}
:root[data-theme="light"] .invert {
  --bg: #05070c; --bg-2: #080b13; --card: #0c101a; --card-2: #111624; --plate-bg: #090d15;
  --ink: #eef1f8; --ink-2: #a9b1c4; --ink-3: #7c859d; --candle: #b6bdcd;
  --rule: #1e2535; --rule-soft: #141a27; --cyan: #3cc8ff; --ice: #a8f0ff; --beam: #ffffff;
  --lamp: #ffb894; --gold: #f4b740; --verdigris: #2fd9a2; --vermilion: #ff5f7a;
  --gold-text: #f4b740; --verdigris-text: #2fd9a2; --vermilion-text: #ff5f7a;
  --fill: rgba(255, 255, 255, .035); --fill-2: rgba(255, 255, 255, .065);
  --edge: rgba(255, 255, 255, .075); --edge-hi: rgba(255, 255, 255, .14);
  --glass: rgba(12, 16, 26, .66); --grid-line: rgba(255, 255, 255, .045);
  --shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 30px 70px -30px rgba(0, 0, 0, .9);
  color-scheme: dark;
}
.invert { background: var(--bg-2); color: var(--ink); }

/* ── Base ─────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  position: relative;
  background: var(--bg);
  color: var(--ink);
  font: 400 16.5px/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/* Page-top backdrop behind the header and hero: the lighthouse. A lamp glows above the page and
   its beam sweeps slowly across the hero, our one signature image (2026-10-31; it replaced a
   grid and an aurora that every software site has). The beam turns by animating the conic
   gradient's angle inside a full-width box: anything wider (or a transform) would widen the
   page on phones, which then zoom out to fit it. Reduced motion leaves it pointing straight down. */
@property --sweep { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
body::before, body::after { content: ""; position: absolute; top: 0; left: 0; right: 0; pointer-events: none; z-index: -1; }
body::before {
  height: 560px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--cyan) 55%, transparent), transparent) 50% -170px / min(1000px, 100%) 520px no-repeat;
  opacity: var(--glow-a);
}
body::after {
  height: 1150px;
  background: conic-gradient(from calc(166deg + var(--sweep)) at 50% -12%,
    transparent 0deg,
    color-mix(in srgb, var(--cyan) 26%, transparent) 9deg,
    color-mix(in srgb, var(--ice) 52%, transparent) 14deg,
    color-mix(in srgb, var(--cyan) 26%, transparent) 19deg,
    transparent 28deg);
  -webkit-mask-image: radial-gradient(ellipse 85% 100% at 50% 0%, #000 18%, transparent 78%);
  mask-image: radial-gradient(ellipse 85% 100% at 50% 0%, #000 18%, transparent 78%);
  opacity: var(--glow-a);
  animation: sweep 18s ease-in-out infinite alternate;
}
@keyframes sweep { from { --sweep: -34deg; } to { --sweep: 34deg; } }
/* What the beam lights: site.js draws candles on this canvas, lit only where the beam above passes.
   It covers the beam's box (keep the two heights equal) and is never wider than the page. */
.beam-lit { position: absolute; top: 0; left: 0; width: 100%; height: 1150px; pointer-events: none; z-index: -1; }
/* Film grain over the backdrop (revision 23): a still tile of grey noise that breaks the beam's
   and the glow's gradients into texture instead of flat steps, and gives the page ground a
   printed feel. Behind the content, so text, cards and charts stay crisp. Fixed to the screen
   and never wider than it; still, so it needs no reduced-motion branch. Overlay keeps the
   ground's colour: grey noise only lightens and darkens around it. */
html::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 180px 180px;
  mix-blend-mode: overlay; opacity: var(--grain-a);
}

img, svg { display: block; max-width: 100%; }
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
::selection { background: color-mix(in srgb, var(--cyan) 35%, transparent); color: var(--ink); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin: 0 0 .5em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6.4vw, 5.2rem); letter-spacing: -0.045em; }
h2 { font-size: clamp(2rem, 4.2vw, 3.3rem); }
h3 { font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.25; }
/* The emphasised words: a serif italic, painted cyan to ice. Only the page's main title (h1) has
   the beam of light sweeping across it; elsewhere it holds still, so the page stays calm. */
h1 em, h2 em, .gallery-head h3 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1em;
  letter-spacing: -0.01em;
  /* Gradient text only paints inside the element's box, and this italic reaches outside it: the
     g's tail below, the slant of an opening s or P to the left. The padding widens the painted
     area and the negative margin gives the space back, so nothing moves (docs/LEARNINGS.md). */
  padding: .1em .08em .24em .14em;
  margin: -.1em 0 -.24em -.14em;
  background: linear-gradient(100deg, var(--cyan), var(--ice) 30%, var(--beam) 50%, var(--ice) 70%, var(--cyan)) 0 0 / 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
h1 em { animation: sheen 12s linear infinite; }
@keyframes sheen { to { background-position: 200% 0; } }
p { margin: 0 0 1em; text-wrap: pretty; }
.lede { font-size: clamp(1.08rem, 1.5vw, 1.25rem); line-height: 1.6; color: var(--ink-2); max-width: 40em; }
.muted { color: var(--ink-3); }
.mono { font-family: var(--font-mono); }
.cyan { color: var(--cyan); }
.nw { white-space: nowrap; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* Section labels: quiet type with a short rule, "01 —— Explore". No pill, no filled badge. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 1.4rem;
  font: 500 .72rem/1 var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow .num { display: inline-flex; align-items: center; gap: 12px; color: var(--lamp); }
.eyebrow .num::after { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .55; }
/* A still dot: it pulsed until 2026-11-03, when a design review found it simulated liveness. */
.eyebrow.live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--verdigris);
}

.skip { position: absolute; left: -999px; top: 8px; background: var(--card); padding: 8px 12px; z-index: 100; border-radius: 8px; }
.skip:focus { left: 8px; }

/* ── Buttons ──────────────────────────────────────────────────────────── */

.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 1.35em;
  border-radius: 12px; border: 1px solid transparent;
  font: 500 .97rem/1 var(--font-body); letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s, border-color .2s, color .2s;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(0) scale(.98); }
.btn-primary {
  background: var(--accent-fill); color: var(--on-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 30px -10px color-mix(in srgb, var(--cyan) 85%, transparent);
}
.btn-primary:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 16px 42px -12px color-mix(in srgb, var(--cyan) 100%, transparent);
}
/* A light sweep across the primary button on hover. */
.btn-primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .32) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .8s var(--ease);
}
.btn-primary:hover::after { transform: translateX(120%); }
.btn-ghost { background: var(--fill); border-color: var(--edge-hi); color: var(--ink); }
.btn-ghost:hover { background: var(--fill-2); border-color: color-mix(in srgb, var(--ink) 28%, transparent); }
.btn-sm { min-height: 38px; padding: 0 1em; font-size: .9rem; border-radius: 10px; }
.btn .arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* ── Header: a floating glass bar ─────────────────────────────────────── */

.site-header { position: sticky; top: 0; z-index: 40; padding: 12px var(--gutter) 0; }
.site-header .wrap {
  display: flex; align-items: center; gap: 20px; height: 60px;
  padding: 0 10px 0 14px;
  border-radius: 16px; border: 1px solid var(--edge);
  /* Near-solid, not --glass: it scrolls over the inverted band, where thin glass turns grey. */
  background: color-mix(in srgb, var(--bg) 88%, transparent); box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  transition: background-color .3s, border-color .3s, box-shadow .3s;
}
.js .site-header:not(.scrolled) .wrap {
  background: transparent; border-color: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand svg {
  width: 34px; height: 34px; padding: 6px; border-radius: 10px;
  color: var(--on-accent); background: var(--accent-fill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 6px 18px -6px color-mix(in srgb, var(--cyan) 85%, transparent);
}
.wordmark { font: 600 1.14rem/1 var(--font-display); letter-spacing: -0.03em; }
.wordmark b {
  /* The tight letter-spacing ends the box before the A's right foot; the padding paints it. */
  padding-right: .06em; margin-right: -.06em;
  font-weight: 700;
  background: var(--accent); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* The menus (2026-11-03): Indicators and Reading Room each open a panel of links under the bar,
   in columns with a small heading, an icon tile, a name and one line each, like a store's product
   menu. The markup is written into every page by tools/sync_nav.py; site.js opens and closes it.
   Panels are solid, not glass, for the reason given under the phone menu below. */
.site-header .wrap { position: relative; }
.nav { display: flex; align-items: center; gap: 2px; margin-left: 14px; }
.nav-trigger, .nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border: 0; border-radius: 10px; background: none;
  color: var(--ink-2); font: inherit; font-size: .93rem; line-height: 1.4; cursor: pointer; text-decoration: none;
  transition: color .2s, background-color .2s, box-shadow .2s;
}
.nav-trigger:hover, .nav-link:hover, .nav-item.open > .nav-trigger { color: var(--ink); background: var(--fill-2); text-decoration: none; }
/* The section the page belongs to keeps its tab's cyan underline. */
.nav-item.current > .nav-trigger { color: var(--ink); box-shadow: inset 0 -2px 0 var(--cyan); }
.chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .7; transition: transform .25s var(--ease); }
.nav-item.open > .nav-trigger .chev { transform: rotate(180deg); }
.nav-cta { display: none; }

.mega {
  position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 2; display: none;
  border-radius: 20px; border: 1px solid var(--edge-hi); background: var(--card);
  box-shadow: 0 40px 90px -36px rgba(0, 0, 0, .75), var(--shadow); text-align: left;
}
/* An invisible bridge over the gap, so the pointer can cross from the tab to the panel. */
.mega::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 12px; }
.nav-item.open > .mega { display: block; animation: mega-in .22s var(--ease) both; }
@keyframes mega-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.mega-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 28px; padding: 26px 26px 22px; }
.mega-head {
  display: flex; align-items: center; gap: 9px; margin: 0 0 10px; padding: 0 10px 10px; border-bottom: 1px solid var(--rule);
  font: 500 .7rem/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
/* "Coming soon" keeps the old tab's lamp dot, still. */
.mega-col.soon .mega-head::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lamp);
}
.mega-col ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
/* Indicators' middle column: Kata, free on TradingView, over Coming soon. */
.mega-stack { display: grid; align-content: start; gap: 18px; }
.mega-link, .mega-band {
  display: flex; align-items: center; gap: 14px; padding: 9px 10px; border-radius: 12px;
  color: var(--ink); text-decoration: none; transition: background-color .2s;
}
.mega-link:hover, .mega-link[aria-current], .mega-band:hover { background: var(--fill-2); text-decoration: none; }
.mega-ico {
  flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px;
  border: 1px solid var(--edge); background: var(--fill-2); color: var(--ink-2);
  transition: color .2s, border-color .2s;
}
.mega-ico svg { width: 20px; height: 20px; }
.mega-link:hover .mega-ico, .mega-link[aria-current] .mega-ico, .mega-band:hover .mega-ico {
  color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 40%, transparent);
}
.mega-txt { min-width: 0; }
.mega-txt b { display: block; font-weight: 500; font-size: .95rem; line-height: 1.3; letter-spacing: -0.01em; }
.mega-txt small { display: block; margin-top: 2px; font-size: .84rem; line-height: 1.35; color: var(--ink-3); }
/* Indicators' third column: Volume I on a TradingView chart. */
.mega-feature {
  display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 14px; border-radius: 16px;
  border: 1px solid var(--edge); background: var(--bg-2); color: var(--ink); text-decoration: none;
  transition: border-color .2s, transform .2s var(--ease);
}
.mega-feature:hover { text-decoration: none; border-color: color-mix(in srgb, var(--cyan) 45%, transparent); transform: translateY(-2px); }
.mega-feature img { width: 100%; height: auto; margin-bottom: 6px; border-radius: 9px; border: 1px solid var(--rule-soft); }
.mega-feature-tag { font: 500 .7rem/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.mega-feature b { font-weight: 500; font-size: .95rem; line-height: 1.35; letter-spacing: -0.01em; }
.mega-feature-go { margin-top: 2px; font-size: .86rem; color: var(--cyan); white-space: nowrap; }
.mega-feature-go .arrow { display: inline-block; transition: transform .2s var(--ease); }
:is(.mega-feature, .mega-band):hover .arrow { transform: translateX(3px); }
/* Reading Room's band along the panel's foot: the whole room, free. */
.mega-band { gap: 14px; margin: 0; padding: 14px 36px; border-radius: 0 0 19px 19px; border-top: 1px solid var(--rule-soft); background: var(--bg-2); }
.mega-band .mega-txt { flex: 1; }
.mega-band:hover { background: color-mix(in srgb, var(--bg-2) 70%, var(--fill-2)); }
/* Dims the page under an open panel; a click on it closes the panel (site.js). */
.site-header.menu-open::after {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--bg) 52%, transparent);
  animation: fadein .25s var(--ease) both;
}
.js .site-header.menu-open .wrap {
  background: color-mix(in srgb, var(--bg) 92%, transparent); border-color: var(--edge); box-shadow: var(--shadow);
}
.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.icon-btn {
  display: inline-grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid var(--edge-hi); border-radius: 10px;
  background: var(--fill); color: var(--ink-2); cursor: pointer;
  transition: color .2s, background-color .2s;
}
.icon-btn:hover { color: var(--ink); background: var(--fill-2); }
.icon-btn svg { width: 18px; height: 18px; }
.theme-toggle .sun { display: none; }
:root[data-theme="light"] .theme-toggle .sun { display: block; }
:root[data-theme="light"] .theme-toggle .moon { display: none; }
.menu-toggle { display: none; }

/* Between 900 and 1100 px the panels drop their descriptions' second column of room. */
@media (max-width: 1100px) {
  .mega-cols { gap: 8px 16px; padding: 20px 18px 18px; }
  .mega-band { padding-inline: 28px; }
}
/* Phones and tablets: the menu button opens the nav as a card under the bar, and each menu folds
   open inside it, one link a line. Get ECP moves into it from the bar. */
@media (max-width: 900px) {
  .nav {
    display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: 2px; padding: 8px;
    max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain;
    /* Solid, not glass: inside the header's own backdrop-filter a second blur can't reach the
       page, so a translucent menu showed the content through it. */
    background: var(--card); border: 1px solid var(--edge); border-radius: 16px; box-shadow: var(--shadow);
  }
  .nav.open { display: flex; }
  .nav-trigger, .nav-link { width: 100%; justify-content: space-between; padding: 12px 14px; font-size: 1rem; }
  .nav-item.current > .nav-trigger { box-shadow: inset 2px 0 0 var(--cyan); }
  .mega { position: static; border: 0; border-radius: 0; background: none; box-shadow: none; animation: none; }
  .nav-item.open > .mega { animation: none; }
  .mega::before { display: none; }
  .mega-cols { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 2px 0 10px; }
  .mega-stack { gap: 6px; }
  .mega-head { margin: 8px 0 2px; padding: 0 14px 6px; border-bottom: 0; }
  .mega-link { padding: 8px 14px; }
  .mega-ico { width: 34px; height: 34px; border-radius: 10px; }
  .mega-ico svg { width: 18px; height: 18px; }
  .mega-feature { display: none; }
  .mega-band { margin: 0 6px 8px; padding: 10px 8px; border: 1px solid var(--edge); border-radius: 12px; }
  .mega-band .mega-feature-go { display: none; }
  .nav-cta { display: inline-flex; margin: 8px 6px 4px; }
  .menu-toggle { display: inline-grid; }
  .header-actions .btn { display: none; }
  .site-header.menu-open::after { display: none; }
}
@media (max-width: 480px) { .mega-txt small { display: none; } }

/* The bar under the header on ECP's pages and the Reading Room's: the section's own pages. */
.subnav { padding-top: 18px; }
.subnav-bar {
  display: flex; align-items: center; gap: 2px; width: fit-content; max-width: 100%; margin: 0 auto; padding: 4px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--edge); border-radius: 12px; background: color-mix(in srgb, var(--bg) 60%, transparent);
}
.subnav-bar::-webkit-scrollbar { display: none; }
.subnav-bar a, .subnav-label {
  flex: 0 0 auto; padding: 7px 12px; border-radius: 8px; white-space: nowrap; text-decoration: none;
  color: var(--ink-2); font-size: .88rem; line-height: 1.3; transition: color .2s, background-color .2s;
}
.subnav-bar a:hover { color: var(--ink); text-decoration: none; }
.subnav-bar a[aria-current] { color: var(--ink); background: var(--fill-2); box-shadow: inset 0 -2px 0 var(--cyan); }
.subnav-bar .subnav-label {
  margin-right: 2px; padding-right: 14px; border-radius: 8px 0 0 8px; box-shadow: inset -1px 0 0 var(--edge);
  font: 500 .7rem/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.subnav-bar a.subnav-label[aria-current] { background: none; color: var(--ink); box-shadow: inset -1px 0 0 var(--edge); }
.subnav + .hero { padding-top: clamp(36px, 6vw, 80px); }

/* ── Sections ─────────────────────────────────────────────────────────── */

section { position: relative; padding: clamp(72px, 10vw, 136px) 0; }
.section-head { max-width: 760px; margin: 0 auto clamp(36px, 5vw, 60px); text-align: center; }
.section-head p { max-width: 680px; margin-inline: auto; color: var(--ink-2); font-size: 1.07rem; }
.band { background: linear-gradient(180deg, var(--bg-2), var(--bg)); border-top: 1px solid var(--rule-soft); }
/* A band lit from above in cyan (Pricing). */
.band.lit {
  border-top-color: transparent;
  background:
    radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--cyan) 20%, transparent), transparent 70%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
}
.double-rule { border: 0; height: 1px; margin: 0; background: linear-gradient(90deg, transparent, var(--rule), transparent); }

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero { padding-top: clamp(48px, 8vw, 104px); padding-bottom: clamp(40px, 6vw, 80px); }
.hero .lede { margin-bottom: 2rem; }
.hero.center { text-align: center; }
.hero.center .hero-title, .hero.center .lede { margin-inline: auto; }
.hero-title { max-width: 18ch; font-size: clamp(2.7rem, 6.8vw, 5.6rem); }
.hero-title em { display: block; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 2rem; }
.hero.center .hero-actions, .hero.center .facts { justify-content: center; }
/* The key facts: one quiet line of text, each with a small dot, not a row of pills. */
.facts {
  display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 0; margin: 0; list-style: none;
  font: 500 .8rem/1.4 var(--font-mono); color: var(--ink-2);
}
.facts li { display: inline-flex; align-items: center; gap: 9px; }
.facts li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--lamp); }

/* The hero chart: lit from behind, tilted back at the top of the page and laid flat as you
   scroll (site.js sets --tilt from 1 to 0) or reach for it. */
.hero-stage { position: relative; margin-top: clamp(48px, 7vw, 84px); perspective: 2000px; }
.hero-stage::before {
  content: ""; position: absolute; inset: 6% 4% -2%; z-index: -1; border-radius: 48px;
  background: var(--accent); filter: blur(80px); opacity: calc(var(--glow-a) * .75);
}
.hero-stage .plate {
  transform-origin: 50% 0;
  transform: rotateX(calc(var(--tilt, 0) * 16deg)) scale(calc(1 - var(--tilt, 0) * .05));
  transition: transform .5s var(--ease);
}
.hero-stage:hover .plate { transform: none; }
.hero-note { margin: 18px auto 0; max-width: 64ch; font-size: .93rem; color: var(--ink-3); }
/* The tested win rate: the hero's proof line, linked to the method. */
.hero-proof { max-width: 46em; margin: -0.6rem 0 1.8rem; font-size: .95rem; color: var(--ink-2); text-wrap: balance; }
.hero.center .hero-proof { margin-inline: auto; }
.hero-proof > b {
  font: 700 1.15em/1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  background: var(--accent); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-proof a { white-space: nowrap; }
.hero-proof .arrow { display: inline-block; transition: transform .2s var(--ease); }
.hero-proof a:hover .arrow { transform: translateX(3px); }
.stat a { color: var(--cyan); white-space: nowrap; }
.hero-note b { color: var(--ink); font-variant-numeric: tabular-nums; }
.hero-note .cyan { color: var(--cyan); }

/* ── Results ticker ───────────────────────────────────────────────────── */

.ticker {
  position: relative; overflow: hidden;
  border-block: 1px solid var(--rule-soft);
  background: color-mix(in srgb, var(--bg-2) 70%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker:empty { display: none; }
.ticker-track { display: flex; width: max-content; animation: marquee 50s linear infinite; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
.ticker-set { display: flex; }
.ticker-item {
  display: inline-flex; align-items: center; gap: 10px; padding: 16px 30px;
  border: 0; border-right: 1px solid var(--rule-soft); background: none;
  color: var(--ink-2); font: 500 .84rem/1 var(--font-mono); white-space: nowrap; cursor: pointer;
  transition: background-color .2s;
}
.ticker-item:hover { background: var(--fill-2); }
.ticker-item b { color: var(--ink); font-weight: 600; }
.ticker-item .cyan { color: var(--cyan); font-weight: 600; }
.ticker-item .t-vs { color: var(--ink-3); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── Proof-point stats ────────────────────────────────────────────────── */

.stats-band { padding: clamp(40px, 6vw, 72px) 0; background: none; border: 0; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stat { padding: 24px 22px; border-radius: 18px; background: var(--fill); border: 1px solid var(--edge); }
.stat > b {
  display: block; margin-bottom: 10px;
  font: 600 clamp(2rem, 3.4vw, 2.75rem)/1 var(--font-display); letter-spacing: -0.045em;
  background: var(--accent); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat > span { display: block; font-size: .92rem; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .stats { grid-template-columns: 1fr; } }

/* Cursor spotlight on tiles (site.js sets --mx/--my). */
.card, .price, .stat, .features li, .limits li { position: relative; overflow: hidden; }
.card::after, .price::after, .stat::after, .features li::after, .limits li::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -40%), color-mix(in srgb, var(--cyan) 16%, transparent), transparent 60%);
  opacity: 0; transition: opacity .35s;
}
.card:hover::after, .price:hover::after, .stat:hover::after,
.features li:hover::after, .limits li:hover::after { opacity: 1; }

/* ── Fine print and second gallery heads ────────────────────────────── */

.fineprint { margin-top: 28px; font-size: .8rem; line-height: 1.6; color: var(--ink-3); max-width: 80ch; }
/* A second gallery inside a section (the bad years). */
.gallery-head { max-width: 720px; margin: clamp(64px, 9vw, 112px) auto 28px; text-align: center; }
.gallery-head h3 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); letter-spacing: -0.03em; line-height: 1.1; }
.gallery-head p { color: var(--ink-2); }
.doc-body .gallery-head { margin: 64px 0 24px; text-align: left; }

/* ── Plates (charts) ──────────────────────────────────────────────────── */

.plate {
  position: relative; margin: 0; padding: 8px; text-align: left;
  border-radius: 20px; border: 1px solid var(--edge-hi);
  background: linear-gradient(180deg, var(--card-2), var(--card));
  box-shadow: var(--shadow);
}
/* A lit top edge. */
.plate::before {
  content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cyan) 70%, transparent), transparent 35%);
  -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, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.plate-inner { position: relative; overflow: hidden; border-radius: 13px; border: 1px solid var(--rule-soft); background: var(--plate-bg); }
/* First render wipes the chart in from the left once it is on screen; a tab switch fades. */
.js .plate:not(.seen) .plate-inner.draw { clip-path: inset(0 100% 0 0); }
.plate.seen .plate-inner.draw { animation: wipe 1.2s cubic-bezier(.65, 0, .35, 1) both; }
.plate-inner.fade { animation: fadein .45s var(--ease) both; }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* The chart is a TradingView snapshot; its attribution sits inside the image, so never crop it. */
.plate-shot { display: block; width: 100%; height: auto; }
.plate-loading { display: grid; place-items: center; min-height: 240px; font: .85rem var(--font-mono); color: var(--ink-3); }

.plate-caption {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
  padding: 12px 8px 4px; font-size: .88rem; color: var(--ink-3);
}
.plate-caption .plate-no { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 500 .92rem/1.4 var(--font-body); color: var(--ink); }
.plate-key { display: flex; flex-wrap: wrap; gap: 4px 14px; font: .76rem/1.4 var(--font-mono); }
.plate-key span { display: inline-flex; align-items: center; gap: 6px; }
.plate-key .eq { color: var(--gold-text); }
.swatch { display: inline-block; width: 14px; height: 3px; border-radius: 2px; background: currentColor; }
.swatch.tri-up { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid var(--verdigris); background: none; }
.swatch.tri-dn { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid var(--vermilion); background: none; }
.swatch.block { width: 12px; height: 10px; border-radius: 2px; background: color-mix(in srgb, var(--verdigris) 24%, transparent); }
.swatch.dashed { height: 0; background: none; border-top: 2px dashed var(--ink-3); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.dot.up { background: var(--verdigris); }
.dot.dn { background: var(--vermilion); }
.dot.w { background: var(--gold); }
.tf-chip {
  display: inline-block; vertical-align: middle;
  padding: 4px 6px; border-radius: 6px; border: 1px solid var(--edge-hi);
  background: var(--fill-2); color: var(--ink-2);
  font: 600 .7rem/1 var(--font-mono); letter-spacing: .06em;
}

/* Scoreboard under each plate: ECP vs buy-and-hold */
.scoreboard { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-bottom: 22px; }
.score {
  display: flex; flex-direction: column; justify-content: space-between; min-width: 112px;
  padding: 14px 18px; border-radius: 14px; border: 1px solid var(--edge); background: var(--fill);
}
.score span { display: block; margin-bottom: 10px; font: 500 .7rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.score b { font: 600 2rem/1 var(--font-display); letter-spacing: -0.04em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.score.ours {
  border-color: color-mix(in srgb, var(--cyan) 45%, transparent);
  background: color-mix(in srgb, var(--cyan) 10%, transparent);
  box-shadow: 0 12px 40px -18px color-mix(in srgb, var(--cyan) 90%, transparent);
}
.score.ours span { color: var(--cyan); }
.score.ours b { font-size: 2.6rem; background: var(--accent); -webkit-background-clip: text; background-clip: text; color: transparent; }
.score.small b { font: 600 1.3rem/1 var(--font-mono); color: var(--ink); }

/* Gallery tabs */
.tabs {
  position: relative; display: flex; gap: 8px; overflow-x: auto;
  padding: 2px 2px 8px; margin-bottom: 18px;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.tab {
  position: relative; flex: 0 0 auto; display: grid; gap: 4px; min-width: 140px;
  padding: 12px 14px; text-align: left;
  border-radius: 14px; border: 1px solid var(--edge); background: var(--fill);
  color: var(--ink-2); font: inherit; cursor: pointer;
  transition: transform .2s var(--ease), border-color .2s, background-color .2s, box-shadow .2s;
}
.tab:hover { transform: translateY(-2px); border-color: var(--edge-hi); background: var(--fill-2); }
.tab[aria-selected="true"] {
  border-color: color-mix(in srgb, var(--cyan) 55%, transparent);
  background: color-mix(in srgb, var(--cyan) 12%, var(--card));
  box-shadow: 0 12px 34px -16px color-mix(in srgb, var(--cyan) 90%, transparent);
}
.tab .t-sym { display: inline-flex; align-items: center; gap: 8px; font: 600 .95rem/1.2 var(--font-mono); color: var(--ink); }
.tab .t-meta { font-size: .78rem; color: var(--ink-3); }
.tab .t-count { font: 600 .76rem var(--font-mono); color: var(--cyan); }
.tab .t-vs { color: var(--ink-3); font-weight: 400; }
@media (min-width: 761px) {
  .tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; padding-bottom: 0; }
  .tab { min-width: 0; }
}
@media (max-width: 760px) {
  .tab:hover { transform: none; }
  .tab[aria-selected="true"] { box-shadow: none; }   /* the scrolling strip would clip it */
}

.plate-notes { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: 28px; max-width: 820px; }
.plate-notes.with-log { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); max-width: none; }
.plate-notes h3 { font-size: 1.4rem; margin-bottom: .4em; }
.plate-notes p { color: var(--ink-2); }
.ledger-title { margin: 6px 0 12px; font: 500 .72rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.ledger {
  width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden;
  border: 1px solid var(--edge); border-radius: 14px; background: var(--fill);
  font: .86rem/1.4 var(--font-mono); font-variant-numeric: tabular-nums;
}
.ledger th {
  padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--edge);
  font-weight: 500; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.ledger td { padding: 11px 14px; border-bottom: 1px solid var(--edge); color: var(--ink); }
.ledger tr:last-child td { border-bottom: 0; }
.ledger td:last-child, .ledger th:last-child { text-align: right; }
.ledger .m-up { color: var(--verdigris-text); font-weight: 600; }
.ledger .m-dn { color: var(--vermilion-text); font-weight: 600; }
.ledger .neg { color: var(--vermilion-text); }
.ledger .pos { color: var(--verdigris-text); }
.ledger-note { margin-top: 10px; font-size: .8rem; color: var(--ink-3); }

@media (max-width: 760px) {
  .plate { padding: 6px; border-radius: 16px; }
  .plate-inner { border-radius: 11px; }
  .plate-notes, .plate-notes.with-log { grid-template-columns: minmax(0, 1fr); }
  .score.ours b { font-size: 2.2rem; }
  .score b { font-size: 1.7rem; }
}

/* ── Benefit cards ────────────────────────────────────────────────────── */

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card {
  padding: 28px 28px 30px; border-radius: 22px; border: 1px solid var(--edge);
  background: linear-gradient(180deg, var(--card-2), var(--card));
  transition: transform .35s var(--ease), border-color .35s;
}
.card:hover { transform: translateY(-4px); border-color: var(--edge-hi); }
.card .call { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.card .call b {
  padding: 6px 10px; border-radius: 999px; border: 1px solid var(--edge-hi);
  font: 500 .7rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
}
.card-icon {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
  color: var(--on-accent); background: var(--accent-fill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 28px -10px color-mix(in srgb, var(--cyan) 95%, transparent);
}
.card-icon svg { width: 24px; height: 24px; }
.card h3 { font-size: 1.3rem; margin-bottom: .5em; }
.card p { margin: 0; color: var(--ink-2); }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } }

/* ── Method ───────────────────────────────────────────────────────────── */

.method { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.diagram {
  margin: 0; padding: 20px; border-radius: 22px; border: 1px solid var(--edge-hi);
  background: var(--plate-bg); box-shadow: var(--shadow);
}
.diagram svg { width: 100%; height: auto; }
.diagram text { font-family: var(--font-mono); }
.diagram-cap { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule-soft); font-size: .86rem; color: var(--ink-3); }
/* The diagram draws itself when it scrolls into view: the stretch, then W, R and the hold. */
.js .diagram .d-path, .js .diagram .d-hold { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .diagram.drawn .d-path { animation: draw 1.8s var(--ease) .2s forwards; }
.js .diagram.drawn .d-hold { animation: draw 1.2s var(--ease) 1.6s forwards; }
.js .diagram .d-pop { opacity: 0; transform-box: fill-box; transform-origin: center; }
.js .diagram.drawn .d-pop { animation: pop .5s var(--ease) forwards; animation-delay: var(--at, 1s); }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
/* ECP's How-it-works diagram (.d-how) is the same drawing on ecp.html, ecp-guide.html and the
   home map; change the three copies together. Its labels are 14.5 px or more in a 560-wide
   drawing, so they show at 11 px or more wherever it is drawn 425 px wide or wider. Phones draw
   it narrower, so there it shows the drawing alone and the steps next to it carry the words;
   the home map, which draws it smaller still, always does (.atlas-hub). */
@media (max-width: 560px) { .d-how text, .d-how .d-lead { display: none; } }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { position: relative; padding: 2px 0 30px 68px; }
.steps li:last-child { padding-bottom: 0; }
.steps li::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
  font: 600 .86rem/1 var(--font-mono); color: var(--on-accent); background: var(--accent-fill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 26px -12px color-mix(in srgb, var(--cyan) 95%, transparent);
}
.steps li::after {
  content: ""; position: absolute; left: 22px; top: 54px; bottom: 8px; width: 2px; border-radius: 2px;
  background: linear-gradient(var(--cyan), transparent); opacity: .45;
}
.steps li:last-child::after { display: none; }
.steps.setup { margin-top: 32px; }
.steps h3 { font-size: 1.2rem; margin-bottom: .35em; }
.steps p { margin: 0; color: var(--ink-2); }
.steps code, .tag {
  padding: 2px 7px; border-radius: 6px; border: 1px solid var(--edge); background: var(--fill-2);
  font: 600 max(.8em, .7rem) var(--font-mono);
}
.tag.up { color: var(--verdigris-text); }
.tag.dn { color: var(--vermilion-text); }
.tag.eq { color: var(--gold-text); }
@media (max-width: 900px) { .method { grid-template-columns: 1fr; } }
/* ECP's How it works stacks from 1023 px down, not 900: in between, its diagram's column is
   under the 425 px its labels need. Stacked, it is 720 px wide at most, as in the guide. */
@media (max-width: 1023px) { .method-how { grid-template-columns: 1fr; max-width: 720px; margin-inline: auto; } }

/* ── Feature tiles and tips ───────────────────────────────────────────── */

.two-col { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }
.features, .limits { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.features li, .limits li {
  padding: 18px 18px 18px 54px; border-radius: 16px; border: 1px solid var(--edge); background: var(--fill);
  transition: border-color .3s, transform .3s var(--ease);
}
.features li:hover, .limits li:hover { border-color: var(--edge-hi); transform: translateY(-2px); }
.features li::before, .limits li::before {
  content: "✓"; position: absolute; left: 18px; top: 19px;
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px;
  font: 700 .72rem/1 var(--font-body); color: var(--on-accent); background: var(--accent-fill);
}
.features li > b, .limits li > strong { display: block; margin-bottom: 3px; font-weight: 600; color: var(--ink); }
.limits strong { font-size: 1.05rem; }
.features li > span, .limits li > span { display: block; color: var(--ink-2); font-size: .94rem; line-height: 1.55; }
@media (max-width: 600px) { .features { grid-template-columns: 1fr; } }

/* A menu path in TradingView, e.g. Indicators → Invite-only scripts. */
.path {
  padding: 2px 7px; border-radius: 6px; border: 1px solid var(--edge); background: var(--fill-2);
  font: .82rem var(--font-mono); color: var(--ink);
  /* It may wrap (each line keeps its chip): kept on one line, it widened the page on 320 px phones. */
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ── Pricing: one plan card, with the steps to the chart beside it ────── */

@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.plan {
  display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px);
  align-items: center; max-width: 1000px; margin-inline: auto;
}
.plan-steps h3 { font-size: clamp(1.4rem, 2.2vw, 1.7rem); }
.plan-steps > p { margin: 0 0 28px; color: var(--ink-2); }
.plan-steps .steps li { padding-bottom: 24px; }
.plan-steps .steps h4 { margin-bottom: .3em; font-size: 1.1rem; letter-spacing: -0.02em; }
@media (max-width: 900px) { .plan { grid-template-columns: minmax(0, 1fr); max-width: 520px; } }
.price {
  display: flex; flex-direction: column; padding: 32px 28px 28px;
  border-radius: 24px; border: 1px solid var(--edge);
  background: linear-gradient(180deg, var(--card-2), var(--card));
}
/* The featured plan: a cyan glow and halftone dots that fade out towards the price list. */
.price.featured {
  border-color: transparent;
  background:
    radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--cyan) 20%, transparent), transparent 70%),
    linear-gradient(180deg, transparent 5%, var(--card) 55%),
    radial-gradient(circle, color-mix(in srgb, var(--ice) 32%, transparent) 1.2px, transparent 1.9px) 0 0 / 14px 14px,
    linear-gradient(180deg, var(--card-2), var(--card));
  box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--cyan) 75%, transparent);
}
/* A cyan-ice-beam border on the featured plan. It held still from 2026-10-31: one moving
   light per page (the hero's) reads calmer than several. */
.price.featured::before {
  content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--angle), var(--cyan), var(--ice), var(--beam), var(--cyan));
  -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, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.badge {
  position: absolute; top: 24px; right: 24px;
  padding: 6px 10px; border-radius: 999px; background: var(--accent-fill); color: var(--on-accent);
  font: 600 .7rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
}
.price .tier { margin-bottom: 18px; font: 500 .72rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.price .amount { font: 600 3.3rem/1 var(--font-display); letter-spacing: -0.05em; color: var(--ink); }
.price .amount small { margin-left: 6px; font: 400 .95rem var(--font-body); letter-spacing: 0; color: var(--ink-3); }
.price .note { min-height: 1.5em; margin: 10px 0 24px; font-size: .88rem; color: var(--ink-3); }
.price ul { flex: 1; list-style: none; padding: 0; margin: 0 0 28px; }
.price li { position: relative; padding: 9px 0 9px 28px; border-top: 1px solid var(--edge); font-size: .95rem; color: var(--ink-2); }
.price li::before {
  content: ""; position: absolute; left: 3px; top: 16px; width: 10px; height: 5px;
  border-left: 2px solid var(--lamp); border-bottom: 2px solid var(--lamp); transform: rotate(-45deg);
}
.price .btn { width: 100%; }
/* On 320 px phones the card's padding left the button too narrow for its label. */
@media (max-width: 400px) { .price { padding: 28px 18px 18px; } }
.band.lit :is(.eyebrow, .price .tier, .price .note, .price .amount small, .pricing-foot) { color: var(--ink-2); }
.pricing-foot { max-width: 720px; margin: 32px auto 0; text-align: center; font-size: .86rem; color: var(--ink-3); }

/* ── About ────────────────────────────────────────────────────────────── */

.about { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.about .prose p { font-size: 1.1rem; color: var(--ink-2); }
.pull {
  margin-top: 28px; padding: 28px 28px 26px; border-radius: 22px; border: 1px solid var(--edge); background: var(--fill);
  font: italic 400 clamp(1.6rem, 2.8vw, 2.2rem)/1.25 var(--font-serif); color: var(--ink);
}
.pull cite { display: block; margin-top: 16px; font: normal 500 .72rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; } }

/* ── FAQ ──────────────────────────────────────────────────────────────── */

/* Questions as a ruled list, like a printed page: hairlines between them, no boxes. */
.faq { max-width: 840px; margin-inline: auto; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  position: relative; list-style: none; cursor: pointer; padding: 24px 56px 24px 0;
  font: 500 1.12rem/1.4 var(--font-body); letter-spacing: -0.015em; color: var(--ink);
  transition: color .2s;
}
.faq summary:hover { color: var(--cyan); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 0; top: 50%; width: 28px; height: 28px; margin-top: -14px;
  border-radius: 50%; border: 1px solid var(--edge-hi);
  background:
    linear-gradient(var(--ink-2), var(--ink-2)) center / 10px 1.5px no-repeat,
    linear-gradient(var(--ink-2), var(--ink-2)) center / 1.5px 10px no-repeat;
  transition: transform .3s var(--ease);
}
.faq details[open] summary::after {
  transform: rotate(45deg);
  border-color: color-mix(in srgb, var(--lamp) 60%, transparent);
  background:
    linear-gradient(var(--lamp), var(--lamp)) center / 10px 1.5px no-repeat,
    linear-gradient(var(--lamp), var(--lamp)) center / 1.5px 10px no-repeat;
}
.faq details > div { padding: 0 56px 26px 0; max-width: 72ch; color: var(--ink-2); }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size .35s var(--ease), content-visibility .35s allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
}

/* ── CTA + footer ─────────────────────────────────────────────────────── */

.cta-final { text-align: center; background: none; border: 0; }
/* The closing call to action is the page's one solid block of colour, so it stands apart from
   everything above it. Dark ink on cyan in both themes. */
.cta-final > .wrap {
  position: relative; overflow: hidden; isolation: isolate;
  width: calc(100% - 2 * var(--gutter));
  padding: clamp(56px, 8vw, 104px) var(--gutter);
  border-radius: 32px; border: 0;
  background: var(--accent-fill);
  color: var(--on-accent);
  --ink: var(--on-accent);
  --ink-2: color-mix(in srgb, var(--on-accent) 80%, transparent);
  --edge-hi: color-mix(in srgb, var(--on-accent) 22%, transparent);
  --glass: color-mix(in srgb, var(--on-accent) 8%, transparent);
  --grid-line: color-mix(in srgb, var(--on-accent) 10%, transparent);
  box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--cyan-deep) 80%, transparent);
}
.cta-final h2 em { background: none; color: var(--on-accent); animation: none; }
.cta-final .btn-primary { background: var(--on-accent); color: var(--ice-deep); }
.cta-final .eyebrow, .cta-final .eyebrow .num { color: var(--on-accent); }
.cta-final .eyebrow { opacity: .78; }
.cta-final .btn-primary { box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--on-accent) 80%, transparent); }
.cta-final .btn-primary:hover { box-shadow: 0 18px 40px -14px color-mix(in srgb, var(--on-accent) 95%, transparent); }
.cta-final > .wrap::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000, transparent 75%);
}
.cta-final h2 { max-width: 16ch; margin-inline: auto; }
.cta-final p { max-width: 46ch; margin: 0 auto 30px; color: var(--ink-2); }
.cta-final .hero-actions { justify-content: center; margin: 0; }

.site-footer { padding: 64px 0 40px; border-top: 1px solid var(--rule-soft); font-size: .9rem; color: var(--ink-3); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; margin-bottom: 40px; }
.footer-grid h4 { margin-bottom: 14px; font: 500 .72rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 8px; }
.footer-grid a { color: var(--ink-2); text-decoration: none; }
.footer-grid a:hover { color: var(--ink); }
.footer-grid .brand { color: var(--ink); }
.footer-tag { max-width: 30ch; margin-top: 14px; }
.legal { padding-top: 24px; border-top: 1px solid var(--rule-soft); font-size: .8rem; line-height: 1.6; }
.legal p { margin-bottom: .8em; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }
/* The name, set huge at the very bottom of every page and fading into the ground. It is sized
   to the viewport and the footer clips it, so it never widens the page. */
.site-footer { overflow: hidden; padding-bottom: 0; }
.footer-mark {
  margin: clamp(36px, 6vw, 72px) 0 -0.14em; text-align: center; white-space: nowrap;
  font: 600 clamp(48px, 18.5vw, 300px)/.9 var(--font-display); letter-spacing: -0.06em;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 16%, transparent) 15%, transparent 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-user-select: none; user-select: none;
}
.footer-mark b {
  padding-right: .1em; margin-right: -.1em;   /* the A's right foot, as in .wordmark b */
  font-weight: 700;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cyan) 42%, transparent) 15%, transparent 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── Volume page (ecp-guide.html) ─────────────────────────────────────── */

.volume-head { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.volume-head h1 { font-size: clamp(2.6rem, 5.6vw, 4.6rem); }
.catalogue-card {
  position: relative; padding: 24px 26px; border-radius: 22px; border: 1px solid var(--edge-hi);
  background: var(--glass); box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font: .86rem/1.5 var(--font-mono);
}
.catalogue-card::before {
  content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cyan) 70%, transparent), transparent 40%);
  -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, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.catalogue-card dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; margin: 0 0 22px; }
.catalogue-card dt { padding-top: 2px; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.catalogue-card dd { margin: 0; color: var(--ink); }
.catalogue-card .btn { width: 100%; font-family: var(--font-body); }
.catalogue-card .call {
  display: flex; justify-content: space-between; padding-bottom: 12px; margin-bottom: 16px;
  border-bottom: 1px solid var(--edge); font-size: .72rem; letter-spacing: .1em; color: var(--ink-3);
}
.catalogue-card .call b { font-weight: 600; background: var(--accent); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 880px) { .volume-head { grid-template-columns: 1fr; } }

.doc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.toc { position: sticky; top: 100px; font-size: .9rem; }
.toc h4 { margin-bottom: 14px; font: 500 .72rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
.toc a {
  display: block; margin-left: -1px; padding: 7px 0 7px 16px;
  border-left: 2px solid transparent; color: var(--ink-3); text-decoration: none;
  transition: color .2s, border-color .2s;
}
.toc a:hover { color: var(--ink); }
.toc a.active { color: var(--ink); border-left-color: var(--lamp); }
.doc-body > section { padding: 0 0 clamp(56px, 7vw, 88px); }
.doc-body h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.doc-body .plate + .plate-notes { margin-bottom: 64px; }
.doc-body .diagram { max-width: 720px; }
@media (max-width: 960px) { .doc { grid-template-columns: minmax(0, 1fr); } .toc { display: none; } }

/* Legal pages (terms, privacy, risk, legal notice): plain reading text in the guide's layout. */
.legal-head { max-width: 820px; }
.legal-date { margin-top: 18px; font: 500 .78rem/1 var(--font-mono); letter-spacing: .08em; color: var(--ink-3); }
.legal-body { max-width: 720px; }
.legal-body > section { padding-bottom: clamp(36px, 5vw, 56px); }
.legal-body h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin-bottom: 14px; }
.legal-body p, .legal-body li { color: var(--ink-2); }
.legal-body ul { padding-left: 1.2em; }
.legal-body li { margin-bottom: 12px; }
.legal-body li b { color: var(--ink); font-weight: 600; }
.legal-facts { display: grid; grid-template-columns: 120px 1fr; gap: 10px 20px; margin: 0; }
.legal-facts dt { color: var(--ink-3); font: 500 .8rem/1.6 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.legal-facts dd { margin: 0; color: var(--ink); }
@media (max-width: 560px) { .legal-facts { grid-template-columns: 1fr; gap: 2px; } .legal-facts dd { margin-bottom: 10px; } }

.legend-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.legend-grid > div {
  display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start;
  padding: 16px; border-radius: 16px; border: 1px solid var(--edge); background: var(--fill);
}
.legend-grid svg { width: 52px; height: 34px; padding: 3px 4px; border-radius: 8px; background: var(--plate-bg); border: 1px solid var(--rule-soft); }
.legend-grid p { margin: 0; }
.legend-grid b { display: block; font-weight: 600; }
.legend-grid span { color: var(--ink-2); font-size: .94rem; }
@media (max-width: 700px) { .legend-grid { grid-template-columns: 1fr; } }


/* ── Motion ───────────────────────────────────────────────────────────── */

/* Hero content rises in on load, one line after another. */
.js .hero.center .wrap > *, .js .volume-head > div > *, .js .volume-head > aside { animation: rise 1s var(--ease) both; }
.js .hero.center .wrap > :nth-child(2), .js .volume-head > div > :nth-child(2) { animation-delay: .08s; }
.js .hero.center .wrap > :nth-child(3), .js .volume-head > div > :nth-child(3) { animation-delay: .16s; }
.js .hero.center .wrap > :nth-child(4), .js .volume-head > div > :nth-child(4) { animation-delay: .24s; }
.js .hero.center .wrap > :nth-child(5) { animation-delay: .32s; }
.js .hero.center .wrap > :nth-child(6) { animation-delay: .4s; }
.js .hero.center .wrap > :nth-child(7) { animation-delay: .9s; }
.js .volume-head > aside { animation-delay: .3s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }

/* Everything else rises as it scrolls into view (site.js adds .in, staggered by --d). */
.js .reveal {
  opacity: 0; transform: translateY(22px); filter: blur(8px);
  transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
  transition-delay: var(--d, 0s);
}
.js .reveal.in { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0s !important;
  }
  .js .reveal { opacity: 1; transform: none; filter: none; }
  .hero-stage .plate { transform: none; }
  .ticker { overflow-x: auto; }
  .ticker-track { animation: none !important; }
  .ticker-set[aria-hidden="true"] { display: none; }
}

.section-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(28px, 4vw, 44px); }
.narrow { max-width: 880px; margin-inline: auto; }

/* ── Explore: example strip and chart wall ──────────────────────────────── */
.strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin;
}
@media (min-width: 1100px) { .strip { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; } }
.strip-card {
  display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 14px 16px 12px;
  border: 1px solid var(--edge); border-radius: var(--radius); background: var(--glass);
  color: var(--ink); text-decoration: none; scroll-snap-align: start;
  transition: border-color .2s, transform .2s var(--ease), box-shadow .2s var(--ease);
}
.strip-card:hover {
  text-decoration: none; transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--cyan) 45%, transparent);
  box-shadow: 0 12px 34px -18px color-mix(in srgb, var(--cyan) 90%, transparent);
}
.strip-card .t-sym, .wall-card .t-sym { display: flex; align-items: center; gap: 7px; font: 600 .95rem/1.2 var(--font-mono); color: var(--ink); }
/* Company and period on their own lines: on one line the period was cut short ("Nov 2…"). */
.strip-card .t-meta { overflow: hidden; font-size: .8rem; line-height: 1.45; color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }
.strip-card .t-count { font: 500 .76rem var(--font-mono); color: var(--cyan); }
/* The whole snapshot, scaled down: cropping would cut TradingView's attribution out. */
.strip-shot, .wall-shot { display: block; width: 100%; height: auto; margin: 8px 0 4px; border-radius: 8px; border: 1px solid var(--rule-soft); }
/* Rows drift in opposite directions; each row holds its cards twice for a seamless loop. The
   rows are wider than the screen, so .wall clips them (and its column may not grow to fit). */
.wall {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 28px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.wall-row { display: flex; width: max-content; animation: marquee 150s linear infinite; }
.wall-row.rev { animation-direction: reverse; animation-duration: 180s; }
.wall:hover .wall-row { animation-play-state: paused; }
.wall-set { display: flex; gap: 12px; padding-right: 12px; }
.wall-card { flex: 0 0 172px; padding: 10px 12px 6px; border: 1px solid var(--rule-soft); border-radius: 12px; background: var(--card); }
.wall-card .t-sym { font-size: .8rem; }
.wall-card .t-yr { margin-left: auto; font-weight: 400; font-size: .72rem; color: var(--ink-3); }
.wall-card .wall-shot { margin: 6px 0 2px; border-radius: 6px; }
.wall-note { margin: 14px auto 0; text-align: center; font-size: .85rem; color: var(--ink-3); }


/* ── Pricing: the three access steps under the plans ────────────────────── */

/* ── Coming soon: the volumes ───────────────────────────────────────────── */
.volumes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.volume-card { position: relative; display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--edge); border-radius: var(--radius); background: var(--glass); }
.volume-card .call { display: flex; justify-content: space-between; font: 500 .72rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.volume-card .call .state { color: var(--lamp); }
.volume-card h3 { margin: 16px 0 8px; }
.volume-card p { flex: 1; margin: 0 0 18px; color: var(--ink-2); }
.volume-card .btn { align-self: flex-start; }
.volume-card.soon { border-style: dashed; background: transparent; }
.volume-card.soon h3 { color: var(--ink-3); }
.volume-card.soon.named h3 { color: var(--ink); }
/* Volume III is drawn as work in progress: a line sketched over its dashed draft, on a loop. */
.wip-sketch { width: 100%; height: auto; margin-top: 18px; }
.wip-sketch .rule { stroke: var(--rule-soft); stroke-width: 1; }
.wip-sketch .draft { fill: none; stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 5; opacity: .6; }
.wip-sketch .ink {
  fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: wip-draw 7s var(--ease) infinite;
}
@keyframes wip-draw {
  0% { stroke-dashoffset: 1; opacity: 1; }
  55%, 82% { stroke-dashoffset: 0; opacity: 1; }
  96% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 1; opacity: 0; }
}
@media (max-width: 900px) { .volumes { grid-template-columns: 1fr; } }
/* Bars that grow out once their diagram is drawn (the Kata preview's record bars, from the left). */
.l-grow { transform-box: fill-box; transform-origin: center; }
.js .diagram .l-grow { transform: scaleX(0); }
.js .diagram.drawn .l-grow { animation: grow-x .7s var(--ease) forwards; animation-delay: var(--at, 1s); }
/* Kata's preview on Coming soon: the candles and the hammer's mark are drawn; its record card
   and the catalogue are text, so they keep the 11 px floor at any width. The card sits beside
   the candles, at the end of the mark's dotted line, while the figure has room; under them when
   it hasn't. */
.kata-fig { container-type: inline-size; }
.kata-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.kata-rec {
  display: grid; gap: 3px; padding: 11px 13px; border: 1px solid var(--rule); border-radius: 10px;
  background: var(--plate-bg); font: .72rem/1.35 var(--font-mono); color: var(--ink-2);
}
.kata-rec b { font-weight: 600; color: var(--cyan); }
.kata-sub { margin-bottom: 5px; color: var(--ink-3); }
.kata-bar { display: block; height: 8px; margin-bottom: 4px; }
.kata-bar i { display: block; width: 88%; height: 100%; border-radius: 3px; background: var(--cyan); opacity: .9; transform-origin: left center; }
.kata-bar.base i { width: 61%; background: var(--ink-3); opacity: .5; }
.kata-cat {
  display: grid; grid-template-columns: 1fr 1fr; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--rule-soft); font: .72rem/1.3 var(--font-mono);
}
.kata-cat > div + div { padding-left: 14px; border-left: 1px solid var(--rule-soft); }
.kata-cat p { margin: 0 0 8px; color: var(--ink-3); }
.kata-cat ul { margin: 0; padding: 0; list-style: none; column-gap: 6px; }
.kata-cat li { position: relative; padding: 5px 8px; color: var(--ink-2); break-inside: avoid; }
.kata-cat li.on { font-weight: 600; color: var(--cyan); }
.kata-cat li.on::before {   /* the catalogue's frame round the pattern that just printed */
  content: ""; position: absolute; inset: 1px 0; border-radius: 6px;
  border: 1.2px dashed color-mix(in srgb, var(--cyan) 80%, transparent);
}
.js .diagram .kata-cat li.on::before { opacity: 0; }
.js .diagram.drawn .kata-cat li.on::before { animation: pop .5s var(--ease) 1.9s forwards; }
@container (max-width: 429px) {
  .kata-top { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .kata-rec { justify-self: end; }
  .kata-lead { display: none; }
}
@container (min-width: 600px) { .kata-cat ul { columns: 2; } }   /* each half in two columns */
@keyframes grow-x { to { transform: none; } }
.notify { max-width: 640px; margin: clamp(56px, 7vw, 88px) auto 0; text-align: center; }
.notify p { color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  .wall-row { animation: none !important; }
  .wip-sketch .ink { animation: none !important; stroke-dashoffset: .45; }
}

/* ── Home (index.html, 2026-11-03): what TAlexandria is and everything in it ── */
.home-hero .hero-title { max-width: 15ch; }
.home-hero .lede { max-width: 37em; }

/* At a glance: the chart in the middle and the rooms around it, joined by dotted lines, as on a
   diagram. Three columns: the stock rooms, the chart with the calendar above it and Kata below,
   the market rooms. site.js draws the lines from wherever the cards land, so they follow the
   layout at any width. Under 940 px the side columns would squeeze the cards' text, so the map
   stacks: the chart, then each group of rooms under its name, with no lines. */
.atlas {
  position: relative; max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 38%, 440px) minmax(0, 1fr);
  column-gap: clamp(40px, 6vw, 96px); align-items: center;
}
.atlas-lines {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none;
  --fade: radial-gradient(var(--hub-rx, 1px) var(--hub-ry, 1px) at var(--hub-x, 50%) var(--hub-y, 50%), #0000 62%, #000);
  -webkit-mask-image: var(--fade); mask-image: var(--fade);
}
.atlas-lines path {
  fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 1 6; stroke-linecap: round;
  transition: stroke .25s;
}
.atlas-lines path.soon { stroke-dasharray: 5 6; opacity: .7; }
.atlas-side { display: flex; flex-direction: column; gap: 20px; }
.atlas-side[data-side="stock"] { align-items: flex-end; }
.atlas-side[data-side="market"] { align-items: flex-start; }
.atlas-mid { display: flex; flex-direction: column; align-items: center; gap: 36px; }
.atlas-group {
  width: min(100%, 260px);
  font: 500 .7rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.atlas-hub, .atlas-card { color: var(--ink); text-decoration: none; }
.atlas-hub:hover, .atlas-card:hover { text-decoration: none; }
/* The chart in the middle: ECP's How-it-works drawing (.d-how) with no plate, lit by a soft
   pool of the page's accent that dissolves into the page. The drawing's ends fade the same way,
   and the lines from the rooms fade out as they reach it (site.js tells their mask where it
   is). At this size the drawing's labels would fall under 11 px, so it shows the drawing alone,
   with heavier lines and markers, and the three steps under it as text. */
.atlas-hub {
  position: relative; z-index: 1; width: 100%;
  display: flex; flex-direction: column; gap: 12px; padding: 26px 14px 24px;
  border: 0; border-radius: 0; box-shadow: none; background: none;
  transition: translate .25s var(--ease);
}
.atlas-hub::before {
  content: ""; position: absolute; inset: -34px -56px; z-index: -1; opacity: .85; transition: opacity .3s;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--cyan-deep) 26%, transparent),
    color-mix(in srgb, var(--cyan-deep) 14%, transparent) 45%, color-mix(in srgb, var(--cyan-deep) 5%, transparent) 72%, transparent);
}
.atlas-hub:hover { translate: 0 -2px; }
.atlas-hub:hover::before { opacity: 1; }
.atlas-hub svg {
  margin-bottom: -7.14%;   /* the drawing's last 40 of its 560 × 380 hold only its hidden labels */
  -webkit-mask-image: linear-gradient(90deg, #0000, #000 12%, #000 88%, #0000);
  mask-image: linear-gradient(90deg, #0000, #000 12%, #000 88%, #0000);
}
.atlas-hub svg text, .atlas-hub .d-lead { display: none; }
.atlas-hub .d-path { stroke-width: 3.5; }
.atlas-hub .d-hold { stroke-width: 5; }
.atlas-hub .d-eq { stroke-width: 4; }
.atlas-hub :is(.d-dot, .d-w, .d-r) { scale: 1.8; transform-box: fill-box; transform-origin: center; }
.atlas-hub-top { display: flex; align-items: center; justify-content: center; gap: 12px; }
.atlas-kicker { font: 500 .7rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.atlas-chip {
  padding: 5px 9px; border-radius: 999px; background: var(--accent-fill); color: var(--on-accent);
  font: 600 .7rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.atlas-steps {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px;
  font: 600 .72rem/1.7 var(--font-mono); color: var(--ink);
}
.atlas-steps b { font-weight: 600; color: var(--cyan); }
.atlas-steps .tag { padding: 1px 5px; }
.atlas-note { max-width: 1120px; margin-inline: auto; }
.atlas-card {
  position: relative; width: min(100%, 260px);
  display: flex; align-items: center; gap: 12px; padding: 11px 13px;
  border-radius: 16px; border: 1px solid var(--edge); background: var(--card); box-shadow: var(--shadow);
  transition: border-color .25s, translate .25s var(--ease);
}
.atlas-mid .atlas-card { width: max-content; max-width: 100%; }
.atlas-card:hover { border-color: color-mix(in srgb, var(--cyan) 45%, transparent); translate: 0 -2px; }
.atlas-card.soon { border-style: dashed; background: var(--bg); box-shadow: none; }
.atlas-ico {
  flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
  border: 1px solid var(--edge); background: var(--fill-2); color: var(--ink-2); transition: color .25s, border-color .25s;
}
.atlas-ico svg { width: 19px; height: 19px; }
.atlas-card:hover .atlas-ico { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 40%, transparent); }
.atlas-txt { min-width: 0; }
.atlas-txt b { display: block; font-weight: 500; font-size: .93rem; line-height: 1.3; letter-spacing: -0.01em; }
.atlas-txt b i { display: block; margin-top: 4px; font: normal 500 .7rem/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.atlas-txt small { display: block; margin-top: 2px; font-size: .8rem; line-height: 1.35; color: var(--ink-3); }
/* Pointing at a room lights its line to the chart. */
.atlas:has([data-k="ins"]:hover) path[data-k="ins"], .atlas:has([data-k="f13"]:hover) path[data-k="f13"],
.atlas:has([data-k="ftd"]:hover) path[data-k="ftd"], .atlas:has([data-k="cot"]:hover) path[data-k="cot"],
.atlas:has([data-k="yc"]:hover) path[data-k="yc"], .atlas:has([data-k="ovn"]:hover) path[data-k="ovn"],
.atlas:has([data-k="eia"]:hover) path[data-k="eia"], .atlas:has([data-k="cal"]:hover) path[data-k="cal"],
.atlas:has([data-k="kata"]:hover) path[data-k="kata"] { stroke: var(--cyan); }
@media (max-width: 939px) {
  .atlas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 720px; }
  .atlas-side, .atlas-mid { display: contents; }
  .atlas-lines { display: none; }
  .atlas-hub { grid-column: 1 / -1; order: -1; justify-self: center; width: min(100%, 440px); }
  .atlas-hub::before { inset: -24px 0; }
  .atlas-group { grid-column: 1 / -1; width: auto; margin: 14px 0 2px; }
  .atlas-card, .atlas-mid .atlas-card { width: auto; }
  .atlas-card[data-k="cal"] { order: 1; }
  .atlas-card[data-k="kata"] { order: 2; grid-column: 1 / -1; }
  .atlas-note { max-width: 720px; }
}
/* Phones: the rooms two by two, by name only. */
@media (max-width: 560px) {
  .atlas-card { gap: 10px; padding: 10px; }
  .atlas-ico { width: 32px; height: 32px; border-radius: 9px; }
  .atlas-ico svg { width: 17px; height: 17px; }
  .atlas-txt small { display: none; }
  .atlas-txt b { font-size: .88rem; }
}

/* The bento grids (Indicators, Reading Room): a title whose first words are ink and the rest
   grey, a ↗ in the corner, and a sketch of what the page shows. The whole card is the link. */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.bento-stack { display: grid; grid-auto-rows: 1fr; gap: 16px; min-width: 0; }
.bento-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  padding: 24px 24px 0; border-radius: 22px; border: 1px solid var(--edge);
  background: linear-gradient(180deg, var(--card-2), var(--card)); color: var(--ink); text-decoration: none;
  transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
a.bento-card:hover {
  text-decoration: none; transform: translateY(-3px); border-color: var(--edge-hi);
  box-shadow: 0 26px 60px -34px color-mix(in srgb, var(--cyan) 75%, transparent);
}
.bento-card.soon { border-style: dashed; background: transparent; }
.bento-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.bento-title { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bento-kicker { font: 500 .7rem/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.bento-title b { font: 500 clamp(1.22rem, 1.8vw, 1.55rem)/1.2 var(--font-display); letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.bento-title b span { color: var(--ink-3); }
.bento-go {
  flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--edge-hi); background: var(--fill); color: var(--ink-2);
  transition: color .25s, background-color .25s, border-color .25s;
}
.bento-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
a.bento-card:hover .bento-go { color: var(--on-accent); background: var(--accent-fill); border-color: transparent; }
.bento-vis { position: relative; display: flex; flex-direction: column; justify-content: flex-end; flex: 1; min-height: 140px; margin-top: 22px; padding-bottom: 24px; }
.vis-svg { display: block; width: 100%; height: auto; overflow: visible; }
/* Sketch labels are 11 px at the sketch's own width (300, Kata's 320). On a phone the sketch is
   drawn narrower, down to 0.77 of it, so there they are set larger and still show at 11 px or
   more (see the queries after the sketches' own rules). */
.bento-vis { container-type: inline-size; }

/* ECP: the TradingView snapshot, whole (its attribution stays), and two of its alerts. */
.vis-ecp { min-height: 0; }
.vis-ecp img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--rule-soft); box-shadow: var(--shadow); }
.bubble {
  position: absolute; display: flex; align-items: center; gap: 11px; max-width: min(300px, 70%); padding: 10px 14px;
  border-radius: 14px; border: 1px solid var(--edge-hi); background: color-mix(in srgb, var(--card) 94%, transparent);
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .85); font-size: .86rem; line-height: 1.4; color: var(--ink);
}
.bubble b { margin-right: 3px; font: 700 .86rem var(--font-mono); }
.bubble .dot { flex: 0 0 auto; width: 9px; height: 9px; }
.b-w { left: 5%; top: 9%; }
.b-w b { color: var(--gold-text); }
.b-r { right: 4%; bottom: 31%; }
.b-r b { color: var(--verdigris-text); }
.bubble .tri { flex: 0 0 auto; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid var(--verdigris); }
/* Results: two snapshots from either end of the gallery, 5-minute and weekly, both whole. */
.vis-results { flex-direction: row; align-items: flex-end; min-height: 150px; }
.vis-results img { width: 64%; height: auto; border-radius: 9px; border: 1px solid var(--rule-soft); box-shadow: var(--shadow); }
.vis-results img + img { margin: 0 0 -6px -28%; }
.vr-chips { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 6px; font: .74rem var(--font-mono); color: var(--ink-3); }
/* The guide: its contents, as on the page. */
.vis-guide { gap: 0; min-height: 0; font-size: .88rem; }
.vis-guide span { display: flex; gap: 14px; padding: 7px 0; border-top: 1px solid var(--rule-soft); color: var(--ink-2); }
.vis-guide i { font: normal 500 .74rem/1.6 var(--font-mono); color: var(--lamp); }
/* Kata: a run of candles with the one it names framed. */
.vis-kata .vk-wick { stroke: var(--candle); stroke-width: 1.5; }
.vis-kata .vk-up { fill: var(--bg); stroke: var(--candle); stroke-width: 1.5; }
.vis-kata .vk-dn { fill: var(--candle); stroke: var(--candle); stroke-width: 1.5; }
.vis-kata .vk-frame { fill: none; stroke: var(--ink-2); stroke-width: 1.2; stroke-dasharray: 4 4; }
.vis-kata .vk-label { font: 11px var(--font-mono); fill: var(--ink-3); }
.bento-card.soon .vis-svg, .bento-card .vis-kata { height: 116px; margin-top: 0; }

/* The Reading Room's sketches: ink only and made up, with no figures, like a drawing of the
   page rather than its data. */
.vis-ins { flex-direction: row; align-items: flex-end; gap: 14px; }
.vi-list { flex: 1; min-width: 0; display: grid; border: 1px solid var(--edge); border-radius: 14px; background: var(--fill); overflow: hidden; }
.vi-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px; }
.vi-row + .vi-row { border-top: 1px solid var(--edge); }
.vi-role { font: 500 .74rem/1.3 var(--font-mono); color: var(--ink-2); white-space: nowrap; }
.vi-bar { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--ink-2) var(--w), color-mix(in srgb, var(--ink) 10%, transparent) var(--w)); }
.vi-tag { font: .72rem/1.3 var(--font-mono); color: var(--ink-3); }
.vi-cluster {
  flex: 0 0 36%; display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; padding: 14px 16px;
  border-radius: 14px; border: 1px solid var(--edge-hi); background: var(--card-2); box-shadow: var(--shadow);
}
.vi-k { font: 500 .7rem/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.vi-cluster b { font-weight: 500; font-size: .92rem; line-height: 1.3; }
.vi-dots { display: flex; }
.vi-dots i { width: 22px; height: 22px; margin-right: -6px; border-radius: 50%; border: 2px solid var(--card-2); background: color-mix(in srgb, var(--ink) 26%, var(--card-2)); }
.vis-cot { gap: 0; }
.vc-head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; font: 500 .7rem/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.vc-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) 76px; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--rule-soft); font-size: .84rem; color: var(--ink-2); }
.vc-track { position: relative; height: 6px; border-radius: 3px; background: var(--fill-2); box-shadow: inset 0 0 0 1px var(--edge); }
.vc-track::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--edge-hi); }
.vc-track i { position: absolute; top: 50%; left: var(--p); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--ink-2); box-shadow: 0 0 0 2px var(--card); }
.vc-row:nth-child(2) .vc-track i { width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--ink); }
.vc-row em { font: normal .72rem/1.2 var(--font-mono); color: var(--ink); text-align: right; white-space: nowrap; }
.vis-13f { gap: 9px; }
.vf-row { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 12px; }
.vf-chip { padding: 5px 0; border-radius: 6px; border: 1px solid var(--edge); background: var(--fill-2); text-align: center; font: 500 .7rem/1.2 var(--font-mono); color: var(--ink-2); }
.vf-bar { width: var(--w); height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 55%, transparent); }
.vf-row:nth-child(n+3) .vf-bar { background: color-mix(in srgb, var(--ink) 24%, transparent); }
.vis-svg .vs-base, .vis-svg .vs-grid { fill: none; stroke: var(--rule); stroke-width: 1; }
.vis-svg .vs-bars rect { fill: color-mix(in srgb, var(--ink) 28%, transparent); }
.vis-svg .vs-bars rect:nth-child(n+24):nth-child(-n+37) { fill: var(--ink-2); }
.vis-svg .vs-run { fill: none; stroke: var(--ink-3); stroke-width: 1; }
.vis-svg .vs-label { font: 11px var(--font-mono); fill: var(--ink-3); }
@container (max-width: 299px) { .vis-svg .vs-label { font-size: 13.5px; } }
@container (max-width: 319px) { .vis-kata .vk-label { font-size: 14.5px; } }
.vis-svg .vs-now { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.vis-svg .vs-then { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 4 4; }
.vis-svg .vs-dot { fill: var(--ink); }
.vis-svg .vs-band { fill: color-mix(in srgb, var(--ink) 9%, transparent); }
.vis-svg .vs-edge { fill: none; stroke: var(--ink-3); stroke-dasharray: 3 3; }
.vis-cal { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 16px; }
.vcal-grid { display: grid; grid-template-columns: repeat(7, 14px); gap: 5px; }
.vcal-grid i { width: 14px; height: 14px; border-radius: 4px; background: var(--fill-2); box-shadow: inset 0 0 0 1px var(--edge); }
.vcal-grid i.m { background: color-mix(in srgb, var(--ink) 42%, transparent); box-shadow: none; }
.vcal-grid i.next { background: var(--ink); box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--ink); }
.vcal-grid i.fed { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
.vcal-key { display: grid; gap: 7px; font-size: .78rem; line-height: 1.3; color: var(--ink-2); }
.vcal-key span { display: flex; align-items: center; gap: 8px; }
.vcal-key i { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 42%, transparent); }
.vcal-key i.next { background: var(--ink); }
.vcal-key i.fed { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }

@media (max-width: 1000px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento > .span-2, .bento > .span-3 { grid-column: span 1; }
  .bento > .span-4, .bento > .bento-stack { grid-column: 1 / -1; }
  .bento-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
}
@media (max-width: 640px) {
  .bento, .bento-stack { grid-template-columns: minmax(0, 1fr); }
  .bento > .span-2, .bento > .span-3, .bento > .span-4, .bento > .bento-stack { grid-column: auto; }
  .bento-card { padding: 20px 20px 0; }
  /* Phones: the alerts sit under the chart instead of on it. */
  .vis-ecp { gap: 8px; }
  .bubble { position: static; max-width: none; }
  .vis-ins { flex-direction: column; align-items: stretch; }
  .vi-cluster { margin: 0; }
  .vc-row { grid-template-columns: 96px minmax(0, 1fr) 70px; }
}

/* ── Insider buying (insiders.html, 2026-11-01): SEC Form 4 purchases ──── */
.ins-clusters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ins-cluster {
  display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; text-align: left;
  font: inherit; color: var(--ink); cursor: pointer;
  border: 1px solid var(--edge); border-radius: var(--radius); background: var(--glass);
  transition: border-color .25s, transform .25s var(--ease);
}
.ins-cluster:hover { border-color: var(--edge-hi); transform: translateY(-2px); }
.ins-cl-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 500 .72rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.ins-cl-top b { font: 600 1.05rem var(--font-mono); letter-spacing: .02em; color: var(--cyan); }
.ins-cl-co { color: var(--ink-2); font-size: .95rem; line-height: 1.4; }
.ins-cl-v { margin-top: 4px; font: 600 1.6rem/1.1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ins-cl-who, .ins-cl-last { font-size: .82rem; line-height: 1.4; color: var(--ink-3); }
.ins-none { text-align: center; color: var(--ink-3); }
@media (max-width: 900px) { .ins-clusters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ins-clusters { grid-template-columns: minmax(0, 1fr); } }

.ins-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.ins-search, .ins-select {
  min-height: 42px; padding: 0 14px; border: 1px solid var(--edge-hi); border-radius: 10px;
  background: var(--fill); color: var(--ink); font: inherit; font-size: .93rem;
}
.ins-search { flex: 1 1 240px; min-width: 0; }
.ins-search::placeholder { color: var(--ink-3); }
.ins-select { flex: 0 0 auto; cursor: pointer; }
.ins-select option { background: var(--card); color: var(--ink); }
.ins-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--edge); border-radius: 12px; background: var(--fill); }
.ins-chips button {
  padding: 7px 12px; border: 0; border-radius: 8px; background: transparent;
  color: var(--ink-2); font: inherit; font-size: .88rem; cursor: pointer; transition: color .2s, background-color .2s;
}
.ins-chips button:hover { color: var(--ink); }
.ins-chips button[aria-pressed="true"] { color: var(--ink); background: var(--fill-2); box-shadow: inset 0 -2px 0 var(--cyan); }
:is(.ins-cluster, .ins-search, .ins-select, .ins-chips button, .ins-table th button, .ins-clear):focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.ins-count { margin: 0 0 12px; font-size: .88rem; color: var(--ink-3); }
.ins-clear { margin-left: 8px; padding: 0; border: 0; background: none; color: var(--cyan); font: inherit; cursor: pointer; }
.ins-clear[hidden], .ins-more .btn[hidden] { display: none; }
@media (max-width: 560px) {
  .ins-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 1 1 100%; }
  .ins-select { flex: 1 1 0; min-width: 0; }
}

.ins-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--edge); border-radius: 14px; background: var(--fill);
  font-size: .9rem; font-variant-numeric: tabular-nums;
}
.ins-table th {
  padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--edge); white-space: nowrap;
  font: 500 .7rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.ins-table th button { padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
.ins-table th button::after { content: " ↓"; opacity: .35; }
.ins-table th[aria-sort="descending"] button { color: var(--ink); }
.ins-table th[aria-sort="descending"] button::after { opacity: 1; }
.ins-table td { padding: 12px 14px; border-bottom: 1px solid var(--edge); vertical-align: top; }
.ins-table tbody tr:last-child td { border-bottom: 0; }
.ins-table tbody tr:hover td { background: var(--fill); }
.ins-table .num { text-align: right; white-space: nowrap; }
.ins-table :is(.c-f, .c-sh, .c-px, .c-dn) { font: .86rem var(--font-mono); color: var(--ink-2); }
.ins-table .c-v b { font-weight: 600; }
.ins-table .c-v .tag { margin-left: 6px; font-size: .7rem; color: var(--ink-2); }
.ins-table .c-u a { font-size: .84rem; color: var(--ink-2); }
.ins-tk { font: 600 .95rem var(--font-mono); color: var(--cyan); text-decoration: none; }
.ins-tk:hover { text-decoration: underline; }
.ins-tk.none { color: var(--ink-3); }
.ins-co, .ins-name, .ins-role, .ins-sec { display: block; line-height: 1.4; }
.ins-co { color: var(--ink-2); font-size: .86rem; }
.ins-name { color: var(--ink); }
.ins-role, .ins-sec { color: var(--ink-3); font-size: .82rem; }
.ins-x { font: 500 .75rem var(--font-mono); color: var(--ink-3); }
.ins-empty td { padding: 28px; text-align: center; color: var(--ink-3); }
.ins-more { display: flex; justify-content: center; margin-top: 18px; }
.ins-read { max-width: 760px; margin: 0 auto; }
/* Tablets and phones: each purchase becomes a card, company and value on top, the details in
   one line (the eight-column table needs about 860 px). */
@media (max-width: 900px) {
  .ins-table thead { display: none; }
  .ins-table, .ins-table tbody { display: block; }
  .ins-table tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 14px 16px; border-bottom: 1px solid var(--edge); }
  .ins-table tbody tr:last-child { border-bottom: 0; }
  .ins-table td, .ins-table tbody tr:last-child td { padding: 0; border: 0; }
  .ins-table tbody tr:hover td { background: none; }
  .ins-table .num { text-align: left; }
  .ins-table .c-co { order: 1; flex: 1 1 0; min-width: 0; }
  .ins-table .c-v { order: 2; text-align: right; }
  .ins-table .c-who { order: 3; flex: 1 1 100%; }
  .ins-table :is(.c-f, .c-sh, .c-px, .c-dn) { order: 4; font-size: .8rem; }
  .ins-table .c-u { order: 5; margin-left: auto; }
  .ins-table td[data-label]::before { content: attr(data-label) " "; font-family: var(--font-body); color: var(--ink-3); }
  .ins-empty { justify-content: center; }
}

/* Buying waves and dollars bought since 2006 (2026-11-02): drawn by insider-table.js at the box's width, in ink only
   like the other Reading Room charts. Months a light ink, the named waves full ink, months still
   being filed fainter, the 12-month average a dashed line with a halo so it reads over the bars. */
.ins-w-picks { width: fit-content; max-width: 100%; margin: 0 auto 18px; }
.ins-w-chart { min-height: 240px; touch-action: pan-y; cursor: crosshair; }
.ins-w-svg { display: block; width: 100%; height: auto; }
.ins-w-ax { font: .7rem var(--font-mono); fill: var(--ink-3); }
.ins-w-gridline { stroke: var(--rule-soft); }
.ins-w-axis, .ins-w-tick { stroke: var(--rule); }
.ins-w-bar { fill: color-mix(in srgb, var(--ink) 30%, transparent); }
.ins-w-bar.wave { fill: var(--ink); }
.ins-w-bar.part { fill: color-mix(in srgb, var(--ink) 12%, transparent); }
.ins-w-avg-halo { fill: none; stroke: var(--plate-bg); stroke-width: 4; stroke-linejoin: round; opacity: .8; }
.ins-w-avg { fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 5 4; stroke-linejoin: round; }
.ins-w-label { font: 500 .7rem var(--font-mono); fill: var(--ink); paint-order: stroke; stroke: var(--plate-bg); stroke-width: 3px; stroke-linejoin: round; }
.ins-w-end { fill: var(--ink); stroke: var(--plate-bg); stroke-width: 2; }
.ins-w-rule { stroke: var(--ink-3); }
.ins-w-on { fill: var(--ink); }
.ins-w-hit { fill: transparent; }
.ins-w-tip {
  position: absolute; top: 10px; z-index: 2; display: flex; flex-direction: column; gap: 2px;
  padding: 9px 11px; border: 1px solid var(--edge-hi); border-radius: 10px; pointer-events: none;
  background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: .76rem/1.45 var(--font-mono); color: var(--ink-2); white-space: nowrap;
}
.ins-w-tip[hidden], .ins-w-key [hidden] { display: none; }
.ins-w-tip b { color: var(--ink); font-weight: 600; }
.ins-w-tip em { font-style: normal; color: var(--ink-3); }
.ins-w-tip span { display: flex; justify-content: space-between; gap: 14px; }
.ins-w-tip span.on { color: var(--ink); }
.ins-w-tip i { font-style: normal; color: var(--ink-3); }
.ins-w-tip em.ins-w-who { max-width: 230px; white-space: normal; color: var(--ink-2); }
.ins-w-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 18px; }
.ins-w-read { flex: 1 1 320px; min-width: 0; color: var(--ink-2); }
.ins-w-sw-bar, .ins-w-sw-wave, .ins-w-sw-part { width: 10px; height: 10px; border-radius: 2px; }
.ins-w-sw-bar { background: color-mix(in srgb, var(--ink) 30%, transparent); }
.ins-w-sw-wave { background: var(--ink); }
.ins-w-sw-part { background: color-mix(in srgb, var(--ink) 12%, transparent); box-shadow: inset 0 0 0 1px var(--rule); }
.ins-w-key .swatch.dashed { border-top-color: var(--ink-2); }
.ins-w-key b { font-weight: inherit; }

.ins-w-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); margin-top: 40px; }
.ins-w-grid h3 { font-size: 1.4rem; margin-bottom: .35em; }
.ins-w-sub { margin: 0 0 16px; font-size: .9rem; line-height: 1.55; color: var(--ink-2); }
.ins-w-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ins-w-card, .ins-w-wave {
  font: inherit; color: var(--ink); text-align: left; cursor: pointer;
  border: 1px solid var(--edge); border-radius: var(--radius); background: var(--fill);
  transition: border-color .25s, background-color .25s, transform .25s var(--ease);
}
.ins-w-card { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; }
.ins-w-card:hover, .ins-w-wave:hover { border-color: var(--edge-hi); transform: translateY(-2px); }
.ins-w-card[aria-pressed="true"] { border-color: var(--edge-hi); background: var(--fill-2); box-shadow: inset 0 -2px 0 var(--cyan); }
.ins-w-card-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; font: 500 .72rem/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.ins-w-card-top b { font: 600 1.4rem/1.1 var(--font-display); letter-spacing: -0.02em; text-transform: none; color: var(--ink); font-variant-numeric: tabular-nums; }
.ins-w-range { position: relative; display: block; height: 14px; }
.ins-w-range::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 22%, transparent); }
.ins-w-range-mid { position: absolute; top: 1px; width: 2px; height: 12px; margin-left: -1px; border-radius: 1px; background: var(--ink-3); }
.ins-w-range-dot { position: absolute; top: 2px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--bg); }
.ins-w-range-ends { display: flex; justify-content: space-between; gap: 8px; font: .72rem/1.3 var(--font-mono); color: var(--ink-3); }
.ins-w-rank { font-size: .84rem; line-height: 1.45; color: var(--ink-2); }
.ins-w-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ins-w-wave { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; width: 100%; padding: 12px 16px; }
.ins-w-wave-m { font: 600 .95rem/1.3 var(--font-mono); color: var(--ink); }
.ins-w-wave-v { font-size: .88rem; color: var(--ink-2); white-space: nowrap; }
.ins-w-wave-v b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.ins-w-wave-r { grid-column: 1 / -1; font-size: .82rem; color: var(--ink-3); }
:is(.ins-w-chart, .ins-w-card, .ins-w-wave):focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
@media (max-width: 900px) { .ins-w-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .ins-w-picks { width: 100%; }
  .ins-w-rows { grid-template-columns: minmax(0, 1fr); }
  .ins-w-plate .plate-caption { padding-inline: 4px; }
}

/* ── Commitments of Traders (cot.html, 2026-11-01): CFTC futures positions ── */
.cot-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.cot-select {
  min-height: 42px; padding: 0 14px; border: 1px solid var(--edge-hi); border-radius: 10px;
  background: var(--fill); color: var(--ink); font: inherit; font-size: .93rem; cursor: pointer;
}
.cot-select :is(option, optgroup) { background: var(--card); color: var(--ink); }
.cot-pick { flex: 0 1 300px; min-width: 0; }
.cot-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--edge); border-radius: 12px; background: var(--fill); }
.cot-chips button {
  padding: 7px 12px; border: 0; border-radius: 8px; background: transparent;
  color: var(--ink-2); font: inherit; font-size: .88rem; cursor: pointer; transition: color .2s, background-color .2s;
}
.cot-chips button:hover { color: var(--ink); }
.cot-chips button[aria-pressed="true"] { color: var(--ink); background: var(--fill-2); box-shadow: inset 0 -2px 0 var(--cyan); }
:is(.cot-select, .cot-chips button, .cot-mk, .cot-groups .c-grp button, .cot-tv):focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.cot-note { max-width: 80ch; margin: 0 0 14px; font-size: .88rem; color: var(--ink-3); }

/* The two tables: every market (.cot-table) and one market's groups (.cot-groups). */
.cot-table, .cot-groups {
  width: 100%; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--edge); border-radius: 14px; background: var(--fill);
  font-size: .9rem; font-variant-numeric: tabular-nums;
}
:is(.cot-table, .cot-groups) thead th {
  padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--edge); white-space: nowrap;
  font: 500 .7rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
:is(.cot-table, .cot-groups) td { padding: 12px 14px; border-bottom: 1px solid var(--edge); vertical-align: middle; }
:is(.cot-table, .cot-groups) tbody tr:last-child td { border-bottom: 0; }
:is(.cot-table, .cot-groups) .num { text-align: right; white-space: nowrap; }
.cot-table tbody tr:not(.cot-sector):hover td, .cot-groups tbody tr:hover td { background: var(--fill); }
.cot-sector th {
  padding: 20px 14px 8px; text-align: left; border-bottom: 1px solid var(--edge);
  font: 500 .7rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.cot-mk, .cot-groups .c-grp button {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  text-align: left; font: inherit; color: inherit; cursor: pointer;
}
:is(.cot-mk, .cot-groups .c-grp button) b { display: block; font-weight: 600; color: var(--ink); line-height: 1.35; }
:is(.cot-mk, .cot-groups .c-grp button) span { display: block; font-size: .8rem; line-height: 1.4; color: var(--ink-3); }
.cot-mk:hover b { color: var(--cyan); }
.cot-table .c-net { font: .88rem var(--font-mono); color: var(--ink); }
.cot-table .c-chg { font: .86rem var(--font-mono); color: var(--ink-2); }
.cot-table .c-pos { min-width: 260px; }

/* Where this week sits: a track from the period's lowest net position to its highest. */
.cot-scale { display: inline-block; width: 104px; vertical-align: middle; }
.cot-bar { position: relative; display: block; height: 6px; border-radius: 3px; background: var(--fill-2); box-shadow: inset 0 0 0 1px var(--edge); }
.cot-bar::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--edge-hi); }
.cot-bar i {
  position: absolute; top: 50%; left: var(--p); width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: var(--ink-2); box-shadow: 0 0 0 2px var(--card);
}
.cot-bar.at i { width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--ink); }
.cot-ends { display: flex; justify-content: space-between; gap: 8px; margin-top: 7px; font: .7rem/1 var(--font-mono); color: var(--ink-3); }
.cot-where { margin-left: 12px; vertical-align: middle; font-size: .86rem; color: var(--ink-2); }
.cot-where.at { color: var(--ink); font-weight: 500; }

/* One market: its head card, the groups table and the history chart. */
.cot-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 32px; margin-bottom: 18px; padding: 22px 24px;
  border: 1px solid var(--edge); border-radius: var(--radius); background: var(--glass);
}
.cot-title { flex: 1 1 240px; min-width: 0; }
.cot-title h3 { margin: 0 0 6px; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.03em; line-height: 1.1; }
.cot-title p { margin: 0; font-size: .88rem; color: var(--ink-3); }
.cot-facts { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 0; }
.cot-facts dt { margin-bottom: 6px; font: 500 .7rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.cot-facts dd { margin: 0; font-size: .93rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.cot-facts dd span { font-size: .82rem; color: var(--ink-3); }
.cot-tv { font-size: .88rem; color: var(--cyan); text-decoration: none; white-space: nowrap; }
.cot-tv:hover { text-decoration: underline; }
.cot-groups tbody tr { cursor: pointer; }
.cot-groups tr.on td:first-child { box-shadow: inset 2px 0 0 var(--cyan); }
.cot-groups :is(.c-l, .c-s, .c-d) { font: .86rem var(--font-mono); color: var(--ink-2); }
.cot-groups .c-n b { font: 600 .88rem var(--font-mono); color: var(--ink); }
.cot-groups .num small { display: block; margin-top: 3px; font: .74rem/1.35 var(--font-body); color: var(--ink-3); }
.cot-groups .c-pos { min-width: 150px; }
.cot-groups .cot-where { display: block; margin: 8px 0 0; font-size: .84rem; }

.cot-chart { margin: 28px 0 0; padding: 20px 20px 16px; border: 1px solid var(--edge-hi); border-radius: 18px; background: var(--plate-bg); box-shadow: var(--shadow); }
/* The one chart on the site whose colours name something other than ECP's markers (the user's
   call, 2026-11-01): each kind of trader keeps its colour in every market, from the existing
   tokens so the themes and ad-test palettes carry it. */
.cot-tone-cyan { --tone: var(--cyan); }
.cot-tone-gold { --tone: var(--gold); }
.cot-tone-verdigris { --tone: var(--verdigris); }
.cot-tone-vermilion { --tone: var(--vermilion); }
.cot-tone-ink { --tone: var(--ink-2); }
.cot-key { display: inline-block; width: 12px; height: 3px; margin-right: 8px; border-radius: 2px; background: var(--tone); vertical-align: middle; }
.cot-chart > .cot-chips { margin-bottom: 16px; }
.cot-readout {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 16px; margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}
.cot-ro > span { display: block; font-size: .76rem; line-height: 1.35; color: var(--ink-3); }
.cot-ro > b { display: block; margin-top: 3px; font: 400 .88rem var(--font-mono); color: var(--ink-2); }
.cot-ro:first-child > b, .cot-ro.on > b { font-weight: 600; color: var(--ink); }
@media (max-width: 900px) { .cot-readout { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cot-readout { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cot-plot { min-height: 260px; touch-action: pan-y; }
.cot-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.cot-grid { stroke: var(--grid-line); }
.cot-grid.zero, .cot-tick { stroke: var(--edge-hi); }
.cot-ax { font: .7rem var(--font-mono); fill: var(--ink-3); }
.cot-area { fill: var(--tone); opacity: .1; }
.cot-line { fill: none; stroke: var(--tone); stroke-width: 1.5; stroke-linejoin: round; opacity: .72; }
.cot-line.on { stroke-width: 2.4; opacity: 1; }
.cot-cross { stroke: var(--ink-3); stroke-dasharray: 3 3; }
.cot-dot { fill: var(--tone); stroke: var(--plate-bg); stroke-width: 2; }
.cot-wait { margin: 0; padding: 100px 0; text-align: center; color: var(--ink-3); }
.cot-chart figcaption { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule-soft); font-size: .84rem; color: var(--ink-3); }
.cot-read { max-width: 760px; margin: 0 auto; }

/* Narrower screens: one market's groups become cards (the six-column table needs about
   940 px), then the overview's rows (its four columns need about 620 px). */
@media (max-width: 1000px) {
  .cot-groups thead { display: none; }
  .cot-groups, .cot-groups tbody { display: block; }
  .cot-groups tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; padding: 16px 18px; border-bottom: 1px solid var(--edge); }
  .cot-groups tbody tr:last-child { border-bottom: 0; }
  .cot-groups td, .cot-groups tbody tr:last-child td { padding: 0; border: 0; }
  .cot-groups tbody tr:hover td { background: none; }
  .cot-groups tbody tr:hover { background: var(--fill); }
  .cot-groups tr.on td:first-child { box-shadow: none; }
  .cot-groups tr.on { box-shadow: inset 2px 0 0 var(--cyan); }
  .cot-groups .num { text-align: left; white-space: normal; }
  .cot-groups :is(.c-grp, .c-pos) { grid-column: 1 / -1; }
  .cot-groups .c-pos { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 16px; }
  .cot-groups .c-pos .cot-scale { width: 140px; }
  .cot-groups .c-pos .cot-where { margin: 0; }
  .cot-groups td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 5px;
    font: 500 .7rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
  }
}
@media (max-width: 640px) {
  .cot-table thead { display: none; }
  .cot-table, .cot-table tbody { display: block; }
  .cot-table tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; padding: 14px 16px; border-bottom: 1px solid var(--edge); }
  .cot-table tbody tr:last-child { border-bottom: 0; }
  .cot-table td, .cot-table tbody tr:last-child td { padding: 0; border: 0; }
  .cot-table tbody tr:not(.cot-sector):hover td { background: none; }
  .cot-table tr.cot-sector { padding: 0; border-bottom: 0; }
  .cot-table .cot-sector th { flex: 1 1 100%; padding: 18px 16px 8px; }
  .cot-table .c-mk { flex: 1 1 0; min-width: 0; }
  .cot-table .c-chg { order: 3; flex: 1 1 100%; text-align: left; font-size: .8rem; }
  .cot-table .c-chg::before { content: attr(data-label) " "; font-family: var(--font-body); color: var(--ink-3); }
  .cot-table .c-pos { order: 4; flex: 1 1 100%; min-width: 0; }
}
@media (max-width: 560px) {
  .cot-chips { flex: 1 1 100%; }
  .cot-chips button { flex: 1 1 auto; padding-inline: 10px; white-space: nowrap; }
  .cot-select, .cot-pick { flex: 1 1 auto; min-width: 0; }
  .cot-groups tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cot-head { padding: 18px; }
  .cot-chart { padding: 14px 12px 12px; }
}

/* ── Oil and gas inventories (energy.html, 2026-11-01): EIA weekly stocks ── */
/* The charts are ink only: the site's chart colours keep their ECP meanings, so the lines, the
   five-year band and the range bars are shades of --ink. Cyan marks only the picked series. */
.nrg-week { margin: 0 0 22px; text-align: center; font-size: clamp(1.25rem, 2.4vw, 1.6rem); letter-spacing: -0.02em; }
.nrg-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.nrg-card {
  display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; text-align: left;
  font: inherit; color: var(--ink); cursor: pointer;
  border: 1px solid var(--edge); border-radius: var(--radius); background: var(--fill);
  transition: border-color .25s, background-color .25s, transform .25s var(--ease);
}
.nrg-card:hover { border-color: var(--edge-hi); transform: translateY(-2px); }
.nrg-card[aria-pressed="true"] { border-color: var(--edge-hi); background: var(--fill-2); box-shadow: inset 0 -2px 0 var(--cyan); }
.nrg-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 500 .72rem/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.nrg-card-top b { font-weight: 600; color: var(--ink); }
.nrg-card-top span { white-space: nowrap; letter-spacing: .02em; text-transform: none; }
.nrg-card-ch { font-size: .95rem; color: var(--ink-2); }
.nrg-card-ch b {
  padding-right: .06em;
  font: 600 clamp(2rem, 3.4vw, 2.6rem)/1.1 var(--font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
  background: var(--accent); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nrg-card-what, .nrg-card-level { font-size: .88rem; line-height: 1.5; color: var(--ink-2); }
.nrg-range { position: relative; display: block; height: 14px; margin-top: 4px; }
.nrg-range::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 2px; background: var(--rule); }
.nrg-range-band { position: absolute; top: 3px; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 22%, transparent); }
.nrg-range-avg { position: absolute; top: 0; width: 2px; height: 14px; margin-left: -1px; border-radius: 1px; background: var(--ink-2); }
.nrg-range-dot { position: absolute; top: 2px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--bg); }
.nrg-range-ends { font: .74rem/1.4 var(--font-mono); color: var(--ink-3); }
@media (max-width: 900px) { .nrg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .nrg-cards { grid-template-columns: minmax(0, 1fr); } }

.nrg-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--edge); border-radius: 12px; background: var(--fill); }
.nrg-chips button {
  padding: 7px 12px; border: 0; border-radius: 8px; background: transparent;
  color: var(--ink-2); font: inherit; font-size: .88rem; cursor: pointer; transition: color .2s, background-color .2s;
}
.nrg-chips button:hover { color: var(--ink); }
.nrg-chips button[aria-pressed="true"] { color: var(--ink); background: var(--fill-2); box-shadow: inset 0 -2px 0 var(--cyan); }
:is(.nrg-card, .nrg-chips button, .nrg-src):focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.nrg-picks-center { width: fit-content; margin: 0 auto 18px; }
.nrg-controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
@media (max-width: 560px) {
  .nrg-picks, .nrg-picks-center { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .nrg-spans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .nrg-chips button { padding-inline: 6px; }
}
@media (max-width: 420px) { .nrg-picks, .nrg-picks-center { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The charts are drawn by energy-charts.js at the box's width, so their text stays one size. */
.nrg-chart { min-height: 220px; touch-action: pan-y; }
.nrg-svg { width: 100%; height: auto; }
.nrg-ax { font: .7rem var(--font-mono); fill: var(--ink-3); }
.nrg-grid { stroke: var(--rule-soft); }
.nrg-axis, .nrg-tick { stroke: var(--rule); }
.nrg-band { fill: color-mix(in srgb, var(--ink) 11%, transparent); }
.nrg-avg { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 5 4; }
.nrg-prev { fill: none; stroke: var(--ink-2); stroke-width: 1.25; opacity: .55; }
.nrg-cur, .nrg-line { fill: none; stroke: var(--ink); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.nrg-line { stroke-width: 1.5; }
.nrg-area { fill: color-mix(in srgb, var(--ink) 6%, transparent); }
.nrg-end, .nrg-hover-dot { fill: var(--ink); stroke: var(--plate-bg); stroke-width: 2; }
.nrg-hover { stroke: var(--ink-3); }
.nrg-hit { fill: transparent; cursor: crosshair; }
.nrg-tip {
  position: absolute; top: 10px; z-index: 2; display: flex; flex-direction: column; gap: 2px;
  padding: 9px 11px; border: 1px solid var(--edge-hi); border-radius: 10px; pointer-events: none;
  background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: .76rem/1.45 var(--font-mono); color: var(--ink-2); white-space: nowrap;
}
.nrg-tip[hidden] { display: none; }
.nrg-tip b { color: var(--ink); font-weight: 600; }
.nrg-tip span { display: flex; justify-content: space-between; gap: 14px; }
.nrg-tip i { font-style: normal; color: var(--ink-3); }
.nrg-key b { font-weight: inherit; }
.nrg-sw-cur { color: var(--ink); }
.nrg-sw-prev { color: var(--ink-2); opacity: .55; height: 2px; }
.nrg-sw-band { width: 14px; height: 10px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 11%, transparent); }
.nrg-read { flex: 1 1 320px; min-width: 0; color: var(--ink-2); }
.nrg-src { font-size: .84rem; color: var(--ink-2); white-space: nowrap; }
.nrg-steps { max-width: 760px; margin: 0 auto; }
.nrg-steps b { font-weight: 600; color: var(--ink); }

/* ── Treasury yield curve (yields.html, 2026-11-01): Treasury par yields ── */
/* The charts are drawn by yield-curve.js and painted here, in ink only (the site's chart colours
   stand for ECP's markers and equity): the latest line solid and heavy, earlier days lighter and
   dashed, inverted stretches a pale band with the area below zero filled. */
.yc-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px; }
.yc-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--edge); border-radius: 12px; background: var(--fill); }
.yc-chips button {
  padding: 7px 12px; border: 0; border-radius: 8px; background: transparent;
  color: var(--ink-2); font: inherit; font-size: .88rem; line-height: 1.3; cursor: pointer; transition: color .2s, background-color .2s;
}
.yc-chips button:hover { color: var(--ink); }
.yc-chips button[aria-pressed="true"] { color: var(--ink); background: var(--fill-2); box-shadow: inset 0 -2px 0 var(--cyan); }
.yc-pick {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 4px 4px 14px;
  border: 1px solid var(--edge-hi); border-radius: 12px; background: var(--fill); font-size: .88rem; color: var(--ink-2);
}
.yc-pick input { min-height: 34px; min-width: 0; padding: 0 8px; border: 0; border-radius: 8px; background: var(--fill-2); color: var(--ink); font: .86rem var(--font-mono); }
:is(.yc-chips button, .yc-pick input, .yc-chart, .yc-go, .yc-x):focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.yc-plate .plate-inner { padding: 14px 8px 6px; }
.yc-chart { position: relative; cursor: crosshair; touch-action: pan-y; }
.yc-chart svg { width: 100%; height: auto; overflow: visible; }
.yc-chart .yc-grid { stroke: var(--rule-soft); }
.yc-chart .yc-grid.zero { stroke: var(--ink-3); }
.yc-chart .yc-tick { stroke: var(--rule); }
.yc-chart .yc-axis { fill: var(--ink-3); font: .7rem var(--font-mono); }
.yc-line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.yc-line.yc-now { stroke: var(--ink); stroke-width: 2.2; }
.yc-line.yc-w { stroke: var(--ink-2); stroke-width: 1.5; }
.yc-line.yc-m { stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 6 4; }
.yc-line.yc-y { stroke: var(--ink-3); stroke-width: 2; stroke-dasharray: .5 4.5; }
.yc-line.yc-p { stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 10 3 2 3; }
.yc-spread-chart .yc-line.yc-now { stroke-width: 1.3; }
.yc-dot { fill: var(--ink); }
.yc-guide { stroke: var(--ink-3); stroke-dasharray: 2 3; }
.yc-hit { fill: var(--plate-bg); stroke: var(--ink-2); stroke-width: 1.8; }
.yc-hit.yc-now { stroke: var(--ink); }
.yc-band { fill: var(--ink); opacity: .07; }
.yc-neg { fill: var(--ink); opacity: .22; }
.yc-readout {
  position: absolute; z-index: 2; display: grid; gap: 3px; min-width: 156px; padding: 10px 12px;
  border: 1px solid var(--edge-hi); border-radius: 10px; background: var(--glass); box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: .78rem/1.35 var(--font-mono); color: var(--ink); pointer-events: none; white-space: nowrap;
}
.yc-readout[hidden] { display: none; }
.yc-readout b { margin-bottom: 2px; font: 600 .82rem/1.3 var(--font-body); }
.yc-readout span { display: flex; align-items: center; gap: 8px; }
.yc-readout em { flex: 1; font-style: normal; color: var(--ink-3); }
.yc-key { display: flex; flex-wrap: wrap; gap: 4px 16px; font: .76rem/1.4 var(--font-mono); }
.yc-key > span { display: inline-flex; align-items: center; gap: 7px; }
.yc-sw-line { width: 24px; height: 8px; flex: none; overflow: visible; }
.yc-sw { display: inline-block; flex: none; width: 14px; height: 10px; border-radius: 2px; }
.yc-sw.band { background: color-mix(in srgb, var(--ink) 16%, transparent); }
.yc-x {
  display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 1px solid var(--edge-hi);
  border-radius: 50%; background: var(--fill); color: var(--ink-2); font: 1rem/1 var(--font-body); cursor: pointer;
}
.yc-x:hover { color: var(--ink); background: var(--fill-2); }
.yc-note { color: var(--ink-3); }

.yc-table-wrap { max-width: 820px; margin: 28px auto 0; overflow-x: auto; }
.yc-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--edge); border-radius: 14px; background: var(--fill);
  font: .86rem var(--font-mono); font-variant-numeric: tabular-nums;
}
.yc-table caption { caption-side: top; padding: 0 0 10px; text-align: left; font: 500 .95rem/1.4 var(--font-body); color: var(--ink); }
.yc-table caption span { margin-left: 6px; font: .78rem var(--font-mono); color: var(--ink-3); }
.yc-table :is(th, td) { padding: 9px 14px; border-bottom: 1px solid var(--edge); text-align: left; vertical-align: top; }
.yc-table thead th {
  vertical-align: bottom; font: 500 .7rem/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.yc-table thead th span { display: block; margin-top: 3px; letter-spacing: .02em; text-transform: none; }
.yc-table tbody th { font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.yc-table td { color: var(--ink-2); }
.yc-table .num { text-align: right; }
.yc-table tbody tr:last-child > * { border-bottom: 0; }
.yc-table tbody tr:hover > * { background: var(--fill); }
.yc-curve-table td:nth-child(2) { color: var(--ink); font-weight: 600; }

.yc-inv { max-width: 820px; margin: clamp(44px, 6vw, 72px) auto 0; }
.yc-inv-head { margin-bottom: 14px; font-size: 1.3rem; }
.yc-inv-head span { font: 500 .8rem var(--font-mono); letter-spacing: 0; color: var(--ink-3); }
.yc-inv-table .c-a, .yc-inv-table .c-z { color: var(--ink); }
.yc-inv-table .c-lo b { font-weight: 600; color: var(--ink); }
.yc-inv-table .c-lo span { display: block; font-size: .76rem; color: var(--ink-3); }
.yc-go {
  padding: 5px 12px; border: 1px solid var(--edge-hi); border-radius: 8px; background: var(--fill);
  color: var(--ink); font: .82rem var(--font-body); cursor: pointer; transition: background-color .2s;
}
.yc-go:hover { background: var(--fill-2); }
.yc-empty td { padding: 24px; text-align: center; color: var(--ink-3); }
.yc-read { max-width: 760px; margin: 0 auto; }
.yc-read b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Phones: each stretch becomes a card, its two dates beside Show, the figures below. */
@media (max-width: 640px) {
  .yc-inv-table thead { display: none; }
  .yc-inv-table, .yc-inv-table tbody { display: block; }
  .yc-inv-table tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "a go" "z go" "n n" "lo lo";
    gap: 2px 12px; padding: 12px 14px; border-bottom: 1px solid var(--edge);
  }
  .yc-inv-table tbody tr:last-child { border-bottom: 0; }
  .yc-inv-table :is(td, tbody tr:last-child > td) { padding: 0; border: 0; text-align: left; }
  .yc-inv-table tbody tr:hover > * { background: none; }
  .yc-inv-table .c-a { grid-area: a; }
  .yc-inv-table .c-z { grid-area: z; }
  .yc-inv-table .c-z::before { content: "to "; color: var(--ink-3); }
  .yc-inv-table .c-go { grid-area: go; align-self: center; }
  .yc-inv-table .c-n { grid-area: n; margin-top: 6px; }
  .yc-inv-table .c-lo { grid-area: lo; }
  .yc-inv-table :is(.c-n, .c-lo) { font-size: .8rem; }
  .yc-inv-table .c-lo span { display: inline; margin-left: 6px; }
  .yc-inv-table td[data-label]::before { content: attr(data-label) " "; font-family: var(--font-body); color: var(--ink-3); }
  .yc-empty { display: block; }
}
@media (max-width: 560px) {
  .yc-controls { align-items: stretch; }
  .yc-chips { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); flex: 1 1 100%; }
  .yc-chips button { padding-inline: 6px; font-size: .84rem; }
  .yc-pick { flex: 1 1 100%; justify-content: space-between; }
  .yc-plate .plate-inner { padding: 10px 2px 4px; }
  .yc-table { font-size: .8rem; }
  .yc-table :is(th, td) { padding: 8px 7px; }
}

/* ── Economic calendar (calendar.html, 2026-11-01): BLS and BEA releases ── */
/* The next release, with a countdown. */
.mac-next-band { padding: clamp(16px, 3vw, 32px) 0 clamp(48px, 7vw, 88px); }
.mac-next {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; align-items: center; gap: 18px 32px;
  padding: 26px 30px; border: 1px solid var(--edge); border-radius: 18px; background: var(--glass); box-shadow: var(--shadow);
}
.mac-k { display: block; margin-bottom: 10px; font: 500 .72rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.mac-next-name { display: block; font: 600 clamp(1.25rem, 2.2vw, 1.6rem)/1.2 var(--font-display); letter-spacing: -0.02em; color: var(--ink); }
.mac-next-name span { font-weight: 400; color: var(--ink-3); }
.mac-next-ref { display: block; margin-top: 6px; font-size: .92rem; line-height: 1.45; color: var(--ink-2); }
.mac-next-when { display: flex; flex-direction: column; gap: 4px; }
.mac-next-day { font-weight: 600; color: var(--ink); }
.mac-next-time { font: .86rem var(--font-mono); color: var(--ink-2); }
.mac-next-count { display: flex; gap: 10px; }
.mac-next-count span {
  display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 11px 8px 9px;
  border: 1px solid var(--edge); border-radius: 12px; background: var(--fill);
  font: 500 .7rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.mac-next-count b { margin-bottom: 7px; font: 600 1.6rem/1 var(--font-mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.mac-none { margin: 0; text-align: center; color: var(--ink-3); }
@media (max-width: 900px) {
  .mac-next { grid-template-columns: minmax(0, 1fr) auto; }
  .mac-next-what { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .mac-next { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; }
  .mac-next-count span { flex: 1 1 0; min-width: 0; }
}

/* Controls: chips and selects, as on the insider page. */
.mac-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.mac-select {
  min-height: 42px; padding: 0 14px; border: 1px solid var(--edge-hi); border-radius: 10px;
  background: var(--fill); color: var(--ink); font: inherit; font-size: .93rem; cursor: pointer;
}
.mac-select option { background: var(--card); color: var(--ink); }
.mac-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--edge); border-radius: 12px; background: var(--fill); }
.mac-chips button {
  padding: 7px 12px; border: 0; border-radius: 8px; background: transparent;
  color: var(--ink-2); font: inherit; font-size: .88rem; cursor: pointer; transition: color .2s, background-color .2s;
}
.mac-chips button:hover { color: var(--ink); }
.mac-chips button[aria-pressed="true"] { color: var(--ink); background: var(--fill-2); box-shadow: inset 0 -2px 0 var(--cyan); }
.mac-ics { margin-left: auto; }
.mac-ics:disabled { opacity: .5; cursor: default; transform: none; }
:is(.mac-select, .mac-chips button, .mac-tile, .mac-plot):focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
@media (max-width: 560px) {
  .mac-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 1 1 100%; }
  .mac-chips:not([data-mac-spans]) button:first-child { grid-column: 1 / -1; }  /* Everything, then the four topics 2 × 2 */
  .mac-chips[data-mac-spans] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .mac-chips button { padding-inline: 6px; }
  .mac-select { flex: 1 1 0; min-width: 0; }
  .mac-ics { flex: 1 1 0; margin-left: 0; }
  .mac-pick { flex: 1 1 100%; }
}
@media (max-width: 400px) { .mac-controls > :is(.mac-select, .mac-ics) { flex-basis: 100%; } }

/* Coming up: one row a release, grouped by month. */
.mac-cal { list-style: none; margin: 0; padding: 0; border: 1px solid var(--edge); border-radius: 14px; background: var(--fill); }
.mac-month { padding: 16px 18px 8px; font: 500 .7rem/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.mac-month:not(:first-child) { border-top: 1px solid var(--edge); }
.mac-ev {
  display: grid; grid-template-columns: 54px minmax(0, 1fr) 150px 96px 56px; align-items: center; gap: 18px;
  padding: 12px 18px; border-top: 1px solid var(--rule-soft);
}
.mac-month + .mac-ev { border-top: 0; }
.mac-ev-date {
  display: flex; flex-direction: column; align-items: center; padding: 6px 0 5px;
  border: 1px solid var(--edge); border-radius: 10px; background: var(--fill);
  font: 500 .7rem/1.25 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.mac-ev-date b { font: 600 1.25rem/1.15 var(--font-display); letter-spacing: -0.02em; color: var(--ink); }
.mac-ev-main { min-width: 0; }
.mac-ev-name, .mac-ev-ref { display: block; }
.mac-ev-name { font-weight: 600; line-height: 1.35; color: var(--ink); }
.mac-ev-nick { margin-left: 4px; font-size: .86rem; font-weight: 400; color: var(--ink-3); }
.mac-ev-ref { margin-top: 2px; font-size: .86rem; line-height: 1.4; color: var(--ink-2); }
.mac-ev-meta { display: contents; }
.mac-ev-time, .mac-ev-in { font: .84rem var(--font-mono); color: var(--ink-3); }
.mac-ev-time b { font-weight: 600; color: var(--ink); }
.mac-ev-in { color: var(--ink-2); }
.mac-ev-src { justify-self: end; font-size: .84rem; color: var(--ink-2); white-space: nowrap; }
.mac-empty { padding: 28px; text-align: center; color: var(--ink-3); }
@media (max-width: 760px) {
  .mac-ev { grid-template-columns: 48px minmax(0, 1fr); gap: 6px 14px; padding: 12px 14px; align-items: start; }
  .mac-ev-date { grid-row: span 2; }
  .mac-ev-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
  .mac-ev-src { margin-left: auto; }
}

/* The latest figures: one tile a figure. */
.mac-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mac-tile {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 18px;
  text-align: left; font: inherit; color: var(--ink); cursor: pointer;
  border: 1px solid var(--edge); border-radius: 18px; background: var(--fill);
  transition: border-color .25s, transform .25s var(--ease);
}
.mac-tile:hover { border-color: var(--edge-hi); transform: translateY(-2px); }
.mac-tile::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -40%), color-mix(in srgb, var(--cyan) 16%, transparent), transparent 60%);
  opacity: 0; transition: opacity .35s;
}
.mac-tile:hover::after { opacity: 1; }
.mac-t-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mac-t-name { font-weight: 600; font-size: .98rem; line-height: 1.3; }
.mac-t-ag { font: 500 .7rem/1 var(--font-mono); letter-spacing: .12em; color: var(--ink-3); }
.mac-t-v {
  margin: 8px 0 2px; font: 600 clamp(2.1rem, 3.6vw, 2.75rem)/1.05 var(--font-display); letter-spacing: -0.045em;
  background: var(--accent); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mac-t-lab { font-size: .84rem; line-height: 1.45; color: var(--ink-3); }
.mac-t-lab .tag, .mac-table .tag { margin-left: 4px; font-size: .7rem; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.mac-t-d { font: 500 .86rem/1.4 var(--font-mono); color: var(--ink-2); }
.mac-arrow { font-size: max(.72em, .7rem); }
.mac-t-sub { font-size: .88rem; line-height: 1.4; color: var(--ink-2); }
.mac-t-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--rule-soft); font-size: .8rem; line-height: 1.45; color: var(--ink-3); }
@media (max-width: 900px) { .mac-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mac-tiles { grid-template-columns: minmax(0, 1fr); } }

/* History: one series in ink (chart colour is kept for ECP's own charts), a crosshair, a table. */
.mac-chart { margin: 0 0 18px; padding: 18px 18px 12px; border: 1px solid var(--edge); border-radius: 14px; background: var(--fill); }
.mac-chart-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 10px; }
.mac-chart-name { font-weight: 600; color: var(--ink); }
.mac-chart-what { font-size: .86rem; color: var(--ink-3); }
.mac-plot { position: relative; touch-action: pan-y; border-radius: 8px; cursor: crosshair; }
.mac-svg { width: 100%; height: auto; }
.mac-grid line { stroke: var(--edge); stroke-width: 1; shape-rendering: crispEdges; }
.mac-grid line.zero, .mac-grid line.tick { stroke: var(--edge-hi); }
.mac-grid text, .mac-cutlabel { fill: var(--ink-3); font: 500 .7rem var(--font-mono); }
.mac-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mac-line.draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.4s var(--ease) forwards; }
.mac-end, .mac-dot { fill: var(--ink); stroke: var(--bg); stroke-width: 2; }
.mac-end.draw { opacity: 0; transform-box: fill-box; transform-origin: center; animation: pop .5s var(--ease) 1.2s forwards; }
.mac-bar { fill: var(--candle); transition: opacity .15s; }
.mac-bar.cut { fill: var(--ink); }
.mac-marks:has(.mac-bar.on) .mac-bar:not(.on) { opacity: .4; }
.mac-cross { stroke: var(--ink-3); stroke-width: 1; }
.mac-tip {
  position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 2px; max-width: 230px; padding: 9px 12px;
  border: 1px solid var(--edge-hi); border-radius: 10px; background: var(--card); box-shadow: var(--shadow);
  font-size: .8rem; line-height: 1.4; color: var(--ink-2); pointer-events: none;
}
.mac-tip[hidden], .mac-chart-note[hidden], .mac-table th[hidden], .mac-more .btn[hidden] { display: none; }
.mac-tip b { font: 600 1.05rem/1.2 var(--font-display); color: var(--ink); }
.mac-chart-note { margin: 8px 0 0; font-size: .78rem; color: var(--ink-3); }
.mac-table {
  width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--edge); border-radius: 14px;
  background: var(--fill); font-size: .9rem; font-variant-numeric: tabular-nums;
}
.mac-table :is(th, td) { padding: 10px 16px; border-bottom: 1px solid var(--edge); text-align: left; }
.mac-table thead th { font: 500 .7rem/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.mac-table tbody th { font-weight: 500; color: var(--ink); white-space: nowrap; }
.mac-table td { font-family: var(--font-mono); color: var(--ink-2); }
.mac-table .num { text-align: right; }
.mac-table tbody tr:last-child > * { border-bottom: 0; }
.mac-more { display: flex; justify-content: center; margin-top: 16px; }
.mac-read { max-width: 760px; margin: 0 auto; }
@media (max-width: 560px) {
  .mac-chart { padding: 14px 10px 10px; }
  .mac-table { font-size: .82rem; }
  .mac-table :is(th, td) { padding: 8px 10px; }
}

/* ── Big funds (13f.html, 2026-11-01): SEC Form 13F holdings ───────────── */
/* Reuses the insider page's controls (.ins-select, .ins-chips, .ins-search, .ins-tk) and its
   table, which turns into cards at 900 px and below. Figures stay in ink, as on the other
   Reading Room pages: the sign says bought or sold, and no colour reads as a signal. */
.f13-quarter { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; margin-top: 26px; }
.f13-quarter label { font: 500 .72rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.f13-quarter .ins-select { min-width: 0; max-width: 100%; }
.f13-lag { max-width: 62ch; margin: 14px auto 0; font-size: .86rem; line-height: 1.55; color: var(--ink-3); }

.f13-flow-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 18px; }
.f13-flow-note { flex: 1 1 280px; margin: 0; font-size: .86rem; line-height: 1.5; color: var(--ink-3); }
.f13-flows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.f13-flow { padding: 18px 20px 6px; border: 1px solid var(--edge); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.f13-flow h3, .f13-rh { margin: 0 0 6px; font: 500 .72rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.f13-rank { list-style: none; margin: 0; padding: 0; }
.f13-rank li { display: grid; grid-template-columns: 2.4ch minmax(0, 1fr) auto auto; align-items: baseline; gap: 4px 14px; padding: 11px 0; border-top: 1px solid var(--edge); }
.f13-rank li:first-child { border-top: 0; }
.f13-rk { font: .78rem var(--font-mono); color: var(--ink-3); text-align: right; }
.f13-sec { min-width: 0; }
.f13-sec .ins-tk, .f13-hit-top .ins-tk { margin-right: 8px; }
.f13-nm { color: var(--ink-2); font-size: .88rem; line-height: 1.4; overflow-wrap: anywhere; }
.f13-cls { font: .72rem var(--font-mono); color: var(--ink-3); white-space: nowrap; }
.f13-note { display: block; margin-top: 2px; font-size: .76rem; line-height: 1.4; color: var(--ink-3); }
.f13-cnt { font-size: .82rem; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.f13-cnt b { font-weight: 600; color: var(--ink); }
.f13-net { font: 600 .9rem var(--font-mono); text-align: right; white-space: nowrap; color: var(--ink); }
@media (max-width: 980px) { .f13-flows { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .f13-flow { padding: 14px 14px 4px; }
  .f13-rank li { grid-template-columns: 2.4ch minmax(0, 1fr) auto; gap: 4px 10px; }
  .f13-rank .f13-net { grid-column: 3; grid-row: 1; }
  .f13-rank .f13-cnt { grid-column: 2 / 4; grid-row: 2; white-space: normal; }
}

.f13-pickers { margin-bottom: 22px; }
.f13-group + .f13-group { margin-top: 18px; }
.f13-group .f13-rh { margin-bottom: 10px; }
.f13-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.f13-pick {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; text-align: left;
  border: 1px solid var(--edge); border-radius: 12px; background: var(--fill); color: var(--ink);
  font: inherit; cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.f13-pick b { font-size: .92rem; font-weight: 600; line-height: 1.3; }
.f13-pick-who, .f13-pick-st { font-size: .76rem; line-height: 1.35; color: var(--ink-3); }
.f13-pick:hover { border-color: var(--edge-hi); }
.f13-pick[aria-pressed="true"] { background: var(--fill-2); border-color: color-mix(in srgb, var(--cyan) 50%, transparent); box-shadow: inset 0 -2px 0 var(--cyan); }
.f13-pick[data-none] b { color: var(--ink-2); }
@media (max-width: 1024px) { .f13-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .f13-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.f13-panel { padding: clamp(16px, 3vw, 26px); border: 1px solid var(--edge); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.f13-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; margin-bottom: 18px; }
.f13-head h3 { margin: 0; font-size: 1.35rem; letter-spacing: -0.02em; }
.f13-meta { margin: 4px 0 0; font-size: .86rem; line-height: 1.45; color: var(--ink-3); }
.f13-sum { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.f13-sum b { font: 600 1.6rem/1.1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.f13-sum span { font-size: .82rem; color: var(--ink-3); }
.f13-sum a { margin-top: 2px; font-size: .84rem; color: var(--ink-2); }
.f13-tabs { margin-bottom: 14px; }
.f13-tabs button span { font: max(.78em, .7rem) var(--font-mono); color: var(--ink-3); }
.f13-table :is(.c-sh, .c-ch, .c-w) { font: .86rem var(--font-mono); color: var(--ink-2); }
.f13-table .c-ch .tag { font-size: .7rem; color: var(--ink-2); }
.f13-empty, .f13-small { font-size: .86rem; line-height: 1.5; color: var(--ink-3); }
.f13-empty { margin: 10px 0; }
.f13-small { margin: 14px 0 0; }
.f13-small.f13-fund-note { margin: -6px 0 14px; }
@media (max-width: 900px) {
  /* The stock and its value on the first line, shares, change and weight on the second. */
  .f13-table .c-co { flex: 1 1 calc(100% - 120px); }
  .f13-table :is(.c-sh, .c-ch, .c-w) { order: 4; font-size: .8rem; }
}
@media (max-width: 560px) {
  .f13-sum { align-items: flex-start; text-align: left; }
}

.f13-results .f13-rh { margin-top: 18px; }
.f13-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.f13-chip {
  padding: 6px 12px; border: 1px solid var(--edge); border-radius: 999px; background: var(--fill);
  color: var(--ink); font: inherit; font-size: .84rem; text-align: left; cursor: pointer; transition: border-color .2s var(--ease);
}
.f13-chip span { color: var(--ink-3); }
.f13-chip:hover { border-color: var(--edge-hi); }
.f13-hits { list-style: none; margin: 0; padding: 0; border: 1px solid var(--edge); border-radius: var(--radius); background: var(--card); }
.f13-hits li { padding: 14px 18px; border-top: 1px solid var(--edge); }
.f13-hits li:first-child { border-top: 0; }
.f13-hit-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.f13-hit-top .f13-net { margin-left: auto; }
.f13-hit-line { margin: 6px 0 8px; font-size: .86rem; line-height: 1.5; color: var(--ink-2); }
:is(.f13-pick, .f13-chip):focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ── Overnight rates (overnight.html, 2026-11-02): New York Fed markets data ── */
/* Reuses the yield page's controls (.yc-controls, .yc-chips), plates, chart primitives, readout,
   key and tables. The charts are drawn by overnight-rates.js and painted here in ink only (the
   site's chart colours stand for ECP's markers and equity): the rate solid, the middle half of
   the day's trades a mid tone, the 1st to 99th percentile and the target range pale. */
.ovn-corridor { max-width: 980px; margin: 0 auto; }
.ovn-range-note { margin: 0 0 14px; text-align: center; font: .84rem/1.6 var(--font-mono); color: var(--ink-2); }
.ovn-range-note b { font-weight: 600; color: var(--ink); }
:is(.ovn-range-note, .ovn-sub) > span { white-space: nowrap; }
.ovn-rows { display: grid; gap: 8px; }
/* Fixed outer columns, so the scale's empty cells match the rows' and its track lines up. */
.ovn-row, .ovn-axis {
  display: grid; grid-template-columns: 13.5rem minmax(0, 1fr) 9rem;
  grid-template-areas: "name track fig" "name sub fig"; column-gap: 20px; align-items: center;
}
.ovn-row {
  width: 100%; padding: 12px 16px; border: 1px solid var(--edge); border-radius: 14px; background: var(--fill);
  color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color .2s, border-color .2s;
}
.ovn-row:hover { background: var(--fill-2); border-color: var(--edge-hi); }
.ovn-row:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.ovn-name { grid-area: name; display: grid; gap: 2px; min-width: 0; }
.ovn-name b { font: 600 1rem/1.3 var(--font-body); color: var(--ink); }
.ovn-name span { font-size: .8rem; line-height: 1.35; color: var(--ink-3); }
.ovn-track { grid-area: track; display: block; min-width: 0; }
.ovn-track svg { display: block; width: 100%; height: auto; overflow: visible; }
.ovn-sub { grid-area: sub; min-width: 0; margin-top: 4px; font: .74rem/1.4 var(--font-mono); color: var(--ink-3); }
.ovn-fig { grid-area: fig; display: grid; gap: 2px; text-align: right; }
.ovn-fig b { font: 600 1.25rem/1.2 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.ovn-fig span { font: .76rem/1.35 var(--font-mono); color: var(--ink-3); }
/* The scale under the rows lines up with their tracks: the rows' padding plus their border. */
.ovn-axis { grid-template-areas: "name track fig"; padding: 4px 17px 0; }
.ovn-axis .yc-tick { stroke: var(--ink-3); }
.ovn-axis .yc-axis { fill: var(--ink-3); font: .7rem var(--font-mono); }
.ovn-key { justify-content: center; margin: 14px 0 0; }
.ovn-range { fill: var(--ink); opacity: .08; }
.ovn-edge { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.ovn-tail { stroke: var(--ink-2); stroke-width: 1.5; stroke-linecap: round; }
.ovn-iqr { fill: var(--ink); opacity: .35; }
.ovn-dot { fill: var(--ink); }
.ovn-sw { display: inline-block; flex: none; width: 14px; height: 10px; border-radius: 2px; }
.ovn-sw.dot { width: 10px; border-radius: 50%; background: var(--ink); }
.ovn-sw.iqr { background: color-mix(in srgb, var(--ink) 32%, transparent); }
.ovn-sw.tail { height: 2px; border-radius: 1px; background: var(--ink-2); }
.ovn-sw.tailband { background: color-mix(in srgb, var(--ink) 12%, transparent); }
.ovn-sw.range { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.ovn-sw.rangebox { background: color-mix(in srgb, var(--ink) 5%, transparent); border: 1px dashed var(--ink-3); }
.ovn-sw.edge { width: 0; height: 12px; border-left: 1px dashed var(--ink-3); border-radius: 0; }
.ovn-sw.bar { width: 4px; height: 12px; border-radius: 1px; background: color-mix(in srgb, var(--ink) 70%, transparent); }
.ovn-sw.layer { box-shadow: inset 0 0 0 1px var(--edge-hi); }
.ovn-sw.layer.l0 { background: color-mix(in srgb, var(--ink) 55%, transparent); }
.ovn-sw.layer.l1 { background: color-mix(in srgb, var(--ink) 34%, transparent); }
.ovn-sw.layer.l2 { background: color-mix(in srgb, var(--ink) 18%, transparent); }
.ovn-sw.layer.l3 { background: color-mix(in srgb, var(--ink) 7%, transparent); }

.yc-chart .ovn-range { opacity: .05; stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.ovn-target { stroke: var(--ink-3); stroke-width: 1.2; stroke-dasharray: 4 3; }
.ovn-tail-area { fill: var(--ink); opacity: .12; }
.ovn-iqr-area { fill: var(--ink); opacity: .26; }
.yc-line.ovn-rate-line { stroke-width: 1.4; }
.ovn-vol { fill: var(--ink); opacity: .22; }
.yc-chart .ovn-pane-label { fill: var(--ink-3); }
.ovn-area { fill: var(--ink); opacity: .14; }
.ovn-bars { fill: none; stroke: var(--ink); opacity: .72; }
.ovn-layer { fill: var(--ink); stroke: none; }
.ovn-layer.l0 { opacity: .55; }
.ovn-layer.l1 { opacity: .34; }
.ovn-layer.l2 { opacity: .18; }
.ovn-layer.l3 { opacity: .07; }
.ovn-about { max-width: 820px; margin: 16px auto 0; text-align: center; font-size: .92rem; color: var(--ink-2); }
.ovn-fine { max-width: 820px; margin: 28px auto 0; }

.ovn-minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 820px; margin: 20px auto 0; }
.ovn-mini { display: grid; gap: 2px; min-width: 0; padding: 14px 16px; border: 1px solid var(--edge); border-radius: 14px; background: var(--fill); }
.ovn-mini > span:first-child { font: 500 .7rem/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ovn-mini b { font: 600 1.15rem/1.3 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.ovn-mini > span:last-child { font-size: .8rem; line-height: 1.4; color: var(--ink-3); }
.ovn-soma-wrap { max-width: 640px; }
.ovn-soma-table td:nth-child(2) { color: var(--ink); }
.ovn-soma-table .ovn-total > * { font-weight: 600; color: var(--ink); }

/* Phones: each rate's name and figure on top, its track and spread under them. */
@media (max-width: 640px) {
  .ovn-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name fig" "track track" "sub sub"; row-gap: 8px; padding: 12px; }
  .ovn-axis { grid-template-columns: minmax(0, 1fr); grid-template-areas: "track"; padding: 2px 13px 0; }
  .ovn-axis > :not(.ovn-track) { display: none; }
  .ovn-sub { margin-top: 0; }
}
@media (max-width: 560px) {
  .ovn-minis { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ovn-mini { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; padding: 12px 14px; }
  .ovn-mini b { grid-column: 2; grid-row: 1 / span 2; text-align: right; }
}

/* ── Fails to deliver (ftd.html, 2026-11-02): SEC fails-to-deliver data ─── */
/* Reuses the insider page's controls (.ins-search, .ins-chips, .ins-select) and its table, which
   turns into cards at 900 px and below. The chart is ink only, as on the other Reading Room
   pages: a fail is a count of shares, and no colour reads as a signal. */
.ftd-table .ftd-open { padding: 0; border: 0; background: none; cursor: pointer; }
.ftd-table .c-co .ins-co { margin-top: 2px; }
.ftd-table .c-co .tag, .ftd-hit .tag, .ftd-id .tag { margin-left: 4px; font-size: .7rem; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.ftd-table .c-pk b { font: 600 .92rem var(--font-mono); color: var(--ink); }
.ftd-table :is(.c-lq, .c-n, .c-run, .c-h) { font: .86rem var(--font-mono); color: var(--ink-2); }
.ftd-sub { display: block; margin-top: 2px; font: .76rem var(--font-body); color: var(--ink-3); }
.ftd-open:focus-visible, .ftd-hit:focus-visible, .ftd-plot:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
@media (max-width: 900px) {
  /* The security and its most in a day on top (the name keeps all but the peak's width, so the
     rest wraps under them). */
  .ftd-table .c-co { flex: 1 1 calc(100% - 130px); }
  .ftd-table .c-pk { order: 2; text-align: right; }
  .ftd-table .c-run .ftd-sub { display: inline; margin: 0 0 0 4px; }
  .ftd-table :is(.c-lq, .c-n, .c-run, .c-h) { order: 4; font-size: .8rem; }
}
@media (max-width: 560px) {
  .ftd-kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The search: a list of matches under the box. */
.ftd-find { position: relative; display: flex; max-width: 560px; margin-bottom: 18px; }
.ftd-find .ins-search { flex: 1 1 auto; }
.ftd-hits {
  position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; right: 0; list-style: none; margin: 0; padding: 6px;
  border: 1px solid var(--edge-hi); border-radius: 12px; background: var(--card); box-shadow: var(--shadow);
}
.ftd-hits[hidden] { display: none; }
.ftd-hit {
  display: grid; grid-template-columns: minmax(5.5ch, auto) minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px;
  width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
}
.ftd-hit:hover, .ftd-hit:focus-visible { background: var(--fill-2); }
.ftd-hit b { font: 600 .92rem var(--font-mono); color: var(--cyan); }
.ftd-hit-name { min-width: 0; font-size: .88rem; line-height: 1.35; color: var(--ink-2); overflow-wrap: anywhere; }
.ftd-hit-yr { font: .78rem var(--font-mono); color: var(--ink-3); white-space: nowrap; }
.ftd-hit-was { grid-column: 2 / -1; font-size: .76rem; color: var(--ink-3); }
.ftd-hit-none { padding: 10px; font-size: .88rem; line-height: 1.45; color: var(--ink-3); }

/* One security: its head card, the span chips, the chart and its half-months. */
.ftd-panel { padding: clamp(16px, 3vw, 26px); border: 1px solid var(--edge); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.ftd-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 14px 28px; min-height: 64px; margin-bottom: 18px; }
.ftd-id { flex: 1 1 280px; min-width: 0; }
.ftd-id h3 { margin: 0; font-size: 1.3rem; line-height: 1.3; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.ftd-sym { margin-right: 4px; font: 600 1.15rem var(--font-mono); letter-spacing: .01em; color: var(--cyan); }
.ftd-meta { margin: 6px 0 0; font-size: .86rem; line-height: 1.45; color: var(--ink-3); }
.ftd-meta a { color: var(--ink-2); }
.ftd-facts { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); gap: 10px 26px; margin: 0; }
.ftd-facts div { min-width: 0; }
.ftd-facts dt { margin-bottom: 4px; font: 500 .7rem/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.ftd-facts dd { margin: 0; max-width: 24ch; font-size: .88rem; line-height: 1.45; color: var(--ink); }
.ftd-none { margin: 0; color: var(--ink-3); }
.ftd-spans { display: inline-flex; margin-bottom: 14px; }
.ftd-spans button:disabled { opacity: .4; cursor: default; }
.ftd-chart { margin: 0 0 18px; padding: 16px 16px 10px; border: 1px solid var(--edge); border-radius: 14px; background: var(--fill); }
.ftd-chart-what { margin-bottom: 8px; font-size: .86rem; color: var(--ink-3); }
.ftd-plot { position: relative; touch-action: pan-y; border-radius: 8px; cursor: crosshair; }
.ftd-svg { display: block; width: 100%; height: auto; }
.ftd-grid line { stroke: var(--edge); stroke-width: 1; shape-rendering: crispEdges; }
.ftd-grid line.zero, .ftd-grid line.tick { stroke: var(--edge-hi); }
.ftd-grid text, .ftd-cutlabel { fill: var(--ink-3); font: 500 .7rem var(--font-mono); }
.ftd-bar { fill: var(--candle); transition: opacity .15s; }
.ftd-bar.cut { fill: var(--ink); }
.ftd-marks:has(.ftd-bar.on) .ftd-bar:not(.on) { opacity: .4; }
.ftd-marks.grow { animation: fadein .6s var(--ease) both; }
.ftd-cross { stroke: var(--ink-3); stroke-width: 1; }
.ftd-tip {
  position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 2px; max-width: 240px; padding: 9px 12px;
  border: 1px solid var(--edge-hi); border-radius: 10px; background: var(--card); box-shadow: var(--shadow);
  font-size: .8rem; line-height: 1.4; color: var(--ink-2); pointer-events: none;
}
.ftd-tip[hidden], .ftd-chart-note[hidden], .ftd-panel .ins-more .btn[hidden] { display: none; }
.ftd-tip b { font: 600 1.05rem/1.2 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.ftd-chart-note { margin: 8px 0 0; font-size: .78rem; color: var(--ink-3); }
.ftd-hist {
  width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--edge); border-radius: 14px;
  background: var(--fill); font-size: .9rem; font-variant-numeric: tabular-nums;
}
.ftd-hist :is(th, td) { padding: 10px 16px; border-bottom: 1px solid var(--edge); text-align: left; }
.ftd-hist thead th { font: 500 .7rem/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ftd-hist tbody th { font-weight: 500; color: var(--ink); white-space: nowrap; }
.ftd-hist td { font-family: var(--font-mono); color: var(--ink-2); }
.ftd-hist .num { text-align: right; }
.ftd-hist tbody tr:last-child > * { border-bottom: 0; }
.ftd-panel .fineprint { margin-top: 18px; }
@media (max-width: 900px) {
  .ftd-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1 1 100%; }
}
@media (max-width: 560px) {
  .ftd-facts { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ftd-facts dd { max-width: none; }
  .ftd-chart { padding: 12px 8px 8px; }
  .ftd-spans { display: inline-flex; }
  .ftd-hist { font-size: .82rem; }
  .ftd-hist :is(th, td) { padding: 8px 10px; }
  .ftd-hit { grid-template-columns: minmax(5ch, auto) minmax(0, 1fr); }
  .ftd-hit-yr { grid-column: 2; }
}
@media (max-width: 400px) {
  /* The half-month table's three columns need about 300 px: the dates may wrap. */
  .ftd-panel { padding: 14px 12px; }
  .ftd-hist :is(th, td) { padding: 8px 7px; }
  .ftd-hist tbody th { white-space: normal; }
}

/* ── Ad-test palettes (2026-10-30, docs/DECISIONS.md revision 17) ─────── */
/* Pharos above is the default and the control. `?palette=harbour`, `lapis` or `lagoon` on any
   page sets data-palette on <html> for the rest of the visit (`?palette=pharos` resets it; the
   script is in each page's <head>). A palette sets the same tokens in four places: dark, light,
   and the inverted band in each, which takes the other theme's ground. Keep each band block in
   step with that palette's other theme. plates.js reads these too, so they stay hex. */

/* Harbour: midnight and a muted denim blue; signal orange (--pop) only on the italic words, the
   filled buttons and the small details (its --lamp). Dark ink on denim in the closing block. */
:root[data-palette="harbour"] {
  --cyan-deep: #5f84d2; --ice-deep: #8eabe8; --on-accent: #050a18;
  --pop: #ff7a1a; --on-pop: #1d0b00;
}
:root[data-palette="harbour"]:not([data-theme="light"]) {
  --bg: #04060d; --bg-2: #070a14; --card: #0b0f1c; --card-2: #0f1425; --plate-bg: #080b16;
  --ink: #eef1f8; --ink-2: #a9b1c7; --ink-3: #777f96; --candle: #b8bfd2;
  --rule: #1c2338; --rule-soft: #131a2c; --glass: rgba(11, 15, 28, .66);
  --cyan: #7b9be0; --ice: #a9c0ee; --beam: #ffffff;
  --pop-ink: #ff7a1a; --pop-ink-2: #ffa25c; --pop-beam: #ffe0c7; --lamp: #ff7a1a;
}
:root[data-palette="harbour"][data-theme="light"],
:root[data-palette="harbour"]:not([data-theme="light"]) .invert {
  --cyan: #2f55a4; --ice: #4a6fc0; --beam: #1c3a7a;
  --pop-ink: #d95a00; --pop-ink-2: #ec6c10; --pop-beam: #ff9a4d; --lamp: #9a3f00;
}
:root[data-palette="harbour"][data-theme="light"] .invert {
  --bg: #04060d; --bg-2: #070a14; --card: #0b0f1c; --card-2: #0f1425; --plate-bg: #080b16;
  --ink: #eef1f8; --ink-2: #a9b1c7; --ink-3: #777f96; --candle: #b8bfd2;
  --rule: #1c2338; --rule-soft: #131a2c; --glass: rgba(11, 15, 28, .66);
  --cyan: #7b9be0; --ice: #a9c0ee; --beam: #ffffff;
  --pop-ink: #ff7a1a; --pop-ink-2: #ffa25c; --pop-beam: #ffe0c7; --lamp: #ff7a1a;
}
:root[data-palette="harbour"] :is(h1, h2, .gallery-head h3) em {
  --cyan: var(--pop-ink); --ice: var(--pop-ink-2); --beam: var(--pop-beam);
}
:root[data-palette="harbour"] .btn-primary {
  background: var(--pop); color: var(--on-pop);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 30px -10px color-mix(in srgb, var(--pop) 80%, transparent);
}
:root[data-palette="harbour"] .btn-primary:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 16px 42px -12px var(--pop);
}

/* Lapis & Gold: a lapis ground with gold leaf, parchment and lapis ink in light. Chart gold
   (equilibrium, W) moves to orange so it stays apart from the gold accent, as on TradingView.
   Its details (--lamp) stay gold: the ground is its second colour. */
:root[data-palette="lapis"] {
  --cyan-deep: #c9982e; --ice-deep: #e6c46a; --on-accent: #1a1203;
}
:root[data-palette="lapis"]:not([data-theme="light"]),
:root[data-palette="lapis"][data-theme="light"] .invert {
  --bg: #040818; --bg-2: #071029; --card: #0b1736; --card-2: #0f1e44; --plate-bg: #081231;
  --ink: #f1ede2; --ink-2: #b4b6c8; --ink-3: #7f84a0; --candle: #c9cbe0;
  --rule: #1d2c5c; --rule-soft: #142250; --glass: rgba(11, 23, 54, .66);
  --cyan: #d9ad45; --ice: #f0d48a; --beam: #fff5d6; --gold: #ff8c42; --lamp: #d9ad45;
  --gold-text: #ff8c42;
}
:root[data-palette="lapis"][data-theme="light"],
:root[data-palette="lapis"]:not([data-theme="light"]) .invert {
  --bg: #f6f2e8; --bg-2: #f1ece0; --card: #fbf8f1; --card-2: #fbf8f1; --plate-bg: #fbf8f1;
  --ink: #0b1736; --ink-2: #3e4766; --ink-3: #5c6380; --candle: #1d2440;
  --rule: #ddd5c2; --rule-soft: #e9e2d2; --glass: rgba(251, 248, 241, .8);
  --cyan: #8a6512; --ice: #a87c1e; --beam: #6e4f0c; --gold: #c25a12; --lamp: #7a5810;
  --gold-text: #9a4300;
}

/* Lagoon (2026-11-03, the user's three colours): a deep cobalt (#0042ac) and a bright cyan
   (#00d3fb) as its two mains, and a loud green (#83fd80) only where Harbour puts its orange: the
   italic words, the filled buttons and the small details (its --lamp). The cyan is the accent on
   dark grounds and the cobalt on light ones; on light grounds the green turns deep for text. The
   closing block is solid cobalt, with white ink and the green button. */
:root[data-palette="lagoon"] {
  --cyan-deep: #00d3fb; --ice-deep: #8ff0ff; --on-accent: #001a40;
  --pop: #83fd80; --on-pop: #03270a;
}
:root[data-palette="lagoon"]:not([data-theme="light"]) {
  --bg: #030916; --bg-2: #050d1e; --card: #08142b; --card-2: #0c1a36; --plate-bg: #061128;
  --ink: #eef4ff; --ink-2: #a8b8d8; --ink-3: #7889ab; --candle: #b8c6e0;
  --rule: #14254a; --rule-soft: #0e1c3a; --glass: rgba(8, 20, 43, .66);
  --cyan: #00d3fb; --ice: #8ff0ff; --beam: #ffffff;
  --pop-ink: #83fd80; --pop-ink-2: #b9ffb5; --pop-beam: #ecffe9; --lamp: #83fd80;
}
:root[data-palette="lagoon"][data-theme="light"],
:root[data-palette="lagoon"]:not([data-theme="light"]) .invert {
  --cyan: #0042ac; --ice: #1d6fe0; --beam: #0042ac;
  --pop-ink: #127a2a; --pop-ink-2: #1c9438; --pop-beam: #3fbf5a; --lamp: #127a2a;
}
:root[data-palette="lagoon"][data-theme="light"] .invert {
  --bg: #030916; --bg-2: #050d1e; --card: #08142b; --card-2: #0c1a36; --plate-bg: #061128;
  --ink: #eef4ff; --ink-2: #a8b8d8; --ink-3: #7889ab; --candle: #b8c6e0;
  --rule: #14254a; --rule-soft: #0e1c3a; --glass: rgba(8, 20, 43, .66);
  --cyan: #00d3fb; --ice: #8ff0ff; --beam: #ffffff;
  --pop-ink: #83fd80; --pop-ink-2: #b9ffb5; --pop-beam: #ecffe9; --lamp: #83fd80;
}
:root[data-palette="lagoon"] :is(h1, h2, .gallery-head h3) em {
  --cyan: var(--pop-ink); --ice: var(--pop-ink-2); --beam: var(--pop-beam);
}
:root[data-palette="lagoon"] .btn-primary {
  background: var(--pop); color: var(--on-pop);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 30px -10px color-mix(in srgb, var(--pop) 70%, transparent);
}
:root[data-palette="lagoon"] .btn-primary:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 16px 42px -12px color-mix(in srgb, var(--pop) 90%, transparent);
}
:root[data-palette="lagoon"] .cta-final > .wrap {
  --on-accent: #ffffff;
  background: radial-gradient(90% 80% at 50% 0%, color-mix(in srgb, #00d3fb 26%, transparent), transparent 72%), #0042ac;
}
:root[data-palette="lagoon"] .cta-final .btn-primary { background: var(--pop); color: var(--on-pop); }