/*
  School Hub site — design system: Industrial (Dieter Rams / early Apple lineage)
  Type   IBM Plex Sans 400/500/600 · IBM Plex Mono 400/500 for labels and specs
         scale 64 / 40 / 24 / 17 / 15 · labels 12 mono uppercase
  Color  ink on paper, hairline rules; one functional accent (the app's blue) for the
         download marker and links only
  Grid   max 1200, 56px outer margin (16px on phones), 12 columns, sections divided by
         hairlines and numbered 01–05
  Rule   product-first: real screenshots are the imagery; facts go in spec tables
*/
:root {
  --paper: #f2f1ee; --surface: #fbfaf8; --ink: #1a1a1a; --text: #3f3d39; --muted: #6b6964; --label: #8a877f;
  --rule: #d6d4cf; --accent: #2563eb; --btn-ink: #f2f1ee;
  --sans: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --m: 56px; color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #151514; --surface: #1c1c1b; --ink: #ecebe7; --text: #c9c7c1; --muted: #9a978f; --label: #7d7a73; --rule: #2e2d2b; --accent: #5b8cff; --btn-ink: #151514; color-scheme: dark; }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; color: var(--ink); }
.wrap { max-width: 1312px; margin: 0 auto; padding: 0 var(--m); }
@media (max-width: 720px) { :root { --m: 16px; } body { font-size: 16px; } }

.lab { font: 500 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--label); }

/* header */
.bar { border-bottom: 1px solid var(--rule); background: var(--paper); position: sticky; top: 0; z-index: 5; }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.id { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 16px; color: var(--ink); }
.id:hover { text-decoration: none; }
.id img { width: 28px; height: 28px; border-radius: 7px; }
.bar nav { display: flex; gap: 30px; }
.bar nav a { font: 400 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bar nav a:hover, .bar nav a[aria-current] { color: var(--ink); text-decoration: none; }
@media (max-width: 720px) { .bar nav a:not(:last-child) { display: none; } }

/* the download control */
.dl { display: inline-flex; align-items: center; gap: 14px; background: var(--ink); color: var(--btn-ink); padding: 15px 22px; min-height: 48px; font: 500 15px var(--sans); border-radius: 2px; transition: opacity .15s; }
.dl:hover { text-decoration: none; opacity: .86; }
.dl i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; }
.dl.quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

/* spec table */
.spec { border-top: 1px solid var(--rule); margin: 0; }
.spec div { display: flex; justify-content: space-between; gap: 24px; padding: 10px 0; border-bottom: 1px solid var(--rule); font: 400 13px/1.4 var(--mono); color: var(--text); }
.spec dt { color: var(--muted); }
.spec dd { margin: 0; text-align: right; }

/* hero */
.hero { display: grid; grid-template-columns: 4fr 8fr; gap: 56px; padding: 72px 0 88px; align-items: start; }
.hero h1 { font-weight: 500; font-size: 64px; line-height: 1.0; letter-spacing: -.03em; margin: 16px 0 24px; }
.hero p { font-size: 17px; color: var(--text); margin: 0 0 32px; max-width: 32ch; }
.hero .alt { margin-top: 14px; font: 400 13px var(--mono); color: var(--muted); }
.hero .alt a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.hero .spec { margin-top: 44px; }
.shot { border-radius: 6px; box-shadow: 0 1px 1px rgba(0,0,0,.06), 0 30px 60px -22px rgba(0,0,0,.28); }
figure { margin: 0; }
figcaption { margin-top: 14px; font: 400 12px/1.4 var(--mono); color: var(--label); display: flex; gap: 14px; }
figcaption b { font-weight: 500; color: var(--muted); }
@media (max-width: 980px) { .hero { grid-template-columns: 1fr; gap: 40px; padding: 48px 0 56px; } .hero h1 { font-size: 46px; } }

/* numbered sections */
.sec { border-top: 1px solid var(--rule); padding: 72px 0 88px; }
.sec-head { display: grid; grid-template-columns: 4fr 8fr; gap: 56px; margin-bottom: 48px; align-items: end; }
.sec-head h2 { font-weight: 500; font-size: 40px; line-height: 1.08; letter-spacing: -.025em; margin: 14px 0 0; }
.sec-head p { margin: 0; color: var(--text); max-width: 56ch; }
.facts { display: grid; grid-template-columns: 4fr 8fr; gap: 56px; margin-top: 44px; }
.facts .list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; border-top: 1px solid var(--rule); }
.facts .list div { padding: 16px 0 18px; border-bottom: 1px solid var(--rule); }
.facts .list b { display: block; font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.facts .list span { font-size: 15px; color: var(--text); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 980px) {
  .sec { padding: 48px 0 56px; } .sec-head, .facts { grid-template-columns: 1fr; gap: 16px; } .sec-head h2 { font-size: 32px; }
  .facts .list, .pair { grid-template-columns: 1fr; }
}

/* closing download strip */
.get { border-top: 1px solid var(--ink); padding: 56px 0 64px; display: grid; grid-template-columns: 4fr 8fr; gap: 56px; align-items: center; }
.get h2 { font-weight: 500; font-size: 40px; letter-spacing: -.025em; margin: 12px 0 0; line-height: 1.05; }
.get .row { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.get .row a.plat { font: 400 13px var(--mono); color: var(--muted); }
@media (max-width: 980px) { .get { grid-template-columns: 1fr; gap: 24px; } }

footer { border-top: 1px solid var(--rule); padding: 28px 0 40px; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 32px; font: 400 12px/1.5 var(--mono); color: var(--label); }
footer a { color: var(--label); text-decoration: underline; text-underline-offset: 3px; }

/* download page */
.page-head { display: grid; grid-template-columns: 4fr 8fr; gap: 56px; padding: 72px 0 48px; align-items: end; }
.page-head h1 { font-weight: 500; font-size: 64px; line-height: 1; letter-spacing: -.03em; margin: 16px 0 0; }
.page-head p { margin: 0; color: var(--text); max-width: 52ch; }
@media (max-width: 980px) { .page-head { grid-template-columns: 1fr; gap: 16px; padding: 48px 0 32px; } .page-head h1 { font-size: 46px; } }
.platforms { border-top: 1px solid var(--ink); }
.plat-row { display: grid; grid-template-columns: 4fr 4fr 4fr; gap: 56px; padding: 32px 0 36px; border-bottom: 1px solid var(--rule); position: relative; }
.plat-row h2 { font-weight: 500; font-size: 32px; letter-spacing: -.02em; margin: 6px 0 0; line-height: 1.1; }
.plat-row .here { display: none; margin-top: 12px; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); align-items: center; gap: 8px; }
.plat-row .here::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.plat-row.mine .here { display: flex; }
.plat-row .files { display: grid; gap: 12px; align-content: start; }
.plat-row .files .note { font: 400 13px/1.5 var(--mono); color: var(--muted); }
.plat-row ol { margin: 0; padding-left: 20px; color: var(--text); font-size: 15px; display: grid; gap: 8px; }
.plat-row ol b { color: var(--ink); font-weight: 600; }
@media (max-width: 980px) { .plat-row { grid-template-columns: 1fr; gap: 18px; } }
code { font: 400 13px var(--mono); background: var(--surface); border: 1px solid var(--rule); padding: 1px 6px; border-radius: 3px; }

.qa { display: grid; grid-template-columns: 4fr 8fr; gap: 56px; }
.qa dl { margin: 0; border-top: 1px solid var(--rule); }
.qa dl div { padding: 18px 0 20px; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 1fr 1.6fr; gap: 32px; }
.qa dt { font-weight: 600; font-size: 15px; }
.qa dd { margin: 0; color: var(--text); font-size: 15px; }
@media (max-width: 980px) { .qa, .qa dl div { grid-template-columns: 1fr; gap: 8px; } }