/* trycomps.com — every page. Light mode only.
   The app's tokens (lib/design/tokens.ts): #16B364 the only green, ink #1A1D1A, muted #6B7280, the primary blue #0076D1,
   cards at radius 20 with the two-layer 4% shadow, the app's page #F2F2F7; category colours lib/design/categoryColors.ts.
   Text is the system font (SF Pro on Apple devices); the comps face (Sora 800) appears only as the wordmark, drawn as an
   SVG, so no font file is loaded. Every phone screen is built in the iPhone 17 Pro's own 402 × 874 points and scaled. */

:root {
  color-scheme: light;
  --build: "dev";                 /* the build's version, written by tools/scripts/build-site.mjs; the layout audit
                                     checks it equals the page's, so a stylesheet from another build is caught */
  --green: #16B364;
  /* green as TEXT on white or a light tint: the app's pressed green #0E8A50 measures under 4.5:1 at small sizes */
  --green-text: #0A7444;
  /* one keyword per headline (owner, 2026-09-29): #16B364 darkened in lightness only, the lightest step that clears 3:1 with
     margin on both headline grounds — 3.55:1 on white, 3.25:1 on the ground #F5F5F3 (#16B364 itself: 2.74 and 2.51) */
  --green-head: #129C56;
  --ink: #1A1D1A;
  --muted: #6B7280;
  --blue: #0076D1;
  --page: #FFFFFF;
  --ground: #F5F5F3;
  --app: #F2F2F7;
  --divider: #E5E7EB;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 12px rgba(0, 0, 0, .04);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --pad: max(24px, env(safe-area-inset-left), env(safe-area-inset-right));
  --wrap-pad: max(var(--pad), calc((100vw - 1200px) / 2 + 24px));
  --nav-h: 56px;
  --nav-top: max(12px, env(safe-area-inset-top));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 8px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { max-width: 1248px; margin: 0 auto; padding: 0 var(--pad); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 10px; text-decoration: none; }
.skip:focus { top: 12px; }
.wm { fill: var(--green); }

/* ── THE DOWNLOAD BUTTON: "Coming soon" until the switch (site-config.js) turns on Apple's badge ── */
.dl__soon {
  display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: -.005em; white-space: nowrap;
}
.dl__badge { display: none; }
.launched .dl__soon { display: none; }
.launched .dl__badge { display: inline-block; }
.dl__badge img { height: 40px; width: auto; }
.dl--hero .dl__soon, .dl--final .dl__soon { height: 52px; padding: 0 24px; font-size: 16px; }
.dl--hero .dl__badge img, .dl--final .dl__badge img { height: 52px; }

/* ── THE QR CARD: the code (rounded modules, the comps mark at its centre) beside a two-line caption ── */
.qr { display: inline-flex; align-items: center; gap: 16px; padding: 14px 22px 14px 14px; border-radius: 24px; background: #fff; text-decoration: none; color: var(--ink);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 12px 32px rgba(0, 0, 0, .07); }
.qr__code { width: 92px; height: 92px; flex: none; }
.qr__text { font: 600 15px/1.3 var(--font); letter-spacing: -.01em; white-space: nowrap; }
.qr__cap--live { display: none; }
.launched .qr__cap--live { display: inline; }
.launched .qr__cap--soon { display: none; }

/* ── NAV: a floating frosted pill; its links never wrap ── */
.nav { position: fixed; z-index: 50; top: var(--nav-top); left: 0; right: 0; display: flex; justify-content: center; padding: 0 12px; pointer-events: none; }
.nav__pill {
  position: relative; pointer-events: auto; width: min(860px, 100%); height: var(--nav-h); display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 8px 0 22px; border-radius: 999px;
  background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 8px 28px rgba(0, 0, 0, .06);
}
.nav__brand { display: block; padding: 8px 0; flex: none; }
.nav__brand .wm { width: 78px; height: 18px; }
.nav__links { display: flex; gap: 2px; flex-wrap: nowrap; }
.nav__links a { font-size: 14px; font-weight: 500; text-decoration: none; padding: 10px 12px; border-radius: 999px; color: rgba(26, 29, 26, .82); white-space: nowrap; transition: background .2s, color .2s; }
.nav__links a:hover { background: rgba(0, 0, 0, .05); color: var(--ink); }
.nav .dl { flex: none; }
.nav__menu { display: none; }

/* ── THE OPENING AND THE STORY: A TALL SECTION IN THE PAGE'S OWN SCROLL, THE STAGE PINNED (owner review, round 5: "STOP
   intercepting wheel, touch and key events entirely. Use the browser's native scrolling"). Rounds 3 and 4 made the story
   its own snapping scroll box and moved it by script; a real MacBook trackpad then scrolled nothing, and an iPhone swipe
   stuck at the last step. Now nothing on the page listens to a wheel, a touch or a key to scroll: the page scrolls as
   the browser scrolls it, the stage stays pinned (position: sticky) while the story's track passes under it, and each
   step is drawn from how far the track has scrolled. The track is 6.6 steps of 115svh plus one screen (the timeline's 66
   units, a step every 10), so a step is a little more than a screen of scrolling; past the last step the page carries
   straight on to the lineup. ── */
.story { position: relative; }
.story__track { position: relative; height: 859vh; height: 859svh; }
/* where each step settles, for the "Scroll to explore" link (a plain anchor) */
.story__mark { position: absolute; left: 0; width: 1px; height: 1px; top: 115vh; top: 115svh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 55%, #F5F5F3 100%); }
/* a very subtle green glow behind the phone, nothing more */
.stage__glow { position: absolute; left: var(--glow-x, 50%); top: var(--glow-y, 50%); width: var(--glow-d, 760px); height: var(--glow-d, 760px); transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(22, 179, 100, .12), rgba(22, 179, 100, .05) 55%, rgba(22, 179, 100, 0)); }
.rig { position: absolute; inset: 0; perspective: 1700px; perspective-origin: var(--po-x, 50%) var(--po-y, 45%); }
.tilt { position: absolute; inset: 0; transform-style: preserve-3d; }
/* the phone and its floating widgets appear once the script has placed them (appearing is not a layout shift; moving is) */
.js .rig:not(.is-placed) { visibility: hidden; }

/* The phone: sized by --pw (its outer width in px) and --s (its screen's scale), both set by js/site.js. */
.phone {
  --b: calc(var(--pw, 300) * 12 / 426 * 1px);
  position: absolute; left: var(--px, 50%); top: var(--py, 50%); width: calc(var(--pw, 300) * 1px); aspect-ratio: 426 / 898;
  border: var(--b) solid #0D0D0F; border-radius: calc(var(--pw, 300) * 69 / 426 * 1px); background: #0D0D0F;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 0 0 1px rgba(0, 0, 0, .55), 0 40px 80px -30px rgba(0, 0, 0, .32);
}
.phone--story { transform-style: preserve-3d; will-change: transform; }
.phone::before, .phone::after { content: ""; position: absolute; width: calc(var(--b) * .42); background: #1B1B1E; border-radius: 2px; }
.phone::before { right: calc(var(--b) * -1.42); top: 26%; height: 11%; }
.phone::after { left: calc(var(--b) * -1.42); top: 21%; height: 7%; box-shadow: 0 calc(var(--pw, 300) * .13px) 0 #1B1B1E; }
.phone__screen { position: absolute; left: 0; top: 0; width: 402px; height: 874px; transform: scale(var(--s, .7)); transform-origin: 0 0; border-radius: 57px; overflow: hidden; background: var(--app); }
.phone__island { position: absolute; z-index: 3; top: calc(11px * var(--s, .7)); left: 50%; width: calc(124px * var(--s, .7)); height: calc(36px * var(--s, .7)); transform: translateX(-50%); border-radius: 999px; background: #000; }

/* The floating widgets: copies of the opening screen's Sold widget and Graded comps card, lifted off the glass. */
.floaty { position: absolute; left: var(--fx); top: var(--fy); width: var(--fw); height: var(--fh); transform-style: preserve-3d; pointer-events: none; }
.floaty__drift { width: 100%; height: 100%; transform-style: preserve-3d; }
.floaty__in { width: var(--fwl); transform: scale(var(--s, .7)); transform-origin: 0 0; }
.floaty__in > * { box-shadow: 0 0 0 .5px rgba(0, 0, 0, .04), 0 2px 4px rgba(16, 32, 24, .05), 0 14px 28px -10px rgba(16, 32, 24, .20), 0 34px 70px -28px rgba(16, 32, 24, .26) !important; }
.floaty__in .w-green { box-shadow: 0 2px 4px rgba(10, 90, 50, .10), 0 14px 28px -10px rgba(10, 110, 60, .34), 0 34px 70px -28px rgba(10, 110, 60, .36) !important; }

.scr { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.scr.is-shown { opacity: 1; visibility: visible; }
.app-status { position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0 52px; font: 600 17px/1 var(--font); color: #000; letter-spacing: -.01em; }
.app-status__icons { display: flex; gap: 6px; align-items: center; }
.app-status svg { fill: #000; color: #000; }
.s-sig { width: 18px; height: 12px; } .s-wifi { width: 17px; height: 12px; } .s-bat { width: 27px; height: 13px; }

/* Step 1: the capture screen, over the Jordan 4 Bred */
.scr-camera { background: #fff; }
/* the shoes and their box sit centred inside the viewfinder's corners with the whole box in view (owner review, round 4:
   the box ran under the bar). The scene is 900pt wide, so the cut-out is 300 × 262pt, centred on (201, 364): the corners'
   own centre (they span 30–372 and 170–558; the bar starts at 582). */
.cam-scene { position: absolute; left: -249px; top: 65px; width: 900px; aspect-ratio: 3000 / 1994; }
.cam-scene__plate, .cam-scene__cut { position: absolute; }
.cam-scene__plate { inset: 0; }
.cam-scene__plate img { width: 100%; height: 100%; }
.cam-scene__cut { left: 33.321%; top: 28.044%; width: 33.357%; }
.cam-scene__cut img { width: 100%; height: auto; }
.cam-mark { position: absolute; width: 38px; height: 38px; border: 4px solid rgba(255, 255, 255, .92); filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .45)); }
.cam-mark--tl { left: 30px; top: 170px; border-right: 0; border-bottom: 0; border-top-left-radius: 14px; }
.cam-mark--tr { right: 30px; top: 170px; border-left: 0; border-bottom: 0; border-top-right-radius: 14px; }
.cam-mark--bl { left: 30px; top: 520px; border-right: 0; border-top: 0; border-bottom-left-radius: 14px; }
.cam-mark--br { right: 30px; top: 520px; border-left: 0; border-top: 0; border-bottom-right-radius: 14px; }
.cam-flash-btn { position: absolute; right: 22px; top: 72px; width: 40px; height: 40px; border-radius: 50%; background: rgba(0, 0, 0, .30); display: grid; place-items: center; }
.cam-flash-btn svg { width: 20px; height: 20px; color: #fff; }
.cam-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 292px; padding-top: 18px; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.cam-bar__row { position: relative; height: 44px; display: flex; align-items: center; justify-content: center; }
.cam-bar__wm { position: absolute; left: 18px; top: 12px; width: 78px; height: 18px; fill: var(--green); }
.cam-zoom { display: flex; gap: 2px; padding: 3px; height: 38px; border-radius: 19px; background: #F1EFE8; font: 500 15px/32px var(--font); color: #5F5E5A; }
.cam-zoom span { width: 44px; text-align: center; border-radius: 16px; }
.cam-zoom .is-on { background: #000; color: #fff; }
.cam-bar__row--shutter { height: 100px; margin-top: 8px; justify-content: space-between; padding: 0 22px 0 18px; }
.cam-thumb { width: 44px; height: 44px; border-radius: 10px; background: #EDEDEB url("/img/item-card-480.webp") center / 60% no-repeat; box-shadow: 0 0 0 1px #D3D1C7; }
.cam-shutter { width: 84px; height: 84px; border-radius: 50%; border: 5px solid #D8D6CE; background: #fff; display: grid; place-items: center; }
.cam-shutter__in { width: 64px; height: 64px; border-radius: 50%; border: 3.5px solid #111; background: #fff; }
.cam-flip { width: 30px; height: 30px; color: #1A1D1A; }
.app-tabs { position: absolute; left: 50%; bottom: 30px; width: 276px; height: 66px; padding: 5px; display: flex; transform: translateX(-50%); border-radius: 33px; background: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, .14), 0 0 0 1px rgba(0, 0, 0, .03); }
.cam-bar .app-tabs { position: static; transform: none; margin: 12px auto 0; }
.app-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 28px; font: 500 11px/1 var(--font); color: #5F5E5A; }
.app-tab svg { width: 26px; height: 22px; color: #5F5E5A; }
.app-tab.is-on { background: #E8E8E8; color: #1A1D1A; font-weight: 700; }
.app-tab.is-on svg { color: #1A1D1A; }
.scr-flash { background: #fff; }

/* Step 2: the loading screen */
.scr-loading { background: #fff; }
.load-ghost { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(12px) saturate(1.1); transform: scale(1.2); }
.load-veil { position: absolute; inset: 0; background: rgba(255, 255, 255, .88); }
.load-col { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; }
.load-ollie { width: 200px; height: 150px; object-fit: contain; }
.load-mark { height: 52px; margin-top: 12px; display: flex; align-items: flex-end; justify-content: center; }
.load-mark .bl { fill: var(--green); overflow: visible; }
.is-bouncing .bl { animation: letter-bounce 1.6s infinite; animation-delay: calc(var(--i) * 110ms); }
@keyframes letter-bounce {
  0% { transform: translateY(0); animation-timing-function: cubic-bezier(.25, .46, .45, .94); }
  13.75% { transform: translateY(-7px); animation-timing-function: cubic-bezier(.3, 0, .4, 1); }
  34.4%, 100% { transform: translateY(0); }
}

/* THE RESULT SCREEN (the opening, the story, the lineup), in the app's own points */
.app { position: absolute; inset: 0; background: var(--app); font-family: var(--font); color: var(--ink); }
.app-head { position: absolute; top: 60px; left: 16px; right: 16px; height: 46px; display: flex; align-items: center; justify-content: space-between; }
.app-head--centre { justify-content: flex-end; }
.app-circle { width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 10px rgba(0, 0, 0, .07), 0 0 0 .5px rgba(0, 0, 0, .04); display: grid; place-items: center; color: var(--ink); }
.app-circle svg { width: 22px; height: 22px; }
.app-circle .ic-cam { width: 26px; height: 22px; }
.app-head .wm { position: absolute; left: 50%; top: 50%; width: 86px; height: 20px; transform: translate(-50%, -50%); }
.app-body { position: absolute; top: 122px; left: 16px; right: 16px; }
.app-top { display: grid; grid-template-columns: 183px minmax(0, 1fr); gap: 14px; align-items: stretch; }
.app-card { background: #fff; border-radius: 20px; box-shadow: var(--shadow); }
/* the identity card is exactly as tall as the three widgets beside it, bottoms aligned (owner, 2026-09-28, replacing
   round 5's card that hugged its content); the picture's box takes the spare height and the name and facts sit at the
   card's foot */
.idc { padding: 14px 16px 16px; display: flex; flex-direction: column; }
.idc__pic { position: relative; flex: 1 1 auto; min-height: 196px; }
.idc__pic picture { display: contents; }
.idc__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.idc--card .idc__pic { min-height: 214px; }
/* a card's art keeps its proportions: as large as its box allows, centred in it */
.idc--card .idc__pic img { left: 50%; top: 50%; right: auto; bottom: auto; width: auto; height: auto; max-width: 100%; max-height: 100%; transform: translate(-50%, -50%); aspect-ratio: 600 / 825; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.idc__band { height: 10px; }
.idc__name { font: 700 19px/1.22 var(--font); letter-spacing: -.2px; }
.idc__facts { margin-top: 6px; font: 400 15px/1.3 var(--font); color: var(--muted); }
.idc__facts2 { margin-top: 8px; font: 400 13px/1.3 var(--font); color: var(--muted); }
/* the two price widgets are always one height — two equal rows, each as tall as the taller one — so their labels and
   numbers line up */
.app-col { display: grid; grid-template-rows: 1fr 1fr auto; gap: 16px; min-width: 0; }
.w { min-width: 0; border-radius: 20px; padding: 17px 16px; background: #fff; box-shadow: var(--shadow); }
.w-green { background: var(--green); color: #fff; box-shadow: 0 4px 12px rgba(22, 179, 100, .25); }
.w__label { font: 500 15px/1.25 var(--font); color: var(--muted); white-space: nowrap; }
.w-green .w__label, .w-green .w__sub { color: rgba(255, 255, 255, .88); }
/* ONE price size in every widget, split or not (owner review, round 3: "one number size that fits every widget"). 22/800
   is the size that fits the narrowest place a price sits — half a split widget, 63pt — with room to spare ("$400" is
   ~50pt); the layout audit checks every price's right edge against its widget on every size. */
.w__price { display: block; margin-top: 6px; font: 800 22px/1.15 var(--font); letter-spacing: -.4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.w__sub { display: block; margin-top: 4px; font: 400 13.5px/1.3 var(--font); color: var(--muted); }
.w__sub + .w__sub { margin-top: 2px; }
.w-split { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); gap: 9px; margin-top: 6px; }
.w-split > span { min-width: 0; }
.w-split__rule { background: rgba(255, 255, 255, .38); }
.w-white .w-split__rule { background: var(--divider); }
.w-split .w__price { margin-top: 0; }
.w-split .w__sub { font-size: 13px; }
.w-conf .w__word { display: block; margin-top: 6px; font: 700 16px/1.25 var(--font); letter-spacing: -.25px; white-space: nowrap; }
.bars { display: flex; gap: 6px; margin-top: 12px; }
.bars i { flex: 1; height: 5px; border-radius: 3px; background: #E9E9E6; }
.bars i.on { background: var(--green); }
.app-list { margin-top: 24px; padding: 16px; }
.app-list__head { display: flex; align-items: center; justify-content: space-between; }
.app-list__title { font: 400 15px/1.2 var(--font); color: var(--muted); }
.seg { display: flex; padding: 3px; border-radius: 17px; background: #EFEFEE; font: 500 14px/1 var(--font); color: #6B6B6B; }
.seg span { padding: 8px 14px; border-radius: 14px; }
.seg .is-on { background: #fff; color: var(--ink); font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.strip { margin: 14px -16px 0; padding: 0 16px; overflow: hidden; }
.strip__row { display: flex; gap: 10px; will-change: transform; }
/* THE APP'S LISTING CARD (lib/design/resultMetrics.ts and components/ResultView.tsx): 7pt of padding, the photo square on
   top (contained, never cut), the title in two lines, then the price in green with "+ shipping" or "Free shipping" on the
   same line. 146pt wide (round 6: at the 17 Pro's 132.5 "Free shipping" was cut off beside the price — the app shrinks the
   word to fit, the site never cuts it; the app's own card runs 152 on the Pro Max). The layout audit's TRUNCATED check
   fails any price or shipping line that does not fit. Round 4's photo box was an inline span, which has no height. */
.lc { flex: 0 0 146px; min-width: 0; padding: 7px; border-radius: 14px; background: #F5F5F3; }
.lc__photo { display: block; position: relative; width: 100%; aspect-ratio: 1; border-radius: 10px; background: #EAEAE7; overflow: hidden; }
.lc__photo img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; }
.lc__photo--flip img { transform: scaleX(-1); }
.lc__title { margin: 7px 1px 0; height: 32px; font: 400 12px/16px var(--font); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lc__price { margin: 4px 1px 0; height: 21px; display: flex; align-items: baseline; gap: 5px; font: 400 11px/21px var(--font); color: var(--muted); white-space: nowrap; overflow: hidden; }
.lc__price b { font: 800 15.5px/21px var(--font); color: var(--green); font-variant-numeric: tabular-nums; letter-spacing: -.2px; }
/* Graded comps: the app's card under the result (a card's grade ladder) */
.app-graded { margin-top: 24px; padding: 18px 18px 16px; }
.app-graded__title { font: 600 17px/1.25 var(--font); letter-spacing: -.2px; }
.app-graded__row { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 0; font: 400 17px/1.25 var(--font); }
.app-graded__row b { font-weight: 500; font-variant-numeric: tabular-nums; }
.app-graded__row:first-of-type { margin-top: 6px; }
.app-graded__foot { margin-top: 8px; font: 400 15px/1.3 var(--font); color: var(--muted); }

/* the rolling digits (the app's odometer): each digit is a column of 0–9 twice, moved by its own tween */
.roll { display: inline-flex; overflow: hidden; vertical-align: top; }
.roll__col { display: inline-block; height: 1.15em; overflow: hidden; }
.roll__reel { display: flex; flex-direction: column; will-change: transform; }
.roll__reel span, .roll__ch { display: block; height: 1.15em; line-height: 1.15em; }

/* The opening's words: headline, subline, the button and the QR card, left of the phone on a laptop */
.hero-copy { position: absolute; z-index: 6; left: var(--copy-x, 6vw); top: 50%; transform: translateY(-50%); width: var(--copy-w, 460px); }
.hero-copy__title { margin: 0; font: 700 clamp(44px, 4.9vw, 76px)/1.06 var(--font); letter-spacing: -.038em; }
.hero-copy__sub { margin: 18px 0 0; font: 400 clamp(17px, 1.45vw, 22px)/1.4 var(--font); color: #4B5563; max-width: 21em; }
.hero-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 34px; }
.step-text { position: absolute; z-index: 5; left: max(var(--pad), 5.5vw); top: 50%; width: min(26vw, 400px); margin: 0; transform: translateY(-50%); opacity: 0; visibility: hidden; font: 700 clamp(30px, 3.2vw, 50px)/1.08 var(--font); letter-spacing: -.032em; }
.callouts { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.callout { position: absolute; left: var(--cx, 0); top: var(--cy, 0); width: var(--cw, 280px); transform: translateY(-50%); opacity: 0; visibility: hidden; }
.callout p { margin: 0; font: 600 clamp(17px, 1.45vw, 22px)/1.25 var(--font); letter-spacing: -.012em; }
.callout__line { position: absolute; top: 50%; right: calc(100% + 14px); width: var(--lw, 60px); height: 1px; background: rgba(26, 29, 26, .32); transform-origin: 0 50%; }
.callout__line::before { content: ""; position: absolute; left: -4px; top: -3.5px; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2.5px #fff; }
.callout--left { text-align: right; }
.callout--left .callout__line { right: auto; left: calc(100% + 14px); transform-origin: 100% 50%; }
.callout--left .callout__line::before { left: auto; right: -4px; }
.scroll-hint { position: absolute; z-index: 6; left: 50%; bottom: max(14px, calc(env(safe-area-inset-bottom) + 4px)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; font: 500 14px/1.2 var(--font); color: var(--green-text); text-decoration: none; padding: 6px 10px; white-space: nowrap; }
.scroll-hint svg { width: 18px; height: 18px; animation: hint 2.2s var(--ease) infinite; }
@keyframes hint { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ── THE LINEUP ── */
.lineup { background: var(--ground); padding: clamp(88px, 11vw, 150px) 0 clamp(64px, 8vw, 110px); }
/* a title's line height leaves room under the letters: the word-by-word reveal masks each word to its line box, and at
   1.03 it cut the descenders of "Everything else." (owner review, round 3) */
.kw { color: var(--green-head); }
/* a green word and the punctuation after it never part: SplitText makes the "." its own word, which could start a line */
.kw-glue { white-space: nowrap; }
.title { margin: 0 0 clamp(32px, 4vw, 56px); font: 700 clamp(36px, 5.2vw, 72px)/1.12 var(--font); letter-spacing: -.038em; max-width: 13em; }
[data-split] .word-mask, [data-split] .line-mask { padding-bottom: .14em; margin-bottom: -.14em; }
/* NEVER A VERTICAL SCROLLER (owner, 2026-09-29: "Vertical wheel and trackpad scrolling must ALWAYS scroll the page … including
   over the strip"). overflow-x: auto made overflow-y compute to auto, and the tiles stand 12px taller than the box, so the
   strip was a 12px vertical scroller: a Mac trackpad gesture that began over it latched to it and the page stopped. */
.lineup__track {
  display: flex; gap: 20px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scroll-padding-left: var(--wrap-pad); padding: 6px var(--wrap-pad) 28px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.lineup__track::-webkit-scrollbar { display: none; }
.lineup__track::after { content: ""; flex: none; width: 1px; }
/* the whole tile opens its result (round 5); its "See the result" button is the one keyboard stop */
.tile { cursor: pointer; position: relative; flex: none; width: clamp(290px, 27vw, 372px); height: clamp(470px, 40vw, 560px); padding: 30px 28px; border-radius: 28px; overflow: hidden; scroll-snap-align: start; isolation: isolate; }
.tile--cards { background: radial-gradient(120% 80% at 50% 100%, #FFC9A8 0%, rgba(255, 201, 168, 0) 60%), linear-gradient(165deg, #FFF4EC 0%, #FFE3D1 100%); }
.tile--sneakers { background: radial-gradient(110% 70% at 50% 100%, #F6D3D5 0%, rgba(246, 211, 213, 0) 58%), linear-gradient(165deg, #F7F7F8 0%, #E7E8EC 100%); }
.tile--clothing { background: radial-gradient(120% 80% at 50% 100%, #C9D6EE 0%, rgba(201, 214, 238, 0) 60%), linear-gradient(165deg, #F2F5FB 0%, #DFE6F4 100%); }
.tile--tech { background: radial-gradient(120% 80% at 50% 100%, #D9D6E6 0%, rgba(217, 214, 230, 0) 60%), linear-gradient(165deg, #F6F5F9 0%, #E4E2EC 100%); }
.tile--goods { background: radial-gradient(120% 80% at 50% 100%, #EBDDC4 0%, rgba(235, 221, 196, 0) 60%), linear-gradient(165deg, #FBF8F2 0%, #F0E7D8 100%); }
.tile__cat { margin: 0; font: 700 clamp(24px, 2vw, 28px)/1.15 var(--font); letter-spacing: -.025em; }
.tile__line { margin: 8px 0 0; font: 400 17px/1.35 var(--font); color: rgba(26, 29, 26, .72); max-width: 16em; }
.tile__item { position: absolute; z-index: -1; left: 50%; bottom: 86px; transform: translateX(-50%); transition: transform .6s var(--ease); }
.tile__item img { width: 100%; height: auto; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .16)); }
.tile__item--card { width: 50%; bottom: 92px; }
.tile__item--card img { border-radius: 10px; }
.tile__item--sneakers { width: 82%; bottom: 96px; }
.tile__item--hoodie { width: 74%; }
.tile__item--headphones { width: 64%; }
.tile__item--bottle { width: 30%; }
.tile:hover .tile__item { transform: translateX(-50%) translateY(-6px); }
.tile__open { position: absolute; left: 28px; bottom: 22px; padding: 12px 0; border: 0; background: none; cursor: pointer; font: 600 17px/1 var(--font); color: var(--blue); }
.tile__open span { display: inline-block; margin-left: 2px; transition: transform .3s var(--ease); }
.tile__open:hover span { transform: translateX(3px); }
.lineup__nav { display: flex; justify-content: flex-end; gap: 12px; margin-top: 4px; }
.arrow { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .07); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background .2s, opacity .2s; }
.arrow:hover { background: rgba(0, 0, 0, .11); }
.arrow[disabled] { opacity: .35; cursor: default; }
.arrow svg { width: 20px; height: 20px; }

/* ── WHY COMPS: four sections, one after another (owner review, round 4) ── */
/* 4 · the opener: "Why comps?" at the hero's scale, "comps" the green wordmark itself (Sora 800 drawn as outlines).
   The mark is sized so its lowercase letters stand as tall as the headline's (the mark's x-height is 59.2 of its 77.2
   units; SF's is ~0.53em; the bolder Sora reads right 8% larger) and sits on the same baseline (its baseline is 19 units
   above its foot). Round 6: it is the statement's own first line — centred above it in the one section, with the
   section's heading spacing between them (on an iPhone it had stood alone, left-aligned, between two empty bands). */
.why-open__title { margin: 0 0 clamp(26px, 3.2vw, 48px); font: 700 clamp(44px, 4.9vw, 76px)/1.06 var(--font); letter-spacing: -.038em; text-align: center; }
.why-open__wm { display: inline-block; width: 3.377em; height: .746em; margin: 0 .03em 0 .02em; vertical-align: -.184em; fill: var(--green); overflow: visible; }
/* 5 · the statement: the headline large and centred, one line under it, a lot of white */
.statement { padding: clamp(110px, 13vw, 190px) 0 clamp(120px, 15vw, 210px); text-align: center; background: var(--page); }
.statement__inner { display: flex; flex-direction: column; align-items: center; }
/* balanced lines: no word left alone on a headline's last line */
.statement__title, .feature__title, .title { text-wrap: balance; }
.statement__title { margin: 0; max-width: 11.5em; font: 700 clamp(44px, 7.2vw, 104px)/1.06 var(--font); letter-spacing: -.045em; }
.statement__line { margin: clamp(22px, 2.4vw, 34px) auto 0; max-width: 29em; font: 400 clamp(18px, 1.6vw, 23px)/1.45 var(--font); color: #4B5563; }
/* 6–8 · a feature: its words on one side, its phone on the other (alternating), stacked on a phone */
.feature { padding: clamp(96px, 10vw, 150px) 0; }
.feature--alt { background: var(--ground); }
.feature__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(40px, 6vw, 96px); max-width: 1180px; }
.feature__copy { justify-self: end; width: 100%; max-width: 30rem; }
.feature--flip .feature__copy { justify-self: start; }
.feature--flip .feature__copy { order: 2; }
.feature__title { margin: 0; max-width: 10em; font: 700 clamp(38px, 4.8vw, 68px)/1.08 var(--font); letter-spacing: -.04em; }
.feature__line { margin: clamp(18px, 1.8vw, 26px) 0 0; max-width: 24em; font: 400 clamp(17px, 1.5vw, 21px)/1.5 var(--font); color: #4B5563; }
.feature__visual { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.phone--feature { position: relative; left: auto; top: auto; flex: none; }
.demo-scr { overflow: hidden; }

/* 7 · MULTI-SCAN: the photo picker, the loading beat, the results grid */
.mu { position: absolute; inset: 0; background: #D8D8DC; }
.mu > div { position: absolute; inset: 0; }
.pk-sheet { position: absolute; left: 0; right: 0; top: 54px; bottom: 0; border-radius: 14px 14px 0 0; background: #fff; overflow: hidden; will-change: transform; }
.pk-bar { height: 54px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; font: 400 17px/1 var(--font); color: #007AFF; white-space: nowrap; }
.pk-bar__title { font-weight: 600; color: #000; }
.pk-add { font-weight: 600; color: #C7C7CC; transition: color .25s; }
.pk-add.is-on { color: #007AFF; }
.pk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.pk-cell { position: relative; aspect-ratio: 1; overflow: hidden; background: linear-gradient(160deg, var(--a, #EFEDE8), var(--b, #DCD8D0)); }
.pk-cell::before { content: ""; position: absolute; left: 18%; right: 18%; bottom: 13%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0)); }
.pk-cell > img { position: absolute; left: 50%; top: 50%; width: var(--w, 62%); height: auto; transform: translate(-50%, -54%); filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .18)); }
.pk-cell--card > img { border-radius: 6px; }
.pk-cell--scene::before { display: none; }
.pk-scene { position: absolute; left: -155px; top: -70px; width: 510px; aspect-ratio: 3000 / 1994; }
.pk-scene > * { position: absolute; }
.pk-scene__plate { inset: 0; }
.pk-scene__plate img { width: 100%; height: 100%; }
.pk-scene__cut { left: 33.321%; top: 28.044%; width: 33.357%; }
.pk-scene__cut img { width: 100%; height: auto; }
.pk-check { position: absolute; right: 9px; bottom: 9px; width: 28px; height: 28px; border-radius: 50%; background: #007AFF; box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0, 0, 0, .25); color: #fff; display: grid; place-items: center; opacity: 0; transform: scale(.6); }
.pk-check svg { width: 20px; height: 20px; }
.pk-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 86px; padding-top: 16px; border-top: .5px solid #D1D1D6; background: rgba(249, 249, 249, .94); text-align: center; font: 400 13px/1.2 var(--font); color: #6B7280; }
.pk-foot b { font-weight: 600; color: #000; }
.mu-load { background: #fff; }
.mu-res { background: var(--app); }
/* the mock-up's grid never takes the page's scroll (2026-09-29): it was a 123px vertical scroller that contained its overscroll */
.mu-scroll { position: absolute; left: 0; right: 0; top: 116px; bottom: 0; overflow: hidden; padding: 4px 16px 40px; scrollbar-width: none; }
.mu-scroll::-webkit-scrollbar { display: none; }
.mu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* the item card: History, Saved and the multi-scan grid (components/ItemTile.tsx) */
.it { position: relative; padding: 10px 10px 12px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.it__pic { position: relative; height: 150px; margin-bottom: 8px; border-radius: 10px; background: #fff; }
.it__pic picture { display: contents; }
.it__pic img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; }
.it__heart { position: absolute; right: 6px; top: 6px; z-index: 1; width: 23px; height: 21px; color: var(--ink); }
.it__heart--on { color: #E5484D; }
.it__name { font: 500 15px/1.3 var(--font); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 39px; }
.it__facts { margin-top: 3px; height: 17px; font: 400 13px/1.3 var(--font); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.it__price { margin-top: 8px; height: 24px; display: flex; align-items: center; gap: 6px; white-space: nowrap; font: 400 13px/1 var(--font); color: var(--muted); }
.it__price b { font: 700 18px/1 var(--font); color: #0E8A50; font-variant-numeric: tabular-nums; letter-spacing: -.2px; }
.it__row { margin-top: 8px; height: 24px; display: flex; align-items: center; justify-content: space-between; }
.it__row b { font: 700 17px/1 var(--font); color: #0E8A50; font-variant-numeric: tabular-nums; letter-spacing: -.2px; }
.it__step { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 999px; background: #F1F1F0; font: 500 12px/1 var(--font); white-space: nowrap; }
.it__step i { font-style: normal; color: #9A9A96; }
.it__step i + span + i { color: var(--ink); }
.it__pill { display: inline-flex; align-items: center; gap: 4px; height: 22px; margin-top: 6px; padding: 0 9px; border-radius: 999px; background: #F1F1F0; font: 500 12px/1 var(--font); color: var(--muted); white-space: nowrap; }
.it__pill svg { width: 11px; height: 11px; }

/* 8 · THE COLLECTION: the app's Profile — the wordmark row, the identity card, the ring and its legend, the Saved sheet */
.pf { position: absolute; inset: 0; background: var(--app); }
.pf-card { position: absolute; left: 16px; right: 16px; top: 116px; height: 96px; padding: 0 20px 0 18px; display: flex; align-items: center; gap: 16px; }
.pf-avatar { position: relative; flex: none; width: 60px; height: 60px; border-radius: 50%; background: #DFF4E8; overflow: hidden; }
.pf-avatar img { position: absolute; left: 4px; top: 8px; width: 52px; height: 52px; object-fit: contain; }
.pf-id { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pf-name { font: 700 19px/1.2 var(--font); letter-spacing: -.3px; }
.pf-badge { height: 22px; padding: 0 10px; border-radius: 999px; background: #E7F8F0; display: flex; align-items: center; font: 600 12px/1 var(--font); color: #0E8A50; white-space: nowrap; }
.pf-stats { margin-left: auto; display: flex; gap: 24px; }
.pf-stats span { display: flex; flex-direction: column; align-items: center; gap: 5px; font: 400 13px/1 var(--font); color: var(--muted); }
.pf-stats b { font: 700 19px/1 var(--font); color: var(--ink); font-variant-numeric: tabular-nums; }
.pf-stats b.g { color: #0E8A50; }
.pf-dash { position: absolute; left: 16px; right: 16px; top: 232px; display: flex; align-items: center; gap: 18px; }
.pf-ring { position: relative; flex: none; width: 190px; height: 190px; border: 0; padding: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pf-ring__turn { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); transition: transform .35s cubic-bezier(.2, .9, .2, 1); }
.pf-ring__turn circle { fill: none; stroke-width: 25; transition: opacity .35s cubic-bezier(.2, .9, .2, 1); }
.pf-ring__turn.is-picking circle:not(.is-on) { opacity: .3; }
.pf-ring__cut { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .2s; }
.pf-ring__cut.is-on { opacity: 1; }
.pf-ring__c { position: absolute; inset: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; text-align: center; }
.pf-ring__c em { height: 17px; font: 400 13px/17px var(--font); font-style: normal; color: var(--blue); white-space: nowrap; }
.pf-ring__c b { margin-top: 1px; font: 800 22px/26px var(--font); font-variant-numeric: tabular-nums; letter-spacing: -.3px; color: var(--ink); white-space: nowrap; }
.pf-ring__c small { margin-top: 1px; font: 400 11px/14px var(--font); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-ring__c .is-swap { animation: pf-swap .35s cubic-bezier(.2, .9, .2, 1) both; }
@keyframes pf-swap { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.pf-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pf-leg { width: 100%; position: relative; padding: 7px 0 7px 18px; border: 0; background: none; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 2px; color: var(--ink); transition: opacity .35s cubic-bezier(.2, .9, .2, 1); -webkit-tap-highlight-color: transparent; }
.pf-leg::before { content: ""; position: absolute; left: 0; top: 10px; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.pf-leg span { font: 400 13px/1.2 var(--font); color: var(--muted); white-space: nowrap; }
.pf-leg b { font: 700 13px/1.2 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-legend.is-picking .pf-leg:not([aria-pressed="true"]) { opacity: .45; }
.pf-sheet { position: absolute; left: 0; right: 0; top: 446px; bottom: 0; padding: 10px 16px 0; border-radius: 26px 26px 0 0; background: #fff; box-shadow: 0 -8px 30px rgba(0, 0, 0, .06); }
.pf-sheet::before { content: ""; display: block; width: 36px; height: 5px; margin: 0 auto 12px; border-radius: 3px; background: #E2E2E0; }
.pf-sheet__title { height: 30px; font: 700 21px/30px var(--font); letter-spacing: -.3px; }
.pf-grid { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pf-grid .it { padding: 8px 8px 10px; box-shadow: 0 0 0 1px #EFEFEC; }
.pf-grid .it__pic { height: 116px; }
.pf-grid.is-swap { animation: pf-swap .3s cubic-bezier(.2, .9, .2, 1) both; }
.pf-tabs { bottom: 26px; }
/* the collection's pictures, loaded ahead and never shown (js/site.js) */
.pf-preload { position: absolute; left: 0; top: 0; width: 180px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

/* ── THE FINAL CALL ── */
.final { padding: clamp(96px, 13vw, 170px) 0 clamp(80px, 10vw, 130px); text-align: center; }
.final__inner { display: flex; flex-direction: column; align-items: center; }
.title--final { margin: 0 auto 36px; font-size: clamp(40px, 6.6vw, 88px); max-width: 11em; }
.final__cta { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; }

/* ── FOOTER ── */
.foot { padding: 44px 0 calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid #EEEEEA; }
.foot__wm { width: 74px; height: 17px; }
.foot__note { margin: 18px 0 0; font: 500 13px/1.4 var(--font); color: #4B5563; }
.foot__legal { margin: 10px 0 0; max-width: 62em; font: 400 12px/1.55 var(--font); color: var(--muted); }
.foot__links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin: 18px 0 0; font: 400 13px/1 var(--font); color: var(--muted); }
.foot__links a { color: var(--ink); text-decoration: none; padding: 8px 0; }
.foot__links a:hover { color: var(--green-text); }

/* ── A LINEUP RESULT: every category's result side by side, swiped like photos (horizontal scroll snap) ── */
/* a scroll over the dialog stays in it (overscroll-behavior), so the page behind is never locked by script */
.result-dialog { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; overscroll-behavior: contain; }
.result-dialog[open] { display: block; }
.result-dialog::backdrop { background: #F5F5F3; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.result-dialog__close { position: absolute; z-index: 3; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, .1); display: grid; place-items: center; cursor: pointer; }
.result-dialog__close svg { width: 20px; height: 20px; }
.rd-track { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; outline: none; }
.rd-track::-webkit-scrollbar { display: none; }
.rd-page { flex: 0 0 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 56px 16px 24px; }
.rd-page__cat { margin: 0; font: 700 22px/1.2 var(--font); letter-spacing: -.02em; }
.rd-arrow { position: absolute; z-index: 3; top: 50%; width: 52px; height: 52px; margin-top: -26px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .1); display: grid; place-items: center; cursor: pointer; transition: opacity .2s; }
.rd-arrow svg { width: 22px; height: 22px; }
.rd-arrow--prev { left: max(24px, calc(50% - var(--rd-pw, 380px) / 2 - 100px)); }
.rd-arrow--next { right: max(24px, calc(50% - var(--rd-pw, 380px) / 2 - 100px)); }
.rd-arrow[disabled] { opacity: .3; cursor: default; }
.rd-count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.phone--half { position: relative; left: auto; top: auto; flex: none; aspect-ratio: 426 / 566; border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent); mask-image: linear-gradient(to bottom, #000 88%, transparent); }
.phone--half::before, .phone--half::after { display: none; }
.phone--half .phone__screen { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* ── iPHONE AND NARROW SCREENS: the opening stacks — the words above, the phone, the button below ── */
@media (max-width: 899px) {
  :root { --nav-h: 54px; }
  .nav__links { display: none; }
  .nav__pill { padding: 0 7px 0 18px; }
  .nav__brand .wm { width: 72px; height: 16px; }
  .dl--nav .dl__soon { height: 40px; padding: 0 14px; font-size: 12.5px; }
  .hero-copy { left: 0; right: 0; top: 0; bottom: 0; width: auto; transform: none; display: flex; flex-direction: column; align-items: center; text-align: center; pointer-events: none;
    padding: calc(var(--nav-top) + var(--nav-h) + clamp(10px, 2.2svh, 22px)) var(--pad) calc(max(14px, env(safe-area-inset-bottom)) + 42px); }
  .hero-copy > * { pointer-events: auto; }
  .hero-copy__title { font-size: clamp(36px, 10vw, 46px); }
  .hero-copy__sub { margin: 8px auto 0; font-size: clamp(15.5px, 4.2vw, 18px); max-width: 21em; }
  .hero-cta { margin-top: auto; align-items: center; }
  .qr { display: none; }
  .dl--hero .dl__soon { height: 50px; font-size: 15px; }
  .scroll-hint { bottom: max(4px, env(safe-area-inset-bottom)); }
  .step-text { left: var(--pad); right: var(--pad); top: auto; bottom: var(--caption-bottom, 60px); width: auto; transform: none; text-align: center; font-size: clamp(24px, 6.6vw, 32px); }
  .callout p { font-size: 15px; line-height: 1.3; }
  .tile { width: min(80vw, 330px); height: min(128vw, 500px); }
  .feature__inner, .feature--flip .feature__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .feature--flip .feature__copy { order: 0; }
  .feature__copy, .feature--flip .feature__copy { justify-self: stretch; max-width: none; }
  /* each sentence of the statement on one line of its own from the SE's width up (at 44pt "Millions" stood alone) */
  .statement__title { font-size: clamp(30px, 8.4vw, 46px); }
  .final__cta { gap: 18px; }
  .rd-arrow { display: none; }
  .rd-page { padding-top: 64px; }
  /* the four links fold into a menu */
  .nav__menu { display: grid; place-content: center; gap: 5px; width: 40px; height: 40px; margin-left: 2px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .06); cursor: pointer; flex: none; }
  .nav__menu span { display: block; width: 16px; height: 2px; border-radius: 1px; background: var(--ink); transition: transform .25s var(--ease); }
  .nav__menu[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .nav__menu[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .nav__links { position: absolute; left: 0; right: 0; top: calc(100% + 8px); display: none; flex-direction: column; gap: 0; padding: 8px; border-radius: 22px; background: #FFFFFF; isolation: isolate; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 16px 40px rgba(0, 0, 0, .12); }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 14px 16px; font-size: 17px; border-radius: 14px; }
}
@media (max-width: 380px) {
  .dl--nav .dl__soon { font-size: 11.5px; padding: 0 12px; }
  .nav__brand .wm { width: 64px; height: 15px; }
}
/* laptops between 900 and 1100 wide: the nav's links tighten so the pill never wraps */
@media (min-width: 900px) and (max-width: 1100px) {
  .nav__pill { padding-left: 18px; }
  .nav__links a { padding: 10px 9px; font-size: 13.5px; }
  .dl--nav .dl__soon { padding: 0 13px; font-size: 12.5px; }
}

/* ── REDUCE MOTION: every movement becomes a fade (js/site.js runs its fade-only branch) ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-hint svg, .is-bouncing .bl { animation: none; }
  .tile__item, .tile__open span { transition: none; }
  .tile:hover .tile__item { transform: translateX(-50%); }
  /* the ring changes its highlight with a fade, never a turn */
  .pf-ring__turn { transition: none; }
  .pf-ring__c .is-swap, .pf-grid.is-swap { animation: pf-fade .3s both; }
  @keyframes pf-fade { from { opacity: 0; } to { opacity: 1; } }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ── DOCUMENT PAGES: privacy, terms, support, 404, invites — the same nav, footer and type as the home page ── */
.doc { max-width: 760px; margin: 0 auto; padding: calc(var(--nav-top) + var(--nav-h) + 56px) var(--pad) 96px; }
.doc h1 { margin: 0 0 8px; font: 700 clamp(34px, 5vw, 48px)/1.1 var(--font); letter-spacing: -.035em; }
.doc h2 { margin: 48px 0 12px; font: 700 clamp(22px, 2.6vw, 26px)/1.2 var(--font); letter-spacing: -.02em; }
.doc h3 { margin: 30px 0 8px; font: 600 18px/1.3 var(--font); letter-spacing: -.01em; }
.doc p, .doc li { font: 400 17px/1.6 var(--font); color: #2A302C; }
.doc a { color: var(--green-text); }
.doc strong { font-weight: 600; color: var(--ink); }
.doc ul { padding-left: 22px; }
.doc li { margin: 6px 0; }
.doc hr { border: 0; border-top: 1px solid #EEEEEA; margin: 40px 0; }
.doc .updated { margin: 0 0 32px; font-size: 15px; color: var(--muted); }
.doc table { width: 100%; margin: 20px 0; border-collapse: collapse; font-size: 15px; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); display: block; overflow-x: auto; }
.doc th { text-align: left; padding: 12px 14px; background: var(--ground); font-weight: 600; font-size: 13px; letter-spacing: .02em; border-bottom: 1px solid #EEEEEA; }
.doc td { padding: 12px 14px; border-bottom: 1px solid #EEEEEA; vertical-align: top; }
.doc tr:last-child td { border-bottom: 0; }
.doc blockquote { margin: 20px 0; padding: 14px 18px; background: var(--ground); border-left: 3px solid var(--green); border-radius: 0 12px 12px 0; }
@media (max-width: 899px) { .doc p, .doc li { font-size: 16px; } .doc th, .doc td { padding: 10px; } }