/* ========================================================================== TeachIn Academy — design system Theme: white surfaces, navy structure, and one colour per audience. THE CONNECTION SYSTEM Four complete, equal people share one learning network. Each has a colour, and that colour follows them everywhere — the console they sign into, the cards about them on the marketing site, the chips in a table. Somebody who has seen coral once knows the next coral thing is about parents without reading the label. The old brown tokens are kept as aliases below rather than deleted, so nothing that still references them breaks while the change works its way through. ========================================================================== */ :root{ /* surfaces */ --canvas:#F6F7F9; --surface:#FFFFFF; --surface-2:#FAFBFC; --surface-3:#F1F3F6; /* ink — navy, from the wordmark */ --ink:#152B4F; --ink-2:#465873; --ink-3:#7C8AA0; --ink-4:#A3AEBF; /* lines */ --line:#E1E6ED; --line-2:#EDF0F4; /* navy — the structural colour, replacing brown */ --navy:#152B4F; --navy-600:#0F2140; --navy-700:#0A1830; --navy-200:#C3CCDA; --navy-100:#DDE3EC; --navy-50:#F2F5F9; /* ── one colour per audience ───────────────────────────────────────────── */ /* Each audience has TWO steps. The bright one is the brand colour — for fills, dots, rules and large shapes. The -600 is the text step, dark enough for 4.5:1 on white. Teal at #00A99D is 2.93:1 and amber is 2.05:1, so using the brand colour as body text would have been unreadable for anyone with less than perfect sight. */ --parent:#F05D5E; --parent-600:#B44546; /* Magenta, for the TeachIn item in the header — the one navigation item that carries its own colour. #A81E7C is 6.68:1 on white, so it stays legible rather than merely loud. */ --magenta:#A81E7C; --magenta-bg:#FBF0F7; --magenta-line:#EBD0E1; --parent-bg:#FEF0F0; --parent-line:#F9CFCF; --educator:#00A99D; --educator-600:#007E75; --educator-bg:#E6F6F5; --educator-line:#B8E4E0; --learner:#F4A51C; --learner-600:#976611; --learner-bg:#FEF5E4; --learner-line:#F8DFAF; --institution:#4B5DA7; --institution-600:#3C4C8D; --institution-bg:#EEF0F8; --institution-line:#CBD2E8; /* semantic — kept distinct from the audience colours on purpose, so "paid" never reads as "educator" */ --sage:#0E8A6E; --sage-bg:#E4F5F0; --sage-line:#B7E3D6; --rust:#D94849; --rust-bg:#FEF0F0; --rust-line:#F9CFCF; --plum:#4B5DA7; --plum-bg:#EEF0F8; --plum-line:#CBD2E8; /* ── aliases, so existing rules keep working while the change lands ────── */ --brown:var(--navy); --brown-600:var(--navy-600); --brown-700:var(--navy-700); --brown-200:var(--navy-200); --brown-100:var(--navy-100); --brown-50:var(--navy-50); --tan:var(--learner-600); --tan-bg:var(--learner-bg); --tan-line:var(--learner-line); /* radius */ --r-xs:5px; --r-sm:7px; --r:10px; --r-lg:15px; --r-xl:20px; /* elevation */ --sh-1:0 1px 2px rgba(21,43,79,.05), 0 1px 3px rgba(21,43,79,.04); --sh-2:0 2px 4px rgba(21,43,79,.05), 0 10px 22px -10px rgba(21,43,79,.16); --sh-3:0 4px 8px rgba(21,43,79,.06), 0 26px 50px -20px rgba(21,43,79,.28); /* type */ --sans:"Poppins",system-ui,-apple-system,sans-serif; --body:"Poppins",system-ui,-apple-system,sans-serif; /* alias — both names are in use */ /* Poppins throughout, as on kapsdent.com — a geometric sans, heavy for display and regular for text. A stored note said Instrument Serif; the live site says otherwise, and the live site wins. */ --display:"Poppins",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace; --nav-w:252px; } /* ── The audience colour follows the console ────────────────────────────── One data attribute on re-points the accent, so every rule written against --accent themes itself. Nothing needs a per-console stylesheet. */ :root{ --accent:var(--navy); --accent-600:var(--navy-600); --accent-bg:var(--navy-50); --accent-line:var(--navy-200); } [data-audience="parent"]{ --accent:var(--parent); --accent-600:var(--parent-600); --accent-bg:var(--parent-bg); --accent-line:var(--parent-line); } [data-audience="educator"]{ --accent:var(--educator); --accent-600:var(--educator-600); --accent-bg:var(--educator-bg); --accent-line:var(--educator-line); } [data-audience="learner"]{ --accent:var(--learner); --accent-600:var(--learner-600); --accent-bg:var(--learner-bg); --accent-line:var(--learner-line); } [data-audience="institution"]{ --accent:var(--institution); --accent-600:var(--institution-600); --accent-bg:var(--institution-bg); --accent-line:var(--institution-line); } /* The pieces that should take the audience colour rather than the brand colour. */ [data-audience] .side .navlink.on{ background:var(--accent-bg); color:var(--accent-600); box-shadow:inset 2px 0 0 var(--accent) } [data-audience] .side .navlink.on i{ color:var(--accent) } [data-audience] .stat .num{ color:var(--accent-600) } [data-audience] .pill.accent{ background:var(--accent-bg); color:var(--accent-600); border-color:var(--accent-line) } [data-audience] .btn{ background:var(--accent); border-color:var(--accent) } [data-audience] .btn:hover{ background:var(--accent-600); border-color:var(--accent-600) } [data-audience] .btn.ghost{ background:transparent; color:var(--accent-600); border-color:var(--accent-line) } [data-audience] .side{ border-right-color:var(--accent-line) } [data-audience] .topbar b{ color:var(--accent-600) } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{ font-family:var(--sans); background:var(--canvas); color:var(--ink); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow:hidden; } /* Poppins set heavy and tight, as on kapsdent.com. A geometric sans wants negative tracking at display sizes — the letterforms are wide circles and read loose without it. */ h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.03em;line-height:1.1;font-weight:700} button,input,select,textarea{font:inherit;color:inherit} button{cursor:pointer;background:none;border:none} a{color:inherit;text-decoration:none} :focus-visible{outline:2px solid var(--brown);outline-offset:2px;border-radius:4px} @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} ::selection{background:var(--brown-200);color:var(--brown-700)} /* ============ SHELL ============ */ .app{display:grid;grid-template-columns:var(--nav-w) 1fr;height:100vh} .nav{background:var(--brown-700);color:#E4D5C9;display:flex;flex-direction:column;overflow-y:auto} .nav::-webkit-scrollbar{width:6px} .nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:3px} .brand{padding:20px 17px 15px;display:flex;align-items:center;gap:11px} .mark{width:34px;height:34px;flex:none;border-radius:9px;background:#F6F3F1; display:grid;place-items:center;overflow:hidden;padding:3px} .mark img{width:100%;height:100%;object-fit:contain;display:block} .mark.plain{background:transparent;padding:0} .mnav .lg .mark{background:#F6F3F1} .brand b{font-family:var(--display);font-size:15.5px;color:#fff;display:block;letter-spacing:-.02em} .brand span{font-size:11.5px;color:#B49B88} .navgroup{padding:0 12px 3px} .navgroup>p{font-size:11px;color:#A88A74;padding:14px 11px 6px;font-weight:600;letter-spacing:.06em;text-transform:uppercase} .navitem{display:flex;align-items:center;gap:11px;width:100%;padding:8px 11px;border-radius:var(--r-sm); font-size:13.5px;color:#D3C0B2;text-align:left;transition:background .13s,color .13s} .navitem:hover{background:rgba(255,255,255,.09);color:#fff} .navitem.on{background:#F6F3F1;color:var(--brown-700);font-weight:600;box-shadow:var(--sh-1)} .navitem .ic{width:16px;flex:none;font-size:13.5px;text-align:center;opacity:.82} .navitem.on .ic{opacity:1} .navitem .badge{margin-left:auto;font-size:10.5px;font-weight:700;background:var(--tan);color:#fff; border-radius:20px;padding:0 7px;line-height:17px} .navitem.on .badge{background:var(--brown);color:#fff} .navfoot{margin-top:auto;padding:11px 12px 13px;border-top:1px solid rgba(255,255,255,.1)} .navfoot .plan{display:flex;align-items:center;gap:9px;padding:9px 11px;background:rgba(255,255,255,.07); border-radius:var(--r-sm);font-size:12px} .navfoot .plan b{color:#fff;font-weight:600;display:block;font-size:12.5px} .navfoot .plan span{color:#B49B88} .main{display:flex;flex-direction:column;overflow:hidden} /* ============ HEADER ============ */ .hdr{height:60px;flex:none;display:flex;align-items:center;gap:11px;padding:0 14px; background:var(--surface);border-bottom:1px solid var(--line);position:relative;z-index:30} .hbtn{width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center; color:var(--ink-2);font-size:16px;flex:none;position:relative} .hbtn:hover{background:var(--surface-3)} .hbtn.on{background:var(--brown-50);color:var(--brown)} .dot-n{position:absolute;top:3px;right:3px;min-width:16px;height:16px;border-radius:9px;background:var(--rust); color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;padding:0 3px;border:2px solid var(--surface)} .crumbs{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden} .crumbs b{color:var(--ink);font-weight:600} .crumbs .sl{opacity:.4} .hsearch{flex:1;max-width:400px;display:flex;align-items:center;gap:9px;border:1px solid var(--line); border-radius:var(--r);padding:7px 11px;color:var(--ink-3);font-size:13.5px;background:var(--surface-2);text-align:left} .hsearch:hover{border-color:var(--brown-200);background:var(--surface)} .hsearch span:nth-child(2){flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hsearch kbd{font-family:var(--sans);font-size:11px;border:1px solid var(--line);border-radius:4px; padding:1px 6px;background:var(--surface)} .ctx{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:var(--r); padding:5px 10px;background:var(--surface);flex:none;box-shadow:var(--sh-1)} .ctx:hover{border-color:var(--brown-200)} .ctx .sq{width:22px;height:22px;border-radius:6px;background:var(--brown);color:#fff;display:grid; place-items:center;font-size:10px;font-weight:700;flex:none} .ctx .txt{text-align:left;line-height:1.28} .ctx .txt b{display:block;font-size:13px;font-weight:600} .ctx .txt i{font-style:normal;display:block;font-size:11px;color:var(--ink-3)} .ctx .cv{color:var(--ink-3);font-size:10px} .ctx.warn{border-color:var(--tan-line);background:var(--tan-bg)} .ctx.warn .sq{background:var(--tan)} .hdivide{width:1px;height:24px;background:var(--line);flex:none;margin:0 2px} .havatar{width:33px;height:33px;border-radius:50%;background:var(--brown-100);color:var(--brown-700); display:grid;place-items:center;font-size:12px;font-weight:700;flex:none;border:1px solid var(--brown-200)} .havatar:hover{border-color:var(--brown)} .personas{display:flex;gap:2px;background:var(--surface-3);border:1px solid var(--line); border-radius:var(--r);padding:3px;flex:none} .personas button{font-size:12.5px;padding:5px 12px;border-radius:var(--r-xs);color:var(--ink-3);font-weight:500} .personas button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1);font-weight:600} .kid{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:var(--r); padding:4px 10px 4px 5px;background:var(--surface);flex:none;box-shadow:var(--sh-1)} .kid:hover{border-color:var(--brown-200)} .kid .av{width:27px;height:27px;border-radius:50%;background:var(--brown-100);color:var(--brown-700); display:grid;place-items:center;font-size:11px;font-weight:700;flex:none} .kid .txt{text-align:left;line-height:1.28} .kid .txt b{display:block;font-size:13px;font-weight:600} .kid .txt i{font-style:normal;display:block;font-size:11px;color:var(--ink-3)} /* ============ POPOVERS ============ */ .pop{position:absolute;top:56px;background:var(--surface);border:1px solid var(--line); border-radius:var(--r-lg);box-shadow:var(--sh-3);z-index:40;overflow:hidden} .pop[hidden]{display:none} .pop-h{padding:12px 15px 10px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:9px} .pop-h strong{font-family:var(--display);font-size:14px} .pop-h .lnk{margin-left:auto;font-size:12px;color:var(--brown);font-weight:600} .pop-s{padding:7px} .pop-s+.pop-s{border-top:1px solid var(--line-2)} .pop-lbl{font-size:11px;color:var(--ink-3);padding:7px 10px 4px;font-weight:600;letter-spacing:.04em;text-transform:uppercase} .pitem{display:flex;align-items:center;gap:11px;width:100%;padding:8px 10px;border-radius:var(--r-sm); text-align:left;font-size:13.5px} .pitem:hover{background:var(--surface-3)} .pitem .ic{width:17px;text-align:center;color:var(--ink-3);font-size:14px;flex:none} .pitem .sub{display:block;font-size:12px;color:var(--ink-3);font-weight:400} .pitem strong{font-weight:500} .pitem .rt{margin-left:auto;font-size:11.5px;color:var(--ink-3);font-family:var(--mono)} .pitem.sel{background:var(--brown-50)} .pitem.sel .tick{color:var(--brown);font-weight:700;margin-left:auto} .pitem.warn strong{color:var(--tan)} .notif{display:flex;gap:11px;padding:11px 10px;border-radius:var(--r-sm);align-items:flex-start;text-align:left;width:100%} .notif:hover{background:var(--surface-3)} .notif .tag{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:13px;flex:none} .notif .tag.a{background:var(--tan-bg);color:var(--tan)} .notif .tag.r{background:var(--rust-bg);color:var(--rust)} .notif .tag.p{background:var(--brown-100);color:var(--brown)} .notif .b{flex:1;min-width:0} .notif .b strong{display:block;font-size:13px;font-weight:600} .notif .b span{font-size:12px;color:var(--ink-3)} .notif .t{font-size:11px;color:var(--ink-3);flex:none} .userhead{padding:14px 15px;display:flex;gap:11px;align-items:center;border-bottom:1px solid var(--line-2); background:var(--surface-2)} .userhead .av{width:38px;height:38px;border-radius:50%;background:var(--brown);color:#fff; display:grid;place-items:center;font-size:14px;font-weight:700;flex:none} .userhead strong{display:block;font-size:14px;font-weight:600} .userhead span{font-size:12px;color:var(--ink-3)} /* ============ BODY / FOOTER ============ */ .scroll{overflow-y:auto;flex:1;padding:28px 26px 56px} .page{max-width:1240px;margin:0 auto} .statusbar{height:34px;flex:none;display:flex;align-items:center;gap:16px;padding:0 16px; background:var(--surface-2);border-top:1px solid var(--line);font-size:12px;color:var(--ink-3)} .statusbar .s{display:flex;align-items:center;gap:7px} .statusbar .s i{width:7px;height:7px;border-radius:50%;background:var(--sage);display:block} .statusbar .s i.am{background:var(--tan)} .statusbar b{color:var(--ink-2);font-weight:600} .statusbar .push{margin-left:auto;display:flex;gap:16px;align-items:center} .statusbar button:hover{color:var(--brown);text-decoration:underline;text-underline-offset:2px} /* ============ PAGE HEAD / BUTTONS ============ */ .phead{display:flex;align-items:flex-end;gap:20px;margin-bottom:22px;flex-wrap:wrap} .phead h1{font-size:28px} .phead p{color:var(--ink-3);font-size:14px;margin-top:6px;max-width:68ch} .phead .acts{margin-left:auto;display:flex;gap:9px} .btn{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:var(--r); font-size:13.5px;font-weight:600;background:var(--brown);color:#fff;border:1px solid var(--brown); box-shadow:var(--sh-1);transition:background .13s} .btn:hover{background:var(--brown-600)} .btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line)} .btn.ghost:hover{background:var(--surface-2);border-color:var(--brown-200)} .btn.tan{background:var(--tan);border-color:var(--tan)} .btn.tan:hover{background:#84592C} .btn.sm{padding:5px 11px;font-size:12.5px} .btn:disabled{opacity:.5;cursor:not-allowed} /* ============ GRID / CARDS ============ */ .grid{display:grid;gap:15px} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .g5{grid-template-columns:repeat(5,1fr)} .g21{grid-template-columns:1.7fr 1fr;align-items:start} .g12{grid-template-columns:1fr 340px;align-items:start} .mb{margin-bottom:16px} .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); padding:19px;box-shadow:var(--sh-2)} .card h3{font-size:15.5px} .card .sub{font-size:13px;color:var(--ink-3)} .card.pad0{padding:18px 8px 8px} .card.flat{box-shadow:var(--sh-1)} .cardhead{display:flex;align-items:baseline;gap:11px;margin-bottom:15px} .cardhead .link{margin-left:auto;font-size:13px;color:var(--brown);font-weight:600} .stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); padding:16px 17px;box-shadow:var(--sh-2)} .stat .lbl{font-size:12.5px;color:var(--ink-3);font-weight:600;letter-spacing:.02em} .stat .num{font-family:var(--display);font-size:31px;font-weight:700;letter-spacing:-.032em;margin:6px 0 3px} .stat .meta{font-size:12.5px;color:var(--ink-3)} .stat .meta b{font-weight:600;color:var(--ink-2)} .stat.alert{background:var(--rust-bg);border-color:var(--rust-line)} .stat.alert .num,.stat.alert .lbl{color:var(--rust)} .stat.good{background:var(--sage-bg);border-color:var(--sage-line)} .stat.good .num,.stat.good .lbl{color:var(--sage)} .stat.hero{background:linear-gradient(150deg,var(--brown-700),var(--brown) 90%);border-color:var(--brown-700);color:#fff} .stat.hero .lbl{color:#C9B3A2}.stat.hero .num{color:#fff}.stat.hero .meta{color:#C9B3A2} .stat.hero .meta b{color:#fff} .up{color:var(--sage);font-weight:600} .down{color:var(--rust);font-weight:600} /* ============ TABLES ============ */ table{width:100%;border-collapse:collapse} th{text-align:left;font-size:11.5px;font-weight:600;color:var(--ink-3);padding:0 13px 10px; border-bottom:1px solid var(--line);white-space:nowrap;letter-spacing:.03em;text-transform:uppercase} td{padding:12px 13px;border-bottom:1px solid var(--line-2);font-size:13.5px;vertical-align:middle} tbody tr:last-child td{border-bottom:none} tbody tr:hover{background:var(--surface-2)} .who{display:flex;align-items:center;gap:10px} .who .av{width:30px;height:30px;border-radius:50%;background:var(--brown-100);color:var(--brown-700); display:grid;place-items:center;font-size:11.5px;font-weight:700;flex:none} .who strong{display:block;font-weight:600;font-size:13.5px} .who em{font-style:normal;font-size:11.5px;color:var(--ink-3)} .mono{font-family:var(--mono);font-size:12px;color:var(--ink-2)} .rup{font-family:var(--display);font-weight:600;letter-spacing:-.02em} /* ============ PILLS / BARS ============ */ .pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600; padding:3px 9px;border-radius:20px;white-space:nowrap;border:1px solid transparent} .pill.brown{background:var(--brown-100);color:var(--brown-700);border-color:var(--brown-200)} .pill.tan{background:var(--tan-bg);color:var(--tan);border-color:var(--tan-line)} .pill.sage{background:var(--sage-bg);color:var(--sage);border-color:var(--sage-line)} .pill.plum{background:var(--plum-bg);color:var(--plum);border-color:var(--plum-line)} .pill.rust{background:var(--rust-bg);color:var(--rust);border-color:var(--rust-line)} .pill.grey{background:var(--surface-3);color:var(--ink-3);border-color:var(--line)} .pill.solid{background:var(--brown);color:#fff;border-color:var(--brown)} .bar{height:6px;background:var(--surface-3);border-radius:20px;overflow:hidden;min-width:60px;flex:1} .bar i{display:block;height:100%;background:var(--brown);border-radius:20px} .bar.am i{background:var(--tan)} .bar.rt i{background:var(--rust)} .bar.sg i{background:var(--sage)} .barwrap{display:flex;align-items:center;gap:9px} .barwrap span{font-size:12px;color:var(--ink-3);width:36px;text-align:right;font-weight:500} /* ============ ROWS / LISTS ============ */ .rows{display:flex;flex-direction:column} .row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-2)} .row:last-child{border-bottom:none} .row .body{flex:1;min-width:0} .row .body strong{display:block;font-size:13.5px;font-weight:600} .row .body span{font-size:12.5px;color:var(--ink-3)} .tag{width:29px;height:29px;border-radius:var(--r-sm);display:grid;place-items:center;font-size:13px; flex:none;background:var(--surface-3);border:1px solid var(--line)} .tag.brown{background:var(--brown-100);color:var(--brown);border-color:var(--brown-200)} .tag.tan{background:var(--tan-bg);color:var(--tan);border-color:var(--tan-line)} .chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:15px} .chip{font-size:12.5px;border:1px solid var(--line);border-radius:20px;padding:4px 12px; color:var(--ink-2);background:var(--surface);box-shadow:var(--sh-1)} .chip:hover{border-color:var(--brown-200)} .chip.on{background:var(--brown);border-color:var(--brown);color:#fff;font-weight:600} .kv{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--line-2);font-size:13.5px} .kv:last-child{border-bottom:none} .kv span{color:var(--ink-3)} .kv b{font-weight:600;text-align:right} .notice{border-left:4px solid var(--tan);background:var(--tan-bg);padding:13px 16px; border-radius:0 var(--r) var(--r) 0;font-size:13.5px;color:#6E4A15;margin-bottom:16px} .notice b{font-weight:600} .notice.plum{border-color:var(--plum);background:var(--plum-bg);color:var(--plum)} .notice.rust{border-color:var(--rust);background:var(--rust-bg);color:var(--rust)} .notice.sage{border-color:var(--sage);background:var(--sage-bg);color:var(--sage)} .empty{padding:36px 20px;text-align:center;color:var(--ink-3)} .empty h4{font-family:var(--display);font-size:15.5px;color:var(--ink);margin-bottom:5px} .empty p{font-size:13px;max-width:42ch;margin:0 auto 15px} /* ============ CHARTS ============ */ .cols{display:flex;align-items:flex-end;gap:6px;height:140px;padding-top:8px} .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%} .col .b{width:100%;background:var(--brown);border-radius:4px 4px 0 0;min-height:2px} .col .b.t{background:var(--tan)} .col .b.a{background:var(--tan)} .col .b.s{background:var(--sage)} .col .b.g{background:var(--line)} .col .x{font-size:11px;color:var(--ink-3);white-space:nowrap} .legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2)} .legend span{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-3)} .legend i{width:10px;height:10px;border-radius:3px;display:block} .donut{display:flex;align-items:center;gap:20px} .donut svg{flex:none} .dlist{flex:1} .dlist .d{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:13px} .dlist .d i{width:10px;height:10px;border-radius:3px;flex:none} .dlist .d b{margin-left:auto;font-weight:600} /* ============ TIMETABLE ============ */ .timetable{display:grid;grid-template-columns:60px repeat(6,1fr);gap:4px;font-size:11.5px} .tt-h{font-size:11.5px;color:var(--ink-3);font-weight:600;padding:6px 2px;text-align:center;text-transform:uppercase;letter-spacing:.04em} .tt-t{font-size:11px;color:var(--ink-3);padding:9px 3px;text-align:right;font-family:var(--mono)} .tt{background:var(--brown-50);border:1px solid var(--brown-100);border-radius:var(--r-sm); padding:6px 8px;line-height:1.35;min-height:46px} .tt b{display:block;font-weight:600;font-size:11.5px;color:var(--brown-700)} .tt span{font-size:10.5px;color:var(--ink-3)} .tt.b2{background:var(--sage-bg);border-color:var(--sage-line)}.tt.b2 b{color:var(--sage)} .tt.b3{background:var(--plum-bg);border-color:var(--plum-line)}.tt.b3 b{color:var(--plum)} .tt.b4{background:var(--tan-bg);border-color:var(--tan-line)}.tt.b4 b{color:var(--tan)} .tt.free{background:var(--surface-2);border-color:var(--line);border-style:dashed} .tt.free b{color:var(--ink-3);font-weight:500} /* ============ EDGE / GRADING ============ */ .edge{display:flex;flex-direction:column;gap:11px} .edgerow{display:flex;align-items:center;gap:13px} .edgerow .n{font-size:13.5px;width:170px;flex:none} .edgerow .n span{display:block;font-size:11.5px;color:var(--ink-3)} .edgerow .sc{font-family:var(--display);font-size:14px;font-weight:700;width:44px;text-align:right} .egbadge{display:inline-flex;align-items:center;gap:9px;background:linear-gradient(150deg,var(--brown-700),var(--brown)); color:#fff;border-radius:var(--r);padding:9px 15px;box-shadow:var(--sh-2)} .egbadge .lvl{font-family:var(--display);font-size:23px;font-weight:700;letter-spacing:-.03em;line-height:1} .egbadge .txt{line-height:1.25} .egbadge .txt b{display:block;font-size:13px;font-weight:600} .egbadge .txt span{font-size:11.5px;color:#C9B3A2} .scale{display:flex;gap:3px;margin:14px 0 8px} .scale .s{flex:1;height:38px;border-radius:5px;display:grid;place-items:center;font-size:10.5px; font-weight:700;font-family:var(--mono);background:var(--surface-3);color:var(--ink-4);border:1px solid var(--line)} .scale .s.done{background:var(--brown-100);color:var(--brown-700);border-color:var(--brown-200)} .scale .s.now{background:var(--brown);color:#fff;border-color:var(--brown-700);box-shadow:var(--sh-2)} .scale .s.next{background:var(--tan-bg);color:var(--tan);border-color:var(--tan-line);border-style:dashed} /* ============ MODULES ============ */ .modgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .mod{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px; box-shadow:var(--sh-2);display:flex;flex-direction:column;gap:10px;position:relative} .mod.locked{background:var(--surface-2);border-style:dashed} .mod .mh{display:flex;align-items:flex-start;gap:10px} .mod .ico{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:15px;flex:none; background:var(--brown-100);color:var(--brown)} .mod.locked .ico{background:var(--surface-3);color:var(--ink-4)} .mod h4{font-size:14px;font-family:var(--display);line-height:1.25} .mod .code{font-family:var(--mono);font-size:11px;color:var(--ink-3)} .mod p{font-size:12.5px;color:var(--ink-3);line-height:1.5} .mod .mf{display:flex;align-items:center;gap:9px;margin-top:auto;padding-top:11px; border-top:1px solid var(--line-2);font-size:11.5px;color:var(--ink-3);flex-wrap:wrap} .lockmark{position:absolute;top:14px;right:14px;font-size:14px;color:var(--ink-4)} /* ============ MEMORY LOCKER ============ */ .locker{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .doc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; box-shadow:var(--sh-2);display:flex;flex-direction:column} .doc .prev{height:104px;background:linear-gradient(150deg,var(--brown-50),var(--surface-3)); display:grid;place-items:center;font-size:26px;color:var(--brown-200);border-bottom:1px solid var(--line-2);position:relative} .doc .prev .kind{position:absolute;top:9px;left:9px;font-size:10px;font-weight:700;text-transform:uppercase; letter-spacing:.05em;background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:2px 7px;color:var(--ink-3)} .doc .db{padding:13px 14px} .doc .db strong{display:block;font-size:13.5px;font-weight:600;line-height:1.3} .doc .db span{font-size:11.5px;color:var(--ink-3);display:block;margin-top:3px} .doc .da{display:flex;gap:7px;padding:0 14px 13px} /* ============ KIDMETRICS ============ */ .tapcard{background:linear-gradient(150deg,var(--brown-700),var(--brown) 92%);color:#fff; border-radius:var(--r-lg);padding:20px;box-shadow:var(--sh-3)} .tapcard .lbl{font-size:12.5px;color:#C9B3A2;font-weight:600;letter-spacing:.03em} .tapcard .big{font-family:var(--display);font-size:29px;font-weight:700;letter-spacing:-.03em;margin:7px 0 4px} .tapcard .meta{font-size:12.5px;color:#C9B3A2} .tapcard .meta b{color:#fff;font-weight:600} .tapcard .nfc{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.16); display:grid;place-items:center;font-size:17px;margin-bottom:13px} .timeline{position:relative;padding-left:22px} .timeline:before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:var(--line)} .tl{position:relative;padding:10px 0} .tl:before{content:"";position:absolute;left:-21px;top:16px;width:10px;height:10px;border-radius:50%; background:var(--brown);border:2px solid var(--surface)} .tl.am:before{background:var(--tan)} .tl.gr:before{background:var(--line)} .tl.sg:before{background:var(--sage)} .tl strong{display:block;font-size:13.5px;font-weight:600} .tl span{font-size:12.5px;color:var(--ink-3)} /* ============ MISC ============ */ .subjgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .subj{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px; display:flex;flex-direction:column;gap:11px;box-shadow:var(--sh-2)} .subj .top{display:flex;align-items:flex-start;gap:10px} .subj .ico{width:33px;height:33px;border-radius:9px;display:grid;place-items:center;font-size:15px; flex:none;background:var(--brown-50);color:var(--brown)} .subj h4{font-size:14.5px;font-family:var(--display)} .subj .t{font-size:12px;color:var(--ink-3)} .subj .foot{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink-3);margin-top:auto; padding-top:10px;border-top:1px solid var(--line-2)} .due{display:flex;gap:13px;align-items:center;padding:13px 15px;border:1px solid var(--line); border-radius:var(--r);background:var(--surface);margin-bottom:9px;box-shadow:var(--sh-1)} .due .when{width:56px;flex:none;text-align:center;line-height:1.15} .due .when b{display:block;font-family:var(--display);font-size:18px;font-weight:700} .due .when span{font-size:10.5px;color:var(--ink-3)} .due .b{flex:1;min-width:0} .due .b strong{display:block;font-size:13.5px;font-weight:600} .due .b span{font-size:12.5px;color:var(--ink-3)} .due.now{border-color:var(--brown);background:var(--brown-50);box-shadow:var(--sh-2)} .due.late{border-color:var(--rust-line);background:var(--rust-bg)} .due.late .when b{color:var(--rust)} .step{display:flex;gap:13px;padding:14px 0;border-bottom:1px solid var(--line-2)} .step:last-child{border-bottom:none} .step .num{width:25px;height:25px;border-radius:50%;background:var(--brown);color:#fff;font-size:11.5px; font-weight:700;display:grid;place-items:center;flex:none;font-family:var(--mono)} .step .num.wait{background:var(--surface-3);color:var(--ink-3);border:1px solid var(--line)} .step .b{flex:1} .step .b strong{display:block;font-size:13.5px;font-weight:600;margin-bottom:3px} .step .b p{font-size:12.5px;color:var(--ink-3)} .thread{display:flex;gap:11px;padding:13px 0;border-bottom:1px solid var(--line-2)} .thread:last-child{border-bottom:none} .thread .av{width:32px;height:32px;border-radius:50%;background:var(--brown-100);color:var(--brown-700); display:grid;place-items:center;font-size:11.5px;font-weight:700;flex:none} .thread .b{flex:1;min-width:0} .thread .b .m{display:flex;align-items:baseline;gap:9px;margin-bottom:3px} .thread .b strong{font-size:13px;font-weight:600} .thread .b time{font-size:11px;color:var(--ink-3)} .thread .b p{font-size:13.5px;color:var(--ink-2)} .markrow{display:flex;align-items:center;gap:11px;padding:10px 13px;border:1px solid var(--line); border-radius:var(--r);margin-bottom:7px;background:var(--surface);box-shadow:var(--sh-1)} .markrow .av{width:28px;height:28px;border-radius:50%;background:var(--brown-100);color:var(--brown-700); display:grid;place-items:center;font-size:10.5px;font-weight:700;flex:none} .markrow .nm{flex:1;font-size:13.5px;font-weight:500} .markrow .sc{width:68px;border:1px solid var(--line);border-radius:var(--r-sm);padding:4px 8px; font-size:13px;text-align:center;font-family:var(--mono);background:var(--surface-2)} .markrow .ai{font-size:11.5px;color:var(--plum);background:var(--plum-bg);border:1px solid var(--plum-line); border-radius:20px;padding:2px 9px;font-weight:600;white-space:nowrap} .inp{flex:1;border:1px solid var(--line);border-radius:var(--r);padding:9px 13px; background:var(--surface-2);font-size:13.5px} .inp:focus{background:var(--surface);border-color:var(--brown-200)} /* ============ RESPONSIVE ============ */ @media(max-width:1160px){ .g4,.g5{grid-template-columns:repeat(2,1fr)} .g3,.modgrid,.subjgrid{grid-template-columns:repeat(2,1fr)} .g21,.g12{grid-template-columns:1fr} .locker{grid-template-columns:repeat(3,1fr)} } @media(max-width:860px){ .app{grid-template-columns:1fr} .nav{display:none} .hsearch,.personas{display:none} .g2,.g3,.g4,.g5,.modgrid,.subjgrid{grid-template-columns:1fr} .locker{grid-template-columns:repeat(2,1fr)} .scroll{padding:18px 14px 44px} .hbtn{width:40px;height:40px} } /* ========================================================================== PUBLIC SURFACES — sign-in, enquiry, verification ========================================================================== */ body.pub{overflow:auto;background:var(--canvas)} .split{display:grid;grid-template-columns:min(460px,42%) 1fr;min-height:100vh} .panel{background:linear-gradient(165deg,var(--brown-700) 0%,var(--brown) 78%,#7A5B47 100%); color:#E4D5C9;padding:44px 42px;display:flex;flex-direction:column;position:relative;overflow:hidden} .panel:before{content:"";position:absolute;inset:auto -80px -120px auto;width:340px;height:340px; border-radius:50%;background:rgba(255,255,255,.045)} .panel:after{content:"";position:absolute;inset:auto auto -180px -90px;width:300px;height:300px; border-radius:50%;background:rgba(255,255,255,.03)} .panel .pbrand{display:flex;align-items:center;gap:12px;margin-bottom:auto;position:relative;z-index:1} .panel .pbrand .mark{width:38px;height:38px;border-radius:10px;font-size:17px} .panel .pbrand b{font-family:var(--display);font-size:18px;color:#fff;display:block;letter-spacing:-.02em} .panel .pbrand span{font-size:12px;color:#B49B88} .panel .pitch{position:relative;z-index:1;padding:36px 0} .panel .pitch h2{font-size:29px;color:#fff;line-height:1.2;margin-bottom:14px;max-width:15ch} .panel .pitch p{font-size:14.5px;line-height:1.6;max-width:38ch;color:#D3C0B2} .panel .pfoot{position:relative;z-index:1;margin-top:auto;display:flex;gap:8px;flex-wrap:wrap} .panel .pfoot .badge-i{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.22); border-radius:var(--r-sm);padding:4px 10px;font-size:11.5px;color:#D3C0B2} .formside{background:var(--surface);display:flex;flex-direction:column;align-items:center; justify-content:center;padding:44px 32px} .formbox{width:100%;max-width:432px} .formbox h1{font-size:27px;margin-bottom:8px} .formbox .lede{color:var(--ink-3);font-size:14.5px;margin-bottom:26px;max-width:46ch} .field{margin-bottom:15px} .field label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px;color:var(--ink-2)} .field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:var(--r); padding:11px 13px;background:var(--surface-2);font-size:14.5px} .field input:focus,.field select:focus,.field textarea:focus{background:var(--surface);border-color:var(--brown-200);outline:none} .field .hint{font-size:12px;color:var(--ink-3);margin-top:5px} .field.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px} .field.row2 label{grid-column:1/-1} .roletabs{display:flex;gap:4px;background:var(--surface-3);border:1px solid var(--line); border-radius:var(--r);padding:4px;margin-bottom:22px;flex-wrap:wrap} .roletabs button{flex:1;min-width:76px;font-size:12.5px;padding:7px 8px;border-radius:var(--r-xs); color:var(--ink-3);font-weight:500;white-space:nowrap} .roletabs button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1);font-weight:600} .btn.block{width:100%;justify-content:center;padding:12px;font-size:14.5px} .orline{display:flex;align-items:center;gap:14px;margin:20px 0;color:var(--ink-3);font-size:12.5px} .orline:before,.orline:after{content:"";flex:1;height:1px;background:var(--line)} .sso{display:flex;gap:10px} .sso button{flex:1;border:1px solid var(--line);border-radius:var(--r);padding:10px;background:var(--surface); font-size:13px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:8px} .sso button:hover{background:var(--surface-2);border-color:var(--brown-200)} .formfoot{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-2);font-size:13px;color:var(--ink-3)} .formfoot a{color:var(--brown);font-weight:600} .pubfoot{background:var(--brown-700);color:#B49B88;padding:34px 30px 22px;margin-top:0} .pubfoot .fg{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px;padding-bottom:22px; border-bottom:1px solid rgba(255,255,255,.14);max-width:1180px;margin:0 auto} .pubfoot h4{color:#fff;font-size:12.5px;font-weight:600;margin-bottom:10px;font-family:var(--sans)} .pubfoot a{display:block;color:#B49B88;font-size:13px;padding:4px 0} .pubfoot a:hover{color:#fff;text-decoration:underline} .pubfoot .blurb{font-size:12.5px;line-height:1.6;max-width:34ch} .pubfoot .base{display:flex;align-items:center;gap:16px;padding-top:16px;font-size:12px;flex-wrap:wrap; max-width:1180px;margin:0 auto} .pubfoot .base .push{margin-left:auto;display:flex;gap:16px} .verify{max-width:640px;margin:0 auto;padding:56px 24px} .vcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl); box-shadow:var(--sh-3);overflow:hidden} .vhead{padding:28px 30px;background:var(--sage-bg);border-bottom:1px solid var(--sage-line); display:flex;align-items:center;gap:16px} .vhead .tick{width:48px;height:48px;border-radius:50%;background:var(--sage);color:#fff; display:grid;place-items:center;font-size:22px;flex:none} .vhead h2{font-size:20px;color:var(--sage);margin-bottom:3px} .vhead p{font-size:13.5px;color:var(--sage)} .vbody{padding:26px 30px} .vfoot{padding:18px 30px;background:var(--surface-2);border-top:1px solid var(--line-2); font-size:12.5px;color:var(--ink-3)} .pubwrap{max-width:1180px;margin:0 auto;padding:36px 24px 56px} .pubnav{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20} .pubnav .inner{max-width:1180px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:14px} .pubnav .nbrand{display:flex;align-items:center;gap:10px} .pubnav .nbrand .mark{background:var(--brown);color:#fff} .pubnav .nbrand b{font-family:var(--display);font-size:15.5px;letter-spacing:-.02em} .pubnav .ntabs{display:flex;gap:3px;margin-left:auto;background:var(--surface-3);border:1px solid var(--line); border-radius:var(--r);padding:3px} .pubnav .ntabs button{font-size:12.5px;padding:6px 13px;border-radius:var(--r-xs);color:var(--ink-3);font-weight:500} .pubnav .ntabs button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1);font-weight:600} @media(max-width:900px){ .split{grid-template-columns:1fr} .panel{padding:30px 26px;min-height:auto} .panel .pitch{padding:22px 0} .panel .pitch h2{font-size:23px} .pubfoot .fg{grid-template-columns:1fr 1fr} .pubnav .ntabs{display:none} } @media(max-width:560px){.pubfoot .fg{grid-template-columns:1fr}.field.row2{grid-template-columns:1fr}} /* ========================================================================== MARKETING SITE ========================================================================== */ body.site{overflow:auto;background:var(--surface)} .mwrap{max-width:1180px;margin:0 auto;padding:0 26px} .mnav{background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line); position:sticky;top:0;z-index:50} .mnav .in{max-width:1180px;margin:0 auto;padding:0 26px;height:70px;display:flex;align-items:center;gap:16px} .mnav .lg{display:flex;align-items:center;gap:11px} .mnav .lg .mark{background:var(--brown);color:#fff;width:34px;height:34px;font-size:15px} .mnav .lg b{font-family:var(--display);font-size:16.5px;letter-spacing:-.025em} .mnav .links{display:flex;gap:4px;margin-left:26px} .mnav .links button{font-size:14px;padding:8px 14px;border-radius:var(--r);color:var(--ink-2);font-weight:500} .mnav .links button:hover{background:var(--surface-3)} .mnav .links button.on{color:var(--brown);font-weight:600;background:var(--brown-50)} .mnav .cta{margin-left:auto;display:flex;gap:9px;align-items:center} .hero{padding:76px 0 64px;background:linear-gradient(178deg,var(--brown-50) 0%,var(--surface) 62%); border-bottom:1px solid var(--line)} .hero h1{font-size:clamp(34px,5vw,56px);line-height:1.06;letter-spacing:-.03em;max-width:17ch;margin-bottom:22px} .hero h1 em{font-style:normal;color:var(--brown)} .hero .sub{font-size:clamp(16px,2vw,19px);line-height:1.55;color:var(--ink-2);max-width:56ch;margin-bottom:30px} .hero .acts{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px} .hero .fine{font-size:13px;color:var(--ink-3)} .btn.lg{padding:14px 26px;font-size:15.5px;border-radius:var(--r)} .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600; letter-spacing:.06em;text-transform:uppercase;color:var(--brown);background:var(--brown-100); border:1px solid var(--brown-200);border-radius:20px;padding:5px 14px;margin-bottom:22px} .sect{padding:76px 0;border-bottom:1px solid var(--line-2)} .sect.alt{background:var(--canvas)} .sect.dark{background:var(--brown-700);color:#D3C0B2;border-bottom:none} .sect.dark h2,.sect.dark h3{color:#fff} .sect.dark .shead p{color:#C0A896} .shead{max-width:60ch;margin-bottom:40px} .shead h2{font-size:clamp(26px,3.4vw,38px);line-height:1.14;letter-spacing:-.028em;margin-bottom:14px} .shead p{font-size:16.5px;line-height:1.6;color:var(--ink-2)} .tstrip{display:flex;gap:12px;flex-wrap:wrap;padding:22px 0} .tstrip .t{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:var(--r); padding:9px 15px;background:var(--surface);font-size:13.5px;font-weight:500;color:var(--ink-2);box-shadow:var(--sh-1)} .tstrip .t span{font-size:15px} .typeswitch{display:flex;gap:5px;background:var(--surface-3);border:1px solid var(--line); border-radius:var(--r);padding:5px;margin-bottom:28px;flex-wrap:wrap} .typeswitch button{flex:1;min-width:132px;font-size:14px;padding:11px 14px;border-radius:var(--r-sm); color:var(--ink-3);font-weight:500} .typeswitch button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-2);font-weight:600} .fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .fcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px; box-shadow:var(--sh-2);display:flex;flex-direction:column;gap:12px} .fcard .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:20px; background:var(--brown-100);color:var(--brown);border:1px solid var(--brown-200)} .fcard h3{font-size:18px;letter-spacing:-.02em} .fcard p{font-size:14.5px;line-height:1.6;color:var(--ink-2)} .fcard .ls{margin-top:auto;padding-top:14px;border-top:1px solid var(--line-2);font-size:13px;color:var(--ink-3)} .fcard.feat{background:linear-gradient(155deg,var(--brown-700),var(--brown) 92%);border-color:var(--brown-700);color:#fff} .fcard.feat h3{color:#fff}.fcard.feat p{color:#D3C0B2}.fcard.feat .ls{color:#B49B88;border-top-color:rgba(255,255,255,.16)} .fcard.feat .ic{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.2)} .bigrow{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;padding:44px 0; border-bottom:1px solid var(--line-2)} .bigrow:last-child{border-bottom:none} .bigrow.flip>div:first-child{order:2} .bigrow h3{font-size:26px;letter-spacing:-.025em;margin-bottom:14px} .bigrow p{font-size:15.5px;line-height:1.65;color:var(--ink-2);margin-bottom:16px} .bigrow ul{list-style:none;display:flex;flex-direction:column;gap:9px} .bigrow li{display:flex;gap:11px;font-size:14.5px;color:var(--ink-2);align-items:flex-start} .bigrow li:before{content:"✓";color:var(--brown);font-weight:700;flex:none} .shot{background:var(--canvas);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px; box-shadow:var(--sh-3)} .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start} .plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px; box-shadow:var(--sh-2);display:flex;flex-direction:column} .plan.pop{border:2px solid var(--brown);box-shadow:var(--sh-3);position:relative} .plan.pop:before{content:"Most institutions choose this";position:absolute;top:-12px;left:50%; transform:translateX(-50%);background:var(--brown);color:#fff;font-size:11.5px;font-weight:600; padding:4px 14px;border-radius:20px;white-space:nowrap} .plan h3{font-size:20px;margin-bottom:6px} .plan .who{font-size:13.5px;color:var(--ink-3);margin-bottom:20px;min-height:40px} .plan .price{font-family:var(--display);font-size:38px;font-weight:700;letter-spacing:-.035em;line-height:1} .plan .per{font-size:14px;color:var(--ink-3);margin:7px 0 4px} .plan .min{font-size:12.5px;color:var(--ink-3);padding-bottom:20px;border-bottom:1px solid var(--line-2);margin-bottom:20px} .plan ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:24px} .plan li{display:flex;gap:10px;font-size:14px;color:var(--ink-2);align-items:flex-start;line-height:1.5} .plan li:before{content:"✓";color:var(--brown);font-weight:700;flex:none} .plan li.no{color:var(--ink-4)} .plan li.no:before{content:"—";color:var(--ink-4)} .plan .btn{margin-top:auto;width:100%;justify-content:center;padding:12px} .faq{max-width:820px} .fq{border-bottom:1px solid var(--line-2);padding:20px 0} .fq h4{font-size:16.5px;margin-bottom:8px;letter-spacing:-.018em} .fq p{font-size:14.5px;line-height:1.65;color:var(--ink-2)} .quote{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px; box-shadow:var(--sh-2)} .quote p{font-size:16px;line-height:1.6;color:var(--ink);margin-bottom:18px} .quote .by{display:flex;align-items:center;gap:12px} .quote .by .av{width:40px;height:40px;border-radius:50%;background:var(--brown-100);color:var(--brown-700); display:grid;place-items:center;font-weight:700;font-size:14px} .quote .by strong{display:block;font-size:14px} .quote .by span{font-size:12.5px;color:var(--ink-3)} .placeholder{border:2px dashed var(--line);background:var(--surface-2);border-radius:var(--r-lg); padding:26px;text-align:center;color:var(--ink-3)} .placeholder b{display:block;color:var(--ink-2);font-weight:600;margin-bottom:5px;font-size:14px} .placeholder span{font-size:13px} .ctaband{background:linear-gradient(150deg,var(--brown-700),var(--brown) 90%);color:#fff; border-radius:var(--r-xl);padding:52px 46px;text-align:center;box-shadow:var(--sh-3)} .ctaband h2{font-size:clamp(26px,3.4vw,36px);color:#fff;margin-bottom:14px;letter-spacing:-.028em} .ctaband p{font-size:16.5px;color:#D3C0B2;max-width:52ch;margin:0 auto 26px;line-height:1.6} .ctaband .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .ctaband .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.32)} .ctaband .btn.ghost:hover{background:rgba(255,255,255,.1)} .ctaband .fine{font-size:13px;color:#B49B88;margin-top:18px} .numgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .num{text-align:left} .num b{display:block;font-family:var(--display);font-size:40px;font-weight:700;letter-spacing:-.035em;line-height:1} .num span{display:block;font-size:14px;color:var(--ink-3);margin-top:8px} .sect.dark .num b{color:#fff}.sect.dark .num span{color:#B49B88} .trialbox{display:grid;grid-template-columns:1.15fr 1fr;gap:32px;align-items:start} .optcard{border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;background:var(--surface); box-shadow:var(--sh-2);margin-bottom:16px;cursor:pointer} .optcard.on{border:2px solid var(--brown);background:var(--brown-50)} .optcard h4{font-size:17px;margin-bottom:7px} .optcard p{font-size:14px;color:var(--ink-2);line-height:1.6;margin-bottom:12px} .optcard .meta{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-3)} @media(max-width:960px){ .fgrid,.pgrid{grid-template-columns:1fr} .bigrow{grid-template-columns:1fr;gap:26px} .bigrow.flip>div:first-child{order:0} .numgrid{grid-template-columns:repeat(2,1fr)} .trialbox{grid-template-columns:1fr} .mnav .links{display:none} .hero{padding:48px 0 42px} .sect{padding:52px 0} .ctaband{padding:36px 24px} } /* ========================================================================== MARKETING — richer visual layer ========================================================================== */ .hero2{padding:70px 0 78px;background:var(--surface);position:relative;overflow:hidden} .hero2:before{content:"";position:absolute;inset:-200px -300px auto auto;width:760px;height:760px; border-radius:50%;background:radial-gradient(circle,var(--brown-50) 0%,transparent 68%);pointer-events:none} .hero2 .in{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;position:relative;z-index:1} .hero2 h1{font-size:clamp(38px,5.4vw,62px);line-height:1.03;letter-spacing:-.035em;margin-bottom:24px} .hero2 h1 em{font-style:normal;color:var(--brown)} .hero2 .sub{font-size:clamp(16px,1.6vw,19px);line-height:1.6;color:var(--ink-2);max-width:50ch;margin-bottom:32px} .hero2 .acts{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:24px} .hero2 .ticks{display:flex;gap:26px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-3)} .hero2 .ticks b{font-weight:400} .hero2 .ticks span:before{content:"✓ ";color:var(--brown);font-weight:700} .heroart{position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--sh-3); background:linear-gradient(155deg,var(--brown-100),var(--brown-200) 55%,var(--brown) 130%); aspect-ratio:4/5;display:grid;place-items:center} .heroart img{width:100%;height:100%;object-fit:cover;display:block} .heroart .ph{text-align:center;color:var(--brown-700);padding:34px;opacity:.62} .heroart .ph b{display:block;font-family:var(--display);font-size:19px;margin-bottom:7px} .heroart .ph span{font-size:13.5px;line-height:1.5;display:block;max-width:30ch;margin:0 auto} .float{position:absolute;background:var(--surface);border-radius:15px;box-shadow:var(--sh-3); padding:14px 18px;z-index:2} .float.tl{top:34px;left:-30px} .float.br{bottom:34px;right:-30px} .float .lbl{font-size:12px;color:var(--ink-3);margin-bottom:4px} .float .val{font-family:var(--display);font-size:23px;font-weight:700;letter-spacing:-.03em;line-height:1} .float .row{display:flex;align-items:center;gap:11px} .float .dot{width:10px;height:10px;border-radius:50%;background:var(--sage);flex:none} .float .up{font-size:13px;color:var(--sage);font-weight:600;margin-left:auto} .float .av{width:34px;height:34px;border-radius:50%;background:var(--brown-100);color:var(--brown); display:grid;place-items:center;font-size:15px;flex:none} .stripe{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line); border-radius:var(--r-lg);overflow:hidden;background:var(--surface);box-shadow:var(--sh-2)} .stripe div{padding:18px 20px;font-size:13.5px;font-weight:500;color:var(--ink-2);text-align:center; border-right:1px solid var(--line)} .stripe div:last-child{border-right:none} .numcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px; box-shadow:var(--sh-2);position:relative;display:flex;flex-direction:column;min-height:236px} .numcard.dark{background:linear-gradient(155deg,var(--brown-700),var(--brown) 105%);border-color:var(--brown-700)} .numcard.dark h3,.numcard.dark p{color:#fff} .numcard.dark .who{color:#C0A896;border-top-color:rgba(255,255,255,.18)} .numcard .n{position:absolute;top:22px;right:24px;font-family:var(--mono);font-size:12.5px;color:var(--ink-4)} .numcard.dark .n{color:rgba(255,255,255,.4)} .numcard .ic{width:44px;height:44px;border-radius:12px;background:var(--brown-50);color:var(--brown); display:grid;place-items:center;font-size:18px;margin-bottom:18px} .numcard.dark .ic{background:rgba(255,255,255,.14);color:#fff} .numcard h3{font-size:21px;letter-spacing:-.025em;margin-bottom:10px} .numcard p{font-size:14.5px;line-height:1.6;color:var(--ink-2)} .numcard .who{margin-top:auto;padding-top:16px;border-top:1px solid var(--line-2);font-size:13px;color:var(--ink-3)} .phone{width:290px;background:var(--ink);border-radius:38px;padding:11px;box-shadow:var(--sh-3);margin:0 auto;position:relative} .phone .screen{background:var(--surface-2);border-radius:29px;padding:26px 22px 34px;text-align:center} .phone .notch{width:96px;height:20px;background:var(--ink);border-radius:0 0 13px 13px; position:absolute;top:11px;left:50%;transform:translateX(-50%);z-index:2} .phone .brand{font-size:12.5px;color:var(--ink-3);margin:14px 0 22px} .phone .tick{width:56px;height:56px;border-radius:50%;background:var(--sage-bg);color:var(--sage); display:grid;place-items:center;font-size:25px;margin:0 auto 18px} .phone h4{font-size:17px;margin-bottom:14px} .phone .time{font-family:var(--display);font-size:44px;font-weight:700;letter-spacing:-.04em; color:var(--brown);line-height:1;margin-bottom:16px} .phone .where{font-size:13.5px;color:var(--ink-2);line-height:1.5} .idcard{background:linear-gradient(150deg,var(--brown),#8A6A55);color:#fff;border-radius:13px; padding:15px 17px;box-shadow:var(--sh-3);width:210px;position:absolute;right:-58px;bottom:52px; transform:rotate(-7deg)} .idcard .m{width:26px;height:26px;border-radius:7px;background:#F6F3F1;display:grid; place-items:center;margin-bottom:12px;padding:3px;overflow:hidden} .idcard b{display:block;font-size:14px;font-weight:600} .idcard span{font-size:12px;color:#D3C0B2} .docrow{display:flex;gap:16px;align-items:flex-end;justify-content:center} .doccard{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:20px 18px; box-shadow:var(--sh-3);width:172px;text-align:left} .doccard.mid{margin-bottom:34px} .doccard .k{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase; color:var(--ink-3);margin-bottom:26px} .doccard .g{font-size:26px;color:var(--brown-200);margin-bottom:26px;display:block} .doccard b{display:block;font-size:15px;font-weight:600;margin-bottom:4px} .doccard span{font-size:12.5px;color:var(--ink-3)} .oldway{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center} .scatter{position:relative;min-height:380px} .scatter .chip{position:absolute;background:var(--surface);border:1px solid var(--line); border-radius:14px;padding:16px 20px;box-shadow:var(--sh-2);font-weight:600;font-size:15px; display:flex;align-items:center;gap:12px} .scatter .chip i{font-style:normal;color:var(--brown);font-size:17px} .scatter .core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); background:linear-gradient(150deg,var(--brown-700),var(--brown));color:#fff;border-radius:18px; padding:30px 34px;text-align:center;box-shadow:var(--sh-3);z-index:2;width:250px} .scatter .core .m{width:46px;height:46px;border-radius:12px;background:#F6F3F1; display:grid;place-items:center;margin:0 auto 14px;padding:5px;overflow:hidden} .scatter .core b{display:block;font-family:var(--display);font-size:20px;margin-bottom:6px} .scatter .core span{font-size:13px;color:#C0A896} @media(max-width:1000px){ .hero2 .in,.oldway{grid-template-columns:1fr;gap:34px} .heroart{aspect-ratio:16/10} .float.tl{left:12px}.float.br{right:12px} .stripe{grid-template-columns:1fr 1fr} .stripe div:nth-child(2){border-right:none} .idcard{right:-20px} } @media(max-width:620px){ .stripe{grid-template-columns:1fr} .stripe div{border-right:none;border-bottom:1px solid var(--line)} .docrow{flex-direction:column;align-items:center} .doccard{width:100%;max-width:260px;margin-bottom:0} .float{display:none} } /* ---------- image slots with graceful fallback ---------- */ .imgslot{position:relative;border-radius:20px;overflow:hidden;box-shadow:var(--sh-3); background:linear-gradient(150deg,var(--brown-100) 0%,var(--brown-200) 55%,#8A6A55 120%); display:grid;place-items:center} .imgslot img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1} .imgslot .fb{position:absolute;inset:0;display:grid;place-items:center;padding:30px;text-align:center;z-index:0} .imgslot .fb svg{width:100%;height:100%;max-width:420px} .ratio45{aspect-ratio:4/5} .ratio11{aspect-ratio:1/1} .ratio169{aspect-ratio:16/9} .ratio32{aspect-ratio:3/2} /* pricing: distinguish what is live from what is on the roadmap */ .plan li.soon{color:var(--ink-3)} .plan li.soon:before{content:"◷";color:var(--tan)} .plan li.soon em{font-style:normal;font-size:11px;font-weight:600;color:var(--tan); background:var(--tan-bg);border:1px solid var(--tan-line);border-radius:20px;padding:1px 7px;margin-left:6px} .plan .legendline{font-size:12px;color:var(--ink-3);padding-top:12px;margin-top:auto; border-top:1px solid var(--line-2);display:flex;gap:14px;flex-wrap:wrap} .plan .legendline span{display:flex;align-items:center;gap:5px} /* first-run setup checklist */ .setup{background:linear-gradient(150deg,var(--brown-50),var(--surface) 62%); border:1px solid var(--brown-200);border-radius:var(--r-lg);padding:24px 26px; box-shadow:var(--sh-2);margin-bottom:22px} .setup .sh{display:flex;align-items:flex-start;gap:16px;margin-bottom:18px;flex-wrap:wrap} .setup .sh h3{font-size:21px;letter-spacing:-.025em;margin-bottom:5px} .setup .sh p{font-size:14px;color:var(--ink-2);line-height:1.55;max-width:62ch} .setup .prog{margin-left:auto;text-align:right;flex:none} .setup .prog b{font-family:var(--display);font-size:27px;font-weight:700;letter-spacing:-.03em;display:block;line-height:1} .setup .prog span{font-size:12px;color:var(--ink-3)} .setup ol{list-style:none;display:flex;flex-direction:column;gap:9px} .setup li{display:flex;align-items:center;gap:14px;background:var(--surface); border:1px solid var(--line);border-radius:var(--r);padding:13px 16px} .setup li.done{background:var(--sage-bg);border-color:var(--sage-line)} .setup li .n{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center; font-size:12px;font-weight:700;background:var(--brown-100);color:var(--brown-700)} .setup li.done .n{background:var(--sage);color:#fff} .setup li .tx{flex:1;min-width:190px} .setup li .tx b{display:block;font-size:14.5px;font-weight:600;margin-bottom:2px} .setup li .tx span{font-size:12.5px;color:var(--ink-3);line-height:1.5} .setup li.done .tx b{color:var(--sage)} @media(max-width:700px){.setup li{flex-wrap:wrap}.setup .prog{margin-left:0}} /* timetable grid */ .ttwrap{overflow-x:auto;margin:0 -19px -19px;padding:0 19px 19px} table.tt{width:100%;border-collapse:separate;border-spacing:5px;min-width:760px} table.tt th{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:var(--ink-3);padding:4px 0;text-align:center} table.tt th.tm{font-family:var(--mono);font-size:11px;text-transform:none;letter-spacing:0; text-align:right;padding-right:9px;width:52px;white-space:nowrap} table.tt td{background:var(--brown-50);border:1px solid var(--line-2);border-radius:9px; padding:9px 11px;vertical-align:top;min-width:104px} table.tt td b{display:block;font-size:13px;font-weight:600;margin-bottom:2px} table.tt td span{font-size:11.5px;color:var(--ink-3);line-height:1.35} table.tt td.free{background:transparent;border-style:dashed} table.tt td.free span{color:var(--ink-4)} table.tt td.clash{background:var(--rust-bg);border-color:var(--rust)} table.tt td.clash b{color:var(--rust)} /* module video player */ .player{background:var(--ink);border-radius:12px;overflow:hidden;min-height:220px;display:grid;place-items:center} .novid{text-align:center;padding:44px 30px;color:#C0A896} .novid .ic{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff; display:grid;place-items:center;font-size:20px;margin:0 auto 16px} .novid b{display:block;color:#fff;font-family:var(--display);font-size:17px;margin-bottom:7px} .novid span{font-size:13.5px;line-height:1.6;display:block;max-width:46ch;margin:0 auto} /* per-subject progress row */ .subjrow{display:grid;grid-template-columns:1.5fr 1.6fr 74px 110px;gap:16px;align-items:center; padding:13px 0;border-bottom:1px solid var(--line-2)} .subjrow:last-child{border-bottom:none} .subjrow .sname b{display:block;font-size:14.5px;font-weight:600;margin-bottom:2px} .subjrow .sname span{font-size:12px;color:var(--ink-3);line-height:1.4} .subjrow .sdelta{text-align:right;font-size:13.5px;font-weight:600} .subjrow .swork{font-size:12.5px;color:var(--ink-3);text-align:right} .up{color:var(--sage);font-weight:600} .down{color:var(--rust);font-weight:600} @media(max-width:820px){.subjrow{grid-template-columns:1fr;gap:7px} .subjrow .sdelta,.subjrow .swork{text-align:left}} /* result card */ .quizcard{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line); border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh-1)} .quizcard .g{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center; font-family:var(--display);font-weight:700;font-size:15px} .quizcard .g.a{background:var(--sage-bg);color:var(--sage)} .quizcard .g.b{background:var(--brown-50);color:var(--brown)} .quizcard .g.c{background:var(--tan-bg);color:var(--tan)} .quizcard .q{flex:1;min-width:0} .quizcard .q b{display:block;font-size:14px;font-weight:600;margin-bottom:2px} .quizcard .q span{font-size:12.5px;color:var(--ink-3);display:block} .quizcard .q em{font-style:normal;font-size:12px;color:var(--ink-3);display:block;margin-top:4px} /* AI output */ .aiout{font-size:15px;line-height:1.72;color:var(--ink);white-space:normal; background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r);padding:20px 22px} .qa{padding:14px 0;border-bottom:1px solid var(--line-2)} .qa:last-child{border-bottom:none} .qa .q{font-size:14.5px;font-weight:600;margin-bottom:8px} .qa .a{font-size:14px;line-height:1.68;color:var(--ink-2);background:var(--brown-50); border-radius:var(--r);padding:14px 16px;margin-bottom:7px} .qa .w{font-size:11.5px;color:var(--ink-4)} /* ========================================================================== PRICING CONFIGURATOR ========================================================================== */ .cfg{display:grid;grid-template-columns:1fr 372px;gap:26px;align-items:start} .cfgcol{display:flex;flex-direction:column;gap:13px} .opt{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); padding:18px 20px;box-shadow:var(--sh-1);transition:border-color .13s,box-shadow .13s} .opt.on{border-color:var(--brown);box-shadow:0 0 0 1px var(--brown),var(--sh-2)} .opt.soon{opacity:.72;background:var(--surface-2)} .opt .head{display:flex;align-items:flex-start;gap:14px} .opt .ic{width:38px;height:38px;border-radius:10px;flex:none;display:grid;place-items:center; background:var(--brown-50);color:var(--brown);font-size:16px} .opt.on .ic{background:var(--brown);color:#fff} .opt .tx{flex:1;min-width:0} .opt .tx h3{font-size:16px;letter-spacing:-.02em;margin-bottom:3px;display:flex;align-items:center;gap:9px;flex-wrap:wrap} .opt .tx p{font-size:13.5px;color:var(--ink-3);line-height:1.5} .opt .pick{width:22px;height:22px;border-radius:50%;flex:none;border:1.5px solid var(--line); display:grid;place-items:center;color:transparent;font-size:11px;cursor:pointer;background:var(--surface)} .opt.on .pick{background:var(--brown);border-color:var(--brown);color:#fff} .opt .body{margin-top:16px;padding-top:15px;border-top:1px dashed var(--line)} .tierpick{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px} .tierbtn{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:9px 14px; cursor:pointer;text-align:left;min-width:104px;font-family:var(--body)} .tierbtn b{display:block;font-size:13.5px;font-weight:600;color:var(--ink)} .tierbtn span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:1px} .tierbtn.on{background:var(--brown);border-color:var(--brown)} .tierbtn.on b,.tierbtn.on span{color:#fff} .tierbtn.on span{color:#D8C9BE} .tierwhat{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:9px} .tierwhat span{font-size:13px;color:var(--ink-2)} .tierwhat span:before{content:"✓ ";color:var(--sage);font-weight:700} .tiermath{font-size:13.5px;color:var(--ink-2)} .tiermath b{color:var(--ink);font-weight:600} .qty{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap} .qty .lb{font-size:13.5px;color:var(--ink-2)} .qty .lb b{display:block;color:var(--ink);font-weight:600;margin-bottom:1px} .stepper{display:flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:9px;overflow:hidden} .stepper button{width:34px;height:34px;border:none;background:var(--surface);cursor:pointer; font-size:15px;color:var(--ink-2);font-family:var(--body)} .stepper button:hover{background:var(--brown-50)} .stepper input{width:52px;height:34px;border:none;border-left:1px solid var(--line); border-right:1px solid var(--line);text-align:center;font-family:var(--mono);font-size:13.5px; background:var(--surface);color:var(--ink)} .tagi{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; padding:2px 8px;border-radius:20px} .tagi.inc{background:var(--sage-bg);color:var(--sage);border:1px solid var(--sage-line)} .tagi.soon{background:var(--tan-bg);color:var(--tan);border:1px solid var(--tan-line)} /* summary */ .sum{position:sticky;top:20px;background:var(--surface);border:1px solid var(--line); border-radius:var(--r-lg);box-shadow:var(--sh-2);overflow:hidden} .sum .top{padding:22px 22px 18px;border-bottom:1px solid var(--line)} .sum .big{font-family:var(--display);font-size:33px;font-weight:700;letter-spacing:-.035em;line-height:1} .sum .big em{font-style:normal;font-size:14px;font-weight:500;color:var(--ink-3);letter-spacing:0} .sum .sub2{font-size:12.5px;color:var(--ink-3);margin-top:5px} .seg{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;margin:14px 22px 0} .seg button{flex:1;padding:9px;border:none;background:var(--surface);cursor:pointer; font-family:var(--body);font-size:13px;font-weight:600;color:var(--ink-2)} .seg button.on{background:var(--brown);color:#fff} .cad{margin:10px 22px 0;display:flex;flex-direction:column;gap:6px} .cad button{display:flex;justify-content:space-between;align-items:center;padding:10px 13px; border:1px solid var(--line);border-radius:9px;background:var(--surface);cursor:pointer; font-family:var(--body);font-size:13.5px;color:var(--ink)} .cad button.on{border-color:var(--brown);box-shadow:0 0 0 1px var(--brown)} .cad button i{font-style:normal;font-size:12.5px;color:var(--sage);font-weight:600} .cad button.on i{color:var(--brown)} .lines{padding:16px 22px} .lines .l{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:5px 0} .lines .l span{color:var(--ink-2)} .lines .l b{font-weight:500;color:var(--ink);white-space:nowrap} .lines .l.free b{color:var(--sage)} .lines .l.save b{color:var(--sage)} .lines .rule{height:1px;background:var(--line);margin:11px 0} .lines .l.total{font-size:15px;padding-top:4px} .lines .l.total span,.lines .l.total b{font-weight:700;color:var(--ink)} .sum .foot{padding:0 22px 22px} .sum .foot .btn{width:100%;justify-content:center} .sum .foot p{font-size:12px;color:var(--ink-3);text-align:center;margin-top:10px;line-height:1.5} .incbox{background:var(--surface-2);border:1px dashed var(--line);border-radius:var(--r-lg); padding:16px 18px;margin-top:14px} .incbox h4{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--ink-3);margin-bottom:9px} .incbox span{display:block;font-size:13px;color:var(--ink-2);padding:2px 0} .incbox span:before{content:"✓ ";color:var(--sage);font-weight:700} @media(max-width:1000px){.cfg{grid-template-columns:1fr}.sum{position:static}} /* legal pages */ .legal{max-width:74ch;font-size:15.5px;line-height:1.72;color:var(--ink-2)} .legal h3{font-size:19px;color:var(--ink);letter-spacing:-.02em;margin:30px 0 10px} .legal h3:first-child{margin-top:0} .legal p{margin-bottom:14px} .legal b{color:var(--ink);font-weight:600} .legal ul{list-style:none;margin:0 0 16px;display:flex;flex-direction:column;gap:7px} .legal li{padding-left:20px;position:relative} .legal li:before{content:"—";position:absolute;left:0;color:var(--brown-200)} .legalnav{display:flex;gap:9px;flex-wrap:wrap;margin-top:40px;padding-top:22px;border-top:1px solid var(--line)} .legalnav a{font-size:13.5px;padding:7px 14px;border:1px solid var(--line);border-radius:20px;color:var(--ink-2)} .legalnav a.on{background:var(--brown);border-color:var(--brown);color:#fff} /* ========================================================================== MEGA MENU, SOCIAL, FLOATING WIDGETS ========================================================================== */ .mnav .links{position:relative} .hasmenu{position:relative} .hasmenu>button{background:none;border:none;font-family:var(--body);font-size:14.5px;font-weight:500; color:var(--ink-2);cursor:pointer;padding:8px 2px;display:flex;align-items:center;gap:5px} .hasmenu>button:after{content:"⌄";font-size:11px;opacity:.55;transform:translateY(-1px)} .hasmenu:hover>button,.hasmenu.open>button{color:var(--brown)} .mega{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-6px); background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-3); padding:22px;opacity:0;visibility:hidden;transition:opacity .14s,transform .14s,visibility .14s;z-index:60} .hasmenu:hover .mega,.hasmenu.open .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .mega.wide{width:min(760px,92vw)} .mega.narrow{width:min(330px,calc(100vw - 28px));max-width:calc(100vw - 28px)} .megagrid{display:grid;grid-template-columns:1fr 1fr;gap:6px} .mega.narrow .megagrid{grid-template-columns:1fr} .megaitem{display:flex;gap:12px;padding:11px 12px;border-radius:11px;transition:background .12s} .megaitem:hover{background:var(--brown-50)} .megaitem .mi{width:32px;height:32px;border-radius:9px;flex:none;display:grid;place-items:center; background:var(--brown-50);color:var(--brown);font-size:14px} .megaitem:hover .mi{background:var(--brown);color:#fff} .megaitem b{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:2px} .megaitem span{display:block;font-size:12px;color:var(--ink-3);line-height:1.45} .megafoot{margin-top:14px;padding-top:14px;border-top:1px solid var(--line); display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap} .megafoot p{font-size:12.5px;color:var(--ink-3);max-width:44ch;line-height:1.5} /* social */ .social{display:flex;gap:7px} .social a{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);display:grid; place-items:center;color:var(--ink-3);background:var(--surface);transition:all .13s} .social a:hover{border-color:var(--brown);color:var(--brown);background:var(--brown-50)} .social a svg{width:16px;height:16px;fill:currentColor} .msite .social a{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#C0A896} .msite .social a:hover{background:rgba(255,255,255,.16);color:#fff} /* floating widgets */ .floatw{position:fixed;right:20px;bottom:20px;z-index:90;display:flex;flex-direction:column;gap:11px;align-items:flex-end} .fbtn{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;box-shadow:var(--sh-3); border:none;cursor:pointer;transition:transform .14s} .fbtn:hover{transform:translateY(-2px)} .fbtn.wa{background:#25D366;color:#fff} .fbtn.ai{background:var(--brown-700);color:#fff;font-size:19px} .fbtn svg{width:26px;height:26px;fill:currentColor} .chatpane{position:fixed;right:20px;bottom:88px;width:min(384px,calc(100vw - 40px)); max-height:min(560px,calc(100vh - 130px));background:var(--surface);border:1px solid var(--line); border-radius:18px;box-shadow:var(--sh-3);z-index:91;display:none;flex-direction:column;overflow:hidden} .chatpane.open{display:flex} .chatpane .ch{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:11px} .chatpane .ch .m{width:32px;height:32px;border-radius:9px;background:var(--brown-50);overflow:hidden;padding:3px} .chatpane .ch .m img{width:100%;height:100%;object-fit:contain} .chatpane .ch b{font-size:14.5px;display:block} .chatpane .ch span{font-size:11.5px;color:var(--ink-3)} .chatpane .ch button{margin-left:auto;background:none;border:none;font-size:17px;color:var(--ink-3);cursor:pointer} .chatbody{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:11px} .cmsg{max-width:88%;font-size:13.5px;line-height:1.6;padding:11px 14px;border-radius:14px} .cmsg.bot{background:var(--brown-50);color:var(--ink);align-self:flex-start;border-bottom-left-radius:5px} .cmsg.me{background:var(--brown);color:#fff;align-self:flex-end;border-bottom-right-radius:5px} .csug{display:flex;flex-wrap:wrap;gap:6px;padding:0 18px 12px} .csug button{font-size:12px;padding:6px 11px;border:1px solid var(--line);border-radius:20px; background:var(--surface);cursor:pointer;font-family:var(--body);color:var(--ink-2)} .csug button:hover{border-color:var(--brown);color:var(--brown)} .chatform{display:flex;gap:8px;padding:12px 18px;border-top:1px solid var(--line)} .chatform input{flex:1;padding:10px 13px;border:1px solid var(--line);border-radius:10px; font-family:var(--body);font-size:13.5px;background:var(--surface-2)} .chatform button{padding:0 15px;border:none;border-radius:10px;background:var(--brown);color:#fff; cursor:pointer;font-family:var(--body);font-weight:600;font-size:13.5px} @media(max-width:700px){.floatw{right:14px;bottom:14px}.chatpane{right:14px;bottom:80px}} /* seven systems */ .sysgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:14px} .sysgrid.small{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))} .syscard{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); padding:22px;box-shadow:var(--sh-2);position:relative;transition:border-color .14s,transform .14s} .syscard:hover{border-color:var(--brown);transform:translateY(-2px)} .syscard .n{position:absolute;top:18px;right:20px;font-family:var(--mono);font-size:12px;color:var(--ink-4)} .syscard .ic{width:42px;height:42px;border-radius:12px;background:var(--brown-50);color:var(--brown); display:grid;place-items:center;font-size:18px;margin-bottom:15px} .syscard:hover .ic{background:var(--brown);color:#fff} .syscard h3{font-size:18px;letter-spacing:-.025em;margin-bottom:6px} .syscard .was{font-size:12px;color:var(--tan);font-weight:600;margin-bottom:9px} .syscard .ld{font-size:13.5px;line-height:1.55;color:var(--ink-2)} .syscard .go{display:block;margin-top:14px;font-size:13px;font-weight:600;color:var(--brown)} .lbl2{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--ink-3);margin-bottom:7px} /* wall of honour */ .honour{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); padding:24px;box-shadow:var(--sh-2)} .honour b{display:block;font-family:var(--display);font-size:40px;font-weight:700; letter-spacing:-.04em;line-height:1;color:var(--brown)} .honour span{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin:7px 0 9px} .honour p{font-size:13px;line-height:1.55;color:var(--ink-3)} /* embedded demo console */ /* The shell takes the colour of whoever the console belongs to. One attribute switches it. */ .demoshell{background:var(--navy-700);border-radius:20px;padding:12px;box-shadow:var(--sh-3); --shell:var(--navy-700); --shellnav:var(--navy-700); --shellon:var(--navy-700)} .demoshell[data-audience="institution"]{--shell:#1B2A5E;--shellnav:#16224E;--shellon:#16224E} .demoshell[data-audience="educator"]{--shell:#0A3F3A;--shellnav:#083430;--shellon:#083430} .demoshell[data-audience="learner"]{--shell:#4A3208;--shellnav:#3D2906;--shellon:#3D2906} .demoshell[data-audience="parent"]{--shell:#5A1F20;--shellnav:#4B1A1B;--shellon:#4B1A1B} .demoshell{background:var(--shell)} .demoshell .demobar span{color:rgba(255,255,255,.62)} .demobar{display:flex;align-items:center;gap:9px;padding:0 6px 11px} .demobar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.22)} .demobar span{margin-left:8px;font-size:12px;color:#C0A896;font-family:var(--mono)} .demobar .live{margin-left:auto;font-size:11px;color:#fff;background:rgba(255,255,255,.14); padding:3px 10px;border-radius:20px} .demoin{background:var(--surface-2);border-radius:13px;overflow:hidden;display:grid; grid-template-columns:196px 1fr;height:clamp(392px,58vh,560px)} /* A console with twenty-six screens made the panel taller than the screen, leaving an acre of empty white beside a short table. The shell is now a fixed height and the menu scrolls inside it — the same shape whichever console you are looking at. */ .demonav{background:var(--shellnav);padding:14px 10px;display:flex;flex-direction:column;gap:2px; overflow-y:auto;overscroll-behavior:contain} .demonav::-webkit-scrollbar{width:5px} .demonav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px} .demonav::-webkit-scrollbar-track{background:transparent} .demonav p{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:rgba(255,255,255,.4);padding:11px 10px 5px} .demonav button{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;border:none; background:none;color:#C0A896;font-family:var(--body);font-size:13px;cursor:pointer;text-align:left;width:100%} .demonav button:hover{background:rgba(255,255,255,.07);color:#fff} .demonav button.on{background:var(--surface-2);color:var(--shellon);font-weight:600} .demomain{padding:22px 24px;overflow-y:auto} .demomain h4{font-size:19px;letter-spacing:-.025em;margin-bottom:4px} .demomain .dl{font-size:13px;color:var(--ink-3);margin-bottom:16px} .dstat{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:9px;margin-bottom:16px} .dstat div{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:12px 13px} .dstat p{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)} .dstat b{display:block;font-family:var(--display);font-size:21px;font-weight:700;letter-spacing:-.03em;margin-top:4px} .dstat span{font-size:11px;color:var(--ink-3)} .dtable{width:100%;border-collapse:collapse;font-size:13px} .dtable th{text-align:left;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase; color:var(--ink-3);padding:7px 10px;border-bottom:1px solid var(--line)} .dtable td{padding:9px 10px;border-bottom:1px solid var(--line-2)} .dnote{margin-top:14px;font-size:12px;color:var(--ink-3);display:flex;gap:8px;align-items:flex-start} @media(max-width:760px){.demoin{grid-template-columns:1fr}.demonav{flex-direction:row;overflow-x:auto} .demonav p{display:none}.demonav button{white-space:nowrap}} /* specification and panel cards */ .specgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr));gap:12px} .speccard{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); padding:18px;box-shadow:var(--sh-1);transition:border-color .13s,transform .13s} .speccard:hover{border-color:var(--brown);transform:translateY(-2px)} .speccard .ic{width:34px;height:34px;border-radius:9px;background:var(--brown-50);color:var(--brown); display:grid;place-items:center;font-size:15px;margin-bottom:11px} .speccard:hover .ic{background:var(--brown);color:#fff} .speccard h4{font-size:15px;letter-spacing:-.02em;margin-bottom:5px} .speccard p{font-size:12.5px;line-height:1.5;color:var(--ink-3)} .speccard .go{display:block;margin-top:10px;font-size:12px;font-weight:600;color:var(--brown)} .panelgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:15px} .panelgrid.small{grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:10px} .panelcard{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); padding:24px;box-shadow:var(--sh-2);position:relative;transition:border-color .14s,transform .14s} .panelcard:hover{border-color:var(--brown);transform:translateY(-2px)} .panelcard .n{position:absolute;top:19px;right:21px;font-family:var(--mono);font-size:12px;color:var(--ink-4)} .panelcard .ic{width:44px;height:44px;border-radius:12px;background:var(--brown-50);color:var(--brown); display:grid;place-items:center;font-size:19px;margin-bottom:15px} .panelcard:hover .ic{background:var(--brown);color:#fff} .panelcard h3{font-size:18px;letter-spacing:-.025em;margin-bottom:7px} .panelcard p{font-size:13.5px;line-height:1.55;color:var(--ink-2)} .panelcard .stat{display:block;margin-top:13px;padding-top:12px;border-top:1px solid var(--line-2); font-size:12.5px;color:var(--ink-3)} .panelcard .stat b{font-family:var(--display);font-size:16px;font-weight:700;color:var(--brown);margin-right:5px} .panelcard .go{display:block;margin-top:11px;font-size:12.5px;font-weight:600;color:var(--brown)} .panelgrid.small .panelcard{padding:16px} .panelgrid.small .panelcard h3{font-size:14.5px} .panelgrid.small .panelcard .ic{width:34px;height:34px;font-size:15px;margin-bottom:10px} .demonav a{display:block} /* four-column specifications menu */ /* The four-column menu is wider than its trigger, so centring it on the button pushes the first column off-screen. Anchor it to the viewport instead. */ .mega.four{position:fixed;top:74px;left:50%;transform:translateX(-50%) translateY(-6px); width:min(1180px,calc(100vw - 28px));max-height:calc(100vh - 96px);overflow-y:auto} .hasmenu:hover .mega.four,.hasmenu.open .mega.four{transform:translateX(-50%) translateY(0)} .megacols{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .megacol{min-width:0} .colhead{display:flex;gap:10px;padding:9px 10px;border-radius:10px;background:var(--brown-50);margin-bottom:8px} .colhead:hover{background:var(--brown);color:#fff} .colhead .mi{width:28px;height:28px;border-radius:8px;flex:none;display:grid;place-items:center; background:var(--surface);color:var(--brown);font-size:13px} .colhead:hover .mi{background:rgba(255,255,255,.2);color:#fff} .colhead b{display:block;font-size:13px;font-weight:600;color:var(--ink)} .colhead:hover b{color:#fff} .colhead span span{display:block;font-size:11px;color:var(--ink-3)} .colhead:hover span span{color:rgba(255,255,255,.75)} .colg{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--ink-4);padding:9px 10px 3px} .colitem{display:block;padding:5px 10px;border-radius:7px;font-size:12.5px;color:var(--ink-2); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .colitem:hover{background:var(--brown-50);color:var(--brown)} @media(max-width:1180px){.megacols{grid-template-columns:repeat(2,1fr)} .mega.four{width:min(720px,calc(100vw - 28px))}} @media(max-width:700px){.megacols{grid-template-columns:1fr}} /* QR station */ .qrstation{text-align:center;padding:30px 24px} .qrstation .lbl{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--brown);margin-bottom:18px} .qrbox{display:inline-block;background:#fff;padding:14px;border-radius:16px; border:1px solid var(--line);box-shadow:var(--sh-2)} .qrbox svg{display:block;width:280px;height:280px} .qrstation .hint{font-size:14px;color:var(--ink-2);margin-top:18px} .qrstation .countdown{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-top:7px} /* scan result */ .scanres{max-width:460px;margin:60px auto;text-align:center;background:var(--surface); border:1px solid var(--line);border-radius:20px;padding:44px 32px;box-shadow:var(--sh-3)} .scanres .mk{width:72px;height:72px;border-radius:50%;display:grid;place-items:center; font-size:32px;margin:0 auto 20px} .scanres.ok .mk{background:var(--sage-bg);color:var(--sage)} .scanres.no .mk{background:var(--rust-bg);color:var(--rust)} .scanres h1{font-size:26px;letter-spacing:-.03em;margin-bottom:9px} .scanres.no h1{color:var(--rust)} .scanres p{font-size:15px;color:var(--ink-2);line-height:1.6;margin-bottom:6px} .scanres .btn{margin-top:18px} /* printable pass */ .passcard{padding:26px;text-align:center} .passcard .ph{margin-bottom:18px} .passcard .ph b{display:block;font-family:var(--display);font-size:19px;letter-spacing:-.02em} .passcard .ph span{font-size:15px;color:var(--brown);letter-spacing:.06em} .passcard .pb{margin-top:20px;text-align:left} .passcard .pf{margin-top:16px;font-size:12px;color:var(--ink-3);line-height:1.5} @media print{ .nav,.hdr,.statusbar,.acts,.floatw,.chatpane{display:none!important} .passcard{box-shadow:none;border:2px solid #000} .app,.main,.scroll,.page{display:block!important;padding:0!important;background:#fff!important} } /* magazine, criteria, whiteboard */ .magitem{display:flex;gap:14px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line-2)} .magitem:last-child{border-bottom:none} .magitem .b{flex:1;min-width:0} .magitem .b strong{display:block;font-size:14.5px;margin-bottom:2px} .magitem .b span{font-size:12.5px;color:var(--ink-3)} .magitem .b p{font-size:13px;color:var(--ink-2);line-height:1.55;margin-top:6px} .magitem .a{flex:none} .critrow{display:flex;gap:14px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line-2)} .critrow:last-child{border-bottom:none} .critrow .b{flex:1;min-width:0;font-size:14px;line-height:1.5} .critrow .b .sub{margin-left:6px} .critrow .a{display:flex;gap:6px;align-items:center;flex:none;flex-wrap:wrap} .inp.sm{padding:6px 10px;font-size:12.5px;width:170px} .wbtools{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line); background:var(--surface-2);flex-wrap:wrap} .wbtools [data-c]{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer} .wbtools [data-c].on{border-color:var(--ink);box-shadow:0 0 0 2px var(--surface-2) inset} .wbtools .w{padding:6px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface); cursor:pointer;font-family:var(--body);font-size:12.5px;color:var(--ink-2)} .wbtools .w.on{background:var(--brown);border-color:var(--brown);color:#fff} .wbtools .sep{width:1px;height:22px;background:var(--line)} /* ========================================================================== MONTH CALENDAR ========================================================================== */ .calhead{display:flex;align-items:center;gap:11px;margin-bottom:14px;flex-wrap:wrap} .calhead h2{font-size:21px;letter-spacing:-.03em;margin:0 6px} .callegend{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px} .callegend .lg{font-size:11px;padding:3px 10px;border-radius:20px;font-weight:600} .calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} .caldow{background:var(--surface-2);padding:9px 10px;font-size:10.5px;font-weight:700; letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);text-align:center} .calcell{background:var(--surface);min-height:110px;padding:7px 8px;display:flex; flex-direction:column;gap:3px;position:relative} a.calcell:hover{background:var(--brown-50)} .calcell.out{background:var(--surface-2)} .calcell.out .dn{color:var(--ink-4)} .calcell.sun{background:var(--surface-2)} .calcell.today{box-shadow:inset 0 0 0 2px var(--brown)} .calcell .dn{font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:2px} .calcell.today .dn{color:var(--brown);font-weight:700} .ce{display:block;font-size:10.5px;line-height:1.35;padding:2px 6px;border-radius:5px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ce b{font-weight:700;font-family:var(--mono);font-size:9.5px} .calcell .more{font-size:10px;color:var(--ink-3);padding-left:5px} .k-period{background:var(--brown-50);color:var(--brown)} .k-cover{background:#EFE3D2;color:#7A5A2E} .k-holiday{background:var(--sage-bg);color:var(--sage)} .k-exam{background:var(--rust-bg);color:var(--rust)} .k-hw{background:var(--tan-bg);color:var(--tan)} .k-trip{background:#E4EEF6;color:#2F5FA8} .k-club{background:#E9E7F5;color:#5A4B9B} .k-fee{background:var(--rust-bg);color:var(--rust)} .k-lib{background:var(--surface-2);color:var(--ink-2)} .k-meet{background:#E4EEF6;color:#2F5FA8} .k-event{background:var(--brown-50);color:var(--brown)} .k-dl{background:var(--tan-bg);color:var(--tan)} .k-term{background:var(--sage-bg);color:var(--sage)} .dayrow{display:flex;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line-2)} .dayrow:last-child{border-bottom:none} .dayrow .tm{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);width:64px;flex:none} .dayrow .b{flex:1;min-width:0} .dayrow .b strong{display:block;font-size:14.5px} .dayrow .b span{font-size:12.5px;color:var(--ink-3)} @media(max-width:820px){ .calgrid{grid-template-columns:repeat(7,1fr)} .calcell{min-height:70px;padding:4px 4px} .calcell .dn{font-size:11px} .ce{font-size:9px;padding:1px 3px} .ce b{display:none} } /* catch-up */ .catchrow{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line-2)} .catchrow:last-child{border-bottom:none} .catchrow .sl{width:34px;flex:none;font-family:var(--mono);font-size:12px;color:var(--ink-3); padding-top:2px;text-align:center} .catchrow .b{flex:1;min-width:0} .catchrow .b strong{display:block;font-size:15px;margin-bottom:2px} .catchrow .b>span{font-size:12.5px;color:var(--ink-3)} .catchrow .topic{font-size:14.5px;color:var(--ink);margin-top:8px;font-weight:500} .catchrow .notes{font-size:14px;line-height:1.62;color:var(--ink-2);margin-top:5px} .catchrow .hw{font-size:13px;color:var(--tan);margin-top:6px;font-weight:600} .catchrow .pending{font-size:13.5px;color:var(--ink-3);margin-top:7px;font-style:italic} .catchrow .res{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px} /* ========================================================================== HOOT — the mascot ========================================================================== */ /* He roams the whole viewport, so the wrapper must never intercept a click meant for the page underneath. Only the owl itself is clickable. */ .hoot{position:fixed;top:70%;left:20%;bottom:auto;z-index:91;pointer-events:none; transition:left 1.2s cubic-bezier(.34,.6,.4,1), top 1.2s cubic-bezier(.34,.6,.4,1), opacity .3s} .hoot .hootbtn{pointer-events:auto} .hoot.perch{left:auto!important;right:96px;top:auto!important;bottom:22px;transition:none} .hoot.flip .owl{transform:scaleX(-1)} .hootbtn{background:none;border:none;padding:0;cursor:pointer;display:block; filter:drop-shadow(0 6px 14px rgba(65,45,34,.28))} .hootbtn:focus-visible{outline:2px solid var(--brown);outline-offset:6px;border-radius:50%} .owl{width:56px;height:56px;display:block;transition:transform .3s} .owl .torso{fill:#8A6A55} .owl .belly{fill:#E8DACE} .owl .wing{fill:#6B4E3D} .owl .tuft{fill:#6B4E3D} .owl .eyewhite{fill:#FBF7F4} .owl .pupil{fill:#412D22} .owl .glint{fill:#fff} .owl .beak{fill:#C77E33} .owl .feet path{stroke:#C77E33;stroke-width:2.6;stroke-linecap:round;fill:none} .owl .shadow{fill:rgba(65,45,34,.16)} .owl .lids rect{fill:#8A6A55;transform:translateY(-20px);transition:transform .09s} .owl .zzz{opacity:0;transition:opacity .4s} .owl .zzz text{fill:var(--brown);font-family:var(--display);font-weight:700;font-size:9px} /* breathing — the thing that stops it looking like a sticker */ .hoot .body{transform-origin:32px 56px;animation:hoot-breathe 3.4s ease-in-out infinite} @keyframes hoot-breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.975) translateY(1px)}} .hoot.blink .owl .lids rect{transform:translateY(0)} .hoot.walking .body{animation:hoot-walk .42s ease-in-out infinite} @keyframes hoot-walk{ 0%,100%{transform:translateY(0) rotate(0)} 25%{transform:translateY(-3px) rotate(-4deg)} 75%{transform:translateY(-3px) rotate(4deg)}} .hoot.hop .body{animation:hoot-hop .9s cubic-bezier(.3,1.4,.5,1)} @keyframes hoot-hop{0%,100%{transform:translateY(0)}35%{transform:translateY(-22px)}60%{transform:translateY(0) scaleY(.9)}} .hoot.spin .owl{animation:hoot-spin .9s ease-in-out} @keyframes hoot-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}} .hoot.flap .wing{animation:hoot-flap .18s ease-in-out 5 alternate;transform-origin:32px 34px} @keyframes hoot-flap{from{transform:rotate(0)}to{transform:rotate(-26deg)}} .hoot.peek .body{animation:hoot-peek .9s ease-in-out} @keyframes hoot-peek{0%,100%{transform:translateY(0)}40%{transform:translateY(16px)}} .hoot.sleeping .owl .lids rect{transform:translateY(0)} .hoot.sleeping .owl .zzz{opacity:1;animation:hoot-z 2.6s ease-in-out infinite} .hoot.sleeping .body{animation:hoot-snore 3.6s ease-in-out infinite} @keyframes hoot-snore{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.94) translateY(3px)}} @keyframes hoot-z{0%{opacity:0;transform:translateY(4px)}40%{opacity:1}100%{opacity:0;transform:translateY(-8px)}} .hoot.active .owl{transform:scale(1.08)} .hoot.active.flip .owl{transform:scaleX(-1) scale(1.08)} /* the panel */ .hootpane{position:fixed;right:20px;bottom:88px;width:min(340px,calc(100vw - 40px)); background:var(--surface);border:1px solid var(--line);border-radius:18px; box-shadow:var(--sh-3);z-index:92;display:flex;flex-direction:column;overflow:hidden; max-height:min(560px,calc(100vh - 130px))} .hootpane[hidden]{display:none} .hootpane .hh{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--line)} .hootpane .hm{width:38px;height:38px;flex:none} .hootpane .hm .owl{width:38px;height:38px} .hootpane .hh b{display:block;font-size:14.5px} .hootpane .hh span span,.hootpane .hh>div span{font-size:12px;color:var(--ink-3);display:block} .hootpane .hh button{margin-left:auto;background:none;border:none;font-size:16px;color:var(--ink-3);cursor:pointer} .hootbody{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:9px} .hootacts{display:flex;flex-direction:column;gap:7px} .hootact{display:flex;justify-content:space-between;align-items:center;gap:9px; text-align:left;padding:10px 13px;border:1px solid var(--line);border-radius:11px; background:var(--surface);cursor:pointer;font-family:var(--body);font-size:13.5px; color:var(--ink);width:100%} .hootact:hover{border-color:var(--brown);background:var(--brown-50);color:var(--brown)} .hootact span{color:var(--ink-4);font-size:12px} .hmsg{max-width:88%;font-size:13.5px;line-height:1.6;padding:10px 13px;border-radius:14px} .hmsg.bot{background:var(--brown-50);color:var(--ink);align-self:flex-start;border-bottom-left-radius:5px} .hmsg.me{background:var(--brown);color:#fff;align-self:flex-end;border-bottom-right-radius:5px} .hootform{display:flex;gap:8px;padding:11px 16px;border-top:1px solid var(--line)} .hootform input{flex:1;padding:9px 12px;border:1px solid var(--line);border-radius:10px; font-family:var(--body);font-size:13.5px;background:var(--surface-2)} .hootform button{width:38px;border:none;border-radius:10px;background:var(--brown);color:#fff; cursor:pointer;font-size:15px} .hoothide{background:none;border:none;border-top:1px solid var(--line);padding:9px; font-family:var(--body);font-size:11.5px;color:var(--ink-4);cursor:pointer} .hoothide:hover{color:var(--rust)} /* fast travel — leans into the direction and stretches slightly */ .hoot.glide .body{animation:hoot-glide .5s ease-in-out infinite} @keyframes hoot-glide{ 0%,100%{transform:rotate(-12deg) scaleX(1.04)} 50%{transform:rotate(-16deg) scaleX(1.08) translateY(-3px)}} .hoot.glide .wing{animation:hoot-flap .12s ease-in-out infinite alternate;transform-origin:32px 34px} /* a full tumble, used sparingly */ .hoot.tumble .owl{animation:hoot-tumble 1.2s cubic-bezier(.4,0,.5,1)} @keyframes hoot-tumble{ 0%{transform:rotate(0) translateY(0)} 30%{transform:rotate(180deg) translateY(-26px)} 60%{transform:rotate(360deg) translateY(-10px)} 100%{transform:rotate(360deg) translateY(0)}} /* eyes dart about while the body stays put */ .hoot .pupil,.hoot .glint{transition:transform .22s cubic-bezier(.3,1.3,.5,1)} .hoot.looking .pupil,.hoot.looking .glint{ transform:translate(calc(var(--px,0) * 1px), calc(var(--py,0) * 1px))} /* peering round the edge of the page — most of him is off-screen */ .hoot.edge-l{transform:translateX(-58%)} .hoot.edge-r{transform:translateX(58%)} .hoot.edge-l .owl,.hoot.edge-r .owl{filter:drop-shadow(0 4px 10px rgba(65,45,34,.3))} /* woken suddenly */ .hoot.startled .body{animation:hoot-startle .7s cubic-bezier(.3,1.5,.5,1)} @keyframes hoot-startle{ 0%{transform:scale(1)} 25%{transform:scale(1.16) translateY(-10px)} 55%{transform:scale(.96) translateY(0)} 100%{transform:scale(1)}} .hoot.startled .eyewhite{animation:hoot-wide .7s ease-out} @keyframes hoot-wide{0%{r:9}30%{r:11}100%{r:9}} /* Motion sensitivity is a condition, not a preference. Nothing moves, nothing wanders, and the owl simply waits where it is. */ @media(prefers-reduced-motion: reduce){ .hoot{transition:none!important;left:auto!important;right:96px;top:auto!important;bottom:22px; transform:none!important} .hoot .body,.hoot .owl,.hoot .wing,.hoot .zzz{animation:none!important;transform:none!important} .hoot.sleeping .owl .lids rect{transform:translateY(-20px)} } @media(max-width:700px){ /* He still roams on a phone, just smaller and never into the bottom-right corner where the WhatsApp button lives — the script keeps him out of that box. */ .owl{width:44px;height:44px} .hoot.perch{left:auto!important;top:auto!important;right:20px;bottom:150px} .hootpane{right:14px;bottom:150px} .owl{width:46px;height:46px} } /* JoJo flying — wings out, leaning into it */ .hoot.flying .body{animation:jojo-fly .34s ease-in-out infinite} @keyframes jojo-fly{ 0%,100%{transform:rotate(-14deg) translateY(0)} 50%{transform:rotate(-18deg) translateY(-7px)}} .hoot.flying .wing{animation:jojo-wings .16s ease-in-out infinite alternate;transform-origin:32px 32px} @keyframes jojo-wings{ from{transform:rotate(-8deg) scaleY(1)} to{transform:rotate(-42deg) scaleY(1.25)}} /* what he says while wandering */ .quip{position:absolute;bottom:100%;left:50%;transform:translate(-50%,-8px); background:var(--surface);border:1px solid var(--line);border-radius:14px; padding:8px 13px;font-size:12.5px;line-height:1.4;color:var(--ink);white-space:nowrap; box-shadow:var(--sh-2);pointer-events:none;animation:quip-in .3s cubic-bezier(.3,1.4,.5,1)} .quip:after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%); border:6px solid transparent;border-top-color:var(--surface)} .quip.right{left:auto;right:0;transform:translate(0,-8px)} .quip.right:after{left:auto;right:18px;transform:none} .quip[hidden]{display:none} @keyframes quip-in{from{opacity:0;transform:translate(-50%,2px) scale(.92)}} /* lead capture */ .leadform{display:flex;flex-direction:column;gap:8px} .leadform[hidden]{display:none} .leadform .lf{font-size:13.5px;line-height:1.55;color:var(--ink-2);margin-bottom:2px} .leadform input{padding:10px 13px;border:1px solid var(--line);border-radius:10px; font-family:var(--body);font-size:13.5px;background:var(--surface-2)} .leadform input:focus{outline:none;border-color:var(--brown);background:var(--surface)} .lfrow{display:flex;gap:8px;margin-top:3px} .lfnote{font-size:11.5px;color:var(--ink-4);line-height:1.5;margin-top:4px} .hootact.lead{border-color:var(--brown-200);background:var(--brown-50);color:var(--brown);font-weight:600} .hootacts[hidden]{display:none} /* back to the menu, and the wrap-up */ .backmenu{align-self:flex-start;background:none;border:none;padding:2px 0 6px;cursor:pointer; font-family:var(--body);font-size:12.5px;color:var(--brown);font-weight:600} .backmenu:hover{text-decoration:underline} .backmenu[hidden]{display:none} .wrapup{background:var(--brown-50);border:1px solid var(--brown-200);border-radius:14px; padding:13px 15px;margin-top:4px} .wrapup p{font-size:13.5px;color:var(--ink);margin-bottom:9px;line-height:1.5} .wrapup div{display:flex;gap:7px;flex-wrap:wrap} .wrapup button{padding:7px 12px;border:1px solid var(--brown);border-radius:9px; background:var(--brown);color:#fff;cursor:pointer;font-family:var(--body);font-size:12.5px} .wrapup button.g{background:var(--surface);color:var(--ink-2);border-color:var(--line)} .wrapup button.g:hover{border-color:var(--ink-3)} /* ========================================================================== PILE MESSENGER — a phone-first surface, separate from the consoles ========================================================================== */ body.pile{background:var(--surface-2);margin:0;font-family:var(--body);color:var(--ink)} .pwrap{min-height:100vh;display:grid;place-items:center;padding:24px} .pcard{background:var(--surface);border:1px solid var(--line);border-radius:20px; padding:30px 26px;width:min(400px,100%);box-shadow:var(--sh-3)} .plogo{display:flex;align-items:center;gap:9px;margin-bottom:20px} .plogo img{width:32px;height:32px;object-fit:contain} .plogo b{font-family:var(--display);font-size:19px;letter-spacing:-.02em} .plogo.sm img{width:24px;height:24px}.plogo.sm b{font-size:15px} .pcard h1{font-family:var(--display);font-size:24px;letter-spacing:-.03em;margin-bottom:8px;line-height:1.15} .psub{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin-bottom:20px} .pcard label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin:12px 0 5px} .pcard input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:11px; font-family:var(--body);font-size:15px;background:var(--surface-2);box-sizing:border-box} .pcard input:focus{outline:none;border-color:var(--brown);background:var(--surface)} .pcard input.pbig{font-family:var(--mono);font-size:24px;letter-spacing:.24em;text-align:center} .pcard .btn{margin-top:18px} .pnote{font-size:12px;line-height:1.6;color:var(--ink-3);margin-top:16px} .perr{font-size:13px;color:var(--rust);margin-top:12px;line-height:1.5} .pnotice{background:var(--tan-bg);border:1px solid var(--tan-line);border-radius:12px; padding:13px 15px;font-size:13px;line-height:1.6;color:var(--ink-2);margin-bottom:6px} .pcode{font-family:var(--mono);font-size:19px;font-weight:600;color:var(--brown); letter-spacing:.16em;display:inline-block;margin:0 2px} .papp{max-width:560px;margin:0 auto;min-height:100vh;background:var(--surface); display:flex;flex-direction:column} .phead{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line); position:sticky;top:0;background:var(--surface);z-index:5} .pback{font-size:20px;color:var(--ink-2);text-decoration:none;line-height:1} .pwho{flex:1;font-size:13.5px;color:var(--ink-2);min-width:0} .pwho b{display:block;font-size:15px;color:var(--ink);font-family:var(--display);letter-spacing:-.02em} .pwho span{font-size:12px;color:var(--ink-3)} .plink{background:none;border:none;font-family:var(--body);font-size:13px;color:var(--ink-3);cursor:pointer} .pbody{padding:18px;flex:1} .pbody h2{font-family:var(--display);font-size:15px;letter-spacing:.02em;text-transform:uppercase; color:var(--ink-3);margin-bottom:11px;display:flex;align-items:center;gap:8px} .prow{display:flex;align-items:center;gap:13px;padding:13px 12px;border-radius:14px; text-decoration:none;color:inherit} .prow:hover{background:var(--surface-2)} .pav{width:42px;height:42px;border-radius:13px;flex:none;display:grid;place-items:center; font-size:17px;background:var(--brown-50);color:var(--brown)} .pav.notices{background:var(--brown-700);color:#fff} .pav.guardian{background:var(--sage-bg);color:var(--sage)} .pav.office{background:var(--tan-bg);color:var(--tan)} .pmain{flex:1;min-width:0} .pmain b{display:block;font-size:15px;margin-bottom:2px} .pmain span{display:block;font-size:13px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pdot{background:var(--brown);color:#fff;font-size:11.5px;font-weight:700;min-width:20px;height:20px; border-radius:10px;display:grid;place-items:center;padding:0 6px} .pempty{padding:34px 12px;text-align:center;color:var(--ink-3);font-size:14px} .pthread{flex:1;padding:18px;display:flex;flex-direction:column;gap:11px;overflow-y:auto} .pmsg{max-width:82%;padding:11px 14px;border-radius:16px;font-size:14.5px;line-height:1.55;position:relative} .pmsg.them{background:var(--surface-2);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:6px} .pmsg.me{background:var(--brown);color:#fff;align-self:flex-end;border-bottom-right-radius:6px} .pmsg.sys{background:var(--brown-50);border:1px solid var(--brown-200);align-self:stretch;max-width:100%} .pfrom{display:block;font-size:12px;color:var(--ink-3);margin-bottom:3px;font-weight:600} .pwhen{display:block;font-size:10.5px;opacity:.6;margin-top:5px;font-family:var(--mono)} .pact{display:inline-block;margin-top:9px;padding:8px 14px;border-radius:10px;font-size:13.5px; font-weight:600;text-decoration:none;background:var(--brown);color:#fff} .pact.pay{background:var(--sage)} .pact.consent{background:var(--rust)} .pact.open,.pact.submit{background:var(--brown)} .pcompose{display:flex;gap:9px;padding:12px 16px;border-top:1px solid var(--line); position:sticky;bottom:0;background:var(--surface)} .pcompose input{flex:1;padding:11px 14px;border:1px solid var(--line);border-radius:22px; font-family:var(--body);font-size:15px;background:var(--surface-2)} .pcompose button{width:44px;border:none;border-radius:50%;background:var(--brown);color:#fff; font-size:17px;cursor:pointer} .pread{padding:14px 18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-3); text-align:center;line-height:1.5} .pask form{display:flex;gap:9px} .pask input{flex:1;padding:12px 15px;border:1px solid var(--line);border-radius:22px; font-family:var(--body);font-size:14.5px;background:var(--surface-2)} .pask button{width:44px;border:none;border-radius:50%;background:var(--brown);color:#fff; font-size:17px;cursor:pointer} .pquick{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px} .pquick a{font-size:12.5px;padding:7px 13px;border:1px solid var(--line);border-radius:20px; color:var(--ink-2);text-decoration:none;background:var(--surface)} .pquick a:hover{border-color:var(--brown);color:var(--brown)} .pans{background:var(--brown-50);border:1px solid var(--brown-200);border-radius:14px; padding:16px 18px;margin-top:16px;font-size:14.5px;line-height:1.65} /* Pile: tools, marks, settings, scanner */ .ptools{display:flex;gap:8px;margin-bottom:18px} .ptools a{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:13px 6px; border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--ink-2); font-size:12px;background:var(--surface)} .ptools a span{font-size:19px;color:var(--brown)} .ptools a:hover{border-color:var(--brown);color:var(--brown)} .pmact{display:flex;gap:5px;align-items:center;margin-top:7px;opacity:.55} .pmsg:hover .pmact{opacity:1} .pmact form{display:inline} .pmact button{background:none;border:none;cursor:pointer;font-size:14px;color:inherit;padding:2px 4px} .pmact button.on{color:#E0A500} .pmact details{display:inline} .pmact summary{cursor:pointer;list-style:none;font-size:13px;padding:2px 4px} .pmact summary::-webkit-details-marker{display:none} .pmact details form{display:flex;gap:6px;margin-top:7px} .pmact details input{flex:1;padding:7px 10px;border:1px solid var(--line);border-radius:9px; font-family:var(--body);font-size:12.5px;background:var(--surface)} .pmact details button{background:var(--brown);color:#fff;border-radius:8px;padding:6px 11px;font-size:12px} .pnoted{background:rgba(0,0,0,.05);border-radius:9px;padding:8px 11px;margin-top:8px;font-size:12.5px;line-height:1.5} .pnoted b{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;opacity:.6;margin-bottom:3px} .pstar{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:10px} .psrc{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);display:block;margin-bottom:6px} .pstar p{font-size:14.5px;line-height:1.55;margin-bottom:8px} .plinky{font-size:12.5px;color:var(--brown);font-weight:600;background:none;border:none;cursor:pointer; text-decoration:none;font-family:var(--body)} .pset label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin:14px 0 5px} .pset select,.pset input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:11px; font-family:var(--body);font-size:14.5px;background:var(--surface-2);box-sizing:border-box} .pcheck{display:flex!important;align-items:flex-start;gap:10px;font-weight:400!important;margin:13px 0!important} .pcheck input{width:auto!important;margin-top:2px} .pcheck span{font-size:14px;line-height:1.5;color:var(--ink)} .prow2{display:flex;gap:9px} .pdev{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0; border-bottom:1px solid var(--line-2)} .pdev b{display:block;font-size:14px}.pdev span{font-size:12px;color:var(--ink-3)} .pscan{flex:1;display:flex;flex-direction:column} .pcam{position:relative;background:#000;aspect-ratio:3/4;overflow:hidden} .pcam video{width:100%;height:100%;object-fit:cover} .pcam canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0; border:3px solid transparent;box-sizing:border-box;pointer-events:none;transition:.2s} .pcam canvas.found{opacity:1;border-color:#22D3A6;box-shadow:inset 0 0 0 9999px rgba(34,211,166,.07)} .phint{position:absolute;left:0;right:0;bottom:14px;text-align:center;color:#fff;font-size:13px; text-shadow:0 1px 4px rgba(0,0,0,.6)} .pcamctl{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;gap:12px} .pchip{padding:8px 14px;border:1px solid var(--line);border-radius:20px;background:var(--surface); font-family:var(--body);font-size:12.5px;cursor:pointer;color:var(--ink-2)} .pchip.on{background:var(--brown);border-color:var(--brown);color:#fff} .pshutter{width:62px;height:62px;border-radius:50%;border:4px solid var(--brown); background:var(--surface);cursor:pointer} .pshutter:active{background:var(--brown-50)} .pshots{display:flex;gap:9px;padding:0 18px 18px;overflow-x:auto} .pshot{flex:none;width:104px} .pshot img{width:104px;border-radius:10px;border:1px solid var(--line);display:block} /* Pile, in the corner and in the footer row */ .fbtn.pile{background:linear-gradient(135deg,#6C3BFF,#00B8FF);color:#fff} .fbtn.pile svg{width:26px;height:26px;fill:currentColor} .social .pileicon svg{fill:currentColor} .social .pileicon{background:linear-gradient(135deg,#6C3BFF,#00B8FF);border-color:transparent!important; color:#fff} .popt{font-weight:400;color:var(--ink-4);font-size:11.5px;text-transform:none;letter-spacing:0} /* Pile: the drawer, moderation notices, classes */ .pmenu{background:none;border:none;font-size:19px;color:var(--ink-2);cursor:pointer; padding:2px 4px;line-height:1} .pscrim{position:fixed;inset:0;background:rgba(20,14,10,.42);opacity:0;pointer-events:none; transition:opacity .22s;z-index:40} .pscrim.on{opacity:1;pointer-events:auto} .pdrawer{position:fixed;top:0;left:0;bottom:0;width:min(272px,82vw);background:var(--surface); border-right:1px solid var(--line);z-index:41;transform:translateX(-102%); transition:transform .24s cubic-bezier(.3,.8,.4,1);display:flex;flex-direction:column; padding:18px 0 12px;box-shadow:8px 0 30px rgba(20,14,10,.16)} .pdrawer.open{transform:translateX(0)} .pdhead{display:flex;align-items:center;gap:11px;padding:0 20px 18px;margin-bottom:8px; border-bottom:1px solid var(--line)} .pdhead img{width:34px;height:34px} .pdhead b{display:block;font-size:15px} .pdhead span{font-size:12px;color:var(--ink-3);text-transform:capitalize} .pdrawer a{display:flex;align-items:center;gap:13px;padding:12px 20px;text-decoration:none; color:var(--ink-2);font-size:15px} .pdrawer a span{width:20px;text-align:center;color:var(--brown);font-size:16px} .pdrawer a:hover{background:var(--surface-2);color:var(--ink)} .pdrawer a.on{background:var(--brown-50);color:var(--brown);font-weight:600} .pdout{margin:10px 20px 0;padding:10px;border:1px solid var(--line);border-radius:10px; background:none;font-family:var(--body);font-size:13.5px;color:var(--ink-3);cursor:pointer;width:calc(100% - 40px)} .pdfoot{margin-top:auto;padding:14px 20px 0;font-size:11.5px;color:var(--ink-4)} .pblock{margin:14px 18px 0;background:#FDF1EE;border:1px solid #F0C9BE;border-radius:13px;padding:14px 16px} .pblock b{display:block;font-size:13.5px;color:var(--rust);margin-bottom:4px} .pblock p{font-size:13.5px;line-height:1.6;color:var(--ink-2)} .pwarn{margin:14px 18px 0;background:var(--tan-bg);border:1px solid var(--tan-line); border-radius:13px;padding:13px 16px} .pwarn b{display:block;font-size:13px;margin-bottom:3px} .pwarn p{font-size:13px;line-height:1.55;color:var(--ink-2)} .pclass{background:var(--surface);border:1px solid var(--line);border-radius:16px; padding:16px 18px;margin-bottom:11px} .pctop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px} .pctop b{display:block;font-size:15.5px} .pctop span{font-size:12.5px;color:var(--ink-3)} .pcwhen{font-size:13px;color:var(--ink-2);margin-top:7px} .pcopts{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 12px} .pcopts span{font-size:11px;padding:4px 9px;border-radius:14px;background:var(--surface-2); border:1px solid var(--line);color:var(--ink-3)} .cform .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px} .cform .row3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px} .cform label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-top:12px} .cform input,.cform select{width:100%;padding:10px 12px;margin-top:5px;border:1px solid var(--line); border-radius:10px;font-family:var(--body);font-size:14px;background:var(--surface-2);box-sizing:border-box} .optgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .chk{display:flex!important;align-items:flex-start;gap:9px;padding:11px 13px;border:1px solid var(--line); border-radius:11px;font-weight:400!important;margin-top:0!important;cursor:pointer} .chk input{width:auto!important;margin:2px 0 0!important} .chk span b{display:block;font-size:13.5px;margin-bottom:2px} .chk span{font-size:12px;line-height:1.5;color:var(--ink-3)} @media(max-width:700px){ .cform .row2,.cform .row3,.optgrid{grid-template-columns:1fr} } /* ========================================================================== BRAND LOCKUP ========================================================================== */ .brandmark{height:52px;width:auto;display:block} @media(max-width:900px){ .brandmark{height:42px} } .mnav .lg{display:flex;align-items:center;text-decoration:none} .brand .mark img,.pbrand .mark img,.plogo img{object-fit:contain} /* The wordmark rule, in the brand's amber. Used under section headings so the underline from the logo carries through the page rather than living only in the corner. */ .ruled{position:relative;padding-bottom:14px} .ruled:after{content:"";position:absolute;left:0;bottom:0;width:88px;height:5px;border-radius:3px; background:var(--learner)} .ruled.center:after{left:50%;transform:translateX(-50%)} .ruled.accent:after{background:var(--accent)} /* ========================================================================== AUDIENCE COLOUR ON THE PUBLIC SITE The same four colours that theme the consoles mark the same four audiences here, so somebody who has seen coral once knows the next coral thing is about parents. ========================================================================== */ .aud{--c:var(--navy); --cb:var(--navy-50); --cl:var(--navy-200)} .aud.parent{--c:var(--parent); --cb:var(--parent-bg); --cl:var(--parent-line)} .aud.educator{--c:var(--educator); --cb:var(--educator-bg); --cl:var(--educator-line)} .aud.learner{--c:var(--learner-600); --cb:var(--learner-bg); --cl:var(--learner-line)} .aud.institution{--c:var(--institution); --cb:var(--institution-bg); --cl:var(--institution-line)} .numcard.aud .ic{background:var(--cb);color:var(--c)} .numcard.aud .n{color:var(--c)} .numcard.aud:hover{border-color:var(--cl)} .numcard.aud .who{color:var(--c)} .megacol .colhead .mi{color:var(--c,var(--navy))} .colhead.aud .mi{background:var(--cb);color:var(--c);border-radius:9px;padding:3px} .eyebrow.aud{background:var(--cb);color:var(--c);border-color:var(--cl)} .sect.aud-bg{background:var(--cb)} .stat.aud .num{color:var(--c)} .pill.parent{background:var(--parent-bg);color:var(--parent-600);border-color:var(--parent-line)} .pill.educator{background:var(--educator-bg);color:var(--educator-600);border-color:var(--educator-line)} .pill.learner{background:var(--learner-bg);color:var(--learner-600);border-color:var(--learner-line)} .pill.institution{background:var(--institution-bg);color:var(--institution-600);border-color:var(--institution-line)} /* the four console buttons in the header, each in its own colour */ .mnav .links a[href="/institution-console"] button{color:var(--institution)} .mnav .links a[href="/educator-console"] button{color:var(--educator-600)} .mnav .links a[href="/learner-console"] button{color:var(--learner-600)} .mnav .links a[href="/parent-console"] button{color:var(--parent-600)} .mnav .links a[href="/institution-console"] button:hover{background:var(--institution-bg)} .mnav .links a[href="/educator-console"] button:hover{background:var(--educator-bg)} .mnav .links a[href="/learner-console"] button:hover{background:var(--learner-bg)} .mnav .links a[href="/parent-console"] button:hover{background:var(--parent-bg)} /* ========================================================================== THE MARGIN OF AN EXERCISE BOOK Doodles are decorative: aria-hidden, and the page reads identically without them. ========================================================================== */ .dd{display:block;overflow:visible} .ddu{display:inline-block;width:clamp(140px,18vw,220px);vertical-align:-6px;margin-left:6px} .ddu .dd{width:100%;height:auto} .ddfloat{position:absolute;z-index:3;pointer-events:none;width:36px;opacity:.85} .ddfloat.tl{top:-14px;left:-18px} .ddfloat.tr{top:6px;right:-16px} .ddfloat.bl{bottom:34px;left:-22px} .ddwave{width:100%;height:56px;display:block} .ddskyline{width:100%;max-width:520px;height:auto;opacity:.55} .heroskyline{position:relative;margin-top:34px;display:flex;align-items:flex-end;gap:20px} .ddnote{position:relative;font-family:var(--display);font-style:italic;font-size:14.5px; line-height:1.35;color:var(--ink-2);padding:14px 16px 14px 18px;background:var(--surface); border:1px solid var(--line);border-radius:4px 14px 14px 14px;box-shadow:var(--sh-1); transform:rotate(-2.4deg);flex:none;max-width:190px} .ddnote:before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px; background:var(--nc);border-radius:0 0 3px 3px} .ddnote .pin{position:absolute;top:-7px;left:16px;width:13px;height:13px;border-radius:50%; background:var(--nc);box-shadow:0 1px 3px rgba(0,0,0,.2)} /* floating cards on the hero image */ .float .fico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center; font-size:15px;flex:none} .fico.educator{background:var(--educator-bg);color:var(--educator-600)} .fico.learner{background:var(--learner-bg);color:var(--learner-600)} .fico.parent{background:var(--parent-bg);color:var(--parent-600)} .fico.institution{background:var(--institution-bg);color:var(--institution-600)} .float .fsub{font-size:11.5px;color:var(--ink-3);margin-top:2px} .float .tick{color:var(--educator-600);font-size:15px;font-weight:700} .float.tr{position:absolute;top:8%;right:-22px} .float.bl{position:absolute;bottom:14%;left:-30px;max-width:270px} /* ── the four-colour band ── */ .fourband{background:var(--navy);color:#fff;padding:56px 0 60px} .fbhead{display:grid;grid-template-columns:1.35fr 1fr;gap:34px;align-items:end;margin-bottom:30px} .fbhead h2{font-family:var(--display);font-size:clamp(26px,3.4vw,40px);letter-spacing:-.03em; line-height:1.12;color:#fff} .fbside p{font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.72);margin-bottom:14px} .eyebrow.light{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#fff} .btn.light{background:#fff;color:var(--navy);border-color:#fff} .fbgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .fbcard{position:relative;border-radius:18px;padding:24px 22px 62px;text-decoration:none; color:var(--navy);min-height:250px;display:block;transition:transform .2s} .fbcard:hover{transform:translateY(-4px)} .fbcard h3{font-family:var(--display);font-size:24px;letter-spacing:-.02em;line-height:1.12; margin-bottom:10px} .fbcard p{font-size:14px;line-height:1.6;opacity:.82} .fbcard .go{position:absolute;left:22px;bottom:22px;width:38px;height:38px;border-radius:50%; background:rgba(255,255,255,.9);display:grid;place-items:center;font-size:17px} .fbcard.educator{background:#7BE0CE} .fbcard.parent{background:#F98A8B} .fbcard.institution{background:#8EC5F5} .fbcard.learner{background:#F8CE72} /* ── the audience wave ── */ .audwave{margin-top:38px} .audrow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:-14px;text-align:center} .aud .ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;margin:0 auto 10px; font-size:18px;color:#fff} .aud b{display:block;font-size:15px} .aud span:last-child{font-size:12.5px;color:var(--ink-3)} .aud.institution .ic{background:var(--institution)} .aud.educator .ic{background:var(--educator)} .aud.learner .ic{background:var(--learner)} .aud.parent .ic{background:var(--parent)} /* ── the footer wordmark ── */ .footmark{height:44px;width:auto;margin-bottom:14px;filter:brightness(0) invert(1)} .fbadge{display:inline-flex;gap:6px;border:1px solid rgba(255,255,255,.22);border-radius:7px; padding:4px 10px;font-size:11.5px} .footmarkband{max-width:var(--wrap);margin:26px auto 0;padding:0 var(--pad); display:flex;align-items:flex-end;justify-content:flex-end;gap:22px;overflow:hidden} .fword{font-family:var(--display);font-weight:700;letter-spacing:-.045em;line-height:.82; font-size:clamp(64px,13vw,168px);color:rgba(255,255,255,.07);user-select:none} .fword em{font-style:normal;color:rgba(255,255,255,.12)} .fstack{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.14em; line-height:1.7;color:rgba(255,255,255,.42);text-transform:uppercase;padding-bottom:16px; position:relative} .fstack i{display:block;width:74px;height:3px;background:var(--learner);border-radius:2px;margin-top:8px} @media(max-width:900px){ .fbgrid{grid-template-columns:1fr 1fr} .fbhead{grid-template-columns:1fr} .audrow{grid-template-columns:1fr 1fr;gap:22px} .ddwave{display:none} } @media(max-width:640px){ .fbgrid{grid-template-columns:1fr} .float.tr,.float.bl{position:static;margin-top:10px} .ddfloat{display:none} .heroskyline{flex-direction:column;align-items:flex-start} .footmarkband{justify-content:flex-start} } /* the commitment band above each console page */ .conband{padding:44px 0;background:var(--surface-2);border-bottom:1px solid var(--line)} .conband[data-audience="institution"]{background:var(--institution-bg)} .conband[data-audience="educator"]{background:var(--educator-bg)} .conband[data-audience="learner"]{background:var(--learner-bg)} .conband[data-audience="parent"]{background:var(--parent-bg)} .cbin{display:grid;grid-template-columns:1.45fr 1fr;gap:36px;align-items:center} .cbin h2{font-family:var(--display);font-size:clamp(22px,2.8vw,30px);letter-spacing:-.028em; line-height:1.18;margin-bottom:10px;color:var(--ink)} .cbin p{font-size:15.5px;line-height:1.7;color:var(--ink-2);max-width:60ch} .eyebrow.tinted{background:rgba(255,255,255,.72);border-color:rgba(0,0,0,.06)} .conband[data-audience="institution"] .eyebrow.tinted{color:var(--institution-600)} .conband[data-audience="educator"] .eyebrow.tinted{color:var(--educator-600)} .conband[data-audience="learner"] .eyebrow.tinted{color:var(--learner-600)} .conband[data-audience="parent"] .eyebrow.tinted{color:var(--parent-600)} .cbstats{display:flex;flex-direction:column;gap:10px} .cbstats div{background:var(--surface);border:1px solid var(--line);border-radius:13px; padding:13px 16px} .cbstats b{display:block;font-family:var(--display);font-size:19px;letter-spacing:-.02em} .cbstats span{font-size:12.5px;color:var(--ink-3)} @media(max-width:820px){ .cbin{grid-template-columns:1fr} .cbstats{flex-direction:row;flex-wrap:wrap}.cbstats div{flex:1;min-width:150px} } /* ── the audience showcase ── */ .audshow{display:grid;grid-template-columns:230px 1fr 250px;gap:26px;align-items:center; margin-top:34px} .apick{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line); border-radius:14px;text-decoration:none;background:var(--surface);margin-bottom:10px; transition:.18s} .apick .ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center; font-size:17px;flex:none} .apick b{display:block;font-size:15px;color:var(--ink)} .apick span span{font-size:12.5px;color:var(--ink-3)} .apick.institution .ic{background:var(--institution-bg);color:var(--institution-600)} .apick.educator .ic{background:var(--educator-bg);color:var(--educator-600)} .apick.learner .ic{background:var(--learner-bg);color:var(--learner-600)} .apick.parent .ic{background:var(--parent-bg);color:var(--parent-600)} .apick:hover{transform:translateX(3px)} .apick.institution:hover,.apick.institution.on{border-color:var(--institution);background:var(--institution-bg)} .apick.educator:hover,.apick.educator.on{border-color:var(--educator);background:var(--educator-bg)} .apick.learner:hover,.apick.learner.on{border-color:var(--learner);background:var(--learner-bg)} .apick.parent:hover,.apick.parent.on{border-color:var(--parent);background:var(--parent-bg)} .apick.on b{font-weight:700} .audimg{position:relative} .audimg img{width:100%;border-radius:18px;display:block;box-shadow:var(--sh-2)} .acard{position:absolute;display:flex;align-items:center;gap:10px;background:var(--surface); border:1px solid var(--line);border-radius:14px;padding:10px 14px;box-shadow:var(--sh-2); font-size:13px;white-space:nowrap} .acard .ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center; font-size:14px;flex:none;color:#fff} .acard .ic.educator{background:var(--educator)} .acard .ic.parent{background:var(--parent)} .acard .ic.institution{background:var(--institution)} .acard b{display:block;font-size:13.5px} .acard span span,.acard div span{font-size:11.5px;color:var(--ink-3)} .acard .tick{color:var(--educator-600);font-weight:700} .acard.tl{top:-18px;left:-34px} .acard.bl{bottom:-16px;left:-30px} .acard.br{bottom:6px;right:-40px} .audside p{font-size:17px;line-height:1.55;color:var(--ink-2);margin-bottom:16px; padding-left:20px;border-left:2px solid var(--line)} /* ── the school-leader row ── */ .leadrow{display:grid;grid-template-columns:1fr 1.15fr .78fr;gap:26px;align-items:center} .leadcard{background:var(--surface);border:1px solid var(--line);border-radius:18px; padding:20px;box-shadow:var(--sh-2)} .lctop b{font-family:var(--display);font-size:19px;letter-spacing:-.02em} .lctop span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px} .lcstats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:16px 0} .lcstats div{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:11px} .lcstats .ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center; font-size:12px;margin-bottom:7px} .lcstats .ic.institution{background:var(--institution-bg);color:var(--institution-600)} .lcstats .ic.educator{background:var(--educator-bg);color:var(--educator-600)} .lcstats .ic.learner{background:var(--learner-bg);color:var(--learner-600)} .lcstats p{font-size:11px;color:var(--ink-3)} .lcstats b{display:block;font-family:var(--display);font-size:20px;letter-spacing:-.02em;margin:1px 0} .lcstats span{font-size:10.5px;color:var(--ink-4)} .lcneeds{font-size:12.5px;color:var(--ink-3);margin:14px 0 6px} .lcrow{display:flex;align-items:center;gap:11px;padding:11px 2px;border-top:1px solid var(--line-2); text-decoration:none;color:var(--ink);font-size:14px} .lcrow .ic{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-size:12px;flex:none} .lcrow .ic.institution{background:var(--institution-bg);color:var(--institution-600)} .lcrow .ic.educator{background:var(--educator-bg);color:var(--educator-600)} .lcrow .ic.learner{background:var(--learner-bg);color:var(--learner-600)} .lcrow b{margin-left:auto;font-family:var(--mono);font-size:14px;color:var(--ink-2)} .lcrow:hover{color:var(--navy)} .leadimg{position:relative} .leadimg img{width:100%;border-radius:18px;display:block;box-shadow:var(--sh-2)} .lnote{position:absolute;bottom:-22px;left:-26px} @media(max-width:1000px){ .audshow{grid-template-columns:1fr} .audpick{display:grid;grid-template-columns:1fr 1fr;gap:10px} .apick{margin-bottom:0} .acard.tl,.acard.bl,.acard.br{position:static;margin-top:9px} .leadrow{grid-template-columns:1fr} .leadimg{max-width:320px} .lnote{position:static;margin-top:16px} } /* ── the console hero ── */ .conhero{padding:52px 0 0;position:relative;overflow:hidden} .conhero[data-audience="institution"]{background:linear-gradient(180deg,var(--institution-bg),var(--surface))} .conhero[data-audience="educator"]{background:linear-gradient(180deg,var(--educator-bg),var(--surface))} .conhero[data-audience="learner"]{background:linear-gradient(180deg,var(--learner-bg),var(--surface))} .conhero[data-audience="parent"]{background:linear-gradient(180deg,var(--parent-bg),var(--surface))} .chin{display:grid;grid-template-columns:1fr 1.08fr;gap:40px;align-items:end} /* Stacked: the copy runs full width, then the photograph does too. Side by side left the image half-filling its column and the text ending at a different height — the two never lined up, and on a wide screen it read as two unrelated things. */ .chin.stacked{display:block} .chin.stacked .chleft{padding-bottom:34px;max-width:none} .chin.stacked .chleft h1{max-width:20ch} .chin.stacked .chleft .sub{max-width:74ch} .chin.stacked .chright{position:relative;margin-top:8px} .chin.stacked .chright img{width:100%;height:clamp(280px,34vw,420px);object-fit:cover; object-position:center 32%; /* Squared off at full size, rounder as it shrinks — driven by --z. */ border-radius:calc(10px + var(--z) * 30px)} /* The learner shot is a close portrait, so the cards move to the edges rather than sitting across her face. */ .conhero[data-audience="learner"] .chin.stacked .chright img{object-position:center 26%} .conhero[data-audience="learner"] .chin.stacked .chcards{top:auto;bottom:18px} .chin.stacked .chcards{opacity:calc(1 - var(--z) * 1.7); position:absolute;top:18px;left:18px;right:18px;flex-direction:row; justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap} .chin.stacked .chcards .chcard:nth-child(2), .chin.stacked .chcards .chcard:nth-child(3){align-self:flex-start} .chleft{padding-bottom:52px} .chleft h1{font-family:var(--display);font-size:clamp(30px,4.2vw,48px);line-height:1.06; letter-spacing:-.035em;margin:14px 0 14px;color:var(--ink)} .chleft .sub{font-size:16.5px;line-height:1.68;color:var(--ink-2);max-width:48ch;margin-bottom:22px} .chticks{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px} .chticks span{font-size:13px;color:var(--ink-2);display:flex;gap:7px;align-items:center} .chticks span:before{content:"✓";font-weight:700} .conhero[data-audience="institution"] .chticks span:before{color:var(--institution-600)} .conhero[data-audience="educator"] .chticks span:before{color:var(--educator-600)} .conhero[data-audience="learner"] .chticks span:before{color:var(--learner-600)} .conhero[data-audience="parent"] .chticks span:before{color:var(--parent-600)} .chhand{width:170px;margin-top:14px;opacity:.9} .chright{position:relative} /* The four source photographs have wildly different shapes — 946x406, 1268x318, 878x366, 348x348. Left alone they filled half their column and left the other half empty. A fixed aspect ratio with object-fit makes every console hero the same block. */ .chright img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 28%; border-radius:20px;display:block;box-shadow:var(--sh-3)} /* Cards hug the outer edges. Centred ones sat squarely over a child's face, which is a poor look on a page about children. */ .chcards{position:absolute;inset:0;z-index:2;pointer-events:none} .chcards .chcard{position:absolute;max-width:min(60%,260px)} .chcards .chcard:nth-child(1){top:8%;left:-34px} .chcards .chcard:nth-child(2){bottom:16%;left:-26px} .chcards .chcard:nth-child(3){bottom:6%;right:-30px} .chcard{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line); border-radius:14px;padding:10px 14px;box-shadow:var(--sh-2);font-size:13px;white-space:nowrap} .chcard .ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center; font-size:14px;flex:none;color:#fff} .chcard .ic.institution{background:var(--institution)} .chcard .ic.educator{background:var(--educator)} .chcard .ic.learner{background:var(--learner)} .chcard .ic.parent{background:var(--parent)} .chcard b{display:block;font-size:13.5px} .chcard div span{font-size:11.5px;color:var(--ink-3)} .chcard .tick{color:var(--educator-600);font-weight:700;margin-left:4px} .chfacts{padding:26px 0;border-bottom:1px solid var(--line)} .chfacts[data-audience="institution"]{background:var(--institution-bg)} .chfacts[data-audience="educator"]{background:var(--educator-bg)} .chfacts[data-audience="learner"]{background:var(--learner-bg)} .chfacts[data-audience="parent"]{background:var(--parent-bg)} .chf{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .chf div{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:14px 16px} .chf b{display:block;font-family:var(--display);font-size:18px;letter-spacing:-.02em} .chf span{font-size:12.5px;color:var(--ink-3)} @media(max-width:900px){ .chin{grid-template-columns:1fr;gap:24px} .chleft{padding-bottom:0} .chcards{position:static;flex-direction:row;flex-wrap:wrap;margin-bottom:12px} .chcards .chcard:nth-child(2),.chcards .chcard:nth-child(3){align-self:auto} .chright img{border-radius:18px} .chf{grid-template-columns:1fr 1fr} } /* the boxes below the fold take the console's colour */ .specgroup{font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin:28px 0 12px; display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:20px;font-weight:700} .specgroup:before{content:"";width:7px;height:7px;border-radius:50%} .specgroup[data-audience="institution"]{background:var(--institution-bg);color:var(--institution-600)} .specgroup[data-audience="institution"]:before{background:var(--institution)} .specgroup[data-audience="educator"]{background:var(--educator-bg);color:var(--educator-600)} .specgroup[data-audience="educator"]:before{background:var(--educator)} .specgroup[data-audience="learner"]{background:var(--learner-bg);color:var(--learner-600)} .specgroup[data-audience="learner"]:before{background:var(--learner)} .specgroup[data-audience="parent"]{background:var(--parent-bg);color:var(--parent-600)} .specgroup[data-audience="parent"]:before{background:var(--parent)} .speccard{transition:.18s} .speccard .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center; font-size:17px;margin-bottom:12px} .speccard[data-audience="institution"] .ic{background:var(--institution-bg);color:var(--institution-600)} .speccard[data-audience="educator"] .ic{background:var(--educator-bg);color:var(--educator-600)} .speccard[data-audience="learner"] .ic{background:var(--learner-bg);color:var(--learner-600)} .speccard[data-audience="parent"] .ic{background:var(--parent-bg);color:var(--parent-600)} .speccard[data-audience="institution"]:hover{border-color:var(--institution);box-shadow:0 6px 20px rgba(75,93,167,.14)} .speccard[data-audience="educator"]:hover{border-color:var(--educator);box-shadow:0 6px 20px rgba(0,169,157,.14)} .speccard[data-audience="learner"]:hover{border-color:var(--learner);box-shadow:0 6px 20px rgba(244,165,28,.16)} .speccard[data-audience="parent"]:hover{border-color:var(--parent);box-shadow:0 6px 20px rgba(240,93,94,.14)} .speccard[data-audience="institution"] .go{color:var(--institution-600)} .speccard[data-audience="educator"] .go{color:var(--educator-600)} .speccard[data-audience="learner"] .go{color:var(--learner-600)} .speccard[data-audience="parent"] .go{color:var(--parent-600)} .conlink .ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center; font-size:18px;margin-bottom:12px;color:#fff} .conlink[data-audience="institution"] .ic{background:var(--institution)} .conlink[data-audience="educator"] .ic{background:var(--educator)} .conlink[data-audience="learner"] .ic{background:var(--learner)} .conlink[data-audience="parent"] .ic{background:var(--parent)} .conlink[data-audience="institution"]:hover{border-color:var(--institution)} .conlink[data-audience="educator"]:hover{border-color:var(--educator)} .conlink[data-audience="learner"]:hover{border-color:var(--learner)} .conlink[data-audience="parent"]:hover{border-color:var(--parent)} /* ========================================================================== THE HERO THAT STANDS STILL AND ZOOMS OUT The section is taller than the screen. Its extra height is a runway: while you scroll it, the stage inside stays pinned and --z runs 0 → 1. Only when it reaches 1 does the section release. Without the pin the picture slid up the screen while shrinking, which read as leaving rather than pulling back. --z is set from JS because animation-timeline: view() is not in Safari yet. ========================================================================== */ .conhero{--z:0;position:relative;min-height:172vh;padding-top:0} .chpin{position:sticky;top:0;min-height:100vh;display:flex;align-items:center; padding:70px 0 40px} .chpin > .mwrap{width:100%} /* Everything that is not the picture recedes: the words blur back and fade so the eye has somewhere to go once the picture is small. */ .chleft{filter:blur(calc(var(--z) * 5px));opacity:calc(1 - var(--z) * 0.72); transform:translateY(calc(var(--z) * -14px));transition:none} /* .chright is the stage the notes position against — it is already relative. */ .chzoom{position:relative;transform-origin:center center; transform:scale(calc(1 - var(--z) * 0.52))} .chzoom .chcards,.chin.stacked .chcards{opacity:calc(1 - var(--z) * 2)} /* the picture sits left on two consoles and right on the other two */ /* Centred, not alternating. * * Moving the block left and right left one whole side of a wide screen empty, which looked * like a mistake rather than a rhythm. Centred is the honest answer for a stacked hero: the * eye starts in the middle, drops to the picture directly beneath, and nothing is stranded. * * Headline and eyebrow are centred; the paragraph is centred as a block but its lines still * set left, because ragged-left prose is hard to read at any width. */ .chin.stacked .chleft{margin:0 auto;text-align:center;max-width:none} .chin.stacked .chleft h1{max-width:22ch;margin-left:auto;margin-right:auto} .chin.stacked .chleft .sub{max-width:66ch;margin-left:auto;margin-right:auto;text-align:left} .chin.stacked .acts,.chin.stacked .chticks{justify-content:center} .chin.stacked .chhand{margin:14px auto 0} /* ── the seven notes, placed round the picture ── */ .chnotes{position:absolute;inset:-13% -9%;pointer-events:none;z-index:3} .chnote{position:absolute;background:var(--surface);border:1px solid var(--line); padding:9px 14px;font-family:var(--display);font-style:italic;font-size:13.5px; color:var(--ink-2);box-shadow:var(--sh-2);white-space:nowrap;border-radius:14px; opacity:0;transform:scale(.9)} .chnote:before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px; border-radius:0 0 3px 3px} .conhero[data-audience="institution"] .chnote:before{background:var(--institution)} .conhero[data-audience="educator"] .chnote:before{background:var(--educator)} .conhero[data-audience="learner"] .chnote:before{background:var(--learner)} .conhero[data-audience="parent"] .chnote:before{background:var(--parent)} /* They arrive one after another rather than all at once — seven boxes appearing together reads as a popup, seven arriving in sequence reads as somebody annotating. */ .chnote.n1{top:0;left:2%;--d:.10;transform:rotate(-3deg) scale(.9)} .chnote.n2{top:-4%;left:36%;--d:.20} .chnote.n3{top:2%;right:2%;--d:.30;transform:rotate(2.5deg) scale(.9)} .chnote.n4{top:44%;left:-3%;--d:.40;transform:rotate(-2deg) scale(.9)} .chnote.n5{top:44%;right:-3%;--d:.50;transform:rotate(2deg) scale(.9)} .chnote.n6{bottom:0;left:6%;--d:.60;transform:rotate(2deg) scale(.9)} .chnote.n7{bottom:-3%;right:8%;--d:.70;transform:rotate(-2.5deg) scale(.9)} .chnote{opacity:calc((var(--z) - var(--d, 0)) * 5)} .chnote.n1,.chnote.n3,.chnote.n4,.chnote.n5,.chnote.n6,.chnote.n7{ transform:rotate(var(--r, 0deg)) scale(calc(.9 + (var(--z) - var(--d, 0)) * 0.5))} .chnote.n1{--r:-3deg} .chnote.n3{--r:2.5deg} .chnote.n4{--r:-2deg} .chnote.n5{--r:2deg} .chnote.n6{--r:2deg} .chnote.n7{--r:-2.5deg} .chdood{position:absolute;opacity:calc((var(--z) - .45) * 4)} .chdood svg{width:100%;height:auto} .chdood.d1{top:16%;left:24%;width:28px} .chdood.d2{bottom:22%;right:22%;width:32px} .chdood.d3{bottom:6%;left:40%;width:70px;transform:rotate(-8deg)} /* Motion sensitivity: no pin, no zoom, no blur. The picture sits at full size and the notes are simply shown. The page loses an effect, not any information. */ @media(prefers-reduced-motion: reduce){ .conhero{min-height:0} .chpin{position:static;min-height:0;padding:52px 0 40px} .chzoom{transform:none!important} .chleft{filter:none!important;opacity:1!important;transform:none!important} .chnote,.chdood{opacity:1!important;transform:none!important;position:static; display:inline-block;margin:0 8px 8px 0} .chnotes{position:static;inset:auto;margin-top:20px} .chzoom .chcards{opacity:1!important} } @media(max-width:900px){ .conhero{min-height:0} .chpin{position:static;min-height:0;padding:46px 0 34px} .chzoom{transform:none!important} .chleft{filter:none!important;opacity:1!important;transform:none!important} .chnotes{display:none} } /* ── the financial analytics tile ── */ .finpt{display:flex;gap:13px;align-items:flex-start} .finpt .ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center; font-size:15px;flex:none} .finpt .ic.educator{background:var(--educator-bg);color:var(--educator-600)} .finpt .ic.learner{background:var(--learner-bg);color:var(--learner-600)} .finpt .ic.parent{background:var(--parent-bg);color:var(--parent-600)} .finpt .ic.institution{background:var(--institution-bg);color:var(--institution-600)} .finpt b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:2px;font-weight:600} .finpt > span:last-child{font-size:13.5px;line-height:1.55;color:var(--ink-3)} .fintile{background:var(--surface);border:1px solid var(--line);border-radius:20px; padding:20px 22px;box-shadow:var(--sh-2)} .fthead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px; padding-bottom:14px;border-bottom:1px solid var(--line-2)} .fthead b{font-family:var(--display);font-size:19px;letter-spacing:-.01em} .fthead span{display:block;font-size:12px;color:var(--ink-3);margin-top:2px} .ftpill{font-size:11px;font-weight:600;padding:4px 11px;border-radius:20px; background:var(--educator-bg);color:var(--educator-600);white-space:nowrap} .ftstats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 6px} .ftstats div{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:11px 13px} .ftstats p{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px} .ftstats b{font-family:var(--display);font-size:22px;letter-spacing:-.01em;display:block;line-height:1} .ftstats b.up{color:var(--educator-600)} .ftstats span{font-size:11.5px;color:var(--ink-3)} .ftchart{width:100%;height:auto;display:block;margin:6px 0 4px} .ftlegend{display:flex;gap:14px;flex-wrap:wrap;padding:4px 0 14px;border-bottom:1px solid var(--line-2)} .ftlegend span{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-3)} .ftlegend i{width:11px;height:11px;border-radius:3px;display:block} .ftneeds{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin:14px 0 9px} .ftage div{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px; padding:7px 0;position:relative} .ftage .bar{position:absolute;left:0;top:0;height:100%;border-radius:6px;opacity:.13} .ftage b{font-size:13.5px;font-weight:500;position:relative;padding-left:9px} .ftage em{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--ink-3); position:relative;padding-right:9px} .ftnote{font-size:11.5px;line-height:1.6;color:var(--ink-4);margin-top:14px; padding-top:12px;border-top:1px solid var(--line-2)} @media(max-width:820px){ .ftstats{grid-template-columns:1fr 1fr} } /* ── the Memory Locker specimens ── */ .docrow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start} .doccard{background:var(--surface);border:1px solid var(--line);border-radius:16px; padding:14px 14px 16px;box-shadow:var(--sh-1);transition:.2s} .doccard.mid{transform:translateY(-14px)} .doccard:hover{transform:translateY(-4px);box-shadow:var(--sh-2)} .doccard.mid:hover{transform:translateY(-18px)} .dpaper{background:var(--navy-50);border-radius:11px;padding:12px;margin-bottom:12px; display:grid;place-items:center} .dpaper svg{width:100%;height:auto;max-height:210px;display:block; box-shadow:0 4px 14px rgba(21,43,79,.13);border-radius:7px} .doccard .k{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase; color:var(--ink-3);margin-bottom:5px} .doccard.institution .k{color:var(--institution-600)} .doccard.learner .k{color:var(--learner-600)} .doccard.parent .k{color:var(--parent-600)} .doccard b{display:block;font-size:15px;margin-bottom:3px} .doccard > span{font-size:12.5px;color:var(--ink-3)} .docnote{font-size:12.5px;line-height:1.65;color:var(--ink-4);margin-top:18px;max-width:58ch} @media(max-width:760px){ .docrow{grid-template-columns:1fr} .doccard.mid{transform:none} .doccard.mid:hover{transform:translateY(-4px)} } /* ── coming soon on the stores ── */ .footmarkband{align-items:flex-end} .fstores{margin-right:auto;padding-bottom:14px} .fsoon{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase; color:rgba(255,255,255,.42);margin-bottom:10px} .fsrow{display:flex;gap:10px;flex-wrap:wrap} .fstore{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.24); border-radius:11px;padding:8px 14px;color:rgba(255,255,255,.86);cursor:default} .fstore svg{width:22px;height:22px;fill:currentColor;flex:none} .fstore span{display:flex;flex-direction:column;font-size:14px;font-weight:600;line-height:1.15} .fstore em{font-style:normal;font-size:10px;font-weight:400;letter-spacing:.02em; color:rgba(255,255,255,.55)} /* ── the careers portal ── */ .opengate{display:flex;align-items:center;justify-content:space-between;gap:20px; background:var(--navy-50);border:1px solid var(--line);border-radius:16px;padding:18px 20px} .opengate.on{background:var(--educator-bg);border-color:var(--educator-line)} .opengate b{display:block;font-size:15.5px;margin-bottom:4px} .opengate.on b{color:var(--educator-600)} .opengate span{font-size:13.5px;line-height:1.6;color:var(--ink-2);max-width:70ch} .opengate form{flex:none} .cvout{background:var(--navy-50);border:1px solid var(--line);border-radius:12px;padding:16px; font-family:var(--mono);font-size:11.5px;line-height:1.7;white-space:pre-wrap; max-height:340px;overflow:auto;color:var(--ink-2)} .cform textarea{width:100%;padding:11px 13px;margin-top:5px;border:1px solid var(--line); border-radius:11px;font-family:var(--body);font-size:14px;background:var(--surface-2); box-sizing:border-box;resize:vertical} .polin{width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:14px; font-family:var(--body);font-size:15px;line-height:1.6;background:var(--surface); box-sizing:border-box;resize:vertical} .polout{font-size:16px;line-height:1.7;color:var(--ink);background:var(--educator-bg); border-radius:12px;padding:16px 18px} .pollist{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:8px} .pollist li{font-size:14px;line-height:1.6;color:var(--ink-2);padding-left:18px;position:relative} .pollist li:before{content:"·";position:absolute;left:4px;font-weight:700;color:var(--educator)} .pollist.flagged li:before{content:"!";color:var(--learner-600);font-size:12px;top:1px} .pollist.flagged b{display:block;color:var(--ink);margin-bottom:2px} .jfilter{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px} .jfilter input{padding:9px 13px;border:1px solid var(--line);border-radius:10px; font-family:var(--body);font-size:13.5px;background:var(--surface);min-width:130px} .jobcard{background:var(--surface);border:1px solid var(--line);border-radius:16px; padding:18px 20px;margin-bottom:12px} .jtop{display:flex;justify-content:space-between;gap:16px;align-items:flex-start} .jtop b{display:block;font-size:16.5px} .jtop > div > span{font-size:13px;color:var(--ink-3)} .jpay{font-family:var(--display);font-size:16px;text-align:right;white-space:nowrap} .jpay em{display:block;font-style:normal;font-size:11px;color:var(--ink-3);font-family:var(--sans)} .jtags{display:flex;gap:7px;flex-wrap:wrap;margin:11px 0} .jtags .tag{font-size:11.5px;padding:4px 11px;border-radius:14px} .jtags .tag.educator{background:var(--educator-bg);color:var(--educator-600)} .jtags .tag.institution{background:var(--institution-bg);color:var(--institution-600)} .jtags .tag.learner{background:var(--learner-bg);color:var(--learner-600)} .jdetail{font-size:14px;line-height:1.6;color:var(--ink-2);margin-bottom:12px} .edgeband{background:var(--surface);border:1px solid var(--line);border-radius:16px; padding:18px 20px;margin-bottom:12px;border-left-width:4px} .edgeband[data-audience="institution"]{border-left-color:var(--institution)} .edgeband[data-audience="educator"]{border-left-color:var(--educator)} .edgeband[data-audience="learner"]{border-left-color:var(--learner)} .edgeband[data-audience="parent"]{border-left-color:var(--parent)} .ebhead{display:flex;gap:20px;align-items:baseline;flex-wrap:wrap;margin-bottom:12px} .ebhead b{font-family:var(--display);font-size:20px} .ebhead > div > span{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);margin-left:9px} .ebhead p{font-size:14px;color:var(--ink-2)} .ebbody{display:grid;grid-template-columns:1fr 1fr;gap:20px} .ebbody .k{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px} .ebbody p{font-size:14px;line-height:1.6;color:var(--ink-2)} .ebbody ul{list-style:none;display:flex;flex-direction:column;gap:5px} .ebbody li{font-size:13.5px;color:var(--ink-2);padding-left:16px;position:relative} .ebbody li:before{content:"✓";position:absolute;left:0;color:var(--educator-600);font-size:11px} .boardlist{counter-reset:b;list-style:none;display:flex;flex-direction:column;gap:12px} .boardlist li{counter-increment:b;position:relative;padding-left:44px;font-size:15.5px; line-height:1.6;color:var(--ink-2);min-height:32px;display:flex;align-items:center} .boardlist li:before{content:counter(b);position:absolute;left:0;top:0;width:32px;height:32px; border-radius:10px;display:grid;place-items:center;font-family:var(--display); font-size:14px;font-weight:700} .boardlist[data-audience="institution"] li:before{background:var(--institution-bg);color:var(--institution-600)} .boardlist[data-audience="educator"] li:before{background:var(--educator-bg);color:var(--educator-600)} .boardlist[data-audience="learner"] li:before{background:var(--learner-bg);color:var(--learner-600)} @media(max-width:760px){ .ebbody{grid-template-columns:1fr} .opengate{flex-direction:column;align-items:flex-start} } /* ── the two-row header ── One line could not hold seven menus, four consoles and two buttons: every label wrapped mid-word. Row one is navigation and actions; row two is the four consoles, which is what a visitor most often wants and now reads as a deliberate band rather than an overflow. */ .mnav.two{display:block;padding:0} .mnav.two .in{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)} .mnav.two .in.row1{display:flex;align-items:center;gap:20px;min-height:66px} .mnav.two .links{display:flex;align-items:center;gap:2px;flex:1;flex-wrap:nowrap} .mnav.two .links > *{flex:none} .mnav.two .links button{white-space:nowrap} .mnav.two .cta{display:flex;gap:9px;flex:none} .mnav.two .cta .btn{white-space:nowrap} .mnav.two .in.row2{display:flex;align-items:stretch;gap:8px;border-top:1px solid var(--line); padding-top:9px;padding-bottom:9px;overflow-x:auto;scrollbar-width:none} .mnav.two .in.row2::-webkit-scrollbar{display:none} .r2lbl{display:flex;align-items:center;font-size:10.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--ink-4);padding-right:6px;flex:none} .conbtn{display:flex;align-items:center;gap:9px;padding:7px 15px;border-radius:11px; text-decoration:none;color:var(--ink-2);font-size:14px;font-weight:600;white-space:nowrap; border:1px solid transparent;flex:none;transition:.16s} .conbtn .d{width:9px;height:9px;border-radius:50%;flex:none} .conbtn em{font-style:normal;font-size:11.5px;font-weight:400;color:var(--ink-4)} .conbtn.institution .d{background:var(--institution)} .conbtn.educator .d{background:var(--educator)} .conbtn.learner .d{background:var(--learner)} .conbtn.parent .d{background:var(--parent)} .conbtn.institution:hover,.conbtn.institution.on{background:var(--institution-bg);color:var(--institution-600);border-color:var(--institution-line)} .conbtn.educator:hover,.conbtn.educator.on{background:var(--educator-bg);color:var(--educator-600);border-color:var(--educator-line)} .conbtn.learner:hover,.conbtn.learner.on{background:var(--learner-bg);color:var(--learner-600);border-color:var(--learner-line)} .conbtn.parent:hover,.conbtn.parent.on{background:var(--parent-bg);color:var(--parent-600);border-color:var(--parent-line)} .conbtn.on em{color:inherit;opacity:.7} .r2more{margin-left:auto;display:flex;align-items:center;font-size:13px;color:var(--ink-3); text-decoration:none;white-space:nowrap;padding-left:14px;flex:none} .r2more:hover{color:var(--navy)} @media(max-width:1180px){ .mnav.two .links{overflow-x:auto;scrollbar-width:none} .mnav.two .links::-webkit-scrollbar{display:none} } @media(max-width:760px){ .mnav.two .in.row1{gap:12px;min-height:58px} .r2lbl,.r2more{display:none} .conbtn em{display:none} } /* the careers hero — the tinted band without the pinned runway */ .edhero{padding:56px 0 44px;text-align:center} .edhero[data-audience="educator"]{background:linear-gradient(180deg,var(--educator-bg),var(--surface))} .edhero[data-audience="institution"]{background:linear-gradient(180deg,var(--institution-bg),var(--surface))} .edhero[data-audience="learner"]{background:linear-gradient(180deg,var(--learner-bg),var(--surface))} .edhero[data-audience="parent"]{background:linear-gradient(180deg,var(--parent-bg),var(--surface))} .edhero h1{font-family:var(--display);font-size:clamp(28px,4vw,44px);line-height:1.08; letter-spacing:-.03em;margin:14px auto 14px;max-width:20ch} .edhero .sub{font-size:16.5px;line-height:1.68;color:var(--ink-2);max-width:66ch; margin:0 auto 22px;text-align:left} .edhero .acts{justify-content:center} .edhero .chhand{width:170px;margin:16px auto 0} /* ── the jobs hero ── */ .jobhero{background:linear-gradient(180deg,var(--educator-bg),var(--surface)); padding:52px 0 40px;text-align:center} .jobhero h1{font-family:var(--display);font-size:clamp(30px,4.4vw,48px);letter-spacing:-.03em; line-height:1.06;margin:14px 0 26px} .jsearch{max-width:1020px;margin:0 auto} .jsrow{display:grid;grid-template-columns:1.3fr 1.2fr .9fr 1fr auto;gap:10px; background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px; box-shadow:var(--sh-2);text-align:left} .jsrow label{display:block} .jsrow label span{display:block;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase; color:var(--ink-3);margin-bottom:3px;padding-left:2px} .jsrow input,.jsrow select{width:100%;border:none;background:none;font-family:var(--body); font-size:14.5px;padding:4px 2px;color:var(--ink);box-sizing:border-box} .jsrow input:focus,.jsrow select:focus{outline:none} .jsrow label + label{border-left:1px solid var(--line);padding-left:12px} .jsrow .btn{align-self:center} .jkeys{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;max-width:900px; margin:20px auto 0} .jkey{font-size:13px;padding:6px 14px;border-radius:20px;background:var(--surface); border:1px solid var(--line);color:var(--ink-2);text-decoration:none;transition:.15s} .jkey:hover{border-color:var(--educator);color:var(--educator-600);background:var(--educator-bg)} .jkey.on{background:var(--educator);border-color:var(--educator);color:#fff} /* ── the rail of schools, moving ── */ .rail{overflow:hidden;padding:4px 0 8px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)} .railtrack{display:flex;gap:12px;width:max-content;animation:railmove 46s linear infinite} .rail:hover .railtrack{animation-play-state:paused} @keyframes railmove{from{transform:translateX(0)}to{transform:translateX(-50%)}} .railcard{display:flex;align-items:center;gap:11px;background:var(--surface); border:1px solid var(--line);border-radius:14px;padding:12px 18px;text-decoration:none; white-space:nowrap;flex:none;min-width:240px} .railcard b{display:block;font-size:14.5px;color:var(--ink)} .railcard span span{font-size:12.5px;color:var(--ink-3)} .railcard:hover{border-color:var(--educator)} .slogo{width:38px;height:38px;border-radius:11px;display:grid;place-items:center; font-family:var(--display);font-size:14px;font-weight:700;flex:none;color:#fff} .slogo.institution{background:var(--institution)} .slogo.educator{background:var(--educator)} .slogo.learner{background:var(--learner)} .slogo.parent{background:var(--parent)} @media(prefers-reduced-motion: reduce){ .railtrack{animation:none} .rail{overflow-x:auto} } .sugrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px} .jhead{display:flex;align-items:center;gap:12px} .quotabar{display:flex;align-items:center;justify-content:space-between;gap:14px; background:var(--navy-50);border:1px solid var(--line);border-radius:13px; padding:12px 16px;margin-bottom:16px;font-size:13.5px;color:var(--ink-2)} .quotabar.on{background:var(--educator-bg);border-color:var(--educator-line)} .quotabar.out{background:var(--learner-bg);border-color:var(--learner-line)} /* ── training upsell ── */ .upsell{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center} .upimg{position:relative} .upimg img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:18px; box-shadow:var(--sh-2);display:block} .upcards{position:absolute;left:-18px;bottom:-14px;display:flex;flex-direction:column;gap:8px} .upcard{display:flex;align-items:center;gap:9px;background:var(--surface); border:1px solid var(--line);border-radius:11px;padding:8px 13px;font-size:12.5px; box-shadow:var(--sh-2);white-space:nowrap} .upcard i{width:9px;height:9px;border-radius:50%} .upcard i.educator{background:var(--educator)} .upcard i.learner{background:var(--learner)} .upcard i.parent{background:var(--parent)} /* ── interview questions ── */ .qgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px} .qcard{background:var(--surface);border:1px solid var(--line);border-radius:15px; padding:18px 20px;border-top-width:3px} .qcard[data-audience="educator"]{border-top-color:var(--educator)} .qcard[data-audience="institution"]{border-top-color:var(--institution)} .qcard[data-audience="learner"]{border-top-color:var(--learner)} .qcard[data-audience="parent"]{border-top-color:var(--parent)} .qcard b{display:block;font-size:15.5px;line-height:1.35;margin-bottom:8px} .qcard p{font-size:13.5px;line-height:1.6;color:var(--ink-3)} /* ── plans ── */ .planrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px; align-items:start} .plancard{background:var(--surface);border:1px solid var(--line);border-radius:17px; padding:20px;position:relative} .plancard.best{border-color:var(--educator);box-shadow:0 6px 22px rgba(0,169,157,.12)} .pbadge{position:absolute;top:-10px;left:20px;background:var(--educator);color:#fff; font-size:10.5px;font-weight:600;padding:4px 11px;border-radius:20px;letter-spacing:.04em} .plancard > b{font-family:var(--display);font-size:19px;display:block;margin-bottom:6px} .pprice{font-family:var(--display);font-size:28px;display:block;line-height:1;margin-bottom:4px} .pprice em{font-style:normal;font-size:12px;font-family:var(--sans);color:var(--ink-3); display:block;margin-top:4px} .plancard p{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin:10px 0 12px} .plancard ul{list-style:none;display:flex;flex-direction:column;gap:6px;margin-bottom:14px} .plancard li{font-size:13px;color:var(--ink-2);padding-left:17px;position:relative} .plancard li:before{content:"✓";position:absolute;left:0;color:var(--educator-600);font-size:11px} /* ── the school side ── */ .tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px} .tcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 20px} .tcard.open{border-color:var(--educator);background:var(--educator-bg)} .tct{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:5px} .tct b{font-size:16px} .thead{font-size:14px;color:var(--ink-2);margin-bottom:4px} .tmeta{font-size:12.5px;color:var(--ink-3);margin-bottom:10px} .tcontact{font-family:var(--mono);font-size:12.5px;color:var(--educator-600); background:var(--surface);border-radius:9px;padding:9px 12px;margin-top:10px} @media(max-width:980px){ .jsrow{grid-template-columns:1fr 1fr} .jsrow label + label{border-left:none;padding-left:0} .jsrow .btn{grid-column:1 / -1} .upsell{grid-template-columns:1fr} .upcards{position:static;flex-direction:row;flex-wrap:wrap;margin-top:12px} } /* ── the strip of schools hiring, moving on its own ── */ .jstripwrap{padding:26px 0 6px;overflow:hidden} .jstriplbl{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3); margin-bottom:12px} .jstrip{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .jstriprun{display:flex;gap:12px;width:max-content;animation:jslide 46s linear infinite} .jstrip:hover .jstriprun{animation-play-state:paused} @keyframes jslide{from{transform:translateX(0)}to{transform:translateX(-50%)}} .jschool{display:flex;align-items:center;gap:11px;background:var(--surface); border:1px solid var(--line);border-radius:14px;padding:11px 18px 11px 12px; text-decoration:none;white-space:nowrap;flex:none} .jschool b{display:block;font-size:14px;color:var(--ink)} .jschool em{font-style:normal;font-size:12px;color:var(--ink-3)} .jschool:hover{border-color:var(--educator);background:var(--educator-bg)} /* A strip that slides forever is exactly what motion sensitivity is about. */ @media(prefers-reduced-motion: reduce){ .jstriprun{animation:none;flex-wrap:wrap;width:auto} .jstrip{mask-image:none;-webkit-mask-image:none} } /* ── the two private doors ── */ .twodoor{display:grid;grid-template-columns:1fr 1fr;gap:20px} .door{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:26px 26px 22px; border-top-width:4px} .door.educator{border-top-color:var(--educator)} .door.institution{border-top-color:var(--institution)} .door .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center; font-size:20px;margin-bottom:14px} .door.educator .ic{background:var(--educator-bg);color:var(--educator-600)} .door.institution .ic{background:var(--institution-bg);color:var(--institution-600)} .door h2{font-family:var(--display);font-size:23px;margin-bottom:8px} .door > p{font-size:14.5px;line-height:1.65;color:var(--ink-2);margin-bottom:16px} .dnote{font-size:12.5px;line-height:1.6;color:var(--ink-4);margin-top:14px; padding-top:12px;border-top:1px solid var(--line-2)} .tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px} .tcard{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:16px 18px} .tctop{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:4px} .tctop b{font-size:15.5px} .tchead{font-size:13px;color:var(--ink-3);margin-bottom:10px} .tcontact{font-family:var(--mono);font-size:12.5px;color:var(--educator-600); background:var(--educator-bg);border-radius:9px;padding:8px 11px} @media(max-width:760px){ .twodoor{grid-template-columns:1fr} } /* the four interview stages */ .qstages{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px} .qstage{border:1px solid var(--line);border-radius:13px;padding:13px 15px;border-top-width:3px} .qstage[data-audience="institution"]{border-top-color:var(--institution);background:var(--institution-bg)} .qstage[data-audience="educator"]{border-top-color:var(--educator);background:var(--educator-bg)} .qstage[data-audience="learner"]{border-top-color:var(--learner);background:var(--learner-bg)} .qstage[data-audience="parent"]{border-top-color:var(--parent);background:var(--parent-bg)} .qstage b{display:block;font-size:14px;margin-bottom:3px} .qstage span{font-size:12px;line-height:1.5;color:var(--ink-3)} .qnote{background:var(--surface);border:1px solid var(--line);border-radius:15px; padding:18px 20px;margin-top:16px;max-width:74ch} .qnote b{display:block;font-size:15px;margin-bottom:6px} .qnote p{font-size:14.5px;line-height:1.7;color:var(--ink-2)} .qnote em{font-style:italic} @media(max-width:860px){ .qstages{grid-template-columns:1fr 1fr} } /* ========================================================================== THE JOBS PAGE — headline and search side by side ========================================================================== The centred hero put the search bar a full screen-height below the fold on a laptop and left the right two-thirds of the band empty. This lays the page out the way a teacher scans it: what this is on the left, the thing to type into on the right, and the schools hiring immediately beneath rather than after a scroll. The photograph is decoration. It is the last column, it carries no text, and below 1180px it is gone — nothing on the page depends on it having loaded. ========================================================================== */ .jhero2{background:linear-gradient(180deg,var(--educator-bg),var(--surface)); padding:44px 0 34px;position:relative;overflow:hidden} .jh2{display:grid;grid-template-columns:minmax(280px,1fr) minmax(0,1.45fr); gap:30px 34px;align-items:start;position:relative} .jh2left{padding-top:10px} .jh2left h1{font-family:var(--display);font-size:clamp(30px,3.5vw,44px);letter-spacing:-.03em; line-height:1.06;margin:12px 0 0} .jh2ul{display:block;width:210px;margin:-2px 0 14px} .jh2left .sub{font-size:15.5px;line-height:1.65;color:var(--ink-2);max-width:40ch} .jh2right{min-width:0} /* A real grid column rather than an absolutely positioned layer. Floating it over the top worked until the keyword chips wrapped onto a fifth row — then the photograph sat on top of the Location field and the last chips, and nothing in the layout knew it was there. */ .jh2art{align-self:stretch;border-radius:20px;overflow:hidden;min-height:300px; box-shadow:var(--sh-2)} .jh2art img{width:100%;height:100%;object-fit:cover;object-position:52% 30%;display:block} @media(min-width:1240px){ .jh2{grid-template-columns:minmax(250px,.92fr) minmax(0,1.5fr) 268px} } @media(max-width:1239px){ .jh2art{display:none} } /* the search pill, inside the new hero */ .jhero2 .jsearch{max-width:none;margin:0} .jhero2 .jsrow{grid-template-columns:1.1fr 1.1fr .95fr 1fr auto;padding:10px; border-radius:18px;align-items:center} .jhero2 .jsrow label span{display:flex;align-items:center;gap:5px;font-size:10px; letter-spacing:.06em} .jhero2 .jsrow input,.jhero2 .jsrow select{font-size:14px} .jhero2 .jkeys{justify-content:flex-start;max-width:none;margin:16px 0 0} .ji{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} .btn .ji{width:16px;height:16px;stroke-width:2.2} /* Amber, for the one action on the page that is the point of the page. Navy on amber rather than white on amber — white on #F4A51C is 2.05:1 and unreadable. */ .btn.amber{background:var(--learner);border-color:var(--learner);color:var(--navy-700)} .btn.amber:hover{background:#D98F12;border-color:#D98F12;color:var(--navy-700)} .btn.wide{width:100%;justify-content:center} /* ── the band of schools hiring ── */ .jband{background:var(--surface-3);border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2);padding:16px 0} .jbandin{display:flex;align-items:center;gap:20px;min-width:0} .jbandlbl{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600; color:var(--ink);white-space:nowrap;flex:none} .jbandlbl .ji{width:19px;height:19px;color:var(--institution);stroke-width:1.8} .jband .jstrip{flex:1;min-width:0} .jband .jschool{padding:9px 16px 9px 10px} .jband .slogo{width:32px;height:32px;border-radius:9px;font-size:12px} @media(max-width:760px){ .jbandin{flex-direction:column;align-items:flex-start;gap:12px} .jband .jstrip{width:100%} } /* ── suggested opportunities ── */ .sughead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px; margin-bottom:18px;flex-wrap:wrap} .sughead h2{font-family:var(--display);font-size:29px;letter-spacing:-.03em;margin:10px 0 5px} .sughead .sub{font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:66ch} .tlink{font-size:14px;font-weight:600;color:var(--educator-600);text-decoration:none; border-bottom:1.5px solid var(--educator-line);padding-bottom:2px;white-space:nowrap} .tlink:hover{border-bottom-color:var(--educator)} .suggrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .sugcard{background:var(--surface);border:1px solid var(--line);border-radius:16px; padding:16px 17px;display:flex;flex-direction:column;gap:13px} .sugcard:hover{border-color:var(--educator-line);box-shadow:var(--sh-2)} .sugtop{display:flex;gap:11px;align-items:flex-start} .sugttl{min-width:0} .sugttl b{display:block;font-size:15px;line-height:1.3;letter-spacing:-.01em} .sugttl > span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:3px} .sugflag{display:inline-block;margin-left:7px;vertical-align:1px;font-size:10px; font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px; border-radius:11px;background:var(--parent-bg);color:var(--parent-600)} .sugmeta{display:flex;flex-direction:column;gap:6px;margin-top:auto} .sugmeta span{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2)} .sugmeta .ji{color:var(--ink-4)} .sugnote{font-size:13px;color:var(--ink-3);margin-top:14px} .sugnote a{color:var(--educator-600);font-weight:600} @media(max-width:1080px){ .suggrid{grid-template-columns:1fr 1fr} } @media(max-width:620px){ .suggrid{grid-template-columns:1fr} } /* ── search results ── */ .jobgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px} .jobgrid .jobcard{margin-bottom:0} .jwhen{font-size:12.5px;color:var(--ink-3);white-space:nowrap} .jtags .tag.sage{background:var(--sage-bg);color:var(--sage)} @media(max-width:860px){ .jobgrid{grid-template-columns:1fr} } /* ── the Skill Academy block ── */ .upnew{display:grid;grid-template-columns:.85fr 1fr .95fr;gap:30px;align-items:center} .upnew .upimg img{aspect-ratio:4/5;border-radius:20px} .upbody h2{font-family:var(--display);font-size:29px;letter-spacing:-.03em; line-height:1.12;margin:10px 0 10px} .upbody .sub{font-size:14.5px;line-height:1.65;color:var(--ink-2)} .upbody .acts{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap} .uplinks{display:grid;gap:14px} .uplink{display:block;border:1px solid var(--line);border-radius:16px;padding:18px 19px; text-decoration:none;background:var(--surface);transition:.15s} .uplink b{display:block;font-family:var(--display);font-size:16px;letter-spacing:-.02em; line-height:1.25;color:var(--ink);margin-bottom:7px} .uplink p{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin-bottom:10px} .uplink em{font-style:normal;font-size:13.5px;font-weight:600} .upico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center; margin-bottom:12px} .upico .ji{width:19px;height:19px;stroke-width:1.9} .uplink[data-audience="institution"]{background:var(--institution-bg);border-color:var(--institution-line)} .uplink[data-audience="institution"] .upico{background:var(--surface);color:var(--institution-600)} .uplink[data-audience="institution"] em{color:var(--institution-600); border-bottom:1.5px solid var(--institution);padding-bottom:2px} .uplink[data-audience="parent"]{background:var(--parent-bg);border-color:var(--parent-line)} .uplink[data-audience="parent"] .upico{background:var(--surface);color:var(--parent-600)} .uplink[data-audience="parent"] em{color:var(--parent-600); border-bottom:1.5px solid var(--parent);padding-bottom:2px} .uplink:hover{transform:translateY(-2px);box-shadow:var(--sh-2)} @media(max-width:1080px){ .upnew{grid-template-columns:1fr 1fr} .upnew .upimg{grid-column:1 / -1} .upnew .upimg img{aspect-ratio:16/7} } @media(max-width:760px){ .upnew{grid-template-columns:1fr} } @media(max-width:980px){ .jh2{grid-template-columns:1fr} .jh2left{padding-top:0} } @media(prefers-reduced-motion: reduce){ .uplink:hover{transform:none} } /* ========================================================================== THE JOBS CONSOLES — a teacher's and a school's, never the same screen ========================================================================== Each takes its accent from the audience it belongs to, so the two are distinguishable at a glance. Looking at the wrong console should be obvious before you read a word of it. */ .jdash{display:grid;grid-template-columns:238px 1fr;min-height:78vh; border-top:1px solid var(--line)} .jdside{background:var(--navy);color:#fff;padding:20px 14px;display:flex;flex-direction:column} .jdbrand{display:flex;align-items:center;gap:10px;padding:4px 8px 22px;text-decoration:none} .jdbrand .mk{width:34px;height:34px;border-radius:10px;background:#fff;display:grid; place-items:center;color:var(--navy);font-family:var(--display);font-weight:700;font-size:14px} .jdbrand b{font-family:var(--display);font-size:16px;letter-spacing:-.02em;display:block;color:#fff} .jdbrand em{font-style:normal;font-size:9.5px;letter-spacing:.16em;color:var(--navy-200); text-transform:uppercase} .jdnav{display:flex;flex-direction:column;gap:2px} .jdnav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px; color:#C3CCDA;text-decoration:none;font-size:14px} .jdnav a:hover{background:rgba(255,255,255,.06);color:#fff} .jdnav a.on{background:rgba(255,255,255,.12);color:#fff;font-weight:600} .jdnav .d{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.65;flex:none} .jdash[data-audience="educator"] .jdnav a.on .d{background:var(--educator);opacity:1} .jdash[data-audience="institution"] .jdnav a.on .d{background:var(--institution);opacity:1} .jdout{margin-top:auto;font-size:13px;color:var(--navy-200);text-decoration:none;padding:10px 12px} .jdout:hover{color:#fff} .jdmain{background:var(--canvas);min-width:0} .jdtop{background:var(--surface);border-bottom:1px solid var(--line);padding:13px 26px; display:flex;align-items:center;justify-content:space-between;gap:16px} .jdtop b{font-family:var(--display);font-size:17px;letter-spacing:-.025em;display:block} .jdtop span{font-size:12.5px;color:var(--ink-3)} .jdbody{padding:24px 26px 40px} .jdh1{font-family:var(--display);font-size:32px;letter-spacing:-.03em;margin-bottom:5px} .jdsub{font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:74ch;margin-bottom:20px} .jdmuted{font-size:13px;color:var(--ink-3);line-height:1.55;margin-bottom:10px} .jdch{display:flex;justify-content:space-between;align-items:flex-start;gap:18px; margin-bottom:14px;flex-wrap:wrap} .jdch h2{font-family:var(--display);font-size:19px;letter-spacing:-.025em} .jdtiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px} .jdtile{background:var(--surface);border:1px solid var(--line);border-radius:15px; padding:15px 16px;border-top-width:3px} .jdtile.educator{border-top-color:var(--educator)} .jdtile.institution{border-top-color:var(--institution)} .jdtile.learner{border-top-color:var(--learner)} .jdtile.parent{border-top-color:var(--parent)} .jdtile .k{display:block;font-size:12.5px;color:var(--ink-3);margin-bottom:6px} .jdtile .n{display:block;font-family:var(--display);font-size:27px;font-weight:700; letter-spacing:-.035em;line-height:1} .jdtile .f{display:block;font-size:11.5px;color:var(--ink-4);margin-top:5px} .jdcols{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start} .jdcard{padding:18px 20px;margin-bottom:16px} .jdcard h3{font-family:var(--display);font-size:17px;letter-spacing:-.025em;margin-bottom:7px} .jdcard > p{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin-bottom:12px} .jdcard.sagebox{background:var(--sage-bg);border-color:var(--sage-line)} .jdcard.warnbox{background:var(--learner-bg);border-color:var(--learner-line)} .jdlist{list-style:none;display:flex;flex-direction:column} .jdlist li{display:flex;justify-content:space-between;gap:14px;align-items:center; padding:11px 0;border-top:1px solid var(--line-2)} .jdlist li:first-child{border-top:none} .jdlist b{display:block;font-size:14.5px} .jdlist em{font-style:normal;font-size:12.5px;color:var(--ink-3)} .jdwhen{font-size:12.5px;color:var(--ink-3);white-space:nowrap} .jdtable{width:100%;border-collapse:collapse} .jdtable th{text-align:left;font-size:11px;letter-spacing:.07em;text-transform:uppercase; color:var(--ink-3);font-weight:600;padding:9px 10px;background:var(--surface-3)} .jdtable th:first-child{border-radius:9px 0 0 9px} .jdtable th:last-child{border-radius:0 9px 9px 0} .jdtable td{padding:11px 10px;border-bottom:1px solid var(--line-2);font-size:13.5px; color:var(--ink-2)} .jdtable td b{color:var(--ink);font-weight:600} .jdtodo{display:flex;align-items:center;justify-content:space-between;gap:12px; border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin-top:8px; text-decoration:none;color:var(--ink)} .jdtodo b{display:block;font-size:13.5px} .jdtodo em{font-style:normal;font-size:12px;color:var(--ink-3)} .jdtodo:hover{border-color:var(--educator)} .jdfg{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media(max-width:1080px){ .jdcols{grid-template-columns:1fr} .jdtiles{grid-template-columns:1fr 1fr} } @media(max-width:760px){ .jdash{grid-template-columns:1fr} .jdside{flex-direction:row;align-items:center;gap:14px;overflow-x:auto;padding:12px} .jdbrand{padding:0 10px 0 4px} .jdnav{flex-direction:row;gap:4px} .jdout{margin:0} .jdfg{grid-template-columns:1fr} } /* ── a single catalogue module, read without signing in ── */ .modgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start} .modlink{text-decoration:none;color:var(--ink)} .modlink:hover strong{color:var(--educator-600);text-decoration:underline} @media(max-width:860px){ .modgrid{grid-template-columns:1fr} } /* ========================================================================== RESUME BUILDER, POST A JOB, THE DASHBOARD DOOR ========================================================================== Soft surfaces on a tinted band. The shadow is the same two-layer token used everywhere else — a tight contact shadow plus a wide soft one — so these cards sit at the same height as the rest of the site rather than floating at a depth of their own. */ .rhero{background:linear-gradient(180deg,var(--educator-bg),var(--surface)); padding:46px 0 38px} .rhero[data-audience="institution"]{background:linear-gradient(180deg,var(--institution-bg),var(--surface))} .rhero h1{font-family:var(--display);font-size:clamp(30px,4vw,44px);letter-spacing:-.03em; line-height:1.06;margin:12px 0 12px;max-width:20ch} .rhero .sub{font-size:15.5px;line-height:1.65;color:var(--ink-2);max-width:62ch} /* the three steps, as a rail rather than a list */ .rsteps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:12px; margin-bottom:22px} .rsteps li{display:flex;align-items:center;gap:12px;background:var(--surface); border:1px solid var(--line);border-radius:15px;padding:13px 16px} .rsteps .rn{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center; font-family:var(--display);font-weight:700;font-size:13px;background:var(--surface-3); color:var(--ink-3)} .rsteps b{display:block;font-size:14.5px;letter-spacing:-.01em} .rsteps em{font-style:normal;font-size:12.5px;color:var(--ink-3)} .rsteps li.on{border-color:var(--educator-line);background:var(--educator-bg); box-shadow:var(--sh-2)} .rsteps li.on .rn{background:var(--educator);color:#fff} .rsteps li.done .rn{background:var(--sage);color:#fff} .rgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start} .rgrid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px} .rcard{padding:20px 22px;margin-bottom:16px;border-radius:18px;box-shadow:var(--sh-2)} .rcard h3{font-family:var(--display);font-size:17.5px;letter-spacing:-.025em;margin-bottom:8px} .rcard.sagebox{background:var(--sage-bg);border-color:var(--sage-line)} .rcard.warnbox{background:var(--learner-bg);border-color:var(--learner-line)} .rcard label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:10px} .rcard input,.rcard select,.rcard textarea{width:100%;border:1px solid var(--line); border-radius:11px;padding:10px 12px;font-family:var(--body);font-size:14px; color:var(--ink);background:var(--surface);box-sizing:border-box;margin-top:5px} .rcard textarea{resize:vertical;line-height:1.6} .rcard input:focus,.rcard select:focus,.rcard textarea:focus{outline:none; border-color:var(--educator);box-shadow:0 0 0 3px var(--educator-bg)} /* the drop target — a dashed well, so it reads as somewhere to put something */ .rdrop{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px; border:1.5px dashed var(--line);border-radius:16px;padding:24px 18px;text-align:center; background:var(--surface-2);cursor:pointer;transition:.15s;margin-bottom:0} .rdrop:hover{border-color:var(--educator);background:var(--educator-bg)} .rdrop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%; height:100%;margin:0} .rdrop .ri{font-size:22px;color:var(--educator-600)} .rdrop b{font-size:15px;color:var(--ink)} .rdrop em{font-style:normal;font-size:12.5px;color:var(--ink-3)} .ror{display:flex;align-items:center;gap:12px;margin:16px 0 4px;color:var(--ink-4); font-size:12px;letter-spacing:.06em;text-transform:uppercase} .ror:before,.ror:after{content:"";flex:1;height:1px;background:var(--line-2)} .rnote{background:var(--learner-bg);border:1px solid var(--learner-line);border-radius:13px; padding:13px 15px;font-size:13px;line-height:1.6;color:var(--ink-2);margin:16px 0 14px} .rnote.on{background:var(--educator-bg);border-color:var(--educator-line)} .rnote b{color:var(--ink)} .rout{display:grid;grid-template-columns:1.35fr 1fr;gap:18px;align-items:start} .rresult{width:100%;border:1px solid var(--line);border-radius:13px;padding:16px; font-family:var(--mono);font-size:13px;line-height:1.72;color:var(--ink); background:var(--surface-2);box-sizing:border-box;resize:vertical} .rlist{list-style:none;display:flex;flex-direction:column;gap:9px} .rlist li{font-size:13.5px;line-height:1.55;color:var(--ink-2);padding-left:15px; position:relative} .rlist li:before{content:"·";position:absolute;left:3px;font-weight:700;color:var(--educator)} .rlist b{display:block;color:var(--ink)} .rlist em{font-style:normal;color:var(--ink-3);font-size:12.5px} @media(max-width:980px){ .rgrid{grid-template-columns:1fr} .rout{grid-template-columns:1fr} .rsteps{grid-template-columns:1fr} } @media(max-width:620px){ .rgrid2{grid-template-columns:1fr} } /* ── TeachIn, in the header ── Bold and magenta so the jobs area reads as its own thing inside the navigation. The underline is the same doodle-weight stroke used under headings, not a browser underline. */ .hasmenu.teachin>button{color:var(--magenta);font-weight:700;letter-spacing:-.01em} .hasmenu.teachin>button:after{opacity:.7} .hasmenu.teachin>button.on{color:var(--magenta)} .hasmenu.teachin>button.on:before{content:"";position:absolute;left:12px;right:26px;bottom:4px; height:2.5px;border-radius:2px;background:var(--magenta)} .hasmenu.teachin:hover>button,.hasmenu.teachin.open>button{color:#8E1B6B} .hasmenu.teachin>button{position:relative} .hasmenu.teachin .megaitem:hover{background:var(--magenta-bg)} .hasmenu.teachin .megaitem .mi{color:var(--magenta)} /* ========================================================================== THE TEACHIN AREA — overview and the two side landings ========================================================================== Five items in the header, so everything else has to be reachable from these pages. The tiles are the navigation; they are anchors, not divs dressed as buttons. */ .thero{background:linear-gradient(180deg,var(--surface-2),var(--surface));padding:52px 0 42px; border-bottom:1px solid var(--line-2)} .thero[data-audience="educator"]{background:linear-gradient(180deg,var(--educator-bg),var(--surface))} .thero[data-audience="institution"]{background:linear-gradient(180deg,var(--institution-bg),var(--surface))} .thero h1{font-family:var(--display);font-size:clamp(31px,4.2vw,48px);letter-spacing:-.033em; line-height:1.05;margin:12px 0 14px;max-width:19ch} .thero .sub{font-size:16px;line-height:1.66;color:var(--ink-2);max-width:64ch} .thero .acts{display:flex;gap:11px;flex-wrap:wrap;margin-top:22px} .btn.magenta{background:var(--magenta);border-color:var(--magenta);color:#fff} .btn.magenta:hover{background:#8E1B6B;border-color:#8E1B6B;color:#fff} .tstats{background:var(--surface-3);border-bottom:1px solid var(--line-2);padding:18px 0} .tsgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .tstat{background:var(--surface);border:1px solid var(--line);border-radius:14px; padding:14px 16px;box-shadow:var(--sh-1)} .tstat b{display:block;font-family:var(--display);font-size:23px;font-weight:700; letter-spacing:-.035em;line-height:1.1} .tstat span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:4px} .th2{font-family:var(--display);font-size:27px;letter-spacing:-.03em;margin-bottom:18px} .tgrid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .ttile{display:block;background:var(--surface);border:1px solid var(--line);border-radius:18px; padding:20px 21px;text-decoration:none;box-shadow:var(--sh-1);transition:.16s} .ttile:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--magenta-line)} .tic{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;font-size:17px; background:var(--surface-3);color:var(--ink-2);margin-bottom:13px} .ttile[data-audience="educator"] .tic{background:var(--educator-bg);color:var(--educator-600)} .ttile[data-audience="institution"] .tic{background:var(--institution-bg);color:var(--institution-600)} .ttile[data-audience="learner"] .tic{background:var(--learner-bg);color:var(--learner-600)} .ttile[data-audience="parent"] .tic{background:var(--parent-bg);color:var(--parent-600)} .ttile b{display:block;font-family:var(--display);font-size:17px;letter-spacing:-.025em; color:var(--ink);margin-bottom:6px} .ttile p{font-size:13.5px;line-height:1.58;color:var(--ink-2);margin-bottom:12px} .ttile em{font-style:normal;font-size:13px;font-weight:600;color:var(--magenta)} .tsplit{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start} .tbig{padding:22px 24px;border-radius:18px;box-shadow:var(--sh-1)} .tbig h3{font-family:var(--display);font-size:19px;letter-spacing:-.025em;margin-bottom:10px} .tbig p{font-size:14.5px;line-height:1.68;color:var(--ink-2);margin-bottom:11px} .tbig p:last-child{margin-bottom:0} .tbig.sagebox{background:var(--sage-bg);border-color:var(--sage-line)} .tbig.warnbox{background:var(--learner-bg);border-color:var(--learner-line)} @media(max-width:1040px){ .tgrid3{grid-template-columns:1fr 1fr} .tsgrid{grid-template-columns:1fr 1fr} } @media(max-width:760px){ .tgrid3{grid-template-columns:1fr} .tsplit{grid-template-columns:1fr} } @media(prefers-reduced-motion: reduce){ .ttile:hover{transform:none} } /* ── the TeachIn header: one line ── Seven menus and four consoles is the right shape for somebody evaluating the platform and the wrong shape for a teacher who arrived looking for work. */ .tnav{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0; z-index:60;box-shadow:var(--sh-1)} .tnav .in{max-width:1240px;margin:0 auto;padding:11px 24px;display:flex;align-items:center; gap:18px} .tlogo{display:flex;align-items:center;flex:none} .tlogo .brandmark{height:52px;width:auto;display:block} .thome{flex:none} .thome a{display:grid;place-items:center;width:34px;height:34px;border-radius:10px; background:var(--surface-3);color:var(--ink-2);text-decoration:none;font-size:17px; line-height:1} .thome a:hover{background:var(--magenta-bg);color:var(--magenta)} .tlinks{display:flex;align-items:center;gap:4px;flex:1;min-width:0;flex-wrap:wrap} .tlinks a{font-size:14.5px;font-weight:500;color:var(--ink-2);text-decoration:none; padding:8px 12px;border-radius:10px;white-space:nowrap} .tlinks a:hover{background:var(--magenta-bg);color:var(--magenta)} .tlinks a.on{color:var(--magenta);font-weight:700;background:var(--magenta-bg)} .tacct{display:flex;gap:8px;flex:none} @media(max-width:900px){ .tnav .in{flex-wrap:wrap;gap:10px} .tlinks{order:3;width:100%;justify-content:flex-start} .tacct{margin-left:auto} } /* ── GSCI ── */ .gsplit{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center} .gwheelwrap{display:grid;place-items:center} .gwheel{width:100%;max-width:370px;height:auto;filter:drop-shadow(0 8px 24px rgba(21,43,79,.16))} .gwl{font-family:var(--body);font-size:13px;font-weight:700;fill:#fff;letter-spacing:.04em} .gwc{font-family:var(--display);font-size:25px;font-weight:800;fill:var(--ink);letter-spacing:-.03em} .gws{font-family:var(--body);font-size:11px;fill:var(--ink-3)} .garealist{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .garea{background:var(--surface);border:1px solid var(--line);border-radius:17px;padding:18px 19px; box-shadow:var(--sh-1);border-top:3px solid var(--institution)} .garea[data-i="1"]{border-top-color:var(--educator)} .garea[data-i="2"]{border-top-color:var(--learner)} .garea[data-i="3"]{border-top-color:var(--parent)} .garea[data-i="4"]{border-top-color:#3E6FB0} .garea[data-i="5"]{border-top-color:var(--sage)} .gcode{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.06em; color:var(--ink-3);background:var(--surface-3);border-radius:7px;padding:2px 8px;margin-bottom:8px} .garea b{display:block;font-family:var(--display);font-size:16.5px;letter-spacing:-.02em; margin-bottom:4px} .gn{display:block;font-size:12px;color:var(--ink-4);margin-bottom:11px} .garea ul{list-style:none;display:flex;flex-direction:column;gap:7px} .garea li{font-size:12.5px;line-height:1.5;color:var(--ink-2)} .gsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px} .gstep{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:16px 17px; box-shadow:var(--sh-1)} .gsn{display:grid;place-items:center;width:28px;height:28px;border-radius:50%; background:var(--institution);color:#fff;font-family:var(--display);font-weight:700; font-size:13px;margin-bottom:10px} .gstep b{display:block;font-size:14.5px;letter-spacing:-.015em;margin-bottom:4px} .gstep p{font-size:12.5px;line-height:1.55;color:var(--ink-2)} .gbands{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .gband{border-radius:14px;padding:15px 16px;border:1px solid var(--line);background:var(--surface)} .gband[data-audience="sage"]{background:var(--sage-bg);border-color:var(--sage-line)} .gband[data-audience="educator"]{background:var(--educator-bg);border-color:var(--educator-line)} .gband[data-audience="learner"]{background:var(--learner-bg);border-color:var(--learner-line)} .gband[data-audience="parent"]{background:var(--parent-bg);border-color:var(--parent-line)} .gband b{display:block;font-family:var(--display);font-size:16px;letter-spacing:-.02em} .gband span{font-size:12.5px;color:var(--ink-2)} @media(max-width:1040px){ .garealist{grid-template-columns:1fr 1fr} .gsteps,.gbands{grid-template-columns:1fr 1fr} .gsplit{grid-template-columns:1fr} } @media(max-width:680px){ .garealist{grid-template-columns:1fr} } /* ========================================================================== THE TEACHIN OVERVIEW — hero, the two audiences, EDGE, GSCI, the closing band ========================================================================== */ .phero{position:relative;min-height:560px;display:flex;align-items:center;overflow:hidden; background:#0C1B33} /* Clean artwork with nothing painted into it, so it runs full bleed. Its own left edge is already dark, which is where the headline sits — the wash deepens what the photograph is doing rather than fighting it. */ .pheroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:62% 42%} .pherowash{position:absolute;inset:0;background:linear-gradient(90deg, rgba(8,18,35,.95) 0%,rgba(8,18,35,.88) 26%,rgba(8,18,35,.70) 42%, rgba(8,18,35,.32) 60%,rgba(8,18,35,.08) 78%,rgba(8,18,35,0) 100%)} .pheroin{position:relative;padding:60px 24px;max-width:1240px;width:100%} .pheroin > *{max-width:min(560px,52%)} .pkick{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase; color:#9FC4E8;font-weight:600;margin-bottom:16px} .phero h1{font-family:var(--display);font-size:clamp(32px,4.6vw,54px);font-weight:800; letter-spacing:-.035em;line-height:1.07;color:#fff;margin-bottom:16px} .phero p{font-size:17px;line-height:1.6;color:#D7E3F2;max-width:46ch} .phero .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px} .btn.glass{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.42);color:#fff; backdrop-filter:blur(6px)} .btn.glass:hover{background:rgba(255,255,255,.17);border-color:#fff;color:#fff} .phand{margin-top:22px;font-size:15px;color:var(--learner);font-style:italic; border-bottom:2px solid var(--learner);display:inline-block;padding-bottom:4px} .psect{padding:52px 0} .psect.tintblue{background:linear-gradient(180deg,#F2F7FD,var(--surface))} .pheadc{text-align:center;margin-bottom:26px} .pheadc h2{font-family:var(--display);font-size:clamp(28px,3.4vw,40px);font-weight:800; letter-spacing:-.034em;margin-bottom:8px} .pheadc p{font-size:16px;color:var(--ink-2)} .pgrid5{display:grid;grid-template-columns:repeat(5,1fr);gap:14px} .pcard{display:block;background:var(--surface);border:1px solid var(--line);border-radius:17px; overflow:hidden;text-decoration:none;box-shadow:var(--sh-1);transition:.16s} .pcard:hover{transform:translateY(-3px);box-shadow:var(--sh-2)} .pcimg{display:block;aspect-ratio:212/203;overflow:hidden;background:var(--surface-3)} .pcimg img{width:100%;height:100%;object-fit:cover;display:block} .pcard b{display:block;font-family:var(--display);font-size:16px;letter-spacing:-.022em; color:var(--ink);padding:14px 15px 5px} .pcard p{font-size:13px;line-height:1.55;color:var(--ink-2);padding:0 15px 16px} .pcard[data-audience="educator"]:hover{border-color:var(--educator)} .pcard[data-audience="institution"]:hover{border-color:var(--institution)} .pmid{display:flex;justify-content:center;margin-top:26px} .esplit{display:grid;grid-template-columns:.92fr 1.08fr;gap:34px;align-items:center} .eimg img{width:100%;border-radius:20px;display:block;box-shadow:var(--sh-2)} .ebands{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-bottom:16px} .eband{background:var(--surface);border:1px solid var(--line);border-radius:13px; padding:13px 11px;border-top:4px solid var(--institution);box-shadow:var(--sh-1)} .eband[data-i="1"]{border-top-color:var(--educator)} .eband[data-i="2"]{border-top-color:var(--learner)} .eband[data-i="3"]{border-top-color:var(--parent)} .eband[data-i="4"]{border-top-color:#3E6FB0} .eband b{display:block;font-family:var(--display);font-size:14.5px;letter-spacing:-.02em} .eband span{font-family:var(--mono);font-size:11px;color:var(--ink-3)} .etrio{display:flex;gap:9px;flex-wrap:wrap} .etri{font-size:13px;font-weight:600;color:var(--ink-2);background:var(--surface-3); border-radius:11px;padding:7px 13px} .gsplit2{display:grid;grid-template-columns:1fr 1.02fr;gap:34px;align-items:center; margin-bottom:30px} /* Framed as two separate cards, as in the brief. Butted together with no frame, the person behind the wheel lined up with the person in the team photo and read as one body cut in half. */ .gimgs{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:20px; align-items:center} .gimgs img{background:var(--surface);padding:8px;border:1px solid var(--line)} .gwimg,.gtimg{width:100%;border-radius:18px;display:block;box-shadow:var(--sh-2); box-sizing:border-box} .gflow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center; padding:18px 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)} .gfs{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 15px; font-size:13px;font-weight:600;color:var(--ink);box-shadow:var(--sh-1)} .gfa{color:var(--ink-4)} .gvals{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px} .gval{display:flex;align-items:center;gap:11px;font-size:13.5px;color:var(--ink-2)} .gval em{font-style:normal;width:34px;height:34px;border-radius:11px;display:grid; place-items:center;background:var(--institution-bg);color:var(--institution-600);flex:none} /* the closing band — decoration from the brief, text and button real */ /* #133864 is sampled from the artwork itself. The previous base was a different navy, which showed as a lighter panel between the two background images — the box overlapping the margins. The map now repeats across the full width so there is no seam to see. */ /* Both crops are PNGs with the navy keyed out, so the line art composites onto the band colour. As opaque JPEGs their own navy never quite matched the CSS navy, and the difference read as a lighter rectangle sitting across the middle — the box overhanging the margins. The dotted map repeats across the full width; the school doodles sit once, on the right. */ .pband{background-color:#133864;position:relative;overflow:hidden; background-image:url(/ti/band-schools.png),url(/ti/band-map.png); background-repeat:no-repeat,repeat-x; background-position:right center,left center; background-size:auto 148px,auto 148px} .pbandin{position:relative;padding:34px 24px;display:flex;align-items:center; justify-content:space-between;gap:26px;flex-wrap:wrap} .pband h2{font-family:var(--display);font-size:clamp(22px,2.6vw,30px);font-weight:800; letter-spacing:-.03em;color:#fff;margin-bottom:7px} .pband h2 span{color:var(--learner)} .pband p{font-size:15px;color:#CFDCEE;max-width:56ch} @media(max-width:1100px){ .pgrid5{grid-template-columns:repeat(3,1fr)} .esplit,.gsplit2{grid-template-columns:1fr} .gvals{grid-template-columns:1fr 1fr} .ebands{grid-template-columns:repeat(3,1fr)} } @media(max-width:900px){ /* The photograph is decoration; on a narrow screen the headline needs the whole width. */ .pheroimg{object-position:66% 40%} .pherowash{background:linear-gradient(180deg,rgba(8,18,35,.86),rgba(8,18,35,.94))} .pheroin > *{max-width:100%} } @media(max-width:680px){ .pgrid5{grid-template-columns:1fr 1fr} .ebands{grid-template-columns:1fr 1fr} .pband{background-image:none} } @media(prefers-reduced-motion: reduce){ .pcard:hover{transform:none} } /* ── checking an EDGE ID ── */ .everify{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end} .everify input{font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase} .evok{display:inline-block;font-size:13px;font-weight:700;color:var(--sage); background:var(--surface);border-radius:11px;padding:6px 12px;margin-bottom:12px} @media(max-width:560px){ .everify{grid-template-columns:1fr} } /* ── the headline arrives a letter at a time ── Each character carries its own delay. Anyone who has asked for less motion gets the finished headline immediately rather than a version that never settles. */ .ptype{overflow:hidden} .pline{display:block} .pch{display:inline-block;white-space:pre;opacity:0;transform:translateY(0.32em); animation:pchin .42s cubic-bezier(.22,.9,.3,1) forwards} @keyframes pchin{to{opacity:1;transform:translateY(0)}} @media(prefers-reduced-motion: reduce){ .pch{animation:none;opacity:1;transform:none} } @media(max-width:900px){ .pheroimg{object-position:68% 40%} .pherowash{background:linear-gradient(180deg,rgba(8,18,35,.88),rgba(8,18,35,.92))} } /* ── the headline, a letter at a time ── */ .ptype{display:block} .ptype .ln{display:block} /* A word is the unit that may not be split. Without this the browser breaks between any two letter spans, which is how "Lead Better." became "Lead Bette" / "r." */ .ptype .wd{display:inline-block;white-space:nowrap} .ptype .lt{display:inline-block;opacity:0;transform:translateY(.18em); animation:ltin .38s cubic-bezier(.2,.7,.3,1) forwards} .ptype .lt.sp{width:.28em} @keyframes ltin{to{opacity:1;transform:none}} @media(prefers-reduced-motion: reduce){ .ptype .lt{animation:none;opacity:1;transform:none} } /* the TeachIn header matches the site header: same mark height, same tab size */ .tnav .in{padding:9px 24px;gap:14px} .tlinks a{font-size:14.5px;font-weight:500;padding:9px 13px} @media(max-width:900px){ .tlogo .brandmark{height:42px} } /* ========================================================================== FIND A JOB — hero, suggested, the three ways forward, plans ========================================================================== */ .fj-hero{background:linear-gradient(180deg,#EAF7F4,var(--surface));padding:40px 0 30px; overflow:hidden} .fj-hgrid{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.9fr);gap:34px; align-items:center} .fj-pill{display:inline-flex;align-items:center;gap:8px;background:var(--surface); border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:12px; font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2); box-shadow:var(--sh-1)} .fj-pill .ji{color:var(--educator-600)} .fj-hleft h1{font-family:var(--display);font-size:clamp(31px,4.1vw,46px);font-weight:800; letter-spacing:-.035em;line-height:1.05;margin:16px 0 0;position:relative;display:inline-block} .fj-ul{display:block;width:min(300px,62%);margin:-4px 0 0 auto} .fj-sub{font-size:16px;line-height:1.6;color:var(--ink-2);max-width:56ch;margin:12px 0 20px} .fj-search{margin-bottom:16px} .fj-srow{display:grid;grid-template-columns:1.05fr 1fr .8fr 1fr auto;gap:0;align-items:center; background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 8px 8px 6px; box-shadow:var(--sh-2)} .fj-srow label{display:block;padding:6px 16px;border-right:1px solid var(--line-2);min-width:0} .fj-srow label:nth-of-type(4){border-right:none} .fj-srow label span{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700; letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px} .fj-srow input,.fj-srow select{width:100%;border:none;background:none;font-family:var(--body); font-size:14.5px;color:var(--ink);padding:0;outline:none} .fj-srow input::placeholder{color:var(--ink-4)} .fj-srow .btn{border-radius:999px;padding:14px 26px} @media(max-width:1040px){ .fj-srow{grid-template-columns:1fr 1fr;border-radius:20px;padding:10px} .fj-srow label{border-right:none;border-bottom:1px solid var(--line-2)} .fj-srow .btn{grid-column:1/-1;margin-top:8px;justify-content:center} } .fj-hero .jkeys{justify-content:flex-start;max-width:none;margin:0} .fj-hart{position:relative;display:grid;place-items:center} .fj-hart img{width:100%;border-radius:22px;display:block;box-shadow:var(--sh-3);position:relative; z-index:1} .fj-blob{position:absolute;border-radius:50%;z-index:0} .fj-blob.teal{width:150px;height:150px;background:var(--educator);opacity:.9;left:-34px;top:6%} .fj-blob.amber{width:130px;height:130px;background:var(--learner);opacity:.9;right:-30px;bottom:8%} @media(max-width:980px){ .fj-hgrid{grid-template-columns:1fr} .fj-hart{display:none} } /* suggested */ .fj-rhead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px; margin-bottom:18px;flex-wrap:wrap} .fj-rhead h2{font-family:var(--display);font-size:29px;letter-spacing:-.032em;margin-bottom:4px} .fj-rhead p{font-size:14.5px;color:var(--ink-2);max-width:70ch} .fj-rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} @media(max-width:980px){ .fj-rgrid{grid-template-columns:1fr 1fr} } @media(max-width:640px){ .fj-rgrid{grid-template-columns:1fr} } /* three ways forward */ .fj-career{background:linear-gradient(180deg,var(--surface),#F6F9FE)} .fj-chead{text-align:center;max-width:70ch;margin:0 auto 28px} .fj-kick{display:block;font-size:11.5px;font-weight:700;letter-spacing:.19em; text-transform:uppercase;color:var(--ink-3);margin-bottom:10px} .fj-chead h2{font-family:var(--display);font-size:clamp(27px,3.4vw,38px);font-weight:800; letter-spacing:-.034em;margin-bottom:10px} .fj-chead p{font-size:16px;color:var(--ink-2);line-height:1.6} .fj-cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start} .fj-ccard{background:var(--surface);border:1px solid var(--line);border-radius:20px; padding:0 22px 22px;box-shadow:var(--sh-1);overflow:hidden} .fj-cimg{display:block;margin:0 -22px 16px;aspect-ratio:16/10;overflow:hidden; background:var(--surface-3)} .fj-cimg img{width:100%;height:100%;object-fit:cover;display:block} .fj-ctag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700; letter-spacing:.09em;text-transform:uppercase;border-radius:999px;padding:5px 13px; margin-bottom:12px} .fj-ctag.educator{background:var(--educator-bg);color:var(--educator-600)} .fj-ctag.institution{background:var(--institution-bg);color:var(--institution-600)} .fj-ctag.parent{background:var(--parent-bg);color:var(--parent-600)} .fj-ccard h3{font-family:var(--display);font-size:20px;letter-spacing:-.028em;line-height:1.22; margin-bottom:9px} .fj-ccard p{font-size:14px;line-height:1.62;color:var(--ink-2);margin-bottom:16px} .fj-ccard.growth{background:linear-gradient(180deg,#FFF8EC,var(--surface)); border-color:var(--learner-line);padding-top:22px} .fj-gpanel{display:block;background:var(--surface);border:1px solid var(--line); border-radius:15px;padding:14px;margin-bottom:16px;box-shadow:var(--sh-1)} .fj-grow{display:flex;align-items:baseline;gap:10px;padding:7px 0; border-top:1px solid var(--line-2)} .fj-grow:first-child{border-top:none} .fj-grow em{font-style:normal;font-size:12px;font-weight:700;color:var(--ink-3); min-width:78px;flex:none} .fj-grow b{font-size:13.5px;color:var(--ink);font-weight:500} .fj-grow.on b{font-weight:700} .fj-grow.on em{color:var(--learner-600)} .fj-gnote{display:block;font-size:12px;line-height:1.5;color:var(--ink-3);margin-top:10px; padding-top:10px;border-top:1px solid var(--line-2)} @media(max-width:1040px){ .fj-cgrid{grid-template-columns:1fr} } /* plans */ .fj-plans{background:linear-gradient(180deg,var(--surface),#EFF9F7)} .fj-phead{display:flex;justify-content:space-between;align-items:flex-end;gap:28px; margin-bottom:26px;flex-wrap:wrap} .fj-phead h2{font-family:var(--display);font-size:clamp(27px,3.6vw,40px);font-weight:800; letter-spacing:-.034em;line-height:1.1} .fj-phead h2 span{color:var(--educator-600)} .fj-phead p{font-size:16px;color:var(--ink-2);margin-top:10px} .fj-part{flex:none;width:210px} .fj-part img{width:100%;border-radius:18px;display:block;box-shadow:var(--sh-2)} @media(max-width:860px){ .fj-part{display:none} } .fj-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px} .fj-tcard{display:flex;gap:13px;align-items:flex-start;background:var(--surface); border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:var(--sh-1)} .fj-tico{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;flex:none; background:var(--educator-bg);color:var(--educator-600);font-size:16px} .fj-tcard b{display:block;font-size:14.5px;letter-spacing:-.015em;margin-bottom:3px} .fj-tcard p{font-size:12.5px;line-height:1.55;color:var(--ink-2)} @media(max-width:860px){ .fj-trust{grid-template-columns:1fr} } /* ── TeachIn for Schools ── */ .sch-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px} .sch-tri{display:flex;flex-direction:column;gap:3px} .sch-tico{width:34px;height:34px;border-radius:11px;display:grid;place-items:center; background:var(--institution-bg);color:var(--institution-600);font-size:15px;margin-bottom:5px} .sch-tri b{font-size:14px;letter-spacing:-.015em} .sch-tri span:last-child{font-size:12.5px;line-height:1.5;color:var(--ink-2)} @media(max-width:700px){ .sch-trio{grid-template-columns:1fr} } .sch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .sch-card{display:block;background:var(--surface);border:1px solid var(--line); border-radius:19px;padding:20px 21px;text-decoration:none;box-shadow:var(--sh-1); transition:.16s} .sch-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--magenta-line)} .sch-ico{width:42px;height:42px;border-radius:13px;display:grid;place-items:center; background:var(--institution-bg);color:var(--institution-600);font-size:17px;margin-bottom:13px} .sch-card b{display:block;font-family:var(--display);font-size:18px;letter-spacing:-.026em; color:var(--ink);margin-bottom:6px} .sch-card p{font-size:13.5px;line-height:1.58;color:var(--ink-2);margin-bottom:11px} .sch-card em{font-style:normal;font-size:13px;font-weight:600;color:var(--magenta)} @media(max-width:1040px){ .sch-grid{grid-template-columns:1fr 1fr} } @media(max-width:660px){ .sch-grid{grid-template-columns:1fr} } .sch-flow{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;margin-top:14px} .sch-step{flex:1;min-width:140px;background:var(--surface);border:1px solid var(--line); border-radius:13px;padding:12px 14px} .sch-step b{display:block;font-size:13.5px;letter-spacing:-.015em;margin-bottom:3px} .sch-step em{font-style:normal;font-size:12px;line-height:1.5;color:var(--ink-2)} .sch-arr{display:grid;place-items:center;color:var(--ink-4);flex:none} .sch-privacy{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px} .sch-pv{background:var(--surface);border:1px solid var(--line);border-radius:13px; padding:12px 13px;opacity:.62} .sch-pv.on{opacity:1;border-color:var(--sage-line);background:var(--surface)} .sch-pv b{display:block;font-size:13px;letter-spacing:-.01em;margin-bottom:3px} .sch-pv.on b{color:var(--sage)} .sch-pv em{font-style:normal;font-size:11.5px;line-height:1.45;color:var(--ink-3)} @media(max-width:620px){ .sch-privacy{grid-template-columns:1fr} } .sch-close{background:linear-gradient(180deg,#F3F8FE,var(--surface));padding:0 0 44px} .sch-cgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center} .sch-cimg img{width:100%;border-radius:0 22px 22px 0;display:block;box-shadow:var(--sh-2)} .sch-cbody{padding:34px 0} .sch-cbody h2{font-family:var(--display);font-size:clamp(25px,3.1vw,34px);font-weight:800; letter-spacing:-.033em;line-height:1.12;margin-bottom:10px} .sch-cbody p{font-size:15.5px;line-height:1.65;color:var(--ink-2);margin-bottom:18px; max-width:52ch} @media(max-width:900px){ .sch-cgrid{grid-template-columns:1fr} .sch-cimg img{border-radius:0} .sch-cbody{padding:0 0 10px} } /* ── EDGE grading ── */ .edge-hero{background:linear-gradient(180deg,#FFF7EC,var(--surface))} .edge-steps{background:var(--surface);border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2);padding:22px 0} .edge-srow{display:flex;align-items:stretch;gap:14px;flex-wrap:wrap} .edge-step{flex:1;min-width:230px;display:flex;gap:13px;align-items:flex-start} .edge-sn{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center; background:var(--navy);color:#fff;font-family:var(--display);font-weight:700;font-size:13px} .edge-step b{display:block;font-size:15px;letter-spacing:-.02em;margin-bottom:3px} .edge-step p{font-size:12.5px;line-height:1.55;color:var(--ink-2)} .edge-sarr{display:grid;place-items:center;color:var(--ink-4);flex:none} @media(max-width:820px){ .edge-sarr{display:none} } .edge-brow{display:grid;grid-template-columns:repeat(5,1fr);gap:12px} .edge-band{position:relative;background:var(--surface);border:1px solid var(--line); border-radius:17px;padding:0 15px 16px;box-shadow:var(--sh-1);border-top:4px solid var(--institution); overflow:hidden} .edge-band[data-audience="educator"]{border-top-color:var(--educator)} .edge-band[data-audience="learner"]{border-top-color:var(--learner)} .edge-band[data-audience="parent"]{border-top-color:var(--parent)} .edge-band[data-audience="sage"]{border-top-color:var(--sage)} .edge-band.on{box-shadow:var(--sh-2);border-color:var(--learner)} .edge-bimg{display:block;margin:0 -15px 0;aspect-ratio:280/154;overflow:hidden; background:var(--surface-3)} .edge-bimg img{width:100%;height:100%;object-fit:cover;display:block} .edge-bn{display:grid;place-items:center;width:30px;height:30px;border-radius:50%; background:var(--institution);color:#fff;font-family:var(--display);font-weight:700; font-size:13px;margin:-15px auto 8px;position:relative;border:3px solid var(--surface)} .edge-band[data-audience="educator"] .edge-bn{background:var(--educator)} .edge-band[data-audience="learner"] .edge-bn{background:var(--learner)} .edge-band[data-audience="parent"] .edge-bn{background:var(--parent)} .edge-band[data-audience="sage"] .edge-bn{background:var(--sage)} .edge-band b{display:block;text-align:center;font-family:var(--display);font-size:17px; letter-spacing:-.026em} .edge-bg{display:block;text-align:center;font-family:var(--mono);font-size:11.5px; color:var(--ink-3);margin:2px 0 8px} .edge-band p{font-size:12.5px;line-height:1.55;color:var(--ink-2);text-align:center} @media(max-width:1100px){ .edge-brow{grid-template-columns:repeat(3,1fr)} } @media(max-width:700px){ .edge-brow{grid-template-columns:1fr 1fr} } .edge-focus{margin-top:16px;background:var(--learner-bg);border:1px solid var(--learner-line); border-radius:20px;padding:22px 24px} .edge-fhead{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px} .edge-fic{width:44px;height:44px;border-radius:14px;flex:none;display:grid;place-items:center; background:var(--learner);color:#fff;font-size:18px} .edge-fhead b{font-family:var(--display);font-size:24px;letter-spacing:-.03em;margin-right:9px} .edge-fhead > div > span{font-family:var(--mono);font-size:13px;color:var(--ink-3)} .edge-fhead p{font-size:14.5px;color:var(--ink-2);margin-top:5px;line-height:1.6} .edge-fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .edge-flbl{display:block;font-size:11px;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--ink-3);margin-bottom:8px} .edge-fgrid p{font-size:13.5px;line-height:1.62;color:var(--ink-2);margin-bottom:10px} .edge-flist{list-style:none;display:flex;flex-direction:column;gap:7px} .edge-flist li{font-size:13.5px;line-height:1.5;color:var(--ink-2);padding-left:22px; position:relative} .edge-flist li:before{content:"✓";position:absolute;left:0;color:var(--sage);font-weight:700} @media(max-width:860px){ .edge-fgrid{grid-template-columns:1fr} } .edge-proc{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start} .edge-pcard{background:var(--surface);border:1px solid var(--line);border-radius:19px; padding:20px 21px;box-shadow:var(--sh-1)} .edge-pn{display:grid;place-items:center;width:34px;height:34px;border-radius:50%; font-family:var(--display);font-weight:700;font-size:14px;color:#fff;margin-bottom:12px} .edge-pn.institution{background:var(--institution)} .edge-pn.parent{background:var(--parent)} .edge-pn.learner{background:var(--learner)} .edge-pcard b{display:block;font-family:var(--display);font-size:19px;letter-spacing:-.026em; margin-bottom:7px} .edge-pcard p{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin-bottom:13px} .edge-plist{display:flex;flex-direction:column;gap:7px} .edge-plist span{font-size:12.5px;color:var(--ink-2);background:var(--surface-2); border:1px solid var(--line-2);border-radius:10px;padding:8px 12px} .edge-pimg{display:block;border-radius:14px;overflow:hidden} .edge-pimg img{width:100%;display:block} .edge-spec{display:block;border:1.5px solid var(--learner-line);border-radius:15px; padding:16px;background:linear-gradient(180deg,#FFFBF3,var(--surface));margin-bottom:13px; text-align:center} .edge-slbl{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--learner-600);background:var(--learner-bg); border-radius:9px;padding:3px 9px;margin-bottom:9px} .edge-spec b{font-family:var(--display);font-size:19px;letter-spacing:-.028em;margin-bottom:2px} .edge-sgr{display:block;font-family:var(--mono);font-size:13px;color:var(--ink-2)} .edge-sid{display:block;font-family:var(--mono);font-size:12px;color:var(--ink-3); margin:8px 0 6px;letter-spacing:.08em} .edge-snote{display:block;font-size:11.5px;line-height:1.5;color:var(--ink-3)} @media(max-width:1040px){ .edge-proc{grid-template-columns:1fr} } .edge-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:13px} .edge-rule{display:flex;gap:12px;align-items:flex-start;background:var(--surface); border:1px solid var(--line);border-radius:15px;padding:15px 17px;box-shadow:var(--sh-1)} .edge-rn{width:28px;height:28px;border-radius:9px;flex:none;display:grid;place-items:center; font-family:var(--display);font-weight:700;font-size:12.5px; background:var(--institution-bg);color:var(--institution-600)} .edge-rule[data-i="1"] .edge-rn{background:var(--educator-bg);color:var(--educator-600)} .edge-rule[data-i="2"] .edge-rn{background:var(--learner-bg);color:var(--learner-600)} .edge-rule[data-i="3"] .edge-rn{background:var(--parent-bg);color:var(--parent-600)} .edge-rule[data-i="4"] .edge-rn{background:var(--sage-bg);color:var(--sage)} .edge-rule p{font-size:13px;line-height:1.6;color:var(--ink-2)} @media(max-width:980px){ .edge-rules{grid-template-columns:1fr 1fr} } @media(max-width:620px){ .edge-rules{grid-template-columns:1fr} } .edge-close{background:var(--navy);padding:26px 0} .edge-cin{display:flex;align-items:center;justify-content:space-between;gap:24px; flex-wrap:wrap} .edge-script{font-family:var(--display);font-size:clamp(19px,2.4vw,26px);font-style:italic; font-weight:600;color:#fff;letter-spacing:-.02em} /* A field that is shown but not editable — the EDGE band on a teacher's own profile. */ .cform label .ro{display:block;border:1px solid var(--line);border-radius:11px; padding:10px 12px;background:var(--surface-3);color:var(--ink-2);font-size:14px;margin-top:5px} .cform label .hint{display:block;font-style:normal;font-size:12px;color:var(--ink-3); margin-top:6px} .cform label .hint a{color:var(--educator-600);font-weight:600} /* ── hiring-desk messaging and interviews ── */ .hm{display:grid;grid-template-columns:270px minmax(0,1fr);border:1px solid var(--line); border-radius:15px;overflow:hidden;background:var(--surface);min-height:420px} .hmlist{border-right:1px solid var(--line);padding:8px;overflow:auto} .hmrow{display:flex;gap:10px;align-items:center;padding:10px;border-radius:11px; text-decoration:none;color:var(--ink)} .hmrow:hover{background:var(--surface-3)} .hmrow.on{background:var(--educator-bg)} .hmrow > span:nth-child(2){flex:1;min-width:0} .hmrow b{display:block;font-size:13.5px} .hmrow em{display:block;font-style:normal;font-size:12px;color:var(--ink-3); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hmrow i{background:var(--parent);color:#fff;font-style:normal;font-size:10.5px; font-weight:600;border-radius:9px;padding:1px 6px} .hmthread{display:flex;flex-direction:column} .hmhead{display:flex;align-items:center;gap:12px;padding:13px 16px; border-bottom:1px solid var(--line)} .hmhead b{font-size:14.5px} .hmhead span{font-size:12px;color:var(--ink-3);flex:1} .hmchat{flex:1;padding:16px;display:flex;flex-direction:column;gap:9px;overflow:auto} .hmbub{max-width:72%;font-size:13.5px;line-height:1.5;padding:10px 13px;border-radius:14px; background:var(--surface-3)} .hmbub.out{background:var(--institution);color:#fff;align-self:flex-end} .hmbub.in{align-self:flex-start} .hmbub em{display:block;font-style:normal;font-size:10.5px;opacity:.7;margin-top:5px} .hmsend{display:flex;gap:9px;padding:12px 14px;border-top:1px solid var(--line)} .hmsend input{flex:1;border:1px solid var(--line);border-radius:999px;padding:10px 15px; font-family:var(--body);font-size:13.5px} @media(max-width:760px){ .hm{grid-template-columns:1fr} }