/* ============================================================
   MotionHub — marketing landing
   Design system: "Operations-grade, with warmth"
   Cream paper + warm ink + clay accent, dark section rhythm.
   Display: Bricolage Grotesque · Body: Geist · Mono: Geist Mono
   Accent words: same font as the headline, upright, in the accent colour.

   NOTE: this stylesheet is shared by index.astro AND the standalone
   /privacy and /terms pages. The legacy token aliases (--bg, --text,
   --serif, …) at the bottom of :root keep those pages and the shared
   footer styled without per-page edits.
   ============================================================ */

:root {
  /* palette */
  --paper: #f3efe7;
  --paper-2: #ebe6db;
  --ink: #13110e;
  --ink-2: #2a2722;
  --muted: #6b665c;
  --hairline: rgba(19, 17, 14, 0.10);
  --hairline-strong: rgba(19, 17, 14, 0.18);
  --accent: #c44d2c;
  --accent-dark: #a33d22;
  --accent-ink: #fafaf7;

  /* dark surface */
  --night: #0e0e0e;
  --night-2: #181715;
  --night-fg: #f4f1e9;
  --night-muted: #8e8a82;
  --night-hairline: rgba(255, 255, 255, 0.10);

  /* type */
  --f-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --f-body: "Geist", ui-sans-serif, system-ui, sans-serif;
  --f-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

  /* radii + shadows */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;

  --shadow-soft: 0 1px 0 rgba(255,255,255,0.6) inset, 0 1px 2px rgba(19,17,14,0.04), 0 8px 24px rgba(19,17,14,0.06);
  --shadow-card: 0 1px 0 rgba(255,255,255,0.7) inset, 0 12px 40px rgba(19,17,14,0.10);

  /* layout */
  --maxw: 1320px;
  --gutter: clamp(20px, 4vw, 56px);

  /* ── legacy aliases (legal pages + shared footer) ── */
  --bg: var(--paper);
  --bg-2: var(--paper-2);
  --text: var(--ink);
  --text-2: var(--ink-2);
  --border-soft: var(--hairline);
  --serif: var(--f-display);
  --sans: var(--f-body);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "ss02", "cv11";
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  scroll-behavior: smooth;
  /* Offset in-page anchor jumps by the sticky nav's height (70px row + a little
     breathing room) so a section heading is never hidden under the bar. */
  scroll-padding-top: 88px;
}

body {
  font-feature-settings: "ss01", "cv11";
  letter-spacing: -0.005em;
  line-height: 1.5;
  overflow-x: clip;
}

::selection { background: var(--accent); color: var(--accent-ink); }

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ── containers + sections ───────────────────────────── */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

section { position: relative; }
section.pad { padding: clamp(72px, 9vw, 140px) 0; }
section.pad-sm { padding: clamp(48px, 6vw, 88px) 0; }

/* In-page anchor jumps (nav menu, footer links) land on a padded section's
   border-box, so its full .pad top padding shows as dead space under the
   sticky nav — and because that padding is fluid (72–140px) the gap looks
   bigger on wide screens. Cancel the section's own top padding from the
   snap position and replace it with one small constant gap, so any heading
   lands framed just below the bar at every width. Net offset from the top of
   the scrollport = scroll-padding-top (88px) + 24px = a steady 112px. */
section.pad[id] { scroll-margin-top: calc(24px - clamp(72px, 9vw, 140px)); }

.dark {
  background: var(--night);
  color: var(--night-fg);
  --ink: var(--night-fg);
  --muted: var(--night-muted);
  --hairline: var(--night-hairline);
  --hairline-strong: rgba(255,255,255,0.18);
}

/* ── type system ─────────────────────────────────────── */

.eyebrow {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

/* Legibility notes, in case these look like arbitrary numbers:
   · wdth 100 — Bricolage's natural width. The old 92 condensed every heading,
     narrowing the counters right where the type is largest.
   · font-optical-sizing: auto — the old "opsz" 96 was outside the font's 10–48
     axis, so it clamped to 48 (the largest display cut) and then applied that
     same cut to .display.s at 24px. `auto` lets the browser match opsz to the
     rendered size, which is the whole point of the axis. NOTE: any
     font-variation-settings declaration that names opsz would override this. */
.display {
  font-family: var(--f-display);
  font-weight: 620;
  font-variation-settings: "wdth" 100;
  font-optical-sizing: auto;
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}
/* Sizes stepped down ~15% when the display face went to its natural width and
   looser tracking (see .display above): the same words now set ~10% wider, and
   headlines carry authored <br> breaks that must still fit their column —
   "Run your / whole studio / from one place." was re-wrapping to five lines and
   pushing the hero CTAs past the fold. */
.display.xl { font-size: clamp(38px, 5.4vw, 78px); }
.display.l  { font-size: clamp(34px, 4.7vw, 70px); }
.display.m  { font-size: clamp(29px, 3.5vw, 50px); }
.display.s  { font-size: clamp(23px, 2.2vw, 33px); }

/* Highlighted words: the headline font itself, upright, in the accent colour — the italic
   serif read as too decorative (owner, 09-27). */
.display em {
  font-style: normal;
  font-family: inherit;
  font-weight: inherit;
  font-variation-settings: inherit;
  letter-spacing: inherit;
  color: var(--accent);
}

.lead {
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.45;
  color: var(--muted);
  max-width: 56ch;
  text-wrap: pretty;
  margin: 0;
}

.label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.num-mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* ── buttons ─────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 22px;
  border-radius: 999px;
  font-size: 15px; font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
  border: 0;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(19,17,14,0.18); }

.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(196,77,44,0.32); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--hairline-strong);
}
.btn-ghost:hover { background: rgba(0,0,0,0.04); }

.dark .btn-primary { background: var(--paper); color: var(--ink); }
.dark .btn-ghost { color: var(--night-fg); border-color: rgba(255,255,255,0.2); }
.dark .btn-ghost:hover { background: rgba(255,255,255,0.06); }

.btn .arr { transition: transform .2s ease; }
.btn:hover .arr { transform: translateX(3px); }

/* ── cards / surfaces ────────────────────────────────── */

.card { background: #fbf8f1; border: 1px solid var(--hairline); border-radius: var(--r-md); }
.dark .card { background: var(--night-2); border-color: var(--night-hairline); }

.rule { height: 1px; background: var(--hairline); width: 100%; }

/* ── grid hairlines (feature grid) ───────────────────── */
.hgrid { display: grid; border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); }
.hgrid > * { border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: transparent; }

/* ── browser frame chrome (shared) ───────────────────── */
.browser-dots { display:flex; gap:6px; }
.browser-dots i { width:9px;height:9px;border-radius:50%; background: rgba(0,0,0,0.14); }
.dark .browser-dots i { background: rgba(255,255,255,0.18); }

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

/* small marquee */
@keyframes mh-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { display: flex; gap: 64px; animation: mh-marquee 38s linear infinite; width: max-content; }

/* underline on hover (nav) */
.nav-link { position: relative; }
.nav-link::after {
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background: currentColor; transform: scaleX(0); transform-origin: left center;
  transition: transform .25s ease;
}
.nav-link:hover::after { transform: scaleX(1); }

/* tiny animated dot */
@keyframes mh-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity:.4; transform: scale(.85); } }
.live-dot { width:7px;height:7px;border-radius:50%;background:#16a34a;animation: mh-pulse 1.6s ease-in-out infinite; }

/* ============================================================
   NAV
   ============================================================ */
.mh-nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: rgba(243, 239, 231, 0.55);
  transition: background .2s ease, border-color .2s ease;
  border-bottom: 1px solid transparent;
}
.mh-nav.on { background: rgba(243, 239, 231, 0.85); border-bottom-color: var(--hairline); }
.mh-nav-row { display:flex; align-items:center; gap: 32px; height: 70px; }
.mh-logo { display:flex; align-items:center; gap: 10px; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.mh-logo-img { height: 38px; width: auto; display: block; }
.mh-nav-links { display:flex; gap: 28px; font-size: 14px; color: var(--ink); margin-left: 18px; }
.mh-nav-cta { display:flex; align-items:center; gap: 18px; margin-left: auto; font-size: 14px; }
.mh-nav-mobile-cta { display: none; }

/* pure-CSS mobile menu */
.mh-nav-toggle-input { display: none; }
.mh-nav-toggle { display: none; margin-left: auto; flex-direction: column; gap: 5px; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 10px; }
.mh-nav-toggle-bar { width: 20px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }

@media (max-width: 880px) {
  .mh-nav-toggle { display: flex; }
  .mh-nav-links {
    position: absolute; top: 70px; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 4px;
    margin-left: 0; padding: 14px var(--gutter) 22px;
    background: rgba(243, 239, 231, 0.97);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--hairline);
    max-height: 0; overflow: hidden; opacity: 0; pointer-events: none;
    transition: max-height .28s ease, opacity .2s ease, padding .28s ease;
  }
  .mh-nav-links > * { width: 100%; padding: 9px 0; font-size: 16px; }
  .mh-nav-cta { display: none; }
  .mh-nav-mobile-cta {
    display: flex; flex-direction: column; align-items: stretch; gap: 10px;
    width: 100%; margin-top: 16px; padding-top: 18px;
    border-top: 1px solid var(--hairline);
  }
  .mh-nav-mobile-cta > * { padding: 0; }
  .mh-nav-mobile-signin { font-size: 16px; padding: 6px 0 !important; }
  .mh-nav-mobile-register { width: 100%; justify-content: center; height: 46px; }
  .mh-nav-toggle-input:checked ~ .mh-nav-links {
    max-height: 460px; opacity: 1; pointer-events: auto; padding-top: 14px; padding-bottom: 22px;
  }
  .mh-nav-toggle-input:checked ~ .mh-nav-toggle .mh-nav-toggle-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .mh-nav-toggle-input:checked ~ .mh-nav-toggle .mh-nav-toggle-bar:nth-child(2) { opacity: 0; }
  .mh-nav-toggle-input:checked ~ .mh-nav-toggle .mh-nav-toggle-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}

/* ============================================================
   HERO
   ============================================================ */
.mh-hero { padding-top: clamp(24px, 3vw, 56px); padding-bottom: clamp(80px, 10vw, 160px); position: relative; overflow: hidden; }
.mh-hero::before {
  content: ""; position: absolute; top: 40px; right: -240px; width: 760px; height: 760px;
  pointer-events: none; background: radial-gradient(circle, rgba(196,77,44,0.08), transparent 60%); z-index: 0;
}
.mh-hero-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(40px, 6vw, 84px); align-items: center; position: relative; z-index: 1; }
.mh-hero-l { max-width: 720px; }
.mh-hero-cta { display:flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
.mh-hero-meta { list-style: none; padding: 0; margin: 26px 0 0; display:flex; gap: 22px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.mh-hero-meta li { display:flex; align-items:center; gap: 8px; }
.mh-hero-check { font-weight: 700; color: var(--accent); }

.mh-hero-r { perspective: 2200px; perspective-origin: 25% 55%; min-width: 0; position: relative; }
.mh-hero-stage { position: relative; width: 116%; transform: rotateY(-12deg) rotateX(4deg) rotateZ(-0.6deg); transform-style: preserve-3d; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.mh-hero-r:hover .mh-hero-stage { transform: rotateY(-6deg) rotateX(2deg) rotateZ(0deg); }
/* Sits behind the frame in the 3D scene: a warm clay wash under the devices so
   the composition lifts off the cream page instead of floating on flat colour. */
.mh-hero-glow {
  position: absolute; inset: -8% -10% -14% -10%; transform: translateZ(-40px);
  filter: blur(20px); z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 58% at 22% 32%, rgba(196, 77, 44, 0.16), transparent 72%),
    radial-gradient(52% 52% at 78% 74%, rgba(19, 17, 14, 0.10), transparent 72%);
}

.mh-hero-frame {
  position: relative; background: #fbf8f1; border-radius: 18px; overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 0 0 1px rgba(19,17,14,0.08),
    0 4px 8px rgba(19,17,14,0.04),
    0 30px 60px -10px rgba(19,17,14,0.22),
    0 80px 120px -30px rgba(19,17,14,0.28);
}
.mh-hero-bar { display:flex; align-items:center; gap: 16px; padding: 12px 16px; background: rgba(0,0,0,0.025); border-bottom: 1px solid var(--hairline); }
.mh-hero-url { display:flex; align-items:center; flex: 0 1 360px; min-width: 0; padding: 6px 14px; font-family: var(--f-mono); font-size: 12px; color: var(--ink); background: rgba(255,255,255,0.75); border-radius: 999px; border: 1px solid var(--hairline); margin: 0 auto; }
.mh-hero-tabs { display:flex; gap: 4px; padding: 3px; background: rgba(0,0,0,0.05); border-radius: 8px; margin-left: auto; }
.mh-hero-tab { border: 0; background: transparent; padding: 5px 12px; font-size: 11.5px; font-weight: 500; color: var(--muted); border-radius: 6px; font-family: inherit; letter-spacing: -0.005em; cursor: pointer; transition: color .15s ease, background .15s ease; }
.mh-hero-tab.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }

.mh-hero-img-wrap { position: relative; aspect-ratio: 1400 / 896; background: #fbf8f1; overflow: hidden; }
.mh-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: 0; transition: opacity .6s ease, transform 1s ease; transform: scale(1.02); display: block; }
.mh-hero-img.is-active { opacity: 1; transform: scale(1); }

/* The member-facing half of the same product — the studio's own booking site —
   floating in front of the admin frame. Everything is sized in % of the stage so
   the device tracks the frame at every breakpoint; translateZ lifts it off the
   surface inside the stage's 3D scene. */
.mh-hero-phone {
  position: absolute; left: -6%; bottom: -6%; width: 20.5%; z-index: 2;
  aspect-ratio: 390 / 844; padding: 1.5%;
  border-radius: 11% / 5%;
  background: linear-gradient(155deg, #3c3c45 0%, #17171b 42%, #2a2a31 100%);
  transform: translateZ(70px) rotateZ(-2deg);
  box-shadow:
    0 0 0 1px rgba(19,17,14,0.10),
    0 18px 30px -12px rgba(19,17,14,0.34),
    0 60px 90px -28px rgba(19,17,14,0.42);
}
.mh-hero-phone img {
  width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center;
  border-radius: 9.5% / 4.4%; background: #111;
}
.mh-hero-phone::after {
  content: ""; position: absolute; top: 2.2%; left: 50%; transform: translateX(-50%);
  width: 26%; height: 1.8%; border-radius: 999px; background: #0c0c0f; opacity: 0.92;
}

@media (max-width: 1180px) {
  .mh-hero-grid { grid-template-columns: 1fr; }
  .mh-hero-r { perspective: 1800px; perspective-origin: 50% 50%; }
  .mh-hero-stage { width: 100%; transform: rotateY(-6deg) rotateX(2deg); }
  /* Single column from here down: the stage fills the container, so a negative
     left would be clipped by .mh-hero's overflow instead of hanging free. */
  .mh-hero-phone { left: 1.5%; width: 19%; bottom: -5%; }
}
@media (max-width: 760px) {
  .mh-hero-stage { transform: none; }
  .mh-hero-r { perspective: none; }
  .mh-hero-tabs { display: none; }
  .mh-hero-url { flex: 1; }
  .mh-hero-phone { left: 1%; width: 25%; bottom: -4%; }
}

/* ============================================================
   TRUST
   ============================================================ */
section.mh-trust { padding: 22px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: rgba(0,0,0,0.015); }
.mh-trust .container { display:grid; grid-template-columns: 280px 1fr; gap: 40px; align-items:center; }
.mh-trust-l { font-family: var(--f-display); font-size: 22px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.1; }
.mh-trust-l span { color: var(--accent); }
.mh-trust-r { overflow: hidden; border-left: 1px solid var(--hairline); padding-left: 40px; }
.mh-trust-track { mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.mh-trust-logo { font-family: var(--f-mono); font-size: 15px; font-weight: 500; letter-spacing: 0.01em; color: var(--ink); opacity: 0.72; white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; }
.mh-trust-logo i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; background: var(--accent); }
@media (max-width: 760px) {
  .mh-trust .container { grid-template-columns: 1fr; }
  .mh-trust-r { border-left: 0; padding-left: 0; }
}

/* ============================================================
   PROBLEM
   ============================================================ */
.mh-problem { padding-top: clamp(48px, 5vw, 72px); }
.mh-problem-grid { display:grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.mh-problem-lead-strong { color: var(--ink); font-weight: 500; }
.mh-problem-stats { display:grid; grid-template-columns: repeat(3, auto); gap: 36px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--hairline); }
.mh-problem-stats .display.s { color: var(--accent); }
.mh-problem-r { display:flex; flex-direction: column; gap: 22px; }
.mh-problem-img-wrap { padding: 28px; border-radius: 18px; background: rgba(0,0,0,0.025); border: 1px solid var(--hairline); }
.mh-problem-img { width: 100%; height: auto; display: block; border-radius: 8px; aspect-ratio: 1200 / 675; object-fit: cover; }
.mh-problem-replaces-row { padding: 22px; border-radius: 14px; background: var(--ink); color: var(--paper); }
.mh-problem-replaces-row .label { color: rgba(255,255,255,0.55); margin-bottom: 14px; }
.mh-problem-replaces { display:flex; flex-wrap:wrap; gap: 6px; }
.mh-problem-replaces-pill { font-size: 11px; padding: 5px 11px; background: rgba(255,255,255,0.08); border-radius: 999px; color: var(--paper); font-family: var(--f-mono); letter-spacing: 0.02em; }
@media (max-width: 1080px) { .mh-problem-grid { grid-template-columns: 1fr; } }

/* ============================================================
   FEATURES
   ============================================================ */
.mh-features-head { display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 56px; }
.mh-features-grid { grid-template-columns: repeat(3, 1fr); }
.mh-feature { padding: 32px 28px 28px; position: relative; transition: background .2s ease; min-height: 240px; display:flex; flex-direction:column; }
.mh-feature:hover { background: rgba(196,77,44,0.04); }
.mh-feature-icon { width: 48px; height: 48px; display:flex; align-items:center; justify-content:center; margin-bottom: 22px; color: var(--ink); }
.mh-feature-k { position: absolute; top: 28px; right: 28px; font-size: 11px; color: var(--muted); letter-spacing: 0.06em; }
.mh-feature-n { font-family: var(--f-display); font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
.mh-feature-d { font-size: 14px; color: var(--muted); line-height: 1.5; margin-top: 8px; max-width: 36ch; }
.mh-feature-arr { margin-top: auto; padding-top: 18px; font-size: 18px; color: var(--ink); opacity: 0.35; }
.mh-feature:hover .mh-feature-arr { opacity: 1; color: var(--accent); }
@media (max-width: 980px) { .mh-features-head { grid-template-columns: 1fr; gap: 20px; } .mh-features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .mh-features-grid { grid-template-columns: 1fr; } }

/* ============================================================
   WEBSITE BUILDER
   ============================================================ */
.mh-web-grid { display:grid; grid-template-columns: 1fr 1.25fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.mh-web-l { max-width: 520px; }
.mh-web-list { list-style:none; padding: 0; margin: 28px 0 0; display:flex; flex-direction:column; gap: 12px; font-size: 15px; color: var(--ink); }
.mh-web-list li { display:flex; align-items:center; gap: 10px; }
.mh-web-list .dot { background: var(--accent); }
.mh-web-cta { display:flex; align-items:center; gap: 18px; margin-top: 36px; flex-wrap: wrap; }
.mh-web-cta .num-mono { font-size: 12px; color: var(--muted); }
.mh-web-stack { position: relative; min-height: 480px; }
.mh-web-card { position: absolute; background: #fbf8f1; border: 1px solid var(--hairline); border-radius: 14px; box-shadow: var(--shadow-card); overflow: hidden; }
.mh-web-card-1 { top: 0; left: 0; width: 78%; transform: rotate(-1.2deg); z-index: 2; }
.mh-web-card-2 { bottom: 0; right: 0; width: 62%; transform: rotate(1.8deg); z-index: 1; }
.mh-web-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--hairline); background: rgba(0,0,0,0.02); }
.mh-web-url { flex: 1; font-family: var(--f-mono); font-size: 11px; color: var(--muted); background: rgba(0,0,0,0.04); border-radius: 6px; padding: 4px 10px; letter-spacing: 0.01em; }
.mh-web-img { width: 100%; height: auto; display: block; background: #fbf8f1; aspect-ratio: 1400 / 1050; object-fit: cover; }
@media (max-width: 1080px) { .mh-web-grid { grid-template-columns: 1fr; } .mh-web-stack { min-height: 400px; } }
@media (max-width: 640px) { .mh-web-stack { min-height: 0; height: auto; display: flex; flex-direction: column; gap: 16px; } .mh-web-card { position: relative; width: 100%; transform: none; } }

/* ============================================================
   MOBILE APP (dark)
   ============================================================ */
.mh-mobile { position: relative; overflow: hidden; }
.mh-mobile-bg { position: absolute; inset: 0; pointer-events: none; }
.mh-mobile-glow { position: absolute; top: -20%; left: 30%; width: 700px; height: 700px; background: radial-gradient(circle, rgba(196,77,44,0.12), transparent 60%); filter: blur(40px); }
.mh-mobile-grid { position: relative; }
.mh-mobile-head { max-width: 560px; }
.mh-phones { display:flex; gap: 28px; justify-content: center; align-items: center; padding: 56px 0; flex-wrap: wrap; }
.mh-phone-wrap { position: relative; transition: transform .3s ease; filter: drop-shadow(0 30px 60px rgba(0,0,0,0.45)); }
.mh-phone-wrap:nth-child(1) { transform: rotate(-6deg) translateY(20px); }
.mh-phone-wrap:nth-child(2) { transform: rotate(2deg); }
.mh-phone-wrap:nth-child(3) { transform: rotate(-3deg) translateY(40px); }
.mh-phone-img { width: 240px; max-width: 100%; height: auto; display: block; border-radius: 36px; }
.mh-phone-wrap:hover { transform: rotate(0deg) translateY(-6px) !important; }
.mh-phone-tag { position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%); font-size: 11px; font-family: var(--f-mono); color: var(--night-muted); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.mh-mobile-stats { display:grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding-top: 48px; border-top: 1px solid rgba(255,255,255,0.08); }
.mh-stat .display.m { color: var(--paper); }
.mh-stat-l { font-size: 13px; color: var(--night-muted); margin-top: 4px; max-width: 28ch; }
@media (max-width: 880px) { .mh-mobile-stats { grid-template-columns: 1fr; gap: 24px; } }

/* ============================================================
   AI INSIGHTS
   ============================================================ */
.mh-ai-section { background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); }
.mh-ai-grid { display:grid; grid-template-columns: 1fr 1.15fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.mh-ai-list { display:flex; flex-direction:column; gap: 16px; margin-top: 32px; }
.mh-ai-item { display:flex; gap: 16px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.mh-ai-item:first-child { border-top: 0; padding-top: 0; }
.mh-ai-item-tag { width: 3px; flex-shrink: 0; border-radius: 2px; background: var(--accent); }
.mh-ai-item-t { font-weight: 500; font-size: 15px; }
.mh-ai-item-d { font-size: 13px; color: var(--muted); margin-top: 3px; }
.mh-ai-cta { margin-top: 32px; display:flex; align-items:center; gap: 14px; flex-wrap: wrap; }
.mh-ai-cta .num-mono { font-size: 12px; color: var(--muted); }
.mh-ai-frame { background: #fbf8f1; border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-card); }
.mh-ai-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--hairline); background: rgba(0,0,0,0.02); }
.mh-ai-url { flex: 1; font-family: var(--f-mono); font-size: 11px; color: var(--muted); background: rgba(0,0,0,0.04); border-radius: 6px; padding: 4px 10px; }
.mh-ai-live { font-size: 11px; color: var(--muted); font-family: var(--f-mono); }
.mh-ai-tabs { display:flex; gap: 4px; padding: 3px; background: rgba(0,0,0,0.05); border-radius: 8px; margin-left: auto; }
.mh-ai-tab { border: 0; background: transparent; padding: 5px 12px; font-size: 11.5px; font-weight: 500; color: var(--muted); border-radius: 6px; font-family: inherit; letter-spacing: -0.005em; cursor: pointer; transition: color .15s ease, background .15s ease; }
.mh-ai-tab.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }

/* Rotator — crossfades the insights screenshot with a live-styled AI chat panel,
   mirroring the hero rotator. Box locked to the ai-insights.png aspect (1400×987)
   so both slides share one frame and nothing jumps on swap. */
.mh-ai-rotator { position: relative; aspect-ratio: 1400 / 987; background: #fbf8f1; overflow: hidden; }
.mh-ai-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease, transform 1s ease; transform: scale(1.02); }
.mh-ai-slide.is-active { opacity: 1; transform: scale(1); }
.mh-ai-img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; background: #fbf8f1; }

/* AI chat mock (second slide) */
.mh-aichat { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px; padding: clamp(14px, 2.4vw, 26px); background: #fbf8f1; }
.mh-aichat-thread { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; overflow: hidden; }
.mh-aichat-row { display: flex; gap: 10px; }
.mh-aichat-row.user { justify-content: flex-end; }
.mh-aichat-row.ai { align-items: flex-start; }
.mh-aichat-mark { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.mh-aichat-bubble { font-size: clamp(12px, 1.5vw, 13.5px); line-height: 1.5; border-radius: 14px; padding: 11px 14px; max-width: 84%; }
.mh-aichat-bubble.user { background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
.mh-aichat-bubble.ai { background: #fff; border: 1px solid var(--hairline); color: var(--ink); border-bottom-left-radius: 5px; }
.mh-aichat-bubble.ai p { margin: 0 0 8px; }
.mh-aichat-bubble.ai p:last-child { margin: 0; }
.mh-aichat-bubble strong, .mh-aichat-bubble b { font-weight: 600; color: var(--ink); }
.mh-aichat-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mh-aichat-list li { display: flex; gap: 8px; align-items: flex-start; }
.mh-aichat-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-top: 6px; flex-shrink: 0; }
.mh-aichat-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.mh-aichat-chip { font-size: 12px; font-weight: 500; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--hairline); color: var(--ink); background: #fbf8f1; }
.mh-aichat-chip.accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.mh-aichat-input { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--hairline); border-radius: 12px; background: #fff; }
.mh-aichat-input-text { flex: 1; font-size: 13px; color: var(--muted); }
.mh-aichat-send { width: 28px; height: 28px; border-radius: 8px; background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
@media (max-width: 1080px) { .mh-ai-grid { grid-template-columns: 1fr; } }
/* Phones: the box turns too short for the chat at narrow widths, so drop the
   fixed image aspect and give it a taller fixed height that fits the whole
   conversation. The image (cover, top-left) crops to its meaningful top region. */
@media (max-width: 560px) { .mh-ai-tabs { display: none; } .mh-ai-rotator { aspect-ratio: auto; height: 480px; } }

/* ============================================================
   MIGRATION
   ============================================================ */
.mh-mig-grid { display:grid; grid-template-columns: 1fr 1.15fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.mh-mig-checks { display:flex; flex-direction: column; gap: 14px; margin-top: 36px; }
.mh-mig-check { display:flex; align-items:center; gap: 12px; font-size: 15px; }
.mh-mig-tick { width: 22px; height: 22px; border: 1.5px solid var(--accent); color: var(--accent); border-radius: 50%; display:flex; align-items:center; justify-content:center; font-size: 11px; font-weight: 600; flex-shrink: 0; }
.mh-mig-flow { padding: 28px; background: rgba(0,0,0,0.025); border: 1px solid var(--hairline); border-radius: 18px; display:grid; grid-template-columns: 1fr 60px auto; gap: 18px; align-items: center; }
.mh-mig-sources { display:flex; flex-direction: column; gap: 18px; min-width: 0; }
.mh-mig-cat { display:flex; flex-direction:column; gap: 8px; min-width: 0; }
.mh-mig-pills { display:flex; flex-wrap: wrap; gap: 6px; }
.mh-mig-pill { padding: 7px 11px; background: rgba(255,255,255,0.7); border: 1px solid var(--hairline); border-radius: 8px; font-size: 12px; font-family: var(--f-mono); color: var(--ink); white-space: nowrap; }
.mh-mig-arrow-svg { width: 60px; height: 120px; display: block; }
.mh-mig-target { background: var(--ink); color: var(--paper); padding: 18px 22px; border-radius: 14px; display:flex; align-items:center; gap: 12px; box-shadow: 0 20px 50px -10px rgba(196,77,44,0.25); white-space: nowrap; }
.mh-mig-target-mark { width: 30px; height: 30px; border-radius: 8px; position: relative; flex-shrink: 0; background: var(--accent); }
.mh-mig-target-mark::after { content: ""; position: absolute; inset: 7px; border-radius: 3px; background: rgba(255,255,255,0.95); transform: skewX(-18deg); }
.mh-mig-target-t { font-family: var(--f-display); font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
.mh-mig-target-d { font-size: 11px; color: var(--muted); font-family: var(--f-mono); }
@media (max-width: 1080px) { .mh-mig-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .mh-mig-flow { grid-template-columns: 1fr; } .mh-mig-arrow-svg { display: none; } .mh-mig-target { justify-self: start; } }

/* ============================================================
   STEPS
   ============================================================ */
.mh-steps-head { margin-bottom: 56px; }
.mh-steps-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; }
.mh-step { position: relative; padding-right: 24px; }
.mh-step-n { font-size: clamp(48px, 5vw, 72px); line-height: 1; letter-spacing: -0.04em; color: var(--accent); }
.mh-step-t { font-family: var(--f-display); font-size: 20px; font-weight: 500; letter-spacing: -0.02em; margin-top: 14px; }
.mh-step-d { font-size: 14px; color: var(--muted); margin-top: 8px; line-height: 1.5; max-width: 28ch; }
.mh-step-conn { position: absolute; top: 30px; right: -4px; width: 26px; height: 1px; background: var(--hairline-strong); }
@media (max-width: 860px) { .mh-steps-grid { grid-template-columns: 1fr 1fr; } .mh-step-conn { display: none; } }

/* ============================================================
   DEMO (dynamic — JS renders .mh-demo-card into #demo-mount)
   ============================================================ */
/* Every demo studio opens the same three ways, so the roles are described ONCE in
   .mh-demo-legend and each card carries just its vertical, its name and three doors.
   The old card repeated all three descriptions, six times over — 18 tiles carrying
   six unique sentences, 1558px of section at 1440px wide and 4.2 screens at 375px. */
.mh-demo-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.mh-demo-head .eyebrow { justify-content: center; }
.mh-demo-head .lead { margin-inline: auto; }
.mh-demo-legend { display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2vw, 28px); padding: 26px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); margin-bottom: 44px; }
.mh-demo-legend-t { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); font-weight: 500; }
.mh-demo-legend-d { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 8px 0 0; }
.mh-demo-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2vw, 28px); }
.mh-demo-card { background: #fbf8f1; border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 26px clamp(22px, 2vw, 30px); display:flex; flex-direction:column; }
.mh-demo-card-type { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.mh-demo-card-t { font-family: var(--f-display); font-weight: 500; font-size: clamp(22px, 1.8vw, 26px); letter-spacing: -0.025em; margin: 10px 0 0; }
.mh-demo-roles { display:flex; flex-direction:column; gap: 8px; margin-top: 22px; }
.mh-demo-role { display:flex; align-items:center; justify-content:space-between; gap: 12px; padding: 12px 16px; border-radius: 12px; background: rgba(19,17,14,0.03); border: 1px solid rgba(19,17,14,0.07); transition: background .16s ease, border-color .16s ease, transform .16s ease; }
.mh-demo-role:hover { background: #fff; border-color: var(--hairline-strong); transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.mh-demo-role-t { font-family: var(--f-display); font-weight: 500; font-size: 17px; letter-spacing: -0.015em; }
/* Always visible. The arrow is the only thing marking a row as a link, and the hover
   that used to reveal it never fires on a phone. */
.mh-demo-role-arr { flex-shrink: 0; color: var(--muted); opacity: 0.5; transition: opacity .16s ease, color .16s ease; }
.mh-demo-role:hover .mh-demo-role-arr { opacity: 1; color: var(--accent); }
.mh-demo-note { text-align: center; font-style: italic; font-size: 13.5px; color: var(--muted); margin-top: 44px; }
.mh-demo-loading { text-align: center; color: var(--muted); font-family: var(--f-mono); font-size: 14px; padding: 32px 0; }
@media (max-width: 860px) {
  .mh-demo-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .mh-demo-legend { grid-template-columns: 1fr; gap: 18px; max-width: 460px; margin-inline: auto; margin-bottom: 36px; padding: 22px 0; }
}

/* ============================================================
   PRICING (dynamic — JS renders .mh-tier into #pricing-mount)
   ============================================================ */
.mh-pricing-head { display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 56px; }
.mh-pricing-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.mh-tier { position: relative; padding: 36px 32px; background: rgba(255,255,255,0.5); border: 1px solid var(--hairline); border-radius: 20px; display:flex; flex-direction:column; }
.mh-tier.featured { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-12px); box-shadow: 0 20px 60px -15px rgba(19,17,14,0.35); }
.mh-tier.featured .mh-tier-d, .mh-tier.featured .mh-tier-f { color: var(--night-muted); }
.mh-tier-badge { position: absolute; top: -12px; left: 32px; padding: 4px 10px; font-size: 10px; font-family: var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: #fff; border-radius: 999px; font-weight: 500; background: var(--accent); }
.mh-tier-n { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: inherit; opacity: 0.7; }
.mh-tier.featured .mh-tier-n { color: var(--paper); opacity: 0.8; }
.mh-tier-p { display:flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 12px; }
.mh-tier-p .display { font-size: 60px; letter-spacing: -0.04em; }
.mh-tier.featured .mh-tier-p .display { color: var(--paper); }
.mh-tier-per { color: var(--muted); flex-basis: 100%; font-size: 13px; margin-top: 2px; }
.mh-tier.featured .mh-tier-per { color: var(--night-muted); }
.mh-tier-d { font-size: 14px; color: var(--muted); margin-top: 12px; max-width: 32ch; min-height: 1.2em; }
.mh-tier-cta { margin-top: 24px; align-self: flex-start; }
.mh-tier.featured .btn-primary { background: var(--paper); color: var(--ink); }
.mh-tier-rule { height: 1px; background: var(--hairline); margin: 28px 0 22px; }
.mh-tier.featured .mh-tier-rule { background: rgba(255,255,255,0.12); }
.mh-tier-f { list-style: none; padding: 0; margin: 0; display:flex; flex-direction:column; gap: 10px; font-size: 14px; }
.mh-tier-f li { display:flex; align-items:flex-start; gap: 10px; }
.mh-tier-f li.is-muted { opacity: 0.6; }
.mh-tier-tick { font-weight: 700; color: var(--ink); flex-shrink: 0; }
.mh-tier.featured .mh-tier-tick { color: var(--accent); }
.mh-tier-cross { color: var(--muted); flex-shrink: 0; }
.mh-pricing-foot { display:flex; justify-content:center; gap: 40px; padding-top: 36px; margin-top: 36px; border-top: 1px solid var(--hairline); font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.mh-pricing-foot span { color: var(--accent); }
.mh-tier-skeleton { min-height: 420px; background: linear-gradient(110deg, rgba(255,255,255,0.4) 30%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0.4) 70%); background-size: 200% 100%; animation: mh-shimmer 1.4s ease infinite; }
@keyframes mh-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.mh-pricing-msg { grid-column: 1 / -1; text-align: center; color: var(--muted); font-size: 14px; padding: 24px 0; }
@media (max-width: 1080px) { .mh-pricing-grid { grid-template-columns: 1fr; } .mh-tier.featured { transform: none; } .mh-pricing-head { grid-template-columns: 1fr; gap: 20px; } }

/* ============================================================
   TESTIMONIALS / FEEDBACK
   ============================================================ */
.mh-tst-head { max-width: 720px; margin-bottom: 56px; }
.mh-tst-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.mh-tst-card { margin: 0; padding: 32px; background: rgba(255,255,255,0.55); border: 1px solid var(--hairline); border-radius: 18px; display:flex; flex-direction:column; }
.mh-tst-quote { margin-bottom: 18px; }
.mh-tst-q { font-family: var(--f-display); font-weight: 400; font-size: 19px; line-height: 1.4; letter-spacing: -0.015em; color: var(--ink); margin: 0; flex: 1; }
.mh-tst-by { display:flex; align-items:center; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.mh-tst-av { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff; display:flex; align-items:center; justify-content:center; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; flex-shrink: 0; }
.mh-tst-name { font-weight: 500; font-size: 14px; }
.mh-tst-role { font-size: 12px; color: var(--muted); }
@media (max-width: 980px) { .mh-tst-grid { grid-template-columns: 1fr; } }

/* ============================================================
   FOUNDER
   ============================================================ */
.mh-founder-grid { display:grid; grid-template-columns: 1fr; gap: clamp(40px, 6vw, 80px); align-items: start; }
.mh-founder-body { display:flex; flex-direction:column; gap: 16px; font-size: 16px; line-height: 1.6; color: var(--muted); margin-top: 26px; max-width: 60ch; }
.mh-founder-body strong { color: var(--ink); font-weight: 500; }
.mh-founder-sig { display:flex; align-items:baseline; gap: 14px; margin-top: 26px; }
.mh-founder-sig-mark { font-family: "Instrument Serif", Georgia, serif; font-size: 28px; font-style: italic; color: var(--accent); }
.mh-founder-sig-l { font-family: var(--f-mono); font-size: 11px; color: var(--muted); }
@media (max-width: 980px) { .mh-founder-grid { grid-template-columns: 1fr; } }

/* ============================================================
   FINAL CTA (dark)
   ============================================================ */
.mh-finalcta { position: relative; text-align: center; overflow: hidden; }
.mh-finalcta-bg { position: absolute; inset: 0; pointer-events: none; }
.mh-finalcta-bg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 100%, rgba(196,77,44,0.25), transparent 60%); }
.mh-finalcta-grid { position: relative; }
.mh-finalcta-grid .display { color: var(--night-fg); }
.mh-finalcta-grid .lead { color: var(--night-muted); max-width: 56ch; margin-left: auto; margin-right: auto; margin-top: 26px; }
.mh-finalcta-btns { display:flex; gap: 14px; justify-content:center; margin-top: 36px; flex-wrap: wrap; }
.mh-finalcta-meta { margin-top: 26px; display:flex; align-items:center; justify-content:center; gap: 16px; font-size: 13px; color: var(--night-muted); font-family: var(--f-mono); letter-spacing: 0.02em; }

/* ============================================================
   FOOTER (rich — index page)
   ============================================================ */
.mh-foot { padding: 80px 0 30px; border-top: 1px solid var(--hairline); background: var(--paper); }
.mh-foot-top { display:grid; grid-template-columns: 1fr 2fr; gap: 60px; }
.mh-foot-brand-logo { height: 36px; width: auto; display: block; }
.mh-foot-brand-tag { max-width: 30ch; color: var(--muted); margin-top: 16px; font-size: 14px; line-height: 1.55; }
.mh-foot-langs { margin-top: 24px; }
.mh-foot-langs .num-mono { font-size: 11px; color: var(--muted); }
.mh-foot-cols { display:grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.mh-foot-col ul { list-style: none; padding: 0; margin: 16px 0 0; display:flex; flex-direction:column; gap: 10px; }
.mh-foot-col a { font-size: 14px; color: var(--ink); }
.mh-foot-mono { padding: 70px 0 30px; overflow: hidden; }
.mh-foot-word { font-family: var(--f-display); font-size: clamp(60px, 14vw, 180px); letter-spacing: -0.04em; line-height: 0.85; color: var(--ink); opacity: 0.92; display: block; }
.mh-foot-word em { color: var(--accent); font-style: normal; }
.mh-foot-bot { display:flex; justify-content:space-between; align-items: center; padding-top: 24px; border-top: 1px solid var(--hairline); font-size: 12px; color: var(--muted); flex-wrap: wrap; gap: 14px; }
.mh-foot-bot-links { display:flex; gap: 22px; font-size: 13px; }
@media (max-width: 880px) { .mh-foot-top { grid-template-columns: 1fr; } .mh-foot-cols { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   Maintenance overlay
   ============================================================ */
#maintenance-overlay { font-family: var(--f-body); }

/* ============================================================
   A11y / skip link
   ============================================================ */
.lp-skip-link { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lp-skip-link:focus {
  position: fixed; top: 16px; left: 16px; width: auto; height: auto;
  background: var(--ink); color: var(--paper); padding: 12px 18px;
  border-radius: 8px; z-index: 1000; text-decoration: none; font-weight: 600;
}

/* ============================================================
   Motion — scroll reveals + hero entrance
   Gated by .has-js on <html>. Respects prefers-reduced-motion.
   ============================================================ */
.has-js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.has-js .reveal.is-revealed { opacity: 1; transform: translateY(0); }

.has-js .reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.has-js .reveal-stagger.is-revealed > * { opacity: 1; transform: translateY(0); }
.has-js .reveal-stagger.is-revealed > *:nth-child(1) { transition-delay: 0.05s; }
.has-js .reveal-stagger.is-revealed > *:nth-child(2) { transition-delay: 0.12s; }
.has-js .reveal-stagger.is-revealed > *:nth-child(3) { transition-delay: 0.19s; }
.has-js .reveal-stagger.is-revealed > *:nth-child(4) { transition-delay: 0.26s; }
.has-js .reveal-stagger.is-revealed > *:nth-child(5) { transition-delay: 0.33s; }
.has-js .reveal-stagger.is-revealed > *:nth-child(6) { transition-delay: 0.40s; }
.has-js .reveal-stagger.is-revealed > *:nth-child(7) { transition-delay: 0.47s; }
.has-js .reveal-stagger.is-revealed > *:nth-child(8) { transition-delay: 0.54s; }
.has-js .reveal-stagger.is-revealed > *:nth-child(9) { transition-delay: 0.60s; }
.has-js .reveal-stagger.is-revealed > *:nth-child(n+10) { transition-delay: 0.65s; }

@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.has-js .mh-hero-l > * {
  opacity: 0;
  animation: hero-fade-up 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.has-js .mh-hero-l > *:nth-child(1) { animation-delay: 0.10s; }
.has-js .mh-hero-l > *:nth-child(2) { animation-delay: 0.22s; }
.has-js .mh-hero-l > *:nth-child(3) { animation-delay: 0.34s; }
.has-js .mh-hero-l > *:nth-child(4) { animation-delay: 0.46s; }
.has-js .mh-hero-l > *:nth-child(5) { animation-delay: 0.58s; }
.has-js .mh-hero-r {
  opacity: 0;
  animation: hero-fade-up 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none !important; }
  .has-js .reveal,
  .has-js .reveal.is-revealed,
  .has-js .reveal-stagger > *,
  .has-js .reveal-stagger.is-revealed > *,
  .has-js .mh-hero-l > *,
  .has-js .mh-hero-r {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================
   Legacy footer — shared by /privacy and /terms pages
   ============================================================ */
.lp-footer {
  margin-top: 64px;
  padding: 48px 24px 32px;
  background: var(--paper-2);
  border-top: 1px solid var(--hairline);
  color: var(--ink-2);
  font-family: var(--f-body);
}
.lp-footer-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 32px;
}
.lp-footer-brand { max-width: 320px; }
.lp-footer-logo  { height: 44px; width: auto; display: block; margin-bottom: 12px; }
.lp-footer-tagline { margin: 0; font-size: 0.95rem; color: var(--muted); }
.lp-footer-nav { display: flex; flex-wrap: wrap; gap: 24px; }
.lp-footer-link {
  color: var(--ink-2); text-decoration: none; font-size: 0.95rem; font-weight: 500;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.lp-footer-link:hover { color: var(--ink); border-bottom-color: var(--accent); }
.lp-footer-meta {
  max-width: 1100px; margin: 32px auto 0; padding-top: 20px;
  border-top: 1px solid var(--hairline); font-size: 0.85rem; color: var(--muted); text-align: center;
}

/* ============================================================
   Legal pages (/privacy, /terms)
   ============================================================ */
.legal-page {
  max-width: 760px; margin: 0 auto; padding: 56px 24px 24px;
  font-family: var(--f-body); color: var(--ink-2); line-height: 1.65;
}
.legal-page h1 {
  font-family: var(--f-display); color: var(--ink); font-size: 2.25rem;
  margin: 0 0 8px; letter-spacing: -0.01em;
}
.legal-page .legal-effective { color: var(--muted); font-size: 0.9rem; margin: 0 0 32px; }
.legal-page h2 { font-family: var(--f-display); color: var(--ink); font-size: 1.4rem; margin: 40px 0 12px; }
.legal-page h3 { color: var(--ink); font-size: 1.05rem; margin: 24px 0 8px; }
.legal-page p, .legal-page li { font-size: 1rem; }
.legal-page ul { padding-left: 22px; margin: 12px 0 16px; }
.legal-page li { margin: 6px 0; }
.legal-page a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 2px; }
.legal-page a:hover { color: var(--accent); }
.legal-back { display: inline-block; margin-bottom: 24px; color: var(--muted); font-size: 0.9rem; text-decoration: none; }
.legal-back:hover { color: var(--ink); }

/* ============================================================
   FEATURE PAGES  (/features hub + /features/[slug] detail)
   ============================================================ */

/* Landing + hub feature cards act as links */
a.mh-feature { color: inherit; text-decoration: none; }

/* Top nav row: prominent back link + breadcrumb trail */
.feat-topnav { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.feat-back { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none; border: 1.5px solid var(--hairline); border-radius: 999px; padding: 9px 18px 9px 14px; background: var(--paper, transparent); transition: border-color .15s ease, color .15s ease; }
.feat-back:hover { border-color: var(--accent); color: var(--accent); }
.feat-back-arr { font-size: 15px; line-height: 1; transition: transform .15s ease; }
.feat-back:hover .feat-back-arr { transform: translateX(-3px); }

/* Breadcrumb */
.feat-crumbs { display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 13px; color: var(--muted); margin-bottom: 28px; }
.feat-topnav .feat-crumbs { margin-bottom: 0; }
.feat-crumbs a { color: var(--muted); }
.feat-crumbs a:hover { color: var(--accent); }
.feat-crumbs-here { color: var(--ink); }

/* Hero */
.feat-hero { padding-bottom: clamp(40px, 5vw, 72px); }
.feat-hero-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.feat-hero-grid-solo { grid-template-columns: 1fr; max-width: 780px; }
.feat-hero-icon { width: 56px; height: 56px; color: var(--ink); margin-bottom: 20px; }
.feat-hero-icon svg { width: 56px; height: 56px; }
.feat-h1 { margin-top: 18px; }
.feat-intro { margin-top: 20px; max-width: 48ch; }
.feat-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.feat-shot { position: relative; display: block; width: 100%; cursor: zoom-in; border: 1px solid var(--hairline); border-radius: var(--r-lg); background: #fbf8f1; box-shadow: var(--shadow-card); padding: 12px; font: inherit; text-align: inherit; }
.feat-shot img { display: block; margin: 0 auto; max-width: 100%; max-height: 560px; width: auto; height: auto; border-radius: 12px; }
.feat-shot-hint { position: absolute; right: 22px; bottom: 22px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .02em; color: #fff; background: rgba(20, 16, 12, .72); border-radius: 999px; padding: 6px 12px; pointer-events: none; opacity: .85; transition: opacity .15s ease; }
.feat-shot:hover .feat-shot-hint { opacity: 1; }
.feat-shot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Hero carousel — one screenshot at a time with a thumbnail strip below */
.feat-carousel { display: flex; flex-direction: column; gap: 14px; }
.feat-carousel .feat-shot { display: grid; align-items: center; justify-items: center; }
/* Slides stack in the same cell and cross-fade. The grid sizes to the active slide. */
.feat-slide { grid-area: 1 / 1; display: block; margin: 0 auto; max-width: 100%; max-height: 560px; width: auto; height: auto; border-radius: 12px; opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.feat-slide.is-active { opacity: 1; position: relative; pointer-events: auto; }
.feat-thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.feat-thumb { padding: 0; border: 2px solid var(--hairline); border-radius: 9px; background: #fbf8f1; cursor: pointer; overflow: hidden; line-height: 0; width: 96px; height: 62px; transition: border-color .15s ease, opacity .15s ease; opacity: .7; }
.feat-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.feat-thumb:hover { opacity: 1; border-color: var(--muted); }
.feat-thumb.is-active { opacity: 1; border-color: var(--accent); }
.feat-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Lightbox: full-size screenshot viewer */
.feat-lightbox { border: none; padding: 0; background: transparent; max-width: min(1400px, 94vw); }
.feat-lightbox::backdrop { background: rgba(20, 16, 12, .82); backdrop-filter: blur(2px); }
.feat-lightbox img { display: block; max-width: 100%; max-height: 88vh; width: auto; height: auto; border-radius: 12px; box-shadow: 0 24px 64px rgba(0, 0, 0, .45); }
.feat-lightbox-close { position: fixed; top: 18px; right: 18px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; transition: background .15s ease; }
.feat-lightbox-close:hover { background: rgba(255, 255, 255, .28); }

/* Problem band */
.feat-problem-card { border-left: 3px solid var(--accent); padding: 4px 0 4px 26px; max-width: 780px; }
.feat-problem-text { font-family: var(--f-display); font-weight: 400; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.38; letter-spacing: -0.01em; color: var(--ink-2); margin: 14px 0 0; }

/* Product video — same card as a screenshot, so it reads as part of the same set */
.feat-video-h2 { margin-bottom: 24px; max-width: 900px; }
.feat-video { border: 1px solid var(--hairline); border-radius: var(--r-lg); background: #fbf8f1; box-shadow: var(--shadow-card); padding: 12px; max-width: 1100px; }
.feat-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 12px; background: #13110e; }
.feat-video-caption { max-width: 780px; margin: 18px 0 0; color: var(--ink-2); font-size: 16px; line-height: 1.55; }

/* Section blocks */
.feat-block-alt { background: var(--paper-2); }
.feat-h2 { margin-bottom: 40px; }

/* What you get */
.feat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(22px, 3vw, 44px); }
.feat-item-mark { width: 28px; height: 3px; border-radius: 2px; background: var(--accent); margin-bottom: 16px; }
.feat-item-t { font-family: var(--f-display); font-weight: 500; font-size: 19px; letter-spacing: -0.015em; }
.feat-item-d { font-size: 15px; line-height: 1.6; color: var(--muted); margin-top: 8px; max-width: 44ch; }

/* Why it helps your business */
.feat-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3vw, 40px); }
.feat-benefit { display: flex; gap: 16px; }
.feat-benefit-n { font-size: 13px; color: var(--accent); padding-top: 3px; }
.feat-benefit-t { font-family: var(--f-display); font-weight: 500; font-size: 18px; letter-spacing: -0.015em; }
.feat-benefit-d { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin-top: 6px; }

/* CTA band */
.feat-cta-inner { max-width: 720px; }
.feat-cta-h { margin-top: 18px; }
.feat-cta .lead { margin-top: 18px; color: var(--night-muted); }
.feat-cta .feat-hero-cta { margin-top: 30px; }

/* More of the platform */
.feat-more-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
.feat-more-head .feat-h2 { margin-bottom: 0; }
.feat-more-all { font-size: 14px; white-space: nowrap; }
.feat-more-all:hover { color: var(--accent); }
.feat-more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.feat-chip { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: #fbf8f1; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
.feat-chip:hover { border-color: var(--hairline-strong); transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.feat-chip-icon { display: flex; width: 24px; height: 24px; color: var(--ink); flex: 0 0 auto; }
.feat-chip-icon svg { width: 24px; height: 24px; }
.feat-chip-n { font-size: 14.5px; font-weight: 500; flex: 1; letter-spacing: -0.01em; }
.feat-chip-arr { color: var(--muted); opacity: 0; transform: translate(-3px, 0); transition: opacity .16s ease, transform .16s ease, color .16s ease; }
.feat-chip:hover .feat-chip-arr { opacity: 1; transform: translate(0, 0); color: var(--accent); }

/* Hub */
.feat-hub-h1 { margin-top: 18px; }
.feat-hub-intro { margin-top: 22px; max-width: 62ch; }

@media (max-width: 900px) {
  .feat-hero-grid { grid-template-columns: 1fr; }
  .feat-grid { grid-template-columns: 1fr; }
  .feat-benefits { grid-template-columns: 1fr; gap: 22px; }
  .feat-more-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .feat-more-grid { grid-template-columns: 1fr; }
}

/* Partner referral offer banner (shown above pricing when the visitor arrived via ?ref=CODE) */
.mh-partner-offer { display:flex; align-items:flex-start; gap:12px; margin: 0 auto 28px; max-width: 760px; padding: 14px 18px; border-radius: 14px; background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.35); color: var(--ink); font-size: 15px; line-height: 1.45; }
.mh-partner-offer-ico { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: #10b981; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.mh-partner-offer-code { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
/* Partner offer on a pricing card: list price + offer terms under the discounted display price */
.mh-tier-offer { flex-basis: 100%; font-size: 12px; color: #0f766e; margin-top: 2px; }
.mh-tier.featured .mh-tier-offer { color: #99f6e4; }