/* Klera site. The pitch deck, as a website.

   Visual language taken from the TEF Ignition deck: warm off-white ground, condensed
   uppercase section titles with a yellow bar on the left, bronze subtitles, big-number
   cards on pale yellow with one card in solid yellow, black pill bars for the line that
   matters, and numbered circles that darken from pale to bronze to show progression.

   Contrast rules (see DESIGN.md):
   - --yellow is a FILL. Ink on yellow is 8:1; white on yellow is 2.1:1, so never white.
   - Readable accent text is --bronze (5.9:1 on paper).
   - Big numbers use --gold-num (3.4:1 on pale), which passes only as LARGE text. */

/* ------------------------------------------------------------------ tokens */
:root {
  color-scheme: light;

  --paper:     #FAF7F0;   /* page ground, the deck's warm off-white */
  --paper-2:   #FDFCF9;   /* the lighter end of the deck's gradient */
  --card:      #FFFFFF;
  --pale:      #FBF0DA;   /* the deck's pale yellow card */
  --mid:       #F2D48C;   /* second step of the progression */
  --yellow:    #E0A92E;   /* the deck's yellow. fills only */
  --gold:      #C8921F;   /* third step of the progression */
  --bronze-g:  #8C6A1F;   /* fourth step, graphic */
  --bronze:    #7A5A14;   /* accent TEXT, 5.9:1 on paper */
  --gold-num:  #A87A12;   /* large numbers only */
  --ink:       #1B1A17;
  --ink-soft:  #45403A;
  --muted:     #6B6457;
  --rule:      #E8DFC9;
  --rule-firm: #D6C8A4;
  --pill:      #1B1B1B;

  --calm:      #2563EB;   /* data only */
  --struggle:  #C2410C;   /* data only */

  --head: "Oswald", "Arial Narrow", "Helvetica Neue", sans-serif;
  --body: "Figtree", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1160px;
  --gap: clamp(3.5rem, 8vw, 6.5rem);
  --radius: 22px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 40%, var(--paper) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font: 400 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ type */
h1, h2, h3 { margin: 0 0 .5em; text-wrap: balance; }
h1 {
  font: 700 clamp(2.5rem, 6.2vw, 4.6rem)/1.02 var(--head);
  text-transform: uppercase;
  letter-spacing: -.005em;
}
h2 {
  font: 700 clamp(2rem, 4.4vw, 3.1rem)/1.05 var(--head);
  text-transform: uppercase;
  letter-spacing: -.005em;
}
h3 { font: 700 clamp(1.15rem, 1.8vw, 1.35rem)/1.25 var(--body); }
p { margin: 0 0 1.1em; max-width: 66ch; }
strong { font-weight: 700; }

.lead { font-size: clamp(1.1rem, 1.7vw, 1.3rem); color: var(--ink-soft); line-height: 1.55; }
.sub  { font-size: clamp(1.1rem, 1.8vw, 1.35rem); color: var(--bronze); line-height: 1.45; margin-top: -.2rem; }
.kicker {
  display: inline-block; margin-bottom: 1rem;
  font: 600 .82rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase;
  color: var(--bronze);
}
.tagline { font-size: clamp(1.25rem, 2.4vw, 1.75rem); color: var(--bronze); line-height: 1.4; }
.source { color: var(--muted); font-size: .9rem; margin-top: 1rem; }

a { color: var(--bronze); text-decoration-color: var(--yellow); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { text-decoration-color: var(--bronze); }

/* The deck's section title: a solid yellow bar, then the uppercase title. */
.sec-head { position: relative; padding-left: 1.6rem; margin-bottom: 2rem; }
.sec-head::before {
  content: ""; position: absolute; left: 0; top: .15rem; bottom: .15rem;
  width: 8px; background: var(--yellow); border-radius: 1px;
}
.sec-head h2 { margin-bottom: .35rem; }
.sec-head .sub { margin-bottom: 0; }

/* ------------------------------------------------------------------ layout */
.wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }
.section { padding-block: var(--gap) 0; }

.grid { display: grid; gap: 1.2rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.grid-5 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
@media (min-width: 1100px) { .grid-5 { grid-template-columns: repeat(5, 1fr); } }
.grid-2x2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 600px) { .grid-2x2 { grid-template-columns: 1fr; } }
.split { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr 1fr; align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
/* Grid columns default to min-width:auto, so a swipe row inside one would widen the page. */
.split > * { min-width: 0; }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: .7rem 1rem; border-radius: 0 0 12px 0; z-index: 99;
}
.skip:focus { left: 0; top: 0; }
:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--bronze); outline-offset: 3px; border-radius: 6px;
}

/* ------------------------------------------------------------------ nav */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper-2) 88%, transparent);
  backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid var(--rule);
}
.nav-inner { display: flex; align-items: center; gap: 1.2rem; min-height: 68px; }
.brand { display: inline-flex; align-items: center; }
.brand img { height: 34px; width: auto; display: block; }
.nav-links { display: flex; gap: .2rem; margin-left: auto; flex-wrap: wrap; align-items: center; }
.nav-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .8rem;
  color: var(--ink-soft); text-decoration: none; font-weight: 500; font-size: .96rem;
  border-bottom: 3px solid transparent;
}
.nav-links a:hover { color: var(--ink); border-bottom-color: var(--mid); }
.nav-links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--yellow); }
.nav-links a.nav-cta {
  margin-left: .5rem; padding: 0 1.1rem; border: 0; border-radius: 999px;
  background: var(--pill); color: #fff;
}
.nav-links a.nav-cta:hover { background: #000; color: #fff; }
@media (max-width: 760px) {
  .nav-inner { flex-wrap: wrap; padding-block: .6rem; gap: .4rem; }
  .nav-links { width: 100%; margin-left: 0; }
  .nav-links a { padding: 0 .55rem; font-size: .9rem; }
  .nav-links a.nav-cta { margin-left: auto; }
}

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 1.5rem;
  border: 2px solid transparent; border-radius: 999px;
  background: var(--yellow); color: var(--ink);
  font: 700 1rem/1 var(--body); text-decoration: none; cursor: pointer;
  transform: translate3d(var(--tx, 0), var(--ty, 0), 0);
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.btn:hover { background: #EAB43A; }
.btn:active { transform: translate3d(0, 1px, 0); }
.btn:disabled { opacity: .55; cursor: default; }
.btn-dark { background: var(--pill); color: #fff; }
.btn-dark:hover { background: #000; }
.btn-quiet { background: transparent; border-color: var(--rule-firm); color: var(--ink); }
.btn-quiet:hover { background: var(--pale); border-color: var(--yellow); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }
.actions.center { justify-content: center; }

/* ------------------------------------------------------------------ cover hero (deck slide 1) */
.cover { padding-block: clamp(3.5rem, 9vw, 7rem) 0; text-align: center; }
/* klera-logo-full.png: the combined bulb and wordmark, transparent. */
.cover-mark { display: block; width: min(640px, 92%); height: auto; margin: 0 auto 2rem; }
.cover .tagline { max-width: 34ch; margin-inline: auto; }
.cover .lead { max-width: 60ch; margin-inline: auto; }

.hero { padding-block: clamp(3rem, 7vw, 5.5rem) 0; }
.hero .lead { max-width: 58ch; }

/* ------------------------------------------------------------------ cards */
.card {
  position: relative;
  background: var(--pale);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 2.6vw, 2rem);
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.card.is-white { background: var(--card); border: 1px solid var(--rule); }
.card.is-yellow { background: var(--yellow); }
.card.is-yellow p, .card.is-yellow h3 { color: var(--ink); }
.card-label { font: 700 clamp(1.6rem, 3vw, 2.2rem)/1.1 var(--body); color: var(--bronze); margin: 0 0 .7rem; }
.card.is-yellow .card-label { color: var(--ink); }
.card .result { font-weight: 700; font-size: 1.12rem; margin-top: 1.4rem; }

/* .panel is kept as the hook klera.js uses for the pointer spotlight */
.panel::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .45), transparent 62%);
  opacity: 0; transition: opacity .25s ease;
}
.panel.is-hot::after { opacity: 1; }

/* ------------------------------------------------------------------ big-number cards (deck: problem, traction) */
.stat {
  background: var(--pale); border-radius: var(--radius);
  padding: clamp(1.4rem, 2.6vw, 2rem); min-height: 13rem;
  display: flex; flex-direction: column; gap: .8rem;
}
.stat .num { font: 800 clamp(2.8rem, 6vw, 4.4rem)/1 var(--body); color: var(--gold-num); letter-spacing: -.02em; }
.stat .num.is-word { font-size: clamp(2rem, 4vw, 2.8rem); }
.stat .lbl { font-size: 1.08rem; line-height: 1.4; color: var(--ink); }
.stat.is-yellow { background: var(--yellow); }
.stat.is-yellow .num, .stat.is-yellow .lbl { color: var(--ink); }

/* ------------------------------------------------------------------ black pill bar */
.pillbar {
  background: var(--pill); color: #fff; border-radius: 999px;
  padding: 1.05rem 1.8rem; text-align: center;
  font: 700 clamp(1rem, 1.8vw, 1.3rem)/1.35 var(--body);
  margin-top: 2rem; max-width: none;
}
.pill-center { text-align: center; }
.pillbar.is-inline { display: inline-block; margin: 0 0 2rem; }
@media (max-width: 600px) { .pillbar { border-radius: 22px; } }

/* ------------------------------------------------------------------ three circles (deck: solution) */
.circles { display: flex; justify-content: center; margin-top: 1rem; }
.circle {
  width: clamp(220px, 30vw, 360px); aspect-ratio: 1; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 2.4rem; margin-inline: -1.2rem;
}
.circle .n { font: 800 clamp(2.2rem, 4vw, 3.4rem)/1 var(--body); color: var(--bronze-g); margin-bottom: 1rem; }
.circle p { font-weight: 700; font-size: clamp(1.05rem, 1.8vw, 1.4rem); line-height: 1.3; margin: 0; color: var(--ink); }
.circle:nth-child(1) { background: var(--pale); }
.circle:nth-child(2) { background: var(--mid); }
.circle:nth-child(3) { background: var(--yellow); }
.circle:nth-child(3) .n { color: var(--ink); }
@media (max-width: 760px) {
  .circles { flex-direction: column; align-items: center; }
  .circle { width: min(280px, 80vw); margin: -1rem 0; }
}

/* ------------------------------------------------------------------ numbered timeline (deck: business model, vision) */
.timeline { list-style: none; padding: 0; margin: 2.4rem 0 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: relative; }
.timeline::before {
  content: ""; position: absolute; top: 42px; left: 12%; right: 12%; height: 4px; background: var(--mid);
}
.timeline li { position: relative; text-align: center; padding: 0 .8rem; }
.timeline .dot {
  width: 88px; height: 88px; border-radius: 50%; margin: 0 auto 1.2rem;
  display: grid; place-items: center; position: relative;
  font: 800 1.9rem/1 var(--body); color: var(--ink);
}
.timeline .when { display: block; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .82rem; color: var(--bronze); margin-bottom: .5rem; }
.timeline h3 { margin-bottom: .4rem; }
.timeline p { margin-inline: auto; max-width: 26ch; font-size: .98rem; }
.timeline li:nth-child(1) .dot { background: var(--mid); }
.timeline li:nth-child(2) .dot { background: var(--yellow); }
.timeline li:nth-child(3) .dot { background: var(--gold); }
.timeline li:nth-child(4) .dot { background: var(--bronze-g); color: #fff; }
@media (max-width: 760px) {
  .timeline { grid-auto-flow: row; gap: 1.6rem; }
  .timeline::before { top: 0; bottom: 0; left: 42px; right: auto; width: 4px; height: auto; }
  .timeline li { display: grid; grid-template-columns: 88px 1fr; gap: 1rem; text-align: left; padding: 0; }
  .timeline .dot { margin: 0; }
  .timeline p { margin-inline: 0; }
}

/* ------------------------------------------------------------------ vertical steps */
.steps { list-style: none; padding: 0; margin: 2rem 0 0; counter-reset: s; display: grid; gap: 1rem; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 3.2rem 1fr; gap: 1.1rem; align-items: start; }
.steps li::before {
  content: counter(s); width: 3.2rem; height: 3.2rem; border-radius: 50%;
  display: grid; place-items: center; font: 800 1.2rem/1 var(--body); color: var(--ink);
  background: var(--mid);
}
.steps li:nth-child(1)::before { background: var(--pale); }
.steps li:nth-child(3)::before { background: var(--yellow); }
.steps li:nth-child(4)::before { background: var(--gold); }
.steps li:nth-child(n+5)::before { background: var(--bronze-g); color: #fff; }
.steps h3 { margin: .55rem 0 .3rem; }
.steps p { margin: 0; }

/* ------------------------------------------------------------------ week blocks (deck: next steps) */
.weeks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; }
.week { padding: 1.8rem; min-height: 17rem; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; }
.week .w { font: 700 clamp(3rem, 6vw, 4.6rem)/1 var(--head); }
.week p { font-size: 1.15rem; margin: 0; }
.week:nth-child(1) { background: var(--pale); } .week:nth-child(1) .w { color: var(--gold-num); }
.week:nth-child(2) { background: var(--mid); }  .week:nth-child(2) .w { color: var(--bronze); }
.week:nth-child(3) { background: var(--yellow); } .week:nth-child(3) p { font-weight: 700; }

/* ------------------------------------------------------------------ competition quadrant (deck slide 10) */
.quad {
  position: relative; aspect-ratio: 16 / 9; margin-top: 1rem;
  background:
    linear-gradient(var(--rule-firm), var(--rule-firm)) center / 3px 100% no-repeat,
    linear-gradient(var(--rule-firm), var(--rule-firm)) center / 100% 3px no-repeat;
}
.quad .axis { position: absolute; font-weight: 700; color: var(--bronze); font-size: .95rem; }
.quad .ax-top { left: calc(50% + .8rem); top: 0; }
.quad .ax-bot { left: calc(50% + .8rem); bottom: 0; }
.quad .ax-l { left: 0; top: calc(50% + .6rem); }
.quad .ax-r { right: 0; top: calc(50% + .6rem); }
.quad .chip {
  position: absolute; transform: translate(-50%, -50%);
  padding: .7rem 1.4rem; border-radius: 999px; white-space: nowrap;
  background: #EEE8DD; color: #4F4A40; font-weight: 700;
}
.quad .chip.is-tutor { background: var(--mid); color: var(--ink); }
.quad .chip.is-us { background: var(--yellow); color: var(--ink); font-size: 1.5rem; padding: .9rem 2.4rem; }
@media (max-width: 700px) {
  .quad { aspect-ratio: 4 / 5; }
  .quad .axis { font-size: .8rem; }
  .quad .chip { font-size: .8rem; padding: .45rem .8rem; }
  .quad .chip.is-us { font-size: 1.05rem; padding: .6rem 1.2rem; }
}

/* ------------------------------------------------------------------ funnel (deck: market) */
.funnel { display: grid; gap: .7rem; justify-items: center; }
.funnel div {
  width: 100%; padding: 1.4rem 14%; text-align: center; font-weight: 700;
  clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%);
}
.funnel div:nth-child(1) { background: var(--pale); color: var(--bronze); }
.funnel div:nth-child(2) { background: var(--mid); width: 76%; }
.funnel div:nth-child(3) { background: var(--yellow); width: 54%; }
.funnel-note { text-align: center; font-style: italic; color: var(--bronze); font-size: 1.15rem; margin: 1.2rem auto 0; }

/* ------------------------------------------------------------------ yellow band (deck: what we've built) */
.band { background: var(--yellow); margin-top: var(--gap); padding-block: clamp(3rem, 7vw, 5rem); }
.band h2, .band .sub { color: var(--ink); }
.band .sec-head::before { background: var(--ink); }
.feature { display: grid; gap: .6rem; align-content: start; }
.feature .icon {
  width: 64px; height: 64px; border-radius: 50%; background: var(--yellow);
  display: grid; place-items: center;
}
.band .feature .icon { background: var(--ink); }
.feature .icon svg { width: 30px; height: 30px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.feature .icon.is-ink svg { stroke: var(--ink); }
.feature h3 { margin: .4rem 0 0; }
.feature p { margin: 0; }

/* ------------------------------------------------------------------ media slots
   Where an app screenshot or recording belongs. Every slot reserves its space and
   names the exact shot it wants; MEDIA_SLOTS.md lists them all. */
.slot {
  display: grid; place-items: center; align-content: center; gap: .4rem;
  aspect-ratio: 4 / 3; width: 100%;
  background: repeating-linear-gradient(45deg, var(--pale) 0 12px, #FDF6E6 12px 24px);
  border: 2px dashed var(--rule-firm); border-radius: var(--radius);
  color: var(--muted); text-align: center; padding: 1.5rem;
  font-size: .92rem; line-height: 1.45;
}
.slot b { font: 700 .8rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--bronze); }
.slot span { max-width: 36ch; }
.slot.is-wide { aspect-ratio: 16 / 9; }
.slot.is-portrait { aspect-ratio: 3 / 4; max-width: 460px; margin-inline: auto; }
.band .slot { background: repeating-linear-gradient(45deg, #EDBF55 0 12px, #E6B444 12px 24px); border-color: var(--ink); color: var(--ink); }
.band .slot b { color: var(--ink); }
.slot-note { color: var(--muted); font-size: .88rem; margin: .7rem 0 0; }
.shot { display: block; width: 100%; height: auto; border-radius: var(--radius); }

/* ------------------------------------------------------------------ product media
   Assets in assets/klera-assets/. `mockups/` already carry their own iPad frame and soft
   shadow on a transparent canvas: never crop, round or shadow them again. `screens/` are
   bare captures and take the .shot radius plus a hairline. */
.media { margin: 0; }
.mock { display: block; width: 100%; height: auto; }
.mock.is-tall { max-width: 420px; margin-inline: auto; }
.media .shot, .frames .shot { border: 1px solid var(--rule); }
/* Founder cards on /about/: round headshot beside name and role. */
.person { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.person .card-label { margin: 0 0 .2rem; }
.headshot { width: 96px; height: 96px; flex: none; border-radius: 50%; object-fit: cover; border: 3px solid var(--yellow); background: var(--pale); }
/* Marked exam answers: two graded cards side by side, tilted a touch like papers on a desk. */
.marked { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 2.4rem); margin-top: 2.2rem; }
.marked-card { margin: 0; position: relative; }
.marked-card .shot { box-shadow: 0 18px 40px -22px rgba(23, 19, 7, .35); }
.marked-card:first-child { transform: rotate(-1.2deg); }
.marked-card:last-child { transform: rotate(1.2deg) translateY(1.4rem); }
.marked-tag {
  position: absolute; z-index: 1; top: -.8rem; left: 1rem;
  background: var(--ink); color: var(--paper); font: 600 .78rem/1 var(--body);
  padding: .45rem .75rem; border-radius: 999px;
}
.marked-note { text-align: center; max-width: none; margin-top: 2.8rem; }
@media (max-width: 900px) {
  .marked-note { margin-top: 1.2rem; }
  .marked { grid-template-columns: 1fr; gap: 2.2rem; }
  .marked-card:first-child, .marked-card:last-child { transform: none; }
}
.shot.is-photo { max-width: 520px; margin-inline: auto; border: 0; }
.media .slot-note { text-align: center; }
.clip { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--sunk, #F4EEDD); }
.btn-small { padding: .45rem .9rem; min-height: 36px; font-size: .85rem; }
.media-bar { display: flex; align-items: center; gap: .8rem; margin-top: .7rem; color: var(--muted); font-size: .88rem; flex-wrap: wrap; }

/* An image sequence: frames stacked in one box, one visible, dots to step through. */
.frames-stage { display: grid; }
.frames-stage > img { grid-area: 1 / 1; transition: opacity .6s ease, visibility .6s; }
.frames-stage > img[hidden] { display: block; opacity: 0; visibility: hidden; }
.frames-dots { display: inline-flex; gap: .35rem; flex-wrap: wrap; }
.frames-dot {
  font: 600 .78rem/1 var(--body); padding: .45rem .7rem; min-height: 32px; border-radius: 999px;
  border: 1px solid var(--rule-firm); background: transparent; color: var(--ink); cursor: pointer;
}
.frames-dot[aria-pressed="true"] { background: var(--ink); color: var(--paper, #FEFCF3); border-color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .frames-stage > img { transition: none; } }

/* How it works: three equal mockups in a row, stacked on narrow screens. */
.how { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .how { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }
.how figure { margin: 0; }
.how figcaption { margin-top: .4rem; }
.how h3 { margin: .5rem 0 .3rem; }
.how p { margin: 0; color: var(--muted); }
.how-n {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--yellow); color: var(--ink); font: 700 .95rem/1 var(--body);
}

/* ------------------------------------------------------------------ doors */
.doors { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.door {
  display: flex; flex-direction: column; gap: .5rem;
  background: var(--pale); border-radius: var(--radius); padding: 1.8rem;
  color: var(--ink); text-decoration: none; transition: background-color .2s ease, transform .2s ease;
}
.door:hover { background: var(--mid); transform: translateY(-2px); }
.door .n { font: 800 2.4rem/1 var(--body); color: var(--gold-num); }
.door h3 { font: 700 1.6rem/1.1 var(--head); text-transform: uppercase; margin: .4rem 0 0; }
.door p { margin: 0; color: var(--ink-soft); }
.door .go { margin-top: auto; padding-top: .8rem; font-weight: 700; color: var(--bronze); }

/* ------------------------------------------------------------------ tables */
.table-scroll { overflow-x: auto; margin: 1.4rem 0; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--card); }
table { width: 100%; border-collapse: collapse; font-size: .96rem; min-width: 560px; }
caption { caption-side: bottom; text-align: left; color: var(--muted); font-size: .88rem; padding: .9rem 1.1rem; }
th, td { padding: .85rem 1.1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
thead th { background: var(--pale); font-weight: 700; }
tbody th { font-weight: 700; }
tbody tr:last-child > * { border-bottom: 0; }

/* ------------------------------------------------------------------ figures */
.fig { margin: 1.8rem 0 0; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.4rem; }
.fig img { display: block; width: 100%; height: auto; }
.fig figcaption { color: var(--ink-soft); font-size: .92rem; margin-top: 1rem; max-width: 72ch; }
.legend { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; font-size: .88rem; color: var(--ink-soft); }
.legend .key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: .45rem; vertical-align: -1px; }

/* ------------------------------------------------------------------ layered stack (engineers) */
.stack { display: grid; gap: .6rem; margin-top: 1.6rem; }
.stack > div {
  display: grid; grid-template-columns: 11rem 1fr; gap: 1.2rem; align-items: center;
  border-radius: 16px; padding: 1.1rem 1.4rem;
}
.stack h3 { font: 700 1.3rem/1 var(--head); text-transform: uppercase; margin: 0; }
.stack p { margin: 0; max-width: none; }
.stack > div:nth-child(1) { background: var(--pale); }
.stack > div:nth-child(2) { background: #F8E6B8; }
.stack > div:nth-child(3) { background: var(--mid); }
.stack > div:nth-child(4) { background: #EBBE5A; }
.stack > div:nth-child(5) { background: var(--yellow); }
@media (max-width: 640px) { .stack > div { grid-template-columns: 1fr; gap: .4rem; } }

/* ------------------------------------------------------------------ early access */
.cta-block {
  background: var(--pale); border-radius: 28px;
  padding: clamp(1.6rem, 5vw, 3.4rem);
}
.perk {
  display: inline-block; background: var(--pill); color: #fff;
  font-weight: 700; font-size: .9rem; padding: .55rem 1.1rem; border-radius: 999px; margin-bottom: 1.4rem;
}
.form-row { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: .9rem; }
.form-row:first-child { margin-top: 0; }
.field { display: grid; gap: .35rem; }
.field label { font-weight: 600; font-size: .92rem; }
.field input, .field select {
  min-height: 50px; padding: 0 1rem; font: 400 1rem var(--body); color: var(--ink);
  background: var(--card); border: 1.5px solid var(--rule-firm); border-radius: 14px; width: 100%;
}
.field input:focus, .field select:focus { outline: 3px solid var(--yellow); outline-offset: 1px; border-color: var(--bronze-g); }
.check { display: flex; gap: .7rem; align-items: flex-start; margin-top: 1.2rem; font-size: .92rem; color: var(--ink-soft); max-width: 72ch; }
.check input { width: 22px; height: 22px; margin: .1rem 0 0; accent-color: var(--bronze-g); flex: none; }
.form-note { color: var(--muted); font-size: .9rem; margin-top: 1rem; }
.form-status { font-weight: 600; margin: 1rem 0 0; }
.form-status[data-state="ok"] { color: #2F6B1F; }
.form-status[data-state="err"] { color: #A3310A; }
.hp { position: absolute; left: -9999px; }

/* ------------------------------------------------------------------ footer */
.foot { margin-top: var(--gap); border-top: 1px solid var(--rule); padding-block: 2.5rem 3rem; color: var(--muted); font-size: .92rem; }
.foot-grid { display: flex; flex-wrap: wrap; gap: 1.2rem 2.5rem; align-items: center; justify-content: space-between; }
.foot a { color: var(--ink-soft); }
.foot nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.foot p { margin: 0; }

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

/* The home hero title is the deck's cover tagline: sentence case, bronze, not the uppercase display face. */
.cover-title { font: 600 clamp(1.5rem, 3vw, 2.2rem)/1.3 var(--body); text-transform: none; color: var(--bronze); max-width: 30ch; margin: 0 auto 1rem; }

@media (max-width: 600px) { .stat { min-height: 0; } .week { min-height: 0; } }

/* ------------------------------------------------------------------ home: audience picker
   The home page is an introduction; its main job is sending each visitor to their page. */
.who-title { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 3rem 0 1.4rem; }
.who { display: grid; gap: 1.2rem; grid-template-columns: repeat(3, 1fr); text-align: left; }
@media (max-width: 860px) { .who { grid-template-columns: 1fr; } }
.who-card {
  display: flex; flex-direction: column; gap: .5rem;
  background: var(--pale); border: 2px solid transparent; border-radius: var(--radius);
  padding: 1.8rem; color: var(--ink); text-decoration: none; min-height: 15rem;
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
}
.who-card:hover { transform: translateY(-3px); border-color: var(--yellow); background: #FCF4E2; }
.who-card.is-yellow { background: var(--yellow); }
.who-card.is-yellow:hover { background: #E6B03A; border-color: var(--ink); }
.who-im { font-weight: 600; color: var(--bronze); font-size: .95rem; }
.who-card.is-yellow .who-im { color: var(--ink); }
.who-name { font: 700 clamp(2.2rem, 4vw, 3rem)/1 var(--head); text-transform: uppercase; }
.who-line { color: var(--ink-soft); }
.who-card.is-yellow .who-line { color: var(--ink); }
.who-go { margin-top: auto; padding-top: .8rem; font-weight: 700; }
.who-go::after { content: "  \2192"; }

/* ------------------------------------------------------------------ privacy policy */
.policy { max-width: 72ch; margin-top: 1rem; }
.policy h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 2.2rem 0 .6rem; }
.policy ul { padding-left: 1.2rem; margin: 0 0 1.1em; }
.policy li { margin-bottom: .5rem; }

/* ------------------------------------------------------------------ phones
   Desktop layout is the design; on a narrow portrait screen every grid used to stack into a
   tall column, which made the student and engineering pages 11-14k px of scrolling. Here card
   rows become one swipeable row each (the next card peeks in, so it reads as swipeable), the
   How-it-works steps and the marked exam answers do the same, and vertical rhythm tightens.
   Nothing is hidden: every card is still one swipe away. */
@media (max-width: 640px) {
  :root { --gap: 2.6rem; }
  .sec-head { margin-bottom: 1.3rem; }
  .band { padding-block: 2.4rem; }
  .hero { padding-top: 2rem; }

  .grid:is(.grid-2, .grid-3, .grid-4, .grid-5):not(.no-swipe),
  .how,
  .marked {
    display: flex; gap: .8rem; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 1rem;
    margin-inline: -1rem; padding: .2rem 1rem 1rem;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .grid:is(.grid-2, .grid-3, .grid-4, .grid-5):not(.no-swipe)::-webkit-scrollbar,
  .how::-webkit-scrollbar, .marked::-webkit-scrollbar { display: none; }
  .grid:is(.grid-2, .grid-3, .grid-4, .grid-5):not(.no-swipe) > *,
  .how > li, .marked > .marked-card { flex: 0 0 84%; scroll-snap-align: start; }
  .grid-4:not(.no-swipe) > .stat { flex-basis: 62%; }

  .how { max-width: none; margin-top: 0; }
  .marked { margin-top: 1.6rem; padding-top: 1.1rem; }
  .marked-card:first-child, .marked-card:last-child { transform: none; }
  .marked-note { margin-top: .2rem; }

  /* Long engineering detail folds behind a toggle on phones only (klera.js adds the button). */
  .more:not(.is-open) { display: none; }
  .more-toggle { display: inline-flex; margin-top: 1.2rem; }
  /* Portrait photos stay a glance, not a full screen of scrolling. */
  .shot.is-photo { max-width: 300px; }
  /* Header: one scrollable row of links under the logo instead of two wrapped rows. */
  .nav-inner { padding-block: .4rem; gap: .2rem; }
  .brand img { height: 28px; }
  .nav-links { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -1rem; padding-inline: 1rem; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-inner { position: relative; }
  .nav-links { gap: .1rem; }
  .nav-links a { flex: none; min-height: 40px; padding: 0 .3rem; font-size: .8rem; }
  /* The CTA sits beside the logo, so the four page links fit one row under it. */
  .nav-links a.nav-cta { position: absolute; top: .35rem; right: 1rem; min-height: 36px; margin: 0; padding: 0 .9rem; font-size: .82rem; }

  /* Home: the three "ten seconds" circles sit in one overlapping row instead of a tall stack. */
  .circles { flex-direction: row; justify-content: center; align-items: center; }
  .circle { width: 124px; margin: 0 -7px; padding: .5rem; }
  .circle .n { font-size: 1.5rem; margin-bottom: .25rem; }
  .circle p { font-size: .78rem; }

  /* Home: audience cards shorter. */
  .who-card { min-height: 0; padding: 1.3rem 1.4rem; gap: .35rem; }
  .who-name { font-size: 1.9rem; }
  .who-title { margin-top: 2rem; }
}
.more-toggle { display: none; }