/* ============================================================
   DESIGN & SHIP WITH AI — Cohort 1
   Style system extracted forensically from tiwd.courses
   (computed styles, not eyeballed). See STYLE-TOKENS.md.
   ============================================================ */

/* ---------- 0. FONTS — Lay Grotesk (local, /fonts) ---------- */
@font-face { font-family: "Lay Grotesk"; src: url("fonts/laygrotesk-trial-regular.otf") format("opentype"); font-weight: var(--fw-body); font-style: normal; font-display: swap; }
@font-face { font-family: "Lay Grotesk"; src: url("fonts/laygrotesk-trial-medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Lay Grotesk"; src: url("fonts/laygrotesk-trial-semibold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Lay Grotesk"; src: url("fonts/laygrotesk-trial-bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lay Grotesk"; src: url("fonts/laygrotesk-trial-black.otf") format("opentype"); font-weight: 900; font-style: normal; font-display: swap; }

/* ---------- 1. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: none; text-size-adjust: none; }
img, picture, video, svg { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; background: none; border: 0; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
hr { border: 0; border-top: 1px solid var(--rule); }

/* ---------- 2. TOKENS ---------- */
:root {
  /* fluid root-size engine — measured from source:
     html { font-size: clamp(1px, 10 * 100vw / var(--size), var(--clamp)) }
     mobile --size:402  →  10px at a 402px viewport
     desktop --size:1500 → 9.6px at 1440, capping at 13px from 1950 up   */
  --size: 402;
  --clamp: 13px;

  /* brand — the cohort's two colours, from the free-class poster */
  --green: #004332;
  --lime: #dcfb77;

  /* the page runs the original monochrome: white field, black ink, gray
     hairlines. Every component reads these tokens, so this block alone
     re-themes the site. */
  --field: #ffffff;
  --ink: #000000;
  --muted: #a2a2a2;
  --muted-2: #858585;
  --rule: #e2e2e2;
  --rule-soft: #e7e7e7;
  --rule-2: #dedede;
  --rule-4: #d5d5d5;
  --rule-6: #b8b8b8;

  --ease-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-fast: 0.3s;
  --dur-mid: 0.5s;
  --dur-slow: 0.75s;

  --header-h: 6rem;

  /* ---- DESIGN-SYSTEM DIALS ----
     Single source for every recurring value. Mobile values live here;
     the 1024px block below flips the ones that change. Turn these, not
     the component rules. */
  --font-sans: "Lay Grotesk", "Geist", "Inter Tight", "Inter", -apple-system,
    BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* type scale — five roles, nothing outside them:
     h1 = the hero statement (and its CTA)
     h2 = section statements ("They teach you to prototype…")
     h3 = subheads (hero meta, side labels, FAQ questions, lesson titles)
     h4 = card headings (Founding cohort, Standard…)
     body = everything else */
  --fs-h1: 4.2rem;
  --fs-h2: 3.6rem;
  --fs-h3: 2.3rem;
  --fs-h4: 2rem;
  --fs-body: 1.8rem;
  --fs-caption: 1.2rem;   /* chips + tiny UI labels only, not text */

  --lh-body: 1.13;        /* 22.6 / 20 */
  --lh-tight: 1;
  --lh-h3: 1.08;
  --lh-small: 1.25;

  --track-display: -0.03em;
  --track-sub: -0.02em;
  --track-caption: 0.06em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-body: 600;          /* body text runs semibold, matching the nav */
  --fw-semibold: 600;
  --fw-bold: 700;

  /* hero dials */
  --hero-cta-track: -0.045em;
  --hero-title-pull: -0.2em;   /* extra leading pull between headline lines */
  --hero-foot-gap: 4rem;       /* mobile; desktop regroups below */
  --hero-img-gap: 3rem;        /* image below the CTA */
  --hero-img-h: 66svh;

  /* layout */
  --gutter: 1.2rem;            /* page edge padding; full-bleed = -gutter */
  --grid-gap: 1.2rem;          /* every column/strip gap on the page */
  --radius: 0.4rem;

  /* section rhythm — tightened one step across the board */
  --sec-sm: 7rem;
  --sec: 8rem;
  --sec-lg: 11rem;
  --sec-xl: 12rem;
}
/* DELIBERATE DEVIATION FROM THE REFERENCE — see STYLE-TOKENS.md.
   The source switches to --size:1500 at 650px, so a 768px viewport renders
   its body copy at 10.24px (measured on tiwd.courses, not assumed).
   Here the stacked 4-column layout and a gentler --size run up to 1023px,
   and the 12-column desktop system starts at 1024px. Display type stays
   continuous across the boundary (54.6px -> 53.9px). For exact parity,
   delete this tablet band and move every breakpoint back to 650px. */
@media (min-width: 650px) { :root { --size: 900; } }
@media (min-width: 1024px) {
  :root {
    --size: 1500; --header-h: 7.5rem;
    --fs-h1: 7rem;
    --fs-h2: 6rem;
    --fs-h3: 3.2rem;
    --fs-h4: 2.4rem;
    --fs-body: 24px;      /* fixed by request; medium weight */
    --hero-foot-gap: 12.7rem;    /* CTA sits low, grouped with the image */
    --hero-img-gap: 3rem;        /* ~40px: the CTA belongs to the image now */
    --hero-img-h: 90svh;
    --gutter: 2rem;
    --grid-gap: 1.7rem;
    --sec-sm: 15rem;
    --sec: 20rem;
    --sec-lg: 25rem;
    --sec-xl: 30rem;
  }
}

html {
  /* the page scroll is wheel-driven and eased; the native bar is hidden so
     the right edge stays clean. Scrolling itself is untouched. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  font-size: clamp(1px, 10 * 100vw / var(--size), var(--clamp));
  background-color: var(--field);
  color: var(--ink);
  font-kerning: none;
  font-variant-ligatures: common-ligatures;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: auto;
}

body {
  font-family: var(--font-sans);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  background: var(--field);
  color: var(--ink);
  overflow-x: hidden;
}

::selection { background: var(--ink); color: var(--field); }

html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; }

/* ---------- 3. TYPE ROLES ---------- */
.h1 { font-size: var(--fs-h1); letter-spacing: var(--track-display); line-height: var(--lh-tight); font-weight: var(--fw-semibold); }
.h2 { font-size: var(--fs-h2); letter-spacing: var(--track-display); line-height: var(--lh-tight); font-weight: var(--fw-medium); }
.h3 { font-size: var(--fs-h3); letter-spacing: var(--track-sub); line-height: var(--lh-h3); font-weight: var(--fw-semibold); }
.h4 { font-size: var(--fs-h4); letter-spacing: var(--track-sub); line-height: var(--lh-h3); font-weight: var(--fw-semibold); }
.h1--tight { line-height: 1; }
.lead { font-size: var(--fs-body); line-height: var(--lh-body); }
.small { font-size: var(--fs-body); line-height: var(--lh-body); }
.muted { color: var(--muted); }
.mono-num { font-variant-numeric: tabular-nums; }
.label { font-size: var(--fs-body); line-height: var(--lh-body); }

/* rich-text block — source rule: .txt p {color:gray-1;font-weight:400} */
.txt > :not(:last-child) { margin-bottom: 2.5rem; }
.txt p { color: var(--muted); font-weight: var(--fw-body); }
.txt strong { color: var(--ink); font-weight: var(--fw-bold); }

/* ---------- 4. LAYOUT ---------- */
.site-max {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.site-max .site-max { padding-inline: 0; }

.site-grid {
  --gap: var(--grid-gap);
  --cols: 4;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gap);
}
@media (min-width: 1024px) { .site-grid { --cols: 12; } }

.sub-grid-8 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); column-gap: var(--grid-gap); }
.sub-grid-6 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); column-gap: var(--grid-gap); }
@media (min-width: 1024px) {
  .sub-grid-8 { grid-template-columns: repeat(8, minmax(0,1fr)); column-gap: var(--grid-gap); }
  .sub-grid-6 { grid-template-columns: repeat(6, minmax(0,1fr)); column-gap: var(--grid-gap); }
}

/* column utilities — span sets the END only, so a start utility can be
   combined without the shorthand resetting it back to a single track */
.c1{grid-column-end:span 1}.c2{grid-column-end:span 2}
.c3{grid-column-end:span 3}.c4{grid-column-end:span 4}
@media (min-width: 1024px) {
  .s\:c1{grid-column-end:span 1}.s\:c2{grid-column-end:span 2}.s\:c3{grid-column-end:span 3}
  .s\:c4{grid-column-end:span 4}.s\:c5{grid-column-end:span 5}.s\:c6{grid-column-end:span 6}
  .s\:c7{grid-column-end:span 7}.s\:c8{grid-column-end:span 8}.s\:c9{grid-column-end:span 9}
  .s\:c10{grid-column-end:span 10}.s\:c11{grid-column-end:span 11}.s\:c12{grid-column-end:span 12}
  .s\:st2{grid-column-start:2}.s\:st3{grid-column-start:3}.s\:st4{grid-column-start:4}
  .s\:st5{grid-column-start:5}.s\:st6{grid-column-start:6}.s\:st7{grid-column-start:7}
  .s\:st9{grid-column-start:9}.s\:st10{grid-column-start:10}.s\:st11{grid-column-start:11}
}

.flex{display:flex}.col{flex-direction:column}.between{justify-content:space-between}
.items-end{align-items:flex-end}.items-start{align-items:flex-start}.items-center{align-items:center}
.only-s{display:none}
.hide-s{display:block}
@media (min-width: 1024px){ .only-s{display:block} .hide-s{display:none} }

/* ---------- 5. SECTION RHYTHM ----------
   scale = class number / 10 rem, matching the source's spacing system */
.sec { margin-bottom: var(--sec); }
.sec--lg { margin-bottom: var(--sec-lg); }
.sec--xl { margin-bottom: var(--sec-xl); }
.sec--sm { margin-bottom: var(--sec-sm); }

/* ---------- 6. HEADER ---------- */
.sh {
  position: fixed; top: 0; left: 0; width: 100%;
  z-index: 100;
  font-weight: var(--fw-semibold);
  /* always present, no bar, no rule — the nav floats over whatever scrolls
     beneath it, and difference mode keeps it legible on any backdrop:
     black over the white field, inverted over the image and the dark block */
  mix-blend-mode: difference; color: #ffffff;
}
.sh__inner { height: var(--header-h); display: grid; align-items: center; }
.sh__row { grid-area: 1 / 1; align-items: center; width: 100%; }
.sh__row > .site-grid { align-items: center; width: 100%; }
.sh__logo { font-size: 2rem; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .sh__logo { transition: opacity var(--dur-fast) ease-out; }
  .sh__logo:hover { opacity: 0.45; }
}
.sh__logo sup { font-size: 0.5em; vertical-align: super; }
.sh__nav { display: flex; justify-content: space-between; gap: 2rem; grid-column-start: 3; }
@media (hover: hover) and (pointer: fine) {
  /* source .h-list: hovering the group dims every item, the hovered one stays */
  .sh__nav a { transition: opacity var(--dur-fast) ease-out; }
  .sh__nav:hover a { opacity: 0.3; }
  .sh__nav a:hover { opacity: 1 !important; }
}
@media (min-width: 1024px) { .sh__nav { grid-column-start: 10; } }

/* ---------- 7. LINK / BUTTON MECHANICS ----------
   transcribed from source: .uline, .uline-double, .btn label swap  */
.uline { display: inline-flex; position: relative; white-space: nowrap; --bottom: 0; }
.uline::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: var(--bottom);
  height: 0.08em; min-height: 1px; background-color: currentColor;
  transform: scaleX(0); transform-origin: right center;
  transition: transform var(--dur-slow) var(--ease-expo);
}
@media (hover: hover) and (pointer: fine) {
  .uline:hover::before, a:hover .uline::before, button:hover .uline::before {
    transform: scaleX(1); transform-origin: left center;
  }
}
.uline.--on::before { transform: scaleX(1); transform-origin: left center; }

.uline-double { display: inline-flex; position: relative; white-space: nowrap; --bottom: -0.05em; }
.uline-double::before, .uline-double::after {
  content: ""; position: absolute; left: 0.05em; right: 0; bottom: var(--bottom);
  height: 0.08em; min-height: 1px; background-color: currentColor;
}
.uline-double::before {
  transform: scaleX(1); transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease-expo) 0.5s;
}
.uline-double::after {
  transform: scaleX(0); transform-origin: right center;
  transition: transform var(--dur-slow) var(--ease-expo);
}
@media (hover: hover) and (pointer: fine) {
  .uline-double:hover::before {
    transform: scaleX(0); transform-origin: right center;
    transition: transform var(--dur-slow) var(--ease-expo);
  }
  .uline-double:hover::after {
    transform: scaleX(1); transform-origin: left center;
    transition: transform var(--dur-slow) var(--ease-expo) 0.2s;
  }
}

.btn {
  display: flex; width: 100%; overflow: hidden;
  background: var(--ink); color: var(--field); border-radius: var(--radius);
}
.btn__face {
  position: relative; display: block;
  height: 7rem; width: 100%; overflow: hidden;
}
/* BOTH labels are absolutely centred on the face, so they are always the
   same box. Previously only the second was — a label long enough to wrap
   made the two layers different heights and the roll broke apart. */
.btn__label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding-inline: 2.5rem; text-align: center; line-height: 1.2;
}
/* resting state is unconditional — inside the hover query the second label
   would sit on top of the first on every touch device */
.btn__label { transition: transform var(--dur-slow) var(--ease-expo); }
.btn__label.--1 { transform: translateY(0); transition-delay: 0.1s; }
.btn__label.--2 { transform: translateY(105%); transition-delay: 0s; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .btn__label.--1 { transform: translateY(-105%); transition-delay: 0s; }
  .btn:hover .btn__label.--2 { transform: translateY(0); transition-delay: 0.1s; }
}
.btn--ghost {
  background: transparent; color: var(--ink); border: 1px solid var(--ink);
  transition: background-color var(--dur-mid) var(--ease-quint), color var(--dur-mid) var(--ease-quint);
}
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover { background: var(--ink); color: var(--field); }
}

/* arrow that swaps on hover, same mechanic */
.icon-swap { position: relative; display: inline-grid; overflow: hidden; width: 1em; height: 1em; }
.icon-swap svg { grid-area: 1 / 1; width: 100%; height: 100%; transition: transform var(--dur-slow) var(--ease-expo); }
.icon-swap .--1 { transform: translateY(0); transition-delay: 0.1s; }
.icon-swap .--2 { transform: translateY(-105%); transition-delay: 0s; }
@media (hover: hover) and (pointer: fine) {
  .h-t:hover .icon-swap .--1 { transform: translateY(105%); transition-delay: 0s; }
  .h-t:hover .icon-swap .--2 { transform: translateY(0); transition-delay: 0.1s; }
}

/* ---------- 8. LINE REVEAL ----------
   source signature: each line in an overflow-hidden wrapper,
   inner translateY(105%) → 0 */
.split { display: block; }
/* source rule `.split-fix`: overflow:hidden clips ascenders/descenders at
   line-height 1, so the wrapper runs at 1.1 and every line after the first is
   pulled back by -0.1125em — net leading 0.9875, nothing clipped. */
.split { line-height: 1.1; }
.split > .line:not(:first-child) { margin-top: -0.1125em; }
.split .line { display: block; overflow: hidden; }
.split .line > span { display: block; transform: translateY(105%); transition: transform 1.1s var(--ease-expo); }
.split.--in .line > span { transform: translateY(0); }
.split .line:nth-child(2) > span { transition-delay: 0.06s; }
.split .line:nth-child(3) > span { transition-delay: 0.12s; }
.split .line:nth-child(4) > span { transition-delay: 0.18s; }
.split .line:nth-child(5) > span { transition-delay: 0.24s; }
.split .line:nth-child(6) > span { transition-delay: 0.3s; }

.fade { opacity: 0; transform: translateY(1.6rem); transition: opacity var(--dur-slow) var(--ease-expo), transform var(--dur-slow) var(--ease-expo); }
.fade.--in { opacity: 1; transform: none; }
.fade[data-d="1"] { transition-delay: 0.08s; }
.fade[data-d="2"] { transition-delay: 0.16s; }
.fade[data-d="3"] { transition-delay: 0.24s; }

/* Source behaviour (`br-none`): hand-broken lines are written for the wide
   column. Below the desktop grid the labelled statements ignore those breaks
   and reflow, so the label + first-line spacer never force a ragged wrap. */
@media (max-width: 1023px) {
  .split.--flow .line,
  .split.--flow .line > span { display: inline; overflow: visible; }
  .split.--flow .line > span { transform: none !important; }
  .split.--flow .line { margin-top: 0 !important; }
  .split.--flow { opacity: 0; transition: opacity var(--dur-slow) var(--ease-expo); }
  .split.--flow.--in { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .split .line > span, .fade, .split.--flow {
    transition: none !important; transform: none !important; opacity: 1 !important;
  }
  .media-fill::after { display: none !important; }
  .media-fill img, .media-fill video { transform: none !important; }
}

/* ---------- 9. MEDIA SLOTS ---------- */
.media-fill { position: relative; width: 100%; overflow: hidden; background: rgba(0, 0, 0, 0.05); }
.media-fill .aspect { padding-top: var(--aspect, 56.25%); }
.media-fill img, .media-fill video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity var(--dur-mid) ease-out;
}
.media-fill img.--loaded { opacity: 1; }
/* a video slot layers over its own still; the still is the poster frame */
.media-fill video { z-index: 1; }
.media-fill video.--loaded { opacity: 1; }

/* Reveal — the same rising motion as the headline lines, done as a mask.
   A curtain the colour of the page covers the frame and slides up out of it,
   so the picture is uncovered from its bottom edge while it settles out of a
   slight scale. Matches `.split`: 1.2-1.6s, easeOutExpo, nothing bounces.

   This is deliberately NOT clip-path. Clipping the frame to zero height also
   zeroes its IntersectionObserver area, so it could never trigger the reveal
   that would un-clip it — the frame stayed blank forever. A curtain leaves the
   frame's own geometry intact. */
.media-fill::after {
  content: "";
  position: absolute; inset: -1px; z-index: 2;
  background: var(--field);
  transform: translateY(0);
  transition: transform 1.2s var(--ease-expo);
  will-change: transform;
  pointer-events: none;
}
.media-fill.--in::after { transform: translateY(-100.5%); }
.on-green .media-fill::after { background: var(--field); }

.media-fill img, .media-fill video {
  transform: scale(1.06); transform-origin: center;
  transition: opacity var(--dur-mid) ease-out, transform 1.6s var(--ease-expo);
}
.media-fill.--in img, .media-fill.--in video { transform: scale(1); }
.media-fill.--top img { object-position: center top; }

/* empty-state placeholder: shows the exact filename to drop in */
.media-fill.--empty { background: rgba(0, 0, 0, 0.03); border: 1px solid var(--rule); }
.media-fill.--empty::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule) 1px, transparent 1px);
  background-size: 1.7rem 1.7rem; opacity: 0.7;
}
.slot__meta {
  position: absolute; inset: auto 0 0 0; display: none;
  padding: 1.2rem 1.5rem; gap: 0.4rem; flex-direction: column;
}
.media-fill.--empty .slot__meta { display: flex; }
.slot__name { font-size: 1.4rem; line-height: 1.2; color: var(--ink); }
.slot__spec { font-size: 1.4rem; line-height: 1.2; color: var(--muted); }
.media-fill.--empty .slot__mark {
  position: absolute; top: 1.2rem; left: 1.5rem; display: block;
  font-size: 1.4rem; color: var(--muted);
}
.slot__mark { display: none; }

/* ---------- 10. HAIRLINE ROWS ---------- */
.rows { display: flex; flex-direction: column; }
.row {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); column-gap: var(--grid-gap);
  padding-block: 2.5rem; border-bottom: 1px solid var(--rule);
}
.row:first-child { border-top: 1px solid var(--rule); }
@media (min-width: 1024px) {
  .row { grid-template-columns: repeat(8, minmax(0,1fr)); column-gap: var(--grid-gap); padding-block: 2.5rem; }
  .row:first-child { border-top: 0; }
}
.row__n { grid-column: span 4; color: var(--muted); }
.row__b { grid-column: span 4; }
@media (min-width: 1024px) {
  /* the number lands on page column 7 and the body on 9-12 — the same split
     the (A)(B)(C) block and the rest of the two-zone sections use */
  /* the number column starts on page column 7 — the same line the
     header's "Web Apps · Cohort 1" sits on */
  .row__n { grid-column: 3 / span 1; grid-row: 1; }
  .row__b { grid-column: 4 / span 5; grid-row: 1; }
  /* numbers hug the right edge of their cell, one grid gap from the text —
     the same closeness the (A)(B)(C) letters get below */
  /* numbers and letters sit at the left edge of their container; the text
     keeps its column, so the air between them is the empty middle columns */
  .row__n.mono-num { text-align: left; padding-right: 0; }
  .sub-grid-6 > .muted { text-align: left; padding-right: 0; }
  /* trim the reading measure of the list texts */
  .row__n.mono-num + .row__b { max-width: 48rem; }
  .sub-grid-6 > :last-child { max-width: 48rem; }
}

/* the numbers wear brackets like the lettered list: (01) beside (A) */
.row__n.mono-num::before { content: "("; }
.row__n.mono-num::after { content: ")"; }
.row--split .row__b { display: flex; justify-content: space-between; gap: 2rem; }
/* split rows: content starts at the row's left edge, so the hairline and the
   text are the same width (the 3/5 split is for the numbered lists only) */
@media (min-width: 1024px) {
  .row--split .row__n { grid-column: 1 / span 2; text-align: left; padding-right: 0; }
  .row--split .row__b { grid-column: 3 / span 6; }
}

/* variant without the separating hairlines */
.rows--plain .row { border-bottom: 0; }
.rows--plain .row:first-child { border-top: 0; }

/* a sidebar label next to .rows drops to the first row's own baseline */
.rows-side { padding-top: 2.5rem; }
@media (min-width: 1024px) { .rows-side { padding-top: 2.5rem; } }

/* stat table (instructor proof) */
.stat-list li {
  display: flex; justify-content: space-between; gap: 2rem;
  padding-block: 1rem; border-bottom: 1px solid var(--rule);
}
.stat-list li span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- 11. HERO ---------- */
.hero {
  min-height: 100svh; display: flex;
  padding-top: calc(var(--header-h) + 1.6rem); padding-bottom: 2rem;
}
.hero__inner { display: flex; flex-direction: column; justify-content: space-between; width: 100%; row-gap: 4rem; }
.hero__title { margin-bottom: 0; }
/* tighter leading than the stock split: the wrapper keeps its 1.1 line-height
   (so overflow:hidden never clips ascenders), the pull-back deepens instead */
.hero__title.split > .line:not(:first-child) { margin-top: var(--hero-title-pull); }
.hero__cta, .cta-lg {
  display: inline-flex; align-items: baseline; gap: 0.3em;
  letter-spacing: var(--hero-cta-track);
}
/* hand-broken to exactly three lines at every viewport — the type scales
   with the fluid root, so the breaks hold; nowrap stops reflow adding a 4th */
/* the CTA arrow: sharp strokes (butt caps, miter joins), held off the text,
   and rolling diagonally on hover — out to the top-right, back in from the
   bottom-left — while the label eases toward it. Same family as .icon-swap. */
.cta-arr {
  position: relative; display: inline-grid; overflow: hidden;
  /* sized to the cap height, stroke matched to the semibold stems */
  width: 0.78em; height: 0.78em;
  margin-left: 0.2em; align-self: center;
}
.cta-arr svg { grid-area: 1 / 1; width: 100%; height: 100%; transition: transform var(--dur-slow) var(--ease-expo); }
.cta-arr .--2 { transform: translate(-115%, 115%); }
.hero__cta .uline-double, .cta-lg .uline-double { transition: transform var(--dur-slow) var(--ease-expo); }
@media (hover: hover) and (pointer: fine) {
  .hero__cta:hover .cta-arr .--1, .cta-lg:hover .cta-arr .--1 { transform: translate(115%, -115%); }
  .hero__cta:hover .cta-arr .--2, .cta-lg:hover .cta-arr .--2 { transform: translate(0, 0); }
  .hero__cta:hover .uline-double, .cta-lg:hover .uline-double { transform: translateX(0.08em); }
}

.hero__meta { align-self: start; font-weight: var(--fw-semibold); line-height: 1.04; white-space: nowrap; text-align: left; }
/* below the desktop grid the meta owns the full width, so a hand-broken line
   that runs long should wrap rather than push the page sideways */
@media (max-width: 1023px) { .hero__meta { white-space: normal; } }
.hero__cta-row { display: flex; }
@media (min-width: 1024px) {
  /* optically level with the headline's first line */
  .hero__meta { padding-top: 1rem; }
}
/* the image at ~90% of the screen, full-bleed — it escapes the container
   gutter with negative margins and runs edge to edge of the viewport */
.hero__wide { margin-top: var(--hero-img-gap); height: var(--hero-img-h); margin-inline: calc(var(--gutter) * -1); width: auto; }
.hero__wide .aspect { display: none; }

@media (min-width: 1024px) {
  .hero__inner { display: block; }
  .hero__foot { margin-top: var(--hero-foot-gap); }
  /* plain flow — nothing in the hero sticks; the tokens flip the image's
     height and offsets at this breakpoint */
}
.hero__foot { row-gap: 3rem; }
@media (max-width: 1023px) {
  .hero { min-height: auto; padding-bottom: 6rem; }
  .hero__inner { row-gap: 4rem; }
  .hero__wide { margin-top: 1.5rem; }
}

/* section-internal drops that were inline; they need mobile values */
.proof { margin-top: 14rem; }
.price-grid { margin-top: 10rem; }
.about__frames { margin-bottom: 10rem; }
@media (max-width: 1023px) {
  .proof { margin-top: 6rem; }
  .price-grid { margin-top: 5rem; }
  .about__frames { margin-bottom: 5rem; }
  .closing { padding-top: 6rem; padding-bottom: 7rem; }
}

/* the (A)(B)(C) column and the free-session heading carried inline desktop
   spacing; both need their own mobile numbers */
.abc-list { gap: 6rem; margin-top: 4rem; }
.fs-head { margin-bottom: 2.5rem; }
.fs-p { margin-bottom: 3rem; }
@media (max-width: 1023px) {
  .abc-list { gap: 2.4rem; margin-top: 1.6rem; }
  .fs-head { margin-bottom: 0; }
  .fs-p { margin-bottom: 1.2rem; }
  /* free-session rows: label and value on one line, tight */
  .rows--plain .row--split { grid-template-columns: auto 1fr; column-gap: 1.6rem; padding-block: 1.1rem; align-items: baseline; }
  .rows--plain .row--split .row__n { grid-column: 1; }
  .rows--plain .row--split .row__b { grid-column: 2; justify-content: flex-start; }
}

/* ---------- 12. LABEL + STATEMENT ----------
   Source mechanic: the label is a normal block, the statement is pulled up
   over it with a negative margin, and the statement's FIRST LINE carries an
   inline spacer so the label sits beside it instead of underneath.
   Source: .space { --space: 20rem; --space-s: 10.6rem; display: inline-flex;
   min/max-width: var(--space) }. --space-s is larger here because these
   labels are longer than the reference's. */
.space {
  --space: 20rem;
  --space-s: 16rem;
  display: inline-flex;
  min-width: var(--space-s);
  max-width: var(--space-s);
}
@media (min-width: 1024px) { .space { min-width: var(--space); max-width: var(--space); } }

.statement__label { display: block; margin-bottom: 0; }
.statement__h { margin-top: -2rem; }
@media (min-width: 1024px) { .statement__h { margin-top: -3.2rem; } }

/* ---------- 13. CURRICULUM (pinned horizontal) ---------- */
.pin { position: relative; }
.pin__spacer { position: relative; }
.pin__sticky {
  position: sticky; top: 0; height: 100svh;
  display: flex; flex-direction: column; overflow: hidden;
}
.pin__head { padding-block: 2rem; }
.pin__viewport { flex: 1; display: flex; align-items: stretch; overflow: hidden; }
.track {
  /* cards sit centred at their natural height rather than stretching to the
     full pinned viewport — wider, shorter, no dead space beneath the text */
  display: flex; align-items: center; gap: var(--grid-gap);
  padding-inline: var(--gutter); padding-bottom: 2rem;
  will-change: transform;
}
.lesson {
  position: relative; display: flex; flex-direction: column;
  width: 58rem; flex: none;
  height: 80svh;                 /* uniform card length: 80% of the viewport */
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 3rem; background: transparent;
  transition: border-color var(--dur-mid) var(--ease-quint);
}
@media (hover: hover) and (pointer: fine) { .lesson:hover { border-color: var(--ink); } }
.lesson__n { color: var(--muted); margin-bottom: 2.5rem; }
.lesson__media { margin-bottom: 2.5rem; }
.lesson__title { margin-bottom: 1.2rem; }
.lesson__date { color: var(--muted); margin-bottom: 2rem; }
/* the description sits on the card's bottom edge — image and title anchor
   the top, the body anchors the foot, the air lives in the middle */
.lesson__body { color: var(--muted); font-weight: var(--fw-body); margin-top: auto; }
.lesson__note {
  margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--rule);
  font-size: 1.7rem; line-height: 1.25;
}
.week-card {
  display: flex; flex-direction: column; gap: 1rem;
  width: 26rem; flex: none;
}
.week-card__k { color: var(--muted); margin-bottom: 1rem; }
.pin__progress { position: relative; height: 1px; background: var(--rule); margin-inline: var(--gutter); }
.pin__progress i { position: absolute; inset: 0; background: var(--ink); transform-origin: left center; transform: scaleX(0); }
.pin__meta { display: flex; justify-content: flex-end; padding: 1.5rem var(--gutter) 0; }

/* mobile / reduced-motion fallback: plain horizontal scroll */
.pin.--static .pin__spacer { height: auto !important; }
.pin.--static .pin__sticky { position: static; height: auto; }
.pin.--static .pin__viewport { overflow: visible; display: block; }
.pin.--static .track {
  transform: none !important;
  flex-direction: column; align-items: stretch;
  padding-inline: var(--gutter); padding-bottom: 0; gap: 1.2rem;
}
.pin.--static .week-card { width: auto; margin-top: 2.4rem; }
.pin.--static .week-card:first-child { margin-top: 0; }
.pin.--static .lesson { width: auto; height: auto; }
.pin.--static .pin__progress, .pin.--static .pin__meta { display: none; }
@media (max-width: 1023px) {
  .lesson { width: 28rem; padding: 2rem; }
  .week-card { width: 20rem; }
  .track { gap: var(--grid-gap); padding-inline: var(--gutter); }
  .pin__progress { margin-inline: var(--gutter); }
  .pin__meta { padding-inline: var(--gutter); }
}

/* ---------- 14. TESTIMONIAL / SLOT CAROUSEL ---------- */
.drag { user-select: none; cursor: grab; overflow: hidden; }
.drag.--grabbing { cursor: grabbing; }
.drag__track { display: flex; gap: var(--grid-gap); will-change: transform; }
.quote {
  flex: none; width: 29.5rem;
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 2.5rem 2rem; min-height: 39.5rem;
  display: flex; flex-direction: column; justify-content: space-between; gap: 5rem;
}
@media (min-width: 1024px) { .quote { width: 59.8rem; padding: 5rem 4rem; min-height: 44rem; } }
.quote__who { display: flex; flex-direction: column; gap: 0.4rem; }
.quote__role { color: var(--muted); font-weight: var(--fw-body); }
.quote.--slot { border-style: dashed; color: var(--muted); }
.drag__bar { display: flex; flex-direction: column; gap: 1.5rem; padding-top: 3rem; }
@media (min-width: 1024px) { .drag__bar { flex-direction: row-reverse; align-items: center; gap: 3rem; padding-top: 5rem; } }
.drag__rail { position: relative; flex: 1; height: 1px; background: var(--rule); }
.drag__rail i { position: absolute; inset: 0; background: var(--ink); transform-origin: left center; transform: scaleX(0.2); }

/* ---------- 15. PRICING ---------- */
.card {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 3rem;
  transition: border-color var(--dur-mid) var(--ease-quint);
}
@media (hover: hover) and (pointer: fine) { .card:hover { border-color: var(--ink); } }
@media (min-width: 1024px) { .card { padding: 4rem 3rem; } }
.card__badge {
  position: absolute; top: 0; left: 3rem; transform: translateY(-50%);
  background: var(--ink); color: var(--field);
  font-size: 1.7rem; line-height: 1; padding: 0.8rem 1rem; border-radius: var(--radius);
}
.card__desc { color: var(--muted); font-weight: var(--fw-body); margin-top: 1.2rem; max-width: 32.5rem; }
.card__price { display: flex; align-items: flex-end; gap: 0.5rem; margin-top: 3rem; }
@media (min-width: 1024px) { .card__price { margin-top: 5rem; } }
.card__cur { align-self: flex-start; font-size: 0.42em; line-height: 1.4; }
.card__amt { display: flex; align-items: flex-start; gap: 0.085em; line-height: 1; }
.card__per { line-height: 1; transform: translateY(-1rem); color: var(--muted); }
.card__note { color: var(--muted); margin-top: 1.2rem; }
.card__cta { margin-top: 3rem; margin-bottom: 2.5rem; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; width: 100%; }
@media (min-width: 1024px) { .card__cta { margin-top: 5rem; } }
.card__list { display: flex; flex-direction: column; margin-top: auto; }
.card__list li { padding-block: 1.2rem; border-top: 1px solid var(--rule); color: var(--muted); font-weight: var(--fw-body); }
/* a row carrying two spans reads as a mini table */
.card__list li:has(span + span) { display: flex; justify-content: space-between; gap: 1.5rem; }
.card__list li span:last-child { color: var(--ink); white-space: nowrap; }
.card__list li:last-child { border-bottom: 1px solid var(--rule); }

/* ---------- 16. FAQ ---------- */
.faq__item { display: flex; flex-direction: column; border-bottom: 1px solid var(--rule); }
@media (hover: hover) and (pointer: fine) {
  /* hovering the list dims every row; the one under the cursor stays lit.
     The "stay lit" rule has to out-specify the dim rule — `.faq__t:hover`
     alone (0,2,0) loses to `.faq:hover .faq__t` (0,3,0), which is why
     everything used to dim at once. */
  .faq__item { transition: opacity var(--dur-fast) ease-out; }
  .faq:hover .faq__item { opacity: 0.35; }
  .faq:hover .faq__item:hover { opacity: 1; }
}
.faq__t {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); column-gap: var(--grid-gap);
  width: 100%; text-align: left; padding-block: 3rem;
}
@media (min-width: 1024px) { .faq__t { grid-template-columns: repeat(8, minmax(0,1fr)); column-gap: var(--grid-gap); } }
.faq__n { display: none; color: var(--muted); }
@media (min-width: 1024px) { .faq__n { display: block; grid-column: span 1; } }
.faq__q { grid-column: span 4; position: relative; padding-right: 3rem; }
@media (min-width: 1024px) { .faq__q { grid-column: span 7; } }
.faq__sign { position: absolute; right: 0; top: 0.15em; width: 1.2rem; height: 1.2rem; }
.faq__sign::before, .faq__sign::after {
  content: ""; position: absolute; inset: 0; margin: auto; background: currentColor;
}
.faq__sign::before { width: 100%; height: 1px; }
.faq__sign::after { width: 1px; height: 100%; transition: transform var(--dur-mid) var(--ease-quint); }
.faq__item.--open .faq__sign::after { transform: scaleY(0); }
.faq__p { overflow: hidden; height: 0; transition: height var(--dur-mid) var(--ease-quint); }
.faq__inner {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); column-gap: var(--grid-gap);
  padding-bottom: 3rem;
}
@media (min-width: 1024px) { .faq__inner { grid-template-columns: repeat(8, minmax(0,1fr)); column-gap: var(--grid-gap); padding-bottom: 6rem; } }
.faq__a { grid-column: span 4; color: var(--muted); font-weight: var(--fw-body); }
@media (min-width: 1024px) { .faq__a { grid-column: 2 / span 6; } }

/* ---------- 16b. ABOUT / INSTRUCTOR ----------
   A pair of small stills and a caption on the left, one tall frame bleeding
   off the right edge, then the statement and the bio underneath. */
.about__frames { row-gap: 3rem; align-items: start; }
@media (min-width: 1024px) { .about__frames { margin-bottom: 18rem; } }

.about__pair-row { display: flex; gap: var(--grid-gap); }
@media (min-width: 1024px) { .about__pair-row { gap: var(--grid-gap); } }
.about__pair-row .media-fill { flex: 1 1 0; }
.about__pair-row .media-fill:last-child { margin-top: 4rem; }

.about__caption {
  margin-top: 1.5rem;
  font-size: 1.2rem; letter-spacing: var(--track-caption); text-transform: uppercase;
  color: var(--muted);
}
@media (min-width: 1024px) { .about__caption { font-size: 1.4rem; } }

@media (min-width: 1024px) {
  /* the tall frame runs to the viewport edge, like the reference */
  .about__tall { margin-right: calc(var(--gutter) * -1); }
}

.about__say { margin-bottom: 4rem; }
.about__body { row-gap: 4rem; }
.about__actions { margin-top: 1rem; }
.about__actions .pill-btn { color: var(--ink); }

/* ---------- 17. FOOTER ---------- */
.foot { border-top: 1px solid var(--rule); padding-top: 3rem; padding-bottom: 12.5rem; }
@media (min-width: 1024px) { .foot { padding-top: 5rem; padding-bottom: 30rem; } }
.foot__grid { row-gap: 7rem; }
.foot__col { display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 1024px) { .foot__col { gap: 4.5rem; } }
.foot__links { display: flex; flex-direction: column; }
.foot__inline { display: flex; gap: 2rem; }
@media (min-width: 1024px) { .foot__inline { gap: 4rem; } }
.copy { padding-bottom: 3rem; row-gap: 1.5rem; }
.copy__note { max-width: 46ch; }
/* the waitlist has no sticky bar under it, so the footer clears the fixed
   mode switcher on its own */
.copy--wl { padding-bottom: 8rem; }

/* ---------- 18. STICKY CTA (mobile) ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: 1.2rem; background: rgba(255, 255, 255, 0.94);
  border-top: 1px solid var(--rule);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transform: translateY(110%); transition: transform var(--dur-slow) var(--ease-expo);
}
.sticky-cta.--on { transform: translateY(0); }
@media (min-width: 1024px) { .sticky-cta { display: none; } }

/* ---------- 18b. WORK INDEX ----------
   An expandable index: name · tag chips · toggle on the left, a strip of
   stills bleeding off the right edge. Opening a row drops the strip to full
   width and reveals the description and its two actions. */
.wk { border-top: 1px solid var(--rule); }
.wk__item { position: relative; border-bottom: 1px solid var(--rule); cursor: pointer; }
.wk__item.--open { cursor: default; }

.wk__head {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  align-items: center;
  width: 100%;
  padding-block: 2.5rem;
  text-align: left;
}
@media (min-width: 1024px) {
  .wk__head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    padding-block: 3rem;
  }
}

.wk__n { grid-column: span 1; color: var(--muted); align-self: center; }
.wk__name {
  grid-column: 2 / span 2; font-size: var(--fs-h4); letter-spacing: var(--track-sub); line-height: 1.1;
}
.wk__tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.2rem; }
.wk__toggle {
  grid-column: 4 / span 1; display: flex; align-items: center; justify-content: flex-end;
  gap: 0.6em; color: var(--muted);
}
@media (max-width: 1023px) {
  .wk__head { grid-template-columns: auto 1fr auto; column-gap: 1.2rem; align-items: baseline; }
  .wk__n { grid-column: 1; grid-row: 1; }
  .wk__name { grid-column: 2; grid-row: 1; }
  .wk__toggle { grid-column: 3; grid-row: 1; align-self: center; }
  .wk__tags { grid-column: 1 / -1; grid-row: 2; }
  .wk__toggle .wk__sign { width: 1.7rem; height: 1.7rem; }
}
@media (min-width: 1024px) {
  .wk__name { grid-column: 2 / span 3; grid-row: 1; font-size: var(--fs-h4); }
  /* the chips tuck under the name, which frees the middle columns for stills */
  .wk__tags { grid-column: 2 / span 3; grid-row: 2; margin-top: 1rem; flex-wrap: wrap; }
  .wk__toggle {
    /* column 5 — clear of the name block, ahead of the strip */
    grid-column: 5 / span 1; grid-row: 1; display: flex; align-items: center; gap: 0.6em;
    color: var(--muted); white-space: nowrap;
  }
  .wk__toggle::before { content: "("; }
  .wk__toggle::after { content: ")"; }
}

/* the chips carry the brand at small scale */
.chip {
  display: inline-block;
  background: var(--ink); color: var(--field);
  font-size: 1.2rem; line-height: 1; letter-spacing: var(--track-caption);
  text-transform: uppercase;
  padding: 0.45rem 0.6rem 0.35rem;
  white-space: nowrap;
}
@media (min-width: 1024px) { .chip { font-size: 1.2rem; } }

/* the +/− sign, same mechanic as the FAQ */
/* sized to the brackets around it — the parens are ~0.75em tall, so is this */
.wk__sign { position: relative; display: block; width: 1.5rem; height: 1.5rem; }
.wk__sign::before, .wk__sign::after {
  content: ""; position: absolute; inset: 0; margin: auto; background: currentColor;
}
.wk__sign::before { width: 100%; height: 1px; }
.wk__sign::after { width: 1px; height: 100%; transition: transform var(--dur-mid) var(--ease-quint); }
.wk__item.--open .wk__sign::after { transform: scaleY(0); }

/* the strip of stills — clipped by the page, so it bleeds off the right */
.wk__media { overflow: hidden; padding-bottom: 2.5rem; }
.wk__item.--open .wk__media { cursor: pointer; }
@media (min-width: 1024px) {
  .wk__media {
    margin-top: -9rem; margin-bottom: 0; padding-bottom: 3rem;
    margin-left: 42%;                   /* the stills get the right 58% */
    transition: margin var(--dur-mid) var(--ease-quint);
  }
  .wk__item.--open .wk__media { margin-left: 0; margin-top: 3rem; }
}
.wk__strip { display: flex; align-items: flex-start; gap: var(--grid-gap); }
@media (min-width: 1024px) { .wk__strip { gap: var(--grid-gap); } }

/* Equal widths, heights that vary with each still's own ratio — a portrait
   tile runs longer than a landscape one. Tops align, bottoms stagger. Every
   tile shares the space evenly, so the set always fits and nothing clips. */
.wk__shot {
  flex: 1 1 0;
  min-width: 0;
  width: auto; height: auto;
  aspect-ratio: var(--ar, 1.3333);
}
/* below the desktop grid five equal tiles are 60px each — unusable. The
   strip becomes a swipeable row of big tiles that bleeds off the right edge */
@media (max-width: 1023px) {
  .wk__media { overflow: visible; }
  .wk__strip {
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter);
  }
  .wk__strip::-webkit-scrollbar { display: none; }
  .wk__shot { flex: 0 0 62vw; scroll-snap-align: start; }
}
.wk__shot .slot__meta { display: none !important; }
.wk__item.--open .wk__shot.--empty .slot__meta { display: flex !important; }

/* description + actions */
.wk__panel { overflow: hidden; height: 0; transition: height var(--dur-mid) var(--ease-quint); }
.wk__panel-inner {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--grid-gap);
  row-gap: 1.5rem; padding-top: 0.5rem; padding-bottom: 2.5rem;
}
@media (min-width: 1024px) {
  .wk__panel-inner {
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); padding-bottom: 4rem;
  }
}
/* The links ride on the project name's own line. Below the desktop grid they
   drop back into the flow, where there is no room beside the toggle. */
.wk__actions { display: none; align-items: baseline; gap: 2.5rem; }
.wk__item.--open .wk__actions { display: flex; padding-bottom: 2rem; }
.wk__desc { grid-column: 1 / -1; }
.wk__link { font-size: var(--fs-body); line-height: var(--lh-body); }
.wk__desc { grid-column: 1 / -1; color: var(--muted); font-weight: var(--fw-body); }
.wk__hint {
  grid-column: 1 / -1; color: var(--muted); font-size: 1.4rem; line-height: 1;
  display: flex; align-items: center; gap: 0.6em;
}
@media (min-width: 1024px) { .wk__hint { grid-column: 8 / span 5; font-size: 1.7rem; } }
@media (min-width: 1024px) {
  /* pinned to the row's top-right, on the same baseline as the name — 3rem
     matches .wk__head's padding-block, so the two first lines line up */
  .wk__actions {
    display: flex; position: absolute; top: 3rem; right: 0;
    padding-bottom: 0; justify-content: flex-end;
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur-mid) var(--ease-quint);
  }
  .wk__item.--open .wk__actions { display: flex; opacity: 1; pointer-events: auto; }
  .wk__desc { grid-column: 2 / span 6; }
}
.pill-note { color: var(--muted); font-size: var(--fs-body); line-height: var(--lh-body); }
.pill-btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 1.4rem 1.8rem; font-size: 1.4rem; line-height: 1;
  transition: border-color var(--dur-mid) var(--ease-quint), color var(--dur-mid) var(--ease-quint);
}
@media (min-width: 1024px) { .pill-btn { font-size: 1.7rem; } }
@media (hover: hover) and (pointer: fine) {
  .pill-btn:hover { border-color: var(--ink); background: var(--ink); color: var(--field); }
  .wk__head:hover .wk__name { opacity: 0.5; }
  .wk__name { transition: opacity var(--dur-fast) ease-out; }
}

/* Resting state = open state. The toggle and the description panel are
   gone from the row (the description still feeds the overlay from the DOM);
   number, then name + chips right beside it; stills full width beneath. */
.wk__item, .wk__item.--open { cursor: default; }
.wk__head { cursor: default; }
.wk__toggle, .wk__panel { display: none; }
@media (min-width: 1024px) {
  .wk__head { grid-template-columns: auto 1fr; column-gap: 2.2rem; }
  .wk__n { grid-column: 1; grid-row: 1; }
  .wk__name { grid-column: 2; grid-row: 1; }
  .wk__tags { grid-column: 2; grid-row: 2; }
  .wk__media, .wk__item.--open .wk__media { margin-left: 0; margin-top: 2rem; transition: none; }
}

/* the closing block: brand green, with the motif running along its foot */
.closing {
  position: relative; overflow: hidden;
  padding-top: 8rem; padding-bottom: 10rem;
}
@media (min-width: 1024px) { .closing { padding-top: 12rem; padding-bottom: 16rem; } }

/* a section that flips to the brand green */
/* the finish flips the page: black field, white ink. Scoped token
   overrides — every component inside reads them and re-themes itself. */
.on-green {
  --field: #000000;
  --ink: #ffffff;
  --muted: rgba(255, 255, 255, 0.60);
  --muted-2: rgba(255, 255, 255, 0.45);
  --rule: rgba(255, 255, 255, 0.24);
  background: var(--field);
  color: var(--ink);
}


/* ---------- 18c. CASE OVERLAY ----------
   Meta panel pinned left, the full run of stills scrolling on the right, the
   page locked behind it. Same split as the reference (panel ~29% of the
   viewport), rebuilt in DOM rather than WebGL. */
.case {
  position: fixed; inset: 0; z-index: 200;
  display: grid; grid-template-columns: 1fr;
  visibility: hidden; pointer-events: none;
}
.case.--on { visibility: visible; pointer-events: auto; }
@media (min-width: 1024px) { .case { grid-template-columns: 29% 1fr; } }

.case__scrim {
  position: absolute; inset: 0;
  background: var(--field); opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-expo);
}
.case.--on .case__scrim { opacity: 1; }

.case__panel {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  padding: 2.4rem var(--gutter);
  opacity: 0; transform: translateY(1.6rem);
  transition: opacity var(--dur-slow) var(--ease-expo) 0.12s,
              transform var(--dur-slow) var(--ease-expo) 0.12s;
}
@media (min-width: 1024px) { .case__panel { padding: 3rem var(--gutter); } }
.case.--on .case__panel { opacity: 1; transform: none; }

.case__head { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; }
.case__name { font-size: var(--fs-h4); letter-spacing: var(--track-sub); line-height: 1.1; }
@media (min-width: 1024px) { .case__name { font-size: var(--fs-h4); } }
.case__live { display: inline-flex; align-items: baseline; gap: 0.4em; white-space: nowrap; }
.case__live[hidden] { display: none; }

.case__desc { margin-top: 2.5rem; color: var(--muted); font-weight: var(--fw-body); max-width: 46rem; }
.case__meta { margin-top: 3rem; display: flex; flex-direction: column; }
.case__meta li {
  display: grid; grid-template-columns: 2.4rem 1fr 1.4fr; gap: 1rem;
  padding-block: 1rem; border-bottom: 1px solid var(--rule);
}
.case__meta li:first-child { border-top: 1px solid var(--rule); }
.case__meta .k { color: var(--muted); }
.case__close {
  margin-top: auto; padding-top: 3rem;
  display: inline-flex; align-items: baseline; gap: 0.8em; align-self: flex-start;
}
.case__esc {
  font-size: 1.2rem; letter-spacing: var(--track-caption); text-transform: uppercase;
  border: 1px solid var(--rule); border-radius: 0.3rem; padding: 0.3rem 0.5rem;
  color: var(--muted);
}

.case__stream {
  position: relative; z-index: 2;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  padding: var(--gutter) var(--gutter) 12rem;
  display: flex; flex-direction: column; gap: var(--grid-gap);
  scrollbar-width: none; -ms-overflow-style: none;
  opacity: 0; transform: translateX(3%);
  transition: opacity var(--dur-slow) var(--ease-expo),
              transform 0.9s var(--ease-expo);
}
.case__stream::-webkit-scrollbar { display: none; }
.case.--on .case__stream { opacity: 1; transform: none; }
.case.--morph .case__stream { opacity: 1; transform: none; transition: none; }
.case__stream figure {
  /* flex items shrink by default — that squashed every still to fit one
     screen. They keep their full height and the column scrolls instead. */
  flex: none;
  transform-origin: top left; will-change: transform;
}
/* every frame but the hero arrives as it enters the column, so whatever fits
   on screen behind a short hero shows immediately and the rest follow on scroll */
.case__stream figure.--rise { opacity: 0; transform: translateY(4rem); }
.case__stream figure.--rise.--in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease-expo), transform 0.9s var(--ease-expo);
}

/* Leaving: the panel and every frame but the one flying home dissolve first,
   so a single image travels back over a still field instead of the whole
   column sliding about. The backdrop holds until the flight lands. */
.case.--closing .case__panel { opacity: 0; transition: opacity 0.22s linear; }
.case.--closing .case__stream figure {
  opacity: 0; transform: none; transition: opacity 0.22s linear;
}
.case.--closing .case__stream figure.--flying { opacity: 1; z-index: 3; }
/* the row hands its stills over — hide the originals while they fly */
.wk__shot { transition: opacity 0.45s var(--ease-quint); }
.wk__shot:nth-child(2) { transition-delay: 0.08s; }
.wk__shot:nth-child(3) { transition-delay: 0.16s; }
.wk__shot:nth-child(4) { transition-delay: 0.24s; }
.wk__shot:nth-child(5) { transition-delay: 0.32s; }
/* hidden instantly while the hero is in flight, then they return in order */
.wk__item.--morphing .wk__shot { opacity: 0; transition-duration: 0s; transition-delay: 0s; }
@media (min-width: 1024px) { .case__stream { padding: 3rem var(--gutter) 14rem; gap: var(--grid-gap); } }
.case__stream figure { position: relative; width: 100%; overflow: hidden; background: rgba(0, 0, 0, 0.05); }
/* the frame carries the row's aspect ratio and the picture fills it the same
   way it does in the row — so nothing re-crops or stretches mid-flight */
.case__stream img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case__stream .case__ph {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid var(--rule);
  display: flex; align-items: flex-end; padding: 1.5rem;
  font-size: 1.4rem; color: var(--muted);
}
.case__stream .case__ph::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule) 1px, transparent 1px);
  background-size: 1.7rem 1.7rem; opacity: 0.7;
}
.case__ph span { position: relative; }

/* while a GL flight owns the image, both DOM endpoints step aside; the
   !important outranks .case.--closing figure.--flying's opacity:1 */
.--gl-hidden, .--gl-hidden img { opacity: 0 !important; }

html.--case-open, html.--case-open body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .case__scrim, .case__panel, .case__stream { transition: none !important; transform: none !important; }
}

/* mobile overlay — after every base .case__* rule so it wins the cascade */
@media (max-width: 1023px) {
  .case { display: block; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
  .case__scrim { position: fixed; }
  .case__panel { padding-top: calc(var(--header-h) + 0.5rem); padding-bottom: 1.6rem; }
  .case__desc { margin-top: 1.2rem; max-width: none; }
  .case__meta { display: none; }
  .case__close { margin-top: 1.4rem; padding-top: 0; }
  .case__esc { display: none; }
  .case__stream { overflow: visible; height: auto; }
}

/* ---------- 18c-b. WORK, SIMPLIFIED ----------
   One still per project, the whole tile a link to the live app. The strip,
   overlay and flight layer stay in the codebase for when the full image sets
   exist; nothing here removes them.
   Order matters: the desktop block must come LAST, or the base flex-grow
   below stretches the tile and the derived width never applies. */
.wk__media--single { display: block; cursor: pointer; }
.wk__media--single .wk__strip { overflow: visible; margin-right: 0; padding-right: 0; }
.wk__media--single .wk__shot { flex: 1 1 auto; min-width: 0; width: auto; }
/* the tile is a solid block of ink until its media lands: pure black on the
   light field, pure white on the dark one, lime on the green one — one token,
   because --ink is already that value in every theme. The extra class beats
   the per-theme .media-fill surface overrides in section 20. */
.wk__media--single .wk__shot.media-fill { background: var(--ink); }
.wk__media--single .wk__shot.media-fill::before { content: none; }
/* the media floats inside the block with the ink showing as a frame */
.wk__media--single .wk__shot video,
.wk__media--single .wk__shot img {
  /* a replaced element ignores an inset it cannot resolve, so the size is
     stated outright rather than derived from the offsets */
  inset: 12.5%;
  width: 75%; height: 75%;
  object-fit: contain;
}
.wk__head { cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .wk__media--single .wk__shot img { transition: transform 0.9s var(--ease-quint), opacity var(--dur-mid) ease-out; }
  .wk__media--single:hover .wk__shot img { transform: scale(1.03); }
}
@media (min-width: 1024px) {
  /* the still stands 70% of the viewport tall at its own ratio and hangs on
     the right edge; the name and chips sit in the space it leaves */
  .wk__item.--open .wk__media--single { margin-left: 0; margin-top: -3.5rem; }
  .wk__media--single .wk__strip { justify-content: flex-end; }
  .wk__media--single .wk__shot {
    flex: 0 0 auto;
    height: 70svh;
    width: calc(70svh * var(--ar, 1.3675));
    max-width: 100%;
  }
}

/* ---------- 18d. MID-PAGE CTA + RECEIPTS ---------- */
/* a quiet way in from the middle of the page: statement-scale text link,
   sitting on the section's own left edge */
.mid-cta { margin-top: 5rem; }
@media (min-width: 1024px) { .mid-cta { margin-top: 7rem; } }

/* ---------- 19. MISC ---------- */
.rule { width: 100%; border-top: 1px solid var(--rule); }
.tag { color: var(--muted); }
.link-list li { padding-block: 1.2rem; border-bottom: 1px solid var(--rule); }
.link-list li:first-child { border-top: 1px solid var(--rule); }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--field); padding: 1rem 1.6rem;
}
.skip:focus { left: 1rem; top: 1rem; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }


/* ---------- 20. COLOUR MODES ----------
   The page reads --field/--ink/--muted/--rule everywhere, so a mode is one
   token override on <html>. data-theme is set before the stylesheet loads
   (inline head script) so there is no flash. */
html[data-theme="dark"] {
  --field: #0a0a0a;
  --ink: #ffffff;
  --muted: rgba(255, 255, 255, 0.55);
  --muted-2: rgba(255, 255, 255, 0.4);
  --rule: rgba(255, 255, 255, 0.18);
  --rule-soft: rgba(255, 255, 255, 0.18);
}
html[data-theme="green"] {
  --field: #004332;
  --ink: #dcfb77;
  --muted: rgba(220, 251, 119, 0.6);
  --muted-2: rgba(220, 251, 119, 0.45);
  --rule: rgba(220, 251, 119, 0.22);
  --rule-soft: rgba(220, 251, 119, 0.22);
}

/* the closing block always flips the page: dark flips to light, green to lime */
html[data-theme="dark"] .on-green {
  --field: #ffffff; --ink: #000000;
  --muted: rgba(0, 0, 0, 0.55); --muted-2: rgba(0, 0, 0, 0.4);
  --rule: rgba(0, 0, 0, 0.2);
}
html[data-theme="green"] .on-green {
  --field: #dcfb77; --ink: #004332;
  --muted: rgba(0, 67, 50, 0.6); --muted-2: rgba(0, 67, 50, 0.45);
  --rule: rgba(0, 67, 50, 0.25);
}

/* difference-blend header: black/white fields invert cleanly, but white over
   the green field produces pink — green mode drops the blend and inks the nav */
html[data-theme="green"] .sh { mix-blend-mode: normal; color: var(--ink); }

/* surfaces that carried literal light-mode alphas */
html[data-theme="dark"] .media-fill, html[data-theme="green"] .media-fill,
html[data-theme="dark"] .case__stream figure, html[data-theme="green"] .case__stream figure,
html[data-theme="dark"] .case__stream .case__ph, html[data-theme="green"] .case__stream .case__ph {
  background: rgba(255, 255, 255, 0.07);
}
html[data-theme="dark"] .media-fill.--empty, html[data-theme="green"] .media-fill.--empty {
  background: rgba(255, 255, 255, 0.04);
}
html[data-theme="dark"] .sticky-cta { background: rgba(10, 10, 10, 0.94); }
html[data-theme="green"] .sticky-cta { background: rgba(0, 67, 50, 0.94); }

/* ---------- 21. MODE SWITCHER ----------
   Segmented control: Green stands alone on the left, Light | Dark share a
   pill on the right. The active option fills with ink, like the reference. */
.theme-sw {
  position: fixed; left: 1.2rem; bottom: 1.4rem; z-index: 95;
  transition: bottom var(--dur-slow) var(--ease-expo);
  display: flex; align-items: center; gap: 0.8rem;
  font-size: var(--fs-caption); letter-spacing: var(--track-caption);
  text-transform: uppercase; line-height: 1;
}
@media (min-width: 1024px) { .theme-sw { left: 2rem; bottom: 2rem; } }
@media (max-width: 1023px) {
  .theme-sw { font-size: 1.45rem; }
  .theme-sw__opt { padding: 0.5rem 0.7rem; }
  /* the join bar slides up under it; the switcher steps up to make room */
  body:has(.sticky-cta.--on) .theme-sw { bottom: 10.4rem; }
}
.theme-sw__seg {
  /* small corners, tight packing — the site's card radius, not a capsule */
  /* tight text on a faint ground: ~4px gaps, ~9px corners */
  display: flex; gap: 0; padding: 0.3rem 0.3rem;
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.theme-sw__opt {
  padding: 0.25rem 0.35rem;
  background: transparent;
  color: var(--muted); cursor: pointer;
  transition: color var(--dur-fast) ease-out, background-color var(--dur-fast) ease-out;
}
.theme-sw__opt.--active { color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .theme-sw__opt:not(.--active):hover { color: var(--ink); }
}

/* ---------- 22. CURRENCY ----------
   Nigeria (Africa/Lagos timezone or -NG locale) sees naira only; everyone
   else sees dollars only. The head script sets html.--intl before paint. */
.usd { display: none; }
html.--intl .usd { display: inline; }
html.--intl .ngn { display: none; }

/* ---------- 23. WAITLIST PAGE ----------
   waitlist.html only. Reuses the hero type (.hero__title, .hero__meta), the
   section statement (.h2) and the shared .cta-lg, so nothing here restates
   size or weight — this block is layout plus the two new components, the
   field and the pill. */
.wl { padding-top: calc(var(--header-h) + 5rem); padding-bottom: var(--sec-sm); }
.wl__inner { display: flex; flex-direction: column; row-gap: var(--sec-sm); width: 100%; }
.wl__hero { row-gap: 3rem; }

/* -- the hero band ------------------------------------------------------
   Sits beside the form and takes the same half of the row, so its height is
   whatever the form needs. Stacked above it on a narrow screen, where it
   falls back to a fixed strip. */
.wl-band { position: relative; height: 16rem; }

/* -- after the form is sent ---------------------------------------------
   The hero swaps its headline and subheading for the receipt, the form
   column steps out, and the band takes the whole row. */
.wl__sent { display: none; }
.wl.--sent .wl__ask,
.wl.--sent .wl__form-col { display: none; }
.wl.--sent .wl__sent { display: block; }
.wl.--sent .wl-band { height: 24rem; }
/* the holding page has two blocks, not five, so it centres in the viewport */
.wl--soon { min-height: 100svh; display: flex; align-items: center; }
.wl--soon .wl__inner { row-gap: 8rem; }
.wl__form-row { row-gap: 4rem; }

/* -- the form -- */
/* the form sits on a filled panel so the page's one job is also its loudest
   element. .on-green does the token flip; these two hairline steps are the
   only ones it does not carry, and without them the field rules and pill
   borders would keep their light-mode greys on a dark or lime ground. */
.wl__panel {
  --rule-4: var(--rule);
  --rule-6: var(--rule);
  height: 100%;
  padding: 3rem 2rem;
  border-radius: var(--radius);
}

.wl__form { display: flex; flex-direction: column; align-items: flex-start; }
.wl__cells { display: flex; flex-direction: column; row-gap: 3rem; width: 100%; }

/* the label runs as a caption (tiny, uppercase, inked) and the placeholder as
   muted input-sized text, so the two can never be mistaken for each other */
.wl__label {
  display: block; margin-bottom: 1.2rem;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: var(--track-caption);
  text-transform: uppercase;
  color: var(--ink);
}
.wl__opt { color: var(--muted-2); font-weight: var(--fw-regular); }

/* the field is a rule the text sits on, matching every other hairline here */
.wl__field { width: 100%; border-bottom: 1px solid var(--rule-6); }
.wl__input {
  width: 100%;
  padding: 0 0 1.1rem;
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: var(--lh-h3);
  letter-spacing: var(--track-sub);
  color: var(--ink);
  background: none; border: 0; border-radius: 0;
  -webkit-appearance: none; appearance: none;
}
.wl__input::placeholder { color: var(--muted); opacity: 1; }
.wl__input:focus { outline: none; }
.wl__field { transition: border-color var(--dur-fast) ease-out; }
.wl__field:focus-within { border-bottom-color: var(--ink); }

/* -- the one-tap question -- */
.wl__roles { border: 0; margin-top: 3.5rem; }
.wl__pills { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.wl__pill { position: relative; cursor: pointer; }
.wl__pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.wl__pill span {
  display: block;
  padding: 0.85rem 1.4rem;
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-small);
  letter-spacing: var(--track-sub);
  color: var(--muted-2);
  border: 1px solid var(--rule-4);
  border-radius: 10rem;
  transition: color var(--dur-fast) ease-out, border-color var(--dur-fast) ease-out,
              background-color var(--dur-fast) ease-out;
}
.wl__pill input:checked + span { color: var(--field); background: var(--ink); border-color: var(--ink); }
.wl__pill input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .wl__pill:hover input:not(:checked) + span { color: var(--ink); border-color: var(--ink); }
}

.wl__submit { margin-top: 4rem; text-align: left; }
.wl__form.--busy { opacity: 0.45; pointer-events: none; }

.wl__note { margin-top: 1.8rem; min-height: 1.5em; max-width: 42ch; }
.wl__done { display: flex; flex-direction: column; row-gap: 2rem; }
.wl__done[hidden], .wl__form[hidden] { display: none; }
.wl__done .wl__note { margin-top: 0; }

/* honeypot — off-screen rather than display:none, which some bots skip */
.wl__pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* -- the copy below the fold -- */
.wl__why, .wl__who { row-gap: 4rem; }
.wl__why-head { margin-bottom: 2rem; }
.wl__block { display: flex; flex-direction: column; row-gap: 1.2rem; }

/* four live apps, named and openable — the only proof this page can carry
   without images, so it sits directly under the claim it backs */
.wl__proof { display: flex; flex-wrap: wrap; gap: 0.6rem 2.4rem; margin-top: 0.4rem; }
.wl__proof a { font-weight: var(--fw-body); }
.wl__block p:not(.h2):not(.h3):not(.h4) { max-width: 38ch; }

/* -- the three cards -----------------------------------------------------
   Same anatomy as the .card component further up the sheet: a bordered
   container with an inked panel on top. The panel carries the hard line,
   the base carries the explanation. */
.wl-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--rule); border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--dur-mid) var(--ease-quint);
}
@media (hover: hover) and (pointer: fine) { .wl-card:hover { border-color: var(--ink); } }
.wl-card__panel {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 22rem;
  padding: 2rem;
  background: var(--ink); color: var(--field);
}
/* the dot grid sits behind the lead line, never over it */
.wl-card__grid { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wl-card__lead { position: relative; z-index: 1; }
.wl-card__lead {
  font-size: var(--fs-h3); font-weight: var(--fw-semibold);
  line-height: var(--lh-tight); letter-spacing: var(--track-display);
}
.wl-card__base { display: flex; flex-direction: column; row-gap: 1.2rem; padding: 2rem; }
.wl-card__label {
  font-size: var(--fs-caption); font-weight: var(--fw-semibold);
  letter-spacing: var(--track-caption); text-transform: uppercase; line-height: 1;
  color: var(--muted-2);
}

/* -- the footer ----------------------------------------------------------
   Full-bleed flipped block: link columns over a wordmark that runs the
   width of the page. .on-green does the token flip, so this rule only
   handles size and position. */
/* the bottom padding is clearance for the fixed mode switcher, which would
   otherwise sit on top of the wordmark */
.wl-foot { padding-top: 6rem; padding-bottom: 6rem; overflow: hidden; }
.wl-foot__grid { row-gap: 4rem; }
.wl-foot__say { letter-spacing: var(--track-display); }
.wl-foot__col { display: flex; flex-direction: column; row-gap: 1.2rem; align-items: flex-start; }
/* the last column carries the row out to the right gutter, so the header,
   the footer row and the wordmark below all end on the same line */
.wl-foot__col:last-child { align-items: flex-end; text-align: right; }
.sh__nav--end { justify-content: flex-end; }
.wl-foot__col ul { display: flex; flex-direction: column; row-gap: 0.6rem; }
/* the address swaps to "Copied" on click; the underline tracks the shorter
   word rather than hanging past it */
.wl-copy { display: inline-block; }
.wl-foot__col li, .wl-foot__col p, .wl-foot__col button {
  font-size: var(--fs-body); line-height: var(--lh-body);
}
.wl-foot__mark {
  margin-top: 6rem;
  /* sized in vw so the wordmark keeps meeting both gutters at any width;
     the bottom padding is what stops overflow:hidden clipping the descenders */
  font-size: 16vw; font-weight: var(--fw-bold);
  line-height: 0.8; letter-spacing: -0.045em;
  white-space: nowrap;
  padding: 0 var(--gutter) 0.12em;
}
.wl-foot__mark sup { font-size: 0.18em; vertical-align: super; letter-spacing: 0; }

@media (min-width: 1024px) {
  .wl-card__panel { min-height: 30rem; padding: 3rem; }
  .wl-card__base { padding: 3rem; row-gap: 1.6rem; }
  .wl-foot { padding-top: 14rem; }
  /* the gutter is a smaller share of a wide viewport, so the mark can grow */
  .wl-foot__mark { margin-top: 12rem; font-size: 16.6vw; }
}

@media (min-width: 1024px) {
  .wl { padding-top: calc(var(--header-h) + 8rem); }
  /* the row stretches its children, so the band matches the form's height */
  .wl-band { height: auto; align-self: stretch; min-height: 34rem; }
  .wl.--sent .wl-band { grid-column: 1 / span 12; height: auto; min-height: 46rem; }
  .wl__panel { padding: 4rem 3.5rem; }
  .wl__cells { row-gap: 3.4rem; }
  .wl__input { padding-bottom: 1.4rem; }
  .wl__why-head { margin-bottom: 4rem; }
  .wl__block { row-gap: 1.6rem; }
}