/* STAND v2: one stylesheet for every page.
   The hero works because it has one big thing (the ribbon), small text beside it, depth and slow motion, and
   almost nothing else. Every part of every page follows that: one big thing, the rest small. Colour fields only
   where the ribbon draws (the navy hero and page heads, the only moving lines), under the event tiles (ice: the one
   light colour, kept for what we have) and behind the signup (navy: the main action), and no statement is set larger than
   the hero's line, so the hero always leads. */

@font-face { font-family: "Public Sans"; src: url("assets/public-sans.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --page: #FFFFFF; --ice: #E5F4F7; --navy: #031B42; --ink: #102C38;
  --muted: rgba(16, 44, 56, .62);         /* only on type of 24px and up: 4.2:1 on white passes AA for large text */
  --muted-ink: rgba(16, 44, 56, .7);      /* secondary small text: 5.6:1 on white, AA at any size */
  --line: rgba(16, 44, 56, .12);
  --field: rgba(16, 44, 56, .05);        /* a field to write in, on white: ink at 5 %, so ice stays the events' colour */
  --on-navy: rgba(255, 255, 255, .7);     /* secondary text on navy: 8.6:1, AA at any size */
  --edge: clamp(16px, 2.5vw, 36px);       /* page margin: 36px at 1440, 16px on a phone (B&O) */
  --pad: clamp(20px, 4.4vw, 64px);        /* the one inset inside colour fields: header, head text, cards */
  --card: clamp(24px, 3.4vw, 56px);       /* padding inside white cards */
  --gap: clamp(24px, 3.4vw, 48px);        /* between columns */
  --chapter: clamp(104px, 12.2vw, 200px); /* between parts: 176px at 1440 (Stripe Sessions, measured 10 Oct 2026) */
  --block: clamp(32px, 4vw, 64px);        /* between the blocks of a part */
  --inner: 24px;                          /* between items of a stack */
  --pair: 8px;                            /* between a title and its own text */
  --bar: clamp(64px, 6.1vw, 88px);        /* header height */
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { background: var(--page); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 18px/1.5 "Public Sans", system-ui, sans-serif; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
p, li, dd { text-wrap: pretty; }          /* no word left alone on a paragraph's last line */
ul, ol { list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .28em; transition: text-decoration-color 150ms var(--ease); }
a:hover { text-decoration-color: transparent; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
::selection { background: #F9FFC4; color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------------------------------------------------------------- Type: three sizes that matter */
/* .top    the hero's line and each page's title: the largest statement on any page
   .say    a part's one statement, a step smaller
   .title  a name inside a part */
.top { font-size: clamp(32px, 4.2vw - 10px, 64px); font-weight: 300; letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; }
.say { font-size: clamp(26px, 3vw, 44px); font-weight: 300; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.title { font-size: clamp(20px, 1.55vw, 22px); font-weight: 400; letter-spacing: -.01em; line-height: 1.3; }
.small { font-size: 15px; }
.micro { font-size: 13px; }
.muted { color: var(--muted); }
.quiet { color: var(--muted-ink); }
br.wide { display: inline; }

/* ---------------------------------------------------------------- Layout */
.wrap { width: min(100% - 2 * var(--edge), 1600px); margin-inline: auto; }
.box { position: relative; border-radius: 6px; overflow: hidden; }
.navy { background: var(--navy); color: #fff; }
.part { margin-top: var(--chapter); }

/* A link that acts: text with a chevron drawn in CSS, which moves 3px on hover; a press settles at .98. */
.go { display: inline-flex; align-items: center; gap: .75rem; padding: 10px 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: none; cursor: pointer; transition: transform 150ms var(--ease); }
.go::after { content: ""; width: .5rem; height: .5rem; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); transition: transform 220ms var(--ease); }
.go:hover::after { transform: translateX(3px) rotate(45deg); }
.go:active { transform: scale(.98); }

/* Three kinds of action, each with its own look:
   .btn   the main action, one per place: a real button, navy (Subscribe, Send application, Watch with sound)
   .go    going somewhere: text with a chevron (All events, Be part of it, Become a member)
   .util  a small thing to take along: text with an icon, no chevron (Add to calendar) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: 12px 22px; border: 0; text-decoration: none; border-radius: 6px; background: var(--navy); color: #fff; font: inherit; font-size: 16px; font-weight: 450; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: background-color 150ms var(--ease), transform 150ms var(--ease); }
.btn:hover { background: #0b2c5e; }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.btn:disabled { opacity: .55; cursor: default; }
.util { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; text-decoration: none; color: inherit; }
.util svg { width: 15px; height: 15px; flex: none; }
.util:hover { text-decoration: underline; text-underline-offset: .28em; }

/* ---------------------------------------------------------------- Header, compact header, menu */
/* The same on every page: Menu left, logo centred, Newsletter right (B&O), set inside the top of the first box. */
.site { position: absolute; top: var(--edge); left: 0; right: 0; z-index: 10; color: #fff; font-size: 14px; }
.bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--bar); padding-inline: var(--pad); }
.bar a { text-decoration-color: transparent; }
.bar a:hover { text-decoration-color: currentColor; }
.bar > :last-child { justify-self: end; }
.toggle { justify-self: start; display: flex; align-items: center; gap: 12px; height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.lines { position: relative; width: 22px; height: 9px; }
.lines::before, .lines::after { content: ""; position: absolute; left: 0; width: 100%; height: 1px; background: currentColor; transition: transform 360ms var(--ease), width 360ms var(--ease); }
.lines::before { top: 0; }
.lines::after { bottom: 0; }
.toggle:hover .lines::after { width: 64%; }
.logo { display: flex; align-items: center; gap: 12px; font-size: clamp(17px, 1.4vw, 20px); font-weight: 450; letter-spacing: .06em; text-decoration: none; }
.logo svg { width: 1.5em; height: 1.5em; }

/* The compact header slides in from the top when you scroll up after the first box has gone. */
.mini { position: fixed; inset: 0 0 auto; z-index: 20; background: var(--page); border-bottom: 1px solid var(--line); color: var(--ink); font-size: 14px; transform: translateY(-101%); transition: transform 360ms var(--ease); }
.mini .bar { height: 64px; }
.mini.show { transform: none; }

/* The menu: a full-screen layer. It fades in, its links rise one after another, and the toggle's two lines turn
   into an X. The page you are on is shown in the muted tone. */
.overlay { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; overflow-y: auto; background: var(--page); color: var(--ink); font-size: 14px; opacity: 0; visibility: hidden; transition: opacity 280ms var(--ease), visibility 0s linear 280ms; }
.menu-open .overlay { opacity: 1; visibility: visible; transition: opacity 420ms var(--ease), visibility 0s; }
.menu-open { overflow: hidden; }
.overlay .bar { margin-top: var(--edge); }
.overlay .lines::before { transform: translateY(4px); }
.overlay .lines::after { transform: translateY(-4px); }
.menu-open .overlay .lines::before { transform: translateY(4px) rotate(35deg); }
.menu-open .overlay .lines::after { transform: translateY(-4px) rotate(-35deg); width: 100%; }
.overlay nav { flex: 1; display: flex; flex-direction: column; padding: clamp(32px, 9vh, 112px) var(--pad) 40px; }
.overlay li a { display: inline-block; padding-block: 4px; font-size: clamp(36px, 3.9vw, 56px); font-weight: 300; letter-spacing: -.02em; line-height: 1.2; text-decoration-color: transparent; }
.overlay li a:hover { text-decoration-color: currentColor; }
.overlay li a[aria-current="page"] { color: var(--muted); }
.overlay li, .overlay .links { opacity: 0; transform: translateY(16px); transition: opacity 240ms var(--ease), transform 240ms var(--ease); }
.menu-open .overlay li, .menu-open .overlay .links { opacity: 1; transform: none; transition: opacity 520ms var(--ease) calc(80ms + var(--i, 5) * 45ms), transform 520ms var(--ease) calc(80ms + var(--i, 5) * 45ms); }
.overlay .links { margin-top: auto; padding-top: 48px; }
.links { display: flex; flex-wrap: wrap; gap: 8px 32px; }

/* ---------------------------------------------------------------- First box: the hero, and each page's head */
.hero .box { margin-top: var(--edge); height: clamp(520px, 100svh - 2 * var(--edge), 1000px); }
.head .box { margin-top: var(--edge); height: clamp(380px, 54svh, 560px); }
.head + .part { margin-top: clamp(64px, 8vw, 120px); }   /* the first part follows the head closely */
.lead-in { position: absolute; z-index: 1; top: calc(var(--bar) + clamp(16px, 5vh, 64px)); left: var(--pad); right: var(--pad); color: #fff; }
.lead-in .act { margin-top: var(--inner); font-size: clamp(1.125rem, 1.45vw, 1.375rem); }
.lead-in .sub { max-width: 26em; margin-top: var(--inner); font-size: clamp(19px, 1.7vw, 24px); font-weight: 300; line-height: 1.35; color: var(--on-navy); }


/* The white card: the links page's signup, on navy. */
.card { position: relative; z-index: 2; border-radius: 6px; background: #fff; color: var(--ink); padding: var(--card); }

/* ---------------------------------------------------------------- Home: About */
/* A statement large on the left, its text on the right, both from the top edge. */
.who { display: grid; grid-template-columns: 7fr 5fr; gap: var(--block) var(--gap); align-items: start; }
.who > .say { max-width: 15em; }
.part.who > .say + * { margin-top: 0; }   /* side by side: no gap above the right column */
.answer { max-width: 28em; padding-top: .3em; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.45; color: var(--muted-ink); }
.answer strong { font-weight: 400; color: var(--ink); }

/* ---------------------------------------------------------------- The films and stills in the first box */
/* The first box of a page shows the films' world: the films themselves on the home page (the only video), a still
   from the films on the other pages (privacy and the links page stay plain navy). It fills the box under an even
   navy veil (not a gradient), so the white line and the header read over a bright sky.
   On the home page, at the bottom, one row: a line per film (see-through, the one playing filling white as it plays,
   as in stories), the pause and the white speaker at its end. With sound on, the film's lines show as captions. */
.has-media .film, .has-media .head-media, .head-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.has-media::after { content: ""; position: absolute; inset: 0; background: rgba(3, 27, 66, .38); pointer-events: none; }
.has-media .lead-in, .has-media .film-top { z-index: 2; }
.film-top { position: absolute; left: var(--pad); right: var(--pad); bottom: var(--pad); display: flex; align-items: center; gap: 16px; }
.film-list { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.film-pick { position: relative; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.film-pick i { position: absolute; left: 0; right: 0; top: 11px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.film-pick i::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(var(--played, 0)); }
.film-pick:hover i { background: rgba(255, 255, 255, .55); }
.film-pause, .film-sound { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; filter: drop-shadow(0 1px 3px rgba(3, 27, 66, .45)); transition: opacity 200ms var(--ease); }
.film-pause:hover, .film-sound:hover { opacity: .8; }
.film-pause svg, .film-sound svg { width: 26px; height: 26px; }
.film-pause svg { width: 24px; height: 24px; }
.film-sound .on, .film-sound[aria-pressed="true"] .off, .film-pause .on, .film-pause[aria-pressed="true"] .off { display: none; }
.film-sound[aria-pressed="true"] .on, .film-pause[aria-pressed="true"] .on { display: block; }
.film-top { gap: 8px; }
.film-list { margin-right: 8px; }
.has-media video::cue { background: transparent; color: #fff; font-family: "Public Sans", system-ui, sans-serif; font-size: clamp(18px, 1.8vw, 26px); text-shadow: 0 1px 4px rgba(3, 27, 66, .7); }
.ways { margin-bottom: var(--block); }

/* ---------------------------------------------------------------- Events */
.part-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 40px; margin-bottom: var(--block); }
/* Tiles: one big thing at the top (a date, a step's number, a fact), then the title and its line at the same height
   in every tile, and an action at the foot. Event tiles sit on ice; .plain tiles (steps, an event page's facts) stand
   on white, so ice keeps meaning "an event". */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.tiles.four { grid-template-columns: repeat(4, 1fr); }
.tile { display: flex; flex-direction: column; min-height: clamp(320px, 27vw, 400px); padding: clamp(24px, 2.6vw, 40px); border-radius: 6px; background: var(--ice); }
.tiles.four .tile { min-height: clamp(260px, 22vw, 340px); }
.tile .kind { margin-bottom: 12px; font-size: 15px; color: var(--muted-ink); }
.tile .big { font-size: clamp(40px, 4vw, 56px); font-weight: 300; letter-spacing: -.03em; line-height: 1.05; }
.tile h3 { margin-top: clamp(40px, 4vw, 64px); font-size: clamp(20px, 1.6vw, 24px); font-weight: 400; letter-spacing: -.01em; line-height: 1.25; text-wrap: balance; }
.tile .note { margin-top: var(--pair); font-size: 16px; color: var(--muted-ink); }
.tile .act { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: auto; padding-top: var(--inner); }
.tile .act a { position: relative; z-index: 1; }   /* above the title's link, which covers the tile */
.tiles.plain .tile { min-height: 0; padding: 0; border-radius: 0; background: none; }
.tiles.plain .tile h3 { margin-top: var(--inner); }
/* A tile for an event with its own page opens it: the title's link covers the tile. */
.tile { position: relative; transition: background-color 150ms var(--ease); }
.tile h3 a { color: inherit; text-decoration: none; }
.tile h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tile h3 a:focus-visible { outline: none; }
.tile:has(h3 a:hover) { background: #D7EDF2; }
.tile:has(h3 a:focus-visible) { outline: 2px solid var(--navy); outline-offset: 3px; }
/* An event page's main action and its calendar link, side by side. */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.actions .btn { white-space: normal; text-align: center; }   /* a long label wraps on the narrowest phones */

/* A statement on the left, a short list on the right (partners: the commitments). */
.pledges { display: grid; gap: clamp(28px, 3vw, 40px); }
.pledges h3 { font-size: clamp(20px, 1.6vw, 24px); font-weight: 400; letter-spacing: -.01em; line-height: 1.25; }
.pledges p { margin-top: var(--pair); max-width: 32em; color: var(--muted-ink); }

/* ---------------------------------------------------------------- The signup */
/* Where a page has the signup: one navy panel, because the newsletter is the main action. The call on the left, the
   form on the right: the study questions and the email white, the button inside the email field, the consent under. */
.signup-panel { display: grid; grid-template-columns: 1fr 1fr; gap: var(--block) var(--gap); align-items: start; padding: var(--card); border-radius: 6px; background: var(--navy); color: #fff; }
.signup-panel .say { max-width: 13em; }
.signup-panel .muted { color: var(--on-navy); }
.signup-panel .field-row { background: #fff; color: var(--ink); }
.signup-panel .field-row:focus-within { box-shadow: 0 0 0 3px rgba(255, 255, 255, .4); }
.signup-panel .study select { background-color: #fff; color: var(--ink); }
.signup-panel .study select:focus-visible { outline: 3px solid rgba(255, 255, 255, .4); }
.signup-panel .consent input:checked { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-7' fill='none' stroke='%23031B42' stroke-width='1.6'/%3E%3C/svg%3E") center / 85% no-repeat; }
.signup-panel .status[data-state="error"] { color: #FFC2C2; }

/* The signup (build.py writes the one form): the email and its button in one soft field, the optional study
   questions under it as two smaller fields, then the consent. Lines are for writing on; here the fields are filled. */
.signup { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; }
.field-row { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 18px; border-radius: 6px; background: var(--field); transition: box-shadow 150ms var(--ease); }
.field-row:focus-within { box-shadow: 0 0 0 2px var(--navy); }
.field-row input { flex: 1; width: 0; min-width: 0; padding: 10px 0; border: 0; background: transparent; color: inherit; font: inherit; font-size: 18px; }
.field-row input:focus { outline: none; }
.field-row input::placeholder { color: var(--muted-ink); opacity: 1; }
.consent { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; margin-top: 16px; font-size: 14px; line-height: 1.5; cursor: pointer; }
.consent input { appearance: none; -webkit-appearance: none; color: inherit; width: 16px; height: 16px; margin: 3px 0 0; border: 1px solid currentColor; border-radius: 0; background: transparent; cursor: pointer; transition: background-color 150ms var(--ease); }
.consent input:checked { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-7' fill='none' stroke='white' stroke-width='1.6'/%3E%3C/svg%3E") center / 85% no-repeat; }
.consent input:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.status { margin-top: 10px; font-size: 14px; }
.status:empty { display: none; }   /* no empty space under a form until there is something to say */
.status[data-state="error"] { color: #9b1c1c; }
.is-done .field-row, .is-done .study, .is-done .consent, .is-done .field, .is-done .send { opacity: .45; pointer-events: none; transition: opacity 360ms var(--ease); }

/* ---------------------------------------------------------------- Sub pages */
/* A part with its one statement on top, then its content. */
.part > .say { max-width: 22em; }
.part > .say + * { margin-top: var(--block); }

/* Four steps that read as one sentence across: the step large, its line small under it. */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--block) var(--gap); }
.steps.three { grid-template-columns: repeat(3, 1fr); }
.steps img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: contain; margin-bottom: var(--inner); }
.steps h3 { font-size: clamp(24px, 2.2vw, 32px); font-weight: 300; letter-spacing: -.015em; line-height: 1.2; text-wrap: balance; }
.steps p { margin-top: 12px; color: var(--muted-ink); text-wrap: balance; }   /* two or three lines of even length */
.steps .step { margin: 0 0 8px; font-size: 15px; }   /* the step's verb, which also names its figure */


/* A list of rows: the team and the partners' commitments. The name or title large on the left, the rest on the right,
   kept apart by space. */
.rows { display: grid; gap: clamp(40px, 4.4vw, 64px); }
.rows > li { display: grid; grid-template-columns: 5fr 7fr; gap: 12px var(--gap); }
.rows .say { font-size: clamp(26px, 2.6vw, 38px); }
.rows .meta { display: grid; gap: var(--pair); align-content: start; justify-items: start; }
.rows .reach { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 15px; }
.rows .open .say { color: var(--muted); }

/* About us: a still from the film between the statement and the team. */
.still { margin: 0; overflow: hidden; border-radius: 6px; }
.still img { display: block; width: 100%; height: auto; }
.still + * { margin-top: clamp(56px, 6vw, 96px); }

/* For partners: the ways in as rows (each with a mail that names its subject), the support line under the
   commitments, and the closing panel with the white button and the address. */
.reach-us { display: grid; gap: var(--inner); justify-items: start; }
.email { font-size: clamp(19px, 1.7vw, 24px); overflow-wrap: anywhere; }
.offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.offers li { display: flex; flex-direction: column; gap: var(--pair); padding-top: var(--inner); border-top: 1px solid var(--line); }
.offers h3 { font-size: clamp(24px, 2.4vw, 34px); font-weight: 300; letter-spacing: -.015em; line-height: 1.2; text-wrap: balance; }
.offers li { min-height: clamp(96px, 8vw, 128px); }
.offers .start h3 { font-size: clamp(20px, 1.6vw, 24px); font-weight: 400; }
/* How a challenge runs: four steps on a line that runs through their numbers. */
.journey { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); counter-reset: s; }
.journey::before { content: ""; position: absolute; left: 22px; right: 0; top: 22px; height: 1px; background: var(--line); }
.journey li { position: relative; display: grid; gap: var(--inner); align-content: start; }
.journey span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 17px; font-variant-numeric: tabular-nums; }
.journey h3 { max-width: 14em; font-size: clamp(20px, 1.6vw, 24px); font-weight: 300; letter-spacing: -.01em; line-height: 1.25; text-wrap: balance; }
/* Trust: the commitments in a navy field. */
.trust { padding: var(--card); }
.trust .pledges p { color: var(--on-navy); }
.trust .backing { color: var(--on-navy); }
.offers p { max-width: 24em; color: var(--muted-ink); }
.offers .start { padding: var(--card); border-top: 0; border-radius: 6px; background: var(--navy); color: #fff; }
.offers .start p { color: var(--on-navy); }
.offers .start p:last-child { margin-top: auto; padding-top: var(--inner); }
/* The example: a wide still from the film with the problem written on it, white over its lower edge. */
.example { position: relative; }
.example img { aspect-ratio: 16 / 7; object-fit: cover; }
.example figcaption { position: absolute; left: var(--pad); right: var(--pad); bottom: var(--pad); max-width: 18em; color: #fff; font-size: clamp(24px, 2.6vw, 38px); font-weight: 300; letter-spacing: -.02em; line-height: 1.15; text-shadow: 0 1px 12px rgba(3, 27, 66, .55); }
.example figcaption span { display: block; }
.backing { grid-column: 2; }
.backed { margin-top: var(--block); }
.offers.four { grid-template-columns: repeat(4, 1fr); }
.contact-panel { align-items: end; }
.contact-panel .email a { color: #fff; }
.btn.light { background: #fff; color: var(--navy); }
.btn.light:hover { background: var(--ice); }
.btn.light:focus-visible { outline-color: #fff; }

/* The application: filled fields, as in the signup. */
.apply-card { display: grid; grid-template-columns: 5fr 7fr; gap: var(--block) var(--gap); align-items: start; }
.apply-card .intro { display: grid; gap: var(--inner); align-content: start; }
.apply { display: grid; gap: var(--inner); }
.field { display: grid; gap: 6px; }
.field input, .field textarea { width: 100%; padding: 12px 16px; border: 0; border-radius: 6px; background: var(--field); color: inherit; font: inherit; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); resize: vertical; transition: box-shadow 200ms var(--ease); }
.field input:focus, .field textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--navy); }
.hint { font-size: 14px; color: var(--muted-ink); }
.apply .consent { margin-top: 0; }

/* Privacy: one term to a row. */
.terms div { display: grid; grid-template-columns: 4fr 8fr; gap: var(--pair) var(--gap); padding-block: var(--inner); }
.terms dd { max-width: 40em; }
.updated { margin-top: var(--inner); }

/* ---------------------------------------------------------------- Footer */
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px; margin-top: clamp(64px, 8vw, 120px); padding: 32px 0 48px; border-top: 1px solid var(--line); font-size: 14px; }
.foot ul { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.foot p { display: flex; align-items: center; gap: 12px; }
.foot svg { flex: none; width: 26px; height: 26px; }

/* ---------------------------------------------------------------- Smaller screens */
@media (max-width: 1000px) {
  .steps { grid-template-columns: 1fr 1fr; }
  .signup-panel, .tiles { grid-template-columns: 1fr; }
  .tiles.four { grid-template-columns: 1fr 1fr; }
  .tile, .tiles.four .tile { min-height: 0; }
  .tile h3 { margin-top: var(--inner); }
  .rows > li, .terms div, .apply-card, .who { grid-template-columns: 1fr; }
  .backing { grid-column: auto; }
  .offers, .offers.four { grid-template-columns: 1fr 1fr; }
  .journey { grid-template-columns: 1fr 1fr; row-gap: var(--block); }
  .journey::before { display: none; }
}
@media (max-width: 760px) {
  body { font-size: 17px; }
  br.wide { display: none; }
  .lead-in .top { font-size: min(34px, 9vw); }
  .steps, .steps.three, .tiles.four, .offers, .offers.four, .journey { grid-template-columns: 1fr; }
  .offers li { min-height: 0; }
  .example img { aspect-ratio: 4 / 5; }
  .bar > :last-child { font-size: 13px; }
}

/* Scroll reveals: hidden only when scripts run, and never under reduced motion. */
html.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 800ms var(--ease) var(--d, 0ms), transform 800ms var(--ease) var(--d, 0ms); }
html.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; transition-delay: 0ms !important; }
  html.js [data-reveal] { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- Links (the flyer's QR page) */
/* Made for a phone held after scanning: navy like the hero, the newsletter first in the one white card, then one
   large row per link, each easy to hit with a thumb. The calm ribbon moves behind, at the bottom. */
body.bare { min-height: 100svh; background: var(--navy); color: #fff; }
.links-page { position: relative; display: grid; gap: 20px; align-content: start; width: min(100% - 32px, 460px); min-height: 100svh; margin-inline: auto; padding: 32px 0 160px; }
.links-page > canvas { position: fixed !important; inset: auto 0 0 0 !important; width: 100% !important; height: 42svh !important; z-index: 0; pointer-events: none; }
.links-page > :not(canvas) { position: relative; z-index: 1; }
.links-head { display: grid; gap: 20px; justify-items: start; padding: 8px 4px 4px; }
.links-title { font-size: 26px; font-weight: 300; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.links-card { display: grid; gap: 4px; padding: 24px; }
.links-card .signup { margin-top: 12px; }
.links-side { display: grid; gap: 20px; }
/* The study questions: two filled fields side by side, above the email. */
.study { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.study select { width: 100%; min-width: 0; height: 56px; padding: 0 36px 0 18px; border: 0; border-radius: 6px; background: var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23102C38' stroke-width='1.2'/%3E%3C/svg%3E") right 16px center / 10px no-repeat; color: inherit; font: inherit; font-size: 17px; appearance: none; -webkit-appearance: none; cursor: pointer; }
.study select:invalid, .study select:has(option[value=""]:checked) { color: var(--muted-ink); }
.study select:focus-visible { outline: 2px solid var(--navy); outline-offset: 0; }
.links-name { display: none; }

/* On a computer: the name and the line large on the left, the card and the links on the right, both centred in the
   screen, and the ribbon across the whole screen behind them, as in the hero. */
@media (min-width: 900px) {
  .links-page { width: min(100% - 2 * var(--pad), 1180px); grid-template-columns: 1fr 440px; gap: 48px clamp(48px, 7vw, 120px); align-content: center; align-items: center; padding: 56px 0; }
  .links-page > canvas { height: 100svh !important; }
  .links-head { gap: 28px; align-self: center; padding: 0; }
  .links-title { font-size: clamp(40px, 4.2vw - 10px, 60px); line-height: 1.1; max-width: 12em; }
  .links-name { display: block; color: var(--on-navy); font-size: 18px; }
  .links-side { gap: 12px; }
}
.link-list { display: grid; gap: 10px; }
.link-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px 20px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 6px; background: rgba(3, 27, 66, .9); text-decoration: none; font-size: 17px; line-height: 1.3; transition: background-color 150ms var(--ease), border-color 150ms var(--ease); }
.link-row::after { content: ""; flex: none; width: .5rem; height: .5rem; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.link-row:hover { background: #0b2752; border-color: rgba(255, 255, 255, .5); }
.link-row:active { transform: scale(.99); }
.link-row small { display: block; margin-top: 2px; font-size: 14px; color: var(--on-navy); }