/* Midas landing — v4 style (25.09), local prototype. Dark theme only — no light theme,
   no prefers-color-scheme, no data-theme switch. All colors are CSS variables in :root. */

:root{
  --bg:#07090C;
  --surface:#0E1116;
  --surface-2:#141922;
  --line:rgba(255,255,255,.07);
  --line-strong:rgba(255,255,255,.13);
  --gold:#E0B25A;
  --gold-deep:#9C7A33;
  --gold-glow:rgba(224,178,90,.30);
  --text:#F2F0EA;
  --text-dim:#9097A3;
  --text-faint:#767E8A; /* was #5E6470 (3.18:1 on --surface, fails WCAG AA); this passes 4.5:1+ on both --surface and --bg (26.09 mobile audit) */
  --green:#4FC586;
  --red:#E5605A;
  --lock:#A99CF5;
  --radius:16px;
  --shadow:0 24px 60px rgba(0,0,0,.5);
  --maxw:1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:clip;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Onest',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  overflow-x:clip;
  position:relative;
}
body::before{
  content:"";position:absolute;top:0;left:0;width:900px;height:700px;
  background:radial-gradient(900px 700px at 0% 0%, rgba(224,178,90,.30) 0%, rgba(224,178,90,.12) 35%, rgba(224,178,90,0) 70%);
  pointer-events:none;z-index:0;
}
h1,h2,h3,.serif{
  font-family:'Onest',system-ui,sans-serif;
  font-weight:600;
  letter-spacing:-0.02em;
  margin:0;
}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;}
a{color:inherit;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px;}
img,svg{display:block;max-width:100%;}
.icon-svg{width:18px;height:18px;flex-shrink:0;}
button{font-family:inherit;}

@media (prefers-reduced-motion: reduce){
  *{transition-duration:0s !important;animation-duration:0s !important;}
}

/* ---------- Nav pill ---------- */
header.nav{
  position:sticky;top:max(12px, env(safe-area-inset-top));z-index:80;
  padding:0 16px;
}
.nav-inner{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;
  max-width:var(--maxw);margin:0 auto;
  padding:9px 10px 9px 18px;
  background:color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line-strong);
  border-radius:999px;
  box-shadow:0 16px 40px -16px rgba(0,0,0,.6);
}
.brand{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;text-decoration:none;color:inherit;}
.brand-mark{
  width:26px;height:26px;border-radius:8px;flex-shrink:0;
  background:linear-gradient(180deg,#ECC676,#D4A548);
  display:flex;align-items:center;justify-content:center;
  color:#1A1406;font-family:'JetBrains Mono';font-weight:700;font-size:13px;
  box-shadow:0 0 14px var(--gold-glow);
}
.nav-links{justify-self:center;display:flex;gap:26px;font-size:14px;color:var(--text-dim);}
.nav-links a{text-decoration:none;transition:color .15s;}
.nav-links a:hover, .nav-links a:focus-visible{color:var(--text);}
@media(max-width:860px){
  .nav-links{display:none;}
}
@media(max-width:420px){
  .nav-right .btn-sm{padding:0 12px;font-size:12.5px;}
}
.nav-right{display:flex;align-items:center;gap:10px;justify-self:end;}
.lang-switch{position:relative;}
.lang-switch-btn{
  display:flex;align-items:center;gap:6px;
  border:1px solid var(--line-strong);border-radius:999px;
  min-height:44px;padding:0 12px 0 14px;font-size:12.5px;font-weight:600;color:var(--text-dim);
  background:rgba(255,255,255,.02);cursor:pointer;font-family:inherit;
  transition:color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease;
}
.lang-switch-btn:hover{border-color:var(--gold-deep);color:var(--text);background:rgba(224,178,90,.07);transform:translateY(-1px);}
.lang-switch-btn:active{transform:translateY(0);}
.lang-switch-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.lang-switch-btn svg{width:13px;height:13px;flex-shrink:0;}
.lang-switch-btn .lang-chevron{width:9px;height:9px;transition:transform .15s ease;}
.lang-switch-btn[aria-expanded="true"] .lang-chevron{transform:rotate(180deg);}
.lang-menu[hidden]{display:none;}
.lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:90;
  display:flex;flex-direction:column;gap:2px;
  min-width:104px;padding:6px;
  background:var(--surface-2);border:1px solid var(--line-strong);border-radius:12px;
  box-shadow:0 16px 40px -16px rgba(0,0,0,.7);
}
.lang-opt{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  border:none;border-radius:8px;background:transparent;color:var(--text-dim);
  font:inherit;font-size:13px;font-weight:600;text-align:left;
  padding:7px 9px;min-height:40px;cursor:pointer;
  transition:color .15s ease, background .15s ease;
}
.lang-opt:hover,.lang-opt:focus-visible{color:var(--text);background:rgba(224,178,90,.09);}
.lang-opt::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);opacity:0;flex-shrink:0;}
.lang-opt[aria-current="true"]{color:var(--text);}
.lang-opt[aria-current="true"]::after{opacity:1;}
@media(max-width:420px){
  .lang-switch-btn{padding:0 10px 0 12px;min-height:44px;}
  .lang-menu{right:-4px;min-width:96px;}
}

/* ---------- Mobile nav drawer (js/nav-menu.js) - replaces the hidden
   .nav-links on <=860px with a burger button that opens a full-width panel
   (same nav items + Buy CTA + a second .lang-switch instance, which
   js/i18n.js already drives generically via querySelectorAll(".lang-switch")
   - no i18n.js changes needed). Anchored off header.nav itself
   (position:sticky, so it is a positioning context) so it spans the full
   pill width, same pattern as .lang-menu off .lang-switch. ---------- */
.nav-burger{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;flex-shrink:0;border-radius:10px;
  border:1px solid var(--line-strong);background:rgba(255,255,255,.02);
  color:var(--text-dim);cursor:pointer;transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.nav-burger:hover{border-color:var(--gold-deep);color:var(--text);background:rgba(224,178,90,.07);}
.nav-burger:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.nav-burger svg{width:20px;height:20px;}
.nav-burger .icon-close{display:none;}
.nav-burger[aria-expanded="true"] .icon-open{display:none;}
.nav-burger[aria-expanded="true"] .icon-close{display:block;}
@media(max-width:860px){
  .nav-burger{display:flex;order:-1;margin-right:2px;}
}
.nav-drawer{
  position:absolute;top:100%;left:16px;right:16px;z-index:90;margin-top:10px;
  display:flex;flex-direction:column;gap:2px;
  background:var(--surface-2);border:1px solid var(--line-strong);border-radius:16px;
  padding:10px;box-shadow:0 16px 40px -16px rgba(0,0,0,.7);
}
.nav-drawer[hidden]{display:none;}
.nav-drawer-link{
  display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:10px;
  text-decoration:none;color:var(--text-dim);font-size:15px;font-weight:500;
  transition:color .15s ease, background .15s ease;
}
.nav-drawer-link:hover,.nav-drawer-link:focus-visible{color:var(--text);background:rgba(255,255,255,.05);}
.nav-drawer-cta{justify-content:center;margin-top:6px;}
.nav-drawer-lang{margin-top:8px;padding-top:10px;border-top:1px solid var(--line);padding-left:2px;}
.nav-drawer .lang-switch{position:static;}
.nav-drawer .lang-switch-btn{width:100%;justify-content:center;}
.nav-drawer .lang-menu{left:0;right:0;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:0 20px;height:44px;border-radius:10px;font-size:15px;font-weight:600;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, filter .15s ease, border-color .15s ease;
  font-family:inherit;white-space:nowrap;
}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);filter:brightness(.96);}
.btn-primary{
  background:linear-gradient(180deg,#ECC676,#D4A548);color:#1A1406;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 8px 24px -8px rgba(224,178,90,.55);
}
.btn-primary:hover{filter:brightness(1.06);}
.btn-ghost{background:rgba(255,255,255,.03);border-color:var(--line-strong);color:var(--text);}
.btn-ghost:hover{border-color:var(--gold-deep);background:rgba(224,178,90,.06);}
.btn-ghost:disabled{opacity:.4;cursor:not-allowed;}
.btn-sm{padding:0 14px;height:44px;font-size:13px;border-radius:9px;}
.btn-lg{padding:0 32px;height:54px;font-size:16.5px;border-radius:12px;}
.btn svg{width:16px;height:16px;flex-shrink:0;}

section{padding:96px 0;}
@media(max-width:720px){section{padding:56px 0;}}

/* Section label pill (centered by default; hero chip is separate) */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--line-strong);
  background:var(--surface-2);
  padding:6px 14px;border-radius:999px;
}
.eyebrow.red{color:var(--red);border-color:rgba(229,96,90,.35);background:rgba(229,96,90,.08);}

.sec-head{max-width:640px;margin:0 auto 48px;text-align:center;}
.sec-head .eyebrow{margin-bottom:18px;}
.sec-head h2{font-size:44px;line-height:1.12;text-wrap:balance;}
@media(max-width:720px){.sec-head h2{font-size:30px;}}
.sec-head p{color:var(--text-dim);margin-top:14px;font-size:16px;max-width:60ch;margin-left:auto;margin-right:auto;}

/* ---------- HERO ---------- */
.hero{padding:52px 0 64px;position:relative;}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;position:relative;}
.hero-grid > *{min-width:0;}
@media(max-width:1000px){.hero-grid{grid-template-columns:1fr;}}

.chip{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--line-strong);background:rgba(255,255,255,.02);
  border-radius:999px;padding:6px 8px 6px 16px;font-size:13px;color:var(--text-dim);
  margin-bottom:22px;
}
.chip-tag{
  background:var(--surface-2);border:1px solid var(--line-strong);color:var(--gold);
  font-family:'JetBrains Mono';font-size:11px;font-weight:500;padding:4px 10px;
  border-radius:999px;letter-spacing:.04em;
}

.hero h1{font-size:60px;line-height:1.05;font-weight:600;letter-spacing:-0.025em;text-wrap:balance;}
@media(max-width:900px){.hero h1{font-size:40px;}}
@media(max-width:420px){.hero h1{font-size:34px;}}
.hero h1 .accent{
  background:linear-gradient(180deg,#fff, #9097A3);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p.lede{color:var(--text-dim);font-size:17px;margin-top:20px;max-width:520px;}
.hero-ctas{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;}
.hero-note{display:flex;align-items:center;gap:8px;margin-top:20px;font-size:13px;color:var(--text-faint);}
.hero-note .dot{width:6px;height:6px;border-radius:50%;background:var(--text-faint);flex-shrink:0;}

/* Hero bot window */
.hero-window-wrap{position:relative;}
.hero-window{
  position:relative;background:var(--surface);border:1px solid var(--line-strong);
  border-radius:20px;box-shadow:var(--shadow), 0 0 0 1px rgba(224,178,90,.05);
  overflow:hidden;
}
@media(min-width:1100px){
  .hero-window-wrap{margin-right:-72px;}
  .hero-window{mask-image:linear-gradient(to bottom, black 0%, black 62%, transparent 96%);
    -webkit-mask-image:linear-gradient(to bottom, black 0%, black 62%, transparent 96%);}
}
.hw-bar{
  display:flex;align-items:center;gap:14px;padding:12px 18px;
  background:var(--surface-2);border-bottom:1px solid var(--line);
}
.hw-dots{display:flex;gap:6px;}
.hw-dots span{width:8px;height:8px;border-radius:50%;background:var(--line-strong);}
.hw-title{font-family:'JetBrains Mono';font-size:12px;color:var(--text-faint);margin-left:auto;letter-spacing:.02em;}
.hw-body{padding:22px;display:flex;flex-direction:column;gap:18px;}

.hw-pnl .label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);}
.hw-pnl .value{font-family:'JetBrains Mono';font-size:38px;font-weight:600;color:var(--green);margin-top:6px;}
.hw-pnl .row{display:flex;justify-content:space-between;margin-top:14px;font-size:12.5px;color:var(--text-dim);border-top:1px solid var(--line);padding-top:12px;}
.hw-pnl .row b{color:var(--text);font-weight:600;font-family:'JetBrains Mono';}

.hw-tabs{display:flex;gap:6px;flex-wrap:wrap;}
.tab-pill{font-size:11.5px;padding:6px 12px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);color:var(--text-dim);}
.tab-pill.active{background:rgba(224,178,90,.14);border-color:rgba(224,178,90,.5);color:var(--gold);}

/* ---------- Hero window: live basket scene (scene 1) ---------- */
.hw-basket{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.hw-basket .label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);}
.hw-basket-value{
  font-family:'JetBrains Mono';font-size:34px;font-weight:600;margin-top:6px;
  color:var(--text-dim);transition:color .35s ease;
}
.hw-basket-value.is-neg{color:var(--red);}
.hw-basket-value.is-pos{color:var(--green);}
@media(max-width:420px){
  .hw-basket{flex-direction:column;}
}

.hw-chart{
  height:240px;border-radius:12px;background:#050607;border:1px solid var(--line);
  overflow:hidden;position:relative;min-width:0;
}
.hw-chart canvas{max-width:100%;}
@media(min-width:520px){.hw-chart{height:260px;}}

/* Loop restart: fade the chart and the order strip out, reset the scene
   while invisible, then fade back in — no hard jump. Duration is set
   inline by hero-scene.js. */
.hw-chart,.hw-orders{
  opacity:1;filter:blur(0);transform:scale(1);
  transition-property:opacity,filter,transform;transition-timing-function:ease;
}
.hw-chart.is-resetting,.hw-orders.is-resetting{opacity:0;filter:blur(3px);transform:scale(.98);}
@media(prefers-reduced-motion:reduce){
  .hw-chart,.hw-orders{transition:none !important;}
}

.hw-orders .label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);margin-bottom:10px;}
/* One compact row of all 11 cells — the previous 6-col/2-row layout put the
   biggest orders' green results in row 2, right where the hero window's
   bottom fade mask (min-width:1100px, above) hides them almost entirely. A
   single row keeps every cell above the fade line. */
.order-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;}
.order-cell{
  aspect-ratio:0.86;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono';font-size:8px;font-weight:600;color:var(--text-faint);
  transition:background .25s ease,border-color .25s ease,color .25s ease,transform .2s ease;
  padding:0 1px;overflow:hidden;
}
.order-cell.filled{background:rgba(224,178,90,.10);border-color:rgba(224,178,90,.35);color:var(--text-dim);}
.order-cell.result-pos{background:rgba(79,197,134,.18);border-color:rgba(79,197,134,.55);color:var(--green);}
.order-cell.result-neg{background:rgba(229,96,90,.18);border-color:rgba(229,96,90,.55);color:var(--red);}
.order-cell.just-filled{transform:scale(1.12);}
/* ≤480px: the previous 4x2 square-cell layout (aspect-ratio:1) made each
   cell ~70-80px tall — a compact 4x2 grid with a fixed row height reads much
   smaller while still leaving enough per-cell width for a result like
   "+$0.04" at 11px. */
@media(max-width:480px){
  .order-grid{grid-template-columns:repeat(4,1fr);gap:4px;}
  .order-cell{aspect-ratio:auto;height:38px;font-size:11px;padding:0 2px;}
}
@media(max-width:340px){.order-cell{height:34px;font-size:10px;}}

.hw-caption{margin-top:10px;font-size:11px;color:var(--text-faint);text-align:center;}

/* ---------- How it works / steps ---------- */
.steps-row{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);}
.step-col{padding:28px 24px 26px;border-left:1px solid var(--line);position:relative;}
.step-col:first-child{border-left:none;}
.step-col.active{background:linear-gradient(160deg, rgba(224,178,90,.08), transparent 55%);}
.step-num{font-family:'JetBrains Mono';font-size:12px;color:var(--gold);letter-spacing:.06em;margin-bottom:16px;}
.step-col h3{font-size:16.5px;font-weight:600;}
.step-col p{color:var(--text-dim);font-size:13.5px;margin-top:10px;}
.steps-track{position:relative;height:1px;background:var(--line);}
.steps-track .dot{position:absolute;top:50%;transform:translate(-50%,-50%);width:9px;height:9px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line-strong);}
.steps-track .dot.active{background:var(--gold);border-color:var(--gold);box-shadow:0 0 10px var(--gold-glow);}
@media(max-width:860px){
  .steps-row{grid-template-columns:1fr;border-top:none;gap:4px;}
  .step-col{border-left:2px solid var(--line);padding:0 0 26px 20px;}
  .step-col.active{background:none;border-left-color:var(--gold);}
  .steps-track{display:none;}
}

/* ---------- Feature grid (2x2) ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
@media(max-width:680px){.feat-grid{grid-template-columns:1fr;}}
.feat{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:26px 24px 26px 28px;position:relative;
}
.feat::before{content:"";position:absolute;left:0;top:24px;bottom:24px;width:2px;background:var(--line-strong);}
.feat .icon{
  width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#ECC676,#D4A548);margin-bottom:16px;color:#1A1406;
}
.feat .icon svg{width:19px;height:19px;stroke:#1A1406;}
.feat h3{font-size:16px;font-weight:600;}
.feat p{color:var(--text-dim);font-size:13.5px;margin-top:8px;}

/* ---------- Live panel demo wrapper ---------- */
.panel-real{
  background:var(--surface);border:1px solid var(--line-strong);border-radius:20px;
  overflow:hidden;box-shadow:var(--shadow), 0 0 0 1px rgba(224,178,90,.05);
}
.pr-flag{
  display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-faint);
  padding:10px 20px;background:var(--surface-2);border-bottom:1px solid var(--line);
}
.pr-flag .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex-shrink:0;}
.pr-controls{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 20px;border-bottom:1px solid var(--line);
}
.pr-controls-label{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-faint);flex-shrink:0;}
.pr-group{display:flex;gap:6px;flex-wrap:wrap;}
.pr-btn{
  background:var(--surface-2);border:1px solid var(--line);color:var(--text-dim);
  padding:7px 14px;min-height:32px;font-size:12.5px;font-weight:500;border-radius:999px;cursor:pointer;
  font-family:inherit;white-space:nowrap;transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.pr-btn:hover{color:var(--text);border-color:var(--gold-deep);}
.pr-btn.active{background:rgba(224,178,90,.14);border-color:rgba(224,178,90,.5);color:var(--gold);}
.pr-btn:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;}
/* padding:0 (was 20px) - js/panel-demo.js's fitScale() sizes #prStage against
   #prSplit's width minus a fixed 40px (its OWN 20px+20px padding, see that
   function's "pad" comment); #prViewport's own extra 20px/side padding here
   double-counted that inset, so the fit-to-width scale left the stage ~20px
   wider than this box's actual clipping edge - the scaled panel's right
   column (status badges, the last lot-size chip) was silently cut off on
   narrow modals (26.09 mobile audit). Zeroing it (panel-demo.js's
   calculations are untouched) makes the two agree exactly; .panel-real's
   own 20px border-radius/overflow:hidden still frames the whole card. */
.pr-viewport{overflow:hidden;background:#050607;padding:0;}
.pr-stage{position:relative;transform-origin:top left;}
.pr-stage button{font-family:inherit;}
.pr-reset{margin-left:auto;}
@media(max-width:560px){
  .pr-controls{gap:10px;}
  .pr-reset{margin-left:0;}
}

/* ---------- Platform ---------- */
.platform-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media(max-width:820px){.platform-grid{grid-template-columns:1fr;}}
.platform-card{
  display:flex;gap:16px;align-items:flex-start;padding:24px;border-radius:16px;
  border:1px solid var(--line);
  background:linear-gradient(160deg, rgba(224,178,90,.08), transparent 55%), var(--surface);
}
.platform-card .icon{
  width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:1px solid var(--line-strong);color:var(--gold);flex-shrink:0;
}
.platform-card .icon svg{width:19px;height:19px;}
.platform-card h3{font-size:15.5px;font-weight:600;}
.platform-card p{color:var(--text-dim);font-size:13.5px;margin-top:8px;}

/* ---------- Risk icon + callout (used inside the risk modal's "Risk & protection"
   tab — js/risk-modal.js; the #risk landing section that used to hold the same
   markup was removed and folded into that modal) ---------- */
.risk-icon{
  width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--ic) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--ic) 40%, transparent);
  color:var(--ic);flex-shrink:0;
}
.risk-icon svg{width:19px;height:19px;}
.placeholder{
  color:var(--gold-deep);font-family:'JetBrains Mono';font-size:12px;
  border:1px dashed rgba(224,178,90,.4);border-radius:6px;padding:1px 6px;
}
.risk-callout{
  margin-top:28px;padding:22px 24px;border-radius:14px;
  background:rgba(229,96,90,.07);border:1px solid rgba(229,96,90,.3);
}
.risk-callout h4{font-size:14px;font-weight:700;color:var(--red);}
.risk-callout p{color:var(--text-dim);font-size:13.5px;margin-top:8px;}

/* ---------- Help cards (landing "getting started" + help hub) ---------- */
.help-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px;}
@media(max-width:900px){.help-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.help-grid{grid-template-columns:1fr;}}
.help-card{
  display:block;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:24px;transition:border-color .15s, transform .12s;
}
.help-card:hover{border-color:rgba(224,178,90,.45);transform:translateY(-2px);}
.help-card .num{font-family:'JetBrains Mono';color:var(--gold);font-size:12px;letter-spacing:.06em;}
.help-card h3{font-size:16.5px;font-weight:600;margin-top:10px;}
.help-card p{color:var(--text-dim);font-size:13.5px;margin-top:8px;}

/* ---------- Pricing ---------- */
.pricing-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:760px;margin:0 auto;}
@media(max-width:720px){.pricing-grid{grid-template-columns:1fr;}}
.price-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:28px;display:flex;flex-direction:column;}
.price-card.featured{
  border-color:rgba(224,178,90,.55);
  background:linear-gradient(160deg, rgba(224,178,90,.10), transparent 60%), var(--surface);
  box-shadow:0 0 0 1px rgba(224,178,90,.25), var(--shadow);position:relative;
}
.price-badge{
  position:absolute;top:-12px;left:24px;
  background:var(--gold);color:#1A1406;font-size:11px;font-weight:700;
  padding:4px 10px;border-radius:999px;
}
.price-card h3{font-size:16px;font-weight:600;}
.price-card .price{font-family:'JetBrains Mono';font-size:34px;font-weight:600;margin-top:14px;}
.price-card .price .period{font-family:'Onest';font-size:14px;font-weight:500;color:var(--text-dim);margin-left:6px;}
.price-card .desc{color:var(--text-dim);font-size:13px;margin-top:6px;}
.price-list{list-style:none;padding:0;margin:22px 0;font-size:13.5px;color:var(--text-dim);flex:1;}
.price-list li{padding:8px 0;border-top:1px solid var(--line);display:flex;gap:10px;align-items:flex-start;}
.price-list li:first-child{border-top:none;}
.check{color:var(--green);flex-shrink:0;margin-top:2px;}
.check svg{width:14px;height:14px;}
.pricing-note{text-align:center;color:var(--text-faint);font-size:13px;margin-top:28px;max-width:60ch;margin-left:auto;margin-right:auto;}
.pricing-stepslink{
  display:block;text-align:center;margin-top:22px;font-size:14px;font-weight:500;
  color:var(--gold);text-decoration:none;
}
.pricing-stepslink:hover{color:var(--gold-deep);text-decoration:underline;}

/* ---------- FAQ ---------- */
.faq-layout{display:grid;grid-template-columns:0.8fr 1.2fr;gap:56px;}
@media(max-width:820px){.faq-layout{grid-template-columns:1fr;gap:28px;}}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%;text-align:left;background:none;border:none;color:var(--text);
  font-size:15.5px;font-weight:500;padding:18px 0;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:14px;
}
.faq-q .chev{color:var(--text-faint);transition:transform .2s;font-size:18px;flex-shrink:0;}
.faq-item[open] .chev{transform:rotate(45deg);color:var(--gold);}
.faq-a{color:var(--text-dim);font-size:14px;padding-bottom:18px;line-height:1.6;}
details > summary{list-style:none;}
details > summary::-webkit-details-marker{display:none;}

/* ---------- Final CTA ---------- */
.cta-band{
  background:linear-gradient(160deg, rgba(224,178,90,.12), transparent 60%), var(--surface);
  border:1px solid var(--line-strong);border-radius:24px;padding:56px 40px;text-align:center;
  box-shadow:0 0 0 1px rgba(224,178,90,.06);
}
@media(max-width:560px){.cta-band{padding:36px 22px;}}
.cta-band h2{font-size:30px;text-wrap:balance;}
.cta-band p{color:var(--text-dim);margin-top:12px;max-width:480px;margin-left:auto;margin-right:auto;}
.cta-band .hero-ctas{justify-content:center;}

footer{border-top:1px solid var(--line);padding:48px 0 28px;color:var(--text-faint);font-size:13px;}
.footer-grid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center;}
.footer-links{display:flex;gap:4px 24px;flex-wrap:wrap;}
.footer-links a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px;}
.footer-links a:hover{color:var(--text-dim);}
.footer-disclaimer{
  margin-top:32px;padding-top:24px;border-top:1px solid var(--line);
  font-size:12px;color:var(--text-faint);line-height:1.7;
}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- Help center pages ---------- */
.help-hero{padding:56px 0 40px;}
.help-hero h1{font-size:38px;letter-spacing:-.02em;}
@media(max-width:560px){.help-hero h1{font-size:28px;}}
.help-hero p.lede{color:var(--text-dim);font-size:16px;margin-top:14px;max-width:640px;}
.help-crumb{font-size:13px;color:var(--text-faint);margin-bottom:14px;}
.help-crumb a{text-decoration:none;color:var(--text-dim);}
.help-crumb a:hover{color:var(--text);}
.help-body{max-width:760px;}
.help-body h2{font-size:24px;margin-top:52px;margin-bottom:16px;}
.help-body h2:first-child{margin-top:0;}
.help-body h3{font-size:16.5px;font-weight:600;margin-top:26px;margin-bottom:10px;}
.help-body p{color:var(--text-dim);font-size:15px;margin-top:10px;}
.help-body ul, .help-body ol{color:var(--text-dim);font-size:15px;padding-left:22px;margin-top:10px;}
.help-body li{margin-top:6px;}
.help-body li::marker{color:var(--text-faint);}
.help-body strong{color:var(--text);}
.help-body code{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.92em;
  background:var(--surface-2);border:1px solid var(--line);border-radius:6px;
  padding:2px 7px;color:var(--gold);
}

/* ---------- Copy-to-clipboard code chip (js/copy-code.js) - a <code>-styled
   <button> for referral/partner codes (help/open-account.html's "ztpwc")
   that a phone visitor needs to enter twice; tap once instead of
   long-press-to-select. ---------- */
.copy-code{
  display:inline-flex;align-items:center;gap:6px;vertical-align:baseline;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.92em;
  background:var(--surface-2);border:1px solid var(--line);border-radius:6px;
  padding:3px 8px;min-height:30px;color:var(--gold);cursor:pointer;font-weight:600;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.copy-code:hover{border-color:var(--gold-deep);background:rgba(224,178,90,.08);}
.copy-code:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.copy-code-icon{width:13px;height:13px;flex-shrink:0;}
.copy-code.is-copied{color:var(--green);border-color:rgba(79,197,134,.4);background:rgba(79,197,134,.08);}
.checklist{list-style:none;padding:0;margin-top:14px;display:flex;flex-direction:column;gap:10px;}
.checklist li{
  display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--text-dim);
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;
}
.checklist li::before{
  content:"";width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line-strong);
  flex-shrink:0;margin-top:2px;
}
.callout{
  margin-top:24px;padding:18px 20px;border-radius:14px;
  background:var(--surface-2);border:1px solid var(--line);font-size:14px;color:var(--text-dim);
}
.callout.warn{background:rgba(229,96,90,.07);border-color:rgba(229,96,90,.3);}
.callout.warn strong{color:var(--red);}
.callout.info{background:rgba(224,178,90,.08);border-color:rgba(224,178,90,.3);}
.callout.info strong{color:var(--gold);}
.kv-table{width:100%;border-collapse:collapse;margin-top:14px;font-size:13.5px;}
.kv-table th, .kv-table td{
  text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);color:var(--text-dim);
}
.kv-table th{color:var(--text-faint);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;}
.kv-table td:first-child, .kv-table th:first-child{color:var(--text);}
.help-toc{
  display:flex;flex-wrap:wrap;gap:8px 18px;margin:28px 0 0;padding:16px 20px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:12px;font-size:13px;
}
.help-toc a{text-decoration:none;color:var(--text-dim);}
.help-toc a:hover{color:var(--gold);}
.help-nextprev{
  display:flex;justify-content:space-between;gap:16px;margin-top:56px;padding-top:24px;
  border-top:1px solid var(--line);
}
.help-nextprev a{text-decoration:none;font-size:14px;color:var(--text-dim);}
.help-nextprev a:hover{color:var(--gold);}
.help-nextprev .dir{display:block;font-size:11px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;}

/* Brand logo (lion) */
.brand-logo{width:30px;height:30px;flex-shrink:0;object-fit:contain;filter:drop-shadow(0 0 10px rgba(224,178,90,.28));}
.brand-logo-sm{width:24px;height:24px;}

/* ---------- Shared modal window (js/modal.js) — risk modal + help modal + the
   "how it works" modals (js/how-modals.js) + the bot emulator modal
   (js/emulator-modal.js) + the "step-by-step setup" modal (js/steps-modal.js)
   share the same look; each dialog class only overrides its own max-width. ---------- */
.risk-modal-overlay, .help-modal-overlay, .how-modal-overlay, .emu-modal-overlay, .steps-modal-overlay{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.risk-modal-overlay[hidden], .help-modal-overlay[hidden], .how-modal-overlay[hidden], .emu-modal-overlay[hidden], .steps-modal-overlay[hidden]{display:none;}
.risk-modal, .help-modal, .how-modal, .emu-modal, .steps-modal{
  position:relative;width:100%;max-height:calc(100vh - 48px);
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:32px;box-shadow:var(--shadow);
  opacity:0;transform:translateY(8px);
  animation:riskModalIn .2s ease forwards;
}
.risk-modal{max-width:760px;}
.help-modal{max-width:820px;}
.how-modal{max-width:800px;}
.emu-modal{max-width:1240px;}
.steps-modal{max-width:640px;}
@keyframes riskModalIn{to{opacity:1;transform:translateY(0);}}
.risk-modal h2, .help-modal h2, .how-modal h2, .emu-modal h2, .steps-modal h2{font-size:28px;font-weight:600;padding-right:40px;flex-shrink:0;}
.risk-modal-body, .help-modal-body, .how-modal-body, .emu-modal-body, .steps-modal-body{overflow-y:auto;min-height:0;}
.risk-modal-body p{
  color:var(--text-dim);font-size:15px;line-height:1.6;margin-top:14px;
}
.risk-modal-body p:first-child{margin-top:18px;}
.risk-modal-close, .help-modal-close, .how-modal-close, .emu-modal-close, .steps-modal-close{
  position:absolute;top:max(8px, env(safe-area-inset-top));right:max(8px, env(safe-area-inset-right));width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:10px;color:var(--text-dim);cursor:pointer;
}
.risk-modal-close:hover, .help-modal-close:hover, .how-modal-close:hover, .emu-modal-close:hover, .steps-modal-close:hover{color:var(--text);background:rgba(255,255,255,.05);}
.risk-modal-close:focus-visible, .help-modal-close:focus-visible, .how-modal-close:focus-visible, .emu-modal-close:focus-visible, .steps-modal-close:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.risk-modal-actions, .how-modal-actions{margin-top:26px;display:flex;justify-content:flex-end;align-items:center;gap:14px;flex-shrink:0;flex-wrap:wrap;}
body.modal-open{overflow:hidden;}
@media(max-width:900px){
  .emu-modal-overlay{padding:0;}
  .emu-modal{
    max-width:none;width:100%;height:100%;max-height:none;border-radius:0;padding:18px;
    padding-top:max(18px, env(safe-area-inset-top));
    padding-bottom:max(18px, env(safe-area-inset-bottom));
    padding-left:max(18px, env(safe-area-inset-left));
    padding-right:max(18px, env(safe-area-inset-right));
  }
  .emu-modal h2{font-size:20px;margin-bottom:4px;}
}
@media(max-width:560px){
  .risk-modal-overlay, .help-modal-overlay, .how-modal-overlay, .steps-modal-overlay{padding:0;}
  .risk-modal, .help-modal, .how-modal, .steps-modal{
    max-width:none;width:100%;height:100%;max-height:none;border-radius:0;padding:20px;
    padding-top:max(20px, env(safe-area-inset-top));
    padding-bottom:max(20px, env(safe-area-inset-bottom));
    padding-left:max(20px, env(safe-area-inset-left));
    padding-right:max(20px, env(safe-area-inset-right));
  }
  .risk-modal h2, .help-modal h2, .how-modal h2, .steps-modal h2{font-size:22px;}
}
@media(prefers-reduced-motion:reduce){
  .risk-modal, .help-modal, .how-modal, .emu-modal, .steps-modal{animation:none;opacity:1;transform:none;}
}

/* ---------- Bot emulator modal (js/emulator-modal.js) — wraps the existing
   live panel demo (#panelReal); the demo's own markup/CSS (.panel-real,
   .pr-*, css/chart-demo.css) is untouched. ---------- */
.emu-modal .panel-real{margin-top:6px;}
@media(max-width:900px){
  .emu-modal .panel-real{flex:1;display:flex;flex-direction:column;min-height:0;}
  .emu-modal-body{display:flex;flex-direction:column;min-height:0;flex:1;}
}

/* ---------- "Step-by-step setup" modal (js/steps-modal.js) — reuses the
   .timeline / .help-more-link styles below and js/help-modal.js's single-page
   article modal (with a "back to steps" button) for each step. ---------- */
.steps-modal-lede{color:var(--text-dim);font-size:15px;line-height:1.6;margin-bottom:4px;}
.steps-modal-body{margin-top:14px;}
.steps-modal-body .timeline{margin-top:4px;}
.steps-modal-actions{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;justify-content:flex-end;flex-shrink:0;
}
.steps-modal-fulllink{color:var(--text-dim);font-size:13px;text-decoration:none;}
.steps-modal-fulllink:hover{color:var(--gold);}
.help-modal-back{
  display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;
  margin-bottom:14px;color:var(--text-dim);font-size:13px;cursor:pointer;font-family:inherit;
}
.help-modal-back:hover{color:var(--gold);}
.help-modal-back:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.help-modal-back[hidden]{display:none;}

/* ---------- Modal tabs (segmented control, style like .pr-btn/.pr-group) ---------- */
.modal-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px;}
.modal-tabs [role="tab"]{
  background:var(--surface-2);border:1px solid var(--line);color:var(--text-dim);
  padding:8px 16px;min-height:34px;font-size:12.5px;font-weight:600;border-radius:999px;cursor:pointer;
  font-family:inherit;white-space:nowrap;transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.modal-tabs [role="tab"]:hover{color:var(--text);border-color:var(--gold-deep);}
.modal-tabs [role="tab"][aria-selected="true"]{background:rgba(224,178,90,.14);border-color:rgba(224,178,90,.5);color:var(--gold);}
.modal-tabs [role="tab"]:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

/* ---------- Risk modal — "Risk & protection" tab list ---------- */
.risk-modal-lede{color:var(--text-dim);font-size:15px;line-height:1.6;}
.risk-modal-list{display:flex;flex-direction:column;gap:14px;margin-top:20px;}
@media(min-width:680px){
  .risk-modal-list{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;}
}
.risk-modal-li{display:flex;gap:14px;align-items:flex-start;}
.risk-modal-li h4{font-size:14.5px;font-weight:600;}
.risk-modal-li p{color:var(--text-dim);font-size:13.5px;margin-top:6px;line-height:1.5;}

/* ---------- Help modal (js/help-modal.js) — "getting started" step cards open the
   matching help/*.html article here instead of leaving the page. ---------- */
.help-modal-lede{color:var(--text-dim);font-size:15px;line-height:1.6;margin-bottom:8px;}
.help-modal-body .help-body{max-width:none;}
.help-modal-body .help-body h2:first-child{margin-top:0;}
.help-modal-body .help-nextprev{display:none;}
.help-modal-loading{color:var(--text-faint);font-size:14px;padding:24px 0;}
.help-modal-actions{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-shrink:0;
}
.help-modal-fulllink{color:var(--text-dim);font-size:13px;text-decoration:none;}
.help-modal-fulllink:hover{color:var(--gold);}
.help-modal-panel{display:none;}
.help-modal-panel:not([hidden]){display:block;}

/* ---------- Facts strip (#facts) ---------- */
.facts-strip{padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.facts-list{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;
  gap:12px 32px;
}
.facts-list li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text-dim);white-space:nowrap;}
.facts-list .fi{width:16px;height:16px;color:var(--gold);flex-shrink:0;}
@media(max-width:720px){
  .facts-list{gap:10px 20px;}
  .facts-list li{font-size:12.5px;}
}

/* ---------- Income (#income) ---------- */
.income-panel{
  position:relative;overflow:hidden;text-align:center;margin-top:8px;
  padding:44px 32px 28px;border-radius:22px;border:1px solid rgba(224,178,90,.35);
  background:radial-gradient(700px 320px at 50% 0%, rgba(224,178,90,.16), rgba(224,178,90,0) 70%), var(--surface);
  box-shadow:0 0 0 1px rgba(224,178,90,.06), 0 30px 80px -30px rgba(224,178,90,.25);
}
.income-kicker{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);}
.income-money{display:flex;align-items:baseline;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:10px;}
.income-num{font-family:'Onest';font-size:clamp(56px,8.4vw,112px);font-weight:700;line-height:1;letter-spacing:-.03em;white-space:nowrap;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#F3D48A 0%,#E0B25A 55%,#B8893A 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.income-unit{font-size:clamp(18px,1.8vw,24px);color:var(--text-dim);font-weight:500;}
.income-secondary{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:30px;padding-top:22px;border-top:1px solid var(--line);}
.income-stat{display:flex;align-items:baseline;gap:10px;padding:10px 16px;border-radius:12px;background:rgba(255,255,255,.025);border:1px solid var(--line);}
.income-stat-num{font-size:18px;font-weight:600;color:var(--text);white-space:nowrap;}
.income-stat-label{font-size:13px;color:var(--text-dim);text-align:left;}
@media(max-width:720px){
  .income-panel{padding:32px 18px 22px;}
  .income-num{font-size:44px;}
  .income-stat{flex-direction:column;align-items:flex-start;gap:2px;width:100%;}
}
.income-note{text-align:center;color:var(--text-dim);font-size:14px;max-width:64ch;margin:28px auto 0;}
.income-ctas{justify-content:center;margin-top:26px;}
.income-disclaimer{text-align:center;color:var(--text-faint);font-size:12px;margin-top:16px;}
.income-disclaimer a{color:var(--red);text-decoration:none;}
.income-disclaimer a:hover{text-decoration:underline;}

/* ---------- Feature grid category label (#panel .feat) ---------- */
.feat{padding-top:22px;}
.feat-cat{
  position:absolute;top:22px;right:22px;
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold);background:rgba(224,178,90,.10);border:1px solid rgba(224,178,90,.3);
  padding:4px 9px;border-radius:999px;
}

/* ---------- Platform layout + "What's new" card ---------- */
.platform-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;align-items:start;}
@media(max-width:900px){.platform-layout{grid-template-columns:1fr;}}
.platform-grid{display:flex;flex-direction:column;gap:16px;}
.whatsnew-card{
  background:#0A0C10;border:1px solid var(--line-strong);border-radius:18px;padding:26px;
  box-shadow:0 0 0 1px rgba(224,178,90,.06);
}
.whatsnew-head h3{font-size:17px;font-weight:600;margin-top:12px;}
.whatsnew-list{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;}
.whatsnew-list li{
  display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-top:1px solid var(--line);
  font-size:13px;color:var(--text-dim);
}
.whatsnew-list li:first-child{border-top:none;}
.wn-badge{
  flex-shrink:0;font-family:'JetBrains Mono';font-size:10px;font-weight:700;letter-spacing:.03em;
  padding:3px 8px;border-radius:6px;margin-top:1px;
}
.wn-new{background:rgba(224,178,90,.16);color:var(--gold);}
.wn-fix{background:rgba(79,197,134,.16);color:var(--green);}
.wn-improved{background:rgba(169,156,245,.16);color:var(--lock);}

/* ---------- Step-by-step setup: vertical timeline (js/steps-modal.js) ---------- */
.timeline{list-style:none;margin:0;padding:0;position:relative;}
.timeline::before{
  content:"";position:absolute;left:19px;top:8px;bottom:8px;width:2px;background:var(--line-strong);
}
.timeline-item{position:relative;padding-bottom:8px;}
.timeline-item:first-child::after{
  content:"";position:absolute;left:19px;top:8px;width:2px;height:66px;background:var(--gold);
  box-shadow:0 0 10px var(--gold-glow);
}
.timeline-link{
  display:flex;gap:20px;align-items:flex-start;text-decoration:none;color:inherit;
  padding:10px 14px 22px 0;border-radius:12px;transition:background .15s;
}
.timeline-link:hover{background:rgba(224,178,90,.05);}
.timeline-num{
  flex-shrink:0;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:1px solid var(--line-strong);
  font-family:'JetBrains Mono';font-size:14px;font-weight:600;color:var(--text-dim);
  position:relative;z-index:1;
}
.timeline-item:first-child .timeline-num{
  background:var(--gold);border-color:var(--gold);color:#1A1406;box-shadow:0 0 14px var(--gold-glow);
}
.timeline-body h3{font-size:16.5px;font-weight:600;}
.timeline-body p{color:var(--text-dim);font-size:13.5px;margin-top:6px;}
.help-more-link{
  display:flex;gap:20px;align-items:flex-start;text-decoration:none;color:inherit;
  margin-top:24px;padding:20px 22px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line);transition:border-color .15s, transform .12s;
}
.help-more-link:hover{border-color:rgba(224,178,90,.45);transform:translateY(-2px);}
.help-more-link .num{
  flex-shrink:0;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:1px solid var(--line-strong);font-family:'JetBrains Mono';color:var(--gold);font-size:16px;
}
.help-more-link h3{font-size:15.5px;font-weight:600;}
.help-more-link p{color:var(--text-dim);font-size:13.5px;margin-top:6px;}
@media(max-width:560px){
  .timeline-link{gap:14px;padding-bottom:18px;}
  .timeline-num{width:34px;height:34px;font-size:12.5px;}
  .timeline::before{left:16px;}
  .timeline-item:first-child::after{left:16px;height:58px;}
}

/* Dialog containers take programmatic focus — no browser focus ring on the whole window */
.risk-modal:focus, .help-modal:focus, .how-modal:focus, [role="dialog"]:focus{outline:none;}

/* ---------- "How the bot works" rows (#panel, above the live demo) ---------- */
.how-rows{display:flex;flex-direction:column;gap:56px;margin-bottom:52px;}
.how-row{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}
.how-row > *{min-width:0;}
@media(max-width:900px){.how-row{grid-template-columns:1fr;gap:22px;}}
/* .how-more (the "More - ..." buttons) inherits .btn's white-space:nowrap;
   the DE row2 label ("Mehr ueber den Lock und den Ausstieg daraus") is long
   enough that its un-shrinkable single-line width alone stretched the whole
   single-column .how-row 10px past the viewport on a 375px phone (26.09
   mobile audit follow-up, found while re-checking EN/DE) - the min-width:0
   above stops the grid track from being forced wide by it, and this lets
   the label itself wrap instead of just overflowing in its place. */
@media(max-width:480px){
  .how-more{white-space:normal;height:auto;min-height:44px;padding:11px 20px;line-height:1.3;text-align:center;}
}
.how-label{
  display:inline-block;font-family:'JetBrains Mono';font-size:11px;font-weight:700;
  letter-spacing:.08em;color:var(--gold);background:rgba(224,178,90,.10);
  border:1px solid rgba(224,178,90,.3);padding:4px 10px;border-radius:999px;margin-bottom:14px;
}
.how-label-lock{color:var(--lock);background:rgba(169,156,245,.10);border-color:rgba(169,156,245,.3);}
.how-text h3{font-size:26px;font-weight:600;line-height:1.2;}
@media(max-width:720px){.how-text h3{font-size:21px;}}
.how-points{list-style:none;margin:18px 0 22px;padding:0;display:flex;flex-direction:column;gap:12px;}
.how-points li{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--text-dim);line-height:1.45;}
.how-points li>span:not(.how-ico){flex:1 1 auto;min-width:0;white-space:normal;overflow-wrap:break-word;word-break:break-word;}
.how-ico{
  flex-shrink:0;width:26px;height:26px;border-radius:8px;margin-top:1px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(224,178,90,.10);border:1px solid rgba(224,178,90,.3);color:var(--gold);
}
.how-ico svg{width:14px;height:14px;}
.how-row-lock .how-ico{background:rgba(169,156,245,.10);border-color:rgba(169,156,245,.3);color:var(--lock);}
.how-honest{font-size:12.5px;color:var(--text-faint);margin:0 0 20px;line-height:1.5;max-width:48ch;}
.how-chart-card{
  background:var(--surface);border:1px solid var(--line-strong);border-radius:16px;
  padding:16px;box-shadow:0 0 0 1px rgba(224,178,90,.05);
}
.how-row-lock .how-chart-card{box-shadow:0 0 0 1px rgba(169,156,245,.06);}
.how-chart-svg{width:100%;line-height:0;}
.how-chart-svg svg{width:100%;height:auto;display:block;}
.how-chart-caption{margin-top:10px;font-size:11px;color:var(--text-faint);text-align:center;font-style:italic;}
.how-tryit{
  text-align:center;font-size:12.5px;font-weight:700;color:var(--text-faint);
  text-transform:uppercase;letter-spacing:.08em;margin:0 0 18px;
}
.panel-emu-cta{display:flex;justify-content:center;margin:0 0 44px;}

/* ---------- shared chip control (js/params-block.js's base-lot chips,
   elsewhere reused verbatim) ---------- */
.chip-group{display:flex;gap:6px;flex-wrap:wrap;}
.chip{
  background:var(--surface);border:1px solid var(--line-strong);color:var(--text-dim);
  font-family:'JetBrains Mono';font-size:13px;font-weight:600;padding:7px 14px;min-height:34px;
  border-radius:999px;cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease;
}
.chip:hover{color:var(--text);border-color:var(--gold-deep);}
.chip.active{background:rgba(224,178,90,.16);border-color:rgba(224,178,90,.55);color:var(--gold);}
.chip:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
/* touch target ≥44px on narrow viewports (QA 27.09 — base-lot chips in the
   Parameters block measured 34px tall on 375px). Scoped to #howLotChips only
   (not the bare .chip class, which the hero badge also uses and which is
   already tall enough there — no need to touch it). */
@media(max-width:480px){#howLotChips .chip{min-height:44px;padding:10px 14px;}}

/* range slider thumb (used by the "Parameters" block's grid-step slider,
   js/params-block.js) */
.param-control-slider input[type="range"]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line-strong);cursor:pointer;
}
.param-control-slider input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--gold);border:2px solid #1A1406;box-shadow:0 0 0 1px rgba(224,178,90,.4);cursor:pointer;
}
.param-control-slider input[type="range"]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:var(--gold);border:2px solid #1A1406;cursor:pointer;
}

/* ---------- "Protection modes" modal — lead idea, a small static chart,
   three one-line feature cards, a row of detail chips, one honest line. ---------- */
.how-modal-lead{
  font-size:19px;font-weight:600;line-height:1.35;color:var(--text);
  margin:0 0 20px;max-width:52ch;
}
@media(max-width:560px){.how-modal-lead{font-size:16.5px;}}
.how-modal-lock-chart-card{
  background:#0A0C10;border:1px solid var(--line-strong);border-radius:14px;
  padding:14px;box-shadow:0 0 0 1px rgba(169,156,245,.06);
}
.how-modal-lock-chart-card svg{width:100%;height:auto;display:block;}
.how-modal .how-chart-caption{margin-top:8px;margin-bottom:22px;}
.how-feat-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
@media(max-width:640px){.how-feat-cards{grid-template-columns:1fr;}}
.how-feat-card{
  background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:16px;
}
.how-feat-ico{
  width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:rgba(169,156,245,.12);border:1px solid rgba(169,156,245,.3);color:var(--lock);margin-bottom:10px;
}
.how-feat-ico svg{width:16px;height:16px;}
.how-feat-card p{color:var(--text-dim);font-size:13px;line-height:1.45;margin:0;}
.how-chip-row{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;}
.how-chip{
  font-size:12px;font-weight:600;color:var(--text-dim);background:var(--surface-2);
  border:1px solid var(--line-strong);border-radius:999px;padding:6px 12px;white-space:nowrap;
}
.how-modal-honest{font-size:12.5px;color:var(--text-faint);line-height:1.5;margin:18px 0 0;max-width:60ch;}

/* No visible scrollbars anywhere (scrolling still works: wheel, touch, keyboard). */
html, body, * { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { width: 0; height: 0; display: none; background: transparent; }