/* =========================================================================
   hedgeyourown — "Quant instrument" visual system.
   Dark blueprint console: a faint graph-paper field with opaque modules on top.
   Thesis = technical but friendly, encoded in type:
     · DATA is monospace (tickers, prices, metrics) — the terminal/quant register
     · WORDS are humanist sans — plain, warm, readable for a layperson
     · DISPLAY is a grotesque (Space Grotesk) — characterful, precise
   Mobile-first, dependency-free (one Google Fonts link, no build step).
   ========================================================================= */
:root {
  --bg: #05070d;          /* near-black monitor */
  --panel: #0b1018;       /* module surface */
  --panel-2: #0f1622;     /* inset / control surface */
  --ink: #e7eef5;
  --muted: #96a3b8;   /* lifted for WCAG AA contrast on the dark bg (audit) */
  --accent: #34d2ec;      /* vivid monitor cyan — brand / interactive */
  --accent-ink: #03151b;  /* text on accent */
  --hot: #ff5cae;         /* hot magenta — the speculative ("goofy") tier */
  --gold: #f0b24a;        /* signal warmth: plot markers, mascot */
  --good: #35e879;        /* phosphor green — up (performance signs / bids) */
  --bad: #ff5470;         /* red — down / asks */
  --glow: 0 0 7px rgba(52,210,236,.45);  /* faint phosphor bloom on cyan */
  --plot-glow: rgba(52,210,236,.30);     /* drop-shadow on chart lines (themed) */
  --line: #1b2740;        /* hairline borders */
  --grid: #111c2c;        /* graph-paper rule (just above bg) */
  --radius: 4px;          /* blocky / raw */
  --display: "BigEmoji", "Pixelify Sans", "Segoe UI", system-ui, sans-serif;
  --body: "BigEmoji", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "BigEmoji", "IBM Plex Mono", "SF Mono", "Consolas", monospace;
}
/* Emoji ~30% larger EVERYWHERE, zero markup changes: a unicode-range font face
   that only covers emoji codepoints, size-adjusted, prepended to every stack.
   Non-emoji glyphs fall straight through to the normal fonts. */
@font-face {
  font-family: "BigEmoji";
  src: local("Segoe UI Emoji"), local("Apple Color Emoji"), local("Noto Color Emoji");
  unicode-range: U+1F300-1F5FF, U+1F600-1F64F, U+1F680-1F6FF, U+1F900-1F9FF,
    U+1FA70-1FAFF, U+2600-26FF, U+2700-27BF, U+2B00-2BFF, U+FE0F;
  size-adjust: 130%;
}
/* Theme variants — only the monitor "phosphor" hue changes (accent + its glow);
   up/down green/red and the hot-magenta stay semantic across all themes. */
[data-theme="amber"] {
  --accent: #f5a623; --accent-ink: #1c1102;
  --glow: 0 0 7px rgba(245,166,35,.5);
  --plot-glow: rgba(245,166,35,.30);
}
[data-theme="green"] {
  --accent: #2ce06a; --accent-ink: #04190d;
  --glow: 0 0 7px rgba(44,224,106,.5);
  --plot-glow: rgba(44,224,106,.30);
}
[data-theme="violet"] {
  --accent: #b07cff; --accent-ink: #15052a;
  --glow: 0 0 8px rgba(176,124,255,.5);
  --plot-glow: rgba(176,124,255,.30);
}
[data-theme="crimson"] {
  --accent: #ff5470; --accent-ink: #2a0410;
  --glow: 0 0 8px rgba(255,84,112,.5);
  --plot-glow: rgba(255,84,112,.30);
}
[data-theme="mono"] {
  --accent: #dfe7f0; --accent-ink: #0a0f18;
  --glow: 0 0 7px rgba(223,231,240,.4);
  --plot-glow: rgba(223,231,240,.28);
}

* { box-sizing: border-box; }

/* THE [hidden] RULE. Any class that sets `display` (e.g. .btn, .chip) BEATS the
   UA's [hidden] { display:none } — the exact bug that made the consent banner
   unkillable (found live) and the /app install button show before the browser
   offered it (found by screenshot, 2026-07-12). One global, important rule ends
   this class of bug for every current and future element. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
/* Kill horizontal overflow at the root (found live, mobile): the hero's decorative
   pseudo-elements use negative insets (-40px), inflating the page's scrollWidth past
   the screen. Mobile Chrome then GROWS the layout viewport (390 -> ~415), and every
   position:fixed element (cookie banner, Pip) is placed against that bigger viewport
   — its bottom/right edge lands OFF the visible screen, so the consent buttons sat
   below the fold and couldn't be clicked. `clip` (not `hidden`): hidden would turn
   body into a scroll container and break the sticky topbar. */
html, body { overflow-x: clip; }
body {
  margin: 0; color: var(--ink); overflow-x: hidden;
  font: 15px/1.6 var(--body);
  background-color: var(--bg);
  /* Engineering grid under the modules (graph paper). The CRT scanlines are a
     separate overlay (body::after) that sits OVER the opaque panels too. */
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 30px 30px;
  background-position: -1px -1px;
}
/* No global scanlines over text (it hurt readability). The CRT lines live ONLY on
   the "screens" — the hero and the charts (.hero::after / .chart-wrap::after). */

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

/* Numbers everywhere line up like a readout. */
.mono, .stat b, .statband .stat b, .amt, td, .tier, .chip, .badge,
.eyebrow, code, .price .amt { font-family: var(--mono); font-variant-numeric: tabular-nums; }

h1, h2, h3, .brand, .section-h, .hero-h1, .cta-band h2 {
  font-family: var(--display); font-weight: 600; letter-spacing: 0;
}

/* ----- top bar -------------------------------------------------------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; padding: 12px 16px;
  /* Installed PWA (standalone + black-translucent + viewport-fit=cover): the page
     renders UNDER the iOS status bar, so the sticky bar must pad itself past it.
     env() is 0 in normal browsing; browsers without env() drop the calc() line
     and keep the shorthand's 12px. */
  padding-top: calc(12px + env(safe-area-inset-top));
  background: rgba(10, 15, 24, 0.85);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; letter-spacing: -0.02em; text-shadow: var(--glow); }
.brand-txt { color: var(--ink); }
/* The wordmark: "your" glows in the theme accent — hedge YOUR own. */
.brand-txt .b-your { color: var(--accent); }
.brand-pip { width: 24px; flex: 0 0 auto; }
.brand-pip .mascot { width: 24px; }
/* the logo Pip nods toward the cursor on hover of the brand (he's "watching"). */
.brand:hover .brand-pip .mascot { animation: sm-wave .9s ease 1; }
.topbar nav { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.topbar nav a { color: var(--muted); font-size: 14px; }
.topbar nav a:hover { color: var(--ink); text-decoration: none; }
/* Phones: the full row (5 links + theme swatches + CTA) wrapped to 2-3 messy
   rows (audit). Keep it to ONE tidy horizontally-scrollable row and drop the
   decorative theme swatches (fun, not essential) to save width. */
@media (max-width: 640px) {
  .topbar { flex-wrap: nowrap; gap: 6px; padding: 10px 12px;
    padding-top: calc(10px + env(safe-area-inset-top)); }
  .brand { font-size: 15.5px; }   /* the 12-char wordmark stays one tidy line */
  .topbar nav { flex-wrap: nowrap; gap: 13px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav a { white-space: nowrap; }
  .topbar .theme-switch { display: none; }
}

.container { max-width: 1000px; margin: 0 auto; padding: 18px 16px 56px; }

h1 { font-size: 26px; margin: 8px 0 14px; letter-spacing: -0.02em; }
h2 { font-size: 19px; margin: 24px 0 10px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
/* Grid/flex tracks must be allowed to shrink below content min-content (tables,
   long words), or they force horizontal page overflow on small screens. */
.grid > *, .split > *, .tiers > *, .steps > * { min-width: 0; }

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px;
  transition: border-color .15s ease, transform .15s ease;
}
a.card:hover { border-color: #36507e; transform: translateY(-2px); text-decoration: none; }
.card h3 { margin: 0 0 4px; font-size: 16px; }

/* Tier tags read like instrument labels (mono, ticked). */
.tier {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 8px; border-radius: 4px; background: var(--panel-2);
  color: var(--muted); border: 1px solid var(--line);
}
.tier.core { color: var(--accent); border-color: #28406a; }
.tier.speculative { color: var(--hot); border-color: #5a2545; text-shadow: 0 0 6px rgba(255,92,174,.5); }
.tier.tool { color: #34d2ec; border-color: #1e4a5a; }
/* Craft-Your-Own marketplace-card CTA (in place of the stat band). */
.cyo-cta { margin-top: 12px; font: 13px var(--mono, monospace); color: var(--muted); }

/* Market filter bar (All / Global / US / GPW) above the catalogue. */
.market-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.mf-btn {
  font: 12px var(--mono, monospace); letter-spacing: .04em; cursor: pointer;
  padding: 5px 12px; border-radius: 6px; background: var(--panel-2);
  color: var(--muted); border: 1px solid var(--line); transition: border-color .15s ease, color .15s ease;
}
.mf-btn:hover { color: var(--ink); border-color: #36507e; }
.mf-btn.active { color: var(--accent); border-color: #28406a; background: var(--panel); }
/* Small market pill on each strategy card (US / GPW / Global). */
.mkt {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 7px; border-radius: 4px; background: var(--panel-2);
  color: var(--muted); border: 1px solid var(--line); white-space: nowrap;
}
.mkt.gpw { color: #e0b64a; border-color: #5a4a1e; }
.mkt.us { color: #6ea0ff; border-color: #28406a; }

/* Featured "Craft Your Own" — first card, full-width, accent-ringed with a badge. */
.featured-craft { grid-column: 1 / -1; position: relative; overflow: hidden;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset, 0 8px 30px -14px var(--accent); }
a.featured-craft:hover { transform: translateY(-2px); border-color: var(--accent); }
.featured-craft .fc-badge { position: absolute; top: 12px; right: 12px; z-index: 1;
  background: var(--accent); color: var(--accent-ink); font-family: var(--mono);
  font-size: 11px; font-weight: 700; letter-spacing: .05em; padding: 3px 9px; border-radius: 5px; }
.featured-craft h3 { font-size: 18px; }
.featured-craft .cyo-cta { font-size: 14px; margin-top: 10px; }

.stats { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 12px; }
.stat b { display: block; font-size: 17px; font-weight: 600; }
.stat span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.pos { color: var(--good); } .neg { color: var(--bad); }

/* Money-framing callout on the strategy track record — the concrete "$1,000 would
   have become $X" story (always paired with the dollar drawdown; §4.6-honest). */
.money-frame {
  margin: 12px 0; padding: 12px 14px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); font-size: 15px; line-height: 1.55;
}
.money-frame b { font-size: 16px; }

table { width: 100%; border-collapse: collapse; }
/* Wide data tables (holdings 7 cols, allocations, exports) must not clip on
   phones — let them scroll horizontally instead of overflowing the viewport
   (audit). display:block is the standard responsive-table trick; the pricing
   tiers use divs, not tables, so this is safe. */
@media (max-width: 640px) {
  main table, .card table, #holdings table, #allocation table, .depth-table {
    display: block; overflow-x: auto; white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  /* Prose cells (the update-history change notes) read better wrapped than
     side-scrolled — give the note column room and let it break lines. */
  #history table td:last-child { white-space: normal; min-width: 220px; }
}
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; font-family: var(--body); }
tbody tr:hover { background: rgba(255,255,255,0.02); }

/* ----- controls ------------------------------------------------------- */
.btn {
  display: inline-block; background: var(--accent); color: var(--accent-ink); border: 0;
  border-radius: 4px; padding: 9px 15px; font-weight: 600; cursor: pointer;
  font-family: var(--body); font-size: 14px; letter-spacing: -0.01em;
  transition: filter .15s ease, transform .05s ease;
}
.btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.secondary { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); }
.btn.secondary:hover { border-color: #36507e; filter: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

input, select {
  background: var(--panel-2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 11px; font: 14px/1.4 var(--mono); width: 100%;
}
input::placeholder { color: #7e8ba0; }   /* lifted for AA contrast (audit) */
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
.row > * { flex: 1; min-width: 120px; }
label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px;
  text-transform: uppercase; letter-spacing: .04em; }

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

/* ----- banners -------------------------------------------------------- */
.banner { border-radius: 8px; padding: 11px 13px; margin: 10px 0; border-left: 3px solid var(--line); }
.banner.lock { background: #1c1809; border-color: var(--gold); }
.banner.info { background: #0d1c2c; border-color: var(--accent); }
.banner.err  { background: #221012; border-color: var(--bad); }

/* §4.6 methodology disclosure — visible, normal-weight, adjacent to the stats. */
.meth-band { margin: 10px 0 4px; padding: 10px 13px; border-radius: 8px;
  background: #1c1809; border-left: 3px solid var(--gold); font-size: 0.92em; }
.meth-band .meth-details { margin-top: 6px; }
.meth-band summary { cursor: pointer; color: var(--gold); }
.meth-band .meth-details p { margin: 8px 0 0; color: var(--muted, #9aa3b2); }

/* Compare strategies page. */
.cmp-pick { margin: 10px 0 22px; }
.cmp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
/* Compact rounded-rect chip (not a big oval); a colour swatch that fills with the
   strategy's shared colour when picked, plus its Sharpe as a quick decision cue. */
.cmp-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px;
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 13px;
  user-select: none; background: var(--panel); white-space: nowrap;
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease; }
.cmp-chip:hover { border-color: var(--muted); }
.cmp-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.cmp-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid var(--dot, var(--muted)); background: transparent; transition: background .14s ease; }
.cmp-chip:has(input:checked) { border-color: var(--dot, var(--accent));
  background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--dot, var(--accent)); }
.cmp-chip:has(input:checked) .cmp-dot { background: var(--dot, var(--accent)); }
.cmp-nm { color: var(--ink); }
.cmp-sh { font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  padding-left: 8px; border-left: 1px solid var(--line); }
.cmp-chip:has(input:checked) .cmp-sh { color: var(--ink); }
.cmp-chip input:focus-visible + .cmp-dot { outline: 2px solid var(--accent); outline-offset: 2px; }
#cmp-chart { padding: 14px 14px 8px; border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel)); }
#cmp-chart .cmp-svg { width: 100%; height: auto; display: block; background: transparent; border: 0; }
.cmp-legend { display: flex; flex-wrap: wrap; gap: 9px 18px; margin-top: 12px; }
.cmp-leg { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink); text-decoration: none; }
.cmp-leg:hover { color: var(--accent); }
.cmp-leg i { width: 16px; height: 4px; border-radius: 2px; display: inline-block; flex: 0 0 auto; }
.cmp-mult { font-family: var(--mono); font-size: 12px; color: var(--muted); font-weight: 600; }
.cmp-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.cmp-table th, .cmp-table td { padding: 11px 13px; border-bottom: 1px solid var(--line); text-align: left;
  font-family: var(--mono); font-size: 13.5px; }
.cmp-table thead th { color: var(--muted); font-weight: 600; font-size: 12px; vertical-align: bottom; }
.cmp-table thead a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.cmp-table thead a:hover { color: var(--accent); }
.cmp-hdot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.cmp-table td:first-child { color: var(--muted); }
.cmp-table tbody tr:hover { background: rgba(255, 255, 255, .02); }
.cmp-table td.cmp-win { color: var(--good, #35e879); font-weight: 700; }

/* Methodology / "how the numbers are made" trust page. */
.meth-page { max-width: 820px; }
.meth-page .lede { font-size: 16px; line-height: 1.65; color: var(--ink); margin: 6px 0 22px; }
.meth-grid { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 6px 0 8px; }
@media (min-width: 680px) { .meth-grid { grid-template-columns: 1fr 1fr; } }
.meth-grid .card h3 { font-size: 15px; margin: 0 0 6px; }
.meth-table { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 13.5px; }
.meth-table th, .meth-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.meth-table th { color: var(--muted); font-weight: 600; font-size: 12px; }
.meth-lims { margin: 6px 0 4px 18px; }
.meth-lims li { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin: 4px 0; }
.meth-callout { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px;
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 12px; padding: 14px 16px; }
.meth-callout [data-mascot] { width: 40px; flex: 0 0 auto; }
.meth-callout b { display: block; font-family: var(--display); margin-bottom: 4px; }
.hash-fingerprint, .ledger-table code { overflow-wrap: anywhere; word-break: break-word; }
.hash-fingerprint { font-family: var(--mono); font-size: 14px; color: var(--accent); margin: 8px 0; }
.ledger-table { table-layout: fixed; }

/* Free monthly recap opt-in + public movers page. */
.optin-band, .movers-head { display: grid; gap: 12px; align-items: center; }
@media (min-width: 760px) {
  .optin-band { grid-template-columns: 1.2fr 1fr auto; }
}
.newsletter-form { display: grid; gap: 8px; }
@media (min-width: 560px) {
  .newsletter-form { grid-template-columns: minmax(180px, 1fr) auto; align-items: center; }
  .newsletter-form [data-newsletter-status] { grid-column: 1 / -1; }
}
.movers-head .lede { max-width: 760px; }
.mover-card .mono { color: var(--accent); margin: 8px 0; }
.mover-card p { overflow-wrap: anywhere; }

/* Branded error page (404 / 500). */
.error-page { max-width: 560px; margin: 8vh auto; text-align: center; }
.error-page .error-code { font-family: var(--display); font-size: 92px; line-height: 1;
  color: var(--accent); text-shadow: var(--glow); opacity: .9; }
.error-page .error-pip { display: inline-block; width: 72px; margin: 10px 0 4px; }
.error-page .error-pip .mascot { width: 100%; }
.error-page h1 { margin: 6px 0 8px; }

/* Ticker type-ahead dropdown (shared; positioned under the focused input).
   z-index 270: above the modal (280)? No — BELOW the palette, ABOVE banner; inputs
   inside the modal are rare, keep 290 so it also works there. [hidden] pairing! */
#ticker-suggest[hidden] { display: none; }
#ticker-suggest { position: absolute; z-index: 290; background: var(--panel);
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.5); overflow: hidden;
  max-width: 340px; }
#ticker-suggest .ts-row { display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; cursor: pointer; }
#ticker-suggest .ts-row:hover, #ticker-suggest .ts-row.sel { background: rgba(52, 210, 236, .10); }
#ticker-suggest .ts-row b { font-family: var(--mono); font-size: 13px; flex: 0 0 auto; }
/* Scoped to .ts-name (NOT a bare `span`): the row also carries the .slogo logo
   tile, which a generic `span { flex: 1 }` stretched into a wide bar and
   recoloured its monogram (founder-reported). */
#ticker-suggest .ts-row .ts-name { color: var(--muted); font-size: 12.5px; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ticker-suggest .ts-row .ts-mkt { font-style: normal; font-size: 10px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; flex: 0 0 auto; }

/* Company logo tile — the real logo (same-origin /api/logo PNG) over a
   deterministic monogram fallback. --slogo-h (0-359) is set per symbol by
   SM.slogo() / the SSR macro from the shared symbol hash, so a company keeps
   one hue everywhere. Full-bleed CDN tiles get a hairline inset so black-on-
   black logos (AAPL) still read against the dark panels. */
.slogo { --slogo: 22px; position: relative; display: inline-flex; flex: 0 0 auto;
  width: var(--slogo); height: var(--slogo); border-radius: var(--radius);
  /* Hard square, whatever flex/table context the tile lands in: pin BOTH axes
     so a parent's `flex: 1` / `align-items: stretch` can never deform it. */
  min-width: var(--slogo); max-width: var(--slogo);
  min-height: var(--slogo); max-height: var(--slogo);
  overflow: hidden; align-items: center; justify-content: center;
  vertical-align: -0.34em;
  background: linear-gradient(135deg, hsl(var(--slogo-h, 200) 45% 30%),
                                       hsl(var(--slogo-h, 200) 60% 16%));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10); }
.slogo .slogo-mono { font-family: var(--mono); font-weight: 700; flex: none;
  font-size: calc(var(--slogo) * .42); line-height: 1; letter-spacing: .4px;
  color: rgba(255, 255, 255, .92); user-select: none; }
.slogo-img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; }
.slogo-xs { --slogo: 16px; border-radius: 3px; }
.slogo-sm { --slogo: 20px; }
.slogo-lg { --slogo: 40px; border-radius: 6px; vertical-align: middle; }
td.symcell, .symcell { white-space: nowrap; }

/* News digest — the upgraded briefing tab. */
.digest-stats { margin: 6px 0 16px; }
/* The AI briefing card — the marquee of the tab. A top accent rule, a soft corner
   glow and a panel gradient lift it from a flat box to something that reads as a
   curated, premium briefing (not a raw text dump). */
.digest-card { position: relative; overflow: hidden;
  border: 1px solid var(--line); border-top: 2px solid var(--accent); border-radius: 14px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: 0 14px 34px rgba(0, 0, 0, .34); }
.digest-card::before { content: ""; position: absolute; top: 0; right: 0; width: 240px; height: 130px;
  pointer-events: none; opacity: .5;
  background: radial-gradient(120% 120% at 100% 0, var(--plot-glow), transparent 70%); }
.digest-card > * { position: relative; }
.digest-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.digest-card-head [data-mascot] { width: 34px; flex: 0 0 auto; }
.digest-card-head > div { flex: 1; min-width: 0; }
.digest-card-head b { display: block; font-family: var(--display); font-size: 17px; line-height: 1.15; }
.digest-card-head > div span { color: var(--muted); font-size: 12px; }
.digest-card-head .chip { flex: 0 0 auto; }
/* Lead = the "themes this week" intro sentence; a touch larger, ink-bright. */
.digest-lead { font-size: 15.5px; line-height: 1.6; color: var(--ink); margin: 0; }
.digest-lead strong { color: var(--accent); font-weight: 700; }
.digest-points { counter-reset: dp; list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.digest-points li { counter-increment: dp; position: relative; padding: 12px 14px 12px 46px;
  line-height: 1.55; font-size: 14px; border: 1px solid var(--line); border-radius: 10px;
  background: rgba(255, 255, 255, .015); }
.digest-points li strong { color: var(--ink); font-weight: 700; }
.digest-points li::before { content: counter(dp); position: absolute; left: 12px; top: 11px;
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 13px; color: var(--bg, #0b1220);
  background: var(--accent); border-radius: 7px; }
.chips .chip-btn { cursor: pointer; user-select: none; }
.chips .chip-btn.active { border-color: var(--accent); color: var(--accent); }
.quiet-strip { margin-top: 18px; padding: 10px 14px; background: var(--panel);
  border: 1px dashed var(--line); border-radius: 10px; line-height: 2; }
.quiet-strip b { font-family: var(--display); font-size: 13px; margin-right: 8px; }
.quiet-strip .chip { margin: 0 2px; }

/* Hero tuning panel (?tune=1 — founder calibration only). Pinned to the LEFT
   edge of the viewport so the chart itself stays fully visible while tuning. */
.hero-tune { position: fixed; top: 80px; left: 12px; z-index: 320; width: 220px;
  max-height: calc(100vh - 100px); overflow-y: auto;
  background: rgba(10, 16, 28, .92); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.hero-tune b { display: block; font-family: var(--display); color: var(--accent);
  font-size: 11px; margin-bottom: 6px; letter-spacing: 1px; }
.hero-tune label { display: block; margin: 5px 0; }
.hero-tune label i { float: right; font-style: normal; color: var(--ink); }
.hero-tune input[type="range"] { width: 100%; height: 14px; accent-color: var(--accent); }
.hero-tune span { display: block; margin-top: 6px; color: var(--gold, #f5a623); }
.hero-tune input[readonly] { width: 100%; margin-top: 3px; background: #0b1120;
  border: 1px solid var(--line); border-radius: 6px; color: var(--ink);
  font-family: var(--mono); font-size: 10.5px; padding: 4px 6px; }

/* "The $6 decision" — burger vs learning, pixel comic strip. Panels glow in
   sequence (pure CSS); playful, not preachy. */
.snack-vs .sv-grid { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 14px; }
@media (min-width: 720px) { .snack-vs .sv-grid { grid-template-columns: repeat(3, 1fr); } }
.sv-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 16px 14px; text-align: center; animation: sv-glow 9s infinite; }
.sv-panel.sv-2 { animation-delay: 3s; }
.sv-panel.sv-3 { animation-delay: 6s; }
@keyframes sv-glow {
  0%, 30%, 100% { border-color: var(--line); box-shadow: none; }
  8%, 20% { border-color: var(--accent); box-shadow: 0 0 18px rgba(52, 210, 236, .18); }
}
@media (prefers-reduced-motion: reduce) { .sv-panel { animation: none; } }
.sv-sprite { display: inline-block; width: 72px; height: 60px; margin-bottom: 8px; }
.sv-sprite svg, .sv-sprite .mascot { width: 100%; height: 100%; }
.sv-panel b { display: block; font-family: var(--display); font-size: 15px; margin-bottom: 5px; }
.sv-panel p { margin: 0; line-height: 1.55; }
.sv-fine { display: block; margin-top: 6px; font-style: italic; opacity: .75; }

/* The auto-playing burger scene — effortless: it loops on its own (10s), no input.
   Beats: burger rolls in with its price tag (0-14%) → wobbles temptingly (16-30%)
   → Pip lunges and yeets it off-screen (31-44%) → the same $6 draws a compounding
   sparkline instead (46-76%) → punchline bubble (78-94%) → reset. */
.sv-stage { position: relative; height: 132px; margin: 10px 0 16px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 12px;
  background: linear-gradient(180deg, rgba(52, 210, 236, .04), transparent 60%); }
.svs-pip { position: absolute; left: 12%; bottom: 8px; width: 56px;
  animation: svs-pip 10s ease-in-out infinite; }
.svs-pip .mascot, .svs-pip svg { width: 100%; height: auto; display: block; }
.svs-burger { position: absolute; left: calc(12% + 78px); bottom: 12px; width: 62px;
  animation: svs-burger 10s ease-in-out infinite; }
.svs-burger svg { width: 100%; height: auto; display: block; }
.svs-tag { position: absolute; top: -16px; right: -10px; font-family: var(--display);
  font-style: normal; font-size: 11px; color: #f5a623; border: 1px solid #f5a623;
  border-radius: 5px; padding: 0 5px; background: var(--bg); }
.svs-line { position: absolute; left: calc(12% + 92px); bottom: 10px;
  width: min(46%, 360px); height: 86px; overflow: visible;
  filter: drop-shadow(0 0 6px rgba(47, 224, 106, .35)); }
/* Japanese candles printing one by one during the payoff beat (46-72%). */
.svs-c { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
.svs-c.up rect { fill: #2fe06a; } .svs-c.up line { stroke: #2fe06a; stroke-width: 2; }
.svs-c.down rect { fill: #ff5470; } .svs-c.down line { stroke: #ff5470; stroke-width: 2; }
.svs-c1 { animation: svs-cd1 10s ease-out infinite; }
.svs-c2 { animation: svs-cd2 10s ease-out infinite; }
.svs-c3 { animation: svs-cd3 10s ease-out infinite; }
.svs-c4 { animation: svs-cd4 10s ease-out infinite; }
.svs-c5 { animation: svs-cd5 10s ease-out infinite; }
.svs-c6 { animation: svs-cd6 10s ease-out infinite; }
.svs-c7 { animation: svs-cd7 10s ease-out infinite; }
.svs-c8 { animation: svs-cd8 10s ease-out infinite; }
@keyframes svs-cd1 { 0%, 45% { opacity: 0; transform: translateY(8px) scaleY(.2); } 47.5% { opacity: 1; transform: none; } 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes svs-cd2 { 0%, 48.5% { opacity: 0; transform: translateY(8px) scaleY(.2); } 51% { opacity: 1; transform: none; } 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes svs-cd3 { 0%, 52% { opacity: 0; transform: translateY(8px) scaleY(.2); } 54.5% { opacity: 1; transform: none; } 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes svs-cd4 { 0%, 55.5% { opacity: 0; transform: translateY(8px) scaleY(.2); } 58% { opacity: 1; transform: none; } 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes svs-cd5 { 0%, 59% { opacity: 0; transform: translateY(8px) scaleY(.2); } 61.5% { opacity: 1; transform: none; } 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes svs-cd6 { 0%, 62.5% { opacity: 0; transform: translateY(8px) scaleY(.2); } 65% { opacity: 1; transform: none; } 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes svs-cd7 { 0%, 66% { opacity: 0; transform: translateY(8px) scaleY(.2); } 68.5% { opacity: 1; transform: none; } 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes svs-cd8 { 0%, 69.5% { opacity: 0; transform: translateY(8px) scaleY(.2); } 72% { opacity: 1; transform: none; } 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
.svs-tag2 { position: absolute; left: calc(12% + 80px); bottom: 66px; top: auto; right: auto;
  opacity: 0; animation: svs-tag2 10s ease-in-out infinite; }
.svs-say { position: absolute; right: 4%; top: 14px; max-width: 240px; opacity: 0;
  font-size: 12.5px; line-height: 1.45; color: var(--ink); background: var(--panel);
  border: 1px solid var(--accent); border-radius: 10px; padding: 7px 11px;
  animation: svs-say 10s ease-in-out infinite; }
@keyframes svs-burger {
  0% { transform: translateX(64vw) rotate(0deg); opacity: 1; }
  14% { transform: translateX(0) rotate(0deg); }
  18% { transform: translateX(0) rotate(-6deg); }
  23% { transform: translateX(0) rotate(6deg); }
  28% { transform: translateX(0) rotate(-4deg); }
  33% { transform: translateX(0) rotate(0deg); opacity: 1; }
  34.5% { transform: translateX(4px) scale(.84, .9) rotate(4deg); }        /* impact squash */
  40% { transform: translateX(24vw) translateY(-84px) rotate(160deg); opacity: 1; }
  46%, 100% { transform: translateX(56vw) translateY(-40px) rotate(340deg); opacity: 0; }
}
/* Pip KICKS the burger: wind-up lean-back, leg-swing lunge (jump + rotate), land. */
@keyframes svs-pip {
  0%, 26% { transform: translateX(0) translateY(0) rotate(0deg); }
  30% { transform: translateX(-6px) translateY(1px) rotate(8deg) scale(1, .94); }  /* wind-up */
  34% { transform: translateX(22px) translateY(-10px) rotate(-18deg); }            /* THE KICK */
  37% { transform: translateX(10px) translateY(-2px) rotate(-6deg); }
  41%, 74% { transform: translateX(0) translateY(0) rotate(0deg); }
  78% { transform: translateY(-5px); }                     /* happy hop at the payoff */
  82%, 100% { transform: translateY(0); }
}
/* Impact flash at the point of contact. */
.svs-pow { position: absolute; left: calc(12% + 74px); bottom: 44px; font-style: normal;
  font-size: 26px; color: #f5a623; text-shadow: 0 0 10px rgba(245, 166, 35, .8);
  opacity: 0; animation: svs-pow 10s ease-out infinite; pointer-events: none; }
@keyframes svs-pow {
  0%, 33% { opacity: 0; transform: scale(.3) rotate(0deg); }
  35% { opacity: 1; transform: scale(1.5) rotate(24deg); }
  40%, 100% { opacity: 0; transform: scale(.6) rotate(48deg); }
}
@keyframes svs-tag2 {
  0%, 45% { opacity: 0; transform: translateY(6px); }
  50%, 93% { opacity: 1; transform: translateY(0); }
  99%, 100% { opacity: 0; }
}
@keyframes svs-say {
  0%, 76% { opacity: 0; transform: translateY(4px); }
  80%, 94% { opacity: 1; transform: translateY(0); }
  99%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-stage * { animation: none !important; }
  .svs-burger { display: none; }              /* calm final frame: candles + message */
  .svs-c { opacity: 1; }
  .svs-tag2, .svs-say { opacity: 1; }
}
@media (max-width: 700px) {
  .sv-stage { height: 118px; }
  .svs-pip { width: 44px; }
  .svs-burger { width: 50px; }
  .svs-say { max-width: 170px; font-size: 11.5px; }
}

/* "Take it to your broker" — post-unlock export panel (files + per-broker how-to). */
.export-panel { margin-top: 16px; background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--pos, #2fe06a); border-radius: 12px; padding: 14px 16px; }
.export-panel .ep-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px; }
.export-panel .ep-head b { font-family: var(--display); font-size: 15px; }
.ep-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.ep-how { margin-top: 10px; }
.ep-how summary { cursor: pointer; color: var(--accent); font-size: 13px; }
.ep-brokers { display: grid; gap: 12px; margin-top: 10px; }
.ep-b { border: 1px dashed var(--line); border-radius: 10px; padding: 10px 14px; }
.ep-b b { font-size: 13px; }
.ep-b ol { margin: 8px 0 4px 18px; padding: 0; }
.ep-b li { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 3px 0; }

/* Pip's lesson — the post-unlock education card (how it works / concept / fun fact). */
.pip-lesson { margin-top: 16px; background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 12px; padding: 14px 16px; }
.pip-lesson .pl-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.pip-lesson .pl-head [data-mascot] { width: 26px; display: inline-block; }
.pip-lesson .pl-head b { font-family: var(--display); font-size: 15px; }
.pip-lesson .pl-block { margin: 10px 0 0; }
.pip-lesson .pl-block b { display: block; font-size: 13px; margin-bottom: 3px; }
.pip-lesson .pl-block p { margin: 0 0 4px; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.pip-lesson .pl-fact { background: rgba(245, 166, 35, .07); border-left: 2px solid #f5a623;
  border-radius: 6px; padding: 9px 11px; margin-top: 12px; }
.pip-lesson .pl-fact p { color: var(--ink); }
/* The worked example — the beginner's "oh, THAT'S what it does" block. */
.pip-lesson .pl-example { background: rgba(52, 210, 236, .06); border-left: 2px solid var(--accent);
  border-radius: 6px; padding: 9px 11px; margin-top: 12px; }
.pip-lesson .pl-example p { color: var(--ink); }

/* PLN (BLIK) price note shown to Polish visitors on the public landing. */
.pln-note { margin: 8px 0 0; padding: 8px 11px; border-radius: 8px;
  background: #0d1c2c; border-left: 3px solid var(--accent); }
/* Win-back nudge on a lapsed subscriber's unlocked-strategy card. */
.winback { color: var(--gold); }
/* EU 14-day withdrawal consent row at checkout (Option B). It's a <label>, so it
   must override the global uppercase/letter-spacing/block label styling. Natural
   inline flow (checkbox first, text after) — no flex/absolute to glitch. */
.consent-row { display: block; margin: 12px 0 0; cursor: pointer;
  text-transform: none; letter-spacing: normal;
  font-size: 12.5px; line-height: 1.5; color: var(--muted); }
/* The global `input,select{width:100%}` stretches a bare checkbox — pin it to a
   real 16px box (same fix as .follow-row input). */
.consent-row input { width: 16px; height: 16px; padding: 0; margin: 0 8px 0 0;
  vertical-align: -3px; accent-color: var(--accent); }
.consent-row span { text-transform: none; letter-spacing: normal; }
.consent-row .pos { display: block; margin: 3px 0 0 24px; }
/* Self-serve cancel/resume line in the account status card. */
.sub-manage { flex-basis: 100%; text-align: right; margin-top: 6px; }
.sub-manage:empty { display: none; }

/* Cookie / analytics consent banner (ePrivacy + RODO). */
/* z-index MUST beat the Pip mascot FAB (#sm-buddy = 150) and the tour/toast layers
   (200/210) — at 60 the mascot sat ON TOP of the "Accept all" button and swallowed
   its clicks (found live: Playwright reported #sm-buddy intercepting the pointer).
   Kept below #sm-cmd (300). The banner disappears after a choice, so briefly
   covering Pip's corner is fine; consent must always be clickable (RODO). */
/* The explicit display:flex on the class BEATS the UA stylesheet's [hidden] rule
   (class specificity > attribute default), so without this the banner ignored the
   `hidden` attribute entirely: it showed even after consent was stored and never
   disappeared on click — which read as "the button does nothing". */
.cookie-banner[hidden] { display: none; }
.cookie-banner { position: fixed; left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 260;
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between;
  background: var(--panel, #10141c); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 12px 14px; box-shadow: 0 6px 24px rgba(0,0,0,.45); }
.cookie-banner p { margin: 0; flex: 1 1 320px; }
.cookie-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.foot-links { margin-top: 6px; }
.foot-links a { margin: 0 2px; }

/* In-place unlock modal (strategy page). z-index ladder: mascot 150 < tour 200 <
   toast 210 < cookie banner 260 < THIS 280 < cmd palette 300. The [hidden] pairing
   is MANDATORY for any display-setting class (the cookie-banner lesson: a class's
   display beats the UA [hidden] rule, so clicks "do nothing"). */
.modal-back[hidden] { display: none; }
.modal-back { position: fixed; inset: 0; z-index: 280; display: flex;
  align-items: center; justify-content: center; padding: 18px;
  background: rgba(4, 6, 12, .72); backdrop-filter: blur(2px); }
.modal-card { position: relative; width: 100%; max-width: 440px; max-height: 90vh;
  overflow: auto; background: var(--panel, #10141c); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 12px; padding: 18px 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,.55); }
.modal-card h3 { margin: 0 26px 6px 0; }
.modal-x { position: absolute; top: 8px; right: 10px; background: none; border: 0;
  color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px; }
.modal-x:hover { color: var(--ink, #fff); }

/* Passwordless (guest) checkout card — the primary, lowest-friction path. */
.guest-card { border-color: var(--accent); }
.guest-card h2 { margin-top: 0; }

/* Payment-rail selector — segmented PILLS shared by the unlock modal, the guest
   card and the account paywall. The radio stays real (a11y/tests) but hidden;
   the pill is the visible control. */
.pay-method { margin: 0 0 14px; }
.pay-method .pm-cap { display: block; margin-bottom: 6px; }
.pm-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pm-opt { position: relative; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); cursor: pointer; user-select: none;
  transition: border-color .15s, box-shadow .15s, transform .1s; }
.pm-opt:hover { border-color: rgba(52, 210, 236, .5); }
.pm-opt.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent),
  0 0 14px rgba(52, 210, 236, .18); }
.pm-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pm-opt i { font-style: normal; font-size: 15px; }
.pm-opt b { font-size: 13px; }
.pm-opt span { font-size: 11px; color: var(--muted); border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 5px; }
.pm-opt.active span { color: var(--accent); border-color: var(--accent); }

/* Busy money-buttons: spinner + disabled while the checkout opens. */
.btn .spin { display: inline-block; width: 13px; height: 13px; margin-right: 8px;
  border: 2px solid rgba(10, 14, 22, .35); border-top-color: rgba(10, 14, 22, .9);
  border-radius: 50%; vertical-align: -2px; animation: sm-spin .7s linear infinite; }
.btn.secondary .spin { border-color: rgba(223, 231, 240, .3); border-top-color: var(--ink); }
@keyframes sm-spin { to { transform: rotate(360deg); } }
.btn.busy { opacity: .85; cursor: progress; }

/* The unlock modal's value bullets + trust footer (the whole pitch at a glance). */
.buy-points { list-style: none; margin: 10px 0 12px; padding: 0; }
.buy-points li { padding: 3px 0 3px 22px; position: relative; font-size: 13px;
  color: var(--muted); line-height: 1.45; }
.buy-points li::before { content: "✓"; position: absolute; left: 2px; color: var(--pos, #2fe06a);
  font-weight: 700; }
.trust-line { display: flex; align-items: center; gap: 6px; justify-content: center;
  margin-top: 10px; font-size: 11.5px; color: var(--muted); }

.locked { filter: blur(4px); user-select: none; pointer-events: none; }

.disclaimer { color: var(--muted); font-size: 12px; max-width: 1000px; line-height: 1.6;
  margin: 0 auto; padding: 20px 16px 36px; border-top: 1px solid var(--line); }

/* Charts read raw/blocky: crisp edges, no smoothing. */
svg.spark { display: block; width: 100%; height: 120px; shape-rendering: crispEdges; }
svg.depthbar { display: block; width: 100%; height: 14px; }
.chart-wrap {
  position: relative;
  background: #070b12; border: 1px solid var(--line); border-radius: 4px; padding: 12px;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 22px 22px; image-rendering: pixelated;
}
/* Strong CRT scanlines on chart surfaces (the "screens"). */
.chart-wrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0.30) 0 1px, transparent 1px, transparent 3px);
}

/* Allocation depth table — order-book feel: weight + a stepped depth bar. */
.depth-table td { vertical-align: middle; }
.depth-cell { width: 45%; padding-right: 14px; }
.split { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .split { grid-template-columns: 1.2fr 1fr; } }

/* ===================== Landing ===================== */
.container > section { margin: 44px 0; }
.section-h { font-size: 21px; margin: 0 0 6px; }
.band {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 24px 20px;
}

/* Eyebrow: a terminal-style instrument label. */
.eyebrow {
  display: inline-block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 16px; text-shadow: var(--glow);
}
.eyebrow::before { content: "// "; color: var(--muted); }

/* Hero: a two-column thesis — the claim beside the artifact (a track-record plot). */
.hero { padding: 18px 0 8px; position: relative; }
/* Synthwave glow behind the hero: a cyan (accent) + hot-magenta wash. */
.hero::before {
  content: ""; position: absolute; inset: -30px -40px 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 80% at 16% 28%, rgba(52,210,236,.22), transparent 62%),
    radial-gradient(55% 72% at 92% 64%, rgba(255,92,174,.20), transparent 60%);
  filter: blur(8px);
}
.hero-grid { position: relative; z-index: 1; }
/* CRT scanlines live ONLY on the depth-monitor "screen", never over the headline
   text (lines over prose hurt readability — the whole point of this pass). */
.hero-plot { position: relative; }
.hero-plot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0.30) 0 1px, transparent 1px, transparent 3px);
}
.hero-grid { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: center; }
/* Let 1fr tracks shrink below their content's min-content width (default is
   min-width:auto), so long words/buttons wrap instead of forcing page overflow. */
.hero-grid > * { min-width: 0; }
@media (min-width: 820px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; } }
.hero-h1 {
  font-size: clamp(28px, 6.4vw, 44px); line-height: 1.12; margin: 4px 0 14px;
  letter-spacing: 0; overflow-wrap: break-word; color: var(--ink);
}
.hero-h1 em { font-style: normal; }
/* Synthwave gradient headline — accent -> hot-magenta (cyan->magenta by default).
   Guarded so unsupported browsers keep solid, readable text. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-h1 {
    background: linear-gradient(100deg, var(--accent), var(--hot) 86%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}
.lede { font-size: 16px; color: var(--muted); max-width: 560px; margin: 0 0 20px; }
.lede b { color: var(--ink); font-weight: 600; }
.cta-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn.lg { padding: 13px 22px; font-size: 16px; border-radius: 10px; }
.btn.full { display: block; width: 100%; text-align: center; }
/* Risk-reversal microcopy under CTAs (dot-separated reassurances). */
.cta-reassure { margin: 12px 0 0; letter-spacing: .01em; }
/* Sales sections: centered sub-heading + benefit cards + a mid-page CTA. */
.section-sub { max-width: 580px; margin: -2px 0 22px; color: var(--muted); font-size: 15px; }
.benefit { border-top: 2px solid var(--accent); }
.benefit-k { display: block; font: 600 12px var(--mono, monospace); color: var(--accent); letter-spacing: .12em; margin-bottom: 8px; }
.benefit h3 { margin: 0 0 8px; }
.benefit em { font-style: normal; color: var(--accent); }
.cta-mid { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 26px 0 0; }
.trust-strip {
  list-style: none; display: flex; gap: 8px 22px; flex-wrap: wrap;
  padding: 0; margin: 22px 0 0; color: var(--muted); font-size: 13px;
}
.trust-strip li::before { content: "✓"; color: var(--good); font-weight: 700; margin-right: 7px; }
@media (min-width: 820px) { .hero { padding: 36px 0 16px; } }

/* The signature artifact: an illustrative equity curve on graph paper. */
.hero-plot {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px; position: relative;
}
.hero-plot svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 2px var(--plot-glow)); }
/* Real-track-record hero variant: the 3D ridgeline canvas fills the panel; the CRT
   scanline overlay (::after, pointer-events:none) stays on top for the look. */
#hero-ridge { width: 100%; height: auto; display: block; }
.hero-plot-real .plot-cap a { color: var(--accent); }
.hero-plot .plot-cap {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  margin-top: 8px; display: flex; justify-content: space-between; gap: 8px;
}

/* Plain-language key so the jargon is friendly to a first-time reader. */
.metric-legend {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 0;
  font-size: 12.5px; color: var(--muted);
}
.metric-legend b { color: var(--ink); font-family: var(--mono); font-weight: 600; }
.metric-legend span { white-space: nowrap; }

.figures-note { margin-top: 14px; }

/* How it works — a true sequence, so numbered markers earn their place. */
.steps { display: grid; gap: 14px; grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 18px; }
.step h3 { margin: 12px 0 4px; font-size: 16px; }
.step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px; font-weight: 600; font-family: var(--mono);
  background: transparent; color: var(--accent); border: 1px solid var(--accent);
}

/* Pricing tiers — center-stage the all-access plan (honest anchoring). */
.tiers { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .tiers { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.tier-card {
  position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 20px 18px; display: flex; flex-direction: column; gap: 10px;
}
.tier-card.feature { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.tier-card h3 { margin: 0; font-size: 15px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.tier-card .price { display: flex; align-items: baseline; gap: 6px; }
.tier-card .amt { font-size: 34px; font-weight: 600; color: var(--ink); }
.tier-card .per { color: var(--muted); font-size: 13px; }
.badge {
  position: absolute; top: -10px; right: 16px; background: var(--accent); color: var(--accent-ink);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  padding: 3px 9px; border-radius: 4px;
}
.ticks { list-style: none; padding: 0; margin: 4px 0 10px; display: grid; gap: 8px; }
.ticks li { font-size: 13.5px; padding-left: 22px; position: relative; }
.ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--good); font-weight: 700; }
.tier-card .btn { margin-top: auto; }
.step-up { margin-top: 16px; text-align: center; }

.trust-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* FAQ — native disclosure, no JS. */
.faq details {
  border: 1px solid var(--line); border-radius: 10px; padding: 0 16px; margin-bottom: 10px;
  background: var(--panel);
}
.faq summary {
  cursor: pointer; font-weight: 600; padding: 14px 0; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-family: var(--body);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-weight: 400; font-size: 20px; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 16px; }

/* Final CTA. */
.cta-band {
  text-align: center; background: var(--panel);
  border: 1px solid var(--line); border-radius: 14px; padding: 36px 20px;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 30px 30px;
}
.cta-band h2 { font-size: 24px; margin: 0 0 8px; }
.cta-band p { margin: 0 auto 18px; max-width: 520px; }

/* Header primary CTA. */
.nav-cta {
  background: var(--accent); color: var(--accent-ink) !important; padding: 7px 13px;
  border-radius: 4px; font-weight: 600; font-family: var(--body); font-size: 14px;
}
.nav-cta:hover { text-decoration: none; filter: brightness(1.08); }

/* Theme switcher swatches (cyan / amber CRT / green phosphor). */
.theme-switch { display: inline-flex; gap: 5px; align-items: center; }
.sw {
  width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--line);
  padding: 0; cursor: pointer; transition: transform .1s ease;
  background: var(--panel-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1;
}
.sw .picon { width: 20px; height: 20px; display: block; image-rendering: pixelated; }
.sw .picon-svg { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.sw:hover { transform: scale(1.18); }
.sw.active { background: var(--panel); outline: 2px solid var(--accent); outline-offset: 1px; }

.card.quote blockquote { margin: 0 0 10px; font-size: 15px; line-height: 1.55; }

/* ===================== Strategy page ===================== */
.statband {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; margin: 14px 0 10px;
}
/* auto-fit, NOT a fixed 6-column grid: pages with 4 stats (portfolio, dashboard)
   left two empty container-background columns — a big dead box. Cells now always
   fill the row, whatever their count. */
@media (min-width: 560px) { .statband { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.statband .stat { background: var(--panel); padding: 16px; }
.statband .stat b { font-size: 22px; }
/* Multi-currency money stat: stacked smaller lines instead of one blown-up number. */
.statband .stat b.multi { font-size: 15px; line-height: 1.6; }

/* Locked allocation teaser. */
.teaser { position: relative; }
.teaser .locked { filter: blur(5px); opacity: .5; }
.teaser-over {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 10px;
}
.teaser-over .small { max-width: 280px; }

/* Sticky mobile unlock bar. safe-area: in the installed app (viewport-fit=cover)
   the iOS home indicator overlays the bottom edge — pad past it. */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px calc(11px + env(safe-area-inset-bottom, 0px));
  background: rgba(10,15,24,0.95);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line); font-size: 13px; box-shadow: 0 -4px 16px rgba(0,0,0,.4);
}
.sticky-cta .btn { flex: 0 0 auto; }
@media (min-width: 720px) { .sticky-cta { display: none !important; } }

/* ===================== Portfolio + News ===================== */
code { background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; font-size: 12px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.chip {
  display: inline-block; font-size: 12px; padding: 3px 9px; border-radius: 4px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
}
.chip.ai { background: #0d1c2c; border-color: var(--accent); color: var(--accent); }

.disclaimer-note { margin-top: 12px; }

/* ===================== Account ===================== */
.account-status {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.account-status .status-right { display: flex; align-items: center; gap: 12px; }
.su-card { display: flex; flex-direction: column; gap: 8px; }
.su-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.su-action { margin-top: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Free track-record snapshot on each unlock card (identity + credibility at POS). */
.su-stats { display: flex; gap: 18px; margin: 2px 0 4px; flex-wrap: wrap; }
.su-stat b { display: block; font: 600 15px var(--mono, monospace); line-height: 1.15; }
.su-stat span { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.su-action .alt-link { margin-left: auto; color: var(--muted); white-space: nowrap; }
/* Inline model-portfolio reveal (the payoff after unlocking). */
.su-reveal { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 12px; animation: ex-pop .22s ease; }
.su-reveal .alloc-h { margin: 0 0 8px; font-size: 13px; }
.su-reveal .depth-table { width: 100%; }
.sm-reveal { animation: ex-pop .28s ease; }

/* "I've executed this update" — the user's own follow/tracking checkbox (§4.3). */
.follow-row { display: flex; align-items: center; gap: 9px; margin: 12px 0 2px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2);
  font-size: 13px; color: var(--ink); cursor: pointer; user-select: none; }
.follow-row input { width: 16px; height: 16px; accent-color: var(--good); cursor: pointer; }
.follow-row:hover { border-color: var(--accent); }

/* Digest cold-build state (first view each week runs the AI summary). */
.digest-building { text-align: center; padding: 44px 20px; }
.digest-building .mascot { width: 48px; height: 48px; margin: 0 auto 14px; display: block; animation: dg-bob 1.4s ease-in-out infinite; }
.digest-building p { margin: 6px auto; max-width: 440px; }
@keyframes dg-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { .digest-building .mascot { animation: none; } }

/* TradingView chart + ticker embeds. */
.tv-wrap { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); min-height: 380px; }
.tv-wrap .tv-holder { width: 100%; }
/* TradingView ticker tape strip: NO fixed height — the container takes the
   widget's own height so nothing gets clipped (the old 46px box cut the tall
   layout; compact mode + auto height = founder-approved TV, uncut). The
   .tape-* rules below serve the ownTickerTape fallback component (unused on
   the landing but kept). */
.tv-ticker { margin: 0 0 20px; min-height: 46px; border: 1px solid var(--line);
  border-radius: 8px; overflow: hidden; background: var(--panel); }
.tv-ticker.own { height: 44px; display: flex; align-items: center; }
.tape-tag { flex: 0 0 auto; margin: 0 10px 0 12px; font-family: var(--mono);
  font-size: 10px; color: var(--muted); border: 1px solid var(--line);
  border-radius: 5px; padding: 2px 6px; letter-spacing: 1px; z-index: 1;
  background: var(--panel); }
.tape-clip { flex: 1; overflow: hidden; height: 100%; display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.tape-track { display: inline-flex; white-space: nowrap; will-change: transform;
  animation: tape-scroll 55s linear infinite; }
.tape-clip:hover .tape-track { animation-play-state: paused; }
@keyframes tape-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tape-track { animation: none; } }
.tape-item { display: inline-flex; align-items: center; gap: 8px; padding: 0 18px;
  font-family: var(--mono); font-size: 12.5px; border-right: 1px solid rgba(154, 163, 178, .15); }
.tape-item b { color: var(--ink); font-size: 12.5px; }
.tape-item .tape-px { color: var(--muted); }
/* Selectable holding rows that drive the live chart. */
.h-row td, .a-row td { transition: background .12s ease; }
.h-row:hover td, .a-row:hover td { background: var(--panel-2); }
.h-row.sel td, .a-row.sel td { background: var(--panel-2); }
.h-row.sel td:first-child, .a-row.sel td:first-child { box-shadow: inset 2px 0 0 var(--accent); }

/* Dashboard — ranked strategy rows + craft-your-own leg inputs. */
.rank-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--panel); margin-bottom: 8px; flex-wrap: wrap; }
.rank-row:hover { border-color: var(--accent); }
.rank-n { flex: 0 0 auto; width: 36px; text-align: center; font: 600 16px var(--mono, monospace); }
.rank-name { flex: 1 1 220px; min-width: 0; }
.rank-name b { font-size: 15px; }
.rank-stats { flex: 0 0 auto; font: 13px var(--mono, monospace); color: var(--muted); }
.rank-act { flex: 0 0 auto; margin-left: auto; }
.cyo-leg { gap: 8px; margin-bottom: 8px; }
.cyo-leg .cyo-sym { flex: 1 1 160px; }
.cyo-leg .cyo-w { flex: 0 0 120px; }
.cyo-leg .cyo-rm { flex: 0 0 auto; padding: 8px 14px; }

/* Research citations on the strategy page (credibility, §4.6). */
.refs { list-style: none; padding: 0; margin: 10px 0 14px; display: grid; gap: 8px; }
.refs li { padding: 10px 13px; border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 6px; background: var(--panel); }
.refs a { color: var(--ink); font-size: 13px; line-height: 1.55; }
.refs a:hover { color: var(--accent); }

/* News digest — big, rich source cards grouped by holding. (The briefing card +
   numbered takeaways are styled once, above, near .digest-stats — no duplicate here.) */
.news-groups { display: grid; gap: 24px; margin-top: 16px; }
.news-sym { margin: 0 0 12px; font-family: var(--mono, monospace); text-transform: uppercase;
  letter-spacing: .05em; font-size: 15px; color: var(--accent); display: flex; align-items: baseline; gap: 10px; }
.news-count { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--muted); }
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }

.news-card { display: flex; flex-direction: column; gap: 12px; padding: 18px; border: 1px solid var(--line);
  border-radius: 14px; background: linear-gradient(180deg, var(--panel), rgba(0,0,0,.12));
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.news-card:hover { transform: translateY(-3px); border-color: var(--accent);
  box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.news-meta { display: flex; align-items: center; gap: 8px; min-height: 20px; }
.news-fav { width: 20px; height: 20px; border-radius: 5px; flex: 0 0 auto; background: #fff1; object-fit: contain; }
.news-fav-x { display: inline-block; }
.news-pub { font-weight: 700; font-size: 13px; color: var(--ink); letter-spacing: .01em; }
.news-when { flex: 0 0 auto; }
.news-headline { font-size: 17px; line-height: 1.34; font-weight: 650; color: var(--ink); text-decoration: none;
  display: block; }
a.news-headline:hover { color: var(--accent); }
.news-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.news-tag { font-family: var(--mono, monospace); font-size: 11px; padding: 3px 9px; border: 1px solid var(--line);
  border-radius: 999px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.news-read { font-size: 13px; color: var(--accent); font-weight: 700; white-space: nowrap; }
.news-read:hover { text-decoration: underline; }

/* Brief highlight when arriving via "Unlock for $2" (?unlock=slug). */
.pulse { animation: pulse 1.1s ease-in-out 2; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(54, 198, 224, 0); }
  50% { box-shadow: 0 0 0 4px rgba(54, 198, 224, .55); }
}

/* ===================== Pixel mascot + hover explainers ===================== */
/* color drives the themed pixels (pupils, arms, antenna = currentColor). */
.mascot { display: block; image-rendering: pixelated; color: var(--accent); }
.mascot .pupil { transition: x .08s linear, y .08s linear; }   /* smooth eye glide */
.stat { cursor: help; }                 /* metrics are hover-to-explain */

/* Blink: the eyelids flick shut for a beat every few seconds. */
.mascot .sm-blink { opacity: 0; animation: sm-blink 4.2s steps(1) infinite; }
@keyframes sm-blink { 0%, 91%, 100% { opacity: 0; } 93%, 97% { opacity: 1; } }

/* Wave hello on page entry (one-time greeting wiggle). */
.mascot.wave { transform-origin: 50% 88%; animation: sm-wave .9s ease 1; }
@keyframes sm-wave {
  0%, 100% { transform: rotate(0); }
  18% { transform: rotate(-9deg); }
  44% { transform: rotate(7deg); }
  70% { transform: rotate(-4deg); }
}

/* The one-line discovery hint that replaced the static legend. */
.explain-hint {
  display: flex; align-items: center; gap: 10px; margin: 8px 0 0;
  color: var(--muted); font-size: 13px;
}
.explain-hint .mascot { width: 26px; }

/* The pop-up: the mascot beside a plain-language speech bubble. */
#sm-explain {
  position: fixed; z-index: 100; display: none; gap: 11px; align-items: flex-start;
  max-width: 290px; pointer-events: none;
  background: var(--panel-2); border: 1px solid var(--accent); border-radius: 4px;
  padding: 11px 13px; box-shadow: 0 8px 28px rgba(0,0,0,.55), 0 0 14px rgba(52,210,236,.25);
}
#sm-explain.show { display: flex; animation: ex-pop .22s cubic-bezier(.2,.9,.3,1.5); }
@keyframes ex-pop {
  0% { opacity: 0; transform: translateY(7px) scale(.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
#sm-explain .ex-bot { flex: 0 0 auto; }
#sm-explain .ex-bot .mascot { width: 42px; }
/* The mascot hops when the bubble pops. */
#sm-explain.show .ex-bot .mascot { animation: sm-bounce .55s ease; }
@keyframes sm-bounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-5px); }
  55% { transform: translateY(0); }
  78% { transform: translateY(-2px); }
}

/* First-visit welcome card from Pip (bottom-left, slides in). */
#sm-welcome {
  position: fixed; left: 16px; bottom: 16px; z-index: 200;
  display: flex; gap: 12px; align-items: flex-start; max-width: 320px;
  background: var(--panel-2); border: 1px solid var(--accent); border-radius: 6px;
  padding: 13px 14px; box-shadow: 0 12px 34px rgba(0,0,0,.6);
  transform: translateY(16px); opacity: 0;
  transition: transform .28s ease, opacity .28s ease;
}
#sm-welcome.show { transform: translateY(0); opacity: 1; }
#sm-welcome .ex-bot .mascot { width: 46px; }
#sm-welcome .w-body { display: flex; flex-direction: column; gap: 6px; }
#sm-welcome .w-body b { font-family: var(--display); font-size: 15px; }
#sm-welcome .w-body span { color: var(--muted); font-size: 13px; line-height: 1.5; }
#sm-welcome .w-close { align-self: flex-start; margin-top: 4px; }
@media (max-width: 520px) {
  /* Explicit viewport-based width (right:auto + 100vw) so the card can't spill past
     the right edge. `left+right+100%` mis-sized to ~400px because % tracked the
     inflated containing block; 100vw is the true viewport regardless of overflow. */
  #sm-welcome { left: 10px; right: auto; bottom: 10px; width: calc(100vw - 20px); max-width: none; }
}

/* Pip in the footer. */
.foot-pip { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.foot-pip .mascot { width: 22px; }
.foot-pip b { color: var(--ink); }

/* Pip "buddy": ONE Pip with a home in the bottom-right corner. He sits on a
   high-contrast lit "pod" so he pops against any background. On hover-to-explain
   he ducks down at his current spot, instantly repositions next to the metric
   (left/top are NOT transitioned -> a clean "teleport"), and pops back up with a
   speech bubble above him. hide -> he teleports home. */
#sm-buddy {
  position: fixed; left: 0; top: 0; z-index: 150; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transform-origin: 50% 100%;
  transform: translateY(34px) scale(.38); opacity: 0;        /* ducked (default) */
  transition: transform .11s ease-in, opacity .09s ease;     /* fast snap DOWN (duck) */
  will-change: transform, opacity;
}
/* popped UP: quick but springy — overshoots past 1 then settles (a little boing). */
#sm-buddy.up {
  transform: translateY(0) scale(1); opacity: 1;
  transition: transform .3s cubic-bezier(.3, 1.75, .45, 1), opacity .12s ease;
}

#sm-buddy .sm-bubble {
  /* FIXED width (not max-width): align-items:center shrink-wraps the bubble, and
     the width:100% meter svg makes that intrinsic width unstable at measure time
     — the column briefly read ~107px, so the centred pod drifted ~100px right of
     the metric after it settled (founder: "za daleko od myszki"). A fixed width
     makes offsetWidth deterministic and the pod anchor exact. */
  width: 296px; max-width: calc(100vw - 24px);
  pointer-events: none; opacity: 0; max-height: 0; overflow: hidden;
  background: var(--panel-2); border: 1px solid var(--accent); border-radius: 6px; padding: 0 13px;
  box-shadow: 0 10px 30px rgba(0,0,0,.55), 0 0 16px var(--plot-glow);
  transition: opacity .2s ease .06s;
}
/* Open: sized to CONTENT, capped to the viewport with a scroll safety-net so the
   rich 6-section metric bubbles never clip (the old fixed 260/440px caps cut
   them off — founder-reported). */
#sm-buddy.has-bubble .sm-bubble { opacity: 1; max-height: min(78vh, 560px);
  overflow-y: auto; padding: 12px 14px; }
#sm-buddy .sm-bubble b { display: block; font-family: var(--display); color: var(--ink); font-size: 14px; margin-bottom: 3px; }
#sm-buddy .sm-bubble span { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
#sm-buddy .sm-bubble > :first-child { margin-top: 0; }
#sm-buddy .sm-bubble > :last-child { margin-bottom: 0; }

/* Pip's metric school — the rich explainer bubble: pixel meter, a $1,000 example
   box computed from the hovered value, and Pip's goofy verdict line. */
.sm-bubble .ex-viz { margin: 8px 0 7px; }
.sm-bubble .ex-meter { display: block; width: 100%; height: 15px; }
.sm-bubble .ex-ex { margin-top: 8px; padding: 8px 10px; background: rgba(52, 210, 236, .08);
  border-left: 2px solid var(--accent); border-radius: 6px; font-size: 12.5px;
  line-height: 1.5; color: var(--ink); }
.sm-bubble .ex-life { margin-top: 7px; padding: 7px 9px; background: rgba(245, 166, 35, .07);
  border-left: 2px solid #f5a623; border-radius: 6px; font-size: 12px; line-height: 1.5;
  color: var(--muted); }
.sm-bubble .ex-verdict { margin-top: 7px; font-size: 12px; font-style: italic; color: #f5a623; }
/* Ranked-row figures are hover-explainable too — a subtle dotted hint. */
.rank-stats [data-explain] { cursor: help; border-bottom: 1px dotted rgba(154, 163, 178, .35); }

/* The lit pod: a bright accent ring + bloom = strong contrast, always visible. */
#sm-buddy .sm-pod {
  pointer-events: auto; cursor: pointer;
  background: radial-gradient(120% 120% at 50% 28%, var(--panel-2), var(--panel));
  border: 1.5px solid var(--accent); border-radius: 14px; padding: 7px 9px 4px;
  box-shadow: 0 6px 20px rgba(0,0,0,.55), 0 0 22px var(--plot-glow), inset 0 0 12px rgba(0,0,0,.4);
}
#sm-buddy .sm-pod .mascot { width: 56px; }
#sm-buddy .sm-pod.hop { animation: sm-cheer .55s ease; transform-origin: 50% 90%; }
@media (max-width: 640px) {
  #sm-buddy .sm-pod { padding: 5px 7px 3px; }
  #sm-buddy .sm-pod .mascot { width: 44px; }
  #sm-buddy .sm-bubble { width: min(260px, calc(100vw - 24px)); }
  /* At home on a narrow screen, hug the RIGHT edge: align by the pod, not the wide
     bubble column (~260px), so Pip rests in the corner instead of mid-screen over
     the form. Only at .home — placeBy() (metric hover) removes .home and keeps the
     centred pod its anchoring assumes. transform-origin -> corner so the pop-in
     "boing" scales from the pod, not the column centre. */
  #sm-buddy.home { align-items: flex-end; transform-origin: 100% 100%; }
}

/* Pip cheers (a happy hop) + a celebratory toast on conversion. */
.mascot.cheer { animation: sm-cheer .6s ease; transform-origin: 50% 90%; }
@keyframes sm-cheer {
  0%, 100% { transform: translateY(0) scale(1); }
  25% { transform: translateY(-8px) scale(1.06); }
  50% { transform: translateY(0) scale(1); }
  72% { transform: translateY(-4px); }
}
#sm-cheer {
  position: fixed; left: 50%; bottom: 22px; z-index: 210; pointer-events: none;
  display: none; gap: 11px; align-items: center;
  max-width: min(440px, calc(100vw - 28px));            /* long cheers wrap, never run off-edge */
  background: var(--panel-2); border: 1px solid var(--accent); border-radius: 6px;
  padding: 11px 15px; box-shadow: 0 12px 34px rgba(0,0,0,.6);
  opacity: 0; transform: translateX(-50%) translateY(16px);
  transition: transform .25s ease, opacity .25s ease;
}
#sm-cheer.show { display: flex; opacity: 1; transform: translateX(-50%) translateY(0); }
#sm-cheer .ex-bot { flex: 0 0 auto; }
#sm-cheer .ex-bot .mascot { width: 40px; }
#sm-cheer .ex-bubble b { display: block; font-family: var(--display); color: var(--ink);
  font-size: 15px; line-height: 1.35; }

/* Pip's contextual tip (anchored near an element; click to dismiss). */
#sm-tip {
  position: fixed; z-index: 150; display: none; gap: 11px; align-items: flex-start;
  max-width: 280px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--accent); border-radius: 6px;
  padding: 11px 13px; box-shadow: 0 10px 30px rgba(0,0,0,.55);
}
#sm-tip.show { display: flex; animation: ex-pop .22s cubic-bezier(.2,.9,.3,1.5); }
#sm-tip .ex-bot { flex: 0 0 auto; }
#sm-tip .ex-bot .mascot { width: 40px; }
#sm-tip .ex-bubble span { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.5; }

/* CRT power-on for the hero monitor (the depth chart blooms open on load). */
.hero-plot.boot { animation: power-on .7s ease 1; transform-origin: center; }
@keyframes power-on {
  0% { transform: scaleY(.012); opacity: 0; filter: brightness(3.2); }
  9% { transform: scaleY(.012); opacity: 1; }
  34% { transform: scaleY(1); filter: brightness(1.7); }
  100% { transform: scaleY(1); opacity: 1; filter: brightness(1); }
}

/* Hero growth chart: the line draws itself in after the power-on, the area fades
   up under it, and the end-of-line dot lands with a glow. */
.eq-chart .eq-line { stroke-dasharray: 100; stroke-dashoffset: 100;
  filter: drop-shadow(0 0 4px rgba(52,210,236,.7)) drop-shadow(0 0 9px rgba(47,224,106,.45)); }
.eq-chart .eq-area { opacity: 0; }
.eq-chart .eq-dot { opacity: 0; filter: drop-shadow(0 0 7px rgba(156,255,92,.95)); }
.hero-plot.boot .eq-line { animation: eq-draw 1.25s cubic-bezier(.4,0,.2,1) .35s forwards; }
.hero-plot.boot .eq-area { animation: eq-fade .9s ease .75s forwards; }
.hero-plot.boot .eq-dot  { animation: eq-fade .35s ease 1.5s forwards, eq-ping 2.4s ease 1.9s infinite; }
@keyframes eq-draw { to { stroke-dashoffset: 0; } }
@keyframes eq-fade { to { opacity: 1; } }
@keyframes eq-ping { 0%,100% { r: 3.5; } 50% { r: 5.2; } }

/* A quiet text-button (the tour cue + similar inline triggers). */
.link-btn {
  display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; padding: 0;
  color: var(--accent); font: inherit; font-size: 13.5px; cursor: pointer; text-shadow: var(--glow);
}
.link-btn:hover { text-decoration: underline; }
.link-btn .mascot { width: 20px; }
.tour-cue { margin: 14px 0 4px; }

/* Tour mode: the bubble becomes interactive (Next button + step counter). */
#sm-buddy.tour .sm-bubble { pointer-events: auto; }

/* Pip AI chat — the bubble becomes a tiny messenger. Same z-layer as the buddy
   (150): the consent banner (260) and modals (280) still win, by design. */
#sm-buddy.chat .sm-bubble { pointer-events: auto; }
.pc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pc-head b { font-family: var(--display); color: var(--ink); font-size: 14px; }
.pc-ai { font: 600 9px var(--mono, monospace); letter-spacing: .08em; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 4px; padding: 1px 5px; }
.pc-x { margin-left: auto; background: none; border: 0; color: var(--muted);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px; }
.pc-x:hover { color: var(--ink); }
.pc-log { max-height: min(44vh, 340px); overflow-y: auto; display: flex;
  flex-direction: column; gap: 7px; padding: 2px 0 8px; }
.pc-msg { max-width: 92%; padding: 7px 10px; border-radius: 9px; font-size: 12.5px;
  line-height: 1.5; overflow-wrap: anywhere; }
.pc-pip { align-self: flex-start; background: var(--panel); border: 1px solid var(--line);
  color: var(--ink); border-bottom-left-radius: 3px; }
.pc-user { align-self: flex-end; background: rgba(245, 166, 35, .14);
  border: 1px solid var(--accent); color: var(--ink); border-bottom-right-radius: 3px; }
.pc-form { display: flex; gap: 6px; }
.pc-form .pc-in { flex: 1; min-width: 0; font-size: 13px; padding: 8px 10px; }
.pc-form .btn { flex: 0 0 auto; }
.pc-dis { display: block; margin-top: 7px; color: var(--muted); font-size: 10.5px;
  font-style: italic; line-height: 1.4; }
/* typing indicator: three phosphor dots */
.pc-typing { display: inline-flex; gap: 4px; align-items: center; min-height: 18px; }
.pc-typing i { width: 6px; height: 6px; border-radius: 1px; background: var(--accent);
  animation: pc-blink 1.1s ease-in-out infinite; }
.pc-typing i:nth-child(2) { animation-delay: .18s; }
.pc-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes pc-blink { 0%, 100% { opacity: .25; } 45% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pc-typing i { animation: none; } }
#sm-buddy .b-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px;
}
#sm-buddy .b-step { color: var(--muted); font: 500 11px var(--mono, monospace); letter-spacing: .04em; }
/* "Find your style" educational picker (§4-safe: navigation + education, no
   personalisation — describes how strategies are built, never "you should X").
   (max-height is handled once, viewport-aware, on .has-bubble above.) */
#sm-buddy .b-picks { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
#sm-buddy .b-picks .btn { width: 100%; text-align: center; }
#sm-buddy .fs-link { display: block; color: var(--accent); font-size: 13px; font-weight: 600;
  padding: 7px 11px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); }
#sm-buddy .fs-link:hover { border-color: var(--accent); text-decoration: none; }
#sm-buddy .fs-dis { display: block; margin-top: 10px; color: var(--muted); font-size: 11px; line-height: 1.45; font-style: italic; }
/* Small-button modifier (tour Next, welcome actions) — colours come from .btn. */
.btn.sm { padding: 6px 13px; font-size: 12.5px; border-radius: 5px; }
.w-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
#sm-explain .ex-bubble b {
  display: block; font-family: var(--display); color: var(--ink);
  font-size: 14px; margin-bottom: 3px;
}
#sm-explain .ex-bubble span { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.5; }

/* ===================== Liveliness: ticker, reveals, hovers ================= */
/* A scrolling market-data ticker (real cached closes; honest day-over-day move). */
.ticker {
  display: flex; align-items: stretch; margin: 0 0 20px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel); overflow: hidden;
}
.ticker-tag {
  flex: 0 0 auto; display: flex; align-items: center; gap: 7px; padding: 8px 13px;
  font: 600 11px var(--mono, monospace); letter-spacing: .08em; color: var(--accent);
  background: var(--panel-2); border-right: 1px solid var(--line); white-space: nowrap;
}
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good);
  box-shadow: 0 0 6px var(--good); animation: live-pulse 1.6s ease infinite; }
@keyframes live-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.ticker-win { flex: 1 1 auto; overflow: hidden; position: relative; }
.ticker-win::after {            /* soft fade at the right edge */
  content: ""; position: absolute; inset: 0 0 0 auto; width: 48px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--panel));
}
.ticker-track { display: inline-flex; gap: 28px; padding: 8px 0; white-space: nowrap;
  will-change: transform; animation: ticker-scroll 46s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tk { font: 500 12.5px var(--mono, monospace); color: var(--ink); }
.tk b { color: var(--muted); font-weight: 600; margin-right: 7px; text-transform: uppercase; }
.tk i { font-style: normal; margin-left: 7px; font-weight: 600; }

/* Scroll-reveal: content rises + fades in as it enters view (JS adds .reveal-on
   on capable, motion-OK browsers; without it everything is plainly visible). */
.reveal-on .reveal { opacity: 0; transform: translateY(20px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1); }
.reveal-on .reveal.in { opacity: 1; transform: none; }

/* Cards come alive on hover: lift + accent ring + bloom. */
.card { transition: transform .14s ease, box-shadow .22s ease, border-color .22s ease; }
.card:hover { transform: translateY(-3px); border-color: var(--accent);
  box-shadow: 0 12px 30px rgba(0,0,0,.45), 0 0 18px var(--plot-glow); }

/* "By the numbers" strip — honest facts that count up when they scroll in. */
.numstrip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 28px 0;
  background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
@media (min-width: 720px) { .numstrip { grid-template-columns: repeat(4, 1fr); } }
.numstrip .ns { background: var(--panel); padding: 20px 14px; text-align: center; }
.numstrip .ns b { display: block; font-family: var(--display); font-size: clamp(26px, 5vw, 38px);
  color: var(--accent); text-shadow: var(--glow); line-height: 1; }
.numstrip .ns span { display: block; margin-top: 8px; color: var(--muted); font-size: 12.5px; }

/* Hero "dust": slow-drifting pixel motes behind the headline (synthwave register). */
.hero-dust { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-dust i { position: absolute; width: 4px; height: 4px; background: var(--accent);
  opacity: 0; image-rendering: pixelated; box-shadow: 0 0 5px var(--accent);
  animation: dust-rise linear infinite; }
@keyframes dust-rise {
  0% { transform: translateY(24px); opacity: 0; }
  12% { opacity: .55; } 88% { opacity: .55; }
  100% { transform: translateY(-140px); opacity: 0; }
}
.hero-dust i:nth-child(1)  { left: 5%;  bottom: 6%;  animation-duration: 7.0s; animation-delay: 0s; }
.hero-dust i:nth-child(2)  { left: 16%; bottom: 22%; width: 3px; height: 3px; animation-duration: 9.2s; animation-delay: 1.4s; }
.hero-dust i:nth-child(3)  { left: 27%; bottom: 10%; animation-duration: 8.0s; animation-delay: 2.6s; }
.hero-dust i:nth-child(4)  { left: 38%; bottom: 30%; width: 5px; height: 5px; animation-duration: 10.4s; animation-delay: .6s; }
.hero-dust i:nth-child(5)  { left: 49%; bottom: 14%; width: 3px; height: 3px; animation-duration: 7.8s; animation-delay: 3.2s; }
.hero-dust i:nth-child(6)  { left: 58%; bottom: 26%; animation-duration: 9.6s; animation-delay: 1.0s; }
.hero-dust i:nth-child(7)  { left: 67%; bottom: 8%;  animation-duration: 8.6s; animation-delay: 2.0s; }
.hero-dust i:nth-child(8)  { left: 74%; bottom: 34%; width: 3px; height: 3px; animation-duration: 11.0s; animation-delay: .3s; }
.hero-dust i:nth-child(9)  { left: 82%; bottom: 16%; width: 5px; height: 5px; animation-duration: 7.4s; animation-delay: 3.8s; }
.hero-dust i:nth-child(10) { left: 90%; bottom: 28%; animation-duration: 9.0s; animation-delay: 1.8s; }
.hero-dust i:nth-child(11) { left: 12%; bottom: 40%; width: 3px; height: 3px; animation-duration: 10.0s; animation-delay: 2.4s; }
.hero-dust i:nth-child(12) { left: 63%; bottom: 44%; animation-duration: 8.4s; animation-delay: .9s; }

/* The hero glow gently breathes. */
.hero::before { animation: hero-breathe 7s ease-in-out infinite; }
@keyframes hero-breathe { 0%, 100% { opacity: .82; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }

/* Command palette (⌘K / Ctrl-K or "/") — jump to any strategy or page. */
#sm-cmd { position: fixed; inset: 0; z-index: 300; display: none; padding-top: 12vh;
  background: rgba(3,6,12,.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
#sm-cmd.show { display: block; animation: ex-pop .16s ease; }
#sm-cmd .cmd-box { width: min(560px, 92vw); margin: 0 auto; background: var(--panel-2);
  border: 1px solid var(--accent); border-radius: 10px; overflow: hidden;
  box-shadow: 0 22px 60px rgba(0,0,0,.6), 0 0 26px var(--plot-glow); }
#sm-cmd input { width: 100%; box-sizing: border-box; padding: 15px 16px; border: 0; outline: 0;
  background: transparent; color: var(--ink); font: 500 15px var(--mono, monospace); }
#sm-cmd .cmd-list { max-height: 52vh; overflow: auto; border-top: 1px solid var(--line); }
#sm-cmd .cmd-item { display: flex; align-items: center; gap: 10px; padding: 11px 16px; cursor: pointer;
  border-left: 2px solid transparent; }
#sm-cmd .cmd-item.active { background: var(--panel); border-left-color: var(--accent); }
#sm-cmd .cmd-item b { font-weight: 600; color: var(--ink); font-size: 14px; }
#sm-cmd .cmd-item span { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sm-cmd .ci-kind { margin-left: auto; flex: 0 0 auto; font: 600 10px var(--mono, monospace); letter-spacing: .06em;
  color: var(--accent); text-transform: uppercase; }
#sm-cmd .cmd-hint { padding: 8px 16px; border-top: 1px solid var(--line); color: var(--muted); font: 11px var(--mono, monospace); }

/* Scroll progress bar (top edge). */
#scroll-prog { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100;
  background: linear-gradient(90deg, var(--accent), var(--good)); box-shadow: 0 0 8px var(--plot-glow);
  transition: width .08s linear; }

/* Pixel confetti burst (on conversion / party mode). */
.confetti { position: fixed; z-index: 209; width: 7px; height: 7px; pointer-events: none;
  image-rendering: pixelated; will-change: transform, opacity;
  animation: confetti-fly var(--cd, 1.1s) cubic-bezier(.2,.7,.35,1) forwards; }
@keyframes confetti-fly {
  0% { transform: translate(0,0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--cx,0), var(--cy,-120px)) rotate(var(--cr,180deg)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal-on .reveal { opacity: 1 !important; transform: none !important; }   /* never hide content */
}

/* Per-ticker SEO pages: SSR stats + Q&A (crawlable substance, not just the JS chart). */
.stock-stats .card h3 { margin: 2px 0 0; font-size: 18px; }
.qa-block h3 { font-size: 15px; margin: 14px 0 4px; }
.qa-block p { margin: 0 0 6px; font-size: 14px; line-height: 1.6; }

/* /learn education hub: readable long-form article body. */
.article-body { max-width: 720px; }
.article-body h2 { font-size: 19px; margin: 22px 0 8px; }
.article-body p { margin: 0 0 12px; line-height: 1.7; font-size: 15px; }

/* -------------------------------------------------------------------------
   /learn INDEX — a "curriculum path": numbered modules joined by a spine, so
   the hub reads as a course to work through, not a wall of links. Pure CSS
   (CSP-safe: no inline script/handlers); counters number the modules.
   ------------------------------------------------------------------------- */
.learn-hub { counter-reset: lm; margin-top: 4px; }

/* scope-scoped intro strip: the "you can do this" numbers up front */
.learn-intro {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px;
  margin: 2px 0 30px; padding: 13px 2px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.learn-intro .li-stat { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.learn-intro .li-stat b { color: var(--accent); font-size: 16px; margin-right: 6px; text-shadow: var(--glow); }
.learn-intro .li-note { color: var(--muted); font-size: 13px; margin-left: auto; }

/* per-module accent (--lm): each section owns a brand-palette colour, set by the
   [data-accent] key from SECTIONS. Falls back to cyan. */
.learn-module { position: relative; margin: 0 0 30px; padding-left: 64px; --lm: var(--accent); }
.learn-module[data-accent="hot"]    { --lm: var(--hot); }
.learn-module[data-accent="cyan"]   { --lm: var(--accent); }
.learn-module[data-accent="good"]   { --lm: var(--good); }
.learn-module[data-accent="purple"] { --lm: #b07cff; }
.learn-module[data-accent="gold"]   { --lm: var(--gold); }
.learn-module[data-accent="steel"]  { --lm: #7f9bc4; }

/* the spine linking module numbers into one path — tinted to the module colour */
.learn-module::before {
  content: ""; position: absolute; left: 22px; top: 50px; bottom: -14px; width: 2px;
  background: linear-gradient(color-mix(in srgb, var(--lm) 32%, var(--line)), rgba(27,39,64,0));
}
.learn-module:last-child::before { display: none; }

.lm-head { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 14px; }
.lm-num {
  counter-increment: lm; position: absolute; left: 0; top: -2px;
  width: 46px; height: 46px; display: grid; place-items: center;
  font-family: var(--mono); font-size: 16px; font-weight: 700; color: var(--lm);
  border: 1px solid color-mix(in srgb, var(--lm) 55%, var(--line));
  border-radius: 12px; background: var(--panel);
  box-shadow: 0 0 0 5px var(--bg), 0 0 12px color-mix(in srgb, var(--lm) 45%, transparent);
}
.lm-num::before { content: counter(lm, decimal-leading-zero); }
.lm-title { min-width: 0; }
.lm-head h2 { margin: 0; font-size: 19px; letter-spacing: -.01em; }
.lm-emoji { font-size: 18px; }
.lm-blurb { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; }
.lm-count {
  margin-left: auto; flex: none; align-self: center; white-space: nowrap;
  font-family: var(--mono); font-size: 11px; color: color-mix(in srgb, var(--lm) 70%, var(--muted));
  border: 1px solid color-mix(in srgb, var(--lm) 40%, var(--line));
  border-radius: 999px; padding: 3px 10px; background: color-mix(in srgb, var(--lm) 8%, transparent);
}

/* cards: quiet by default, the module-colour rail + "Read →" reveal on hover/focus */
.learn-card { position: relative; display: flex; flex-direction: column;
  border-top: 2px solid transparent; transition: border-color .15s ease, transform .15s ease; }
.learn-card:hover, .learn-card:focus-visible {
  border-top-color: var(--lm);
  border-color: color-mix(in srgb, var(--lm) 45%, var(--line)); }
.learn-card h3 { padding-right: 16px; }
.learn-card .lc-go {
  margin-top: auto; padding-top: 11px; font-family: var(--mono);
  font-size: 12px; letter-spacing: .02em; color: var(--muted);
  transition: color .15s ease;
}
.learn-card .lc-go::after { content: " \2192"; transition: margin-left .15s ease; }
.learn-card:hover .lc-go, .learn-card:focus-visible .lc-go { color: var(--lm); }
.learn-card:hover .lc-go::after { margin-left: 3px; }

@media (max-width: 560px) {
  .learn-module { padding-left: 0; }
  .learn-module::before { display: none; }
  .lm-head { flex-wrap: wrap; }
  .lm-num { position: static; margin-bottom: 6px; box-shadow: var(--glow); }
  .lm-count { margin-left: 0; }
  .learn-intro .li-note { margin-left: 0; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .learn-card, .learn-card .lc-go::after { transition: none; }
}
.article-body ul { margin: 0 0 12px 20px; }
.article-body li { margin: 4px 0; line-height: 1.6; font-size: 15px; }
.learn-more-list { margin: 0 0 8px 20px; }
.learn-more-list li { margin: 6px 0; }

/* In-app back control (standalone PWA only; app.js reveals it — iOS gives no
   browser chrome and no edge-swipe back gesture in installed web apps). */
.nav-back { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: 0 0 auto; margin-right: 2px;
  background: none; border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); font-size: 16px; line-height: 1; cursor: pointer; }
.nav-back:active { background: var(--panel-2); }
.nav-back[hidden] { display: none; }

/* ----- app tab bar (mobile): the primary nav moves to the bottom ----------- */
/* --tabbar-h is 0 on desktop so every calc() below collapses to the old values;
   at <=640px it carries the bar height + the iOS home-indicator safe area, and
   every bottom-anchored layer (sticky buy bar, cookie banner, Pip welcome) lifts
   by it. Z-ladder: sticky-cta 20 < buddy 150 < welcome 200 < tabbar 230 <
   banner 260 < modal 280 < palette 300. */
:root { --tabbar-h: 0px; }
.tabbar { display: none; }
@media (max-width: 640px) {
  :root { --tabbar-h: calc(56px + env(safe-area-inset-bottom, 0px)); }
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 230;
    display: grid; grid-template-columns: repeat(5, 1fr);
    height: var(--tabbar-h);
    padding: 5px 4px calc(5px + env(safe-area-inset-bottom, 0px));
    background: rgba(10, 15, 24, 0.92);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
  }
  .tabbar .tab { position: relative; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px; color: var(--muted);
    font-size: 10.5px; }
  /* Full-colour pixel sprites (Pip's palette baked into the rects); the ACTIVE
     tab pops with a glow + a lit indicator notch on the bar's top edge. */
  .tabbar .tab svg { width: 22px; height: 22px; }
  .tabbar .tab.active { color: var(--accent); }
  .tabbar .tab.active svg { filter: drop-shadow(0 0 5px var(--plot-glow)); }
  .tabbar .tab.active::before { content: ""; position: absolute; top: -5px;
    left: 50%; transform: translateX(-50%); width: 26px; height: 2px;
    background: var(--accent); box-shadow: 0 0 8px var(--accent); }
  .tabbar .tab:hover { text-decoration: none; color: var(--ink); }
  /* the links live in the tab bar now - the topbar keeps brand + CTA */
  .topbar nav a:not(.nav-cta) { display: none; }
  /* content + every bottom-anchored layer clears the bar */
  .container { padding-bottom: calc(40px + var(--tabbar-h)); }
  footer.disclaimer { margin-bottom: var(--tabbar-h); }
  .sticky-cta { bottom: var(--tabbar-h); padding-bottom: 11px; }
  .cookie-banner { bottom: calc(var(--tabbar-h) + 12px); }
  #sm-welcome { bottom: calc(var(--tabbar-h) + 10px); }
}

/* ----- tab bar game-feel ---------------------------------------------------- */
/* Press = instant squish (:active), tap = spring hop (same overshoot curve as
   Pip`s pop-in), landing = the current tab hops once as the page opens, and the
   active notch breathes. All of it sits on transform/opacity (compositor-only)
   and is switched off under prefers-reduced-motion. */
@keyframes tab-hop {
  0%   { transform: translateY(0) scale(1); }
  35%  { transform: translateY(-5px) scale(1.12); }
  65%  { transform: translateY(1px) scale(.95); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes notch-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.tabbar .tab svg { transition: transform .12s ease; }
.tabbar .tab:active svg { transform: scale(.85) translateY(1px); }
.tabbar .tab.hop svg { animation: tab-hop .34s cubic-bezier(.3, 1.6, .4, 1); }
.tabbar .tab.active svg { animation: tab-hop .4s cubic-bezier(.3, 1.6, .4, 1) .12s 1; }
.tabbar .tab.active::before { animation: notch-breathe 2.4s ease infinite; }
@media (prefers-reduced-motion: reduce) {
  .tabbar .tab svg, .tabbar .tab.active svg, .tabbar .tab.hop svg { animation: none; transition: none; }
  .tabbar .tab:active svg { transform: none; }
  .tabbar .tab.active::before { animation: none; }
}

/* iOS haptic shim (base.html): a label + native switch parked OFF-SCREEN.
   display:none or appearance:none would kill the native tick; no pointer-events
   games either — the label must stay fully activatable for label.click(). */
.haptic-switch { position: fixed; top: -1000px; left: 0; }

/* iOS direct-tap haptic overlays: a REAL native switch stretched invisibly over
   each tab / the back button (JS-injected on iOS only). The finger toggles the
   native control -> the system tick fires on every iOS >=17.4 incl. 26.5+,
   where programmatic label.click() haptics were patched out. opacity hides it;
   appearance/display changes would kill the native tick. */
.haptic-overlay { position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; margin: 0; z-index: 2; }
#nav-back { position: relative; }

/* Head-to-head comparison pages (/compare/<a>-vs-<b>): SSR metrics table. */
.cmp-table { width: 100%; border-collapse: collapse; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.cmp-table th, .cmp-table td { padding: 12px 16px; text-align: left;
  border-bottom: 1px solid var(--line); font-size: 14.5px; }
.cmp-table th { color: var(--accent); font-family: var(--display); }
.cmp-table td:first-child { color: var(--muted); }
.cmp-table tr:last-child td { border-bottom: none; }

/* /admin/content: the founder content-ops board (mobile-first checklists). */
.ct-row { margin-bottom: 12px; }
.ct-checks { margin: 10px 0 8px; }
.ct-ch { display: inline-flex; align-items: center; gap: 6px; font-size: 14px;
  color: var(--ink); cursor: pointer; }
.ct-ch input { width: 18px; height: 18px; accent-color: var(--accent); }
.ct-master { font-weight: 600; color: var(--accent); }
.ct-notes { width: 100%; min-height: 44px; margin-top: 6px; font-size: 13px;
  background: var(--panel-2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; }