/* =============================================================================
   Homepage (the snap-scroll landing) — ported verbatim from the live-demos
   prototype harness <style> + the prototype Nav (now our shared .mk-nav, styled
   pixel-identically on the homepage). Tokens come from brand-tokens.css.
   ============================================================================= */

/* The prototype assumed border-box globally; without it the ported sections'
   `width:100% + padding` overflow the viewport on mobile. Scoped to the homepage. */
html.ld-home *, html.ld-home *::before, html.ld-home *::after { box-sizing: border-box; }

/* Match the Space Travel design: its display type is Fraunces at the SHARP default
   (the export loaded Fraunces with only opsz/wght, so the brand's
   `font-variation-settings: "SOFT" 100, "WONK" 1` was a no-op and it rendered
   high-contrast). Override to SOFT 0 / WONK 0 on the homepage only — the rest of
   the app keeps the brand's softer setting. */
html.ld-home .bv-display { font-variation-settings: "SOFT" 0, "WONK" 0; }

/* Grid items default to min-width:auto (content-sized), so a wide child — e.g.
   the embed card's <pre> code block — expands its cell past the viewport. Let the
   cells shrink so wide content (the <pre>) scrolls inside its own overflow:auto. */
.ld-grid-2 > *, .ld-grid-3 > *, .ld-grid-4 > *, .ld-split > * { min-width: 0; }

html.ld-home, body.ld-home { margin: 0; padding: 0; }
/* The DOCUMENT is the snap-scroller (not a nested div) so iOS native behaviours —
   tap-the-status-bar-to-scroll-to-top, momentum, overscroll — all work. */
html.ld-home {
  scroll-snap-type: y mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
  /* clip, NOT hidden: `overflow-x: hidden` forces overflow-y to `auto`, turning
     the element into a scroll container — which makes the sections snap to it
     (no scroll) instead of the document, breaking the desktop snap. `clip`
     clips horizontally without establishing a scroll container. */
  overflow-x: clip;
}
html.ld-home::-webkit-scrollbar { display: none; }
/* marketing.css sets a GLOBAL `html, body { overflow-x: hidden }`. On <body> that
   forces overflow-y to `auto`, making BODY a scroll container — so the sections
   snap to body (which has no scroll-snap-type) instead of the document, killing
   the desktop snap. Override to `clip` (clips horizontally, never a scroll
   container) so <html> stays the one scroll container that owns the snap. */
body.ld-home { background: var(--bv-paper); overflow-x: clip; }
body.ld-home a { -webkit-tap-highlight-color: transparent; }

/* Passthrough wrapper (the document scrolls). overflow-x: clip, never hidden —
   see above — so it doesn't become a scroll container and steal the snap. */
.ld-scroller { overflow-x: clip; }
.ld-snap {
  min-height: 100vh; height: auto;
  scroll-snap-align: start; scroll-snap-stop: always;
}
/* Pause all animations inside a section scrolled out of view (perf). */
.ld-snap[data-offscreen] *,
.ld-snap[data-offscreen] *::before,
.ld-snap[data-offscreen] *::after { animation-play-state: paused !important; }
/* Drop the pulsing "live" dot motif — keep a calm static indicator instead. */
.bv-dot, .bv-dot::before, .bv-dot::after { animation: none !important; box-shadow: none !important; }

/* ── Brand foil / sparkle ──────────────────────────────────────────────── */
@keyframes hg-foil  { 0%,100% { background-position: 0% 50%, 0 0; } 50% { background-position: 100% 50%, 0 0; } }
@keyframes hg-sheen { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
@keyframes ld-twinkle { 0%,100% { opacity: .2; transform: scale(.8); } 50% { opacity: .9; transform: scale(1.25); } }
@keyframes ld-neon-sweep { 0% { background-position: 220% 0; } 100% { background-position: -120% 0; } }
/* Self-healing: a soft paint sweep re-coats the drifted rule. */
.ld-paint-fix { background-image: linear-gradient(100deg, transparent 30%, color-mix(in oklab, var(--bv-orange) 28%, transparent) 50%, transparent 70%); background-size: 55% 100%; background-repeat: no-repeat; animation: ld-paint-sweep 2.4s ease-in-out infinite; }
@keyframes ld-paint-sweep { 0% { background-position: -30% 0; } 100% { background-position: 150% 0; } }

/* Interactive buttons */
.ld-btn-i { transition: transform .15s var(--ca-ease-out, ease), box-shadow .18s ease, filter .15s ease; }
.ld-btn-i:hover { transform: translateY(-2px); filter: brightness(1.08); }
.ld-btn-i:active { transform: translateY(0); }
/* Holographic foil button — base colour stays; a prismatic glare sweeps across
   on a GPU transform (smooth, no background-position jank), holding offscreen
   between passes. */
.ld-holo-btn { position: relative; overflow: hidden;
  transition: transform .15s var(--ca-ease-out, ease), box-shadow .18s ease, filter .18s ease; }
.ld-holo-btn::before { content: ''; position: absolute; top: -60%; bottom: -60%; left: 0; width: 38%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.55) 38%, rgba(139,227,255,0.5) 52%, rgba(199,125,255,0.4) 66%, transparent);
  transform: skewX(-18deg) translateX(-200%); pointer-events: none;
  animation: ld-holo-glare 3.6s cubic-bezier(0.5,0,0.5,1) infinite; }
.ld-holo-btn:hover { transform: translateY(-2px); filter: brightness(1.06) saturate(1.15); }
.ld-holo-btn:active { transform: translateY(0); }
@keyframes ld-holo-glare { 0% { transform: skewX(-18deg) translateX(-200%); } 45%,100% { transform: skewX(-18deg) translateX(560%); } }
/* Paint splatter flick-in */
@keyframes ld-splat-pop {
  0%   { opacity: 0; transform: scale(0.15) rotate(var(--rot, 0deg)); }
  60%  { opacity: var(--op, 0.5); transform: scale(1.12) rotate(var(--rot, 0deg)); }
  100% { opacity: var(--op, 0.5); transform: scale(1) rotate(var(--rot, 0deg)); }
}
/* Brushstroke draw-in: a WIDE soft mask gradient sweeps left→right, so the
   leading edge is very soft instead of a hard wipe. */
@keyframes ld-brush-draw {
  0%   { opacity: 0; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  18%  { opacity: var(--bop, 0.45); }
  100% { opacity: var(--bop, 0.45); -webkit-mask-position: 0% 0; mask-position: 0% 0; }
}
/* Sessions screen: a square grid scrolling toward the viewer, fading at top. */
.ld-grid3d { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ld-grid3d::before { content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(to right, color-mix(in oklab, var(--bv-violet) 34%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklab, var(--bv-violet) 34%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(to top, #000 32%, transparent 92%); mask-image: linear-gradient(to top, #000 32%, transparent 92%);
  opacity: 0.8; animation: ld-grid-move 3s linear infinite; }
@keyframes ld-grid-move { from { background-position: 0 0; } to { background-position: 0 44px; } }

/* ── Hero: modals rushing the viewer on the z-axis ─────────────────────── */
.ld-flyer {
  position: absolute; left: 50%; top: 50%;
  transform-style: preserve-3d; will-change: transform, opacity;
  opacity: 0;
  animation-name: ld-rush; animation-iteration-count: infinite; animation-timing-function: linear;
  animation-fill-mode: both;
}
@keyframes ld-rush {
  0%   { opacity: 0; transform: translate(-50%,-50%) translate3d(var(--fx), var(--fy), -2600px) rotateX(var(--frx)) rotateY(var(--fry)) rotateZ(var(--frot)) scale(var(--fscale)); }
  20%  { opacity: 0; }
  32%  { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) translate3d(calc(var(--fx) * 2.1), calc(var(--fy) * 2.1), 560px) rotateX(var(--frx)) rotateY(var(--fry)) rotateZ(var(--frot)) scale(var(--fscale)); }
}
/* The rush ends short of the 780px perspective plane. A card that reaches the
   camera projects to thousands of pixels (and flips behind it) while still
   partly visible, so every pass re-rasterised a huge layer and the whole
   compositor — video included — stuttered. */
/* Center rushers: straight at the lens, fading as they pass the camera. */
.ld-flyer-center { animation-name: ld-rush-center; }
@keyframes ld-rush-center {
  0%   { opacity: 0; transform: translate(-50%,-50%) translate3d(var(--fx), var(--fy), -2400px) rotateX(var(--frx)) rotateY(var(--fry)) rotateZ(var(--frot)) scale(var(--fscale)); }
  16%  { opacity: 0; }
  34%  { opacity: 1; }
  62%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) translate3d(calc(var(--fx) * 1.25), calc(var(--fy) * 1.25), 660px) rotateX(var(--frx)) rotateY(var(--fry)) rotateZ(var(--frot)) scale(var(--fscale)); }
}
/* Depth-of-field without animated filter:blur() (which re-rasterizes every frame —
   especially costly in Safari): a pre-blurred sprite sits over the sharp one and
   crossfades in via OPACITY — pure compositor work. The .fl-blur child inherits the
   flyer's animation-duration/delay so its fade stays in sync with the rush. */
.ld-flyer .fl-img { width: 232px; max-width: none; height: auto; display: block; }
.ld-flyer .fl-blur { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0;
  animation-name: ld-blurfade; animation-timing-function: linear; animation-iteration-count: infinite;
  animation-fill-mode: both; animation-duration: inherit; animation-delay: inherit; will-change: opacity; }
.ld-flyer-center .fl-blur { animation-name: ld-blurfade-center; }
@keyframes ld-blurfade { 0%, 60% { opacity: 0; } 80% { opacity: 0.55; } 100% { opacity: 1; } }
@keyframes ld-blurfade-center { 0% { opacity: 0; } 30% { opacity: 0.55; } 60% { opacity: 0.9; } 100% { opacity: 1; } }

/* ── Real entrance animations, lifted verbatim from the theme kits ──────── */
.ld-ent { will-change: transform, opacity, filter; backface-visibility: hidden; }

/* Holographic — Foil-tilt */
.ld-ent-foiltilt { animation: ho-tilt 1.5s cubic-bezier(0.16,0.7,0.18,1) both; transform-style: preserve-3d; }
@keyframes ho-tilt{
  0%   { opacity: 0; transform: perspective(900px) rotateY(-58deg) rotateX(10deg) scale(0.82); filter: brightness(1.9) saturate(2.1) drop-shadow(0 0 22px rgba(199,125,255,0.7)); }
  22%  { opacity: 1; }
  44%  { transform: perspective(900px) rotateY(26deg) rotateX(-5deg) scale(1.04); filter: brightness(1.5) saturate(1.7) drop-shadow(0 0 16px rgba(91,224,230,0.6)); }
  64%  { transform: perspective(900px) rotateY(-13deg) rotateX(2deg) scale(0.99); filter: brightness(1.28) saturate(1.4); }
  80%  { transform: perspective(900px) rotateY(6deg) scale(1.008); filter: brightness(1.14) saturate(1.2); }
  92%  { transform: perspective(900px) rotateY(-2.5deg); filter: brightness(1.05); }
  100% { opacity: 1; transform: perspective(900px) rotateY(0) rotateX(0) scale(1); filter: brightness(1) saturate(1); }
}
/* Liquid Mercury — Coalesce (droplet) */
.ld-ent-mercury { animation: ca-mercury 0.82s cubic-bezier(0.22,1.0,0.3,1) both; }
@keyframes ca-mercury{
  0%   { opacity:0; transform: scale(0.18,0.04); filter: blur(7px); }
  42%  { opacity:1; transform: scale(1.10,0.90); filter: blur(0); }
  60%  { transform: scale(0.95,1.06); }
  76%  { transform: scale(1.03,0.985); }
  88%  { transform: scale(0.99,1.005); }
  100% { transform: scale(1,1); }
}
/* Terminal — CRT power-on */
.ld-ent-crt { animation: tm-crt 0.5s cubic-bezier(0.2,0.8,0.2,1) both; }
@keyframes tm-crt{
  0%   { opacity: 0; transform: scaleY(0.012) scaleX(1.04); filter: brightness(2.5); }
  45%  { opacity: 1; transform: scaleY(0.04) scaleX(1); filter: brightness(2.2); }
  70%  { transform: scaleY(1.04); filter: brightness(1.3); }
  100% { opacity: 1; transform: scaleY(1); filter: brightness(1); }
}
/* Neon — Flicker-on */
.ld-ent-flickeron { animation: n-flickeron 0.9s steps(1) both; }
@keyframes n-flickeron{
  0% { opacity: 0; } 10% { opacity: 1; } 14% { opacity: 0.1; } 20% { opacity: 1; }
  24% { opacity: 0.2; } 28% { opacity: 0.9; } 34% { opacity: 0.3; } 40% { opacity: 1; } 100% { opacity: 1; }
}
/* Mondrian — Block-snap */
.ld-ent-blocksnap { animation: md-blocksnap 0.34s steps(3) both; }
@keyframes md-blocksnap{
  0%   { opacity: 0; transform: translate(-14px,-14px); }
  100% { opacity: 1; transform: translate(0,0); }
}
/* Blueprint — Draw (drafted left→right) */
.ld-ent-draw { animation: bp-draw 0.55s cubic-bezier(0.4,0,0.2,1) both; }
@keyframes bp-draw{
  0%   { opacity: 0; clip-path: inset(0 100% 0 0); }
  60%  { opacity: 1; clip-path: inset(0 0 0 0); }
  100% { opacity: 1; clip-path: none; }
}

/* ── Full-frame step transitions: page A → customized page B, looping ──── */
.ld-tx { position: relative; width: 100%; height: 100%; }
.ld-txp { position: absolute; inset: 8px; border-radius: 10px; overflow: hidden; will-change: transform, clip-path; backface-visibility: hidden; }
.ld-txp-a { z-index: 1; }
.ld-txp-b { z-index: 2; }

/* blueprint wipe — B sweeps in from the left behind a bright cyan front */
.ld-tx-wipe .ld-txp-b { animation: txp-wipe 5.6s both infinite; }
@keyframes txp-wipe { 0%,24% { clip-path: inset(0 100% 0 0); } 46%,74% { clip-path: inset(0 0 0 0); } 96%,100% { clip-path: inset(0 100% 0 0); } }
.ld-tx-edge.ld-edge-wipe { position: absolute; top: 8px; bottom: 8px; width: 4px; z-index: 4; background: linear-gradient(180deg, #7de3ff, #5fd0ff); box-shadow: 0 0 14px 3px rgba(95,208,255,0.9); border-radius: 2px; opacity: 0; animation: edge-wipe 5.6s both infinite; }
@keyframes edge-wipe { 0%,24% { left: 8px; opacity: 0; } 25% { opacity: 1; } 46% { left: calc(100% - 12px); opacity: 1; } 50%,72% { opacity: 0; } 74% { left: calc(100% - 12px); opacity: 1; } 95% { left: 8px; opacity: 1; } 96%,100% { opacity: 0; } }

/* technical scan — B revealed top→down behind a scan line */
.ld-tx-scan .ld-txp-b { animation: txp-scan 5.6s both infinite; }
@keyframes txp-scan { 0%,24% { clip-path: inset(0 0 100% 0); } 46%,74% { clip-path: inset(0 0 0 0); } 96%,100% { clip-path: inset(0 0 100% 0); } }
.ld-tx-edge.ld-edge-scan { position: absolute; left: 8px; right: 8px; height: 3px; z-index: 4; background: linear-gradient(90deg, transparent, #7de3ff, transparent); box-shadow: 0 0 14px 2px rgba(95,208,255,0.8); opacity: 0; animation: edge-scan 5.6s both infinite; }
@keyframes edge-scan { 0%,24% { top: 8px; opacity: 0; } 25% { opacity: 1; } 46% { top: calc(100% - 11px); opacity: 1; } 50%,72% { opacity: 0; } 74% { top: calc(100% - 11px); opacity: 1; } 95% { top: 8px; opacity: 1; } 96%,100% { opacity: 0; } }

/* ink bleed — B blooms through an organic circle that grows from center */
.ld-tx-bleed .ld-txp-b { animation: txp-bleed 5.6s both infinite; }
@keyframes txp-bleed { 0%,24% { clip-path: circle(0% at 52% 56%); } 46%,74% { clip-path: circle(78% at 52% 56%); } 96%,100% { clip-path: circle(0% at 52% 56%); } }

/* droplet dissolve — B revealed through an expanding lens off-center */
.ld-tx-droplet .ld-txp-b { animation: txp-droplet 5.6s both infinite; }
@keyframes txp-droplet { 0%,24% { clip-path: circle(0% at 32% 30%); filter: blur(3px); } 46%,74% { clip-path: circle(95% at 32% 30%); filter: blur(0); } 96%,100% { clip-path: circle(0% at 32% 30%); filter: blur(3px); } }

/* page turn — A folds away on a vertical hinge, revealing B underneath */
.ld-tx-turn { perspective: 900px; }
.ld-tx-turn .ld-txp-a { z-index: 3; transform-origin: left center; animation: txp-turn 5.6s both infinite; box-shadow: 0 0 0 0 rgba(0,0,0,0); }
@keyframes txp-turn { 0%,24% { transform: rotateY(0); } 46%,74% { transform: rotateY(-168deg); } 96%,100% { transform: rotateY(0); } }

/* film pull — the strip pulls up; a dark frameline crosses between A and B */
.ld-tx-pull .ld-txp-a { animation: txp-pull-a 5.6s both infinite; }
.ld-tx-pull .ld-txp-b { animation: txp-pull-b 5.6s both infinite; }
@keyframes txp-pull-a { 0%,24% { transform: translateY(0); } 46%,74% { transform: translateY(-118%); } 96%,100% { transform: translateY(0); } }
@keyframes txp-pull-b { 0%,24% { transform: translateY(118%); } 46%,74% { transform: translateY(0); } 96%,100% { transform: translateY(118%); } }

/* ── Gallery marquee ───────────────────────────────────────────────────── */
.ld-marquee-track { will-change: transform; }
.ld-marq-left  { animation: ld-mleft  var(--dur,48s) linear infinite; }
.ld-marq-right { animation: ld-mright var(--dur,48s) linear infinite; }
@keyframes ld-mleft  { from { transform: translateX(0); }      to { transform: translateX(-50%); } }
@keyframes ld-mright { from { transform: translateX(-50%); }   to { transform: translateX(0); } }

/* ── Paper cards hover-lift ─────────────────────────────────────────────── */
.ld-paper-card { transition: transform 200ms var(--ca-ease-out, ease), box-shadow 200ms var(--ca-ease-out, ease); }
.ld-paper-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -16px rgba(26,18,64,0.28); }

/* Marketplace card previews fill the tile + play the motion clip on hover
   (library.css, which normally styles .pv-*, isn't loaded on the homepage). */
.ld-home .pv-img, .ld-home .pv-motion { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ld-home .pv-motion { z-index: 2; }

/* Pitch bar chart: bars grow up from the floor, staggered, with a soft overshoot. */
.ld-bar { transition: none; }
.ld-bar-live { transform: scaleY(0); animation: ld-bar-grow 0.62s var(--ca-ease-snap, cubic-bezier(0.2,0.9,0.3,1.2)) forwards; }
@keyframes ld-bar-grow { 0% { transform: scaleY(0); } 70% { transform: scaleY(1.06); } 100% { transform: scaleY(1); } }

@media (max-width: 900px) {
  .ld-snap { height: auto; min-height: 100vh; }
  .ld-grid-3, .ld-grid-4 { grid-template-columns: 1fr 1fr !important; }
}
/* Mobile: nav stays pinned to the TOP (like the rest of the site). Relax the
   mandatory snap so a section taller than the screen scrolls fully before the
   next one, leave clearance under the fixed header, and stack EVERY grid
   (marketplace, animations/transitions, sessions cards, healing, footer). */
@media (max-width: 760px) {
  /* No snap on mobile. The sections stack tall (cards), so a mandatory snap fires
     mid-scroll ("unintentional"), and iOS proximity is unreliable — neither reads
     well for tall content. Free scroll + generous spacing instead; the snap-scroll
     experience stays on desktop where each section is exactly one screen. */
  html.ld-home { scroll-snap-type: none; }
  .ld-snap {
    min-height: 100vh; height: auto;
    scroll-snap-align: none;
    padding-top: 88px; padding-bottom: 88px; box-sizing: border-box;
  }
  #hero { padding-top: 40px; }
  .ld-hero .sp-center { min-height: 0; }
  /* Extra buffer where the background flips light↔dark, so the colour change has
     room to breathe. `+` handles the section AFTER the flip; :has(+…) the one
     BEFORE it (CSS has no previous-sibling). */
  .ld-dark-sec + .ld-light-sec, .ld-light-sec + .ld-dark-sec { padding-top: 144px; }
  .ld-dark-sec:has(+ .ld-light-sec), .ld-light-sec:has(+ .ld-dark-sec) { padding-bottom: 144px; }
  /* Stack every grid and give the stacked cards more breathing room. */
  .ld-grid-2, .ld-grid-3, .ld-grid-4, .ld-split,
  .bv-self-healing-grid, .bv-footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  /* Sessions card: drop "Clicks tracked" so the stat row isn't crowded (3-up). */
  .ld-hide-sm { display: none !important; }
  .ld-stats4 { grid-template-columns: repeat(3, 1fr) !important; }
  .ld-sidedots { display: none !important; }
  /* CTA: the footer flows below the copy on every width; on narrow screens
     drop the vertical centering so the copy starts right under the nav. */
  #cta > .ld-cta-copy { justify-content: flex-start; }
}

/* Short viewports: the CTA screen is copy + the in-section footer. Tighten
   both so the whole screen fits without the footer creeping over the copy. */
@media (max-height: 900px) {
  #cta > .ld-cta-copy { padding-top: 88px !important; padding-bottom: 22px !important; }
  #cta > .ld-cta-copy > img { width: clamp(80px, 10vw, 110px) !important; margin-bottom: 12px !important; }
  #cta > .ld-cta-copy > h2 { font-size: clamp(42px, 6.4vw, 76px) !important; margin-bottom: 14px !important; }
  #cta > .ld-cta-copy > p { font-size: 16px !important; margin-bottom: 22px !important; }
  #cta > footer .bv-footer-grid { padding: 20px 28px 10px !important; gap: 28px !important; }
  #cta > footer ul { gap: 5px !important; }
  #cta > footer .bv-footer-grid > div > div:first-child { margin-bottom: 9px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ld-flyer, .ld-loop, .ld-tx-a, .ld-tx-b, .ld-marquee-track,
  .ld-live-foil, [class*="ld-e-"], [class*="ld-tx-"] { animation: none !important; }
  .ld-scroller { scroll-behavior: auto; }
}

/* =============================================================================
   The shared nav (.mk-nav), styled pixel-identically to the prototype Nav on
   the homepage only (body.ld-home). Fixed over the scroller; translucent;
   tone-switches via body.ld-nav-dark (toggled per active section by homepage.js).
   IMPORTANT: this is a nav-only class — NOT bv-dark, which would also flip the
   global --bv-* tokens and darken every paper section. Values copied verbatim
   from ld-sections.jsx navStyles / Nav.
   ============================================================================= */
body.ld-home .mk-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  /* paper tone (over cream cards) */
  background: color-mix(in oklab, var(--bv-paper) 82%, transparent);
  border-bottom: 1px solid var(--bv-line-1);
  transition: background 200ms var(--ca-ease-out, ease), border-color 200ms var(--ca-ease-out, ease);
}
body.ld-home .mk-nav .mk-nav-link {
  color: var(--bv-ink-2);
  transition: color 120ms var(--ca-ease-out, ease);
}
body.ld-home .mk-nav .mk-nav-link:hover,
body.ld-home .mk-nav .mk-nav-link.active { color: var(--bv-ink); }
/* paper-tone underline = violet */
body.ld-home .mk-nav .mk-nav-link .mk-paint path { stroke: var(--bv-violet); }
/* paper-tone CTAs */
body.ld-home .mk-nav .mk-btn-primary {
  background: var(--bv-ink); color: var(--bv-paper);
  box-shadow: 0 2px 0 var(--bv-violet);
}
body.ld-home .mk-nav .mk-btn-ghost { color: var(--bv-ink-2); border-color: var(--bv-line-2); }

/* ── dark tone (over hero/gallery/animations/transitions/cta) ── */
body.ld-home.ld-nav-dark .mk-nav {
  background: color-mix(in oklab, #0b0822 70%, transparent);
  border-bottom: 1px solid rgba(199,197,240,0.16);
}
body.ld-home.ld-nav-dark .mk-nav .mk-nav-link { color: rgba(243,238,252,0.82); }
body.ld-home.ld-nav-dark .mk-nav .mk-nav-link:hover,
body.ld-home.ld-nav-dark .mk-nav .mk-nav-link.active { color: #ffffff; }
/* dark-tone underline = lime */
body.ld-home.ld-nav-dark .mk-nav .mk-nav-link .mk-paint path { stroke: #C7F255; }
/* dark-tone CTA = violet holo button */
body.ld-home.ld-nav-dark .mk-nav .mk-btn-primary {
  background: var(--bv-violet); color: #ffffff;
  border: 1px solid color-mix(in oklab, var(--bv-violet) 60%, #fff 8%);
  box-shadow: 0 2px 0 #4f3aa6, 0 8px 20px -8px rgba(123,62,193,0.6);
}
body.ld-home.ld-nav-dark .mk-nav .mk-btn-ghost { color: rgba(243,238,252,0.9); border-color: rgba(199,197,240,0.28); }
/* Dark mode: "My" (the .mk-wordmark-text colour) goes cream; "AI"/"SE" keep
   its violet accent. */
body.ld-home.ld-nav-dark .mk-nav .mk-wordmark-text { color: #f3eefc; }

/* Mobile menu (toggle + drawer) follows the nav tone. In dark mode the default
   ink-coloured hamburger is invisible against the dark bar. */
body.ld-home.ld-nav-dark .mk-mobile-toggle { color: #f3eefc; border-color: rgba(199,197,240,0.28); }
body.ld-home.ld-nav-dark .mk-mobile-toggle.open { background: rgba(255,255,255,0.08); }
body.ld-home.ld-nav-dark .mk-mobile-drawer { background: color-mix(in oklab, #0b0822 94%, transparent); border-top-color: rgba(199,197,240,0.16); }
body.ld-home.ld-nav-dark .mk-mobile-link { color: rgba(243,238,252,0.82); }
body.ld-home.ld-nav-dark .mk-mobile-link.active { color: #fff; background: rgba(255,255,255,0.06); border-left-color: #C7F255; }

/* =============================================================================
   "Space Travel" cinematic screens (hero + Meet MyAISE) — ported from the
   live-demos/Space Travel.html prototype <style>. These classes appear only on
   the homepage's two video screens. The shared nav goes transparent + blur-free
   over them (.mk-nav-bare, toggled by homepage.js) and returns to its blurred
   glass from screen 3 on — blur over moving footage re-blurs every frame.
   ============================================================================= */

/* Transparent, blur-free nav over the two video screens; smooth blur fade back. */
body.ld-home .mk-nav { transition: background 200ms var(--ca-ease-out, ease), border-color 200ms var(--ca-ease-out, ease), backdrop-filter 320ms ease, -webkit-backdrop-filter 320ms ease; }
body.ld-home .mk-nav.mk-nav-bare {
  background: transparent; border-bottom-color: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* ── Cinematic background layers ───────────────────────────────────────────── */
.sp-bg { position: absolute; inset: 0; z-index: 0; background: #05030d; overflow: hidden; }
.sp-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
  transform: translateZ(0); backface-visibility: hidden; will-change: opacity; }
.sp-nebula { position: absolute; inset: 0; pointer-events: none; transition: opacity 0.9s ease; }
.sp-bg--video .sp-nebula { opacity: 0.3; }
.sp-edgefade { position: absolute; left: 0; right: 0; height: 150px; pointer-events: none; }
.sp-edgefade-b { bottom: 0; background: linear-gradient(180deg, rgba(5,3,13,0), #05030d); }
.sp-edgefade-t { top: 0; background: linear-gradient(0deg, rgba(5,3,13,0), #05030d); }
@media (prefers-reduced-motion: no-preference) {
  .sp-nebula { animation: sp-nebula-drift 32s ease-in-out infinite alternate; }
}
@keyframes sp-nebula-drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1.05); }
  to   { transform: translate3d(1.5%, 1.2%, 0) scale(1.12); }
}
.sp-nebula-hero { background:
  radial-gradient(60% 50% at 18% 22%, rgba(123,62,193,0.30), transparent 60%),
  radial-gradient(50% 45% at 84% 30%, rgba(0,168,198,0.20), transparent 60%),
  radial-gradient(55% 50% at 60% 88%, rgba(194,64,141,0.18), transparent 60%); }
.sp-nebula-cap { background:
  radial-gradient(60% 50% at 82% 16%, rgba(238,113,52,0.16), transparent 60%),
  radial-gradient(55% 45% at 10% 82%, rgba(123,62,193,0.24), transparent 60%),
  radial-gradient(45% 40% at 50% 110%, rgba(0,168,198,0.16), transparent 60%); }
.sp-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
  radial-gradient(120% 80% at 50% 50%, rgba(5,3,13,0.10) 32%, rgba(5,3,13,0.66) 100%),
  linear-gradient(180deg, rgba(5,3,13,0.55), rgba(5,3,13,0.08) 28%, rgba(5,3,13,0.08) 72%, rgba(5,3,13,0.6)); }

/* ── Liquid glass (chat panel + capability cards + footer) ─────────────────── */
.lg { background: linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.16); border-radius: 16px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transform: translateZ(0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 24px 60px -28px rgba(0,0,0,0.7); }
/* Live backdrop-blur over moving footage dominates compositing — and the cost
   scales with PHYSICAL pixels (DPR²), so a 2× retina laptop is already past the
   pain point a 2000px 1× display hits. Drop the per-frame blur on big OR hi-DPI
   displays, keeping the frosted look via a translucent fill + inner highlight.
   Standard 1× displays (where blur is cheap) keep the real backdrop-blur. */
@media (min-width: 2000px), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
  .lg { backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    background: linear-gradient(160deg, rgba(42,36,82,0.66), rgba(16,13,40,0.62)); }
}
/* The small secondary buttons are cheap to blur, so keep their frosted glass on
   retina (matching the design) — only drop it on truly huge (≥2000px) displays. */
@media (min-width: 2000px) {
  .sp-secondary { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(42,36,82,0.6); }
}

/* ── Hero lockup ───────────────────────────────────────────────────────────── */
.sp-center { position: relative; z-index: 5; flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 96px 24px 48px; max-width: 820px; margin: 0 auto; }
/* The section itself is not a flex container, so give the stack the full
   screen height and let its own centering do the work on tall displays. */
.ld-hero .sp-center { min-height: 100vh; min-height: 100dvh; }
/* Animated brush logo: an HEVC-with-alpha (Safari) / VP9-alpha WebM (Chrome/FF)
   video played directly; the SVG fallback shows on engines that can't composite
   alpha, scaled to match the video clip's transparent margins. */
.sp-logo-vid { position: relative; width: clamp(250px, 33vw, 460px); aspect-ratio: 960 / 740; margin-bottom: 4px; }
.sp-logo-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; transition: opacity .5s ease; }
.sp-logo-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .5s ease;
  transform: scale(0.94); filter: drop-shadow(0 8px 30px rgba(123,62,193,0.55)); }
.sp-eyebrow { font: 600 11px/1 var(--bv-font-mono); letter-spacing: 0.2em; text-transform: uppercase; color: #b9b2e8; margin-bottom: 18px; }
.sp-h1 { font-size: clamp(46px, 7.5vw, 96px); line-height: 0.98; margin: 0 0 20px; color: #fbf8ff; text-shadow: 0 4px 40px rgba(0,0,0,0.6); }
.sp-h2 { font-size: clamp(32px, 4.6vw, 56px); line-height: 1.02; margin: 0 0 8px; color: #fbf8ff; }
.sp-sub { font: 400 17px/1.65 var(--bv-font-sans); color: #cfc9ea; max-width: 560px; margin: 0 0 30px; text-wrap: pretty; }
.sp-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.sp-primary { display: inline-flex; align-items: center; height: 52px; padding: 0 26px; border-radius: 12px;
  font: 700 15px/1 var(--bv-font-sans); color: #0c0820; background: #C7F255; text-decoration: none;
  box-shadow: 0 3px 0 #8db52f, 0 14px 36px -8px rgba(199,242,85,0.5); white-space: nowrap; }
.sp-secondary { display: inline-flex; align-items: center; height: 52px; padding: 0 22px; border-radius: 12px;
  font: 600 15px/1 var(--bv-font-sans); color: #f3eefc; background: rgba(255,255,255,0.07);
  border: 1px solid rgba(199,197,240,0.26); text-decoration: none; backdrop-filter: blur(10px); white-space: nowrap; }
.sp-hint { margin-top: 44px; font: 500 11px/1 var(--bv-font-mono); letter-spacing: 0.16em; text-transform: uppercase;
  color: #7d77a8; animation: sp-hint-bob 2.6s ease-in-out infinite; transition: opacity .7s ease; }
.sp-hint[data-gone] { opacity: 0 !important; }
@keyframes sp-hint-bob { 0%,100% { transform: translateY(0); opacity: 0.75; } 50% { transform: translateY(5px); opacity: 1; } }

/* Neon ink-charge mark (reuses ld-neon-sweep / ld-twinkle keyframes above). */
.sp-neon { position: relative; display: inline-block; color: #C7F255; text-shadow: 0 0 22px rgba(199,242,85,0.5); white-space: nowrap; }
.sp-neon::after { content: ''; position: absolute; left: 0; right: 0; bottom: -0.04em; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, #C7F255 30%, #ffffff 50%, #C7F255 70%, transparent);
  background-size: 220% 100%; box-shadow: 0 0 12px #C7F255, 0 0 26px rgba(199,242,85,0.55);
  animation: ld-neon-sweep 3s linear infinite; }

/* ── Capabilities (Meet MyAISE) ──────────────────────────────────────────── */
.sp-cap-inner { position: relative; z-index: 3; flex: 1; display: flex; flex-direction: column; justify-content: center;
  max-width: var(--mk-content-max); width: 100%; margin: 0 auto; padding: 58px 28px 34px; box-sizing: border-box; text-align: center; }
.sp-cap-grid { margin-top: 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: left; perspective: 900px; }
.sp-cap-body { margin-top: 18px; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 20px; align-items: stretch; text-align: left; }
.sp-chat-wrap { display: flex; min-height: 0; }
.sp-cap-body .sp-cap-grid { margin-top: 0; grid-template-columns: repeat(2, 1fr); gap: 11px; }
.sp-cap-body .sp-card { padding: 13px 14px 13px; }
.sp-cap-body .sp-daub { width: 19px; height: 19px; margin-bottom: 8px; }
.sp-cap-body .sp-card-d { font-size: 11.5px; line-height: 1.42; }
.sp-cap-body .sp-card-k { margin-bottom: 5px; }
.sp-cap-body .sp-card-t { font-size: 16px; margin-bottom: 5px; }
.sp-card { position: relative; padding: 20px 20px 22px; transition: transform .18s var(--ca-ease-out, ease), border-color .18s ease; }
.sp-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.3); }
.sp-daub { position: relative; display: block; width: 22px; height: 22px; margin-bottom: 14px;
  box-shadow: inset 0 -3px 4px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.3); transition: box-shadow .2s var(--ca-ease-out, ease); }
/* Hover = MyAISE answers: the title underlines (she draws the answer) and a
   trio of typing dots appears (she's composing a reply). Accent is per-card --cap. */
.sp-card:hover .sp-daub { box-shadow: inset 0 -3px 4px rgba(0,0,0,0.25), 0 0 0 4px color-mix(in srgb, var(--cap, #fff) 36%, transparent); }
.sp-card:hover .sp-daub::before { content: ''; position: absolute; left: -8px; top: -10px; width: 14px; height: 14px;
  background: #fff; -webkit-mask: url("/images/homepage/sparkle-2.svg") center / contain no-repeat; mask: url("/images/homepage/sparkle-2.svg") center / contain no-repeat;
  animation: sp-glint .85s ease both; }
@keyframes sp-glint { 0% { opacity: 0; transform: scale(0.2) rotate(-25deg); } 45% { opacity: .95; transform: scale(1.2) rotate(5deg); } 100% { opacity: 0; transform: scale(0.55) rotate(20deg); } }
.sp-card-t { position: relative; display: inline-block; font: 700 17px/1.2 var(--bv-font-sans); color: #fbf8ff; letter-spacing: -0.01em; margin-bottom: 7px; }
.sp-card-t::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; border-radius: 3px;
  background: var(--cap, #fff); opacity: 0; transform: scaleX(0); transform-origin: left;
  -webkit-mask: linear-gradient(90deg, #000 0 12%, rgba(0,0,0,.7) 30%, #000 52%, rgba(0,0,0,.65) 76%, #000 100%);
  mask: linear-gradient(90deg, #000 0 12%, rgba(0,0,0,.7) 30%, #000 52%, rgba(0,0,0,.65) 76%, #000 100%); }
.sp-card:hover .sp-card-t::after { animation: sp-repaint .7s var(--ca-ease-out, ease) both; }
@keyframes sp-repaint { 0% { opacity: 0; transform: scaleX(0); } 18% { opacity: 1; } 100% { opacity: 1; transform: scaleX(1); } }
.sp-card-reply { position: absolute; right: 15px; bottom: 13px; display: inline-flex; gap: 4px; align-items: center;
  opacity: 0; transform: translateY(4px); transition: opacity .22s ease, transform .22s ease; pointer-events: none; }
.sp-card-reply i { width: 5px; height: 5px; border-radius: 50%; background: var(--cap, #fff); opacity: .4; }
.sp-card:hover .sp-card-reply { opacity: 1; transform: none; }
.sp-card:hover .sp-card-reply i { animation: sp-typing-bob 1s ease-in-out infinite; }
.sp-card:hover .sp-card-reply i:nth-child(2) { animation-delay: .15s; }
.sp-card:hover .sp-card-reply i:nth-child(3) { animation-delay: .3s; }
.sp-card-k { font: 600 10px/1 var(--bv-font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #9b98c4; margin-bottom: 8px; }
.sp-card-d { font: 400 13.5px/1.55 var(--bv-font-sans); color: #bdb8da; margin: 0; }
.sp-footer { margin-top: 14px; display: flex; align-items: center; gap: 14px; padding: 11px 14px 11px 18px; }
.sp-footer img { width: 42px; height: 42px; }
.sp-footer-t { font: 600 16px/1 var(--bv-font-display, 'Fraunces', serif); color: #fbf8ff; }

/* ── MyAISE chat panel ───────────────────────────────────────────────────── */
.sp-chat { flex: 1; display: flex; flex-direction: column; height: 360px; max-height: 360px; padding: 0; overflow: hidden; }
.sp-chat-head { display: flex; align-items: center; gap: 11px; padding: 13px 15px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.sp-chat-av { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: radial-gradient(circle at 32% 28%, rgba(123,62,193,0.7), rgba(0,168,198,0.4)); box-shadow: inset 0 1px 1px rgba(255,255,255,0.3); }
.sp-chat-av img { width: 22px; height: 22px; }
.sp-chat-name { font: 700 14px/1.1 var(--bv-font-sans); color: #fbf8ff; }
.sp-chat-role { font: 500 10px/1 var(--bv-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: #9b98c4; margin-top: 3px; }
.sp-chat-badge { margin-left: auto; font: 600 9.5px/1 var(--bv-font-mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: #C7F255; border: 1px solid rgba(199,242,85,0.4); border-radius: 999px; padding: 4px 9px; }
.sp-chat-log { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 15px; display: flex; flex-direction: column; gap: 9px; }
.sp-chat-log::-webkit-scrollbar { display: none; }
.sp-msg { display: flex; flex-direction: column; max-width: 84%; animation: sp-msg-in 0.42s var(--ca-ease-out, ease) both; }
@keyframes sp-msg-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.sp-msg-user { align-self: flex-end; align-items: flex-end; }
.sp-msg-bot { align-self: flex-start; align-items: flex-start; }
.sp-bubble { font: 400 13.5px/1.5 var(--bv-font-sans); padding: 9px 13px; border-radius: 14px; }
.sp-msg-bot .sp-bubble { background: rgba(255,255,255,0.08); color: #ece9f7; border: 1px solid rgba(255,255,255,0.09); border-bottom-left-radius: 5px; }
.sp-msg-user .sp-bubble { background: linear-gradient(135deg, #7B3EC1, #5446BD); color: #fff; border-bottom-right-radius: 5px; }
.sp-tour { margin-top: 6px; font: 600 9.5px/1.2 var(--bv-font-mono); letter-spacing: 0.07em; text-transform: uppercase;
  color: #8fdcff; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px dashed rgba(0,168,198,0.55); border-radius: 8px; }
.sp-typing { display: inline-flex; gap: 4px; align-items: center; }
.sp-typing i { width: 6px; height: 6px; border-radius: 50%; background: #b9b2e8; animation: sp-typing-bob 1s ease-in-out infinite; }
.sp-typing i:nth-child(2) { animation-delay: 0.15s; }
.sp-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes sp-typing-bob { 0%,60%,100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.sp-chat-input { display: flex; align-items: center; gap: 10px; margin: 0 15px 15px; padding: 9px 11px;
  border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; background: rgba(255,255,255,0.04); }
.sp-chat-ph { flex: 1; font: 400 12.5px/1 var(--bv-font-sans); color: #8884a8; }
.sp-chat-send { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; background: #7B3EC1; color: #fff; font-size: 14px; }

/* ── Mobile + reduced motion for the Space screens ─────────────────────────── */
@media (max-width: 900px) {
  .sp-cap-grid { grid-template-columns: 1fr; }
  .sp-cap-body { grid-template-columns: 1fr; }
  .sp-cap-body .sp-cap-grid { grid-template-columns: 1fr; }
  .sp-footer { flex-wrap: wrap; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-hint, .sp-neon::after, .sp-nebula { animation: none !important; }
  .sp-card, .sp-card *, .sp-card::after, .sp-card *::before, .sp-card *::after { animation: none !important; }
}

/* ── MyAISE pipeline section (ported from the Claude Design export) ──── */
@keyframes ca-dot-travel {
  0%   { offset-distance: 0%;    opacity: 0; }
  3%   { opacity: 1; }
  13%  { offset-distance: 15.5%; }
  19%  { offset-distance: 15.5%; }
  43%  { offset-distance: 50%; }
  49%  { offset-distance: 50%; }
  73%  { offset-distance: 84.5%; }
  79%  { offset-distance: 84.5%; }
  96%  { offset-distance: 100%;  opacity: 1; }
  100% { offset-distance: 100%;  opacity: 0; }
}
@keyframes ca-burst {
  0%, 12%   { transform: scale(0.35) rotate(0deg);  opacity: 0; }
  15%       { transform: scale(1.25) rotate(18deg); opacity: 1; }
  19%       { transform: scale(1) rotate(26deg);    opacity: 0.9; }
  30%, 100% { transform: scale(0.35) rotate(40deg); opacity: 0; }
}
@keyframes ca-ring {
  0%, 12% { box-shadow: 0 0 0 0 rgba(238,113,52,0); }
  15%     { box-shadow: 0 0 0 3px var(--ring-c); }
  26%     { box-shadow: 0 0 0 14px rgba(238,113,52,0); }
  100%    { box-shadow: 0 0 0 0 rgba(238,113,52,0); }
}
@keyframes ca-fire {
  0%, 13%   { opacity: 0.45; }
  16%, 24%  { opacity: 1; }
  34%, 100% { opacity: 0.45; }
}
.ms-cta-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--bv-violet), 0 12px 28px -6px rgba(26,18,64,0.45); }
.ms-cta-ghost:hover { background: var(--bv-paper-3); border-color: var(--bv-line-3); }
@media (max-width: 720px) {
  .ms-pipe { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #ai-se *, #ai-se *::before, #ai-se *::after { animation: none !important; }
}

/* ── Hero chat card ("What can I show you today?" motif, dark variant) ──── */
.sp-hero-chat { margin: 26px auto 24px; width: min(430px, 92vw); }
.sp-hero-chat .mk-chat-card.mk-chat-dark {
  max-width: none;
  background: rgba(13, 10, 30, 0.72);
  border: 1px solid rgba(199, 197, 240, 0.18);
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  overflow: hidden;
  text-align: left;
}
.sp-hero-chat .mk-chat-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(199, 197, 240, 0.12);
  background: rgba(123, 62, 193, 0.14);
}
.sp-hero-chat .mk-chat-av {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: rgba(123, 62, 193, 0.3);
}
.sp-hero-chat .mk-chat-id { display: flex; flex-direction: column; }
.sp-hero-chat .mk-chat-name { font: 700 13px/1.1 var(--bv-font-sans); color: #fbf8ff; }
.sp-hero-chat .mk-chat-role { font: 500 9.5px/1 var(--bv-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: #9b98c4; margin-top: 3px; }
.sp-hero-chat .mk-chat-badge { margin-left: auto; font: 600 9px/1 var(--bv-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #C7F255; border: 1px solid rgba(199, 242, 85, 0.4); border-radius: 999px; padding: 4px 8px; }
.sp-hero-chat .mk-chat-log {
  height: 178px; overflow-y: auto; scrollbar-width: none;
  padding: 13px; display: flex; flex-direction: column; gap: 8px;
}
.sp-hero-chat .mk-chat-log::-webkit-scrollbar { display: none; }
.sp-hero-chat .sp-msg { max-width: 88%; }
.sp-hero-chat .sp-bubble { font-size: 12.5px; }
/* Short viewports: reclaim the hero for the headline + CTAs. */
@media (max-height: 760px) { .sp-hero-chat { display: none; } }

/* ── Hero layout with the chat card ──────────────────────────────────────
   The centered stack (logo + 3-line H1 + sub + chat + CTAs) outgrew 100vh
   once the chat card landed. Wide screens go two-column: copy left, the
   "What can I show you today?" card right. Narrower screens keep the
   original centered stack and skip the card (the ai-se section right below
   tells the same story). */
@media (min-width: 1080px) {
  .ld-hero .sp-center {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    grid-auto-rows: min-content;
    column-gap: 56px;
    align-content: center;
    align-items: start;
    justify-items: start;
    text-align: left;
    /* The base .sp-center caps at 820px for the centered stack; the grid needs
       the full width or the copy column collapses to ~300px and the H1 wraps
       into the chat card. */
    width: 100%;
    max-width: var(--mk-content-max);
    padding-left: 28px;
    padding-right: 28px;
    box-sizing: border-box;
    margin: 0 auto;
  }
  .ld-hero .sp-logo-vid { grid-column: 1; width: clamp(160px, 14.5vw, 220px); margin-bottom: 6px; }
  .ld-hero .sp-eyebrow,
  .ld-hero .sp-h1,
  .ld-hero .sp-sub,
  .ld-hero .sp-btns,
  .ld-hero .sp-hint { grid-column: 1; }
  .ld-hero .sp-h1 { font-size: clamp(36px, 3.8vw, 56px); }
  .ld-hero .sp-eyebrow { white-space: nowrap; }
  .ld-hero .sp-btns { justify-content: flex-start; justify-self: stretch; width: 100%; flex-wrap: nowrap; }
  .ld-hero .sp-btns > * { flex: none; }
  .ld-hero .sp-hero-chat {
    grid-column: 2;
    grid-row: 1 / span 6;
    align-self: center;
    margin: 0;
    width: 100%;
  }
  /* Tall enough for the whole 4-message script (318px in Chromium at the
     fixed 400px column) so the log never has to scroll — see reveal() in
     homepage.js for why a scrolling log jitters at the last message. */
  .ld-hero .sp-hero-chat .mk-chat-log { height: 340px; }
}
@media (max-width: 1079.98px) { .sp-hero-chat { display: none; } }

/* Dark-variant bubble colors — outweigh marketing.css's light .mk-chat-card
   content styles (same specificity, later stylesheet). */
.sp-hero-chat .sp-msg-bot .sp-bubble {
  background: rgba(255, 255, 255, 0.08);
  color: #ece9f7;
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.sp-hero-chat .sp-msg-user .sp-bubble {
  background: linear-gradient(135deg, #7B3EC1, #5446BD);
  color: #fff;
}
.sp-hero-chat .sp-tour {
  color: #C7F255;
  border-color: rgba(199, 242, 85, 0.45);
}
.sp-hero-chat .sp-typing i { background: rgba(236, 233, 247, 0.55); }
