/* boredcrew.com -- the one stylesheet. The marketing page, the three pages App
   Review opens (privacy, terms, support) and nothing else: the link pages
   under /a, /p and /u carry their own.

   Tokens are the brand block's, exactly; the system is docs/website/DESIGN.md
   and the motion rules docs/website/MOTION.md. The app runs on SF Pro at phone
   sizes; the site runs on Inter, self-hosted, and keeps everything else. */

@font-face {
  font-family: 'Inter';
  src: url('/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('/fonts/nunito-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* The fallback while Inter loads, sized to Inter's metrics so the swap moves
   nothing: Arial on Apple and Windows, Roboto on Android. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('Roboto'), local('Helvetica Neue');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

:root {
  /* Core */
  --page: #ffffff;
  --ink: #000000;
  --ink-2: #60646c;
  --element: #f0f0f3;
  --border: #dddee3;
  --indicator: #b9bbc1; /* marks only, never words */
  --fill: #111113;
  --on-fill: #ffffff;
  --ember: #c2410c;
  --ember-deep: #7a2d0b;
  --coral: #ff8a65;
  --on-coral: #111113;
  --graphite: #2a2a31;
  --paper: #fef6ec;
  --going: #1f7a4c;
  --called-off: #c0362c;

  /* The dark band */
  --night: #111113;
  --night-card: #1c1c1e;
  --night-ink-2: #98989f;

  /* The five washes, each with its own ink */
  --wash-ember: #fbe4d3;
  --ink-ember: #c2410c;
  --wash-amber: #f8e9b8;
  --ink-amber: #7a5a0e;
  --wash-sky: #d7e7f5;
  --ink-sky: #1f5a87;
  --wash-violet: #e5ddf2;
  --ink-violet: #574089;
  --wash-rose: #f7dcdc;
  --ink-rose: #a63232;

  /* The six plan colours. Never a seventh. */
  --plan-blush: #f5d6d4;
  --plan-peach: #fadfcc;
  --plan-butter: #f9e7b2;
  --plan-mint: #d1ecde;
  --plan-sky: #d0e6f6;
  --plan-lilac: #dfd7f1;

  /* Glass */
  --glass-drawn: rgba(255, 255, 255, 0.82); /* over a drawing: near-black ink */
  --glass-photo: rgba(255, 255, 255, 0.16); /* over a photo: white ink, dark scrim */

  /* Shape */
  --radius-pill: 999px;
  --radius-poster: 26px;
  --radius-card: 20px;
  --radius-row: 16px;
  --radius-field: 12px;

  /* Lift */
  --lift-card: 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 20px rgba(0, 0, 0, 0.04);
  --lift-raised: 0 10px 16px rgba(0, 0, 0, 0.07);

  /* Type: Inter only; the wordmark is Nunito */
  --font-sans: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-wordmark: 'Nunito', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
  --fs-display: 72px;
  --lh-display: 1;
  --tr-display: -0.03em;
  --fs-headline: 44px;
  --lh-headline: 1.05;
  --tr-headline: -0.025em;
  --fs-title: 24px;
  --lh-title: 1.2;
  --tr-title: -0.01em;
  --fs-body: 18px;
  --lh-body: 1.55;
  --fs-small: 15px;
  --lh-small: 1.5;
  --fs-kicker: 12px;
  --lh-kicker: 1.3;
  --tr-kicker: 0.12em;
  --fs-button: 17px;
  --measure: 60ch;

  /* Space: the app's grid, doubled up for the web */
  --gutter: 24px;
  --column: 1200px;
  --head: 92px; /* the header's height, which a pinned stage keeps clear */

  /* Motion: has a job, springy without overshoot, transform and opacity
     only, comes to rest. */
  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-press: 120ms;
  --dur-reveal: 600ms;
  --stagger: 60ms;
  --rise: 24px;
}

@media (max-width: 640px) {
  :root {
    --fs-display: 44px;
    --fs-headline: 32px;
    --fs-body: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-press: 0ms;
    --dur-reveal: 0ms;
    --stagger: 0ms;
    --rise: 0px;
  }
}

/* Base */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
img,
video,
canvas {
  display: block;
  max-width: 100%;
}
picture {
  display: block;
}
h1,
h2,
h3,
p,
ul,
ol,
dl {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
a {
  color: var(--ember);
  text-decoration: none;
}
a:hover {
  color: var(--ember-deep);
}
:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}
.band :focus-visible {
  outline-color: var(--coral);
}

/* Type */
.kicker {
  font: 700 var(--fs-kicker) / var(--lh-kicker) var(--font-sans);
  letter-spacing: var(--tr-kicker);
  text-transform: uppercase;
  color: var(--ember);
}
.kicker.dot {
  display: flex;
  align-items: center;
  gap: 6px;
}
.kicker.dot::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: currentColor;
  flex: none;
}
.display {
  font: 700 var(--fs-display) / var(--lh-display) var(--font-sans);
  letter-spacing: var(--tr-display);
}
.headline {
  font: 700 var(--fs-headline) / var(--lh-headline) var(--font-sans);
  letter-spacing: var(--tr-headline);
  text-wrap: balance;
}
.title {
  font: 600 var(--fs-title) / var(--lh-title) var(--font-sans);
  letter-spacing: var(--tr-title);
}
.body {
  font: 400 var(--fs-body) / var(--lh-body) var(--font-sans);
  max-width: var(--measure);
  text-wrap: pretty;
}
.small {
  font: 500 var(--fs-small) / var(--lh-small) var(--font-sans);
}
.ink-2 {
  color: var(--ink-2);
}
.wordmark {
  font-family: var(--font-wordmark);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Buttons: every one a pill */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius-pill);
  font: 600 var(--fs-button) / 22px var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
  transition:
    opacity var(--dur-press) var(--ease-settle),
    transform var(--dur-press) var(--ease-settle);
}
.pill:hover {
  opacity: 0.88;
}
.pill:active {
  opacity: 0.7;
  transform: scale(0.98);
}
.pill-primary,
.pill-primary:hover {
  background: var(--fill);
  color: var(--on-fill);
}
.pill-warm,
.pill-warm:hover {
  background: var(--coral);
  color: var(--on-coral);
}
.pill-quiet,
.pill-quiet:hover {
  background: var(--page);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--border);
}
.badge {
  display: flex;
  align-items: center;
  min-height: 44px;
}
.badge img {
  width: 156px;
  height: 52px;
}

/* Layout */
.wrap {
  width: min(var(--column), 100% - 2 * var(--gutter));
  margin-inline: auto;
}
.ch {
  padding-block: 144px;
}
.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.split {
  display: grid;
  grid-template-columns: 560px minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}
.ground-paper {
  background: var(--paper);
}
.ground-ember {
  background: var(--wash-ember);
}
.ground-violet {
  background: var(--wash-violet);
}
.band {
  background: var(--night);
  color: #ffffff;
}
main > section {
  content-visibility: auto;
  contain-intrinsic-size: auto 1000px;
}
main > section:first-child,
main > section:has(~ .t5),
main > section.t6 {
  /* The chapters above the pinned sequence render at load: a placeholder
     stands 500 to 850px taller than the chapter it stands for, so as each
     rendered on the way down the pin moved up and the sequence's scroll
     trigger, measured at load, was 60% through when the pin reached the
     top (2026-10-25). They are small; the chapters after the pin keep the
     placeholder. Chapter 6 is pinned too, so it is laid out for real: its
     trigger is measured from its own pin, which a 1000px placeholder would
     hold at the wrong height. */
  content-visibility: visible;
}

/* Face: a disc on one wash carrying one of the five drawn heads */
.face {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  overflow: hidden;
}
.face img {
  width: 80%;
  height: 80%;
}
.face.f56 {
  width: 56px;
  height: 56px;
}
.face.f18 {
  width: 18px;
  height: 18px;
}
.w-ember {
  background: var(--wash-ember);
}
.w-amber {
  background: var(--wash-amber);
}
.w-sky {
  background: var(--wash-sky);
}
.w-violet {
  background: var(--wash-violet);
}
.w-rose {
  background: var(--wash-rose);
}

/* Header: two pre-rendered grounds cross-faded by opacity */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--head);
  margin-bottom: calc(-1 * var(--head));
}
.site-header .bg {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 300ms var(--ease-settle);
  pointer-events: none;
}
.site-header .bg-glass {
  background: var(--glass-drawn);
  box-shadow: inset 0 -1px 0 var(--border);
}
.site-header .bg-dark {
  background: var(--night);
  box-shadow: inset 0 -1px 0 var(--night-card);
}
.site-header[data-state='glass'] .bg-glass,
.site-header[data-state='dark'] .bg-dark {
  opacity: 1;
}
.site-header .wrap {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: var(--ink);
}
.brand:hover {
  color: var(--ink);
}
.brand .wordmark {
  font-size: 24px;
}
/* The app icon beside the wordmark */
.brand-icon {
  width: 48px;
  height: 48px;
  border-radius: 11px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}
.site-nav a:not(.pill) {
  font: 500 15px/1.5 var(--font-sans);
  color: var(--ink);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.site-header[data-state='dark'] .brand,
.site-header[data-state='dark'] .site-nav a:not(.pill) {
  color: #ffffff;
}
.site-header[data-state='dark'] .pill-primary {
  background: #ffffff;
  color: var(--fill);
}
/* On a page with no hero the header stands still, on white, with a hairline */
.site-header.solid {
  position: static;
  margin-bottom: 0;
  background: var(--page);
  box-shadow: inset 0 -1px 0 var(--border);
}

/* 1 Hero: the wall. The words at the start; New plan's rows of cover
   drawings at the end, out to the window. The rows play one entrance on
   load, then the sweep runs; then nothing moves but a card under the
   pointer. */
.hero {
  position: relative;
  overflow: hidden;
  min-height: max(720px, 100svh);
  padding: calc(var(--head) + 24px) 0 56px;
  display: flex;
  align-items: center;
}
.hero > .wrap {
  display: grid;
  grid-template-columns: 520px minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  min-height: 560px;
}
.hero .words {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}
.sweep {
  max-width: 520px;
}
.sweep h1 {
  font: 800 var(--fs-display) / 1 var(--font-sans);
  letter-spacing: -0.03em;
  color: #000;
}
/* The sweep is the headline's own background, clipped to its letters, two
   periods across a 200% image so moving it one box is seamless. It moves by
   background-position, once, on load: a departure from MOTION.md, which asks
   for transform, and the one way to clip it to the text without a blend (the
   blended ramp it replaced left its box showing on the paper, a hairline
   round it and the descenders under it in black). */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .sweep h1 {
    color: transparent;
    background: linear-gradient(
        100deg,
        #7a2d0b,
        #c2410c 12.5%,
        #ff8a65 25%,
        #c2410c 37.5%,
        #7a2d0b 50%,
        #c2410c 62.5%,
        #ff8a65 75%,
        #c2410c 87.5%,
        #7a2d0b
      )
      0 0 / 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    padding-bottom: 0.14em;
    margin-bottom: -0.14em;
  }
}
.hero .body {
  margin-top: 24px;
  max-width: 30ch;
  color: var(--ink-2);
}
.hero .calls {
  margin-top: 36px;
  display: flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  gap: 12px;
}
.hero .fine {
  margin-top: 18px;
}
/* The App Store call is Apple's badge whole, as its marketing guidelines
   ask: the design's black pill carrying the badge's lettering without its
   frame was a modified badge (2026-10-25). See how it works takes the
   badge's shape beside it instead: its height and its corner, Apple's 9 in
   40, so the two read as a pair. On the phone both stand 44 tall, the badge
   above Apple's 40 minimum and the button at the tap target. */
.hero .calls .pill {
  height: 52px;
  border-radius: 12px;
}
@media (max-width: 640px) {
  .hero .calls {
    gap: 10px;
  }
  .hero .badge img {
    width: 132px;
    height: 44px;
  }
  .hero .calls .pill {
    height: 44px;
    padding: 0 16px;
    border-radius: 10px;
  }
}

/* A card: the drawing on its own pastel, its name under it */
.wc {
  margin: 0;
  flex: none;
  width: var(--cw, 270px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wc img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-card);
}
.wc figcaption {
  font: 600 15px/1.3 var(--font-sans);
  text-align: center;
}

/* The wall: three rows at the end, out to the window's edge, their start
   faded into the paper so no card is cut against the words. The fade is
   the paper laid over them and the clip is overflow, not a mask: tried
   against a line Rany saw left above a card after its lift (2026-10-25),
   which no capture here reproduced, so not known to be the fix. */
.wall {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(max(var(--gutter), (100% - var(--column)) / 2) + 560px);
  right: 0;
  overflow: hidden;
  padding-top: var(--head);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
}
.wall::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 120px;
  z-index: 1;
  background: linear-gradient(90deg, var(--paper), transparent);
  pointer-events: none;
}
.wall-row {
  display: flex;
  gap: 20px;
  width: max-content;
  transform: translateX(var(--o, 0px));
}
.wall-row:nth-child(1) {
  --o: 24px;
}
.wall-row:nth-child(2) {
  --o: -116px;
}
.wall-row:nth-child(3) {
  --o: -36px;
}

/* Under 1000: the words first, the rows under them, edge to edge */
@media (max-width: 999px) {
  .hero {
    min-height: 0;
    display: block;
    padding-top: calc(var(--head) + 32px);
  }
  .hero > .wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    min-height: 0;
  }
  .hero .words {
    align-items: center;
    text-align: center;
  }
  .hero .calls {
    margin-inline: auto;
  }
  .wc {
    --cw: 168px;
    gap: 8px;
  }
  .wc img {
    border-radius: var(--radius-row);
  }
  .wc figcaption {
    font-size: 13px;
  }
  .wall {
    position: relative;
    left: auto;
    padding: 0;
    margin-top: 48px;
    gap: 16px;
    align-items: center;
    overflow: visible;
  }
  .wall::before {
    display: none;
  }
  .wall-row {
    gap: 12px;
  }
  /* A brick pattern about the middle: a card on the centre line in the first
     and third rows, a gap on it in the second */
  .wall-row:nth-child(1) {
    --o: 90px;
  }
  .wall-row:nth-child(2) {
    --o: 0px;
  }
  .wall-row:nth-child(3) {
    --o: -90px;
  }
}

/* The entrance: once, on load, the rows first and the sweep after them, so
   one thing moves at a time. Transform and opacity only for the rows; the
   page without it is the still. */
@keyframes wall-row {
  from {
    opacity: 0;
    transform: translateX(calc(var(--o, 0px) + 180px));
  }
}
@keyframes sweep {
  from {
    background-position: 100% 0;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .sweep h1 {
    animation: sweep 1400ms var(--ease-settle) 820ms both;
  }
  .wall-row {
    animation: wall-row 760ms var(--ease-settle) both;
  }
  .wall-row:nth-child(2) {
    animation-delay: 60ms;
  }
  .wall-row:nth-child(3) {
    animation-delay: 120ms;
  }
}

/* The light under the pointer (2026-10-25, Rany): once the sweep has run,
   main.js writes where the pointer is across the headline, 0 to 1, as --x,
   and the light eases to it. The sweep's image repeats every headline's
   width, so a light pulled to one end lit the other too; this one is a
   single band in 300%, dark for two widths after it, and at x = 0.5 --
   where it settles when the pointer leaves -- it is 0 0 and draws what the
   sweep left, so taking over changes nothing on screen. background-position
   for the sweep's reason; a cursor follower MOTION.md names, asked for. It
   comes to rest with the pointer. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .sweep h1.follow {
    animation: none;
    background-image: linear-gradient(
      100deg,
      #7a2d0b,
      #c2410c 8.333%,
      #ff8a65 16.667%,
      #c2410c 25%,
      #7a2d0b 33.333%
    );
    background-size: 300% 100%;
    background-position: calc(25% - var(--x, 0.5) * 50%) 0;
    transition: background-position 600ms var(--ease-settle);
  }
}

/* A card under the pointer stands forward a little and settles back as the
   pointer moves on (2026-10-25, Rany). Transform only, quicker out than
   back; 1.06 of a card is less than half the gap either side, so two
   neighbours, one rising and one settling, never touch. A mouse only: a
   tap on a phone has nothing to hover. Each card is its own layer for
   good, so a lift never paints the wall under it again (tried against the
   same line as the wall's fade). */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .wc {
    transition: transform 420ms var(--ease-settle);
    will-change: transform;
  }
  .wc:hover {
    transform: translateY(-6px) scale(1.06);
    transition-duration: 220ms;
  }
}

/* 2 How it works: one pinned chapter, four steps, in the app's own screens in
   iPhone frames (js/how.js). Every phone is drawn at the
   app's points -- a 440 × 956 screen -- and scaled by one transform: --s on
   the pin (written by how.js), --fit on the stills (set here). */

.h2 {
  --h2-col: max(var(--gutter), (100vw - var(--column)) / 2);
  --h2-words: min(400px, 32vw);
  padding-bottom: 0;
}
/* No band of its own above the stage: the chapter's kicker and headline
   stand in it, over the dots, and stay put while each step's words ride
   their slide. The stills carry the real h2. */
.h2-on .h2 {
  padding-top: 0;
}
.h2-chapter {
  margin-bottom: 48px;
}
/* On one line: the words are 9.6em wide, so the headline shrinks to the
   column rather than wrap. A change to the words changes the 9.6. */
.h2-chapter .headline {
  white-space: nowrap;
  font-size: min(var(--fs-headline), var(--h2-words) / 9.6);
}

/* The pin: only once how.js has said it runs (html.h2-on). 902vh: the 852vh
   of beats, less the 50 of the rise (run while the stage's top climbs the
   lower half of the screen), plus the one screen the stage itself is. */
.h2-pin {
  display: none;
  position: relative;
  height: 902vh;
}
.h2-on .h2-pin {
  display: block;
}
.h2-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--page);
}

/* The slides: one per step, side by side, each on a wash of the app's
   (constants/theme.ts) with its ink for the kicker. A step change moves the
   whole slide right to left, its words with it (how.js). */
.h2-slides {
  position: absolute;
  inset: 0;
}
.h2-slide {
  position: absolute;
  inset: 0;
  background: var(--h2-tint);
}
.h2-slide + .h2-slide {
  visibility: hidden;
}
.h2-s0,
.h2-step:nth-child(1) {
  --h2-tint: var(--wash-sky);
  --h2-ink: var(--ink-sky);
}
.h2-s1,
.h2-step:nth-child(2) {
  --h2-tint: var(--paper);
  --h2-ink: var(--ink-ember);
}
.h2-s2,
.h2-step:nth-child(3) {
  --h2-tint: var(--wash-violet);
  --h2-ink: var(--ink-violet);
}
.h2-step .kicker {
  color: var(--h2-ink);
}
.h2-words {
  position: absolute;
  inset-inline-start: var(--h2-col);
  top: calc(50% + var(--head) / 2);
  width: var(--h2-words);
  transform: translateY(-50%);
  transform-origin: 0 50%;
  z-index: 30;
}
[dir='rtl'] .h2-words {
  transform-origin: 100% 50%;
}
.h2-dots {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
}
.h2-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0.18;
}
.h2-dots i:first-child {
  opacity: 0.9;
}
.h2-steps {
  display: grid;
}
.h2-step {
  grid-area: 1 / 1;
  opacity: 0;
}
.h2-step:first-child {
  opacity: 1;
}
.h2-title {
  margin-top: 12px;
  font: 700 34px / 1.1 var(--font-sans);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.h2-title + .body {
  margin-top: 16px;
  font-size: 17px;
}

/* The beats: two stacked spans, cross-faded by opacity -- never a colour
   transition. */
.h2-beats {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.h2-beats li {
  display: grid;
  font: 600 16px / 22px var(--font-sans);
}
.h2-beats li > span {
  grid-area: 1 / 1;
}
.h2-beats .rest {
  color: var(--ink-2);
}
.h2-beats .live {
  color: var(--ink);
  opacity: 0;
}
.h2-beats li:first-child .live {
  opacity: 1;
}
/* Step 2's list: the five statuses as the app's cards, each on its wash with
   its ink; the one picked takes a ring of its ink, faded in by opacity. */
.h2-sts {
  gap: 8px;
}
.h2-sts li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--sw);
}
.h2-sts .live {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px var(--sc);
}
.h2-sk {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 700 12px / 16px var(--font-sans);
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--sc);
}
.h2-sk::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sc);
}
.h2-sq {
  font: 600 18px / 24px var(--font-sans);
  letter-spacing: -0.2px;
  color: var(--ink);
  text-wrap: pretty;
}
.st-bored {
  --sw: var(--wash-ember);
  --sc: var(--ink-ember);
}
.st-down_for_anything {
  --sw: var(--wash-amber);
  --sc: var(--ink-amber);
}
.st-out_and_about {
  --sw: var(--wash-sky);
  --sc: var(--ink-sky);
}
.st-recharging {
  --sw: var(--wash-violet);
  --sc: var(--ink-violet);
}
.st-working {
  --sw: var(--wash-rose);
  --sc: var(--ink-rose);
}
.h2-note {
  margin-top: 20px;
  font: 500 15px / 1.5 var(--font-sans);
  color: var(--ink-2);
}
.h2-now {
  display: none;
}

/* The phones' area, one per slide: from the words to the end edge of the
   screen and from the header to the foot, clipped at its start under a fade
   of the slide's wash, so nothing passes under the words or the header. */
.h2-phones {
  position: absolute;
  top: var(--head);
  bottom: 0;
  inset-inline-start: calc(var(--h2-col) + var(--h2-words) + 40px);
  inset-inline-end: 0;
  overflow: hidden;
}
.h2-phones::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  width: 64px;
  background: linear-gradient(to right, var(--h2-tint), transparent);
  z-index: 20;
}
[dir='rtl'] .h2-phones::before {
  background: linear-gradient(to left, var(--h2-tint), transparent);
}
.h2-phones > .hp {
  visibility: hidden;
  opacity: 0;
}
/* Step 2's ring: the statuses' art around the check-in (how.js). */
.h2-art {
  position: absolute;
  left: 0;
  top: 0;
  width: 340px;
  height: 340px;
  transform-origin: 50% 50%;
  visibility: hidden;
  opacity: 0;
}
.h2-near .h2-art.h2-live,
.h2-near .h2-fl.h2-live,
.h2-near .h2-phones > .hp.h2-live {
  will-change: transform, opacity;
}
/* Step 3's crews round the sheet (how.js places them; .fl-b bobs on its own),
   and the same crews laid out as a still (.h2-cloud). A card is the shelf's
   CrewCard: its wash and ink from CrewWashes, the emoji, the name, the counts. */
.h2-fl {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 50% 50%;
  visibility: hidden;
  opacity: 0;
}
.fl-card {
  width: 148px;
  height: 130px;
}
.fl-emo {
  width: 64px;
  height: 64px;
}
.fl-b {
  display: block;
  height: 100%;
  animation: h2-bob 5.2s ease-in-out infinite alternate;
  /* A loop runs only where it can be seen: on a crew that is on the stage,
     while the stage is near. */
  animation-play-state: paused;
}
.h2-near .h2-fl.h2-live .fl-b {
  animation-play-state: running;
}
.fl-card .fl-b {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 14px;
  border-radius: 20px;
  background: var(--cw);
  box-shadow: 0 10px 16px rgba(0, 0, 0, 0.07);
  text-align: left;
  color: #000;
}
.fl-e {
  height: 44px;
}
.fl-card b {
  margin-top: 18px;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 700 17px / 22px var(--font-sans);
  letter-spacing: -0.2px;
}
.fl-k {
  font: 600 13px / 18px var(--font-sans);
  color: var(--ck);
}
.fl-new {
  position: absolute;
  top: 12px;
  right: 12px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #fff;
  color: var(--ck);
  font: 700 10px / 22px var(--font-sans);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.fl-emo .fl-b {
  display: grid;
  place-items: center;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.12));
}
.cw-sky {
  --cw: #d7e7f5;
  --ck: #1f5a87;
}
.cw-amber {
  --cw: #f8e9b8;
  --ck: #7a5a0e;
}
.cw-rose {
  --cw: #f7dcdc;
  --ck: #a63232;
}
.cw-green {
  --cw: #d6ede0;
  --ck: #1f7a4c;
}
.cw-ember {
  --cw: #fbe4d3;
  --ck: #c2410c;
}
.cw-lime {
  --cw: #e3efcb;
  --ck: #4b6414;
}
.cw-violet {
  --cw: #e5ddf2;
  --ck: #574089;
}
.cw-teal {
  --cw: #d3ecea;
  --ck: #1d6461;
}
.h2-fl:nth-child(2n) .fl-b {
  animation-duration: 6.1s;
  animation-delay: -2.3s;
}
.h2-fl:nth-child(3n) .fl-b {
  animation-duration: 4.4s;
  animation-delay: -1.1s;
}
.h2-fl:nth-child(5n) .fl-b {
  animation-duration: 6.8s;
  animation-delay: -3.7s;
}
@keyframes h2-bob {
  from {
    transform: translateY(-7px) rotate(-1deg);
  }
  to {
    transform: translateY(7px) rotate(1deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fl-b {
    animation: none;
  }
}
.h2-cloud {
  position: relative;
  width: calc(471px * var(--fit));
  height: calc(987px * var(--fit));
}
.h2-cloud .h2-fl {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(calc(var(--fit) * 1.2));
}
.h2-cloud .fl-b {
  animation: none;
}
.h2-cloud [data-fl='c0'] {
  left: 27%;
  top: 11%;
  --r: -4deg;
}
.h2-cloud [data-fl='c1'] {
  left: 73%;
  top: 21%;
  --r: 3deg;
}
.h2-cloud [data-fl='c2'] {
  left: 27%;
  top: 35%;
  --r: 3deg;
}
.h2-cloud [data-fl='beach'] {
  left: 73%;
  top: 45%;
  --r: -3deg;
}
.h2-cloud [data-fl='c3'] {
  left: 73%;
  top: 69%;
  --r: 2deg;
}
.h2-cloud [data-fl='c4'] {
  left: 27%;
  top: 59%;
  --r: -2deg;
}
.h2-cloud [data-fl='c5'] {
  left: 27%;
  top: 83%;
  --r: 3deg;
}
.h2-cloud [data-fl='e0'] {
  left: 75%;
  top: 4%;
  --r: 8deg;
}
.h2-cloud [data-fl='e1'] {
  left: 75%;
  top: 91%;
  --r: -10deg;
}
.h2-cloud [data-fl='e2'],
.h2-cloud [data-fl='e3'],
.h2-cloud [data-fl='e4'] {
  display: none;
}

/* The phone, one component for all of them: a 440 × 956 screen at radius 62,
   13 of bezel, 2.5 of edge, side buttons as an iPhone Pro's. The lift is a
   layer of its own under the body; it moves with the phone and never changes. */
.hp {
  position: absolute;
  left: 0;
  top: 0;
  width: 471px;
  height: 987px;
  transform-origin: 50% 50%;
  direction: ltr;
}
.hp-lift {
  position: absolute;
  inset: 2.5px;
  border-radius: 75px;
  box-shadow:
    0 30px 60px rgba(17, 17, 19, 0.18),
    0 8px 16px rgba(17, 17, 19, 0.1);
}
.hp-edge {
  position: absolute;
  inset: 0;
  border-radius: 77.5px;
  background: var(--graphite);
}
.hp-b {
  position: absolute;
  width: 3px;
  border-radius: 1.5px;
  background: var(--graphite);
}
.hp-b1 {
  left: -2.5px;
  top: 186px;
  height: 34px;
}
.hp-b2 {
  left: -2.5px;
  top: 258px;
  height: 66px;
}
.hp-b3 {
  left: -2.5px;
  top: 342px;
  height: 66px;
}
.hp-b4 {
  right: -2.5px;
  top: 290px;
  height: 106px;
}
.hp-body {
  position: absolute;
  inset: 2.5px;
  border-radius: 75px;
  background: #050506;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.hp-screen {
  position: absolute;
  left: 15.5px;
  top: 15.5px;
  width: 440px;
  height: 956px;
  border-radius: 62px;
  overflow: hidden;
  background: #fff;
  isolation: isolate;
}
.hp-island {
  position: absolute;
  left: 172.5px;
  top: 26.5px;
  width: 126px;
  height: 37px;
  border-radius: 18.5px;
  background: #000;
}

/* The stills: the chapter's head, then four blocks, each its words over a
   row of its phones at rest. */
.h2-shead {
  margin-bottom: 72px;
}
.h2-on .h2-stills {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.h2-blocks {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 112px;
}
.h2-block {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  align-items: center;
  gap: 64px;
}
.h2-stills .h2-beats .live {
  opacity: 1;
}
.h2-stills .h2-sts .live {
  opacity: 0;
}
.h2-stills .h2-sts li:first-child .live {
  opacity: 1;
}
.h2-row {
  --fit: 0.54;
  display: flex;
  gap: 40px;
  justify-content: center;
}
.h2-fig {
  margin: 0;
  flex: none;
}
.h2-alt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.hp-fit {
  position: relative;
  width: calc(471px * var(--fit));
  height: calc(987px * var(--fit));
}
.hp-fit > .hp {
  transform: scale(var(--fit));
  transform-origin: 0 0;
}

/* ---- The screens, at the app's points ---- */
.hs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #fff;
  color: #000;
  font-family: var(--font-sans);
  line-height: 1.3;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.hs p,
.hs h4,
.hs h5,
.hs dl,
.hs dd {
  margin: 0;
}
.hs img {
  display: block;
}
.hs-bar {
  position: absolute;
  left: 0;
  top: 0;
  width: 440px;
  height: 62px;
  color: #000;
  --batt: #fff;
  z-index: 3;
}
.hs-bar.on-dark {
  color: #fff;
  --batt: #000;
}
.hs-time {
  position: absolute;
  left: 46px;
  top: 20px;
  width: 90px;
  text-align: center;
  font: 600 17px / 24px var(--font-sans);
  letter-spacing: -0.2px;
}
.hs-marks {
  position: absolute;
  left: 304px;
  top: 25.5px;
  height: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.hs-sig {
  fill: currentColor;
}
.hs-wifi {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}
.hs-batt {
  position: relative;
  width: 26px;
  height: 13px;
  border-radius: 4px;
  background: currentColor;
  text-align: center;
  font: 700 10px / 13px var(--font-sans);
}
.hs-batt b {
  color: var(--batt);
}
.hs-batt::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 4.5px;
  width: 1.5px;
  height: 4px;
  border-radius: 0 1px 1px 0;
  background: currentColor;
  opacity: 0.45;
}
.hs-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 54px;
  border-radius: 999px;
  font: 600 17px / 1 var(--font-sans);
  background: #f0f0f3;
  color: #60646c;
}
.hs-btn-1 {
  background: #111113;
  color: #fff;
}
.hs-btn-2 {
  background: #f0f0f3;
  color: #000;
}
.hs-k {
  font: 700 12px / 16px var(--font-sans);
  letter-spacing: 1.3px;
  text-transform: uppercase;
}
.mk-plus,
.mk-tick,
.mk-people,
.mk-search,
.mk-s {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mk-f {
  fill: currentColor;
}
.mk-w {
  fill: #fff;
}
.mk-brand .ring {
  fill: none;
  stroke: var(--graphite);
  stroke-width: 5;
}
.mk-brand .disc {
  fill: var(--ember);
}

/* SHEET: the panel rising, the screen dimmed under it. */
.hs-sheet {
  position: absolute;
  inset: 0;
  z-index: 6;
}
.sh-dim {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 19, 0.45);
  opacity: 0;
}
.sh-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  padding: 8px 24px 58px;
  border-radius: 20px 20px 0 0;
  background: #fff;
  transform: translateY(100%);
}
.sh-up .sh-dim {
  opacity: 1;
}
.sh-up .sh-panel {
  transform: none;
}
.sh-grab {
  align-self: center;
  width: 38px;
  height: 5px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: #dddee3;
}
.sh-head {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sh-title {
  font: 600 19px / 24px var(--font-sans);
  letter-spacing: -0.2px;
}
.sh-x,
.sc-x,
.ci-not {
  font: 500 15px / 20px var(--font-sans);
  color: #60646c;
}
/* 1 · The You tab (the screenshot), its card DOM over it, the banner. */
.hs-shot {
  position: absolute;
  inset: 0;
  width: 440px;
  height: 956px;
}
.hs-hole,
.hs-card {
  position: absolute;
  left: 24px;
  top: 86px;
  width: 392px;
  height: 260px;
}
.hs-hole {
  margin: -2px;
  width: 396px;
  height: 264px;
  background: #fff;
}
.pc-face {
  position: absolute;
  inset: 0;
  border-radius: 26px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.pc-front {
  background: url('assets/how/how-1-you-front.jpg') -24px -86px / 440px 956px no-repeat;
}
.pc-back {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  background: var(--wash-sky);
  box-shadow: inset 0 0 0 0.5px #dddee3;
  opacity: 0;
  transform: perspective(1400px) rotateY(180deg);
}
.pc-turned .pc-front {
  opacity: 0;
}
.pc-turned .pc-back,
.sc-pic .pc-back {
  opacity: 1;
  transform: none;
}
.pc-kick {
  font: 700 12px / 16px var(--font-sans);
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--ink-sky);
}
.pc-qr {
  display: block;
  padding: 12px;
  border-radius: 12px;
  background: #fff;
}
.pc-code {
  font:
    600 14px / 20px ui-monospace,
    'SF Mono',
    Menlo,
    monospace;
  letter-spacing: 1.5px;
  color: var(--ink-sky);
}
/* The banner: the island grown into a card, by clip-path (the one MOTION.md
   allows), from the island's 126 × 37 to the card's 392 × 176. */
.hs-banner {
  position: absolute;
  left: 24px;
  top: 11px;
  width: 392px;
  height: 176px;
  border-radius: 30px;
  background: #000;
  clip-path: inset(0 133px 139px 133px round 18.5px);
  z-index: 4;
}
.bn-open {
  clip-path: inset(0 round 30px);
}
.bn-in {
  opacity: 0;
}
.bn-open .bn-in {
  opacity: 1;
}
.bn-in .hs-bar {
  left: -24px;
  top: -11px;
}
.bn-row {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.bn-lead {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 2px;
  border: 2px solid var(--wash-sky);
  border-radius: 50%;
}
.bn-lead > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--wash-amber);
}
.bn-lead img {
  width: 30px;
  height: 30px;
}
.bn-tile {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--wash-sky);
  color: var(--ink-sky);
}
.bn-words {
  flex: 1;
  min-width: 0;
}
.bn-kick {
  font: 700 11px / 16px var(--font-sans);
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--wash-sky);
}
.bn-head {
  font: 600 15px / 20px var(--font-sans);
  color: #fff;
}
.bn-line {
  font: 500 13px / 18px var(--font-sans);
  color: rgba(255, 255, 255, 0.66);
}
.bn-end {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--wash-sky);
}
.bn-pill {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 116px;
  height: 38px;
  border-radius: 999px;
  background: var(--wash-sky);
  color: var(--ink-sky);
  text-align: center;
  font: 600 14px / 38px var(--font-sans);
}
.bn-sky {
  height: 126px;
}

/* 1 · Scan a code, and Add people rising over it. */
.sc-head {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 66px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.sc-title,
.ci-title {
  font: 600 32px / 38px var(--font-sans);
  letter-spacing: -0.4px;
}
.sc-title {
  position: absolute;
  left: 24px;
  top: 122px;
}
.sc-view {
  position: absolute;
  left: 24px;
  top: 188px;
  width: 392px;
  height: 392px;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
}
.sc-cam {
  position: absolute;
  inset: 0;
  background: #121214;
}
.sc-pic {
  position: absolute;
  left: 0;
  top: 66px;
  width: 392px;
  height: 260px;
  transform: scale(0.92);
}
.sc-vig {
  position: absolute;
  inset: 0;
  background: radial-gradient(transparent 55%, rgba(0, 0, 0, 0.45));
}
.sc-hint {
  position: absolute;
  left: 48px;
  right: 48px;
  top: 604px;
  text-align: center;
  font: 500 14px / 20px var(--font-sans);
  color: #60646c;
}
.sc-type {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 58px;
}
.h2-phones .sh-code {
  display: none;
}
.ap-answer {
  display: grid;
  height: 304px;
  margin-top: 16px;
}
.ap-answer > div {
  grid-area: 1 / 1;
}
.ap-ticket {
  position: relative;
  height: 260px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border-radius: 26px;
  background: var(--wash-ember);
}
.ap-kick {
  font: 700 12px / 16px var(--font-sans);
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--ink-ember);
}
.ap-code {
  font:
    700 34px / 40px ui-monospace,
    'SF Mono',
    Menlo,
    monospace;
  letter-spacing: 2px;
  color: var(--ember-deep);
}
.ap-tear {
  position: relative;
  height: 22px;
  margin: 8px -24px 0;
  background:
    radial-gradient(circle at 0 50%, #fff 11px, transparent 11.5px),
    radial-gradient(circle at 100% 50%, #fff 11px, transparent 11.5px);
}
.ap-tear::before {
  content: '';
  position: absolute;
  left: 20px;
  right: 20px;
  top: 10px;
  border-top: 1.5px dashed rgba(194, 65, 12, 0.35);
}
.ap-body {
  margin-top: auto;
  font: 500 15px / 22px var(--font-sans);
  color: var(--ember-deep);
}
.ap-added {
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
}
.ap-done .ap-ticket {
  opacity: 0;
}
.ap-done .ap-added {
  opacity: 1;
}
.ap-card {
  height: 260px;
  border-radius: 26px;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 0.5px #dddee3;
}
.ap-cover {
  height: 176px;
  overflow: hidden;
  background: #1b2233;
}
.ap-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 52%;
}
.ap-id {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
}
.ap-face {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: url('assets/how/how-1-you-front.jpg') -41px -278px / 440px 956px no-repeat;
}
.ap-name {
  font: 600 19px / 23px var(--font-sans);
}
.ap-handle {
  font: 500 14px / 20px var(--font-sans);
  color: #60646c;
}
.ap-ok {
  align-self: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--plan-mint);
  color: var(--going);
  font: 600 14px / 32px var(--font-sans);
}
.ap-field {
  height: 54px;
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-radius: 16px;
  background: #f0f0f3;
}
.ap-chip {
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--wash-ember);
  color: var(--ink-ember);
  font: 700 11px / 26px var(--font-sans);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.ap-val {
  font:
    600 17px / 1 ui-monospace,
    'SF Mono',
    Menlo,
    monospace;
  letter-spacing: 1px;
}
.ap-use {
  margin-top: 12px;
}

/* 2 · The check-in (status.tsx), drawn so its rail can move. Five washes,
   five figures, five inks, stacked and cross-faded by opacity. */
.ci-w {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.ci-w0 {
  background: var(--wash-ember);
  opacity: 1;
}
.ci-w1 {
  background: var(--wash-amber);
}
.ci-w2 {
  background: var(--wash-sky);
}
.ci-w3 {
  background: var(--wash-violet);
}
.ci-w4 {
  background: var(--wash-rose);
}
.ci-head {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 86px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ci-not {
  font-size: 14px;
}
.ci-title {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 154px;
}
.ci-sub {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 200px;
  font: 500 16px / 24px var(--font-sans);
  color: #60646c;
}
.ci-stage {
  position: absolute;
  left: 0;
  right: 0;
  top: 272px;
  height: 322px;
}
.ci-disc {
  position: absolute;
  left: 89px;
  top: 30px;
  width: 262px;
  height: 262px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}
.ci-shadow {
  position: absolute;
  left: 154px;
  top: 284px;
  width: 132px;
  height: 11px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.09);
}
.ci-fig {
  position: absolute;
  left: 72px;
  top: 13px;
  width: 296px;
  height: 296px;
  opacity: 0;
}
.ci-fig0 {
  opacity: 1;
}
.ci-fig video,
.ci-fig img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ci-rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 594px;
  height: 96px;
}
.ci-track {
  display: flex;
  gap: 12px;
  padding-left: 86px;
}
.ci-card {
  position: relative;
  flex: none;
  width: 268px;
  height: 96px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  opacity: 0.5;
  transform: scale(0.92);
}
.ci-c0 {
  opacity: 1;
  transform: none;
}
.cc-bg,
.cc-on,
.cc-ol {
  position: absolute;
  inset: 0;
  border-radius: 16px;
}
.cc-bg {
  background: rgba(255, 255, 255, 0.42);
}
.cc-on {
  background: #fff;
  opacity: 0;
}
.cc-ol {
  box-shadow: inset 0 0 0 2px var(--ci);
  opacity: 0;
}
.ci-c0 .cc-on,
.ci-c0 .cc-ol {
  opacity: 1;
}
.ci-c0 {
  --ci: var(--ink-ember);
}
.ci-c1 {
  --ci: var(--ink-amber);
}
.ci-c2 {
  --ci: var(--ink-sky);
}
.ci-c3 {
  --ci: var(--ink-violet);
}
.ci-c4 {
  --ci: var(--ink-rose);
}
.ci-card > p {
  position: relative;
}
.ci-k {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 700 12px / 16px var(--font-sans);
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--ci);
}
.ci-k::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ci);
}
.ci-n {
  font: 600 21px / 28px var(--font-sans);
}
.ci-l {
  font: 500 14px / 20px var(--font-sans);
  color: #60646c;
}
.ci-foot {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 714px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ci-dots {
  align-self: center;
  display: flex;
  gap: 6px;
}
.ci-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #000;
  opacity: 0.18;
}
.ci-dots i:first-child {
  opacity: 0.9;
}
.ci-live {
  height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ci-ldot {
  position: relative;
  flex: none;
  width: 7px;
  height: 7px;
}
.ci-ldot i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0;
}
.ci-ldot i:nth-child(1),
.ci-ink:nth-child(1) {
  background: var(--ink-ember);
  opacity: 1;
}
.ci-ldot i:nth-child(2),
.ci-ink:nth-child(2) {
  background: var(--ink-amber);
}
.ci-ldot i:nth-child(3),
.ci-ink:nth-child(3) {
  background: var(--ink-sky);
}
.ci-ldot i:nth-child(4),
.ci-ink:nth-child(4) {
  background: var(--ink-violet);
}
.ci-ldot i:nth-child(5),
.ci-ink:nth-child(5) {
  background: var(--ink-rose);
}
.ci-until,
.ci-phones {
  display: grid;
  flex: 1;
  min-width: 0;
  font: 500 14px / 20px var(--font-sans);
}
.ci-until > span,
.ci-phones > span {
  grid-area: 1 / 1;
  opacity: 0;
}
.ci-until > span:first-child,
.ci-phones > span:first-child {
  opacity: 1;
}
.ci-phones {
  min-height: 40px;
  color: #60646c;
}
.ci-chip {
  flex: none;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  font: 500 14px / 36px var(--font-sans);
}
.ci-cta {
  position: relative;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  overflow: hidden;
}
.ci-ink {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.ci-cta-l {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font: 600 17px / 1 var(--font-sans);
}
.ci-cta-l i {
  font-style: normal;
  font-size: 18px;
  opacity: 0.8;
}

/* 2–3 · The Crews tab (crews.tsx, crews-hero.tsx), laid out in flow. At the
   top: the hero on your status's wash, the stories' strip, the headcount.
   Scrolled (.ct-down): the hero gone under the status bar, Your people, Your
   crews, What the crew's up to. */
.ct-page {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
}
.ct-down {
  padding-top: 76px;
}
.ct-bored {
  --ink: #c2410c;
  --wash: #fbe4d3;
}
.ct-out {
  --ink: var(--ink-sky);
  --wash: var(--wash-sky);
}
.ct-rech {
  --ink: var(--ink-violet);
}
.ct-hero {
  flex: none;
  padding-top: 62px;
  border-radius: 0 0 26px 26px;
  overflow: hidden;
  background: var(--wash-rose);
}
.ct-hh {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 24px;
}
.ct-greet {
  flex: 1;
  min-width: 0;
  font: 600 19px / 24px var(--font-sans);
  letter-spacing: -0.2px;
  color: #60646c;
}
.ct-clear {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: #fff;
  color: var(--ember);
  font: 700 14px / 36px var(--font-sans);
}
.ct-bell {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  color: #000;
}
.ct-hb {
  position: relative;
  height: 150px;
}
.ct-fig {
  position: absolute;
  right: 6px;
  bottom: 4px;
  width: 128px;
  height: 128px;
}
.ct-hw {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 6px 158px 0 24px;
}
.ct-kick {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 700 11px / 16px var(--font-sans);
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--ink-rose);
}
.ct-kick::before,
.ct-live i {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-rose);
}
.ct-name {
  font: 600 32px / 38px var(--font-sans);
  letter-spacing: -0.4px;
  color: var(--ink-rose);
  white-space: nowrap;
}
.ct-blurb {
  font: 500 15px / 20px var(--font-sans);
  color: #60646c;
}
.ct-live {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  margin-top: 4px;
  padding: 0 12px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink-rose);
  font: 700 14px / 20px var(--font-sans);
}
.ct-strip {
  display: flex;
  gap: 40px;
  padding: 16px 24px 4px;
}
.ct-ss {
  width: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.ct-post {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1.5px dashed #dddee3;
  border-radius: 50%;
  color: #60646c;
  font: 300 26px / 30px var(--font-sans);
}
.ct-ss b {
  margin-top: 4px;
  font: 700 14px / 20px var(--font-sans);
  color: #60646c;
}
.ct-count {
  margin-top: 22px;
  padding: 0 24px;
}
.ct-ht {
  font: 800 44px / 46px var(--font-sans);
  letter-spacing: -1.4px;
}
.ct-ht em {
  font-style: normal;
  color: var(--ember);
}
.ct-hint {
  margin-top: 10px;
  font: 500 15px / 20px var(--font-sans);
  color: #60646c;
}
.ct-tiles {
  display: flex;
  gap: 8px;
  padding: 18px 16px 0;
}
.ct-tile {
  width: calc((440px - 48px) / 3);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 11.5px 3.5px 9.5px;
  border: 2.5px solid var(--wash);
  border-radius: 20px;
  background: var(--wash);
}
.ct-tface {
  width: 64px;
  height: 64px;
  border: 3px solid #fff;
  border-radius: 50%;
  overflow: hidden;
}
.ct-tface img {
  width: 58px;
  height: 58px;
}
.ct-tile b {
  margin-top: 8px;
  font: 700 15px / 20px var(--font-sans);
}
.ct-tile span:last-child {
  font: 600 12px / 16px var(--font-sans);
  color: var(--ink);
}
.ct-section {
  margin-top: 32px;
}
.ct-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 24px 12px;
}
.ct-sh {
  align-items: baseline;
  margin-bottom: 10px;
}
.ct-sec {
  font: 700 19px / 24px var(--font-sans);
  letter-spacing: -0.2px;
}
.ct-who {
  font: 600 15px / 20px var(--font-sans);
  color: #60646c;
}
.ct-link {
  margin-left: auto;
  font: 700 14px / 20px var(--font-sans);
  color: var(--ember);
}
/* The two dashed cards that add: on the ember's glass, in its dashes. */
.ct-add,
.ct-new {
  border: 1.5px dashed var(--ember);
  border-radius: 20px;
  background: rgba(194, 65, 12, 0.08);
}
.ct-add {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 24px 14px;
  padding: 14.5px;
}
.ct-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.5px dashed var(--ember);
  border-radius: 14px;
  color: #60646c;
  font: 300 22px / 26px var(--font-sans);
}
.ct-aw {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ct-aw b,
.ct-new b,
.ct-crew b {
  font: 700 17px / 22px var(--font-sans);
  letter-spacing: -0.2px;
}
.ct-aw span,
.ct-new span:last-child {
  font: 500 13px / 18px var(--font-sans);
  color: #60646c;
}
.ct-box {
  display: grid;
  grid-template-columns: repeat(4, 88px);
  gap: 16px 8px;
  margin: 0 24px;
  padding: 16px 8px;
  border-radius: 20px;
  background: #f0f0f3;
}
.ct-gf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.ct-gface {
  position: relative;
  width: 60px;
  height: 60px;
}
.ct-gface img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.ct-gface i {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  border: 3px solid #f0f0f3;
  border-radius: 50%;
  background: var(--ink);
}
.ct-gf b {
  margin-top: 4px;
  font: 700 13px / 18px var(--font-sans);
}
.ct-gf > span:last-child {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 600 11px / 14px var(--font-sans);
  color: var(--ink);
}
.ct-quiet .ct-gface {
  opacity: 0.55;
}
.ct-quiet .ct-gface i {
  background: #dddee3;
}
.ct-quiet > span:last-child {
  color: #60646c;
}
.ct-shelf {
  display: flex;
  gap: 10px;
  padding: 0 24px;
}
.ct-new,
.ct-crew,
.ct-ghost {
  flex: none;
  position: relative;
  width: 148px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ct-new {
  padding: 14.5px;
}
.ct-new b {
  margin-top: 18px;
}
.ct-crew {
  padding: 11.5px;
  border: 2.5px solid var(--wash-sky);
  border-radius: 20px;
  background: var(--wash-sky);
}
.ct-badge {
  position: absolute;
  top: 9.5px;
  right: 9.5px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink-sky);
  font: 700 10px / 22px var(--font-sans);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.ct-emoji {
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
/* The crews' emoji are pictures (Fluent Emoji 3D, web/source/emoji/), so a
   screen with no colour emoji font of its own does not draw them in black. */
.fl-e img,
.fl-emo img,
.cs-em img,
.cs-badge img {
  display: block;
}
.ct-emoji {
  font-size: 40px;
  line-height: 44px;
}
.ct-crew b {
  margin-top: 18px;
}
.ct-counts {
  font: 600 13px / 18px var(--font-sans);
  color: var(--ink-sky);
}
.ct-faces {
  display: flex;
  align-items: center;
  min-height: 32px;
  margin-top: 14px;
}
.ct-faces img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--wash-sky);
}
.ct-faces img + img {
  margin-left: -8px;
}
.ct-ghost {
  padding: 16px;
  border-radius: 20px;
  background: #f0f0f3;
  opacity: 0.9;
}
.ct-g2 {
  opacity: 0.5;
}
.ct-ghost > i {
  display: block;
  border-radius: 999px;
  background: #e0e1e6;
}
.ct-gm {
  width: 44px;
  height: 44px;
  border-radius: 14px !important;
}
.ct-gn {
  width: 80px;
  height: 12px;
  margin-top: 20px;
}
.ct-gc {
  width: 56px;
  height: 9px;
  margin-top: 8px;
}
.ct-gd {
  display: flex;
  margin-top: 14px;
}
.ct-gd i {
  width: 28px;
  height: 28px;
  border: 1.5px dashed #b9bbc1;
  border-radius: 50%;
}
.ct-gd i + i {
  margin-left: -10px;
  background: #f0f0f3;
}
.ct-upto {
  display: flex;
  min-height: 144px;
  margin: 0 24px;
  border-radius: 20px;
  overflow: hidden;
  background: #f0f0f3;
}
.ct-ub {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px;
}
.ct-uk {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 700 11px / 16px var(--font-sans);
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: #60646c;
}
.ct-uk i {
  width: 8px;
  height: 8px;
  border: 1.5px solid #60646c;
  border-radius: 50%;
}
.ct-ut {
  font: 700 17px / 22px var(--font-sans);
  letter-spacing: -0.2px;
}
.ct-ubody {
  font: 500 14px / 20px var(--font-sans);
  color: #60646c;
}
.ct-pill {
  margin-top: auto;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: #111113;
  color: #fff;
  font: 700 14px / 32px var(--font-sans);
}
.ct-ucover {
  flex: none;
  width: 104px;
  filter: grayscale(1);
  opacity: 0.4;
}
.ct-ucover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hs-tabs {
  position: absolute;
  left: 21px;
  right: 21px;
  top: 868px;
  height: 64px;
  display: flex;
  padding: 4px;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.1),
    0 8px 24px rgba(0, 0, 0, 0.08);
}
.hs-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 28px;
  font: 600 11px / 13px var(--font-sans);
}
.hs-tab.on {
  background: rgba(17, 17, 19, 0.06);
}
.hs-tab.on svg {
  color: var(--ember);
}

/* 3 · The crew sheet, making one (crew-page-sheet.tsx), over the tab on the
   crew's wash. In the pin it opens on what New crew drew, 🍕 on Rose, and
   beat 12 dresses it: a TAP on the emoji lands the next one (how.js pops it),
   a TAP on a swatch pours its wash over the sheet from the swatch (.cs-pour,
   a clip-path circle) and turns the ink (--ck) at once. --tk, 0 to 1 from
   how.js, fades in the ticks and what they change. */
.cs-dim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(17, 17, 19, 0.45);
}
.cs-panel {
  --ck: var(--ink-sky);
  --tk: 0;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  padding: 8px 24px 58px;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
  background: var(--wash-sky);
}
.cs-pin {
  --ck: var(--ink-rose);
  background: var(--wash-rose);
}
.cs-done {
  --tk: 1;
}
.cs-panel > * {
  position: relative;
}
.cs-panel > .cs-pour,
.cs-pour i {
  position: absolute;
  inset: 0;
}
.cs-pour i {
  background: var(--cw);
  clip-path: circle(0 at 50% 50%);
}
.cs-grab {
  align-self: center;
  width: 38px;
  height: 5px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: rgba(17, 17, 19, 0.16);
}
.cs-head {
  height: 36px;
  display: flex;
}
.cs-x {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.62);
  color: #111113;
}
.cs-x .mk-s {
  stroke-width: 2.4;
}
.cs-id {
  height: 140px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 16px;
}
.cs-emoji {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
}
.cs-em {
  grid-area: 1 / 1;
}
.cs-pin .cs-em + .cs-em {
  opacity: 0;
}
.cs-badge {
  position: absolute;
  right: -4px;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.cs-colours {
  flex: 1;
  min-width: 0;
}
.cs-kr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.cs-k {
  font: 700 11px / 16px var(--font-sans);
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--ck);
}
.cs-ke {
  font: 600 13px / 18px var(--font-sans);
  color: var(--ck);
}
.cs-sw {
  display: grid;
  grid-template-columns: repeat(4, 44px);
  justify-content: space-between;
  row-gap: 10px;
  margin-top: 8px;
}
.cs-sw > i {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 3px;
  border: 2.5px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
}
.cs-sw > i.on {
  border-color: #111113;
}
.cs-sw > i::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--cw);
  box-shadow: inset 0 0 0 1px rgba(17, 17, 19, 0.07);
}
.cs-name {
  margin-top: 18px;
  padding: 2px 0;
  text-align: center;
  font: 800 38px / 46px var(--font-sans);
  letter-spacing: -1px;
}
.cs-who {
  margin-top: 30px;
}
.cs-field {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 0 8px 0 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  font: 400 17px / 22px var(--font-sans);
  color: #60646c;
}
.cs-field b {
  font-weight: 700;
  color: var(--ck);
}
.cs-box {
  height: 239px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-content: start;
  row-gap: 14px;
  margin-top: 10px;
  padding: 16px 4px;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.62);
}
.cs-p {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.cs-f {
  width: 58px;
  height: 58px;
  border: 3px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  overflow: hidden;
}
.cs-f img {
  width: 52px;
  height: 52px;
}
.cs-ring {
  position: absolute;
  left: 50%;
  top: 0;
  width: 58px;
  height: 58px;
  margin-left: -29px;
  border: 3px solid var(--ck);
  border-radius: 50%;
  opacity: var(--tk);
}
.cs-n {
  font: 700 12px / 16px var(--font-sans);
}
.cs-tick {
  position: absolute;
  top: -3px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--ck);
  color: #fff;
  opacity: var(--tk);
}
.cs-tick svg {
  width: 11px;
  height: 11px;
}
.cs-foot {
  padding-top: 12px;
}
.cs-make {
  display: block;
  height: 52px;
  border-radius: 999px;
  background: #111113;
  color: #fff;
  text-align: center;
  font: 600 17px / 52px var(--font-sans);
  opacity: calc(0.4 + 0.6 * var(--tk));
}
.cs-hint {
  margin-top: 8px;
  text-align: center;
  font: 500 13px / 18px var(--font-sans);
  color: #60646c;
}
.cs-x2 {
  display: grid;
}
.cs-ke.cs-x2 {
  justify-items: end;
}
.cs-x2 > span {
  grid-area: 1 / 1;
}
.cs-x2 > span:first-child {
  opacity: calc(1 - var(--tk));
}
.cs-x2 > span:last-child {
  opacity: var(--tk);
}

@media (max-width: 1199px) {
  .h2-block {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .h2-row {
    justify-content: flex-start;
  }
}
/* The phone (under 768): the same sequence on a 100svh stage. The step's
   kicker and title at the top, the current beat in a line under them, the
   phones under that. */
@media (max-width: 767px) {
  .h2-words {
    inset-inline: var(--gutter);
    top: var(--head);
    width: auto;
    transform: none;
  }
  .h2-chapter {
    margin-bottom: 20px;
  }
  .h2-chapter .headline {
    font-size: min(var(--fs-headline), (100vw - 2 * var(--gutter)) / 9.6);
  }
  .h2-dots {
    margin-bottom: 14px;
  }
  .h2-title {
    margin-top: 8px;
    font-size: 24px;
  }
  .h2-step .body,
  .h2-step .h2-beats,
  .h2-step .h2-note {
    display: none;
  }
  .h2-now {
    display: grid;
    margin-top: 10px;
    font: 600 15px / 1.4 var(--font-sans);
    color: var(--ink-2);
  }
  .h2-now span {
    grid-area: 1 / 1;
    opacity: 0;
  }
  .h2-now span:first-child {
    opacity: 1;
  }
  .h2-phones {
    inset: 0;
  }
  .h2-phones::before {
    display: none;
  }
  .h2-blocks {
    gap: 88px;
  }
  .h2-block {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .h2-row {
    --fit: 0.6;
    justify-content: flex-start;
    gap: 20px;
    margin-inline: calc(-1 * var(--gutter));
    padding: 4px var(--gutter) 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .h2-row::-webkit-scrollbar {
    display: none;
  }
  .h2-fig {
    scroll-snap-align: center;
  }
}

/* Design review only (js/how.js, ?t2=) */

/* ?t2=0.5: the stage held at that point, alone in the viewport. */
.h2-frozen .site-header,
.h2-frozen main > :not(.h2) {
  display: none;
}
.h2-frozen .h2 {
  padding: 0;
}
html.h2-frozen {
  --head: 0px;
}
.h2-frozen .h2-pin {
  height: 100vh;
  margin: 0;
}

/* 5 Plans are tickets: the app's plan ticket, in HTML and CSS.

   Drawn at the app's own sizes -- 360 wide, every number as the app has it in
   points (src/components/ticket.tsx, src/screens/plan-ticket.tsx,
   src/screens/plan-memories.tsx) -- and scaled as a whole by one transform:
   --s on the pinned stage, --fit on the stills. Never re-laid out to scale.

   The pinned sequence is js/tickets.js. Without it, under reduced motion and
   on a lean connection, the stills are the chapter: content is visible by
   default and motion only ever adds to it (docs/website/MOTION.md). */

.t5 {
  /* The hiking drawing's own ground: the cover's, the Memories band's and the
     back's. And the app's marks that have no site token. */
  --t5-ground: #cdeeda;
  --t5-scrim: rgba(205, 238, 218, 0.78);
  --t5-edge: #c8c9d0;
  --t5-trail: #a9acb3;
  --t5-blank: #e0e1e6;
  --t5-glass: rgba(255, 255, 255, 0.82); /* --glass-drawn */
  --t5-kick: rgba(17, 17, 19, 0.72);
  --t5-lift: 0 2px 5px rgba(0, 0, 0, 0.08), 0 14px 30px rgba(0, 0, 0, 0.12);
  --t5-disc: 0 1px 3px rgba(0, 0, 0, 0.08);
  /* WHERE's pair, the app's place card: the one line the five washes lack. */
  --wash-olive: #e3efcb;
  --ink-olive: #4b6414;
  --fit: 1;
  position: relative;
  background: var(--paper);
}

/* The marks: one path each, drawn in the ink of what they sit in. */
.t5-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.mk {
  display: block;
  flex: none;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mk-14 {
  width: 14px;
  height: 14px;
}
.mk-16 {
  width: 16px;
  height: 16px;
}
.mk-17 {
  width: 17px;
  height: 17px;
}
.mk-20 {
  width: 20px;
  height: 20px;
}
.mk-21 {
  width: 21px;
  height: 21px;
}

/* The ticket */

.tk-rig {
  position: relative;
  width: 360px;
  height: 699px; /* cover 234, name 56, tear 22, stub 335, band 52 */
  color: #111113;
  font-family: var(--font-sans);
  text-align: start;
}
.tk-side,
.tk-cast,
.tk-frame {
  position: absolute;
  inset: 0;
}

/* The shadow it casts on the page: two boxes shrunk inside its outline and
   spread back out, so neither box's hard cut shows anywhere but under it. */
.tk-cast {
  pointer-events: none;
}
.tk-cast i {
  position: absolute;
  display: block;
  bottom: 0;
}
.tk-cast .far {
  top: 16%;
  left: 10%;
  right: 10%;
  margin: 22px;
  border-radius: 22px;
  box-shadow: 0 52px 68px 22px rgba(17, 17, 19, 0.34);
}
.tk-cast .near {
  top: 5%;
  left: 3%;
  right: 3%;
  margin: 15px;
  border-radius: 15px;
  box-shadow: 0 14px 24px 15px rgba(17, 17, 19, 0.18);
}

/* Its edge: the outline again, notches and all, 3 below. */
.tk-edge {
  position: absolute;
  inset: 3px 0 -3px;
  border-radius: var(--radius-poster);
  background: var(--t5-edge);
}

/* Its lift: cast from a box above the tear and one below it, never from the
   whole card, so neither runs down a notch. */
.tk-lift i {
  position: absolute;
  left: 0;
  right: 0;
  display: block;
  box-shadow: var(--t5-lift);
}
.tk-lift i:first-child {
  top: 0;
  height: 290px;
  border-radius: var(--radius-poster) var(--radius-poster) 0 0;
}
.tk-lift i:last-child {
  top: 312px;
  bottom: 0;
  border-radius: 0 0 var(--radius-poster) var(--radius-poster);
}

/* The notches: real holes, radius 11, at the tear's middle (290 + 11). */
.tk-frame,
.tk-edge {
  -webkit-mask:
    radial-gradient(circle at 0 301px, #0000 10.5px, #000 11px),
    radial-gradient(circle at 100% 301px, #0000 10.5px, #000 11px);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle at 0 301px, #0000 10.5px, #000 11px),
    radial-gradient(circle at 100% 301px, #0000 10.5px, #000 11px);
  mask-composite: intersect;
}
.tk-frame {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-poster);
  overflow: hidden;
  isolation: isolate;
}

/* 1 The cover */
.tk-cover {
  position: relative;
  flex: none;
  height: 234px;
  overflow: hidden;
  background: var(--t5-ground);
}
.tk-cover > picture,
.tk-cover > picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
/* A drawing's foot fades into its own ground, .78 of the way, from 55% down. */
.tk-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(205, 238, 218, 0) 55%, var(--t5-scrim));
}
.tk-top,
.tk-foot {
  position: absolute;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
}
.tk-top {
  top: 12px;
  justify-content: space-between;
}
.tk-foot {
  bottom: 12px;
  min-height: 44px;
}
.tk-disc {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--t5-glass);
}
.tk-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: var(--t5-glass);
  font: 700 13px / 18px var(--font-sans);
  white-space: nowrap;
}
.tk-mid {
  display: flex;
  justify-content: center;
  flex: 1;
  min-width: 0;
  padding: 0 8px;
}
.tk-host {
  gap: 6px;
  min-width: 0;
  padding-left: 3.5px;
}
.tk-kick {
  font: 700 var(--fs-kicker) / var(--lh-kicker) var(--font-sans);
  letter-spacing: var(--tr-kicker);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tk-host .tk-kick {
  color: var(--t5-kick);
}

/* A face: a drawn head on its wash, at 80%, with a ring of the ground. */
.tk-face {
  display: grid;
  place-items: center;
  flex: none;
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.tk-face img {
  width: 80%;
  height: 80%;
}
.tk-face-20 {
  width: 23px;
  height: 23px;
  border: 1.5px solid #fff;
}
.tk-face-24 {
  width: 28px;
  height: 28px;
  border: 2px solid var(--element);
}

/* 2 The name */
.tk-name {
  display: flex;
  align-items: center;
  flex: none;
  height: 56px;
  padding: 0 24px;
  background: #fff;
  font: 700 27px / 31px var(--font-sans);
  letter-spacing: -0.5px;
  white-space: nowrap;
  overflow: hidden;
}

/* 3 The tear: a dashed hairline, 13 in from either edge. */
.tk-tear {
  flex: none;
  height: 22px;
  background:
    repeating-linear-gradient(90deg, var(--indicator) 0 6px, #0000 6px 11px) 13px 10px /
      calc(100% - 26px) 2px no-repeat,
    var(--element);
}

/* 4 The stub: six lines, each in its own ink. */
.tk-stub {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  flex: none;
  padding: 6px 24px 16px;
  background: var(--element);
}
.tk-line {
  min-width: 0;
}
.tk-line dt {
  display: flex;
  align-items: center;
  min-height: 20px;
  color: var(--li);
  font: 700 var(--fs-kicker) / var(--lh-kicker) var(--font-sans);
  letter-spacing: var(--tr-kicker);
  text-transform: uppercase;
  white-space: nowrap;
}
.tk-line dd {
  margin: 0;
}
.tk-v,
.tk-s {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tk-v {
  font: 600 16px / 21px var(--font-sans);
}
.tk-s {
  color: var(--ink-2);
  font: 500 13px / 18px var(--font-sans);
}
.tk-crew {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 39px;
}
.tk-cw {
  min-width: 0;
}
.tk-faces {
  display: flex;
  flex: none;
}
.tk-faces .tk-face + .tk-face {
  margin-left: -8px;
}
.tk-slot {
  padding-top: 6px;
}
.tk-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100px;
  height: 30px;
  padding: 0 8px 0 6px;
  border-radius: var(--radius-pill);
  background: #fff;
  font: 600 14px / 18px var(--font-sans);
  white-space: nowrap;
}
.tk-done .tk-pill {
  background: var(--lw);
  color: var(--li);
}
.l-when {
  --li: var(--ink-ember);
  --lw: var(--wash-ember);
}
.l-where {
  --li: var(--ink-olive);
  --lw: var(--wash-olive);
}
.l-cost {
  --li: var(--ink-amber);
  --lw: var(--wash-amber);
}
.l-crew {
  --li: var(--ink-sky);
  --lw: var(--wash-sky);
}
.l-bring {
  --li: var(--ink-violet);
  --lw: var(--wash-violet);
}
.l-dress {
  --li: var(--ink-rose);
  --lw: var(--wash-rose);
}

/* 5 The Memories band, either side */
.tk-band {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
  height: 52px;
  padding: 0 24px;
  background: var(--t5-ground);
}
.tk-press {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 19, 0.05);
  opacity: 0;
}
.tk-fan {
  position: relative;
  display: flex;
  align-items: center;
  flex: none;
  width: 62px;
  height: 36px;
}
.tk-fc {
  flex: none;
  width: 28px;
  height: 34px;
  padding: 3px 3px 8px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.tk-fc + .tk-fc {
  margin-left: -12px;
}
.tk-fc:nth-child(1) {
  transform: rotate(-10deg);
}
.tk-fc:nth-child(2) {
  transform: rotate(3deg);
}
.tk-fc:nth-child(3) {
  transform: rotate(12deg);
}
.tk-fc img {
  width: 22px;
  height: 22px;
  object-fit: cover;
  background: var(--t5-blank);
}
.tk-bw {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.tk-bw b,
.tk-bw span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tk-bw b {
  font: 600 16px / 21px var(--font-sans);
}
.tk-bw span {
  color: var(--ink-2);
  font: 500 13px / 18px var(--font-sans);
}
.tk-flip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
  height: 30px;
  padding: 0 12px 0 8px;
  border-radius: var(--radius-pill);
  background: #fff;
  font: 600 14px / 18px var(--font-sans);
}
.tk-thumb {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  border: 2px solid #fff;
  border-radius: 9px;
  overflow: hidden;
  background: var(--t5-ground);
}
.tk-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The sheen, over everything inside the clip: 80% larger every side. */
.tk-sheen {
  position: absolute;
  inset: -80%;
  pointer-events: none;
  mix-blend-mode: soft-light;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 35%,
    rgba(255, 255, 255, 0.32) 47%,
    rgba(255, 255, 255, 0) 58%
  );
}
.tk-back .tk-sheen {
  background: linear-gradient(
    245deg,
    rgba(255, 255, 255, 0) 35%,
    rgba(255, 255, 255, 0.32) 47%,
    rgba(255, 255, 255, 0) 58%
  );
}

/* The back: Memories */

/* Flat tinted glass, in the cover's ground: a broad reflection, a fine glint
   beside it and a bevel. No blur. */
.tk-glass {
  position: absolute;
  inset: 0;
  background: var(--t5-ground);
}
.tk-glass i {
  position: absolute;
  inset: 0;
  display: block;
}
.tk-glass .gloss {
  background: linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 30%);
}
.tk-glass .refl {
  background: linear-gradient(
    140deg,
    rgba(255, 255, 255, 0) 13%,
    rgba(255, 255, 255, 0.5) 22%,
    rgba(255, 255, 255, 0.2) 29.5%,
    rgba(255, 255, 255, 0) 36.5%
  );
}
.tk-glass .glint {
  background: linear-gradient(
    140deg,
    rgba(255, 255, 255, 0) 40.7%,
    rgba(255, 255, 255, 0.7) 41.8%,
    rgba(255, 255, 255, 0) 42.9%
  );
}
.tk-glass .bevel {
  border-radius: var(--radius-poster);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(17, 17, 19, 0.07),
    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    inset 0 0 22px rgba(255, 255, 255, 0.4);
}
.tk-head {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex: none;
  padding: 20px 20px 6px 24px;
}
.tk-hw {
  flex: 1;
  min-width: 0;
}
.tk-hw .tk-kick {
  color: var(--ink-2);
}
.tk-ht {
  font: 700 27px / 31px var(--font-sans);
  letter-spacing: -0.5px;
}
.tk-btns {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.tk-turn,
.tk-chev {
  display: grid;
  place-items: center;
  flex: none;
  border-radius: var(--radius-pill);
  background: #fff;
  box-shadow: var(--t5-disc);
}
.tk-turn {
  width: 40px;
  height: 40px;
}
.tk-add {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 18px 0 14px;
  border-radius: var(--radius-pill);
  background: #fff;
  box-shadow: var(--t5-disc);
  font: 600 16px / 20px var(--font-sans);
}

/* The pile: faded out over its top 18 and its foot 22. */
.tk-room {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#0000, #000 18px, #000 calc(100% - 22px), #0000);
  mask-image: linear-gradient(#0000, #000 18px, #000 calc(100% - 22px), #0000);
}
.tk-pile {
  position: relative;
  padding-top: 14px;
}
.tk-day {
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 20px 0 24px;
}
.tk-chev {
  width: 30px;
  height: 30px;
  margin-left: 8px;
  opacity: 0.45; /* an open day's: turned up and stood back */
}
.tk-items {
  padding: 4px 0 30px;
}

/* A polaroid's place: the trail into it, then the polaroid, its middle 37
   from the ticket's, the first to the start side. */
.pl {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pl-1 {
  --side: -1;
  --r: -3deg;
}
.pl-2 {
  --side: 1;
  --r: 2.5deg;
}
.pl-3 {
  --side: -1;
  --r: -1.5deg;
}
.pl-4 {
  --side: 1;
  --r: 3.5deg;
}
.pl-5 {
  --side: -1;
  --r: -2.5deg;
}
.pl-trail {
  display: block;
  flex: none;
  width: 360px;
  height: 44px;
  overflow: hidden;
  fill: none;
  stroke: var(--t5-trail);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 0 8;
}
.pc {
  position: relative;
  left: calc(var(--side) * 37.333px);
  flex: none;
  width: 228px;
  height: 240px;
  margin: 0;
  padding: 10px 10px 0;
  border-radius: 3px;
  background: #fff;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 10px 22px rgba(0, 0, 0, 0.14);
  transform: translate(0, 0) rotate(var(--r));
}
.pc img {
  width: 208px;
  height: 178px;
  object-fit: cover;
  background: var(--t5-blank);
}
.pc figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 4px;
  font: 500 14px / 19px var(--font-sans);
  text-align: center;
  text-wrap: balance;
}

/* The pile on its own (the phone's third block): the back's glass, the
   length of the day. */
.tk-roll {
  position: relative;
  width: 360px;
  height: 1484px;
  border-radius: var(--radius-poster);
  box-shadow: var(--t5-lift);
  isolation: isolate;
  color: #111113;
  font-family: var(--font-sans);
}
.tk-roll::before {
  content: '';
  position: absolute;
  inset: 3px 0 -3px;
  z-index: -1;
  border-radius: var(--radius-poster);
  background: var(--t5-edge);
}
.tk-roll .tk-glass {
  border-radius: var(--radius-poster);
  overflow: hidden;
}

/* The stills: what reduced motion, a lean connection and no script see */

.t5-stills {
  padding-block: 144px 96px;
}
.t5-shead {
  margin-bottom: 72px;
}
.t5-blocks {
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.t5-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.t5-say {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: stretch;
}
.t5-hold {
  position: relative;
  flex: none;
  width: calc(360px * var(--fit));
  height: calc(699px * var(--fit));
  margin-bottom: 44px; /* the cast shadow's room */
}
.t5-hold-roll {
  height: calc(1484px * var(--fit));
}
.tk-scale {
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(var(--fit));
  transform-origin: 0 0;
}
/* Until the script has measured: the column a phone gives the ticket. */
@media (max-width: 407px) {
  .t5 {
    --fit: 0.95;
  }
}
@media (max-width: 383px) {
  .t5 {
    --fit: 0.908;
  }
}
@media (max-width: 367px) {
  .t5 {
    --fit: 0.866;
  }
}
@media (max-width: 343px) {
  .t5 {
    --fit: 0.755;
  }
}

/* Desktop without the pin: the words in the start-side column, the front
   flat and the back flat beside it. */
@media (min-width: 768px) {
  .t5 {
    --fit: 0.62;
  }
  .t5-blocks {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto auto;
    grid-template-rows: auto auto auto 1fr;
    column-gap: 32px;
    row-gap: 40px;
    align-items: start;
  }
  .t5-block {
    display: contents;
  }
  .b1 .t5-say {
    grid-area: 1 / 1;
  }
  .b2 .t5-say {
    grid-area: 2 / 1;
  }
  .b3 .t5-say {
    grid-area: 3 / 1;
  }
  .b1 .t5-hold {
    grid-area: 1 / 2 / 5 / 3;
  }
  .b2 .t5-hold {
    grid-area: 1 / 3 / 5 / 4;
  }
  .b3 .t5-hold {
    display: none;
  }
}
@media (min-width: 1024px) {
  .t5 {
    --fit: 0.85;
  }
}
@media (min-width: 1200px) {
  .t5 {
    --fit: 1;
  }
}

/* The phone's tickets at rest, as the app leaves them: stood 24 towards the
   reader and tipped back 3°, the sheen where that puts it. The pile is dealt
   in as it scrolls into view. Reduced motion keeps all of it flat and still. */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .t5-stills .tk-rig {
    transform: perspective(1100px) scale(1.0223) rotateX(3deg);
  }
  .t5-stills .tk-sheen {
    transform: translate(0, 86.4px);
  }
  @supports (animation-timeline: view()) {
    .tk-roll .pl {
      view-timeline-name: --t5-pl;
    }
    .tk-roll .pc {
      animation: t5-deal cubic-bezier(0.2, 0.8, 0.25, 1) both;
      animation-timeline: --t5-pl;
      animation-range: entry 0% entry 60%;
    }
    .tk-roll .pl-trail {
      animation: t5-trail linear both;
      animation-timeline: --t5-pl;
      animation-range: entry 0% entry 60%;
    }
  }
  @supports not (animation-timeline: view()) {
    .js .tk-roll .pl:not(.in) .pc {
      opacity: 0;
      transform: translate(calc(var(--side) * 26px), 48px)
        rotate(calc(var(--r) + var(--side) * 9deg));
    }
    .js .tk-roll .pl:not(.in) .pl-trail {
      opacity: 0;
    }
    .js .tk-roll .pc,
    .js .tk-roll .pl-trail {
      transition:
        opacity 560ms cubic-bezier(0.2, 0.8, 0.25, 1),
        transform 560ms cubic-bezier(0.2, 0.8, 0.25, 1);
    }
  }
}
@keyframes t5-deal {
  from {
    opacity: 0;
    transform: translate(calc(var(--side) * 26px), 48px) rotate(calc(var(--r) + var(--side) * 9deg));
  }
  to {
    opacity: 1;
    transform: translate(0, 0) rotate(var(--r));
  }
}
@keyframes t5-trail {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* The pin (every width, once js/tickets.js has built it) */

.t5-pin {
  display: none;
  position: relative;
  /* One screen more than the scroll after the ticket has arrived: the phases
     in js/tickets.js (_VH) add up to this, less their arrival, plus 100. */
  height: 555vh;
}
.t5-on .t5-pin {
  display: block;
}
/* The stills stay for assistive tech; their tickets go. */
.t5-on .t5-stills {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.t5-on .t5-stills .t5-hold {
  display: none;
}
.t5-stage {
  --col-l: max(var(--gutter), (100vw - var(--column)) / 2);
  --col-w: min(var(--column), 100vw - 2 * var(--gutter));
  --words-w: min(440px, 40vw);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
/* The chapter's head over the three states, which stand in one cell; the
   whole column centred in the room under the header. */
.t5-words {
  position: absolute;
  top: calc(50% + var(--head) / 2);
  left: var(--col-l);
  width: var(--words-w);
  transform: translateY(-50%);
}
.t5-chapter {
  margin-bottom: 48px;
}
/* A size down from the chapter's headline, as chapter 2's step titles are. */
.t5-state .headline {
  font-size: 34px;
  line-height: 1.1;
}
.t5-states {
  display: grid;
}
.t5-state {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  transition: opacity 300ms var(--ease-settle);
}
.t5-state.on {
  opacity: 1;
}
.t5-fit {
  position: absolute;
  top: 50%;
  left: calc(var(--col-l) + var(--words-w) + (var(--col-w) - var(--words-w)) / 2);
  width: 360px;
  height: 699px;
  margin: -349.5px 0 0 -180px;
  transform: scale(var(--s, 1));
}
.t5-stage .tk-back,
.t5-stage .pc,
.t5-stage .pl-trail {
  opacity: 0;
}
/* The phone's pin: the words over the ticket, the ticket centred in the room
   under them (--cy and --s are measured on load and on resize). */
@media (max-width: 767px) {
  .t5-stage {
    height: 100svh;
  }
  .t5-words {
    top: 76px;
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
    transform: none;
  }
  .t5-chapter {
    margin-bottom: 20px;
  }
  /* The ticket's room: the stills keep the paragraph. */
  .t5-chapter .body {
    display: none;
  }
  .t5-state {
    gap: 10px;
  }
  .t5-state .headline {
    font-size: 24px;
  }
  .t5-state .body {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
  }
  .t5-fit {
    top: var(--cy, 62%);
    left: 50%;
  }
}

/* Only while the pin is near. */
.t5-near .tk-rig,
.t5-near .tk-side,
.t5-near .tk-cast,
.t5-near .tk-sheen,
.t5-near .tk-pile,
.t5-near .pc {
  will-change: transform, opacity;
}

/* Design review only (js/tickets.js, ?t5=) */

/* ?t5=0.43: the stage held at that point, alone in the viewport. */
.t5-frozen .t5-pin {
  height: 100vh;
}
.t5-frozen .t5-state {
  transition: none;
}
.t5-frozen .site-header,
.t5-frozen main > :not(.t5) {
  display: none;
}
/* ?t5=flat: the stills as reduced motion draws them, on any device. */
.t5-flat .t5-stills .tk-rig,
.t5-flat .t5-stills .tk-sheen {
  transform: none;
}
.t5-flat .tk-roll .pc,
.t5-flat .tk-roll .pl-trail {
  animation: none;
}

/* 6 Discover: the filters, the plan card and its heart, which chapter 6's
   deck is made of */
.chips {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chips li {
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  font: 600 15px/20px var(--font-sans);
  box-shadow: inset 0 0 0 1px var(--border);
}
.chips li:first-child {
  background: var(--fill);
  color: var(--on-fill);
  box-shadow: none;
}
.plan-card {
  margin-top: 32px;
  width: min(460px, 100%);
  border-radius: var(--radius-poster);
  overflow: hidden;
  background: var(--page);
  box-shadow: var(--lift-card);
}
.plan-card .cover {
  aspect-ratio: 23 / 10;
  position: relative;
  background: var(--plan-sky);
}
.plan-card .cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.plan-card .foot {
  padding: 18px 20px 20px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.heart {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--glass-drawn);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 6 Find something on: the app's Discover. Without js/globe.js -- reduced
   motion, Save-Data, 2G, or before it runs -- this is the still: no pin, the
   globe /assets/globe.svg turned to Sydney, the deck at rest on Sydney. */

/* clip, not hidden: overflow: hidden makes the section a scroll container,
   and the sticky stage inside it would never stick. */
.t6 {
  padding-bottom: 0;
  overflow: clip;
}
.t6 .split {
  align-items: end;
  row-gap: 0;
}
.t6-head,
.t6 .deck,
.t6 .note {
  grid-column: 1;
}
.t6-hold,
.t6-box {
  display: contents;
}
.t6 .note {
  margin-top: 16px;
  max-width: 460px;
  margin-bottom: 144px;
}
/* The six filters on one line, as the app's row. */
.t6 .chips {
  flex-wrap: nowrap;
  gap: 6px;
}
.t6 .chips li {
  flex: none;
  padding: 0 11px;
  font-size: 14px;
  position: relative;
  isolation: isolate;
}
/* The chip the front plan is under is the filled one. Its fill crossfades
   with the deal (opacity, --on from js/globe.js); the words turn white once
   the fill is more than half in. The still: Tonight, Sydney's. */
.t6 .chips li:first-child {
  background: none;
  color: inherit;
  box-shadow: inset 0 0 0 1px var(--border);
}
.t6 .chips li::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--fill);
  opacity: var(--on, 0);
}
.t6 .chips li.on {
  color: var(--on-fill);
}
.t6 .chips li:first-child {
  --on: 1;
}

/* The deck (discover-deck.tsx): four cards in one cell, the front on top. */
.deck {
  margin-top: 32px;
  width: min(460px, 100%);
}
.deck-cards {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.deck-card {
  grid-area: 1 / 1;
  transform-origin: 50% 50%;
}
.deck-card .plan-card {
  margin-top: 0;
  width: 100%;
}
.deck-card:nth-child(1) {
  z-index: 4;
}
.deck-card:nth-child(2) {
  z-index: 3;
  transform: translateY(11px) scale(0.965) rotate(2.2deg);
}
.deck-card:nth-child(3) {
  z-index: 2;
  transform: translateY(22px) scale(0.93) rotate(-2.6deg);
}
.deck-card:nth-child(4) {
  z-index: 1;
  transform: translateY(33px) scale(0.895) rotate(3.4deg);
  opacity: 0;
}
.deck-card:nth-child(1) .cover {
  background: #d0e7f7;
}
.deck-card:nth-child(2) .cover {
  background: #f4d4d4;
}
.deck-card:nth-child(3) .cover {
  background: #fad5ce;
}
.deck-card:nth-child(4) .cover {
  background: var(--plan-blush);
}
.deck-dots {
  position: relative;
  margin-top: 40px;
  display: flex;
  justify-content: center;
  /* 12 apart, so the long dot over one leaves 6 clear of its neighbours. */
  gap: 12px;
}
.deck-dots i {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--border);
}
.deck-dots b {
  position: absolute;
  top: 0;
  inset-inline-start: calc(50% - 36px);
  width: 18px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--fill);
}

/* The globe: the sea and its shadow (CSS, never animated), the canvas, the
   shade and rim (CSS, the light does not move), and the place's pill. */
.globe {
  grid-column: 2;
  grid-row: 1 / span 3;
  justify-self: end;
  width: 560px;
  aspect-ratio: 1;
  margin-bottom: -72px;
  border-radius: var(--radius-pill);
  position: relative;
  background: var(--wash-sky);
  box-shadow: 0 10px 24px rgba(31, 90, 135, 0.22);
}
.globe-still img,
.globe-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-pill);
}
/* The canvas over the still, shown once it has drawn its first frame: the
   two are one picture, so nothing jumps. */
.globe-map {
  opacity: 0;
}
.globe.drawn .globe-map {
  opacity: 1;
}
.globe.drawn .globe-still {
  opacity: 0;
}
.globe-shade {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  background: radial-gradient(
    circle at 36% 30%,
    rgba(255, 255, 255, 0.42) 0,
    rgba(255, 255, 255, 0) 55%,
    rgba(17, 17, 19, 0.1) 100%
  );
  box-shadow: inset 0 0 0 1px rgba(31, 90, 135, 0.3);
  pointer-events: none;
}
.globe-pill {
  position: absolute;
  /* The still: 10 above Sydney's dot on /assets/globe.svg. */
  left: 50%;
  top: 58.687%;
  transform: translate(-50%, -100%);
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--ember);
  color: #ffffff;
  font: 700 12px/24px var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

/* Live: placed by transform alone, from the disc's top-left. */
.t6-on .globe-pill {
  left: 0;
  top: 0;
  opacity: 0;
}

/* The pin, desktop (768 and wider, once js/globe.js runs) */
@media (min-width: 768px) {
  .t6-on .t6 {
    padding-block: 0;
  }
  .t6-on .t6-pin {
    /* 300vh of scroll: a plan's turn, landing and deal are 87vh of it. */
    height: 400vh;
  }
  .t6-on .t6-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
  }
  .t6-on .t6-fit {
    position: relative;
    height: 100%;
    align-content: center;
    align-items: start;
  }
  .t6-on .t6 .note {
    margin-bottom: 0;
  }
  .t6-on .globe {
    position: absolute;
    top: 50%;
    bottom: auto;
    inset-inline-end: 0;
    width: min(560px, 100vh - 48px);
    margin: 0;
    transform: translateY(-50%);
  }
  .t6-on .t6-near .t6-stage {
    will-change: transform;
  }
}

/* Phone */
@media (max-width: 767px) {
  .t6 {
    padding-top: 72px;
  }
  .t6 .split {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .t6 .words {
    padding-bottom: 0;
  }
  .globe {
    align-self: center;
    width: min(100%, 560px);
    margin: 40px 0 0;
  }
  .t6 .deck {
    align-self: center;
  }
  .t6 .note {
    margin-bottom: 96px;
  }
  /* The same pin: the words scroll by above it, the stage holds the globe
     and the deck, the note follows after. --g is measured on load and on
     resize: on a short phone the globe gives up room, never the card. */
  .t6-on .t6-hold {
    display: block;
    height: 400vh;
    margin-top: 24px;
  }
  .t6-on .t6-box {
    position: sticky;
    top: 0;
    height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
  }
  .t6-on .globe {
    width: var(--g, min(100vw - 32px, 46svh));
    margin: 0;
  }
  .t6-on .t6 .deck {
    margin-top: 0;
  }
  .t6-on .t6 .deck-dots {
    margin-top: 36px;
  }
  .t6-on .t6 .note {
    margin-top: 24px;
  }
  .t6-on .t6-near .t6-box {
    will-change: transform;
  }
}

/* ?t6=0.5: the stage held at that point, alone in the viewport. */
.t6-frozen .site-header,
.t6-frozen main > :not(.t6) {
  display: none;
}
.t6-frozen .t6-pin,
.t6-frozen .t6-hold {
  height: auto;
}
@media (max-width: 767px) {
  .t6-frozen .t6 {
    padding-top: 0;
  }
  .t6-frozen .t6-head,
  .t6-frozen .t6 .note {
    display: none;
  }
  .t6-frozen .t6-hold {
    margin-top: 0;
  }
}

/* 7 The dark band: its words */
.band .kicker {
  color: var(--coral);
}
.band .body {
  color: var(--night-ink-2);
}

/* 7 On your Lock Screen: the widgets in two phones, at the widgets' own
   points (a 440 screen: small 170, medium 364 × 170): the Lock Screen with
   the Live Activity, and the Today View with five widgets. The phone is
   chapter 2's .hp, scaled by --fit. js/lock.js plays the evening over it. */
main > section.l7 {
  /* Pinned, so laid out for real: a placeholder's height would move the
     trigger (main > section). */
  content-visibility: visible;
}
.l7 .split {
  grid-template-columns: 480px minmax(0, 1fr);
}
/* --fit-w is the width's say, --fit-h the height's (js/lock.js, on load and
   resize); the phones take the smaller. --drop lowers the second phone. */
.l7-phones {
  --fit-w: 0.62;
  --drop: 72px;
  --fit: min(var(--fit-w), var(--fit-h, 1));
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 32px;
}
.l7-fig {
  margin: 0;
  flex: none;
}
.l7-fig + .l7-fig {
  margin-top: var(--drop);
}
.l7-alt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* On the band the phone keeps its edge and loses the light page's lift. */
.l7 .hp-edge,
.l7 .hp-b {
  background: #3a3a40;
}
.l7 .hp-lift {
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.5),
    0 8px 16px rgba(0, 0, 0, 0.35);
}

/* The wallpaper: night, warmed at the foot. Dimmed under the Today View. */
.hs.l7-lock,
.hs.l7-today {
  color: #ffffff;
  background: radial-gradient(140% 72% at 50% 108%, #4a2a1c 0%, #261815 42%, #0e0e10 82%) #0e0e10;
}
.hs.l7-today::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.l7-k {
  font: 700 11px/14px var(--font-sans);
  letter-spacing: 1.3px;
  text-transform: uppercase;
  white-space: nowrap;
}
.l7-home {
  position: absolute;
  left: 150px;
  bottom: 8px;
  width: 140px;
  height: 5px;
  border-radius: 3px;
  background: #ffffff;
}

/* ---- The Lock Screen ---- */
.l7-date {
  position: absolute;
  left: 0;
  right: 0;
  top: 74px;
  text-align: center;
  font: 600 21px/26px var(--font-sans);
  color: rgba(255, 255, 255, 0.86);
}
.l7-clock {
  position: absolute;
  left: 0;
  right: 0;
  top: 98px;
  text-align: center;
  font: 700 112px/1 var(--font-sans);
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.92);
}
/* Who's free (accessoryCircular) and Tonight (accessoryRectangular), in the
   Lock Screen's one tone. */
.l7-acc {
  position: absolute;
  left: 0;
  right: 0;
  top: 228px;
  display: flex;
  justify-content: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.92);
}
.l7-circ {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.l7-circ b {
  font: 700 22px/24px var(--font-sans);
}
.l7-circ > span {
  margin-top: -2px;
  font: 600 10px/12px var(--font-sans);
}
.l7-rect {
  width: 172px;
  height: 76px;
  padding: 0 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  font: 500 12px/15px var(--font-sans);
}
.l7-rect .l7-rt {
  font: 700 13px/16px var(--font-sans);
}
/* The Live Activity (PlanActivity.swift, PlanBanner): 146 high. */
.l7-live {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 668px;
  padding: 14px 16px;
  border-radius: 24px;
  background: rgba(17, 17, 19, 0.92);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.l7-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.l7-cover {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 12px;
  overflow: hidden;
  background: #fadfcc;
}
.l7-cover img,
.l7-tcover img,
.l7-acover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.l7-hl {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.l7-t15 {
  font: 600 15px/18px var(--font-sans);
  white-space: nowrap;
}
.l7-s13 {
  font: 500 13px/16px var(--font-sans);
  color: rgba(255, 255, 255, 0.62);
  white-space: nowrap;
}
.l7-count {
  margin-left: 8px;
  font: 700 30px/1 var(--font-sans);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--coral);
  white-space: nowrap;
}
/* The bar runs over the hour before the start: 42 min left is 0.3 of it. */
.l7-bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.l7-bar span {
  display: block;
  height: 100%;
  background: var(--coral);
  transform: scaleX(0.3);
  transform-origin: 0 0;
}
.l7-answers {
  display: flex;
  gap: 6px;
}
.l7-answers span {
  flex: 1;
  height: 52px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 17px/22px var(--font-sans);
}
/* The torch and the camera: two discs, two plain marks. */
.l7-qk {
  position: absolute;
  top: 842px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
}
.l7-torch {
  left: 46px;
}
.l7-torch::before {
  content: '';
  width: 12px;
  height: 22px;
  background: #ffffff;
  clip-path: polygon(0 0, 100% 0, 100% 28%, 78% 44%, 78% 100%, 22% 100%, 22% 44%, 0 28%);
}
.l7-cam {
  right: 46px;
}
.l7-cam::before {
  content: '';
  width: 24px;
  height: 18px;
  box-sizing: border-box;
  border: 2px solid #ffffff;
  border-radius: 5px;
}
.l7-cam::after {
  content: '';
  position: absolute;
  left: 20px;
  top: 21px;
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border: 2px solid #ffffff;
  border-radius: 50%;
}

/* ---- The Today View ---- */
.l7-today .hs-marks {
  left: 358px;
}
/* The island, compact: the mark and the minutes left. */
.l7-isl {
  position: absolute;
  left: 128.5px;
  top: 26.5px;
  width: 214px;
  height: 37px;
  padding: 0 13px 0 12px;
  border-radius: 18.5px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 600 14px/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--coral);
}
/* The island, expanded (PlanActivity.swift, DynamicIslandExpandedRegion):
   the cover, the headline and the countdown, then the bar and the answers.
   Same top as the compact island; js/lock.js grows it out of the compact
   one by clip-path. At rest it is folded away. */
.l7-isx {
  position: absolute;
  left: 27.5px;
  top: 26.5px;
  width: 416px;
  height: 142px;
  padding: 16px 18px;
  box-sizing: border-box;
  border-radius: 44px;
  background: #000;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  z-index: 6;
}
.l7-isx .l7-count {
  font-size: 26px;
}
.l7-isx .l7-answers span {
  height: 44px;
  font-size: 16px;
}
.l7-search {
  position: absolute;
  left: 38px;
  top: 76px;
  width: 364px;
  height: 38px;
  padding: 0 12px;
  border-radius: 19px;
  background: rgba(118, 118, 128, 0.3);
  display: flex;
  align-items: center;
  gap: 7px;
  font: 400 17px/22px var(--font-sans);
  color: rgba(235, 235, 245, 0.6);
}
.l7-search svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.l7-grid {
  position: absolute;
  left: 38px;
  top: 134px;
  width: 364px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 170px 170px;
  grid-auto-rows: 170px;
  gap: 24px;
}
.l7-w {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: var(--night-card);
}
.l7-m {
  grid-column: span 2;
}

/* Set your status (StatusWidget.swift), Bored live: the card on Bored's
   dark ground, the face ringed, until when, and Buzz them. */
.l7-status {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
}
.l7-st-ground {
  position: absolute;
  inset: 0;
  background: #3a2419;
}
.l7-st-head,
.l7-st-row {
  position: relative;
}
.l7-st-head {
  height: 24px;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 92px;
  align-items: center;
}
.l7-st-now {
  grid-column: 2;
  display: grid;
  justify-items: center;
  text-align: center;
  font: 600 15px/20px var(--font-sans);
  color: var(--coral);
  white-space: nowrap;
}
.l7-st-now > span,
.l7-st-name > span,
.l7-going > b,
.l7-n > span {
  grid-area: 1 / 1;
}
.l7-st-ask {
  color: #ffffff;
  opacity: 0;
}
.l7-buzz {
  justify-self: end;
  height: 24px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--coral);
  font: 600 12px/24px var(--font-sans);
  color: #111113;
  white-space: nowrap;
}
.l7-st-row {
  margin: auto 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 5.5px;
}
.l7-st-row li {
  width: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.l7-st-face {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.l7-st-face img {
  width: 50px;
  height: 50px;
}
/* The live one's ring: its ink, with a gap of the card between. */
.l7-ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2.5px solid var(--coral);
  box-shadow: inset 0 0 0 2.5px var(--night-card);
}
.l7-st-name {
  display: grid;
  height: 26px;
  text-align: center;
  font: 600 11px/13px var(--font-sans);
}
.l7-st-on {
  color: var(--coral);
}
.l7-st-name > span:first-child {
  opacity: 0;
}

/* Who's free, small (WhosFreeWidget.swift). */
.l7-free {
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.l7-free .l7-k {
  padding-left: 2px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--coral);
}
.l7-free .l7-k::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.l7-free ul {
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
}
.l7-free li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font: 600 12px/15px var(--font-sans);
}
.l7-face {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.l7-face img {
  width: 30px;
  height: 30px;
}

/* Discover, small (DiscoverWidget.swift, 1b "Globe rise"). */
.l7-disc .l7-k {
  position: absolute;
  left: 16px;
  top: 16px;
  color: var(--night-ink-2);
}
.l7-disc-words {
  position: absolute;
  left: 16px;
  right: 14px;
  top: 40px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.l7-disc-n {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.l7-disc-n b {
  font: 700 40px/44px var(--font-sans);
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}
.l7-disc-n span {
  font: 500 13px/16px var(--font-sans);
  color: var(--night-ink-2);
  white-space: nowrap;
}
.l7-disc-c {
  font: 600 15px/18px var(--font-sans);
}
.l7-step {
  position: absolute;
  top: 9px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #2c2c2e;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--night-ink-2);
}
.l7-globe {
  position: absolute;
  left: -20px;
  bottom: 0;
  width: 210px;
  height: 66px;
}

/* Tonight, medium (TonightWidget.swift, TicketCard): the tear at 145, a
   notch bitten out of each edge there. */
.l7-ticket {
  display: flex;
  border-radius: 24px;
  background: none;
  -webkit-mask:
    radial-gradient(circle at 145px 0, #0000 7px, #000 7.5px),
    radial-gradient(circle at 145px 100%, #0000 7px, #000 7.5px);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle at 145px 0, #0000 7px, #000 7.5px),
    radial-gradient(circle at 145px 100%, #0000 7px, #000 7.5px);
  mask-composite: intersect;
}
.l7-ticket::after {
  content: '';
  position: absolute;
  left: 144.25px;
  top: 14px;
  bottom: 14px;
  width: 1.5px;
  background: repeating-linear-gradient(180deg, #48484a 0 4px, #0000 4px 8px);
}
.l7-tcover {
  flex: none;
  width: 145px;
  background: #fadfcc;
}
.l7-stub {
  flex: 1;
  min-width: 0;
  padding: 14px 16px 14px 15px;
  display: flex;
  flex-direction: column;
  background: var(--night-card);
}
.l7-stub .l7-k {
  color: var(--coral);
}
.l7-wt {
  font: 600 19px/24px var(--font-sans);
  letter-spacing: -0.2px;
}
.hs .l7-stub dl {
  margin: auto 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
}
.l7-stub dt {
  font: 700 10px/13px var(--font-sans);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--night-ink-2);
}
.l7-stub dt.l7-when {
  color: var(--coral);
}
.l7-stub dd {
  margin: 1px 0 0;
  font: 600 13px/17px var(--font-sans);
}

/* Asked you, medium (AskedWidget.swift). */
.l7-asked {
  display: flex;
}
.l7-acover {
  flex: none;
  width: 120px;
}
.l7-abody {
  flex: 1;
  min-width: 0;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.l7-who {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--night-ink-2);
}
.l7-f18 {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.l7-f18 img {
  width: 14px;
  height: 14px;
}
.l7-t17 {
  font: 600 17px/22px var(--font-sans);
}
.l7-s12 {
  margin-top: 2px;
  font: 500 12px/16px var(--font-sans);
  color: var(--night-ink-2);
}
.l7-switch {
  position: relative;
  display: flex;
  padding: 3px;
  border-radius: 999px;
  background: #2c2c2e;
}
.l7-switch span {
  position: relative;
  flex: 1;
  height: 36px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  font: 600 15px/20px var(--font-sans);
  white-space: nowrap;
  color: var(--night-ink-2);
}
/* The thumb sits in Going's own cell, so it is always exactly that cell. */
.l7-thumb {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #1e3a2b;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.l7-switch .l7-going {
  display: grid;
  place-items: center;
}
.l7-going > b {
  position: relative;
  font-weight: inherit;
}
.l7-going > b:first-child {
  opacity: 0;
}
.l7-going > b + b {
  color: #6fd39c;
}

/* A number turning over: the old one under the new, both in one cell. */
.l7-n {
  display: inline-grid;
  overflow: hidden;
  vertical-align: top;
}
.l7-n > span:first-child {
  opacity: 0;
}

/* Motion: the phones rise in turn (.reveal, .stagger); the bar fills once. */
@keyframes l7-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(0.3);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .js .once:not(.in) .l7-bar span {
    transform: scaleX(0);
  }
  .js .once.in .l7-bar span {
    animation: l7-fill 1200ms var(--ease-settle) 300ms both;
  }
}

/* Narrower: a smaller pair, then the words over the pair. */
@media (max-width: 1247px) {
  .l7 .split {
    grid-template-columns: 400px minmax(0, 1fr);
    gap: 48px;
  }
  .l7-phones {
    --fit-w: 0.48;
    --drop: 56px;
    gap: 24px;
  }
}
@media (max-width: 999px) {
  .l7 .split {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
  }
  .l7-phones {
    --fit-w: 0.58;
    justify-content: center;
  }
}
/* Phone: the pair in a row that snaps, the second peeking. The row is its
   own scroller, so the phones skip the rise (a view() timeline would bind
   to the row, and the peeking phone would wait for a swipe). */
@media (max-width: 640px) {
  .l7 .split {
    gap: 40px;
  }
  .l7-phones {
    --fit-w: 0.66;
    --drop: 0px;
    justify-content: flex-start;
    gap: 16px;
    margin-inline: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .l7-phones::-webkit-scrollbar {
    display: none;
  }
  .l7-fig {
    scroll-snap-align: start;
  }
  .l7-fig.reveal {
    animation: none;
  }
  .js .l7-fig.reveal:not(.in) {
    opacity: 1;
    transform: none;
  }
}

/* The sequence (once js/lock.js runs). Wide (1000 and up): the whole stage
   stuck for 450vh, words and phones. Narrower: the words scroll by, and only
   the phones are stuck, in a 100svh box; under 640 the row is no longer a
   scroller but a track the script moves, the Today View first, then the
   Lock Screen. Either way what is stuck is centred under the header
   (--head), as chapter 2's stage is, so no phone is tucked under it. */
.t7-hold,
.t7-box {
  display: contents;
}
.t7-on .l7 .once .l7-bar span {
  animation: none;
}
.t7-on .l7-live,
.t7-on .l7-isl,
.t7-on .l7-phones {
  will-change: transform;
}
@media (min-width: 1000px) {
  .t7-on .l7 {
    padding-block: 0;
  }
  .t7-on .t7-pin {
    height: 450vh;
  }
  .t7-on .t7-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    box-sizing: border-box;
    padding-top: var(--head);
    display: flex;
    align-items: center;
  }
}
@media (max-width: 999px) {
  .t7-on .l7 {
    padding-bottom: 0;
  }
  .t7-on .t7-hold {
    display: block;
    height: 450vh;
  }
  .t7-on .t7-box {
    position: sticky;
    top: 0;
    height: 100svh;
    box-sizing: border-box;
    padding-top: var(--head);
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  .t7-on .l7-phones {
    width: 100%;
  }
}
@media (max-width: 640px) {
  .t7-on .t7-box {
    margin-inline: calc(-1 * var(--gutter));
  }
  .t7-on .l7-phones {
    margin: 0;
    padding: 0 0 0 calc((100% - 471px * var(--fit)) / 2);
    overflow: visible;
    scroll-snap-type: none;
  }
}

/* Design review only (js/lock.js, ?t7=) */

/* ?t7=0.5: the stage held at that point, alone in the viewport. */
html.t7-frozen {
  --head: 0px;
}
.t7-frozen .site-header,
.t7-frozen main > :not(.l7) {
  display: none;
}
.t7-frozen .t7-pin,
.t7-frozen .t7-hold {
  height: auto;
}
.t7-frozen .l7 .reveal {
  animation: none;
  opacity: 1;
  transform: none;
}
@media (max-width: 999px) {
  .t7-frozen .l7 {
    padding-top: 0;
  }
  .t7-frozen .t7-head {
    display: none;
  }
}

/* 9 Private */
.never {
  width: min(760px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}
.never ul {
  margin-top: 48px;
}
.never li {
  padding: 22px 0;
  border-top: 1px solid rgba(87, 64, 137, 0.2);
  font: 600 24px/1.3 var(--font-sans);
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.never li:last-child {
  border-bottom: 1px solid rgba(87, 64, 137, 0.2);
}
.never li span {
  font-weight: 400;
  color: var(--ink-violet);
}
.never .kicker,
.never .foot {
  color: var(--ink-violet);
}
.never .foot {
  margin-top: 28px;
}

/* 9 Built to be private: the seven, one at a time (js/private.js). "Never"
   stays put in the wash's ink; the rest of each line and its second half
   change under it over a 560vh pin. Without the script the chapter is the
   list, .never, above. */
main > section.p9 {
  /* Pinned, so laid out for real: a placeholder's height would move the
     trigger (main > section). */
  content-visibility: visible;
}
.p9 {
  position: relative;
  --t9-never: clamp(80px, min(12.2vw, 19vh), 176px);
  --t9-pred: clamp(30px, min(4.45vw, 7vh), 64px);
  --t9-how: clamp(17px, min(1.8vw, 2.9vh), 26px);
}
.t9-pin {
  display: none;
}
.t9-on .p9 {
  padding-block: 0;
}
.t9-on .t9-pin {
  display: block;
  height: 560vh;
}
/* With the stage on, the list stays for screen readers only. */
.t9-on .p9 .never {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.t9-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  box-sizing: border-box;
  padding: calc(var(--head) + 40px) 0 48px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.t9-frame {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.t9-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}
.t9-top .kicker,
.t9-count,
.t9-never,
.t9-how,
.t9-foot .foot {
  color: var(--ink-violet);
}
.t9-count {
  flex: none;
  font: 600 var(--fs-small) / 1.3 var(--font-sans);
  font-variant-numeric: tabular-nums;
  /* At 390 the headline took the room and "05 /" stood over "07". */
  white-space: nowrap;
}
.t9-show {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.t9-never {
  font: 700 var(--t9-never) / 0.86 var(--font-sans);
  letter-spacing: -0.045em;
}
.t9-lines {
  display: grid;
  margin-top: calc(var(--t9-pred) * 0.44);
}
.t9-line {
  grid-area: 1 / 1;
}
.t9-pred {
  max-width: 1100px;
  font: 700 var(--t9-pred) / 1.04 var(--font-sans);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.t9-how {
  max-width: 760px;
  margin-top: 28px;
  font: 400 var(--t9-how) / 1.4 var(--font-sans);
  text-wrap: pretty;
}
.t9-on .t9-pred,
.t9-on .t9-how {
  will-change: transform, opacity;
}
.t9-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px 40px;
}
.t9-bar {
  display: flex;
  gap: 8px;
}
.t9-bar i {
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background: rgba(87, 64, 137, 0.2);
  overflow: hidden;
}
.t9-bar b {
  display: block;
  height: 100%;
  background: var(--ink-violet);
  transform-origin: left;
  transform: scaleX(0);
}
.t9-foot .foot {
  max-width: 520px;
  text-align: right;
  text-wrap: pretty;
  opacity: 0;
}

@media (max-width: 640px) {
  .t9-stage {
    padding: calc(var(--head) + 24px) 0 32px;
  }
  .t9-how {
    margin-top: 16px;
  }
  .t9-foot {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .t9-bar {
    gap: 6px;
  }
  .t9-bar i {
    flex: 1;
    width: auto;
  }
  .t9-foot .foot {
    text-align: left;
  }
}

/* Design review only (js/private.js, ?t9=) */

/* ?t9=0.5: the stage held at that point, alone in the viewport. */
.t9-frozen .site-header,
.t9-frozen main > :not(.p9) {
  display: none;
}
.t9-frozen .t9-pin {
  height: auto;
}

/* 10 Get it, and the footer, as one (2026-10-25, Chapter 10 Artboards, 10c).
   One closing chapter on paper that runs to the end of the page, at least a
   screen tall: the call fills what the screen leaves, the footer's lines sit
   at its foot under a hairline in the column. */
.end {
  background: var(--paper);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-top: 128px;
}
.end-call {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 128px;
}
.end .display {
  font: 800 clamp(48px, 8.4vw, 124px) / 0.98 var(--font-sans);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.end .display span {
  display: block;
}
.end .display .l2 {
  color: var(--ember);
}
.end .body {
  margin-top: 24px;
  color: var(--ink-2);
}
.end .calls {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
/* Beside the badge the quiet button takes its shape, as in the hero. */
.end .calls .pill {
  height: 52px;
  border-radius: 12px;
}
.end-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 32px;
  border-top: 1px solid var(--border);
  padding: 16px 0 28px;
}
.end-foot ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 32px;
  font: 500 15px/1.5 var(--font-sans);
}
.end-foot li,
.end-foot a {
  color: var(--ink);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.end-foot a:hover {
  color: var(--ember);
}
.end-foot .small {
  color: var(--ink-2);
  text-wrap: pretty;
}

/* Motion: the line arrives half by half, then the call, scrubbed by the
   chapter's own entry (one viewport of scroll, which the page's end allows
   exactly). --a and --b are each piece's start and end as fractions of that
   entry; --from is where it comes from. Transform and opacity only; the
   footer is still. Without view timelines (Firefox) main.js adds .in once a
   third of the chapter is in, and the same pieces play in that order. */
@keyframes end-in {
  from {
    opacity: 0;
    transform: var(--from);
  }
}
.end .display .l1 {
  --a: 0.45;
  --b: 0.62;
  --from: translateY(0.3em);
}
.end .display .l2 {
  --a: 0.54;
  --b: 0.71;
  --from: translateY(0.3em);
}
.end .body {
  --a: 0.64;
  --b: 0.8;
  --from: translateY(var(--rise));
}
.end .calls {
  --a: 0.7;
  --b: 0.86;
  --from: translateY(var(--rise));
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .end {
      view-timeline: --end block;
    }
    .end .display span,
    .end .body,
    .end .calls {
      animation: end-in both;
      animation-timing-function: var(--ease-settle);
      animation-timeline: --end;
      animation-range: entry calc(var(--a) * 100%) entry calc(var(--b) * 100%);
    }
  }
  @supports not (animation-timeline: view()) {
    .js .end:not(.in) :is(.display span, .body, .calls) {
      opacity: 0;
      transform: var(--from);
    }
    .js .end :is(.display span, .body, .calls) {
      transition:
        opacity var(--dur-reveal) var(--ease-settle),
        transform var(--dur-reveal) var(--ease-settle);
      transition-delay: calc((var(--a) - 0.45) * 2.4s);
    }
  }
}

@media (max-width: 640px) {
  .end {
    padding-top: 112px;
  }
  .end-call {
    padding-bottom: 88px;
    align-items: center;
    text-align: center;
  }
  .end .calls {
    gap: 10px;
    justify-content: center;
  }
  .end .calls .badge img {
    width: 132px;
    height: 44px;
  }
  .end .calls .pill {
    height: 44px;
    padding: 0 16px;
    border-radius: 10px;
  }
  .end-foot {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 32px;
  }
  .end-foot ul {
    gap: 0 24px;
    justify-content: center;
  }
}

/* The footer of privacy, terms and support */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 32px 0 40px;
}
.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 32px;
  font: 500 15px/1.5 var(--font-sans);
}
.site-footer li,
.site-footer a {
  color: var(--ink);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.site-footer a:hover {
  color: var(--ember);
}

/* The three pages App Review opens: one column of prose on the same system */
.article {
  width: min(720px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  padding: 56px 0 112px;
}
.article h1 {
  font: 700 var(--fs-headline) / var(--lh-headline) var(--font-sans);
  letter-spacing: var(--tr-headline);
}
.article h2 {
  font: 600 var(--fs-title) / var(--lh-title) var(--font-sans);
  letter-spacing: var(--tr-title);
  margin: 48px 0 12px;
}
.article h3 {
  font: 600 17px/22px var(--font-sans);
  margin: 28px 0 8px;
}
.article p,
.article li {
  font: 400 17px/1.6 var(--font-sans);
  color: var(--ink-2);
  text-wrap: pretty;
}
.article p + p {
  margin-top: 14px;
}
.article strong {
  color: var(--ink);
  font-weight: 600;
}
.article code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.9em;
  color: var(--ink);
}
.article .lede {
  margin-top: 20px;
  font-size: 20px;
  line-height: 1.5;
}
.article .meta {
  margin-top: 16px;
  font: 500 var(--fs-small) / var(--lh-small) var(--font-sans);
}
.article .note {
  margin-top: 24px;
  background: var(--element);
  border-radius: var(--radius-row);
  padding: 18px 20px;
  font-size: 16px;
}
.article table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 12px;
  font: 400 16px/1.5 var(--font-sans);
}
.article th,
.article td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--border);
  color: var(--ink-2);
}
.article th {
  color: var(--ink);
  font-weight: 600;
}
.article ul,
.article ol {
  padding-left: 22px;
  list-style: disc;
  margin-top: 12px;
}
.article ol {
  list-style: decimal;
}
.article li + li {
  margin-top: 6px;
}

/* Motion: reveals add a rise and a fade; the page is finished without them */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(var(--rise));
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry calc(var(--i, 0) * 5%) entry calc(40% + var(--i, 0) * 5%);
    }
  }
  @supports not (animation-timeline: view()) {
    .js .reveal:not(.in) {
      opacity: 0;
      transform: translateY(var(--rise));
    }
    .js .reveal {
      transition:
        opacity var(--dur-reveal) var(--ease-settle),
        transform var(--dur-reveal) var(--ease-settle);
      transition-delay: calc(var(--i, 0) * var(--stagger));
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  video {
    display: none;
  }
}

/* Phone */
@media (max-width: 640px) {
  .ch {
    padding-block: 96px;
  }
  :root {
    --head: 76px;
  }
  .site-nav a:not(.pill) {
    display: none;
  }
  .brand .wordmark {
    font-size: 20px;
  }
  .badge img {
    width: 120px;
    height: 40px;
  }
  .split,
  .band .split {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .chips li {
    flex: none;
    scroll-snap-align: start;
  }
  .never li {
    padding: 18px 0;
  }
  .site-footer ul {
    flex-direction: column;
    align-items: flex-start;
  }
  .article {
    padding: 32px 0 80px;
  }
  .kicker + .headline,
  .kicker + .display {
    margin-top: 12px;
  }
  .headline + .body {
    margin-top: 16px;
  }
}

/* Rhythm and small parts */
.kicker + .headline,
.kicker + .display {
  margin-top: 16px;
}
.headline + .body {
  margin-top: 20px;
}
.stagger > :nth-child(2) {
  --i: 1;
}
.stagger > :nth-child(3) {
  --i: 2;
}
.stagger > :nth-child(4) {
  --i: 3;
}
.stagger > :nth-child(5) {
  --i: 4;
}
.stagger > :nth-child(6) {
  --i: 5;
}
.stagger > :nth-child(7) {
  --i: 6;
}
.stagger > :nth-child(8) {
  --i: 7;
}
.sentinel {
  height: 1px;
}
.strong {
  font-weight: 600;
  font-size: 17px;
  line-height: 22px;
  color: var(--ink);
}
.k-ember-deep,
.c-ember-deep {
  color: var(--ember-deep);
}
/* The app's heart (components/heart-glyph.tsx): two discs on a square turned
   on its point, outlined */
.hrt {
  position: relative;
  width: 18px;
  height: 18px;
  display: block;
}
.hrt i {
  position: absolute;
  background: var(--fill);
}
.hrt i:nth-child(1),
.hrt i:nth-child(2) {
  top: 0.77px;
  width: 10.54px;
  height: 10.54px;
  border-radius: 999px;
}
.hrt i:nth-child(1) {
  left: 0;
}
.hrt i:nth-child(2) {
  left: 7.46px;
}
.hrt i:nth-child(3) {
  top: 4.5px;
  left: 3.73px;
  width: 10.54px;
  height: 10.54px;
  transform: rotate(45deg);
}
.hrt i:nth-child(n + 4) {
  background: #ffffff;
}
.hrt i:nth-child(4),
.hrt i:nth-child(5) {
  top: 2.39px;
  width: 7.3px;
  height: 7.3px;
  border-radius: 999px;
}
.hrt i:nth-child(4) {
  left: 1.62px;
}
.hrt i:nth-child(5) {
  left: 9.08px;
}
.hrt i:nth-child(6) {
  top: 6.12px;
  left: 5.35px;
  width: 7.3px;
  height: 7.3px;
  transform: rotate(45deg);
}