/* ============================================================
PRISM — shared stylesheet
Used by every page. Upload alongside the .html files.
============================================================ */
:root{
--bg:#070b14; --bg2:#0b1120; --panel:#0f172a; --panel2:#131c30;
--line:#1e293b; --line2:#27354d;
--cyan:#22d3ee; --gold:#fbbf24;--mark-long:#5aa650;--mark-short:#ff510d; --orange:#f97316; --green:#22c55e; --red:#ef4444;
--bull:#00e5b0; --bear:#ff4d6d;
--text:#e2e8f0; --muted:#94a3b8; --faint:#64748b;
--radius:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.6;overflow-x:hidden}
::selection{background:rgba(34,211,238,.3)}
a{color:var(--cyan);text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:860px;margin:0 auto;padding:0 24px}
/* scrollbar */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:#334660}
/* ── SCROLL REVEAL ─────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .85s cubic-bezier(.22,.7,.3,1),transform .85s cubic-bezier(.22,.7,.3,1)}
.reveal.visible{opacity:1;transform:none}
[data-stagger]>*{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,.7,.3,1),transform .7s cubic-bezier(.22,.7,.3,1)}
.visible[data-stagger]>*{opacity:1;transform:none}
[data-stagger]>*:nth-child(1){transition-delay:.06s}
[data-stagger]>*:nth-child(2){transition-delay:.14s}
[data-stagger]>*:nth-child(3){transition-delay:.22s}
[data-stagger]>*:nth-child(4){transition-delay:.30s}
[data-stagger]>*:nth-child(5){transition-delay:.38s}
[data-stagger]>*:nth-child(6){transition-delay:.46s}
[data-stagger]>*:nth-child(7){transition-delay:.54s}
[data-stagger]>*:nth-child(8){transition-delay:.62s}
@media (prefers-reduced-motion: reduce){
.reveal,[data-stagger]>*{opacity:1 !important;transform:none !important;transition:none !important}
html{scroll-behavior:auto}
}
/* ── NAV ───────────────────────────────────────────────── */
nav{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(7,11,20,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(30,41,59,.7);transition:background .3s,border-color .3s}
nav.scrolled{background:rgba(7,11,20,.94);border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:64px}
/* The wordmark is an image now. width/height on the hold the space
before it decodes, so the nav never reflows; the text styling below is
the fallback if the image fails and the alt text renders instead. */
.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.12em;font-size:15px;color:var(--text)}
.logo img{height:34px;width:auto;display:block;transition:filter .25s,transform .25s}
a.logo:hover{color:#fff}
a.logo:hover img{filter:brightness(1.14) saturate(1.06)}
.logo .gem{width:14px;height:14px;background:linear-gradient(135deg,var(--bull),var(--cyan));transform:rotate(45deg);box-shadow:0 0 16px rgba(34,211,238,.8);border-radius:2px;flex:0 0 auto}
.nav-links{display:flex;gap:26px;align-items:center;font-size:14px}
.nav-links a{color:var(--muted);position:relative;white-space:nowrap;font-weight:500}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:2px;background:var(--cyan);transition:.25s;border-radius:2px}
.nav-links a:not(.btn):hover{color:var(--text)}
.nav-links a:not(.btn):hover::after{width:100%}
.nav-links a.active{color:var(--text);font-weight:600}
.nav-links a.active:not(.btn)::after{width:100%}
/* ── Flag emoji font ───────────────────────────────────────
Windows has no flag glyphs in its system emoji font, so Chrome
and Edge on Windows show "GB"/"JP" instead of 🇬🇧/🇯🇵. This is a
flags-only subset (Twemoji, ~78 KB, self-hosted). unicode-range
limits it to the regional-indicator block, so it is downloaded
only when a flag is actually rendered and never touches normal
text. Firefox, macOS, iOS and Android don't need it and mostly
won't fetch it.
──────────────────────────────────────────────────────────── */
/* ── FIRST PAINT ───────────────────────────────────────────
The homepage holds its first paint until Playfair Display is ready
and then fades in, so headings are never painted in the fallback
serif and re-set a moment later. Driven by the inline script in
index.html's head: nothing here applies unless that script ran, so a
browser with scripts off is unaffected, and a timeout in the script
releases the page if the font is slow or missing.
─────────────────────────────────────────────────────────── */
html.fonts-loading body{opacity:0}
html.fonts-ready body{opacity:1;transition:opacity .3s ease}
@media(prefers-reduced-motion:reduce){
html.fonts-ready body{transition:none}
}
@font-face{
font-family:"Twemoji Country Flags";
src:url("TwemojiCountryFlags.woff2") format("woff2");
unicode-range:U+1F1E6-1F1FF;
font-display:swap;
}
/* ── NAV RIGHT GROUP + LANGUAGE SELECT ─────────────────── */
.nav-right{display:flex;align-items:center;gap:16px}
.lang{display:flex;align-items:center}
.lang-select{
-webkit-appearance:none;-moz-appearance:none;appearance:none;
height:36px;padding:0 32px 0 12px;
border:1px solid var(--line2);border-radius:10px;
background-color:rgba(15,23,42,.6);
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 11px center;background-size:10px 6px;
color:var(--text);font-size:13.5px;font-weight:600;line-height:34px;
font-family:"Twemoji Country Flags",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
cursor:pointer;transition:border-color .22s;
}
.lang-select:hover,.lang-select:focus{border-color:rgba(34,211,238,.55);outline:none}
.lang-select:focus-visible{box-shadow:0 0 0 3px rgba(34,211,238,.15)}
/* the dropdown list itself is drawn by the OS — force dark so it matches */
.lang-select option{background:#0b1120;color:#e2e8f0;font-weight:500;
font-family:"Twemoji Country Flags",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
/* Google Translate widget — keep it invisible, we drive it ourselves */
#google_translate_element{display:none !important}
.goog-te-banner-frame,.goog-te-banner-frame.skiptranslate,iframe.skiptranslate{display:none !important}
body{top:0 !important;position:static !important}
#goog-gt-tt,.goog-te-balloon-frame{display:none !important}
.goog-text-highlight{background:none !important;box-shadow:none !important}
/* hamburger */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:38px;border:1px solid var(--line2);border-radius:10px;background:rgba(15,23,42,.6);cursor:pointer;padding:0 10px}
.nav-toggle span{display:block;height:2px;width:100%;background:var(--text);border-radius:2px;transition:.28s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ── BUTTONS ───────────────────────────────────────────── */
.btn{display:inline-block;padding:12px 24px;border-radius:11px;font-weight:700;font-size:14px;letter-spacing:.02em;transition:.25s;cursor:pointer;border:none;position:relative;overflow:hidden;text-align:center}
.btn-cyan{background:linear-gradient(135deg,var(--bull),var(--cyan));color:#04202a}
.btn-cyan:hover{box-shadow:0 0 34px rgba(34,211,238,.6);transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--line2);color:var(--text);background:rgba(15,23,42,.4);backdrop-filter:blur(6px)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 20px rgba(34,211,238,.15)}
.btn-gold{background:linear-gradient(135deg,var(--gold),#f59e0b);color:#3b2a00}
.btn-gold:hover{box-shadow:0 0 34px rgba(251,191,36,.45);transform:translateY(-2px)}
.btn.disabled,.btn[aria-disabled="true"]{opacity:.55;pointer-events:none;filter:grayscale(.4)}
/* nav link colour must not win over button colour */
.nav-links a.btn-cyan{color:#fff;font-weight:800}
.nav-links a.btn-gold{color:#3b2a00}
.nav-links a.btn-ghost{color:var(--text)}
.nav-links a.btn:hover{color:#04202a}
.btn-lg{padding:15px 34px;font-size:15px;border-radius:13px}
/* ── HERO (home) ───────────────────────────────────────── */
header.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;
/* The nav is a 64px fixed overlay, so the visual centre of the hero is
32px below the viewport centre. Padding-top carries that 64px plus the
same reserve as the bottom, which keeps the block optically centred in
the space under the nav while still leaving room for the scroll cue. */
padding:160px 0 96px}
#waves{position:absolute;inset:0;width:100%;height:100%}
.hero-glow{position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(ellipse 55% 45% at 50% 8%, rgba(34,211,238,.12), transparent 60%),
radial-gradient(ellipse 40% 35% at 82% 78%, rgba(0,229,176,.07), transparent 60%),
radial-gradient(ellipse 40% 35% at 14% 72%, rgba(249,115,22,.06), transparent 60%)}
.hero-grid{position:absolute;inset:0;pointer-events:none;opacity:.5;
background-image:linear-gradient(rgba(148,163,184,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.05) 1px,transparent 1px);
background-size:56px 56px;
-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 75%);
mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 75%)}
.hero-in{position:relative;text-align:center;max-width:880px;margin:0 auto;padding:0 24px;animation:heroIn 1.1s cubic-bezier(.22,.7,.3,1) both}
@keyframes heroIn{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--cyan);border:1px solid rgba(34,211,238,.35);background:rgba(34,211,238,.07);padding:7px 16px;border-radius:999px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;backdrop-filter:blur(6px)}
.pill.gold{color:var(--gold);border-color:rgba(251,191,36,.35);background:rgba(251,191,36,.07)}
.pill.gold .dot{background:var(--gold)}
.pill.orange{color:var(--orange);border-color:rgba(249,115,22,.35);background:rgba(249,115,22,.07)}
.pill.orange .dot{background:var(--orange)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
h1{font-size:clamp(42px,7vw,76px);line-height:1.05;font-weight:800;margin:26px 0 10px;letter-spacing:-.01em}
h1 .grad{background:linear-gradient(90deg,var(--bull),var(--cyan) 40%,#7dd3fc 65%,var(--gold));background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradShift 6s ease-in-out infinite alternate}
@keyframes gradShift{from{background-position:0% 50%}to{background-position:100% 50%}}
.tagline{font-size:clamp(17px,2.4vw,23px);color:var(--muted);margin:14px auto 36px;max-width:640px}
.hero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero-ctas .btn{padding:15px 34px;font-size:15px;border-radius:13px}
.hero-note{margin-top:22px;font-size:13px;color:var(--faint)}
.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--faint);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;z-index:2}
.scroll-cue:hover{color:var(--cyan)}
/* short viewports (laptops, 125% Windows scaling) have no room for the
cue below the content — drop it rather than let the two collide */
@media (max-height:780px){.scroll-cue{display:none}}
.scroll-cue .chev{width:22px;height:22px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);animation:chevBounce 1.8s infinite}
@keyframes chevBounce{0%,100%{transform:rotate(45deg) translate(0,0);opacity:.5}50%{transform:rotate(45deg) translate(6px,6px);opacity:1}}
/* ── PAGE HERO (sub-pages) ─────────────────────────────── */
.page-hero{position:relative;padding:150px 0 70px;text-align:center;overflow:hidden;
background:
radial-gradient(ellipse 60% 70% at 50% 0%, rgba(34,211,238,.10), transparent 65%),
var(--bg2)}
.page-hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
background-image:linear-gradient(rgba(148,163,184,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.05) 1px,transparent 1px);
background-size:56px 56px;
-webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 20%,#000 20%,transparent 78%);
mask-image:radial-gradient(ellipse 70% 80% at 50% 20%,#000 20%,transparent 78%)}
.page-hero .wrap{position:relative;z-index:1}
.page-hero.gold{background:radial-gradient(ellipse 60% 70% at 50% 0%, rgba(251,191,36,.10), transparent 65%),var(--bg2)}
.page-hero.orange{background:radial-gradient(ellipse 60% 70% at 50% 0%, rgba(249,115,22,.10), transparent 65%),var(--bg2)}
.page-hero h1{font-size:clamp(34px,5.4vw,58px);margin:20px 0 12px}
.page-hero .tagline{margin-bottom:0}
.crumb{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
.crumb a{color:var(--faint)}
.crumb a:hover{color:var(--cyan)}
/* ── SECTIONS ──────────────────────────────────────────── */
section{padding:96px 0;position:relative}
section[id],[id].anchor{scroll-margin-top:84px}
section.tight{padding:64px 0}
.kicker{color:var(--cyan);font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin-bottom:12px;display:inline-flex;align-items:center;gap:12px}
.kicker::before,.kicker::after{content:"";width:26px;height:1px;background:currentColor;opacity:.5}
.kicker.red{color:var(--bear)}
.kicker.green{color:var(--bull)}
.kicker.gold{color:var(--gold)}
.kicker.orange{color:var(--orange)}
h2{font-size:clamp(27px,3.8vw,42px);font-weight:800;line-height:1.12;margin-bottom:16px;letter-spacing:-.01em}
h3{font-size:19px;font-weight:700;line-height:1.3}
.lead{color:var(--muted);max-width:700px;font-size:17px}
.center{text-align:center}.center .lead{margin:0 auto}
.big-copy{font-size:clamp(19px,2.6vw,26px);line-height:1.55;max-width:780px;margin:0 auto;color:var(--text);font-weight:500}
.big-copy em{color:var(--cyan);font-style:normal;font-weight:700}
.big-copy .hot{color:var(--bear);font-style:normal;font-weight:700}
.statement{padding:120px 0}
.statement h2{font-size:clamp(44px,7vw,80px);letter-spacing:-.02em;margin-bottom:30px}
.statement h2 .q-red{background:linear-gradient(90deg,#ff4d6d,#ff8c66);-webkit-background-clip:text;background-clip:text;color:transparent}
.statement h2 .q-green{background:linear-gradient(90deg,var(--bull),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.statement .big-copy{font-size:clamp(23px,3.4vw,34px);line-height:1.42;max-width:900px;font-weight:600}
.statement .big-copy em{background:linear-gradient(90deg,var(--bull),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.sect-glow-red{background:radial-gradient(ellipse 60% 55% at 50% 0%,rgba(255,77,109,.06),transparent 65%)}
.sect-glow-green{background:radial-gradient(ellipse 60% 55% at 50% 0%,rgba(0,229,176,.06),transparent 65%)}
/* ── MARKETS ROW ───────────────────────────────────────── */
.markets{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}
/* NOTE: ">" matters — a nested (e.g. a notranslate wrapper)
must not pick up the pill border and read as a chip inside a chip. */
.markets>span{border:1px solid var(--line2);background:linear-gradient(180deg,rgba(255,255,255,.02),transparent),var(--panel);border-radius:999px;padding:9px 24px;font-size:14.5px;font-weight:700;color:var(--muted);transition:.25s}
.markets>span:hover{border-color:rgba(0,229,176,.5);color:var(--text);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.markets>span b{color:var(--bull)}
/* ── PANE MOCK ─────────────────────────────────────────── */
.mock{margin:52px auto 0;max-width:900px;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent),var(--panel);border:1px solid var(--line2);border-radius:var(--radius);padding:14px;box-shadow:0 40px 100px rgba(0,0,0,.55), 0 0 80px rgba(34,211,238,.07);position:relative}
.mock::before{content:"";position:absolute;inset:-1px;border-radius:var(--radius);padding:1px;background:linear-gradient(135deg,rgba(34,211,238,.4),transparent 30%,transparent 70%,rgba(249,115,22,.3));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.mock-bar{display:flex;gap:6px;padding:2px 4px 12px}
.mock-bar i{width:10px;height:10px;border-radius:50%;background:var(--line2);display:block}
.mock-bar i:first-child{background:#f87171}.mock-bar i:nth-child(2){background:var(--gold)}.mock-bar i:nth-child(3){background:var(--green)}
#paneMock,.pane-canvas{width:100%;height:280px;display:block;border-radius:8px;background:var(--bg2)}
.mock-cap{font-size:12.5px;color:var(--faint);text-align:center;padding:10px 4px 2px}
.calc-points{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:900px;margin:26px auto 0}
.calc-points div{background:linear-gradient(180deg,rgba(255,255,255,.02),transparent),var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px;font-size:14px;color:var(--muted);text-align:left;transition:.25s}
.calc-points div:hover{border-color:rgba(34,211,238,.4);transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.35)}
.calc-points b{color:var(--text);display:block;margin-bottom:4px;font-size:15px}
/* ── COMPACT RESEARCH NOTE (home) ──────────────────────────
Small companion to the full reader on research.html. */
.mini-paper{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:0;
align-items:stretch;text-align:left;margin:40px auto 0;max-width:840px;
background:linear-gradient(180deg,rgba(255,255,255,.02),transparent),var(--panel);
border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.28s}
.mini-paper:hover{border-color:rgba(34,211,238,.42);
box-shadow:0 20px 48px rgba(0,0,0,.45),0 0 40px rgba(34,211,238,.07)}
.mp-cover{display:block;position:relative;background:#0a0f1c;border-right:1px solid var(--line);
padding:20px;display:flex;align-items:center;justify-content:center}
.mp-cover img{width:100%;height:auto;border-radius:4px;background:#fff;
box-shadow:0 12px 30px rgba(0,0,0,.6);transition:transform .4s cubic-bezier(.22,.7,.3,1)}
.mini-paper:hover .mp-cover img{transform:translateY(-3px) scale(1.02)}
.mp-body{padding:26px 28px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.mp-body h3{font-size:19px;line-height:1.28;margin-bottom:5px}
.mp-ref{font-size:12.5px;color:var(--faint);letter-spacing:.02em;margin-bottom:12px}
.mp-body p{color:var(--muted);font-size:14.5px;margin:0}
.mp-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.mp-actions .btn{padding:11px 20px;font-size:13.5px}
.mp-meta{font-size:12px;color:var(--faint);margin-top:12px}
@media(max-width:760px){
.mini-paper{grid-template-columns:1fr;margin-top:30px}
.mp-cover{border-right:0;border-bottom:1px solid var(--line);padding:22px 22px 0;
max-height:230px;overflow:hidden;align-items:flex-start}
.mp-cover img{max-width:280px;margin:0 auto}
.mp-body{padding:22px}
.mp-actions .btn{width:100%}
}
/* ── INTRO VIDEO (home) ────────────────────────────────────
Click-to-load YouTube facade: nothing is requested from
YouTube until the visitor presses play, so the page stays
fast and sets no third-party cookies on load.
Swap the video by editing data-yt on #introVideo in the HTML.
──────────────────────────────────────────────────────────── */
.video{max-width:940px;margin:44px auto 0}
.vid-frame{position:relative;border-radius:18px;padding:12px;
background:linear-gradient(160deg,rgba(30,42,63,.9),rgba(13,20,36,.96) 60%);
border:1px solid rgba(45,61,88,.85);
box-shadow:0 44px 96px -32px rgba(0,0,0,.85),0 0 80px rgba(34,211,238,.07),
inset 0 1px 0 rgba(255,255,255,.06)}
.vid-bar{display:flex;align-items:center;gap:6px;padding:1px 4px 11px}
.vid-bar i{width:10px;height:10px;border-radius:50%;background:var(--line2);display:block}
.vid-bar i:first-child{background:#f87171}
.vid-bar i:nth-child(2){background:var(--gold)}
.vid-bar i:nth-child(3){background:var(--green)}
.vid-sym{margin-left:10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.vid-stage{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;
background:radial-gradient(ellipse 70% 70% at 50% 45%,rgba(34,211,238,.10),transparent 70%),#060b16;
box-shadow:inset 0 0 0 1px rgba(45,61,88,.55)}
.vid-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* YouTube thumbnail, injected by main.js from data-yt.
Nothing is drawn over it — no scrim, no centred button — so the
artwork reads at full contrast. The transport bar carries the
affordance instead. */
.vid-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
transition:transform .5s cubic-bezier(.22,.7,.3,1),filter .35s}
.video.live .vid-stage:hover .vid-poster{transform:scale(1.02);filter:brightness(1.05)}
/* the whole stage is the click target, and it is invisible */
.vid-hit{position:absolute;inset:0;z-index:2;width:100%;height:100%;
background:none;border:0;padding:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.vid-hit:focus-visible{outline:2px solid var(--cyan);outline-offset:-4px;border-radius:10px}
.vid-hit[disabled]{cursor:default}
/* ── decorative transport bar ──────────────────────────────
Not a real control surface: pointer-events stay off so every
click falls through to .vid-hit and loads the embed. */
.vid-ui{position:absolute;z-index:3;left:0;right:0;bottom:0;pointer-events:none;
display:flex;align-items:center;gap:11px;padding:30px 14px 11px;
background:linear-gradient(transparent,rgba(3,7,15,.32) 40%,rgba(3,7,15,.84));
opacity:0;transition:opacity .3s}
.video.live .vid-ui{opacity:1}
.video.playing .vid-ui{display:none}
/* Once the embed is in, the click-catcher has to get out of the way:
it sits at inset:0 above the iframe, so leaving it there swallows
every scrub and volume click and reloads the video from the start. */
.video.playing .vid-hit{display:none;pointer-events:none}
.vu-btn{flex:none;width:20px;height:20px;display:flex;align-items:center;justify-content:center}
.vu-tri{width:0;height:0;
border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;
filter:drop-shadow(0 1px 3px rgba(0,0,0,.65));transition:border-left-color .25s}
.video.live .vid-stage:hover .vu-tri{border-left-color:var(--cyan)}
.vu-t{flex:none;font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:.02em;
color:rgba(255,255,255,.92);text-shadow:0 1px 4px rgba(0,0,0,.85)}
.vu-track{position:relative;flex:1;min-width:0;height:3px;border-radius:2px;
background:rgba(255,255,255,.3);box-shadow:0 1px 3px rgba(0,0,0,.55)}
.vu-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;background:var(--cyan)}
.vu-dot{position:absolute;left:0;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;
background:var(--cyan);box-shadow:0 0 10px rgba(34,211,238,.75),0 1px 4px rgba(0,0,0,.6);
transition:transform .25s}
.video.live .vid-stage:hover .vu-dot{transform:scale(1.25)}
.vu-ic{flex:none;width:17px;height:17px;color:rgba(255,255,255,.9);
filter:drop-shadow(0 1px 3px rgba(0,0,0,.7))}
.vu-ic svg{width:100%;height:100%;display:block;fill:currentColor}
@media(max-width:620px){
.vid-frame{padding:8px;border-radius:14px}
.vid-ui{gap:8px;padding:24px 10px 9px}
.vu-t{font-size:11px}
.vu-ic{width:15px;height:15px}
.vu-tri{border-left-width:11px;border-top-width:7px;border-bottom-width:7px}
}
@media(prefers-reduced-motion:reduce){
.video.live .vid-stage:hover .vid-poster{transform:none}
}
/* ── LAYER EXPLORER (home: "what it does") ─────────────────
Static chart image. The tabs only swap the caption underneath —
no zoom, no 3D, no motion on the image itself.
──────────────────────────────────────────────────────────── */
.explorer{max-width:980px;margin:40px auto 0}
/* segmented tab control with a sliding pill */
.ex-tabbar{display:flex;justify-content:center;margin-bottom:30px}
.ex-tabs{position:relative;display:inline-flex;gap:2px;padding:5px;border-radius:999px;
background:rgba(9,14,26,.85);border:1px solid var(--line2);
box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 12px 34px rgba(0,0,0,.45)}
.ex-pill{position:absolute;top:5px;bottom:5px;left:0;width:0;border-radius:999px;z-index:0;
background:linear-gradient(135deg,var(--bull),var(--cyan));
box-shadow:0 0 26px rgba(34,211,238,.45),0 2px 10px rgba(0,0,0,.4);
transition:left .45s cubic-bezier(.5,0,.15,1),width .45s cubic-bezier(.5,0,.15,1)}
.ex-tab{position:relative;z-index:1;border:0;background:none;cursor:pointer;
padding:10px 22px;border-radius:999px;color:var(--muted);
font:inherit;font-size:14px;font-weight:700;letter-spacing:.03em;white-space:nowrap;
transition:color .35s}
.ex-tab:hover{color:var(--text)}
.ex-tab.active{color:#04202a}
.ex-tab:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
/* chart frame — flat, no perspective */
.ex-frame{position:relative;border-radius:18px;padding:12px;
background:linear-gradient(160deg,rgba(30,42,63,.9),rgba(13,20,36,.96) 60%);
border:1px solid rgba(45,61,88,.85);
box-shadow:0 44px 96px -32px rgba(0,0,0,.85),0 0 80px rgba(34,211,238,.07),
inset 0 1px 0 rgba(255,255,255,.06)}
.ex-bar{display:flex;align-items:center;gap:6px;padding:1px 4px 11px}
.ex-bar i{width:10px;height:10px;border-radius:50%;background:var(--line2);display:block}
.ex-bar i:first-child{background:#f87171}
.ex-bar i:nth-child(2){background:var(--gold)}
.ex-bar i:nth-child(3){background:var(--green)}
.ex-sym{margin-left:10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.ex-stage{position:relative;border-radius:10px;overflow:hidden;background:#060b16;
box-shadow:inset 0 0 0 1px rgba(45,61,88,.55)}
.ex-stage img{width:100%;height:auto;display:block}
/* caption */
.ex-copy{max-width:680px;margin:26px auto 0;min-height:106px}
.ex-copy h3{font-size:22px;margin-bottom:9px;letter-spacing:-.01em;
background:linear-gradient(90deg,var(--bull),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.ex-copy p{color:var(--muted);font-size:16px;line-height:1.62}
.ex-copy.swap h3,.ex-copy.swap p{animation:exFade .45s cubic-bezier(.22,.7,.3,1) both}
.ex-copy.swap p{animation-delay:.06s}
@keyframes exFade{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@media(max-width:860px){
.ex-tabbar{margin-bottom:22px}
.ex-tabs{width:100%;justify-content:space-between;padding:4px}
.ex-tab{padding:9px 10px;font-size:12.5px;letter-spacing:0}
.ex-frame{padding:8px;border-radius:14px}
.ex-copy{min-height:140px;margin-top:20px}
.ex-copy p{font-size:15px}
}
@media (prefers-reduced-motion: reduce){
.ex-pill{transition:none!important}
.ex-copy.swap h3,.ex-copy.swap p{animation:none!important}
}
/* ── PREVIEW SLIDER (demo page) ────────────────────────── */
.slider{max-width:940px;margin:44px auto 0;position:relative}
.sl-frame{position:relative;border-radius:18px;padding:12px;
background:linear-gradient(160deg,rgba(30,42,63,.9),rgba(13,20,36,.96) 60%);
border:1px solid rgba(45,61,88,.85);
box-shadow:0 44px 96px -34px rgba(0,0,0,.85),0 0 70px rgba(34,211,238,.06),
inset 0 1px 0 rgba(255,255,255,.06)}
.sl-bar{display:flex;align-items:center;gap:6px;padding:1px 4px 11px}
.sl-bar i{width:10px;height:10px;border-radius:50%;background:var(--line2);display:block}
.sl-bar i:first-child{background:#f87171}
.sl-bar i:nth-child(2){background:var(--gold)}
.sl-bar i:nth-child(3){background:var(--green)}
.sl-bar span{margin-left:10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.sl-bar .sl-count{margin-left:auto;font-size:11px;letter-spacing:.14em;color:var(--cyan);font-variant-numeric:tabular-nums;text-transform:none}
.sl-stage.chart{aspect-ratio:1800/877}
.sl-stage.walk{aspect-ratio:1800/919}
/* chapter chips above the how-to-read walkthrough */
.chapters{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.chap{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;
font-size:13.5px;font-weight:600;color:var(--muted);
border:1px solid var(--line2);background:rgba(15,23,42,.55)}
.chap b{font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.chap.bull b{color:var(--bull)}
.chap.bear b{color:var(--bear)}
.chap.cyan b{color:var(--cyan)}
@media(max-width:620px){.chap{padding:7px 12px;font-size:12.5px}} /* clean TradingView exports */
.sl-stage{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#060b16;
box-shadow:inset 0 0 0 1px rgba(45,61,88,.55)}
.sl-track{display:flex;height:100%;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.sl-slide{flex:0 0 100%;height:100%;position:relative}
.sl-slide img{width:100%;height:100%;object-fit:cover;display:block}
.sl-cap{position:absolute;left:0;right:0;bottom:0;padding:70px 26px 20px;text-align:left;
background:linear-gradient(transparent,rgba(4,9,20,.6) 35%,rgba(4,9,20,.95));
font-size:16.5px;line-height:1.45;color:var(--text)}
.sl-cap b{display:block;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin-bottom:4px}
/* headline number on the backtest slides */
.sl-net{display:block;font-weight:800;line-height:1.1;color:var(--bull);
font-size:clamp(26px,3.4vw,40px);letter-spacing:-.01em;font-variant-numeric:tabular-nums;
text-shadow:0 0 30px rgba(0,229,176,.5),0 2px 10px rgba(0,0,0,.6);margin:2px 0 5px}
.sl-meta{display:block;font-size:15.5px;color:var(--muted)}
.sl-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
width:44px;height:44px;border-radius:50%;cursor:pointer;
display:flex;align-items:center;justify-content:center;
border:1px solid var(--line2);background:rgba(9,14,26,.88);color:var(--text);
backdrop-filter:blur(8px);transition:.22s;font-size:0}
.sl-nav:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 22px rgba(34,211,238,.28)}
.sl-nav::before{content:"";width:10px;height:10px;border-top:2px solid currentColor;border-right:2px solid currentColor}
.sl-nav.prev{left:-14px}
.sl-nav.prev::before{transform:rotate(-135deg);margin-left:3px}
.sl-nav.next{right:-14px}
.sl-nav.next::before{transform:rotate(45deg);margin-right:3px}
.sl-dots{display:flex;gap:8px;justify-content:center;margin-top:18px}
.sl-dot{width:9px;height:9px;padding:0;border:0;border-radius:99px;background:var(--line2);cursor:pointer;transition:.28s}
.sl-dot:hover{background:#3c5170}
.sl-dot.on{width:26px;background:linear-gradient(90deg,var(--bull),var(--cyan));box-shadow:0 0 14px rgba(34,211,238,.55)}
/* ── SLIDER: summary slide + perf table ────────────────── */
.sl-summary{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:18px;padding:22px;text-align:center;
background:radial-gradient(ellipse 70% 70% at 50% 45%,rgba(34,211,238,.09),transparent 70%),#080e1b}
.sl-summary h4{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);font-weight:800}
.sl-sum-grid{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;width:100%}
.sl-sum-grid div{flex:1 1 150px;max-width:230px;padding:14px 10px;border-radius:12px;
border:1px solid var(--line2);background:rgba(15,23,42,.7)}
.sl-sum-grid b{display:block;font-size:clamp(17px,2.4vw,26px);font-weight:800;color:var(--bull);
font-variant-numeric:tabular-nums;line-height:1.15}
.sl-sum-grid span{display:block;margin-top:5px;font-size:11.5px;color:var(--muted);letter-spacing:.04em}
.sl-summary p{font-size:11.5px;color:var(--faint);max-width:520px;line-height:1.5}
@media(max-width:620px){
/* the 16:9 stage is short on phones — stack the summary as compact rows */
.sl-summary{gap:8px;padding:12px 44px} /* clears the prev/next arrows */
.sl-summary h4{font-size:9.5px;letter-spacing:.1em}
.sl-sum-grid{flex-direction:column;flex-wrap:nowrap;gap:5px;width:100%}
.sl-sum-grid div{display:flex;align-items:center;justify-content:space-between;gap:10px;
flex:0 0 auto;width:100%;max-width:none;padding:6px 11px;border-radius:8px;text-align:left}
.sl-sum-grid b{font-size:13px;letter-spacing:-.02em;white-space:nowrap}
.sl-sum-grid span{margin-top:0;font-size:10px;white-space:nowrap}
.sl-summary p{display:none} /* full wording is in the callout below the slider */
}
/* ── COMPARISON TABLE ──────────────────────────────────── */
/* the "Profitable" and "Net return" columns read green, header and figures */
.cmp th.pos{color:var(--bull)}
.cmp td.pos{color:var(--bull);font-weight:700;font-variant-numeric:tabular-nums}
.cmp{max-width:1020px;margin:46px auto 0;overflow-x:auto;
border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.cmp table{width:100%;border-collapse:collapse;min-width:680px;font-size:14.5px}
.cmp th,.cmp td{padding:14px 14px;border-bottom:1px solid var(--line);text-align:center}
.cmp th:first-child,.cmp td:first-child{text-align:left;min-width:250px;color:var(--muted)}
.cmp thead th{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
border-bottom:1px solid var(--line2);padding-top:18px;padding-bottom:14px;white-space:nowrap}
.cmp thead th.us{color:#04202a}
.cmp tbody tr:last-child td{border-bottom:none}
.cmp tbody tr:hover td{background:rgba(255,255,255,.015)}
.cmp td.us,.cmp th.us{background:linear-gradient(180deg,rgba(34,211,238,.09),rgba(34,211,238,.03))}
.cmp thead th.us{background:linear-gradient(135deg,var(--bull),var(--cyan));font-weight:800;
border-radius:10px 10px 0 0}
.cmp tbody tr:hover td.us{background:rgba(34,211,238,.13)}
.cmp .yes{color:var(--bull);font-weight:800;font-size:16px}
.cmp .no{color:#4a5a72;font-weight:700;font-size:15px}
.cmp .part{color:var(--gold);font-weight:800;font-size:15px}
.cmp .yr{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.cmp .yr.old{color:var(--faint);font-weight:600}
.cmp-legend{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:18px;
font-size:12.5px;color:var(--faint)}
.cmp-legend span{display:inline-flex;align-items:center;gap:6px}
.cmp-note{max-width:720px;margin:20px auto 0;font-size:13.5px;color:var(--faint);line-height:1.6}
@media(max-width:620px){
.sl-nav.prev{left:2px}
.sl-nav.next{right:2px}
.sl-nav{width:38px;height:38px}
.sl-cap{font-size:13px;padding:30px 13px 10px;line-height:1.35}
.sl-cap b{font-size:10px;letter-spacing:.12em;margin-bottom:1px}
.sl-net{font-size:20px;margin:0 0 2px;text-shadow:0 0 18px rgba(0,229,176,.55),0 2px 8px rgba(0,0,0,.7)}
.sl-meta{font-size:11px;line-height:1.35}
.cmp th,.cmp td{padding:12px 10px;font-size:13.5px}
.cmp th:first-child,.cmp td:first-child{min-width:190px}
}
/* ── GENERIC CARDS ─────────────────────────────────────── */
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:linear-gradient(180deg,rgba(255,255,255,.025),transparent),var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px;text-align:left;transition:.28s;position:relative;display:flex;flex-direction:column}
.card:hover{border-color:var(--line2);transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.4)}
.card.cyan:hover{border-color:rgba(34,211,238,.45);box-shadow:0 18px 44px rgba(0,0,0,.4),0 0 36px rgba(34,211,238,.10)}
.card h3{margin-bottom:8px}
.card p{color:var(--muted);font-size:14.5px}
.card .card-foot{margin-top:auto;padding-top:18px}
.card-ico{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:14px;background:rgba(34,211,238,.10);border:1px solid rgba(34,211,238,.3)}
.card-ico.gold{background:rgba(251,191,36,.10);border-color:rgba(251,191,36,.3)}
.card-ico.orange{background:rgba(249,115,22,.10);border-color:rgba(249,115,22,.3)}
.card-ico.green{background:rgba(0,229,176,.10);border-color:rgba(0,229,176,.3)}
.tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 11px;border-radius:999px;border:1px solid var(--line2);color:var(--muted)}
.tag.live{color:var(--bull);border-color:rgba(0,229,176,.4);background:rgba(0,229,176,.08)}
.tag.soon{color:var(--gold);border-color:rgba(251,191,36,.4);background:rgba(251,191,36,.08)}
.tag.free{color:var(--cyan);border-color:rgba(34,211,238,.4);background:rgba(34,211,238,.08)}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:6px}
/* ── TECHNICAL NOTE: download panel + page reader ─────────
One box, two columns: the panel and the reader share a
border and stretch to the same height (align-items is left
at its "stretch" default — do not set it to start). */
.paper{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
grid-template-areas:"side view";
text-align:left;margin:44px auto 0;max-width:1060px;
background:linear-gradient(180deg,rgba(255,255,255,.02),transparent),var(--panel);
border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
/* left column */
.paper-side{grid-area:side;border-right:1px solid var(--line);padding:28px 26px;
display:flex;flex-direction:column;gap:22px}
/* head + download sit as one centred cluster; the note stays pinned
to the bottom, so the column reads as deliberate rather than short */
.ps-main{flex:1;display:flex;flex-direction:column;justify-content:center}
.paper-side h3{font-size:20px;line-height:1.28;margin-bottom:6px}
.paper-sub{color:var(--muted);font-size:14px;line-height:1.5}
.paper-ref{color:var(--faint);font-size:12.5px;margin-top:10px;letter-spacing:.02em}
/* download bar — spans both columns, directly under the document */
.paper-dlbar{grid-area:dl;border-top:1px solid var(--line);background:rgba(7,11,20,.45);
padding:22px 26px;display:flex;flex-direction:column;align-items:center;gap:10px}
.paper-dl{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
padding:13px 16px;font-size:14px;white-space:nowrap}
.paper-dl .dl-ico{font-size:16px;line-height:1;font-weight:800}
.paper-size{text-align:center;font-size:12px;line-height:1.6;color:var(--faint);margin:10px 0 0}
.paper-note{padding-top:18px;border-top:1px solid var(--line);
font-size:12px;line-height:1.55;color:var(--faint)}
/* right column — the reader */
.paper-view{grid-area:view;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.pv-bar{display:flex;align-items:center;gap:12px;padding:11px 16px;background:rgba(7,11,20,.55);
border-bottom:1px solid var(--line);font-size:12.5px;color:var(--faint)}
.pv-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-count{margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap}
.pv-count b{color:var(--text);font-weight:700}
.pv-stage{position:relative;background:#0a0f1c;padding:16px;display:flex;justify-content:center;
align-items:flex-start;flex:1}
.pv-page{width:100%;max-width:450px;height:auto;border-radius:5px;background:#fff;
box-shadow:0 16px 40px rgba(0,0,0,.55);transition:opacity .18s}
.pv-stage.loading .pv-page{opacity:.35}
.pv-nav{position:absolute;top:0;bottom:0;width:22%;border:0;background:transparent;cursor:pointer;
font-size:0;color:transparent;z-index:2;transition:background .25s}
.pv-nav.prev{left:0}
.pv-nav.next{right:0}
.pv-nav:hover{background:linear-gradient(90deg,rgba(34,211,238,.10),transparent)}
.pv-nav.next:hover{background:linear-gradient(270deg,rgba(34,211,238,.10),transparent)}
.pv-nav:focus-visible{outline:2px solid var(--cyan);outline-offset:-3px}
.pv-nav:disabled{cursor:default;background:none}
.pv-foot{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line);
background:rgba(7,11,20,.4);flex:0 0 auto}
.pv-btn{flex:0 0 auto;padding:8px 14px;border-radius:9px;border:1px solid var(--line2);
background:rgba(15,23,42,.6);color:var(--text);font-size:12.5px;font-weight:700;cursor:pointer;
transition:.22s;font-family:inherit}
.pv-btn:hover:not(:disabled){border-color:var(--cyan);color:var(--cyan)}
.pv-btn:disabled{opacity:.35;cursor:default}
.pv-dots{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;flex:1}
.pv-dot{width:9px;height:9px;padding:0;border-radius:50%;border:1px solid var(--line2);
background:transparent;cursor:pointer;transition:.22s}
.pv-dot:hover{border-color:var(--cyan)}
.pv-dot.on{background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 10px rgba(34,211,238,.6)}
@media(max-width:900px){
.paper{grid-template-columns:1fr;grid-template-areas:"view" "side";margin-top:34px}
.paper-side{border-right:0;border-top:1px solid var(--line);gap:22px}
.pv-page{max-width:430px}
}
@media(max-width:620px){
.paper-side{padding:21px}
.paper-dlbar{padding:18px}
.paper-dl{width:100%;padding-left:16px;padding-right:16px;font-size:13.5px}
.pv-stage{padding:12px}
.pv-page{max-width:100%}
.pv-btn{padding:8px 11px;font-size:12px}
.pv-dots{gap:6px}
.pv-toc ol{font-size:13px}
}
/* ── TWO-STEP VISUAL EXPLAINER (preview → PRISM Cycle) ── */
.how2{max-width:1000px;margin:40px auto 0;text-align:left}
.how2-step{margin:0;background:linear-gradient(180deg,rgba(255,255,255,.025),transparent),var(--panel);
border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.28s}
.how2-step:hover{border-color:rgba(34,211,238,.42);
box-shadow:0 20px 48px rgba(0,0,0,.45),0 0 40px rgba(34,211,238,.07)}
.how2-head{display:flex;gap:16px;align-items:flex-start;padding:24px 26px 20px}
.how2-head h3{font-size:19px;line-height:1.3;margin-bottom:7px}
.how2-head p{color:var(--muted);font-size:14.5px;margin:0}
.how2-head p b.up{color:var(--bull)}
.how2-head p b.dn{color:var(--bear)}
.how2-n{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;
justify-content:center;font-weight:800;font-size:15px;font-variant-numeric:tabular-nums;
color:var(--gold);background:rgba(251,191,36,.10);border:1px solid rgba(251,191,36,.35)}
.how2-n.cyan{color:var(--cyan);background:rgba(34,211,238,.10);border-color:rgba(34,211,238,.35)}
.how2-shot{position:relative;border-top:1px solid var(--line);background:var(--bg2);
aspect-ratio:1800/877;overflow:hidden}
.how2-shot img{width:100%;height:100%;object-fit:cover;display:block}
.how2-link{display:flex;align-items:center;gap:14px;padding:0 40px;margin:0 auto;max-width:340px;
height:46px;color:var(--faint)}
.how2-link span{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line2),transparent)}
.how2-link i{font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.how2-swipe{display:none;font-size:11.5px;color:var(--faint);letter-spacing:.06em;
padding:9px 17px 12px;border-top:1px solid var(--line)}
@media(max-width:620px){
.how2{margin-top:30px}
.how2-head{padding:18px 17px 15px;gap:12px}
.how2-head h3{font-size:16.5px}
.how2-head p{font-size:13.5px}
.how2-n{width:28px;height:28px;font-size:13.5px;border-radius:9px}
/* the chart is too wide to be legible squeezed into a phone —
let it keep its height and scroll sideways instead */
.how2-shot{aspect-ratio:auto;height:250px;overflow-x:auto;overflow-y:hidden;
-webkit-overflow-scrolling:touch;scrollbar-width:none}
.how2-shot::-webkit-scrollbar{display:none}
.how2-shot img{width:auto;max-width:none;height:250px;object-fit:contain}
.how2-swipe{display:block}
}
/* ── INDICATOR LIST (free indicators page) ─────────────── */
.ind-list{display:grid;gap:20px;margin-top:46px;text-align:left}
.ind-card{display:grid;grid-template-columns:minmax(0,430px) 1fr;
background:linear-gradient(180deg,rgba(255,255,255,.025),transparent),var(--panel);
border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.28s}
.ind-card:hover{border-color:rgba(34,211,238,.42);transform:translateY(-4px);
box-shadow:0 20px 48px rgba(0,0,0,.45),0 0 40px rgba(34,211,238,.07)}
.ind-thumb{position:relative;background:var(--bg2);min-height:210px;overflow:hidden;border-right:1px solid var(--line)}
.ind-thumb img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s cubic-bezier(.22,.7,.3,1)}
.ind-card:hover .ind-thumb img{transform:scale(1.04)}
.ind-thumb::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(90deg,transparent 60%,rgba(15,23,42,.45))}
/* thumb used before a real screenshot exists */
.ind-thumb.empty{display:flex;align-items:center;justify-content:center;gap:12px;
background:radial-gradient(ellipse 85% 75% at 50% 45%,rgba(34,211,238,.16),transparent 70%),var(--bg2)}
.ind-thumb.empty::after{display:none}
.ind-thumb.empty .gem{width:26px;height:26px;background:linear-gradient(135deg,var(--bull),var(--cyan));
transform:rotate(45deg);border-radius:3px;box-shadow:0 0 22px rgba(34,211,238,.75)}
.ind-thumb.empty span{font-weight:800;letter-spacing:.18em;font-size:15px;color:var(--text)}
.ind-body{padding:26px 28px;display:flex;flex-direction:column;min-width:0}
.ind-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:4px}
.ind-body h3{font-size:20px;line-height:1.25}
.ind-meta{font-size:12.5px;color:var(--faint);margin-bottom:12px;letter-spacing:.02em}
.ind-body p{color:var(--muted);font-size:14.5px;margin:0}
.ind-actions{margin-top:auto;padding-top:22px;display:flex;gap:12px;flex-wrap:wrap}
.ind-actions .btn{padding:11px 22px;font-size:13.5px}
@media(max-width:820px){
.ind-card{grid-template-columns:1fr}
.ind-thumb{border-right:none;border-bottom:1px solid var(--line);min-height:0;aspect-ratio:16/8}
.ind-thumb::after{background:none}
.ind-body{padding:22px}
.ind-actions .btn{width:100%}
}
/* ── PLACEHOLDER BLOCK (fill in later) ─────────────────── */
.placeholder{border:1px dashed var(--line2);border-radius:14px;padding:20px 22px;background:rgba(15,23,42,.5);color:var(--faint);font-size:14px}
.placeholder b{color:var(--muted);display:block;margin-bottom:4px;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
/* ── STEPS ─────────────────────────────────────────────── */
.steps{margin:18px 0 6px;display:grid;gap:14px;text-align:left}
.step{display:flex;gap:14px;align-items:flex-start}
.step .n{flex:0 0 26px;height:26px;border-radius:50%;background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.4);color:var(--cyan);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center}
.step p{font-size:14.5px;color:var(--muted)}
.step p b{color:var(--text)}
/* ── PRICING ───────────────────────────────────────────── */
#pricing{background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(34,211,238,.08),transparent 60%)}
/* five plan cards abreast need considerably more room than the site column */
#pricing .wrap{max-width:1400px}
/* Flex with an explicit flex-basis rather than grid, because the basis is a
calc of the row width: it pins the count per row exactly (5 → 3 → 2 → 1)
AND, unlike grid, leaves a short final row centred instead of stuck to
the left edge. */
.plans{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:48px}
/* flex column so the CTA and the feature list line up across cards even
though the summary lines wrap to different heights */
.plan{position:relative;flex:0 1 calc((100% - 2 * 14px) / 3);
background:linear-gradient(180deg,rgba(255,255,255,.022),transparent 42%),var(--panel);
border:1px solid var(--line);border-radius:20px;padding:26px 22px 22px;
text-align:left;transition:.28s;cursor:pointer;
display:flex;flex-direction:column}
.plan:hover{transform:translateY(-5px);border-color:var(--line2);box-shadow:0 18px 44px rgba(0,0,0,.4)}
.plan.popular{border-color:var(--cyan);background:linear-gradient(180deg,rgba(34,211,238,.09),var(--panel));box-shadow:0 0 44px rgba(34,211,238,.14)}
.plan.selected{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 38px rgba(251,191,36,.2)}
.badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--bull),var(--cyan));color:#04202a;font-size:10.5px;font-weight:800;letter-spacing:.07em;padding:3px 11px;border-radius:999px;text-transform:uppercase;white-space:nowrap}
.badge.gold{background:linear-gradient(135deg,var(--gold),#f59e0b);color:#3b2a00}
/* name row + the discount pill */
.plan-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.plan-name{font-size:20px;font-weight:700;letter-spacing:-.012em;color:var(--text);margin:0;white-space:nowrap}
/* the discount pill reads white on every card so the number is the
clearest thing in the header row; the Best Value card takes the same
gold as its badge, so the two agree instead of competing */
.off{flex:none;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
white-space:nowrap;color:#fff;border:1px solid rgba(255,255,255,.28);
background:rgba(255,255,255,.06);border-radius:999px;padding:4px 9px}
.plan.popular .off{color:var(--cyan);border-color:rgba(34,211,238,.55);
background:rgba(34,211,238,.1)}
.plan.value .off{color:var(--gold);border-color:rgba(251,191,36,.55);
background:rgba(251,191,36,.1)}
/* min-heights hold the two-line worst case so every card's price, button and
rule sit on the same baseline across the row */
.plan-sub{font-size:13px;color:var(--muted);margin:8px 0 0;line-height:1.45;min-height:38px}
/* struck full-price total for the same period — 0.005 BTC × months — so the
pill above it is arithmetic rather than a claim */
.plan-was{font-size:13.5px;color:var(--faint);margin:18px 0 0;min-height:20px}
.plan-was s{text-decoration-thickness:1px}
.plan-price{font-size:31px;font-weight:800;letter-spacing:-.022em;color:#fff;
margin:2px 0 0;line-height:1.12;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.plan-price .unit{font-size:14px;font-weight:700;color:var(--cyan);letter-spacing:0}
.plan-price .per{font-size:12.5px;font-weight:500;color:var(--faint);letter-spacing:0}
.plan-terms{font-size:11.5px;line-height:1.45;color:var(--faint);margin:10px 0 0;min-height:33px}
.plan-terms b{color:var(--text);font-weight:700}
/* the saving, in the accent — the one green line on an otherwise grey block */
.plan-save{font-size:11.5px;line-height:1.45;color:var(--bull);margin:5px 0 0;min-height:17px;font-weight:600}
.plan-save b{color:var(--bull);font-weight:800}
.plan .cta{margin-top:16px;align-self:stretch;padding:11px 8px;text-align:center;
border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--text);
font-family:inherit;font-weight:700;font-size:13.5px;cursor:pointer;transition:.22s}
.plan:hover .cta,.plan.selected .cta{background:var(--cyan);border-color:var(--cyan);color:#04202a}
.plan.selected .cta{background:var(--gold);border-color:var(--gold);color:#3b2a00}
.plan-rule{border:0;border-top:1px solid var(--line);margin:22px 0 16px}
.plan-inc{font-size:12.5px;color:var(--muted);margin:0 0 12px}
.plan-feat{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.plan-feat li{position:relative;padding-left:24px;font-size:13px;line-height:1.42;color:var(--muted)}
/* the tick is drawn, not a glyph — no font can substitute a different one */
.plan-feat li::before{content:"";position:absolute;left:2px;top:3px;width:10px;height:6px;
border-left:1.6px solid var(--bull);border-bottom:1.6px solid var(--bull);
transform:rotate(-45deg)}
/* ENTERPRISE — the same shell and the same five columns, but a directory
rather than a sales pitch: no feature lists, so the row stays shallow */
.ent-head{margin-top:78px;font-size:15px;color:var(--muted)}
.ent-head b{color:var(--orange)}
/* same box as the card track above: the arrows and the track padding
are subtracted here too, so the three columns line up top to bottom */
.pdots{display:flex;justify-content:center;gap:8px;margin-top:24px}
.pdots i{width:7px;height:7px;border-radius:50%;background:var(--line2);transition:.3s}
.pdots i.on{background:var(--cyan);width:22px;border-radius:999px}
.plans.ent{margin:26px auto 0;box-sizing:border-box;
width:min(var(--tmax), 100%);
padding-inline:10px;gap:var(--pgap)}
.plans.ent .plan{flex-basis:calc((100% - 2 * var(--pgap)) / 3)}
.plan.ent{cursor:default;padding:22px 20px 18px;border-radius:18px;
border-color:rgba(249,115,22,.4);background:linear-gradient(180deg,rgba(249,115,22,.08),var(--panel))}
.plan.ent:hover{border-color:var(--orange);transform:translateY(-5px);box-shadow:0 18px 44px rgba(249,115,22,.12)}
.plan.ent .plan-name{font-size:17px;color:var(--orange)}
.plan.ent .plan-price{font-size:26px;margin-top:12px}
.plan.ent .plan-price .unit{color:var(--orange);font-size:13px}
.plan.ent .plan-price .per{font-size:12px}
.plan.ent .plan-terms{min-height:30px}
.plan.ent .cta{margin-top:auto;padding:10px 6px;font-size:12.5px;
border-color:rgba(249,115,22,.5);color:#fdba74;display:block}
.plan.ent:hover .cta{background:var(--orange);border-color:var(--orange);color:#fff}
.badge.orange{background:linear-gradient(135deg,var(--orange),#fb923c);color:#fff}
/* ── CHECKOUT ──────────────────────────────────────────── */
.checkout{margin:34px auto 0;max-width:640px;background:var(--panel2);border:1px solid var(--line2);border-radius:var(--radius);padding:30px;display:none;text-align:left}
.checkout.open{display:block;animation:fadeUp .35s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.checkout h3{font-size:18px;margin-bottom:4px}
.checkout .sel{color:var(--gold);font-weight:800}
.addr{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap}
.addr code{flex:1;min-width:220px;background:var(--bg);border:1px solid var(--line2);border-radius:9px;padding:11px 14px;font-size:13px;color:var(--gold);overflow-wrap:anywhere}
.copy{padding:0 18px;border-radius:9px;border:1px solid var(--line2);background:transparent;color:var(--text);font-weight:700;cursor:pointer;font-size:13px}
.copy:hover{border-color:var(--gold);color:var(--gold)}
.checkout .warn{margin-top:16px;font-size:12.5px;color:var(--faint)}
/* ── ROADMAP / TIMELINE ────────────────────────────────── */
#roadmap{background:radial-gradient(ellipse 70% 55% at 50% 100%,rgba(249,115,22,.05),transparent 60%),var(--bg2)}
/* ── TIMELINE (horizontal rail, centred under each node) ──
The rail is drawn on .timeline::before and sits at the same
height as the nodes; each item reserves that height with
padding-top so the dot lands exactly on the line. */
.timeline{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
gap:18px;max-width:1080px;margin:60px auto 0;position:relative;text-align:center}
.timeline::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;
background:linear-gradient(90deg,var(--bull),var(--cyan));
box-shadow:0 0 16px rgba(34,211,238,.35)}
.tl-item{position:relative;padding:34px 8px 0;min-width:0}
.tl-item .node{position:absolute;left:50%;top:2px;transform:translateX(-50%);
width:16px;height:16px;border-radius:50%;background:var(--bull);
border:2px solid var(--bull);box-shadow:0 0 14px rgba(0,229,176,.7)}
.tl-item.future .node{background:var(--bg);border-color:var(--faint);
box-shadow:none;animation:pulse 2.4s infinite}
.tl-item .yr{font-size:15px;font-weight:600;letter-spacing:.02em;color:var(--bull);
font-variant-numeric:tabular-nums;text-transform:none}
.tl-item.future .yr{color:var(--faint)}
.tl-item h3{font-size:16.5px;line-height:1.3;margin:4px 0 8px}
.tl-item p{font-size:14px;color:var(--muted);line-height:1.5}
@media(max-width:900px){
/* back to a vertical rail — six columns will not fit a phone */
.timeline{grid-auto-flow:row;grid-auto-columns:auto;gap:0;
max-width:560px;margin-top:46px;text-align:left}
.timeline::before{left:11px;right:auto;top:6px;bottom:6px;width:2px;height:auto;
background:linear-gradient(180deg,var(--bull),var(--cyan))}
.tl-item{padding:0 0 32px 44px}
.tl-item:last-child{padding-bottom:0}
.tl-item .node{left:4px;top:5px;transform:none;width:16px;height:16px}
.tl-item h3{margin:2px 0 4px}
}
/* ── FAQ ───────────────────────────────────────────────── */
.faq{max-width:760px;margin:44px auto 0}
details{background:linear-gradient(180deg,rgba(255,255,255,.02),transparent),var(--panel);border:1px solid var(--line);border-radius:13px;margin-bottom:12px;overflow:hidden;transition:.25s}
details:hover{border-color:var(--line2)}
details[open]{border-color:rgba(34,211,238,.35)}
summary{padding:18px 22px;cursor:pointer;font-weight:700;font-size:15px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--cyan);font-size:20px;font-weight:400;transition:.2s;flex:0 0 auto}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 22px 18px;font-size:14.5px;color:var(--muted)}
/* ── LEGAL / PROSE PAGES ───────────────────────────────── */
.prose{max-width:820px;margin:0 auto;text-align:left}
.prose h2{font-size:clamp(21px,2.6vw,27px);margin:44px 0 12px;padding-top:8px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:17px;margin:26px 0 8px;color:var(--text)}
.prose p{color:var(--muted);font-size:15px;margin-bottom:14px}
.prose ul,.prose ol{color:var(--muted);font-size:15px;margin:0 0 16px 20px}
.prose li{margin-bottom:9px}
.prose strong{color:var(--text)}
.prose hr{border:none;border-top:1px solid var(--line);margin:34px 0}
.callout{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:12px;padding:20px 24px;margin:0 0 26px;font-size:14.5px;color:var(--muted)}
.callout.red{border-left-color:var(--bear)}
.callout.cyan{border-left-color:var(--cyan)}
.callout b{color:var(--text)}
.updated{font-size:13px;color:var(--faint);margin-bottom:28px}
/* info table (company page) */
.info-table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:14.5px}
.info-table th,.info-table td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.info-table th{color:var(--muted);font-weight:600;width:230px;white-space:nowrap}
.info-table td{color:var(--text)}
.info-table td .tbd{color:var(--faint);font-style:italic}
.info-table tr:last-child th,.info-table tr:last-child td{border-bottom:none}
/* ── FORMS ─────────────────────────────────────────────── */
.form{background:linear-gradient(180deg,rgba(255,255,255,.02),transparent),var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:30px;text-align:left}
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;background:var(--bg);border:1px solid var(--line2);border-radius:10px;padding:12px 14px;color:var(--text);font-size:15px;font-family:inherit;transition:.2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(34,211,238,.12)}
.field textarea{min-height:150px;resize:vertical}
.field .hint{font-size:12.5px;color:var(--faint);margin-top:6px}
.form .btn{width:100%}
/* ── DISCLAIMER ────────────────────────────────────────── */
.disc{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:12px;padding:22px 26px;max-width:860px;margin:0 auto;font-size:13.5px;color:var(--muted)}
/* ── FOOTER ────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);background:linear-gradient(180deg,transparent,rgba(34,211,238,.03));padding:56px 0 34px;font-size:14px;color:var(--muted)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;text-align:left}
.foot-brand .logo img{height:40px}
.foot-brand .logo{margin-bottom:12px}
.foot-brand p{font-size:13.5px;color:var(--faint);max-width:300px}
.foot-col h4{font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--text);margin-bottom:14px}
.foot-col ul{list-style:none}
.foot-col li{margin-bottom:9px}
.foot-col a{color:var(--muted);font-size:14px;transition:.2s}
.foot-col a:hover{color:var(--cyan)}
/* ── FOOTER SOCIALS ────────────────────────────────────────
Inline SVG marks, so no extra request and they take the
surrounding colour. Each one warms to its own brand colour on
hover, which is the only place brand colour appears. */
.foot-social{display:flex;gap:10px;margin-top:18px}
.foot-social a{display:grid;place-items:center;width:38px;height:38px;flex:none;
border-radius:11px;color:var(--muted);border:1px solid var(--line);
background:var(--panel);transition:color .2s,border-color .2s,background .2s}
.foot-social a:hover{background:#111a2b}
.foot-social a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.foot-social svg{width:17px;height:17px;display:block;fill:currentColor}
.foot-social .fs-yt:hover{color:#ff3d3d;border-color:rgba(255,61,61,.5)}
.foot-social .fs-tg:hover{color:#29a9eb;border-color:rgba(41,169,235,.5)}
.foot-social .fs-x:hover{color:#fff;border-color:var(--faint)}
.foot-risk{margin-top:44px;background:rgba(15,23,42,.6);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:12px;padding:22px 26px;font-size:13px;color:var(--faint);line-height:1.65;text-align:left}
.foot-risk b{color:var(--muted);display:block;margin-bottom:7px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase}
.foot-risk a{color:var(--gold)}
.foot-bottom{margin-top:30px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--faint)}
.foot-bottom .fb-note{text-align:right;max-width:560px;font-size:12.5px;line-height:1.5}
.foot-bottom a{color:var(--faint)}
.foot-bottom a:hover{color:var(--cyan)}
/* ── RESPONSIVE ────────────────────────────────────────── */
/* the plan row steps 5 → 3 → 2 → 1; the basis is recomputed at each step so
the count is exact and any short final row stays centred */
@media(max-width:960px){
.plan{flex-basis:calc((100% - 14px) / 2)}
.calc-points{grid-template-columns:1fr}
.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
.foot-grid{grid-template-columns:1fr 1fr;gap:32px}
.foot-brand{grid-column:span 2}
}
@media(max-width:860px){
.nav-toggle{display:flex}
.nav-links{position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
background:rgba(7,11,20,.98);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
border-bottom:1px solid var(--line);padding:10px 24px 22px;
max-height:0;overflow:hidden;opacity:0;pointer-events:none;transition:max-height .35s ease,opacity .25s ease,padding .35s ease}
.nav-links.open{max-height:420px;opacity:1;pointer-events:auto}
.nav-links a{padding:14px 2px;border-bottom:1px solid rgba(30,41,59,.7);font-size:15.5px}
.nav-links a:not(.btn)::after{display:none}
.nav-links a.active{color:var(--cyan)}
.nav-links .btn{margin-top:16px;border-bottom:none;padding:14px 24px}
}
@media(max-width:620px){
.nav-right{gap:10px}
.lang-select{max-width:132px;font-size:13px;padding-right:28px}
section{padding:70px 0}
.statement{padding:88px 0}
.page-hero{padding:126px 0 56px}
.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
.info-table th{width:auto}
.info-table,.info-table tbody,.info-table tr,.info-table th,.info-table td{display:block}
.info-table th{border-bottom:none;padding-bottom:2px}
.info-table td{padding-top:2px;padding-bottom:16px}
.foot-grid{grid-template-columns:1fr}
.foot-brand{grid-column:span 1}
.foot-bottom{flex-direction:column;align-items:flex-start}
.foot-bottom .fb-note{text-align:left}
}
@media(max-width:560px){
.logo img{height:28px}
}
@media(max-width:520px){
.plan{flex-basis:100%}
}
/* ── SPONSOR GATE ──────────────────────────────────────────
An interstitial on the way out to TradingView: labelled ad,
short countdown, then two genuine choices. The underlying
keeps its real href, so with JS off the button simply
goes straight to TradingView.
The creative is a dense square with readable fine print, so
it is sized to the viewport rather than to a fixed column:
on a wide screen the controls move beside it, which frees
the whole window height for the picture. */
.sgate[hidden]{display:none}
.sgate{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:12px}
.sgate-veil{position:absolute;inset:0;background:rgba(2,5,12,.86);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sgate-box{position:relative;width:min(100%,520px);
max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow:auto;
background:var(--panel);border:1px solid var(--line2);border-radius:20px;
padding:12px 12px 16px;box-shadow:0 50px 120px -40px rgba(0,0,0,.95);
animation:sgateIn .32s cubic-bezier(.22,.7,.3,1)}
@keyframes sgateIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.sgate-top{display:flex;align-items:center;justify-content:space-between;
margin:0 4px 10px;flex:0 0 100%}
.sgate-tag{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
color:var(--faint);border:1px solid var(--line2);border-radius:999px;padding:4px 11px}
.sgate-x{background:none;border:0;color:var(--faint);font-size:28px;line-height:1;
cursor:pointer;padding:0 6px;transition:color .2s}
.sgate-x:hover{color:var(--text)}
.sgate-shot{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line);
background:#000}
.sgate-shot img{width:100%;height:auto;display:block}
.sgate-h{font-size:17px;margin:16px 0 12px;color:var(--text)}
.sgate-actions{display:grid;gap:10px}
.sgate-actions .btn{width:100%}
.sgate-actions .btn-cyan{color:#06303d;font-weight:800}
/* the second button is inert until the countdown finishes */
.sgate-go{pointer-events:none;opacity:.5}
.sgate-go .sgate-ready{display:none}
.sgate.ready .sgate-go{pointer-events:auto;opacity:1}
.sgate.ready .sgate-go .sgate-wait{display:none}
.sgate.ready .sgate-go .sgate-ready{display:inline}
.sgate-note{margin:14px 0 0;font-size:11.5px;line-height:1.5;color:var(--faint)}
.sgate-note a{color:var(--muted);text-decoration:underline}
/* ── wide + landscape: controls beside the creative ──────────
The image is then bounded by window height, not column
width, so it lands around 700–900px on a normal monitor and
the offer tables are actually legible. */
@media(min-width:900px) and (min-height:620px){
.sgate{padding:18px}
.sgate-box{width:auto;max-width:calc(100vw - 36px);overflow:visible;
display:grid;grid-template-columns:auto minmax(250px,310px);
column-gap:22px;align-items:center;padding:14px 20px 20px}
/* the label bar spans both tracks — without this it takes the first
grid cell and shunts the creative into the control column */
.sgate-top{grid-column:1/-1;margin-bottom:8px}
/* the creative is square, so driving it by WIDTH gives the same result as
height without the cyclic max-width:100% inside an auto grid track —
which is what collapsed it to min-content. The 60vw cap stops it
crowding the controls out on a short, wide window. */
.sgate-shot{width:min(calc(100dvh - 140px),1100px,60vw)}
.sgate-shot img{width:100%;height:auto;max-width:none}
.sgate-h{margin-top:0;font-size:19px}
}
/* ── phone: edge to edge, every pixel the screen will give ── */
/* ── phone: a full-bleed sheet, so the creative gets the whole
screen width instead of the width minus two paddings ──── */
@media(max-width:560px){
.sgate{padding:0}
.sgate-box{width:100%;max-width:none;border-radius:0;border:0;
max-height:100vh;max-height:100dvh;padding:10px 0 18px}
.sgate-top{margin:0 14px 8px}
.sgate-shot{border-radius:0;border-left:0;border-right:0}
.sgate-h,.sgate-actions,.sgate-note{margin-left:14px;margin-right:14px}
.sgate-h{margin-top:18px}
}
@media(prefers-reduced-motion:reduce){.sgate-box{animation:none}}
/* ── large displays ──────────────────────────────────────────
The shared column widens with the story above it, so the
product sections do not read as a narrow strip on a big
monitor. Pricing gets its own, wider step. */
@media(min-width:1600px){
.wrap{max-width:1340px}
#pricing .wrap{max-width:1600px}
/* the legal pages cap their own measure at .prose, so they only need a
modest nudge — a 1340px line length would be unreadable */
.prose{max-width:900px}
.prose p,.prose li{font-size:16px}
.plan-name{font-size:23px}
.plan-sub{font-size:14px;min-height:41px}
.plan-price{font-size:38px}
.plan-feat li{font-size:14px}
.plan .cta{font-size:14.5px;padding:12px 8px}
}
@media(min-width:2000px){
.wrap{max-width:1500px}
#pricing .wrap{max-width:1800px}
.plan{padding:30px 26px 26px}
.plan-name{font-size:25px}
.plan-price{font-size:42px}
.plan-feat li{font-size:15px}
}
/* ══ VIDEO TUTORIALS ═══════════════════════════════════════
Two columns: a collapsible module list on the left, one
player on the right. The list is plain elements so
it works with JavaScript off, and adding a lesson is a single