/* ==========================================================================
   Pickd — homepage (3D fly-through)
   Transcribed from the Claude Design handoff (Pickd Website 3D.dc.html).
   Values are read out of that file, not approximated.

   The scene is CSS-only: scroll-driven animations move a preserve-3d track
   toward the viewer through eight phone cards at fixed Z depths. The only
   script is the viewport scale and the chapter-pill scrolling.
   ========================================================================== */


:root {
  --base: #05050c;
  --surface: #16162a;
  --accent: #7634dc;
  --accent-soft: #a082ff;
  --accent-bright: #b39aff;
  --lavender: #c9b6ff;
  --accent-rgb: 118, 52, 220;
}
@supports (color: oklch(63% 0.28 290)) {
  :root {
    --accent: oklch(63% 0.28 290);
    --accent-soft: oklch(70% 0.20 290);
    --accent-bright: oklch(74% 0.18 290);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--base);
}
body {
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--lavender); text-decoration: none; }
a:hover { color: #fff; }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 12px 20px; background: var(--surface); color: #fff;
  border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   Keyframes — verbatim from the design.
   -------------------------------------------------------------------------- */
@keyframes pkFly {
  from { transform: translateZ(-525px); }
  to   { transform: translateZ(3675px); }
}
@keyframes pkHeroOut {
  0%, 52% { opacity: 1; transform: translateY(0); visibility: visible; }
  99% { visibility: visible; }
  100% { opacity: 0; transform: translateY(-24px); visibility: hidden; }
}
@keyframes pkStepIn {
  0% { opacity: 0; transform: translateY(22px); }
  14%, 86% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-22px); }
}
@keyframes pkStepHold {
  0% { opacity: 0; transform: translateY(22px); }
  14%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes pkFade { 0% { opacity: 0; } 12%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pkFadeHold { 0% { opacity: 0; } 12%, 100% { opacity: 1; } }
@keyframes pkHeroImgOut { 0%, 74% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pkFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pkTabOn { 0% { opacity: 0.3; } 14%, 86% { opacity: 1; } 100% { opacity: 0.3; } }
@keyframes pkTabOnEnd { 0% { opacity: 0.3; } 14%, 100% { opacity: 1; } }
@keyframes pkCueOut {
  0%, 45% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(14px); }
}
@keyframes pkCueBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes pkArrowRun { from { stroke-dashoffset: 480; } to { stroke-dashoffset: 0; } }
@keyframes pkArrowTip { 0%, 62% { opacity: 0.22; } 80% { opacity: 1; } 100% { opacity: 0.22; } }

/* --------------------------------------------------------------------------
   Header — fixed, with a gradient scrim so content scrolling beneath it stays
   legible. (An earlier build used a JS-toggled solid background; the design
   now solves it with this scrim, which needs no script.)
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  background: linear-gradient(180deg,
    rgba(5, 5, 12, 0.97) 0%,
    rgba(5, 5, 12, 0.88) 62%,
    transparent 100%);
}
.brand { display: flex; align-items: baseline; gap: 10px; }
.logo-lockup {
  display: block;
  height: 30px;
  width: auto;
  overflow: visible;
  filter: drop-shadow(0 2px 20px rgba(0, 0, 0, 0.7));
}
.logo-link { display: block; line-height: 0; }
.brand .beta {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #fff;
}
.site-nav { display: flex; align-items: center; gap: 30px; }
.nav-link {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.95);
}
.nav-link:hover { color: #fff; opacity: .78; }

.btn {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  color: #fff;
  border: none;
  border-radius: 50px;
  background: var(--accent);
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s ease, opacity .18s ease;
}
.btn-nav {
  font-size: 13.5px;
  padding: 11px 20px;
  box-shadow: 0 8px 26px rgba(var(--accent-rgb), 0.4);
}
.btn-nav:hover { transform: translateY(-1px); color: #fff; }
.btn-lg {
  font-size: 15px;
  padding: 18px 34px;
  box-shadow: 0 10px 34px rgba(var(--accent-rgb), 0.42);
}
.btn-lg:hover { transform: translateY(-2px); color: #fff; }

/* --------------------------------------------------------------------------
   The 3D stage
   -------------------------------------------------------------------------- */
.stage-wrap {
  position: relative;
  height: 480vh;
  view-timeline-name: --pkhow;
  view-timeline-axis: block;
}
.chapter-anchor { position: absolute; left: 0; width: 1px; height: 1px; }
#pk-b1 { top: 81.4vh; }
#pk-b2 { top: 135.7vh; }
#pk-b3 { top: 190vh; }
#pk-b4 { top: 244.3vh; }
#pk-b5 { top: 298.6vh; }
#pk-b6 { top: 352.9vh; }

.stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }

/* Background wash — the scene warms as the camera descends. */
.wash { position: absolute; inset: 0; }
.wash-base { background: #05050c; }
.wash-1, .wash-2 {
  animation: pkFade linear both;
  animation-timeline: --pkhow;
}
.wash-1 { background: #120b1e; animation-range: contain 14.3% contain 28.6%; }
.wash-2 { background: #241510; animation-range: contain 85.7% contain 100%; }

.host {
  position: absolute;
  inset: 0;
  perspective: 900px;
  perspective-origin: 64% 46%;
}
.rot {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--pkrx, 0deg)) rotateY(var(--pkry, 0deg));
  transition: transform 0.14s linear;
}
.track {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: pkFly linear both;
  animation-timeline: --pkhow;
  animation-range: contain 14.3% contain 100%;
}
/* js/scene.js scales this to fit narrower viewports, anchored to the right so
   the cards move away from the copy rather than through it. */
.scale {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: 100% 50%;
}

/* Phone cards. Fixed 392x800 — perspective and Z spacing were tuned for these. */
.card {
  position: absolute;
  top: 46%;
  left: 64%;
  width: 392px;
  height: 800px;
  margin: -400px 0 0 -196px;
  border-radius: 46px;
  overflow: hidden;
  border: 8px solid var(--surface);
  backface-visibility: hidden;
  animation: pkFade linear both;
  animation-timeline: --pkhow;
}
.card picture, .card img { display: block; width: 100%; height: 100%; }
.card img { object-fit: cover; }

/* The two hero stills sit at equal depth with opposing tilts. */
.card-hero {
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(178, 132, 255, 0.3),
    0 0 60px rgba(var(--accent-rgb), 0.5);
  animation-name: pkHeroImgOut;
  animation-range: contain 0% contain 13.2%;
}
.card-hero-left  { transform: translateZ(230px) translateX(-318px) translateY(56px) rotateY(4deg) rotateZ(-2.5deg) scale(0.95); }
.card-hero-right { transform: translateZ(230px) translateX(196px) translateY(-30px) rotateY(-3deg) rotateZ(1.5deg) scale(0.95); }

/* Steps sit deeper and arrive one at a time. */
.card-step {
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.card-1 { transform: translateZ(0px);     animation-range: contain 13.9% contain 29.2%; }
.card-2 { transform: translateZ(-700px);  animation-range: contain 28%   contain 43.5%; }
.card-3 { transform: translateZ(-1400px); animation-range: contain 42.3% contain 57.8%; }
.card-4 { transform: translateZ(-2100px); animation-range: contain 56.5% contain 72%; }
.card-5 { transform: translateZ(-2800px); animation-range: contain 70.7% contain 86.2%; }
.card-6 { transform: translateZ(-3500px); animation-name: pkFadeHold; animation-range: contain 85% contain 100%; }

/* Hand-drawn arrow between the two hero stills. */
.arrow {
  position: absolute;
  top: 46%;
  left: 64%;
  width: 132px;
  height: 128px;
  margin: -64px 0 0 -66px;
  pointer-events: none;
  transform: translateZ(230px) translateX(-61px) translateY(24px);
  animation: pkHeroImgOut linear both;
  animation-timeline: --pkhow;
  animation-range: contain 0% contain 13.2%;
}
.arrow svg { width: 100%; height: 100%; overflow: visible; display: block; }
.arrow-run { animation: pkArrowRun 2.6s linear infinite; }
.arrow-tip { animation: pkArrowTip 2.6s ease-in-out infinite; }

/* Bottom scrim so the captions read over whatever is behind them. */
.stage-scrim {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46vh;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(5, 5, 12, 0.55) 42%,
    rgba(5, 5, 12, 0.9) 74%,
    rgba(5, 5, 12, 0.97) 100%);
}

/* Hero copy — fades out as the camera enters the scene. */
.stage-hero {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 clamp(40px, 6vw, 96px);
  animation: pkHeroOut linear both;
  animation-timeline: --pkhow;
  animation-range: contain 0% contain 14.6%;
}
.stage-hero-inner { text-align: left; max-width: 440px; }
.stage-hero .eyebrow {
  font-size: 11.5px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin: 0 0 24px;
}
.stage-hero h1 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(36px, 3.8vw, 60px);
  line-height: 0.98;
  letter-spacing: -1.8px;
  margin: 0 0 24px;
  text-wrap: balance;
  text-shadow: 0 6px 60px rgba(0, 0, 0, 0.85);
}
.stage-hero p {
  font-size: 17px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
  max-width: 360px;
  margin: 0 0 30px;
  text-wrap: pretty;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.9);
}

/* Store badges. They point at the waitlist until there are real listings. */
.badges { display: flex; gap: 12px; flex-wrap: wrap; pointer-events: auto; }
.badges a {
  display: block;
  border-radius: 11px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(178, 132, 255, 0.5), 0 8px 30px rgba(var(--accent-rgb), 0.55);
  transition: box-shadow .18s ease;
}
.badges a:hover {
  box-shadow: 0 0 0 1px rgba(198, 164, 255, 0.75), 0 10px 38px rgba(var(--accent-rgb), 0.75);
}
.badges img { display: block; height: 52px; width: auto; }

/* Step captions. The width clamp against 64vw is what keeps them clear of the
   cards as the viewport narrows. */
/* Top-anchored as of the 2026-08-31 handoff — the step number, title and body
   now sit at the top left of the sticky viewport rather than the bottom. */
.captions {
  position: absolute;
  left: 0; right: 0;
  top: 138px;
  pointer-events: none;
  padding: 0 56px;
}
.captions-inner { position: relative; max-width: 1240px; margin: 0 auto; height: 150px; }
.caption {
  position: absolute;
  inset: 0;
  animation: pkStepIn linear both;
  animation-timeline: --pkhow;
}
.caption-count {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  color: var(--accent-bright);
  margin-bottom: 14px;
}
.caption h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.02;
  letter-spacing: -1.4px;
  margin: 0 0 12px;
  max-width: min(440px, calc(64vw - 300px));
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.9);
}
.caption p {
  font-size: 18px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  max-width: min(420px, calc(64vw - 300px));
  margin: 0;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.9);
}
.caption-1 { animation-range: contain 13.9% contain 29.2%; }
.caption-2 { animation-range: contain 28%   contain 43.5%; }
.caption-3 { animation-range: contain 42.3% contain 57.8%; }
.caption-4 { animation-range: contain 56.5% contain 72%; }
.caption-5 { animation-range: contain 70.7% contain 86.2%; }
.caption-6 { animation-name: pkStepHold; animation-range: contain 85% contain 100%; }

.chapters {
  position: absolute;
  left: 56px; right: 56px;
  bottom: 44px;
  display: flex;
  justify-content: center;
  gap: 8px;
  animation: pkFadeIn linear both;
  animation-timeline: --pkhow;
  animation-range: contain 7% contain 15%;
}
.chapters a {
  padding: 9px 15px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(5, 5, 12, 0.5);
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.3;
  animation: pkTabOn linear both;
  animation-timeline: --pkhow;
  transition: opacity .18s ease;
}
.chapters a:hover { opacity: 0.85; color: #fff; }
.chapters a:nth-child(1) { animation-range: contain 14.3% contain 28.6%; }
.chapters a:nth-child(2) { animation-range: contain 28.6% contain 42.9%; }
.chapters a:nth-child(3) { animation-range: contain 42.9% contain 57.1%; }
.chapters a:nth-child(4) { animation-range: contain 57.1% contain 71.4%; }
.chapters a:nth-child(5) { animation-range: contain 71.4% contain 85.7%; }
.chapters a:nth-child(6) { animation-name: pkTabOnEnd; animation-range: contain 85.7% contain 100%; }

.cue {
  position: absolute;
  left: 0; right: 0;
  bottom: 44px;
  display: flex;
  justify-content: center;
  animation: pkCueOut linear both;
  animation-timeline: --pkhow;
  animation-range: contain 0% contain 12%;
}
.cue-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.cue-line {
  display: block;
  width: 1px;
  height: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), transparent);
  animation: pkCueBob 1.8s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Static fallback — hero plus the six steps, stacked. Shown when the browser
   cannot run scroll-driven animations, when reduced motion is requested, or
   when the viewport is too narrow for a scene built on fixed 392x800 cards.
   -------------------------------------------------------------------------- */
.fallback { display: none; }

.fallback-hero { padding: 150px 40px 20px; max-width: 1200px; margin: 0 auto; }
.fallback-hero .eyebrow {
  font-size: 11.5px; letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--accent-soft); margin: 0 0 28px;
}
.fallback-hero h1 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(38px, 5.4vw, 78px);
  line-height: 0.96;
  letter-spacing: -2.4px;
  margin: 0 0 26px;
  text-wrap: balance;
}
.fallback-hero p {
  font-size: 20px; line-height: 1.5; color: rgba(255, 255, 255, 0.6);
  max-width: 460px; margin: 0 0 30px; text-wrap: pretty;
}
.fallback-hero .badges { margin-bottom: 8px; }

.fallback-steps { max-width: 1200px; margin: 0 auto; padding: 20px 40px 120px; }
.fallback-step {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) minmax(210px, 280px);
  gap: 36px;
  align-items: center;
  padding: 50px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.fallback-step:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.fallback-step .num {
  font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 54px;
  line-height: 1; color: rgba(255, 255, 255, 0.13); letter-spacing: -2px;
}
.fallback-step h3 {
  font-family: 'Montserrat', sans-serif; font-weight: 800;
  font-size: clamp(23px, 2.3vw, 29px); line-height: 1.16;
  letter-spacing: -0.6px; margin: 0 0 14px;
}
.fallback-step p {
  font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, 0.5);
  max-width: 440px; margin: 0; text-wrap: pretty;
}
.fallback-shot { display: flex; justify-content: center; }
.fallback-shot .phone { position: relative; width: 250px; }
.fallback-shot .phone::before {
  content: '';
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.34), transparent 66%);
  filter: blur(38px);
  pointer-events: none;
}
.fallback-shot picture { display: block; }
.fallback-shot img {
  position: relative; display: block; width: 100%; height: auto;
  border-radius: 33px; border: 7px solid var(--surface);
  box-shadow:
    0 34px 80px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 60px rgba(var(--accent-rgb), 0.16);
}

/* The header scrim is tuned for the scene, where the sticky stage means
   nothing scrolls beneath it. On the stacked layout content does scroll under,
   and a short gradient only half-hides large type — the h1 ghosted behind the
   wordmark. Wherever the stack is live, the header goes solid. */
@supports not (animation-timeline: view()) {
  .stage-wrap { display: none !important; }
  .fallback { display: block !important; }
  .site-header {
    background: rgba(5, 5, 12, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }
}
@media (prefers-reduced-motion: reduce) {
  .stage-wrap { display: none !important; }
  .fallback { display: block !important; }
  .cue-line, .arrow-run, .arrow-tip { animation: none !important; }
  * { transition: none !important; }
  .site-header {
    background: rgba(5, 5, 12, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }
}

/* --------------------------------------------------------------------------
   Sections below the stage
   -------------------------------------------------------------------------- */
.wrap { max-width: 1200px; margin: 0 auto; }

/* ---------------------------------------------------------------- socials --
   Sits in the hero copy column above the store badges. The hero copy layer is
   pointer-events: none so the fly-through stays scrubbable through it; this
   row turns them back on for itself. */
.socials {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  pointer-events: auto;
}
.socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(5, 5, 12, 0.5);
  color: #fff;
  transition: border-color 200ms ease, background 200ms ease;
}
.socials a:hover {
  border-color: rgba(178, 132, 255, 0.7);
  background: rgba(118, 52, 220, 0.22);
}
.socials svg { width: 19px; height: 19px; display: block; }
.socials svg.s-sm { width: 17px; height: 17px; }
/* Until the real profiles exist these go nowhere; don't let them take focus
   or advertise themselves as destinations. */
.socials a[data-social-placeholder] { cursor: default; }

/* ------------------------------------------------------------ group module --
   Visitor-driven: click a card, the matching screenshot crossfades in. All six
   images are in the DOM and stacked, so switching never triggers a load. */
.group { border-top: 1px solid rgba(255, 255, 255, 0.07); padding: 110px 40px; }
.group-inner { max-width: 1180px; margin: 0 auto; }

.group-head {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  margin-bottom: 64px;
}
.group-head .eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
  padding-top: 10px;
  margin: 0;
}
.group-head h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(28px, 4vw, 50px);
  line-height: 1.04;
  letter-spacing: -1.6px;
  margin: 0 0 20px;
  text-wrap: balance;
}
.group-sub {
  font-size: 19px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  max-width: 620px;
  text-wrap: pretty;
}

.group-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr);
  gap: 72px;
  align-items: center;
}
.group-phone-wrap { display: flex; justify-content: center; }
.group-phone {
  position: relative;
  width: 100%;
  max-width: 320px;
  border-radius: 38px;
  overflow: hidden;
  border: 7px solid var(--surface);
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
/* The first shot stays in flow and sets the frame height; the rest sit on top
   of it. Swapping a single src instead would flash on first view of each. */
.group-shot { display: block; }
.group-shot img { display: block; width: 100%; height: auto; }
.group-shot + .group-shot { position: absolute; inset: 0; }
.group-shot { opacity: 0; transition: opacity 280ms ease; }
.group-shot.is-on { opacity: 1; }

.group-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.group-card {
  display: block;
  width: 100%;
  text-align: left;
  padding: 22px 26px;
  border-radius: 18px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  background: rgba(255, 255, 255, 0.022);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 220ms ease, border-color 220ms ease;
}
.group-card:hover { background: rgba(255, 255, 255, 0.045); }
.group-card.is-on {
  background: rgba(118, 52, 220, 0.13);
  border-color: rgba(118, 52, 220, 0.5);
}
.group-card > .group-num,
.group-card > .group-text { vertical-align: baseline; }
.group-card {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.group-num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent-soft);
  flex-shrink: 0;
}
.group-text { display: block; }
.group-title {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin-bottom: 8px;
}
.group-body {
  display: block;
  font-size: 15.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  .group-shot { transition: none; }
}

.services {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding: 34px 40px;
}
.services .wrap { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.services-label {
  font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28); white-space: nowrap;
}
.services-list {
  display: flex; gap: 34px; flex-wrap: wrap;
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 15px;
  color: rgba(255, 255, 255, 0.42); margin: 0; padding: 0; list-style: none;
}

/* "Why we built it" — the teaser that leads to the About page. */
.story { border-bottom: 1px solid rgba(255, 255, 255, 0.07); padding: 110px 40px; }
.story-inner {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: 56px; align-items: start;
}
.story-label {
  font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 11.5px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32); padding-top: 10px;
}
.story-body { max-width: 760px; }
.story-body .lead {
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  font-size: clamp(21px, 5vw, 36px); line-height: 1.26; letter-spacing: -1px;
  margin: 0 0 24px; text-wrap: pretty;
}
.story-body p {
  font-size: 19px; line-height: 1.6; color: rgba(255, 255, 255, 0.6);
  margin: 0 0 32px; max-width: 640px; text-wrap: pretty;
}
.story-more {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 14px;
  color: var(--accent-bright);
}
.story-more:hover { color: #fff; }

.waitlist { position: relative; padding: 140px 40px 150px; }
.waitlist-inner { position: relative; max-width: 900px; margin: 0 auto; text-align: center; }
.waitlist-glow {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 560px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.26), transparent 66%);
  filter: blur(46px); pointer-events: none;
}
.waitlist-content { position: relative; }
.waitlist h2 {
  font-family: 'Montserrat', sans-serif; font-weight: 900;
  font-size: clamp(32px, 7.4vw, 62px); line-height: 1.02;
  letter-spacing: -1.8px; margin: 0 0 22px; text-wrap: balance;
}
.waitlist-sub {
  font-size: 19px; line-height: 1.55; color: rgba(255, 255, 255, 0.55);
  max-width: 520px; margin: 0 auto 44px;
}
.waitlist-form { display: flex; gap: 12px; max-width: 520px; margin: 0 auto; }
.waitlist-form input {
  flex: 1; min-width: 0; padding: 19px 22px; border-radius: 50px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff; font-family: 'DM Sans', sans-serif; font-size: 16px; outline: none;
}
.waitlist-form input::placeholder { color: rgba(255, 255, 255, 0.38); }
.waitlist-form input:focus { border-color: rgba(var(--accent-rgb), 0.55); }
.btn-submit {
  font-size: 15px; padding: 19px 32px;
  box-shadow: 0 10px 34px rgba(var(--accent-rgb), 0.42);
}
.btn-submit:hover:not(:disabled) { transform: translateY(-2px); }
.btn-submit:disabled { opacity: .62; cursor: default; }

.waitlist-success {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 22px 34px; border-radius: 18px;
  background: rgba(var(--accent-rgb), 0.14);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
}
.waitlist-success .emoji { font-size: 24px; }
.waitlist-success .msg {
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 17px;
}
.waitlist-error {
  max-width: 520px; margin: 18px auto 0; padding: 14px 20px;
  border-radius: 14px; background: rgba(255, 86, 86, 0.10);
  border: 1px solid rgba(255, 86, 86, 0.38);
  color: #ffb4b4; font-size: 15px; line-height: 1.45; text-align: left;
}
.waitlist-error a { color: #ffd0d0; text-decoration: underline; }

.site-footer { border-top: 1px solid rgba(255, 255, 255, 0.07); padding: 44px 40px; }
.site-footer .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.footer-mark {
  font-family: 'Montserrat', sans-serif; font-weight: 900;
  font-size: 17px; letter-spacing: 0.5px;
}
.footer-mark .pick { color: var(--accent); }
.footer-mark .d { color: #fff; }
.footer-copy { font-size: 13px; color: rgba(255, 255, 255, 0.28); }
.footer-links { display: flex; gap: 24px; font-size: 13px; flex-wrap: wrap; }
.footer-links a { color: rgba(255, 255, 255, 0.45); }
.footer-links a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Narrow screens — the stacked fallback carries the responsive work.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Mobile — the fly-through is kept, not replaced.
   Ported from the handoff's max-width: 860px table. The whole scene lives in
   .scale, so one scale() shrinks the composition without touching the 700px Z
   spacing or any animation range. The cards recentre (left: 50%) and the copy
   moves to the top, so the phones sit below it rather than behind it.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Touch scrolling through the fly-through.

   The scene is driven by raw scroll position across a 480vh container, which
   is fine with a wheel or trackpad — every notch is small, so you step through
   the beats. A finger does not work that way. Measured on iOS 26.5: a slow
   400pt drag advances the timeline about 9%, so it reads as stuck, while one
   ordinary flick carries roughly 2400pt of momentum and lands four beats
   later. Beats 02, 03 and 04 were unreachable by flicking.

   Snap points at each chapter anchor fix both halves. scroll-snap-stop: always
   is the part that matters: it stops a fling at the next beat instead of
   letting momentum run past it, so one flick is one beat regardless of how
   hard it was thrown. proximity rather than mandatory so the rest of the page
   — group module, waitlist, footer — still scrolls freely.

   Phones only. Desktop already behaves.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  html { scroll-snap-type: y mandatory; }
  .chapter-anchor {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}

@media (max-width: 860px) {
  .site-header { padding: 14px 20px; }
  .site-nav { gap: 16px; }

  .host { perspective: 640px; perspective-origin: 50% 50%; }
  .scale { transform-origin: 50% 50%; }
  /* Every child of .scale — both hero cards, all six chapter cards, the arrow. */
  .scale > * { left: 50%; }

  .stage-hero { align-items: flex-start; padding: 84px 22px 0; }
  .stage-hero-inner { max-width: 100%; }

  /* The handoff top-aligns the copy but leaves the cards centred at 46%, so on
     a phone the block runs straight into them — the store badges landed on top
     of the phone art. Tighten the copy and drop the hero pair below it. The
     step cards stay where they are; only the hero pair moves. */
  .stage-hero .eyebrow { font-size: 11px; letter-spacing: 2px; margin-bottom: 14px; }
  .stage-hero h1 { font-size: clamp(28px, 7.6vw, 40px); letter-spacing: -1.2px; margin-bottom: 14px; }
  .stage-hero p { font-size: 15.5px; max-width: 100%; margin-bottom: 18px; }
  .badges img { height: 44px; }
  .card-hero { top: 82%; }

  /* The 2026-08-31 handoff moved the caption from the bottom of the stage to
     the top but left the step cards at 46%, which on a phone leaves 45px above
     the phone and 273px of nothing below it. Drop them so the phone sits
     centred in what the caption leaves behind.

     A percentage of the stage travels less than that on screen, because
     #pk-scale is scaled down here. Re-measured after the scale went up: at 72%
     the card keeps at least 42px clear of the caption and 43px above the fold
     across all six beats, from 375x812 to 440x956. */
  .card-step { top: 72%; }

  /* The pair's own offsets are -318 and +196, so its midpoint sits 61 units
     left of the anchor. On desktop the anchor is left: 64% and that reads as
     intended; recentred at left: 50% for phones it just looks off-centre.
     Same separation, shifted right so the pair is symmetric about the middle. */
  /* scale() drops from 0.95 to 0.60 to cancel the larger #pk-scale factor, so
     the hero pair keeps the on-screen size it already had (146px wide against
     144px before) while the step cards get the benefit of the increase. The
     bigger factor also carries these cards further from the stage centre, and
     they sit below it, which is what finally clears them of the store badges:
     the gap goes from -2px (overlapping) to 44px at 375x812.

     translateX and translateY are multiplied by the same 0.634 for the same
     reason: they sit inside the scaled layer, so leaving them alone spread the
     pair 57% wider and pushed both phones off the screen edges. Scaling every
     inner value together keeps the composition identical and lets the position
     change come only from top: 82% against the larger factor. */
  .card-hero-left  { transform: translateZ(230px) translateX(-163px) translateY(35px) rotateY(4deg) rotateZ(-2.5deg) scale(0.60); }
  .card-hero-right { transform: translateZ(230px) translateX(163px) translateY(-19px) rotateY(-3deg) rotateZ(1.5deg) scale(0.60); }
  .arrow { transform: translateZ(230px) translateX(0) translateY(24px); }

  /* Sit the caption right at the bottom edge and let the box hug the text.
     At 86px up with a 150px box it cut into the phone while leaving 108px of
     nothing beneath it — the phone lost room at both ends. */
  .captions { top: 96px; padding: 0 22px; }
  .captions-inner { height: 116px; }
  .caption { display: flex; flex-direction: column; justify-content: flex-start; }
  .caption h3, .caption p { max-width: 100%; }
  .caption-count { margin-bottom: 8px; }
  .caption h3 { margin-bottom: 8px; }
  .caption h3 { font-size: 27px; letter-spacing: -0.9px; }
  .caption p { font-size: 16px; }

  /* Six pills do not fit; the scroll cue carries the affordance. */
  .chapters { display: none; }

  .group { padding: 64px 22px; }
  .group-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 34px; }
  .group-head .eyebrow { padding-top: 0; }
  .group-grid { grid-template-columns: 1fr; gap: 34px; }
  .group-card { padding: 18px 20px; gap: 13px; }
  .group-title { font-size: 19px; }
  .group-body { font-size: 15px; }
  /* The handoff specifies 42px; keep it rather than shrinking, and rely on the
     gap for the row to still fit at 360px. */
  .socials { gap: 10px; margin-bottom: 18px; }
  .socials a { width: 42px; height: 42px; }
  .socials svg { width: 18px; height: 18px; }

  /* Nav links are inline text, so their tappable area was the glyph box —
     39x15 and 51x15, under the 24px WCAG floor and well under Apple's 44px.
     Expand the hit area with a pseudo-element so the header layout, which is
     tuned around the logo height, does not move. */
  .nav-link { position: relative; }
  .nav-link::after {
    content: "";
    position: absolute;
    left: -10px; right: -10px;
    top: 50%; transform: translateY(-50%);
    height: 48px;
  }
  .services, .story, .waitlist, .site-footer { padding-left: 22px; padding-right: 22px; }
  .story { padding-top: 64px; padding-bottom: 64px; }
  .story-inner { grid-template-columns: 1fr; gap: 20px; }
  .story-label { padding-top: 0; }

  .waitlist { padding-top: 84px; padding-bottom: 96px; }
  .waitlist-form { flex-direction: column; }
  .btn-submit { width: 100%; }

  .site-footer .wrap { flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* Below this the scene has no room left to give: copy, badges and the phone
   pair cannot share a 600px-tall viewport without colliding. The stacked
   layout already reads well at any size, so it takes over rather than the hero
   being stripped down to nothing. */
@media (max-width: 860px) and (max-height: 600px) {
  .stage-wrap { display: none !important; }
  .fallback { display: block !important; }
  .site-header {
    background: rgba(5, 5, 12, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }
}

/* Short-but-usable viewports — the badges give way so the copy and the phones
   fit. The header CTA is still on screen and the waitlist is one scroll away,
   whereas the phones are the whole point of the scene. */
@media (max-width: 860px) and (max-height: 700px) {
  .stage-hero .badges { display: none; }
  .stage-hero { padding-top: 74px; }
  .stage-hero h1 { font-size: clamp(26px, 7vw, 34px); }
  .stage-hero p { font-size: 14.5px; }
  .card-hero { top: 84%; }
}

/* Phone refinements the handoff's 860px table does not cover: the decorative
   glow is a fixed 560px and pushes the layout viewport wide on a phone, which
   then inflates window.innerWidth and feeds a larger scale back into the
   scene. Plus the stacked fallback's own styles, for when it renders.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .services-list { gap: 20px; font-size: 14px; }
  .services .wrap { gap: 18px; }
  .waitlist-glow { width: 320px; height: 300px; }
  .waitlist-sub { font-size: 17px; margin-bottom: 32px; }
  .waitlist-success { padding: 18px 22px; gap: 12px; text-align: left; }
  .waitlist-success .msg { font-size: 15.5px; }
  .story-body p { font-size: 17px; }
  .badges img { height: 46px; }

  /* Stacked fallback — renders only without scroll-driven animation support
     or under reduced motion. */
  .fallback-hero { padding: 104px 22px 8px; }
  .fallback-hero h1 { font-size: clamp(38px, 9.2vw, 56px); letter-spacing: -1.6px; }
  .fallback-hero p { font-size: 18px; }
  .fallback-steps { padding: 8px 22px 80px; }
  .fallback-step { grid-template-columns: 1fr; gap: 0; padding: 38px 0; }
  .fallback-step .num { font-size: 40px; margin-bottom: 12px; }
  .fallback-step p { font-size: 16px; }
  .fallback-shot { justify-content: center; margin-top: 26px; }
}

@media (max-width: 560px) {
  .site-header { padding: 12px 14px; }
  .brand .beta { display: none; }
  .logo-lockup { height: 26px; }
  .site-nav { gap: 14px; }
  .nav-link { font-size: 12px; }
  .btn-nav { font-size: 11.5px; padding: 9px 14px; }
}

@media (max-width: 420px) {
  .fallback-shot .phone { width: 100%; max-width: 250px; }
}