/* Mumble landing v4 — ONE CONTINUOUS VOICE LINE (Hugh 2026-08-20: "I want to
   be different"). The heyclicky desk is gone. The whole page is a single line
   of voice: silence runs in from the screen edges, becomes the M where you
   speak, runs on down the page connecting every section, and ends in a full
   stop at the download button. Warm white ground, ink type, blue lives ONLY
   in the line. Sentence case (the app's house style). */

:root {
  --ground:  #ffffff;          /* pure white under the dot grid (Hugh's pick) */
  --ink:     #16181d;
  --ink-2:   #5d6069;
  --muted:   #9b9ea6;
  --blue:    #60a5fa;   /* THE blue — the app's mumbleBlue (the Do-it button) */
  --line:    #e8e6e1;
  --card:    #ffffff;
  --surface2: #f2f2f5;  /* the app's SECOND colour — the light-grey non-white surface */
  --dot:      rgba(30, 35, 55, .08);   /* subtle dot-grid colour on the grey */
  --ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }   /* so hidden always wins over display rules */
html { scroll-behavior: smooth; }
html { background: var(--surface2); }   /* grey ground (replaced the clouds) */
body {
  font-family: var(--ui);
  color: var(--ink);
  background: transparent;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* THE ground: dot grid pinned to the screen, but only at the TOP of the site —
   it fades away as you scroll into the features so they sit on clean white
   (Hugh 2026-08-20: "fade the background... just the top bit"). JS drives
   --dotfade from scroll position. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(22, 24, 29, .13) 1.3px, transparent 1.3px);
  background-size: 34px 34px;
  opacity: var(--dotfade, 1);
}

/* film grain over everything — the print-paper texture. Pure SVG turbulence,
   ~4% alpha, so it reads as material rather than noise. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 60;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.055'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background: #dbeafe; }

/* ---------- the wave-M ---------- */
.wavem { display: inline-block; overflow: visible; }
.wavem-path {
  fill: none; stroke: var(--ink); stroke-width: 10.4;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- buttons: ours, not mac pills ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ui); font-weight: 600; font-size: 16px; letter-spacing: -0.2px;
  text-decoration: none; cursor: pointer;
  border-radius: 12px; padding: 13px 26px; border: 1.5px solid transparent;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.btn-ink {
  color: var(--ground); background: var(--ink);
  box-shadow: 0 8px 24px rgba(22, 24, 29, .18);
}
.btn-ink:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(22, 24, 29, .24); }
.btn-ink:active { transform: translateY(0); }

/* the grey sibling of the blue — same glossy treatment, quiet palette
   (the "Windows waitlist" next to Download, Hugh 2026-08-20) */
.btn-grey {
  color: var(--ink);
  /* properly GREY, not white — and 1.5px border like .btn-blue so the two
     buttons are pixel-identical in size */
  background: linear-gradient(180deg, #e3e5e9 0%, #cfd3d9 100%);
  border: 1.5px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 8px 22px rgba(22, 24, 29, .12);
}
.btn-grey:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 14px 30px rgba(22, 24, 29, .14); }
.btn-grey:active { transform: translateY(0); }

/* the app's "Do it" blue — soft mumbleBlue gradient, white text, blue glow */
.btn-blue {
  color: #fff;
  background: linear-gradient(180deg, #6cadfb 0%, #4b95f7 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 8px 22px rgba(80,150,245,.34);
}
.btn-blue:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 14px 30px rgba(80,150,245,.42); }
.btn-blue:active { transform: translateY(0); }
.btn-line {
  color: var(--ink); background: transparent; border-color: var(--ink);
}
.btn-line:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(22, 24, 29, .10); }
.btn-line.listening { border-color: var(--blue); color: var(--blue); }
.btn-big { font-size: 17px; padding: 15px 30px; }

/* the mic dot: quiet grey; blood-blue and breathing while listening */
.mic-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--muted);
  transition: background .2s ease;
}
.btn-line.listening .mic-dot { background: var(--blue); animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.55) } }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 30px;
  /* a proper bar, separated from the page by a hairline (Hugh 2026-08-22) —
     consistent size, no resize on scroll. */
  background: rgba(248, 248, 251, .8);
  -webkit-backdrop-filter: blur(12px) saturate(120%); backdrop-filter: blur(12px) saturate(120%);
  border-bottom: 1px solid var(--line);
}
.nav.scrolled {
  background: rgba(248, 248, 251, .9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
/* THE LOCKUP — the app's MumbleWordmark math, exactly (Hugh 2026-08-20:
   "one normal word, not M umble"). The svg is tight-cropped to the cap band
   (76:52), sized to the lowercase ascender (~.72em in Inter), feet ON the
   baseline (caps dip stroke/2 below the box, so lift by .066em), and "umble"
   starts where the M's ink ends. */
.nav-wordmark {
  display: inline-flex; align-items: baseline; text-decoration: none;
  color: var(--ink); font-size: 22px; font-weight: 600; letter-spacing: -0.3px;
}
.nav-wordmark .wavem, .hero-wordmark .wavem {
  width: 1.052em; height: .72em;
  transform: translateY(-.066em);
  margin-right: .05em;
}
/* inline nav — one page, one click (Hugh 2026-08-20: no page sprawl, no
   two-click overlay on desktop). Hamburger appears only on mobile.
   3-zone layout, heyclicky-style: wordmark + links left, mark centred,
   menu-bar + Download right. */
.nav-left  { display: flex; align-items: center; gap: 26px; }
.nav-right { display: flex; align-items: center; gap: 20px; }
.nav-link {
  font-size: 15px; font-weight: 500; letter-spacing: -0.2px;
  color: var(--ink-2); text-decoration: none;
}
.nav-link:hover { color: var(--ink); }

/* centred logo mark */
.nav-mark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; color: var(--ink); opacity: .9;
}
.nav-mark .wavem { width: 30px; height: 21px; }
.nav-mark .wavem-path { fill: none; stroke: var(--ink); stroke-width: 6;
  stroke-linecap: round; stroke-linejoin: round; }

/* a tiny macOS menu-bar — Mumble lives on your Mac */
.nav-menubar { display: inline-flex; align-items: center; gap: 12px; color: var(--muted); }
.mb-ico { height: 15px; width: auto; }
.mb-batt { height: 13px; }
.mb-clock { font-size: 13.5px; font-weight: 500; letter-spacing: -0.2px;
  color: var(--ink-2); font-variant-numeric: tabular-nums; }
.btn-sm { font-size: 14.5px; padding: 9px 18px; border-radius: 10px; }

/* nav Download is redundant while the hero's own is on screen — it fades in
   only once you've scrolled past the hero (Hugh 2026-08-20). */
/* Download lives in the nav now (Berd-style), always visible. */
.nav-dl { opacity: 1; transform: none; pointer-events: auto; }

.menu-pill {
  display: none;                 /* mobile only — see media query */
  align-items: center; justify-content: center;
  width: 42px; height: 42px; cursor: pointer;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 2px 8px rgba(22, 24, 29, .06);
}
.menu-ico { display: inline-flex; flex-direction: column; gap: 4px; }
.menu-ico i { width: 16px; height: 1.8px; border-radius: 2px; background: var(--ink); }

@media (max-width: 1180px) {
  .nav-mark { display: none; }      /* avoid colliding with the left links */
}
@media (max-width: 860px) {
  .nav-menubar { display: none; }   /* menu-bar cluster is desktop-only */
}
@media (max-width: 640px) {
  .nav-left .nav-link, .nav-right .btn-sm { display: none; }
  .nav-mark { display: none; }
  .menu-pill { display: inline-flex; }
}

.menu-card {
  position: fixed; top: 14px; right: 18px; z-index: 90;
  width: min(340px, calc(100vw - 36px));
  background: var(--card); border-radius: 24px;
  box-shadow: 0 24px 80px rgba(22, 24, 29, .22);
  padding: 18px 30px 30px;
  transform-origin: top right;
  animation: menuIn .28s cubic-bezier(.22,1.2,.36,1);
}
@keyframes menuIn { from { opacity: 0; transform: scale(.9) } to { opacity: 1; transform: scale(1) } }
.menu-close {
  display: block; margin: 0 auto 18px;
  font-family: var(--ui); font-size: 14.5px; font-weight: 600; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 26px; cursor: pointer;
}
.menu-close:hover { background: var(--ground); }
.menu-label {
  font-size: 11.5px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 14px 0 10px;
}
.menu-links { display: flex; flex-direction: column; gap: 4px; }
.menu-links a {
  font-size: 27px; font-weight: 650; letter-spacing: -0.7px;
  color: var(--ink); text-decoration: none; padding: 4px 0;
}
.menu-links a:hover { color: var(--blue); }
.menu-rule { border: 0; border-top: 1px solid var(--line); margin: 18px 0 4px; }
.menu-social { display: flex; gap: 22px; }
.menu-social a { font-size: 15px; color: var(--ink-2); text-decoration: none; }
.menu-social a:hover { color: var(--ink); }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  /* top − bottom = nav height (~64px) so the window centres in the VISIBLE area
     below the fixed nav, not in the raw viewport (Hugh 2026-08-21). */
  padding: 88px 24px 24px;
  overflow-x: clip;
}
.hero-inner { text-align: center; width: 100%; max-width: none; position: relative; z-index: 2; }

/* ---------- the sky: mumbleBlue clouds that PART as you scroll ----------
   (Hugh 2026-08-20: "the scroll and the clouds opening"). Soft at rest — a glow
   behind the M — then JS drives them apart left/right and lifts them away as you
   scroll, opening onto the clean page. All motion (gentle drift + parting) is
   set in main.js so the two never fight over `transform`. Alphas ~half. */
/* clouds retired (Hugh 2026-08-21) — the ground is now the app's light grey
   with the dot grid (body::before) showing through. */
.sky { display: none; }
.cloud { display: none; }

/* floating background objects — Mumble's clean take on Berd's bouncing bits:
   little white tiles with blue icons drifting in the side margins, behind the
   window. Hidden on narrower screens where the window fills the width. */
.hero-floaters {
  position: absolute; inset: 74px 0 0 0; z-index: 1; pointer-events: none; overflow: hidden;
  opacity: 0; transition: opacity .9s ease;   /* stay hidden until the window has "booted" */
}
.hero-floaters.lit { opacity: 1; }
.floater {
  position: absolute; top: 0; left: 0; will-change: transform;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 12px 30px rgba(26,40,80,.13);
}
/* tiles — the wave-M and mic (big, to fill the space) */
.floater.fl-tile {
  width: 106px; height: 106px; border-radius: 24px; background: var(--card); color: var(--blue);
  display: inline-flex; align-items: center; justify-content: center;
}
.floater.fl-tile svg { width: 52px; height: 52px; }
.floater.fl-tile.fl-logo { color: var(--ink); }
.floater.fl-tile.fl-logo svg { width: 62px; height: 42px; overflow: visible; }

/* mini feature cards — Notes / Agent / Chat / Screen / Dictation */
.floater.fl-card {
  display: block; width: 258px; border-radius: 16px; background: var(--card);
  overflow: hidden; text-align: left;
}
.fl-chrome { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid rgba(20,28,48,.06); }
.fl-dots { display: inline-flex; gap: 5px; }
.fl-dots i { width: 8px; height: 8px; border-radius: 50%; }
.fl-dots i:nth-child(1) { background: #ff5f57; } .fl-dots i:nth-child(2) { background: #febc2e; } .fl-dots i:nth-child(3) { background: #28c840; }
.fl-ct { font-size: 13px; font-weight: 600; color: var(--muted); }
.fl-cbody { padding: 15px 17px; font-size: 15.5px; line-height: 1.45; color: var(--ink); }
.fl-cbody b { font-weight: 650; }
.fl-cap { display: block; margin-top: 9px; font-size: 12.5px; color: var(--muted); }
.fl-cbody.fl-chatb { display: flex; flex-direction: column; gap: 8px; }
.fl-mini { max-width: 92%; padding: 8px 13px; border-radius: 14px; font-size: 14px; line-height: 1.3; }
.fl-mini.you { align-self: flex-end; background: linear-gradient(180deg,#6cadfb,#4b95f7); color: #fff; border-bottom-right-radius: 4px; }
.fl-mini.bot { align-self: flex-start; background: #eef1f6; color: var(--ink); border-bottom-left-radius: 4px; }

/* HELLO sticky note */
.floater.fl-sticky {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 20px 30px; border-radius: 6px; background: #fff6c4; color: var(--ink);
  font-size: 15px; box-shadow: 0 16px 34px rgba(120,105,30,.20);
}
.fl-sticky .fl-hello { font-size: 12.5px; letter-spacing: .14em; color: #c69a1e; font-weight: 700; }
.fl-sticky .fl-name { font-size: 27px; font-weight: 750; letter-spacing: -.02em; }

/* Listening pill */
.floater.fl-pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px;
  background: var(--card); font-size: 18px; font-weight: 600; color: var(--ink-2); white-space: nowrap;
}
.fl-pw { display: inline-flex; align-items: center; gap: 3.5px; }
.fl-pw i { width: 3.5px; border-radius: 2px; background: var(--blue); }
.fl-pw i:nth-child(1) { height: 10px; } .fl-pw i:nth-child(2) { height: 20px; }
.fl-pw i:nth-child(3) { height: 13px; } .fl-pw i:nth-child(4) { height: 8px; }

/* blue ask bubble */
.floater.fl-bubble-text {
  display: inline-flex; align-items: center; padding: 14px 22px;
  border-radius: 20px; border-bottom-right-radius: 6px;
  background: linear-gradient(180deg,#6cadfb,#4b95f7); color: #fff;
  font-size: 17px; font-weight: 500; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 14px 34px rgba(80,150,245,.30);
}
@media (max-width: 1180px) { .hero-floaters { display: none; } }   /* window fills the width */
.cloud {
  position: absolute; border-radius: 50%;
  filter: blur(52px);
  will-change: transform, opacity;
}
/* Lit cloud forms: a WHITE core (masks the dots underneath → reads as a
   fluffy cloud, not tinted dots) fading through brand-blue (the sky) to clear. */
.cloud-glow {
  width: 58vw; height: 42vw; left: 21vw; top: 8%;
  background: radial-gradient(closest-side,
    rgba(255,255,255,.9) 6%, rgba(140,190,255,.62) 38%, rgba(96,165,250,.34) 58%, transparent 76%);
}
.cloud-left  {
  width: 62vw; height: 42vw; left: -18vw; top: -2%;
  background: radial-gradient(closest-side,
    rgba(255,255,255,.85) 8%, rgba(130,185,255,.6) 40%, rgba(96,165,250,.3) 62%, transparent 76%);
}
.cloud-left2 {
  width: 48vw; height: 30vw; left: -2vw; bottom: -4%;
  background: radial-gradient(closest-side,
    rgba(255,255,255,.78) 10%, rgba(150,195,255,.5) 44%, rgba(110,175,250,.22) 66%, transparent 78%);
}
.cloud-right  {
  width: 60vw; height: 38vw; right: -16vw; top: 14%;
  background: radial-gradient(closest-side,
    rgba(255,255,255,.85) 8%, rgba(140,190,255,.58) 40%, rgba(110,175,250,.3) 62%, transparent 76%);
}
.cloud-right2 {
  width: 44vw; height: 28vw; right: 2vw; top: -2%;
  background: radial-gradient(closest-side,
    rgba(255,255,255,.76) 10%, rgba(160,200,255,.48) 44%, rgba(120,180,255,.2) 66%, transparent 78%);
}

/* THE LINE — positioned by JS at the exact baseline of the M's feet */
.voiceline {
  position: absolute; left: 0; width: 100%; z-index: 1;
  pointer-events: none; overflow: visible;
}
.voiceline path { fill: none; stroke: var(--ink); stroke-linecap: round; }

.hero-wordmark {
  display: inline-flex; align-items: baseline; justify-content: center;
  font-size: clamp(28px, 3.6vw, 42px); font-weight: 640; letter-spacing: -0.045em;
  line-height: 1; user-select: none; position: relative;
}
.hero-wordmark .wavem { cursor: default; }
.hw-umble { display: inline-block; }

.hero-tag {
  margin-top: 10px; min-height: 1.4em;
  font-size: clamp(15px, 1.8vw, 18px); color: var(--ink-2);
  letter-spacing: -0.4px; font-weight: 500;
  max-width: 640px; margin-left: auto; margin-right: auto;
}

/* DEAD-SIMPLE launch hero (Hugh 2026-08-22): centred kicker + headline + sub +
   download, heyclicky's original. The elaborate window/floaters are retired. */
.hero > .voiceline, .stage, .hero-floaters { display: none; }
.hero-kicker {
  font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
/* the Mumble wave-M, inline in text — sized close to a real capital M with air
   on both sides so it doesn't crowd its neighbours. */
.wm-inline { display: inline-block; width: .92em; height: .68em; transform: translateY(-.04em); margin: 0 .07em; }
.wm-inline svg { width: 100%; height: 100%; overflow: visible; }
.wm-inline .wavem-path { fill: none; stroke: currentColor; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.wm-big { width: .86em; height: .64em; margin: 0 .11em; }
.wm-big .wavem-path { stroke-width: 9; }

/* launch-minimal (Hugh 2026-08-22): hero + footer only. The feature demos and
   the closing CTA are hidden for now — delete this rule to bring them back. */
.features, .get, .hero-scrollcue { display: none; }

/* changelog modal — opened from the footer */
.clog { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.clog[hidden] { display: none; }
.clog-backdrop { position: absolute; inset: 0; background: rgba(20, 28, 48, .32); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.clog-panel {
  position: relative; z-index: 1; width: min(520px, 100%); max-height: 82vh; overflow-y: auto;
  background: var(--card); border-radius: 20px; padding: 32px 34px 28px;
  box-shadow: 0 30px 80px rgba(20, 28, 48, .35); animation: clogin .3s cubic-bezier(.22,1.2,.36,1);
}
@keyframes clogin { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.clog-x { position: absolute; top: 14px; right: 18px; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer; }
.clog-x:hover { color: var(--ink); }
.clog-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.clog-title { margin-top: 6px; font-size: 30px; font-weight: 720; letter-spacing: -.02em; color: var(--ink); }
.clog-list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.clog-entry { display: flex; gap: 14px; align-items: flex-start; }
.clog-badge { flex: none; margin-top: 2px; font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: linear-gradient(180deg,#6cadfb,#4b95f7); padding: 3px 9px; border-radius: 999px; }
.clog-head { font-size: 16.5px; font-weight: 650; color: var(--ink); }
.clog-body { margin-top: 3px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.clog-foot { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }

/* ---------- legal pages (centred, heyclicky-style) ---------- */
.lg-wrap { max-width: 780px; margin: 0 auto; padding: 132px 24px 60px; text-align: center; }
.lg-title { font-size: clamp(38px, 6vw, 56px); font-weight: 500; letter-spacing: -.03em; line-height: 1.2; color: #000; }
.lg-back { display: inline-block; margin: 40px 0 6px; color: var(--ink-2); text-decoration: none; font-size: 16px; }
.lg-back:hover { color: var(--ink); }
.lg-body { margin-top: 34px; text-align: left; }
.lg-body .lg-updated { color: var(--muted); font-size: 14px; }
.lg-body p { margin-top: 16px; font-size: 16.5px; line-height: 1.72; color: var(--ink-2); }
.lg-body h2 { margin-top: 42px; font-size: 22px; font-weight: 700; color: var(--ink); }
.lg-body ul { margin-top: 12px; padding-left: 22px; }
.lg-body li { margin-top: 9px; font-size: 16.5px; line-height: 1.62; color: var(--ink-2); }
.lg-body a { color: var(--blue); text-decoration: none; }
.lg-body a:hover { text-decoration: underline; }
.lg-body strong { color: var(--ink); font-weight: 620; }
.lg-note { margin: 22px 0 4px; padding: 15px 17px; background: #fff8e1; border: 1px solid #f0e2a8; border-radius: 12px; font-size: 14px; color: #7a6a1e; }
.lg-seealso { margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.lg-seealso a { color: var(--blue); text-decoration: none; }
.lg-seealso a:hover { text-decoration: underline; }

/* windows waitlist — inline, in place of the Download button */
.hero-wl { display: inline-flex; gap: 10px; align-items: stretch; }
.hero-wl-input {
  min-width: 260px; padding: 0 20px; border-radius: 12px; font: inherit; font-size: 16px;
  color: var(--ink); background: var(--card); border: 1px solid var(--line); outline: none;
}
.hero-wl-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(96,165,250,.18); }
.hero-wl-join { flex: none; }
.hero-wl-msg { margin: 4px auto 0; font-size: 15.5px; color: var(--ink-2); }
.hero-wl-msg.ok { color: var(--ink); font-weight: 550; }
@media (max-width: 520px) {
  .hero-wl { flex-direction: column; width: min(340px, 92vw); }
  .hero-wl-input { min-width: 0; padding: 14px 18px; }
}
.hero-headline {
  margin-top: 20px; font-size: clamp(40px, 6.4vw, 82px); font-weight: 780;
  letter-spacing: -0.035em; line-height: 1.02; color: var(--ink);
}
.hero-sub {
  margin: 26px auto 0; max-width: 620px; font-size: clamp(16px, 2vw, 19px);
  line-height: 1.6; color: var(--ink-2);
}
.hero-fine-link { color: var(--blue); text-decoration: none; font-weight: 600; }
.hero-fine-link:hover { text-decoration: underline; }

/* THE STAR — retired window styles (kept in case, but .stage is display:none). */
.stage { margin: 0 auto; width: min(996px, 96vw); }
.oswin-modern {
  border-radius: 16px; overflow: hidden; text-align: left;
  background: var(--surface2);        /* the app's second colour, not white */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 0 0 .5px rgba(20, 28, 48, .16),
    0 30px 70px rgba(26, 40, 80, .22),
    0 8px 20px rgba(26, 40, 80, .12);
}
.oswin-bar {
  position: relative; display: flex; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid rgba(20, 28, 48, .07);
}
.oswin-lights { display: inline-flex; gap: 8px; }
.oswin-lights i { width: 12px; height: 12px; border-radius: 50%; }
.oswin-lights i:nth-child(1) { background: #ff5f57; }
.oswin-lights i:nth-child(2) { background: #febc2e; }
.oswin-lights i:nth-child(3) { background: #28c840; }
.oswin-title {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
}
.oswin-title .wavem { width: 19px; height: 13px; }
.oswin-title .wavem-path { fill: none; stroke: var(--blue); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
/* app layout: sidebar + conversation panel, like a real macOS app */
.oswin-main { display: flex; height: min(671px, calc(100svh - 160px)); }

/* ---- the real Mumble app: sidebar ---- */
.ap-side {
  flex: none; width: 248px; padding: 18px 14px; display: flex; flex-direction: column;
  border-right: 1px solid rgba(20,28,48,.06); background: transparent;   /* same grey as the canvas */
}
.ap-brand { display: flex; align-items: center; gap: 8px; padding: 2px 6px 20px; }
.ap-brand .wavem { width: 27px; height: 18px; }
.ap-brand .wavem-path { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.ap-word { font-size: 21px; font-weight: 640; letter-spacing: -.03em; color: var(--ink); }
.ap-free { margin-left: 4px; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.ap-nav { display: flex; flex-direction: column; gap: 3px; }
.ap-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; font-size: 15.5px; font-weight: 500; color: var(--ink-2); cursor: default; }
.ap-item svg { width: 20px; height: 20px; flex: none; }
.ap-item .ap-aa { width: 20px; text-align: center; font-weight: 650; font-size: 15px; }
.ap-item.ap-active { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(26,40,80,.06); }
.ap-plan { margin-top: auto; padding: 14px; border-radius: 12px; background: rgba(20,28,48,.035); }
.ap-plan-h { font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.ap-plan-h b { color: var(--ink); font-weight: 650; }
.ap-plan-list { list-style: none; margin: 11px 0 13px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ap-plan-list li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); }
.ap-plan-list li svg { width: 15px; height: 15px; color: var(--ink-2); flex: none; }
.ap-manage { width: 100%; padding: 9px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: inherit; font-size: 13.5px; font-weight: 600; cursor: default; }
.ap-foot { display: flex; flex-direction: column; gap: 3px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.ap-fitem { display: flex; align-items: center; gap: 12px; padding: 7px 12px; font-size: 14.5px; color: var(--ink-2); }
.ap-fitem svg { width: 19px; height: 19px; flex: none; }

/* ---- the content canvas: header, stats, learning center, history ---- */
.ap-content {
  flex: 1; min-width: 0; padding: 30px 34px; overflow: hidden;
  background-image: radial-gradient(var(--dot) 1px, transparent 1.5px); background-size: 22px 22px;
}
.ap-h { display: flex; align-items: center; gap: 11px; font-size: 27px; font-weight: 640; letter-spacing: -.02em; color: var(--ink); }
.ap-kbd { font-size: 17px; padding: 5px 13px; }
.ap-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 24px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.ap-stat { padding: 20px 22px; }
.ap-stat + .ap-stat { border-left: 1px solid var(--line); }
.ap-sl { display: block; font-size: 13.5px; color: var(--muted); }
.ap-sv { display: block; margin-top: 8px; font-size: 31px; font-weight: 720; letter-spacing: -.02em; color: var(--ink); }
.ap-sv em { font-size: 14px; font-weight: 500; font-style: normal; color: var(--muted); margin-left: 5px; }
.ap-sec { margin-top: 26px; font-size: 20px; font-weight: 640; color: var(--ink); }
.ap-learn { display: flex; gap: 18px; margin-top: 14px; padding: 20px; background: rgba(20,28,48,.025); border-radius: 16px; }
.ap-learn-l { flex: none; width: 210px; }
.ap-lt { font-size: 13px; color: var(--muted); }
.ap-learn-l p { margin-top: 6px; font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.ap-tasks { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ap-task { position: relative; padding: 14px 14px 16px; background: var(--card); border-radius: 12px; box-shadow: 0 1px 3px rgba(26,40,80,.05); }
.ap-tn { font-size: 13px; color: var(--muted); }
.ap-tick { position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; }
.ap-tick.on { background: var(--blue); border-color: var(--blue); }
.ap-tl { display: block; margin-top: 30px; font-size: 13.5px; font-weight: 500; color: var(--ink); line-height: 1.3; }
.ap-today { margin-top: 12px; font-size: 12px; letter-spacing: .1em; color: var(--muted); }
.ap-hist { margin-top: 10px; }
.ap-hrow { display: flex; gap: 18px; padding: 14px 2px; border-top: 1px solid var(--line); }
.ap-htime { flex: none; width: 66px; font-size: 13.5px; color: var(--muted); }
.ap-htext { font-size: 15px; color: var(--ink); line-height: 1.4; }

/* cinematic reel — a glimpse of the range (the scroll-down videos are the proof) */
.ap-content.reel-content { display: flex; align-items: center; justify-content: center; padding: 24px; overflow: hidden; }
.reel { position: relative; width: 100%; height: 100%; }
.reel-slide {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px;
  opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .5s ease, transform .5s ease; pointer-events: none;
}
.reel-slide.active { opacity: 1; transform: none; }
.reel-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 200px; }
.reel-cap { max-width: 470px; text-align: center; font-size: 22px; font-weight: 560; color: var(--ink); line-height: 1.4; }
.reel-kicker { display: block; margin-bottom: 9px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }

.reel-note { position: relative; background: var(--card); border-radius: 16px; padding: 26px 30px; width: 440px; box-shadow: 0 16px 38px rgba(26,40,80,.13); }
.reel-doc { font-size: 22px; line-height: 1.5; color: var(--ink); font-weight: 500; }
.reel-caret { display: inline-block; width: 2px; height: 1.05em; background: var(--ink); margin-left: 2px; vertical-align: -.12em; animation: apcaret 1s step-end infinite; }
.reel-badge { position: absolute; bottom: -15px; right: 16px; background: linear-gradient(180deg,#6cadfb,#4b95f7); color: #fff; font-size: 12px; font-weight: 650; padding: 6px 12px; border-radius: 999px; box-shadow: 0 8px 18px rgba(80,150,245,.3); }

.reel-chart { position: relative; display: flex; align-items: flex-end; gap: 16px; height: 190px; padding: 22px 28px; background: var(--card); border-radius: 16px; box-shadow: 0 16px 38px rgba(26,40,80,.13); }
.rc-bar { width: 34px; height: var(--h); background: #dfe4ee; border-radius: 6px 6px 0 0; }
.rc-bar.rc-worst { background: linear-gradient(180deg,#6cadfb,#4b95f7); }
.reel-ring { position: absolute; width: 96px; height: 96px; left: 33px; top: 34px; opacity: 0; filter: drop-shadow(0 0 6px rgba(75,149,247,.45)); }
.reel-slide.active .reel-ring { animation: reelring .5s cubic-bezier(.34,1.56,.64,1) .45s forwards; }
@keyframes reelring { from { opacity: 0; transform: scale(.55) rotate(-10deg); } to { opacity: 1; transform: none; } }
.reel-tip { position: absolute; left: 8px; top: -8px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 10px; opacity: 0; }
.reel-slide.active .reel-tip { animation: reeltip .4s ease .9s forwards; }
@keyframes reeltip { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.reel-agent { display: flex; flex-direction: column; gap: 16px; background: var(--card); border-radius: 16px; padding: 28px 34px; box-shadow: 0 16px 38px rgba(26,40,80,.13); }
.ra-row { display: flex; align-items: center; gap: 15px; font-size: 19px; color: var(--ink); opacity: 0; transform: translateX(-8px); }
.reel-slide.active .ra-row { animation: reelrow .4s ease forwards; }
.reel-slide.active .ra-row:nth-child(1) { animation-delay: .3s; }
.reel-slide.active .ra-row:nth-child(2) { animation-delay: .75s; }
.reel-slide.active .ra-row:nth-child(3) { animation-delay: 1.2s; }
@keyframes reelrow { to { opacity: 1; transform: none; } }
.ra-tick { width: 27px; height: 27px; border-radius: 50%; background: var(--blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex: none; }
.ra-tick.ra-live { background: rgba(96,165,250,.2); position: relative; }
.ra-tick.ra-live::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--blue); animation: apcaret 1s step-end infinite; }

/* live session feed — Mumble working, streaming in */
.ap-feed { margin-top: 22px; height: 350px; overflow: hidden; display: flex; flex-direction: column; gap: 12px; justify-content: flex-end; }
.fe-you, .fe-bot {
  max-width: 78%; padding: 12px 16px; border-radius: 17px; font-size: 15.5px; line-height: 1.45;
  opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease;
}
.fe-you.in, .fe-bot.in { opacity: 1; transform: none; }
.fe-you { align-self: flex-end; background: linear-gradient(180deg,#6cadfb,#4b95f7); color: #fff; border-bottom-right-radius: 5px; }
.fe-bot { align-self: flex-start; background: var(--card); color: var(--ink); border-bottom-left-radius: 5px; box-shadow: 0 1px 3px rgba(26,40,80,.05); display: flex; flex-direction: column; gap: 5px; }
.fe-bot.fe-dots { color: var(--muted); letter-spacing: 2px; }
.fe-tag { align-self: flex-start; font-size: 10.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--blue); }
.ap-composer {
  margin-top: 16px; display: flex; align-items: center; gap: 10px;
  padding: 10px 10px 10px 18px; border-radius: 14px; background: var(--card);
  box-shadow: 0 1px 3px rgba(26,40,80,.06);
}
.ap-composer-t { flex: 1; color: var(--muted); font-size: 15px; }
.ap-composer-mic { flex: none; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(180deg,#6cadfb,#4b95f7); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.ap-composer-mic svg { width: 19px; height: 19px; fill: currentColor; }
/* window boot overlay — app icon + a tagline that types in, then reveals the app */
.oswin-modern { position: relative; }
.ap-load {
  position: absolute; inset: 47px 0 0 0; z-index: 4; background: var(--surface2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  transition: opacity .55s ease;
}
.ap-load.done { opacity: 0; pointer-events: none; }
.ap-load-icon {
  width: 94px; height: 94px; border-radius: 24px; background: var(--ink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 16px 34px rgba(26,40,80,.22);
}
.ap-load-icon .wavem { width: 54px; height: 37px; overflow: visible; }
.ap-load-icon .wavem-path { fill: none; stroke: #fff; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.ap-load-line { font-size: 30px; font-weight: 640; letter-spacing: -.02em; color: var(--ink); min-height: 1.2em; }
.ap-load-caret { display: inline-block; width: 3px; height: 1.05em; margin-left: 3px; background: var(--ink); vertical-align: -0.12em; animation: apcaret 1s step-end infinite; }
@keyframes apcaret { 50% { opacity: 0; } }

@media (max-width: 720px) { .ap-side { display: none; } }
.rot-caret { background: var(--ink-2); height: 1.05em; }
.hero-ctas {
  margin-top: 16px;
  display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;
}

/* the live transcript under the buttons — where YOUR voice lands */
.hero-transcript {
  margin: 26px auto 0; min-height: 30px; max-width: 620px;
  font-size: 18px; line-height: 1.5; letter-spacing: -0.3px; color: var(--ink);
}
.hero-transcript-hint { color: var(--muted); font-size: 14.5px; }
.hero-transcript.live .hero-transcript-hint,
.hero-transcript.has-text .hero-transcript-hint { display: none; }
.tcaret {
  display: inline-block; width: 2px; height: 1em; margin-left: 1px;
  background: var(--blue); vertical-align: -0.12em;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.hero-fine { margin-top: 10px; font-size: 13px; color: var(--muted); letter-spacing: -0.1px; }
.hero-scrollcue {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
  animation: cue 2.4s ease-in-out infinite;
}
@keyframes cue { 0%,100% { opacity:.45; transform:translate(-50%,0) } 50% { opacity:1; transform:translate(-50%,6px) } }

/* ---------- keycaps (kept minimal, ink-first) ---------- */
.keycap {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 23px; padding: 0 5px; border-radius: 6px;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 1.5px 0 var(--line);
  color: var(--ink); font-size: 13px; font-weight: 650;
  transform: translateY(2px); margin: 0 1px;
}

/* ---------- features: heyclicky-style chat + screen recording ----------
   (Hugh 2026-08-20): after the hero, a stack of feature sections — a Mac
   window (screen recording or the live dictation demo) beside a short chat in
   Mumble-blue bubbles + a title. Shows the breadth: it's not just dictation. */
.features { position: relative; max-width: 1120px; margin: 0 auto; padding: 40px 28px 40px; }
.feature {
  display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: 60px;
  margin: 0 0 150px;
  transform-origin: center center; will-change: transform, opacity;
}
.feature:last-child { margin-bottom: 40px; }
.feature-flip .feature-copy { order: 2; }
.feature-flip .feature-media { order: 1; }
.feature-copy { max-width: 360px; }
.feature-flip .feature-copy { margin-left: auto; }
.feature-copy h3 {
  font-size: clamp(20px, 2.4vw, 26px); font-weight: 720; letter-spacing: -0.5px;
  margin: 22px 0 10px;
}
.feature-copy p { font-size: 15.5px; line-height: 1.62; color: var(--ink-2); letter-spacing: -0.2px; }
.feature-copy p em { font-style: italic; color: var(--ink); font-weight: 500; }
.feature-copy p .keycap { transform: translateY(2px); }
.feature .showcase-try { align-items: flex-start; margin-top: 18px; gap: 7px; }
.feature .showcase-try .btn { font-size: 14px; padding: 10px 18px; border-radius: 10px; }
.feature .showcase-hint { font-size: 12px; }

/* the voice wave — MUMBLE'S continuous fluid line, sat UNDER the ask bubble:
   it's the USER talking. It collapses away once the reply lands (no mic wave
   for the responding side — Hugh 2026-08-20). */
.chat-wave {
  display: block; width: 150px; height: 28px; margin: 6px 0 2px 10px;
  overflow: visible;
  transition: opacity .45s ease, max-height .45s ease, margin .45s ease;
  max-height: 28px;
}
.chat-wave path { fill: none; stroke: var(--muted); stroke-width: 2.4; stroke-linecap: round; opacity: .8; }
.feature.typed .chat-wave { opacity: 0; max-height: 0; margin: 0 0 0 10px; }

/* the chat: iMessage-style bubbles with tails, our blue */
.chat { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.bubble {
  position: relative; max-width: 92%; width: fit-content;
  padding: 14px 20px; font-size: 19px;
  line-height: 1.38; letter-spacing: -0.3px; border-radius: 24px;
}
/* the ask: glossy mumbleBlue, light at the top like the app's Do-it button */
.bubble-you {
  background: linear-gradient(180deg, #9ac6fd 0%, #6badfb 45%, #4f97f8 100%);
  color: #fff; text-shadow: 0 1px 1px rgba(30, 80, 160, .18);
  border: 1px solid rgba(255, 255, 255, .55);
  border-bottom-left-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 10px 24px rgba(80, 150, 245, .26);
}
.bubble-you::after {   /* solid triangle tail — reliable on the dotted ground */
  content: ""; position: absolute; left: -5px; bottom: 0;
  width: 13px; height: 15px; background: #4f97f8;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
/* the reply: soft warm grey, "on it" energy */
.bubble-reply {
  background: linear-gradient(180deg, #f4f4f6, #e8e9ec);
  color: var(--ink); align-self: flex-start;
  border: 1px solid rgba(255, 255, 255, .7);
  border-bottom-left-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 6px 16px rgba(22, 24, 29, .07);
}
.bubble-reply::after {
  content: ""; position: absolute; left: -5px; bottom: 0;
  width: 13px; height: 15px; background: #e8e9ec;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
/* both pre-hidden. On reveal the ASK bubble pops then TYPES itself out
   (Hugh 2026-08-20: "appear like they are being typed"); the reply pops only
   once the typing is done (.typed set by JS). */
.bubble { opacity: 0; transform: translateY(8px) scale(.96); transform-origin: left bottom;
  transition: opacity .3s ease, transform .35s cubic-bezier(.22,1.2,.36,1); }
.feature.seen .bubble-you { opacity: 1; transform: none; }
.feature.typed .bubble-reply { opacity: 1; transform: none; }
.bubble .bcaret {
  display: inline-block; width: 2px; height: 1em; margin-left: 1px;
  background: rgba(255,255,255,.9); vertical-align: -0.12em;
  animation: blink .9s steps(1) infinite;
}
.feature-copy h3, .feature-copy > p, .feature .showcase-try {
  opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease;
}
.feature.seen h3 { transition-delay: .35s; }
.feature.seen > .feature-copy > p { transition-delay: .45s; }
.feature.seen .showcase-try { transition-delay: .55s; }
.feature.seen h3, .feature.seen > .feature-copy > p, .feature.seen .showcase-try {
  opacity: 1; transform: none;
}

.feature-media { display: flex; flex-direction: column; align-items: center; }

/* the screen-recording window */
.mac.mac-video {
  /* the wallpaper is the OUTERMOST layer (Hugh 2026-08): blue-and-white CLOUDS,
     painted in CSS — white-cored puffs fading through mumbleBlue over a soft
     blue sky, matching the hero clouds. The macOS window sits inset within it,
     heyclicky's desktop-wallpaper look, no photo. */
  border: 1px solid rgba(18, 22, 30, .3);
  border-radius: 16px;
  padding: 18px;
  background:
    radial-gradient(58% 46% at 20% 26%, rgba(255,255,255,.92), rgba(255,255,255,.5) 34%, rgba(255,255,255,0) 62%),
    radial-gradient(54% 42% at 80% 70%, rgba(255,255,255,.86), rgba(255,255,255,.42) 34%, rgba(255,255,255,0) 62%),
    radial-gradient(48% 38% at 62% 14%, rgba(255,255,255,.72), rgba(255,255,255,0) 58%),
    radial-gradient(44% 36% at 8% 84%, rgba(255,255,255,.62), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #7fb4fb 0%, #a4cafc 52%, #c9e0fe 100%);
}
.os-win {
  border-radius: 11px; overflow: hidden;
  background: var(--card);
  /* heyclicky's window presence: a DARK navy rim hugs the whole window (not a
     faint hairline) + big soft ambient shadow + tight contact shadow, so it
     reads as a real window floating on the wallpaper. */
  box-shadow:
    0 0 0 1px rgba(20, 28, 48, .55),
    0 22px 46px rgba(12, 26, 55, .36),
    0 4px 12px rgba(12, 26, 55, .24);
}
/* the video windows carry a CENTRED window title, like a real macOS window */
.mac-video .mac-bar { position: relative; justify-content: flex-start; }
.mac-video .mac-title {
  position: absolute; left: 50%; transform: translateX(-50%);
  margin-left: 0; font-size: 13.5px; color: #5c5f64;
}

.mac-video .mac-screen {
  position: relative; aspect-ratio: 1008 / 654;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: #fff;
}
.mac-video .mac-screen.has-video { aspect-ratio: auto; }
.mac-video .mac-screen video { width: 100%; height: auto; display: block; }
.mac-screen-note {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.mac-screen.has-video .mock-chem, .mac-screen.has-video .mac-screen-note { display: none; }

/* feature 1 "Notes" window shares the framed shell (cloud wallpaper + dark rim +
   title bar) with the video features, so all three read as one family. It keeps
   its title left-aligned (not centred) so it never collides with the live
   char/word counter on the right. */
.mac-notes .mac-title {
  position: static; left: auto; transform: none; margin-left: 8px;
}

/* player controls on recordings (heyclicky's): scrub bar + speaker toggle.
   Hidden until a real video loads; sit over a soft gradient so they read on
   any footage. */
.mac-controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: none; align-items: center; gap: 12px;
  padding: 12px 14px 12px 16px;
  background: linear-gradient(180deg, transparent, rgba(10, 20, 40, .34));
}
.mac-screen.has-video .mac-controls { display: flex; }

/* the seek bar — a slim visible track with a taller invisible hit zone above
   and below (padding + background-clip) so clicks land where you aim */
.mac-seek {
  position: relative; flex: 1; height: 4px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .34);
}
.mac-seek::before {
  content: ""; position: absolute; left: 0; right: 0; top: -9px; bottom: -9px;
}
.mac-seek-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  border-radius: 999px; background: #fff;
}
.mac-seek-knob {
  position: absolute; top: 50%; left: 0; width: 11px; height: 11px;
  margin-left: -5.5px; transform: translateY(-50%); border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  opacity: 0; transition: opacity .15s ease;
}
.mac-seek:hover .mac-seek-knob { opacity: 1; }

/* the speaker toggle */
.mac-mute {
  flex: none; width: 26px; height: 26px; cursor: pointer;
  background: transparent; border: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
}
.mac-mute svg { width: 20px; height: 20px; fill: #fff; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; }
.mac-mute .mm-wave { display: none; }
.mac-mute.unmuted .mm-x { display: none; }
.mac-mute.unmuted .mm-wave { display: block; }

/* ---- the plate: a chemistry figure with Mumble's annotation on it ---- */
.mock-chem { position: absolute; inset: 0; overflow: hidden; }
.mock-plate {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  display: block;
}
.mock-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mock-chem-chip {
  position: absolute; left: 52%; bottom: 30%;
  background: linear-gradient(180deg, #6cadfb, #4b95f7); color: #fff;
  font-size: 13.5px; font-weight: 600; letter-spacing: -0.2px;
  padding: 9px 15px; border-radius: 12px; border-bottom-left-radius: 4px;
  box-shadow: 0 8px 20px rgba(80, 150, 245, .35);
  max-width: 62%;
}
/* Mumble draws the annotation when the feature takes focus: the circle springs
   in around its own centre, then the label pops. Rearms on reset → replays each
   time (matches the ask-bubble show and heyclicky's replays). */
.mock-overlay ellipse {
  transform-box: fill-box; transform-origin: center;
  opacity: 0; transform: scale(.68);
  transition: opacity .28s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
}
.mock-chem-chip {
  opacity: 0; transform: translateY(6px) scale(.92);
  transition: opacity .3s ease, transform .4s cubic-bezier(.34,1.56,.64,1);
}
.feature.typed .mock-overlay ellipse { opacity: .95; transform: scale(1); transition-delay: .1s; }
.feature.typed .mock-chem-chip { opacity: 1; transform: none; transition-delay: .5s; }

@media (max-width: 820px) {
  .feature, .feature-flip { grid-template-columns: 1fr; gap: 30px; }
  .feature-flip .feature-copy { order: 1; margin-left: 0; }
  .feature-flip .feature-media { order: 2; }
  .feature-copy { max-width: 560px; margin: 0 auto; }
}
/* the Mac window */
.mac {
  width: min(642px, 94vw); border-radius: 18px; overflow: hidden;
  transform-origin: center center; will-change: transform;
  background: var(--card); border: 1px solid rgba(22, 24, 29, .07);
  /* heyclicky's floating-window presence: a deep soft throw + a tight
     contact shadow, so the window sits OFF the page */
  box-shadow: 0 34px 80px rgba(22, 24, 29, .28), 0 6px 18px rgba(22, 24, 29, .12);
}
/* a REAL macOS title bar (Hugh 2026-08-20, matching heyclicky's): the true
   traffic-light colours, a soft grey gradient, crisp hairline, taller */
.mac-bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  border-bottom: 1px solid #bdbdc0;
  background: linear-gradient(180deg, #e7e7e9 0%, #d6d6d9 100%);
}
/* glossy traffic lights: a top highlight over the colour, like real macOS */
.mac-bar i {
  width: 12px; height: 12px; border-radius: 50%;
  box-shadow: inset 0 -1px 1px rgba(0,0,0,.18), inset 0 1px 1px rgba(255,255,255,.5);
}
.mac-bar i:nth-child(1) { background: radial-gradient(circle at 50% 32%, #ff8a84, #fc5b52 62%); border: .5px solid #e0443e; }
.mac-bar i:nth-child(2) { background: radial-gradient(circle at 50% 32%, #ffd27a, #feb92a 62%); border: .5px solid #d89e24; }
.mac-bar i:nth-child(3) { background: radial-gradient(circle at 50% 32%, #6fe081, #26c33e 62%); border: .5px solid #1eae31; }
.mac-title { margin-left: 8px; font-size: 13.5px; font-weight: 500; color: #5c5f64; }
.mac-count { margin-left: auto; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mac-count b { font-weight: 650; color: var(--ink-2); }
.mac-doc { padding: 30px 34px; min-height: 268px; text-align: left; }
.mac-doc-body { font-size: 19px; line-height: 1.75; color: var(--ink); letter-spacing: -0.2px; }
.mac-doc-body .ghost { opacity: 0; }
.mac-caret {
  display: inline-block; width: 2px; height: 1.05em; margin-left: 1px;
  background: var(--blue); vertical-align: -0.15em; animation: blink 1s steps(1) infinite;
}
.mac-hud {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-top: 1px solid var(--line); background: #fbfcfd;
  font-size: 12px; color: var(--muted);
}
.mac-wave { display: flex; align-items: center; gap: 3px; height: 16px; }
.mac-wave i { width: 3px; height: 3px; border-radius: 2px; background: var(--blue); }
.mac-wave.speaking i { animation: bar .7s ease-in-out infinite; }
.mac-wave.speaking i:nth-child(1) { animation-delay: 0s; }
.mac-wave.speaking i:nth-child(2) { animation-delay: .12s; }
.mac-wave.speaking i:nth-child(3) { animation-delay: .22s; }
.mac-wave.speaking i:nth-child(4) { animation-delay: .08s; }
.mac-wave.speaking i:nth-child(5) { animation-delay: .18s; }
@keyframes bar { 0%,100% { height: 3px } 50% { height: 14px } }
.showcase-try { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.showcase-hint { font-size: 13px; color: var(--muted); letter-spacing: -0.2px; }

/* hold-&-talk try-it — button with a caption beneath, centred under the window */
.tryit { display: flex; flex-direction: column; align-items: center; gap: 9px; margin-top: 20px; }
.tryit-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 14.5px; font-weight: 600; letter-spacing: -0.2px;
  color: #2b3a52; background: #fff;
  border: 1.5px solid rgba(96,165,250,.5);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 6px 16px rgba(80,150,245,.14);
  -webkit-user-select: none; user-select: none; touch-action: none;
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.tryit-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(80,150,245,.22); }
.tryit-btn:active { transform: translateY(0); }
.tryit-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 50% 35%, #7cb2fb, #4b95f7 70%);
  box-shadow: 0 0 0 0 rgba(96,165,250,.5);
}
/* recording: the button glows blue and the dot breathes red like a REC light */
.tryit-btn.listening {
  color: #fff; border-color: transparent;
  background: linear-gradient(180deg, #6cadfb, #4b95f7);
  box-shadow: 0 10px 26px rgba(80,150,245,.4);
}
.tryit-btn.listening .tryit-dot {
  background: radial-gradient(circle at 50% 35%, #ff8a84, #f5514a 70%);
  animation: recPulse 1s ease-in-out infinite;
}
@keyframes recPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(245,81,74,.55); }
  50%     { box-shadow: 0 0 0 6px rgba(245,81,74,0); }
}
.tryit-hint { font-size: 13px; color: var(--muted); letter-spacing: -0.2px; }
@media (prefers-reduced-motion: reduce) {
  .tryit-btn.listening .tryit-dot { animation: none; }
}

/* THE PAGE LINE — one thread from the hero underline to the full stop */
.pageline {
  position: absolute; top: 0; left: 0; width: 100%; z-index: 0;
  pointer-events: none; overflow: visible;
}
.pageline path { stroke: var(--blue); stroke-width: 3; stroke-linecap: round; opacity: .85; }
.pageline circle { fill: var(--blue); opacity: 0; transition: opacity .2s ease; }
/* parked (Hugh 2026-08-20): the page-flowing line dangled awkwardly through the
   heyclicky feature layout. Hero underline stays; this is off for the clean look. */
.pageline { display: none; }

/* ---------- get: the line ends here ---------- */
.get { position: relative; text-align: center; padding: 40px 24px 130px; }
.get-title {
  margin-top: 150px;
  font-size: clamp(34px, 6vw, 64px); font-weight: 780; letter-spacing: -0.04em;
}
.get-fullstop { color: var(--blue); }
.get-sub { margin: 18px auto 32px; max-width: 460px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.get-fine { display: block; margin-top: 18px; font-size: 13px; color: var(--muted); }

/* ---------- shared section furniture (pricing + changelog) ---------- */
.section-kicker {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--blue); font-weight: 600; margin-bottom: 10px;
}
.section-title { font-size: clamp(28px, 4.4vw, 44px); font-weight: 760; letter-spacing: -0.03em; }
.section-sub { margin: 14px auto 0; max-width: 520px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }

/* ---------- pricing ---------- */
.pricing { position: relative; text-align: center; padding: 90px 24px 40px; }
.price-cards { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; margin: 40px auto 0; max-width: 720px; }
.price-card {
  flex: 1 1 300px; max-width: 340px; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 26px 26px 28px; box-shadow: 0 10px 30px rgba(22,24,29,.05);
  display: flex; flex-direction: column;
}
.price-card-pro { border-color: rgba(96,165,250,.5); box-shadow: 0 14px 36px rgba(80,150,245,.14); }
.price-name { font-size: 13px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.price-tag { margin: 8px 0 18px; font-size: 30px; font-weight: 780; letter-spacing: -0.02em; color: var(--ink); }
.price-tag span { font-size: 15px; font-weight: 500; color: var(--muted); }
.price-feats { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.price-feats li { position: relative; padding-left: 26px; font-size: 15px; color: var(--ink-2); line-height: 1.4; }
.price-feats li::before {
  content: ""; position: absolute; left: 0; top: .3em; width: 16px; height: 16px; border-radius: 50%;
  background: rgba(96,165,250,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.5-5' fill='none' stroke='%234b95f7' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.price-cta { margin-top: auto; align-self: flex-start; }

/* ---------- changelog ---------- */
.changelog { position: relative; text-align: center; padding: 70px 24px 40px; }
.changelog-list { list-style: none; margin: 40px auto 0; padding: 0; max-width: 560px; text-align: left; display: flex; flex-direction: column; gap: 14px; }
.cl-item { display: flex; gap: 14px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.cl-badge {
  flex: none; margin-top: 1px; font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: linear-gradient(180deg, #6cadfb, #4b95f7); padding: 3px 9px; border-radius: 999px;
}
.cl-head { font-size: 16px; font-weight: 650; color: var(--ink); }
.cl-body { margin-top: 3px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }

/* ---------- footer — Wispr's anatomy: sitemap, giant living word, slim strip --- */
.footer { padding: 80px 40px 34px; border-top: 1px solid var(--line); }
.footer-cols { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; max-width: 1240px; margin: 0 auto 48px; }
.footer-label {
  font-size: 11.5px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 12px;
}
.footer-col a {
  display: block; padding: 4px 0;
  font-size: 15px; color: var(--ink-2); text-decoration: none; letter-spacing: -0.2px;
}
.footer-col a:hover { color: var(--ink); }

/* the word — same lockup math as the hero, big but contained (not overwhelming) */
.footer-wordmark {
  display: flex; align-items: baseline; justify-content: center;
  font-size: clamp(84px, 12vw, 190px); font-weight: 640; letter-spacing: -0.045em;
  line-height: .95; color: var(--ink); user-select: none;
  max-width: 1240px; margin: 12px auto 30px;
}
.footer-wordmark .wavem {
  width: 1.052em; height: .72em;
  transform: translateY(-.066em);
  margin-right: .05em;
}

/* the slim line under the giant word — just the © now, centred (heyclicky) */
.footer-base {
  display: flex; justify-content: center; align-items: center;
  font-size: 14px; color: var(--muted);
}
.footer-base a { color: var(--ink-2); text-decoration: none; }
.footer-base a:hover { color: var(--ink); }
.footer-legal { display: flex; gap: 26px; align-items: center; }

@media (max-width: 720px) {
  .footer-top { flex-direction: column; gap: 40px; }
  .footer-cols { gap: 44px; }
  .footer-wordmark { font-size: 24vw; }
}

/* ---------- load-in ----------
   The signature: the M draws itself, the line shoots out to both screen
   edges, then the words arrive. */
body.boot .hw-umble { opacity: 0; transform: translateY(.25em); }
.hw-umble { transition: opacity .55s ease, transform .55s cubic-bezier(.22,1.2,.36,1); }
body.boot .hero-tag, body.boot .hero-ctas, body.boot .hero-transcript,
body.boot .hero-fine, body.boot .hero-scrollcue, body.boot .nav {
  opacity: 0; transform: translateY(14px);
}
.hero-tag, .hero-ctas, .hero-transcript, .hero-fine, .hero-scrollcue, .nav {
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,1.2,.36,1);
}

@media (prefers-reduced-motion: reduce) {
  body.boot * { opacity: 1 !important; transform: none !important; }
  .hero-scrollcue, .tcaret, .mic-dot { animation: none; }
  html { scroll-behavior: auto; }
}