/*
 * PCP Builder Rails host chrome only. The editor (pcp_builder.html) and
 * wizard (wizard.html) ship their own styles and run inside #editor-host.
 * Do not touch editor styles from this file.
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Cal+Sans:wght@600&display=swap");

:root {
  --indigo-50:  #eef2ff;
  --indigo-100: #e0e7ff;
  --indigo-200: #c7d2fe;
  --indigo-300: #a5b4fc;
  --indigo-400: #818cf8;
  --indigo-500: #6366f1;
  --indigo-600: #4f46e5;
  --indigo-700: #4338ca;
  --indigo-800: #3730a3;
  --cyan-400:  #22d3ee;
  --cyan-500:  #06b6d4;
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --emerald-50:  #ecfdf5;
  --emerald-300: #6ee7b7;
  --emerald-500: #10b981;
  --emerald-700: #047857;
  --rose-50:  #fff1f2;
  --rose-300: #fda4af;
  --rose-500: #f43f5e;
  --rose-700: #be123c;
  --amber-50: #fffbeb;
  --amber-300:#fcd34d;
  --amber-700:#b45309;

  --fg: var(--slate-900);
  --muted: var(--slate-500);
  --border: var(--slate-200);
  --card: #ffffff;

  --grad-primary: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);
  --grad-soft:    linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
  --grad-hero:    radial-gradient(60% 90% at 50% 0%, rgba(99,102,241,0.12) 0%, rgba(99,102,241,0) 60%),
                  radial-gradient(50% 70% at 80% 30%, rgba(6,182,212,0.12) 0%, rgba(6,182,212,0) 60%),
                  linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);

  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 20px;
  --shadow-xs: 0 1px 2px rgba(15,23,42,0.05);
  --shadow-sm: 0 4px 12px -2px rgba(15,23,42,0.07), 0 2px 4px -2px rgba(15,23,42,0.04);
  --shadow:    0 12px 28px -8px rgba(15,23,42,0.12), 0 4px 12px -4px rgba(15,23,42,0.06);
  --shadow-lg: 0 24px 48px -12px rgba(15,23,42,0.18), 0 8px 16px -6px rgba(15,23,42,0.08);
  --shadow-glow: 0 12px 36px -6px rgba(99,102,241,0.35);

  --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  color: var(--fg);
  background: var(--grad-soft);
  background-attachment: fixed;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}
/* Dark-mode body — the marketing layout's .mv5 container has
   negative side margins to bleed edge-to-edge, but any extra
   gap from page padding/scrollbar still shows the body bg. Lock
   it to the Rainblur near-black so no white strip ever leaks. */
html.dark, html.dark body {
  background: #0A0A14;
  background-attachment: fixed;
}

a {
  color: var(--indigo-600);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--indigo-700); }
a.subtle { color: var(--slate-600); }
a.subtle:hover { color: var(--indigo-700); }

h1, h2, h3, h4 {
  font-family: "Cal Sans", "Inter", system-ui, sans-serif;
  letter-spacing: -0.02em;
  color: var(--slate-900);
  margin: 0 0 0.5em;
  line-height: 1.2;
}
h1 { font-size: 2.25rem; font-weight: 700; }
h2 { font-size: 1.5rem; font-weight: 700; }
h3 { font-size: 1.125rem; font-weight: 600; }
p { margin: 0 0 1em; color: var(--slate-700); }
small { color: var(--muted); }
code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.9em;
  background: var(--slate-100);
  border: 1px solid var(--slate-200);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  color: var(--slate-700);
}

/* ============================================================
   APP HEADER
   ============================================================ */
header.app-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--slate-200);
  padding: 0.4rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Dark-mode header — the white frosted bar reads as a glaring stripe
   on a dark canvas. Flip to a near-black tinted with the canvas color
   and the standard dark hairline. */
html.dark header.app-header {
  background: rgba(15, 23, 21, 0.85);      /* --canvas with alpha */
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
/* Small version pill that sits next to the logo. Lives outside the brand
   link so it isn't clickable, and is shaped + sized so it reads as a
   subtitle, not a call-to-action. Bump PcpMaker::VERSION to change the
   text — see config/initializers/app_version.rb. */
header.app-header .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
header.app-header .brand-version {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 0.55rem;
  border-radius: 999px;
  background: rgba(99, 91, 255, 0.10);
  color: var(--indigo-600, #4f46e5);
  font-family: "DM Mono", "Inter", monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}
@media (max-width: 640px) {
  header.app-header .brand-version { display: none; }
}

header.app-header .brand a {
  font-family: "Cal Sans", "Inter", sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--slate-900);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  transition: opacity var(--transition);
}
header.app-header .brand a:hover { opacity: 0.85; text-decoration: none; }
header.app-header .brand a.brand-text {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: "Cal Sans", "Inter", sans-serif;
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: -0.025em;
  line-height: 1;
  text-decoration: none;
  color: var(--slate-900);
  transition: opacity var(--transition);
}
header.app-header .brand a.brand-text:hover { opacity: 0.85; text-decoration: none; }
header.app-header .brand a.brand-text .brand-pcp {
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
header.app-header .brand a.brand-text .brand-maker {
  color: var(--slate-900);
  font-weight: 700;
}
@media (max-width: 640px) {
  header.app-header .brand a.brand-text { font-size: 1.2rem; }
}

/* Image logo replaces the "PCP" + "Maker" gradient text wordmark.
   The header is `padding: 0.85rem 1.5rem`, so the available
   content height is ~36px on default font sizing — we let the
   img stretch to that height and width: auto so its native aspect
   carries through. No border, no padded "card" backdrop. */
header.app-header .brand a.brand-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
  transition: opacity var(--transition);
}
header.app-header .brand a.brand-logo:hover { opacity: 0.85; text-decoration: none; }
header.app-header .brand a.brand-logo img {
  display: block;
  height: 50px;
  width: auto;
  object-fit: contain;
}
/* Inline SVG wordmark replacement — same height as the PNG, no
   border, "Maker" word is bright orange so it stays readable on
   both the light marketing canvas and the dark editor/admin header. */
header.app-header .brand a.brand-logo--svg svg {
  display: block;
  height: 44px;
  width: auto;
  overflow: visible;
}
@media (max-width: 640px) {
  header.app-header .brand a.brand-logo img { height: 40px; }
  header.app-header .brand a.brand-logo--svg svg { height: 36px; }
}
header.app-header nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}
header.app-header nav a {
  color: var(--slate-600);
  font-weight: 500;
  font-size: 0.92rem;
  transition: color var(--transition);
}
header.app-header nav a:hover { color: var(--slate-900); }

/* ============================================================
   MAIN / CONTAINER
   ============================================================ */
main.container { max-width: 1040px; margin: 2.25rem auto 3rem; padding: 0 1.5rem; }
main.editor-frame { max-width: none; margin: 0; padding: 0; }

main.container.narrow { max-width: 720px; }
main.container.wide   { max-width: 1240px; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--card);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition), transform var(--transition);
}
.card.hover:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.card h1, .card h2, .card h3 { margin-top: 0; }
.card > h1:first-child,
.card > h2:first-child,
.card > h3:first-child {
  margin-bottom: 0.5rem;
}
.card > p:last-child,
.card > ul:last-child,
.card > .kv:last-child { margin-bottom: 0; }

.card-grad {
  background: var(--grad-primary);
  color: white;
  border: 0;
  box-shadow: var(--shadow-glow);
}
.card-grad h1, .card-grad h2, .card-grad h3 { color: white; }
.card-grad p { color: rgba(255,255,255,0.92); }
.card-grad a { color: white; text-decoration: underline; }

.section-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--indigo-600);
  background: var(--indigo-50);
  border: 1px solid var(--indigo-100);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

/* ============================================================
   FLASH MESSAGES
   ============================================================ */
.flash {
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
  display: flex;
  gap: 0.6rem;
  align-items: center;
  box-shadow: var(--shadow-xs);
}
.flash.alert  {
  background: var(--rose-50);
  color: var(--rose-700);
  border: 1px solid var(--rose-300);
}
.flash.notice {
  background: var(--emerald-50);
  color: var(--emerald-700);
  border: 1px solid var(--emerald-300);
}
.flash::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ============================================================
   FORMS
   ============================================================ */
form .field { display: block; margin-bottom: 1rem; }
form .field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--slate-700);
  margin-bottom: 0.35rem;
}
form .field input[type=email],
form .field input[type=password],
form .field input[type=text],
form .field input[type=tel],
form .field input[type=number],
form .field input[type=url],
form .field input[type=date],
form .field input[type=search],
form .field textarea,
form .field select {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-sm);
  font: inherit;
  background: white;
  color: var(--fg);
  transition: border-color var(--transition), box-shadow var(--transition);
}
form .field input:focus,
form .field textarea:focus,
form .field select:focus {
  outline: none;
  border-color: var(--indigo-500);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.16);
}
form .field input[type=file] {
  font: inherit;
  font-size: 0.9rem;
  color: var(--slate-600);
}
form .field input[type=file]::file-selector-button {
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  background: var(--indigo-50);
  color: var(--indigo-700);
  border: 1px solid var(--indigo-100);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.9rem;
  margin-right: 0.75rem;
  cursor: pointer;
  transition: background var(--transition);
}
form .field input[type=file]::file-selector-button:hover {
  background: var(--indigo-100);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn, form .btn, button.btn, input[type="submit"].btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: var(--grad-primary);
  color: white;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0.65rem 1.15rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
  box-shadow: var(--shadow-glow);
}
.btn:hover, form .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 40px -8px rgba(99,102,241,0.45);
  color: white;
  text-decoration: none;
}
.btn:active { transform: translateY(0); }
/* Dark-mode contrast bump — the indigo→cyan gradient renders too
   pale against the dark editor / admin header, making white text
   blend in. Override to a saturated solid indigo with a glow for
   guaranteed legibility. */
html.dark .btn,
html.dark form .btn,
html.dark button.btn,
html.dark input[type="submit"].btn {
  background: #4F46E5;                    /* indigo-600, solid */
  color: #ffffff;
  box-shadow: 0 8px 24px -6px rgba(99, 102, 241, 0.55);
}
html.dark .btn:hover {
  background: #4338CA;                    /* indigo-700 */
  color: #ffffff;
}

/* Marketing header buttons — the indigo→cyan gradient was leftover
   from an earlier brand; the new Calm Trust theme wants a clean
   solid teal that matches the hero pill. Higher specificity than
   the base .btn so it wins. */
header.app-header nav .btn {
  background: #2C5F5A !important;          /* --accent deep teal */
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px -3px rgba(44, 95, 90, 0.35);
  border: 0;
}
header.app-header nav .btn:hover {
  background: #234A46 !important;          /* --accent-2 hover */
  color: #ffffff !important;
}
html.dark header.app-header nav .btn {
  background: #5EAFA5 !important;          /* lightened teal for dark */
  color: #0F1715 !important;               /* dark canvas text */
  box-shadow: 0 4px 14px -3px rgba(94, 175, 165, 0.45);
}
html.dark header.app-header nav .btn:hover {
  background: #7CC4BA !important;
  color: #0F1715 !important;
}
/* Header "Sign in" subtle link — give it explicit colors so dark
   mode doesn't leave it at default browser link blue. */
header.app-header nav .subtle {
  color: #1E2A28;
  text-decoration: none;
}
header.app-header nav .subtle:hover { color: #2C5F5A; }
html.dark header.app-header nav .subtle { color: #C7D2D1; }
html.dark header.app-header nav .subtle:hover { color: #7CC4BA; }

/* Marketing header sun/moon theme toggle — shows the moon glyph in
   light mode ("go dark") and the sun glyph in dark mode ("go light");
   the other icon is hidden via display: none. */
.mkt-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0.5rem;
  border-radius: 8px;
  cursor: pointer;
  color: #1E2A28;
  transition: background 0.15s ease, color 0.15s ease;
  margin-right: 0.25rem;
}
.mkt-theme-toggle:hover {
  background: rgba(44, 95, 90, 0.08);       /* faint teal wash */
  color: #2C5F5A;
}
.mkt-theme-toggle__sun  { display: none; }
.mkt-theme-toggle__moon { display: inline-block; }
html.dark .mkt-theme-toggle { color: #C7D2D1; }
html.dark .mkt-theme-toggle:hover {
  background: rgba(94, 175, 165, 0.12);
  color: #7CC4BA;
}
html.dark .mkt-theme-toggle__sun  { display: inline-block; }
html.dark .mkt-theme-toggle__moon { display: none; }
.btn:disabled, .btn[disabled] {
  opacity: 0.55;
  cursor: default;
  transform: none;
  box-shadow: var(--shadow-xs);
}

.btn.secondary, form .btn.secondary {
  background: white;
  color: var(--indigo-700);
  border: 1px solid var(--indigo-200);
  box-shadow: var(--shadow-xs);
}
.btn.secondary:hover, form .btn.secondary:hover {
  background: var(--indigo-50);
  border-color: var(--indigo-300);
  box-shadow: var(--shadow-sm);
  color: var(--indigo-800);
}

.btn.ghost {
  background: transparent;
  color: var(--slate-700);
  border: 1px solid transparent;
  box-shadow: none;
}
.btn.ghost:hover {
  background: var(--slate-100);
  color: var(--slate-900);
  box-shadow: none;
  transform: none;
}

.btn.danger {
  background: linear-gradient(135deg, #f43f5e 0%, #be123c 100%);
  box-shadow: 0 10px 28px -6px rgba(244,63,94,0.35);
}
.btn.danger:hover { box-shadow: 0 16px 36px -6px rgba(244,63,94,0.45); }

.btn-lg { padding: 0.85rem 1.5rem; font-size: 1rem; }
.btn-sm { padding: 0.4rem 0.75rem; font-size: 0.82rem; }

/* ============================================================
   FOOTER
   ============================================================ */
footer.app-footer {
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);
  padding: 2.5rem 1rem 3rem;
  border-top: 1px solid var(--slate-200);
  margin-top: 3rem;
  background: rgba(255,255,255,0.5);
}
footer.app-footer a { color: var(--slate-600); margin: 0 0.25rem; }
footer.app-footer a:hover { color: var(--indigo-700); }

/* ============================================================
   KV (definition lists)
   ============================================================ */
.kv {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0.55rem 1.25rem;
  font-size: 0.95rem;
}
.kv dt {
  color: var(--slate-500);
  font-weight: 500;
}
.kv dd {
  margin: 0;
  color: var(--slate-900);
  font-weight: 500;
}

/* ============================================================
   EVENTS / LISTS
   ============================================================ */
.events { list-style: none; padding: 0; margin: 0; }
.events li {
  padding: 0.7rem 0.25rem;
  border-bottom: 1px solid var(--slate-100);
  font-size: 0.92rem;
  color: var(--slate-600);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
}
.events li:last-child { border-bottom: 0; }
.events li strong {
  color: var(--slate-900);
  background: var(--slate-100);
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ============================================================
   EDITOR HOST
   ============================================================ */
#editor-host {
  width: 100%;
  height: 100vh;
  border: 0;
  background: white;
  display: block;
}

/* Release-channel banner — sits above the iframe on every non-production
   editor channel (DV / Testing / Beta / Legacy). Colour comes from the
   stage-X modifier class so all four share the same layout. */
.editor-stage-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.editor-stage-banner strong {
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 1px 8px;
  border-radius: 4px;
}
.editor-stage-banner a {
  margin-left: auto;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.editor-stage-banner a:hover { color: #fff; }
.editor-stage-banner .esb-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
}

/* Per-stage palettes — red DV → orange Testing → yellow Beta → grey
   Legacy. Production has no banner. Each row: bg / fg / strong-bg /
   link-fg / dot-bg + glow. */
.editor-stage-banner.stage-dv      { background: #7f1d1d; color: #fee2e2; }
.editor-stage-banner.stage-dv      strong { background: #b91c1c; }
.editor-stage-banner.stage-dv      a      { color: #fecaca; }
.editor-stage-banner.stage-dv      .esb-dot { background: #ef4444; box-shadow: 0 0 8px rgba(239, 68, 68, .8); }

.editor-stage-banner.stage-testing { background: #7c2d12; color: #ffedd5; }
.editor-stage-banner.stage-testing strong { background: #c2410c; }
.editor-stage-banner.stage-testing a      { color: #fed7aa; }
.editor-stage-banner.stage-testing .esb-dot { background: #fb923c; box-shadow: 0 0 8px rgba(251, 146, 60, .8); }

.editor-stage-banner.stage-beta    { background: #78350f; color: #fef3c7; }
.editor-stage-banner.stage-beta    strong { background: #b45309; }
.editor-stage-banner.stage-beta    a      { color: #fde68a; }
.editor-stage-banner.stage-beta    .esb-dot { background: #fbbf24; box-shadow: 0 0 8px rgba(251, 191, 36, .8); }

.editor-stage-banner.stage-legacy  { background: #374151; color: #e5e7eb; }
.editor-stage-banner.stage-legacy  strong { background: #4b5563; }
.editor-stage-banner.stage-legacy  a      { color: #d1d5db; }
.editor-stage-banner.stage-legacy  .esb-dot { background: #9ca3af; box-shadow: 0 0 8px rgba(156, 163, 175, .6); }

/* Push the iframe down so the banner doesn't cover the toolbar. */
body:has(.editor-stage-banner) #editor-host { height: calc(100vh - 30px); margin-top: 30px; }

.editor-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: calc(100vh - 56px);
  text-align: center;
  padding: 2rem;
  color: var(--muted);
}
.editor-empty code {
  background: var(--slate-100);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}

/* ============================================================
   USER MENU (avatar + dropdown panel)
   ============================================================ */
.user-menu { position: relative; }

/* Issue #24: standalone admin-header theme toggle. Shows the moon
   icon in light mode (suggesting "go dark") and the sun icon in dark
   mode (suggesting "go light"). Mutually exclusive by default; html.dark
   flips which is visible. */
.admin-theme-toggle__sun  { display: none; }
.admin-theme-toggle__moon { display: inline-block; }
html.dark .admin-theme-toggle__sun  { display: inline-block; }
html.dark .admin-theme-toggle__moon { display: none; }

/* Issue #20 follow-up: the admin dashboard / users / vendors views
   are hardcoded with dark-mode utility colors (`text-white`,
   `glass-card`, `text-gray-400` over translucent dark fills). In light
   mode those become invisible — white text on a light body, near-
   transparent panels with no contrast.
   Rather than rewrite every admin partial, this shim remaps the
   common dark-only utilities to light-friendly values whenever the
   page is in light mode AND the element is inside the admin <main>.
   The selector specificity (3 classes + 1 element) reliably beats
   the plain Tailwind utility, so we don't need !important. The shim
   is scoped to `html:not(.dark) main` so editor / marketing pages
   (which use these same utilities legitimately in dark mode) are
   untouched. */
html:not(.dark) main .text-white       { color: rgb(17, 24, 39); }   /* gray-900 */
html:not(.dark) main .text-gray-100,
html:not(.dark) main .text-gray-200    { color: rgb(31, 41, 55); }   /* gray-800 */
html:not(.dark) main .text-gray-300    { color: rgb(55, 65, 81); }   /* gray-700 */
html:not(.dark) main .text-gray-400    { color: rgb(75, 85, 99); }   /* gray-600 */
html:not(.dark) main .text-gray-500    { color: rgb(107, 114, 128); }/* gray-500 */
html:not(.dark) main .text-indigo-400  { color: rgb(79, 70, 229); }  /* indigo-600 */
html:not(.dark) main .text-indigo-300  { color: rgb(67, 56, 202); }  /* indigo-700 */
html:not(.dark) main .glass-card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgb(229, 231, 235);   /* gray-200 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  color: rgb(17, 24, 39);
}
html:not(.dark) main .bg-white\/5,
html:not(.dark) main .hover\:bg-white\/5:hover,
html:not(.dark) main .hover\:bg-white\/25:hover { background-color: rgba(0, 0, 0, 0.04); }
html:not(.dark) main .border-white\/5,
html:not(.dark) main .border-white\/30          { border-color: rgba(0, 0, 0, 0.08); }
html:not(.dark) main .divide-white\/5 > * + *   { border-color: rgba(0, 0, 0, 0.06); }
/* Soft-on-dark accent chips (emerald/amber/rose/sky/etc. /15-/20
   backgrounds with /200-/300 text) don't read on white. Bump the
   background opacity and darken the text two stops. */
html:not(.dark) main [class*="bg-emerald-500/15"] { background-color: rgb(209, 250, 229); color: rgb(6, 78, 59); }
html:not(.dark) main [class*="bg-amber-500/15"]   { background-color: rgb(254, 243, 199); color: rgb(120, 53, 15); }
html:not(.dark) main [class*="bg-rose-500/15"]    { background-color: rgb(254, 226, 226); color: rgb(157, 23, 77); }
html:not(.dark) main [class*="bg-sky-500/15"]     { background-color: rgb(224, 242, 254); color: rgb(7, 89, 133); }
html:not(.dark) main [class*="bg-indigo-500/15"]  { background-color: rgb(224, 231, 255); color: rgb(55, 48, 163); }
html:not(.dark) main [class*="bg-purple-500/15"]  { background-color: rgb(243, 232, 255); color: rgb(88, 28, 135); }
html:not(.dark) main [class*="bg-slate-500/15"]   { background-color: rgb(241, 245, 249); color: rgb(30, 41, 59); }

.user-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0.45rem 0.55rem;
  cursor: pointer;
  color: var(--slate-600);
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), color var(--transition);
}
.user-trigger.dots { padding: 0.4rem 0.5rem; }
.user-trigger:hover {
  background: var(--slate-100);
  border-color: var(--slate-200);
  color: var(--slate-900);
}
.user-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.25);
}
.user-menu:has(.user-menu-panel.open) .user-trigger {
  background: var(--indigo-50);
  border-color: var(--indigo-200);
  color: var(--indigo-700);
}

/* Avatar circle */
.avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--grad-primary);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Cal Sans", "Inter", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  box-shadow: 0 4px 12px -3px rgba(99,102,241,0.4);
}

/* Panel */
.user-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 280px;
  background: rgba(255,255,255,0.97);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border: 1px solid var(--slate-200);
  border-radius: 16px;
  box-shadow:
    0 24px 48px -12px rgba(15,23,42,0.18),
    0 8px 16px -6px rgba(15,23,42,0.08),
    0 1px 0 rgba(255,255,255,0.6) inset;
  padding: 0.5rem;
  display: none;
  z-index: 60;
  transform-origin: top right;
  animation: panelIn 200ms cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.user-menu-panel.open { display: block; }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.user-panel-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 0.9rem;
  margin-bottom: 0.25rem;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(99,102,241,0.06), rgba(6,182,212,0.06));
  border: 1px solid var(--indigo-100);
}
.user-panel-head .avatar { width: 40px; height: 40px; font-size: 1.05rem; }
.user-info { min-width: 0; flex: 1; }
.user-name {
  font-weight: 700;
  color: var(--slate-900);
  font-size: 0.92rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-email {
  font-size: 0.78rem;
  color: var(--slate-500);
  margin-top: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-section {
  padding: 0.4rem 0;
  border-top: 1px solid var(--slate-100);
}
.menu-section:first-of-type { border-top: 0; padding-top: 0.55rem; }
.menu-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-400);
  padding: 0.35rem 0.85rem 0.45rem;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.55rem 0.85rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--slate-700);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.menu-item:hover {
  background: var(--indigo-50);
  color: var(--indigo-800);
  text-decoration: none;
  transform: translateX(2px);
}
.menu-item .menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--slate-100);
  color: var(--slate-600);
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition);
}
.menu-item:hover .menu-icon {
  background: var(--indigo-100);
  color: var(--indigo-700);
}
.menu-item.danger { color: var(--rose-700); }
.menu-item.danger .menu-icon { background: var(--rose-50); color: var(--rose-700); }
.menu-item.danger:hover { background: var(--rose-50); color: var(--rose-700); transform: translateX(2px); }
.menu-item.danger:hover .menu-icon { background: var(--rose-100); }

/* button_to form wrapper for Sign out */
form.button_to.menu-item, form.button_to:has(.menu-item) { margin: 0; padding: 0; display: block; }
form.button_to .menu-item { width: 100%; }
.menu-section form.button_to { margin: 0; padding: 0; }
.menu-section form.button_to button.menu-item { width: 100%; }

/* ============================================================
   KEBAB MENU (legacy — kept for editor toolbar / other surfaces)
   ============================================================ */
.kebab { position: relative; }
.kebab-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--slate-600);
  padding: 0.4rem 0.5rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.kebab-btn:hover {
  background: var(--slate-100);
  color: var(--slate-900);
  border-color: var(--slate-200);
}
.kebab-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  background: var(--card);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0.4rem 0;
  display: none;
  z-index: 50;
  animation: menuIn 140ms ease-out;
}
@keyframes menuIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.kebab-menu.open { display: block; }
.kebab-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1rem;
  font-size: 0.92rem;
  color: var(--slate-700);
  text-decoration: none;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  margin: 0;
  transition: background var(--transition), color var(--transition);
}
.kebab-item:hover {
  background: var(--indigo-50);
  color: var(--indigo-800);
  text-decoration: none;
}
.kebab-sep { height: 1px; background: var(--slate-200); margin: 0.4rem 0; }
.kebab-item-button { color: var(--rose-700); }
form.button_to.kebab-item, .kebab-menu form.button_to { display: block; margin: 0; padding: 0; }
.kebab-menu form.button_to button {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 0.55rem 1rem;
  font: inherit;
  font-size: 0.92rem;
  color: var(--rose-700);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background var(--transition);
}
.kebab-menu form.button_to button:hover { background: var(--rose-50); }

/* ============================================================
   MARKETING / HERO
   ============================================================ */
.hero {
  background: var(--grad-hero);
  border-radius: var(--radius-lg);
  padding: 3.5rem 3rem;
  text-align: center;
  border: 1px solid var(--slate-200);
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}
.hero::before, .hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.hero::before {
  width: 280px; height: 280px;
  background: radial-gradient(circle, #6366f1 0%, transparent 70%);
  top: -80px; left: -80px;
}
.hero::after {
  width: 240px; height: 240px;
  background: radial-gradient(circle, #06b6d4 0%, transparent 70%);
  bottom: -60px; right: -60px;
}
.hero > * { position: relative; z-index: 1; }
.hero h1 {
  font-size: 2.6rem;
  line-height: 1.1;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #0f172a 0%, #4338ca 60%, #06b6d4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.03em;
}
.hero p.lead {
  font-size: 1.2rem;
  color: var(--slate-600);
  max-width: 640px;
  margin: 0 auto 2rem;
}
.hero .cta-row {
  display: flex;
  gap: 0.85rem;
  justify-content: center;
  flex-wrap: wrap;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
.feature {
  background: var(--card);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition), box-shadow var(--transition);
}
.feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.feature .feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--indigo-50);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--indigo-600);
  font-size: 1.4rem;
  margin-bottom: 0.85rem;
}
.feature.cyan .feature-icon { background: #cffafe; color: var(--cyan-500); }
.feature.emerald .feature-icon { background: var(--emerald-50); color: var(--emerald-700); }
.feature.rose .feature-icon { background: var(--rose-50); color: var(--rose-700); }
.feature.amber .feature-icon { background: var(--amber-50); color: var(--amber-700); }
.feature h3 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  color: var(--slate-900);
}
.feature p {
  margin: 0;
  color: var(--slate-600);
  font-size: 0.92rem;
  line-height: 1.55;
}

/* ============================================================
   BADGES / PILLS
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--slate-100);
  color: var(--slate-700);
}
.badge.green   { background: var(--emerald-50);  color: var(--emerald-700); border: 1px solid var(--emerald-300); }
.badge.amber   { background: var(--amber-50);    color: var(--amber-700);   border: 1px solid var(--amber-300); }
.badge.rose    { background: var(--rose-50);     color: var(--rose-700);    border: 1px solid var(--rose-300); }
.badge.indigo  { background: var(--indigo-50);   color: var(--indigo-700);  border: 1px solid var(--indigo-200); }

/* ============================================================
   AUTH (centered cards)
   ============================================================ */
.auth-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
  padding: 2rem 1rem;
}
.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--card);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2.25rem;
  box-shadow: var(--shadow-lg);
}
.auth-card h1 {
  font-size: 1.7rem;
  margin-bottom: 0.4rem;
  text-align: center;
}
.auth-card .auth-sub {
  text-align: center;
  color: var(--slate-500);
  margin-bottom: 1.75rem;
  font-size: 0.95rem;
}
.auth-card .btn { width: 100%; padding: 0.75rem 1rem; }
.auth-card .auth-foot {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--slate-500);
}
.auth-shell .auth-card form .field input { padding: 0.7rem 0.9rem; }

/* ============================================================
   GRID HELPERS
   ============================================================ */
.grid { display: grid; gap: 1.25rem; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ============================================================
   STAT CARDS
   ============================================================ */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  margin: 0 0 1.5rem;
}
.stat {
  background: var(--card);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow-xs);
  position: relative;
}
.stat .stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-500);
}
.stat .stat-value {
  margin-top: 0.35rem;
  font-family: "Cal Sans", "Inter", sans-serif;
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--slate-900);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.stat .stat-sub {
  margin-top: 0.25rem;
  font-size: 0.82rem;
  color: var(--slate-500);
}

/* ============================================================
   THEMES — body.theme-X overrides the CSS variable tokens.
   Designed after popular AI-chat GUI palettes (LobeChat, Chatbox,
   OpenWebUI, Claude, Poe, etc.). Applied via localStorage on every
   page load; switchable from the /themes gallery.
   ============================================================ */

/* 1. Indigo (default) — modern SaaS, indigo→cyan. Endpoints darkened
   one shade so white button text passes AA on BOTH halves of the
   gradient (was indigo-500 4.47 + cyan-500 2.59 → now indigo-600
   5.95 + cyan-700 5.45). */
body.theme-indigo {
  --fg: #0f172a; --muted: #64748b; --border: #e2e8f0; --card: #ffffff;
  --grad-primary: linear-gradient(135deg, #4f46e5 0%, #0e7490 100%);
  --grad-soft:    linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
  --shadow-glow:  0 12px 36px -6px rgba(79,70,229,0.35);
}

/* 2. Sunset — warm coral/peach with navy depth (Poe-inspired). Both
   gradient stops darkened (orange-500→700, pink-500→700) so button
   text isn't washed (was 2.80 / 3.53 → now 5.70 / 6.24). Soft glow
   tinted to match the new primary. */
body.theme-sunset {
  --fg: #1f1b3d; --muted: #6b6680; --border: #f4d4c5; --card: #fffaf6;
  --grad-primary: linear-gradient(135deg, #c2410c 0%, #be185d 100%);
  --grad-soft:    linear-gradient(180deg, #fff7ed 0%, #ffe4e6 100%);
  --shadow-glow:  0 12px 36px -6px rgba(194,65,12,0.35);
}

/* 4. Forest — emerald + warm sand (calm, organic). Primary darkened
   from #10b981 → #047857 so white button text reads cleanly (was
   2.54, now 5.86 — AA pass). */
body.theme-forest {
  --fg: #14532d; --muted: #4a7c59; --border: #d6e6d6; --card: #fbfdf8;
  --grad-primary: linear-gradient(135deg, #047857 0%, #065f46 100%);
  --grad-soft:    linear-gradient(180deg, #f7fbf3 0%, #ecfdf5 100%);
  --shadow-glow:  0 12px 36px -6px rgba(4,120,87,0.35);
}

/* 5. Mono — refined grayscale (Claude-inspired) */
body.theme-mono {
  --fg: #18181b; --muted: #71717a; --border: #e4e4e7; --card: #ffffff;
  --grad-primary: linear-gradient(135deg, #18181b 0%, #52525b 100%);
  --grad-soft:    linear-gradient(180deg, #fafafa 0%, #f4f4f5 100%);
  --shadow-glow:  0 10px 24px -8px rgba(24,24,27,0.25);
}

/* 6. Aurora — pink → violet → teal triple gradient (LobeChat). All
   three gradient stops bumped down one notch (pink-500→600,
   violet-500→700, cyan-500→700) so white button text passes AA
   across the whole sweep (was 3.53 / 4.99 / 2.59 → now 4.55 / 6.91
   / 5.45). `--muted` set to deep violet so any heading using it
   passes too (was 3.21, now 5.36). */
body.theme-aurora {
  --fg: #1e1b4b; --muted: #7c3aed; --border: #e9d5ff; --card: #fefcff;
  --grad-primary: linear-gradient(135deg, #db2777 0%, #6d28d9 50%, #0e7490 100%);
  --grad-soft:    linear-gradient(180deg, #fdf4ff 0%, #ede9fe 100%);
  --shadow-glow:  0 12px 36px -6px rgba(109,40,217,0.4);
}

/* 7. Solarized — warm yellow + olive on cream (academic). Gradient
   stops darkened (yellow-700→800, orange-600→800) so white button
   text passes AA on both halves (was 3.21 / 3.85 → now 5.10 / 7.32). */
body.theme-solarized {
  --fg: #586e75; --muted: #93a1a1; --border: #eee8d5; --card: #fdf6e3;
  --grad-primary: linear-gradient(135deg, #a16207 0%, #9a3412 100%);
  --grad-soft:    linear-gradient(180deg, #fdf6e3 0%, #eee8d5 100%);
  --shadow-glow:  0 12px 36px -6px rgba(161,98,7,0.3);
}

/* 8. Crimson — deep red + cream (serious, editorial) */
body.theme-crimson {
  --fg: #450a0a; --muted: #7f1d1d; --border: #fecaca; --card: #fffbfb;
  --grad-primary: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
  --grad-soft:    linear-gradient(180deg, #fef2f2 0%, #fee2e2 100%);
  --shadow-glow:  0 12px 36px -6px rgba(220,38,38,0.32);
}

/* 9. Mint — soft teal + offwhite (friendly, fresh). Primary stops
   pushed one more notch (teal-600→700, cyan-600→700) so white button
   text passes AA on both halves (was 3.74 / 3.68 → now 5.16 / 5.45). */
body.theme-mint {
  --fg: #134e4a; --muted: #0f766e; --border: #ccfbf1; --card: #f0fdfa;
  --grad-primary: linear-gradient(135deg, #0f766e 0%, #0e7490 100%);
  --grad-soft:    linear-gradient(180deg, #f0fdfa 0%, #ccfbf1 100%);
  --shadow-glow:  0 12px 36px -6px rgba(15,118,110,0.35);
}

body.theme-midnight .menu-item .menu-icon { background: #334155; color: #cbd5e1; }
body.theme-terminal .menu-item .menu-icon { background: #166534; color: #86efac; }

/* ============================================================
   LANDING / ANIMATIONS
   ============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-24px) rotate(4deg); }
}
@keyframes floatYAlt {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(20px) rotate(-3deg); }
}
@keyframes shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 12px 36px -6px rgba(99,102,241,0.35); }
  50%      { box-shadow: 0 22px 56px 0px rgba(99,102,241,0.55); }
}
@keyframes spinSlow {
  to { transform: rotate(360deg); }
}
@keyframes blink {
  0%, 70%, 100% { opacity: 1; }
  80%, 90%      { opacity: 0; }
}
@keyframes drift {
  0%   { transform: translate(0,0) scale(1); }
  33%  { transform: translate(40px,-20px) scale(1.05); }
  66%  { transform: translate(-30px,30px) scale(0.97); }
  100% { transform: translate(0,0) scale(1); }
}

.landing {
  position: relative;
  overflow: hidden;
  padding: 0;
  margin: -2.25rem -1.5rem 0; /* eat the main.container top margin so hero sits right under the header */
}
.landing > section { position: relative; z-index: 2; }

.landing-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.landing-bg .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.45;
  animation: drift 20s ease-in-out infinite;
}
.landing-bg .blob.one   { width: 380px; height: 380px; top: -100px; left: -100px;
  background: radial-gradient(circle, #6366f1 0%, transparent 70%); animation-delay: 0s; }
.landing-bg .blob.two   { width: 320px; height: 320px; top: 30%; right: -80px;
  background: radial-gradient(circle, #06b6d4 0%, transparent 70%); animation-delay: 4s; }
.landing-bg .blob.three { width: 280px; height: 280px; bottom: -100px; left: 30%;
  background: radial-gradient(circle, #a78bfa 0%, transparent 70%); animation-delay: 8s; }

.landing-hero {
  text-align: center;
  padding: 2.5rem 2rem 3.5rem;
  position: relative;
  z-index: 2;
}
.landing-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--indigo-200);
  color: var(--indigo-700);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  opacity: 0;
  animation: fadeUp 600ms 100ms ease-out forwards;
  box-shadow: var(--shadow-xs);
}
.landing-hero .eyebrow .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--emerald-500);
  box-shadow: 0 0 0 4px rgba(16,185,129,0.18);
  animation: blink 2.4s ease-in-out infinite;
}
.landing-hero h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 1.25rem auto 1.25rem;
  max-width: 900px;
  font-weight: 700;
  opacity: 0;
  animation: fadeUp 700ms 250ms ease-out forwards;
}
.landing-hero h1 .grad {
  background: linear-gradient(90deg, #4338ca, #06b6d4, #6366f1, #4338ca);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 6s linear infinite;
}
.landing-hero p.lead {
  font-size: 1.18rem;
  color: var(--slate-600);
  max-width: 640px;
  margin: 0 auto 2rem;
  opacity: 0;
  animation: fadeUp 700ms 400ms ease-out forwards;
}
.landing-hero .cta-row {
  display: inline-flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  animation: fadeUp 700ms 550ms ease-out forwards;
}
.landing-hero .cta-row .btn { animation: pulseGlow 4s ease-in-out infinite; }
.landing-hero .trust {
  margin-top: 2.5rem;
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--slate-500);
  opacity: 0;
  animation: fadeUp 700ms 700ms ease-out forwards;
}
.landing-hero .trust span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.landing-hero .trust span::before {
  content: "✓";
  display: inline-block;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--emerald-500);
  color: white;
  text-align: center;
  line-height: 18px;
  font-size: 0.7rem;
  font-weight: 700;
}

.landing-preview {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
  opacity: 0;
  animation: fadeUp 800ms 850ms ease-out forwards;
}
.landing-preview .window {
  background: white;
  border-radius: var(--radius-lg);
  border: 1px solid var(--slate-200);
  box-shadow: 0 40px 80px -20px rgba(15,23,42,0.25), 0 16px 36px -12px rgba(99,102,241,0.18);
  overflow: hidden;
  position: relative;
  transform: perspective(1200px) rotateX(2deg);
}
.landing-preview .window-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--slate-100);
  border-bottom: 1px solid var(--slate-200);
  padding: 0.7rem 1rem;
}
.landing-preview .window-bar .dot {
  width: 11px; height: 11px; border-radius: 50%;
}
.landing-preview .window-bar .dot.r { background: #fb7185; }
.landing-preview .window-bar .dot.y { background: #fcd34d; }
.landing-preview .window-bar .dot.g { background: #4ade80; }
.landing-preview .window-bar .url {
  margin-left: 1rem;
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.78rem;
  color: var(--slate-500);
  font-family: ui-monospace, monospace;
  flex: 1;
  max-width: 380px;
  text-align: center;
}
.landing-preview .window-body {
  padding: 1.5rem;
  background: linear-gradient(180deg, #f8fafc, white);
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1rem;
  min-height: 280px;
}
.landing-preview .side-list {
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.landing-preview .side-list .item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--slate-600);
}
.landing-preview .side-list .item.active {
  background: var(--indigo-50);
  color: var(--indigo-700);
  font-weight: 600;
}
.landing-preview .side-list .item .pip {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--slate-300);
}
.landing-preview .side-list .item.active .pip { background: var(--indigo-500); }
.landing-preview .main-area {
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.landing-preview .row {
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--slate-100), var(--slate-200), var(--slate-100));
  background-size: 200% 100%;
  animation: shimmer 4s linear infinite;
}
.landing-preview .row.w70 { width: 70%; }
.landing-preview .row.w50 { width: 50%; }
.landing-preview .row.w85 { width: 85%; }
.landing-preview .row.w35 { width: 35%; }
.landing-preview .pill-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.4rem;
}
.landing-preview .pill {
  height: 26px;
  border-radius: 999px;
  background: var(--indigo-50);
  flex: 1;
}
.landing-preview .pill.cy  { background: #cffafe; }
.landing-preview .pill.em  { background: var(--emerald-50); }
.landing-preview .pill.rs  { background: var(--rose-50); }
.landing-preview .pill.am  { background: var(--amber-50); }

.landing-features {
  padding: 4rem 1.5rem;
  text-align: center;
  position: relative;
  z-index: 2;
}
.landing-features h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin-bottom: 0.5rem;
}
.landing-features p.sub {
  color: var(--slate-600);
  max-width: 580px;
  margin: 0 auto 2.5rem;
  font-size: 1.05rem;
}
.landing-features .feature-grid {
  max-width: 1100px;
  margin: 0 auto;
}
.landing-features .feature {
  text-align: left;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms ease-out, transform 700ms ease-out, box-shadow var(--transition);
}
.landing-features .feature.reveal {
  opacity: 1;
  transform: translateY(0);
}
.landing-features .feature .feature-icon {
  font-size: 1.6rem;
  width: 48px; height: 48px;
  animation: floatY 6s ease-in-out infinite;
}
.landing-features .feature:nth-child(2n) .feature-icon { animation: floatYAlt 7s ease-in-out infinite; }

/* Stats strip */
.landing-stats {
  margin: 0 1.5rem 3rem;
  padding: 2rem;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  text-align: center;
}
.landing-stats .stat-tile {
  position: relative;
}
.landing-stats .stat-num {
  font-family: "Cal Sans", "Inter", sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
  line-height: 1;
}
.landing-stats .stat-lbl {
  margin-top: 0.4rem;
  font-size: 0.88rem;
  color: var(--slate-600);
  font-weight: 500;
}

/* How it works */
.landing-how {
  padding: 4rem 1.5rem;
  text-align: center;
  position: relative;
  z-index: 2;
}
.landing-how h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin-bottom: 0.5rem;
}
.landing-how p.sub {
  color: var(--slate-600);
  max-width: 580px;
  margin: 0 auto 2.5rem;
}
.landing-how .steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}
.landing-how .step {
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  text-align: left;
  position: relative;
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition), box-shadow var(--transition);
}
.landing-how .step:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.landing-how .step-num {
  position: absolute;
  top: -18px;
  left: 1.5rem;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--grad-primary);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Cal Sans", "Inter", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  box-shadow: var(--shadow-glow);
}
.landing-how .step h3 {
  margin-top: 1.25rem;
  font-size: 1.15rem;
}
.landing-how .step p {
  color: var(--slate-600);
  font-size: 0.95rem;
  margin: 0;
}

/* Pricing tiers */
.landing-pricing {
  padding: 4rem 1.5rem;
  text-align: center;
  position: relative;
  z-index: 2;
}
.landing-pricing h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin-bottom: 0.5rem;
}
.landing-pricing p.sub {
  color: var(--slate-600);
  max-width: 580px;
  margin: 0 auto 2.5rem;
}
.landing-pricing .tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}
.landing-pricing .tier {
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  text-align: left;
  box-shadow: var(--shadow-xs);
  position: relative;
  transition: transform var(--transition), box-shadow var(--transition);
}
.landing-pricing .tier:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.landing-pricing .tier.featured {
  border: 0;
  background: var(--grad-primary);
  color: white;
  box-shadow: var(--shadow-lg);
  transform: scale(1.04);
}
.landing-pricing .tier.featured h3,
.landing-pricing .tier.featured .price,
.landing-pricing .tier.featured ul li { color: white; }
.landing-pricing .tier.featured ul li::before { background: white; }
.landing-pricing .tier .badge-feat {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  color: var(--indigo-700);
  padding: 0.25rem 0.85rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
}
.landing-pricing .tier h3 {
  font-size: 1.15rem;
  margin-bottom: 0.35rem;
}
.landing-pricing .tier .price {
  font-family: "Cal Sans", "Inter", sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0.5rem 0;
}
.landing-pricing .tier .price small {
  font-size: 0.85rem;
  font-weight: 500;
  color: inherit;
  opacity: 0.7;
}
.landing-pricing .tier p.tag {
  font-size: 0.92rem;
  color: var(--slate-600);
  margin-bottom: 1rem;
}
.landing-pricing .tier.featured p.tag { color: rgba(255,255,255,0.88); }
.landing-pricing .tier ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0 1.5rem;
  font-size: 0.92rem;
}
.landing-pricing .tier ul li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.35rem 0;
  color: var(--slate-700);
}
.landing-pricing .tier ul li::before {
  content: "";
  flex-shrink: 0;
  margin-top: 0.4rem;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--emerald-500);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='white' d='M6.5 11L3 7.5l1.4-1.4L6.5 8.2l5.1-5.1L13 4.5z'/></svg>");
  background-size: contain;
}
.landing-pricing .tier .btn {
  width: 100%;
  justify-content: center;
}
.landing-pricing .tier.featured .btn {
  background: white;
  color: var(--indigo-700);
  box-shadow: 0 12px 28px -8px rgba(0,0,0,0.25);
}

/* FAQ */
.landing-faq {
  padding: 4rem 1.5rem 2rem;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.landing-faq h2 {
  text-align: center;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin-bottom: 0.5rem;
}
.landing-faq p.sub {
  text-align: center;
  color: var(--slate-600);
  margin-bottom: 2.5rem;
}
.landing-faq .faq-item {
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  margin-bottom: 0.8rem;
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.landing-faq .faq-item[open] {
  border-color: var(--indigo-300);
  box-shadow: var(--shadow-sm);
}
.landing-faq .faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 1.5rem;
  font-weight: 600;
  font-size: 1rem;
  color: var(--slate-900);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: color var(--transition);
}
.landing-faq .faq-item summary::-webkit-details-marker { display: none; }
.landing-faq .faq-item summary::after {
  content: "+";
  font-family: "Cal Sans", "Inter", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  width: 28px; height: 28px;
  background: var(--indigo-50);
  color: var(--indigo-700);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 220ms ease, background var(--transition);
}
.landing-faq .faq-item[open] summary::after {
  content: "−";
  transform: rotate(180deg);
  background: var(--indigo-600);
  color: white;
}
.landing-faq .faq-item summary:hover { color: var(--indigo-700); }
.landing-faq .faq-item .faq-body {
  padding: 0 1.5rem 1.25rem;
  color: var(--slate-600);
  font-size: 0.95rem;
  line-height: 1.6;
  animation: fadeIn 260ms ease-out;
}

.landing-cta {
  margin: 2rem auto 5rem;
  max-width: 800px;
  padding: 3rem 2rem;
  text-align: center;
  background: var(--grad-primary);
  border-radius: var(--radius-lg);
  color: white;
  box-shadow: 0 30px 60px -16px rgba(99,102,241,0.45);
  position: relative;
  overflow: hidden;
}
.landing-cta::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18) 0%, transparent 50%);
  animation: drift 18s ease-in-out infinite;
  pointer-events: none;
}
.landing-cta > * { position: relative; z-index: 1; }
.landing-cta h2 {
  color: white;
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  margin-bottom: 0.6rem;
}
.landing-cta p {
  color: rgba(255,255,255,0.92);
  font-size: 1.1rem;
  max-width: 520px;
  margin: 0 auto 1.75rem;
}
.landing-cta .btn {
  background: white;
  color: var(--indigo-700);
  box-shadow: 0 14px 36px -10px rgba(0,0,0,0.28);
  font-weight: 700;
}
.landing-cta .btn:hover {
  background: white;
  color: var(--indigo-800);
  box-shadow: 0 20px 44px -10px rgba(0,0,0,0.34);
}

.landing-foot {
  text-align: center;
  padding: 1rem 1.5rem 3rem;
  color: var(--slate-500);
  font-size: 0.88rem;
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .landing-bg .blob,
  .landing-hero h1 .grad,
  .landing-preview .row,
  .landing-features .feature .feature-icon,
  .landing-cta::before,
  .landing-hero .cta-row .btn,
  .landing-hero .eyebrow .dot { animation: none !important; }
  .landing-hero .eyebrow,
  .landing-hero h1,
  .landing-hero p.lead,
  .landing-hero .cta-row,
  .landing-hero .trust,
  .landing-preview { opacity: 1 !important; animation: none !important; }
  .landing-features .feature { opacity: 1; transform: none; }
}

/* ============================================================
   AI-GUI INSPIRED LANDING (v2)
   Patterns from LobeChat, TypingMind, Vercel AI Chatbot, Claude.
   ============================================================ */

/* Mesh-gradient background that sits behind the whole landing */
.lp {
  --lp-pad: clamp(1rem, 3vw, 2rem);
  position: relative;
  margin: -2.25rem -1.5rem 0;
  min-height: 100vh;
  overflow: hidden;
}
.lp-mesh {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 20% 10%, rgba(99,102,241,0.18) 0%, transparent 70%),
    radial-gradient(50% 50% at 80% 0%,  rgba(6,182,212,0.16)  0%, transparent 70%),
    radial-gradient(55% 50% at 50% 100%, rgba(244,114,182,0.12) 0%, transparent 70%),
    radial-gradient(40% 40% at 100% 60%, rgba(168,85,247,0.14) 0%, transparent 70%),
    linear-gradient(180deg, #fafbff 0%, #f4f6fb 100%);
}
.lp-mesh::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(15,23,42,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 0%, transparent 70%);
}

.lp > * { position: relative; z-index: 1; }

/* Hero */
.lp-hero {
  text-align: center;
  padding: 3.5rem var(--lp-pad) 2rem;
  max-width: 980px;
  margin: 0 auto;
}
.lp-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(15,23,42,0.08);
  color: var(--slate-700);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.4rem 0.85rem 0.4rem 0.45rem;
  border-radius: 999px;
  box-shadow: 0 4px 16px -6px rgba(15,23,42,0.08);
}
.lp-pill .pip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--indigo-600);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
}
.lp-pill .arr { color: var(--slate-400); }

.lp-h1 {
  font-family: "Cal Sans", "Inter", sans-serif;
  font-size: clamp(2.6rem, 5.5vw, 4.4rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.04;
  margin: 1.25rem auto 1rem;
  color: var(--slate-900);
}
.lp-h1 .gradtext {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 40%, #06b6d4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lp-sub {
  font-size: 1.15rem;
  color: var(--slate-600);
  max-width: 620px;
  margin: 0 auto 1.75rem;
  line-height: 1.55;
}
.lp-ctas {
  display: inline-flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}
.lp-ctas .btn { padding: 0.78rem 1.35rem; }

/* "Composer" — chat-bar input look as a CTA, like AI tool landings */
.lp-composer {
  margin: 2.25rem auto 0;
  max-width: 620px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 18px;
  padding: 0.55rem 0.55rem 0.55rem 1.1rem;
  box-shadow: 0 24px 60px -16px rgba(99,102,241,0.18), 0 6px 14px -6px rgba(15,23,42,0.08);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: box-shadow var(--transition), transform var(--transition);
}
.lp-composer:hover { box-shadow: 0 28px 70px -16px rgba(99,102,241,0.28), 0 8px 18px -6px rgba(15,23,42,0.1); transform: translateY(-1px); }
.lp-composer .ph {
  flex: 1;
  color: var(--slate-500);
  font-size: 0.95rem;
  text-align: left;
  font-family: "Inter", sans-serif;
}
.lp-composer .ph .blink {
  display: inline-block;
  width: 2px; height: 1.05em;
  background: var(--indigo-600);
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.lp-composer .send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--grad-primary);
  color: white;
  box-shadow: var(--shadow-glow);
}

/* Chat showcase — bubble preview */
.lp-chat {
  max-width: 740px;
  margin: 3.5rem auto 1.5rem;
  padding: 0 var(--lp-pad);
}
.lp-chat-window {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 22px;
  box-shadow: 0 40px 80px -24px rgba(15,23,42,0.2), 0 14px 28px -8px rgba(99,102,241,0.12);
  padding: 1rem;
  overflow: hidden;
}
.lp-chat-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(15,23,42,0.06);
  margin-bottom: 0.85rem;
}
.lp-chat-bar .dots { display: flex; gap: 0.3rem; }
.lp-chat-bar .dots span { width: 10px; height: 10px; border-radius: 50%; }
.lp-chat-bar .dots span:nth-child(1) { background: #fb7185; }
.lp-chat-bar .dots span:nth-child(2) { background: #fbbf24; }
.lp-chat-bar .dots span:nth-child(3) { background: #4ade80; }
.lp-chat-bar .tab {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--slate-700);
  padding: 0.25rem 0.7rem;
  background: var(--slate-100);
  border-radius: 999px;
  margin-left: auto;
}
.lp-chat-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.5rem;
}
.lp-msg {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  opacity: 0;
  transform: translateY(8px);
  animation: msgIn 480ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.lp-msg:nth-child(1) { animation-delay: 180ms; }
.lp-msg:nth-child(2) { animation-delay: 460ms; }
.lp-msg:nth-child(3) { animation-delay: 760ms; }
.lp-msg:nth-child(4) { animation-delay: 1060ms; }
@keyframes msgIn { to { opacity: 1; transform: translateY(0); } }

.lp-msg.me { flex-direction: row-reverse; }
.lp-msg .ava {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--slate-200);
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700; color: var(--slate-600);
}
.lp-msg.me .ava { background: var(--grad-primary); color: white; }
.lp-msg .bubble {
  max-width: 78%;
  padding: 0.65rem 0.95rem;
  border-radius: 16px;
  background: white;
  border: 1px solid rgba(15,23,42,0.06);
  color: var(--slate-700);
  font-size: 0.95rem;
  line-height: 1.5;
  box-shadow: 0 2px 6px -2px rgba(15,23,42,0.05);
}
.lp-msg.me .bubble {
  background: var(--grad-primary);
  color: white;
  border-color: transparent;
  border-bottom-right-radius: 4px;
}
.lp-msg:not(.me) .bubble { border-bottom-left-radius: 4px; }
.lp-msg .bubble code {
  background: var(--slate-100);
  color: var(--indigo-700);
  font-size: 0.8em;
}
.lp-msg.me .bubble code { background: rgba(255,255,255,0.18); color: white; }

.lp-typing {
  display: inline-flex;
  gap: 4px;
  padding: 0.7rem 0.95rem;
  background: white;
  border: 1px solid rgba(15,23,42,0.06);
  border-radius: 16px;
  border-bottom-left-radius: 4px;
}
.lp-typing span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--slate-400);
  animation: typing 1.2s ease-in-out infinite;
}
.lp-typing span:nth-child(2) { animation-delay: 180ms; }
.lp-typing span:nth-child(3) { animation-delay: 360ms; }
@keyframes typing {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-5px); opacity: 1; }
}

/* Trust strip */
.lp-trust {
  display: flex;
  gap: 1.5rem 2rem;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--slate-500);
  padding: 2rem var(--lp-pad);
  border-top: 1px solid rgba(15,23,42,0.06);
  border-bottom: 1px solid rgba(15,23,42,0.06);
  margin: 2rem 0;
  background: rgba(255,255,255,0.4);
}
.lp-trust b { color: var(--slate-700); font-weight: 600; }

/* Bento grid */
.lp-bento-wrap {
  max-width: 1180px;
  margin: 3rem auto 0;
  padding: 0 var(--lp-pad);
}
.lp-bento-head {
  text-align: center;
  margin-bottom: 2rem;
}
.lp-bento-head h2 {
  font-size: clamp(1.85rem, 3vw, 2.6rem);
  letter-spacing: -0.03em;
  margin-bottom: 0.5rem;
}
.lp-bento-head p {
  color: var(--slate-600);
  max-width: 580px;
  margin: 0 auto;
}
.lp-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}
.lp-bento .b {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(15,23,42,0.06);
  border-radius: 18px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  box-shadow: 0 4px 12px -2px rgba(15,23,42,0.04);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  position: relative;
  overflow: hidden;
}
.lp-bento .b:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -12px rgba(99,102,241,0.18);
  border-color: rgba(99,102,241,0.2);
}
.lp-bento .b h3 {
  font-size: 1.05rem;
  margin: 0;
  color: var(--slate-900);
  letter-spacing: -0.01em;
}
.lp-bento .b p {
  margin: 0;
  color: var(--slate-600);
  font-size: 0.9rem;
  line-height: 1.5;
}
.lp-bento .b .icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--indigo-50);
  color: var(--indigo-600);
  font-size: 1.2rem;
}
.lp-bento .b .icon.cy { background: #cffafe; color: #0891b2; }
.lp-bento .b .icon.em { background: #d1fae5; color: #047857; }
.lp-bento .b .icon.rs { background: #ffe4e6; color: #be123c; }
.lp-bento .b .icon.am { background: #fef3c7; color: #b45309; }
.lp-bento .b .icon.vl { background: #ede9fe; color: #7c3aed; }

.lp-bento .b.span-3 { grid-column: span 3; }
.lp-bento .b.span-2 { grid-column: span 2; }
.lp-bento .b.span-4 { grid-column: span 4; }
.lp-bento .b.span-6 { grid-column: span 6; }
.lp-bento .b.tall   { grid-row: span 2; }

/* "Featured" bento with gradient & code-like preview */
.lp-bento .b.feature {
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(99,102,241,0.25) 0%, transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(6,182,212,0.18) 0%, transparent 60%),
    rgba(255,255,255,0.92);
}
.lp-bento .b.feature h3 { font-size: 1.4rem; letter-spacing: -0.02em; }
.lp-bento .b .code {
  background: #0b1220;
  color: #e2e8f0;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  font-family: ui-monospace, "JetBrains Mono", "SF Mono", monospace;
  font-size: 0.8rem;
  line-height: 1.6;
  border: 1px solid #1e293b;
  margin-top: auto;
  overflow: hidden;
}
.lp-bento .b .code .k { color: #818cf8; }
.lp-bento .b .code .s { color: #6ee7b7; }
.lp-bento .b .code .c { color: #64748b; }
.lp-bento .b .stat {
  font-family: "Cal Sans", "Inter", sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
  line-height: 1;
}
.lp-bento .b .stat-sub {
  color: var(--slate-500);
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

@media (max-width: 900px) {
  .lp-bento { grid-template-columns: repeat(2, 1fr); }
  .lp-bento .b.span-3,
  .lp-bento .b.span-4,
  .lp-bento .b.span-6 { grid-column: span 2; }
}
@media (max-width: 560px) {
  .lp-bento { grid-template-columns: 1fr; }
  .lp-bento .b.span-2,
  .lp-bento .b.span-3,
  .lp-bento .b.span-4,
  .lp-bento .b.span-6 { grid-column: span 1; }
}

/* "How it works" — step blocks with chat-style arrows */
.lp-how-v2 {
  max-width: 1080px;
  margin: 4rem auto 0;
  padding: 0 var(--lp-pad);
  text-align: center;
}
.lp-how-v2 h2 {
  font-size: clamp(1.85rem, 3vw, 2.6rem);
  letter-spacing: -0.03em;
  margin-bottom: 0.5rem;
}
.lp-how-v2 > p { color: var(--slate-600); margin-bottom: 2rem; }
.lp-steps2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  position: relative;
}
.lp-steps2 .s {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(15,23,42,0.06);
  border-radius: 18px;
  padding: 1.5rem;
  text-align: left;
  position: relative;
}
.lp-steps2 .s .n {
  display: inline-flex;
  width: 30px; height: 30px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--grad-primary);
  color: white;
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: 0 4px 12px -3px rgba(99,102,241,0.4);
  margin-bottom: 0.85rem;
}
.lp-steps2 .s h3 { font-size: 1.05rem; margin: 0 0 0.4rem; }
.lp-steps2 .s p { color: var(--slate-600); font-size: 0.92rem; margin: 0; }
@media (max-width: 800px) { .lp-steps2 { grid-template-columns: 1fr; } }

/* Pricing v2 — dark accent section */
.lp-pricing-v2 {
  margin: 4rem var(--lp-pad) 0;
  padding: 3rem var(--lp-pad);
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(99,102,241,0.18) 0%, transparent 60%),
    #0b1220;
  color: #e2e8f0;
  border-radius: 26px;
  position: relative;
  overflow: hidden;
}
.lp-pricing-v2 h2 { color: white; font-size: clamp(1.85rem, 3vw, 2.6rem); letter-spacing: -0.03em; text-align: center; margin-bottom: 0.5rem; }
.lp-pricing-v2 > p { text-align: center; color: #94a3b8; margin-bottom: 2.25rem; }
.lp-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 1000px;
  margin: 0 auto;
}
.lp-tiers .t {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 1.75rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
}
.lp-tiers .t.feat {
  background: linear-gradient(180deg, rgba(99,102,241,0.18), rgba(6,182,212,0.1));
  border-color: rgba(99,102,241,0.5);
  box-shadow: 0 20px 60px -12px rgba(99,102,241,0.4);
}
.lp-tiers .t .tname { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #94a3b8; }
.lp-tiers .t.feat .tname { color: #c7d2fe; }
.lp-tiers .t .price { font-family: "Cal Sans", "Inter", sans-serif; font-size: 2.25rem; font-weight: 700; letter-spacing: -0.02em; margin: 0.4rem 0 0.25rem; color: white; }
.lp-tiers .t .price small { font-size: 0.85rem; font-weight: 500; color: #94a3b8; }
.lp-tiers .t .tdesc { color: #cbd5e1; font-size: 0.9rem; margin-bottom: 1.25rem; }
.lp-tiers .t ul { list-style: none; padding: 0; margin: 0 0 1.5rem; font-size: 0.9rem; }
.lp-tiers .t ul li { display: flex; gap: 0.5rem; padding: 0.3rem 0; color: #cbd5e1; }
.lp-tiers .t ul li::before { content: "✓"; color: #4ade80; font-weight: 700; }
.lp-tiers .t .btn { width: 100%; justify-content: center; }
.lp-tiers .t .feat-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--grad-primary);
  color: white; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.2rem 0.75rem; border-radius: 999px;
}
@media (max-width: 800px) { .lp-tiers { grid-template-columns: 1fr; } }

/* Final CTA */
.lp-cta-v2 {
  text-align: center;
  padding: 4rem var(--lp-pad);
  max-width: 760px;
  margin: 0 auto;
}
.lp-cta-v2 h2 { font-size: clamp(1.85rem, 3.5vw, 3rem); letter-spacing: -0.03em; }
.lp-cta-v2 p { color: var(--slate-600); font-size: 1.1rem; margin-bottom: 1.5rem; }

/* Footer */
.lp-foot {
  text-align: center;
  padding: 1rem var(--lp-pad) 4rem;
  color: var(--slate-500);
  font-size: 0.85rem;
}

@media (prefers-reduced-motion: reduce) {
  .lp-msg, .lp-typing span, .lp-composer .ph .blink { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   MV2 — Linear/Cursor-inspired minimal modern landing.
   Confident typography, monochrome base, single sharp accent,
   generous whitespace. No mesh backgrounds, no tilted windows.
   ============================================================ */

.mv2 {
  --ink: #0a0a0a;
  --ink-2: #1f2937;
  --muted: #6b7280;
  --line: #e5e7eb;
  --line-2: #f3f4f6;
  --bg: #fafaf9;
  --paper: #ffffff;
  --accent: #2563eb;
  --accent-2: #1d4ed8;
  --accent-soft: #eff6ff;
  --pop: #16a34a;

  margin: -2.25rem -1.5rem 0;
  background: var(--bg);
  color: var(--ink);
  position: relative;
  overflow-x: hidden;
}
.mv2 * { letter-spacing: -0.01em; }

/* Hairline grid */
.mv2::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: 50% 0;
  mask-image: linear-gradient(180deg, black 0%, transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, black 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}
.mv2 > * { position: relative; z-index: 1; }

.mv2-inner { max-width: 1140px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem); }

/* Hero */
.mv2-hero {
  padding: 5.5rem 0 4rem;
  border-bottom: 1px solid var(--line);
}
.mv2-anno {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: ui-monospace, "JetBrains Mono", "SF Mono", monospace;
  font-size: 0.78rem;
  color: var(--muted);
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
}
.mv2-anno .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pop); box-shadow: 0 0 0 3px rgba(22,163,74,0.18); }
.mv2-anno .sep { width: 1px; height: 12px; background: var(--line); }
.mv2-anno b { color: var(--ink); font-weight: 600; }

.mv2-h1 {
  font-family: "Cal Sans", "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--ink);
  margin: 1.5rem 0 1.25rem;
  max-width: 920px;
}
.mv2-h1 em {
  font-style: normal;
  color: var(--accent);
  background: linear-gradient(180deg, transparent 65%, rgba(37,99,235,0.16) 65%, rgba(37,99,235,0.16) 95%, transparent 95%);
  padding: 0 0.05em;
}
.mv2-lede {
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 560px;
  margin: 0 0 2rem;
}
.mv2-cta-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}
.mv2-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--ink);
  color: var(--paper);
  font: 600 0.95rem/1 "Inter", sans-serif;
  letter-spacing: -0.01em;
  padding: 0.85rem 1.2rem;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid var(--ink);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.mv2-btn:hover { background: var(--ink-2); color: var(--paper); transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(0,0,0,0.25); }
.mv2-btn .arr { transition: transform var(--transition); }
.mv2-btn:hover .arr { transform: translateX(3px); }
.mv2-btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.mv2-btn-ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--ink); box-shadow: none; }

.mv2-kbd {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: 0.7rem;
  color: var(--muted);
  font: 0.78rem ui-monospace, monospace;
}
.mv2-kbd kbd {
  background: var(--paper);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font: 0.75rem ui-monospace, monospace;
  color: var(--ink-2);
}

/* Trust strip (logos / facts row) */
.mv2-facts {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--muted);
}
.mv2-facts span { display: inline-flex; gap: 0.45rem; align-items: baseline; }
.mv2-facts b { color: var(--ink); font-weight: 600; font-family: ui-monospace, monospace; }

/* Section common */
.mv2-section { padding: 5rem 0; border-bottom: 1px solid var(--line); }
.mv2-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}
.mv2-section-eyebrow {
  font: 600 0.75rem/1 ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.mv2-section-title {
  font-family: "Cal Sans", "Inter", sans-serif;
  font-size: clamp(1.85rem, 3.4vw, 2.8rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0.4rem 0 0;
  max-width: 660px;
  color: var(--ink);
}
.mv2-section-lede {
  color: var(--ink-2);
  max-width: 420px;
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
}

/* Feature grid v2: rigid 3-col, hairline borders, no shadow */
.mv2-fgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.mv2-fgrid .f {
  padding: 2rem 1.75rem;
  background: var(--paper);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  position: relative;
  transition: background var(--transition);
}
.mv2-fgrid .f:hover { background: var(--bg); }
.mv2-fgrid .f .num {
  font: 600 0.72rem/1 ui-monospace, monospace;
  color: var(--muted);
  letter-spacing: 0.1em;
}
.mv2-fgrid .f h4 {
  margin: 0;
  font-family: "Cal Sans", "Inter", sans-serif;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.mv2-fgrid .f p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.92rem;
  line-height: 1.55;
}
@media (max-width: 900px) { .mv2-fgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mv2-fgrid { grid-template-columns: 1fr; } }

/* "Quote / pull" block */
.mv2-quote {
  font-family: "Cal Sans", "Inter", sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--ink);
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding: 5rem 0;
  border-bottom: 1px solid var(--line);
}
.mv2-quote .mark { color: var(--accent); }
.mv2-quote .by {
  display: block;
  margin-top: 1.25rem;
  font-family: "Inter", sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}

/* How it works — horizontal numbered cards */
.mv2-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.mv2-how .step { padding: 2.5rem 2rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }
.mv2-how .step .n {
  font-family: "Cal Sans", "Inter", sans-serif;
  font-size: 3rem;
  font-weight: 700;
  color: var(--line);
  line-height: 1;
  letter-spacing: -0.04em;
  display: block;
  margin-bottom: 0.8rem;
}
.mv2-how .step h4 { margin: 0 0 0.4rem; font-size: 1.1rem; color: var(--ink); }
.mv2-how .step p { margin: 0; color: var(--ink-2); font-size: 0.95rem; line-height: 1.55; }
@media (max-width: 800px) { .mv2-how { grid-template-columns: 1fr; } }

/* Pricing — two cards, generous, no dark panel */
.mv2-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.mv2-pricing .t {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 2rem 1.75rem;
  position: relative;
}
.mv2-pricing .t.feat { border-color: var(--ink); box-shadow: 0 14px 32px -10px rgba(0,0,0,0.18); }
.mv2-pricing .t .name { font-size: 0.85rem; font-weight: 600; color: var(--muted); margin-bottom: 0.35rem; font-family: ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.08em; }
.mv2-pricing .t .price { font-family: "Cal Sans", "Inter", sans-serif; font-size: 2.4rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.mv2-pricing .t .price small { font-size: 0.85rem; font-weight: 500; color: var(--muted); }
.mv2-pricing .t .lead { color: var(--ink-2); font-size: 0.9rem; margin: 0.5rem 0 1.25rem; line-height: 1.5; }
.mv2-pricing .t ul { list-style: none; padding: 0; margin: 0 0 1.5rem; font-size: 0.92rem; }
.mv2-pricing .t ul li { display: flex; gap: 0.55rem; padding: 0.32rem 0; color: var(--ink-2); }
.mv2-pricing .t ul li::before { content: ""; flex-shrink: 0; width: 16px; height: 16px; background: var(--ink); border-radius: 50%; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6.5 11L3 7.5l1.4-1.4L6.5 8.2l5.1-5.1L13 4.5z'/></svg>") center/12px no-repeat; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6.5 11L3 7.5l1.4-1.4L6.5 8.2l5.1-5.1L13 4.5z'/></svg>") center/12px no-repeat; margin-top: 0.18rem; }
.mv2-pricing .t .pbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  width: 100%; padding: 0.75rem 1rem; border-radius: 9px;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
  font: 600 0.92rem/1 "Inter", sans-serif; text-decoration: none;
  transition: background var(--transition);
}
.mv2-pricing .t .pbtn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.mv2-pricing .t .pbtn:hover { background: var(--ink-2); color: var(--paper); }
.mv2-pricing .t .pbtn.ghost:hover { background: var(--paper); border-color: var(--ink); }
.mv2-pricing .t .tag { position: absolute; top: -10px; left: 1.5rem; background: var(--accent); color: white; font: 600 0.65rem/1 "Inter", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3rem 0.65rem; border-radius: 6px; }
@media (max-width: 800px) { .mv2-pricing { grid-template-columns: 1fr; } }

/* CTA */
.mv2-final {
  text-align: center;
  padding: 6rem 0 7rem;
  border-bottom: 1px solid var(--line);
}
.mv2-final .mv2-h1 { margin: 0 auto 1.25rem; font-size: clamp(2.2rem, 4.5vw, 4rem); }
.mv2-final .lede { color: var(--ink-2); font-size: 1.1rem; margin: 0 auto 2rem; max-width: 540px; }
.mv2-final .mv2-cta-row { justify-content: center; }

.mv2-foot {
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  padding: 1.5rem 0 3rem;
}

/* Compact "code card" used in feature grid for the privacy block */
.mv2-fgrid .f.code-card { grid-column: span 1; background: var(--ink); color: #e5e7eb; }
.mv2-fgrid .f.code-card .num { color: rgba(255,255,255,0.45); }
.mv2-fgrid .f.code-card h4 { color: white; }
.mv2-fgrid .f.code-card p { color: rgba(255,255,255,0.7); }
.mv2-fgrid .f.code-card pre {
  margin: 0.5rem 0 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 0.85rem;
  border-radius: 8px;
  font: 0.78rem/1.55 ui-monospace, monospace;
  color: #cbd5e1;
  overflow: auto;
}
.mv2-fgrid .f.code-card pre .k { color: #93c5fd; }
.mv2-fgrid .f.code-card pre .s { color: #86efac; }
.mv2-fgrid .f.code-card pre .c { color: #6b7280; }
.mv2-fgrid .f.code-card:hover { background: #111827; }

/* ============================================================
   MV3 — Warm editorial. Anthropic Claude / Notion / Fraunces vibe.
   Cream parchment, contemporary serif headlines, terracotta accent,
   generous whitespace. Magazine-style layout.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&display=swap");

.mv3 {
  --paper: #faf8f3;
  --ivory: #ffffff;
  --ink: #1a1814;
  --ink-2: #3d362c;
  --ink-3: #5b5142;
  --muted: #847868;
  --line: #e8e1d4;
  --line-2: #efeadd;
  --tan:  #d6c8b0;
  --rust: #b54a18;
  --rust-2: #8c3712;
  --soft-amber: #fef3c7;
  --moss: #4b6c45;
  --warm-shadow: 0 14px 36px -10px rgba(60, 36, 12, 0.18);

  margin: -2.25rem -1.5rem 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  position: relative;
  overflow-x: hidden;
}
.mv3 * { letter-spacing: -0.01em; }

/* Paper grain — very subtle */
.mv3::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(60, 36, 12, 0.025) 1px, transparent 1px);
  background-size: 4px 4px;
  z-index: 0;
}
.mv3 > * { position: relative; z-index: 1; }

.mv3-inner { max-width: 1180px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }

/* "Newspaper" topline */
.mv3-topline {
  border-bottom: 1px solid var(--line);
  padding: 0.85rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "Fraunces", Georgia, serif;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--muted);
}
.mv3-topline .vol { letter-spacing: 0.1em; text-transform: uppercase; font-style: normal; font-weight: 600; font-family: "Inter", sans-serif; font-size: 0.7rem; }
.mv3-topline .date { font-family: "Fraunces", Georgia, serif; font-weight: 500; }

/* Hero */
.mv3-hero { padding: 4rem 0 5rem; }
.mv3-hero .mv3-h1 {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 0.96;
  letter-spacing: -0.04em;
  margin: 0 0 1.5rem;
  font-weight: 500;
  font-variation-settings: "opsz" 96;
  color: var(--ink);
  max-width: 14ch;
}
.mv3-hero .mv3-h1 em {
  font-style: italic;
  color: var(--rust);
  font-weight: 400;
}
.mv3-hero .lead {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 540px;
  margin: 0 0 2.5rem;
  font-variation-settings: "opsz" 14;
}
.mv3-hero .mv3-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: "Inter", sans-serif;
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}
.mv3-hero .mv3-meta .by { color: var(--ink); font-weight: 600; }
.mv3-hero .mv3-meta .sep { color: var(--tan); }

.mv3-ctas {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.mv3-btn {
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.95rem 1.5rem;
  border-radius: 999px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  transition: transform var(--transition), background var(--transition);
}
.mv3-btn:hover { transform: translateY(-1px); background: var(--ink-2); color: var(--paper); text-decoration: none; }
.mv3-btn.serif { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-style: italic; font-size: 1.1rem; padding: 0.95rem 1.75rem; }
.mv3-btn-link {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 500;
  color: var(--rust);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--rust);
}
.mv3-btn-link:hover { color: var(--rust-2); text-decoration-color: var(--rust-2); }

/* Hero illustration / pullquote on right side */
.mv3-hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 4rem;
  align-items: center;
}
.mv3-aside {
  border-left: 2px solid var(--rust);
  padding: 0.5rem 0 0.5rem 1.5rem;
  font-family: "Fraunces", Georgia, serif;
}
.mv3-aside .ttl {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--rust);
  font-weight: 600;
  font-family: "Inter", sans-serif;
  font-style: normal;
  margin-bottom: 0.5rem;
}
.mv3-aside .quote {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink);
  font-style: italic;
}
.mv3-aside .quote::before { content: "“"; color: var(--rust); margin-right: 0.05em; }
.mv3-aside .quote::after { content: "”"; color: var(--rust); margin-left: 0.05em; }
.mv3-aside .src {
  margin-top: 1rem;
  font-style: normal;
  font-family: "Inter", sans-serif;
  font-size: 0.85rem;
  color: var(--muted);
}
@media (max-width: 900px) {
  .mv3-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* Section frame */
.mv3-section { padding: 5rem 0; border-top: 1px solid var(--line); }
.mv3-section-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
  margin-bottom: 3rem;
  align-items: start;
}
.mv3-section-head .label {
  font-family: "Inter", sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--rust);
  font-weight: 600;
  padding-top: 0.5rem;
  border-top: 2px solid var(--rust);
  display: inline-block;
}
.mv3-section-head h2 {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 400;
  margin: 0 0 0.7rem;
  font-variation-settings: "opsz" 72;
}
.mv3-section-head h2 em { font-style: italic; color: var(--rust); font-weight: 400; }
.mv3-section-head .sub {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--ink-2);
  font-weight: 400;
  max-width: 520px;
  font-variation-settings: "opsz" 14;
}
@media (max-width: 800px) {
  .mv3-section-head { grid-template-columns: 1fr; gap: 1rem; }
}

/* Magazine-style feature blocks */
.mv3-features { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.25rem 2rem; }
.mv3-features .f {
  background: var(--ivory);
  border-radius: 16px;
  padding: 1.75rem 1.85rem;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  transition: transform var(--transition), box-shadow var(--transition);
}
.mv3-features .f:hover { transform: translateY(-3px); box-shadow: var(--warm-shadow); }
.mv3-features .f .num {
  font-family: "Fraunces", Georgia, serif;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--rust);
  font-weight: 500;
  font-variation-settings: "opsz" 9;
}
.mv3-features .f h4 {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
  font-variation-settings: "opsz" 36;
}
.mv3-features .f p {
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--ink-3);
  margin: 0;
}
.mv3-features .f.wide { grid-column: span 8; }
.mv3-features .f.tall { grid-column: span 4; grid-row: span 2; background: var(--ink); color: var(--paper); border-color: var(--ink); }
.mv3-features .f.tall h4 { color: var(--ivory); }
.mv3-features .f.tall p { color: rgba(250,248,243,0.8); }
.mv3-features .f.tall .num { color: var(--soft-amber); }
.mv3-features .f.tall pre {
  margin: 0.5rem 0 0;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 1rem;
  border-radius: 10px;
  font: 0.85rem/1.6 ui-monospace, "JetBrains Mono", monospace;
  color: #e8d5b7;
  overflow: auto;
}
.mv3-features .f.tall pre .k { color: #f4a261; }
.mv3-features .f.tall pre .s { color: #a3b18a; }
.mv3-features .f.tall pre .c { color: #847868; }
.mv3-features .f.med { grid-column: span 4; }
.mv3-features .f.med-6 { grid-column: span 6; }
.mv3-features .f.full { grid-column: span 12; }
@media (max-width: 900px) {
  .mv3-features { grid-template-columns: 1fr; }
  .mv3-features .f.wide, .mv3-features .f.tall, .mv3-features .f.med, .mv3-features .f.med-6, .mv3-features .f.full { grid-column: span 1; grid-row: auto; }
}

/* Drop cap intro */
.mv3-intro {
  padding: 5rem 0;
  border-top: 1px solid var(--line);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--ink);
  max-width: 720px;
  margin: 0 auto;
  font-weight: 400;
  font-variation-settings: "opsz" 24;
}
.mv3-intro::first-letter {
  font-size: 5.5em;
  float: left;
  line-height: 0.85;
  margin: 0.1em 0.15em -0.1em 0;
  font-weight: 600;
  color: var(--rust);
}
.mv3-intro em { font-style: italic; color: var(--rust); }

/* How — newspaper column flow */
.mv3-how {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}
.mv3-how .step h4 {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.45rem;
  font-weight: 500;
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-variation-settings: "opsz" 36;
}
.mv3-how .step h4 .n {
  font-style: italic;
  color: var(--rust);
  font-size: 0.95rem;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  border: 1px solid var(--rust);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}
.mv3-how .step p { font-size: 0.98rem; line-height: 1.65; color: var(--ink-2); margin: 0; }
.mv3-how .step .rule { width: 40px; height: 2px; background: var(--rust); margin: 1rem 0; }
@media (max-width: 800px) { .mv3-how { grid-template-columns: 1fr; gap: 2rem; } }

/* Pricing — index card stack */
.mv3-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.mv3-pricing .t {
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 2.25rem 2rem;
  position: relative;
}
.mv3-pricing .t.feat {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  box-shadow: var(--warm-shadow);
}
.mv3-pricing .t.feat h4, .mv3-pricing .t.feat .price { color: var(--ivory); }
.mv3-pricing .t.feat .name { color: var(--soft-amber); }
.mv3-pricing .t.feat p, .mv3-pricing .t.feat ul li { color: rgba(250,248,243,0.85); }
.mv3-pricing .t.feat ul li::before { background: var(--soft-amber); }
.mv3-pricing .t .name {
  font-family: "Inter", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 0.5rem;
}
.mv3-pricing .t h4 {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.6rem;
  font-weight: 500;
  margin: 0 0 1rem;
  font-style: italic;
  color: var(--ink);
  font-variation-settings: "opsz" 36;
}
.mv3-pricing .t .price {
  font-family: "Fraunces", Georgia, serif;
  font-size: 2.6rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  font-variation-settings: "opsz" 72;
}
.mv3-pricing .t .price small {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
  margin-top: 0.3rem;
}
.mv3-pricing .t .lead {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 1rem 0 1.5rem;
  font-variation-settings: "opsz" 14;
}
.mv3-pricing .t.feat .lead { color: rgba(250,248,243,0.8); }
.mv3-pricing .t ul { list-style: none; padding: 0; margin: 0 0 1.75rem; }
.mv3-pricing .t ul li {
  font-size: 0.92rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--line-2);
  color: var(--ink-2);
  display: flex;
  gap: 0.55rem;
}
.mv3-pricing .t.feat ul li { border-bottom-color: rgba(255,255,255,0.1); }
.mv3-pricing .t ul li::before {
  content: "";
  width: 14px;
  height: 14px;
  background: var(--rust);
  border-radius: 50%;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6.5 11L3 7.5l1.4-1.4L6.5 8.2l5.1-5.1L13 4.5z'/></svg>") center/12px no-repeat;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6.5 11L3 7.5l1.4-1.4L6.5 8.2l5.1-5.1L13 4.5z'/></svg>") center/12px no-repeat;
  flex-shrink: 0;
  margin-top: 0.18rem;
}
.mv3-pricing .t .pbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%;
  padding: 0.95rem 1.25rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  font: 600 0.95rem/1 "Inter", sans-serif;
  text-decoration: none;
  transition: background var(--transition);
}
.mv3-pricing .t .pbtn:hover { background: var(--ink-2); color: var(--paper); }
.mv3-pricing .t .pbtn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.mv3-pricing .t .pbtn.ghost:hover { background: var(--ink); color: var(--paper); }
.mv3-pricing .t.feat .pbtn {
  background: var(--soft-amber);
  color: var(--ink);
  border-color: var(--soft-amber);
}
.mv3-pricing .t.feat .pbtn:hover { background: #fde68a; color: var(--ink); }
.mv3-pricing .t .ribbon {
  position: absolute;
  top: -10px;
  left: 1.75rem;
  background: var(--rust);
  color: var(--ivory);
  font: 600 0.65rem/1 "Inter", sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border-radius: 4px;
}
@media (max-width: 800px) { .mv3-pricing { grid-template-columns: 1fr; } }

/* CTA — warm centered closing */
.mv3-final {
  padding: 7rem 0;
  text-align: center;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--paper) 0%, #f6f1e6 100%);
}
.mv3-final .ornament {
  font-family: "Fraunces", Georgia, serif;
  font-size: 2rem;
  color: var(--rust);
  letter-spacing: 0.4em;
  margin-bottom: 0.8rem;
  opacity: 0.7;
}
.mv3-final h2 {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0 0 1.25rem;
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
  font-variation-settings: "opsz" 96;
}
.mv3-final h2 em { font-style: italic; color: var(--rust); }
.mv3-final .lede {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 500px;
  margin: 0 auto 2rem;
  font-variation-settings: "opsz" 14;
}

.mv3-foot {
  padding: 2rem 0 4rem;
  text-align: center;
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-size: 0.92rem;
  color: var(--muted);
}
.mv3-foot a { color: var(--rust); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ============================================================
   MV4 — Dark / Vercel / GitHub Copilot after-hours.
   Near-black canvas, vivid green accent, sharp typography,
   subtle dotted grid, glow effects, terminal-style code blocks.
   ============================================================ */

.mv4 {
  --ink: #fafafa;
  --ink-2: #d4d4d8;
  --muted: #71717a;
  --paper: #0a0a0b;
  --paper-2: #111113;
  --paper-3: #18181b;
  --line: #27272a;
  --line-2: #3f3f46;
  --hot: #00d4a0;
  --hot-2: #00ffaa;
  --warn: #ff5a5a;
  --orange: #ff7a45;

  margin: -2.25rem -1.5rem 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  position: relative;
  overflow-x: hidden;
}
.mv4 * { letter-spacing: -0.01em; }

/* Dotted grid */
.mv4::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: 50% 0;
  mask-image: linear-gradient(180deg, black 0%, transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, black 0%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}
/* Soft top glow */
.mv4::after {
  content: "";
  position: absolute;
  top: -200px; left: 50%;
  transform: translateX(-50%);
  width: 800px; height: 500px;
  background: radial-gradient(ellipse at center, rgba(0, 212, 160, 0.18) 0%, transparent 60%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.mv4 > * { position: relative; z-index: 1; }

.mv4-inner { max-width: 1180px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }

/* HERO */
.mv4-hero { padding: 5rem 0 4rem; text-align: center; }
.mv4-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0,212,160,0.08);
  border: 1px solid rgba(0,212,160,0.3);
  color: var(--hot);
  font: 500 0.78rem/1 ui-monospace, "JetBrains Mono", monospace;
  padding: 0.4rem 0.9rem 0.4rem 0.4rem;
  border-radius: 999px;
}
.mv4-badge .tag {
  background: var(--hot);
  color: var(--paper);
  font-weight: 700;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
}
.mv4-badge .sep { color: rgba(255,255,255,0.2); }
.mv4-badge code { background: transparent; border: 0; color: var(--ink); padding: 0; font-family: inherit; font-size: inherit; }

.mv4-h1 {
  font-family: "Cal Sans", "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(3rem, 7vw, 5.6rem);
  line-height: 0.96;
  letter-spacing: -0.045em;
  color: var(--ink);
  margin: 1.5rem auto;
  max-width: 18ch;
}
.mv4-h1 .glow {
  background: linear-gradient(180deg, var(--hot) 0%, var(--hot-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 60px rgba(0,212,160,0.4);
}
.mv4-h1 .strike {
  position: relative;
  display: inline-block;
}
.mv4-h1 .strike::after {
  content: "";
  position: absolute;
  left: -2%; right: -2%;
  top: 52%;
  height: 4px;
  background: var(--warn);
  border-radius: 2px;
  transform: rotate(-2deg);
}

.mv4-lede {
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 580px;
  margin: 0 auto 2.25rem;
}
.mv4-lede em { color: var(--hot); font-style: normal; font-weight: 500; }

.mv4-cta-row { display: inline-flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; justify-content: center; }
.mv4-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--hot);
  color: var(--paper);
  font: 700 0.95rem/1 "Inter", sans-serif;
  letter-spacing: -0.01em;
  padding: 0.95rem 1.4rem;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid var(--hot);
  box-shadow: 0 0 0 0 rgba(0,212,160,0.4), 0 10px 30px -8px rgba(0,212,160,0.5);
  transition: box-shadow var(--transition), transform var(--transition), background var(--transition);
}
.mv4-btn:hover {
  transform: translateY(-1px);
  color: var(--paper);
  background: var(--hot-2);
  box-shadow: 0 0 0 4px rgba(0,212,160,0.18), 0 16px 40px -8px rgba(0,212,160,0.65);
}
.mv4-btn .arr { transition: transform var(--transition); }
.mv4-btn:hover .arr { transform: translateX(3px); }
.mv4-btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-2);
  box-shadow: none;
}
.mv4-btn-ghost:hover { background: var(--paper-2); color: var(--ink); box-shadow: none; border-color: var(--ink); }

/* Terminal-style hero block */
.mv4-term {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  max-width: 720px;
  margin: 4rem auto 0;
  box-shadow:
    0 40px 80px -20px rgba(0,0,0,0.6),
    0 0 0 1px rgba(0,212,160,0.08),
    inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
  text-align: left;
}
.mv4-term-bar {
  display: flex; align-items: center;
  padding: 0.7rem 0.95rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
}
.mv4-term-bar .dots { display: flex; gap: 0.3rem; }
.mv4-term-bar .dots span { width: 11px; height: 11px; border-radius: 50%; opacity: 0.5; }
.mv4-term-bar .dots span:nth-child(1) { background: var(--warn); }
.mv4-term-bar .dots span:nth-child(2) { background: var(--orange); }
.mv4-term-bar .dots span:nth-child(3) { background: var(--hot); }
.mv4-term-bar .title {
  margin-left: 0.6rem;
  font: 500 0.78rem/1 ui-monospace, monospace;
  color: var(--muted);
}
.mv4-term-body {
  padding: 1.25rem 1.4rem;
  font: 0.88rem/1.75 ui-monospace, "JetBrains Mono", monospace;
  color: var(--ink-2);
}
.mv4-term-body .prompt { color: var(--hot); -webkit-user-select: none; user-select: none; }
.mv4-term-body .cmt { color: var(--muted); }
.mv4-term-body .str { color: #ff7a45; }
.mv4-term-body .num { color: #ffd166; }
.mv4-term-body .key { color: #00d4ff; }
.mv4-term-body .ok { color: var(--hot); font-weight: 600; }
.mv4-term-body .cur {
  display: inline-block;
  width: 8px; height: 1.05em;
  background: var(--hot);
  vertical-align: -0.18em;
  animation: blink 1s steps(1) infinite;
}

/* Sections */
.mv4-section { padding: 5rem 0; border-top: 1px solid var(--line); }
.mv4-section-head { text-align: center; margin-bottom: 3rem; }
.mv4-section-head .tag {
  display: inline-block;
  font: 600 0.72rem/1 ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--hot);
  padding: 0.4rem 0.8rem;
  border: 1px solid rgba(0,212,160,0.25);
  border-radius: 999px;
  margin-bottom: 1.25rem;
  background: rgba(0,212,160,0.05);
}
.mv4-section-head h2 {
  font-family: "Cal Sans", "Inter", sans-serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0 auto 0.85rem;
  max-width: 18ch;
  color: var(--ink);
}
.mv4-section-head h2 em { font-style: normal; color: var(--hot); }
.mv4-section-head p {
  color: var(--ink-2);
  max-width: 580px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.55;
}

/* Feature grid — dark cards with glow on hover */
.mv4-fgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.mv4-fgrid .f {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  position: relative;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.mv4-fgrid .f:hover {
  border-color: rgba(0,212,160,0.4);
  transform: translateY(-2px);
  box-shadow: 0 12px 36px -10px rgba(0,212,160,0.25), 0 0 0 1px rgba(0,212,160,0.1);
}
.mv4-fgrid .f .ic {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(0,212,160,0.1);
  color: var(--hot);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  border: 1px solid rgba(0,212,160,0.2);
  font-family: ui-monospace, monospace;
  font-weight: 700;
}
.mv4-fgrid .f h4 {
  font-family: "Cal Sans", "Inter", sans-serif;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
.mv4-fgrid .f p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.92rem;
  line-height: 1.55;
}
.mv4-fgrid .f code {
  background: rgba(0,212,160,0.08);
  color: var(--hot);
  border: 1px solid rgba(0,212,160,0.2);
  padding: 0.05em 0.35em;
  border-radius: 4px;
  font-size: 0.85em;
}
@media (max-width: 900px) { .mv4-fgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mv4-fgrid { grid-template-columns: 1fr; } }

/* Stats row */
.mv4-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 0;
}
.mv4-stats .s {
  padding: 2rem 1.5rem;
  border-right: 1px solid var(--line);
  text-align: center;
}
.mv4-stats .s:last-child { border-right: 0; }
.mv4-stats .s .n {
  font-family: "Cal Sans", "Inter", sans-serif;
  font-size: 3rem;
  font-weight: 700;
  background: linear-gradient(180deg, var(--ink) 0%, var(--muted) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.035em;
  line-height: 1;
}
.mv4-stats .s .n.hot {
  background: linear-gradient(180deg, var(--hot) 0%, var(--hot-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mv4-stats .s .lbl {
  margin-top: 0.45rem;
  color: var(--muted);
  font: 500 0.78rem/1 ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
@media (max-width: 800px) {
  .mv4-stats { grid-template-columns: repeat(2, 1fr); }
  .mv4-stats .s:nth-child(2) { border-right: 0; }
  .mv4-stats .s:nth-child(1), .mv4-stats .s:nth-child(2) { border-bottom: 1px solid var(--line); }
}

/* Steps — numbered with hot accents */
.mv4-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.mv4-steps .st {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 2rem 1.75rem;
  position: relative;
}
.mv4-steps .st .n {
  font: 700 0.72rem/1 ui-monospace, monospace;
  color: var(--hot);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.mv4-steps .st .n::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--hot); box-shadow: 0 0 8px var(--hot); }
.mv4-steps .st h4 { font-family: "Cal Sans", "Inter", sans-serif; font-size: 1.2rem; margin: 0 0 0.45rem; color: var(--ink); letter-spacing: -0.02em; }
.mv4-steps .st p { margin: 0; color: var(--ink-2); font-size: 0.95rem; line-height: 1.55; }
@media (max-width: 800px) { .mv4-steps { grid-template-columns: 1fr; } }

/* Pricing */
.mv4-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.mv4-pricing .t {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 2rem 1.75rem;
  position: relative;
}
.mv4-pricing .t.feat {
  border-color: var(--hot);
  background: linear-gradient(180deg, rgba(0,212,160,0.08) 0%, var(--paper-2) 100%);
  box-shadow: 0 0 0 1px rgba(0,212,160,0.3), 0 20px 60px -16px rgba(0,212,160,0.35);
}
.mv4-pricing .t .name {
  font: 600 0.78rem/1 ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 0.7rem;
}
.mv4-pricing .t.feat .name { color: var(--hot); }
.mv4-pricing .t .price {
  font-family: "Cal Sans", "Inter", sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.mv4-pricing .t .price small {
  display: block;
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
  margin-top: 0.4rem;
  letter-spacing: 0;
}
.mv4-pricing .t .lead { font-size: 0.92rem; color: var(--ink-2); margin: 1rem 0 1.25rem; line-height: 1.55; }
.mv4-pricing .t ul { list-style: none; padding: 0; margin: 0 0 1.5rem; font-size: 0.9rem; }
.mv4-pricing .t ul li { color: var(--ink-2); padding: 0.4rem 0; display: flex; gap: 0.55rem; align-items: flex-start; border-bottom: 1px solid var(--line); }
.mv4-pricing .t ul li:last-child { border-bottom: 0; }
.mv4-pricing .t ul li::before {
  content: ""; flex-shrink: 0;
  width: 16px; height: 16px;
  background: var(--hot);
  border-radius: 50%;
  margin-top: 0.18rem;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6.5 11L3 7.5l1.4-1.4L6.5 8.2l5.1-5.1L13 4.5z'/></svg>") center/12px no-repeat;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6.5 11L3 7.5l1.4-1.4L6.5 8.2l5.1-5.1L13 4.5z'/></svg>") center/12px no-repeat;
}
.mv4-pricing .t .pbtn {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: var(--paper-3);
  color: var(--ink);
  border: 1px solid var(--line-2);
  font: 600 0.92rem/1 "Inter", sans-serif;
  text-decoration: none;
  transition: all var(--transition);
}
.mv4-pricing .t .pbtn:hover { background: var(--line); color: var(--ink); }
.mv4-pricing .t.feat .pbtn {
  background: var(--hot);
  color: var(--paper);
  border-color: var(--hot);
  box-shadow: 0 8px 24px -8px rgba(0,212,160,0.5);
}
.mv4-pricing .t.feat .pbtn:hover { background: var(--hot-2); color: var(--paper); }
.mv4-pricing .t .ribbon {
  position: absolute;
  top: -10px; left: 1.5rem;
  background: var(--hot);
  color: var(--paper);
  font: 700 0.65rem/1 "Inter", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border-radius: 4px;
}
@media (max-width: 800px) { .mv4-pricing { grid-template-columns: 1fr; } }

/* Final CTA */
.mv4-final {
  text-align: center;
  padding: 6rem 0;
  border-top: 1px solid var(--line);
  position: relative;
}
.mv4-final::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 200px;
  background: radial-gradient(ellipse at center, rgba(0,212,160,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.mv4-final > * { position: relative; }
.mv4-foot {
  padding: 1.5rem 0 3rem;
  text-align: center;
  font: 500 0.85rem/1.5 ui-monospace, monospace;
  color: var(--muted);
}
.mv4-foot a { color: var(--hot); text-decoration: none; }
.mv4-foot a:hover { text-decoration: underline; }

/* ============================================================
   MV5 — Warm friendly modern. Notion 2024 / Framer / Linear new.
   Soft peach gradient, rounded everything, outcome-led, big chunky
   typography. Built for the facilitator, not the engineer.
   ============================================================ */

.mv5 {
  /* User-provided "Calm Trust" theme — replaces the previous Aurora
     Dawn / coral-pastel palette. Sage-teal + cream + warm tan +
     muted gold. The look reads professional / editorial / quiet
     rather than playful / SaaS-y. Hairline borders + flat cards,
     no shadows, no gradients on the canvas. */
  --ink:        #1E2A28;   /* deep teal-charcoal — primary text */
  --ink-2:      #344542;
  --muted:      #5C6B68;   /* muted gray-green — secondary text */
  --paper:      #FFFFFF;   /* card surface */
  --canvas:     #FAF8F3;   /* warm cream — section background */
  --soft:       #E3EDEB;   /* soft mint — sage tile / badge bg */
  --line:       #E4DDD0;   /* warm tan — hairline border */
  --accent:     #2C5F5A;   /* deep teal — primary brand */
  --accent-2:   #234A46;   /* darker teal — hover */
  --plum:       #8A6420;   /* gold-brown — secondary accent */
  --plum-soft:  #F5EAD6;   /* soft cream-gold — step / palette tile */
  --mint:       #4A6B4A;   /* earthy green — tertiary accent */
  --mint-soft:  #E6EFE6;   /* soft sage — pdf tile */
  --peach:      #F5EAD6;   /* legacy var; remapped to cream-gold */
  --rose:       #F5EAD6;   /* legacy var; remapped to cream-gold */
  --amber:      #F5EAD6;   /* legacy var; remapped to cream-gold */

  margin: -2.25rem -1.5rem 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Poppins", "Inter", system-ui, sans-serif;
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
}
/* No glow / no gradient overlay — the new theme is intentionally
   flat. Keeping ::before empty in case anything later depends on
   the stacking context. */
.mv5::before { content: none; }
.mv5 * { letter-spacing: 0; }

/* Dark-mode landing — Rainblur theme. Near-black canvas with three
   large blurred radial blobs (purple/pink, green/indigo, magenta).
   The .mv5 token block flips so every .mv5-* rule reads dark
   variants through var() — "stick dark: in front" principle. */
html.dark .mv5 {
  --ink:        rgba(255, 255, 255, 0.92);  /* near-white body */
  --ink-2:      #E0E7FF;                    /* indigo-100 emphasis */
  --muted:      #818CF8;                    /* indigo-400 — body text */
  --paper:      rgba(17, 17, 30, 0.55);     /* glass card surface */
  --canvas:     #0A0A14;                    /* Rainblur near-black */
  --soft:       rgba(99, 102, 241, 0.12);   /* translucent indigo */
  --line:       rgba(148, 163, 184, 0.15);  /* slate-400 @ 15% */
  --accent:     #C084FC;                    /* purple-400 — pops on dark */
  --accent-2:   #F472B6;                    /* pink-400 — secondary */
  --plum:       #E879F9;                    /* fuchsia-400 — gradient stop */
  --plum-soft:  rgba(168, 85, 247, 0.18);
  --mint:       #4ADE80;                    /* green-400 — third gradient stop */
  --mint-soft:  rgba(34, 197, 94, 0.18);
  --peach:      rgba(217, 70, 239, 0.18);
  --rose:       rgba(244, 114, 182, 0.18);
  --amber:      rgba(74, 222, 128, 0.18);
}
/* Rainblur canvas — three blurred radial blobs positioned around
   the hero. The existing .mv5-hero__blob (Calm Trust pastel blob)
   is hidden so we get the multi-color Rainblur look only on dark. */
html.dark .mv5-hero { background: transparent; isolation: isolate; }
html.dark .mv5-hero__blob { display: none; }
html.dark .mv5-hero::before,
html.dark .mv5-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  -webkit-filter: blur(120px);
  filter: blur(120px);
  opacity: 0.55;
  z-index: -1;
  pointer-events: none;
}
html.dark .mv5-hero::before {
  width: 540px; height: 540px;
  top: -120px; left: -80px;
  background: radial-gradient(circle, #6B21A8 0%, #DB2777 55%, transparent 75%);
}
html.dark .mv5-hero::after {
  width: 620px; height: 620px;
  top: 80px; right: -140px;
  background: radial-gradient(circle, #22C55E 0%, #4F46E5 60%, transparent 80%);
}
html.dark .mv5-hero__rainbow {
  position: absolute;
  width: 380px; height: 380px;
  bottom: -160px; left: 30%;
  border-radius: 50%;
  background: radial-gradient(circle, #EC4899 0%, transparent 70%);
  -webkit-filter: blur(140px);
  filter: blur(140px);
  opacity: 0.4;
  z-index: -1;
  pointer-events: none;
}
.mv5-hero__rainbow { display: none; }              /* hidden in light mode */
html.dark .mv5-hero__rainbow { display: block; }   /* visible in dark mode */
/* Headline — white on dark; the accent span becomes a multi-color
   gradient text fill (purple → pink → green). */
html.dark .mv5-h1 { color: rgba(255, 255, 255, 0.92); }
html.dark .mv5-h1__hl {
  background: linear-gradient(90deg, #C084FC 0%, #F472B6 50%, #4ADE80 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* Pill — translucent indigo on dark glass with a backdrop-filter. */
html.dark .mv5-hero__pill {
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(129, 140, 248, 0.35);
  color: #A5B4FC;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
html.dark .mv5-hero__pill:hover {
  border-color: rgba(168, 85, 247, 0.55);
  box-shadow: 0 1px 4px rgba(168, 85, 247, 0.25);
}
html.dark .mv5-hero__pill-tag {
  background: linear-gradient(90deg, #A855F7, #22C55E);
  color: #fff;
}
html.dark .mv5-hero__pill-text { color: #A5B4FC; }
/* Lede — indigo-400 with brighter <em> emphasis. */
html.dark .mv5-lede { color: #818CF8; }
html.dark .mv5-lede em {
  color: #E0E7FF;
  font-style: normal;
  font-weight: 500;
}
/* Journey cards — proper glass: translucent dark, soft border,
   backdrop blur so the radial blobs bleed through. */
html.dark .mv5-journey__card {
  background: rgba(17, 17, 30, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.15);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
html.dark .mv5-journey__card:hover {
  border-color: rgba(168, 85, 247, 0.45);
  background: rgba(24, 24, 40, 0.7);
}
html.dark .mv5-journey__num {
  background: linear-gradient(135deg, #6B21A8 0%, #22C55E 100%);
  color: #fff;
  border-color: transparent;
}
html.dark .mv5-journey__title { color: rgba(255, 255, 255, 0.9); }
html.dark .mv5-journey__body  { color: #A5B4FC; }

/* ============================================================
   Rainblur dark-mode coverage for the REST of the landing —
   sections, invite-note, pricing, footer. The cream amber cards
   (calm-trust amber/orange decoration) get replaced with dark
   glass + the Rainblur palette so nothing reads as "still light".
   ============================================================ */

/* Section headings + body */
html.dark .mv5-section-head h2 { color: rgba(255, 255, 255, 0.92); }
html.dark .mv5-section-head h2 em { color: #C084FC; }
html.dark .mv5-section-head p { color: #A5B4FC; }
html.dark .mv5-section-eyebrow {
  background: rgba(99, 102, 241, 0.12);
  color: #C7D2FE;
  border: 1px solid rgba(129, 140, 248, 0.35);
}

/* Outcome cards (the 3-up row below the hero) — dark glass +
   purple/pink chip variants per color modifier. */
html.dark .mv5-out {
  background: rgba(17, 17, 30, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.15);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
html.dark .mv5-out:hover { border-color: rgba(168, 85, 247, 0.45); }
html.dark .mv5-out h4 { color: rgba(255, 255, 255, 0.9); }
html.dark .mv5-out p { color: #A5B4FC; }
html.dark .mv5-out .em      { background: rgba(99, 102, 241, 0.18); color: #C4B5FD; }
html.dark .mv5-out.plum .em { background: rgba(168, 85, 247, 0.22); color: #E9D5FF; }
html.dark .mv5-out.mint .em { background: rgba(74, 222, 128, 0.18); color: #BBF7D0; }

/* DRY card chip + flow sub-card — gradient chip + dark flow tile */
html.dark .mv5-out-chip {
  background: linear-gradient(90deg, #A855F7, #EC4899);
  color: #fff;
}
html.dark .mv5-dry-flow {
  background: rgba(168, 85, 247, 0.10);
  color: #F0ABFC;
}
html.dark .mv5-dry-flow__ic,
html.dark .mv5-dry-flow__ic--stack::before,
html.dark .mv5-dry-flow__ic--stack::after {
  background: rgba(217, 70, 239, 0.20);
  color: #F0ABFC;
}
html.dark .mv5-dry-flow__arr { color: #F0ABFC; }

/* Invite-note (was cream amber slab) → dark glass with purple
   accent rail, indigo body text, gradient eyebrow on the action
   card so it reads as part of Rainblur. */
html.dark .mv5-invite-note,
html.dark .mv5-invite-note-lead {
  background: rgba(17, 17, 30, 0.55);
  border: 1px solid rgba(168, 85, 247, 0.35);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
html.dark .mv5-invite-note-lead h3,
html.dark .mv5-invite-note-lead strong { color: #F5D0FE; }
html.dark .mv5-invite-note-lead p { color: #C7D2FE; }
html.dark .mv5-invite-note-lead em { color: #FBCFE8; font-style: italic; }
html.dark .mv5-invite-note-lead a { color: #C084FC; text-decoration: underline; }
html.dark .mv5-invite-note-lead a:hover { color: #E9D5FF; }
html.dark .mv5-invite-note-lead__action {
  background: rgba(168, 85, 247, 0.08);
  border-left-color: #A855F7;
}
html.dark .mv5-invite-note-lead__eyebrow { color: #F472B6; }
html.dark .mv5-invite-note-lead__action ul { color: #C7D2FE; }
html.dark .mv5-invite-note-lead__action li strong { color: #F5D0FE; }

/* Pricing cards — dark glass for the base, gradient highlight
   for the featured tier (.feat). */
html.dark .mv5-pricing .t {
  background: rgba(17, 17, 30, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.15);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: rgba(255, 255, 255, 0.9);
}
html.dark .mv5-pricing .t.feat {
  background: linear-gradient(140deg, #6B21A8 0%, #4F46E5 60%, #1E1B4B 100%);
  border: 1px solid rgba(192, 132, 252, 0.5);
}
html.dark .mv5-pricing .t .name { color: #C084FC; }
html.dark .mv5-pricing .t h4 { color: rgba(255, 255, 255, 0.92); }
html.dark .mv5-pricing .t .price { color: rgba(255, 255, 255, 0.92); }
html.dark .mv5-pricing .t .price small { color: #A5B4FC; }
html.dark .mv5-pricing .t .lead { color: #C7D2FE; }
html.dark .mv5-pricing .t ul li { color: #C7D2FE; }
html.dark .mv5-pricing .t.feat .name { color: #F472B6; }
html.dark .mv5-pricing .t.feat h4,
html.dark .mv5-pricing .t.feat .price { color: #fff; }
html.dark .mv5-pricing .t.feat p,
html.dark .mv5-pricing .t.feat ul li { color: rgba(255, 255, 255, 0.88); }
html.dark .mv5-pricing-foot { color: #A5B4FC; }
html.dark .mv5-pricing-foot strong { color: #C7D2FE; }

/* Final CTA band + footer */
html.dark .mv5-final { color: rgba(255, 255, 255, 0.92); }
html.dark .mv5-final h2 { color: #fff; }
html.dark .mv5-final p { color: #C7D2FE; }

/* The marketing canvas itself — make sure the page bg is the
   Rainblur near-black, not the calm-trust cream.
   Plan Step 0: bleed the canvas all the way to viewport edges.
   Lock every potential white-painting ancestor (html / body /
   main / .mv5 / .mv5-inner) to the Rainblur near-black so no
   white gutter leaks through, regardless of parent padding or
   negative-margin math. */
html.dark,
html.dark body,
html.dark main,
html.dark .mv5,
html.dark .mv5-inner { background-color: #0A0A14; }
/* Drop the negative side-margin too — when the body bg matches,
   the bleed-out hack isn't needed and only invites side-scrollbar
   gutter weirdness. */
html.dark .mv5 { margin-left: 0; margin-right: 0; }

/* Footer — flip from light slate to dark indigo */
html.dark .app-footer {
  background: rgba(10, 10, 20, 0.85);
  color: #A5B4FC;
  border-top: 1px solid rgba(148, 163, 184, 0.15);
}
html.dark .app-footer a { color: #C7D2FE; }
html.dark .app-footer a:hover { color: #C084FC; }
/* Hero pill — the inverted token combo (canvas + line) needs a
   touch more contrast in dark so the chrome border is visible. */
html.dark .mv5-hero__pill { background: var(--paper); border-color: var(--line); }
html.dark .mv5-hero__pill:hover { border-color: var(--accent); box-shadow: 0 1px 4px rgba(94, 175, 165, 0.18); }
/* Journey glass cards — translucent white on a dark canvas reads as
   gray fog; swap to a tinted dark surface with the standard hairline. */
html.dark .mv5-journey__card {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line);
}
html.dark .mv5-journey__num {
  background: var(--plum-soft);
  color: var(--plum);
  border-color: var(--line);
}
/* Outcome card icon tiles — keyed-color modifiers carry their own
   bg/text; the base sage tile flips to the dark-token equivalents. */
html.dark .mv5-out .em      { background: var(--soft); color: var(--accent); }
html.dark .mv5-out.plum .em { background: var(--plum-soft); color: var(--plum); }
html.dark .mv5-out.mint .em { background: var(--mint-soft); color: var(--mint); }
/* DRY card chip + flow sub-card — already use var(--plum) /
   var(--plum-soft) so they re-tint with the token swap. The flow
   icon "stack" decoration uses rgba(138,100,32,0.12) which is a
   hardcoded gold — lift the opacity slightly on dark so it shows. */
html.dark .mv5-dry-flow__ic,
html.dark .mv5-dry-flow__ic--stack::before,
html.dark .mv5-dry-flow__ic--stack::after { background: rgba(230, 194, 138, 0.18); }

/* Issue #35: every section on the landing shares the same column
   width — the outer wrapper, the hero inner, the journey row and
   the outcome row all snap to 1040px so the page reads as a single
   aligned spine instead of a stack of mismatched widths. */
.mv5-inner { max-width: 1040px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2rem); }

/* HERO — Tailwind UI "Simple centered with blob gradient" port.
   Centered text, massive headline (clamp), two huge blurred gradient
   blobs as bg decoration, glass-style 3-card journey row below. */
.mv5-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--paper);
  padding: 6rem 1.5rem 5rem;
}
@media (min-width: 640px) {
  .mv5-hero { padding: 8rem 2rem 6rem; }
}
.mv5-hero__inner {
  /* Issue #35: aligned to .mv5-inner (1040px) so the hero content
     spine matches every other section on the page. */
  max-width: 1040px;
  margin: 0 auto;
  text-align: center;
}
.mv5-hero__blob {
  position: absolute;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  filter: blur(64px);
  pointer-events: none;
}
.mv5-hero__blob--top    { top: -8rem; }
.mv5-hero__blob--bottom { bottom: -12rem; }
.mv5-hero__blob-shape {
  width: 72.1875rem;
  aspect-ratio: 1155 / 678;
  opacity: 0.32;
  background: linear-gradient(to top right, var(--plum) 0%, var(--accent) 55%, var(--soft) 100%);
  clip-path: polygon(74% 44%, 100% 62%, 97% 26%, 85% 0%, 80% 2%, 72% 33%, 60% 62%, 52% 68%, 47% 58%, 45% 34%, 27% 76%, 1% 65%, 18% 100%, 28% 77%, 76% 98%, 74% 44%);
}

.mv5-hero__pill-row {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}
.mv5-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.85rem 0.35rem 0.4rem;
  border-radius: 999px;
  background: var(--canvas);
  border: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--ink-2);
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.mv5-hero__pill:hover {
  border-color: var(--accent);
  box-shadow: 0 1px 4px rgba(44, 95, 90, 0.08);
}
.mv5-hero__pill-tag {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
}
.mv5-hero__pill-text { color: var(--ink-2); }

.mv5-h1 {
  font-family: "Poppins", "Inter", sans-serif;
  font-size: clamp(2.5rem, 6vw + 1rem, 5.25rem);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0 auto;
  max-width: 24ch;
}
.mv5-h1__hl {
  background: linear-gradient(120deg, var(--accent), var(--plum));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Legacy span hooks kept inert so older markup still renders if a
   cached page is served. */
.mv5-h1 .wave,
.mv5-h1 .hi {
  background: none;
  color: inherit;
  padding: 0;
  text-shadow: none;
}
.mv5-h1 .wave::after { content: none; }

.mv5-lede {
  margin: 2rem auto 0;
  max-width: 42rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}
@media (min-width: 640px) {
  .mv5-lede { font-size: 1.25rem; }
}
.mv5-lede em {
  font-style: italic;
  color: var(--accent);
  font-weight: 500;
}

.mv5-cta-row { display: inline-flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; justify-content: center; }
.mv5-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--ink);
  color: var(--paper);
  font: 600 1rem/1 "Inter", sans-serif;
  padding: 1rem 1.5rem;
  border-radius: 999px;
  text-decoration: none;
  border: 0;
  transition: transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 8px 20px -4px rgba(26,26,31,0.25);
}
.mv5-btn:hover { transform: translateY(-2px); color: var(--paper); box-shadow: 0 14px 28px -6px rgba(26,26,31,0.35); }
.mv5-btn .arr { transition: transform var(--transition); }
.mv5-btn:hover .arr { transform: translateX(3px); }
.mv5-btn-ghost {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 2px 6px -2px rgba(0,0,0,0.04);
}
.mv5-btn-ghost:hover { background: var(--soft); color: var(--ink); border-color: var(--peach); }

.mv5-trust {
  display: inline-flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 0.88rem;
  color: var(--muted);
  margin-top: 2rem;
}
.mv5-trust span { display: inline-flex; align-items: center; gap: 0.4rem; }
.mv5-trust span::before {
  content: "✓";
  display: inline-flex;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--mint);
  color: white;
  align-items: center; justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
}

/* Outcome cards — the "what you get" */
/* Calm Trust theme — outcome cards: flat white with a hairline tan
   border, soft icon tile in one of three pastel tones (sage / gold /
   green) keyed to the .plum / .mint / .amber modifiers. No shadow,
   no hover lift — the theme is intentionally quiet. */
.mv5-outcome {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 0 auto;
  max-width: 1040px;
  /* Top 14px = same as the in-grid gap, so the spacing between
     the journey row and the outcome row is uniform with the
     spacing between columns within each row. */
  padding: 14px clamp(1.25rem, 4vw, 1.75rem) 2.5rem;
}
.mv5-out {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  text-align: left;
  position: relative;
  transition: border-color var(--transition);
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Tall enough to fit the DRY card (chip head + h4 + body + flow
     sub-card) so all 6 hero cards share a uniform floor regardless
     of which has the richest content. */
  min-height: 260px;
}
.mv5-out:hover { transform: none; box-shadow: none; border-color: var(--accent); }
.mv5-out .em {
  display: inline-flex;
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--soft);                /* soft mint sage */
  color: var(--accent);                   /* deep teal */
  align-items: center; justify-content: center;
  font-size: 1.1rem;
  margin-bottom: 12px;
}
.mv5-out .em svg { width: 20px; height: 20px; }
.mv5-out.plum .em  { background: var(--plum-soft); color: var(--plum); }
.mv5-out.mint .em  { background: var(--mint-soft); color: var(--mint); }
.mv5-out.amber .em { background: var(--plum-soft); color: var(--plum); }
.mv5-out h4 {
  font-family: "Poppins", "Inter", sans-serif;
  font-weight: 500;
  font-size: 0.9375rem;
  margin: 0 0 6px;
  letter-spacing: 0;
  color: var(--ink);
}
.mv5-out p { font-size: 0.8125rem; line-height: 1.5; color: var(--muted); margin: 0; }
@media (max-width: 800px) { .mv5-outcome { grid-template-columns: 1fr; } }

/* DRY-philosophy card variant — richer middle card with a chip pill,
   richer body, and a tinted sub-card visualizing the flow. The other
   two cards stretch to match via grid + height:100% so the row stays
   balanced. */
.mv5-out-dry .mv5-out-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.mv5-out-dry .mv5-out-head .em { margin-bottom: 0; }
.mv5-out-chip {
  display: inline-block;
  padding: 3px 10px;
  background: var(--plum-soft);           /* soft cream-gold */
  color: var(--plum);                     /* gold-brown */
  font-size: 0.75rem;
  border-radius: 999px;
  font-weight: 400;
}
.mv5-dry-flow {
  margin-top: auto;                       /* push to bottom of card */
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--plum-soft);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.75rem;
  color: var(--accent-2);                 /* darker teal text */
}
.mv5-dry-flow__cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  font-weight: 500;
  line-height: 1.3;
}
.mv5-dry-flow__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(138, 100, 32, 0.12);   /* faint gold tint */
  color: var(--plum);
  flex-shrink: 0;
  position: relative;
}
.mv5-dry-flow__ic svg { width: 14px; height: 14px; }
/* "Stack" decoration on the right cell — a small offset card behind
   the icon to suggest duplication / many-places. */
.mv5-dry-flow__ic--stack::before,
.mv5-dry-flow__ic--stack::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(138, 100, 32, 0.12);
  z-index: -1;
}
.mv5-dry-flow__ic--stack::before { transform: translate(3px, 3px); }
.mv5-dry-flow__ic--stack::after  { transform: translate(6px, 6px); opacity: 0.5; }
.mv5-dry-flow__arr {
  color: var(--plum);
  font-weight: 400;
  flex-shrink: 0;
  font-size: 1rem;
}

/* ============================================================
   Hero journey — 3 numbered steps that visualize the workflow
   from guided prompts → listening → polished plan. Sits between
   the lede paragraph and the CTAs.
   ============================================================ */
/* Tailwind UI hero proof row — 3 glass cards with floating cream-gold
   number badges. Auto-fit columns so the row collapses to a single
   stack under ~600px.
   Issue #35: max-width 1040px so the row spine lines up with the
   rest of the page and the outcome cards below. */
.mv5-journey {
  list-style: none;
  padding: 0;
  margin: 5rem auto 0;
  display: grid;
  gap: 14px;
  max-width: 1040px;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  text-align: left;
}
.mv5-journey__card {
  position: relative;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 1.5rem 1.25rem 1.25rem;
}
.mv5-journey__num {
  position: absolute;
  top: -0.85rem;
  left: 1.25rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--plum-soft);
  color: var(--plum);
  font-weight: 700;
  font-size: 0.85rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
}
.mv5-journey__title {
  margin: 0.25rem 0 0.35rem;
  font-family: "Poppins", "Inter", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}
.mv5-journey__body {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
}
.mv5-step {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  text-align: left;
  position: relative;
  transition: border-color var(--transition);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Matches .mv5-out so all 6 cards (journey + outcome) share an
     identical floor — the DRY card sets the bar. */
  min-height: 260px;
}
.mv5-step:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--accent);
}
/* Calm Trust: the soft tinted blob and gradient icon tiles are
   removed. The card carries no decoration — just the gold step
   pill and the type hierarchy. */
.mv5-step::after { content: none; }
.mv5-step-icon { display: none; }

.mv5-step-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--plum);                     /* gold-brown */
  background: var(--plum-soft);           /* soft cream-gold */
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
  position: relative; z-index: 1;
}
.mv5-step h4 {
  font-family: "Poppins", "Inter", sans-serif;
  font-weight: 500;
  font-size: 0.9375rem;
  margin: 0 0 6px;
  letter-spacing: 0;
  color: var(--ink);
  position: relative; z-index: 1;
}
.mv5-step p {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
  position: relative; z-index: 1;
}

/* Connector arrows between steps on desktop. Hidden on the last
   card and on mobile (where steps stack). */
.mv5-step + .mv5-step::before {
  content: "→";
  position: absolute;
  left: -1.4rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--ink-2);
  opacity: 0.4;
  font-weight: 700;
}
@media (max-width: 800px) {
  .mv5-journey { grid-template-columns: 1fr; gap: 0.9rem; }
  .mv5-step + .mv5-step::before {
    content: "↓";
    left: 50%;
    top: -1.15rem;
    transform: translateX(-50%);
  }
}

/* Sections */
.mv5-section { padding: 6rem 0 2rem; }
.mv5-section-head {
  text-align: center;
  margin-bottom: 3rem;
}
.mv5-section-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--soft);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}
.mv5-section-head h2 {
  font-family: "Cal Sans", "Inter", sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0 auto 0.85rem;
  max-width: 18ch;
  color: var(--ink);
}
.mv5-section-head h2 em {
  font-style: normal;
  background: linear-gradient(180deg, transparent 65%, var(--amber) 65%, var(--amber) 92%, transparent 92%);
  padding: 0 0.05em;
}
.mv5-section-head p { color: var(--ink-2); max-width: 580px; margin: 0 auto; font-size: 1.05rem; line-height: 1.55; }

/* Features — rounded, light, with character */
.mv5-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.mv5-feat {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 2rem 1.75rem;
  position: relative;
  transition: transform var(--transition), box-shadow var(--transition);
}
.mv5-feat:hover { transform: translateY(-3px); box-shadow: 0 20px 36px -14px rgba(26,26,31,0.14); }
.mv5-feat .pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font: 600 0.72rem/1 "Inter", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.mv5-feat .pill.coral { background: var(--soft); color: var(--accent-2); }
.mv5-feat .pill.plum  { background: var(--plum-soft); color: var(--plum); }
.mv5-feat .pill.mint  { background: var(--mint-soft); color: var(--mint); }
.mv5-feat h4 {
  font-family: "Cal Sans", "Inter", sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
  color: var(--ink);
}
.mv5-feat p { font-size: 0.95rem; line-height: 1.6; color: var(--ink-2); margin: 0; }
@media (max-width: 900px) { .mv5-features { grid-template-columns: 1fr; } }

/* "Without / With" comparison block */
.mv5-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  max-width: 960px;
  margin: 0 auto;
}
.mv5-compare .col {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 2rem 1.75rem;
}
.mv5-compare .col.without { background: var(--soft); border-color: var(--peach); }
.mv5-compare .col .ttl {
  font: 700 0.78rem/1 "Inter", sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.mv5-compare .col.without .ttl { color: var(--accent-2); }
.mv5-compare .col.without .ttl::before { content: "—"; font-size: 1.2rem; }
.mv5-compare .col.with .ttl { color: var(--mint); }
.mv5-compare .col.with .ttl::before { content: "+"; font-size: 1.2rem; font-weight: 800; }
.mv5-compare .col h3 {
  font-family: "Cal Sans", "Inter", sans-serif;
  font-size: 1.45rem;
  margin: 0 0 1rem;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.mv5-compare .col ul { list-style: none; padding: 0; margin: 0; }
.mv5-compare .col ul li {
  padding: 0.55rem 0;
  font-size: 0.95rem;
  color: var(--ink-2);
  line-height: 1.5;
  display: flex; gap: 0.6rem;
  border-bottom: 1px solid rgba(26,26,31,0.06);
}
.mv5-compare .col ul li:last-child { border-bottom: 0; }
.mv5-compare .col.without ul li::before { content: "✕"; color: var(--accent-2); font-weight: 700; flex-shrink: 0; }
.mv5-compare .col.with    ul li::before { content: "✓"; color: var(--mint); font-weight: 700; flex-shrink: 0; }
@media (max-width: 720px) { .mv5-compare { grid-template-columns: 1fr; } }

/* Pricing */
.mv5-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
/* Issue #22: single-tier pricing — center the lone card with a
   sensible max width so it doesn't stretch across the section. */
.mv5-pricing-single { display: flex; justify-content: center; }
.mv5-pricing-single .t { width: 100%; max-width: 420px; }
.mv5-pricing .t {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 2rem 1.75rem;
  position: relative;
}
.mv5-pricing .t.feat {
  background: linear-gradient(180deg, var(--ink) 0%, #2a2a32 100%);
  border-color: var(--ink);
  color: var(--paper);
  box-shadow: 0 24px 50px -16px rgba(26,26,31,0.45);
}
.mv5-pricing .t.feat h4, .mv5-pricing .t.feat .price { color: var(--paper); }
.mv5-pricing .t.feat .name { color: var(--accent); }
.mv5-pricing .t.feat p, .mv5-pricing .t.feat ul li { color: rgba(255,255,255,0.85); }
.mv5-pricing .t.feat ul li::before { background: var(--accent); }
.mv5-pricing .t .name {
  font: 700 0.78rem/1 "Inter", sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}
.mv5-pricing .t h4 {
  font-family: "Cal Sans", "Inter", sans-serif;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  color: var(--ink);
}
.mv5-pricing .t .price {
  font-family: "Cal Sans", "Inter", sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.mv5-pricing .t .price small {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
  margin-top: 0.35rem;
  letter-spacing: 0;
}
.mv5-pricing .t.feat .price small { color: rgba(255,255,255,0.6); }
.mv5-pricing .t .lead { font-size: 0.95rem; color: var(--ink-2); margin: 1rem 0 1.5rem; line-height: 1.55; }
.mv5-pricing .t.feat .lead { color: rgba(255,255,255,0.8); }
.mv5-pricing .t ul { list-style: none; padding: 0; margin: 0 0 1.75rem; }
.mv5-pricing .t ul li { color: var(--ink-2); padding: 0.35rem 0; display: flex; gap: 0.5rem; font-size: 0.92rem; }
.mv5-pricing .t ul li::before {
  content: ""; flex-shrink: 0;
  width: 16px; height: 16px;
  background: var(--mint);
  border-radius: 50%;
  margin-top: 0.18rem;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6.5 11L3 7.5l1.4-1.4L6.5 8.2l5.1-5.1L13 4.5z'/></svg>") center/12px no-repeat;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6.5 11L3 7.5l1.4-1.4L6.5 8.2l5.1-5.1L13 4.5z'/></svg>") center/12px no-repeat;
}
.mv5-pricing .t .pbtn {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  width: 100%;
  padding: 0.9rem 1rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  font: 600 0.95rem/1 "Inter", sans-serif;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 6px 14px -4px rgba(26,26,31,0.3);
}
.mv5-pricing .t .pbtn:hover { transform: translateY(-1px); color: var(--paper); box-shadow: 0 12px 22px -6px rgba(26,26,31,0.4); }
.mv5-pricing .t .pbtn.ghost { background: var(--paper); color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.mv5-pricing .t .pbtn.ghost:hover { background: var(--soft); border-color: var(--peach); }
.mv5-pricing .t.feat .pbtn { background: var(--accent); color: var(--paper); }
.mv5-pricing .t.feat .pbtn:hover { background: var(--accent-2); color: var(--paper); }
.mv5-pricing .t .ribbon {
  position: absolute;
  top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--accent);
  color: white;
  font: 700 0.68rem/1 "Inter", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  box-shadow: 0 4px 12px -3px rgba(255,91,58,0.5);
}
@media (max-width: 800px) { .mv5-pricing { grid-template-columns: 1fr; } }
/* Two-tier variant — Ultimate is invite-only for orgs, not on the
   public landing. Keep the same cards but constrain max width so
   they don't stretch to 50% of a wide viewport. */
.mv5-pricing-two { grid-template-columns: repeat(2, minmax(260px, 360px)); justify-content: center; }
@media (max-width: 600px) { .mv5-pricing-two { grid-template-columns: 1fr; } }

.mv5-newsletter {
  margin: 4rem auto 0;
  max-width: 980px;
  padding: 2rem 1.5rem;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.mv5-newsletter-inner {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
}
@media (max-width: 700px) { .mv5-newsletter-inner { grid-template-columns: 1fr; } }
.mv5-newsletter h3 { margin: 0 0 0.4rem 0; font: 700 1.35rem/1.2 "Inter", sans-serif; }
.mv5-newsletter p  { margin: 0; font-size: 0.95rem; color: var(--slate-600); line-height: 1.55; }
.mv5-newsletter-form { display: flex; gap: 0.5rem; align-items: stretch; }
.mv5-newsletter-form input[type="email"] {
  flex: 1; min-width: 0;
  padding: 0.85rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  font: 500 0.95rem/1 "Inter", sans-serif;
}
.mv5-newsletter-flash {
  grid-column: 1 / -1;
  margin-top: 0.5rem;
  padding: 0.75rem 1rem;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #15803d;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9rem;
}

.mv5-pricing-foot {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--slate-600);
}
.mv5-pricing-foot strong { color: var(--ink); font-weight: 700; }

.mv5-invite-note {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 0.9rem;
  color: var(--slate-700);
  line-height: 1.55;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.mv5-invite-note strong {
  display: block;
  color: var(--ink);
  font-weight: 700;
  margin-bottom: 0.25rem;
}
/* Issue #18: lead variant — sits ABOVE the pricing cards, wider,
   more breathing room, headline-style.
   Issue #29: editorial two-column layout. Narrative on the left,
   tucked "how to join" action card on the right with an orange
   accent rail. Collapses to single column on mobile with the rail
   moving to the top edge of the card. */
.mv5-invite-note-lead {
  margin: 0 auto 2.25rem;
  max-width: 880px;
  padding: 1.75rem 2rem;
  text-align: left;
  background: #fff7ed;
  border-color: #fed7aa;
}
.mv5-invite-note-lead__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  column-gap: clamp(1.25rem, 3vw, 2.5rem);
  row-gap: 1.25rem;
  align-items: start;
}
.mv5-invite-note-lead__body > * + * { margin-top: 0.75rem; }
.mv5-invite-note-lead h3 {
  font: 800 1.25rem/1.3 "Cal Sans", "Inter", sans-serif;
  color: #9a3412;
  margin: 0 0 0.5rem;
}
.mv5-invite-note-lead p { margin: 0 0 0.6rem; }
.mv5-invite-note-lead__action {
  padding: 1rem 1.15rem;
  border-left: 3px solid #fb923c;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 0 8px 8px 0;
}
.mv5-invite-note-lead__eyebrow {
  font: 600 0.72rem/1 "Inter", sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #92400e;
  margin: 0 0 0.6rem;
}
.mv5-invite-note-lead__action ul {
  list-style: disc;
  padding-left: 1.1rem;
  margin: 0;
}
.mv5-invite-note-lead__action li + li { margin-top: 0.4rem; }
.mv5-invite-note-lead a { color: #9a3412; font-weight: 700; text-decoration: underline; }
.mv5-invite-note-lead a:hover { color: #7c2d12; }
@media (max-width: 720px) {
  .mv5-invite-note-lead__grid { grid-template-columns: 1fr; }
  .mv5-invite-note-lead__action {
    border-left: none;
    border-top: 3px solid #fb923c;
    border-radius: 0 0 8px 8px;
  }
}

/* Final CTA */
.mv5-final {
  text-align: center;
  padding: 5rem 2rem 6rem;
  margin: 6rem 0 0;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  border-radius: 32px 32px 0 0;
  color: white;
  position: relative;
  overflow: hidden;
}
.mv5-final::before {
  content: "";
  position: absolute;
  top: -30%; right: -10%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.mv5-final h2 {
  font-family: "Cal Sans", "Inter", sans-serif;
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0 auto 1.25rem;
  max-width: 16ch;
  color: white;
}
.mv5-final .lede { color: rgba(255,255,255,0.92); font-size: 1.15rem; margin: 0 auto 2rem; max-width: 520px; }
.mv5-final .mv5-btn { background: white; color: var(--accent); box-shadow: 0 12px 28px -6px rgba(0,0,0,0.25); }
.mv5-final .mv5-btn:hover { background: white; color: var(--accent-2); box-shadow: 0 18px 36px -8px rgba(0,0,0,0.32); }
.mv5-final .mv5-btn-ghost { background: rgba(255,255,255,0.12); color: white; border-color: rgba(255,255,255,0.3); }
.mv5-final .mv5-btn-ghost:hover { background: rgba(255,255,255,0.18); color: white; border-color: rgba(255,255,255,0.5); }

.mv5-foot {
  background: var(--accent-2);
  color: rgba(255,255,255,0.85);
  text-align: center;
  padding: 1.5rem 1rem 3rem;
  font-size: 0.88rem;
}
.mv5-foot a { color: white; text-decoration: underline; }
/* Rainblur dark — the .mv5-foot was pulling pink (#F472B6) from
   --accent-2. Replace with a shaded purple gradient and lock the
   text to full white for strong contrast. Links get a lighter
   lavender that pops on the purple bg. */
html.dark .mv5-foot {
  background: linear-gradient(135deg, #6B21A8 0%, #7E22CE 50%, #4C1D95 100%);
  color: rgba(255, 255, 255, 0.95);
}
html.dark .mv5-foot a {
  color: #E9D5FF;                          /* purple-200 — high contrast */
  text-decoration: underline;
  text-decoration-color: rgba(233, 213, 255, 0.6);
}
html.dark .mv5-foot a:hover {
  color: #ffffff;
  text-decoration-color: #ffffff;
}

/* === MV5 LANDING SLIDE DECK — Discord Blurple port of variant #29 === */
.mv5-deck {
  --bg: #1E1F22;
  --surface: #2B2D31;
  --surface-2: #313338;
  --surface-3: #383A40;
  --surface-4: #404249;
  --blurple: #5865F2;
  --blurple-hover: #4752C4;
  --blurple-dim: #3a44b0;
  --green: #23A559;
  --yellow: #F0B232;
  --red: #F23F42;
  --pink: #EB459E;
  --fuchsia: #EB459E;
  --text: #FFFFFF;
  --text-muted: #B5BAC1;
  --text-dim: #80848E;
  --border: #3F4147;
  --divider: #2D2F32;

  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', 'gg sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;

  scroll-snap-type: y proximity;
  overflow-y: auto;
}
.mv5-deck *, .mv5-deck *::before, .mv5-deck *::after { box-sizing: border-box; }
.mv5-deck::-webkit-scrollbar { width: 0; }

.mv5-deck section {
  min-height: 100vh;
  scroll-snap-align: start;
  padding: 64px 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Right rail nav */
.mv5-deck .rail {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 100;
}
.mv5-deck .rail a {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--surface-4);
  transition: all .2s ease;
  display: block;
  border: 2px solid transparent;
}
.mv5-deck .rail a:hover { background: var(--text-muted); }
.mv5-deck .rail a.active {
  background: var(--blurple);
  transform: scale(1.4);
  box-shadow: 0 0 12px rgba(88,101,242,.6);
}

/* Typography */
.mv5-deck h1, .mv5-deck h2, .mv5-deck h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
  /* Force white — the outer .mv5 inherits a dark --ink and the body's
     default color is also dark. Without this explicit value, any h2
     that doesn't set its own color (slide 2 "Stop creating PCPs")
     renders near-black on the #1E1F22 canvas. The site is dark-only
     now so this is always correct. */
  color: var(--text);
}
.mv5-deck p, .mv5-deck li, .mv5-deck span:not([class]) { color: var(--text); }
/* SVG-wordmark variants of the title heading. The base .s1-title /
   .s10-brand have huge font-size + gradient-text-fill which doesn't
   apply to an <svg> child; these variants strip those and size the
   SVG instead so it scales with the hero. */
.mv5-deck .s1-title--logo,
.mv5-deck .s10-brand--logo {
  font-size: 0;
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  -webkit-text-fill-color: initial;
  color: initial;
  margin-bottom: 24px;
}
.mv5-deck .s1-title--logo svg,
.mv5-deck .s10-brand--logo svg {
  display: block;
  width: clamp(280px, 60vw, 720px);
  height: auto;
  overflow: visible;
}
.mv5-deck .s10-brand--logo svg {
  width: clamp(260px, 50vw, 560px);
  margin: 0 auto;
}
.mv5-deck .eyebrow {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--blurple);
  margin-bottom: 18px;
}

/* === SLIDE 1: TITLE === */
.mv5-deck .slide-1 {
  background: radial-gradient(ellipse at 30% 20%, rgba(88,101,242,.18) 0%, transparent 55%),
              radial-gradient(ellipse at 75% 80%, rgba(235,69,158,.10) 0%, transparent 55%),
              var(--bg);
  align-items: flex-start;
}
.mv5-deck .blurple-blob-1 {
  position: absolute;
  top: -120px;
  right: -120px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, var(--blurple) 0%, transparent 70%);
  opacity: .25;
  filter: blur(20px);
}
.mv5-deck .wumpus-shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .14;
}
.mv5-deck .wumpus-shapes svg { position: absolute; }
.mv5-deck .s1-content { max-width: 900px; position: relative; z-index: 2; }
.mv5-deck .s1-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(88,101,242,.15);
  border: 1px solid rgba(88,101,242,.35);
  color: var(--blurple);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 28px;
}
.mv5-deck .s1-badge .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 8px var(--green);
}
.mv5-deck .s1-title {
  font-size: 140px;
  line-height: 0.9;
  background: linear-gradient(135deg, #fff 0%, #B9BBFA 60%, var(--blurple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 24px;
}
.mv5-deck .s1-sub {
  font-size: 32px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 40px;
  letter-spacing: -0.01em;
}
.mv5-deck .s1-pills {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 64px;
}
.mv5-deck .s1-pill {
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.mv5-deck .s1-pill svg { color: var(--blurple); }
.mv5-deck .s1-footer {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--blurple);
  color: #fff;
  padding: 16px 28px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 8px 24px rgba(88,101,242,.4);
}
.mv5-deck .s1-footer:hover { background: var(--blurple-hover); }

/* === SLIDE 2: STOP === */
.mv5-deck .slide-2 { background: var(--bg); }
.mv5-deck .s2-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: center;
}
.mv5-deck .s2-title {
  font-size: 76px;
  line-height: 1.0;
  margin-bottom: 24px;
}
.mv5-deck .s2-title em {
  font-style: normal;
  color: var(--red);
  text-decoration: line-through;
  text-decoration-color: rgba(242,63,66,.5);
  text-decoration-thickness: 4px;
}
.mv5-deck .s2-bottom {
  font-size: 28px;
  font-weight: 700;
  color: var(--blurple);
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.mv5-deck .s2-bottom svg { color: var(--blurple); }
.mv5-deck .s2-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mv5-deck .s2-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--red);
  border-radius: 8px;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 20px;
  font-weight: 600;
  position: relative;
}
.mv5-deck .s2-item .x {
  width: 36px; height: 36px;
  background: rgba(242,63,66,.18);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  font-weight: 900;
  font-size: 18px;
  flex-shrink: 0;
}
.mv5-deck .s2-item .msg-tail {
  position: absolute;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 500;
}

/* === SLIDE 3: MEET PCP MAKER === */
.mv5-deck .slide-3 { background: var(--bg); }
.mv5-deck .s3-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
}
.mv5-deck .s3-left h2 {
  font-size: 72px;
  margin-bottom: 36px;
  background: linear-gradient(120deg, #fff, var(--blurple) 110%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.mv5-deck .s3-list { display: flex; flex-direction: column; gap: 16px; }
.mv5-deck .s3-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 22px;
  font-size: 19px;
  font-weight: 600;
}
.mv5-deck .s3-item .check {
  width: 34px; height: 34px;
  background: var(--blurple);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(88,101,242,.35);
}
.mv5-deck .s3-item .check svg { color: #fff; }

/* === PCP MOCKUP (PARTICIPANT PAGE in dark) === */
.mv5-deck .pcp-page {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(88,101,242,.15);
  position: relative;
}
.mv5-deck .pcp-page::before {
  content: "PCPMaker.com";
  position: absolute;
  top: 10px;
  right: 18px;
  font-size: 10px;
  color: var(--text-dim);
  font-weight: 600;
  letter-spacing: 0.08em;
}
.mv5-deck .pcp-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.mv5-deck .pcp-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 14px;
  color: var(--blurple);
}
.mv5-deck .pcp-logo .lo {
  width: 24px; height: 24px;
  background: var(--blurple);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
}
.mv5-deck .pcp-page-num {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 600;
}
.mv5-deck .participant-card {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 22px;
  align-items: center;
}
.mv5-deck .avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blurple), var(--pink));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 900;
  font-size: 38px;
  position: relative;
  box-shadow: 0 0 0 4px var(--surface-2), 0 0 0 6px var(--blurple);
}
.mv5-deck .avatar::after {
  content: "";
  position: absolute;
  bottom: 4px; right: 4px;
  width: 20px; height: 20px;
  background: var(--green);
  border-radius: 50%;
  border: 3px solid var(--surface-2);
}
.mv5-deck .name {
  font-size: 30px;
  font-weight: 900;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}
.mv5-deck .meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mv5-deck .meta-pill {
  background: var(--surface-3);
  border: 1px solid var(--border);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.05em;
}
.mv5-deck .meta-pill.brand {
  background: rgba(88,101,242,.2);
  border-color: rgba(88,101,242,.4);
  color: #B9BBFA;
}
.mv5-deck .meta-pill.green {
  background: rgba(35,165,89,.2);
  border-color: rgba(35,165,89,.4);
  color: #7DD49B;
}
.mv5-deck .age-loc {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
}
.mv5-deck .facilitator-block {
  margin-top: 22px;
  padding: 16px;
  background: var(--surface-3);
  border-radius: 10px;
  border-left: 3px solid var(--blurple);
}
.mv5-deck .fac-label {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.mv5-deck .fac-name { font-size: 15px; font-weight: 700; }
.mv5-deck .fac-org { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.mv5-deck .fac-contact { font-size: 11px; color: var(--text-dim); margin-top: 4px; }

/* === SLIDE 4: TOC === */
.mv5-deck .slide-4 { background: var(--bg); }
.mv5-deck .s4-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items: center;
}
.mv5-deck .s4-left h2 {
  font-size: 64px;
  margin-bottom: 32px;
  letter-spacing: -0.03em;
}
.mv5-deck .s4-left h2 strong { color: var(--blurple); }
.mv5-deck .s4-list { display: flex; flex-direction: column; gap: 12px; }
.mv5-deck .s4-item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}
.mv5-deck .s4-item .ico {
  width: 32px; height: 32px;
  background: var(--surface-2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blurple);
  border: 1px solid var(--border);
}
.mv5-deck .toc-page {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 26px;
  box-shadow: 0 20px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(88,101,242,.12);
}
.mv5-deck .toc-title {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 2px;
  color: #fff;
}
.mv5-deck .toc-sub {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.mv5-deck .toc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-size: 11.5px;
}
.mv5-deck .toc-row .toc-ico {
  width: 22px; height: 22px;
  background: var(--surface-3);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blurple);
  flex-shrink: 0;
}
.mv5-deck .toc-row .toc-num {
  color: var(--text-dim);
  font-weight: 700;
  font-size: 10px;
  width: 14px;
}
.mv5-deck .toc-row .toc-name {
  color: var(--text);
  font-weight: 600;
  flex-shrink: 0;
}
.mv5-deck .toc-row .toc-leader {
  flex: 1;
  border-bottom: 1.5px dotted var(--surface-4);
  margin: 0 6px;
  transform: translateY(-3px);
}
.mv5-deck .toc-row .toc-pg {
  color: var(--blurple);
  font-weight: 800;
  font-size: 11px;
}

/* === SLIDE 5: BUILT AROUND THE PERSON === */
.mv5-deck .slide-5 { background: var(--bg); }
.mv5-deck .s5-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}
.mv5-deck .s5-left h2 {
  font-size: 84px;
  line-height: 1.0;
  margin-bottom: 18px;
}
.mv5-deck .s5-left .sub {
  font-size: 36px;
  font-weight: 600;
  color: var(--text-muted);
}
.mv5-deck .s5-left .sub strong {
  color: var(--blurple);
  font-weight: 900;
}
.mv5-deck .s5-bubble {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-2);
  border-radius: 18px;
  padding: 12px 18px;
  margin-top: 36px;
  font-size: 14px;
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.mv5-deck .s5-bubble .av {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--blurple));
}

/* === SLIDE 6: MODERN FACILITATORS === */
.mv5-deck .slide-6 {
  background:
    radial-gradient(ellipse at 80% 50%, rgba(88,101,242,.12) 0%, transparent 60%),
    var(--bg);
}
.mv5-deck .s6-content { max-width: 1100px; margin: 0 auto; width: 100%; }
.mv5-deck .s6-title {
  font-size: 76px;
  margin-bottom: 56px;
  text-align: center;
  letter-spacing: -0.03em;
}
.mv5-deck .s6-title em {
  font-style: normal;
  background: linear-gradient(120deg, var(--blurple), var(--pink));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.mv5-deck .s6-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.mv5-deck .s6-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 22px;
  text-align: center;
  transition: all .2s ease;
  position: relative;
  overflow: hidden;
}
.mv5-deck .s6-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--blurple);
}
.mv5-deck .s6-card .check-icon {
  width: 52px; height: 52px;
  background: rgba(88,101,242,.18);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  color: var(--blurple);
}
.mv5-deck .s6-card .lbl {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* === SLIDE 7: EVERY PAGE === */
.mv5-deck .slide-7 { background: var(--bg); }
.mv5-deck .s7-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 56px;
  align-items: center;
}
.mv5-deck .s7-left h2 {
  font-size: 64px;
  line-height: 1.0;
  margin-bottom: 32px;
}
.mv5-deck .s7-collage {
  position: relative;
  height: 580px;
}
.mv5-deck .thumb {
  position: absolute;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
  overflow: hidden;
}
.mv5-deck .thumb .th-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--blurple);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mv5-deck .thumb-behavior {
  width: 460px;
  top: 0; left: 0;
  transform: rotate(-4deg);
  z-index: 3;
}
.mv5-deck .thumb-calendar {
  width: 420px;
  top: 80px; right: 0;
  transform: rotate(3deg);
  z-index: 2;
}
.mv5-deck .thumb-smart {
  width: 380px;
  bottom: 0; left: 80px;
  transform: rotate(-2deg);
  z-index: 4;
}

/* Behavior chart */
.mv5-deck .bc-table { width: 100%; font-size: 9px; border-collapse: collapse; }
.mv5-deck .bc-table th {
  background: var(--blurple);
  color: #fff;
  padding: 6px 6px;
  font-size: 8px;
  text-align: left;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.mv5-deck .bc-table td {
  padding: 7px 6px;
  background: var(--surface-3);
  color: var(--text-muted);
  border-bottom: 1px solid var(--surface-4);
  vertical-align: top;
  line-height: 1.35;
}
.mv5-deck .bc-table tr:nth-child(even) td { background: var(--surface-2); }

/* Service calendar */
.mv5-deck .sc-grid {
  display: grid;
  grid-template-columns: 36px repeat(7, 1fr);
  gap: 2px;
  font-size: 8px;
}
.mv5-deck .sc-grid .h {
  background: var(--blurple);
  color: #fff;
  padding: 4px 2px;
  text-align: center;
  font-weight: 700;
  border-radius: 2px;
}
.mv5-deck .sc-grid .t {
  background: var(--surface-3);
  color: var(--text-muted);
  padding: 4px 2px;
  text-align: center;
  font-weight: 600;
}
.mv5-deck .sc-grid .c {
  padding: 4px 2px;
  text-align: center;
  font-weight: 700;
  border-radius: 2px;
  color: #fff;
}
.mv5-deck .c-ihss { background: #5865F2; }
.mv5-deck .c-pa { background: #EB459E; }
.mv5-deck .c-st { background: #F0B232; color: #1E1F22; }
.mv5-deck .c-pc { background: #23A559; }
.mv5-deck .c-resp { background: #00A8FC; }
.mv5-deck .c-as { background: #F23F42; }
.mv5-deck .c-empty { background: var(--surface-3); }
.mv5-deck .sc-legend {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 4px;
  margin-top: 8px;
  font-size: 7.5px;
}
.mv5-deck .sc-legend .lg {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
}
.mv5-deck .sc-legend .sw { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

/* SMART goal */
.mv5-deck .sg-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.mv5-deck .sg-num {
  background: var(--blurple);
  color: #fff;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
}
.mv5-deck .sg-title {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  flex: 1;
}
.mv5-deck .sg-badge {
  background: rgba(35,165,89,.2);
  color: var(--green);
  border: 1px solid rgba(35,165,89,.4);
  font-size: 8px;
  padding: 3px 7px;
  border-radius: 999px;
  font-weight: 700;
}
.mv5-deck .sg-body {
  font-size: 9.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 10px;
}
.mv5-deck .sg-tag {
  background: var(--surface-3);
  color: var(--blurple);
  padding: 4px 8px;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 700;
  display: inline-block;
  border: 1px solid var(--border);
}
.mv5-deck .sg-status {
  margin-top: 8px;
  font-size: 9px;
  color: var(--green);
  font-weight: 700;
}

/* === SLIDE 8: IMPRESS EVERYONE === */
.mv5-deck .slide-8 { background: var(--bg); }
.mv5-deck .s8-content { max-width: 1100px; margin: 0 auto; width: 100%; }
.mv5-deck .s8-title {
  font-size: 92px;
  margin-bottom: 56px;
  text-align: center;
  letter-spacing: -0.03em;
}
.mv5-deck .s8-title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--blurple), var(--pink) 60%, var(--yellow));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.mv5-deck .s8-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.mv5-deck .audience-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.mv5-deck .audience-card::after {
  content: "";
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(88,101,242,.15) 0%, transparent 50%);
  pointer-events: none;
}
.mv5-deck .ac-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--blurple);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  color: #fff;
  position: relative;
  z-index: 1;
  box-shadow: 0 8px 20px rgba(88,101,242,.4);
}
.mv5-deck .audience-card:nth-child(2) .ac-icon { background: var(--pink); box-shadow: 0 8px 20px rgba(235,69,158,.4); }
.mv5-deck .audience-card:nth-child(3) .ac-icon { background: var(--green); box-shadow: 0 8px 20px rgba(35,165,89,.4); }
.mv5-deck .audience-card:nth-child(4) .ac-icon { background: var(--yellow); box-shadow: 0 8px 20px rgba(240,178,50,.4); color: #1E1F22; }
.mv5-deck .ac-name {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
  margin-bottom: 6px;
}
.mv5-deck .ac-tag {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

/* === SLIDE 9: CONVERSATION TO DOCUMENTATION === */
.mv5-deck .slide-9 { background: var(--bg); }
.mv5-deck .s9-grid {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: 32px;
  align-items: center;
}
.mv5-deck .s9-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mv5-deck .s9-label {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}
.mv5-deck .s9-label.right { text-align: right; }
.mv5-deck .s9-label em {
  font-style: normal;
  color: var(--blurple);
}
.mv5-deck .meeting-illust {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.mv5-deck .chat-stack {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 12px;
}
.mv5-deck .chat {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.mv5-deck .chat .a {
  width: 36px; height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}
.mv5-deck .chat .b {
  background: var(--surface-3);
  padding: 10px 14px;
  border-radius: 12px;
  border-top-left-radius: 4px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
  max-width: 80%;
}
.mv5-deck .chat .b .who {
  font-size: 11px;
  color: var(--blurple);
  font-weight: 700;
  display: block;
  margin-bottom: 2px;
}
.mv5-deck .arrow-down {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: var(--blurple);
}
.mv5-deck .arrow-down .lbl {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  text-align: center;
}
.mv5-deck .arrow-icon {
  width: 64px; height: 64px;
  background: var(--blurple);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(88,101,242,.4);
  animation: mv5-deck-pulse 2s infinite;
}
@keyframes mv5-deck-pulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(88,101,242,.4); }
  50% { box-shadow: 0 8px 32px rgba(88,101,242,.7); }
}
.mv5-deck .s9-thumb {
  background: var(--surface-3);
  border-radius: 12px;
  padding: 16px;
  flex: 1;
  margin-top: 14px;
  overflow: hidden;
}

/* === SLIDE 10: BRAND === */
.mv5-deck .slide-10 {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(88,101,242,.22) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(235,69,158,.12) 0%, transparent 50%),
    var(--bg);
  align-items: center;
  text-align: center;
}
.mv5-deck .s10-content { max-width: 900px; }
.mv5-deck .s10-logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.mv5-deck .s10-logo .lo {
  width: 64px; height: 64px;
  background: var(--blurple);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 900;
  font-size: 28px;
  box-shadow: 0 10px 30px rgba(88,101,242,.5);
}
.mv5-deck .s10-brand {
  font-size: 96px;
  background: linear-gradient(135deg, #fff 0%, #B9BBFA 60%, var(--blurple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.04em;
}
.mv5-deck .s10-tagline {
  font-size: 32px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 48px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.mv5-deck .s10-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--blurple);
  color: #fff;
  padding: 22px 40px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.01em;
  box-shadow: 0 12px 40px rgba(88,101,242,.5);
  transition: all .2s ease;
  text-decoration: none;
}
.mv5-deck .s10-cta:hover { background: var(--blurple-hover); transform: translateY(-2px); }
.mv5-deck .s10-meta {
  margin-top: 36px;
  display: flex;
  justify-content: center;
  gap: 18px;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
}
.mv5-deck .s10-meta .d {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--text-dim);
  align-self: center;
}

/* Mobile */
@media (max-width: 768px) {
  .mv5-deck section { padding: 36px 22px; }
  .mv5-deck .s2-grid,
  .mv5-deck .s3-grid,
  .mv5-deck .s4-grid,
  .mv5-deck .s5-grid,
  .mv5-deck .s7-grid,
  .mv5-deck .s9-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .mv5-deck .s1-title { font-size: 64px; }
  .mv5-deck .s1-sub { font-size: 20px; }
  .mv5-deck .s2-title,
  .mv5-deck .s5-left h2,
  .mv5-deck .s6-title,
  .mv5-deck .s7-left h2,
  .mv5-deck .s8-title { font-size: 40px; }
  .mv5-deck .s10-brand { font-size: 56px; }
  .mv5-deck .s10-tagline { font-size: 18px; }
  .mv5-deck .s6-grid { grid-template-columns: repeat(2, 1fr); }
  .mv5-deck .s8-cards { grid-template-columns: repeat(2, 1fr); }
  .mv5-deck .rail { display: none; }
  .mv5-deck .thumb-behavior,
  .mv5-deck .thumb-calendar,
  .mv5-deck .thumb-smart {
    position: relative;
    width: 100% !important;
    transform: none !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    margin-bottom: 16px;
  }
  .mv5-deck .s7-collage { height: auto; }
  .mv5-deck .s9-grid { grid-template-rows: auto auto auto; }
}