:root{
  --bg:#0b0f14; --bg-2:#10161e; --line:#222c38;
  --ink:#e8eef5; --ink-2:#aebccd; --muted:#7b8ca1;
  --accent:#6d8cff; --accent-ink:#050b1f;
  --torque:#f08a3e; --power:#3fc6e8; --bad:#e5643f;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 "Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent)}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}

header.site{border-bottom:1px solid var(--line);background:rgba(11,15,20,.92);position:sticky;top:0;z-index:20;backdrop-filter:blur(8px)}
.bar{display:flex;align-items:center;gap:18px;justify-content:space-between;padding-top:12px;padding-bottom:12px}
.bar > a{flex:none;display:block}
.bar img{height:26px;width:auto;max-width:none}
nav{display:flex;flex-wrap:wrap;gap:4px 22px}
nav a{color:var(--ink-2);text-decoration:none;font-size:14.5px;padding:12px 0}
nav a:hover{color:var(--ink)}

.hero{padding:60px 0 0}
.hero img.mark{height:60px;width:auto;margin-bottom:24px}
h1{font-size:42px;line-height:1.12;margin:0 0 16px;letter-spacing:-.015em;max-width:20ch}
.lede{font-size:19px;color:var(--ink-2);max-width:60ch;margin:0 0 28px}
.cta{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.btn{display:inline-block;padding:12px 24px;border-radius:4px;text-decoration:none;font-weight:600;font-size:15px;min-height:48px;line-height:24px;background:var(--accent);color:var(--accent-ink)}
.btn:hover{filter:brightness(1.08)}
.textlink{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1px solid var(--line);padding:12px 0 2px}
.textlink:hover{border-color:var(--ink)}
.note{font-size:13.5px;color:var(--muted);margin:14px 0 0}
.hero figure{margin:44px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

section{padding:64px 0;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:44px;align-items:center}
.row.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.row.flip .text{order:2}
.row figure{margin:0}
.row figure img{border:1px solid var(--line)}
.kicker{font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
h2{font-size:28px;line-height:1.2;margin:0 0 14px;letter-spacing:-.01em}
.text p{color:var(--ink-2);margin:0 0 14px}
.text ul{color:var(--ink-2);margin:0 0 14px;padding-left:20px}
.text li{margin:4px 0}
.text b{color:var(--ink);font-weight:600}

dl.readouts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:0;margin:18px 0 0;border-top:1px solid var(--line)}
dl.readouts div{padding:12px 14px 12px 0;border-bottom:1px solid var(--line)}
dl.readouts dt{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
dl.readouts dd{margin:2px 0 0;color:var(--ink);font-size:15px}

table.faults{width:100%;border-collapse:collapse;font-size:15px;margin-top:6px}
table.faults td{padding:9px 0;border-bottom:1px solid var(--line);vertical-align:top}
table.faults td:first-child{color:var(--ink);font-weight:600;width:42%;padding-right:16px}
table.faults td:last-child{color:var(--ink-2)}

.closing{background:var(--bg-2)}
.closing .text{max-width:64ch}

footer{border-top:1px solid var(--line);padding:34px 0 60px;color:var(--muted);font-size:14px}
footer a{color:var(--ink-2);text-decoration:none;margin-right:18px}
footer a:hover{color:var(--ink)}

.doc h1{font-size:30px}
.doc p,.doc li{color:var(--ink-2);max-width:74ch}
.doc h2{font-size:20px;margin-top:34px}
.doc .updated{color:var(--muted);font-size:14px}

@media (max-width:820px){
  .row,.row.flip{grid-template-columns:1fr;gap:26px}
  .row.flip .text{order:0}
}
@media (max-width:640px){
  h1{font-size:31px} .hero{padding:40px 0 0} .hero img.mark{height:42px}
  .lede{font-size:17px}
  section{padding:46px 0}
  h2{font-size:24px}
  nav{display:none}
  .bar img{height:22px}
}

/* 3D Learning Family band: same markup and wording on every family site; each site sets the four colours. */
.f3d{--f3d-ink:#eef2f6;--f3d-muted:#9aa6b2;--f3d-line:rgba(255,255,255,.12);--f3d-accent:#8fb8ff;display:grid;gap:18px;padding:0 0 26px;margin:0 0 26px;border-bottom:1px solid var(--f3d-line);font-size:14px;line-height:1.5;color:var(--f3d-muted);text-align:left;scroll-margin-top:90px}
.f3d h2{margin:0;font-size:15px;font-weight:700;letter-spacing:.01em;color:var(--f3d-ink)}
.f3d-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px}
.f3d-head p{margin:0;flex:1 1 280px}
.f3d a{text-decoration:none;margin:0}
.f3d-home{color:var(--f3d-ink);font-weight:600;white-space:nowrap;padding:12px 0}
.f3d-home:hover{color:var(--f3d-accent)}
.f3d-apps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px 28px}
.f3d-app{display:grid;grid-template-columns:32px 1fr;column-gap:12px;align-items:start;color:inherit;min-height:48px}
.f3d-app img{width:32px;height:32px;border-radius:8px;grid-row:1 / span 3;margin-top:2px}
.f3d-app b{color:var(--f3d-ink);font-weight:600;font-size:14px;line-height:1.3}
.f3d-app small{display:block;margin:0;font-size:13px;line-height:1.4}
.f3d-app i{font-style:normal;font-size:12px;opacity:.85}
a.f3d-app:hover b{color:var(--f3d-accent)}
.f3d-shop{margin:0;font-size:13px}
.f3d-shop a{color:var(--f3d-ink)}
.f3d-shop a:hover{color:var(--f3d-accent)}
.f3d{--f3d-ink:var(--ink);--f3d-muted:var(--muted);--f3d-line:var(--line);--f3d-accent:var(--accent)}