/* ════════════════════════════════════════════════════════════════
   Meridian landing — Astra hero. Scoped under .meridian-landing-root
   so the galaxy tokens never leak into the rest of the app. Ported
   faithfully from design_handoff_landing/design_refs/index.html.

   STATIC PORT NOTE: This file is the verbatim contents of the React app's
   frontend/src/components/landing/astra/landing.css, followed by the verbatim
   contents of frontend/src/components/astra/AstraOrb.css (so the orb renders
   without React), followed by a small sign-in-modal form block that reuses the
   existing .ml-overlay / .ml-modal styles defined above. Nothing in the original
   stylesheets was altered.
   ════════════════════════════════════════════════════════════════ */

.meridian-landing-root {
  /* surfaces */
  --bg-void:#07080D; --bg-0:#0F1117; --bg-1:#14182A; --bg-2:#181D33;
  --bg-3:#1E2438; --bg-4:#252C44; --input-bg:#1A2030;
  /* primary violet */
  --violet:#7C68FA; --violet-bright:#9486FF; --violet-dim:rgba(124,104,250,0.12);
  --violet-glow:rgba(124,104,250,0.30);
  /* agent teal */
  --teal:#00D6AC; --teal-bright:#2DD4BF; --teal-dim:rgba(0,214,172,0.12);
  --teal-glow:rgba(45,212,191,0.22);
  /* signal */
  --emerald:#34D399; --amber:#FBBF24; --blue:#5B8DEF; --red:#FF6B6B; --pink:#F472B6;
  /* text */
  --text-1:#DAE0EC; --text-2:#99A3BD; --text-3:#5C6582; --text-violet:#A99BE8; --text-strong:#F4F6FB;
  /* borders */
  --border-1:rgba(255,255,255,0.07); --border-2:#2B3347;
  --border-v:rgba(124,104,250,0.35); --border-t:rgba(0,214,172,0.30);
  /* gradients */
  --grad-brand:linear-gradient(135deg,#7C68FA 0%,#00D6AC 100%);
  --accent-contrast:#07221E;
  /* type */
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace;
  --fs-display:clamp(40px,5.5vw,72px); --fs-h1:clamp(28px,4vw,44px);
  --lh-tight:1.04; --lh-relaxed:1.65; --ls-display:-2px;
  --fs-lead:18px;
  /* layout */
  --container:1200px; --gutter:32px; --nav-height:60px;
  /* radii */
  --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:12px; --r-2xl:16px; --r-pill:100px;
  /* elevation */
  --shadow-card:0 4px 16px rgba(0,0,0,0.35); --shadow-pop:0 12px 32px rgba(0,0,0,0.45);
  --shadow-modal:0 40px 120px rgba(0,0,0,0.7),0 0 100px rgba(124,104,250,0.10);
  --glow-violet:0 0 40px rgba(124,104,250,0.25); --glow-teal:0 0 40px rgba(0,214,172,0.22);
  /* motion */
  --ease-out:cubic-bezier(0.4,0,0.2,1); --ease-pop:cubic-bezier(0.2,0.9,0.3,1.3);
  --dur-fast:150ms; --dur:200ms; --dur-slow:320ms; --dur-panel:520ms;

  color: var(--text-1);
  font-family: var(--font-sans);
}
.meridian-landing-root a { text-decoration: none; color: inherit; }
.meridian-landing-root *, .meridian-landing-root *::before, .meridian-landing-root *::after { box-sizing: border-box; }

/* ── Fixed background layers ── */
/* Single fixed galaxy backdrop (no drifting parallax layer — it read as a
   misaligned floating panel against the snapping sections). Aligned to the
   viewport; the only scroll-linked motion is the warp starfield. */
.ml-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 55% at 50% -8%, rgba(124,104,250,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 12%, rgba(0,214,172,0.12) 0%, transparent 55%),
    radial-gradient(ellipse 46% 42% at 16% 24%, rgba(124,104,250,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 42% 40% at 88% 66%, rgba(0,214,172,0.07) 0%, transparent 62%),
    radial-gradient(ellipse 90% 70% at 50% 120%, rgba(124,104,250,0.12) 0%, transparent 60%),
    #0F1117; }
.ml-bg::before { content:''; position:absolute; inset:0;
  background-image: radial-gradient(rgba(170,155,232,0.10) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 100% 65% at 50% 0%, black 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 100% 65% at 50% 0%, black 0%, transparent 78%); }
.ml-starfield { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* ── Scroll container (snap) ── */
.ml-scroll { position: fixed; inset: 0; z-index: 1; overflow-y: auto; overflow-x: hidden;
  scroll-snap-type: y mandatory; scroll-padding: 0; scroll-behavior: auto; }
/* center snap: each section is one viewport tall with its content centered, so it
   always rests perfectly centered and fully visible (a slight scroll snaps back). */
.ml-hero, .ml-sec, .ml-cta-band { scroll-snap-align: center; scroll-snap-stop: always; }
.ml-wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* ── Live pulse dot ── */
.ml-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald);
  box-shadow: 0 0 8px currentColor; color: var(--emerald); animation: ml-pulse 2s ease infinite; }
@keyframes ml-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

/* ── Nav ── */
.ml-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--nav-height);
  background: rgba(15,17,23,0.72); backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%); border-bottom: 1px solid var(--border-1); }
.ml-nav-inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); height: 100%;
  display: flex; align-items: center; justify-content: space-between; }
.ml-brand { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; color: #fff; letter-spacing: -0.5px; }
.ml-brand .ml-glyph { width: 30px; height: 30px; border-radius: 8px; background: var(--grad-brand);
  display: grid; place-items: center; font-size: 15px; font-weight: 800; color: #fff; box-shadow: var(--glow-violet); }
.ml-nav-links { display: flex; gap: 30px; }
.ml-nav-links a { font-size: 13.5px; color: var(--text-2); font-weight: 500; cursor: pointer; }
.ml-nav-links a:hover { color: var(--text-1); }
.ml-nav-actions { display: flex; gap: 14px; align-items: center; }
.ml-signin { font-size: 13px; color: var(--text-2); font-weight: 600; cursor: pointer; background: none; border: none; }
.ml-signin:hover { color: var(--text-1); }

/* ── Buttons ── */
.ml-cta-primary { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-sans);
  font-size: 16px; font-weight: 700; color: #fff; background: var(--violet); border: none; border-radius: var(--r-md);
  padding: 15px 30px; cursor: pointer; box-shadow: var(--glow-violet);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.ml-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 0 56px rgba(124,104,250,0.45); }
.ml-cta-primary.ml-cta-nav { padding: 9px 18px; font-size: 13.5px; font-weight: 600; box-shadow: none; }
.ml-cta-primary.ml-cta-nav:hover { box-shadow: var(--glow-violet); }
.ml-ghost { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-sans);
  font-size: 16px; font-weight: 700; color: var(--text-1); background: transparent; border: 1px solid var(--border-2);
  border-radius: var(--r-md); padding: 15px 30px; cursor: pointer;
  transition: transform var(--dur) var(--ease-out), border-color var(--dur), color var(--dur); }
.ml-ghost:hover { transform: translateY(-2px); border-color: var(--border-v); color: #fff; }

/* ── Hero ── */
.ml-hero { padding: 88px 0 44px; min-height: 100vh; box-sizing: border-box; display: flex; align-items: safe center; }
.ml-hero-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 56px; align-items: center; }
.ml-hero-left { display: flex; flex-direction: column; justify-content: center; gap: 0; }
.ml-hero-right { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.ml-he-top { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.ml-he-bottom { width: 100%; display: flex; flex-direction: column; align-items: flex-start; }
.ml-hero-right .ml-he-top { overflow: visible; }
.ml-hero-right .ml-he-bottom .ml-tagline { margin-bottom: 4px; }
.ml-hero-right .ml-he-bottom .ml-waitlist-h { margin-top: 8px; }
.ml-orb-zone { width: 100%; height: 150px; flex-shrink: 0; }

.ml-hero h1 { font-size: var(--fs-display); font-weight: 800; line-height: var(--lh-tight);
  letter-spacing: var(--ls-display); color: #fff; margin: 0 0 18px; }
.ml-grad { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ml-lead { font-size: var(--fs-lead); color: var(--text-2); line-height: var(--lh-relaxed); max-width: 520px; margin: 0 0 14px; }
.ml-lead strong { color: var(--text-1); font-weight: 600; }
.ml-powered { font-size: 14px; color: var(--text-violet); margin: 0 0 20px; line-height: 1.7; }
.ml-powered em { font-style: italic; }
.ml-powered .ml-powered-tag { font-style: normal; }
.ml-powered a { color: var(--teal); font-weight: 600; border-bottom: 1px dashed var(--border-t); padding-bottom: 1px; cursor: pointer; }
.ml-powered a:hover { opacity: 0.85; }
/* Left-column CTA sits directly below the relocated rotating tagline. The hover
   sub-text ("An idea is all you need") was removed — the button reads plainly. A
   small top margin nudges it down to breathe under the tagline. */
.ml-hero-left .ml-he-bottom .ml-cta-primary { margin-top: 6px; }

/* rotating audience word */
.ml-tagline { font-size: 16px; color: var(--text-1); font-weight: 500; line-height: 1.5; margin: 0 0 18px; white-space: nowrap; }
.ml-role-cycle { display: inline-block; position: relative; min-width: 150px; margin-left: 6px; text-align: left; }
.ml-role-word { display: inline-block; white-space: nowrap; font-weight: 800; letter-spacing: -0.2px;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 12px rgba(124,104,250,0.45)); animation: ml-role-swap 0.5s var(--ease-pop); }
@keyframes ml-role-swap { 0% { transform: translateY(42%) scale(0.95); } 60% { transform: translateY(-6%) scale(1.02); } 100% { transform: translateY(0) scale(1); } }

/* waitlist field */
.ml-waitlist-h { font-size: 15px; font-weight: 700; color: var(--text-1); margin: 28px 0 12px; display: flex; align-items: center; gap: 8px; }
.ml-waitlist-h .ml-arrow { color: var(--teal); }
.ml-waitlist { display: flex; gap: 10px; width: 100%; max-width: 440px; }
.ml-waitlist input { flex: 1; min-width: 0; background: var(--input-bg); border: 1px solid var(--border-2);
  color: var(--text-1); font-family: var(--font-sans); font-size: 14px; border-radius: var(--r-md); padding: 12px 14px;
  outline: none; transition: border-color var(--dur), box-shadow var(--dur); }
.ml-waitlist input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-dim); }
.ml-waitlist button { flex-shrink: 0; background: var(--teal); color: var(--accent-contrast); border: none;
  border-radius: var(--r-md); padding: 0 20px; font-weight: 700; font-size: 14px; cursor: pointer;
  transition: opacity var(--dur), transform var(--dur-fast); }
.ml-waitlist button:hover:not(:disabled) { opacity: 0.9; transform: translateY(-1px); }
.ml-waitlist button:disabled { opacity: 0.5; cursor: default; }
.ml-waitlist-ok { color: var(--emerald); font-size: 13px; display: flex; align-items: center; gap: 8px; padding: 12px 0; font-weight: 500; max-width: 440px; }
.ml-waitlist-err { color: var(--red); font-size: 12.5px; margin-top: 8px; max-width: 440px; }

/* Consent checkboxes — both required before signup (no rights to your data; accept terms). */
.ml-consent { display: flex; flex-direction: column; gap: 11px; margin: 0 0 16px; text-align: left; max-width: 440px; }
.ml-consent-row { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; color: var(--text-2); line-height: 1.5; cursor: pointer; }
.ml-consent-row input { margin: 2px 0 0; width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--teal); cursor: pointer; }
.ml-consent-row a { color: var(--teal); font-weight: 600; border-bottom: 1px solid var(--border-t); }
.ml-consent-row a:hover { opacity: 0.85; }

/* product video frame */
.ml-video-frame { position: relative; }
.ml-hero-right .ml-video-frame { width: 110%; margin-left: -5%; }
.ml-browser { border-radius: var(--r-2xl); overflow: hidden; border: 1px solid rgba(255,255,255,0.10); box-shadow: var(--shadow-modal); }
.ml-browser-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: rgba(20,24,42,0.9); border-bottom: 1px solid var(--border-1); }
.ml-browser-bar .ml-dot { width: 11px; height: 11px; border-radius: 50%; }
.ml-browser-bar .ml-url { flex: 1; margin-left: 10px; height: 24px; border-radius: 6px; background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-1); display: flex; align-items: center; padding: 0 12px; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.ml-browser-bar .ml-live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--emerald); letter-spacing: 0.06em; }
/* Full 16:9 — the source is 16:9 so object-fit: cover fills with no crop. */
.ml-video-shot { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.ml-video-shot img,
.ml-video-shot .ml-video-el { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; background: var(--bg-2); }
.ml-video-scan { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(0,214,172,0.06), transparent); height: 36%; animation: ml-vscan 4.5s ease-in-out infinite; }
@keyframes ml-vscan { 0%{ transform: translateY(-40%); opacity:0;} 20%,80%{opacity:1;} 100%{ transform: translateY(280%); opacity:0;} }
.ml-play-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 64px; height: 64px;
  border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff;
  background: rgba(255,255,255,0.08); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.25); box-shadow: 0 8px 32px rgba(0,0,0,0.2); }
/* Three button-like kicker chips overlaid on the video, spaced full-width
   (mono/teal, matching the .ml-kind "Neural EKF" subtext style), in a row ABOVE
   the video (in normal flow, not overlaid). */
.ml-video-tags { display: flex; align-items: center; justify-content: space-between;
  gap: 9px; margin-bottom: 16px; }
/* +10% larger box/type. A soft light continuously runs around each chip's border;
   the chips brighten one after another with a smooth ~1.6s crossfade (subtle, not
   abrupt) so focus glides Discovery → Market Research → Vibe Coding → Project
   Management and loops. The conic-gradient angle animates via @property. */
@property --ml-chip-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.ml-video-tag { position: relative; isolation: isolate;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--teal); background: rgba(7,8,13,0.66); border: 1px solid var(--border-t); border-radius: var(--r-pill);
  padding: 7px 15.5px; white-space: nowrap;
  transition: color 1.1s var(--ease-out); }
.ml-video-tag::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--ml-chip-angle), rgba(0,214,172,0) 0deg, rgba(0,214,172,0) 255deg, rgba(0,214,172,0.85) 320deg, #d8fff5 345deg, rgba(0,214,172,0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0;
  animation: ml-chip-trace 2.4s linear infinite, ml-chip-cycle 8s ease-in-out infinite; }
@keyframes ml-chip-trace { to { --ml-chip-angle: 360deg; } }
@keyframes ml-chip-cycle { 0%, 100% { opacity: 0; } 6% { opacity: 1; } 20% { opacity: 1; } 30% { opacity: 0; } }
.ml-video-tag:nth-child(1)::before { animation-delay: 0s, 0s; }
.ml-video-tag:nth-child(2)::before { animation-delay: 0s, 2s; }
.ml-video-tag:nth-child(3)::before { animation-delay: 0s, 4s; }
.ml-video-tag:nth-child(4)::before { animation-delay: 0s, 6s; }

/* ── Sections ── */
.ml-sec { padding: 84px 0; min-height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; justify-content: safe center; position: relative; }
.ml-sec > .ml-wrap { width: 100%; }
.ml-sec-head { text-align: center; margin-bottom: 34px; }
.ml-eyebrow { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--violet); margin-bottom: 14px; }
.ml-sec-head h2 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.6px; color: #fff; margin: 0 0 14px; }
.ml-sec-head p { font-size: 16px; color: var(--text-2); line-height: 1.6; max-width: 620px; margin: 0 auto; }

/* glassy card base shared by tech/steps/modules — no backdrop-filter (it forces
   a full recomposite every scroll frame across ~10 cards); an opaque-enough
   translucent fill reads identically on the dark galaxy and stays at 60fps. */
.ml-card { background: linear-gradient(160deg, rgba(31,37,58,0.92), rgba(16,19,30,0.95));
  border: 1px solid rgba(255,255,255,0.10); border-radius: var(--r-2xl);
  transition: transform var(--dur-slow) var(--ease-out), border-color var(--dur-slow), box-shadow var(--dur-slow); }
.ml-card:hover { transform: translateY(-6px); border-color: var(--border-v); box-shadow: var(--shadow-pop), 0 0 54px rgba(124,104,250,0.14); }

/* Technology */
.ml-tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ml-tech-card { padding: 22px; position: relative; overflow: hidden; cursor: pointer; }
.ml-tech-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background: linear-gradient(90deg, transparent, var(--violet), var(--teal), transparent); opacity:0.7; }
.ml-tech-num { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); letter-spacing: 0.1em; }
.ml-tech-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin: 14px 0 18px; background: var(--violet-dim); border: 1px solid var(--border-v); color: var(--violet-bright); }
.ml-tech-card h3 { font-size: 19px; font-weight: 700; color: #fff; margin: 0 0 6px; }
.ml-kind { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--teal); margin-bottom: 12px; }
.ml-tech-card p { font-size: 13.5px; color: var(--text-2); line-height: 1.65; margin: 0; }
.ml-tech-more { text-align: center; margin-top: 26px; }

/* ════════════════════════════════════════════════════════════════
   Core-technology flow animations (Synchronizer · Synthesizer ·
   Simulator). Recreated from design_handoff_core_technology. The
   sy-* / sz-* / sm-* class namespaces + @keyframes names are kept
   verbatim so the inline SVGs animate untouched. Scoped under
   .meridian-landing-root so they never leak into the rest of the app.
   Packet motion uses CSS `offset-path: path(...)` (modern browsers;
   a SMIL <animateMotion> on the same path is the fallback for very
   old engines).
   ════════════════════════════════════════════════════════════════ */

/* animation frame — replaces the static icon at the top of each tech card */
.meridian-landing-root .ml-tech-anim {
  position: relative; margin: 14px 0 18px; border-radius: var(--r-lg);
  overflow: hidden; border: 1px solid var(--border-2); background: var(--bg-0); line-height: 0;
}
.meridian-landing-root .ml-tech-anim > svg,
.meridian-landing-root .ml-ctmodal-stage > svg { display: block; width: 100%; height: auto; }

/* — Synchronizer (.sy-*) — */
.meridian-landing-root .sy-bar { transform-box: fill-box; transform-origin: bottom; animation: syBar 2.4s ease-in-out infinite; }
@keyframes syBar { 0%,100% { transform: scaleY(.28); } 20% { transform: scaleY(.82); } 40% { transform: scaleY(.48); } 62% { transform: scaleY(1); } 82% { transform: scaleY(.6); } }
.meridian-landing-root .sy-flow { stroke-dasharray: 7 9; animation: syFlow .8s linear infinite; }
@keyframes syFlow { to { stroke-dashoffset: -16; } }
.meridian-landing-root .sy-feed { stroke-dasharray: 5 10; animation: syFeed 1.4s linear infinite; }
@keyframes syFeed { to { stroke-dashoffset: -15; } }
.meridian-landing-root .sy-ring { transform-box: view-box; transform-origin: 340px 205px; animation: sySpin 9s linear infinite; }
@keyframes sySpin { to { transform: rotate(360deg); } }
.meridian-landing-root .sy-glow { animation: syGlow 2.6s ease-in-out infinite; }
@keyframes syGlow { 0%,100% { opacity: .1; } 50% { opacity: .26; } }
.meridian-landing-root .sy-dot { animation: syPulse 1.9s ease-in-out infinite; }
@keyframes syPulse { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
.meridian-landing-root .sy-blink { animation: syBlink 2.6s ease-in-out infinite; }
@keyframes syBlink { 0%,52%,100% { opacity: .4; } 66%,86% { opacity: 1; } }
.meridian-landing-root .sy-pkt { offset-path: path('M236 205 L444 205'); animation: syTravel 2s linear infinite; }
@keyframes syTravel { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.meridian-landing-root .sy-fpkt { offset-path: path('M540 300 C 540 362, 140 362, 140 300'); animation: syFTravel 2.6s linear infinite; }
@keyframes syFTravel { from { offset-distance: 0%; } to { offset-distance: 100%; } }

/* — Synthesizer (.sz-*) — */
.meridian-landing-root .sz-feed { stroke-dasharray: 6 8; animation: szFlow 1s linear infinite; }
@keyframes szFlow { to { stroke-dashoffset: -14; } }
.meridian-landing-root .sz-src { animation: szPulse 2s ease-in-out infinite; }
@keyframes szPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.meridian-landing-root .sz-ring { transform-box: view-box; transform-origin: 320px 210px; animation: szSpin 9s linear infinite; }
@keyframes szSpin { to { transform: rotate(360deg); } }
.meridian-landing-root .sz-glow { animation: szGlow 2.8s ease-in-out infinite; }
@keyframes szGlow { 0%,100% { opacity: .1; } 50% { opacity: .26; } }
.meridian-landing-root .sz-cube { animation: szCube 3s ease-in-out infinite; }
@keyframes szCube { 0%,100% { fill-opacity: .08; } 50% { fill-opacity: .3; } }
.meridian-landing-root .sz-card { opacity: 0; animation: szCard 5.2s ease-in-out infinite; }
@keyframes szCard { 0% { opacity: 0; transform: translateX(18px); } 8% { opacity: 1; transform: translateX(0); } 84% { opacity: 1; transform: translateX(0); } 95% { opacity: 0; transform: translateX(10px); } 100% { opacity: 0; } }
.meridian-landing-root .sz-p1 { offset-path: path('M162 116 C 232 116, 250 200, 274 202'); }
.meridian-landing-root .sz-p2 { offset-path: path('M162 178 C 232 178, 252 205, 274 207'); }
.meridian-landing-root .sz-p3 { offset-path: path('M162 250 C 232 250, 252 216, 274 213'); }
.meridian-landing-root .sz-p4 { offset-path: path('M162 312 C 232 312, 250 226, 274 218'); }
.meridian-landing-root .sz-pkt { animation: szTravel 2.3s linear infinite; }
@keyframes szTravel { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.meridian-landing-root .sz-bpkt { offset-path: path('M368 210 L450 210'); animation: szBus 1.7s linear infinite; }
@keyframes szBus { from { offset-distance: 0%; } to { offset-distance: 100%; } }

/* — Simulator (.sm-*) — active branch cycles A→B→C on a 9s loop — */
@keyframes smFlow { to { stroke-dashoffset: -15; } }
@keyframes smProwl { to { stroke-dashoffset: -40; } }
@keyframes smSGlow { 0%,100% { stroke-opacity: .12; } 50% { stroke-opacity: .42; } }
@keyframes smTravel { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes smActA { 0% { opacity: 1; } 30% { opacity: 1; } 34% { opacity: 0; } 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes smActB { 0% { opacity: 0; } 30% { opacity: 0; } 34% { opacity: 1; } 63% { opacity: 1; } 67% { opacity: 0; } 100% { opacity: 0; } }
@keyframes smActC { 0% { opacity: 0; } 63% { opacity: 0; } 67% { opacity: 1; } 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes smEnvA { 0% { opacity: 0; } 30% { opacity: 0; } 34% { opacity: .55; } 96% { opacity: .55; } 100% { opacity: 0; } }
@keyframes smEnvB { 0% { opacity: .55; } 30% { opacity: .55; } 34% { opacity: 0; } 63% { opacity: 0; } 67% { opacity: .55; } 100% { opacity: .55; } }
@keyframes smEnvC { 0% { opacity: .55; } 63% { opacity: .55; } 67% { opacity: 0; } 96% { opacity: 0; } 100% { opacity: .55; } }
.meridian-landing-root .sm-real-a { stroke-dasharray: 8 7; animation: smFlow .9s linear infinite, smActA 9s ease-in-out infinite; }
.meridian-landing-root .sm-real-b { stroke-dasharray: 8 7; animation: smFlow .9s linear infinite, smActB 9s ease-in-out infinite; }
.meridian-landing-root .sm-real-c { stroke-dasharray: 8 7; animation: smFlow .9s linear infinite, smActC 9s ease-in-out infinite; }
.meridian-landing-root .sm-sim-a { stroke-dasharray: 2 8; animation: smProwl 2.4s linear infinite, smEnvA 9s ease-in-out infinite; }
.meridian-landing-root .sm-sim-b { stroke-dasharray: 2 8; animation: smProwl 2.4s linear infinite, smEnvB 9s ease-in-out infinite; }
.meridian-landing-root .sm-sim-c { stroke-dasharray: 2 8; animation: smProwl 2.4s linear infinite, smEnvC 9s ease-in-out infinite; }
.meridian-landing-root .sm-a { animation: smActA 9s ease-in-out infinite; }
.meridian-landing-root .sm-b { animation: smActB 9s ease-in-out infinite; }
.meridian-landing-root .sm-c { animation: smActC 9s ease-in-out infinite; }
.meridian-landing-root .sm-ea { animation: smEnvA 9s ease-in-out infinite; }
.meridian-landing-root .sm-eb { animation: smEnvB 9s ease-in-out infinite; }
.meridian-landing-root .sm-ec { animation: smEnvC 9s ease-in-out infinite; }
.meridian-landing-root .sm-glow-a { animation: smSGlow 2.3s ease-in-out infinite, smActA 9s ease-in-out infinite; }
.meridian-landing-root .sm-glow-b { animation: smSGlow 2.3s ease-in-out infinite, smActB 9s ease-in-out infinite; }
.meridian-landing-root .sm-glow-c { animation: smSGlow 2.3s ease-in-out infinite, smActC 9s ease-in-out infinite; }
.meridian-landing-root .sm-pa { offset-path: path('M116 208 C 190 160, 250 112, 296 112 L344 112 C 432 112, 488 178, 528 206'); animation: smTravel 2.2s linear infinite, smActA 9s ease-in-out infinite; }
.meridian-landing-root .sm-pb { offset-path: path('M116 215 L528 215'); animation: smTravel 2.2s linear infinite, smActB 9s ease-in-out infinite; }
.meridian-landing-root .sm-pc { offset-path: path('M116 222 C 190 270, 250 318, 296 318 L344 318 C 432 318, 488 252, 528 224'); animation: smTravel 2.2s linear infinite, smActC 9s ease-in-out infinite; }

/* expand-to-detail affordance + lightbox (adapted from preview.html) */
.meridian-landing-root .ml-ctexpand {
  position: absolute; top: 9px; right: 9px; width: 30px; height: 30px; border-radius: var(--r-md);
  border: 1px solid var(--border-2); background: rgba(15,17,23,0.72); backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px); color: var(--text-2); display: grid; place-items: center;
  cursor: default; opacity: 0; line-height: 0; z-index: 3; pointer-events: none;
  transition: opacity var(--dur), color var(--dur), border-color var(--dur), transform var(--dur);
}
.meridian-landing-root .ml-tech-card:hover .ml-ctexpand,
.meridian-landing-root .ml-tech-card:focus-visible .ml-ctexpand { opacity: 1; }
.meridian-landing-root .ml-tech-card:hover .ml-ctexpand { color: var(--teal); border-color: var(--border-t); transform: translateY(-1px); }
.meridian-landing-root .ml-ctexpand svg { width: 15px; height: 15px; display: block; }

.meridian-landing-root .ml-ctmodal {
  position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center;
  padding: 32px; background: rgba(7,8,13,0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
/* flex column so the animation + the text always fit the viewport together
   (overflow hidden → the dialog never scrolls; the svg is capped instead) */
.meridian-landing-root .ml-ctmodal-dialog {
  position: relative; width: min(820px, 92vw); max-height: 92vh; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--bg-1); border: 1px solid var(--border-2); border-radius: var(--r-2xl); box-shadow: var(--shadow-modal);
}
.meridian-landing-root .ml-ctmodal-dialog::before {
  content: ''; display: block; flex: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, transparent, var(--violet) 35%, var(--teal) 70%, transparent);
}
.meridian-landing-root .ml-ctmodal-stage {
  flex: 0 1 auto; min-height: 0; background: var(--bg-0); line-height: 0;
  display: flex; align-items: center; justify-content: center;
}
/* the svg background matches the stage (#0F1117), so the letterbox gutters from
   the height cap are invisible — the animation just reads as centered. */
.meridian-landing-root .ml-ctmodal-stage > svg { max-height: 58vh; }
.meridian-landing-root .ml-ctmodal-meta { flex: 0 0 auto; padding: 18px 28px 24px; }
.meridian-landing-root .ml-ctmodal-meta .ml-tech-num { font-size: 13px; }
.meridian-landing-root .ml-ctmodal-meta h3 { margin: 6px 0 4px; font-size: 24px; font-weight: 700; color: #fff; }
.meridian-landing-root .ml-ctmodal-meta .ml-kind { margin: 6px 0 12px; }
.meridian-landing-root .ml-ctmodal-meta p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.6; max-width: 64ch; }
.meridian-landing-root .ml-ctmodal-close {
  position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: var(--r-lg);
  border: 1px solid var(--border-2); background: rgba(20,24,42,0.85); color: var(--text-1);
  font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; z-index: 2;
}
.meridian-landing-root .ml-ctmodal-close:hover { color: #fff; border-color: var(--border-v); }

/* How to use */
.ml-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.ml-step { position: relative; min-width: 0; padding: 16px; cursor: pointer; display: flex; flex-direction: column; }
.ml-step-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.ml-step-n { width: 30px; height: 30px; border-radius: 8px; background: var(--grad-brand); display: grid; place-items: center; font-family: var(--font-mono); font-weight: 600; font-size: 13px; color: #fff; margin-bottom: 0; flex-shrink: 0; }
.ml-step h4 { font-size: 14px; font-weight: 700; color: #fff; margin: 0; line-height: 1.35; flex: 1; min-width: 0; }
.ml-step-preview { display: flex; align-items: baseline; min-width: 0; font-size: 12px; color: var(--text-2); line-height: 1.4; margin: 10px 0 0; }
.ml-step-preview-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.ml-step-preview-more { flex-shrink: 0; margin-left: 2px; color: var(--text-3); }
/* Compact 16:9 clip — full detail lives in the click-to-expand modal. */
.ml-step-media { position: relative; width: 100%; height: clamp(92px, 8.5vw, 112px); border-radius: var(--r-md);
  overflow: hidden; border: 1px solid var(--border-2); display: grid; place-items: center;
  background: radial-gradient(120% 90% at 50% 0%, rgba(124,104,250,0.16), transparent 60%), var(--bg-2); }
.ml-step-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ml-step-expand { position: absolute; top: 10px; right: 10px; z-index: 2; width: 30px; height: 30px;
  border-radius: var(--r-md); display: grid; place-items: center; color: var(--text-1);
  background: rgba(15,17,23,0.7); border: 1px solid var(--border-2);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity var(--dur), color var(--dur), border-color var(--dur); }
.ml-step:hover .ml-step-expand, .ml-step:focus-visible .ml-step-expand { opacity: 1; }
.ml-step:hover .ml-step-expand { color: var(--violet-bright); border-color: var(--border-v); }

/* Loop-closing bar under the 4 steps: ship a release (card 4) → retro board →
   signal that feeds back into research (card 2). Two animated arrows in the band
   between the grid and the bar draw the return path; they anchor to the 4-column
   card centres (87.5% / 37.5%) and are hidden once the grid reflows (≤920px). */
.ml-loop { position: relative; }
.ml-loop-link { position: relative; height: 54px; pointer-events: none; }
/* Synchronised 9s loop: step 1 grows once on load, then steps 2→3→4 grow 15%
   one-by-one (each returns before the next), then the end arrow (card4 ↓ bar)
   then the start arrow (bar ↑ card2) animate — then back to step 2, forever.
   This reads the ship → retro board → research loop as a single smooth motion. */
.ml-loop .ml-step { transform-origin: center center; }
.ml-loop .ml-step:nth-child(1) { animation: ml-step-pop-once 1.8s var(--ease-out) 0s 1 both; }
.ml-loop .ml-step:nth-child(2) { animation: ml-step-pop 9s var(--ease-out) 1.8s infinite; }
.ml-loop .ml-step:nth-child(3) { animation: ml-step-pop 9s var(--ease-out) 3.6s infinite; }
.ml-loop .ml-step:nth-child(4) { animation: ml-step-pop 9s var(--ease-out) 5.4s infinite; }
@keyframes ml-step-pop { 0% { transform: scale(1); z-index: 1; } 9% { transform: scale(1.15); z-index: 5; } 20%, 100% { transform: scale(1); z-index: 1; } }
@keyframes ml-step-pop-once { 0% { transform: scale(1); } 45% { transform: scale(1.15); } 100% { transform: scale(1); } }

.ml-loop-arrow { position: absolute; top: 6px; bottom: 16px; width: 2px; border-radius: 2px; opacity: 0.22; }
.ml-loop-arrow > i { position: absolute; left: 50%; width: 0; height: 0; transform: translateX(-50%); }
/* a light travels the arrow's length to show flow direction during its phase */
.ml-loop-arrow::after { content: ''; position: absolute; left: -2px; right: -2px; height: 34%; border-radius: 3px; opacity: 0;
  background: linear-gradient(180deg, transparent, #d8fff5, transparent); }
.ml-loop-arrow-down { left: 87.5%; background: linear-gradient(180deg, var(--violet), var(--teal));
  animation: ml-arrow-glow 9s var(--ease-out) 7.2s infinite; }
.ml-loop-arrow-down::after { animation: ml-arrow-down 9s var(--ease-out) 7.2s infinite; }
.ml-loop-arrow-down > i { bottom: -2px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--teal); }
.ml-loop-arrow-up { left: 37.5%; background: linear-gradient(0deg, var(--violet), var(--teal));
  animation: ml-arrow-glow 9s var(--ease-out) 9s infinite; }
.ml-loop-arrow-up::after { animation: ml-arrow-up 9s var(--ease-out) 9s infinite; }
.ml-loop-arrow-up > i { top: -2px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 7px solid var(--teal); }
@keyframes ml-arrow-glow { 0%, 100% { opacity: 0.22; } 4% { opacity: 1; } 18% { opacity: 1; } 26% { opacity: 0.22; } }
@keyframes ml-arrow-down { 0% { top: -34%; opacity: 0; } 4% { opacity: 1; } 17% { top: 100%; opacity: 1; } 23% { top: 100%; opacity: 0; } 100% { top: 100%; opacity: 0; } }
@keyframes ml-arrow-up { 0% { top: 100%; opacity: 0; } 4% { opacity: 1; } 17% { top: -34%; opacity: 1; } 23% { top: -34%; opacity: 0; } 100% { top: -34%; opacity: 0; } }
.ml-loop-bar { display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 2px; padding: 16px 22px; border-radius: var(--r-lg); position: relative; overflow: hidden;
  background: linear-gradient(160deg, rgba(31,37,58,0.82), rgba(16,19,30,0.9)); border: 1px solid var(--border-2); }
.ml-loop-bar::before { content: ''; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(124,104,250,0.5), rgba(0,214,172,0.5), transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; }
.ml-loop-bar-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--teal);
  box-shadow: 0 0 12px rgba(0,214,172,0.7); animation: ml-pulse 2s ease-in-out infinite; }
.ml-loop-bar-text { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-1); }

/* Expanded step demo popup — the animation fills the left (≈80% of the screen),
   copy on the right. */
.ml-stepmodal { position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center;
  padding: 4vh 4vw; background: rgba(7,8,13,0.84); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: ml-fade-in var(--dur) var(--ease-out); }
.ml-stepmodal-panel { position: relative; width: min(1320px, 88vw); height: min(820px, 84vh);
  display: grid; grid-template-columns: 1.45fr 1fr; overflow: hidden;
  background: var(--bg-1); border: 1px solid var(--border-2); border-radius: var(--r-2xl); box-shadow: var(--shadow-modal);
  animation: ml-pop-in 0.32s var(--ease-out); }
.ml-stepmodal-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3;
  background: linear-gradient(90deg, transparent, var(--violet) 35%, var(--teal) 70%, transparent); }
.ml-stepmodal-media { position: relative; min-width: 0; background: var(--bg-0);
  display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--border-1); }
.ml-stepmodal-vid { width: 100%; height: 100%; object-fit: contain; display: block; }
.ml-stepmodal-body { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 40px 44px; min-width: 0; }
.ml-stepmodal-body h3 { font-size: 26px; font-weight: 800; letter-spacing: -0.3px; color: #fff; margin: 14px 0 10px; line-height: 1.2; }
.ml-stepmodal-body p { font-size: 16px; color: var(--text-2); line-height: 1.65; margin: 0; max-width: 46ch; }
.ml-stepmodal-close { position: absolute; top: 14px; right: 14px; z-index: 4; width: 40px; height: 40px; border-radius: var(--r-lg);
  border: 1px solid var(--border-2); background: rgba(20,24,42,0.9); color: var(--text-1);
  font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center;
  transition: color var(--dur), border-color var(--dur); }
.ml-stepmodal-close:hover { color: #fff; border-color: var(--border-v); }
@keyframes ml-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ml-pop-in { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: none; } }

/* Core modules */
.ml-modules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ml-module-card { position: relative; border-radius: var(--r-2xl); overflow: hidden; border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(160deg, rgba(31,37,58,0.92), rgba(16,19,30,0.95)); box-shadow: var(--shadow-card); display: flex; flex-direction: column;
  transition: transform var(--dur-slow) var(--ease-out), border-color var(--dur-slow), box-shadow var(--dur-slow); }
.ml-module-card:hover { transform: translateY(-6px); border-color: var(--border-v); box-shadow: var(--shadow-pop), 0 0 54px rgba(124,104,250,0.14); }
.ml-module-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 4; background: linear-gradient(90deg, transparent, var(--violet), var(--teal), transparent); }
.ml-module-media { position: relative; height: 168px; overflow: hidden; border-bottom: 1px solid var(--border-1); }
.ml-module-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; animation: ml-kenburns 19s ease-in-out infinite alternate; }
.ml-module-card:nth-child(2) .ml-module-media img { animation-duration: 23s; }
.ml-module-card:nth-child(3) .ml-module-media img { animation-duration: 21s; animation-direction: alternate-reverse; }
@keyframes ml-kenburns { 0% { transform: scale(1.06) translate(0,0); } 100% { transform: scale(1.2) translate(-5%,-7%); } }
.ml-mscan { position: absolute; inset: 0; pointer-events: none; height: 42%; background: linear-gradient(180deg, transparent, rgba(0,214,172,0.10), transparent); animation: ml-vscan 5s ease-in-out infinite; }
.ml-mfade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(7,8,13,0.10) 0%, transparent 30%, rgba(15,17,23,0.55) 100%); }
.ml-mtag { position: absolute; top: 11px; left: 13px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--emerald); background: rgba(7,8,13,0.86); padding: 4px 9px; border-radius: var(--r-pill); }
.ml-module-ic { position: absolute; left: 16px; bottom: 14px; z-index: 3; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: rgba(20,24,42,0.96); border: 1px solid var(--border-v); color: var(--violet-bright); box-shadow: 0 6px 20px rgba(0,0,0,0.45); }
.ml-module-body { padding: 20px 22px 26px; }
.ml-module-body .ml-num { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--text-3); }
.ml-module-body h3 { font-size: 18px; font-weight: 700; color: #fff; margin: 6px 0 4px; }
.ml-module-body p { font-size: 13.5px; color: var(--text-2); line-height: 1.62; margin: 0; }

/* Modes (Builder vs Enterprise) */
.ml-mode-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 880px; margin: 0 auto; }
.ml-mode-card { padding: 28px 28px 30px; position: relative; overflow: hidden; }
.ml-mode-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--violet), var(--teal), transparent); opacity: 0.7; }
.ml-mode-card[data-mode="enterprise"]::before { background: linear-gradient(90deg, transparent, var(--teal), var(--violet), transparent); }
.ml-mode-head { display: flex; align-items: center; gap: 15px; margin-bottom: 22px; }
.ml-mode-ic { width: 52px; height: 52px; border-radius: 14px; flex: 0 0 auto; display: grid; place-items: center;
  background: var(--violet-dim); border: 1px solid var(--border-v); color: var(--violet-bright); }
.ml-mode-card[data-mode="enterprise"] .ml-mode-ic { background: var(--teal-dim); border-color: var(--border-t); color: var(--teal); }
.ml-mode-title { font-size: 20px; font-weight: 700; color: #fff; margin: 0 0 3px; }
.ml-mode-for { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); }
.ml-mode-price { font-size: 13px; font-weight: 700; color: var(--teal); margin-top: 7px; }
.ml-mode-card[data-mode="enterprise"] .ml-mode-price { color: var(--violet-bright); }
.ml-mode-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ml-mode-feat { display: flex; align-items: center; gap: 11px; font-size: 14px; color: var(--text-1); line-height: 1.4; }
.ml-mode-check { flex: 0 0 auto; color: var(--teal); }
.ml-mode-badge { margin-left: auto; flex: 0 0 auto; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--teal); background: var(--teal-dim); border: 1px solid var(--border-t);
  border-radius: var(--r-pill); padding: 3px 8px; white-space: nowrap; }

/* Modes — pricing callout */
.ml-mode-pricing { display: flex; justify-content: center; margin-top: 36px; }
.ml-pricing-chip {
  display: inline-flex; align-items: center; gap: 16px; max-width: 640px; width: 100%;
  padding: 18px 22px; text-align: left;
  background: linear-gradient(160deg, rgba(31,37,58,0.72), rgba(16,19,30,0.82));
  border: 1px solid rgba(255,255,255,0.08); border-radius: var(--r-xl);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,0.04);
  position: relative; overflow: hidden;
}
.ml-pricing-chip::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,104,250,0.55), rgba(0,214,172,0.45), transparent);
  opacity: 0.85;
}
.ml-pricing-ic {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--teal-dim); border: 1px solid var(--border-t); color: var(--teal);
}
.ml-pricing-copy { min-width: 0; }
.ml-pricing-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ml-pricing-head .ml-pricing-title { margin-bottom: 0; }
.ml-pricing-title {
  font-size: 16px; font-weight: 700; letter-spacing: -0.2px; color: #fff; margin: 0 0 10px;
}
/* "Try it out" — a filled accent pill (vs the outline info pills) on the
   pay-as-you-go card, signalling the no-commitment entry point. */
.ml-pricing-try { color: var(--accent-contrast); background: var(--teal); border-color: transparent; font-weight: 700; }

/* Integrations — monochrome logo wall (brand marks tint teal on hover) + the
   "request anything" gradient-border bar. Cards reuse the .ml-card glass base. */
.ml-int-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ml-int-card { padding: 22px 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.ml-int-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border-1); color: var(--text-1);
  transition: color var(--dur), border-color var(--dur), background var(--dur); }
.ml-int-ic svg { width: 24px; height: 24px; display: block; }
.ml-int-card:hover .ml-int-ic { color: var(--teal); border-color: var(--border-t); background: var(--teal-dim); }
.ml-int-name { font-size: 14.5px; font-weight: 700; color: #fff; }
.ml-int-desc { font-size: 12px; color: var(--text-2); line-height: 1.4; }
.ml-int-bar { margin-top: 26px; display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px 22px; border-radius: var(--r-lg); position: relative; overflow: hidden;
  background: linear-gradient(160deg, rgba(31,37,58,0.82), rgba(16,19,30,0.9)); border: 1px solid var(--border-2); }
.ml-int-bar::before { content: ''; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(124,104,250,0.5), rgba(0,214,172,0.5), transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; }
.ml-int-bar-plus { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--teal-dim); border: 1px solid var(--border-t); color: var(--teal); font-family: var(--font-mono); font-weight: 600; font-size: 15px; line-height: 1; }
.ml-int-bar-text { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-1); }
.ml-pricing-tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.ml-pricing-tag { margin: 0; white-space: nowrap; }

/* Final CTA band */
.ml-cta-band { padding: 90px 0; min-height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; text-align: center; position: relative; }
.ml-cta-band::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 680px; height: 680px; max-width: 90vw; border-radius: 50%; background: radial-gradient(circle, rgba(124,104,250,0.16), transparent 62%); pointer-events: none; z-index: -1; }
.ml-cta-band h2 { font-size: clamp(34px, 4.5vw, 56px); font-weight: 800; letter-spacing: -1.2px; color: #fff; line-height: 1.08; margin: 0 0 18px; }
.ml-cta-band p { font-size: 16px; color: var(--text-2); max-width: 540px; margin: 0 auto 36px; line-height: 1.6; }
.ml-cta-band .ml-waitlist { margin: 0 auto; }
.ml-label-teal { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); border: 1px solid var(--border-t); background: var(--teal-dim); border-radius: var(--r-pill); padding: 5px 14px; margin-bottom: 20px; }

/* Footer */
.ml-footer { border-top: 1px solid var(--border-1); padding: 30px 0; }
.ml-foot-inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--text-3); }
.ml-foot-inner .ml-brand { font-size: 14px; }

/* ── Floating Astra orb ── */
.ml-orb-float { position: fixed; top: 0; left: 0; width: 174px; height: 174px; transform-origin: 0 0; z-index: 1; cursor: pointer; will-change: transform; }
/* hover pulse/wobble + glow are handled by AstraOrb's own :hover (AstraOrb.css),
   so every orb (landing, FAB, chat) pulsates consistently — only the tooltip is
   driven by the floating orb's is-hot state here. */
.ml-orb-tip { position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, 6px); margin-bottom: 6px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal);
  background: rgba(15,17,23,0.88); border: 1px solid var(--border-t); border-radius: var(--r-pill); padding: 6px 12px;
  opacity: 0; pointer-events: none; transition: opacity var(--dur), transform var(--dur); backdrop-filter: blur(8px); z-index: 6; }
.ml-orb-float.is-hot .ml-orb-tip { opacity: 1; transform: translate(-50%, 0); }
@keyframes ml-orb-wobble { 0%,100% { transform: scale(1.05) rotate(0deg); } 35% { transform: scale(1.09) rotate(2.5deg); } 70% { transform: scale(1.06) rotate(-2deg); } }

/* ── Start-Initiative overlay ── */
.ml-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 28px;
  background: rgba(7,8,13,0); backdrop-filter: blur(0px);
  transition: background var(--dur-panel) var(--ease-out), backdrop-filter var(--dur-panel) var(--ease-out); }
.ml-overlay.is-open { background: rgba(7,8,13,0.66); backdrop-filter: blur(8px); }
.ml-modal { width: min(1080px, 100%); max-height: 90vh; opacity: 0; transform: scale(0.18);
  transform-origin: var(--ox, 50%) var(--oy, 90%);
  transition: transform var(--dur-panel) var(--ease-pop), opacity 280ms var(--ease-out);
  background: linear-gradient(160deg, rgba(30,36,56,0.82), rgba(15,17,23,0.88));
  backdrop-filter: blur(28px) saturate(150%); -webkit-backdrop-filter: blur(28px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.12); box-shadow: var(--shadow-modal); border-radius: var(--r-2xl); }
.ml-overlay.is-open .ml-modal { opacity: 1; transform: scale(1); }
.ml-modal-inner { padding: 22px; position: relative; }
.ml-modal-close { position: absolute; top: 14px; right: 16px; z-index: 5; width: 34px; height: 34px; border-radius: 9px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border-2); color: var(--text-2); cursor: pointer; display: grid; place-items: center; }
.ml-modal-close:hover { color: #fff; background: rgba(255,255,255,0.12); }

/* magic-link signup state */
.ml-magic { text-align: center; padding: 56px 40px; max-width: 520px; margin: 0 auto; }
.ml-magic .ml-badge-glyph { width: 64px; height: 64px; border-radius: 18px; background: var(--grad-brand); display: grid; place-items: center; margin: 0 auto 24px; box-shadow: var(--glow-violet); color: #fff; }
.ml-magic h2 { font-size: 28px; font-weight: 800; color: #fff; letter-spacing: -0.6px; margin: 0 0 12px; }
.ml-magic p { font-size: 15px; color: var(--text-2); line-height: 1.6; margin: 0 0 28px; }
.ml-magic .ml-waitlist { margin: 0 auto; }
.ml-credits-note { font-family: var(--font-mono); font-size: 11px; color: var(--teal); margin-top: 18px; letter-spacing: 0.04em; }

/* ── Responsive ── */
@media (max-width: 920px) {
  .ml-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .ml-hero-right .ml-video-frame { width: 100%; }
  .ml-tech-grid, .ml-steps, .ml-modules, .ml-int-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* card centres move once the grid reflows, so the return-path arrows would point
     at the wrong cards — drop them and the synchronised card pops, keep just the bar. */
  .ml-loop-link { display: none; }
  .ml-loop-bar { margin-top: 18px; }
  .ml-loop .ml-step { animation: none !important; transform: none !important; }
  .ml-nav-links { display: none; }
  .ml-hero, .ml-sec, .ml-cta-band { min-height: 0; }
  /* The floating orb stays visible on mobile: FloatingAstraOrb scales it down for
     the narrow viewport and docks it to the bottom-right as a FAB on scroll. The
     orb-zone keeps reserving the hero gap the orb floats in. */
  .ml-scroll { scroll-snap-type: none; -webkit-overflow-scrolling: touch; }
  /* Expanded step popup stacks: animation on top, copy below. */
  .ml-stepmodal-panel { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1.05fr) auto;
    width: 92vw; height: min(86vh, 780px); }
  .ml-stepmodal-media { border-right: none; border-bottom: 1px solid var(--border-1); }
  .ml-stepmodal-body { padding: 22px 24px; }
  .ml-stepmodal-body h3 { font-size: 22px; margin: 10px 0 8px; }
}

/* Touch devices: scroll-snap fights native momentum and reads as jerky — turn it
   off and use smooth inertial scrolling instead (regardless of viewport width). */
@media (hover: none) and (pointer: coarse) {
  .ml-scroll { scroll-snap-type: none; -webkit-overflow-scrolling: touch; scroll-behavior: auto; }
  .ml-hero, .ml-sec, .ml-cta-band { scroll-snap-align: none; scroll-snap-stop: normal; }
}
/* Phones: the Start-Initiative chat goes full-screen (edge-to-edge, full height)
   so the conversation fills the device. The inner chat is h-full (AstraInitiativeChat). */
@media (max-width: 639.98px) {
  .ml-overlay { padding: 0; }
  .ml-modal {
    width: 100%; height: 100%;
    max-width: 100%; max-height: 100%;
    border-radius: 0; border: none;
  }
  .ml-modal-inner { height: 100%; padding: 10px; }
}
@media (max-width: 560px) {
  .ml-tech-grid, .ml-steps, .ml-modules, .ml-mode-grid { grid-template-columns: minmax(0, 1fr); }
  .ml-pricing-chip { flex-direction: column; text-align: center; padding: 20px 18px; }
  .ml-pricing-tags { justify-content: center; }
  .ml-orb-zone { height: 120px; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .ml-pulse, .ml-video-scan, .ml-mscan, .ml-role-word,
  .ml-module-media img, .ml-orb-float.is-hot .orb-wrap,
  .ml-video-tag, .ml-video-tag::before, .ml-loop-bar-dot,
  .ml-loop .ml-step, .ml-loop-arrow, .ml-loop-arrow::after,
  .ml-stepmodal, .ml-stepmodal-panel { animation: none !important; }
  .ml-loop .ml-step { transform: none !important; }
  .ml-scroll { scroll-snap-type: none; scroll-behavior: auto; }
  .ml-orb-float .orb-wrap { transition: none; }

  /* Core-tech animations hold a sensible still frame (carried over from the
     handoff). The frame wrapper class is shared by the card + lightbox. */
  .meridian-landing-root .ml-tech-anim *,
  .meridian-landing-root .ml-ctmodal-stage * { animation: none !important; }
  /* Synthesizer: show all feature cards instead of cycling them in. */
  .meridian-landing-root .sz-card { opacity: 1 !important; transform: none !important; }
  /* Simulator: settle on PATH B as the static active candidate; A & C dotted. */
  .meridian-landing-root .sm-real-b,
  .meridian-landing-root .sm-b,
  .meridian-landing-root .sm-glow-b,
  .meridian-landing-root .sm-pb { opacity: 1; }
  .meridian-landing-root .sm-real-a,
  .meridian-landing-root .sm-real-c,
  .meridian-landing-root .sm-a,
  .meridian-landing-root .sm-c,
  .meridian-landing-root .sm-glow-a,
  .meridian-landing-root .sm-glow-c,
  .meridian-landing-root .sm-eb { opacity: 0; }
  .meridian-landing-root .sm-sim-a,
  .meridian-landing-root .sm-sim-c,
  .meridian-landing-root .sm-ea,
  .meridian-landing-root .sm-ec { opacity: .55; }
  .meridian-landing-root .sm-sim-b { opacity: 0; }
}

/* ════════════════════════════════════════════════════════════════
   AstraOrb.css — folded in verbatim from
   frontend/src/components/astra/AstraOrb.css so the floating orb's
   static SVG + revolving-nebula CSS render without React.
   ════════════════════════════════════════════════════════════════ */

/* Astra orb — organic liquid-glass bubble. Portable: self-contained
   literal colors so it renders anywhere (landing hero + in-app FAB),
   independent of the page theme tokens. Rendered at a 174px base and
   scaled down by the wrapper for smaller surfaces. */

.astra-orb { position: relative; display: inline-block; line-height: 0; }
.astra-orb__scale { position: absolute; top: 0; left: 0; width: 174px; height: 174px; transform-origin: top left; }

.orb-wrap { position: relative; width: 174px; height: 174px; }

.orb-glow {
  position: absolute; inset: -46px; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(124,104,250,0.50), rgba(0,214,172,0.20) 46%, transparent 70%);
  filter: blur(30px); animation: astra-orb-breathe 6.5s cubic-bezier(0.4,0,0.2,1) infinite; z-index: 0;
}
/* drop shadow on its own layer so the feathered edge mask on .orb doesn't clip it */
.orb-shadow {
  position: absolute; inset: 0; border-radius: 50%; z-index: 0; pointer-events: none;
  box-shadow: 0 18px 44px rgba(0,0,0,0.5), 0 40px 70px -28px rgba(124,104,250,0.5);
}
.orb {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden; z-index: 1;
  box-shadow: inset 0 3px 22px rgba(255,255,255,0.22), inset 0 -14px 38px rgba(8,10,24,0.65);
  /* feathered circular edge → smooth anti-aliased rim (no jagged clip) */
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 calc(100% - 1.2px), transparent 100%);
  mask: radial-gradient(circle at 50% 50%, #000 calc(100% - 1.2px), transparent 100%);
  transform: translateZ(0); backface-visibility: hidden;
}
.orb svg { display: block; width: 100%; height: 100%; }

/* ── Revolving nebula colour field ──────────────────────────────────────────
   Each lobe is a soft radial-gradient blob placed off-centre inside a full-orb
   layer; rotating that layer makes the blob ORBIT the centre. Closer blobs spin
   faster and neighbours spin in opposite directions → differential rotation, the
   swirl of a real nebula. Pure GPU-composited transforms (blur is baked once),
   so it costs nothing per frame. */
.orb-nebula { position: absolute; inset: 0; border-radius: 50%; z-index: 2; pointer-events: none; }
.orb-lobe {
  position: absolute; inset: -24%; border-radius: 50%;
  transform-origin: 50% 50%; will-change: transform; mix-blend-mode: screen;
}
/* Each lobe spirals (continuous rotate) while drifting + breathing, so the whole
   colour field churns and morphs like a live nebula. rotate-then-translate makes
   the blob spiral around the centre. Different keyframes/speeds/directions per
   lobe → organic differential motion. Pure transforms → GPU-cheap. */
.orb-lobe.l1 { background: radial-gradient(40% 40% at 44% 46%, rgba(150,128,255,0.62), rgba(124,104,250,0) 70%); filter: blur(10px); animation: orb-churn-a 22s linear infinite; }
.orb-lobe.l2 { background: radial-gradient(38% 38% at 64% 63%, rgba(45,230,196,0.95), rgba(0,214,172,0) 70%);  filter: blur(11px); animation: orb-churn-b 30s linear infinite reverse; }
.orb-lobe.l3 { background: radial-gradient(32% 32% at 66% 35%, rgba(248,118,188,0.92), rgba(244,114,182,0) 68%); filter: blur(11px); animation: orb-churn-c 38s linear infinite; }
.orb-lobe.l4 { background: radial-gradient(34% 34% at 33% 66%, rgba(110,170,255,0.90), rgba(91,141,239,0) 70%);  filter: blur(12px); animation: orb-churn-a 34s linear infinite reverse; animation-delay: -8s; }
.orb-lobe.l5 { background: radial-gradient(58% 58% at 52% 52%, rgba(150,130,255,0.20), rgba(124,104,250,0) 78%); filter: blur(16px); animation: orb-churn-c 52s linear infinite; }
@keyframes orb-churn-a {
  0%   { transform: rotate(0deg)   translate(0%, 0%)   scale(1); }
  25%  { transform: rotate(90deg)  translate(5%, -4%)  scale(1.13); }
  50%  { transform: rotate(180deg) translate(0%, 5%)   scale(0.95); }
  75%  { transform: rotate(270deg) translate(-5%, -3%) scale(1.1); }
  100% { transform: rotate(360deg) translate(0%, 0%)   scale(1); }
}
@keyframes orb-churn-b {
  0%   { transform: rotate(0deg)   translate(0%, 0%)   scale(1); }
  30%  { transform: rotate(108deg) translate(-6%, 3%)  scale(1.16); }
  60%  { transform: rotate(216deg) translate(4%, 5%)   scale(0.92); }
  100% { transform: rotate(360deg) translate(0%, 0%)   scale(1); }
}
@keyframes orb-churn-c {
  0%   { transform: rotate(0deg)   translate(0%, 0%)   scale(1); }
  40%  { transform: rotate(144deg) translate(3%, -5%)  scale(1.09); }
  70%  { transform: rotate(252deg) translate(-4%, 2%)  scale(1.04); }
  100% { transform: rotate(360deg) translate(0%, 0%)   scale(1); }
}

/* Moving internal glints / caustics — soft bright points that drift and twinkle
   so the orb's "reflections" feel alive (the design animated these). */
.orb-glints { position: absolute; inset: 0; border-radius: 50%; z-index: 3; pointer-events: none; }
.orb-glint { position: absolute; border-radius: 50%; mix-blend-mode: screen; will-change: transform, opacity; }
.orb-glint.g1 { width: 26%; height: 26%; left: 28%; top: 26%; filter: blur(3px);
  background: radial-gradient(circle, rgba(232,224,255,0.9), transparent 68%); animation: orb-glint-1 9s ease-in-out infinite; }
.orb-glint.g2 { width: 16%; height: 16%; left: 60%; top: 48%; filter: blur(2px);
  background: radial-gradient(circle, rgba(156,245,228,0.85), transparent 68%); animation: orb-glint-2 7.5s ease-in-out infinite; }
.orb-glint.g3 { width: 12%; height: 12%; left: 44%; top: 66%; filter: blur(2px);
  background: radial-gradient(circle, rgba(214,196,255,0.7), transparent 70%); animation: orb-glint-1 11s ease-in-out infinite reverse; }
@keyframes orb-glint-1 { 0%,100% { transform: translate(0,0); opacity: 0.45; } 50% { transform: translate(20%, 26%); opacity: 0.95; } }
@keyframes orb-glint-2 { 0%,100% { transform: translate(0,0); opacity: 0.35; } 50% { transform: translate(-26%, -18%); opacity: 0.85; } }

/* rotating internal liquid sheen */
.orb-sheen {
  position: absolute; inset: 0; border-radius: 50%; z-index: 2; pointer-events: none; mix-blend-mode: screen; opacity: 0.5;
  background: conic-gradient(from 0deg at 42% 38%, transparent 0deg, rgba(255,255,255,0.16) 40deg, transparent 110deg, rgba(180,165,255,0.12) 200deg, transparent 290deg, rgba(255,255,255,0.10) 340deg, transparent 360deg);
  animation: astra-orb-spin 18s linear infinite;
}
/* bottom internal reflection (light bouncing inside the bubble) — drifts slowly */
.orb-reflect {
  position: absolute; inset: 0; border-radius: 50%; z-index: 3; pointer-events: none; will-change: transform;
  background: radial-gradient(ellipse 42% 22% at 62% 86%, rgba(255,255,255,0.22), transparent 70%);
  animation: orb-reflect-drift 13s ease-in-out infinite;
}
@keyframes orb-reflect-drift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-5%,-4%) scale(1.06); } }
/* glass shell: specular highlight + refraction rim */
.orb-glass {
  position: absolute; inset: 0; border-radius: 50%; z-index: 4; pointer-events: none;
  background:
    radial-gradient(circle at 33% 24%, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.14) 13%, transparent 34%),
    radial-gradient(circle at 30% 22%, rgba(255,255,255,0.9) 0%, transparent 7%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.16),
    inset 7px 9px 26px rgba(255,255,255,0.12),
    inset -12px -16px 44px rgba(70,55,150,0.30),
    inset 0 0 60px rgba(0,214,172,0.06);
}
/* thin chromatic refraction ring at the very edge */
.orb-rim {
  position: absolute; inset: -1px; border-radius: 50%; z-index: 5; pointer-events: none;
  background: conic-gradient(from 210deg, rgba(124,104,250,0.55), rgba(0,214,172,0.45) 90deg, rgba(255,255,255,0.5) 150deg, transparent 200deg, rgba(244,114,182,0.4) 280deg, rgba(124,104,250,0.55) 360deg);
  /* wider, softer feather on both sides of the ring so the rim reads as a smooth band, not an aliased hairline */
  -webkit-mask: radial-gradient(circle, transparent calc(100% - 4.5px), #000 calc(100% - 3px), #000 calc(100% - 1px), transparent 100%);
  mask: radial-gradient(circle, transparent calc(100% - 4.5px), #000 calc(100% - 3px), #000 calc(100% - 1px), transparent 100%);
  filter: blur(0.4px); opacity: 0.7; animation: astra-orb-spin 26s linear infinite reverse;
}

@keyframes astra-orb-breathe { 0%,100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.09); opacity: 1; } }
@keyframes astra-orb-spin { to { transform: rotate(360deg); } }

/* ── Hover: the orb pulsates (matches the design's hot/wobble state) ── */
@keyframes orb-hover-pulse {
  0%,100% { transform: scale(1) rotate(0deg); }
  35%     { transform: scale(1.06) rotate(1.5deg); }
  70%     { transform: scale(1.03) rotate(-1deg); }
}
.astra-orb:hover .orb-wrap { animation: orb-hover-pulse 1.15s ease-in-out infinite; }
.astra-orb:hover .orb-glow { animation-duration: 1.7s; }   /* glow breathes faster */

@media (prefers-reduced-motion: reduce) {
  .orb-glow, .orb-sheen, .orb-rim, .orb-lobe, .orb-glint, .orb-reflect,
  .astra-orb:hover .orb-wrap, .astra-orb:hover .orb-glow { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   Sign-in modal form (STATIC PORT — not in the React landing.css).
   The React app reuses a separate SignInModal component with its own
   .meridian-modal* styles; for the static site we render a compact
   sign-in form INSIDE the existing .ml-overlay / .ml-modal shell so the
   open/scale animation and backdrop match the Start-Initiative modal.
   Only these auth-form helpers are new; everything above is verbatim.
   ════════════════════════════════════════════════════════════════ */
.ml-auth { padding: 40px 40px 44px; max-width: 460px; margin: 0 auto; }
.ml-auth h2 { font-size: 26px; font-weight: 800; color: #fff; letter-spacing: -0.5px; margin: 0 0 8px; }
.ml-auth h2 em { font-style: normal; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ml-auth-sub { font-size: 14px; color: var(--text-2); line-height: 1.55; margin: 0 0 22px; }
.ml-auth-google {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 16px; margin-bottom: 16px; background: #fff; color: #1F1F1F; border: 1px solid #DADCE0;
  border-radius: var(--r-md); font-family: var(--font-sans); font-size: 14px; font-weight: 500; cursor: pointer;
  transition: box-shadow var(--dur);
}
.ml-auth-google:hover { box-shadow: 0 1px 3px rgba(60,64,67,.18); }
.ml-auth-or { display: flex; align-items: center; gap: 10px; margin: 4px 0 18px; color: var(--text-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; }
.ml-auth-or span { flex: 1; height: 1px; background: rgba(255,255,255,0.08); }
.ml-auth-field { margin-bottom: 14px; }
.ml-auth-field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.ml-auth-field input {
  width: 100%; background: var(--input-bg); border: 1px solid var(--border-2); color: var(--text-1);
  font-family: var(--font-sans); font-size: 14px; border-radius: var(--r-md); padding: 12px 14px; outline: none;
  transition: border-color var(--dur), box-shadow var(--dur);
}
.ml-auth-field input:focus { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-dim); }
.ml-auth-submit {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 700; color: #fff; background: var(--violet);
  border: none; border-radius: var(--r-md); padding: 13px 20px; cursor: pointer; margin-top: 4px;
  box-shadow: var(--glow-violet); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur), opacity var(--dur);
}
.ml-auth-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 0 56px rgba(124,104,250,0.45); }
.ml-auth-submit:disabled { opacity: 0.5; cursor: default; }
.ml-auth-err { color: var(--red); font-size: 12.5px; margin: 0 0 12px; line-height: 1.5; }
.ml-auth-links { margin-top: 18px; font-size: 13px; color: var(--text-2); text-align: center; line-height: 1.7; }
.ml-auth-links a { color: var(--teal); font-weight: 600; cursor: pointer; }
.ml-auth-links a:hover { opacity: 0.85; }
.ml-auth-links .ml-auth-forgot { color: var(--text-3); font-weight: 500; }
/* sign-in ↔ sign-up toggle: fields/consent shown only in the relevant mode */
.ml-auth:not(.is-signup) .signup-only { display: none; }
.ml-auth.is-signup .signin-only { display: none; }
.ml-auth-ok { color: var(--teal); font-size: 13px; line-height: 1.55; margin: 0 0 12px; padding: 12px 14px; background: var(--teal-dim); border: 1px solid var(--border-t); border-radius: 8px; }
/* The sign-in modal is a compact form, not the wide chat — narrow the shell. */
.ml-overlay.ml-auth-overlay .ml-modal { width: min(460px, 100%); }

/* STATIC PORT: the React app conditionally renders these modals (so they're
   absent from the DOM until opened). The static port keeps them in the DOM and
   toggles the [hidden] attribute instead — but .ml-ctmodal/.ml-stepmodal set
   display:flex and .ml-overlay sets display:flex, which beat the UA [hidden]
   rule. Re-assert display:none for the hidden state so the attribute works.
   Stage SVGs inside the tech lightbox are likewise gated by [hidden]. */
.meridian-landing-root .ml-ctmodal[hidden],
.meridian-landing-root .ml-stepmodal[hidden],
.meridian-landing-root .ml-overlay[hidden],
.meridian-landing-root .ml-ct-stage-svg[hidden] { display: none !important; }

/* Footer link row (About/FAQ/Blog/Privacy/Terms/Contact + social). Mirrors the
   credibility pages' footer (content.css) so the homepage isn't a dead end for
   crawlers or users — these styles live here so index.html (landing.css only)
   renders them without loading content.css. */
.ml-foot-links { border-top: 1px solid var(--border-1); margin-top: 8px; margin-bottom: 18px; }
.ml-foot-links-inner { max-width: var(--container); margin: 0 auto; padding: 22px var(--gutter) 28px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.ml-foot-nav { display: flex; flex-wrap: wrap; gap: 20px; }
.ml-foot-nav a { font-size: 13px; color: var(--text-2); font-weight: 500; }
.ml-foot-nav a:hover { color: var(--text-1); }
.ml-foot-social { display: flex; align-items: center; gap: 14px; }
.ml-foot-social a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); font-weight: 500; }
.ml-foot-social a:hover { color: var(--text-1); }
.ml-foot-social a svg { color: currentColor; }
@media (max-width: 720px) { .ml-foot-links-inner { flex-direction: column; align-items: flex-start; } }

/* Start-Initiative popup: the modal frames an iframe that loads the app's /start
   onboarding (real Astra chat). The .ml-overlay backdrop + grow-from-origin
   animation are reused from the existing modal styles above. */
.ml-start-modal { width: min(1200px, 94vw); padding: 0; overflow: hidden; }
/* fill ~90% of the viewport height so the embedded Astra onboarding (now h-full,
   see AstraInitiativeChat) stretches to fill the panel instead of leaving a band. */
.ml-start-frame { display: block; width: 100%; height: 90vh; border: 0; background: transparent; border-radius: var(--r-2xl); }
.ml-start-modal .ml-modal-close { z-index: 6; }
@media (max-width: 639.98px) {
  .ml-start-frame { height: 100%; border-radius: 0; }
}

/* Hero right column: the waitlist lives in the final CTA, so the right column is
   just the product video — shown at its full 16:9 (no crop), centred vertically. */
.ml-hero-right .ml-he-top { flex: 0 0 auto; min-height: 0; justify-content: center; }
.ml-hero-right .ml-video-frame { flex: 0 0 auto; min-height: 0; display: flex; flex-direction: column; }
.ml-hero-right .ml-browser { flex: 0 0 auto; min-height: 0; display: flex; flex-direction: column; }
.ml-hero-right .ml-video-shot { flex: 0 0 auto; min-height: 0; }
.ml-hero-right .ml-video-shot .ml-video-el,
.ml-hero-right .ml-video-shot img { height: 100%; min-height: 0; }
.ml-hero-right .ml-he-bottom { flex: 0 0 auto; }

/* Final CTA + the always-visible footer bar (About/FAQ/social) share the 100vh
   snap section: the CTA centres, the bar pins to the bottom. The brand+copyright
   <footer> sits BELOW the band, so it reveals only on overscroll at the end. */
.ml-cta-band { padding: 0; justify-content: flex-start; }
.ml-cta-main { flex: 1 1 auto; width: 100%; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center; padding: 88px 0 20px; }
.ml-cta-band > .ml-foot-links { flex: 0 0 auto; }