/*
 * FXpips — Phase I components, Dark Edition.
 * Loaded after theme.css + theme-dark.css. Every colour comes from the tokens below, which follow the
 * dark theme's palette: near-black shell, neon cyan buttons, green accents, maroon for sells and losses.
 */

:root{
  --p-panel:linear-gradient(135deg,#071520,#050d14);
  --p-card:linear-gradient(135deg,#0b2030,#0a2333);
  --p-feature:linear-gradient(125deg,#0b2d24,#0a1f2d);
  --p-surface-2:#081722;
  --p-surface-3:#0f212c;
  --p-well:#0f2b28;
  --p-border:#1b3444;
  --p-border-2:#24475a;
  --p-border-hot:#3fcf97;
  --p-text:#b6c5cc;
  --p-text-2:#9aaeb8;
  --p-soft:#7c909a;
  --p-strong:#eef5f2;
  --p-green:#4aeb9f;
  --p-green-2:#72e7b7;
  --p-green-bg:#0b3a30;
  --p-green-line:#286c50;
  --p-red:#eb8d92;
  --p-red-bg:#2c1620;
  --p-red-line:#6d3040;
  --p-on-accent:#032737;
  --p-input:#091f25;
  --p-input-line:#2a4b4b;
}

/* ------------------------------------------------------------------ base */
/* The theme gives .form-field etc. a display value, which would otherwise override the hidden attribute. */
[hidden]{display:none!important}

/* ------------------------------------------------------------------ full-bleed page
   No floating card and no ambient backdrop: the dark shell is the page itself,
   with the content column capped so lines and grids stay readable on wide screens. */
.ambient-background{display:none}
/* The glow lives on the page itself, so there is no seam beside the content column. */
body{background:radial-gradient(ellipse at 78% 8%,#003b3030,transparent 45%),radial-gradient(ellipse at 8% 58%,#00263722,transparent 48%),#03090e;background-attachment:fixed;display:flex;flex-direction:column;min-height:100vh}
.site-shell{width:100%;max-width:none;margin:0;flex:1 0 auto;min-height:0;border-radius:0;box-shadow:none;background:transparent}
@media(min-width:1450px){.site-shell{margin:0 auto}}
.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
code{font:11px/1.4 Consolas,"SFMono-Regular",Menlo,monospace;background:var(--p-surface-3);border-radius:4px;padding:1px 4px;color:#9fe7c7}
main{padding-bottom:8px}
.text-link{background:none;padding:0;color:var(--teal-dark);text-decoration:underline;text-underline-offset:2px;font-size:inherit}
.text-link:hover{color:#a0ffd2}
.optional{font-weight:400;color:var(--p-soft);font-size:10.5px;margin-left:3px}
.meta{font-size:10.5px;color:var(--muted)}
.pos{color:#5fdfa6}.neg{color:#e97b83}
.eyebrow{color:#7fb8a6}
.hero-visual picture{display:contents}
.modal-primary,.modal-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.modal-primary .ic,.modal-secondary .ic{width:16px;height:16px}
.modal-primary:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn-row .modal-primary,.btn-row .modal-secondary{margin-top:0}
.button-block{width:100%}
.button.is-disabled{opacity:.45;cursor:not-allowed}
.button.is-disabled:hover{transform:none}
.app-dialog-wide{width:min(880px,calc(100% - 32px))}

/* ------------------------------------------------------------------ sample data + setup hints */
.sample-chip{display:inline-flex;align-items:center;height:17px;padding:0 7px;border-radius:9px;border:1px dashed #6f5a8c;color:#c6b2e8;background:#14111f;font:500 8.5px/1 var(--font);letter-spacing:.6px;text-transform:uppercase;white-space:nowrap;flex-shrink:0;vertical-align:middle}
h2 .sample-chip,h3 .sample-chip{margin-left:8px;vertical-align:3px}
.dev-hint{margin:10px 0 0;padding:7px 10px;border-radius:8px;border:1px dashed #4b3d66;background:#110f1d;color:#b3a3d2;font-size:10.5px;line-height:1.55;text-align:left}
.dev-hint b{font-weight:600;margin-right:5px;text-transform:uppercase;font-size:8.5px;letter-spacing:.9px}
.dev-hint code{background:#1e1932;color:#d6c8f0}
html:not([data-sample="true"]) .sample-chip,html:not([data-sample="true"]) .dev-hint{display:none}

/* ------------------------------------------------------------------ sections + panels */
.section{margin-top:46px;scroll-margin-top:24px;min-width:0}
.section-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:14px}
.section-intro .eyebrow{margin-bottom:9px}
.section-intro h2{font:600 19px "Arial Narrow",Arial,sans-serif;letter-spacing:-.55px;text-transform:uppercase;color:#f0f3f5}
.section-intro p{font-size:12.5px;line-height:1.7;color:var(--p-text-2);max-width:640px;margin-top:5px}
.link-more{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;white-space:nowrap;padding:5px 0;color:#60dca8;background:none}
.link-more .ic{width:14px;height:14px}
.link-more:hover{color:#a0ffd2}
.panel{border-radius:15px;border:1px solid var(--p-border);background:var(--p-panel);padding:20px;min-width:0;box-shadow:inset 0 0 30px #00aeff05}
.panel-soft{border-radius:13px;border:1px solid #285570;background:var(--p-card);box-shadow:0 3px 12px #0004,inset 0 0 28px #00aeff08;min-width:0}
.panel-muted{background:var(--p-surface-2);border:1px solid var(--p-border);border-radius:13px;padding:16px;min-width:0}
.panel-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.panel-title h3{font:600 15px "Arial Narrow",Arial,sans-serif;text-transform:uppercase;letter-spacing:-.3px;display:flex;align-items:center;gap:8px;color:#f0f3f5}
.panel-title h3 .ic{color:var(--p-green)}
.chip{display:inline-flex;align-items:center;gap:4px;height:21px;padding:0 8px;border-radius:11px;background:#132633;color:#b8c7cf;font-size:10px;white-space:nowrap}
.chip .ic{width:12px;height:12px}
.chip-buy,.chip-bull,.chip-win{background:#0b4639;color:#5ee7ab}
.chip-sell,.chip-bear,.chip-loss{background:#522632;color:#eb8d92}
.chip-neutral{background:#1c2c38;color:#9fb2bd}
.check-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.check-list li{display:flex;gap:7px;font-size:11.5px;line-height:1.5;color:var(--p-text)}
.check-list .ic{width:14px;height:14px;color:var(--p-green);margin-top:2px}

/* ------------------------------------------------------------------ inner page hero */
.page-hero{padding:40px 0 4px;position:relative}
.page-hero .eyebrow{margin-bottom:14px}
.page-hero h1{font-size:clamp(30px,3.2vw,42px)}
.page-hero p{font-size:13.5px;line-height:1.7;color:var(--p-text);max-width:660px;margin-top:12px}
.page-hero .btn-row{margin-top:20px}
.page-hero + .hero-stats{margin-top:20px}
.jump-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.jump-links a{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 13px;border-radius:20px;font-size:10.5px;text-transform:uppercase;color:#dce8ee;border:1px solid var(--p-border-2);background:var(--p-surface-2)}
.jump-links a:hover{background:#0d2824;border-color:#55b88f;color:#72eab4;transform:translateY(-1px)}
.jump-links .ic{width:15px;height:15px;color:var(--p-green)}

/* ------------------------------------------------------------------ home: hero track record */
.hero-stats{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.3fr);margin-top:-4px;border-radius:15px;border:1px solid var(--p-border);background:var(--p-panel);box-shadow:0 10px 30px #0006,inset 0 0 30px #00aeff06}
.hero-stat{padding:15px 18px 14px;border-right:1px solid var(--p-border);min-width:0}
.hero-stat span{display:block;font-size:9.5px;letter-spacing:.7px;text-transform:uppercase;color:var(--muted)}
.hero-stat strong{display:block;font:650 25px/1.1 Arial,sans-serif;letter-spacing:-.5px;color:var(--p-green);margin-top:6px;white-space:nowrap;text-shadow:0 0 18px #16f89115}
.hero-stat small{display:block;font-size:9px;color:#69bd9a;margin-top:4px}
.hero-verify{padding:13px 18px;display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:0}
.hero-verify-top{display:flex;align-items:center;gap:8px;font-size:11.5px;line-height:1.4;color:var(--p-text)}
.hero-verify-top b{color:var(--p-strong)}
.hero-verify-top .ic{width:22px;height:22px;color:var(--p-green)}
.hero-verify-links{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-left:30px}

/* ------------------------------------------------------------------ tabs */
.tabs{display:flex;flex-wrap:wrap;gap:6px}
.tab{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 14px;border-radius:20px;border:1px solid transparent;background:var(--p-surface-3);color:#a9bcc6;font-size:10.5px;text-transform:uppercase;font-weight:500}
.tab .ic{width:15px;height:15px}
.tab:hover{background:#122a33;color:#dce8ee}
.tab[aria-selected="true"]{background:#0d2824;border-color:#55b88f;color:#72eab4;font-weight:600;box-shadow:0 0 14px #2ceea21a}
.tool-panel{padding:0}
.tool-panel>.tabs{padding:14px 18px 12px;border-bottom:1px solid var(--p-border)}
.tool-panel [role="tabpanel"]{padding:18px 20px 22px}

/* ------------------------------------------------------------------ tools */
.tool-section{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:30px;padding:26px}
.tool-section-wide{grid-template-columns:minmax(0,1fr)}
.tool-section-wide .tool-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 30px;align-items:start}
.tool-section-wide .tool-intro>div:first-child{grid-row:span 2}
.tool-intro .eyebrow{margin-bottom:10px}
.tool-intro h2{font:700 24px/1.15 Arial,sans-serif;letter-spacing:-.6px;color:var(--heading)}
.tool-intro p{font-size:12.5px;line-height:1.75;color:var(--p-text);margin-top:10px}
.tool-intro .check-list{margin-top:14px}
.tool-intro .check-list li{font-size:12px}
.tool-note{font-size:10.5px;line-height:1.6;color:var(--p-soft);margin-top:14px}
.tool-error{font-size:12px;color:var(--p-red);background:var(--p-red-bg);border:1px solid var(--p-red-line);border-radius:10px;padding:11px 13px;grid-column:1/-1}
.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.form-span{grid-column:1/-1}
.form-field .hint{font-weight:400;color:var(--p-soft);font-size:10.5px}
.duo{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:8px}
.input-affix{position:relative;display:block}
.input-affix[data-prefix] input{padding-left:24px}
.input-affix[data-suffix] input{padding-right:46px}
.input-affix[data-prefix]::before{content:attr(data-prefix);position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:12.5px;color:#8ca1ad;pointer-events:none}
.input-affix[data-suffix]::after{content:attr(data-suffix);position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:11px;color:#8ca1ad;pointer-events:none}
.form-field input:disabled,.form-field select:disabled{background:#0b171d;color:var(--p-soft)}
.result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.result{border-radius:12px;background:var(--p-well);border:1px solid #173a36;padding:12px 13px;display:grid;gap:5px;align-content:start;min-width:0}
.result span{font-size:9.5px;color:#8fb3a8;text-transform:uppercase;letter-spacing:.5px}
.result strong{font:650 19px/1.15 Arial,sans-serif;color:#dcefe7;letter-spacing:-.4px;overflow-wrap:anywhere}
.result small{font-size:10px;color:#7f9c93;line-height:1.4}
.result.is-primary{background:linear-gradient(120deg,#0f3a2e,#0c2a3a);border-color:#245b49}
.result.is-primary strong{font-size:23px;color:var(--p-green);text-shadow:0 0 18px #16f89118}
.growth-chart{margin-top:14px}
.growth-chart svg{width:100%;height:auto;display:block;overflow:visible}
.growth-chart .gx{font:10px Arial,sans-serif;fill:#8ca1ad}
.growth-chart .gx-end{fill:var(--p-green);font-weight:700}

/* decision tree + quiz */
.flow{min-width:0}
.flow-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:12px}
.flow-step{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;white-space:nowrap}
.progress{height:5px;border-radius:5px;background:#152a35;overflow:hidden;flex:1;max-width:240px}
.progress i{display:block;height:100%;background:var(--gradient);border-radius:5px;transition:width .3s}
.flow-q{font:700 18px/1.3 Arial,sans-serif;color:var(--heading);letter-spacing:-.3px;margin-bottom:14px}
.flow-q:focus,.reco h3:focus{outline:0}
.choices{display:grid;gap:8px}
.choice{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:46px;padding:10px 14px;border-radius:12px;border:1px solid var(--p-border-2);background:var(--p-surface-2);text-align:left;font-size:12.5px;color:var(--ink)}
.choice:hover{transform:translateY(-1px);background:#0d2824;border-color:var(--p-border-hot);box-shadow:0 0 14px #2ceea214}
.choice .ic{width:15px;height:15px;color:#6d8791}
.choice:hover .ic{color:var(--p-green)}
.flow-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;min-height:28px}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.crumbs span{font-size:10px;padding:3px 8px;border-radius:10px;background:#132633;color:#b8c7cf}
.ghost-btn{display:inline-flex;align-items:center;gap:6px;background:none;font-size:11px;color:var(--p-text-2);padding:6px 0}
.ghost-btn:hover{color:var(--p-green)}
.ghost-btn .ic{width:14px;height:14px}
.reco{border-radius:14px;padding:18px 18px 16px;background:var(--p-feature);border:1px solid #245b49;box-shadow:inset 0 0 30px #12ce7906}
.reco .modal-kicker{margin-bottom:4px}
.reco h3{font:700 22px/1.2 Arial,sans-serif;color:var(--heading);letter-spacing:-.5px;margin-bottom:8px}
.reco>p{font-size:12.5px;line-height:1.7;color:var(--p-text)}
.reco .check-list{margin:12px 0 2px}
.reco .btn-row{margin-top:14px}
.reco-plan{margin-top:14px;padding:12px 14px;border-radius:12px;background:#06131a;border:1px solid var(--p-border)}
.reco-plan strong{display:block;font:700 15px Arial,sans-serif;color:var(--p-strong)}
.reco-plan p{font-size:11.5px;line-height:1.6;color:var(--p-text-2);margin-top:3px}
.style-bars{display:grid;gap:7px;margin-top:12px}
.style-bar{display:grid;grid-template-columns:92px minmax(0,1fr) 36px;align-items:center;gap:10px;font-size:11px;color:var(--p-text-2)}
.style-bar div{height:7px;border-radius:5px;background:#11232d;overflow:hidden}
.style-bar i{display:block;height:100%;background:#2a4d55;border-radius:5px}
.style-bar.is-top{color:var(--p-strong);font-weight:600}
.style-bar.is-top i{background:var(--gradient)}
.style-bar b{text-align:right;font-weight:600}
.quiz-capture{margin-top:14px;padding:16px;border-radius:14px;border:1px dashed #24505a;background:#061219}
.quiz-capture h4{margin:0 0 10px;font-size:13px;color:var(--ink)}

/* simulator */
.sim-top{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-end;justify-content:space-between;margin-bottom:10px}
.sim-scenario{min-width:240px;flex:1;max-width:360px}
.sim-side{display:grid;gap:7px;font-size:12px;color:#c2d8d4}
.segmented{display:inline-flex;padding:3px;border-radius:22px;background:var(--p-surface-3);border:1px solid var(--p-border);gap:3px}
.segmented button{min-height:34px;min-width:74px;padding:0 16px;border-radius:18px;font-size:11.5px;font-weight:600;background:transparent;color:#a9bcc6;text-transform:uppercase}
.segmented button:hover{color:#e6f0f4}
.segmented button[aria-pressed="true"]{background:#1a3340;color:#f1f7f4;box-shadow:0 1px 6px #0006}
.segmented .is-buy[aria-pressed="true"]{background:#0b4639;color:#5ee7ab}
.segmented .is-sell[aria-pressed="true"]{background:#522632;color:#eb8d92}
.segmented button:disabled{opacity:.55;cursor:not-allowed}
.sim-brief{font-size:12.5px;line-height:1.65;color:var(--p-text);margin:0 0 10px;padding:10px 13px;border-radius:10px;background:var(--p-surface-2);border:1px solid var(--p-border)}
.sim-fields{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:12px}
.sim-summary{font-size:11.5px;line-height:1.7;color:var(--p-text-2);margin:10px 0 0}
.sim-summary b{color:var(--p-strong);font-weight:600}
.sim-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.sim-controls .modal-primary{margin-top:0;min-width:104px}
.icon-btn{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 14px;border-radius:20px;background:var(--p-surface-3);border:1px solid var(--p-border);color:#c3d3da;font-size:11.5px;font-weight:600}
.icon-btn:hover{background:#15343a;border-color:#2b5a52}
.icon-btn:disabled{opacity:.45;cursor:not-allowed}
.icon-btn .ic{width:15px;height:15px}
.sim-result{margin-top:12px;border-radius:12px;padding:12px 14px;font-size:12.5px;line-height:1.65}
.sim-result strong{font-size:13.5px}
.sim-result span{display:block;margin-top:6px;font-size:12px;opacity:.92}
.sim-result.win{background:#0c352a;color:#9becbb;border:1px solid var(--p-green-line)}
.sim-result.loss{background:var(--p-red-bg);color:#f0a3aa;border:1px solid var(--p-red-line)}

/* candlestick charts */
.chart-box{border-radius:12px;background:#040c12;border:1px solid var(--p-border);padding:8px 6px 4px;min-width:0}
.candle-chart{width:100%;height:auto;display:block}
.candle-chart .cg{stroke:#12283a;stroke-width:1}
.candle-chart .ct{fill:#8ca1ad;font:10px Arial,sans-serif}
.candle-chart .cu line{stroke:#2fd88f;stroke-width:1.1}
.candle-chart .cu rect{fill:#33ed98}
.candle-chart .cd line{stroke:#d9606e;stroke-width:1.1}
.candle-chart .cd rect{fill:#e5707d}
.candle-chart .lv line{stroke-width:1.3}
.candle-chart .lv text{font:600 9px Arial,sans-serif;fill:#fff}
.candle-chart .lv-ink line{stroke:#5c7885}.candle-chart .lv-ink rect{fill:#3f5967}
.candle-chart .lv-muted line{stroke:#3e5866}.candle-chart .lv-muted rect{fill:#2f4755}
.candle-chart .lv-teal line{stroke:#33ed98}.candle-chart .lv-teal rect{fill:#33ed98}
.candle-chart .lv-magenta line{stroke:#e5707d}.candle-chart .lv-magenta rect{fill:#d95f6d}
.candle-chart .lv-entry line{stroke:#13c6ef}.candle-chart .lv-entry rect{fill:#13c6ef}
.candle-chart .lv-teal text,.candle-chart .lv-entry text{fill:#032737}
.candle-chart .tl line{stroke:#13c6ef;stroke-width:1.6;stroke-dasharray:6 4}
.candle-chart .tl text{fill:#6fd9f5;font:10px Arial,sans-serif}
.candle-chart .future{fill:#0a1c26;opacity:.7}
.candle-chart .dv{stroke:#33505c;stroke-dasharray:3 3}
.candle-chart .dvt{fill:#8ca1ad;font:600 9.5px Arial,sans-serif;letter-spacing:.6px;text-transform:uppercase}
.candle-chart .mk path{fill:#33ed98}
.candle-chart .mk-sell path,.candle-chart .mk-down path{fill:#e5707d}
.candle-chart .mk text{font:700 10px Arial,sans-serif;fill:#e3eef2}
.candle-chart .mk-dot{fill:#33ed98;stroke:#040c12;stroke-width:2}

/* ------------------------------------------------------------------ home: track record */
.verify-card{display:flex;flex-direction:column;gap:12px;padding:18px}
.verify-head{display:flex;align-items:flex-start;gap:10px}
.verify-head>.ic{width:32px;height:32px;padding:7px;border-radius:9px;background:var(--p-green-bg);color:#5ee7ab}
.verify-head h3{font:700 16px/1.25 Arial,sans-serif;color:var(--heading);letter-spacing:-.3px}
.verify-head .modal-kicker{margin-bottom:3px;font-size:9px}
.verify-head .sample-chip{margin-left:auto}
.verify-copy{font-size:12px;line-height:1.65;color:var(--p-text)}
.verify-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.verify-stats div{border-radius:10px;background:var(--p-well);border:1px solid #173a36;padding:10px}
.verify-stats dt{font-size:9px;text-transform:uppercase;color:#8fb3a8;letter-spacing:.4px}
.verify-stats dd{margin:5px 0 0;font:650 19px/1 Arial,sans-serif;color:var(--p-green)}
.verify-widget{width:100%;border-radius:10px;border:1px solid var(--p-border)}
.verify-card .dev-hint{margin-top:0}
.trades-panel{margin-top:15px}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-color:#205b48 transparent}
.data-table{width:100%;border-collapse:collapse;font-size:11.5px;font-variant-numeric:tabular-nums;min-width:640px;color:#dce8ee}
.data-table th{font-size:9.5px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#8ca1ad;text-align:right;padding:0 10px 8px;border-bottom:1px solid var(--p-border);white-space:nowrap}
.data-table td{padding:9px 10px;text-align:right;border-bottom:1px solid #10232d;white-space:nowrap}
.data-table th:nth-child(-n+3),.data-table td:nth-child(-n+3){text-align:left}
.data-table tbody tr:hover{background:#0a1d26}
.data-table .sym{font-weight:600;color:var(--p-strong)}
.data-table .chip{height:19px}
.table-foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:10px;font-size:10px;color:var(--muted)}
.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#33ed98;box-shadow:0 0 0 3px #33ed9826;margin-right:6px;vertical-align:1px}
.live-dot.is-sample{background:#b48ad6;box-shadow:0 0 0 3px #b48ad626}
.performance-stats #active-subscribers{color:#2bcbd2}

/* ------------------------------------------------------------------ home: live markets */
.markets-live{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.tv-frame{height:440px;min-width:0;position:relative;border-radius:10px;overflow:hidden}
/* Match the widget document's colour scheme, or Chrome paints an opaque white canvas behind the transparent widget. */
.tv-frame iframe{color-scheme:normal}
.tv-frame .tradingview-widget-container,.tv-frame .tradingview-widget-container__widget{height:100%;width:100%}
/* The frames a widget (or its fallback) fills. Without position here the absolutely
   positioned fallback escapes to the page and swallows clicks everywhere. */
.ticker-frame{position:relative}
.widget-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;font-size:11.5px;color:#8ca1ad;text-align:center;padding:20px;background:#07141c;border-radius:10px}
.widget-credit{font-size:9.5px;color:var(--p-soft);margin-top:8px}
.widget-credit a{text-decoration:underline;text-underline-offset:2px}

/* ------------------------------------------------------------------ home: services + plans */
.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.service-card{padding:18px;display:flex;flex-direction:column;gap:10px}
.service-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--gradient);color:var(--p-on-accent);box-shadow:0 0 18px #13c6ef40}
.service-icon .ic{width:21px;height:21px;stroke-width:1.9}
.service-card h3{font:700 18px/1.2 Arial,sans-serif;color:var(--heading);letter-spacing:-.4px}
.service-card>p{font-size:12px;line-height:1.65;color:var(--p-text)}
.service-price{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:auto;padding-top:11px;border-top:1px solid var(--p-border-2);flex-wrap:wrap}
.service-price strong{font:650 15px Arial,sans-serif;color:var(--p-green)}
.service-price span{font-size:10px;color:var(--muted)}
.service-card .trade-button{min-height:34px;font-size:10px;margin-top:2px}
.plan-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.plan{border-radius:14px;border:1px solid var(--p-border);background:var(--p-surface-2);padding:18px 16px 16px;display:flex;flex-direction:column;gap:8px;position:relative;min-width:0}
.plan.is-featured{border:1.5px solid transparent;background:linear-gradient(160deg,#08201e,#061319) padding-box,var(--gradient) border-box;box-shadow:0 0 26px #13c6ef1f}
.plan-badge{position:absolute;top:-9px;left:16px;height:18px;padding:0 9px;border-radius:9px;background:var(--gradient);color:var(--p-on-accent);font-size:8.5px;font-weight:700;letter-spacing:.8px;display:flex;align-items:center;text-transform:uppercase}
.plan h3{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#a9bcc6}
.plan-price{font:650 30px/1 Arial,sans-serif;color:var(--p-strong);letter-spacing:-.8px}
.plan.is-featured .plan-price{color:var(--p-green)}
.plan-price span{font:400 11px var(--font);color:#8ca1ad;letter-spacing:0;margin-left:4px}
.plan .check-list{margin:6px 0 10px}
.plan .modal-primary,.plan .modal-secondary{margin-top:auto;width:100%}

/* ------------------------------------------------------------------ cards (case studies, outlooks, guides) */
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.post-card{display:flex;flex-direction:column;gap:9px;padding:16px;color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s}
a.post-card:hover{transform:translateY(-3px);border-color:#399bb3;box-shadow:0 0 20px #10bff215}
.post-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.post-card h3{font:700 15.5px/1.3 Arial,sans-serif;color:var(--heading);letter-spacing:-.3px}
.post-card p{font-size:12px;line-height:1.65;color:var(--p-text-2)}
.post-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:10.5px;color:var(--muted);padding-top:6px}
.post-foot .go{display:inline-flex;align-items:center;gap:3px;color:var(--p-green);font-weight:600;white-space:nowrap}
.post-foot .go .ic{width:13px;height:13px}
.mini-chart{border-radius:10px;background:#040c12;border:1px solid var(--p-border);padding:3px}

/* ------------------------------------------------------------------ home: academy teaser + certificate */
.academy-teaser{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:30px;align-items:center;padding:26px}
/* The academy picture is the panel's own backdrop: ::before holds the picture, ::after the
   veil that keeps the copy legible — a dark one in the dark theme, a pale one in the light.
   Across the whole panel the open book sat under the copy and was cut in half; it now fills
   the right-hand part only, feathered in from the left, so the book and the chart frame the
   certificate while the copy keeps a clean ground. */
.academy-teaser::before,.academy-teaser::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.academy-teaser::before{z-index:-2;left:34%;background:url("../img/editorial/academy-learning-960.c63a611eb93a.webp") 60% 58%/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 42%);mask-image:linear-gradient(90deg,transparent 0,#000 42%)}
.academy-teaser::after{z-index:-1}
:root[data-theme="dark"] .academy-teaser::after{background:linear-gradient(90deg,#061219f2 0,#061219e6 42%,#06121980 60%,#0612194d 100%)}
:root:not([data-theme="dark"]) .academy-teaser::after{background:linear-gradient(90deg,#f4fbfff5 0,#f0f9ffeb 42%,#eef8ff99 60%,#eaf6ff66 100%)}
/* On a phone the panel is tall and narrow: "cover" would zoom the picture until nothing in it
   is recognisable, so it becomes a band across the top that fades into the copy below. */
@media(max-width:780px){
  .panel.academy-teaser{padding-top:196px}      /* room for the band, so no copy sits on the picture */
  .academy-teaser::before{left:0;background-position:center top;background-size:100% auto;-webkit-mask-image:none;mask-image:none}
  :root[data-theme="dark"] .academy-teaser::after{background:linear-gradient(180deg,#06121900 0,#06121900 118px,#061219cc 176px,#061219f7 228px)}
  :root:not([data-theme="dark"]) .academy-teaser::after{background:linear-gradient(180deg,#f4fbff00 0,#f4fbff00 118px,#f4fbffd9 176px,#f8fffffa 228px)}
}
.teaser-title{font:700 26px/1.2 Arial,sans-serif;letter-spacing:-.6px;color:var(--heading);margin-top:2px}
.academy-teaser p{font-size:12.5px;line-height:1.75;color:var(--p-text);margin-top:10px}
.module-chips{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 18px}
.module-chips span{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:12px;background:#132633;color:#b8c7cf;font-size:10.5px}
.module-chips b{color:var(--p-green);font-weight:700}
/* The certificate stays on light "paper" so it prints cleanly. */
.cert-frame{padding:2px;border-radius:16px;background:var(--gradient);box-shadow:0 14px 40px #0009,0 0 30px #13c6ef22}
.cert{position:relative;aspect-ratio:1.414/1;width:100%;border-radius:14px;padding:5% 7%;display:flex;flex-direction:column;align-items:center;text-align:center;background:radial-gradient(ellipse at 12% 8%,#d6f7ea 0,transparent 42%),radial-gradient(ellipse at 92% 96%,#d5f1fb 0,transparent 42%),#fffefb;overflow:hidden;container-type:inline-size;color:#26363d}
.cert::before{content:"";position:absolute;inset:3%;border-radius:10px;border:1px solid #cfe3de;pointer-events:none}
.cert-brand{display:flex;align-items:center;gap:1.2cqw;font:700 4.2cqw Arial,sans-serif;letter-spacing:-.04em;color:#1d2f38}
.cert-brand b{color:#16b377}
.cert-brand .brand-symbol{width:6cqw;height:auto}
.cert-brand em{font:500 2.2cqw var(--font);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:#6a7d84;margin-left:1cqw}
.cert-kicker{font-size:2cqw;letter-spacing:.32em;text-transform:uppercase;color:#0e9a86;margin-top:4.5cqw;font-weight:600}
.cert-to{font-size:2.1cqw;color:#6f8288;margin-top:3cqw}
.cert-name{font:italic 700 6.4cqw/1.15 Georgia,"Times New Roman",serif;background:linear-gradient(105deg,#0fae78,#0a9cd4);-webkit-background-clip:text;background-clip:text;color:transparent;margin-top:1.2cqw;padding:0 1cqw;max-width:100%;overflow-wrap:anywhere}
.cert-for{font-size:2.2cqw;line-height:1.55;color:#4f6268;margin-top:2.2cqw}
.cert-course{font-weight:700;color:#26363d;font-size:2.7cqw}
.cert-sub{font-size:1.9cqw;color:#6f8288}
.cert-foot{display:flex;justify-content:space-between;align-items:flex-end;width:100%;margin-top:auto;font-size:1.7cqw;color:#6f8288;text-align:left}
.cert-foot strong{display:block;color:#34474f;font-size:2cqw;border-bottom:1px solid #cfdcdb;padding-bottom:.6cqw;margin-bottom:.6cqw}
.cert-foot-r{text-align:right}
.cert-seal{width:9cqw;height:9cqw;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--gradient);color:#032737;box-shadow:0 0 0 .8cqw #ffffffcc,0 0 0 1.1cqw #bfe7dc}
.cert-seal .ic{width:5cqw;height:5cqw;stroke-width:1.6}
#print-root{display:none}

/* ------------------------------------------------------------------ home: lead magnet */
.lead-panel{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:28px;padding:28px;border-radius:17px;background:radial-gradient(ellipse at 0 0,#0e3b31 0,transparent 55%),radial-gradient(ellipse at 100% 100%,#0b2b40 0,transparent 55%),linear-gradient(120deg,#061a1a,#07121c);border:1px solid #1f4b44;box-shadow:inset 0 0 40px #12ce7906}
.lead-copy .eyebrow{margin-bottom:10px}
.lead-copy h2{font:700 27px/1.15 Arial,sans-serif;letter-spacing:-.7px;color:var(--heading)}
.lead-copy>p{font-size:13px;line-height:1.7;color:var(--p-text);margin-top:10px}
.lead-copy .check-list{margin-top:14px}
.downloads-title{font:600 13px "Arial Narrow",Arial,sans-serif;text-transform:uppercase;letter-spacing:.2px;margin:22px 0 8px;color:#f0f3f5}
.downloads{display:grid;gap:8px}
.download-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;background:#07161ecc;border:1px solid var(--p-border-2);text-align:left;width:100%;color:var(--ink)}
.download-item>.ic{width:32px;height:32px;padding:7px;border-radius:9px;background:var(--p-green-bg);color:#5ee7ab}
.download-item strong{display:block;font-size:12px;font-weight:600}
.download-item span{font-size:10px;color:var(--muted)}
.download-item em{margin-left:auto;font-style:normal;font-size:10px;color:var(--p-green);font-weight:600;white-space:nowrap}
.download-item:hover{border-color:var(--p-border-hot);background:#0a1f26}
.lead-form-card{background:#06121a;border:1px solid var(--p-border-2);border-radius:16px;padding:22px;box-shadow:0 16px 40px #0007;align-self:start}
.lead-form-card h3{font:700 18px/1.25 Arial,sans-serif;color:var(--heading);letter-spacing:-.3px}
.lead-form-card>.meta{display:block;margin:4px 0 14px}

/* ------------------------------------------------------------------ lead forms (all) */
.lead-form{display:grid;gap:12px}
.lead-form.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.form-actions{display:flex;gap:10px}
.form-actions .modal-primary{margin-top:2px}
.lead-form .form-note{margin-top:0}
.reach-toggle{border:0;padding:0;margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;color:#c2d8d4}
.reach-toggle legend{font-size:12px;float:left;margin-right:4px;padding:0}
.reach-toggle label{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 12px;border-radius:16px;background:var(--p-surface-3);border:1px solid var(--p-border);color:#b8c7cf;font-size:11.5px;cursor:pointer}
.reach-toggle input{accent-color:#42eca2;margin:0}
.reach-toggle label:has(input:checked){background:var(--p-green-bg);border-color:var(--p-green-line);color:#72e7b7;font-weight:600}
.check{display:flex;gap:8px;align-items:flex-start;font-size:11px;line-height:1.5;color:var(--p-text-2);cursor:pointer}
.check input{margin:2px 0 0;accent-color:#42eca2}
.form-status{margin:0}
.form-status .dev-hint{margin-top:8px}
.form-error{font-size:12.5px;line-height:1.6;padding:12px 14px;border-radius:10px;background:var(--p-red-bg);border:1px solid var(--p-red-line);color:#f0a3aa}
.lead-form.is-done input,.lead-form.is-done textarea,.lead-form.is-done select{background:#0a1a1f}

/* ------------------------------------------------------------------ home: contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:15px;align-items:start}
.contact-side{display:flex;flex-direction:column;gap:10px}
.channel{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:12px;background:var(--p-surface-2);border:1px solid var(--p-border-2);color:var(--ink)}
a.channel:hover{border-color:var(--p-border-hot);transform:translateY(-1px)}
.channel>.ic{width:36px;height:36px;padding:8px;border-radius:10px;background:var(--p-green-bg);color:#5ee7ab}
.channel strong{display:block;font-size:12.5px;color:var(--p-strong)}
.channel span{font-size:10.5px;color:var(--muted)}
.channel.is-pending{opacity:.7}
.response-note{display:flex;gap:10px;align-items:flex-start;font-size:11px;line-height:1.5}
.response-note>.ic{color:var(--p-green);margin-top:1px}
.response-note strong{display:block;font-size:12px;color:var(--p-strong)}
.response-note span{color:var(--muted)}

/* ------------------------------------------------------------------ footer */
/* Full-bleed header band: spans the viewport, inner column lines up with the rest of the page. */
.site-header{width:100%;flex:0 0 auto;background:#040d13;border-bottom:1px solid #12262f}

/* Full-bleed footer band: spans the viewport, inner column lines up with the rest of the page. */
.site-footer{width:100%;max-width:none;margin:52px 0 0;padding:20px 51px 12px;border:0;border-top:1px solid #12262f;border-radius:0;background:#02080c}
.footer-columns-wide{grid-template-columns:1.45fr repeat(4,minmax(0,1fr))!important}
.site-footer .footer-columns h3{font-size:10.5px}
.site-footer .footer-columns a,.site-footer .footer-columns button{font-size:10px;line-height:1.95}
.site-footer .footer-intro p{font-size:10px}
.footer-social-row{display:flex;gap:7px}
.footer-social{background:#1c2a37;color:#f4f6f7;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center}
.footer-social .ic{width:15px;height:15px}
.footer-social:hover{background:#155645;transform:translateY(-2px)}
.risk-note{font-size:9.5px;line-height:1.7;color:#7f929c;padding:12px 0;border-top:1px solid #112634}
.risk-note strong{color:#c3d3da}
.site-footer .footer-bottom{font-size:9px}
.footer-powered{margin:0;padding:10px 0 2px;border-top:1px solid #112634;text-align:center;font-size:9.5px;letter-spacing:.3px;color:#7f929c}
.footer-powered strong{color:#c3d3da;font-weight:600}

/* ------------------------------------------------------------------ chat assistant */
.chat-fab{position:fixed;right:22px;bottom:22px;z-index:60;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--p-on-accent);background:var(--neon-button);border:1px solid #22d9f350;box-shadow:0 0 22px #00ccec66,0 6px 18px #008de64d,inset 0 1px 0 #a2ffff54}
.chat-fab .ic{width:25px;height:25px;stroke-width:1.9}
.chat-fab:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 0 28px #00cdec88,0 6px 18px #008de64d}
.chat-fab-dot{position:absolute;top:6px;right:7px;width:11px;height:11px;border-radius:50%;background:#42eca2;border:2px solid #03090e}
.chat-fab.is-open .chat-fab-dot{display:none}
.chat-panel{position:fixed;right:22px;bottom:90px;z-index:60;width:min(370px,calc(100vw - 28px));height:min(540px,calc(100dvh - 120px));display:flex;flex-direction:column;border-radius:18px;border:1px solid var(--p-border-2);background:#06121a;box-shadow:0 24px 70px #000a,0 0 40px #13c6ef14;overflow:hidden;color:var(--ink)}
.chat-panel[hidden]{display:none}
.chat-head{display:flex;align-items:center;gap:10px;padding:13px 14px;background:var(--p-feature);border-bottom:1px solid var(--p-border)}
.chat-avatar{width:36px;height:36px;border-radius:50%;background:var(--gradient);color:var(--p-on-accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chat-avatar .ic{width:18px;height:18px;fill:var(--p-on-accent);stroke:none}
.chat-head strong{display:block;font-size:13px;color:var(--p-strong)}
.chat-head span{font-size:10px;color:var(--muted)}
.chat-close{margin-left:auto;width:32px;height:32px;border-radius:50%;background:#1c333a;display:flex;align-items:center;justify-content:center;color:#c2d8d4;flex-shrink:0}
.chat-close:hover{background:#27584a}
.chat-close .ic{width:15px;height:15px}
.chat-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:9px;scrollbar-color:#205b48 transparent}
.chat-msg{max-width:86%;font-size:12.5px;line-height:1.55}
.chat-msg p{padding:9px 12px;border-radius:14px}
.chat-bot{align-self:flex-start}
.chat-bot p{background:#10222c;color:#d7e3e8;border-bottom-left-radius:4px}
.chat-user{align-self:flex-end}
.chat-user p{background:linear-gradient(120deg,#0a8f6a,#0b7fae);color:#fff;border-bottom-right-radius:4px}
.chat-msg.note{max-width:100%}
.chat-msg.note .dev-hint{margin:0}
.chat-link{display:inline-flex;margin:6px 0 0 4px;font-size:11.5px;font-weight:600;color:var(--p-green);background:none;padding:0}
.chat-link:hover{color:#a0ffd2}
.chat-typing{align-self:flex-start;display:flex;gap:4px;padding:12px 13px;background:#10222c;border-radius:14px;border-bottom-left-radius:4px}
.chat-typing span{width:6px;height:6px;border-radius:50%;background:#5d7a86;animation:chatDot 1s infinite}
.chat-typing span:nth-child(2){animation-delay:.15s}
.chat-typing span:nth-child(3){animation-delay:.3s}
@keyframes chatDot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.chat-chips{display:flex;gap:6px;overflow-x:auto;padding:8px 14px;border-top:1px solid var(--p-border);scrollbar-width:none}
.chat-chips::-webkit-scrollbar{display:none}
.chat-chips button{flex-shrink:0;min-height:29px;padding:0 11px;border-radius:15px;background:var(--p-surface-3);border:1px solid var(--p-border);font-size:11px;color:#b8c7cf}
.chat-chips button:hover{background:#15343a;border-color:#2b5a52;color:#e6f0f4}
.chat-form{display:flex;gap:8px;padding:10px 12px 12px;border-top:1px solid var(--p-border)}
.chat-form input{flex:1;min-width:0;border:1px solid var(--p-input-line);border-radius:20px;padding:0 14px;min-height:40px;font-size:12.5px;background:var(--p-input);color:#ecf7f3}
.chat-form input::placeholder{color:#769094}
.chat-form button{width:40px;height:40px;border-radius:50%;background:var(--gradient);color:var(--p-on-accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chat-form button .ic{width:17px;height:17px;stroke-width:1.9}

/* ------------------------------------------------------------------ prose (articles, legal) */
.prose p{font-size:13px;line-height:1.8;color:var(--p-text);margin-bottom:12px}
.prose h2{font:700 19px/1.3 Arial,sans-serif;color:var(--heading);letter-spacing:-.3px;margin:24px 0 8px}
.prose ul,.prose ol{padding-left:20px;margin:0 0 14px}
.prose li{font-size:13px;line-height:1.75;color:var(--p-text);margin-bottom:5px}
.prose li::marker{color:var(--p-green)}

/* ------------------------------------------------------------------ academy */
.course-head{display:flex;flex-wrap:wrap;gap:16px 30px;align-items:flex-end;justify-content:space-between;margin-top:24px;padding:16px 20px}
.course-progress{flex:1;min-width:220px;max-width:460px;font-size:12px;color:var(--muted)}
.course-progress strong{font-size:12.5px;margin-right:6px;color:var(--p-strong)}
.course-progress .bar{height:8px;border-radius:6px;background:#152a35;overflow:hidden;margin-top:8px}
.course-progress .bar i{display:block;height:100%;width:0;background:var(--gradient);border-radius:6px;transition:width .4s;box-shadow:0 0 10px #33ed9855}
.name-field{flex:0 1 320px;min-width:230px}
.course-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:15px;margin-top:15px;align-items:start}
.module-nav{padding:10px}
.module-list{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.module-btn{display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:12px;color:var(--ink)}
.module-btn:hover{background:#0b1c25}
.module-btn[aria-current="true"]{background:var(--p-feature);box-shadow:inset 0 0 0 1px #245b49}
.module-num{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 11px Arial,sans-serif;background:#132833;color:#a9bcc6;flex-shrink:0}
.module-btn.is-done .module-num{background:var(--gradient);color:var(--p-on-accent)}
.module-btn strong{display:block;font-size:12px;line-height:1.35;font-weight:600}
.module-btn small{display:block;font-size:10px;color:var(--muted);margin-top:3px}
.course-cert-btn{width:100%;margin-top:10px}
.course-cert-note{display:flex;gap:8px;align-items:flex-start;font-size:10.5px;line-height:1.5;color:var(--muted);padding:12px 10px 4px;border-top:1px solid var(--p-border);margin-top:8px}
.course-cert-note .ic{width:16px;height:16px;color:var(--p-green)}
.lesson-panel{padding:24px 28px 26px;min-height:440px;scroll-margin-top:20px}
.lesson-panel h2{font:700 24px/1.25 Arial,sans-serif;color:var(--heading);letter-spacing:-.5px;margin:4px 0 14px}
.lesson-panel h2:focus{outline:0}
.lesson-panel .prose p{font-size:14px;line-height:1.85}
.lesson-steps{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.step-btn{display:inline-flex;align-items:center;gap:5px;min-height:28px;padding:0 11px;border-radius:15px;border:1px solid transparent;background:var(--p-surface-3);font-size:10.5px;color:#b8c7cf}
.step-btn .ic{width:12px;height:12px}
.step-btn:hover{background:#122a33}
.step-btn.is-read{background:var(--p-green-bg);color:#72e7b7}
.step-btn[aria-current="step"]{background:#0d2824;border-color:#55b88f;color:#e9fff5;font-weight:600}
.lesson-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:22px;padding-top:16px;border-top:1px solid var(--p-border);flex-wrap:wrap}
.lesson-nav .modal-primary{margin-top:0}
.lesson-intro{font-size:12.5px;color:var(--muted);margin:-6px 0 18px;line-height:1.6}
.quiz-q{border:0;padding:0;margin:0 0 18px;min-width:0}
.quiz-q legend{font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:9px;padding:0;line-height:1.45}
.quiz-opt{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;border:1px solid var(--p-border-2);margin-bottom:6px;font-size:12.5px;cursor:pointer;background:var(--p-surface-2);color:var(--ink)}
.quiz-opt:hover{border-color:var(--p-border-hot)}
.quiz-opt input{accent-color:#42eca2;margin:0}
.quiz-opt:has(input:checked){border-color:var(--p-border-hot);background:#0b2a25}
.quiz-opt.is-right,.quiz-opt.is-right:has(input:checked){background:#0c352a;border-color:var(--p-green-line);color:#b9f3d3}
.quiz-opt.is-wrong,.quiz-opt.is-wrong:has(input:checked){background:var(--p-red-bg);border-color:var(--p-red-line);color:#f3c0c4}
.quiz-missing{font-size:12px;color:var(--p-red);margin:0 0 10px}
.quiz-result{margin-top:16px;border-radius:12px;padding:14px 16px}
.quiz-result strong{font-size:14px}
.quiz-result p{font-size:12.5px;margin:4px 0 12px;line-height:1.6}
.quiz-result.is-pass{background:#0c352a;color:#9becbb;border:1px solid var(--p-green-line)}
.quiz-result.is-fail{background:var(--p-red-bg);color:#f0a3aa;border:1px solid var(--p-red-line)}
.cert-stage{max-width:640px;margin:6px 0 16px}
.cert-name-hint{display:flex;gap:8px;align-items:center;font-size:12px;color:#f0a3aa;background:var(--p-red-bg);border:1px solid var(--p-red-line);border-radius:10px;padding:9px 12px;margin-bottom:12px}
.cert-name-hint .ic{width:16px;height:16px}
.cert-email{margin-top:20px;padding-top:18px;border-top:1px solid var(--p-border);max-width:460px}
.cert-email h3{font-size:13px;margin-bottom:10px;color:var(--ink)}
.overview-list{margin:4px 0 20px}
.overview-list li{font-size:12.5px}

/* ------------------------------------------------------------------ insights */
.insights-tabs{margin-top:22px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.tab-panel{margin-top:16px}
.filter-row{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.article{max-width:820px;margin:24px auto 0;padding:28px 36px 30px}
.article h1{font-size:clamp(26px,3vw,36px);margin:14px 0 8px;line-height:1.15}
.article h1:focus{outline:0}
.article-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:14px}
.article .meta{display:block;margin-bottom:18px}
.article-lead{font-size:15px!important;line-height:1.75!important;color:#c9d6dc!important}
.levels{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 18px}
.levels>div{border-radius:12px;padding:13px 15px}
.levels .res{background:#2a1620;border:1px solid #5a2c3a}
.levels .sup{background:#0c2f26;border:1px solid #245b49}
.levels h3{font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:#8ca1ad;margin-bottom:6px}
.levels strong{font:650 18px Arial,sans-serif;color:var(--p-strong);margin-right:14px}
.scenario{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.scenario>div{border:1px solid var(--p-border-2);border-radius:12px;padding:12px 14px;font-size:12.5px;line-height:1.65;color:var(--p-text);background:var(--p-surface-2)}
.scenario b{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.7px;margin-bottom:4px}
.video-slot{aspect-ratio:16/9;border-radius:14px;background:radial-gradient(ellipse at 20% 20%,#0d4b3c,transparent 60%),radial-gradient(ellipse at 85% 85%,#0b3550,transparent 55%),linear-gradient(135deg,#07202a,#050e16);border:1px solid var(--p-border);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:#d9f1ee;margin:4px 0 20px;font-size:12.5px;text-align:center;padding:16px}
.video-slot>.ic{width:54px;height:54px;padding:15px;border-radius:50%;background:var(--neon-button);color:var(--p-on-accent);box-shadow:0 0 24px #00ccec66}
.video-slot .dev-hint{max-width:420px}
.article-disclaimer{font-size:11px;color:var(--p-soft);line-height:1.6;margin-top:6px}
.article-cta{margin-top:22px;padding:18px 20px;border-radius:14px;background:var(--p-feature);border:1px solid #245b49;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.article-cta strong{display:block;font-size:14px;color:var(--heading)}
.article-cta span{font-size:12px;color:var(--p-text-2)}
.article-cta .modal-primary{margin-top:0}
.article-more{margin-top:30px}
.article-more h2{font:600 16px "Arial Narrow",Arial,sans-serif;text-transform:uppercase;margin-bottom:12px;color:#f0f3f5}
.article-more .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.glossary-panel{padding:20px 22px}
.glossary-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:12px}
.search-box{position:relative;flex:1;min-width:220px;max-width:380px}
.search-box input{width:100%;min-height:40px;border:1px solid var(--p-input-line);border-radius:20px;padding:0 14px 0 36px;background:var(--p-input);color:#ecf7f3}
.search-box input::placeholder{color:#769094}
.search-box .ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:#8ca1ad}
.letter-bar{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:16px}
.letter-bar button{min-width:26px;height:26px;padding:0 6px;border-radius:7px;background:var(--p-surface-3);font-size:11px;color:#b8c7cf}
.letter-bar button:hover:not(:disabled){background:#15343a;color:#e6f0f4}
.letter-bar button[aria-pressed="true"]{background:var(--gradient);color:var(--p-on-accent);font-weight:700}
.letter-bar button:disabled{opacity:.3;cursor:default}
.glossary-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}
.term{padding:14px 16px;border-radius:12px;background:var(--p-surface-2);border:1px solid var(--p-border);scroll-margin-top:20px}
.term dt{font:700 14px Arial,sans-serif;color:var(--heading);margin-bottom:5px}
.term dd{margin:0;font-size:12px;line-height:1.65;color:var(--p-text-2)}
.empty{padding:26px;text-align:center;color:var(--muted);font-size:12.5px}
.download-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.download-card{padding:18px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.download-card>.ic{width:42px;height:42px;padding:10px;border-radius:12px;background:var(--gradient);color:var(--p-on-accent);box-shadow:0 0 18px #13c6ef40}
.download-card h3{font:700 16px/1.3 Arial,sans-serif;color:var(--heading)}
.download-card p{font-size:12px;line-height:1.65;color:var(--p-text-2)}
.download-card .modal-primary{margin-top:auto}

/* ------------------------------------------------------------------ case studies */
.case-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:22px}
.case-tab{text-align:left;padding:13px 15px;border-radius:14px;border:1px solid var(--p-border-2);background:var(--p-surface-2);display:grid;gap:7px;color:var(--ink)}
.case-tab:hover{border-color:var(--p-border-hot)}
.case-tab[aria-selected="true"]{border-color:#399bb3;background:var(--p-card);box-shadow:0 0 20px #10bff215}
.case-tab strong{font-size:13px;line-height:1.35;color:var(--p-strong)}
.case-tab .chip{height:19px}
.case-view{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:15px;margin-top:15px;align-items:start}
.case-chart-panel{padding:16px}
.case-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:10px}
.reveal{display:flex;align-items:center;gap:12px;margin-top:12px;font-size:11px;color:var(--muted)}
.reveal label{font-weight:600;color:var(--ink)}
.reveal input[type=range]{flex:1;accent-color:#42eca2;min-width:0}
.reveal output{min-width:150px;text-align:right}
.case-notes{padding:20px}
.case-notes h2{font:700 20px/1.25 Arial,sans-serif;color:var(--heading);letter-spacing:-.4px;margin:4px 0 14px}
.numbered{list-style:none;counter-reset:n;padding:0;margin:0;display:grid;gap:10px}
.numbered li{counter-increment:n;display:grid;grid-template-columns:24px 1fr;gap:10px;font-size:12.5px;line-height:1.6;color:var(--p-text)}
.numbered li::before{content:counter(n);width:22px;height:22px;border-radius:50%;background:var(--gradient);color:var(--p-on-accent);font:700 11px/22px Arial,sans-serif;text-align:center}
.case-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0 10px}
.case-facts .result strong{font-size:16px}
.outcome{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:12px;background:#0c352a;color:#9becbb;font-size:12.5px;line-height:1.5;border:1px solid var(--p-green-line)}
.outcome .ic{color:var(--p-green)}
.case-notes h3{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:#8ca1ad;margin:18px 0 8px}
.case-notes .btn-row{margin-top:16px}

/* ------------------------------------------------------------------ responsive (breakpoints follow the dark theme) */
@media(min-width:1500px){
  main,.site-header,.site-footer{padding-left:72px;padding-right:72px}
  h1{font-size:52px}
  .hero{min-height:420px}
  .hero-visual img{max-height:430px}
}
@media(max-width:1190px){
  .hero-stat{padding:14px 14px 13px}.hero-stat strong{font-size:22px}.hero-verify{padding:12px 14px}
  .tool-section{gap:24px}
}
@media(max-width:1100px){
  .site-footer{padding-left:35px;padding-right:35px}
}
@media(max-width:990px){
  .hero-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hero-stat:nth-child(4){border-right:0}
  .hero-verify{grid-column:1/-1;border-top:1px solid var(--p-border);flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}
  .hero-verify-links{padding-left:0}
  .tool-section{grid-template-columns:minmax(0,1fr);gap:18px}
  .tool-section-wide .tool-intro{grid-template-columns:minmax(0,1fr)}
  .plan-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px}
  .service-card{padding:15px}
  .academy-teaser{gap:22px;padding:22px}
  .footer-columns-wide{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .footer-columns-wide .footer-intro{grid-column:1/-1}
  .site-footer{padding-left:29px;padding-right:29px}
  .sim-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .course-layout{grid-template-columns:240px minmax(0,1fr)}
  .case-view{grid-template-columns:minmax(0,1fr)}
  .download-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:780px){
  .section{margin-top:38px}
  .section-intro{flex-direction:column;align-items:flex-start;gap:8px}
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:6px}
  .hero-stat{border-bottom:1px solid var(--p-border)}
  .hero-stat:nth-child(2n),.hero-stat:nth-child(4){border-right:0}
  .hero-verify{border-top:0}
  .service-grid,.markets-live,.contact-grid,.lead-panel,.academy-teaser{grid-template-columns:minmax(0,1fr)}
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tv-frame{height:400px}
  .lead-panel{padding:22px}
  .site-footer{margin-top:40px;padding-left:25px;padding-right:25px}
  .footer-columns-wide{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .page-hero{padding-top:30px}
  .course-layout{grid-template-columns:minmax(0,1fr)}
  .module-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case-picker,.glossary-list{grid-template-columns:minmax(0,1fr)}
  .article{padding:22px 20px}
  .lesson-panel{padding:20px;min-height:0}
}
@media(max-width:540px){
  .field-grid,.lead-form.form-grid,.sim-fields{grid-template-columns:minmax(0,1fr)}
  .result-grid{grid-template-columns:minmax(0,1fr)}
  .plan-grid,.card-grid{grid-template-columns:minmax(0,1fr)}
  .hero-stat strong{font-size:21px}
  .tool-section{padding:18px 16px}
  .tool-panel [role="tabpanel"]{padding:16px 14px 18px}
  .tool-panel>.tabs{padding:12px 14px 10px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .tool-panel>.tabs::-webkit-scrollbar{display:none}
  .tab{flex-shrink:0}
  .teaser-title,.lead-copy h2{font-size:23px}
  .lead-panel{padding:18px 16px;gap:20px}
  .lead-form-card{padding:18px 16px}
  .site-footer{margin-top:36px;padding:18px 20px 10px}
  .flow-q{font-size:16.5px}
  .sim-scenario{min-width:0;max-width:none;width:100%}
  .sim-side{width:100%}
  .segmented{width:100%}
  .segmented button{flex:1}
  .chat-panel{right:10px;left:10px;width:auto;bottom:80px;height:min(72dvh,540px)}
  .chat-fab{right:14px;bottom:14px;width:52px;height:52px}
  .verify-stats dd{font-size:17px}
  .module-list,.levels,.scenario,.download-cards,.guide-grid,.article-more .card-grid{grid-template-columns:minmax(0,1fr)}
  .article{padding:20px 16px}
  .lesson-panel{padding:18px 16px}
  .lesson-panel h2{font-size:21px}
  .reveal{flex-wrap:wrap}
  .reveal output{min-width:0;width:100%;text-align:left}
}
@media(max-width:365px){
  .site-footer{padding-left:14px;padding-right:14px}
  .hero-stat{padding:12px 11px}
  .hero-stat strong{font-size:19px}
}

/* ------------------------------------------------------------------ print (certificates) */
@media print{
  @page{margin:12mm}
  @page cert{size:A4 landscape;margin:10mm}
  #print-root{width:262mm;margin:0 auto;page:cert}
  body.is-printing>*:not(#print-root){display:none!important}
  body.is-printing #print-root{display:block!important}
  body.is-printing{background:#fff}
  #print-root .cert-frame{box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #print-root .cert{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ------------------------------------------------------------------ theme toggle
   Coloured only through tokens, so it follows light and dark without an override. */
.theme-toggle{width:33px;height:33px;min-width:33px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;padding:0;background:var(--p-surface-3);border:1px solid var(--p-border-2);color:var(--p-text)}
.theme-toggle:hover{border-color:var(--p-border-hot);color:var(--p-strong);transform:translateY(-1px)}
.theme-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .ic-moon{display:none}
:root:not([data-theme="dark"]) .theme-toggle .ic-sun{display:none}
:root:not([data-theme="dark"]) .theme-toggle .ic-moon{display:block}

/* ------------------------------------------------------------------ colours for SVG drawn in JavaScript
   The markup keeps its colour attributes as a fallback. CSS properties outrank SVG presentation
   attributes, so these rules are what actually paint — and phase1-light.css is generated from them. */
.brand-symbol .brand-hole{fill:#030b11}
.site-footer .brand-symbol .brand-hole{fill:#02080c}
.performance-chart svg line{stroke:#23453f}
.performance-chart svg text{fill:#a2b6b5}
.performance-chart .bar rect:first-of-type{fill:#17d2c2}
.performance-chart .bar rect:last-of-type{fill:#33ed98}
.legend-forex{background:#33ed98}
.legend-crypto{background:#17d2c2}

/* ------------------------------------------------------------------ home: risk note, live ticker, week ahead
   Token colours only, so light mode needs no regeneration for these. */
.stats-note{margin:10px 2px 0;font-size:10.5px;line-height:1.6;color:var(--p-soft)}
.ticker-strip{display:flex;align-items:center;gap:12px;margin-top:16px;padding-left:14px;min-height:48px;border:1px solid var(--p-border);border-radius:12px;background:var(--p-surface-2);overflow:hidden}
.ticker-label-live{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;font-size:9.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--p-green-2)}
.ticker-frame{flex:1;min-width:0;height:46px}
.ticker-frame .tradingview-widget-container,.ticker-frame .tradingview-widget-container__widget{height:100%}
.ticker-frame iframe{color-scheme:normal}
.ticker-frame .widget-fallback{height:100%;display:flex;align-items:center;gap:8px;font-size:11px;color:var(--p-soft)}
.home-trades{margin-top:15px}
.week-ahead{margin-bottom:16px;padding:14px 16px;border:1px solid var(--p-border);border-radius:14px;background:var(--p-surface-2)}
.week-ahead-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.week-ahead-head h3{font-size:14px;font-weight:600;color:var(--p-strong)}
.week-ahead-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.week-event{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;padding:9px 10px;border-radius:10px;background:var(--p-surface-3);border-left:3px solid var(--p-border-2)}
.week-event.is-high{border-left-color:var(--p-red)}
.week-event.is-past{opacity:.55}
.week-event time{grid-row:span 2;min-width:46px;font-size:10px;line-height:1.3;text-transform:uppercase;color:var(--p-soft)}
.week-event time b{display:block;font-size:15px;color:var(--p-strong)}
.week-event strong{font-size:12px;font-weight:600;color:var(--p-text)}
.week-event span{font-size:10.5px;color:var(--p-soft)}
@media(max-width:990px){.week-ahead-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.week-ahead-list{grid-template-columns:1fr}.ticker-strip{flex-direction:column;align-items:stretch;gap:4px;padding:10px 0 0}.ticker-label-live{padding-left:12px}}
.week-ahead-head h3{display:flex;align-items:center;gap:8px}

/* ------------------------------------------------------------------ signal lifecycle: status, locked cards, dialog
   Token colours only, so light mode follows without regenerating phase1-light.css. */
.signal-meta{margin:-4px 0 8px;font-size:10px;letter-spacing:.2px;color:var(--p-soft)}
.signal-status .status-chip{border-radius:4px;padding:2px 6px;white-space:nowrap}
.status-chip.status-tp{background:var(--p-green-bg);color:var(--p-green)}
.status-chip.status-sl{background:var(--p-red-bg);color:var(--p-red)}
.status-chip.status-be,.status-chip.status-closed{background:var(--p-surface-3);color:var(--p-text-2)}
.signal-rr,.signal-result{font-size:10px;white-space:nowrap;color:var(--p-text-2)}
.signal-result.pos{color:var(--p-green)}
.signal-result.neg{color:var(--p-red)}
.signal-card.is-closed .signal-table td{color:var(--p-text-2)}
.signal-card.is-new{animation:signal-in 2.4s ease-out 1}
@keyframes signal-in{0%{box-shadow:0 0 0 2px var(--p-border-hot),0 0 26px var(--p-border-hot)}100%{box-shadow:none}}
.signal-locked{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;margin:6px 0 12px;padding:14px;border:1px dashed var(--p-border-2);border-radius:10px;background:var(--p-surface-2)}
.signal-locked .ic{width:18px;height:18px;color:var(--p-green-2)}
.signal-locked strong{font-size:12px;color:var(--p-strong)}
.signal-locked span{font-size:10.5px;line-height:1.5;color:var(--p-soft)}
.modal-copy .status-chip{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:4px;font-size:11px;vertical-align:1px}
.modal-copy .status-active{background:var(--p-green-bg);color:var(--p-green-2)}
.trade-detail small{display:block;margin-top:2px;font-size:10px;color:var(--p-soft)}
.trade-detail-grid.has-four{grid-template-columns:repeat(4,minmax(0,1fr))}
.signal-facts{display:flex;flex-wrap:wrap;gap:6px 18px;margin:-6px 0 16px;font-size:12px;color:var(--p-soft)}
.signal-facts b{font-weight:600;color:var(--p-strong)}
.signal-facts b.pos{color:var(--p-green)}
.signal-facts b.neg{color:var(--p-red)}
.signal-sizing{margin:0 0 16px;padding:14px;border:1px solid var(--p-border);border-radius:12px;background:var(--p-surface-2)}
.signal-sizing h3,.signal-updates-title{margin-bottom:10px;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--p-text-2)}
.signal-sizing .field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.sizing-result{margin-top:10px;font-size:12px;line-height:1.6;color:var(--p-text)}
.sizing-result b{color:var(--p-strong)}
.signal-updates{list-style:none;display:grid;gap:10px;margin:0 0 16px;padding:0 0 0 14px;border-left:2px solid var(--p-border-2)}
.signal-updates li{display:grid;gap:2px;font-size:12px;color:var(--p-text)}
.signal-updates time{font-size:10px;color:var(--p-soft)}
.signal-updates b{font-weight:600;color:var(--p-strong)}
.signal-updates .update-tp_hit b{color:var(--p-green)}
.signal-updates .update-sl_hit b{color:var(--p-red)}
@media(max-width:540px){.trade-detail-grid.has-four{grid-template-columns:repeat(2,minmax(0,1fr))}.signal-sizing .field-grid{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ members: messages, auth forms, account page
   Token colours only, so light mode follows without regenerating phase1-light.css. */
.flash-list{display:grid;gap:8px;margin:18px 0 0}
.flash{margin:18px 0 0;padding:11px 14px;border:1px solid var(--p-border);border-radius:10px;background:var(--p-surface-2);font-size:12.5px;line-height:1.6;color:var(--p-text)}
.flash-list .flash{margin:0}
.flash-success{border-color:var(--p-green-line);background:var(--p-green-bg);color:var(--p-green-2)}
.flash-error,.flash-warning{border-color:var(--p-red-line);background:var(--p-red-bg);color:var(--p-red)}
.field-help{display:block;font-size:10.5px;font-weight:400;line-height:1.5;color:var(--p-soft)}
.field-help ul{margin:4px 0 0;padding-left:16px}
.field-error{display:block;font-size:11px;font-weight:500;color:var(--p-red)}
.form-error{margin:0;padding:10px 12px;border-radius:9px;background:var(--p-red-bg);font-size:12px;color:var(--p-red)}
.form-field.has-error input{border-color:var(--p-red-line)}
.auth-form .check{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.5;color:var(--p-text-2)}
.auth-narrow{max-width:560px}
.account-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;align-items:start}
.account-side{display:grid;gap:18px}
.account-card{padding:22px}
.account-card h2{margin:6px 0 8px;font-size:20px;color:var(--p-strong)}
.account-card p{margin-top:10px;font-size:12.5px;line-height:1.7;color:var(--p-text-2)}
.account-card .btn-row{margin-top:16px}
.plan-state{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:12px;font-size:11px;background:var(--p-surface-3);color:var(--p-text-2)}
.plan-state.is-on{background:var(--p-green-bg);color:var(--p-green-2)}
.plan-state.is-off{background:var(--p-red-bg);color:var(--p-red)}
.account-links{display:grid;gap:6px;margin-top:18px;font-size:12.5px}
.account-links a{color:var(--p-green-2)}
.inline-form{display:inline-flex}
@media(max-width:780px){.account-grid{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ insights: article pages and glossary entries */
.article-page{padding:26px 0 36px}
.article-page .breadcrumb{margin-bottom:14px}
.glossary-intro{margin-bottom:12px;font-size:12.5px;color:var(--p-text-2)}
.term dt a{color:var(--p-strong)}
.term dt a:hover{color:var(--p-green-2)}
.term-nav{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:22px;padding-top:16px;border-top:1px solid var(--p-border);font-size:12.5px}
.term-nav a{color:var(--p-green-2)}

/* ------------------------------------------------------------------ academy, rendered on the server */
.lesson-panel .lesson-title{font:700 24px/1.25 Arial,sans-serif;color:var(--heading);letter-spacing:-.5px;margin:4px 0 14px}
.course-save-note{display:flex;gap:8px;align-items:flex-start;flex:0 1 430px;font-size:12px;line-height:1.6;color:var(--muted);margin:0}
.course-save-note .ic{width:16px;height:16px;color:var(--p-green);flex-shrink:0;margin-top:2px}
.name-row{display:flex;gap:8px;margin-top:6px}
.name-row input{flex:1;min-width:0}
.name-row .modal-secondary{margin:0;flex-shrink:0}
.quiz-opt:has(input:disabled){cursor:default}
.quiz-explain{font-size:12px;line-height:1.6;margin:8px 0 0;padding:9px 12px;border-radius:10px;background:var(--p-red-bg);border:1px solid var(--p-red-line);color:var(--ink)}
.quiz-explain.is-right{background:var(--p-green-bg);border-color:var(--p-green-line)}
.cert-list{margin-top:22px;padding-top:18px;border-top:1px solid var(--p-border)}
.cert-list h3{font-size:13px;margin:0 0 10px;color:var(--ink)}
.cert-list ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cert-list li{display:flex;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;font-size:12.5px}
.account-progress{max-width:none;margin:0 0 6px}
.cert-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:18px 0 20px}
.cert-facts div{padding:12px 14px;border-radius:12px;background:var(--p-surface-2);border:1px solid var(--p-border)}
.cert-facts dt{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cert-facts dd{margin:4px 0 0;font-size:14px;font-weight:600;color:var(--p-strong);overflow-wrap:anywhere}
.cert-stage-wide{max-width:none}
.cert-foot-r.has-qr{display:flex;align-items:flex-end;gap:1.6cqw}
.cert-qr{background:#fff;padding:.5cqw;border-radius:.6cqw;line-height:0}
.cert-qr svg{width:8cqw;height:8cqw;display:block}
.verify-form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin:16px 0}
.verify-form .form-field{flex:1 1 240px}
.verify-form .modal-primary{margin:0}

/* ------------------------------------------------------------------ 3D hero (static/js/hero3d.js) */
/* The canvas sits exactly over the hero image and fades in once its first frame is drawn. */
.hero-visual .hero3d-canvas{position:absolute;display:block;pointer-events:none;opacity:0;transition:opacity .9s ease;z-index:1}
/* Soften the left and top edges, where the candles and orbit rings run out of the frame. */
.hero-visual .hero3d-canvas{-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%),linear-gradient(180deg,transparent,#000 9%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 10%),linear-gradient(180deg,transparent,#000 9%);mask-composite:intersect}
.hero-visual.is-3d .hero3d-canvas{opacity:1}
.hero-visual.is-3d img{opacity:0;transition:opacity .9s ease}
/* Buttons to turn the globe, centred under it; hero3d-scene.js places them. */
.hero-visual .hero3d-controls{position:absolute;z-index:2;display:flex;align-items:center;gap:2px;padding:4px;border-radius:999px;background:rgba(4,14,24,.62);border:1px solid rgba(53,212,255,.28);box-shadow:0 8px 24px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transform:translate(-50%,calc(-100% + var(--rise,0px)));opacity:0;pointer-events:none}
.hero-visual.is-3d .hero3d-controls{opacity:1;pointer-events:auto}
.hero3d-controls button{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:transparent;color:#bfe9ff;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;transition:background .2s,color .2s}
.hero3d-controls button:hover,.hero3d-controls button.is-held{background:rgba(53,212,255,.16);color:#fff}
.hero3d-controls button:focus-visible{outline:2px solid #35d4ff;outline-offset:1px}
.hero3d-controls svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hero3d-controls .hero3d-divider{width:1px;height:18px;margin:0 3px;background:rgba(53,212,255,.25)}
[data-theme="light"] .hero-visual .hero3d-controls{background:rgba(255,255,255,.82);border-color:rgba(11,59,114,.18);box-shadow:0 8px 22px rgba(11,59,114,.14)}
[data-theme="light"] .hero3d-controls button{color:#0b3b72}
[data-theme="light"] .hero3d-controls button:hover,[data-theme="light"] .hero3d-controls button.is-held{background:rgba(11,59,114,.1);color:#062a52}
@media (max-width:780px){.hero3d-controls button{width:32px;height:32px}}
/* 📱 pressed: the arrows turn the handset instead of the globe. */
.hero3d-controls button[aria-pressed="true"]{background:rgba(53,212,255,.26);color:#fff;box-shadow:inset 0 0 0 1px rgba(53,212,255,.6)}
[data-theme="light"] .hero3d-controls button[aria-pressed="true"]{background:rgba(11,59,114,.14);color:#062a52;box-shadow:inset 0 0 0 1px rgba(11,59,114,.4)}

/* ------------------------------------------------------------------ Header (static/js/core.js) */
/* The pages are long, so the header follows them down, shrinking into a blurred
   bar with the reading progress along its edge. */
html{scroll-padding-top:96px}
.site-header{position:sticky;top:0;z-index:40;transition:height .25s ease,background-color .25s ease,box-shadow .25s ease,border-color .25s ease}
.site-header .brand{transition:font-size .25s ease}
.site-header .brand-symbol{transition:width .25s ease,height .25s ease}
.site-header.is-stuck{height:64px;background:#040d13e8;border-bottom-color:#173a46;box-shadow:0 14px 34px #00000059;-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}
.site-header.is-stuck .brand{font-size:23px}
.site-header.is-stuck .brand-symbol{width:38px;height:44px}
:root:not([data-theme="dark"]) .site-header.is-stuck{background:#f7feffe6;border-bottom-color:#dceaf4;box-shadow:0 12px 30px #1c5e8a1f}
.scroll-progress{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--gradient);opacity:0;transition:opacity .25s ease;pointer-events:none}
.site-header.is-stuck .scroll-progress{opacity:.95}

/* Nav: bigger type, and a pill under the pointer. */
.site-header .main-nav{gap:2px}
.site-header .nav-link{font-size:11.5px;letter-spacing:.2px;padding:9px 11px;border-radius:999px;transition:color .2s ease,background-color .2s ease}
.site-header .nav-link:after{left:11px;right:11px;bottom:4px}
.site-header .nav-link:hover{background:#ffffff12}
.site-header .nav-link.active{background:#33ed981c}
:root:not([data-theme="dark"]) .site-header .nav-link:hover{background:#0b3b7210}
:root:not([data-theme="dark"]) .site-header .nav-link.active{background:#18c7c714}
.site-header .nav-link:focus-visible{outline:2px solid #35d4ff;outline-offset:2px}
/* Compact links up to 1260px: above the 1190px layout step the header gains padding, and signed in the account button is wider. */
@media(max-width:1260px){.site-header .nav-link{font-size:10.5px;padding:8px 8px}.site-header .main-nav{gap:1px}}
@media(max-width:990px){.site-header .nav-link{font-size:9.5px;padding:8px 6px}}

/* Phones: the menu slides out of the header over a dimmed page. */
.nav-link-account{display:none}
.nav-backdrop{position:fixed;inset:0;z-index:35;background:#02070ba8;opacity:0;pointer-events:none;transition:opacity .22s ease;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
body.has-menu .nav-backdrop{opacity:1;pointer-events:auto}
:root:not([data-theme="dark"]) .nav-backdrop{background:#0b3b7247}
@media(max-width:780px){
  body.has-menu{overflow:hidden}
  .site-header.is-stuck{height:62px}
  .site-header.is-stuck .brand{font-size:23px}
  .site-header.is-stuck .brand-symbol{width:36px;height:41px}
  .site-header .main-nav{display:grid;top:100%;padding:14px 20px 18px;gap:4px 12px;border-radius:0 0 20px 20px;opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .22s ease,transform .22s ease,visibility .22s;box-shadow:0 18px 34px #00000052}
  .site-header .main-nav.is-open{opacity:1;visibility:visible;transform:none}
  .site-header .nav-link{font-size:13px;padding:11px 12px;text-align:left}
  .site-header .nav-link:after{left:12px}
  .nav-link-account{display:flex;align-items:center;justify-content:center;grid-column:1/-1;margin-top:8px;border:1px solid #2a4f5c;border-radius:999px;font-size:12px;text-align:center}
  .menu-toggle span{transition:transform .25s ease,opacity .18s ease}
  .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
  :root:not([data-theme="dark"]) .nav-link-account{border-color:#cfe1ee}
}
/* Tablets and small laptops: eleven links don't fit beside the logo and the buttons (the page scrolled
   sideways, and Log in had nowhere to go), so the phone's menu button takes over up to 1160px (signed in, the
   wider account button needs that much more room), with
   Log in back beside Get started. The submenus open in place inside the menu, as on a phone. */
@media(min-width:781px) and (max-width:1160px){
  body.has-menu{overflow:hidden}
  .site-header{justify-content:space-between}
  .header-actions{margin-left:auto;margin-right:8px}
  .header-actions .button-login{display:inline-flex}
  .menu-toggle{display:flex;order:4;width:27px;height:30px;padding:6px 0;border:0;background:none;flex-direction:column;justify-content:space-between;cursor:pointer}
  .menu-toggle span{height:2px;width:23px;border-radius:3px;background:#52686e;transition:transform .25s ease,opacity .18s ease}
  :where([data-theme="dark"]) .menu-toggle span{background:#83cbb2}
  .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
  .site-header .main-nav{position:absolute;top:100%;left:0;right:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:4px 14px;padding:16px 30px 20px;white-space:normal;background:#fffefb;border-top:1px solid #e6efeb;border-radius:0 0 20px 20px;box-shadow:0 18px 34px #00000052;max-height:calc(100dvh - 70px);overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .22s ease,transform .22s ease,visibility .22s}
  :where([data-theme="dark"]) .site-header .main-nav{background:#07161f;border-color:#17343b}
  .site-header .main-nav.is-open{opacity:1;visibility:visible;transform:none}
  .site-header .nav-link{font-size:13px;padding:11px 12px;text-align:left}
  .site-header .nav-link:after{left:12px;right:auto;width:30px}
  .site-header .nav-group{flex-wrap:wrap;width:100%}
  .site-header .nav-group>.nav-link{flex:1}
  .site-header .nav-disclosure{min-width:44px;min-height:44px}
  .site-header .nav-submenu{position:static;flex-basis:100%;width:100%;box-shadow:none;margin:0 0 8px}
}

/* ------------------------------------------------------------------ Live prices on the signal cards */
/* Drawn by static/js/sections.js from /api/prices/; a market without a feed has none. */
.signal-live{display:flex;align-items:center;gap:8px;margin:2px 0 8px}
.signal-spark{flex:1 1 auto;min-width:0;height:34px;overflow:visible}
.signal-live-price{font-size:12.5px;font-weight:700;color:#eaf6fb;font-variant-numeric:tabular-nums;white-space:nowrap}
.signal-live-move{font-size:10px;font-weight:600;color:#8aa1ad;white-space:nowrap}
.signal-live-move.positive{color:#33ed98}
.signal-live-move.negative{color:#ff5a69}
:root:not([data-theme="dark"]) .signal-live-price{color:#0f2e3d}
:root:not([data-theme="dark"]) .signal-live-move{color:#5c7488}
@media(max-width:780px){.signal-live{gap:6px}.signal-spark{height:30px}.signal-live-price{font-size:11.5px}}
.signal-live.is-waiting .signal-live-price:before{content:"Live price…";font-weight:500;color:#5f7a8c}

/* Larger 3D hero: real layout space for a big globe and handset. */
@media(min-width:781px){
 .hero:has([data-hero3d]){min-height:560px}
 /* The scene reaches across the hero behind the words, so they sit above it. */
 .hero:has([data-hero3d]) .hero-copy{position:relative;z-index:2}
 .hero-visual[data-hero3d]{width:52%;right:-12px}
 .hero-visual[data-hero3d] img{width:112%;height:auto;max-height:560px}
}
/* Tablets and small laptops: the globe takes half the width, so the copy wraps before it reaches it. */
@media(min-width:781px) and (max-width:990px){
 .hero:has([data-hero3d]) .hero-copy{width:50%}
}
@media(min-width:991px) and (max-width:1120px){
 .hero:has([data-hero3d]) .hero-copy{width:48%}
}
/* Below 1180px the page's side padding is under the 12px nudge plus the picture's overhang, so the
   artwork (and the canvas laid over it) ran a few pixels off the screen: keep it inside. */
@media(min-width:781px) and (max-width:1179px){
 .hero-visual[data-hero3d]{right:0}
 .hero-visual[data-hero3d] img{width:106%}
}
@media(max-width:780px){
 .hero:has([data-hero3d]){flex-direction:column;align-items:stretch}
 .hero:has([data-hero3d]) .hero-copy{width:100%}
 /* Room under the artwork for the turn buttons, which the handset leaves no space for inside it. */
 .hero-visual[data-hero3d]{position:relative;top:auto;right:auto;bottom:auto;width:100vw;height:auto;min-height:340px;margin:18px calc(50% - 50vw) 72px}
 .hero-visual[data-hero3d] img{width:100%;max-width:100%;height:auto;max-height:none;aspect-ratio:1040/1250;object-fit:contain}
 /* Narrower soft edges on a phone, where the big handset reaches close to the top (EDGE_FADE in scene.js). */
 .hero-visual[data-hero3d] .hero3d-canvas{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%),linear-gradient(180deg,transparent,#000 5%);mask-image:linear-gradient(90deg,transparent,#000 8%),linear-gradient(180deg,transparent,#000 5%)}
 /* Without the 3D scene (reduced motion, data saver…) the still image keeps its own shape and needs no room for buttons. */
 .hero-visual[data-hero3d][data-hero3d-state="fallback"],.hero-visual[data-hero3d][data-hero3d-state="error"]{margin-bottom:28px}
 .hero-visual[data-hero3d][data-hero3d-state="fallback"] img,.hero-visual[data-hero3d][data-hero3d-state="error"] img{aspect-ratio:1040/904}
}

/* Full screen (the expand button in the 3D hero): the scene fills the display. */
html.hero3d-fullscreen,html.hero3d-fullscreen body{overflow:hidden}
.hero-visual.is-fullscreen{position:fixed!important;inset:0!important;top:0!important;right:0!important;width:auto!important;height:auto!important;min-height:0!important;margin:0!important;z-index:9999;background:radial-gradient(ellipse at 58% 46%,#0b2a3f 0,#030a10 64%)}
:root:not([data-theme="dark"]) .hero-visual.is-fullscreen{background:radial-gradient(ellipse at 58% 46%,#ffffff 0,#e3f2fa 72%)}
.hero-visual.is-fullscreen img{visibility:hidden}
.hero-visual.is-fullscreen .hero3d-canvas{-webkit-mask-image:none!important;mask-image:none!important}
.hero-visual .hero3d-close{position:absolute;top:16px;right:16px;z-index:3;display:none;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid rgba(53,212,255,.35);background:rgba(4,14,24,.72);color:#eaf6fb;cursor:pointer}
.hero-visual.is-fullscreen .hero3d-close{display:grid}
.hero3d-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.hero3d-close:focus-visible{outline:2px solid #35d4ff;outline-offset:2px}
:root:not([data-theme="dark"]) .hero-visual .hero3d-close{background:rgba(255,255,255,.88);color:#0b3b72;border-color:rgba(11,59,114,.2)}

/* ------------------------------------------------------------------ The home headline types itself out (static/js/hero-type.js) */
/* Hidden before the first paint until the script takes it over — and shown anyway after a moment if it never does. */
html.hero-typing body[data-page="home"] .hero h1{visibility:hidden;animation:hero-type-failsafe 0s 2.5s forwards}
@keyframes hero-type-failsafe{to{visibility:visible}}
.hero h1.is-typing .type-char{opacity:0}
.hero h1 .type-char.is-typed{opacity:1}
/* The caret takes no room, so the letters never shift as it moves. */
.type-caret{display:inline-block;position:relative;width:0;height:1em;vertical-align:baseline}
.type-caret::after{content:"";position:absolute;left:.05em;bottom:-.05em;width:.075em;height:.9em;border-radius:2px;background:#42e79a;box-shadow:0 0 12px #42e79a88;animation:type-caret-blink 1s steps(1) infinite}
.type-caret.is-done::after{opacity:0;animation:none;transition:opacity .4s ease}
@keyframes type-caret-blink{50%{opacity:0}}
:root:not([data-theme="dark"]) .type-caret::after{background:#18a9b0;box-shadow:none}
@media (prefers-reduced-motion:reduce){html.hero-typing body[data-page="home"] .hero h1{visibility:visible;animation:none}}

/* ------------------------------------------------------------------ Phones: a starry sky behind the headline */
/* On a phone the words sit above the 3D scene, not over it, so a light CSS sky carries the stars up behind them:
   two layers twinkling out of step, and now and then a shooting star. Dark theme only; still for reduced motion. */
@media (max-width:780px){
 :where([data-theme="dark"]) .hero:has([data-hero3d])::before,
 :where([data-theme="dark"]) .hero:has([data-hero3d])::after{content:"";position:absolute;left:-20px;right:-20px;top:-10px;height:340px;z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
 :where([data-theme="dark"]) .hero:has([data-hero3d])::before{background-image:radial-gradient(2.3px 2.3px at 33.1% 16.9%,#e3f2ffff 50%,transparent 51%),radial-gradient(2.3px 2.3px at 80.8% 11.7%,#e3f2ffff 50%,transparent 51%),radial-gradient(2.0px 2.0px at 22.6% 10.9%,#e3f2ffff 50%,transparent 51%),radial-gradient(2.6px 2.6px at 10.7% 42.1%,#e3f2ffff 50%,transparent 51%),radial-gradient(2.3px 2.3px at 93.0% 61.0%,#e3f2ffff 50%,transparent 51%),radial-gradient(2.7px 2.7px at 57.4% 39.5%,#e3f2ffff 50%,transparent 51%),radial-gradient(2.0px 2.0px at 55.4% 15.3%,#e3f2ffff 50%,transparent 51%),radial-gradient(2.6px 2.6px at 13.3% 31.4%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.9px 1.9px at 11.9% 55.6%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.6px 1.6px at 54.6% 8.8%,#e3f2ffff 50%,transparent 51%),radial-gradient(2.4px 2.4px at 49.7% 51.9%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.9px 1.9px at 58.2% 44.7%,#e3f2ffff 50%,transparent 51%),radial-gradient(2.3px 2.3px at 69.1% 25.5%,#e3f2ffff 50%,transparent 51%),radial-gradient(2.2px 2.2px at 49.5% 34.6%,#e3f2ffff 50%,transparent 51%),radial-gradient(2.0px 2.0px at 96.1% 13.9%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.6px 1.6px at 16.6% 48.0%,#e3f2ffff 50%,transparent 51%),radial-gradient(2.4px 2.4px at 9.5% 54.3%,#e3f2ffff 50%,transparent 51%),radial-gradient(2.2px 2.2px at 34.7% 35.2%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.9px 1.9px at 8.6% 11.6%,#e3f2ffff 50%,transparent 51%),radial-gradient(2.4px 2.4px at 65.8% 8.6%,#e3f2ffff 50%,transparent 51%),radial-gradient(2.2px 2.2px at 57.5% 65.7%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.6px 1.6px at 39.0% 64.5%,#e3f2ffff 50%,transparent 51%),radial-gradient(2.2px 2.2px at 36.1% 59.2%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.9px 1.9px at 75.8% 14.9%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.8px 1.8px at 90.0% 48.7%,#e3f2ffff 50%,transparent 51%),radial-gradient(2.6px 2.6px at 54.7% 84.3%,#e3f2ffff 50%,transparent 51%);animation:hero-sky-twinkle 1.9s ease-in-out infinite alternate}
 :where([data-theme="dark"]) .hero:has([data-hero3d])::after{background-image:radial-gradient(1.4px 1.4px at 28.7% 41.2%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 93.9% 16.9%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.6px 1.6px at 65.2% 4.1%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 27.2% 3.4%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 60.5% 32.3%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.6px 1.6px at 93.2% 63.3%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.6px 1.6px at 88.4% 74.8%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 39.7% 39.7%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.8px 1.8px at 40.4% 20.5%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.1px 1.1px at 17.6% 34.3%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.8px 1.8px at 56.4% 52.4%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 4.4% 83.4%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 62.9% 90.9%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.8px 1.8px at 13.8% 81.1%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 48.1% 31.7%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.6px 1.6px at 34.9% 27.4%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.8px 1.8px at 51.6% 21.9%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.1px 1.1px at 16.1% 53.0%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.1px 1.1px at 30.6% 62.1%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 51.8% 86.6%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 53.1% 74.7%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.6px 1.6px at 60.9% 75.5%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.6px 1.6px at 79.4% 78.3%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.6px 1.6px at 21.2% 48.3%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 77.9% 46.4%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.8px 1.8px at 93.8% 44.1%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 93.7% 36.5%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 47.1% 34.1%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 82.7% 47.1%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.8px 1.8px at 10.1% 63.8%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 74.0% 47.0%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.8px 1.8px at 33.9% 76.7%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.1px 1.1px at 46.5% 71.4%,#e3f2ffff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 18.3% 14.7%,#e3f2ffff 50%,transparent 51%);animation:hero-sky-twinkle 2.7s ease-in-out -1.3s infinite alternate}
 .hero:has([data-hero3d]) .hero-copy{position:relative;z-index:2}
 :where([data-theme="dark"]) .hero:has([data-hero3d]) .hero-copy::before{content:"";position:absolute;z-index:-1;top:40px;left:8%;width:90px;height:1.5px;border-radius:2px;pointer-events:none;background:linear-gradient(90deg,transparent,#d6ebff);box-shadow:0 0 6px #9fdcff;opacity:0;transform:rotate(18deg);animation:hero-sky-meteor 9s ease-in 2.5s infinite}
}
@keyframes hero-sky-twinkle{0%{opacity:.08}55%{opacity:.5}100%{opacity:1}}
@keyframes hero-sky-meteor{0%{opacity:0;transform:translate(0,0) rotate(18deg)}2%{opacity:1}9%{opacity:0;transform:translate(170px,55px) rotate(18deg)}100%{opacity:0;transform:translate(170px,55px) rotate(18deg)}}
@media (max-width:780px) and (prefers-reduced-motion:reduce){
 .hero:has([data-hero3d])::before,.hero:has([data-hero3d])::after,.hero:has([data-hero3d]) .hero-copy::before{animation:none}
}

/* ------------------------------------------------------------------ Light theme: daylight behind the hero */
/* No stars on a white page — a soft, slowly drifting wash in the brand's colours gives the same depth. */
:root:not([data-theme="dark"]) .hero:has([data-hero3d])::before,
:root:not([data-theme="dark"]) .hero:has([data-hero3d])::after{content:"";position:absolute;inset:-40px -30px auto;height:112%;z-index:0;pointer-events:none;border-radius:50%}
:root:not([data-theme="dark"]) .hero:has([data-hero3d])::before{background:radial-gradient(42% 58% at 26% 40%,rgba(24,199,199,.20),transparent 70%);animation:hero-daylight-a 19s ease-in-out infinite alternate}
:root:not([data-theme="dark"]) .hero:has([data-hero3d])::after{background:radial-gradient(38% 54% at 46% 82%,rgba(189,72,185,.14),transparent 72%);animation:hero-daylight-b 25s ease-in-out infinite alternate}
@keyframes hero-daylight-a{from{transform:translate3d(-14px,6px,0) scale(1)}to{transform:translate3d(16px,-8px,0) scale(1.07)}}
@keyframes hero-daylight-b{from{transform:translate3d(10px,-6px,0) scale(1.05)}to{transform:translate3d(-12px,8px,0) scale(1)}}
@media (prefers-reduced-motion:reduce){
 :root:not([data-theme="dark"]) .hero:has([data-hero3d])::before,
 :root:not([data-theme="dark"]) .hero:has([data-hero3d])::after{animation:none}
}

/* ------------------------------------------------------------------ Hero: no still globe while the live one loads */
/* The still image stands in only when the 3D scene can't run (reduced motion, no WebGL, no JavaScript, an
   error); while the scene loads, the hero keeps just its glow and the live globe grows into it. */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
 .hero-visual[data-hero3d]:not([data-hero3d-state="fallback"]):not([data-hero3d-state="error"]) img{opacity:0}
}
.hero-visual[data-hero3d][data-hero3d-state="fallback"] img,.hero-visual[data-hero3d][data-hero3d-state="error"] img{transition:opacity .6s ease}