/* ============================================================
   MANMIND site v3 - 3-page conversion loop
   Register: premium Montx-club warmth. Cream ground, warm black,
   oxblood blocks, OG Archivo Expanded 800 caps display,
   black/cream pill CTAs, official App Store badge, chip colors
   reserved for the pains. Volt retired on web (app TBD).
   ============================================================ */

:root {
  --cream: #F1EDE5;
  --cream-deep: #E4DFD4;
  --bone: #F9F7F2;
  --black: #0E0D0B;
  --black-2: #171613;
  --ink: #131211;
  --muted-l: #56534C;
  --muted-d: #B0AAA0;
  --line-l: rgba(19, 18, 17, 0.16);
  --line-d: rgba(241, 237, 229, 0.16);
  --oxblood: #6B2029;
  --accent: #6B2029;        /* section + banner ground; rotator may drive it */
  --accent-text: #7C1E2E;   /* accent as text on cream */
  --mm-red: #A8202E;        /* the mark on the phone's black screen */
  --mm1: #7C1E2E; --mm2: #16305E; --mm3: #D2681A;
  --mm4: #16412C; --mm5: #D4A017; --mm6: #4B2A59;
  --gutter: clamp(20px, 4.5vw, 64px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }

body {
  background: var(--cream); color: var(--ink);
  font-family: "Chivo", "Archivo", sans-serif;
  font-weight: 450; font-variation-settings: normal;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

a { color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--ink); color: var(--cream); }

.container { max-width: 1360px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* --- type: the OG display voice --- */

.display {
  font-family: "Archivo", sans-serif;
  font-variation-settings: "wdth" 125, "wght" 800;
  font-weight: 800; font-stretch: 125%;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}
.kicker {
  display: block;
  font-size: 12.5px; font-weight: 800;
  font-variation-settings: normal;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink);
}
.dark .kicker { color: rgba(241, 237, 229, 0.85); }
.oxblood .kicker { color: rgba(241, 237, 229, 0.85); }
.sub { font-size: clamp(16px, 1.4vw, 19px); font-weight: 500; color: var(--muted-l); max-width: 52ch; }
.dark .sub { color: var(--muted-d); }
.oxblood .sub { color: rgba(241, 237, 229, 0.8); }

/* --- pills: black on cream, cream on dark. Hover inverts + lifts. --- */

.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 0; text-decoration: none;
  font-size: 11.5px; font-weight: 750;
  font-variation-settings: normal;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 12px 22px; min-height: 42px;
  border: 1.5px solid transparent;
  transition: background 220ms var(--ease), color 220ms var(--ease),
              border-color 220ms var(--ease), transform 220ms var(--ease),
              box-shadow 220ms var(--ease);
}
.pill:hover { transform: translateY(-2px); }
.pill:active { transform: translateY(0) scale(0.97); }
.pill-dark { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.pill-dark:hover { background: transparent; color: var(--ink); box-shadow: 0 10px 24px rgba(19, 18, 17, 0.12); }
.pill-cream { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.pill-cream:hover { background: #FFFFFF; border-color: #FFFFFF; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3); }
.pill-ghost-l { border-color: rgba(19, 18, 17, 0.4); color: var(--ink); }
.pill-ghost-l:hover { border-color: var(--ink); background: var(--ink); color: var(--cream); box-shadow: 0 10px 24px rgba(19, 18, 17, 0.15); }
.pill-ghost-d { border-color: rgba(241, 237, 229, 0.5); color: var(--cream); }
.pill-ghost-d:hover { border-color: var(--cream); background: var(--cream); color: var(--ink); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35); }
.pill-sm { padding: 11px 22px; min-height: 42px; font-size: 12px; }

/* --- the App Store badge: the premium native CTA --- */

.store-badge { display: inline-block; line-height: 0; border-radius: 0; transition: transform 220ms var(--ease), box-shadow 220ms var(--ease); }
.store-badge img { height: 42px; width: auto; display: block; }
.store-badge:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.25); }
.store-badge:active { transform: translateY(0) scale(0.97); }
.pill-sm + .store-badge img, .store-badge.sm img { height: 44px; }

.cta-note { display: block; margin-top: 14px; font-size: 13px; font-weight: 500; color: var(--muted-l); }
.dark .cta-note { color: var(--muted-d); }
.oxblood .cta-note { color: rgba(241, 237, 229, 0.7); }

.text-link {
  font-size: 13.5px; font-weight: 720; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; position: relative; padding-bottom: 3px;
}
.text-link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%;
  background: currentColor; transform: scaleX(0.35); transform-origin: left;
  transition: transform 260ms var(--ease);
}
.text-link:hover::after { transform: scaleX(1); }

/* --- announce marquee (oxblood, Montx-style) --- */

.announce { background: var(--accent); color: var(--cream); overflow: hidden; padding: 9px 0; transition: background 700ms var(--ease); }
.announce-track {
  display: inline-flex; gap: 0; white-space: nowrap;
  animation: mm-marquee 26s linear infinite;
}
.announce-track span {
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0 28px;
}
@keyframes mm-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- nav --- */

.site-header { position: sticky; top: 0; z-index: 60; background: var(--cream); border-bottom: 1px solid var(--line-l); }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 66px; }
.wordmark {
  font-family: "Archivo", sans-serif;
  font-variation-settings: "wdth" 125, "wght" 800; font-stretch: 125%;
  font-weight: 800; font-size: 17px; letter-spacing: 0.05em; text-decoration: none;
  text-transform: uppercase; white-space: nowrap;
}
.site-nav { display: flex; gap: 30px; }
.site-nav a {
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; padding: 6px 0; position: relative;
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform 240ms var(--ease);
}
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav-toggle { display: none; min-width: 44px; min-height: 44px; border: 1.5px solid var(--ink); border-radius: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; }
.mobile-menu { display: none; }
@media (max-width: 900px) {
  .site-nav, .header-cta { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .mobile-menu.open {
    display: flex; flex-direction: column; gap: 4px;
    position: fixed; inset: 67px 0 0 0; z-index: 59;
    background: var(--cream); padding: 30px var(--gutter) 34px;
  }
  .mobile-menu a.m-link {
    text-decoration: none; padding: 18px 0;
    font-family: "Archivo", sans-serif;
    font-variation-settings: "wdth" 125, "wght" 800; font-stretch: 125%; font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(26px, 8vw, 40px); letter-spacing: 0;
    border-bottom: 1px solid var(--line-l);
  }
  .mobile-menu .m-cta { margin-top: auto; align-self: flex-start; }
}

/* --- section chrome --- */

section { padding: clamp(76px, 9vw, 136px) 0; }
.dark { background: var(--black); color: var(--cream); }
.oxblood { background: var(--accent); color: var(--cream); transition: background 700ms var(--ease); }
.deep { background: var(--cream-deep); }
.sec-head { max-width: 62ch; }
.sec-head .display { font-size: clamp(26px, 3vw, 42px); margin-top: 14px; }
.cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 34px; }
.cta-row > * { margin: 0; }
.cta-stack { display: block; margin-top: 34px; }
.cta-stack .cta-row { margin-top: 0; }
.cta-row-sub { margin-top: 14px; gap: 12px; }
.cta-row-sub .pill { font-size: 11px; padding: 11px 18px; min-height: 40px; }
.cta-band .cta-stack { display: inline-block; }

/* --- hero --- */

#hero { position: relative; padding: clamp(64px, 9vh, 116px) 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(0, 0.58fr); gap: clamp(24px, 3vw, 48px); align-items: center; }
.hero-grid > * { min-width: 0; }
.hero-h1 { font-size: clamp(28px, 4.45vw, 61px); max-width: none; line-height: 0.92; }
.rotate-wrap { display: inline-block; position: relative; white-space: nowrap; }
/* small inline rotator (inside body copy) */
.rotate-wrap.sm { font-weight: 800; }
.rotate-wrap.sm .rotate-bar { height: 2px; bottom: -0.16em; opacity: 0.3; }
.rotate-word { display: inline-block; transition: opacity 240ms var(--ease), transform 240ms var(--ease); }
.rotate-word.out { opacity: 0; transform: translateY(-0.26em); }
.rotate-word.in { animation: mm-roll 420ms var(--ease) both; }
@keyframes mm-roll { from { opacity: 0; transform: translateY(0.26em); } to { opacity: 1; transform: none; } }
.rotate-bar {
  position: absolute; left: 0; right: 0; bottom: -0.04em; height: 3px;
  background: currentColor; opacity: 0.22; border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
}
.rotate-bar.run { animation: mm-dwell var(--dwell, 2800ms) linear both; }
@keyframes mm-dwell { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.rotate-wrap:hover .rotate-bar { opacity: 0.45; }
.rotate-wrap { cursor: pointer; }
.hero-sub { margin-top: 18px; font-size: clamp(18px, 1.6vw, 24px); color: var(--ink); font-weight: 600; }
.hero-sub em {
  font-family: "Archivo", sans-serif; font-style: normal;
  font-variation-settings: "wdth" 125, "wght" 800; font-stretch: 125%; font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.005em;
}
#hero .cta-row { margin-top: 34px; }

/* hero photo slot: Dom's shot drops in here */
.photo-slot {
  position: relative; aspect-ratio: 4 / 5; border-radius: 0; overflow: hidden;
  background:
    radial-gradient(90% 70% at 30% 18%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 60%),
    var(--cream-deep);
  border: 1px solid var(--line-l);
  display: grid; place-items: center; text-align: center; padding: 24px;
}
.photo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slot-label { font-size: 11px; font-weight: 740; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-l); }


/* --- the device: cut-out phone, 3D, lit from upper left ---------------
   Coded so it stays crisp at any DPI and the mark is real vector.
   To swap in a photographic cutout instead: drop a transparent PNG at
   assets/hero-device.png and set .device-3d { background-image: url(...) }
   with the inner layers hidden. -------------------------------------- */

.device-stage {
  position: relative;
  display: grid; place-items: center;
  padding: clamp(20px, 4vw, 56px) 0 clamp(48px, 7vw, 90px);
  perspective: 1600px;
}
.device-3d {
  position: relative;
  width: min(250px, 58vw);
  aspect-ratio: 100 / 205;
  transform: rotateY(-17deg) rotateX(4deg) rotateZ(-1.2deg);
  transform-style: preserve-3d;
  animation: mm-float 9s var(--ease) infinite;
}
@keyframes mm-float {
  0%, 100% { transform: rotateY(-17deg) rotateX(4deg) rotateZ(-1.2deg) translateY(0); }
  50%      { transform: rotateY(-14.5deg) rotateX(3deg) rotateZ(-1.2deg) translateY(-10px); }
}

/* titanium frame */
.device-frame {
  position: absolute; inset: 0;
  border-radius: 15%/7.3%;
  background:
    linear-gradient(101deg,
      #FDFDFC 0%, #B8B8B4 8%, #7C7C79 17%, #EDEDEA 31%,
      #9C9C99 46%, #D8D8D5 60%, #74746F 78%, #C2C2BE 90%, #8A8A86 100%);
  padding: 2.5%;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.55) inset,
    0 1px 2px rgba(0, 0, 0, 0.4),
    28px 34px 60px rgba(19, 18, 17, 0.30),
    10px 14px 24px rgba(19, 18, 17, 0.18);
}
/* the screen */
.device-screen {
  position: relative; height: 100%; width: 100%;
  border-radius: 13.5%/6.6%;
  background: radial-gradient(120% 90% at 30% 12%, #191919 0%, #060606 55%, #000 100%);
  overflow: hidden;
  display: grid; place-items: center;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.85) inset;
}
.device-screen .mm-mark { width: 40%; height: auto; display: block; }
.device-screen .mm-mark path { stroke: var(--mm-red, #A8202E); transition: stroke 700ms var(--ease); }

/* dynamic island */
.device-island {
  position: absolute; top: 2.6%; left: 50%; transform: translateX(-50%);
  width: 30%; height: 3.4%; border-radius: 999px; background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}
/* the shader: raking gloss across the glass */
.device-gloss {
  position: absolute; inset: 0; border-radius: 13.5%/6.6%;
  background: linear-gradient(112deg,
    rgba(255,255,255,0) 34%,
    rgba(255,255,255,0.13) 46%,
    rgba(255,255,255,0.05) 55%,
    rgba(255,255,255,0) 66%);
  pointer-events: none;
}
/* extruded right edge, so it reads as an object not a sticker */
.device-edge {
  position: absolute; top: 3%; bottom: 3%; right: -2px; width: 10px;
  border-radius: 0 6px 6px 0;
  background: linear-gradient(180deg, #6E6E6C 0%, #A9A9A6 18%, #5C5C5A 60%, #8C8C89 100%);
  transform: translateZ(-9px) rotateY(22deg);
  transform-origin: left center;
}
.device-btn {
  position: absolute; right: -4px; width: 4px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #D2D2CF, #8F8F8C);
  box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.device-btn.b1 { top: 20%; height: 4.6%; }
.device-btn.b2 { top: 27%; height: 7.4%; }
.device-btn.b3 { top: 36.5%; height: 7.4%; }
.device-btn.mute { left: -4px; right: auto; top: 18%; height: 5.4%; border-radius: 3px 0 0 3px;
  background: linear-gradient(180deg, #C9C9C6, #85857F); }

/* contact shadow: the thing that makes it sit in the page */
.device-shadow {
  position: absolute; left: 50%; bottom: clamp(16px, 3vw, 38px);
  width: min(330px, 70vw); height: 34px;
  transform: translateX(-54%) rotateX(76deg);
  background: radial-gradient(50% 50% at 50% 50%, rgba(19, 18, 17, 0.5) 0%, rgba(19, 18, 17, 0.2) 44%, rgba(19, 18, 17, 0) 74%);
  filter: blur(11px);
  pointer-events: none;
}
.device-caption {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  font-size: 11px; font-weight: 740; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted-l); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .device-3d { animation: none; }
}


/* --- MOBILE PHONE STORY (<=980px only) -------------------------------
   Hero shows headline + CTA only. Then a flat phone rises into view,
   screen holding the mark. When the phone is fully in view its screen
   scrolls up to reveal the WHAT MANMIND IS copy inside the device.
   Driven by scroll progress in site.js. ------------------------------ */

#phone-story { display: none; }

@media (max-width: 980px) {
  /* the hero drops the device entirely */
  #hero .device-stage { display: none; }
  #hero { padding: clamp(32px, 5vh, 52px) 0 clamp(16px, 3vh, 26px); }
  /* the story tells both what-it-is and how, so the desktop
     sections that carry that copy step aside on mobile */
  #what, #how { display: none; }

  #phone-story { display: block; padding: 0; background: var(--cream); scroll-margin-top: 66px; }
  .ps-track { height: 300vh; position: relative; }
  .ps-sticky {
    position: sticky; top: 66px; height: calc(100svh - 66px);
    display: grid; place-items: center; overflow: hidden;
  }
  .ps-phone {
    position: relative;
    width: min(340px, 83vw);
    aspect-ratio: 100 / 203;
    border-radius: 34px;
    padding: 9px;
    background: linear-gradient(158deg, #E6E6E3 0%, #9A9A97 26%, #F2F2EF 52%, #82827F 78%, #D0D0CD 100%);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.5) inset,
      0 26px 60px rgba(19, 18, 17, 0.28),
      0 8px 18px rgba(19, 18, 17, 0.16);
    will-change: transform;
  }
  .ps-screen {
    position: relative; height: 100%; width: 100%;
    border-radius: 26px; overflow: hidden;
    background: #050505;
  }
  .ps-reel { position: absolute; inset: 0; }
  .ps-slide {
    position: absolute; inset: 0;
    display: grid; place-items: center; padding: 30px 26px; text-align: center;
    opacity: 0; will-change: opacity, transform;
  }
  .ps-slide-mark .mm-mark { width: 46%; height: auto; }
  .ps-slide-mark .mm-mark path { stroke: var(--mm-red, #A8202E); transition: stroke 700ms var(--ease); }
  .ps-slide-copy { align-content: center; gap: 16px; }
  .ps-slide-copy .kicker { color: rgba(241, 237, 229, 0.6); }
  .ps-slide-copy p {
    color: var(--cream);
    font-weight: 650;
    font-size: clamp(19px, 5.2vw, 25px);
    line-height: 1.22; letter-spacing: -0.015em;
    text-wrap: balance;
  }
  .ps-island {
    position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
    width: 29%; height: 22px; border-radius: 999px; background: #000; z-index: 2;
  }
  .ps-gloss {
    position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: 26px;
    background: linear-gradient(116deg, rgba(255,255,255,0) 38%, rgba(255,255,255,0.10) 48%, rgba(255,255,255,0) 60%);
  }
  .ps-scroll {
    position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
    display: grid; justify-items: center; gap: 7px;
    pointer-events: none; transition: opacity 400ms var(--ease);
  }
  .ps-scroll-label {
    font-size: 9.5px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--muted-l);
  }
  .ps-scroll-arrow {
    width: 9px; height: 9px;
    border-right: 2px solid var(--muted-l); border-bottom: 2px solid var(--muted-l);
    transform: rotate(45deg);
    animation: mm-nudge 1.9s var(--ease) infinite;
  }
  @keyframes mm-nudge {
    0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.55; }
    50%      { transform: rotate(45deg) translate(3px, 3px); opacity: 1; }
  }

  /* thin CTA banner directly under the story */
  .ps-cta {
    background: var(--black); color: var(--cream);
    padding: 18px var(--gutter);
    display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
  }
  .ps-cta .store-badge img { height: 44px; }
  .ps-cta a.text-link { color: var(--cream); }
}

@media (max-width: 980px) and (prefers-reduced-motion: reduce) {
  .ps-track { height: auto; }
  .ps-sticky { position: static; height: auto; padding: 40px 0; }
  .ps-phone { transform: none !important; }
  .ps-scroll { display: none; }
  .ps-reel { position: static; transform: none !important; }
  .ps-slide { position: static; opacity: 1 !important; transform: none !important; }
  .ps-slide-mark { display: none; }
  .ps-screen { height: auto; min-height: 320px; }
}

/* --- explainer --- */

.explainer-h {
  font-family: "Chivo", sans-serif;
  font-variation-settings: normal;
  font-weight: 650; font-stretch: 100%;
  text-transform: none; letter-spacing: -0.02em; line-height: 1.14;
  font-size: clamp(24px, 2.9vw, 44px); max-width: 30ch; margin-top: 18px;
  text-wrap: balance;
}

/* --- proof cards --- */

.proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); margin-top: clamp(36px, 5vw, 56px); }
.proof-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: 44px;
  background: var(--bone); border: 1px solid var(--line-l); border-radius: 0;
  padding: clamp(26px, 3vw, 40px);
  text-decoration: none;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
}
.proof-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(19, 18, 17, 0.12); border-color: rgba(19, 18, 17, 0.35); }
.proof-card .display { font-size: clamp(20px, 2.2vw, 30px); max-width: 16ch; }
.proof-card .go { font-size: 13px; font-weight: 760; letter-spacing: 0.12em; text-transform: uppercase; }

/* --- founder (oxblood block) --- */

#founder .founder-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 90px); align-items: center; }
#founder .founder-grid > * { min-width: 0; }
.founder-h { font-size: clamp(28px, 3.8vw, 54px); margin-top: 14px; max-width: 15ch; }
.founder-copy { margin-top: 18px; }
.play-stage {
  position: relative; aspect-ratio: 16 / 10; border-radius: 0; overflow: hidden;
  background:
    radial-gradient(70% 90% at 30% 20%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(135deg, var(--accent) 0%, rgba(0, 0, 0, 0.72) 78%);
  transition: background 700ms var(--ease);
  border: 1px solid rgba(241, 237, 229, 0.25);
  display: grid; place-items: center; cursor: pointer;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.play-stage:hover { transform: translateY(-3px); box-shadow: 0 22px 48px rgba(0, 0, 0, 0.35); }
.play-btn {
  width: 84px; height: 84px; border-radius: 999px; background: var(--cream);
  display: grid; place-items: center;
  transition: transform 220ms var(--ease);
}
.play-stage:hover .play-btn { transform: scale(1.08); }
.play-btn::after { content: ""; display: block; margin-left: 5px; border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent var(--ink); }
.play-meta { position: absolute; left: 20px; bottom: 16px; font-size: 11px; font-weight: 720; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(241, 237, 229, 0.75); }

.founder-stage { width: 100%; max-width: 880px; margin-top: clamp(26px, 4vw, 40px); aspect-ratio: 16 / 9; }
.founder-outro { margin-top: clamp(24px, 3.4vw, 36px); display: grid; gap: 12px; justify-items: start; }
.founder-q {
  font-family: "Archivo", sans-serif;
  font-variation-settings: "wdth" 125, "wght" 800; font-stretch: 125%; font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.005em;
  font-size: clamp(20px, 2.2vw, 30px); color: var(--cream); margin-bottom: 4px;
}
.founder-outro .text-link { color: var(--cream); }

/* founder modal */
.modal { position: fixed; inset: 0; z-index: 100; display: none; }
.modal.open { display: block; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(14, 13, 11, 0.78); }
.modal-body {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(920px, 92vw);
  background: var(--black-2); color: var(--cream);
  border: 1px solid var(--line-d); border-radius: 0; overflow: hidden;
}
.modal-body video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.modal-slot { aspect-ratio: 16 / 9; display: grid; place-items: center; text-align: center; padding: 30px; }
.modal-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 44px; height: 44px; border-radius: 0; background: rgba(241, 237, 229, 0.14); color: var(--cream); font-size: 18px; transition: background 200ms var(--ease); }
.modal-close:hover { background: rgba(241, 237, 229, 0.26); }

/* --- science page --- */

.page-hero { position: relative; overflow: hidden; padding: clamp(84px, 11vh, 150px) 0; }
.page-hero .bg { position: absolute; inset: 0; }
.page-hero .bg img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: grayscale(1) contrast(1.05) brightness(0.5) sepia(0.12); }
.page-hero .bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14, 13, 11, 0.45) 0%, rgba(14, 13, 11, 0.74) 52%, rgba(14, 13, 11, 0.96) 100%);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { font-size: clamp(34px, 4.8vw, 70px); margin-top: 14px; max-width: 16ch; }

.finding-row {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 4.5vw, 88px); align-items: center;
  padding: clamp(44px, 5.5vw, 80px) 0; border-top: 1px solid var(--line-l);
}
.finding-row > * { min-width: 0; }
.finding-row.flip > .f-media { order: 2; }
.finding-row h2 { font-size: clamp(22px, 2.6vw, 36px); margin-top: 12px; max-width: 24ch; }
.finding-row .f-copy p.claim { margin-top: 14px; font-size: clamp(16px, 1.4vw, 19px); font-weight: 500; color: var(--muted-l); max-width: 54ch; }
.f-cite { display: block; margin-top: 16px; font-style: normal; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-l); font-weight: 700; }
.oxblood .f-cite { color: rgba(241, 237, 229, 0.72); }
.f-media { border-radius: 0; overflow: hidden; border: 1px solid var(--line-l); background: var(--black); transition: transform 220ms var(--ease), box-shadow 220ms var(--ease); }
.f-media:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(19, 18, 17, 0.16); }
.f-media img, .f-media video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.f-media .f-cap { padding: 10px 14px; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-d); background: var(--black); }

.seq-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.4vw, 36px); margin-top: clamp(36px, 5vw, 56px); }
.seq { border-top: 2px solid var(--ink); padding-top: 14px; }
.seq .n { font-size: 11.5px; font-weight: 740; letter-spacing: 0.14em; color: var(--muted-l); text-transform: uppercase; }
.seq h3 { font-family: "Archivo", sans-serif; font-size: clamp(18px, 1.7vw, 24px); margin: 8px 0 8px; font-variation-settings: "wdth" 125, "wght" 800; font-stretch: 125%; font-weight: 800; text-transform: uppercase; }
.seq p { font-size: 14.5px; font-weight: 500; color: var(--muted-l); }
.seq p .hard { color: var(--ink); font-weight: 800; }

.fineprint { font-size: 13px; color: var(--muted-l); max-width: 70ch; }

/* --- brainwave: the entrainment visual --- */

.wave-stage {
  margin-top: clamp(28px, 4vw, 44px);
  border: 1px solid rgba(241, 237, 229, 0.3);
  background: rgba(0, 0, 0, 0.22);
}
.wave-stage canvas { display: block; width: 100%; height: clamp(120px, 15vw, 190px); }
.wave-legend {
  display: flex; gap: 26px; flex-wrap: wrap;
  padding: 10px 14px; border-top: 1px solid rgba(241, 237, 229, 0.22);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(241, 237, 229, 0.75);
}

/* --- flipped section heads ---------------------------------------------
   The label is what a visitor scans for, so it carries the size. The
   statement underneath does the persuading at reading scale. ----------- */

.head-flip .kicker {
  font-family: "Archivo", sans-serif;
  font-variation-settings: "wdth" 125, "wght" 800; font-stretch: 125%; font-weight: 800;
  font-size: clamp(30px, 3.6vw, 50px);
  letter-spacing: -0.005em; line-height: 0.98;
  text-transform: uppercase; color: var(--ink);
  margin-bottom: 14px;
}
.dark .head-flip .kicker, .oxblood .head-flip .kicker { color: var(--cream); }
.head-flip .statement {
  font-family: "Chivo", sans-serif;
  font-weight: 640; font-variation-settings: normal;
  text-transform: none; letter-spacing: -0.015em; line-height: 1.24;
  font-size: clamp(19px, 1.9vw, 27px);
  max-width: 34ch; text-wrap: balance; color: var(--ink);
}
.dark .head-flip .statement, .oxblood .head-flip .statement { color: var(--cream); }
.head-flip .sub { margin-top: 16px; }

/* --- how it works (desktop) --- */

.how-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(40px, 6vw, 110px); align-items: center;
}
.how-h { max-width: 26ch; }
.how-side { display: grid; gap: 18px; justify-items: start; }
.how-copy { font-size: clamp(16px, 1.35vw, 19px); font-weight: 500; color: var(--muted-l); max-width: 46ch; }
.how-copy-lead { color: var(--ink); font-weight: 650; font-size: clamp(17px, 1.5vw, 21px); }
.how-side .pill { margin-top: 10px; }

@media (max-width: 1080px) {
  .how-grid { grid-template-columns: 1fr; gap: 28px; }
  .how-h { max-width: 20ch; }
}

/* --- CTA band --- */

.cta-band { text-align: center; }
.cta-band .display { font-size: clamp(28px, 4vw, 58px); max-width: 24ch; margin: 14px auto 0; }
.cta-band .cta-row { justify-content: center; }
.cta-band .after { margin-top: 28px; }

/* --- testimonials --- */

.placeholder-note {
  margin-top: 26px; display: inline-block;
  border: 1.5px dashed rgba(19, 18, 17, 0.4); border-radius: 0;
  padding: 12px 18px; font-size: 13px; font-weight: 600; letter-spacing: 0.03em;
  color: var(--muted-l); background: var(--bone);
}
.t-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); margin-top: clamp(40px, 5vw, 64px); }
.t-card {
  background: var(--bone); border: 1px solid var(--line-l); border-radius: 0;
  padding: clamp(22px, 2.6vw, 32px);
  display: flex; flex-direction: column; gap: 20px; justify-content: space-between;
  position: relative;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.t-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(19, 18, 17, 0.1); }
.t-card blockquote { font-size: clamp(16px, 1.4vw, 18px); font-weight: 520; font-variation-settings: normal; line-height: 1.5; }
.t-who { display: flex; align-items: center; gap: 12px; }
.t-dot { width: 10px; height: 10px; border-radius: 0; flex: none; }
.t-name { font-size: 13px; font-weight: 720; letter-spacing: 0.03em; }
.t-code { font-size: 11px; letter-spacing: 0.12em; color: var(--muted-l); text-transform: uppercase; }
.t-sample {
  position: absolute; top: 14px; right: 14px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.14em;
  color: var(--muted-l); border: 1px solid var(--line-l); border-radius: 0; padding: 4px 9px;
}
.t-more { margin-top: clamp(30px, 4vw, 44px); text-align: center; color: var(--muted-l); font-size: 14px; }

/* --- footer --- */

.site-footer { background: var(--black); color: var(--cream); padding: 44px 0 52px; }
.footer-row { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.footer-links { display: flex; gap: 26px; }
.footer-links a { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; opacity: 0.8; transition: opacity 180ms var(--ease); }
.footer-links a:hover { opacity: 1; }
.footer-copy { margin-top: 22px; font-size: 12px; color: var(--muted-d); }

/* --- reveals --- */

.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* --- responsive --- */

@media (max-width: 980px) {
  .hero-grid, #founder .founder-grid { grid-template-columns: 1fr; }
  /* the device is pinned behind the copy: no extra scroll length, and it
     rides up behind the wording (translate driven in site.js) */
  /* isolate makes #hero its own stacking context, so a negative-z child
     paints above the section background but under every flow element */
  #hero { position: relative; overflow: hidden; isolation: isolate; background: var(--cream); }
  .hero-device-cell { position: static; }
  #hero .device-stage {
    position: absolute; z-index: -1; pointer-events: none;
    right: -8vw; bottom: -26vh; padding: 0;
    will-change: transform;
  }
  .device-3d { width: min(240px, 56vw); }
  .proof-grid { grid-template-columns: 1fr; }
  .t-grid { grid-template-columns: 1fr 1fr; }
  .finding-row { grid-template-columns: 1fr; }
  .finding-row.flip > .f-media { order: 0; }
  .seq-strip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  #hero .device-stage { right: -10vw; bottom: -27vh; }
  .device-3d { width: min(206px, 52vw); }
  .device-shadow { display: none; }
  /* the phone emerges from the section edge: enough room to read as an object,
     not a screen of empty scroll */
  #hero { padding: clamp(28px, 4.5vh, 40px) 0 clamp(14px, 2.5vh, 22px); }
  .t-grid { grid-template-columns: 1fr; }
  .seq-strip { grid-template-columns: 1fr; }
  .hero-h1 { font-size: clamp(21px, 6.9vw, 40px); }
  /* the one two-word pain may break rather than force the whole headline
     down a size for every other pain */
  .rotate-wrap { white-space: normal; }
  /* the download pair shares a line; the two secondary routes share the next */
  .cta-row { flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }
  .cta-band .cta-row { justify-content: center; }
  .store-badge img { height: 40px; }
  .pill { font-size: 10.5px; padding: 11px 15px; min-height: 40px; letter-spacing: 0.06em; }
  /* the two secondary routes sit side by side: keeps the fold short */
  .cta-row-sub { gap: 10px; margin-top: 10px; }
  .cta-row-sub .pill { flex: 1 1 0; padding: 11px 6px; font-size: 10px; letter-spacing: 0.04em; min-height: 38px; }
  .cta-stack { margin-top: 24px; }
  .cta-band .cta-row { align-items: center; }
  .footer-row { flex-direction: column; align-items: flex-start; gap: 20px; }
  .store-badge img { height: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .announce-track { animation: none; }

  .pill, .proof-card, .play-stage, .play-btn, .t-card, .f-media, .store-badge, .text-link::after, .site-nav a::after { transition: none; }
}

/* ============================================================
   LAUNCH WAITLIST
   Square edges, hairline borders, one easing curve - the same
   rules as the rest of the site. The form inverts on dark
   grounds so it reads on both the close band and its own page.
   ============================================================ */

/* Launch switch: site.js stamps the body, CSS does the swapping, so the
   page never flashes the wrong state and works with JS disabled. */
.is-prelaunch [data-launched-only],
.is-launched [data-prelaunch-only] { display: none; }
/* No JS: assume pre-launch, which is the truthful state today. */
html:not(.js) [data-launched-only] { display: none; }

.wl-form { margin-top: 30px; max-width: 520px; }
.wl-form-center { margin-left: auto; margin-right: auto; text-align: left; }

.wl-label {
  display: block;
  font-family: "Chivo", sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted-l); margin-bottom: 10px;
}
.dark .wl-label, .deep .wl-label, .oxblood .wl-label { color: var(--muted-d); }

.wl-row { display: flex; gap: 10px; flex-wrap: wrap; }

.wl-input {
  flex: 1 1 240px; min-width: 0;
  font-family: "Chivo", sans-serif; font-size: 16px; font-weight: 500;
  color: var(--ink); background: var(--bone);
  border: 1px solid var(--line-l); border-radius: 0;
  padding: 14px 16px; min-height: 52px;
  transition: border-color 0.22s var(--ease), background 0.22s var(--ease);
}
.wl-input::placeholder { color: var(--muted-l); opacity: 0.8; }
.wl-input:focus { outline: none; border-color: var(--ink); background: #FFFFFF; }
.wl-input[aria-invalid="true"] { border-color: var(--mm-red); }
.wl-input:disabled { opacity: 0.6; }

.dark .wl-input, .deep .wl-input, .oxblood .wl-input {
  color: var(--cream); background: rgba(241, 237, 229, 0.06);
  border-color: var(--line-d);
}
.dark .wl-input::placeholder, .deep .wl-input::placeholder, .oxblood .wl-input::placeholder { color: var(--muted-d); }
.dark .wl-input:focus, .deep .wl-input:focus, .oxblood .wl-input:focus {
  border-color: var(--cream); background: rgba(241, 237, 229, 0.1);
}

.wl-submit { flex: 0 0 auto; min-height: 52px; white-space: nowrap; }
.wl-submit:disabled { opacity: 0.55; cursor: default; transform: none; }

.wl-status {
  font-size: 14px; font-weight: 500; line-height: 1.5;
  margin-top: 12px; min-height: 1px; color: var(--muted-l);
}
.dark .wl-status, .deep .wl-status, .oxblood .wl-status { color: var(--muted-d); }
.wl-status:empty { margin-top: 0; }
.wl-status.is-error { color: var(--mm-red); font-weight: 600; }
.dark .wl-status.is-error, .deep .wl-status.is-error, .oxblood .wl-status.is-error { color: #E8737F; }
.wl-status.is-ok { color: var(--ink); font-weight: 600; }
.dark .wl-status.is-ok, .deep .wl-status.is-ok, .oxblood .wl-status.is-ok { color: var(--cream); }

.wl-fine {
  font-size: 13px; font-weight: 500; color: var(--muted-l);
  margin-top: 12px;
}
.dark .wl-fine, .deep .wl-fine, .oxblood .wl-fine { color: var(--muted-d); }
.wl-form.is-done .wl-fine { display: none; }

/* Honeypot: off-screen rather than display:none, because some bots skip
   hidden fields but happily fill positioned ones. Never shown to people. */
.wl-hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

@media (max-width: 560px) {
  .wl-row { flex-direction: column; }
  /* The row is a column here, so flex-basis would set the input's HEIGHT and
     blow it up to 240px tall. Basis auto, full width, natural height. */
  .wl-input { flex: 0 0 auto; width: 100%; }
  .wl-submit { width: 100%; }
}

/* --- the dedicated waitlist page --- */

#waitlist-hero { padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 7vw, 88px); }
.wl-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 76px); align-items: center;
}
.wl-hero-h1 { font-size: clamp(30px, 5.2vw, 68px); }
.wl-hero-sub { margin-top: 20px; font-size: clamp(16px, 1.5vw, 20px); max-width: 40ch; }
.wl-form-hero { margin-top: 32px; max-width: 480px; }

.wl-points { list-style: none; margin-top: 30px; display: grid; gap: 0; }
.wl-points li {
  padding: 16px 0; border-top: 1px solid var(--line-d);
  font-size: 15px; font-weight: 500; color: var(--muted-d);
}
.wl-points li:last-child { border-bottom: 1px solid var(--line-d); }
.wl-points strong {
  display: block; color: var(--cream); font-weight: 700;
  font-size: 16px; margin-bottom: 3px;
}

@media (max-width: 900px) {
  .wl-grid { grid-template-columns: 1fr; gap: 34px; }
  .wl-points { margin-top: 8px; }
}