/* ============================================================
   Chorus marketing landing page — v2 (Lumio-bar facelift)
   Standalone artifact. Brand tokens mirror app/globals.css;
   the aurora + glass register is landing-page-only.
   ============================================================ */

:root {
  --ink: #0a0a0a;
  --paper: #ffffff;
  --paper-2: #f9f9f9;
  --paper-3: #ececec;

  /* Aurora palette (Chorus accent family) */
  --navy-deep: #081637;
  --navy: #11308f;
  --accent: #4a7bf7;
  --accent-bright: #7da4ff;
  --cyan: #56c4f4;
  --violet: #7c5cff;

  --muted-1: rgba(10, 10, 10, 0.62);
  --muted-2: rgba(10, 10, 10, 0.4);
  --muted-3: rgba(10, 10, 10, 0.22);

  --line: rgba(0, 0, 0, 0.08);
  --line-strong: rgba(17, 17, 17, 0.14);
  --line-dark: rgba(255, 255, 255, 0.14);

  --radius: 10px;
  --radius-card: 28px;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.06), 0 6px 24px rgba(0, 0, 0, 0.08);
  --shadow-frame: 0 12px 40px rgba(4, 10, 30, 0.35), 0 40px 110px rgba(4, 10, 30, 0.4);
  --shadow-tile: inset 0 0 13px rgba(255, 255, 255, 0.6), 0 24px 44px rgba(8, 23, 79, 0.18);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --font-sans: "Geist", system-ui, -apple-system, sans-serif;
  --font-serif: "Instrument Serif", ui-serif, Georgia, serif;
  --font-mono: "Geist Mono", "Menlo", monospace;

  --nav-h: 56px;
  --nav-top: 16px;
}

/* ---------- Reset + base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-size: 16px;
  line-height: 1.6;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.anchor {
  position: absolute;
  top: calc(-1 * (var(--nav-h) + var(--nav-top)));
}

/* ---------- Type ---------- */
h1 {
  font-size: clamp(37px, 4.4vw, 65px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

h2 {
  font-size: clamp(32px, 3.4vw, 52px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Serif italic accent phrase (Instrument Serif) */
.it,
.w.it {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.06em;
  letter-spacing: -0.005em;
}

/* Letter-reveal spans (built by JS) */
[data-split] .w {
  display: inline-block;
  white-space: nowrap;
}

[data-split] .lt {
  display: inline-block;
}

[data-words] .wd {
  display: inline-block;
}

/* ---------- Eyebrows ---------- */
.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
}

.eyebrow-pill .dot {
  width: 7px;
  height: 7px;
}

.eyebrow-sq {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--muted-1);
}

.eyebrow-sq i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--ink);
}

.eyebrow-center {
  justify-content: center;
}

.margin-note {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--muted-3);
  white-space: nowrap;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: transform 0.18s var(--ease), background 0.18s var(--ease),
    box-shadow 0.18s var(--ease), color 0.18s var(--ease);
}

.btn-solid {
  background: #fff;
  color: #0a2a78;
  box-shadow: 0 6px 22px rgba(5, 14, 45, 0.3);
}

.btn-solid:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(5, 14, 45, 0.36);
}

.btn-glass {
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.btn-lg {
  height: 50px;
  padding: 0 26px;
  font-size: 15.5px;
}

.btn-nav {
  height: 38px;
  padding: 0 16px;
  font-size: 13.5px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
}

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

.btn-pill {
  height: 46px;
  padding: 0 24px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--ink);
  font-size: 14.5px;
}

.btn-pill:hover {
  background: rgba(0, 0, 0, 0.08);
}

.btn-pill .arr {
  transition: transform 0.2s var(--ease);
}

.btn-pill:hover .arr {
  transform: translateX(3px);
}

/* ---------- Bits ---------- */
.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.dot-live {
  background: #2e9e5b;
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex: none;
}

.avatar.sm {
  width: 22px;
  height: 22px;
  font-size: 9px;
}

img.avatar {
  object-fit: cover;
}

.av-a { background: #e8eefe; color: #2b56c6; }
.av-b { background: #e4f3ea; color: #2e7d4f; }
.av-c { background: #f1e9fd; color: #6d3ad1; }
.av-d { background: #fdefe6; color: #b35a17; }

/* ============================================================
   AURORA
   ============================================================ */
.aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(102deg, #8fdcf9 0%, #46a0f0 26%, #2563e0 48%, #16339f 72%, #0a1c55 100%);
}

.aur {
  position: absolute;
  top: -12%;
  bottom: -12%;
  left: -28%;
  right: -28%;
}

/* Sharp curtain pleats — narrow high-contrast bands, lightly blurred */
.aur-1 {
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0px,
    rgba(255, 255, 255, 0.5) 5px,
    rgba(120, 205, 255, 0.14) 13px,
    rgba(8, 24, 80, 0.5) 27px,
    rgba(86, 196, 244, 0.38) 37px,
    rgba(255, 255, 255, 0) 54px
  );
  filter: blur(5px);
}

/* Wide soft depth bands */
.aur-2 {
  background: repeating-linear-gradient(
    89deg,
    rgba(8, 22, 72, 0) 0px,
    rgba(8, 22, 72, 0.55) 64px,
    rgba(86, 196, 244, 0.26) 112px,
    rgba(8, 22, 72, 0) 172px
  );
  filter: blur(22px);
}

/* White shimmer highlights */
.aur-3 {
  background: repeating-linear-gradient(
    91deg,
    rgba(255, 255, 255, 0) 0px,
    rgba(255, 255, 255, 0) 40px,
    rgba(255, 255, 255, 0.55) 46px,
    rgba(255, 255, 255, 0) 54px,
    rgba(255, 255, 255, 0) 98px
  );
  filter: blur(9px);
  mix-blend-mode: screen;
}

/* Hot off-center bloom (kept clear of the headline/sub text zone) */
.aur-glow {
  position: absolute;
  left: 16%;
  top: 62%;
  width: 85%;
  height: 80%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.75) 0%,
    rgba(150, 225, 255, 0.4) 28%,
    rgba(80, 160, 255, 0.12) 55%,
    transparent 75%
  );
  filter: blur(22px);
  mix-blend-mode: screen;
}

.aur-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 12, 38, 0.46) 0%, transparent 26%, transparent 70%, rgba(5, 12, 38, 0.4) 100%),
    linear-gradient(280deg, rgba(5, 12, 38, 0.38) 0%, transparent 42%),
    radial-gradient(ellipse 60% 42% at 50% 30%, rgba(8, 20, 64, 0.3) 0%, transparent 70%);
}

.aurora-deep::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(4, 9, 28, 0.52);
}

/* ============================================================
   NAV — floating glass pill
   ============================================================ */
#nav {
  position: fixed;
  top: var(--nav-top);
  left: 50%;
  transform: translateX(-50%);
  width: min(1040px, calc(100% - 28px));
  z-index: 60;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 8px 30px rgba(10, 20, 60, 0.08);
}

.nav-inner {
  height: var(--nav-h);
  padding: 0 10px 0 20px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-brand {
  display: inline-flex;
  align-items: center;
}

.wm {
  height: 21px;
  width: auto;
}

.wm-dark {
  display: none;
}

/* Pinned to the true center of the bar (not the leftover space between
   wordmark and buttons), so the links read as centered regardless of
   the two flanks' widths */
.nav-links {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 26px;
}

.nav-links a {
  position: relative;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted-1);
  transition: color 0.15s var(--ease);
  padding: 4px 0;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s var(--ease);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--ink);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

.nav-signin {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted-1);
  transition: color 0.15s var(--ease);
}

.nav-signin:hover {
  color: var(--ink);
}

#nav-burger {
  display: none;
  background: none;
  border: none;
  width: 38px;
  height: 38px;
  position: relative;
}

#nav-burger span {
  position: absolute;
  left: 9px;
  right: 9px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s var(--ease), top 0.3s var(--ease), background 0.3s var(--ease);
}

#nav-burger span:first-child { top: 15px; }
#nav-burger span:last-child { top: 22px; }

html.drawer-open #nav-burger span:first-child { top: 18px; transform: rotate(45deg); }
html.drawer-open #nav-burger span:last-child { top: 18px; transform: rotate(-45deg); }

/* Dark (over aurora) nav variant */
html.nav-dark #nav,
html.drawer-open #nav {
  background: rgba(10, 20, 50, 0.28);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 8px 30px rgba(4, 10, 30, 0.25);
}

html.nav-dark .wm-light,
html.drawer-open .wm-light { display: none; }
html.nav-dark .wm-dark,
html.drawer-open .wm-dark { display: block; }

html.nav-dark .nav-links a,
html.nav-dark .nav-signin,
html.drawer-open .nav-links a,
html.drawer-open .nav-signin {
  color: rgba(255, 255, 255, 0.72);
}

html.nav-dark .nav-links a:hover,
html.nav-dark .nav-links a.active,
html.nav-dark .nav-signin:hover,
html.drawer-open .nav-links a:hover {
  color: #fff;
}

html.nav-dark .btn-nav,
html.drawer-open .btn-nav {
  background: #fff;
  color: #0a2a78;
}

html.nav-dark #nav-burger span,
html.drawer-open #nav-burger span {
  background: #fff;
}

/* Mobile drawer */
#drawer {
  position: fixed;
  inset: 0;
  z-index: 58;
  background: rgba(7, 14, 40, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}

#drawer nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  font-size: 22px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

#drawer .btn {
  font-size: 17px;
  height: 50px;
  padding: 0 26px;
}

html.drawer-open #drawer {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================
   INTRO OVERLAY
   ============================================================ */
#intro-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--navy-deep);
  align-items: center;
  justify-content: center;
}

#intro-mark {
  height: 72px;
  width: auto;
}

/* ============================================================
   LAYOUT — natural document flow (normal scroll)
   ============================================================ */
.sec {
  position: relative;
  /* Compact by default so every module is only as tall as its content +
     symmetric padding (even whitespace top and bottom, even on a 27-inch).
     The hero sets its own explicit height; sections that still want a
     minimum can opt back in. */
  min-height: auto;
}

/* Traditional scroll: the hero sits in normal document flow and scrolls
   up and away like any other section. A gentle scroll-linked fade + lift
   on the hero content (updateHeroExit in script.js) keeps the exit elegant
   without re-introducing the old pinned-curtain overlap. */
#s1 {
  position: relative;
  z-index: 1;
  /* Clamp the hero to one screen so the browser frame flex-shrinks to fit
     (as it did when pinned). Without this hard height the frame expands to
     its full content height and the hero becomes ~1.5 screens tall. */
  height: 100svh;
}

#track {
  position: relative;
  z-index: 1;
}

/* Content sections clip their own decorative bleed (aurora pleats,
   orbit drift, margin notes) to their bounds, just as the old curtain
   engine did. The hero already clips via .sec-hero. */
.sec-problem,
.sec-how,
.sec-integrations {
  overflow: hidden;
}

/* ============================================================
   S1 · AURORA HERO
   ============================================================ */
.sec-hero {
  overflow: hidden;
  display: flex;
  background: var(--navy-deep);
  color: #fff;
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + var(--nav-top) + clamp(22px, 4.5vh, 56px)) 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  will-change: transform;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#hero-h1 {
  max-width: 19ch;
  margin: clamp(16px, 2.6vh, 28px) 0 0;
  color: #fff;
  text-shadow: 0 2px 36px rgba(6, 18, 60, 0.45);
}

.hero-sub {
  max-width: 54ch;
  margin-top: clamp(14px, 2.2vh, 24px);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.55;
  color: rgba(235, 242, 255, 0.85);
}

.hero-ctas {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(18px, 3vh, 32px);
}

/* Browser frame */
.hero-frame-perspective {
  perspective: 1200px;
  width: min(900px, 94%);
  margin-top: clamp(22px, 4.5vh, 48px);
  flex: 1;
  min-height: 0;
  position: relative;
  z-index: 1;
}

.browser-frame {
  position: relative;
  background: var(--paper);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow: var(--shadow-frame);
  overflow: hidden;
  text-align: left;
  transform-origin: top center;
  height: 100%;
  color: var(--ink);
  display: flex;
  flex-direction: column;
}

.browser-bar {
  flex: none;
}

.beam-frame {
  z-index: 3;
  background: radial-gradient(
    circle,
    rgba(125, 164, 255, 0.9) 0%,
    rgba(74, 123, 247, 0.5) 12%,
    rgba(74, 123, 247, 0.18) 24%,
    transparent 58%
  );
}

@supports (offset-path: rect(0 auto auto 0 round 16px)) {
  .beam-frame {
    offset-path: rect(0 auto auto 0 round 16px);
  }
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}

.tl-dots {
  display: flex;
  gap: 6px;
}

.tl-dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.tl-dots i:nth-child(1) { background: #ff5f57; }
.tl-dots i:nth-child(2) { background: #febc2e; }
.tl-dots i:nth-child(3) { background: #28c840; }

.browser-url {
  flex: 1;
  max-width: 320px;
  margin: 0 auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted-2);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 4px 12px;
  text-align: center;
}

/* App shell inside the frame: sidebar + feed, like the real product */
.app-shell {
  flex: 1;
  min-height: 0;
  display: flex;
}

.app-side {
  width: 170px;
  flex: none;
  background: #fcfcfd;
  border-right: 1px solid var(--line);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
}

/* Sidebar rows keep their natural height at every viewport size; a
   short frame crops the list at the fold instead of squashing rows */
.app-side > * {
  flex: none;
}

.side-mark {
  height: 17px;
  width: auto;
  align-self: flex-start;
  margin: 0 0 14px 8px;
}

.side-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 14px;
}

.side-nav span {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-1);
  padding: 6px 10px;
  border-radius: 8px;
}

.side-nav span.active {
  background: var(--paper-3);
  color: var(--ink);
}

.side-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--muted-3);
  padding: 0 10px;
  margin-bottom: 4px;
}

.side-item {
  font-size: 11.5px;
  color: var(--muted-1);
  padding: 7px 10px;
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.side-item.active {
  background: var(--paper-3);
  color: var(--ink);
  font-weight: 500;
}

/* Adaptation feed recreation */
.feed {
  flex: 1;
  min-width: 0;
  padding: 18px 20px 20px;
}

.feed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.feed-title {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.feed-meta {
  font-size: 12px;
  color: var(--muted-2);
}

.feed-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-1);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  background: var(--paper);
}

.feed-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.poster-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-card);
  padding: 13px 14px;
}

.poster-card header {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}

.poster-card .who {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.poster-card .who strong {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.poster-card .who em {
  font-style: normal;
  font-size: 11px;
  color: var(--muted-2);
}

.poster-card .status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted-1);
}

.poster-card .status b {
  font-weight: 500;
}

.poster-card p {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted-1);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: opacity 0.4s var(--ease);
}

.poster-card.adapting p {
  opacity: 0.3;
}

.poster-card.adapting .dot {
  background: var(--accent);
}

.hook-chip {
  display: inline-block;
  margin-top: 9px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted-2);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 9px;
}

/* ============================================================
   S2 · THE PROBLEM — dead company page vs alive employee post
   ============================================================ */
.sec-problem {
  min-height: auto;
  background: #f5f7fb;
}

.problem-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  padding: clamp(88px, 9vh, 112px) 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.problem-title {
  max-width: 18ch;
}

.problem-lede {
  margin-top: clamp(14px, 2.2vh, 22px);
  max-width: 58ch;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.55;
  color: var(--muted-1);
}

/* The contrast IS the argument */
.vs-grid {
  margin-top: clamp(22px, 3.6vh, 40px);
  width: 100%;
  max-width: 820px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(8px, 1vw, 16px);
}

.li-card {
  position: relative;
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-float);
  padding: 12px 18px 14px;
  overflow: hidden;
}

.li-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--muted-2);
  margin-bottom: 13px;
}

.li-tag-live {
  color: var(--accent);
}

.li-tag .dot {
  width: 6px;
  height: 6px;
}

.li-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 11px;
}

.li-avatar,
.li-logo {
  width: 44px;
  height: 44px;
  flex: none;
}

.li-avatar {
  border-radius: 50%;
  object-fit: cover;
}

.li-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #0b2150;
  color: #fff;
  font-family: "Inter", var(--font-sans);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.01em;
}

.li-who {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}

.li-who strong {
  font-size: 14.5px;
  font-weight: 600;
}

.li-who em {
  font-style: normal;
  font-size: 12px;
  color: var(--muted-2);
}

.li-post {
  position: relative;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 13px;
}

/* Caret while the employee post types itself out */
.li-post.typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--accent);
  margin-left: 1px;
  vertical-align: text-bottom;
}

.li-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}

.li-reacts {
  display: inline-flex;
  flex: none;
}

.rx {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--paper);
  margin-left: -6px;
}

.rx:first-child {
  margin-left: 0;
}

.rx1 { background: #378fe9; }
.rx2 { background: #6dae4f; }
.rx3 { background: #df704d; }

.li-reacts-dead .rx {
  filter: grayscale(1);
  opacity: 0.55;
}

.li-counts {
  font-size: 12px;
  color: var(--muted-2);
}

.li-num {
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* The dead page's impressions: muted until the scene flashes them red */
.li-num-dead {
  color: var(--muted-2);
}

/* Dead card: flat and quiet. Alive card: vibrant, lifted. The Marmentum
   navy mark stays in color so the brand reads; the deadness comes from
   the flat shadow, gray reaction dots and the tiny numbers. */
.li-dead {
  opacity: 0.93;
  box-shadow: var(--shadow-card);
}

.li-dead .li-post {
  color: var(--muted-2);
}

.li-alive {
  border-color: rgba(74, 123, 247, 0.4);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 20px 46px rgba(74, 123, 247, 0.2);
}

.li-alive .li-num {
  color: var(--accent);
}

.vs-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  flex: none;
  box-shadow: var(--shadow-float);
}

.problem-stats {
  margin-top: clamp(24px, 4vh, 44px);
  display: flex;
  gap: 16px;
  width: 100%;
  max-width: 680px;
}

.stat-card {
  flex: 1;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: var(--paper);
  padding: 18px 24px;
  text-align: left;
}

.stat-num {
  display: block;
  font-size: clamp(38px, 3.4vw, 54px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat-blue .stat-num { color: var(--accent); }
.stat-violet .stat-num { color: var(--violet); }

.stat-label {
  display: block;
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted-1);
}

#s2-cta {
  margin-top: clamp(22px, 3.4vh, 36px);
}

/* ============================================================
   S3 · HOW IT WORKS — gradient vignette cards
   ============================================================ */
.sec-how {
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
}

.note-left { left: 30px; top: 54%; }
.note-right { right: 30px; top: 54%; }

.how-inner {
  width: 100%;
  max-width: 1180px;
  padding: clamp(88px, 9vh, 112px) 24px;
  text-align: center;
}

.how-inner .eyebrow-sq {
  margin-bottom: 18px;
}

.how-title {
  max-width: 36ch;
  margin: 0 auto;
}

.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 24px);
  margin-top: clamp(24px, 4vh, 44px);
  text-align: left;
}

.how-card {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  height: clamp(400px, 56vh, 540px);
  display: flex;
  flex-direction: column;
  padding: 14px 14px 44px;
  color: #fff;
}

.how-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.2), transparent 38%),
    linear-gradient(296deg, rgba(255, 255, 255, 0.12), transparent 32%);
  pointer-events: none;
}

.grad-blue {
  background: linear-gradient(160deg, #7da4ff 0%, #4a7bf7 38%, #2546b5 100%);
}

.grad-navy {
  background: linear-gradient(160deg, #2c4ba8 0%, #16245f 55%, #2c66c9 100%);
}

.grad-violet {
  background: linear-gradient(160deg, #a18bff 0%, #6a4fd8 45%, #b568c8 100%);
}

.card-num {
  position: absolute;
  right: 18px;
  bottom: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.6);
}

.how-copy {
  position: relative;
  padding: 14px 8px 0;
}

.how-copy h3 {
  color: #fff;
}

.how-copy p {
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}

/* White mini-UI panel */
.panel {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  background: var(--paper);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(8, 16, 50, 0.25);
  padding: 14px;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow: hidden;
}

/* Panel children keep their natural height; the panel crops, it never
   squashes (squashed cards clipped their own text) */
.panel > * {
  flex: none;
}

/* Border beam — traveling radial glow dot (rounds corners naturally) */
.beam {
  display: none;
  position: absolute;
  width: 84px;
  height: 84px;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.6) 9%,
    rgba(255, 255, 255, 0.22) 20%,
    transparent 58%
  );
}

@supports (offset-path: rect(0 auto auto 0 round 28px)) {
  .beam {
    display: block;
    offset-path: rect(0 auto auto 0 round 28px);
  }
}

/* --- 01 chat scene --- */
.v-chat {
  justify-content: flex-start;
}

.chat-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.chat-user {
  justify-content: flex-end;
}

.chat-bubble {
  background: var(--paper-3);
  border-radius: 14px;
  padding: 8px 12px;
  font-size: 12.5px;
  line-height: 1.45;
  max-width: 85%;
}

.chat-ai {
  align-items: flex-start;
}

.chat-mark {
  height: 20px;
  width: auto;
  margin-top: 2px;
  flex: none;
}

.chat-plain {
  font-size: 12.5px;
  line-height: 1.5;
  padding-top: 1px;
}

.thinking {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 6px 2px;
}

.thinking i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--muted-2);
}

.chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 28px;
}

.chat-chips span {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted-1);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 3px 11px;
  background: var(--paper);
}

.chat-composer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  border-radius: 999px;
  padding: 8px 8px 8px 16px;
  font-size: 12.5px;
  color: var(--muted-2);
}

.composer-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* While typing: no ellipsis; JS keeps the newest characters in view
   by scrolling once the text outgrows the pill */
.composer-text.typing {
  color: var(--ink);
  text-overflow: clip;
}

.composer-text.typing::after {
  content: "";
  display: inline-block;
  width: 1.5px;
  height: 1em;
  background: var(--ink);
  margin-left: 1px;
  vertical-align: text-bottom;
}

.send-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #111;
  color: #fff;
  flex: none;
}

/* --- 02 fan-out scene --- */
.source-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted-1);
  border: 1px solid var(--line);
  background: var(--paper-2);
  border-radius: 999px;
  padding: 4px 11px;
}

.mini-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 8px 10px;
}

.mini-card header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
}

.mini-card strong {
  font-size: 12px;
  font-weight: 600;
}

.mini-card header .mini-dot {
  margin-left: auto;
  background: #2e9e5b;
}

.mini-card p {
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-stamp {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: min(204px, 88%);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-float);
  padding: 11px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transform-origin: center;
}

.stamp-head {
  display: flex;
  align-items: center;
  gap: 7px;
}

.sparkle {
  color: var(--accent);
  display: inline-flex;
}

.stamp-time {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--muted-2);
}

.stamp-line {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.005em;
}

/* --- 03 Slack scene --- */
.v-slack {
  justify-content: center;
}

.slack-msg {
  display: flex;
  gap: 10px;
}

.slack-avatar {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  flex: none;
  background: var(--navy);
  object-fit: contain;
  padding: 5px;
}

.slack-body {
  min-width: 0;
}

.slack-head {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.slack-head strong {
  font-size: 13.5px;
  font-weight: 600;
}

.slack-app {
  font-size: 9.5px;
  font-weight: 500;
  color: rgba(29, 28, 29, 0.7);
  background: rgba(29, 28, 29, 0.13);
  border-radius: 3px;
  padding: 1px 4px;
}

.slack-time {
  font-size: 11px;
  color: var(--muted-2);
}

.slack-text {
  font-size: 12.5px;
  margin-top: 3px;
}

.slack-attach {
  border-left: 4px solid #ddd;
  padding: 2px 0 2px 10px;
  margin-left: 44px;
}

.slack-attach p {
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted-1);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Actions and confirmation stack in one fixed slot so the swap can
   never bleed one into the other */
.slack-swap {
  position: relative;
  margin-left: 44px;
  height: 30px;
}

.slack-actions {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 7px;
  transition: opacity 0.2s var(--ease), visibility 0s linear 0.2s;
}

.slack-btn {
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(28, 28, 28, 0.3);
  background: #fff;
  color: rgba(29, 28, 29, 0.9);
  border-radius: 6px;
  padding: 5px 11px;
  cursor: default;
  transition: transform 0.16s var(--ease);
}

.slack-approve {
  background: #007a5a;
  border-color: #007a5a;
  color: #fff;
}

.slack-approve.pressed {
  transform: scale(0.9);
}

.cursor-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.85);
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translate(150px, 34px);
  transition: transform 0.75s var(--ease), opacity 0.3s var(--ease);
  pointer-events: none;
  z-index: 2;
}

.cursor-dot.show {
  opacity: 1;
}

.cursor-dot.go {
  transform: translate(28px, 10px);
}

.slack-actions.done {
  opacity: 0;
  visibility: hidden;
}

.slack-confirm {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: #1d7a52;
  opacity: 0;
  transform: scale(0.8);
  transform-origin: left center;
  transition: opacity 0.3s var(--ease) 0.25s, transform 0.3s var(--ease) 0.25s;
  pointer-events: none;
}

.slack-confirm.on {
  opacity: 1;
  transform: scale(1);
}

.slack-confirm:not(.on) {
  transition: none;
}

/* Distribute scene: "delivered to your team" roster fills the panel and
   sells the fan-out (everyone gets their own version). */
.slack-roster {
  padding-top: 11px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.roster-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--muted-3);
}

.roster-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.roster-row strong {
  font-weight: 600;
  color: var(--ink);
}

.roster-status {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted-1);
  white-space: nowrap;
}

.roster-more {
  font-size: 11px;
  color: var(--muted-2);
}

/* Scene visibility: default = fully composed (no-JS / reduced motion).
   While a scene is armed (.scene-on), steps hide until JS adds .on. */
.panel [data-step] {
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}

html.js-anim .scene-on [data-step] {
  opacity: 0;
  transform: translateY(8px);
}

html.js-anim .scene-on [data-step].on {
  opacity: 1;
  transform: translateY(0);
}

html.js-anim .scene-on .thinking {
  transform: none;
}

html.js-anim .scene-on .thinking.on {
  display: inline-flex;
}

html.js-anim .scene-on .ai-stamp {
  transform: scale(0);
  border-radius: 50%;
}

html.js-anim .scene-on .mini-card .mini-dot {
  background: #c9cdd6;
}

html.js-anim .scene-on .mini-card.ready .mini-dot {
  background: #2e9e5b;
}

html.js-anim .scene-on .mini-card.adapting::after,
html.js-anim .poster-card.adapting::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.65) 50%, transparent 70%);
  transform: translateX(-100%);
}

/* ============================================================
   SOCIAL PROOF — oversized hero quote + three supporting quotes
   ============================================================ */
.sec-proof {
  min-height: auto;
  background: #f5f7fb;
  display: flex;
  align-items: center;
  justify-content: center;
}

.proof-inner {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(88px, 9vh, 112px) 24px;
  text-align: center;
}

.proof-hero {
  max-width: 880px;
  margin: 0 auto;
}

.proof-hero-q {
  font-size: clamp(32px, 4.6vw, 62px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.proof-cite {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.proof-hero .proof-cite {
  margin-top: clamp(20px, 3vh, 30px);
}

.proof-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex: none;
  object-fit: cover;
}

/* Placeholder headshots (real photos drop in over these) — dashed so
   it is obvious they are temporary */
.ph-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e9edf4;
  color: #9aa3b2;
  border: 1.5px dashed #b9c2d2;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.proof-who {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.proof-who strong {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.proof-who em {
  font-style: normal;
  font-size: 13px;
  color: var(--muted-2);
}

.proof-grid {
  margin-top: clamp(40px, 6vh, 72px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  text-align: left;
}

.proof-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-card);
  padding: 24px 24px 22px;
}

.proof-q {
  flex: 1;
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.proof-card .proof-cite {
  gap: 11px;
}

.proof-card .proof-avatar {
  width: 38px;
  height: 38px;
}

.proof-card .proof-who strong {
  font-size: 13.5px;
}

.proof-card .proof-who em {
  font-size: 12px;
}

/* ============================================================
   S4 · INTEGRATIONS — concentric orbit (icon tiles kept as-is)
   ============================================================ */
.sec-integrations {
  min-height: auto;
  background: var(--paper);
}

.integrations-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(88px, 9vh, 112px) 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.int-head {
  max-width: 640px;
}

.int-head .eyebrow-sq {
  margin-bottom: 16px;
}

#s4-h2 {
  max-width: 20ch;
  margin: 0 auto;
}

.int-sub {
  margin: clamp(12px, 2vh, 18px) auto 0;
  max-width: 52ch;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.55;
  color: var(--muted-1);
}

/* Orbit field. Radii scale with the viewport (capped) so it fits short
   laptops without separate breakpoints; rings + item radii derive from
   --r1/--r2. */
.orbit {
  --r1: clamp(108px, 16vmin, 140px);
  --r2: clamp(176px, 27vmin, 228px);
  position: relative;
  width: 100%;
  height: calc(var(--r2) * 2 + 116px);
  margin-top: clamp(18px, 3vh, 36px);
  zoom: 0.8;
}

.orbit-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid var(--line);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.orbit-ring-1 { width: calc(var(--r1) * 2); height: calc(var(--r1) * 2); }
.orbit-ring-2 { width: calc(var(--r2) * 2); height: calc(var(--r2) * 2); }

.orbit-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

/* Each item pivots at the centre and carries a tile out to its ring. */
.orbit-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  z-index: 2;
  transform: rotate(var(--a)); /* static placement (reduced motion) */
}

.orbit-radius {
  position: absolute;
  transform: translateY(calc(-1 * var(--r)));
}

.orbit-item .tile {
  position: absolute;
  top: 0;
  left: 0;
  /* centred on the ring point, held upright against the orbit */
  transform: translate(-50%, -50%) rotate(calc(var(--a) * -1));
}

.oi-slack    { --r: var(--r1); --a: 35deg;  --period: 82s; }
.oi-linkedin { --r: var(--r1); --a: 205deg; --period: 82s; }
.oi-teams    { --r: var(--r2); --a: -55deg; --period: 112s; }
.oi-gchat    { --r: var(--r2); --a: 140deg; --period: 112s; }

/* ---- tiles (unchanged look) ---- */
.tile {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  box-shadow: var(--shadow-tile);
  /* hover uses the standalone `scale` property so it composes with the
     orbit/counter-rotation transforms instead of fighting them */
  transition: scale 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.tile-chorus {
  width: 112px;
  height: 112px;
  border-radius: 34px;
  background: linear-gradient(145deg, #7fa1ff 0%, #4a7bf7 52%, #2a55cc 100%);
  box-shadow: inset 0 0 16px rgba(255, 255, 255, 0.55), 0 28px 54px rgba(8, 23, 79, 0.3);
}

.tile-chorus img {
  height: 56px;
  width: auto;
}

.tile-white {
  background: #fff;
}

.tile-linkedin {
  background: linear-gradient(145deg, #2e7fd4, #0a66c2 58%, #084e96);
}

.tile-teams {
  background: linear-gradient(145deg, #7a7cc9, #6264a7 58%, #4a4c8b);
}

.tile-name {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--muted-1);
}

.tile-linkedin .tile-name,
.tile-teams .tile-name {
  color: rgba(255, 255, 255, 0.85);
}

.orbit-item:hover {
  z-index: 4;
}

.orbit-item:hover .tile {
  scale: 1.07;
  box-shadow: inset 0 0 13px rgba(255, 255, 255, 0.6), 0 30px 56px rgba(8, 23, 79, 0.26);
}

.soon-badge {
  position: absolute;
  top: -9px;
  right: -11px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  padding: 2px 7px;
}

/* ============================================================
   WE USE CHORUS TO GROW CHORUS — two founder follow-cards
   ============================================================ */
.sec-grow {
  min-height: auto;
  background: #f5f7fb;
  display: flex;
  align-items: center;
  justify-content: center;
}

.grow-inner {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(88px, 9vh, 112px) 24px;
  text-align: center;
}

.grow-title {
  max-width: 22ch;
  margin: 0 auto;
}

.grow-sub {
  margin: clamp(12px, 2vh, 18px) auto 0;
  max-width: 48ch;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.55;
  color: var(--muted-1);
}

.grow-grid {
  margin-top: clamp(32px, 5vh, 56px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  text-align: left;
}

.founder-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-card);
  padding: 24px;
}

.founder-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.founder-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex: none;
  object-fit: cover;
}

.founder-who {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.founder-who strong {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.founder-who em {
  font-style: normal;
  font-size: 13px;
  color: var(--muted-2);
}

.founder-bio {
  flex: 1;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted-1);
}

.founder-follow {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  background: #0a66c2;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transition: transform 0.18s var(--ease), background 0.18s var(--ease);
}

.founder-follow:hover {
  background: #08538f;
  transform: translateY(-1px);
}

/* ============================================================
   S5 · AURORA WAITLIST + FOOTER
   ============================================================ */
.sec-waitlist {
  background: var(--navy-deep);
  color: #fff;
  display: flex;
  flex-direction: column;
}

.waitlist-inner {
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(88px, 9vh, 112px) 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#s5-h2 {
  font-size: clamp(37px, 4.4vw, 65px);
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 2px 36px rgba(4, 10, 34, 0.5);
}

/* Force the italic tail onto its own line so the headline is a clean two
   lines ("1,000,000 New Impressions." / "Guaranteed.") instead of wrapping
   the big number across three-plus lines. */
#s5-h2 .it {
  display: block;
}

.waitlist-sub {
  margin-top: 18px;
  font-size: clamp(15px, 1.2vw, 17.5px);
  color: rgba(230, 238, 255, 0.72);
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}

#s5-cta {
  margin-top: clamp(28px, 4.5vh, 44px);
}

.form-error {
  min-height: 22px;
  margin-top: 12px;
  font-size: 13px;
  color: #ffb3ab;
}

.join-form .form-error {
  margin-top: 14px;
}

.success-check {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(95, 211, 148, 0.2);
  color: #7fe3ac;
  font-size: 20px;
  margin-bottom: 6px;
}

.success-title {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.success-sub {
  font-size: 14px;
  color: rgba(230, 238, 255, 0.6);
}

/* ============================================================
   FOOTER — frosted light-blue squircle card
   ============================================================ */
.site-footer {
  position: relative;
  z-index: 1;
  padding: 0 clamp(14px, 1.8vw, 26px) clamp(22px, 2.6vw, 40px);
}

.footer-card {
  max-width: 1180px;
  margin: 0 auto;
  border-radius: clamp(22px, 2.4vw, 32px);
  padding: clamp(26px, 3vw, 44px) clamp(26px, 3.6vw, 54px);
  background: linear-gradient(157deg, #e6eefb 0%, #d3e2f5 100%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 22px 60px rgba(0, 0, 0, 0.38);
}

.footer-main {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-wm {
  height: 34px;
  width: auto;
}

.footer-tagline {
  margin-top: 16px;
  max-width: 24ch;
  font-size: 15px;
  line-height: 1.5;
  color: #5b6675;
}

.footer-socials {
  display: flex;
  gap: 12px;
  margin-top: 26px;
}

.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #111114;
  transition: transform 0.18s var(--ease), background 0.18s var(--ease);
}

.footer-social:hover {
  transform: translateY(-2px);
  background: #000;
}

.footer-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 150px;
}

.footer-info-head {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink);
}

.footer-info a {
  font-size: 15.5px;
  color: #5b6675;
  transition: color 0.15s var(--ease);
}

.footer-info a:hover {
  color: var(--ink);
}

.footer-rule {
  height: 1px;
  margin: clamp(28px, 3.6vw, 46px) 0 clamp(18px, 2vw, 24px);
  background: rgba(40, 70, 130, 0.14);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.footer-legal,
.footer-built {
  font-size: 14px;
  color: #6b7585;
}

.footer-built strong {
  font-weight: 600;
  color: var(--ink);
}

/* ============================================================
   WAITLIST FORM PAGE (waitlist.html)
   ============================================================ */
.form-page {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-deep);
  overflow: hidden;
}

.form-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + var(--nav-top) + clamp(28px, 6vh, 60px)) 24px clamp(40px, 6vh, 64px);
  text-align: center;
  color: #fff;
}

.form-h1 {
  font-size: clamp(38px, 5.4vw, 60px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 2px 36px rgba(6, 18, 60, 0.45);
}

.form-lead {
  margin: 16px auto 0;
  max-width: 42ch;
  font-size: clamp(15px, 1.2vw, 17.5px);
  line-height: 1.55;
  color: rgba(230, 238, 255, 0.78);
}

/* Frosted glass card on the aurora — matches the nav/footer glass */
.join-form {
  margin-top: clamp(28px, 4vh, 42px);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: clamp(24px, 3.2vw, 38px);
  text-align: left;
  box-shadow: 0 30px 70px rgba(4, 10, 34, 0.5);
}

.hp {
  position: absolute;
  left: -9999px;
  opacity: 0;
}

.field {
  display: block;
  margin-bottom: 16px;
}

.field-row {
  display: flex;
  gap: 14px;
}

.field-row .field {
  flex: 1;
  min-width: 0;
}

.field-label {
  display: block;
  margin-bottom: 7px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(230, 238, 255, 0.66);
}

.join-form input,
.join-form select {
  width: 100%;
  height: 50px;
  padding: 0 15px;
  font: inherit;
  font-size: 15px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  outline: none;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease), background 0.16s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.join-form select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23c2cfe6' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  cursor: pointer;
}

.join-form select:invalid {
  color: rgba(235, 242, 255, 0.42);
}

.join-form option {
  color: #0a0a0a;
}

.join-form input::placeholder {
  color: rgba(235, 242, 255, 0.4);
}

.join-form input:focus,
.join-form select:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(125, 164, 255, 0.7);
  box-shadow: 0 0 0 3px rgba(125, 164, 255, 0.22);
}

.btn-fill {
  width: 100%;
  margin-top: 10px;
  background: #fff;
  color: #0a2a78;
  box-shadow: 0 10px 28px rgba(5, 14, 45, 0.4);
}

.btn-fill:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(5, 14, 45, 0.46);
}

.btn-fill[disabled] {
  opacity: 0.7;
  cursor: wait;
}

.join-form.shake {
  animation: shake 420ms var(--ease) both;
}

.join-success {
  margin-top: clamp(26px, 4vh, 38px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.join-success[hidden] {
  display: none;
}

.form-foot {
  margin-top: 22px;
  font-size: 12.5px;
  color: rgba(230, 238, 255, 0.5);
}

.form-foot a {
  color: rgba(230, 238, 255, 0.72);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-foot a:hover {
  color: #fff;
}

@media (max-width: 560px) {
  .field-row {
    flex-direction: column;
    gap: 0;
  }
}

/* ============================================================
   LEGAL PAGES (privacy.html, terms.html)
   ============================================================ */
.legal-page {
  background: var(--paper);
}

.legal-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + var(--nav-top) + clamp(40px, 8vh, 88px)) 24px clamp(56px, 9vh, 96px);
}

.legal-inner h1 {
  font-size: clamp(34px, 4.4vw, 52px);
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.legal-updated {
  margin-top: 14px;
  font-size: 14px;
  color: var(--muted-2);
}

.legal-intro {
  margin-top: 22px;
}

.legal-inner h2 {
  font-size: 20px;
  letter-spacing: -0.01em;
  margin-top: clamp(30px, 4vh, 44px);
  margin-bottom: 12px;
}

.legal-inner p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted-1);
}

.legal-inner p + p {
  margin-top: 14px;
}

.legal-inner ul {
  margin-top: 12px;
  padding-left: 22px;
}

.legal-inner li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted-1);
  margin-bottom: 8px;
}

.legal-inner a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The footer card needs its own navy band when it is not on the
   closing aurora (i.e. on the legal pages) */
.footer-band {
  position: relative;
  background: var(--navy-deep);
  overflow: hidden;
}

.footer-band .site-footer {
  padding-top: clamp(44px, 7vh, 80px);
}

/* ============================================================
   MOTION SYSTEM
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* Aurora drift (continuous) */
  .aur-1 { animation: aurDrift1 26s ease-in-out infinite alternate; }
  .aur-2 { animation: aurDrift2 19s ease-in-out infinite alternate; }
  .aur-3 { animation: aurDrift3 34s ease-in-out infinite alternate; }
  .aur-glow { animation: aurGlow 14s ease-in-out infinite alternate; }

  /* GPU hygiene: continuous loops pause whenever their section is
     scrolled out of view (IntersectionObserver toggles .in-view).
     Pausing (not removing) lets each loop resume mid-phase, so nothing
     visibly restarts. */
  #s1:not(.in-view) .aur,
  #s1:not(.in-view) .aur-glow,
  #s1:not(.in-view) .beam-frame,
  #s1:not(.in-view) .breathe,
  #s3:not(.in-view) .beam,
  #s4:not(.in-view) .orbit-item,
  #s4:not(.in-view) .orbit-item .tile,
  #s5:not(.in-view) .aur,
  #s5:not(.in-view) .aur-glow {
    animation-play-state: paused;
  }

  .breathe {
    animation: breathe 2.6s ease-in-out infinite;
  }

  .thinking.on i {
    animation: thinkBounce 1s ease-in-out infinite;
  }

  .thinking.on i:nth-child(2) { animation-delay: 0.15s; }
  .thinking.on i:nth-child(3) { animation-delay: 0.3s; }

  html.js-anim .scene-on .mini-card.adapting::after,
  html.js-anim .poster-card.adapting::after {
    animation: shimmerSweep 1.1s var(--ease) infinite;
  }

  /* ---------- Pre-animation hidden states ---------- */
  html.js-anim #intro-overlay {
    display: flex;
  }

  html.js-anim.intro-done #intro-overlay {
    display: none;
  }

  html.js-anim #intro-mark {
    opacity: 0;
  }

  html.js-anim #nav {
    opacity: 0;
    transform: translate(-50%, -16px);
  }

  html.js-anim #hero-eyebrow,
  html.js-anim .hero-sub,
  html.js-anim .hero-ctas .pop,
  html.js-anim .browser-frame {
    opacity: 0;
  }

  html.js-anim [data-split] .lt {
    opacity: 0;
  }

  html.js-anim [data-words] .wd {
    opacity: 0;
  }

  html.js-anim.mobile #hero-h1,
  html.js-anim.mobile #s2-h2,
  html.js-anim.mobile #s2-lede,
  html.js-anim.mobile .how-title,
  html.js-anim.mobile .proof-hero-q,
  html.js-anim.mobile .grow-title,
  html.js-anim.mobile #s4-h2,
  html.js-anim.mobile #s5-h2 {
    opacity: 0;
  }

  html.js-anim .sec-problem .eyebrow-sq,
  html.js-anim .problem-lede,
  html.js-anim .li-card,
  html.js-anim .vs-badge,
  html.js-anim #s2-cta,
  html.js-anim .stat-card,
  html.js-anim .sec-how .eyebrow-sq,
  html.js-anim .how-card,
  html.js-anim .proof-hero .proof-cite,
  html.js-anim .proof-card,
  html.js-anim .grow-sub,
  html.js-anim .founder-card,
  html.js-anim .margin-note,
  html.js-anim .int-sub,
  html.js-anim .orbit,
  html.js-anim .int-head .eyebrow-sq,
  html.js-anim .waitlist-sub,
  html.js-anim #s5-cta {
    opacity: 0;
  }

  /* ---------- Intro choreography ---------- */
  html.i-logo #intro-mark {
    animation: markIn 480ms var(--ease) both;
  }

  html.i-logo-out #intro-mark {
    animation: markOut 350ms var(--ease) both;
  }

  html.i-logo-out #intro-overlay {
    animation: overlayFade 420ms var(--ease) 180ms both;
  }

  html.i-nav #nav {
    animation: navIn 500ms var(--ease) both;
  }

  html.i-eyebrow #hero-eyebrow {
    animation: pillIn 550ms var(--ease) both;
  }

  html.i-h1 #hero-h1 .lt {
    animation: letterIn 620ms var(--ease) both;
    animation-delay: var(--d);
  }

  html.i-h1.mobile #hero-h1 {
    animation: lineFade 650ms var(--ease) both;
  }

  html.i-sub .hero-sub {
    animation: fadeUp 650ms var(--ease) both;
  }

  html.i-cta .hero-ctas .pop {
    animation: ctaPop 750ms var(--ease) both;
  }

  html.i-cta .hero-ctas .pop:nth-child(2) {
    animation-delay: 110ms;
  }

  html.i-frame .browser-frame {
    animation: frameFlip 900ms var(--ease) both;
    will-change: transform, opacity;
  }

  html.intro-done #hero-frame {
    animation: none;
    opacity: 1;
    will-change: auto;
  }

  /* ---------- S2 scroll-in ---------- */
  html.s2-in .sec-problem .eyebrow-sq {
    animation: fadeUp 550ms var(--ease) both;
  }

  html.s2-in .problem-title .lt {
    animation: letterIn 620ms var(--ease) both;
    animation-delay: var(--d);
  }

  html.s2-in.mobile .problem-title {
    animation: lineFade 650ms var(--ease) both;
  }

  html.s2-in .problem-lede {
    animation: fadeUp 650ms var(--ease) 200ms both;
  }

  html.s2-in .li-card {
    animation: cardRise 700ms var(--ease) both;
  }

  html.s2-in .li-dead { animation-delay: 300ms; }
  html.s2-in .li-alive { animation-delay: 450ms; }

  html.s2-in .vs-badge {
    animation: ctaPop 700ms var(--ease) 600ms both;
  }

  html.s2-in .stat-card {
    animation: cardRise 700ms var(--ease) 500ms both;
  }

  html.s2-in .stat-card:nth-child(2) {
    animation-delay: 640ms;
  }

  html.s2-in #s2-cta {
    animation: fadeUp 650ms var(--ease) 800ms both;
  }

  /* Problem scene (JS adds .engaged / .flash once in view): the employee
     reactions pop in as engagement lands; the dead page's impressions
     flash red like an alert. */
  .li-alive.engaged .rx {
    animation: rxPop 500ms var(--ease) both;
  }
  .li-alive.engaged .rx:nth-child(2) { animation-delay: 90ms; }
  .li-alive.engaged .rx:nth-child(3) { animation-delay: 180ms; }

  .li-num-dead.flash {
    animation: deadFlash 1.3s var(--ease) forwards;
  }

  /* ---------- S3 scroll-in ---------- */
  html.s3-in .sec-how .eyebrow-sq {
    animation: fadeUp 550ms var(--ease) both;
  }

  html.s3-in .how-title .lt {
    animation: letterIn 620ms var(--ease) both;
    animation-delay: var(--d);
  }

  html.s3-in.mobile .how-title {
    animation: lineFade 650ms var(--ease) both;
  }

  html.s3-in .how-card {
    animation: cardRise 700ms var(--ease) both;
  }

  html.s3-in .how-card:nth-child(2) { animation-delay: 130ms; }
  html.s3-in .how-card:nth-child(3) { animation-delay: 260ms; }

  html.s3-in .margin-note {
    animation: fadeIn 800ms var(--ease) 700ms both;
  }

  html.s3-in .beam {
    animation: beamTravel 7s linear infinite;
  }

  html.s3-in .beam2 {
    animation-delay: -3.5s;
  }

  html.intro-done .beam-frame {
    animation: beamTravel 9s linear infinite;
  }

  html.intro-done .beam-frame.beam2 {
    animation-delay: -4.5s;
  }

  html.js-anim .scene-on .ai-stamp.on {
    animation: stampMorph 700ms var(--ease) both;
  }

  /* ---------- Social proof scroll-in ---------- */
  html.proof-in .proof-hero-q .lt {
    animation: letterIn 620ms var(--ease) both;
    animation-delay: var(--d);
  }
  html.proof-in.mobile .proof-hero-q {
    animation: lineFade 650ms var(--ease) both;
  }
  /* Staged cascade: the quote writes in (letter reveal ~1.7s), then
     Gabri's citation fades up, then the three cards pop in, in order. */
  html.proof-in .proof-hero .proof-cite {
    animation: fadeUp 650ms var(--ease) 1300ms both;
  }
  html.proof-in .proof-card {
    animation: cardRise 700ms var(--ease) 1600ms both;
  }
  html.proof-in .proof-card:nth-child(2) { animation-delay: 1780ms; }
  html.proof-in .proof-card:nth-child(3) { animation-delay: 1960ms; }

  /* ---------- S4 scroll-in ---------- */
  html.s4-in .int-head .eyebrow-sq {
    animation: fadeUp 550ms var(--ease) both;
  }

  html.s4-in #s4-h2 .lt {
    animation: letterIn 620ms var(--ease) both;
    animation-delay: var(--d);
  }

  html.s4-in.mobile #s4-h2 {
    animation: lineFade 650ms var(--ease) both;
  }

  html.s4-in .int-sub {
    animation: fadeUp 650ms var(--ease) 200ms both;
  }

  html.s4-in .orbit {
    animation: fadeIn 900ms var(--ease) 350ms both;
  }

  /* On reveal the orbit winds up: a few fast turns that ease down into
     the steady drift, then it runs continuously. The tile counter-spins
     in lockstep so it stays upright the whole time. Paused offscreen +
     while hovered. */
  html.s4-in .orbit-item {
    animation: orbitSpinup 2.6s cubic-bezier(0.08, 0.72, 0.12, 1) both,
      orbit var(--period) linear 2.6s infinite;
  }

  html.s4-in .orbit-item .tile {
    animation: orbitCounterSpinup 2.6s cubic-bezier(0.08, 0.72, 0.12, 1) both,
      orbitCounter var(--period) linear 2.6s infinite;
  }

  html.s4-in .orbit-item:hover,
  html.s4-in .orbit-item:hover .tile {
    animation-play-state: paused;
  }

  /* ---------- We use Chorus scroll-in ---------- */
  html.grow-in .grow-title .lt {
    animation: letterIn 620ms var(--ease) both;
    animation-delay: var(--d);
  }
  html.grow-in.mobile .grow-title {
    animation: lineFade 650ms var(--ease) both;
  }
  html.grow-in .grow-sub {
    animation: fadeUp 650ms var(--ease) 250ms both;
  }
  html.grow-in .founder-card {
    animation: cardRise 700ms var(--ease) 450ms both;
  }
  html.grow-in .founder-card:nth-child(2) { animation-delay: 600ms; }

  /* ---------- S5 scroll-in ---------- */
  html.s5-in #s5-h2 .lt {
    animation: letterIn 620ms var(--ease) both;
    animation-delay: var(--d);
  }

  html.s5-in.mobile #s5-h2 {
    animation: lineFade 650ms var(--ease) both;
  }

  html.s5-in .waitlist-sub {
    animation: fadeUp 650ms var(--ease) 350ms both;
  }

  html.s5-in #s5-cta {
    animation: ctaPop 750ms var(--ease) 550ms both;
  }

  .join-success {
    animation: ctaPop 700ms var(--ease) both;
  }

  .join-success:not([hidden]) .success-check::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(127, 227, 172, 0.6);
    animation: ringPulse 900ms var(--ease) 250ms both;
  }

  /* ---------- Form page entrance (auto-plays on load) ---------- */
  .form-h1 {
    animation: fadeUp 700ms var(--ease) both;
  }
  .form-lead {
    animation: fadeUp 700ms var(--ease) 130ms both;
  }
  .join-form {
    animation: cardRise 820ms var(--ease) 280ms both;
  }
  .form-foot {
    animation: fadeIn 700ms var(--ease) 640ms both;
  }

  /* ---------- Keyframes ---------- */
  @keyframes aurDrift1 { to { transform: translateX(70px); } }
  @keyframes aurDrift2 { to { transform: translateX(-100px); } }
  @keyframes aurDrift3 { to { transform: translateX(120px); } }
  @keyframes aurGlow { to { transform: translate(-46%, -52%) scale(1.06); } }

  @keyframes breathe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
  }

  @keyframes thinkBounce {
    0%, 100% { transform: translateY(0); }
    40% { transform: translateY(-4px); }
  }

  @keyframes shimmerSweep {
    to { transform: translateX(100%); }
  }

  @keyframes markIn {
    0% { opacity: 0; transform: scale(0.6); }
    65% { opacity: 1; transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
  }

  @keyframes markOut {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.88); }
  }

  @keyframes overlayFade {
    to { opacity: 0; }
  }

  @keyframes navIn {
    0% { opacity: 0; transform: translate(-50%, -16px); }
    100% { opacity: 1; transform: translate(-50%, 0); }
  }

  @keyframes pillIn {
    0% { opacity: 0; transform: translateY(10px) scale(0.92); }
    60% { opacity: 1; transform: translateY(-2px) scale(1.02); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }

  @keyframes letterIn {
    0% {
      opacity: 0;
      filter: blur(14px);
      transform: translateY(0.9em) rotateX(-70deg) scale(0.9);
    }
    55% {
      opacity: 1;
      filter: blur(3px);
      transform: translateY(-0.06em) rotateX(-8deg) scale(1.01);
    }
    100% {
      opacity: 1;
      filter: blur(0);
      transform: translateY(0) rotateX(0) scale(1);
    }
  }

  @keyframes wordIn {
    0% { opacity: 0; filter: blur(7px); transform: translateY(0.35em); }
    100% { opacity: 1; filter: blur(0); transform: translateY(0); }
  }

  @keyframes lineFade {
    0% { opacity: 0; transform: translateY(14px); filter: blur(6px); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
  }

  @keyframes fadeUp {
    0% { opacity: 0; transform: translateY(16px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  @keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }

  @keyframes ctaPop {
    0% { opacity: 0; transform: scale(0.6); }
    40% { opacity: 1; transform: scale(1.2); }
    58% { transform: scale(1.2); }
    78% { transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
  }

  @keyframes frameFlip {
    0% {
      opacity: 0;
      transform: rotateX(85deg) translateY(-150px);
    }
    60% {
      opacity: 1;
      transform: rotateX(-6deg) translateY(0);
    }
    100% {
      opacity: 1;
      transform: rotateX(0) translateY(0);
    }
  }

  @keyframes cardRise {
    0% { opacity: 0; transform: translateY(28px); }
    70% { opacity: 1; transform: translateY(-4px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  @keyframes stampMorph {
    0% {
      opacity: 0;
      border-radius: 50%;
      transform: scale(0);
    }
    60% {
      opacity: 1;
      border-radius: 30%;
      transform: scale(1.1);
    }
    100% {
      opacity: 1;
      border-radius: 20px;
      transform: scale(1);
    }
  }

  @keyframes beamTravel {
    to { offset-distance: 100%; }
  }

  /* Orbit: rotate the item (carrying its tile around the ring) from its
     start angle through a full turn. The tile counter-rotates by the
     same amount to stay upright. --a stays constant, so it is just a
     fixed offset baked into both ends of the interpolation. */
  @keyframes orbit {
    from { transform: rotate(var(--a)); }
    to { transform: rotate(calc(var(--a) + 360deg)); }
  }

  @keyframes orbitCounter {
    from { transform: translate(-50%, -50%) rotate(calc(var(--a) * -1)); }
    to { transform: translate(-50%, -50%) rotate(calc(var(--a) * -1 - 360deg)); }
  }

  /* Wind-up: three fast turns that ease down to the steady orbit's start
     angle (1080deg = 3 full turns, so the handoff to `orbit` is seamless).
     The tile counter-spins the same amount to stay upright throughout. */
  @keyframes orbitSpinup {
    from { transform: rotate(calc(var(--a) - 1080deg)); }
    to { transform: rotate(var(--a)); }
  }

  @keyframes orbitCounterSpinup {
    from { transform: translate(-50%, -50%) rotate(calc(var(--a) * -1 + 1080deg)); }
    to { transform: translate(-50%, -50%) rotate(calc(var(--a) * -1)); }
  }

  @keyframes ringPulse {
    0% { transform: scale(0.7); opacity: 1; }
    100% { transform: scale(2.1); opacity: 0; }
  }

  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(3px); }
  }

  @keyframes rxPop {
    0% { transform: scale(0.4); opacity: 0.4; }
    55% { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
  }

  @keyframes deadFlash {
    0% { color: var(--muted-2); }
    18% { color: #e5484d; }
    40% { color: var(--muted-2); }
    64% { color: #e5484d; }
    100% { color: #b8504b; }
  }
}

/* ============================================================
   SHORT-LAPTOP SUPPORT
   ============================================================ */
@media (max-height: 940px) {
  h1, #s5-h2 { font-size: clamp(34px, 4.1vw, 56px); }
  .hero-inner { padding-top: calc(var(--nav-h) + var(--nav-top) + 18px); }
  .how-card { height: clamp(380px, 54vh, 480px); }
}

@media (max-height: 860px) {
  h1, #s5-h2 { font-size: clamp(32px, 3.8vw, 49px); }
  #scene-adapt [data-step="mini3"],
  #scene-adapt [data-step="mini4"],
  #scene-adapt [data-step="mini5"],
  #scene-slack [data-step="roster"] { display: none; }
  /* Distribute centers its content (great when the roster fills the panel on
     large displays). On short laptops the roster is hidden, so top-align it
     instead of leaving the message floating with a gap above. */
  #scene-slack { justify-content: flex-start; }
  h2 { font-size: clamp(28px, 3vw, 44px); }
  .hero-sub { font-size: 15px; }
  .problem-lede { font-size: clamp(15px, 1.3vw, 18px); }
  .stat-num { font-size: clamp(44px, 4vw, 64px); }
  .how-card { height: clamp(350px, 53vh, 440px); }

  /* Fold: reclaim vertical room from the hero copy so the review board keeps
     peeking a full four cards (two rows) on short laptops instead of clipping
     to two. Cards keep their normal 3-line size so a real 14-inch lands on
     ~four, not a crowded six. */
  .hero-inner { padding-top: calc(var(--nav-h) + var(--nav-top) + 14px); }
  #hero-h1 { margin-top: 8px; }
  .hero-sub { margin-top: 8px; }
  .hero-ctas { margin-top: 12px; }
  .hero-frame-perspective { margin-top: 10px; }
  .feed { padding: 12px 16px 14px; }
  .feed-head { margin-bottom: 8px; }
  .feed-grid { gap: 10px; }
  .poster-card { padding: 11px 13px; }
}

@media (max-height: 800px) {
  :root { --nav-h: 50px; --nav-top: 12px; }
  .hero-inner { padding-top: calc(var(--nav-h) + var(--nav-top) + 6px); }
  h1, #s5-h2 { font-size: clamp(29px, 3.6vw, 44px); }
  .hero-ctas { margin-top: 16px; }
  .btn-lg { height: 46px; font-size: 14.5px; }
  .how-card { height: clamp(330px, 52vh, 410px); padding-bottom: 38px; }
  .how-copy p { font-size: 12.5px; }
  .panel { padding: 12px; gap: 7px; }
  .stat-card { padding: 16px 22px; }
  .waitlist-inner { padding-bottom: 100px; }
}

@media (max-height: 740px) {
  h1, #s5-h2 { font-size: clamp(26px, 3.3vw, 39px); }
  h2 { font-size: clamp(25px, 2.7vw, 38px); }
  .hero-frame-perspective { margin-top: 16px; }
  .feed-grid { gap: 9px; }
  .poster-card { padding: 10px 12px; }
  .how-card { height: clamp(300px, 50vh, 370px); }
  .how-copy { padding-top: 10px; }
  .problem-lede { margin-top: 12px; }
  .stat-num { font-size: clamp(38px, 3.6vw, 54px); }
  .tile { width: 76px; height: 76px; border-radius: 26px; }
  .tile-chorus { width: 96px; height: 96px; border-radius: 30px; }
}

/* ============================================================
   MOBILE ≤ 900px
   ============================================================ */
@media (max-width: 900px) {
  .nav-links,
  .nav-actions {
    display: none;
  }

  #nav-burger {
    display: block;
    margin-left: auto;
  }

  #drawer {
    display: flex;
  }

  .sec {
    min-height: 0;
  }

  .sec-hero {
    min-height: 100svh;
  }

  .hero-inner {
    padding-top: calc(var(--nav-h) + var(--nav-top) + 22px);
  }

  #hero-h1 {
    margin-top: 6px;
    line-height: 1.06;
  }

  .hero-sub {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.45;
    max-width: 40ch;
  }

  .hero-ctas {
    margin-top: 12px;
    gap: 10px;
  }

  .hero-ctas .btn-lg {
    height: 46px;
    font-size: 14.5px;
    flex: 1;
    padding-left: 8px;
    padding-right: 8px;
  }

  .hero-frame-perspective {
    margin-top: 10px;
  }

  h1 {
    font-size: clamp(27px, 7.2vw, 38px);
  }

  h2 {
    font-size: clamp(28px, 7.6vw, 36px);
  }

  .hero-ctas {
    flex-direction: row;
    width: 100%;
    max-width: 400px;
  }

  .hero-frame-perspective {
    width: 100%;
  }

  .feed-grid {
    grid-template-columns: 1fr;
  }

  .feed-grid .poster-card:nth-child(n + 3) {
    display: none;
  }

  .app-side {
    display: none;
  }

  .aur-3 {
    display: none;
  }

  .problem-inner {
    padding: 88px 20px 56px;
  }

  .vs-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .vs-badge {
    margin: 0 auto;
  }

  .problem-stats {
    flex-direction: column;
    max-width: 360px;
  }

  .how-inner {
    padding: 72px 20px 56px;
  }

  .how-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .how-card {
    height: auto;
    min-height: 420px;
  }

  .margin-note {
    display: none;
  }

  .proof-inner {
    padding: 80px 20px 60px;
  }

  .proof-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .grow-inner {
    padding: 76px 20px 56px;
  }

  .grow-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .integrations-inner {
    padding: 72px 20px 56px;
  }

  /* Orbit collapses to a centred wrap of static tiles on mobile. */
  .orbit {
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 28px;
  }

  .orbit-ring {
    display: none;
  }

  .orbit-center {
    position: static;
    transform: none;
    width: 100%;
    margin-bottom: 8px;
    display: flex;
    justify-content: center;
  }

  .orbit-item {
    position: static;
    width: auto;
    height: auto;
    transform: none !important;
    animation: none !important;
  }

  .orbit-radius {
    position: static;
    transform: none;
  }

  .orbit-item .tile {
    position: relative; /* re-anchor the SOON badge to its tile */
    transform: none;
    animation: none !important;
  }

  .waitlist-inner {
    padding: 100px 24px 96px;
  }

  .footer-card {
    padding: 32px 24px;
  }

  .footer-main {
    flex-direction: column;
    gap: 30px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* Gentle drift so the flattened mobile orbit still breathes. The full
   ring can't run in the stacked layout, so each tile bobs on its own
   stagger instead — alive, not frozen. Off for reduced-motion. */
@keyframes tileFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .orbit-center .tile,
  .orbit-item .tile {
    animation: tileFloat 4.4s ease-in-out infinite !important;
    will-change: transform;
  }
  .orbit-center .tile { animation-duration: 5.4s !important; }
  .oi-slack .tile     { animation-delay: -0.6s !important; animation-duration: 4.2s !important; }
  .oi-linkedin .tile  { animation-delay: -2.1s !important; animation-duration: 5.0s !important; }
  .oi-teams .tile     { animation-delay: -3.0s !important; animation-duration: 4.6s !important; }
  .oi-gchat .tile     { animation-delay: -1.3s !important; animation-duration: 5.2s !important; }
}

/* ============================================================
   LARGE DISPLAYS (>= 1600px) — fill big monitors
   14-inch laptops and smaller are below this breakpoint and stay
   exactly as they are. Above it, containers, the hero mockup, the
   orbit, and type scale up fluidly to fill the extra room.
   ============================================================ */
@media (min-width: 1600px) {
  #nav { width: min(calc(100% - 28px), clamp(1040px, 70vw, 1320px)); }

  .hero-inner { max-width: clamp(1200px, 80vw, 1600px); }
  .hero-frame-perspective { width: min(94%, clamp(900px, 62vw, 1180px)); }

  .problem-inner { max-width: clamp(1060px, 72vw, 1320px); }
  .vs-grid { max-width: clamp(820px, 56vw, 1000px); }

  .how-inner { max-width: clamp(1180px, 80vw, 1560px); }

  .proof-inner { max-width: clamp(1080px, 74vw, 1340px); }
  .proof-hero { max-width: clamp(760px, 56vw, 1000px); }

  .integrations-inner { max-width: clamp(1180px, 80vw, 1560px); }
  .orbit { --r1: clamp(140px, 13vmin, 184px); --r2: clamp(228px, 21vmin, 300px); }

  .grow-inner { max-width: clamp(920px, 64vw, 1160px); }

  .waitlist-inner { max-width: clamp(1200px, 76vw, 1620px); }
  .footer-card { max-width: clamp(1180px, 80vw, 1560px); }

  .form-wrap { max-width: clamp(520px, 38vw, 640px); }
  .legal-inner { max-width: clamp(720px, 52vw, 900px); }

  /* Type scales up to match the wider canvas */
  h1 { font-size: clamp(76px, 5vw, 104px); }
  h2 { font-size: clamp(52px, 3.6vw, 68px); }
  .hero-sub { font-size: clamp(18px, 1.3vw, 22px); }
  .problem-lede,
  .grow-sub,
  .int-sub,
  .form-lead { font-size: clamp(19px, 1.4vw, 23px); }
  #s5-h2 { font-size: clamp(84px, 5.6vw, 112px); white-space: nowrap; }
  .proof-hero-q { font-size: clamp(52px, 4.2vw, 72px); }
  .form-h1 { font-size: clamp(60px, 5vw, 88px); }
  .stat-num { font-size: clamp(54px, 3.6vw, 72px); }
}

/* Isaac #11: waitlist page — give the top-right "Sign in" room from the edge. */
html.waitlist-page .nav-signin { margin-right: 12px; }