/* ============================================================
   THE SIMPLE TRADE — STOCKWIZ-STYLE SKIN
   Loaded after styles.css and after each page's inline neu-theme
   block. Re-skins palette, type, buttons, cards and nav to the
   Stockwiz design system: near-black navy base, neon-green accent,
   one lime→mint→sky gradient for highlighted words, Inter type.
   Content and layout of inner pages are unchanged.
   ============================================================ */
:root{
  --ink:#0F1018!important; --ink-2:#0F1018!important;
  --carbon:#16171E!important; --carbon-2:#1B1C25!important;
  --line:rgba(255,255,255,.2)!important; --line-soft:rgba(255,255,255,.1)!important;
  --gold:#58FF29!important; --gilt:#76FF80!important; --brass:#29E337!important; --gold-bright:#76FF80!important;
  --bone:#FFFFFF!important; --ash:#B3B5C0!important; --bg:#0F1018!important;
  --up:#58FF29!important; --down:#FF5A6E!important;
  --gold-grad:linear-gradient(180deg,#29E337 0%,#76FF80 100%)!important;
  --ghost-bg:transparent!important; --ghost-fg:#FFFFFF!important;
  --grad-text:linear-gradient(92.36deg,#CDFF64 -9.78%,#66D6AD 47.15%,#13B5E8 105.24%);
  --grad-border:linear-gradient(135deg,#58FF29 0%,#13B5E8 55%,#8B5CF6 100%);
  --glow:0 0 30px 1px rgba(82,237,38,.4);
  --display:'Inter',system-ui,-apple-system,sans-serif!important;
  --body:'Inter',system-ui,-apple-system,sans-serif!important;
  --mono:'Inter',system-ui,-apple-system,sans-serif!important;
  --nd:#0B0C12!important; --nl:#1E2028!important;
  --neu-out:0 0 0 1px rgba(255,255,255,.2)!important;
  --neu-out-sm:0 0 0 1px rgba(255,255,255,.16)!important;
  --neu-out-lg:0 0 0 1px rgba(255,255,255,.2),0 30px 60px -30px rgba(0,0,0,.8)!important;
  --neu-in:inset 0 0 0 1px rgba(255,255,255,.14)!important;
  --neu-in-sm:inset 0 0 0 1px rgba(255,255,255,.12)!important;
}
html,body{background:#0F1018!important;color:#fff}
body{font-family:'Inter',system-ui,-apple-system,sans-serif!important;font-size:16px;line-height:1.5}
h1,h2,h3,h4,.h,.book-title,.m-title,
.eyebrow,.micro,.wb-tb-label,.stat .l,.ig-handle,.yt-sub,.fc-label,.disc-head,.wb-badge,.chip,.wb-when,.read,.ig-tag,.m-price,
button,input,select,textarea,.pc-body em.pc-btn,.proof-strip{font-family:'Inter',system-ui,-apple-system,sans-serif!important}
h1,h2,h3{letter-spacing:0;line-height:1.2}
h1{font-weight:700}
h2{font-weight:800}
h3{font-weight:700}
.bg-fx::before{background:
  radial-gradient(900px 600px at 85% -5%, rgba(41,227,55,.12), transparent 60%),
  radial-gradient(700px 500px at -10% 30%, rgba(19,181,232,.06), transparent 55%),
  #0F1018!important}
.grain{opacity:.035}

/* ---------- gradient word ---------- */
.grad,.accent,h1 .accent,.hero h1 em,.mhero h1 em,.ic-band h2 em,.cta-band h2 em,.sec-head h2 em,.post-h1 em,.legal-head h1 em{
  font-style:normal!important;font-weight:inherit;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent!important;
  -webkit-text-fill-color:transparent}

/* ---------- eyebrow → pill badge ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;
  font-size:13.5px;font-weight:500;letter-spacing:0;text-transform:none;color:#fff;
  background:linear-gradient(88.2deg,rgba(131,255,158,.2) -34.78%,rgba(59,55,255,.2) 131.77%);
  border:1px solid rgba(255,255,255,.08);border-radius:50px;padding:8px 16px}
.eyebrow::before{display:none}
.chip,.wb-badge,.wb-next-badge{background:rgba(88,255,41,.06)!important;border:1px solid rgba(88,255,41,.3)!important;
  color:#76FF80!important;border-radius:50px!important;box-shadow:none!important;
  text-transform:none;letter-spacing:0;font-size:13px;font-weight:500;padding:7px 14px}
.wb-badge .wb-pulse,.wb-next-badge .wb-pulse{background:#58FF29!important}

/* ---------- section headers: centred, big ---------- */
.sec-head{max-width:none;margin:0 auto 44px;text-align:center}
.sec-head h2{font-size:clamp(32px,5.2vw,64px);font-weight:800;line-height:1.15}
.sec-head .lede{margin:16px auto 0;max-width:60ch;color:rgba(255,255,255,.7)}
.sec-head .chips{justify-content:center}
.lede{color:rgba(255,255,255,.72)}

/* ---------- buttons ---------- */
.btn{border-radius:10px!important;font-weight:600;letter-spacing:0}
.btn-gold,.big-cta,.apply-submit,.wb-submit,.submit,.pc-body em.pc-btn-solid,.ic-cta,
html[data-theme="light"] .btn-gold,html[data-theme="light"] .big-cta,html[data-theme="light"] .apply-submit{
  background:linear-gradient(180deg,#29E337 0%,#76FF80 100%)!important;color:#000!important;border:0!important;
  box-shadow:var(--glow)!important;text-transform:capitalize}
.btn-gold:hover,.big-cta:hover,.ic-cta:hover{transform:translateY(-2px);box-shadow:0 0 40px 4px rgba(82,237,38,.5)!important}
.btn-gold svg,.big-cta svg{color:#000}
.btn-ghost,.nav-login,.wb-again,.btn-back{background:transparent!important;color:#fff!important;
  border:1px solid rgba(255,255,255,.55)!important;border-radius:50px!important;box-shadow:none!important}
.btn-ghost:hover{border-color:#fff!important;background:rgba(255,255,255,.06)!important}
.btn-ghost svg{fill:#fff}
.btn-hero{padding:16px 44px!important;font-size:18px!important;min-width:280px;justify-content:center;border-radius:10px!important}
.pc-body em.pc-btn-gold{color:#58FF29!important;background:rgba(88,255,41,.06)!important;box-shadow:inset 0 0 0 1px rgba(88,255,41,.45)!important;border-radius:10px}
.pc-badge.pro{background:linear-gradient(180deg,#29E337,#76FF80)!important;color:#000!important;border:0!important}
.pc-badge.free{background:rgba(15,16,24,.85)!important;color:#76FF80!important;border:1px solid rgba(88,255,41,.4)!important}

/* ---------- nav ---------- */
.nav,.navstack>.nav{background:linear-gradient(180deg,#0F1018 0%,#16171E 100%)!important;
  border:0!important;box-shadow:none!important;backdrop-filter:none}
.nav .wrap{height:92px}
.navlinks{gap:6px}
.nav .navlinks a,.navlinks a{color:#fff!important;font-size:15.5px;font-weight:500;padding:8px 16px;border-radius:50px;transition:.2s}
.nav .navlinks a:hover,.navlinks a.active,.navlinks a[aria-current="page"]{color:#58FF29!important;background:rgba(88,255,41,.06)}
.navlinks a::after{display:none}
.navlinks a.nav-gold,.navlinks a.nav-hot{color:#fff!important;font-weight:600}
.navlinks a.nav-hot::before{display:none}   /* pulsing dot before "Webinars" removed */
.nav-actions .nav-cta{border-radius:50px!important;padding:11px 20px}
.nav-toggle{background:transparent!important;border:1px solid #58FF29!important;color:#58FF29!important;
  border-radius:10px!important;box-shadow:none!important}
@media (max-width:920px){
  .nav .wrap{height:auto}
  .navlinks{border-top:1px solid rgba(255,255,255,.08);padding:8px 0 4px;gap:4px}
  .navlinks a{padding:14px 18px!important;font-size:16px!important;border-bottom:0!important;border-radius:16px!important}
  .navlinks a[aria-current="page"]{color:#58FF29!important;background:rgba(88,255,41,.06)}
}

/* ---------- announcement bar ---------- */
.wb-topbar{background:transparent!important;border-bottom:1px solid rgba(255,255,255,.06)!important}
.wb-topbar-in{background:linear-gradient(90deg,rgba(2,161,12,.14) 0%,rgba(64,122,255,.18) 100%)!important;
  border:1px solid rgba(255,255,255,.1)!important;box-shadow:none!important;border-radius:14px!important;backdrop-filter:none!important}
.wb-topbar .wb-next-badge{background:linear-gradient(180deg,#29E337,#76FF80)!important;color:#000!important;
  border:0!important;padding:5px 12px!important;box-shadow:none!important;font-weight:700;letter-spacing:.08em}
.wb-topbar .wb-next-badge .wb-pulse{background:#000!important}
.wb-topbar .wb-next-when,.wb-next-cta{color:#76FF80!important}

/* ---------- hero ---------- */
.hero{padding-top:clamp(24px,3vw,56px);padding-bottom:clamp(40px,5vw,80px)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(55% 70% at 78% 45%,rgba(41,227,55,.16),transparent 62%),
             radial-gradient(35% 45% at 20% 100%,rgba(19,181,232,.07),transparent 60%)}
.hero .price-line{opacity:.25}
.hero-grid > div:first-child{order:1!important}
.hero-grid > .m-stage{order:2!important}
@media(min-width:921px){
  .hero-grid{grid-template-columns:1.05fr .95fr!important;gap:48px}
}
@media(max-width:920px){
  .hero .hero-h1,.hero h1{font-size:clamp(34px,9vw,44px)!important;text-align:center}
  .hero-badge{font-size:13px;padding:8px 14px;margin-inline:auto;display:flex;justify-content:center;text-align:center}
  .hero .lede{text-align:center!important;margin-inline:auto}
  .hero-bullets{justify-items:start;max-width:360px;margin-inline:auto}
  .hero-grid .cta-row{flex-direction:column;align-items:stretch}
  .hero-grid .cta-row .btn{width:100%;justify-content:center}
  .hero .micro{text-align:center}
  .hero-grid > .m-stage{margin-top:26px}
}
.hero-badge{display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;padding:9px 18px;border-radius:50px;
  font-size:15px;font-weight:500;color:#fff;
  background:linear-gradient(88.2deg,rgba(131,255,158,.2) -34.78%,rgba(59,55,255,.2) 131.77%);
  border:1px solid rgba(255,255,255,.08)}
.hero-badge svg{width:16px;height:16px;color:#58FF29;flex:0 0 auto}
.hero .hero-h1,.hero h1{font-size:clamp(38px,5.4vw,72px)!important;font-weight:700!important;line-height:1.18!important;margin:0 0 20px}
.flip{position:relative;display:inline-grid;vertical-align:top;text-align:left}
.flip > span{grid-area:1/1;white-space:nowrap;animation:swFlip 10.5s cubic-bezier(.3,0,.2,1) infinite;opacity:0}
.flip > span:nth-child(2){animation-delay:-3.5s}
.flip > span:nth-child(3){animation-delay:-7s}
/* each role owns one third of the cycle; the outgoing word clears exactly as
   the next begins, so two are never on screen and there is no blank frame */
@keyframes swFlip{
  0%{opacity:0;transform:translateY(.34em)}
  2%,31.5%{opacity:1;transform:translateY(0)}
  33.34%,100%{opacity:0;transform:translateY(-.34em)}
}
@media(prefers-reduced-motion:reduce){
  .flip > span{animation:none;opacity:0}
  .flip > span:first-child{opacity:1}
}
.hero .lede{font-size:clamp(16px,1.35vw,18px);line-height:1.55;max-width:56ch;margin:0 0 26px;color:#fff}
.hero-bullets{list-style:none;padding:0;margin:0 0 30px;display:grid;gap:14px}
.hero-bullets li{display:flex;align-items:center;gap:14px;font-size:16.5px;font-weight:600;color:#fff;text-align:left!important;text-align-last:auto!important;hyphens:manual!important}
.hb-ico{flex:0 0 32px;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(88,255,41,.18),rgba(19,181,232,.18));border:1px solid rgba(255,255,255,.12)}
.hb-ico svg{width:17px;height:17px;color:#58FF29}
.hero-grid .cta-row{gap:14px;flex-wrap:wrap}
.hero-grid .cta-row .btn{padding:14px 26px;font-size:15.5px}
.hero-grid .cta-row .btn-hero{padding:16px 44px;font-size:18px}
.hero .micro{margin-top:16px;letter-spacing:0;font-size:13px;color:rgba(255,255,255,.55)}
/* mentorship card on the right, on a glowing base */
.m-stage{position:relative;padding-bottom:28px}
.m-stage::after{content:"";position:absolute;left:12%;right:12%;bottom:0;height:56px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(88,255,41,.45),rgba(88,255,41,.12) 60%,transparent);filter:blur(6px)}
.ms-card{background:linear-gradient(160deg,#16171E,#0F1018)!important;border:1px solid rgba(255,255,255,.2)!important;
  border-radius:25px!important;box-shadow:0 30px 70px -30px rgba(0,0,0,.9)!important;position:relative;z-index:1}
.ms-tag{color:#58FF29!important;letter-spacing:2.4px}
.ms-cell{background:linear-gradient(180deg,#1B1C25,#12131B)!important;border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:none!important;border-radius:16px!important}
.ms-cell:hover{border-color:rgba(88,255,41,.5)!important;filter:none;box-shadow:0 0 24px rgba(88,255,41,.18)!important}
.ms-cell .n{color:#58FF29!important;font-weight:800}
.ms-cell .l{color:#B3B5C0!important}
.ms-revs{border-top-color:rgba(255,255,255,.1)!important}
.ms-rev{background:rgba(255,255,255,.04)!important;color:#fff!important;border:1px solid rgba(255,255,255,.06)}
.ms-rev .st{color:#58FF29!important}
.ms-rev b{color:#B3B5C0!important}

/* ---------- stats strip ---------- */
.sw-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.sw-stat{padding:34px 28px;border-left:1px solid rgba(255,255,255,.08)}
.sw-stat:first-child{border-left:0}
.sw-stat .n{display:inline-flex;align-items:flex-start;gap:6px;font-size:clamp(28px,2.7vw,38px);font-weight:800;letter-spacing:1px;line-height:1.2;color:#fff}
.sw-stat .n svg{width:18px;height:18px;color:#58FF29;margin-top:4px}
.sw-stat .l{margin-top:6px;font-size:14px;color:#B3B5C0}
@media(max-width:760px){
  .sw-stats{grid-template-columns:1fr 1fr}
  .sw-stat{padding:22px 18px}
  .sw-stat:nth-child(3){border-left:0}
  .sw-stat:nth-child(n+3){border-top:1px solid rgba(255,255,255,.08)}
  .sw-stat .n{font-size:28px}
}

/* ---------- ticker ---------- */
.ticker{background:linear-gradient(90deg,rgba(2,161,12,.14) 0%,rgba(64,122,255,.18) 100%)!important;
  border-color:rgba(255,255,255,.08)!important}
.ticker-track span{color:#fff;font-size:13px;letter-spacing:.04em;text-transform:none;font-weight:500}
.ticker-track .dot{color:#58FF29}

/* ---------- cards ---------- */
.card,.wb-card,.post,.yt-card,.faq-item,.m-card,.price-card,.reg-card,.legal-card,.mod,.apply-card,.path-card,
.get-card,.proof-wrap,.takeaways,.post-cta,.wb-modal,.grv-card,.algo-cred{
  background:#0F1018!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:25px!important;box-shadow:none!important}
.card:hover,.wb-card:hover,.post:hover,.yt-card:hover,.path-card:hover{border-color:rgba(88,255,41,.55)!important;
  box-shadow:0 0 34px -6px rgba(88,255,41,.25)!important}
.faq-item{border-radius:18px!important}
.card .num,.post .meta,.wb-card .num{color:#58FF29!important}
.card h3{font-weight:700}
.card p,.post p,.pc-body span:not(.pc-badge){color:rgba(255,255,255,.7)!important}
.card .ico,.algo-ic,.crown{background:linear-gradient(135deg,rgba(88,255,41,.16),rgba(19,181,232,.16))!important;
  border:1px solid rgba(255,255,255,.12)!important;box-shadow:none!important}
.card .ico svg,.algo-ic svg,.crown svg{color:#58FF29!important}
.wb-card:not(.wb-soon){animation:none!important;
  border-color:rgba(88,255,41,.55)!important;box-shadow:0 0 30px -4px rgba(88,255,41,.3)!important}
.wb-card:not(.wb-soon):hover{box-shadow:0 0 40px -2px rgba(88,255,41,.45)!important}
.wb-when{background:rgba(88,255,41,.06)!important;border:1px solid rgba(88,255,41,.3)!important;color:#76FF80!important;box-shadow:none!important;border-radius:10px!important}
.wb-when svg{color:#58FF29!important}
.wb-card.wb-soon .wb-when{background:rgba(255,255,255,.04)!important;border-color:rgba(255,255,255,.12)!important;color:#B3B5C0!important}
.thumb,.yt-thumb,.post .thumb{border-radius:18px!important}
.yt-play{background:#58FF29!important;color:#000}
.yt-play svg{color:#000}
.btn-yt{background:linear-gradient(135deg,#ff5252,#e53c3c 60%,#c92f2f)!important;color:#fff!important;box-shadow:none!important}
.gal-item{padding:0!important;border-radius:18px!important;background:#000!important;border:1px solid rgba(255,255,255,.12)!important}
.gal-item:hover{border-color:rgba(88,255,41,.5)!important}
.proof-strip{color:#B3B5C0!important;letter-spacing:.18em}
#freeWb,.sw-band{
  border:1px solid transparent!important;border-radius:25px!important;
  background:linear-gradient(#12131B,#12131B) padding-box,var(--grad-border) border-box!important;
  box-shadow:none!important}
#freeWb strong{color:#58FF29!important}
.ig-card{border-radius:18px!important;border:1px solid rgba(255,255,255,.14)!important}

/* gradient-bordered bands: mentor, CTA bands */
.author-row,.ic-band,.cta-band{
  border:1px solid transparent!important;border-radius:25px!important;box-shadow:none!important;
  background:linear-gradient(160deg,#16171E,#0F1018) padding-box,var(--grad-border) border-box!important}
.ic-band,.cta-band{padding:clamp(48px,7vw,90px) clamp(24px,5vw,64px);
  background:radial-gradient(60% 80% at 50% 0%,rgba(41,227,55,.14),transparent 60%),linear-gradient(160deg,#16171E,#0F1018) padding-box,var(--grad-border) border-box!important}
.ic-band h2,.cta-band h2{font-size:clamp(30px,4.8vw,56px);font-weight:800;max-width:22ch}
.ic-band p,.cta-band p{color:rgba(255,255,255,.7)}

/* ---------- mentor ---------- */
.author-row{padding:clamp(28px,4vw,48px);grid-template-columns:1fr 340px;align-items:center}
@media(max-width:920px){.author-row{grid-template-columns:1fr}.author-row .avatar{order:-1}.author-row .chips{justify-content:center}.author-row .mentor-badge{margin-inline:auto}}
.author-row .avatar{border:1px solid rgba(255,255,255,.14);border-radius:20px;
  background:radial-gradient(120% 120% at 30% 20%,rgba(88,255,41,.16),transparent 55%),linear-gradient(160deg,#1B1C25,#0F1018)}
.author-row h2{font-size:clamp(30px,4.2vw,58px);font-weight:700;text-transform:uppercase;letter-spacing:.01em;margin-bottom:6px}
.author-row .role{color:#B3B5C0;font-size:clamp(15px,1.4vw,20px);margin:0 0 18px}
.author-row p{color:rgba(255,255,255,.7)}
.mission{border-left-color:#58FF29!important;background:linear-gradient(180deg,rgba(88,255,41,.07),rgba(88,255,41,.02))!important;border-radius:0 14px 14px 0}
.mission .lbl{color:#58FF29!important;text-transform:none;letter-spacing:0;font-size:13px;font-weight:600}
.mentor-badge{display:inline-flex;align-items:center;gap:14px;margin-top:22px;padding:12px 20px 12px 14px;border-radius:14px;
  background:#000;border:1px solid rgba(88,255,41,.45);box-shadow:0 0 28px rgba(88,255,41,.18)}
.mentor-badge .mb-ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle,#29E337,#0d7a1d);color:#000}
.mentor-badge .mb-ico svg{width:24px;height:24px}
.mentor-badge .mb-t{display:flex;flex-direction:column;line-height:1.25}
.mentor-badge .mb-t small{font-size:13px;color:#fff}
.mentor-badge .mb-t b{font-size:16px;color:#76FF80}

/* ---------- forms ---------- */
input,textarea,select,.wb-ctl,.field .control{background:#0B0C12!important;border:1px solid rgba(255,255,255,.14)!important;
  color:#fff!important;border-radius:12px!important;box-shadow:none!important}
input:focus,textarea:focus,.wb-ctl:focus,.field .control:focus-within{border-color:#58FF29!important;box-shadow:0 0 0 3px rgba(88,255,41,.16)!important}
.wb-seg input:checked + label{background:linear-gradient(180deg,#29E337,#76FF80)!important;color:#000!important;border-color:transparent!important}
.wb-lbl,.form-eyebrow{color:#B3B5C0!important;text-transform:none;letter-spacing:0;font-weight:600}
.wb-pre,.field .prefix{color:#76FF80!important}

/* ---------- tables / faq / prose accents ---------- */
.proof-table thead th,.prose table th{color:#58FF29}
.faq-item summary:hover{color:#76FF80}
.faq-item .q-ico{color:#58FF29}
.answer-box{border-left-color:#58FF29;background:linear-gradient(180deg,rgba(88,255,41,.08),rgba(88,255,41,.03))}

/* ---------- footer ---------- */
footer{background:linear-gradient(208.8deg,#171823 -0.92%,#0F1018 97.83%)!important;border-top:1px solid rgba(255,255,255,.08)!important;padding:64px 0 0}
.foot-links a{color:#B3B5C0}
.foot-links a:hover,.foot-links a.is-strong{color:#fff}
.foot-contact p,.foot-contact .fc-sub{color:#B3B5C0}
.foot-contact a{color:#fff}
.foot-contact a:hover{color:#58FF29}
.disclaimer{background:#12131B!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:20px!important;box-shadow:none!important;color:#B3B5C0}
.disclaimer li::before{background:#58FF29}
.foot-legal nav a:hover{color:#58FF29}

/* ---------- misc ---------- */
.reveal{transition:opacity .6s ease,transform .6s ease}
#tstCallFloat{background:linear-gradient(180deg,#29E337,#76FF80)!important;box-shadow:0 0 24px rgba(82,237,38,.45)!important}
.theme-toggle{background:#16171E;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.theme-toggle .tt-knob{background:linear-gradient(180deg,#29E337,#76FF80)}
.lightbox{background:rgba(15,16,24,.94)}
::selection{background:rgba(88,255,41,.35);color:#fff}
#tstLoadBar{background:linear-gradient(90deg,#29E337,#58FF29,#CDFF64)!important}

/* ---------- light theme: cool paper + deep green ---------- */
html[data-theme="light"]{
  --ink:#F4F5F8!important;--ink-2:#F4F5F8!important;--carbon:#FFFFFF!important;--carbon-2:#EEF0F4!important;
  --bone:#0F1018!important;--ash:#5B5F6E!important;
  --line:rgba(15,16,24,.16)!important;--line-soft:rgba(15,16,24,.08)!important;
  --gold:#12841F!important;--gilt:#1E9E2C!important;--brass:#0F6E1A!important;--gold-bright:#12841F!important;--bg:#F4F5F8!important;
  --ghost-bg:#FFFFFF!important;--ghost-fg:#0F1018!important;
  --nd:#D5D8E0!important;--nl:#FFFFFF!important;
  --neu-out:0 0 0 1px rgba(15,16,24,.14)!important;--neu-out-sm:0 0 0 1px rgba(15,16,24,.12)!important;
  --neu-out-lg:0 0 0 1px rgba(15,16,24,.14),0 20px 44px -24px rgba(15,16,24,.35)!important;
  --neu-in:inset 0 0 0 1px rgba(15,16,24,.14)!important;--neu-in-sm:inset 0 0 0 1px rgba(15,16,24,.12)!important}
html[data-theme="light"],html[data-theme="light"] body{background:#F4F5F8!important;color:#0F1018!important}
html[data-theme="light"] .nav,html[data-theme="light"] .navstack>.nav{background:#FFFFFF!important;box-shadow:0 10px 24px -20px rgba(15,16,24,.4)!important}
html[data-theme="light"] .nav .navlinks a,html[data-theme="light"] .navlinks a{color:#0F1018!important;text-shadow:none!important}
html[data-theme="light"] .nav .navlinks a:hover,html[data-theme="light"] .navlinks a.active{color:#12841F!important;background:rgba(18,132,31,.08)}
html[data-theme="light"] .navlinks a.nav-gold,html[data-theme="light"] .navlinks a.nav-hot{color:#0F1018!important}
html[data-theme="light"] .nav-toggle{border-color:#12841F!important;color:#12841F!important}
html[data-theme="light"] .btn-ghost,html[data-theme="light"] .nav-login,html[data-theme="light"] .btn-back{color:#0F1018!important;border-color:rgba(15,16,24,.4)!important;background:#fff!important}
html[data-theme="light"] .btn-ghost svg{fill:#0F1018}
html[data-theme="light"] .hero .lede,html[data-theme="light"] .lede,html[data-theme="light"] .sec-head .lede,
html[data-theme="light"] .card p,html[data-theme="light"] .post p,html[data-theme="light"] .author-row p,
html[data-theme="light"] .ic-band p,html[data-theme="light"] .cta-band p,html[data-theme="light"] .pc-body span:not(.pc-badge){color:#3F4352!important}
html[data-theme="light"] .hero-badge,html[data-theme="light"] .eyebrow{color:#0F1018;background:linear-gradient(88deg,rgba(18,132,31,.12),rgba(59,55,255,.10));border-color:rgba(15,16,24,.08)}
html[data-theme="light"] .hero-bullets li,html[data-theme="light"] .sw-stat .n{color:#0F1018}
html[data-theme="light"] .hb-ico svg,html[data-theme="light"] .sw-stat .n svg{color:#12841F}
html[data-theme="light"] .sw-stats,html[data-theme="light"] .sw-stat,html[data-theme="light"] .ticker{border-color:rgba(15,16,24,.1)!important}
html[data-theme="light"] .ticker{background:linear-gradient(90deg,rgba(18,132,31,.08),rgba(64,122,255,.10))!important}
html[data-theme="light"] .ticker-track span{color:#0F1018!important}
html[data-theme="light"] .ticker-track .dot{color:#12841F!important}
html[data-theme="light"] .card,html[data-theme="light"] .wb-card,html[data-theme="light"] .post,html[data-theme="light"] .yt-card,
html[data-theme="light"] .faq-item,html[data-theme="light"] .m-card,html[data-theme="light"] .price-card,html[data-theme="light"] .reg-card,
html[data-theme="light"] .legal-card,html[data-theme="light"] .mod,html[data-theme="light"] .apply-card,html[data-theme="light"] .path-card,
html[data-theme="light"] .get-card,html[data-theme="light"] .proof-wrap,html[data-theme="light"] .takeaways,html[data-theme="light"] .post-cta,
html[data-theme="light"] .wb-modal,html[data-theme="light"] .algo-cred{background:#FFFFFF!important;border-color:rgba(15,16,24,.14)!important}
html[data-theme="light"] .card:hover,html[data-theme="light"] .wb-card:hover,html[data-theme="light"] .post:hover,html[data-theme="light"] .path-card:hover{border-color:rgba(18,132,31,.6)!important;box-shadow:0 20px 40px -24px rgba(15,16,24,.35)!important}
html[data-theme="light"] .card .num,html[data-theme="light"] .post .meta,html[data-theme="light"] .wb-card .num,html[data-theme="light"] .ms-tag,
html[data-theme="light"] .ms-cell .n,html[data-theme="light"] .ms-rev .st,html[data-theme="light"] .mission .lbl,html[data-theme="light"] #freeWb strong,
html[data-theme="light"] .wb-topbar .wb-next-when,html[data-theme="light"] .wb-next-cta,html[data-theme="light"] .wb-pre,html[data-theme="light"] .field .prefix,
html[data-theme="light"] .card .ico svg,html[data-theme="light"] .algo-ic svg,html[data-theme="light"] .crown svg{color:#12841F!important}
html[data-theme="light"] .chip,html[data-theme="light"] .wb-badge,html[data-theme="light"] .wb-when,html[data-theme="light"] .pc-body em.pc-btn-gold{
  color:#12841F!important;background:rgba(18,132,31,.08)!important;border-color:rgba(18,132,31,.3)!important;box-shadow:none!important}
html[data-theme="light"] .pc-badge.free{background:rgba(255,255,255,.92)!important;color:#12841F!important;border-color:rgba(18,132,31,.35)!important}
html[data-theme="light"] .wb-topbar-in{background:linear-gradient(90deg,rgba(18,132,31,.10),rgba(64,122,255,.12))!important;border-color:rgba(15,16,24,.1)!important}
html[data-theme="light"] .ms-card{background:linear-gradient(160deg,#FFFFFF,#EEF0F4)!important;border-color:rgba(15,16,24,.16)!important;box-shadow:0 24px 52px -30px rgba(15,16,24,.35)!important}
html[data-theme="light"] .ms-cell{background:#F4F5F8!important;border-color:rgba(15,16,24,.1)!important}
html[data-theme="light"] .ms-cell .l{color:#5B5F6E!important}
html[data-theme="light"] .ms-rev{background:#F4F5F8!important;color:#0F1018!important;border-color:rgba(15,16,24,.06)}
html[data-theme="light"] .ms-rev b{color:#5B5F6E!important}
html[data-theme="light"] .m-stage::after{background:radial-gradient(closest-side,rgba(18,132,31,.3),transparent)}
html[data-theme="light"] #freeWb,html[data-theme="light"] .sw-band{background:linear-gradient(#FFFFFF,#FFFFFF) padding-box,var(--grad-border) border-box!important}
html[data-theme="light"] .author-row,html[data-theme="light"] .ic-band,html[data-theme="light"] .cta-band{
  background:linear-gradient(160deg,#FFFFFF,#EEF0F4) padding-box,var(--grad-border) border-box!important}
html[data-theme="light"] .author-row .avatar{background:linear-gradient(160deg,#FFFFFF,#E6E8EE);border-color:rgba(15,16,24,.12)}
html[data-theme="light"] .author-row .role{color:#5B5F6E}
html[data-theme="light"] .mission{background:linear-gradient(180deg,rgba(18,132,31,.08),rgba(18,132,31,.02))!important;border-left-color:#12841F!important}
html[data-theme="light"] .mentor-badge{background:#0F1018}
html[data-theme="light"] input,html[data-theme="light"] textarea,html[data-theme="light"] select,html[data-theme="light"] .wb-ctl,html[data-theme="light"] .field .control{
  background:#FFFFFF!important;color:#0F1018!important;border-color:rgba(15,16,24,.16)!important}
html[data-theme="light"] input:focus,html[data-theme="light"] textarea:focus,html[data-theme="light"] .wb-ctl:focus{border-color:#12841F!important;box-shadow:0 0 0 3px rgba(18,132,31,.16)!important}
html[data-theme="light"] .wb-lbl,html[data-theme="light"] .form-eyebrow{color:#3F4352!important}
html[data-theme="light"] .gal-item{background:#fff!important;border-color:rgba(15,16,24,.12)!important}
html[data-theme="light"] .proof-strip{color:#5B5F6E!important}
html[data-theme="light"] footer{background:#FFFFFF!important;border-top-color:rgba(15,16,24,.1)!important}
html[data-theme="light"] .fc-label,html[data-theme="light"] .disc-head,html[data-theme="light"] .foot-contact a{color:#0F1018!important}
html[data-theme="light"] .foot-links a,html[data-theme="light"] .foot-contact p,html[data-theme="light"] .foot-contact .fc-sub{color:#5B5F6E}
html[data-theme="light"] .foot-links a:hover,html[data-theme="light"] .foot-contact a:hover{color:#12841F}
html[data-theme="light"] .disclaimer{background:#F4F5F8!important;border-color:rgba(15,16,24,.1)!important;color:#5B5F6E}
html[data-theme="light"] .disclaimer strong{color:#0F1018}
html[data-theme="light"] .disclaimer li::before{background:#12841F}
html[data-theme="light"] .foot-legal p,html[data-theme="light"] .foot-legal nav a{color:#5B5F6E}
html[data-theme="light"] .lightbox{background:rgba(244,245,248,.96)}
html[data-theme="light"] .hero::before{background:radial-gradient(55% 70% at 78% 45%,rgba(18,132,31,.10),transparent 62%)}
html[data-theme="light"] .bg-fx::before{background:#F4F5F8!important}
html[data-theme="light"] .theme-toggle{background:#fff;box-shadow:inset 0 0 0 1px rgba(15,16,24,.14)}

/* ============================================================
   HERO v2 — Stockwiz layout: copy left, two floating phone
   mock-ups on a glowing cylinder base right. Pure CSS/SVG.
   ============================================================ */
.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(60% 75% at 72% 50%,#000 10%,transparent 72%);mask-image:radial-gradient(60% 75% at 72% 50%,#000 10%,transparent 72%)}
.hero::before{background:radial-gradient(48% 62% at 74% 52%,rgba(41,227,55,.20),transparent 65%),radial-gradient(30% 40% at 12% 90%,rgba(19,181,232,.07),transparent 60%)}
.hero .wrap{z-index:1}
.sw-hero{display:grid!important;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)!important;
  grid-template-areas:"badge stage" "h1 stage" "bullets stage" "cta stage" "micro stage";
  grid-auto-rows:max-content;align-content:center;align-items:start;column-gap:36px;row-gap:0;min-height:640px}
.sw-hero>.hero-badge{grid-area:badge;justify-self:start}
.sw-hero>.hero-h1{grid-area:h1}
.sw-hero>.hero-bullets{grid-area:bullets}
.sw-hero>.cta-row{grid-area:cta}
.sw-hero>.micro{grid-area:micro}
.sw-hero>.ph-stage-wrap{grid-area:stage;align-self:center}

.ph-stage-wrap{--z:1;position:relative;width:100%;min-width:0;max-width:100%;display:flex;justify-content:center}
@media(max-width:1300px){.ph-stage-wrap{--z:.86}}
@media(max-width:1120px){.ph-stage-wrap{--z:.74}}
@media(max-width:920px){.ph-stage-wrap{--z:.9}}
@media(max-width:600px){.ph-stage-wrap{--z:.7}}
@media(max-width:480px){.ph-stage-wrap{--z:.6}}
@media(max-width:400px){.ph-stage-wrap{--z:.56}}
@media(max-width:360px){.ph-stage-wrap{--z:.5}}
.ph-stage{position:relative;width:560px;height:640px;flex:0 0 auto;zoom:var(--z)}
.ph-glow{position:absolute;left:0;right:0;bottom:30px;height:440px;pointer-events:none;
  background:radial-gradient(50% 58% at 54% 58%,rgba(41,227,55,.30),transparent 70%);filter:blur(12px)}

/* device frame */
.ph{position:absolute;background:#0a0b10;border-radius:46px;padding:7px;
  box-shadow:0 0 0 2px #3b3e4a,0 0 0 4px #15161d,0 60px 90px -30px rgba(0,0,0,.95);will-change:transform}
.ph::before{content:"";position:absolute;left:50%;top:15px;transform:translateX(-50%);width:84px;height:22px;border-radius:14px;background:#000;z-index:3}
.ph::after{content:"";position:absolute;right:-5px;top:120px;width:3px;height:64px;border-radius:2px;background:#3b3e4a}
.ph-screen{position:relative;width:100%;height:100%;border-radius:40px;overflow:hidden;
  background:linear-gradient(180deg,#14151e 0%,#0F1018 100%);color:#fff;font-size:11px;line-height:1.35;
  display:flex;flex-direction:column;padding:12px 12px 8px}
.ph-front{width:292px;height:604px;right:18px;top:8px;transform:rotate(-6deg);z-index:3;animation:phFloatA 7s ease-in-out infinite}
.ph-back{width:252px;height:522px;left:14px;top:62px;transform:rotate(8deg);z-index:2;filter:brightness(.82);animation:phFloatB 8.5s ease-in-out infinite}
.ph-back::before{width:70px;height:18px;top:13px}
.ph-back .ph-screen{font-size:10px;padding:10px 10px 8px}
@keyframes phFloatA{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(-6deg) translateY(-14px)}}
@keyframes phFloatB{0%,100%{transform:rotate(8deg) translateY(0)}50%{transform:rotate(8deg) translateY(-10px)}}
@keyframes phFloatC{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* screen UI */
.ps-status{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:600;padding:2px 8px 10px}
.ps-sig{font-size:8px;letter-spacing:1px}
.ps-sig b{display:inline-block;width:18px;height:9px;border:1px solid #fff;border-radius:3px;position:relative;vertical-align:middle;margin-left:2px}
.ps-sig b::after{content:"";position:absolute;inset:1px;right:4px;background:#58FF29;border-radius:1px}
.ps-head{display:flex;justify-content:space-between;align-items:center;margin:4px 0 10px}
.ps-head small{display:block;color:#B3B5C0;font-size:9.5px}
.ps-head strong{font-size:15px;font-weight:700;line-height:1.2}
.ps-pill{font-size:9px;font-weight:700;color:#000;background:linear-gradient(180deg,#29E337,#76FF80);border-radius:50px;padding:4px 8px;white-space:nowrap}
.ps-avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#58FF29,#13B5E8);color:#000;font-weight:800;font-size:12px}
.ps-progress{height:5px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden;margin-bottom:10px}
.ps-progress i{display:block;height:100%;background:linear-gradient(90deg,#29E337,#76FF80)}
.ps-tabs{display:flex;gap:6px;margin-bottom:10px}
.ps-tabs span{font-size:9px;padding:5px 9px;border-radius:50px;background:rgba(255,255,255,.06);color:#B3B5C0;white-space:nowrap}
.ps-tabs .on{background:#58FF29;color:#000;font-weight:700}
.ps-list{display:grid;gap:6px}
.ps-row{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07)}
.ps-row div{flex:1;min-width:0}
.ps-row b{display:block;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-row small{color:#B3B5C0;font-size:8.5px}
.ps-num{font-size:9px;font-weight:700;color:#58FF29;background:rgba(88,255,41,.1);border-radius:8px;padding:6px 5px}
.ps-ok{font-size:8.5px;color:#58FF29;font-weight:600;white-space:nowrap}
.ps-lock{font-size:8.5px;color:#B3B5C0;white-space:nowrap}
.ps-live{margin-top:auto;display:flex;align-items:center;gap:7px;font-size:9.5px;font-weight:600;padding:8px 10px;border-radius:10px;
  background:linear-gradient(90deg,rgba(2,161,12,.28),rgba(64,122,255,.28));border:1px solid rgba(255,255,255,.1)}
.ps-live i{width:7px;height:7px;border-radius:50%;background:#58FF29;box-shadow:0 0 0 3px rgba(88,255,41,.25)}
.ps-nav{display:flex;justify-content:space-around;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.08);font-size:9px;color:#B3B5C0}
.ps-nav .on{color:#58FF29;font-weight:700}
.ps-chart{border-radius:14px;background:#0b0c12;border:1px solid rgba(255,255,255,.08);padding:8px 8px 4px;margin-bottom:10px}
.ps-chart-top{display:flex;justify-content:space-between;align-items:center;font-size:9px;color:#B3B5C0;margin-bottom:4px}
.ps-chart-top b{color:#fff;font-size:10px}
.ps-chart svg{width:100%;height:96px;display:block}
.ps-check{display:grid;gap:6px}
.ps-crow{display:flex;align-items:center;gap:8px;font-size:10.5px;padding:8px 9px;border-radius:11px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07)}
.ps-crow i{flex:0 0 16px;width:16px;height:16px;border-radius:50%;border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;font-size:9px;font-style:normal}
.ps-crow.on i{background:#58FF29;border-color:#58FF29;color:#000;font-weight:800}
.ps-cta{margin-top:auto;text-align:center;font-size:10.5px;font-weight:700;color:#000;background:linear-gradient(180deg,#29E337,#76FF80);border-radius:10px;padding:10px;box-shadow:0 0 18px rgba(82,237,38,.4)}

/* floating review chip + base */
.ph-chip{position:absolute;left:-14px;bottom:158px;z-index:4;width:236px;padding:10px 12px!important;border-radius:14px!important;
  background:rgba(15,16,24,.94)!important;border:1px solid rgba(88,255,41,.4)!important;backdrop-filter:blur(8px);
  box-shadow:0 20px 40px -20px #000,0 0 24px rgba(88,255,41,.12)!important;font-size:11.5px!important;line-height:1.45;animation:phFloatC 9s ease-in-out infinite}
.ph-chip .st{color:#58FF29!important;letter-spacing:1.5px;margin-right:4px}
.ph-chip b{display:block;margin-top:4px;color:#B3B5C0!important;font-weight:500;font-size:11px}
.ph-base{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:440px;height:104px;z-index:1}
.ph-base::before{content:"";position:absolute;left:0;right:0;top:0;height:66px;border-radius:50%;z-index:2;
  background:radial-gradient(ellipse at 50% 42%,#262832 0%,#0c0d13 70%);
  box-shadow:0 0 0 2px rgba(88,255,41,.6),0 0 30px rgba(88,255,41,.45),inset 0 -10px 24px rgba(0,0,0,.6)}
.ph-base i{position:absolute;left:0;right:0;top:33px;bottom:0;border-radius:0 0 220px 220px / 0 0 40px 40px;
  background:linear-gradient(180deg,#0f1016,#05050a);box-shadow:0 36px 60px -20px rgba(88,255,41,.4)}

/* mobile: badge, h1, phones, copy, 3-column bullets, full-width CTA (Stockwiz order) */
@media(max-width:920px){
  .sw-hero{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"badge" "h1" "stage" "bullets" "cta" "micro";
    justify-items:center;text-align:center;min-height:0;row-gap:0}
  .sw-hero>.hero-badge{justify-self:center;margin-bottom:18px}
  .sw-hero>.ph-stage-wrap{margin:8px 0 26px}
  .hero-bullets{grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:none;margin:0 0 26px}
  .hero-bullets li{flex-direction:column;align-items:center;justify-content:flex-start;gap:9px;font-size:13.5px;line-height:1.3;text-align:center!important}
  .hb-ico{width:40px;height:40px;border-radius:12px}
  .hb-ico svg{width:20px;height:20px}
  .sw-hero>.cta-row{width:100%}
}
@media(max-width:400px){.hero-bullets li{font-size:12.5px}}

/* ============================================================
   STOCKWIZ DETAILS PASS — site-wide polish
   ============================================================ */
/* scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0F1018}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#29E337,#1a8f2a);border-radius:10px;border:2px solid #0F1018}
html{scrollbar-color:#29E337 #0F1018;scrollbar-width:thin}

/* section rhythm like Stockwiz (100px bands) */
.section{padding-top:clamp(44px,5.5vw,90px);padding-bottom:clamp(44px,5.5vw,90px)}
.sec-head{margin-bottom:clamp(30px,4vw,54px)}

/* path / feature cards: image inset in a rounded frame, like the Stockwiz feature cards */
.path-card{padding:12px!important}
.pc-img{border-radius:18px;border:1px solid rgba(255,255,255,.08);background:#0b0c12}
.pc-img img{filter:saturate(1.05) contrast(1.04)}
.pc-body{padding:16px 8px 8px!important}
.pc-badge{top:22px!important;left:22px!important}
@media(max-width:860px){.pc-badge{margin:8px 0 3px!important}}

/* photos: cool-tone every raster image so it sits in the navy/green world */
.proof-grid img,.gal-item img,.author-row .avatar img,.yt-thumb img,.byline img{filter:saturate(.92) contrast(1.04)}
.proof-grid .gal-item::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,16,24,0) 55%,rgba(15,16,24,.55) 100%),linear-gradient(135deg,rgba(88,255,41,.08),rgba(19,181,232,.08))}
.proof-grid .gal-item:hover::after{background:linear-gradient(180deg,rgba(15,16,24,0) 55%,rgba(15,16,24,.55) 100%),linear-gradient(135deg,rgba(88,255,41,.16),rgba(19,181,232,.12))}
.pg-cap{z-index:2;background:linear-gradient(180deg,transparent,rgba(15,16,24,.85))!important}
.yt-thumb::after{background:linear-gradient(180deg,transparent 60%,rgba(15,16,24,.6))!important}
.avatar{box-shadow:0 0 0 1px rgba(88,255,41,.25),0 30px 60px -30px rgba(88,255,41,.35)}

/* blog post thumbnails: dark inset panel + green accent line already recoloured; add frame */
.post .thumb{border:1px solid rgba(255,255,255,.06);background:#0b0c12}
.post .thumb svg rect:first-child{fill:#0b0c12}

/* reels: green frame on hover */
.ig-card:hover{border-color:rgba(88,255,41,.55)!important;box-shadow:0 0 30px -6px rgba(88,255,41,.3)!important}

/* inputs & selects site-wide: green focus, pill radius like Stockwiz forms */
.field .control,.wb-ctl,input,select,textarea{border-radius:12px!important}
.wb-seg label{border-radius:10px!important}

/* FAQ chevrons / summary hover */
.faq-item[open]{border-color:rgba(88,255,41,.45)!important}

/* tables */
.proof-table tbody tr:hover,.prose table tbody tr:hover{background:rgba(88,255,41,.05)}

/* floating action buttons: consistent green glow */
#tstWaFloat{box-shadow:0 10px 26px rgba(0,0,0,.35),0 0 0 0 rgba(88,255,41,.5)!important}

/* ============================================================
   MOTION LAYER — scroll choreography adapted from Stockwiz
   Driven by motion.js: html.motion is set only when animations
   are allowed; every element exposes --p (0→1) as it scrolls in.
   ============================================================ */
.scrub{--p:1}
html.motion .scrub{--p:0}
/* headings: dim + low, then brighten and rise (Stockwiz section titles) */
html.motion .sec-head.scrub{opacity:calc(.12 + .88*var(--p));transform:translateY(calc(34px*(1 - var(--p))));will-change:opacity,transform}
html.motion .mhero-inner.scrub{opacity:calc(.2 + .8*var(--p));transform:translateY(calc(24px*(1 - var(--p))))}
/* bands and grids: fade + rise */
html.motion .author-row.scrub,html.motion .ic-band.scrub,html.motion .cta-band.scrub,html.motion #freeWb.scrub,
html.motion .sw-stats.scrub{opacity:calc(.1 + .9*var(--p));transform:translateY(calc(40px*(1 - var(--p)))) scale(calc(.97 + .03*var(--p)))}
/* ---- PINNED FAN-OUT: "Where are you in your trading journey" ----
   Desktop: the section sticks while you scroll ~700px; the two side cards
   start tucked behind the centre card and slide out sideways, reversible,
   exactly like the Stockwiz side phones. Mobile keeps the plain stack. */
@media(min-width:861px){
  html.motion .pin-sec{--runway:700px}
  html.motion .pin-sec::after{content:"";display:block;height:var(--runway)}
  html.motion .pin-sec .pin-inner{position:sticky;top:var(--pin-top,96px)}
  /* generic fan-out: children sit stacked in the centre at --p 0 and spread to
     their grid slots at --p 1. Each child declares only how far it has to travel. */
  html.motion .pin-sec .pin-fan{--p:0;overflow:visible}
  html.motion .pin-sec .pin-fan>*{
    transition:border-color .25s,box-shadow .25s!important;will-change:transform,opacity;
    transform:translateX(calc(var(--dx,0px) * (1 - var(--p)))) rotate(calc(var(--rot,0deg) * (1 - var(--p)))) scale(calc(.9 + .1*var(--p)));
    opacity:calc(var(--op0,.28) + (1 - var(--op0,.28))*var(--p))}
  html.motion .pin-sec .pin-fan>*:hover{transform:translateY(-4px)}
  /* two cards, 22px gap: they part to show the comparison */
  html.motion .pin-sec .pin-fan-2>*:nth-child(1){--dx:calc(50% + 11px);--rot:-5deg;--op0:.35;z-index:2}
  html.motion .pin-sec .pin-fan-2>*:nth-child(2){--dx:calc(-50% - 11px);--rot:5deg;--op0:.35;z-index:1}
  /* four cards, 16px gap: the outer pair comes out from behind the inner pair */
  html.motion .pin-sec .pin-fan-4>*:nth-child(1){--dx:calc(150% + 24px);--rot:-7deg;z-index:1}
  html.motion .pin-sec .pin-fan-4>*:nth-child(2){--dx:calc(50% + 8px);--rot:-3deg;--op0:.45;z-index:3}
  html.motion .pin-sec .pin-fan-4>*:nth-child(3){--dx:calc(-50% - 8px);--rot:3deg;--op0:.45;z-index:3}
  html.motion .pin-sec .pin-fan-4>*:nth-child(4){--dx:calc(-150% - 24px);--rot:7deg;z-index:1}
  /* scroll hint under the cards while pinned */
  html.motion .pin-sec .pin-hint{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:22px;font-size:13px;color:#B3B5C0;
    opacity:calc(1 - var(--p));transition:opacity .2s}
  html.motion .pin-sec .pin-hint i{width:18px;height:28px;border:2px solid rgba(255,255,255,.35);border-radius:12px;position:relative;display:inline-block;font-style:normal}
  html.motion .pin-sec .pin-hint i::after{content:"";position:absolute;left:50%;top:5px;width:3px;height:6px;margin-left:-1.5px;border-radius:2px;background:#58FF29;animation:pinWheel 1.6s ease-in-out infinite}
  @keyframes pinWheel{0%,100%{transform:translateY(0);opacity:1}70%{transform:translateY(9px);opacity:0}}
  /* the two decisions need less travel than four habits */
  html.motion #the-shift{--runway:520px}
  /* .rb-grid is only four-across at 1100px; below that the fan maths is wrong,
     so the section stays unpinned (a runway under 50px makes motion.js skip it) */
  html.motion #rule-based{--runway:0px}
  html.motion #rule-based .pin-hint{display:none}
}
@media(min-width:1100px){
  html.motion #rule-based{--runway:700px}
  html.motion #rule-based .pin-hint{display:flex}
}
.pin-hint{display:none}
/* the path cards keep their chips now that the section is no longer pinned */
.path-card{overflow:visible}
.path-card .pc-img{border-radius:18px;overflow:hidden}
.path-card[data-chip]::before{content:attr(data-chip);position:absolute;top:-16px;left:50%;z-index:4;
  transform:translateX(-50%);padding:8px 16px;border-radius:12px 12px 4px 4px;font-size:12.5px;font-weight:700;
  color:#000;white-space:nowrap;background:linear-gradient(180deg,#29E337,#76FF80);box-shadow:0 0 22px rgba(82,237,38,.45)}
/* gallery: images scale in like the big chart on Stockwiz */
html.motion .proof-grid.scrub>.gal-item{opacity:calc(.15 + .85*var(--p));transform:scale(calc(.88 + .12*var(--p)))}
html.motion .proof-grid.scrub>.gal-item:hover{transform:translateY(-4px)}
/* card grids: stagger children in */
html.motion .wb-grid.scrub>*,html.motion .algo-steps.scrub>*,html.motion .blog-grid.scrub>*,html.motion .yt-grid.scrub>*,
html.motion .ig-grid.scrub>*,html.motion .bgrid.scrub>*{
  opacity:calc(.1 + .9*var(--p));transform:translateY(calc(36px*(1 - var(--p))))}
/* stagger for the classic .reveal → .in transition */
.reveal{transition-delay:var(--stagger,0ms)}

/* nav: compact + hairline once scrolled */
.navstack,.nav{transition:box-shadow .3s,border-color .3s}
.navstack.scrolled .nav,.nav.scrolled{box-shadow:0 12px 30px -18px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.06)!important}
.navstack.scrolled .nav .wrap,.nav.scrolled .wrap{height:76px}
@media(max-width:920px){.navstack.scrolled .nav .wrap,.nav.scrolled .wrap{height:auto}}

/* floating indicator chips around the hero phones (Stockwiz scatter icons) */
.fl-ico{position:absolute;left:var(--x);top:var(--y);z-index:0;display:inline-flex;align-items:center;gap:6px;
  padding:7px 10px;border-radius:12px;font-size:11px;font-weight:700;letter-spacing:.02em;color:#fff;
  background:rgba(22,23,30,.85);border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 30px -14px #000;opacity:.5;
  animation:flDrift var(--d,7s) ease-in-out infinite;animation-delay:var(--dl,0s);pointer-events:none;white-space:nowrap}
.fl-ico i{width:18px;height:18px;border-radius:6px;display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:800;color:#000;
  background:linear-gradient(135deg,#58FF29,#13B5E8)}
.fl-ico.up i{background:linear-gradient(135deg,#58FF29,#29E337)}
.fl-ico.dn i{background:linear-gradient(135deg,#FF8A9B,#FF5A6E)}
@keyframes flDrift{0%,100%{margin-top:0}50%{margin-top:-10px}}
@media(max-width:920px){.fl-ico{font-size:10px;padding:6px 8px;opacity:.45}}

/* button shine sweep on hover (Stockwiz glow buttons) */
.btn-gold,.big-cta,.ic-cta,.pc-body em.pc-btn-solid{position:relative;overflow:hidden}
.btn-gold::after,.big-cta::after,.ic-cta::after,.pc-body em.pc-btn-solid::after{content:"";position:absolute;top:-40%;bottom:-40%;left:-60%;width:40%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);opacity:0;pointer-events:none}
.btn-gold:hover::after,.big-cta:hover::after,.ic-cta:hover::after,.path-card:hover .pc-btn-solid::after{animation:btnShine .9s ease forwards}
@keyframes btnShine{0%{left:-60%;opacity:0}15%{opacity:1}100%{left:130%;opacity:0}}

/* "Chat With Us" label beside the WhatsApp float, like Stockwiz */
#tstWaFloat::before{content:"Chat With Us";position:absolute;right:66px;top:50%;transform:translateY(-50%);
  background:#fff;color:#0F1018;font-weight:600;font-size:13.5px;padding:9px 14px;border-radius:50px;white-space:nowrap;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.6);animation:flDrift 4s ease-in-out infinite}
#tstWaFloat{overflow:visible!important}
@media(max-width:640px){#tstWaFloat::before{font-size:12.5px;padding:8px 12px;right:60px}}

/* hero stage tilt is set inline by motion.js — keep the zoom on the wrapper level */
.ph-stage{transform-style:preserve-3d;transition:transform .15s linear}

/* stats: number tick-up */
.cnt{font-variant-numeric:tabular-nums}

@media(prefers-reduced-motion:reduce){
  .fl-ico,#tstWaFloat::before,.btn-gold::after{animation:none!important}
  .scrub,.scrub>*{opacity:1!important;transform:none!important}
}

/* inline SVG artwork inside the path cards */
.pc-img svg{width:100%;height:100%;display:block;transition:transform .35s}
.path-card:hover .pc-img svg{transform:scale(1.04)}

/* ============================================================
   AMBIENT GREEN — the olive backdrop tone from the Stockwiz hero
   (#365031 → #2B4529). Used for atmosphere only; neon stays on
   buttons, links and highlights.
   ============================================================ */
:root{--amb:#365031;--amb-2:#2B4529;--amb-3:#1E3320}
.hero{background:
  radial-gradient(70% 95% at 76% 48%, var(--amb) 0%, var(--amb-2) 32%, rgba(30,51,32,.55) 55%, rgba(15,16,24,0) 78%),
  linear-gradient(180deg,#0F1018 0%,#0F1018 100%)!important}
.hero::before{background:
  radial-gradient(38% 50% at 78% 46%, rgba(88,255,41,.10), transparent 70%),
  radial-gradient(60% 70% at 100% 100%, rgba(43,69,41,.6), transparent 60%)}
.hero::after{-webkit-mask-image:radial-gradient(60% 75% at 72% 50%,#000 20%,transparent 78%);mask-image:radial-gradient(60% 75% at 72% 50%,#000 20%,transparent 78%);
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px)}
.ph-glow{background:radial-gradient(50% 58% at 54% 58%, rgba(88,255,41,.22), rgba(54,80,49,.5) 45%, transparent 72%)}
.ph-base::before{background:radial-gradient(ellipse at 50% 42%,#2b3a2b 0%,#0c0d13 72%)}
.bg-fx::before{background:
  radial-gradient(900px 600px at 85% -5%, rgba(54,80,49,.55), transparent 60%),
  radial-gradient(700px 500px at -10% 30%, rgba(19,181,232,.05), transparent 55%),
  #0F1018!important}
/* bands pick up the same tone in their top glow */
.ic-band,.cta-band{background:radial-gradient(60% 80% at 50% 0%,rgba(54,80,49,.75),transparent 62%),linear-gradient(160deg,#16171E,#0F1018) padding-box,var(--grad-border) border-box!important}
.author-row{background:radial-gradient(50% 70% at 100% 0%,rgba(54,80,49,.6),transparent 60%),linear-gradient(160deg,#16171E,#0F1018) padding-box,var(--grad-border) border-box!important}
#freeWb,.sw-band{background:radial-gradient(60% 120% at 0% 0%,rgba(54,80,49,.7),transparent 55%),linear-gradient(#12131B,#12131B) padding-box,var(--grad-border) border-box!important}
.ticker,.wb-topbar-in{background:linear-gradient(90deg,rgba(54,80,49,.55) 0%,rgba(43,69,41,.35) 50%,rgba(64,122,255,.14) 100%)!important}
.mhero{background:radial-gradient(60% 70% at 50% 0%,var(--amb-2) 0%,rgba(30,51,32,.5) 40%,transparent 72%)!important}
footer{background:linear-gradient(180deg,#0F1018 0%,#141a15 60%,#0F1018 100%)!important}
@media(max-width:920px){
  .hero{background:radial-gradient(90% 40% at 50% 38%, var(--amb) 0%, var(--amb-2) 35%, rgba(15,16,24,0) 75%),#0F1018!important}
}
html[data-theme="light"] .hero,html[data-theme="light"] .mhero{background:radial-gradient(70% 95% at 76% 48%,rgba(54,80,49,.22),transparent 70%),#F4F5F8!important}
html[data-theme="light"] .bg-fx::before{background:#F4F5F8!important}
html[data-theme="light"] .ic-band,html[data-theme="light"] .cta-band,html[data-theme="light"] .author-row,html[data-theme="light"] #freeWb{
  background:radial-gradient(60% 80% at 50% 0%,rgba(54,80,49,.16),transparent 60%),linear-gradient(160deg,#FFFFFF,#EEF0F4) padding-box,var(--grad-border) border-box!important}
html[data-theme="light"] .ticker,html[data-theme="light"] .wb-topbar-in{background:linear-gradient(90deg,rgba(54,80,49,.18),rgba(64,122,255,.10))!important}
html[data-theme="light"] footer{background:#FFFFFF!important}
.playbook-cta{gap:14px;flex-wrap:wrap}
.playbook-cta .btn{padding:14px 26px;font-size:15.5px}
@media(max-width:640px){.playbook-cta{flex-direction:column;align-items:stretch}.playbook-cta .btn{width:100%;justify-content:center}}
/* mentorship: collapsible "Know more" block */
#knowMore[hidden]{display:none}
#knowMoreBtn .km-close{display:none}
#knowMoreBtn.is-open .km-open{display:none}
#knowMoreBtn.is-open .km-close{display:inline}
/* mentorship page opens straight on the playbook block */
.playbook-first{padding-top:clamp(28px,4vw,56px)!important}

/* webinar notification bar hidden for now (all pages) + tighter hero top */
.wb-topbar{display:none!important}
.hero{padding-top:0!important}
.sw-hero{min-height:0;align-content:start}
.sw-hero>.hero-badge{margin-top:34px}
.sw-hero>.ph-stage-wrap{align-self:start;margin-top:10px}
@media(max-width:920px){.sw-hero>.hero-badge{margin-top:22px}.sw-hero>.ph-stage-wrap{margin-top:8px}}

/* ============================================================
   THE SPINE — "Become A Rule-Based Trader"
   Section 1: tips vs rules (states the problem)
   Section 2: the four habits (defines the promise)
   ============================================================ */
.vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
.vs-card{position:relative;border-radius:25px;padding:clamp(26px,3vw,40px);border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(160deg,#16171E,#0F1018);transition:border-color .25s,box-shadow .25s,transform .25s}
.vs-card h3{font-size:clamp(19px,1.9vw,24px);font-weight:700;margin:0 0 20px;line-height:1.25}
.vs-card ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.vs-card li{position:relative;padding-left:36px;font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.78)}
.vs-card li::before{content:"";position:absolute;left:0;top:1px;width:23px;height:23px;border-radius:8px;
  background-repeat:no-repeat;background-position:center;background-size:12px 12px}
/* left: the tip trap */
.vs-bad{border-color:rgba(255,90,110,.32)}
.vs-bad:hover{border-color:rgba(255,90,110,.5);box-shadow:0 0 34px -10px rgba(255,90,110,.28)}
.vs-bad .vs-tag{color:#FF8A9B}
.vs-bad .vs-dot{background:#FF5A6E;box-shadow:0 0 0 4px rgba(255,90,110,.16)}
.vs-bad li::before{background-color:rgba(255,90,110,.14);box-shadow:inset 0 0 0 1px rgba(255,90,110,.4);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF5A6E' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
/* right: the rule-based way */
.vs-good{border-color:rgba(88,255,41,.4)}
.vs-good:hover{border-color:rgba(88,255,41,.65);box-shadow:0 0 40px -8px rgba(88,255,41,.3)}
.vs-good .vs-tag{color:#76FF80}
.vs-good .vs-dot{background:#58FF29;box-shadow:0 0 0 4px rgba(88,255,41,.18)}
.vs-good li{color:#fff}
.vs-good li::before{background-color:rgba(88,255,41,.14);box-shadow:inset 0 0 0 1px rgba(88,255,41,.45);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2358FF29' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E")}
.vs-good::after{content:"";position:absolute;inset:0;border-radius:25px;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 0%,rgba(88,255,41,.10),transparent 65%)}
.vs-tag{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;font-size:12.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase}
.vs-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.vs-note{margin:26px auto 0;max-width:70ch;text-align:center;font-size:12.5px;line-height:1.6;color:#8A8D99}
/* the two cards trade places on the way in: the bad one recedes, the good one leads */
html.motion .vs-grid.scrub>.vs-card{opacity:calc(.1 + .9*var(--p))}
html.motion .vs-grid.scrub>.vs-bad{transform:translateY(calc(34px*(1 - var(--p))))}
html.motion .vs-grid.scrub>.vs-good{transform:translateY(calc(54px*(1 - var(--p))))}
@media(max-width:860px){
  .vs-grid{grid-template-columns:1fr;gap:16px}
  .vs-card li{font-size:15px;padding-left:32px}
  .vs-card li::before{width:21px;height:21px}
}

/* the four habits */
.rb-grid .card{display:flex;flex-direction:column;padding:30px 28px 32px}
.rb-grid .card .ico{width:46px;height:46px;border-radius:13px;margin-bottom:18px}
.rb-grid .card .ico svg{width:23px;height:23px}
.rb-grid .card .num{font-size:12px;font-weight:700;letter-spacing:.14em;margin-bottom:8px}
.rb-grid .card h3{font-size:20px;margin:0 0 10px}
.rb-grid .card p{margin:0;font-size:15px;line-height:1.6}
@media(min-width:1100px){.rb-grid{grid-template-columns:repeat(4,1fr)!important}}

html[data-theme="light"] .vs-card{background:#FFFFFF}
html[data-theme="light"] .vs-card li{color:#3F4352}
html[data-theme="light"] .vs-good li{color:#0F1018}
html[data-theme="light"] .vs-bad .vs-tag{color:#C0263B}
html[data-theme="light"] .vs-good .vs-tag{color:#12841F}
html[data-theme="light"] .vs-note{color:#5B5F6E}

/* ---- hero stage fit ----
   The phones are rotated, so their bounding box is ~30px wider than the
   upright frame. At --z:1 the front phone and the right-hand chips pushed
   past the container and got clipped by the page's overflow-x, while the
   left chips crowded the headline. Scale to fit and re-centre vertically. */
/* desktop-only: these sit after the mobile --z rules in the file, so they must
   be lower-bounded or they would override the phone breakpoints */
@media(min-width:1301px){.ph-stage-wrap{--z:.88}}
@media(min-width:1121px) and (max-width:1300px){.ph-stage-wrap{--z:.82}}
@media(min-width:921px) and (max-width:1120px){.ph-stage-wrap{--z:.72}}
.sw-hero>.ph-stage-wrap{align-self:center;margin-top:0}
@media(max-width:920px){.sw-hero>.ph-stage-wrap{align-self:start;margin-top:8px}}

/* ============================================================
   HERO ART v3 — the course, not a trading app.
   A live mentee-portal window (curriculum + session in progress)
   and the written rule card that lesson produces.
   Sits in the same .ph-stage-wrap, so the --z breakpoints apply.
   ============================================================ */
.cs-stage{position:relative;width:560px;height:548px;flex:0 0 auto;zoom:var(--z)}
.cs-glow{position:absolute;left:-30px;right:-30px;top:0;bottom:-20px;pointer-events:none;
  background:radial-gradient(56% 58% at 52% 46%,rgba(41,227,55,.28),rgba(54,80,49,.34) 52%,transparent 76%);filter:blur(12px)}
/* grounding shadow, replaces the phone plinth */
.cs-stage::after{content:"";position:absolute;left:14%;right:14%;bottom:6px;height:34px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.75),transparent 72%);filter:blur(9px);z-index:0}

/* ---- the portal window ---- */
.cs-win{position:absolute;left:26px;top:26px;width:506px;border-radius:18px;overflow:hidden;z-index:2;
  background:linear-gradient(180deg,#171922,#0F1018);border:1px solid rgba(255,255,255,.16);
  box-shadow:0 44px 80px -34px rgba(0,0,0,.95),0 0 0 1px rgba(88,255,41,.10);
  transform:rotate(-1.4deg);animation:csFloat 8s ease-in-out infinite}
@keyframes csFloat{0%,100%{transform:rotate(-1.4deg) translateY(0)}50%{transform:rotate(-1.4deg) translateY(-10px)}}
.cs-bar{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.03)}
.cs-dots{display:flex;gap:6px;flex:0 0 auto}
.cs-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.cs-btitle{flex:1;font-size:11.5px;font-weight:600;color:#B3B5C0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-live{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-size:9.5px;font-weight:800;letter-spacing:.14em;
  color:#fff;background:#FF5A6E;border-radius:50px;padding:4px 10px}
.cs-live i{width:6px;height:6px;border-radius:50%;background:#fff}
.cs-body{display:grid;grid-template-columns:172px 1fr}

/* curriculum rail */
.cs-side{padding:14px 12px 14px 14px;border-right:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02)}
.cs-sh{margin:0 0 11px;font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#8A8D99}
.cs-mods{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.cs-mods li{display:flex;align-items:center;gap:9px;font-size:11px;line-height:1.3;color:#8A8D99;
  padding:6px 8px;border-radius:9px;white-space:nowrap;overflow:hidden}
.cs-mods li i{flex:0 0 15px;width:15px;height:15px;border-radius:50%;border:1.5px solid rgba(255,255,255,.2);position:relative}
.cs-mods li.done{color:#fff}
.cs-mods li.done i{background:#58FF29;border-color:#58FF29}
.cs-mods li.done i::after{content:"";position:absolute;left:4px;top:1.5px;width:4px;height:8px;
  border:solid #000;border-width:0 2px 2px 0;transform:rotate(42deg)}
.cs-mods li.now{color:#fff;font-weight:700;background:rgba(88,255,41,.10);box-shadow:inset 0 0 0 1px rgba(88,255,41,.35)}
.cs-mods li.now i{border-color:#58FF29}
.cs-mods li.now i::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#58FF29}
.cs-prog{margin-top:14px;height:5px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden}
.cs-prog span{display:block;width:60%;height:100%;background:linear-gradient(90deg,#29E337,#76FF80)}
.cs-pt{margin:7px 0 0;font-size:10px;color:#8A8D99}

/* session in progress */
.cs-main{padding:14px 15px 15px}
.cs-mh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.cs-mh b{font-size:13px;font-weight:700;color:#fff}
.cs-mh span{font-size:9.5px;font-weight:700;letter-spacing:.1em;color:#76FF80;
  background:rgba(88,255,41,.1);border:1px solid rgba(88,255,41,.3);border-radius:50px;padding:3px 9px}
.cs-screen{position:relative;border-radius:12px;overflow:hidden;background:#0b0c12;border:1px solid rgba(255,255,255,.08)}
.cs-screen svg{display:block;width:100%;height:118px}
.cs-share{position:absolute;left:9px;bottom:8px;font-size:9px;font-weight:600;color:#B3B5C0;
  background:rgba(11,12,18,.85);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:3px 7px}
.cs-player{display:flex;align-items:center;gap:10px;margin-top:11px}
.cs-play{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:linear-gradient(180deg,#29E337,#76FF80);position:relative}
.cs-play::after{content:"";position:absolute;left:9px;top:7px;border:solid transparent;border-width:5px 0 5px 8px;border-left-color:#000}
.cs-track{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.12);position:relative}
.cs-track i{position:absolute;left:0;top:0;bottom:0;width:46%;border-radius:4px;background:#58FF29}
.cs-track::after{content:"";position:absolute;left:46%;top:50%;transform:translate(-50%,-50%);width:9px;height:9px;
  border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(88,255,41,.3)}
.cs-time{flex:0 0 auto;font-size:10px;color:#B3B5C0;font-variant-numeric:tabular-nums}
.cs-people{display:flex;align-items:center;gap:7px;margin-top:12px}
.cs-av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:9.5px;font-weight:800;
  color:#B3B5C0;background:#1B1C25;border:1.5px solid #0F1018;margin-left:-9px}
.cs-av:first-child{margin-left:0}
.cs-mentor{background:linear-gradient(135deg,#58FF29,#13B5E8);color:#000;border-color:#0F1018}
.cs-more{margin-left:6px;font-size:10px;color:#8A8D99}

/* ---- the written rule the lesson produces ---- */
.cs-rules{position:absolute;left:196px;top:352px;width:318px;z-index:3;padding:16px 17px 14px;border-radius:16px;
  background:rgba(15,16,24,.96);border:1px solid rgba(88,255,41,.4);backdrop-filter:blur(8px);
  box-shadow:0 34px 62px -26px #000,0 0 34px -8px rgba(88,255,41,.22);
  transform:rotate(2.2deg);animation:csFloat2 9s ease-in-out infinite}
@keyframes csFloat2{0%,100%{transform:rotate(2.2deg) translateY(0)}50%{transform:rotate(2.2deg) translateY(-7px)}}
.cs-rh{display:flex;align-items:center;gap:9px;margin:0 0 12px;font-size:10px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:#76FF80}
.cs-rdot{width:8px;height:8px;border-radius:50%;background:#58FF29;box-shadow:0 0 0 4px rgba(88,255,41,.16)}
.cs-r{position:relative;padding:9px 11px 9px 36px;border-radius:10px;font-size:12px;line-height:1.35;color:#B3B5C0;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);margin-bottom:7px}
.cs-r::before{content:"";position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;
  border-radius:50%;border:1.5px solid rgba(255,255,255,.25)}
.cs-r.on{color:#fff}
.cs-r.on::before{background:#58FF29;border-color:#58FF29}
.cs-r.on::after{content:"";position:absolute;left:16px;top:50%;width:4px;height:8px;
  border:solid #000;border-width:0 2px 2px 0;transform:translateY(-62%) rotate(42deg)}
.cs-rf{margin:11px 0 0;font-size:10.5px;font-weight:700;color:#76FF80}


@media(prefers-reduced-motion:reduce){.cs-win,.cs-rules{animation:none}}
@media(max-width:520px){
  .cs-body{grid-template-columns:158px 1fr}
  .cs-mods li{font-size:10.5px;padding:6px 6px}
  .cs-rules{left:170px;width:300px}
}
html[data-theme="light"] .cs-win{background:linear-gradient(180deg,#FFFFFF,#EEF0F4);border-color:rgba(15,16,24,.14)}
html[data-theme="light"] .cs-btitle,html[data-theme="light"] .cs-more,html[data-theme="light"] .cs-pt{color:#5B5F6E}
html[data-theme="light"] .cs-mods li{color:#5B5F6E}
html[data-theme="light"] .cs-mods li.done,html[data-theme="light"] .cs-mods li.now,html[data-theme="light"] .cs-mh b{color:#0F1018}
html[data-theme="light"] .cs-side{background:rgba(15,16,24,.03);border-right-color:rgba(15,16,24,.08)}
html[data-theme="light"] .cs-rules{background:rgba(255,255,255,.97)}
html[data-theme="light"] .cs-r{color:#5B5F6E;background:rgba(15,16,24,.04);border-color:rgba(15,16,24,.08)}
html[data-theme="light"] .cs-r.on{color:#0F1018}
html[data-theme="light"] .cs-rh,html[data-theme="light"] .cs-rf{color:#12841F}

/* ============================================================
   HERO EXPLAINER — a browser-window mockup whose tabs walk
   through the mentorship. Fluid (never zoom-scaled: it carries
   real copy). Each slide animates its own story.
   ============================================================ */
.mx{position:relative;width:100%;max-width:566px;flex:0 0 auto;perspective:1600px}
.mx-glow{position:absolute;left:-34px;right:-34px;top:6px;bottom:-16px;pointer-events:none;z-index:0;
  background:radial-gradient(58% 56% at 52% 48%,rgba(41,227,55,.26),rgba(54,80,49,.32) 52%,transparent 76%);filter:blur(13px)}

/* ---------- the tablet ---------- */
/* floats: a slow rise + fall with a matching ground shadow that shrinks as it lifts */
.mx-shadow{position:absolute;left:13%;right:13%;bottom:-30px;height:30px;border-radius:50%;z-index:1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,0,0,.72),rgba(0,0,0,.28) 58%,transparent 78%);filter:blur(12px);
  animation:mxShadow 7.5s ease-in-out infinite}
@keyframes mxShadow{0%,100%{transform:scaleX(1);opacity:.8}50%{transform:scaleX(.86);opacity:.48}}
@keyframes mxFloat{
  /* straight on: it lifts and settles, it does not tip */
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-16px)}
}
.mx-tablet{position:relative;z-index:2;border-radius:26px;padding:14px;
  animation:mxFloat 7.5s ease-in-out infinite;will-change:transform;
  background:linear-gradient(155deg,#33363f 0%,#1b1d25 40%,#0c0d13 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.11),inset 0 1px 0 rgba(255,255,255,.09),
             0 46px 86px -34px rgba(0,0,0,.95),0 0 46px -14px rgba(88,255,41,.24)}
.mx-cam{position:absolute;top:5.5px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;
  background:#05060a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 0 5px rgba(88,255,41,.3)}
/* fixed screen: the frame must never resize between slides */
.mx-screen-in{position:relative;display:flex;flex-direction:column;height:420px;border-radius:13px;overflow:hidden;
  background:#0F1018;box-shadow:inset 0 0 0 1px rgba(0,0,0,.9)}
/* the hero centres + justifies its copy on mobile; the screen must not inherit that */
.mx-screen-in,.mx-screen-in p,.mx-screen-in div,.mx-screen-in span,.mx-screen-in b,
.mx-screen-in small,.mx-screen-in em{text-align:left!important;text-align-last:auto!important;hyphens:manual!important}
.mx-screen-in .mx-tab,.mx-screen-in .mx-si,.mx-screen-in .mx-tile,.mx-screen-in .mx-s,
.mx-screen-in .mx-cav,.mx-screen-in .mx-stamp{text-align:center!important}
.mx-status{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:7px 14px 5px;
  font-size:10.5px;font-weight:700;color:#8A8D99}
.mx-sicons{display:flex;align-items:flex-end;gap:3px}
.mx-sicons i{display:block;width:3px;border-radius:1px;background:#8A8D99}
.mx-sicons i:nth-child(1){height:4px}.mx-sicons i:nth-child(2){height:6px}.mx-sicons i:nth-child(3){height:8px}
.mx-bat{width:17px;height:9px;border-radius:2.5px;border:1px solid #8A8D99;position:relative;margin-left:4px}
.mx-bat::after{content:"";position:absolute;inset:1.5px;right:5px;background:#58FF29;border-radius:1px}
.mx-chrome{flex:0 0 auto;padding:2px 10px 8px}
.mx-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.mx-tab{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;cursor:pointer;
  padding:9px 8px;border-radius:10px;border:1px solid rgba(255,255,255,.08);color:#8A8D99;background:rgba(255,255,255,.04);
  transition:background .22s,color .22s,border-color .22s}
.mx-tab:hover{background:rgba(255,255,255,.08);color:#fff}
.mx-tab:focus-visible{outline:2px solid #58FF29;outline-offset:2px}
.mx-fv{flex:0 0 auto;width:11px;height:11px;border-radius:3px;background:rgba(255,255,255,.2);transition:background .22s}
.mx-lb{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-lb-s{display:none;font-size:11px;font-weight:700;white-space:nowrap}
.mx-tab.is-on{background:rgba(88,255,41,.12);border-color:rgba(88,255,41,.5);color:#fff}
.mx-tab.is-on .mx-fv{background:linear-gradient(135deg,#58FF29,#13B5E8)}
.mx-tab.is-on .mx-lb,.mx-tab.is-on .mx-lb-s{font-weight:700}
.mx-load{flex:0 0 auto;height:2px;background:rgba(255,255,255,.06)}
.mx-load i{display:block;height:100%;width:0;background:linear-gradient(90deg,#29E337,#76FF80,#13B5E8)}
.mx:not(.mx-static) .mx-load i{animation:mxBar 6.6s linear forwards}
.mx.mx-paused .mx-load i{animation-play-state:paused}
@keyframes mxBar{from{width:0}to{width:100%}}

/* ---------- shared slide bits ---------- */
.mx-stage{position:relative;flex:1;min-height:0}
.mx-slide{position:absolute;inset:0;display:flex;flex-direction:column;padding:12px 14px 14px}
.mx-slide[hidden]{display:none}
.mx-slide > :first-child{flex:1;min-height:0}
.mx-cap{flex:0 0 auto;margin:10px 0 0;font-size:13px;line-height:1.5;color:rgba(255,255,255,.7)}
.mx-cap b{color:#fff;font-weight:700}
.mx-slide.is-on .mx-cap{animation:mxUp .5s .2s cubic-bezier(.2,.7,.2,1) both}
@keyframes mxUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes mxPop{from{opacity:0;transform:translateY(9px) scale(.92)}to{opacity:1;transform:none}}
@keyframes mxSlideIn{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}

/* ---------- 1 · the live room ---------- */
.mx-screen{position:relative;border-radius:12px;overflow:hidden;background:#0b0c12;border:1px solid rgba(255,255,255,.08)}
.mx-screen svg{display:block;width:100%;height:128px}
.mx-slide.is-on .mx-cd line{animation:mxCandle .4s both;transform-origin:center}
.mx-slide.is-on .mx-cd line:nth-child(1){animation-delay:.18s}.mx-slide.is-on .mx-cd line:nth-child(2){animation-delay:.24s}
.mx-slide.is-on .mx-cd line:nth-child(3){animation-delay:.30s}.mx-slide.is-on .mx-cd line:nth-child(4){animation-delay:.36s}
.mx-slide.is-on .mx-cd line:nth-child(5){animation-delay:.42s}.mx-slide.is-on .mx-cd line:nth-child(6){animation-delay:.48s}
.mx-slide.is-on .mx-cd line:nth-child(7){animation-delay:.54s}.mx-slide.is-on .mx-cd line:nth-child(8){animation-delay:.60s}
.mx-slide.is-on .mx-cd line:nth-child(9){animation-delay:.66s}.mx-slide.is-on .mx-cd line:nth-child(10){animation-delay:.72s}
@keyframes mxCandle{from{opacity:0;transform:scaleY(.15)}to{opacity:1;transform:scaleY(1)}}
.mx-st{stroke-dasharray:620;stroke-dashoffset:620}
.mx-slide.is-on .mx-st{animation:mxDraw 1.15s .45s ease both}
@keyframes mxDraw{to{stroke-dashoffset:0}}
.mx-ping{opacity:0}
.mx-slide.is-on .mx-ping{animation:mxPing 1.6s 1.5s ease-out infinite}
@keyframes mxPing{0%{opacity:.9;r:4}70%{opacity:0;r:13}100%{opacity:0;r:13}}
.mx-rec{position:absolute;right:9px;top:9px;display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:800;
  letter-spacing:.12em;color:#fff;background:rgba(255,90,110,.9);border-radius:5px;padding:3px 7px}
.mx-rec i{width:5px;height:5px;border-radius:50%;background:#fff;animation:mxBlink 1.4s steps(2) infinite}
@keyframes mxBlink{50%{opacity:.15}}
.mx-sh{position:absolute;left:9px;top:9px;font-size:9px;font-weight:600;color:#B3B5C0;
  background:rgba(11,12,18,.85);border:1px solid rgba(255,255,255,.1);border-radius:5px;padding:3px 7px}
.mx-sub{position:absolute;left:9px;right:9px;bottom:8px;font-size:10.5px;line-height:1.4;color:#fff;
  background:rgba(8,9,14,.86);border-radius:7px;padding:6px 9px;backdrop-filter:blur(4px)}
.mx-slide.is-on .mx-sub{animation:mxUp .45s 1.5s both}
.mx-chat{display:flex;align-items:center;gap:8px;margin-top:10px}
.mx-cav{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:800;
  color:#000;background:#76FF80;flex:0 0 auto}
.mx-cmsg{font-size:11.5px;color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);
  border-radius:10px 10px 10px 3px;padding:7px 11px}
.mx-slide.is-on .mx-chat{animation:mxSlideIn .45s 2.1s both}
.mx-tiles{display:flex;align-items:center;gap:8px;margin-top:11px}
.mx-tile{position:relative;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-size:12px;
  font-weight:800;color:#B3B5C0;background:#1B1C25;border:1px solid rgba(255,255,255,.09)}
.mx-mentor{width:auto;padding:0 13px;gap:1px;flex-direction:column;color:#000;border:0;
  background:linear-gradient(135deg,#58FF29,#13B5E8)}
.mx-mentor small{font-size:7.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.72}
.mx-ring{position:absolute;inset:-4px;border-radius:14px;border:2px solid #58FF29;opacity:0}
.mx-slide.is-on .mx-ring{animation:mxTalk 1.7s 1.1s ease-out infinite}
@keyframes mxTalk{0%{opacity:.9;transform:scale(.94)}70%{opacity:0;transform:scale(1.12)}100%{opacity:0}}
.mx-plus{background:transparent;color:#8A8D99;font-size:11px}
.mx-slide.is-on .mx-tile{animation:mxPop .4s both}
.mx-slide.is-on .mx-tile:nth-child(1){animation-delay:.80s}.mx-slide.is-on .mx-tile:nth-child(2){animation-delay:.88s}
.mx-slide.is-on .mx-tile:nth-child(3){animation-delay:.96s}.mx-slide.is-on .mx-tile:nth-child(4){animation-delay:1.04s}
.mx-slide.is-on .mx-tile:nth-child(5){animation-delay:1.12s}

/* ---------- 2 · the library ---------- */
.mx-libhead{display:flex;align-items:center;gap:16px;margin-bottom:13px}
.mx-big{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.mx-n{font-size:44px;font-weight:900;line-height:.9;letter-spacing:-.02em;
  background:linear-gradient(160deg,#CDFF64,#58FF29 45%,#13B5E8);-webkit-background-clip:text;background-clip:text;color:transparent}
.mx-big span{font-size:11px;line-height:1.3;color:#8A8D99}
.mx-slide.is-on .mx-big{animation:mxPop .5s .12s both}
.mx-cats{display:flex;flex-wrap:wrap;gap:6px;flex:1}
.mx-cat{font-size:10px;font-weight:700;color:#8A8D99;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);border-radius:50px;padding:5px 10px}
.mx-cat.on{color:#000;background:linear-gradient(135deg,#58FF29,#76FF80);border-color:transparent}
.mx-slide.is-on .mx-cat{animation:mxPop .35s both}
.mx-slide.is-on .mx-cat:nth-child(1){animation-delay:.24s}.mx-slide.is-on .mx-cat:nth-child(2){animation-delay:.31s}
.mx-slide.is-on .mx-cat:nth-child(3){animation-delay:.38s}.mx-slide.is-on .mx-cat:nth-child(4){animation-delay:.45s}
.mx-rows{display:grid;gap:7px}
.mx-row{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:11px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07)}
.mx-row div{flex:1;min-width:0}
.mx-row b{display:block;font-size:12px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-row small{font-size:9.5px;color:#8A8D99}
.mx-s{flex:0 0 auto;font-size:10px;font-weight:800;color:#58FF29;background:rgba(88,255,41,.1);border-radius:8px;padding:7px 6px}
.mx-spark{flex:0 0 auto;width:56px;height:20px}
.mx-slide.is-on .mx-spark path{stroke-dasharray:90;animation:mxSpark .6s both}
.mx-rest{background:transparent;border-style:dashed;border-color:rgba(255,255,255,.15)}
.mx-rest .mx-s{color:#8A8D99;background:rgba(255,255,255,.06)}
.mx-rest b{color:#B3B5C0}
@keyframes mxSpark{from{stroke-dashoffset:90}to{stroke-dashoffset:0}}
.mx-slide.is-on .mx-row{animation:mxSlideIn .45s both}
.mx-slide.is-on .mx-row:nth-child(1){animation-delay:.52s}.mx-slide.is-on .mx-row:nth-child(1) .mx-spark path{animation-delay:.75s}
.mx-slide.is-on .mx-row:nth-child(2){animation-delay:.64s}.mx-slide.is-on .mx-row:nth-child(2) .mx-spark path{animation-delay:.87s}
.mx-slide.is-on .mx-row:nth-child(3){animation-delay:.76s}.mx-slide.is-on .mx-row:nth-child(3) .mx-spark path{animation-delay:.99s}
.mx-slide.is-on .mx-row:nth-child(4){animation-delay:.88s}

/* ---------- 3 · the rulebook ---------- */
.mx-book{position:relative;border-radius:13px;padding:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09)}
.mx-bh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.mx-bt{font-size:12.5px;font-weight:700;color:#fff}
.mx-bd{font-size:10px;color:#8A8D99}
.mx-checks{display:grid;gap:8px}
.mx-ck{position:relative;display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:11px;font-size:12.5px;
  color:#B3B5C0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07)}
.mx-cb{flex:0 0 18px;width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(255,255,255,.25);position:relative}
.mx-ck em{margin-left:auto;font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:0}
.mx-ck.on em{color:#58FF29}
.mx-ck.bad em{color:#FF5A6E}
.mx-cb::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:9px;
  border:solid #000;border-width:0 2px 2px 0;transform:rotate(42deg);opacity:0}
.mx-ck.bad .mx-cb::after{left:3px;top:3px;width:10px;height:10px;border:0;
  background:linear-gradient(#fff,#fff) center/10px 2px no-repeat,linear-gradient(#fff,#fff) center/2px 10px no-repeat;
  transform:rotate(45deg)}
.mx-slide.is-on .mx-ck{animation:mxSlideIn .4s both}
.mx-slide.is-on .mx-ck:nth-child(1){animation-delay:.16s}.mx-slide.is-on .mx-ck:nth-child(2){animation-delay:.24s}
.mx-slide.is-on .mx-ck:nth-child(3){animation-delay:.32s}.mx-slide.is-on .mx-ck:nth-child(4){animation-delay:.40s}
.mx-slide.is-on .mx-ck .mx-cb{animation:mxFill .3s both}
.mx-slide.is-on .mx-ck .mx-cb::after,.mx-slide.is-on .mx-ck em{animation:mxFade .3s both}
.mx-slide.is-on .mx-ck:nth-child(1) .mx-cb,.mx-slide.is-on .mx-ck:nth-child(1) .mx-cb::after,.mx-slide.is-on .mx-ck:nth-child(1) em{animation-delay:.85s}
.mx-slide.is-on .mx-ck:nth-child(2) .mx-cb,.mx-slide.is-on .mx-ck:nth-child(2) .mx-cb::after,.mx-slide.is-on .mx-ck:nth-child(2) em{animation-delay:1.25s}
.mx-slide.is-on .mx-ck:nth-child(3) .mx-cb,.mx-slide.is-on .mx-ck:nth-child(3) .mx-cb::after,.mx-slide.is-on .mx-ck:nth-child(3) em{animation-delay:1.65s}
.mx-slide.is-on .mx-ck:nth-child(4) .mx-cb,.mx-slide.is-on .mx-ck:nth-child(4) .mx-cb::after,.mx-slide.is-on .mx-ck:nth-child(4) em{animation-delay:2.05s}
@keyframes mxFill{to{background:#58FF29;border-color:#58FF29}}
@keyframes mxFade{to{opacity:1}}
.mx-slide.is-on .mx-ck.bad .mx-cb{animation-name:mxFillBad}
@keyframes mxFillBad{to{background:#FF5A6E;border-color:#FF5A6E}}
.mx-ck.on{color:#fff}
/* verdict footer: the stamp used to sit on top of the last two rows */
.mx-foot{display:flex;align-items:center;gap:10px;margin-top:11px;padding:10px 12px;border-radius:11px;
  background:rgba(255,90,110,.08);border:1px solid rgba(255,90,110,.3)}
.mx-fdot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:#FF5A6E}
.mx-ftext{flex:1;font-size:11.5px;color:#FFB3BE}
.mx-ftext b{color:#fff;font-weight:700}
.mx-stamp{flex:0 0 auto;font-size:12px;font-weight:900;letter-spacing:.1em;color:#FF5A6E;
  border:2px solid #FF5A6E;border-radius:6px;padding:4px 9px;transform:rotate(-5deg);opacity:0}
.mx-slide.is-on .mx-foot{animation:mxUp .4s 2.35s both}
.mx-slide.is-on .mx-stamp{animation:mxStamp .5s 2.6s cubic-bezier(.2,1.5,.4,1) both}
@keyframes mxStamp{from{opacity:0;transform:rotate(-5deg) scale(1.9)}to{opacity:1;transform:rotate(-5deg) scale(1)}}

/* ---------- 4 · automation ---------- */
.mx-algo{position:relative}
.mx-nocode{position:absolute;right:0;top:-2px;font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#76FF80;background:rgba(88,255,41,.1);border:1px solid rgba(88,255,41,.3);border-radius:50px;padding:4px 11px}
.mx-slide.is-on .mx-nocode{animation:mxPop .4s 1.6s both}
.mx-flow{display:grid;gap:0}
.mx-node{position:relative;padding:12px 14px 12px 46px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.mx-node b{display:block;font-size:12.5px;color:#fff;margin-bottom:3px}
.mx-node small{font-size:10.5px;color:#8A8D99;line-height:1.45}
.mx-si{position:absolute;left:13px;top:13px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:800;color:#000;background:linear-gradient(135deg,#58FF29,#13B5E8)}
.mx-wire{display:block;height:22px;margin-left:23px;position:relative}
.mx-wire i{position:absolute;left:0;top:0;bottom:0;width:2px;background:rgba(88,255,41,.35);transform:scaleY(0);transform-origin:top}
.mx-wire em{position:absolute;left:-3px;top:0;width:8px;height:8px;border-radius:50%;background:#58FF29;opacity:0;
  box-shadow:0 0 10px rgba(88,255,41,.9)}
.mx-slide.is-on .mx-wire i{animation:mxWire .3s both}
.mx-slide.is-on .mx-wire em{animation:mxPulseDot .55s both}
@keyframes mxWire{to{transform:scaleY(1)}}
@keyframes mxPulseDot{0%{opacity:0;top:0}20%{opacity:1}80%{opacity:1}100%{opacity:0;top:100%}}
.mx-live-node{border-color:rgba(88,255,41,.4);background:rgba(88,255,41,.06)}
.mx-tg{position:absolute;right:13px;top:50%;transform:translateY(-50%);width:44px;height:24px;border-radius:50px;
  background:rgba(255,255,255,.12)}
.mx-tg i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#8A8D99}
.mx-slide.is-on .mx-tg{animation:mxTgOn .35s 1.55s both}
.mx-slide.is-on .mx-tg i{animation:mxTgKnob .35s 1.55s both}
@keyframes mxTgOn{to{background:linear-gradient(90deg,#29E337,#76FF80)}}
@keyframes mxTgKnob{to{left:23px;background:#0F1018}}
.mx-slide.is-on .mx-node{animation:mxUp .45s both}
.mx-slide.is-on .mx-node:nth-of-type(1){animation-delay:.16s}
.mx-slide.is-on .mx-node:nth-of-type(2){animation-delay:.66s}
.mx-slide.is-on .mx-node:nth-of-type(3){animation-delay:1.16s}
.mx-slide.is-on .mx-wire:nth-of-type(1) i{animation-delay:.44s}
.mx-slide.is-on .mx-wire:nth-of-type(1) em{animation-delay:.48s}
.mx-slide.is-on .mx-wire:nth-of-type(2) i{animation-delay:.94s}
.mx-slide.is-on .mx-wire:nth-of-type(2) em{animation-delay:.98s}

/* ---------- responsive ---------- */
@media(max-width:1120px){.mx-lb{font-size:11px}}
@media(max-width:600px){
  .mx-screen-in{height:500px}
  .mx-shadow{bottom:-24px;left:16%;right:16%}
  .mx-slide{padding:11px 12px 12px}
  .mx-tabs{gap:2px}
  .mx-tab{padding:8px 6px;gap:5px;justify-content:center}
  .mx-fv,.mx-lb{display:none}
  .mx-lb-s{display:inline}
  .mx-addr{font-size:10px}
  .mx-cap{font-size:13px}
  .mx-tile{width:36px;height:36px;font-size:11px}
  .mx-mentor{width:36px;padding:0}
  .mx-mentor small{display:none}
  .mx-n{font-size:36px}
  .mx-libhead{gap:11px}
  .mx-cat{font-size:9px;padding:4px 8px}
  .mx-stamp{font-size:11px;padding:3px 7px}
  .mx-ftext{font-size:10.5px}
}
@media(prefers-reduced-motion:reduce){
  .mx *,.mx *::before,.mx *::after{animation:none!important}
  .mx-tablet{transform:none}
  .mx-shadow{opacity:.6;transform:none}
  .mx-load i{width:100%}
  .mx-st{stroke-dashoffset:0}
  .mx-cb{background:#58FF29;border-color:#58FF29}
  .mx-ck.bad .mx-cb{background:#FF5A6E;border-color:#FF5A6E}
  .mx-cb::after,.mx-ck em,.mx-stamp,.mx-nocode,.mx-sub{opacity:1}
  .mx-stamp{transform:rotate(-5deg)}
  .mx-wire i{transform:scaleY(1)}
  .mx-tg{background:linear-gradient(90deg,#29E337,#76FF80)}
  .mx-tg i{left:23px;background:#0F1018}
}

/* ---------- light theme ---------- */
html[data-theme="light"] .mx-screen-in{background:#FFFFFF}
html[data-theme="light"] .mx-status{color:#5B5F6E}
html[data-theme="light"] .mx-tab{background:rgba(15,16,24,.04);border-color:rgba(15,16,24,.1);color:#5B5F6E}
html[data-theme="light"] .mx-tab.is-on{background:rgba(18,132,31,.1);border-color:rgba(18,132,31,.45);color:#0F1018}
html[data-theme="light"] .mx-addr b,html[data-theme="light"] .mx-row b,html[data-theme="light"] .mx-node b,
html[data-theme="light"] .mx-bt,html[data-theme="light"] .mx-ck.on,html[data-theme="light"] .mx-cap b,
html[data-theme="light"] .mx-cmsg{color:#0F1018}
html[data-theme="light"] .mx-cap{color:#3F4352}
html[data-theme="light"] .mx-row,html[data-theme="light"] .mx-ck,html[data-theme="light"] .mx-node,
html[data-theme="light"] .mx-book,html[data-theme="light"] .mx-cmsg{
  background:rgba(15,16,24,.04);border-color:rgba(15,16,24,.09);color:#5B5F6E}

/* small print under the floating tablet (clears the ground shadow) */
.mx-legal{position:relative;z-index:2;margin:40px auto 0;font-size:11.5px;line-height:1.55;
  color:#8A8D99;text-align:center!important;text-wrap:balance}
@media(max-width:600px){.mx-legal{margin-top:34px;font-size:11px}}
html[data-theme="light"] .mx-legal{color:#5B5F6E}

/* ============================================================
   MOBILE: headings read left, and the hero badge holds one line
   ============================================================ */
@media(max-width:920px){
  .sw-hero{justify-items:stretch;text-align:left}
  .sw-hero > .hero-badge{justify-self:start;margin-inline:0;justify-content:flex-start;text-align:left;
    font-size:11px;font-weight:600;padding:6px 13px 6px 10px;gap:7px;
    white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .sw-hero > .hero-badge svg{width:13px;height:13px}
  .hero .hero-h1,.hero h1{text-align:left!important}
  .hero .lede{text-align:left!important;margin-inline:0}
  .hero .micro{text-align:left}
  /* section headers stop being centred once the page is one column */
  .sec-head{text-align:left}
  .sec-head .lede{margin-left:0;margin-right:0}
  .sec-head .eyebrow,.sec-head .chips{justify-content:flex-start}
}
@media(max-width:400px){
  .sw-hero > .hero-badge{font-size:10px;padding:5px 11px 5px 9px;gap:6px}
  .sw-hero > .hero-badge svg{width:12px;height:12px}
}

/* tips-vs-rules: the same chart, annotated two ways */
.vs-lead{margin:0 0 20px;text-align:center;font-size:15px;color:rgba(255,255,255,.62)}
.vs-lead b{color:#fff;font-weight:700}
.vs-chart{display:block;width:100%;height:auto;margin:0 0 20px;border-radius:12px;
  border:1px solid rgba(255,255,255,.09);background:#0b0c12;shape-rendering:geometricPrecision}
.vs-chart text{font-family:var(--body);paint-order:stroke;stroke:#0b0c12;stroke-width:3px;stroke-linejoin:round}
.vs-bad .vs-chart{border-color:rgba(255,90,110,.28)}
.vs-good .vs-chart{border-color:rgba(88,255,41,.3)}
@media(max-width:920px){.vs-lead{text-align:left!important;text-align-last:auto!important;font-size:14px}}
@media(max-width:860px){.vs-chart{margin-bottom:16px}}
html[data-theme="light"] .vs-lead{color:#3F4352}
html[data-theme="light"] .vs-lead b{color:#0F1018}
html[data-theme="light"] .vs-chart{background:#0b0c12}

/* ticker removed: close the dead band between the hero and the stats strip */
.hero{padding-bottom:clamp(18px,2vw,32px)!important}
.mx-legal{margin-top:32px}
.sw-stats-wrap{padding-top:0}
@media(max-width:920px){
  .hero{padding-bottom:clamp(14px,3vw,24px)!important}
  .mx-legal{margin-top:28px}
}

/* ---- bigger tablet + a real chart inside it ---- */
@media(min-width:921px){
  .sw-hero{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)!important;column-gap:34px}
}
.mx{max-width:672px}
.mx-screen-in{height:548px}
/* beats the generic .mx-screen svg rule above */
.mx-screen .mx-cchart{display:block;width:100%;height:240px;background:#0b0c12}
.mx-room{display:flex;flex-direction:column;min-height:0}
.mx-screen{flex:0 0 auto}
.mx-tiles{margin-top:auto}
.mx-cchart text{font-family:var(--body);paint-order:stroke;stroke:#0b0c12;stroke-width:2.5px;stroke-linejoin:round}
.mx-share{position:absolute;left:10px;top:26px}
.mx-rec{top:5px;right:8px}
@media(max-width:920px){
  .mx-screen-in{height:528px}
  .mx-screen .mx-cchart{height:210px}
}
@media(max-width:600px){
  .mx-screen-in{height:528px}
  .mx-screen .mx-cchart{height:186px}
}

/* desktop: these three hold a single line (they wrap normally on mobile) */
@media(min-width:921px){
  #rule-based .sec-head h2{font-size:min(4.6vw,60px)}
  #rule-based .sec-head .lede{max-width:none}
  .vs-note{max-width:none}
}

/* desktop: these headings hold one line too (sizes derived from measured width) */
@media(min-width:921px){
  #choose-path .sec-head h2{font-size:min(4.5vw,58px)}
  #choose-path .sec-head .lede{max-width:none}
  #gallery .sec-head h2{font-size:min(4.7vw,61px)}
}

/* mentor cut-out sits on the card, not in a photo box */
.author-row .avatar{background:radial-gradient(120% 100% at 50% 0%,rgba(88,255,41,.14),transparent 62%),
  linear-gradient(170deg,#1B1C25,#0F1018);overflow:hidden}
.author-row .avatar img{object-fit:cover;object-position:50% 4%}

/* ---------------------------------------------------------------- FAQ: three, then the rest on ask */
#faqList.is-clipped > .faq-item:nth-of-type(n+4){display:none!important}
.faq-more{display:flex;justify-content:center;margin-top:20px}
#faqMoreBtn{cursor:pointer}
#faqMoreBtn .fm-close{display:none}
#faqMoreBtn.is-open .fm-open{display:none}
#faqMoreBtn.is-open .fm-close{display:inline}

/* -------------------------------------------------- live class: the mentor answers, in rules */
.mx-chat-m{margin-top:9px}
.mx-cav-dd{background:linear-gradient(180deg,#29E337,#76FF80)!important;color:#04210b!important;
  border-color:rgba(88,255,41,.5)!important}
.mx-cmsg-m{background:rgba(88,255,41,.09)!important;border-color:rgba(88,255,41,.26)!important}
.mx-cmsg-m b{color:#76FF80;font-weight:800}
.mx-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.mx-mchip{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;letter-spacing:.2px;
  color:#A7ACBA;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  border-radius:999px;padding:3.5px 9px;white-space:nowrap}
.mx-mchip .mx-dot{width:5px;height:5px;border-radius:50%;background:#58FF29;
  box-shadow:0 0 0 3px rgba(88,255,41,.16);animation:mxLiveDot 1.9s ease-in-out infinite}
@keyframes mxLiveDot{0%,100%{opacity:1}50%{opacity:.35}}
.mx-slide.is-on .mx-chat-m{animation:mxSlideIn .45s 2.75s both}
.mx-slide.is-on .mx-meta{animation:mxSlideIn .45s 3.2s both}
html[data-theme="light"] .mx-mchip{color:#3D4354}
@media(prefers-reduced-motion:reduce){.mx-tablet{animation:none}.mx-mchip .mx-dot{animation:none}}

/* the hero lede is gone; the H1 now carries its own separation from the bullets */
.sw-hero>.hero-h1{margin-bottom:26px}
@media(max-width:920px){.sw-hero>.hero-h1{margin-bottom:22px}}

/* -------------------------------------------------- four habits: the picture carries it, the line just names it */
.rb-card{padding:14px 14px 22px!important}
.rb-art{border-radius:16px;overflow:hidden;background:linear-gradient(165deg,#191B23,#0E0F15);
  border:1px solid rgba(255,255,255,.08);margin-bottom:18px}
.rb-svg{display:block;width:100%;height:auto}
.rb-svg text{font-family:var(--body)}
.rb-card .num{margin:0 0 6px;padding-left:6px}
.rb-card h3{font-size:19px;margin:0 0 8px;padding-left:6px;line-height:1.25}
.rb-card p{font-size:14.5px;line-height:1.55;margin:0;padding-left:6px;color:#B3B5C0}
html[data-theme="light"] .rb-art{background:linear-gradient(165deg,#F4F6F4,#E9EDE9);border-color:rgba(15,16,24,.12)}
html[data-theme="light"] .rb-card p{color:#3D4354}

/* the pinned sections already own a lot of vertical scroll, so they do not need
   the full section rhythm on top of it */
#the-shift{padding-bottom:36px!important}
#rule-based{padding-top:36px!important;padding-bottom:36px!important}
@media(max-width:860px){
  #the-shift{padding-bottom:52px!important}
  #rule-based{padding-top:52px!important;padding-bottom:52px!important}
}
html.motion .pin-sec .pin-hint{margin-top:16px!important;margin-bottom:0!important}
#rule-based{padding-bottom:22px!important}
@media(max-width:860px){#rule-based{padding-bottom:52px!important}}

/* The sticky header changes height when it compacts. Scroll anchoring reacts to
   that by moving the scroll position, which is exactly the wrong thing here —
   it makes the header re-cross its own threshold. Opt this document out. */
html,body{overflow-anchor:none}

/* -------------------------------------------------- tablet UI in the light theme
   The device screen turns white, but every label inside it was authored for the
   dark screen — neon on white measures 1.3:1, and "sitting this one out" was
   literally white on white. Remap to the light palette (deep green #12841F,
   deep red #C62839, muted #5B5F6E) so each one clears contrast. */
html[data-theme="light"] .mx-ck.on em,
html[data-theme="light"] .mx-s,
html[data-theme="light"] .mx-nocode,
html[data-theme="light"] .mx-cmsg-m b{color:#12841F}
html[data-theme="light"] .mx-s{background:rgba(18,132,31,.12)}
html[data-theme="light"] .mx-ck.bad em,
html[data-theme="light"] .mx-stamp,
html[data-theme="light"] .mx-fdot{color:#C62839}
html[data-theme="light"] .mx-fdot{background:#C62839}
html[data-theme="light"] .mx-stamp{border-color:rgba(198,40,57,.55)}
html[data-theme="light"] .mx-foot{background:rgba(198,40,57,.07);border-color:rgba(198,40,57,.3)}
html[data-theme="light"] .mx-ftext{color:#8A3540}
html[data-theme="light"] .mx-ftext b{color:#0F1018}
html[data-theme="light"] .mx-rec{background:#C62839;color:#fff}
html[data-theme="light"] .mx-cb{border-color:rgba(15,16,24,.28)}
/* the small print inside the screen */
html[data-theme="light"] .mx-cat,
html[data-theme="light"] .mx-bd,
html[data-theme="light"] .mx-big span,
html[data-theme="light"] .mx-rest .mx-s,
html[data-theme="light"] .mx-tile.mx-plus,
html[data-theme="light"] .mx-screen-in small{color:#5B5F6E}
html[data-theme="light"] .mx-rest .mx-s{background:rgba(15,16,24,.06)}
html[data-theme="light"] .mx-cat.on{color:#0B5F16;background:rgba(18,132,31,.14)}

/* -------------------------------------------------- gradient words in the light theme
   The neon lime→mint→sky ramp is built for a #0F1018 ground; on the light paper
   its lightest stop measures under 2:1. Same hue journey, darkened so every stop
   stays legible. One token, so every .grad / .accent / <em> heading follows. */
html[data-theme="light"]{
  --grad-text:linear-gradient(92.36deg,#2A7C09 -9.78%,#0A7A59 47.15%,#0A6E9E 105.24%)!important;
}
html[data-theme="light"] .mx-n{
  background:linear-gradient(160deg,#2A7C09,#0A7A59 45%,#0A6E9E);
  -webkit-background-clip:text;background-clip:text}
/* muted text that sits on the light paper (not inside the dark device mockups,
   which keep their own palette) */
html[data-theme="light"] .hero .micro,
html[data-theme="light"] .sw-stat .l,
html[data-theme="light"] .author-row .role,
html[data-theme="light"] .wb-lbl,
html[data-theme="light"] .form-eyebrow,
html[data-theme="light"] .proof-strip,
html[data-theme="light"] .wb-card.wb-soon .wb-when,
html[data-theme="light"] html.motion .pin-sec .pin-hint,
html[data-theme="light"] .pin-hint{color:#5B5F6E!important}
html[data-theme="light"] .hero .micro a{color:#12841F!important}
/* some inline styles read color:var(--muted,#b3b5c0); the var was never defined,
   so they all fell back to the dark-theme grey */
html[data-theme="light"]{--muted:#5B5F6E}
/* --gilt is the lighter green; on white it only measured 3.2:1 wherever it is
   used as text (star ratings, tags, small caps labels, the price). Darkened so
   those clear 4.5:1 — it still reads as the lighter end of the button gradient. */
html[data-theme="light"]{--gilt:#15801F!important}