/* Layout concept: a field journal that becomes a championship arena. Dark forest "night" chapters alternate with daylight tint chapters, and each chapter gets one signature motion. */
:root{
  --forest:#08291A; --forest-2:#0E3A25; --g800:#14532D; --g600:#2F7D4F;
  --mint:#8DE0B5; --mint-2:#C7F0DA; --sun:#F2B84B; --amber:#A86F00;
  --sky:#5BB8DC; --blue:#17566F; --lilac:#A99CEB; --purple:#584A8C;
  --t-mint:#DDF4E6; --t-sky:#DCEFF6; --t-sun:#FFF0C7; --t-lilac:#E9E5FA; --t-leaf:#C9EBD6;
  --tile-ink:#0C2418; --tile-ink-2:#33473B;
  --on-dark:#EAF5EE; --on-dark-2:#B4D3C0; --on-dark-3:#86AD96;
  --bg:#F3F9F5; --card:#FFFFFF; --ink:#0C2418; --ink2:#3A4E43; --muted:#5E7868; --line:#D3E4D9; --accent:#14532D;
  --display:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap:1240px; --r:28px; --ease:cubic-bezier(.16,1,.3,1);
  --top:env(safe-area-inset-top,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bg:#06150D; --card:#0F281B; --ink:#E6F2EA; --ink2:#BFD3C6; --muted:#8FAE9C; --line:#1D3B2A; --accent:#8DE0B5; color-scheme:dark }
}
:root[data-theme="dark"]{ --bg:#06150D; --card:#0F281B; --ink:#E6F2EA; --ink2:#BFD3C6; --muted:#8FAE9C; --line:#1D3B2A; --accent:#8DE0B5; color-scheme:dark }

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font:17px/1.65 var(--sans); overflow-x:hidden; transition:background .4s}
body::after{content:""; position:fixed; inset:0; pointer-events:none; z-index:200; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img,svg,canvas{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display); line-height:1.04; margin:0; letter-spacing:-.02em; text-wrap:balance; font-optical-sizing:auto}
h2{font-size:clamp(36px,5.4vw,72px); font-weight:700}
h2 em{font-style:italic; font-weight:500}
h3{font-size:22px; font-weight:700}
p{margin:0}
::selection{background:var(--mint); color:var(--forest)}
.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:24px}
section{padding-block:120px; position:relative; scroll-margin-top:72px}
.lede{color:var(--ink2); font-size:19px; max-width:58ch; margin-top:20px}
.head{margin-bottom:56px; display:grid; gap:0}
.eyebrow{display:inline-flex; align-items:center; gap:10px; font:700 13px var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--g600); margin-bottom:18px}
.eyebrow::before{content:""; width:28px; height:2px; background:currentColor; border-radius:2px}
.dark .eyebrow{color:var(--mint)}
.pill{display:inline-flex; align-items:center; gap:8px; border-radius:999px; padding:7px 15px; font-size:14px; font-weight:800}
:focus-visible{outline:3px solid var(--mint); outline-offset:3px; border-radius:8px}
.skip{position:absolute; left:-999px; top:8px; background:var(--g800); color:#fff; padding:8px 14px; border-radius:8px; z-index:300}
.skip:focus{left:8px}
.logo{display:inline-block; background:url("logo.png") center/contain no-repeat}
.dark{background:var(--forest); color:var(--on-dark)}
.dark h2,.dark h3{color:#fff}
.dark .lede{color:var(--on-dark-2)}

/* ---------- reveal system (content is visible at rest; JS only arms what is below the fold) ---------- */
.rv{transition:opacity 1s var(--ease), transform 1s var(--ease); transition-delay:var(--d,0s)}
.rv.armed:not(.in){opacity:0; transform:translateY(46px)}
.mask{display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.08em; margin-bottom:-.08em}
.mask > span{display:inline-block; transition:transform 1.1s var(--ease); transition-delay:var(--d,0s)}
.armed:not(.in) .mask > span{transform:translateY(105%)}

/* ---------- progress + cursor ---------- */
.progress{position:fixed; left:0; right:0; top:var(--top); height:3px; z-index:120; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg,var(--mint),var(--sun),var(--sky),var(--lilac))}
.cur,.cur-ring{position:fixed; left:0; top:0; pointer-events:none; z-index:250; border-radius:50%; display:none}
.cur{width:8px; height:8px; background:var(--mint); margin:-4px 0 0 -4px; mix-blend-mode:difference}
.cur-ring{width:40px; height:40px; margin:-20px 0 0 -20px; border:1.5px solid var(--mint); transition:width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), background .3s; mix-blend-mode:difference}
.cur-ring.big{width:78px; height:78px; margin:-39px 0 0 -39px; background:rgba(141,224,181,.18)}
@media (pointer:fine){ .has-cur .cur,.has-cur .cur-ring{display:block} }

/* ---------- preloader ---------- */
.pre{position:fixed; inset:0; z-index:400; display:grid; place-items:center; background:var(--forest); color:var(--on-dark); transition:clip-path 1s var(--ease)}
.pre.done{clip-path:inset(0 0 100% 0)}
.pre-in{display:grid; gap:22px; justify-items:center}
.pre-stamps{display:flex; gap:8px}
.pre-stamps i{width:22px; height:22px; border-radius:50%; border:2.5px solid var(--c); background:color-mix(in srgb,var(--c) 35%,transparent); animation:thunk .45s var(--ease) both; animation-delay:calc(var(--n)*90ms)}
.pre-n{font:italic 600 64px/1 var(--display); color:var(--mint); font-variant-numeric:tabular-nums}
.pre small{font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--on-dark-3)}
@keyframes thunk{0%{transform:scale(2.4) rotate(var(--r,0deg)); opacity:0} 60%{transform:scale(.88) rotate(var(--r,0deg)); opacity:1} 100%{transform:scale(1) rotate(var(--r,0deg))}}

/* ---------- announcement + nav ---------- */
.announce{background:#051C11; color:#CFE8D9; font-size:14.5px; text-align:center; padding:9px 16px; position:relative; z-index:60}
.announce b{color:var(--sun)}
.announce s{opacity:.55}
.announce a{color:#fff; font-weight:800; margin-left:10px; text-underline-offset:3px}
.nav{position:sticky; top:var(--top); z-index:100; transition:background .4s, box-shadow .4s, height .4s}
.nav .wrap{display:flex; align-items:center; gap:24px; height:76px; transition:height .4s var(--ease)}
.nav.solid{background:color-mix(in srgb,var(--bg) 84%,transparent); -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4); box-shadow:0 1px 0 var(--line)}
.nav.solid .wrap{height:64px}
.nav:not(.solid){color:#fff}
.nav:not(.solid) .links a{color:rgba(255,255,255,.8)}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; font:800 19px var(--sans); letter-spacing:.06em; color:inherit}
.nav.solid .brand{color:var(--accent)}
.brand .logo{width:44px; height:44px; background-color:#fff; border-radius:50%; box-shadow:0 0 0 3px rgba(141,224,181,.25)}
.links{display:flex; gap:22px; margin-left:auto; font-size:15px; font-weight:600}
.links a{text-decoration:none; color:var(--ink2); position:relative; padding:4px 0}
.links a::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--sun); transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease)}.links a.on::after{transform:scaleX(1); transform-origin:left}@media (hover:hover){
.links a:hover::after{transform:scaleX(1); transform-origin:left}}
.links a.on{color:inherit}
.nav.solid .links a.on{color:var(--ink)}
.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; border:0; cursor:pointer; text-decoration:none; font:700 15.5px/1 var(--sans); padding:16px 26px; border-radius:999px; background:var(--g800); color:#fff; overflow:hidden; isolation:isolate; transition:transform .4s var(--ease), box-shadow .4s}
.btn::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--mint); transform:translateY(101%); border-radius:inherit; transition:transform .5s var(--ease)}@media (hover:hover){
.btn:hover::before{transform:none}}@media (hover:hover){
.btn:hover{color:var(--forest)}}
.btn .arr{transition:transform .4s var(--ease)}@media (hover:hover){
.btn:hover .arr{transform:translateX(4px)}}
.btn.sun{background:var(--sun); color:#2A1D00; box-shadow:0 10px 30px -10px rgba(242,184,75,.7)}
.btn.sun::before{background:#fff}
.btn.ghost{background:transparent; color:inherit; box-shadow:inset 0 0 0 1.5px currentColor}
.btn.ghost::before{background:rgba(255,255,255,.12)}@media (hover:hover){
.btn.ghost:hover{color:inherit}}
.nav .btn{padding:13px 20px; font-size:14px}
.menu{display:none; margin-left:auto; background:none; border:0; color:inherit; padding:8px; cursor:pointer; position:relative; z-index:3}
.menu span{display:block; width:26px; height:2px; background:currentColor; margin:6px 0; transition:transform .4s var(--ease), opacity .3s}
.menu[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media (max-width:1080px){
  .links{position:fixed; inset:0; z-index:2; flex-direction:column; justify-content:center; gap:4px; padding:80px 32px 40px; background:var(--forest); clip-path:circle(0 at calc(100% - 44px) 40px); transition:clip-path .8s var(--ease); visibility:hidden}
  .links.open{clip-path:circle(150% at calc(100% - 44px) 40px); visibility:visible}
  .links a,.nav:not(.solid) .links a,.nav.solid .links a{color:#fff; font:600 clamp(28px,7vw,40px)/1.25 var(--display); opacity:0; transform:translateY(20px); transition:opacity .5s, transform .6s var(--ease)}
  .links.open a{opacity:1; transform:none; transition-delay:calc(var(--i)*50ms + .2s)}
  .links a::after{display:none}
  .menu{display:block}
  .menu[aria-expanded="true"]{color:#fff}
  .nav .btn{display:none}
}

/* ---------- hero ---------- */
.hero{background:var(--forest); color:var(--on-dark); margin-top:-76px; padding:150px 0 0; overflow:hidden; isolation:isolate}
.hero-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:-1}
.aurora{position:absolute; z-index:-2; border-radius:50%; filter:blur(90px); opacity:.55; animation:drift 18s ease-in-out infinite alternate}
.aurora.a1{width:620px; height:620px; background:#1F7A4B; right:-160px; top:-200px}
.aurora.a2{width:420px; height:420px; background:#17566F; left:-140px; bottom:10%; animation-duration:22s}
.aurora.a3{width:300px; height:300px; background:#7A5B12; right:30%; bottom:-120px; opacity:.35; animation-duration:26s}
@keyframes drift{to{transform:translate(60px,40px) scale(1.15)}}
.hero-grid{display:grid; grid-template-columns:1.3fr .7fr; gap:48px; align-items:center}
.first{background:rgba(242,184,75,.14); color:var(--sun); border:1px solid rgba(242,184,75,.35); margin-bottom:30px}
.first .dot{width:8px; height:8px; border-radius:50%; background:var(--sun); box-shadow:0 0 0 0 rgba(242,184,75,.7); animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(242,184,75,0)} 100%{box-shadow:0 0 0 0 rgba(242,184,75,0)}}
.first span:last-child{color:#F7DDA6; font-weight:500}
.hero h1{font-size:clamp(46px,7.2vw,106px); font-weight:800; color:#fff; letter-spacing:-.035em; line-height:.98}
.hero h1 .w{display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.1em; margin-bottom:-.1em}
.hero h1 .w > span{display:inline-block}
.js .hero h1 .w > span{transform:translateY(110%)}
.loaded .hero h1 .w > span{transform:none; transition:transform 1.2s var(--ease); transition-delay:calc(var(--i)*70ms)}
.hero h1 em{font-style:italic; font-weight:500; color:var(--mint); position:relative}
.squig{position:absolute; left:0; right:0; bottom:-.12em; width:100%; height:.28em; overflow:visible}
.squig path{fill:none; stroke:var(--sun); stroke-width:5; stroke-linecap:round; stroke-dasharray:600; stroke-dashoffset:0}
.js .squig path{stroke-dashoffset:600}
.loaded .squig path{stroke-dashoffset:0; transition:stroke-dashoffset 1.4s var(--ease) 1s}
.hero p.sub{font-size:clamp(18px,1.6vw,21px); color:var(--on-dark-2); max-width:46ch; margin-top:30px}
.hero .cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:36px}
.fade-up{transition:opacity 1s var(--ease), transform 1s var(--ease); transition-delay:var(--d,0s)}
.js .fade-up{opacity:0; transform:translateY(24px)}
.loaded .fade-up{opacity:1; transform:none}
.hero-logo{justify-self:center; position:relative; width:min(380px,84%); aspect-ratio:1; max-width:100%}
.ring{position:absolute; inset:-6%; animation:spin 40s linear infinite}
.ring text{font:700 13.5px var(--sans); letter-spacing:5px; fill:var(--mint)}
@keyframes spin{to{transform:rotate(360deg)}}
.disc{position:absolute; inset:9%; border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:0 0 0 12px rgba(141,224,181,.12), 0 0 0 28px rgba(141,224,181,.05), 0 40px 80px -20px rgba(0,0,0,.5); transition:transform .6s var(--ease)}
.disc .logo{width:84%; height:84%}
.js .hero-logo .disc{transform:scale(.6) rotate(-30deg); opacity:0}
.loaded .hero-logo .disc{transform:none; opacity:1; transition:transform 1.4s var(--ease) .3s, opacity .8s .3s}
.sticker{position:absolute; border-radius:999px; font:700 14px var(--sans); padding:9px 16px; box-shadow:0 12px 26px rgba(0,0,0,.3); white-space:nowrap; animation:bob 5s ease-in-out infinite}
.sticker.s1{background:var(--t-sun); color:#5A3E00; top:2%; left:-12%; --rot:-8deg}
.sticker.s2{background:var(--t-sky); color:#0F3F52; bottom:16%; right:-12%; --rot:6deg; animation-delay:-1.6s}
.sticker.s3{background:var(--t-lilac); color:#3E3270; bottom:-2%; left:4%; --rot:-4deg; animation-delay:-3.2s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(var(--rot))} 50%{transform:translateY(-10px) rotate(calc(var(--rot) * -.4))}}
.stripes-wrap{margin-top:64px; padding-bottom:48px}
.stamps-row{display:grid; grid-template-columns:repeat(11,1fr); gap:12px}
.stamps-row i{aspect-ratio:1; border-radius:50%; border:3px solid var(--c); outline:1.5px dashed var(--c); outline-offset:-9px; display:grid; place-content:center; text-align:center; color:#fff; background:color-mix(in srgb,var(--c) 28%,transparent); transform:rotate(var(--r)); font-style:normal; transition:transform .5s var(--ease), background .3s}@media (hover:hover){
.stamps-row i:hover{transform:rotate(0deg) scale(1.12); background:var(--c)}}
.loaded .stamps-row i{animation:thunk .6s var(--ease) both; animation-delay:calc(var(--n)*80ms + 1.2s)}
.stamps-row small{font:800 9px var(--sans); letter-spacing:.14em; opacity:.85}
.stamps-row b{font:700 clamp(18px,2.6vw,34px)/1 var(--display)}
.stripes-cap{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px 24px; margin-top:22px; color:var(--on-dark-3); font-size:15px}
.stripes-cap b{color:#fff; font:600 22px var(--display)}
.cue{display:flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--on-dark-3)}
.cue i{width:1.5px; height:34px; background:linear-gradient(var(--mint) 50%, transparent 0) 0 0/100% 200%; animation:cue 1.8s linear infinite}
@keyframes cue{to{background-position:0 -68px}}
@media (max-width:880px){
  .hero{padding-top:120px}
  .hero-grid{grid-template-columns:1fr}
  .hero-logo{order:-1; width:220px}
  .sticker{font-size:12px; padding:7px 12px}
  .sticker.s1{left:-22%} .sticker.s2{right:-24%}
  .stamps-row{gap:6px; grid-template-columns:repeat(6,1fr)}
  .cue{display:none}
}

/* ---------- ticker ---------- */
.tickers{position:relative; height:150px; overflow:hidden; background:var(--bg); display:grid; place-items:center}
.ticker{position:absolute; left:-5%; right:-5%; white-space:nowrap; overflow:hidden; padding:16px 0; box-shadow:0 10px 30px -14px rgba(0,0,0,.35)}
.ticker div{display:inline-block; font:600 24px var(--display); animation:slide 45s linear infinite}
.ticker span{margin:0 22px}
.ticker span.x{font:800 14px var(--sans); vertical-align:middle; opacity:.55}
.t1{background:var(--mint); color:var(--forest); transform:rotate(-2.5deg); z-index:2}
.t2{background:var(--forest); color:var(--mint); transform:rotate(2deg)}
.t2 div{animation-direction:reverse; font-style:italic}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- tiles / spotlight / tilt ---------- */
.tile{border-radius:var(--r); padding:30px; color:var(--tile-ink); position:relative; overflow:hidden; isolation:isolate; transform-style:preserve-3d; transition:transform .5s var(--ease), box-shadow .5s}
.tile p{color:var(--tile-ink-2)}
.tile::before{content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .4s; background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.65), transparent 45%)}@media (hover:hover){
.tile:hover::before{opacity:1}}@media (hover:hover){
.tile:hover{box-shadow:0 30px 60px -30px rgba(8,41,26,.45)}}

/* ---------- about (bento) ---------- */
.bento{display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:minmax(190px,auto); gap:16px}
.bento .tile{display:flex; flex-direction:column; gap:10px}
.b-big{grid-column:span 3; grid-row:span 2; background:var(--forest)!important; color:#fff!important; justify-content:space-between}
.b-big::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(141,224,181,.22), transparent 50%)!important}
.b-big p{color:var(--on-dark-2)!important; font-size:18px}
.b-big h3{color:#fff; font-size:32px}
.big11{position:relative; width:min(240px,70%); aspect-ratio:1}
.big11 svg{position:absolute; inset:0; width:100%; height:100%; animation:spin 30s linear infinite}
.big11 .num{position:absolute; inset:0; display:grid; place-items:center; font:800 clamp(110px,13vw,170px)/.8 var(--display); color:var(--mint); letter-spacing:-.05em}
.b-a{grid-column:span 3; background:var(--t-sun)}
.b-b{grid-column:span 3; background:var(--t-sky)}
.b-c{grid-column:span 2; background:var(--t-mint)}
.b-d{grid-column:span 2; background:var(--t-lilac)}
.b-e{grid-column:span 2; background:var(--t-leaf)}
.bento h3{font-size:25px}
.bento .ic{width:50px; height:50px; border-radius:16px; background:rgba(255,255,255,.75); display:grid; place-items:center; transition:transform .6s var(--ease)}@media (hover:hover){
.bento .tile:hover .ic{transform:rotate(-10deg) scale(1.1)}}
.bento .ic svg{width:26px; height:26px}
.mini-stamps{display:flex; gap:6px; margin-top:auto; flex-wrap:wrap}
.mini-stamps i{width:22px; height:22px; border-radius:50%; border:2.5px solid var(--c); background:color-mix(in srgb,var(--c) 18%,transparent)}
.mini-stamps i.off{border:2px dashed #C2B48C; background:none}
.in .mini-stamps i:not(.off){animation:thunk .5s var(--ease) both; animation-delay:calc(var(--n)*90ms + .3s)}
@media (max-width:960px){ .bento{grid-template-columns:1fr 1fr} .b-big,.b-a,.b-b,.b-e{grid-column:span 2} .b-c,.b-d{grid-column:span 1} .b-big{grid-row:auto} }
@media (max-width:560px){ .bento{grid-template-columns:1fr} .b-big,.b-a,.b-b,.b-c,.b-d,.b-e{grid-column:auto} }

/* ---------- levels: pinned horizontal journey ---------- */
.levels{padding-block:0 120px}
.lv-head{padding-block:0 40px}
.lv-track{display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding:0 24px 24px; scrollbar-width:none}
.lv-track::-webkit-scrollbar{display:none}
.lv-card{flex:0 0 min(80vw,340px); scroll-snap-align:start; border-radius:32px; padding:28px; background:var(--t); color:var(--tile-ink); display:flex; flex-direction:column; justify-content:space-between; min-height:380px; position:relative; overflow:hidden}
.lv-card .cls{font:700 13px var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--c2)}
.lv-card .gnum{position:absolute; right:-6px; top:-40px; font:800 260px/1 var(--display); color:transparent; -webkit-text-stroke:2px var(--c); opacity:.55; pointer-events:none}
.lv-card h3{font:500 italic clamp(44px,5vw,68px)/1 var(--display); letter-spacing:-.03em; color:var(--tile-ink)}
.lv-card .verb{font:800 clamp(26px,2.6vw,34px)/1.1 var(--display); color:var(--c2)}
.lv-card .lv-tag{align-self:flex-start; font-size:13px; font-weight:700; border-radius:999px; padding:5px 12px; background:rgba(255,255,255,.7); color:var(--tile-ink)}
.lv-intro,.lv-outro{flex:0 0 min(80vw,360px); display:flex; flex-direction:column; justify-content:center; gap:16px}
.lv-outro h3{font:600 italic 34px/1.1 var(--display)}
.growth{display:none}
.pin-on .lv-pin{position:relative}
.pin-on .lv-sticky{position:sticky; top:0; height:100vh; overflow:hidden; display:flex; flex-direction:column; justify-content:center; gap:28px}
.pin-on .lv-track{overflow:visible; padding-left:max(24px, calc((100vw - var(--wrap))/2 + 24px)); padding-right:10vw; will-change:transform; scroll-snap-type:none}
.pin-on .lv-card{flex-basis:400px; height:min(62vh,520px); min-height:0}
.pin-on .growth{display:block; padding-inline:max(24px, calc((100vw - var(--wrap))/2 + 24px))}
.growth svg{width:100%; height:44px; overflow:visible}
.growth .base{stroke:var(--line); stroke-width:3}
.growth .vine{stroke:var(--g600); stroke-width:3; stroke-linecap:round}
.growth circle{fill:var(--bg); stroke:var(--line); stroke-width:3; transition:fill .4s, stroke .4s, r .4s}
.growth circle.on{fill:var(--sun); stroke:var(--g800); r:9}
.growth text{font:700 12px var(--sans); fill:var(--muted)}

/* ---------- NEP ---------- */
.olym{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.vs{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; margin-top:36px}
.vs .side{border-radius:24px; padding:24px; text-align:center; transition:transform .8s var(--ease)}
.vs .side small{display:block; font-size:13px; font-weight:700; letter-spacing:.06em; opacity:.75}
.vs .side b{font:700 26px/1.15 var(--display)}
.vs .l{background:rgba(255,255,255,.07); color:#D5EDDF; border:1px solid rgba(255,255,255,.1)}
.vs .r{background:var(--mint); color:var(--forest)}
.vs .eq{font:600 44px var(--display); color:var(--sun); transition:transform 1s var(--ease) .3s}
.vs.armed:not(.in) .l{transform:translateX(-60px)}
.vs.armed:not(.in) .r{transform:translateX(60px)}
.vs.armed:not(.in) .eq{transform:scale(0) rotate(-180deg)}
.quote{border-radius:var(--r); background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02)); border:1px solid rgba(141,224,181,.22); padding:40px; position:relative}
.quote::before{content:"“"; position:absolute; top:-40px; left:24px; font:800 160px/1 var(--display); color:var(--sun); opacity:.9}
.quote blockquote{margin:0; font:500 italic clamp(22px,2.2vw,28px)/1.45 var(--display); color:#fff}
.scrub .wd{transition:opacity .25s}
.quote cite{display:block; margin-top:20px; font-style:normal; color:var(--mint); font-weight:700; font-size:15px; letter-spacing:.06em}
.nep-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:72px}
.nep-card{border-radius:24px; padding:26px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); transition:transform .5s var(--ease), background .4s, border-color .4s}@media (hover:hover){
.nep-card:hover{transform:translateY(-8px); background:rgba(255,255,255,.09); border-color:var(--c)}}
.nep-card .k{display:inline-block; font-size:12px; font-weight:800; letter-spacing:.06em; color:var(--forest); background:var(--c); border-radius:999px; padding:4px 10px; margin-bottom:14px}
.nep-card h3{color:#fff; font-size:21px; margin-bottom:8px}
.nep-card p{color:var(--on-dark-2); font-size:15.5px; line-height:1.55}
@media (max-width:960px){ .olym{grid-template-columns:1fr} .nep-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .nep-grid{grid-template-columns:1fr} .vs{grid-template-columns:1fr} .vs .eq{text-align:center} }

/* ---------- mission ---------- */
.commit{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.commit .tile{display:flex; flex-direction:column; gap:6px; min-height:220px}
.commit .big{font:800 56px/1 var(--display); color:var(--forest); letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.commit .big small{font-size:22px}
.commit h3{font:700 18px var(--sans); letter-spacing:0; color:var(--tile-ink)}
.commit p{font-size:15px; line-height:1.5}
.commit .done{margin-top:auto; align-self:flex-start; background:var(--forest); color:#fff; font-size:12.5px; font-weight:700; border-radius:999px; padding:5px 11px}
.grp{font:700 13px var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 16px}
.grp + .commit{margin-bottom:44px}
.ripple-row{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; margin-top:24px; border-radius:40px; background:var(--card); box-shadow:0 0 0 1px var(--line); padding:48px}
.ripple-row h3{font-size:clamp(28px,3.2vw,40px)}
.ripple-row .lede{font-size:17px}
.life{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.life span{background:var(--t-mint); color:var(--tile-ink); font-weight:700; font-size:14px; border-radius:999px; padding:8px 15px; transition:transform .4s var(--ease)}@media (hover:hover){
.life span:hover{transform:translateY(-4px) rotate(-2deg)}}
.life span:nth-child(2){background:var(--t-sky)} .life span:nth-child(3){background:var(--t-sun)} .life span:nth-child(4){background:var(--t-lilac)} .life span:nth-child(5){background:var(--t-leaf)}
.ripple{max-width:460px; justify-self:center; width:100%}
.ripple .ring-c{transition:transform 1.2s var(--ease); transform-box:fill-box; transform-origin:50% 100%}
.ripple-row.armed:not(.in) .ring-c{transform:scale(.2)}
.ripple .pulse{fill:none; stroke:var(--g600); stroke-width:2; transform-box:fill-box; transform-origin:center; animation:pulse 4s var(--ease) infinite; opacity:0}
.ripple .pulse.p2{animation-delay:1.33s} .ripple .pulse.p3{animation-delay:2.66s}
@keyframes pulse{0%{transform:scale(1); opacity:.7} 100%{transform:scale(4.2); opacity:0}}
.fine{font-size:13px; color:var(--muted); margin-top:16px}
@media (max-width:960px){ .commit{grid-template-columns:1fr 1fr} .ripple-row{grid-template-columns:1fr; padding:28px} }
@media (max-width:520px){ .commit{grid-template-columns:1fr} }

/* ---------- passport ---------- */
.passport{background:var(--t-mint); color:var(--tile-ink); overflow:hidden}
.passport h2{color:var(--tile-ink)}
.passport .lede{color:var(--tile-ink-2); margin-top:0}
.passport .eyebrow{color:var(--g800)}
.pp-head{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:end; margin-bottom:56px}
.spread{display:grid; grid-template-columns:repeat(4,1fr); border-radius:26px; perspective:1800px; filter:drop-shadow(0 40px 50px rgba(8,41,26,.28))}
.pg{background:#FFFDF6; padding:24px 22px 26px; position:relative; color:var(--tile-ink); min-height:400px; display:flex; flex-direction:column; transform-origin:left center; transition:transform 1.1s var(--ease), opacity .6s; transition-delay:calc(var(--p)*160ms)}
.pg:first-child{border-radius:26px 0 0 26px} .pg:last-child{border-radius:0 26px 26px 0}
.pg + .pg{border-left:1px dashed #D9CFA8}
.pg:nth-child(odd){background:#FFFBEF}
.spread.armed:not(.in) .pg:not(.cover){transform:rotateY(-100deg); opacity:0}
.pg .no{font:800 11px var(--sans); letter-spacing:.14em; color:var(--amber)}
.pg h4{margin:6px 0 16px; font:700 21px var(--display); color:var(--g800)}
.pg.cover{background:linear-gradient(160deg,#14532D,#062214); color:var(--sun); align-items:center; justify-content:space-between; text-align:center; overflow:hidden}
.pg.cover::after{content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.18) 50%,transparent 65%); transform:translateX(-120%); animation:sheen 5s ease-in-out infinite 1s}
@keyframes sheen{40%,100%{transform:translateX(120%)}}
.pg.cover .logo{width:100px; height:100px; background-color:#fff; border-radius:50%}
.pg.cover strong{font:800 27px/1.12 var(--display); letter-spacing:.08em}
.pg.cover small{font-size:11px; letter-spacing:.1em; color:#D9BF85}
.pg.cover .tag{font:500 italic 15px/1.4 var(--display); color:#CFE5D7}
.idrow{display:flex; gap:14px; align-items:center; margin-bottom:16px}
.avatar{width:62px; height:62px; border-radius:14px; background:#DCEFF6; display:grid; place-items:end center; overflow:hidden}
.avatar svg{width:80%; color:var(--blue)}
.field{display:grid; grid-template-columns:auto 1fr; gap:4px 10px; font-size:13.5px; margin:0}
.field dt{color:#7A6B45; font-weight:600}
.field dd{margin:0; font-weight:800}
.chip{display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:3px 10px 3px 4px; font-size:12.5px; font-weight:800; background:#DCEFF6; color:#0F3F52}
.chip i{width:16px; height:16px; border-radius:50%; background:var(--blue)}
.mrz{margin-top:auto; font:500 10.5px/1.5 ui-monospace,Menlo,monospace; color:#9A8E6A; letter-spacing:.08em; word-break:break-all}
.pstamps{display:grid; grid-template-columns:repeat(4,1fr); gap:9px}
.pstamps i{aspect-ratio:1; border-radius:50%; display:grid; place-content:center; text-align:center; font-style:normal}
.pstamps i.on{border:2.5px solid var(--c); outline:1px dashed var(--c); outline-offset:-6px; color:var(--c); transform:rotate(var(--r)); background:color-mix(in srgb,var(--c) 8%,transparent)}
.spread.in .pstamps i.on{animation:thunk .55s var(--ease) both; animation-delay:calc(var(--n)*160ms + .9s)}
.pstamps i.on b{font:700 17px/1 var(--display)} .pstamps i small{font:800 7.5px var(--sans); letter-spacing:.1em}
.pstamps i.off{border:2px dashed #D9CFA8; color:#B8AC84; font:800 13px var(--sans)}
.pstamps i.goal{border:2px dashed var(--amber); color:var(--amber); font:800 8.5px/1.1 var(--sans); animation:spin 20s linear infinite}
.blist{list-style:none; margin:0; padding:0; display:grid; gap:7px; font-size:13.5px}
.blist li{display:flex; align-items:center; gap:10px; font-weight:600}
.blist li i{width:22px; height:22px; border-radius:50%; flex:none; background:var(--c); box-shadow:inset 0 0 0 3px rgba(255,255,255,.45)}
.blist li.off{color:#B0A57F; font-weight:400}
.blist li.off i{background:none; border:2px dashed #D9CFA8; box-shadow:none}
.promise{font:500 italic 20px/1.45 var(--display); color:var(--g800); border-left:3px solid var(--sun); padding-left:12px}
.seal{margin-top:auto; display:flex; align-items:center; gap:12px}
.seal span{width:66px; height:66px; border-radius:50%; border:2.5px solid var(--amber); color:var(--amber); display:grid; place-content:center; text-align:center; font:800 8.5px/1.2 var(--sans); letter-spacing:.06em; transform:rotate(-12deg); flex:none}
.spread.in .seal span{animation:thunk .6s var(--ease) both 2.6s; --r:-12deg}
.seal p{font-size:13px; color:#5C5233}
.pp-keys{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:40px}
.pp-keys div{font-size:15px; color:var(--tile-ink-2); border-top:2px solid var(--g800); padding-top:14px}
.pp-keys b{display:block; color:var(--tile-ink); font:700 18px var(--display); margin-bottom:4px}
@media (max-width:1000px){ .spread{grid-template-columns:1fr 1fr} .pg{border-radius:0!important} .pg:nth-child(3){border-left:0} .pg:nth-child(n+3){border-top:1px dashed #D9CFA8} .pp-head{grid-template-columns:1fr} .pp-keys{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .spread{grid-template-columns:1fr} .pg + .pg{border-left:0; border-top:1px dashed #D9CFA8} .pg{min-height:0; transform-origin:top center} .spread.armed:not(.in) .pg:not(.cover){transform:rotateX(90deg)} .pg.cover{gap:14px} .pp-keys{grid-template-columns:1fr} }

/* ---------- compete ---------- */
.compete{overflow:hidden}
.compete h2 em{color:var(--sun)}
.climb{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; align-items:end}
.step{border-radius:26px 26px 10px 10px; padding:24px 22px; background:rgba(255,255,255,var(--a)); border:1px solid rgba(255,255,255,.07); display:flex; flex-direction:column; gap:6px; transform-origin:bottom; transition:transform 1.1s var(--ease), opacity .6s; transition-delay:calc(var(--n)*140ms)}
.climb.armed:not(.in) .step{transform:scaleY(.15); opacity:0}
.step .lv{font:800 12px var(--sans); letter-spacing:.14em; color:var(--mint)}
.step h3{color:#fff; font-size:26px}
.step p{color:var(--on-dark-2); font-size:15px; line-height:1.5}
.step:nth-child(1){min-height:180px; --a:.04} .step:nth-child(2){min-height:230px; --a:.07} .step:nth-child(3){min-height:280px; --a:.1}
.step:nth-child(4){min-height:330px; background:linear-gradient(170deg,#F7CB6F,var(--sun)); color:#2A1D00; border:0; box-shadow:0 30px 60px -20px rgba(242,184,75,.45)}
.step:nth-child(4) h3{color:#2A1D00; font-size:34px} .step:nth-child(4) p{color:#4A3600} .step:nth-child(4) .lv{color:#6E4900}
.awards{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; margin-top:96px; padding-top:72px; border-top:1px solid rgba(141,224,181,.18)}
.trophy-wrap{justify-self:center; width:min(360px,100%); position:relative}
.trophy-wrap::before{content:""; position:absolute; inset:10%; border-radius:50%; background:radial-gradient(circle,rgba(242,184,75,.45),transparent 65%); filter:blur(20px); animation:glow 3s ease-in-out infinite alternate}
@keyframes glow{to{transform:scale(1.15); opacity:.6}}
.trophy{position:relative; animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-14px)}}
.trophy .shine{animation:shine 3.6s ease-in-out infinite}
@keyframes shine{0%{transform:translateX(-180px)} 50%,100%{transform:translateX(180px)}}
.award-list{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:30px}
.aw{border-radius:22px; padding:22px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); transition:transform .5s var(--ease), background .4s}@media (hover:hover){
.aw:hover{transform:translateY(-6px); background:rgba(255,255,255,.1)}}
.aw b{display:block; color:#fff; font:700 20px var(--display); margin-bottom:4px}
.aw span{color:var(--on-dark-2); font-size:14.5px; line-height:1.5; display:block}
.aw.gold{background:var(--t-sun); border:0} .aw.gold b{color:#2A1D00} .aw.gold span{color:#4A3600}
.privacy{margin-top:22px; font-size:13.5px; color:var(--on-dark-3)}
@media (max-width:900px){ .climb{grid-template-columns:1fr 1fr} .step{min-height:0!important} .awards{grid-template-columns:1fr} }
@media (max-width:520px){ .climb,.award-list{grid-template-columns:1fr} }

/* ---------- why early ---------- */
.perks{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.perk{border-radius:26px; padding:30px; background:var(--card); box-shadow:0 0 0 1px var(--line); position:relative; overflow:hidden; transition:transform .5s var(--ease), box-shadow .5s}
.perk::after{content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--c); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease)}@media (hover:hover){
.perk:hover{transform:translateY(-6px); box-shadow:0 0 0 1px var(--line), 0 30px 50px -30px rgba(8,41,26,.4)}}@media (hover:hover){
.perk:hover::after{transform:none}}
.perk .ic{width:52px; height:52px; border-radius:16px; display:grid; place-items:center; background:var(--t); color:var(--g800); margin-bottom:18px; transition:transform .7s var(--ease)}@media (hover:hover){
.perk:hover .ic{transform:rotate(360deg)}}
.perk .ic svg{width:26px; height:26px}
.perk h3{font-size:22px}
.perk p{color:var(--ink2); font-size:15.5px; margin-top:8px; line-height:1.55}
@media (max-width:900px){ .perks{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .perks{grid-template-columns:1fr} }

/* ---------- pricing ---------- */
.price-shell{position:relative; border-radius:42px; padding:2px; overflow:hidden; isolation:isolate}
.price-shell::before{content:""; position:absolute; inset:-60%; z-index:-1; background:conic-gradient(from 0deg,var(--mint),var(--sun),var(--sky),var(--lilac),var(--mint)); animation:spin 8s linear infinite}
.price{display:grid; grid-template-columns:1.05fr .95fr; border-radius:40px; overflow:hidden}
.p-main{background:var(--forest); color:var(--on-dark); padding:56px; position:relative; overflow:hidden}
.p-main::after{content:"₹"; position:absolute; right:-30px; bottom:-90px; font:800 340px/1 var(--display); color:rgba(141,224,181,.06); pointer-events:none}
.p-main .tagx{background:var(--sun); color:#2A1D00}
.p-main h3{color:#fff; font-size:32px; margin-top:20px}
.amount{display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 18px; margin-top:22px}
.amount .now{font:800 96px/1 var(--display); color:var(--mint); letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.amount .was{font:500 30px var(--display); color:var(--on-dark-3); position:relative}
.amount .was::after{content:""; position:absolute; left:-4px; right:-4px; top:52%; height:3px; background:var(--sun); transform-origin:left; transition:transform .8s var(--ease) .6s; border-radius:3px}
.price-shell.armed:not(.in) .was::after{transform:scaleX(0)}
.save{background:var(--t-sun); color:#5A3E00; font-weight:800; font-size:14px; border-radius:999px; padding:6px 13px; animation:bob 4s ease-in-out infinite; --rot:-3deg}
.per{color:var(--on-dark-2); margin-top:10px}
.p-main .btn{margin-top:30px}
.p-main .fine{color:var(--on-dark-3)}
.p-incl{background:var(--t-mint); color:var(--tile-ink); padding:56px 48px}
.p-incl h4{margin:0 0 18px; font:700 22px var(--display)}
.p-incl ul{list-style:none; margin:0; padding:0; display:grid; gap:13px}
.p-incl li{display:grid; grid-template-columns:26px 1fr; gap:10px; font-size:16px; color:var(--tile-ink-2); transition:transform .5s var(--ease), opacity .5s; transition-delay:calc(var(--n)*70ms + .2s)}
.price-shell.armed:not(.in) .p-incl li{transform:translateX(30px); opacity:0}
.p-incl li::before{content:""; width:22px; height:22px; margin-top:2px; border-radius:50%; background:var(--g800) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat}
@media (max-width:860px){ .price{grid-template-columns:1fr} .p-main,.p-incl{padding:34px 24px} .amount .now{font-size:70px} }

/* ---------- founder ---------- */
.founder{display:grid; grid-template-columns:320px 1fr; gap:64px; align-items:center; border-radius:42px; background:var(--t-sun); color:var(--tile-ink); padding:56px; position:relative; overflow:hidden}
.founder::before{content:""; position:absolute; width:500px; height:500px; right:-200px; top:-200px; border-radius:50%; border:60px solid rgba(168,111,0,.08)}
.f-photo{position:relative; aspect-ratio:4/5; max-width:100%}
.f-photo .ph{position:absolute; inset:0; border-radius:28px; background:linear-gradient(170deg,#FFFFFF,#F3D58C); display:grid; place-items:end center; overflow:hidden}
.f-photo .ph svg{width:78%; color:var(--amber); opacity:.45}
.f-badge{position:absolute; right:-34px; bottom:-34px; width:120px; height:120px; animation:spin 22s linear infinite}
.f-badge text{font:800 10.5px var(--sans); letter-spacing:3px; fill:var(--g800)}
.founder .k{font:700 13px var(--sans); letter-spacing:.16em; text-transform:uppercase; color:#7A5300}
.founder blockquote{margin:14px 0 0; font:500 italic clamp(24px,2.8vw,36px)/1.32 var(--display); color:var(--tile-ink)}
.founder .body{margin-top:22px; color:#3F3A2A; max-width:62ch; display:grid; gap:12px; line-height:1.7}
.sign{margin-top:26px}
.sign b{display:block; font:700 23px var(--display); color:var(--g800)}
.sign span{color:#6B5A33; font-size:15px}
@media (max-width:860px){ .founder{grid-template-columns:1fr; padding:30px; gap:36px} .f-photo{width:200px} .f-badge{width:96px; height:96px; right:-26px; bottom:-26px} }

/* ---------- stories ---------- */
.stories{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.story{display:flex; flex-direction:column; gap:10px; padding:32px}
.story .stat{font:800 60px/1 var(--display); color:var(--forest); letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.story h3{font-size:23px}
.story p{font-size:15.5px}
.story .who{font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#4C6556}
.example{align-self:flex-start; font-size:12px; font-weight:700; border:1.5px solid currentColor; border-radius:999px; padding:2px 10px; color:#6B5A33; margin-top:auto}
@media (max-width:900px){ .stories{grid-template-columns:1fr} }

/* ---------- media ---------- */
.media{display:grid; grid-template-columns:1.25fr .75fr; gap:32px}
.gallery{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-content:start}
.gallery figure{margin:0; border-radius:26px; overflow:hidden; position:relative; align-self:start; line-height:0}
.gallery figure:first-child{grid-column:span 2}
.gallery figure svg{width:100%; height:auto; transition:transform 1.2s var(--ease)}@media (hover:hover){
.gallery figure:hover svg{transform:scale(1.06)}}
.gallery figcaption{position:absolute; left:12px; top:12px; line-height:1.4; background:rgba(8,41,26,.85); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); color:#fff; font-size:13.5px; font-weight:700; padding:6px 13px; border-radius:999px}
.sunpulse{transform-box:fill-box; transform-origin:center; animation:sunp 4s ease-in-out infinite}
@keyframes sunp{50%{transform:scale(1.12)}}
.wave{animation:wave 6s linear infinite}
@keyframes wave{to{transform:translateX(-90px)}}
.blade{transform-box:view-box; animation:spin 6s linear infinite}
.news{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.news li{border-radius:22px; padding:20px 22px; background:var(--card); box-shadow:0 0 0 1px var(--line); transition:transform .5s var(--ease), box-shadow .5s}@media (hover:hover){
.news li:hover{transform:translateX(8px); box-shadow:0 0 0 1px var(--line), -6px 0 0 var(--sun)}}
.news .kind{font:700 12px var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--g600)}
.news h3{font:700 18px var(--sans); letter-spacing:0; margin-top:4px}
.news p{color:var(--ink2); font-size:15px; margin-top:4px}
.press{margin-top:12px; border-radius:22px; background:var(--t-lilac); color:var(--tile-ink); padding:24px}
.press h3{font-size:22px}
.press p{color:#3B3555; font-size:15px; margin:6px 0 16px}
@media (max-width:900px){ .media{grid-template-columns:1fr} }

/* ---------- supporters ---------- */
.slots{display:grid; grid-template-columns:repeat(6,1fr); gap:12px}
.slot{--dash:color-mix(in srgb,var(--muted) 60%,transparent); border-radius:22px; min-height:130px; display:grid; place-items:center; text-align:center; padding:16px 10px; color:var(--muted); font-size:14px; transition:color .3s, transform .4s var(--ease);
  background:linear-gradient(90deg,var(--dash) 50%,transparent 0) repeat-x 0 0/14px 2px, linear-gradient(90deg,var(--dash) 50%,transparent 0) repeat-x 0 100%/14px 2px, linear-gradient(0deg,var(--dash) 50%,transparent 0) repeat-y 0 0/2px 14px, linear-gradient(0deg,var(--dash) 50%,transparent 0) repeat-y 100% 0/2px 14px}@media (hover:hover){
.slot:hover{--dash:var(--g600); animation:ants .6s linear infinite; transform:translateY(-4px)}}
@keyframes ants{to{background-position:14px 0, -14px 100%, 0 -14px, 100% 14px}}
.slot b{display:block; color:var(--ink); font-size:15px; margin-bottom:4px}
.support-cta{margin-top:24px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; padding:34px 38px; border-radius:30px; background:var(--t-sky); color:var(--tile-ink)}
.support-cta h3{font-size:28px}
.support-cta p{font-size:15.5px; margin-top:6px; max-width:60ch; color:#2E4A55}
@media (max-width:960px){ .slots{grid-template-columns:repeat(3,1fr)} }
@media (max-width:520px){ .slots{grid-template-columns:1fr 1fr} .support-cta{padding:24px} }

/* ---------- register ---------- */
.register{background:linear-gradient(170deg,var(--g800),var(--forest)); overflow:hidden}
.reg-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start}
.reg-price{margin-top:28px; display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:14px 22px}
.reg-price b{font:800 40px var(--display); color:var(--sun)}
.reg-price s{color:var(--on-dark-3)}
.reg-price span{color:var(--on-dark-2); font-size:14px}
.register ul{margin:28px 0 0; padding:0; list-style:none; display:grid; gap:10px; color:var(--on-dark-2)}
.register li{display:flex; gap:12px; align-items:center}
.register li::before{content:""; width:10px; height:10px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px rgba(141,224,181,.2)}
form{background:#fff; color:#13231A; border-radius:30px; padding:34px; display:grid; gap:16px; position:relative; box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
.fl{position:relative; display:block}
.fl input,.fl select{font:16px var(--sans); padding:22px 14px 8px; border:1.5px solid #D3E4D9; border-radius:14px; background:#fff; color:#13231A; width:100%; transition:border-color .3s, box-shadow .3s; appearance:none}
.fl select{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F7D4F' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center/16px no-repeat; padding-right:40px}
.fl span{position:absolute; left:15px; top:16px; font-size:15px; color:#5E7868; pointer-events:none; transition:transform .3s var(--ease), font-size .3s, color .3s; transform-origin:left}
.fl input:focus + span,.fl input:not(:placeholder-shown) + span,.fl select + span{transform:translateY(-10px); font-size:12px; color:var(--g600); font-weight:700}
.fl input:focus,.fl select:focus{outline:none; border-color:var(--g600); box-shadow:0 0 0 4px #D7EFE1}
.two{display:grid; grid-template-columns:1fr 1fr; gap:16px}
form .btn{width:100%; padding:18px}
.form-msg{font-size:14px; color:var(--g600); min-height:1em}
.recv{position:absolute; right:22px; top:-34px; width:110px; height:110px; border-radius:50%; border:3px solid var(--g600); outline:1.5px dashed var(--g600); outline-offset:-10px; display:grid; place-content:center; text-align:center; color:var(--g600); background:#fff; font:800 11px/1.2 var(--sans); letter-spacing:.1em; --r:-14deg; transform:rotate(-14deg)}
.recv b{font:700 24px/1 var(--display)}
.recv.go{animation:thunk .6s var(--ease) both}
@media (max-width:860px){ .reg-grid{grid-template-columns:1fr} }
@media (max-width:480px){ .two{grid-template-columns:1fr} form{padding:22px} }

/* ---------- footer ---------- */
footer{background:#051C11; color:var(--on-dark-3); padding:80px 0 40px; font-size:15px; overflow:hidden}
.mega{font:800 clamp(90px,24vw,360px)/.8 var(--display); letter-spacing:-.06em; text-align:center; color:transparent; -webkit-text-stroke:1.5px rgba(141,224,181,.35); background:linear-gradient(90deg,var(--mint),var(--sun),var(--sky)) no-repeat 0 0/0% 100%; -webkit-background-clip:text; background-clip:text; transition:background-size 1.4s var(--ease); margin-bottom:56px; user-select:none}.mega.in{background-size:100% 100%}@media (hover:hover){
.mega:hover{background-size:100% 100%}}
.foot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:32px; align-items:flex-start}
.foot .brand{color:#fff}
.foot nav{display:grid; grid-template-columns:repeat(3,auto); gap:10px 32px}
.foot nav a{text-decoration:none; color:var(--on-dark-2); transition:color .3s}@media (hover:hover){
.foot nav a:hover{color:var(--mint)}}
.legal{margin-top:40px; padding-top:22px; border-top:1px solid rgba(141,224,181,.15); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:13.5px}
.theme-btn{all:unset; cursor:pointer; color:var(--on-dark-2); text-decoration:underline; text-underline-offset:3px}
.theme-btn:focus-visible{outline:2px solid var(--mint)}
@media (max-width:520px){ .foot nav{grid-template-columns:repeat(2,auto)} }

.confetti{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:220}

/* =================== v6 additions =================== */
.announce{background:#22183F; color:#E4DDF8; letter-spacing:.02em}
.announce .k{font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#fff}
.announce b{color:var(--sun)}
.hero .fomo{display:flex; align-items:center; gap:10px; margin-top:22px; font-size:14.5px; color:var(--on-dark-2)}
.hero .fomo b{color:#fff}
.hero .fomo .dot{width:9px; height:9px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 0 rgba(141,224,181,.7); animation:ping 2s infinite}
.chk{background:var(--forest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat}

/* trust strip */
.trust{background:var(--card); border-bottom:1px solid var(--line); padding-block:28px}
.trust .wrap{display:grid; gap:18px; justify-items:center; text-align:center}
.trust .deal{font-size:15px; color:var(--ink2)}
.trust .deal b{color:var(--ink)}
.trust .deal a{color:var(--g600); font-weight:700; margin-left:10px; text-underline-offset:3px}
.badges{display:flex; flex-wrap:wrap; justify-content:center; gap:14px 44px; align-items:center}
.badges small{font:700 11px var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.badges span{display:inline-flex; align-items:center; gap:9px; font:800 18px var(--sans); letter-spacing:-.01em; color:var(--ink); opacity:.72; transition:opacity .3s, transform .4s var(--ease)}@media (hover:hover){
.badges span:hover{opacity:1; transform:translateY(-3px)}}
.badges svg{width:24px; height:24px}

/* audience switcher */
.aud{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center}
.aud-tabs{display:flex; flex-wrap:wrap; gap:8px; margin-top:30px}
.tabbtn{font:700 15px var(--sans); cursor:pointer; border:0; padding:13px 20px; border-radius:999px; background:var(--card); box-shadow:0 0 0 1px var(--line); color:var(--ink2); transition:background .3s, color .3s, transform .3s var(--ease), box-shadow .3s}@media (hover:hover){
.tabbtn:hover{transform:translateY(-2px)}}
.tabbtn[aria-selected="true"],.tabbtn[aria-pressed="true"]{background:var(--forest); color:#fff; box-shadow:0 10px 24px -10px rgba(8,41,26,.6)}
.dark .tabbtn{background:rgba(255,255,255,.06); color:var(--on-dark-2); box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.dark .tabbtn[aria-selected="true"]{background:var(--mint); color:var(--forest)}
.aud-panel{border-radius:36px; padding:44px; background:var(--t,var(--t-mint)); color:var(--tile-ink); position:relative; overflow:hidden; min-height:420px; transition:background .6s var(--ease)}
.aud-panel .who-big{position:absolute; right:-6px; bottom:-34px; font:800 italic clamp(90px,12vw,170px)/1 var(--display); color:rgba(8,41,26,.07); pointer-events:none; white-space:nowrap}
.aud-panel h3{font:600 italic clamp(30px,3.4vw,44px)/1.05 var(--display); max-width:17ch; color:var(--tile-ink); animation:slideIn .6s var(--ease) both}
.aud-panel ul{list-style:none; padding:0; margin:26px 0 0; display:grid; gap:13px}
.aud-panel li{display:flex; gap:12px; align-items:flex-start; font-size:16.5px; color:var(--tile-ink-2); animation:slideIn .6s var(--ease) both; animation-delay:calc(var(--n)*80ms + .1s)}
.aud-panel li::before{content:""; flex:none; width:24px; height:24px; margin-top:1px; border-radius:50%; background:var(--forest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat}
.aud-panel .btn{margin-top:30px; position:relative}
@keyframes slideIn{from{opacity:0; transform:translateX(24px)}}
@media (max-width:900px){ .aud{grid-template-columns:1fr} .aud-panel{padding:28px; min-height:0} }

/* hidden stamps (stamp hunt) */
.hunt{position:absolute; z-index:5; width:40px; height:40px; border-radius:50%; border:2px dashed var(--c,#2F7D4F); background:color-mix(in srgb,var(--c,#2F7D4F) 12%,transparent); color:var(--c,#2F7D4F); font:800 13px var(--display); display:grid; place-items:center; cursor:pointer; padding:0; animation:wig 4s ease-in-out infinite; transition:opacity .4s, transform .4s var(--ease)}@media (hover:hover){
.hunt:hover{transform:scale(1.2) rotate(-10deg); animation-play-state:paused}}
.hunt.got{opacity:.0; pointer-events:none; transform:scale(2.2)}
.dark .hunt{--c:#8DE0B5}
@keyframes wig{0%,86%,100%{transform:rotate(0)} 90%{transform:rotate(-14deg)} 94%{transform:rotate(12deg)}}
.hud{position:fixed; left:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:150; display:flex; align-items:center; gap:10px; padding:7px 16px 7px 7px; border:0; cursor:pointer; border-radius:999px; background:var(--forest); color:#fff; font:700 14px var(--sans); box-shadow:0 16px 30px -12px rgba(0,0,0,.5)}
.hud svg{width:40px; height:40px; transform:rotate(-90deg)}
.hud circle{fill:none; stroke-width:4}
.hud .tr{stroke:rgba(255,255,255,.15)}
.hud .pr{stroke:var(--sun); stroke-dasharray:113.1; stroke-dashoffset:113.1; stroke-linecap:round; transition:stroke-dashoffset .8s var(--ease)}
.hud em{font-style:normal; color:var(--on-dark-2); font-weight:500}
@media (max-width:560px){ .hud em{display:none} }
.toast{position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom,0px)); z-index:260; transform:translate(-50%,20px); opacity:0; pointer-events:none; background:#fff; color:#0C2418; font-weight:700; font-size:14.5px; padding:12px 18px; border-radius:14px; box-shadow:0 20px 40px -14px rgba(0,0,0,.4); transition:opacity .3s, transform .5s var(--ease); max-width:calc(100vw - 32px); text-align:center}
.toast.show{opacity:1; transform:translate(-50%,0)}
dialog.hero-dlg{border:0; border-radius:32px; padding:40px 32px; max-width:min(440px,calc(100vw - 32px)); text-align:center; background:linear-gradient(170deg,#14532D,#062214); color:#fff}
dialog.hero-dlg::backdrop{background:rgba(5,20,12,.7); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
dialog.hero-dlg[open]{animation:pop .6s var(--ease)}
.hero-dlg .medal{width:110px; height:110px; margin:0 auto 18px; border-radius:50%; display:grid; place-content:center; border:3px solid var(--sun); outline:2px dashed var(--sun); outline-offset:-12px; color:var(--sun); font:800 13px/1.15 var(--sans); letter-spacing:.08em; animation:spin 16s linear infinite}
.hero-dlg h3{font:600 italic 34px var(--display); color:#fff}
.hero-dlg p{color:var(--on-dark-2); margin:10px 0 22px}
.hero-dlg .row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
@keyframes pop{from{opacity:0; transform:scale(.85) translateY(20px)}}

/* whatsapp */
.wa{position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:150; display:flex; align-items:center; gap:10px; border:0; cursor:pointer; background:#25D366; color:#052812; font:800 15px var(--sans); border-radius:999px; padding:13px 20px 13px 15px; box-shadow:0 18px 34px -12px rgba(37,211,102,.7)}
.wa::before{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:0 0 0 0 rgba(37,211,102,.6); animation:waPing 2.4s infinite}
@keyframes waPing{70%{box-shadow:0 0 0 16px rgba(37,211,102,0)} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.wa svg{width:24px; height:24px}
@media (max-width:560px){ .wa span{display:none} .wa{padding:14px} }
.wa-pop{position:fixed; right:16px; bottom:calc(84px + env(safe-area-inset-bottom,0px)); z-index:151; width:min(350px,calc(100vw - 32px)); border-radius:24px; overflow:hidden; background:#fff; color:#13231A; box-shadow:0 40px 80px -24px rgba(0,0,0,.5); transform-origin:bottom right}
.wa-pop:not([hidden]){animation:pop .45s var(--ease)}
.wa-pop header{background:#075E54; color:#fff; padding:18px 20px; display:flex; align-items:center; gap:12px}
.wa-pop header .logo{width:40px; height:40px; background-color:#fff; border-radius:50%}
.wa-pop header b{display:block; font-size:16px}
.wa-pop header small{opacity:.8}
.wa-pop .x{margin-left:auto; background:none; border:0; color:#fff; font-size:24px; cursor:pointer; line-height:1}
.wa-body{padding:18px; background:#ECE5DD; display:grid; gap:8px}
.wa-bubble{background:#fff; border-radius:0 14px 14px 14px; padding:10px 14px; font-size:14.5px; justify-self:start; max-width:90%}
.wa-opt{display:block; text-decoration:none; background:#DCF8C6; color:#0B3B1F; font-weight:700; font-size:14.5px; border-radius:14px 14px 0 14px; padding:10px 14px; justify-self:end; transition:transform .3s var(--ease)}@media (hover:hover){
.wa-opt:hover{transform:translateX(-4px)}}
.wa-note{font-size:12.5px; color:#6B5A33; background:#FFF0C7; border-radius:10px; padding:8px 10px}

/* impact lab */
.lab{background:radial-gradient(900px 520px at 8% 0%, #145238 0%, transparent 60%), radial-gradient(700px 400px at 100% 100%, #1A3F5A 0%, transparent 60%), #061C12}
.flow{border-radius:32px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08); padding:24px 20px; overflow-x:auto}
.flow svg{min-width:760px; width:100%; height:auto}
.flow .nd{animation:ndp 5s ease-in-out infinite; transform-box:fill-box; transform-origin:center; animation-delay:calc(var(--n)*1s)}
@keyframes ndp{0%,12%,100%{transform:scale(1)} 6%{transform:scale(1.12)}}
.sim{display:grid; grid-template-columns:.9fr 1.1fr; gap:20px; margin-top:20px}
.panel-d{border-radius:32px; padding:32px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08)}
.sim-ctrl{display:grid; gap:26px; align-content:start}
.sim-ctrl label{display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-weight:600; color:#fff; font-size:15.5px; margin-bottom:12px}
.sim-ctrl output{font:700 26px var(--display); color:var(--mint); font-variant-numeric:tabular-nums; white-space:nowrap}
.sim input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:8px; background:linear-gradient(90deg,var(--mint) var(--p,50%), rgba(255,255,255,.12) 0); outline:none; margin:0}
.sim input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:26px; height:26px; border-radius:50%; background:var(--sun); border:5px solid #061C12; box-shadow:0 0 0 2px var(--sun); cursor:grab}
.sim input[type=range]::-moz-range-thumb{width:18px; height:18px; border-radius:50%; background:var(--sun); border:5px solid #061C12; box-shadow:0 0 0 2px var(--sun); cursor:grab}
.sim input[type=range]:focus-visible{box-shadow:0 0 0 3px rgba(141,224,181,.5)}
.presets{display:flex; flex-wrap:wrap; gap:8px}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.kpi{border-radius:20px; padding:18px; background:rgba(255,255,255,.05)}
.kpi b{display:block; font:800 clamp(24px,2.6vw,36px)/1 var(--display); color:#fff; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.kpi span{display:block; margin-top:6px; font-size:13.5px; color:var(--on-dark-2)}
.kpi:first-child b{color:var(--sky)}
.pict-h{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:24px 0 12px; font-size:14px; color:var(--on-dark-2)}
.pict-h b{color:#fff}
.pict{display:grid; grid-template-columns:repeat(15,1fr); gap:8px}
.pict i{aspect-ratio:1; border-radius:50% 0 50% 50%; transform:rotate(-45deg) scale(.7); background:rgba(255,255,255,.08); transition:background .4s, transform .5s var(--ease)}
.pict i.on{background:linear-gradient(135deg,#9FDDF3,var(--sky)); transform:rotate(-45deg) scale(1)}
.assume{font-size:13px; color:var(--on-dark-3); margin-top:16px}
@media (max-width:900px){ .sim{grid-template-columns:1fr} .kpis{grid-template-columns:1fr 1fr 1fr} .panel-d{padding:22px} }
@media (max-width:480px){ .kpis{grid-template-columns:1fr} }

/* passport deck */
.deck{position:relative; height:470px; perspective:1800px; margin-top:8px}
.hcard{position:absolute; left:50%; top:50%; width:240px; height:340px; margin:-170px 0 0 -120px; transform:translate3d(var(--x),var(--y),0) rotate(var(--rot)); transition:transform 1.1s var(--ease); transition-delay:calc(var(--n)*90ms); cursor:pointer; z-index:var(--z); outline:none}.hcard:focus-visible{z-index:20}@media (hover:hover){
.hcard:hover{z-index:20}}
.deck.armed:not(.in) .hcard{transform:translate3d(0,40px,0) rotate(calc(var(--n)*2deg - 4deg))}
.hcard .inner{position:absolute; inset:0; transform-style:preserve-3d; transition:transform .7s var(--ease); transform:translateY(var(--lift,0)) rotateX(var(--rx,0deg)) rotateY(calc(var(--ry,0deg) + var(--flip,0deg)))}.hcard:focus-visible .inner{--lift:-24px}@media (hover:hover){
.hcard:hover .inner{--lift:-24px}}
.hcard.flip{--flip:180deg}
.face{position:absolute; inset:0; border-radius:22px; backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden; padding:20px; display:flex; flex-direction:column; gap:8px; box-shadow:0 30px 50px -22px rgba(8,41,26,.55), inset 0 0 0 1px rgba(255,255,255,.12)}
.face.front::after{content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:color-dodge; opacity:.35; transition:opacity .4s;
  background:linear-gradient(115deg,transparent 25%,rgba(141,224,181,.55) 40%,rgba(242,184,75,.55) 50%,rgba(169,156,235,.55) 60%,transparent 75%) var(--hx,0%) var(--hy,0%)/260% 260%; animation:holo 7s linear infinite}@media (hover:hover){
.hcard:hover .face.front::after{opacity:.85; animation-play-state:paused}}
@keyframes holo{0%{background-position:0% 0%} 50%{background-position:100% 100%} 100%{background-position:0% 0%}}
.face .lbl{font:800 10.5px var(--sans); letter-spacing:.16em; text-transform:uppercase; opacity:.8}
.face.back{transform:rotateY(180deg); background:linear-gradient(160deg,#14532D,#041A0F); color:#fff; justify-content:center; align-items:center; text-align:center; gap:12px}
.face.back .logo{width:64px; height:64px; background-color:#fff; border-radius:50%}
.face.back b{font:600 italic 24px var(--display)}
.face.back p{font-size:14px; color:var(--on-dark-2)}
.face.back small{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mint)}
.c-id{background:linear-gradient(160deg,#1C6B43,#08291A); color:#fff}
.c-id .top{display:flex; align-items:center; gap:10px}
.c-id .top .logo{width:34px; height:34px; background-color:#fff; border-radius:50%}
.c-id .top b{font:800 12px/1.2 var(--sans); letter-spacing:.12em}
.c-id .av{width:76px; height:76px; border-radius:18px; background:#DCEFF6; display:grid; place-items:end center; overflow:hidden; margin-top:10px}
.c-id .av svg{width:80%; color:var(--blue)}
.c-id .nm{font:700 24px var(--display)}
.c-id .chip2{align-self:flex-start; font-size:12px; font-weight:800; border-radius:999px; padding:4px 10px; background:var(--sky); color:#062433}
.c-id dl{display:grid; grid-template-columns:auto 1fr; gap:2px 10px; margin:4px 0 0; font-size:13px}
.c-id dt{color:var(--on-dark-3)} .c-id dd{margin:0; font-weight:700}
.c-id .mrz{color:rgba(255,255,255,.4); font-size:9.5px}
.c-st{background:#FFFBEF; color:var(--tile-ink)}
.c-st .big{font:800 54px/1 var(--display); color:var(--g800)}
.c-st .big small{font-size:22px; color:var(--muted)}
.c-st .pstamps{gap:7px; margin-top:auto}
.c-bd{background:linear-gradient(160deg,#6E5FB0,#2A2152); color:#fff}
.medals{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:auto}
.medals span{display:grid; justify-items:center; gap:6px; text-align:center; font-size:12px; font-weight:700}
.medals i{width:58px; height:58px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff7,transparent 40%),var(--c); box-shadow:inset 0 0 0 4px rgba(255,255,255,.35), 0 8px 16px -6px rgba(0,0,0,.5)}
.medals span.off{opacity:.55} .medals span.off i{background:none; border:2px dashed rgba(255,255,255,.6); box-shadow:none}
.c-pr{background:linear-gradient(160deg,#FFE7A6,#F2B84B); color:#2A1D00}
.c-pr .q{font:500 italic 21px/1.35 var(--display); margin-top:10px}
.c-pr .seal2{margin-top:auto; align-self:flex-end; width:70px; height:70px; border-radius:50%; border:2.5px solid #7A5300; display:grid; place-content:center; text-align:center; font:800 8.5px/1.2 var(--sans); letter-spacing:.06em; color:#7A5300; transform:rotate(-12deg)}
.c-cg{background:linear-gradient(160deg,#2380A6,#0A2A38); color:#fff}
.c-cg svg{width:100%; margin:auto 0}
.c-cg .nm{font:700 22px/1.1 var(--display)}
.deck-hint{text-align:center; font-size:14px; color:var(--tile-ink-2); margin-top:4px}
@media (max-width:1100px){ .hcard{--x:calc(var(--xs) * .72)!important} }
@media (max-width:760px){
  .deck{height:auto; display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:30px 16px 20px; margin-inline:-24px; scrollbar-width:none}
  .hcard{position:relative; left:auto; top:auto; margin:0; flex:0 0 240px; height:340px; transform:none!important; scroll-snap-align:center}
}
/* cognitive report */
.cog{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; margin-top:56px; border-radius:40px; background:#FFFDF6; color:var(--tile-ink); padding:48px; box-shadow:0 40px 70px -40px rgba(8,41,26,.4)}
.cog h3{font:600 italic clamp(28px,3vw,40px)/1.08 var(--display); color:var(--tile-ink)}
.cog > div > p{color:var(--tile-ink-2); margin-top:12px; max-width:52ch}
.skills{display:grid; gap:12px; margin-top:26px}
.sk{display:grid; grid-template-columns:150px 1fr 104px; gap:14px; align-items:center; font-size:14.5px}
.sk b{font-weight:700}
.sk .tr{height:10px; border-radius:10px; background:#EDE6CF; overflow:hidden}
.sk .tr i{display:block; height:100%; width:var(--v); border-radius:inherit; background:linear-gradient(90deg,var(--g600),var(--mint)); transition:width 1.4s var(--ease); transition-delay:calc(var(--n)*100ms + .3s)}
.cog.armed:not(.in) .sk .tr i{width:0}
.sk span{text-align:right; font-size:12.5px; font-weight:700; color:var(--amber); font-variant-numeric:tabular-nums}
.radar{width:100%; max-width:380px; justify-self:center; overflow:visible}
.radar .grid{fill:none; stroke:#E6DDBF}
.radar .ax{stroke:#E6DDBF}
.radar .rpoly{fill:rgba(47,125,79,.25); stroke:var(--g600); stroke-width:2.5; stroke-linejoin:round; transform-box:view-box; transform-origin:190px 190px; transition:transform 1.4s var(--ease) .4s}
.cog.armed:not(.in) .rpoly{transform:scale(0)}
.radar .pt{fill:var(--sun); stroke:var(--g800); stroke-width:2}
.radar text{font:700 12.5px var(--sans); fill:#5C5233}
@media (max-width:900px){ .cog{grid-template-columns:1fr; padding:26px} .sk{grid-template-columns:110px 1fr 64px; font-size:13.5px} }

/* certificate */
.cert-wrap{display:grid; grid-template-columns:.75fr 1.25fr; gap:56px; align-items:center}
.cert-ctrl{display:grid; gap:14px; margin-top:28px}
.cert-ctrl label{display:grid; gap:6px; font-weight:700; font-size:14px; color:var(--ink2)}
.cert-ctrl input,.cert-ctrl select{font:16px var(--sans); padding:13px 14px; border:1.5px solid var(--line); border-radius:14px; background:var(--card); color:var(--ink); width:100%}
.cert-ctrl input:focus,.cert-ctrl select:focus{outline:none; border-color:var(--g600)}
.tiers{display:flex; flex-wrap:wrap; gap:8px}
.cert-stage{perspective:1600px}
.cert{position:relative; aspect-ratio:1.414; background:#FFFDF5; color:#1B2A20; border-radius:8px; padding:5.5cqw; container-type:inline-size; overflow:hidden; box-shadow:0 60px 90px -45px rgba(8,41,26,.6), 0 0 0 1px rgba(0,0,0,.05); transition:transform .8s var(--ease); --tc:#14532D; --tc2:#2F7D4F}
.cert-stage .cert{transform:rotateX(6deg) rotateY(-8deg)}@media (hover:hover){
.cert-stage:hover .cert{transform:none}}
.cert[data-tier="hero"]{--tc:#8A5A00; --tc2:#E2A93B}
.cert[data-tier="nat"]{--tc:#3E3270; --tc2:#7C6DB8}
.cert::before{content:""; position:absolute; inset:2.2cqw; border:.45cqw solid var(--tc); border-radius:4px; pointer-events:none; transition:border-color .5s}
.cert::after{content:""; position:absolute; inset:3.2cqw; border:.15cqw solid var(--tc2); border-radius:2px; pointer-events:none; transition:border-color .5s}
.cert .wm{position:absolute; inset:0; margin:auto; width:46cqw; height:46cqw; opacity:.05; filter:grayscale(1)}
.cert .corner{position:absolute; width:12cqw; height:12cqw; color:var(--tc2)}
.cert .corner.tl{left:2.2cqw; top:2.2cqw} .cert .corner.tr{right:2.2cqw; top:2.2cqw; transform:scaleX(-1)}
.cert .corner.bl{left:2.2cqw; bottom:2.2cqw; transform:scaleY(-1)} .cert .corner.br{right:2.2cqw; bottom:2.2cqw; transform:scale(-1)}
.cert-body{position:relative; height:100%; display:flex; flex-direction:column; align-items:center; text-align:center}
.cert-top{display:flex; align-items:center; gap:1.6cqw}
.cert-top .logo{width:7cqw; height:7cqw}
.cert-top small{display:block; font:800 1.25cqw/1.5 var(--sans); letter-spacing:.2em; color:var(--tc); text-align:left}
.cert-kind{margin-top:2.6cqw; font:600 italic 5.4cqw/1 var(--display); color:var(--tc); transition:color .5s}
.cert-pre{margin-top:1.8cqw; font:500 1.5cqw var(--sans); letter-spacing:.24em; text-transform:uppercase; color:#6A6450}
.cert-name{margin-top:1.2cqw; font:700 6.6cqw/1.1 var(--display); color:#14231A; padding:0 4cqw .6cqw; border-bottom:.25cqw solid var(--tc2); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cert-name.write{animation:write 1s var(--ease)}
@keyframes write{from{clip-path:inset(0 100% 0 0)}}
.cert-meta{margin-top:1.4cqw; font:800 1.4cqw var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--tc)}
.cert-txt{margin-top:1.2cqw; font:400 1.75cqw/1.55 var(--sans); color:#3B3A30; max-width:62ch}
.cert-foot{margin-top:auto; width:100%; display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:3cqw}
.sig{display:grid; justify-items:center; gap:.4cqw}
.sig svg{width:18cqw; height:5cqw}
.sig path{fill:none; stroke:#1B2A20; stroke-width:2; stroke-linecap:round; stroke-dasharray:400; stroke-dashoffset:0; transition:stroke-dashoffset 1.6s var(--ease) .6s}
.cert-sec.armed:not(.in) .sig path,.cert-wrap.armed:not(.in) .sig path{stroke-dashoffset:400}
.sig span{border-top:.15cqw solid #1B2A20; padding-top:.5cqw; font:700 1.3cqw var(--sans); letter-spacing:.1em; text-transform:uppercase; color:#555; width:100%}
.seal-c{position:relative; width:17cqw; height:17cqw}
.seal-c .rib{position:absolute; left:50%; top:62%; width:4.6cqw; height:9cqw; background:var(--tc); transform-origin:top; clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%)}
.seal-c .rib.a{transform:translateX(-90%) rotate(16deg)} .seal-c .rib.b{transform:translateX(-10%) rotate(-16deg)}
.seal-c .disc2{position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg,var(--tc2),#fff8,var(--tc2),#fff6,var(--tc2)); box-shadow:0 1cqw 2cqw -1cqw rgba(0,0,0,.5); display:grid; place-items:center; animation:spin 14s linear infinite}
.seal-c .disc2::before{content:""; position:absolute; inset:1.2cqw; border-radius:50%; background:var(--tc); }
.seal-c svg{position:absolute; inset:0; width:100%; height:100%}
.seal-c text{font:800 9px var(--sans); letter-spacing:2.2px; fill:#fff}
.seal-c .core{position:absolute; inset:0; display:grid; place-content:center; text-align:center; color:#fff; font:800 1.25cqw/1.2 var(--sans); letter-spacing:.1em}
.seal-c .core b{font:700 3.6cqw/1 var(--display); letter-spacing:0}
.cert-id{margin-top:1.4cqw; font:600 1.15cqw var(--sans); letter-spacing:.1em; color:#8A836A}
@media (max-width:960px){ .cert-wrap{grid-template-columns:1fr} .cert-stage .cert{transform:none} }

/* rankings */
.rk{margin-top:64px; border-radius:36px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08); padding:28px}
.rk-top{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; margin-bottom:28px}
.rk-tabs{display:flex; flex-wrap:wrap; gap:8px}
.rk-tools{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.demo{background:rgba(242,184,75,.12); color:var(--sun); border:1px solid rgba(242,184,75,.35); font-size:12.5px; letter-spacing:.04em}
.demo i{width:8px; height:8px; border-radius:50%; background:#F26B5B; animation:ping 1.6s infinite; box-shadow:0 0 0 0 rgba(242,107,91,.7)}
.rk-search{font:15px var(--sans); padding:11px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.06); color:#fff; width:200px}
.rk-search::placeholder{color:var(--on-dark-3)}
.rk-search:focus{outline:none; border-color:var(--mint)}
.podium{display:grid; grid-template-columns:1fr 1.15fr 1fr; align-items:end; gap:14px}
.pod{border-radius:26px 26px 10px 10px; padding:22px 18px; text-align:center; display:grid; gap:4px; justify-items:center; animation:podUp .9s var(--ease) both; transform-origin:bottom}
.pod .medal{width:52px; height:52px; border-radius:50%; display:grid; place-items:center; font:800 22px var(--display); margin-bottom:6px; box-shadow:inset 0 0 0 4px rgba(255,255,255,.4)}
.pod b{font:700 19px/1.2 var(--display)}
.pod small{font-size:13px; opacity:.8}
.pod em{font-style:normal; font:800 26px var(--display); margin-top:8px; font-variant-numeric:tabular-nums}
.pod.p1{min-height:250px; background:linear-gradient(170deg,#F9D88A,var(--sun)); color:#2A1D00; animation-delay:.25s; box-shadow:0 30px 60px -24px rgba(242,184,75,.6)}
.pod.p1 .medal{background:#fff; color:#8A5A00}
.pod.p2{min-height:210px; background:linear-gradient(170deg,#F1F5F3,#BFCBC5); color:#1F2A24; animation-delay:.1s}
.pod.p2 .medal{background:#8C9A93; color:#fff}
.pod.p3{min-height:180px; background:linear-gradient(170deg,#F4D2B4,#C98A5A); color:#2E1A0B; animation-delay:.4s}
.pod.p3 .medal{background:#9A5B2D; color:#fff}
@keyframes podUp{from{transform:scaleY(.2); opacity:0}}
.rk-table{margin-top:16px; display:grid}
.rk-row{display:grid; grid-template-columns:44px minmax(0,1.4fr) minmax(0,1fr) 130px; gap:16px; align-items:center; padding:13px 16px; border-radius:16px; transition:background .8s; animation:rowIn .6s var(--ease) both; animation-delay:calc(var(--n)*40ms)}
.rk-row + .rk-row{border-top:1px solid rgba(255,255,255,.06)}@media (hover:hover){
.rk-row:hover{background:rgba(255,255,255,.05)}}
.rk-row.flash{background:rgba(141,224,181,.13)}
.rk-row .pos{font:700 20px var(--display); color:var(--on-dark-3); font-variant-numeric:tabular-nums}
.rk-row .nm b{display:block; color:#fff; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rk-row .nm small{color:var(--on-dark-3); font-size:13px}
.rk-row .tg{font-style:normal; color:var(--mint)}
.rk-row .bar{height:7px; border-radius:7px; background:rgba(255,255,255,.08); overflow:hidden}
.rk-row .bar i{display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--g600),var(--mint),var(--sun)); transition:width 1s var(--ease)}
.rk-row .sc{text-align:right; font:700 17px var(--sans); color:#fff; font-variant-numeric:tabular-nums}
.delta{display:block; font:800 11.5px var(--sans); font-style:normal}
.delta.up{color:var(--mint)} .delta.down{color:#F29C8B}
.rk-empty{padding:24px; color:var(--on-dark-2)}
@keyframes rowIn{from{opacity:0; transform:translateY(14px)}}
@media (max-width:760px){ .rk{padding:18px} .podium{grid-template-columns:1fr; } .pod{min-height:0!important} .pod.p1{order:-1} .rk-row{grid-template-columns:34px minmax(0,1fr) 92px} .rk-row .bar{display:none} .rk-search{width:100%} .rk-tools{width:100%} }

/* schools */
.sch-hero{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.dash{border-radius:30px; background:var(--forest); color:#fff; padding:26px; box-shadow:0 40px 70px -30px rgba(8,41,26,.6); position:relative}
.dash-h{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:18px}
.dash-h b{font:700 18px var(--display)}
.dash-h span{font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--sun); background:rgba(242,184,75,.14); border-radius:999px; padding:4px 10px}
.dash-k{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.dash-k div{border-radius:16px; background:rgba(255,255,255,.06); padding:14px}
.dash-k b{display:block; font:800 26px/1 var(--display); color:var(--mint); font-variant-numeric:tabular-nums}
.dash-k span{font-size:12.5px; color:var(--on-dark-2)}
.dash-bars{display:grid; gap:10px; margin-top:18px}
.dash-bars div{display:grid; grid-template-columns:62px 1fr 40px; gap:10px; align-items:center; font-size:13px; color:var(--on-dark-2)}
.dash-bars i{height:10px; border-radius:10px; background:rgba(255,255,255,.08); overflow:hidden; position:relative}
.dash-bars i::after{content:""; position:absolute; inset:0; width:var(--v); border-radius:inherit; background:linear-gradient(90deg,var(--g600),var(--mint)); transition:width 1.4s var(--ease); transition-delay:calc(var(--n)*90ms + .2s)}
.dash.armed:not(.in) .dash-bars i::after{width:0}
.dash-bars em{font-style:normal; text-align:right; color:#fff; font-weight:700; font-variant-numeric:tabular-nums}
.dash small.s{display:block; margin-top:14px; font-size:12px; color:var(--on-dark-3)}
.benefits{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:72px}
.benefit{border-radius:26px; padding:28px; background:var(--card); box-shadow:0 0 0 1px var(--line); transition:transform .5s var(--ease), box-shadow .5s}@media (hover:hover){
.benefit:hover{transform:translateY(-6px); box-shadow:0 0 0 1px var(--line), 0 30px 50px -30px rgba(8,41,26,.4)}}
.benefit .ic{width:52px; height:52px; border-radius:16px; display:grid; place-items:center; background:var(--t); color:var(--g800); margin-bottom:16px}
.benefit .ic svg{width:26px; height:26px}
.benefit h3{font-size:21px}
.benefit p{color:var(--ink2); font-size:15.5px; margin-top:8px; line-height:1.55}
.steps-t{margin-top:72px; margin-bottom:24px; font-size:clamp(26px,3vw,36px)}
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; position:relative; counter-reset:st}
.steps::before{content:""; position:absolute; left:8%; right:8%; top:40px; height:2px; background:repeating-linear-gradient(90deg,var(--g600) 0 10px,transparent 10px 18px); transform-origin:left; transition:transform 1.6s var(--ease) .2s}
.steps.armed:not(.in)::before{transform:scaleX(0)}
.steps li{position:relative; display:grid; gap:10px; justify-items:start; padding:0 8px}
.steps li .n{width:80px; height:80px; border-radius:50%; display:grid; place-items:center; background:var(--bg); border:2px solid var(--g600); font:700 30px var(--display); color:var(--g800); box-shadow:0 0 0 8px var(--bg)}
.steps li:nth-child(2) .n{border-color:var(--blue); color:var(--blue)} .steps li:nth-child(3) .n{border-color:var(--amber); color:var(--amber)}
.steps h4{font:700 22px var(--display)}
.steps p{color:var(--ink2); font-size:15.5px}
.sch-cta{margin-top:64px; border-radius:36px; padding:44px; background:linear-gradient(120deg,var(--g800),var(--forest)); color:#fff; display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between; position:relative; overflow:hidden}
.sch-cta::before{content:""; position:absolute; right:-80px; top:-80px; width:300px; height:300px; border-radius:50%; background:radial-gradient(circle,rgba(242,184,75,.35),transparent 65%)}
.sch-cta h3{font:600 italic clamp(28px,3.2vw,42px)/1.1 var(--display); color:#fff; max-width:20ch; position:relative}
@media (max-width:960px){ .sch-hero{grid-template-columns:1fr} .benefits{grid-template-columns:1fr 1fr} .steps{grid-template-columns:1fr} .steps::before{display:none} .sch-cta{padding:28px} }
@media (max-width:520px){ .benefits{grid-template-columns:1fr} .dash-k b{font-size:21px} }

/* legacy */
.legacy{background:radial-gradient(800px 400px at 90% 0%, rgba(242,184,75,.12), transparent 60%), #071510}
.legacy .eyebrow{color:var(--sun)}
.leg-h{font-size:clamp(46px,7vw,96px)}
.gold{font-style:italic; font-weight:500; background:linear-gradient(100deg,#B8862E,#F6D58A 30%,#C98E1C 55%,#F7DDA6 75%,#B8862E) 0 0/200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:goldMove 6s linear infinite; padding-right:.06em}
@keyframes goldMove{to{background-position:200% 0}}
.leg-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.leg{border-radius:30px; padding:28px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; gap:18px; transition:border-color .6s, background .6s}
.leg[data-state="after"]{border-color:rgba(242,184,75,.45); background:rgba(242,184,75,.06)}
.leg-top{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.leg .who{font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark-3)}
.seg{display:inline-flex; padding:4px; border-radius:999px; background:rgba(255,255,255,.07); position:relative}
.seg button{position:relative; z-index:1; border:0; background:none; cursor:pointer; font:700 13px var(--sans); color:var(--on-dark-2); padding:7px 14px; border-radius:999px; transition:color .3s}
.seg::before{content:""; position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); border-radius:999px; background:var(--sun); transition:transform .5s var(--ease)}
.leg[data-state="after"] .seg::before{transform:translateX(100%)}
.seg button[aria-pressed="true"]{color:#2A1D00}
.leg-body{display:grid; min-height:170px}
.pane{grid-area:1/1; transition:opacity .5s, transform .6s var(--ease)}
.pane small{display:block; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--sun); margin-bottom:8px}
.pane h3{font-size:22px; color:#fff}
.pane p{color:var(--on-dark-2); margin-top:8px; font-size:15.5px}
.leg[data-state="before"] .pane.after{opacity:0; transform:translateX(30px); pointer-events:none}
.leg[data-state="after"] .pane.before{opacity:0; transform:translateX(-30px); pointer-events:none}
.leg-impact{display:flex; align-items:baseline; gap:10px; border-top:1px solid rgba(255,255,255,.1); padding-top:16px; margin-top:auto}
.leg-impact b{font:800 40px var(--display); color:var(--sun); font-variant-numeric:tabular-nums}
.leg-impact span{color:var(--on-dark-2); font-size:14px}
.leg .vtag{display:inline-flex; gap:6px; align-items:center; font-size:12px; font-weight:700; color:var(--mint)}
.leg .ex{font-size:12px; color:var(--on-dark-3); border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:2px 10px; align-self:flex-start}
.leg-cta{margin-top:40px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:18px; padding-top:32px; border-top:1px solid rgba(255,255,255,.1)}
.leg-cta h3{font:600 italic 30px var(--display); color:#fff}
.leg-cta p{color:var(--on-dark-2); margin-top:6px; max-width:56ch}
@media (max-width:960px){ .leg-grid{grid-template-columns:1fr} }

/* play zone */
.play-sec{background:linear-gradient(180deg,var(--bg),color-mix(in srgb,var(--t-sun) 40%,var(--bg)))}
.play{border-radius:40px; background:var(--card); box-shadow:0 0 0 1px var(--line), 0 50px 80px -50px rgba(8,41,26,.4); padding:30px; position:relative; overflow:hidden}
.play-tabs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px}
.game{min-height:380px}
.q-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px}
.q-dots{display:flex; gap:8px}
.q-dots i{width:30px; height:30px; border-radius:50%; border:2px dashed var(--line); display:grid; place-items:center; font:800 11px var(--sans); font-style:normal; color:var(--muted); transition:all .4s var(--ease)}
.q-dots i.ok{border:2.5px solid var(--g600); background:color-mix(in srgb,var(--g600) 18%,transparent); color:var(--g800); animation:thunk .5s var(--ease)}
.q-dots i.no{border:2px solid #E5A193; color:#B0574A}
.q-dots i.now{border-color:var(--sun); border-style:solid}
.q-meta{font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.q-text{font:600 clamp(24px,2.8vw,36px)/1.2 var(--display); margin:22px 0; max-width:30ch; animation:slideIn .5s var(--ease)}
.q-opts{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.q-opt{font:600 16px var(--sans); text-align:left; cursor:pointer; padding:18px 20px; border-radius:18px; border:1.5px solid var(--line); background:var(--bg); color:var(--ink); display:flex; gap:12px; align-items:center; transition:transform .3s var(--ease), border-color .3s, background .3s; animation:rowIn .5s var(--ease) both; animation-delay:calc(var(--n)*60ms)}@media (hover:hover){
.q-opt:hover:not(:disabled){transform:translateY(-3px); border-color:var(--g600)}}
.q-opt kbd{font:800 12px var(--sans); width:28px; height:28px; flex:none; border-radius:8px; display:grid; place-items:center; background:var(--card); box-shadow:0 0 0 1px var(--line)}
.q-opt.right{border-color:var(--g600); background:color-mix(in srgb,var(--g600) 14%,var(--bg))}
.q-opt.wrong{border-color:#D9826F; background:color-mix(in srgb,#D9826F 12%,var(--bg)); animation:shake .4s}
.q-opt:disabled{cursor:default}
@keyframes shake{25%{transform:translateX(-6px)} 75%{transform:translateX(6px)}}
.q-fb{margin-top:16px; min-height:1.6em; color:var(--ink2)}
.q-fb b{color:var(--ink)}
.q-end{display:grid; justify-items:center; text-align:center; gap:14px; padding:20px 0}
.q-end .score{font:800 96px/1 var(--display); color:var(--g600)}
.q-end .score small{font-size:36px; color:var(--muted)}
.q-end p{max-width:46ch; color:var(--ink2)}
.idres{display:grid; grid-template-columns:auto 1fr; gap:40px; align-items:center}
.idcard{width:250px; height:350px; border-radius:24px; padding:22px; color:#fff; background:linear-gradient(160deg,var(--c1),var(--c2)); display:flex; flex-direction:column; gap:8px; position:relative; overflow:hidden; animation:cardIn 1s var(--ease); box-shadow:0 40px 60px -30px rgba(0,0,0,.5)}
.idcard::after{content:""; position:absolute; inset:0; mix-blend-mode:color-dodge; opacity:.5; background:linear-gradient(115deg,transparent 25%,rgba(141,224,181,.6) 40%,rgba(242,184,75,.6) 50%,rgba(169,156,235,.6) 60%,transparent 75%) 0 0/260% 260%; animation:holo 6s linear infinite}
@keyframes cardIn{from{transform:rotateY(90deg) scale(.8); opacity:0}}
.idcard .lbl{font:800 10.5px var(--sans); letter-spacing:.16em; text-transform:uppercase; opacity:.85}
.idcard .em{width:84px; height:84px; border-radius:50%; background:rgba(255,255,255,.18); display:grid; place-items:center; margin:12px 0}
.idcard .em svg{width:46px; height:46px}
.idcard h4{font:700 30px/1.05 var(--display)}
.idcard .nm{margin-top:auto; font:600 italic 20px var(--display)}
.idres h3{font:600 italic clamp(28px,3vw,40px) var(--display)}
.idres p{color:var(--ink2); margin-top:10px; max-width:46ch}
.wall-form{display:grid; grid-template-columns:1fr 220px auto; gap:10px}
.wall-form input{font:16px var(--sans); padding:14px 16px; border-radius:14px; border:1.5px solid var(--line); background:var(--bg); color:var(--ink); width:100%}
.wall-form input:focus{outline:none; border-color:var(--g600)}
.wall{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px; margin-top:24px}
.note{border-radius:6px 6px 22px 6px; padding:20px 18px 16px; background:var(--nc); color:var(--tile-ink); transform:rotate(var(--nr)); box-shadow:0 18px 30px -18px rgba(0,0,0,.4); position:relative; animation:noteIn .7s var(--ease) both; transition:transform .4s var(--ease)}@media (hover:hover){
.note:hover{transform:rotate(0) scale(1.03)}}
.note::before{content:""; position:absolute; top:-8px; left:50%; width:18px; height:18px; margin-left:-9px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#fff9,transparent 45%),#D9534F; box-shadow:0 3px 5px rgba(0,0,0,.3)}
.note p{font:500 italic 18px/1.4 var(--display)}
.note small{display:block; margin-top:10px; font-weight:700; font-size:13px; color:var(--tile-ink-2)}
.note .smp{position:absolute; right:12px; bottom:12px; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#7A6B45}
@keyframes noteIn{from{opacity:0; transform:translateY(-40px) rotate(-12deg)}}
@media (max-width:760px){ .play{padding:20px; border-radius:28px} .q-opts{grid-template-columns:1fr} .idres{grid-template-columns:1fr; justify-items:center; text-align:center} .wall-form{grid-template-columns:1fr} }

/* moments gallery */
.moments{overflow:hidden}
.mq-row{overflow:hidden; padding-block:10px; -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq{display:flex; gap:16px; width:max-content; animation:slide 70s linear infinite}
.mq-row.rev .mq{animation-direction:reverse; animation-duration:80s}@media (hover:hover){
.mq-row:hover .mq{animation-play-state:paused}}
.mq figure{margin:0; width:340px; flex:none; border-radius:26px; overflow:hidden; position:relative; line-height:0; transition:transform .6s var(--ease), box-shadow .6s}@media (hover:hover){
.mq figure:hover{transform:translateY(-8px) rotate(-1deg); box-shadow:0 30px 50px -24px rgba(8,41,26,.5)}}
.mq figure svg{width:100%; height:auto; transition:transform 1.4s var(--ease)}@media (hover:hover){
.mq figure:hover svg{transform:scale(1.08)}}
.mq figcaption{position:absolute; left:14px; bottom:14px; line-height:1.3; background:rgba(8,41,26,.86); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); color:#fff; font-size:14px; font-weight:700; padding:7px 14px; border-radius:999px}
.drop{animation:dropF 1.6s ease-in infinite}
@keyframes dropF{0%{transform:translateY(0); opacity:1} 80%{opacity:1} 100%{transform:translateY(70px); opacity:0}}
.rainl{animation:rain 1s linear infinite}
@keyframes rain{from{transform:translateY(-20px)} to{transform:translateY(20px)}}
.wheel{transform-box:fill-box; transform-origin:center; animation:spin 1.6s linear infinite}
.bulbg{animation:bulb 3s ease-in-out infinite}
@keyframes bulb{50%{opacity:.25}}
.growbar{transform-box:fill-box; transform-origin:bottom; animation:gbar 3s var(--ease) infinite alternate}
@keyframes gbar{from{transform:scaleY(.4)}}
@media (max-width:560px){ .mq figure{width:270px} }

/* be there first */
.first-sec{background:#EDE8FB; color:#1E1638; overflow:hidden}
.first-sec .eyebrow,.bf-eye{color:#5B47C4; font:700 13px var(--sans); letter-spacing:.18em; text-transform:uppercase}
.first-sec .eyebrow::before{display:none}
.bf{display:grid; grid-template-columns:1.2fr .8fr; gap:56px; align-items:center}
.bf-h{font:800 clamp(52px,7.4vw,104px)/.96 var(--sans); letter-spacing:-.055em; margin-top:14px}
.bf-h span{display:block; color:#1E1638}
.bf-h .bf-2{color:#5B47C4}
.bf-p{font-size:clamp(18px,1.6vw,21px); line-height:1.7; margin-top:26px; max-width:54ch; color:#2E2650}
.bf-p b{color:#1E1638}
.bf-card{position:relative; border-radius:36px; padding:52px 36px; text-align:center; background:linear-gradient(150deg,#6A55E0,#4B36C2); color:#fff; transform:rotate(2deg); box-shadow:14px 14px 0 #BDB2F5, 0 50px 80px -40px rgba(59,40,170,.7); animation:bfFloat 6s ease-in-out infinite; transition:transform .6s var(--ease)}@media (hover:hover){
.bf-card:hover{transform:rotate(0) scale(1.03); animation-play-state:paused}}
@keyframes bfFloat{50%{transform:rotate(1deg) translateY(-12px)}}
.bf-card b{display:block; font:800 clamp(72px,8vw,120px)/1 var(--sans); letter-spacing:-.05em; font-variant-numeric:tabular-nums}
.bf-card span{display:block; margin-top:18px; font-weight:700; letter-spacing:.2em; font-size:15px}
.bf-card small{display:block; margin-top:10px; font-size:14px; opacity:.85}
.bf-card::before{content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%) 0 0/250% 100%; animation:holo 5s linear infinite; pointer-events:none}
.bf-offer{margin-top:64px; border-top:1px solid #C7BEEA; padding-top:30px}
.bf-offer h3{font:800 clamp(26px,2.6vw,34px) var(--sans); letter-spacing:-.02em; margin-top:8px; color:#1E1638}
.bf-perks{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:26px}
.bf-perk{display:flex; gap:14px; align-items:flex-start; border-radius:22px; padding:20px; background:#fff; box-shadow:0 0 0 1px #DAD3F5; transition:transform .5s var(--ease), box-shadow .5s}@media (hover:hover){
.bf-perk:hover{transform:translateY(-5px); box-shadow:0 0 0 1px #DAD3F5, 0 24px 40px -24px rgba(75,54,194,.5)}}
.bf-perk i{flex:none; width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:#EDE8FB; color:#4B36C2}
.bf-perk i svg{width:22px; height:22px}
.bf-perk b{display:block; color:#1E1638; font-size:16.5px}
.bf-perk span{font-size:14.5px; color:#4A4268}
.bf-ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; align-items:center}
.bf-ctas .btn{background:#4B36C2}
.bf-ctas .btn.ghost{background:transparent; color:#4B36C2}
.bf-ctas .btn.ghost::before{background:#DCD4FA}
.bf-ctas small{color:#4A4268; font-size:13.5px}
@media (max-width:960px){ .bf{grid-template-columns:1fr} .bf-card{max-width:420px} .bf-perks{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .bf-perks{grid-template-columns:1fr} }

/* newsroom */
.breaking{display:flex; align-items:center; background:var(--forest); color:#fff; overflow:hidden; border-radius:999px; margin-bottom:40px}
.bk-tag{flex:none; display:flex; align-items:center; gap:8px; background:var(--sun); color:#2A1D00; font:800 13px var(--sans); letter-spacing:.12em; text-transform:uppercase; padding:12px 18px; border-radius:999px; position:relative; z-index:1}
.bk-tag i{width:8px; height:8px; border-radius:50%; background:#C0392B; animation:ping 1.6s infinite; box-shadow:0 0 0 0 rgba(192,57,43,.7)}
.bk-mq{overflow:hidden; flex:1}
.bk-mq div{display:inline-block; white-space:nowrap; animation:slide 36s linear infinite; padding:12px 0; font-weight:600}
.bk-mq span{margin:0 24px} .bk-mq em{color:var(--mint); font-style:normal}
.nf{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px}
.news-grid{display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:minmax(200px,auto); gap:16px}
.nw{border-radius:28px; padding:28px; background:var(--card); box-shadow:0 0 0 1px var(--line); display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden; animation:rowIn .6s var(--ease) both; transition:transform .5s var(--ease), box-shadow .5s}@media (hover:hover){
.nw:hover{transform:translateY(-6px); box-shadow:0 0 0 1px var(--line), 0 30px 50px -30px rgba(8,41,26,.45)}}
.nw.hide{display:none}
.nw .kind{font:800 12px var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--g600)}
.nw h3{font-size:24px}
.nw p{color:var(--ink2); font-size:15.5px}
.nw .more{margin-top:auto; font-weight:700; color:var(--accent); text-decoration:none}@media (hover:hover){
.nw .more:hover{text-decoration:underline}}
.nw.feat{grid-column:span 2; grid-row:span 2; color:#fff; padding:40px; justify-content:flex-end; background:#0B3020; box-shadow:none; min-height:420px}
.nw.feat::before{content:""; position:absolute; inset:-30%; z-index:0; background:radial-gradient(circle at 20% 30%,#2F7D4F 0,transparent 35%),radial-gradient(circle at 80% 20%,#17566F 0,transparent 35%),radial-gradient(circle at 60% 80%,#A86F00 0,transparent 35%),radial-gradient(circle at 30% 80%,#584A8C 0,transparent 30%); filter:blur(30px); animation:mesh 14s ease-in-out infinite alternate}
@keyframes mesh{to{transform:rotate(25deg) scale(1.15)}}
.nw.feat > *{position:relative}
.nw.feat .kind{color:var(--sun)}
.nw.feat h3{font:700 clamp(30px,3.6vw,48px)/1.05 var(--display); color:#fff; max-width:18ch}
.nw.feat p{color:#D6EADD; font-size:17px; max-width:48ch}
.nw.feat .big-n{position:absolute; top:28px; right:32px; font:800 120px/1 var(--display); color:rgba(255,255,255,.12)}
.nw.press{background:var(--t-lilac); color:var(--tile-ink); box-shadow:none}
.nw.press p{color:#3B3555}
.nw.press .kind{color:var(--purple)}
@media (max-width:960px){ .news-grid{grid-template-columns:1fr 1fr} .nw.feat{grid-column:span 2; grid-row:auto; min-height:340px; padding:28px} }
@media (max-width:560px){ .news-grid{grid-template-columns:1fr} .nw.feat{grid-column:auto} }

/* =================== v7 additions =================== */
/* hero action bar */
.hero-bar{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:44px; padding:20px; border-radius:36px; background:rgba(15,58,37,.72); border:1px solid rgba(141,224,181,.14); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hero-bar .btn{padding:20px 30px; font-size:17px}
.hb-price{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; padding:14px 26px; border-radius:999px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); color:var(--on-dark-2); font-size:17px}
.hb-price b{font:800 38px/1 var(--sans); color:#fff; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.hb-price s{color:var(--on-dark-3)}
.hb-date{margin-left:auto; display:grid; justify-items:end; gap:2px; padding:12px 26px; border-radius:26px; background:var(--t-sun); color:var(--forest); text-align:right}
.hb-date small{font:800 13px var(--sans); letter-spacing:.06em; text-transform:uppercase}
.hb-date b{font:800 23px/1.1 var(--display)}
.hero-bar .hb-play{color:#fff}
@media (max-width:1100px){ .hb-date{margin-left:0} }
@media (max-width:620px){
  .hero-bar{padding:14px; gap:10px; border-radius:26px}
  .hero-bar > *{width:100%; justify-content:center}
  .hb-price{justify-content:center; padding:12px 18px; font-size:15px}
  .hb-price b{font-size:30px}
  .hb-date{justify-items:center; text-align:center}
}

/* mobile floating controls */
.hud-t{display:inline-flex; align-items:baseline; gap:0}
.hud-t em{margin-left:5px}
@media (max-width:700px){
  .hud,.wa{transition:opacity .4s, transform .5s var(--ease)}
  body:not(.past-hero) .hud, body:not(.past-hero) .wa{opacity:0; transform:translateY(24px); pointer-events:none}
  .hud{left:10px; bottom:calc(10px + env(safe-area-inset-bottom,0px)); padding:3px; gap:0; position:fixed}
  .hud svg{width:40px; height:40px}
  .hud-t{position:absolute; inset:0; display:grid; place-items:center; font-size:12px}
  .hud-t .of,.hud-t em{display:none}
  .wa{right:10px; bottom:calc(10px + env(safe-area-inset-bottom,0px)); padding:11px}
  .wa svg{width:24px; height:24px}
  .wa-pop{bottom:calc(68px + env(safe-area-inset-bottom,0px)); right:10px}
  .toast{bottom:calc(66px + env(safe-area-inset-bottom,0px))}
}

/* how it works / today card */
.how{display:grid; grid-template-columns:.85fr 1.15fr; gap:72px; align-items:center}
.phone{justify-self:center; width:min(370px,100%); border-radius:48px; padding:12px; background:var(--forest); box-shadow:0 60px 90px -40px rgba(8,41,26,.6), inset 0 0 0 2px rgba(141,224,181,.15); position:relative}
.phone::before{content:""; position:absolute; top:22px; left:50%; width:70px; height:6px; margin-left:-35px; border-radius:6px; background:rgba(255,255,255,.18)}
.ph-screen{border-radius:38px; background:#F5FAF7; color:#0C2418; padding:38px 18px 18px; display:grid; gap:10px}
.ph-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px}
.ph-eye{font:800 12px var(--sans); letter-spacing:.12em; text-transform:uppercase; color:#2F7D4F}
.ph-top h4{font:800 25px var(--display); margin-top:2px; color:#0C2418}
.ph-ring{position:relative; width:62px; height:62px}
.ph-ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.ph-ring circle{fill:none; stroke-width:6}
.ph-ring .tr{stroke:#E1ECE5} .ph-ring .pr{stroke:#2F7D4F; stroke-linecap:round; stroke-dasharray:157.08; transition:stroke-dashoffset 1.2s var(--ease)}
.ph-ring b{position:absolute; inset:0; display:grid; place-items:center; font:800 15px var(--sans); color:#0C2418}
.ph-item{all:unset; box-sizing:border-box; display:grid; grid-template-columns:44px 1fr auto; gap:12px; align-items:center; padding:13px; border-radius:18px; background:#fff; box-shadow:0 0 0 1px #DCE8E0, 0 6px 14px -10px rgba(8,41,26,.3); cursor:pointer; transition:transform .35s var(--ease), box-shadow .35s, opacity .4s}@media (hover:hover){
button.ph-item:hover{transform:translateY(-2px); box-shadow:0 0 0 1.5px #2F7D4F, 0 12px 22px -12px rgba(8,41,26,.4)}}
button.ph-item:focus-visible{outline:3px solid var(--sun); outline-offset:2px}
.ph-item > i{width:44px; height:44px; border-radius:13px; display:grid; place-items:center; background:var(--ic); color:var(--icc); font:800 18px var(--sans); font-style:normal}
.ph-item > i svg{width:20px; height:20px}
.ph-item b{display:block; font:800 15.5px var(--sans); color:#0C2418}
.ph-item small{display:block; font-size:12.5px; color:#5E7868; line-height:1.35}
.ph-bar{display:block; height:5px; border-radius:5px; background:#EEF2EF; margin-top:7px; overflow:hidden}
.ph-bar i{display:block; height:100%; border-radius:inherit; background:#E2B04C; transition:width 1s var(--ease)}
.tag{font:800 11px var(--sans); letter-spacing:.06em; padding:6px 10px; border-radius:999px; white-space:nowrap; transition:background .3s, color .3s}
.tag.start{background:#E2B04C; color:#2A1D00}
.tag.due{background:#FDE3DE; color:#B0402B}
.tag.later{background:#EEF2EF; color:#8A9A90}
.tag.done{background:#2F7D4F; color:#fff}
.tag.sent{background:#DCEFF6; color:#17566F}
.ph-item.off{opacity:.55; cursor:default}
.ph-item.ok{animation:okPop .5s var(--ease)}
@keyframes okPop{40%{transform:scale(1.04)}}
.ph-score{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:6px; padding:16px 18px; border-radius:20px; background:#0F3A25; color:#fff}
.ph-score small{display:block; font:800 11px var(--sans); letter-spacing:.12em; color:var(--mint)}
.ph-score b{font:800 26px var(--display); font-variant-numeric:tabular-nums}
.ph-score b span{transition:color .3s}
.ph-score .r{display:grid; justify-items:end; font-size:13px; font-weight:600; color:#D6EADD; text-align:right}
.ph-score .r .bump{animation:okPop .6s var(--ease); color:var(--sun)}
.how-list{list-style:none; margin:28px 0 0; padding:0; display:grid; gap:14px}
.how-list li{display:grid; grid-template-columns:30px 1fr; gap:12px; color:var(--ink2); font-size:17px}
.how-list li::before{content:""; width:16px; height:16px; margin-top:5px; border-radius:5px; background:var(--mint); box-shadow:0 0 0 5px color-mix(in srgb,var(--mint) 30%,transparent)}
.how-list b{color:var(--ink)}
.how-try{margin-top:22px; display:inline-flex; gap:10px; align-items:center; font-weight:700; color:var(--accent); background:color-mix(in srgb,var(--mint) 22%,transparent); padding:10px 16px; border-radius:999px; font-size:15px}
@media (max-width:960px){ .how{grid-template-columns:1fr; gap:48px} .how > .rv:last-child{order:-1} }

/* passport stamp strip */
.pstrip{display:grid; grid-template-columns:330px 1fr; gap:20px; margin-top:56px}
.ps-id{border-radius:30px; padding:30px; background:linear-gradient(160deg,#1C6B43,#0B3420); color:#fff; display:flex; flex-direction:column; gap:12px; box-shadow:0 40px 60px -36px rgba(8,41,26,.6); position:relative; overflow:hidden}
.ps-id::after{content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:color-dodge; opacity:.25; background:linear-gradient(115deg,transparent 30%,rgba(141,224,181,.6) 45%,rgba(242,184,75,.6) 55%,transparent 70%) 0 0/260% 260%; animation:holo 8s linear infinite}
.ps-id .top{display:flex; align-items:center; gap:12px; font:800 14px var(--sans); letter-spacing:.14em}
.ps-id .top .logo{width:40px; height:40px; background-color:#fff; border-radius:50%}
.ps-id .ini{width:92px; height:92px; border-radius:20px; background:#DCEFF6; color:#0F3A25; display:grid; place-items:center; font:700 40px var(--display); margin-top:6px}
.ps-id .nm{font:800 34px/1.05 var(--display)}
.ps-id .chip3{align-self:flex-start; background:var(--mint); color:#0B3420; font-weight:800; font-size:15px; border-radius:999px; padding:6px 16px}
.ps-id dl{display:grid; grid-template-columns:90px 1fr; gap:6px 10px; margin:6px 0 0; font-size:15px}
.ps-id dt{color:var(--on-dark-2)} .ps-id dd{margin:0; font-weight:700}
.ps-id .mrz{color:rgba(255,255,255,.55); font-size:12px; margin-top:auto}
.ps-st{border-radius:30px; padding:34px; background:#fff; color:#0C2418; box-shadow:0 0 0 1px #D6E6DC, 0 40px 60px -40px rgba(8,41,26,.35)}
.ps-st .eyebrow{color:#2F7D4F}
.ps-st h3{font:800 clamp(24px,2.6vw,32px)/1.1 var(--display); color:#0C2418}
.ps-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:26px}
.ps-grid button{all:unset; box-sizing:border-box; aspect-ratio:1; border-radius:50%; display:grid; place-content:center; text-align:center; border:2.5px dashed #D3DCD6; color:#B5C2BA; cursor:pointer; transition:transform .4s var(--ease), background .3s}
.ps-grid button small{font:800 11px var(--sans); letter-spacing:.08em}
.ps-grid button b{font:700 clamp(20px,2.4vw,30px)/1 var(--display)}@media (hover:hover){
.ps-grid button:hover:not(.on):not(.ps-hero){transform:scale(1.08) rotate(-6deg); border-color:#9BB3A5}}
.ps-grid button:focus-visible{outline:3px solid var(--sun); outline-offset:3px}
.ps-grid button.on{border-color:var(--c); color:var(--c); background:color-mix(in srgb,var(--c) 7%,transparent); transform:rotate(var(--r,0deg)); cursor:default}
.ps-grid button.on.new{animation:thunk .55s var(--ease) both}
.ps-grid .ps-hero{border:2.5px solid #E2B04C; color:#C98E1C; font:800 12px/1.15 var(--sans); letter-spacing:.06em; cursor:default}
.ps-grid .ps-hero.lit{background:radial-gradient(circle,#FFF3D1,#F2B84B); color:#5A3E00; animation:thunk .7s var(--ease) both, heroGlow 2s ease-in-out infinite alternate .7s}
@keyframes heroGlow{to{box-shadow:0 0 0 8px rgba(242,184,75,.25), 0 0 30px rgba(242,184,75,.6)}}
.ps-st .note2{margin-top:22px; color:#4C6556; font-size:15.5px; border-top:1px solid #E3ECE6; padding-top:16px}
.ps-st .note2 b{color:#0C2418}
.in .ps-grid button.on{animation:thunk .55s var(--ease) both; animation-delay:calc(var(--n)*110ms + .3s)}
@media (max-width:900px){ .pstrip{grid-template-columns:1fr} .ps-id{max-width:380px} }
@media (max-width:520px){ .ps-grid{grid-template-columns:repeat(4,1fr); gap:10px} .ps-st{padding:22px} }

/* key dates */
.kd{margin-top:28px; border-radius:36px; padding:38px 40px; background:var(--card); box-shadow:0 0 0 1px var(--line), 0 40px 70px -50px rgba(8,41,26,.4)}
.kd .eyebrow{margin-bottom:10px}
.kd-h{font:800 clamp(28px,3.2vw,40px) var(--display)}
.kd-line{list-style:none; margin:36px 0 0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); position:relative}
.kd-line::before{content:""; position:absolute; left:2%; right:2%; top:28px; height:4px; border-radius:4px; background:linear-gradient(90deg,#E2B04C,#2F7D4F 35%,#14532D 50%,#17566F 72%,#584A8C); transform-origin:left; transition:transform 1.6s var(--ease) .2s}
.kd.armed:not(.in) .kd-line::before{transform:scaleX(0)}
.kd-line li{position:relative; display:grid; justify-items:center; text-align:center; gap:4px; padding:0 6px}
.kd-dot{width:58px; height:58px; border-radius:50%; display:grid; place-items:center; background:var(--c); color:#fff; font:800 17px var(--sans); box-shadow:0 0 0 7px var(--card), 0 0 0 8.5px var(--line), 0 12px 20px -8px rgba(0,0,0,.3); margin-bottom:10px; transition:transform .7s var(--ease); transition-delay:calc(var(--n)*180ms + .3s)}
.kd.armed:not(.in) .kd-dot{transform:scale(0)}@media (hover:hover){
.kd-line li:hover .kd-dot{transform:translateY(-4px) scale(1.06); transition-delay:0s}}
.kd-line b{font:800 17px var(--sans); color:var(--ink)}
.kd-line small{font-size:14.5px; color:var(--muted)}
.kd-note{margin-top:30px; border-radius:16px; padding:15px 20px; background:var(--t-sun); color:var(--tile-ink); font-size:16px; position:relative; overflow:hidden}
.kd-note::after{content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%) 0 0/250% 100%; animation:holo 4s linear infinite; pointer-events:none}
@media (max-width:760px){
  .kd{padding:26px 22px}
  .kd-line{grid-template-columns:1fr; gap:22px}
  .kd-line::before{left:27px; right:auto; top:10px; bottom:10px; width:4px; height:auto; background:linear-gradient(180deg,#E2B04C,#2F7D4F 35%,#14532D 50%,#17566F 72%,#584A8C); transform-origin:top}
  .kd.armed:not(.in) .kd-line::before{transform:scaleY(0)}
  .kd-line li{grid-template-columns:58px 1fr; justify-items:start; text-align:left; column-gap:16px; row-gap:0; padding:0}
  .kd-dot{grid-row:span 2; margin:0}
  .kd-line b{align-self:end}
}

/* founding ticket */
.ticket{display:grid; grid-template-columns:1fr 320px; margin-top:64px; border-radius:32px; filter:drop-shadow(0 40px 50px rgba(59,40,170,.22)); transition:transform .6s var(--ease)}@media (hover:hover){
.ticket:hover{transform:rotate(-.6deg)}}
.tk-main{background:var(--t-sun); color:var(--tile-ink); border-radius:32px 0 0 32px; padding:44px; border-right:3px dashed rgba(8,41,26,.28); position:relative}
.tk-eye{font:800 13px var(--sans); letter-spacing:.16em; text-transform:uppercase; color:#A86F00}
.tk-main h3{font:800 clamp(30px,3.6vw,46px)/1.06 var(--display); margin-top:12px; color:#0C2418}
.tk-main h3 em{font-style:italic; font-weight:500}
.tk-main p{margin-top:14px; color:#4A4630; max-width:52ch}
.tk-chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.tk-chips span{display:inline-flex; gap:8px; align-items:center; background:#fff; color:#14532D; font-weight:800; font-size:14.5px; padding:9px 16px; border-radius:999px; transition:transform .4s var(--ease)}
.tk-chips span::before{content:"✓"}@media (hover:hover){
.tk-chips span:hover{transform:translateY(-3px)}}
.tk-stub{background:linear-gradient(170deg,#14532D,#082E1B); color:#fff; border-radius:0 32px 32px 0; display:grid; place-content:center; justify-items:center; text-align:center; gap:10px; padding:36px 24px; position:relative; transition:transform .6s var(--ease); transform-origin:left center}@media (hover:hover){
.ticket:hover .tk-stub{transform:translateX(10px) rotate(3deg)}}
.tk-stub::before,.tk-stub::after{content:""; position:absolute; left:-17px; width:32px; height:32px; border-radius:50%; background:#EDE8FB}
.tk-stub::before{top:-16px} .tk-stub::after{bottom:-16px}
.tk-ring{position:relative; width:148px; height:148px; border-radius:50%; display:grid; place-content:center; text-align:center; isolation:isolate; overflow:hidden}
.tk-ring::before{content:""; position:absolute; inset:0; z-index:-2; background:conic-gradient(#C98E1C,#FFE7A6,#E2B04C,#8A5A00,#F7D27A,#C98E1C); animation:spin 6s linear infinite}
.tk-ring::after{content:""; position:absolute; inset:11px; z-index:-1; border-radius:50%; background:#0F3A25}
.tk-ring span{font:800 15px/1.25 var(--sans); letter-spacing:.08em; color:#F2C566}
.tk-seat{font:800 30px var(--display); margin-top:8px}
.tk-seat span{display:inline-block; font-variant-numeric:tabular-nums; min-width:3.1ch}
.tk-stub small{color:var(--on-dark-2); font-size:14px}
@media (max-width:820px){
  .ticket{grid-template-columns:1fr}
  .tk-main{border-radius:28px 28px 0 0; border-right:0; border-bottom:3px dashed rgba(8,41,26,.28); padding:28px}
  .tk-stub{border-radius:0 0 28px 28px; transform-origin:top center}@media (hover:hover){
  .ticket:hover .tk-stub{transform:none}}
  .tk-stub::before,.tk-stub::after{display:none}
}

/* value stack */
.vstack{margin-top:72px}
.vs-title{font:800 clamp(36px,5.6vw,76px)/1 var(--sans); letter-spacing:-.05em; margin-top:12px; color:#1E1638}
.vs-big{background:linear-gradient(100deg,#4B36C2,#7E62FF 50%,#4B36C2) 0 0/200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:goldMove 5s linear infinite}
.vs-pay{display:inline-block; background:var(--sun); color:#2A1D00; padding:0 .25em; border-radius:.18em; transform:rotate(-3deg); box-shadow:.06em .06em 0 #1E1638}
.vs-grid{display:grid; grid-template-columns:1.35fr .65fr; gap:24px; margin-top:36px; align-items:start}
.vs-list{list-style:none; margin:0; padding:0; display:grid; gap:10px; counter-reset:v}
.vs-list li{display:grid; grid-template-columns:46px 1fr auto; gap:16px; align-items:center; padding:18px 20px; border-radius:22px; background:#fff; box-shadow:0 0 0 1px #DAD3F5; transition:opacity .6s var(--ease), transform .7s var(--ease), box-shadow .5s}@media (hover:hover){
.vs-list li:hover{box-shadow:0 0 0 1.5px #6A55E0, 0 20px 30px -22px rgba(75,54,194,.6)}}
.vs-list li.vs-wait{opacity:0; transform:translateX(-36px)}
.vs-n{width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:#EDE8FB; color:#4B36C2; font:800 18px var(--sans)}
.vs-list b{display:block; color:#1E1638; font-size:17px}
.vs-list span:not(.vs-n){display:block; font-size:14.5px; color:#4A4268; margin-top:2px; line-height:1.5}
.vs-list em{font:800 22px var(--sans); font-style:normal; color:#4B36C2; white-space:nowrap; font-variant-numeric:tabular-nums}
.vs-list li.vs-pop em{animation:worthPop .7s var(--ease)}
@keyframes worthPop{0%{transform:scale(.4); color:#E2A93B} 60%{transform:scale(1.25); color:#E2A93B} 100%{transform:none}}
.vs-total{position:sticky; top:calc(var(--top) + 84px); border-radius:32px; padding:32px 28px; background:linear-gradient(150deg,#6A55E0,#3E2BA8); color:#fff; display:grid; gap:14px; box-shadow:12px 12px 0 #BDB2F5, 0 50px 80px -40px rgba(59,40,170,.7); overflow:hidden; isolation:isolate}
.vs-total::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%) 0 0/250% 100%; animation:holo 5s linear infinite}
.vs-total > small{font:800 13px var(--sans); letter-spacing:.16em; text-transform:uppercase; opacity:.85}
.vs-sum{font:800 clamp(52px,5.4vw,76px)/1 var(--sans); letter-spacing:-.05em; font-variant-numeric:tabular-nums}
.vs-sum.done{animation:okPop .7s var(--ease)}
.vs-meter{height:10px; border-radius:10px; background:rgba(255,255,255,.18); overflow:hidden}
.vs-meter i{display:block; height:100%; width:100%; border-radius:inherit; background:linear-gradient(90deg,#F7D27A,var(--sun)); transition:width .6s var(--ease)}
.vs-you{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; padding:16px 18px; border-radius:20px; background:rgba(255,255,255,.12)}
.vs-you small{width:100%; font:800 12px var(--sans); letter-spacing:.14em; text-transform:uppercase; opacity:.85}
.vs-you b{font:800 44px/1 var(--sans); color:var(--sun); letter-spacing:-.03em}
.vs-you span{font-size:14px; opacity:.85}
.vs-x{font-size:16px} .vs-x b{color:var(--sun); font-size:22px}
.vs-total .btn{width:100%}
.vs-total .btn.ghost{color:#fff}
.vs-mcta{display:none}
.vs-fine{margin-top:16px; font-size:13px; color:#4A4268}
@media (max-width:900px){
  .vs-grid{grid-template-columns:1fr}
  .vs-total{order:-1; top:calc(var(--top) + 66px); z-index:6; padding:16px 18px; grid-template-columns:1fr auto; gap:6px 14px; align-items:center; border-radius:22px; box-shadow:6px 6px 0 #BDB2F5}
  .vs-total > small{grid-column:1/-1}
  .vs-sum{font-size:40px}
  .vs-meter{grid-column:1/-1; height:7px; grid-row:3}
  .vs-you{padding:8px 12px; display:grid; gap:0; justify-items:end}
  .vs-you small{width:auto; font-size:10px}
  .vs-you b{font-size:26px} .vs-you span{display:none}
  .vs-total .vs-x,.vs-total .btn{display:none}
  .vs-mcta{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
  .vs-list li{grid-template-columns:38px 1fr; padding:16px}
  .vs-n{width:38px; height:38px}
  .vs-list em{grid-column:2; font-size:19px}
}

/* register: offer box, tabs, student form */
.reg-offer{margin-top:28px; display:grid; gap:6px; max-width:440px; padding:26px 28px; border-radius:26px; background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03)); border:1px solid rgba(242,184,75,.35); position:relative; overflow:hidden}
.reg-offer::after{content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 35%,rgba(242,184,75,.16) 50%,transparent 65%) 0 0/250% 100%; animation:holo 6s linear infinite; pointer-events:none}
.ro-eye{font:800 12.5px var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--sun)}
.ro-t{font:700 22px var(--display); color:#fff}
.ro-p{display:flex; align-items:baseline; gap:16px; margin-top:4px}
.ro-p b{font:800 72px/1 var(--display); color:var(--sun); letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.ro-p s{font:600 26px var(--display); color:var(--on-dark-3); text-decoration-color:#F26B5B; text-decoration-thickness:3px}
.ro-badge{justify-self:start; margin-top:6px; background:var(--mint); color:var(--forest); font-weight:800; font-size:14px; padding:6px 14px; border-radius:999px; animation:bob 4s ease-in-out infinite; --rot:-2deg}
.reg-offer p{color:var(--on-dark-2); font-size:15.5px; margin-top:8px}
.reg-forms{display:grid; gap:14px}
.reg-tabs{display:grid; grid-template-columns:1fr 1fr; padding:6px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); position:relative}
.reg-tabs::before{content:""; position:absolute; top:6px; bottom:6px; left:6px; width:calc(50% - 6px); border-radius:999px; background:var(--sun); transition:transform .5s var(--ease)}
.reg-tabs[data-on="student"]::before{transform:translateX(100%)}
.reg-tabs button{all:unset; position:relative; z-index:1; cursor:pointer; text-align:center; padding:13px 10px; border-radius:999px; font:800 15px var(--sans); color:var(--on-dark-2); transition:color .3s}
.reg-tabs button[aria-selected="true"]{color:#2A1D00}
.reg-tabs button:focus-visible{outline:3px solid var(--mint)}
.three{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:16px}
.fs-l{margin:6px 0 -4px; font:800 12.5px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:#2F7D4F; display:flex; align-items:center; gap:10px}
.fs-l::after{content:""; flex:1; height:1px; background:#D3E4D9}
.fs-l em{font-style:normal; text-transform:none; letter-spacing:0; font-weight:600; color:#5E7868}
.hint{margin:-8px 0 0; font-size:13px; color:#5E7868; display:flex; gap:8px; align-items:flex-start}
.hint::before{content:""; flex:none; width:16px; height:16px; margin-top:2px; border-radius:50%; background:#25D366 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/10px no-repeat}
.req-note{font-size:13px; color:#5E7868; margin:-4px 0 0}
.consent{display:grid; grid-template-columns:22px 1fr; gap:10px; font-size:14px; color:#3A4E43; line-height:1.5; cursor:pointer}
.consent input{width:20px; height:20px; margin:1px 0 0; accent-color:#2F7D4F}
.fl input[aria-invalid="true"],.fl select[aria-invalid="true"]{border-color:#D9826F}
@media (max-width:480px){ .three{grid-template-columns:1fr 1fr} .three > :first-child{grid-column:1/-1} .reg-tabs button{font-size:13.5px} .ro-p b{font-size:58px} }

.rv.armed{transition:opacity 1s var(--ease), transform 1s var(--ease)!important; transition-delay:var(--d,0s)!important}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important; transition:none!important}
  .js .hero h1 .w > span,.js .fade-up,.js .hero-logo .disc{transform:none; opacity:1}
  .js .squig path{stroke-dashoffset:0}
}

[hidden]{display:none!important}
/* =================== v8: multi-page + Hindi =================== */
:root{
  --display:"Fraunces","Tiro Devanagari Hindi", Georgia, "Times New Roman", serif;
  --sans:"Bricolage Grotesque","Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", sans-serif;
}
x-en,x-hi{display:inline}
x-hi{display:none}
html[lang="hi"] x-en{display:none}
html[lang="hi"] x-hi{display:inline}
html[lang="hi"] body{line-height:1.8}
html[lang="hi"] h1,html[lang="hi"] h2,html[lang="hi"] h3,html[lang="hi"] h4,
html[lang="hi"] .bf-h,html[lang="hi"] .vs-title,html[lang="hi"] .hero h1,html[lang="hi"] .tk-main h3,
html[lang="hi"] .aud-panel h3,html[lang="hi"] .q-text,html[lang="hi"] .cert-kind,html[lang="hi"] .lv-card h3{line-height:1.32; letter-spacing:0}
html[lang="hi"] em{font-style:normal}
html[lang="hi"] .eyebrow,html[lang="hi"] .tk-eye,html[lang="hi"] .bf-eye,html[lang="hi"] .ro-eye,html[lang="hi"] .ph-eye,
html[lang="hi"] .fs-l,html[lang="hi"] .kd-line b,html[lang="hi"] .vs-total > small,html[lang="hi"] .hb-date small,
html[lang="hi"] .lv-card .cls,html[lang="hi"] .done-pass .seat,html[lang="hi"] .done-pass .top,html[lang="hi"] .crumb,html[lang="hi"] .ph-score small,html[lang="hi"] .vs-you small,html[lang="hi"] .grp,html[lang="hi"] .q-meta,html[lang="hi"] .announce .k{letter-spacing:.02em}
html[lang="hi"] .hero h1{font-size:clamp(40px,6vw,88px)}
html[lang="hi"] .bf-h{font-size:clamp(44px,6.4vw,92px)}
html[lang="hi"] .vs-title{font-size:clamp(32px,4.8vw,64px)}

/* nav: language button + fewer links */
.lang-btn{all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px; font:700 14.5px var(--sans); box-shadow:inset 0 0 0 1.5px currentColor; transition:background .3s, color .3s; white-space:nowrap}@media (hover:hover){
.lang-btn:hover{background:color-mix(in srgb,currentColor 12%,transparent)}}
.lang-btn:focus-visible{outline:3px solid var(--mint); outline-offset:2px}
.lang-btn svg{width:17px; height:17px}
.nav .wrap{gap:18px}
.nav .lang-btn{margin-left:4px}
.nav.solid .lang-btn{color:var(--accent)}
.nav:not(.solid) .lang-btn{color:#fff}
.links{gap:26px}
.links a.on{color:inherit}
.links a.on::after{transform:scaleX(1)}
.m-lang{display:none}
@media (max-width:1080px){
  .nav .wrap > .lang-btn{margin-left:auto}
  .menu{margin-left:0}
}
@media (max-width:520px){ .nav .wrap > .lang-btn{padding:8px 11px; font-size:13.5px} .nav .wrap > .lang-btn svg{display:none} }

/* page hero for inner pages */
.phero{background:var(--forest); color:var(--on-dark); margin-top:-76px; padding:150px 0 90px; position:relative; overflow:hidden; isolation:isolate}
.phero h1{font:800 clamp(42px,6.2vw,88px)/1 var(--display); color:#fff; letter-spacing:-.03em; max-width:16ch}
.phero h1 em{font-style:italic; font-weight:500; color:var(--mint)}
.phero .sub{font-size:clamp(18px,1.6vw,21px); color:var(--on-dark-2); max-width:52ch; margin-top:24px}
.phero .cta-row{margin-top:32px}
.phero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center}
.crumb{display:inline-flex; gap:8px; align-items:center; font:700 13px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--mint); margin-bottom:20px}
.crumb a{color:var(--on-dark-2); text-decoration:none}@media (hover:hover){
.crumb a:hover{color:#fff}}
@media (max-width:900px){ .phero{padding:120px 0 64px} .phero-grid{grid-template-columns:1fr; gap:36px} }

/* hero headline: line reveal */
.hero h1{font-size:clamp(44px,6.2vw,92px)}
.hero h1 .ln{display:block; overflow:hidden; padding-bottom:.24em; margin-bottom:-.2em}
.hero h1 .ln > span{display:inline-block}
.js .hero h1 .ln > span{transform:translateY(110%)}
.loaded .hero h1 .ln > span{transform:none; transition:transform 1.2s var(--ease)}
.loaded .hero h1 .ln:nth-child(2) > span{transition-delay:.15s}
.hero h1 .ln em{position:relative}
.hero .cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}

/* section link (go deeper) */
.more-link{display:inline-flex; align-items:center; gap:8px; margin-top:28px; font-weight:800; color:var(--accent); text-decoration:none; border-bottom:2px solid color-mix(in srgb,var(--accent) 35%,transparent); padding-bottom:2px; transition:gap .3s var(--ease), border-color .3s}@media (hover:hover){
.more-link:hover{gap:14px; border-color:var(--accent)}}
.dark .more-link{color:var(--mint); border-color:rgba(141,224,181,.35)}
.sec-cta{display:flex; justify-content:center; margin-top:36px}

/* compact levels row */
.lvrow{display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:48px}
.lvc{border-radius:20px; padding:16px 14px; background:var(--t); color:var(--tile-ink); display:grid; gap:2px; position:relative; overflow:hidden}
.lvc small{font:800 11.5px var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--c2)}
.lvc b{font:600 italic 22px/1.15 var(--display)}
.lvc span{font:800 14px var(--sans); color:var(--c2)}
.lvc::after{content:attr(data-n); position:absolute; right:8px; top:-12px; font:800 64px/1 var(--display); color:transparent; -webkit-text-stroke:1.5px var(--c2); opacity:.25}
html[lang="hi"] .lvc b{font-style:normal}
@media (max-width:900px){ .lvrow{grid-template-columns:repeat(3,1fr)} }
@media (max-width:480px){ .lvrow{grid-template-columns:1fr 1fr} }

/* levels grid (parents page) */
.lv-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.lv-grid .lv-card{min-height:270px}
@media (max-width:900px){ .lv-grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .lv-grid{grid-template-columns:1fr} .lv-grid .lv-card{min-height:220px} }

/* what-you-get tabs */
.wyg-tabs{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:34px}
.wyg-panel[hidden]{display:none}
.wyg-panel{animation:rowIn .5s var(--ease)}

/* rank teaser on home */
.rk-teaser{display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center}
.aw-chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.aw-chips span{display:inline-flex; gap:8px; align-items:center; border-radius:999px; padding:9px 16px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); color:#fff; font-weight:700; font-size:14.5px}
.aw-chips span:first-child{background:var(--sun); color:#2A1D00; border:0}
.demo-note{font-size:13px; color:var(--on-dark-3); margin-top:14px; text-align:center}
@media (max-width:900px){ .rk-teaser{grid-template-columns:1fr} }

/* trust */
.trust-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:40px; align-items:start}
.fnote{border-radius:32px; padding:36px; background:var(--t-sun); color:var(--tile-ink); position:relative; overflow:hidden}
.fnote::before{content:"“"; position:absolute; right:22px; top:-30px; font:800 180px/1 var(--display); color:rgba(168,111,0,.16)}
.fnote .k{font:800 13px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:#7A5300}
.fnote blockquote{margin:14px 0 0; font:500 italic clamp(21px,2.2vw,27px)/1.38 var(--display); color:var(--tile-ink)}
html[lang="hi"] .fnote blockquote{font-style:normal}
.fnote p{margin-top:16px; color:#3F3A2A}
.fnote .sig2{margin-top:20px; display:flex; align-items:center; gap:12px}
.fnote .sig2 .logo{width:46px; height:46px; background-color:#fff; border-radius:50%}
.fnote .sig2 b{display:block; font:700 18px var(--display); color:var(--g800)}
.fnote .sig2 small{color:#6B5A33}
.pilot{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px}
.pilot span{display:inline-flex; align-items:center; gap:8px; border-radius:999px; padding:8px 14px; background:var(--card); box-shadow:0 0 0 1px var(--line); font-weight:700; font-size:14px; color:var(--ink)}
.pilot span i{width:8px; height:8px; border-radius:50%; background:var(--g600); box-shadow:0 0 0 0 rgba(47,125,79,.6); animation:ping 2s infinite}
@media (max-width:960px){ .trust-grid{grid-template-columns:1fr} }

/* FAQ */
.faq{display:grid; gap:10px}
.faq details{border-radius:20px; background:var(--card); box-shadow:0 0 0 1px var(--line); padding:0 22px; transition:box-shadow .3s}
.faq details[open]{box-shadow:0 0 0 1.5px var(--g600), 0 20px 30px -24px rgba(8,41,26,.4)}
.faq summary{list-style:none; cursor:pointer; padding:19px 0; font-weight:700; font-size:17px; display:flex; justify-content:space-between; align-items:center; gap:16px; color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font:500 22px/1 var(--sans); color:var(--g600); background:color-mix(in srgb,var(--mint) 25%,transparent); transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:focus-visible{outline:3px solid var(--mint); outline-offset:3px; border-radius:8px}
.faq details > div{padding:0 0 20px; color:var(--ink2); line-height:1.65}
.faq details[open] > div{animation:rowIn .4s var(--ease)}
.faq-2{grid-template-columns:1fr 1fr; align-items:start}
@media (max-width:860px){ .faq-2{grid-template-columns:1fr} }

/* safety */
.safe{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.safe div{border-radius:24px; padding:24px; background:var(--card); box-shadow:0 0 0 1px var(--line)}
.safe .ic{width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:var(--t-mint); color:var(--g800); margin-bottom:14px}
.safe .ic svg{width:24px; height:24px}
.safe b{display:block; font-size:17px}
.safe p{color:var(--ink2); font-size:15px; margin-top:6px; line-height:1.55}
@media (max-width:900px){ .safe{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .safe{grid-template-columns:1fr} }

/* stepper form */
.stepbar{display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.stepbar span{font:800 12.5px var(--sans); text-align:center; padding:10px 6px; border-radius:12px; background:#EEF4F0; color:#5E7868; transition:background .4s, color .4s}
.stepbar span.on{background:#14532D; color:#fff}
.stepbar span.done{background:#D7EFE1; color:#14532D}
fieldset.fstep{border:0; margin:0; padding:0; display:grid; gap:16px; min-width:0}
fieldset.fstep:not([hidden]){animation:slideIn .5s var(--ease)}
.step-nav{display:flex; gap:10px; justify-content:space-between; align-items:center}
.step-nav .btn{flex:1}
.step-nav .back{all:unset; cursor:pointer; font-weight:700; color:#2F7D4F; padding:12px 8px}
.step-nav .back:focus-visible{outline:3px solid var(--mint); border-radius:8px}
.summary{border-radius:16px; background:#F3F9F5; padding:14px 16px; font-size:14px; color:#3A4E43; display:grid; gap:2px}
.summary b{color:#13231A}

/* success celebration */
.done-card{background:#fff; color:#13231A; border-radius:30px; padding:32px 26px; display:grid; gap:16px; justify-items:center; text-align:center; box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
.done-card h3{font:800 clamp(26px,3vw,34px)/1.15 var(--display); color:#0C2418}
.done-card > p{color:#3A4E43; max-width:42ch}
.done-pass{width:min(320px,100%); border-radius:24px; padding:22px; background:linear-gradient(160deg,#1C6B43,#08291A); color:#fff; text-align:left; display:grid; gap:6px; position:relative; overflow:hidden; animation:cardIn 1.1s var(--ease); box-shadow:0 30px 50px -24px rgba(8,41,26,.6)}
.done-pass::after{content:""; position:absolute; inset:0; mix-blend-mode:color-dodge; opacity:.45; background:linear-gradient(115deg,transparent 25%,rgba(141,224,181,.6) 40%,rgba(242,184,75,.6) 50%,rgba(169,156,235,.6) 60%,transparent 75%) 0 0/260% 260%; animation:holo 6s linear infinite; pointer-events:none}
.done-pass .top{display:flex; align-items:center; gap:10px; font:800 12px/1.2 var(--sans); letter-spacing:.12em}
.done-pass .top .logo{width:34px; height:34px; background-color:#fff; border-radius:50%}
.done-pass .nm{font:700 26px/1.15 var(--display); margin-top:8px}
.done-pass .meta{font-size:13.5px; color:var(--on-dark-2)}
.done-pass .seat{margin-top:10px; font:800 13px var(--sans); letter-spacing:.1em; color:var(--mint)}
.done-pass .seat b{display:block; font:800 26px var(--display); letter-spacing:0; color:var(--sun)}
.done-pass.school{background:linear-gradient(160deg,#FFE7A6,#E2A93B); color:#2A1D00}
.done-pass.school .meta{color:#5A3E00} .done-pass.school .seat{color:#5A3E00} .done-pass.school .seat b{color:#14532D}
.done-actions{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.btn.wa-share{background:#25D366; color:#052812}
.btn.wa-share::before{background:#1EBE5A}
.done-again{all:unset; cursor:pointer; color:#2F7D4F; font-weight:700; text-decoration:underline; text-underline-offset:3px}
.done-note{font-size:12.5px; color:#5E7868}

/* play page hunt hint */
.hunt-intro{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:26px}
.hunt-intro .pill{background:rgba(242,184,75,.14); color:var(--sun); border:1px solid rgba(242,184,75,.35)}

/* footer tweaks */
.foot nav{grid-template-columns:repeat(2,auto)}
.foot .f-lang{margin-top:14px; color:var(--on-dark-2)}

/* mobile floating: inner pages also wait for scroll */

.hud{transition:opacity .4s, transform .5s var(--ease)}
body:not(.past-hero) .hud{opacity:0; transform:translateY(24px); pointer-events:none}

/* =================== v9: header holders, iPhone comfort, Brain Blast, blog =================== */

/* ---------- iPhone / touch comfort ---------- */
html{-webkit-tap-highlight-color:transparent}
a,button,summary,label,select,input,.hcard,.ph-item{touch-action:manipulation}
.wrap{padding-left:max(24px, env(safe-area-inset-left, 0px)); padding-right:max(24px, env(safe-area-inset-right, 0px))}
@media (max-width:520px){ .wrap{padding-left:max(18px, env(safe-area-inset-left, 0px)); padding-right:max(18px, env(safe-area-inset-right, 0px))} }
input,select,textarea{font-size:16px} /* stops iOS zooming into fields */
.rk-search{font-size:16px}
.nav.solid{background:rgba(243,249,245,.9); background:color-mix(in srgb,var(--bg) 86%,transparent)}
footer{padding-bottom:calc(40px + env(safe-area-inset-bottom, 0px))}
.toast{bottom:calc(20px + env(safe-area-inset-bottom, 0px))}
@supports (height:100dvh){ dialog.hero-dlg{max-height:calc(100dvh - 32px)} }
dialog.hero-dlg{overflow:auto; position:fixed}
img,svg{-webkit-user-drag:none}

/* ---------- header holders: stamp hunt + WhatsApp (never cover content) ---------- */
.hd-hunt,.hd-wa{all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex:none; transition:transform .3s var(--ease), background .3s, color .3s, box-shadow .3s}
.hd-hunt{gap:6px; height:42px; padding:0 12px 0 4px; border-radius:999px; font:800 14px var(--sans); box-shadow:inset 0 0 0 1.5px currentColor}
.hd-hunt svg{width:34px; height:34px; transform:rotate(-90deg)}
.hd-hunt circle{fill:none; stroke-width:4}
.hd-hunt .tr{stroke:currentColor; opacity:.2}
.hd-hunt .pr{stroke:var(--sun); stroke-dasharray:113.1; stroke-dashoffset:113.1; stroke-linecap:round; transition:stroke-dashoffset .8s var(--ease)}
.hd-hunt text{font:900 15px var(--sans); fill:var(--sun); transform:rotate(90deg); transform-origin:22px 22px; opacity:0; transition:opacity .4s}
.hd-hunt.done{background:var(--sun); color:#2A1D00; box-shadow:0 8px 20px -8px rgba(242,184,75,.8)}
.hd-hunt.done .pr{stroke:#2A1D00} .hd-hunt.done .tr{stroke:#2A1D00}
.hd-hunt.done text{opacity:1; fill:#2A1D00}
.hd-hunt.bump{animation:okPop .6s var(--ease)}
.hd-wa{width:42px; height:42px; border-radius:50%; background:#25D366; color:#052812; box-shadow:0 8px 18px -8px rgba(37,211,102,.8)}
.hd-wa svg{width:22px; height:22px}
.hd-hunt:focus-visible,.hd-wa:focus-visible{outline:3px solid var(--mint); outline-offset:2px}
.nav:not(.solid) .hd-hunt{color:#fff}
.nav.solid .hd-hunt:not(.done){color:var(--accent)}
.nav .wrap{gap:14px}
.nav .wrap > .hd-hunt{margin-left:auto}
.links{margin-left:auto}
.nav .wrap > .links + .hd-hunt{margin-left:0}
@media (max-width:1240px){
  .links{position:fixed; inset:0; z-index:2; flex-direction:column; justify-content:center; gap:4px; padding:80px 32px 40px; background:var(--forest); clip-path:circle(0 at calc(100% - 44px) 40px); transition:clip-path .8s var(--ease); visibility:hidden}
  .links.open{clip-path:circle(150% at calc(100% - 44px) 40px); visibility:visible}
  .links a,.nav:not(.solid) .links a,.nav.solid .links a{color:#fff; font:600 clamp(28px,7vw,40px)/1.25 var(--display); opacity:0; transform:translateY(20px); transition:opacity .5s, transform .6s var(--ease)}
  .links.open a{opacity:1; transform:none; transition-delay:calc(var(--i)*50ms + .2s)}
  .links a::after{display:none}
  .menu{display:block; margin-left:0}
  .menu[aria-expanded="true"]{color:#fff}
  .nav .wrap > .hd-hunt{margin-left:auto}
}
@media (max-width:820px){ .nav .wrap > .btn.sun{display:none} }
@media (max-width:520px){
  .nav .wrap{gap:8px}
  .brand span:last-child{display:none}
  .hd-hunt{height:38px; padding:0 9px 0 3px; font-size:13px}
  .hd-hunt svg{width:30px; height:30px}
  .hd-wa{width:38px; height:38px}
  .nav .wrap > .lang-btn{padding:8px 10px}
}
@media (max-width:350px){ .hd-hunt .hd-t{display:none} .hd-hunt{padding:0 3px} }
/* the WhatsApp panel drops down from the header */
.wa-pop{top:calc(var(--top) + 74px) !important; bottom:auto !important; right:max(12px, env(safe-area-inset-right, 0px)) !important; transform-origin:top right; max-height:calc(100vh - 110px); overflow:auto; z-index:140}
/* retire the old floating buttons */
.hud,.wa{display:none !important}

/* ---------- hunt dialog ---------- */
.hero-dlg .dlg-time{font:700 15px var(--sans); color:var(--sun); margin:-8px 0 18px}
.hero-dlg .dlg-x{all:unset; position:absolute; top:12px; right:16px; cursor:pointer; color:#fff; font-size:28px; line-height:1; padding:6px}
.hero-dlg .dlg-x:focus-visible{outline:2px solid var(--mint)}
dialog.hero-dlg{position:fixed}

/* ---------- Brain Blast game ---------- */
.new-badge{display:inline-block; margin-left:6px; padding:2px 7px; border-radius:999px; background:#E0483E; color:#fff; font:800 10.5px var(--sans); letter-spacing:.06em; vertical-align:2px; animation:bob 2.4s ease-in-out infinite; --rot:-4deg}
.bb{display:grid; gap:20px}
.bb-intro{display:grid; grid-template-columns:auto 1fr; gap:34px; align-items:center}
.bb-mascot{font-size:clamp(84px,12vw,130px); line-height:1; display:grid; place-items:center; width:clamp(140px,18vw,200px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff,#DDF4E6 60%,#B6E6CB); box-shadow:0 30px 50px -26px rgba(8,41,26,.5); animation:bbBounce 2.2s ease-in-out infinite; position:relative}
.bb-mascot::after{content:"✨"; position:absolute; top:4%; right:2%; font-size:.32em; animation:bbSpark 1.6s ease-in-out infinite}
@keyframes bbBounce{0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-12px) rotate(4deg)}}
@keyframes bbSpark{50%{transform:scale(1.4) rotate(20deg); opacity:.6}}
.bb-intro h3{font:800 clamp(30px,3.6vw,46px)/1.08 var(--display)}
.bb-intro p{color:var(--ink2); margin-top:10px; max-width:52ch}
.bb-rounds{display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 22px}
.bb-rounds span{display:inline-flex; gap:8px; align-items:center; padding:9px 14px; border-radius:14px; background:var(--bg); box-shadow:0 0 0 1px var(--line); font-weight:700; font-size:14.5px}
.bb-note{font-size:13px; color:var(--muted); margin-top:14px}
.bb-best{display:inline-flex; gap:6px; align-items:center; margin-left:12px; font-weight:700; color:var(--g600); font-size:14px}
.bb-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px}
.bb-head b{font:800 20px var(--display)}
.bb-steps{display:flex; gap:6px}
.bb-steps i{width:34px; height:8px; border-radius:8px; background:var(--line)}
.bb-steps i.on{background:var(--sun)} .bb-steps i.done{background:var(--g600)}
.bb-say{display:flex; align-items:center; gap:12px; min-height:52px}
.bb-say .bb-face{font-size:40px; line-height:1; animation:bbBounce 2s ease-in-out infinite}
.bb-say p{position:relative; background:var(--t-mint); color:var(--tile-ink); font-weight:700; padding:10px 16px; border-radius:16px 16px 16px 4px; animation:slideIn .4s var(--ease)}
.bb-stage{border-radius:28px; background:var(--bg); box-shadow:inset 0 0 0 1px var(--line); padding:clamp(18px,3vw,32px); display:grid; gap:18px; justify-items:center; text-align:center; min-height:330px; align-content:center; position:relative; overflow:hidden}
.bb-ins{font:700 clamp(17px,1.8vw,21px)/1.4 var(--sans); max-width:40ch}
.bb-timer{width:100%; max-width:420px; height:8px; border-radius:8px; background:var(--line); overflow:hidden}
.bb-timer i{display:block; height:100%; width:100%; background:linear-gradient(90deg,var(--sun),#E0483E); transform-origin:left}
.bb-btn{all:unset; box-sizing:border-box; cursor:pointer; user-select:none; -webkit-user-select:none; display:grid; place-items:center; text-align:center; border-radius:22px; font:800 18px var(--sans); transition:transform .15s, box-shadow .2s, background .2s}
.bb-btn:active{transform:scale(.94)}
.bb-btn:focus-visible{outline:3px solid var(--sun); outline-offset:3px}
/* memory */
.mem-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; width:min(420px,100%)}
.mem-grid .bb-btn{aspect-ratio:1; font-size:clamp(34px,8vw,52px); background:var(--card); box-shadow:0 0 0 2px var(--line), 0 10px 20px -14px rgba(8,41,26,.5)}
.mem-grid .bb-btn.lit{background:var(--sun); transform:scale(1.08); box-shadow:0 0 0 4px #fff, 0 0 30px rgba(242,184,75,.9)}
.mem-grid .bb-btn.ok{background:var(--t-mint); box-shadow:0 0 0 3px var(--g600)}
.mem-grid .bb-btn.no{background:#FDE3DE; box-shadow:0 0 0 3px #E0483E; animation:shake .4s}
.mem-grid.wait .bb-btn{pointer-events:none}
.bb-lives{font-size:22px; letter-spacing:4px}
/* bin it fast */
.bin-item{font-size:clamp(84px,16vw,120px); line-height:1; animation:binPop .35s var(--ease)}
.bin-name{font:800 20px var(--sans)}
@keyframes binPop{from{transform:scale(.3) rotate(-20deg); opacity:0}}
.bin-btns{display:grid; grid-template-columns:1fr 1fr; gap:14px; width:min(460px,100%)}
.bin-btns .bb-btn{min-height:84px; color:#fff; gap:2px; padding:10px}
.bin-btns .bb-btn small{font:600 13px var(--sans); opacity:.9}
.bin-btns .wet{background:#2F9E5B; box-shadow:0 10px 0 #1F6E3E}
.bin-btns .dry{background:#2E78D6; box-shadow:0 10px 0 #1E5299}
.bin-btns .bb-btn:active{transform:translateY(8px); box-shadow:none}
.bb-flash{position:absolute; inset:0; pointer-events:none; opacity:0}
.bb-flash.good{animation:flashG .5s} .bb-flash.bad{animation:flashB .5s}
@keyframes flashG{30%{opacity:1; background:rgba(47,158,91,.18)}}
@keyframes flashB{30%{opacity:1; background:rgba(224,72,62,.18)}}
/* pattern */
.pat-row{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; font-size:clamp(30px,6vw,46px); line-height:1}
.pat-row span{display:grid; place-items:center; min-width:1.3em; height:1.3em; border-radius:14px; background:var(--card); box-shadow:0 0 0 1px var(--line); animation:binPop .4s var(--ease) both; animation-delay:calc(var(--n)*60ms)}
.pat-row .q{background:var(--sun); color:#2A1D00; font:900 .8em var(--sans); animation:binPop .4s var(--ease) both, bbBounce 1.6s ease-in-out infinite}
.pat-opts{display:flex; flex-wrap:wrap; justify-content:center; gap:12px}
.pat-opts .bb-btn{min-width:88px; min-height:80px; font-size:38px; background:var(--card); box-shadow:0 0 0 2px var(--line), 0 8px 0 var(--line)}
.pat-opts .bb-btn.num{font:900 30px var(--display)}
.pat-opts .bb-btn.right{background:var(--t-mint); box-shadow:0 0 0 3px var(--g600)}
.pat-opts .bb-btn.wrong{background:#FDE3DE; box-shadow:0 0 0 3px #E0483E; animation:shake .4s}
/* colour twist */
.stroop{font:900 clamp(56px,12vw,96px)/1 var(--sans); letter-spacing:-.02em; animation:binPop .3s var(--ease)}
html[lang="hi"] .stroop{letter-spacing:0}
.sw-btns{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; width:min(520px,100%)}
.sw-btns .bb-btn{min-height:76px; background:var(--card); box-shadow:0 0 0 2px var(--line); gap:6px; font-size:14px; color:var(--ink)}
.sw-btns .bb-btn i{width:34px; height:34px; border-radius:50%; background:var(--c); box-shadow:inset 0 0 0 3px rgba(255,255,255,.4)}
@media (max-width:480px){ .sw-btns{grid-template-columns:1fr 1fr} .bb-intro{grid-template-columns:1fr; justify-items:center; text-align:center} .bb-rounds{justify-content:center} }
/* results */
.bb-res{display:grid; grid-template-columns:.85fr 1.15fr; gap:32px; align-items:start}
.bb-card{border-radius:28px; padding:28px; text-align:center; color:#fff; background:linear-gradient(160deg,var(--c1),var(--c2)); position:relative; overflow:hidden; animation:cardIn 1s var(--ease); box-shadow:0 40px 60px -30px rgba(0,0,0,.5)}
.bb-card::after{content:""; position:absolute; inset:0; mix-blend-mode:color-dodge; opacity:.4; background:linear-gradient(115deg,transparent 25%,rgba(141,224,181,.6) 40%,rgba(242,184,75,.6) 50%,rgba(169,156,235,.6) 60%,transparent 75%) 0 0/260% 260%; animation:holo 6s linear infinite; pointer-events:none}
.bb-card .ani{font-size:96px; line-height:1; display:inline-block; animation:bbBounce 2s ease-in-out infinite}
.bb-card small{display:block; font:800 12px var(--sans); letter-spacing:.14em; text-transform:uppercase; opacity:.85; margin-top:10px}
html[lang="hi"] .bb-card small{letter-spacing:.02em}
.bb-card h4{font:800 28px/1.15 var(--display); margin-top:6px}
.bb-card .tot{font:900 64px/1 var(--display); margin-top:14px; font-variant-numeric:tabular-nums}
.bb-card .tot span{font-size:24px; opacity:.8}
.bb-skills{display:grid; gap:14px}
.bb-sk{display:grid; grid-template-columns:44px 1fr; gap:12px; align-items:start; padding:14px 16px; border-radius:18px; background:var(--bg); box-shadow:0 0 0 1px var(--line)}
.bb-sk .em{font-size:30px; line-height:1}
.bb-sk b{display:flex; justify-content:space-between; gap:10px; font-size:16px}
.bb-sk b span{font-variant-numeric:tabular-nums; color:var(--g600)}
.bb-sk .tr{height:9px; border-radius:9px; background:var(--line); overflow:hidden; margin:7px 0}
.bb-sk .tr i{display:block; height:100%; width:var(--v); border-radius:inherit; background:linear-gradient(90deg,var(--g600),var(--mint)); animation:barIn 1.2s var(--ease) both; animation-delay:calc(var(--n)*120ms + .3s)}
@keyframes barIn{from{width:0}}
.bb-sk p{font-size:14px; color:var(--ink2); line-height:1.5}
.bb-parent{border-radius:18px; padding:16px 18px; background:var(--t-sun); color:var(--tile-ink); font-size:15px; line-height:1.55}
.bb-parent > b{display:block; margin-bottom:4px}
@media (max-width:820px){ .bb-res{grid-template-columns:1fr} }

/* ---------- blog ---------- */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.post{display:flex; flex-direction:column; border-radius:26px; overflow:hidden; background:var(--card); box-shadow:0 0 0 1px var(--line); text-decoration:none; color:inherit; transition:transform .5s var(--ease), box-shadow .5s}
.post .cover{aspect-ratio:16/9; display:grid; place-items:center; font-size:64px; background:var(--cv); position:relative; overflow:hidden}
.post .cover::after{content:""; position:absolute; width:180%; height:60%; bottom:-30%; left:-40%; border-radius:50%; background:rgba(255,255,255,.25)}
.post .bodyp{padding:22px; display:grid; gap:8px; flex:1; align-content:start}
.post .cat{font:800 12px var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--g600)}
html[lang="hi"] .post .cat{letter-spacing:.02em}
.post h3{font-size:21px; line-height:1.25}
.post p{color:var(--ink2); font-size:15px; line-height:1.55}
.post .meta{margin-top:auto; padding-top:8px; font-size:13px; color:var(--muted)}@media (hover:hover){
@media (hover:hover){ .post:hover{transform:translateY(-6px); box-shadow:0 0 0 1px var(--line), 0 30px 50px -30px rgba(8,41,26,.45)}} }
@media (max-width:960px){ .blog-grid{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .blog-grid{grid-template-columns:1fr} }
.art-hero h1{max-width:22ch; font-size:clamp(34px,5vw,64px)}
.art-meta{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:22px; color:var(--on-dark-2); font-size:14.5px}
.art-meta b{color:#fff}
.article{max-width:740px; margin:0 auto; font-size:18px; line-height:1.78; color:var(--ink)}
.article > * + *{margin-top:1.1em}
.article h2{font:800 clamp(26px,3vw,34px)/1.2 var(--display); margin-top:2em; scroll-margin-top:90px}
.article h3{font:700 21px/1.3 var(--sans); margin-top:1.6em; letter-spacing:0}
.article p,.article li{color:var(--ink2)}
.article strong{color:var(--ink)}
.article ul,.article ol{padding-left:1.3em; display:grid; gap:.45em}
.article a{color:var(--accent); font-weight:700; text-underline-offset:3px}
.article .lead{font-size:21px; line-height:1.6; color:var(--ink)}
.toc{border-radius:20px; background:var(--card); box-shadow:0 0 0 1px var(--line); padding:20px 24px}
.toc b{display:block; font:800 13px var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--g600); margin-bottom:8px}
.toc ol{margin:0; padding-left:1.2em; font-size:16px}
.toc a{font-weight:600; text-decoration:none}
.takeaways{border-radius:20px; padding:22px 24px; background:var(--t-mint); color:var(--tile-ink)}
.takeaways b{display:block; font-family:var(--display); font-size:20px; margin-bottom:6px}
.takeaways li{color:var(--tile-ink-2)}
.callout{border-left:4px solid var(--sun); padding:6px 0 6px 18px; font-style:italic; color:var(--ink)}
html[lang="hi"] .callout{font-style:normal}
.tbl{overflow-x:auto; border-radius:16px; box-shadow:0 0 0 1px var(--line)}
.tbl table{width:100%; border-collapse:collapse; font-size:15.5px; min-width:480px}
.tbl th,.tbl td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top}
.tbl th{background:var(--t-mint); color:var(--tile-ink); font-weight:800}
.tbl tr:last-child td{border-bottom:0}
.hi-sum{border-radius:20px; padding:20px 22px; background:var(--t-sun); color:var(--tile-ink)}
.hi-sum b{display:block; font-size:18px; margin-bottom:6px}
.hi-sum p{color:var(--tile-ink-2)!important}
html:not([lang="hi"]) .hi-sum{display:none}
.art-cta{border-radius:28px; padding:30px; background:linear-gradient(140deg,var(--g800),var(--forest)); color:#fff; display:grid; gap:14px; margin-top:2.2em}
.art-cta h3{color:#fff; margin:0; font:700 26px/1.2 var(--display)}
.art-cta p{color:var(--on-dark-2)!important; margin:0}
.art-cta .cta-row{margin:0}
.article .faq{margin-top:1em}
.related{max-width:1240px; margin:0 auto}

/* ---------- hover only where hover exists (stops "stuck" hover on iPhone) ---------- */
@media (max-width:1240px){ .nav .wrap > .lang-btn{margin-left:0} }
@media (max-width:1240px){ .nav .wrap > .links + .hd-hunt{margin-left:auto} }
.sch-hero > *,.how > *,.reg-grid > *,.trust-grid > *,.rk-teaser > *,.olym > *,.cert-wrap > *,.bb-res > *,.aud > *,.phero-grid > *{min-width:0}
@media (max-width:380px){ .dash{padding:18px} .dash-k{gap:6px} .dash-k div{padding:10px} .dash-k b{font-size:18px} .dash-bars div{grid-template-columns:52px 1fr 34px} }

@media (max-width:700px){
  .play-tabs{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-inline:-20px; padding:4px 20px 8px; scroll-snap-type:x proximity}
  .play-tabs::-webkit-scrollbar{display:none}
  .play-tabs .tabbtn{flex:none; white-space:nowrap; scroll-snap-align:start}
  .wyg-tabs,.rk-tabs,.nf{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; justify-content:flex-start; padding-bottom:6px}
  .wyg-tabs::-webkit-scrollbar,.rk-tabs::-webkit-scrollbar{display:none}
  .wyg-tabs .tabbtn,.rk-tabs .tabbtn{flex:none; white-space:nowrap}
}
html[lang="hi"] .hero-dlg h3{font-style:normal}

/* ---------- registration → API (v10) ---------- */
/* date inputs never match :placeholder-shown, so keep their label floated like a select */
.fl input[type="date"] + span{transform:translateY(-10px); font-size:12px; color:var(--g600); font-weight:700}
.fl input[type="date"]{min-height:56px}
/* honeypot field for bots: off-screen, not focusable */
.hp{position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden}
button[type="submit"][aria-busy="true"]{opacity:.7; cursor:progress}