/* EpiDrill landing page.
   Layout concept: an exam paper you scroll through. The hero is question 1 on a ruled
   sheet (red margin rule, bubbles A to D), the middle of the page drops into "ballpoint
   night" where one phone turns in 3D through four chapters, and the install guide closes
   it back on paper. Paper and graphite carry the page; ink blue is for actions; the
   highlighter is used once per screen at most. */
:root {
  --paper: #F7F8F5;
  --sheet: #FFFFFF;
  --graphite: #26282C;
  --graphite-soft: #5B5F66;
  --rule: #DCDFD8;
  --ink: #1E3FA0;
  --ink-dark: #16307D;
  --night: #0F1A45;
  --night-2: #16245A;
  --night-soft: #C3CBEA;
  --night-rule: rgba(255, 255, 255, .13);
  --highlight: #F7E15A;
  --correct: #1C7A4A;
  --correct-wash: #E6F3EC;
  --wrong: #B3261E;
  --wrong-wash: #FBEAE8;
  --margin-red: rgba(179, 38, 30, .32);
  --bezel: #17191E;

  --font-ui: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;

  --step-display: clamp(2.15rem, 1.15rem + 3.9vw, 4.25rem);
  --step-h2: clamp(1.95rem, 1.35rem + 2.4vw, 3.15rem);
  --step-h3: clamp(1.4rem, 1.2rem + .8vw, 1.75rem);
  --step-option: clamp(1.06rem, .94rem + .62vw, 1.42rem);
  --step-lead: clamp(1.06rem, 1rem + .3vw, 1.22rem);

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --wrap: 74rem;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--graphite);
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: clip;
}
img, svg { max-width: 100%; }
a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: var(--ink-dark); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.night :focus-visible { outline-color: var(--highlight); }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; text-wrap: pretty; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 3rem; padding: .75rem 1.3rem;
  border-radius: 10px; border: 1.5px solid transparent;
  font: 600 1rem/1.2 var(--font-ui);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--ink-dark); color: #fff; }
.btn-quiet { background: var(--sheet); color: var(--graphite); border-color: var(--rule); }
.btn-quiet:hover { border-color: #A9AEA5; color: var(--graphite); }
.btn-small { min-height: 2.5rem; padding: .5rem .95rem; font-size: .9375rem; border-radius: 9px; }
.night .btn-quiet { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .3); }
.night .btn-quiet:hover { border-color: #fff; }
.btn-highlight { background: var(--highlight); color: var(--graphite); }
.btn-highlight:hover { background: #F2D832; color: var(--graphite); }

/* ---------- Wordmark ---------- */
.wordmark { display: inline-flex; align-items: center; gap: .6rem; color: var(--graphite); text-decoration: none; }
.wordmark:hover { color: var(--graphite); }
.wordmark svg { flex: none; }
.wordmark span { font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40;
  background: rgba(247, 248, 245, .82);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.topbar.is-scrolled { border-bottom-color: var(--rule); }
.topbar { transition: border-color .2s ease, background-color .25s ease; }
.topbar.is-night { background: rgba(15, 26, 69, .84); border-bottom-color: rgba(255, 255, 255, .08); }
.topbar.is-night .wordmark { color: #fff; }
.topbar.is-night nav a:not(.btn) { color: var(--night-soft); }
.topbar.is-night nav a:not(.btn):hover { color: #fff; background: rgba(255, 255, 255, .08); }
.topbar.is-night .btn-primary { background: #fff; color: var(--night); }
.topbar .wrap { display: flex; align-items: center; gap: 1rem; min-height: 4rem; }
.topbar nav { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.topbar nav a:not(.btn) {
  color: var(--graphite-soft); font-weight: 600; font-size: .9688rem; text-decoration: none;
  padding: .5rem .7rem; border-radius: 8px;
}
.topbar nav a:not(.btn):hover { color: var(--graphite); background: rgba(38, 40, 44, .05); }
.topbar .only-wide { display: none; }
@media (min-width: 52rem) { .topbar .only-wide { display: inline-block; } }
@media (max-width: 23rem) { .topbar .signin { display: none; } }

/* ---------- Hero: question 1 ---------- */
.hero { padding-block: clamp(2rem, 1rem + 4vw, 4.5rem) clamp(3rem, 2rem + 4vw, 6rem); }
.hero .wrap { display: grid; gap: clamp(2.5rem, 4vw, 4rem); align-items: center; }
@media (min-width: 62rem) { .hero .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

.question { position: relative; padding-left: clamp(2.6rem, 2rem + 2vw, 3.6rem); min-width: 0; }
/* the red margin rule of an exam answer sheet */
.question::before {
  content: ""; position: absolute; top: -.5rem; bottom: -.5rem;
  left: clamp(1.9rem, 1.4rem + 1.8vw, 2.7rem);
  border-left: 1.5px solid var(--margin-red);
}
.question-meta { font-size: .9375rem; color: var(--graphite-soft); font-weight: 500; margin-bottom: .9rem; }
.question h1 {
  position: relative;
  font-family: var(--font-serif); font-weight: 600; font-optical-sizing: auto;
  font-size: var(--step-display); line-height: 1.06; letter-spacing: -.022em;
}
.question h1 .qno {
  position: absolute; left: calc(-1 * clamp(2.6rem, 2rem + 2vw, 3.6rem)); width: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  text-align: right; top: .18em;
  font: 700 clamp(1rem, .9rem + .4vw, 1.25rem)/1 var(--font-ui); letter-spacing: 0;
}
.options { list-style: none; margin: clamp(1.4rem, 1rem + 1.5vw, 2.2rem) 0 0; padding: 0; display: grid; gap: .2rem; }
.option {
  display: flex; align-items: center; gap: .95rem; width: 100%;
  margin-left: -.55rem; padding: .5rem .55rem; border-radius: 10px;
  background: none; border: 0; text-align: left; color: inherit; cursor: pointer;
  font: 400 var(--step-option)/1.3 var(--font-serif);
  transition: opacity .35s ease, background-color .15s ease;
}
.option:hover { background: rgba(38, 40, 44, .045); }
.bubble {
  position: relative; isolation: isolate; overflow: hidden; flex: none;
  display: inline-grid; place-items: center;
  width: 2.15em; height: 2.15em; border-radius: 50%;
  border: 1.5px solid var(--graphite);
  font: 700 .62em/1 var(--font-ui); color: var(--graphite);
}
.bubble::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1;
  background: var(--graphite); transform: scale(0);
  transition: transform .42s cubic-bezier(.3, .7, .2, 1);
}
.option.is-picked .bubble { color: #fff; }
.option.is-picked .bubble::before { transform: scale(1); }
.option.is-picked.is-right .bubble { border-color: var(--ink); }
.option.is-picked.is-right .bubble::before { background: var(--ink); }
.option.is-picked.is-wrong .bubble { border-color: var(--wrong); }
.option.is-picked.is-wrong .bubble::before { background: var(--wrong); }
.options.is-answered .option:not(.is-picked):not(.is-right) { opacity: .5; }
.option.is-right .text { font-weight: 600; }
.verdict {
  min-height: 1.6em; margin-top: .7rem; margin-left: calc(var(--step-option) * 1.333 + .95rem);
  font-size: .9688rem; font-weight: 600; color: var(--correct);
}
.verdict.is-wrong { color: var(--wrong); }
.hero .lead { margin-top: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); max-width: 34rem; font-size: var(--step-lead); color: var(--graphite-soft); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }
.hero .small { margin-top: 1rem; font-size: .9375rem; color: var(--graphite-soft); }

/* ---------- 3D: shared phone ---------- */
.phone {
  --pw: 18.5rem;
  position: relative; width: var(--pw); aspect-ratio: 9 / 19.4;
  border-radius: calc(var(--pw) * .155);
  background: var(--bezel);
  box-shadow: inset 0 0 0 1.5px #3B3F47, inset 0 0 0 4px #0B0C0F;
  font-size: calc(var(--pw) / 21);
  transform-style: preserve-3d;
}
/* the phone's thickness, seen when it turns */
.phone::before, .phone::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: #2A2D34;
}
.phone::before { transform: translateZ(-6px); background: #23262C; }
.phone::after { transform: translateZ(-12px); background: #1A1C21; box-shadow: 0 40px 70px -25px rgba(15, 26, 69, .55); }
.phone .screen {
  position: absolute; inset: calc(var(--pw) * .034); z-index: 1;
  border-radius: calc(var(--pw) * .125); overflow: hidden;
  background: var(--paper); color: var(--graphite);
  transform: translateZ(1px);
}
.phone .island {
  position: absolute; z-index: 5; top: .55em; left: 50%; transform: translateX(-50%);
  width: 27%; height: 1.45em; border-radius: 99px; background: #0B0C0F;
}

/* ---------- App screens drawn in HTML (sizes in em of the phone) ---------- */
.scr { position: absolute; inset: 0; display: flex; flex-direction: column; font-family: var(--font-ui); font-size: 1em; line-height: 1.4; }
.scr-top {
  display: flex; align-items: center; gap: .6em; padding: 2.5em 1.1em .7em;
  background: var(--sheet); border-bottom: 1px solid var(--rule);
  font-size: .8em; font-weight: 700;
}
.scr-top .chev { width: .9em; height: .9em; flex: none; color: var(--graphite-soft); }
.scr-top .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scr-top .timer { padding: .15em .5em; border-radius: .4em; background: var(--highlight); font-variant-numeric: tabular-nums; }
.scr-body { flex: 1; padding: .9em 1em 1em; display: flex; flex-direction: column; gap: .7em; min-height: 0; }
.scr-meta { display: flex; justify-content: space-between; align-items: baseline; font-size: .7em; color: var(--graphite-soft); }
.scr-meta b { color: var(--graphite); }
.mini-sheet {
  position: relative; background: var(--sheet); border: 1px solid var(--rule); border-radius: .7em;
  padding: .8em .8em .6em 2.1em;
  background-image: linear-gradient(to right, transparent 1.55em, var(--margin-red) 1.55em, var(--margin-red) calc(1.55em + 1px), transparent calc(1.55em + 1px));
}
.mini-sheet .n { position: absolute; left: .35em; top: .8em; width: 1em; text-align: right; font-size: .78em; font-weight: 800; }
.mini-sheet .stem { font: 600 .98em/1.35 var(--font-serif); }
.mini-sheet .hint { margin-top: .25em; font-size: .62em; color: var(--graphite-soft); }
.tf-row { display: flex; align-items: center; gap: .5em; padding: .55em 0; border-top: 1px solid var(--rule); font: 400 .76em/1.3 var(--font-serif); }
.tf-row:first-of-type { border-top: 0; margin-top: .3em; }
.tf-row .t { flex: 1; min-width: 0; }
.tf-row .t b { font-family: var(--font-ui); margin-right: .25em; }
.mb { /* mini bubble */
  display: inline-grid; place-items: center; flex: none;
  width: 1.75em; height: 1.75em; border-radius: 50%;
  border: 1px solid var(--graphite); font: 700 .78em/1 var(--font-ui); color: var(--graphite);
}
.mb.on { background: var(--graphite); color: #fff; }
.mb.blank { border-style: dashed; border-color: #A9AEA5; color: var(--graphite-soft); }
.mini-btn {
  display: grid; place-items: center; border-radius: .55em; padding: .62em; font-size: .78em; font-weight: 700;
  background: var(--ink); color: #fff;
}
.mini-btn.quiet { background: var(--sheet); color: var(--graphite); border: 1px solid var(--rule); }
.mini-grid { display: flex; flex-wrap: wrap; gap: .3em; margin-top: auto; padding-top: .7em; border-top: 1px solid var(--rule); }
.mini-grid i {
  display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%;
  border: 1px solid #A9AEA5; font: 700 .58em/1 var(--font-ui); font-style: normal; color: var(--graphite-soft); background: var(--sheet);
}
.mini-grid i.done { background: var(--graphite); border-color: var(--graphite); color: #fff; }
.mini-grid i.now { box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 3px var(--ink); color: var(--graphite); border-color: var(--graphite); }

.score { font: 600 3.4em/.9 var(--font-serif); letter-spacing: -.03em; }
.score small { font-size: .5em; }
.kv { display: flex; gap: 1.2em; font-size: .72em; color: var(--graphite-soft); }
.kv b { color: var(--graphite); }
.mini-h { font-size: .78em; font-weight: 800; padding-bottom: .3em; border-bottom: 1.5px solid var(--graphite); }
.meter-row { font-size: .68em; }
.meter-row div:first-child { display: flex; justify-content: space-between; }
.mini-meter { height: .5em; border-radius: 1em; background: #E6E8E3; overflow: hidden; margin-top: .3em; }
.mini-meter span { display: block; height: 100%; border-radius: inherit; background: var(--ink); }
.board { display: grid; gap: .1em; font-size: .72em; }
.board div { display: flex; gap: .7em; padding: .3em 0; border-bottom: 1px solid var(--rule); }
.board div:last-child { border-bottom: 0; }
.board .r { width: 1.4em; font-weight: 800; font-variant-numeric: tabular-nums; }
.board .nm { flex: 1; }
.board .me { font-weight: 700; }
.board .pc { font-weight: 700; font-variant-numeric: tabular-nums; }
.chip { display: inline-block; padding: .1em .45em; border-radius: .35em; font-size: .9em; font-weight: 700; white-space: nowrap; }
.chip.ok { background: var(--correct-wash); color: var(--correct); }
.chip.part { background: var(--highlight); color: var(--graphite); }
.chip.bad { background: var(--wrong-wash); color: var(--wrong); }
.review { display: grid; grid-template-columns: minmax(0, 1fr); font-size: .7em; }
.review div { display: flex; gap: .6em; align-items: baseline; padding: .4em 0; border-bottom: 1px solid var(--rule); font-family: var(--font-serif); }
.review div:last-child { border-bottom: 0; }
.review b { font-family: var(--font-ui); width: 1.4em; text-align: right; flex: none; }
.review span:nth-child(2) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.idx-card { color: var(--graphite); background: var(--sheet); border: 1px solid var(--rule); border-radius: .7em; overflow: hidden; box-shadow: 0 .6em 1.4em -1em rgba(38, 40, 44, .4); }
.idx-card .hd { padding: .55em .9em .45em; font-size: .62em; color: var(--graphite-soft); border-bottom: 1.5px solid #E2A29C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idx-card .bd { padding: .9em .9em 1em; }
.idx-card .lead-in { font: 400 .74em/1.35 var(--font-serif); color: var(--graphite-soft); }
.idx-card .item { margin-top: .35em; font: 400 1.08em/1.3 var(--font-serif); }
.idx-card .item b { font: 700 .7em var(--font-ui); margin-right: .25em; }
.idx-card .verdict-t { font: 600 1.5em/1 var(--font-serif); color: var(--correct); }
.idx-card .why { margin-top: .45em; font: 400 .78em/1.4 var(--font-serif); }
.idx-card .pair { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; margin-top: .9em; }

.streak-num { display: flex; align-items: flex-end; gap: .5em; }
.streak-num .big { font: 600 3.6em/.82 var(--font-serif); letter-spacing: -.03em; }
.streak-num .lbl { font-size: .72em; font-weight: 700; line-height: 1.25; padding-bottom: .1em; }
.streak-num .lbl span { display: block; font-weight: 400; color: var(--graphite-soft); }
.week { display: flex; gap: .32em; }
.week i {
  display: inline-grid; place-items: center; width: 2em; height: 2em; border-radius: 50%;
  border: 1px solid #A9AEA5; font: 700 .62em/1 var(--font-ui); font-style: normal; color: var(--graphite-soft); background: var(--sheet);
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.week i.on { background: var(--graphite); border-color: var(--graphite); color: #fff; }
.week i.today { box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 3px var(--ink); }
.panel { color: var(--graphite); background: var(--sheet); border: 1px solid var(--rule); border-radius: .8em; padding: .9em; display: grid; gap: .7em; }
.panel p { font-size: .7em; line-height: 1.4; }

/* ---------- Hero 3D stage ---------- */
.stage { position: relative; height: clamp(27rem, 22rem + 18vw, 38rem); perspective: 1400px; perspective-origin: 50% 40%; }
.stage .floor {
  position: absolute; left: 50%; bottom: 3%; width: 70%; height: 9%;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(15, 26, 69, .22), transparent);
  filter: blur(6px);
}
.rig {
  --mx: 0; --my: 0;
  position: absolute; inset: 0; display: grid; place-items: center;
  transform-style: preserve-3d;
  transform:
    rotateX(calc((1 - var(--p, 0)) * 16deg + 4deg + var(--my) * -6deg))
    rotateY(calc((1 - var(--p, 0)) * -24deg + var(--mx) * 8deg))
    rotateZ(calc((1 - var(--p, 0)) * 2.5deg));
}
.hero .phone { --pw: clamp(13.5rem, 10rem + 9vw, 17.5rem); }
.floater { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; font-size: calc(clamp(13.5rem, 10rem + 9vw, 17.5rem) / 21); }
.floater.card { width: 15em; }
.floater.card { transform: translate(-50%, -50%) translate3d(calc(-14.5em - var(--p, 0) * 3em), calc(-8.5em - var(--p, 0) * 2em), calc(-60px - var(--p, 0) * 60px)) rotateZ(-7deg); }
.floater.streak { width: 13.5em; transform: translate(-50%, -50%) translate3d(calc(10.5em + var(--p, 0) * 3em), calc(4.5em + var(--p, 0) * 1em), calc(120px + var(--p, 0) * 70px)) rotateZ(4deg); }
.floater.slip { width: 10.5em; transform: translate(-50%, -50%) translate3d(calc(-11em - var(--p, 0) * 2em), calc(10.5em + var(--p, 0) * 2em), calc(70px + var(--p, 0) * 50px)) rotateZ(-3deg); }
.floater .panel, .floater .idx-card { box-shadow: 0 1.6em 2.4em -1.4em rgba(15, 26, 69, .45); }
.panel .slip-score { font: 600 2.4em/.9 var(--font-serif); letter-spacing: -.03em; }
.panel .slip-score + p { font-size: .7em; color: var(--graphite-soft); margin-top: .2em; }
@media (max-width: 30rem) {
  .floater.card { transform: translate(-50%, -50%) translate3d(-7em, -13.5em, -60px) rotateZ(-7deg); }
  .floater.streak { transform: translate(-50%, -50%) translate3d(6.2em, 7em, 120px) rotateZ(4deg); }
  .floater.slip { transform: translate(-50%, -50%) translate3d(-7.2em, 11.5em, 70px) rotateZ(-3deg); }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--section); }
.section-head { max-width: 40rem; }
.section-head h2 { font: 600 var(--step-h2)/1.08 var(--font-serif); letter-spacing: -.02em; }
.section-head p { margin-top: 1rem; font-size: var(--step-lead); color: var(--graphite-soft); }
.night .section-head p { color: var(--night-soft); }

/* ---------- The course, as a ring of index cards ---------- */
.course { overflow: clip; }
.ring-stage { position: relative; height: clamp(17rem, 14rem + 10vw, 23rem); margin-top: clamp(2rem, 4vw, 3.5rem); perspective: 1500px; perspective-origin: 50% 30%; }
.ring {
  --n: 14; --r: 520px; --cw: clamp(9.5rem, 8rem + 5vw, 13.5rem);
  position: absolute; left: 50%; top: 50%; width: var(--cw); height: calc(var(--cw) * 1.18);
  margin: calc(var(--cw) * -.59) 0 0 calc(var(--cw) * -.5);
  list-style: none; padding: 0;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--r) * -1)) rotateX(-7deg) rotateY(calc(var(--p, 0) * -300deg + 20deg));
}
.ring li { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(var(--r)); }
.ring .face {
  position: absolute; inset: 0; border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 1px solid var(--rule);
}
.ring .front {
  background: var(--sheet); padding: 1em 1.05em; display: flex; flex-direction: column;
  box-shadow: 0 18px 30px -22px rgba(15, 26, 69, .45);
}
.ring .front .top { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; color: var(--graphite-soft); padding-bottom: .55em; border-bottom: 1.5px solid #E2A29C; }
.ring .front h3 { margin-top: .7em; font: 600 clamp(1.08rem, .95rem + .5vw, 1.35rem)/1.15 var(--font-serif); letter-spacing: -.01em; }
.ring .front .count { margin-top: auto; display: flex; align-items: center; justify-content: space-between; font-size: .875rem; font-weight: 600; }
.ring .dots { display: flex; gap: 3px; }
.ring .dots i { width: .55rem; height: .55rem; border-radius: 50%; border: 1px solid var(--graphite); }
.ring .dots i:nth-child(3) { background: var(--graphite); }
.ring .back {
  transform: rotateY(180deg);
  background-color: #FBFCFA;
  background-image:
    linear-gradient(to right, transparent 1.4rem, var(--margin-red) 1.4rem, var(--margin-red) calc(1.4rem + 1px), transparent calc(1.4rem + 1px)),
    repeating-linear-gradient(to bottom, transparent 0, transparent 1.35rem, rgba(30, 63, 160, .12) 1.35rem, rgba(30, 63, 160, .12) calc(1.35rem + 1px));
}
.course-foot { margin-top: clamp(1.5rem, 3vw, 2.5rem); display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: center; color: var(--graphite-soft); font-size: .9688rem; }
.course-foot b { color: var(--graphite); font-variant-numeric: tabular-nums; }

/* ---------- Ballpoint night: the phone that turns ---------- */
.night {
  position: relative; background: var(--night); color: #fff;
  background-image: radial-gradient(60rem 40rem at 75% 45%, var(--night-2), transparent 70%);
}
.night a:not(.btn) { color: var(--highlight); }
.story { position: relative; }
.story-intro { padding-top: var(--section); }
.chapters { list-style: none; margin: 0; padding: 0; }
.chapter { padding-block: 2.5rem; max-width: 30rem; }
.chapter .num {
  display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .55); font-weight: 700; font-size: .9375rem;
}
.chapter > h3 { margin-top: 1rem; font: 600 var(--step-h3)/1.15 var(--font-serif); letter-spacing: -.01em; }
.chapter > p { margin-top: .8rem; color: var(--night-soft); font-size: var(--step-lead); }
.chapter > ul { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: .45rem; color: var(--night-soft); font-size: .9688rem; }
.chapter > ul > li { display: flex; gap: .65rem; }
.chapter > ul > li::before { content: ""; flex: none; width: .55rem; height: .55rem; margin-top: .55rem; border-radius: 50%; background: var(--highlight); }
.story-phone-wrap { display: none; }
.chapter-phone { margin-top: 2rem; display: grid; place-items: center; perspective: 1200px; }
.chapter-phone .phone { --pw: 14.5rem; transform: rotateX(8deg) rotateY(-14deg); }
.story-dots { display: none; }

/* Pinned mode, switched on by landing.js (motion allowed, JS running) */
.motion .story { height: calc(var(--chapters, 4) * 95svh + 100svh); }
.motion .story-sticky {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: grid; align-items: center;
}
.motion .story-grid {
  width: 100%; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 0;
  padding-top: calc(4.5rem + env(safe-area-inset-top, 0px)); padding-bottom: 1rem;
}
.motion .chapters { position: relative; min-height: 13.5rem; }
.motion .chapter {
  position: absolute; inset: 0 auto auto 0; padding: 0; width: 100%;
  opacity: calc(1 - max(var(--d, 9), calc(var(--d, 9) * -1)) * 2.2);
  transform: translateY(calc(var(--d, 0) * -2.2rem));
  pointer-events: none;
}
.motion .chapter.is-active { pointer-events: auto; }
.motion .chapter .num { display: none; }
.motion .chapter-phone { display: none; }
.motion .chapter > ul { display: none; }
.motion .story-phone-wrap { display: grid; place-items: center; perspective: 1300px; min-height: 0; height: 100%; position: relative; container-type: size; }
.motion .story-dots { display: flex; gap: .45rem; margin-bottom: 1rem; }
.story-dots i {
  display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .45); font: 700 .8125rem/1 var(--font-ui); font-style: normal; color: rgba(255, 255, 255, .75);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.story-dots i.on { background: #fff; border-color: #fff; color: var(--night); }
.story-phone {
  --pw: 13rem;
  --pw: min(16rem, 41cqh);
  transform-style: preserve-3d; position: relative;
}
.story-phone .scr { opacity: calc(1 - max(var(--d, 9), calc(var(--d, 9) * -1)) * 2.4); transform: translateY(calc(var(--d, 0) * -1.2em)); }
.pop-card {
  position: absolute; left: 50%; top: 41%; opacity: 0; width: calc(var(--pw) * .82); font-size: calc(var(--pw) / 21);
  transform-style: preserve-3d; pointer-events: none;
}
.pop-card .side { position: absolute; inset: 0 auto auto 0; width: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pop-card .side.back { transform: rotateY(180deg); }
.pop-card .idx-card { box-shadow: 0 2em 3em -1.5em rgba(0, 0, 0, .55); }
.glow { position: absolute; left: 50%; top: 52%; width: 120%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(56, 92, 214, .35), transparent); pointer-events: none; }

@media (min-width: 62rem) {
  .motion .story-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-rows: 1fr; align-items: center; padding-top: 4rem; gap: 3rem; }
  .motion .chapters { min-height: 22rem; }
  .motion .chapter { top: 50%; transform: translateY(calc(-50% + var(--d, 0) * -3rem)); }
  .motion .chapter > ul { display: grid; }
  .motion .story-dots { position: absolute; top: calc(50% - 15rem); }
  .story-phone { --pw: 17rem; --pw: min(18.5rem, 42cqh); }
}

/* ---------- Checked before you see it ---------- */
.checked .wrap { display: grid; gap: clamp(2rem, 5vw, 5rem); }
@media (min-width: 62rem) { .checked .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.steps { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 1.75rem; }
.steps::before { content: ""; position: absolute; left: 1.15rem; top: 1rem; bottom: 1rem; border-left: 1.5px solid var(--rule); }
.steps li { position: relative; display: grid; grid-template-columns: 2.3rem minmax(0, 1fr); gap: 1.1rem; }
.steps .num {
  position: relative; display: inline-grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--graphite); font-weight: 700;
}
.steps li:last-child .num { background: var(--graphite); color: #fff; }
.steps h3 { font: 600 1.25rem/1.25 var(--font-serif); padding-top: .25rem; }
.steps p { margin-top: .35rem; color: var(--graphite-soft); }
.report-demo { margin-top: 1rem; display: inline-flex; align-items: center; gap: .6rem; padding: .55rem .8rem; border: 1px dashed #B9BEB4; border-radius: 9px; font-size: .9375rem; color: var(--graphite-soft); background: var(--sheet); }
.report-demo b { color: var(--graphite); font-weight: 600; }

/* ---------- Install ---------- */
.install { background: var(--sheet); border-block: 1px solid var(--rule); }
.install .wrap { display: grid; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
@media (min-width: 62rem) { .install .wrap { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.tabs { display: none; margin-top: 1.75rem; padding: .3rem; border-radius: 12px; background: var(--paper); border: 1px solid var(--rule); width: max-content; max-width: 100%; }
.js .tabs { display: inline-flex; }
.tabs button {
  border: 0; background: none; cursor: pointer; padding: .6rem 1.1rem; border-radius: 9px;
  font: 600 .9688rem/1.2 var(--font-ui); color: var(--graphite-soft);
  display: inline-flex; align-items: center; gap: .5rem;
}
.tabs button[aria-selected="true"] { background: var(--sheet); color: var(--graphite); box-shadow: 0 1px 2px rgba(38, 40, 44, .12), 0 0 0 1px var(--rule); }
.tabs svg { width: 1.05rem; height: 1.05rem; }
.howto { margin-top: 1.75rem; }
.js .howto[hidden] { display: none; }
.howto h3 { font: 600 1.35rem/1.2 var(--font-serif); }
.js .howto h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.howto ol { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 1.1rem; counter-reset: step; }
.howto li { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); gap: 1rem; counter-increment: step; }
.howto li::before {
  content: counter(step); display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  border: 1.5px solid var(--graphite); font-weight: 700; font-size: .9375rem;
}
.howto li p { padding-top: .2rem; }
.howto .note { margin-top: 1.4rem; padding: .9rem 1rem; border-radius: 10px; background: var(--paper); font-size: .9375rem; color: var(--graphite-soft); }
.key { display: inline-flex; align-items: center; gap: .3rem; padding: .05rem .45rem; border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 6px; background: var(--sheet); font-weight: 600; font-size: .9375rem; color: var(--graphite); white-space: nowrap; }
.key svg { width: 1rem; height: 1rem; }
.install-now { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.install-now[hidden] { display: none; }
.install-state { margin-top: 1.5rem; padding: .9rem 1rem; border-radius: 10px; background: var(--correct-wash); color: var(--correct); font-weight: 600; }
.install-state[hidden] { display: none; }

.device-stage { display: grid; place-items: center; perspective: 1300px; min-height: 30rem; }
.device {
  --pw: clamp(14rem, 11rem + 8vw, 17rem);
  transform-style: preserve-3d;
  transform: rotateX(calc((1 - var(--p, 1)) * 28deg + 4deg)) rotateY(calc((1 - var(--p, 1)) * -22deg - 10deg)) rotateZ(calc((1 - var(--p, 1)) * -3deg));
}
.device[hidden] { display: none; }
.br-page { position: absolute; inset: 0; display: flex; flex-direction: column; }
.br-bar { display: flex; align-items: center; gap: .5em; padding: 2.3em .8em .6em; background: #EEF0EC; }
.br-bar.bottom { padding: .6em .8em 1.6em; margin-top: auto; border-top: 1px solid #DADDD6; }
.br-url { flex: 1; min-width: 0; padding: .45em .8em; border-radius: 99px; background: #fff; font-size: .62em; color: var(--graphite-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid #E1E3DE; }
.br-ico { width: 1.6em; height: 1.6em; display: grid; place-items: center; border-radius: 50%; color: var(--graphite); flex: none; }
.br-ico svg { width: 1.05em; height: 1.05em; }
.br-ico.hit { background: var(--highlight); box-shadow: 0 0 0 .35em rgba(247, 225, 90, .45); }
.br-content { flex: 1; padding: 1.1em; display: grid; align-content: start; gap: .7em; opacity: .55; }
.br-content .ln { height: .55em; border-radius: 1em; background: #DFE2DB; }
.br-content .hl { font: 600 1.15em/1.15 var(--font-serif); }
.br-content .op { display: flex; align-items: center; gap: .5em; font: 400 .72em/1.3 var(--font-serif); }
.br-content .op i { width: 1.6em; height: 1.6em; border-radius: 50%; border: 1px solid var(--graphite); flex: none; }
.br-content .op i.on { background: var(--ink); border-color: var(--ink); }
.br-content .cta { margin-top: .4em; height: 2.2em; width: 60%; border-radius: .5em; background: var(--ink); }
.menu-sheet {
  position: absolute; z-index: 3; background: #fff; border-radius: .8em;
  box-shadow: 0 1.2em 2.4em -1em rgba(15, 26, 69, .45), 0 0 0 1px rgba(0, 0, 0, .06);
  font-size: .7em; padding: .4em 0;
}
.menu-sheet.android { top: 4.7em; right: .9em; width: 14em; }
.menu-sheet.ios { left: .6em; right: .6em; bottom: .8em; border-radius: 1.2em; padding: .6em 0 .4em; }
.menu-sheet .it { display: flex; align-items: center; gap: .8em; padding: .62em 1.1em; color: var(--graphite); }
.menu-sheet .it svg { width: 1.2em; height: 1.2em; flex: none; color: var(--graphite-soft); }
.menu-sheet .it.hit { background: var(--highlight); font-weight: 700; }
.menu-sheet .it.hit svg { color: var(--graphite); }
.menu-sheet .sep { height: 1px; background: var(--rule); margin: .3em 0; }
.menu-sheet .apps { display: flex; gap: .9em; padding: .2em 1.1em .7em; border-bottom: 1px solid var(--rule); margin-bottom: .3em; }
.menu-sheet .apps i { width: 2.6em; height: 2.6em; border-radius: .7em; background: #E7E9E4; }
.menu-sheet .toggle-row { justify-content: space-between; }
.switch { width: 2.4em; height: 1.4em; border-radius: 1em; background: var(--correct); position: relative; flex: none; }
.switch::after { content: ""; position: absolute; top: .15em; right: .15em; width: 1.1em; height: 1.1em; border-radius: 50%; background: #fff; }

/* ---------- FAQ ---------- */
.faq .wrap { display: grid; gap: clamp(2rem, 5vw, 5rem); }
@media (min-width: 62rem) { .faq .wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }
.faq-list { border-top: 1.5px solid var(--graphite); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1rem;
  padding: 1.15rem 0; font: 600 1.15rem/1.3 var(--font-serif);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { margin-left: auto; flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1.5px solid var(--graphite); position: relative; }
.faq summary .plus::before, .faq summary .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: .7rem; height: 1.5px; background: var(--graphite); transform: translate(-50%, -50%); transition: transform .2s ease; }
.faq summary .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] summary .plus { background: var(--graphite); }
.faq details[open] summary .plus::before { background: #fff; }
.faq details[open] summary .plus::after { transform: translate(-50%, -50%) rotate(0deg); background: #fff; }
.faq details p { padding-bottom: 1.2rem; max-width: 40rem; color: var(--graphite-soft); }

/* ---------- Last call ---------- */
.last { text-align: center; }
.last h2 { font: 600 clamp(2.2rem, 1.3rem + 3.6vw, 4.2rem)/1.05 var(--font-serif); letter-spacing: -.022em; }
.last h2 .marked {
  background: linear-gradient(transparent 14%, var(--highlight) 14%, var(--highlight) 86%, transparent 86%);
  padding: 0 .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.last p { margin: 1.1rem auto 0; max-width: 32rem; color: var(--graphite-soft); font-size: var(--step-lead); }
.last .actions { justify-content: center; }

.footer { border-top: 1px solid var(--rule); padding-block: 2rem calc(2rem + env(safe-area-inset-bottom, 0px)); }
.footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.footer p { font-size: .9375rem; color: var(--graphite-soft); }
.footer nav { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: .9375rem; font-weight: 600; }

/* Question 1: the answer is shaded in once, on arrival */
.option.is-right:not(.is-picked) .bubble { border-color: var(--correct); border-width: 2.5px; color: var(--correct); }
@keyframes shade { from { transform: scale(0); } }
@keyframes letter { from { color: var(--graphite); border-color: var(--graphite); } }
@keyframes rise { from { opacity: 0; transform: translateY(.4rem); } }
@keyframes undim { from { opacity: 1; } }
.motion .options.intro .option.is-right .bubble { animation: letter .01s linear .95s backwards; }
.motion .options.intro .option.is-right .bubble::before { animation: shade .55s cubic-bezier(.3, .7, .2, 1) .8s backwards; }
.motion .options.intro .option:not(.is-right) { animation: undim .5s ease 1.2s backwards; }
.motion .options.intro + .verdict { animation: rise .45s ease 1.3s backwards; }

/* Chapter 3: the card on screen fades while its copy lifts off */
.story-phone [data-screen="2"] .idx-card { opacity: calc(1 - var(--k, 0)); }
/* Chapter 4: the week fills in */
.motion .story-phone [data-week] i.on { background: var(--sheet); color: var(--graphite-soft); border-color: #A9AEA5; }
.motion .story[data-chapter="3"] .story-phone [data-week] i.on { background: var(--graphite); color: #fff; border-color: var(--graphite); }

/* Installed app: no need to explain installing */
@media (display-mode: standalone) { .hide-installed { display: none !important; } }

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