/* ==========================================================================
   ALOUD — aloudcoach.com
   Dark, committed, amber. The palette is the app's own dark-mode tokens
   (Shared/Tokens.swift) and the icon's gradient stops (scripts/make_icons.swift),
   so the site and the product are the same object.
   ========================================================================== */

/* --------------------------------------------------------------- tokens --- */
:root {
  /* Palette, dark mode — Shared/Tokens.swift */
  --paper:        #0B0B0F;
  --paper-sunk:   #08080B;
  --surface:      #17171E;
  --surface-2:    #1F1F27;
  --ink:          #F4F0EA;
  --ink-2:        rgba(244, 240, 234, .60);
  --ink-3:        rgba(244, 240, 234, .34);
  --hairline:     rgba(255, 255, 255, .10);
  --hairline-2:   rgba(255, 255, 255, .06);

  --amber:        #F6B04C;
  --amber-deep:   #E2853A;
  --amber-wash:   rgba(246, 176, 76, .16);

  /* Pace signalling — cool when you drag, coral when you rush */
  --slow:         #54C2B6;
  --fast:         #F07458;

  /* Icon stops — scripts/make_icons.swift */
  --bar-top:      #F7B75A;
  --bar-bottom:   #E26C3C;
  --cream:        #FDF0DC;
  --glow:         #F0963C;

  /* Radii — Tokens.swift Radii */
  --r-sheet:  38px;
  --r-card:   28px;
  --r-tile:   24px;
  --r-ctl:    20px;
  --r-chip:   15px;
  --r-inner:  12px;

  --wrap: 1240px;
  --gut:  clamp(20px, 5vw, 64px);
  --nav-h: 60px;

  /* Type */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter",
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono",
          Menlo, monospace;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  color-scheme: dark;
}

/* Every corner in the app is a squircle. Browsers that ship `corner-shape`
   render one; the rest get the plain rounded corner, which is the same shape
   family and reads identically at these radii. */
@supports (corner-shape: squircle) {
  .card, .tile, .device, .chip, .btn, .pill, .glass,
  .sheet, .plan, .row, .demo, .marq__mark { corner-shape: squircle; }
}

/* ---------------------------------------------------------------- reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 clamp(1rem, .55vw + .88rem, 1.15rem)/1.62 var(--sans);
  letter-spacing: -.011em;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--amber); color: #14110C; }

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

/* ----------------------------------------------------------------- type --- */
.display {
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.038em;
  text-wrap: balance;
}
h1.display  { font-size: clamp(2.55rem, 6.2vw, 4.6rem); }
h2.display  { font-size: clamp(2.15rem, 5.7vw, 4.4rem); line-height: 1.02; }
h3.display  { font-size: clamp(1.55rem, 2.6vw, 2.3rem); line-height: 1.08; letter-spacing: -.03em; }

.eyebrow {
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.lead {
  font-size: clamp(1.08rem, .8vw + .92rem, 1.4rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 34ch;
  text-wrap: pretty;
}
.body { color: var(--ink-2); max-width: 46ch; text-wrap: pretty; }
.amber { color: var(--amber); }
em.amber { font-style: normal; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* --------------------------------------------------------------- layout --- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.section { position: relative; padding-block: clamp(90px, 13vh, 190px); }
.section--tight { padding-block: clamp(64px, 8vh, 120px); }

/* A soft warm light rising from below — the icon's own glow, reused as the
   page's lighting model. */
.glowfield {
  position: absolute;
  inset: auto 0 0;
  height: 130%;
  pointer-events: none;
  background: radial-gradient(72% 60% at 50% 100%,
              rgba(240, 150, 60, .17), rgba(240, 150, 60, .05) 45%, transparent 72%);
  z-index: 0;
}

/* Film grain. Static, cheap, stops large flat areas from banding. */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 90;
  pointer-events: none;
  opacity: .034;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* ------------------------------------------------------------ surfaces --- */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
.sheet {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 40%),
    var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sheet);
  overflow: hidden;
}
.glass {
  background: rgba(23, 23, 30, .62);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid var(--hairline);
}

/* ----------------------------------------------------------------- mark --- */
.mark { display: block; width: auto; }
.mark rect { transform-origin: center; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  letter-spacing: -.02em;
  font-size: 1.02rem;
}
.brand .mark { height: 17px; }

/* ------------------------------------------------------------------ nav --- */
.nav {
  position: fixed;
  z-index: 80;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: calc(var(--wrap) - 2 * 8px);
  border-radius: 999px;
  padding: 8px 8px 8px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background .4s var(--ease), border-color .4s var(--ease),
              box-shadow .4s var(--ease), top .4s var(--ease);
}
.nav.is-solid { box-shadow: 0 14px 40px rgba(0, 0, 0, .5); }
.nav__links {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: 4px;
}
.nav__links a {
  display: block;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: .875rem;
  color: var(--ink-2);
  transition: color .25s, background .25s;
}
.nav__links a:hover { color: var(--ink); background: rgba(255, 255, 255, .06); }
.nav__cta { margin-left: auto; }
.nav__burger {
  /* No `auto` here: two auto margins in one flex row split the free space and
     would leave the CTA stranded in the middle of the bar. */
  margin-left: 4px;
  width: 44px; height: 44px;
  border-radius: 999px;
  display: grid; place-items: center; gap: 5px;
  background: rgba(255, 255, 255, .06);
}
.nav__burger span {
  display: block; width: 16px; height: 1.5px; border-radius: 2px;
  background: var(--ink);
  transition: transform .35s var(--ease), opacity .2s;
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (min-width: 1080px) {
  .nav__links { display: flex; }
  .nav__burger { display: none; }
  .nav__cta { margin-left: 6px; }
}

.menu {
  position: fixed;
  inset: 0;
  z-index: 79;
  background: rgba(8, 8, 11, .93);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
}
.menu.is-open { opacity: 1; visibility: visible; }
.menu ul { display: grid; gap: 6px; text-align: center; }
.menu a {
  display: block;
  padding: 12px 24px;
  font-size: clamp(1.6rem, 7vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -.03em;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.menu.is-open a { opacity: 1; transform: none; }
.menu.is-open li:nth-child(1) a { transition-delay: .06s; }
.menu.is-open li:nth-child(2) a { transition-delay: .11s; }
.menu.is-open li:nth-child(3) a { transition-delay: .16s; }
.menu.is-open li:nth-child(4) a { transition-delay: .21s; }
.menu.is-open li:nth-child(5) a { transition-delay: .26s; }
.menu.is-open li:nth-child(6) a { transition-delay: .31s; }
.menu__meta { margin-top: 32px; text-align: center; }

/* -------------------------------------------------------------- buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 12px 22px;
  border-radius: var(--r-ctl);
  font-size: .93rem;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: transform .3s var(--ease), filter .3s, background .3s, border-color .3s;
}
.btn:active { transform: scale(.975); }

.btn--amber {
  background: linear-gradient(180deg, var(--bar-top), var(--bar-bottom));
  color: #221403;
  box-shadow: 0 10px 30px rgba(226, 108, 60, .26);
}
.btn--amber:hover { filter: brightness(1.07); }

.btn--ghost {
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--hairline);
  color: var(--ink);
}
.btn--ghost:hover { background: rgba(255, 255, 255, .1); }

.btn--sm { min-height: 40px; padding: 9px 16px; font-size: .85rem; border-radius: var(--r-chip); }

/* App Store badge, drawn rather than a bitmap so it stays sharp */
.store {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 22px 11px 19px;
  border-radius: var(--r-ctl);
  background: linear-gradient(180deg, var(--bar-top), var(--bar-bottom));
  color: #221403;
  box-shadow: 0 12px 34px rgba(226, 108, 60, .28);
  transition: transform .3s var(--ease), filter .3s;
}
.store:hover { filter: brightness(1.07); }
.store:active { transform: scale(.98); }
.store svg { width: 25px; height: 25px; fill: currentColor; flex: none; }
.store span { display: grid; line-height: 1.1; text-align: left; }
.store small { font-size: .63rem; font-weight: 600; letter-spacing: .04em; opacity: .72; text-transform: uppercase; }
.store strong { font-size: 1.06rem; font-weight: 600; letter-spacing: -.02em; }

/* ----------------------------------------------------------- preloader --- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--paper-sunk);
  transition: opacity .8s var(--ease), visibility .8s;
}
.loader.is-done { opacity: 0; visibility: hidden; }
/* `display: grid` above outranks the UA sheet's `[hidden] { display: none }`,
   so the attribute has to be honoured explicitly or the curtain never lifts. */
.loader[hidden] { display: none; }
.loader__bars { display: flex; align-items: flex-end; gap: 7px; height: 62px; }
.loader__bars i {
  display: block;
  width: 11px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--bar-top), var(--bar-bottom));
  animation: meter 1.15s var(--ease-io) infinite alternate;
}
.loader__bars i:nth-child(3) { background: var(--cream); }
@keyframes meter { from { height: 22%; } to { height: 100%; } }

/* ----------------------------------------------------------------- hero --- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--nav-h) + 60px);
  padding-bottom: clamp(28px, 6vh, 64px);
  overflow: hidden;
  isolation: isolate;
}
.hero__body { position: relative; z-index: 2; }
.hero h1 { margin: 18px 0 0; max-width: 17ch; }
.hero .lead { margin-top: clamp(18px, 2.4vw, 28px); max-width: 46ch; }
.hero__actions {
  margin-top: clamp(26px, 3.4vw, 40px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* The live voiceprint. One canvas, 60 bars, a slow phrase envelope with
   syllables riding on top — the shape a level meter makes across a whole talk
   rather than a random skyline. Sits behind the copy, bleeding off both edges. */
.hero__print {
  position: absolute;
  inset: auto 0 0;
  height: min(52vh, 460px);
  z-index: 1;
  opacity: .5;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.hero__print canvas { width: 100%; height: 100%; }

/* Live metric chip — the app's own data language, floating */
.livechip {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  margin-top: clamp(30px, 4vw, 46px);
  padding: 14px 18px;
  border-radius: var(--r-tile);
  display: grid;
  gap: 10px;
  min-width: min(300px, 100%);
}
.livechip__top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.livechip__dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--fast);
  animation: blip 1.6s ease-in-out infinite;
}
@keyframes blip { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.livechip__row { display: flex; align-items: baseline; gap: 8px; }
.livechip__wpm { font-size: 2rem; font-weight: 500; letter-spacing: -.03em; }
.livechip__unit { font-size: .82rem; color: var(--ink-3); }
.livechip__verdict { margin-left: auto; font-size: .82rem; font-weight: 600; color: var(--amber); }

/* Band meter: the window this kind of talk wants to sit in, with a needle */
.meter { position: relative; height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); }
.meter__band {
  position: absolute; top: 0; bottom: 0;
  border-radius: 999px;
  background: var(--amber-wash);
  box-shadow: inset 0 0 0 1px rgba(246, 176, 76, .3);
}
.meter__needle {
  position: absolute; top: -3px;
  width: 3px; height: 14px;
  border-radius: 999px;
  background: var(--amber);
  transform: translateX(-1.5px);
  transition: left .45s var(--ease), background .3s;
}
.meter__scale {
  display: flex; justify-content: space-between;
  font-size: .66rem; color: var(--ink-3);
}

/* Below 1000px the phone is dropped and only the live chip is kept: the screen
   would have to shrink past the point where its own type is readable. */
.hero__deviceclip { display: none; }

.hero__cue {
  position: absolute;
  z-index: 2;
  bottom: 22px; right: var(--gut);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex; align-items: center; gap: 9px;
}
.hero__cue::after {
  content: ""; width: 1px; height: 34px;
  background: linear-gradient(180deg, var(--amber), transparent);
  animation: drop 2.1s var(--ease-io) infinite;
}
@keyframes drop { 0% { transform: scaleY(0); transform-origin: top; } 55%, 100% { transform: scaleY(1); transform-origin: top; } }

@media (min-width: 1000px) {
  .hero { justify-content: center; padding-bottom: 0; }
  .hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 360px);
    align-items: center;
    gap: clamp(36px, 4vw, 72px);
  }
  .hero h1 { max-width: 15ch; }
  .hero .lead { max-width: 42ch; }

  .hero__device { position: relative; align-self: end; }
  .hero__deviceclip {
    display: block;
    /* Taller than the space it has, then faded — the screen never gets scaled
       down to the point where its own type stops being readable. */
    max-height: 68svh;
    overflow: hidden;
    /* The bezel is an 8px spread shadow, so the clip box needs that much room
       or the frame is sliced off along the top and sides. */
    padding: 12px 12px 0;
    mask-image: linear-gradient(180deg, #000 74%, transparent);
    -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent);
  }
  .device--hero { --w: 100%; margin: 0; }

  /* The chip sits low on the phone, inside the band where the mask has already
     faded the screen out, so it covers nothing you could have read. It is a
     sibling of the masked box, not a child, or the fade would eat the chip too. */
  .livechip {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 13%;
    transform: translateX(-50%);
    margin: 0;
    width: min(292px, 108%);
    min-width: 0;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .7);
  }
}

/* -------------------------------------------------------------- marquee --- */
.marq {
  position: relative;
  z-index: 2;
  padding-block: clamp(18px, 3vw, 34px);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--paper-sunk);
  overflow: hidden;
}
.marq__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.marq__group {
  display: flex;
  align-items: center;
  flex: none;
  padding-right: 0;
}
.marq__item {
  display: flex;
  align-items: center;
  gap: clamp(22px, 3vw, 46px);
  padding-inline: clamp(11px, 1.5vw, 23px);
  font-size: clamp(2.1rem, 6vw, 4.6rem);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
}
.marq__item:nth-child(even) {
  color: transparent;
  -webkit-text-stroke: 1px var(--ink-3);
}
.marq__mark { height: clamp(16px, 2.4vw, 30px); flex: none; }

/* -------------------------------------------- scrubbed word reveal (§01) --- */
.reveal-copy {
  font-size: clamp(1.5rem, 3.9vw, 3.05rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.032em;
  max-width: 24ch;
  text-wrap: pretty;
}
.reveal-copy .w { color: rgba(244, 240, 234, .13); transition: color .45s var(--ease); }
.reveal-copy .w.is-lit { color: var(--ink); }
.reveal-copy .w.is-key.is-lit { color: var(--amber); }
.reveal-copy__after {
  margin-top: clamp(28px, 4vw, 48px);
  padding-top: clamp(22px, 3vw, 34px);
  border-top: 1px solid var(--hairline);
  font-size: clamp(1rem, 1.1vw + .8rem, 1.28rem);
  color: var(--ink-2);
  max-width: 42ch;
}

/* ------------------------------------------------- report module (§02) --- */
.report__stage { position: relative; }
@media (min-width: 1000px) {
  .report__grid {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: clamp(36px, 4vw, 72px);
    align-items: start;
  }
  .report__pin { position: sticky; top: calc(var(--nav-h) + 46px); }
}

/* Score ring, drawn in SVG so the number stays crisp */
.ring { position: relative; width: min(280px, 74vw); margin-inline: auto; }
.ring svg { width: 100%; height: auto; transform: rotate(-90deg); }
.ring__track { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 13; }
.ring__arc {
  fill: none;
  stroke: url(#ringGrad);
  stroke-width: 13;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.4s var(--ease);
}
.ring__mid {
  position: absolute; inset: 0;
  display: grid; place-content: center; text-align: center;
}
.ring__score {
  font-size: clamp(3.4rem, 9vw, 4.6rem);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1;
}
.ring__label { margin-top: 4px; font-size: .95rem; font-weight: 600; color: var(--amber); }

.report__verdict {
  margin-top: 26px;
  text-align: center;
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.22;
  text-wrap: balance;
}
.report__meta { margin-top: 10px; text-align: center; font-size: .85rem; color: var(--ink-3); }

/* A row of tiles must be top-aligned: the labels wrap to one or two lines and
   with centre alignment a tile with a shorter label drops its number below its
   neighbours'. The app had the same bug in five places. */
.tiles {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
}
.tile {
  padding: 16px 14px;
  border-radius: var(--r-tile);
  background: var(--surface-2);
  border: 1px solid var(--hairline-2);
  text-align: center;
}
.tile b {
  display: block;
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.05;
}
.tile span { display: block; margin-top: 6px; font-size: .72rem; line-height: 1.3; color: var(--ink-3); }

/* Component rows — each carries the sentence that explains its number */
.rows { display: grid; gap: 12px; }
.row {
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--hairline);
  overflow: hidden;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease), border-color .3s;
}
.row.is-in { opacity: 1; transform: none; }
.row.is-open { border-color: rgba(246, 176, 76, .34); }
.row__btn {
  width: 100%;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  padding: 20px 20px 16px;
  text-align: left;
}
.row__ico { width: 22px; height: 22px; color: var(--amber); }
.row__ico svg { width: 100%; height: 100%; }
.row.is-poor .row__ico { color: var(--fast); }
/* Name over subtitle. Both were inline spans, so `margin-top` did nothing and
   the two ran together as one string. */
.row__text { display: grid; gap: 3px; min-width: 0; }
.row__name { font-weight: 600; letter-spacing: -.018em; }
.row__sub { font-size: .81rem; color: var(--ink-3); }
.row__score { font-size: 1.5rem; font-weight: 500; letter-spacing: -.03em; }
.row__chev {
  width: 18px; height: 18px; color: var(--ink-3);
  transition: transform .35s var(--ease);
}
.row.is-open .row__chev { transform: rotate(180deg); }
.row__bar {
  height: 3px;
  margin: 0 20px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  overflow: hidden;
}
.row__bar i {
  display: block; height: 100%; width: 0;
  border-radius: 999px;
  background: var(--amber);
  transition: width 1.1s var(--ease);
}
.row.is-poor .row__bar i { background: var(--fast); }
.row__work {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease);
}
.row.is-open .row__work { grid-template-rows: 1fr; }
.row__work > div { overflow: hidden; }
.row__work p {
  padding: 2px 20px 16px;
  font-size: .92rem;
  color: var(--ink-2);
  max-width: 52ch;
}
.row__weight {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0 20px 18px;
}

/* --------------------------------------------- hesitation demo (§03) --- */
.demo {
  margin-top: clamp(30px, 4vw, 52px);
  padding: clamp(20px, 3vw, 34px);
  border-radius: var(--r-sheet);
  background: var(--surface);
  border: 1px solid var(--hairline);
}
.demo__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.seg {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--hairline-2);
}
.seg button {
  padding: 8px 15px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-3);
  transition: color .3s, background .3s;
}
.seg button[aria-selected="true"] { background: var(--surface-2); color: var(--ink); box-shadow: 0 2px 10px rgba(0,0,0,.3); }
.demo__replay { margin-left: auto; }

.demo__words {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 0;
  font-size: clamp(1.05rem, 1.9vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.5;
  min-height: 3.2em;
}
.demo__w {
  padding: 2px 5px;
  border-radius: 8px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s, transform .3s var(--ease);
}
.demo__w.is-said { opacity: 1; transform: none; }

/* The gap between two words. A transcript writes nothing here; Aloud looks at
   the level track inside it. Sound with no word is a hesitation. */
.demo__gap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 1.5em;
  margin-inline: 3px;
  border-radius: 8px;
  border: 1px dashed rgba(255, 255, 255, .18);
  font-size: .78em;
  font-weight: 600;
  color: transparent;
  transition: border-color .4s, background .4s, color .4s, min-width .4s var(--ease);
}
.demo.is-aloud .demo__gap.is-said {
  min-width: 64px;
  border-style: solid;
  border-color: rgba(246, 176, 76, .45);
  background: var(--amber-wash);
  color: var(--amber);
}
.demo.is-aloud .demo__gap.is-silent.is-said {
  border-color: rgba(84, 194, 182, .38);
  background: rgba(84, 194, 182, .1);
  color: var(--slow);
}

.demo__track {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
}
.demo__tracklabel {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .68rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 12px;
}
.demo__levels {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 72px;
}
.demo__levels i {
  flex: 1;
  min-width: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  transition: height .3s var(--ease), background .4s, opacity .3s;
  opacity: .3;
}
.demo__levels i.is-on { opacity: 1; }
.demo__levels i.is-word { background: linear-gradient(180deg, var(--bar-top), var(--bar-bottom)); }
.demo.is-aloud .demo__levels i.is-hes { background: var(--cream); }
.demo.is-aloud .demo__levels i.is-hes::after { content: none; }
.demo__note {
  margin-top: 18px;
  font-size: .92rem;
  color: var(--ink-2);
  min-height: 3em;
  max-width: 56ch;
}
.demo__note b { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------- band picker (§04) --- */
.band__kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: clamp(26px, 3vw, 38px);
}
.chip {
  padding: 9px 15px;
  border-radius: var(--r-chip);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--hairline);
  font-size: .855rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: background .28s, color .28s, border-color .28s, transform .28s var(--ease);
}
.chip:hover { background: rgba(255, 255, 255, .1); color: var(--ink); }
.chip[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--bar-top), var(--bar-bottom));
  border-color: transparent;
  color: #221403;
  font-weight: 600;
}
.chip:active { transform: scale(.97); }

.band__stage { padding: clamp(22px, 3.4vw, 40px); }
.band__scaleline {
  position: relative;
  height: clamp(120px, 20vw, 168px);
  border-radius: var(--r-tile);
  background:
    linear-gradient(90deg, rgba(84,194,182,.09), transparent 34%, transparent 66%, rgba(240,116,88,.09)),
    rgba(255, 255, 255, .03);
  border: 1px solid var(--hairline-2);
  overflow: hidden;
  touch-action: none;
  cursor: ew-resize;
}
.band__zone {
  position: absolute; top: 0; bottom: 0;
  background: var(--amber-wash);
  border-inline: 1px solid rgba(246, 176, 76, .42);
  transition: left .55s var(--ease), width .55s var(--ease);
}
.band__zonelabel {
  position: absolute; top: 10px;
  font-size: .68rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--amber);
  transform: translateX(-50%);
  white-space: nowrap;
  transition: left .55s var(--ease);
}
.band__needle {
  position: absolute; top: 0; bottom: 0;
  width: 2px;
  background: var(--amber);
  transition: background .3s;
}
.band__needle::before {
  content: "";
  position: absolute; inset: 0 -13px;
}
.band__knob {
  position: absolute; top: 50%; left: 50%;
  width: 26px; height: 26px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: var(--amber);
  box-shadow: 0 0 0 6px rgba(246, 176, 76, .16), 0 6px 18px rgba(0, 0, 0, .5);
  transition: background .3s, box-shadow .3s;
}
.band__ticks {
  position: absolute; inset: auto 0 0;
  display: flex; justify-content: space-between;
  padding: 8px 12px;
  font-size: .66rem; color: var(--ink-3);
}
.band__read {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
}
.band__wpm { font-size: clamp(2.4rem, 6vw, 3.4rem); font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.band__unit { font-size: .95rem; color: var(--ink-3); }
.band__verdict {
  margin-left: auto;
  padding: 8px 15px;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 600;
  background: var(--amber-wash);
  color: var(--amber);
  transition: background .3s, color .3s;
}
.band__facts {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.band__fact { font-size: .875rem; color: var(--ink-2); }
.band__fact b { display: block; color: var(--ink); font-weight: 600; font-size: 1.02rem; margin-bottom: 2px; }
.band__hint { margin-top: 14px; font-size: .76rem; color: var(--ink-3); }

/* ------------------------------------------------------- watch (§05) --- */
@media (min-width: 900px) {
  .watch__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: clamp(40px, 5vw, 80px);
    align-items: center;
  }
}
.watch__stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(30px, 5vw, 60px) 0;
}
.watch__body {
  position: relative;
  width: min(230px, 62vw);
  aspect-ratio: 416 / 496;
  border-radius: 24%/20%;
  background: #0a0a0d;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6), inset 0 0 0 5px #16161c;
  overflow: hidden;
  z-index: 2;
}
.watch__body img { width: 100%; height: 100%; object-fit: cover; }
/* The tap. A ring leaving the watch — the only visible form a haptic has. */
.watch__pulse {
  position: absolute;
  width: min(230px, 62vw);
  aspect-ratio: 416 / 496;
  border-radius: 24%/20%;
  border: 1.5px solid var(--amber);
  opacity: 0;
  z-index: 1;
}
.watch__pulse.is-go { animation: tap 1s var(--ease) forwards; }
.watch__pulse.is-go2 { animation: tap 1s var(--ease) .16s forwards; }
@keyframes tap {
  0%   { opacity: .85; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.5); }
}
.watch__cues { display: grid; gap: 8px; margin-top: clamp(24px, 3vw, 36px); }
.cue {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 15px 18px;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--hairline);
  text-align: left;
  transition: border-color .3s, background .3s, transform .3s var(--ease);
}
.cue:hover { background: var(--surface-2); }
.cue.is-live { border-color: rgba(246, 176, 76, .4); background: var(--surface-2); }
.cue:active { transform: scale(.99); }
.cue__taps { display: flex; gap: 4px; }
.cue__taps i {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--ink-3);
  transition: background .3s, transform .3s;
}
.cue.is-live .cue__taps i { background: var(--amber); }
.cue__taps i.is-light { opacity: .45; }
.cue b { display: block; font-weight: 600; letter-spacing: -.015em; }
.cue span { display: block; font-size: .82rem; color: var(--ink-3); margin-top: 2px; }

/* ------------------------------------------------------ screens gallery ---
   Two behaviours from one markup. Narrow screens get a native horizontal
   swipe. From 900px up the section pins and scrolling down drives the track
   sideways, which is the only way to look at six tall screens without either
   shrinking them or burning six screenfuls of page.                        */
.gallery { position: relative; }
.gallery__sticky { padding-block: clamp(80px, 12vh, 170px); }
.gallery__head { margin-bottom: clamp(38px, 5vw, 72px); }

.gallery__viewport {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.gallery__viewport::-webkit-scrollbar { display: none; }

.gallery__track {
  display: flex;
  width: max-content;
  gap: clamp(20px, 2.6vw, 38px);
  /* The bezel is an 8px spread shadow and this box clips, so it needs room. */
  padding: 14px var(--gut);
}

.shot {
  --shot-w: min(320px, 70vw);
  flex: none;
  width: var(--shot-w);
  scroll-snap-align: center;
}
.shot figcaption { margin-top: 20px; font-size: .85rem; color: var(--ink-3); text-wrap: pretty; }
.shot figcaption b { display: block; color: var(--ink); font-weight: 600; font-size: .96rem; margin-bottom: 5px; }

@media (min-width: 900px) {
  .gallery.is-pinned .gallery__sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    /* Clear the floating nav, which is fixed and would sit over the heading. */
    padding: calc(var(--nav-h) + 30px) 0 26px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
  }
  .gallery.is-pinned .gallery__viewport { overflow: hidden; }
  .gallery.is-pinned .gallery__track { will-change: transform; }
  /* The heading gives up some size here so the phones can have the height. */
  .gallery.is-pinned .gallery__head { margin-bottom: clamp(24px, 3vw, 38px); }
  .gallery.is-pinned .gallery__head h2 { font-size: clamp(1.7rem, 3.1vw, 2.7rem); }
  /* Pinned, the card is sized from the height left over rather than from the
     width, so a short laptop screen never crops the phone. 350px covers the nav
     clearance, the heading and the caption; 0.4926 is 700 / 1421, the shot's
     own ratio. */
  .gallery.is-pinned .shot { --shot-w: calc(min(100svh - 350px, 620px) * 0.4926); }
  .gallery.is-pinned .shot figcaption { margin-top: 16px; }
}

/* A phone. The corner radius on an iPhone is an eighth of its width, so it is
   derived from the width rather than guessed. */
.device {
  --w: 320px;
  position: relative;
  width: 100%;
  border-radius: calc(min(var(--w), 420px) * .125);
  overflow: hidden;
  background: #000;
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, .12),
    0 0 0 8px #14141a,
    0 34px 80px rgba(0, 0, 0, .62);
}
.device img { width: 100%; height: auto; }
.device--hero { --w: min(330px, 74vw); width: var(--w); margin-inline: auto; }
.shot .device { --w: var(--shot-w); }

/* -------------------------------------------------------------- privacy --- */
.claims { display: grid; gap: 8px; margin-top: clamp(28px, 3.5vw, 44px); }
.claim {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 20px;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--hairline);
}
.claim__ico {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--amber-wash);
  color: var(--amber);
}
.claim__ico svg { width: 17px; height: 17px; }
.claim b { display: block; font-weight: 600; letter-spacing: -.015em; margin-bottom: 4px; }
.claim p { font-size: .9rem; color: var(--ink-2); }

@media (min-width: 800px) {
  .claims { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------- pricing --- */
.plans {
  display: grid;
  gap: 14px;
  margin-top: clamp(30px, 4vw, 50px);
}
@media (min-width: 860px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.plan { padding: clamp(24px, 3vw, 34px); }
.plan--pro {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(246, 176, 76, .1), transparent 60%),
    var(--surface);
  border-color: rgba(246, 176, 76, .3);
}
.plan__top { display: flex; align-items: baseline; gap: 10px; }
.plan h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: -.025em; }
.plan__tag {
  margin-left: auto;
  font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  background: var(--amber-wash); color: var(--amber);
}
.plan__price { margin-top: 14px; font-size: 1.02rem; color: var(--ink-2); }
.plan__price b { color: var(--ink); font-weight: 600; }
.plan ul { margin-top: 22px; display: grid; gap: 11px; }
.plan li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 11px;
  font-size: .93rem; color: var(--ink-2);
}
.plan li svg { width: 15px; height: 15px; margin-top: 5px; color: var(--amber); }
.plan--free li svg { color: var(--ink-3); }
.pricing__note {
  margin-top: clamp(24px, 3vw, 36px);
  padding: 20px;
  border-radius: var(--r-card);
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, .025);
  font-size: .93rem;
  color: var(--ink-2);
  max-width: 62ch;
}

/* ------------------------------------------------------------- cta + foot --- */
.cta { position: relative; text-align: center; overflow: hidden; isolation: isolate; }
.cta__icon {
  width: 92px; height: 92px;
  margin: 0 auto clamp(26px, 3vw, 38px);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(226, 108, 60, .3);
}
.cta h2 { margin-inline: auto; max-width: 20ch; }
.cta .lead { margin: clamp(20px, 2.5vw, 28px) auto 0; }
.cta__actions { margin-top: clamp(28px, 3.4vw, 40px); display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }

.foot {
  border-top: 1px solid var(--hairline);
  padding-block: 46px 54px;
  font-size: .855rem;
  color: var(--ink-3);
}
.foot__row { display: grid; gap: 26px; }
@media (min-width: 760px) {
  .foot__row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}
.foot__links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot__links a { transition: color .25s; }
.foot__links a:hover { color: var(--amber); }
.foot__legal { margin-top: 18px; max-width: 52ch; line-height: 1.55; }

/* ------------------------------------------------------- scroll progress --- */
.prog {
  position: fixed;
  z-index: 81;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: transparent;
  pointer-events: none;
}
.prog i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--bar-bottom), var(--bar-top));
}

/* --------------------------------------------------------------- reveals --- */
.rv { opacity: 0; transform: translateY(22px); }
.js .rv { transition: opacity .85s var(--ease), transform .85s var(--ease); }
.rv.is-in { opacity: 1; transform: none; }

/* A headline that arrives line by line from behind its own baseline */
.rv-line { display: block; overflow: hidden; }
.rv-line > span {
  display: block;
  transform: translateY(105%);
}
.js .rv-line > span { transition: transform 1s var(--ease); }
.rv-line.is-in > span { transform: none; }

.no-js .rv, .no-js .rv-line > span, .no-js .row { opacity: 1; transform: none; }

/* -------------------------------------------------------- inner pages --- */
.doc { padding-top: calc(var(--nav-h) + 64px); }
.doc__body { max-width: 68ch; }
.doc__body h1 { font-size: clamp(2.2rem, 5.4vw, 3.4rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.03; }
.doc__body h2 {
  margin-top: clamp(38px, 4.5vw, 58px);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -.025em;
}
.doc__body h3 { margin-top: 28px; font-size: 1.02rem; font-weight: 600; }
.doc__body p, .doc__body li { margin-top: 14px; color: var(--ink-2); }
.doc__body ul { margin-top: 14px; display: grid; gap: 8px; }
.doc__body li { padding-left: 20px; position: relative; }
.doc__body li::before {
  content: ""; position: absolute; left: 2px; top: .72em;
  width: 5px; height: 5px; border-radius: 999px; background: var(--amber);
}
.doc__body a { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; }
.doc__meta { margin-top: 10px; font-size: .85rem; color: var(--ink-3); }
.doc__lead { margin-top: 22px; font-size: clamp(1.05rem, 1.3vw, 1.22rem); color: var(--ink); }
.doc__card {
  margin-top: 30px;
  padding: 24px;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--hairline);
}
.doc__card p:first-child { margin-top: 0; }
.doc__body strong, .doc__body b { color: var(--ink); font-weight: 600; }

/* A table is the one thing on these pages that can be wider than the column,
   so it scrolls inside its own box rather than pushing the page sideways. */
.doc__scroll { margin-top: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.doc__body table {
  border-collapse: collapse;
  width: 100%;
  min-width: 460px;
  font-size: .9rem;
}
.doc__body th, .doc__body td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-2);
  vertical-align: top;
}
.doc__body th { color: var(--ink); font-weight: 600; white-space: nowrap; }
.doc__body tr:first-child th { border-bottom-color: rgba(246, 176, 76, .3); }

/* ----------------------------------------------------------------- form --- */
.form { margin-top: clamp(28px, 3.5vw, 40px); display: grid; gap: 18px; max-width: 620px; }
.field { display: grid; gap: 8px; }
.field > span { font-size: .85rem; font-weight: 600; letter-spacing: -.01em; }
.field .hint { font-weight: 400; color: var(--ink-3); font-size: .78rem; }

.field input[type="text"],
.field input[type="email"],
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--r-ctl);
  background: var(--surface);
  border: 1px solid var(--hairline);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  transition: border-color .25s, background .25s;
  appearance: none;
}
.field textarea { min-height: 160px; resize: vertical; line-height: 1.55; }
.field select {
  /* A drawn chevron, so the control matches the rest of the page in dark mode */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4F0EA' stroke-width='2' stroke-linecap='round' opacity='.5'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 44px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: rgba(246, 176, 76, .55);
  background: var(--surface-2);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }

.check {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  font-size: .875rem;
  color: var(--ink-2);
  line-height: 1.5;
}
.check input {
  width: 20px; height: 20px;
  margin: 2px 0 0;
  border-radius: 6px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  appearance: none;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.check input:checked {
  background: var(--amber) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23221403' stroke-width='3.4' stroke-linecap='round'><path d='M5 13l4 4L19 7'/></svg>") center / 13px no-repeat;
  border-color: transparent;
}
.check a { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; }

.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 6px; }
.form__note { font-size: .78rem; color: var(--ink-3); max-width: 44ch; }

/* ------------------------------------------------------ reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  .rv, .rv-line > span, .row { opacity: 1 !important; transform: none !important; transition: none !important; }
  .marq__track { transform: none !important; }
  .reveal-copy .w { color: var(--ink); }
  .reveal-copy .w.is-key { color: var(--amber); }
  .hero__cue::after, .livechip__dot, .loader__bars i { animation: none; }
  .loader { display: none; }
  html { scroll-behavior: auto; }
}