/* ==========================================================================
   Reason Education — base + header + hero
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--ink-body);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{color:var(--ink);line-height:1.12;letter-spacing:-.02em;margin:0 0 .5em;font-weight:800}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);font-weight:700;letter-spacing:-.01em;line-height:1.3}
p{margin:0 0 1.1em}
a{color:var(--green-700);text-decoration:none}
img,svg{max-width:100%;height:auto;display:block}
button{font:inherit}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip-link{
  position:absolute;left:12px;top:-60px;z-index:200;
  background:var(--green-ui);color:#fff;padding:.7rem 1.1rem;border-radius:var(--r-sm);
  font-weight:600;transition:top .2s var(--ease-out);
}
.skip-link:focus{top:12px}

:where(a,button,input,summary):focus-visible{
  outline:3px solid var(--blue);outline-offset:3px;border-radius:var(--r-sm);
}

/* ---------- buttons ---------- */
.btn{
  --btn-bg:var(--green-ui);--btn-fg:#fff;--btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.85rem 1.5rem;border-radius:var(--r-sm);border:1.5px solid var(--btn-bd);
  background:var(--btn-bg);color:var(--btn-fg);
  font-weight:600;font-size:.98rem;letter-spacing:-.01em;cursor:pointer;
  transition:transform .25s var(--ease-spring), box-shadow .25s var(--ease-out),
             background-color .2s var(--ease-out), color .2s var(--ease-out);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{box-shadow:var(--shadow-cta)}
.btn--primary:hover{--btn-bg:var(--green-800);box-shadow:0 10px 24px rgba(0,129,106,.34)}
.btn--ghost{--btn-bg:#fff;--btn-fg:var(--green-700);--btn-bd:var(--line);box-shadow:var(--shadow-sm)}
.btn--ghost:hover{--btn-bd:var(--green);box-shadow:var(--shadow-md)}
.btn--sm{padding:.62rem 1.15rem;font-size:.92rem}
.btn .btn__arrow{transition:transform .3s var(--ease-spring)}
.btn:hover .btn__arrow{transform:translateX(4px)}

/* ==========================================================================
   Header
   ========================================================================== */
.header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease-out), box-shadow .3s var(--ease-out), background-color .3s var(--ease-out);
}
.header.is-stuck{border-bottom-color:var(--line);box-shadow:0 4px 20px rgba(23,32,94,.06);background:rgba(255,255,255,.94)}
.header__inner{display:flex;align-items:center;gap:1.5rem;min-height:var(--header-h)}
.header__logo{flex:0 0 auto;display:block}
.header__logo img{height:38px;width:auto}

.nav{margin-left:auto;display:flex;align-items:center;gap:.35rem}
.nav__link{
  position:relative;padding:.5rem .78rem;border-radius:var(--r-sm);
  color:var(--ink);font-weight:500;font-size:.94rem;white-space:nowrap;
  transition:color .2s var(--ease-out);
}
.nav__link::after{
  content:'';position:absolute;left:.78rem;right:.78rem;bottom:.28rem;height:2px;
  background:var(--green);border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out);
}
.nav__link:hover{color:var(--green-700)}
.nav__link:hover::after{transform:scaleX(1)}
.nav__actions{display:flex;align-items:center;gap:.5rem;margin-left:.6rem}

/* ---------- the two-door login menu ---------- */
.login{position:relative}
.login__trigger{
  display:inline-flex;align-items:center;gap:.35rem;
  background:none;border:0;cursor:pointer;font:inherit;
  font-weight:500;font-size:.94rem;color:var(--ink);
}
.login__chev{transition:transform .25s var(--ease-out);opacity:.7}
.login[data-open] .login__chev{transform:rotate(180deg)}
.login__trigger::after{
  content:'';position:absolute;left:.78rem;right:.78rem;bottom:.28rem;height:2px;
  background:var(--green);border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out);
}
.login:hover .login__trigger,.login[data-open] .login__trigger{color:var(--green-700)}
.login:hover .login__trigger::after,.login[data-open] .login__trigger::after{transform:scaleX(1)}

.login__menu{
  position:absolute;top:calc(100% + .55rem);right:0;z-index:120;
  width:min(19rem,calc(100vw - 2rem));
  display:grid;gap:.25rem;padding:.4rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s var(--ease-out),transform .2s var(--ease-out),visibility .2s;
}
/* the gap between trigger and panel would otherwise drop the hover */
.login__menu::before{content:'';position:absolute;left:0;right:0;top:-.6rem;height:.6rem}
.login[data-open] .login__menu{opacity:1;visibility:visible;transform:none}

.login__opt{
  display:flex;align-items:center;gap:.7rem;
  padding:.7rem .8rem;border-radius:var(--r-sm);color:var(--ink);
  transition:background-color .18s var(--ease-out);
}
.login__opt:hover,.login__opt:focus-visible{background:var(--band)}
.login__opt--student:hover,.login__opt--student:focus-visible{background:var(--green-050)}
.login__icon{
  width:34px;height:34px;flex:0 0 auto;border-radius:10px;display:grid;place-items:center;color:#fff;
}
.login__icon svg{width:17px;height:17px}
.login__opt--student .login__icon{background:var(--green-ui)}
.login__opt--staff .login__icon{background:var(--blue-ui)}
.login__text{display:block;min-width:0}
.login__text strong{display:block;font-size:.94rem;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.login__text small{display:block;font-size:.78rem;color:var(--ink-muted);line-height:1.35}
.login__go{margin-left:auto;flex:0 0 auto;color:var(--ink-muted);opacity:0;transform:translateX(-4px);
  transition:opacity .2s var(--ease-out),transform .2s var(--ease-out)}
.login__opt:hover .login__go,.login__opt:focus-visible .login__go{opacity:1;transform:none}

@media (max-width:1000px){
  /* inside the mobile panel there is no hover and nowhere to hang a dropdown,
     so the menu becomes what it always was: two links. */
  .login{width:100%}
  .login__trigger{display:none}
  .login__menu{
    position:static;width:auto;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;padding:0;gap:.35rem;margin-bottom:.35rem;
  }
  .login__menu::before{display:none}
  .login__opt{border:1px solid var(--line);background:#fff}
  .login__go{opacity:1;transform:none}
}
/* ---------- the login menu without JavaScript ----------
   Above 1000px this menu is the only route to either sign-in on the whole
   marketing site, and it used to be hidden by CSS and revealed only by script:
   `opacity:0;visibility:hidden` with a `[data-open]` attribute that main.js
   alone could add. On a locked-down school SOE, behind a filter that drops the
   script, or after any exception earlier in main.js, "Log in" was a button that
   did nothing and both links were unreachable. That is a marketing site a
   principal cannot sign in from.

   So the collapsed state is now opt-in. main.js adds `js-login-menu` to <html>
   as the LAST thing it does in the login block, once every listener is
   attached; until then — and forever, if the script never runs — the panel is
   laid out as what it has always been underneath: two plain links, sitting in
   the header row beside the nav. The trigger is hidden because a disclosure
   button with nothing to disclose is worse than no button.

   The dropdown itself, and every rule above, is untouched for the case where
   the script does run. Below 1000px nothing here applies: the mobile panel
   already flattens to two visible links regardless of JavaScript. */
@media (min-width:1001px){
  html:not(.js-login-menu) .login__trigger{display:none}
  html:not(.js-login-menu) .login__menu{
    position:static;width:auto;display:flex;gap:.15rem;
    opacity:1;visibility:visible;transform:none;
    padding:0;background:none;border:0;box-shadow:none;
  }
  html:not(.js-login-menu) .login__menu::before{display:none}
  /* The icon, the descriptive note and the arrow are dropdown furniture; a
     header row has no space for them and the label alone says the same thing. */
  html:not(.js-login-menu) .login__icon,
  html:not(.js-login-menu) .login__go,
  html:not(.js-login-menu) .login__text small{display:none}
  html:not(.js-login-menu) .login__opt{padding:.5rem .78rem;border-radius:var(--r-sm)}
  html:not(.js-login-menu) .login__text strong{font-weight:500;white-space:nowrap}
}

@media (prefers-reduced-motion:reduce){
  .login__menu,.login__chev,.login__go{transition:none}
}

.burger{
  display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line);
  background:#fff;border-radius:var(--r-sm);cursor:pointer;padding:0;place-items:center;
}
.burger__bar{display:block;width:19px;height:2px;background:var(--ink);border-radius:2px;position:relative;transition:transform .3s var(--ease-out), opacity .2s}
.burger__bar::before,.burger__bar::after{content:'';position:absolute;left:0;width:19px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease-out)}
.burger__bar::before{top:-6px}
.burger__bar::after{top:6px}
.burger[aria-expanded="true"] .burger__bar{transform:rotate(45deg)}
.burger[aria-expanded="true"] .burger__bar::before{transform:translateY(6px) rotate(-90deg)}
.burger[aria-expanded="true"] .burger__bar::after{opacity:0}

@media (max-width:1000px){
  .burger{display:grid}
  .nav{
    position:fixed;inset:var(--header-h) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:.15rem;
    background:#fff;border-bottom:1px solid var(--line);
    padding:1rem var(--gutter) 1.4rem;
    box-shadow:var(--shadow-lg);
    transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility .25s;
  }
  .nav.is-open{opacity:1;transform:none;visibility:visible;pointer-events:auto}
  .nav__link{padding:.8rem .25rem;font-size:1.05rem;border-bottom:1px solid var(--line)}
  .nav__link::after{display:none}
  .nav__actions{margin:1rem 0 0;flex-direction:column;align-items:stretch}
  .nav__actions .btn{width:100%}
}

/* ---------- 1001px to 1080px ----------
   The mobile flatten ends at 1000px and the next tested width is 1080px, so
   nobody has ever looked at the band between them. It is the worst case in the
   design: five nav links that are all `white-space:nowrap`, the login trigger
   (or, with no JavaScript, the two links it stands in for) and the CTA button,
   all in one flex row that cannot shrink. `body{overflow-x:hidden}` means the
   overflow would not even produce a scrollbar to warn anyone — the CTA would
   simply be clipped off the right-hand edge with no way to reach it.

   Letting the row wrap and tightening the gaps is enough. Both limits are
   deliberate: min-width keeps it clear of the mobile panel, max-width keeps the
   design above 1080px exactly as it was tested. */
@media (min-width:1001px) and (max-width:1080px){
  .header__inner{gap:1rem}
  .nav{flex-wrap:wrap;justify-content:flex-end;row-gap:.15rem;padding-block:.3rem}
  .nav__link{padding:.5rem .55rem}
  .nav__actions{margin-left:.2rem}
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{position:relative;overflow:hidden;background:var(--white);padding-block:clamp(2rem,1rem + 4vw,4.5rem) clamp(3rem,2rem + 4vw,5.5rem)}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.18fr);
  gap:clamp(1.5rem,1rem + 3vw,4rem);align-items:center;position:relative;z-index:2;
}
.hero__eyebrow{
  display:inline-block;color:var(--green-700);font-weight:600;font-size:var(--fs-eyebrow);
  letter-spacing:.01em;margin-bottom:.9rem;
}
.hero h1{margin-bottom:1.1rem;max-width:15ch;letter-spacing:-.035em}
.hero__lead{font-size:var(--fs-lead);max-width:46ch;color:var(--ink-body);margin-bottom:1.9rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.85rem}

/* trust badges */
.trust{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem clamp(1rem,.5rem + 2vw,2.4rem);
  margin-top:clamp(1.75rem,1.2rem + 1.6vw,2.75rem);position:relative;z-index:2;
}
.trust__item{display:flex;align-items:center;gap:.55rem;color:var(--ink-muted);font-size:var(--fs-small);font-weight:500}
.trust__item svg{width:20px;height:20px;flex:0 0 auto;color:var(--green)}
.trust__sep{width:4px;height:4px;border-radius:50%;background:var(--line)}
@media (max-width:560px){.trust__sep{display:none}}

/* illustration */
.hero__art{position:relative}
/* the illustration sits above the doodles, so a decoration that overlaps a
   person passes behind them instead of across their face */
.hero__figure{position:relative;z-index:2}
.hero__art img.hero__photo{width:100%;height:auto;filter:drop-shadow(0 26px 40px rgba(23,32,94,.10))}

/* ---------- floating decorations ---------- */
.deco{position:absolute;pointer-events:none;user-select:none;z-index:1}
.deco img{width:100%;height:auto}
.hero__art .deco{z-index:1}
/* three nested layers so parallax (outer), reveal (middle) and idle float
   (inner) can each own a transform without fighting each other */
.deco__float{transform-origin:50% 50%}

.deco--blob-yellow{width:clamp(160px,22vw,290px);left:-8%;bottom:-6%;z-index:0}
.deco--blob-teal{width:clamp(130px,17vw,230px);left:-7%;bottom:14%;z-index:0}
.deco--dots{width:clamp(58px,6.4vw,88px);left:3.5%;bottom:12%;z-index:1}
.deco--numberline{width:clamp(120px,17vw,230px);left:4%;top:-2%}
.deco--tenframe{width:clamp(58px,7vw,92px);left:2%;top:38%}
.deco--pie{width:clamp(62px,7.5vw,100px);right:12%;top:2%}
.deco--lightbulb{width:clamp(44px,5vw,68px);left:44%;top:-9%}
.deco--sparkles{width:clamp(70px,8vw,112px);right:-5%;top:3%}
.deco--arrow{width:clamp(60px,7vw,98px);left:54%;top:-4%}

@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;text-align:left}
  .hero h1{max-width:16ch}
  .hero__art{max-width:600px;margin-inline:auto;width:100%}
  .deco--tenframe,.deco--arrow{display:none}
}
@media (max-width:560px){
  .deco--numberline,.deco--pie,.deco--sparkles{display:none}
}

/* ==========================================================================
   Footer (placeholder — full footer lands with a later batch)
   ========================================================================== */
.footer{background:var(--paper);border-top:1px solid var(--line);padding-block:2.6rem}
.footer p{margin:0;font-size:var(--fs-small);color:var(--ink-muted)}

/* ==========================================================================
   Animation framework
   Anything with [data-reveal] starts hidden and animates in when scrolled to.
   ========================================================================== */
[data-reveal]{
  opacity:0;
  transform:translate3d(0, 22px, 0);
  transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  transition-delay:var(--reveal-delay, 0ms);
}
[data-reveal="left"]{transform:translate3d(-26px,0,0)}
[data-reveal="right"]{transform:translate3d(26px,0,0)}
[data-reveal="scale"]{transform:translate3d(0,14px,0) scale(.965)}
[data-reveal="pop"]{transform:translate3d(0,10px,0) scale(.7);transition-timing-function:var(--ease-spring)}
.is-revealed[data-reveal]{opacity:1;transform:none}

/* gentle idle float, started only once the decoration has revealed */
.is-revealed > .deco__float{animation:float var(--float-dur,7s) ease-in-out var(--float-delay,0s) infinite}
@keyframes float{
  0%,100%{transform:translate3d(0,0,0) rotate(0)}
  50%{transform:translate3d(0,-11px,0) rotate(var(--float-rot,1.6deg))}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  [data-reveal]{opacity:1 !important;transform:none !important}
}

/* ==========================================================================
   Shared section furniture
   ========================================================================== */
.section{position:relative;overflow:hidden;padding-block:clamp(3.25rem,2rem + 5vw,6rem)}
/* the domed top edge is the band's own border-radius, so nothing spills outside
   the section and horizontal overflow can't happen */
.section--band{
  background:var(--band);
  border-top-left-radius:50% clamp(30px,5vw,70px);
  border-top-right-radius:50% clamp(30px,5vw,70px);
  padding-top:clamp(4rem,2.5rem + 5vw,7rem);
}
.section__head{text-align:center;max-width:46rem;margin:0 auto clamp(2rem,1.4rem + 2vw,3.25rem)}
.section__head h2{margin-bottom:.45rem;text-wrap:balance}
.section__head p{color:var(--ink-body);font-size:var(--fs-lead);margin:0 auto;max-width:40rem}
.section__underline{display:block;width:clamp(104px,11vw,152px);margin:.65rem auto 0}
.section__underline img{width:100%}

.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out);
}
.card--hover:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}

.tick{width:17px;height:17px;flex:0 0 auto;margin-top:.28em}

/* ==========================================================================
   Section 1 — From student working to useful next steps
   ========================================================================== */
.steps{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,.5rem + 2.4vw,2.75rem);align-items:stretch;position:relative;
}
.step{position:relative;display:flex;flex-direction:column}
.step__head{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem;min-height:3.1em}
.step__num{
  width:30px;height:30px;flex:0 0 auto;border-radius:50%;
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:.92rem;
  box-shadow:0 4px 10px rgba(23,32,94,.16);
}
.step--1 .step__num{background:var(--green-ui)}
.step--2 .step__num{background:var(--blue-ui)}
.step--3 .step__num{background:var(--orange-ui)}
.step__title{font-size:1.02rem;font-weight:700;color:var(--ink);line-height:1.3;letter-spacing:-.01em}
.step__card{padding:1.35rem 1.4rem 1.5rem;flex:1}

/* arrows between the steps */
.step__arrow{
  position:absolute;top:calc(50% + 14px);right:calc(-1 * clamp(1rem,.5rem + 2.4vw,2.75rem) / 2);
  transform:translate(50%,-50%);color:var(--green);z-index:2;
}
.step__arrow svg{width:clamp(20px,2.2vw,30px);height:auto}
@media (max-width:820px){
  .steps{grid-template-columns:1fr;max-width:30rem;margin-inline:auto}
  .step__arrow{top:auto;bottom:calc(-1 * clamp(1rem,.5rem + 2.4vw,2.75rem) / 2);right:50%;transform:translate(50%,50%) rotate(90deg)}
  .step__card{min-height:0}
}

/* the student's working, drawn in HTML rather than screenshotted */
.working__sum{font-size:1.45rem;font-weight:700;color:var(--blue);letter-spacing:-.01em;margin-bottom:1rem}
.working__groups{display:flex;gap:.9rem;margin-bottom:1rem;flex-wrap:wrap}
.working__tallies{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.dotgroup{display:grid;grid-template-columns:repeat(4,10px);gap:5px}
.dotgroup i{width:10px;height:10px;border-radius:50%;border:2px solid var(--green);display:block}
.dotgroup--filled i{background:var(--green-050)}

/* step 2 — method detected */
.panel__bar{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding-bottom:.7rem;margin-bottom:.9rem;border-bottom:1px solid var(--line)}
.panel__bar strong{color:var(--ink);font-size:.9rem;font-weight:700}
.dot-live{width:9px;height:9px;border-radius:50%;background:var(--orange-ui);position:relative}
.dot-live::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--orange-ui);opacity:0;animation:pulse 2.4s var(--ease-out) infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:.7}70%,100%{transform:scale(1.25);opacity:0}}
.method{display:flex;gap:.85rem;align-items:flex-start}
.method__body strong{display:block;color:var(--ink);font-size:.95rem;margin-bottom:.15rem}
.method__body p{font-size:.88rem;line-height:1.5;margin:0 0 .7rem;color:var(--ink-body)}
.panel__link{color:var(--green-700);font-weight:600;font-size:.86rem;display:inline-flex;align-items:center;gap:.3rem}
.panel__link:hover{text-decoration:underline}

/* step 3 — where support is needed */
.cohort{display:flex;justify-content:space-between;gap:.6rem;margin-bottom:.55rem;padding-inline:.4rem}
.cohort__person{width:26px;height:26px;color:var(--ink-muted)}
.cohort__person--flag{color:var(--green-ui)}
.rag{display:flex;gap:5px;margin-bottom:.9rem}
.rag i{height:6px;border-radius:3px;flex:1;display:block}
.rag i:nth-child(1){background:var(--orange-ui)}
.rag i:nth-child(2){background:var(--yellow)}
.rag i:nth-child(3){background:var(--green)}
.step__card p.cohort__note{font-size:.88rem;line-height:1.5;margin:0 0 .7rem}

/* ==========================================================================
   Section 2 — Useful at every level of the school
   ========================================================================== */
.levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,.6rem + 1.8vw,2rem)}
.level{display:flex;flex-direction:column;overflow:hidden}
.level__head{padding:1.5rem 1.5rem 0}
.level__badge{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.level__icon{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;flex:0 0 auto}
.level__icon svg{width:17px;height:17px}
.level__name{font-size:1.12rem;font-weight:800;letter-spacing:-.015em;line-height:1.2}
.level--students .level__icon{background:var(--green-ui)}
.level--students .level__name{color:var(--green-800)}
.level--teachers .level__icon{background:var(--blue-ui)}
.level--teachers .level__name{color:var(--blue-ink)}
.level--leaders .level__icon{background:var(--orange-ui)}
.level--leaders .level__name{color:var(--orange-ink)}
.level__sub{font-size:.9rem;color:var(--ink-muted);margin:0;line-height:1.45}

.level__art{height:clamp(180px,20vw,235px);padding:1.1rem 1.5rem 0}
.level__art picture{display:block;height:100%}
.level__art img{height:100%;width:100%;object-fit:contain;object-position:bottom center}

.level__list{list-style:none;margin:1.1rem 1.1rem 0;padding:1rem 1.1rem;border-radius:var(--r-md);
  display:grid;gap:.55rem;font-size:.9rem;line-height:1.45}
.level--students .level__list{background:var(--green-050)}
.level--teachers .level__list{background:var(--blue-050)}
.level--leaders .level__list{background:var(--orange-050)}
.level__list li{display:flex;gap:.55rem;align-items:flex-start;color:var(--ink-body)}
.level--students .tick{color:var(--green-800)}
.level--teachers .tick{color:var(--blue-ink)}
.level--leaders .tick{color:var(--orange-ink)}

.level__more{margin:auto 1.5rem 1.5rem;padding-top:1.1rem;display:inline-flex;align-items:center;gap:.4rem;
  font-weight:600;font-size:.92rem}
.level--students .level__more{color:var(--green-700)}
.level--teachers .level__more{color:var(--blue-ink)}
.level--leaders .level__more{color:var(--orange-ink)}
.level__more svg{transition:transform .3s var(--ease-spring)}
.level__more:hover svg{transform:translateX(4px)}
@media (max-width:900px){.levels{grid-template-columns:1fr;max-width:26rem;margin-inline:auto}}

/* ==========================================================================
   Section 3 — Curriculum alignment
   ========================================================================== */
.curriculum{
  display:grid;grid-template-columns:1.15fr 1fr .95fr;gap:clamp(1.5rem,1rem + 2.5vw,3.5rem);
  align-items:center;padding:clamp(1.6rem,1.1rem + 2vw,2.75rem);
}
.curriculum__eyebrow{
  display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--green-800);background:var(--green-050);padding:.4rem .8rem;border-radius:var(--r-pill);
  margin-bottom:.9rem;
}
.curriculum h2{font-size:clamp(1.4rem,1.15rem + 1vw,1.9rem);margin-bottom:.6rem}
.curriculum p{font-size:.98rem;margin:0;color:var(--ink-body)}
.curriculum__checks{list-style:none;margin:0;padding:0;display:grid;gap:.85rem;
  border-left:1px solid var(--line);padding-left:clamp(1.2rem,.8rem + 1.6vw,2.4rem)}
.curriculum__checks li{display:flex;gap:.65rem;align-items:flex-start;font-weight:500;color:var(--ink)}
.curriculum__checks .tick{color:var(--green-ui)}
.curriculum__art img{width:100%}
@media (max-width:900px){
  .curriculum{grid-template-columns:1fr;text-align:left}
  .curriculum__checks{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:1.4rem}
  .curriculum__art{max-width:20rem}
}

/* section background washes */
.wash{position:absolute;pointer-events:none;z-index:0}
.wash img{width:100%}
.wash--green-1{width:clamp(180px,20vw,320px);right:-5%;top:14%;opacity:.75}
.wash--blue-1{width:clamp(170px,19vw,300px);left:-6%;bottom:4%;opacity:.75}
.section > .wrap{position:relative;z-index:1}

/* ==========================================================================
   Sample-data label — every panel showing invented figures carries one
   ========================================================================== */
.sample-chip{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-muted);background:var(--band);border:1px solid var(--line);
  padding:.22rem .55rem;border-radius:var(--r-pill);
}
.sample-chip::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--ink-muted)}

/* ==========================================================================
   Section 4 — Reason Diagnostic Testing
   ========================================================================== */
.diagnostic{
  display:grid;grid-template-columns:1.05fr 1.25fr .85fr;
  gap:clamp(1.5rem,1rem + 2.5vw,3rem);align-items:center;
  padding:clamp(1.6rem,1.1rem + 2vw,2.9rem);background:var(--band);border-color:transparent;
}
.diagnostic__eyebrow{
  display:block;font-size:.78rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--green-700);margin-bottom:.5rem;
}
.diagnostic h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem)}
.diagnostic p{font-size:.96rem}
.features{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.9rem}
.features li{display:flex;gap:.7rem;align-items:flex-start;font-size:.86rem;line-height:1.35;color:var(--ink-body)}
.features svg{width:26px;height:26px;flex:0 0 auto}

/* the adaptive question flow */
.flow{position:relative;aspect-ratio:5/4;min-height:280px}
.flow__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.flow__start{position:absolute;left:8%;top:-4%;font-size:.8rem;font-weight:700;color:var(--green-700)}
.qcard{
  position:absolute;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-md);padding:.75rem .85rem;text-align:center;
}
.qcard b{display:block;font-size:.95rem;color:var(--ink);letter-spacing:-.01em;margin-bottom:.5rem;white-space:nowrap}
.qcard--a{left:0;top:8%;width:39%}
.qcard--b{right:0;top:16%;width:39%}
.qcard--c{left:26%;bottom:0;width:42%}
.qring{display:flex;gap:.35rem;justify-content:center}
.qring i{width:15px;height:15px;border-radius:50%;border:2.2px solid var(--green);display:block}
.qframe{display:grid;grid-template-columns:repeat(5,13px);gap:3px;justify-content:center;
  background:var(--blue-050);padding:5px;border-radius:6px}
.qframe i{width:13px;height:13px;border-radius:50%;background:var(--blue);display:block}
.flow__badge{
  position:absolute;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  color:#fff;box-shadow:var(--shadow-md);z-index:3;
}
.flow__badge svg{width:15px;height:15px}
.flow__badge--yes{background:var(--green-ui);right:34%;top:30%}
.flow__badge--no{background:var(--orange-ui);left:32%;top:44%}

/* right-hand panels */
.dpanels{display:grid;gap:1rem}
.dpanel{padding:1.05rem 1.15rem}
.dpanel h3{font-size:.92rem;margin-bottom:.85rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem}
.drow{display:grid;grid-template-columns:1fr auto auto;gap:.6rem;align-items:center;font-size:.82rem;padding:.3rem 0}
.drow span:first-child{color:var(--ink-body)}
.dots{display:flex;gap:4px}
.dots i{width:9px;height:9px;border-radius:50%;display:block;border:1.5px solid currentColor}
.dots i.on{background:currentColor}
.dots--green{color:var(--green)}
.dots--yellow{color:var(--yellow)}
.dots--blue{color:var(--blue)}
.dots--orange{color:var(--orange)}
.dlevel{font-weight:600;color:var(--ink);font-size:.8rem;font-variant-numeric:tabular-nums}
.cohort-row{display:flex;gap:.35rem;margin-bottom:.75rem}
.cohort-row svg{width:23px;height:23px}
.c-green{color:var(--green)} .c-yellow{color:var(--yellow)}
.c-orange{color:var(--orange)} .c-grey{color:#C7CBDE}
.legend{list-style:none;margin:0;padding:0;display:grid;gap:.3rem;font-size:.76rem;color:var(--ink-body)}
.legend li{display:flex;align-items:center;gap:.45rem}
.legend i{width:8px;height:8px;border-radius:50%;background:currentColor;display:block;flex:0 0 auto}

@media (max-width:1000px){
  .diagnostic{grid-template-columns:1fr;gap:2rem}
  .flow{max-width:26rem;margin-inline:auto;width:100%}
}
@media (max-width:560px){
  .flow{aspect-ratio:auto;min-height:0;display:grid;gap:.7rem}
  .flow__svg,.flow__badge,.flow__start{display:none}
  .qcard{position:static;width:100%}
}

/* ==========================================================================
   Section 5 — growth chart
   ========================================================================== */
.growth{display:grid;grid-template-columns:.85fr 2fr auto;gap:clamp(1.25rem,.8rem + 2vw,2.5rem);
  align-items:center;padding:clamp(1.4rem,1rem + 1.6vw,2.4rem)}
.growth h3{font-size:1.15rem;margin-bottom:.5rem}
.growth p{font-size:.9rem;margin:0}
.chart{position:relative}
.chart svg{width:100%;height:auto;display:block}
.chart__legend{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;margin-top:.7rem;font-size:.78rem;color:var(--ink-body)}
.chart__legend span{display:inline-flex;align-items:center;gap:.4rem}
.chart__legend i{width:11px;height:11px;border-radius:50%;display:block}
.chart__legend i.pre{background:var(--blue)}
.chart__legend i.post{background:var(--green)}
.chart__legend i.avg{width:16px;height:0;border-top:2px dashed var(--ink-muted);border-radius:0}
.deltas{list-style:none;margin:0;padding:0;display:grid;gap:.3rem;font-variant-numeric:tabular-nums}
.deltas li{
  display:flex;align-items:center;justify-content:flex-end;gap:.4rem;
  font-size:.82rem;font-weight:600;padding:.18rem .45rem;border-radius:var(--r-sm);
  transition:background-color .2s var(--ease-out);
}
.deltas li:hover{background:var(--band)}
.deltas li::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.deltas .up{color:var(--green-800)}
.deltas .down{color:var(--orange-ink)}
@media (max-width:900px){
  .growth{grid-template-columns:1fr}
  .deltas{grid-template-columns:repeat(4,1fr);gap:.3rem .5rem}
  .deltas li{justify-content:center}
}

/* ==========================================================================
   Section 6 — learner profile + evidence
   ========================================================================== */
.evidence-grid{display:grid;grid-template-columns:.95fr 1.35fr;gap:clamp(1.25rem,.8rem + 2vw,2rem);align-items:start}
.epanel{padding:clamp(1.3rem,1rem + 1.2vw,1.9rem)}
.epanel > h3{font-size:1.2rem;margin-bottom:.45rem}
.epanel > p{font-size:.9rem}

.units{display:grid;gap:1rem;margin-top:1.3rem}
.unit{border-top:1px solid var(--line);padding-top:.9rem}
.unit__name{font-weight:700;color:var(--ink);font-size:.95rem;margin-bottom:.55rem}
.unit__pp{display:flex;gap:1.6rem;margin-bottom:.6rem}
.unit__pp div{display:grid;gap:.15rem}
.unit__pp small{font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-muted);font-weight:700}
.unit__pp b{font-size:.95rem;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:700}
.unit__pp .post{padding:.05rem .5rem;border-radius:var(--r-sm)}
.unit--up .post{background:var(--green-050)}
.unit--down .post{background:var(--orange-050)}
.meter{height:7px;border-radius:4px;background:var(--line);overflow:hidden;margin-bottom:.45rem;position:relative}
.meter i{display:block;height:100%;border-radius:4px;transition:width 1.1s var(--ease-out)}
.unit--up .meter i{background:var(--green)}
.unit--down .meter i{background:var(--orange)}
.unit__foot{display:flex;justify-content:space-between;align-items:center;gap:.6rem;font-size:.8rem}
.unit__growth{font-weight:700;font-variant-numeric:tabular-nums}
.unit--up .unit__growth{color:var(--green-800)}
.unit--down .unit__growth{color:var(--orange-ink)}
.chip{background:var(--band);border:1px solid var(--line);border-radius:var(--r-sm);padding:.1rem .5rem;
  font-size:.76rem;font-weight:600;color:var(--ink)}

.result{display:grid;gap:.35rem;margin:1.2rem 0 1.1rem;font-size:.86rem}
.result div{display:flex;justify-content:space-between;gap:1rem;padding:.28rem 0;border-bottom:1px solid var(--line)}
.result dt,.result span:first-child{color:var(--ink-muted)}
.result span:last-child{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.qgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:5px;margin-bottom:1rem}
.qgrid span{
  display:grid;place-items:center;aspect-ratio:1;border-radius:6px;
  font-size:.62rem;font-weight:700;font-variant-numeric:tabular-nums;
}
.q-correct{background:var(--green-050);color:var(--green-800)}
.q-incorrect{background:var(--orange-050);color:var(--orange-ink)}
.q-partial{background:var(--yellow-050);color:#8A5B00}
.qkey{display:flex;flex-wrap:wrap;gap:.3rem .9rem;font-size:.74rem;color:var(--ink-body);margin-bottom:1.2rem}
.qkey span{display:inline-flex;align-items:center;gap:.35rem}
.qkey i{width:10px;height:10px;border-radius:3px;display:block}

.strategy{background:var(--blue-050);border-radius:var(--r-md);padding:1.1rem 1.2rem}
.strategy h4{font-size:.86rem;color:var(--blue-ink);margin:0 0 .8rem;font-weight:700}
.strategy ol{list-style:none;margin:0;padding:0;display:grid;gap:.8rem;counter-reset:s}
.strategy li{display:flex;gap:.6rem;align-items:flex-start;font-size:.82rem;line-height:1.45}
.strategy li i{width:9px;height:9px;flex:0 0 auto;margin-top:.42em;transform:rotate(45deg);border-radius:2px}
.strategy strong{display:block;color:var(--ink);font-size:.85rem}
@media (max-width:900px){
  .evidence-grid{grid-template-columns:1fr}
  .qgrid{grid-template-columns:repeat(8,minmax(0,1fr))}
}

/* ==========================================================================
   Footer (full)
   ========================================================================== */
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(1.5rem,1rem + 2.5vw,3.5rem)}
.footer__brand > div img{height:40px;width:auto;margin-bottom:.7rem}
.footer__brand p{margin:0 0 .4rem;color:var(--ink);font-weight:600}
.footer__brand small{color:var(--ink-muted);font-size:.82rem}
.footer h2{font-size:.95rem;margin-bottom:.7rem}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.footer a{color:var(--ink-body);font-size:.88rem}
.footer a:hover{color:var(--green-700);text-decoration:underline}
.footer a[aria-current="page"]{color:var(--green-800);font-weight:700}
@media (max-width:700px){.footer__grid{grid-template-columns:1fr 1fr}.footer__brand{grid-column:1/-1}}

/* ==========================================================================
   Brand icons
   One PNG per icon, used as a CSS mask so a single asset tints to any colour
   via `color` — no separate export per colour, and no inline SVG to maintain.
   ========================================================================== */
.bicon{
  display:inline-block;flex:0 0 auto;
  width:var(--bicon-size,24px);height:var(--bicon-size,24px);
  background-color:currentColor;
  -webkit-mask:var(--bicon) center/contain no-repeat;
          mask:var(--bicon) center/contain no-repeat;
}
.features .bicon{--bicon-size:26px}
.features li:nth-child(1) .bicon{color:var(--green)}
.features li:nth-child(2) .bicon{color:var(--blue)}
.features li:nth-child(3) .bicon{color:var(--yellow)}
.features li:nth-child(4) .bicon{color:var(--orange)}
.level__icon .bicon{--bicon-size:17px;color:#fff}
.strategy li .bicon{--bicon-size:17px;margin-top:.12em}

/* ==========================================================================
   Mascot
   Two appearances only. It is the student app's character; on a page read by
   principals it signs off and points at a result, and does nothing else.
   ========================================================================== */
.mascot{display:block;height:auto}
.footer__brand{display:flex;align-items:center;gap:clamp(.9rem,.6rem + 1vw,1.6rem)}
.footer__brand picture{flex:0 0 auto;display:block}
.footer__mascot{width:clamp(76px,7.5vw,100px);height:auto}
.growth__mascot{width:clamp(78px,8vw,108px);margin-top:1.1rem}
@media (max-width:900px){.growth__mascot{display:none}}