/* ClassGuard site: Liquid Glass (WS19, docs/plans/19-liquid-glass-plan.md). A fixed sky-blue -> purple -> pink
   scene; glass (blur + lens + rim + moving shine) only on navigation and controls; content on a thinner
   material without live blur; one area colour per audience; system font. */
:root{
  --ink:#10131F;--muted:#3F4456;--rule:rgba(16,19,31,.13);
  --bg0:#B5D4FE;--bg1:#CDBAF7;--bg2:#FFC0DD;--rb1:#90C2FF;--rb2:#C6AFFF;--rb3:#FFA6D3;
  --link:#5C2A8A;--focus:#5C2A8A;
  --brand:#5C2A8A;--on-brand:#FFFFFF;--brand-a:rgba(92,42,138,.9);--brand-b:rgba(92,42,138,.97);--glow:rgba(92,42,138,.34);
  --live:#13213D;--on-live:#FFFFFF;--success:#17693A;--success-tint:rgba(226,241,231,.9);
  --h:#1D59AE;--h-on:#FFFFFF;--h-ink:#123C78;--h-tint:#E0EAF8;--h-on-tint:#123C78;
  /* WS19: glass = very see-through tint; Safari/Firefox get blur + saturate, Chromium adds the lens. */
  --lg-tint:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,.12));
  --lg-thick:linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.60));
  --lg-filter:blur(10px) saturate(190%);
  --lg-lens:blur(5px) url(#lens) saturate(190%) brightness(1.08);
  --lg-shadow:inset 0 1px 1px rgba(255,255,255,.95),inset 0 -1px 1px rgba(255,255,255,.45),inset 2px 0 2px rgba(255,255,255,.35),inset -2px 0 2px rgba(255,255,255,.25),inset 0 0 22px rgba(255,255,255,.22),0 10px 30px rgba(30,10,70,.16),0 2px 6px rgba(30,10,70,.08);
  --rim:linear-gradient(135deg,rgba(255,255,255,1),rgba(255,255,255,.25) 35%,rgba(255,255,255,.10) 65%,rgba(255,255,255,.85));
  --spec:rgba(255,255,255,.55);--spec-tint:rgba(255,255,255,.22);
  /* WS19: material = content layer. No live blur (plan L5): a translucent fill and a soft rim. */
  --mat:rgba(255,255,255,.45);--mat-rim:linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,255,255,.25));
  --hair:rgba(255,255,255,.9);--pill:rgba(255,255,255,.42);--pill-hover:rgba(255,255,255,.62);
  --mat-shadow:0 8px 28px rgba(30,10,70,.08);
  --float:0 16px 40px rgba(30,10,70,.22),0 2px 8px rgba(30,10,70,.10);
  --device:#1B1530;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r-s:14px;--r-m:22px;--r-l:28px;--r-xl:32px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --ink:#F7F6FD;--muted:#CAC6DB;--rule:rgba(255,255,255,.14);
  --bg0:#001C37;--bg1:#1F0F41;--bg2:#340C24;--rb1:#003056;--rb2:#341C66;--rb3:#52173B;
  --link:#D9C2FF;--focus:#D9C2FF;
  --brand-a:rgba(116,62,168,.92);--brand-b:rgba(92,42,138,.98);--glow:rgba(150,90,220,.38);
  --live:#F2F5FA;--on-live:#13213D;--success:#69CF93;--success-tint:rgba(19,58,37,.85);
  --h:#8DB7F5;--h-on:#0A1D3D;--h-ink:#9CC1F7;--h-tint:#172C4E;--h-on-tint:#CCE0FC;
  --lg-tint:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.04));
  --lg-thick:linear-gradient(180deg,rgba(40,34,66,.84),rgba(30,26,52,.76));
  --lg-lens:blur(5px) url(#lens) saturate(190%) brightness(.9);
  --lg-shadow:inset 0 1px 1px rgba(255,255,255,.35),inset 0 -1px 1px rgba(255,255,255,.10),inset 0 0 20px rgba(255,255,255,.06),0 10px 30px rgba(0,0,0,.40);
  --rim:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.05) 35%,rgba(255,255,255,.02) 65%,rgba(255,255,255,.35));
  --spec:rgba(255,255,255,.14);--spec-tint:rgba(255,255,255,.14);
  --mat:rgba(30,26,52,.5);--mat-rim:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.04));
  --hair:rgba(255,255,255,.22);--pill:rgba(255,255,255,.08);--pill-hover:rgba(255,255,255,.16);
  --mat-shadow:0 8px 28px rgba(0,0,0,.25);
  --float:0 16px 40px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4);
  --device:#08060F;
  color-scheme:dark;
}}
/* WS19: Reduce transparency (OS setting) -> solid surfaces, no blur, no scene, no shine. */
@media (prefers-reduced-transparency:reduce){:root{
  --lg-tint:#FFFFFF;--lg-thick:#FFFFFF;--lg-filter:none;--lg-lens:none;
  --lg-shadow:0 0 0 1px #DCD8E6,0 4px 14px rgba(0,0,0,.06);--rim:transparent;--spec:transparent;--spec-tint:transparent;
  --mat:#FFFFFF;--mat-rim:#DCD8E6;--pill:#EFEDF5;--pill-hover:#E4E1EE;--hair:transparent;--muted:#3C4152;
  --bg0:#F2F1F6;--bg1:#F2F1F6;--bg2:#F2F1F6;--brand-a:#5C2A8A;--brand-b:#5C2A8A;
}}
@media (prefers-reduced-transparency:reduce) and (prefers-color-scheme:dark){:root{
  --lg-tint:#1E1B2E;--lg-thick:#1E1B2E;--lg-shadow:0 0 0 1px #34304A;--mat:#1E1B2E;--mat-rim:#34304A;
  --pill:#2A2640;--pill-hover:#3A3554;--muted:#C6C2D6;--bg0:#0F0D1A;--bg1:#0F0D1A;--bg2:#0F0D1A;
}}
/* Area colours: set on a section (or a phone mock) and everything inside follows. In light mode --h-ink
   is the deep shade so links and small text in the area colour pass AA on the material. */
.house-admin{--h:#1D59AE;--h-on:#FFFFFF;--h-ink:#123C78;--h-tint:#E0EAF8;--h-on-tint:#123C78}
.house-teacher{--h:#1B7A43;--h-on:#FFFFFF;--h-ink:#0E4A27;--h-tint:#DCF1E4;--h-on-tint:#0E4A27}
.house-parent{--h:#A3195B;--h-on:#FFFFFF;--h-ink:#6B0F3B;--h-tint:#FADDEA;--h-on-tint:#6B0F3B}
.house-student{--h:#B4540A;--h-on:#FFFFFF;--h-ink:#6E3305;--h-tint:#FDEBDA;--h-on-tint:#6E3305}
@media (prefers-color-scheme:dark){
  .house-admin{--h:#8DB7F5;--h-on:#0A1D3D;--h-ink:#9CC1F7;--h-tint:#172C4E;--h-on-tint:#CCE0FC}
  .house-teacher{--h:#69CF93;--h-on:#052812;--h-ink:#7AD9A2;--h-tint:#133A25;--h-on-tint:#BDEFD0}
  .house-parent{--h:#FF8FC0;--h-on:#3D0520;--h-ink:#FF9DC8;--h-tint:#45142D;--h-on-tint:#FFCFE4}
  .house-student{--h:#FFB46B;--h-on:#2E1500;--h-ink:#FFBD7D;--h-tint:#3D2510;--h-on-tint:#FFDCBC}
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
/* WS19: anchors land below the floating glass bar. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:104px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg1);color:var(--ink);font:400 16px/1.5 var(--font);font-variant-numeric:tabular-nums}
img,svg{max-width:100%}
a{color:var(--link);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.skip{position:absolute;left:16px;top:-80px;background:var(--lg-thick);color:var(--ink);padding:12px 18px;border-radius:999px;box-shadow:var(--float);z-index:40}
.skip:focus{top:12px}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 16px}
@media (min-width:700px){.wrap{padding:0 24px}}
@media (min-width:1024px){.wrap{padding:0 28px}}
h1,h2,h3{line-height:1.25;margin:0 0 .5em;font-weight:700}
h1{font-size:clamp(2rem,5.6vw,3.25rem);line-height:1.1;letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,3.4vw,2rem);letter-spacing:-.01em}
h3{font-size:1.0625rem;line-height:1.4}
p{margin:0 0 1em}
.muted{color:var(--muted)}
.lead{font-size:1.125rem;line-height:1.5;color:var(--ink);max-width:62ch}

/* ---------- scene ---------- */
/* WS19: one fixed layer, painted once; the ribbons are blurred by the compositor, not per scroll. */
.scene{position:fixed;inset:0;z-index:-1;background:linear-gradient(165deg,var(--bg0) 0%,var(--bg1) 50%,var(--bg2) 100%);pointer-events:none;overflow:hidden}
.scene svg{position:absolute;inset:-6%;width:112%;height:112%;max-width:none;filter:blur(34px)}
.scene .s1{stop-color:var(--rb1)}.scene .s2{stop-color:var(--rb2)}.scene .s3{stop-color:var(--rb3)}
.scene .r1{opacity:.9}.scene .r2{opacity:.85}.scene .r3{opacity:.9}
.scene .c1{fill:var(--rb3);opacity:.8}.scene .c2{fill:var(--rb1);opacity:.8}
.defs{position:absolute;width:0;height:0;overflow:hidden}
@media (prefers-reduced-transparency:reduce){.scene svg{display:none}}

/* ---------- glass + material ---------- */
/* WS19: Liquid Glass for controls only (bar, menu, buttons, FAQ toggles). ::before draws the bright
   masked rim, ::after the shine; site.js moves the shine with the pointer through --mx/--my. */
.lg,.btn,details:not(.menu)>summary{position:relative;isolation:isolate;background:var(--lg-tint);-webkit-backdrop-filter:var(--lg-filter);backdrop-filter:var(--lg-filter);box-shadow:var(--lg-shadow)}
.lens .lg,.lens .btn,.lens details:not(.menu)>summary{backdrop-filter:var(--lg-lens)}
.lg::before,.btn::before,details:not(.menu)>summary::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px;background:var(--rim);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none;z-index:2}
.lg::after,.btn::after,details:not(.menu)>summary::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(70% 90% at var(--mx,28%) var(--my,0%),var(--spec),transparent 62%);pointer-events:none;z-index:-1}
/* Material: content cards and panels. */
.mat,.card,.points,.steps li,.promises li,.builtby-card,.flow>div,.install,main:not(.home) .prose,.foot,details:not(.menu)[open]{position:relative;background:var(--mat);box-shadow:inset 0 .5px 0 var(--hair),var(--mat-shadow);border-radius:var(--r-l)}
.mat::before,.card::before,.points::before,.steps li::after,.promises li::before,.builtby-card::before,.flow>div::before,.install::before,main:not(.home) .prose::before,.foot::before,details:not(.menu)[open]::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--mat-rim);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}

/* ---------- floating glass bar ---------- */
/* WS19: the header floats; content scrolls under the capsule. The glass is a separate layer behind the
   bar's contents so the menu panel (a sibling, not a child of a backdrop-filter) blurs the page. */
.site-header{position:sticky;top:0;z-index:30;padding-top:12px}
.bar{position:relative;isolation:isolate;display:flex;align-items:center;gap:8px 12px;min-height:64px;padding:8px 8px 8px 12px;border-radius:var(--r-xl)}
.bar-glass{position:absolute;inset:0;border-radius:inherit;z-index:-1}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.1875rem;color:var(--ink);text-decoration:none;min-height:48px;padding-right:4px;border-radius:999px}
.logo{display:block;width:40px;height:40px;flex:none}
/* WS16: one clean row. Phones get a Menu disclosure; the inline nav shows from 900 px. */
.nav{display:none;gap:0 2px;margin-left:auto}
.nav a{color:var(--ink);text-decoration:none;padding:0 14px;min-height:44px;display:inline-flex;align-items:center;font-weight:600;font-size:.9375rem;border-radius:999px}
.nav a:hover{background:var(--pill)}
.bar>.btn{white-space:nowrap}
.menu{margin-left:auto}
.menu summary{list-style:none;min-height:44px;padding:0 16px;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.9375rem;border-radius:999px;cursor:pointer;color:var(--ink);background:var(--pill);box-shadow:inset 0 1px .5px var(--hair)}
.menu summary:hover{background:var(--pill-hover)}
.menu summary::-webkit-details-marker{display:none}
.menu summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.menu[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
/* WS19: the menu covers text, so it uses the thick glass tint and a stronger blur. */
.menu-panel{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:10;background:var(--lg-thick);border-radius:var(--r-l);padding:8px;display:grid;box-shadow:var(--lg-shadow),var(--float);-webkit-backdrop-filter:blur(24px) saturate(190%);backdrop-filter:blur(24px) saturate(190%)}
.lens .menu-panel{backdrop-filter:blur(24px) saturate(190%)}
.menu-panel a{color:var(--ink);text-decoration:none;min-height:48px;display:flex;align-items:center;padding:0 16px;font-weight:600;border-radius:999px}
.menu-panel a:hover{background:var(--pill)}
@media (max-width:440px){.bar{gap:6px}.bar>.btn{padding:0 14px;font-size:.875rem}.brand span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}
@media (min-width:900px){.nav{display:flex}.menu{display:none}.bar>.btn{margin-left:4px}}

/* ---------- buttons ---------- */
/* WS19: capsules. Primary = tinted glass in the logo purple with an inner top highlight and a glow;
   secondary = clear glass. A press shrinks the capsule a little (no motion under reduce motion). */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;color:var(--on-brand);font:600 1rem/1.2 var(--font);text-decoration:none;border:0;text-align:center;cursor:pointer;--spec:var(--spec-tint);background:linear-gradient(180deg,var(--brand-a),var(--brand-b));box-shadow:inset 0 1px 1px rgba(255,255,255,.55),inset 0 -1px 1px rgba(0,0,0,.14),0 8px 20px var(--glow);transition:transform .25s cubic-bezier(.3,1.5,.5,1),box-shadow .2s}
.btn:hover{box-shadow:inset 0 1px 1px rgba(255,255,255,.6),inset 0 -1px 1px rgba(0,0,0,.14),0 10px 26px var(--glow)}
.btn:active{transform:scale(.96)}
.btn-secondary{color:var(--ink);background:var(--lg-tint);box-shadow:var(--lg-shadow);--spec:rgba(255,255,255,.55)}
.btn-secondary:hover{background:var(--pill-hover);box-shadow:var(--lg-shadow)}
@media (prefers-color-scheme:dark){.btn-secondary{--spec:rgba(255,255,255,.14)}.btn-secondary:hover{background:rgba(255,255,255,.12)}}
@media (prefers-reduced-transparency:reduce){.btn-secondary,.btn-secondary:hover{background:var(--lg-tint);--spec:transparent}}
.btn-small{min-height:44px;padding:0 18px;font-size:.9375rem}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 20px}
@media (max-width:480px){.btn-row .btn{width:100%}}

/* ---------- hero ---------- */
.hero{padding:32px 0 48px}
.hero-grid{display:grid;gap:40px;align-items:center}
@media (min-width:960px){.hero{padding:56px 0 72px}.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}}
.hero .lead{margin-bottom:24px}
.reg{font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0;padding:0;list-style:none}
.chips li{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 14px;border-radius:999px;background:var(--pill);box-shadow:inset 0 1px .5px var(--hair);color:var(--ink);font-size:.8125rem;font-weight:700}
.chips svg{width:14px;height:14px;flex:none}

/* ---------- product demo: phones in the new app look (illustration) ---------- */
/* WS19: the mock screens follow the app: scene inside, glass-like bar and tab capsules, material cards.
   They are pictures, so they use static tints, not live blur. */
.demo{display:flex;justify-content:center;gap:20px;align-items:flex-start;min-width:0}
.phone{width:100%;max-width:300px;background:linear-gradient(165deg,var(--bg0),var(--bg1) 55%,var(--bg2));border:6px solid var(--device);border-radius:40px;overflow:hidden;font-size:13px;line-height:1.4;flex:0 1 300px;box-shadow:var(--float);padding:10px 0 10px}
.phone.second{display:none;margin-top:32px}
@media (min-width:700px) and (max-width:959px),(min-width:1100px){.phone.second{display:block}}
.m-bar{margin:0 10px;background:var(--pill);box-shadow:var(--lg-shadow);color:var(--ink);height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-weight:700;font-size:16px;border-radius:24px}
.m-bar small{font-size:11px;font-weight:600;color:var(--muted)}
.m-sash{display:none}
.m-body{padding:12px 10px;display:grid;gap:10px}
.m-card{background:var(--mat);box-shadow:inset 0 .5px 0 var(--hair);border-radius:20px;padding:12px 14px;overflow:hidden;position:relative}
.m-t{font-weight:700;font-size:15px;margin:0}
.m-s{margin:0;color:var(--muted);font-size:12px}
.m-chip{display:inline-flex;align-items:center;gap:5px;min-height:22px;padding:0 9px;border-radius:999px;font-size:11px;font-weight:700;background:var(--live);color:var(--on-live);margin-bottom:6px}
.m-chip i{width:7px;height:7px;border-radius:50%;background:#FF4D5E;display:block}
.m-chip.ok{background:var(--success-tint);color:var(--success)}
.m-chip.ok svg{width:11px;height:11px}
.m-btn{display:flex;align-items:center;justify-content:center;min-height:40px;margin-top:10px;border-radius:999px;background:var(--h);color:var(--h-on);font-weight:700;font-size:13px;box-shadow:inset 0 1px 1px rgba(255,255,255,.45),0 4px 12px rgba(30,10,70,.14)}
.m-btn.out{background:var(--pill);color:var(--ink);box-shadow:inset 0 1px .5px var(--hair)}
.m-meter{height:8px;border-radius:4px;background:var(--pill);margin:10px 0 2px;overflow:hidden}
.m-meter i{display:block;height:100%;width:84%;background:var(--h);border-radius:4px}
.m-stars{display:flex;gap:4px;color:var(--h);margin-top:6px}
.m-stars svg{width:22px;height:22px}
.m-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--rule);font-size:13px}
.m-row:first-of-type{border-top:0}
.m-row svg{width:18px;height:18px;flex:none;color:var(--h-ink)}
.m-av{width:36px;height:36px;border-radius:50%;background:var(--h-tint);color:var(--h-on-tint);display:grid;place-items:center;font-weight:700;flex:none}
.m-who{display:flex;gap:10px;align-items:center}
.m-tabs{display:flex;margin:0 8px;background:var(--pill);box-shadow:var(--lg-shadow);border-radius:28px;padding:4px}
.m-tabs span{flex:1;min-width:0;text-align:center;font-size:10px;letter-spacing:-.01em;font-weight:600;color:var(--ink);display:grid;justify-items:center;gap:2px;padding:4px 0;border-radius:22px}
.m-tabs span b{display:grid;place-items:center;width:100%;max-width:44px;height:24px}
.m-tabs span b svg{width:18px;height:18px}
.m-tabs .on{color:var(--h-ink);font-weight:700;background:var(--pill-hover);box-shadow:inset 0 1px 1px var(--hair)}
.caption{text-align:center;margin:16px 0 0;font-size:.8125rem;color:var(--muted)}

/* ---------- audience sections ---------- */
section{padding:48px 0}
@media (min-width:960px){section{padding:64px 0}}
/* WS19: sections sit on the scene; the area colour marks the heading and the content card. */
.house h2{display:flex;align-items:center;gap:12px}
.house h2::before{content:"";width:14px;height:14px;border-radius:50%;flex:none;background:var(--h);box-shadow:0 0 0 4px var(--pill),0 0 16px var(--h)}
.house a{color:var(--h-ink)}
.card{padding:20px}
.card h3{margin:12px 0 8px}
.card ul{margin:0;padding-left:1.2em}
.card li{margin-bottom:.45em}
.card li:last-child{margin-bottom:0}
.section-note{margin-top:32px}
/* WS16: one screen fragment per audience beside a plain ruled list (no card trio, no icon tiles). */
.split{display:grid;gap:32px;margin-top:32px;align-items:start}
@media (min-width:960px){.split{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px}.split.flip .frag{order:2}}
.frag{margin:0;min-width:0}
.frag figcaption{margin-top:12px;font-size:.8125rem;color:var(--muted);text-align:center}
.points{padding:8px 22px}
.points .pt{padding:18px 0;border-top:1px solid var(--rule)}
.points .pt:first-child{border-top:0}
.points h3{margin:0 0 8px}
.points ul{margin:0;padding-left:1.2em}
.points li{margin-bottom:.4em}
.points li::marker{color:var(--h)}
.points li:last-child{margin-bottom:0}
.laptop{max-width:560px;margin:0 auto}
.l-screen{background:linear-gradient(165deg,var(--bg0),var(--bg1) 55%,var(--bg2));border:8px solid var(--device);border-radius:22px 22px 6px 6px;overflow:hidden;font-size:13px;padding:10px 0 0}
.l-base{height:12px;background:var(--device);border-radius:0 0 14px 14px;margin:0 -4%;box-shadow:var(--float)}
.l-body{margin:10px;padding:6px 14px 10px;background:var(--mat);box-shadow:inset 0 .5px 0 var(--hair);border-radius:18px}
.t-head,.t-row{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:8px;padding:9px 0;align-items:center}
.t-head{font-size:11px;font-weight:700;color:var(--muted)}
.t-row{border-top:1px solid var(--rule)}
.t-row span:first-child{font-weight:700}
.t-st{justify-self:start;display:inline-flex;align-items:center;min-height:22px;padding:0 9px;border-radius:999px;font-size:11px;font-weight:700;background:var(--pill);color:var(--ink)}
.t-st.ok{background:var(--success-tint);color:var(--success)}
.t-st.late{background:var(--h-tint);color:var(--h-on-tint);box-shadow:inset 0 0 0 1px var(--h)}
.t-st.abs{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--muted)}
.gridfrag{max-width:560px;margin:0 auto;background:linear-gradient(165deg,var(--bg0),var(--bg1) 55%,var(--bg2));border:6px solid var(--device);border-radius:32px;overflow:hidden;font-size:13px;padding-top:10px;box-shadow:var(--float)}
.g-body{padding:12px 10px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.g-tile{border-radius:18px;padding:12px 6px;display:grid;justify-items:center;gap:2px;text-align:center;background:var(--mat);box-shadow:inset 0 .5px 0 var(--hair)}
.g-tile span{font-weight:700}
.g-tile small{font-size:11px;font-weight:700;color:var(--muted)}
.g-tile.on{box-shadow:inset 0 0 0 2px var(--h)}
.g-tile.on small{color:var(--h-ink)}
.g-tile.off{background:var(--pill);box-shadow:inset 0 0 0 1px var(--rule)}
.g-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 10px 10px;padding:6px;background:var(--pill);box-shadow:var(--lg-shadow);border-radius:28px}
.g-bar .m-btn{margin-top:0;min-height:44px}
.pfrag{margin:0 auto}

/* ---------- privacy ---------- */
.flow{display:grid;gap:16px;margin-top:28px}
@media (min-width:760px){.flow{grid-template-columns:1fr 1fr}}
.flow>div{padding:22px}
.flow h3{margin:0 0 10px;display:flex;align-items:center;gap:10px}
.flow svg{width:22px;height:22px;flex:none;color:var(--link)}
.flow ul{margin:0;padding-left:1.2em}
.flow li{margin-bottom:.4em}
.flow .sent q{font-weight:700;quotes:"\201C" "\201D"}

/* ---------- how it works ---------- */
.steps{counter-reset:s;list-style:none;margin:28px 0 0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.steps li{counter-increment:s;padding:22px}
/* WS19: the step number is a small purple glass drop (the material rim uses ::after here). */
.steps li::before{content:counter(s);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(180deg,var(--brand-a),var(--brand-b));color:var(--on-brand);font-weight:700;font-size:1.125rem;margin-bottom:12px;box-shadow:inset 0 1px 1px rgba(255,255,255,.55),0 6px 16px var(--glow)}
.steps h3{margin:0 0 6px}
.steps p{margin:0;color:var(--muted)}
@media (min-width:960px){.steps{grid-template-columns:repeat(4,1fr)}}

/* ---------- promises / faq ---------- */
.promises ul{margin:20px 0;padding:0;list-style:none;display:grid;gap:12px;max-width:760px}
.promises li{padding:16px 20px;border-radius:var(--r-m)}
/* WS16: FAQ styles only; the header menu is also a <details> and must stay unboxed.
   WS19: closed = a glass capsule toggle; open = the answer on material under the capsule. */
details:not(.menu){border-radius:var(--r-l);margin-bottom:10px;max-width:760px}
details:not(.menu)>summary{cursor:pointer;font-weight:700;min-height:52px;display:flex;align-items:center;gap:12px;justify-content:space-between;padding:10px 20px;border-radius:26px;list-style:none}
details:not(.menu)>summary::-webkit-details-marker{display:none}
.chev{width:9px;height:9px;flex:none;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);margin-right:4px}
details[open]>summary .chev{transform:rotate(-135deg) translate(-2px,-2px)}
details:not(.menu) p{margin:14px 20px 16px}
.builtby-card{padding:24px;text-align:center}
.builtby-big{font-size:1.5rem;font-weight:700;margin:0 0 4px}
.builtby-card .sub{margin:0;color:var(--muted)}
.builtby{padding-top:0}

/* ---------- footer ---------- */
/* WS19: the footer is a material panel on the scene, not a navy band. */
.site-footer{padding:0 0 24px}
.foot{padding:20px 20px 24px}
.site-footer a{color:var(--ink)}
.footer-nav{display:flex;flex-wrap:wrap;gap:0 4px;margin:0 -8px 8px}
.footer-nav a{min-height:44px;display:inline-flex;align-items:center;padding:0 10px;font-weight:600;font-size:.9375rem;border-radius:999px}
.footer-nav a:hover{background:var(--pill)}
.built-small{font-weight:700;margin:8px 0 4px}
.legal{font-size:.8125rem;color:var(--muted);margin:0}

/* ---------- download page, 404, documents ---------- */
.prose{max-width:800px;padding:40px 16px 64px}
/* WS19: documents and the download page read on one material panel. */
main:not(.home) .prose{margin:16px auto 40px;padding:28px 20px 36px;border-radius:var(--r-xl)}
@media (min-width:700px){main:not(.home) .prose{padding:44px 48px 52px}}
.prose h1{font-size:clamp(1.75rem,4.5vw,2.5rem)}
.prose h2{margin-top:1.8em}
.prose table{border-collapse:collapse;display:block;overflow-x:auto;max-width:100%;margin:0 0 1em}
.prose th,.prose td{border:1px solid var(--rule);padding:8px 10px;text-align:left;vertical-align:top}
.prose th{background:var(--pill)}
.prose blockquote{margin:0 0 1em;padding:10px 18px;border-left:4px solid var(--link);background:var(--pill);border-radius:0 var(--r-s) var(--r-s) 0}
.prose code{font-size:.9em;background:var(--pill);padding:1px 6px;border-radius:6px}
.prose pre{overflow-x:auto;background:var(--pill);padding:14px;border-radius:var(--r-s)}
.prose img{height:auto}
.prose li{margin-bottom:.35em}
.dl-main{font-size:1.0625rem;min-height:56px;padding:0 30px}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:1em 0}
.facts dt{font-weight:700}.facts dd{margin:0;overflow-wrap:anywhere}
.sha{font-size:.8125rem;line-height:1.4;word-break:break-all}
.play{display:inline-block;margin:8px 0 16px;text-decoration:none;border-radius:999px}
/* Nested panels inside the document panel: a lighter fill so they still read as one layer. */
.prose .install,.prose .card{background:var(--pill);box-shadow:inset 0 .5px 0 var(--hair)}
.install{margin-top:40px;padding:24px 20px}
@media (max-width:480px){.prose .install{padding:20px 14px;margin-left:-6px;margin-right:-6px}}
.prose .install-title{margin-top:0;font-size:clamp(1.75rem,6vw,2.25rem);line-height:1.1}
.install-part{margin-top:1.6em;padding-top:.8em;border-top:1px solid var(--rule);font-size:1.25rem}
.install-steps{padding-left:1.6em}
.install-steps li{margin-bottom:.7em;font-size:1.0625rem}
.install-steps li::marker{font-weight:700;color:var(--ink)}
.install-jump{font-weight:700}
.install-note{margin-top:1.4em;background:var(--pill);border-radius:var(--r-s);padding:12px 16px}
/* WS19: the "coming soon" notice is amber-tinted material with ink text, not text on a strong colour. */
.notice{background:rgba(242,180,0,.26);box-shadow:inset 0 0 0 1px rgba(160,110,0,.45);color:var(--ink);border-radius:var(--r-s);padding:12px 16px;font-weight:700;margin:16px 0}
@media (prefers-color-scheme:dark){.notice{background:rgba(242,180,0,.16);box-shadow:inset 0 0 0 1px rgba(242,180,0,.5)}}
.prose .card{margin:16px 0}
.prose .card h2{margin-top:0}
.prose .card .btn{margin-top:4px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.btn:active{transform:none}}