/* ducky-site — dark-first, light via prefers-color-scheme. No third-party CSS, no runtime fetches. */


/* finding site.css:357 — palette v2's ':root' override used to set the near-black theme UNCONDITIONALLY,
   clobbering the light theme (light-mode visitors got near-black bg + near-black text, ~1.1:1). Per the
   SYSTEMDESIGN theme rules the COMPLETE light palette now lives on bare :root; the dark near-black palette
   is applied only to dark viewers — under @media(prefers-color-scheme:dark) guarded :root:not([data-theme=light])
   AND under :root[data-theme=dark]. The site stays dark-first: a dark-OS viewer is pixel-identical to before. */
:root {
  /* --- shared brand tokens (identical in both themes) --- */
  --accent: #ff9000;
  --accent-2: #ffa733;
  --accent-ink: #1a1400;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "PingFang SC", "Microsoft YaHei", monospace;

  /* --- finding site.css:463 — radius scale (replaces the 19-value radius soup) --- */
  --r-sm: 8px;    /* chips, badges, .copy, small controls */
  --r-md: 12px;   /* inputs, buttons, compact cards */
  --r-lg: 16px;   /* cards, modals, sheets */
  --r-xl: 24px;   /* track card, big mockups */
  --r-pill: 999px;
  --radius: var(--r-lg);   /* legacy alias (was 14px → nearest token) */

  /* --- finding site.css:84 — type scale (replaces the ~30-size continuum) --- */
  --fs-2xs: .7rem;
  --fs-xs: .75rem;
  --fs-sm: .8rem;
  --fs-base: .9rem;
  --fs-md: 1rem;
  --fs-lg: 1.1rem;
  --fs-xl: 1.35rem;
  --fs-2xl: 1.9rem;

  /* --- LIGHT palette (complete; the site renders in the viewer theme) --- */
  --bg: #fbfaf7;
  --bg-2: #f3f1ea;
  --surface: #ffffff;
  --surface-2: #f5f3ec;
  --border: #e3e0d6;
  --text: #141a21;
  --fg: var(--text);   /* alias: app.css/boards were written against --fg; tokens define --text */
  --muted: #4d5966;
  --faint: #5d6875;   /* finding site.css:12 — was #7b8794 (3.5:1, fails AA); ~5.6:1 on light bg/surface */
  --green: #187b35;
  --red: #cf222e;
  --orange: #b54700;
  /* Brand fills stay bright; small text and keyboard focus need more contrast. */
  --accent-text: var(--orange);
  --accent-text-hover: var(--orange);
  --focus-ring: var(--orange);
  --yellow: #8c5b00;
  --blue: #0969da;
  --bubble: #ffffff;
  --bubble-ink: #1f2a37;
  --phone: #101418;
  --shadow: 0 10px 40px rgba(20, 20, 0, .12);
  color-scheme: light;
}

/* DARK palette — palette v2 near-black + hot-orange accent (§5.3.3). Two selectors so both the OS
   preference and an explicit [data-theme=dark] win; kept byte-for-byte identical so the dark look is unchanged. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0a0a;
    --bg-2: #0f151d;
    --surface: #121212;
    --surface-2: #181818;
    --border: #262626;
    --text: #e6edf3;
    --muted: #9aa7b4;
    --faint: #8a95a2;   /* finding site.css:12 — was #6b7784 (4.1–4.3:1); ~6.8:1 on #0a0a0a */
    --green: #3fb950;
    --red: #f85149;
    --orange: #f0883e;
    --accent-text: var(--accent);
    --accent-text-hover: var(--accent-2);
    --focus-ring: var(--accent);
    --yellow: #d29922;
    --blue: #58a6ff;
    --bubble: #1d2733;
    --bubble-ink: #dfe7ef;
    --phone: #1a1f26;
    --shadow: 0 10px 40px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0a0a0a;
  --bg-2: #0f151d;
  --surface: #121212;
  --surface-2: #181818;
  --border: #262626;
  --text: #e6edf3;
  --muted: #9aa7b4;
  --faint: #8a95a2;
  --green: #3fb950;
  --red: #f85149;
  --orange: #f0883e;
  --accent-text: var(--accent);
  --accent-text-hover: var(--accent-2);
  --focus-ring: var(--accent);
  --yellow: #d29922;
  --blue: #58a6ff;
  --bubble: #1d2733;
  --bubble-ink: #dfe7ef;
  --phone: #1a1f26;
  --shadow: 0 10px 40px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  overflow-x: clip; /* not `hidden`: that would make body the scroll container and break anchor jumps */
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 750; }
h3 { font-size: var(--fs-lg); font-weight: 700; }
p { margin: 0 0 1em; }
small { font-size: .85em; }
.mono { font-family: var(--mono); font-feature-settings: "liga" 0; }
.mono-h2 { font-family: var(--mono); letter-spacing: 0; }
.center { text-align: center; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.wrap.narrow { max-width: 760px; }
.section { padding: 72px 0; border-top: 1px solid var(--border); }
.lead { font-size: var(--fs-lg); color: var(--muted); max-width: 62ch; margin-bottom: 2rem; }
.caption, .footnote, .spec, .caveat, .tier-note, .under, .microfaq { color: var(--muted); font-size: var(--fs-base); }
.footnote { margin-top: 1.5rem; }

.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--accent-ink); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.nav-row { display: flex; align-items: center; gap: 20px; height: 58px; }
.brand { font-weight: 800; color: var(--text); font-size: var(--fs-md); white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand-duck { font-size: var(--fs-xl); vertical-align: -2px; }
.nav-links { display: flex; gap: 18px; margin-left: 8px; }
.nav-links a { color: var(--muted); font-size: var(--fs-base); }
.nav-links a:hover { color: var(--text); text-decoration: none; }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.lang-toggle { color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 4px 10px; font-size: var(--fs-sm); white-space:nowrap; flex-shrink:0; }
.brand-short { display:none; }
@media(max-width:480px) { .nav .brand-name { display:none; }.brand-short { display:inline; }.nav-actions .nav-signin { margin-right:0; } }
@media(max-width:360px) { .nav .brand-short { display:none; } }
.lang-toggle:hover { border-color: var(--accent); text-decoration: none; }
@media (max-width: 760px) {
  .nav-links { display: none; }                 /* hide ALL inline links incl. 战绩台账 — they overflowed the header */
  .nav-row { gap: 10px; height: 54px; }
  .nav-actions { gap: 8px; }
  .brand { font-size: var(--fs-base); gap: 6px; }
  .nav-actions .btn-sm { padding: 6px 10px; font-size: var(--fs-xs); white-space: nowrap; }
  .nav-actions .lang-toggle { padding: 5px 7px; }
  .nav-signin { margin-right: 0; }
}
@media (max-width: 380px) {
  .brand-name { display: none; }   /* very narrow: logo only, keep the CTAs */
}

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 18px; border-radius: var(--r-md); font-weight: 700; font-size: var(--fs-md); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform .08s ease, background .15s ease; }
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-2); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--text); }
.btn-lg { padding: 14px 22px; font-size: var(--fs-md); }
.btn-sm { padding: 7px 12px; font-size: var(--fs-base); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.4rem 0 1rem; }
.cta-row.center { justify-content: center; }

/* ---------- badges ---------- */
.badge { display: inline-block; align-self: flex-start; width: max-content; max-width: 100%; font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: .06em; padding: 2px 8px; border-radius: var(--r-sm); border: 1px solid; margin-bottom: 8px; vertical-align: middle; }
.badge-backtest { color: var(--yellow); border-color: var(--yellow); }
.badge-live { color: var(--green); border-color: var(--green); }
.badge-roadmap { color: var(--blue); border-color: var(--blue); margin-bottom: 0; }
.badge-placeholder { color: var(--faint); border-color: var(--border); border-style: dashed; }
.receipt .badge + .badge { margin-top: -4px; }
.badge-inline { margin-bottom: 6px; }
.rate { font-weight: 700; }
.rate .n { font-weight: 400; color: var(--muted); font-size: .8em; }
.strip { font-size: var(--fs-sm); color: var(--muted); border-top: 1px dashed var(--border); padding-top: 12px; margin-top: 2rem; }

/* ---------- hero ---------- */
.hero { padding: 64px 0 56px; background: radial-gradient(1200px 500px at 80% -10%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 60%), var(--bg); }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.eyebrow { color: var(--muted); font-size: var(--fs-sm); margin-bottom: 1rem; }
.sub { font-size: var(--fs-lg); color: var(--muted); max-width: 60ch; }
.try { color: var(--muted); font-size: var(--fs-base); }
.proof-strip { font-size: var(--fs-sm); color: var(--faint); border-top: 1px solid var(--border); padding-top: 12px; margin-top: 1.4rem; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .hero { padding-top: 40px; } }

/* CSS-only phone frame */
.hero-visual { position: relative; display: flex; justify-content: center; }
.phone { position: relative; width: 320px; max-width: 100%; background: var(--phone); border-radius: 44px; padding: 14px 12px 20px; box-shadow: var(--shadow), inset 0 0 0 2px #2b3340; }
.phone-notch { width: 110px; height: 26px; background: #000; border-radius: 0 0 18px 18px; margin: -14px auto 8px; }
.phone-head { display: flex; align-items: center; gap: 10px; padding: 6px 8px 10px; border-bottom: 1px solid #2b3340; color: #e6edf3; }
.phone-head-text { display: flex; flex-direction: column; line-height: 1.2; }
.phone-head-text small { color: #8b98a5; font-size: var(--fs-2xs); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-lg); }
.phone-body { display: flex; flex-direction: column; gap: 10px; padding: 12px 4px 4px; background: linear-gradient(180deg, #0d1218, #0b0f14); border-radius: 0 0 30px 30px; min-height: 380px; }
.bubble { background: var(--bubble); color: var(--bubble-ink); border-radius: 14px 14px 14px 4px; padding: 10px 12px; font-family: var(--mono); font-size: var(--fs-xs); line-height: 1.5; border-left: 3px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.phone .bubble { background: #1d2733; color: #dfe7ef; }
.bubble-insider { border-left-color: var(--green); }
.bubble-strategic { border-left-color: var(--blue); }
.bubble-kindex { border-left-color: var(--red); }
.bubble-line { word-break: break-word; }
.bubble-title { font-weight: 700; }
.bubble-quote { margin-top: 4px; font-style: italic; }
.bubble-cta { margin-top: 6px; color: var(--faint); }
.bubble-ts { display: block; text-align: right; font-size: var(--fs-2xs); color: #8b98a5; margin-top: 4px; }
.duck-peek { position: absolute; right: 2%; top: -26px; font-size: 3rem; transform: rotate(-12deg); filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); }

/* ---------- receipts ---------- */
.receipt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 18px; }
.receipt { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; position: relative; }
.receipt-win { border-color: color-mix(in srgb, var(--green) 40%, var(--border)); }
.receipt-loss { border-color: color-mix(in srgb, var(--red) 55%, var(--border)); background: color-mix(in srgb, var(--red) 6%, var(--surface)); }
.receipt-kindex { border-color: color-mix(in srgb, var(--yellow) 50%, var(--border)); grid-column: span 1; }
.receipt h3 { font-size: var(--fs-md); margin-bottom: 2px; }
.receipt-meta { color: var(--muted); font-size: var(--fs-sm); margin-bottom: 10px; }
.receipt-ret { font-size: 2rem; font-weight: 800; margin: 0 0 6px; line-height: 1; }
.receipt-ret.pos { color: var(--green); }
.receipt-ret.neg { color: var(--red); }
.receipt-body { font-size: var(--fs-md); margin-bottom: .6rem; }
.receipt-foot { color: var(--muted); font-size: var(--fs-sm); }
.receipt-links { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; font-size: var(--fs-sm); padding-top: 10px; border-top: 1px dashed var(--border); align-items: center; }
.receipt-links a.na { color: var(--faint); pointer-events: none; text-decoration: line-through; }
.copy { font: inherit; font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 3px 8px; cursor: pointer; margin-left: auto; }
.copy:hover { color: var(--text); }
.copy.done { color: var(--green); border-color: var(--green); }
.receipt-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.pane { height: 78px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface-2); display: flex; align-items: flex-end; padding: 6px 8px; font-family: var(--mono); font-size: var(--fs-2xs); color: var(--muted); position: relative; overflow: hidden; }
.pane-alert { color: var(--red); font-weight: 700; }
.spark { position: absolute; left: 8px; right: 8px; bottom: 26px; height: 32px; background: linear-gradient(90deg, transparent 0 35%, color-mix(in srgb, var(--green) 45%, transparent) 35% 36%, transparent 36%), linear-gradient(to top right, transparent 49%, var(--green) 50%, transparent 51%); opacity: .9; }
.honesty { margin-top: 22px; background: var(--surface-2); border: 1px solid var(--border); border-left: 4px solid var(--faint); border-radius: var(--r-md); padding: 16px 18px; color: var(--muted); font-size: var(--fs-base); }
.honesty p { margin-bottom: .5rem; }

/* ---------- feed ---------- */
.feed-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .feed-grid { grid-template-columns: 1fr; } }
.feed-item .spec { font-size: var(--fs-xs); margin-bottom: 10px; }
.feed-item .bubble { font-size: var(--fs-sm); }
.guardrail { margin-top: 1.5rem; color: var(--muted); font-size: var(--fs-base); border-left: 3px solid var(--border); padding-left: 12px; }

/* ---------- kindex ---------- */
.kindex-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 28px; align-items: start; }
.kindex-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 800px) { .kindex-grid, .kindex-cols { grid-template-columns: 1fr; } }
.ladder-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.band { padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); border-left-width: 5px; font-family: var(--mono); font-size: var(--fs-base); }
.band-1 { border-left-color: var(--green); }
.band-2 { border-left-color: var(--yellow); }
.band-3 { border-left-color: var(--orange); }
.band-4 { border-left-color: var(--red); background: color-mix(in srgb, var(--red) 8%, var(--surface)); }
.backtest-box { background: var(--surface); border: 1px solid color-mix(in srgb, var(--yellow) 50%, var(--border)); border-radius: var(--radius); padding: 18px 20px; }
.bt-line { font-size: var(--fs-base); }
.bt-stop { font-size: var(--fs-base); color: var(--orange); margin-bottom: 0; }
.checks, .crosses { padding-left: 0; list-style: none; }
.checks li, .crosses li { position: relative; padding-left: 26px; margin-bottom: 8px; }
.checks li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.crosses li::before { content: "✕"; position: absolute; left: 0; color: var(--red); font-weight: 700; }
.caveat { border-left: 3px solid var(--yellow); padding-left: 12px; }

/* ---------- boards ---------- */
.board-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1000px) { .board-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .board-grid { grid-template-columns: 1fr; } }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px; }
.tile h3 { font-size: var(--fs-md); }
.tile p { color: var(--muted); font-size: var(--fs-base); margin: 0; }

/* ---------- DM analyst ---------- */
.analyst-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 32px; align-items: start; }
@media (max-width: 860px) { .analyst-grid { grid-template-columns: 1fr; } }
.card-mock { background: var(--bubble); color: var(--bubble-ink); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--r-lg); padding: 16px 18px; font-size: var(--fs-sm); line-height: 1.7; }
.card-title { font-weight: 700; margin-bottom: 4px; }
.card-pro { opacity: .85; }
.card-note { margin-top: 10px; font-size: var(--fs-2xs); color: var(--faint); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1rem; }
.chip { font-family: var(--mono); font-size: var(--fs-sm); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 5px 12px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 1.2rem; font-size: var(--fs-base); }
.kv dt { color: var(--muted); font-weight: 600; }
.kv dd { margin: 0; }

/* ---------- local ---------- */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 1.5rem 0 2rem; }
@media (max-width: 900px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.stat b { font-size: var(--fs-md); color: var(--accent); word-break: break-word; }
.stat span { color: var(--muted); font-size: var(--fs-base); }
.local-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 800px) { .local-cols { grid-template-columns: 1fr; } }
.promises ol { padding-left: 1.2rem; }
.promises li { margin-bottom: 8px; font-weight: 600; }
.thin { border-left: 3px solid var(--faint); padding-left: 14px; color: var(--muted); }

/* ---------- who ---------- */
.who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 800px) { .who-grid { grid-template-columns: 1fr; } }
.who-col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 20px; }
.who-col p { margin: 0; color: var(--muted); }

/* ---------- pricing ---------- */
.billing-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; margin-bottom: 20px; }
.billing-toggle button { font: inherit; font-family: var(--mono); font-size: var(--fs-sm); background: transparent; color: var(--muted); border: 0; padding: 8px 16px; cursor: pointer; }
.billing-toggle button.on { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; align-items: stretch; }
@media (max-width: 1000px) { .tiers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tiers { grid-template-columns: 1fr; } .tier-signal { order: -1; } }
.tier { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.tier-signal { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.tier h3 { font-size: var(--fs-lg); margin-bottom: 0; }
.price { font-size: var(--fs-2xl); font-weight: 800; margin: 0; line-height: 1.2; }
.price small { font-size: var(--fs-base); font-weight: 500; color: var(--muted); }
.price .save { font-style: normal; font-size: var(--fs-2xs); color: var(--green); font-weight: 600; margin-left: 4px; }
.price-note { font-size: var(--fs-2xs); color: var(--muted); margin: 0; }
.tiers[data-billing-mode="annual"] .price-monthly { display: none; }
.tiers[data-billing-mode="monthly"] .price-annual { display: none; }
.tier-pos { color: var(--text); font-weight: 600; margin: 4px 0 8px; }
.tier-rows { margin: 0 0 14px; font-size: var(--fs-base); }
.tier-rows dt { color: var(--faint); font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: .06em; text-transform: uppercase; margin-top: 8px; }
.tier-rows dd { margin: 2px 0 0; color: var(--muted); }
.roadmap-item { display: inline-block; margin-top: 4px; color: var(--faint); }
.tier .btn { margin-top: auto; }
.tier-alt { font-size: var(--fs-xs); text-align: center; margin-top: 8px; }
.picker { margin-top: 24px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px 20px; }
.picker ul { margin: 0 0 .8rem; padding-left: 1.2rem; }
.picker li { margin-bottom: 4px; }
.same-ledger { margin: 0; font-weight: 600; }
.under { margin-top: 1.2rem; }

/* ---------- FAQ ---------- */
.faq-item { border-top: 1px solid var(--border); padding: 4px 0; }
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-item summary { cursor: pointer; font-weight: 700; padding: 12px 0; list-style: none; position: relative; padding-right: 28px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 4px; top: 10px; color: var(--muted); font-family: var(--mono); }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { color: var(--muted); margin: 0 0 14px; }

/* ---------- final band / disclaimer anchor ---------- */
.cta-band { padding: 64px 0; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--bg)), var(--bg)); border-top: 1px solid var(--border); }
.cta-band .band-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.cta-band h2 { margin: 0; }
.cta-band .cta-row { margin: 0; }
.disclaimer-anchor { padding: 24px 0 40px; }
.disclaimer-anchor .strip { margin-top: .6rem; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--border); background: var(--bg-2); padding: 40px 0 96px; }
.footer-disclaimer { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; font-size: 13px; line-height: 1.55; color: var(--muted); }
@media (max-width: 800px) { .footer-disclaimer { grid-template-columns: 1fr; } }
.footer-disclaimer p { margin-bottom: .6em; }
.footer-lines { color: var(--text); opacity: .85; }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 16px; border-top: 1px dashed var(--border); font-size: var(--fs-sm); color: var(--faint); }
.footer-links { display: flex; flex-wrap: wrap; gap: 14px; }
.footer-links a { color: var(--muted); }

/* ---------- mobile sticky bar ---------- */
.sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--border); transform: translateY(110%); transition: transform .25s ease; }
.sticky-bar .btn { flex: 1; }
.sticky-bar.show { transform: translateY(0); }
@media (max-width: 760px) { .sticky-bar { display: flex; } }

/* ---------- disclaimer / 404 pages ---------- */
.page-disclaimer h2 { font-size: var(--fs-xl); margin-top: 2rem; }
.page-404 { padding: 96px 0; }
.big-duck { font-size: 4rem; margin: 0; }

/* Shared transparent duck head, including its tuft. */
:root { --neon: #7dff6a; }
@media (prefers-color-scheme: light) { :root { --neon: #3fd64a; } }
.avatar-mark { display: inline-block; width: 28px; height: 28px; border-radius: 0; object-fit: contain; vertical-align: middle; background: transparent; box-shadow: none; }
.brand .avatar-mark { margin-right: 4px; }
.avatar-md { width: 34px; height: 34px; }
.avatar-peek { position: absolute; right: 2%; top: -34px; width: 76px; height: 76px; transform: rotate(-8deg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--neon) 75%, transparent), 0 0 28px 6px color-mix(in srgb, var(--neon) 45%, transparent), 0 10px 24px rgba(0,0,0,.45); z-index: 2; }
@media (max-width: 900px) { .avatar-peek { top: -28px; width: 64px; height: 64px; } }
.mascot { display: block; margin: 0 auto; }
.mascot-lg { width: 160px; height: 160px; margin-bottom: 8px; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--neon) 40%, transparent)); }

/* ---------- 🌊 liquidity receipt: build-time sparkline ---------- */
.receipt-liq { border-color: color-mix(in srgb, var(--blue) 50%, var(--border)); }
.liq-spark { margin: 0 0 12px; }
.liq-spark svg { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); }
.liq-area { fill: color-mix(in srgb, var(--blue) 18%, transparent); stroke: none; }
.liq-line { fill: none; stroke: var(--blue); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.liq-th { stroke: var(--green); stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; vector-effect: non-scaling-stroke; }
.liq-dot { fill: var(--green); stroke: var(--surface); stroke-width: 1.5; }
.liq-dot-halo { fill: color-mix(in srgb, var(--green) 35%, transparent); }
.liq-spark figcaption { font-size: var(--fs-2xs); color: var(--faint); margin-top: 4px; }
.receipt-ret small { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); display: block; margin-top: 4px; }
.receipt-disc { font-size: var(--fs-2xs); color: var(--faint); }

/* ---------- "每天复盘 / Reviewed daily" strip under the receipts ---------- */
.reviewed { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 18px; padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--green) 45%, var(--border)); border-radius: var(--r-md); background: color-mix(in srgb, var(--green) 7%, var(--surface)); font-size: var(--fs-base); }
.reviewed b { color: var(--text); }
.reviewed span:not(.reviewed-pulse) { color: var(--muted); }
.reviewed-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 60%, transparent); animation: pulse 2.4s ease-out infinite; flex: 0 0 auto; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 60%, transparent); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .reviewed-pulse { animation: none; } }

/* --- UI polish 2026-08-30 --- */

.mono, .receipt-ret, .price { font-variant-numeric: tabular-nums; }
.receipt-ret { font-weight: 700; letter-spacing: -0.01em; }
.receipt-ret .tag { display: inline-block; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .04em; color: var(--muted); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 2px 7px; vertical-align: middle; margin-left: 6px; }
.receipt-body { flex: 0 0 auto; }
.receipt-grid { grid-auto-rows: minmax(0, auto); align-items: stretch; }

/* --- palette v2 (owner 2026-08-30, §5.3.3): near-black + ONE hot orange accent for actions/brand;
   green & red stay reserved for market data (gains/LIVE/sparklines vs losses). --- */
/* finding site.css:357 — the near-black token override that used to sit here (unconditional :root) is now
   folded into the theme-gated dark blocks at the top of this file, so it no longer clobbers the light theme. */
body { background: radial-gradient(1000px 520px at 12% -8%, rgba(255, 144, 0, .05), transparent 60%), var(--bg); }
/* examples library */
.examples .ex { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); margin: 12px 0; overflow: hidden; }
.examples summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto auto 1fr; gap: 12px; align-items: center; padding: 14px 18px; }
.examples summary::-webkit-details-marker { display: none; }
.examples summary::after { content: "+"; color: var(--muted); font-size: var(--fs-lg); justify-self: end; }
.examples details[open] summary::after { content: "−"; }
.examples .ex-emoji { font-size: var(--fs-xl); }
.examples .ex-title { font-weight: 700; font-size: var(--fs-md); }
.examples .ex-how { color: var(--muted); font-size: var(--fs-base); }
.examples .ex-body { padding: 4px 18px 18px; border-top: 1px solid var(--border); }
.examples .ex-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; padding-top: 14px; }
.examples .ex-after { display: flex; flex-direction: column; gap: 6px; }
.examples .ex-after-num { font-size: var(--fs-2xl); font-weight: 700; margin: 2px 0; line-height: 1.1; }
.examples .ex-after-num small { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
.examples .ex-after-rnow { margin: 0; font-size: var(--fs-sm); font-weight: 700; letter-spacing: -0.01em; }
.examples .ex-after-rnow.pos { color: var(--green); }
.examples .ex-after-rnow.neg { color: var(--red); }
.examples .ex-after-rnow small { color: var(--muted); font-weight: 500; margin-left: 6px; }
.examples .ex-after-txt { margin: 0; line-height: 1.55; }
.examples .muted { color: var(--muted); font-size: var(--fs-base); }
.bubble-user { background: #1f3b2f; color: #e8f5ee; border-left-color: var(--neon); border-radius: 14px 14px 4px 14px; margin-left: 20%; }
.receipt-grid { align-items: start; }
@media (max-width: 760px) { .examples summary { grid-template-columns: auto 1fr; } .examples .ex-how { grid-column: 1 / -1; } .examples .ex-grid { grid-template-columns: 1fr; } .bubble-user { margin-left: 0; } }

/* --- glossary (§13) --- */
abbr.term { text-decoration: underline dotted color-mix(in srgb, var(--neon) 70%, transparent); text-underline-offset: 3px; cursor: help; border: 0; }
abbr.term:hover, abbr.term:focus { background: color-mix(in srgb, var(--neon) 14%, transparent); border-radius: 3px; outline: none; }
.gl-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .18s; z-index: 60; }
.gl-sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 78vh; overflow: auto; background: var(--surface); color: var(--text); border-top: 1px solid var(--border); border-radius: 16px 16px 0 0; padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); transform: translateY(105%); transition: transform .22s ease; z-index: 61; box-shadow: 0 -10px 30px rgba(0,0,0,.4); }
@media (min-width: 760px) { .gl-sheet { left: auto; right: 24px; bottom: 24px; width: 420px; border-radius: var(--r-lg); border: 1px solid var(--border); } }
body.gl-open .gl-backdrop { opacity: 1; pointer-events: auto; } body.gl-open .gl-sheet { transform: translateY(0); }
.gl-head { display: flex; align-items: center; gap: 8px; } .gl-name { margin: 0; font-size: var(--fs-lg); flex: 1; }
.gl-lang, .gl-close { background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 4px 8px; cursor: pointer; font: inherit; }
.gl-short { margin: 10px 0 6px; font-size: var(--fs-md); } .gl-formula { color: var(--muted); font-size: var(--fs-sm); margin: 4px 0; } .gl-example { color: var(--muted); font-size: var(--fs-base); margin: 6px 0; } .gl-label { color: var(--green); }
.gl-long summary { cursor: pointer; color: var(--muted); font-size: var(--fs-sm); } .gl-long p { font-size: var(--fs-base); line-height: 1.55; }
.gl-see { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .gl-foot { color: var(--faint); font-size: var(--fs-xs); margin: 12px 0 0; }
.warn { color: var(--yellow); }
#basket-chart, .chart-box { min-height: 220px; }

/* --- landing redesign v2 (§5.3): nav track link, proof stats band, hero carousel, folded receipts, why/who strip --- */
.nav-links a.nav-strong { color: var(--accent-text); font-weight: 700; }
.nav-links a.nav-strong:hover { color: var(--accent-text-hover); }

.stats-band { padding: 26px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-tile { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 16px; color: var(--text); transition: transform .08s ease, border-color .15s ease; }
.stat-tile:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-1px); }
.stat-tile b { font-size: var(--fs-xl); line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat-tile b.pos { color: var(--green); }
.stat-tile > span { color: var(--muted); font-size: var(--fs-sm); line-height: 1.4; }

.hero-visual { flex-direction: column; align-items: center; }
.hero-carousel { display: flex; width: 320px; max-width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hero-carousel::-webkit-scrollbar { display: none; }
.hero-carousel:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; border-radius: var(--r-lg); }
.hero-slide { flex: 0 0 100%; min-width: 100%; scroll-snap-align: center; scroll-snap-stop: always; display: flex; justify-content: center; align-items: stretch; }
.hero-dots { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 14px; }
.hero-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); border: 0; padding: 0; cursor: pointer; }
.hero-dot.on { background: var(--accent); }
.hero-arrow { font: inherit; background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: var(--r-sm); width: 28px; height: 28px; line-height: 1; cursor: pointer; }
.hero-arrow:hover { color: var(--text); border-color: var(--accent); }

.track-card { width: 320px; max-width: 100%; background: var(--phone); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow); padding: 20px 18px; display: flex; flex-direction: column; gap: 10px; color: #e6edf3; }
.track-card-head { font-weight: 700; font-size: var(--fs-base); margin: 0; }
.track-mini { margin: 0; }
.track-mini svg { display: block; width: 100%; height: auto; background: #0d0d0d; border: 1px solid var(--border); border-radius: var(--r-md); }
.eq-nav { fill: none; stroke: var(--green); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.eq-spy { fill: none; stroke: #8b98a5; stroke-width: 1.4; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.track-mini figcaption { font-size: var(--fs-2xs); color: #8b98a5; margin-top: 5px; }
.eq-nav-key { color: var(--green); }
.eq-spy-key { color: #8b98a5; }
.track-card-note { font-size: var(--fs-2xs); color: #8b98a5; margin: 0; }
.track-card .btn { margin-top: 4px; }

.ex-more { margin-top: 16px; border-top: 1px dashed var(--border); padding-top: 12px; }
.ex-more-title { font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin: 0 0 10px; }
.ex-more .receipt { margin-bottom: 10px; }
.ex-more .receipt:last-child { margin-bottom: 0; }
.ex-more .receipt h4 { margin: 0 0 2px; font-size: var(--fs-md); }
.receipt-row { padding: 14px 16px; }
.receipt-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.receipt-row-head h4 { margin: 0; }
.receipt-row-head .badge { margin-bottom: 0; }
.receipt-row-head .receipt-meta { margin: 0; }
.receipt-row-head .receipt-ret { font-size: var(--fs-xl); margin: 0 0 0 auto; }
.receipt-row-head .receipt-ret small { display: inline; margin-top: 0; }
.receipt-row .receipt-body { margin: 6px 0 0; font-size: var(--fs-base); }
.receipt-row .receipt-links { margin-top: 10px; }

.whystrip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 800px) { .whystrip-grid { grid-template-columns: 1fr; } }
.whystrip-col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px 20px; }
.whystrip-col p { margin: 0; color: var(--muted); }

/* ── login v2: QR + password (§5.4) ─────────────────────────────────────────── */
.qr-block .qr-host { display: flex; justify-content: center; margin: 10px 0 4px; }
.qr-svg { width: 184px; height: 184px; background: #fff; padding: 8px; border-radius: var(--r-lg); display: block; }
.qr-meta { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.login-h2 { font-size: 15px; margin: 0 0 2px; }
.pw-form { display: flex; flex-direction: column; gap: 8px; }
details.login-other { margin-top: 14px; }
details.login-other summary { cursor: pointer; color: var(--muted, #8b949e); font-size: 13px; }
.pwsec { margin-top: 18px; }

/* ── polish v2: rounder type, softer edges (owner feedback 2026-08-30) ─────── */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2, h3, .btn, .login-h2 { font-family: ui-rounded, var(--font); }
/* finding site.css:463 — the polish-v2 radius overrides (.input/.btn 14px, .card/.stat-tile 18px) that made
   the landing diverge from the app were removed; both now inherit the shared --r-* scale (buttons/inputs
   → --r-md, cards → --r-lg). */

/* ── copy v3 (2026-08-30): two-line hero, CTA microcopy, WHO strip, stats/pricing rework ── */
.hero-line2 { font-size: var(--fs-lg); font-weight: 600; color: var(--muted); margin: .15rem 0 .35rem; max-width: 52ch; }
.cta-note { font-size: 12px; line-height: 1.6; color: var(--faint); max-width: 56ch; margin-top: .55rem; }
.whostrip { padding: 16px 0; background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.whostrip-line { margin: 0; color: var(--muted); font-size: var(--fs-base); line-height: 1.6; max-width: 78ch; }
.whostrip-line b { color: var(--text); }
.track-card-caption { font-size: var(--fs-xs); line-height: 1.5; color: #b7c2cc; margin: 0; }
.band-note { margin: 0 0 14px; color: var(--muted); font-size: var(--fs-base); max-width: 72ch; }
/* zh pricing: ¥ annual card sits in slot 2 and carries the highlight; the USD Signal card hands it over */
.lang-zh .tiers .tier-free { order: 1; }
.lang-zh .tiers .tier-cn { order: 2; }
.lang-zh .tiers .tier-signal { order: 3; }
.lang-zh .tiers .tier-pro { order: 4; }
.lang-zh .tier-signal { border-color: var(--border); box-shadow: none; }
.lang-zh .tier-cn { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }

/* ── 信息差 edge line under the examples lead ─────────────────────────────── */
.examples .edge { margin: 4px 0 18px; padding: 12px 14px; border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent); border-radius: 0 12px 12px 0;
  font-size: var(--fs-base); line-height: 1.6; color: var(--ink); }

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   a11y + interaction polish (2026-08-30, CSS/UX cluster)
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* finding app.css:87 — keyboard focus was styled on only .input and .hero-carousel. One consistent
   focus-visible ring on every interactive element (buttons, tabs, dots, links, summary), shared site + app. */
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
summary:focus-visible { outline-offset: 0; }

/* finding site.css:126 — long-form sentences (compliance strips, hero proof strip, backtest explanation)
   were set in JetBrains Mono, causing ransom-note CJK/latin mixing at tiny sizes. Reserve --mono for
   tickers/prices/timestamps; these sentence-level strips render in the sans stack (higher specificity than .mono). */
.strip, .proof-strip, .bt-line, .bt-stop { font-family: var(--font); }

/* finding site.css:413 — sub-44px tap targets. Grow hit areas; keep the visuals identical.
   Hero carousel dots stay a 9px dot but gain a ~45×29 transparent hit area (content-box padding). */
.hero-dot { box-sizing: content-box; padding: 18px 10px; background-clip: content-box; }
.hero-arrow { width: 44px; height: 44px; }
@media (pointer: coarse) {
  .copy, .btn-sm { min-height: 44px; }
}

/* finding app.css:186 — honor prefers-reduced-motion for the marketing sticky CTA bar's slide transition. */
@media (prefers-reduced-motion: reduce) { .sticky-bar { transition: none; } }

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   honesty / 最诚实的投资伴侣 — "我们故意不做什么" (templates/_partials/honesty.html)
   Positioning-through-refusal block above pricing. Uses the shared .section rhythm (72px) + .lead so
   it lines up with its siblings; orange = brand/actions (✕ chips, payoff accent), green/red stay data.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
.refuse-eyebrow { color: var(--accent); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .5rem; }
.refuse-list { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .refuse-list { grid-template-columns: 1fr; } }
.refuse-row { display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; }
.refuse-x { flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); font-weight: 800; font-size: var(--fs-md); line-height: 1; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); }
.refuse-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.refuse-txt b { color: var(--text); font-size: var(--fs-md); line-height: 1.35; }
.refuse-txt span { color: var(--muted); font-size: var(--fs-base); line-height: 1.55; }
.refuse-ledger-link { color: var(--accent); font-weight: 600; white-space: nowrap; }
.refuse-ledger-link:hover { color: var(--accent-2); }
.refuse-payoff { margin: 0; padding: 16px 18px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: var(--fs-lg); line-height: 1.6; color: var(--text); }
.refuse-payoff b { color: var(--accent); font-weight: 700; }

/* entrance: scroll-driven fade-up, progressive (only where supported) and reduced-motion-safe.
   Browsers without animation-timeline (older Telegram WebView) simply render the block visible. */
@keyframes refuse-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .refuse-row, .refuse-payoff { animation: refuse-in linear both; animation-timeline: view(); animation-range: entry 0% cover 26%; }
  }
}

/* polish: footer links were the one link cluster with no hover feedback (nav-links, stat-tile, etc.
   all have one) — add the same muted→text lift for consistency. */
.footer-links a:hover { color: var(--text); }

/* ── redesign (owner brief, 2026-08-30): source chips, obvious tap-to-explain, live-demo motion, visual proof ──
   Palette rule (§5.3.3) held throughout: orange = actions & brand (chips, tap-to-explain, accent bars),
   green/red = market data (LIVE dot, gains). All motion is gated by prefers-reduced-motion. */

/* 1) source chips — the scannable row that replaced the dense acronym proof-strip (hero) */
.chip-src-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 1.5rem; border-top: 1px solid var(--border); padding-top: 1.1rem; }
.chip-src-lead { width: 100%; margin: 0 0 4px; font-size: var(--fs-sm); color: var(--faint); letter-spacing: .01em; }
.chip-src { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-family: var(--font); font-size: var(--fs-sm); font-weight: 600; line-height: 1.2; color: var(--text); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border)); border-radius: var(--r-pill); padding: 7px 11px; cursor: pointer; transition: background .12s ease, border-color .12s ease, transform .08s ease; }
.chip-src:hover { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); border-color: var(--accent); transform: translateY(-1px); text-decoration: none; }
.chip-src:active { transform: translateY(0); }
.chip-src:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.chip-src .chip-ico { font-size: 1.02em; line-height: 1; }
.chip-src .chip-q { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; font-size: .66em; font-weight: 800; color: var(--accent-ink); background: var(--accent); }
.chip-src.chip-plain { cursor: default; }
.chip-src.chip-plain:hover { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 34%, var(--border)); transform: none; }
@media (pointer: coarse) { .chip-src { min-height: 44px; padding: 9px 14px; } }

/* 2) obvious tap-to-explain — glossary jargon reads as tappable: orange dotted underline + superscript "?" */
abbr.term { text-decoration: underline dotted var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; cursor: pointer; border: 0; }
abbr.term::after { content: "?"; font-size: .62em; font-weight: 800; color: var(--accent-text); vertical-align: super; line-height: 0; margin-left: 1px; }
abbr.term:hover, abbr.term:focus { background: color-mix(in srgb, var(--accent) 15%, transparent); border-radius: 3px; outline: none; }
abbr.term:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }

/* 3) live-demo feel — pulsing green LIVE dot on the top push + staggered bubble entrance (motion-gated) */
.phone-live { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--green); vertical-align: middle; box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 60%, transparent); animation: pulse 2.4s ease-out infinite; }
@keyframes heroBubbleIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.hero-carousel.hero-animate .phone-body .bubble { opacity: 0; animation: heroBubbleIn .5s ease forwards; }
.hero-carousel.hero-animate .phone-body .bubble:nth-child(1) { animation-delay: .04s; }
.hero-carousel.hero-animate .phone-body .bubble:nth-child(2) { animation-delay: .2s; }
.hero-carousel.hero-animate .phone-body .bubble:nth-child(3) { animation-delay: .36s; }
@media (prefers-reduced-motion: reduce) {
  .phone-live { animation: none; }
  .hero-carousel.hero-animate .phone-body .bubble { opacity: 1; animation: none; }
}

/* 4) more visual proof — stats band: glyph + thin accent bar + bolder number; example outcomes: accent bar */
.stat-ico { width: 20px; height: 20px; color: var(--accent); flex: 0 0 auto; }
.stat-tile.tile-pos .stat-ico { color: var(--green); }
.stat-tile b { font-size: clamp(1.4rem, 4.6vw, 1.75rem); font-weight: 800; letter-spacing: -0.01em; }
.stat-bar { height: 3px; width: 26px; border-radius: 2px; background: var(--accent); opacity: .85; }
.stat-tile.tile-pos .stat-bar { background: var(--green); }
.examples .ex-after-num { font-size: clamp(1.9rem, 6vw, 2.35rem); font-weight: 800; letter-spacing: -0.02em; padding-left: 10px; border-left: 3px solid currentColor; }
/* the landing doesn't load _data_style.html, so the global .pos/.neg colors never reach these return numbers —
   scope-color them here (green/red = market data, §5.3.3) so the number and its currentColor accent bar read as data. */
.examples .ex-after-num.pos { color: var(--green); }
.examples .ex-after-num.neg { color: var(--red); }

/* ── example caveats collapsed to one tap (novice sees the result first) ────── */
.ex-honest { margin-top: 6px; }
.ex-honest > summary { cursor: pointer; list-style: none; color: var(--faint); font-size: .82rem;
  padding: 4px 0; min-height: 32px; display: inline-flex; align-items: center; }
.ex-honest > summary::-webkit-details-marker { display: none; }
.ex-honest > summary:hover { color: var(--accent); }
.ex-honest[open] > summary { color: var(--muted); }
.ex-honest .ex-after-txt { margin-top: 6px; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   为什么我们不一样 / Why we're different (templates/_partials/why-different.html) + weekly-outlook strip
   Positioning block between the examples wall and boards. §5.3.3 palette: orange = brand/actions,
   green/red reserved for market data — this block uses the accent only. Shares the .section rhythm.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
.whydiff-eyebrow { color: var(--accent); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .5rem; }
.whydiff-list { list-style: none; margin: 0 0 1.8rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .whydiff-list { grid-template-columns: 1fr; } }
.whydiff-row { display: flex; gap: 16px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; }
.whydiff-ico { flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-md); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border)); }
.whydiff-ico svg { width: 24px; height: 24px; display: block; }
.whydiff-txt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.whydiff-txt > b { color: var(--text); font-size: var(--fs-lg); line-height: 1.3; }
.whydiff-txt > span { color: var(--muted); font-size: var(--fs-base); line-height: 1.6; }
.whydiff-contrast { border-left: 3px solid color-mix(in srgb, var(--accent) 55%, var(--border)); padding-left: 11px; color: var(--text) !important; }
.whydiff-edge { margin: 0 0 1.8rem; }
.whydiff-edge-eyebrow { color: var(--accent); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 12px; }
.whydiff-edge-list { grid-template-columns: repeat(3, 1fr); margin-bottom: 0; }
@media (max-width: 900px) { .whydiff-edge-list { grid-template-columns: 1fr; } }
.whydiff-roadmap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.badge-roadmap { flex: 0 0 auto; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .04em; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); border-radius: var(--r-pill); padding: 2px 9px; white-space: nowrap; }
.whydiff-closer { color: var(--text) !important; font-weight: 600; font-size: var(--fs-md); line-height: 1.5; border-top: 1px dashed var(--border); padding-top: 11px; margin-top: 2px; }

/* weekly-outlook strip: 前瞻 · 周报 · 大盘总结 as three first-class benefit chips */
.wo-strip { margin-top: .3rem; border-top: 1px solid var(--border); padding-top: 1.4rem; }
.wo-lead { margin: 0 0 .9rem; color: var(--faint); font-size: var(--fs-sm); letter-spacing: .01em; }
.wo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 760px) { .wo-grid { grid-template-columns: 1fr; } }
.wo-chip { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.wo-ico { color: var(--accent); }
.wo-ico svg { width: 24px; height: 24px; display: block; }
.wo-chip b { color: var(--text); font-size: var(--fs-md); line-height: 1.3; }
.wo-chip span { color: var(--muted); font-size: var(--fs-base); line-height: 1.55; }

@keyframes whydiff-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .whydiff-row, .wo-chip { animation: whydiff-in linear both; animation-timeline: view(); animation-range: entry 0% cover 24%; }
  }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   hero carousel slides 3 & 4 (§5.3.5): 本周前瞻 Week Ahead (sample) + 大盘总结/市场天气 (real regime).
   Same shell as .track-card so all four slides read as one deck. Dark in both themes (phone-mockup
   aesthetic, matching slides 1–2); no motion beyond the shared reduced-motion-safe carousel behavior.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
.wa-card, .mw-card { width: 320px; max-width: 100%; background: var(--phone); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow); padding: 20px 18px; display: flex; flex-direction: column; gap: 12px; color: #e6edf3; }
.wa-head, .mw-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-weight: 700; font-size: var(--fs-base); margin: 0; }
.wa-badge { flex: 0 0 auto; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); border-radius: var(--r-sm); padding: 2px 7px; }
.wa-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wa-events li { display: flex; gap: 10px; align-items: baseline; font-size: var(--fs-sm); border-left: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); padding-left: 10px; }
.wa-day { flex: 0 0 auto; min-width: 40px; color: #b7c2cc; font-size: var(--fs-2xs); }
.wa-ev { color: #e6edf3; line-height: 1.4; }
.wa-odds { margin: 0; font-size: var(--fs-xs); line-height: 1.55; color: #cdd6df; background: color-mix(in srgb, var(--accent) 12%, transparent); border-left: 3px solid var(--accent); padding: 8px 11px; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.wa-note, .mw-note { margin: 0; font-size: var(--fs-2xs); color: #8b98a5; line-height: 1.5; }
.mw-asof { color: #8b98a5; font-size: var(--fs-2xs); font-weight: 400; }
.mw-rows { margin: 0; display: flex; flex-direction: column; gap: 9px; }
.mw-row { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: baseline; font-size: var(--fs-sm); }
.mw-row dt { margin: 0; color: #8b98a5; font-size: var(--fs-2xs); letter-spacing: .04em; }
.mw-row dd { margin: 0; color: #e6edf3; line-height: 1.4; }
.mw-wx { font-weight: 700; }
.mw-theme { color: #cdd6df; }

/* ── "我们是谁 / Who we are" (owner brief 2026-08-30): warm from-one-investor-to-another intro + the
   "one meal a month" price + goal, a FAIR competitor comparison ("为什么我们这样决定" — never names a
   competitor), and a clearly-marked KOL / 财经博主 roadmap teaser. Sits between honesty and pricing.
   §5.1 palette rule held: orange = brand/actions; green/red stay reserved for market data, so this
   positioning block uses the accent only. Shares the .section rhythm (72px) + .wrap.narrow. ── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.whoweare .lead { margin-bottom: 1.6rem; }
.wwa-eyebrow { color: var(--accent); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .5rem; }

/* two punch cards */
.wwa-punch { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 1.5rem; }
@media (max-width: 640px) { .wwa-punch { grid-template-columns: 1fr; } }
.wwa-punch-card { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: var(--r-lg); padding: 18px 20px; }
.wwa-punch-big { display: block; color: var(--accent); font-weight: 800; font-size: var(--fs-xl); line-height: 1.15; }
.wwa-punch-sub { display: block; color: var(--muted); font-size: var(--fs-base); line-height: 1.55; margin-top: 6px; }

/* stance quote */
.wwa-stance { margin: 0 0 2rem; padding: 16px 18px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: var(--fs-lg); line-height: 1.6; color: var(--text); }

/* fair comparison table */
.cmp { margin: 0 0 1.8rem; }
.cmp-eyebrow { color: var(--accent); font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 .35rem; }
.cmp-lead { color: var(--muted); font-size: var(--fs-base); margin: 0 0 1rem; }
.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--r-lg); }
.cmp-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); min-width: 480px; }
.cmp-table th, .cmp-table td { text-align: left; padding: 12px 14px; vertical-align: top; line-height: 1.5; border-top: 1px solid var(--border); }
.cmp-table thead th, .cmp-table thead td { border-top: 0; font-size: var(--fs-sm); letter-spacing: .02em; }
.cmp-table tbody th[scope="row"] { color: var(--text); font-weight: 700; white-space: nowrap; width: 1%; }
.cmp-table .cmp-us { color: var(--text); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.cmp-table thead .cmp-us { color: var(--accent); font-weight: 800; }
.cmp-table .cmp-them { color: var(--muted); }
.cmp-table thead .cmp-them { color: var(--faint); font-weight: 600; }
.cmp-foot { color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; margin: .9rem 0 .3rem; }
.wwa-ledger-link { display: inline-flex; align-items: center; color: var(--accent); font-weight: 600; }
.wwa-ledger-link:hover { color: var(--accent-2); }
@media (pointer: coarse) { .wwa-ledger-link { min-height: 44px; } }

/* KOL / 财经博主 roadmap teaser — clearly not-live */
.wwa-kol { margin-top: .4rem; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--r-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.wwa-kol-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wwa-kol-head .badge { margin-bottom: 0; }
.wwa-kol-head b { color: var(--text); font-size: var(--fs-md); }
.wwa-kol-body { color: var(--muted); font-size: var(--fs-base); line-height: 1.6; margin: 0; }
.wwa-kol-note { color: var(--faint); font-size: var(--fs-sm); margin: 0; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .wwa-punch-card, .wwa-stance, .cmp-scroll, .wwa-kol { animation: whydiff-in linear both; animation-timeline: view(); animation-range: entry 0% cover 24%; }
  }
}

/* IV-vs-HV block bars inside the demo snapshot card — tight, dimmed, so they read as a mini-chart not text */
.card-line.card-bar { color: color-mix(in srgb, var(--muted) 85%, var(--accent)); letter-spacing: 0; line-height: 1.15; font-size: 0.92em; opacity: .9; }

/* track-record: collapsible "how to read the insider rows" note — the core-advantage framing */
.insider-note { margin: 4px 0 14px; border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; background: color-mix(in srgb, var(--accent) 5%, transparent); }
.insider-note > summary { cursor: pointer; font-weight: 600; color: var(--text); }
.insider-note > p { margin: 8px 0 2px; line-height: 1.55; }

/* track-record: SEC-verified insider-conviction highlights band (distinct from the auto-ledger below) */
.insider-highlights { margin: 8px 0 22px; }
.ih-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 10px; }
.ih-card { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--green, #3fb950) 6%, transparent); text-decoration: none; color: var(--text); transition: border-color .15s, transform .15s; }
.ih-card:hover { border-color: var(--green, #3fb950); transform: translateY(-1px); text-decoration: none; }
.ih-top { display: flex; align-items: baseline; justify-content: space-between; }
.ih-tk { font-size: var(--fs-lg); letter-spacing: .02em; }
.ih-ret { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.ih-ret.pos { color: var(--green, #3fb950); }
.ih-who { color: var(--text); font-size: 0.9em; }
.ih-buy { color: var(--muted); font-size: 0.82em; }

/* 财经博主 (finance creators) section */
.creators-view .cr-sub { color: var(--muted); margin: 22px 0 10px; font-size: var(--fs-base); }
.cr-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-chip { display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--accent) 5%, transparent); color: var(--text); font-size: 0.9em; text-decoration: none; }
a.cr-chip:hover { border-color: var(--accent); text-decoration: none; }
.cr-chip.cr-skel { opacity: .5; }
.cr-feed { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 12px; }
.cr-post { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: color-mix(in srgb, var(--accent) 4%, transparent); }
.cr-post-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.cr-who { color: var(--text); }
.cr-take { font-size: .8em; padding: 1px 8px; border-radius: 999px; }
.cr-take.cr-bull { color: var(--green, #3fb950); border: 1px solid color-mix(in srgb, var(--green,#3fb950) 45%, transparent); }
.cr-take.cr-bear { color: var(--red, #f85149); border: 1px solid color-mix(in srgb, var(--red,#f85149) 45%, transparent); }
.cr-take.cr-neutral { color: var(--muted); border: 1px solid var(--border); }
.cr-tks { color: var(--muted); font-size: .85em; }
.cr-sum { margin: 8px 0 6px; line-height: 1.55; color: var(--text); }
.cr-orig { font-size: .85em; color: var(--accent); }
.cr-disclaimer { margin: 14px 0 12px; font-size: .86em; line-height: 1.5; }

/* creators follow toggle — clear flip: followed = accent-filled, unfollowed = neutral outline */
button.cr-chip { cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
button.cr-chip:not(.on) { background: transparent; }
button.cr-chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
button.cr-chip.on:hover { background: var(--accent-2, var(--accent)); border-color: var(--accent-2, var(--accent)); }
button.cr-chip:not(.on):hover { border-color: var(--accent); color: var(--text); }
button.cr-chip[disabled] { opacity: .55; cursor: default; }

/* creators view — Pro upsell banner */
.cr-pro-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 16px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 12px; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.cr-pro-badge { font-weight: 700; color: var(--accent-ink); background: var(--accent); padding: 2px 9px; border-radius: 999px; font-size: .85em; }

/* 投资日历 (calendar view) */
.cal-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 16px; }
.cal-fchip { padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; font-size: .9em; transition: border-color .15s, color .15s, background .15s; }
.cal-fchip:hover { border-color: var(--accent); color: var(--text); }
.cal-fchip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.cal-mine.on { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); border-color: var(--accent); }
.cal-day-h { position: sticky; top: 0; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(6px); padding: 8px 2px 6px; color: var(--muted); font-size: .9em; z-index: 1; border-bottom: 1px solid var(--border); }
.cal-ev { display: flex; gap: 10px; padding: 10px 4px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.cal-ico { font-size: 1.1em; line-height: 1.4; }
.cal-main { flex: 1; min-width: 0; }
.cal-title { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; color: var(--text); font-weight: 600; }
.cal-tk { font-size: .82em; padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted); font-weight: 400; }
.cal-tk.on { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
.cal-mine-badge { font-size: .72em; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.cal-note { margin-top: 3px; font-size: .88em; line-height: 1.45; }
.cal-mine-ev { background: color-mix(in srgb, var(--accent) 5%, transparent); border-radius: 8px; }
.cal-t-earnings .cal-title { color: var(--green, #3fb950); }
.cal-t-witching .cal-title, .cal-t-opex .cal-title { color: var(--accent); }

/* ── entry: 两种用法,一次登录 (what this is + why Telegram) ──────────────── */
.nav-signin { margin-right: 8px; }
.entry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
@media (max-width: 760px) { .entry-grid { grid-template-columns: 1fr; } }
.entry-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px 22px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.entry-card.entry-tg { border-left: 3px solid var(--accent); }
.entry-card.entry-web { border-left: 3px solid #4ea1ff; }
.entry-tag { display: inline-block; font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 3px 10px; }
.entry-card h3 { margin: 2px 0 0; font-size: var(--fs-lg); }
.entry-card p { margin: 0; color: var(--muted); line-height: 1.7; font-size: var(--fs-sm); flex: 1 1 auto; }
.entry-card .btn { margin-top: 6px; }
.entry-note { margin-top: 16px; font-size: var(--fs-sm); line-height: 1.6; }

/* KOL per-ticker call chips — the stance/target gist dug out of each video (creators.js callChips) */
.cr-calls { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.cr-call { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  font-size: .82em; border: 1px solid var(--border); background: color-mix(in srgb, var(--card, #fff) 92%, transparent); }
.cr-call-sym { font-weight: 700; }
.cr-call-arrow { font-size: .9em; line-height: 1; }
.cr-call-tgt { color: var(--muted); }
.cr-call-note { color: var(--muted); max-width: 15em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-call-bull { border-color: color-mix(in srgb, var(--green,#3fb950) 45%, transparent); }
.cr-call-bull .cr-call-arrow, .cr-call-bull .cr-call-sym { color: var(--green, #3fb950); }
.cr-call-bear { border-color: color-mix(in srgb, var(--red,#f85149) 45%, transparent); }
.cr-call-bear .cr-call-arrow, .cr-call-bear .cr-call-sym { color: var(--red, #f85149); }
.cr-call-neutral .cr-call-arrow { color: var(--muted); }

/* Website-first product story: workflow, visual evidence, then pricing. */
.revamp-hero { padding: 72px 0 64px; }
.revamp-hero h1 { white-space: pre-line; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.2; letter-spacing: -.04em; }
.revamp-hero .sub { max-width: 34em; font-size: 18px; line-height: 1.75; margin: 24px 0; }
.review-preview { background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 26px; box-shadow: 0 16px 60px #0002; }
.review-preview-head { display: flex; gap: 12px; align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.review-preview-head img { border-radius: 50%; }
.review-preview-head small { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
.review-flow { list-style: none; padding: 0; margin: 12px 0 22px; }
.review-flow li { display: flex; gap: 16px; align-items: baseline; padding: 15px 0; }
.review-step { color: var(--accent-text); font-size: 13px; }
.review-flow p { color: var(--muted); margin: 5px 0 0; font-size: 14px; line-height: 1.65; }
.workflow-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin: 30px 0; }
.workflow-card { padding: 24px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.workflow-card h3 { margin: 12px 0; }
.workflow-card p { line-height: 1.8; color: var(--muted); margin-bottom: 20px; }
.creator-explainer { display: flex; align-items: center; gap: 30px; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 28px; }
.creator-explainer p { max-width: 60ch; color: var(--muted); line-height: 1.7; }
.creator-explainer .btn { flex-shrink: 0; }
.proof-workspace { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 28px; margin-top: 32px; }
.proof-curve { border: 1px solid var(--border); background: var(--surface); border-radius: 20px; padding: 28px; }
.proof-curve h3 { margin: 16px 0 22px; }
.proof-curve .track-mini svg { width: 100%; height: auto; min-height: 160px; }
.proof-curve figcaption { color: var(--muted); font-size: 12px; }
.proof-values { display: flex; gap: 40px; margin: 24px 0; }
.proof-values small { display: block; color: var(--muted); margin-bottom: 6px; }
.proof-values b { font-size: 28px; }
.proof-curve .small { font-size: 13px; line-height: 1.7; }
.proof-case { border: 1px solid var(--border); border-radius: 16px; padding: 20px; margin-bottom: 12px; background: var(--surface); }
.proof-case-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.proof-case-head time { margin-left: auto; font-size: 12px; color: var(--muted); }
.proof-case h3 { margin: 14px 0 8px; font-size: 17px; }
.case-result { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.case-result strong { font-size: 25px; }
.case-result span { color: var(--muted); font-size: 12px; }
.proof-case details { margin-top: 12px; font-size: 13px; line-height: 1.7; }
.proof-case summary { color: var(--muted); cursor: pointer; }
.proof-case blockquote { border-left: 2px solid var(--border); margin: 10px 0; padding-left: 12px; }
@media (max-width: 760px) {
 .workflow-grid, .proof-workspace { grid-template-columns: 1fr; }
 .creator-explainer { align-items: flex-start; flex-direction: column; gap: 10px; }
 .revamp-hero { padding-top: 36px; }
 .review-preview, .proof-curve { padding: 22px; }
 .workflow-card p { margin-bottom: 14px; }
}
.proof-workspace > *, .proof-cases, .proof-case, .workflow-card, .tier { min-width: 0; }
.proof-curve svg { max-width: 100%; }
.tier dl { min-width: 0; }
.tier dt, .tier dd { overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 600px) {
 .tiers, .proof-workspace { grid-template-columns: minmax(0,1fr); }
 .tier .btn { white-space: normal; }
}
.proof-curve .btn { max-width: 100%; white-space: normal; }
.proof-selected { display: block; }
.benefit-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
.benefit-card { min-width: 0; padding: 24px 0; border-top: 1px solid var(--border); }
.benefit-card .ui-icon { width: 28px; height: 28px; color: var(--accent); fill: none; stroke: currentColor; }
.benefit-card h3 { font-size: 20px; margin: 14px 0 10px; }
.benefit-card p { color: var(--muted); margin: 0; line-height: 1.7; }
.benefit-link { display: inline-block; margin-top: 16px; padding: 6px 0; color: var(--orange); font-weight: 600; }
@media(max-width: 640px) { .benefit-grid { grid-template-columns: minmax(0,1fr); gap: 8px; } }
.proof-selected .proof-cases { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.proof-archive { margin-top: 24px; }
.proof-archive .btn { max-width: 100%; white-space: normal; }
.legacy-method > summary { cursor: pointer; font-weight: 600; padding: 16px 0; }
@media(max-width: 760px) { .proof-selected .proof-cases { grid-template-columns: minmax(0,1fr); } }
.case-result .pos { color: var(--green); }
.case-result .neg { color: var(--red); }

.eq-grid { stroke: var(--border); stroke-width: .7; stroke-dasharray: 3 4; }
.eq-axis { fill: var(--muted); font: 9px ui-monospace, monospace; }

/* Frozen-rule research: theme tokens, dated evidence and readable touch controls. */
.oversold-study { padding: clamp(16px,4vw,36px); margin: 28px 0; border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface); }
.oversold-study h3 { font-size: clamp(23px,3vw,34px); margin: 16px 0 10px; }
.os-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin: 24px 0; }
.os-stats > div { min-width: 0; }
.os-stats small { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.os-stats strong { display: block; font-size: clamp(22px,4vw,40px); line-height: 1.4; letter-spacing: -.04em; }
.os-nav { color: var(--orange); }
.os-spy { color: var(--muted); }
.os-qqq { color: var(--blue); }
.os-swatch { display: inline-block; width: 22px; border-top: 3px solid var(--orange); flex-shrink: 0; }
.os-swatch-spy { border-color: var(--muted); border-top-style: dashed; }
.os-swatch-qqq { border-color: var(--blue); border-top-style: dotted; }
.oversold-study .os-figure { margin: 24px 0; }
.os-chart-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 12px; }
.oversold-study .os-chart { display: block; width: 100%; height: auto; background: var(--bg); border-radius: var(--r-md); touch-action: pan-y; }
.oversold-study .eq-axis { font: 12px var(--mono); fill: var(--muted); }
.oversold-study .eq-grid { stroke-width: 1; vector-effect: non-scaling-stroke; }
.os-date-grid { stroke-dasharray: 2 6; }
.os-line { fill: none; stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.os-line-nav { stroke: var(--orange); stroke-width: 2.5; }
.os-line-spy { stroke: var(--muted); stroke-dasharray: 5 4; }
.os-line-qqq { stroke: var(--blue); stroke-dasharray: 2 3; }
.os-cursor[hidden] { display: none; }
.os-crosshair { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 4; }
.os-dot { stroke: var(--surface); stroke-width: 2; }
.os-dot-nav { fill: var(--orange); }
.os-dot-spy { fill: var(--muted); }
.os-dot-qqq { fill: var(--blue); }
.os-inspector { padding: 16px 0 4px; }
.os-inspector-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 13px; }
.os-inspector-heading label { color: var(--muted); }
.os-date-slider { display: block; width: 100%; min-height: 44px; margin: 0; accent-color: var(--orange); cursor: ew-resize; }
.os-readings { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; font-size: 13px; }
.os-readings > span { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; }
.os-readings > span > span { color: var(--muted); }
.os-inspector p { margin: 10px 0 0; font-size: 12px; }
.os-figure figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.os-risk { padding: 16px 18px; border-left: 3px solid var(--orange); background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 14px; line-height: 1.8; }
.oversold-study details > summary { cursor: pointer; color: var(--orange); padding: 12px 0; min-height: 44px; }
.os-table-wrap { overflow-x: auto; margin: 18px 0; border: 1px solid var(--border); border-radius: var(--r-sm); }
.os-table-wrap table { width: 100%; border-collapse: collapse; font-size: 14px; }
.os-table-wrap caption { text-align: left; padding: 12px; color: var(--muted); }
.os-table-wrap td, .os-table-wrap th { padding: 12px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
.os-table-wrap th { background: var(--surface-2); }
.os-table-wrap td:first-child, .os-table-wrap th:first-child { text-align: left; }
.os-table-wrap tr:last-child td { border-bottom: 0; }
.os-date-slider:focus-visible, .os-table-wrap:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
@media (max-width: 480px) {
 .os-stats { gap: 8px; }
 .os-stats small { gap: 5px; font-size: 12px; }
 .os-swatch { width: 14px; }
 .os-readings > span { flex-direction: column; }
}
@media (max-width: 380px) {
 .os-stats { grid-template-columns: 1fr; gap: 8px; }
 .os-stats > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
 .os-stats strong { font-size: 25px; }
}

/* Long translated archive labels must remain tappable on small phones. */
.proof-archive .btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; }

/* Public examples contain decorative placeholders; paid reports are API gated. */
.member-preview-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin:28px 0; }
.member-preview-card, .video-example-card { min-width:0; padding:28px; border:1px solid var(--border); border-radius:20px; background:var(--surface); }
.member-preview-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.member-preview-head h3 { margin:0; font-size:20px; }
.member-preview-canvas { position:relative; display:grid; place-items:center; min-height:260px; margin:24px 0; overflow:hidden; border-radius:12px; background:var(--bg); }
.preview-skeleton { position:absolute; inset:24px; filter:blur(5px); opacity:.3; }
.preview-skeleton > span { display:block; height:12px; width:85%; margin:18px 0; background:var(--muted); border-radius:4px; }
.preview-skeleton > span:nth-child(even) { width:60%; }
.preview-skeleton > div { display:flex; gap:12px; margin:26px 0; }
.preview-skeleton i { height:44px; flex:1; border:1px solid var(--muted); border-radius:6px; }
.member-preview-lock { position:relative; display:flex; flex-direction:column; align-items:center; gap:12px; padding:24px; text-align:center; max-width:40ch; }
.member-preview-lock svg { color:var(--orange); }
.member-preview-lock span { color:var(--muted); font-size:14px; line-height:1.7; }
.member-preview-card > .btn { width:100%; white-space:normal; text-align:center; }
.preview-actions { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.preview-actions p { flex:1; min-width:200px; max-width:65ch; }
.video-example-card { margin-top:28px; max-width:900px; }
.video-example-meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; color:var(--muted); font-size:13px; }
.video-example-card h3 { font-size:clamp(23px,3vw,32px); line-height:1.3; margin:24px 0 16px; }
.video-takeaway { line-height:1.8; }
.video-source-points { border-block:1px solid var(--border); margin:24px 0; }
.video-source-points summary, .records-method summary { cursor:pointer; padding:16px 0; color:var(--orange); }
.video-source-points ol { list-style:none; margin:0; padding:0; }
.video-source-points li { display:grid; grid-template-columns:72px minmax(0,1fr); gap:16px; padding:16px 0; border-top:1px solid var(--border); }
.video-source-points a { color:var(--orange); padding:4px 0; font-size:13px; }
.video-source-points p { margin:0; line-height:1.8; }
.video-example .btn { white-space:normal; text-align:center; }
.records-back { display:inline-block; margin-bottom:28px; color:var(--muted); }
.research-records h1 { font-size:clamp(30px,4vw,48px); margin:14px 0; }
.records-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:28px 0; }
.records-summary span { display:block; color:var(--muted); font-size:14px; }
.records-summary strong { display:block; font-size:clamp(24px,4vw,40px); }
.research-records .pos { color:var(--green); }.research-records .neg { color:var(--red); }
.records-positions { margin:40px 0; scroll-margin-top:100px; }
.records-period { border:1px solid var(--border); border-radius:16px; background:var(--surface); overflow:hidden; }
.records-period > summary { cursor:pointer; padding:20px; font-weight:600; }
.records-period > summary span.mono, .records-period > summary small { display:block; color:var(--muted); font-size:13px; font-weight:400; margin:8px 0 0; }
.records-filter { display:flex; align-items:end; gap:16px; flex-wrap:wrap; padding:0 20px 20px; }
.records-filter[hidden] { display:none; }
.records-filter label { display:grid; gap:8px; font-size:13px; }
.records-filter select { min-height:44px; padding:8px 12px; color:var(--text); background:var(--bg); border:1px solid var(--border); border-radius:8px; font:inherit; }
.records-table-wrap { max-width:100%; overflow-x:auto; border:1px solid var(--border); border-radius:8px; }
.records-table { width:100%; border-collapse:collapse; font-size:14px; }
.records-table caption { text-align:left; padding:16px; color:var(--muted); }
.records-table th, .records-table td { padding:14px 16px; text-align:right; white-space:nowrap; border-bottom:1px solid var(--border); }
.records-table th { background:var(--surface-2); }
.records-table th:first-child { text-align:left; }
.records-table tbody th { position:sticky; left:0; }
.records-table tr[hidden] { display:none; }
.records-period .data-notice { margin:20px; }
.records-method { margin-top:20px; border-top:1px solid var(--border); }
.records-method p { line-height:1.8; }
.records-method a { color:var(--orange); }
.records-table-wrap:focus-visible, .records-filter select:focus-visible { outline:2px solid var(--orange); outline-offset:3px; }
@media(max-width:640px) {
 .member-preview-grid { grid-template-columns:minmax(0,1fr); }
 .member-preview-card, .video-example-card { padding:20px; }
 .video-source-points li { grid-template-columns:minmax(0,1fr); gap:8px; }
 .records-summary { grid-template-columns:minmax(0,1fr); gap:12px; }
 .records-summary > div { display:flex; align-items:baseline; justify-content:space-between; }
 .records-filter { padding:0 12px 16px; gap:12px; }
}

/* One free tier and one full research plan. */
.tiers.tiers-unified { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 920px; margin-inline: auto; }
@media (max-width: 600px) { .tiers.tiers-unified { grid-template-columns: minmax(0,1fr); } }

/* Stock-first public workspace. Match text and surfaces to the active theme. */
.stock-demo-grid {display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:20px;margin-top:28px;align-items:start}
.stock-demo-main,.demo-background {border:1px solid var(--border);border-radius:22px;background:var(--surface);color:var(--text);padding:26px;min-width:0}
.stock-demo-form label {display:block;font-size:14px;color:var(--muted,#a5acb8);margin-bottom:10px}
.stock-demo-input{display:flex;gap:10px}.stock-demo-input input{min-width:0;width:100%;max-width:230px;border:1px solid var(--muted);background:var(--bg);color:var(--text);padding:12px 15px;border-radius:10px;font-size:22px;font-family:var(--mono,monospace)}
.demo-stock-examples{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:14px 0 20px;font-size:13px}.demo-stock-examples button{cursor:pointer;color:inherit;background:transparent;border:1px solid var(--muted);padding:5px 12px;border-radius:30px}
.demo-record{border-top:1px solid var(--border);padding:18px 0}.demo-record h3{font-size:18px;margin:10px 0;overflow-wrap:anywhere}.demo-record p{line-height:1.7;overflow-wrap:anywhere}.demo-record a,.demo-next a,.demo-paths a{color:var(--orange)}
.demo-next{display:flex;flex-wrap:wrap;gap:12px 20px;border-top:1px solid var(--border);padding-top:18px;font-size:13px}.demo-next[hidden]{display:none}
.demo-background h3{margin-top:0}.demo-background .chip{display:inline-block;border:1px solid var(--border);padding:4px 9px;margin:4px 5px 4px 0;border-radius:15px;font-size:12px}.demo-headline{font-size:14px;line-height:1.6;border-top:1px solid var(--border);padding-top:13px;overflow-wrap:anywhere}.demo-headline small{display:block;margin-top:5px}
.demo-paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px;margin-top:34px}.demo-paths article{min-width:0;padding:12px 4px}.demo-paths h3{font-size:19px}.demo-paths p{color:var(--muted,#a5acb8);font-size:14px;line-height:1.75}.demo-paths a{font-size:14px}
.pricing-compact .price-intro{display:flex;justify-content:space-between;align-items:center;gap:24px}.pricing-compact h2{font-size:25px}.pricing-compact .price-intro p{color:var(--muted,#a5acb8);font-size:15px}.plan-details{border-top:1px solid #343b44;padding-top:20px;margin-top:20px}.plan-details>summary{cursor:pointer;display:list-item;font-size:15px}.plan-details>summary span{margin-left:16px;color:var(--muted,#a5acb8)}.plan-details .tiers{margin-top:24px}.pricing-compact .tier .price{font-size:32px}
@media(max-width:720px){.stock-demo-grid,.demo-paths{grid-template-columns:minmax(0,1fr)}.stock-demo-main,.demo-background{padding:20px}.demo-paths{gap:8px}.stock-demo-input{flex-wrap:wrap}.stock-demo-input input{max-width:none}.pricing-compact .price-intro{display:block}.pricing-compact .price-intro .btn{margin-top:10px}}

/* Product walkthrough: load the recording only on explicit playback. */
.product-demo { scroll-margin-top:100px; padding-top:32px; }
.product-demo-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:22px; }
.product-demo-heading h2 { margin-bottom:0; }
.product-demo-player { display:block; width:100%; height:auto; aspect-ratio:16/9; border:1px solid var(--border); border-radius:20px; background:#090d0a; }
.product-demo-player::cue { color:#fff; background:rgba(0,0,0,.86); font-size:clamp(14px, 2vw, 28px); line-height:1.3; }
#product-demo-video::cue { font-size:clamp(16px, 2vw, 28px); }
@media(max-width:700px) and (orientation:portrait){.product-demo-player{aspect-ratio:4/3;object-fit:contain}}
.product-demo-caption { display:flex; align-items:start; justify-content:space-between; gap:24px; margin-top:18px; }
.product-demo-caption p { max-width:780px; margin:0; }
.product-demo-caption a { white-space:nowrap; }
.product-demo-transcript { margin-top:16px; color:var(--muted); }
.product-demo-transcript summary { cursor:pointer; width:fit-content; padding:6px 0; }
.product-demo-transcript li { margin:10px 0; max-width:900px; line-height:1.7; }
@media(max-width:700px){.product-demo-heading,.product-demo-caption{display:block}.product-demo-heading .small{margin-top:12px}.product-demo-caption a{display:inline-block;margin-top:14px}.product-demo-player{border-radius:12px}}

/* Product video guide: visible instructions with separate seek and dashboard actions. */
.product-demo-tutorial { scroll-margin-top:85px; margin-top:16px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); overflow:hidden; }
.product-demo-tutorial > summary { cursor:pointer; padding:20px 24px; min-height:44px; font-weight:600; line-height:1.6; }
.product-demo-tutorial > summary:focus-visible { outline:2px solid var(--orange); outline-offset:-4px; }
.product-demo-tutorial-body { padding:0 24px 24px; }
.product-demo-tutorial-body > p { margin:0 0 18px; line-height:1.7; }
.product-demo-tutorial-body > video + p { margin-top:16px; }
.product-demo-tutorial-player { display:block; width:100%; height:auto; aspect-ratio:16/9; border:1px solid var(--border); border-radius:12px; background:#090e15; }
.product-demo-tutorial-player::cue { color:#fff; background:rgba(0,0,0,.86); font-size:clamp(14px,2vw,28px); line-height:1.3; }
.product-demo-tutorial-link { display:inline-flex; align-items:center; min-height:44px; }
@media(max-width:700px) and (orientation:portrait){.product-demo-tutorial-player{aspect-ratio:4/3;object-fit:contain}}
@media(max-width:560px){.product-demo-tutorial > summary{padding:18px 16px}.product-demo-tutorial-body{padding:0 16px 18px}}
.product-demo-guide { margin-top:28px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); overflow:hidden; }
.product-demo-guide-heading { display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:22px 24px 18px; }
.product-demo-guide-heading h3 { margin:0; font-size:1.15rem; }
.product-demo-guide-heading p { margin:0; }
details.product-demo-guide > summary { display:list-item; cursor:pointer; font-weight:600; font-size:1.05rem; min-height:44px; }
.product-demo-guide-hint { padding-inline:24px; }
.product-demo-video-chapters { display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0; padding:0 24px 22px; }
.product-demo-video-chapters .product-demo-seek { white-space:normal; text-align:left; }
.product-demo-video-chapters .product-demo-seek span { margin-right:6px; }
.product-demo-chapters { list-style:none; padding:0; margin:0; }
.product-demo-chapter { display:grid; grid-template-columns:76px minmax(144px,.85fr) minmax(0,2fr) minmax(116px,auto); gap:18px; align-items:center; padding:19px 24px; border-top:1px solid var(--border); }
.product-demo-chapter h4 { margin:0; font-size:.95rem; line-height:1.5; }
.product-demo-chapter-number { display:block; color:var(--faint); font-size:.7rem; font-weight:400; letter-spacing:.1em; margin-bottom:3px; }
.product-demo-chapter p { margin:0; font-size:.875rem; color:var(--muted); line-height:1.7; }
.product-demo-seek { min-height:44px; padding:7px 9px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface-2); color:var(--text); font:inherit; font-family:var(--mono); font-size:.8rem; white-space:nowrap; cursor:pointer; }
.product-demo-seek span { color:var(--orange); }
.product-demo-interactive { color:var(--muted); font-size:.72rem; line-height:1.5; }
.product-demo-seek:hover:not(:disabled),.product-demo-seek[aria-current=true] { border-color:var(--orange); background:var(--bg); color:var(--orange); }
.product-demo-seek:disabled { cursor:default; opacity:.55; }
.product-demo-guide-link { display:inline-flex; justify-content:flex-end; align-items:center; gap:6px; min-height:44px; font-size:.85rem; font-weight:600; line-height:1.5; text-decoration:none; }
.product-demo-guide-link:hover { text-decoration:underline; }
.product-demo-seek:focus-visible,.product-demo-guide-link:focus-visible { outline:2px solid var(--orange); outline-offset:4px; }
.product-demo-guide-status { margin:0; padding:0 24px; color:var(--text); }
.product-demo-guide-status:not(:empty) { padding-top:14px; }
.product-demo-guide-access { margin:0; border-top:1px solid var(--border); padding:18px 24px 0; line-height:1.65; }
.product-demo-guide > .product-demo-guide-access:last-child { padding-bottom:18px; }
@media(max-width:950px) {
 .product-demo-guide-heading { display:block; }
 .product-demo-guide-heading p { margin-top:8px; }
 .product-demo-chapter { grid-template-columns:76px minmax(0,1fr) auto; gap:8px 16px; }
 .product-demo-chapter h4 { grid-column:2; grid-row:1; }
 .product-demo-chapter-number { display:inline; margin-right:9px; }
 .product-demo-chapter p { grid-column:2 / 4; grid-row:2; }
 .product-demo-seek { grid-column:1; grid-row:1 / 3; }
 .product-demo-guide-link { grid-column:3; grid-row:1; }
}
@media(max-width:560px) {
 .product-demo-guide-heading { padding:20px 16px 16px; }
 .product-demo-chapter { grid-template-columns:70px minmax(0,1fr); padding:16px; gap:8px 12px; }
 .product-demo-chapter h4 { grid-column:2; }
 .product-demo-chapter-number { display:none; }
 .product-demo-seek { grid-row:1; }
 .product-demo-chapter p { grid-column:1 / 3; grid-row:2; }
 .product-demo-guide-link { grid-column:1 / 3; grid-row:3; justify-content:flex-start; width:fit-content; }
 .product-demo-guide-status { padding-left:16px; padding-right:16px; }
 .product-demo-guide-access { padding:16px 16px 0; }
}

.outcome-review { min-width:90px; max-width:260px; white-space:normal; text-align:left; }
.outcome-review[open] { min-width:240px; }
.outcome-review summary { cursor:pointer; font-weight:650; }
.outcome-review p { margin:6px 0; font-size:12px; overflow-wrap:anywhere; }

@media(max-width:700px){.records-filter select{font-size:16px}}