/* OnlineExams landing front v4, "Rehearsed Properly". Standalone stylesheet, loaded only by
   app/views/layouts/landing_v4.html.erb. Ported from the approved mockup. Light only, by choice.
   Layout: the school week as the hero, then a calm reading column with margin notes and captioned figures. */
:root {
  color-scheme: light;
  --bg: #f6f7f5; --ink: #1c2422; --muted: #5a6662; --grid: #d3dbd7; --head: #eef2f0; --card: #ffffff; --sel: #f1f5f3;
  --gum: #2f6b58; --exam: #b8432f; --video-bg: #1b2220; --video-fg: #e8ece9;
  --maths: #2e5f9e; --sci: #2f7a4d; --tas: #a95a1c; --eng: #7a3f82; --hum: #836410;
  --display: "Schibsted Grotesk", "Helvetica Neue", system-ui, sans-serif;
  --body: "Literata", Georgia, serif;
  --note: "IBM Plex Sans Condensed", "Arial Narrow", system-ui, sans-serif;
  --line-c: var(--grid); --key-c: var(--gum); --field-bg: var(--card); --field-tint: var(--head);
  --player-bg: var(--head); --player-fg: var(--gum); --mark-bg: #f6e3b0;
  --g-grid: var(--grid); --g-axis: var(--ink); --g-line: var(--gum); --g-est: var(--exam);
}
* { box-sizing: border-box }
body { background: var(--bg); color: var(--ink); font: 400 1.1rem/1.7 var(--body); margin: 0; padding-inline: 20px }
.wrap { max-width: 1120px; margin: 0 auto }
header.top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: 26px; flex-wrap: wrap }
.brand { font: 800 1.15rem var(--display); letter-spacing: -.01em }
.top nav { display: flex; gap: 20px; font: 500 .95rem var(--display); flex-wrap: wrap }
a { color: var(--ink); text-underline-offset: 4px; text-decoration-color: var(--gum) }
a:focus-visible { outline: 3px solid var(--gum); outline-offset: 3px }
.btn { font: 700 1rem var(--display); background: var(--gum); color: var(--bg); padding: 13px 22px; border-radius: 5px; text-decoration: none; display: inline-block }
.row { display: grid; grid-template-columns: minmax(0, 680px) minmax(0, 260px); gap: 64px; padding-block: 36px }
.row > * { min-width: 0 }
.note { font: 500 .92rem/1.5 var(--note); color: var(--muted); border-left: 2px solid var(--gum); padding-left: 14px; align-self: start; margin-top: .4em }
.note b { color: var(--gum); display: block; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; font-size: .78rem; margin-bottom: 4px }
h1 { font: 800 clamp(2.3rem, 5.2vw, 4.1rem)/1.0 var(--display); letter-spacing: -.035em; margin: 18px 0 22px; text-wrap: balance }
h2 { font: 700 clamp(1.55rem, 2.8vw, 2.1rem)/1.15 var(--display); letter-spacing: -.02em; margin: 0 0 14px; text-wrap: balance }
h3 { font: 700 1.05rem/1.3 var(--display); margin: 0 0 4px }
p { margin: 0 0 1em }
.lede { font-size: 1.25rem; line-height: 1.55 }
.go { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 24px; font-family: var(--display) }
.hero { padding-block: 10px 30px }
hr { border: 0; border-top: 1px solid var(--grid); margin: 0 }
dl.list { margin: 18px 0 0 }
dl.list div { display: grid; grid-template-columns: 11em 1fr; gap: 20px; padding-block: 12px; border-top: 1px solid var(--grid) }
dl.list div > * { min-width: 0 }
dt { font: 700 1rem/1.5 var(--display) }
dd { margin: 0; font-size: 1.02rem }
figure { margin: 22px 0 0; background: var(--card); border: 1px solid var(--grid); border-radius: 8px; padding: 18px 20px 14px; font-family: var(--display); font-size: .95rem }
figcaption, .ia-cap { font: 500 .9rem/1.45 var(--note); color: var(--muted); margin-top: 12px }
figcaption b, .ia-cap b { color: var(--ink) }
.figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px }
.figs > * { min-width: 0 }
.eq, .keys span { font-family: var(--body) }
.wide { padding-block: 44px; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 48px; align-items: start }
.wide > * { min-width: 0 }
.wide figure { margin-top: 0 }
ol.steps { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: s }
ol.steps li { counter-increment: s; display: grid; grid-template-columns: 3.2em 7em 1fr; gap: 14px; padding-block: 12px; border-top: 1px solid var(--grid) }
ol.steps li > * { min-width: 0 }
ol.steps li::before { content: counter(s, decimal-leading-zero); font: 800 1rem var(--display); color: var(--gum) }
ol.steps b { font: 700 1rem var(--display) }
.faq summary { font-family: var(--display) }
.lead-form { font-family: var(--display) }
footer { font: 500 .85rem var(--note); color: var(--muted); padding-block: 36px 48px }
@media (max-width: 820px) {
  .row, .wide { grid-template-columns: 1fr; gap: 14px }
  .wide { gap: 24px }
  .note { margin-top: 0 }
  dl.list div { grid-template-columns: 1fr; gap: 2px }
  .figs { grid-template-columns: 1fr }
  ol.steps li { grid-template-columns: 2.4em 1fr } ol.steps li span { grid-column: 2 }
}
.vhd { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--grid); padding-bottom: 8px; margin-bottom: 12px; font-size: .95rem }
.pill { font: 700 .72rem var(--display); border-radius: 999px; padding: 3px 10px; background: var(--head); color: var(--muted); white-space: nowrap }
.vcap { font-size: .88rem; color: var(--muted); margin: 12px 0 0 }
.sit b, .ia-stats b { font-family: var(--display) }

.ia-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .95rem }
.ia-head span { color: var(--muted) }
.ia-stem { font-size: .98rem; margin: 10px 0 }
.ia-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px }
.ia-stats b { display: block; font-size: 1.35rem; font-variant-numeric: tabular-nums }
.ia-stats span { font-size: .78rem; color: var(--muted) }
.ia-scroll { overflow-x: auto }
.ia-t { border-collapse: collapse; width: 100%; min-width: 480px; font-size: .88rem }
.ia-t th, .ia-t td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line-c) }
.ia-t th { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
.ia-t .n, .sheet .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap }
.ia-t tr.key td { font-weight: 700; color: var(--key-c) }
.ia-cap { font-size: .9rem; color: var(--muted); margin: 12px 0 0 }
.ia-cap b { color: var(--ink) }
.q { font-size: .95rem; line-height: 1.5; margin: 0 0 10px }
.q .mk, .listen .mk { float: right; font-weight: 700; color: var(--muted); margin-left: 10px }
.tools { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap }
.tools span { font-size: .72rem; font-weight: 700; border: 1px solid var(--line-c); border-radius: 3px; padding: 3px 7px; color: var(--muted) }
.tools span.on { border-color: var(--g-line); color: var(--g-line) }
svg.graph { width: 100%; height: auto; display: block }
svg.graph text { fill: var(--muted); font-size: 10px; font-family: inherit }
.player { display: flex; align-items: center; gap: 10px; background: var(--player-bg); border-radius: 999px; padding: 8px 14px 8px 8px; margin: 10px 0 12px }
.player .play { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--player-fg); color: var(--player-bg); font-size: .8rem; flex: none }
.player .track { flex: 1; height: 5px; border-radius: 3px; background: var(--line-c); position: relative; min-width: 0 }
.player .done { position: absolute; inset: 0 63% 0 0; background: var(--player-fg); border-radius: 3px }
.player .time { font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap }
.listen .q { margin: 0 }
.opts { margin: 0; padding-left: 1.6em; display: grid; gap: 6px; font-size: .95rem }
.opts li { padding: 5px 8px; border: 1px solid var(--line-c); border-radius: 5px }
.opts li.picked { border-color: var(--player-fg); box-shadow: inset 0 0 0 1px var(--player-fg) }
.sit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px }
.sit div { border-top: 2px solid var(--key-c); padding-top: 6px; min-width: 0 }
.sit b { display: block; font-size: 1.5rem; font-variant-numeric: tabular-nums }
.sit span { font-size: .8rem; color: var(--muted) }
pre.code { margin: 0; font: 400 .82rem/1.5 ui-monospace, "SFMono-Regular", Menlo, monospace; background: var(--field-tint); border-radius: 4px; padding: 10px 12px; overflow-x: auto; color: var(--ink) }
pre.code .k { color: var(--key-c); font-weight: 700 } pre.code .c { color: var(--muted) }
.eq { font-size: 1.35rem; margin: 6px 0 10px; padding: 10px 14px; border: 1.5px solid var(--key-c); border-radius: 6px; display: inline-block; max-width: 100% }
.keys { display: flex; flex-wrap: wrap; gap: 6px }
.keys span { min-width: 38px; text-align: center; padding: 5px 8px; border: 1px solid var(--line-c); border-radius: 5px; background: var(--field-tint) }
.fx { display: flex; gap: 10px; align-items: center; font-size: .85rem; margin-bottom: 8px; min-width: 0 }
.fx span { font-weight: 700; color: var(--muted) }
.fx code { font: .85rem ui-monospace, Menlo, monospace; background: var(--field-tint); padding: 4px 8px; border-radius: 4px; overflow-x: auto; min-width: 0 }
.sheet { border-collapse: collapse; width: 100%; min-width: 360px; font-size: .86rem }
.sheet th, .sheet td { border: 1px solid var(--line-c); padding: 5px 8px; text-align: left }
.sheet thead th, .sheet tbody th { background: var(--field-tint); color: var(--muted); font-weight: 700; font-size: .75rem }
.sheet tr.sel td { font-weight: 700; box-shadow: inset 0 0 0 1px var(--key-c) }
.essay { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 12em); gap: 16px; font-size: .98rem }
.essay p { margin: 0 }
.essay mark { background: var(--mark-bg); color: inherit; padding: 0 2px }
.essay aside { font-size: .85rem; border-left: 2px solid var(--key-c); padding-left: 10px; color: var(--muted) }
.essay aside b { display: block; color: var(--key-c); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase }
.faq details { border-bottom: 1px solid var(--line-c); padding-block: 14px }
.faq summary { cursor: pointer; font-weight: 700 }
.faq summary:focus-visible { outline: 3px solid var(--key-c); outline-offset: 3px }
.faq details p { margin: 8px 0 0; max-width: 40em }
.lead-form { display: grid; gap: 6px; max-width: 420px; width: 100% }
.lead-form label { font-size: .85rem; font-weight: 700; margin-top: 6px }
.lead-form input { font: inherit; padding: 10px 12px; border: 1px solid var(--line-c); border-radius: 4px; background: var(--field-bg); color: inherit; width: 100% }
.lead-form input:focus-visible { outline: 3px solid var(--key-c); outline-offset: 1px }
.lead-form button { margin-top: 12px; border: 0; cursor: pointer; justify-self: start }
.lead-form .sent { font-size: .9rem; color: var(--muted); margin: 6px 0 0 }
@media (max-width: 560px) { .essay { grid-template-columns: 1fr } .sit b { font-size: 1.2rem } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important } }

.video { border-radius: 8px; overflow: hidden; background: var(--video-bg, #1b2220); color: var(--video-fg, #e8ece9) }
.video svg { display: block; width: 100%; height: auto }
.vcc { margin: 0; padding: 6px 12px; font-size: .85rem; text-align: center; background: var(--video-bg, #1b2220); color: var(--video-fg, #e8ece9) }
.vctl { display: flex; align-items: center; gap: 10px; padding: 8px 12px 10px }
.vctl .play { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--video-fg, #e8ece9); color: var(--video-bg, #1b2220); font-size: .7rem; flex: none }
.vctl .track { flex: 1; height: 4px; border-radius: 2px; background: rgba(232,236,233,.3); position: relative; min-width: 0 }
.vctl .done { position: absolute; inset: 0 60% 0 0; background: var(--video-fg, #e8ece9); border-radius: 2px }
.vctl .time { font-size: .78rem; font-variant-numeric: tabular-nums; white-space: nowrap }
.vctl .cc { font-size: .7rem; font-weight: 700; border: 1.5px solid var(--video-fg, #e8ece9); border-radius: 3px; padding: 0 4px }
.vsec { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px }
.vchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px }
.vchips span { font-size: .8rem; border: 1px solid var(--line-c); border-radius: 4px; padding: 4px 9px; color: var(--muted) }
.vchips span.on { border-color: var(--key-c); color: var(--key-c); font-weight: 700; box-shadow: inset 0 0 0 1px var(--key-c) }
.srcbox { border: 1px solid var(--line-c); border-radius: 6px; padding: 10px 12px; margin: 10px 0 }
.srclbl, .srcnote { margin: 0; font-size: .82rem; color: var(--muted) }
.srclbl { font-weight: 700; color: var(--ink) }
.srcbox .player { margin: 8px 0 }
.ans { border: 1px solid var(--line-c); border-radius: 6px; padding: 10px 12px; font-size: .92rem; background: var(--field-bg); position: relative }
.ans .wc { display: block; text-align: right; font-size: .75rem; color: var(--muted); margin-top: 6px }

.frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; font-size: .85em; line-height: 1.15; margin: 0 .12em }
.frac > span:first-child { border-bottom: 1.5px solid currentColor; padding: 0 .2em }
.eq.chem { font-size: 1.2rem }

.vinst { margin: 0 0 12px; font-size: .95rem }
.vcard { border: 1px solid var(--line-c); border-radius: 6px; padding: 10px 14px; margin-bottom: 8px; background: var(--field-tint) }
.vch, .vah { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap }
.vah { justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line-c); padding-bottom: 8px; margin-bottom: 10px }
.vlab { font-weight: 700 }
.vmk { font-size: .85rem; color: var(--muted) }
.vt { margin: 6px 0 8px; font-size: .85rem }
.vt summary { cursor: pointer }
.vt ul { margin: 6px 0 0; padding-left: 1.2em; color: var(--muted) }
.vbtn, .vback { font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; border-radius: 4px; padding: 5px 12px }
.vbtn { background: var(--key-c); color: var(--card, #fff); border: 0 }
.vback { background: transparent; color: var(--ink); border: 1px solid var(--line-c) }
.vbtn:focus-visible, .vback:focus-visible { outline: 3px solid var(--key-c); outline-offset: 2px }
.vstem { margin: 0 0 10px; font-size: .98rem }
.vans { color: var(--muted); min-height: 5em }
.keys .frac span { border: 0; min-width: 0; padding: 0 .2em; background: none; border-radius: 0 }
.keys .frac > span:first-child { border-bottom: 1.5px solid currentColor }

.vlist { font-size: .88rem }
.vinst { font-size: .88rem; margin-bottom: 8px }
.vcard { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 5px 10px; margin-bottom: 4px }
.vcl { min-width: 0 }
.vcard .vt { display: inline; margin: 0 0 0 8px; font-size: .78rem; color: var(--muted) }
.vcard .vt[open] { display: block; margin: 4px 0 2px }
.vcard .vt ul { font-size: .8rem }
.vcard .vmk { font-size: .78rem }
.vbtn { padding: 3px 10px; font-size: .78rem }

.vgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px }
.vgrid .vcard { margin: 0; white-space: nowrap }
.vgrid .vcl { overflow: hidden; text-overflow: ellipsis }
@media (max-width: 560px) { .vgrid { grid-template-columns: 1fr } }


.pill { font-family: var(--note) }
.eyebrow { font: 700 .8rem var(--note); letter-spacing: .1em; text-transform: uppercase; color: var(--gum); border-top: 3px solid var(--gum); padding-top: 10px; margin: 0 }
.figs figure { margin-top: 0 }
.lead-form .chk { display: flex; align-items: center; gap: 10px; font-weight: 500; margin-top: 10px }
.lead-form input[type=checkbox] { width: auto }
.zz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 56px; align-items: center; padding-block: 44px }
.zz > * { min-width: 0 }
.zz figure { margin-top: 0 } .zz figure + figure { margin-top: 16px }
.zz.flip { grid-template-columns: minmax(0, 380px) minmax(0, 1fr) } .zz.flip > .zt { order: 2 }
.zt .note { margin-top: 18px }
.zt h3 { font-size: 1.35rem; margin-bottom: 10px }
@media (max-width: 820px) { .zz, .zz.flip { grid-template-columns: 1fr; gap: 20px; padding-block: 32px } .zz.flip > .zt { order: 0 } }
.zf figure { font-size: .88rem; padding: 14px 16px 12px }
.types-sec { padding-block: 44px }
.types-lede { max-width: 40em }
.types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; align-items: start }
.types > * { min-width: 0 }
.types figure { margin-top: 0; font-size: .875rem; padding: 12px 14px 10px }
.types figcaption { font-size: .85rem }
.chips { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px }
.chips li { font: 500 .9rem var(--note); border: 1px solid var(--grid); border-radius: 999px; padding: 5px 12px; background: var(--card) }
@media (max-width: 900px) { .types { grid-template-columns: 1fr } }
.zz { gap: 72px; padding-block: 36px }
.zt { max-width: 34em }
.zf figure + figure { margin-top: 12px }
.zf pre.code { white-space: pre-wrap }
.zf .video svg { display: block; max-height: 150px; margin-inline: auto }
.row.hero { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); align-items: center }
.hero-fig { margin: 0; font-size: .9rem }
.hf-q { margin: 0 0 10px }
.hf-opts { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px }
.hf-opts li { border: 1px solid var(--grid); border-radius: 5px; padding: 6px 10px }
.hf-opts li.on { border-color: var(--gum); box-shadow: inset 0 0 0 1px var(--gum); font-weight: 700 }
.assure { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-block: 18px 30px; font: 500 .95rem/1.5 var(--note); color: var(--muted) }
.assure > * { min-width: 0; border-top: 2px solid var(--gum); padding-top: 10px }
.assure b { display: block; font: 700 1rem var(--display); color: var(--ink) }
.btn.ghost { background: transparent; color: var(--gum); box-shadow: inset 0 0 0 2px var(--gum) }
.btn:focus-visible { outline: 3px solid var(--exam); outline-offset: 3px }
.navbtn.ghost { background: none; color: var(--gum) !important; box-shadow: inset 0 0 0 1.5px var(--gum) }
.navbtn { background: var(--gum); color: var(--bg) !important; padding: 6px 14px; border-radius: 5px; text-decoration: none }
.tk { font: 700 1rem var(--display); margin: 0 0 8px }
@media (max-width: 820px) { .row.hero { grid-template-columns: 1fr } .assure { grid-template-columns: 1fr; gap: 14px } }
#results.zz.flip { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr) }
@media (max-width: 820px) { #results.zz.flip { grid-template-columns: 1fr } }
#sweec.zz.flip { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr) }
#sweec .zf { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 16px; align-items: start }
#sweec .zf figure + figure { margin-top: 0 }
#sciext.zz { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) }
#sciext .video svg { max-height: 150px }
@media (max-width: 820px) { #sweec.zz.flip, #sciext.zz { grid-template-columns: 1fr } #sweec .zf { grid-template-columns: 1fr } }
#sweec .sheet { font-size: .8rem }
#sciext .sx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 16px; align-items: start }
#sciext .sx .q .mk { float: none; display: block; margin: 0 0 4px }
#sciext.zz { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) }
#sweec .sheet { min-width: 0 }
@media (max-width: 820px) { #sciext .sx { grid-template-columns: 1fr } }
/* ---- replaces inline styles (CSP) and layout chrome ---------------------- */
.mt18 { margin-top: 18px }
.mt28 { margin-top: 28px }
svg.graph text.est { fill: var(--g-est); font-weight: 700 }
svg.graph text.trend { fill: var(--gum); font-weight: 600 }
.legend { font: 500 .8rem var(--note); color: var(--muted); margin: 0 0 4px }
.legend i { display: inline-block; width: 1.4em; vertical-align: middle; border-top: 2.5px solid var(--gum) }
.legend i.dash { border-top: 2px dashed var(--muted) }
.skip-link { position: absolute; top: -100%; left: 0; z-index: 9999; background: var(--gum); color: var(--bg); padding: .5rem 1rem; text-decoration: none; border-radius: 0 0 .4rem 0 }
.skip-link:focus { top: 0 }
.demo-banner { background: var(--mark-bg); color: #000; text-align: center; padding: 8px; font-family: system-ui, sans-serif; font-size: .78rem; margin-inline: -20px }
.lead-form .alert { font-size: .9rem; color: var(--exam); margin: 6px 0 0 }
.lead-form .ok { font-size: .95rem; color: var(--gum); font-weight: 700 }
main:focus { outline: none }