/* 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;
  /* a single subtle checker grid across the whole hero — the pill refracts the
     same grid that continues around it (consistent refraction). */
  background-image:
    repeating-linear-gradient(0deg,  rgba(30,35,55,.07) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(30,35,55,.07) 0 1px, transparent 1px 46px);
  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; }

/* ── Liquid-glass hero pill (Hugh 2026-08-23) ─────────────────────────────────
   The kicker + headline + sub sit inside a thick, translucent, Apple-inspired
   glass surface floating on the grey ground. Depth is built from layered edges
   and shadows, NOT colour, so it never competes with the headline. Only the hero
   pill is touched — copy, layout, blue accent and the download button below are
   unchanged. Real richness arrives later when a muted demo clip sits behind it. */
.hero-stage { position: relative; display: grid; place-items: center; }
/* The VISIBLE content the glass distorts — a muted, premium colour mesh, kept
   local behind the pill and faded into the grey ground so the rest of the page
   stays clean. A muted demo clip can drop in here later. */
.hero-bg {
  position: absolute; z-index: 0; left: -14%; top: -22%; width: 128%; height: 148%; pointer-events: none;
  /* transparent — the pill refracts the single page-wide checker grid directly,
     so the refraction matches the grid around it. No colour, no covering wash. */
  background: transparent;
}
@keyframes heroDrift { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(1.5%,-2%) scale(1.05)} }
/* The glass pill — layered like the reference: an effect layer that frosts AND
   warps the backdrop, a tint, a wet-edge shine, and the content on top. */
.hero-glass {
  position: relative; z-index: 1; margin: 0 auto; width: 100%; max-width: 960px;
  border-radius: 220px; isolation: isolate;
  /* clip-path (not overflow:hidden) — reliably clips the backdrop-filter layer,
     so the −60px effect spill and its displacement seam are cut cleanly. */
  overflow: hidden; clip-path: inset(0 round 220px);
  border: 1px solid rgba(255,255,255,.75);           /* thin outer stroke (spec) */
  box-shadow:
    0 12px 36px rgba(0,0,0,.12),                     /* soft separation shadow (spec) */
    0 48px 96px -42px rgba(40,52,86,.26),            /* deep float for premium lift */
    0 0 0 1px rgba(70,84,116,.12);                   /* faint darker outer definition on white */
  transform: perspective(1200px) rotateX(0deg) rotateY(0deg);
  transition: transform .55s cubic-bezier(.2,.9,.25,1);
  will-change: transform;
}
/* REFRACTION: frost the backdrop, then displace it with the SVG filter → liquid.
   The layer is inset NEGATIVE so the displacement's edge seam falls outside the
   pill and is clipped away by .hero-glass's overflow:hidden (no separation line). */
/* LIQUID recipe: light blur so the bend stays alive, then displace the backdrop.
   Plain blur is declared first as the fallback; the element-level SVG filter warps
   the lightly-blurred backdrop (proven to refract on this page in Chrome/Safari). */
/* samarkandiy's .glass-filter recipe: blur(0px) captures the backdrop with ZERO
   frost, then the SVG filter warps it. Pure CSS/SVG — no JS required. */
/* "No heavy effects. Just soft blur, inner light, and a hover that lets the
   background breathe." — soft backdrop blur only; the hover eases it back so
   the grid behind breathes through. */
.hg-effect {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  -webkit-backdrop-filter: blur(7px) saturate(1.05);
          backdrop-filter: blur(7px) saturate(1.05);
  transition: -webkit-backdrop-filter .6s ease, backdrop-filter .6s ease;
}
.hero-glass:hover .hg-effect {
  -webkit-backdrop-filter: blur(3px) saturate(1.05);
          backdrop-filter: blur(3px) saturate(1.05);
}
/* CLEAR FILM (lucasromerodb .liquidGlass-tint) — a flat translucent film. Their
   reference uses .50 over a busy pattern; adapted to .28 here so our faint checker
   grid still transmits through the pill on the white page. */
.hg-tint {
  position: absolute; inset: 0; z-index: 1; border-radius: inherit;
  background: rgba(255,255,255,.38);
  transition: background .6s ease;
}
/* hover: the film thins — the background breathes */
.hero-glass:hover .hg-tint { background: rgba(255,255,255,.24); }
/* a bright specular spot that follows the cursor — neutral white, no colour */
.hg-spec {
  position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none;
  background:
    /* softened so the sweep passes over the headline without washing it out */
    radial-gradient(150px 150px at var(--mx,50%) var(--my,42%), rgba(255,255,255,.45), transparent 60%),
    radial-gradient(420px 420px at var(--mx,50%) var(--my,42%), rgba(255,255,255,.16), transparent 62%);
  opacity: 0; transition: opacity .3s ease;
}
.hero-glass:hover .hg-spec { opacity: 1; }
/* BRIGHT INNER RIM (lucasromerodb .liquidGlass-shine) — the signature glossy
   bubble edge: a bright top-left inset + bright bottom-right inset. Plus one
   restrained darker lower rim for depth/separation on white. */
.hg-shine {
  position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; overflow: hidden;
  /* INNER LIGHT (the reference recipe): one crisp bright rim, a soft glow just
     inside it, gentle top light — and nothing else. */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.85),             /* crisp bright rim all round */
    inset 0 1.5px 0 0 rgba(255,255,255,1),             /* top edge catches the light */
    inset 0 0 22px rgba(255,255,255,.5),               /* soft inner glow */
    inset 0 0 1px 2px rgba(255,255,255,.28),           /* rim thickness */
    inset 0 -12px 28px -24px rgba(40,50,80,.16);        /* whisper of depth at the base */
  background:
    linear-gradient(180deg, rgba(255,255,255,.22) 0%, transparent 30%);
}
/* fine noise, felt not seen (research: ~.1) so it isn't plastic-smooth */
.hg-noise {
  position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none;
  opacity: .1; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}
.hg-content {
  position: relative; z-index: 3;   /* under the shine/spec so the glass light sits ON TOP of the text */
  padding: clamp(40px,5.6vw,62px) clamp(30px,6vw,72px) clamp(44px,6vw,66px);
  transform: scale(1); transform-origin: 50% 48%;
  transition: transform .6s cubic-bezier(.2,.9,.25,1);
}
/* the lens magnifies what's under it on hover */
.hero-glass:hover .hg-content { transform: scale(1.035); }
@media (prefers-reduced-motion: reduce) {
  .hg-content { transition: none; }
  .hero-glass:hover .hg-content { transform: none; }
}
.hg-content .hero-headline { font-size: clamp(34px, 5.8vw, 70px); }
.hg-content .hero-sub { margin-bottom: 2px; }

/* fallback — no backdrop-filter: opaque light tint so it's still a clean card */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .hg-tint { background: rgba(255,255,255,.94); }        /* solid near-white fill */
  .hero-glass {
    border-color: rgba(210,216,230,.9);                  /* stronger border */
    box-shadow: 0 14px 38px rgba(0,0,0,.16), 0 0 0 1px rgba(64,78,110,.10);
  }
}
/* reduced motion: no tilt, no drift, no transition */
@media (prefers-reduced-motion: reduce) {
  .hero-glass { transition: none; transform: none; }
}
@media (max-width: 620px) {
  .hero-glass { border-radius: 44px; clip-path: inset(0 round 44px); }
  .hero-bg { border-radius: 44px; }
  .hg-content { padding: 32px 22px 36px; }
}

/* 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-2 { display: inline-block; margin-top: 3px; font-size: 12px; opacity: .82; }
.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 .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; }

@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; }
}

/* ===================== PAPER & TAPE (tano-vibe rework, Hugh 2026-08-23) =====
   Warm cream paper ground, chunky ink outlines, hard offset shadows, taped
   receipt-notes. Tano's STYLE on Mumble's own centered LAYOUT. */
:root {
  --paper: #f7efe1;
  --ink-hard: #16181d;
  --note-yellow: #ffd66b;
  --note-mint: #9fe2c0;
  --note-pink: #f7b1ca;
}
body { background: var(--paper); }
body::before { display: none; }            /* checker grid retired */

/* nav → floating paper pill */
.nav, .nav.scrolled {
  left: 16px; right: 16px; top: 14px;
  background: #fff; border: 2px solid var(--ink-hard); border-radius: 999px;
  box-shadow: 5px 5px 0 var(--ink-hard);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  padding: 10px 18px;
}

/* chunky buttons */
.btn-blue {
  background: var(--blue); color: #fff;
  border: 2px solid var(--ink-hard); border-radius: 14px;
  box-shadow: 4px 4px 0 var(--ink-hard);
  font-weight: 700;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-blue:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink-hard); }
.btn-blue:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink-hard); }

/* hero: Mumble's centered layout; notes scatter around the copy like a desk */
.hero-duo { position: relative; max-width: 1280px; margin: 0 auto; text-align: center;
            padding: 8px clamp(0px, 2vw, 40px); }
.hero-copy { position: relative; z-index: 2; max-width: 780px; margin: 0 auto; }
.hero-copy .hero-headline { font-size: clamp(38px, 5.6vw, 76px); letter-spacing: -.03em; }
.hl-underline {
  background: linear-gradient(var(--blue), var(--blue)) 0 88% / 100% .12em no-repeat;
  padding-bottom: .06em;
}

.hero-notes { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.note {
  position: absolute; width: clamp(200px, 17vw, 250px); pointer-events: auto;
  border: 2px solid var(--ink-hard); border-radius: 16px;
  box-shadow: 7px 7px 0 var(--ink-hard);
  padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 3px;
  text-align: left;
  transition: transform .25s ease, box-shadow .25s ease;
}
.note-1 { background: var(--note-yellow); left: max(-20px, 1vw); top: -34px; transform: rotate(-5deg); }
.note-2 { background: var(--note-mint);  right: max(-14px, 1.5vw); top: 6px; transform: rotate(3.4deg); }
.note-3 { background: var(--note-pink);  right: max(0px, 4vw); bottom: -66px; transform: rotate(-2.2deg); }
.note:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 9px 9px 0 var(--ink-hard); }
.note-tape {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%) rotate(-2deg);
  width: 76px; height: 20px; background: rgba(255,255,255,.7);
  border: 1.5px solid rgba(22,24,29,.35); border-radius: 3px;
}
.note-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-hard); opacity: .74;
}
.note-big { font-size: clamp(22px, 2vw, 27px); font-weight: 780; letter-spacing: -.02em; color: var(--ink-hard); line-height: 1.08; }
.note-sub { font-size: 13.5px; color: var(--ink-hard); opacity: .8; }

@media (max-width: 1080px) {
  .hero-notes { position: static; display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin-top: 26px; }
  .note { position: static; width: min(240px, 86%); }
  .note-1 { transform: rotate(-3deg); }
  .note-2 { transform: rotate(2.4deg); }
  .note-3 { transform: rotate(-1.6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .note, .btn-blue { transition: none; }
}

/* ---------- note motion + the five-note scatter ---------- */
:root { --note-blue: #aecdf5; --note-lilac: #d5c4f2; }

/* four notes, two a side — mirrored for balance */
.note-1 { background: var(--note-yellow); left: max(-14px, 1.2vw); top: -18px; transform: rotate(-5deg); }
.note-2 { background: var(--note-mint);  right: max(-14px, 1.2vw); top: -18px; transform: rotate(3.4deg); }
.note-3 { background: var(--note-pink);  right: max(2px, 3.6vw); bottom: -46px; transform: rotate(-2.2deg); }
.note-4 { background: var(--note-blue);  left: max(2px, 3.6vw); bottom: -46px; transform: rotate(2.6deg); }

/* drop in one-by-one (translate property, so each rotation survives) */
@keyframes noteDrop { from { opacity: 0; translate: 0 -26px; } to { opacity: 1; translate: 0 0; } }
.note-1 { animation: noteDrop .5s cubic-bezier(.2,.9,.3,1.35) .2s backwards; }
.note-2 { animation: noteDrop .5s cubic-bezier(.2,.9,.3,1.35) .34s backwards; }
.note-3 { animation: noteDrop .5s cubic-bezier(.2,.9,.3,1.35) .48s backwards; }
.note-4 { animation: noteDrop .5s cubic-bezier(.2,.9,.3,1.35) .62s backwards; }

/* five notes need more side room than three: widen the stage, pad the copy */
.hero-duo { max-width: 1420px; }
.hero-copy { max-width: 720px; }

@media (max-width: 1080px) {
  .note-4 { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .note-1, .note-2, .note-3, .note-4 { animation: none; }
}

/* ---------- the M as a tiny sticky note (nav logo) ---------- */
.m-note {
  position: relative; display: inline-grid; place-items: center;
  width: 34px; height: 29px; flex: none;
  background: var(--note-yellow);
  border: 2px solid var(--ink-hard); border-radius: 8px;
  box-shadow: 3px 3px 0 var(--ink-hard);
  transform: rotate(-4deg); margin-bottom: 2px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.m-note svg { width: 20px; height: 14px; display: block; overflow: visible; }
.m-note-tape {
  position: absolute; top: -5px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  width: 15px; height: 6px; background: rgba(255,255,255,.85);
  border: 1px solid rgba(22,24,29,.4); border-radius: 1.5px;
}
.nav-wordmark { display: inline-flex; align-items: center; gap: 3px; }
.nav-wordmark .m-note { z-index: 1; }
.nav-wordmark:hover .m-note { transform: rotate(0deg) translateY(-1px); box-shadow: 4px 4px 0 var(--ink-hard); }
.nav-wordmark:active .m-note { transform: rotate(-2deg) translateY(1px); box-shadow: 2px 2px 0 var(--ink-hard); }
@media (prefers-reduced-motion: reduce) { .m-note { transition: none; } }


/* ---------- headline "Mac." M — THE Mumble icon (nav mark), scaled to the
   sentence. Nav proportions, M seated on the card floor, card bottom on the
   text baseline so it reads as the capital of "Mac." ---------- */
.hero-headline .wm-big {
  position: relative; display: inline-grid; place-items: end center;
  width: .94em; height: .8em; padding: 0; margin: 0 .015em 0 .03em;
  background: var(--note-yellow);
  border: .055em solid var(--ink-hard); border-radius: .22em;
  box-shadow: .06em .06em 0 var(--ink-hard);
  transform: rotate(-3deg);
  vertical-align: -.02em;            /* card bottom on the baseline */
}
.hero-headline .wm-big svg {
  width: .55em; height: .38em; display: block; overflow: visible;
  margin-bottom: .1em;               /* M seated on the note's floor */
}
.hero-headline .wm-big::after {
  content: ""; position: absolute; top: -.13em; left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: .4em; height: .16em; background: rgba(255,255,255,.85);
  border: .027em solid rgba(22,24,29,.4); border-radius: .04em;
}