/* ==========================================================================
   Numbers V2 — / home
   Paper: file 01M58V99AG0HF7N0KM9M19VX94, page p-2-0, desktop SD-0, phone
   HX6-1. Round 3 order: hero SJ-0 (engine, home-3 variant; logo row from
   home-3), S2 TH-0, roster GLS-1, numbers GSQ-1, Equip Kids H33-1, fast or
   good H4E-1, end to end H6E-1, closing 18X-0, footer 19I-0 (shared partial).
   Hidden in Paper and not coded: Pick your play 11H-0, The crew E1E-1.
   Colours come from /css/tokens.css through /assets/v2.css; a raw hex
   only where Paper uses a colour with no token, and it is commented.
   ========================================================================== */

.home-page {
  --nav-h: 76px;
  --content: 1248px;
  --pad: 96px;
  background: var(--white);
}

.wrap {
  width: min(var(--content), calc(100% - var(--pad) * 2));
  margin-inline: auto;
}

.home-page h1,
.home-page h2,
.home-page h3 { text-wrap: wrap; }

/* Inter in Chrome sets body copy a touch wider than Paper's renderer
   (measured: 474.4 px vs 463 px for the S2 sub's first line). -0.012em
   reproduces Paper's line breaks exactly: 462/438/332 vs 463/438/332. */
.home-page p { letter-spacing: -0.012em; }

/* ==========================================================================
   1 / Hero — paper SJ-0. Self-contained: markup, styles and script.
   ========================================================================== */

.hero {
  position: relative;
  margin-top: calc(var(--nav-h) * -1);
  height: 100svh;
  min-height: 620px;
  padding-top: var(--nav-h);
  overflow: hidden;
  background: var(--black);
  color: var(--white);
  isolation: isolate;
  touch-action: pan-y;
}

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
}

.grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-copy {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 56px;
  text-align: center;
}

.h1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  font-size: 120px;
  line-height: 116px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--white);
  transition: opacity .16s linear;
}

.hl {
  display: flex;
  align-items: center;
  gap: 22px;
  height: 116px;
  white-space: nowrap;
}
.hl + .hl { margin-top: 8px; }

.h1 .chip {
  display: inline-flex;
  align-items: center;
  height: 110px;
  padding: 0 24px 6px 22px;
  border-radius: 14px;
  background: var(--electric);
  color: var(--ink);
  font-size: 120px;
  line-height: 110px;
  letter-spacing: -0.04em;
}

.hero .lead {
  margin: 30px 0 0;
  font-size: 20px;
  line-height: 30px;
  color: var(--body-on-black);
}

.cta-row { margin-top: 36px; display: flex; align-items: center; gap: 12px; }
.hero-note { display: none; }
.hero .btn { gap: 8px; }

/* Logo row — rebuilt from the home-3 hero (JD, addendum 1), no box.
   "Built with us" in mono, then the logos in one row on a 38 px gap, 50 px
   under the CTA, as home-3 had them. The row fades up with the lead and the
   CTA (engine fadeUp), four logos showing and nothing cut. About a second
   after it lands, home.js adds .is-running: each row slides right at 40 px/s
   (30 on a phone) and a soft 48 px edge fade comes on, so the other logos come
   through and the row is full at every moment. Each track holds two identical
   sets and travels one set width (-50% to 0), so the loop has no seam. Hover
   pauses. Reduced motion: the four stay put.
   Logo widths are optically normalised in the markup (--w, desktop px): equal
   ink area weighted by ink density, ink height capped at 26 px. --k scales
   them (0.78 on a phone, as Paper HX7-1's logos). */
@property --fade {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.hero-proof {
  --k: 1;
  --gap: 38px;
  /* Paper's GHO-1 box is the position guide: 44 + 64 px under the CTA, the
     logos centred at its middle (y 676 at 1440), so the copy above keeps
     Paper's vertical centring */
  margin: 62px 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(34px - var(--gap) / 2);   /* 34 px from the label to the first logo's ink, as home-3 */
  max-width: 100%;
}

.proof-label {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--label-on-black);
  white-space: nowrap;
}

.hero-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.rail-row {
  /* the window fits its first --n logos exactly, half a gap at each end */
  width: calc(var(--first) * var(--k) * 1px + var(--n) * var(--gap));
  max-width: 100%;
  overflow: hidden;
  --fade: 0px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
  transition: --fade .6s var(--ease-soft);
}
.rail-row--phone { display: none; }

.rail-track {
  display: flex;
  width: max-content;
  transform: translate3d(-50%, 0, 0);
  will-change: transform;
}

.rail-set {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  opacity: .88;
}
.rail-set li {
  flex: none;
  display: flex;
  align-items: center;
  height: 28px;
  padding-inline: calc(var(--gap) / 2);
}
.rail-set img {
  display: block;
  width: calc(var(--w) * var(--k) * 1px);
  height: auto;
}

.hero-rail.is-running .rail-row { --fade: 48px; }
.hero-rail.is-running .rail-track { animation: rail-slide var(--dur, 60s) linear infinite; }
.hero-rail.is-running:hover .rail-track { animation-play-state: paused; }

@keyframes rail-slide {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

@media (max-width: 1199px) {
  .hero-proof { --gap: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-rail.is-running .rail-track { animation: none; }
  .hero-rail.is-running .rail-row { --fade: 0px; }
}

.scroll-cue {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 15px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 16px;
  border: 1px solid var(--cue-line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--label-on-black);
  transition: color .18s linear, border-color .18s linear;
}
.scroll-cue:hover { color: var(--white); border-color: var(--white); }
.scroll-cue i { font-style: normal; display: inline-block; animation: cue 2.2s var(--ease-soft) infinite; }
@keyframes cue { 0%, 70%, 100% { transform: translateY(0); } 82% { transform: translateY(3px); } }

/* ==========================================================================
   2 / Top brands — Paper TH-0 (cloud ground)
   ========================================================================== */

.s2 {
  position: relative;
  z-index: 2;
  background: var(--cloud);
  border-top: 1px solid var(--hairline);
  padding: 128px 0;
}

.s2-inner {
  width: min(var(--content), calc(100% - 2 * min(var(--pad), 48px)));   /* 48 px gutters at most: copy + grid fit from 1344 up */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 42px;
}

.s2-copy { width: 486px; flex: none; }

.home-page .eyebrow { font-size: 12px; color: var(--ink); }

.s2-h {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding-top: 28px;
  font-size: 76px;
  line-height: 86px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.s2-h .row { display: flex; align-items: center; gap: 18px; height: 86px; white-space: nowrap; }

.s2-h .chip {
  display: inline-flex;
  align-items: center;
  height: 80px;
  padding: 0 15px 6px;
  border-radius: 14px;
  font-size: 76px;
  line-height: 80px;
  letter-spacing: -0.03em;
}
.s2-h .chip--ink { background: var(--ink); color: var(--white); }

.s2-sub {
  width: 470px;
  max-width: 100%;
  padding-top: 28px;
  font-size: 18px;
  line-height: 29px;
  color: var(--body-ink);
}

.s2-cta { display: flex; align-items: center; gap: 12px; padding-top: 36px; }
.s2-cta .btn { gap: 8px; }

.s2-proof { display: flex; align-items: center; gap: 8px; padding-top: 20px; }
.s2-proof svg { flex: none; }
.s2-proof span { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--mute); }

/* ---- the tile grid: 5 x 5 cells of 132, gap 15 ---- */

.s2-grid { width: 720px; max-width: 100%; flex: none; }

.tiles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: 15px;
  aspect-ratio: 1;
}

.t-pk { grid-area: 1 / 1; }
.t-rheal { grid-area: 1 / 2 / 2 / 4; }
.t-num { grid-area: 1 / 4; }
.t-kettle { grid-area: 1 / 5; }
.t-kids { grid-area: 2 / 1 / 4 / 3; }
.t-medik8 { grid-area: 2 / 3; }
.t-equipfoods { grid-area: 2 / 4 / 3 / 6; }
.t-mark { grid-area: 3 / 3; }
.t-hs { grid-area: 3 / 4; }
.t-empty1 { grid-area: 3 / 5; }
.t-super { grid-area: 4 / 1; }
.t-empty2 { grid-area: 4 / 2; }
.t-bighorn { grid-area: 4 / 3 / 5 / 5; }
.t-equip { grid-area: 4 / 5; }
.t-lineage { grid-area: 5 / 1 / 6 / 3; }
.t-dame { grid-area: 5 / 3; }
.t-empty3 { grid-area: 5 / 4; }
.t-pg { grid-area: 5 / 5; }

.tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: clip;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--white);
}
.tile img { display: block; }
.tile > img:not(.shot) { object-fit: contain; }

.tile--empty { background: var(--cloud); }

.tile--num {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 6px;
  padding: 14px;
  border: 0;
  background: var(--electric);
  color: var(--ink);
}
.tile--num .num { font-size: 40px; line-height: 40px; font-weight: 900; letter-spacing: -0.04em; }
.tile--num .cap { font-family: var(--font-mono); font-size: 10px; line-height: 14px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }

.tile--mark { background: var(--black); border-color: var(--black); }

/* work tile: photo 116 + meta, 279 x 132 */
.tile--work { justify-content: flex-start; padding: 0; }
.tile--work .shot {
  flex: none;
  width: 116px;
  height: 130px;
  object-fit: cover;
  object-position: 50% 50%;
}
.tile--work .meta {
  flex: 1 1 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  padding: 14px 10px 12px 14px;
  min-width: 0;
  text-align: left;
}
.tile--work .name { display: block; font-size: 14px; line-height: 18px; font-weight: 600; color: var(--ink); }
.tile--work .line { display: block; margin-top: 4px; font-size: 12.5px; line-height: 17px; color: var(--mute); }
.tile--work .go {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--hairline);
  border-radius: 13px;
  background: var(--white);
  color: var(--ink);
}
.tile--work:hover { border-color: var(--button-line); }
.tile--work:hover .go { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* 2 x 2 photo tile with the caption card */
.tile--2x2 { justify-content: flex-start; padding: 0; border: 0; background-color: var(--fill); }
.tile--2x2 .shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.tile--2x2 .card {
  position: absolute;
  left: 10px; right: 10px; bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px 12px 14px;
  border-radius: 9px;
  background: var(--white);
  text-align: left;
}
.tile--2x2 .name { display: block; font-size: 14px; line-height: 18px; font-weight: 600; color: var(--ink); }
.tile--2x2 .line { display: block; margin-top: 3px; font-size: 12.5px; line-height: 17px; color: var(--mute); }
.tile--2x2 .go {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 14px;
  background: var(--up);
  color: var(--ink);
}

.s2-hint { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.s2-hint svg { flex: none; }
.s2-hint span { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .02em; color: var(--mute); }

/* ==========================================================================
   7 / Closing — Paper 18X-0
   ========================================================================== */

.s7 {
  position: relative;
  overflow: clip;
  background: var(--white);
  border-top: 1px solid var(--hairline);
  padding: 144px 0;
}

/* the band is Paper's 1440 frame, centred: the parting in the rows sits under
   the copy at any width, and the section clips what falls outside */
.closing-band {
  position: absolute;
  left: calc(50% - 720px);
  top: -10px;
  width: 1440px;
  height: 648px;
  overflow: hidden;
  pointer-events: none;
  color: #E6E8EC;   /* Paper 7C9-1; a shade lighter than --hairline, no token */
  user-select: none;
}
.closing-band .row {
  height: 36px;
  padding-left: 24px;
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 36px;
  letter-spacing: 8px;
  white-space: pre;
  width: max-content;
}
.closing-band--phone { display: none; }

.closing-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.s7-h {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  font-size: 88px;
  line-height: 88px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--ink);
  white-space: nowrap;
}
.s7-l2 { display: flex; align-items: center; gap: 18px; }
.s7-h .chip {
  display: inline-flex;
  align-items: center;
  height: 82px;
  padding: 0 18px 6px;
  border-radius: 14px;
  font-size: 88px;
  line-height: 82px;
  letter-spacing: -0.03em;
}
.s7-sub {
  margin: 0;
  padding-top: 32px;
  font-size: 21px;
  line-height: 32px;
  color: var(--body-ink);
}
.s7-cta { display: flex; align-items: center; gap: 12px; padding-top: 40px; }
.s7-arrow-phone { display: none; }
.checkline { display: flex; align-items: center; gap: 8px; padding-top: 20px; }
.checkline svg { flex: none; }
.checkline .check-tick { display: none; }
.checkline span { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--mute); }

/* Paper IG0-1: 184 x 81 at (836, 300) on the 1440 section, +6deg about its
   top-left corner, 24 px past the end of "Then we ship." */
.s7-stamp {
  left: calc(50% + 116px);
  top: 155px;
  width: 184px;
  --origin: 0 0;
}

/* ==========================================================================
   responsive
   ========================================================================== */

@media (max-width: 1279px) {
  .home-page { --pad: 48px; }
}

/* S2 needs 486 + 42 + 720 = 1248 px side by side: under 1344 (1248 + two
   48 px gutters) the grid goes under the copy instead of running off-page */
@media (max-width: 1343px) {
  .s2-inner { flex-direction: column; align-items: flex-start; gap: 56px; }
  .s2-copy { width: 100%; max-width: 560px; }
  .s2-grid { width: 100%; max-width: 720px; }
}

@media (max-width: 960px) {
  .home-page { --nav-h: 56px; --pad: 48px; }
  .s2 { padding-block: 88px; }
  .s7 { padding-block: 104px; }
  .closing-band { top: -50px; }   /* the padding is 40 px less: keep the parting on the copy */
  .s2-h { font-size: 64px; line-height: 72px; }
  .s2-h .row { height: 72px; gap: 14px; }
  .s2-h .chip { height: 66px; line-height: 66px; font-size: 64px; padding: 0 13px 5px; border-radius: 12px; }
  .s7-h { font-size: 68px; line-height: 70px; }
  .s7-h .chip { height: 64px; line-height: 64px; font-size: 68px; border-radius: 12px; padding: 0 14px 5px; }
}

@media (max-width: 767px) {
  .home-page { --pad: 20px; }
  .s2 { padding-block: 64px; }

  /* hero: phone sizes (brand sheet 52 / 54, chip 48) */
  .hero { min-height: 100svh; height: auto; }
  /* Paper HX7-1 (minus its 62 px status bar): H1 at 210, sub 342, button
     418 (300 x 52), note 482, logos 538 */
  .hero-copy { padding: 150px 20px 72px; justify-content: flex-start; }
  .h1 { font-size: 52px; line-height: 54px; gap: 4px; }
  .hl { height: 54px; gap: 10px; }
  .hl + .hl { margin-top: 0; }
  .h1 .chip { height: 48px; line-height: 48px; padding: 0 12px 3px 10px; border-radius: 10px; font-size: 52px; }
  .hero .lead { margin-top: 24px; font-size: 17px; line-height: 26px; max-width: 300px; }
  .cta-row { margin-top: 24px; width: 300px; }
  .hero .cta-row .btn { width: 100%; height: 52px; gap: 10px; font-size: 17px; }
  .hero-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 12px 0 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    color: var(--body-on-black);
  }
  .hero-note svg { flex: none; }
  .scroll-cue { display: none; }

  /* S2: Paper HYJ-1 (390 x 774). White, the copy on 24 px gutters, both
     buttons full width, and the tiles become a swipe rail of six 132 px
     tiles (0.1%, Perfect Keto, Medik8, Kettle & Fire, Heart & Soil, mark). */
  .s2 { background: var(--white); border-top: 0; }
  .s2-inner { width: calc(100% - 48px); gap: 32px; }
  .s2-h { gap: 2px; padding-top: 20px; font-size: 52px; line-height: 54px; letter-spacing: -0.04em; }
  .s2-h .row { height: 54px; gap: 12px; }
  .s2-h .row:last-child { height: 58px; padding-top: 4px; }
  .s2-h .chip { height: 50px; padding: 0 5px 2px; border-radius: 10px; font-size: 52px; line-height: 50px; letter-spacing: -0.04em; }
  .s2-sub { width: auto; padding-top: 20px; font-size: 17px; line-height: 27px; }
  .s2-cta { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 20px; }
  .s2-cta .btn { width: 100%; height: 52px; padding-inline: 24px; font-size: 17px; }
  .s2-cta .btn--ghost::after {
    content: "";
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .s2-proof, .s2-hint { display: none; }

  .s2-grid { width: calc(100% + 24px); max-width: none; margin-right: -24px; }
  .tiles {
    display: flex;
    gap: 9px;
    aspect-ratio: auto;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-right: 24px;
  }
  .tiles::-webkit-scrollbar { display: none; }
  .tiles > * { display: none; }
  .tiles > .t-num, .tiles > .t-pk, .tiles > .t-medik8, .tiles > .t-kettle, .tiles > .t-hs, .tiles > .t-mark {
    display: flex;
    flex: 0 0 132px;
    height: 132px;
    scroll-snap-align: start;
  }
  .t-num { order: 1; }
  .t-pk { order: 2; }
  .t-medik8 { order: 3; }
  .t-kettle { order: 4; }
  .t-hs { order: 5; }
  .t-mark { order: 6; }

  /* logo row: label over two rows of two, as Paper HX7-1 (home-3 stacks it
     the same way); each row slides right on its own */
  .hero-proof { --k: .78; --gap: 22px; margin: 38px 0 0; flex-direction: column; gap: 12px; }
  .hero-rail.is-running .rail-row { --fade: 32px; }
  .proof-label { font-size: 10px; letter-spacing: .08em; }
  .rail-row--wide { display: none; }
  .rail-row--phone { display: block; }
  .rail-set li { height: 22px; }




  /* closing: Paper IDO-1 (390 x 672). Two grid rows top and bottom of the
     headline, the headline on two lines, full-width buttons, the stamp in its
     own 70 px row under the sub. */
  .s7 { padding: 103px 0 46px; }   /* + the 1 px top border = Paper's 104 */
  .closing-band { display: none; }
  .closing-band--phone {
    display: block;
    left: calc(50% - 150px);
    top: 47px;
    width: 300px;
    height: 216px;
  }
  .closing-band--phone .row { padding-left: 0; }
  .closing-content { width: 350px; max-width: calc(100% - 40px); }
  .s7-h { flex-direction: column; gap: 0; font-size: 48px; line-height: 54px; }
  .s7-l1, .s7-l2 { height: 54px; }
  .s7-l2 { gap: 12px; }
  .s7-h .chip { height: 48px; padding: 0 10px; border-radius: 10px; font-size: 48px; line-height: 54px; }
  .s7-sub { padding-top: 88px; font-size: 17px; font-weight: 500; line-height: 26px; }
  .closing-content .s7-stamp { position: relative; left: auto; top: auto; width: 140px; margin: 16px 0 4px; --origin: 50% 50%; }
  .closing-content .s7-stamp img { height: 62px; }
  .s7-cta { flex-direction: column; align-self: stretch; gap: 10px; padding-top: 16px; }
  .s7-cta .btn { width: 100%; height: 52px; justify-content: center; gap: 10px; font-size: 17px; }
  .s7-arrow-phone { display: block; }
  .checkline { padding-top: 16px; }
  .checkline .check-dot { display: none; }
  .checkline .check-tick { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .grain { display: none; }
  .scroll-cue i { animation: none; }
}

/* ==========================================================================
   4 / Numbers go up — Paper GSQ-1: the section shell. Its two halves are
   §4a (ticker, header, act 1) and §4b (act 2,
   act 3, finale).
   ========================================================================== */
.s-num {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 128px;
  overflow: clip;
  background: var(--black);
  color: var(--white);
}
@media (max-width: 767px) {
  .s-num { padding-bottom: 72px; }   /* Paper I1X-1 */
}

/* ==========================================================================
   Stickers and accents — shared component (STICKER-PLAN.md §3)
   ========================================================================== */

/* ==========================================================================
   Home stickers and accents — the behaviours in STICKER-PLAN.md §3.
   One component: <span class="stk" data-stk="slap|swing|stamp|reward"
   style="--tilt:-3deg"><img ...></span>, absolutely placed by its section's
   CSS (the section is position: relative). A receipt prints from a slot:
   <span class="stk-slot" data-stk="print" style="--tilt:-2deg"><img></span>.
   home.js adds .stk-in when the moment comes. Without JS, or with reduced
   motion, every piece is simply there.
   ========================================================================== */

.stk {
  position: absolute;
  z-index: 3;
  display: block;
  pointer-events: none;
  transform: rotate(var(--tilt, 0deg));
  transform-origin: var(--origin, 50% 50%);
}
.stk img { display: block; width: 100%; height: auto; }

@media (prefers-reduced-motion: no-preference) {
  /* waiting for its moment (only when the sticker script runs) */
  .js .stk[data-stk]:not(.stk-in) { opacity: 0; }
  .js .stk-slot[data-stk="print"]:not(.stk-in) img { transform: translateY(-100%); }

  /* SLAP (and REWARD, which SLAPs when its numbers land) */
  .stk[data-stk="slap"].stk-in,
  .stk[data-stk="reward"].stk-in { animation: stk-slap 440ms cubic-bezier(.2, .9, .25, 1.15) both; }

  /* SWING: from tilt + 14deg to tilt, three damped swings, origin at the clip */
  .stk[data-stk="swing"].stk-in {
    animation: stk-swing 1.4s linear(0, .38 6%, .82 13%, 1.14 20%, 1.22 26%, 1.12 33%, .95 41%, .88 47%, .93 55%, 1.03 64%, 1.04 72%, 1 82%, .99 90%, 1) both;
  }

  /* STAMP */
  .stk[data-stk="stamp"].stk-in { animation: stk-stamp 260ms cubic-bezier(.5, 0, .3, 1) both; }

  /* PRINT: steps(12) out of the slot, then torn off to its tilt */
  .stk-slot[data-stk="print"].stk-in img {
    animation: stk-print 1.1s steps(12, end) both, stk-tear 200ms var(--ease-soft) 1.1s both;
  }
}

.stk-slot {
  position: absolute;
  z-index: 3;
  display: block;
  pointer-events: none;
  /* clip only the top edge: that edge is the printer's slot */
  clip-path: inset(0 -60px -60px -60px);
}
.stk-slot img {
  display: block;
  width: 100%;
  height: auto;
  transform: rotate(var(--tilt, 0deg));
  transform-origin: 50% 0;
}

@keyframes stk-slap {
  from { opacity: 0; transform: translateY(-28px) rotate(calc(var(--tilt, 0deg) + 9deg)) scale(1.22); }
  62%  { opacity: 1; transform: rotate(calc(var(--tilt, 0deg) - 1.5deg)) scale(.97); }
  to   { opacity: 1; transform: rotate(var(--tilt, 0deg)) scale(1); }
}
@keyframes stk-swing {
  from { opacity: 1; transform: rotate(calc(var(--tilt, 0deg) + 14deg)); }
  to   { opacity: 1; transform: rotate(var(--tilt, 0deg)); }
}
@keyframes stk-stamp {
  from { opacity: 0; transform: rotate(var(--tilt, 0deg)) scale(1.7); }
  55%  { opacity: .96; transform: rotate(var(--tilt, 0deg)) scale(.94); }
  to   { opacity: 1; transform: rotate(var(--tilt, 0deg)) scale(1); }
}
@keyframes stk-print {
  from { transform: translateY(-100%) rotate(0deg); }
  to   { transform: translateY(0) rotate(0deg); }
}
@keyframes stk-tear {
  from { transform: rotate(0deg); }
  to   { transform: rotate(var(--tilt, 0deg)); }
}

/* the thwack: the thing a sticker or stamp lands on dips for a beat */
.stk-thwack { transform: translateY(var(--thwack, 1px)); transition: transform 60ms linear; }

/* PEEL (desktop, after it has landed): lift and curl the nearest corner */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .stk.stk-done { pointer-events: auto; transition: transform 240ms var(--ease-soft); animation: none; opacity: 1; }
  .stk.stk-done:hover { transform: translateY(-5px) rotate(calc(var(--tilt, 0deg) + 2deg)); transition-duration: 180ms; }
  .stk.stk-done[data-stk="swing"]:hover { animation: stk-nudge 700ms var(--ease-soft); transform: rotate(var(--tilt, 0deg)); }
  .stk.stk-done img { transition: -webkit-mask-position 180ms ease-out; }
  .stk.stk-done:not([data-stk="swing"]):hover img {
    -webkit-mask-image: linear-gradient(var(--peel-a, 225deg), transparent 0 12%, #000 12%);
            mask-image: linear-gradient(var(--peel-a, 225deg), transparent 0 12%, #000 12%);
  }
  .stk.stk-done::after {
    content: "";
    position: absolute;
    width: 46px;   /* the 12% mask cut on a ~190 px sticker */
    height: 46px;
    top: var(--peel-t, 0);
    right: var(--peel-r, 0);
    bottom: var(--peel-b, auto);
    left: var(--peel-l, auto);
    background: linear-gradient(var(--peel-g, 225deg), transparent 0 47.5%, #D9DDE2 48%, #FFFFFF 54%);
    border-radius: 2px;
    opacity: 0;
    transform: scale(.6);
    transform-origin: var(--peel-o, 100% 0);
    transition: opacity 180ms ease-out, transform 180ms ease-out;
    filter: drop-shadow(-2px 3px 3px rgba(10, 12, 15, .22));
  }
  .stk.stk-done:not([data-stk="swing"]):not([data-stk="stamp"]):hover::after { opacity: 1; transform: scale(1); }
}
@keyframes stk-nudge {
  0%   { transform: rotate(var(--tilt, 0deg)); }
  30%  { transform: rotate(calc(var(--tilt, 0deg) + 5deg)); }
  60%  { transform: rotate(calc(var(--tilt, 0deg) - 2deg)); }
  100% { transform: rotate(var(--tilt, 0deg)); }
}

/* phone: a tap gives a 2 degree wiggle */
.stk.stk-wiggle { animation: stk-wiggle 320ms var(--ease-soft); }
@keyframes stk-wiggle {
  0%, 100% { transform: rotate(var(--tilt, 0deg)); }
  35% { transform: rotate(calc(var(--tilt, 0deg) + 2deg)); }
  70% { transform: rotate(calc(var(--tilt, 0deg) - 1deg)); }
}

/* ==========================================================================
   3 / Roster — Paper GLS-1 (phone HZO-1)
   ========================================================================== */

/* ==========================================================================
   S3 / Roster — Paper GLS-1 (desktop, 1440 x 1372), HZO-1 (phone, 390 x 1256).
   Centered column: header GLT-1, the typographic lineup board GNR-1 closed by
   the ink shelf edge HA3-1 (sticker 09 hangs off it, HA5-1, SWING), the
   Gustin quote 6IP-1, the CTA GPN-1. Prefix ro-.
   The board scales with the viewport below 1440 (--u = 1px at 1440) so its
   five rows keep Paper's line breaks at every desktop width.
   ========================================================================== */

.ro {
  --u: min(1px, calc(100vw / 1440));
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  padding-block: 128px;
  background: var(--white);
  overflow: clip;
}

/* ---------- header GLT-1 ---------- */
.ro-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.ro .ro-eyebrow {
  margin: 0;
  font-size: 12px;
  color: var(--ink);
}
.ro-h {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 64px;
  line-height: 68px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.ro-h-b {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
}
.ro-chip {
  display: flex;
  align-items: center;
  height: 62px;
  padding: 0 13px 4px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--white);
  line-height: 62px;
}
.ro-lead {
  margin: 0;
  font-size: 20px;
  line-height: 30px;
  color: var(--body-ink);
}

/* ---------- the lineup board GNR-1 ---------- */
.ro-board {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;              /* row gap 8 + the shelf's margin-top 24 */
}
.ro-wall {
  list-style: none;
  padding: 0;
  /* the rows' 8 px gap is carried as 4 px above and below every item (so the
     zero-height row breaks add nothing); this cancels the outer 4 px */
  margin: calc(-4 * var(--u)) 0;
  width: calc(1400 * var(--u));   /* wider than the 1248 column: Chrome sets Inter 900 wider than Paper */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: calc(22 * var(--u));
}
.ro-wall > li { display: contents; }
.ro-name,
.ro-sl,
.ro-ph { margin-block: calc(4 * var(--u)); flex: none; }

.ro-name {
  display: inline-flex;
  align-items: flex-start;
  gap: calc(2 * var(--u));
  font-family: var(--font-ui);
  font-size: calc(76 * var(--u));
  line-height: calc(88 * var(--u));
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--ink);
  white-space: nowrap;
  text-decoration: none;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.1em;
}
.ro-name:hover { text-decoration-line: underline; }

.ro-sl {
  font-style: normal;
  font-family: var(--font-ui);
  font-size: calc(76 * var(--u));
  line-height: calc(88 * var(--u));
  font-weight: 300;
  color: var(--button-line);   /* Paper #CDD1D7 */
}

.ro-ph {
  display: block;
  width: calc(128 * var(--u));
  height: calc(80 * var(--u));
  border-radius: calc(18 * var(--u));
  object-fit: cover;
  transform: rotate(var(--r, 0deg));
}

/* the money-green case-study mark */
.ro-mark {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  margin-top: calc(6 * var(--u));
  border-radius: 50%;
  background: var(--up);
  transition: transform .18s var(--ease-soft);
}
.ro-mark svg {
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  fill: none;
  stroke: var(--white);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ro-name--case:hover .ro-mark { transform: translate(2px, -2px); }

/* row breaks: .ro-br--d ends a desktop row, .ro-br--m a phone row */
.ro-br { display: none; flex-basis: 100%; height: 0; }
.ro-br--d { display: block; }

/* the shelf edge HA3-1; sticker 09 is a shelf talker clipped to it */
.ro-shelf {
  position: relative;
  height: 2px;
  background: var(--ink);
}
/* Paper HA5-1: 170 x 177, right 24 inside the shelf, top 18 above it, +3deg
   about its top-left. Here it swings about the clip point where the shelf
   crosses it (50% 10.7%); top/right are offset by (1.1, 4.4) px so the
   settled sticker sits exactly where Paper's does. */
.ro .ro-stk {
  --origin: 50% 10.7%;
  width: calc(170 * var(--u));
  right: calc(25.1 * var(--u));
  top: calc(-13.6 * var(--u));
}

/* ---------- quote 6IP-1 ---------- */
.ro-quote {
  margin: 0;
  width: min(880px, 100% - 96px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.ro-q { margin: 0; }
.ro .ro-q p {
  margin: 0;
  font-size: 36px;
  line-height: 42px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-align: center;
  text-wrap: balance;
}
.ro-by {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ro-by-img {
  flex: none;
  display: block;
  width: 48px;
  height: 48px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  object-fit: cover;
}
.ro-by-txt { display: flex; flex-direction: column; gap: 2px; }
.ro-by-name {
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  color: var(--ink);
}
.ro-by-role {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}

/* ---------- CTA GPN-1 ---------- */
.ro-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding-top: 8px;
}
.ro-btn { gap: 8px; }
.ro .ro-legend {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--mute);
}
.ro .ro-mark--legend {
  width: 20px;
  height: 20px;
  margin: 0;
}
.ro .ro-mark--legend svg { width: 12px; height: 12px; }

/* under 1024 the scaled shelf talker would brush the quote's first line */
@media (max-width: 1023px) {
  .ro .ro-stk { display: none; }
}

/* ---------- phone: HZO-1 ---------- */
@media (max-width: 767px) {
  .ro {
    --um: min(1px, calc(100vw / 390));
    gap: 40px;
    padding-block: 72px;
    border-top: 1px solid var(--hairline);
  }

  .ro-head { width: calc(100% - 48px); gap: 16px; }
  .ro-h {
    font-size: 44px;
    line-height: 48px;
    font-weight: 900;
    letter-spacing: -0.035em;
  }
  .ro-h-a { display: block; }
  .ro-h-b { gap: 10px; padding-top: 4px; }
  .ro-chip {
    height: 44px;
    padding: 0 4px 2px;
    border-radius: 9px;
    line-height: 44px;
    letter-spacing: -0.04em;
  }
  .ro-lead { font-size: 17px; line-height: 26px; }

  .ro-board { gap: 40px; }
  .ro-wall {
    width: calc(378 * var(--um));   /* Paper's box is 342; rows are centered and broken by hand */
    margin: calc(-2 * var(--um)) 0;
    column-gap: calc(10 * var(--um));
  }
  .ro-name,
  .ro-ph { margin-block: calc(2 * var(--um)); }
  .ro-name {
    gap: calc(2 * var(--um));
    font-size: calc(38 * var(--um));
    line-height: calc(44 * var(--um));
  }
  .ro-sl { display: none; }
  .ro-ph {
    width: calc(60 * var(--um));
    height: calc(38 * var(--um));
    border-radius: calc(10 * var(--um));
    transform: rotate(var(--rm, 0deg));
  }
  .ro-mark {
    width: calc(18 * var(--um));
    height: calc(18 * var(--um));
    margin-top: calc(2 * var(--um));
  }
  .ro-mark svg {
    width: calc(9 * var(--um));
    height: calc(9 * var(--um));
    stroke-width: 2;
  }
  .ro-br--d { display: none; }
  .ro-br--m { display: block; }

  .ro-shelf { width: calc(100% - 48px); }
  /* no shelf talker on phone, per plan (hidden from 1023 down, above) */

  .ro-quote { width: calc(100% - 48px); gap: 18px; }
  .ro .ro-q p { font-size: 26px; line-height: 31px; text-wrap: wrap; }
  .ro-by { gap: 12px; }
  .ro-by-img { width: 40px; height: 40px; }
  .ro-by-name { font-size: 14px; font-weight: 500; }
  .ro-by-role { font-size: 10px; }

  .ro-cta { width: 100%; gap: 14px; padding-top: 0; }
  .ro-btn {
    width: calc(100% - 48px);
    height: 52px;
    padding: 0 24px;
    font-size: 17px;
  }
  .ro .ro-legend { font-size: 14px; line-height: 20px; }
  .ro .ro-mark--legend { width: 18px; height: 18px; }
  .ro .ro-mark--legend svg { width: 9px; height: 9px; stroke-width: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .ro-mark { transition: none; }
  .ro-name--case:hover .ro-mark { transform: none; }
}

/* ==========================================================================
   4a / Numbers go up, top: ticker GXS-1, header GXB-1, act 1 GXN-1
   ========================================================================== */

/* ==========================================================================
   S5 Numbers go up — top half (numbers-a, prefix na-)
   Paper GSQ-1 children GXS-1 (ticker), GXB-1 (header), GXN-1 (Act 1);
   phone I1X-1 children I1Y-1, I3M-1, I3Y-1.
   The section (.s-num, black, flex column centred) lives in home.css.
   GSQ-1 has no flex gap: each block carries its own padding-top (120 / 64).
   ========================================================================== */

/* ---------- Ticker tape GXS-1: raised strip, loops left ---------- */
.na-ticker {
  align-self: stretch;
  height: 56px;
  display: flex;
  align-items: center;
  padding-left: 24px;
  overflow: clip;
  background: var(--raised);
  border-bottom: 1px solid var(--line);
}
.na-tk-track {
  display: flex;
  flex: none;
  width: max-content;
}
.na-tk-set {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: none;
  margin: 0;
  padding: 0 28px 0 0;          /* the gap after the trailing dot: one period */
  list-style: none;
}
.na-tk-item {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: none;
}
.na-tk-item::after {            /* the 4 px dot between facts */
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: var(--btn-line-on-black);
  flex: none;
}
.na-tk-fact {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 16px;
  white-space: nowrap;
}
.na-tk-tri { width: 10px; height: 10px; flex: none; fill: var(--electric); }
.na-tk-val { font-weight: 700; letter-spacing: 0.04em; color: var(--electric); }
.na-tk-lbl { font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); }

@media (prefers-reduced-motion: no-preference) {
  .na-tk-track { animation: na-tk var(--na-tk-dur, 60s) linear infinite; }
  .na-ticker:hover .na-tk-track { animation-play-state: paused; }
}
@keyframes na-tk {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Header GXB-1 ---------- */
.na-head {
  width: min(var(--content), calc(100% - var(--pad) * 2));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding-top: 120px;
  text-align: center;
}
.na-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--raised);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}
.home-page .na-eyebrow { letter-spacing: 0.08em; }
.na-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--electric);
  flex: none;
}
/* 128 px at 1440; below ~1100 the two lines scale with the viewport so the
   longer line ("It's in the name.", ~7.4em in Chrome) always fits. */
.na-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-family: var(--font-ui);
  font-size: min(128px, calc((100vw - 96px) / 7.8));
  line-height: 0.96875;         /* 124 / 128 */
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--white);
  text-wrap: nowrap;
}
.na-title-l1 { display: block; white-space: nowrap; }
.na-title-l2 {
  display: flex;
  align-items: center;
  gap: 0.171875em;              /* 22 */
  padding-top: 0.125em;         /* 16 */
  white-space: nowrap;
}
.na-chip {
  display: flex;
  align-items: center;
  height: 0.921875em;           /* 118 */
  padding: 0 0.1015625em 0.0390625em;   /* 0 13 5 */
  border-radius: 0.125em;       /* 16 */
  background: var(--white);
  color: var(--ink);
  line-height: 0.921875;
}
.na-lead {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 22px;
  line-height: 32px;
  color: var(--body-on-black);
}

/* ---------- Act 1 GXN-1 ---------- */
.na-act {
  width: min(var(--content), calc(100% - var(--pad) * 2));
  display: flex;
  flex-direction: column;
  padding-top: 120px;
}
.na-sub {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.na-sub-title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 48px;
  line-height: 52px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--white);
  text-wrap: wrap;
}
.na-sub-count,
.na-axis {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--label-on-black);
}
.home-page .na-sub-count,
.home-page .na-axis { letter-spacing: 0.08em; }
.na-sub-count { flex: none; }

.na-chart {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 56px;
}
.na-plot {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  height: 600px;                /* 30 px per x; border-box, as Paper */
  border-bottom: 1px solid var(--btn-line-on-black);
}
.na-grid {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--at);
  height: 1px;
  border-top: 1px dashed var(--line);
  pointer-events: none;
}
.na-tick {
  position: absolute;
  left: -52px;
  bottom: var(--at);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--btn-line-on-black);
}

/* a bar: 300 wide at 1440, to scale in height; narrower screens shrink width only */
.na-bar {
  --r: 20px;
  position: relative;
  flex: 1 1 0;
  max-width: 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--raised);
  color: var(--white);
  text-decoration: none;
  container-type: inline-size;
  transition: border-color 180ms var(--ease-soft);
}
.na-bar--hs { height: 300px; }
.na-bar--rh { height: 360px; }
.na-bar--eq { height: 540px; }
.na-bar--an { height: 600px; }
.na-bar--electric { background: var(--electric); border-color: var(--electric); color: var(--ink); }

/* 112 px in a 300 px bar (242 content); scales with the bar in between */
.na-num {
  display: flex;
  align-items: flex-start;
  font-family: var(--font-ui);
  font-size: min(112px, 46.28cqi);   /* 112 on a 242 px content box */
  line-height: 0.928571;        /* 104 / 112 */
  font-weight: 900;
  letter-spacing: -0.04em;
  white-space: nowrap;
}
.na-tilde {
  padding-top: 0.21875em;       /* 14 on 64 */
  font-size: 0.571429em;        /* 64 on 112 */
  line-height: 1;
}
.na-digits { display: inline-flex; justify-content: flex-end; }
.na-counting .na-digits { font-variant-numeric: tabular-nums; }

.na-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}
.na-who { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.na-logo { display: block; height: 30px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.na-bar--hs .na-logo { width: 140px; }
.na-bar--rh .na-logo { width: 60px; object-position: center; }
.na-bar--eq .na-logo { width: 100px; object-position: center; }
.na-bar--an .na-logo { width: 112px; object-position: center; }
.na-rev {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--label-on-black);
}
.na-bar--electric .na-rev { color: var(--ink); }
.na-go {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: 1px solid var(--btn-line-on-black);
  border-radius: 10px;
  background: #1B1F24;          /* Paper's badge fill, no token (between --raised and --line) */
  transition: background-color 180ms var(--ease-soft), border-color 180ms var(--ease-soft);
}
.na-go svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--electric);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 180ms var(--ease-soft);
}
.na-bar--electric .na-go { background: var(--ink); border-color: var(--ink); }

@media (hover: hover) {
  .na-bar:hover { border-color: var(--btn-line-on-black); }
  .na-bar:hover .na-go { background: var(--electric); border-color: var(--electric); }
  .na-bar:hover .na-go svg { stroke: var(--ink); }
  .na-bar--electric:hover { border-color: var(--electric); }
  .na-bar--electric:hover .na-go { background: var(--white); border-color: var(--white); }
}
.na-bar:focus-visible { outline: 2px solid var(--electric); outline-offset: 4px; }

/* sticker 01 (H31-1): on the electric bar's right edge. The bar's top sits
   1 px above the plot (600 tall in a 599 content box), so top 196 - 1. */
.na-stk {
  right: -84px;
  top: 195px;
  width: 190px;
}

.na-axis--desk { display: flex; justify-content: space-between; gap: 24px; }
.na-axis--phone { display: none; }

/* the climb: bars grow up from the baseline (clip, so the type never squashes) */
@media (prefers-reduced-motion: no-preference) {
  .js .na-plot:not(.na-in) .na-bar { clip-path: inset(100% 0 0 0 round var(--r)); }
  .js .na-plot .na-bar {
    clip-path: inset(0 0 0 0 round var(--r));
    transition: clip-path 900ms var(--ease-out) var(--d, 0ms), border-color 180ms var(--ease-soft);
  }
}

/* ---------- in between: desktop layout, narrower ---------- */
@media (max-width: 1279px) {
  .na-tick { left: -40px; }
  .na-stk { right: -32px; }      /* 16 px clear of the viewport at --pad 48 */
}
@media (max-width: 1023px) {
  .na-bar { padding: 20px; }
  .na-go { display: none; }
  .na-sub-title { font-size: 40px; line-height: 44px; }
  .na-stk { right: -24px; width: 150px; }
}

/* ---------- phone: I1Y-1, I3M-1, I3Y-1 ---------- */
@media (max-width: 767px) {
  .na-ticker { height: 44px; }
  .na-tk-set { gap: 18px; padding-right: 18px; }
  .na-tk-item { gap: 18px; }
  .na-tk-item::after { width: 3px; height: 3px; }
  .na-tk-fact { gap: 8px; font-size: 11px; line-height: 14px; }
  .na-tk-tri { width: 8px; height: 8px; }

  .na-head { width: calc(100% - 48px); gap: 18px; padding-top: 64px; }
  .na-title { gap: 0; font-size: 48px; line-height: 52px; }
  .na-title-l2 { gap: 10px; padding-top: 6px; }
  .na-chip { height: 48px; padding: 0 5px 2px; border-radius: 9px; line-height: 48px; }
  .na-lead { font-size: 17px; line-height: 26px; }

  .na-act { width: calc(100% - 48px); gap: 24px; padding-top: 64px; }
  .na-sub { flex-direction: column-reverse; align-items: stretch; justify-content: flex-start; gap: 8px; padding-bottom: 14px; }
  .na-sub-title { font-size: 28px; line-height: 32px; }
  .na-sub-count { font-size: 10px; }
  .na-chart { gap: 24px; padding-top: 0; }

  /* the bars run horizontally: 17.1 px per x (342 = 20x) */
  .na-plot {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    height: auto;
    border-bottom: 0;
    border-left: 1px solid var(--btn-line-on-black);
  }
  .na-grid, .na-tick { display: none; }
  .na-bar {
    --r: 14px;
    flex: none;
    max-width: none;
    height: 76px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border-radius: var(--r);
    container-type: normal;
  }
  .na-bar--hs { width: 50%; height: 76px; }        /* 171 / 342 */
  .na-bar--rh { width: 59.94%; height: 76px; }     /* 205 / 342 */
  .na-bar--eq { width: 90.06%; height: 76px; }     /* 308 / 342 */
  .na-bar--an { width: 100%; height: 76px; }       /* 342 / 342 */
  .na-num { font-size: 40px; line-height: 44px; align-items: baseline; }
  .na-tilde { padding-top: 0; font-size: 1em; line-height: inherit; }
  .na-rev, .na-go { display: none; }
  .na-logo { height: 20px; }
  .na-bar--hs .na-logo { width: 62px; object-position: center; }
  .na-bar--rh .na-logo { width: 44px; }
  .na-bar--eq .na-logo { width: 70px; }
  .na-bar--an .na-logo { width: 80px; }

  /* sticker 01 phone node I66-1: the chart's empty top right */
  .na-stk { right: -8px; top: -18px; width: 112px; }

  .na-axis--desk { display: none; }
  .na-axis--phone { display: block; font-size: 10px; }

  @media (prefers-reduced-motion: no-preference) {
    .js .na-plot:not(.na-in) .na-bar { clip-path: inset(0 100% 0 0 round var(--r)); }
  }
}

/* ==========================================================================
   4b / Numbers go up, bottom: act 2 GZH-1, act 3 H0A-1, finale H2H-1
   ========================================================================== */

/* ==========================================================================
   r3 numbers-b: bottom half of S5 "Numbers go up" (Paper GSQ-1, phone I1X-1)
   Act 2 GZH-1 / I4J-1 · Act 3 H0A-1 / I56-1 · Finale H2H-1 / I68-1.
   Lives inside <section class="s-num" id="numbers"> (home.css: black, flex
   column centered, padding-bottom 128, overflow clip).
   ========================================================================== */

.s-num {
  --nb-w: min(1248px, calc(100% - var(--pad, 96px) * 2));
}

/* ---------- shared act chrome ---------- */

.nb-act { display: flex; flex-direction: column; width: var(--nb-w); padding-top: 120px; }

.nb-sub {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.nb-sub-title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 48px;
  font-weight: 800;
  line-height: 52px;
  letter-spacing: -0.03em;
  color: var(--white);
}
.nb-sub--act3 { width: var(--nb-w); } /* .nb-act3 is full bleed */

.nb-sub-no,
.nb-no {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--label-on-black);
  white-space: nowrap;
}

/* ---------- Act 2 · three editorial rows ---------- */

.nb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 40px;
  border-bottom: 1px solid var(--line);
}
.nb-row--07 { border-bottom: 0; }

.nb-big {
  font-family: var(--font-ui);
  font-size: var(--nb-big, 112px);
  font-weight: 900;
  line-height: 112px;
  letter-spacing: -0.04em;
  color: var(--white);
  white-space: nowrap;
}
.nb-big--07 { font-size: calc(var(--nb-big, 112px) * 104 / 112); }
.nb-ph-br { display: none; }

/* $100M in the electric chip (GZV-1) */
.nb-chip {
  display: inline-flex;
  align-items: center;
  height: 112px;
  padding: 0 11px 4px;
  border-radius: 14px;
  background: var(--electric);
  color: var(--ink);
  vertical-align: top;
}

.nb-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  flex-shrink: 0;
  width: 360px;
}
.nb-logo {
  width: 110px;
  height: 30px;
  object-fit: contain;
  object-position: left center;
}
.nb-meta .nb-label {
  font-size: 22px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.01em;
  color: var(--white);
}
.nb-note {
  font-size: 17px;
  line-height: 26px;
  color: var(--body-on-black);
}

/* ---------- Act 3 · the receipt tape ---------- */

.nb-act3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: 120px;
}

.nb-band {
  display: flex;
  align-items: center;
  width: 100%;
  height: 420px;
  flex-shrink: 0;
}

/* The tape (H0F-1): one unit wide, Paper's left -236 at 1440 (centre - 956),
   rotated -2deg about its own centre. The units carry the white paper. */
.nb-tape {
  position: relative;
  left: calc(50% - 956px);
  flex-shrink: 0;
  width: max-content;
  rotate: -2deg;
  transform-origin: 50% 50%;
}
.nb-tape-track {
  position: relative;
  animation: nb-print-right 80s linear infinite;
  will-change: transform;
}
.nb-tape:hover .nb-tape-track,
.nb-band.is-off .nb-tape-track { animation-play-state: paused; }

@keyframes nb-print-right { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes nb-print-down { from { transform: translateY(0); } to { transform: translateY(100%); } }

.nb-unit {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: var(--nb-unit-w, auto);
  padding: 36px 200px 36px 80px;
  background: var(--white);
  color: var(--ink);
}
.nb-unit--before,
.nb-unit--after { position: absolute; top: 0; }
.nb-unit--before { left: -100%; }
.nb-unit--after { left: 100%; }

/* Torn edges (H2C-1 / H2E-1): 8 px zigzag teeth, 12 px tall, 11 px proud. */
.nb-unit::before,
.nb-unit::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 12px;
  background: var(--white);
  -webkit-mask: var(--nb-teeth) 0 0 / 16px 12px repeat-x;
          mask: var(--nb-teeth) 0 0 / 16px 12px repeat-x;
}
.nb-unit::before {
  top: -11px;
  --nb-teeth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12'%3E%3Cpath d='M0 12L8 0l8 12z'/%3E%3C/svg%3E");
}
.nb-unit::after {
  bottom: -11px;
  --nb-teeth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12'%3E%3Cpath d='M0 0l8 12 8-12z'/%3E%3C/svg%3E");
}

.nb-r-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  align-self: stretch;
  width: 150px;
  min-height: 168px;
  padding-right: 24px;
  box-sizing: border-box;
}
.nb-r-id { display: flex; flex-direction: column; gap: 6px; }
.nb-r-brand,
.nb-r-id,
.nb-r-n,
.nb-r-who,
.nb-r-thanks {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nb-r-brand,
.nb-r-who,
.nb-r-thanks { color: var(--ink); }
.nb-r-id,
.nb-r-n { color: var(--quiet); }

.nb-r-line {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-shrink: 0;
  padding-inline: 32px;
  border-left: 1px dashed var(--button-line);
}
.nb-r-top { display: flex; justify-content: space-between; gap: 16px; }
.nb-r-num {
  font-family: var(--font-ui);
  font-size: 72px;
  font-weight: 900;
  line-height: 72px;
  letter-spacing: -0.04em;
  color: var(--ink);
  white-space: nowrap;
}
.nb-r-label {
  width: 250px;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  color: var(--body-ink);
}
.nb-r-tail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  padding-left: 32px;
  border-left: 1px dashed var(--button-line);
}
.nb-r-bars { width: 80px; height: 64px; fill: var(--ink); }

/* ---------- Finale · 12 + closer ---------- */

.nb-finale {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: 96px;
}
.nb-finale > :not(.nb-glow) { position: relative; }

/* the electric glow rising behind the closer (H2Z-1): Paper's ellipse and stops, token colour */
.nb-glow {
  position: absolute;
  left: 0;
  bottom: -128px;
  width: 100%;
  height: 760px;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 60% at 50% 100%,
    color-mix(in oklab, var(--electric) 30%, transparent) 0%,
    color-mix(in oklab, var(--electric) 8%, transparent) 45%,
    color-mix(in oklab, var(--electric) 0%, transparent) 75%);
  transform-origin: 50% 100%;
}
.nb-finale.nb-armed .nb-glow { opacity: 0; transform: translateY(140px) scaleY(.7); }
.nb-finale.nb-armed.is-in .nb-glow {
  opacity: 1;
  transform: none;
  transition: opacity 1.4s var(--ease-out), transform 1.8s var(--ease-out);
}

.nb-stat { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.nb-stat-kick { display: flex; align-items: center; gap: 12px; }
.nb-stat-dash { width: 24px; height: 1px; flex-shrink: 0; background: var(--btn-line-on-black); }
.nb-stat-who {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
}
.nb-200 {
  font-family: var(--font-ui);
  font-size: min(280px, calc((100vw - 96px) / 2.62));
  font-weight: 900;
  line-height: .9286em; /* 260 at 280 */
  letter-spacing: -0.05em;
  color: var(--white);
  white-space: nowrap;
  text-align: center;
}
.nb-200-n { display: inline-block; }
.nb-stat-label {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  color: var(--body-on-black);
}

/* "Been there. Built [that.]" at 96 (H2P-1); em-based so it scales below 1100 */
.nb-closer {
  display: flex;
  align-items: center;
  padding-top: 72px;
  font-family: var(--font-ui);
  font-size: min(96px, calc((100vw - 96px) / 10.3));
  font-weight: 900;
  line-height: 1.0417em; /* 100 at 96 */
  letter-spacing: -0.04em;
  color: var(--white);
  white-space: nowrap;
}
.nb-closer-a::after { content: "\00a0"; }
.nb-closer-b { display: flex; align-items: center; gap: .2083em; /* 20 at 96 */ }
.nb-chip-w {
  display: inline-flex;
  align-items: center;
  height: .9792em;            /* 94 */
  padding: 0 .1042em .0417em; /* 0 10 4 */
  border-radius: .1458em;     /* 14 */
  background: var(--white);
  color: var(--ink);
  line-height: .9792em;
}

.nb-cta-wrap { display: flex; padding-top: 44px; }
.nb-cta.btn { gap: 8px; }

/* ---------- in between (no design): keep the desktop layout, scale the big type ---------- */

@media (max-width: 1279px) {
  /* "0 to 8 figures" is the widest Act 2 number (≈ 6.1 em); leave the 360 label column */
  .s-num { --nb-big: min(112px, calc((100vw - 96px - 384px) / 6.15)); }
  .nb-big { line-height: var(--nb-big); }
  .nb-big--07 { line-height: var(--nb-big); }
  .nb-chip { height: var(--nb-big); border-radius: calc(var(--nb-big) * .125); }
}
@media (max-width: 1023px) {
  .nb-meta { width: 280px; }
  .s-num { --nb-big: min(112px, calc((100vw - 96px - 304px) / 6.15)); }
}

/* ---------- phone (HX6-1 / I1X-1) ---------- */

@media (max-width: 767px) {
  .s-num { --nb-w: min(342px, calc(100% - 48px)); --nb-big: 56px; }

  .nb-act { padding-top: 64px; }

  .nb-sub {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    padding-bottom: 14px;
  }
  .nb-sub-title { font-size: 28px; line-height: 32px; }
  .nb-sub .nb-sub-title { text-wrap: nowrap; } /* Chrome's Inter is ~4% wider than Paper's; beats .home-page h3 */
  .nb-sub-no { order: -1; font-size: 10px; }

  .nb-row {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    padding-block: 28px;
  }
  .nb-big,
  .nb-big--07 { font-size: 56px; line-height: 56px; }
  .nb-ph-br { display: inline; }
  .nb-chip { height: 56px; padding: 0 6px 2px; border-radius: 10px; }

  .nb-meta { width: auto; gap: 6px; }
  .nb-meta .nb-no { display: none; }
  .nb-logo { width: 80px; height: 22px; object-position: center; }
  .nb-meta .nb-label { font-size: 18px; line-height: 24px; letter-spacing: 0; }
  .nb-note { font-size: 15px; line-height: 22px; }

  /* Act 3: the receipt prints downward (I5A-1, 300 wide, -2deg, torn bottom) */
  .nb-act3 { width: var(--nb-w); padding-top: 64px; gap: 36px; }
  .nb-sub--act3 { width: 100%; }
  .nb-band { display: block; height: auto; }
  .nb-tape {
    left: auto;
    width: 300px;
    margin-inline: auto;
    background: var(--white);
  }
  .nb-tape::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -9px;
    width: 100%;
    height: 10px;
    background: var(--white);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10'%3E%3Cpath d='M0 0l6 10 6-10z'/%3E%3C/svg%3E") 0 0 / 12px 10px repeat-x;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10'%3E%3Cpath d='M0 0l6 10 6-10z'/%3E%3C/svg%3E") 0 0 / 12px 10px repeat-x;
  }
  .nb-tape-win { overflow: hidden; }
  .nb-tape-track { animation-name: nb-print-down; animation-duration: 48s; }

  .nb-unit {
    flex-direction: column;
    align-items: stretch;
    width: auto;
    padding: 22px 24px 8px;
  }
  .nb-unit::before,
  .nb-unit::after { content: none; }
  .nb-unit--before,
  .nb-unit--after { left: 0; right: 0; }
  .nb-unit--before { top: -100%; }
  .nb-unit--after { top: 100%; }

  .nb-r-head {
    flex-direction: row;
    justify-content: space-between;
    align-self: auto;
    width: auto;
    min-height: 0;
    padding: 0 0 14px;
  }
  .nb-r-id { display: block; }
  .nb-r-brand,
  .nb-r-id,
  .nb-r-n,
  .nb-r-who { font-size: 10px; }

  .nb-r-line {
    gap: 6px;
    padding: 18px 0;
    border-left: 0;
    border-top: 1px dashed var(--button-line);
  }
  .nb-r-num { font-size: 48px; line-height: 50px; }
  .nb-r-label { width: auto; font-size: 15px; line-height: 21px; }
  .nb-r-tail { display: none; }

  /* Finale (I68-1) */
  .nb-finale { padding-top: 72px; }
  .nb-glow {
    bottom: -72px;
    height: 420px;
    background: radial-gradient(ellipse 70% 60% at 50% 100%,
      color-mix(in oklab, var(--electric) 30%, transparent) 0%,
      color-mix(in oklab, var(--electric) 8%, transparent) 45%,
      color-mix(in oklab, var(--electric) 0%, transparent) 75%);
  }
  .nb-stat { gap: 4px; }
  .nb-stat-kick { gap: 10px; }
  .nb-stat-kick .nb-no,
  .nb-stat-who { font-size: 10px; }
  .nb-stat-dash { width: 18px; }
  .nb-200 { font-size: 140px; line-height: 136px; }
  .nb-stat-label { font-size: 17px; line-height: 24px; }

  .nb-closer {
    flex-direction: column;
    padding-top: 48px;
    font-size: 48px;
    line-height: 52px;
  }
  .nb-closer-a::after { content: none; }
  .nb-closer-b { gap: 10px; padding-top: 6px; }
  .nb-chip-w { height: 48px; padding: 0 5px 2px; border-radius: 9px; line-height: 48px; }

  .nb-cta-wrap { width: var(--nb-w); padding-top: 32px; }
  .nb-cta.btn { width: 100%; height: 52px; padding: 0 24px; font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .nb-tape-track { animation: none; }
  .nb-finale.nb-armed .nb-glow { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   5 / Equip Kids — Paper H33-1 (phone I6T-1)
   ========================================================================== */

/* ==========================================================================
   r3 / S6 Equip Kids — Paper H33-1 (desktop 1440 x 1658), phone I6T-1 (390 x 1186).
   JSX: paper-export/home/r3/equip-kids-*.jsx. Prefix ek-.
   The showcase H3C-1 is a 1248 x 660 stage drawn in Paper pixels; --u is one
   Paper pixel (1px at 1440), so the fan scales down with the column.
   ========================================================================== */

.ek {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 72px;
  padding-block: 128px;
  background: var(--cloud);
  overflow: clip;
}

/* ---------- header H34-1 ---------- */
.ek-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.ek-eyebrow { font-size: 12px; color: var(--ink); }

.ek-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  font-family: var(--font-ui);
  font-size: 88px;
  line-height: 92px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-align: center;
}
.ek-title span { display: block; white-space: nowrap; }

/* ---------- showcase H3C-1 ---------- */
.ek-show {
  container-type: inline-size;
  position: relative;
  flex: none;
  aspect-ratio: 1248 / 660;
}
.ek-stage {
  --u: calc(100cqw / 1248);
  position: absolute;
  inset: 0;
}
.ek-stage figure { margin: 0; }
.ek-stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.ek-shot,
.ek-phone {
  position: absolute;
  display: flex;
  transform-origin: 0 0;
}
.ek-shot {
  padding: calc(8 * var(--u));
  border: 1px solid var(--hairline);
  border-radius: calc(20 * var(--u));
  background: var(--white);
  /* Paper #0A0C0F2E 0 40 80 */
  box-shadow: 0 calc(40 * var(--u)) calc(80 * var(--u)) color-mix(in srgb, var(--ink) 18%, transparent);
}
.ek-shot img { border-radius: calc(13 * var(--u)); }

/* H3D-1 Navigation, tilted behind on the left */
.ek-shot--nav {
  left: calc(-110 * var(--u));
  top: calc(170 * var(--u));
  width: calc(580 * var(--u));
  height: calc(334 * var(--u));
  rotate: -5deg;
}
/* H3F-1 Collections, tilted behind on the right (right: -110) */
.ek-shot--col {
  left: calc(778 * var(--u));
  top: calc(170 * var(--u));
  width: calc(580 * var(--u));
  height: calc(334 * var(--u));
  rotate: 5deg;
}
/* H3H-1 Product page, in front */
.ek-shot--pdp {
  left: calc(184 * var(--u));
  top: calc(40 * var(--u));
  width: calc(880 * var(--u));
  height: calc(503 * var(--u));
  /* Paper #0A0C0F38 0 50 100 */
  box-shadow: 0 calc(50 * var(--u)) calc(100 * var(--u)) color-mix(in srgb, var(--ink) 22%, transparent);
}
/* H3J-1 the 390 product page in a phone */
.ek-phone {
  left: calc(40 * var(--u));
  top: calc(236 * var(--u));
  width: calc(212 * var(--u));
  height: calc(440 * var(--u));
  padding: calc(9 * var(--u));
  border-radius: calc(38 * var(--u));
  background: var(--ink);
  rotate: -6deg;
  /* Paper #0A0C0F47 0 40 80 */
  box-shadow: 0 calc(40 * var(--u)) calc(80 * var(--u)) color-mix(in srgb, var(--ink) 28%, transparent);
}
.ek-phone img { border-radius: calc(30 * var(--u)); }

/* IG2-1 the shipping label (shared .stk, SLAP). Paper: 270 x 190 at
   (990, 452), -4deg about its top-left corner. The .stk turns about its
   centre, so the box moves (+6.3, -9.65) to land on the same spot. The
   shared art carries more margin than Paper's fill: the img is re-boxed so
   the visible label card covers Paper's (258 x 177 at 6, 0.4). */
.ek-label {
  left: calc(996.3 * var(--u));
  top: calc(442.35 * var(--u));
  width: calc(270 * var(--u));
  height: calc(190 * var(--u));
}
.ek-stage .ek-label img {
  position: absolute;
  left: -5.763%;
  top: -9.019%;
  width: 111.53%;
  max-width: none;
  height: auto;
  border-radius: 0;
  object-fit: fill;
}

/* ---------- words H3M-1 ---------- */
.ek-words {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.ek-pieces {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ek-pieces li {
  display: flex;
  align-items: center;
  height: 32px;
  padding-inline: 14px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--white);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}

.ek-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.ek-lines p {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 20px;
  line-height: 30px;
}
.ek-line1 { font-weight: 400; color: var(--body-ink); }
.ek-line2 { font-weight: 600; color: var(--ink); }

.ek-proof {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ek-proof li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: none;
  width: 220px;
  text-align: center;
}
.ek-proof li + li { border-left: 1px solid var(--hairline); }
.ek-num {
  font-family: var(--font-ui);
  font-size: 64px;
  line-height: 64px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.ek-lab {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  color: var(--mute);
}

/* H49-1: the shared primary pill, Paper's 8 px icon gap */
.ek-btn { gap: 8px; }

/* ---------- settle: the fan opens once on enter (home.js adds
   .ek-arm, then .ek-in). No JS or reduced motion: it simply sits there. ---------- */
@media (prefers-reduced-motion: no-preference) {
  .ek-arm .ek-shot,
  .ek-arm .ek-phone {
    transition: translate 900ms var(--ease-out), rotate 900ms var(--ease-out), opacity 500ms var(--ease-out);
  }
  .ek-arm .ek-shot--nav,
  .ek-arm .ek-shot--col { transition-delay: 120ms; }
  .ek-arm .ek-phone { transition-delay: 220ms; }

  .ek-arm:not(.ek-in) .ek-shot--pdp { translate: 0 calc(24 * var(--u)); opacity: 0; }
  .ek-arm:not(.ek-in) .ek-shot--nav { translate: calc(110 * var(--u)) calc(16 * var(--u)); rotate: -1.5deg; opacity: 0; }
  .ek-arm:not(.ek-in) .ek-shot--col { translate: calc(-110 * var(--u)) calc(16 * var(--u)); rotate: 1.5deg; opacity: 0; }
  .ek-arm:not(.ek-in) .ek-phone { translate: 0 calc(40 * var(--u)); rotate: -2deg; opacity: 0; }
}

/* ---------- in between: the headline steps down so it never overflows ---------- */
@media (max-width: 1023px) and (min-width: 768px) {
  .ek-title { font-size: 64px; line-height: 68px; }
  .ek-lines p { text-wrap: balance; }
}

/* ---------- phone: M-S6 I6T-1 ---------- */
@media (max-width: 767px) {
  .ek { gap: 40px; padding-block: 72px; }

  .ek-head { width: 342px; max-width: calc(100% - 40px); gap: 16px; }
  .ek-title { font-size: 38px; line-height: 42px; letter-spacing: -0.035em; }

  /* I71-1: 390 x 360, full bleed, 36 px more air above */
  .ek-show {
    width: min(100%, 520px);
    margin-top: 36px;
    aspect-ratio: 390 / 360;
  }
  .ek-stage { --u: calc(100cqw / 390); }

  .ek-shot--col { display: none; }

  /* I72-1 Product page */
  .ek-shot--pdp {
    z-index: 1;
    left: calc(24 * var(--u));
    top: calc(20 * var(--u));
    width: calc(342 * var(--u));
    height: calc(202 * var(--u));
    padding: calc(6 * var(--u));
    border-radius: calc(16 * var(--u));
    box-shadow: 0 calc(24 * var(--u)) calc(48 * var(--u)) color-mix(in srgb, var(--ink) 18%, transparent);
  }
  .ek-shot--pdp img { border-radius: calc(11 * var(--u)); }

  /* I74-1 Phone (right: 30) */
  .ek-phone {
    z-index: 2;
    left: calc(238 * var(--u));
    top: calc(112 * var(--u));
    width: calc(122 * var(--u));
    height: calc(244 * var(--u));
    padding: calc(6 * var(--u));
    border-radius: calc(24 * var(--u));
    rotate: 5deg;
    box-shadow: 0 calc(24 * var(--u)) calc(48 * var(--u)) color-mix(in srgb, var(--ink) 28%, transparent);
  }
  .ek-phone img { border-radius: calc(19 * var(--u)); }

  /* I76-1 Navigation */
  .ek-shot--nav {
    z-index: 3;
    left: calc(14 * var(--u));
    top: calc(196 * var(--u));
    width: calc(210 * var(--u));
    height: calc(124 * var(--u));
    padding: calc(5 * var(--u));
    border-radius: calc(13 * var(--u));
    rotate: -4deg;
    box-shadow: 0 calc(24 * var(--u)) calc(48 * var(--u)) color-mix(in srgb, var(--ink) 18%, transparent);
  }
  .ek-shot--nav img { border-radius: calc(9 * var(--u)); }

  /* IHC-1 label: 140 x 99, right 10, top -56, +4deg about its top-left;
     centre-turned equivalent (-3.62, +4.76) */
  .ek-label {
    z-index: 4;
    left: calc(236.38 * var(--u));
    top: calc(-51.24 * var(--u));
    width: calc(140 * var(--u));
    height: calc(99 * var(--u));
  }

  @media (prefers-reduced-motion: no-preference) {
    .ek-arm:not(.ek-in) .ek-shot--nav { translate: calc(40 * var(--u)) calc(16 * var(--u)); rotate: 0deg; }
    .ek-arm:not(.ek-in) .ek-phone { translate: 0 calc(28 * var(--u)); rotate: 1deg; }
  }

  /* I79-1 pieces */
  .ek-words { width: 342px; max-width: calc(100% - 40px); gap: 40px; }
  .ek-pieces { gap: 6px; }
  .ek-pieces li { height: 30px; padding-inline: 12px; border-radius: 15px; font-size: 13px; line-height: 18px; }

  /* I7I-1 lines */
  .ek-lines { gap: 8px; }
  .ek-lines p { font-size: 17px; line-height: 26px; }

  /* I7L-1 proof */
  .ek-proof { align-items: flex-start; }
  .ek-proof li { width: 114px; gap: 4px; }
  .ek-num { font-size: 44px; line-height: 46px; }
  .ek-lab { width: 100px; font-size: 13px; line-height: 18px; }

  /* I7V-1 full-width button, Paper keeps 52 / 17 on phone */
  .ek-btn { width: 100%; height: 52px; padding: 0 24px; font-size: 17px; }
}

/* ==========================================================================
   6 / Fast or good? Both. — Paper H4E-1 (phone I80-1)
   ========================================================================== */

/* ==========================================================================
   r3 fast-or-good — S7 "Fast or good? Both." Paper H4E-1 (phone I80-1).
   Header H4F-1, points H55-1. Switch timings from the hidden layer note H6C-1:
   slide OFF 180 ms, hold 250 ms, spring back ON with a small overshoot.
   ========================================================================== */

.fg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  padding-block: 128px;
  background: var(--white);
  color: var(--ink);
  overflow: clip;
}

/* ---------- header H4F-1 ---------- */
.fg-head {
  width: min(var(--content, 1248px), calc(100% - var(--pad, 96px) * 2));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.fg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding-inline: 12px;
  border: 1px solid var(--hairline);
  border-radius: 15px;
  background: var(--white);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.home-page .fg-eyebrow { letter-spacing: 0.08em; }
/* home.css tightens every p by -0.012em (it matches Paper's breaks for the
   lead and the desktop bodies); the quotes and the phone bodies match
   Paper with Chrome's natural Inter widths. */
.home-page .fg-q p { letter-spacing: normal; }
.fg-eyebrow::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--up);
}

/* headline H4J-1: 120 px Inter 900, the two switches set inline */
.fg-hl {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  font-family: var(--font-ui);
  font-size: 120px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 120px;
  color: var(--ink);
}

/* Line 1: "Fast [sw] or" + space + "good [sw] ?" on one row.
   The real space between the two groups is the word space in "or good". */
.fg-line {
  display: block;
  height: 120px;
  white-space: nowrap;
  text-align: center;
}
.fg-grp {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  vertical-align: top;
}
.fg-w { display: block; }

/* the switch, H4M-1 / H4R-1: 150 x 84, knob 68 */
.fg-sw {
  --fg-travel: 66px;              /* 150 - 2*2 border - 2*6 pad - 68 knob */
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 150px;
  height: 84px;
  padding: 6px;
  margin: 0;
  border: 2px solid var(--ink);
  border-radius: 42px;
  background: var(--electric);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color 260ms ease;
}
.fg-sw:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
  border-radius: 42px;
}
.fg-knob {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 68px;
  height: 68px;
  border: 2px solid var(--ink);
  border-radius: 36px;
  background: var(--white);
  box-shadow: -3px 3px 0 var(--ink);
  /* back ON: a spring with a small overshoot */
  transition: transform 460ms cubic-bezier(.34, 1.56, .64, 1);
}
.fg-tick {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity 160ms ease;
}

/* OFF: slides left in 180 ms */
.fg-sw.is-off { background: var(--fill); transition-duration: 180ms; }
.fg-sw.is-off .fg-knob {
  transform: translateX(calc(var(--fg-travel) * -1));
  transition: transform 180ms cubic-bezier(.4, 0, .2, 1);
}
.fg-sw.is-off .fg-tick { opacity: 0; transition-duration: 90ms; }

/* reduced motion: no slide, a 1 px nudge */
.fg-sw.is-nudge .fg-knob { transform: translateX(-1px); transition: none; }

/* drawn cursor H69-1 on the Good switch (Paper: left 978, top 58 in the
   headline box = 114, 40 from the switch's top left). Decorative. */
.fg-cursor {
  position: absolute;
  left: 114px;
  top: 40px;
  width: 44px;
  height: 52px;
  pointer-events: none;
  fill: var(--white);
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linejoin: round;
  transform-origin: 4px 4px;
  transition: transform 120ms ease, opacity 200ms ease;
}
.fg-sw.is-press .fg-cursor { transform: scale(.88); }
/* "Cursor shows on hover only": only where there is a hover pointer */
@media (hover: none), (pointer: coarse) {
  .fg-cursor { display: none; }
}

/* Line 2: the "Both." chip H4X-1 */
.fg-both { display: flex; }
.fg-chip {
  display: flex;
  align-items: center;
  height: 118px;
  padding: 0 12px 5px;
  border-radius: 16px;
  background: var(--ink);
  color: var(--white);
  line-height: 118px;
  white-space: nowrap;
}

/* lead H51-1 */
.fg-lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: var(--font-ui);
  font-size: 22px;
  line-height: 32px;
  text-align: center;
}
.fg-lead-1 { color: var(--body-ink); }
.fg-lead-2 { color: var(--ink); font-weight: 600; }

/* ---------- points H55-1 ---------- */
.fg-points {
  width: min(var(--content, 1248px), calc(100% - var(--pad, 96px) * 2));
  display: flex;
  align-items: flex-start;
  gap: 40px;
}
.fg-pt {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 28px;
  border-top: 2px solid var(--ink);
}
.fg-kick {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fg-minis { display: flex; gap: 6px; }
.fg-kick-l { color: var(--ink); }
.fg-kick-n { margin-left: auto; color: var(--quiet); }

/* mini switch H59-1: 40 x 24, knob 16 */
.fg-mini {
  --fg-mini-travel: 15px;         /* 40 - 2*1.5 - 2*3 - 16 */
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  width: 40px;
  height: 24px;
  padding: 3px;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  background: var(--electric);
  transition: background-color 260ms ease;
}
.fg-mini > span {
  flex: none;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  background: var(--white);
  transition: transform 460ms cubic-bezier(.34, 1.56, .64, 1);
}
.fg-mini.is-off { background: var(--fill); transition-duration: 180ms; }
.fg-mini.is-off > span {
  transform: translateX(calc(var(--fg-mini-travel) * -1));
  transition: transform 180ms cubic-bezier(.4, 0, .2, 1);
}

.fg-pt-t {
  font-family: var(--font-ui);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 36px;
  color: var(--ink);
  text-wrap: wrap;
}
.fg-pt-b {
  min-height: 81px;
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 27px;
  color: var(--mute);
}
.fg-q {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}
.fg-q blockquote { margin: 0; }
.fg-q blockquote p {
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 600;
  line-height: 26px;
  color: var(--ink);
}
.fg-q figcaption {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--mute);
}

/* ---------- in between: scale the row so it stays whole ---------- */
@media (max-width: 1239px) {
  .fg-hl { font-size: 96px; line-height: 96px; gap: 16px; }
  .fg-line { height: 96px; }
  .fg-grp { gap: 18px; }
  .fg-sw { --fg-travel: 52px; width: 120px; height: 68px; padding: 5px; border-radius: 34px; }
  .fg-sw:focus-visible { border-radius: 34px; }
  .fg-knob { width: 54px; height: 54px; }
  .fg-tick { width: 23px; height: 23px; }
  .fg-cursor { left: 90px; top: 32px; width: 36px; height: 42px; }
  .fg-chip { height: 94px; line-height: 94px; padding: 0 10px 4px; border-radius: 13px; }
  .fg-points { gap: 32px; }
}
@media (max-width: 960px) {
  .fg-hl { font-size: 70px; line-height: 70px; gap: 12px; }
  .fg-line { height: 70px; }
  .fg-grp { gap: 13px; }
  .fg-sw { --fg-travel: 36px; width: 88px; height: 50px; padding: 4px; border-radius: 25px; }
  .fg-sw:focus-visible { border-radius: 25px; }
  .fg-knob { width: 40px; height: 40px; box-shadow: -2px 2px 0 var(--ink); }
  .fg-tick { width: 17px; height: 17px; }
  .fg-cursor { left: 66px; top: 24px; width: 28px; height: 33px; }
  .fg-chip { height: 68px; line-height: 68px; padding: 0 7px 3px; border-radius: 10px; }
  /* points stack in a centred column under the headline */
  .fg-points { flex-direction: column; align-items: stretch; gap: 40px; width: min(560px, calc(100% - var(--pad, 48px) * 2)); }
  .fg-pt { flex: none; }
  .fg-pt-t { font-size: 28px; line-height: 32px; }
  .home-page .fg-pt-b { min-height: 0; }
}

/* ---------- phone I80-1 ---------- */
@media (max-width: 767px) {
  .fg { gap: 48px; padding-block: 72px; }
  .fg-head, .fg-points { width: calc(100% - 48px); }   /* 342 at 390 */
  .fg-head { gap: 18px; }

  /* headline I85-1: three lines, 56/58 */
  .fg-hl { font-size: 56px; line-height: 58px; gap: 8px; }
  .fg-line {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .fg-grp { gap: 10px; }
  .fg-sw {
    --fg-travel: 30px;            /* 72 - 2*2 - 2*4 - 30 */
    width: 72px;
    height: 42px;
    padding: 4px;
    border-radius: 21px;
  }
  .fg-sw:focus-visible { border-radius: 21px; outline-offset: 3px; }
  .fg-knob {
    width: 30px;
    height: 30px;
    border-radius: 17px;
    box-shadow: -2px 2px 0 var(--ink);
  }
  .fg-tick { width: 12px; height: 12px; stroke-width: 2.6; }
  .fg-cursor { display: none; }   /* Paper's phone has no cursor */
  .fg-both { padding-top: 4px; }
  .fg-chip {
    height: 56px;
    line-height: 56px;
    padding: 0 6px 2px;
    border-radius: 10px;
  }

  .fg-lead { font-size: 17px; line-height: 26px; }

  /* points I8Q-1 */
  .fg-points { flex-direction: column; gap: 40px; }
  .fg-pt { flex: none; width: 100%; gap: 14px; padding-top: 22px; }
  .fg-kick { gap: 8px; font-size: 11px; }
  .fg-kick-n { font-size: 10px; }
  .fg-minis { gap: 5px; }
  .fg-mini { --fg-mini-travel: 13px; width: 34px; height: 20px; border-radius: 10px; }
  .fg-mini > span { width: 12px; height: 12px; border-radius: 6px; }
  .fg-pt-t { font-size: 28px; line-height: 32px; }
  .fg-pt-b { min-height: 0; font-size: 16px; line-height: 25px; }
  .home-page .fg-pt-b { letter-spacing: normal; }
  .fg-q { gap: 6px; padding-top: 14px; }
  .fg-q blockquote p { font-size: 16px; line-height: 24px; }
  .fg-q figcaption { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .fg-sw, .fg-knob, .fg-tick, .fg-cursor, .fg-mini, .fg-mini > span { transition: none !important; }
}

/* ==========================================================================
   7 / End to end — Paper H6E-1 (phone I9U-1)
   ========================================================================== */

/* ==========================================================================
   r3 / End to end — Paper H6E-1 (desktop, 1440 x 1549), phone I9U-1 (390).
   Header H6F-1, order tracker H6M-1 (13 steps in four stages on one ink
   track, Ship live in electric), sum + ways in IFE-1, and the "How we work"
   receipt IFY-1 that prints out of the tracker's bottom edge (the shared
   PRINT component, the stickers section above). Phone: the tracker runs on a left rail.
   ========================================================================== */

.e2e {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 72px;
  padding-block: 128px;
  background: var(--cloud);
  border-top: 1px solid var(--hairline);
  overflow: clip;
}

.e2e-head,
.e2e-card,
.e2e-foot { width: min(1248px, calc(100% - var(--pad) * 2)); }

/* ---------- header H6F-1 ---------- */
.e2e-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.e2e-eyebrow { font-size: 12px; color: var(--ink); }
.e2e .e2e-title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 88px;
  line-height: 92px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}
.e2e-title span { white-space: nowrap; }
.e2e-lead {
  margin: 0;
  font-size: 22px;
  line-height: 32px;
  color: var(--body-ink);
}

/* ---------- tracker card H6M-1 ---------- */
.e2e-card {
  position: relative;
  padding: 48px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 24px;
}
.e2e-phases {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.e2e-phase {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.e2e-stage {
  display: flex;
  align-items: center;
  gap: 12px;
}
.e2e-dot {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ink);
}
.e2e-dot svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--white);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.e2e-track {
  position: relative;
  flex: 1 1 auto;
  height: 3px;
  border-radius: 2px;
  background: var(--ink);
  overflow: hidden;
}
/* Ship: live. #2BFF8840 halo = electric at 25% */
.e2e-phase--live .e2e-dot {
  background: var(--electric);
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--electric) 25%, transparent);
}
.e2e-phase--live .e2e-dot svg { stroke: var(--ink); }

.e2e-body {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.e2e .e2e-name {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  padding-right: 28px;
  font-family: var(--font-ui);
  font-size: 40px;
  line-height: 44px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.e2e-count,
.e2e .e2e-label {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.e2e-count { color: var(--quiet); white-space: nowrap; }
.e2e-steps {
  margin: 0;
  padding: 0 28px 0 0;
  list-style: none;
}
.e2e-step {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-block: 18px;
  border-top: 1px solid var(--hairline);
}
.e2e .e2e-label {
  display: flex;
  gap: 10px;
  margin: 0;
  color: var(--mute);
}
.e2e-num { color: var(--quiet); }
.e2e .e2e-pay {
  margin: 0;
  font-size: 22px;
  line-height: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* ---------- the receipt IFY-1: prints out of the card's bottom edge ----------
   Paper's fill (424 x 595) is receipt-how-we-work.webp (520 x 686) cropped
   at (48, 44): the receipt body, top flush. So the webp is drawn at
   --rc-s = Paper width / 424 and shifted by (48, 44) x --rc-s; its rotation
   origin is Paper's (0 0). The slot's top edge is the card's bottom edge;
   the receipt's top --rc-tuck px sit under the card, as in Paper
   (card bottom 1032, receipt top 989). */
.e2e-receipt {
  --rc-s: 0.70755;            /* 300 / 424 */
  --rc-tuck: 43px;
  top: calc(100% + 1px);
  left: calc(100% - 357px);   /* Paper left 986 = card right 1344 - 358 */
  width: 300px;
  height: calc(421px - var(--rc-tuck));
}
.e2e-receipt img {
  width: calc(520px * var(--rc-s));
  max-width: none;
  margin-left: calc(-48px * var(--rc-s));
  margin-top: calc(-1 * var(--rc-tuck) - 44px * var(--rc-s));
  transform-origin: calc(48px * var(--rc-s)) calc(44px * var(--rc-s));
}

/* ---------- sum + ways in IFE-1 ---------- */
.e2e-foot {
  display: flex;
  justify-content: space-between;
  padding-top: 8px;
}
.e2e-sumcol {
  flex: 0 0 820px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.e2e .e2e-sum {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 64px;
  line-height: 68px;
  font-weight: 900;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.e2e-sum-line { white-space: nowrap; }  /* Chrome sets Inter 900 ~4% wider than Paper's 816 */
.e2e-sum-line > span { white-space: nowrap; }
.e2e-chip {
  display: inline-flex;
  align-items: center;
  height: 62px;
  padding: 0 13px 4px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--white);
  font-weight: 800;
  line-height: 62px;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.e2e .e2e-crew {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}
.e2e-ways {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding-top: 12px;
}
.e2e-ways-lead {
  margin: 0;
  font-size: 20px;
  line-height: 30px;
  color: var(--body-ink);
}
.e2e-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.e2e-btn { gap: 8px; }
.e2e-slotspace { flex: 0 0 320px; height: 300px; }

/* ---------- the tracker lights in order (home.js adds
   .e2e-armed, then .e2e-on per stage). No JS or reduced motion: the
   final state above, nothing hidden. ---------- */
@media (prefers-reduced-motion: no-preference) {
  .e2e-armed .e2e-dot {
    transition: background-color 200ms var(--ease-soft), box-shadow 260ms var(--ease-soft), border-color 200ms var(--ease-soft);
  }
  .e2e-armed .e2e-phase:not(.e2e-on) .e2e-dot {
    background: var(--white);
    box-shadow: inset 0 0 0 2px var(--hairline);
  }
  .e2e-armed .e2e-phase--live:not(.e2e-on) .e2e-dot { border-color: var(--hairline); box-shadow: none; }
  .e2e-armed .e2e-dot path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 240ms ease-out 120ms;
  }
  .e2e-armed .e2e-on .e2e-dot path { stroke-dashoffset: 0; }
  .e2e-armed .e2e-phase--live.e2e-on .e2e-dot { animation: e2e-live 520ms cubic-bezier(.2, .9, .25, 1.15) both; }

  .e2e-armed .e2e-track { background: var(--hairline); }
  .e2e-armed .e2e-track::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 320ms var(--ease-soft) 200ms;
  }
  .e2e-armed .e2e-on .e2e-track::after { transform: none; }
}
@keyframes e2e-live {
  0%   { transform: scale(.82); box-shadow: 0 0 0 0 color-mix(in srgb, var(--electric) 25%, transparent); }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1); box-shadow: 0 0 0 var(--e2e-halo, 8px) color-mix(in srgb, var(--electric) 25%, transparent); }
}

/* ---------- in between: no design; keep the desktop layout ---------- */
@media (max-width: 1279px) {
  .e2e-sumcol { flex: 1 1 auto; min-width: 0; }
  .e2e .e2e-sum { gap: 8px; }
  .e2e-sum-line { display: flex; flex-wrap: wrap; column-gap: 0.25em; white-space: normal; }
}

/* tablet: the four stages two by two; the foot centres like the phone's,
   with the phone's smaller receipt printing into a spacer above it */
@media (min-width: 768px) and (max-width: 1023px) {
  .e2e-phases { flex-wrap: wrap; row-gap: 40px; }
  .e2e-phase { flex: 0 0 50%; }
  .e2e-receipt {
    --rc-s: 0.40094;          /* 170 / 424 */
    --rc-tuck: 29px;
    left: calc(50% - 85px);
    width: 170px;
    height: calc(239px - var(--rc-tuck));
  }
  .e2e-foot { flex-direction: column; align-items: center; gap: 32px; padding-top: 0; }
  .e2e-slotspace { order: -1; flex: none; width: 100%; height: 176px; }
  .e2e-sumcol { flex: none; width: 100%; align-items: center; text-align: center; }
  .e2e .e2e-sum {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: 12px;
    font-size: 56px;
    line-height: 60px;
  }
  .e2e-sum-line { justify-content: center; }
  .e2e-chip { height: 56px; line-height: 56px; padding: 0 11px 3px; }
  .e2e-ways { align-items: center; }
  .e2e-btns { justify-content: center; }
}

/* ---------- phone I9U-1 ---------- */
@media (max-width: 767px) {
  .e2e { gap: 32px; padding-block: 72px; }
  .e2e-head,
  .e2e-card,
  .e2e-foot { width: calc(100% - 48px); }

  .e2e-head { gap: 16px; }
  .e2e .e2e-title { font-size: 44px; line-height: 48px; letter-spacing: -0.035em; }
  .e2e-title span { display: block; }
  .e2e-lead { font-size: 17px; line-height: 26px; }

  /* tracker IA3-1: the stages run down a left rail */
  .e2e-card { padding: 20px; border-radius: 20px; }
  .e2e-phases { flex-direction: column; }
  .e2e-phase { flex: none; flex-direction: row; gap: 16px; }
  .e2e-stage { flex: none; flex-direction: column; width: 32px; gap: 6px; }
  .e2e-dot { width: 32px; height: 32px; }
  .e2e-dot svg { width: 14px; height: 14px; }
  .e2e-track { flex: 1 1 auto; width: 3px; height: auto; }
  .e2e-phase--live .e2e-dot { --e2e-halo: 6px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--electric) 25%, transparent); }
  .e2e-body { flex: 1 1 auto; min-width: 0; gap: 10px; padding-bottom: 24px; }
  .e2e-phase--live .e2e-body { padding-bottom: 0; }
  .e2e .e2e-name { gap: 8px; padding: 2px 0 0; font-size: 28px; line-height: 30px; }
  .e2e-count,
  .e2e .e2e-label { font-size: 10px; }
  .e2e-steps { padding-right: 0; }
  .e2e-step { gap: 4px; padding-block: 12px; }
  .e2e .e2e-label { gap: 8px; }
  .e2e .e2e-pay { font-size: 19px; line-height: 24px; }
  @media (prefers-reduced-motion: no-preference) {
    .e2e-armed .e2e-track::after { transform: scaleY(0); transform-origin: 50% 0; }
  }

  /* receipt IHA-1 (170 x 239): card bottom 1565, receipt top 1536, left 120 */
  .e2e-receipt {
    --rc-s: 0.40094;          /* 170 / 424 */
    --rc-tuck: 29px;
    left: calc(100% - 245px);
    width: 170px;
    height: calc(239px - var(--rc-tuck));
  }

  /* spacer IH8-1 (176) then sum + ways in ID4-1, centred */
  .e2e-foot { flex-direction: column; align-items: center; gap: 32px; padding-top: 0; }
  .e2e-slotspace { order: -1; flex: none; width: 100%; height: 176px; }
  .e2e-sumcol { flex: none; width: 100%; align-items: center; gap: 18px; text-align: center; }
  .e2e .e2e-sum {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 8px;
    /* Paper's line 2 "code + QA = Numbers." is 346 wide in a 342 column and
       Chrome's Inter 900 sets it ~4% wider again: borrow 16 px each side so
       it stays on one line, centred */
    margin-inline: -16px;
    font-size: 34px;
    line-height: 38px;
  }
  .e2e-sum-line { display: contents; }
  .e2e-sum-line > span:first-child { flex: 0 0 100%; }
  .e2e-chip {
    height: 34px;
    padding: 0 3px 1px;
    border-radius: 8px;
    font-weight: 900;
    line-height: 34px;
    letter-spacing: -0.04em;
  }
  .e2e .e2e-crew { font-size: 10px; }
  .e2e-ways { align-items: center; gap: 18px; padding-top: 8px; width: 100%; }
  .e2e-ways-lead { font-size: 17px; line-height: 26px; }
  .e2e-btns { flex-direction: column; gap: 10px; width: 100%; }
  .e2e-btn { width: 100%; height: 52px; padding: 0 24px; font-size: 17px; }
}