:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #070b11; --panel: #0f1621; --ink: #eaf1f9; --muted: #8b9bb2; --line: #1c2838;
  --accent: #2ee6a6; --accent-ink: #03150e; --gain: #2ee6a6; --loss: #ff6b7a; --warn: #f5c451; --warn-bg: #2a2310;
  --gold: #f5c451; --violet: #8b7bff;
  --tier-apex: #f5c451; --tier-prime: #2ee6a6; --tier-core: #5fb3ff; --tier-edge: #b59bff; --tier-lite: #9fb0c6; --tier-free: #9fb0c6;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6f9; --panel: #ffffff; --ink: #0d1623; --muted: #5d6b80; --line: #e2e7ee;
  --accent: #0b8f66; --accent-ink: #ffffff; --gain: #0b8f66; --loss: #c9344a; --warn: #8a5a00; --warn-bg: #fbf1d9;
  --gold: #b8860b; --violet: #5b49d6;
  --tier-apex: #a06a00; --tier-prime: #0b8f66; --tier-core: #1f64b8; --tier-edge: #5b3f8a; --tier-lite: #55606f; --tier-free: #55606f;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: 2rem; } h2 { font-size: 1.35rem; } h3 { font-size: 1.05rem; }
.num { font-variant-numeric: tabular-nums; }
.gain { color: var(--gain); } .loss { color: var(--loss); } .muted { color: var(--muted); }

.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; border-bottom: 1px solid var(--line); background: var(--panel); position: sticky; top: 0; z-index: 5; }
.brand { font-weight: 700; font-size: 1.1rem; color: var(--ink); text-decoration: none; }
nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
main { max-width: 1120px; margin: 0 auto; padding: 24px 16px 64px; }
footer { max-width: 1120px; margin: 0 auto; padding: 24px 16px 48px; color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); }

button, .btn { font: inherit; border: 1px solid var(--line); background: var(--panel); color: var(--ink); padding: 8px 14px; border-radius: 8px; cursor: pointer; text-decoration: none; display: inline-block; }
button:hover, .btn:hover { border-color: var(--accent); }
button.primary, .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
button.link { border: 0; background: none; color: var(--accent); padding: 4px 6px; }
button:disabled { opacity: .55; cursor: default; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.hero { padding: 28px 0 8px; max-width: 760px; }
.hero p { color: var(--muted); font-size: 1.05rem; }
.notice { background: var(--warn-bg); color: var(--warn); border-radius: 8px; padding: 10px 14px; font-size: 13px; margin: 14px 0; }
.ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 20px 0 8px; }
.ladder div { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.ladder b { display: block; font-size: 1.15rem; }

.tier-title { display: flex; align-items: baseline; gap: 10px; margin: 28px 0 10px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.card h3 { margin: 0; font-size: 1.2rem; }
.card .row { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.badge { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border: 1px solid currentColor; border-radius: 999px; padding: 1px 8px; }
.t-apex { color: var(--tier-apex); } .t-prime { color: var(--tier-prime); } .t-core { color: var(--tier-core); }
.t-edge { color: var(--tier-edge); } .t-lite { color: var(--tier-lite); } .t-free { color: var(--tier-free); }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 13px; }
.kv span:nth-child(odd) { color: var(--muted); } .kv span:nth-child(even) { text-align: right; }
.lockbox { border: 1px dashed var(--line); border-radius: 8px; padding: 10px 12px; color: var(--muted); font-size: 13px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 18px 0; overflow-x: auto; }
.tabs button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 8px 14px; white-space: nowrap; }
.tabs button[aria-selected="true"] { border-bottom-color: var(--accent); font-weight: 600; }
.metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.metric { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.metric small { display: block; color: var(--muted); font-size: 12px; }
.metric b { font-size: 1.2rem; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin: 14px 0; }
.chart { width: 100%; height: auto; display: block; }
.chart text { fill: var(--muted); font-size: 11px; }
.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
th { color: var(--muted); font-weight: 600; position: sticky; top: 0; background: var(--panel); }
td.l, th.l { text-align: left; }
tr.open { cursor: pointer; } tr.open:hover td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
tr.detail td { white-space: normal; text-align: left; background: color-mix(in srgb, var(--line) 35%, transparent); }
.heat td { text-align: center; min-width: 54px; }
ol.rules { padding-left: 20px; } ol.rules li { margin: 6px 0; }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 20; }
.modal[hidden] { display: none; }
.dialog { background: var(--panel); border-radius: 14px; padding: 22px; width: min(400px, 100%); }
.dialog label { display: block; font-size: 13px; color: var(--muted); margin: 12px 0 4px; }
.dialog input { width: 100%; font: inherit; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); }
.err { color: var(--loss); font-size: 13px; min-height: 1.2em; margin-top: 8px; }
.actions { display: flex; gap: 8px; margin-top: 16px; justify-content: flex-end; }
@media (max-width: 560px) { h1 { font-size: 1.6rem; } .top { padding: 12px 16px; } }
table.trades td, table.trades th { text-align: left; }
table.trades td:last-child, table.trades th:last-child { text-align: right; }

/* ---------------------------------------------------------------- friendlier pass */
:root { --soft: color-mix(in srgb, var(--accent) 9%, var(--panel)); --shadow: 0 1px 2px rgba(20,24,28,.06), 0 6px 20px rgba(20,24,28,.05); }
h2 { font-size: 1.5rem; }
.small { font-size: 13px; }
.top { backdrop-filter: blur(8px); }
.navlink { color: var(--ink); text-decoration: none; padding: 8px 12px; border-radius: 8px; font-weight: 500; }
.navlink:hover { background: var(--soft); }
.navlink[aria-current="page"] { color: var(--accent); background: var(--soft); font-weight: 600; }
.btn.big, button.big { padding: 12px 20px; font-size: 1rem; border-radius: 10px; }
.primary { box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.primary:hover { filter: brightness(1.08); }

.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: center; max-width: none; padding: 36px 28px; margin: 4px 0 8px; border-radius: 20px; border: 1px solid var(--line);
  background: radial-gradient(900px 300px at 85% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), var(--panel); }
.hero h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); letter-spacing: -.02em; margin: 10px 0 14px; }
.hero p { font-size: 1.05rem; max-width: 56ch; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); background: var(--soft); padding: 4px 10px; border-radius: 999px; }
.cta { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0; }
.stats { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 8px; }
.stat b { display: block; font-size: 1.5rem; } .stat span { color: var(--muted); font-size: 13px; }
.hero-art { margin: 0; background: var(--soft); border-radius: 16px; padding: 14px; }
.hero-art figcaption { font-size: 12px; color: var(--muted); margin-top: 6px; }
.hero-art .chart text { font-size: 10px; }

.trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 20px 0 8px; }
.trust div { padding: 14px 16px; border-left: 3px solid var(--accent); background: var(--panel); border-radius: 0 10px 10px 0; display: flex; flex-direction: column; gap: 4px; }
.trust span, .steps li span { color: var(--muted); font-size: 14px; }
.steps { margin: 36px 0 12px; }
.steps ol { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.steps li { display: flex; gap: 12px; align-items: flex-start; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.steps li div { display: flex; flex-direction: column; gap: 2px; }
.n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 13px; flex: none; }
#catalog { scroll-margin-top: 80px; margin-top: 36px; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
.chip { border-radius: 999px; padding: 6px 14px; font-size: 14px; }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }

.card { box-shadow: var(--shadow); transition: transform .15s ease, border-color .15s ease; }
.card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.shape { background: var(--soft); border-radius: 8px; padding: 4px 8px; line-height: 0; }
.chart.mini { height: 64px; width: 100%; }
.risk { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.risk-low { color: var(--gain); background: color-mix(in srgb, var(--gain) 12%, transparent); }
.risk-moderate { color: var(--warn); background: var(--warn-bg); }
.risk-high { color: var(--loss); background: color-mix(in srgb, var(--loss) 12%, transparent); }

.tip { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 6px; border-radius: 50%; border: 1px solid var(--muted); color: var(--muted); font-size: 10px; cursor: help; position: relative; vertical-align: 1px; }
.tip:hover::after, .tip:focus::after { content: attr(data-tip); position: absolute; left: 50%; bottom: 150%; transform: translateX(-50%); width: 230px; padding: 8px 10px; background: var(--ink); color: var(--bg); border-radius: 8px; font-size: 12px; line-height: 1.4; z-index: 9; text-align: left; font-weight: 400; }
.metric { box-shadow: var(--shadow); }
.glance { background: var(--soft); }
.glance .lead { font-size: 1.05rem; margin: 0 0 14px; }
.glance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.glance-grid > div { display: flex; flex-direction: column; gap: 3px; }
.glance-grid small { color: var(--muted); } .glance-grid b { font-size: 1.5rem; } .glance-grid span { color: var(--muted); font-size: 13px; }
.meter { height: 8px; background: var(--line); border-radius: 99px; overflow: hidden; margin: 4px 0; } .meter i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }

.faq { margin: 44px 0 12px; max-width: 760px; }
details { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; margin: 8px 0; }
summary { cursor: pointer; font-weight: 600; } details p { color: var(--muted); margin: 10px 0 2px; }
.endcta { text-align: center; padding: 40px 16px; margin-top: 36px; border-radius: 20px; background: var(--soft); border: 1px solid var(--line); }
.endcta p { color: var(--muted); }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 10px; z-index: 30; transition: .25s; box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.skeleton { height: 420px; border-radius: 14px; background: linear-gradient(90deg, var(--line), color-mix(in srgb, var(--line) 40%, var(--panel)), var(--line)); background-size: 200% 100%; animation: shimmer 1.2s infinite linear; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } .card, .toast { transition: none; } html { scroll-behavior: auto; } }

/* ---------------------------------------------------------------- learn */
.learn { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 32px; align-items: start; }
.lessons { position: sticky; top: 76px; display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
.lessons a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 14px; }
.lessons a:hover { background: var(--soft); } .lessons a.on { background: var(--soft); color: var(--accent); font-weight: 600; }
.lessons .n { width: 22px; height: 22px; font-size: 11px; background: var(--line); color: var(--ink); }
.lessons a.on .n { background: var(--accent); color: var(--accent-ink); }
.lesson-body { max-width: 760px; min-width: 0; }
.lesson-body h1 { margin-top: 4px; } .lesson-body p, .lesson-body li { font-size: 1.02rem; }
.lesson-body h3 { margin-top: 1.4em; }
ul.plain { padding-left: 20px; } ul.plain li { margin: 6px 0; }
.callout { background: var(--soft); border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; padding: 12px 16px; margin: 16px 0; }
.example { background: var(--panel); border: 1px dashed var(--line); border-radius: 10px; padding: 12px 16px; margin: 16px 0; }
.example small { display: block; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; font-size: 11px; margin-bottom: 4px; }
.terms { display: grid; gap: 8px; margin: 14px 0; }
.terms div { display: grid; grid-template-columns: 170px 1fr; gap: 14px; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.terms span { color: var(--muted); }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 14px 0; } .two .panel { margin: 0; }
.diagram h3 { margin-top: 0; } .diagram .chart { margin: 6px 0 10px; } .diagram ul { margin: 6px 0 0; padding-left: 18px; } .diagram p { margin: 4px 0; font-size: 14px; } .diagram li { font-size: 14px !important; }
.playground .chart { background: var(--soft); border-radius: 10px; }
.chips-wrap { margin-bottom: 8px; }
.scrub { display: grid; gap: 6px; margin: 14px 0; } .scrub input[type=range] { width: 100%; accent-color: var(--accent); } .scrub div { font-size: 1.15rem; }
.legs { display: grid; gap: 8px; margin: 12px 0; }
.legrow { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 10px; align-items: end; }
.legrow label, .lotsrow { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; }
.legrow input, .lotsrow input { font: inherit; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); width: 100%; }
.lotsrow { max-width: 220px; } .legname { font-weight: 600; padding-bottom: 8px; }
.pager { display: flex; justify-content: space-between; gap: 10px; margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.lesson.card { text-decoration: none; color: var(--ink); } .lesson.card h3 { margin: 0; }
.options { display: grid; gap: 8px; margin: 12px 0; }
.option { text-align: left; padding: 12px 14px; }
.option.right { border-color: var(--gain); background: color-mix(in srgb, var(--gain) 12%, var(--panel)); }
.option.wrong { border-color: var(--loss); background: color-mix(in srgb, var(--loss) 12%, var(--panel)); }
.gloss { display: grid; grid-template-columns: 200px 1fr; gap: 0; } .gloss dt { font-weight: 600; padding: 10px 0; border-bottom: 1px solid var(--line); } .gloss dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--muted); }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding: 24px 18px; }
  .learn { grid-template-columns: 1fr; gap: 12px; }
  .lessons { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
  .lessons a { white-space: nowrap; }
  .terms div { grid-template-columns: 1fr; gap: 2px; }
  .legrow { grid-template-columns: 1fr 1fr; } .legname { grid-column: 1 / -1; padding-bottom: 0; }
  .gloss { grid-template-columns: 1fr; } .gloss dt { border-bottom: 0; padding-bottom: 0; }
}

.option:disabled { opacity: 1; cursor: default; color: var(--ink); }
.option:disabled:not(.right):not(.wrong) { opacity: .6; }

/* ================================================================ premium look: dark, glow, glass */
body { background: radial-gradient(1200px 600px at 80% -10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%), radial-gradient(900px 500px at -10% 10%, color-mix(in srgb, var(--violet) 12%, transparent), transparent 60%), var(--bg); background-attachment: fixed; }
.top { background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom-color: var(--line); }
.brand { background: linear-gradient(90deg, var(--ink), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -.01em; }
button.theme { border-radius: 999px; font-size: 13px; padding: 6px 12px; color: var(--muted); }
.panel, .card, .metric, details, .steps li, .feature, .rung, .counters div { background: color-mix(in srgb, var(--panel) 88%, transparent); border-color: var(--line); }
.notice { border: 1px solid color-mix(in srgb, var(--warn) 25%, transparent); }
.num { font-feature-settings: "tnum"; }
.strong { font-weight: 700; }
.icon { width: 20px; height: 20px; flex: none; }
.grad { background: linear-gradient(95deg, var(--accent), var(--gold) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.codename { letter-spacing: -.02em; }

/* hero */
.hero { position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); padding: 56px 40px; min-height: 480px;
  background: radial-gradient(700px 360px at 90% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 65%), radial-gradient(600px 400px at 0% 100%, color-mix(in srgb, var(--violet) 22%, transparent), transparent 65%), color-mix(in srgb, var(--panel) 80%, var(--bg)); }
.hero h1 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); line-height: 1.04; letter-spacing: -.035em; }
.hero p { color: var(--muted); font-size: 1.12rem; }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.eyebrow .icon { width: 14px; height: 14px; }
.btn.glow, button.glow { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent), 0 8px 30px color-mix(in srgb, var(--accent) 38%, transparent); }
.btn.glow:hover, button.glow:hover { box-shadow: 0 0 0 1px var(--accent), 0 10px 40px color-mix(in srgb, var(--accent) 55%, transparent); transform: translateY(-1px); }
.btn.ghost { background: transparent; }
.hero-art { position: relative; height: 380px; }
.orb { position: absolute; width: 300px; height: 300px; right: 10%; top: 10%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 70%, #fff), transparent 60%); filter: blur(50px); opacity: .35; animation: pulse 6s ease-in-out infinite; }
.tease { position: absolute; width: 270px; padding: 14px 16px; border-radius: 16px; display: grid; gap: 10px; backdrop-filter: blur(14px); background: color-mix(in srgb, var(--panel) 70%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); box-shadow: 0 20px 50px rgba(0,0,0,.35); animation: float 7s ease-in-out infinite; animation-delay: calc(var(--i) * -2s); }
.tease:nth-of-type(2) { right: 0; top: 0; transform: rotate(3deg); }
.tease:nth-of-type(3) { left: 4%; top: 36%; transform: rotate(-3deg); z-index: 2; }
.tease:nth-of-type(4) { right: 8%; bottom: 0; transform: rotate(2deg); }
.tease.tier-apex { border-color: color-mix(in srgb, var(--gold) 55%, transparent); box-shadow: 0 20px 60px color-mix(in srgb, var(--gold) 22%, transparent); }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes pulse { 0%, 100% { opacity: .28; scale: 1; } 50% { opacity: .45; scale: 1.1; } }

/* masked stats: the numbers are for subscribers */
.kv.masked { gap: 9px 12px; }
.mask { display: inline-block; height: 11px; width: 64px; border-radius: 6px; margin-left: auto; background: linear-gradient(90deg, color-mix(in srgb, var(--muted) 35%, transparent), color-mix(in srgb, var(--muted) 12%, transparent)); filter: blur(2.5px); }
.mask.big { display: block; height: 22px; width: 70%; margin-top: 8px; }
.lockline { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 600; }
.lockline .icon { width: 14px; height: 14px; }

/* marquee and counters */
.marquee { overflow: hidden; margin: 18px 0 6px; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.track { display: flex; gap: 46px; width: max-content; animation: scroll 160s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .track { animation: none; } }
.track span { font-weight: 800; letter-spacing: .28em; font-size: 13px; color: color-mix(in srgb, var(--muted) 80%, transparent); }
.track span:nth-child(3n) { color: var(--accent); } .track span:nth-child(7n) { color: var(--gold); }
@keyframes scroll { to { transform: translateX(-25%); } }
.counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 18px 0; }
.counters div { padding: 18px; border: 1px solid var(--line); border-radius: 14px; text-align: center; }
.counters b { display: block; font-size: 2.1rem; letter-spacing: -.02em; background: linear-gradient(180deg, var(--ink), color-mix(in srgb, var(--accent) 70%, var(--ink))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.counters span { color: var(--muted); font-size: 13px; }

/* features */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin: 26px 0; }
.feature { display: grid; grid-template-columns: 44px 1fr; gap: 2px 14px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; align-items: start; }
.feature .fi, .pw-card .fi { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); }
.feature span:last-child { color: var(--muted); font-size: 14px; }
.section-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; } .section-head h2 { font-size: 2rem; letter-spacing: -.02em; margin: 0; }

/* pricing ladder */
.ladder { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.rung { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 4px; }
.rung b { font-size: 1.5rem; letter-spacing: -.02em; }
.rung.tier-apex { border-color: color-mix(in srgb, var(--gold) 60%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 16%, var(--panel)), var(--panel)); box-shadow: 0 8px 30px color-mix(in srgb, var(--gold) 14%, transparent); }
.rung.tier-apex b { color: var(--gold); }
.tier-title h2 { font-size: 1.5rem; }

/* strategy cards */
.grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.card { position: relative; overflow: hidden; border-radius: 16px; padding: 18px; gap: 14px; }
.card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--c1, var(--accent)), var(--c2, transparent)); }
.card.tier-apex { --c1: var(--gold); --c2: color-mix(in srgb, var(--gold) 10%, transparent); border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); box-shadow: 0 10px 40px color-mix(in srgb, var(--gold) 14%, transparent); }
.card.tier-prime { --c1: var(--tier-prime); } .card.tier-core { --c1: var(--tier-core); } .card.tier-edge { --c1: var(--tier-edge); } .card.tier-lite, .card.tier-free { --c1: var(--tier-lite); }
.card:hover { box-shadow: 0 14px 44px color-mix(in srgb, var(--c1, var(--accent)) 20%, transparent); }
.card h3.codename { font-size: 1.6rem; margin: 0; }
.card.tier-apex h3.codename { background: linear-gradient(95deg, var(--gold), #fff3c9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ribbon { position: absolute; top: 14px; right: -34px; transform: rotate(35deg); background: linear-gradient(90deg, #d49a1a, var(--gold)); color: #231800; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 3px 40px; }
.card.tier-apex .badge { margin-right: 22px; }
.row.buy { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line); }
.price b { font-size: 1.5rem; letter-spacing: -.02em; } .price small { color: var(--muted); }
.badge { background: color-mix(in srgb, currentColor 10%, transparent); }

/* strategy page */
.shead .titlerow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.shead h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 0; letter-spacing: -.03em; }
.shead.tier-apex h1 { background: linear-gradient(95deg, var(--gold), #fff3c9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.glance { border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 10%, var(--panel)), var(--panel)); }
.metrics.small { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin-bottom: 12px; }
.tag, .out { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; letter-spacing: .03em; }
.tag.paper { color: var(--violet); background: color-mix(in srgb, var(--violet) 14%, transparent); } .tag.backtest { color: var(--muted); background: color-mix(in srgb, var(--muted) 14%, transparent); }
.out-risk { color: var(--loss); background: color-mix(in srgb, var(--loss) 12%, transparent); } .out-target { color: var(--gain); background: color-mix(in srgb, var(--gain) 12%, transparent); } .out-scheduled { color: var(--muted); background: color-mix(in srgb, var(--muted) 12%, transparent); }
tr:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); }

/* paywall */
.paywall { position: relative; margin: 18px 0; min-height: 440px; }
.pw-preview { filter: blur(7px); opacity: .55; pointer-events: none; user-select: none; }
.fakechart { height: 190px; background: linear-gradient(135deg, transparent 40%, color-mix(in srgb, var(--accent) 22%, transparent)); }
.pw-card { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); width: min(480px, calc(100% - 24px)); padding: 28px; border-radius: 20px; background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow: 0 30px 80px rgba(0,0,0,.45); backdrop-filter: blur(10px); text-align: center; display: grid; gap: 10px; justify-items: center; }
.pw-card .fi { grid-row: auto; }
.pw-card h2 { margin: 4px 0 0; font-size: 1.7rem; }
ul.ticks { list-style: none; padding: 0; margin: 4px 0; text-align: left; display: grid; gap: 8px; }
ul.ticks li { padding-left: 26px; position: relative; } ul.ticks li::before { content: ""; position: absolute; left: 0; top: 5px; width: 14px; height: 8px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.pw-card .price b { font-size: 2.2rem; }

.endcta { background: radial-gradient(500px 220px at 50% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%), color-mix(in srgb, var(--panel) 85%, transparent); border-color: color-mix(in srgb, var(--accent) 28%, var(--line)); }
.endcta h2 { font-size: 2rem; letter-spacing: -.02em; }
.dialog { background: var(--panel); border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.modal { backdrop-filter: blur(4px); }
.chip[aria-pressed="true"] { box-shadow: 0 4px 18px color-mix(in srgb, var(--accent) 35%, transparent); }
.callout, .glance { color: var(--ink); }
.shape { display: none; }

@media (max-width: 860px) {
  .hero { padding: 30px 20px; min-height: 0; }
  .hero-art { height: 250px; overflow: hidden; margin-top: 8px; } .tease { width: 220px; padding: 11px 13px; }
  .tease:nth-of-type(3) { top: 30%; } .tease:nth-of-type(4) { display: none; }
  .pw-card { position: relative; left: auto; top: auto; transform: none; margin: -300px auto 0; }
}
@media (prefers-reduced-motion: reduce) { .tease, .orb, .track { animation: none; } }

.card.tier-apex .badge { margin-right: 40px; margin-top: 2px; }
.ribbon { top: 12px; right: -42px; font-size: 10px; }

.hero-art { height: 470px; }
.tease:nth-of-type(3) { top: 31%; }
@media (max-width: 860px) { .hero-art { height: 300px; } .tease:nth-of-type(3) { top: 36%; } }

/* ================================================================ catalog controls, basket, brokers */
.catbar { display: grid; gap: 10px; margin: 14px 0 6px; }
.catrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.search, select { font: inherit; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); min-width: 0; }
.search { flex: 1 1 220px; max-width: 360px; }
.card .btns { display: flex; gap: 8px; align-items: center; }
button.cmp { font-size: 13px; padding: 7px 11px; border-radius: 999px; background: transparent; color: var(--muted); }
button.cmp[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 600; }
button.cmp.big { font-size: 14px; padding: 8px 14px; }
.basketbar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 15; display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 18px;
  background: color-mix(in srgb, var(--panel) 94%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 999px; backdrop-filter: blur(10px);
  box-shadow: 0 14px 44px rgba(0,0,0,.45), 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent); font-weight: 600; }
.basketbar[hidden] { display: none; }

.chosen { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 4px; }
.pick { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.pick label { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.pick input { width: 64px; font: inherit; padding: 4px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); }
.hero-basket { border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 9%, var(--panel)), var(--panel)); }
.hero-basket .lead { font-size: 1.1rem; margin: 0 0 14px; }
.unlockbox { border-style: dashed; } .unlocklist { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.empty { text-align: center; padding: 40px 16px; }
.actions-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
.cmp-wrap { max-height: 75vh; overflow: auto; }
table.cmp-table th, table.cmp-table td { text-align: right; min-width: 110px; }
table.cmp-table th:first-child { text-align: left; position: sticky; left: 0; background: var(--panel); min-width: 190px; z-index: 1; }
table.cmp-table thead th { vertical-align: top; text-align: center; }
table.cmp-table thead th:first-child { text-align: left; }
table.cmp-table td.best { color: var(--accent); font-weight: 700; background: color-mix(in srgb, var(--accent) 9%, transparent); }
table.cmp-table td.loss.best { color: var(--accent); }
table.cmp-table td .mask { width: 50px; }

.brokers .broker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
.btile { border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; gap: 8px; align-content: start; background: color-mix(in srgb, var(--panel) 88%, transparent); }
.btile.live { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 8px 28px color-mix(in srgb, var(--accent) 12%, transparent); }
.bbtns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.pill { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.pill.on { color: var(--gain); background: color-mix(in srgb, var(--gain) 14%, transparent); } .pill.off { color: var(--muted); background: color-mix(in srgb, var(--muted) 14%, transparent); }
.pill.warn { color: var(--warn); background: var(--warn-bg); }
.consent { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0 !important; font-size: 13px; color: var(--ink) !important; }
.consent input { width: auto !important; margin-top: 3px; }
.ready { border-color: color-mix(in srgb, var(--accent) 22%, var(--line)); }
.ready p { margin: 6px 0; }
@media (max-width: 860px) { .basketbar { left: 12px; right: 12px; transform: none; justify-content: space-between; border-radius: 16px; } table.cmp-table th:first-child { min-width: 140px; } }

table.heat thead th { text-align: center; }
table.heat tbody th { text-align: left; white-space: nowrap; }
.btile .tag { justify-self: start; }

button.cmp { white-space: nowrap; }
.row.buy { flex-wrap: wrap; gap: 8px; }
.price b { display: block; line-height: 1.1; }
.price small { font-size: 12px; }

.steps-list { margin: 4px 0; padding-left: 18px; color: var(--muted); } .steps-list li { margin: 3px 0; }
code { background: color-mix(in srgb, var(--muted) 14%, transparent); padding: 1px 6px; border-radius: 6px; word-break: break-all; }
.btile label { display: grid; gap: 3px; } .btile input { font: inherit; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); }

button.danger { background: color-mix(in srgb, var(--loss) 14%, transparent); border-color: var(--loss); color: var(--loss); font-weight: 600; }
.tform { display: grid; gap: 10px; max-width: 460px; } .tform label { display: grid; gap: 3px; }
.tform select, .tform input[type=number], .tform input[type=text], .tform textarea, .panel textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); width: 100%; }
.modes { display: grid; gap: 6px; } label.radio { display: flex; gap: 8px; align-items: center; } label.radio input { width: auto; }
.trade-panel { border-color: color-mix(in srgb, var(--accent) 25%, var(--line)); } pre.small { white-space: pre-wrap; margin: 8px 0 0; }

.live-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .live-head h1 { margin: 0; }
.livedot { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .08em; }
.livedot i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); animation: ping 1.6s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.pulse { animation: blink 1.6s ease-in-out infinite; } @keyframes blink { 50% { opacity: .55; } }
.trialbox { display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 10%, var(--panel)), var(--panel)); }
.trialbox h3 { margin: 0 0 4px; } .livecard .titlerow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .livecard a.codename { font-size: 1.25rem; font-weight: 700; color: var(--ink); text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .livedot i, .pulse { animation: none; } }

/* momentum portfolios */
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 6px; }
.legend i { display: inline-block; width: 18px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.buckets { margin-top: 4px; }
.buckets button { font-size: 15px; }
[data-bucket][hidden] { display: none !important; }
td.strong { font-weight: 600; }
table.livelist tr.clickable { cursor: pointer; } table.livelist tr.clickable:hover td { background: color-mix(in srgb, var(--ink) 4%, transparent); }
table.livelist tr.livedetail > td { padding: 4px 8px 14px 28px; background: color-mix(in srgb, var(--ink) 3%, transparent); }
table.trades.inner { width: 100%; font-size: 0.92em; }
.notice.feed { background: color-mix(in srgb, var(--gain, #2ecc71) 10%, transparent); color: var(--ink); border-color: color-mix(in srgb, var(--gain, #2ecc71) 30%, transparent); }
.notice.feed.bad { background: var(--warn-bg); color: var(--warn); }
.cycleblock { margin: 6px 0 14px; } .cyclehead { display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line, #2a2f3a); }
.tradeblock { margin: 10px 0 4px; } .tradehead { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; } .tradehead .num { margin-left: auto; }
table.trades.legtable { width: 100%; font-size: 0.9em; } table.trades.legtable td { vertical-align: top; } table.trades.legtable tr.legclosed td { opacity: 0.75; }
.tradeblock .scroll { width: 100%; } .tradeblock table.trades.legtable { width: 100%; min-width: 640px; }
.traffic .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.traffic .seg button { margin-left: 4px; padding: 4px 10px; font-size: 12px; } .traffic .seg button.on { background: var(--accent); color: var(--accent-ink); }
.tchart svg { width: 100%; height: 140px; display: block; } .tchart rect { fill: var(--accent); opacity: 0.85; } .tchart rect:hover { opacity: 1; }
.thours { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; margin-bottom: 12px; } .thours div { background: var(--accent); color: var(--accent-ink); font-size: 10px; text-align: center; border-radius: 3px; padding: 4px 0; }
.tgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 760px) { .tgrid { grid-template-columns: 1fr; } }
.traffic h4 { margin: 12px 0 6px; }

.sebi { font-weight: 600; } .hero .hero-text p.hero-sebi { margin-top: 16px; font-size: 13px; line-height: 1.5; }

.rulespage .seg button { margin-left: 4px; padding: 4px 10px; font-size: 12px; } .rulespage .seg button.on { background: var(--accent); color: var(--accent-ink); }
table.rules td { white-space: normal; vertical-align: top; } table.rules td.l { min-width: 110px; }
.rulesdetail { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px 22px; padding: 6px 0 4px; white-space: normal; }
.rulesec h4, .ruleex h4 { margin: 8px 0 4px; } .rulesec ul, .ruleex ol { margin: 0; padding-left: 18px; } .rulesec li, .ruleex li { margin: 3px 0; line-height: 1.45; }
.ruleex { grid-column: 1 / -1; background: color-mix(in srgb, var(--accent) 6%, transparent); border-radius: 10px; padding: 6px 14px 10px; }
table.rules tr.livedetail > td, .rulesdetail, .ruleex { text-align: left; }
.rulespage input[type=search] { min-width: 320px; padding: 8px 10px; }

/* invite only: the strategies traded live */
.badge.t-invite { color: #e9d5ff; border-color: #a855f7; background: color-mix(in srgb, #a855f7 18%, transparent); }
:root[data-theme="light"] .badge.t-invite { color: #6b21a8; }
.card.tier-invite { border-color: color-mix(in srgb, #a855f7 45%, var(--line)); }
.ribbon.invite { background: linear-gradient(90deg, #7c3aed, #a855f7); color: #fff; }
.invitebox { border-color: color-mix(in srgb, #a855f7 45%, var(--line)); }