/* Sovereign landing v4 (Blake 9/23 brief: notes/2026-09-23_blake_brief.md)
   LOCKED: flat white type, SILVER accent with shimmer, NO gold, colour only from real retailer logos (and Whop's own mark).
   Type = flashmotion.io's face (DM Sans, light italic + semibold upright). Ground = the Pulse film's, so the film frame IS the page. */
:root {
  --ground: #0A0B0D;
  --panel: #111317;
  --card: #15181D;
  --ink: #F6F7F8;
  --body: #C9CDD3;
  --muted: #8E949C;
  --hair: rgba(255, 255, 255, 0.08);
  --hair-2: rgba(255, 255, 255, 0.14);
  --silver: linear-gradient(100deg, #8E949C 0%, #F6F7F8 18%, #C9CDD3 34%, #FFFFFF 50%, #9EA3AA 66%, #EEF0F3 84%, #8E949C 100%);
  --glow: 214, 220, 230;
  --font: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1200px;
  --radius: 20px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--body); font-family: var(--font); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }

/* the living ground: two soft silver lights drifting slowly behind everything (the film's ground, J2/J15), never cut */
.ground { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--ground); }
.light { position: absolute; width: 70vmax; height: 55vmax; border-radius: 50%; filter: blur(60px); opacity: 0.55; }
.l1 { left: -10vmax; top: -18vmax; background: radial-gradient(closest-side, rgba(var(--glow), 0.10), rgba(var(--glow), 0)); animation: drift1 38s ease-in-out infinite alternate; }
.l2 { right: -18vmax; top: 30vh; background: radial-gradient(closest-side, rgba(236, 239, 245, 0.07), rgba(236, 239, 245, 0)); animation: drift2 46s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(28vw, 22vh) scale(1.12); } }
@keyframes drift2 { to { transform: translate(-30vw, -16vh) scale(0.92); } }

/* type: flashmotion mixing */
.it { font-style: italic; font-weight: 300; letter-spacing: -0.035em; }
.up { font-style: normal; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); }
.eyebrow { margin: 0 0 18px; font-size: 13px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.silver { background: var(--silver); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 16px rgba(var(--glow), 0.22)); animation: shimmer 7s ease-in-out infinite; }
@keyframes shimmer { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0% 0; } }
.h2 { margin: 0; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.04; color: var(--ink); font-weight: 400; }
.h2 .it { color: var(--ink); }

/* nav */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: calc(16px + env(safe-area-inset-top, 0px)) var(--gutter) 16px; transition: background 0.3s, border-color 0.3s; border-bottom: 1px solid transparent; }
.nav.scrolled { background: rgba(10, 11, 13, 0.72); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border-bottom-color: var(--hair); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 600; letter-spacing: -0.02em; font-size: 18px; }

/* buttons: the light pill with a light running round its edge (flashmotion fm_3), a dark ghost */
.btn { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 999px; font: 500 14px/1 var(--font); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: transform 0.2s ease, background 0.2s ease; }
.btn:active { transform: translateY(1px); }
.btn-sm { height: 40px; padding: 0 18px; font-size: 12px; }
.btn-light { background: #EEEFF1; color: #0A0B0D; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.9); }
.btn-light:hover { background: #FFFFFF; }
.btn-ghost { color: var(--ink); background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--hair-2); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.08); }
.arrow { font-size: 16px; letter-spacing: 0; transition: transform 0.2s; }
.btn:hover .arrow { transform: translateX(3px); }
@property --sweep { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.btn-sweep::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; background: conic-gradient(from var(--sweep), rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0) 250deg, rgba(var(--glow), 0.95) 320deg, #FFFFFF 340deg, rgba(255, 255, 255, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: sweep 3.6s linear infinite; filter: blur(0.4px) drop-shadow(0 0 6px rgba(var(--glow), 0.8)); }
@keyframes sweep { to { --sweep: 360deg; } }

/* 1 hero */
.hero { padding: clamp(88px, 11vh, 112px) var(--gutter) 0; text-align: center; }   /* Blake round 1: "the copy could be moved up more" (was 120-170 px + the eyebrow) */
.headline { margin: 0 auto; font-size: clamp(38px, 5.4vw, 80px); line-height: 1.02; color: var(--ink); font-weight: 400; }
.headline .it, .headline .up { display: block; white-space: nowrap; }
@media (max-width: 760px) { .headline { max-width: 11ch; } .headline .it, .headline .up { white-space: normal; } }
.actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin: clamp(24px, 3.4vh, 36px) 0 0; }
.film { position: relative; margin: clamp(24px, 3.4vh, 36px) auto 0; width: min(100%, max(560px, calc((100svh - 420px) * 16 / 9)));   /* hero group (9/24): the film yields height so the button + Top Rated strip stay in the first screen */   /* Blake 00:58 "move the video up more" (was 48-72 px) */ max-width: var(--maxw); border-radius: var(--radius); overflow: hidden; background: #000; aspect-ratio: 16 / 9;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 40px 120px rgba(0, 0, 0, 0.6), 0 0 120px rgba(var(--glow), 0.06); }
.film video { width: 100%; height: 100%; object-fit: cover; }

/* 2 trust strip */
.trust { max-width: var(--maxw); margin: 0 auto; padding: clamp(22px, 3vh, 30px) var(--gutter) clamp(40px, 6vh, 72px); text-align: center; }   /* directly under the button: one hero group */
.rated { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 14px; margin: 0; font-size: 15px; color: var(--muted); }
.rated-label { letter-spacing: 0.22em; text-transform: uppercase; font-size: 13px; font-weight: 500; }
.whop { color: var(--ink); display: inline-flex; }
.whop-logo { height: 24px; width: auto; }
.faces { display: inline-flex; align-items: center; }
.face { width: 40px; height: 40px; border-radius: 50%; margin-left: -10px; object-fit: cover; box-shadow: 0 0 0 3px var(--ground); }
.face:first-child { margin-left: 0; }
.numbers { display: grid; grid-template-columns: 1fr 1fr; margin: clamp(32px, 5vh, 48px) auto 0; max-width: 880px; }
.stat { padding: 8px 12px; }
.stat + .stat { border-left: 1px solid var(--hair-2); }
.num { margin: 0; font-size: clamp(40px, 6.4vw, 88px); line-height: 1; font-weight: 600; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.plus { margin-left: 2px; }
.label { margin: 14px 0 0; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }

/* 3 retailer wall: three depths drifting, edges fade, known brands in the sharp middle layer */
.field { position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-composite: intersect; }
.lane { position: absolute; left: 0; display: flex; align-items: center; will-change: transform; }
.logo { flex: none; display: flex; align-items: center; justify-content: center; }
.logo img { display: block; object-fit: contain; }
.logo.invert img { filter: invert(1); }
.logo.chip { border-radius: 50%; background: #FFFFFF; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }
.logo.plate img { border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }

@media (max-width: 640px) {
  .numbers { grid-template-columns: 1fr; gap: 28px; }
  .stat + .stat { border-left: 0; border-top: 1px solid var(--hair-2); padding-top: 28px; }
  .btn { height: 48px; padding: 0 20px; }
  .nav .btn-sm { padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .light, .silver, .btn-sweep::before { animation: none; }
  html { scroll-behavior: auto; }
}

/* shared section head */
.features, .proof, .ways, .faq { padding: clamp(80px, 13vh, 150px) 0 0; }
.head { text-align: center; padding: 0 var(--gutter); margin-bottom: clamp(36px, 6vh, 64px); }
b { color: var(--ink); font-weight: 600; }

/* 4 what it does: the commas grid, dark (6 cards, 3 × 2), each card a live mock + a bold-noun caption */
.mock { position: relative; height: 290px; border-radius: 16px; background: #0D0F12; box-shadow: inset 0 0 0 1px var(--hair); overflow: hidden; padding: 18px; font-size: 13px; }
.k { color: var(--muted); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; margin-right: 6px; }

/* mock 1: the real sale-pulse embed (Discord embed, its own green bar) */
.embed { position: relative; margin-top: 26px; padding: 16px 16px 14px 20px; border-radius: 10px; background: #1B1D22; box-shadow: inset 0 0 0 1px var(--hair); }
.embed::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 10px 0 0 10px; background: linear-gradient(180deg, #FFFFFF, #8E949C); }   /* the real embed bar is green; the locked palette keeps colour for the logos */
.embed-title { margin: 0 0 12px; color: var(--ink); font-weight: 600; font-size: 14px; letter-spacing: 0.01em; }
.embed-code, .embed-count { margin: 6px 0; color: var(--body); }
.embed-count b { font-size: 26px; letter-spacing: -0.02em; }
.tiers { display: flex; gap: 3px; margin: 14px 0 10px; height: 26px; }
.tiers .t { flex: 0 0 var(--w); display: flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--ink); transform-origin: left center; }
.t.hi { background: rgba(255, 255, 255, 0.22); } .t.md { background: rgba(255, 255, 255, 0.12); } .t.lo { background: rgba(255, 255, 255, 0.06); color: var(--muted); }
.embed-foot { margin: 0; font-size: 11px; color: var(--muted); }
.scard[data-mock="pulse"] .embed { transform: translateY(0); opacity: 1; transition: transform 0.9s cubic-bezier(0.2, 0.9, 0.2, 1), opacity 0.6s; }
.scard[data-mock="pulse"]:not(.play) .embed { transform: translateY(40px); opacity: 0; }
.scard[data-mock="pulse"] .t { transition: transform 0.8s cubic-bezier(0.2, 0.9, 0.2, 1) 0.5s; }
.scard[data-mock="pulse"]:not(.play) .t { transform: scaleX(0); }

/* mock 2: ranked rows (the real 13-item Xhibition scan), re-ranked by profit */
.rank { list-style: none; margin: 0; padding: 0; position: relative; }
.rank li { position: absolute; left: 0; right: 0; height: 46px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; padding: 0 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px var(--hair); transition: transform 0.9s cubic-bezier(0.2, 0.9, 0.2, 1), background 0.4s; }
.rank li.top { background: rgba(255, 255, 255, 0.08); }
.rank .n { font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank .m { grid-column: 1; font-size: 11px; color: var(--muted); }
.rank .p { grid-row: 1 / 3; grid-column: 2; text-align: right; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.rank .p i { display: block; font-style: normal; font-weight: 400; font-size: 11px; color: var(--muted); }

/* mock 3: the code, then each SKU ticked as it clears the cart */
.code-chip { display: inline-flex; align-items: center; gap: 4px; padding: 10px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--hair-2); font-size: 16px; letter-spacing: 0.06em; }
.checks { list-style: none; margin: 14px 0 0; padding: 0; }
.checks li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--hair); font-size: 12px; color: var(--body); opacity: 1; transition: opacity 0.4s; }
.checks li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.checks li em { font-style: normal; color: var(--ink); white-space: nowrap; }
.checks li:not(.on) { opacity: 0.18; }
.checks li:not(.on) em { visibility: hidden; }
.code-foot { margin: 12px 0 0; font-size: 10.5px; letter-spacing: 0.14em; color: var(--muted); }

/* mock 4: the real StockX alert, sizes rolling up */
.alert { display: flex; gap: 14px; align-items: center; }
.alert img { width: 96px; height: 69px; object-fit: contain; border-radius: 10px; background: #FFFFFF; }
.alert-title { margin: 0 0 4px; color: var(--ink); font-weight: 600; font-size: 14px; }
.alert-cost { margin: 0; color: var(--muted); font-size: 12px; }
.sizes { width: 100%; margin-top: 22px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sizes th { text-align: left; font-weight: 500; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: 0 0 8px; }
.sizes td { padding: 12px 0; border-top: 1px solid var(--hair); color: var(--body); font-size: 14px; }
.sizes td.p { color: var(--ink); font-weight: 600; }
.sizes td.p i { font-style: normal; font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 4px; }

/* mock 5: the in-store pulse by state (interactive tabs, real hourly posts) */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.tabs button { font: 500 11.5px/1 var(--font); letter-spacing: 0.1em; color: var(--muted); background: rgba(255, 255, 255, 0.04); border: 0; box-shadow: inset 0 0 0 1px var(--hair); border-radius: 999px; padding: 8px 12px; cursor: pointer; }
.tabs button[aria-selected="true"] { color: #0A0B0D; background: #EEEFF1; }
.big { margin: 0 0 16px; color: var(--muted); }
.big b { display: block; font-size: 52px; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.instats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.instats p { margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.instats b { font-size: 20px; letter-spacing: -0.02em; text-transform: none; font-variant-numeric: tabular-nums; }

/* mock 6: the real Sovereign server sidebar, drifting up, the alert channels lighting in turn */
.sidebar { position: absolute; left: 18px; right: 18px; top: 0; will-change: transform; }
.sidebar .cat { margin: 16px 0 6px; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .ch { padding: 5px 8px; border-radius: 6px; color: var(--body); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background 0.4s, color 0.4s; }
.sidebar .ch.lit { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
.scard[data-mock="server"] .mock::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0D0F12 0%, rgba(13, 15, 18, 0) 18%, rgba(13, 15, 18, 0) 78%, #0D0F12 100%); pointer-events: none; }

/* 5 proof: two rows, opposite directions, soft edges */
.row { position: relative; overflow: hidden; margin: 0 0 18px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.track { display: flex; gap: 18px; width: max-content; will-change: transform; }
.wins .shot { flex: none; height: 300px; border-radius: 14px; overflow: hidden; background: #F4F5F7; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 18px 50px rgba(0, 0, 0, 0.5); }
.wins .shot img { height: 100%; width: auto; object-fit: cover; object-position: top; }
.reviews .quote { flex: none; width: 380px; padding: 22px 22px 20px; border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)); box-shadow: inset 0 0 0 1px var(--hair); display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.quote p { margin: 0; color: var(--body); font-size: 15px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.quote .who { font-size: 12px; color: var(--muted); letter-spacing: 0.02em; }
.quote .who b { font-weight: 600; }
.quote .stars { font-size: 12px; margin-right: 8px; color: var(--ink); letter-spacing: 2px; }

/* 6 what you get */
.plan ul { list-style: none; margin: 0; padding: 0; }
.plan li { position: relative; padding: 11px 0 11px 26px; border-top: 1px solid var(--hair); color: var(--body); }
.plan li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 10px; height: 6px; border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(-45deg); }

/* 7 ways in: exactly two plans (flashmotion pricing, "we'll only have two") */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 880px; margin: 0 auto; padding: 0 var(--gutter); }
.plan { position: relative; display: flex; flex-direction: column; border-radius: 24px; padding: 34px 30px 30px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)); box-shadow: inset 0 0 0 1px var(--hair); }
.plan.main { background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)); box-shadow: inset 0 0 0 1px var(--hair-2), 0 30px 90px rgba(0, 0, 0, 0.45); }
.pill { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); margin: 0; padding: 6px 12px; border-radius: 999px; background: #EEEFF1; color: #0A0B0D; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.plan h3 { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.price { margin: 14px 0 0; color: var(--muted); font-size: 16px; }
.price span { font-size: 64px; line-height: 1; font-weight: 300; letter-spacing: -0.04em; color: var(--ink); margin-right: 4px; }
.qual { margin: 8px 0 22px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.plan ul { margin-bottom: 28px; flex: 1; }
.plan .btn { justify-content: center; }

/* 8 faq + footer */
.qa { max-width: 780px; margin: 0 auto; padding: 0 var(--gutter); }
details { border-top: 1px solid var(--hair); }
details:last-child { border-bottom: 1px solid var(--hair); }
summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 2px; color: var(--ink); font-size: 19px; font-weight: 500; letter-spacing: -0.015em; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-weight: 300; font-size: 26px; color: var(--muted); transition: transform 0.3s; }
details[open] summary::after { transform: rotate(45deg); }
details p { margin: 0 0 22px; max-width: 62ch; color: var(--body); }
.foot { max-width: var(--maxw); margin: clamp(90px, 14vh, 160px) auto 0; padding: 34px var(--gutter) 48px; border-top: 1px solid var(--hair); }
.foot-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }   /* R4.2: brand | links | social glyphs */
.brand img.brand-crown { height: 18px; width: auto; }   /* R4.5: one dimension only, the file (64x40) sets the other */
.foot-links { display: flex; gap: 26px; }
.foot-links a { color: var(--body); font-size: 14px; text-decoration: none; transition: color 0.2s; }
.foot-links a:hover { color: var(--ink); }
.foot-social { justify-self: end; display: flex; align-items: center; gap: 20px; list-style: none; margin: 0; padding: 0; }
.foot-social a { display: grid; place-items: center; height: 24px; color: var(--ink); opacity: 0.6; transition: opacity 0.2s; }
.foot-social a:hover { opacity: 1; }
.foot-social img { height: 17px; width: auto; }
.foot-social svg { height: 13px; width: auto; }
.legal { margin: 30px 0 0; text-align: center; font-size: 12px; color: rgba(142, 148, 156, 0.7); }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 30px 0 0; }   /* the legal pages, quiet, above the copyright */
.foot-legal a { color: var(--muted); font-size: 13px; text-decoration: none; transition: color 0.2s; }
.foot-legal a:hover, .foot-legal a[aria-current="page"] { color: var(--ink); }
.foot-legal + .legal { margin-top: 14px; }

/* legal pages (privacy / terms / refunds / disclaimer), generated by scripts/build_legal.py: the landing page's type on a reading column */
.legal-top { max-width: var(--maxw); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: calc(18px + env(safe-area-inset-top, 0px)) var(--gutter) 18px; border-bottom: 1px solid var(--hair); }
.legal-back { color: var(--body); font-size: 14px; text-decoration: none; } .legal-back:hover { color: var(--ink); }
.legal-doc { max-width: 720px; margin: 0 auto; padding: clamp(40px, 7vh, 72px) var(--gutter) 0; }
.legal-doc h1 { margin: 0 0 28px; }
.legal-doc h2 { margin: 40px 0 12px; font-size: 20px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.legal-doc p, .legal-doc li { color: var(--body); font-size: 16px; line-height: 1.65; }
.legal-doc p { margin: 0 0 14px; }
.legal-doc ul { margin: 0 0 14px; padding-left: 22px; }
.legal-doc li { margin: 4px 0; }
.legal-doc a { color: var(--ink); }
.legal-page .foot { margin-top: clamp(60px, 10vh, 110px); }
@media (max-width: 640px) {
  .foot-top { grid-template-columns: 1fr; justify-items: center; gap: 22px; }
  .foot-social { justify-self: center; }
}

@media (max-width: 680px) {
  .plans { grid-template-columns: 1fr; }
  .plans { gap: 30px; }
  .wins .shot { height: 220px; }
  .reviews .quote { width: 300px; }
  summary { font-size: 17px; }
}

/* nav (round 1, item 11): a thin bar; the crown at its own ratio; centre links; the waitlist stays right */
.brand img.brand-tile { width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); }
.links { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: clamp(18px, 2.4vw, 34px); }
.links a { font-size: 13.5px; font-weight: 500; letter-spacing: 0.01em; color: var(--body); text-decoration: none; padding: 6px 0; transition: color 0.2s; }
.links a:hover, .links a:focus-visible { color: var(--ink); }
.nav { padding-bottom: 12px; padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
@media (max-width: 900px) { .links { display: none; } }

/* 3 features: stacking cards (Reselling Secrets "Tools at your fingertips"): WHITE rounded cards on the black page, each sticky a little lower
   than the one before so the next slides up over it; the covered card eases back (JS sets --cover 0..1) */
.stack { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.scard { --cover: 0; position: sticky; top: var(--stick, calc(88px + var(--i) * 18px)); display: grid; grid-template-columns: 1fr 1.08fr; min-height: 500px; margin-bottom: 14vh;
  border-radius: 32px; background: #F4F5F6; color: #0A0B0D; overflow: hidden; transform-origin: 50% 0; transform: scale(calc(1 - var(--cover) * 0.05));
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.7) inset, 0 30px 90px rgba(0, 0, 0, 0.55); }
.scard::after { content: ""; position: absolute; inset: 0; background: #0A0B0D; opacity: calc(var(--cover) * 0.35); pointer-events: none; border-radius: inherit; }
.scard:last-child { margin-bottom: 0; }
.scopy { padding: clamp(36px, 5vw, 64px) clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; }
.scopy h3 { margin: 0 0 18px; font-size: clamp(28px, 3vw, 40px); line-height: 1.05; font-weight: 600; letter-spacing: -0.035em; color: #0A0B0D; text-wrap: balance; }
.scopy p { margin: 0 0 24px; max-width: 42ch; color: #4A4F57; font-size: 17px; }
.scopy p b { color: #0A0B0D; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 36px; color: #2E3238; font-size: 16px; line-height: 1.45; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: #E3E5E8; }
.ticks li::after { content: ""; position: absolute; left: 8px; top: 7px; width: 8px; height: 5px; border-left: 1.8px solid #0A0B0D; border-bottom: 1.8px solid #0A0B0D; transform: rotate(-45deg); }
.svis { position: relative; min-height: 360px; }
.panel { position: absolute; left: 0; top: 64px; right: 0; bottom: 0; border-top-left-radius: 26px; background: #0D0F12; overflow: hidden; padding: 30px 30px 0; color: var(--body); font-size: 13px; box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.08); }
.widget { position: absolute; top: 30px; right: 36px; z-index: 2; min-width: 190px; padding: 10px 16px; border-radius: 14px; background: #FFFFFF; color: #0A0B0D; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(10, 11, 13, 0.06); font-variant-numeric: tabular-nums; }
.widget p { display: flex; align-items: baseline; gap: 12px; margin: 0; padding: 4px 0; font-size: 14px; }
.widget p + p { opacity: 0.45; filter: blur(0.4px); } .widget p + p + p { opacity: 0.22; filter: blur(0.8px); }
.widget span { color: #6B7079; min-width: 44px; } .widget b { font-size: 20px; letter-spacing: -0.02em; color: #0A0B0D; }   /* the page-wide b is white: the widget is a white surface */
.widget i { font-style: normal; font-size: 12px; font-weight: 600; padding: 2px 7px; border-radius: 6px; background: #E9EBEE; color: #0A0B0D; margin-left: auto; }
.sources { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.sources span { padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: var(--muted); background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--hair); transition: color 0.3s, background 0.3s; }
.sources span.on { color: #0A0B0D; background: #EEEFF1; }
.scard[data-mock="pulse"] .embed { margin-top: 0; }
.scard[data-mock="pulse"] .rank { margin-top: 14px; height: 160px; }
.scard .rank li { height: 44px; }
.scard .checks { margin-top: 16px; }
.scard .sidebar { top: 0; left: 30px; right: 30px; }

/* card 5 is NOT live (Blake: "just make sure you [mark it] as coming soon"): tag on the title, badge on the visual, the visual blurred */
.soon-tag { display: inline-block; vertical-align: middle; margin-left: 10px; padding: 6px 12px; border-radius: 999px; background: #0A0B0D; color: #FFFFFF; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.soon-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.soon-filters { display: flex; gap: 10px; filter: blur(2.5px); opacity: 0.55; }
.soon-filters span { padding: 10px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hair-2); color: var(--body); }
.soon-badge { margin: 0; padding: 10px 20px; border-radius: 999px; background: #EEEFF1; color: #0A0B0D; font-size: 13px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }

@media (max-width: 820px), (max-height: 680px) {
  .scard { position: relative; top: auto; transform: none; grid-template-columns: 1fr; min-height: 0; margin-bottom: 18px; }
  .scard::after { display: none; }
  .svis { min-height: 300px; }
  .panel { top: 56px; border-top-right-radius: 26px; left: 16px; right: 16px; }
  .widget { right: 26px; top: 18px; }
}
@media (max-width: 640px) { .soon-tag { margin: 10px 0 0; } }

/* 7 about us: the Reselling Secrets founder layout on black: text + a thin rule left, Ben's photo full-bleed right with a diagonal cut */
.story { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; margin-top: clamp(90px, 13vh, 150px); }   /* R4.1: no min-height, the copy sets the height */
.story-copy { display: flex; flex-direction: column; justify-content: center; padding: 72px var(--gutter) 72px max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); }
.story-copy .h2 { text-align: left; }
.story-rule { margin-top: 28px; padding-left: 22px; border-left: 1px solid var(--hair-2); max-width: 46ch; }
.story-rule p { margin: 0 0 14px; color: var(--body); }
.story-photo { position: relative; margin: 0; min-height: 420px; overflow: hidden; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); }   /* min-height = crop guard only, so Ben + the boxes never shrink to a strip */
.story-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 68%; }   /* absolute: the 3:4 photo no longer props the row open; 68% keeps the garage door, the box wall and Ben's feet in frame */
@media (max-width: 820px) {
  .story { grid-template-columns: 1fr; min-height: 0; }
  .story-photo { order: -1; height: 360px; min-height: 0; clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); }
  .story-copy { padding: 36px var(--gutter) 0; }
}


/* COLOUR RULE (Blake 20:10): "the different feature cards is where there is opportunity to have colour and make it pop". Colour lives ONLY inside the
   stacking cards, and only as the REAL colours of what is shown: retailer logos, product photos, and the real UI palettes (the Sovereign sale-pulse
   embed's own bar #10B981, Discord's embed link blue + dark theme, the 🟢/🟡 tier emoji of the real #high/#med/#low channels). Everything outside stays monochrome. */
.scard .embed { background: #2B2D31; }
.scard .embed::before { background: #10B981; }
.scard .embed-title { color: #00A8FC; }
.scard .t.hi { background: #3BA55C; color: #FFFFFF; } .scard .t.md { background: linear-gradient(90deg, #3BA55C 50%, #F0B232 50%); color: #FFFFFF; } .scard .t.lo { background: #F0B232; color: #1E1F22; }
.scard .rank li { grid-template-columns: 38px 1fr auto; background: #2B2D31; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
.scard .rank li.top { background: #1F3A2E; box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.45); }
.scard .rank .th { grid-row: 1 / 3; width: 34px; height: 34px; object-fit: contain; border-radius: 8px; background: #FFFFFF; }
.scard .rank .n, .scard .rank .m { grid-column: 2; }
.scard .rank .p { grid-column: 3; color: #3BA55C; }
.scard .checks li { align-items: center; }
.scard .checks .th { flex: none; width: 30px; height: 30px; object-fit: contain; border-radius: 7px; background: #FFFFFF; }
.scard .checks li span { flex: 1; }
.scard .checks li.on em { color: #3BA55C; }
.scard .code-chip { background: rgba(16, 185, 129, 0.12); box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.5); }
.scard .code-chip b { color: #3BA55C; }
.scard .widget i { background: #DDF5E8; color: #0B7A45; }
.scard .wimg { display: block; width: 100%; height: 64px; object-fit: contain; margin: 2px 0 6px; }
.scard[data-mock="server"] .panel { background: #2B2D31; }
.scard[data-mock="server"] .mock::after, .scard[data-mock="server"] .panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #2B2D31 0%, rgba(43, 45, 49, 0) 18%, rgba(43, 45, 49, 0) 78%, #2B2D31 100%); pointer-events: none; }
.scard .sidebar .cat { color: #949BA4; }
.scard .sidebar .ch { color: #949BA4; }
.scard .sidebar .ch.lit { background: #404249; color: #F2F3F5; }
.scard .sources span.on:nth-child(1) { background: #E1306C; color: #FFFFFF; } .scard .sources span.on:nth-child(2) { background: #4285F4; color: #FFFFFF; }
.scard .sources span.on:nth-child(3) { background: #34C759; color: #FFFFFF; } .scard .sources span.on:nth-child(4) { background: #EEEFF1; color: #0A0B0D; }

/* the checkout dialog (Whop embed): a quiet dark sheet, the embed sized by Whop (fit-content), capped to the viewport and scrollable inside */
.checkout { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 24px; background: #0F1114; color: var(--body);
  box-shadow: 0 0 0 1px var(--hair-2), 0 40px 120px rgba(0, 0, 0, 0.7); overflow: hidden; }
.checkout::backdrop { background: rgba(5, 6, 8, 0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.checkout-bar { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 14px 24px; border-bottom: 1px solid var(--hair); }
.checkout-title { margin: 0; font-size: 22px; color: var(--ink); }
.checkout-close { width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.06); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.checkout-close:hover, .checkout-close:focus-visible { background: rgba(255, 255, 255, 0.12); }
.checkout-body { max-height: calc(100vh - 48px - 70px); overflow-y: auto; padding: 16px; }
.checkout-body { position: relative; }
.checkout-frame { position: relative; min-height: 560px; height: fit-content; overflow: hidden; }
/* SPEED (CEO 9/25): the embeds are mounted at idle inside the CLOSED dialog. Chrome stops rendering cross-origin iframes that are off screen,
   display:none or visibility:hidden (measured 9/25: a parked form only finished rendering ~5 s after mount), so the closed dialog stays ON screen
   but invisible: opacity 0, behind the page's own ground layer, no pointer events, and inert (v4.js), so nothing in it can be focused or read.
   While closed both forms sit stacked at full height; once open, the plan not being shown is parked out of flow. */
.checkout:not([open]) { display: block; position: fixed; top: 0; left: 0; margin: 0; opacity: 0; z-index: -2; pointer-events: none; height: auto; max-height: none; overflow: visible; }
.checkout:not([open]) .checkout-body { max-height: none; overflow: visible; }
.checkout[open] .checkout-frame[data-parked] { position: absolute; top: 16px; left: 16px; right: 16px; height: 0; min-height: 0; visibility: hidden; pointer-events: none; }
/* never a blank box: a quiet skeleton of the form (silver on the dialog's dark) sits BEHIND the embed. Whop's iframe is transparent until its form
   paints, then its opaque panel covers the skeleton in one go (filmed 9/25), so the form shows the instant it exists; the skeleton is removed for
   good once Whop reports the form's real height */
.checkout-skel { position: absolute; inset: 0 0 auto 0; z-index: 0; display: flex; flex-direction: column; gap: 10px; padding: 18px 16px; }
.checkout-embed { position: relative; z-index: 1; }
.checkout-frame[data-ready] .checkout-skel { display: none; }
.checkout-skel i { display: block; border-radius: 10px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.11) 50%, rgba(255, 255, 255, 0.05) 100%); background-size: 200% 100%; animation: skel 1.3s ease-in-out infinite; }
.checkout-skel .l { height: 12px; width: 34%; margin-top: 8px; } .checkout-skel .l.s { width: 22%; }
.checkout-skel .f { height: 44px; } .checkout-skel .f.tall { height: 96px; } .checkout-skel .b { height: 48px; margin-top: 14px; border-radius: 12px; }
.checkout-skel .spin { align-self: center; width: 22px; height: 22px; margin: 2px 0 8px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.14); border-top-color: #E8EAED; animation: spin 0.8s linear infinite; }
@keyframes skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .checkout-skel i, .checkout-skel .spin { animation: none; } }
@media (max-width: 640px) { .checkout { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; margin: 0; } .checkout-body { max-height: calc(100dvh - 70px); } }

/* the proof headline (Blake 01:27 + 01:28): the two figures replace "Members cook.", at headline weight, one pair, side by side at every width */
.proof-numbers { margin: 4px auto 0; max-width: 920px; grid-template-columns: 1fr 1fr; gap: 0; }
.proof-numbers .num { font-size: clamp(44px, 6.4vw, 92px); }
.proof-numbers .label { margin-top: 14px; font-size: 13px; }
@media (max-width: 640px) {
  .proof-numbers { grid-template-columns: 1fr 1fr; gap: 0; }
  .proof-numbers .stat + .stat { border-left: 1px solid var(--hair-2); border-top: 0; padding-top: 8px; }
  .proof-numbers .num { font-size: clamp(24px, 7.2vw, 34px); letter-spacing: -0.035em; }
  .proof-numbers .label { font-size: 10.5px; letter-spacing: 0.14em; }
}
/* the hero trust strip without the numbers: the Top Rated line alone, with air before the next section (9/24) */
.trust { padding-bottom: clamp(56px, 8vh, 96px); }

/* ===== ROUND 3 (Blake 9/25 06:08, notes/v4_feedback/2026-09-25_blake_round3_overnight.md item 1) =====
   "I don't like how the cards background is white ... a darker background with white text would pop a little bit better."
   Three looks on the same card, picked by data-look on .stack (?cards=edge|frost|glow): edge = flat dark card, hairline edge;
   frost = translucent glass over a soft silver light behind the stack; glow = dark card lit from inside with a silver rim.
   Titles in the page's mix (light italic + semibold upright, like "The last sneaker sourcing group you'll ever need"). */
.stack { position: relative; }
.scard { background: #121418; color: var(--ink); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6); }
.scopy h3 { color: var(--ink); font-weight: 400; font-size: clamp(30px, 3.2vw, 44px); letter-spacing: -0.035em; }
.scopy h3 .it { font-weight: 300; color: #D5D9DE; }
.scopy h3 .up { font-weight: 600; }
.scopy p { color: #A3A9B1; }
.scopy p b { color: var(--ink); }
.ticks li { color: #C9CDD3; }
.ticks li::before { background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.ticks li::after { border-color: #FFFFFF; }
.panel { background: #0A0B0E; box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
.soon-tag { background: #F4F5F6; color: #0A0B0D; }
.scard::after { background: #050607; opacity: calc(var(--cover) * 0.5); }

/* look 1 · EDGE: flat graphite, one hairline, a lit top edge */
.stack[data-look="edge"] .scard { background: #131519; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 30px 90px rgba(0, 0, 0, 0.6); }

/* look 2 · FROST: frosted glass. Three slow silver lights live BEHIND the stack (monochrome, the film's ground), the card is a pale translucent
   pane that blurs them and the card underneath; bright top edge, light rim. Reads as glass, not as liquid chrome. */
.features:has(.stack[data-look="frost"]) { position: relative; overflow-x: clip; }   /* clip, not hidden: no scroll container, so the cards stay sticky */
.features:has(.stack[data-look="frost"])::before { content: ""; position: absolute; left: 50%; top: 240px; bottom: -80px; width: min(1500px, 140vw); transform: translateX(-50%); z-index: -1; pointer-events: none;
  background: radial-gradient(30% 14% at 24% 14%, rgba(var(--glow), 0.42), rgba(var(--glow), 0) 72%), radial-gradient(28% 13% at 80% 36%, rgba(var(--glow), 0.34), rgba(var(--glow), 0) 72%),
    radial-gradient(32% 14% at 30% 62%, rgba(var(--glow), 0.30), rgba(var(--glow), 0) 72%), radial-gradient(30% 13% at 76% 86%, rgba(var(--glow), 0.30), rgba(var(--glow), 0) 72%); filter: blur(24px); }
.stack[data-look="frost"] .scard { background: linear-gradient(155deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.07) 40%, rgba(255, 255, 255, 0.10)), rgba(30, 33, 38, 0.38);
  -webkit-backdrop-filter: blur(34px) saturate(1.3); backdrop-filter: blur(34px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 1.5px 0 rgba(255, 255, 255, 0.55), inset 0 -40px 80px rgba(0, 0, 0, 0.18), 0 30px 90px rgba(0, 0, 0, 0.45); }
.stack[data-look="frost"] .scopy p { color: #C4C9CF; }
.stack[data-look="frost"] .ticks li::before { background: rgba(255, 255, 255, 0.16); }
.stack[data-look="frost"] .panel { background: rgba(8, 9, 11, 0.86); }
.stack[data-look="frost"] .scard::after { background: #1A1D22; }

/* look 3 · GLOW: a black card with its own light. A soft silver spotlight falls from the top edge onto the title (the film's end-card rays, still),
   a bright silver rim that catches it, and the upright title words in the page's silver shimmer. Darker than A, brighter than A at the top. */
.stack[data-look="glow"] .scard { background: radial-gradient(60% 55% at 26% -8%, rgba(var(--glow), 0.30), rgba(var(--glow), 0.08) 45%, rgba(var(--glow), 0) 75%), radial-gradient(50% 60% at 82% 110%, rgba(var(--glow), 0.10), rgba(var(--glow), 0) 70%), #060708;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 30px 110px rgba(0, 0, 0, 0.7), 0 -10px 60px rgba(var(--glow), 0.06); }
.stack[data-look="glow"] .scard::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 3;
  background: linear-gradient(172deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.28) 16%, rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.03) 75%, rgba(255, 255, 255, 0.22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.stack[data-look="glow"] .scopy h3 .up { background: var(--silver); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgba(var(--glow), 0.28)); animation: shimmer 7s ease-in-out infinite; }
.stack[data-look="glow"] .panel { background: #0B0C0F; box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.06); }

/* SALES PULSE card: the film's real dashboard capture (header held, the grid drifting under it) + the film's notification */
.scard .panel.dash { padding: 0; background: #0B0C0E; display: flex; flex-direction: column; }   /* 172 %: about three of the capture's five columns, the film's push-in, so the cards read at card size */
.scard .dash-head { flex: none; width: 172%; max-width: none; height: auto; position: relative; z-index: 1; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5); }
.scard .dash-body { position: relative; flex: 1; overflow: hidden; }
.scard .dash-grid { position: absolute; left: 0; top: 0; width: 172%; max-width: none; height: auto; transform: translate3d(0, var(--dash-y, 0px), 0); will-change: transform; }
.scard[data-mock="pulse"].play .dash-grid { animation: dash-scroll 26s cubic-bezier(0.45, 0, 0.55, 1) 0.6s infinite alternate; }
@keyframes dash-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, calc(-100% + 340px), 0); } }
.scard .notif { position: absolute; top: 22px; right: 26px; z-index: 4; display: flex; align-items: center; gap: 12px; width: min(360px, 78%); padding: 12px 14px; border-radius: 18px;
  background: rgba(28, 30, 36, 0.92); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 60px rgba(0, 0, 0, 0.55); letter-spacing: -0.01em;
  transition: transform 0.9s cubic-bezier(0.2, 0.9, 0.2, 1), opacity 0.5s; }
.scard[data-mock="pulse"]:not(.play) .notif { transform: translateY(-18px) scale(0.96); opacity: 0; }
.scard .notif-icon { flex: none; width: 46px; height: 46px; border-radius: 11px; background: #0A0B0D; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10); display: grid; place-items: center; }
.scard .notif-icon img { width: 30px; height: auto; }
.scard .notif-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.scard .notif-text b { font-size: 15px; font-weight: 600; color: #F2F3F5; line-height: 1.15; }
.scard .notif-text span { font-size: 13px; color: #9BA3AE; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scard .notif-now { align-self: flex-start; font-size: 12px; color: #9BA3AE; }
@media (prefers-reduced-motion: reduce) { .scard[data-mock="pulse"].play .dash-grid, .stack[data-look="glow"] .scopy h3 .up { animation: none; } }

/* MOBILE stack-on-scroll (Blake: "on a computer, as you scroll, the cards kind of stack on top of each other. I kind of want you to replicate that for mobile").
   Cards stay sticky at every width; v4.js sets --stick per card = min(its normal top, viewport − card height) so a card taller than the screen
   scrolls until its bottom is in view, THEN sticks and the next one slides over it, exactly like desktop. */
@media (max-width: 820px), (max-height: 680px) {
  .scard { position: sticky; top: var(--stick, calc(72px + var(--i) * 10px)); transform: scale(calc(1 - var(--cover) * 0.05)); margin-bottom: 16vh; }
  .scard::after { display: block; }
}
@media (max-width: 820px) {
  .scard { border-radius: 26px; }
  .scopy { padding: 30px 22px 20px; }
  .scopy h3 { font-size: 30px; margin-bottom: 12px; }
  .scopy p { font-size: 15px; margin-bottom: 16px; }
  .ticks { gap: 8px; }
  .ticks li { font-size: 14px; padding-left: 32px; }
  .ticks li::before { width: 22px; height: 22px; } .ticks li::after { left: 7px; top: 6px; }
  .svis { min-height: 280px; }
  .scard .notif { top: 14px; right: 18px; width: min(330px, 86%); padding: 10px 12px; }
  .scard .notif-icon { width: 40px; height: 40px; }
}

/* FAQ hold (CEO 9/25): anything carrying the hidden attribute stays hidden even if a rule above gives it a display value */
[hidden] { display: none !important; }

/* MOBILE HERO (CEO 9/25, Blake 11:04pm PT from his iPhone: "I feel like you should make that top text bigger or move it down a little so there's less
   of an empty space gap at the bottom"). Phones only (<=480px), desktop untouched. The headline is bigger, and the hero group (headline, film, CTA, then the
   Top Rated strip) fills the first screen: the hero takes the small viewport height (svh = with Safari's bars showing) minus the strip, and spreads
   any spare height evenly (space-evenly: above the headline, between each piece, and before the strip), so the empty band under the avatars is gone on a
   393x852 iPhone and a taller phone gets an even rhythm instead of one big gap. */
@media (max-width: 480px) {
  .hero { --strip: 124px;   /* the Top Rated strip under the hero: its top padding + label/logo line + avatar row + ~24px of air before the fold */
    display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; box-sizing: border-box;
    min-height: calc(100svh - var(--strip)); padding-top: calc(64px + 1.5svh); padding-bottom: 0; }
  .headline { font-size: clamp(44px, 12.4vw, 58px); line-height: 1.0; }
  .film { width: 100%; margin-top: 18px; }
  .actions { margin-top: 18px; }
  .trust { padding-top: 18px; }
}