/* DoctorNote: "the study planner", direction B "notes on the planner" (CLAUDE.md section 7).
   Every piece of information is a physical note on a student's planner. What each element means:
   - dot grid on <body>: planner paper
   - planner page (.planner, .price-sheet, .tabs__panel): the student's week; frames the hero and the prices
   - the doctor's note (.planner__note): the letter, as an illustration only, never a sample of its wording
   - sticky note (.sticky, .fact, .price-line, .closing__row, .pen-note): one fact to act on. Yellow = the key fact or action
   - letter colours (.letter--work, --duties, --study, --travel, --fly set --letter): each letter has its own colour, on its
     page flag, its planner page's header strip, the bar over the dates it covers, its note's left edge and its lists
   - index card (.card, .rule-list): a list. Header line: the letter's colour, red not for, ink neutral (all letters)
   - page flags (.tabs__tab): a choice (the letter picker), each in its letter's colour
   - paper clip (.clip): the note is attached to that page
   - pen (cobalt, Caveat): ticks on facts, arrows to what they explain, the deadline circle, handwritten questions
   - highlighter (mark.hl, a drawn swipe): the one most important fact in a section, never on a heading
   No gradients, no shadows; radius 4px on pages and 2-3px on paper notes. */

/* ============================================================== fonts */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/bricolage-grotesque-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/assets/fonts/inter-400-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("/assets/fonts/caveat-500-700-latin.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027, U+20AC; }
/* Metric-matched fallbacks (measured against Liberation Sans, Arial's metric twin) so the swap doesn't shift layout. */
@font-face { font-family: "Bricolage Fallback"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Helvetica Bold"); size-adjust: 92.4%; ascent-override: 100.6%; descent-override: 29.2%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica"); size-adjust: 107.5%; ascent-override: 90.1%; descent-override: 22.4%; line-gap-override: 0%; }
@font-face { font-family: "Caveat Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica"); size-adjust: 77.6%; ascent-override: 123.7%; descent-override: 38.6%; line-gap-override: 0%; }

/* ============================================================== tokens */
:root {
  --paper: #F4F5F8;
  --sheet: #FFFFFF;
  --ink: #1E1B3A;
  --muted: #55536E;
  --cobalt: #2F45E0;
  --highlight: #FFE14D;
  --highlight-hover: #FAD62E;
  --highlight-press: #EBC414;
  /* One colour per letter (user feedback 18 Oct 2026: every flag distinct). All take ink text at 7.9:1 or more. */
  --work: #8FD9B6;
  --duties: #FFBE8C;
  --study: #9DB0FF;
  --travel: #F5A9C9;
  --fly: #8CD3EE;
  --rule: #DCDEE7;
  --warn: #B42318;
  /* The desk the planner lies on: header, footer and the margins round the planner sheet. */
  --desk: #1E1B3A;
  --desk-text: #FFFFFF;
  --desk-muted: #BDBBD1;
  --desk-line: #3B3763;
  --sheet-m: 0px;     /* desk showing either side of the sheet */
  --sheet-max: 1480px;

  --font-head: "Bricolage Grotesque", "Bricolage Fallback", Arial, sans-serif;
  --font-body: "Inter", "Inter Fallback", Arial, sans-serif;
  --font-pen: "Caveat", "Caveat Fallback", "Comic Sans MS", cursive;

  /* 4px scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 28px; --s8: 32px;
  --s10: 40px; --s12: 48px; --s14: 56px; --s16: 64px; --s18: 72px; --s20: 80px;
  --section: clamp(48px, 6vw, 80px);
  --gutter: clamp(16px, 4vw, 32px);
  --container: 1160px;
  --radius: 4px;
  --paper-radius: 2px;
  /* Planner paper: dots every 24px. */
  --dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='1.5' cy='1.5' r='1.1' fill='%231E1B3A' fill-opacity='.16'/%3E%3C/svg%3E");
  /* The planner's spiral binding: a wire loop through a punched hole, every 32px. */
  --binding: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='36'%3E%3Ccircle cx='16' cy='27' r='4.5' fill='%231E1B3A'/%3E%3Crect x='12' y='2' width='8' height='27' rx='4' fill='none' stroke='%231E1B3A' stroke-width='4.5'/%3E%3Crect x='12' y='2' width='8' height='27' rx='4' fill='none' stroke='%23D9DAE4' stroke-width='2'/%3E%3C/svg%3E");
}
@media (min-width: 640px) { :root { --sheet-m: 12px; } }
@media (min-width: 1100px) { :root { --sheet-m: 24px; } }
:root {
  /* Ruled lines for pen writing on index cards: one study-blue line every 36px. */
  --ruled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='36'%3E%3Crect y='35' width='8' height='1' fill='%239DB0FF'/%3E%3C/svg%3E");
  /* Highlighter: a drawn swipe, stretched to the marked words. */
  --swipe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M3 7c22-4 70-5 94-2l1 20c-30 3-70 4-96 1z' fill='%23FFE14D'/%3E%3C/svg%3E");
}

/* ============================================================== reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
:where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul, table) { margin: 0; }
:where(ul[class], ol[class]) { list-style: none; padding: 0; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
table { border-collapse: collapse; }
/* Tab panels ship with `hidden` so the page doesn't shift when JS starts; without JS every panel shows. */
[hidden] { display: none; }

/* ============================================================== base */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: 1.0625rem;           /* 17px */
  line-height: 1.5882;            /* 27px */
  color: var(--ink);
  background: var(--desk);
}
/* The planner sheet: dot-grid paper lying on the desk, bound by a spiral across its top. Anything that runs off
   the page (the hero planner on desktop) is cut at the sheet's edge. */
main { position: relative; flex: 1 0 auto; width: min(100% - 2 * var(--sheet-m), var(--sheet-max)); margin: 18px auto var(--s6); background: var(--paper) var(--dots) 12px 12px / 24px 24px; border-radius: 6px; overflow-x: clip; padding-top: var(--s4); }
main::before { content: ""; position: absolute; z-index: 3; left: var(--s5); right: var(--s5); top: -16px; height: 36px; background: var(--binding) left top / 32px 36px repeat-x; pointer-events: none; }
@media (max-width: 639px) { main { border-radius: 4px 4px 0 0; margin-bottom: 0; } }

h1, h2, h3 { font-family: var(--font-head); font-weight: 700; color: var(--ink); text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); line-height: 1.02; letter-spacing: -0.03em; font-variation-settings: "opsz" 96; }
h2 { font-size: clamp(1.5rem, 1.3rem + .9vw, 2rem); line-height: 1.1; letter-spacing: -0.02em; font-variation-settings: "opsz" 96; }
h3 { font-size: 1.1875rem; line-height: 1.3; letter-spacing: -0.005em; }
p, li, dd { text-wrap: pretty; }
strong, b { font-weight: 500; }

a { color: var(--cobalt); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; border-radius: 2px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: var(--s4); top: -100px; z-index: 50; padding: var(--s2) var(--s4); background: var(--sheet); border: 1.5px solid var(--ink); border-radius: var(--radius); color: var(--ink); }
.skip-link:focus { top: var(--s4); }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: var(--section); }
/* Adjacent blocks share one gap instead of doubling it. */
.section + .section, .hero + .section, .page-head + .section, .form-sec + .section, .section + .closing { padding-top: 0; }

/* Highlighter: a drawn swipe behind the single most important fact in a section. */
mark.hl { padding: 0 .2em; margin: 0 -.08em; background: var(--swipe) center / 100% 100% no-repeat; color: var(--ink); white-space: nowrap; }

/* Pen: cobalt handwriting. */
.pen { font-family: var(--font-pen); font-weight: 700; color: var(--cobalt); line-height: 1.1; }

/* Paper clip: the note is attached to the page under it. */
.clip { position: absolute; z-index: 2; width: 20px; height: 50px; max-width: none; overflow: visible; pointer-events: none; }
.clip path { fill: none; stroke: var(--ink); stroke-width: 1.75; stroke-linecap: round; }

/* ============================================================== buttons and links */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 var(--s5);
  border: 1.5px solid var(--ink); border-radius: var(--radius);
  background-color: var(--highlight); color: var(--ink);
  font: 500 1rem/1.2 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.btn:hover { background-color: var(--highlight-hover); text-decoration: none; }
.btn:active { background-color: var(--highlight-press); }
/* The arrow points where the button goes: it nudges that way on hover, and the button sinks a pixel when pressed. */
.btn__arrow { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background-color 150ms ease-out, transform 80ms ease-out; }
  .btn__arrow { transition: transform 180ms ease-out; }
  .btn:hover .btn__arrow { transform: translateX(3px); }
  .btn:active { transform: translateY(1px); }
}
.btn--ink { background-color: var(--ink); color: var(--highlight); }
.btn--ink:hover { background-color: #2D2952; }
.btn--ink:active { background-color: #0F0D20; }
.btn--plain { background-color: var(--sheet); }
.btn--plain:hover { background-color: var(--paper); }
.btn--plain:active { background-color: var(--rule); }
.btn--small { min-height: 40px; padding: 0 var(--s4); font-size: .9375rem; }

.more { font-weight: 500; }
.linkish { padding: 0; border: 0; background: none; color: var(--cobalt); font: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; cursor: pointer; }
.linkish:hover { text-decoration-thickness: 2px; }

/* ============================================================== header */
.site-header { position: sticky; top: 0; z-index: 10; background: var(--desk); color: var(--desk-text); }
.site-header :focus-visible, .site-footer :focus-visible { outline-color: var(--highlight); }
.site-header__inner { display: flex; align-items: center; gap: var(--s6); min-height: 72px; }
.logo { font: 700 1.3125rem/1 var(--font-head); letter-spacing: -0.02em; color: var(--desk-text); text-decoration: none; }
.logo:hover { text-decoration: none; }
.nav { margin-left: auto; }
.nav__list { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s6); }
.nav a { display: inline-block; padding-block: var(--s2); color: var(--desk-text); font-size: .9375rem; font-weight: 500; text-decoration: none; }
.nav a:hover { text-decoration: underline; }
.nav__extra { display: none; }
.menu-btn { display: none; min-height: 40px; padding: 0 var(--s4); border: 1px solid var(--desk-muted); border-radius: var(--radius); background: none; color: var(--desk-text); font-size: .9375rem; font-weight: 500; cursor: pointer; }

@media (max-width: 1099px) {
  .js .menu-btn { display: inline-flex; align-items: center; margin-left: auto; }
  .js .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0; background: var(--sheet); border-bottom: 1px solid var(--ink); }
  .js .site-header.is-open .nav { display: block; }
  .js .nav__list { flex-direction: column; gap: 0; width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; padding-block: var(--s2) var(--s4); }
  .js .nav__list a { display: block; padding-block: var(--s3); border-bottom: 1px solid var(--rule); color: var(--ink); font-size: 1rem; }
  .js .nav :focus-visible { outline-color: var(--cobalt); }
  .js .nav__extra { display: list-item; }
  /* Without JS the links wrap onto a second row. */
  html:not(.js) .site-header__inner { flex-wrap: wrap; padding-block: var(--s3); }
  html:not(.js) .nav { order: 3; width: 100%; margin-left: 0; }
}
@media (max-width: 519px) {
  .header-cta { display: none; }
}

/* ============================================================== letter colours */
/* Set on a page flag, a planner week, or a letter page's <main>; flags, header strips, cover bars, note edges and lists read it. */
.letter--work { --letter: var(--work); }
.letter--duties { --letter: var(--duties); }
.letter--study { --letter: var(--study); }
.letter--travel { --letter: var(--travel); }
.letter--fly { --letter: var(--fly); }

/* ============================================================== notes (shared) */
/* Sticky note: one fact to act on. Yellow = key fact or action. */
.sticky { --tilt: -2deg; position: relative; padding: var(--s5) var(--s5) var(--s6); background: var(--highlight); border: 1px solid var(--ink); border-radius: var(--paper-radius); transform: rotate(var(--tilt)); }
.sticky__text { font: 700 1.625rem/1.15 var(--font-pen); color: var(--ink); }
.sticky__text small { display: block; margin-top: var(--s1); font-size: 1.375rem; font-weight: 500; }

/* Index card: a list. Ruled for pen writing; the header line colour carries the meaning. */
.card { --tilt: -1deg; --card-line: var(--ink); position: relative; padding: var(--s6) var(--s7) var(--s7); background-color: var(--sheet); border: 1px solid var(--ink); border-radius: 3px; transform: rotate(var(--tilt)); }
.card--warn { --card-line: var(--warn); }
.card__title { padding-bottom: var(--s3); border-bottom: 2px solid var(--card-line); font-size: 1.375rem; }
.card .clip { top: -28px; left: 28px; }

/* Pen ticks: each marks a fact the reader can rely on. Written on the card's ruled lines. */
.ticks { background: var(--ruled) 0 0 / 8px 36px repeat; }
.ticks li { position: relative; padding-left: var(--s10); font: 500 1.5rem/36px var(--font-pen); color: var(--ink); }
.ticks li::before { content: ""; position: absolute; left: 10px; top: 8px; width: 9px; height: 16px; border: solid var(--cobalt); border-width: 0 3px 3px 0; border-radius: 1px; transform: rotate(40deg); transform-origin: 60% 60%; }

/* ============================================================== shared page parts */
.page-head { padding-block: clamp(40px, 5vw, 64px) var(--section); }
.page-head h1 { max-width: 22ch; }
/* Letter pages: that letter's example week from the homepage planner (same marks, same sequence), beside the offer. */
.page-head--split { overflow-x: clip; }
.page-head--split .hero__grid { align-items: center; }
@media (min-width: 1000px) { .page-head--split .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s12); } }
.lead { margin-top: var(--s4); max-width: 38em; font-size: 1.1875rem; line-height: 1.55; }
/* The page's key fact (price and refund) as a yellow sticky note. */
.price-line { --tilt: -1.5deg; display: block; width: fit-content; max-width: 100%; margin-top: var(--s6); padding: var(--s3) var(--s5) var(--s4); background: var(--highlight); border: 1px solid var(--ink); border-radius: var(--paper-radius); transform: rotate(var(--tilt)); font: 700 1.5rem/1.15 var(--font-pen); }
.price-line mark.hl { padding: 0; margin: 0; background: none; }
.price-line [aria-hidden] { font-family: var(--font-body); font-size: 1.125rem; }
.page-head .btn, .page-head .actions { margin-top: var(--s6); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s6); }

/* Two columns side by side (a comparison). */
.split { display: grid; gap: var(--s10); }
.split > * { min-width: 0; }
.split h2 { margin-bottom: var(--s5); }
@media (min-width: 760px) { .split { grid-template-columns: 1fr 1fr; gap: var(--s16); } }

/* A list on an index card, ticked in pen. Header colour: the letter's colour on its page, red not for (crossed), else ink. */
.rule-list { --tilt: -.8deg; --rule-color: var(--letter, var(--ink)); position: relative; display: grid; gap: var(--s3); padding: var(--s6) var(--s6) var(--s6) var(--s5); background: var(--sheet); border: 1px solid var(--ink); border-top: 6px solid var(--rule-color); border-radius: 3px; transform: rotate(var(--tilt)); }
.rule-list li { position: relative; max-width: 44ch; padding-left: var(--s10); font-size: 1.125rem; line-height: 1.45; }
.rule-list li::before { content: ""; position: absolute; left: 10px; top: .1em; width: 8px; height: 15px; border: solid var(--cobalt); border-width: 0 3px 3px 0; border-radius: 1px; transform: rotate(40deg); }
.rule-list--warn { --tilt: .8deg; --rule-color: var(--warn); }
.rule-list--warn li::before, .rule-list--warn li::after { left: 6px; top: .62em; width: 18px; height: 3px; border: 0; border-radius: 2px; background: var(--warn); transform: rotate(45deg); }
.rule-list--warn li::after { content: ""; position: absolute; transform: rotate(-45deg); }

/* Plain list: a pen dash. */
.plain-list { display: grid; gap: var(--s3); }
.plain-list li { position: relative; max-width: 48ch; padding-left: var(--s6); }
.plain-list li::before { content: "–"; position: absolute; left: 2px; top: -.1em; color: var(--cobalt); font: 700 1.375rem/1.2 var(--font-pen); }

/* Ledger: label/value rows (rules and limits, what you need, the tab panels). */
.ledger { display: grid; }
.ledger > div { display: grid; gap: var(--s1) var(--s8); padding-block: var(--s3); border-top: 1px solid var(--rule); }
.ledger > div:first-child { border-top: 0; padding-top: 0; }
.ledger dt { font: 700 1.0625rem/1.4 var(--font-head); }
.ledger dd { max-width: 60ch; }
@media (min-width: 760px) { .ledger > div { grid-template-columns: 220px minmax(0, 1fr); } }
.ledger--letter { padding-left: var(--s5); border-left: 4px solid var(--letter, var(--ink)); }
.ledger--ruled > div:first-child { border-top: 1px solid var(--rule); padding-top: var(--s3); }
.ledger--ruled > div:last-child { border-bottom: 1px solid var(--rule); }

/* A single fact: a yellow sticky note with a handwritten title. */
.fact { --tilt: -.6deg; position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s6); max-width: 920px; padding: var(--s6) var(--s7); background: var(--highlight); border: 1px solid var(--ink); border-radius: var(--paper-radius); transform: rotate(var(--tilt)); }
.fact p { max-width: 52em; font-size: 1.125rem; line-height: 1.5; font-weight: 500; }
.fact__title { font: 700 1.75rem/1.05 var(--font-pen); letter-spacing: 0; color: var(--ink); }

/* A section heading followed by its content. */
.block-h { margin-bottom: var(--s5); }

/* Facts in a grid (company details). */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s5) var(--s8); }
.facts dt { color: var(--muted); font-size: .875rem; font-weight: 500; }
.facts dd { margin-top: var(--s1); }

/* A sequence: steps written along one pen line, in order. Horizontal from 760px, vertical below and in .line--vertical. */
.line { position: relative; display: grid; gap: var(--s7); padding-left: var(--s8); }
.line::before { content: ""; position: absolute; left: 5px; top: 10px; bottom: 10px; width: 2px; background: var(--cobalt); transform-origin: top; }
.line__point { position: relative; min-width: 0; }
.line__point::before { content: ""; position: absolute; left: calc(-1 * var(--s8)); top: 6px; width: 12px; height: 12px; border: 2px solid var(--cobalt); border-radius: 50%; background: var(--cobalt); }
.line__label { font: 700 1.375rem/1.2 var(--font-head); font-variation-settings: "opsz" 96; letter-spacing: -0.01em; }
.line__time { margin-top: var(--s1); color: var(--cobalt); font: 700 1.5rem/1.1 var(--font-pen); }
.line__time mark.hl { color: var(--ink); }
.line__text { margin-top: var(--s2); max-width: 30ch; }
@media (min-width: 760px) {
  .line:not(.line--vertical) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s8); padding-left: 0; padding-top: var(--s10); }
  .line:not(.line--vertical)::before { left: 0; right: 0; top: 5px; bottom: auto; width: auto; height: 2px; transform-origin: left; }
  .line:not(.line--vertical) .line__point::before { left: 0; top: calc(-1 * var(--s10)); }
}
.line--vertical { gap: var(--s10); }
.line--vertical .line__text { max-width: 52ch; }

/* Q&A, open: questions handwritten in pen, answers typeset. Two columns from 760px. */
.qa-grid { display: grid; gap: var(--s8) var(--s14); }
.qa-grid > div { min-width: 0; padding-top: var(--s4); border-top: 1px solid var(--rule); }
.qa-grid dt { color: var(--cobalt); font: 700 1.75rem/1.1 var(--font-pen); }
.qa-grid dd { margin-top: var(--s2); max-width: 56ch; }
@media (min-width: 760px) { .qa-grid { grid-template-columns: 1fr 1fr; } }

/* Q&A, collapsible (the FAQ page). Questions in pen. */
.qa-layout { display: grid; gap: var(--s8); }
.qa-index { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); font-weight: 500; }
@media (min-width: 960px) {
  .qa-layout { grid-template-columns: 220px minmax(0, 1fr); gap: var(--s16); }
  .qa-index { position: sticky; top: 96px; align-self: start; flex-direction: column; }
}
.qa-group + .qa-group { margin-top: var(--s12); }
.qa-group > h2 { margin-bottom: var(--s2); font-size: 1.5rem; }
.qa { border-bottom: 1px solid var(--rule); }
.qa summary { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); padding-block: var(--s3); color: var(--cobalt); font: 700 1.625rem/1.15 var(--font-pen); list-style: none; cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; flex: none; color: var(--cobalt); font: 500 1.375rem/1 var(--font-body); }
.qa[open] summary::after { content: "\2212"; }
.qa__a { max-width: 64ch; padding-bottom: var(--s5); }
.qa__a p + p { margin-top: var(--s3); }

/* Long text (terms, privacy, cookies). */
.prose { max-width: 68ch; }
.prose h2 { margin-top: var(--s10); margin-bottom: var(--s2); font-size: 1.375rem; line-height: 1.25; font-variation-settings: normal; letter-spacing: -0.01em; }
.prose h2:first-child { margin-top: 0; }
.prose p + p, .prose p + ul, .prose ul + p, .prose p + dl, .prose dl + p { margin-top: var(--s3); }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: var(--s1); }
.standfirst { margin-top: var(--s3); color: var(--muted); }
.aside-line { margin-top: var(--s6); color: var(--muted); }
.aside-line a { font-weight: 500; }

/* ============================================================== hero (homepage) */
.hero { padding-block: clamp(32px, 4vw, 56px) var(--section); overflow-x: clip; }
.hero__grid { display: grid; gap: var(--s10); align-items: center; }
.hero__grid > * { min-width: 0; }
@media (min-width: 1000px) { .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 64px); } }
.hero h1 { max-width: 13ch; }
.hero__sub { margin-top: var(--s6); max-width: 32em; font-size: 1.1875rem; line-height: 1.55; }
.hero__price { margin-top: var(--s5); font-weight: 500; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin-top: var(--s7); }
.hero__actions .pen { font-size: 1.625rem; }

/* The planner: the student's week, handwritten. Cropped by the right edge of the screen on desktop. */
.planner { --row: 46px; --head: 52px; --date-w: 92px; --bleed: 0px; position: relative; }
.planner__page { position: relative; background: var(--sheet); border: 1px solid var(--ink); border-radius: var(--radius); }
@media (min-width: 640px) {
  .planner { --row: 60px; --head: 64px; --date-w: 104px; }
  .planner__week { padding-bottom: var(--s18); }
}
@media (min-width: 1000px) {
  /* The week runs off the right edge of the planner sheet. */
  .planner { --bleed: max(var(--gutter), (min(100vw - 2 * var(--sheet-m), var(--sheet-max)) - var(--container)) / 2); margin-right: calc(-1 * var(--bleed)); }
  .planner__page { border-right: 0; border-radius: var(--radius) 0 0 var(--radius); }
  .planner__head { border-top-right-radius: 0; }
}
/* The page's header strip takes the letter's colour, so the chosen flag and its page read as one divider. */
.planner__head { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); height: var(--head); padding-inline: var(--s6); border-bottom: 1.5px solid var(--ink); border-radius: 3px 3px 0 0; background: var(--letter, transparent); }
.planner__month { font: 700 1.75rem/1 var(--font-head); font-variation-settings: "opsz" 96; letter-spacing: -0.02em; }
.planner__range { color: var(--ink); font-size: .8125rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
@media (min-width: 1000px) { .planner__range { margin-right: calc(var(--bleed) + var(--s2)); } }
.planner__days > li { display: grid; grid-template-columns: var(--date-w) minmax(0, 1fr); align-items: center; height: var(--row); border-top: 1px solid var(--rule); }
.planner__days > li:first-child { border-top: 0; }
.planner__date { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: var(--s2); padding-left: var(--s6); font: 700 1.75rem/1 var(--font-head); font-variation-settings: "opsz" 96; letter-spacing: -0.02em; }
.planner__wd { color: var(--muted); font: 500 .75rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.planner__entry { padding-right: var(--s4); font: 500 1.625rem/1 var(--font-pen); }
@media (max-width: 639px) {
  .planner__head { padding-inline: var(--s4); }
  .planner__month { font-size: 1.375rem; }
  .planner__range { font-size: .75rem; }
  .planner__date { padding-left: var(--s4); font-size: 1.375rem; }
  .planner__entry { font-size: 1.375rem; }
}

/* One example week per letter (the picker's panels). */
.planner__week { position: relative; }
html:not(.js) .planner__week[hidden] { display: block; }
html:not(.js) .planner__week + .planner__week { margin-top: var(--s12); }
.planner__more { margin-top: var(--s5); }
@media (min-width: 640px) { .planner__more { position: absolute; left: 0; bottom: var(--s4); margin: 0; } }

/* The dates a sick leave or adjusted-duties letter covers (Mon 3 to Fri 7): a bar down those five days, in the
   letter's colour. Travel letters have no bar. */
.planner__cover { position: absolute; left: 0; top: var(--head); width: 6px; height: calc(5 * var(--row)); background: var(--letter, var(--ink)); }

/* The deadline, circled in cobalt pen. */
.deadline { position: relative; display: inline-block; }
.pen-circle { position: absolute; left: -14px; top: -12px; width: calc(100% + 28px); height: calc(100% + 24px); max-width: none; overflow: visible; pointer-events: none; }
.pen-circle path { fill: none; stroke: var(--cobalt); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }

/* The price and refund, stuck on the week as a yellow sticky note. */
.planner__sticky { --tilt: 3deg; width: min(72%, 232px); margin: calc(-1 * var(--s3)) var(--s4) 0 auto; }
@media (min-width: 640px) { .planner__sticky { position: absolute; z-index: 1; top: calc(var(--head) + var(--s3)); right: calc(var(--bleed) + var(--s10)); margin: 0; } }

/* The doctor's note, clipped onto the bottom of the week. Left edge: the letter's colour (ink where it stands for every letter). */
.planner__note { --tilt: -2deg; position: relative; z-index: 1; width: min(84%, 316px); margin: var(--s4) var(--s3) 0 auto; padding: var(--s5) var(--s5) var(--s4) var(--s6); background: var(--sheet); border: 1px solid var(--ink); border-left: 5px solid var(--letter, var(--ink)); border-radius: 3px; transform: rotate(var(--tilt)); }
@media (min-width: 640px) { .planner__note { position: absolute; right: calc(var(--bleed) + var(--s8)); top: calc(var(--head) + 5 * var(--row) - var(--s3)); margin: 0; } }
.planner__note .clip { top: -26px; right: 40px; }
.note__title { font: 700 2rem/1 var(--font-pen); color: var(--cobalt); }
.note__lines { display: grid; gap: var(--s1); margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--rule); font-size: .9375rem; line-height: 1.4; }
/* Phones: the sticky note and the doctor's note sit side by side, stuck over the bottom edge of the week. */
@media (max-width: 639px) {
  .planner__week:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; column-gap: var(--s3); }
  .planner__week > .tabs__panel-title, .planner__page, .planner__more { grid-column: 1 / -1; }
  .planner__sticky { grid-column: 1; width: auto; margin: -6px 0 0 var(--s1); padding: var(--s3) var(--s3) var(--s4); }
  .planner__sticky .sticky__text { font-size: 1.25rem; }
  .planner__sticky .sticky__text small { font-size: 1.0625rem; }
  .planner__note { grid-column: 2; width: auto; margin: -14px var(--s1) 0 0; padding: var(--s3) var(--s3) var(--s3) var(--s4); }
  .planner__note .clip { right: 20px; }
  .planner__note .note__title { font-size: 1.5rem; }
  .planner__note .note__lines { margin-top: var(--s2); padding-top: var(--s2); font-size: .8125rem; line-height: 1.35; }
}

@media (min-width: 1000px) and (max-width: 1199px) {
  .planner__sticky { width: 196px; right: calc(var(--bleed) + var(--s4)); }
  .planner__sticky .sticky__text { font-size: 1.375rem; }
  .planner__note { width: 276px; right: calc(var(--bleed) + var(--s3)); }
}

/* Homepage sequence: when the planner comes on screen (site.js adds .is-live) the week is written in day by day, the pen
   circles the date that matters, a bar marks the days the letter covers, the doctor's note drops in and its clip snaps
   on, then the yellow note sticks on. Reduced motion and no-JS show the final state. */
@media (prefers-reduced-motion: no-preference) {
  .js .planner__entry { clip-path: inset(-24px 100% -24px -24px); }
  .js .pen-circle path { stroke-dashoffset: 1; }
  .js .planner__cover { transform: scaleY(0); transform-origin: top; }
  .js .planner:not(.is-live) :is(.planner__note, .planner__sticky) { opacity: 0; }
  .js .planner.is-live .planner__entry { animation: pen-write 520ms ease-out forwards; }
  .js .planner.is-live .planner__days > li:nth-child(1) .planner__entry { animation-delay: 200ms; }
  .js .planner.is-live .planner__days > li:nth-child(2) .planner__entry { animation-delay: 380ms; }
  .js .planner.is-live .planner__days > li:nth-child(3) .planner__entry { animation-delay: 560ms; }
  .js .planner.is-live .planner__days > li:nth-child(4) .planner__entry { animation-delay: 740ms; }
  .js .planner.is-live .planner__days > li:nth-child(5) .planner__entry { animation-delay: 920ms; }
  .js .planner.is-live .planner__days > li:nth-child(6) .planner__entry { animation-delay: 1100ms; }
  .js .planner.is-live .planner__days > li:nth-child(7) .planner__entry { animation-delay: 1280ms; }
  .js .planner.is-live .pen-circle path { animation: pen-draw 900ms cubic-bezier(.55, .1, .35, 1) 1500ms forwards; }
  .js .planner.is-live .planner__cover { animation: cover-grow 700ms cubic-bezier(.4, 0, .2, 1) 2300ms forwards; }
  .js .planner.is-live .planner__note { animation: note-clip 700ms cubic-bezier(.3, 1.35, .6, 1) 2800ms backwards; }
  .js .planner.is-live .planner__note .clip { animation: clip-snap 320ms cubic-bezier(.3, 1.6, .6, 1) 3350ms backwards; }
  .js .planner.is-live .planner__sticky { animation: note-stick 480ms cubic-bezier(.3, 1.4, .6, 1) 3600ms backwards; }
}
/* Picking another letter is a state change: its week plays the same marks, quickly. */
@media (prefers-reduced-motion: no-preference) {
  .js .planner.is-live.is-picked .planner__days > li .planner__entry { animation-delay: 0ms; animation-duration: 300ms; }
  .js .planner.is-live.is-picked .pen-circle path { animation-delay: 200ms; animation-duration: 600ms; }
  .js .planner.is-live.is-picked .planner__cover { animation-delay: 350ms; animation-duration: 450ms; }
  .js .planner.is-live.is-picked .planner__note { animation-delay: 400ms; }
  .js .planner.is-live.is-picked .planner__note .clip { animation-delay: 950ms; }
  .js .planner.is-live.is-picked .planner__sticky { animation-delay: 700ms; }
}
@keyframes pen-write { to { clip-path: inset(-24px -48px -24px -24px); } }  /* leaves room for the deadline circle */
@keyframes pen-draw { to { stroke-dashoffset: 0; } }
@keyframes cover-grow { to { transform: none; } }
@keyframes note-clip { from { opacity: 0; transform: translateY(-32px) rotate(-8deg); } }
@keyframes clip-snap { from { transform: translateY(-10px) rotate(-28deg); } }
@keyframes note-stick { from { opacity: 0; transform: translateY(-14px) scale(1.06) rotate(calc(var(--tilt) + 4deg)); } }

/* ============================================================== page flags (tabs on a planner page: the letter picker) */
.tabs__list { display: none; }
.js .tabs__list { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: var(--s2); margin-bottom: -1px; padding-left: var(--s6); overflow-x: auto; scrollbar-width: none; }
.js .tabs__list::-webkit-scrollbar { display: none; }
/* Each flag in its letter's colour. The flags behind the page keep the page's top line under them; the chosen one comes
   forward, taller, with no line, and runs into its page's header strip. */
.tabs__tab { position: relative; flex: none; padding: var(--s2) var(--s4) var(--s3); border: 1px solid var(--ink); border-radius: 3px 3px 0 0; background: var(--letter, var(--sheet)); color: var(--ink); font: 500 .9375rem/1.2 var(--font-body); white-space: nowrap; cursor: pointer; }
.tabs__tab:hover { text-decoration: underline; }
.tabs__tab[aria-selected="true"] { z-index: 1; padding-top: var(--s5); border-bottom-color: transparent; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.tabs__tab:focus-visible { outline-color: var(--ink); outline-offset: -5px; }
.tabs__panel-title { margin-bottom: var(--s4); font-size: 1.375rem; }
.js .tabs__panel-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 639px) { .js .planner__flags { padding-left: var(--s3); } }
@media (max-width: 579px) {
  .js .planner__flags { gap: 6px; }
  .tabs__tab { padding-inline: 10px; font-size: .875rem; }
  .flag-long { display: none; }
}
@media (max-width: 389px) { .js .planner__flags { gap: 4px; padding-left: var(--s2); } .tabs__tab { padding-inline: 8px; } }
@media (max-width: 349px) { .js .planner__flags { gap: 3px; } .tabs__tab { padding-inline: 6px; font-size: .8125rem; } }
@media (min-width: 580px) { .flag-short { display: none; } }

/* ============================================================== FAQ (homepage) */
.faq__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s2) var(--s6); margin-bottom: var(--s8); }

/* ============================================================== how it works (homepage) */
.how__grid { display: grid; gap: var(--s6); }
@media (min-width: 960px) {
  .how__grid { grid-template-columns: 220px minmax(0, 1fr); gap: 0 var(--s8); align-items: start; }
  .how__grid > h2 { margin-top: -12px; }  /* centres the heading on the line */
}
/* A sequence line with data-draw draws itself through its steps, in order, when it scrolls into view
   (site.js adds .is-drawn). Reduced motion and no-JS show the final state. */
@media (prefers-reduced-motion: no-preference) {
  .js .line[data-draw]::before { transform: scaleY(0); }
  .js .line[data-draw].is-drawn::before { animation: line-draw 1000ms cubic-bezier(.4, 0, .2, 1) forwards; }
  .js .line[data-draw] .line__point::before { background: var(--paper); }
  .js .line[data-draw].is-drawn .line__point::before { animation: dot-fill 160ms ease-out forwards; }
  .js .line[data-draw].is-drawn .line__point:nth-child(2)::before { animation-delay: 450ms; }
  .js .line[data-draw].is-drawn .line__point:nth-child(3)::before { animation-delay: 900ms; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 760px) {
  .js .line[data-draw]:not(.line--vertical)::before { transform: scaleX(0); }
}
@keyframes line-draw { to { transform: none; } }
@keyframes dot-fill { to { background: var(--cobalt); } }

/* ============================================================== how it works: a scroll story (homepage) */
/* Three steps beside a stage that stays pinned while you read them. site.js sets data-at (0 to 3) on the section as
   each step crosses the reading line, and --p (0 to 1) on the steps: the pen line fills, each step's dot fills, and the
   stage shows that step happening: the questionnaire is ticked, the doctor's same-day review is stuck on, the note goes
   out by email and SMS. Without JS the line is full and the stage shows all three. Where the stage can't stay pinned
   (short screens), the three steps play once, in order, when the stage scrolls into view. */
.story__grid { display: grid; grid-template-areas: "title" "stage" "steps"; gap: var(--s6); align-items: start; }
.story__title { grid-area: title; }
.story__stage { grid-area: stage; }
.story__steps { grid-area: steps; position: relative; display: grid; gap: var(--s8); padding-left: var(--s10); }
.story__steps::before, .story__steps::after { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px; }
.story__steps::before { background: var(--rule); }
.story__steps::after { background: var(--cobalt); transform: scaleY(var(--p, 1)); transform-origin: top; }
.story--auto .story__steps::after { transition: transform 900ms cubic-bezier(.4, 0, .2, 1); }
.story__label { position: relative; font: 700 1.375rem/1.2 var(--font-head); font-variation-settings: "opsz" 96; letter-spacing: -0.01em; }
.story__label::before { content: ""; position: absolute; z-index: 1; left: calc(2px - var(--s10)); top: calc(.18em + 2px); width: 12px; height: 12px; border: 2px solid var(--cobalt); border-radius: 50%; background: var(--cobalt); transition: background-color 200ms ease-out; }
.js .story__step:not(.is-on) .story__label::before { background: var(--paper); }
.story__time { margin-top: var(--s1); color: var(--cobalt); font: 700 1.5rem/1.1 var(--font-pen); }
.story__time mark.hl { color: var(--ink); }
.story__text { margin-top: var(--s2); max-width: 32ch; }

/* Pinned: on phones the stage is a band under the header; the steps scroll up beneath it. */
@media (max-width: 959px) and (min-height: 700px) {
  .story__stage { position: sticky; top: 73px; z-index: 2; margin-inline: calc(-1 * var(--gutter)); padding: var(--s3) var(--gutter) var(--s4); background: var(--paper); border-bottom: 1px solid var(--rule); }
  .story__steps { gap: 0; }
  .story__step { display: flex; flex-direction: column; justify-content: center; min-height: min(42vh, 380px); }
}
@media (min-width: 960px) {
  .story__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-areas: "stage title" "stage steps"; gap: var(--s6) var(--s16); }
}
@media (min-width: 960px) and (min-height: 600px) {
  .story__stage { position: sticky; top: max(96px, calc(50vh - 200px)); }
  .story__steps { gap: 0; }
  .story__step { display: flex; flex-direction: column; justify-content: center; min-height: 54vh; }
  .story__step:first-child { min-height: 40vh; justify-content: flex-start; }
}

/* The stage: the questionnaire (an index card), the doctor's review (a yellow sticky note), the doctor's note. */
.stage { position: relative; max-width: 520px; height: 300px; margin-inline: auto; }
@media (min-width: 960px) { .stage { max-width: 580px; height: 500px; margin: 0; } }
/* The desktop stage is drawn at 580px; narrower two-column screens scale it to fit its column. */
@media (min-width: 960px) and (max-width: 1119px) { .stage { zoom: .72; } }
@media (min-width: 1120px) and (max-width: 1279px) { .stage { zoom: .86; } }

.stage__card { position: absolute; left: 0; top: 30px; width: 60%; padding: var(--s3) var(--s4) var(--s2); background: var(--sheet); border: 1px solid var(--ink); border-top: 5px solid var(--ink); border-radius: 3px; transform: rotate(-1.5deg); }
.stage__card-title { font: 700 1rem/1.2 var(--font-head); font-variation-settings: "opsz" 96; }
.stage__rows { margin-top: var(--s2); }
.stage__rows li { position: relative; padding: 7px 28px 7px 0; border-top: 1px solid var(--rule); font-size: .8125rem; line-height: 1.3; }
.stage__rows li::after { content: ""; position: absolute; right: 8px; top: 6px; width: 7px; height: 13px; border: solid var(--cobalt); border-width: 0 2.5px 2.5px 0; border-radius: 1px; transform: rotate(40deg); transition: transform 220ms ease-out; }
.stage__read { position: absolute; left: -10px; top: 30px; width: calc(100% + 20px); height: calc(100% - 18px); max-width: none; overflow: visible; pointer-events: none; }
.stage__read path { fill: none; stroke: var(--cobalt); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 900ms cubic-bezier(.55, .1, .35, 1); }
.stage__pen { position: absolute; color: var(--cobalt); font: 700 1.375rem/1 var(--font-pen); white-space: nowrap; transition: opacity 300ms ease-out, transform 300ms ease-out; }
.stage__pen--time { left: var(--s2); top: calc(100% + var(--s3)); transform: rotate(-3deg); }

.stage__sticky { --tilt: 4deg; position: absolute; right: 0; top: 0; width: 42%; padding: var(--s3) var(--s4) var(--s4); transition: opacity 250ms ease-out, transform 450ms cubic-bezier(.3, 1.4, .6, 1); }
.stage__sticky .sticky__text { font-size: 1.25rem; }
.stage__sticky .sticky__text small { font-size: 1rem; }

.stage__note { --tilt: -3deg; position: absolute; right: 0; top: 166px; width: 54%; padding: var(--s3) var(--s4) var(--s3) var(--s5); background: var(--sheet); border: 1px solid var(--ink); border-left: 5px solid var(--ink); border-radius: 3px; transform: rotate(var(--tilt)); transition: opacity 250ms ease-out, transform 650ms cubic-bezier(.3, 1.3, .6, 1); }
.stage__note .clip { top: -24px; right: 28px; transition: transform 260ms cubic-bezier(.3, 1.6, .6, 1); }
.stage__note .note__title { font-size: 1.5rem; }
.stage__note-line { margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--rule); font-size: .8125rem; line-height: 1.3; }
.stage__arrows { position: absolute; left: 0; top: calc(100% + 2px); width: 100%; height: 34px; max-width: none; overflow: visible; }
.stage__arrows path { fill: none; stroke: var(--cobalt); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 420ms ease-out; }
.stage__pen--email { left: 2%; top: calc(100% + 30px); }
.stage__pen--sms { right: 2%; top: calc(100% + 30px); }

@media (min-width: 960px) {
  .stage__card { top: 64px; width: 340px; padding: var(--s5) var(--s6) var(--s4); }
  .stage__card-title { font-size: 1.375rem; }
  .stage__rows li { padding: 12px 36px 12px 0; font-size: 1rem; }
  .stage__rows li::after { top: 11px; }
  .stage__read { top: 44px; height: calc(100% - 40px); }
  .stage__pen { font-size: 1.625rem; }
  .stage__sticky { left: 326px; right: auto; top: 8px; width: 236px; padding: var(--s5) var(--s5) var(--s6); }
  .stage__sticky .sticky__text { font-size: 1.75rem; }
  .stage__sticky .sticky__text small { font-size: 1.25rem; }
  .stage__note { left: 250px; right: auto; top: 272px; width: 316px; padding: var(--s5) var(--s6) var(--s4) var(--s7); }
  .stage__note .note__title { font-size: 2rem; }
  .stage__note-line { font-size: 1rem; }
  .stage__arrows { height: 44px; }
  .stage__pen--email { top: calc(100% + 42px); }
  .stage__pen--sms { top: calc(100% + 42px); }
}

/* The states. Each element is hidden until its step is reached; it appears with a short delay so the step plays in
   order. Going back up hides it at once. */
.js .story[data-at="0"] .stage__rows li::after { transform: rotate(40deg) scale(0); }
.js .story:is([data-at="1"], [data-at="2"], [data-at="3"]) .stage__rows li:nth-child(2)::after { transition-delay: 240ms; }
.js .story:is([data-at="1"], [data-at="2"], [data-at="3"]) .stage__rows li:nth-child(3)::after { transition-delay: 480ms; }
.js .story:is([data-at="1"], [data-at="2"], [data-at="3"]) .stage__rows li:nth-child(4)::after { transition-delay: 720ms; }
.js .story[data-at="0"] .stage__pen--time { opacity: 0; transform: translateY(6px) rotate(-3deg); }
.js .story:is([data-at="1"], [data-at="2"], [data-at="3"]) .stage__pen--time { transition-delay: 900ms; }

.js .story:is([data-at="0"], [data-at="1"]) .stage__read path { stroke-dashoffset: 1; transition-duration: 0ms; }
.js .story:is([data-at="0"], [data-at="1"]) .stage__sticky { opacity: 0; transform: translateY(-16px) scale(1.06) rotate(calc(var(--tilt) + 5deg)); transition-duration: 0ms; }
.js .story:is([data-at="2"], [data-at="3"]) .stage__sticky { transition-delay: 700ms; }

.js .story:not([data-at="3"]) .stage__note { opacity: 0; transform: translate(-48px, 36px) rotate(-10deg); transition-duration: 0ms; }
.js .story:not([data-at="3"]) .stage__note .clip { transform: translateY(-10px) rotate(-28deg); transition-duration: 0ms; }
.js .story:not([data-at="3"]) .stage__arrows path { stroke-dashoffset: 1; transition-duration: 0ms; }
.js .story:not([data-at="3"]) .stage__pen--email, .js .story:not([data-at="3"]) .stage__pen--sms { opacity: 0; transition-duration: 0ms; }
.js .story[data-at="3"] .stage__note .clip { transition-delay: 520ms; }
.js .story[data-at="3"] .stage__arrows path:first-child { transition-delay: 760ms; }
.js .story[data-at="3"] .stage__arrows path:last-child { transition-delay: 980ms; }
.js .story[data-at="3"] .stage__pen--email { transition-delay: 1100ms; }
.js .story[data-at="3"] .stage__pen--sms { transition-delay: 1300ms; }

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

/* ============================================================== what the letter states (homepage) */
.states { display: grid; gap: var(--s10); align-items: start; }
.states__intro p { margin-top: var(--s4); max-width: 30ch; color: var(--muted); }
.states .sticky { justify-self: start; max-width: 300px; }
@media (min-width: 960px) {
  .states { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(220px, .8fr); gap: var(--s12); }
  .states .sticky { margin-top: var(--s10); }
}
/* The pen ticks the facts one by one when the card scrolls into view. */
@media (prefers-reduced-motion: no-preference) {
  .js .ticks[data-draw] li::before { transform: rotate(40deg) scale(0); }
  .js .ticks[data-draw].is-drawn li::before { animation: tick-draw 220ms ease-out forwards; }
  .js .ticks[data-draw].is-drawn li:nth-child(2)::before { animation-delay: 260ms; }
  .js .ticks[data-draw].is-drawn li:nth-child(3)::before { animation-delay: 520ms; }
  .js .ticks[data-draw].is-drawn li:nth-child(4)::before { animation-delay: 780ms; }
}
@keyframes tick-draw { to { transform: rotate(40deg) scale(1); } }

/* Ticked and crossed lists (data-draw): the pen ticks, or crosses out, each item in turn when the list scrolls into view. */
.rule-list[data-draw] li:nth-child(2) { --i: 1; } .rule-list[data-draw] li:nth-child(3) { --i: 2; } .rule-list[data-draw] li:nth-child(4) { --i: 3; }
.rule-list[data-draw] li:nth-child(5) { --i: 4; } .rule-list[data-draw] li:nth-child(6) { --i: 5; } .rule-list[data-draw] li:nth-child(7) { --i: 6; }
@media (prefers-reduced-motion: no-preference) {
  .js .rule-list[data-draw] li::before, .js .rule-list[data-draw] li::after { transition: transform 200ms ease-out; transition-delay: calc(var(--i, 0) * 170ms + 150ms); }
  .js .rule-list[data-draw] li::after { transition-delay: calc(var(--i, 0) * 170ms + 260ms); }
  .js .rule-list[data-draw]:not(.is-drawn) li::before { transform: rotate(40deg) scale(0); }
  .js .rule-list--warn[data-draw]:not(.is-drawn) li::before { transform: rotate(45deg) scaleX(0); }
  .js .rule-list--warn[data-draw]:not(.is-drawn) li::after { transform: rotate(-45deg) scaleX(0); }
}

/* ============================================================== pricing (a planner page) */
.price-sheet { background: var(--sheet); border: 1px solid var(--ink); border-radius: var(--radius); }
.price-sheet__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s1) var(--s6); padding: var(--s5) var(--s6); border-bottom: 1.5px solid var(--ink); }
.price-sheet__head h2 { font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); }
.price-sheet__meta { color: var(--muted); font-size: .9375rem; }
.prices { width: 100%; }
.prices th, .prices td { padding: var(--s4) var(--s6); border-top: 1px solid var(--rule); text-align: left; vertical-align: middle; }
.prices thead th { padding-block: var(--s3); border-top: 0; color: var(--muted); font: 500 .875rem/1.3 var(--font-body); }
.prices tbody tr:first-child > * { border-top: 0; }
.prices tbody th { font: 700 1.25rem/1.2 var(--font-head); font-variation-settings: "opsz" 96; letter-spacing: -0.01em; }
.prices__price { text-align: right !important; white-space: nowrap; }
.prices tbody .prices__price { font: 700 1.5rem/1.1 var(--font-head); font-variation-settings: "opsz" 96; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.c-speed, .c-within, .c-window { width: 22%; }
.c-price { width: 34%; }
.m-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* The 24-hour row: a small yellow sticky note, "deadline tomorrow?", with a pen arrow to the price. */
.prices__row--pen .prices__price { position: relative; }
.pen-note { --tilt: -3deg; position: absolute; left: var(--s6); top: 50%; padding: 2px var(--s3) var(--s1); background: var(--highlight); border: 1px solid var(--ink); border-radius: var(--paper-radius); transform: translateY(-50%) rotate(var(--tilt)); color: var(--ink); font: 700 1.375rem/1.1 var(--font-pen); white-space: nowrap; }
.pen-note__arrow { position: absolute; left: calc(100% + var(--s2)); top: 50%; width: 48px; height: 20px; margin-top: -10px; max-width: none; overflow: visible; }
.pen-note__arrow path { fill: none; stroke: var(--cobalt); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* How soon: the six speeds on one pen line out from "now". Point at a speed, in the table or on the line, and the
   yellow note slides to it with that speed's price: the further out, the cheaper. site.js sets --pos; the table is the
   source and this line is hidden from screen readers. Without JS the note sits on 24 hours. */
.speed { --pos: .5833; display: flex; align-items: flex-start; gap: var(--s4); padding: var(--s4) var(--s6) var(--s3); border-bottom: 1px solid var(--rule); }
.speed__now { flex: none; margin-top: 30px; color: var(--cobalt); font: 700 1.375rem/1 var(--font-pen); }
.speed__track { position: relative; flex: 1; height: 72px; }
.speed__track::before, .speed__fill { content: ""; position: absolute; left: 0; top: 40px; width: 100%; height: 2px; background: var(--rule); }
.speed__fill { background: var(--cobalt); transform: scaleX(var(--pos)); transform-origin: left; transition: transform 450ms cubic-bezier(.4, 0, .2, 1); }
.speed__marks li { position: absolute; top: 54px; transform: translateX(-50%); color: var(--muted); font: 500 1.125rem/1 var(--font-pen); white-space: nowrap; cursor: pointer; }
.speed__marks li::before { content: ""; position: absolute; left: 50%; top: -20px; width: 12px; height: 12px; margin-left: -6px; border: 2px solid var(--cobalt); border-radius: 50%; background: var(--sheet); transition: background-color 200ms ease-out; }
.speed__marks li:nth-child(1) { left: 8.333%; } .speed__marks li:nth-child(2) { left: 25%; } .speed__marks li:nth-child(3) { left: 41.667%; }
.speed__marks li:nth-child(4) { left: 58.333%; } .speed__marks li:nth-child(5) { left: 75%; } .speed__marks li:nth-child(6) { left: 91.667%; }
.speed__marks li.is-past::before { background: var(--cobalt); }
.speed__marks li.is-on { color: var(--ink); font-weight: 700; }
.speed__pick { position: absolute; left: calc(var(--pos) * 100%); top: 0; padding: 1px var(--s3) 3px; background: var(--highlight); border: 1px solid var(--ink); border-radius: var(--paper-radius); transform: translateX(-50%) rotate(-3deg); font: 700 1.375rem/1.1 var(--font-pen); white-space: nowrap; transition: left 450ms cubic-bezier(.3, 1.25, .6, 1); }
.js .prices tbody tr { cursor: pointer; }
.prices tbody tr.is-picked > * { background: var(--paper); }
@media (max-width: 599px) {
  .speed { gap: var(--s2); padding-inline: var(--s4); }
  .speed__now { font-size: 1.125rem; }
  .speed__marks li { font-size: .9375rem; }
  .speed__pick { font-size: 1.1875rem; }
}
@media (prefers-reduced-motion: reduce) { .speed__fill, .speed__pick, .speed__marks li::before { transition: none; } }

/* The 24-hour row's note sticks on, and its arrow is drawn, when the row scrolls into view. */
@media (prefers-reduced-motion: no-preference) {
  .js .prices__row--pen[data-draw] .pen-note { opacity: 0; }
  .js .prices__row--pen[data-draw] .pen-note__arrow path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .prices__row--pen[data-draw].is-drawn .pen-note { opacity: 1; animation: pen-note-in 420ms cubic-bezier(.3, 1.4, .6, 1) 250ms backwards; }
  .js .prices__row--pen[data-draw].is-drawn .pen-note__arrow path { animation: pen-draw 320ms ease-out 700ms forwards; }
  .js .prices__row--pen[data-draw].is-drawn .pen-note__arrow path + path { animation-delay: 1000ms; animation-duration: 160ms; }
}
@keyframes pen-note-in { from { opacity: 0; scale: 1.3; } }
@media (max-width: 879px) {
  .prices, .prices tbody { display: block; }
  .prices thead, .prices colgroup { display: none; }
  .prices tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s4); padding: var(--s3) var(--s5); border-top: 1px solid var(--rule); }
  .prices tbody tr:first-child { border-top: 0; }
  .prices th, .prices td { padding: 0; border: 0; }
  .prices tbody th { grid-column: 1; grid-row: 1; }
  .prices td.prices__price { grid-column: 2; grid-row: 1 / span 3; align-self: center; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: var(--s2); }
  .prices__within, .prices__window { grid-column: 1; color: var(--muted); font-size: .9375rem; line-height: 1.4; }
  .prices__window--none { display: none; }
  .m-label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .pen-note { position: static; transform: rotate(var(--tilt)); font-size: 1.25rem; }
  .pen-note__arrow { display: none; }
}
@media (max-width: 879px) and (min-width: 600px) { .price-sheet__head, .prices tr { padding-inline: var(--s6); } }

.price-terms { display: grid; gap: var(--s4) var(--s12); margin-top: var(--s6); }
.price-terms p { max-width: 52ch; }
@media (min-width: 760px) { .price-terms { grid-template-columns: 1fr 1fr; } }
.price-cta { margin-top: var(--s7); }

/* ============================================================== closing (a yellow sticky note) */
.closing { padding-block: var(--section); }
.closing__row { position: relative; outline: 1px solid transparent; backface-visibility: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s5) var(--s8); padding: var(--s8) clamp(24px, 4vw, 48px); background: var(--highlight); border: 1px solid var(--ink); border-radius: var(--paper-radius); transform: rotate(-.6deg); }
.closing__text { max-width: 28ch; font: 700 clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem)/1.05 var(--font-pen); }
.closing__text a { color: var(--ink); }
.closing__links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); font-weight: 500; }
.closing__links a { color: var(--ink); }

/* ============================================================== /start/ */
/* One centred column (user decisions, 18 Oct 2026): the headline, one description, then the order form on a white planner page.
   The form's own iframe always fills the page's width; on phones the page runs edge to edge so the form gets every pixel. */
.start-head { padding-bottom: var(--s8); text-align: center; }
.start-head h1, .start-head .lead { margin-inline: auto; }
.start-head .lead { max-width: 40em; }
.form-sec { padding-bottom: var(--section); }
.form-sheet { max-width: 860px; margin-inline: auto; padding: clamp(8px, 3vw, 32px); background: var(--sheet); border: 1px solid var(--ink); border-radius: var(--radius); }
.form-embed { min-height: 960px; }
.form-embed iframe { display: block; width: 100% !important; min-width: 100% !important; max-width: 100% !important; border: 0; }
.form-after { max-width: 44em; margin: var(--s4) auto 0; text-align: center; color: var(--muted); font-size: .9375rem; line-height: 1.55; }
@media (max-width: 599px) {
  .form-sheet { margin-inline: calc(-1 * var(--gutter)); padding: var(--s2) 0; border-inline: 0; border-radius: 0; }
}

/* ============================================================== /submission (order confirmation) */
.submitted__line { margin-top: var(--s10); }
.submitted__help { max-width: 52ch; margin-top: var(--s10); }

/* ============================================================== footer */
.site-footer { margin-top: auto; padding-block: var(--s12) var(--s8); color: var(--desk-text); font-size: .9375rem; }
.site-footer a, .site-footer .linkish { color: var(--desk-text); }
/* A standard site footer (user decision, 18 Oct 2026): the name on the left, four headed link columns on the right,
   then the small print centred under a hairline. Phones: the name on top, the columns two by two. */
.footer__top { display: grid; gap: var(--s10); }
.footer__tag { max-width: 30ch; margin-top: var(--s3); color: var(--desk-muted); line-height: 1.55; }
.footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8) var(--s6); }
.footer__h { margin-bottom: var(--s3); color: var(--desk-text); font-size: 1rem; line-height: 1.3; letter-spacing: 0; }
.footer__col ul { display: grid; gap: var(--s1); padding: 0; list-style: none; }
.footer__col a, .footer__col .linkish { display: inline-block; padding-block: 3px; color: var(--desk-muted); text-decoration: none; }
.footer__col a:hover, .footer__col .linkish:hover { color: var(--desk-text); text-decoration: underline; }
@media (min-width: 640px) { .footer__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: var(--s12); } }
.footer__base { display: grid; justify-items: center; gap: var(--s3); margin-top: var(--s12); padding-top: var(--s6); border-top: 1px solid var(--desk-line); color: var(--desk-muted); font-size: .875rem; line-height: 1.55; text-align: center; }
.footer__base p { max-width: 72ch; }
.footer__base p a { color: var(--desk-muted); }

/* ============================================================== mobile sticky CTA */
.mcta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) var(--gutter) calc(var(--s2) + env(safe-area-inset-bottom)); background: var(--sheet); border-top: 1px solid var(--ink); }
.mcta__price { font-weight: 500; }
.mcta[hidden] { display: none; }
@media (min-width: 760px) { .mcta { display: none; } }
@media (max-width: 759px) { body:has(.mcta) .site-footer { padding-bottom: calc(var(--s8) + 72px); } }

/* ============================================================== short and very narrow screens */
/* Phones on their side: the header stays at the top of the page instead of following you, the bottom bar steps
   aside (the header carries the button), and headlines take the smallest size. */
@media (max-height: 500px) and (orientation: landscape) {
  .site-header { position: static; }
  .site-header__inner { min-height: 56px; }
  .mcta { display: none; }
  h1 { font-size: 2.25rem; }
  .hero h1 { max-width: 22ch; }
  .hero, .page-head { padding-top: var(--s6); }
  html { scroll-padding-top: var(--s4); }
}
/* Folded phones and other screens under 300px. */
@media (max-width: 299px) {
  .pen-note { white-space: normal; font-size: 1.125rem; }
  .prices tbody th { font-size: 1.0625rem; }
  .planner__week:not([hidden]) { column-gap: var(--s2); }
  .planner__sticky .sticky__text { font-size: 1.125rem; }
  .stage__sticky { width: 48%; padding-inline: var(--s3); }
  .stage__sticky .sticky__text { font-size: 1.0625rem; }
  .stage__sticky .sticky__text small { font-size: .875rem; }
}

/* ============================================================== cookie banner */
.cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: var(--s4) var(--gutter) calc(var(--s4) + env(safe-area-inset-bottom)); background: var(--sheet); border-top: 1.5px solid var(--ink); }
.cookie__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s6); max-width: var(--container); margin-inline: auto; }
.cookie__text { max-width: 74ch; font-size: .9375rem; line-height: 1.5; }
.cookie__actions { display: flex; gap: var(--s3); }
.cookie__actions .btn { min-width: 112px; }

/* ============================================================== 404 */
.notfound-links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); margin-top: var(--s6); font-weight: 500; }

@media print {
  body, main { background: none; }
  main::before { display: none; }
  .site-header nav, .menu-btn, .mcta, .cookie, .closing { display: none !important; }
  .sticky, .card, .fact, .rule-list, .line__point, .price-line, .planner__note { transform: none !important; }
}