/* ============================================================
   Second Nature Learning — marketing site stylesheet
   Light default + dark toggle (per template note §35).
   Off-white ground, near-black text: chosen so an hour of
   reading does not halo for readers with astigmatism.
   All colour pairs target WCAG AA or better.
   ============================================================ */

:root{
  /* surfaces */
  --bg:#f7f6f3;          /* off-white, never #fff */
  --surface:#ffffff;
  --el:#f1efec;
  --el2:#e9e6e1;
  --border:#dcd8d2;
  --border2:#c9c4bc;
  /* type */
  --text:#1f1f1f;        /* near-black, never #000 */
  --body:#26262a;
  --strong:#111114;
  --t2:#4a4a4a;
  --muted:#6a6a6a;
  /* brand */
  --acc:#1d4ed8;         /* ink blue      7.0:1 on --bg */
  --acc-soft:rgba(29,78,216,.09);
  --acc-line:rgba(29,78,216,.26);
  --teal:#0f766e;        /* 5.4:1 */
  --teal-soft:rgba(15,118,110,.10);
  --ok:#15803d;
  --ok-soft:rgba(21,128,61,.10);
  --warn:#a16207;
  --warn-soft:rgba(161,98,7,.10);
  --bad:#b91c1c;
  --pur:#7e22ce;
  --pur-soft:rgba(126,34,206,.09);
  --pink:#be185d;
  /* misc */
  --shadow:0 1px 2px rgba(20,18,14,.05),0 8px 24px rgba(20,18,14,.06);
  --shadow-lg:0 2px 6px rgba(20,18,14,.06),0 22px 60px rgba(20,18,14,.10);
  --radius:14px;
  --maxw:1180px;
  --ink-grid:rgba(31,31,31,.055);
}

html.dark{
  --bg:#131315;
  --surface:#1a1a1d;
  --el:#212125;
  --el2:#2a2a2f;
  --border:#33333a;
  --border2:#45454e;
  --text:#e9e8e5;
  --body:#d6d5d1;
  --strong:#ffffff;
  --t2:#aeadaa;
  --muted:#8d8c89;
  --acc:#7aa5ff;
  --acc-soft:rgba(122,165,255,.12);
  --acc-line:rgba(122,165,255,.30);
  --teal:#4fd1c5;
  --teal-soft:rgba(79,209,197,.12);
  --ok:#5fd18b;
  --ok-soft:rgba(95,209,139,.12);
  --warn:#f0b352;
  --warn-soft:rgba(240,179,82,.12);
  --bad:#f4796f;
  --pur:#c493f5;
  --pur-soft:rgba(196,147,245,.12);
  --pink:#f184b4;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 2px 6px rgba(0,0,0,.45),0 22px 60px rgba(0,0,0,.5);
  --ink-grid:rgba(255,255,255,.05);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  background:var(--bg);color:var(--body);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;
  transition:background .25s,color .25s;
}
img{max-width:100%;display:block}
a{color:var(--acc)}
::selection{background:var(--acc-soft)}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wrap-n{max-width:840px;margin:0 auto;padding:0 24px}
section{padding:84px 0}
section.tight{padding:56px 0}
@media(max-width:760px){section{padding:56px 0}}

/* ---------- type ---------- */
h1,h2,h3,h4{color:var(--strong);line-height:1.18;letter-spacing:-.02em}
h1{font-size:clamp(34px,5.2vw,58px);font-weight:800;letter-spacing:-.035em}
h2{font-size:clamp(27px,3.4vw,38px);font-weight:750;margin-bottom:14px}
h3{font-size:20px;font-weight:700;margin-bottom:8px;letter-spacing:-.012em}
h4{font-size:16px;font-weight:700;margin-bottom:6px}
p{margin-bottom:16px}
p:last-child{margin-bottom:0}
.lead{font-size:clamp(17px,2vw,20px);color:var(--t2);line-height:1.65}
.eyebrow{font-size:12px;font-weight:750;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-bottom:14px;display:block}
.eyebrow.teal{color:var(--teal)}
.eyebrow.pur{color:var(--pur)}
.eyebrow.warn{color:var(--warn)}
.center{text-align:center}
.sechead{max-width:720px;margin-bottom:44px}
.sechead.center{margin-left:auto;margin-right:auto}
.mut{color:var(--muted);font-size:14px}
strong,b{color:var(--strong);font-weight:650}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;font:inherit;font-size:15px;font-weight:650;
  padding:13px 24px;border-radius:11px;text-decoration:none;cursor:pointer;border:1.5px solid transparent;
  transition:transform .14s,box-shadow .2s,background .2s,border-color .2s;white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-p{background:var(--acc);color:#fff;box-shadow:0 2px 8px rgba(29,78,216,.28)}
.btn-p:hover{box-shadow:0 6px 20px rgba(29,78,216,.34)}
html.dark .btn-p{color:#0d1220;box-shadow:none}
.btn-s{background:var(--surface);color:var(--strong);border-color:var(--border2)}
.btn-s:hover{border-color:var(--acc);color:var(--acc)}
.btn-g{background:transparent;color:var(--acc);padding:13px 4px}
.btn-g:hover{text-decoration:underline}
.btn-sm{font-size:14px;padding:9px 16px}
.btn-lg{font-size:16.5px;padding:15px 30px}
.btnrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btnrow.center{justify-content:center}

/* ---------- header ---------- */
header.nav{
  position:sticky;top:0;z-index:80;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--border);
}
.navin{display:flex;align-items:center;gap:26px;height:66px;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--strong);font-weight:800;font-size:16.5px;letter-spacing:-.03em;flex:none}
.logo .mark{width:30px;height:30px;flex:none}
/* Logo mark colours are set by class, not by fill="var(--…)" —
   CSS variables are unreliable inside SVG presentation attributes. */
.mk-bg{fill:var(--acc)}
.mk-fg{stroke:#fff;fill:none}
.mk-dot{fill:#fff}
html.dark .mk-fg{stroke:#0d1220}
html.dark .mk-dot{fill:#0d1220}
.logo .sub{display:block;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:-3px}
.navlinks{display:flex;gap:4px;margin-left:auto;align-items:center}
.navlinks a{font-size:14.5px;font-weight:550;color:var(--t2);text-decoration:none;padding:8px 12px;border-radius:8px}
.navlinks a:hover{color:var(--strong);background:var(--el)}
.navlinks a.on{color:var(--acc);font-weight:650}
.navact{display:flex;align-items:center;gap:10px;flex:none}
/* Nine nav links (with "For students") need ~1270px on one line: labels never wrap,
   spacing tightens below 1440px, and the burger menu takes over below 1280px. */
.navin{max-width:1440px}
.navlinks a{white-space:nowrap}
@media(max-width:1439px){.navin{gap:16px}.navlinks{gap:2px}.navlinks a{padding:8px 8px;font-size:14px}}
.iconbtn{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);background:var(--surface);border-radius:9px;cursor:pointer;color:var(--t2)}
.iconbtn:hover{border-color:var(--acc);color:var(--acc)}
.iconbtn svg{width:17px;height:17px}
.burger{display:none}
@media(max-width:1279px){
  .navlinks{position:fixed;inset:66px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--border);padding:10px 18px 20px;display:none}
  .navlinks.open{display:flex}
  .navlinks a{padding:13px 8px;font-size:16px;border-bottom:1px solid var(--border)}
  .burger{display:inline-flex}
  .navact .btn:not(.burger){display:none}
}

/* ---------- hero ---------- */
.hero{position:relative;padding:76px 0 68px;overflow:hidden}
.hero:before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--ink-grid) 1px,transparent 1px),linear-gradient(90deg,var(--ink-grid) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 78%);
}
.hero .wrap{position:relative;z-index:1}
.herogrid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
@media(max-width:960px){.herogrid{grid-template-columns:1fr;gap:36px}}
.hero h1{margin-bottom:20px}
.hero .lead{margin-bottom:28px;max-width:33em}
.pill{
  display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:650;
  padding:6px 14px;border-radius:30px;background:var(--acc-soft);color:var(--acc);
  border:1px solid var(--acc-line);margin-bottom:22px;
}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

/* ---------- at-a-glance strip (top of homepage) ---------- */
.glance{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-top:56px;
}
@media(max-width:900px){.glance{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.glance{grid-template-columns:1fr}}
.gl{background:var(--surface);padding:22px 22px 24px;display:flex;flex-direction:column;gap:3px}
.gl .glh{display:flex;align-items:center;gap:10px;margin-bottom:5px}
.gl .glh svg{width:18px;height:18px;flex:none;color:var(--acc)}
.gl.t .glh svg{color:var(--teal)}
.gl.p .glh svg{color:var(--pur)}
.gl.w .glh svg{color:var(--warn)}
.gl.o .glh svg{color:var(--ok)}
.gl .gt{font-size:15.5px;font-weight:750;color:var(--strong);letter-spacing:-.015em;line-height:1.3}
.gl .gd{font-size:14px;color:var(--t2);line-height:1.55}
.gl .gd b{color:var(--strong)}

/* ---------- progression ladder (recall -> evaluation) ---------- */
.ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px}
@media(max-width:940px){.ladder{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.ladder{grid-template-columns:1fr}}
.rung{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px 20px 24px;position:relative;overflow:hidden;box-shadow:var(--shadow);
}
.rung:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--border2)}
.rung.r1:before{background:var(--muted)}
.rung.r2:before{background:var(--teal)}
.rung.r3:before{background:var(--acc)}
.rung.r4:before{background:var(--pur)}
.rung .step{
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:9px;display:flex;align-items:center;gap:8px;
}
.rung.r2 .step{color:var(--teal)} .rung.r3 .step{color:var(--acc)} .rung.r4 .step{color:var(--pur)}
.rung h4{font-size:17px;margin-bottom:7px;letter-spacing:-.015em}
.rung p{font-size:14px;color:var(--t2);margin-bottom:12px;line-height:1.6}
.rung .eg{
  font-size:12.5px;color:var(--muted);border-top:1px dashed var(--border);
  padding-top:10px;line-height:1.55;
}
.rung .eg b{color:var(--t2);font-weight:650}
.rung.r1{opacity:.82}

/* ---------- assurance strip (pricing) ---------- */
.assure{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:8px}
@media(max-width:900px){.assure{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.assure{grid-template-columns:1fr}}
.as{display:flex;gap:12px;align-items:flex-start;background:var(--el);border-radius:12px;padding:16px 18px}
.as svg{width:20px;height:20px;color:var(--ok);flex:none;margin-top:2px}
.as .at{font-size:15px;font-weight:700;color:var(--strong);line-height:1.3}
.as .ab{font-size:13px;color:var(--muted);line-height:1.5;margin-top:2px}

/* ---------- paired teacher/student panel ---------- */
.pair{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  background:var(--surface);box-shadow:var(--shadow);margin-top:26px;
}
@media(max-width:720px){.pair{grid-template-columns:1fr}}
.pair > div{padding:22px 24px}
.pair > div + div{border-left:1px solid var(--border)}
@media(max-width:720px){.pair > div + div{border-left:none;border-top:1px solid var(--border)}}
.pair .ph2{
  font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  margin-bottom:10px;display:flex;align-items:center;gap:8px;
}
.pair .ph2 svg{width:14px;height:14px}
.pair .t{color:var(--warn)}
.pair .s{color:var(--teal)}
.pair p{font-size:15.5px;line-height:1.65;color:var(--strong);margin:0;font-style:italic}
.paircap{font-size:13px;color:var(--muted);margin-top:12px;line-height:1.6}

/* ---------- savings: headline band near the top ---------- */
.savband{
  background:linear-gradient(180deg,var(--acc-soft),transparent 70%),var(--surface);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.savband .wrap{padding-top:52px;padding-bottom:48px}
.savhead{text-align:center;max-width:720px;margin:0 auto 34px}
.savhead h2{margin-bottom:12px}
.savnums{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:900px){.savnums{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.savnums{grid-template-columns:1fr}}
.sv{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:26px 20px;text-align:center;box-shadow:var(--shadow);
}
.sv.hero{border:2px solid var(--acc);box-shadow:var(--shadow-lg)}
.sv .n{
  font-size:clamp(32px,4.4vw,46px);font-weight:800;color:var(--acc);
  letter-spacing:-.04em;line-height:1.02;font-variant-numeric:tabular-nums;
}
.sv.t .n{color:var(--teal)} .sv.p .n{color:var(--pur)} .sv.w .n{color:var(--warn)}
.sv .l{font-size:14.5px;font-weight:700;color:var(--strong);margin-top:9px;line-height:1.3}
.sv .s{font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.5}
.savfoot{text-align:center;font-size:13.5px;color:var(--muted);margin-top:24px;line-height:1.6}
.savfoot a{font-weight:650}
.savfine{text-align:center;font-size:12px;color:var(--muted);margin-top:14px;line-height:1.55}
.savfine a{font-weight:600}

/* ---------- savings: the workings, small print at the bottom ---------- */
.workings{font-size:13.5px;color:var(--t2);line-height:1.65}
.workings h2{font-size:21px;margin-bottom:6px}
.workings .intro{font-size:14px;color:var(--muted);margin-bottom:22px;max-width:62em}
.wkgrid{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:28px;align-items:start}
@media(max-width:900px){.wkgrid{grid-template-columns:1fr;gap:22px}}
.wkgrid h4{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.wkline{display:flex;justify-content:space-between;gap:14px;padding:5px 0;border-bottom:1px dashed var(--border)}
.wkline:last-of-type{border-bottom:none}
.wkline span:last-child{font-weight:700;color:var(--strong);font-variant-numeric:tabular-nums;white-space:nowrap}
.wkline.tot{border-top:1.5px solid var(--border2);border-bottom:none;margin-top:5px;padding-top:8px}
.wkline.tot span{color:var(--strong);font-weight:800}
.wkin{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.wkin label{display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin-bottom:3px;line-height:1.3}
.wkin input{
  width:100%;font:inherit;font-size:14px;font-weight:700;color:var(--strong);
  background:var(--surface);border:1px solid var(--border2);border-radius:7px;
  padding:7px 9px;font-variant-numeric:tabular-nums;
}
.wkin input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 2px var(--acc-soft)}
.wkreset{margin-top:10px;font:inherit;font-size:12.5px;font-weight:600;color:var(--acc);background:none;border:none;padding:0;cursor:pointer;text-decoration:underline}
.wknote{font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:20px;padding-top:18px;border-top:1px solid var(--border)}
.wknote b{color:var(--t2)}
.wknote p{margin-bottom:9px}
.wknote p:last-child{margin-bottom:0}


/* ---------- founding-school offer band (temporary) ----------
   Self-removes after the date in data-offer-until. Delete the markup and this
   block once the offer is over for good. */
.offerband{
  background:linear-gradient(100deg,#1d4ed8,#1e40af 55%,#0f766e);
  color:#fff;position:relative;overflow:hidden;
}
html.dark .offerband{background:linear-gradient(100deg,#1e3a8a,#172554 55%,#115e59)}
.offerband:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:radial-gradient(ellipse 70% 120% at 15% 50%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 120% at 15% 50%,#000 20%,transparent 75%);
}
.offerin{
  position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;
  padding:20px 24px;display:flex;align-items:center;gap:14px 26px;flex-wrap:wrap;
}
.offerbadge{
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);
  border-radius:30px;padding:5px 13px;flex:none;
}
.offertxt{flex:1;min-width:260px}
.offertxt .oh{font-size:clamp(19px,2.4vw,25px);font-weight:800;letter-spacing:-.02em;line-height:1.2}
.offertxt .os{font-size:14px;opacity:.92;margin-top:5px;line-height:1.5}
.offerband .btn{
  background:#fff;color:#1d4ed8;border-color:#fff;flex:none;box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.offerband .btn:hover{background:#f1f5ff;color:#1e3a8a}
.offerband .ph{color:#fff;background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.45)}
@media(max-width:700px){
  .offerin{padding:16px 18px;gap:12px}
  .offertxt{min-width:0}
  .offerband .btn{width:100%;justify-content:center}
}

/* ---------- legal strip above the footer ---------- */
.legalstrip{background:var(--el);border-top:1px solid var(--border)}
.legalstrip .wrap{padding-top:30px;padding-bottom:30px}
.legalstrip ul{list-style:none;display:grid;gap:9px;max-width:920px}
.legalstrip li{font-size:13.5px;color:var(--t2);line-height:1.6;padding-left:18px;position:relative}
.legalstrip li:before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--border2)}

/* ---------- integration logos ---------- */
.integ{display:flex;flex-wrap:wrap;gap:10px}
.integ span{
  font-size:13.5px;font-weight:600;color:var(--t2);background:var(--surface);
  border:1px solid var(--border);border-radius:9px;padding:8px 14px;
}

/* ---------- image slots ---------- */
.slot{
  position:relative;border:2px dashed var(--border2);border-radius:var(--radius);
  background:
    repeating-linear-gradient(45deg,transparent,transparent 11px,var(--el) 11px,var(--el) 22px),
    var(--surface);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:26px 22px;text-align:center;min-height:220px;color:var(--muted);
}
.slot .tag{
  font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--acc);background:var(--surface);border:1px solid var(--acc-line);
  border-radius:20px;padding:4px 11px;
}
.slot .tag.gif{color:var(--pur);border-color:rgba(126,34,206,.3)}
.slot .tag.photo{color:var(--teal);border-color:rgba(15,118,110,.3)}
.slot .tag.shot{color:var(--warn);border-color:rgba(161,98,7,.3)}
.slot .nm{font-size:15px;font-weight:700;color:var(--strong);max-width:34em;line-height:1.45}
.slot .ds{font-size:13px;max-width:40em;line-height:1.6}
.slot.tall{min-height:340px}
.slot.wide{min-height:300px}
.slot.short{min-height:150px;padding:18px}

/* ---------- cards ---------- */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow);
}
.card p{font-size:15px;color:var(--t2);margin-bottom:0}
.card .ico{
  width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:var(--acc-soft);color:var(--acc);margin-bottom:16px;
}
.card .ico svg{width:20px;height:20px}
.card .ico.teal{background:var(--teal-soft);color:var(--teal)}
.card .ico.pur{background:var(--pur-soft);color:var(--pur)}
.card .ico.warn{background:var(--warn-soft);color:var(--warn)}
.card .ico.ok{background:var(--ok-soft);color:var(--ok)}
.card.flat{box-shadow:none;background:var(--el);border-color:transparent}

/* ---------- stat / number strip ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--surface);padding:26px 22px}
.stat .n{font-size:clamp(28px,3.6vw,40px);font-weight:800;color:var(--strong);letter-spacing:-.035em;line-height:1.1}
.stat .l{font-size:13.5px;color:var(--muted);margin-top:6px;line-height:1.45}

/* ---------- trust strip ---------- */
.trust{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface)}
.trustin{display:flex;flex-wrap:wrap;gap:14px 34px;align-items:center;justify-content:center;padding:20px 24px}
.trustin span{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--t2)}
.trustin svg{width:15px;height:15px;color:var(--ok);flex:none}

/* ---------- split feature rows ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.rev .txt{order:2}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:30px}.split.rev .txt{order:0}}
.split + .split{margin-top:82px}
.split h3{font-size:clamp(22px,2.6vw,29px);font-weight:750;margin-bottom:12px;letter-spacing:-.022em}
.split p{color:var(--t2)}

/* ---------- ticks ---------- */
ul.ticks{list-style:none;display:grid;gap:11px;margin:18px 0 0}
ul.ticks li{display:flex;gap:11px;font-size:15.5px;color:var(--t2);line-height:1.55}
ul.ticks li:before{
  content:"";width:19px;height:19px;flex:none;margin-top:3px;border-radius:50%;
  background:var(--ok-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}
html.dark ul.ticks li:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235fd18b' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}
ul.ticks li b{color:var(--strong)}

/* ---------- activity chips ---------- */
.actgroup{margin-bottom:26px}
.actgroup .gh{font-size:12px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:11px;display:flex;align-items:center;gap:10px}
.actgroup .gh:after{content:"";flex:1;height:1px;background:var(--border)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font-size:13.5px;font-weight:600;padding:7px 14px;border-radius:9px;
  background:var(--surface);border:1px solid var(--border);color:var(--t2);
}
.chip.named{background:var(--acc-soft);border-color:var(--acc-line);color:var(--acc)}
.chip.diag{background:var(--teal-soft);border-color:rgba(15,118,110,.28);color:var(--teal)}
.chip.game{background:var(--pur-soft);border-color:rgba(126,34,206,.28);color:var(--pur)}

/* ---------- table ---------- */
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.tbl th,.tbl td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
.tbl thead th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;background:var(--el)}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl td:first-child{font-weight:650;color:var(--strong)}
.tblscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- quote ---------- */
.quote{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--acc);border-radius:var(--radius);padding:30px 32px;box-shadow:var(--shadow)}
.quote p{font-size:19px;line-height:1.6;color:var(--strong);font-weight:500;letter-spacing:-.012em}
.quote .who{margin-top:16px;font-size:14px;color:var(--muted);font-weight:600}

/* ---------- callout ---------- */
.note{background:var(--el);border:1px solid var(--border);border-radius:12px;padding:18px 20px;font-size:14.5px;color:var(--t2)}
.note.acc{background:var(--acc-soft);border-color:var(--acc-line)}
.note.warn{background:var(--warn-soft);border-color:rgba(161,98,7,.28)}
.note .nh{font-size:12px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--strong);margin-bottom:7px}

/* ---------- cta band ---------- */
.cta{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cta .inner{text-align:center;max-width:660px;margin:0 auto}
.cta h2{margin-bottom:12px}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
@media(max-width:980px){.plans{grid-template-columns:1fr;max-width:520px;margin:0 auto}}
.plan{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:30px 28px;box-shadow:var(--shadow);position:relative;display:flex;flex-direction:column;height:100%}
.plan.feat{border:2px solid var(--acc);box-shadow:var(--shadow-lg)}
.plan .flag{position:absolute;top:-12px;left:28px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:var(--acc);color:#fff;padding:5px 13px;border-radius:20px}
html.dark .plan .flag{color:#0d1220}
.plan .pn{font-size:19px;font-weight:750;color:var(--strong);margin-bottom:5px}
.plan .pd{font-size:14px;color:var(--muted);margin-bottom:20px;min-height:42px}
.plan .pp{font-size:38px;font-weight:800;color:var(--strong);letter-spacing:-.035em;line-height:1.1}
.plan .pp .cur{font-size:22px;vertical-align:top;font-weight:700;margin-right:2px}
.plan .pu{font-size:14px;color:var(--muted);margin-bottom:22px;margin-top:4px}
.plan ul.ticks{margin-top:0;margin-bottom:24px;flex:1}
.plan ul.ticks li{font-size:14.5px}
.plan .btn{width:100%;justify-content:center}
.ph{color:var(--warn);background:var(--warn-soft);border:1px dashed rgba(161,98,7,.4);border-radius:6px;padding:0 7px;font-size:.85em;font-weight:700}

/* ---------- forms ---------- */
.form{display:grid;gap:16px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:620px){.frow{grid-template-columns:1fr}}
.field label{display:block;font-size:13.5px;font-weight:650;color:var(--strong);margin-bottom:6px}
.field .hint{font-size:12.5px;color:var(--muted);margin-top:5px}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:15px;color:var(--text);background:var(--surface);
  border:1.5px solid var(--border2);border-radius:10px;padding:12px 14px;transition:border-color .18s,box-shadow .18s;
}
.field textarea{min-height:130px;resize:vertical;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.check{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--t2)}
.check input{width:17px;height:17px;margin-top:3px;flex:none;accent-color:var(--acc)}
:focus-visible{outline:2.5px solid var(--acc);outline-offset:2px;border-radius:4px}

/* ---------- tabs (sign in / sign up) ---------- */
.tabs{display:flex;gap:4px;background:var(--el);border:1px solid var(--border);border-radius:12px;padding:4px;margin-bottom:26px}
.tabs button{flex:1;font:inherit;font-size:14.5px;font-weight:650;padding:10px;border:none;background:transparent;color:var(--muted);border-radius:9px;cursor:pointer}
.tabs button.on{background:var(--surface);color:var(--strong);box-shadow:var(--shadow)}
.pane{display:none}.pane.on{display:block}

/* ---------- accordion ---------- */
.acc details{background:var(--surface);border:1px solid var(--border);border-radius:12px;margin-bottom:10px;overflow:hidden}
.acc summary{cursor:pointer;padding:17px 20px;font-size:16px;font-weight:650;color:var(--strong);list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.acc summary::-webkit-details-marker{display:none}
.acc summary:after{content:"+";font-size:21px;color:var(--muted);font-weight:400;line-height:1;flex:none}
.acc details[open] summary:after{content:"\2013"}
.acc .body{padding:0 20px 19px;font-size:15px;color:var(--t2)}
.acc .body p{margin-bottom:12px}

/* ---------- footer ---------- */
footer.ft{background:var(--surface);border-top:1px solid var(--border);padding:56px 0 30px;font-size:14.5px}
.ftgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;margin-bottom:40px}
@media(max-width:860px){.ftgrid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:520px){.ftgrid{grid-template-columns:1fr}}
.ftgrid h5{font-size:12px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.ftgrid a{display:block;color:var(--t2);text-decoration:none;padding:5px 0}
.ftgrid a:hover{color:var(--acc)}
.ftgrid p{font-size:14px;color:var(--muted);max-width:30em}
.ftbot{border-top:1px solid var(--border);padding-top:22px;display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;align-items:flex-start}
.ftbot .legal{font-size:12.5px;color:var(--muted);max-width:64em;line-height:1.65}
.ftbot .legal b{color:var(--t2)}

/* ---------- misc ---------- */
.hr{height:1px;background:var(--border);border:none;margin:0}
.anchor{scroll-margin-top:86px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ---------- real media, replacing the dashed placeholder slots ----------
   .shotbox wraps a captured screenshot or GIF. It keeps the same vertical
   rhythm as .slot so swapping one for the other does not move the page.
   Images are never cropped: a lesson screenshot is unreadable if it is, and
   the whole point of these assets is that a head of department can read them. */
.shotbox{
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);box-shadow:var(--shadow);
  overflow:hidden;margin:0;
}
.shotbox img{display:block;width:100%;height:auto}
.shotbox figcaption{
  font-size:13px;line-height:1.55;color:var(--muted);
  padding:12px 16px;border-top:1px solid var(--border);background:var(--el);
}
.shotbox figcaption b{color:var(--strong);font-weight:700}
.shotbox.tall img{min-height:0}

/* Looping silent video in place of a GIF. Same box, ~9% of the weight: the GIFs
   were 1.8-6.1 MB each, which on a school network means a head of department
   sees a placeholder. H.264 at CRF 23 keeps the UI text crisp — checked frame
   by frame against the original, because smeared body copy would defeat the
   point of showing the product at all.
   muted + playsinline are what let it autoplay at all on iOS and in Chrome. */
.shotbox video.shotvid{display:block;width:100%;height:auto;background:var(--el)}
@media (prefers-reduced-motion:reduce){
  /* Honour the setting: stop it looping at people who have asked things to hold still. */
  .shotbox video.shotvid{animation:none}
}

/* ---------- give the captures real estate ----------
   These were sitting in a 2- or 3-column grid beside a bullet list, which left
   each video about 340px wide — far too small to read a mark scheme or a
   checkpoint grid in. Spanning the full row roughly triples the width.
   The media is the argument on this page; the bullets beside it were not
   earning their half of the row. */
.grid > .shotbox{grid-column:1 / -1}
.shotbox{max-width:1180px;margin-left:auto;margin-right:auto}

/* Hero: hand more of the row to the video than to the copy. */
@media(min-width:961px){
  .herogrid{grid-template-columns:.92fr 1.08fr;gap:44px}
}

/* A caption under a wide video can run to a silly line length. */
.shotbox figcaption{max-width:none}
.shotbox figcaption > span{display:block;max-width:70ch}

/* Stills version of the homepage (index-stills.html) — same layout, single
   frames instead of looping video, so the two can be compared like for like. */
.shotbox img.shotstill{display:block;width:100%;height:auto}
.stillnote{
  background:var(--acc-soft);border-bottom:1px solid var(--acc-line);color:var(--acc);
  font-size:13.5px;padding:9px 16px;text-align:center;
}
.stillnote a{color:inherit;font-weight:700}

/* ---------- the workings, dialled down ----------
   This is the audit trail for the savings figures. It has to be there and it
   has to be checkable, but it is not what sells the product, so it no longer
   takes up the room of a feature section. */
#workings{padding-top:28px;padding-bottom:28px}
#workings .workings{font-size:13px}
#workings h2{font-size:19px;margin-bottom:6px}
#workings .intro{font-size:13px;max-width:62em;margin-bottom:14px}
#workings h4{font-size:12px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px}
#workings .wkgrid{gap:18px}
#workings .wkline,#workings .wkin{font-size:12.5px}
#workings input{font-size:12.5px;padding:5px 7px}
#workings .savfine,#workings .mut{font-size:12px}
/* Collapsible so it is one quiet line until someone actually wants to audit it. */
#workings details.wkdetails > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
}
#workings details.wkdetails > summary::-webkit-details-marker{display:none}
#workings details.wkdetails > summary h2{display:inline;margin:0}
#workings details.wkdetails > summary::after{
  content:"";width:7px;height:7px;flex:none;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .15s;
}
#workings details.wkdetails[open] > summary::after{transform:rotate(-135deg)}

/* A .split that has had its image pulled out below it is a single column now. */
.split.solo{grid-template-columns:1fr}

/* ---------- feature-width captures ----------
   The class summary was rendering at about 540px inside a two-column split,
   against a 1400px source — the misconception text was there but unreadable,
   which defeats the point of showing it at all. A capture whose value IS its
   text needs the full column, and the panel is already as zoomed as the app
   will go. */
.shotbox.feature{max-width:1400px;margin:30px auto 0}
.shotbox.feature img{width:100%;height:auto}
@media(min-width:1500px){ .shotbox.feature{max-width:1400px} }

/* Let a feature capture use the full viewport width on a wide screen, rather
   than being boxed into the text column. Capped at the image's native 1400px
   so it is never upscaled — an upscaled screenshot looks worse than a small one. */
@media(min-width:1180px){
  .shotbox.feature{
    width:min(1400px, calc(100vw - 48px));
    max-width:none;
    margin-left:50%;
    transform:translateX(-50%);
  }
}

/* A capture sitting in the middle of a column of prose, where the bullets that
   used to explain it were — the three states are self-evident once you watch
   the toggle, so the clip replaces the words rather than sitting beside them. */
.shotbox.inline-wide{max-width:none;margin:22px 0 22px}
.shotbox.inline-wide video,.shotbox.inline-wide img{width:100%;height:auto}

/* Keep feature captures centred and never upscaled past their native width. */
.shotbox.feature + .shotbox.feature{margin-top:26px}

/* ============================================================================
   ONE RULE FOR EVERY CAPTURE ON THE PAGE
   ----------------------------------------------------------------------------
   The page was laid out as text-beside-image splits. That works for an
   illustration; it does not work for a screenshot of software, because the
   image lands at roughly 540px while the source is 1400px and the UI text in
   it becomes unreadable. I had been fixing this section by section, which is
   why it kept coming back somewhere else.

   So: any split that contains a capture becomes a single column, and the
   capture sits full width beneath the prose, centred, never upscaled past its
   native size. :has() does the work, so this applies to every section at once
   — including any added later. The .solo class below is the manual fallback
   for a browser without :has().
   ========================================================================== */
.split:has(> .shotbox){grid-template-columns:1fr}
.split > .shotbox{max-width:1400px;margin:28px auto 0;width:100%}
.split > .shotbox.inline-wide{margin:22px 0}
.grid > .shotbox{grid-column:1 / -1;max-width:1400px;margin-left:auto;margin-right:auto}

/* Prose should not stretch to 1400px just because the image does. */
.split:has(> .shotbox) > .txt{max-width:74ch}

/* The progress tracker and the student view are 1440px captures — let them use
   their full native width rather than the 1400px default cap, and keep the two
   visually paired since they are the same data from the two sides. */
.shotbox.feature{max-width:1440px}
@media(min-width:1180px){ .shotbox.feature{width:min(1440px, calc(100vw - 48px))} }

/* A tall portrait capture must not take the full feature width — at 1440px a
   900x1283 screenshot becomes several screens high and the reader scrolls past
   the point instead of seeing it. Cap it near its native width and centre it. */
.shotbox:has(> img.portrait){max-width:760px;width:auto}
.shotbox img.portrait{max-width:760px;margin:0 auto}
/* The AI-marked card is a narrow 700px capture — show it near native size, centred,
   rather than stretching a two-mark question across the page. */
.shotbox:has(> img[src$="ai-marked.png"]){max-width:820px}

/* ---------- portrait captures sit beside the text ----------
   Exception to the "captures go full width" rule above. A tall portrait
   screenshot (the PPC checkpoint is 900x1283) becomes several screens high at
   full width and makes an already long page longer. Beside the prose it reads
   as an illustration of the paragraph next to it, at a sensible size. */
.split:has(> .shotbox img.portrait){grid-template-columns:1.1fr .9fr;align-items:start}
@media(max-width:900px){ .split:has(> .shotbox img.portrait){grid-template-columns:1fr} }
.split > .shotbox:has(img.portrait){max-width:440px;width:100%;margin:0 auto}
.split > .shotbox img.portrait{max-width:100%;width:100%}

/* Activity types as a two-column list rather than a wall of named chips. */
ul.ticks.acttypes{grid-template-columns:1fr 1fr;column-gap:36px;margin-top:8px}
@media(max-width:800px){ ul.ticks.acttypes{grid-template-columns:1fr} }

/* ---------- side captures ----------
   Smaller screenshots that illustrate the paragraph next to them rather than
   carrying the section on their own: the AI-marked answer, and the review
   activity placeholder. They keep the split two-column and sit at ~460px. */
.split:has(> .side){grid-template-columns:1.1fr .9fr;align-items:center}
@media(max-width:900px){ .split:has(> .side){grid-template-columns:1fr} }
.split > .shotbox.side{max-width:470px;width:100%;margin:0 auto}
.split > .shotbox.side img{width:100%;height:auto}
.split > .slot.side{min-height:300px;max-width:470px;width:100%;margin:0 auto}

/* Data-tracking cards under the two progress captures: space them off the
   screenshot, put the icon beside the title, keep the four the same height. */
.grid.datacards{margin-top:48px;gap:16px;align-items:stretch}
.datacards .card{padding:20px 22px;display:grid;grid-template-columns:36px 1fr;column-gap:12px;row-gap:6px;align-content:start}
.datacards .card .ico{width:36px;height:36px;margin:0;border-radius:10px}
.datacards .card h4{margin:0;align-self:center;font-size:16px;line-height:1.25}
.datacards .card p{grid-column:1 / -1;font-size:14.5px;line-height:1.5}
/* The student-view capture is 1004px wide: show it at native size, not stretched to 1440. */
.shotbox.feature.native{max-width:1004px}
@media(min-width:1180px){ .shotbox.feature.native{width:min(1004px, calc(100vw - 48px))} }