/* Lock in, marketing site. One stylesheet shared by every page: home, download, pricing, guides and subject pages. */
:root {
  --paper: #F4F5F2;      /* cool exam-paper white */
  --sheet: #FFFFFF;      /* index card / table surface */
  --sheet-2: #FAFAF8;    /* window chrome, quiet panels */
  --ink: #1A1C20;        /* graphite */
  --ink-2: #4B5058;      /* secondary text */
  --ink-3: #7A7F87;      /* tertiary text, meta */
  --rule: #D9DCD6;       /* ruled lines */
  --rule-soft: #E6E8E3;  /* hairlines inside surfaces */
  --biro: #2445D4;       /* ballpoint blue, the only accent */
  --biro-dark: #1A34A8;
  --biro-wash: #E9EDFB;  /* flat tint of the accent, for selected states */

  --display: "Schibsted Grotesk", system-ui, sans-serif;
  --body: "Atkinson Hyperlegible", system-ui, sans-serif;

  /* Spacing scale (4px base) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --section: clamp(88px, 11vw, 168px);

  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 48px);

  --hair: 1px solid var(--rule);
  --rule-strong: 2px solid var(--ink);

  --shadow-lift: 0 1px 0 rgb(26 28 32 / .04), 0 2px 6px -2px rgb(26 28 32 / .06), 0 30px 60px -32px rgb(26 28 32 / .28);
  --shadow-device: 0 1px 0 rgb(26 28 32 / .05), 0 4px 10px -4px rgb(26 28 32 / .08), 0 50px 90px -46px rgb(26 28 32 / .42);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; margin: 0; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--biro); color: #fff; }
.tnum { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 2px solid var(--biro); outline-offset: 3px; border-radius: 3px; }

.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 12px; z-index: 40; }
.skip:focus { left: 8px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* Inline text links: underline sits low and turns blue */
.terms a, .note a, .faq a, .text-link {
  color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: rgb(26 28 32 / .35); transition: color .15s, text-decoration-color .15s;
}
.terms a:hover, .note a:hover, .faq a:hover, .text-link:hover { color: var(--biro); text-decoration-color: var(--biro); }

/* ---------- Top nav ---------- */
.top { position: sticky; top: -12px; z-index: 30; border-bottom: var(--hair); background: var(--paper); view-transition-name: site-header;
  transition: background-color .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out); }
.top .wrap { transition: transform .5s var(--ease-out); }
/* Condensed: 12px of the bar slides above the viewport (sticky top:-12px), so nothing below it moves */
.top.is-condensed { background: rgb(244 245 242 / .86); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom-color: rgb(26 28 32 / .12); }
.top.is-condensed .wrap { transform: translateY(6px); }
.top.is-condensed .tabs a::after { transform: translateY(-6px); }
.top .wrap { display: flex; align-items: center; gap: 44px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 19px/1 var(--display); letter-spacing: -0.02em; }
.brand svg { width: 16px; height: 20px; margin-top: -2px; }
.tabs { display: flex; gap: 30px; }
.tabs a { position: relative; display: block; padding: 23px 0 21px; text-decoration: none; color: var(--ink-2); font-size: 16px; transition: color .2s; }
.tabs a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--biro); transform-origin: left; scale: 0 1; transition: scale .45s var(--ease-out), transform .5s var(--ease-out); }
.tabs a:hover::after { scale: 1 1; background: var(--rule); }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--ink); }
.tabs a[aria-current="page"]::after { scale: 1 1; background: var(--biro); }
.top .open { margin-left: auto; }

/* "More": a small index card that drops from the tab row (Parents, FAQ, About) */
.tabs { align-items: center; }
.more { position: relative; }
.more-btn { position: relative; display: flex; align-items: center; gap: 7px; padding: 23px 0 21px; border: 0; background: none; cursor: pointer;
  font: 400 16px/1.6 var(--body); color: var(--ink-2); transition: color .2s; }
.more-btn svg { width: 10px; height: 10px; transition: rotate .35s var(--ease-out); }
.more-btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rule); transform-origin: left; scale: 0 1; transition: scale .45s var(--ease-out), transform .5s var(--ease-out); }
.more-btn:hover, .more.is-open .more-btn { color: var(--ink); }
.more-btn:hover::after { scale: 1 1; }
.more-btn.is-current { color: var(--ink); }
.more-btn.is-current::after { scale: 1 1; background: var(--biro); }
.more.is-open .more-btn svg { rotate: 180deg; }
.top.is-condensed .more-btn::after { transform: translateY(-6px); }
.more-menu { position: absolute; top: calc(100% - 4px); left: -14px; z-index: 2; width: 296px; padding: 6px;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow-lift);
  opacity: 0; visibility: hidden; translate: 0 -6px; transition: opacity .18s, translate .3s var(--ease-out), visibility 0s linear .3s; }
.more.is-open .more-menu,
.top:not(.nav-ready) .more:hover .more-menu,
.top:not(.nav-ready) .more:focus-within .more-menu { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .18s, translate .3s var(--ease-out), visibility 0s; }
.tabs .more-menu a { padding: 10px 12px 11px; border-radius: 9px; color: var(--ink); font: 600 16px/1.25 var(--display); letter-spacing: -0.01em; transition: background-color .15s, color .15s; }
.tabs .more-menu a::after { content: none; }
.more-menu a span { display: block; margin-top: 2px; font: 400 14px/1.4 var(--body); letter-spacing: 0; color: var(--ink-3); }
.tabs .more-menu a:hover, .tabs .more-menu a:focus-visible { background: var(--paper); }
.tabs .more-menu a:focus-visible { outline-offset: -2px; }
.tabs .more-menu a[aria-current="page"] { color: var(--biro); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px;
  font: 600 16px/1 var(--display); letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  border-radius: 8px; border: 1px solid var(--ink);
  background: transparent; color: var(--ink);
  transition: background-color .15s, color .15s, border-color .15s, box-shadow .4s var(--ease-out), scale .12s var(--ease-out);
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:active { scale: .97; }
.btn-primary { background: var(--biro); border-color: var(--biro); color: #fff; box-shadow: inset 0 -1px 0 rgb(0 0 0 / .18); }
.btn-primary:hover { background: var(--biro-dark); border-color: var(--biro-dark); color: #fff; }
.btn-small { min-height: 38px; padding: 0 16px; font-size: 15px; }
.btn-large { min-height: 52px; padding: 0 26px; font-size: 17px; border-radius: 10px; }
.btn-inverse { border-color: rgb(244 245 242 / .38); color: var(--paper); }
.btn-inverse:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn-inverse:focus-visible, .cta-band .btn-primary:focus-visible { outline-color: #9DB0FF; }

/* ---------- Page heads (Download, Pricing) ---------- */
.page-head { padding: clamp(56px, 9vw, 120px) 0 clamp(36px, 5vw, 64px); }
.page-head h1 { font-size: clamp(44px, 7vw, 88px); line-height: 1; letter-spacing: -0.045em; max-width: 13ch; }
.page-head p { margin-top: var(--s5); font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 46ch; }

/* ---------- Home: hero ---------- */
.hero { position: relative; display: flex; align-items: center; min-height: clamp(620px, calc(100svh - 68px), 920px); padding: clamp(40px, 6vw, 80px) 0; isolation: isolate; }
.hero-inner { position: relative; z-index: 1; width: 100%; pointer-events: none; }
.hero-copy { pointer-events: auto; max-width: min(640px, 52%); }
.hero h1 { font-size: clamp(52px, 8vw, 124px); line-height: .94; letter-spacing: -0.052em; font-weight: 600; margin-left: -0.04em; }
.hero-copy > p:not(.hero-note) { margin-top: var(--s6); font-size: clamp(18px, 1.5vw, 20px); line-height: 1.55; color: var(--ink-2); max-width: 36ch; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.hero-note { margin-top: var(--s5); font-size: 15px; color: var(--ink-3); display: flex; align-items: center; gap: 10px; }
.hero-note::before { content: ""; width: 18px; height: 1px; background: var(--ink-3); }
/* The 3D scene fills the whole hero, edge to edge; its floor is the page's own paper colour */
.hero-art { position: absolute; inset: 0; z-index: 0; }
/* objects that reach the bottom edge fade out instead of being cut (the floor is page-coloured, so only they change) */
.hero-art.live { -webkit-mask: linear-gradient(#000 84%, transparent); mask: linear-gradient(#000 84%, transparent); }
.hero-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s var(--ease-out); }
.hero-art.live canvas { opacity: 1; }
.hero-art.live .still { opacity: 0; transition: none; }
.hero-art .still { left: 50%; right: 4%; }

/* Static fallback: three index cards, drawn in CSS */
.still { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .4s ease; }
.still .card {
  position: absolute; width: 68%; aspect-ratio: 5 / 3;
  background: var(--sheet); border: 1px solid #E4E6E1;
  box-shadow: 0 1px 0 rgba(26,28,32,.04), 0 18px 30px -18px rgba(26,28,32,.28);
}
.still .card:nth-child(1) { transform: translate(6%, 10%) rotate(7deg); }
.still .card:nth-child(2) { transform: translate(-3%, 4%) rotate(-4deg); }
.still .card:nth-child(3) { transform: translate(0, -4%) rotate(-11deg); padding: 7% 7% 0;
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(16.5% - 1px), #E3E6EC calc(16.5% - 1px) 16.5%);
  background-position: 0 30%;
}
.still .card:nth-child(3)::before { content: ""; position: absolute; left: 0; right: 0; top: 24%; height: 2px; background: var(--biro); opacity: .8; }
.still .q { position: relative; font: 500 clamp(14px, 1.9vw, 22px)/1.25 var(--display); letter-spacing: -0.01em; color: var(--ink); max-width: 20ch; }

/* ==========================================================
   Device frames and the app UI inside them.
   Everything inside a frame is sized in em, from a font size
   tied to the frame's own width, so the shot scales as one.
   ========================================================== */
.device-browser {
  container-type: inline-size;
  background: var(--sheet); border: 1px solid #D3D6D0; border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow-device);
}
.chrome { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: clamp(28px, 3.4cqw, 44px); padding: 0 clamp(10px, 1.4cqw, 18px);
  background: var(--sheet-2); border-bottom: 1px solid var(--rule-soft); font-size: clamp(9px, 1.05cqw, 13px); color: var(--ink-3); }
.chrome .dots { display: flex; gap: .55em; }
.chrome .dots i { width: .9em; height: .9em; border-radius: 50%; background: #DCDFD9; }
.chrome .url { display: inline-flex; align-items: center; gap: .5em; padding: .3em 1.1em; background: var(--paper); border-radius: 6px; font-variant-numeric: tabular-nums; }
.chrome .url svg { width: .7em; height: .85em; color: var(--ink-3); }

.ui { font-size: clamp(6px, 1.18cqw, 15px); line-height: 1.4; color: var(--ink); }
.ui h4 { font: 600 1.15em/1.2 var(--display); letter-spacing: -0.01em; }
.ui small { display: block; font-size: .92em; color: var(--ink-3); }
.ui-nav { display: flex; align-items: center; gap: 2.2em; height: 4.2em; padding: 0 2.4em; border-bottom: 1px solid var(--rule-soft); }
.ui-logo { display: inline-flex; align-items: center; gap: .55em; font: 600 1.2em/1 var(--display); letter-spacing: -0.02em; }
.ui-logo svg { width: .75em; height: .95em; }
.ui-tabs { display: flex; gap: 1.8em; color: var(--ink-2); }
.ui-tabs .on { color: var(--ink); font-weight: 700; box-shadow: 0 calc(1.5em + 1px) 0 -.1em var(--biro); }
.ui-year { margin-left: auto; padding: .35em .8em; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink-2); font-size: .92em; }
.ui-btn { display: inline-flex; align-items: center; height: 2.6em; padding: 0 1.15em; border-radius: .5em; border: 1px solid var(--ink); font: 600 1em/1 var(--display); white-space: nowrap; }
.ui-btn.pri { background: var(--biro); border-color: var(--biro); color: #fff; }

.ui-body { display: grid; grid-template-columns: 1.3fr 1fr; }
.ui-next { grid-row: span 2; padding: 2.6em 2.4em 2.4em; border-right: 1px solid var(--rule-soft); display: flex; flex-direction: column; }
.ui-subj { margin-top: .5em; font: 600 1.7em/1.1 var(--display); letter-spacing: -0.02em; }
.ui-days { display: flex; align-items: baseline; gap: .3em; margin-top: .2em; font-family: var(--display); }
.ui-days b { font-size: 8.4em; line-height: .9; font-weight: 600; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; color: var(--biro); }
.ui-days span { font-size: 2em; font-weight: 500; letter-spacing: -0.02em; }
.ui-topics { margin-top: 1.2em; color: var(--ink-2); max-width: 34ch; }
.ui-btns { display: flex; gap: .7em; margin-top: auto; padding-top: 2.2em; }

.ui-ready { padding: 2.4em 2.4em 1.8em; border-bottom: 1px solid var(--rule-soft); }
.ui-ready ul { margin-top: 1.2em; display: grid; gap: .95em; }
.ui-ready li { display: grid; grid-template-columns: 6.4em 1fr 2.8em; align-items: center; gap: 1em; }
.ui-ready i { position: relative; height: .5em; background: var(--rule-soft); border-radius: 99px; overflow: hidden; }
.ui-ready i b { position: absolute; inset: 0; background: var(--ink); border-radius: inherit; transform-origin: left; transform: scaleX(var(--v)); }
.ui-ready li.hot i b { background: var(--biro); }
.ui-ready li.hot span, .ui-ready li.hot em { font-weight: 700; }
.ui-ready em { font-style: normal; text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.ui-today { padding: 2em 2.4em 2.4em; }
.ui-today ul { margin-top: 1em; display: grid; }
.ui-today li { display: grid; grid-template-columns: 1.15em 1fr auto; align-items: center; gap: .9em; padding: .7em 0; border-bottom: 1px solid var(--rule-soft); }
.ui-today li:last-child { border-bottom: 0; }
.ui-today i { width: 1.15em; height: 1.15em; border: 1.5px solid var(--ink-3); border-radius: .3em; }
.ui-today li.done i { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; border-color: var(--ink); }
.ui-today li.done span { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-3); }
.ui-today em { font-style: normal; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* Narrow frames: drop the extra tabs and stack the panels */
@container (max-width: 520px) {
  .ui { font-size: 2.55cqw; }
  .ui-nav { padding: 0 1.6em; gap: 1.4em; }
  .ui-tabs .opt { display: none; }
  .ui-body { grid-template-columns: 1fr; }
  .ui-next { grid-row: auto; border-right: 0; border-bottom: 1px solid var(--rule-soft); padding: 2em 1.6em; }
  .ui-days b { font-size: 6.4em; }
  .ui-ready { padding: 1.8em 1.6em; }
  .ui-today { display: none; }
}

/* Phone */
.device-phone {
  container-type: inline-size;
  width: min(330px, 100%); aspect-ratio: 9 / 19; padding: 11px;
  background: var(--ink); border-radius: 50px;
  box-shadow: inset 0 0 0 1.5px #3A3D44, var(--shadow-device);
}
.phone-screen { height: 100%; border-radius: 40px; background: var(--sheet); overflow: hidden; display: flex; flex-direction: column;
  font-size: 4.8cqw; line-height: 1.4; padding: 0 1.25em 1.3em; }
.ph-status { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 3em; font: 600 .9em/1 var(--display); }
.ph-island { width: 6.2em; height: 1.8em; border-radius: 99px; background: var(--ink); }
.ph-icons { justify-self: end; display: flex; gap: .35em; }
.ph-icons i { width: 1.1em; height: .65em; border-radius: .2em; background: var(--ink); }
.ph-icons i:first-child { width: .9em; background: none; border: 1.5px solid var(--ink); border-top: 0; border-radius: 0 0 .2em .2em; height: .55em; margin-top: .1em; }
.ph-bar { display: flex; justify-content: space-between; margin-top: .6em; font-size: .86em; color: var(--ink-3); }

/* ---------- Home: product stage ---------- */
.stage-wrap { padding: clamp(8px, 2vw, 24px) 0 var(--section); }
.stage { position: relative; margin: 0; transform-origin: 50% 100%; transform-style: preserve-3d; padding-right: 8%; }
/* The phone floats in front of the browser window, so the two separate in depth as the stage turns */
.stage-phone { position: absolute; right: 0; bottom: -6%; width: 23%; padding: 8px; border-radius: 38px; transform: translateZ(90px); }
.stage-phone .phone-screen { border-radius: 31px; }
.ph-progress { margin-top: .6em; height: .3em; border-radius: 9px; background: var(--rule-soft); overflow: hidden; }
.ph-progress i { display: block; height: 100%; width: 29%; background: var(--ink); }
.ph-card { position: relative; margin-top: 1.4em; padding: 1.2em 1.1em 2.6em; border: 1px solid var(--rule); border-radius: .8em; background: var(--sheet) repeating-linear-gradient(to bottom, transparent 0 calc(1.9em - 1px), #E3E6EC calc(1.9em - 1px) 1.9em) 0 3.3em / 100% 100% no-repeat;
  box-shadow: 0 .8em 1.6em -1em rgb(26 28 32 / .3); }
.ph-card::before { content: ""; position: absolute; left: 0; right: 0; top: 2.6em; height: 2px; background: var(--biro); opacity: .8; }
.ph-card small { display: block; font-size: .8em; color: var(--ink-3); margin-bottom: 1.1em; }
.ph-card p { font: 500 1.12em/1.7 var(--display); letter-spacing: -0.01em; }
.ph-hint { margin-top: .9em; text-align: center; font-size: .8em; color: var(--ink-3); }

/* ---------- Home: features ---------- */
.section-h { font-size: clamp(34px, 4.8vw, 64px); line-height: 1.02; letter-spacing: -0.04em; max-width: 17ch; }
.features { padding-bottom: var(--section); }
.features .section-h { padding-bottom: clamp(48px, 6vw, 88px); }
.feature { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: center; padding: clamp(56px, 7vw, 104px) 0; border-top: var(--hair); }
.feature h2 { font-size: clamp(28px, 3.1vw, 40px); line-height: 1.06; letter-spacing: -0.03em; }
.feature-text p { margin-top: var(--s4); color: var(--ink-2); max-width: 40ch; font-size: 18px; }
.feature-text .aside { margin-top: var(--s4); font-size: 15px; color: var(--ink-3); max-width: 44ch; }

/* Each row is laid out for its own content, not a repeated template */
.f-flash .feature-text { grid-column: 1 / span 4; }
.f-flash .specimen { grid-column: 6 / span 7; }
.f-exam { padding-block: clamp(40px, 5vw, 72px); }
.f-exam .specimen { grid-column: 1 / span 5; display: grid; place-items: center; padding: clamp(32px, 4vw, 56px) 0; background: var(--sheet-2); border: 1px solid var(--rule-soft); border-radius: 20px; }
.f-exam .feature-text { grid-column: 7 / span 5; }
.f-mark .feature-text { grid-column: 1 / span 4; align-self: start; }
.f-mark .specimen { grid-column: 6 / span 7; }
.f-plan { align-items: end; row-gap: clamp(40px, 5vw, 64px); }
.f-plan .feature-text { grid-column: 1 / span 6; }
.f-plan .specimen { grid-column: 1 / -1; }

/* Flashcard */
.deck-meta { display: flex; justify-content: space-between; font-size: 15px; color: var(--ink-3); margin-bottom: var(--s3); }
.flash { display: grid; grid-template-columns: 1fr 1fr; background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--shadow-lift); }
.flash > div { padding: 26px 26px 30px; min-height: 190px; }
.flash > div:first-child { border-radius: 12px 0 0 12px; }
.flash > div + div { border-left: 1px solid var(--rule); }
.flash small, .mark small { display: block; font-size: 14px; color: var(--ink-3); margin-bottom: 10px; }
.flash b { font: 500 21px/1.3 var(--display); letter-spacing: -0.012em; }
.flash .back { color: var(--ink-2); font-size: 17px; }
.deck-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: var(--s4); font-size: 15px; }
.deck-actions .ui-btn { height: 40px; padding: 0 16px; border-radius: 8px; }

/* Practice exam, inside the phone */
.timer { display: flex; align-items: baseline; justify-content: space-between; gap: .5em; margin-top: .9em; padding-bottom: .5em; border-bottom: 2px solid var(--ink); }
.timer .clock { font: 600 3.4em/1 var(--display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.timer > span:last-child { color: var(--ink-3); font-size: .9em; }
.timer-meta { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding-top: .55em; font-size: .82em; color: var(--ink-2); }
.timer-meta .bar { flex: 0 0 40%; height: .32em; background: var(--rule-soft); border-radius: 9px; position: relative; overflow: hidden; }
.timer-meta .bar i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(.47); }
.ph-q { margin-top: 1.3em; }
.ph-q small { display: block; font-size: .8em; color: var(--ink-3); margin-bottom: .3em; }
.ph-q p { font: 500 1.06em/1.35 var(--display); letter-spacing: -0.01em; }
.ph-q em, .ph-work em { font-style: italic; }
.ph-work { margin-top: 1em; display: grid; font-size: .92em; color: var(--ink-2);
  background: repeating-linear-gradient(to bottom, transparent 0 calc(2em - 1px), #E3E6EC calc(2em - 1px) 2em); }
.ph-work span { line-height: 2em; padding-left: .2em; }
.ph-work span:last-child { color: var(--biro); font-weight: 700; }
.ph-foot { display: flex; justify-content: space-between; gap: .5em; margin-top: auto; font-size: .82em; }

/* AI marking */
.mark { background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; padding: 28px; box-shadow: var(--shadow-lift); }
.mark-q { font: 500 19px/1.35 var(--display); letter-spacing: -0.01em; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--rule-soft); }
.mark-q span { color: var(--ink-3); font: 400 16px var(--body); }
.mark .ans { position: relative; font-size: 17px; color: var(--ink-2); padding: 0 48px 20px 0; border-bottom: 1px solid var(--rule-soft); }
/* Ballpoint marks, as a teacher would make them */
.mark svg { position: absolute; fill: none; stroke: var(--biro); stroke-linecap: round; stroke-linejoin: round; overflow: visible; pointer-events: none; }
.mark .tick { right: 4px; top: 30px; width: 26px; height: 20px; stroke-width: 2.4; }
.mark .ring { left: -11px; top: -11px; width: calc(100% + 22px); height: calc(100% + 20px); stroke-width: 1.7; }
.mark .fb { display: grid; grid-template-columns: auto 1fr; gap: 20px; padding-top: 20px; align-items: start; }
.mark .score { position: relative; font: 600 34px/1 var(--display); letter-spacing: -0.03em; color: var(--biro); white-space: nowrap; }
.mark .fb p { font-size: 17px; }

/* Exam countdown: a ruler of the next 30 days */
.ruler { position: relative; padding-top: 0; }
.ruler-ticks { height: 40px; border-top: var(--rule-strong); transform-origin: left;
  background:
    repeating-linear-gradient(to right, var(--ink) 0 1.5px, transparent 1.5px calc(100% / 6)) 0 0 / 100% 18px no-repeat,
    repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px calc(100% / 30)) 0 0 / 100% 10px no-repeat; }
.ruler-marks { position: relative; height: 92px; }
.ruler-marks li { position: absolute; top: 0; left: calc(var(--at) * 100%); padding: 14px 0 0 12px; border-left: 1px solid var(--ink); height: 100%; white-space: nowrap; }
.ruler-marks li.end { padding: 14px 12px 0 0; border-left: 0; border-right: 1px solid var(--ink); translate: -100% 0; text-align: right; }
.ruler-marks b { display: block; font: 600 clamp(18px, 1.8vw, 24px)/1.15 var(--display); letter-spacing: -0.02em; }
.ruler-marks span { display: block; margin-top: 2px; font-size: 15px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ruler-marks li.next { border-left: 2px solid var(--biro); }
.ruler-marks li.next b, .ruler-marks li.next span { color: var(--biro); }
.ruler-marks li.next span { font-weight: 700; }
.ruler-marks li.today { border-left-style: dashed; border-left-color: var(--ink-3); }
.ruler-marks li.today b { color: var(--ink-2); }

/* ---------- Home: how it works ---------- */
.how { padding: var(--section) 0; background: var(--sheet); border-top: var(--hair); border-bottom: var(--hair); }
.steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); margin-top: clamp(48px, 6vw, 88px); counter-reset: step; }
.steps li { position: relative; padding-top: var(--s6); border-top: var(--hair); }
.steps li::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 2px; background: var(--ink); transform-origin: left; transform: scaleX(var(--draw, 1)); }
.steps .n { display: block; font: 500 clamp(88px, 10vw, 152px)/.8 var(--display); letter-spacing: -0.06em; color: var(--ink); font-variant-numeric: tabular-nums; margin-left: -0.06em; }
.steps h3 { margin-top: clamp(32px, 4vw, 56px); font-size: clamp(21px, 1.9vw, 26px); line-height: 1.18; letter-spacing: -0.022em; max-width: 18ch; }
.steps p { margin-top: var(--s3); color: var(--ink-2); max-width: 34ch; }

/* Each step has an object lying on the desk, seen from above at an angle */
.obj { height: clamp(170px, 16vw, 230px); perspective: 1100px; perspective-origin: 30% 0; margin-bottom: var(--s6); }
.desk { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(54deg) rotateZ(-16deg); transform-origin: 40% 60%; }
.paper { position: absolute; left: 8%; top: 18%; width: 64%; aspect-ratio: 5 / 3; padding: 7% 8%; background: var(--sheet); border: 1px solid #E1E3DE; border-radius: 6px;
  box-shadow: 0 1px 0 rgb(26 28 32 / .04), 14px 22px 26px -14px rgb(26 28 32 / .32); transform-style: preserve-3d; font-size: clamp(10px, .95vw, 13px); }
.paper small { display: block; color: var(--ink-3); font-size: .95em; margin-bottom: .6em; }
.p-year span { display: inline-flex; align-items: center; height: 2.3em; padding: 0 1em; margin-right: .5em; border: 1px solid var(--rule); border-radius: .5em; font: 600 1.1em/1 var(--display); color: var(--ink-2); }
.p-year span.on { border-color: var(--biro); background: var(--biro-wash); color: var(--biro); }
.p-card { background: var(--sheet) repeating-linear-gradient(to bottom, transparent 0 calc(1.7em - 1px), #E3E6EC calc(1.7em - 1px) 1.7em) 0 3.6em / 100% 100% no-repeat; }
.p-card.c1::before { content: ""; position: absolute; left: 0; right: 0; top: 2.9em; height: 2px; background: var(--biro); opacity: .8; }
.p-card b { display: block; margin-top: 1.4em; font: 600 1.25em/1.5 var(--display); letter-spacing: -0.01em; }
html:not(.motion) .p-card.c2 { transform: translateZ(-1px) rotateZ(-7deg) translate(-4%, 6%); }
html:not(.motion) .p-card.c3 { transform: translateZ(-2px) rotateZ(-14deg) translate(-8%, 13%); }
.p-sheet { width: 50%; aspect-ratio: 3 / 4; top: 2%; left: 10%; padding: 7%; }
.p-sheet i { display: block; height: 2px; margin-top: 1.1em; background: var(--rule-soft); border-radius: 2px; }
.p-sheet i:nth-of-type(2) { width: 82%; } .p-sheet i:nth-of-type(4) { width: 64%; }
.p-sheet b { position: absolute; right: 9%; bottom: 8%; font: 600 1.9em/1 var(--display); letter-spacing: -0.03em; color: var(--biro); padding: .25em .35em; border: 2px solid var(--biro); border-radius: 50%; rotate: -6deg; }
.watch { position: absolute; left: 60%; top: 36%; width: 28%; aspect-ratio: 1; border-radius: 50%; background: var(--sheet); border: .45em solid var(--ink); font-size: clamp(9px, .8vw, 11px);
  box-shadow: 12px 18px 22px -12px rgb(26 28 32 / .38); transform: translateZ(6px); }
.watch::before { content: ""; position: absolute; left: 50%; top: -1.3em; width: 1.4em; height: .9em; margin-left: -.7em; border-radius: .25em .25em 0 0; background: var(--ink); }
.watch .hand { position: absolute; left: 50%; top: 14%; width: 2px; height: 36%; margin-left: -1px; background: var(--biro); transform-origin: 50% 100%; transform: rotate(var(--hand, 220deg)); border-radius: 2px; }
.watch::after { content: ""; position: absolute; left: 50%; top: 50%; width: .6em; height: .6em; margin: -.3em; border-radius: 50%; background: var(--ink); }

/* ---------- Home: final call to action ---------- */
.cta-band { background: var(--ink); color: var(--paper); padding: var(--section) 0 clamp(72px, 9vw, 128px); }
.cta-band .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 24px; align-items: end; }
.cta-band .wrap { align-items: center; }
.cta-band h2 { grid-column: 1 / span 7; grid-row: 1; align-self: end; font-size: clamp(44px, 7vw, 108px); line-height: .95; letter-spacing: -0.05em; font-weight: 600; max-width: 10ch; }
.cta-side { grid-column: 1 / span 6; grid-row: 2; align-self: start; }
.cta-side p { color: #B9BDC4; font-size: 17px; max-width: 40ch; }
.cta-side p.cta-subjects { color: var(--paper); font: 500 clamp(19px, 1.6vw, 22px)/1.35 var(--display); letter-spacing: -0.01em; margin-bottom: var(--s3); max-width: 30ch; }
.lock-art { grid-column: 8 / span 5; grid-row: 1 / span 2; position: relative; width: 100%; aspect-ratio: 1; max-width: 520px; justify-self: center; }
.lock-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .8s var(--ease-out); }
.lock-art.live canvas { opacity: 1; }
.lock-still { position: absolute; left: 32%; top: 24%; width: 36%; height: auto; transition: opacity .4s; }
.lock-art.live .lock-still { opacity: 0; }
.cta-side .actions { margin-top: var(--s5); }

/* ---------- Download ---------- */
.dl-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: center; }
.dl-head .page-head { grid-column: 1 / span 5; }
.devices { grid-column: 6 / span 7; margin-right: calc(-1 * min(4vw, 48px)); position: relative; padding: 40px 0 56px; }
.devices { perspective: 1800px; transform-style: preserve-3d; }
.devices .device-browser { width: 92%; transform: rotateY(-14deg) rotateX(7deg); transform-origin: 20% 50%; }
.devices .device-phone { position: absolute; right: -2%; bottom: 0; width: 26%; padding: 6px; border-radius: 30px; transform: translateZ(150px) rotateY(-8deg); }
.devices .phone-screen { border-radius: 24px; }

.options { width: 100%; border-collapse: collapse; border-top: var(--rule-strong); }
.options th, .options td { text-align: left; vertical-align: middle; padding: 28px 16px 28px 0; border-bottom: var(--hair); }
.options th { width: 30%; }
.os { display: flex; align-items: center; gap: 16px; font: 600 24px/1.2 var(--display); letter-spacing: -0.02em; }
.os svg { flex: none; width: 40px; height: 40px; padding: 9px; border: 1px solid var(--rule); border-radius: 10px; background: var(--sheet); color: var(--ink); }
.options td { color: var(--ink-2); }
.options td b { display: block; color: var(--ink); font-weight: 700; }
.options td:last-child { text-align: right; padding-right: 0; width: 1%; white-space: nowrap; }
.note { margin-top: var(--s5); color: var(--ink-2); }

.terminal { margin-top: clamp(64px, 9vw, 112px); padding: clamp(32px, 4vw, 48px); margin-bottom: var(--section); background: var(--sheet); border: var(--hair); border-radius: 16px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px 24px; align-items: center; }
.terminal h2 { grid-column: 1 / span 5; font-size: 26px; letter-spacing: -0.02em; }
.terminal > p { grid-column: 1 / span 5; color: var(--ink-2); max-width: 46ch; }
.terminal .code, .terminal .err { grid-column: 7 / span 6; }
.terminal .code { grid-row: 1 / span 2; }
.code { display: flex; align-items: stretch; background: var(--ink); color: #E9EBE7; border-radius: 10px; overflow: hidden; }
.code pre { margin: 0; flex: 1; min-width: 0; overflow-x: auto; padding: 18px 20px; font: 400 15px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.code pre::before { content: "$ "; color: #8A9099; }
.code button { flex: none; border: 0; border-left: 1px solid #383C43; background: transparent; color: #E9EBE7; font: 600 15px/1 var(--display); padding: 0 22px; cursor: pointer; transition: background-color .15s; }
.code button:hover { background: #2A2D33; }
.code button:focus-visible { outline-offset: -4px; outline-color: #9DB0FF; }

/* ---------- Pricing: liquid-glass passes ---------- */
.lg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.glass-stage { position: relative; isolation: isolate; --gpad: clamp(24px, 4vw, 56px); padding: var(--gpad) 0; }
/* Something worth refracting: flat shapes in the site's own colours drift behind the glass.
   They are clipped to the area of the passes, so the only place they show sharp is the gap between the panes. */
.glass-bg { position: absolute; inset: var(--gpad) 0; z-index: -1; pointer-events: none; overflow: hidden; border-radius: 30px; }
.gb { position: absolute; display: block; will-change: transform; }
.gb-disc { width: clamp(240px, 26vw, 360px); aspect-ratio: 1; border-radius: 50%; background: var(--biro); left: calc(50% - clamp(120px, 13vw, 180px)); top: 18%; }
.gb-slab { width: clamp(180px, 18vw, 260px); aspect-ratio: 16 / 10; border-radius: 22px; background: var(--ink); right: 4%; bottom: -14%; rotate: -12deg; }
.gb-card { width: clamp(200px, 20vw, 300px); aspect-ratio: 5 / 3; border-radius: 10px; left: 6%; top: -12%; rotate: 9deg; border: 1px solid #D3D6D0;
  background: var(--sheet) repeating-linear-gradient(to bottom, transparent 0 23px, #DCE0E7 23px 24px) 0 52px / 100% 100% no-repeat; }
.gb-card::before { content: ""; position: absolute; left: 0; right: 0; top: 40px; height: 2px; background: var(--biro); }

.plans { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 32px); }
.plan { position: relative; display: flex; flex-direction: column; padding: clamp(28px, 3.2vw, 44px); }
.plan h2 { font-size: 26px; letter-spacing: -0.02em; }
.price { margin-top: 20px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.price strong { font: 600 clamp(64px, 8vw, 104px)/.9 var(--display); letter-spacing: -0.055em; font-variant-numeric: tabular-nums; }
.price span { color: #3A3E45; font-size: 16px; font-variant-numeric: tabular-nums; }
.price s { text-decoration-thickness: 1px; }
.plan p.what { margin-top: 20px; color: #3A3E45; max-width: 34ch; flex: 1; }
.plan .btn { margin-top: 28px; align-self: flex-start; min-height: 52px; padding: 0 26px; border-radius: 14px; }
.err { min-height: 1.6em; margin-top: 10px !important; font-size: 15px; color: #B3261E; }
.terms { margin-top: 20px; color: var(--ink-2); }
.terms + .terms { margin-top: 4px; }

/* The glass itself. Layers: frosted, refracting backdrop; a rim of light; a specular highlight that follows the pointer */
.glass {
  --mx: 30%; --my: 0%; --spec: .55;
  border-radius: 30px;
  background: rgb(255 255 255 / .9);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .95),
    inset 0 0 0 1px rgb(255 255 255 / .55),
    inset 2px 0 2px -1px rgb(36 69 212 / .16),
    inset -2px 0 2px -1px rgb(196 112 84 / .12),
    0 1px 0 rgb(26 28 32 / .04),
    0 2px 6px -2px rgb(26 28 32 / .08),
    0 40px 70px -36px rgb(26 28 32 / .38);
  outline: 1px solid rgb(26 28 32 / .06); outline-offset: -1px;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgb(255 255 255 / .56); -webkit-backdrop-filter: blur(20px) saturate(185%); backdrop-filter: blur(20px) saturate(185%); }
  /* Chromium can refract through an SVG displacement map as well */
  .lg-svg .glass { backdrop-filter: url(#lg-refract) blur(12px) saturate(185%); }
}
.glass::before, .glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
/* specular: a soft white hotspot where the light (the pointer) is */
.glass::before { background: radial-gradient(120% 90% at var(--mx) var(--my), rgb(255 255 255 / var(--spec)), rgb(255 255 255 / 0) 46%); mix-blend-mode: soft-light; }
/* rim light: the same hotspot, but only on a 1.5px ring at the edge */
.glass::after { padding: 1.5px; background: radial-gradient(70% 70% at var(--mx) var(--my), rgb(255 255 255 / 1), rgb(255 255 255 / .15) 60%);
  -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); }
.glass > * { position: relative; z-index: 1; }
/* The recommended pass: thicker, blue-tinted glass */
.glass.is-best {
  background: rgb(236 240 253 / .94);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 1),
    inset 0 0 0 1.5px rgb(255 255 255 / .7),
    inset 0 -18px 30px -22px rgb(36 69 212 / .45),
    inset 3px 0 3px -2px rgb(36 69 212 / .24),
    inset -3px 0 3px -2px rgb(196 112 84 / .14),
    0 1px 0 rgb(26 28 32 / .04),
    0 4px 10px -4px rgb(26 28 32 / .1),
    0 50px 90px -40px rgb(26 34 90 / .5);
  outline-color: rgb(36 69 212 / .14);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass.is-best { background: rgb(232 237 253 / .6); -webkit-backdrop-filter: blur(28px) saturate(200%); backdrop-filter: blur(28px) saturate(200%); }
  .lg-svg .glass.is-best { backdrop-filter: url(#lg-refract) blur(22px) saturate(200%); }
}
.glass.is-best::after { padding: 2px; }
.plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.best { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 99px; font-size: 14px; font-weight: 700; color: var(--biro);
  background: rgb(255 255 255 / .7); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgb(36 69 212 / .18); }

/* Glass buttons */
.btn-glass { border-color: rgb(255 255 255 / .9); background: rgb(255 255 255 / .62); color: var(--ink);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgb(26 28 32 / .06), 0 0 0 1px rgb(26 28 32 / .12), 0 8px 18px -10px rgb(26 28 32 / .35);
  transition: background-color .2s, box-shadow .3s var(--ease-out), scale .14s var(--ease-out); }
.btn-glass:hover { background: rgb(255 255 255 / .92); color: var(--ink); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgb(26 28 32 / .2), 0 12px 22px -12px rgb(26 28 32 / .4); }
.btn-glass:active, .plan .btn-primary:active { scale: .96; box-shadow: inset 0 2px 6px rgb(26 28 32 / .18), 0 0 0 1px rgb(26 28 32 / .14); }
.plan .btn-primary { box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), inset 0 -2px 0 rgb(0 0 0 / .18), 0 12px 24px -12px rgb(36 69 212 / .7); }

.compare-sec { padding-top: clamp(72px, 9vw, 120px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.compare-sec h2 { grid-column: 1 / span 4; font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -0.03em; line-height: 1.05; }
.compare-sec > p { grid-column: 1 / span 4; color: var(--ink-2); max-width: 32ch; }
.compare { grid-column: 6 / span 7; grid-row: 1 / span 3; width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.compare th, .compare td { padding: 15px 0; border-bottom: var(--hair); text-align: left; font-weight: 400; }
.compare thead th { font: 600 17px/1.2 var(--display); letter-spacing: -0.01em; border-bottom: var(--rule-strong); padding-top: 0; }
.compare td { width: 22%; text-align: center; color: var(--ink); }
.compare thead th:not(:first-child) { text-align: center; }
.compare tbody th { color: var(--ink-2); }
.compare .yes { display: inline-block; width: 18px; height: 14px; vertical-align: middle; color: var(--biro); }
.compare tr.strong th, .compare tr.strong td { font-weight: 700; color: var(--ink); }

.faq { padding: clamp(72px, 9vw, 120px) 0 var(--section); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.faq h2 { grid-column: 1 / span 4; font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -0.03em; line-height: 1.05; }
.faq dl { grid-column: 6 / span 7; margin: 0; border-top: var(--rule-strong); }
.faq dt { font: 600 19px/1.3 var(--display); letter-spacing: -0.01em; padding-top: 24px; }
.faq dd { margin: 8px 0 0; color: var(--ink-2); padding-bottom: 24px; border-bottom: var(--hair); }

/* ---------- Footer ---------- */
.foot { border-top: var(--hair); }
.foot .wrap { display: grid; grid-template-columns: 1fr auto; gap: 40px 24px; padding-top: clamp(40px, 5vw, 64px); padding-bottom: 32px; font-size: 15px; color: var(--ink-3); }
.foot-brand .brand { font-size: 22px; color: var(--ink); }
.foot-brand .brand svg { width: 18px; height: 22px; }
.foot-brand p { margin-top: var(--s3); color: var(--ink-2); }
.foot-nav { display: grid; grid-template-columns: repeat(3, auto); gap: 28px clamp(36px, 6vw, 96px); align-self: start; }
.foot-h { font: 400 14px/1.3 var(--body); letter-spacing: 0; color: var(--ink-3); margin-bottom: 10px; }
.foot-nav ul { display: grid; gap: 4px; }
.foot nav a { text-decoration: none; color: var(--ink-2); font-size: 16px; padding: 4px 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: color .15s, background-size .35s var(--ease-out); }
.foot nav a:hover { color: var(--ink); background-size: 100% 1px; }
.foot-legal { grid-column: 1 / -1; padding-top: 24px; border-top: var(--hair); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.foot-legal a { color: inherit; text-underline-offset: 3px; text-decoration-color: rgb(122 127 135 / .5); }
.foot-legal a:hover { color: var(--biro); }
.is-home .foot-h { color: #8E939B; }
.is-home .foot-legal a:hover { color: var(--paper); }
/* Home ends on graphite: the call to action runs straight into the footer */
.is-home .foot { background: var(--ink); border-top: 0; color: #8E939B; }
.is-home .foot .wrap { padding-top: 0; }
.is-home .foot-brand .brand, .is-home .foot nav a:hover { color: var(--paper); }
.is-home .foot-brand p, .is-home .foot nav a { color: #B9BDC4; }
.is-home .foot-legal { border-top-color: #33363C; }
.is-home .foot-brand { padding-top: 40px; border-top: 1px solid #33363C; grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px 24px; }
.is-home .foot-brand p { margin: 0; }
.is-home .foot nav { grid-column: 1 / -1; grid-row: 2; }
.is-home .foot .brand:focus-visible, .is-home .foot nav a:focus-visible { outline-color: #9DB0FF; }

/* ---------- Narrow screens ---------- */
@media (max-width: 1020px) {
  .dl-head .page-head { grid-column: 1 / -1; padding-bottom: 8px; }
  .devices { grid-column: 1 / -1; padding: 8px 0 clamp(48px, 7vw, 72px); }
  .devices .device-browser { width: 88%; }
  .cta-side { grid-column: 1 / span 7; }
  .compare-sec h2, .compare-sec > p { grid-column: 1 / -1; }
  .compare { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 860px) {
  .hero { flex-direction: column; align-items: stretch; min-height: 0; padding-bottom: 0; }
  .hero-copy { max-width: 640px; }
  .hero-art { position: relative; inset: auto; order: 2; width: 100%; aspect-ratio: 1 / 1; max-height: 560px; margin-top: 8px; }
  .hero-art .still { left: 8%; right: 8%; }
  .feature { grid-template-columns: 1fr; gap: 32px; }
  .feature > * { grid-column: 1 !important; }
  .f-exam .specimen { order: 2; }
  .f-mark .feature-text { align-self: auto; }
  .steps { grid-template-columns: 1fr; gap: 48px; }
  .steps .n { font-size: 88px; }
  .obj { height: 200px; max-width: 360px; }
  .steps h3 { margin-top: 24px; }
  .faq { grid-template-columns: 1fr; }
  .faq h2, .faq dl { grid-column: 1; }
  .terminal { grid-template-columns: 1fr; }
  .terminal > * { grid-column: 1 !important; grid-row: auto !important; }
  .cta-band h2, .cta-side { grid-column: 1 / -1; grid-row: auto; }
  .lock-art { grid-column: 1 / -1; grid-row: auto; max-width: 340px; justify-self: start; margin: -24px 0 -24px -6%; }
}
@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .hero h1 { font-size: clamp(48px, 14.5vw, 64px); }
  .actions .btn-large { flex: 1 1 auto; }
  .plans { grid-template-columns: 1fr; }
  .plan { padding: 28px 24px; }
  .gb-disc { left: auto; right: -20%; top: 34%; width: 260px; }
  .gb-slab { right: auto; left: -14%; bottom: 6%; width: 180px; }
  .gb-card { left: auto; right: -10%; top: -4%; width: 190px; }
  .options, .options tbody, .options tr, .options th, .options td { display: block; width: auto; }
  .options tr { padding: 24px 0; border-bottom: var(--hair); }
  .options th, .options td { border: 0; padding: 0; }
  .options td { margin-top: 12px; }
  .options td:last-child { text-align: left; margin-top: 16px; }
  .options td:last-child .btn { width: 100%; }
  .flash { grid-template-columns: 1fr; }
  .flash > div + div { border-left: 0; border-top: 1px solid var(--rule); }
  .flash > div:first-child { border-radius: 12px 12px 0 0; }
  .flash > div { min-height: 0; }
  .deck-actions { justify-content: stretch; }
  .deck-actions .ui-btn { flex: 1; justify-content: center; }
  .mark { padding: 20px; }
  .ruler-ticks { display: none; }
  .ruler-marks { height: auto; border-top: var(--rule-strong); }
  .ruler-marks li, .ruler-marks li.end { position: relative; left: auto; translate: none; text-align: left; height: auto; display: flex; justify-content: space-between; align-items: baseline;
    padding: 14px 0; border: 0; border-bottom: var(--hair); }
  .ruler-marks li.next, .ruler-marks li.today { border-left: 0; }
  .ruler-marks span { margin: 0; }
  .f-exam .specimen { padding: 28px 0; }
  .device-phone { width: min(300px, 86%); }
  .devices .device-browser { width: 100%; }
  .devices .device-phone { display: none; }
  .stage { padding-right: 0; }
  .stage-phone { width: 34%; right: -2%; bottom: -10%; padding: 5px; border-radius: 26px; }
  .stage-phone .phone-screen { border-radius: 21px; }
  .stage-wrap { padding-bottom: calc(var(--section) + 24px); }
  .foot .wrap { grid-template-columns: 1fr; }
  .foot-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .code pre { white-space: pre-wrap; word-break: break-all; }
  .compare td { width: 26%; }
}
/* Narrow: the tabs take their own rows under the logo, and "More" opens out into plain tabs */
@media (max-width: 780px) {
  .top .wrap { flex-wrap: wrap; height: auto; gap: 0 16px; padding-top: 14px; }
  .top nav { order: 3; width: 100%; margin-top: 4px; }
  /* one swipeable row; it fades at the edge so it reads as "more this way" */
  .tabs { flex-wrap: nowrap; gap: 0 22px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 44px 0 var(--gutter);
    -webkit-mask: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs li { flex: none; }
  .tabs a { padding: 10px 0 9px; white-space: nowrap; }
  .more, .more-menu { display: contents; }
  .more-btn { display: none; }
  .more-menu { opacity: 1; visibility: visible; }
  .tabs .more-menu a { padding: 10px 0 9px; border-radius: 0; color: var(--ink-2); font: 400 16px/1.6 var(--body); letter-spacing: 0; background: none; }
  .tabs .more-menu a::after { content: ""; }
  .tabs .more-menu a:hover { background: none; color: var(--ink); }
  .tabs .more-menu a[aria-current="page"] { color: var(--ink); }
  .more-menu a span { display: none; }
  .top { position: relative; top: auto; }
  .top.is-condensed { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .top.is-condensed .wrap, .top.is-condensed .tabs a::after { transform: none; }
}

/* ---------- Home: pricing ---------- */
.home-pricing { padding: var(--section) 0; scroll-margin-top: 40px; }
.home-pricing h2#price-h { font-size: clamp(36px, 5vw, 68px); line-height: 1.02; letter-spacing: -0.042em; max-width: 14ch; }
.home-pricing h2#price-h:focus { outline: none; }
.home-pricing .lede { margin: var(--s5) 0 clamp(16px, 2vw, 24px); font-size: 19px; color: var(--ink-2); max-width: 50ch; }

/* ---------- Home: buy bar ---------- */
.buybar {
  position: fixed; z-index: 25; left: 50%; bottom: 20px; translate: -50% 0;
  display: flex; align-items: center; gap: 20px; padding: 8px 8px 8px 20px;
  border-radius: 18px;
  font-size: 16px; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums;
  transform: translateY(calc(100% + 40px)); visibility: hidden;
  transition: transform .6s var(--ease-out), visibility 0s linear .6s;
}
.buybar.glass { position: fixed; }
.buybar > * { position: relative; z-index: 1; }
.buybar.is-shown { transform: none; visibility: visible; transition: transform .6s var(--ease-out), visibility 0s; }
.buybar[hidden] { display: none; }
.buybar strong { color: var(--ink); font-weight: 700; }
.buybar .close { flex: none; width: 38px; height: 38px; display: grid; place-items: center; margin-left: -8px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-3); cursor: pointer; transition: color .15s, background-color .15s; }
.buybar .close:hover { color: var(--ink); background: var(--paper); }
.buybar .close svg { width: 14px; height: 14px; }
@media (max-width: 640px) {
  .buybar { left: 0; right: 0; bottom: 0; translate: none; border-radius: 0; border-width: 1px 0 0; gap: 12px;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); justify-content: space-between; white-space: normal; font-size: 15px; line-height: 1.3; }
  .buybar span { flex: 1; min-width: 0; }
  .buybar .close { margin-left: -6px; }
  .home-pricing .plan-head { justify-content: flex-start; gap: 14px; }
}

/* ---------- Home: why it's different ---------- */
.diff { padding: 0 0 var(--section); }
.diff .section-h { max-width: 16ch; }
.diff-lede { margin-top: var(--s5); font-size: 19px; color: var(--ink-2); max-width: 52ch; }
.diff-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); margin-top: clamp(40px, 5vw, 72px); border-top: var(--rule-strong); }
.diff-grid > div { padding: 28px 0 32px; border-bottom: var(--hair); }
.diff-grid h3 { font-size: clamp(21px, 1.9vw, 26px); line-height: 1.18; letter-spacing: -0.022em; }
.diff-grid p { margin-top: var(--s3); color: var(--ink-2); max-width: 44ch; }
.diff-grid .aside { font-size: 15px; color: var(--ink-3); }
.diff-more { margin-top: var(--s6); color: var(--ink-2); }

/* ---------- Home: free day row under the passes ---------- */
.freeday { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin: clamp(28px, 3vw, 40px) 0 0; padding: 22px 0; border-top: var(--hair); border-bottom: var(--hair); }
.freeday p { color: var(--ink-2); max-width: 54ch; }
.freeday b { color: var(--ink); }

/* ---------- Guides and subject pages ---------- */
.crumbs { padding-top: clamp(28px, 4vw, 48px); font-size: 15px; color: var(--ink-3); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--rule); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--biro); }
.crumbs + .page-head { padding-top: clamp(24px, 4vw, 48px); }
.doc .page-head h1 { font-size: clamp(40px, 6vw, 76px); line-height: 1.02; letter-spacing: -0.042em; max-width: 17ch; }
.doc .page-head p { max-width: 54ch; }
.doc .page-head .actions { margin-top: 32px; }
.doc-sec { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding: clamp(48px, 6vw, 80px) 0; border-top: var(--hair); }
.doc-sec > h2 { grid-column: 1 / span 4; font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.03em; line-height: 1.08; max-width: 14ch; }
.doc-sec > .body { grid-column: 6 / span 7; min-width: 0; }
.body > p, .body > ul, .body > ol { color: var(--ink-2); max-width: 64ch; }
.body > * + * { margin-top: var(--s4); }
.body > h3 { margin-top: var(--s6); font-size: 21px; line-height: 1.2; letter-spacing: -0.02em; }
.body > h3:first-child { margin-top: 0; }
.body ul.ticks li { position: relative; padding-left: 26px; margin-top: 10px; }
.body ul.ticks li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 12px; height: 2px; background: var(--biro); }
.body strong { color: var(--ink); }
.body a:not(.btn) { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgb(26 28 32 / .35); }
.body a:not(.btn):hover { color: var(--biro); text-decoration-color: var(--biro); }
.note-small { font-size: 15px; color: var(--ink-3) !important; }

/* Topic list: one ruled row per unit */
.topics { border-top: var(--rule-strong); }
.topics li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 4px 24px; padding: 16px 0; border-bottom: var(--hair); }
.topics b { font: 600 17px/1.35 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.topics span { color: var(--ink-2); font-size: 16px; }

/* Sample questions, set like index cards */
.qs { counter-reset: q; }
.q-card { position: relative; padding: 22px 24px 20px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; }
.q-card + .q-card { margin-top: 16px; }
.q-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-size: 14px; color: var(--ink-3); padding-bottom: 12px; margin-bottom: 14px; border-bottom: 2px solid rgb(36 69 212 / .75); }
.q-text { font: 500 18px/1.55 var(--display); letter-spacing: -0.008em; color: var(--ink); }
.q-passage { margin: 12px 0 0; padding: 12px 16px; border-left: 2px solid var(--rule); color: var(--ink-2); font-size: 16px; }
.q-opts { margin-top: 14px; display: grid; gap: 6px; }
.q-opts li { display: flex; gap: 12px; color: var(--ink-2); }
.q-opts li i { font-style: normal; font-weight: 700; color: var(--ink-3); min-width: 1.2em; }
.q-card details { margin-top: 16px; border-top: 1px solid var(--rule-soft); padding-top: 12px; }
.q-card summary { cursor: pointer; font: 600 15px/1.4 var(--display); color: var(--biro); list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; }
.q-card summary::-webkit-details-marker { display: none; }
.q-card summary::before { content: "+"; display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 13px; line-height: 1; }
.q-card details[open] summary::before { content: "−"; }
.q-ans { margin-top: 10px; color: var(--ink-2); }
.q-ans p + p, .q-ans p + ul, .q-ans ul + p { margin-top: 10px; }
.q-ans b.lbl { color: var(--ink); }
.q-ans ul { padding-left: 0; }
.q-ans ul li { position: relative; padding-left: 20px; margin-top: 6px; }
.q-ans ul li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 8px; height: 2px; background: var(--ink-3); }
/* App-style maths: powers and stacked fractions */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
sup.pow { font-size: .72em; line-height: 0; }
.frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; font-size: .86em; line-height: 1.15; margin: 0 .12em; }
.frac .num { border-bottom: 1px solid currentColor; padding: 0 .15em; }
.frac .den { padding: 0 .15em; }

/* Subjects hub: one block per year */
.years { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); }
.year-block { padding: 24px 0 28px; border-top: var(--rule-strong); }
.year-block h2 { font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.03em; }
.year-block ul { margin-top: 12px; }
.year-block li { border-bottom: var(--hair); }
.year-block li a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 0; text-decoration: none; color: var(--ink); font: 600 18px/1.3 var(--display); letter-spacing: -0.01em; }
.year-block li a span { font: 400 15px/1.3 var(--body); color: var(--ink-3); }
.year-block li a:hover { color: var(--biro); }

/* Closing call to action on guide pages: a plain card, not the home band */
.doc-cta { margin: clamp(24px, 4vw, 48px) 0 var(--section); padding: clamp(32px, 5vw, 56px); background: var(--sheet); border: 1px solid var(--rule); border-radius: 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; }
.doc-cta h2 { font-size: clamp(30px, 4vw, 52px); line-height: 1.02; letter-spacing: -0.04em; max-width: 15ch; }
.doc-cta p { margin-top: var(--s4); color: var(--ink-2); max-width: 50ch; }
.doc-cta .actions { margin-top: 0; }
.doc .faq { padding-bottom: clamp(48px, 6vw, 80px); border-top: var(--hair); }

@media (max-width: 860px) {
  .diff-grid { grid-template-columns: 1fr; }
  .doc-sec { grid-template-columns: 1fr; gap: 20px; }
  .doc-sec > h2, .doc-sec > .body { grid-column: 1; }
  .doc-cta { grid-template-columns: 1fr; }
  .years { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .topics li { grid-template-columns: 1fr; }
  .q-card { padding: 18px 16px 16px; }
  .q-text { font-size: 17px; }
  .freeday .btn { width: 100%; }
  .doc-cta .actions .btn { flex: 1 1 auto; }
  .doc .actions .btn-large { white-space: normal; text-align: center; padding-block: 12px; } /* long course names, e.g. "Try Year 12 Business Studies free for a day" */
}

/* ---------- Home: what's inside (subjects by year) ---------- */
.inside { padding: 0 0 var(--section); }
.inside-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; }
.inside-head .section-h { grid-column: 1 / span 7; max-width: 15ch; }
.inside-head p { grid-column: 8 / span 5; color: var(--ink-2); font-size: 18px; max-width: 40ch; }
.inside-grid { width: 100%; margin-top: clamp(36px, 4.5vw, 64px); border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.inside-grid thead th { padding: 0 0 12px; border-bottom: var(--rule-strong); font: 600 17px/1.2 var(--display); letter-spacing: -0.01em; text-align: left; }
.inside-grid thead th:first-child { width: 28%; }
.inside-grid tbody th { padding: 0; border-bottom: var(--hair); font: 600 clamp(18px, 1.7vw, 22px)/1.2 var(--display); letter-spacing: -0.015em; text-align: left; }
.inside-grid td { padding: 0; border-bottom: var(--hair); }
.inside-grid td a, .inside-grid td span { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 12px 0 0; text-decoration: none; color: var(--ink-2); font-size: 16px; }
.inside-grid td a svg { flex: none; width: 15px; height: 12px; color: var(--biro); }
.inside-grid td a:hover { color: var(--biro); }
.inside-grid td a:hover b { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.inside-grid td a b { font-weight: 400; }
.inside-grid td span { color: var(--ink-3); }
.inside-grid tbody tr { transition: background-color .15s; }
.inside-foot { margin-top: var(--s5); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; color: var(--ink-3); font-size: 15px; }
.inside-foot a { color: var(--ink); }
.inside-foot a:hover { color: var(--biro); }
.features-more { margin-top: clamp(40px, 5vw, 64px); padding-top: var(--s5); border-top: var(--hair); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.features-more p { color: var(--ink-2); max-width: 56ch; }

/* ---------- Your notes into a study guide (home, features, its own page) ---------- */
.notes { padding: 0 0 var(--section); }
.notes-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px 24px; align-items: end; }
.notes-head h2 { grid-column: 1 / span 8; font-size: clamp(34px, 4.8vw, 64px); line-height: 1.02; letter-spacing: -0.04em; max-width: 18ch; }
.notes-head .notes-copy { grid-column: 1 / span 6; }
.notes-head .notes-copy p { color: var(--ink-2); font-size: 18px; max-width: 48ch; }
.notes-head .notes-copy p + p { margin-top: var(--s3); }
.notes-head .notes-copy .aside { font-size: 15px; color: var(--ink-3); }
.notes-head .actions { grid-column: 1 / span 6; margin-top: 4px; }
.n2g { display: grid; grid-template-columns: minmax(0, 5fr) 64px minmax(0, 7fr); align-items: center; margin-top: clamp(40px, 5vw, 72px); }
.n2g-in { position: relative; }
.drop-zone { position: relative; display: grid; place-items: center; gap: 18px; min-height: clamp(280px, 30vw, 380px); padding: 32px 24px; border: 1.5px dashed #B9BDC4; border-radius: 18px; background: var(--sheet-2); text-align: center; }
.drop-zone p { color: var(--ink-3); font-size: 15px; max-width: 26ch; }
.file { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; align-items: center; width: min(300px, 100%); padding: 16px 18px; text-align: left; background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--shadow-lift); rotate: -3deg; }
.file-ic { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 48px; border-radius: 6px; background: var(--biro-wash); color: var(--biro); font: 700 12px/1 var(--body); position: relative; }
.file-ic::after { content: ""; position: absolute; right: 0; top: 0; border-width: 0 10px 10px 0; border-style: solid; border-color: var(--paper) var(--paper) #C9D2F5 #C9D2F5; border-radius: 0 6px 0 2px; }
.file b { font: 600 16px/1.25 var(--display); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file small { color: var(--ink-3); font-size: 14px; }
.file-2 { position: absolute; left: 50%; top: 50%; translate: -50% calc(-50% - 82px); rotate: 4deg; opacity: .55; width: min(260px, 86%); }
.n2g-arrow { position: relative; height: 2px; margin: 0 10px; background: var(--ink); }
.n2g-arrow::after { content: ""; position: absolute; right: -2px; top: -5px; width: 10px; height: 10px; border-top: 2px solid var(--ink); border-right: 2px solid var(--ink); rotate: 45deg; }
.n2g-out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.g-card { padding: 18px 20px 20px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--shadow-lift); font-size: 15px; }
.g-card small { display: block; color: var(--ink-3); font-size: 13px; margin-bottom: 8px; }
.g-card b { display: block; font: 600 17px/1.3 var(--display); letter-spacing: -0.01em; }
.g-card > span { display: block; margin-top: 8px; color: var(--ink-2); }
.g-guide { grid-row: span 2; }
.g-guide b + ul { margin-top: 10px; }
.g-guide ul li { position: relative; padding-left: 16px; margin-top: 6px; color: var(--ink-2); line-height: 1.45; }
.g-guide ul li::before { content: ""; position: absolute; left: 1px; top: .62em; width: 8px; height: 2px; background: var(--biro); }
.g-guide .g-sec { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule-soft); }
.g-flash b { padding-bottom: 10px; border-bottom: 2px solid rgb(36 69 212 / .8); }
.g-mcq ol { margin-top: 10px; display: grid; gap: 6px; }
.g-mcq li { display: flex; gap: 8px; align-items: baseline; color: var(--ink-2); }
.g-mcq li i { flex: none; width: 1.5em; font-style: normal; font-weight: 700; color: var(--ink-3); }
.g-mcq li.on { color: var(--biro); font-weight: 700; }
.g-mcq li.on i { color: var(--biro); }
.g-short { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: end; }
.g-short > span { grid-column: 1; }
.g-short em { grid-row: 1 / span 3; grid-column: 2; font: 600 13px/1.3 var(--body); font-style: normal; color: var(--biro); padding: 6px 10px; border: 1px solid rgb(36 69 212 / .25); border-radius: 99px; white-space: nowrap; }
.notes-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); margin-top: clamp(40px, 5vw, 64px); counter-reset: ns; }
.notes-steps li { counter-increment: ns; position: relative; padding: 18px 0 20px 44px; border-top: var(--rule-strong); }
.notes-steps li::before { content: counter(ns); position: absolute; left: 0; top: 16px; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font: 600 15px/1 var(--display); }
.notes-steps b { display: block; font: 600 19px/1.25 var(--display); letter-spacing: -0.015em; }
.notes-steps span { display: block; margin-top: 4px; color: var(--ink-2); font-size: 16px; max-width: 36ch; }
.doc .n2g { margin-bottom: clamp(24px, 3vw, 40px); }
@media (max-width: 1020px) {
  .n2g { grid-template-columns: 1fr; gap: 0; }
  .n2g-arrow { width: 2px; height: 44px; margin: 14px auto; }
  .n2g-arrow::after { right: -5px; top: auto; bottom: -2px; rotate: 135deg; }
  .drop-zone { min-height: 240px; }
}
@media (max-width: 860px) {
  .notes-head h2, .notes-head .notes-copy, .notes-head .actions { grid-column: 1 / -1; justify-self: start; }
  .notes-steps { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .n2g-out { grid-template-columns: 1fr; }
  .g-guide { grid-row: auto; }
  .g-guide .g-sec { display: none; }
  .g-short { grid-template-columns: 1fr; }
  .g-short em { grid-row: auto; grid-column: 1; justify-self: start; margin-top: 8px; }
}

/* ---------- Home: free day, then a pass (a real sequence, so it is numbered) ---------- */
.path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); margin: clamp(28px, 3vw, 40px) 0 clamp(8px, 1vw, 16px); counter-reset: path; }
.path li { counter-increment: path; position: relative; padding: 18px 0 20px 44px; border-top: var(--rule-strong); }
.path li::before { content: counter(path); position: absolute; left: 0; top: 16px; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font: 600 15px/1 var(--display); }
.path li:first-child::before { background: var(--biro); border-color: var(--biro); color: #fff; }
.path b { display: block; font: 600 19px/1.25 var(--display); letter-spacing: -0.015em; }
.path span { display: block; margin-top: 4px; color: var(--ink-2); font-size: 16px; max-width: 34ch; }
.home-pricing .parents-line { margin-top: var(--s4); }

/* ---------- Features page ---------- */
.fgroup { padding-top: clamp(56px, 7vw, 104px); }
.fgroup-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px 24px; align-items: end; padding-bottom: clamp(24px, 3vw, 40px); border-bottom: var(--rule-strong); }
.fgroup-head h2 { grid-column: 1 / span 6; font-size: clamp(40px, 6vw, 80px); line-height: .98; letter-spacing: -0.045em; }
.fgroup-head p { grid-column: 7 / span 6; color: var(--ink-2); font-size: 18px; max-width: 44ch; }
.fgroup .feature:first-of-type { border-top: 0; }
.feature h3 { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.08; letter-spacing: -0.03em; }
.feature.l .feature-text { grid-column: 1 / span 4; }
.feature.l .specimen { grid-column: 6 / span 7; }
.feature.r .specimen { grid-column: 1 / span 6; }
.feature.r .feature-text { grid-column: 8 / span 5; }
.feature.wide { align-items: end; row-gap: clamp(32px, 4vw, 56px); }
.feature.wide .feature-text { grid-column: 1 / span 6; }
.feature.wide .specimen { grid-column: 1 / -1; }
.feature-text ul.ticks { margin-top: var(--s4); color: var(--ink-2); }
.feature-text ul.ticks li { position: relative; padding-left: 24px; margin-top: 6px; }
.feature-text ul.ticks li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 12px; height: 2px; background: var(--biro); }
.spec-panel { display: grid; place-items: center; padding: clamp(32px, 4vw, 56px) 0; background: var(--sheet-2); border: 1px solid var(--rule-soft); border-radius: 20px; }
.minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); padding: clamp(32px, 4vw, 56px) 0 0; }
.minis > div { padding: 22px 0 26px; border-top: var(--hair); }
.minis h3 { font-size: 20px; line-height: 1.2; letter-spacing: -0.02em; }
.minis p { margin-top: 8px; color: var(--ink-2); font-size: 16px; max-width: 40ch; }
.features-page .doc-cta { margin-top: var(--section); }

/* Study for me: today's session, as the app lays it out */
.session { background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--shadow-lift); padding: 24px 26px 26px; }
.session-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 16px; border-bottom: 2px solid var(--ink); }
.session-head b { font: 600 24px/1.1 var(--display); letter-spacing: -0.02em; }
.session-head span { color: var(--ink-3); font-size: 15px; }
.session li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--rule-soft); }
.session li i { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--rule); background: var(--sheet-2); position: relative; }
.session li i::before { content: ""; position: absolute; inset: 9px 8px; border: 1.5px solid var(--ink); border-radius: 3px; }
.session li i.k-mis::before { inset: 9px; border-radius: 50%; border-color: var(--biro); }
.session li i.k-q::before { inset: 10px 9px; border: 0; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.session li b { font: 600 17px/1.3 var(--display); letter-spacing: -0.01em; }
.session li em { grid-column: 2; font-style: normal; color: var(--ink-3); font-size: 15px; }
.session li small { grid-row: 1 / span 2; grid-column: 3; color: var(--ink-2); font-size: 15px; font-variant-numeric: tabular-nums; }
.session-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; font-size: 15px; color: var(--ink-3); }
.session-foot .ui-btn { height: 40px; padding: 0 18px; border-radius: 8px; font-size: 15px; }

/* Mistakes: one question and the three days it comes back */
.redo { background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--shadow-lift); padding: 24px 26px; }
.redo-q small { display: block; color: var(--ink-3); font-size: 14px; margin-bottom: 8px; }
.redo-q p { font: 500 19px/1.35 var(--display); letter-spacing: -0.01em; }
.redo-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 22px; border-top: 2px solid var(--ink); }
.redo-days li { padding: 12px 12px 0 0; border-left: 1px solid var(--rule); padding-left: 12px; }
.redo-days li:first-child { border-left: 0; padding-left: 0; }
.redo-days b { display: block; font: 600 20px/1.1 var(--display); letter-spacing: -0.02em; }
.redo-days span { display: block; margin-top: 4px; font-size: 15px; color: var(--ink-3); }
.redo-days li.ok span { color: var(--ink-2); }
.redo-days li.next b, .redo-days li.next span { color: var(--biro); }
.redo-days li.next span { font-weight: 700; }

/* Printing: the paper and its marking guide */
.sheets { position: relative; height: clamp(300px, 32vw, 420px); }
.sheet { position: absolute; width: 52%; aspect-ratio: 210 / 297; max-height: 100%; padding: 5% 5.5%; background: var(--sheet); border: 1px solid #DFE2DC; border-radius: 4px; box-shadow: var(--shadow-lift); font-size: clamp(9px, .95vw, 12px); }
.sheet b { display: block; font: 600 1.45em/1.15 var(--display); letter-spacing: -0.02em; }
.sheet small { display: block; margin-top: .4em; color: var(--ink-3); font-size: 1em; }
.sheet i { display: block; height: 2px; margin-top: 1.3em; background: var(--rule-soft); }
.sheet i:nth-of-type(3n) { width: 70%; }
.sheet .q { margin-top: 1.6em; font-weight: 700; }
.sheet-a { left: 4%; top: 0; rotate: -3deg; }
.sheet-b { right: 4%; top: 10%; rotate: 2.5deg; }
.sheet-b i { background: none; height: auto; margin-top: .9em; padding-left: 1.4em; position: relative; color: var(--ink-2); font-style: normal; }
.sheet-b i::before { content: ""; position: absolute; left: 0; top: .2em; width: .8em; height: .5em; border-left: 2px solid var(--biro); border-bottom: 2px solid var(--biro); rotate: -45deg; }

/* Ask AI: the helper next to a topic */
.ask { background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--shadow-lift); padding: 24px 26px; }
.ask-top { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-3); font-size: 14px; }
.ask-msg { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--paper); font-size: 16px; color: var(--ink-2); max-width: 46ch; }
.ask-msg.me { margin-left: auto; background: var(--biro-wash); color: var(--ink); max-width: 30ch; }
.ask-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ask-chips span { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 99px; font-size: 14px; color: var(--ink-2); background: var(--sheet); }
.ask-note { margin-top: 14px; font-size: 14px; color: var(--ink-3); }

/* ---------- FAQ, parents, about and legal pages ---------- */
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s5); }
.jump a { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 99px; text-decoration: none; color: var(--ink-2); font-size: 15px; background: var(--sheet); transition: border-color .15s, color .15s; }
.jump a:hover { border-color: var(--ink); color: var(--ink); }
.faq-page .faq { padding: clamp(40px, 5vw, 64px) 0; border-top: var(--hair); scroll-margin-top: 72px; }
.faq-page .faq:last-of-type { padding-bottom: clamp(48px, 6vw, 80px); }
.faq dd p + p { margin-top: 10px; }
.updated { margin-top: var(--s4) !important; font-size: 15px !important; color: var(--ink-3) !important; }
.legal .doc-sec > h2 { font-size: clamp(22px, 2.4vw, 28px); }
.legal .body > p, .legal .body > ul { max-width: 68ch; }
.body ul.dots li { position: relative; padding-left: 20px; margin-top: 8px; }
.body ul.dots li::before { content: ""; position: absolute; left: 3px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.body ol.steps-list { counter-reset: s; }
.body ol.steps-list li { counter-increment: s; position: relative; padding: 0 0 0 40px; margin-top: 16px; }
.body ol.steps-list li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font: 600 14px/1 var(--display); color: var(--ink); }
.callout { padding: 18px 20px; border-left: 2px solid var(--biro); background: var(--sheet); color: var(--ink-2); border-radius: 0 10px 10px 0; }
.contact-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 22px 0; border-top: var(--rule-strong); border-bottom: var(--hair); }
.contact-card a.mail { font: 600 clamp(22px, 2.6vw, 32px)/1.1 var(--display); letter-spacing: -0.02em; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.contact-card a.mail:hover { color: var(--biro); }

@media (max-width: 860px) {
  .inside-head .section-h, .inside-head p { grid-column: 1 / -1; }
  .path { grid-template-columns: 1fr; }
  .fgroup-head h2, .fgroup-head p { grid-column: 1 / -1; }
  .feature.r .specimen { order: 2; }
  .minis { grid-template-columns: 1fr; }
  .sheets { height: clamp(260px, 70vw, 380px); }
}
@media (max-width: 640px) {
  .inside-grid thead th:first-child { width: 31%; }
  .inside-grid thead th { font-size: 14px; }
  .inside-grid tbody th { font-size: 16px; }
  .inside-grid td a, .inside-grid td span { min-height: 52px; font-size: 14px; gap: 6px; padding-right: 4px; }
  .inside-grid td a b { display: none; }
  .inside-grid td a svg { width: 17px; height: 14px; }
  .session, .redo, .ask { padding: 20px; }
  .session li { grid-template-columns: 30px minmax(0, 1fr); }
  .session li i { width: 30px; height: 30px; }
  .session li small { grid-row: auto; grid-column: 2; }
  .features-more .btn { width: 100%; }
}

/* ==========================================================
   Motion layer. Everything below only applies when JS has added
   .motion to <html> (never for prefers-reduced-motion), so the
   page reads exactly the same without it.
   ========================================================== */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Hold the first view until fonts and the intro are ready (a timer in <head> lifts this if scripts fail) */
.motion:not(.motion-ready) :is(.hero-copy, .page-head, .options, .note, .plans, .terms, .devices) { opacity: 0; }

/* Word masks for the headline reveals: each word rises from behind its own baseline */
.w { display: inline-block; clip-path: inset(-0.4em -0.3em 0 -0.3em); padding-bottom: .16em; margin-bottom: -.16em; }
.wi { display: inline-block; }

/* Primary buttons lift and lean toward the pointer (transforms set from JS) */
.motion .btn-primary { will-change: transform; }
.motion .btn-primary:hover { box-shadow: inset 0 -1px 0 rgb(0 0 0 / .18), 0 14px 22px -14px rgb(26 28 32 / .45); }

/* Product stage: tilts back while it waits below the fold, then settles flat */
.motion .stage-wrap { perspective: 2200px; }
.motion .stage { will-change: transform; }

/* Flashcard specimen: the answer half turns over like a real card */
.flash { perspective: 1600px; }
.flash .back.is-3d { position: relative; padding: 0; transform-style: preserve-3d; }
.flash .back.is-3d .face { padding: 26px 26px 30px; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 0 12px 12px 0;
  box-shadow: inset 0 0 0 999px rgb(26 28 32 / var(--shade, 0)); }
.flash .back.is-3d .rear { position: absolute; inset: 0; transform: rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 0 12px 12px 0;
  background: var(--sheet) repeating-linear-gradient(to bottom, transparent 0 27px, #E3E6EC 27px 28px) 0 46px / 100% calc(100% - 46px) no-repeat;
  box-shadow: inset 0 0 0 999px rgb(26 28 32 / var(--shade, 0)); }
.flash .back.is-3d .rear::before { content: ""; position: absolute; left: 0; right: 0; top: 36px; height: 2px; background: var(--biro); opacity: .8; }
@media (max-width: 640px) { .flash .back.is-3d .rear { transform: rotateX(180deg); } .flash .back.is-3d .face, .flash .back.is-3d .rear { border-radius: 0 0 12px 12px; } }

/* Exam timer specimen: each digit is a rolling drum */
.odo { display: inline-block; height: 1em; overflow: hidden; vertical-align: top; font-variant-numeric: tabular-nums; }
.odo > span { display: block; will-change: transform; }
.odo > span > span { display: block; height: 1em; }
.odo-sep { display: inline-block; vertical-align: top; }

/* Download: rows answer the pointer */
@media (hover: hover) {
  .options th { position: relative; }
  .os { transition: transform .5s var(--ease-out); }
  .os svg { transition: border-color .3s, color .3s; }
  .options td { transition: color .25s; }
  .options tr:hover .os { transform: translateX(8px); }
  .options tr:hover .os svg { border-color: var(--biro); color: var(--biro); }
  .options tr:hover td { color: var(--ink); }
}

/* Pricing: glass tilts toward the pointer (transforms from JS) */
.motion .glass.plan { transform-style: preserve-3d; will-change: transform; }

/* Page changes: a short cross-fade, the header stays put */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out .2s cubic-bezier(.7, 0, .84, 0) both; }
  ::view-transition-new(root) { animation: vt-in .55s var(--ease-out) .06s both; }
  html.is-leaving main, html.is-leaving .foot { opacity: 0; transform: translateY(-6px); transition: opacity .2s cubic-bezier(.7, 0, .84, 0), transform .2s cubic-bezier(.7, 0, .84, 0); }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* "Sale" next to the struck-out regular price */
.price .sale { color: var(--accent, #2445D4); font-weight: 700; margin-right: 4px; }

/* =========================================================
   Free day: the hero CTA, the steps, the A$0 card and the phone bar.
   The free day is the first thing to do, so it always gets the blue button.
   ========================================================= */
/* Desktop: the headline also scales with the window height, so the free-day button stays above the fold */
@media (min-width: 641px) { .hero h1 { font-size: clamp(52px, min(8vw, 10.5svh), 124px); } }
.top .brand { white-space: nowrap; flex: none; }
.btn-trial { min-height: 58px; padding: 0 30px; font-size: 18px; border-radius: 12px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), inset 0 -2px 0 rgb(0 0 0 / .2), 0 14px 28px -14px rgb(36 69 212 / .75); }
.hero-actions .btn-how { min-height: 58px; border-radius: 12px; }
.hero-actions .hero-note { flex: 1 1 100%; margin-top: 2px; color: var(--ink-2); font-size: 15.5px; }
.hero-actions .hero-note::before { content: none; }
.page-head .hero-note { margin-top: var(--s4); font-size: 15.5px; color: var(--ink-3); }

/* How the free day works: three real steps, straight after the product shot */
.trial-how { padding: 0 0 var(--section); }
.trial-how-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 32px; }
.trial-how-head h2 { font-size: clamp(32px, 4.2vw, 56px); line-height: 1.02; letter-spacing: -0.04em; max-width: 14ch; }
.trial-how .path { margin-bottom: 0; }

/* Three cards: the free day first, then the two passes (unchanged) */
.plans-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plans-3 .price strong { font-size: clamp(56px, 6.2vw, 92px); }
/* The free day is a plain index card, not glass: a ruled header in biro blue */
.plan-free { border-radius: 30px; background: var(--sheet); border: 1px solid var(--rule); box-shadow: var(--shadow-lift); }
.plan-free .plan-head { padding-bottom: 14px; border-bottom: 2px solid var(--biro); }
.plan-free .best { background: var(--biro-wash); box-shadow: none; }
.plan-free .price span { color: var(--ink-2); }
.plan-free .btn-primary { box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), inset 0 -2px 0 rgb(0 0 0 / .18), 0 12px 24px -12px rgb(36 69 212 / .7); }
@media (max-width: 1020px) and (min-width: 641px) {
  .plans-3 { grid-template-columns: 1fr 1fr; }
  .plans-3 .plan-free { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .plan-free .plan-head, .plan-free .price { grid-column: 1; }
  .plan-free .what, .plan-free .btn, .plan-free .err { grid-column: 2; }
  .plan-free .what { grid-row: 1 / span 2; margin-top: 0; }
  .plan-free .btn { grid-row: 3; margin-top: 0; justify-self: start; }
  .plan-free .err { display: none; }
}

/* Home buy bar: the free day leads, passes are the quiet second option */
.buybar-sub { font-style: normal; }
.buybar-alt { color: var(--ink-2); font-size: 15px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgb(26 28 32 / .3); margin-left: 6px; }
.buybar-alt:hover { color: var(--biro); text-decoration-color: var(--biro); }

/* Phones: free-day bar on every page except Home (which has the buy bar above) */
.trialbar { display: none; }
@media (max-width: 640px) {
  .trialbar { position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px max(var(--gutter), env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
    background: rgb(244 245 242 / .94); border-top: 1px solid rgb(26 28 32 / .12); font-size: 15px; line-height: 1.3; color: var(--ink-2); }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .trialbar { background: rgb(244 245 242 / .82); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
  }
  .trialbar strong { display: block; color: var(--ink); font-weight: 700; }
  .trialbar .btn { flex: none; min-height: 44px; padding: 0 20px; font-size: 16px; }
  /* room under the footer links so the bar never sits on them */
  .foot.has-trialbar .wrap { padding-bottom: calc(32px + 66px + env(safe-area-inset-bottom)); }

  .buybar .buybar-sub { display: none; }
  .buybar strong { display: block; }
  .buybar-alt { margin-left: 0; font-size: 14px; }

  /* Hero: headline, one line of copy, then the free day as a full-width button, all above the fold */
  .hero { padding-top: 28px; }
  .hero h1 { font-size: clamp(42px, 12.6vw, 60px); line-height: .96; }
  .hero-copy > p:not(.hero-note) { margin-top: var(--s4); font-size: 17px; line-height: 1.5; }
  .hero-actions { margin-top: var(--s5); gap: 0 12px; }
  .hero-actions .btn-trial { flex: 1 1 100%; }
  .hero-actions .btn-how { flex: 0 0 auto; min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--ink-2); font: 400 15.5px/1 var(--body);
    text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgb(26 28 32 / .3); order: 3; }
  .hero-actions .btn-how:hover { background: none; color: var(--biro); }
  .hero-actions .hero-note { order: 2; margin-top: 6px; }
  .trial-how-head .btn { width: 100%; }
  .plans-3 { grid-template-columns: 1fr; }
}