/* =========================================================
   NY Exam — design system
   Bright, friendly, premium. Modern app, not school district.
   Tokens first. Change a token, restyle the site.
   ========================================================= */

:root{
  /* ---- brand ---- */
  --blue:#1565D8;        --blue-hover:#0F56BC;   --blue-light:#3A86FF;
  --green:#69C52F;       --green-hover:#58B227;  --green-light:#8EDB3E;
  --orange:#FF8A1F;      --orange-light:#FFC14A;
  --purple:#7B3FE4;
  --teal:#00A8A8;

  /* ---- exam accents ---- */
  --exam-regents:var(--blue);
  --exam-state:var(--green);
  --exam-shsat:var(--purple);
  --exam-tachs:var(--orange);
  --exam-hspt:var(--teal);

  /* ---- surfaces ---- */
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --alt:#EEF6FF;
  --hairline:rgba(27,31,42,.07);

  /* ---- text ---- */
  --ink:#1B1F2A;
  --body:#5F6B7A;
  --muted:#9AA5B1;

  /* ---- gradients ---- */
  --grad-hero:linear-gradient(160deg,#1565D8 0%,#3A86FF 100%);
  --grad-success:linear-gradient(160deg,#69C52F 0%,#8EDB3E 100%);
  --grad-achieve:linear-gradient(160deg,#FF8A1F 0%,#FFC14A 100%);
  --grad-purple:linear-gradient(160deg,#7B3FE4 0%,#A175F0 100%);
  --grad-soft:linear-gradient(180deg,#EEF6FF 0%,#F8FAFC 70%);

  /* ---- shape ---- */
  --r-sm:12px; --r:18px; --r-lg:24px; --r-xl:32px; --pill:999px;

  /* ---- shadows: soft, never harsh ---- */
  --sh-sm:0 2px 8px rgba(27,31,42,.05);
  --sh:0 6px 22px rgba(27,31,42,.07);
  --sh-lg:0 18px 48px rgba(27,31,42,.10);
  --sh-blue:0 12px 30px rgba(21,101,216,.28);
  --sh-green:0 12px 30px rgba(105,197,47,.30);

  /* ---- rhythm ---- */
  --s1:.375rem; --s2:.625rem; --s3:1rem; --s4:1.5rem; --s5:2.25rem;
  --s6:3.5rem; --s7:5rem; --s8:7rem;
  --wrap:1160px;

  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,
         "Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 17px/1.65 var(--font);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

/* ---------- type ---------- */
h1,h2,h3,h4{margin:0; line-height:1.1; letter-spacing:-.03em; font-weight:800}
h1{font-size:clamp(2.5rem,5.4vw,4rem); letter-spacing:-.04em}
h2{font-size:clamp(1.9rem,3.4vw,2.7rem)}
h3{font-size:1.2rem; letter-spacing:-.02em; line-height:1.3}
h4{font-size:1rem; letter-spacing:-.01em}
p{margin:0}
a{color:var(--blue); text-decoration:none}
a:hover{color:var(--blue-hover)}
strong{font-weight:700; color:var(--ink)}

.lede{font-size:clamp(1.1rem,1.75vw,1.3rem); color:var(--body); line-height:1.6; font-weight:450}
.label{
  display:inline-block; font-size:.78rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--blue); margin-bottom:var(--s3);
}
.note{font-size:.94rem; color:var(--muted); line-height:1.6}
.measure{max-width:64ch}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--s4)}
section{padding-block:var(--s8); position:relative}
@media(max-width:700px){ section{padding-block:var(--s7)} }
.band{background:var(--alt)}
.band-white{background:var(--card)}

.sec-head{max-width:60ch; margin-bottom:var(--s6)}
.sec-head p{margin-top:var(--s3); color:var(--body); font-size:1.08rem}
.center{text-align:center; margin-inline:auto}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font:700 1.02rem/1 var(--font); letter-spacing:-.01em;
  padding:1.05rem 1.9rem; border-radius:var(--pill); border:2px solid transparent;
  background:var(--blue); color:#fff; cursor:pointer; white-space:nowrap;
  box-shadow:var(--sh-blue);
  transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s ease, background .18s ease;
}
.btn:hover{background:var(--blue-hover); color:#fff; transform:translateY(-2px); box-shadow:0 16px 34px rgba(21,101,216,.34)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid var(--blue-light); outline-offset:3px}

.btn--success{background:var(--green); box-shadow:var(--sh-green)}
.btn--success:hover{background:var(--green-hover); box-shadow:0 16px 34px rgba(105,197,47,.36)}

.btn--outline{background:var(--card); color:var(--blue); border-color:var(--blue); box-shadow:var(--sh-sm)}
.btn--outline:hover{background:var(--alt); color:var(--blue-hover); border-color:var(--blue-hover); box-shadow:var(--sh)}

.btn--onblue{background:#fff; color:var(--blue); box-shadow:0 12px 30px rgba(0,0,0,.18)}
.btn--onblue:hover{background:#fff; color:var(--blue-hover); box-shadow:0 18px 40px rgba(0,0,0,.24)}

.btn--ghost{background:transparent; color:var(--blue); border-color:rgba(21,101,216,.25); box-shadow:none}
.btn--ghost:hover{background:var(--alt); box-shadow:none}

.btn--sm{padding:.7rem 1.25rem; font-size:.92rem; box-shadow:var(--sh-sm)}
.btn--lg{padding:1.2rem 2.3rem; font-size:1.1rem}
.btn--block{display:flex; width:100%}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(248,250,252,.82); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--hairline);
}
.masthead{display:flex; align-items:center; justify-content:space-between; gap:var(--s4); height:88px}
.brand{display:flex; align-items:center}
.brand__logo{height:56px; width:auto; display:block}
@media(max-width:680px){ .masthead{height:74px} .brand__logo{height:44px} }
@media(max-width:420px){ .brand__logo{height:38px} }
.site-nav{display:flex; align-items:center; gap:var(--s5)}
.site-nav > a{font-weight:600; font-size:.98rem; color:var(--body)}
.site-nav > a:hover{color:var(--blue)}
.site-nav > a[aria-current="page"]{color:var(--blue); font-weight:700}
@media(max-width:880px){ .site-nav > a{display:none} }

/* ---------- menu button ---------- */
.menu-wrap{position:relative}
.menu-btn{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  width:auto; height:48px; padding:0 1.15rem;
  background:var(--card); border:2px solid #E3E9F0; border-radius:var(--pill);
  cursor:pointer; color:var(--ink); font:700 .95rem/1 var(--font);
  box-shadow:var(--sh-sm); transition:border-color .18s ease, box-shadow .18s ease;
}
.menu-btn:hover{border-color:var(--blue); box-shadow:var(--sh)}
.menu-btn:focus-visible{outline:3px solid var(--blue-light); outline-offset:3px}
.menu-btn__bars{display:grid; gap:4px; width:20px}
.menu-btn__bars span{display:block; height:2.5px; border-radius:2px; background:var(--blue); transition:transform .22s ease, opacity .18s ease}
.menu-btn[aria-expanded="true"] .menu-btn__bars span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-btn__bars span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .menu-btn__bars span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.menu-btn__label{letter-spacing:-.01em}
@media(max-width:420px){ .menu-btn{padding:0 .9rem} .menu-btn__label{display:none} }

/* ---------- menu panel ---------- */
.nav-panel{
  position:absolute; top:calc(100% + 12px); right:0; z-index:60;
  width:min(92vw,380px); background:var(--card); border-radius:var(--r-lg);
  box-shadow:var(--sh-lg); padding:var(--s3); animation:panelIn .18s ease-out;
}
.nav-panel[hidden]{display:none}
@keyframes panelIn{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none}}
@media(prefers-reduced-motion:reduce){ .nav-panel{animation:none} }
.nav-panel__head{
  font-size:.72rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); padding:.6rem .8rem .4rem;
}
.nav-panel__link{
  display:flex; align-items:center; gap:.8rem; padding:.75rem .8rem;
  border-radius:var(--r-sm); color:var(--ink); font-weight:650; font-size:1rem;
}
.nav-panel__link:hover{background:var(--alt); color:var(--ink)}
.nav-panel__link[aria-current="page"]{background:var(--alt); color:var(--blue)}
.nav-panel__dot{
  flex:0 0 auto; width:30px; height:30px; border-radius:9px; background:var(--c,var(--blue));
  color:#fff; display:grid; place-items:center; font-size:.78rem; font-weight:800;
}
.nav-panel__meta{margin-left:auto; font-size:.72rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em}
.nav-panel hr{border:0; border-top:1px solid var(--hairline); margin:var(--s2) .8rem}
.nav-panel .btn{width:100%; margin-top:var(--s2)}
body.menu-open{overflow:hidden}
@media(min-width:881px){ body.menu-open{overflow:auto} }

/* ---------- hero ---------- */
.hero{
  background:var(--grad-soft);
  padding-block:var(--s8) var(--s7);
  overflow:hidden;
}
.hero__inner{position:relative; z-index:2; text-align:center; max-width:62rem; margin-inline:auto}
.hero .lede{margin:var(--s4) auto 0; max-width:46ch}
.hero__cta{display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s5); justify-content:center}
.hero__note{margin-top:var(--s4)}

/* floating decorative shapes */
.shapes{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.shape{position:absolute; border-radius:42% 58% 55% 45%/48% 42% 58% 52%; opacity:.10; filter:blur(28px)}
.shape--1{width:340px;height:340px;background:var(--blue);   top:-90px;  left:-90px;  animation:drift 22s ease-in-out infinite}
.shape--2{width:220px;height:220px;background:var(--green);  top:12%;    right:-60px; animation:drift 26s ease-in-out infinite reverse}
.shape--3{width:150px;height:150px;background:var(--orange); bottom:12%; left:6%;     animation:drift 19s ease-in-out infinite}
.shape--4{width:190px;height:190px;background:var(--purple); bottom:-70px;right:14%;  animation:drift 30s ease-in-out infinite reverse}
@keyframes drift{
  0%,100%{transform:translate(0,0) rotate(0deg) scale(1)}
  50%    {transform:translate(18px,-24px) rotate(14deg) scale(1.06)}
}
@media(prefers-reduced-motion:reduce){ .shape{animation:none} html{scroll-behavior:auto} }

.flag{
  display:inline-flex; align-items:center; gap:.55rem;
  font-weight:700; font-size:.88rem; color:#8a4a00;
  background:#FFF3E2; border:1.5px solid #FFD9A8;
  padding:.5rem 1rem; border-radius:var(--pill); margin-bottom:var(--s4);
}
.flag::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--orange)}

/* ---------- exam cards (hero row) ---------- */
.exam-row{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); margin-top:var(--s6); position:relative; z-index:2}
@media(max-width:900px){ .exam-row{grid-template-columns:1fr 1fr} }
@media(max-width:480px){ .exam-row{grid-template-columns:1fr} }
.chip{
  background:var(--card); border-radius:var(--r-lg); padding:var(--s4);
  box-shadow:var(--sh); display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:.6rem; color:var(--ink);
  transition:transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease;
  border-top:5px solid var(--c, var(--blue));
}
.chip:hover{transform:translateY(-5px); box-shadow:var(--sh-lg); color:var(--ink)}
.chip__dot{
  width:46px; height:46px; border-radius:14px; background:var(--c);
  display:grid; place-items:center; font-size:1.35rem; color:#fff; font-weight:800;
}
.chip__name{font-weight:800; font-size:1.05rem; letter-spacing:-.02em}
.chip__sub{font-size:.85rem; color:var(--muted); font-weight:500}
.c-regents{--c:var(--exam-regents)}
.c-state{--c:var(--exam-state)}
.c-shsat{--c:var(--exam-shsat)}
.c-tachs{--c:var(--exam-tachs)}
.c-hspt{--c:var(--exam-hspt)}

/* ---------- key figures ---------- */
.figures{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); margin-top:var(--s6)}
@media(max-width:760px){ .figures{grid-template-columns:repeat(2,1fr)} }
.figure{background:var(--card); border-radius:var(--r-lg); padding:var(--s4); box-shadow:var(--sh-sm); text-align:center}
.figure__n{font-size:2rem; font-weight:800; letter-spacing:-.04em; color:var(--blue)}
.figure:nth-child(2) .figure__n{color:var(--green)}
.figure:nth-child(3) .figure__n{color:var(--purple)}
.figure:nth-child(4) .figure__n{color:var(--orange)}
.figure__l{font-size:.9rem; color:var(--muted); margin-top:.35rem; font-weight:500}

/* ---------- exam directory ---------- */
.exams{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); margin-top:var(--s5)}
@media(max-width:900px){ .exams{grid-template-columns:1fr 1fr} }
@media(max-width:600px){ .exams{grid-template-columns:1fr} }
.exam{
  display:flex; flex-direction:column; background:var(--card); border-radius:var(--r-lg);
  padding:var(--s5) var(--s4); box-shadow:var(--sh); color:inherit; min-height:230px;
  border-top:5px solid var(--c,var(--blue));
  transition:transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease;
}
.exam:hover{transform:translateY(-5px); box-shadow:var(--sh-lg); color:inherit}
.exam__top{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s3)}
.exam h3{color:var(--ink)}
.exam__who{font-size:.88rem; color:var(--muted); margin-top:.3rem; font-weight:500}
.exam p{color:var(--body); font-size:.97rem; margin-top:var(--s3)}
.exam__go{margin-top:auto; padding-top:var(--s4); font-weight:700; font-size:.94rem; color:var(--c,var(--blue))}
.exam__go::after{content:" \2192"}

.status{font-size:.72rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  padding:.4rem .7rem; border-radius:var(--pill); white-space:nowrap}
.status--live{background:#EAF8E0; color:#3F7D12}
.status--soon{background:#EEF2F7; color:var(--muted)}

/* ---------- feature cards ---------- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4)}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4)}
@media(max-width:900px){ .grid-3{grid-template-columns:1fr 1fr} }
@media(max-width:640px){ .grid-3,.grid-2{grid-template-columns:1fr} }
.feature{
  background:var(--card); border-radius:var(--r-lg); padding:var(--s5) var(--s4);
  box-shadow:var(--sh-sm); transition:transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease;
}
.feature:hover{transform:translateY(-4px); box-shadow:var(--sh)}
.feature p{color:var(--body); font-size:.98rem; margin-top:.6rem}
.feature__icon{
  width:52px; height:52px; border-radius:16px; display:grid; place-items:center;
  margin-bottom:var(--s3); font-size:1.4rem; background:var(--alt); color:var(--blue);
}
.feature:nth-child(2) .feature__icon{background:#EAF8E0; color:#3F7D12}
.feature:nth-child(3) .feature__icon{background:#F1EAFE; color:var(--purple)}
.feature:nth-child(4) .feature__icon{background:#FFF3E2; color:#B35F00}
.feature:nth-child(5) .feature__icon{background:#E0F7F7; color:#00807F}
.feature:nth-child(6) .feature__icon{background:var(--alt); color:var(--blue)}

/* ---------- table ---------- */
.table-scroll{overflow-x:auto; margin-top:var(--s5); background:var(--card);
  border-radius:var(--r-lg); box-shadow:var(--sh); padding:var(--s2)}
table.data{width:100%; border-collapse:collapse; font-size:1rem; min-width:600px}
table.data th, table.data td{text-align:left; padding:1.05rem 1.15rem; vertical-align:top}
table.data tbody tr + tr td{border-top:1px solid var(--hairline)}
table.data thead th{font-size:.76rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); padding-bottom:.75rem}
table.data td:first-child{font-weight:700}
table.data .was{color:var(--muted); text-decoration:line-through; text-decoration-color:rgba(154,165,177,.6)}
table.data .now{color:#3F7D12; font-weight:700}

/* ---------- pricing ---------- */
.prices{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4); margin-top:var(--s5); align-items:stretch}
@media(max-width:940px){ .prices{grid-template-columns:1fr 1fr} }
@media(max-width:540px){ .prices{grid-template-columns:1fr} }
.price{
  background:var(--card); border-radius:var(--r-xl); padding:var(--s5) var(--s4);
  display:flex; flex-direction:column; box-shadow:var(--sh); position:relative;
  transition:transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease;
}
.price:hover{transform:translateY(-4px); box-shadow:var(--sh-lg)}
.price--best{box-shadow:var(--sh-lg), 0 0 0 3px var(--blue)}
.price__tag{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--grad-achieve); color:#5b3000; font-size:.72rem; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; padding:.42rem .9rem;
  border-radius:var(--pill); white-space:nowrap; box-shadow:var(--sh-sm);
}
.price__qty{font-size:.95rem; color:var(--muted); font-weight:700}
.price__amt{font-size:2.6rem; font-weight:800; letter-spacing:-.045em; margin:.35rem 0 .15rem}
.price__each{font-size:.9rem; color:var(--muted); font-weight:500}
.price__save{display:inline-block; margin-top:.7rem; background:#EAF8E0; color:#3F7D12;
  font-weight:700; font-size:.86rem; padding:.32rem .8rem; border-radius:var(--pill)}
.price__foot{margin-top:auto; padding-top:var(--s4)}

/* ---------- claims ---------- */
.claims{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); margin-top:var(--s5)}
@media(max-width:760px){ .claims{grid-template-columns:1fr} }
.claim{display:flex; gap:var(--s3); align-items:flex-start; background:var(--card);
  border-radius:var(--r-lg); padding:var(--s4); box-shadow:var(--sh-sm)}
.claim__mark{
  flex:0 0 auto; width:30px; height:30px; border-radius:10px;
  display:grid; place-items:center; font-weight:800; font-size:.85rem;
  background:#FFECEC; color:#C0392B;
}
.claim--info .claim__mark{background:var(--alt); color:var(--blue)}
.claim p{color:var(--body); font-size:.96rem; margin-top:.3rem}

/* ---------- steps ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); margin-top:var(--s5)}
@media(max-width:860px){ .steps{grid-template-columns:1fr} }
.step{background:var(--card); border-radius:var(--r-lg); padding:var(--s5) var(--s4); box-shadow:var(--sh-sm)}
.step__n{
  width:48px; height:48px; border-radius:16px; display:grid; place-items:center;
  font-weight:800; font-size:1.15rem; color:#fff; background:var(--grad-hero);
  margin-bottom:var(--s3); box-shadow:var(--sh-sm);
}
.step:nth-child(2) .step__n{background:var(--grad-success)}
.step:nth-child(3) .step__n{background:var(--grad-purple)}
.step p{color:var(--body); font-size:.97rem; margin-top:.5rem}

/* ---------- checklist ---------- */
.checks{list-style:none; margin:var(--s4) 0 0; padding:0; max-width:64ch}
.checks li{position:relative; padding:.85rem 0 .85rem 2.2rem; color:var(--body)}
.checks li + li{border-top:1px solid var(--hairline)}
.checks li::before{
  content:"\2713"; position:absolute; left:0; top:.85rem;
  width:22px; height:22px; border-radius:50%; background:#EAF8E0; color:#3F7D12;
  display:grid; place-items:center; font-size:.75rem; font-weight:800;
}

/* ---------- callout ---------- */
.callout{
  background:var(--grad-hero); color:#fff; border-radius:var(--r-xl);
  padding:var(--s6) var(--s5); display:flex; gap:var(--s5);
  align-items:center; justify-content:space-between; flex-wrap:wrap;
  box-shadow:var(--sh-lg);
}
.callout h2{color:#fff}
.callout p{color:rgba(255,255,255,.88); margin-top:var(--s3); max-width:52ch}
.callout--purple{background:var(--grad-purple)}

/* ---------- forms ---------- */
.notify{background:var(--card); border-radius:var(--r-xl); padding:var(--s5); box-shadow:var(--sh); max-width:640px; margin-top:var(--s5)}
.notify form{display:flex; gap:var(--s2); margin-top:var(--s4); flex-wrap:wrap}
.notify input{
  flex:1 1 260px; padding:1rem 1.2rem; border:2px solid #E3E9F0; border-radius:var(--pill);
  font:inherit; font-size:1rem; color:var(--ink); background:var(--bg);
}
.notify input::placeholder{color:var(--muted)}
.notify input:focus{outline:none; border-color:var(--blue); background:var(--card);
  box-shadow:0 0 0 4px rgba(21,101,216,.14)}

/* ---------- imagery ---------- */
figure{margin:0}
.shot{border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-lg); background:var(--card)}
.shot img{display:block; width:100%; height:auto}
.shot--tall img{aspect-ratio:4/3; object-fit:cover}
.shots{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); margin-top:var(--s5)}
@media(max-width:700px){ .shots{grid-template-columns:1fr} }
.shots img{aspect-ratio:3/2; object-fit:cover}
/* The banner is a composed graphic with type at the top and a bar at the
   bottom — it must never be cropped. Show it whole, always. */
.banner{padding-block:var(--s6)}
.banner .wrap{padding-inline:var(--s4)}
.banner img{display:block; width:100%; height:auto; border-radius:var(--r-xl); box-shadow:var(--sh-lg)}

/* ---------- FAQ ---------- */
.faq details{
  background:var(--card); border-radius:var(--r); box-shadow:var(--sh-sm);
  margin-bottom:var(--s2); overflow:hidden;
}
.faq summary{
  cursor:pointer; list-style:none; padding:1.25rem var(--s4); font-weight:700;
  display:flex; justify-content:space-between; align-items:center; gap:var(--s4);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; flex:0 0 auto; width:28px; height:28px; border-radius:50%;
  background:var(--alt); color:var(--blue); display:grid; place-items:center;
  font-size:1.2rem; font-weight:700; line-height:1;
}
.faq details[open] summary::after{content:"\2013"}
.faq details p{color:var(--body); padding:0 var(--s4) var(--s4); max-width:72ch; margin-top:-.35rem}

/* ---------- interior page hero ---------- */
.page-hero{padding-block:var(--s7) var(--s6); background:var(--grad-soft); overflow:hidden}
.page-hero__inner{position:relative; z-index:2}
.crumb{font-size:.9rem; color:var(--muted); margin-bottom:var(--s3); font-weight:500}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--blue)}
.page-hero .lede{margin-top:var(--s4); max-width:58ch}
/* auto-fit so pages with three or four facts both look deliberate */
.page-hero__meta{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:var(--s3); margin-top:var(--s6)}
@media(max-width:520px){ .page-hero__meta{grid-template-columns:1fr 1fr} }
.page-hero__meta > div{background:var(--card); border-radius:var(--r); padding:var(--s3) var(--s4); box-shadow:var(--sh-sm)}
.meta__k{font-size:.74rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.meta__v{font-weight:700; margin-top:.3rem; font-size:.98rem}

/* ---------- footer ---------- */
.site-footer{background:var(--ink); color:#9AA5B1; padding-block:var(--s6) var(--s5); font-size:.95rem}
.site-footer a{color:#CFD6DE}
.site-footer a:hover{color:#fff}
.footer__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:var(--s5)}
@media(max-width:760px){ .footer__grid{grid-template-columns:1fr 1fr} }
.footer__grid h4{color:#fff; font-size:.76rem; letter-spacing:.11em; text-transform:uppercase; margin-bottom:var(--s3)}
.footer__links{list-style:none; margin:0; padding:0}
.footer__links li{margin-bottom:.65rem}
.footer__logo{height:44px; width:auto; display:block; background:#fff; padding:.5rem .75rem; border-radius:var(--r-sm)}
.footer__legal{border-top:1px solid rgba(255,255,255,.1); margin-top:var(--s5); padding-top:var(--s4);
  color:#6E7A88; font-size:.87rem}

/* =========================================================
   INTERACTIVE — quiz, adaptive demo, reveal
   ========================================================= */

/* ---------- scroll reveal ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.3,1); transition-delay:var(--d,0ms)}
.reveal.is-in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none} }

/* ---------- try a question ---------- */
.quiz{
  background:var(--card); border-radius:var(--r-xl); padding:var(--s5);
  box-shadow:var(--sh-lg); max-width:760px;
}
.quiz__bar{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s4)}
.quiz__tag{
  font-size:.76rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--purple); background:#F1EAFE; padding:.4rem .8rem; border-radius:var(--pill);
}
.quiz__counter{font-size:.86rem; color:var(--muted); font-weight:600}
.quiz__stem{font-size:1.18rem; font-weight:650; line-height:1.5; margin-bottom:var(--s4)}
.quiz__choices{display:grid; gap:.6rem}
.quiz__choice{
  display:flex; align-items:center; gap:.9rem; width:100%; text-align:left;
  padding:1rem 1.1rem; border-radius:var(--r); border:2px solid #E3E9F0;
  background:var(--bg); color:var(--ink); font:600 1.02rem/1.35 var(--font); cursor:pointer;
  transition:border-color .15s ease, background .15s ease, transform .12s ease;
}
.quiz__choice:hover:not(:disabled){border-color:var(--blue); background:var(--alt); transform:translateX(3px)}
.quiz__choice:focus-visible{outline:3px solid var(--blue-light); outline-offset:2px}
.quiz__choice:disabled{cursor:default}
.quiz__letter{
  flex:0 0 auto; width:30px; height:30px; border-radius:9px; background:#E7EDF5; color:var(--body);
  display:grid; place-items:center; font-weight:800; font-size:.86rem;
}
.quiz__choice.is-correct{border-color:var(--green); background:#F2FBEA}
.quiz__choice.is-correct .quiz__letter{background:var(--green); color:#fff}
.quiz__choice.is-wrong{border-color:#E9805F; background:#FEF3EF}
.quiz__choice.is-wrong .quiz__letter{background:#D2542B; color:#fff}

.quiz__feedback{
  margin-top:var(--s4); padding:1.1rem 1.2rem; border-radius:var(--r);
  font-size:.99rem; line-height:1.6; color:var(--body);
}
.quiz__feedback.is-right{background:#F2FBEA; border-left:4px solid var(--green)}
.quiz__feedback.is-wrong{background:#FEF3EF; border-left:4px solid #E9805F}
.quiz__feedback strong{color:var(--ink)}
.quiz__then{display:block; margin-top:.7rem; padding-top:.7rem; border-top:1px solid rgba(27,31,42,.09)}
.quiz__foot{margin-top:var(--s4); display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap}
.quiz__hint{font-size:.88rem; color:var(--muted)}

/* ---------- adaptive demo ---------- */
.adapt{background:var(--card); border-radius:var(--r-xl); padding:var(--s5); box-shadow:var(--sh-lg); max-width:760px}
.adapt__head{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s4)}
.adapt__badge{
  font-weight:800; font-size:.86rem; padding:.45rem .95rem; border-radius:var(--pill);
  background:var(--alt); color:var(--blue);
}
.adapt__badge[data-level="0"]{background:#EEF2F7; color:var(--muted)}
.adapt__badge[data-level="1"]{background:var(--alt); color:var(--blue)}
.adapt__badge[data-level="2"]{background:#F1EAFE; color:var(--purple)}
.adapt__badge[data-level="3"]{background:#FFF3E2; color:#B35F00}
.adapt__label{font-size:.76rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}

.adapt__grid{
  position:relative; height:190px; border-radius:var(--r);
  background:
    linear-gradient(180deg,#FFF3E2 0 25%, #F1EAFE 25% 50%, #EEF6FF 50% 75%, #F4F6F9 75% 100%);
  padding:0 .9rem; overflow:hidden;
}
.adapt__rows{position:absolute; inset:0; display:grid; grid-template-rows:repeat(4,1fr); pointer-events:none}
.adapt__rows span{
  display:flex; align-items:center; padding-left:.9rem;
  font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  border-bottom:1px dashed rgba(27,31,42,.08);
}
.adapt__rows span:last-child{border-bottom:0}
.adapt__track{position:relative; height:100%; display:flex; align-items:stretch; gap:6px; padding-left:88px}
.adapt__dot{
  position:relative; width:20px; align-self:stretch; flex:0 0 auto;
}
.adapt__dot::after{
  content:""; position:absolute; left:0; width:20px; height:20px; border-radius:50%;
  /* --lvl 0 = Easier (bottom row) … 3 = Hardest (top row) */
  top:calc((3 - var(--lvl)) * 25% + 12.5% - 10px);
  animation:pop .28s cubic-bezier(.2,1.4,.4,1);
  box-shadow:0 3px 8px rgba(27,31,42,.18);
}
.adapt__dot.is-ok::after{background:var(--green)}
.adapt__dot.is-no::after{background:#E9805F}
@keyframes pop{from{transform:scale(0); opacity:0} to{transform:scale(1); opacity:1}}
@media(prefers-reduced-motion:reduce){ .adapt__dot::after{animation:none} }

.adapt__status{margin-top:var(--s4); color:var(--body); font-size:1rem; min-height:3em}
.adapt__foot{margin-top:var(--s3); display:flex; gap:.6rem; flex-wrap:wrap; align-items:center}
.adapt__btn{
  display:inline-flex; align-items:center; gap:.5rem; padding:.8rem 1.3rem; border-radius:var(--pill);
  border:2px solid transparent; font:700 .96rem/1 var(--font); cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.adapt__btn--ok{background:var(--green); color:#fff; box-shadow:var(--sh-green)}
.adapt__btn--no{background:var(--card); color:#C0392B; border-color:#F0C4B6; box-shadow:var(--sh-sm)}
.adapt__btn:hover:not(:disabled){transform:translateY(-2px)}
.adapt__btn:disabled{opacity:.45; cursor:default}
.adapt__btn:focus-visible{outline:3px solid var(--blue-light); outline-offset:3px}
.adapt__reset{background:none; border:0; color:var(--muted); font:600 .9rem/1 var(--font); cursor:pointer; padding:.8rem .4rem}
.adapt__reset:hover{color:var(--blue)}

@media(max-width:560px){
  .adapt__grid{height:170px}
  .adapt__track{padding-left:74px; gap:4px}
  .adapt__dot{width:16px}
  .adapt__dot::after{width:16px; height:16px; top:calc((3 - var(--lvl)) * 25% + 12.5% - 8px)}
}