/* ProctorSys landing page. Three inks: pupil blue, AI pencil grey, teacher red. */
@font-face{font-family:'Figtree';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/figtree-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/figtree-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/figtree-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/figtree-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/figtree-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/bricolage-grotesque-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/bricolage-grotesque-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/bricolage-grotesque-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Kalam';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/kalam-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Kalam';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/kalam-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
.ph{display:inline-flex;line-height:1;vertical-align:-0.125em}.ph svg{width:1em;height:1em;fill:currentColor}

:root{
  --ground:#F3F5F9; --card:#FFFFFF; --line:#E1E6EF; --rule:#CFDAEC; --margin:#E7A39F;
  --text:#141A2B; --text-2:#454C5E; --text-3:#666C7D;
  --ink:#2340A6;            /* what the pupil wrote: blue ballpoint */
  --pencil:#585D66; --pencil-2:#8C929B; --pencil-soft:#ECEEF1;  /* the AI: graphite */
  --pen:#C9241B; --pen-dark:#A71C14; --pen-soft:#FCEBE9;         /* the teacher: red ink */
  --board:#16205A;
  --ui:'Figtree',system-ui,sans-serif; --display:'Bricolage Grotesque',var(--ui); --hand:'Kalam','Comic Sans MS',cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--ground);font-family:var(--ui);color:var(--text);-webkit-font-smoothing:antialiased}
.num{font-variant-numeric:tabular-nums}

/* ---------- board 1: phones ---------- */












.phone{width:410px;height:864px;border-radius:58px;background:#05070f;padding:10px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6),0 0 0 1.5px #2a3160}
.screen{width:390px;height:844px;border-radius:48px;background:var(--ground);overflow:hidden;position:relative;display:flex;flex-direction:column}
.sb{height:47px;flex:none;display:flex;justify-content:space-between;align-items:center;padding:6px 30px 0 34px;font-weight:700;font-size:16px}
.sb .r{display:flex;gap:6px;align-items:center}
.appbar{flex:none;display:flex;align-items:center;gap:10px;padding:6px 16px 12px}
.ib{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--text)}
.ib svg{width:22px;height:22px}
.at{flex:1;min-width:0}
.at b{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em}
.at span{display:block;font-size:13px;color:var(--text-3);margin-top:1px}
.pill{font-size:13px;font-weight:700;padding:6px 10px;border-radius:999px;background:var(--card);border:1px solid var(--line);white-space:nowrap}
.body{flex:1;overflow:hidden;padding:0 16px}

/* class list */
.prog{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px}
.prog .big{display:flex;align-items:baseline;gap:8px}
.prog .big b{font-family:var(--display);font-size:34px;font-weight:800;letter-spacing:-.02em;color:var(--pen)}
.prog .big span{font-size:15px;color:var(--text-2)}
.seg{display:grid;grid-template-columns:repeat(34,1fr);gap:2px;margin:12px 0 10px}
.seg i{height:16px;border-radius:2px;background:#fff;border:1px solid var(--rule)}
.seg i.s{background:var(--pen);border-color:var(--pen)}
.seg i.p{background:var(--pencil-2);border-color:var(--pencil-2)}
.prog .k{display:flex;gap:14px;font-size:12.5px;color:var(--text-3)}
.prog .k span{display:flex;gap:5px;align-items:center}
.prog .k i{width:10px;height:10px;border-radius:2px;display:block}
.prog.rc{display:flex;align-items:center;gap:20px;padding:14px 18px}
.ringw{position:relative;width:116px;height:116px;flex:none}
.ringw svg{width:100%;height:100%;transform:rotate(-90deg)}
.ringw .c{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ringw .c b{font-family:var(--display);font-size:34px;font-weight:800;color:var(--pen);line-height:1;letter-spacing:-.02em}
.ringw .c span{font-size:12.5px;color:var(--text-3);margin-top:2px}
.rl{flex:1}
.rl b{font-size:15px;font-weight:700}
.rl div{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-2);margin-top:8px}
.rl div i{width:10px;height:10px;border-radius:3px;display:block}
.rl div em{margin-left:auto;font-style:normal;font-weight:700;color:var(--text)}
.sec{margin:20px 4px 8px;display:flex;justify-content:space-between;align-items:baseline}
.sec b{font-size:15px;font-weight:700}
.sec span{font-size:13px;color:var(--text-3)}
.list{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.it{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--line)}
.it:first-child{border-top:0}
.it .who{flex:1;min-width:0}
.it .who b{display:block;font-size:15.5px;font-weight:600}
.it .who span{display:block;font-size:12.5px;color:var(--text-3);margin-top:2px}
.it .who span em{font-style:normal;color:var(--pencil);font-weight:600}
.mini{display:flex;gap:2px;margin-top:7px}
.mini i{width:11px;height:13px;border-radius:2px;background:var(--pencil-soft);border:1px solid #D6D9DE}
.mini i.s{background:var(--pen);border-color:var(--pen)}
.mini i.p{background:#C7CBD1;border-color:#C7CBD1}
.mini i.dq{background:repeating-linear-gradient(135deg,var(--pencil) 0 1.6px,#fff 1.6px 4px);border-color:var(--pencil)}
.tot{text-align:right;min-width:52px}
.tot b{display:block;font-size:19px;font-weight:800;letter-spacing:-.01em}
.tot span{display:block;font-size:11.5px;color:var(--text-3)}
.tot.pen b{color:var(--pen)}
.tot.pc b{color:var(--pencil)}
.mr{width:42px;height:42px;flex:none;transform:rotate(-90deg)}
.chev{color:#A3A8B3;width:18px;height:18px;flex:none}
.tabs{flex:none;height:78px;padding:8px 22px 22px;background:var(--card);border-top:1px solid var(--line);display:flex;justify-content:space-around}
.tabs a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11.5px;font-weight:600;color:var(--text-3);text-decoration:none}
.tabs a svg{width:23px;height:23px}
.tabs a.on{color:var(--pen)}

/* marking */
.cover{display:grid;grid-template-columns:repeat(13,1fr);gap:3px;padding:0 16px 12px;flex:none}
.cover div{background:var(--card);border:1px solid var(--line);border-radius:7px;text-align:center;padding:3px 0 4px}
.cover small{display:block;font-size:10px;color:var(--text-3);font-weight:600}
.cover b{display:block;font-size:13px;font-weight:800;margin-top:1px}
.cover .s b{color:var(--pen)}
.cover .p b{color:var(--pencil-2);font-weight:700}
.cover .now{border:2px solid var(--text);background:#fff}
.cover .now b{color:var(--pencil)}
.scan{position:relative;margin:0 16px;height:250px;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#FDFDFB;flex:none;
  background-image:repeating-linear-gradient(180deg,transparent 0 31px,var(--rule) 31px 32px);background-position:0 14px}
.scan::before{content:"";position:absolute;top:0;bottom:0;left:40px;width:1.5px;background:var(--margin)}
.scan .h{position:absolute;left:52px;right:10px;white-space:nowrap;font-family:var(--hand);color:var(--ink);font-size:17.5px;line-height:32px;top:15px;transform:rotate(-.6deg);transform-origin:left top}
.scan .qn{position:absolute;left:10px;top:15px;font-family:var(--hand);font-weight:700;color:var(--ink);font-size:19px;line-height:32px}
.u{text-decoration:underline;text-decoration-color:#7A8089;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-skip-ink:none}
.car{display:inline-block;width:16px;height:14px;margin-left:4px;vertical-align:-2px;color:#7A8089}
.scan .tag{position:absolute;left:10px;bottom:10px;font-size:12px;font-weight:700;background:rgba(20,26,43,.82);color:#fff;padding:5px 9px;border-radius:999px}
.scan .open{position:absolute;right:10px;bottom:10px;display:flex;gap:6px;align-items:center;font-size:12.5px;font-weight:700;background:#fff;border:1px solid var(--line);padding:6px 10px;border-radius:999px;box-shadow:0 4px 10px -4px rgba(20,26,43,.25)}
.scan .open svg{width:15px;height:15px}
.q{padding:14px 20px 0;display:flex;gap:12px;flex:none}
.q p{flex:1;font-size:15.5px;line-height:1.4;font-weight:500}
.q p b{font-weight:800;margin-right:4px}
.q span{font-size:13px;color:var(--text-3);white-space:nowrap;padding-top:2px}
.ai{margin:12px 16px 0;border-radius:18px;padding:14px 16px;background:var(--card);border:1.5px dashed var(--pencil-2);flex:none}
.ai .top{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--pencil)}
.ai .top svg{width:18px;height:18px}
.ai .top em{margin-left:auto;font-style:normal;font-weight:600;color:var(--text-3);font-size:12px}
.ai .mk{display:flex;align-items:baseline;gap:6px;margin:4px 0 8px}
.ai .mk b{font-family:var(--display);font-size:44px;font-weight:700;color:var(--pencil);letter-spacing:-.02em;line-height:1}
.ai .mk span{font-size:17px;color:var(--pencil-2);font-weight:600}
.ai ul{list-style:none;display:grid;gap:6px}
.ai li{display:flex;gap:8px;font-size:14px;line-height:1.35;color:var(--text-2)}
.ai li svg{flex:none;width:17px;height:17px;margin-top:1px;color:var(--pencil)}
.dock{margin-top:auto;flex:none;background:var(--card);border-top:1px solid var(--line);padding:12px 16px 30px}
.give{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.give span{font-size:13px;color:var(--text-3);font-weight:600;margin-right:4px}
.give a{flex:1;height:42px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;font-weight:700;font-size:16px;color:var(--text)}
.give a.ai1{border:1.5px dashed var(--pencil-2);color:var(--pencil)}
.go{height:56px;border-radius:16px;background:var(--pen);color:#fff;display:flex;align-items:center;justify-content:center;gap:10px;font-size:17px;font-weight:700;box-shadow:0 10px 20px -10px rgba(201,36,27,.7)}
.go svg{width:20px;height:20px}
.go small{font-weight:500;opacity:.85;font-size:14px}

/* sign */
.hd{padding:2px 20px 14px;flex:none}
.hd h2{font-family:var(--display);font-size:30px;font-weight:800;letter-spacing:-.02em}
.hd p{font-size:14.5px;color:var(--text-2);margin-top:4px;line-height:1.4}
.sheet{margin:0 16px;background:#fff;border:1.5px solid var(--text);border-radius:6px;flex:none}
.sheet .ttl{font-size:11px;font-weight:800;letter-spacing:.08em;text-align:center;padding:6px;border-bottom:1.5px solid var(--text)}
.sheet table{width:100%;border-collapse:collapse}
.sheet td,.sheet th{border:1px solid #9AA0AC;text-align:center;height:36px;font-size:12px}
.sheet tr td:first-child,.sheet tr th:first-child{border-left:0}
.sheet tr td:last-child,.sheet tr th:last-child{border-right:0}
.sheet th{font-weight:700;color:var(--text-2);background:#F6F7FA;height:26px}
.sheet td{font-weight:800;font-size:17px;color:var(--pen)}
.sheet td.l,.sheet th.l{color:var(--text-2);font-size:11px;font-weight:700;width:52px;background:#F6F7FA}
.sheet .tt{display:flex;align-items:center;justify-content:space-between;padding:10px 16px 12px;border-top:1.5px solid var(--text)}
.sheet .tt span{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--text-2)}
.circ{position:relative;padding:6px 18px;font-family:var(--display);font-weight:800;font-size:34px;color:var(--pen);letter-spacing:-.02em}
.circ small{font-family:var(--ui);font-size:15px;font-weight:600;color:var(--text-3);margin-left:4px}
.sheet .tt .circ .n{position:relative;display:inline-block;padding:0 10px;font-size:34px;letter-spacing:-.02em;color:var(--pen);font-weight:800}
.circ svg{position:absolute;left:-10px;top:-10px;width:calc(100% + 20px);height:calc(100% + 20px);overflow:visible}
.chg{margin:16px 16px 0;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 14px;flex:none}
.chg b{font-size:14px;font-weight:700}
.chg div{display:flex;align-items:center;gap:10px;margin-top:9px;font-size:14px;color:var(--text-2)}
.chg div strong{width:34px;font-weight:800;color:var(--text)}
.chg s{color:var(--pencil);font-weight:700;font-size:15px;text-decoration-color:var(--pen);text-decoration-thickness:2px}
.chg .aw{font-size:11.5px;font-weight:700;color:var(--pencil-2);margin-right:-4px}
.chg svg{width:14px;height:14px;color:var(--text-3)}
.chg i{font-style:normal;color:var(--pen);font-weight:800}
.chg em{margin-left:auto;font-style:normal;font-size:12.5px;color:var(--text-3)}
.signby{margin:14px 20px 0;font-size:13px;color:var(--text-3);display:flex;justify-content:space-between}
.signby b{color:var(--text);font-weight:600}
.nextb{margin-top:10px;height:46px;border-radius:14px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:15px}
.nextb span{color:var(--pencil);font-weight:600}
.foot{text-align:center;font-size:12.5px;color:var(--text-3);margin-top:10px}

/* ---------- board 2: website ---------- */


.nav{position:relative;height:84px;display:flex;align-items:center;padding:0 72px 0 112px;gap:40px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.02em}
.brand svg{width:22px;height:32px}
.nav nav{display:flex;gap:30px;font-size:15.5px;font-weight:600;color:var(--text-2)}
.nav nav a:first-child{color:var(--text)}
.nav .cta{margin-left:auto;display:flex;gap:18px;align-items:center;font-size:15.5px;font-weight:600}
.btn{height:46px;padding:0 20px;border-radius:13px;background:var(--pen);color:#fff;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:16px;box-shadow:0 10px 20px -10px rgba(201,36,27,.65)}
.btn svg{width:18px;height:18px}
.hero{position:relative;display:grid;grid-template-columns:620px 1fr;gap:40px;padding:56px 72px 0 112px}
.hero h1{font-family:var(--display);font-weight:800;font-size:80px;line-height:1;letter-spacing:-.035em}
.hero h1 .pc{color:var(--pencil-2)}
.hero h1 .pn{color:var(--pen)}
.hero .lead{margin-top:26px;font-size:20px;line-height:1.5;color:var(--text-2);max-width:34ch}
.hero .acts{display:flex;gap:22px;align-items:center;margin-top:34px}
.hero .acts .btn{height:56px;padding:0 26px;font-size:17px;border-radius:15px}
.hero .acts a.l{font-weight:700;font-size:16.5px;color:var(--text);text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--pen);text-decoration-thickness:2px}
.facts{margin-top:52px;display:flex;gap:26px;white-space:nowrap;font-size:15px;color:var(--text-2);font-weight:500}
.facts span{display:flex;gap:8px;align-items:center}
.facts svg{width:18px;height:18px;color:var(--pen)}

.page{position:relative;width:640px;height:640px;margin-top:-6px;background:#FEFEFC;border-radius:6px;transform:rotate(1.6deg);
  box-shadow:0 2px 4px rgba(20,26,43,.08),0 30px 60px -24px rgba(20,26,43,.35);
  background-image:repeating-linear-gradient(180deg,transparent 0 41px,var(--rule) 41px 42px);background-position:0 70px}
.page::before{content:"";position:absolute;top:0;bottom:0;left:64px;width:2px;background:var(--margin)}
.page::after{content:"";position:absolute;top:0;bottom:0;right:96px;width:2px;background:var(--margin)}
.page .ph{position:absolute;left:84px;top:20px;right:110px;display:flex;justify-content:space-between;font-family:var(--hand);color:var(--ink);font-size:20px}
.page .mh{position:absolute;right:14px;top:22px;width:70px;text-align:center;font-size:10.5px;font-weight:800;letter-spacing:.06em;color:var(--pen-dark)}
.page .qn{position:absolute;left:18px;font-family:var(--hand);font-weight:700;color:var(--ink);font-size:23px;line-height:42px}
.page .ans{position:absolute;left:84px;right:112px;font-family:var(--hand);color:var(--ink);font-size:23px;line-height:42px;transform:rotate(-.5deg);transform-origin:left top}
.page svg.ann{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.call{position:absolute;display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;padding:10px 14px;font-size:14.5px;font-weight:600;box-shadow:0 12px 28px -12px rgba(20,26,43,.4);border:1px solid var(--line);white-space:nowrap}
.call i{width:12px;height:12px;border-radius:50%;display:block;flex:none}
.call small{display:block;font-weight:500;color:var(--text-3);font-size:13px}


/* 3D hero: a real-thickness phone that turns as the page scrolls */
html,body.lp{overflow-x:clip}
.hero3{position:relative;overflow:hidden;background-image:repeating-linear-gradient(180deg,transparent 0 39px,rgba(120,150,200,.16) 39px 40px)}
.hero3::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 660px);width:2px;background:var(--margin);opacity:.75}
.h3grid{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:40px;align-items:center;min-height:calc(100dvh - 72px);padding-top:24px;padding-bottom:24px}
.hero3 h1{font-family:var(--display);font-weight:800;font-size:76px;line-height:1;letter-spacing:-.035em}
.hero3 h1 .w{position:relative;display:inline-block}
.hero3 h1 .pc{color:var(--pencil-2)}
.hero3 h1 .pn{color:var(--pen)}
.hero3 h1 .w svg{position:absolute;left:-2%;bottom:-6px;width:104%;height:18px;overflow:visible}
.hero3 h1 .w path{fill:none;stroke-width:5;stroke-linecap:round}
.hero3 .lead{margin-top:26px;font-size:20px;line-height:1.5;color:var(--text-2);max-width:32ch}
.hero3 .acts{display:flex;gap:24px;align-items:center;margin-top:34px;flex-wrap:wrap}

.stage{position:relative;height:700px;perspective:1600px;perspective-origin:50% 40%}
.ph3wrap{position:absolute;left:50%;top:30px;width:410px;height:864px;margin-left:-205px;transform-style:preserve-3d;transform:scale(.72);transform-origin:50% 0}
.ph3d{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 50%;will-change:transform}
.ph3d .front{position:absolute;inset:0;transform:translateZ(7px);transform-style:preserve-3d}
.ph3d .front .phone{box-shadow:none}
.ph3d .layer{position:absolute;inset:0;border-radius:58px;background:#1b2033}
.ph3d .layer.rim{background:linear-gradient(90deg,#3a4160,#1b2033 18%,#1b2033 82%,#3a4160)}
.ph3d .back{position:absolute;inset:0;border-radius:58px;transform:rotateY(180deg) translateZ(7px);background:linear-gradient(140deg,#2a3150,#141a2e)}
.ph3d .sheen{position:absolute;inset:10px;border-radius:48px;transform:translateZ(7.5px);pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 46%,transparent 58%);background-size:260% 100%;background-position:100% 0;mix-blend-mode:screen}
.floor{position:absolute;left:50%;bottom:6px;width:300px;height:44px;margin-left:-150px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(20,26,43,.32),transparent);filter:blur(4px)}

/* states inside the hero phone */
.ph3d .ai{position:relative}
.ph3d .lbl,.ph3d .ai .top em{display:inline-grid}
.ph3d .lbl>span,.ph3d .ai .top em>span,.ph3d .pill>span{grid-area:1/1}
.ph3d .pill{display:inline-grid}
.ph3d .l2,.ph3d .q9{opacity:0}
.ph3d .l2{color:var(--pen-dark)}
.ph3d .mk{position:relative}
.ph3d .mk .inked{position:absolute;left:0;top:0;font-family:var(--display);font-size:44px;font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--pen);opacity:0}
.ph3d .stamp{position:absolute;left:-14px;top:-12px;width:110px;height:68px;overflow:visible}
.ph3d .stamp path{fill:none;stroke:var(--pen);stroke-width:3;stroke-linecap:round;stroke-dasharray:300;stroke-dashoffset:300}
.ph3d .cover .now{position:relative}
.ph3d .cellred{position:absolute;inset:0;border-radius:6px;background:#fff;border:2px solid var(--pen);display:grid;place-items:end center;padding-bottom:3px;font-style:normal;font-size:13px;font-weight:800;color:var(--pen);opacity:0}
.ph3d .go{transform-origin:50% 50%}

/* depth for the sections below */
.trio{perspective:1400px}
.trio .ph-holder{transform-style:preserve-3d}
.lp .a4{will-change:transform}
.card2{perspective:1400px}
.state blockquote .wd{opacity:1}

/* polish: viewport-fit phone, depth page behind it, mouse tilt layer, headline lines */
.ph3wrap{transform:scale(var(--phs,.72))}
.ph3tilt{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.bgpage{position:absolute;left:50%;top:40px;width:640px;height:640px;margin-left:-470px;transform-origin:50% 50%;
  transform:translateZ(0) rotate(-10deg) scale(.6);opacity:.95;pointer-events:none;filter:saturate(.95)}
.bgpage .page{margin:0;transform:none;box-shadow:0 2px 4px rgba(20,26,43,.06),0 40px 70px -30px rgba(20,26,43,.35)}
.hero3 h1 .ln{display:inline-block}
.trio figure{position:relative}
.trio figure::after{content:"";position:absolute;left:50%;top:616px;width:240px;height:30px;margin-left:-120px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(20,26,43,.28),transparent);filter:blur(3px);z-index:-1}

.stagecap{display:none}
@media (max-width:1000px){
  .h3grid{grid-template-columns:1fr;min-height:0;padding-top:28px;gap:8px}
  .stage{height:560px}
  .ph3wrap{top:66px;--phs:.52}
  .bgpage{display:none}
  .stagecap{display:grid;position:absolute;left:0;right:0;top:4px;z-index:3;text-align:center;
    font-family:var(--display);font-weight:800;font-size:30px;line-height:1.1;letter-spacing:-.02em;color:var(--text)}
  .stagecap>span{grid-area:1/1}
  .stagecap .pc{color:var(--pencil-2)}
  .stagecap .pn{color:var(--pen)}
  .stagecap .c2{opacity:0}
  .trio{grid-template-columns:1fr;gap:44px}
  .trio figure::after{top:600px}
}
@media (max-width:760px){
  .hero3::before{left:8px}
  .hero3 h1{font-size:44px}
  .hero3 .lead{font-size:17px;margin-top:16px}
  .hero3 .acts{margin-top:20px;gap:16px}
  .stagecap{font-size:24px}
}
/* facts strip: pupil-blue line under the books, subjects read one by one, teacher's red ring round the 0 */
.ledger .lnum{position:relative;display:inline-block}
.ledger .lnum em{display:inline-block;font-variant-numeric:tabular-nums}
.ledger .lund{position:absolute;left:-2px;bottom:-7px;width:calc(100% + 4px);height:12px;overflow:visible}
.ledger .lund path{fill:none;stroke:var(--ink);stroke-width:4;stroke-linecap:round}
.ledger .ringed{margin:0 12px 0 4px}
.ledger .lring{position:absolute;left:-12px;top:-5px;width:calc(100% + 24px);height:calc(100% + 10px);overflow:visible}
.ledger .lring path{fill:none;stroke:var(--pen);stroke-width:3;stroke-linecap:round}
/* online exams: the invigilator console, copied from the live page. Its colour tokens are
   written out because this page's --ink is the pupil's blue, not the live page's near-black. */
.online .sub .cnt{display:inline-block;font-variant-numeric:tabular-nums}
.online .panel{background:#fff;border-radius:16px;border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 80px -34px rgba(0,0,0,.72);overflow:hidden}
.online .panel-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;background:#f8fafc;border-bottom:1px solid #e2e8f0}
.online .panel-bar i{width:9px;height:9px;border-radius:999px;background:#e2e8f0;display:block}
.online .panel-bar span{margin-left:8px;font-size:.76rem;color:#64748b}
.online .panel-body{padding:14px}
.online .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.online .tile{aspect-ratio:4/3;border-radius:9px;position:relative;overflow:hidden;background:linear-gradient(135deg,#cbd5e1,#94a3b8 55%,#64748b);display:flex;align-items:flex-end}
.online .tile.dk{background:linear-gradient(135deg,#1e293b,#0f172a)}
.online .tile b{display:block;width:100%;font-size:.55rem;color:#fff;font-weight:600;padding:4px 5px;background:linear-gradient(transparent,rgba(0,0,0,.62));line-height:1.2}
.online .tile em{position:absolute;top:5px;right:5px;font-style:normal;font-size:.5rem;font-weight:700;padding:2px 6px;border-radius:999px;background:#fff;color:#0b1120}
.online .tile em.warn{background:#f59e0b;color:#3b2500}
.online .tile em.bad{background:#ef4444;color:#fff}
.online .tile em.ok{background:#4ade80;color:#04331a}
.online .feed{margin-top:12px;border-top:1px solid #e2e8f0;padding-top:11px}
.online .feed-row{display:flex;align-items:center;gap:9px;font-size:.76rem;padding:6px 0;color:#334155;border-bottom:1px solid #f8fafc}
.online .feed-row:last-child{border-bottom:0}
.online .feed-row span:first-child{font-variant-numeric:tabular-nums;color:#64748b;flex:none;font-size:.72rem}
.online .chip{margin-left:auto;flex:none;font-size:.66rem;font-weight:700;padding:2px 8px;border-radius:999px}
.online .chip.w{background:#fef3c7;color:#78350f}
.online .chip.b{background:#fee2e2;color:#7f1d1d}
.online .chip.n{background:#f8fafc;color:#64748b}
.online .panel-note{font-size:.8rem;color:#7c8ba4;margin-top:14px;text-align:center}
.online .panel-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#059669;flex:none}
.online .panel-live i{width:6px;height:6px;border-radius:999px;background:#10b981;display:block}
/* The live page's 8s loop: flags arrive over the first ~2.5s, the board holds, fades, begins
   again. It runs only while the console is on screen (the script adds .live), and the rows wait
   hidden (.armed) until then so they do not flash and vanish. */
.online .panel.armed .feed-row{opacity:0}
@keyframes feedRow1{0%,3%{opacity:0;transform:translateX(-10px)}8%,86%{opacity:1;transform:none}94%,100%{opacity:0;transform:none}}
@keyframes feedRow2{0%,9%{opacity:0;transform:translateX(-10px)}14%,86%{opacity:1;transform:none}94%,100%{opacity:0;transform:none}}
@keyframes feedRow3{0%,15%{opacity:0;transform:translateX(-10px)}20%,86%{opacity:1;transform:none}94%,100%{opacity:0;transform:none}}
@keyframes feedRow4{0%,21%{opacity:0;transform:translateX(-10px)}26%,86%{opacity:1;transform:none}94%,100%{opacity:0;transform:none}}
.online .panel.live .feed-row:nth-child(1){animation:feedRow1 8s linear infinite}
.online .panel.live .feed-row:nth-child(2){animation:feedRow2 8s linear infinite}
.online .panel.live .feed-row:nth-child(3){animation:feedRow3 8s linear infinite}
.online .panel.live .feed-row:nth-child(4){animation:feedRow4 8s linear infinite}
@keyframes chipHit{0%,26%{transform:scale(1)}30%{transform:scale(1.18)}34%,100%{transform:scale(1)}}
@keyframes chipHit2{0%,40%{transform:scale(1)}44%{transform:scale(1.18)}48%,100%{transform:scale(1)}}
@keyframes chipHit3{0%,54%{transform:scale(1)}58%{transform:scale(1.18)}62%,100%{transform:scale(1)}}
.online .panel.live .tile:nth-child(2) em{animation:chipHit 8s linear infinite}
.online .panel.live .tile:nth-child(4) em{animation:chipHit2 8s linear infinite}
.online .panel.live .tile:nth-child(6) em{animation:chipHit3 8s linear infinite}
@keyframes ring{0%,26%{box-shadow:0 0 0 0 rgba(255,255,255,0)}31%{box-shadow:0 0 0 3px rgba(248,113,113,.55)}40%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
@keyframes ring2{0%,40%{box-shadow:0 0 0 0 rgba(255,255,255,0)}45%{box-shadow:0 0 0 3px rgba(248,113,113,.55)}54%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
@keyframes ring3{0%,54%{box-shadow:0 0 0 0 rgba(255,255,255,0)}59%{box-shadow:0 0 0 3px rgba(251,191,36,.55)}68%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.online .panel.live .tile:nth-child(2){animation:ring 8s linear infinite}
.online .panel.live .tile:nth-child(4){animation:ring2 8s linear infinite}
.online .panel.live .tile:nth-child(6){animation:ring3 8s linear infinite}
.online .panel.live .panel-live i{animation:beat 2.2s ease-in-out infinite}
@keyframes beat{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.55);opacity:1}50%{box-shadow:0 0 0 5px rgba(16,185,129,0);opacity:.75}}


.static .ph3d .inked,.static .ph3d .cellred,.static .ph3d .l2,.static .ph3d .q9{opacity:1}
.static .ph3d .l1,.static .ph3d .q8{opacity:0}
.static .ph3d .stamp path{stroke-dashoffset:0}
.static .ph3d{transform:rotateY(-12deg) rotateX(6deg)}


/* landing page sample: three inks. Pupil blue, AI pencil grey, teacher red. */
body.lp{background:var(--ground);color:var(--text)}
.lp a{color:inherit;text-decoration:none}
.lp a.btn-red{color:#fff}
.page .phd{position:absolute;left:84px;top:20px;right:110px;display:flex;justify-content:space-between;font-family:var(--hand);color:var(--ink);font-size:20px}
.rmk{font-family:var(--hand);color:var(--pen);line-height:1.3;transform:rotate(-1deg)}
.lp ::selection{background:#FAD4D0;color:var(--text)}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
.ruled{background-image:repeating-linear-gradient(180deg,transparent 0 39px,rgba(120,150,200,.16) 39px 40px)}
.lp h2{font-family:var(--display);font-weight:800;font-size:48px;line-height:1.05;letter-spacing:-.03em;max-width:20ch}
.lp .sub{font-size:19px;line-height:1.55;color:var(--text-2);max-width:56ch;margin-top:18px}
.sec-pad{padding:112px 0}
.btn-red{display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 26px;border-radius:15px;background:var(--pen);color:#fff;font-weight:700;font-size:17px;white-space:nowrap;box-shadow:0 10px 20px -10px rgba(201,36,27,.65)}
.btn-red i{font-size:19px}
.lnk{font-weight:700;font-size:16.5px;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--pen);text-decoration-thickness:2px}

/* nav */
.top{position:sticky;top:0;z-index:5;background:rgba(243,245,249,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{height:72px;display:flex;align-items:center;gap:40px}
.top .brand svg{width:20px;height:30px}
.top nav{display:flex;gap:30px;font-size:15.5px;font-weight:600;color:var(--text-2)}
.top .r{margin-left:auto;display:flex;align-items:center;gap:22px;font-weight:600;font-size:15.5px}
.top .btn-red{height:46px;font-size:15.5px;padding:0 20px;border-radius:13px}

/* hero */
.hero2{position:relative;overflow:hidden}
.hero2::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 660px);width:2px;background:var(--margin);opacity:.75}
.hero2 .wrap{display:grid;grid-template-columns:minmax(0,1fr) 580px;gap:48px;align-items:center;padding-top:72px;padding-bottom:96px}
.hero2 h1{font-family:var(--display);font-weight:800;font-size:76px;line-height:1;letter-spacing:-.035em}
.hero2 h1 .pc{color:var(--pencil-2)}
.hero2 h1 .pn{color:var(--pen)}
.hero2 .lead{margin-top:26px;font-size:20px;line-height:1.5;color:var(--text-2);max-width:32ch}
.hero2 .acts{display:flex;gap:24px;align-items:center;margin-top:34px;flex-wrap:wrap}
.hero2 .pagebox{position:relative;width:580px;height:600px}
.hero2 .page{margin:0;transform:rotate(1.6deg) scale(.88);transform-origin:top left}
.hero2 .call{transform:scale(.92)}
.hero2 .call{white-space:nowrap}

/* proof ledger */
.ledger{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ledger .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.ledger .lrow{padding:34px 32px 36px;border-left:1px solid var(--line)}
.ledger .lrow:first-child{border-left:0;padding-left:0}
.ledger .lrow b{font-family:var(--display);font-size:34px;font-weight:800;letter-spacing:-.02em;color:var(--text);display:block}
.ledger .lrow p{margin-top:6px;font-size:16px;line-height:1.5;color:var(--text-2);max-width:34ch}
.ledger .lrow b em{font-style:normal;color:var(--pen)}

/* how: three phones */
.how h2{max-width:22ch}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:64px}
.trio figure{display:flex;flex-direction:column;align-items:center}
.trio .ph-holder{width:302px;height:636px;position:relative}
.trio .ph-holder .phone{transform:scale(.735);transform-origin:top left;position:absolute;left:0;top:0}
.trio figcaption{margin-top:26px;max-width:32ch;text-align:center}
.trio figcaption b{display:block;font-size:19px;font-weight:700}
.trio figcaption span{display:block;margin-top:6px;font-size:15.5px;line-height:1.5;color:var(--text-2)}

/* editorial statement */
.state{background:var(--board);color:#fff;position:relative;overflow:hidden}
.state::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0 47px,rgba(255,255,255,.05) 47px 48px)}
.state .wrap{position:relative;padding-top:120px;padding-bottom:120px}
.state blockquote{font-family:var(--display);font-weight:700;font-size:50px;line-height:1.12;letter-spacing:-.025em;max-width:24ch}
.state blockquote .g{color:#AEB5C2}
.state blockquote .r{color:#FF7A6E}
.state .src{margin-top:30px;font-size:16px;color:#C3C9E3;max-width:60ch;line-height:1.55}

/* report card */
.card2 .wrap{display:grid;grid-template-columns:520px minmax(0,1fr);gap:72px;align-items:center}
.a4{background:#fff;border-radius:6px;box-shadow:0 2px 4px rgba(20,26,43,.08),0 30px 60px -26px rgba(20,26,43,.35);padding:30px 32px 28px;transform:rotate(-1.2deg)}
.a4 .hd{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid var(--text);padding-bottom:14px}
.a4 .crest{width:44px;height:44px;border-radius:50%;border:2px dashed var(--rule);display:grid;place-items:center;font-size:9px;font-weight:700;color:var(--text-3);text-align:center;line-height:1.1}
.a4 .hd b{display:block;font-size:17px;font-weight:800}
.a4 .hd span{display:block;font-size:12.5px;color:var(--text-3);margin-top:2px}
.a4 .tot{display:flex;align-items:center;gap:16px;margin:18px 0 6px}
.a4 .tot .n2{font-size:44px}
.a4 .tot p{font-size:13.5px;color:var(--text-2);line-height:1.4}
.bands{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.bands div{border-radius:10px;padding:10px 12px;background:#F6F7FA}
.bands small{display:block;font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--text-3)}
.bands b{display:block;font-size:13.5px;font-weight:700;margin-top:4px}
.bands span{display:block;font-size:12px;color:var(--text-3)}
.bands .nw{background:var(--pen-soft)} .bands .nw small{color:var(--pen-dark)}
.a4 .rmk{text-align:left;font-size:20px;margin-top:16px}
.a4 .sig{display:flex;gap:18px;margin-top:22px;align-items:flex-end}
.a4 .sig div{flex:1;border-top:1px solid #9AA0AC;padding-top:4px;font-size:11px;color:var(--text-3);text-align:center}
.a4 .qr{width:46px;height:46px;flex:none;background:repeating-conic-gradient(var(--text) 0 25%,#fff 0 50%) 0 0/11.5px 11.5px;border:3px solid #fff;outline:1px solid var(--line)}
.ticks{list-style:none;margin-top:28px;display:grid;gap:14px}
.ticks li{display:flex;gap:12px;font-size:17px;line-height:1.45;color:var(--text-2)}
.ticks i{color:var(--pen);font-size:22px;flex:none;margin-top:1px}

/* "Tuned to each of your teachers", closing the AI marking section. */
.tuned{margin-top:56px;display:grid;grid-template-columns:1fr 1.25fr;gap:44px;align-items:start;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:36px 40px}
.tuned h3{font-family:var(--display);font-size:30px;font-weight:800;line-height:1.08;letter-spacing:-.02em;color:var(--text)}
.tuned p{margin-top:12px;font-size:17px;line-height:1.5;color:var(--text-2)}
.tuned .lnk{display:inline-block;margin-top:20px;color:var(--text)}
.tuned .ticks{margin-top:4px}
@media (max-width:760px){.tuned{grid-template-columns:1fr;gap:22px;margin-top:40px;padding:26px 20px;border-radius:20px}.tuned h3{font-size:25px}}

/* bento */
.bento{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto;gap:20px;margin-top:56px}
.bx{border-radius:24px;padding:30px 32px;background:var(--card);border:1px solid var(--line)}
.bx h3{font-size:22px;font-weight:700;letter-spacing:-.01em}
.bx p{font-size:15.5px;color:var(--text-2);line-height:1.5;margin-top:8px;max-width:44ch}
.bx.big{grid-row:span 2;background:#E9EEF8}
.chap{margin-top:22px;display:grid;gap:12px}
.chap div{display:flex;align-items:center;gap:14px;background:#fff;border-radius:16px;padding:12px 16px}
.chap b{font-size:16px;font-weight:700;flex:1}
.chap span{font-size:13px;color:var(--text-3)}
.chap em{font-style:normal;font-weight:800;font-size:18px;min-width:48px;text-align:right}
.kids{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.kids span{font-size:13.5px;font-weight:600;padding:7px 12px;border-radius:999px;background:#F3F5F9;border:1px solid var(--line)}
.kids span.t{background:var(--pen-soft);border-color:transparent;color:var(--pen-dark)}
.bx.mix{background:#FBEDEB;border-color:transparent}
.mixrow{margin-top:18px;display:grid;gap:10px}
.mixrow div{display:grid;grid-template-columns:150px 1fr 1fr;gap:10px;align-items:center;font-size:14px}
.mixrow div b{font-weight:700}
.mixrow .h{font-size:12px;font-weight:800;color:var(--text-3);letter-spacing:.03em}
.mixrow .yp{color:var(--ink);font-weight:800}
.mixrow .cb{color:var(--text-2);font-weight:700}

/* online exams */
.online .wrap{display:grid;grid-template-columns:minmax(0,1fr) 560px;gap:72px;align-items:center}
.grid9{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:16px}
.grid9 .tl{border-radius:14px;background:#1E2436;height:104px;position:relative;overflow:hidden;color:#fff}
.grid9 .tl i.ph{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);font-size:38px;color:#5B6478}
.grid9 .tl span{position:absolute;left:8px;bottom:7px;font-size:11.5px;font-weight:700}
.grid9 .tl em{position:absolute;right:8px;top:7px;font-style:normal;font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:999px;background:rgba(63,182,107,.9)}
.grid9 .tl em.w{background:var(--pen)}
.grid9 .hd2{grid-column:1/-1;display:flex;justify-content:space-between;font-size:13px;font-weight:700;color:var(--text-2);padding:2px 4px 6px}
.feat{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:22px 28px}
.feat div b{display:flex;gap:10px;align-items:center;font-size:17px;font-weight:700}
.feat div b i{color:var(--text);font-size:21px}
.feat div p{margin-top:5px;font-size:15px;line-height:1.5;color:var(--text-2)}

/* trust */
.trust{background:var(--card);border-top:1px solid var(--line)}
.tlist{display:grid;grid-template-columns:1fr 1fr;gap:0 64px;margin-top:48px}
.tlist div{display:flex;gap:16px;padding:22px 0;border-top:1px solid var(--line)}
.tlist i{font-size:26px;color:var(--text);flex:none}
.tlist b{display:block;font-size:18px;font-weight:700}
.tlist p{margin-top:4px;font-size:15.5px;line-height:1.5;color:var(--text-2);max-width:46ch}
.grades{display:flex;gap:16px;margin-top:40px;flex-wrap:wrap}
.grades a{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:16px;border:1px solid var(--line);background:var(--ground)}
.grades a b{font-family:var(--display);font-size:30px;font-weight:800;color:var(--pen)}
.grades a span{font-size:14px;font-weight:600;line-height:1.3}
.grades a span small{display:block;font-weight:500;color:var(--text-3);font-size:12.5px}

/* close */
.close2{position:relative;overflow:hidden}
.close2::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 660px);width:2px;background:var(--margin);opacity:.75}
.close2 .wrap{padding-top:112px;padding-bottom:112px}
.close2 h2{font-size:56px;max-width:18ch}
.close2 .sub{max-width:60ch}
.close2 .acts{display:flex;gap:24px;align-items:center;margin-top:34px;flex-wrap:wrap}
.foot2{border-top:1px solid var(--line);background:var(--card)}
.foot2 .wrap{height:88px;display:flex;align-items:center;gap:28px;font-size:14.5px;color:var(--text-3)}
.foot2 .brand{color:var(--text);font-size:18px}
.foot2 .brand svg{width:16px;height:24px}
.foot2 .r{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px 24px}
.foot2 .soc{display:flex;gap:8px}
.foot2 .soc a{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--text-3);border:1px solid var(--line);background:var(--ground)}
.foot2 .soc a:hover{color:var(--pen)}
.foot2 .soc svg{width:16px;height:16px;fill:currentColor}

/* clients: one school in depth, plus the next one */
.clients{padding-top:0}
.cgrid{display:grid;grid-template-columns:1.65fr 1fr;gap:24px;margin-top:48px;perspective:1400px}
.case{background:var(--card);border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 24px 48px -30px rgba(20,26,43,.35)}
.chd{display:flex;align-items:center;gap:16px;padding:22px 28px;background:#FAFBFD;border-bottom:1px solid var(--line)}
.crest{width:58px;height:58px;border-radius:50%;border:2px dashed var(--rule);display:grid;place-items:center;text-align:center;font-size:8.5px;font-weight:800;line-height:1.2;color:var(--text-3);background:#fff;flex:none}
.chd b{display:block;font-size:22px;font-weight:800;letter-spacing:-.01em}
.chd span{display:block;font-size:14px;color:var(--text-3);margin-top:2px}
.chd .since{margin-left:auto;font-size:13px;font-weight:700;color:var(--text-2);background:#fff;border:1px solid var(--line);padding:6px 12px;border-radius:999px;white-space:nowrap}
.cfacts{display:grid;grid-template-columns:repeat(3,1fr);padding:26px 28px 8px}
.cfacts div{padding-right:16px}
.cfacts em,.cfacts .cls{display:block;font-family:var(--display);font-style:normal;font-weight:800;font-size:40px;letter-spacing:-.02em;color:var(--pen);line-height:1.05}
.cfacts .cls{color:var(--text)}
.cfacts span{display:block;font-size:14.5px;color:var(--text-2);margin-top:6px}
.uses{display:flex;flex-wrap:wrap;gap:8px;padding:16px 28px 0}
.uses span{font-size:13.5px;font-weight:600;padding:7px 12px;border-radius:999px;background:#F3F5F9;border:1px solid var(--line)}
.qslot{display:flex;gap:12px;align-items:flex-start;margin:22px 28px 28px;padding:16px 18px;border:1.5px dashed var(--pencil-2);border-radius:16px;color:var(--pencil)}
.qslot svg{width:18px;height:18px;flex:none;margin-top:3px}
.qslot p{font-size:16px;line-height:1.5;font-style:italic}
.next{background:var(--board);color:#fff;border-radius:24px;padding:30px 30px 32px;display:flex;flex-direction:column;align-items:flex-start;position:relative;overflow:hidden}
.next::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0 39px,rgba(255,255,255,.05) 39px 40px);pointer-events:none}
.ncrest{width:58px;height:58px;border-radius:50%;border:2px dashed rgba(255,255,255,.35);display:grid;place-items:center;font-size:24px;color:#fff;position:relative}
.next b{font-size:26px;font-weight:800;margin-top:22px;letter-spacing:-.01em;position:relative}
.next p{font-size:16.5px;line-height:1.5;color:#C9CFEA;margin-top:10px;max-width:30ch;position:relative}
.next .btn-red{margin-top:auto;position:relative}
.next p{margin-bottom:28px}

/* phone width */
@media (max-width:760px){
  .wrap{padding:0 16px}
  .top nav,.top .r a.si{display:none}
  .top .wrap{gap:12px;height:64px}
  .top .btn-red{height:42px;padding:0 14px;font-size:14.5px}
  .hero2::before,.close2::before{left:8px}
  .hero2 .wrap{grid-template-columns:1fr;padding-top:36px;padding-bottom:56px;gap:28px}
  .hero2 h1{font-size:46px}
  .hero2 .lead{font-size:17.5px;margin-top:18px}
  .hero2 .acts{margin-top:24px;gap:18px}
  .hero2 .pagebox{width:358px;height:370px}
  .hero2 .page{transform:rotate(1.6deg) scale(.54)}
  .hero2 .call{display:none}
  .lp h2,.close2 h2{font-size:34px}
  .lp .sub{font-size:16.5px}
  .sec-pad{padding:64px 0}
  .ledger .wrap{grid-template-columns:1fr}
  .ledger .lrow{border-left:0;border-top:1px solid var(--line);padding:22px 0}
  .ledger .lrow:first-child{border-top:0}
  .trio{grid-template-columns:1fr;gap:44px;margin-top:40px}
  .state .wrap{padding-top:64px;padding-bottom:64px}
  .state blockquote{font-size:31px}
  .card2 .wrap,.online .wrap{grid-template-columns:1fr;gap:40px}
  .a4{padding:22px 20px}
  .bento{grid-template-columns:1fr;margin-top:36px}
  .bx.big{grid-row:auto}
  .bx{padding:24px 20px}
  .chap span{display:none}
  .cgrid{grid-template-columns:1fr;margin-top:32px}
  .chd{flex-wrap:wrap;padding:18px 20px}
  .chd .since{margin-left:0}
  .cfacts{padding:20px 20px 4px}
  .cfacts em{font-size:28px}
  .cfacts .cls{font-size:22px;line-height:1.3}
  .uses{padding:14px 20px 0}
  .qslot{margin:18px 20px 22px}
  .mixrow div{grid-template-columns:110px 1fr 1fr}
  .grid9 .tl{height:84px}
  .feat{grid-template-columns:1fr}
  .tlist{grid-template-columns:1fr}
  .close2 .wrap{padding-top:64px;padding-bottom:64px}
  .foot2 .wrap{height:auto;padding:24px 16px;flex-wrap:wrap}
  .foot2 .r{margin-left:0;flex-wrap:wrap;row-gap:10px}
}
@media (prefers-reduced-motion:no-preference){
  .btn-red{transition:transform 150ms cubic-bezier(.32,.72,0,1)}
  .btn-red:active{transform:scale(.97)}
}

.skip{position:absolute;left:-9999px;top:8px;z-index:20;background:var(--text);color:#fff;padding:10px 14px;border-radius:10px}
.skip:focus{left:16px}
.lp a:focus-visible,.lp summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:8px}
.illus{font-size:13px;color:var(--text-3);margin-top:18px;text-align:center}
.hero3 + .illus{margin:-14px auto 0;padding-bottom:18px;text-align:right}
.crest .ph{font-size:26px;color:var(--text-3)}
/* The school's own crest is an oval, so it gets a wide slot and is never cropped round. */
.crest.logo{width:98px;height:58px;border:0;border-radius:0;background:none}
.crest.logo img{width:100%;height:100%;object-fit:contain;display:block}
.faq{background:var(--card);border-top:1px solid var(--line)}
.qa{margin-top:40px;border-top:1px solid var(--line);max-width:880px}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 4px;font-size:18px;font-weight:700}
.qa summary::-webkit-details-marker{display:none}
.qa summary .ph{font-size:20px;color:var(--pen);flex:none;transition:transform 200ms cubic-bezier(.32,.72,0,1)}
.qa details[open] summary .ph{transform:rotate(45deg)}
.qa p{padding:0 4px 22px;font-size:16.5px;line-height:1.6;color:var(--text-2);max-width:70ch}
@media (max-width:760px){.qa summary{font-size:16.5px;padding:16px 2px}.hero3 + .illus{text-align:center;margin-top:0}}
@media (prefers-reduced-motion:reduce){.qa summary .ph{transition:none}}