/* Saymore web. Tokens are the app's SaymoreColor values (Design 2 §2.1): a near-black
   ground, grayscale everywhere, and colour only on a speaker's orb. */

:root {
  color-scheme: dark;
  --ground: #0B0B0D;
  --surface: #141417;
  --raised: #1C1C20;
  --hairline: #2A2A2F;
  --outline: #6E6E74;
  --control-outline: #8E8E95;
  --text-primary: #FFFFFF;
  --text-secondary: #D0D0D5;
  --text-tertiary: #9C9CA3;
  --inverted-fill: #FFFFFF;
  --inverted-label: #0A0A0B;
  --rec: #FF453A;
  --wave-unplayed: #4A4A50;

  --gutter: 20px;
  --ease: cubic-bezier(.20, .80, .20, 1);
  --t-micro: 120ms;
  --t-state: 200ms;
  --t-emphasis: 300ms;
  --max: 1080px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --ground: #FFFFFF;
    --surface: #F4F4F6;
    --raised: #EAEAEE;
    --hairline: #DDDDE2;
    --outline: #86868D;
    --control-outline: #5C5C63;
    --text-primary: #0A0A0B;
    --text-secondary: #5C5C63;
    --text-tertiary: #5C5C63;
    --inverted-fill: #0A0A0B;
    --inverted-label: #FFFFFF;
    --rec: #E5322D;
    --wave-unplayed: #C4C4CA;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text-primary);
  font: 400 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip {
  position: absolute; left: -9999px;
}
.skip:focus {
  left: var(--gutter); top: 12px; z-index: 10;
  background: var(--inverted-fill); color: var(--inverted-label);
  padding: 8px 14px; border-radius: 999px; text-decoration: none;
}

/* Wordmark: lowercase "saymore", no dot, brushed silver (the app's SaymoreColor.silver,
   owner 2026-09-30). The gradient is the text itself, so it holds on any ground. */
.wordmark {
  display: inline-flex; align-items: center;
  font-weight: 650; font-size: 20px; letter-spacing: 0;
  text-decoration: none; color: #D9DCE1;
  background: linear-gradient(180deg, #F4F5F7 0%, #A9ADB5 55%, #D9DCE1 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (prefers-color-scheme: light) {
  .wordmark {
    color: #7A7E86;
    background: linear-gradient(180deg, #8C9099 0%, #5B5F67 55%, #7A7E86 100%);
    -webkit-background-clip: text; background-clip: text;
  }
}

/* Header */
.site-header {
  border-bottom: 1px solid var(--hairline);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px;
}
.site-header nav { display: flex; gap: 24px; font-size: 15px; font-weight: 600; }
.site-header nav a { text-decoration: none; color: var(--text-secondary); }
.site-header nav a:hover { color: var(--text-primary); }

/* Buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px;
  border-radius: 999px; border: 1px solid var(--control-outline);
  font: 600 16px/1 var(--font); text-decoration: none;
  color: var(--text-primary); background: transparent;
}
.button.primary {
  background: var(--inverted-fill); color: var(--inverted-label); border-color: var(--inverted-fill);
}
.button:hover { opacity: 0.88; }

/* Orbs: the speaker's colour, the one colour on the page. */
.orb {
  display: block; flex: none;
  width: 132px; height: 132px; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,0.85) 0 6%, rgba(255,255,255,0) 26%),
    radial-gradient(circle at 42% 40%, var(--orb-core) 0%, var(--orb-edge) 78%);
  box-shadow: inset -10px -14px 28px rgba(0,0,0,0.35);
}
/* The app's twelve speaker palettes (SaymoreColor.orbPalettes), in order: the index
   is the speaker's colour, so never reorder. p-default is the neutral silver. */
.p0 { --orb-core: #6FD2FF; --orb-edge: #2159E0; }
.p1 { --orb-core: #5CE8C8; --orb-edge: #0E7F8F; }
.p2 { --orb-core: #BE9BFF; --orb-edge: #5C2ED8; }
.p3 { --orb-core: #FFD166; --orb-edge: #E0861F; }
.p4 { --orb-core: #CDF57A; --orb-edge: #3E9E4E; }
.p5 { --orb-core: #95A6FF; --orb-edge: #3448C0; }
.p6 { --orb-core: #F09BEF; --orb-edge: #9433B5; }
.p7 { --orb-core: #B2F4FF; --orb-edge: #2E93D8; }
.p8 { --orb-core: #86F2AC; --orb-edge: #137F68; }
.p9 { --orb-core: #FFE699; --orb-edge: #C39222; }
.p10 { --orb-core: #D2C4FF; --orb-edge: #6B5BD2; }
.p11 { --orb-core: #A8FFE4; --orb-edge: #3070D4; }
.p-default { --orb-core: #F2F2F4; --orb-edge: #6E6E74; }
/* A card inside a speaker's clip colours its played bars in their palette (owner,
   2026-09-30: "a little speaker colour"). Without a palette above it, the variable is
   invalid and the bars fall back to white. */
.demo-card, .pcard-wave { --wave-tint: color-mix(in srgb, var(--orb-core) 45%, var(--orb-edge)); }
/* Home's orb sits in a faint glow of its own edge colour (owner, 2026-09-30). */
.clip .orb, .home-clip .orb { box-shadow: inset -10px -14px 28px rgba(0,0,0,0.35), 0 0 72px 18px color-mix(in srgb, var(--orb-edge) 18%, transparent); }

.wave { display: block; width: 100%; height: 100%; }
.wave rect { fill: var(--wave-unplayed); }
.wave-played rect { fill: var(--wave-tint, var(--text-primary)); }

/* Buttons: a small tone change on hover and press, nothing that moves. */
.button { transition: background-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease), opacity var(--t-micro) var(--ease); }
.button:hover { opacity: 1; background: var(--raised); }
.button.primary:hover { background: var(--text-secondary); border-color: var(--text-secondary); }
.button:active { opacity: 0.8; }
.button.large { min-height: 56px; padding: 0 28px; font-size: 17px; }
.button.small { min-height: 44px; padding: 0 16px; font-size: 15px; }

.site-header nav { align-items: center; }
.site-header nav .button { color: var(--inverted-label); }

/* ------------------------------------------------------------------ hero */

.landing .hero { padding: 80px 0 72px; border-top: 0; }
.landing .hero .wrap {
  display: grid; gap: 56px; align-items: center;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}
.eyebrow { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--text-tertiary); }
.hero h1 {
  margin: 0 0 20px;
  font-size: clamp(42px, 6.6vw, 72px); line-height: 1.03; font-weight: 650;
  letter-spacing: -0.02em;
}
.hero .lede {
  margin: 0 0 32px; max-width: 30em;
  font-size: 20px; line-height: 1.5; color: var(--text-secondary);
}
.cta-block { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.cta-note { margin: 0; font-size: 15px; color: var(--text-tertiary); }
.howlink { margin: 22px 0 0; font-size: 16px; }
.howlink a { color: var(--text-secondary); text-underline-offset: 4px; }
.howlink a:hover { color: var(--text-primary); }
.trustline { margin: 28px 0 0; padding-top: 16px; border-top: 1px solid var(--hairline); max-width: 34em; font-size: 14px; color: var(--text-tertiary); }

/* The demo: one Home page, as the app draws it, then the next voice, then a reply.
   Its default is the final frame; site.js arms it at the first frame and plays it
   once. Everything moves by transform and opacity only. */
.demo-wrap { justify-self: end; width: 100%; max-width: 360px; }
.demo {
  position: relative;
  border: 1px solid var(--hairline); border-radius: 40px;
  background: var(--ground);
  overflow: hidden;
  aspect-ratio: 360 / 600;
}
.demo-stage { position: absolute; inset: 0; }
.clip {
  position: absolute; inset: 0 0 84px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 22px; text-align: center;
}
.clip .orb { width: 118px; height: 118px; margin-bottom: 26px; }
.clip-title { margin: 0 0 4px; font-size: 21px; line-height: 27px; font-weight: 600; }
.clip-name { margin: 0; font-size: 15px; color: var(--text-secondary); }
.demo-card {
  width: 100%; margin-top: 22px; padding: 12px 14px 14px;
  background: var(--surface); border-radius: 22px; text-align: left;
}
.demo-plays { font-size: 12px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.wave-track { position: relative; height: 48px; margin-top: 8px; }
.wave-track .wave { position: absolute; inset: 0; }
.playhead { position: absolute; inset: 0; pointer-events: none; }
.playhead i { position: absolute; top: -4px; bottom: -4px; left: 0; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--text-primary); }
/* Final frame: Jordan's clip has moved on, Maya's is part-played. */
.wave-a .wave-played { clip-path: inset(0 38% 0 0); }
.wave-a .playhead { transform: translateX(62%); }
.wave-b .wave-played { clip-path: inset(0 55% 0 0); }
.wave-b .playhead { transform: translateX(45%); }
.clip-1 { opacity: 0; transform: translateY(-100%); }

.demo-actions {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  display: flex; gap: 20px; padding: 10px 20px; border-radius: 999px; background: var(--raised);
}
.act { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; }
.act svg { width: 20px; height: 20px; fill: none; stroke: var(--text-primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* The reply count beside the bubble, and ••• for the rest (the app's action bar). */
.act-reply, .act:has(.act-count) { grid-auto-flow: column; width: auto; gap: 3px; }
.act-count { font-size: 12px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.act-more { font-size: 10px; letter-spacing: 1px; color: var(--text-primary); }

.reply-sheet {
  position: absolute; left: 14px; right: 14px; bottom: 82px;
  padding: 14px 16px 12px; border-radius: 22px;
  background: var(--raised); border: 1px solid var(--hairline);
}
.reply-head { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.orb.mini { width: 26px; height: 26px; box-shadow: none; }
.reply-labels { display: grid; }
.reply-labels > span { grid-area: 1 / 1; }
.reply-live { opacity: 0; }
.mic { display: flex; align-items: center; justify-content: space-between; height: 34px; margin: 10px 0 6px; }
.mic .b { display: block; width: 3px; height: 100%; border-radius: 2px; background: var(--text-primary); transform: scaleY(.22); transform-origin: center; }
.mic .h1 { --h: .35; } .mic .h2 { --h: .55; } .mic .h3 { --h: .75; }
.mic .h4 { --h: 1; } .mic .h5 { --h: .6; } .mic .h6 { --h: .45; }
.reply-done { margin: 0; font-size: 13px; color: var(--text-tertiary); }
.reply-done::before { content: "✓ "; color: var(--text-primary); }

/* The timeline (seconds): 0 Jordan settles · .35–1.55 plays · 1.55 the swipe tip (the
   app's own: dimmed, "Swipe up for more", a hand) · 1.85–2.35 a beat to read it, the
   finger presses · 2.35–3.05 the finger draws up, Jordan goes with it and Maya comes in ·
   3.05–4.05 Maya plays · 4.05 Reply pressed · 4.22 recording · 5.50 posted · 5.85 end. */
.demo.is-armed .clip-1,
.demo.is-armed .wave-a .wave-played, .demo.is-armed .wave-a .playhead,
.demo.is-armed .clip-2,
.demo.is-armed .wave-b .wave-played, .demo.is-armed .wave-b .playhead,
.demo.is-armed .act-reply, .demo.is-armed .reply-sheet,
.demo.is-armed .mic .b, .demo.is-armed .reply-live, .demo.is-armed .reply-final,
.demo.is-armed .reply-done, .demo.is-armed .tip, .demo.is-armed .tip-hand {
  animation-play-state: paused;
  animation-fill-mode: both;
  animation-timing-function: var(--ease);
}
.demo.is-playing .clip-1, .demo.is-playing .wave-a .wave-played, .demo.is-playing .wave-a .playhead,
.demo.is-playing .clip-2, .demo.is-playing .wave-b .wave-played, .demo.is-playing .wave-b .playhead,
.demo.is-playing .act-reply, .demo.is-playing .reply-sheet, .demo.is-playing .mic .b,
.demo.is-playing .reply-live, .demo.is-playing .reply-final, .demo.is-playing .reply-done,
.demo.is-playing .tip, .demo.is-playing .tip-hand {
  animation-play-state: running;
}
.demo.is-armed .clip-1 { animation-name: clip-one; animation-duration: 3050ms; }
.demo.is-armed .wave-a .wave-played { animation-name: fill-a; animation-duration: 1200ms; animation-delay: 350ms; animation-timing-function: linear; }
.demo.is-armed .wave-a .playhead { animation-name: head-a; animation-duration: 1200ms; animation-delay: 350ms; animation-timing-function: linear; }
/* The swipe itself: slow enough to follow, eased in and out like a finger. */
.demo.is-armed .clip-2 { animation-name: clip-two; animation-duration: 700ms; animation-delay: 2350ms; animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
.demo.is-armed .wave-b .wave-played { animation-name: fill-b; animation-duration: 1000ms; animation-delay: 3050ms; animation-timing-function: linear; }
.demo.is-armed .wave-b .playhead { animation-name: head-b; animation-duration: 1000ms; animation-delay: 3050ms; animation-timing-function: linear; }
.demo.is-armed .act-reply { animation-name: press; animation-duration: 170ms; animation-delay: 4050ms; }
.demo.is-armed .reply-sheet { animation-name: sheet-in; animation-duration: 200ms; animation-delay: 4220ms; }
.demo.is-armed .reply-live { animation-name: live; animation-duration: 1330ms; animation-delay: 4220ms; }
.demo.is-armed .mic .b { animation-name: talk; animation-duration: 300ms; animation-delay: 4300ms; animation-iteration-count: 4; animation-direction: alternate; animation-timing-function: ease-in-out; }
.demo.is-armed .mic .d1 { animation-delay: 4360ms; }
.demo.is-armed .mic .d2 { animation-delay: 4420ms; }
.demo.is-armed .mic .d3 { animation-delay: 4330ms; }
.demo.is-armed .reply-final { animation-name: appear; animation-duration: 200ms; animation-delay: 5550ms; }
.demo.is-armed .reply-done { animation-name: posted; animation-duration: 300ms; animation-delay: 5500ms; }
.demo.is-armed .tip { animation-name: tip-in-out; animation-duration: 2650ms; animation-timing-function: linear; }
.demo.is-armed .tip-hand { animation-name: tip-hand; animation-duration: 3300ms; animation-timing-function: linear; }

@keyframes clip-one {
  0% { opacity: 0; transform: translateY(0) scale(.96); animation-timing-function: var(--ease); }
  11.5% { opacity: 1; transform: translateY(0) scale(1); }
  77.05% { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  100% { opacity: 1; transform: translateY(-100%); }
}
@keyframes clip-two { from { transform: translateY(100%); } to { transform: translateY(0); } }
/* Dim and caption: in at 1.55–1.85 s, held, out as the finger moves (2.35–2.65 s). */
@keyframes tip-in-out {
  0%, 58.5% { opacity: 0; }
  69.8%, 88.7% { opacity: 1; }
  100% { opacity: 0; }
}
/* The hand: in low at 1.55–1.85 s, presses at 2.1 s, draws up 2.35–3.05 s, lifts away. */
@keyframes tip-hand {
  0%, 47% { opacity: 0; transform: translate(-50%, 0) scale(1); }
  56% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  63.6% { opacity: 1; transform: translate(-50%, 0) scale(.9); animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  92.4% { opacity: 1; transform: translate(-50%, -270px) scale(.9); }
  100% { opacity: 0; transform: translate(-50%, -300px) scale(1); }
}
@keyframes fill-a { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 38% 0 0); } }
@keyframes head-a { from { transform: translateX(0); } to { transform: translateX(62%); } }
@keyframes fill-b { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 55% 0 0); } }
@keyframes head-b { from { transform: translateX(0); } to { transform: translateX(45%); } }
@keyframes press { 0%, 100% { transform: scale(1); background: transparent; } 50% { transform: scale(.88); background: var(--hairline); } }
@keyframes sheet-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes live { 0%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes talk { from { transform: scaleY(.22); } to { transform: scaleY(var(--h)); } }
@keyframes posted { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* The swipe tip, over the first clip: the app's own (dimmed, large caption, a hand). Off
   by default, so the final frame and Reduce Motion never show it. */
.tip {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 34% 24px 0;
  background: rgba(0, 0, 0, .55);
  opacity: 0; pointer-events: none;
}
.tip-caption {
  margin: 0; text-align: center; color: #FFFFFF;
  font-size: 30px; line-height: 1.15; font-weight: 600; letter-spacing: -0.01em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.tip-hand {
  position: absolute; z-index: 3; left: 58%; top: 66%;
  width: 74px; height: auto; fill: #FFFFFF;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .3));
  opacity: 0; pointer-events: none;
  transform-origin: 30% 10%;
}

.replay {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  margin: 12px auto 0; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--hairline); background: transparent; color: var(--text-secondary);
  font: 600 14px/1 var(--font); cursor: pointer;
}
.replay:hover { color: var(--text-primary); background: var(--surface); }
.replay[hidden] { display: none; }
.demo-wrap { display: flex; flex-direction: column; }
.demo-caption { margin: 12px 0 0; text-align: center; font-size: 14px; color: var(--text-tertiary); }

/* ------------------------------------------------------------------ sections */

section { padding: 88px 0; border-top: 1px solid var(--hairline); }
h2 {
  margin: 0 0 16px; max-width: 18em;
  font-size: clamp(30px, 4.4vw, 44px); line-height: 1.1; font-weight: 650; letter-spacing: -0.015em;
}
.section-lede { margin: 0; max-width: 32em; font-size: 19px; color: var(--text-secondary); }
.support { margin: 16px 0 0; max-width: 32em; color: var(--text-secondary); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.wrap.narrow { max-width: 760px; }

/* Listen · Answer · Keep going, on one line of voice. */
.loop-line { height: 56px; margin: 40px 0 0; }
.loop-line svg { display: block; width: 100%; height: 100%; }
.loop-line rect { fill: var(--wave-unplayed); }
.loop-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.loop-steps li { padding-top: 24px; }
.step-orb { width: 36px; height: 36px; margin-bottom: 16px; box-shadow: none; }
.loop-steps h3 { margin: 0 0 6px; font-size: 20px; font-weight: 600; }
.loop-steps p { margin: 0; color: var(--text-secondary); max-width: 20em; }

.limits { margin: 0; border-top: 1px solid var(--hairline); }
.limits div { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--hairline); }
.limits dt { color: var(--text-secondary); }
.limits dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

/* Voice Memos → Share to Saymore → Review → Post */
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; justify-items: start; }
.flow li { display: flex; flex-direction: column; align-items: flex-start; }
.flow li + li::before { content: ""; display: block; width: 1px; height: 20px; margin-left: 24px; background: var(--outline); }
.flow-step {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px;
  border-radius: 999px; background: var(--surface); border: 1px solid var(--hairline);
  font-weight: 600;
}
.flow-step.is-last { background: var(--inverted-fill); color: var(--inverted-label); border-color: var(--inverted-fill); }

.props { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
.props li { padding: 18px 0; border-top: 1px solid var(--hairline); color: var(--text-secondary); }
.props strong { display: block; color: var(--text-primary); font-weight: 600; font-size: 17px; margin-bottom: 2px; }

details { border-top: 1px solid var(--hairline); }
details:last-of-type { border-bottom: 1px solid var(--hairline); }
summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 12px 0; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 17px;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--text-tertiary); font-size: 22px; font-weight: 400; }
details[open] > summary::after { content: "−"; }
summary:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; border-radius: 6px; }
details > p, details > ul { margin: 0 0 18px; color: var(--text-secondary); max-width: 40em; }
details > ul { padding-left: 1.2em; }
details li { margin: 6px 0; }
.trust .more { margin-top: 32px; }

/* Better with your people: three voices, joined. */
.cluster { position: relative; width: 100%; max-width: 360px; aspect-ratio: 3 / 2; justify-self: center; }
.cluster-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.cluster-lines path { fill: none; stroke: var(--outline); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; }
.person { position: absolute; display: grid; place-items: center; transform: translate(-50%, -50%); }
.person .orb { width: 72px; height: 72px; grid-area: 1 / 1; }
.person .initials { grid-area: 1 / 1; font-size: 14px; font-weight: 650; color: #0A0A0B; }
.person.n1 { left: 19.4%; top: 29.2%; }
.person.n2 { left: 77.8%; top: 33.3%; }
.person.n3 { left: 52.8%; top: 79.2%; }

.final { text-align: center; }
.final h2 { margin-left: auto; margin-right: auto; }
.final .cta-block { justify-content: center; flex-direction: column; margin-top: 28px; }

/* Sticky call to action (phones): off screen until the hero's has scrolled away. */
.sticky-cta { display: none; }

/* /join */
.join-orb { width: 96px; height: 96px; margin: 0 auto 28px; }
.center-page .button.large { margin-bottom: 20px; }
.join-needs { font-size: 14px; color: var(--text-tertiary); }

/* The Voice Memos page's hero visual. */
.vm-flow { justify-self: end; padding: 32px; border: 1px solid var(--hairline); border-radius: 32px; width: 100%; max-width: 380px; }
.vm-flow .support { font-size: 15px; }

/* Footer */
.site-footer { border-top: 1px solid var(--hairline); padding: 32px 0 48px; font-size: 14px; color: var(--text-tertiary); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 24px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--text-primary); }

/* Simple pages (support, policies, shared-link fallback) */
.page { padding: 72px 0 96px; }
.page .wrap { max-width: 720px; }
.page h1 { margin: 0 0 16px; font-size: clamp(34px, 5vw, 48px); line-height: 1.1; font-weight: 650; letter-spacing: -0.015em; }
.page h2 { font-size: 22px; margin: 48px 0 8px; }
.page h3 { font-size: 17px; font-weight: 600; margin: 28px 0 4px; }
.page p, .page li { color: var(--text-secondary); }
.page li { margin: 6px 0; }
.page ul { padding-left: 1.2em; }
.page strong { color: var(--text-primary); font-weight: 600; }
.page .lede { font-size: 19px; }
.page .updated { font-size: 14px; color: var(--text-tertiary); margin: 0 0 32px; }
.page .toc { margin: 32px 0 0; padding: 16px 20px; background: var(--surface); border-radius: 16px; list-style: none; }
.page .toc li { margin: 4px 0; }
.page .toc a { text-decoration: none; color: var(--text-secondary); }
.page .toc a:hover { color: var(--text-primary); }
.page table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; }
.page th, .page td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--hairline); color: var(--text-secondary); }
.page th { color: var(--text-primary); font-weight: 600; }

.center-page {
  min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center; text-align: center; padding: 32px var(--gutter);
}
.center-page main { max-width: min(26em, 100%); }
.center-page .icon { width: 88px; height: 88px; border-radius: 20px; display: block; margin: 0 auto 28px; }
.center-page h1 { margin: 0 0 12px; font-size: 28px; line-height: 34px; font-weight: 600; }
.center-page p { margin: 0 0 28px; color: var(--text-secondary); }
.center-page .wordmark { margin-top: 40px; font-size: 16px; }

/* A shared post's page: the speaker's orb, the title, the name. */
.share-page .orb { width: 120px; height: 120px; margin: 0 auto 32px; }
/* The soundwave logo on shared-link pages (owner, 2026-09-30), in place of the grey orb. */
.share-page .share-logo { display: block; width: 180px; height: 180px; margin: -12px auto 8px; }
/* The bars are near-white: on the light ground they sit on their own near-black tile. */
@media (prefers-color-scheme: light) {
  .share-page .share-logo { background: #0B0B0D; border-radius: 40px; }
}
.share-page h1 { font-size: 26px; line-height: 32px; overflow-wrap: anywhere; }
.share-page .share-speaker { margin: -4px 0 16px; color: var(--text-primary); font-weight: 600; }
.share-page .share-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.share-page [hidden] { display: none; }

/* ------------------------------------------------------------------ home (2026-09-29)

   The landing page as four moments and an ask: one idea per screen, the product large.
   Scoped to body.home so the Voice Memos page keeps the shared styles above. */

:root { --field-error: #FF8A80; }
@media (prefers-color-scheme: light) { :root { --field-error: #C2413A; } }

/* A roomier top bar with a slightly smaller button, so it doesn't sit tight to the top. */
.home .site-header { border-bottom: 0; }
.home .site-header .wrap { min-height: 88px; padding-top: 8px; }
.home .site-header .button.small { min-height: 40px; padding: 0 18px; font-size: 15px; }
.home section { border-top: 0; }
.home .hero { padding: 64px 0 112px; }
.home .hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
.home .hero h1 { font-size: clamp(50px, 8.4vw, 96px); line-height: 0.98; letter-spacing: -0.03em; margin-bottom: 24px; }
.home .hero .lede { max-width: 22em; font-size: 21px; }
.home .hero .cta-block { gap: 12px; }
.home .hero .cta-note { margin-top: 18px; }
.home .demo-wrap { width: auto; max-width: none; justify-self: center; align-items: center; }
.home .button.primary { font-weight: 700; }

/* Hear it: a short clip, played in place. */
.listen {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 0 22px 0 10px;
  border-radius: 999px; border: 1px solid var(--control-outline);
  background: transparent; color: var(--text-primary);
  font: 600 17px/1 var(--font); cursor: pointer;
  transition: background-color var(--t-micro) var(--ease);
}
.listen:hover { background: var(--raised); }
.listen:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 3px; }
.listen-orb { width: 36px; height: 36px; box-shadow: none; }
.listen-disc { position: relative; display: grid; }
.listen-icon { position: absolute; inset: 0; display: grid; place-items: center; }
.listen-icon svg { grid-area: 1 / 1; width: 14px; height: 14px; fill: #0A0A0B; }
.listen .i-pause, .listen.is-playing .i-play { display: none; }
.listen.is-playing .i-pause { display: block; }
.listen-time { color: var(--text-tertiary); font-weight: 500; font-variant-numeric: tabular-nums; }
.listen-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }
.listen-bar i { display: block; height: 100%; background: var(--text-primary); transform-origin: left; transform: scaleX(var(--p, 0)); }
.listen.is-playing .listen-orb { animation: speak 900ms ease-in-out infinite alternate; }

/* A moment: the words on one side, a large phone on the other, alternating. */
.moment { padding: 112px 0; }
.moment-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.moment.reverse .moment-copy { order: 2; }
.moment h2, .join h2 { font-size: clamp(38px, 5.6vw, 62px); line-height: 1.02; letter-spacing: -0.025em; margin-bottom: 20px; }
.moment-lede { margin: 0; max-width: 24em; font-size: 20px; line-height: 1.5; color: var(--text-secondary); }
.moment-aside { margin: 20px 0 0; font-size: 15px; color: var(--text-tertiary); }

.phone { justify-self: center; }
/* The speaker's colour, glowing softly behind the phone. */
.phone::before {
  content: ""; position: absolute; inset: -18% -30%; z-index: -1;
  background: radial-gradient(closest-side, var(--glow), transparent);
  opacity: .22; pointer-events: none;
}
.glow-3 { --glow: #E0861F; }
.glow-6 { --glow: #9433B5; }
.glow-0 { --glow: #2159E0; }
.phone-screen { display: flex; flex-direction: column; padding-top: 50.4px; }
.screen-tab { margin: 3.6px 0 0; text-align: center; font-size: 15px; font-weight: 600; color: var(--text-secondary); }

/* A device: iPhone 17/18 Pro proportions (71.5 × 149.6 mm), its screen's corner curve,
   a thin titanium edge, the black bezel, the Dynamic Island, the status bar, the home
   indicator, and the side buttons, all drawn in CSS. Inside, every measure is in px on
   the 360 px design width, and the whole device is scaled with zoom, so it keeps its
   shape at any size. (Not container units: Safari applies zoom to those twice, which
   shrank the status bar, island, and corners on iPhones.) The frame's own corners are
   percentages of its width and height. */
.device {
  position: relative; isolation: isolate;
  /* Designed at 360 wide, then scaled whole (zoom), so the type and cards inside shrink
     with it. The scale steps down with the window's height, so a phone always fits on
     screen, near BeReal's scale on a laptop. */
  width: 360px; zoom: var(--device-zoom, .9);
  aspect-ratio: 71.5 / 149.6;
  border: 0; border-radius: 16% / 7.65%;
  background: #050506;
  box-shadow:
    inset 0 0 0 1px #34343a,
    0 0 0 1.5px #18181b,
    0 0 0 2.5px #56565d,
    0 44px 110px -24px rgba(0, 0, 0, .65);
}
.device .phone-screen, .device .demo-stage {
  position: absolute; inset: 11.16px;
  border-radius: 46.44px; overflow: hidden;
  background: var(--ground);
}
/* The Dynamic Island, and the home indicator. */
.device .phone-screen::before, .device .demo-stage::before {
  content: ""; position: absolute; z-index: 4; top: 10.44px; left: 50%;
  width: 104.4px; height: 30.24px; transform: translateX(-50%);
  border-radius: 999px; background: #000;
}
.device .phone-screen::after, .device .demo-stage::after {
  content: ""; position: absolute; z-index: 4; bottom: 7.56px; left: 50%;
  width: 129.6px; height: 4.86px; transform: translateX(-50%);
  border-radius: 999px; background: var(--text-primary); opacity: .85;
}
.status {
  position: absolute; z-index: 5; top: 0; left: 0; right: 0; height: 51.12px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 27.36px 0 36px;
  font-size: 15.48px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.status-icons { display: flex; align-items: center; gap: 5.4px; }
.status svg { display: block; height: 11.16px; width: auto; fill: currentColor; }
.status .i-battery { height: 11.88px; }
.i-battery .shell { fill: none; stroke: currentColor; stroke-opacity: .4; }
.i-battery .nub { fill-opacity: .4; }
.device-buttons i {
  position: absolute; width: 3.6px; border-radius: 3.6px;
  background: linear-gradient(to right, #45454c, #1e1e22);
}
.device-buttons .b-action { left: -3.06px; top: 17%; height: 25.2px; }
.device-buttons .b-vol-up { left: -3.06px; top: 23.5%; height: 46.8px; }
.device-buttons .b-vol-down { left: -3.06px; top: 33%; height: 46.8px; }
.device-buttons .b-power { right: -3.06px; top: 25.5%; height: 72px; background: linear-gradient(to left, #45454c, #1e1e22); }
.device-buttons .b-camera { right: -2.7px; top: 55%; height: 43.2px; width: 3.06px; background: linear-gradient(to left, #45454c, #1e1e22); }
@media (prefers-color-scheme: light) {
  .device {
    box-shadow:
      inset 0 0 0 1px #2a2a2e,
      0 0 0 1.5px #b9b9bf,
      0 0 0 2.5px #e4e4e8,
      0 40px 90px -24px rgba(0, 0, 0, .25);
  }
  .device-buttons i { background: linear-gradient(to right, #d4d4d9, #a9a9b0); }
  .device-buttons .b-power, .device-buttons .b-camera { background: linear-gradient(to left, #d4d4d9, #a9a9b0); }
}

@media (max-height: 1000px) { .home { --device-zoom: .78; } }
@media (max-height: 860px) { .home { --device-zoom: .7; } }
@media (max-height: 740px) { .home { --device-zoom: .6; } }
@media (max-height: 620px) { .home { --device-zoom: .52; } }

/* The hero's demo, in the same device. */
/* Its own corners, pinned: an older narrow-screen rule rounds .demo at 32 px, which
   squared the hero phone on iPhones. */
.demo.device { overflow: visible; border-radius: 16% / 7.65%; }
.device .clip { inset: 43.2px 0 150px; }
.device .demo-actions { bottom: calc(19.8px + 72px); }
.device .reply-sheet { bottom: calc(19.8px + 130px); }

/* Home: one voice, playing. */
.home-clip { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 22px; text-align: center; }
.home-clip .orb { width: 142px; height: 142px; margin-bottom: 28px; }
.home-actions { position: static; transform: none; width: max-content; margin: 0 auto 43.2px; }
/* Now Playing's transport (the app's player, Design 2 §8): speed, −15, play/pause, +15,
   AirPlay, then Open discussion. The screen's top and bottom edges carry the speaker's
   colour at 14 % (owner, 2026-09-30). */
.screen-home .player-view {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--orb-edge, #6E6E74) 14%, var(--ground)) 0, var(--ground) 200px, var(--ground) calc(100% - 200px), color-mix(in srgb, var(--orb-edge, #6E6E74) 14%, var(--ground)) 100%)
    var(--ground);
}
.np-transport { display: flex; align-items: center; justify-content: center; gap: 24px; margin: 0 auto 16px; }
.np-speed { min-width: 34px; text-align: center; font-size: 15px; font-weight: 600; color: var(--text-primary); }
.np-skip { position: relative; width: 34px; height: 34px; }
.np-skip svg { width: 34px; height: 34px; fill: none; stroke: var(--text-primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.np-skip b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--text-primary); }
.np-play { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--inverted-fill); }
.np-play svg { width: 24px; height: 24px; fill: var(--inverted-label); }
.np-air svg { width: 26px; height: 26px; fill: none; stroke: var(--text-primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.np-open { margin: 0 auto 43.2px; text-align: center; font-size: 14px; font-weight: 600; color: var(--text-secondary); }
/* The player her post pulls up: full screen over the profile and the tab bar, as the
   app's Now Playing is. Off screen below until then. */
.screen-home .player-view {
  position: absolute; inset: 0; z-index: 3; padding-top: 50.4px;
  display: flex; flex-direction: column;
  background: var(--ground); transform: translateY(100%);
}

/* The app's tab bar: four drawn icons, no titles, on a floating glass capsule (iOS 26). */
.tabbar {
  position: absolute; z-index: 3; left: 18px; right: 18px; bottom: 19.8px; height: 58px;
  display: flex; align-items: center; justify-content: space-around; padding: 0 7px;
  /* The system's Liquid Glass bar, with no added edge (owner, 2026-09-30). */
  border-radius: 999px;
  background: rgba(30, 30, 34, .78);
  -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.tabbar i { flex: 1; height: 44px; display: grid; place-items: center; border-radius: 999px; }
.tabbar i.is-on { background: rgba(255, 255, 255, .1); }
.tabbar svg { width: 25px; height: 25px; fill: none; stroke: var(--text-primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .5; }
.tabbar .is-on svg { opacity: 1; }
@media (prefers-color-scheme: light) {
  .tabbar { background: rgba(248, 248, 250, .82); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
  .tabbar i.is-on { background: rgba(0, 0, 0, .06); }
}

/* Priya's profile, pushed in from Home when her name is tapped. */
.profile-view {
  position: absolute; inset: 0; z-index: 2; padding: 50.4px 18px 0;
  /* The person's edge colour at 16 %, fading out by the name (owner, 2026-09-30). */
  background: linear-gradient(180deg, color-mix(in srgb, var(--orb-edge, #6E6E74) 16%, var(--ground)) 0, var(--ground) 170px) var(--ground);
  text-align: center;
}
.profile-back { position: absolute; top: calc(50.4px + 4px); left: 16px; width: 11px; height: 19px; fill: none; stroke: var(--text-primary); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.profile-photo { display: block; width: 80px; height: 80px; margin: 12px auto 12px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px #C9CCD2; }
.profile-name { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 0; font-size: 20px; font-weight: 650; }
.verified { width: 18px; height: 18px; flex: none; }
.verified .seal { fill: #3D9BFF; stroke: #3D9BFF; stroke-width: 1.6; stroke-linejoin: round; }
.verified .check { fill: none; stroke: #FFFFFF; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-color-scheme: light) { .verified .seal { fill: #0A66D9; stroke: #0A66D9; } }
.profile-handle { margin: 2px 0 0; font-size: 13px; color: var(--text-tertiary); }
.profile-bio { margin: 8px 6px 0; font-size: 14px; line-height: 1.4; color: var(--text-secondary); }
.profile-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; }
.profile-counts span { display: flex; flex-direction: column; font-size: 12px; color: var(--text-tertiary); }
.profile-counts b { font-size: 16px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.profile-actions { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.pill-follow { min-width: 128px; padding: 11px 0; border-radius: 999px; background: var(--inverted-fill); color: var(--inverted-label); font-size: 15px; font-weight: 600; }
.pill-more { display: grid; place-items: center; width: 41px; height: 41px; border-radius: 50%; background: var(--raised); font-size: 11px; letter-spacing: 1px; }
.profile-tabs { display: flex; justify-content: space-around; margin: 18px -18px 0; border-bottom: 1px solid var(--hairline); font-size: 14px; font-weight: 600; color: var(--text-tertiary); }
.profile-tabs span { padding: 10px 6px; }
.profile-tabs .is-on { color: var(--text-primary); box-shadow: inset 0 -2px 0 var(--text-primary); }
/* Her posts, as the app draws a post card: photo with a play/pause badge, title, handle
   and plays, age; then the waveform panel with elapsed and remaining time. */
.pcard { padding: 14px 0 4px; text-align: left; }
.pcard-head { display: flex; align-items: flex-start; gap: 10px; }
.pcard-avatar { position: relative; flex: none; width: 40px; height: 40px; }
.pcard-avatar img { display: block; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.pcard-badge {
  position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px;
  display: grid; place-items: center; border-radius: 50%;
  background: #0A0A0B; box-shadow: 0 0 0 1.5px #FFFFFF;
}
.pcard-badge svg { width: 9px; height: 9px; fill: #FFFFFF; }
.pcard-text { flex: 1; min-width: 0; }
.pcard-text strong { display: block; font-size: 16px; line-height: 1.25; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard-text em { display: block; font-style: normal; font-size: 13px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.pcard-age { flex: none; font-size: 14px; color: var(--text-tertiary); }
.pcard-wave { margin-top: 10px; padding: 12px 12px 10px; border-radius: 18px; background: var(--surface); }
.pcard-track { position: relative; height: 44px; }
.pcard-track .pw { position: absolute; inset: 0; width: 100%; height: 100%; }
.pcard-track .pw rect { fill: var(--wave-unplayed); }
.pcard-track .pw-played { clip-path: inset(0 33% 0 0); }
.pcard-track .pw-played rect { fill: var(--wave-tint, var(--text-primary)); }
.pcard-playhead { position: absolute; top: -5px; bottom: -5px; left: 67%; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--text-primary); }
.pcard-times { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pcard-elapsed { padding: 4px 10px; border-radius: 999px; background: var(--raised); color: var(--text-primary); }
.pcard-left { color: var(--text-tertiary); }

/* Her first post: tapped, then showing where she left off once the player closes. */
.pcard-first { position: relative; }
.pcard-first .pw-played { clip-path: inset(0 45% 0 0); opacity: 0; }
.pcard-first .pcard-playhead { left: 55%; opacity: 0; }
.pcard-badge svg { grid-area: 1 / 1; }
.pcard-badge .b-pause, .t-after { opacity: 0; }
.pcard-elapsed, .pcard-left { display: inline-grid; }
.pcard-elapsed > span, .pcard-left > span { grid-area: 1 / 1; }
.pcard-left > span { text-align: right; }

/* The tap: the same hand as the swipe tip, fingertip on her post's waveform. */
.tap-hand {
  position: absolute; z-index: 1; left: calc(56% - 20px); top: 58%; width: 54px; height: auto;
  fill: #FFFFFF; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .35));
  opacity: 0; pointer-events: none; transform-origin: 30% 5%;
}
.loop-track .wave-played { clip-path: inset(0 58% 0 0); }
.loop-track .playhead { transform: translateX(42%); }

/* Reply: you, recording. */
.reply-to { display: flex; align-items: center; gap: 10px; margin: 7.2px 16px 0; padding: 12px 14px; border-radius: 18px; background: var(--surface); }
.reply-to strong { display: block; font-size: 14px; }
.reply-to em { display: block; font-style: normal; font-size: 13px; color: var(--text-tertiary); }
.you { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.you .orb { width: 132px; height: 132px; }
.you-label { margin: 18px 0 0; font-size: 17px; font-weight: 600; }
.mic-big { width: 76%; height: 44px; margin: 22px 0 10px; }
.mic-big .b { transform: scaleY(var(--h)); }
.rec-time { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.rec-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rec); }
.rec-controls { display: flex; align-items: center; justify-content: space-between; padding: 0 30px 36px; }
.rec-side { font-size: 15px; font-weight: 600; color: var(--text-secondary); }
.rec-button { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; border: 3px solid var(--text-primary); }
.rec-button i { width: 26px; height: 26px; border-radius: 7px; background: var(--rec); }

/* Share: a Voice Memo, and Saymore in the share sheet. */
.memo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 16px; padding: 14px 4px; border-bottom: 1px solid var(--hairline); }
.memo:first-of-type { margin-top: 14px; }
.memo strong { display: block; font-size: 15px; font-weight: 600; }
.memo em { display: block; font-style: normal; font-size: 13px; color: var(--text-tertiary); }
.memo-len { font-size: 14px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.memo.is-picked { padding: 14px 12px; border-radius: 14px; border-bottom-color: transparent; background: var(--surface); }
.share-sheet { margin-top: auto; padding: 10px 16px 32.4px; border-radius: 28px 28px 0 0; border-top: 1px solid var(--hairline); background: var(--raised); }
.sheet-handle { display: block; width: 36px; height: 5px; margin: 0 auto 14px; border-radius: 3px; background: var(--outline); }
.sheet-title { margin: 0 0 18px; text-align: center; font-size: 15px; font-weight: 600; }
.sheet-apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; text-align: center; font-size: 11px; color: var(--text-secondary); }
.app { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.app-icon { display: block; width: 52px; height: 52px; border-radius: 13px; background: var(--hairline); }
.is-saymore { color: var(--text-primary); font-weight: 600; }
.is-saymore .app-icon { box-shadow: 0 0 0 2px var(--raised), 0 0 0 4px var(--text-primary); }
.flow-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; margin-top: 32px; }
.flow-row li { flex-direction: row; align-items: center; }
.flow-row li + li::before { content: "→"; display: inline; width: auto; height: auto; margin: 0 8px 0 0; background: none; color: var(--text-tertiary); }

/* The ask. */
.join { padding: 112px 0 136px; scroll-margin-top: 24px; }
.join-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 72px; align-items: start; }
.founder { display: flex; align-items: flex-start; gap: 16px; max-width: 30em; margin: 40px 0 0; }
.founder-orb { width: 44px; height: 44px; box-shadow: none; }
.founder blockquote { margin: 0; font-size: 17px; color: var(--text-secondary); }
.join-panel { position: relative; padding: 28px; border: 1px solid var(--hairline); border-radius: 28px; background: var(--surface); }
.field { margin-bottom: 18px; }
.field label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 600; }
.optional { font-weight: 400; color: var(--text-tertiary); }
.field input, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 16px;
  border: 1px solid var(--hairline); border-radius: 14px;
  background: var(--ground); color: var(--text-primary);
  font: 400 17px/1.4 var(--font);
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--text-primary); outline-offset: 1px; border-color: transparent; }
.field [aria-invalid="true"] { border-color: var(--field-error); }
.field-help { margin: 8px 0 0; font-size: 13px; color: var(--text-tertiary); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.join-form .button { width: 100%; }
.join-form .button[disabled] { opacity: .6; cursor: progress; }
.form-status { min-height: 1.4em; margin: 12px 0 0; font-size: 14px; color: var(--text-secondary); }
.form-status.is-error { color: var(--field-error); }
.form-status a { color: var(--text-primary); }
.form-note { margin: 10px 0 0; font-size: 13px; color: var(--text-tertiary); }
.join-done { padding: 12px 0; text-align: center; }
.join-done[hidden] { display: none; }
.join-done:focus { outline: none; }
.join-done h3 { margin: 0 0 8px; font-size: 22px; font-weight: 650; }
.join-done p { margin: 0; color: var(--text-secondary); }
.done-orb { width: 72px; height: 72px; margin: 0 auto 20px; }
.join-panel.is-done .join-form { display: none; }
.join-open { display: none; text-align: center; }
.join-open .button { width: 100%; }
[data-mode="public_testflight"] .join-form { display: none; }
[data-mode="public_testflight"] .join-open { display: block; }

/* /join on its own. */
.join-page { max-width: 500px; margin: 0 auto; padding: 40px var(--gutter) 80px; }
.join-page > .wordmark { margin-bottom: 48px; }
.join-page h1 { margin: 0 0 14px; font-size: clamp(38px, 8vw, 54px); line-height: 1.04; font-weight: 650; letter-spacing: -0.025em; }
.join-page .moment-lede { margin-bottom: 28px; }
.join-page .join-panel { display: flex; flex-direction: column; }
.join-done h2 { margin: 0 0 8px; font-size: 22px; font-weight: 650; }
.join-problem { display: none; order: -1; margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--hairline); }
.join-problem p { margin: 0 0 14px; color: var(--field-error); }
.join-problem .button { width: 100%; }
[data-state="problem"] .join-problem { display: block; }
[data-state="sent"] .join-form { display: none; }

/* Moments settle in once, as they arrive. Without JavaScript they are simply there. */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* Gentle life in the phones: breathing, playing, talking. Off with Reduce Motion. */
@media (prefers-reduced-motion: no-preference) {
  .breathe { animation: breathe 4800ms ease-in-out infinite alternate; }
  /* One run per .is-playing; site.js replays it after a 4 s rest while it's on screen. */
  .is-playing .loop-track .wave-played { animation: hear-fill 12s linear both; }
  .is-playing .loop-track .playhead { animation: hear-head 12s linear both; }
  .is-playing .screen-home .player-view { animation: hear-player 12s linear both; }
  .is-playing .tap-hand { animation: hear-hand 12s linear both; }
  .is-playing .pcard-first { animation: hear-press 12s linear both; }
  .is-playing .pcard-first .pw-played, .is-playing .pcard-first .pcard-playhead, .is-playing .pcard-badge .b-pause, .is-playing .pcard-first .t-after { animation: hear-after 12s linear both; }
  .is-playing .pcard-badge .b-play, .is-playing .pcard-first .t-start { animation: hear-before 12s linear both; }
  .speaking { animation: speak 900ms ease-in-out infinite alternate; }
  .mic-big .b { animation: talk-loop 520ms ease-in-out infinite alternate; }
  .mic-big .d1 { animation-delay: -130ms; }
  .mic-big .d2 { animation-delay: -260ms; }
  .mic-big .d3 { animation-delay: -390ms; }
  .rec-dot { animation: blink 1200ms steps(2, jump-none) infinite; }
  .is-saymore .app-icon { animation: pick 2400ms ease-in-out infinite; }
}
@keyframes breathe { from { transform: scale(1); } to { transform: scale(1.035); } }
@keyframes speak { from { transform: scale(1); } to { transform: scale(1.05); } }
/* 0–2.5 s her profile · 2.5 the hand arrives · 3.3 taps her first post · 3.5–4.1 the
   player slides up and plays · 10.0–10.6 it slides away · her post now shows where she
   left off · 11.6–12 it settles back for the next loop. */
@keyframes hear-player {
  0%, 29.2% { transform: translateY(100%); animation-timing-function: cubic-bezier(.3, .7, .2, 1); }
  34.2%, 83.3% { transform: none; animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  88.3%, 100% { transform: translateY(100%); }
}
@keyframes hear-fill {
  0%, 34.2% { clip-path: inset(0 100% 0 0); }
  83.3%, 100% { clip-path: inset(0 45% 0 0); }
}
@keyframes hear-head {
  0%, 34.2% { transform: translateX(0); }
  83.3%, 100% { transform: translateX(55%); }
}
@keyframes hear-hand {
  0%, 20.8% { opacity: 0; transform: translateY(18px); }
  25%, 26.7% { opacity: 1; transform: none; }
  28% { opacity: 1; transform: scale(.88); }
  29% { opacity: 1; transform: none; }
  31%, 100% { opacity: 0; transform: none; }
}
@keyframes hear-press {
  0%, 26.7% { opacity: 1; }
  28% { opacity: .5; }
  29.5%, 100% { opacity: 1; }
}
@keyframes hear-after {
  0%, 86% { opacity: 0; }
  86.1%, 96% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes hear-before {
  0%, 86% { opacity: 1; }
  86.1%, 96% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes talk-loop { from { transform: scaleY(.2); } to { transform: scaleY(var(--h)); } }
@keyframes blink { from { opacity: 1; } to { opacity: .25; } }
@keyframes pick { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

@media (max-width: 860px) {
  .home .hero { padding: 40px 0 72px; }
  .home .hero .wrap, .moment-grid, .join-grid { grid-template-columns: 1fr; gap: 40px; }
  .moment { padding: 64px 0; }
  .moment.reverse .moment-copy { order: 0; }
  .join { padding: 72px 0 96px; }
}
/* Phones (owner, 2026-09-29): centred, calmer type, and small whole devices, so the hero
   (words, button, and phone) fits in the first screen, as BeReal's does. Desktop and
   tablet are untouched: everything here is under 600 px wide. */
@media (max-width: 600px) {
  .home { --device-zoom: .5; }
  /* The hero is only the headline, its line, the button, and the phone, all in view. */
  .home .demo-wrap { --device-zoom: .44; }
  /* The section phones' glow, behind the hero's too: Jordan's blue, who it opens on. */
  .home .demo.device::before {
    content: ""; position: absolute; inset: -18% -30%; z-index: -1;
    background: radial-gradient(closest-side, #2159E0, transparent);
    opacity: .22; pointer-events: none;
  }
  .home .hero .eyebrow, .home .hero .cta-note, .home .hero .cta-block { display: none; }

  .home .site-header .wrap { min-height: 64px; padding-top: 4px; }
  .home .site-header .button.small { min-height: 36px; padding: 0 14px; font-size: 14px; }

  .home .hero { padding: 12px 0 48px; text-align: center; }
  .home .hero .wrap { gap: 22px; }
  .home .hero .eyebrow { font-size: 13px; margin-bottom: 10px; }
  .home .hero h1 { font-size: 34px; line-height: 1.1; letter-spacing: -0.015em; margin-bottom: 12px; }
  .home .hero .lede { font-size: 16px; max-width: 21em; margin: 0 auto; }
  /* Even lines, and no word left alone on the last one ("said."). */
  .home h1, .moment h2, .join h2 { text-wrap: balance; }
  .home .hero .lede, .moment-lede { text-wrap: pretty; }
  .home .cta-block { justify-content: center; }
  .home .cta-block .button.large { width: auto; min-height: 50px; padding: 0 28px; font-size: 16px; }
  .home .cta-block .listen { width: 100%; justify-content: center; }
  .home .hero .cta-note { margin-top: 12px; font-size: 13px; }

  .moment { padding: 56px 0; }
  .moment-grid { gap: 28px; }
  .moment-copy { text-align: center; }
  .moment h2, .join h2 { font-size: 30px; line-height: 1.08; letter-spacing: -0.02em; margin: 0 auto 12px; }
  .moment-lede { font-size: 16px; margin: 0 auto; max-width: 22em; }
  .moment-aside { font-size: 13px; margin-top: 12px; }
  .flow-row { display: none; }

  .join { padding: 56px 0 88px; }
  .join-grid { gap: 28px; }
  .join-copy { text-align: center; }
  .join .moment-lede { margin: 0 auto; }
  .founder { display: none; }
  .join-panel { padding: 22px; }
}

/* Narrow screens: one column, copy first, then the demo. */
@media (max-width: 860px) {
  .landing .hero { padding: 48px 0 56px; }
  .landing .hero .wrap, .split { grid-template-columns: 1fr; gap: 40px; }
  .demo-wrap, .vm-flow { justify-self: center; }
  .loop-steps { grid-template-columns: 1fr; gap: 0; }
  .loop-steps li { padding: 20px 0; border-top: 1px solid var(--hairline); }
  .loop-steps li:first-child { border-top: 0; }
  .props { grid-template-columns: 1fr; }
  section { padding: 64px 0; }
}
@media (max-width: 760px) {
  .js .sticky-cta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
    padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
    background: var(--ground); border-top: 1px solid var(--hairline);
    transform: translateY(110%); opacity: 0;
    transition: transform var(--t-state) var(--ease), opacity var(--t-state) var(--ease);
  }
  .js .sticky-cta.is-visible { transform: translateY(0); opacity: 1; }
  .sticky-cta .button { width: 100%; }
  /* Room so the bar never covers the end of the page or a focused control. */
  .js .landing { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .js { scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .cta-block .button.large { width: 100%; }
}
@media (max-width: 480px) {
  :root { --gutter: 16px; }
  .nav-optional { display: none; }
  .site-header nav { gap: 16px; font-size: 14px; }
  .hero .lede { font-size: 18px; }
  .demo { border-radius: 32px; }
  .clip-title { font-size: 19px; line-height: 25px; }
}
@media (max-width: 340px) {
  .site-header nav a:not(.button) { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}