/* Self-hosted so no visitor data reaches Google. Latin subset, OFL (see ../LICENSES.md). */
@font-face {
  font-family: "Outfit";
  src: url("fonts/outfit-variable.woff2") format("woff2-variations");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* LoudNow variant "Combined": Story base + Current hero phone and scenario cards. Dark-only.
   Shape rule: cards 22px, inner cards 14px, all controls pill. */
:root {
  /* Light, and only light: LoudNow ships light, so the site should look like the thing that
     installs. These are the app's own light values (Paper, InkText, CoralDeep, MintDeep), not an
     inversion of the dark palette — coral and mint both have to darken to carry on paper. */
  --bg: #f6f4f0;
  --bg-2: #ffffff;
  --bg-3: #edeae4;
  --line: rgb(22 35 63 / 0.1);
  --line-2: rgb(22 35 63 / 0.2);
  --text: #16233f;
  --text-dim: #5a6478;
  --text-mute: #666e85;
  --loud: #a8431f;
  --loud-hot: #8c3517;
  --loud-soft: rgb(168 67 31 / 0.1);
  --loud-glow: rgb(168 67 31 / 0.18);
  --loud-line: rgb(168 67 31 / 0.32);
  --on-loud: #ffffff;
  --quiet: #187053;
  --quiet-soft: rgb(27 122 88 / 0.1);
  --shadow: rgb(22 35 63 / 0.22);
  --bar-bg: rgb(246 244 240 / 0.86);
  --hero-haze: rgb(255 255 255 / 0.85);
  --glass: rgb(22 35 63 / 0.035);
  --glass-2: rgb(22 35 63 / 0.02);
  /* The phone mock-ups show a light screen, because that is what the app looks like. */
  --device: #cfcac2;
  --screen-top: #ffffff;
  --screen-bottom: #f2efea;

  --font: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --t-hero: clamp(2.6rem, 1.2rem + 5.4vw, 5.4rem);
  --t-h2: clamp(2rem, 1.3rem + 2.8vw, 3.6rem);
  --t-h3: clamp(1.6rem, 1.15rem + 1.7vw, 2.5rem);
  --t-base: clamp(1.02rem, 0.97rem + 0.25vw, 1.15rem);
  --t-small: 0.875rem;
  --t-micro: 0.75rem;

  --gutter: clamp(1.25rem, 0.6rem + 3vw, 3.5rem);
  --max: 1180px;
  --pad-x: max(var(--gutter), calc((100% - var(--max)) / 2));
  --space-section: clamp(6rem, 4rem + 8vw, 12rem);
  --bar-h: 64px;
  --radius: 22px;
  --radius-sm: 14px;
  --pill: 999px;
  --tap: 44px;

  --phone-w: min(290px, 100%);
  --phone-h: 600px;
  --phone-crop: 236px;

  --hero-phone-w: 340px;
  --hero-tilt: -2deg;
  --hero-pulse-w: 300px;
  --hero-lift: 7.5rem;
  --hero-device: linear-gradient(160deg, #ffffff, #e6e2db 62%);
  --hero-hit: linear-gradient(135deg, rgb(168 67 31 / 0.12), rgb(168 67 31 / 0.04));
  --dot-field: rgb(22 35 63 / 0.09);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --slow: 900ms;
  --mid: 500ms;
  --fast: 200ms;
}

*, *::before, *::after { box-sizing: border-box; }
/* Chrome on Android auto-darkens pages that do not say what they are, which is what turns this
   site dark on a phone in dark mode — badly, since it recolours the page but not the logo.
   It has to be `only light`: plain `light` says the page has no dark version, which is precisely
   the page Chrome offers to darken for you. `only` says do not. */
:root { color-scheme: only light; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--bar-h); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 300 var(--t-base) / 1.65 var(--font);
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.08; letter-spacing: -0.02em; }
p { margin: 0; }
code { font-family: var(--mono); font-size: 0.9em; color: var(--loud-hot); }
strong, b { font-weight: 500; }
:focus-visible { outline: 2px solid var(--loud); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 90; padding: 0.75rem 1rem; border-radius: var(--pill); background: var(--loud); color: var(--on-loud); }
.skip:focus { top: 1rem; }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 1.5rem;
  border-radius: var(--pill);
  border: 1px solid transparent;
  background: var(--loud);
  color: var(--on-loud);
  font: 500 1rem var(--font);
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--fast) var(--ease), background var(--fast), border-color var(--fast);
}
.btn:hover { background: var(--loud-hot); }
.btn:active { transform: scale(0.98); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn-ghost:hover { background: transparent; border-color: var(--quiet); }
.btn-small { padding: 0 1.1rem; font-size: 0.92rem; }
.link-arrow { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--tap); color: var(--text-dim); text-decoration: none; }
.link-arrow::after { content: "\2193"; transition: transform var(--mid) var(--ease); }
.link-arrow:hover { color: var(--text); }
.link-arrow:hover::after { transform: translateY(3px); }
.play-badge { display: inline-block; margin-left: -13px; border-radius: 12px; }
.play-badge img { height: 80px; width: auto; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: var(--bar-h);
  padding: 0 var(--pad-x);
  background: var(--bar-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; min-height: var(--tap); font-weight: 500; font-size: 1.1rem; text-decoration: none; }
.brand img { border-radius: 8px; }
.topbar nav { display: none; gap: 2rem; margin-left: auto; }
.topbar nav a { color: var(--text-dim); text-decoration: none; font-size: 0.95rem; padding: 0.6rem 0; }
.topbar nav a:hover { color: var(--text); }
.topbar .btn { margin-left: auto; }

/* ---------- Shared section rhythm ---------- */
main > section { padding: var(--space-section) var(--pad-x) 0; }
/* Jumping to a section used to land on its own top padding: a screenful of nothing, with the
   price cards and the questions pushed off the bottom of the window. Pulling the scroll back by
   that same padding puts the section's heading just below the bar instead — and because the two
   cancel exactly, it lands in the same place at every window width. */
main > section[id] { scroll-margin-top: calc(1.25rem - var(--space-section)); }
/* Except where a section sets its own top padding, so there is no --space-section to take off:
   the hero, which is the top of the page anyway, and site 2's card-scroll, whose opening space
   comes from inside it. Subtracting padding they do not have scrolled their heading off the top. */
main > section.hero[id], main > section.cardscroll[id] { scroll-margin-top: 0; }

.section-title { font-size: var(--t-h2); font-weight: 300; }
.section-title span { color: var(--text-mute); }
.section-sub { margin-top: 1.25rem; max-width: 52ch; color: var(--text-dim); }
.eyebrow { font: 500 var(--t-micro) var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--quiet); }

.js .observe { opacity: 0; transform: translateY(28px); transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
.js .observe.in-view { opacity: 1; transform: none; }

/* ---------- Hero ---------- */
main > .hero {
  display: grid;
  gap: 3.5rem;
  align-content: center;
  min-height: calc(100dvh - var(--bar-h));
  padding-top: clamp(2.5rem, 1rem + 6vw, 6rem);
  padding-bottom: 3rem;
  background: radial-gradient(60rem 40rem at 85% 30%, var(--hero-haze), transparent 70%);
}
.hero-copy { display: grid; gap: 1.6rem; max-width: 40rem; }
.hero h1 { font-size: var(--t-hero); font-weight: 300; line-height: 1.02; letter-spacing: -0.035em; }
.hero h1 span { display: block; }
.h-quiet { color: var(--text-mute); }
.h-loud b { color: var(--loud); font-weight: 500; }
.lede { max-width: 34ch; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); color: var(--text-dim); }
.lede em { font-style: normal; color: var(--text); border-bottom: 1px solid var(--loud); }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.75rem; }

.hero-visual { position: relative; display: grid; justify-items: center; padding-top: var(--hero-lift); isolation: isolate; }
.hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle, var(--dot-field) 1.2px, transparent 1.6px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 55%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 55%, #000 30%, transparent 78%);
}
.hero-phone {
  position: relative;
  width: min(calc(100% - 1.5rem), var(--hero-phone-w));
  padding: 2.6rem 0.85rem 1.1rem;
  border-radius: 44px;
  background: var(--hero-device);
  border: 1px solid var(--line-2);
  box-shadow: 0 40px 80px -30px var(--shadow), 0 0 120px -40px var(--loud-glow);
  rotate: var(--hero-tilt);
}
.hero-notch { position: absolute; top: 12px; left: 50%; width: 84px; height: 20px; translate: -50% 0; border-radius: var(--pill); background: var(--device); }
/* The logo motif, large: mint dots breaking into salmon bars, rising out of the phone. */
.hero-pulse { position: absolute; left: 50%; bottom: calc(100% + 0.75rem); width: min(var(--hero-pulse-w), 92%); translate: -50% 0; rotate: 2deg; pointer-events: none; }
.hero-pulse-dots circle { fill: var(--quiet); opacity: 0.7; }
.hero-pulse-bars rect { fill: var(--loud); transform-box: fill-box; transform-origin: center; }
.hero-stream { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.hero-note {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.1rem 0.5rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  background: var(--glass);
  border: 1px solid var(--line);
  font-size: 0.84rem;
  line-height: 1.35;
}
.hero-note b { font: 500 0.66rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
.hero-note span { grid-column: 1; color: var(--text-dim); }
.hero-note i { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-style: normal; font-size: 0.8rem; opacity: 0.6; }
.hero-note.is-muted { opacity: 0.5; filter: saturate(0.3); }
.hero-note.is-hit {
  margin: 0.2rem 0;
  background: var(--hero-hit);
  border-color: var(--loud);
  box-shadow: 0 12px 40px -12px var(--loud-glow);
  scale: 1.04;
}
.hero-note.is-hit b { color: var(--loud-hot); }
.hero-note.is-hit span { color: var(--text); font-weight: 400; }
.hero-note mark { background: var(--loud); color: var(--on-loud); border-radius: 4px; padding: 0 0.2em; font-weight: 500; }
.hero-speaking {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.45rem;
  font: 500 0.7rem var(--mono);
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--loud-hot);
}
.hero-bars { display: inline-flex; align-items: center; gap: 3px; height: 16px; }
.hero-bars i { width: 3px; height: 100%; border-radius: var(--pill); background: currentColor; transform-origin: center; transform: scaleY(0.6); }
.hero-bars i:nth-child(2) { transform: scaleY(1); }
.hero-bars i:nth-child(3) { transform: scaleY(0.4); }
.hero-bars i:nth-child(4) { transform: scaleY(0.8); }
.hero-bars i:nth-child(5) { transform: scaleY(0.3); }

/* ---------- Story ---------- */
.story-head { max-width: 44rem; }
.story-body { position: relative; display: grid; margin-top: 3rem; }
.stage {
  position: sticky;
  top: var(--bar-h);
  z-index: 5;
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  padding: 1rem 0 1.5rem;
  background: linear-gradient(var(--bg) 85%, transparent);
}
.phone {
  position: relative;
  width: var(--phone-w);
  height: var(--phone-crop);
  padding: 10px 10px 0;
  border-radius: 40px 40px 0 0;
  background: var(--device);
  border: 1px solid var(--line-2);
  border-bottom: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 70%, transparent);
  mask-image: linear-gradient(#000 70%, transparent);
  transition: box-shadow var(--slow) var(--ease);
}
.screen {
  position: relative;
  height: 100%;
  padding: 1.1rem 0.8rem;
  border-radius: 31px 31px 0 0;
  background: linear-gradient(180deg, var(--screen-top), var(--screen-bottom));
  overflow: hidden;
}
.clock { text-align: center; font: 400 0.8rem var(--mono); color: var(--text-mute); margin-bottom: 0.7rem; }
.stream { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.note {
  display: grid;
  gap: 0.1rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--glass);
  border: 1px solid var(--line);
  font-size: 0.78rem;
  line-height: 1.35;
  opacity: 0.55;
  transition: opacity var(--mid) var(--ease), border-color var(--mid), background var(--mid);
}
.note b { font: 500 0.68rem var(--mono); color: var(--text-dim); }
/* The negative margin cancels the padding, so an unlit highlight leaves no gap before the full stop. */
.note mark { background: transparent; color: inherit; border-radius: 4px; padding: 0 0.15em; margin: 0 -0.15em; transition: background var(--mid), color var(--mid); }
.note:nth-child(n+5) { display: none; }

.say {
  position: absolute;
  inset: 0.7rem 0.6rem auto;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.6rem 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  border: 1px solid var(--loud);
  box-shadow: 0 12px 30px var(--shadow);
  opacity: 0;
  transform: translateY(-130%);
  transition: transform var(--mid) var(--ease), opacity var(--mid), border-color var(--mid);
}
.say-bars { display: flex; align-items: center; gap: 3px; height: 26px; }
.say-bars i { width: 4px; height: 100%; border-radius: var(--pill); background: var(--loud); transform: scaleY(0.25); transition: background var(--mid); }
.say-text { flex: 1; display: grid; font-size: 0.8rem; font-weight: 500; line-height: 1.25; }
.say-text small { font: 400 0.64rem var(--mono); color: var(--text-dim); }
.say-done { display: none; color: var(--quiet); }
.say-stop {
  padding: 0.35rem 0.8rem;
  border-radius: var(--pill);
  background: var(--loud);
  color: var(--on-loud);
  font-size: 0.75rem;
  font-weight: 600;
  transition: transform var(--fast) var(--ease), opacity var(--mid);
}

/* Step 2: keyword spotted */
.phone:is([data-step="2"], [data-step="3"], [data-step="4"]) .note { opacity: 0.3; }
.phone:is([data-step="2"], [data-step="3"], [data-step="4"]) .hit { opacity: 1; border-color: var(--loud); background: var(--loud-soft); }
.phone:is([data-step="2"], [data-step="3"], [data-step="4"]) .hit mark { background: var(--loud); color: var(--on-loud); }
/* Step 3: speaking */
.phone:is([data-step="3"], [data-step="4"]) .say { opacity: 1; transform: none; }
.phone[data-step="3"] { box-shadow: 0 0 0 1px var(--loud), 0 30px 90px -20px var(--loud-glow); }
/* Step 4: stopped */
.phone[data-step="4"] .say { border-color: var(--quiet); }
.phone[data-step="4"] .say-live, .phone[data-step="4"] .say-stop { display: none; }
.phone[data-step="4"] .say-done { display: block; }
.phone[data-step="4"] .say-bars i { background: var(--quiet); }
.phone[data-step="4"] .hit { opacity: 0.7; border-color: var(--quiet); background: var(--quiet-soft); }

.ticks { display: flex; gap: 0.4rem; }
.ticks span { width: 22px; height: 3px; border-radius: var(--pill); background: var(--line-2); transition: background var(--mid); }
.phone[data-step="1"] ~ .ticks span:nth-child(1),
.phone[data-step="2"] ~ .ticks span:nth-child(-n+2),
.phone[data-step="3"] ~ .ticks span:nth-child(-n+3) { background: var(--loud); }
.phone[data-step="4"] ~ .ticks span { background: var(--quiet); }

.story-steps { list-style: none; margin: 0; padding: 0; }
.story-step { display: grid; align-content: center; gap: 1rem; min-height: 68svh; padding: 2rem 0; }
.story-step h3 { font-size: var(--t-h3); font-weight: 300; }
.story-step p { max-width: 34ch; color: var(--text-dim); }
.story-ready .story-step { opacity: 0.25; transition: opacity var(--slow) var(--ease); }
.story-ready .story-step.is-active { opacity: 1; }
.story-step[data-step="3"] h3 { color: var(--loud); }
.story-step[data-step="4"] h3 { color: var(--quiet); }

/* Static story (reduced motion): one phone per step, set by story.js */
.step-phone { display: none; }
.story-static .stage { display: none; }
.story-static .step-phone { display: grid; justify-items: start; margin-bottom: 0.5rem; }
.story-static .story-step { min-height: 0; padding: 2.5rem 0; }

/* ---------- Scenarios ---------- */
.scenario-grid { display: grid; gap: 1.25rem; margin-top: 4rem; }
.scenario {
  display: grid;
  align-content: start;
  padding: clamp(1.4rem, 1rem + 1.5vw, 2rem);
  border-radius: var(--radius);
  background: var(--glass-2);
  border: 1px solid var(--line);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease), border-color var(--mid), background var(--mid);
}
.scenario:hover { border-color: var(--line-2); background: var(--glass); }
.tag { margin-bottom: 1rem; font: 500 var(--t-micro) var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); }
.card-note {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.2rem 1rem;
  padding: 0.9rem 1.05rem;
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  border: 1px solid var(--loud-line);
  box-shadow: 0 24px 60px -30px var(--loud-glow);
}
.card-note b { font: 500 0.7rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--loud-hot); }
.card-note span { grid-column: 1; font-size: 1rem; font-weight: 400; line-height: 1.4; }
.card-note time { grid-row: 1; grid-column: 2; font: 0.72rem var(--mono); color: var(--text-dim); }
.dread { margin: 1.4rem 0 0.4rem; color: var(--text-mute); text-decoration: line-through; text-decoration-color: var(--line-2); }
.relief { font-size: 1.2rem; font-weight: 600; line-height: 1.3; }

/* ---------- Packs ---------- */
.packs-head { display: grid; gap: 1.75rem; align-items: end; }
.lang-switch {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: var(--pill);
  background: var(--bg-2);
  border: 1px solid var(--line);
  justify-self: start;
}
.lang-switch button {
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 1rem;
  border: 0;
  border-radius: var(--pill);
  background: transparent;
  color: var(--text-dim);
  font: 500 0.92rem var(--font);
  cursor: pointer;
  transition: background var(--fast), color var(--fast);
}
.lang-switch button:not([aria-checked="true"]):hover { color: var(--text); background: var(--bg-3); }
.lang-switch [aria-checked="true"] { background: var(--quiet); color: var(--bg); }

.pack-grid { display: grid; gap: 1rem; margin-top: 2rem; }
.pack {
  padding: 1.35rem;
  border-radius: var(--radius);
  background: var(--bg-2);
  border: 1px solid var(--line);
  transition: border-color 250ms, translate 250ms var(--ease), opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}
.pack:hover { border-color: var(--loud-line); translate: 0 -3px; }
.js .pack.observe { transition: border-color 250ms, translate 250ms var(--ease), opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
.pack header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; }
.pack h3 { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; }
.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.chip {
  padding: 0.3rem 0.7rem;
  border-radius: var(--pill);
  background: var(--bg-3);
  font: 0.8rem var(--mono);
  color: var(--text-dim);
}
.chip:first-child { background: var(--loud-soft); color: var(--loud-hot); }

/* ---------- Pricing ---------- */
/* Same card layout as the main page, in this design's colours and type. */
.plans { display: grid; gap: 1rem; margin-top: 2rem; }
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  border-radius: var(--radius);
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.plan h3 { margin: 0; font-size: 1.1rem; color: var(--text-dim); font-weight: 600; }
.price { margin: 0.5rem 0 0; display: flex; align-items: baseline; gap: 0.25rem; }
.amount { font-size: clamp(2.5rem, 1.8rem + 2.5vw, 3.5rem); font-weight: 600; letter-spacing: -0.05em; line-height: 1; }
.price-note { margin: 0.4rem 0 1.5rem; font: 0.8rem var(--mono); color: var(--text-mute); min-height: 1.3em; }
.features { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 0.7rem; flex: 1; }
.features li { position: relative; padding-left: 1.6rem; }
.features li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 0.85rem; height: 0.5rem; border-left: 2px solid var(--quiet); border-bottom: 2px solid var(--quiet); transform: rotate(-45deg); }
.features small { display: block; color: var(--text-mute); font-size: 0.82rem; }
/*
  Two plans, not three. The class carries two names on purpose: a later `@media (min-width: 960px)`
  rule sets `.plans` to three tracks, and without the extra specificity the two cards get laid out
  on a three-track grid — undersized and pushed off the axis the rest of the section uses.
  Everything here follows the page's grammar: one left edge, cards on the same surface as the packs.
*/
.plans.plans-two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; margin-inline: 0; gap: 1rem; }
.plans-two .plan { justify-content: space-between; }
.plans-two .price { margin-bottom: 0.15rem; }
.plans-two .btn { width: 100%; margin-top: 1.5rem; }

/* The shared list is a card like every other block on the page, not a bare bulleted list. */
.plan-shared { margin-top: 1rem; }
.feature-grid {
  list-style: none; margin: 1.1rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.65rem 1.75rem; align-items: start;
}
.feature-grid li { position: relative; padding-left: 1.6rem; line-height: 1.45; }
.feature-grid li::before {
  content: ""; position: absolute; left: 0; top: 0.45em; width: 0.85rem; height: 0.5rem;
  border-left: 2px solid var(--quiet); border-bottom: 2px solid var(--quiet); transform: rotate(-45deg);
}

.pricing .plans-note { text-align: left; margin-inline: 0; }
.pricing .plans-more { display: inline-block; width: fit-content; }

@media (max-width: 600px) {
  .plans.plans-two { grid-template-columns: 1fr; }
}

.plan-full {
  background: linear-gradient(170deg, color-mix(in srgb, var(--loud) 12%, var(--bg-2)), var(--bg-2) 55%);
  border-color: var(--loud-line);
  box-shadow: 0 30px 80px -40px var(--loud-glow);
}
.plan-full h3 { color: var(--text); }
.plan-full .features li::before { border-color: var(--loud); }
.plans-note { margin: 1.5rem 0 0; font: 0.8rem var(--mono); color: var(--text-dim); max-width: 60ch; }
.ribbon {
  position: absolute;
  top: -0.75rem;
  right: 1.5rem;
  margin: 0;
  padding: 0.2rem 0.75rem;
  border-radius: var(--pill);
  background: var(--loud);
  color: var(--on-loud);
  font: 600 0.72rem var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* ---------- FAQ ---------- */
.faq-list { margin-top: 3rem; max-width: 50rem; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 64px;
  padding: 1rem 0;
  font-size: 1.15rem;
  font-weight: 400;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 1.5rem; font-weight: 300; color: var(--quiet); transition: transform var(--mid) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); color: var(--loud); }
.faq summary:hover { color: var(--loud-hot); }
.faq details p { padding: 0 0 1.5rem; max-width: 62ch; color: var(--text-dim); }

/* ---------- Footer ---------- */
.footer {
  display: grid;
  gap: 2rem;
  margin-top: var(--space-section);
  padding: 3.5rem var(--pad-x) calc(6rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
.footer-brand p { margin-top: 0.4rem; color: var(--text-mute); }
.footer nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.footer nav a, .linklike {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
}
.footer nav a:hover, .linklike:hover { color: var(--text); }
.footer .play-badge { justify-self: start; }
.legal { font: 0.72rem/1.6 var(--mono); color: var(--text-mute); }

/* ---------- Chat ---------- */
.chat-launcher {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0 1.2rem 0 1rem;
  border: 1px solid var(--line-2);
  border-radius: var(--pill);
  background: var(--bg-3);
  color: var(--text);
  font: 500 1rem var(--font);
  cursor: pointer;
  box-shadow: 0 14px 34px var(--shadow);
  transition: transform var(--fast) var(--ease), border-color var(--fast);
}
.chat-launcher:hover { transform: translateY(-2px); border-color: var(--loud); }
.chat-launcher svg { width: 20px; height: 20px; fill: var(--loud); }
.chat-launcher[aria-expanded="true"] { display: none; }
.chat {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  height: min(78dvh, 640px);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  box-shadow: 0 -20px 60px var(--shadow);
  animation: sheet 420ms var(--ease);
}
.chat[hidden] { display: none; }
@keyframes sheet { from { transform: translateY(30px); opacity: 0; } }
.chat-head { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0.75rem 0.75rem 1.25rem; border-bottom: 1px solid var(--line); }
.chat-head h2 { font-size: 1.05rem; font-weight: 500; }
.chat-close { width: var(--tap); height: var(--tap); border: 0; border-radius: 50%; background: transparent; color: var(--text-dim); font-size: 1.6rem; cursor: pointer; }
.chat-close:hover { background: var(--bg-3); color: var(--text); }
.chat-log { list-style: none; margin: 0; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; overflow-y: auto; flex: 1; overscroll-behavior: contain; }
.msg { max-width: 88%; padding: 0.65rem 0.9rem; border-radius: 18px; font-size: 0.95rem; font-weight: 400; line-height: 1.45; white-space: pre-line; animation: sheet 300ms var(--ease); }
.msg.bot { align-self: flex-start; background: var(--bg-3); border-bottom-left-radius: 4px; }
.msg.user { align-self: flex-end; background: var(--loud); color: var(--on-loud); border-bottom-right-radius: 4px; }
.msg a { color: var(--loud-hot); }
.chat-quick { display: flex; gap: 0.4rem; padding: 0 1.25rem 0.75rem; overflow-x: auto; scrollbar-width: none; }
.chat-quick button {
  flex: none;
  min-height: 40px;
  padding: 0.3rem 0.9rem;
  border-radius: var(--pill);
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--text-dim);
  font: 0.85rem var(--font);
  cursor: pointer;
}
.chat-quick button:hover { border-color: var(--quiet); color: var(--text); }
.chat-form { display: flex; gap: 0.5rem; padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.chat-form input {
  flex: 1;
  min-width: 0;
  min-height: var(--tap);
  padding: 0 1rem;
  border-radius: var(--pill);
  border: 1px solid var(--line-2);
  background: var(--bg);
  color: var(--text);
  font: 1rem var(--font);
}
.chat-form input::placeholder { color: var(--text-mute); }
.chat-form input:focus { outline: 2px solid var(--loud); outline-offset: 1px; }
.chat-form button { min-height: var(--tap); padding: 0 1.2rem; border: 0; border-radius: var(--pill); background: var(--loud); color: var(--on-loud); font: 500 0.95rem var(--font); cursor: pointer; }
.chat-form button:hover { background: var(--loud-hot); }

/* ---------- Motion (only when allowed) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > *, .hero-visual { animation: rise 1.2s var(--ease) both; }
  .hero-copy > :nth-child(2) { animation-delay: 120ms; }
  .hero-copy > :nth-child(3) { animation-delay: 260ms; }
  .hero-copy > :nth-child(4) { animation-delay: 400ms; }
  .hero-visual { animation-delay: 500ms; }
  .hero-pulse-bars rect { animation: hero-bar 1.6s ease-in-out infinite; }
  .hero-pulse-bars rect:nth-child(2) { animation-delay: -0.4s; }
  .hero-pulse-bars rect:nth-child(3) { animation-delay: -0.9s; }
  .hero-pulse-bars rect:nth-child(4) { animation-delay: -0.2s; }
  .hero-pulse-bars rect:nth-child(5) { animation-delay: -1.2s; }
  .hero-pulse-dots circle { animation: breathe 4s ease-in-out infinite; }
  .hero-pulse-dots circle:nth-child(2) { animation-delay: 0.4s; }
  .hero-pulse-dots circle:nth-child(3) { animation-delay: 0.8s; }
  .hero-pulse-dots circle:nth-child(4) { animation-delay: 1.2s; }
  .hero-pulse-dots circle:nth-child(5) { animation-delay: 1.6s; }
  .hero-bars i { animation: talk-hero 900ms ease-in-out infinite; }
  .hero-bars i:nth-child(2) { animation-delay: -700ms; }
  .hero-bars i:nth-child(3) { animation-delay: -300ms; }
  .hero-bars i:nth-child(4) { animation-delay: -550ms; }
  .hero-bars i:nth-child(5) { animation-delay: -150ms; }
  .hero-note.is-hit { animation: glow 2.8s ease-in-out 1.6s infinite; }
  .phone[data-step="1"] .note { animation: arrive 700ms var(--ease) both; }
  .phone[data-step="1"] .note:nth-child(2) { animation-delay: 150ms; }
  .phone[data-step="1"] .note:nth-child(3) { animation-delay: 300ms; }
  .phone[data-step="1"] .note:nth-child(4) { animation-delay: 450ms; }
  .phone[data-step="1"] .note:nth-child(5) { animation-delay: 600ms; }
  .phone[data-step="3"] .say-bars i { animation: talk 900ms ease-in-out infinite; }
  .phone[data-step="3"] .say-bars i:nth-child(2) { animation-delay: -300ms; }
  .phone[data-step="3"] .say-bars i:nth-child(3) { animation-delay: -600ms; }
  .phone[data-step="3"] .say-bars i:nth-child(4) { animation-delay: -150ms; }
  .phone[data-step="3"] .say-bars i:nth-child(5) { animation-delay: -450ms; }
  .phone[data-step="4"] .say { animation: settle 500ms var(--ease); }
}
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes breathe { 50% { opacity: 0.35; } }
@keyframes hero-bar { 0%, 100% { transform: scaleY(0.55); } 50% { transform: scaleY(1); } }
@keyframes talk-hero { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }
@keyframes glow { 50% { box-shadow: 0 12px 60px -4px var(--loud-glow); } }
@keyframes arrive { from { opacity: 0; transform: translateY(-14px); } }
@keyframes talk { 50% { transform: scaleY(1); } }
@keyframes settle { 40% { transform: scale(0.97); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
  .js .observe { opacity: 1; transform: none; }
  .phone:is([data-step="3"]) .say-bars i { transform: scaleY(0.7); }
}

/* ---------- Larger screens ---------- */
@media (min-width: 640px) {
  .topbar nav { display: flex; }
  .topbar .btn { margin-left: 1rem; }
  .pack-grid { grid-template-columns: repeat(2, 1fr); }
  .chat { inset: auto 1.5rem 1.5rem auto; width: 400px; border-radius: var(--radius); }
}
@media (min-width: 900px) {
  .story-body { grid-template-columns: 1fr auto; gap: clamp(3rem, 8vw, 9rem); align-items: start; }
  .stage { grid-column: 2; grid-row: 1; top: max(calc(var(--bar-h) + 1.5rem), calc(50dvh - var(--phone-h) / 2 + 1rem)); padding: 0; background: none; }
  .phone { --phone-w: 300px; height: var(--phone-h); border-radius: 46px; border-bottom: 1px solid var(--line-2); padding-bottom: 10px; -webkit-mask-image: none; mask-image: none; }
  .screen { border-radius: 37px; padding-top: 2.2rem; }
  .note:nth-child(n+5) { display: grid; }
  .note { font-size: 0.82rem; }
  .story-steps { grid-column: 1; grid-row: 1; }
  .story-step { min-height: 92dvh; }
  .story-static .story-body { grid-template-columns: 1fr; }
  .story-static .step-phone .phone { height: var(--phone-crop); border-radius: 40px 40px 0 0; border-bottom: 0; padding-bottom: 0; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
  .story-static .step-phone .screen { padding-top: 1.1rem; border-radius: 31px 31px 0 0; }
  .story-static .step-phone .note:nth-child(n+5) { display: none; }
  .story-static .story-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 4rem; }
  .scenario-grid { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
  .scenario:nth-child(2) { margin-top: 3rem; margin-bottom: -3rem; }
  .packs-head { grid-template-columns: 1fr auto; }
  .footer { grid-template-columns: 1.4fr 2fr auto; align-items: center; }
  .legal { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .plans { grid-template-columns: 1fr 1fr 1.15fr; align-items: stretch; }
}
@media (min-width: 1040px) {
  main > .hero { grid-template-columns: 1.2fr 1fr; align-items: center; gap: 3rem; }
  .hero-visual { padding-top: calc(var(--hero-lift) + 1rem); }
}
@media (min-width: 1100px) {
  .pack-grid { grid-template-columns: repeat(3, 1fr); }
  .pack:nth-child(1) { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: center; }
  .pack:nth-child(1) h3 { font-size: 1.6rem; }
}

/* Keep highlighted keywords on one line. */
mark { white-space: nowrap; }

/* Phones: the story phone is a compact strip. Keep the keyword message in the visible part,
   and use a solid backdrop so panel text doesn't show through while it scrolls underneath. */
@media (max-width: 899px) {
  .stage { background: var(--bg); box-shadow: 0 14px 18px -12px var(--bg); }
  .stage .phone { -webkit-mask-image: linear-gradient(#000 88%, transparent); mask-image: linear-gradient(#000 88%, transparent); }
  .stage .clock,
  .stage .note:nth-child(2) { display: none; }
}

/* Social links reuse the footer link colours; only the glyph needs sizing. */
.footer .social { gap: 8px; }
.footer .social svg { width: 20px; height: 20px; flex: none; }

/* Tip under the pack grid; inherits the body text colour of each design. */
.pack-tip { margin-top: 1.5rem; max-width: 60ch; }
/* Mint, not coral: a tip is helpful, not urgent. */
.tip-label { display: inline-block; margin-right: 0.6rem; padding: 0.15rem 0.6rem; border-radius: var(--pill); background: var(--quiet-soft); color: var(--quiet); font: 500 var(--t-micro) var(--mono); letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 0.1em; }

/* Wordmark: "Loud" takes the colour of the logo's loud bars. */
.brand-loud { color: var(--loud); }

/* ---------- Legal pages (privacy, terms) ---------- */
.legal-doc { max-width: 72ch; margin: 0 auto; padding: 4rem var(--gutter) 6rem; }
.legal-doc h1 { font-size: var(--t-h2); font-weight: 300; }
.legal-doc .updated { margin-top: 0.9rem; font: 0.8rem var(--mono); color: var(--text-mute); }
.legal-doc .summary { margin: 2.25rem 0 0.5rem; padding: 1.25rem 1.5rem; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); }
.legal-doc .summary.warn { background: var(--loud-soft); border-color: var(--loud-line); }
.legal-doc h2 { margin-top: 2.75rem; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; }
.legal-doc h3 { margin-top: 1.75rem; font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.legal-doc p, .legal-doc li { color: var(--text-dim); line-height: 1.7; }
.legal-doc h2 + p, .legal-doc h3 + p, .legal-doc p + p, .legal-doc p + ul, .legal-doc ul + p { margin-top: 0.8rem; }
.legal-doc .summary p { margin: 0; color: var(--text); }
.legal-doc ul { margin: 0.8rem 0 0; padding-left: 1.25rem; display: grid; gap: 0.45rem; }
.legal-doc strong { color: var(--text); font-weight: 500; }
.legal-doc a { color: var(--loud-hot); text-underline-offset: 3px; }
.legal-doc .todo { background: var(--loud-soft); color: var(--loud-hot); border-radius: 4px; padding: 0 0.25em; }

/* ---------- Features page and "coming soon" tags ---------- */
.feature-list { margin: 1.25rem 0 0; display: grid; gap: 0.75rem; }
.feature { padding: 1.1rem 1.25rem; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); scroll-margin-top: calc(var(--bar-h) + 1rem); }
.feature dt { color: var(--text); font-weight: 500; }
.feature dd { margin: 0.35rem 0 0; color: var(--text-dim); line-height: 1.65; }
.feature-price { margin-left: 0.5rem; font: 0.8rem var(--mono); color: var(--text-mute); letter-spacing: 0; }
/* Neutral, not coral: an unbuilt feature is information, not an alarm. */
.soon { display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.55rem; border-radius: var(--pill); border: 1px solid var(--line-2); color: var(--text-mute); font: 500 var(--t-micro) var(--mono); letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 0.1em; white-space: nowrap; }
.plans-back { margin-top: 2.5rem; }
.plans-more { display: inline-block; margin-top: 0.75rem; color: var(--loud-hot); text-underline-offset: 3px; }


/* ---------- Walkthrough page ---------- */
/* Numbered steps that read as a sequence rather than a stack of cards: the number sits in the
   margin in mono, the same voice as .tag and .updated, with a hairline running the length of
   the step so the eye can see where one ends. */
.walk { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.25rem; }
.walk > li {
  position: relative;
  padding: 0.4rem 0 1.6rem 3.25rem;
  border-left: 1px solid var(--line);
  margin-left: 0.9rem;
}
.walk > li:last-child { border-left-color: transparent; padding-bottom: 0.4rem; }
.walk > li::before {
  content: counter(walk-item);
  counter-increment: walk-item;
  position: absolute;
  left: -0.9rem;
  top: 0.15rem;
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: var(--pill);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--loud-hot);
  font: 500 var(--t-micro) var(--mono);
}
.walk { counter-reset: walk-item; }
.walk h3 { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--text); letter-spacing: 0; }
.legal-doc .walk h3 + p { margin-top: 0.5rem; }

/* What the phone says, quoted: the app's own voice, set apart from our description of it. */
.said {
  margin: 1rem 0 0;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  background: var(--loud-soft);
  border: 1px solid var(--loud-line);
  color: var(--loud-hot);
  font-style: normal;
}
.said p { margin: 0; color: var(--loud-hot); }
.said .said-label { display: block; margin-bottom: 0.3rem; font: 500 var(--t-micro) var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }

/* On this page — a plain index, not a sidebar: the page is long and people arrive from search. */
.onpage { margin: 2rem 0 0; padding: 1.1rem 1.25rem; border-radius: var(--radius-sm); background: var(--glass-2); border: 1px solid var(--line); }
.onpage p { margin: 0 0 0.6rem; font: 500 var(--t-micro) var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
.onpage ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; }
.onpage a { color: var(--text-dim); }
.onpage a:hover { color: var(--loud-hot); }

/* Inline literals — a name typed exactly, a number, a template token. */
.legal-doc .mono { font: 0.9em var(--mono); color: var(--text); letter-spacing: 0; }
/* In running text a button that opens the chat should read as a link, not as footer furniture. */
.legal-doc .linklike { color: var(--loud-hot); font: inherit; text-decoration: underline; text-underline-offset: 3px; }
.legal-doc .linklike:hover { color: var(--loud); }

/* The Pro-only list is the same card as "In both plans", with loud ticks so the two read apart. */
.plan-only-pro { border-color: var(--loud-line); }
.plan-only-pro .feature-grid li::before { border-color: var(--loud); }