/* Self-hosted from Google Fonts (same files), so no third-party request blocks the first paint. */
/* latin-ext */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-ext.woff2) format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin.woff2) format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-ext.woff2) format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin.woff2) format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Styled to match the Watch Humans app (V6 design language: app/v6-onboarding-*.html):
   Inter bold with tight tracking, JetBrains Mono for numbers and labels, #1D1D1D on cool grey,
   white rounded cards with soft shadows, black pill buttons, uppercase grey captions,
   the Watch Humans star, pastel tiles and the dark lime/blue mesh gradient.
   B2C home page only. Single-theme on purpose: every colour is set explicitly.
   Oct 2026 interim version: built on what is in the app today. */
:root {
  --bg: #f3f4f6; /* page, same as app screen background */
  --surface: #feffff; /* cards */
  --ink: #1d1d1d; /* text, buttons */
  --muted: #6b6f76; /* secondary text (app's #8E8E8E, darkened a touch for web legibility) */
  --cap: #676b72; /* uppercase captions (app uses #8E8E8E; darkened to pass contrast on the web) */
  --line: #e1e3e6;
  --outline: #c7c7c7; /* outline buttons, inputs */
  --lime: #c2e873; /* brand accent */
  --lime-soft: #ddf1b7;
  --sky: #a9cee7;
  --blue: #8fbfe0;
  --lilac: #bcc5fc;
  --pink: #ffd3f0;
  --sage: #a9d4aa;
  --dark: #0e1013; /* dark screens */
  --dark-card: #24272d;
  --dark-line: #343841;
  --on-dark: #f2f3f5;
  --on-dark-muted: #9ba0a8;
  --slot-bg: #e9ebee;
  --slot-line: #c7c7c7;
  --slot-ink: #8e8e8e;
  --shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --font: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* The app's signature gradient: lime and sky blue glowing in from the corners of near-black.
     Glows are tighter than on the phone screen so text stays readable on wide boxes. */
  --mesh:
    radial-gradient(ellipse 45% 70% at 0% 0%, rgba(194, 232, 115, 0.95) 0, rgba(194, 232, 115, 0) 100%),
    radial-gradient(ellipse 30% 55% at 100% 0%, rgba(194, 232, 115, 0.7) 0, rgba(194, 232, 115, 0) 100%),
    radial-gradient(ellipse 40% 60% at 100% 100%, rgba(143, 191, 224, 0.9) 0, rgba(143, 191, 224, 0) 100%),
    radial-gradient(ellipse 35% 50% at 0% 100%, rgba(169, 206, 231, 0.75) 0, rgba(169, 206, 231, 0) 100%), #1d1d1d;
  --wrap: 1000px;
  color-scheme: light;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  overflow-x: clip;
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  letter-spacing: -0.02em;
  font-size: 16px;
  line-height: 1.4;
  overflow-x: clip;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
a {
  color: inherit;
  text-decoration: none;
}
h1,
h2,
h3,
p {
  margin: 0;
  font-weight: 400;
}
h1,
h2,
h3 {
  font-weight: 700;
}
h1,
h2 {
  text-wrap: balance;
}
b,
strong {
  font-weight: 600;
}
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 8px;
}
.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
}
/* Menu links land each section just below the sticky menu */
section[id] {
  scroll-margin-top: 96px;
}
.center {
  text-align: center;
}
/* The Watch Humans star (images/coin-star.png): used next to anything about coins */
.nowrap {
  white-space: nowrap;
}
.coin-star {
  display: inline-block;
  width: 1em;
  height: auto;
  vertical-align: -0.12em;
  margin-inline: 0.1em;
}

/* ---------- Image slots (fill these with the real assets) ---------- */
.slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: var(--slot-bg);
  border: 1.5px dashed var(--slot-line);
  border-radius: 16px;
  color: var(--slot-ink);
  font: 500 11px / 1.3 var(--mono);
  text-align: center;
  padding: 8px;
  overflow: hidden;
  max-width: 100%;
}
.slot::before {
  content: attr(data-slot);
  letter-spacing: -0.02em;
}
/* App screenshot, phone-shaped. Fill with a full-screen app capture. */
.phone {
  width: 180px;
  aspect-ratio: 390 / 844;
  border-radius: 32px;
  background: var(--surface);
  border: 1.5px dashed var(--slot-line);
  box-shadow: var(--shadow);
}

/* ---------- Wordmark (as on the app's welcome screen) ---------- */
/* The Watch Humans logo (images/logo.png, transparent background) */
.logo-img {
  display: block;
  height: 54px;
  width: auto;
}
.footer .logo-img {
  height: 56px;
}

/* ---------- Buttons ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 28px;
  border-radius: 24px;
  background: var(--ink);
  color: #f9fafb;
  font: 600 16px var(--font);
  border: 1px solid transparent;
  transition:
    transform 0.2s ease,
    background 0.2s;
}
.pill:hover {
  transform: translateY(-1px);
  background: #000;
}
.pill.ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--outline);
}
.pill.ghost:hover {
  background: var(--surface);
}
.pill.light {
  background: var(--on-dark);
  color: #17181b;
}
/* Uppercase caption, like "HI HUMAN" in the app */
.eyebrow,
.cap {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--cap);
}
.h-xl {
  font-size: clamp(36px, 5.6vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.lede {
  font-size: 18px;
  line-height: 1.45;
  color: var(--muted);
}
.section-head {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  display: grid;
  gap: 14px;
}
.section-copy {
  display: grid;
  gap: 14px;
  max-width: 520px;
  margin: 22px auto 0;
  text-align: center;
  font-size: 17px;
  line-height: 1.5;
  color: var(--muted);
}
.section-copy b {
  color: var(--ink);
}
.cta {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

/* ---------- Story structure ---------- */
.eyebrow.on-dark {
  color: var(--on-dark-muted);
}
/* Line between chapters that hands over to the next one */
.bridge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 110px auto 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  letter-spacing: -0.02em;
}
.bridge::before,
.bridge::after {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--outline);
}
.bridge + section {
  margin-top: 32px;
}
/* Reading progress along the bottom of the sticky nav (the app's progress bar) */
.progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--ink);
  transform-origin: left;
  transform: scaleX(0);
  opacity: 0;
  transition: opacity 0.3s;
}
.nav.scrolled .progress {
  opacity: 1;
}

/* ---------- Nav ---------- */
/* Sticks to the top; gets a frosted background once you scroll */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 4.5vw, 48px);
  padding-block: 14px;
  flex-wrap: wrap;
  margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
  padding-inline: 16px;
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease;
}
.nav.scrolled {
  background: rgba(243, 244, 246, 0.86);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--line);
}
.nav a.link {
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  padding: 10px 0;
}
.nav a.link:hover {
  color: var(--ink);
}
.nav .pill {
  height: 40px;
  padding: 0 20px;
  font-size: 15px;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-block: 80px 30px;
  text-align: center;
}
/* Two soft colour glows (lime and sky) drifting slowly behind the hero, so the page doesn't open on flat grey */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 560px;
  height: 440px;
  left: 50%;
  pointer-events: none;
  filter: blur(30px);
}
.hero::before {
  top: 10px;
  margin-left: -600px;
  background: radial-gradient(closest-side, rgba(194, 232, 115, 0.75), rgba(194, 232, 115, 0));
  animation: drift-a 14s ease-in-out infinite alternate;
}
.hero::after {
  top: 150px;
  margin-left: 40px;
  background: radial-gradient(closest-side, rgba(143, 191, 224, 0.7), rgba(143, 191, 224, 0));
  animation: drift-b 17s ease-in-out infinite alternate;
}
@keyframes drift-a {
  to {
    transform: translate(140px, 70px) scale(1.12);
  }
}
@keyframes drift-b {
  to {
    transform: translate(-150px, -50px) scale(1.15);
  }
}
/* A lime highlighter swipes under the key word each time a headline line appears */
.hero h1 em {
  font-style: normal;
  padding-inline: 0.05em;
  background: linear-gradient(var(--lime), var(--lime)) no-repeat 0 86% / 0% 0.3em;
  transition: background-size 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.75s;
}
.hero h1.ready span:not([aria-hidden]) em {
  background-size: 100% 0.3em;
}
.hero h1 span[aria-hidden="true"] em {
  transition: background-size 0.2s ease;
}
.hero .hi {
  margin-bottom: 20px;
}
.hero h1 {
  max-width: 620px;
  margin: 0 auto;
  font-size: clamp(42px, 7vw, 72px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  min-height: 3.1em;
  display: grid;
  place-items: center;
}
/* Old line fades out fully before the new one fades in, so the two never overlap */
.hero h1 span {
  grid-area: 1 / 1;
  transition:
    opacity 0.45s ease 0.4s,
    transform 0.45s ease 0.4s;
}
.hero h1 span[aria-hidden="true"] {
  opacity: 0;
  transform: translateY(-10px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}
.hero .lede {
  max-width: 500px;
  margin: 18px auto 0;
}
.signup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 400px;
  margin: 10px auto 0;
}
.signup input {
  flex: 1;
  min-width: 0;
  height: 44px;
  border-radius: 22px;
  border: 1px solid var(--outline);
  background: var(--surface);
  font: 400 16px var(--font);
  color: var(--ink);
  padding: 0 20px;
  outline: none;
}
.signup input:focus {
  border-color: var(--ink);
}
.signup input::placeholder {
  color: var(--cap);
}
.signup button {
  flex: none;
  height: 44px;
  padding: 0 20px;
  border-radius: 22px;
  border: 1px solid var(--outline);
  background: transparent;
  color: var(--ink);
  font: 600 16px var(--font);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.signup button:hover {
  background: var(--surface);
  border-color: var(--ink);
}
.signup-msg {
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
  min-height: 18px;
}
.hero .stores {
  justify-content: center;
  margin-top: 32px;
}
/* Main action: big store badges. Email sign-up sits underneath as the quieter option. */
.stores.lg .store {
  width: 172px;
  height: 56px;
  padding: 0 16px;
  border-radius: 14px;
  gap: 10px;
}
.stores.lg .store svg {
  width: 26px;
  height: 26px;
}
.stores.lg .store small {
  font-size: 10px;
}
.stores.lg .store span {
  font-size: 18px;
}
.or-email {
  margin-top: 30px;
  font-size: 14px;
  color: var(--muted);
}
/* ---------- Store badges ---------- */
.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.store {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 136px;
  height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--ink);
  color: #f9fafb;
  text-align: left;
  transition: transform 0.2s ease;
}
.store:hover {
  transform: translateY(-2px);
}
.store svg {
  flex: none;
  width: 20px;
  height: 20px;
}
.store small {
  display: block;
  font-size: 8px;
  line-height: 1;
  opacity: 0.8;
}
.store span {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* ---------- Review video marquee ---------- */
.marquee {
  overflow: hidden;
  margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.idea {
  margin-top: 100px;
}
.idea .videos {
  margin-top: 56px;
}
.track {
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
  animation: slide 50s linear infinite;
}
.videos video {
  display: block;
  flex: none;
  width: 170px;
  height: 300px;
  border-radius: 20px;
  object-fit: cover;
  background: var(--slot-bg);
  box-shadow: var(--shadow-sm);
}
@keyframes slide {
  to {
    transform: translateX(-50%);
  }
}

/* ---------- How it works (dark like the app's recording screen) ---------- */
.how {
  max-width: var(--wrap);
  margin: 72px auto 0;
  padding: 24px 0 0;
  color: var(--ink);
}
.how-head {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 18px;
}
.how .lede {
  max-width: 440px;
}
.how h2 {
  max-width: none;
}
.how .stores {
  justify-content: center;
}
/* Four step cards in one row, joined by a line, so all four read at a glance.
   App screens live in What you get. */
.steps {
  list-style: none;
  padding: 0;
  margin: 56px auto 0;
  max-width: 960px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  perspective: 900px;
}
/* White cards with soft lime and blue glows fading in from opposite corners:
   mostly lime at step 1, shifting to mostly blue by step 4 */
.tl {
  --lime-a: 0.42;
  --blue-a: 0.1;
  position: relative;
  color: var(--ink);
  box-shadow: 0 12px 30px -16px rgba(14, 16, 19, 0.18);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 26px 24px 30px;
  min-height: 250px;
  display: grid;
  align-content: start;
  gap: 10px;
  background:
    radial-gradient(120% 85% at 0% 0%, rgba(194, 232, 115, var(--lime-a)) 0, rgba(194, 232, 115, 0) 72%),
    radial-gradient(120% 85% at 100% 100%, rgba(143, 191, 224, var(--blue-a)) 0, rgba(143, 191, 224, 0) 72%),
    var(--surface);
  transition:
    translate 0.35s ease,
    border-color 0.35s ease;
}
.tl:nth-child(2) {
  --lime-a: 0.32;
  --blue-a: 0.22;
}
.tl:nth-child(3) {
  --lime-a: 0.22;
  --blue-a: 0.32;
}
.tl:nth-child(4) {
  --lime-a: 0.1;
  --blue-a: 0.42;
}
.tl:hover {
  border-color: #d2d5da;
}
/* Hover "press and shine" (desktop): the card tilts away from the cursor and sinks a little, and a soft
   sheen catches the opposite edge. Driven by the script; the sheen layer is added there too. */
.tl > :not(.tl-sheen),
.cap-card > :not(.tl-sheen) {
  position: relative;
  z-index: 1;
}
.tl-sheen {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
}
.tl.tilting,
.cap-card.tilting {
  transition: border-color 0.35s ease !important;
  will-change: transform;
}
/* Top row of each card: a soft rounded icon tile, and the step number on the right */
.tl-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
/* Clean line icons floating on the card, in the same grey as the step number */
.tl-ico {
  display: grid;
  place-items: center;
  color: var(--cap);
}
.tl-ico svg {
  width: 30px;
  height: 30px;
}
.step-n {
  font: 700 13px / 1 var(--mono);
  color: var(--cap);
}
.tl h3 {
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.tl p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- What's in it for you? (pastel tiles) ---------- */
/* Rule for dark on this page: dark only ever appears as a full-width rounded section (How it works,
   What you get, Ready to review), and cards inside a dark section always use the same dark card style. */
.whyr {
  max-width: var(--wrap);
  margin: 140px auto 0;
  color: var(--ink);
}
.whyr-sub {
  max-width: 360px;
  margin: 18px auto 0;
  font-size: 17px;
  text-align: center;
  color: var(--muted);
}
/* Showcase: benefits listed on the left; one big phone on the right shows the screen for the selected one */
.showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
  max-width: 920px;
  margin: 56px auto 0;
}
.sc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.sc-item button {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 12px;
  padding: 20px 22px 24px;
  border-radius: 20px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background 0.35s ease;
}
.sc-item button:hover {
  background: rgba(254, 255, 255, 0.6);
}
.sc-item button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.sc-item .n {
  font: 700 13px / 1 var(--mono);
  color: var(--cap);
  padding-top: 9px;
  transition: color 0.35s;
}
.sc-title {
  display: block;
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #8a8f98;
  transition: color 0.35s;
}
.sc-desc {
  display: block;
  grid-column: 2;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.5s ease,
    opacity 0.4s ease,
    margin 0.4s ease;
}
.sc-item.on button {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.sc-item.on .sc-title {
  color: var(--ink);
}
.sc-item.on .n {
  color: var(--ink);
}
.sc-item.on .sc-desc {
  max-height: 140px;
  opacity: 1;
  margin-top: 8px;
}
/* Lime timer line under the active benefit */
.sc-item .bar {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 10px;
  height: 2px;
  border-radius: 1px;
  background: var(--line);
  opacity: 0;
}
.sc-item.on .bar {
  opacity: 1;
}
.sc-item .bar i {
  display: block;
  height: 100%;
  border-radius: 1px;
  background: var(--ink);
  transform-origin: left;
  transform: scaleX(0);
}
.sc-item.on .bar i {
  animation: sc-fill 5s linear forwards;
}
.showcase.paused .sc-item.on .bar i {
  animation: none;
  transform: scaleX(1);
}
@keyframes sc-fill {
  to {
    transform: scaleX(1);
  }
}
/* Scroll-driven version (desktop): the wrapper is made tall by the script, the showcase sticks in the middle of
   the screen, and the line under the active benefit fills as you scroll through it instead of on a timer */
.sc-scroll.scrolly .sc-pin {
  position: sticky;
  top: var(--pin-top, 84px);
}
/* Tighter while pinned, so heading, list and phone all fit under the menu on a laptop screen */
.sc-scroll.scrolly .showcase {
  margin-top: 28px;
}
.sc-scroll.scrolly .section-head {
  max-width: none;
}
.sc-scroll.scrolly .section-head .h-xl {
  font-size: clamp(34px, 3.9vw, 46px);
}
.sc-scroll.scrolly .whyr-sub {
  max-width: 600px;
  margin-top: 14px;
}
@media (max-height: 860px) {
  .sc-scroll.scrolly .sc-stage .phone {
    width: 206px;
  }
}
.sc-scroll.scrolly .sc-item.on .bar i {
  animation: none;
  transform: scaleX(var(--p, 0));
}
.sc-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
}
.sc-stage::before {
  content: "";
  position: absolute;
  inset: 8% -12%;
  z-index: -1;
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.6;
  background:
    radial-gradient(circle at 35% 40%, rgba(194, 232, 115, 0.8) 0, transparent 55%),
    radial-gradient(circle at 65% 65%, rgba(143, 191, 224, 0.8) 0, transparent 55%);
}
.sc-stage .phone {
  grid-area: 1 / 1;
  width: 236px;
  opacity: 0;
  transform: translateY(24px) rotate(-3deg) scale(0.94);
  transition:
    opacity 0.45s ease,
    transform 0.7s cubic-bezier(0.3, 1.45, 0.5, 1);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.sc-stage .phone.on {
  opacity: 1;
  transform: none;
}
/* Real screenshots inside the phone: filled edge to edge, anchored to the top of the screen */
/* Phone mockup: black bezel, rounded screen and a camera island. The screenshot sits inside the screen.
   Screens that were trimmed at the top (.pad) get a light status-bar strip so the island doesn't cover content. */
.sc-stage .shot {
  position: relative;
  border: 0;
  border-radius: 40px;
  background: #0e1013;
  box-shadow:
    0 26px 60px -20px rgba(14, 16, 19, 0.45),
    inset 0 0 0 2px #2a2e35;
}
.sc-stage .shot::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 16px;
  left: 50%;
  translate: -50% 0;
  width: 64px;
  height: 19px;
  border-radius: 12px;
  background: #0e1013;
}
.sc-stage .shot img {
  position: absolute;
  inset: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  border-radius: 32px;
  object-fit: cover;
  object-position: top center;
  background: var(--bg);
}
/* Trimmed Shopper Mirror screens: fill the screen edge to edge (the screenshots already include the app's 20px side padding),
   sitting under a black status bar (time, signal, wifi, battery) like the real phone */
.sc-stage .shot.pad img {
  top: 8px;
  padding-top: 40px;
  box-sizing: border-box;
  object-fit: cover;
  object-position: center top;
  background: #f4f5f7;
}
/* A screen whose own background carries on up behind the status bar (no separate strip) */
.sc-stage .shot.pad.full img {
  padding-top: 0;
}
/* A screen whose own top is cut mid-list: keep its tab bar and let the top go under the status bar strip */
.sc-stage .shot.pad.bottom img {
  object-position: center bottom;
}
/* iPhone home bar at the bottom of the trimmed screens */
.sc-stage .shot.pad::before {
  content: "";
  position: absolute;
  z-index: 3;
  bottom: 15px;
  left: 50%;
  translate: -50% 0;
  width: 78px;
  height: 4px;
  border-radius: 2px;
  background: #1d1d1d;
}
.sbar {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 8px;
  right: 8px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 20px 0 26px;
  font: 600 12px / 1 var(--font);
  letter-spacing: -0.02em;
  color: #1d1d1d;
  pointer-events: none;
}
.sbar svg {
  width: 52px;
  height: 12px;
}
.sc-stage .slides img {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.sc-stage .slides img.on {
  opacity: 1;
}

/* ---------- Rewards ---------- */
.rewards {
  margin-top: 150px;
}
/* Gift cards float on their own and scroll like the other strips (pause on hover) */
.giftcard-strip {
  margin-top: 8px;
  padding-block: 28px 40px;
}
.giftcard-strip .track {
  gap: 22px;
  animation-duration: 45s;
}
.gc {
  display: block;
  flex: none;
  width: 236px;
  aspect-ratio: 1.6;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 10px 24px -12px rgba(14, 16, 19, 0.45);
  transition:
    scale 0.35s ease,
    box-shadow 0.35s ease;
}
.gc:hover {
  scale: 1.05;
  box-shadow: 0 18px 34px -14px rgba(14, 16, 19, 0.5);
}

/* ---------- Community ---------- */
.community {
  margin-top: 150px;
}
.collage {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 60px;
  gap: 12px;
  margin-top: 64px;
}
.collage .ev {
  display: block;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  border-radius: 24px;
  background: var(--slot-bg);
  box-shadow: var(--shadow-sm);
  transform: translateY(var(--py, 0px));
}
/* One shared, gentle film look so photos from different cameras match:
   warmer and slightly softer colour, faded blacks, fine grain and a soft vignette */
.collage .ev img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.16) saturate(0.9) contrast(0.93) brightness(1.04);
}
.collage .ev::before,
.collage .ev::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}
.collage .ev::before {
  background: #3a2a1a;
  mix-blend-mode: lighten;
  opacity: 0.14;
}
.collage .ev::after {
  opacity: 0.5;
  mix-blend-mode: overlay;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(20, 12, 4, 0.45) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.c1 {
  grid-column: 1 / 8;
  grid-row: 1 / 6;
}
.c2 {
  grid-column: 9 / 13;
  grid-row: 1 / 7;
}
.c3 {
  grid-column: 6 / 10;
  grid-row: 5 / 9;
  z-index: 1;
}
.c4 {
  grid-column: 1 / 6;
  grid-row: 7 / 12;
}
.c5 {
  grid-column: 7 / 13;
  grid-row: 9 / 14;
}
.c6 {
  grid-column: 2 / 6;
  grid-row: 12 / 15;
}
.collage .ev {
  position: relative;
  transition:
    scale 0.4s ease,
    box-shadow 0.4s ease;
}
.collage .ev:hover {
  scale: 1.04;
  z-index: 3;
  box-shadow: 0 20px 50px rgba(14, 16, 19, 0.22);
}

/* ---------- FAQ (one white card, like the app's grouped lists) ---------- */
.faq {
  margin-top: 140px;
}
.faq-list {
  margin: 48px auto 0;
  max-width: 820px;
  background: var(--surface);
  border-radius: 28px;
  padding: 8px 28px;
  box-shadow: var(--shadow-sm);
}
.faq details + details {
  border-top: 1px solid var(--line);
}
.faq summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  cursor: pointer;
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary .plus {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background: var(--bg);
  position: relative;
  transition:
    transform 0.3s ease,
    background 0.3s;
}
.faq summary .plus::before,
.faq summary .plus::after {
  content: "";
  position: absolute;
  background: var(--ink);
  left: 10px;
  top: 15px;
  width: 12px;
  height: 2px;
  border-radius: 1px;
}
.faq summary .plus::after {
  transform: rotate(90deg);
}
.faq details[open] .plus {
  transform: rotate(45deg);
  background: var(--lime);
}
.faq details p {
  padding: 0 48px 24px 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 720px;
}

/* ---------- Free products carousel ---------- */
.freebies {
  margin-top: 120px;
}
.freebie-strip {
  margin-top: 24px;
  padding-block: 28px 44px;
}
.freebie-strip .track {
  gap: 16px;
  animation-duration: 60s;
  align-items: stretch;
}
.freebie {
  flex: none;
  width: 230px;
  align-content: start;
  background: var(--surface);
  border-radius: 24px;
  padding: 10px 10px 16px;
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 12px;
  transition:
    translate 0.35s ease,
    box-shadow 0.35s ease;
}
.freebie:hover {
  translate: 0 -6px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
}
/* Product cut-outs (images/products/, transparent, all scaled to the same visual size) on a soft tile */
.freebie .pimg {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: contain;
  border-radius: 16px;
  padding: 14px;
  box-sizing: border-box;
  background: radial-gradient(80% 70% at 50% 60%, #ffffff 0, #f1f2f4 100%);
}
.freebie .pname {
  font-size: 14px;
  line-height: 1.35;
  color: var(--muted);
  padding-inline: 6px;
  margin-top: -6px;
}
.freebie h3 {
  font-size: 19px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  padding-inline: 6px;
}
/* Product chips, styled like the app's: first chip lime, second outlined */
.freebie .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-inline: 6px;
}
.freebie .tag {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--outline);
  font: 600 12px / 1 var(--font);
  color: var(--muted);
  white-space: nowrap;
}
.freebie .tag:first-child {
  background: rgba(194, 232, 115, 0.5);
  border-color: transparent;
  color: var(--ink);
}

/* ---------- Ready (plain page background, just the calls to action) / footer ---------- */
.ready {
  max-width: var(--wrap);
  margin: 120px auto 0;
  padding: 24px 0 0;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 10px;
}
.ready h2 {
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: -0.02em;
}
/* One row: the two store badges and a plain black Instagram glyph */
.get {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 14px;
  margin-top: 24px;
}
.get .ig {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  color: var(--ink);
  border-radius: 14px;
  transition: background 0.2s;
}
.get .ig:hover {
  background: var(--surface);
}
.get .ig svg {
  width: 28px;
  height: 28px;
}
.footer {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding-block: 64px 40px;
}
.footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
}
.footer nav a:hover {
  color: var(--ink);
}
.footer small {
  font: 400 13px var(--mono);
  color: var(--cap);
}

/* ---------- Motion ---------- */
/* Fade-and-rise as things scroll into view (only when JS runs). Items in a row are staggered by the script. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.js .reveal.in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
    translate 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease;
}
/* Hero builds in on load, line by line, phones last */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
}
.js .hero > * {
  animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.js .hero > :nth-child(2) {
  animation-delay: 0.08s;
}
.js .hero > :nth-child(3) {
  animation-delay: 0.16s;
}
.js .hero > :nth-child(4) {
  animation-delay: 0.24s;
}
.js .hero > :nth-child(5),
.js .hero > :nth-child(6) {
  animation-delay: 0.34s;
}
.js .bridge.in::before,
.js .bridge.in::after {
  width: 40px;
}
/* Hover: cards lift, phones peek up, buttons press */
.pill:active,
.signup button:active,
.store:active {
  scale: 0.97;
}
.signup button svg,
.pill svg {
  transition: translate 0.25s ease;
}
.signup button:hover svg {
  translate: 2px -2px;
}
.faq summary:hover .plus {
  background: var(--lime);
}

/* ---------- Voice memos + shopping trips: copy and two cards beside a phone playing the voice memo recording ---------- */
.capture {
  max-width: 980px;
  margin: 0 auto;
}
.capture-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.capture-copy {
  display: grid;
  gap: 16px;
}
.capture-copy .lede {
  font-size: 17px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 480px;
}
.capture-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
  perspective: 900px;
}
.cap-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 24px 22px 26px;
  display: grid;
  align-content: start;
  gap: 10px;
  transition:
    translate 0.35s ease,
    border-color 0.35s ease;
  background:
    radial-gradient(120% 90% at 0 0, rgba(194, 232, 115, var(--lime-a, 0.35)) 0, rgba(194, 232, 115, 0) 70%),
    radial-gradient(120% 90% at 100% 100%, rgba(143, 191, 224, var(--blue-a, 0.12)) 0, rgba(143, 191, 224, 0) 72%),
    var(--surface);
  box-shadow: 0 12px 30px -16px rgba(14, 16, 19, 0.18);
}
.cap-card + .cap-card {
  --lime-a: 0.12;
  --blue-a: 0.38;
}
.cap-card:hover {
  border-color: #d2d5da;
}
.cap-card .tl-top {
  margin-bottom: 10px;
}
.cap-card h3 {
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.cap-card p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}
.cap-new {
  font: 600 11px / 1 var(--font);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(194, 232, 115, 0.5);
  color: var(--ink);
}
.capture-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
}
/* Soft glow behind the phone. "closest-side" makes each colour fade to nothing before it reaches the edge of its box, so there is never a visible square edge */
.capture-stage::before {
  content: "";
  position: absolute;
  inset: -14% -36%;
  z-index: -1;
  filter: blur(40px);
  opacity: 0.75;
  pointer-events: none;
  background:
    radial-gradient(closest-side at 58% 36%, rgba(194, 232, 115, 0.95), rgba(194, 232, 115, 0)),
    radial-gradient(closest-side at 42% 68%, rgba(143, 191, 224, 0.95), rgba(143, 191, 224, 0));
}
/* Phone with the real recording inside (the recording has its own status bar and island, so no fake ones here) */
.capture-phone {
  position: relative;
  width: 236px;
  aspect-ratio: 600 / 1304;
  border-radius: 40px;
  background: #0e1013;
  box-shadow:
    0 26px 60px -20px rgba(14, 16, 19, 0.45),
    inset 0 0 0 2px #2a2e35;
}
.capture-phone video {
  position: absolute;
  inset: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  border-radius: 32px;
  object-fit: cover;
  background: #1a1c20;
}
/* Little labels pinned to the phone: "Recording" with a pulsing dot, and the result landing in the Shopper Mirror */
.cap-chip {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--surface);
  font: 600 13px / 1 var(--font);
  letter-spacing: -0.02em;
  color: var(--ink);
  box-shadow: 0 10px 24px -10px rgba(14, 16, 19, 0.3);
  white-space: nowrap;
}
.cap-chip.rec {
  top: 18%;
  left: -34px;
}
.cap-chip.done {
  bottom: 14%;
  left: -56px;
}
.cap-chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e5484d;
  animation: recpulse 1.4s ease-in-out infinite;
}
.cap-chip .tick {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--lime);
}
.cap-chip .tick svg {
  width: 11px;
  height: 11px;
}
@keyframes recpulse {
  50% {
    opacity: 0.25;
    transform: scale(0.8);
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .capture-grid {
    grid-template-columns: 1fr;
  }
  .capture-copy {
    text-align: center;
    justify-items: center;
  }
  .cap-card {
    text-align: left;
  }
  .showcase {
    grid-template-columns: 1fr;
  }
  .sc-stage {
    order: -1;
  }
  .sc-stage .phone {
    width: 200px;
  }
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tl {
    min-height: 0;
  }
}
@media (max-width: 640px) {
  .nav {
    position: relative;
    gap: 10px 12px;
  }
  .nav .wordmark-link {
    order: -1;
    flex-basis: 100%;
  }
  .nav a.link {
    font-size: 13px;
  }
  .nav .pill {
    display: none;
  }
  .hero {
    padding-block: 48px 20px;
  }
  .hero::before,
  .hero::after {
    width: 340px;
    height: 300px;
  }
  .hero::before {
    margin-left: -300px;
  }
  .hero::after {
    margin-left: -40px;
    top: 220px;
  }
  .faq-list {
    padding: 4px 20px;
  }
  .steps {
    grid-template-columns: 1fr;
  }
  .tl {
    padding: 22px;
  }
  .tl-top {
    margin-bottom: 12px;
  }
  .capture-cards {
    grid-template-columns: 1fr;
  }
  .cap-chip.rec {
    left: -12px;
  }
  .cap-chip.done {
    left: -12px;
  }
  .collage {
    grid-auto-rows: 34px;
    gap: 8px;
  }
  .collage .ev {
    border-radius: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .track,
  .js .hero > *,
  .hero::before,
  .hero::after {
    animation: none;
  }
  .hero h1 em {
    transition: none;
  }
  .sc-item.on .bar i {
    animation: none;
    transform: scaleX(1);
  }
  .sc-stage .phone,
  .sc-desc {
    transition: none;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .cap-chip .dot {
    animation: none;
  }
  .js .bridge::before,
  .js .bridge::after {
    width: 40px;
    transition: none;
  }
  .hero h1 span {
    transition: none;
  }
  html {
    scroll-behavior: auto;
  }
}