/* ─────────────────────────────────────────────
   Alfiya Academy
   Paper, ink, one light. No frameworks.
   ───────────────────────────────────────────── */

:root{
  --paper:#FBF9F4;
  --paper-2:#F4F0E7;
  --white:#fff;
  --ink:#100C2E;
  --ink-2:#4F4C66;
  --ink-3:#8C899E;
  --indigo:#1F0A8C;
  --indigo-deep:#0B0457;
  --gold:#B4842A;
  --gold-lit:#E3B657;
  --red:#D7261E;
  --line:rgba(16,12,46,.12);
  --line-2:rgba(16,12,46,.2);

  --serif:"Zodiak","Iowan Old Style","Times New Roman",serif;
  --sans:"Switzer","Helvetica Neue",Helvetica,Arial,sans-serif;

  --gutter:clamp(20px,5vw,72px);
  --max:1440px;
  --wrap:calc(var(--max) + var(--gutter)*2);
  --out:cubic-bezier(.2,.8,.2,1);
  --inout:cubic-bezier(.65,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 1.0625rem/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
body.is-opening,body.menu-open{overflow:hidden}
main{overflow-x:clip}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,p,dl,dd,figure,blockquote{margin:0}
em{font-style:italic}
a{color:inherit;text-decoration:none}
::selection{background:var(--indigo);color:#fff}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
[hidden]{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.skip{position:fixed;left:16px;top:-60px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;transition:top .2s}
.skip:focus{top:12px}

/* ── type ── */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font:500 .75rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
}
.eyebrow__dot{width:6px;height:6px;border-radius:50%;background:var(--gold-lit);box-shadow:0 0 0 3px rgba(227,182,87,.22)}
.eyebrow--red{color:var(--red)}
.eyebrow--red .eyebrow__dot{background:var(--red);box-shadow:0 0 0 3px rgba(215,38,30,.16)}

.h-xl,.h-lg,.hero__h{font-family:var(--serif);font-weight:400;line-height:.95;letter-spacing:-.038em}
.h-xl{font-size:clamp(3rem,6.9vw,7rem)}
.h-lg{font-size:clamp(2.8rem,6.2vw,6rem)}
.h-xl em,.h-lg em,.hero__h em{color:var(--indigo);letter-spacing:-.03em;padding-right:.06em}
.sec__head .h-lg,.split__copy .h-lg,.finish__copy .h-lg,.phero .h-xl{margin-top:clamp(18px,3vh,28px)}

.lead{margin-top:clamp(20px,3vh,30px);max-width:36ch;font-size:clamp(1.125rem,1.5vw,1.3125rem);line-height:1.4;color:var(--ink-2)}
.lead i{font-family:var(--serif);font-size:1.1em;color:var(--ink)}
.fine{margin-top:22px;font-size:.9375rem;color:var(--ink-2)}
.fine i{font-style:normal;margin:0 .7em;color:var(--gold)}
.link{display:inline-flex;align-items:center;gap:8px;margin-top:30px;padding-bottom:4px;font-weight:500;font-size:.9375rem;border-bottom:1px solid var(--ink);transition:gap .4s var(--out),color .3s,border-color .3s}
.link::after{content:"→"}
.link:hover{gap:14px;color:var(--indigo);border-color:var(--indigo)}

/* ── buttons ── */
.btn{
  all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  height:60px;padding:0 30px;border-radius:999px;cursor:pointer;white-space:nowrap;
  background:var(--indigo);color:#fff;font:500 1.0625rem/1 var(--sans);letter-spacing:-.005em;
  transition:background .35s var(--out),box-shadow .35s var(--out),color .35s var(--out);
}
.btn b{font-weight:500}
.btn:hover{background:var(--indigo-deep)}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.btn__arrow{width:20px;height:20px;flex:none;transition:transform .45s var(--out)}
.btn:hover .btn__arrow{transform:translateX(5px)}
.btn--sm{height:44px;padding:0 20px;font-size:.9375rem}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn--ghost:hover{background:var(--white);box-shadow:inset 0 0 0 1px var(--ink)}
.wa-ico{width:20px;height:20px;flex:none;color:#1FAF54}

/* ── reveals ── */
.rl{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.rl>span{display:block;transform:translateY(112%);transition:transform 1.15s var(--out) var(--d,0s);will-change:transform}
.in .rl>span,.rl.in>span{transform:none}
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .9s var(--out) var(--d,0s),transform .9s var(--out) var(--d,0s)}
[data-reveal].in{opacity:1;transform:none}

/* ── sections ── */
.sec{max-width:var(--wrap);margin-inline:auto;padding:clamp(96px,16vh,200px) var(--gutter) 0}
.sec--tight{padding-top:clamp(56px,9vh,110px)}
.sec--last{padding-bottom:clamp(80px,13vh,160px)}

/* ── opener: only transforms and opacity move, so it stays on the compositor ── */
.opener{position:fixed;inset:0;z-index:100;animation:openerSafety 0s linear 6s forwards}
.skip-opener .opener{display:none}
.opener__veil,.opener__rim{position:absolute;left:0;top:0;width:100%;height:150%;clip-path:url(#veilClip);will-change:transform;backface-visibility:hidden}
.opener__veil{background:var(--paper)}
.opener__rim{background:var(--gold-lit)}
.opener__logo{position:absolute;left:0;top:0;width:100%;height:66.667%;display:grid;place-content:center;justify-items:center;will-change:transform,opacity}
.opener__mark{height:clamp(120px,22vh,190px);width:auto;opacity:0;transform:translate3d(0,26px,0) scale(.94);animation:markIn .9s cubic-bezier(.16,1,.3,1) .08s forwards}
.opener__word{width:clamp(200px,42vw,290px);height:auto;margin-top:24px;opacity:0;transform:translate3d(0,14px,0);animation:rise .85s cubic-bezier(.16,1,.3,1) .3s forwards}
.opener__line{width:clamp(200px,42vw,290px);height:1px;margin-top:20px;background:rgba(16,12,46,.1);overflow:hidden}
.opener__line i{display:block;height:100%;background:var(--gold);transform:scaleX(0);transform-origin:0 50%;animation:grow .9s cubic-bezier(.65,0,.35,1) .3s forwards}
.opener__tag{margin-top:16px;font:500 .6875rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2);opacity:0;animation:fade .6s ease .5s forwards}
.opener.is-leaving .opener__logo{animation:logoOut .5s cubic-bezier(.4,0,.2,1) forwards}
.opener.is-leaving .opener__veil{animation:lift 1.05s cubic-bezier(.76,0,.24,1) .12s forwards}
.opener.is-leaving .opener__rim{animation:lift 1.05s cubic-bezier(.76,0,.24,1) .155s forwards}
@keyframes markIn{to{opacity:1;transform:none}}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes grow{to{transform:scaleX(1)}}
@keyframes fade{to{opacity:1}}
@keyframes logoOut{to{opacity:0;transform:translate3d(0,-28px,0) scale(.98)}}
@keyframes lift{to{transform:translate3d(0,-100%,0)}}
@keyframes lit{to{background:var(--gold-lit);box-shadow:0 0 10px rgba(227,182,87,.85)}}
@keyframes openerSafety{to{visibility:hidden;pointer-events:none}}

/* ── announcement ── */
.bar{
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:11px var(--gutter);background:var(--paper-2);
  font-size:.875rem;line-height:1.2;color:var(--ink);text-align:center;transition:background .3s;
}
.bar:hover{background:#EEE9DD}
.bar b{font-weight:600}
.bar__sep{margin:0 .6em;color:var(--ink-3)}
.bar__dot{width:7px;height:7px;border-radius:50%;background:var(--red);flex:none;animation:pulse 2.2s ease-out infinite}
.bar__count{flex:none;padding:5px 11px;border-radius:999px;background:var(--ink);color:#fff;font-weight:500;font-size:.8125rem;font-variant-numeric:tabular-nums}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(215,38,30,.45)}80%,100%{box-shadow:0 0 0 9px rgba(215,38,30,0)}}

/* ── nav ── */
.nav{
  position:sticky;top:0;z-index:40;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  padding:14px var(--gutter);
  background:rgba(251,249,244,.86);backdrop-filter:saturate(1.5) blur(14px);-webkit-backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .4s,background .3s;
}
.nav.is-stuck{border-color:var(--line)}
.menu-open .nav{background:var(--paper);border-color:transparent}
.nav__logo img{height:36px;width:auto}
.nav__links{display:flex;gap:clamp(20px,2.4vw,34px);font-size:.9375rem;color:var(--ink-2)}
.nav__links a{position:relative;padding:6px 0;transition:color .25s}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--out)}
.nav__links a:hover,.nav__links a[aria-current]{color:var(--ink)}
.nav__links a:hover::after,.nav__links a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.nav__act{display:flex;align-items:center;justify-content:flex-end;gap:22px}
.nav__login{font-size:.9375rem;color:var(--ink-2);transition:color .25s}
.nav__login:hover{color:var(--ink)}

.burger{all:unset;box-sizing:border-box;display:none;cursor:pointer;width:44px;height:44px;border-radius:50%;position:relative;box-shadow:inset 0 0 0 1px var(--line-2)}
.burger i{position:absolute;left:13px;right:13px;height:1.5px;background:var(--ink);transition:transform .45s var(--out),top .45s var(--out)}
.burger i:nth-child(1){top:18px}.burger i:nth-child(2){top:25px}
.burger[aria-expanded="true"] i:nth-child(1){top:21.5px;transform:rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){top:21.5px;transform:rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:39;background:var(--paper);
  padding:132px var(--gutter) calc(28px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;justify-content:space-between;gap:32px;overflow:auto;
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s .4s;
}
.menu.is-open{opacity:1;visibility:visible;transition:opacity .4s ease,visibility 0s}
.menu__links{border-top:1px solid var(--line)}
.menu__links a{
  display:flex;align-items:baseline;gap:18px;padding:15px 0 14px;border-bottom:1px solid var(--line);
  font:400 clamp(2rem,9.4vw,3.2rem)/1.05 var(--serif);letter-spacing:-.035em;
  opacity:0;transform:translateY(22px);transition:opacity .6s var(--out),transform .7s var(--out);
}
.menu.is-open .menu__links a{opacity:1;transform:none;transition-delay:calc(.08s + var(--i)*.05s)}
.menu__links span{font:500 .75rem/1 var(--sans);letter-spacing:.1em;color:var(--ink-3)}
.menu__foot{display:grid;gap:10px}
.menu__foot .btn{width:100%}

/* ── 1 · hero ── */
.hero{max-width:var(--wrap);margin-inline:auto;padding:clamp(28px,5vh,60px) var(--gutter) 0}
.hero__grid,.phero__grid{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);gap:clamp(28px,5vw,96px);align-items:center}
.hero__h{margin-top:clamp(20px,3.2vh,34px);font-size:clamp(3.4rem,6.9vw,7rem)}
.hero__act{display:flex;align-items:center;flex-wrap:wrap;gap:18px 28px;margin-top:clamp(30px,5vh,52px)}
.hero__trust{display:inline-flex;align-items:center;gap:8px;font-size:.9375rem;color:var(--ink-2)}
.hero__trust svg{width:18px;height:18px;color:var(--gold)}

.hero__fig{position:relative;justify-self:end;width:min(100%,440px)}
.arch{overflow:hidden;transform:translate3d(0,100%,0);transition:transform 1.4s var(--inout) .1s}
.arch picture{aspect-ratio:4/5.5;clip-path:url(#archClip);overflow:hidden;background:var(--paper-2);transform:translate3d(0,-100%,0);transition:transform 1.4s var(--inout) .1s}
.in>.arch,.in>.arch picture{transform:none}
.arch--wide picture{aspect-ratio:4/4.7}
.arch img{
  width:100%;height:116%;object-fit:cover;object-position:50% 22%;
  transform:translate3d(0,calc(var(--py,0)*-1px),0) scale(var(--s,1.22));
  transition:transform 2s var(--out) .15s;will-change:transform;
}
.in>.arch img{--s:1.02}
.arch--sm img,.arch--wide img{object-position:50% 40%}

.play{
  all:unset;box-sizing:border-box;cursor:pointer;
  position:absolute;right:-14px;top:40%;
  display:inline-flex;align-items:center;gap:12px;
  padding:8px 20px 8px 8px;border-radius:999px;background:var(--white);
  font:500 .9375rem/1 var(--sans);color:var(--ink);
  box-shadow:0 0 0 1px var(--line),0 22px 40px -20px rgba(16,12,46,.4);
  opacity:0;transform:translateX(20px);transition:opacity .8s var(--out) 1.1s,transform .8s var(--out) 1.1s,box-shadow .3s;
}
.is-open .play{opacity:1;transform:none}
.play:hover{box-shadow:0 0 0 1px var(--ink),0 22px 40px -20px rgba(16,12,46,.4)}
.play__ico{width:38px;height:38px;border-radius:50%;background:var(--indigo);color:#fff;display:grid;place-items:center;position:relative}
.play__ico svg{width:12px;height:12px;margin-left:2px}
.play__ico::after{content:"";position:absolute;inset:0;border-radius:50%;animation:ring 2.6s ease-out infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(31,10,140,.35)}70%,100%{box-shadow:0 0 0 12px rgba(31,10,140,0)}}

.stamp{
  position:absolute;left:-62px;bottom:9%;width:136px;height:136px;border-radius:50%;
  display:grid;place-items:center;color:var(--indigo);
  background:rgba(251,249,244,.92);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;transform:rotate(-4deg) scale(1.5);
}
.is-open .stamp{animation:press .55s cubic-bezier(.3,1.5,.5,1) 1.45s forwards}
.stamp svg{position:absolute;inset:0;width:100%;height:100%}
.stamp text{font:600 10.4px/1 var(--sans);letter-spacing:.235em;fill:currentColor}
.stamp img{height:50px;width:auto}
@keyframes press{to{opacity:1;transform:rotate(-13deg) scale(1)}}

.ladder{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(44px,8vh,92px);border-top:1px solid var(--line)}
.ladder__i{padding:24px 0 30px 28px;border-left:1px solid var(--line);opacity:0;transform:translateY(14px);transition:opacity .9s var(--out) var(--d),transform .9s var(--out) var(--d)}
.ladder__i:first-child{padding-left:0;border-left:0}
.ladder.in .ladder__i{opacity:1;transform:none}
.ladder dt{font:400 clamp(2.1rem,4.2vw,3.75rem)/1 var(--serif);letter-spacing:-.035em;font-variant-numeric:lining-nums}
.ladder dd{margin-top:8px;font-size:.9375rem;color:var(--ink-2)}

/* ── page hero ── */
.phero{max-width:var(--wrap);margin-inline:auto;padding:clamp(36px,7vh,88px) var(--gutter) 0}
.phero--solo .phero__grid{grid-template-columns:minmax(0,1fr)}
.phero--solo .phero__grid--form{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:clamp(36px,7vw,130px)}
.phero--center{min-height:62vh;display:grid;align-items:center;text-align:center;padding-bottom:clamp(80px,13vh,160px)}
.phero--center .phero__copy{display:grid;justify-items:center}
.phero--center .lead{margin-inline:auto}

/* ── ticker ── */
.ticker{border-block:1px solid var(--line);overflow:hidden;padding:20px 0}
.ticker__track{display:flex;align-items:center;width:max-content;animation:tick 60s linear infinite}
.ticker span,.ticker i{margin-right:38px;white-space:nowrap}
.ticker span{font:italic 400 clamp(1.2rem,2vw,1.625rem)/1 var(--serif);letter-spacing:-.01em}
.ticker i{font-style:normal;font-size:.75rem;color:var(--gold)}
@keyframes tick{to{transform:translate3d(-50%,0,0)}}

/* ── 2 · pain ── */
.pain{position:relative}
.pain__stage{position:relative;padding:clamp(80px,13vh,140px) var(--gutter)}
.pain__center{text-align:center}
.pain__h{margin-top:22px;font:400 clamp(2.4rem,12vw,8.4rem)/.94 var(--serif);letter-spacing:-.04em}
.pain__h em{color:var(--red);padding-right:.05em;white-space:nowrap}
.pain__h em b{
  display:inline-block;font-weight:inherit;
  transform:translate(calc(var(--lx)*var(--p,0)*1px),calc(var(--ly)*var(--p,0)*1px)) rotate(calc(var(--lr)*var(--p,0)*1deg));
  opacity:calc(1 - var(--p,0)*.62);
}
.pain__close{
  margin-top:clamp(28px,5vh,48px);
  font:400 clamp(1.6rem,3vw,2.5rem)/1.15 var(--serif);letter-spacing:-.025em;
  opacity:var(--close,1);transform:translateY(calc((1 - var(--close,1))*18px));
}
.pain__close em{color:var(--indigo)}

.scraps{list-style:none;margin:0;padding:0}
.scrap{
  --k:0;
  position:relative;display:block;width:max-content;max-width:100%;
  padding:16px 22px 20px;background:var(--white);
  box-shadow:0 0 0 1px var(--line),0 30px 50px -30px rgba(16,12,46,.35);
}
.scrap__meta{display:flex;align-items:center;gap:8px;font:500 .6875rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);transition:opacity .5s ease}
.scrap__meta svg{width:12px;height:12px;flex:none}
.scrap__text{position:relative;display:inline-block;margin-top:14px;white-space:nowrap;font:400 clamp(1rem,5vw,1.3rem)/1.15 var(--serif);letter-spacing:-.02em;transition:color .5s ease}
/* the strike is revealed left to right by a clip, so it always spans the whole sentence */
.scrap__strike{position:absolute;left:-4%;top:50%;width:108%;height:20px;margin-top:-9px;overflow:visible;pointer-events:none;clip-path:inset(-12px calc((1 - var(--k))*100%) -12px -8px)}
.scrap__strike path{fill:none;stroke:var(--red);stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.scrap__tag{
  position:absolute;right:-10px;bottom:-13px;
  padding:6px 10px 5px;background:var(--red);color:#fff;
  font:600 .6875rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  transform:rotate(-4deg) scale(.6);opacity:0;transition:transform .4s cubic-bezier(.3,1.6,.5,1),opacity .25s ease;
}
.scrap.is-cut .scrap__tag{transform:rotate(-4deg) scale(1);opacity:1}
.scrap.is-cut .scrap__text{color:var(--ink-3)}
.scrap.is-cut .scrap__meta{opacity:.6}

.scrap--reel{border-radius:22px}
.scrap--reel .scrap__meta svg{color:var(--ink)}
.scrap--fwd{border-radius:4px 20px 20px 20px;background:#EFF8E8}
.scrap--fwd .scrap__meta{text-transform:none;letter-spacing:0;font:italic 400 .8125rem/1 var(--sans)}
.scrap--fwd .scrap__meta svg{width:15px}
.scrap--fwd::before{content:"";position:absolute;left:-9px;top:0;border:9px solid transparent;border-top-color:#EFF8E8;border-right-color:#EFF8E8;border-left-width:0;filter:drop-shadow(-1px 0 0 var(--line))}
.scrap--talk{border-radius:14px}
.wave{display:inline-flex;align-items:center;gap:2px;height:16px}
.wave i{width:2px;border-radius:2px;background:var(--ink-3);height:40%}
.wave i:nth-child(2n){height:90%}.wave i:nth-child(3n){height:60%}.wave i:nth-child(5n){height:100%}.wave i:nth-child(7n){height:30%}
.scrap--book{border-radius:2px;background:#FFFDF7;padding-left:36px;padding-right:34px}
.scrap--book::before{content:"";position:absolute;left:14px;top:-6px;width:10px;height:54px;background:var(--gold);clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%)}
.scrap--book::after{content:"";position:absolute;right:0;top:0;border:12px solid;border-color:var(--paper) var(--paper) #E9E3D4 #E9E3D4}

/* ── 3 · path ── */
.path__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,430px);gap:clamp(36px,7vw,130px);align-items:start;margin-top:clamp(44px,8vh,96px)}

.subjects{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.subject{
  all:unset;box-sizing:border-box;cursor:pointer;position:relative;width:100%;
  display:grid;grid-template-columns:3.4rem minmax(0,1fr) auto;align-items:baseline;column-gap:12px;
  padding:19px 0 18px;border-bottom:1px solid var(--line);
}
.subject__n{font:500 .75rem/1 var(--sans);letter-spacing:.1em;color:var(--ink-3);transition:color .3s;font-variant-numeric:tabular-nums}
.subject__name{font:400 clamp(1.5rem,2.5vw,2.2rem)/1.1 var(--serif);letter-spacing:-.025em;transition:transform .6s var(--out),color .3s}
.subject__d{font-size:.9375rem;color:var(--ink-2);text-align:right;opacity:0;transform:translateX(-8px);transition:opacity .4s ease,transform .6s var(--out)}
.subject::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--indigo);transform:scaleX(0);transform-origin:left}
.subject.is-on .subject__n{color:var(--gold)}
.subject.is-on .subject__name{color:var(--indigo);transform:translateX(10px)}
.subject.is-on .subject__d{opacity:1;transform:none}
.subject.is-on::after{transform:scaleX(1);transition:transform .7s var(--out)}
.subject.is-on.is-timed::after{transition:transform var(--cycle,2.8s) linear}
.subject:focus-visible{outline-offset:-2px}

.lights{position:sticky;top:96px}
.lights__top{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.lights__count{display:flex;align-items:baseline;gap:10px}
.lights__count output{font:400 clamp(2.6rem,4.2vw,3.75rem)/1 var(--serif);letter-spacing:-.035em;font-variant-numeric:tabular-nums lining-nums}
.lights__count span{font-size:.9375rem;color:var(--ink-2)}
.lights__name{font:italic 400 1.25rem/1 var(--serif);color:var(--indigo);text-align:right}

.lights__grid{
  position:relative;display:grid;grid-template-columns:repeat(10,1fr);aspect-ratio:1;margin-top:22px;padding:7%;
  background:
    linear-gradient(var(--ink),var(--ink)) 0 0/14px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 0/1px 14px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 100% 0/14px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 100% 0/1px 14px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 0 100%/14px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 100%/1px 14px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 100% 100%/14px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 100% 100%/1px 14px no-repeat,
    var(--white);
}
.lights__grid i{
  display:block;width:32%;aspect-ratio:1;margin:auto;border-radius:50%;
  background:rgba(16,12,46,.13);
  transition:background .45s ease,box-shadow .45s ease,transform .5s cubic-bezier(.3,1.7,.5,1);
  transition-delay:calc(var(--n)*8ms);
}
.lights__grid.is-lit i{background:var(--gold-lit);box-shadow:0 0 0 1px rgba(180,132,42,.4),0 0 12px rgba(227,182,87,.6);transform:scale(1.2)}
.lights__grid.no-t i{transition:none}

.lights__blocks{display:grid;grid-template-columns:repeat(10,1fr);gap:7px;margin-top:18px}
.blk{
  all:unset;box-sizing:border-box;cursor:pointer;aspect-ratio:1;
  background-image:radial-gradient(circle,rgba(16,12,46,.2) 36%,transparent 40%);background-size:25% 25%;
}
.blk.is-done{background-image:radial-gradient(circle,var(--gold) 38%,transparent 42%)}
.blk.is-on{box-shadow:0 5px 0 -3.5px var(--indigo)}
.blk:focus-visible{outline-offset:2px}

/* ── columns ── */
.cols{list-style:none;margin:clamp(56px,9vh,110px) 0 0;padding:0;display:grid;border-top:1px solid var(--line)}
.cols--4{grid-template-columns:repeat(4,1fr)}
.cols--3{grid-template-columns:repeat(3,1fr)}
.path .cols{margin-top:clamp(80px,13vh,150px)}
.cols li{padding:30px 24px 0 28px;border-left:1px solid var(--line)}
.cols li:first-child{padding-left:0;border-left:0}
.cols s,.cols__n{display:block;font:600 .6875rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.cols s{color:var(--red);text-decoration-thickness:1.5px}
.cols__n{color:var(--gold)}
.cols h3{margin-top:16px;font:400 clamp(1.6rem,2.5vw,2.2rem)/1.08 var(--serif);letter-spacing:-.025em}
.cols p{margin-top:10px;color:var(--ink-2);max-width:24ch}

/* ── voices ── */
.voices__body{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(36px,7vw,130px);align-items:start;margin-top:clamp(44px,8vh,96px)}
.voices__tabs{display:inline-flex;gap:2px;padding:4px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);margin-bottom:26px}
.voices__tabs button{all:unset;box-sizing:border-box;cursor:pointer;padding:10px 20px;border-radius:999px;font:500 .9375rem/1 var(--sans);color:var(--ink-2);transition:background .35s var(--out),color .25s}
.voices__tabs button[aria-selected="true"]{background:var(--ink);color:#fff}
.voices__tabs button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.voices__names{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.voices__names button{
  all:unset;box-sizing:border-box;cursor:pointer;position:relative;width:100%;
  display:grid;grid-template-columns:2.6rem minmax(0,1fr);align-items:baseline;
  padding:17px 0 16px;border-bottom:1px solid var(--line);font-size:1.0625rem;color:var(--ink-2);transition:color .3s;
}
.voices__names span{font:500 .75rem/1 var(--sans);letter-spacing:.1em;color:var(--ink-3)}
.voices__names button::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--indigo);transform:scaleX(0);transform-origin:left}
.voices__names button.is-on{color:var(--ink)}
.voices__names button.is-on span{color:var(--gold)}
.voices__names button.is-on::after{transform:scaleX(1);transition:transform .7s var(--out)}
.voices__names button.is-on.is-timed::after{transition:transform var(--cycle,6s) linear}
.voices__names button:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}

.voice+.voice{margin-top:56px}
.voice blockquote{font:400 clamp(1.7rem,3.3vw,3.1rem)/1.12 var(--serif);letter-spacing:-.028em;text-wrap:balance}
.voice blockquote::before{content:"\201C";display:block;height:.42em;font-size:2.6em;line-height:.8;color:var(--gold-lit)}
.voice mark{color:inherit;background:linear-gradient(var(--gold-lit),var(--gold-lit)) 0 94%/100% .1em no-repeat}
.voice figcaption{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin-top:clamp(22px,4vh,34px)}
.voice figcaption b{font-weight:500}
.voice figcaption span{font:500 .6875rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.voices.is-js .voices__stage{display:grid}
.voices.is-js .voice{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .45s ease,transform .7s var(--out),visibility 0s .45s}
.voices.is-js .voice.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .6s ease .2s,transform .8s var(--out) .2s,visibility 0s}

/* ── finish: certificate + competition ── */
.finish__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(36px,6vw,110px);align-items:center}
.count{display:flex;margin-top:clamp(30px,5vh,52px)}
.count div{display:grid;gap:10px;padding-right:clamp(16px,2.6vw,40px)}
.count div+div{padding-left:clamp(16px,2.6vw,40px);border-left:1px solid var(--line)}
.count b{font:400 clamp(2.5rem,5.6vw,5.4rem)/.9 var(--serif);letter-spacing:-.04em;font-variant-numeric:tabular-nums lining-nums;min-width:1.9ch}
.count span{font:500 .6875rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.finish .cta__act{margin-top:clamp(30px,5vh,48px)}
.finish__fig{position:relative;justify-self:center;width:min(100%,470px);padding:46px 30px 54px}

.cert{
  position:absolute;left:-74px;bottom:7%;width:214px;padding:20px 18px 16px;
  display:grid;justify-items:center;text-align:center;
  background:var(--white);outline:1px solid var(--gold);outline-offset:-7px;
  box-shadow:0 0 0 1px var(--line),0 34px 60px -30px rgba(16,12,46,.5);
  transform:rotate(-7deg);
}
.cert__mark{height:34px;width:auto}
.cert__k{margin-top:10px;font:600 .5625rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.cert__n{margin-top:12px;padding:0 12px 6px;border-bottom:1px solid var(--line-2);font:italic 400 1.35rem/1 var(--serif)}
.cert__t{margin-top:8px;font:500 .6875rem/1 var(--sans);letter-spacing:.06em;color:var(--indigo)}
.cert__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;width:100%;margin-top:14px;padding:0 6px}
.cert__no{font:500 .5rem/1 var(--sans);letter-spacing:.12em;color:var(--ink-3)}
.qr{width:30px;height:30px;color:var(--ink)}
.cert--lg{position:relative;left:auto;bottom:auto;width:100%;padding:clamp(34px,4vw,52px) clamp(24px,3vw,40px) clamp(24px,3vw,34px);outline-offset:-12px;transform:rotate(3.5deg)}
.cert--lg .cert__mark{height:clamp(52px,6vw,74px)}
.cert--lg .cert__k{margin-top:20px;font-size:.6875rem}
.cert--lg .cert__n{margin-top:22px;padding:0 28px 10px;font-size:clamp(1.8rem,3vw,2.6rem)}
.cert--lg .cert__t{margin-top:14px;font-size:.875rem}
.cert--lg .cert__foot{margin-top:30px;padding:0 14px}
.cert--lg .cert__no{font-size:.625rem}
.cert--lg .qr{width:clamp(48px,5vw,64px);height:clamp(48px,5vw,64px)}

.sticker{position:absolute;display:grid;place-items:center;align-content:center;text-align:center;border-radius:50%;box-shadow:0 18px 30px -16px rgba(16,12,46,.5)}
.sticker--date{right:-4px;top:0;width:108px;height:108px;background:var(--red);color:#fff;font:600 .625rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;transform:rotate(10deg)}
.sticker--date b{display:block;font:400 2.7rem/.9 var(--serif);letter-spacing:-.03em}
.sticker--prize{left:-6px;bottom:0;width:124px;height:124px;background:var(--gold-lit);color:var(--ink);transform:rotate(-14deg)}
.sticker--prize svg{position:absolute;inset:0;width:100%;height:100%;animation:turn 26s linear infinite}
.sticker--prize text{font:600 9.6px/1 var(--sans);letter-spacing:.2em;fill:currentColor}
.sticker--prize i{font:400 2.5rem/1 var(--serif);font-style:normal}
@keyframes turn{to{transform:rotate(360deg)}}

/* ── split + give ── */
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,7vw,130px);align-items:center}
.split__fig{position:relative;width:min(100%,500px)}
.give{display:grid;gap:24px;justify-items:start;margin-top:clamp(28px,5vh,48px);max-width:560px}
.give__amts{display:flex;width:100%;margin:0;padding:0;border:0;border-block:1px solid var(--line)}
.give__amts label{position:relative;flex:1;cursor:pointer}
.give__amts input{position:absolute;inset:0;opacity:0;cursor:pointer}
.give__amts span{display:block;padding:22px 0 20px;font:400 clamp(1.5rem,2.8vw,2.4rem)/1 var(--serif);letter-spacing:-.03em;color:var(--ink-3);transition:color .3s}
.give__amts label+label span{padding-left:clamp(14px,2vw,26px);border-left:1px solid var(--line)}
.give__amts span::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--indigo);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--out)}
.give__amts label:hover span{color:var(--ink-2)}
.give__amts input:checked+span{color:var(--ink)}
.give__amts input:checked+span::after{transform:scaleX(1)}
.give__amts input:focus-visible+span{outline:2px solid var(--gold);outline-offset:-2px}
.give .fine{margin-top:-6px}

/* ── faq ── */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,7vw,130px);align-items:start}
.faq-grid--group{padding-top:clamp(36px,6vh,64px)}
.faq-grid--group+.faq-grid--group{margin-top:clamp(36px,6vh,64px);border-top:1px solid var(--line)}
.faq-grid--group .faq{border-top:0}
.faq__g{font:400 clamp(1.6rem,2.6vw,2.3rem)/1.05 var(--serif);letter-spacing:-.03em;color:var(--indigo)}
.faq{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:25px 0 24px;font:400 clamp(1.3rem,2vw,1.7rem)/1.15 var(--serif);letter-spacing:-.022em;transition:color .3s}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--indigo)}
.qa summary i{
  flex:none;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2);
  background:linear-gradient(var(--ink),var(--ink)) center/12px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1.5px 12px no-repeat;
  transition:transform .5s var(--out),background-color .3s;
}
.qa[open] summary i{transform:rotate(135deg);background-color:var(--white)}
.qa p{padding:0 58px 28px 0;max-width:54ch;color:var(--ink-2)}
.qa[open] p{animation:qaIn .6s var(--out)}
@keyframes qaIn{from{opacity:0;transform:translateY(-8px)}}

/* ── test yourself ── */
.tq{min-height:min(78vh,820px);display:grid;align-items:center;padding-bottom:clamp(40px,8vh,96px)}
.tq__wrap{width:min(100%,760px)}
.tq__prog{display:flex;gap:10px;margin-bottom:clamp(28px,5vh,48px)}
.tq__prog i{width:9px;height:9px;border-radius:50%;background:rgba(16,12,46,.13);transition:background .4s,box-shadow .4s,transform .5s cubic-bezier(.3,1.7,.5,1)}
.tq__prog i.is-right{background:var(--gold-lit);box-shadow:0 0 0 1px rgba(180,132,42,.4),0 0 12px rgba(227,182,87,.6);transform:scale(1.2)}
.tq__prog i.is-wrong{background:var(--red)}
.tq__card{display:none}
.tq__card.is-on{display:block;animation:stepIn .6s var(--out)}
.tq__card .h-xl{margin-top:clamp(18px,3vh,28px)}
.tq__sub{font:500 .75rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:18px}
.tq__sub i{font-style:normal;margin:0 .7em;color:var(--gold)}
.tq .quiz__opts button[disabled]{cursor:default;padding-left:4px;color:var(--ink-3)}
.tq .quiz__opts button.is-right{color:var(--indigo);padding-left:16px}
.tq .quiz__opts button.is-right::after{content:"\2713";color:var(--gold);transform:none}
.tq .quiz__opts button.is-wrong{color:var(--red);padding-left:16px}
.tq .quiz__opts button.is-wrong::after{content:"\2715";color:var(--red);transform:none}
.link--plain{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;margin-top:30px;padding-bottom:4px;font:500 .9375rem/1.5 var(--sans);border-bottom:1px solid var(--ink)}
.link--plain::after{content:none}
.link--plain:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.link--soft{margin-top:22px;border-color:var(--line-2);color:var(--ink-2);font-weight:400}

/* ── final cta ── */
.cta{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(28px,5vw,96px);align-items:center}
.cta__act{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(30px,5vh,52px)}
.cta__fig{position:relative;justify-self:end;width:min(100%,400px)}

/* ── about ── */
.band{height:clamp(300px,64vh,660px);margin-top:clamp(72px,12vh,150px);overflow:hidden;background:var(--paper-2)}
.band picture,.band img{width:100%;height:100%}
.band img{height:128%;object-fit:cover;object-position:50% 60%;transform:translate3d(0,calc(var(--py,0)*-1px),0);will-change:transform}
.say{max-width:1120px}
.say__t{margin-top:26px;font:400 clamp(1.9rem,4.3vw,4.1rem)/1.06 var(--serif);letter-spacing:-.034em;text-wrap:balance}
.say__t em{color:var(--indigo)}
.trio{display:flex;flex-wrap:wrap;gap:0 .42em;margin-top:clamp(18px,3vh,28px);font:400 clamp(2.8rem,7.4vw,7.2rem)/1 var(--serif);letter-spacing:-.04em}
.trio em{color:var(--indigo)}
.pays{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.pays span{padding:11px 20px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);font:500 .875rem/1 var(--sans)}
.note{
  display:inline-flex;align-items:baseline;gap:14px;max-width:100%;margin-top:clamp(40px,7vh,72px);padding:18px 24px;
  background:#FFF5D2;box-shadow:0 22px 34px -24px rgba(16,12,46,.45);transform:rotate(-1.2deg);
}
.note b{flex:none;font:600 .6875rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}

/* ── subjects page ── */
.syllabus{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.syl{display:grid;grid-template-columns:3.6rem minmax(0,.85fr) minmax(0,1.15fr) 76px;align-items:center;gap:clamp(16px,2.4vw,40px);padding:clamp(24px,4vh,38px) 0;border-bottom:1px solid var(--line)}
.syl__n{font:500 .75rem/1 var(--sans);letter-spacing:.1em;color:var(--gold)}
.syl__name{font:400 clamp(1.9rem,3.7vw,3.3rem)/1 var(--serif);letter-spacing:-.035em}
.syl__d{color:var(--ink-2);max-width:42ch}
.syl__lights{position:relative;width:76px;aspect-ratio:1;background:radial-gradient(circle,rgba(16,12,46,.16) 32%,transparent 36%) 0 0/10% 10%}
.syl__lights::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,var(--gold) 36%,transparent 40%) 0 0/10% 10%;clip-path:inset(0 0 100% 0);transition:clip-path 1.3s steps(10) .35s}
.syl.in .syl__lights::after{clip-path:inset(0 0 0 0)}

/* ── forms ── */
.reach{list-style:none;margin:clamp(30px,5vh,52px) 0 0;padding:0;border-top:1px solid var(--line);max-width:460px}
.reach li{display:grid;grid-template-columns:7.5rem 1fr;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
.reach span{font:500 .6875rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.reach a{font-size:1.125rem;transition:color .3s}
.reach a:hover{color:var(--indigo)}
.form{display:grid;gap:26px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:0}
.chips legend,.field span{display:block;padding:0;margin-bottom:12px;font:500 .6875rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;inset:0;opacity:0;cursor:pointer}
.chips label span{display:block;padding:11px 18px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);font:500 .9375rem/1 var(--sans);color:var(--ink-2);transition:background .3s,color .3s,box-shadow .3s}
.chips input:checked+span{background:var(--ink);color:#fff;box-shadow:none}
.chips input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.field{display:block}
.field span{margin-bottom:4px}
.field input,.field textarea,.quiz__form input{
  all:unset;box-sizing:border-box;display:block;width:100%;padding:10px 0 12px;border-bottom:1px solid var(--line-2);
  font:400 1.125rem/1.3 var(--sans);color:var(--ink);transition:border-color .3s;
}
.field textarea{resize:vertical;min-height:5.2em;white-space:pre-wrap;overflow-wrap:anywhere}
.field input::placeholder,.field textarea::placeholder,.quiz__form input::placeholder{color:var(--ink-3)}
.field input:focus,.field textarea:focus,.quiz__form input:focus{border-color:var(--indigo)}
.field.is-bad input,.field.is-bad textarea{border-color:var(--red)}
.form .cta__act{margin-top:6px}
.form__ok{padding:14px 18px;background:var(--paper-2);font-weight:500}
.form__ok[hidden]{display:none}

/* ── legal ── */
.prose{max-width:66ch}
.prose__date{font:500 .75rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.prose h2{margin-top:44px;font:400 1.6rem/1.15 var(--serif);letter-spacing:-.02em}
.prose p:not(.prose__date){margin-top:12px;color:var(--ink-2);line-height:1.62}
.prose a{border-bottom:1px solid var(--line-2);color:var(--ink)}

/* ── footer ── */
.foot{max-width:var(--wrap);margin-inline:auto;padding:clamp(56px,9vh,96px) var(--gutter) 0;border-top:1px solid var(--line);overflow-x:clip}
.foot__top{display:grid;grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,.7fr));gap:clamp(28px,4vw,64px)}
.foot__brand img{height:36px;width:auto}
.foot__def{margin-top:22px;max-width:44ch;font-size:.9375rem;color:var(--ink-2)}
.foot__col h2{margin-bottom:16px;font:500 .6875rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.foot__col a{display:block;width:max-content;max-width:100%;padding:6px 0;font-size:.9375rem;transition:color .25s}
.foot__col a:hover{color:var(--indigo)}
.foot__sign{
  display:flex;align-items:flex-end;gap:.16em;margin-top:clamp(56px,10vh,120px);
  font:italic 400 clamp(1.6rem,8.7vw,8.6rem)/.9 var(--serif);letter-spacing:-.045em;color:var(--indigo);white-space:nowrap;
}
.foot__sign img{height:.92em;width:auto;flex:none}
.foot__base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;margin-top:clamp(28px,5vh,52px);padding:22px 0 26px;border-top:1px solid var(--line);font-size:.8125rem;color:var(--ink-2)}
.foot__base a{margin-left:24px;transition:color .25s}
.foot__base a:hover{color:var(--ink)}

/* ── whatsapp + dock ── */
.wa{
  position:fixed;right:22px;bottom:22px;z-index:50;
  display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 22px 0 16px;border-radius:999px;
  background:var(--white);color:var(--ink);font:500 .9375rem/1 var(--sans);
  box-shadow:0 0 0 1px var(--line),0 18px 40px -16px rgba(16,12,46,.4);
  transform:translateY(90px);opacity:0;transition:transform .7s var(--out),opacity .5s ease,box-shadow .3s;
}
.wa.is-on{transform:none;opacity:1}
.menu-open .wa,.menu-open .dock{opacity:0;pointer-events:none}
.wa:hover{box-shadow:0 0 0 1px #1FAF54,0 18px 40px -16px rgba(16,12,46,.4)}
.wa svg{width:26px;height:26px;color:#1FAF54}
.dock{display:none}

/* ── dialogs ── */
dialog{border:0;padding:0;color:var(--ink);background:var(--paper)}
dialog::backdrop{background:rgba(16,12,46,.42);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
dialog[open]{animation:sheet .55s var(--out)}
dialog[open]::backdrop{animation:fade .4s ease}
@keyframes sheet{from{opacity:0;transform:translateY(26px)}}

.quiz{width:min(680px,calc(100vw - 32px));padding:clamp(30px,5vw,60px);max-height:calc(100dvh - 32px);overflow:auto}
.quiz__x{position:absolute;right:16px;top:16px;margin:0}
.quiz__x button{all:unset;box-sizing:border-box;cursor:pointer;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--ink);transition:background .25s}
.quiz__x button:hover{background:var(--paper-2)}
.quiz__x button:focus-visible{outline:2px solid var(--gold)}
.quiz__x svg{width:20px;height:20px}
.quiz__prog{display:flex;gap:8px;margin-bottom:clamp(28px,5vh,44px)}
.quiz__prog i{width:7px;height:7px;border-radius:50%;background:rgba(16,12,46,.14);transition:background .4s,box-shadow .4s}
.quiz__prog i.on{background:var(--gold-lit);box-shadow:0 0 10px rgba(227,182,87,.8)}
.quiz__step{display:none}
.quiz__step.is-on{display:block;animation:stepIn .6s var(--out)}
@keyframes stepIn{from{opacity:0;transform:translateX(22px)}}
.quiz__q{font:400 clamp(2.1rem,5vw,3.4rem)/1 var(--serif);letter-spacing:-.035em;text-wrap:balance}
.quiz__q em{color:var(--indigo)}
.quiz__q--res{margin-top:18px}
.quiz__opts{display:grid;margin-top:clamp(24px,4vh,40px);border-top:1px solid var(--line)}
.quiz__opts button{
  all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:baseline;justify-content:space-between;
  padding:22px 4px;border-bottom:1px solid var(--line);
  font:400 clamp(1.4rem,3vw,1.85rem)/1 var(--serif);letter-spacing:-.02em;
  transition:padding .45s var(--out),color .25s;
}
.quiz__opts button::after{content:"→";font-family:var(--sans);font-size:1.1rem;color:var(--ink-3);transition:transform .45s var(--out),color .25s}
.quiz__opts button:hover,.quiz__opts button:focus-visible{padding-left:16px;color:var(--indigo)}
.quiz__opts button:hover::after{transform:translateX(-10px);color:var(--indigo)}
.quiz__opts--row{grid-template-columns:repeat(3,1fr);border-top:0;gap:12px}
.quiz__opts--row button{flex-direction:column;align-items:flex-start;gap:12px;padding:22px 20px;border:0;box-shadow:inset 0 0 0 1px var(--line-2);transition:box-shadow .3s,background .3s}
.quiz__opts--row button::after{content:none}
.quiz__opts--row button:hover,.quiz__opts--row button:focus-visible{padding-left:20px;box-shadow:inset 0 0 0 1.5px var(--indigo);background:var(--white)}
.quiz__opts--row b{font:400 clamp(2.6rem,7vw,3.6rem)/1 var(--serif);letter-spacing:-.04em}
.quiz__opts--row small{font:400 .9375rem/1 var(--sans);letter-spacing:0;color:var(--ink-2)}
.quiz__plan{margin-top:16px;color:var(--ink-2)}
.quiz__flag{display:inline-flex;align-items:center;gap:9px;margin-top:16px;padding:8px 14px 8px 12px;border-radius:999px;background:var(--paper-2);font-size:.875rem;font-weight:500}
.quiz__flag[hidden]{display:none}
.quiz__flag span{width:7px;height:7px;border-radius:50%;background:var(--red)}
.quiz__form{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;margin-top:clamp(26px,4vh,40px)}
.quiz__form label{display:grid;gap:4px}
.quiz__form label span{font:500 .6875rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.quiz__act{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}

.film{width:min(1100px,calc(100vw - 32px));background:#000;overflow:visible}
.film .quiz__x{top:-54px;right:0}
.film .quiz__x button{color:#fff}
.film .quiz__x button:hover{background:rgba(255,255,255,.14)}
.film__frame{aspect-ratio:16/9}
.film__frame iframe{width:100%;height:100%;border:0;display:block}

/* ─────────── ≥ 900 · pinned collage ─────────── */
@media (min-width:900px){
  .pain{height:270vh}
  .pain__stage{position:sticky;top:0;height:100vh;padding:0 var(--gutter);display:grid;place-items:center;overflow:hidden}
  .pain__center{position:relative;z-index:2}
  .pain__h{font-size:clamp(3.2rem,min(8.6vw,16vh),8.4rem)}
  .scraps{position:absolute;inset:0}
  .scrap{
    position:absolute;
    transform:
      translate3d(calc(var(--dx)*(1 - var(--e,1))*1px),calc(var(--dy)*(1 - var(--e,1))*1px + var(--out-y,0)*var(--close,0)*1px),0)
      rotate(var(--r));
    opacity:calc(1 - var(--close,0)*.5);
  }
  .scrap__text{font-size:clamp(1.3rem,1.9vw,1.625rem)}
  .scrap:nth-child(1){--r:-7deg;--dx:-120;--dy:160;--out-y:-24;left:max(5vw,calc(50% - 640px));top:17%}
  .scrap:nth-child(2){--r:5deg;--dx:140;--dy:220;--out-y:-18;right:max(6vw,calc(50% - 620px));top:20%}
  .scrap:nth-child(3){--r:4deg;--dx:-90;--dy:320;--out-y:22;left:max(8vw,calc(50% - 580px));bottom:15%}
  .scrap:nth-child(4){--r:-5deg;--dx:110;--dy:380;--out-y:26;right:max(8vw,calc(50% - 590px));bottom:17%}
}

/* ─────────── ≤ 1100 ─────────── */
@media (max-width:1100px){
  .nav{grid-template-columns:auto 1fr auto}
  .nav__links{justify-content:center}
  .stamp{left:-34px;width:116px;height:116px}
  .stamp img{height:42px}
  .cert:not(.cert--lg){left:-40px}
  .foot__top{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot__brand{grid-column:1/-1}
}

/* ─────────── ≤ 899 · mobile ─────────── */
@media (max-width:899px){
  html{scroll-padding-top:68px}
  .bar{justify-content:space-between;gap:10px;font-size:.8125rem;text-align:left;padding-block:9px}
  .bar__long{display:none}
  .bar__text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .nav{grid-template-columns:1fr auto;padding-block:11px}
  .nav__links,.nav__login{display:none}
  .nav__logo img{height:30px}
  .nav__act{gap:10px}
  .btn--sm{height:40px;padding:0 17px;font-size:.875rem}
  .burger{display:block;width:40px;height:40px}
  .burger i{left:12px;right:12px}
  .burger i:nth-child(1){top:16px}.burger i:nth-child(2){top:23px}
  .burger[aria-expanded="true"] i:nth-child(1),.burger[aria-expanded="true"] i:nth-child(2){top:19.5px}

  .h-xl{font-size:clamp(2.5rem,12.4vw,4.6rem)}
  .h-lg{font-size:clamp(2.2rem,10.6vw,4.4rem)}

  .hero{padding-top:30px}
  .hero__grid,.phero__grid,.phero--solo .phero__grid--form{grid-template-columns:minmax(0,1fr);gap:44px}
  .hero__h{font-size:clamp(2.1rem,10.6vw,4.6rem);margin-top:18px}
  .hero__act{margin-top:30px}
  .hero__act .btn,.cta__act .btn{flex:1 1 100%}
  .hero__fig{justify-self:center;width:min(78%,360px)}
  .play{right:-30px;top:44%}
  .stamp{left:-40px;bottom:6%;width:108px;height:108px}
  .stamp img{height:38px}

  .ladder{grid-template-columns:repeat(2,1fr);margin-top:52px}
  .ladder__i{padding:20px 0 22px 20px}
  .ladder__i:nth-child(odd){padding-left:0;border-left:0}
  .ladder__i:nth-child(n+3){border-top:1px solid var(--line)}
  .ladder dt{font-size:2.5rem}

  .ticker{padding:16px 0}
  .ticker span,.ticker i{margin-right:26px}

  .pain__stage{display:flex;flex-direction:column;align-items:center}
  .pain__center{display:contents}
  .pain__center .eyebrow{order:1}
  .pain__h{order:2;text-align:center}
  .scraps{order:3;width:100%;max-width:350px;display:grid;gap:36px;margin:clamp(44px,8vh,72px) auto 0}
  .pain__close{order:4;text-align:center}
  .scrap:nth-child(odd){justify-self:start}
  .scrap:nth-child(even){justify-self:end}
  .scrap:nth-child(1){transform:rotate(-3deg)}
  .scrap:nth-child(2){transform:rotate(2.5deg)}
  .scrap:nth-child(3){transform:rotate(2deg)}
  .scrap:nth-child(4){transform:rotate(-2.5deg)}

  .path__body{grid-template-columns:minmax(0,1fr);gap:0}
  .lights{order:-1;position:sticky;top:60px;z-index:5;background:var(--paper);margin-inline:calc(var(--gutter)*-1);padding:14px var(--gutter) 16px;border-bottom:1px solid var(--line)}
  .lights__top{align-items:center}
  .lights__count output{font-size:2.1rem}
  .lights__name{font-size:1.0625rem}
  .lights__grid{display:none}
  .lights__blocks{margin-top:12px;gap:6px}
  .subjects{border-top:0}
  .subject{grid-template-columns:2.6rem minmax(0,1fr);row-gap:6px;padding:17px 0 16px}
  .subject__name{font-size:1.625rem}
  .subject__d{grid-column:2;text-align:left;opacity:1;transform:none}
  .subject.is-on .subject__name{transform:translateX(6px)}

  .cols--4,.cols--3{grid-template-columns:1fr 1fr}
  .cols li{padding:26px 12px 30px 20px}
  .cols li:nth-child(odd){padding-left:0;border-left:0}
  .cols li:nth-child(n+3){border-top:1px solid var(--line)}
  .cols--3 li:last-child{grid-column:1/-1}
  .cols p{font-size:.9375rem}

  .voices__body,.finish__grid,.split,.faq-grid,.cta{grid-template-columns:minmax(0,1fr)}
  .voices__body{gap:34px}
  .voices__stage{order:-1}
  .voices__nav{display:grid}
  .voices__tabs{justify-self:start}
  .voices__names button{padding:14px 0 13px;font-size:1rem}

  .finish__grid{gap:56px}
  .count b{font-size:clamp(2.1rem,10.5vw,3.4rem)}
  .finish__fig{width:min(100%,380px);padding:40px 18px 50px}
  .sticker--date{width:92px;height:92px}
  .sticker--date b{font-size:2.2rem}
  .sticker--prize{width:104px;height:104px}

  .split{gap:48px}
  .split__fig{justify-self:center;width:min(84%,400px)}
  .give .btn{width:100%}
  .faq-grid{gap:34px}
  .qa p{padding-right:20px}

  .cta{gap:60px}
  .cta__fig{justify-self:center;width:min(72%,320px)}
  .cert:not(.cert--lg){left:-52px;width:188px;padding:16px 14px 14px}
  .cert:not(.cert--lg) .cert__n{font-size:1.15rem}

  .band{height:clamp(240px,44vh,380px)}
  .syl{grid-template-columns:2.6rem minmax(0,1fr) 56px;row-gap:8px}
  .syl__d{grid-column:2/4;grid-row:2}
  .syl__lights{width:56px;grid-column:3;grid-row:1}
  .reach li{grid-template-columns:6.5rem 1fr}

  .foot__top{grid-template-columns:1fr 1fr}
  .foot__base{flex-direction:column;padding-bottom:104px}
  .foot__base a{margin:0 24px 0 0}

  .wa{right:14px;bottom:86px;width:54px;height:54px;padding:0;justify-content:center}
  .wa__label{display:none}
  .wa svg{width:28px;height:28px}
  .dock{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:45;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(251,249,244,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);
    transform:translateY(110%);transition:transform .6s var(--out),opacity .3s;
  }
  .dock.is-on{transform:none}
  .dock .btn{width:100%;height:54px}

  .quiz{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:72px 22px 32px}
  .quiz__opts--row{gap:8px}
  .quiz__opts--row button{padding:18px 14px}
  .quiz__form{grid-template-columns:1fr}
  .quiz__act .btn{flex:1 1 100%}
}

/* ─────────── tablets (700–899): keep the side-by-side heroes ─────────── */
@media (min-width:700px) and (max-width:899px){
  .hero__grid,.phero__grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:36px}
  .phero--solo .phero__grid{grid-template-columns:minmax(0,1fr)}
  .hero__h{font-size:clamp(2.6rem,6.6vw,3.6rem)}
  .phero .h-xl{font-size:clamp(2.5rem,6.4vw,3.4rem)}
  .hero__act .btn{flex:0 1 auto}
  .hero__fig{justify-self:end;width:100%}
  .phero .hero__fig{justify-self:end;width:100%}
  .play{right:-10px;top:42%}
  .stamp{left:-26px;width:96px;height:96px}
  .stamp img{height:34px}
  .ladder{grid-template-columns:repeat(4,1fr)}
  .ladder__i,.ladder__i:nth-child(odd){padding:20px 0 22px 16px;border-left:1px solid var(--line)}
  .ladder__i:first-child{padding-left:0;border-left:0}
  .ladder__i:nth-child(n+3){border-top:0}
  .cta,.split{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:36px}
  .cta__act .btn{flex:0 1 auto}
  .cta__fig,.split__fig{width:100%}
  .split__fig{order:2}
  .cert:not(.cert--lg){left:-30px;width:170px}
  .faq-grid{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:32px}
}

/* ─────────── ≤ 420 · small phones ─────────── */
@media (max-width:420px){
  .foot__top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 16px}
  .foot__col a,.foot__def,.reach a{overflow-wrap:anywhere}
  .reach li{grid-template-columns:minmax(0,1fr);gap:6px}
  .cert:not(.cert--lg){left:-10px;width:min(188px,60vw)}
  .play{right:-6px;padding-right:16px;font-size:.875rem}
  .stamp{left:-14px}
  .finish__fig{padding-inline:8px}
  .sticker--date{right:2px;width:80px;height:80px}
  .sticker--date b{font-size:1.9rem}
  .sticker--prize{left:0;width:92px;height:92px}
  .count div{padding-right:10px}
  .count div+div{padding-left:10px}
  .give__amts span{font-size:1.3rem}
  .quiz__opts--row b{font-size:2.2rem}
}
@media (max-width:340px){
  .foot__top{grid-template-columns:minmax(0,1fr)}
  .btn{padding:0 22px}
  .nav .btn--sm{padding:0 12px}
}

/* ─────────── motion off ─────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;transition-delay:0s !important}
  .opener{display:none}
  .ticker__track,.sticker--prize svg{animation:none}
  [data-reveal],.rl>span,.ladder__i,.play{opacity:1;transform:none}
  .stamp{opacity:1;transform:rotate(-13deg)}
  .arch,.arch picture{transform:none}
  .pain{height:auto !important}
  .pain__stage{position:relative !important;height:auto !important;min-height:min(100vh,900px)}
}

@media print{
  .bar,.nav,.wa,.dock,.opener,.menu{display:none !important}
  [data-reveal],.rl>span{opacity:1 !important;transform:none !important}
}

/* Arabic text: Amiri, used only for Arabic letters */
@font-face{font-family:"Alfiya Arabic";src:url("../fonts/amiri-arabic.woff2") format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0600-06FF,U+FB50-FDFF,U+FE70-FEFF}
:root{--serif:"Alfiya Arabic","Zodiak","Iowan Old Style","Times New Roman",serif;--sans:"Alfiya Arabic","Switzer","Helvetica Neue",Helvetica,Arial,sans-serif}

/* soft cross-fade between pages where the browser supports it */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ── Series menu dropdown (desktop) ── */
.navdrop{position:relative;display:inline-flex}
.navdrop__panel{position:absolute;left:50%;top:calc(100% + 14px);z-index:70;width:min(640px,80vw);padding:20px 20px 16px;border-radius:18px;background:var(--white);
  box-shadow:0 0 0 1px var(--line),0 40px 70px -30px rgba(16,12,46,.35);opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .25s,transform .35s var(--out),visibility 0s .25s}
.navdrop__panel::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.navdrop:hover .navdrop__panel,.navdrop:focus-within .navdrop__panel{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .25s,transform .35s var(--out)}
.navdrop__k{margin:0 0 10px 10px;font:500 .6875rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.navdrop__grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.navdrop__grid a{display:flex;align-items:baseline;gap:10px;padding:9px 10px;border-radius:10px;font-size:.9375rem;line-height:1.3;color:var(--ink);transition:background .2s}
.navdrop__grid a:hover,.navdrop__grid a:focus-visible{background:var(--paper)}
.navdrop__grid b{flex:none;font:500 .75rem/1 var(--sans);color:var(--gold)}
.navdrop__all{display:block;margin:10px 10px 0;padding-top:12px;border-top:1px solid var(--line);font-size:.875rem;font-weight:500;color:var(--indigo)}
@media (max-width:1099px){.navdrop__panel{display:none}}

/* ── /subjects/: each series opens to its 10 lessons ── */
.syllabus .syl{display:block;padding:clamp(18px,3vh,28px) 0}
.syl__box{width:100%}
.syl__box .syl__name{font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.08}
.syl__box summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:3.4rem minmax(0,1fr) auto 38px;align-items:center;gap:16px;padding:6px 0}
.syl__box summary::-webkit-details-marker{display:none}
.syl__box summary:focus-visible{outline:2px solid var(--gold);outline-offset:6px;border-radius:8px}
.syl__h{display:grid;gap:6px;min-width:0}
.syl__about{color:var(--ink-2);font-size:.9375rem;max-width:60ch}
.syl__c{font-size:.8125rem;color:var(--ink-3);white-space:nowrap}
.syl__x{width:38px;height:38px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2);
  background:linear-gradient(var(--ink),var(--ink)) center/12px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1.5px 12px no-repeat;transition:transform .45s var(--out)}
.syl__box[open] .syl__x{transform:rotate(135deg)}
.syl__lessons{list-style:none;margin:18px 0 8px;padding:0 0 0 calc(3.4rem + 16px);display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.syl__lessons li{display:grid;gap:6px;align-content:start}
.syl__lessons img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:10px;background:var(--paper-2)}
.syl__ln{font:500 .6875rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.syl__lt{font:400 1rem/1.3 var(--serif)}
.syl__lessons .chip{justify-self:start;padding:3px 9px;border-radius:999px;background:rgba(227,182,87,.22);font:500 .6875rem/1.4 var(--sans);color:#6b4a00}
.syl:target .syl__name,.syl.is-hit .syl__name{color:var(--indigo)}
@media (max-width:899px){
  .syl__box summary{grid-template-columns:2.4rem minmax(0,1fr) 32px;gap:12px}
  .syl__c{display:none}
  .syl__x{width:32px;height:32px}
  .syl__lessons{padding-left:0;grid-template-columns:1fr 1fr;gap:12px}
}

/* homepage list: the real series names are long, so the line under each one opens below it */
.subject{grid-template-columns:3.4rem minmax(0,1fr);row-gap:0}
.subject__name{font-size:clamp(1.35rem,2.1vw,1.9rem)}
.subject__d{grid-column:2;text-align:left;max-height:0;overflow:hidden;transition:opacity .4s ease,transform .6s var(--out),max-height .5s var(--out),margin .5s var(--out)}
.subject.is-on .subject__d{max-height:3.2em;margin-top:8px}
@media (max-width:899px){.subject__d{max-height:none}.subject.is-on .subject__d{margin-top:0}}


/* ═══════════════ home: look inside ═══════════════ */
.peek__chips{display:flex;gap:8px;overflow-x:auto;margin-top:clamp(28px,5vh,44px);padding:4px 2px 12px;scrollbar-width:none;scroll-snap-type:x proximity}
.peek__chips::-webkit-scrollbar{display:none}
.peek__chip{all:unset;box-sizing:border-box;cursor:pointer;flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 18px 0 7px;border-radius:999px;
  background:var(--white);box-shadow:0 0 0 1px var(--line);font:500 .9375rem/1 var(--sans);color:var(--ink-2);white-space:nowrap;transition:background .25s,color .25s,box-shadow .25s}
.peek__chip b{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--paper-2);font:600 .8125rem/1 var(--sans);color:var(--ink-2);transition:background .25s,color .25s}
.peek__chip:hover{color:var(--ink);box-shadow:0 0 0 1px var(--line-2)}
.peek__chip[aria-selected="true"]{background:var(--ink);color:#fff;box-shadow:0 12px 24px -16px rgba(16,12,46,.7)}
.peek__chip[aria-selected="true"] b{background:var(--gold-lit);color:var(--ink)}
.peek__chip:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.peek__about{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:18px 0 0;color:var(--ink-2)}
.peek__about span{font:600 .6875rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.peek__strip{list-style:none;margin:18px calc(var(--gutter)*-1) 0;padding:6px var(--gutter) 18px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,23%);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:var(--gutter);scrollbar-width:thin}
.peek__card{scroll-snap-align:start;display:grid;gap:6px;align-content:start}
.peek__pic{position:relative;display:block;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--paper-2);box-shadow:0 18px 30px -24px rgba(16,12,46,.6);transition:transform .45s var(--out)}
.peek__pic img{width:100%;height:100%;object-fit:contain;display:block}
.peek__pic em{position:absolute;left:10px;top:10px;padding:5px 10px;border-radius:999px;background:var(--gold-lit);font:600 .6875rem/1 var(--sans);font-style:normal;letter-spacing:.06em;color:var(--ink)}
.peek__card:hover .peek__pic{transform:translateY(-3px)}
.peek__card small{margin-top:6px;font:500 .6875rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.peek__card b{font:400 1.05rem/1.3 var(--serif);font-weight:400}
.peek__act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:22px}
.peek__act .fine{margin:0}

/* ═══════════════ home: the app ═══════════════ */
.appdemo__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,96px);align-items:center}
.appdemo__tabs{list-style:none;margin:clamp(26px,4vh,40px) 0 18px;padding:0;display:grid;gap:8px}
.appdemo__tab{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:grid;grid-template-columns:2.4rem minmax(0,1fr);column-gap:10px;row-gap:4px;width:100%;padding:16px 18px;border-radius:18px;overflow:hidden;transition:background .3s,box-shadow .3s}
.appdemo__n{grid-row:1/3;font:500 .75rem/1.6 var(--sans);letter-spacing:.1em;color:var(--ink-3)}
.appdemo__tab b{font:400 1.45rem/1.15 var(--serif);letter-spacing:-.02em;color:var(--ink-2);transition:color .3s}
.appdemo__tab small{font-size:.9375rem;color:var(--ink-2);max-height:0;opacity:0;overflow:hidden;transition:max-height .45s var(--out),opacity .35s}
.appdemo__tab[aria-pressed="true"]{background:var(--white);box-shadow:0 0 0 1px var(--line),0 22px 40px -32px rgba(16,12,46,.5)}
.appdemo__tab[aria-pressed="true"] b{color:var(--ink)}
.appdemo__tab[aria-pressed="true"] .appdemo__n{color:var(--gold)}
.appdemo__tab[aria-pressed="true"] small{max-height:4.5em;opacity:1}
.appdemo__tab:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.appdemo__bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-lit))}
.appdemo:not(.is-held) .appdemo__tab[aria-pressed="true"] .appdemo__bar{animation:appbar 4.5s linear forwards}
@keyframes appbar{to{width:100%}}
.appdemo .phone{position:relative;justify-self:center;width:min(100%,340px)}
.phone__frame{position:relative;z-index:1;padding:12px;border-radius:48px;background:linear-gradient(160deg,#1b1640,#0b0830);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12),0 60px 90px -50px rgba(16,12,46,.75)}
.phone__screen{position:relative;aspect-ratio:585/1266;border-radius:37px;overflow:hidden;background:var(--paper)}
.phone__shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.02);transition:opacity .55s ease,transform .8s var(--out)}
.phone__shot.is-on{opacity:1;transform:none}
.phone__glow{position:absolute;inset:12% -18% 6%;z-index:0;border-radius:50%;background:radial-gradient(closest-side,rgba(227,182,87,.45),transparent);filter:blur(10px)}

/* ═══════════════ home: your certificate ═══════════════ */
.mine__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,96px);align-items:center}
.mine__form{display:grid;gap:26px;margin-top:clamp(26px,4vh,40px);max-width:440px}
.mine__pace{display:grid;gap:14px}
.mine__pace>span{display:flex;justify-content:space-between;align-items:baseline;font:500 .6875rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.mine__pace output{font:400 1.6rem/1 var(--serif);letter-spacing:0;text-transform:none;color:var(--indigo)}
.mine__pace input{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--gold) var(--p,0%),var(--line-2) var(--p,0%));outline:none;cursor:pointer}
.mine__pace input::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--white);box-shadow:0 0 0 2px var(--indigo),0 6px 14px -4px rgba(16,12,46,.4)}
.mine__pace input::-moz-range-thumb{width:24px;height:24px;border:2px solid var(--indigo);border-radius:50%;background:var(--white)}
.mine__pace input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--indigo),0 0 0 6px rgba(227,182,87,.45)}
.mine__when{display:grid;gap:6px;margin:0;padding:18px 20px;border-radius:18px;background:var(--white);box-shadow:0 0 0 1px var(--line)}
.mine__when small{font:500 .6875rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.mine__when b{font:400 2rem/1.05 var(--serif);letter-spacing:-.025em;font-weight:400}
.mine__when span{font-size:.875rem;color:var(--ink-2)}
.mcert{position:relative;margin:0;display:grid;justify-items:center;text-align:center;padding:clamp(28px,4vw,56px) clamp(20px,4vw,56px) clamp(24px,3vw,40px);background:var(--white);
  outline:1px solid var(--gold);outline-offset:calc(clamp(8px,1.2vw,16px)*-1);box-shadow:0 0 0 1px var(--line),0 60px 90px -60px rgba(16,12,46,.55);overflow:hidden;transform:rotate(-1.2deg)}
.mcert__wm{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%) rotate(-18deg);font:600 clamp(2.6rem,7vw,5.6rem)/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:rgba(31,10,140,.05);pointer-events:none;white-space:nowrap}
.mcert__mark{height:clamp(52px,7vw,78px);width:auto}
.mcert__k{margin-top:16px;font:600 clamp(.5625rem,1vw,.6875rem)/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2)}
.mcert__s{margin-top:14px;max-width:44ch;font-size:clamp(.75rem,1.2vw,.875rem);color:var(--ink-2)}
.mcert__n{margin-top:8px;min-width:60%;padding:0 12px 10px;border-bottom:1px solid var(--line-2);font:italic 400 clamp(1.7rem,4.4vw,3.2rem)/1.05 var(--serif);letter-spacing:-.01em;color:var(--ink-3);overflow-wrap:anywhere;transition:color .3s}
.mcert__n.is-set{color:var(--ink)}
.mcert__t{margin-top:8px;font:400 clamp(1.15rem,2.4vw,1.8rem)/1 var(--serif);color:var(--indigo)}
.mcert__foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:16px;width:100%;margin-top:clamp(20px,3vw,36px)}
.mcert__foot>div{display:grid;justify-items:center;gap:5px}
.mcert__foot b{font-weight:500;font-size:clamp(.75rem,1.2vw,.875rem)}
.mcert__foot span{font:500 .5625rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.mcert__foot img{width:clamp(70px,9vw,110px);height:auto}
.mcert__qr{width:clamp(48px,6vw,72px);aspect-ratio:1;border-radius:4px;background:repeating-linear-gradient(45deg,rgba(16,12,46,.09) 0 4px,transparent 4px 8px)}

@media (max-width:899px){
  .peek__strip{grid-auto-columns:72%}
  .appdemo__grid,.mine__grid{grid-template-columns:minmax(0,1fr)}
  .appdemo .phone{width:min(78%,300px);order:-1}
  .appdemo__tabs{margin-top:22px}
  .appdemo__tab{padding:14px 16px}
  .appdemo__tab b{font-size:1.25rem}
  .mcert{transform:none}
  .mine__form{max-width:none}
}
@media (prefers-reduced-motion:reduce){.phone__shot{transition:none}.appdemo__bar{display:none}}

/* heading, then the picture, then the controls: side by side on desktop, stacked in that order on phones */
.appdemo__grid{grid-template-areas:"head phone" "list phone";grid-template-rows:auto 1fr;row-gap:0}
.appdemo__head{grid-area:head}.appdemo__list{grid-area:list}.appdemo .phone{grid-area:phone}
.mine__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"head cert" "form cert";grid-template-rows:auto 1fr;row-gap:0}
.mine__head{grid-area:head}.mine__form{grid-area:form;align-self:start}.mine .mcert{grid-area:cert}
@media (max-width:899px){
  .appdemo__grid{grid-template-areas:"head" "phone" "list";row-gap:26px}
  .appdemo .phone{order:0}
  .mine__grid{grid-template-areas:"head" "cert" "form";row-gap:26px}
  .mine__form{margin-top:0}
}
.mine__grid{grid-template-areas:"head head" "form cert";row-gap:clamp(26px,4vh,40px);align-items:start}
.mine .mcert{align-self:center}
@media (max-width:899px){
  .appdemo__grid,.mine__grid{grid-template-columns:minmax(0,1fr)}
  .mine__grid{grid-template-areas:"head" "cert" "form";row-gap:26px}
}

/* ── three ways in: for yourself · scholarship · for others ── */
.give__amts span small{display:block;margin-top:6px;font:500 .6875rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.access__head{display:grid;justify-items:start}
.where{display:inline-flex;align-items:center;gap:10px;margin:clamp(20px,3vh,28px) 0 0;padding:9px 16px 9px 14px;border-radius:999px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line);font:500 .875rem/1 var(--sans);color:var(--ink-2)}
.where__pin{width:9px;height:9px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--indigo);flex:none}
.access__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);margin-top:clamp(36px,6vh,64px);align-items:stretch}
.acard{position:relative;display:flex;flex-direction:column;gap:18px;padding:clamp(24px,2.4vw,34px);border-radius:24px;background:var(--white);
  box-shadow:0 0 0 1px var(--line),0 30px 60px -48px rgba(16,12,46,.55)}
.acard__k{margin:0;font:500 .6875rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.acard__p{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:0}
.acard__p b{font:400 clamp(2.4rem,3.6vw,3.2rem)/1 var(--serif);letter-spacing:-.035em;color:var(--ink)}
.acard__p small{font-size:.9375rem;color:var(--ink-2)}
.acard__l{list-style:none;margin:0;padding:0;display:grid;gap:10px;flex:1}
.acard__l li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:start;font-size:.9375rem;color:var(--ink-2)}
.acard__l svg{width:16px;height:16px;margin-top:3px;color:var(--indigo)}
.acard .btn{align-self:flex-start}
.acard .fine{margin:0;font-size:.875rem}
.acard--free{background:var(--paper-2);box-shadow:0 0 0 1px var(--line)}
.acard--free .acard__p b{color:#1d7a45}
.acard--free .acard__l svg{color:#1d7a45}
.acard--give{background:var(--indigo);color:#fff;box-shadow:0 30px 60px -36px rgba(31,10,140,.7)}
.acard--give .acard__k,.acard--give .acard__p small,.acard--give .fine{color:rgba(255,255,255,.72)}
.acard--give .acard__p b{color:#fff}
.acard--give .btn{background:#fff;color:var(--indigo)}
.acard--give .btn:hover{background:var(--gold-lit,#E3B657);color:var(--ink)}
.acard__give{display:grid;gap:18px;flex:1;align-content:start}
.seatpick{display:block;margin:0;padding:0;border:0;min-width:0}
.seatpick__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.seatpick legend{padding:0;margin-bottom:10px;font:500 .6875rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.seatpick label{position:relative;display:block;cursor:pointer}
.seatpick input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.seatpick span{display:grid;place-items:center;height:52px;border-radius:14px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);font:500 1.25rem/1 var(--sans);transition:background .2s,color .2s}
.seatpick label:hover span{background:rgba(255,255,255,.18)}
.seatpick input:checked+span{background:#fff;color:var(--indigo)}
.seatpick input:focus-visible+span{outline:2px solid var(--gold-lit,#E3B657);outline-offset:2px}
.access__pay{margin-top:22px}
@media (max-width:980px){.access__grid{grid-template-columns:minmax(0,1fr);max-width:560px}}