/*
 * landing.css — /beta and the one-message pages around the sign-up (.letter).
 * Builds on beta.css: its tokens, type, buttons, fields, cards, phone and
 * motion utilities.
 *
 * The owner's reference is a plain app waitlist page, so: everything
 * centred, generous air, one form, the phones straight under it. Light by
 * default — dark only under [data-theme="dark"], never from the OS.
 *
 * Same rules as beta.css: anything hidden for an entrance is hidden only
 * under html.js; entrance animations fill backwards (never pin a transform
 * over a hover); prefers-reduced-motion leaves everything drawn and still.
 */

/* ── hero: kicker → headline → two lines → the form → the phones ────────── */

.hero {
  position: relative;
  padding-top: clamp(36px, 6.5vw, 88px);
  overflow: hidden;
}
/* clip only sideways (the peeking phones), so the phones' shadows fall
   softly past the section instead of ending on a hard edge */
@supports (overflow: clip) {
  .hero {
    overflow: visible;
    overflow-x: clip;
  }
}
.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 820px;
  text-align: center;
}
.hero__title {
  margin-top: 24px;
  font-size: clamp(44px, 8vw, 96px);
  line-height: 0.98;
}
.hero__lede {
  max-width: 34em;
  margin-top: 20px;
  font-size: clamp(17px, 1.55vw, 19.5px);
}
/* the two doors into the web app: Create account filled, Sign in quiet */
.hero__doors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}
.hero__free {
  margin-top: 14px;
}
/* the iPhone beta: one quiet line under the doors that opens the form, so
   the hero asks one thing first and the second way in is a tap away */
.hero__join {
  width: 100%;
  max-width: 472px;
  margin-top: 28px;
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.hero__join-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 4px;
  color: var(--dim);
  font: 500 14.5px/1.3 var(--sans);
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-fast);
}
.hero__join-label::-webkit-details-marker {
  display: none;
}
.hero__join-label:hover {
  color: var(--ink);
}
.hero__join-label:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 8px;
}
.hero__join-label .i {
  transition: transform var(--dur) var(--ease-out);
}
.hero__join[open] > .hero__join-label {
  color: var(--ink);
}
.hero__join[open] > .hero__join-label .i {
  transform: rotate(180deg);
}
.hero__join > .join {
  margin-top: 12px;
}

/* the join form: three boxes, 12px apart, the submit inside the email box */
.join {
  --form-gap: 12px;
  text-align: left;
}
.join .join__names {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 400px) {
  .join .join__names {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.join .error-summary,
.join .notice {
  margin-bottom: 4px;
}
.join__fine {
  display: grid;
  gap: 4px;
  margin-top: 6px;
  color: var(--faint);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
}
.join__legal {
  font-size: 12.5px;
}
.join__legal .link {
  color: var(--faint);
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
}
.join__legal .link:hover {
  color: var(--ink);
}

/* the phones: home in front, a split and Clara beside it. On a phone the
   two side phones peek in from the edges (the hero clips them — no page
   scroll); from 600px all three stand whole, tucked behind the centre one,
   and from 1000px they stand apart. */
.stage {
  --c: clamp(214px, 58vw, 312px);
  --s: calc(var(--c) * 0.84);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  margin-top: clamp(44px, 5.5vw, 64px);
  padding-bottom: clamp(24px, 4vw, 48px);
}
.stage__slot {
  position: relative;
  flex: none;
}
.stage__slot .phone {
  max-width: none;
}
.stage__slot--c {
  z-index: 2;
}
.stage__slot--c .phone {
  --phone-w: var(--c);
}
.stage__slot--l,
.stage__slot--r {
  z-index: 1;
  margin-top: calc(var(--c) * 0.22);
}
.stage__slot--l .phone,
.stage__slot--r .phone {
  --phone-w: var(--s);
}
.stage__slot--l {
  margin-right: calc(var(--c) * -0.1);
}
.stage__slot--r {
  margin-left: calc(var(--c) * -0.1);
}
@media (min-width: 600px) {
  .stage {
    --c: min(36vw, 312px);
  }
  .stage__slot--l {
    margin-right: calc(var(--c) * -0.08);
  }
  .stage__slot--r {
    margin-left: calc(var(--c) * -0.08);
  }
}
@media (min-width: 1000px) {
  .stage__slot--l {
    margin-right: calc(var(--c) * 0.06);
  }
  .stage__slot--r {
    margin-left: calc(var(--c) * 0.06);
  }
}
/* the phones rise after the form has landed */
.stage[data-rise] {
  --rise-delay: 520ms;
}

/* the section rules run with the content column, not out to the gutters */
.page-landing .section--line::before {
  left: max(var(--gutter), env(safe-area-inset-left), calc((100% - var(--wrap-max)) / 2));
  right: max(var(--gutter), env(safe-area-inset-right), calc((100% - var(--wrap-max)) / 2));
}

/* ── the dashboard, annotated ───────────────────────────────────────────── */

.dash .section__head {
  margin-bottom: clamp(36px, 5vw, 56px);
}

/* a white sheet with the chart's own grid faintly behind the phone */
.dash__canvas {
  --pad-x: clamp(16px, 4vw, 56px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(36px, 5vw, 64px) var(--pad-x);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--card);
}
.dash__canvas::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center center;
  -webkit-mask-image: radial-gradient(ellipse 55% 58% at 50% 50%, #000 20%, transparent 100%);
  mask-image: radial-gradient(ellipse 55% 58% at 50% 50%, #000 20%, transparent 100%);
  opacity: 0.55;
}

.dash__stage {
  --dw: clamp(236px, 72vw, 300px);
  position: relative;
  display: grid;
  justify-items: center;
  gap: 40px;
}
.dash__device {
  position: relative;
  z-index: 2;
  width: var(--dw);
}
.dash__device .phone {
  --phone-w: var(--dw);
}

/* the numbered pins sit on the phone's rim at the row they point to; the
   screen starts 3.9% of the phone's width down and is 1.99884 widths tall */
.dash__pin {
  position: absolute;
  z-index: 6;
  top: calc(var(--dw) * (0.039 + 1.99884 * var(--y)));
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 3px var(--card), var(--shadow-md);
  color: var(--on-accent);
  font: 600 13.5px/1 var(--mono);
}
.dash__pin--l {
  left: calc(var(--dw) * -0.03);
}
.dash__pin--r {
  left: calc(var(--dw) * 1.03);
}

.dash__notes {
  display: grid;
  gap: 22px;
  width: 100%;
  max-width: 30rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dash__note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.dash__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-accent);
  font: 600 13.5px/1 var(--mono);
}
.dash__text {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding-top: 2px;
}
.dash__text .h3 {
  font-size: 17px;
}
.dash__text p {
  color: var(--dim);
  font-size: 15px;
  line-height: 1.55;
}
.dash__leader,
.dash__ledger {
  display: none;
}

/* iPad: the phone left, the notes beside it */
@media (min-width: 720px) {
  .dash__stage {
    --dw: clamp(270px, 33vw, 320px);
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    column-gap: clamp(48px, 7vw, 88px);
  }
  .dash__notes {
    gap: 30px;
  }
}

/* desktop: the notes around the phone, each on its leader line, and the
   ledger line carried out past the phone to both edges */
@media (min-width: 1100px) {
  .dash__stage {
    --dw: clamp(330px, 27vw, 360px);
    display: block;
  }
  .dash__device {
    margin-inline: auto;
  }
  .dash__notes {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: block;
    max-width: none;
  }
  .dash__note {
    position: absolute;
    top: calc(var(--dw) * (0.039 + 1.99884 * var(--y)) - 12px);
    gap: 0;
  }
  .dash__note--l {
    left: 0;
    right: calc(50% + var(--dw) * 0.53 + 15px);
    text-align: right;
  }
  .dash__note--r {
    left: calc(50% + var(--dw) * 0.53 + 15px);
    right: 0;
    flex-direction: row-reverse;
  }
  .dash__num {
    display: none;
  }
  .dash__text {
    flex: 0 1 250px;
    padding-top: 0;
  }
  .dash__text .h3 {
    line-height: 24px;
    text-wrap: balance;
  }
  .dash__text p {
    font-size: 14.5px;
  }
  .dash__leader {
    position: relative;
    display: block;
    flex: 1 1 auto;
    min-width: 36px;
    height: 1.5px;
    margin-top: 11.25px;
    background: var(--ink);
    opacity: 0.4;
  }
  .dash__note--l .dash__leader {
    margin-left: 18px;
    transform-origin: right center;
  }
  .dash__note--r .dash__leader {
    margin-right: 18px;
  }
  /* a dot at the text end of each leader */
  .dash__leader::before {
    content: '';
    position: absolute;
    top: -2.25px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ink);
  }
  .dash__note--l .dash__leader::before {
    left: -3px;
  }
  .dash__note--r .dash__leader::before {
    right: -3px;
  }

  .dash__ledger {
    position: absolute;
    z-index: 1;
    top: 0;
    display: block;
    height: calc(var(--dw) * 2.07684);
    overflow: visible;
    fill: none;
    stroke: var(--gain);
    stroke-width: 2.5px;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.85;
  }
  /* An explicit width, not left + right: an absolutely positioned <svg> is a
     replaced element, so with width:auto it took its viewBox's square shape
     and ignored `right` — the left line ran on under the phone and met the
     rim 41px below the chart it extends, and the right one ran off the
     canvas with its head. Each spans the stage's half beside the phone. */
  .dash__ledger--l {
    left: calc(var(--pad-x) * -1);
    width: calc(50% - var(--dw) / 2 + var(--pad-x));
  }
  .dash__ledger--r {
    left: calc(50% + var(--dw) / 2);
    width: calc(50% - var(--dw) / 2 + var(--pad-x));
  }
  .dash__head {
    stroke-width: 10px;
  }
  .dash__halo {
    stroke-width: 10px;
    opacity: 0;
  }
}

/* the dashboard's sequence, once the canvas is on screen: the ledger draws
   left to right through the phone, the pins land, the leaders run out, and
   the notes arrive on them */
html.js .dash__ledger {
  transition: clip-path 900ms cubic-bezier(0.45, 0.05, 0.9, 0.7) 450ms;
}
html.js .dash__ledger--r {
  transition: clip-path 1100ms cubic-bezier(0.15, 0.55, 0.35, 1) 1350ms;
}
html.js .dash__canvas:not(.is-in) .dash__ledger {
  clip-path: inset(-20% 100% -20% 0);
}
html.js .dash__canvas.is-in .dash__ledger {
  clip-path: inset(-20% -4% -20% 0);
}
html.js .dash__head {
  transition: opacity 300ms var(--ease-out) 2350ms;
}
html.js .dash__canvas:not(.is-in) .dash__head {
  opacity: 0;
}
/* one pulse at the line's head once it lands, then still: the whole
   sequence is over inside five seconds of the reveal (WCAG 2.2.2) */
html.js .dash__canvas.is-in .dash__halo {
  animation: ledger-pulse 2.4s var(--ease-out) 2500ms 1;
}
@keyframes ledger-pulse {
  0% {
    stroke-width: 10px;
    opacity: 0.5;
  }
  70%,
  100% {
    stroke-width: 30px;
    opacity: 0;
  }
}
html.js .dash__pin {
  transition: transform 520ms var(--ease-spring), opacity 180ms linear;
  transition-delay: calc(650ms + var(--n, 1) * 150ms);
}
html.js .dash__canvas:not(.is-in) .dash__pin {
  opacity: 0;
  transform: scale(0.2);
}
@media (min-width: 1100px) {
  html.js .dash__leader {
    --draw-dur: 560ms;
    --draw-delay: calc(900ms + var(--n, 1) * 150ms);
  }
  html.js .dash__text {
    transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out);
    transition-delay: calc(1150ms + var(--n, 1) * 150ms);
  }
  html.js .dash__canvas:not(.is-in) .dash__text {
    opacity: 0;
    transform: translate3d(0, 6px, 0);
  }
}

/* ── the chapter opener: money you share ────────────────────────────────── */

.chapter .section__head {
  margin-bottom: clamp(40px, 6vw, 64px);
}
.jumps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
/* each chip carries its row's tone in the arrow, turned to point down the page */
.jump {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 12px 0 15px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  font: 600 14px/1 var(--sans);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--dur-fast), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
@media (min-width: 720px) {
  .jumps {
    gap: 10px;
  }
  .jump {
    gap: 8px;
    padding: 0 15px 0 18px;
    font-size: 14.5px;
  }
}
.jump .i {
  color: var(--tone);
  transform: rotate(90deg);
}
@media (hover: hover) {
  .jump:hover {
    border-color: var(--tone);
    box-shadow: var(--shadow-md);
    transform: translate3d(0, -1px, 0);
  }
}
.chapter__media {
  --pw: clamp(248px, 70vw, 300px);
  position: relative;
  display: grid;
  justify-items: center;
}
.chapter__media .phone {
  --phone-w: var(--pw);
  z-index: 1;
}
/* one soft disc of the page's lane colour, the phone standing in it */
.chapter__halo {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: min(calc(100vw - 2 * var(--gutter)), calc(var(--pw) * 1.72));
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  transform: translate(-50%, -50%);
}
/* a second, fainter ring outside it: the circle of people the chapter is about */
.chapter__halo::after {
  content: '';
  position: absolute;
  inset: -13%;
  border: 1px dashed var(--line-strong);
  border-radius: 50%;
}
@media (max-width: 719.98px) {
  .chapter__halo::after {
    display: none;
  }
}
.chapter__tags {
  position: relative;
  z-index: 1;
  max-width: 42rem;
  margin: clamp(28px, 4vw, 40px) auto 0;
  color: var(--dim);
  font-size: 15.5px;
  line-height: 2.1;
  text-align: center;
  text-wrap: balance;
}
/* the split sheet's own words, as the app draws them */
.tag {
  display: inline-block;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 26px;
  white-space: nowrap;
}

/* ── the feature rows ───────────────────────────────────────────────────── */

/*
 * Each row: the words (kicker, headline, scene), a real capture on a tinted
 * panel, then the proof and the fine print. Phone: stacked in that order.
 * iPad portrait: the words across, then the capture beside its proof.
 * From 1000px: words | capture, the sides alternating row by row.
 */
.features {
  display: grid;
  gap: clamp(104px, 13vw, 168px);
  padding-block: clamp(24px, 4vw, 48px) clamp(104px, 13vw, 160px);
}
.show {
  display: grid;
  grid-template-areas: 'head' 'media' 'proof';
  gap: 40px;
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
}
.show__head {
  grid-area: head;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.show__media {
  grid-area: media;
}
.show__proof {
  grid-area: proof;
  display: grid;
  align-content: start;
  gap: 22px;
}
.show .h2 {
  font-size: clamp(34px, 3.9vw, 50px);
}
.show__kicker {
  gap: 10px;
  color: var(--tone);
}
.show__kicker .plate {
  width: 34px;
  height: 34px;
}
.show__body {
  color: var(--dim);
  font-size: clamp(17px, 1.45vw, 18.5px);
  line-height: 1.62;
  text-wrap: pretty;
}

/* the proof: checked lines between hairlines */
.proof {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.proof li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 14px;
  padding: 14px 0 15px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.55;
  text-wrap: pretty;
}
.proof__mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--tone-bg);
  color: var(--tone);
}
.proof__mark .i {
  stroke-width: 2.6;
}
.show__fine {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--faint);
  font-size: 13.5px;
  line-height: 1.5;
}
.show__fine .i {
  margin-top: 2px;
}

/* Clara's suggestion pills, as the app shows them under an answer */
.asks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}
.asks li {
  padding: 7px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.3;
}

/* the capture stands on a panel of its row's tint, its top clear of it */
.show__media {
  --pw: clamp(240px, 70vw, 290px);
  position: relative;
  display: grid;
  justify-items: center;
  padding-bottom: clamp(28px, 6vw, 40px);
}
.show__panel {
  position: absolute;
  z-index: 0;
  top: 17%;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 32px;
  background: var(--tone-bg);
}
.show__media .phone {
  --phone-w: var(--pw);
  z-index: 1;
}

/* iPad portrait: the words across, then capture | proof */
@media (min-width: 720px) {
  .show {
    max-width: none;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: 'head head' 'media proof';
    column-gap: clamp(36px, 5vw, 56px);
    row-gap: 48px;
  }
  .show--flip {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'head head' 'proof media';
  }
  .show__head {
    max-width: 40rem;
  }
  .show__proof {
    align-self: center;
  }
  .show__media {
    --pw: clamp(250px, 34vw, 290px);
    width: calc(var(--pw) + 56px);
  }
}

/* desktop: words | capture, alternating */
@media (min-width: 1000px) {
  .show,
  .show--flip {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: '. media' 'head media' 'proof media' '. media';
    column-gap: clamp(56px, 6vw, 96px);
    row-gap: 0;
  }
  .show--flip {
    grid-template-areas: 'media .' 'media head' 'media proof' 'media .';
  }
  .show__head,
  .show__proof {
    width: 100%;
    max-width: 31rem;
  }
  .show__proof {
    align-self: start;
    margin-top: 30px;
  }
  /* the words hug the middle, beside the capture */
  .show:not(.show--flip) .show__head,
  .show:not(.show--flip) .show__proof {
    justify-self: end;
  }
  .show__media {
    --pw: clamp(290px, 25vw, 330px);
    width: 100%;
    align-self: center;
  }
}
/* a row with no capture (a deploy without it): the words alone, centred */
.show--bare {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  grid-template-areas: 'head' 'proof' !important;
  max-width: 34rem;
  margin-inline: auto;
}
.show--bare .show__head,
.show--bare .show__proof {
  justify-self: stretch !important;
}

html.js .show__panel {
  transition: transform 1000ms var(--ease-out) 120ms, opacity 700ms var(--ease-out) 120ms;
  transform-origin: 50% 100%;
}
html.js .show__media:not(.is-in) .show__panel {
  opacity: 0;
  transform: scale(0.94);
}
html.js .show__media {
  --reveal-delay: 120ms;
}

/* ── sheets: the template strip, and the export line ────────────────────── */

.templates {
  display: grid;
  gap: 28px;
  margin-top: clamp(56px, 8vw, 88px);
}
/* on a phone the row above already shows a capture: the strip is words */
.templates__media {
  display: none;
}
.templates__main {
  display: grid;
  gap: 20px;
  min-width: 0;
}
.templates__head {
  display: grid;
  gap: 4px;
}
.templates__head p {
  color: var(--dim);
  font-size: 15px;
  line-height: 1.5;
}
.templates__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tpl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  align-items: center;
  column-gap: 9px;
  row-gap: 6px;
  padding: 14px 14px 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}
.tpl__icon {
  display: grid;
  place-items: center;
  color: var(--tone);
}
.tpl .h4 {
  font-size: 14.5px;
  line-height: 1.3;
}
.tpl p {
  grid-column: 1 / -1;
  color: var(--dim);
  font-size: 13.5px;
  line-height: 1.5;
}
.templates__more {
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 14.5px;
  line-height: 1.6;
  text-wrap: pretty;
}
.export {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--dim);
  font-size: 14.5px;
  line-height: 1.6;
  text-wrap: pretty;
}
.export__icon {
  width: 32px;
  height: 32px;
  background: var(--tone-bg);
  color: var(--tone);
}
@media (min-width: 720px) {
  .templates {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(28px, 4vw, 56px);
    padding: clamp(24px, 3.5vw, 44px);
    border: 1px solid var(--line);
    border-radius: 28px;
    background: var(--card);
  }
  .templates--bare {
    grid-template-columns: minmax(0, 1fr);
  }
  .templates__media {
    display: block;
  }
  .templates__media .phone {
    --phone-w: clamp(200px, 26vw, 250px);
  }
  .templates__list {
    gap: 12px;
  }
  /* inside the white panel, the cards sit on the page's ground */
  .tpl {
    background: var(--bg);
  }
}
@media (min-width: 1180px) {
  .templates__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* the smallest phones: two cards a row left "Subscriptions" no room */
@media (max-width: 359.98px) {
  .templates__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── and the rest: nine tiles, three by three ───────────────────────────── */

.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
  text-align: center;
}
/* the app's sticker for the page the tile names (pages/stickers.ts): 48px,
   where the 44px plate and its 10px were, so the words sit where they did */
.tile .stk-slot {
  margin-bottom: 6px;
}
/* its appear waits for the grid to reveal, then the tiles land in turn */
html.js [data-reveal-stagger]:not(.is-in) .stk * {
  animation-play-state: paused;
}
.tile .h4 {
  font-size: 16px;
}
.tile .small {
  max-width: 22em;
  text-wrap: pretty;
}
@media (min-width: 640px) and (max-width: 899.98px) {
  .tile {
    padding: 24px 16px;
  }
}
/* phones: one grouped list (icon | words), not nine tall cards */
@media (max-width: 639.98px) {
  .tiles {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--card);
    overflow: hidden;
  }
  .tile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 2px;
    align-items: center;
    padding: 16px 18px;
    border: 0;
    border-radius: 0;
    background: none;
    text-align: left;
  }
  .tile + .tile {
    border-top: 1px solid var(--line);
  }
  /* the chip starts 3px into the 48px drawing: step back onto the edge */
  .tile .stk-slot {
    grid-row: span 2;
    margin: 0 0 0 -3px;
  }
  .tile .h4 {
    align-self: end;
    font-size: 15px;
  }
  .tile .small {
    align-self: start;
    font-size: 13.5px;
    text-wrap: pretty;
  }
}

/* ── how the beta works ─────────────────────────────────────────────────── */

.steps {
  display: grid;
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.step__mark {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
}
.step__n {
  color: var(--faint);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.step .muted {
  max-width: 22em;
}
/* the thread between the marks, across from iPad portrait up */
@media (min-width: 720px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
  .step:not(:last-child)::after {
    content: '';
    position: absolute;
    z-index: 0;
    top: 28px;
    left: calc(50% + 44px);
    right: calc(-50% + 28px);
    height: 1.5px;
    background: var(--line-strong);
    transform-origin: left center;
  }
  html.js .step::after {
    transition: transform 700ms var(--ease-out);
    transition-delay: calc(350ms + var(--i, 0) * 220ms);
  }
  html.js .steps:not(.is-in) .step::after {
    transform: scaleX(0);
  }
}

/* ── privacy: four promises, two by two ─────────────────────────────────── */

.promises {
  display: grid;
  gap: 32px 48px;
  max-width: 940px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
@media (min-width: 760px) {
  .promises {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.promise {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 18px;
  row-gap: 4px;
  align-content: start;
}
.promise .plate {
  grid-row: span 2;
}
.promise .h4 {
  padding-top: 2px;
  font-size: 16px;
}

/* ── the board teaser ───────────────────────────────────────────────────── */

.board-teaser .section__head .lede {
  margin-inline: auto;
}
.teasers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* iPad portrait: three don't fit a row until ~930px, and 2 + 1 left an empty
   cell — so one centred column until they do */
@media (min-width: 600px) and (max-width: 959.98px) {
  .teasers {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
    margin-inline: auto;
  }
}
.teaser {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
}
.teaser__top {
  --gap: 8px;
}
.teaser__title {
  font-size: 16.5px;
  line-height: 1.4;
  text-wrap: balance;
}
.teaser__title a {
  color: var(--ink);
}
.teaser__foot {
  --gap: 14px;
}
.teasers__empty {
  max-width: 560px;
  margin-inline: auto;
  padding: 40px 20px;
}
.teasers__empty .i {
  color: var(--faint);
}
.board-teaser__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 26px;
  margin-top: clamp(32px, 4vw, 44px);
}

/* ── FAQ ────────────────────────────────────────────────────────────────── */

.faq__list {
  border-top: 1px solid var(--line);
}
.faq__more {
  margin-top: 28px;
  text-align: center;
}

/* ── the close ──────────────────────────────────────────────────────────── */

.closing__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.closing__mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 6px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.closing__inner .lede {
  margin-top: -4px;
}
.closing__doors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
}

/* ── the one-message pages ──────────────────────────────────────────────── */

.letter {
  padding-block: clamp(48px, 9vw, 112px) clamp(72px, 11vw, 136px);
}
.letter__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.letter__glyph {
  position: relative;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--tone-bg);
  color: var(--tone);
}
/* "You're in": the ticket sticker where the other letters draw their glyph */
.letter__sticker {
  margin-bottom: 8px;
}
.letter__glyph::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--tone);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.letter__title {
  font-size: clamp(40px, 7vw, 64px);
}
.letter__body {
  display: grid;
  gap: 12px;
  justify-items: center;
}
.letter__body .lede {
  max-width: 30em;
  text-wrap: balance;
}
.letter__body .small {
  max-width: 34em;
}
.letter__em {
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.letter__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}
.letter__actions form {
  display: flex;
}
.letter__aside {
  max-width: 32em;
  text-wrap: pretty;
}

/* the glyph draws itself, stroke by stroke, then a ring leaves it once */
html.js .letter__glyph path {
  stroke-dasharray: 1;
  animation: letter-draw 820ms var(--ease-out) backwards;
  animation-delay: calc(260ms + var(--d, 0) * 240ms);
}
html.js .letter__glyph::after {
  animation: letter-ring 1500ms var(--ease-out) 900ms both;
}
@keyframes letter-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes letter-ring {
  from {
    opacity: 0.6;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.45);
  }
}

/* ── reduced motion: everything drawn, nothing moving ───────────────────── */

@media (prefers-reduced-motion: reduce) {
  html.js .dash__pin,
  html.js .dash__text,
  html.js .step::after {
    opacity: 1 !important;
    transform: none !important;
  }
  html.js .show__panel {
    opacity: 1 !important;
    transform: none !important;
  }
  html.js .dash__head {
    opacity: 1 !important;
  }
  html.js .dash__ledger {
    clip-path: none !important;
  }
  html.js .dash__canvas.is-in .dash__halo,
  html.js .letter__glyph::after {
    animation: none !important;
  }
  html.js .letter__glyph path {
    animation: none !important;
    stroke-dashoffset: 0;
  }
}