/* ============================================================
   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
   Italic accent words: Instrument Serif.

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

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

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

.display {
  font-family: var(--f-display);
  font-weight: 500;
  font-variation-settings: "wdth" 92, "opsz" 96;
  letter-spacing: -0.035em;
  line-height: 0.94;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}
.display.xl { font-size: clamp(44px, 6.4vw, 92px); }
.display.l  { font-size: clamp(40px, 5.6vw, 84px); }
.display.m  { font-size: clamp(32px, 4vw, 56px); }
.display.s  { font-size: clamp(24px, 2.4vw, 36px); }

.display em {
  font-style: italic;
  font-family: "Instrument Serif", "Newsreader", Georgia, serif;
  font-weight: 400;
  font-variation-settings: normal;
  letter-spacing: -0.015em;
  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); }
.mh-hero-glow { position: absolute; inset: -8% -10% -14% -10%; transform: translateZ(-40px); filter: blur(20px); z-index: 0; pointer-events: none; }

.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); }

@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); }
}
@media (max-width: 760px) {
  .mh-hero-stage { transform: none; }
  .mh-hero-r { perspective: none; }
  .mh-hero-tabs { display: none; }
  .mh-hero-url { flex: 1; }
}

/* ============================================================
   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%; display: block; border-radius: 8px; }
.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%; display: block; background: #fbf8f1; }
@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-img { width: 100%; display: block; background: #fbf8f1; }
@media (max-width: 1080px) { .mh-ai-grid { grid-template-columns: 1fr; } }

/* ============================================================
   DATA OWNERSHIP
   ============================================================ */
.mh-data-head { max-width: 720px; margin-bottom: 56px; }
.mh-data-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mh-data-card { padding: 36px 30px; border: 1px solid var(--hairline); border-radius: 18px; background: rgba(255,255,255,0.4); transition: background .2s ease, transform .2s ease; }
.mh-data-card:hover { background: rgba(255,255,255,0.7); }
.mh-data-icon { color: var(--ink); margin-bottom: 24px; }
.mh-data-k { font-size: 11px; color: var(--muted); }
.mh-data-t { font-family: var(--f-display); font-weight: 500; font-size: 22px; letter-spacing: -0.025em; margin-top: 12px; }
.mh-data-d { font-size: 14px; color: var(--muted); margin-top: 12px; line-height: 1.55; }
@media (max-width: 980px) { .mh-data-grid { grid-template-columns: 1fr; } }

/* ============================================================
   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)
   ============================================================ */
.mh-demo-head { text-align: center; max-width: 40ch; margin: 0 auto 56px; }
.mh-demo-head .eyebrow { justify-content: center; }
.mh-demo-head .lead { margin-inline: auto; }
.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: 34px clamp(22px, 2vw, 30px) 28px; display:flex; flex-direction:column; }
.mh-demo-card-t { font-family: var(--f-display); font-weight: 500; font-size: clamp(26px, 2.2vw, 32px); letter-spacing: -0.025em; margin: 0; }
.mh-demo-card-d { font-size: 15px; line-height: 1.5; color: var(--muted); margin: 12px 0 26px; max-width: 30ch; }
.mh-demo-roles { display:flex; flex-direction:column; gap: 12px; margin-top: auto; }
.mh-demo-role { display:flex; flex-direction:column; gap: 5px; padding: 16px 18px; border-radius: var(--r-md); background: rgba(19,17,14,0.025); border: 1px solid transparent; 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-h { display:flex; align-items:center; justify-content:space-between; }
.mh-demo-role-t { font-family: var(--f-display); font-weight: 500; font-size: 17px; letter-spacing: -0.015em; }
.mh-demo-role-arr { font-size: 15px; color: var(--muted); opacity: 0; transform: translate(-3px, 3px); transition: opacity .16s ease, transform .16s ease, color .16s ease; }
.mh-demo-role:hover .mh-demo-role-arr { opacity: 1; transform: translate(0,0); color: var(--accent); }
.mh-demo-role-d { font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.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; } }

/* ============================================================
   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; 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); }
.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-family: "Instrument Serif", Georgia, serif; font-style: italic; }
.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); }