/* BaatIQ landing page. Colours and type from DESIGN.md (look A, Graphite & coral); one coral accent, flat
   surfaces, and the voice rings as the only signature motion (BRAND.md). */
:root {
  --paper: #FBF9F5; --surface: #F7F4F0; --surface-2: #EEEAE5; --ink: #141414; --muted: #55565A; --faint: #B9B4AD;
  --coral: #C73A0A; --on-coral: #FDFBF8; --coral-soft: #FFE1D8; --line: #DAD8D4;
  --ring-deep: #9A3412; --ring-bright: #FF7A55; --frame: #141414; --tile-ink: #141414; --on-tile-ink: #FDFBF8;
  --display: "Google Sans Flex", "Google Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text: "Roboto Flex", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --deva: "Noto Sans Devanagari", "Kohinoor Devanagari", sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --wrap: min(75rem, 100% - 2.5rem);
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #141414; --surface: #1C1C1C; --surface-2: #262524; --ink: #FDFBF8; --muted: #A39E97; --faint: #4A4744;
    --coral: #E6673C; --on-coral: #141414; --coral-soft: #3A2A25; --line: #2E2E2E;
    --ring-deep: #E0410B; --ring-bright: #FFC2B0; --frame: #302F2D; --tile-ink: #FDFBF8; --on-tile-ink: #141414;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.55 var(--text);
  -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--coral); text-underline-offset: .2em; }
h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; letter-spacing: -.03em; line-height: 1.04; }
p { margin: 0; }
::selection { background: var(--coral-soft); color: var(--ink); }
:focus-visible { outline: 3px solid #1F5FD1; outline-offset: 3px; border-radius: .4rem; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 10; background: var(--paper); border-bottom: 1px solid var(--line); }
.nav-in { width: var(--wrap); margin-inline: auto; height: 3.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.lockup { display: flex; align-items: center; gap: .5rem; color: var(--ink); text-decoration: none; }
.lockup .mark { width: 1.9rem; height: auto; }
.lockup .wordmark { width: 5.4rem; height: auto; }
.nav nav { display: flex; align-items: center; gap: 1.5rem; font-size: .9rem; }
.nav nav a { color: var(--muted); text-decoration: none; transition: color 160ms ease; }
.nav nav a:hover { color: var(--ink); }
.nav .nav-cta { color: var(--on-coral); background: var(--coral); padding: .4rem .9rem; border-radius: 999px; font-weight: 600; }
.nav .nav-cta:hover { color: var(--on-coral); }

/* Hero */
.hero { width: var(--wrap); margin-inline: auto; padding-top: clamp(3rem, 8vw, 6rem); text-align: center;
  display: grid; justify-items: center; gap: 1.5rem; }
.pill { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .85rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); font-size: .85rem; color: var(--muted); }
.dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--coral); }
.hero h1 { font-size: clamp(3rem, 9vw, 6rem); font-weight: 680; max-width: 12ch; }
.hero .lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--muted); max-width: 40rem; }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.5rem; }
.btn { display: inline-block; background: var(--coral); color: var(--on-coral); text-decoration: none; font: 600 1rem var(--display);
  padding: .95rem 1.7rem; border-radius: 999px; transition: transform 140ms var(--ease-out), filter 160ms ease; }
.link { font-weight: 600; text-decoration: none; font-size: 1.05rem; }
.link span { display: inline-block; transition: transform 200ms var(--ease-out); }

/* Voice rings: each ring drifts and breathes on its own period, so the group reads like a voice. */
.rings { fill: none; transform-origin: 50% 50%; }
.ring { transform-box: view-box; transform-origin: 50% 50%; animation: drift var(--spin) linear infinite; }
.ring path { transform-box: view-box; transform-origin: 50% 50%; stroke-width: 1.2; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; animation: breathe var(--breath) var(--ease-in-out) infinite alternate; }
.r1 { --spin: 19s; --breath: 2.6s; } .r1 path { stroke: var(--ring-deep); opacity: .7; }
.r2 { --spin: 27s; --breath: 3.4s; animation-direction: reverse; } .r2 path { stroke: var(--ring-deep); opacity: .45; animation-delay: -.8s; }
.r3 { --spin: 23s; --breath: 2.9s; } .r3 path { stroke: var(--ring-bright); opacity: .45; animation-delay: -1.6s; }
.r4 { --spin: 35s; --breath: 4.1s; animation-direction: reverse; } .r4 path { stroke: var(--ring-bright); opacity: .3; animation-delay: -2.2s; }
.r5 { --spin: 41s; --breath: 4.8s; } .r5 path { stroke: var(--ring-bright); opacity: .18; animation-delay: -3s; }
@keyframes drift { to { transform: rotate(1turn); } }
@keyframes breathe { from { transform: scale(.965); } to { transform: scale(1.035); } }
.paused .ring, .paused .ring path { animation-play-state: paused; }

/* Phone frame around a real screen capture */
.phone { position: relative; margin: 0; padding: .55rem; border-radius: 2.6rem; background: var(--frame);
  box-shadow: 0 2.5rem 4rem -2rem rgba(20, 20, 20, .45); }
.phone img { border-radius: 2.1rem; width: 100%; }

/* Story: pinned phone, chapters change with scroll */
.story { position: relative; height: 420vh; margin-top: clamp(4rem, 10vw, 8rem); }
.story-pin { position: sticky; top: 3.75rem; height: calc(100vh - 3.75rem); width: var(--wrap); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(2rem, 6vw, 6rem); }
.story-copy { display: grid; gap: 2rem; align-content: center; }
.story-count { font: 600 .9rem var(--display); color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.chapters { list-style: none; margin: 0; padding: 0; display: grid; }
.chapter { grid-area: 1 / 1; display: grid; gap: 1.25rem; align-content: start; opacity: 0; transform: translateY(1.25rem);
  filter: blur(6px); transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out), filter 420ms var(--ease-out);
  pointer-events: none; }
.chapter.is-on { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.chapter h2 { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 680; }
.chapter p { font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: var(--muted); max-width: 30rem; }
.story-bar { height: 3px; width: min(18rem, 100%); background: var(--line); border-radius: 3px; overflow: hidden; }
.story-bar span { display: block; height: 100%; background: var(--coral); transform-origin: 0 50%; transform: scaleX(0); }
.story-phone { width: min(20rem, 34vw, calc((100vh - 7rem) / 2.3)); height: fit-content; display: grid; }
.story-phone .screen { grid-area: 1 / 1; opacity: 0; transform: scale(1.03); filter: blur(4px);
  transition: opacity 480ms var(--ease-out), transform 620ms var(--ease-out), filter 480ms var(--ease-out); }
.story-phone .screen.is-on { opacity: 1; transform: none; filter: none; }

/* Statement */
.statement { width: var(--wrap); margin-inline: auto; padding-block: clamp(5rem, 14vw, 11rem); display: grid; gap: 2.5rem; }
.glow { font: 650 clamp(2rem, 5.2vw, 4.2rem)/1.12 var(--display); letter-spacing: -.03em; max-width: 22ch; text-wrap: pretty; }
.glow span { color: var(--faint); transition: color 360ms var(--ease-out); }
.glow span.lit { color: var(--ink); }
.glow span.on.lit { color: var(--coral); }
.statement-note { color: var(--muted); font-size: 1.05rem; text-wrap: balance; }
.statement-note a { white-space: nowrap; }

/* Language */
.talk { width: var(--wrap); margin-inline: auto; padding-block: 2rem clamp(4rem, 10vw, 8rem); display: grid; gap: 2rem; justify-items: center; text-align: center; }
.talk h2 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); font-weight: 680; }
.line { margin: 0; display: grid; gap: .75rem; justify-items: center; padding: clamp(1.5rem, 4vw, 3rem); border-radius: 2rem;
  background: var(--surface); width: min(60rem, 100%); }
.line figcaption { font-size: .9rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.line p { font: 500 clamp(1.5rem, 3.6vw, 2.6rem)/1.45 var(--deva), var(--display); letter-spacing: -.01em; text-wrap: balance; }
.line mark { color: inherit; background: linear-gradient(var(--coral-soft), var(--coral-soft)) no-repeat 0 100% / 0% 100%;
  padding: 0 .15em; border-radius: .3em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 900ms var(--ease-out) 250ms; }
.line.in mark, html:not(.motion) .line mark { background-size: 100% 100%; }
.talk-note { color: var(--muted); }
.talk-shot { margin: 1rem 0 0; display: grid; gap: 1rem; justify-items: center; }
.talk-shot .phone { width: min(15rem, 62vw); }
.talk-shot figcaption { font-weight: 500; color: var(--ink); }
.talk-shot [lang] { font-family: var(--deva); }

/* Feature grid */
.grid { width: var(--wrap); margin-inline: auto; display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; gap: 1.25rem; }
.tile { border-radius: 2rem; background: var(--surface); padding: clamp(1.75rem, 3vw, 2.75rem); display: grid; gap: .9rem; align-content: start; overflow: hidden; }
.tile h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 650; }
.tile p { color: var(--muted); max-width: 30rem; }
.tile-big { grid-row: span 2; grid-template-rows: auto 1fr; }
.tile-phone { width: min(17rem, 80%); justify-self: center; align-self: end; margin-bottom: calc(-1 * clamp(4rem, 9vw, 7rem)); margin-top: 1.5rem; }
.tile-ink { background: var(--tile-ink); color: var(--on-tile-ink); }
.tile-ink p { color: inherit; opacity: .72; }
.tile-icon { width: 2.75rem; height: 2.75rem; fill: none; stroke: var(--coral); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Early access */
.access { position: relative; overflow: hidden; width: var(--wrap); margin: clamp(4rem, 10vw, 8rem) auto 3rem;
  padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 5vw, 4rem); border-radius: 2.5rem; background: var(--tile-ink); color: var(--on-tile-ink);
  display: grid; justify-items: center; text-align: center; gap: 1.25rem; isolation: isolate; }
.access .rings { position: absolute; inset: 0; margin: auto; width: min(52rem, 160%); z-index: -1; opacity: .55; }
.access h2 { font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 680; }
.access p { max-width: 34rem; opacity: .8; }
.email { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .75rem; font: 600 clamp(1.2rem, 2.4vw, 1.6rem) var(--display); opacity: 1 !important; }
.email span { user-select: all; overflow-wrap: anywhere; }
.copy { font: 600 .9rem var(--display); padding: .55rem 1.1rem; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--coral); color: var(--on-coral); transition: transform 140ms var(--ease-out), filter 160ms ease; }
.access .fine { font-size: .95rem; opacity: .6; }

/* Footer */
.foot { width: var(--wrap); margin-inline: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  padding-block: 1.5rem 3rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .88rem; }
.foot nav { display: flex; gap: 1.25rem; }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--ink); }

/* Load: the headline arrives word by word, out of a soft blur, like a transcript filling in */
.say span { display: inline-block; animation: heard 760ms var(--ease-out) both; animation-delay: calc(var(--i) * 90ms + 120ms); }
@keyframes heard { from { opacity: 0; filter: blur(10px); transform: translateY(.16em); } }
.hero > .pill, .hero > .lede, .hero > .cta-row { animation: settle 640ms var(--ease-out) both; }
.hero > .pill { animation-delay: 40ms; } .hero > .lede { animation-delay: 520ms; } .hero > .cta-row { animation-delay: 640ms; }
@keyframes settle { from { opacity: 0; } }

/* Tiles arrive once as they scroll in (only when the script is running) */
.motion .tile[data-reveal] { opacity: 0; transform: translateY(2.5rem) scale(.98);
  transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); }
.motion .tile[data-reveal].in { opacity: 1; transform: none; }
.motion .tile:nth-child(2) { transition-delay: 80ms; } .motion .tile:nth-child(3) { transition-delay: 160ms; }

/* Feedback */
.btn:active, .copy:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover, .copy:hover { filter: brightness(1.07); }
  .link:hover span { transform: translateX(3px); }
}

/* Narrow screens */
@media (max-width: 52rem) {
  .nav nav a:not(.nav-cta) { display: none; }
  .story { height: 400vh; }
  .story-pin { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: center; gap: 1.25rem; padding-block: 1rem; }
  .story-phone { order: -1; width: min(14rem, 52vw, 34vh); justify-self: center; }
  .story-copy { gap: 1rem; text-align: center; justify-items: center; }
  .chapter { justify-items: center; gap: .6rem; }
  .chapter h2 { font-size: clamp(2rem, 8vw, 2.6rem); }
  .chapter p { font-size: 1rem; }
  .grid { grid-template-columns: 1fr; }
  .tile-big { grid-row: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ring, .ring path { animation: none; }
  .say span { animation: settle 400ms ease both; animation-delay: 0s; }
  .chapter, .story-phone .screen { transform: none; filter: none; transition: opacity 300ms ease; }
  .motion .tile[data-reveal] { transform: none; transition: opacity 400ms ease; }
  .btn:active, .copy:active { transform: none; }
  .line mark { transition: none; background-size: 100% 100%; }
}

/* Waitlist form (inside the dark early-access panel) */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wl-count { font: 600 1.05rem var(--display); color: var(--coral); opacity: 1 !important; }
.wl { width: min(34rem, 100%); display: grid; gap: 1rem; justify-items: center; }
.wl-platform { border: 0; margin: 0; padding: .3rem; display: inline-flex; gap: .25rem; border-radius: 999px;
  background: color-mix(in srgb, var(--on-tile-ink) 10%, transparent); }
.wl-platform legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.wl-platform label { position: relative; cursor: pointer; }
.wl-platform input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wl-platform span { display: block; padding: .45rem 1.1rem; border-radius: 999px; font: 600 .92rem var(--display);
  opacity: .75; transition: background-color 180ms ease, color 180ms ease, opacity 180ms ease; }
.wl-platform input:checked + span { background: var(--on-tile-ink); color: var(--tile-ink); opacity: 1; }
.wl-platform input:focus-visible + span { outline: 3px solid #1F5FD1; outline-offset: 2px; }
.wl-row { width: 100%; display: flex; gap: .6rem; padding: .35rem; border-radius: 999px;
  background: color-mix(in srgb, var(--on-tile-ink) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-tile-ink) 18%, transparent); transition: border-color 180ms ease; }
.wl-row:focus-within { border-color: var(--coral); }
.wl-row input { flex: 1; min-width: 0; border: 0; background: transparent; color: inherit; font: 500 1.05rem var(--text);
  padding: .6rem 1rem; outline: none; caret-color: var(--coral); }
.wl-row input::placeholder { color: inherit; opacity: .5; }
.wl-submit { border: 0; cursor: pointer; padding: .8rem 1.4rem; white-space: nowrap; }
.wl-submit:disabled { opacity: .6; cursor: progress; }
.wl-status { min-height: 1.5em; font-size: .98rem; opacity: 1 !important; }
.wl-status[data-kind="error"] { color: var(--ring-bright); }
.wl-status[data-kind="ok"] { font-weight: 600; }
.wl.done .wl-row, .wl.done .wl-platform { opacity: .5; }
@media (max-width: 30rem) {
  .wl-row { flex-direction: column; border-radius: 1.5rem; }
  .wl-submit { width: 100%; }
}

/* Hero banner: a seamless, text-free loop. Its empty top half sits behind the copy; its moving half (phone, rings,
   cards) shows in a band below the buttons, sized so nothing ever runs under the text. The bottom dissolves into
   the page colour so the next section flows straight out of it. */
.hero.banner { --band: min(29vw, 34rem); position: relative; isolation: isolate; width: 100%; max-width: none; overflow: hidden;
  padding: clamp(3.5rem, 9vw, 7rem) max(1.25rem, calc((100% - var(--wrap)) / 2)) var(--band);
  box-sizing: border-box; background: #141414; color: #FDFBF8; }
.banner-video { position: absolute; z-index: -2; left: 50%; bottom: 0; transform: translateX(-50%);
  height: calc(var(--band) * 2.05); width: auto; aspect-ratio: 16 / 9; max-width: none; object-fit: cover; background: #141414;
  -webkit-mask: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.hero.banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14%; z-index: -1;
  background: linear-gradient(to bottom, rgba(20, 20, 20, 0), var(--paper)); }
@media (max-aspect-ratio: 4/5) {
  .hero.banner { --band: 98vw; }
  .banner-video { height: calc(var(--band) / .57); aspect-ratio: 9 / 16; -webkit-mask: none; mask: none; }
}
.hero.banner h1 { color: #FDFBF8; }
.hero.banner .lede { color: #DCD6CF; }
.hero.banner .pill { color: #FDFBF8; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); }
.hero.banner .link { color: #F2A27F; }

/* Launch switch: html[data-play] is "off" until the Play listing is live. "on" shows the official Google Play badge
   in the nav and footer and changes the hero pill. The badge image is used unmodified (Google's badge guidelines). */
html[data-play="off"] .play-badge, html[data-play="off"] .if-play, html[data-play="on"] .if-test { display: none; }
.play-badge { display: inline-flex; line-height: 0; }
.play-badge img { width: auto; display: block; }
.nav-play img { height: 2.75rem; margin: -.4rem -.35rem; }
.foot-play img { height: 3.4rem; margin: -.5rem -.45rem; }
@media (max-width: 52rem) {
  html[data-play="on"] .nav .nav-cta { display: none; }
  html[data-play="on"] .nav .nav-play { display: inline-flex; }
}