/* ═══════════════════════════════════════════════════════════════════
   white.css: everything below the hero (2026-09-02)

   ── Why this file exists ─────────────────────────────────────────
   Below the hero the old page changed ground SEVEN times: navy, navy,
   lavender-to-peach, black, solid blue, cream, navy. Every section had
   an eyebrow, three had "01 / 02 / 03" numbering, and pastel pills
   floated over the screenshots. None of it was a system, so it read as
   generated.

   The reference (idle.space) does the opposite: ONE near-white ground
   the whole way down, black type, black pill buttons, and every bit of
   colour lives INSIDE the product cards. The page is quiet so the
   product is loud. That is the entire idea here.

   ── The rules this file keeps ────────────────────────────────────
   · One ground: --w-bg. Sections never change background.
   · One accent for chrome: black. Cards carry their own product
     colour, exactly ONE hue per card, never a gradient.
   · One radius system: cards 28, phones 44 (a device), buttons pill.
   · Zero eyebrows below the hero. The headline is enough.
   · Nothing overlaid on a screenshot. Captions sit under, outside.
   · Every old class is left untouched. New names are w- prefixed so
     nothing here can collide with editorial.css or the inline sheet.
     Revert = `git checkout index.html` + delete this file and white.js.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --w-bg:      #f7f7f5;   /* off-white, never pure */
  --w-ink:     #111214;   /* off-black, never pure */
  --w-ink-2:   #5c5f66;   /* 5.1:1 on --w-bg: passes AA for body */
  --w-ink-3:   #8a8d94;   /* 3.1:1 on the ground: NON-TEXT ONLY (avatar dots, rules) */
  --w-line:    rgba(17,18,20,0.10);
  --w-card:    #ffffff;
  --w-dark:    #131417;

  /* product colours: one per card, straight from the app's tokens.
     Mark prefers these over the icon's oranges for the big cards. */
  --w-orange:  #ff7a3d;
  --w-pink:    #f25599;
  --w-blue:    #2f6bff;
  --w-scene:   #eef1f5;   /* the 3D ground */
  --w-mint:    #d9f2e6;

  --w-max:     1120px;
  --w-r-card:  28px;
  --w-r-phone: 44px;
  --w-ease:    cubic-bezier(0.16, 1, 0.3, 1);

  --w-h2:      clamp(40px, 5.6vw, 76px);
  --w-h3:      clamp(26px, 3vw, 38px);
}

/* ── The white world ─────────────────────────────────────────────
   Sits ABOVE the page's fixed night-sky layer (z 0) and rises over the
   bottom of the dark hero with a rounded top edge, so the theme switch
   reads as one deliberate move: a sheet of paper sliding up over the
   night. This is the page's single dark→light transition. */
.w-world {
  position: relative;
  z-index: 2;
  background: var(--w-bg);
  color: var(--w-ink);
  border-radius: 40px 40px 0 0;
  margin-top: -40px;
  overflow: hidden;   /* phones and the 3D canvas are clipped by their cards, this is the belt */
}
.w-world * { box-sizing: border-box; }
.w-world ::selection { background: var(--w-ink); color: var(--w-bg); }

.w-wrap {
  width: min(var(--w-max), calc(100% - 48px));
  margin: 0 auto;
}

.w-section {
  padding: 128px 0 32px;
}
.w-section + .w-section { padding-top: 96px; }

/* ── Type ──────────────────────────────────────────────────────── */
.w-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 56px;
}
.w-head h2 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: var(--w-h2);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--w-ink);
  text-wrap: balance;
  margin: 0 0 22px;
}
.w-head p {
  font-family: 'Inter', sans-serif;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.5;
  color: var(--w-ink-2);
  max-width: 52ch;
  margin: 0 auto;
  text-wrap: pretty;
}
/* Word-split headlines: white.js wraps each word so it can rise in on
   its own. The overflow clip is what makes the rise read as "emerging"
   rather than "sliding". Reduced motion: nothing here applies. */
.w-split { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.w-split > span { display: inline-block; will-change: transform; }

/* ── Buttons: black pill, white text. The only chrome colour. ──── */
.w-btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 24px;
  border-radius: 999px;
  background: var(--w-ink); color: #fff;
  font: 600 15px/1 'Inter', sans-serif;
  text-decoration: none; letter-spacing: -0.01em;
  transition: transform 0.25s var(--w-ease), background 0.25s;
  white-space: nowrap;
}
.w-btn:hover  { background: #000; transform: translateY(-1px); }
.w-btn:active { transform: translateY(0) scale(0.98); }
.w-btn.is-ghost {
  background: transparent; color: var(--w-ink);
  box-shadow: inset 0 0 0 1.5px var(--w-ink);
}
.w-btn.is-ghost:hover { background: rgba(17,18,20,0.06); }

/* ── Product cards ─────────────────────────────────────────────── */
.w-card {
  position: relative;
  border-radius: var(--w-r-card);
  overflow: hidden;
  isolation: isolate;
}
/* A phone is a real screenshot with a device radius and one soft,
   ground-tinted shadow. No frame graphics, no floating pills. */
.w-phone {
  position: absolute;
  width: 300px;
  aspect-ratio: 690 / 1500;
  border-radius: var(--w-r-phone);
  overflow: hidden;
  background: #000;
  box-shadow: 0 40px 90px -20px rgba(17,18,20,0.45), 0 0 0 1px rgba(255,255,255,0.08) inset;
  will-change: transform;
}
.w-phone img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── 1. Chat: one big warm card, two phones rising out of it ───── */
.w-chat .w-card {
  background: var(--w-orange);
  height: clamp(520px, 56vw, 680px);
  perspective: 1400px;
}
.w-chat .w-ask {
  position: absolute; top: 40px; left: 50%; transform: translateX(-50%);
  z-index: 3;
  background: #fff; color: var(--w-ink);
  border-radius: 999px; padding: 14px 22px;
  font: 500 15px/1.3 'Inter', sans-serif;
  box-shadow: 0 12px 30px -12px rgba(17,18,20,0.35);
  white-space: nowrap; max-width: calc(100% - 48px);
  overflow: hidden; text-overflow: ellipsis;
}
.w-chat .w-phone-a { left: calc(50% - 320px); bottom: -140px; transform: rotate(-5deg); }
.w-chat .w-phone-b { left: calc(50% + 20px);  bottom: -200px; transform: rotate(4deg); }

.w-chat-note {
  text-align: center;
  margin: 28px auto 0;
  font: 500 14px/1.5 'Inter', sans-serif;
  color: var(--w-ink-2);
}

/* ── 2. Pick + Your places: two cards, each one colour ─────────── */
.w-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.w-duo .w-card {
  aspect-ratio: 4 / 4.6;
  display: flex; align-items: flex-end; justify-content: center;
}
.w-duo .w-card.is-pink { background: var(--w-pink); }
.w-duo .w-card.is-blue { background: var(--w-blue); }
.w-duo .w-phone {
  position: relative;
  width: min(300px, 62%);
  bottom: -14%;
}
.w-duo figcaption {
  text-align: center;
  padding: 26px 24px 0;
}
.w-duo h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--w-ink); margin: 0 0 8px;
}
.w-duo p {
  font: 400 15.5px/1.5 'Inter', sans-serif;
  color: var(--w-ink-2); margin: 0 auto; max-width: 34ch;
}

/* ── 3. Scout: the character ───────────────────────────────────── */
/* He is drawn, not photographed, so he stays crisp at any size and can
   actually blink. Geometry notes live next to the SVG in index.html. */
.w-scout .w-card.is-scout {
  background: var(--w-card);
  border: 1px solid var(--w-line);
  display: grid;
  grid-template-columns: minmax(200px, 0.62fr) 1fr;
  gap: 44px;
  padding: 48px 52px;
  align-items: center;
}

/* A soft ground so a near-white character has something to sit on. Warm,
   not grey: he carries the house orange and a cool mat would fight it. */
/* The stage tint is not decoration: it is WHICH of his signals is talking.
   urgent = the house orange, history = green because it is about you and
   already true, crew = the app's blue because it is about other people.
   Slow crossfade so it reads as a mood changing, not a colour flashing. */
.w-scout-stage {
  border-radius: 22px;
  background: radial-gradient(120% 100% at 50% 18%, var(--k-hi, #fff8f3) 0%, var(--k-lo, #f4efe9) 100%);
  display: grid; place-items: center;
  padding: 26px 18px 20px;
  transition: --k-hi 600ms ease, --k-lo 600ms ease, background 600ms ease;
}
.w-scout-stage[data-kind="urgent"]  { --k-hi: #fff4ec; --k-lo: #f7e6d8; }
.w-scout-stage[data-kind="history"] { --k-hi: #f0fbf4; --k-lo: #ddf1e4; }
.w-scout-stage[data-kind="crew"]    { --k-hi: #eef4ff; --k-lo: #dde7fb; }

/* The happy "^^" arc is display-toggled by JS; this is the no-JS default. */
[data-scout-happy][hidden] { display: none; }
.w-scout-svg {
  display: block;
  width: 100%; max-width: 230px; height: auto;
  overflow: visible;
}
/* Absolute-pixel breath, deliberately NOT scaled with the rendered size:
   the app's bob is +/-0.6pt whether he is drawn at 20 or 108, which is what
   keeps it under the threshold where you notice it move. */
.w-scout-svg { will-change: transform; }
[data-scout-eye]   { transform-box: fill-box; transform-origin: center; }
[data-scout-face]  { transform-box: fill-box; transform-origin: center; }
[data-scout-hand]  { transform-box: fill-box; }
[data-scout-hand="l"] { transform-origin: right center; }
[data-scout-hand="r"] { transform-origin: left center; }

.w-scout-said { display: grid; gap: 16px; }
.w-scout-bubble {
  position: relative;
  margin: 0;
  background: var(--w-ink);
  color: #fff;
  border-radius: 20px;
  padding: 22px 26px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(19px, 1.9vw, 25px);
  font-weight: 700; line-height: 1.28; letter-spacing: -0.02em;
  text-wrap: balance;
  min-height: 3.9em;
  display: flex; align-items: center;
}
/* The tail points back at him, so the line reads as his and not as a caption. */
.w-scout-bubble::after {
  content: "";
  position: absolute; left: -9px; top: 46px;
  width: 20px; height: 20px;
  background: var(--w-ink);
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
.w-scout-sources {
  display: flex; flex-wrap: wrap; gap: 8px;
}
/* Chips take the same tint as the stage, so the eye links "what he used"
   to "which signal fired" without a legend. Every text colour below is
   checked against the white card, not against its own fill. */
.w-scout-sources span {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px 7px 11px;
  border-radius: 999px;
  background: var(--c-bg, rgba(255,115,41,0.10));
  border: 1px solid var(--c-line, rgba(255,115,41,0.28));
  font: 500 13px/1 'Inter', sans-serif;
  color: var(--c-ink, #a8460f);
  transition: background 400ms ease, border-color 400ms ease, color 400ms ease;
}
.w-scout-sources span::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-dot, #ff7a3d); flex: none;
}
.w-scout-sources[data-kind="urgent"]  { --c-bg: rgba(255,115,41,0.10); --c-line: rgba(255,115,41,0.30); --c-ink: #a8460f; --c-dot: #ff7329; }
.w-scout-sources[data-kind="history"] { --c-bg: rgba(46,158,104,0.10);  --c-line: rgba(46,158,104,0.32); --c-ink: #14663f; --c-dot: #2e9e68; }
.w-scout-sources[data-kind="crew"]    { --c-bg: rgba(47,107,255,0.09);  --c-line: rgba(47,107,255,0.28); --c-ink: #1b47b8; --c-dot: #2f6bff; }
.w-scout-note {
  margin: 4px 0 0;
  font: 400 15.5px/1.6 'Inter', sans-serif;
  color: var(--w-ink-2);
  max-width: 46ch;
}

/* The comparison, now below the card: it explains what you just watched. */
.w-scout-compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 20px;
}
.w-scout-line { border-radius: 20px; padding: 20px 22px; }
.w-scout-line .w-scout-tag {
  display: block;
  font: 600 11.5px/1 'Inter', sans-serif;
  letter-spacing: 0.09em; text-transform: uppercase;
  margin-bottom: 10px;
}
.w-scout-line p {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(18px, 1.7vw, 23px);
  font-weight: 700; line-height: 1.22; letter-spacing: -0.02em;
  text-wrap: balance;
}
.w-scout-line.is-generic { background: rgba(17,18,20,0.045); }
.w-scout-line.is-generic .w-scout-tag,
.w-scout-line.is-generic p { color: var(--w-ink-2); }
.w-scout-line.is-scout { background: var(--w-ink); }
.w-scout-line.is-scout .w-scout-tag { color: rgba(255,255,255,0.6); }
.w-scout-line.is-scout p { color: #fff; }

/* ── 4. Deals + Asks ───────────────────────────────────────────── */
/* Asymmetric on purpose: the equal 1/1 split already belongs to Pick,
   and reusing it here would be the third identical composition on the
   page. Deals carries the bigger claim so it gets the bigger card. */
.w-pair {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 28px;
  align-items: start;
}
/* ⚠️ These two are UI SCREENSHOTS, not photographs, so `cover` is the
   wrong fit: it sliced the Deals tab bar off one and cut the Brooklyn
   caption in half on the other. A cropped photo is still a photo; a
   cropped interface is just broken. `contain` shows each one whole and
   turns the card colour into a mat around it.
   Fixed equal HEIGHT rather than equal aspect-ratio, because the two
   columns are different widths and a shared ratio gave them different
   heights, which left the two captions on different lines. */
.w-pair .w-card {
  height: clamp(300px, 30vw, 400px);
  display: grid; place-items: center;
  padding: 30px;
}
.w-pair .w-card.is-amber { background: #f2b23d; }
.w-pair .w-card.is-mint  { background: #6fc79b; }
.w-pair .w-card img {
  display: block;
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 24px 50px -18px rgba(17,18,20,0.45);
}
.w-pair figcaption { padding: 24px 4px 0; }
.w-pair h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 21px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--w-ink); margin: 0 0 8px;
}
.w-pair p {
  margin: 0; max-width: 42ch;
  font: 400 15.5px/1.5 'Inter', sans-serif; color: var(--w-ink-2);
}

/* ── 3. Rally: the 3D scene ────────────────────────────────────── */
.w-rally .w-card {
  background: var(--w-scene);
  aspect-ratio: 16 / 9;
  min-height: 460px;
}
.w-rally canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block;
}
/* The proof: a real Rally screen at the card's edge, clipped by it. */
.w-rally .w-phone {
  width: 250px;
  right: 6%; bottom: -12%;
  transform: rotate(4deg);
}
.w-rally-fallback {
  position: absolute; inset: 0; display: none;
  background: url('assets/tile-map.jpg') center / cover;
}
.w-rally .w-card.no-webgl .w-rally-fallback { display: block; }
.w-rally .w-card.no-webgl canvas { display: none; }

/* ── 4. Vote: bare phone left, words right. The one split on the page. */
.w-vote .w-split-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
  padding: 24px 0 64px;
}
.w-vote .w-phone {
  position: relative; width: min(320px, 80%);
  margin: 0 auto;
  transform: rotate(-3deg);
}
.w-vote .w-head { text-align: left; margin: 0; max-width: none; }
.w-vote .w-head p { margin: 0; }

/* ── 5b. Head to head ────────────────────────────────────────────
   Mirrors w-vote (phone left, copy right) so the two do not read as the
   same slide twice. The verdict is the product, so it is set as text and
   not left to be squinted at inside the screenshot. */
.w-versus .w-split-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
  padding: 24px 0 64px;
}
.w-versus .w-head { text-align: left; margin: 0; max-width: none; }
.w-versus .w-head p { margin: 0; }
.w-versus .w-phone {
  position: relative;
  width: min(320px, 80%);
  margin: 0 auto;
  transform: rotate(3deg);
}
.w-verdict {
  margin: 26px 0 0;
  padding: 2px 0 2px 20px;
  border-left: 2px solid var(--w-orange);
}
.w-verdict p {
  margin: 0;
  color: var(--w-ink);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.01em;
}
.w-verdict cite {
  display: block;
  margin-top: 10px;
  color: var(--w-ink-2);
  font-size: 13px;
  font-style: normal;
}

/* ── 7. Boards + NextStop Intelligence ──────────────────────────── */
/* The page is DRAWN, from VRSpaceBoard's own values, so it stays crisp and
   never goes stale the way a screenshot does. Caveat is the same face the
   app registers, so this is the app's handwriting, not an impression of it. */
.w-board-row {
  display: grid;
  grid-template-columns: minmax(280px, 0.86fr) 1fr;
  gap: 40px;
  align-items: start;
}

/* Paper: Ivory #F6F1E6 with the terracotta spine (:47, :57). The rules are a
   repeating gradient rather than drawn lines so they stay put at any height. */
.w-paper {
  position: relative;
  margin: 0;
  border-radius: 10px 18px 18px 10px;
  overflow: hidden;
  background: #F6F1E6;
  box-shadow: 0 30px 60px -26px rgba(17,18,20,0.42), 0 0 0 1px rgba(17,18,20,0.08);
  transform: rotate(-0.7deg);
}
.w-paper-spine {
  position: absolute; left: 0; top: 0; bottom: 0; width: 16px;
  background: #C7734D;
}
.w-paper-spine::after {
  content: ""; position: absolute; left: 26px; top: 0; bottom: 0; width: 1px;
  background: rgba(199,115,77,0.34);
}
.w-paper-sheet {
  position: relative;
  padding: 26px 26px 26px 44px;
  background: repeating-linear-gradient(
    180deg,
    transparent 0 33px,
    rgba(17,18,20,0.085) 33px 34px
  );
}
.w-b-head {
  margin: 0 0 10px;
  font-family: 'Caveat', 'Space Grotesk', cursive;
  font-size: 30px; font-weight: 700; line-height: 34px;
  color: #2A2118;
}
.w-b-line {
  display: flex; align-items: baseline; gap: 9px;
  margin: 0; height: 34px;
  font-family: 'Caveat', 'Space Grotesk', cursive;
  font-size: 22px; font-weight: 500; line-height: 34px;
  color: #2A2118;
}
/* 0.45 alpha composited to 2.72:1 on the paper. The line-through already
   says "done", so the colour does not have to fade to illegible to repeat it. */
.w-b-line.is-done { color: rgba(42,33,24,0.68); text-decoration: line-through; text-decoration-color: rgba(42,33,24,0.5); }
/* A place line carries a pin, because a place on a board is a real place. */
.w-b-pin {
  width: 9px; height: 9px; flex: none; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); background: #C7734D; align-self: center;
}
.w-b-box {
  width: 13px; height: 13px; flex: none; align-self: center;
  border: 1.8px solid rgba(42,33,24,0.42); border-radius: 3px;
  position: relative;
}
.w-b-box.is-ticked { background: #C7734D; border-color: #C7734D; }
.w-b-box.is-ticked::after {
  content: ""; position: absolute; left: 3.6px; top: 1px;
  width: 3.5px; height: 7px;
  border: solid #F6F1E6; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg);
}
.w-b-poll { margin-top: 6px; }
.w-b-q {
  margin: 0; height: 34px;
  font-family: 'Caveat', 'Space Grotesk', cursive;
  font-size: 22px; line-height: 34px; color: #2A2118;
}
.w-b-opts { display: flex; gap: 8px; padding: 3px 0 0; }
.w-b-opts span {
  font: 600 12.5px/1 'Inter', sans-serif;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(199,115,77,0.10);
  border: 1px solid rgba(199,115,77,0.34);
  color: #8A431F;
}
/* ⚠️ #C7734D is the app's terracotta and it is right for the spine and the
   pins, but near-white on it is only 3.33:1 — under AA at 12.5px. The FILL
   darkens here rather than the text changing colour, so the pill still reads
   as the same accent. */
.w-b-opts span.is-lead { background: #A8502C; border-color: #A8502C; color: #FFF8F2; }

/* The suggestion card: what the on-device model offers, never posts. */
.w-board-said { display: grid; gap: 18px; }
.w-sugg {
  background: var(--w-card);
  border: 1px solid var(--w-line);
  border-radius: 20px;
  padding: 20px 20px 16px;
}
.w-sugg-head {
  margin: 0 0 14px;
  font: 600 12px/1 'Inter', sans-serif;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--w-ink-2);
}
.w-sugg-item + .w-sugg-item { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--w-line); }
/* The quote is the whole point: it is the message it came from, verbatim. */
.w-sugg-quote {
  margin: 0 0 9px;
  padding-left: 11px;
  border-left: 2px solid rgba(199,115,77,0.55);
  font: 400 15px/1.45 'Inter', sans-serif;
  color: var(--w-ink-2);
}
.w-sugg-act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.w-sugg-new {
  font-family: 'Caveat', 'Space Grotesk', cursive;
  font-size: 21px; font-weight: 600; color: var(--w-ink);
}
.w-sugg-btn {
  margin-left: auto;
  font: 600 12.5px/1 'Inter', sans-serif;
  padding: 8px 13px; border-radius: 999px;
  background: var(--w-ink); color: #fff;
  white-space: nowrap;
}
.w-board-note {
  margin: 0;
  font: 400 15.5px/1.6 'Inter', sans-serif; color: var(--w-ink-2);
}
.w-board-note strong { color: var(--w-ink); font-weight: 600; }
.w-board-note em { font-style: italic; color: var(--w-ink); }
.w-board-fine {
  margin: 0;
  font: 400 13.5px/1.5 'Inter', sans-serif; color: var(--w-ink-2);
}

/* ── 5. Recap: a photo collage at different scroll speeds ──────── */
.w-recap .w-collage {
  position: relative;
  height: clamp(520px, 52vw, 640px);
}
.w-recap .w-shot {
  position: absolute;
  border-radius: 22px;
  overflow: hidden;
  background: #ddd;
  box-shadow: 0 30px 70px -24px rgba(17,18,20,0.35);
  will-change: transform;
}
.w-recap .w-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Four tiles, deliberately uneven. The tall one anchors the left, the
   landscape pair stack in the middle, the tall neon closes the right.
   Nothing is the same size as anything else: that is what stops it
   reading as a grid of stock images. */
.w-recap .w-shot-1 { left: 0;    top: 10%; width: 30%; height: 66%; }
.w-recap .w-shot-2 { left: 33%;  top: 0;   width: 35%; height: 44%; }
.w-recap .w-shot-3 { left: 33%;  top: 50%; width: 35%; height: 46%; }
.w-recap .w-shot-4 { left: 71%;  top: 16%; width: 29%; height: 62%; }
.w-recap .w-shot-1 img { object-position: 60% 50%; }

/* ── 6. Founder: an editorial quote, no card ───────────────────── */
.w-founder { text-align: center; }
.w-founder .w-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  margin: 0 auto 28px;
  background: var(--w-ink); color: var(--w-bg);
  display: grid; place-items: center;
  font: 700 24px/1 'Space Grotesk', sans-serif;
}
.w-founder blockquote {
  margin: 0 auto; max-width: 20ch;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(30px, 4vw, 54px);
  font-weight: 700; line-height: 1.05; letter-spacing: -0.03em;
  color: var(--w-ink); text-wrap: balance;
}
.w-founder .w-founder-body {
  margin: 24px auto 0; max-width: 48ch;
  font: 400 18px/1.55 'Inter', sans-serif; color: var(--w-ink-2);
}
.w-founder .w-founder-name {
  margin: 18px 0 0;
  font: 600 15px/1 'Inter', sans-serif; color: var(--w-ink);
}

/* ── 7. Pro: the page's ONE dark card, then two plain tiers ────── */
.w-pro .w-card.is-dark {
  background: var(--w-dark);
  color: #fff;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 32px;
  min-height: 560px;
  padding: 56px 0 0 56px;
}
.w-pro .w-pro-copy { align-self: center; padding-bottom: 56px; }
.w-pro .w-pro-copy h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--w-h3); font-weight: 700;
  line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 18px;
}
.w-pro .w-pro-copy p {
  font: 400 17px/1.55 'Inter', sans-serif;
  color: rgba(255,255,255,0.72); max-width: 42ch; margin: 0 0 28px;
}
.w-pro .w-pro-copy ul {
  list-style: none; padding: 0; margin: 0 0 32px;
  display: grid; gap: 12px;
}
.w-pro .w-pro-copy li {
  display: flex; gap: 12px; align-items: flex-start;
  font: 400 15.5px/1.45 'Inter', sans-serif; color: rgba(255,255,255,0.88);
}
.w-pro .w-pro-copy li strong { color: #fff; font-weight: 600; }
.w-pro .w-btn.is-light { background: #fff; color: var(--w-ink); }
.w-pro .w-btn.is-light:hover { background: #f0f0ee; }

.w-pro .w-pro-shots {
  position: relative;
  overflow: hidden;
}
.w-pro .w-pro-shots .w-phone { width: 250px; }
.w-pro .w-pro-shots .w-phone-a { left: 8%;  top: 56px;  transform: rotate(-4deg); }
.w-pro .w-pro-shots .w-phone-b { left: 48%; top: 130px; transform: rotate(4deg); }

/* A check drawn in CSS: no icon font, no emoji, no hand-rolled SVG. */
.w-check {
  flex: none; width: 20px; height: 20px; margin-top: 1px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  position: relative;
}
.w-check::after {
  content: ""; position: absolute;
  left: 7px; top: 4px; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.w-tiers {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  margin-top: 24px;
}
.w-tier {
  background: var(--w-card);
  border: 1px solid var(--w-line);
  border-radius: var(--w-r-card);
  padding: 36px 36px 32px;
  display: flex; flex-direction: column; gap: 14px;
}
.w-tier.is-pro { border: 2px solid var(--w-ink); }
.w-tier .w-tier-name {
  font: 600 13px/1 'Inter', sans-serif; letter-spacing: 0.04em;
  color: var(--w-ink-2); text-transform: uppercase;
}
.w-tier h4 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 26px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; margin: 0;
}
.w-tier .w-price {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1;
  margin: 4px 0 0;
}
.w-tier .w-price small { font: 500 15px/1 'Inter', sans-serif; color: var(--w-ink-2); letter-spacing: 0; margin-left: 6px; }
.w-tier .w-price-note { font: 400 14px/1.4 'Inter', sans-serif; color: var(--w-ink-2); margin: 0; }
.w-tier ul { list-style: none; padding: 0; margin: 8px 0 20px; display: grid; gap: 11px; flex: 1; }
.w-tier li {
  display: flex; gap: 12px; align-items: flex-start;
  font: 400 15px/1.45 'Inter', sans-serif; color: var(--w-ink);
}
.w-tier li strong { font-weight: 600; }
.w-tier .w-check { background: rgba(17,18,20,0.07); }
.w-tier .w-check::after { border-color: var(--w-ink); }

/* ── 8. Waitlist ───────────────────────────────────────────────── */
.w-wait { text-align: center; padding-bottom: 120px; }
.w-wait .w-head { margin-bottom: 36px; }

/* The counter is filled by script.js from a real RPC and stays hidden
   until it clears a threshold. IDs are the contract, do not rename. */
.w-wait .waitlist-counter {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 auto 22px;
  font: 500 14px/1 'Inter', sans-serif; color: var(--w-ink-2);
}
.w-wait .waitlist-counter .stack { display: inline-flex; }
.w-wait .waitlist-counter .stack span {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--w-ink-3); border: 2px solid var(--w-bg); margin-left: -8px;
}
.w-wait .waitlist-counter .stack span:first-child { margin-left: 0; }

.w-wait form {
  display: flex; gap: 10px;
  max-width: 520px; margin: 0 auto;
  padding: 6px; border-radius: 999px;
  background: var(--w-card);
  border: 1px solid var(--w-line);
  box-shadow: 0 20px 50px -30px rgba(17,18,20,0.35);
}
.w-wait input[type="email"] {
  flex: 1; min-width: 0; height: 52px; padding: 0 18px;
  border: 0; outline: 0; background: transparent;
  font: 400 16px/1 'Inter', sans-serif; color: var(--w-ink);
  border-radius: 999px;
}
.w-wait input[type="email"]::placeholder { color: var(--w-ink-2); }
.w-wait input[type="email"]:focus-visible { box-shadow: inset 0 0 0 2px var(--w-ink); }
.w-wait button { border: 0; cursor: pointer; }
.w-wait button[disabled] { opacity: 0.6; cursor: default; }

.w-wait .form-success {
  display: none;
  margin: 18px auto 0;
  font: 500 15px/1 'Inter', sans-serif; color: var(--w-ink);
}
.w-wait .form-success.show { display: block; }

.w-wait .w-perks {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px;
  margin: 28px auto 0;
}
.w-wait .w-perks span {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 14px/1 'Inter', sans-serif; color: var(--w-ink-2);
}
.w-wait .w-perks .w-check { width: 18px; height: 18px; background: rgba(17,18,20,0.07); }
.w-wait .w-perks .w-check::after { left: 6px; top: 3px; width: 4px; height: 8px; border-color: var(--w-ink); }
/* --w-ink-3 is 3.1:1 on the ground, which is fine for a 20px+ caption and
   NOT fine here at 13px. Contrast is set by the size it is actually used
   at, not by the intent written next to the token. */
.w-wait .w-small { margin: 22px 0 0; font: 400 13px/1 'Inter', sans-serif; color: var(--w-ink-2); }

/* ── Footer ────────────────────────────────────────────────────── */
/* ⚠️ The old sheets style the BARE `footer` ELEMENT (index.html and
   editorial.css both do), and an element selector still matches
   <footer class="w-footer">. It set a dark translucent background and its
   own padding/margin, which shipped a black footer with near-invisible
   dark links under an otherwise white page. A new class name does NOT
   protect you from an element-level rule: every property the old rule
   sets has to be set here too, not just the ones being changed. */
.w-footer {
  background: var(--w-bg);
  border-top: 1px solid var(--w-line);
  padding: 56px 0 40px;
  margin-top: 0;
  color: var(--w-ink);
}
.w-footer .w-footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px;
}
.w-footer .brand {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 18px/1 'Space Grotesk', sans-serif; color: var(--w-ink);
}
.w-footer .brand-mark { width: 28px; height: 28px; border-radius: 8px; }
.w-footer .w-blurb {
  margin: 14px 0 0; max-width: 34ch;
  font: 400 14.5px/1.55 'Inter', sans-serif; color: var(--w-ink-2);
}
.w-footer h5 {
  margin: 0 0 14px;
  font: 600 13px/1 'Inter', sans-serif; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--w-ink-2);
}
.w-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.w-footer li a {
  font: 400 15px/1.3 'Inter', sans-serif; color: var(--w-ink); text-decoration: none;
}
.w-footer li a:hover { text-decoration: underline; text-underline-offset: 3px; }
.w-footer .w-footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 48px; padding-top: 22px;
  border-top: 1px solid var(--w-line);
  font: 400 13px/1.4 'Inter', sans-serif; color: var(--w-ink-2);
}
.w-footer .w-footer-bottom a { color: inherit; text-decoration: none; margin-left: 18px; }
.w-footer .w-footer-bottom a:hover { text-decoration: underline; }

/* ── Elements white.js animates in. Deliberately NOT pre-hidden here:
   GSAP `from()` tweens own the hidden state, so with no JS, a failed
   CDN, or reduced motion, everything is simply visible. ─────────── */
.w-in { will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) {
  .w-in { will-change: auto; }
  .w-split > span { transform: none !important; }
}

/* ── Mobile: everything single column, phones scale, the 3D card gets
   taller so the pins still have room. ─────────────────────────── */
@media (max-width: 900px) {
  .w-section { padding-top: 88px; }
  .w-section + .w-section { padding-top: 72px; }
  .w-head { margin-bottom: 36px; }
  .w-wrap { width: calc(100% - 32px); }
  .w-world { border-radius: 28px 28px 0 0; margin-top: -28px; }

  .w-chat .w-card { height: 520px; }
  .w-phone { width: 230px; }
  .w-chat .w-phone-a { left: calc(50% - 235px); bottom: -120px; }
  .w-chat .w-phone-b { left: calc(50% + 5px);  bottom: -180px; }
  .w-chat .w-ask { top: 24px; font-size: 14px; padding: 12px 18px; }

  .w-scout .w-card.is-scout { grid-template-columns: 1fr; gap: 26px; padding: 26px 20px; }
  .w-scout-svg { max-width: 180px; }
  .w-scout-stage { padding: 20px 14px 16px; }
  .w-scout-bubble { font-size: 19px; padding: 18px 20px; min-height: 0; }
  /* On one column the bubble sits BELOW him, so the tail must point up. */
  .w-scout-bubble::after {
    left: 34px; top: -9px;
    width: 20px; height: 20px;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
  }
  .w-scout-note { max-width: none; }
  .w-scout-compare { grid-template-columns: 1fr; gap: 12px; }
  .w-scout-line { padding: 18px 20px; }

  .w-pair { grid-template-columns: 1fr; gap: 40px; }
  .w-pair .w-card { height: auto; aspect-ratio: 16 / 11; padding: 18px; }

  .w-duo { grid-template-columns: 1fr; gap: 40px; }
  .w-duo .w-card { aspect-ratio: 4 / 4.2; }

  .w-rally .w-card { aspect-ratio: 4 / 5; min-height: 0; }
  .w-rally .w-phone { width: 170px; right: 4%; bottom: -10%; }

  .w-vote .w-split-row { grid-template-columns: 1fr; gap: 36px; padding-bottom: 32px; }
  .w-vote .w-head { text-align: center; }
  .w-vote .w-head p { margin: 0 auto; }
  .w-vote .w-phone { width: min(260px, 70%); }
  .w-versus .w-split-row { grid-template-columns: 1fr; gap: 36px; padding-bottom: 32px; }
  .w-versus .w-head { text-align: center; }
  .w-versus .w-head p { margin: 0 auto; }
  .w-versus .w-verdict { max-width: 420px; margin: 24px auto 0; text-align: left; }
  .w-versus .w-phone { width: min(260px, 70%); }

  .w-board-row { grid-template-columns: 1fr; gap: 28px; }
  .w-paper { transform: rotate(-0.5deg); }
  .w-paper-sheet { padding: 22px 20px 22px 38px; }
  .w-sugg-btn { margin-left: 0; }

  .w-recap .w-collage { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .w-recap .w-shot { position: static; width: auto; height: auto; aspect-ratio: 4 / 5; transform: none !important; }
  .w-recap .w-shot-2, .w-recap .w-shot-3 { aspect-ratio: 4 / 3; }

  .w-pro .w-card.is-dark { grid-template-columns: 1fr; padding: 40px 28px 0; min-height: 0; }
  .w-pro .w-pro-copy { padding-bottom: 0; }
  .w-pro .w-pro-shots { height: 380px; margin: 24px -28px 0; }
  .w-pro .w-pro-shots .w-phone { width: 200px; }
  .w-pro .w-pro-shots .w-phone-a { left: 8%;  top: 20px; }
  .w-pro .w-pro-shots .w-phone-b { left: 50%; top: 80px; }
  .w-tiers { grid-template-columns: 1fr; }

  .w-wait form { flex-direction: column; border-radius: 28px; padding: 8px; }
  .w-wait input[type="email"] { height: 48px; text-align: center; }
  .w-wait button { width: 100%; justify-content: center; }

  .w-footer .w-footer-grid { grid-template-columns: 1fr 1fr; }
  .w-footer .w-footer-grid > :first-child { grid-column: 1 / -1; }
  .w-footer .w-footer-bottom { flex-direction: column; align-items: flex-start; }
  .w-footer .w-footer-bottom a { margin: 0 18px 0 0; }
}