/* Stellar front page, rework-centered-quiet. No framework. */
:root{
  --ink:#13211b; --text:#3b4843; --muted:#5b6762; --line:#e4ebe7; --line-2:#d5dfda;
  --canvas:#ffffff; --soft:#f6f9f7; --soft-2:#eef4f1;
  --green:#13863f; --green-d:#0e7339; --green-dd:#0b5a2d; --green-50:#e9f6ee; --green-100:#d3eedd;
  --sky:#2479c4; --sky-50:#e8f3fc; --coral:#d9533c; --coral-50:#fdeeea; --amber:#a15f00; --amber-50:#fdf3e1;
  --teal:#0d7a73; --teal-50:#e2f5f3; --rose:#c23a5b; --rose-50:#fcebef; --navy:#0f2238; --navy-2:#173350;
  --r-sm:12px; --r:18px; --r-lg:24px; --r-xl:32px;
  --shadow-sm:0 1px 2px rgba(16,34,27,.06),0 1px 1px rgba(16,34,27,.04);
  --shadow:0 1px 2px rgba(18,22,20,.04);
  --shadow-lg:0 1px 3px rgba(18,22,20,.05);
  --font-h:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.6;color:var(--text);background:var(--canvas);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-h);color:var(--ink);margin:0;letter-spacing:-.02em;line-height:1.15}
p{margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid #2479c4;outline-offset:3px;border-radius:8px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;font-weight:600}
.skip:focus{top:12px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 32px}
.defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- type helpers ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 12.5px/1 var(--font);letter-spacing:.12em;text-transform:none;color:var(--green-d)}
.eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:currentColor}
.eyebrow.sky{color:var(--sky)} .eyebrow.coral{color:#b8412c} .eyebrow.amber{color:var(--amber)} .eyebrow.teal{color:var(--teal)} .eyebrow.rose{color:var(--rose)}
.h2{font-size:clamp(30px,3.6vw,44px);font-weight:600;margin-top:14px}
.h3{font-size:clamp(26px,2.8vw,34px);font-weight:600;margin-top:12px}
.lead{font-size:18px;line-height:1.65;color:var(--text);margin-top:16px;max-width:560px}
.sec{padding:112px 0}
.sec-head{max-width:720px}
.sec-head.center{margin:0 auto;text-align:center}
.sec-head.center .lead{margin-left:auto;margin-right:auto}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 24px;border-radius:14px;font:600 16px/1 var(--font-h);letter-spacing:-.005em;border:0;cursor:pointer;transition:transform .15s ease,translate .15s ease,scale .15s ease,rotate .15s ease,background-color .15s ease,box-shadow .15s ease;white-space:nowrap}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--green);color:#fff;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),0 6px 16px -6px rgba(21,146,74,.55)}
.btn-primary:hover{background:var(--green-d)}
.btn-primary:active{translate:0 1px;box-shadow:inset 0 -1px 0 rgba(0,0,0,.18)}
.btn-ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2),inset 0 -3px 0 var(--line)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px #b9c7c0,inset 0 -3px 0 var(--line)}
.btn-sm{height:42px;padding:0 18px;font-size:15px;border-radius:12px}
.btn-white{background:#fff;color:var(--green-dd);box-shadow:inset 0 -3px 0 rgba(0,0,0,.08),0 8px 20px -8px rgba(0,0,0,.35)}
.btn-white:hover{background:#f2faf5}
.link-arrow{display:inline-flex;align-items:center;gap:6px;font:600 15px/1.2 var(--font-h);color:var(--green-d)}
.link-arrow svg{width:16px;height:16px;transition:transform .15s,translate .15s,scale .15s,rotate .15s}
.link-arrow:hover svg{translate:3px 0}
.link-arrow:hover{color:var(--green-dd)}
.pill-open{display:inline-flex;align-items:center;gap:4px;background:#fff;color:var(--ink);height:34px;padding:0 14px;border-radius:999px;font:600 14px/1 var(--font);box-shadow:var(--shadow-sm)}
.pill-open svg{width:14px;height:14px}
.new{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-radius:999px;background:var(--navy);color:#fff;font:600 11px/1 var(--font);letter-spacing:.02em}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s,background-color .2s}
.nav.scrolled{border-bottom-color:var(--line);background:rgba(255,255,255,.94)}
.nav.menu-open{background:#fff;border-bottom-color:var(--line)}
.nav-in{position:relative;display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);align-items:center;gap:20px;height:68px}
.nav-in>.brand{justify-self:start}
.brand{display:flex;align-items:center;gap:10px;font:600 21px/1 var(--font-h);color:var(--ink);letter-spacing:-.02em;border-radius:10px}
.brand img{width:36px;height:36px}
.nav-links{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
.nav-link,.dd-btn{display:flex;align-items:center;gap:5px;height:40px;padding:0 13px;border:0;border-radius:10px;background:none;font:600 15px/1 var(--font);color:#34413b;cursor:pointer;white-space:nowrap;transition:background-color .15s,color .15s}
.nav-link:hover,.dd-btn:hover{background:var(--soft-2);color:var(--ink)}
.nav-link:focus-visible,.dd-btn:focus-visible{outline-offset:1px;border-radius:10px}
.dd-btn svg{width:14px;height:14px;margin-right:-3px;color:var(--muted);transform:rotate(90deg);transition:transform .2s ease,translate .2s ease,scale .2s ease,rotate .2s ease,color .15s}
.dd-btn[aria-expanded=true]{background:var(--green-50);color:var(--green-dd)}
.dd-btn[aria-expanded=true] svg{transform:rotate(-90deg);color:var(--green-d)}
.nav-cta{justify-self:end;display:flex;align-items:center;gap:8px}

/* dropdown panels (positioned against .nav-in, left set by rework.js) */
.dd-panel{position:absolute;top:calc(100% - 6px);left:0;z-index:2;padding:10px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 2px 4px rgba(16,34,27,.04),0 28px 56px -18px rgba(16,34,27,.26);opacity:0;visibility:hidden;transform:translateY(6px) scale(.985);transform-origin:top center;transition:opacity .16s ease,transform .18s ease,translate .18s ease,scale .18s ease,rotate .18s ease,visibility 0s linear .18s}
.dd-panel::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.dd.open .dd-panel{opacity:1;visibility:visible;transform:none;transition:opacity .16s ease,transform .18s ease,translate .18s ease,scale .18s ease,rotate .18s ease,visibility 0s}
.dd-wide{width:660px}
.dd-narrow{width:290px}
.dd-panel ul{list-style:none;margin:0;padding:0}
.dd-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.dd-list{display:grid;gap:2px}
.dd-item,.dd-foot{display:flex;align-items:center;gap:14px;padding:12px;border-radius:14px;transition:background-color .15s}
.dd-item:hover,.dd-item:focus-visible{background:var(--soft)}
.dd-item:focus-visible,.dd-foot:focus-visible{outline-offset:-3px;border-radius:14px}
.dd-item .tile,.dd-foot .tile{width:44px;height:44px;border-radius:13px;transition:transform .2s ease,translate .2s ease,scale .2s ease,rotate .2s ease}
.dd-item:hover .tile,.dd-foot:hover .tile{translate:0 -1px;scale:1.04}
.dd-item b,.dd-foot b{display:block;font:600 15px/1.25 var(--font-h);color:var(--ink);letter-spacing:-.01em}
.dd-item b+span,.dd-foot b+span{display:block;margin-top:3px;font:400 13.5px/1.35 var(--font);color:var(--muted)}
.dd-narrow .dd-item{padding:11px 14px}
.dd-foot{margin-top:8px;padding:12px 16px 12px 12px;background:var(--soft);border:1px solid var(--line)}
.dd-foot>span:nth-child(2){flex:1}
.dd-foot .tile{background:#fff;box-shadow:var(--shadow-sm)}
.dd-foot:hover{background:var(--green-50);border-color:var(--green-100)}
.dd-go{width:18px;height:18px;flex:none;color:var(--green-d);transition:transform .15s,translate .15s,scale .15s,rotate .15s}
.dd-foot:hover .dd-go{translate:3px 0}

/* mobile menu button and sheet */
.menu-btn{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line-2);background:#fff;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);transition:background-color .15s,border-color .15s}
.menu-btn:hover{background:var(--soft);border-color:#c3d0c9}
.menu-btn svg{width:20px;height:20px}
.menu-btn .i-close,.menu-btn[aria-expanded=true] .i-open{display:none}
.menu-btn[aria-expanded=true] .i-close{display:block}
.mobile-menu{display:none}
.nav.menu-open .nav-cta .btn{display:none}

@media (max-width:1180px){
  .nav-in{gap:12px}
  .nav-link,.dd-btn{padding:0 10px;font-size:14.5px}
}
@media (max-width:1000px){
  .nav-link,.dd-btn{padding:0 8px;font-size:14px}
  .nav-cta .btn{padding:0 14px}
}
@media (max-width:899px){
  .nav-in{display:flex;justify-content:space-between;height:64px}
  .nav-main{display:none}
  .menu-btn{display:flex}
  .brand img{width:32px;height:32px}
  .nav-cta .btn{height:40px;padding:0 14px;font-size:14.5px}
  .mobile-menu{display:block;position:absolute;left:0;right:0;top:100%;height:calc(100vh - 64px);height:calc(100dvh - 64px);overflow-y:auto;overscroll-behavior:contain;background:#fff;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .18s ease,transform .2s ease,translate .2s ease,scale .2s ease,rotate .2s ease,visibility 0s linear .2s}
  .mobile-menu.open{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform .2s ease,translate .2s ease,scale .2s ease,rotate .2s ease,visibility 0s}
  .mobile-menu>nav{padding-top:8px;padding-bottom:32px}
  .mm-list,.mm-sub{list-style:none;margin:0;padding:0}
  .mm-list>li{border-bottom:1px solid var(--line)}
  .mm-btn,.mm-link{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:58px;padding:0 4px;border:0;background:none;font:600 17px/1.2 var(--font-h);color:var(--ink);letter-spacing:-.01em;text-align:left;cursor:pointer}
  .mm-btn:focus-visible,.mm-link:focus-visible{outline-offset:-3px}
  .mm-btn svg{width:18px;height:18px;color:var(--muted);transform:rotate(90deg);transition:transform .2s ease,translate .2s ease,scale .2s ease,rotate .2s ease}
  .mm-btn[aria-expanded=true]{color:var(--green-dd)}
  .mm-btn[aria-expanded=true] svg{transform:rotate(-90deg);color:var(--green-d)}
  .mm-sub{display:grid;gap:2px;padding:0 0 14px}
  .mm-sub[hidden]{display:none}
  .mm-sub a{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 8px;border-radius:12px;font:600 15.5px/1.25 var(--font);color:#2b3833}
  .mm-sub a:hover{background:var(--soft)}
  .mm-sub a:focus-visible{outline-offset:-3px}
  .mm-sub .tile{width:36px;height:36px;border-radius:11px}
  .mm-plain a{padding-left:12px}
  .mm-cta{width:100%;margin-top:24px}
}

/* ---------- hero ---------- */
.hero{position:relative;padding:72px 0 40px;overflow:hidden}
.aurora{position:absolute;inset:-120px 0 auto 0;height:760px;pointer-events:none;z-index:-1;
  
  filter:blur(10px)}
.aurora::after{content:"";position:absolute;inset:0;}
.hero-grid{display:grid;grid-template-columns:1.02fr 1fr;gap:56px;align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:10px;height:36px;padding:0 14px 0 6px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),var(--shadow-sm);font:600 14px/1 var(--font);color:var(--ink)}
.hero-badge b{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;background:var(--green-50);color:var(--green-d);font-size:12.5px}
.hero h1{font-size:clamp(40px,5.1vw,66px);font-weight:600;letter-spacing:-.035em;line-height:1.04;margin-top:22px}
.hero h1 .rot{display:inline-block;color:var(--green);position:relative}
.hero h1 .rot::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.14em;border-radius:6px;background:var(--green-100);z-index:-1}
.hero .lead{font-size:19px;max-width:540px;margin-top:22px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-ctas .btn{height:56px;padding:0 28px;font-size:17px}
.hero-note{display:flex;align-items:center;gap:8px;margin-top:22px;font:600 14px/1.3 var(--font);color:var(--muted)}
.hero-note svg{width:18px;height:18px;color:var(--green)}

/* hero visual */
.hv{position:relative;height:600px;max-width:560px;margin-left:auto;width:100%}
.card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-lg),inset 0 0 0 1px rgba(19,33,27,.05)}
.hv-course{position:absolute;left:0;top:0;width:290px;overflow:hidden;z-index:1}
.hv-course-top{position:relative;height:118px;padding:18px 20px;color:#fff;overflow:hidden}
.hv-course-top small{display:block;font:600 12.5px/1 var(--font);opacity:.95}
.hv-course-top strong{display:block;margin-top:8px;font:600 20px/1.15 var(--font-h);letter-spacing:-.02em;max-width:180px}
.hv-course-top svg{position:absolute;right:-22px;top:-10px;width:120px;height:120px}
.hv-path{padding:18px 20px 20px;display:grid;gap:4px}
.step{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:12px;font:600 14px/1.2 var(--font);color:var(--ink)}
.step small{display:block;font:500 12.5px/1.2 var(--font);color:var(--muted);margin-top:2px}
.step .dot{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:600 12.5px/1 var(--font-h);background:var(--soft-2);color:var(--muted)}
.step.done .dot{background:var(--green);color:#fff}
.step.done .dot svg{width:14px;height:14px}
.step.now{background:var(--green-50)}
.step.now .dot{background:#fff;color:var(--green-d);box-shadow:inset 0 0 0 2px var(--green)}
.hv-prog{display:flex;align-items:center;gap:10px;margin:2px 40px 0 10px;font:600 12.5px/1 var(--font);color:var(--muted)}
.bar{flex:1;height:8px;border-radius:99px;background:var(--soft-2);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;}
.hv-q{position:absolute;right:0;top:64px;width:278px;padding:18px;z-index:2}
.qmeta{display:flex;align-items:center;justify-content:space-between;font:600 12.5px/1 var(--font);color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;font:600 12.5px/1 var(--font);background:var(--sky-50);color:#1b5f9c}
.chip.green{background:var(--green-50);color:var(--green-d)} .chip.amber{background:var(--amber-50);color:#8a5200} .chip.coral{background:var(--coral-50);color:#a63a26} .chip.teal{background:var(--teal-50);color:#0b6c66} .chip.rose{background:var(--rose-50);color:#a12d4a}
.qtext{margin-top:14px;font:600 16px/1.4 var(--font-h);color:var(--ink);letter-spacing:-.01em}
.opts{display:grid;gap:8px;margin-top:14px}
.opt{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);font:500 14px/1.35 var(--font);color:var(--ink)}
.opt .k{flex:none;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:var(--soft-2);font:600 12px/1 var(--font-h);color:var(--muted)}
.opt.right{background:var(--green-50);box-shadow:inset 0 0 0 1.5px #7fcf9f}
.opt.right .k{background:var(--green);color:#fff}
.opt.sel{box-shadow:inset 0 0 0 2px var(--sky);background:var(--sky-50)}
.opt.sel .k{background:var(--sky);color:#fff}
.feedback{display:flex;gap:10px;margin-top:12px;padding:12px;border-radius:12px;background:var(--green-50);font:500 13.5px/1.45 var(--font);color:#1d4a32}
.feedback b{color:var(--green-dd)}
.feedback svg{flex:none;width:20px;height:20px;color:var(--green)}
.hv-nova{position:absolute;left:0;top:356px;width:268px;padding:16px;z-index:1}
.nova-head{display:flex;align-items:center;gap:10px;font:600 14px/1.2 var(--font-h);color:var(--ink)}
.nova-head small{display:block;font:500 12px/1.2 var(--font);color:var(--muted)}
.nova-av{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;}
.nova-av svg{width:22px;height:22px}
.bubble{margin-top:12px;padding:12px 14px;border-radius:16px 16px 16px 6px;background:var(--soft);font:500 13.5px/1.5 var(--font);color:var(--ink)}
.bubble.me{margin-left:auto;border-radius:16px 16px 6px 16px;background:var(--green);color:#fff;width:fit-content;max-width:85%}
.hv-float{position:absolute;left:52px;bottom:40px;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px}
.hv-float .tile{width:44px;height:44px}
.hv-float b{display:block;font:600 18px/1 var(--font-h);color:var(--ink)}
.hv-float small{font:500 12.5px/1.2 var(--font);color:var(--muted)}

/* ---------- stats ---------- */
.stats{padding:24px 0 8px}
.stats-card{display:grid;grid-template-columns:1.4fr repeat(6,1fr);align-items:stretch;background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow),inset 0 0 0 1px var(--line);overflow:hidden}
.stats-lead{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:24px 28px;}
.stats-lead b{font:600 17px/1.25 var(--font-h);color:var(--ink);letter-spacing:-.01em}
.stats-lead span{font:500 13.5px/1.4 var(--font);color:var(--muted)}
.stat{padding:24px 18px;border-left:1px solid var(--line);text-align:center}
.stat b{display:block;font:600 30px/1 var(--font-h);color:var(--ink);letter-spacing:-.03em}
.stat span{display:block;margin-top:10px;font:600 11.5px/1.3 var(--font);letter-spacing:.09em;text-transform:none;color:var(--muted)}

/* ---------- small product icons ---------- */
.tile{flex:none;width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--soft-2)}
.tile svg{width:68%;height:68%;filter:drop-shadow(0 3px 4px rgba(16,34,27,.14))}
.t-green{background:var(--green-50)} .t-sky{background:var(--sky-50)} .t-coral{background:var(--coral-50)} .t-amber{background:var(--amber-50)} .t-teal{background:var(--teal-50)} .t-rose{background:var(--rose-50)} .t-navy{background:#e7edf4}

/* ---------- how it works ---------- */
.how{}
.how-grid{display:grid;grid-template-columns:400px 1fr;gap:24px;margin-top:48px}
.loop{padding:24px}
.loop-head{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.loop-head b{display:block;font:600 17px/1.2 var(--font-h);color:var(--ink)}
.loop-head small{font:500 13.5px/1.3 var(--font);color:var(--muted)}
.loop ol{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:4px;counter-reset:s}
.loop li{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:14px}
.loop li.on{background:var(--green-50)}
.loop li .n{flex:none;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font:600 13px/1 var(--font-h);background:var(--soft-2);color:var(--muted)}
.loop li.on .n{background:var(--green);color:#fff}
.loop li b{display:block;font:600 15px/1.2 var(--font-h);color:var(--ink)}
.loop li small{font:500 13.5px/1.3 var(--font);color:var(--muted)}
.loop li .tile{width:40px;height:40px;border-radius:12px;margin-left:auto}
.how-main{display:grid;gap:24px;align-content:start}
.mcq{padding:28px;position:relative;overflow:hidden}
.mcq-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mcq h3{font-size:22px;font-weight:600;margin-top:14px}
.mcq .qtext{font-size:18px;font-weight:600;font-family:var(--font);margin-top:8px;color:var(--text)}
.mcq .opts{grid-template-columns:1fr 1fr}
.support{padding:28px}
.support-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.support-head b{font:600 20px/1.2 var(--font-h);color:var(--ink)}
.support-head p{font:500 14.5px/1.4 var(--font);color:var(--muted);margin-top:4px}
.tools{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 20px;margin-top:20px;padding:0;list-style:none}
.tools li{display:flex;align-items:center;gap:14px;padding:10px 8px;border-radius:14px}
.tools li b{display:block;font:600 15px/1.25 var(--font-h);color:var(--ink)}
.tools li span{font:500 13.5px/1.35 var(--font);color:var(--muted)}

/* ---------- feature blocks ---------- */
.feat{display:grid;grid-template-columns:1fr 1.08fr;gap:72px;align-items:center}
.feat.rev .feat-copy{order:2}
.feat-copy .lead{font-size:17.5px}
.feat-copy .btn{margin-top:28px}
.feat-points{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.feat-points li{display:flex;gap:12px;align-items:center;font:600 15px/1.35 var(--font);color:var(--ink)}
.feat-points .tile{width:40px;height:40px;border-radius:12px}
.try{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:0 6px;font:500 13.5px/1.3 var(--font);color:var(--muted)}
.stage{position:relative;padding:28px;border-radius:var(--r-xl);overflow:hidden}
.stage.green{}
.stage.sky{}
.stage.amber{}
.stage.coral{}
.stage.teal{}
.tabs-mock{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.tabs-mock span{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.7);font:600 13px/1 var(--font);color:#3f4c46;box-shadow:inset 0 0 0 1px rgba(19,33,27,.07)}
.tabs-mock span.on{background:var(--ink);color:#fff;box-shadow:none}
.app{background:#fff;border-radius:20px;box-shadow:var(--shadow-lg),inset 0 0 0 1px rgba(19,33,27,.05);overflow:hidden}
.app-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);font:600 13.5px/1 var(--font);color:var(--muted)}
.app-bar b{font:600 15px/1.2 var(--font-h);color:var(--ink)}
.app-body{padding:20px}
.dots3{display:flex;gap:6px}.dots3 i{width:10px;height:10px;border-radius:50%;background:#e3e9e6}
.note{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--sky-50);font:500 14px/1.5 var(--font);color:#1d3d5a}
.note svg{flex:none;width:20px;height:20px;color:var(--sky);margin-top:1px}
.note .x{margin-left:auto;flex:none;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;color:#4a6782}
.note .x svg{width:14px;height:14px;margin:0;color:currentColor}
.var{font-family:"Times New Roman",serif;font-style:italic;font-size:1.08em}
.actions{display:flex;gap:10px;margin-top:18px}
.actions .fake{display:inline-flex;align-items:center;height:42px;padding:0 18px;border-radius:12px;font:600 14.5px/1 var(--font-h)}
.fake.p{background:var(--green);color:#fff;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.fake.g{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.fake.d{background:var(--soft-2);color:#7c8984}

/* graph mock */
.graph-wrap{display:grid;grid-template-columns:1fr 210px;gap:18px;align-items:start}
.graph{border-radius:14px;background:#fbfdfc;box-shadow:inset 0 0 0 1px var(--line)}
.graph-side{display:grid;gap:10px}
.mini{padding:12px 14px;border-radius:12px;background:var(--soft);font:500 13.5px/1.45 var(--font);color:var(--text)}
.mini b{display:block;font:600 12px/1 var(--font);letter-spacing:.08em;text-transform:none;color:var(--muted);margin-bottom:6px}
.pt{display:flex;align-items:center;gap:8px;font:600 13.5px/1 var(--font);color:var(--ink);margin-top:6px}
.pt i{width:10px;height:10px;border-radius:50%;background:var(--sky)}

/* segmented */
.seg{display:inline-flex;padding:4px;border-radius:12px;background:var(--soft-2);gap:2px}
.seg span{padding:8px 12px;border-radius:9px;font:600 13px/1 var(--font);color:var(--muted)}
.seg span.on{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
.gen{display:flex;align-items:center;gap:8px;margin-top:16px;font:600 13px/1 var(--font);color:var(--teal)}
.gen svg{width:16px;height:16px}
.stack{position:relative}
.stack::before,.stack::after{content:"";position:absolute;left:22px;right:22px;height:20px;border-radius:0 0 20px 20px;background:#fff;box-shadow:var(--shadow);z-index:-1}
.stack::before{bottom:-10px;opacity:.85}
.stack::after{bottom:-20px;left:44px;right:44px;opacity:.6}

/* exam mock */
.exam-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:var(--navy);color:#dfe8f2;font:600 13px/1 var(--font)}
.exam-bar b{color:#fff;font:600 14px/1 var(--font-h)}
.timer{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:8px;background:rgba(255,255,255,.12);font-variant-numeric:tabular-nums}
.timer svg{width:14px;height:14px}
.math{font-family:"Times New Roman",serif;font-size:17px;color:var(--ink)}
.math i{font-style:italic}
.frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;margin:0 2px;font-size:.95em;line-height:1.15}
.frac>span:first-child{border-bottom:1px solid currentColor;padding:0 3px}
.frac>span:last-child{padding:0 3px}
.exam-opts{grid-template-columns:1fr 1fr}
.exam-opts .opt{padding:12px 14px}
.exam-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.qnav{display:flex;gap:6px}
.qnav i{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font:600 11.5px/1 var(--font);font-style:normal;background:var(--soft-2);color:var(--muted)}
.qnav i.d{background:var(--green-50);color:var(--green-d)}
.qnav i.c{background:var(--navy);color:#fff}

/* FRQ */
.frq{display:grid;grid-template-columns:1.1fr .9fr}
.frq-src{padding:18px 20px;border-right:1px solid var(--line)}
.frq-src .scroll{max-height:340px;overflow:auto;padding-right:8px;font:400 13.5px/1.6 var(--font);color:var(--text)}
.frq-src .scroll p+p{margin-top:10px}
.frq-src cite{display:block;font:600 12.5px/1.4 var(--font);font-style:normal;color:var(--muted);margin-top:4px}
.frq-src h4{font:600 12px/1 var(--font);letter-spacing:.08em;text-transform:none;color:var(--muted);margin-bottom:10px}
.frq-ans{padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.part{padding:10px 12px;border-radius:12px;background:var(--soft);font:500 13px/1.45 var(--font);color:var(--text)}
.part b{color:var(--ink)}
.part.active{background:#fff;box-shadow:inset 0 0 0 1.5px var(--sky)}
.caret{display:inline-block;width:2px;height:15px;background:var(--sky);vertical-align:-3px;margin-left:2px}
.lockbar{display:flex;align-items:center;gap:10px;margin-top:auto;padding:12px;border-radius:12px;background:var(--amber-50);font:600 13.5px/1.35 var(--font);color:#6b4100}
.lockbar svg{flex:none;width:18px;height:18px}

/* competitions (navy panel) */
.comp{background:var(--navy);border-radius:var(--r-xl);padding:64px;color:#c9d6e3;position:relative;overflow:hidden}
.comp::before{content:"";position:absolute;inset:0;pointer-events:none}
.comp>*{position:relative}
.comp h2,.comp .h2{color:#fff}
.comp .lead{color:#c9d6e3}
.comp .eyebrow{color:#8ee0b0}
.comp-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.comp .tabs-mock span{background:rgba(255,255,255,.08);color:#dbe6f0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.comp .tabs-mock span.on{background:#fff;color:var(--navy)}
.amc .qtext{font:500 14.5px/1.6 var(--font);color:var(--text)}
.amc-opts{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:16px}
.amc-opts span{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 0;border-radius:12px;box-shadow:inset 0 0 0 1.5px var(--line);font:600 16px/1 var(--font-h);color:var(--ink)}
.amc-opts span small{font:600 11.5px/1 var(--font);color:var(--muted)}
.amc-opts span.sel{box-shadow:inset 0 0 0 2px var(--sky);background:var(--sky-50)}
.comp-side{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.kpi{padding:16px;border-radius:16px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.kpi small{display:block;font:600 12px/1 var(--font);letter-spacing:.06em;text-transform:none;color:#a9bccf}
.kpi b{display:block;margin-top:8px;font:600 18px/1.2 var(--font-h);color:#fff}
.comp .btn-white{margin-top:28px}
.comp .try{color:#a9bccf}
.comp .try .link-arrow{color:#8ee0b0}
.ital{font-style:italic}

/* nova */
.chat{display:flex;flex-direction:column;min-height:400px}
.chat .app-body{flex:1;display:flex;flex-direction:column;gap:4px}
.src-tag{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font:600 12px/1 var(--font);color:var(--teal)}
.src-tag svg{width:14px;height:14px}
.suggest{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.suggest span{padding:8px 12px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);font:600 13px/1 var(--font);color:var(--ink)}
.composer{display:flex;align-items:center;gap:10px;padding:12px;border-top:1px solid var(--line)}
.composer .in{flex:1;height:44px;border-radius:12px;background:var(--soft);display:flex;align-items:center;padding:0 14px;font:500 14px/1 var(--font);color:var(--muted)}
.composer .send{width:44px;height:44px;border-radius:12px;background:var(--soft-2);display:grid;place-items:center;color:var(--muted)}
.composer .send svg{width:18px;height:18px}

/* ---------- comparison ---------- */
.cmp-wrap{position:relative;margin-top:48px;border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow),inset 0 0 0 1px var(--line);overflow:auto}
.cmp{width:100%;min-width:860px;border-collapse:separate;border-spacing:0;font:500 15px/1.35 var(--font)}
.cmp th,.cmp td{padding:15px 16px;text-align:center;border-bottom:1px solid var(--line)}
.cmp thead th{font:600 14px/1.2 var(--font-h);color:var(--ink);padding-top:22px;padding-bottom:18px;vertical-align:bottom}
.cmp thead th small{display:block;font:500 12px/1.2 var(--font);color:var(--muted);margin-top:4px}
.cmp tbody th{text-align:left;font:600 15px/1.35 var(--font);color:var(--ink);padding-left:28px}
.cmp td.me,.cmp th.me{background:var(--green-50)}
.cmp thead th.me{border-radius:18px 18px 0 0;color:var(--green-dd)}
.cmp thead th.me img{width:30px;height:30px;margin:0 auto 6px}
.cmp tr:last-child td,.cmp tr:last-child th{border-bottom:0}
.cmp tr:hover td:not(.me),.cmp tr:hover th[scope=row]{background:#fafcfb}
.cmp tbody th,.cmp thead th:first-child{position:sticky;left:0;z-index:1;background:#fff}
.ic{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%}
.ic svg{width:15px;height:15px}
.ic.y{background:var(--green);color:#fff}
.ic.n{background:#eef1f0;color:#7d8984}
.ic.p{background:var(--amber-50);color:#8a5200;box-shadow:inset 0 0 0 1.5px #f1cf8e}
.cmp .price td{font:600 15px/1.3 var(--font-h);color:var(--ink)}
.cmp .price td.me{color:var(--green-dd);font-size:17px}
.cmp .price td small{display:block;font:500 12px/1.3 var(--font);color:var(--muted)}
.cmp .price th{font-weight:600}
.legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:20px}
.legend ul{display:flex;gap:18px;list-style:none;margin:0;padding:0;font:500 13.5px/1 var(--font);color:var(--muted)}
.legend li{display:flex;align-items:center;gap:8px}
.legend .ic{width:20px;height:20px}.legend .ic svg{width:12px;height:12px}

/* ---------- courses ---------- */
.courses{background:var(--soft)}
.courses-head{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap}
.cstats{display:flex;gap:10px}
.cstats div{min-width:104px;padding:14px 18px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.cstats b{display:block;font:600 24px/1 var(--font-h);color:var(--ink)}
.cstats span{display:block;margin-top:6px;font:600 11.5px/1 var(--font);letter-spacing:.09em;text-transform:none;color:var(--muted)}
.ctabs{display:flex;flex-wrap:wrap;gap:4px;margin-top:40px;padding:5px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);width:fit-content}
.ctabs button{height:42px;padding:0 18px;border:0;border-radius:12px;background:transparent;font:600 14.5px/1 var(--font-h);color:var(--muted);cursor:pointer}
.ctabs button:hover{color:var(--ink);background:var(--soft)}
.ctabs button[aria-selected=true]{background:var(--green);color:#fff;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
.cpanel-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-top:28px}
.cpanel-head h3{font-size:22px;font-weight:600}
.cpanel-head p{font:500 14.5px/1.4 var(--font);color:var(--muted)}
.subjects{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}
.subj{display:flex;flex-direction:column;background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow),inset 0 0 0 1px rgba(19,33,27,.05);overflow:hidden}
.subj-top{position:relative;height:132px;padding:20px 22px;color:#fff;overflow:hidden}
.subj-top h4{font:600 21px/1.15 var(--font-h);color:#fff;letter-spacing:-.02em;max-width:62%;text-shadow:0 1px 2px rgba(0,0,0,.12)}
.subj-top p{margin-top:6px;font:600 13.5px/1 var(--font);color:rgba(255,255,255,.95)}
.subj-top svg{position:absolute;right:-14px;top:-4px;width:150px;height:150px;transition:transform .35s cubic-bezier(.2,.7,.2,1),translate .35s cubic-bezier(.2,.7,.2,1),scale .35s cubic-bezier(.2,.7,.2,1),rotate .35s cubic-bezier(.2,.7,.2,1)}
.subj:hover .subj-top svg{translate:0 -4px;rotate:-3deg}
.subj ul{list-style:none;margin:0;padding:10px;display:grid;gap:2px}
.subj li a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;font:600 14.5px/1.3 var(--font);color:var(--ink)}
.subj li a svg{flex:none;width:16px;height:16px;color:#9aa6a1;transition:transform .15s,translate .15s,scale .15s,rotate .15s,color .15s}
.subj li a:hover{background:var(--soft)}
.subj li a:hover svg{color:var(--green);translate:2px 0}
.subj .more{margin:auto 22px 16px;padding-top:6px;font:600 13px/1.3 var(--font);color:var(--muted)}
.g-green{}
.g-sky{}
.g-coral{}
.g-amber{}
.g-teal{}
.g-rose{}
.g-navy{}
.g-gold{}
.empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:36px 28px;border-radius:var(--r-lg);background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.empty b{display:block;font:600 18px/1.3 var(--font-h);color:var(--ink)}
.empty p{font:500 14.5px/1.5 var(--font);color:var(--muted);max-width:540px}
.empty-actions{display:flex;gap:12px;margin-top:4px;flex-wrap:wrap;justify-content:center}
.ticket{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:28px;font:500 15px/1.4 var(--font);color:var(--muted);text-align:center;flex-wrap:wrap}
.ticket a{font-weight:600;color:var(--green-d);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}

/* ---------- testimony ---------- */
.testi{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.testi h2 em{font-style:normal;color:var(--green)}
.quote{position:relative;padding:40px;border-radius:var(--r-xl);box-shadow:inset 0 0 0 1px var(--line)}
.quote .qm{position:absolute;right:32px;top:24px;width:64px;height:64px;opacity:.9}
.stars{display:flex;gap:3px;color:#e9a21a}
.stars svg{width:20px;height:20px}
.quote blockquote{margin:18px 0 0;font:500 20px/1.6 var(--font-h);color:var(--ink);letter-spacing:-.01em}
.quote figcaption{display:flex;align-items:center;gap:12px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line-2)}
.avatar{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--green-50)}
.avatar svg{width:28px;height:28px}
.quote figcaption b{display:block;font:600 15px/1.2 var(--font-h);color:var(--ink)}
.quote figcaption span{font:500 13.5px/1.3 var(--font);color:var(--muted)}

/* ---------- global + reviews ---------- */
.global{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:48px;border-radius:var(--r-xl);box-shadow:inset 0 0 0 1px #dbe9f2;overflow:hidden}
.gstats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
.gstats div{padding:18px;border-radius:16px;background:#fff;box-shadow:var(--shadow-sm),inset 0 0 0 1px var(--line)}
.gstats b{display:block;font:600 28px/1 var(--font-h);color:var(--ink);letter-spacing:-.03em}
.gstats span{display:block;margin-top:8px;font:600 11.5px/1 var(--font);letter-spacing:.09em;text-transform:none;color:var(--muted)}
.globe{width:100%;max-width:420px;margin:0 auto}
.reviews-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-top:112px}
.reviews{columns:3;column-gap:20px;margin-top:40px}
.rv{break-inside:avoid;margin:0 0 20px;padding:22px;border-radius:var(--r);background:#fff;box-shadow:var(--shadow-sm),inset 0 0 0 1px var(--line)}
.rv .stars svg{width:15px;height:15px}
.rv h4{margin-top:12px;font:600 16px/1.3 var(--font-h);color:var(--ink);letter-spacing:-.01em}
.rv p{margin-top:8px;font:400 14.5px/1.6 var(--font);color:var(--text)}
.rv .who{display:flex;align-items:center;gap:10px;margin-top:16px;font:600 13.5px/1 var(--font);color:var(--muted)}
.rv .who i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:600 12px/1 var(--font-h);font-style:normal;color:#fff}
.media{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-top:96px;padding:40px;border-radius:var(--r-xl);background:#fff;box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.media .fine{margin-top:16px;font:500 14px/1.6 var(--font);color:var(--muted)}
.post{display:block;padding:22px;border-radius:20px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .15s}
.post:hover{box-shadow:inset 0 0 0 1.5px #b9c7c0}
.post-head{display:flex;align-items:center;gap:12px}
.post-head .xlogo{width:40px;height:40px;border-radius:50%;background:var(--ink);display:grid;place-items:center;color:#fff}
.post-head .xlogo svg{width:18px;height:18px}
.post-head b{display:block;font:600 15px/1.2 var(--font-h);color:var(--ink)}
.post-head span{font:500 13.5px/1.2 var(--font);color:var(--muted)}
.post p{margin-top:14px;font:500 14.5px/1.55 var(--font);color:var(--text)}
.post .link-arrow{margin-top:14px}

/* ---------- partners ---------- */
.partners{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.plist{display:grid;gap:16px}
.partner{display:grid;grid-template-columns:150px 1fr auto;gap:24px;align-items:center;padding:22px 24px;border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow-sm),inset 0 0 0 1px var(--line);transition:box-shadow .15s,transform .15s,translate .15s,scale .15s,rotate .15s}
.partner:hover{box-shadow:var(--shadow),inset 0 0 0 1px var(--line-2);translate:0 -2px}
.partner .logo{height:72px;border-radius:14px;background:var(--soft);display:grid;place-items:center;padding:12px}
.partner .logo img{max-height:40px;width:auto}
.partner .logo.dark{background:var(--navy)}
.partner h3{font:600 17px/1.3 var(--font-h)}
.partner p{margin-top:4px;font:500 14px/1.5 var(--font);color:var(--muted)}
.partner>svg{width:20px;height:20px;color:#9aa6a1}

/* ---------- mission ---------- */
.mission{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow),inset 0 0 0 1px var(--line);background:#fff}
.mission-l{position:relative;padding:56px;overflow:hidden}
.mission-l .h2 em{font-style:normal;color:var(--green)}
.mission-l p{font:500 16.5px/1.65 var(--font);color:var(--text);margin-top:16px;max-width:480px}
.mission-l .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.mission-r{padding:40px}
.mission-r h3{font:600 13px/1 var(--font);letter-spacing:.1em;text-transform:none;color:var(--muted);margin:0 0 12px 14px}
.help{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.help a{display:flex;gap:16px;align-items:center;padding:14px;border-radius:16px;transition:background .15s}
.help a:hover{background:var(--soft)}
.help b{font:600 16px/1.2 var(--font-h);color:var(--ink)}
.help .aud{display:inline-flex;margin-left:8px;height:22px;align-items:center;padding:0 8px;border-radius:99px;background:var(--soft-2);font:600 11.5px/1 var(--font);color:var(--muted);vertical-align:2px}
.help p{margin-top:4px;font:500 13.5px/1.45 var(--font);color:var(--muted)}
.help a>svg{flex:none;width:18px;height:18px;color:#9aa6a1;margin-left:auto}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:.75fr 1.25fr;gap:64px;align-items:start}
.faq-side{position:sticky;top:110px}
.faq-side .tiles{display:flex;gap:10px;margin-top:28px}
.acc{display:grid;gap:10px}
.acc details{border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .15s,background .15s}
.acc details[open]{background:var(--soft);box-shadow:inset 0 0 0 1px var(--line-2)}
.acc summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;cursor:pointer;font:600 16.5px/1.35 var(--font-h);color:var(--ink);border-radius:18px}
.acc summary::-webkit-details-marker{display:none}
.acc summary .pm{flex:none;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--soft-2);color:var(--ink);transition:background-color var(--dur-1,160ms) var(--ease,ease),color var(--dur-1,160ms) var(--ease,ease)}
.acc summary .pm svg{width:14px;height:14px;transition:transform var(--dur-2,240ms) var(--ease-io,cubic-bezier(.4,0,.2,1)),rotate var(--dur-2,240ms) var(--ease-io,cubic-bezier(.4,0,.2,1))}
.acc details[open] summary .pm{background:var(--green);color:#fff}
.acc details[open] summary .pm svg{transform:rotate(45deg)}
.acc .ans{padding:0 22px 20px;font:400 15.5px/1.7 var(--font);color:var(--text);max-width:680px}
.acc .grp{margin:14px 0 2px 4px;font:600 12px/1 var(--font);letter-spacing:.1em;text-transform:none;color:var(--muted)}

/* ---------- final CTA ---------- */
.final{position:relative;padding:80px 64px;border-radius:var(--r-xl);overflow:hidden;color:#e6f5ec;}
.final::before{content:"";position:absolute;inset:0;}
.final>*{position:relative}
.final .eyebrow{color:#c6f0d6}
.final h2{color:#fff;font-size:clamp(32px,4vw,50px);font-weight:600;max-width:720px;margin-top:16px;letter-spacing:-.03em}
.final p{font:500 18px/1.6 var(--font);max-width:560px;margin-top:16px;color:#e6f5ec}
.final .btn{margin-top:32px;height:56px;padding:0 28px;font-size:17px}
.final-mark{position:absolute;right:56px;top:50%;transform:translateY(-50%);width:300px;height:300px;opacity:.95}

/* ---------- footer ---------- */
.foot{margin-top:112px;padding:72px 0 40px;background:var(--soft);border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:40px}
.foot .brand{font-size:20px}
.foot-about p{margin-top:16px;font:500 14.5px/1.6 var(--font);color:var(--text);max-width:340px}
.foot-about .small{font-size:13px;color:var(--muted)}
.foot-about a.mail{display:inline-block;margin-top:14px;font:600 14.5px/1.3 var(--font);color:var(--ink)}
.foot :is(h3,h4){font:600 12.5px/1 var(--font);letter-spacing:.1em;text-transform:none;color:var(--muted);margin-bottom:16px;letter-spacing:.1em}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot ul a{font:500 14.5px/1.3 var(--font);color:#34413b}
.foot ul a:hover{color:var(--green-d)}
.social{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px;padding-top:28px;border-top:1px solid var(--line-2)}
.social span{font:600 12.5px/34px var(--font);letter-spacing:.1em;text-transform:none;color:var(--muted);margin-right:8px}
.social a{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-2);font:600 13.5px/1 var(--font);color:#34413b}
.social a:hover{box-shadow:inset 0 0 0 1.5px var(--green);color:var(--green-d)}
.legal{margin-top:28px;font:400 12.5px/1.6 var(--font);color:var(--muted)}
.legal p+p{margin-top:8px}

/* ---------- reveal ---------- */
.rv-in{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease,translate .6s ease,scale .6s ease,rotate .6s ease}
.rv-in.on{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-copy{max-width:720px}
  .hv{height:600px;max-width:600px;width:100%;margin:0 auto}
  .stats-card{grid-template-columns:repeat(3,1fr)}
  .stats-lead{grid-column:1/-1}
  .stat:nth-child(2),.stat:nth-child(5){border-left:0}
  .stat:nth-child(n+5){border-top:1px solid var(--line)}
  .how-grid{grid-template-columns:1fr}
  .feat{gap:48px}
  .comp{padding:48px}
  .comp-grid{gap:40px}
  .subjects{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:repeat(4,1fr)}
  .foot-about{grid-column:1/-1}
}
@media (max-width:1024px){
  .feat,.comp-grid,.testi,.global,.media,.partners,.faq{grid-template-columns:1fr}
  .feat.rev .feat-copy{order:0}
  .feat-copy{max-width:640px}
  .faq-side{position:static}
  .mission{grid-template-columns:1fr}
  .sec{padding:88px 0}
  .final-mark{width:200px;height:200px;right:24px;opacity:.35}
}
@media (max-width:720px){
  .wrap{padding:0 20px}
  .sec{padding:72px 0}
  .hero{padding:40px 0 24px}
  .hero h1{font-size:40px}
  .hero .lead{font-size:17px}
  .hero-ctas .btn{flex:1;min-width:0;padding:0 16px}
  .hv{height:auto;display:grid;gap:14px}
  .hv>.card{position:static;width:100%}
  .hv-float{display:none!important}
  .stats-card{grid-template-columns:repeat(2,1fr)}
  .stat{border-left:0!important;border-top:1px solid var(--line)}
  .stat:nth-child(odd){border-left:1px solid var(--line)!important}
  .stat b{font-size:26px}
  .mcq .opts,.exam-opts{grid-template-columns:1fr}
  .tools{grid-template-columns:1fr}
  .loop,.mcq,.support{padding:20px}
  .stage{padding:16px;border-radius:24px}
  .graph-wrap{grid-template-columns:1fr}
  .frq{grid-template-columns:1fr}
  .frq-src{border-right:0;border-bottom:1px solid var(--line)}
  .comp{padding:32px 20px;border-radius:24px}
  .comp-side{grid-template-columns:1fr}
  .amc-opts{gap:6px}
  .subjects{grid-template-columns:1fr}
  .ctabs{width:auto;overflow-x:auto;flex-wrap:nowrap;max-width:100%}
  .ctabs button{flex:none;padding:0 14px}
  .cstats{width:100%}
  .cstats div{flex:1;min-width:0;padding:12px}
  .quote{padding:28px 22px}
  .quote blockquote{font-size:17px}
  .global{padding:28px 20px}
  .gstats{gap:8px}
  .gstats div{padding:14px 10px}
  .gstats b{font-size:21px}
  .reviews{columns:1}
  .media{padding:24px 20px}
  .partner{grid-template-columns:1fr;gap:14px}
  .partner>svg{display:none}
  .partner .logo{width:150px}
  .mission-l{padding:36px 22px}
  .mission-r{padding:24px 12px}
  .acc summary{padding:16px 18px;font-size:15.5px}
  .acc .ans{padding:0 18px 18px}
  .final{padding:48px 24px}
  .final-mark{display:none}
  .hv-course{display:none}
  .tabs-mock{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-16px;padding-right:16px}
  /* tabs that run past the card fade out instead of being cut mid-word (same as the /feature/ mock-ups) */
  .tabs-mock{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent)}
  .tabs-mock::-webkit-scrollbar{display:none}
  .tabs-mock span{flex:none}
  .seg span{padding:8px 9px;font-size:12.5px;white-space:nowrap}
  .try>span{display:none}
  .try{justify-content:flex-end}
  .cmp{min-width:600px;font-size:13.5px}
  .cmp th,.cmp td{padding:12px 8px}
  .cmp tbody th,.cmp thead th:first-child{padding-left:16px!important;width:150px;min-width:150px;box-shadow:6px 0 8px -6px rgba(16,34,27,.15)}
  .cmp tbody th{font-size:13.5px}
  .reviews{columns:auto;display:flex;align-items:flex-start;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:32px -20px 0;padding:4px 20px 12px;scrollbar-width:none}
  .reviews::-webkit-scrollbar{display:none}
  .rv{flex:none;width:82%;margin:0;scroll-snap-align:center}
  .subj-top{height:104px}
  .subj-top svg{width:120px;height:120px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .reviews-head{margin-top:80px}
  .media{margin-top:64px}
}
@media (max-width:1024px) and (min-width:721px){
  .reviews{columns:2}
  /* swarm R10 home-marketing: on tablets the 860px minimum pushed Brilliant and AoPS out of the 702px sheet with no
     scroll hint; the table fits the sheet instead (cells tighten, headers wrap) */
  .cmp{min-width:0}
  .cmp th,.cmp td{padding-left:10px;padding-right:10px}
  .cmp tbody th,.cmp thead th:first-child{padding-left:20px}
  .cmp th.me,.cmp td.me{min-width:84px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .rv-in{opacity:1;transform:none}
}
.feat>*,.comp-grid>*,.hero-grid>*,.testi>*,.global>*,.media>*,.partners>*,.faq>*,.how-grid>*,.mission>*{min-width:0}

/* ================= rework-centered: centred hero, fanned mock-ups, wide alternating features ================= */
.hero{padding:88px 0 0}
.hero-c{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-copy{max-width:860px;display:flex;flex-direction:column;align-items:center}
.hero h1{font-size:clamp(42px,6vw,80px);letter-spacing:-.04em;line-height:1.02}
.hero .lead{max-width:640px;margin-left:auto;margin-right:auto;font-size:19.5px}
.hero-ctas{justify-content:center}
.hero-note{justify-content:center}
.aurora{height:980px;}

/* the fan: three product cards in a wide row, the outer two set back and turned slightly */
.hv{height:auto;max-width:1120px;margin:56px auto 0;display:flex;justify-content:center;align-items:flex-start;padding:0 0 72px;text-align:left}
.hv::before{content:"";position:absolute;left:6%;right:6%;top:30%;bottom:0;border-radius:40px 40px 0 0;
  box-shadow:inset 0 1px 0 rgba(19,33,27,.05);z-index:0}
.hv>.card{position:relative;left:auto;right:auto;top:auto;flex:none}
.hv .fan-l,.hv .fan-r{width:340px;margin-top:56px;z-index:1}
.hv .fan-l{transform:rotate(-3deg);margin-right:-28px;transform-origin:100% 100%}
.hv .fan-r{transform:rotate(3deg);margin-left:-28px;transform-origin:0 100%}
.hv .fan-c{width:400px;padding:24px;z-index:2;box-shadow:0 2px 4px rgba(16,34,27,.05),0 40px 80px -24px rgba(16,34,27,.28),inset 0 0 0 1px rgba(19,33,27,.05)}
.fan-c .qtext{font-size:18px}
.fan-c .opt{padding:12px 14px;font-size:14.5px}
.hv-course-top{height:128px}
.hv-course-top strong{font-size:21px}
.hv-path{padding:18px 18px 22px}
.hv-nova{padding:20px}
.hv-nova .bubble{font-size:14px}

.stats{padding:0 0 8px;position:relative;margin-top:-40px}

/* feature sections: wide stage that runs off the page edge, sides alternate, every other band tinted */
.fs{padding:104px 0;overflow-x:clip;counter-increment:fs}
.fs.alt{background:var(--soft)}
#lesson{counter-reset:fs 0}
.frq-sec{padding-top:104px}
.feat{grid-template-columns:380px 1fr;gap:64px}
.feat.rev{grid-template-columns:1fr 380px}
.feat-copy{position:relative}
.fs .feat-copy::before{content:counter(fs,decimal-leading-zero);display:block;margin-bottom:18px;font:600 15px/1 var(--font-h);color:var(--muted);letter-spacing:.04em;padding-bottom:14px;border-bottom:1px solid var(--line-2);width:48px}
.fs .feat-copy .lead{font-size:17px}
.fs .stage{padding:48px}
.fs .app-body{padding:26px}
.fs .app-bar{padding:16px 22px}
.fs .qtext{font-size:17px}
@media (min-width:1025px){
  .fs{--bleed:max(32px,calc((100vw - var(--wrap)) / 2 + 32px))}
  .fs .feat:not(.rev) .stage{margin-right:calc(-1 * var(--bleed));padding-right:var(--bleed);border-radius:var(--r-xl) 0 0 var(--r-xl)}
  .fs .feat.rev .stage{margin-left:calc(-1 * var(--bleed));padding-left:var(--bleed);border-radius:0 var(--r-xl) var(--r-xl) 0}
  .fs .feat:not(.rev) .try{padding-right:0}
}
@media (max-width:1180px){
  .feat{grid-template-columns:340px 1fr}
  .feat.rev{grid-template-columns:1fr 340px}
  .hv{max-width:100%}
  .hv .fan-l,.hv .fan-r{width:300px}
  .hv .fan-c{width:360px}
  .feat{gap:48px}
}
@media (max-width:1024px){
  .feat,.feat.rev{grid-template-columns:1fr}
  .hv .fan-l,.hv .fan-r{width:276px;margin-top:56px}
  .hv .fan-l{margin-right:-32px}
  .hv .fan-r{margin-left:-32px}
  .hv .fan-c{width:330px}
  .fs .stage{padding:32px}
  .fs{padding:88px 0}
}
@media (max-width:720px){
  .hero{padding:40px 0 0}
  .hero h1{font-size:40px}
  .hv{display:flex;justify-content:flex-start;align-items:flex-start;gap:12px;margin:40px -20px 0;padding:8px 20px 56px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;max-width:none}
  .hv::-webkit-scrollbar{display:none}
  .hv::before{display:none}
  .hv>.card,.hv .fan-l,.hv .fan-r,.hv .fan-c{display:block;width:84%;max-width:330px;margin:0;transform:none;scroll-snap-align:center;flex:none}
  .hv .fan-c{order:-1;padding:18px}
  .hv .fan-l,.hv .fan-r{box-shadow:var(--shadow),inset 0 0 0 1px rgba(19,33,27,.05)}
  .fan-c .qtext{font-size:16.5px}
  .stats{margin-top:-24px}
  .fs{padding:72px 0}
  .fs .stage{padding:20px;margin:0 -20px;border-radius:0}
  .fs .try{padding:0}
  .chip{white-space:nowrap}
  .fs .app-body{padding:18px}
  .fs .feat-copy::before{margin-bottom:14px}
}

/* ---------- owner round 4 (2026-10-21): no hero gradients, real press post, partners, final card ---------- */
.hero{background:#fff}
.aurora{display:none}
.hero h1 .rot::after{display:none}
.hero-note{font:500 14.5px/1.4 var(--font);color:var(--muted)}

.press{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center;margin-top:112px;padding-top:56px;border-top:1px solid var(--line)}
.press .h3{font-size:clamp(28px,3vw,38px);letter-spacing:-.025em}
.press .fine{margin-top:16px;max-width:440px;font:500 15px/1.65 var(--font);color:var(--muted)}
.xpost{display:block;padding:24px 26px 20px;border:1px solid var(--line);border-radius:16px;background:#fff;color:var(--ink);transition:border-color .15s}
.xpost:hover{border-color:#b9c7c0}
.xpost-head{display:flex;align-items:center;gap:12px}
.xpost-av{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;background:#1d3b2a;color:#fff;font:600 15px/1 var(--font-h);letter-spacing:.02em}
.xpost-who{display:flex;flex-direction:column;gap:3px;line-height:1.15}
.xpost-who b{font:600 15.5px/1.15 var(--font-h)}
.xpost-who span{font:500 14px/1.15 var(--font);color:var(--muted)}
.xpost-x{width:20px;height:20px;margin-left:auto;color:var(--ink)}
.xpost-body{display:flex;flex-direction:column;gap:12px;margin-top:16px;font:500 16.5px/1.55 var(--font);color:var(--ink)}
.xpost-body u{text-decoration:none;color:#1d6fc4}
.xpost-note{font-size:14.5px;color:var(--muted)}
.xpost-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font:500 13.5px/1 var(--font);color:var(--muted)}
.xpost-open{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--green-d)}
.xpost-open svg{width:14px;height:14px}

.partners-sec{padding-top:0}
.partners-head{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:end;padding-top:56px;border-top:1px solid var(--line)}
.partners-head .lead{margin:0;max-width:560px}
.plist2{display:grid;grid-template-columns:1fr 1fr;margin-top:40px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.partner2{display:grid;grid-template-rows:auto 1fr auto;gap:18px;padding:32px 32px 28px 0;color:var(--ink)}
.partner2+.partner2{padding-left:32px;border-left:1px solid var(--line)}
.p2-logo{height:56px;display:flex;align-items:center}
.p2-logo img{max-height:38px;width:auto}
.p2-logo.dark{width:fit-content;padding:0 14px;border-radius:10px;background:var(--navy)}
.p2-text{font:500 15px/1.6 var(--font);color:var(--muted)}
.p2-text b{font:600 18px/1.3 var(--font-h);color:var(--ink)}
.p2-text em{font:600 12.5px/1 var(--font);font-style:normal;color:var(--muted);margin-left:6px;padding:3px 7px;border:1px solid var(--line);border-radius:6px;vertical-align:2px}
.p2-text>span{display:block;margin-top:8px;max-width:440px}
.p2-go{display:inline-flex;align-items:center;gap:6px;font:600 14px/1 var(--font);color:var(--green-d)}
.p2-go svg{width:14px;height:14px}
.partner2:hover .p2-go{text-decoration:underline}

.final-sec{padding:24px 0 96px}
.final2{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:end;padding:72px 64px;border-radius:24px;background:#0f2a1c;color:#cfe3d7}
.final2 h2{color:#fff;font-size:clamp(32px,4vw,52px);font-weight:600;letter-spacing:-.03em;line-height:1.06;max-width:640px}
.final2 p{margin-top:18px;font:500 18px/1.6 var(--font);max-width:520px;color:#b9d3c4}
.final2-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.final2-ctas .btn{height:54px;padding:0 26px;font-size:16.5px}
.btn-dark-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}
.btn-dark-ghost:hover{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.final2-facts{display:grid;grid-template-columns:1fr 1fr;margin:0;border-top:1px solid rgba(255,255,255,.14)}
.final2-facts div{padding:18px 0 4px;border-bottom:1px solid rgba(255,255,255,.14)}
.final2-facts div:nth-child(odd){padding-right:20px}
.final2-facts dt{font:600 30px/1 var(--font-h);color:#fff;letter-spacing:-.02em}
.final2-facts dd{margin:6px 0 12px;font:500 14px/1.3 var(--font);color:#9fbdac}

@media (max-width:1024px){
  .press,.partners-head,.final2{grid-template-columns:1fr;gap:32px}
  .final2{padding:56px 40px}
}
@media (max-width:720px){
  .press{margin-top:72px;padding-top:40px}
  .plist2{grid-template-columns:1fr}
  .partner2{padding:28px 0}
  .partner2+.partner2{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .final2{padding:44px 24px;border-radius:20px}
  .xpost{padding:20px}
  .xpost-open{margin-left:0}
}
/* hero mock-ups: flat, no gradients or glossy clip-art (owner: "The gradients on the hero I dislike") */
.hv-course-top{background:#e98a2c}
.hv-course-top svg,.hv-course-top img{display:none}
.bar i{background:var(--green)}
.nova-av{background:#e2f5f3}
.stats-lead{background:var(--soft)}

/* ================= rework-centered-quiet: calmer, in the spirit of oneprep.com ================= */
/* One typeface (Inter, 400 to 600), headings at 500, pill buttons, hairline frames with almost no shadow,
   flat line icons in small coloured squares, colour kept inside the product mock-ups. */
:root{
  --ink:#121614; --text:#47504c; --muted:#5f6864; --line:#e7eae8; --line-2:#d8ddda;
  --soft:#f7f8f7; --soft-2:#f0f2f1;
  --shadow-sm:0 1px 2px rgba(18,22,20,.04); --shadow:0 1px 2px rgba(18,22,20,.04); --shadow-lg:0 1px 3px rgba(18,22,20,.05);
  --font-h:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --btn:#121614; --btn-h:#2b322f;
}
h1,h2,h3,h4{font-weight:500;letter-spacing:-.025em;text-wrap:balance}
b,strong{font-weight:600}
.h2{font-size:clamp(30px,3.4vw,46px);font-weight:500;letter-spacing:-.032em;line-height:1.1;text-wrap:balance}
.h3{font-weight:500;text-wrap:balance}
:is(.sec-head h2, .courses-head h2, .cpanel-head h3, .rv h3, .testi h2, .mission-l h2, .final3 h2, .closing-cta h2, .comp h2){text-wrap:balance}
.lead{font-size:18px;line-height:1.6;color:var(--text);text-wrap:pretty}
.gw-cap{text-wrap:pretty}

/* section labels: sentence case with a small coloured square (product sections only) */
.eyebrow{gap:10px;font:500 15px/1 var(--font);letter-spacing:0;text-transform:none;color:var(--ink)}
.eyebrow::before{width:12px;height:12px;border-radius:3px;background:var(--green)}
.eyebrow.sky,.eyebrow.coral,.eyebrow.amber,.eyebrow.teal,.eyebrow.rose{color:var(--ink)}
.eyebrow.sky::before{background:var(--sky)} .eyebrow.coral::before{background:var(--coral)} .eyebrow.amber::before{background:#e09a2c} .eyebrow.teal::before{background:var(--teal)} .eyebrow.rose::before{background:var(--rose)}
.eyebrow+.h2{margin-top:18px}

/* buttons: near-black pill, outlined pill */
.btn{height:48px;padding:0 22px;border-radius:999px;font:500 16px/1 var(--font);letter-spacing:0;box-shadow:none}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--btn);color:#fff;box-shadow:none}
.btn-primary:hover{background:var(--btn-h)}
.btn-primary:active{translate:0 1px;box-shadow:none}
.btn-ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px #a9b2ad}
.btn-sm{height:40px;padding:0 17px;font-size:15px;border-radius:999px}
.link-arrow{font:500 15px/1.2 var(--font);color:var(--green-d)}

/* nav */
.brand{font:600 20px/1 var(--font);letter-spacing:-.02em}
.nav-link,.dd-btn{font:500 15px/1 var(--font);color:#2d3531}
.dd-btn[aria-expanded=true]{background:var(--soft-2);color:var(--ink)}
.dd-btn[aria-expanded=true] svg{color:var(--ink)}
.dd-panel{border-radius:16px;box-shadow:0 16px 40px -20px rgba(18,22,20,.18)}
.dd-item b,.dd-foot b{font:500 15px/1.25 var(--font);letter-spacing:0}
.dd-item .tile,.dd-foot .tile{width:40px;height:40px;border-radius:10px}
.dd-item:hover .tile,.dd-foot:hover .tile{transform:none;translate:none;scale:none;rotate:none}
.dd-foot{background:#fff}
.dd-foot:hover{background:var(--soft);border-color:var(--line-2)}
.dd-foot .tile{box-shadow:none}
@media (max-width:899px){
  .mm-btn,.mm-link{font:500 17px/1.2 var(--font)}
  .mm-btn[aria-expanded=true]{color:var(--ink)}
  .mm-sub a{font:500 15.5px/1.25 var(--font)}
  .mm-sub .tile{width:34px;height:34px;border-radius:9px}
}

/* tiles: flat line icons in small coloured squares */
.tile{border-radius:10px;color:var(--ink)}
.tile svg{width:56%;height:56%;filter:none}
.t-green{background:#e9f5ee;color:#13863f} .t-sky{background:#e8f2fb;color:#2479c4} .t-coral{background:#fcece8;color:#c2432d}
.t-amber{background:#fbf1df;color:#a15f00} .t-teal{background:#e2f3f1;color:#0d7a73} .t-rose{background:#fbeaee;color:#c23a5b} .t-navy{background:#e8edf3;color:#173350}

/* frames: hairline, barely any shadow */
.card{border:1px solid var(--line);box-shadow:var(--shadow);border-radius:18px}
.app{border:1px solid var(--line);box-shadow:var(--shadow);border-radius:16px}
.qtext{font:500 16px/1.45 var(--font);letter-spacing:-.005em}
.opt{border-radius:10px;box-shadow:inset 0 0 0 1px var(--line-2)}
.opt .k{border-radius:6px;font:600 12px/1 var(--font)}
.opt.right{box-shadow:inset 0 0 0 1px #8fd2aa}
.opt.sel{box-shadow:inset 0 0 0 1.5px var(--sky)}
.chip{font:500 12.5px/1 var(--font)}
.actions .fake{border-radius:999px;font:500 14.5px/1 var(--font)}
.fake.p{box-shadow:none}
.fake.g{box-shadow:inset 0 0 0 1px var(--line-2)}

/* hero: calm centred copy, one hand-drawn swash under the changing word */
.hero{padding:104px 0 0}
.hero h1{font-size:clamp(42px,5.6vw,76px);font-weight:400;letter-spacing:-.04em;line-height:1.06}
.hero h1 .rot{color:var(--ink);padding-bottom:.1em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10.5C42 5.5 98 3.2 197 5.6' fill='none' stroke='%2313863f' stroke-width='3.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") left bottom/100% .2em no-repeat}
.hero .lead{font-size:19px;color:var(--text);margin-top:26px}
.hero-ctas{margin-top:36px;gap:10px}
.hero-ctas .btn{height:52px;padding:0 26px;font-size:16.5px}
.hero-ctas .btn-ghost svg{color:var(--muted)!important}
.hero-note{margin-top:20px;font:400 14.5px/1.4 var(--font)}

/* hero product composition: three straight frames side by side, the question in the middle */
.hv{gap:20px;margin-top:72px;padding-bottom:72px;align-items:flex-start}
.hv::before{display:none}
.hv>.card{min-width:0}
.hv .fan-l,.hv .fan-r{flex:0 1 330px;width:auto;margin:40px 0 0;transform:none}
.hv .fan-c{flex:0 1 400px;width:auto;padding:24px;box-shadow:var(--shadow)}
.hv-course-top{height:auto;padding:18px 20px 16px;background:#fff;color:var(--ink);border-bottom:1px solid var(--line)}
.hv-course-top small{font:500 12.5px/1 var(--font);color:var(--muted);opacity:1}
.hv-course-top strong{margin-top:8px;font:500 19px/1.2 var(--font);max-width:none;letter-spacing:-.015em}
.step{font:500 14px/1.2 var(--font)}
.step .dot{font:600 12px/1 var(--font)}
.nova-head{font:600 14px/1.2 var(--font)}
.nova-av{background:#e2f3f1;color:var(--teal);border-radius:10px}
.nova-av svg{width:18px;height:18px}
.bubble{font:400 14px/1.5 var(--font)}
.stats{margin-top:0}

/* stats strip */
.stats-card{border:1px solid var(--line);box-shadow:none;border-radius:18px}
.stats-lead{background:#fff}
.stats-lead b{font:500 17px/1.3 var(--font)}
.stat b{font:500 30px/1 var(--font);letter-spacing:-.03em}
.stat span{font:400 13.5px/1.3 var(--font);letter-spacing:0;text-transform:none}

/* how Stellar works: numbered steps under a centred title */
.how{background:#fff}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:56px 0 0;padding:0;list-style:none}
.step-i{display:flex;flex-direction:column;min-width:0}
.step-i>.card{flex:1;padding:22px}
.step-t{padding:22px 4px 0}
.step-n{display:block;font:500 14px/1 var(--font);color:var(--muted);font-variant-numeric:tabular-nums}
.step-t h3{margin-top:12px;font:500 21px/1.25 var(--font);letter-spacing:-.02em}
.step-t p{margin-top:8px;font:400 15.5px/1.55 var(--font);color:var(--text);max-width:340px}
.loop-head{padding-bottom:16px}
.loop-head b{font:600 16px/1.2 var(--font)}
.loop-head .tile{width:40px;height:40px}
.loop ol{margin-top:12px}
.loop li{padding:9px 10px;border-radius:12px}
.loop li .n{width:26px;height:26px;border-radius:8px;font:500 12.5px/1 var(--font)}
.loop li b,.tools li b{font:500 15px/1.25 var(--font)}
.loop li .tile{width:32px;height:32px;border-radius:8px}
.mcq h3{font:500 19px/1.25 var(--font);margin-top:16px}
.mcq .qtext{font:400 16px/1.5 var(--font)}
.mcq .opts{grid-template-columns:1fr}
.support-head b{font:500 18px/1.25 var(--font)}
.tools{grid-template-columns:1fr;gap:2px;margin-top:14px}
.tools li{padding:8px 2px;gap:12px}
.tools li .tile{width:34px;height:34px;border-radius:9px}

/* feature sections: plain white bands, flat grey stage, no counters */
.fs,.fs.alt{background:#fff}
.fs{padding:96px 0}
.fs .feat-copy::before{display:none}
.stage.green,.stage.sky,.stage.amber,.stage.coral,.stage.teal{background:var(--soft)}
.feat-points li{font:500 15px/1.35 var(--font)}
.feat-points .tile{width:32px;height:32px;border-radius:8px}
.tabs-mock span{background:#fff;font:500 13px/1 var(--font);box-shadow:inset 0 0 0 1px var(--line)}
.app-bar b{font:600 15px/1.2 var(--font)}
.stack::before,.stack::after{display:none}
.mini b,.frq-src h4{font:600 13px/1.2 var(--font);letter-spacing:0;text-transform:none;color:var(--ink)}
.seg span.on{box-shadow:inset 0 0 0 1px var(--line)}
.exam-bar b{font:600 14px/1 var(--font)}
.amc-opts span{font:500 16px/1 var(--font);box-shadow:inset 0 0 0 1px var(--line-2);border-radius:10px}

/* competitions: the same calm panel as the other product sections */
.comp{background:var(--soft);color:var(--text);border:1px solid var(--line);border-radius:24px}
.comp::before{display:none}
.comp h2,.comp .h2{color:var(--ink)}
.comp .lead{color:var(--text)}
.comp .eyebrow{color:var(--ink)}
.comp .eyebrow::before{background:#e09a2c}
.comp .tabs-mock span{background:#fff;color:#3f4c46;box-shadow:inset 0 0 0 1px var(--line)}
.comp .tabs-mock span.on{background:var(--ink);color:#fff;box-shadow:none}
.kpi{background:#fff;box-shadow:inset 0 0 0 1px var(--line);border-radius:14px}
.kpi small{font:400 13px/1 var(--font);letter-spacing:0;text-transform:none;color:var(--muted)}
.kpi b{font:500 17px/1.25 var(--font);color:var(--ink)}
.comp .btn-white{background:var(--btn);color:#fff;box-shadow:none}
.comp .btn-white:hover{background:var(--btn-h)}
.comp .try{color:var(--muted)}
.comp .try .link-arrow{color:var(--green-d)}

/* comparison */
.cmp-wrap{border:1px solid var(--line);box-shadow:none;border-radius:18px}
.cmp thead th{font:500 14px/1.2 var(--font)}
.cmp tbody th{font:500 15px/1.35 var(--font)}
.cmp .price td{font:500 15px/1.3 var(--font)}
.cmp .price td.me{font-weight:600}

/* courses: white cards, hairline, small flat icon */
.cstats div{border-radius:14px}
.cstats b{font:500 24px/1 var(--font)}
.cstats span{font:400 13px/1 var(--font);letter-spacing:0;text-transform:none}
.ctabs{border-radius:999px;padding:4px}
.ctabs button{height:40px;border-radius:999px;font:500 14.5px/1 var(--font)}
.ctabs button[aria-selected=true]{background:var(--btn);color:#fff;box-shadow:none}
.cpanel-head h3{font:500 21px/1.3 var(--font)}
.subj{border:1px solid var(--line);box-shadow:none;border-radius:16px}
.subj-top{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;height:auto;padding:20px 20px 16px;background:#fff;color:var(--ink);border-bottom:1px solid var(--line)}
.subj-top h4{grid-column:2;font:500 18px/1.2 var(--font);color:var(--ink);max-width:none;text-shadow:none;letter-spacing:-.015em}
.subj-top p{grid-column:2;margin-top:4px;font:400 13.5px/1 var(--font);color:var(--muted)}
.subj-top svg{position:static;grid-column:1;grid-row:1/3;width:40px;height:40px;padding:9px;border-radius:10px;background:var(--soft-2);color:var(--ink);transition:none}
.subj:hover .subj-top svg{transform:none;translate:none;scale:none;rotate:none}
.g-green svg{background:#e9f5ee;color:#13863f} .g-sky svg{background:#e8f2fb;color:#2479c4} .g-coral svg{background:#fcece8;color:#c2432d}
.g-amber svg,.g-gold svg{background:#fbf1df;color:#a15f00} .g-teal svg{background:#e2f3f1;color:#0d7a73} .g-rose svg{background:#fbeaee;color:#c23a5b} .g-navy svg{background:#e8edf3;color:#173350}
.subj li a{font:500 14.5px/1.3 var(--font)}
.subj ul{padding:8px 8px 10px}
.empty b{font:500 18px/1.3 var(--font)}
.ticket a{font-weight:500}

/* testimony, globe, reviews */
.testi h2 em,.mission-l .h2 em{color:inherit}
.quote{background:#fff;box-shadow:none;border:1px solid var(--line);border-radius:20px}
.quote .qm{width:48px;height:48px;opacity:.7}
.quote blockquote{font:400 20px/1.6 var(--font);letter-spacing:-.01em}
.quote figcaption b{font:500 15px/1.2 var(--font)}
.avatar{border-radius:10px;color:var(--green)}
.avatar svg{width:22px;height:22px}
.global{background:#fff;box-shadow:none;border:1px solid var(--line);border-radius:24px}
.gstats div{box-shadow:inset 0 0 0 1px var(--line);border-radius:14px}
.gstats b{font:500 28px/1 var(--font)}
.gstats span{font:400 13px/1 var(--font);letter-spacing:0;text-transform:none}
.rv{box-shadow:inset 0 0 0 1px var(--line);border-radius:16px}
.rv .who i{font:600 12px/1 var(--font)}
.press .h3{font-weight:500}
.xpost-av{font:600 15px/1 var(--font)}
.xpost-who b{font:600 15.5px/1.15 var(--font)}
.xpost-open{font-weight:500}

/* partners */
.p2-text b{font:500 18px/1.3 var(--font)}
.p2-go{font:500 14px/1 var(--font)}

/* mission */
.mission{box-shadow:none;border:1px solid var(--line);border-radius:24px}
.mission-l{background:var(--soft)}
.mission-r h3{font:500 15px/1 var(--font);letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 12px 14px}
.help b{font:500 16px/1.2 var(--font)}
.help .aud{font:500 11.5px/1 var(--font)}

/* FAQ: one centred, clean list */
.faq{grid-template-columns:1fr;max-width:840px;gap:40px}
.faq-side{position:static;text-align:center}
.faq-side .lead{margin-left:auto;margin-right:auto}
.faq-side .tiles{display:none}
.acc{gap:0}
.acc details,.acc details[open]{border-radius:0;background:none;box-shadow:none;border-bottom:1px solid var(--line)}
.acc summary{padding:22px 4px;font:500 17px/1.4 var(--font);border-radius:0}
.acc summary .pm{background:none;color:var(--muted)}
.acc summary .pm svg{width:16px;height:16px}
.acc details[open] summary .pm{background:none;color:var(--ink)}
.acc .ans{padding:0 4px 24px;color:var(--text)}
.acc .grp{margin:36px 0 4px 4px;font:500 14px/1 var(--font);letter-spacing:0;text-transform:none;color:var(--muted)}
.acc .grp:first-child{margin-top:0}

/* final card: same card, calmer type */
.final-sec{padding:16px 0 104px}
.final2 h2{font-weight:500;letter-spacing:-.035em;line-height:1.1}
.final2 p{font:400 18px/1.6 var(--font)}
.final2 .btn-primary{background:#fff;color:var(--ink)}
.final2 .btn-primary:hover{background:#e9f1ec}
.btn-dark-ghost{box-shadow:inset 0 0 0 1px rgba(255,255,255,.32)}
.final2-facts dt{font:500 30px/1 var(--font)}

/* footer */
.foot{margin-top:0;background:#fff;border-top:1px solid var(--line)}
.foot .brand{font-size:19px}
.foot :is(h3,h4){font:500 14px/1 var(--font);letter-spacing:0;text-transform:none;color:var(--ink)}
.foot ul a{font:400 14.5px/1.3 var(--font);color:var(--text)}
.foot-about a.mail{font-weight:500}
.social span{font:500 14px/34px var(--font);letter-spacing:0;text-transform:none;color:var(--ink)}
.social a{font:400 13.5px/1 var(--font)}

@media (max-width:1024px){
  .steps{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}
  .hv .fan-l,.hv .fan-r{margin-top:32px}
}
@media (max-width:720px){
  .hero{padding:48px 0 0}
  .hero h1{font-size:40px}
  .hv{gap:12px;margin-top:44px;padding-bottom:40px}
  .hv>.card,.hv .fan-l,.hv .fan-r,.hv .fan-c{flex:none;width:84%;max-width:330px;margin:0}
  .hv .fan-l,.hv .fan-r{box-shadow:var(--shadow)}
  .fs{padding:72px 0}
  .comp{padding:32px 20px}
  .acc summary{padding:18px 2px;font-size:16px}
  .acc .ans{padding:0 2px 20px}
  .acc .grp{margin-left:2px} /* R50: group labels line up with the 2px question inset */
  .final-sec{padding-bottom:72px}
}

/* Finishing pass: responsive rhythm and restrained product frames. */
.hero-copy,.feat>*,.comp-grid>*,.global>*,.final2>*,.subjects>*{min-width:0}
.hero h1{max-width:100%}
.hero h1 .rot{white-space:nowrap}
.hv .fan-l,.hv .fan-r{transform:none}
.step-n{font-size:16px;color:var(--ink)}
.rv h4{font-weight:500}
.help>.tile{width:40px;height:40px}
.help .aud{white-space:normal;line-height:1.4}
.app-bar>*,.exam-bar>*,.exam-foot>*{min-width:0}
.exam-foot,.actions{flex-wrap:wrap}
.foot-about a.mail{overflow-wrap:anywhere}

@media (min-width:1025px){
  .steps{grid-template-rows:auto auto;row-gap:0}
  .step-i{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
}
@media (max-width:1024px){
  .steps{row-gap:44px}
}
@media (max-width:720px){
  .hero h1{font-size:clamp(34px,9.8vw,44px);line-height:1.12}
  .hero h1 .rot{display:block;width:fit-content;margin:4px auto 0;min-height:1.22em}
  .hero .lead{font-size:17px;line-height:1.65;margin-top:24px}
  .hero-ctas{width:100%;gap:10px;margin-top:28px}
  .hero-ctas .btn{padding:0 16px;font-size:15px}
  .hv{width:calc(100% + 40px);scroll-padding-inline:20px}
  .hv .fan-c{padding:18px}
  .hv-prog{margin-right:10px}
  .stats-lead{padding:20px}
  .stat b{font-size:26px}
  .quote blockquote{font-size:17px}
  .gstats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gstats div{min-width:0;padding:14px 8px}
  .gstats b{font-size:clamp(18px,5.5vw,23px)}
  .gstats span{font-size:12px}
  .app-bar{flex-wrap:wrap}
  .seg{max-width:100%;flex-wrap:wrap}
  .final2-facts dt{font-size:clamp(24px,6.8vw,30px)}
}
@media (max-width:379px){
  .hero-ctas .btn{flex-basis:100%}
  .nav-in{gap:8px}
  .nav-cta{gap:6px}
  .nav-cta .btn{padding:0 12px;font-size:13px;min-height:44px}
  .brand{gap:7px;font-size:19px}
  .menu-btn{width:44px;height:44px;min-width:44px;min-height:44px}
  .final2-ctas .btn{width:100%}
}

/* ---------- owner round 5 (2026-10-21): "The pill labels and the last card still need work. The colored icons
   with the box need work. Those look AI." ---------- */
/* section labels: plain small text, no coloured square */
.eyebrow{font:500 14px/1.2 var(--font);color:var(--muted);letter-spacing:0;text-transform:none}
.eyebrow::before{display:none}
.eyebrow.sky,.eyebrow.coral,.eyebrow.amber,.eyebrow.teal,.eyebrow.rose{color:var(--muted)}
.comp .eyebrow{color:#9fb3a8}
/* coloured icon boxes: gone everywhere (nav menus, feature lists, tools, ways to help) */
.tile{display:none!important}
.dd-item,.dd-foot{padding:10px 12px}
.tools li,.help a{padding-left:0}
/* pills inside the product mock-ups and lists become plain text or app-style underline tabs */
.chip{background:none!important;box-shadow:none!important;padding:0!important;height:auto!important;border-radius:0!important;font:600 12.5px/1.2 var(--font);color:var(--muted)!important}
.aud{background:none!important;box-shadow:none!important;padding:0!important;border-radius:0!important;font:500 13px/1.2 var(--font);color:var(--muted)}
.aud::before{content:"· "}
.tabs-mock{gap:20px;border-bottom:1px solid var(--line);margin-bottom:16px}
.tabs-mock span,.tabs-mock span.on{height:34px;padding:0;border-radius:0;background:none;box-shadow:none;font:500 13px/1 var(--font);color:var(--muted)}
.tabs-mock span.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
.comp .tabs-mock{border-color:rgba(255,255,255,.14)}
.comp .tabs-mock span{color:#9fb3a8}
.comp .tabs-mock span.on{color:#fff;box-shadow:inset 0 -2px 0 #fff}
/* final section: no card, a quiet closing statement */
.final-sec{padding:40px 0 104px}
.final3{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:end;padding-top:64px;border-top:1px solid var(--line)}
:is(.final3, .closing-cta) h2{font:400 clamp(36px,4.6vw,60px)/1.05 var(--font-h);letter-spacing:-.03em;color:var(--ink);max-width:680px}
.final3-side p{font:400 18px/1.6 var(--font);color:var(--muted);max-width:440px}
.final3-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.final3-ctas .btn{height:52px;padding:0 24px;font-size:16px}
@media (max-width:1024px){.final3{grid-template-columns:1fr;gap:28px}}
@media (max-width:720px){.final-sec{padding:24px 0 72px}.final3{padding-top:44px}.final3-ctas .btn{flex:1 1 auto;justify-content:center}}

/* owner 2026-10-22: hover box on Ways to help / support tools must not cut through the text: keep inner padding, bleed the box outward so the text stays aligned */
.help a{padding:14px 16px!important;margin:0 -16px}
.tools li{padding:10px 14px!important;margin:0 -14px}
@media (max-width:720px){.help a{margin:0 -12px;padding:14px 12px!important}.tools li{margin:0 -10px;padding:10px!important}}
/* competition tabs: the section turned light, so use the same underline tabs as the other mock-ups (owner 2026-10-22) */
.comp .tabs-mock{border-color:var(--line)}
.comp .tabs-mock span,.comp .tabs-mock span.on{background:none;box-shadow:none;padding:0;border-radius:0;color:var(--muted)}
.comp .tabs-mock span.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
/* X post: real profile photo and the X mark (owner 2026-10-22) */
.xpost-av{overflow:hidden;background:var(--soft)!important}
.xpost-av img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.xpost-x{color:var(--ink)}
/* stats row: no boxes, centred numbers between hairlines (owner 2026-10-22) */
.cstats{gap:0!important;align-items:stretch}
.cstats div{background:none!important;box-shadow:none!important;border-radius:0!important;padding:2px 28px!important;min-width:0!important;text-align:center;border-left:1px solid var(--line)}
.cstats div:first-child{border-left:0}
.cstats b{font:400 34px/1 var(--font)!important;letter-spacing:-.02em;color:var(--ink)}
.cstats span{margin-top:8px!important;font:400 13px/1 var(--font)!important;letter-spacing:0!important;color:var(--muted)!important}
@media (max-width:720px){.cstats div{flex:1;padding:2px 8px!important}.cstats b{font-size:28px!important}}
/* mock-up captions read as numbered figure captions, like a printed paper (owner 2026-10-22: "can pop out a bit more") */
body{counter-reset:fig}
.try{counter-increment:fig;margin-top:18px;padding:12px 6px 0;border-top:1px dashed var(--line-2,#d5dbd8);font:500 15px/1.35 var(--font);color:var(--ink)}
.try>span::before{content:"Fig. " counter(fig);display:inline-block;margin-right:10px;padding-right:10px;border-right:1px solid var(--line-2,#d5dbd8);font:600 12px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--green)}
.try .link-arrow{font-weight:500}
.try .link-arrow:hover{text-decoration:underline;text-underline-offset:4px}
/* Ways to help: title lines up with the item text (owner 2026-10-22) */
.mission-r>h3{margin-left:0!important;padding-left:0!important}

/* ================= POLISH WAVE (2026-10-22): corners, shadows and motion + paper canvas + dark footer + dark theme =================
   One system for the whole site; rules in DESIGN-PRINCIPLES.md "Corners, shadows and motion". Tokens mirror _style/tokens.css
   (this page does not load tokens.css). Square: bands, tables, section rules, accordions, the footer. 16: cards, sheets, panels.
   10: inputs, menus, popups, images inside cards, small inner panels. 6: tiny controls inside product UI. Pill: buttons, chips. */
:root{
  --radius-0:0; --radius-s:6px; --radius-m:10px; --radius-l:16px; --radius-pill:999px;
  --paper:#f8f8f6; --sheet:#ffffff; --rule-dash:#d3d8d5; --grid-line:rgba(18,22,20,.045);
  --shadow-rest:0 1px 2px rgba(18,22,20,.05);
  --shadow-raised:0 1px 2px rgba(18,22,20,.06),0 12px 32px -12px rgba(18,22,20,.22);
  --shadow-float:0 2px 4px rgba(18,22,20,.05),0 24px 56px -20px rgba(18,22,20,.30);
  --ease:cubic-bezier(.2,.7,.2,1); --ease-io:cubic-bezier(.4,0,.2,1);
  --dur-1:160ms; --dur-2:240ms; --dur-3:600ms; --lift:-2px; --lift-btn:-1px; --rise:16px; --stagger:70ms;
  --foot-bg:#0f1713; --foot-text:#c9d2cd; --foot-muted:#8c9a93; --foot-line:rgba(255,255,255,.10); --foot-dot-1:#2c5a40; --foot-dot-2:#1f4330;
  --btn-text:#fff; --panel:#f1f1ee;
}
html.dark{
  --ink:#eef1ef; --text:#c3cbc7; --muted:#97a19c; --line:#2a312e; --line-2:#3a423e;
  --canvas:#141816; --soft:#1a1f1d; --soft-2:#212724;
  --green:#3fb26b; --green-d:#4cc27a; --green-dd:#6fd394; --green-50:#16271d; --green-100:#1d3a28;
  --sky-50:#16232f; --coral-50:#2c1a17; --amber-50:#2a2213; --teal-50:#132624; --rose-50:#2b1820;
  --btn:#eef1ef; --btn-h:#d6dcd9; --btn-text:#121614;
  --paper:#121614; --sheet:#1a1f1d; --panel:#171c1a; --rule-dash:#3a423e; --grid-line:rgba(255,255,255,.035);
  --shadow-rest:0 1px 2px rgba(0,0,0,.30);
  --shadow-raised:0 1px 2px rgba(0,0,0,.35),0 12px 32px -12px rgba(0,0,0,.60);
  --shadow-float:0 2px 4px rgba(0,0,0,.35),0 24px 56px -20px rgba(0,0,0,.70);
  --foot-bg:#0c120f;
  color-scheme:dark;
}

/* ---------- paper canvas: warm off-white page, white sheets on it ---------- */
html,body{background:var(--paper)}
.hero,.how,.fs,.fs.alt,.courses,.frq-sec{background:transparent}
.nav{background:color-mix(in srgb,var(--paper) 86%,transparent)}
.nav.scrolled{background:color-mix(in srgb,var(--paper) 94%,transparent)}
.nav.menu-open,.mobile-menu{background:var(--paper)}

/* ---------- corners: one scale ---------- */
.card,.app,.stats-card,.quote,.global,.mission,.subj,.cmp-wrap,.xpost,.comp,.empty,.media,.partner{border-radius:var(--radius-l)}
.stage{border-radius:var(--radius-l)}
@media (min-width:1025px){
  /* panels that run off the page edge are square on the cut side, 16 on the inside */
  .fs .feat:not(.rev) .stage{border-radius:var(--radius-l) 0 0 var(--radius-l)}
  .fs .feat.rev .stage{border-radius:0 var(--radius-l) var(--radius-l) 0}
}
.opt,.amc-opts span,.kpi,.gstats div,.rv,.note,.dd-panel,.menu-btn,.p2-logo.dark,.hv-course-top~*:is(img){border-radius:var(--radius-m)}
.opt .k,.note .x,.loop li .n,.p2-text em,.timer{border-radius:var(--radius-s)}
.nav-link,.dd-btn,.dd-item,.dd-foot,.mm-sub a,.loop li,.help a,.tools li{border-radius:var(--radius-m)}
.btn,.btn-sm,.actions .fake,.ctabs,.ctabs button,.social a{border-radius:var(--radius-pill)}
.acc details,.acc details[open],.acc summary,.cmp,.plist2{border-radius:0}
/* the last off-scale corners (after-audit 2026-10-22): 12/14 -> 10, 7 -> 6, 18 -> 16 */
.feedback,.composer .in,.composer .send,.hv-path .step,.mini,.app-bar .seg,.frq-ans .part,.lockbar,.subj li a,svg.graph{border-radius:var(--radius-m)}
.qnav i{border-radius:var(--radius-s)}
.cmp thead th.me{border-radius:var(--radius-l) var(--radius-l) 0 0}

/* ---------- shadows: rest / raised / float ---------- */
.card,.stats-card,.quote,.global,.mission,.subj,.cmp-wrap,.xpost{background:var(--sheet);border:1px solid var(--line);box-shadow:var(--shadow-rest)}
/* product mock-ups are white sheets lifted off their pale panel (owner 09:50: "more popped out") */
.stage{background:var(--panel)!important;box-shadow:inset 0 0 0 1px var(--line)}
.stage .app,.comp .app,.hv>.card,.how .card{background:var(--sheet);border:1px solid rgba(18,22,20,.06);box-shadow:var(--shadow-raised)}
.hv .fan-c{box-shadow:var(--shadow-float)}
.comp{background:var(--panel)}
.dd-panel{box-shadow:var(--shadow-float)}

/* ---------- motion: hover lift, press, open/close ---------- */
.btn{transition:transform var(--dur-1) var(--ease),translate var(--dur-1) var(--ease),scale var(--dur-1) var(--ease),rotate var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease),box-shadow var(--dur-2) var(--ease),color var(--dur-1) var(--ease)}
.btn:hover{translate:0 var(--lift-btn)}
.btn-primary:hover{box-shadow:var(--shadow-raised)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px #a9b2ad,var(--shadow-rest)}
.btn:active,.btn-primary:active{translate:0 0;scale:.98;transition-duration:80ms}
.actions .fake{transition:transform var(--dur-1) var(--ease),translate var(--dur-1) var(--ease),scale var(--dur-1) var(--ease),rotate var(--dur-1) var(--ease)}
.actions .fake:active{scale:.97}
.stage .app,.comp .app,.hv>.card,.how .card,.subj,.quote,.xpost,.rv,.partner2{transition:transform var(--dur-2) var(--ease),translate var(--dur-2) var(--ease),scale var(--dur-2) var(--ease),rotate var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
.stage .app:hover,.comp .app:hover,.hv>.card:hover,.how .card:hover{translate:0 var(--lift);box-shadow:var(--shadow-float)}
.subj:hover,.quote:hover,.xpost:hover{translate:0 var(--lift);box-shadow:var(--shadow-raised)}
.opt{transition:box-shadow var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease)}
.dd-panel{transition:opacity var(--dur-1) var(--ease),transform var(--dur-2) var(--ease),translate var(--dur-2) var(--ease),scale var(--dur-2) var(--ease),rotate var(--dur-2) var(--ease),visibility 0s linear var(--dur-2)}
.dd.open .dd-panel{transition:opacity var(--dur-1) var(--ease),transform var(--dur-2) var(--ease),translate var(--dur-2) var(--ease),scale var(--dur-2) var(--ease),rotate var(--dur-2) var(--ease),visibility 0s}
/* accordion: the answer fades and rises in; the +/x turns */
.acc details[open] .ans{animation:sx-open var(--dur-2) var(--ease) both}
@keyframes sx-open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
:is(.acc details, details.faq-item) summary .pm svg{transition:transform var(--dur-2,240ms) var(--ease-io,cubic-bezier(.4,0,.2,1)),rotate var(--dur-2,240ms) var(--ease-io,cubic-bezier(.4,0,.2,1))}
:is(.acc details, details.faq-item)[open] summary .pm svg{transform:rotate(45deg)}
/* course tabs: the selected pill slides to the chosen tab (the pill .sx-bar is added by rework.js) */
.ctabs{position:relative}
.ctabs .sx-bar{position:absolute;left:0;top:4px;bottom:4px;width:0;background:var(--btn);border-radius:var(--radius-pill);pointer-events:none;box-shadow:var(--shadow-rest);transition:transform var(--dur-2) var(--ease),translate var(--dur-2) var(--ease),scale var(--dur-2) var(--ease),rotate var(--dur-2) var(--ease),width var(--dur-2) var(--ease)}
.ctabs.sx-has-bar button{position:relative;z-index:1;transition:color var(--dur-2) var(--ease),background-color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease),translate var(--dur-1) var(--ease),scale var(--dur-1) var(--ease),rotate var(--dur-1) var(--ease)}
.ctabs.sx-has-bar button[aria-selected=true]{background:transparent!important;box-shadow:none!important;color:var(--btn-text,#fff)}
.ctabs button:active{scale:.97}
/* links with an arrow nudge */
.link-arrow svg,.p2-go svg,.xpost-open svg{transition:transform var(--dur-1) var(--ease),translate var(--dur-1) var(--ease),scale var(--dur-1) var(--ease),rotate var(--dur-1) var(--ease)}
.p2-go:hover svg,.xpost:hover .xpost-open svg{translate:3px 0}

/* scroll reveal: fade and rise once, siblings staggered (classes set by rework.js only when motion is allowed) */
.sx-rv{opacity:0;transform:translateY(var(--rise));transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease),translate var(--dur-3) var(--ease),scale var(--dur-3) var(--ease),rotate var(--dur-3) var(--ease);transition-delay:calc(var(--i,0) * var(--stagger))}
.sx-rv.sx-in{opacity:1;transform:none}
/* sheets rise a little further than their panel, so they settle onto it */
.stage .app.sx-rv{transform:translateY(calc(var(--rise) * 1.6));transition-delay:calc(120ms + var(--i,0) * var(--stagger))}
.stage .app.sx-rv.sx-in{transform:none}
/* once revealed, rework.js removes these classes and the hover lift takes over with its own short timing */

/* ---------- graph-paper grid behind the hero and the closing section ---------- */
.hero,.final-sec{position:relative;isolation:isolate}
.hero::before,.final-sec::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--grid-line);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M32 .5H0M.5 0v32' fill='none' stroke='%23000'/%3E%3C/svg%3E") 0 0/32px 32px,linear-gradient(#000 40%,transparent);
  -webkit-mask-composite:source-in;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M32 .5H0M.5 0v32' fill='none' stroke='%23000'/%3E%3C/svg%3E") 0 0/32px 32px,linear-gradient(#000 40%,transparent);
  mask-composite:intersect}
.final-sec::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M32 .5H0M.5 0v32' fill='none' stroke='%23000'/%3E%3C/svg%3E") 0 0/32px 32px,linear-gradient(transparent,#000 35%);
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M32 .5H0M.5 0v32' fill='none' stroke='%23000'/%3E%3C/svg%3E") 0 0/32px 32px,linear-gradient(transparent,#000 35%);-webkit-mask-composite:source-in;mask-composite:intersect}
.hero .card,.hv>.card{position:relative}

/* ---------- dashed hairlines between list items (document cue) ---------- */
.acc details,.acc details[open]{border-bottom:1px dashed var(--rule-dash)}
.cmp tbody :is(th,td){border-bottom-style:dashed;border-bottom-color:var(--rule-dash)}
.partner2+.partner2{border-left-style:dashed;border-left-color:var(--rule-dash)}
.final3{border-top:1px dashed var(--rule-dash)}

/* ---------- footer: dark full-bleed, giant halftone wordmark cut off by the page bottom (Reducto-style, our colours) ---------- */
.foot{position:relative;overflow:hidden;margin-top:0;padding:80px 0 0;background:var(--foot-bg);border-top:0;color:var(--foot-text)}
.foot .brand{color:#f2f5f3}
.foot-about p{color:var(--foot-text);font-weight:400}
.foot-about .small{color:var(--foot-muted)}
.foot-about a.mail{color:#f2f5f3;font-weight:400;text-decoration:underline;text-decoration-color:rgba(255,255,255,.28);text-underline-offset:4px}
.foot-about a.mail:hover{text-decoration-color:currentColor}
.foot :is(h3,h4){color:#f2f5f3;font:500 14px/1 var(--font)}
.foot ul a{color:var(--foot-text);font-weight:400;transition:color var(--dur-1) var(--ease)}
.foot ul a:hover{color:#fff}
.foot .social{gap:6px 22px;margin-top:56px;padding-top:24px;border-top:1px dashed var(--foot-line)}
.foot .social span{color:var(--foot-muted);font-weight:400;margin-right:4px}
.foot .social a{height:34px;padding:0;background:none;box-shadow:none;border-radius:0;color:var(--foot-text);font:400 14px/1 var(--font);transition:color var(--dur-1) var(--ease)}
.foot .social a:hover{box-shadow:none;color:#fff}
.foot .legal{color:var(--foot-muted);margin-top:20px}
.foot :focus-visible{outline-color:#7fd3a0}
.foot::after{content:"stellar";display:block;margin:48px 0 -.2em;text-align:center;font:500 clamp(112px,25vw,400px)/.9 var(--font);letter-spacing:-.065em;color:transparent;pointer-events:none;user-select:none;-webkit-user-select:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Ccircle cx='3.5' cy='3.5' r='1.9' fill='%232f5f44'/%3E%3C/svg%3E") 0 0/7px 7px,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Ccircle cx='3.5' cy='3.5' r='1.1' fill='%23234a35'/%3E%3C/svg%3E") 3.5px 3.5px/7px 7px;
  -webkit-background-clip:text;background-clip:text}
@media (max-width:720px){.foot{padding-top:56px}.foot::after{margin-top:32px}.foot .social{margin-top:40px}}

/* ---------- dark theme: every white surface follows the tokens ---------- */
html.dark :is(.btn-ghost,.pill-open,.dd-foot,.menu-btn,.card,.opt,.stats-card,.tabs-mock span,.app,.fake.g,.seg span.on,.timer,.part.active,.kpi,.suggest span,.cmp-wrap,.cmp tbody th,.cmp thead th:first-child,.ctabs,.subj,.empty,.gstats div,.rv,.media,.partner,.mission,.xpost,.hv-course-top,.stats-lead,.subj-top,.quote,.global,.step.now .dot){background-color:var(--sheet)}
html.dark .dd-panel{background:var(--sheet);border-color:var(--line)}
html.dark .btn-primary,html.dark .final2 .btn-primary{background:var(--btn);color:var(--btn-text)}
html.dark .btn-primary:hover{background:var(--btn-h)}
html.dark .skip{color:var(--btn-text)}
html.dark .stage .app,html.dark .comp .app,html.dark .hv>.card,html.dark .how .card{border-color:var(--line)}
html.dark .nav-link,html.dark .dd-btn,html.dark .mm-sub a{color:var(--text)}
html.dark .hero h1 .rot{color:var(--ink)}
html.dark .p2-logo img,html.dark .partner img{filter:invert(1) hue-rotate(180deg) brightness(1.1)}
html.dark .p2-logo.dark img{filter:none}
html.dark .foot::after{opacity:.9}
html.dark .xpost-av{background:var(--soft-2)!important}
/* dark: text on tinted fills follows the theme (contrast scan 2026-10-22) */
html.dark :is(.fake.p,.bubble.me,.opt.sel .k,.opt.right .k,li.on .n){color:#0c1a12}
html.dark .feedback{color:var(--text)}
html.dark .note,html.dark .note :is(.var,b){color:#b8d4ee}
html.dark .lockbar{color:#e6be7a}
html.dark .btn-white{color:var(--btn-text)}

/* theme toggle (added to the header by rework.js; the original header had one) */
.sx-theme{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:var(--radius-m);background:none;color:var(--text);cursor:pointer;transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.sx-theme:hover{background:var(--soft-2);color:var(--ink)}
.sx-theme svg{width:19px;height:19px;transition:transform var(--dur-2) var(--ease),translate var(--dur-2) var(--ease),scale var(--dur-2) var(--ease),rotate var(--dur-2) var(--ease)}
.sx-theme:active svg{rotate:-20deg;scale:.92}
.sx-theme .i-moon,html.dark .sx-theme .i-sun{display:block}
.sx-theme .i-sun,html.dark .sx-theme .i-moon{display:none}

/* ---------- reduced motion: no lifts, no rises, no slides ---------- */
@media (prefers-reduced-motion:reduce){
  .sx-rv,.stage .app.sx-rv{opacity:1!important;transform:none!important;transition:none!important}
  .btn,.btn:hover,.btn:active,.stage .app,.comp .app,.hv>.card,.how .card,.subj,.quote,.xpost,.rv,.partner2,.actions .fake,.sx-theme svg,.ctabs .sx-bar,.dd-panel{transition:none!important}
  :is(.btn,.stage .app,.comp .app,.hv>.card,.how .card,.subj,.quote,.xpost,.actions .fake):is(:hover,:active){transform:none!important;translate:none!important;scale:none!important;rotate:none!important}
  .acc details[open] .ans{animation:none}
  :is(.acc details, details.faq-item) summary .pm svg{transition:none!important}
  .ctabs button:active{transform:none;translate:none;scale:none;rotate:none}
}
/* ================= end of POLISH WAVE ================= */
/* globe stats: same unboxed style as the course stats, numbers between hairlines (owner 2026-10-22) */
.gstats{display:flex!important;gap:0!important;align-items:stretch}
.gstats>div{background:none!important;box-shadow:none!important;border:0!important;border-radius:0!important;padding:2px 28px!important;min-width:0!important;border-left:1px solid var(--line)!important}
.gstats>div:first-child{border-left:0!important;padding-left:0!important}
.gstats b{display:block;font:400 34px/1 var(--font)!important;letter-spacing:-.02em;color:var(--ink)}
.gstats span{display:block;margin-top:8px!important;font:400 13px/1 var(--font)!important;letter-spacing:0!important;color:var(--muted)!important}
@media (max-width:720px){.gstats>div{flex:1;padding:2px 10px!important}.gstats b{font-size:26px!important}}
/* stats band: the infinity sign matches the numbers' size and weight; every label on one line */
.stat b.inf{display:block;font-size:48px!important;line-height:30px!important;font-weight:400!important;transform:none}
.stat span{white-space:nowrap}
/* final pass 2026-10-22: at 375 px the three globe stats shared the width equally and "40,000+" ran into "130+";
   each column now takes the width of its number and the numbers scale down a little on narrow phones */
@media (max-width:720px){.gstats>div{flex:1 1 auto;padding:2px 12px!important}.gstats>div:first-child{padding-left:0!important}.gstats b{font-size:clamp(20px,6vw,26px)!important;white-space:nowrap}}
/* final pass 2026-10-22, contrast (WCAG 4.5:1 for small text):
   the competition panel label was a pale mint (1.96:1 on its panel); in dark mode the globe legend, Nova's source tag,
   the link in the press post and the letter on a selected answer were below 4.5:1 */
.comp .eyebrow{color:var(--muted)}
.sg-hint{color:var(--muted)}
html.dark .sg-legend{color:var(--muted)}
html.dark .src-tag,html.dark .gen,html.dark .nova-av{color:#4cc2b6}
html.dark .xpost-body u{color:#1d9bf0}
html.dark .opt.sel .k{color:#fff}
/* final pass 2026-10-22, dark: the "not offered" marks in the comparison table kept their light #eef1f0 discs and
   glared brighter than the green checks; they now sit on the dark soft fill with a muted cross */
html.dark .ic.n{background:var(--soft-2);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-2)}
/* bug hunt 2026-10-22 */
/* comparison table: hovering a row in dark mode turned it near-white and unreadable */
html.dark .cmp tr:hover td:not(.me),html.dark .cmp tr:hover th[scope=row]{background:rgba(255,255,255,.05)!important}
/* course browser: subject icons were in pastel coloured boxes (against the design rules); plain ink icons instead */
.subj-top svg{background:none!important;color:var(--ink)!important;padding:0!important;width:26px!important;height:26px!important;border-radius:0!important}
/* keyboard focus is green, as everywhere else on the site */
:focus-visible{outline:2px solid var(--green,#13863f)!important;outline-offset:3px}
/* figure captions in right-to-left languages: label separator on the correct side */
[dir=rtl] .try>span::before{margin-right:0;margin-left:10px;padding-right:0;padding-left:10px;border-right:0;border-left:1px solid var(--line-2,#d5dbd8)}
/* course browser tabs on phones: single-row scrollable strip (Scout item 16) */
@media (max-width:720px){.ctabs{flex-wrap:nowrap!important;overflow-x:auto!important;scrollbar-width:none;width:auto!important;max-width:100%}}
/* comparison table: the green Stellar column gets breathing room above its logo (owner 2026-10-22) */
.cmp thead th.me{padding-top:30px!important;vertical-align:bottom}
.cmp thead th.me img{margin-top:0!important}
.cmp-wrap{padding-top:14px}
/* Ways to help: the audience no longer sits next to the title behind a dot (owner 17:25: "the dot looks goofy and
   cluttered"); it is a quiet line under the description */
.help a>span:not(.tile){display:flex;flex-direction:column;align-items:flex-start}
.help .aud{order:3;display:block!important;margin:8px 0 0!important;height:auto!important;font:400 12.5px/1.3 var(--font)!important;color:#8a938f!important;letter-spacing:0}
.help .aud::before{content:none!important}
.help a>span:not(.tile) p{order:2}
.help a>span:not(.tile) p{margin-top:6px!important}
/* final pass (resume) 2026-10-22: on phones one long review made the swipe row 460 px tall, leaving about 250 px of
   empty paper under the other cards; the review text now stops after six lines on phones (the full text stays in the
   page for screen readers). The "Ways to help" audience line was #8a938f on white (3.2:1); it uses the muted ink. */
@media (max-width:720px){.reviews .rv p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;line-clamp:6;overflow:hidden}}
.help .aud{color:var(--muted,#69726e)!important}
/* final pass (resume): when the course tabs wrap onto two rows on phones, a full pill outline turns into a stadium
   that crowds the corner tabs; a rounded rectangle holds the two rows cleanly */
@media (max-width:720px){.ctabs{border-radius:999px!important}}
/* swarm R5 home-marketing: the two "Rating / Progress" notes in the competitions panel were left-aligned rounded
   label boxes (the banned stat-box look); they are now unboxed items under a hairline, like the "Why it works" columns */
.comp-side{gap:12px 28px}
.comp-side .kpi,html.dark .comp-side .kpi{padding:14px 0 0;border-radius:0;background:none!important;box-shadow:none!important;border-top:1px solid var(--line)}
.comp-side .kpi b{margin-top:6px}
/* swarm R5 home-marketing: in dark mode the underline tabs above the mock-ups (AMC 10/12, AIME...) each sat on a dark
   box (the shared html.dark sheet rule); in light they are bare text, so dark matches that */
html.dark .tabs-mock>span{background-color:transparent!important}
/* swarm R5 home-marketing: the three window dots on the mock-up bars stayed light grey (#e3e9e6) in dark mode and
   glared as white dots; they take the dark hairline shade */
html.dark .dots3 i{background:#3a423f}
/* swarm R5 home-marketing: the Nova avatar tile in the chat mock-ups stayed pale mint (#e2f3f1) in dark mode */
html.dark .nova-av{background:#1f2a27}
/* swarm R11 home-marketing: owner 16:15 "remove leftovers of the old app look: blue/sky/indigo accents". The product
   mock-ups on the home page (hero wheel, lesson, graph, exam, FRQ, AMC) and the feature pages kept the app's sky blue
   and navy: the selected answer, the info note, the plotted line, the caret, the exam bar, the current question and
   five review avatars. They now use the site's ink and neutral paper shades, the same as the underline tabs. */
html:root{--sky:var(--ink);--sky-50:#f2f2ef;--navy:#121614;--navy-2:#2b3330}
html.dark:root{--sky-50:#252928;--navy:#252928;--navy-2:#2f3532}
.opt.sel,.amc-opts span.sel{background:var(--sky-50)}
.opt.sel .k,html.dark .opt.sel .k{background:var(--btn,#121614);color:var(--btn-text,#fff)}
.note{background:var(--sky-50);color:var(--ink)}
.note svg{color:var(--ink)}
.note .x{color:var(--muted)}
html.dark .note,html.dark .note :is(.var,b){color:var(--ink)}
.graph [stroke="#2479c4"],.graph-wrap svg [stroke="#2479c4"]{stroke:var(--ink)}
/* dark mode: the graph paper stayed near-white (#fbfdfc) inside the dark sheet; it is the dark paper with dark grid lines */
html.dark .graph{background:var(--paper,#121614)}
html.dark .graph [stroke="#e5ecea"]{stroke:#2a312e}
html.dark .graph circle[fill="#fff"]{fill:var(--paper,#121614)}
html.dark .graph text{fill:var(--text)}
html.dark .graph text[stroke]{stroke:var(--paper,#121614)}
html.dark:root .opt.sel,html.dark:root .amc-opts span.sel{background-color:var(--sky-50)}
.exam-bar{background:var(--soft-2);color:var(--text)}
.exam-bar b{color:var(--ink)}
.exam-bar .timer{background:var(--sheet,#fff);color:var(--text)}
.qnav i.c{background:var(--btn,#121614);color:var(--btn-text,#fff)}
.rv .who i{background:var(--sky-50)!important;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.xpost-body u,html.dark .xpost-body u{color:var(--green-d)}
/* swarm R13 home-marketing: above 720px the exam mock-up's six underline tabs wrapped (at 768 and at 1440 alike), so
   "AP Chinese" and "SAT English" sat on a second row under the strip's hairline. Keep one row that scrolls and fades
   out at the card edge, the same as the phone rule above. */
@media (min-width:721px){
  .tabs-mock{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent)}
  .tabs-mock::-webkit-scrollbar{display:none}
  .tabs-mock span{flex:none}
}

/* swarm R15/R27 home-marketing: standalone arrow links and ticket links are at least 26px tall across all viewports (desktop, tablet, and mobile).
   Padding with an equal negative margin grows the tap area to 26px or more without moving anything. */
.link-arrow,.ticket a{padding-block:4px;margin-block:-4px}
.subj .more{padding-bottom:5px;margin-bottom:11px}

/* swarm R21 home-marketing, phones: (1) the course track tabs wrap onto two rows (on purpose, so none hide), but the
   rows were ragged, with empty space after ACT and Standard; each tab now grows so both rows fill the pill edge to edge
   (the sliding bar is measured from the button, so it follows). (2) "Learn more about Stellar compared to other
   platforms" wrapped inside an inline-flex box, which pushed its arrow to the far right edge, away from the text; the
   link now flows as text, so the arrow follows the last word. */
@media (max-width:720px){
  .ctabs.sx-has-bar,.ctabs{width:100%}
  .ctabs button{flex:1 1 auto}
  .legend .link-arrow{display:inline}
  .legend .link-arrow svg{display:inline-block;margin-left:6px;vertical-align:-3px}
}

/* swarm R28 home-marketing: the globe stats (110+ / 40,000+ / 130+) were left-aligned in their columns, the one stat
   group on the page that broke the owner's rule "stats are unboxed centred numbers between hairlines". Each column
   now has even padding on both sides, the row fills the panel width, and number and label are centred, like the
   course stats and the hero strip. */
.gstats>div{text-align:center}
#reviews .global.gw .gstats{justify-content:stretch}
#reviews .global.gw .gstats>div:first-child{padding-left:26px!important}
@media (max-width:720px){#reviews .global.gw .gstats>div,#reviews .global.gw .gstats>div:first-child{padding-left:10px!important;padding-right:10px!important}}
@media (max-width:360px){#reviews .global.gw .gstats>div,#reviews .global.gw .gstats>div:first-child{padding-left:6px!important;padding-right:6px!important}#reviews .global.gw .gstats b{font-size:21px!important}}
/* swarm R28 home-marketing (home piece): (1) an older @media (max-width:720px) rule hid .try>span on phones, which hid
   the numbered figure captions (FIG. 1 .. FIG. 6) and dynamic tab-switch captions on mobile; restore them with clean
   wrapping. (2) At desktop (>1024px) the 3-card #system grid left ~125px of empty white space at the bottom of .card.mcq
   beside the taller .card.support; make .card.mcq and .card.loop flex columns and tighten .tools li padding so all three
   cards sit balanced. (3) Tighten .mk-sel right margin so trailing punctuation in the Economics exercise sits flush. */
@media (max-width:720px){
  .try{justify-content:space-between;flex-wrap:wrap;gap:6px 12px;font-size:13.5px}
  .try>span{display:block}
  .try .link-arrow{white-space:nowrap}
}
@media (min-width:1025px){
  .card.mcq,.card.loop{display:flex;flex-direction:column}
  .mcq .feedback,.loop .streak{margin-top:auto}
  .tools li{padding:7px 14px!important}
}
.mk-sel{margin:0 0 0 1px!important}
html.dark svg.globe circle[fill="#e7ece9"]{fill:#1e2623}
html.dark svg.globe g[fill="#fff"]{fill:#2c3632}
/* swarm R30 home-marketing (home piece): (1) on phones the course preview stacked every subject card (13 cards, about
   6,000px of lists on the AP tab) so the page below it felt endless; the cards now sit in one swipe row with the next
   card peeking, the same pattern as the reviews row. Every course link stays in the page and in the tab order.
   (2) Phone tap targets: the "Try it in the app" figure links, the comparison "Learn more" link, the catalog "+N more"
   link and the Discord ticket link were 26 to 29px tall; they now take 44px rows with the text where it was. */
@media (max-width:720px){
  .subjects{display:flex;align-items:flex-start;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;margin:20px -20px 0;padding:4px 20px 14px;scroll-padding:0 20px;scrollbar-width:none}
  .subjects::-webkit-scrollbar{display:none}
  .subjects>.subj{flex:none;width:84%;max-width:340px;margin:0;scroll-snap-align:start}
  .subjects>.empty{flex:1 0 100%}
  .try .link-arrow,.legend .link-arrow,.ticket a{display:inline-flex;align-items:center;min-height:44px}
  .try{padding-top:4px}
  .subj ul>li:last-child>a[href="/courses"],.subj .more{min-height:44px;display:flex;align-items:center}
}

/* Round 31 (home-marketing, home piece)
   (1) Touch tap targets: every course link in the subject cards was 39px tall on a single line; now 44px rows
       on phones and any touch screen.
   (2) Stacked "Ways to help" panel (1024px and below): the list sat 16px (tablet) or 10px (phone) left of the text
       in the half above it; both halves now share one gutter, and the row hover box keeps its bleed.
   (3) FAQ +/x mark: its fill and colour change ran on a bare 0.2s ease; now the site's 160ms ease-out. */
@media (max-width:900px),(pointer:coarse){.subj li a{min-height:44px}.empty-actions .btn,.btn-sm{min-height:44px}.actions .fake,.mk-check{min-height:44px}}
@media (min-width:721px) and (max-width:1024px){.mission-r{padding:40px 56px}}
@media (max-width:720px){.mission-r{padding:24px 22px}}
.acc summary .pm{transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}

/* Round 33 (home-marketing, home piece)
   (1) Phone course track tabs: the seven tabs wrapped as 5 + 2, so Honors and Standard stretched to 160px+ under a
       full first row and the pill looked broken. They now sit in a deliberate two-row segmented grid (4 + 3, equal
       widths per row, nothing hidden), 44px tall. The sliding pill reads each button's offsets, so it follows.
   (2) FRQ section: "Start Learning" was the one 40px small button, centred under the figure; it is the normal 48px
       button under the intro. The figure row gets its caption, so the numbering reads Fig. 1 to 7 with no gap.
   (3) "Sponsor" opens a PDF: a small PDF tag after the title says so.
   (4) Touch: the underline demo tabs were 34px and the practice segment 28px tall; both now take 44px on touch
       screens. The underline tabs keep their text-to-underline distance, the extra height sits above the text.
   (5) Phone menu: Courses / Features / Resources sub-lists snapped open; they fade in like the FAQ answers. */
@media (max-width:720px){
  .ctabs,.ctabs.sx-has-bar{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;scrollbar-width:none;-webkit-overflow-scrolling:touch;width:auto!important;max-width:100%;border-radius:999px!important;padding:4px;gap:4px}
  .ctabs::-webkit-scrollbar{display:none}
  .ctabs button{flex:0 0 auto!important;grid-column:auto!important;height:44px;padding:0 16px;min-width:auto;white-space:nowrap}
}
.frq-sec .sec-head .frq-cta{margin-top:28px}
.pdf-tag{display:inline-block;margin-left:6px;padding:3px 6px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--line-2,#d5dbd8);font:600 10.5px/1 var(--font);letter-spacing:.06em;color:var(--muted);vertical-align:2px}
/* swarm R59 home-marketing: the "PDF" tag beside "Sponsor" was 10.5px, under the site's 12px label floor. Now the
   site's small-label size, with padding trimmed so the chip keeps its height on the title line. */
.pdf-tag{padding:2px 6px;font-size:12px;letter-spacing:.04em;vertical-align:1px}
@media (max-width:900px),(pointer:coarse){
  html .tabs-mock>span,html .tabs-mock>span[role=tab],html .tabs-mock>span.on[role=tab]{height:44px;align-items:flex-end;padding-bottom:11px}
  html .tabs-mock,html .tabs-mock[role=tablist]{margin-top:-10px}
  .seg span,.seg [role=tab]{padding-block:12px}
}
.mm-sub:not([hidden]){animation:sx-open var(--dur-2,240ms) var(--ease,ease) both}
@media (prefers-reduced-motion:reduce){.mm-sub:not([hidden]){animation:none}}
@media (max-width:720px){
  .cmp-wrap{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent)}
  .reviews{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent)}
}
@media (prefers-reduced-motion:reduce){
  .cmp-wrap,.reviews{-webkit-mask-image:none!important;mask-image:none!important}
}

/* Round 41 (home-marketing, home piece)
   (1) Courses header on desktop: heading block (701px) + stats (415px) + gap ran 12px past the 1136px column, so
       the stats wrapped under the lead and left the right half empty. Above 1024px they now share one row, stats
       bottom-aligned on the right, the heading block giving up the slack.
   (2) Tablet tap targets: the 44px rows for the figure "Try it in the app" links, the comparison "Learn more" link,
       the catalog "+N more" link and the Discord ticket link stopped at 720px, so at 768 they were 26 to 28px. */
@media (min-width:1025px){
  .courses-head{flex-wrap:nowrap}
  .courses-head>.sec-head{flex:1 1 auto;min-width:0}
  .courses-head>.cstats{flex:none}
}
@media (max-width:900px),(pointer:coarse){
  .try .link-arrow,.legend .link-arrow,.ticket a{display:inline-flex;align-items:center;min-height:44px}
  .subj .more{min-height:44px;display:flex;align-items:center}
}
/* (3) Phones: the R31 44px row turned the comparison "Learn more" link back into an inline-flex box, so its two-line
       text pushed the arrow to the far right edge again (the R21 fix). It flows as text again and gets its 44px tap
       height from inline padding, which does not move the layout. */
@media (max-width:720px){
  .legend .link-arrow{display:inline;min-height:0;padding-block:13px}
}

/* Round 42 (home-marketing)
   Enforce the 44px touch and click target floor across all screen widths on desktop and mobile.
   Applies 44px min-height to course track buttons, interactive showcase tabs, segmented option tabs,
   demo try-it links, and Discord ticket links.
*/
.ctabs button{min-height:44px;height:44px;display:inline-flex;align-items:center;justify-content:center}
html .tabs-mock>span,html .tabs-mock>span[role=tab],html .tabs-mock>span.on[role=tab]{min-height:44px;height:44px;align-items:flex-end;padding-bottom:11px}
html .tabs-mock,html .tabs-mock[role=tablist]{margin-top:-10px}
.seg span,.seg [role=tab]{min-height:44px;box-sizing:border-box;display:inline-flex;align-items:center;padding-block:12px}
.try .link-arrow,.ticket a{min-height:44px;display:inline-flex;align-items:center}
.subj li a,.subj .more{min-height:44px;display:flex;align-items:center}
@media (min-width:721px){
  .legend .link-arrow{min-height:44px;display:inline-flex;align-items:center}
}