@font-face {
  font-family: "Rubik";
  src: url("/assets/Rubik-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #eceef0;
  --card: #ffffff;
  --ink: #1e1e22;
  --muted: #55535c;
  --coral: #ff8e7f;
  --sky: #c9dff2;
  --peach: #f7d3b8;
  --butter: #f3e4a6;
  --lilac: #dcd2f3;
  --mint: #bfe5d2;
  --rose: #f5c2ce;
  --max: 1240px;
  /* Glass cards on pastel (BRD D32), from the app's Theme: wash, glass fill, white edge, soft violet shadow. */
  --wash-top: #f4eefc;
  --wash-mid: #fbeff0;
  --wash-bottom: #eaf3fb;
  --glass: rgba(255, 255, 255, .5);
  --edge: rgba(255, 255, 255, .85);
  --glass-shadow: rgba(89, 69, 161, .12);
  --violet: #6a4fb8;
  --border: 1.5px solid var(--edge);
  --lift-sm: 0 4px 12px var(--glass-shadow);
  --lift: 0 10px 28px var(--glass-shadow);
  --lift-lg: 0 18px 48px rgba(89, 69, 161, .16);
  --shadow: var(--lift-lg);
  --blur: blur(18px) saturate(1.4);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; } /* decorative bursts never cause sideways scroll (iOS ignores body overflow) */
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(38vw 38vw at 4% 18%, rgba(220, 210, 243, .75), transparent 70%),
    radial-gradient(36vw 36vw at 98% 52%, rgba(247, 211, 184, .65), transparent 70%),
    radial-gradient(34vw 34vw at 24% 92%, rgba(191, 229, 210, .65), transparent 70%),
    linear-gradient(135deg, var(--wash-top), var(--wash-mid) 50%, var(--wash-bottom));
  background-attachment: fixed;
  font-family: "Rubik", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, summary { font: inherit; }
button { color: inherit; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  background: var(--card);
  border: var(--border);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

/* Was the dotted Sticker Book paper; the pastel wash on body shows through now. */
.paper-grid { background: transparent; }

/* Glass: a tinted fill over a blur, a white edge and a soft shadow (the app's GlassBackground). */
.skip-link, .site-header, .eyebrow, .sticker, .button, .floating-sticker, .listening-card, .story-tab, .story-panel,
.result-chips span, .feature-card, .mini-sticker, .feature-bullets li, .setup-visual, .setup-choice, .handoff-note,
.watch-points span, .privacy-stack article, .faq details, .capture-marquee span {
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

.site-header {
  position: fixed;
  z-index: 50;
  top: 16px;
  left: 50%;
  width: min(calc(100% - 32px), 1240px);
  min-height: 68px;
  padding: 10px 14px 10px 18px;
  display: flex;
  align-items: center;
  gap: 28px;
  border: var(--border);
  border-radius: 22px;
  background: rgba(255, 255, 255, .6);
  box-shadow: var(--lift);
  transform: translateX(-50%);
  transition: transform .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled { transform: translateX(-50%) translateY(-5px); box-shadow: var(--lift-sm); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 850; font-size: 1.18rem; white-space: nowrap; }
.brand img { flex: 0 0 auto; }
.site-header nav { margin-left: auto; display: flex; align-items: center; gap: 24px; }
.site-header nav a, footer nav a { text-decoration: none; font-weight: 650; font-size: .91rem; }
.site-header nav a:hover, footer nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.nav-badge {
  padding: 9px 14px;
  border: var(--border);
  border-radius: 999px;
  background: var(--coral);
  box-shadow: var(--lift-sm);
  font-weight: 750;
  font-size: .82rem;
  white-space: nowrap;
}

.hero {
  position: relative;
  min-height: 900px;
  padding: 150px max(28px, calc((100vw - var(--max)) / 2)) 110px;
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  align-items: center;
  gap: 54px;
}
.hero::before {
  content: "";
  position: absolute;
  top: 112px;
  left: -120px;
  width: 270px;
  height: 270px;
  border-radius: 50%;
  background: var(--butter);
  filter: blur(50px);
  opacity: .8;
}
.hero-copy { position: relative; z-index: 2; }
.eyebrow, .sticker {
  display: inline-flex;
  padding: 9px 16px;
  border: var(--border);
  border-radius: 999px;
  box-shadow: var(--lift-sm);
  font-weight: 750;
  letter-spacing: .01em;
}
.sticker--sky { background: rgba(201, 223, 242, .6); }
.hero h1, .section h2, .final-cta h2 {
  margin: 30px 0 22px;
  font-size: clamp(4.4rem, 7.8vw, 7.2rem);
  line-height: .91;
  letter-spacing: -.065em;
  font-weight: 900;
}
.hero h1 { letter-spacing: -.02em; }
.hero h1 span {
  position: relative;
  z-index: 1;
  display: inline-block;
}
.hero h1 span::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -2%;
  right: -3%;
  bottom: .02em;
  height: .22em;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 142, 127, .55), rgba(255, 142, 127, .8));
}
.hero-lede { max-width: 650px; margin: 0; color: var(--muted); font-size: clamp(1.08rem, 1.7vw, 1.34rem); line-height: 1.55; }
.hero-actions { margin: 34px 0 28px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.button {
  min-height: 52px;
  padding: 13px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--border);
  border-radius: 999px;
  background: var(--glass);
  box-shadow: var(--lift);
  color: var(--ink);
  font-weight: 780;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
a.button:hover { transform: translateY(-2px); box-shadow: var(--lift-lg); }
.button--primary { background: var(--coral); color: white; border-color: rgba(255, 255, 255, .6); }
.button--quiet { background: var(--glass); color: var(--muted); }
.button--large { padding: 17px 26px; }
.trust-row { margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; color: var(--muted); font-size: .88rem; font-weight: 620; }
.trust-row li::before { content: "✓"; margin-right: 7px; color: #267a58; font-weight: 900; }

.hero-stage { position: relative; min-height: 650px; display: grid; place-items: center; }
.phone-shell {
  position: relative;
  overflow: hidden;
  border: 10px solid var(--ink);
  border-radius: 62px;
  background: var(--wash-top);
  box-shadow: 0 30px 70px rgba(89, 69, 161, .28), 0 0 0 1.5px var(--edge);
}
.phone-shell img { width: 100%; height: 100%; object-fit: cover; }
.hero-phone { z-index: 3; width: min(370px, 68vw); aspect-ratio: 1320/2868; transform: rotate(2deg); animation: phone-float 5.2s ease-in-out infinite; }
.floating-sticker {
  position: absolute;
  z-index: 5;
  padding: 10px 17px;
  border: var(--border);
  border-radius: 14px;
  box-shadow: var(--lift);
  background: var(--glass);
  font-weight: 850;
  animation: sticker-bob 3.6s ease-in-out infinite;
}
.float-a { top: 16%; left: 1%; background: rgba(243, 228, 166, .7); }
.float-b { top: 45%; right: -1%; background: rgba(191, 229, 210, .7); animation-delay: -.8s; }
.float-c { bottom: 11%; left: 6%; background: rgba(245, 194, 206, .7); animation-delay: -1.6s; }
.listening-card {
  position: absolute;
  z-index: 6;
  right: 2%;
  bottom: 20%;
  min-width: 215px;
  padding: 12px 16px 12px 12px;
  display: flex;
  gap: 12px;
  align-items: center;
  border: var(--border);
  border-radius: 20px;
  background: rgba(255, 255, 255, .65);
  box-shadow: var(--lift);
}
.listening-card img { width: 55px; height: 55px; }
.waveform { height: 24px; margin-top: 2px; display: flex; align-items: center; gap: 4px; }
.waveform i { width: 4px; height: 10px; border-radius: 4px; background: var(--coral); animation: wave 1s ease-in-out infinite; }
.waveform i:nth-child(2), .waveform i:nth-child(5) { animation-delay: -.2s; }
.waveform i:nth-child(3) { animation-delay: -.45s; }
.waveform i:nth-child(4) { animation-delay: -.7s; }
.burst { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .85; }
.burst--one { width: 480px; height: 480px; background: var(--lilac); }
.burst--two { width: 530px; height: 200px; background: var(--sky); transform: rotate(-17deg); }
.scroll-cue { position: absolute; left: 50%; bottom: 22px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--muted); font-size: .78rem; text-decoration: none; transform: translateX(-50%); }
.scroll-cue b { font-size: 1.5rem; animation: nudge 1.7s ease-in-out infinite; }

.capture-strip {
  padding: 20px max(22px, calc((100vw - var(--max)) / 2));
  display: flex;
  align-items: center;
  gap: 28px;
  overflow: hidden;
}
.capture-strip p { flex: 0 0 auto; margin: 0; color: var(--violet); font-weight: 800; }
.capture-marquee { min-width: 0; flex: 1; display: flex; gap: 12px; align-items: center; overflow-x: auto; scrollbar-width: none; }
.capture-marquee::-webkit-scrollbar { display: none; }
.capture-marquee span { padding: 7px 13px; border: var(--border); background: var(--glass); border-radius: 999px; font-size: .86rem; font-weight: 700; }

.section { padding: 120px max(28px, calc((100vw - var(--max)) / 2)); }
.section-heading { max-width: 780px; margin-bottom: 60px; }
.section-heading .kicker, .kicker { color: var(--violet); font-weight: 850; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; }
.section-heading h2, .watch-copy h2, .privacy-intro h2, .busy-copy h2 { font-size: clamp(3.1rem, 6vw, 5.6rem); }
.section-heading p, .watch-copy > p, .privacy-intro > p, .busy-copy > p { max-width: 660px; color: var(--muted); font-size: 1.16rem; }
.section-heading--split { max-width: none; display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 60px; }
.section-heading--split p { margin: 0 0 30px; }

.how-section { background: rgba(255, 255, 255, .28); }
.storyboard { display: grid; grid-template-columns: 310px 1fr; gap: 28px; align-items: stretch; }
.story-controls { display: grid; gap: 14px; }
.story-tab {
  position: relative;
  padding: 22px;
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-areas: "number title" "number note";
  align-content: center; /* tall tabs keep their text together, not spread top to bottom */
  gap: 4px 14px;
  text-align: left;
  border: var(--border);
  border-radius: 20px;
  background: var(--glass);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.story-tab:hover { transform: translateY(-2px); }
.story-tab.is-active { background: rgba(243, 228, 166, .7); box-shadow: var(--lift); transform: translateY(-2px); }
.story-tab > span { grid-area: number; align-self: center; width: 44px; height: 44px; display: grid; place-items: center; border: var(--border); border-radius: 50%; background: var(--card); box-shadow: var(--lift-sm); font-family: "Rubik", sans-serif; font-size: .9rem; font-weight: 800; transition: transform .2s ease, background .2s ease; }
.story-tab:nth-child(1) > span { background: var(--sky); }
.story-tab:nth-child(2) > span { background: var(--mint); }
.story-tab:nth-child(3) > span { background: var(--rose); }
.story-tab.is-active > span { background: var(--coral); color: white; transform: scale(1.08); }
.story-tab strong { grid-area: title; font-family: "Rubik", sans-serif; font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.story-tab small { grid-area: note; color: var(--ink); font-size: 1.05rem; font-weight: 500; line-height: 1.35; }
.story-panel {
  min-height: 640px;
  padding: 44px 54px;
  display: grid;
  grid-template-columns: 300px 1fr;
  align-items: center;
  gap: 64px;
  overflow: hidden;
  border: var(--border);
  border-radius: 34px;
  background: rgba(201, 223, 242, .55);
  box-shadow: var(--shadow);
}
.story-phone { width: 300px; aspect-ratio: 1320/2868; border-width: 8px; border-radius: 50px; transition: opacity .18s ease, transform .18s ease; }
.story-panel.is-changing .story-phone { opacity: .2; transform: scale(.96); }
.story-number { display: inline-block; margin-bottom: 16px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .78rem; }
.story-copy h3 { max-width: 520px; margin: 0 0 18px; font-size: clamp(2.4rem, 4vw, 4rem); line-height: 1; letter-spacing: -.045em; }
.story-copy p { max-width: 500px; margin: 0; color: var(--muted); font-size: 1.08rem; }
.result-chips { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.result-chips span { padding: 7px 12px; border: var(--border); border-radius: 999px; background: var(--glass); font-size: .78rem; font-weight: 750; }


.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.feature-card {
  min-height: 650px;
  padding: 34px 34px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* without it, a wide visual stretches the column and clips the copy */
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: var(--border);
  border-radius: 30px;
  box-shadow: var(--shadow);
}
.feature-card--wide { grid-column: 1 / -1; min-height: 580px; grid-template-columns: .8fr 1.2fr; grid-template-rows: 1fr; align-items: center; gap: 40px; padding: 48px 48px 0; }
.feature-card--mint { background: rgba(191, 229, 210, .55); }
.feature-card--butter { background: rgba(243, 228, 166, .55); }
.feature-card--peach { background: rgba(247, 211, 184, .55); }
.feature-card--lilac { background: rgba(220, 210, 243, .6); }
.feature-card--sky { background: rgba(201, 223, 242, .6); }
.feature-copy { position: relative; z-index: 3; }
.feature-copy h3 { margin: 17px 0 10px; font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1; letter-spacing: -.035em; }
.feature-copy p { max-width: 560px; margin: 0; color: var(--muted); }
.mini-sticker { display: inline-block; padding: 6px 10px; border: var(--border); border-radius: 999px; background: rgba(255, 255, 255, .65); box-shadow: var(--lift-sm); color: var(--violet); font-size: .67rem; font-weight: 850; letter-spacing: .08em; }
.feature-bullets { margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.feature-bullets li { padding: 7px 11px; border: var(--border); border-radius: 999px; background: rgba(255, 255, 255, .6); font-size: .78rem; font-weight: 700; }
.screen-crop { align-self: end; justify-self: center; width: 72%; height: 360px; overflow: hidden; border: 7px solid var(--ink); border-bottom: 0; border-radius: 38px 38px 0 0; background: var(--wash-top); box-shadow: 0 -6px 30px rgba(89, 69, 161, .18); }
.screen-crop { padding-top: 14px; } /* clears the rounded corners so the time and battery show */
.screen-crop img { width: 100%; height: auto; }
.crop-wrapup { width: 82%; height: 530px; justify-self: end; }
.setup-visual { align-self: end; justify-self: center; width: min(92%, 470px); padding: 28px 28px 34px; display: grid; gap: 12px; border: var(--border); border-bottom: 0; border-radius: 38px 38px 0 0; background: rgba(255, 255, 255, .55); box-shadow: 0 -6px 30px rgba(89, 69, 161, .14); }
.setup-visual > img { width: 92px; height: 92px; margin: -72px auto 10px; border-radius: 23px; box-shadow: var(--lift); }
.setup-choice { padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: var(--border); border-radius: 14px; background: rgba(255, 255, 255, .55); font-size: .84rem; font-weight: 700; }
.setup-choice b { padding: 4px 8px; border: var(--border); border-radius: 999px; background: rgba(243, 228, 166, .8); font-size: .65rem; text-transform: uppercase; white-space: nowrap; }
.setup-choice.is-picked { background: rgba(191, 229, 210, .8); box-shadow: var(--lift-sm); }

.watch-section { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 80px; background: rgba(255, 142, 127, .22); }
.watch-visual { position: relative; min-height: 590px; display: grid; place-items: center; }
.watch-shell { position: relative; z-index: 3; width: 390px; aspect-ratio: 422/514; overflow: hidden; border: 16px solid var(--ink); border-radius: 105px; background: var(--ink); box-shadow: 0 30px 70px rgba(89, 69, 161, .28); transform: rotate(-2deg); animation: watch-float 4.5s ease-in-out infinite; }
.watch-shell img { width: 100%; height: 100%; object-fit: cover; }
.orbit { position: absolute; border: 2px dashed rgba(255, 255, 255, .9); border-radius: 50%; animation: spin 20s linear infinite; }
.orbit--outer { width: 560px; height: 560px; }
.orbit--inner { width: 470px; height: 470px; animation-direction: reverse; animation-duration: 14s; }
.handoff-note { position: absolute; z-index: 5; right: 2%; bottom: 12%; padding: 12px 16px; display: flex; align-items: center; gap: 16px; border: var(--border); border-radius: 16px; background: rgba(191, 229, 210, .75); box-shadow: var(--lift); font-weight: 800; }
.handoff-note b { width: 28px; height: 28px; display: grid; place-items: center; border: var(--border); border-radius: 50%; background: rgba(255, 255, 255, .8); }
.watch-points { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.watch-points span { padding: 8px 12px; border: var(--border); border-radius: 999px; background: rgba(255, 255, 255, .6); box-shadow: var(--lift-sm); font-size: .8rem; font-weight: 750; }

.privacy-section { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; align-items: center; background: rgba(191, 229, 210, .3); }
.text-link { display: inline-block; margin-top: 16px; font-weight: 800; text-underline-offset: 4px; }
.privacy-stack { display: grid; gap: 14px; }
.privacy-stack article { padding: 18px 20px; display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 16px; border: var(--border); border-radius: 20px; background: var(--glass); box-shadow: var(--lift); }
.privacy-stack article:nth-child(2) { transform: translateX(16px); }
.privacy-stack article:nth-child(3) { transform: translateX(-10px); }
.privacy-icon { width: 48px; height: 48px; display: grid; place-items: center; border: var(--border); border-radius: 14px; background: rgba(220, 210, 243, .85); color: var(--violet); font-weight: 850; }
.privacy-stack strong { font-size: 1.03rem; }
.privacy-stack p { margin: 2px 0 0; color: var(--muted); font-size: .84rem; }
.privacy-stack b { padding: 6px 10px; border: var(--border); border-radius: 999px; background: rgba(243, 228, 166, .8); font-size: .69rem; text-transform: uppercase; letter-spacing: .06em; }

.busy-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: center; }
.busy-copy img { margin-bottom: 20px; filter: drop-shadow(0 14px 28px rgba(89, 69, 161, .2)); }
.faq { display: grid; gap: 14px; }
.faq details { border: var(--border); border-radius: 20px; background: var(--glass); box-shadow: var(--lift); overflow: hidden; }
.faq summary { position: relative; padding: 20px 56px 20px 22px; list-style: none; cursor: pointer; font-weight: 780; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; top: 14px; right: 18px; width: 32px; height: 32px; display: grid; place-items: center; border: var(--border); border-radius: 50%; background: rgba(243, 228, 166, .85); font-size: 1.25rem; }
.faq details[open] summary::after { content: "−"; background: var(--coral); color: white; }
.faq details p { margin: 0; padding: 0 22px 22px; color: var(--muted); }

.final-cta { position: relative; padding: 120px 24px 130px; overflow: hidden; text-align: center; background: rgba(220, 210, 243, .4); }
.final-cta img { margin: 0 auto 20px; border-radius: 31px; box-shadow: var(--lift-lg); }
.final-cta h2 { font-size: clamp(3.2rem, 7vw, 6.8rem); }
.final-cta p { color: var(--muted); font-size: 1.2rem; }
.final-cta .button { margin-top: 18px; }
.cta-confetti i { position: absolute; width: 22px; height: 52px; border: var(--border); border-radius: 12px; opacity: .8; box-shadow: var(--lift-sm); background: var(--butter); transform: rotate(20deg); animation: sticker-bob 3.8s ease-in-out infinite; }
.cta-confetti i:nth-child(1) { left: 8%; top: 16%; }
.cta-confetti i:nth-child(2) { left: 18%; bottom: 16%; background: var(--coral); transform: rotate(-30deg); animation-delay: -.8s; }
.cta-confetti i:nth-child(3) { right: 9%; top: 22%; background: var(--mint); transform: rotate(55deg); animation-delay: -1.3s; }
.cta-confetti i:nth-child(4) { right: 20%; bottom: 14%; background: var(--sky); transform: rotate(-12deg); animation-delay: -2.1s; }
.cta-confetti i:nth-child(5) { left: 50%; top: 8%; width: 18px; height: 18px; background: var(--rose); transform: rotate(45deg); }

footer { padding: 38px max(28px, calc((100vw - var(--max)) / 2)); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px 38px; background: rgba(30, 30, 34, .92); color: white; }
footer p { margin: 0; color: #c9c8cf; }
footer nav { display: flex; gap: 20px; }
footer small { grid-column: 2; color: #9f9da8; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.75,.25,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@keyframes phone-float { 0%,100% { transform: rotate(2deg) translateY(0); } 50% { transform: rotate(0deg) translateY(-14px); } }
@keyframes watch-float { 0%,100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(0deg) translateY(-10px); } }
@keyframes sticker-bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes wave { 0%,100% { height: 8px; } 50% { height: 23px; } }
@keyframes nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1050px) {
  .site-header nav { display: none; }
  .hero { min-height: auto; grid-template-columns: 1fr 1fr; padding-top: 145px; }
  .hero h1 { font-size: clamp(4rem, 8vw, 6rem); }
  .story-panel { grid-template-columns: 250px 1fr; gap: 36px; padding: 38px; }
  .story-phone { width: 250px; }
  .screen-crop { width: 82%; }
  .watch-section, .privacy-section, .busy-section { gap: 48px; }
  .watch-shell { width: 330px; border-radius: 90px; }
  .orbit--outer { width: 470px; height: 470px; }
  .orbit--inner { width: 390px; height: 390px; }
}

@media (max-width: 800px) {
  /* 44 px tap targets for the small text links. */
  footer nav a, .text-link { display: inline-block; padding: 10px 0; }
  .site-header { min-height: 62px; }
  .nav-badge { font-size: .72rem; padding: 7px 10px; }
  .hero { grid-template-columns: 1fr; gap: 30px; padding-top: 130px; text-align: center; }
  .hero::before { opacity: .5; }
  .hero-lede { margin-inline: auto; }
  .hero-actions, .trust-row { justify-content: center; }
  .hero-stage { min-height: 620px; }
  .hero-phone { width: 330px; }
  .float-a { left: 4%; }
  .float-b { right: 4%; }
  .float-c { left: 7%; }
  .scroll-cue { display: none; }
  .capture-strip { align-items: flex-start; flex-direction: column; gap: 12px; }
  .section { padding-top: 88px; padding-bottom: 88px; }
  .section-heading--split { grid-template-columns: 1fr; gap: 0; }
  .storyboard { grid-template-columns: 1fr; }
  .story-controls { grid-template-columns: repeat(3, 1fr); }
  .story-tab { grid-template-columns: 1fr; grid-template-areas: "number" "title" "note"; }
  .story-panel { grid-template-columns: 230px 1fr; }
  .story-phone { width: 230px; }
  .feature-card--wide { grid-template-columns: 1fr; padding: 34px 34px 0; }
  .watch-section, .privacy-section, .busy-section { grid-template-columns: 1fr; }
  .watch-copy { order: -1; }
  .privacy-stack article:nth-child(n) { transform: none; }
  footer { grid-template-columns: 1fr auto; }
  footer p { grid-row: 2; }
  footer small { grid-column: 1 / -1; }
}

@media (max-width: 590px) {
  body { font-size: 16px; }
  .site-header { top: 10px; width: calc(100% - 20px); padding-inline: 12px; border-radius: 18px; }
  .site-header .brand span { font-size: 1rem; }
  .site-header .brand img { width: 40px; height: 40px; }
  .hero { padding-inline: 18px; padding-bottom: 80px; }
  .hero h1 { font-size: clamp(3.65rem, 17vw, 5.2rem); }
  .hero-lede { font-size: 1rem; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .button { width: 100%; }
  .trust-row { flex-direction: column; gap: 6px; }
  .hero-stage { min-height: 550px; }
  .hero-phone { width: 275px; border-width: 8px; border-radius: 49px; }
  .floating-sticker { padding: 7px 10px; font-size: .75rem; }
  .listening-card { min-width: 180px; right: 1%; padding: 9px; font-size: .78rem; }
  .listening-card img { width: 42px; height: 42px; }
  .burst--one { width: 380px; height: 380px; }
  .burst--two { width: 410px; }
  .section { padding-inline: 18px; }
  .section-heading h2, .watch-copy h2, .privacy-intro h2, .busy-copy h2 { font-size: clamp(2.4rem, 12vw, 3.25rem); }
  .story-controls { display: flex; overflow-x: auto; padding: 3px 3px 10px; }
  .story-tab { min-width: 190px; padding: 18px; }
  .story-tab strong { font-size: 1.5rem; }
  .story-panel { min-height: 700px; grid-template-columns: 1fr; gap: 30px; padding: 28px 22px; text-align: center; }
  .story-phone { width: 220px; justify-self: center; }
  .result-chips { justify-content: center; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card, .feature-card--wide { grid-column: auto; min-height: 570px; padding: 28px 24px 0; }
  .screen-crop, .crop-wrapup { width: 90%; height: 320px; justify-self: center; }
  .watch-section { padding-inline: 18px; }
  .watch-visual { min-height: 470px; }
  .watch-shell { width: 270px; border-width: 12px; border-radius: 72px; }
  .orbit--outer { width: 360px; height: 360px; }
  .orbit--inner { width: 310px; height: 310px; }
  .privacy-stack article { grid-template-columns: 48px 1fr; }
  .privacy-stack article b { grid-column: 2; justify-self: start; }
  .busy-copy img { width: 130px; height: 130px; }
  .final-cta { padding-inline: 18px; }
  .final-cta h2 { font-size: clamp(2.5rem, 13vw, 3.5rem); }
  footer { grid-template-columns: 1fr; text-align: left; }
  footer nav { margin-top: 4px; }
  footer small { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}