/* ============================================================
   CMO.XYZ — styles (dual theme: light + dark, auto by system)

   THEME: light is the default; dark is applied automatically via
   @media (prefers-color-scheme: dark). No color is hardcoded in rules;
   everything reads from tokens so both themes stay consistent.

   IMPORTANT — TEMPORARY PLACEHOLDER VISUAL DIRECTION:
   DESIGN.md marks Colors / Logo / Shapes / Layout / Components /
   Avatars as OPEN and says to stay neutral and not invent brand colors
   or shapes. Both palettes here are NEUTRAL GRAYSCALE (no invented brand
   hue). The dark "stages" behind the mascots and the "The Cursor" mascot
   itself are a PLACEHOLDER direction chosen with the user, NOT final
   brand. Revisit when identity locks.

   LOCKED and honored: typeface (PP Mori -> system fallback) and
   voice/tone (in copy).
   ============================================================ */

/* PP Mori — the locked brand typeface (DESIGN.md). Self-hosted woff2.
   Weights in use: 400 regular, 600 semibold. */
@font-face {
  font-family: "PP Mori";
  src: url("assets/fonts/mori-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Mori";
  src: url("assets/fonts/mori-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --font: "PP Mori", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;

  /* ---- LIGHT theme (default) — neutral grayscale ---- */
  --bg: #f4f6f7;
  --surface: #ffffff;
  --surface-2: #eef1f2;
  --line: rgba(17, 22, 26, 0.10);
  --line-2: rgba(17, 22, 26, 0.18);

  --ink: #14181b;
  --ink-mid: #454d51;
  --ink-soft: #6b7479;

  /* neutral accent (no hue) */
  --accent: #14181b;

  /* buttons / high-contrast surfaces */
  --btn-bg: #14181b;
  --btn-ink: #ffffff;
  --btn-bg-hover: #2b3236;

  --nav-bg: rgba(244, 246, 247, 0.72);

  /* mascot "stages" so the white mascot stays visible on light */
  --stage: #14171d;                       /* solid dark chip/tile */
  --stage-glow: rgba(18, 21, 28, 0.85);   /* dark radial disc */
  --page-glow: rgba(20, 24, 30, 0.05);    /* ambient page wash */

  /* elevation */
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04),
    0 12px 30px -18px rgba(16, 24, 40, 0.20);
  --shadow-lg: 0 34px 70px -34px rgba(16, 24, 40, 0.30);

  --maxw: 1320px;
  --pad: clamp(1.15rem, 3vw, 2rem);
  --r: 16px;
  --r-lg: 24px;
}

/* Dark theme applies when html[data-theme="dark"]. The head script sets
   data-theme from the saved choice or the system preference; the footer/nav
   toggle overrides it and saves the choice. */
:root[data-theme="dark"] {
    /* ---- DARK theme — neutral grayscale ---- */
    --bg: #0a0b0e;
    --surface: rgba(255, 255, 255, 0.024);
    --surface-2: rgba(255, 255, 255, 0.05);
    --line: rgba(255, 255, 255, 0.09);
    --line-2: rgba(255, 255, 255, 0.16);

    --ink: #f3f4f6;
    --ink-mid: #b6bbc4;
    --ink-soft: #7b818d;

    --accent: #e7e9ee;

    --btn-bg: #ffffff;
    --btn-ink: #0a0b0e;
    --btn-bg-hover: #e9eaee;

    --nav-bg: rgba(10, 11, 14, 0.6);

    --stage: rgba(255, 255, 255, 0.05);
    --stage-glow: rgba(255, 255, 255, 0.15);
    --page-glow: rgba(255, 255, 255, 0.06);

    --shadow-card: none;
    --shadow-lg: 0 40px 80px -40px rgba(0, 0, 0, 0.8);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Keyboard focus — visible ring in both themes, none for mouse users. */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.bg-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 82% -8%, var(--page-glow), transparent 62%),
    radial-gradient(700px 460px at 8% 2%, var(--page-glow), transparent 60%);
}

main, .footer, .nav { position: relative; z-index: 1; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.025em; line-height: 1.08; }
p { margin: 0; color: var(--ink-mid); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ---------------- Nav ---------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0.9rem var(--pad);
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav__brand { display: flex; align-items: center; gap: 0.55rem; font-weight: 600; letter-spacing: -0.03em; }
.nav__brand img {
  width: 28px; height: 28px;
  object-fit: contain;
  background: var(--stage);
  border-radius: 7px;
  padding: 3px;
}
.nav__links { display: flex; gap: 1.8rem; margin: 0 auto; }
.nav__links a { font-size: 0.93rem; color: var(--ink-soft); transition: color 0.15s ease; }
.nav__links a:hover { color: var(--ink); }
.nav__actions { display: flex; align-items: center; gap: 1.1rem; }
.link-quiet { font-size: 0.93rem; color: var(--ink-mid); }
.link-quiet:hover { color: var(--ink); }

.nav__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav__toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.62rem 1.15rem;
  background: var(--btn-bg);
  color: var(--btn-ink);
  border: 1px solid var(--btn-bg);
  border-radius: 999px;
  font-size: 0.93rem;
  font-weight: 500;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { background: var(--surface-2); border-color: var(--ink-soft); }
.btn--lg { padding: 0.82rem 1.5rem; font-size: 1rem; }

/* ---------------- Theme toggle ---------------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.theme-toggle:hover { border-color: var(--ink-soft); background: var(--surface-2); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle--icon { padding: 0.5rem; }
/* Show the icon for the current theme. */
.theme-toggle .ic-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .ic-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .ic-moon { display: inline; }

/* ---------------- Pills / eyebrows ---------------- */
.pill, .eyebrow {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-mid);
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.eyebrow { margin-bottom: 1.1rem; color: var(--ink); border-color: var(--line-2); }

/* ---------------- Sections ---------------- */
.section { max-width: var(--maxw); margin: 0 auto; padding: clamp(4rem, 9vw, 7rem) var(--pad); }
/* Standalone statement section (second section, below the hero).
   Editorial two-column layout so it reads full, not empty. */
.statement {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(1.75rem, 4vw, 3rem) var(--pad) clamp(1rem, 2vw, 1.5rem);
}
.statement .eyebrow { margin-bottom: 1.2rem; }
.statement__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
}
.statement h2 { font-size: clamp(2rem, 4.6vw, 3.3rem); margin: 0; max-width: 15ch; }
.statement p { margin: 0 0 0.4rem; color: var(--ink-soft); font-size: 1.08rem; max-width: 40ch; }

/* Section that follows the statement needs less top padding. */
.section--tight { padding-top: clamp(1.5rem, 4vw, 3rem); }

.section__head { max-width: 620px; margin-bottom: 3rem; }
.section__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section__head h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin-bottom: 0.7rem; }
.section__head p { font-size: 1.05rem; color: var(--ink-soft); }

/* ---------------- Hero ---------------- */
.hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) var(--pad) clamp(2rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero h1 { font-size: clamp(2.6rem, 6.4vw, 4.6rem); letter-spacing: -0.035em; margin: 1.2rem 0 1.3rem; }
.hero .lead { font-size: clamp(1.08rem, 1.7vw, 1.28rem); color: var(--ink-mid); max-width: 46ch; }
.hero__cta { display: flex; gap: 0.8rem; flex-wrap: wrap; margin: 2rem 0 1.4rem; }
.hero__meta { font-size: 0.9rem; color: var(--ink-soft); }

.hero__visual { position: relative; display: grid; place-items: center; min-height: 340px; }
.hero__visual img {
  position: relative;
  z-index: 1;
  width: min(380px, 78vw);
  filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.45));
}

/* Interactive 3D mascot */
.hero__model {
  position: relative;
  z-index: 1;
  width: min(440px, 84vw);
  height: min(540px, 90vw);
  --poster-color: transparent;
  background: transparent;
  cursor: grab;
}
.hero__model:active { cursor: grabbing; }
/* model-viewer's default UI — keep it minimal */
.hero__model::part(default-progress-bar) { display: none; }
.orb {
  position: absolute;
  width: min(440px, 88vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 46%, var(--stage-glow), transparent 64%);
  filter: blur(18px);
  z-index: 0;
}

/* Centered hero variant (home-b): stacked and centered, mascot below the
   headline and paragraph. DOM order: text, mascot, CTA, meta. */
.hero--center {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: clamp(1.4rem, 4vw, 2.4rem);
}
.hero--center .hero__text { display: flex; flex-direction: column; align-items: center; }
.hero--center h1 { margin: 1rem 0 1.1rem; max-width: 18ch; }
.hero--center .lead { margin: 0 auto; }
.hero--center .hero__visual { min-height: 0; order: 0; }
.hero--center .hero__cta { justify-content: center; margin: 0; }
.hero--center .hero__meta { margin: 0; }

/* ---------------- Tool strip ---------------- */
.channels-sec {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 3.75rem) var(--pad);
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.channels-sec__label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
}
.channels { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; }
.channel {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  font-size: 0.95rem;
  color: var(--ink);
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.channel:hover { border-color: var(--line-2); background: var(--surface-2); transform: translateY(-2px); }
.channel__icon { display: inline-grid; place-items: center; width: 20px; height: 20px; color: var(--ink); flex: none; }
.channel__icon svg { width: 18px; height: 18px; }

/* ---------------- Chat mockup ---------------- */
.chat {
  max-width: 720px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.chat__bar { display: flex; align-items: center; gap: 0.45rem; padding: 0.9rem 1.2rem; border-bottom: 1px solid var(--line); }
.chat__bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.chat__bar p { margin-left: 0.7rem; font-size: 0.84rem; color: var(--ink-soft); }
.chat__body { padding: 1.6rem; display: flex; flex-direction: column; gap: 1.1rem; min-height: 300px; justify-content: flex-start; }

/* Typing indicator (the mascot "solving") */
.msg .typing { display: inline-flex; align-items: center; gap: 5px; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-soft); animation: typingDot 1s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay: 0.15s; }
.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingDot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
.msg { display: flex; gap: 0.75rem; max-width: 82%; }
.msg img {
  width: 40px; height: 40px; flex: none; object-fit: contain;
  background: var(--stage); border-radius: 10px; padding: 4px;
}
.msg p { margin: 0; padding: 0.85rem 1.1rem; border-radius: 16px; font-size: 0.97rem; line-height: 1.5; }
.msg--agent p { background: var(--surface-2); color: var(--ink); border-top-left-radius: 5px; }
.msg--user { align-self: flex-end; }
.msg--user p { background: var(--btn-bg); color: var(--btn-ink); border-top-right-radius: 5px; }
.chat__input {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 1.6rem 1.6rem; padding: 0.75rem 0.75rem 0.75rem 1.15rem;
  border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); font-size: 0.95rem;
}
.chat__input i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--ink); font-style: normal; }

/* ---------------- Capabilities: tabs ---------------- */
.tabs { display: flex; flex-direction: column; gap: 1.25rem; }

.tabs__list { display: flex; flex-direction: row; gap: 0.6rem; }
.tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  flex: 1 1 0;
  min-width: 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink-mid);
  font: inherit;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.tab:hover { border-color: var(--line-2); color: var(--ink); }
.tab.is-active { background: var(--surface-2); border-color: var(--line-2); color: var(--ink); }
.tab__icon {
  display: grid; place-items: center;
  width: 36px; height: 36px; flex: none;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  transition: border-color 0.18s ease;
}
.tab.is-active .tab__icon { border-color: var(--line-2); }
.tab__icon svg { width: 19px; height: 19px; }
.tab__label { font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; }
.tab__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; opacity: 0; }
.tab.is-active .tab__bar { opacity: 1; }

.tabs__panels {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  padding: clamp(1.6rem, 3vw, 2.75rem);
  min-height: 320px;
  display: flex;
}
.panel { display: none; grid-template-columns: 1fr minmax(240px, 300px); gap: 2.4rem; align-items: center; width: 100%; }
.panel.is-active { display: grid; animation: panelIn 0.5s ease both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.panel__text h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 0.7rem; }
.panel__text p { color: var(--ink-mid); margin-bottom: 1.3rem; max-width: 46ch; }
.panel__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.panel__list li { display: flex; align-items: center; gap: 0.65rem; color: var(--ink-mid); font-size: 0.97rem; }
.panel__list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); flex: none; }
.panel__media { position: relative; display: grid; place-items: center; }
.panel__media img { width: 170px; position: relative; z-index: 1; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.45)); }
.panel__glow { position: absolute; width: 230px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--stage-glow), transparent 62%); filter: blur(16px); }

.features__note { margin: 1.5rem 0 0; font-size: 0.9rem; color: var(--ink-soft); }

/* ---- Capability graphics (bespoke mini mockups) ---- */
.cap { position: relative; width: 100%; max-width: 320px; }
.cap::before {
  content: ""; position: absolute; inset: -22% -16%; z-index: 0;
  background: radial-gradient(55% 55% at 62% 40%, rgba(16, 24, 40, 0.10), transparent 72%);
  filter: blur(8px);
}
:root[data-theme="dark"] .cap::before { background: radial-gradient(55% 55% at 62% 40%, rgba(255, 255, 255, 0.06), transparent 72%); }
.cap-card {
  position: relative; z-index: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.1rem;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 26px 50px -30px rgba(16, 24, 40, 0.45);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.cap-line { display: block; height: 9px; border-radius: 999px; background: var(--line-2); }
/* Real text inside the mockups (fills the cards with relevant content). */
.cap-name { font-size: 0.82rem; font-weight: 600; color: var(--ink); line-height: 1.2; }
.cap-sub { font-size: 0.68rem; color: var(--ink-soft); line-height: 1.2; }
.cap-txt { font-size: 0.76rem; color: var(--ink-mid); line-height: 1.45; margin: 0; }
.cap-search .cap-txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-rank .cap-txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-line.dim { background: var(--line); }
.cap-line.tall { height: 12px; background: var(--ink-soft); }
.cap-line.w30 { width: 30%; } .cap-line.w35 { width: 35%; } .cap-line.w40 { width: 40%; } .cap-line.w45 { width: 45%; }
.cap-line.w50 { width: 50%; } .cap-line.w55 { width: 55%; } .cap-line.w60 { width: 60%; } .cap-line.w70 { width: 70%; }
.cap-line.w90 { width: 90%; } .cap-line.w100 { width: 100%; }

/* header with avatar */
.cap-hd { display: flex; align-items: center; gap: 0.6rem; }
.cap-avatar, .cap-dot { width: 34px; height: 34px; border-radius: 50%; flex: none; background: linear-gradient(145deg, var(--ink-soft), var(--ink)); box-shadow: inset 0 0 0 2px var(--surface); }
.cap-lines { display: flex; flex-direction: column; gap: 0.38rem; flex: 1; }
.cap-more { display: inline-flex; gap: 3px; align-self: flex-start; margin-top: 4px; }
.cap-more i { width: 4px; height: 4px; border-radius: 50%; background: var(--line-2); }

/* image thumbnail with an abstract "photo" */
.cap-thumb { position: relative; height: 94px; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, var(--surface-2) 0%, var(--line-2) 100%); }
.cap-thumb::before { content: ""; position: absolute; right: 20%; top: 18%; width: 26px; height: 26px; border-radius: 50%; background: var(--surface); opacity: 0.85; }
.cap-thumb::after { content: ""; position: absolute; left: 8%; bottom: 0; width: 84%; height: 58%; background: var(--ink-soft); opacity: 0.3; clip-path: polygon(0 100%, 28% 34%, 52% 100%, 64% 46%, 100% 100%); }

/* engagement stats */
.cap-react { display: flex; gap: 0.5rem; }
.cap-stat { display: inline-flex; align-items: center; gap: 0.32rem; font-size: 0.72rem; color: var(--ink-mid); border: 1px solid var(--line); border-radius: 999px; padding: 0.24rem 0.55rem; background: var(--bg); }
.cap-stat svg { width: 12px; height: 12px; flex: none; }

/* pills */
.cap-meta { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.cap-pill { font-size: 0.7rem; color: var(--ink-mid); border: 1px solid var(--line); border-radius: 999px; padding: 0.24rem 0.6rem; background: var(--bg); white-space: nowrap; }
.cap-pill--accent { background: var(--ink); color: var(--btn-ink); border-color: var(--ink); }

/* floating badge with live ping */
.cap-badge { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.7rem; font-weight: 500; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; padding: 0.3rem 0.65rem; box-shadow: var(--shadow-card); }
.cap-badge--tr { top: -12px; right: -8px; }
.cap-ping { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); flex: none; }
.cap-ping::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ink); animation: capPing 1.8s ease-out infinite; }
@keyframes capPing { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(2.6); opacity: 0; } }

/* content: window bar + typing caret */
.cap-winbar { display: flex; align-items: center; gap: 5px; margin-bottom: 0.1rem; }
.cap-winbar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.cap-winbar .cap-line, .cap-winbar .cap-sub { margin-left: auto; }
.cap-typing { display: flex; align-items: center; gap: 5px; }
.cap-caret { display: inline-block; width: 2px; height: 14px; background: var(--ink); animation: capBlink 1s step-end infinite; }
@keyframes capBlink { 50% { opacity: 0; } }

/* ads: KPI + rising chart */
.cap-kpi { display: flex; align-items: flex-end; justify-content: space-between; }
.cap-label { display: block; font-size: 0.64rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 3px; }
.cap-kpi strong { font-size: 1.5rem; letter-spacing: -0.02em; color: var(--ink); font-weight: 650; line-height: 1; }
.cap-trend { font-size: 0.72rem; font-weight: 600; color: var(--ink); background: var(--surface-2); border-radius: 999px; padding: 0.16rem 0.5rem; white-space: nowrap; }
.cap-chart { display: flex; align-items: flex-end; gap: 7px; height: 78px; padding-top: 0.3rem; }
.cap-chart i { flex: 1; height: var(--h); background: linear-gradient(var(--ink), var(--ink-soft)); border-radius: 5px 5px 0 0; transform-origin: bottom; }
.panel.is-active .cap-chart i { animation: capBar 0.7s ease both; }
.panel.is-active .cap-chart i:nth-child(2) { animation-delay: 0.06s; }
.panel.is-active .cap-chart i:nth-child(3) { animation-delay: 0.12s; }
.panel.is-active .cap-chart i:nth-child(4) { animation-delay: 0.18s; }
.panel.is-active .cap-chart i:nth-child(5) { animation-delay: 0.24s; }
@keyframes capBar { from { transform: scaleY(0.12); opacity: 0.3; } to { transform: scaleY(1); opacity: 1; } }

/* seo: search + ranking climb */
.cap-search { display: flex; align-items: center; gap: 0.5rem; border: 1px solid var(--line); border-radius: 999px; padding: 0.5rem 0.75rem; background: var(--bg); }
.cap-search svg { width: 14px; height: 14px; color: var(--ink-soft); flex: none; }
.cap-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.cap-rank li { display: flex; align-items: center; gap: 0.6rem; }
.cap-pos { width: 20px; height: 20px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--line); font-size: 0.68rem; font-weight: 600; display: grid; place-items: center; color: var(--ink-mid); flex: none; }
.cap-rank li.top .cap-pos { background: var(--ink); color: var(--btn-ink); border-color: var(--ink); }
.cap-rank .cap-trend { margin-left: auto; }

/* images: generated grid */
.cap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.cap-grid span { position: relative; aspect-ratio: 16 / 11; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, var(--surface-2), var(--line-2)); }
.cap-grid span:nth-child(2) { background: linear-gradient(135deg, var(--line), var(--ink-soft)); }
.cap-grid span:nth-child(3) { background: linear-gradient(135deg, var(--ink-soft), var(--line-2)); }
.cap-grid span:nth-child(4) { background: linear-gradient(135deg, var(--line-2), var(--surface-2)); }
.cap-grid span::after { content: ""; position: absolute; right: 22%; top: 24%; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); opacity: 0.55; }

/* newsletter: open-rate bar */
.cap-openlabel { display: flex; justify-content: space-between; margin-bottom: 2px; }
.cap-openrate { height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.cap-openrate__fill { display: block; height: 100%; border-radius: 999px; background: var(--ink); }
.panel.is-active .cap-openrate__fill { animation: capFill 0.9s ease both; }
@keyframes capFill { from { width: 0; } }
.cap-grid span:nth-child(2) { background: linear-gradient(150deg, var(--line-2), var(--surface-2)); }
.cap-grid span:nth-child(3) { background: linear-gradient(200deg, var(--line-2), var(--surface-2)); }
.cap-grid span:nth-child(4) { background: linear-gradient(120deg, var(--surface-2), var(--line-2)); }
.panel.is-active .cap-grid span { animation: capPop 0.5s ease both; }
.panel.is-active .cap-grid span:nth-child(2) { animation-delay: 0.06s; }
.panel.is-active .cap-grid span:nth-child(3) { animation-delay: 0.12s; }
.panel.is-active .cap-grid span:nth-child(4) { animation-delay: 0.18s; }
@keyframes capPop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }

/* ---------------- Steps ---------------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.step {
  position: relative;
  padding: 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.step:hover { transform: translateY(-3px); border-color: var(--line-2); }
.step__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.step__icon {
  display: grid; place-items: center;
  width: 50px; height: 50px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
}
.step__icon svg { width: 24px; height: 24px; }
.step__num { font-size: 0.8rem; color: var(--ink-soft); letter-spacing: 0.14em; font-weight: 600; }
.step h3 { font-size: 1.2rem; margin: 0 0 0.5rem; }
.step p { color: var(--ink-soft); font-size: 0.96rem; margin: 0; }
/* connector arrow between steps (desktop) */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 48px;
  right: -0.95rem;
  width: 11px; height: 11px;
  border-top: 2px solid var(--line-2);
  border-right: 2px solid var(--line-2);
  transform: translate(50%, -50%) rotate(45deg);
}

/* ---------------- Split (your agent) ---------------- */
.section--split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.split__text h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin: 0.2rem 0 0.7rem; }
.split__text p { color: var(--ink-soft); font-size: 1.05rem; max-width: 40ch; }
.avatars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.avatars li {
  aspect-ratio: 1;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--stage);
  padding: 1rem;
  box-shadow: var(--shadow-card);
  transition: border-color 0.18s ease, transform 0.18s ease;
  cursor: pointer;
}
.avatars li:hover { border-color: var(--line-2); transform: translateY(-3px); }
.avatars img { width: 78%; }

/* ---------------- Who ---------------- */
.who { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.who h3 { font-size: 1.2rem; margin-bottom: 0.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line-2); }
.who p { color: var(--ink-soft); }

/* ---------------- Waitlist form ---------------- */
/* Capture bar: a horizontal pill — email, then an optional website field that
   slides in once the visitor starts typing, then the button. */
.waitlist {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 560px;
  margin: 2rem 0 0.75rem;
  padding: 0.35rem 0.4rem 0.35rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, max-width 0.3s ease;
}
.waitlist--center { margin-left: auto; margin-right: auto; }
.waitlist:focus-within {
  border-color: var(--ink);
  box-shadow: var(--shadow-card), 0 0 0 3px rgba(20, 24, 27, 0.10);
}
.waitlist .btn { flex: 0 0 auto; white-space: nowrap; }
.waitlist__input {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.55rem 0.4rem 0.55rem 0.7rem;
  font: inherit;
  font-size: 1rem;
  text-align: left;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: none;
}
.waitlist__input::placeholder { color: var(--ink-soft); }
/* Website field: collapsed to the right of email until the form expands. */
.waitlist__input--url {
  max-width: 0;
  opacity: 0;
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
  white-space: nowrap;
  border-left: 1px solid transparent;
  transition: max-width 0.3s ease, opacity 0.22s ease, padding 0.3s ease, border-color 0.2s ease;
}
/* Grow the whole bar a little when the website field slides in. */
.waitlist.is-expanded { max-width: 660px; }
.waitlist.is-expanded .waitlist__input--url {
  max-width: 48%;
  opacity: 1;
  padding-left: 0.7rem;
  border-left-color: var(--line);
}
.waitlist:has(input[aria-invalid="true"]) { border-color: #c0392b; }
.waitlist__msg { font-size: 0.9rem; color: var(--ink-soft); min-height: 1.2em; margin: 0.9rem 0 0.5rem; }
.waitlist__msg.is-ok,
.waitlist__msg.is-err {
  width: fit-content;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1.05rem 0.55rem 0.7rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: var(--shadow-card);
  animation: waitlistPop 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.waitlist__msg.is-ok::before,
.waitlist__msg.is-err::before {
  content: "\2713";
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  flex: none;
}
/* Fixed colors (like the error state) so the success pill is readable in both
   themes and on the hero's light bg and the CTA's dark block alike. */
.waitlist__msg.is-ok { color: #14181b; background: #ffffff; border: 1px solid rgba(16, 24, 40, 0.12); }
.waitlist__msg.is-ok::before { background: #14181b; color: #ffffff; }
.waitlist__msg.is-err { color: #b42318; background: #fef3f2; border: 1px solid #fecdca; }
.waitlist__msg.is-err::before { content: "!"; background: #b42318; color: #fff; }
@keyframes waitlistPop { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } }
.waitlist--center + .waitlist__msg { text-align: center; }

/* ---------------- Proof / trust (v2) ---------------- */
.proof {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) var(--pad);
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.proof__label { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; color: var(--ink-soft); margin: 0 0 1.5rem; }
.proof__logos { list-style: none; margin: 0 0 2.5rem; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem 2.5rem; }
.proof__logos li { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink-soft); opacity: 0.7; }
.proof__markers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.proof__markers li { text-align: left; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-card); }
.proof__markers strong { display: block; font-size: 1rem; margin-bottom: 0.3rem; }
.proof__markers span { font-size: 0.9rem; color: var(--ink-soft); }

/* ---------------- Problem framing (v2) ---------------- */
.problem { max-width: var(--maxw); margin: 0 auto; padding: clamp(4rem, 9vw, 7rem) var(--pad); }
.problem__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.problem__col { padding: 1.9rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-card); }
.problem__col--fix { border-color: var(--line-2); }
.problem__col h3 { font-size: 1.2rem; margin: 0 0 1.1rem; }
.problem__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.problem__list li { display: flex; align-items: flex-start; gap: 0.65rem; color: var(--ink-mid); font-size: 0.98rem; }
.problem__list li::before {
  flex: none;
  width: 19px; height: 19px;
  margin-top: 1px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: 11px;
  border: 1px solid var(--line);
}
.problem__list--pain li::before { content: "\2715"; background: var(--surface-2); color: var(--ink-soft); }
.problem__list--win li::before { content: "\2713"; background: var(--ink); color: var(--btn-ink); border-color: var(--ink); }

/* ---------------- Pricing (v2, placeholder) ---------------- */
.pricing { max-width: var(--maxw); margin: 0 auto; padding: clamp(4rem, 9vw, 7rem) var(--pad); }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: stretch; }
.tier {
  position: relative;
  padding: 2rem 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.tier--featured { border-color: var(--line-2); }
.tier__tag { position: absolute; top: -11px; left: 1.75rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; background: var(--btn-bg); color: var(--btn-ink); border-radius: 999px; padding: 0.25rem 0.7rem; }
.tier h3 { font-size: 1.15rem; margin: 0; }
.tier__price { font-size: 2rem; font-weight: 600; letter-spacing: -0.03em; margin: 0.2rem 0 0; }
.tier__for { color: var(--ink-soft); font-size: 0.92rem; margin: 0 0 0.6rem; }
.tier__list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.tier__list li { display: flex; align-items: center; gap: 0.6rem; color: var(--ink-mid); font-size: 0.95rem; }
.tier__list li::before { content: "\2713"; flex: none; width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); }
.tier .btn { width: 100%; }
.tier__price { display: flex; align-items: baseline; gap: 0.25rem; }
.tier__per { font-size: 0.95rem; font-weight: 500; color: var(--ink-soft); }
.tier__price--custom { display: block; }
.tier__bill { font-size: 0.8rem; color: var(--ink-soft); margin: 0.1rem 0 0; }
.tier__plus { font-size: 0.9rem; font-weight: 600; color: var(--ink); margin: 0.3rem 0 0.1rem; }

/* Billing period toggle */
.bill-toggle { display: inline-flex; gap: 0.25rem; margin: 1.3rem auto 0; padding: 0.3rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; }
.bill-toggle__opt { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 1.1rem; border: 0; background: transparent; color: var(--ink-soft); font: inherit; font-size: 0.92rem; font-weight: 500; border-radius: 999px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.bill-toggle__opt.is-active { background: var(--btn-bg); color: var(--btn-ink); }
.bill-toggle__save { font-size: 0.72rem; font-weight: 600; padding: 0.12rem 0.45rem; border-radius: 999px; background: var(--surface); color: var(--ink); }
.bill-toggle__opt.is-active .bill-toggle__save { background: rgba(255, 255, 255, 0.2); color: var(--btn-ink); }

/* Trust + disclaimer below the cards */
.pricing__foot { text-align: center; margin-top: 2.2rem; display: flex; flex-direction: column; gap: 0.35rem; }
.pricing__trust { font-weight: 500; color: var(--ink); }
.pricing__note { font-size: 0.88rem; color: var(--ink-soft); max-width: 62ch; margin-inline: auto; }

/* ---------------- CTA ---------------- */
.cta {
  position: relative;
  max-width: var(--maxw);
  margin: clamp(2rem, 5vw, 4rem) auto clamp(4rem, 8vw, 7rem);
  padding: clamp(3rem, 7vw, 5.5rem) var(--pad);
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.cta .orb--sm { top: -30%; left: 50%; transform: translateX(-50%); width: min(560px, 90vw); }
.cta__art { position: relative; z-index: 1; width: 120px; height: auto; margin: 0 auto 1.5rem; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4)); }
.cta h2 { position: relative; z-index: 1; font-size: clamp(1.9rem, 4vw, 2.8rem); max-width: 20ch; margin: 0 auto 0.8rem; }
.cta p { position: relative; z-index: 1; color: var(--ink-mid); max-width: 44ch; margin: 0 auto 2rem; }
.cta .btn { position: relative; z-index: 1; }
.cta .cta__fine { position: relative; z-index: 1; font-size: 0.85rem; margin: 0.9rem auto 0; max-width: none; opacity: 0.7; }

/* ---------------- Footer ---------------- */
.footer { border-top: 1px solid var(--line); padding: clamp(3rem, 6vw, 4.5rem) var(--pad) 2rem; }
/* Simple centered footer: big mascot, brand, tagline, a few section links. */
.footer__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 0.6rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line);
}
.footer__mascot { width: clamp(110px, 16vw, 150px); height: auto; display: block; margin-bottom: 0.4rem; filter: drop-shadow(0 16px 26px rgba(16, 20, 28, 0.2)); }
.footer__inner .nav__brand { font-size: 1.1rem; }
.footer__tag { color: var(--ink-soft); max-width: 42ch; font-size: 0.95rem; }
.footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.8rem; margin-top: 1.3rem; }
.footer__links a { color: var(--ink-mid); font-size: 0.97rem; font-weight: 500; }
.footer__links a:hover { color: var(--ink); }
.footer__bottom { max-width: var(--maxw); margin: 1.5rem auto 0; display: flex; justify-content: space-between; align-items: center; color: var(--ink-soft); }
.footer__bottom small { font-size: 0.85rem; }

/* ---------------- Loading splash ---------------- */
.loader { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; transition: opacity 0.5s ease, visibility 0.5s ease; }
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__bg { position: absolute; inset: 0; background: var(--bg); }
.loader__inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 1.6rem; }
.loader__glow {
  position: absolute;
  top: 40%; left: 50%;
  width: 320px; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--stage-glow), transparent 62%);
  filter: blur(22px);
  z-index: 0;
}
.loader__word { position: relative; z-index: 1; font-size: 1.4rem; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); }
.loader__dots { position: relative; z-index: 1; display: inline-flex; gap: 6px; }
.loader__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-soft); animation: loaderDot 1s infinite ease-in-out; }
.loader__dots i:nth-child(2) { animation-delay: 0.15s; }
.loader__dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes loaderDot { 0%,60%,100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-5px); opacity: 1; } }

/* ---------------- Cursor companion ---------------- */
/* Mascot trails the real pointer. Positioned via GSAP (x/y + xPercent/
   yPercent). Dark stage badge so it stays visible on light backgrounds. */
.cursor-pet {
  position: fixed;
  top: 0; left: 0;
  width: 46px; height: 46px;
  z-index: 80;
  pointer-events: none;
  opacity: 0;
  padding: 7px;
  border-radius: 50%;
  background: var(--stage);
  will-change: transform;
}
.cursor-pet img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* On dark the mascot pops on its own; drop the badge. */
:root[data-theme="dark"] .cursor-pet { background: transparent; padding: 0; }
:root[data-theme="dark"] .cursor-pet img { filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.55)); }
@media (pointer: coarse) { .cursor-pet { display: none !important; } }

/* ---------------- 3D mascot cursor ---------------- */
/* A DOM element (.cursor3d, built in script.js) follows the pointer and looks
   like the 3D arrow mascot — just the arrow + eyes, eyes blink on click.
   The native cursor is hidden only once that's active (html.cursor3d-on), so
   without JS the normal cursor still shows. Touch keeps native behaviour. */
@media (pointer: fine) {
  html.cursor3d-on,
  html.cursor3d-on * { cursor: none !important; }
}
.cursor3d {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  width: 50px;
  height: 50px;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
  transition: opacity 0.18s ease;
  filter: drop-shadow(0 7px 11px rgba(16, 20, 28, 0.30));
}
.cursor3d.is-visible { opacity: 1; }
.cursor3d svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  transform-origin: 27% 2%; /* the arrow tip — stays put while scaling */
  transition: transform 0.1s ease;
}
/* Blink: hide open eyes, show closed eyes, and shrink a touch — feels clicked. */
.cursor3d .c3d-eyes-closed { opacity: 0; }
.cursor3d.is-blink .c3d-eyes-open { opacity: 0; }
.cursor3d.is-blink .c3d-eyes-closed { opacity: 1; }
.cursor3d.is-blink svg { transform: scale(0.88); }
/* "Click" hint that appears when hovering something clickable. */
.cursor3d__hint {
  position: absolute;
  left: 40px;
  top: 30px;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
  background: #14181b;
  padding: 5px 10px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(16, 20, 28, 0.32);
  opacity: 0;
  transform: translateY(5px) scale(0.9);
  transform-origin: left top;
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.cursor3d.is-hover .cursor3d__hint { opacity: 1; transform: none; }
.cursor3d.is-hover svg { transform: scale(1.08); }

/* ---------------- Motion / entrance ---------------- */
.has-anim:not(.reduced) .hero__text > *,
.has-anim:not(.reduced) .hero__cta,
.has-anim:not(.reduced) .hero__meta,
.has-anim:not(.reduced) .hero__visual { opacity: 0; }

.hero__visual, .hero__visual img, .hero .orb, .cta .orb--sm { will-change: transform, opacity; }

/* Lenis smooth scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .panel.is-active { animation: none; }
  .cap-caret,
  .panel.is-active .cap-chart i,
  .panel.is-active .cap-grid span { animation: none; }
  .cap-chart i { transform: none; }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 900px) {
  .tabs__list { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tabs__list::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; }
  .tab__label { white-space: nowrap; }
  .tabs__panels { min-height: 0; }
  .panel { grid-template-columns: 1fr; gap: 1.5rem; }
  .panel__media { order: 2; justify-self: center; }
  .cap { max-width: 340px; }
  .steps { grid-template-columns: 1fr; }
  .step:not(:last-child)::after { display: none; }
  .proof__markers { grid-template-columns: repeat(2, 1fr); }
  .problem__grid { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: 1fr; }
  .section--split { grid-template-columns: 1fr; }
  .who { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer__top { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 820px) {
  .statement__grid { grid-template-columns: 1fr; gap: 1rem; align-items: start; }
  .hero { grid-template-columns: 1fr; text-align: center; }
  .hero .lead { margin-inline: auto; }
  .hero__cta { justify-content: center; }
  .hero__visual { order: -1; min-height: 260px; }
  .hero__visual img { width: min(260px, 62vw); }
  .nav__links { display: none; }
  .nav__actions .link-quiet { display: none; }
}
@media (max-width: 620px) {
  .nav { gap: 1rem; }
  .nav__toggle { display: flex; margin-left: auto; }
  .nav.is-open .nav__links {
    display: flex; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    margin: 0; padding: 0.5rem var(--pad) 1.2rem; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
  }
  .nav.is-open .nav__links a { padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
  .avatars { grid-template-columns: repeat(3, 1fr); }
  .footer__bottom { flex-direction: column; gap: 0.4rem; }
  /* Capture bar: stack fields and button full-width so nothing gets cramped. */
  .waitlist { flex-direction: column; align-items: stretch; border-radius: 20px; padding: 0.5rem; gap: 0.45rem; max-width: 420px; }
  .waitlist__input { width: 100%; padding: 0.8rem 0.9rem; }
  .waitlist .btn { width: 100%; }
  /* Reveal the website field vertically on mobile instead of horizontally. */
  .waitlist__input--url {
    max-width: 100%;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0.9rem;
    border-left: 0;
    transition: max-height 0.3s ease, opacity 0.22s ease, padding 0.3s ease;
  }
  .waitlist.is-expanded .waitlist__input--url {
    max-height: 3.5rem;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
  }
  /* Pricing: full-width toggle, roomier cards. */
  .bill-toggle { display: flex; width: 100%; max-width: 320px; }
  .bill-toggle__opt { flex: 1 1 0; justify-content: center; }
  .pricing { padding-top: clamp(3rem, 12vw, 4rem); padding-bottom: clamp(3rem, 12vw, 4rem); }
  .section__head { margin-bottom: 2rem; }
}
@media (max-width: 400px) {
  .bill-toggle__save { display: none; } /* keep the toggle from wrapping on tiny screens */
}