/* ============================================================
   2AM
   styles.css: the whole site. One file, no build step.

   Source of truth: the Paper file "Master File", page "Site".
   Desktop is drawn at 1440 and mobile at 390. The rules below
   are written desktop first, then step down twice:
     tablet   768 to 1199   the desktop layouts, fluid sizes
     mobile   up to 767     the mobile artboards
   Values are the Paper values. Where a size scales between
   breakpoints, it is a clamp() that lands on the Paper value
   at 1440.
   ============================================================ */

@font-face {
  font-family: "Suisse BP Intl";
  src: url("/assets/fonts/suisse-bp-intl-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* The seven values from the guidelines artboard. */
  --ground: #FFFFFF;
  --card: #E0E0E0;
  --hairline: #D4D4D4;
  --well: #BFBFBF;
  --muted: #575757;
  --chrome: #323232;
  --ink: #000000;

  --card-0: rgba(224, 224, 224, 0); /* the card colour at zero, for fades */

  --sans: "Suisse BP Intl", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --script: "Imperial Script", Georgia, serif;

  --page: 1312px;
  --margin: 64px;
  --nav-h: 90px;
}

@media (max-width: 1199px) {
  :root { --margin: 40px; }
}

@media (max-width: 767px) {
  :root { --margin: 20px; --nav-h: 69px; }
}

/* ── base ─────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--nav-h);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: anywhere;
  overflow-x: clip; /* seals hang off card corners; never a sideways scroll */
}

body.is-locked { overflow: hidden; }

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
h1, h2, h3 { font-weight: 400; }
ul, ol { list-style: none; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.on-dark :focus-visible { outline-color: var(--ground); }

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  padding: 11px 16px;
  background: var(--ink);
  color: var(--ground);
  border-radius: 2px;
}
.skip:focus { top: 16px; }

.wrap {
  width: 100%;
  max-width: calc(var(--page) + 2 * var(--margin));
  margin-inline: auto;
  padding-inline: var(--margin);
}

/* Shown on one side of the mobile breakpoint only. */
.m-only { display: none; }
br.br-m { display: none; }
.nowrap-d { white-space: nowrap; }

/* ── type ─────────────────────────────────────────────────── */

/* Labels are set in capitals. The name is always 2AM.
   Handles (@2am.brands) stay lower case: wrap them in .nm. */
.label {
  font-size: 11px;
  line-height: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.nm { text-transform: none; }

.h2 {
  font-size: clamp(36px, 3.889vw, 56px);
  line-height: .965;
  letter-spacing: -.04em;
}

.muted { color: var(--muted); }

/* The wordmark: 2AM in Georgia Regular outlines with the rebuilt lining 2,
   black on white (2026-10-19). It is an SVG, never live type.
   font-size still sets the scale: 41px gives a 24px-tall logo, 31px gives 18px. The text
   span stays for the accessible name and is hidden. */
.wm {
  display: block;
  flex-shrink: 0;
  font-size: 41px; /* 24px tall */
  height: .5833em;
  width: calc(.5833em * 4232 / 1450);
  background: var(--ground) url(/assets/img/2am-wordmark.svg) no-repeat center / contain;
}
.wm__t { display: none; }
.wm-link { display: block; flex-shrink: 0; }

/* ── the highlight ───────────────────────────────────────────
   One Georgia phrase on a solid block, like a highlighter pen.
   One per header, one hero phrase and one dek phrase per page.
   Never a number inside.

   Geometry, in em of the highlight's own size (Paper, Brand
   Guidelines, "01 · Highlight", 2026-10-18):
     - the block top sits .78em above the baseline, just over the
       tallest letter, so every letter reads in full
     - it is .92em tall, so it runs .14em below the baseline and
       only the tips of the descenders are cut
     - it starts .05em before the first letter
     - it stops just inside the last letter, at line end or mid-line.
       A full stop at the end stays inside the block.
   The block is a window over the text. Its font size is --fs, set
   on the heading that holds it (default: the size of the text
   around it). Set it about 1.05 times the size of the text around.

   Two placements, and nothing else:
     - Inside a line (.bleed alone): the letters share the line's
       baseline. Set --L, the height of that line in em of the
       highlight's own size. Leave a word space each side in the HTML.
     - On a line of its own (.bleed inside .bleed-line, see below):
       spaced by the rule there, flush with the text column. */

.bleed {
  --L: 1em;
  --h: .92em;
  --off: calc(var(--L) / 2 - .431em);
  --mt: var(--off);
  --mb: calc(var(--L) - var(--off) - var(--h) + .06em); /* clears the next line's ascenders */
  --cl: -.05em;
  --cr: 0px;
  --pr: 0px;
  --ml: var(--cl);
  --mr: var(--cr);

  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  height: var(--h);
  margin: var(--mt) var(--mr) var(--mb) var(--ml);
  padding: 0 var(--pr) 0 0;
  background: var(--ink);
  color: var(--ground);
  font-family: var(--serif);
  font-size: var(--fs, 1em);
  letter-spacing: -.05em;
  white-space: nowrap;
}
.bleed__t {
  display: block;
  margin: calc(var(--off) * -1) calc(var(--cr) * -1) 0 calc(var(--cl) * -1);
  line-height: var(--L);
}

/* Kept so old markup still works: a phrase that ends the line now
   stops just inside its last letter, like every other phrase. */
.bleed--tail { --cr: 0px; --mr: 0px; --pr: 0px; }

/* ── a highlight on a line of its own ─────────────────────────
   The block stands in for the capitals of that line. It starts at
   the cap height of the text around it, and the line keeps that
   text's rhythm, so the gap above the block and the gap below it
   both equal the gap between two lines of text (line height minus
   cap height), at every size.

   .bleed-line takes the font and line height of the text around
   it, so the browser places the baseline. The block hangs from the
   cap height; --drop is how far it runs below the baseline, and the
   line opens by exactly that. The block sits flush with the text
   column. Holds one .bleed and nothing else in the line (a
   seal is fine: it is out of the flow).
   .bleed-line--m does this on mobile only and sits inline above. */

@property --drop {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

.bleed-line { display: block; width: max-content; margin-bottom: var(--drop); --drop: calc(var(--fs, 1em) * .92 - 1cap); }
.bleed-line > .bleed { vertical-align: baseline; --mt: 0px; --mb: calc(var(--drop) * -1); --ml: 0px; --cr: 0px; --mr: 0px; --pr: 0px; }

/* Seals and badges: stamped, tilted, decorative. */
.seal-anchor { position: relative; }
.seal {
  position: absolute;
  z-index: 2;
  max-width: none;
  object-fit: contain;
  transform-origin: 0 0;
  pointer-events: none;
}

/* ── buttons ──────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-size: 18px;
  line-height: 20px;
  letter-spacing: -.02em;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--ink { background: var(--ink); color: var(--ground); }
.btn--ink:hover { background: var(--chrome); }
.btn--ground { background: var(--ground); color: var(--ink); }
.btn--ground:hover { background: var(--card); }
.btn--line { border-color: rgba(8, 8, 7, .25); color: var(--ink); }
.btn--line:hover { border-color: var(--ink); }
.btn--line-light { border-color: rgba(255, 255, 255, .5); color: var(--ground); }
.btn--line-light:hover { border-color: var(--ground); }

.btn--nav { padding: 8px 15px; font-size: 16px; line-height: 18px; }

/* Optical centring (2026-10-19): Suisse caps sit .082em above the
   centre of the line box, so every button, pill and chip keeps even
   padding and drops its label .082em. Wrap the label in .btn__t. */
.btn__t { display: inline-block; translate: 0 .082em; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── nav: the sticky CTA bar ──────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ground);
}
.nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 20px;
}
.nav__brand, .nav__end { display: flex; flex: 1 1 0; align-items: center; }
.nav__end { justify-content: flex-end; gap: 8px; }

.switch {
  display: flex;
  flex-shrink: 0;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--hairline);
  border-radius: 2px;
}
.switch__link {
  padding: 9px 16px;
  border-radius: 1px;
  color: var(--chrome);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -.01em;
  transition: background-color .15s ease, color .15s ease;
}
.switch__link:hover { color: var(--ink); background: var(--card); }
.switch__link.is-active { background: var(--ink); color: var(--ground); }

.nav__menu-btn { display: none; }

/* ── the mobile menu ──────────────────────────────────────── */

.menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--ground);
}
.menu[hidden] { display: none; }

.menu__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--hairline);
}
.menu__bar .wm { font-size: 31px; }
.menu__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 2px;
  background: var(--ink);
}

.menu__products { display: flex; flex-direction: column; padding: 8px 20px 0; }
.menu__product {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 22px 0 18px;
  border-bottom: 1px solid var(--hairline);
}
.menu__product-text { display: flex; flex-direction: column; gap: 8px; }
.menu__product .label { line-height: 14px; }
.menu__product-name { font-size: 44px; line-height: 42px; letter-spacing: -.05em; }
/* A status dot: green, a soft ring, and the ring pulses (2026-10-19). */
.menu__dot {
  position: relative;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 0 3px #22C55E40;
}
.menu__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #22C55E40;
}
@media (prefers-reduced-motion: no-preference) {
  .menu__dot::after { animation: dot-pulse 2s ease-out infinite; }
}
@keyframes dot-pulse {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(3); opacity: 0; }
}

.menu__section { display: flex; flex-direction: column; gap: 4px; padding: 28px 20px 0; }
.menu__section .label { padding-bottom: 6px; line-height: 14px; }
.menu__section a { font-size: 20px; line-height: 44px; letter-spacing: -.02em; }

.menu__bottom { display: flex; flex-direction: column; gap: 16px; padding: 24px 20px 28px; }
.menu__bottom .btn { width: 100%; padding-block: 16px; font-size: 17px; line-height: 20px; }
.menu__meta { display: flex; justify-content: space-between; }
.menu__meta .label { line-height: 14px; }

@media (min-width: 768px) {
  .menu { display: none !important; }
}

/* ── section heads ────────────────────────────────────────── */

.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
.sec-head__main { display: flex; flex: 0 1 900px; flex-direction: column; gap: 20px; }
.sec-head__aside { flex: 0 0 320px; color: var(--muted); }

/* ── cards ────────────────────────────────────────────────── */

.card {
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: var(--card);
}
.card__art { width: 100%; height: auto; }
.card__body { display: flex; flex-direction: column; gap: 10px; padding: 28px 32px 32px; }
.card__num { font-size: 11px; line-height: 12px; letter-spacing: .05em; color: var(--muted); }
.card__title { font-size: 32px; line-height: 32px; letter-spacing: -.03em; }
.card__text { color: var(--muted); }

/* ── advisory hero ────────────────────────────────────────── */

.hero-adv { padding-top: 0; }
.hero-adv__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: clamp(560px, 50vw, 720px);
  border-radius: 2px;
  background: var(--ink);
  color: var(--ground);
}
.hero-adv__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.hero-adv__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .42) 50%, rgba(0, 0, 0, .08) 100%);
}
.hero-adv__content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: 48px 56px;
}
.hero-adv .label { color: var(--ground); }
.hero-adv__group { display: flex; flex-direction: column; gap: 32px; }
/* The button with the launch status beside it (see launch states below). */
.hero-adv__btns { align-items: center; gap: 24px; }
.hero-adv__title {
  font-size: clamp(48px, 5.833vw, 84px);
  line-height: .952;
  letter-spacing: -.04em;
}
.bleed--hero { background: var(--ground); color: var(--ink); }
/* The seal sits just right of the hero's "brands." block, like a
   sticker slapped beside it. */
.seal--hero {
  --block-top: calc(.5lh + .25em - 1cap);
  left: calc(100% + 16px);
  top: calc(var(--block-top) - 8px);
  width: 132px;
  height: 90px;
  transform: rotate(12deg);
}
.hero-adv__foot { display: flex; align-items: center; gap: 32px; }
.hero-adv__note { width: 360px; }

/* ── the serif dek ────────────────────────────────────────── */

.dek-sec { padding: 56px 0 64px; }
.dek-sec--tight { padding-bottom: 24px; }
.dek-sec__row { display: flex; align-items: flex-end; gap: 32px; }
@media (min-width: 768px) {
  .dek-sec--tight .dek-sec__row { align-items: flex-start; }
  .dek-sec--tight .side-note { padding-top: 12px; }
}

.side-note { display: flex; flex: 0 0 221px; flex-direction: column; gap: 10px; }
.side-note__title { font-size: 14px; line-height: 15px; }
.side-note__body { color: var(--muted); font-size: 13px; line-height: 18px; }

.dek {
  display: flex;
  flex: 1 1 auto;
  align-items: baseline;
  font-family: var(--serif);
  font-size: clamp(28px, 3.056vw, 44px);
  line-height: .955;
  letter-spacing: -.05em;
}
.dek__cap {
  flex-shrink: 0;
  padding-right: 4px;
  font-family: var(--script);
  font-size: 1.636em;
  line-height: .583;
  letter-spacing: 0;
}
.dek__body { max-width: 20.5em; }

/* An inline phrase in the dek. The spacing to the words either
   side matches the 4px gap in the design. */
.bleed--dek { --L: .955em; }

/* ── proof strip ──────────────────────────────────────────── */

.proof-strip { padding: 24px 0 64px; }
.proof { display: flex; flex-direction: column; gap: 28px; }
.proof__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.stats { display: flex; gap: 40px; }
.stat { display: flex; align-items: baseline; gap: 10px; }
.stat__num { font-size: 32px; line-height: 30px; letter-spacing: -.04em; }

.logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 96px;
  border-block: 1px solid var(--hairline);
}
.logos li { display: flex; align-items: center; justify-content: center; }
.logos img { width: var(--w); height: var(--h); object-fit: contain; opacity: .85; }

/* ── sections ─────────────────────────────────────────────── */

.sec { padding-bottom: 120px; }
.sec--top { padding-top: 56px; }
.sec__stack { display: flex; flex-direction: column; gap: 48px; }

/* The loop: four cards, two by two. */
.loop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

/* The work: five staggered columns on desktop, a swipe row on
   mobile. */
.work-wall { display: grid; grid-template-columns: repeat(5, minmax(0, 248px)); gap: 16px; align-items: start; }
.work-item { display: flex; flex-direction: column; gap: 10px; }
.work-item img { width: 100%; height: auto; aspect-ratio: 248 / 440; object-fit: cover; border-radius: 2px; }
.work-item__num { color: var(--muted); font-size: 11px; line-height: 12px; }
.work-item:nth-child(2) { padding-top: 64px; }
.work-item:nth-child(3) { padding-top: 24px; }
.work-item:nth-child(4) { padding-top: 96px; }
.work-item:nth-child(5) { padding-top: 40px; }

.dashes { display: none; }

/* ── who ──────────────────────────────────────────────────── */

.who { display: flex; flex-direction: column; gap: 16px; }

.founder { display: flex; }
.founder__photo { flex: 0 0 min(480px, 37%); width: min(480px, 37%); height: auto; aspect-ratio: 1; object-fit: cover; }
.founder__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 48px 56px;
}
.founder__intro { display: flex; flex-direction: column; gap: 20px; }
.founder__text {
  max-width: 600px;
  color: var(--chrome);
  font-size: clamp(17px, 1.667vw, 24px);
  line-height: 1.25;
  letter-spacing: -.03em;
}
.meta { display: flex; flex-wrap: wrap; gap: 12px 40px; }
.meta div { display: flex; flex-direction: column; gap: 6px; }
.seal--founder { left: calc(100% - 114px); top: -44px; width: 140px; height: 148px; transform: rotate(-10deg); }

.team { display: grid; gap: 16px; }
.team--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.team--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.team-card { display: flex; height: 170px; }
.team-card__well {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 168px;
  height: 100%;
  background: var(--well) radial-gradient(ellipse 70% 70% at 50% 35%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 70%);
  color: var(--muted);
  font-size: 40px;
  line-height: 40px;
  letter-spacing: -.04em;
}
.team-card__body { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 24px; }
.team-card__name { font-size: 26px; line-height: 26px; letter-spacing: -.03em; }
.team--2 .team-card { height: 200px; }
.team--2 .team-card__well { width: 198px; font-size: 44px; line-height: 44px; }
.team--2 .team-card__body { padding: 28px; }
.team--2 .team-card__name { font-size: 32px; line-height: 32px; }

/* ── faq ──────────────────────────────────────────────────── */

.faq { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; }
.faq__head { display: flex; flex: 0 0 420px; flex-direction: column; gap: 20px; }
.faq__lede { max-width: 320px; color: var(--muted); }
.faq__list { flex: 0 1 836px; }

.faq-item { border-top: 1px solid var(--hairline); padding-block: 28px; }
.faq-item:last-child { border-bottom: 1px solid var(--hairline); }
.faq-item summary {
  display: flex;
  gap: 24px;
  list-style: none;
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item__num { flex: 0 0 40px; color: var(--muted); font-size: 13px; line-height: 26px; }
.faq-item__q { flex: 1 1 auto; font-size: 24px; line-height: 26px; letter-spacing: -.02em; }
.faq-item__sign {
  flex: 0 0 20px;
  color: var(--muted);
  font-size: 22px;
  line-height: 26px;
  text-align: right;
}

/* The open and close sign on every accordion (FAQs and modules):
   both glyphs are text in the HTML, as in Paper, and the open state
   swaps them. */
.sign-minus,
details[open] > summary .sign-plus { display: none; }
details[open] > summary .sign-minus { display: inline; }
.faq-item__a { max-width: 664px; padding: 12px 0 0 64px; color: var(--muted); }

/* ── brief us ─────────────────────────────────────────────── */

.brief__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  overflow: hidden;
  min-height: 460px;
  padding: 56px;
  border-radius: 2px;
  background: var(--chrome);
  color: var(--ground);
}
.brief__panel .label { color: var(--well); }
.brief__main { position: relative; z-index: 3; display: flex; flex-direction: column; gap: 32px; }
.brief__title { max-width: 760px; font-size: clamp(40px, 6.111vw, 88px); line-height: .932; letter-spacing: -.04em; }
.brief__row { display: flex; align-items: center; gap: 32px; }
.brief__note { max-width: 380px; color: var(--ground); }
.seal--brief { left: 69.3%; top: -64px; width: 430px; height: 430px; transform: rotate(-12deg); }

/* ── footer ───────────────────────────────────────────────── */

/* Two columns (2026-10-21): the links on the left, the logo over the
   legal line on the right, both right-aligned. No Instagram icon. */
.footer { border-top: 1px solid var(--hairline); padding: 40px 0 36px; }
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "links logo" "links legal";
  gap: 32px;
  align-items: start;
}
.footer__links a {
  font-size: 14px;
  line-height: 20px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.footer__links a:hover { color: var(--muted); }
.footer__logo { grid-area: logo; justify-self: end; }
.footer__links { grid-area: links; display: flex; flex-direction: column; gap: 6px; }
.footer__legal {
  grid-area: legal;
  align-self: end;
  color: var(--muted);
  font-size: 11px;
  line-height: 18px;
  letter-spacing: .05em;
  text-align: right;
  text-transform: uppercase;
}

/* ── the Suisse highlight (2026-10-19) ───────────────────────
   Every new highlight on the site. Suisse at the size and tracking
   of its line, on a solid block .85em tall: from .07em above the cap
   height to .12em below the baseline, starting .06em before the first
   letter and stopping .05em after the last.

   The block is the ::before, in the same grid cell as the text. Grid
   baseline alignment puts its bottom edge on the text's baseline, so
   no font metrics enter the maths. The block box itself is one cap
   tall, so the line keeps its height; two shadows extend it .07em up
   and .12em down. Markup: <span class="hl hl--light"><span
   class="hl__t">phrase</span></span>. The old Georgia .bleed above
   still serves the Advisory dek. */
.hl { display: inline-grid; white-space: nowrap; vertical-align: baseline; }
.hl::before, .hl__t { grid-area: 1 / 1; align-self: baseline; }
.hl::before {
  content: "";
  height: 1cap;
  background: var(--hl-bg);
  box-shadow: 0 -.07em 0 var(--hl-bg), 0 .12em 0 var(--hl-bg);
}
.hl__t { padding: 0 .05em 0 .06em; color: var(--hl-fg); }
.hl--light { --hl-bg: var(--ground); --hl-fg: var(--ink); }
.hl--dark { --hl-bg: var(--ink); --hl-fg: var(--card); }

/* ── home: one viewport-high hero ─────────────────────────── */

.hero-home { padding-bottom: 24px; }
/* The same height as the Advisory hero. */
.hero-home__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: clamp(560px, 50vw, 720px);
  border-radius: 2px;
  background: var(--ink);
  color: var(--ground);
}
.hero-home__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.hero-home__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .42) 50%, rgba(0, 0, 0, .08) 100%);
}
.hero-home__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 48px 56px;
}
.hero-home .label { color: var(--ground); }
.hero-home__group { display: flex; flex-direction: column; gap: 32px; }
.hero-home__title {
  font-size: clamp(48px, 5.833vw, 84px);
  line-height: .952;
  letter-spacing: -.04em;
}
.hero-home__title .line { display: block; }

/* ── capital ──────────────────────────────────────────────── */

.hero-cap { padding-top: 0; } /* same gap under the nav as Home and Advisory */
.hero-cap__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  height: clamp(560px, 47.222vw, 680px);
}
.hero-cap__copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 48px;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: var(--card);
}
.hero-cap__group { display: flex; flex-direction: column; gap: 32px; }
.hero-cap__title {
  font-size: clamp(44px, 4.722vw, 68px);
  line-height: .971;
  letter-spacing: -.04em;
}
.hero-cap__text { max-width: 460px; color: var(--chrome); font-size: 16px; line-height: 22px; }
.hero-cap__media { overflow: hidden; border-radius: 2px; background: var(--card); }
.hero-cap__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

.look-sec { padding-block: 120px; }
.crit-list { flex: 0 1 836px; }
.crit { display: flex; gap: 24px; padding-block: 28px; border-top: 1px solid var(--hairline); }
.crit__num { flex: 0 0 40px; color: var(--muted); font-size: 13px; line-height: 26px; }
.crit__body { display: flex; flex-direction: column; gap: 12px; }
.crit__title { font-size: 24px; line-height: 26px; letter-spacing: -.02em; }
.crit__text { max-width: 600px; color: var(--muted); }

/* ── members club hero ────────────────────────────────────── */

.hero-mc { padding-top: 24px; }
.hero-mc__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  min-height: clamp(560px, 47.22vw, 680px);
}
.hero-mc__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 48px;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: var(--card);
}
.hero-mc__group { display: flex; flex-direction: column; gap: 32px; }
.hero-mc__title {
  --fs: clamp(44px, 5vw, 72px);
  font-size: clamp(40px, 4.722vw, 68px);
  line-height: .971;
  letter-spacing: -.04em;
}
.bleed--mc-hero { color: var(--card); }
.hero-mc__text { max-width: 460px; color: var(--chrome); font-size: 16px; line-height: 22px; }
.seal--pill { left: calc(100% - 152px); top: 32px; width: 230px; height: 88px; transform: rotate(12deg); }

.hero-mc__video {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: 32px;
  border-radius: 2px;
  background: var(--card);
  color: var(--ground);
}
.hero-mc__still {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 50%;
}
.hero-mc__video::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(8, 8, 7, 0) 50%, rgba(8, 8, 7, .85) 100%);
}
.play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--ground);
  transform: translate(-50%, -50%);
  transition: transform .2s ease;
}
.play svg { width: 22px; height: 26px; margin-left: 4px; }
.hero-mc__video:hover .play { transform: translate(-50%, -50%) scale(1.04); }
.hero-mc__caption { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.hero-mc__caption-main { display: flex; flex-direction: column; gap: 8px; }
.hero-mc__caption .label { color: var(--ground); }
.hero-mc__caption-title { font-size: 28px; line-height: 30px; letter-spacing: -.03em; }

/* ── members club sections ────────────────────────────────── */

.take-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.take-grid .card__body { padding: 28px 28px 32px; }
.take-grid .card__title { font-size: 28px; line-height: 30px; }

.inside-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.inside-card { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 380px; }
.inside-card__text { display: flex; flex-direction: column; gap: 8px; padding: 28px 28px 0; }
.inside-card__title { font-size: 22px; line-height: 24px; letter-spacing: -.02em; }
.inside-card__art { position: relative; }
.inside-card__art img { width: 100%; height: auto; }
.inside-card__art::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: var(--fade, 35%);
  background: linear-gradient(180deg, var(--card-0) 0%, var(--card) 100%);
}
.inside-card--workshop { --fade: 37.5%; }
.inside-card--recordings { --fade: 32%; }
.inside-card--thumbnail .inside-card__art::after { content: none; }
.inside-card--room { --fade: 28%; }
.inside-card--platform .inside-card__art::after {
  inset: 0;
  height: auto;
  background:
    linear-gradient(90deg, var(--card) 0%, var(--card-0) 18%, var(--card-0) 82%, var(--card) 100%),
    linear-gradient(180deg, var(--card-0) 60%, var(--card) 100%);
}

.program { display: flex; align-items: flex-start; gap: 56px; }
.program__intro { display: flex; flex: 0 0 420px; flex-direction: column; gap: 24px; }
.program__text { max-width: 360px; color: var(--muted); }
.program__player { width: 100%; height: auto; }

.modules { display: flex; flex: 1 1 836px; flex-direction: column; gap: 12px; }
.module {
  padding: 24px 28px;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: var(--card);
}
.module__row { display: flex; align-items: center; gap: 24px; list-style: none; cursor: pointer; }
.module__row::-webkit-details-marker { display: none; }
.module__num { flex: 0 0 40px; color: var(--muted); font-size: 13px; line-height: 14px; }
.module__title { flex: 1 1 auto; font-size: 24px; line-height: 26px; letter-spacing: -.02em; }
.module__count { flex: 0 0 150px; text-align: right; }
.module__sign { flex: 0 0 20px; color: var(--muted); font-size: 22px; line-height: 22px; text-align: right; }
.module[open] { padding-bottom: 28px; border-color: var(--muted); }
.module[open] .module__sign { color: var(--ink); }
.module .lessons, .module__note { margin-top: 24px; }
.module__note { padding-left: 64px; color: var(--muted); }
.module--soon, .module--soon[open] { border: 1px dashed var(--well); background: transparent; }
.module--soon .module__title { color: var(--muted); }
.lessons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 340px));
  column-gap: 24px;
  padding-left: 64px;
  border-top: 1px solid var(--hairline);
}
.lessons li { padding-block: 12px; border-bottom: 1px solid var(--hairline); color: var(--chrome); }
/* No rule under the last row of the two columns. */
.lessons li:last-child,
.lessons li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }

.proof-sec .sec-head { margin-bottom: 0; }
.proof-sec__title { --fs: clamp(40px, 3.889vw, 56px); max-width: 900px; font-size: clamp(36px, 3.611vw, 52px); line-height: 1.038; letter-spacing: -.04em; }
.bleed--proof { --L: .964em; }

.beliefs {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding: 56px;
  border-radius: 2px;
  background: var(--chrome);
  color: var(--ground);
}
.beliefs .label { color: var(--well); }
.beliefs__head { display: flex; flex-direction: column; gap: 20px; }
.beliefs__title { max-width: 760px; }
.beliefs__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.belief { display: flex; flex-direction: column; gap: 14px; padding-top: 20px; border-top: 1px solid var(--muted); }
.belief__num { color: var(--well); font-size: 11px; line-height: 12px; letter-spacing: .05em; }
.belief__title { font-size: 24px; line-height: 28px; letter-spacing: -.03em; }
.belief__text { color: var(--well); }
.seal--beliefs { left: calc(100% - 126px); top: -40px; width: 124px; height: 131px; transform: rotate(9deg); }

.pricing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.price-intro, .price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  min-height: 460px;
  padding: 48px;
  border: 1px solid var(--hairline);
  border-radius: 2px;
}
.price-card { background: var(--card); }
.price-intro__group, .price-card__group { display: flex; flex-direction: column; gap: 20px; }
.price-intro__title { font-size: clamp(44px, 5vw, 72px); line-height: .944; letter-spacing: -.04em; }
.price-intro__text { max-width: 420px; color: var(--muted); }
.price-card__top { display: flex; justify-content: space-between; }
.price { display: flex; align-items: baseline; gap: 12px; }
.price__num { font-size: clamp(96px, 9.722vw, 140px); line-height: .829; letter-spacing: -.05em; }
.price__per { color: var(--muted); font-size: 26px; line-height: 30px; letter-spacing: -.03em; }
.price-card .btn { width: 100%; padding: 17px 22px; font-size: 20px; line-height: 22px; }
.seal--price { left: calc(100% - 136px); top: -54px; width: 170px; height: 188px; transform: rotate(12deg); }

/* ================================================================
   tablet, 768 to 1199
   ================================================================ */

@media (max-width: 1199px) {
  .sec { padding-bottom: 96px; }
  .sec-head__aside { flex-basis: 280px; }

  .hero-adv__content { padding: 40px; }
  .hero-adv__note { width: auto; max-width: 300px; }

  .hero-home__content { padding: 40px; }
  .hero-cap__copy { padding: 40px; }
  .look-sec { padding-block: 96px; }
  .crit-list { flex-basis: auto; width: 100%; }

  .side-note { flex-basis: 180px; }

  .logos { flex-wrap: wrap; justify-content: space-around; height: auto; padding-block: 24px; row-gap: 24px; }

  .founder__body { padding: 32px 36px; }

  .team-card__well { width: 120px; }
  .team--2 .team-card__well { width: 160px; }
  .team-card__name { font-size: 22px; line-height: 24px; }
  .team--2 .team-card__name { font-size: 26px; line-height: 28px; }

  .faq { flex-direction: column; gap: 32px; }
  .faq__head { flex-basis: auto; }
  .faq__list { flex-basis: auto; width: 100%; }

  .brief__panel { padding: 40px; }
  .seal--brief { width: 340px; height: 340px; }

  .seal--founder { left: calc(100% - 130px); }

  .hero-mc__copy { padding: 36px; }
  .seal--pill { left: calc(100% - 132px); width: 190px; height: 73px; }
  .hero-mc__caption-title { font-size: 24px; line-height: 26px; }

  .take-grid .card__title, .card__title { font-size: 24px; line-height: 26px; }
  .take-grid .card__body, .card__body { padding: 24px; }

  .inside-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inside-card { min-height: 0; }

  .program { flex-direction: column; gap: 40px; }
  .program__intro { flex-basis: auto; max-width: 560px; }
  .modules { flex-basis: auto; width: 100%; }

  .beliefs, .price-intro, .price-card { padding: 40px; }
  .beliefs__cols { gap: 24px; }
  .belief__title { font-size: 20px; line-height: 24px; }
}

/* Two-panel rows stack before the panels get too narrow for their
   buttons and big numbers. */
@media (max-width: 991px) {
  .hero-mc__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero-mc__copy { justify-content: flex-start; }
  .hero-mc__video { min-height: 420px; }
  .seal--pill { left: calc(100% - 210px); top: 20px; }
  .pricing { grid-template-columns: minmax(0, 1fr); }
  .price-intro, .price-card { min-height: 0; }
}


/* The Capital hero stacks before the copy panel gets too narrow. */
@media (max-width: 991px) {
  .hero-cap__grid { grid-template-columns: minmax(0, 1fr); height: auto; }
  .hero-cap__media { aspect-ratio: 16 / 10; }
}

/* ================================================================
   mobile, up to 767: the 390 artboards
   ================================================================ */

@media (max-width: 767px) {
  .d-only { display: none; }
  .m-only { display: inline; }
  br.br-d { display: none; }
  br.br-m { display: inline; }
  .nowrap-d { white-space: normal; }

  .label { line-height: 14px; }
  .h2 { font-size: 36px; line-height: 36px; }

  /* The rule above each section on mobile runs edge to edge. */
  .rule-m { border-top: 1px solid var(--hairline); }

  /* nav */
  .nav { border-bottom: 1px solid var(--hairline); }
  .nav__row { padding-block: 12px; }
  .nav .wm { font-size: 31px; }
  .switch { display: none; }
  .btn--nav { height: 44px; padding: 0 16px; font-size: 14px; line-height: 16px; }
  .nav__menu-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    border: 1px solid var(--hairline);
    border-radius: 2px;
  }
  .nav__menu-btn span { width: 18px; height: 1.5px; background: var(--ink); }

  /* section heads */
  .sec-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .sec-head__main { flex-basis: auto; gap: 12px; }
  .sec-head__aside { flex-basis: auto; }
  .sec { padding-bottom: 56px; }
  .sec--top, .sec--top-m { padding-top: 48px; }
  .sec--who { padding-top: 24px; }
  .sec__stack { gap: 24px; }

  /* cards */
  .card__body { gap: 6px; padding: 16px 18px 20px; }
  .card__num { font-size: 11px; line-height: 14px; letter-spacing: 0; }
  .card__title, .take-grid .card__title { font-size: 22px; line-height: 26px; letter-spacing: -.03em; }
  .take-grid .card__body { padding: 16px 18px 20px; }

  /* advisory hero */
  .hero-adv { padding-top: 12px; }
  .hero-adv__panel { height: 600px; }
  .hero-adv__media { object-position: 22% 50%; }
  /* The stronger scrim from Paper, so the headline reads over the billboards. */
  .hero-adv__scrim { background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .65) 22%, rgba(0, 0, 0, .65) 60%, rgba(0, 0, 0, .45) 100%); }
  .hero-adv__content { padding: 24px 20px; }
  /* Same size as the Home hero on mobile. */
  .hero-adv__title { max-width: 300px; margin-block: auto; font-size: 40px; line-height: 40px; }
  /* Mobile order: label, the headline centred, then buttons and the line. */
  .hero-adv__group { flex: 1 1 auto; gap: 0; }
  .hero-adv__btns { order: 1; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 14px; }
  .hero-adv__btns .btn { flex: none; padding: 14px 0; font-size: 15px; line-height: 18px; }
  .hero-adv__btns .btn--line-light { border-color: var(--ground); }
  .hero-adv__btns .hero-status { font-size: 14px; line-height: 18px; }
  .seal--hero { left: calc(100% + 10px); top: calc(var(--block-top) - 6px); width: 66px; height: 45px; }
  .hero-adv__foot { flex-direction: column; align-items: stretch; gap: 14px; }
  .hero-adv__foot .btn-row { gap: 8px; }
  .hero-adv__foot .btn { flex: 1 1 0; padding: 14px 0; font-size: 15px; line-height: 18px; }
  .hero-adv__foot .btn--line-light { border-color: var(--ground); }
  .hero-adv__note { width: auto; max-width: none; line-height: 18px; }

  /* dek */
  .dek-sec { padding: 48px 0 40px; }
  .dek-sec--tight { padding-bottom: 48px; }
  .dek-sec__row { flex-direction: column; align-items: stretch; gap: 20px; }
  .side-note { flex-basis: auto; gap: 6px; }
  .dek-sec .side-note { display: none; }
  .side-note__title { color: var(--muted); font-size: 11px; line-height: 14px; letter-spacing: .05em; text-transform: uppercase; }
  .side-note__body { font-size: 14px; line-height: 20px; }
  /* Three lines on any phone: the size scales so "creative with a
     proven system." fits the last line. */
  .dek { --dfs: min(26px, calc((100vw - 64px) / 11.8)); display: block; font-size: var(--dfs); line-height: calc(var(--dfs) * 1.154); }
  /* A true drop cap on mobile: the script Y floats beside the first
     two lines, so its tail never runs into the line below. */
  .dek__cap { float: left; display: block; height: calc(var(--dfs) * 2.308 - 2px); margin: 2px 8px 0 -2px; padding-right: 2px; font-size: calc(var(--dfs) * 2.5); line-height: calc(var(--dfs) * 2.1); }
  .dek .br-m { display: inline; }
  /* The dek highlight stays in its line on mobile, so "with a" is not
     left alone above it. */
  .dek .bleed-line--m { display: inline; margin-bottom: 0; }
  .dek .bleed-line--m > .bleed { --mb: 0px; }
  .dek__body { max-width: none; }
  .bleed--dek { --L: calc(var(--dfs) * 1.154); }

  /* .bleed-line--m: on a line of its own on mobile only. The same
     rule as .bleed-line. */
  .bleed-line--m { display: block; margin-bottom: var(--drop); --drop: calc(var(--fs, 1em) * .92 - 1cap); }
  .bleed-line--m > .bleed { vertical-align: baseline; --mt: 0px; --mb: calc(var(--drop) * -1); --ml: 0px; --cr: 0px; --mr: 0px; --pr: 0px; }

  /* proof strip */
  .proof-strip { padding: 8px 0 56px; }
  .proof { gap: 20px; }
  .proof__head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .stats { gap: 24px; }
  .stat { gap: 4px; }
  .stat__num { line-height: 32px; }
  .logos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    height: auto;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--hairline);
    border-left: 1px solid var(--hairline);
  }
  .logos li { height: 64px; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
  .logos img { width: 72px; height: 24px; }

  /* loop */
  .loop-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }

  /* the swipe rows: the work, inside the club */
  .swipe { margin-inline: calc(var(--margin) * -1); }
  .swipe__track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-inline: var(--margin);
    scroll-padding-inline: var(--margin);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .swipe__track::-webkit-scrollbar { display: none; }
  .swipe__track > * { flex: 0 0 auto; scroll-snap-align: start; }
  .dashes { display: flex; gap: 6px; margin-top: 24px; padding-inline: var(--margin); }
  .dashes span { width: 24px; height: 2px; background: var(--hairline); transition: background-color .2s ease; }
  .dashes span.is-active { background: var(--ink); }

  .work-wall { grid-template-columns: none; }
  .work-item { width: 220px; gap: 8px; padding-top: 0 !important; }
  .work-item img { aspect-ratio: 220 / 294; }
  .work-item__num { line-height: 14px; }

  /* who */
  .who { gap: 10px; }
  .founder { flex-direction: column; }
  .founder__photo { flex-basis: auto; width: 100%; height: 300px; aspect-ratio: auto; object-position: 50% 30%; }
  .founder__body { gap: 14px; padding: 20px 18px 22px; }
  .founder__intro { gap: 14px; }
  .founder__name { font-size: 34px; line-height: 34px; }
  .founder__text { font-size: 17px; line-height: 23px; letter-spacing: -.02em; }
  .meta { flex-wrap: nowrap; gap: 20px; padding-top: 6px; }
  .meta div { gap: 4px; }
  .meta dd { line-height: 18px; }
  .seal--founder { left: calc(100% - 86px); top: -16px; width: 80px; height: 84px; }

  .team--3, .team--2 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .team-card, .team--2 .team-card { align-items: center; gap: 14px; height: auto; }
  .team-card__well, .team--2 .team-card__well {
    width: 72px;
    height: 72px;
    background: radial-gradient(circle farthest-corner at 50% 50%, var(--hairline) 0%, var(--well) 80%);
    font-size: 22px;
    line-height: 22px;
  }
  .team-card__body, .team--2 .team-card__body { justify-content: center; gap: 4px; padding: 0; }
  .team-card__name, .team--2 .team-card__name { font-size: 18px; line-height: 22px; }

  /* faq: an accordion, first item open */
  .faq { gap: 24px; }
  .faq__head { gap: 12px; }
  .faq__lede { max-width: none; }
  .faq__list { border-top: 1px solid var(--ink); }
  .faq-item { padding-block: 18px; border-top: 0; border-bottom: 1px solid var(--hairline); }
  .faq-item[open] { padding-bottom: 20px; }
  .faq-item summary { justify-content: space-between; gap: 16px; }
  .faq-item__num { display: none; }
  .faq-item__q { font-size: 17px; line-height: 22px; }
  .faq-item__sign { flex-basis: 14px; color: var(--ink); font-size: 18px; line-height: 22px; }
  .faq-item__a { max-width: none; padding: 10px 30px 0 0; }

  /* brief us */
  .brief { padding-bottom: 48px; }
  .brief__panel { gap: 28px; overflow: visible; min-height: 0; padding: 32px 20px 28px; }
  .brief__main { gap: 28px; }
  .brief__title { max-width: 300px; font-size: 40px; line-height: 40px; }
  .brief__row { flex-direction: column; align-items: stretch; gap: 14px; }
  .brief__row .btn { padding-block: 14px; font-size: 15px; line-height: 18px; }
  .seal--brief { left: calc(100% - 110px); top: -38px; width: 112px; height: 112px; transform: rotate(-10deg); }

  /* footer */
  .footer { padding: 32px 0 28px; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "links" "logo" "legal"; gap: 28px; }
  .footer__logo { justify-self: start; }
  .footer__logo .wm { font-size: 31px; }
  .footer__links { gap: 10px; }
  .footer__legal { text-align: left; }

  /* home */
  .hero-home { padding: 12px 0 20px; }
  .hero-home__panel { height: 600px; }
  .hero-home__media { object-position: 35% 50%; }
  .hero-home__scrim { background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .62) 32%, rgba(0, 0, 0, .62) 62%, rgba(0, 0, 0, .40) 100%); }
  .hero-home__content { padding: 24px 20px; }
  .hero-home__group { display: contents; }
  .hero-home__title { font-size: 40px; line-height: 40px; }
  .hero-home__btns, .hero-cap__btns { flex-wrap: nowrap; gap: 8px; }
  .hero-home__btns .btn, .hero-cap__btns .btn { flex: 1 1 0; padding: 14px 0; font-size: 15px; line-height: 18px; }
  .hero-home__btns .btn--line-light { border-color: var(--ground); }

  /* capital */
  .hero-cap { padding-top: 12px; }
  .hero-cap__grid { gap: 10px; }
  .hero-cap__copy { justify-content: flex-start; gap: 28px; padding: 24px 20px; }
  .hero-cap__group { gap: 28px; }
  .hero-cap__title { font-size: 40px; line-height: 40px; }
  .hero-cap__text { color: var(--muted); font-size: 14px; line-height: 20px; }
  .hero-cap__btns .btn--line { border-color: var(--ink); }
  .hero-cap__media { aspect-ratio: auto; height: 240px; }
  .hero-cap__media img { object-position: 50% 40%; }

  .look-sec { padding: 48px 0 56px; border-top: 1px solid var(--hairline); }
  .crit-list { border-top: 1px solid var(--ink); }
  .crit { padding: 18px 0 20px; border-top: 0; border-bottom: 1px solid var(--hairline); }
  .crit__num { display: none; }
  .crit__body { gap: 10px; }
  .crit__title { font-size: 17px; line-height: 22px; }
  .crit__text { max-width: none; padding-right: 30px; }

  /* members club hero */
  .hero-mc { padding-top: 12px; }
  .hero-mc__grid { grid-template-columns: minmax(0, 1fr); gap: 10px; min-height: 0; }
  .hero-mc__copy { justify-content: flex-start; gap: 28px; padding: 24px 20px; }
  .hero-mc__group { gap: 28px; }
  .hero-mc__title { --fs: 44px; font-size: 40px; line-height: 40px; }
  .hero-mc__text { color: var(--muted); font-size: 14px; line-height: 20px; }
  .hero-mc__copy .btn-row { gap: 8px; }
  .hero-mc__copy .btn { flex: 1 1 0; padding: 14px 0; font-size: 15px; line-height: 18px; }
  .hero-mc__copy .btn--line { border-color: var(--ink); }
  .seal--pill { left: calc(100% - 118px); top: -14px; width: 110px; height: 42px; transform: rotate(10deg); }
  .hero-mc__video { height: 240px; min-height: 0; padding: 18px; }
  .hero-mc__still { object-position: 50% 50%; }
  .hero-mc__video::before { background: rgba(0, 0, 0, .3); }
  .play { width: 56px; height: 56px; }
  .play svg { width: 16px; height: 18px; margin-left: 3px; }
  .hero-mc__caption-main { gap: 4px; }
  .hero-mc__caption-title { font-size: 18px; line-height: 22px; }

  /* members club sections */
  .take-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }

  .inside-grid { display: flex; gap: 10px; }
  .inside-card { width: 290px; min-height: 0; gap: 0; }
  .inside-card__text { gap: 6px; padding: 18px 18px 4px; }
  .inside-card__title { font-size: 20px; line-height: 24px; letter-spacing: -.03em; }
  .inside-card__art::after { display: none; }

  .program { gap: 24px; }
  .program__intro { gap: 12px; max-width: none; }
  .program__intro .h2 { max-width: 300px; }
  .program__player { margin-top: 12px; }
  .modules { gap: 0; border-top: 1px solid var(--ink); }
  .module, .module--soon {
    padding: 16px 0;
    border: 0;
    border-bottom: 1px solid var(--hairline);
    border-radius: 0;
    background: transparent;
  }
  .module__row { gap: 14px; }
  .module__num { flex-basis: 24px; font-size: 11px; line-height: 14px; }
  .module__title { flex: 1 1 0; font-size: 18px; line-height: 22px; }
  .module__count { flex: 0 0 auto; }
  .module__sign { flex-basis: 14px; color: var(--ink); font-size: 18px; line-height: 22px; }
  .module--soon .module__sign { color: var(--muted); }
  .module[open] { padding-bottom: 20px; }
  .module .lessons, .module__note { margin-top: 14px; }
  .module__note { padding-left: 38px; line-height: 19px; }
  .lessons { display: flex; flex-direction: column; gap: 8px; padding-left: 38px; border-top: 0; }
  .lessons li { padding: 0; border: 0; line-height: 19px; }
  .lessons li.is-current { color: var(--ink); }

  .proof-sec .sec__stack { gap: 20px; }
  .proof-sec .sec-head__main { gap: 12px; }
  .proof-sec__title { --fs: 40px; font-size: 36px; line-height: 36px; }

  .beliefs-sec { padding: 36px 0 48px; }
  .beliefs { gap: 32px; padding: 36px 20px 28px; }
  .beliefs__head { gap: 14px; }
  .beliefs__title { max-width: 280px; }
  .beliefs__cols { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .belief { gap: 10px; padding-top: 16px; }
  .belief__num { line-height: 14px; letter-spacing: 0; }
  .belief__title { font-size: 20px; line-height: 24px; }
  .seal--beliefs { left: calc(100% - 86px); top: -28px; width: 72px; height: 76px; }

  .pricing-sec { padding-bottom: 48px; }
  .pricing { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .price-intro { justify-content: flex-start; gap: 14px; min-height: 0; padding: 24px 20px 26px; }
  .price-intro__group { gap: 14px; }
  .price-intro__title { font-size: 44px; line-height: 42px; }
  .price-card { justify-content: flex-start; gap: 28px; min-height: 0; padding: 24px 20px; }
  .price-card__group { gap: 12px; }
  .price { gap: 10px; }
  .price__num { font-size: 96px; line-height: 84px; }
  .price__per { font-size: 20px; line-height: 24px; }
  .price-card .btn { padding: 16px 22px; font-size: 17px; line-height: 20px; }
  .seal--price { display: none; }
}

/* ── advisory v3 ──────────────────────────────────────────── */

.sys-diagram { overflow: hidden; border-radius: 2px; }
.sys-diagram img { width: 100%; height: auto; }

.adv-inside__card { display: flex; flex-direction: column; }
.adv-inside__art { display: block; margin-top: auto; }
.adv-inside__art img { width: 100%; height: auto; }

/* The onboarding bonus strip under the grid. */
.bonus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: 240px;
  overflow: hidden;
  padding-left: 48px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--ground);
}
.bonus__text { display: flex; flex: 0 1 520px; flex-direction: column; gap: 14px; }
.bonus__pill {
  align-self: flex-start;
  padding: 5.5px 10px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ground);
  font-size: 10px;
  line-height: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.bonus__title { font-size: 32px; line-height: 34px; letter-spacing: -.03em; }
.bonus__line { max-width: 440px; color: var(--muted); }
.bonus__art { flex: 0 0 520px; width: 520px; height: 240px; }
.bonus__art img { width: 100%; height: 100%; object-fit: cover; }

/* The program: a stepper that swaps the module card (app.js). */
.pg { gap: 56px; }
.pg__body { display: grid; grid-template-columns: 420px minmax(0, 1fr); align-items: center; gap: 56px; }
.pg-steps { position: relative; }
.pg-steps::before { content: ""; position: absolute; left: 9px; top: 33px; bottom: 33px; width: 1px; background: var(--ink); }
.pg-step {
  display: flex;
  align-items: center;
  gap: 22px;
  width: 100%;
  height: 66px;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
}
.pg-step:last-child { border-bottom: 0; }
.pg-step__dot { position: relative; z-index: 1; display: grid; flex: none; place-items: center; width: 19px; height: 19px; }
.pg-step__dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); transition: transform .25s ease; }
.pg-step__num { width: 20px; color: var(--muted); font-size: 11px; letter-spacing: .05em; }
.pg-step__name { font-size: 17px; line-height: 20px; letter-spacing: -.01em; transition: font-size .25s ease, color .25s ease; }
.pg-step[aria-selected="true"] .pg-step__dot { border: 1.5px solid var(--ink); border-radius: 50%; background: var(--ground); }
.pg-step[aria-selected="true"] .pg-step__dot::before { transform: scale(.75); }
.pg-step[aria-selected="true"] .pg-step__num { color: var(--ink); }
.pg-step[aria-selected="true"] .pg-step__name { font-size: 21px; }
.pg-step:hover .pg-step__name { color: var(--ink); }
.pg-step.is-ahead .pg-step__name { color: var(--muted); }
.pg-step.is-ahead .pg-step__dot::before { border: 1px solid var(--well); background: var(--ground); }
.pg-step.is-soon { cursor: default; }
.pg-step.is-soon .pg-step__num, .pg-step.is-soon .pg-step__name, .pg-step.is-soon:hover .pg-step__name { color: var(--well); }
.pg-step__soon { margin-left: auto; color: var(--muted); font-size: 11px; line-height: 12px; letter-spacing: .05em; text-transform: uppercase; }

/* One white sheet on two tinted sheets. */
.pg-card { position: relative; justify-self: end; width: 722px; max-width: calc(100% - 28px); margin-bottom: 32px; }
.pg-card::before, .pg-card::after { content: ""; position: absolute; inset: 0; width: calc(100% - 10px); border: 1px solid var(--hairline); border-radius: 4px; transform-origin: 0 0; }
.pg-card::before { background: var(--card); transform: translate(28px, 28px) rotate(1.6deg); }
.pg-card::after { background: #F2F2F2; transform: translate(16px, 16px) rotate(.8deg); }
.pg-card__sheet {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-height: 480px;
  padding: 36px;
  border: 1px solid rgba(8, 8, 7, .14);
  border-radius: 4px;
  background: var(--ground);
  box-shadow: 0 16px 40px rgba(8, 8, 7, .1);
}
.pg-card__meta { display: flex; justify-content: space-between; font-size: 11px; line-height: 12px; letter-spacing: .05em; }
.pg-card__name { color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }
.pg-card__title { max-width: 648px; min-height: 72px; margin-top: 16px; font-size: 34px; line-height: 36px; letter-spacing: -.04em; }
.pg-card__visual { width: 100%; height: auto; aspect-ratio: 648 / 270; border-radius: 2px; background: var(--card); }
.pg-card__panel { transition: opacity .28s ease, transform .28s ease; }
.pg-card__panel.is-leaving { opacity: 0; transform: translateY(6px); }
@media (prefers-reduced-motion: reduce) {
  .pg-card__panel, .pg-step__name, .pg-step__dot::before { transition: none; }
}

@media (max-width: 1199px) {
  .pg__body { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .pg-card { justify-self: start; }
  .bonus { gap: 24px; padding-left: 40px; }
  .bonus__art { flex-basis: 44%; width: 44%; }
}

@media (max-width: 767px) {
  .bonus { flex-direction: column; align-items: stretch; gap: 0; height: auto; padding: 0; }
  .bonus__text { flex-basis: auto; gap: 10px; padding: 20px 18px; }
  .bonus__title { font-size: 22px; line-height: 26px; }
  .bonus__line { max-width: none; }
  .bonus__art { flex-basis: auto; width: 100%; height: auto; }
  .bonus__art img { height: auto; }

  .adv-inside__card { width: 290px; height: 282px; }
  .sys-grid .card__body { gap: 10px; }

  /* The steps become a swipe row of 118px columns, each with a top
     bar: ink and 2px for done, ink and 3px for the current one, a
     hairline for the ones still to come. The step before the current
     one sits at the left edge and the row clips the third (app.js). */
  .pg { gap: 24px; }
  .pg__body { gap: 24px; }
  .pg-steps {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .pg-steps::-webkit-scrollbar { display: none; }
  .pg-steps::before { display: none; }
  .pg-step, .pg-step:last-child {
    flex: 0 0 118px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    height: auto;
    padding-top: 12px;
    border-top: 2px solid var(--ink);
    border-bottom: 0;
    scroll-snap-align: start;
  }
  .pg-step__dot { display: none; }
  .pg-step__num { width: auto; line-height: 12px; }
  .pg-step__name, .pg-step[aria-selected="true"] .pg-step__name { font-size: 15px; line-height: 19px; letter-spacing: -.02em; white-space: nowrap; }
  .pg-step[aria-selected="true"] { padding-top: 11px; border-top-width: 3px; }
  .pg-step.is-ahead { padding-top: 13px; border-top: 1px solid var(--hairline); }
  .pg-step.is-ahead .pg-step__num { color: var(--well); }
  .pg-step__soon { margin-left: 0; font-size: 10px; }
  .pg-step:not(.is-ahead):not([aria-selected="true"]) .pg-step__num { color: var(--muted); }
  /* One tinted sheet behind the white one. */
  .pg-card { width: calc(100% - 10px); max-width: none; margin-bottom: 14px; }
  .pg-card::after { display: none; }
  .pg-card::before { width: calc(100% - 6px); height: calc(100% - 8px); transform: translate(14px, 14px) rotate(1.4deg); }
  .pg-card__sheet { gap: 18px; min-height: 0; padding: 22px; box-shadow: 0 14px 34px rgba(8, 8, 7, .1); }
  .pg-card__panel:first-child { display: flex; flex-direction: column; gap: 18px; }
  .pg-card__meta { color: var(--ink); }
  .pg-card__name { font-size: 10px; }
  .pg-card__title { min-height: 52px; margin-top: 0; font-size: 24px; line-height: 26px; }
  /* Mobile visuals are their own Paper exports (module-0N-m.jpg). */
  .pg-card__visual { aspect-ratio: 294 / 210; object-fit: cover; }
}

/* ── legal pages (privacy) ────────────────────────────────── */

.legal { padding: 72px 0 120px; }
.legal__grid { display: flex; align-items: flex-start; gap: 32px; }
.legal__aside {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  display: flex;
  flex: 0 0 221px;
  flex-direction: column;
  gap: 12px;
}
.legal__index { display: flex; flex-direction: column; margin-top: 16px; }
.legal__index a { font-size: 13px; line-height: 24px; color: var(--muted); }
.legal__index a:hover { color: var(--ink); }

.legal__body { flex: 0 1 760px; margin-left: auto; margin-right: auto; }
.legal__title {
  font-size: clamp(44px, 5vw, 72px);
  line-height: .95;
  letter-spacing: -.04em;
}
.legal__lede {
  max-width: 640px;
  margin-top: 24px;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: -.01em;
  color: var(--chrome);
}
.legal__body h2 {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--hairline);
  font-size: 24px;
  line-height: 28px;
  letter-spacing: -.02em;
}
.legal__body h3 { margin-top: 28px; font-size: 17px; line-height: 22px; letter-spacing: -.01em; }
.legal__body p,
.legal__body li { font-size: 15px; line-height: 23px; color: var(--chrome); }
.legal__body p { margin-top: 12px; }
.legal__body ul { margin-top: 12px; padding-left: 18px; list-style: disc; }
.legal__body li + li { margin-top: 6px; }
.legal__body strong { font-weight: 400; color: var(--ink); }
.legal__body a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.legal__table-wrap { margin-top: 16px; overflow-x: auto; }
.legal__table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.legal__table th,
.legal__table td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--hairline); text-align: left; vertical-align: top; }
.legal__table th { font-size: 11px; line-height: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.legal__table td { color: var(--chrome); }
.legal__table td:first-child { width: 34%; color: var(--ink); }

@media (max-width: 991px) {
  .legal__grid { flex-direction: column; gap: 40px; }
  .legal__aside { position: static; flex-basis: auto; }
  .legal__index { display: none; }
  .legal__body { margin: 0; }
}

@media (max-width: 767px) {
  .legal { padding: 40px 0 72px; }
  .legal__lede { font-size: 16px; line-height: 24px; }
  .legal__body h2 { margin-top: 40px; padding-top: 24px; font-size: 22px; line-height: 26px; }
}

/* ── launch states (2026-10-21) ────────────────────────────── */

/* <body data-phase> is waitlist, open, filled or public. An element
   tagged data-p shows only in the phases it lists. */
body[data-phase="waitlist"] [data-p]:not([data-p~="waitlist"]),
body[data-phase="open"] [data-p]:not([data-p~="open"]),
body[data-phase="filled"] [data-p]:not([data-p~="filled"]),
body[data-phase="public"] [data-p]:not([data-p~="public"]) { display: none !important; }

/* The hero status sits beside the main button: the
   green dot and one line, no pill, no second button, no sub-line. On a
   phone it drops under the full-width button. Layout: .hero-adv__btns. */
.hero-status { display: flex; align-items: center; gap: 6px; color: var(--ground); font-size: 16px; line-height: 20px; letter-spacing: -.01em; }

/* The one colour on the 2AM site: a green dot that
   pulses while the waitlist or the spots are open. Grey and still
   once they fill. */
/* An 8px dot in a 16px box: the margin makes room for the ring, so
   layout spacing matches what the eye sees. */
.live-dot { position: relative; flex-shrink: 0; width: 8px; height: 8px; margin: 4px; border-radius: 50%; background: #22C55E; }
.live-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: #22C55E;
  opacity: .28;
  animation: live-pulse 2s ease-out infinite;
}
.live-dot--off { background: #BFBFBF; }
.live-dot--off::after { display: none; }
@keyframes live-pulse {
  0% { transform: scale(.6); opacity: .5; }
  100% { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot::after { animation: none; }
}

.brief__status { display: flex; align-items: center; gap: 6px; color: var(--ground); }

/* ── apply (2026-10-21) ───────────────────────────────────── */

/* The application form at /apply (one card, one question
   a screen, a progress bar, taps that move on) in the 2AM palette.
   Behaviour: apply.js. Answers: functions/api/apply.js to Notion. */
.apply-page { background: var(--card); }
.apply [hidden] { display: none !important; }

.apply { display: grid; place-items: center; min-height: 100svh; padding: 48px 20px; }
.apply__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  padding: 56px 64px 48px;
  background: var(--ground);
  border: 1px solid var(--hairline);
  border-radius: 2px;
}
.apply__logo { align-self: center; margin-bottom: 48px; }

.apply__progress { margin-bottom: 40px; }
.apply__meta { display: flex; justify-content: space-between; }
.apply__bar { height: 2px; margin-top: 10px; background: var(--hairline); }
.apply__fill { display: block; width: 20%; height: 100%; background: var(--ink); transition: width .3s ease; }

.apply__step { min-width: 0; margin: 0; padding: 0; border: 0; }
.apply__q {
  display: block;
  width: 100%;
  margin: 0 0 32px;
  padding: 0;
  font-size: 32px;
  line-height: 34px;
  letter-spacing: -.04em;
  text-align: center;
  outline: none;
}
.apply__hint { margin: -20px 0 28px; color: var(--muted); font-size: 16px; line-height: 22px; letter-spacing: -.01em; text-align: center; }

.apply__options { display: grid; gap: 8px; }
.apply__opt { position: relative; display: block; cursor: pointer; }
.apply__opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.apply__opt span {
  display: block;
  padding: 17px 20px;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -.02em;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.apply__opt:hover span { border-color: var(--ink); }
.apply__opt input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.apply__opt input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

.apply__field { display: grid; gap: 10px; margin-bottom: 20px; }
.apply__field:last-child { margin-bottom: 0; }
.apply__input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  background: var(--ground);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  color: var(--ink);
  font: inherit;
  font-size: 18px;
  letter-spacing: -.01em;
  transition: border-color .15s ease;
}
.apply__input::placeholder { color: var(--well); }
.apply__input:hover { border-color: var(--well); }
.apply__input:focus { border-color: var(--ink); outline: none; }
.apply__input--area { height: auto; min-height: 148px; padding: 14px 16px; line-height: 24px; resize: vertical; }

.apply__error { margin-top: 16px; font-size: 14px; line-height: 20px; text-align: center; }

.apply__nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 32px; }
.apply__nav--solo { display: none; }
.apply__back { color: var(--muted); font-size: 16px; line-height: 20px; letter-spacing: -.01em; transition: color .15s ease; }
.apply__back:hover { color: var(--ink); }
.apply__next { min-width: 240px; margin-left: auto; padding-block: 16px; }
.apply__next:disabled { opacity: .5; cursor: progress; }

.apply__legal { margin-top: 24px; color: var(--muted); font-size: 12px; line-height: 16px; text-align: center; }
.apply__legal a { text-decoration: underline; text-underline-offset: 2px; }

.apply__done .apply__hint { margin: -16px 0 32px; }
.apply__done .apply__hint:last-child { margin-bottom: 0; }
.apply__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* The deck slot on /pitch: a dashed drop zone over a hidden file input. */
.apply__drop {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 24px;
  border: 1px dashed var(--well);
  border-radius: 2px;
  color: var(--muted);
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -.01em;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.apply__drop:hover, .apply__drop.is-over { border-color: var(--ink); }
.apply__drop.is-over { background: var(--card); }
.apply__drop:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.apply__drop u { color: var(--ink); text-underline-offset: 2px; }
.apply__drop [data-file-name] { color: var(--ink); overflow-wrap: anywhere; }
.apply__drop-s { font-size: 14px; line-height: 20px; }
.apply__file { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* The spam trap: off screen, never focusable. */
.apply__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 767px) {
  .apply-page { background: var(--ground); }
  .apply { place-items: start stretch; padding: 0; }
  .apply__card { max-width: none; min-height: 100svh; padding: 32px 20px 40px; border: 0; }
  .apply__logo { margin-bottom: 32px; }
  .apply__progress { margin-bottom: 32px; }
  .apply__q { font-size: 28px; line-height: 30px; }
  .apply__next { flex: 1; min-width: 0; }
  .apply__actions .btn { width: 100%; }
}