/* ============================================================================
   InSync — showcase site
   Tokens mirror the product's design system:
     insync-app/src/lib/theme.ts  and  "insync brand kit.png"
   ========================================================================= */

:root {
  /* Night-sky base (theme.ts Colors) */
  --navy-deep: #050b1b;
  --navy: #0a1228;
  --navy-2: #0f1a38;

  /* Brand kit palette */
  --brand-navy: #0a3976;
  --brand-ocean: #187aa7;
  --brand-cyan: #59cceb;
  --brand-sky: #9dcceb;
  --brand-mint: #8be0de;

  /* App accents (theme.ts) */
  --accent: #5bb3e8;
  --accent-deep: #2f8fcb;
  --accent-glow: rgba(91, 179, 232, 0.35);
  --amber: #f5a524;
  --amber-soft: #f2c063;
  --mint: #5be3b8;
  --violet: #9f8ce8;
  --flame: #ef6a4a;
  --leaf: #86c95e;

  /* Text */
  --text: #eaf1fb;
  --text-muted: rgba(220, 232, 255, 0.80);
  --text-subtle: rgba(220, 232, 255, 0.68);

  /* Surfaces */
  --surface: linear-gradient(180deg, rgba(28, 48, 90, 0.55), rgba(12, 22, 46, 0.5));
  --border: rgba(120, 170, 230, 0.16);
  --border-strong: rgba(120, 170, 230, 0.28);

  /* Shape + rhythm (theme.ts Radius / Spacing) */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 22px;
  --r-xl: 26px;
  --r-pill: 999px;

  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --maxw: 1280px;

  --shadow-card: 0 20px 50px rgba(0, 0, 0, 0.4);
}

/* --------------------------------------------------------------- reset --- */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background-color: var(--navy-deep);
  color: var(--text);
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The app's background formula, translated to the page. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 70% at 20% 0%, #1a2e5e 0%, #0a1228 45%, #050b1b 100%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38rem 30rem at 85% 8%, rgba(91, 179, 232, 0.16), transparent 70%),
    radial-gradient(34rem 28rem at 8% 78%, rgba(27, 122, 167, 0.18), transparent 70%);
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

p { margin: 0; }

ul, ol { margin: 0; padding: 0; }

a {
  color: var(--accent);
  text-decoration-color: rgba(91, 179, 232, 0.45);
  text-underline-offset: 3px;
}

a:hover { text-decoration-color: currentColor; }

/* ------------------------------------------------------------ a11y ------ */

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--accent);
  color: var(--navy);
  font-weight: 700;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  text-decoration: none;
}

.skip-link:focus { transform: translate(-50%, 0); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Anchors must clear the sticky header. */
:target,
.section,
#main { scroll-margin-top: 84px; }

/* --------------------------------------------------------- primitives --- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  margin: 0 0 0.9rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.lede {
  color: var(--text-muted);
  font-size: 1.0625rem;
  max-width: 58ch;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--r-pill);
  font: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.btn:hover { transform: translateY(-1px); }

.btn--primary {
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  color: var(--navy);
  box-shadow: 0 4px 24px var(--accent-glow);
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-strong);
  color: var(--text);
}

.btn--ghost:hover { background: rgba(255, 255, 255, 0.08); }

/* ------------------------------------------------------------ brand ----- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--text);
}

.brand__badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  /* Brand-kit light-sky badge: keeps the navy silhouette legible on a dark page. */
  background: linear-gradient(160deg, var(--brand-mint), var(--brand-sky));
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.brand__badge img { width: 74%; height: auto; }

.brand__word {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.brand__word span { color: var(--brand-cyan); }

/* ----------------------------------------------------------- header ----- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(5, 11, 27, 0.72);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-bottom: 1px solid var(--border);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 68px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.nav ul {
  display: flex;
  gap: 1.75rem;
  list-style: none;
}

.nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
}

.nav a:hover { color: var(--text); }

/* Narrow screens: drop the section links (the footer repeats them) but keep the
   primary action reachable. No hamburger, no JS, nothing to trap focus in. */
@media (max-width: 760px) {
  .nav ul { display: none; }
}

@media (max-width: 420px) {
  .nav .btn { padding: 0.65rem 1rem; font-size: 0.875rem; }
  .brand__word { font-size: 1.125rem; }
}

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

.hero { padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5rem); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (max-width: 880px) {
  .hero__grid { grid-template-columns: 1fr; }
}

.hero h1 {
  font-size: clamp(2.25rem, 6.2vw, 3.75rem);
  letter-spacing: -0.035em;
  margin-bottom: 1.25rem;
  text-wrap: balance;
}

.hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--brand-cyan), var(--brand-mint));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero .lede { font-size: clamp(1.0625rem, 2.2vw, 1.25rem); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.95rem 0.45rem 0.6rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: rgba(245, 165, 36, 0.09);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--amber-soft);
}

.status-pill b {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: var(--r-pill);
  background: var(--amber);
  color: var(--navy);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Hero art: the brand mark on its brand-kit badge, over the layered wave. */
.hero__art {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(28, 48, 90, 0.5), rgba(12, 22, 46, 0.45));
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.hero__art-inner {
  padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 3vw, 2rem);
  text-align: center;
}

.hero__art-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.hero__art-badge {
  display: grid;
  place-items: center;
  width: clamp(140px, 36%, 190px);
  aspect-ratio: 1;
  margin: 1.5rem auto;
  border-radius: var(--r-xl);
  /* The brand kit's light-sky badge variant — the navy silhouette needs a light
     ground to stay legible, so the lockup is never dropped straight onto navy. */
  background: linear-gradient(160deg, var(--brand-mint), var(--brand-sky));
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.5);
}

.hero__art-badge img { width: 72%; }

.hero__art-copy {
  font-size: 0.875rem;
  color: var(--text-muted);
  max-width: 34ch;
  margin-inline: auto;
}

.hero__art .wave {
  display: block;
  width: 100%;
  height: clamp(90px, 14vw, 130px);
  margin-top: auto;
}

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

.section { padding: clamp(3.5rem, 8vw, 6rem) 0; }

.section--rule { border-top: 1px solid var(--border); }

.section__head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }

.section__head h2 {
  font-size: clamp(1.75rem, 4.2vw, 2.5rem);
  margin-bottom: 1rem;
  text-wrap: balance;
}

/* -------------------------------------------------------- how it works -- */

.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  counter-reset: step;
}

@media (max-width: 880px) {
  .steps { grid-template-columns: 1fr; }
}

.steps > li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.step__num {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: rgba(91, 179, 232, 0.12);
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.steps h3 { font-size: 1.1875rem; }

.steps p { color: var(--text-muted); font-size: 0.9375rem; }

.steps .detail {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--text-subtle);
}

/* --------------------------------------------------------- categories -- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  margin-top: 1.5rem;
}

.chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.95rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.875rem;
  color: var(--text-muted);
}

.chips .dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--c, var(--accent));
  flex: none;
}

/* ----------------------------------------------------------- profiles -- */

.profiles {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}

.profile {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  border-top: 3px solid var(--c, var(--accent));
}

.profile h3 {
  font-size: 1.25rem;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.profile__need {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c, var(--accent));
}

.profile p { color: var(--text-muted); font-size: 0.9375rem; }

.profile blockquote {
  margin: auto 0 0;
  padding: 0.9rem 1rem;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.04);
  border-left: 2px solid var(--c, var(--accent));
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--text);
}

.note {
  margin-top: 1.75rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--border-strong);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.875rem;
  color: var(--text-subtle);
}

/* -------------------------------------------------------------- voice -- */

.voice__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}

@media (max-width: 880px) {
  .voice__grid { grid-template-columns: 1fr; }
}

.voice__grid h2 {
  font-size: clamp(1.75rem, 4.2vw, 2.5rem);
  margin-bottom: 1rem;
  text-wrap: balance;
}

.voice__list {
  list-style: none;
  display: grid;
  gap: 1rem;
  margin-top: 1.75rem;
}

.voice__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

.voice__list b { color: var(--text); font-weight: 600; }

.tick {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.1rem;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: rgba(91, 227, 184, 0.14);
  color: var(--mint);
}

/* Decorative waveform — pure CSS, no audio implied. */
.waveform {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: clamp(200px, 26vw, 300px);
  padding: 1rem 0.5rem;
}

.waveform span {
  display: block;
  flex: 1 1 0;
  min-width: 4px;
  max-width: 9px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--brand-mint), var(--accent), var(--accent-deep));
  opacity: 0.9;
}

/* --------------------------------------------------------------- CTA ---- */

.cta {
  text-align: center;
  padding: clamp(2.25rem, 6vw, 3.5rem) clamp(1.25rem, 5vw, 3rem);
  border-radius: var(--r-xl);
}

.cta h2 { font-size: clamp(1.625rem, 4vw, 2.25rem); margin-bottom: 1rem; }

.cta .lede { margin-inline: auto; }

.form-note {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--text-subtle);
}

/* ------------------------------------------------------------ footer ---- */

.site-footer {
  border-top: 1px solid var(--border);
  padding: clamp(2.5rem, 6vw, 3.5rem) 0 2.5rem;
  background: rgba(5, 11, 27, 0.5);
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}

.site-footer nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.site-footer nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9375rem;
}

.site-footer nav a:hover { color: var(--text); }

.colophon {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--text-subtle);
  display: grid;
  gap: 0.5rem;
}

/* ----------------------------------------------------------- legal ------ */

.legal { padding: clamp(3rem, 8vw, 5rem) 0; }

.legal__body { max-width: 72ch; }

.legal__body h2 {
  font-size: 1.375rem;
  margin: 2.5rem 0 0.75rem;
}

.legal__body p,
.legal__body li {
  color: var(--text-muted);
  margin-bottom: 0.9rem;
}

.legal__body ul { padding-left: 1.25rem; }

.legal__body li { list-style: disc; }

.banner {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  border-radius: var(--r-md);
  border: 1px solid rgba(245, 165, 36, 0.4);
  background: rgba(245, 165, 36, 0.08);
}

.banner strong { color: var(--amber-soft); display: block; margin-bottom: 0.35rem; }

.banner p { color: var(--text-muted); font-size: 0.9375rem; }

.back-link {
  display: inline-block;
  margin-bottom: 2rem;
  font-size: 0.9375rem;
  text-decoration: none;
}

/* ─── The two-voice exhibit (hero) ──────────────────────────────────────────
   This replaced a card showing the app icon. A product site should show the
   product; these are real library scripts, so they are the product. */
.voices__label {
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-dim); margin: 0 0 .9rem;
}
.voices { display: grid; gap: .9rem; }
.voice {
  margin: 0; padding: 1.15rem 1.25rem;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  border-left-width: 3px;
}
.voice--challenger { border-left-color: #F5A524; }
.voice--companion  { border-left-color: #5BB3E8; }
.voice figcaption { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .55rem; }
.voice figcaption b { font-size: .95rem; letter-spacing: .01em; }
.voice figcaption span {
  font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--text-dim);
}
.voice blockquote { margin: 0; }
.voice blockquote p {
  margin: 0; font-size: 1rem; line-height: 1.62; color: var(--text-soft);
  text-wrap: pretty;
}
.voice .pause {
  font-size: .76em; color: var(--text-faint); letter-spacing: .02em;
  padding: 0 .15em; white-space: nowrap;
}
.voices__foot { margin: 1rem 0 0; font-size: .84rem; color: var(--text-dim); line-height: 1.55; }

/* ─── Screenshot slots ─────────────────────────────────────────────────────
   Sized to iPhone portrait so dropping real screenshots in needs no CSS change. */
.screens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.screen { margin: 0; }
/* The owner's screenshots carry the device frame, so they are 426x886 and already
   rounded — no border or radius of ours, which would double the bezel. */
.screen img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,.45));
}
.screen__slot {
  width: 100%; aspect-ratio: 426 / 886; border-radius: 26px;
  border: 1px solid var(--border); display: block;
}
.screen__slot {
  display: grid; place-items: center;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 12px, transparent 12px 24px);
  color: var(--text-faint); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
}
.screen figcaption { margin-top: .8rem; font-size: .86rem; color: var(--text-dim); line-height: 1.5; }
.detail--wide { max-width: 62ch; margin-top: 2.2rem; }

@media (max-width: 760px) {
  .screens { grid-template-columns: 1fr; gap: 2rem; max-width: 320px; margin-inline: auto; }
}

/* The hero exhibit replaced a bordered art card; its own cards carry the chrome now,
   so the outer card would be a box inside a box — and it was clipping the label. */
.hero__art {
  background: none;
  border: 0;
  box-shadow: none;
  overflow: visible;
  padding: 0;
}

/* ─── Premium pass: fewer words means the space has to carry more ───────────
   Larger type, more air between sections, less chrome on the cards. The page
   had the density of documentation; a product page should feel unhurried. */
.section { padding-block: clamp(5rem, 12vw, 9rem); }
.section__head { margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.section h2 {
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-wrap: balance;
}
.section .lede { font-size: clamp(1.05rem, 1.9vw, 1.2rem); line-height: 1.6; max-width: 46ch; }
.eyebrow { opacity: .72; }

/* Steps read as a rhythm, not as three boxes of prose. */
.steps--lean { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.5rem, 4vw, 2.75rem); grid-template-columns: repeat(3, 1fr); }
.steps--lean li { background: none; border: 0; box-shadow: none; padding: 0; }
.steps--lean h3 { font-size: 1.1rem; margin: .9rem 0 .4rem; letter-spacing: -0.01em; }
.steps--lean p { margin: 0; color: var(--text-dim); line-height: 1.6; max-width: 30ch; }
.steps--lean .step__num {
  display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 999px;
  background: rgba(91,179,232,.1); border: 1px solid var(--border);
  font-size: .85rem; color: var(--accent);
}
@media (max-width: 760px) { .steps--lean { grid-template-columns: 1fr; } }

/* Profile cards: a name, its job, and one line of the real thing. */
.profile blockquote {
  margin: .75rem 0 0; font-size: 1.02rem; line-height: 1.55; color: var(--text-soft);
  border: 0; padding: 0; text-wrap: pretty;
}
.profile { padding: clamp(1.25rem, 3vw, 1.75rem); }
.profile h3 { font-size: 1.05rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   Ambient layer — bigger, slower, calmer.
   Everything here is decorative and every animation is switched off entirely
   under prefers-reduced-motion at the bottom of this block.
   ═══════════════════════════════════════════════════════════════════════════ */

.hero { position: relative; overflow: hidden; }

.aurora {
  position: absolute; inset: -20% -10% 0; z-index: 0; pointer-events: none;
  filter: blur(72px); opacity: 1;
}
.aurora__blob { position: absolute; display: block; border-radius: 50%; mix-blend-mode: screen; }
.aurora__blob--1 {
  width: 56vw; height: 56vw; left: -4vw; top: -14vw;
  background: radial-gradient(circle, rgba(91,179,232,.88), transparent 64%);
  animation: drift-1 54s ease-in-out infinite alternate;
}
.aurora__blob--2 {
  width: 44vw; height: 44vw; right: -6vw; top: 4vw;
  background: radial-gradient(circle, rgba(139,224,222,.52), transparent 64%);
  animation: drift-2 67s ease-in-out infinite alternate;
}
.aurora__blob--3 {
  width: 38vw; height: 38vw; left: 34vw; top: 22vw;
  background: radial-gradient(circle, rgba(245,165,36,.26), transparent 68%);
  animation: drift-3 83s ease-in-out infinite alternate;
}
@keyframes drift-1 { to { transform: translate3d(7vw, 5vw, 0) scale(1.14); } }
@keyframes drift-2 { to { transform: translate3d(-9vw, 8vw, 0) scale(1.09); } }
@keyframes drift-3 { to { transform: translate3d(5vw, -6vw, 0) scale(1.18); } }

/* The breath. 4s in, 6s out — the pace you would coach someone to breathe at,
   not a decorative pulse. It is the quietest thing on the page and the one most
   likely to actually slow a visitor down. */
.breath {
  position: absolute; left: 50%; top: 42%; width: 34vw; height: 34vw;
  margin: -17vw 0 0 -17vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(91,179,232,.32), transparent 60%);
  animation: breathe 10s cubic-bezier(.4,0,.5,1) infinite;
}
@keyframes breathe {
  0%   { transform: scale(.88); opacity: .40; }
  40%  { transform: scale(1.10); opacity: .72; }  /* 4s inhale */
  100% { transform: scale(.88); opacity: .40; }   /* 6s exhale */
}

.hero__grid, .hero .wrap { position: relative; z-index: 1; }
/* The wash brightens the top-left, which is exactly where the headline sits. This veil
   keeps the text contrast where it was before the aurora existed. */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(105deg, rgba(5,11,27,.58) 0%, rgba(5,11,27,.20) 44%, transparent 68%);
}

/* ─── Enlarged type ──────────────────────────────────────────────────────── */
.hero h1 { font-size: clamp(2.75rem, 7.4vw, 5.25rem); line-height: 1.02; letter-spacing: -.042em; }
.hero .lede { font-size: clamp(1.15rem, 2.1vw, 1.45rem); max-width: 40ch; line-height: 1.55; }
.section h2 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); }
.section { padding-block: clamp(6rem, 14vw, 11rem); }

/* ─── The affirmation band ───────────────────────────────────────────────── */
.band {
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(91,179,232,.045), transparent 60%);
  padding-block: clamp(5rem, 12vw, 8.5rem);
  text-align: center;
}
.band__inner { display: grid; justify-items: center; gap: 1.6rem; }
.band__ring {
  width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid rgba(91,179,232,.45);
  box-shadow: 0 0 0 0 rgba(91,179,232,.22);
  animation: ring 10s cubic-bezier(.4,0,.5,1) infinite;
}
@keyframes ring {
  0%   { transform: scale(.9);  box-shadow: 0 0 0 0 rgba(91,179,232,.22); }
  40%  { transform: scale(1.0); box-shadow: 0 0 0 18px rgba(91,179,232,0); }
  100% { transform: scale(.9);  box-shadow: 0 0 0 0 rgba(91,179,232,0); }
}
.band__line {
  margin: 0; max-width: 20ch;
  font-size: clamp(1.75rem, 4.4vw, 3.1rem); line-height: 1.22; letter-spacing: -.03em;
  color: var(--text); text-wrap: balance;
  transition: opacity .9s ease, transform .9s ease;
}
.band__line.is-out { opacity: 0; transform: translateY(-10px); }
.band__src {
  margin: 0; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint);
}

/* ─── Sections rise into place ───────────────────────────────────────────── */
.reveal { opacity: 1; }                    /* default: visible, so no-JS loses nothing */
@media (prefers-reduced-motion: no-preference) {
  /* Scoped to .reveals-armed, which JS adds only once it has an IntersectionObserver
     and is ready to un-hide. Without JS, without IO, or if the script throws, the
     content is simply visible — a reveal that fails must fail OPEN. It failed closed
     once during development and the whole page below the hero went blank. */
  .reveals-armed .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1); }
  .reveals-armed .reveal.is-in { opacity: 1; transform: none; }
}

/* ─── Screens get a gentle stagger as they arrive ────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .reveals-armed .reveal .screen { opacity: 0; transform: translateY(20px); transition: opacity .8s ease .15s, transform .8s cubic-bezier(.22,.61,.36,1) .15s; }
  .reveals-armed .reveal .screen:nth-child(2) { transition-delay: .3s; }
  .reveals-armed .reveal .screen:nth-child(3) { transition-delay: .45s; }
  .reveals-armed .reveal.is-in .screen { opacity: 1; transform: none; }
}

/* ─── Everything above, off. Not reduced — off. ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .aurora__blob, .breath, .band__ring { animation: none !important; }
  .band__line { transition: none; }
  .reveal, .reveal .screen { opacity: 1 !important; transform: none !important; }
}


/* The hero and the screens earn more room than a reading column: the hero is a
   two-up with an exhibit beside it, and the screens are three phones that get
   needlessly small inside a 1280 container. Body copy keeps its measure via
   the per-element max-widths above, so this widens the layout, not the text. */
.hero .wrap, #screens .wrap { max-width: 1480px; }
.hero__grid { gap: clamp(2.5rem, 6vw, 6rem); }
.screens { gap: clamp(1.75rem, 3.5vw, 3.25rem); }

/* ─── Photography ──────────────────────────────────────────────────────────
   One human image, from the app's own library (the same Unsplash photo the
   personal-growth category uses), copied in rather than hotlinked so the page
   still makes no third-party request but Google Fonts. Decorative, so it is a
   background rather than an <img> — nothing is lost to a screen reader.
   The overlay is heavy on purpose: the affirmation sits on top of it and has to
   stay at full contrast. */
.band--photo {
  position: relative;
  background-image:
    linear-gradient(180deg, rgba(5,11,27,.93) 0%, rgba(5,11,27,.72) 42%, rgba(5,11,27,.95) 100%),
    url('assets/photos/growth.jpg');
  background-size: cover;
  background-position: center 58%;
  background-repeat: no-repeat;
}
/* A touch of the brand blue over the photo's warm sunset, so it belongs to this
   page rather than looking like a stock library drop-in. */
.band--photo::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 60%, rgba(47,143,203,.26), transparent 62%);
  mix-blend-mode: soft-light;
}
.band--photo .band__inner { position: relative; z-index: 1; }
.band--photo .band__line { text-shadow: 0 2px 28px rgba(5,11,27,.9); }
.band--photo .band__ring { border-color: rgba(234,241,251,.55); }

@media (max-width: 760px) {
  .band--photo { background-position: center 62%; }
}

/* The band's overlay was so heavy the photograph may as well not have been there.
   Lightened until the figure actually reads, then checked that the affirmation still
   clears contrast over the brightest part of it. */
.band--photo {
  background-image:
    linear-gradient(180deg, rgba(5,11,27,.80) 0%, rgba(5,11,27,.44) 45%, rgba(5,11,27,.88) 100%),
    url('assets/photos/growth.jpg');
}

/* A second photograph carries the voice section — arms open at sunrise, from the app's
   own self-worth set. Side-lit gradient so the copy sits on the dark half. */
.section--photo {
  position: relative;
  background-image:
    linear-gradient(90deg, rgba(5,11,27,.96) 0%, rgba(5,11,27,.86) 42%, rgba(5,11,27,.42) 72%, rgba(5,11,27,.30) 100%),
    url('assets/photos/calm.jpg');
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}
.section--photo .wrap { position: relative; z-index: 1; }

@media (max-width: 860px) {
  /* On a phone the copy would sit on top of the bright half, so darken it right down. */
  .section--photo {
    background-image:
      linear-gradient(180deg, rgba(5,11,27,.92) 0%, rgba(5,11,27,.86) 60%, rgba(5,11,27,.94) 100%),
      url('assets/photos/calm.jpg');
  }
}

/* ─── Photographs, shown rather than buried ────────────────────────────────
   The first pass hid these behind 90%-opaque gradients. They are the human
   element on an otherwise very dark page, so they get to be seen: full colour,
   a light scrim only where text sits on top. */

/* Each step opens with an image. */
.steps--shot li { display: grid; gap: 0; }
.steps--shot img {
  width: 100%; height: 190px; object-fit: cover;
  border-radius: 16px; margin-bottom: 1.4rem;
  border: 1px solid var(--border);
  filter: saturate(.92) contrast(1.04);
}
.steps--shot .step__num { margin-bottom: .2rem; }

/* The voice section is now two real columns: copy, and a photograph. */
.voice__grid--shot { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.92fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.voice__shot { margin: 0; }
.voice__shot img {
  width: 100%; height: 100%; max-height: 520px; object-fit: cover;
  border-radius: 22px; border: 1px solid var(--border);
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
}
@media (max-width: 860px) {
  .voice__grid--shot { grid-template-columns: 1fr; }
  .voice__shot img { max-height: 320px; }
  .steps--shot img { height: 220px; }
}

/* ─── The voice photograph breathes ───────────────────────────────────────
   A slow Ken Burns push (28s, alternating so it never snaps back) with a glow
   over the sun that pulses on the SAME 10s cycle as the hero's breath — 4s in,
   6s out. The page then has one rhythm rather than several competing ones. */
.voice__shot {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--border);
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
}
.voice__shot img {
  border-radius: 0; border: 0; box-shadow: none;   /* the figure owns the frame now */
  transform-origin: 62% 46%;                        /* the sun, so the push moves toward it */
  animation: kenburns 28s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenburns {
  from { transform: scale(1.015) translate3d(0, 0, 0); }
  to   { transform: scale(1.11) translate3d(-1.4%, -0.8%, 0); }
}

/* The light over the horizon lifts and settles with the breath. */
.voice__shot::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 62% 46%, rgba(255,214,150,.30), rgba(255,190,110,.10) 28%, transparent 56%);
  mix-blend-mode: screen;
  animation: breathe-light 10s cubic-bezier(.4,0,.5,1) infinite;
}
@keyframes breathe-light {
  0%   { opacity: .35; transform: scale(.97); }
  40%  { opacity: .85; transform: scale(1.05); }   /* 4s in */
  100% { opacity: .35; transform: scale(.97); }    /* 6s out */
}

@media (prefers-reduced-motion: reduce) {
  .voice__shot img { animation: none; transform: none; }
  .voice__shot::after { animation: none; opacity: .5; }
}

/* ─── Every photograph on the page moves, on its own clock ────────────────
   Different durations per image (31/37/43s) so they drift out of phase with one
   another. Three photos pushing in lockstep reads as a carousel; out of phase it
   reads as a page that is quietly alive. Each is clipped by its own frame. */
.steps--shot li { overflow: hidden; border-radius: 16px; }
.steps--shot img { border-radius: 16px; will-change: transform; }
.steps--shot li:nth-child(1) img {
  transform-origin: 50% 70%;
  animation: drift-shot-a 31s ease-in-out infinite alternate;
}
.steps--shot li:nth-child(2) img {
  transform-origin: 40% 40%;
  animation: drift-shot-b 37s ease-in-out infinite alternate;
}
.steps--shot li:nth-child(3) img {
  transform-origin: 70% 55%;
  animation: drift-shot-c 43s ease-in-out infinite alternate;
}
@keyframes drift-shot-a { from { transform: scale(1.01); } to { transform: scale(1.10) translate3d(-1.2%, -0.6%, 0); } }
@keyframes drift-shot-b { from { transform: scale(1.08) translate3d(1%, 0.4%, 0); } to { transform: scale(1.01); } }
@keyframes drift-shot-c { from { transform: scale(1.02) translate3d(0.6%, 0, 0); } to { transform: scale(1.12) translate3d(-0.8%, -0.8%, 0); } }

/* The band's photograph drifts too — slower than anything else on the page,
   because the affirmation sits on top of it and must stay easy to read. */
.band--photo {
  background-size: auto, 118% auto;
  animation: band-drift 64s ease-in-out infinite alternate;
}
@keyframes band-drift {
  from { background-position: center top, 46% 44%; }
  to   { background-position: center top, 54% 56%; }
}

@media (prefers-reduced-motion: reduce) {
  .steps--shot img { animation: none !important; transform: none !important; }
  .band--photo { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Motion, part two
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── The waveform plays ──────────────────────────────────────────────────
   Each bar keeps its authored height and is scaled around its centre, so the
   silhouette stays the one that was designed — it breathes rather than
   rearranging itself. --i (set inline, 0-23) staggers the start and varies the
   period, so no two neighbours move together and the whole thing never pulses
   as one block. Slow, because this sits beside copy about recording your voice;
   a fast equaliser would read as a party trick. */
.waveform span {
  transform-origin: center center;
  /* Duration varies per bar so the row never pulses as one block. NB: CSS calc() has
     no modulo operator — an earlier `calc(... % 5 ...)` was invalid and silently
     dropped the whole animation, so the periods are set in five buckets instead. */
  animation: wavebar 2.1s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -0.13s);
  will-change: transform;
}
.waveform span:nth-child(5n + 1) { animation-duration: 1.9s; }
.waveform span:nth-child(5n + 2) { animation-duration: 2.3s; }
.waveform span:nth-child(5n + 3) { animation-duration: 2.0s; }
.waveform span:nth-child(5n + 4) { animation-duration: 2.6s; }
.waveform span:nth-child(5n + 5) { animation-duration: 2.2s; }
@keyframes wavebar {
  from { transform: scaleY(.42); opacity: .72; }
  to   { transform: scaleY(1);   opacity: 1; }
}

/* A slow sweep of light travels across the bars, left to right, every 9s. */
.waveform { position: relative; overflow: hidden; }
.waveform::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, rgba(155,220,255,.17) 50%, transparent 62%);
  transform: translateX(-120%);
  animation: wave-sweep 9s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes wave-sweep {
  0%, 62% { transform: translateX(-120%); }
  100%    { transform: translateX(120%); }
}

/* ─── The guarantees tick in, one after another ───────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .reveals-armed .reveal .voice__list li { opacity: 0; transform: translateX(-14px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
  .reveals-armed .reveal.is-in .voice__list li { opacity: 1; transform: none; }
  .reveals-armed .reveal.is-in .voice__list li:nth-child(1) { transition-delay: .10s; }
  .reveals-armed .reveal.is-in .voice__list li:nth-child(2) { transition-delay: .20s; }
  .reveals-armed .reveal.is-in .voice__list li:nth-child(3) { transition-delay: .30s; }
  .reveals-armed .reveal.is-in .voice__list li:nth-child(4) { transition-delay: .40s; }
  .reveals-armed .reveal.is-in .voice__list li:nth-child(5) { transition-delay: .50s; }
  /* and the tick itself lands a beat after its line */
  .voice__list .tick { transition: transform .45s cubic-bezier(.2,1.5,.4,1); }
  .reveals-armed .reveal .voice__list .tick { transform: scale(.4); }
  .reveals-armed .reveal.is-in .voice__list .tick { transform: scale(1); transition-delay: .25s; }
}

/* ─── The five profiles deal in, then lift under the cursor ───────────────── */
@media (prefers-reduced-motion: no-preference) {
  .reveals-armed .reveal .profile { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
  .reveals-armed .reveal.is-in .profile { opacity: 1; transform: none; }
  .reveals-armed .reveal.is-in .profile:nth-child(2) { transition-delay: .08s; }
  .reveals-armed .reveal.is-in .profile:nth-child(3) { transition-delay: .16s; }
  .reveals-armed .reveal.is-in .profile:nth-child(4) { transition-delay: .24s; }
  .reveals-armed .reveal.is-in .profile:nth-child(5) { transition-delay: .32s; }
}
.profile { transition: transform .4s cubic-bezier(.22,.61,.36,1), border-color .4s ease, box-shadow .4s ease; }
.profile:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--c) 55%, transparent);
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
}

/* ─── The primary button holds a slow glow, on the page's breath ──────────── */
.btn--primary { position: relative; }
.btn--primary::after {
  content: ''; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(91,179,232,.42);
  animation: btn-breathe 10s cubic-bezier(.4,0,.5,1) infinite;
}
@keyframes btn-breathe {
  0%   { box-shadow: 0 0 0 0 rgba(91,179,232,.40); }
  40%  { box-shadow: 0 0 0 14px rgba(91,179,232,0); }
  100% { box-shadow: 0 0 0 0 rgba(91,179,232,0); }
}

/* ─── The three phones lift slightly when you point at one ────────────────── */
.screen img { transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.screen:hover img { transform: translateY(-8px) scale(1.012); }

@media (prefers-reduced-motion: reduce) {
  .waveform span, .waveform::after, .btn--primary::after { animation: none !important; transform: none !important; }
  .profile:hover, .screen:hover img { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Section seams and per-section energy
   A hard 1px rule between sections is a cut. These are dissolves: the rule
   fades out at both ends and a soft wash carries one section into the next, so
   scrolling feels continuous rather than stepped.
   ═══════════════════════════════════════════════════════════════════════════ */
.section--rule { border-top: 0; position: relative; }
.section--rule::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 18%, var(--border) 82%, transparent);
  pointer-events: none;
}
/* and a breath of light spilling down from the seam */
.section--rule::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 180px;
  background: linear-gradient(180deg, rgba(91,179,232,.055), transparent);
  pointer-events: none; z-index: 0;
}
.section--rule > .wrap { position: relative; z-index: 1; }

/* ─── Each section arrives at its own tempo ───────────────────────────────
   Same vocabulary, different energy: the steps arrive briskly because they are
   a sequence; the voice section and the access card drift in slowly because
   they are the two calm moments; the profiles land with a touch of overshoot,
   which suits five cards claiming five different temperaments. */
@media (prefers-reduced-motion: no-preference) {
  .reveals-armed #how-it-works.reveal {
    transform: translateY(22px);
    transition: opacity .62s ease, transform .62s cubic-bezier(.2,.75,.3,1);
  }
  .reveals-armed #profiles.reveal {
    transform: translateY(26px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.18,.9,.28,1.06);
  }
  .reveals-armed #voice.reveal {
    transform: translateY(34px);
    transition: opacity 1.15s ease, transform 1.15s cubic-bezier(.22,.61,.36,1);
  }
  .reveals-armed #screens.reveal {
    transform: translateY(24px);
    transition: opacity .78s ease, transform .78s cubic-bezier(.22,.61,.36,1);
  }
  .reveals-armed #access.reveal {
    transform: translateY(20px) scale(.985);
    transition: opacity 1s ease, transform 1s cubic-bezier(.22,.61,.36,1);
  }
  .reveals-armed #access.reveal.is-in { transform: none; }

  /* The affirmation band is the quietest moment on the page, so it takes the
     longest to arrive — a slow fade with almost no movement. */
  .band { opacity: 1; }
  .reveals-armed .band--photo .band__inner { transition: opacity 1.5s ease; }
}

@media (prefers-reduced-motion: reduce) {
  .section--rule::after { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FILLING THE DEAD SPACE (2026-10-05)

   Two sections left a visible hole at desktop width, both for the same reason:
   a grid whose column count does not divide its item count.

     · #profiles — five cards in a four-column auto-fit grid, so the fifth sat
       alone with four empty cells beside it.
     · #voice    — THREE children (copy, photograph, waveform) in a TWO-column
       grid, so the waveform took column 1 of row 2 and column 2 of row 2 was
       empty. That empty cell is the gap to the right of the waveform.

   Fixed by making the item count divide, not by shrinking the content.
   ═══════════════════════════════════════════════════════════════════════════ */

/* These two sections are cards and a photograph, not running text, so they take
   the wider measure the hero and the screenshots already use. The per-element
   max-widths below keep the prose at a readable line length regardless. */
#profiles .wrap { max-width: 1480px; }
#voice .wrap    { max-width: 1320px; }

/* ─── Five profiles, one row ──────────────────────────────────────────────
   Five is prime, so any multi-row layout orphans a card. At full width they
   get the row they were always meant to have: one axis, five positions, read
   left to right. Below that, a six-column track lets them divide evenly —
   3 + 2 (spans of 2 and 3), then 2 + 2 + 1 (spans of 3 and 6) — so no
   breakpoint ever shows a lone card against empty cells. */
@media (min-width: 1180px) {
  .profiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 820px) and (max-width: 1179.98px) {
  .profiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .profile:nth-child(-n + 3) { grid-column: span 2; }
  .profile:nth-child(n + 4)  { grid-column: span 3; }
}
@media (min-width: 620px) and (max-width: 819.98px) {
  .profiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .profile            { grid-column: span 3; }
  .profile:last-child { grid-column: span 6; }
}
@media (max-width: 619.98px) {
  .profiles { grid-template-columns: 1fr; }
}

/* ─── The voice section ───────────────────────────────────────────────────
   The photograph now stretches to the height of the copy beside it instead of
   floating centred with dead air above and below, and the waveform becomes a
   full-width band closing the section rather than a card in a half-empty row.
   A waveform with room to run reads as a rendered minute of audio; the same
   waveform in a quarter of the page reads as a widget. */
.voice__grid--shot { align-items: stretch; }
.voice__grid--shot > div:first-child { align-self: center; }
.voice__list { max-width: 58ch; }

.voice__shot { height: 100%; }
.voice__shot img { max-height: none; min-height: 100%; }
@media (max-width: 860px) {
  .voice__shot { height: auto; }
  .voice__shot img { min-height: 0; max-height: 320px; }
}

.voice__wave {
  grid-column: 1 / -1;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* 48 bars across the full measure. The bars stay flexible so the row fills its
   track at every width — capped so they never become slabs on a wide monitor,
   and floored so they survive a 360px phone without wrapping. */
.waveform {
  height: clamp(130px, 15vw, 210px);
  gap: clamp(3px, 0.55vw, 9px);
  padding: 0.5rem 0;
}
.waveform span { min-width: 3px; max-width: 16px; }

/* On a phone, 48 bars cannot each clear their minimum width inside a ~320px
   track — they would be clipped by the sweep's overflow:hidden. Every other bar
   is dropped instead, which halves the count while keeping the silhouette's
   shape (the envelope is sampled, not truncated). */
@media (max-width: 700px) {
  .waveform { gap: 4px; height: clamp(120px, 26vw, 170px); }
  .waveform span:nth-child(2n) { display: none; }
  .waveform span { min-width: 4px; max-width: 10px; }
}

/* ------------------------------------------------- hero pill + problem -- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 1.25rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: rgba(91, 179, 232, 0.08);
  color: var(--brand-cyan);
  font-size: 0.8125rem;
  font-weight: 500;
}

.problems {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

@media (max-width: 880px) {
  .problems { grid-template-columns: 1fr; }
}

.problem {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.problem h3 { font-size: 1.125rem; }

.problem p { color: var(--text-muted); font-size: 0.9375rem; }

.problem__icon {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-sm);
  background: rgba(239, 106, 74, 0.12);
  color: var(--flame);
}

.problems__answer {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 62ch;
  color: var(--text-muted);
  font-size: 1.0625rem;
}

.problems__answer b { color: var(--text); font-weight: 600; }