/* LoudNow 2 — Alarmy's layout (centred section heads, big soft cards, one card you
   scroll through) in LoudNow's own dark palette. Self-hosted fonts, shared with site 1. */
@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;
}

:root {
  /* Light, and only light: the same palette as LoudNow 1, which is the app's own. */
  --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);
  --on-loud: #ffffff;
  --quiet: #187053;
  --quiet-soft: rgb(27 122 88 / 0.1);
  --glass: rgb(22 35 63 / 0.035);
  --shadow: rgb(22 35 63 / 0.22);
  --device: #cfcac2;
  --hero-haze: rgb(255 255 255 / 0.85);
  --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);
  --loud-line: rgb(168 67 31 / 0.32);
  --quiet-line: rgb(27 122 88 / 0.32);
  --card-sheen: rgb(255 255 255 / 0.95);
  --cta-haze: rgb(168 67 31 / 0.1);
  --screen-top: #ffffff;
  --screen-bottom: #f2efea;

  --font: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  /* Alarmy's type: very large, very tight display headings over quiet body copy. */
  --t-hero: clamp(2.7rem, 1.1rem + 6vw, 5.6rem);
  --t-h2: clamp(2.2rem, 1.2rem + 3.6vw, 4rem);
  --t-h3: clamp(1.5rem, 1.15rem + 1.4vw, 2.1rem);
  --t-base: clamp(1.02rem, 0.97rem + 0.25vw, 1.12rem);
  --t-small: 0.875rem;
  --t-micro: 0.75rem;
  --t-lead: 1.1rem;
  --t-card-title: 1.25rem;
  /* Text inside the phone mock-ups, deliberately below the page ramp so it reads as a screen. */
  --t-device-label: 0.66rem;
  --t-device-meta: 0.7rem;
  --t-device-body: 0.8rem;
  --t-device-body-lg: 0.84rem;

  --gutter: clamp(1.25rem, 0.6rem + 3vw, 3.5rem);
  --max: 1180px;
  --pad-x: max(var(--gutter), calc((100% - var(--max)) / 2));
  --space-section: clamp(5.5rem, 3.5rem + 7vw, 10rem);
  --bar-h: 76px;
  --radius-xl: 34px;
  --radius: 22px;
  --radius-sm: 14px;
  --mark: 4px;
  --pill: 999px;
  --tap: 44px;

  --hero-phone-w: 340px;
  --hero-tilt: -2deg;
  --hero-pulse-w: 300px;
  --hero-lift: 7.5rem;

  --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: calc(var(--bar-h) + 1rem); }
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.02; letter-spacing: -0.035em; }
p { margin: 0; }
strong, b { font-weight: 500; }
:focus-visible { outline: 2px solid var(--loud); outline-offset: 3px; border-radius: var(--mark); }
.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 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 1.6rem;
  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: var(--glass); border-color: var(--quiet); }
.btn-small { min-height: 38px; padding: 0 1.1rem; font-size: var(--t-small); }
.play-badge { display: inline-block; border-radius: var(--radius-sm); }
.play-badge img { height: 74px; width: auto; }

/* ---------- Top bar: a solid bar with the card sitting in it ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 0.6rem var(--gutter);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.45rem 0.45rem 0.45rem 1.1rem;
  border-radius: var(--pill);
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.brand { display: inline-flex; align-items: center; gap: 0.55rem; font-size: var(--t-lead); font-weight: 500; letter-spacing: -0.02em; text-decoration: none; }
.brand-loud { color: var(--loud); }
.bar nav { display: flex; gap: 0.35rem; margin-left: auto; }
.bar nav a {
  padding: 0.5rem 0.85rem;
  white-space: nowrap;
  border-radius: var(--pill);
  color: var(--text-dim);
  font-size: var(--t-small);
  text-decoration: none;
  transition: color var(--fast), background var(--fast);
}
.bar nav a:hover { color: var(--text); background: var(--glass); }

/* ---------- Section furniture ---------- */
main > section { padding: var(--space-section) var(--pad-x); }
/* 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] { scroll-margin-top: 0; }
/* The card-scroll's lead is its heading's own padding, not --space-section, so it gets the same
   landing as every other section by subtracting the one it actually has. */
main > section.cardscroll[id] { scroll-margin-top: calc(1.25rem - 2rem); }

.section-head { display: grid; justify-items: center; gap: 1rem; text-align: center; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.section-title { font-size: var(--t-h2); }
.section-title span { color: var(--loud); }
.section-sub { max-width: 46ch; color: var(--text-dim); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.35rem 0.9rem 0.35rem 0.75rem;
  border-radius: var(--pill);
  border: 1px solid var(--line);
  background: var(--glass);
  font: 500 var(--t-micro) / 1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-mute); }
.eyebrow-loud { color: var(--loud); border-color: var(--loud-line); background: var(--loud-soft); }
.eyebrow-loud .dot { background: var(--loud); }
.eyebrow-quiet { color: var(--quiet); border-color: var(--quiet-line); background: var(--quiet-soft); }
.eyebrow-quiet .dot { background: var(--quiet); }

/* ---------- Hero: LoudNow 1's, unchanged ---------- */
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; }
/* The hero label is plain mint type, not one of the section pills. */
.hero .eyebrow { padding: 0; border: 0; background: none; letter-spacing: 0.14em; color: var(--quiet); }
.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; }
.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: "↓"; transition: transform var(--mid) var(--ease); }
.link-arrow:hover { color: var(--text); }
.link-arrow:hover::after { transform: translateY(3px); }

.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;
  /* A mask reads only opacity, so any solid colour gives the same fade; a palette token keeps it on-system. */
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 55%, var(--bg) 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 55%, var(--bg) 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: var(--t-device-body-lg);
  line-height: 1.35;
}
.hero-note b { font: 500 var(--t-device-label) 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: var(--t-device-body); 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: var(--mark); 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 var(--t-device-meta) 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); }

/* ---------- The card you scroll through ---------- */
.cardscroll { padding-top: 0; padding-bottom: 0; }
/* The heading still lands on its own, but the card follows close behind it — which it did not
   while this was held open to 58svh and its contents centred in that: a third of the space went
   above the eyebrow and the rest pushed the card off the bottom of the screen. Its own height is
   enough. The pinned card takes its scroll budget from .track, which does not depend on this. */
.cardscroll .section-head {
  margin-bottom: 0;
  padding-top: 2rem;
}
/* One viewport for the pinned card plus an equal scroll budget per step. */
.track { position: relative; height: calc(100svh + 4 * 70svh); }
.no-sticky .track { height: auto; }
.track-sticky { position: sticky; top: calc(var(--bar-h) + 0.5rem); height: calc(100svh - var(--bar-h) - 1.5rem); display: grid; align-items: center; }
.no-sticky .track-sticky { position: static; height: auto; }
.showcard {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  max-height: 100%;
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 0% 0%, var(--card-sheen), transparent 60%),
    var(--bg-2);
  box-shadow: 0 40px 90px -50px var(--shadow);
  overflow: hidden;
}
.showcard-stage { display: grid; justify-items: center; }
.phone {
  position: relative;
  width: min(280px, 100%);
  height: min(52svh, 420px);
  padding: 10px 10px 0;
  border-radius: 46px;
  background: var(--device);
  border: 1px solid var(--line-2);
  overflow: hidden;
  transition: box-shadow var(--slow) var(--ease);
}
.screen {
  position: relative;
  height: 100%;
  padding: 1.1rem 0.8rem;
  border-radius: 37px;
  background: linear-gradient(180deg, var(--screen-top), var(--screen-bottom));
  overflow: hidden;
}
.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: var(--t-device-body);
  line-height: 1.35;
  opacity: 0.55;
  transition: opacity var(--mid) var(--ease), border-color var(--mid), background var(--mid);
}
.note b { font: 500 var(--t-device-label) 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: var(--mark); padding: 0 0.15em; margin: 0 -0.15em; transition: background var(--mid), color var(--mid); }
.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: var(--t-device-body); font-weight: 500; line-height: 1.25; }
.say-text small { font: 400 var(--t-device-label) 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: var(--t-micro); font-weight: 600; }

.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); }
.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); }
.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); }

.showsteps { list-style: none; display: grid; margin: 0; padding: 0; }
/* Every step sits in the same cell; only the active one is shown, so the card never resizes. */
.showstep { grid-area: 1 / 1; display: grid; gap: 0.7rem; align-content: center; opacity: 0; transform: translateY(14px); visibility: hidden; transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease), visibility var(--mid); }
.showstep.is-active { opacity: 1; transform: none; visibility: visible; }
.showstep .num { font: 500 var(--t-micro) / 1 var(--mono); letter-spacing: 0.2em; color: var(--loud); }
.showstep h3 { font-size: var(--t-h3); font-weight: 300; }
.showstep p { max-width: 42ch; color: var(--text-dim); }
.showstep[data-step="3"] .num, .showstep[data-step="3"] h3 { color: var(--loud); }
.showstep[data-step="4"] .num, .showstep[data-step="4"] h3 { color: var(--quiet); }
.rail { display: flex; gap: 0.4rem; margin-top: 2rem; }
.rail span { width: 34px; height: 3px; border-radius: var(--pill); background: var(--line-2); transition: background var(--mid); }
.rail span.on { background: var(--loud); }
.rail span.done { background: var(--quiet); }

/* Without sticky support (or with reduced motion) the card becomes a plain list. */
.no-sticky .showcard { grid-template-columns: 1fr; }
.no-sticky .showsteps { gap: 2.5rem; }
.no-sticky .showstep { grid-area: auto; opacity: 1; transform: none; visibility: visible; }
.no-sticky .rail { display: none; }

/* ---------- Feature tiles ---------- */
/* Four across, two rows: the same even block Alarmy uses for its mission grid. */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 1rem; }
.tile {
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  padding: 1.6rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-2);
  text-align: center;
  transition: transform var(--mid) var(--ease), border-color var(--mid), background var(--mid);
}
.tile:hover { transform: translateY(-4px); border-color: var(--line-2); background: var(--bg-3); }
.tile b { font-size: 1rem; font-weight: 500; }
.tile span:last-child { font-size: var(--t-small); color: var(--text-mute); }
.tile-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 0.6rem;
  border-radius: var(--radius-sm);
  line-height: 1;
}
.tile-icon svg { width: 24px; height: 24px; }
.t-loud { background: var(--loud-soft); color: var(--loud); box-shadow: inset 0 0 0 1px var(--loud-line); }
.t-quiet { background: var(--quiet-soft); color: var(--quiet); box-shadow: inset 0 0 0 1px var(--quiet-line); }

/* ---------- Scenarios ---------- */
.scenario-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1rem; }
.scenario {
  display: grid;
  gap: 0.8rem;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.2rem);
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.tag { font: 500 var(--t-micro) / 1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--loud); }
.card-note {
  display: grid;
  gap: 0.2rem;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-2);
  background: var(--bg);
  font-size: var(--t-small);
}
.card-note b { font: 500 var(--t-device-meta) var(--mono); color: var(--text-dim); }
.card-note time { font: 400 var(--t-device-meta) var(--mono); color: var(--text-mute); }
.dread { color: var(--text-dim); }
.relief { color: var(--quiet); }

/* ---------- Packs ---------- */
.pack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); grid-auto-rows: 1fr; gap: 1rem; }
.pack {
  display: grid;
  align-content: start;
  gap: 0.9rem;
  padding: 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.pack header { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.pack h3 { font-size: var(--t-card-title); font-weight: 500; letter-spacing: -0.02em; }
/* The two language cards are examples of what you can type, not packs in the app. */
.pack-tag {
  padding: 0.15rem 0.6rem;
  border-radius: var(--pill);
  border: 1px solid var(--quiet-line);
  background: var(--quiet-soft);
  font: 500 var(--t-micro) / 1.5 var(--mono);
  color: var(--quiet);
}
.pack-example { border-style: dashed; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
  padding: 0.3rem 0.7rem;
  border-radius: var(--pill);
  border: 1px solid var(--line-2);
  background: var(--glass);
  font: 400 0.8rem var(--mono);
  color: var(--text-dim);
}
.pack-tip {
  margin-top: 1rem;
  padding: 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--quiet-line);
  background: var(--quiet-soft);
  color: var(--text-dim);
}
.tip-label { display: block; margin-bottom: 0.4rem; font: 500 var(--t-micro) / 1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--quiet); }
.pack-tip strong { color: var(--text); }

/* ---------- Pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; max-width: 720px; margin: 0 auto; }
.plan {
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  padding: 2.2rem 1.5rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: var(--bg-2);
  text-align: center;
}
.plan-full { border-color: var(--loud-line); background: linear-gradient(180deg, var(--loud-soft), var(--bg-2) 55%); }
.plan h3 { font-size: var(--t-card-title); font-weight: 500; letter-spacing: -0.02em; }
.price { margin-top: 0.6rem; }
.amount { font-size: clamp(2.5rem, 1.8rem + 2.5vw, 3.5rem); font-weight: 500; letter-spacing: -0.045em; }
.price-note { font-size: var(--t-small); color: var(--text-mute); }
.plan .btn { width: 100%; margin-top: 1.5rem; }
.plan-shared {
  max-width: 720px;
  margin: 1rem auto 0;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.2rem);
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.plan-shared h3 { font-size: var(--t-lead); font-weight: 500; letter-spacing: -0.01em; }
.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.6rem 1.75rem; }
.feature-grid li { position: relative; padding-left: 1.6rem; font-size: var(--t-small); color: var(--text-dim); }
.feature-grid li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 6px;
  border-left: 1.5px solid var(--quiet);
  border-bottom: 1.5px solid var(--quiet);
  transform: rotate(-45deg);
}
.soon { margin-left: 0.4rem; padding: 0.1rem 0.5rem; border-radius: var(--pill); border: 1px solid var(--line-2); font: 400 var(--t-micro) var(--mono); color: var(--text-mute); }
.plans-note { max-width: 720px; margin: 1.5rem auto 0; font-size: var(--t-small); color: var(--text-mute); text-align: center; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 820px; margin: 0 auto; display: grid; gap: 0.6rem; }
.faq details {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg-2);
  transition: border-color var(--fast);
}
.faq details[open] { border-color: var(--line-2); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  font-size: var(--t-lead);
  font-weight: 400;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; color: var(--loud); transition: transform var(--mid) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 1.4rem 1.4rem; color: var(--text-dim); }

/* ---------- Closing CTA ---------- */
.cta { padding-bottom: calc(var(--space-section) / 1.5); }
.cta-inner {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  padding: clamp(2.5rem, 2rem + 4vw, 5rem) 1.5rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--loud-line);
  background:
    radial-gradient(80% 120% at 50% 0%, var(--cta-haze), transparent 65%),
    var(--bg-2);
  text-align: center;
}
.cta h2 { font-size: var(--t-h2); }
.cta h2 span { color: var(--loud); }

/* ---------- Footer ---------- */
.footer {
  display: grid;
  gap: 1.5rem;
  padding: 3rem var(--pad-x) 4rem;
  border-top: 1px solid var(--line);
  color: var(--text-dim);
}
/* The wordmark keeps full contrast even though the footer around it is muted. */
.footer .brand { color: var(--text); }
.footer-brand p { margin-top: 0.4rem; font-size: var(--t-small); color: var(--text-mute); }
.footer nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
.footer nav a { min-height: var(--tap); display: inline-flex; align-items: center; font-size: var(--t-small); text-decoration: none; }
.footer nav a:hover { color: var(--text); }
.legal { font-size: var(--t-micro); color: var(--text-mute); }

/* ---------- Help chat, shared with LoudNow 1 ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.linklike { border: 0; background: none; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.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: var(--radius-sm); font-size: 1rem; 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); }

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

@keyframes hero-bar { 0%, 100% { transform: scaleY(0.55); } 50% { transform: scaleY(1); } }
@keyframes breathe { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.8; } }
@keyframes talk { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }

@media (min-width: 900px) {
  .chat { inset: auto 1.5rem 1.5rem auto; width: 400px; border-radius: var(--radius); }
  main > .hero { grid-template-columns: 1.2fr 1fr; align-items: center; gap: 3rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .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; }
  .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; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .observe { opacity: 1; transform: none; }
}

/* ---------- Narrow ---------- */
@media (max-width: 880px) {
  .showcard { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 1.2rem; padding: 1.25rem; }
  .showcard-copy { display: grid; justify-items: center; }
  .showstep { justify-items: center; }
  .showstep p { max-width: 34ch; }
  .phone { height: min(38svh, 320px); width: min(240px, 100%); }
  .rail { margin-top: 1.2rem; justify-content: center; }
  .track { height: calc(100svh + 4 * 58svh); }
}
@media (max-width: 880px) {
  .bar { gap: 0.5rem; padding-left: 0.9rem; }
  .bar nav { gap: 0; }
  .bar nav a { padding: 0.5rem 0.55rem; }
}
@media (max-width: 700px) {
  .bar nav { display: none; }
  /* The hidden nav was the only thing pushing the right-hand group to the edge, so without it
     the button drifted back toward the middle. */
  .bar > .btn { margin-left: auto; }
}
@media (max-width: 600px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer nav { gap: 0 1rem; }
}

/* 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); }