/* home.css
   Landing page, "Amphitheatre header — Fresh" design (claude.ai/design).
   Static styling lives here; home.jsx only sets the values it has to measure
   (card size, crowd band, demo pop-out) as inline styles. */

/* ── tokens: the design's resolved "sand & sea" palette ───────────────── */
/* Paper and black are the fixed spine; the palette only colours accents. */
:root {
  --c-bg: #FFFFFB;
  --c-panel: #FFFFFB;
  --c-chrome: #FFFFFB;
  --c-ink: #000000;
  --c-line: #2B2B29;
  --c-primary: #2A9D8F;
  --c-secondary: #E76F51;
  --c-accent: #E9C46A;
  --c-shape-1: #2A9D8F;
  --c-shape-2: #E76F51;
  --c-shape-3: #E9C46A;
  --c-shape-4: #264653;
  --c-shape-5: #F4A261;
  /* primary pulled toward ink until its label clears AA (4.7:1) */
  --c-primary-solid: #24857A;
  --c-on: #000000;
  --c-cta: #FFB703;
  --f-body: 'Poppins', sans-serif;
  --swatch-h: 0px;
  --mute-66: color-mix(in srgb, var(--c-ink) 66%, transparent);
  --mute-72: color-mix(in srgb, var(--c-ink) 72%, transparent);
  --mute-74: color-mix(in srgb, var(--c-ink) 74%, transparent);
  --mute-78: color-mix(in srgb, var(--c-ink) 78%, transparent);
  --mute-84: color-mix(in srgb, var(--c-ink) 84%, transparent);
  --rule: color-mix(in srgb, var(--c-ink) 13%, transparent);
}

html { scroll-behavior: auto; }
body { margin: 0; padding: 0 clamp(14px, 3.5vw, 150px); background: var(--c-bg); color: var(--c-ink);
  font-family: 'Geist', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--c-primary); }
a:hover { color: var(--c-secondary); }
.px { image-rendering: pixelated; display: block; }

@keyframes wfPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes wfNudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes heroNav { from { opacity: 0; } to { opacity: 1; } }
@keyframes pitchFloat {
  0%, 100% { transform: perspective(1400px) rotateY(-22deg) rotateX(11deg) translate3d(0, 0, 0); }
  50% { transform: perspective(1400px) rotateY(-20deg) rotateX(10deg) translate3d(-0.3cqw, -0.6cqh, 0); }
}
@keyframes heroExit {
  from { transform: rotateX(11deg) translateX(0); opacity: 1; }
  to { transform: rotateX(7deg) translateX(82vw); opacity: .06; }
}
@keyframes heroPill { from { opacity: 1; transform: translateY(0); } 25%, to { opacity: 0; transform: translateY(60px); } }
@media (prefers-reduced-motion: reduce) { [data-el="pitch-art"] { animation: none !important; } }

/* scroll-driven, no JS in the scroll path. Declared here rather than inline:
   a React-written `animation` shorthand resets animation-timeline to auto. */
@supports (animation-timeline: scroll(root block)) {
  [data-el="crowd"] { animation: heroExit 1s linear both; animation-timeline: scroll(root block); animation-range: 30vh 80vh; }
  [data-el="hint"] { animation: heroPill 1s linear both; animation-timeline: scroll(root block); animation-range: 30vh 80vh; }
  .nav-bg { animation: heroNav 1s linear both; animation-timeline: scroll(root block); animation-range: 0 40px; }
}
/* no scroll timelines (Safari/Firefox today): the bar is solid once the page scrolls */
@supports not (animation-timeline: scroll(root block)) {
  .nav-bg { transition: opacity .2s ease; }
  [data-stuck="1"] .nav-bg { opacity: 1; }
}

/* ── fixed nav ─────────────────────────────────────────────────────────── */
.nav { position: fixed; top: var(--swatch-h); left: 0; right: 0; z-index: 50; }
.nav-bg { position: absolute; inset: 0; background: #FFFFFB; border-bottom: 2px solid var(--c-line);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--c-ink) 8%, transparent); opacity: 0; pointer-events: none; }
.nav-inner { position: relative; max-width: 1860px; margin: 0 auto; transition: padding .2s ease;
  display: flex; align-items: center; justify-content: space-between; gap: clamp(14px, 1.5vw, 26px); flex-wrap: wrap; }
.nav-brand { display: flex; align-items: center; gap: clamp(10px, 1vw, 16px); color: inherit; text-decoration: none; }
.nav-brand:hover { color: inherit; }
.nav-brand img { width: clamp(26px, 2.1vw, 36px); height: clamp(26px, 2.1vw, 36px); }
.nav-brand span { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: clamp(19px, 1.5vw, 25px); }
.nav-links { display: flex; align-items: center; gap: clamp(20px, 2.2vw, 36px); }
.nav-link { cursor: pointer; color: inherit; text-decoration: none; display: inline-flex; align-items: center;
  gap: clamp(8px, .7vw, 12px); font-size: clamp(14px, .95vw, 17px); font-weight: 500; }
.nav-link:hover { color: var(--c-primary); }
.nav-link img { width: clamp(19px, 1.4vw, 25px); height: clamp(19px, 1.4vw, 25px); }
.nav-actions { display: flex; align-items: center; gap: clamp(10px, 1vw, 16px); }
.nav-burger { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 44px; height: 44px;
  padding: 0 10px; box-sizing: border-box; border: 2px solid var(--c-line); border-radius: 4px;
  background: var(--c-panel); cursor: pointer; appearance: none; }
.nav-burger i { display: block; height: 2px; background: var(--c-ink); }
.nav-btn { padding: clamp(8px, .65vw, 12px) clamp(16px, 1.35vw, 26px); border: 2px solid var(--c-line); border-radius: 4px;
  display: inline-flex; align-items: center; gap: clamp(8px, .7vw, 12px); font-size: clamp(14px, .92vw, 17px);
  font-weight: 600; text-decoration: none; color: var(--c-ink); }
.nav-btn:hover { color: var(--c-ink); }
.nav-btn img { width: clamp(18px, 1.25vw, 22px); height: clamp(18px, 1.25vw, 22px); }
.nav-login { background: var(--c-panel); }
.nav-install { background: var(--c-cta); color: var(--c-on); }
.nav-start { display: none; padding: 8px 14px; border: 2px solid var(--c-line); border-radius: 4px; color: var(--c-on);
  text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; background: var(--c-cta); }
.menu-panel { position: absolute; left: 0; right: 0; top: 100%; padding: 6px clamp(14px, 3.5vw, 22px) 20px;
  background: var(--c-panel); border-bottom: 2px solid var(--c-line); display: flex; flex-direction: column; }
.menu-item { display: flex; align-items: center; gap: 12px; padding: 15px 4px; font-size: 18px; font-weight: 500;
  border-bottom: 2px solid color-mix(in srgb, var(--c-ink) 14%, transparent); cursor: pointer;
  color: inherit; text-decoration: none; }
.menu-item img { width: 26px; height: 26px; }
.menu-login { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; padding: 14px 20px;
  border: 2px solid var(--c-line); border-radius: 4px; background: var(--c-panel); font-size: 17px; font-weight: 600;
  box-shadow: 3px 4px 0 color-mix(in srgb, var(--c-ink) 12%, transparent); color: inherit; text-decoration: none; }
.menu-login img { width: 24px; height: 24px; }

/* ── hero ──────────────────────────────────────────────────────────────── */
.slide { position: relative; z-index: 1; width: 100%; max-width: 1996px; margin: 0 auto; }
.hero { position: relative; height: var(--hero-h, 100vh); }
.hero-inner { position: relative; height: 100%; overflow: hidden; display: flex; flex-direction: column;
  width: calc(100% + var(--hero-ext, 0px) * 2); margin-left: calc(var(--hero-ext, 0px) * -1); }
.demo-veil { position: fixed; inset: 0; z-index: 12; background: #FFFFFF; cursor: pointer; }
.mob-head { display: none; padding: calc(var(--swatch-h) + 100px) 20px 26px; }
.mob-title { margin: 0; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: clamp(40px, 15.5vw, 104px);
  line-height: 1.02; letter-spacing: -0.03em; color: var(--c-ink); }
.mob-title > span { display: block; }
.mob-sub { margin: 18px 0 0; font-family: 'Poppins', sans-serif; font-weight: 500; font-size: clamp(15px, 4.2vw, 18px);
  line-height: 1.4; color: var(--mute-78); }
.mob-head .assure { margin-top: 16px; flex-direction: column; font-size: clamp(13px, 3.7vw, 15px); gap: 7px; }
.card-shadow { position: absolute; left: 6%; right: 6%; bottom: -26px; height: 40px;
  background: color-mix(in srgb, var(--c-ink) 10%, transparent); filter: blur(14px); border-radius: 50%; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--c-panel);
  border: 2px solid var(--c-line); border-radius: 7px; overflow: hidden; }
.screen.clickable { cursor: pointer; }
.screen-body { flex: 1; min-height: 0; min-width: 0; width: 100%; box-sizing: border-box; position: relative; padding: 6.3cqh 4.4cqw; }
.eyebrow { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--mute-74); }
.bar-track { height: 6.3cqh; border: 1.5px solid var(--c-line); border-radius: 999px;
  background: color-mix(in srgb, var(--c-ink) 7%, transparent); overflow: hidden; }

/* pitch slide */
.pitch { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: space-between;
  gap: 2.5cqh; padding: 2cqh 0 0 0.6cqw; box-sizing: border-box; }
.pitch h1 { margin: 0; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: max(20px, 14.6cqh);
  line-height: 1.02; letter-spacing: -0.025em; color: var(--c-ink); }
.pitch h1 > span { display: block; }
.nowrap { white-space: nowrap; }
.pitch-art { position: absolute; top: 3cqh; right: 0.5cqw; width: 42cqw; pointer-events: none; }
.pitch-art img { display: block; width: 100%; height: auto; box-sizing: border-box; border: 2px solid var(--c-line);
  border-radius: 7px; transform-origin: 60% 50%; will-change: transform; animation: pitchFloat 7s ease-in-out infinite; }
.pitch-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(18px, 4cqw, 56px); }
.pitch-sub { flex: 1; min-width: 0; max-width: 46ch; font-family: 'Poppins', sans-serif; font-weight: 500;
  font-size: max(12px, 3.9cqh); line-height: 1.4; color: var(--mute-78); text-wrap: pretty; }
.pitch-sub p { margin: 0; }
.pitch-sub .assure { margin-top: 1.6cqh; font-size: max(11px, 2.8cqh); flex-direction: row; flex-wrap: wrap; gap: 0.6cqh 1.4em; }
/* tick list of reassurances, hero and phone headline alike */
.assure { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; font-family: 'Poppins', sans-serif;
  font-weight: 500; line-height: 1.3; color: var(--mute-72); }
/* small windows: the slide is too short for the reassurances, so they stand down */
@container (max-height: 340px) { .pitch-sub .assure { display: none; } }
.assure li { position: relative; padding-left: 1.45em; }
.assure li::before { content: ""; position: absolute; left: 0.2em; top: 0.12em; width: 0.4em; height: 0.72em; box-sizing: border-box;
  border-right: 2px solid var(--c-primary); border-bottom: 2px solid var(--c-primary); transform: rotate(40deg); }
.slide-ctas { flex: none; display: flex; align-items: center; gap: clamp(8px, 1cqw, 14px); }
.slide-cta { flex: none; display: flex; align-items: center; gap: 8px; padding: 1.9cqh clamp(10px, 1.3cqw, 16px);
  border: 2px solid var(--c-line); border-radius: 4px; font-family: var(--f-body); font-weight: 600;
  font-size: max(12px, 3.2cqh); appearance: none; text-decoration: none; white-space: nowrap; }
.slide-cta.install, .slide-cta.install:hover { background: var(--c-cta); color: var(--c-on); cursor: pointer; }
.slide-cta.install:hover { box-shadow: 2px 3px 0 color-mix(in srgb, var(--c-ink) 26%, transparent); transform: translate(2px, 2px); }
.slide-cta.soon { background: var(--c-panel); color: var(--mute-66); border-style: dashed; cursor: default; }
.slide-cta .tri { border-left-width: 7px; border-top-width: 5px; border-bottom-width: 5px; }
.tri { width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent;
  border-bottom: 6px solid transparent; display: block; }

/* video pane (phones) */
.vid { height: 100%; display: flex; flex-direction: column; gap: 10px; }
.vid-frame { flex: 1; min-height: 0; position: relative; border: 2px solid var(--c-line); border-radius: 4px;
  background: #000; overflow: hidden; }
.vid-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }

/* demo pop-out */
.demo { height: 100%; display: flex; gap: clamp(12px, 1.6vw, 22px); padding-right: clamp(160px, 16cqw, 226px); }
.demo-thumbs { flex: none; width: 15%; min-width: 64px; display: flex; flex-direction: column; gap: 8px; }
.demo-thumb { flex: 1 1 0; min-height: 0; border-radius: 3px; border: 1.5px solid color-mix(in srgb, var(--c-ink) 45%, transparent); background: var(--c-bg); }
.demo-thumb.on { border-color: var(--c-secondary); background: color-mix(in srgb, var(--c-secondary) 12%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-secondary) 25%, transparent); }
.demo-main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 5.3cqh; }
.demo-live { display: flex; align-items: center; gap: 9px; }
.demo-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-primary); display: block; animation: wfPulse 1.6s infinite; }
.demo-q { font-family: var(--f-body); font-weight: 600; font-size: max(19px, 8.5cqh); line-height: 1.12; }
.demo-rows { display: flex; flex-direction: column; gap: clamp(8px, 1.2vw, 14px); }
.demo-row { display: flex; flex-direction: column; gap: 5px; }
.demo-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.demo-row-label { font-size: clamp(12px, 1.2vw, 15px); font-weight: 600; }
.demo-row-pct { font-size: max(12px, 4.7cqh); font-weight: 700; font-variant-numeric: tabular-nums; }
.bar-fill { display: block; height: 100%; border-radius: 999px 0 0 999px; transition: width .6s cubic-bezier(.3,.8,.3,1); }
.demo-phone { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); z-index: 22; width: clamp(140px, 13cqw, 186px);
  display: flex; flex-direction: column; gap: 8px; padding: 14px 11px 16px; box-sizing: border-box;
  border: 2px solid color-mix(in srgb, var(--c-ink) 72%, transparent); border-radius: 11px; background: var(--c-bg);
  box-shadow: 6px 8px 0 color-mix(in srgb, var(--c-ink) 16%, transparent); }
.demo-phone-notch { width: 38px; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--c-ink) 30%, transparent); margin: 0 auto 2px; }
.demo-phone .eyebrow { font-size: 10px; }
.vote-btn { appearance: none; font-family: inherit; cursor: pointer; text-align: left; padding: 13px 14px; border-radius: 4px;
  font-size: 13.5px; font-weight: 600; border: 1.5px solid var(--c-line); background: var(--c-panel); color: var(--c-ink);
  box-shadow: 3px 4px 0 color-mix(in srgb, var(--c-ink) 14%, transparent); transition: background .15s ease, transform .12s ease; }
.vote-btn.on { background: var(--c-primary); color: var(--c-on); box-shadow: 1px 2px 0 color-mix(in srgb, var(--c-ink) 20%, transparent); transform: translate(2px, 2px); }
.voted { text-align: center; padding: 7px 10px; border: 1.5px solid var(--c-line); border-radius: 999px; background: var(--c-accent); font-size: 10.5px; font-weight: 700; }
.demo-controls { position: absolute; left: 0; right: 0; bottom: -58px; z-index: 22; display: flex; justify-content: center; gap: 12px; }
.ghost-btn { appearance: none; font-family: var(--f-body); font-weight: 600; font-size: 14px; cursor: pointer; padding: 11px 22px;
  border: 2px solid var(--c-line); border-radius: 4px; background: var(--c-panel); color: var(--c-ink);
  box-shadow: 3px 4px 0 color-mix(in srgb, var(--c-ink) 12%, transparent); }
.ghost-btn.accent { background: var(--c-accent); box-shadow: 3px 4px 0 color-mix(in srgb, var(--c-ink) 18%, transparent); }
.ghost-btn:hover { box-shadow: 1px 2px 0 color-mix(in srgb, var(--c-ink) 18%, transparent); transform: translate(2px, 2px); }

.crowd-inner { width: 100%; height: 100%; filter: saturate(0.78) brightness(1.02); }
/* floaty vote chips rising out of the crowd toward the screen */
.vote-chips { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.vote-chip { position: absolute; font-family: var(--f-body); font-size: clamp(12px, 1.25vw, 18px); font-weight: 700; line-height: 1;
  color: #FFFFFB; background: var(--c-primary-solid); border: 2px solid var(--c-line); border-radius: 999px;
  padding: 0.35em 0.8em; box-shadow: 2px 2px 0 color-mix(in srgb, var(--c-ink) 18%, transparent); opacity: 0; white-space: nowrap; }
.vote-chip.accent { background: var(--c-accent); color: var(--c-ink); }
.vote-chip.deep { background: var(--c-shape-4); }
.vote-chip.coral { background: var(--c-secondary); color: var(--c-ink); }
@media (prefers-reduced-motion: no-preference) {
  .vote-chip { animation: chipRise 6.4s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) { .vote-chip { opacity: 1; } }
@keyframes chipRise {
  0% { opacity: 0; transform: translateY(0) scale(0.85); }
  12% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-4.2em) scale(1); }
}
.hint { position: relative; flex: none; z-index: 46; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: clamp(10px, 1.2vw, 18px); pointer-events: none; padding: 10px 0 12px; }
.cta-mobile { display: none; align-items: center; justify-content: center; gap: 11px; padding: 15px 26px; border: 2px solid var(--c-line);
  border-radius: 4px; background: var(--c-cta); color: var(--c-on); box-shadow: 3px 4px 0 color-mix(in srgb, var(--c-ink) 20%, transparent);
  cursor: pointer; pointer-events: auto; appearance: none; font-family: var(--f-body); font-weight: 600; font-size: 16px; }
.cta-mobile .tri { border-left-width: 11px; border-top-width: 7px; border-bottom-width: 7px; }
.notes-pill { display: flex; align-items: center; gap: 12px; padding: 11px 24px; border: 2px solid var(--c-line); border-radius: 4px;
  background: var(--c-panel); box-shadow: 3px 4px 0 color-mix(in srgb, var(--c-ink) 10%, transparent); justify-content: center;
  cursor: pointer; pointer-events: auto; appearance: none; color: var(--c-ink); font-family: inherit; }
.notes-pill:hover { box-shadow: 1px 2px 0 color-mix(in srgb, var(--c-ink) 16%, transparent); transform: translate(2px, 2px); }
.notes-pill .t1 { font-family: var(--f-body); font-weight: 600; font-size: 14px; }
.notes-pill .sep { width: 2px; height: 16px; background: color-mix(in srgb, var(--c-ink) 20%, transparent); display: block; }
.notes-pill .t2 { font-size: 12.5px; color: var(--mute-74); }
.notes-pill .arr { font-size: 14px; font-weight: 700; color: var(--c-primary); animation: wfNudge 1.8s ease-in-out infinite; }

/* ── speaker notes (everything below the hero) ─────────────────────────── */
.notes { position: relative; background: #FFFFFF; border: 2px solid var(--c-line); border-radius: 7px; overflow: hidden;
  margin-bottom: clamp(24px, 4vh, 64px); }
.notes-pad { position: relative; padding: clamp(40px, 6vw, 96px) clamp(20px, 5vw, 80px) clamp(48px, 7vw, 110px);
  display: flex; flex-direction: column; gap: clamp(36px, 5vw, 76px); overflow: hidden; background: #FFFFFB; }
.notes-col { position: relative; display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 34px); width: 100%; max-width: 1996px; margin: 0 auto; }
.body { font-family: var(--f-body); font-size: 17px; line-height: 1.55; color: var(--mute-72); max-width: 44ch; text-wrap: pretty; margin: 0; }
.h-sm { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: clamp(27px, 2.7vw, 38px); line-height: 1.03;
  letter-spacing: -0.018em; margin: 0 0 14px; text-wrap: balance; }
.h-lg { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: clamp(38px, 4.6vw, 60px); line-height: .98;
  letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
.hi { color: var(--c-primary); }
.value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: clamp(40px, 6vw, 100px); align-items: start; }
.value-grid > div { display: flex; flex-direction: column; }
.wand { height: 1.18em; width: auto; vertical-align: -0.24em; margin: 0 0.06em; image-rendering: pixelated;
  filter: drop-shadow(2px 3px 0 color-mix(in srgb, var(--c-ink) 13%, transparent)); }
.scan-row { display: flex; align-items: flex-start; gap: 22px; }
.scan-row .body { flex: 1; min-width: 0; }
.scan-row img { flex: none; width: 96px; height: auto; margin-top: 2px; image-rendering: pixelated;
  filter: drop-shadow(4px 6px 0 color-mix(in srgb, var(--c-ink) 12%, transparent)); }

.pretty { display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 32px); }
.kicker { font-family: 'Poppins', sans-serif; font-size: clamp(24px, 2.2vw, 28px); font-weight: 700; line-height: 1.3; color: var(--c-primary); margin: 0; }
.pretty-feature { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.75fr); gap: clamp(30px, 5vw, 72px);
  align-items: center; width: 100%; min-width: 0; max-width: 1213px; }
.promo { position: relative; margin: 0; min-width: 0; overflow: hidden; border: 2px solid var(--c-line); border-radius: 7px;
  background: var(--c-panel); box-shadow: 4px 5px 0 color-mix(in srgb, var(--c-ink) 12%, transparent); }
.promo img { display: block; width: 100%; height: auto; }
.promo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  background: transparent; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.promo video.ready { opacity: 1; }
.feature-copy { max-width: 34ch; display: flex; flex-direction: column; }
.feature-copy .kicker { margin-bottom: 22px; }
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ticks li { position: relative; padding-left: 21px; }
.ticks li::before { content: ""; position: absolute; top: 3px; left: 2px; width: 6px; height: 11px; box-sizing: border-box;
  border-right: 2.5px solid var(--c-primary); border-bottom: 2.5px solid var(--c-primary); transform: rotate(40deg); }
.ticks strong { display: block; font-family: var(--f-body); font-size: 15px; font-weight: 600; line-height: 1.25; }
.ticks span { display: block; margin-top: 3px; font-family: var(--f-body); font-size: 15px; line-height: 1.45; color: var(--mute-78); }
.pretty-split { display: grid; grid-template-columns: minmax(0, 0.74fr) minmax(0, 0.98fr) minmax(0, 1.44fr); gap: clamp(22px, 3.2vw, 56px); align-items: center; }
.pretty-split figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pretty-split figcaption { font-family: var(--f-body); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--mute-66); }
.pretty-phone img { display: block; width: 100%; max-width: 240px; height: auto; }
.pretty-slide img { display: block; width: 100%; height: auto; border: 2px solid var(--c-line); border-radius: 6px;
  box-shadow: 4px 5px 0 color-mix(in srgb, var(--c-ink) 12%, transparent); }
.pretty-copy { display: flex; flex-direction: column; }
.pretty-copy .body { font-size: 15.5px; line-height: 1.5; max-width: 42ch; margin-bottom: 24px; }

.beat { display: flex; flex-direction: column; gap: 18px; margin-top: clamp(26px, 3.4vw, 52px); }
.beat > .body { max-width: 52ch; }
.feat-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 22px; border-top: 1.5px solid var(--rule); }
.feat-grid > div { padding: 22px 28px 22px 0; border-bottom: 1.5px solid var(--rule); }
.feat-grid > div:nth-child(even) { padding: 22px 0 22px 28px; border-left: 1.5px solid var(--rule); }
.feat-grid h3, .steps h3 { margin: 0 0 7px; font-family: var(--f-body); font-size: 17px; font-weight: 600; line-height: 1.2; }
.feat-grid p, .steps p { margin: 0; font-family: var(--f-body); font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--mute-84); text-wrap: pretty; }

/* pricing */
.plans { gap: clamp(18px, 2.4vw, 30px); }
.plans-lede { margin: 0; font-family: var(--f-body); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.45; font-weight: 300; max-width: 48ch; text-wrap: pretty; }
.cur-toggle { display: flex; flex-wrap: wrap; width: fit-content; margin: 0 auto; padding: 4px; background: var(--c-panel);
  border: 2px solid var(--c-line); border-radius: 6px; }
.cur { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 4px; border: none;
  font-family: var(--f-body); font-size: 14px; font-weight: 600; transition: background .14s ease, color .14s ease;
  background: transparent; color: color-mix(in srgb, var(--c-ink) 70%, transparent); appearance: none; }
.cur.on { background: var(--c-accent); color: var(--c-ink); }
.cur img { width: 25px; height: 25px; object-fit: contain; border-radius: 3px; display: block; flex: none; }
.plans-desktop { width: 100%; overflow-x: auto; padding-top: 18px; }
.plans-grid { display: grid; grid-template-columns: minmax(190px, 1.7fr) repeat(4, minmax(112px, 1fr)); min-width: 760px; align-items: stretch; }
.plans-corner { border-bottom: 2px solid var(--c-line); }
.tier { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px;
  padding: 26px 14px 18px; box-sizing: border-box; border-bottom: 2px solid var(--c-line); }
.tier.featured { background: color-mix(in srgb, var(--c-primary) 10%, transparent); border-radius: 3px 3px 0 0;
  box-shadow: inset 0 0 0 2px var(--c-primary); }
.tier-flag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); padding: 3px 10px; border-radius: 4px;
  white-space: nowrap; border: 2px solid var(--c-line); background: var(--c-accent); color: var(--c-ink);
  font-family: var(--f-body); font-size: 12px; font-weight: 600; text-transform: uppercase; }
.tier-name { font-family: 'Poppins', sans-serif; font-size: 19px; font-weight: 700; }
.tier-price { display: flex; align-items: baseline; gap: 5px; }
.tier-price b { font-family: 'Poppins', sans-serif; font-size: clamp(30px, 2.6vw, 38px); font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.tier-price span, .tier-billing { font-family: var(--f-body); font-size: 13px; font-weight: 500; color: color-mix(in srgb, var(--c-ink) 70%, transparent); }
.tier-billing { font-size: 12.5px; font-weight: 400; }
.tier-cta { margin-top: auto; width: 100%; box-sizing: border-box; text-align: center; min-height: 44px; display: flex;
  align-items: center; justify-content: center; padding: 10px 12px; border-radius: 4px; border: 2px solid var(--c-line);
  font-family: var(--f-body); font-size: 13.5px; font-weight: 600; cursor: pointer; background: var(--c-panel);
  color: var(--c-ink); text-decoration: none; }
.tier-cta:hover { color: var(--c-ink); transform: translate(-1px, -1px); }
.featured .tier-cta { background: var(--c-primary-solid); color: #FFFFFF; }
/* no checkout yet: muted and inert, like the "coming soon" demo buttons */
.tier-cta:disabled, .featured .tier-cta:disabled { appearance: none; background: var(--c-panel); color: var(--mute-66);
  border-style: dashed; cursor: default; transform: none; }
.cell-group { grid-column: 1 / -1; padding: 22px 0 7px; font-family: var(--f-body); font-size: 14px; font-weight: 600;
  text-transform: uppercase; color: var(--c-primary); border-bottom: 2px solid var(--c-line); }
.cell-group.first { padding-top: 10px; }
.cell-label { display: flex; align-items: center; padding: 11px 14px 11px 0; font-family: var(--f-body); font-size: 14px;
  font-weight: 500; line-height: 1.35; color: var(--mute-84); border-bottom: 2px dashed color-mix(in srgb, var(--c-ink) 20%, transparent); }
.cell-label { position: relative; gap: 8px; }
.infotip-btn { appearance: none; cursor: help; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; flex: none; border: 1.5px solid var(--c-line); border-radius: 4px;
  background: none; color: var(--c-line); font-family: var(--f-body); font-size: 12px; font-weight: 700; line-height: 1;
  transition: background .12s ease, color .12s ease, border-color .12s ease; }
.infotip-btn:hover, .infotip-btn:focus-visible { background: var(--c-primary-solid); border-color: var(--c-primary-solid); color: #FFFFFB; }
.infotip-pop { position: absolute; z-index: 60; left: 0; bottom: calc(100% - 4px); max-width: min(300px, 100%); width: max-content;
  background: var(--c-ink); color: #FFFFFB; border-radius: 4px; padding: 9px 12px; font-family: var(--f-body); font-size: 13.5px;
  font-weight: 400; line-height: 1.45; text-align: left; text-transform: none; letter-spacing: 0; white-space: normal;
  box-shadow: 3px 4px 0 color-mix(in srgb, var(--c-ink) 22%, transparent); pointer-events: none; }
.cell { display: flex; align-items: center; justify-content: center; padding: 11px 14px; text-align: center; box-sizing: border-box;
  font-family: var(--f-body); font-size: 14px; font-weight: 500; color: var(--mute-84);
  border-bottom: 2px dashed color-mix(in srgb, var(--c-ink) 20%, transparent); }
.cell.yes { font-weight: 700; color: var(--c-ink); }
.cell.no { color: color-mix(in srgb, var(--c-ink) 55%, transparent); }
.cell.featured { background: color-mix(in srgb, var(--c-primary) 7%, transparent); }
.plans-mobile { display: none; flex-direction: column; padding-top: 18px; }
.pm-row { display: flex; align-items: stretch; gap: 10px; }
.pm-arrow { flex: none; width: 44px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--c-line);
  border-radius: 4px; background: var(--c-panel); cursor: pointer; user-select: none; appearance: none; padding: 0; }
.pm-arrow span { width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; display: block; }
.pm-arrow.prev span { border-right: 9px solid var(--c-ink); margin-right: 2px; }
.pm-arrow.next span { border-left: 9px solid var(--c-ink); margin-left: 2px; }
.plans-mobile .tier { flex: 1; min-width: 0; border-bottom: none; border-radius: 4px; box-shadow: inset 0 0 0 2px var(--c-line); padding: 26px 16px 16px; gap: 6px; }
.plans-mobile .tier.featured { box-shadow: inset 0 0 0 2px var(--c-primary); }
.plans-mobile .tier-name { font-size: 21px; }
.plans-mobile .tier-price b { font-size: 40px; }
.plans-mobile .tier-price span { font-size: 14px; }
.plans-mobile .tier-billing { font-size: 13px; }
.pm-dots { display: flex; justify-content: center; gap: 8px; padding: 14px 0 6px; }
.pm-dot { width: 10px; height: 10px; border-radius: 4px; box-sizing: border-box; border: 1.5px solid var(--c-line);
  background: transparent; cursor: pointer; transition: width .2s ease; padding: 0; appearance: none; }
.pm-dot.on { width: 22px; background: var(--c-accent); }
.pm-cells { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.pm-cells .cell-group { font-size: 13px; padding-top: 20px; }
.pm-cells .cell-group.first { padding-top: 12px; }
.pm-cells .cell-label { padding: 11px 12px 11px 0; }
.pm-cells .cell { justify-content: flex-end; text-align: right; padding: 11px 0 11px 12px; }

/* how */
.steps { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 48px); margin: 16px 0 0; padding: 0; list-style: none; }
.steps li { flex: 1 1 220px; min-width: 200px; display: flex; flex-direction: column; }
.how-head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 6px; }
.how-head h3 { margin: 0; }
.step-no { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; flex: none; background: var(--c-accent);
  border: 2px solid var(--c-line); border-radius: 4px; font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 700; color: var(--c-ink); }
.steps p { max-width: 34ch; }
.how-ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-top: clamp(20px, 2.6vw, 34px); }
.big-btn { display: flex; align-items: center; gap: 11px; min-height: 44px; box-sizing: border-box; padding: 12px 26px;
  border: 2px solid var(--c-line); border-radius: 4px; font-family: var(--f-body); font-size: 15px; font-weight: 600;
  cursor: pointer; text-decoration: none; appearance: none; }
.big-btn:hover { transform: translate(-1px, -1px); }
.big-btn.cta, .big-btn.cta:hover { background: var(--c-cta); color: var(--c-on); }
.big-btn.plain, .big-btn.plain:hover { background: var(--c-panel); color: var(--c-ink); }
.big-btn .tri { border-left-width: 10px; }
.big-btn.soon { background: var(--c-panel); color: var(--mute-66); border-style: dashed; cursor: default; }
.big-btn.soon:hover { transform: none; }
.how-video { display: none; }
.how-start { display: none; }
.closer { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  margin-top: clamp(40px, 5vw, 80px); padding-top: clamp(36px, 4.4vw, 64px); border-top: 1.5px solid var(--rule); }
.closer .how-ctas { margin-top: clamp(18px, 2.2vw, 28px); }
.closer-small { margin: 18px 0 0; font-family: var(--f-body); font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mute-66); }

/* footer: not in the wireframe, kept for the legal notice Google Marketplace requires */
.foot { max-width: 1996px; margin: 0 auto; padding: 8px 0 40px; font-family: var(--f-body); font-size: 13px; color: var(--mute-72); }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 28px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot a { color: inherit; text-decoration: none; font-weight: 500; }
.foot a:hover { color: var(--c-primary); }
.foot-made { display: inline-flex; align-items: center; gap: 7px; }
.foot-made img { width: 18px; height: 18px; object-fit: contain; }
.foot-legal { margin: 16px 0 0; font-size: 12px; line-height: 1.5; max-width: 90ch; }

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .pretty-split { grid-template-columns: 1fr; gap: 30px; }
  .pretty-copy { order: 1; }
  .pretty-slide { order: 2; }
  .pretty-phone { order: 3; }
  .pretty-feature { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 760px) {
  .feat-grid { grid-template-columns: minmax(0, 1fr); }
  .feat-grid > div:nth-child(even) { padding-left: 0; border-left: none; }
}
/* phones: the hero grows with its content, the header stays put while you
   scroll, and the nav collapses to logo + burger + get-started */
@media (max-width: 700px) {
  [data-el="hero"] { height: auto !important; }
  .hero-inner { height: auto; overflow: visible; }
  [data-el="crowd"], [data-el="hint"] { animation: none !important; }
  .nav-links, .nav-login, .notes-pill { display: none !important; }
  .nav-burger { display: flex; }
  .cta-mobile { display: flex; }
  .hint { padding: 18px 0 22px; }
  /* no pop-out on phones, so the in-slide CTA would be dead; the video pill covers it */
  .slide-ctas, .pitch-sub, .pitch-art { display: none !important; }
  .plans-desktop { display: none; }
  /* Doppio can't be installed from a phone, so install CTAs become the getting-started guide */
  .nav-install, .how-install { display: none !important; }
  .nav-start { display: block; }
  .how-start { display: flex; }
  .how-soon { display: none; }
  .how-video { display: flex; }
  .how-head { flex-direction: row; align-items: center; margin-bottom: 8px; }
  .plans-mobile { display: flex; }
  /* phones: no presentation box, the headline runs edge to edge; the box returns only to play the video */
  [data-el="stage"][data-video="0"] { display: none !important; }
  .mob-head[data-video="0"] { display: block; }
}
/* phone in landscape: every nav element shrinks so the bar stops dominating */
@media (max-height: 560px) and (orientation: landscape) and (pointer: coarse) {
  .nav img { width: 22px !important; height: 22px !important; }
  .nav-link, .nav-btn { font-size: 14px; }
  .nav-brand span { font-size: 19px; }
  .nav-btn { padding: 7px 14px; }
  .nav-links { gap: 20px; }
  .hint { padding: 8px 0 10px; }
  .slide-ctas { display: none !important; }
}