/* ============================================================================
   home.css — the landing page (/), section by section.

   Source of truth: apps/editor/src/pages/LandingPage.tsx. Every rule below is
   the resolved value of the Tailwind class list quoted above it, in the order
   the sections appear on the page. Inline `style={{…}}` values are reproduced
   as-is. Nothing was redesigned, rounded, or consolidated where consolidating
   would have changed a pixel.
   ========================================================================= */

/* ═══ Hero ═════════════════════════════════════════════════════════════════ */

/* "relative min-h-screen flex flex-col justify-center pt-24 overflow-hidden"
   + background var(--mk-bg) */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 6rem;
  overflow: hidden;
  background: var(--mk-bg);
}

/* Cursor x-ray — reveals the blueprint behind the background. The inner
   wrapper carries a second, static mask that fades the pattern out around the
   headline/CTA cluster (nested masks multiply), so the effect never competes
   with the content for attention. The layer is created by home.js on the
   first mouse move: it is invisible until then and unreachable on touch. */
.hero__xray-mask {
  position: absolute;
  inset: 0;
  -webkit-mask-image: radial-gradient(ellipse 640px 400px at 50% 34%, transparent 42%, #000 95%);
  mask-image: radial-gradient(ellipse 640px 400px at 50% 34%, transparent 42%, #000 95%);
}
.hero__xray-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(79, 70, 229, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 70, 229, 0.14) 1px, transparent 1px);
  background-size: 24px 24px;
}
.mk-dark .hero__xray-grid {
  background-image:
    linear-gradient(rgba(24, 99, 211, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24, 99, 211, 0.2) 1px, transparent 1px);
}
.hero__xray-tile {
  position: absolute;
  inset: 0;
  /* Tile is drawn at 920x640; rendering at ~72% keeps the whole schematic
     smaller while the beefed-up strokes stay bold. */
  background-size: 660px 460px;
}

/* "relative w-full max-w-7xl mx-auto px-6 py-20 flex flex-col items-center
    text-center" — w-full is load-bearing: this is a flex item with auto
    margins, and auto margins stop flex stretching, so without an explicit
    width the column would shrink-wrap to the headline's text length and the
    product mock's width would follow it. */
.hero__inner {
  position: relative;
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding: 5rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* "text-6xl md:text-7xl lg:text-8xl font-black tracking-tight mb-7 max-w-5xl"
   + lineHeight 1.02, letterSpacing -0.04em */
.hero__title {
  font-size: 3.75rem;
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -0.04em;
  margin-bottom: 1.75rem;
  max-width: 64rem;
}
@media (min-width: 768px) { .hero__title { font-size: 4.5rem; } }
@media (min-width: 1024px) { .hero__title { font-size: 6rem; } }

/* "text-lg md:text-xl text-[#000000] dark:text-slate-400 max-w-2xl mb-10
    leading-relaxed"

   The line-height is NOT 1.625 at every width. Tailwind emits responsive
   variants after the base utilities, so at >=768px `md:text-xl` re-sets
   line-height to its own 1.75rem and wins over `leading-relaxed`; below that
   `leading-relaxed` wins over `text-lg`. Reproduced exactly — reading this as
   "leading-relaxed everywhere" made the paragraph 13px taller and pushed the
   whole page down. */
.hero__lede {
  font-size: 1.125rem;
  line-height: 1.625;
  color: #000;
  max-width: 42rem;
  margin-bottom: 2.5rem;
}
.mk-dark .hero__lede { color: #94a3b8; }
@media (min-width: 768px) { .hero__lede { font-size: 1.25rem; line-height: 1.75rem; } }

/* "flex flex-col sm:flex-row items-center gap-4 mb-24" */
.hero__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 6rem;
}
@media (min-width: 640px) { .hero__cta { flex-direction: row; } }

/* Product preview — explicit cap; "w-full max-w-4xl relative". */
.hero__preview {
  width: 100%;
  max-width: 56rem;
  position: relative;
}

/* "flex items-center gap-2 mb-5 justify-center" */
.hero__themebar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  justify-content: center;
}
/* "text-xs text-slate-500 mr-2" */
.hero__themebar-label {
  font-size: 0.75rem;
  line-height: 1rem;
  color: #64748b;
  margin-right: 0.5rem;
}
/* "px-3.5 py-1.5 rounded-full text-xs font-medium transition-all capitalize
    border" + inactive "text-slate-500 hover:text-slate-700
    dark:hover:text-slate-300 border-transparent" */
.hero__themebtn {
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  text-transform: capitalize;
  border: 1px solid transparent;
  color: #64748b;
  background: transparent;
  font-family: inherit;
}
.hero__themebtn:hover { color: #334155; }
.mk-dark .hero__themebtn:hover { color: #cbd5e1; }
/* active: "bg-white dark:bg-white/10 text-slate-900 dark:text-white
    border-slate-300 dark:border-white/20 shadow-sm" */
.hero__themebtn.is-active {
  background: #fff;
  color: #0f172a;
  border-color: #cbd5e1;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.mk-dark .hero__themebtn.is-active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

/* "mk-conic-subtle rounded-2xl p-px relative" */
.hero__frame {
  border-radius: 1rem;
  padding: 1px;
  position: relative;
}

/* Floating badges: "mk-float absolute -top-5 -right-4 md:-right-8 z-10 hidden
    sm:flex items-center gap-2 px-3.5 py-2 rounded-xl border border-slate-200
    dark:border-white/10 text-xs font-semibold text-slate-800 dark:text-white"
   + glass background, blur and shadow. */
.hero__badge {
  position: absolute;
  z-index: 10;
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: 0.75rem;
  border: 1px solid #e2e8f0;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  color: #1e293b;
  background: var(--mk-glass-card);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
  white-space: nowrap;
}
.mk-dark .hero__badge { border-color: rgba(255, 255, 255, 0.1); color: #fff; }
@media (min-width: 640px) { .hero__badge { display: flex; } }
.hero__badge--tr { top: -1.25rem; right: -1rem; }
.hero__badge--bl { bottom: -1.25rem; left: -1rem; animation-delay: 1.2s; }
@media (min-width: 768px) {
  .hero__badge--tr { right: -2rem; }
  .hero__badge--bl { left: -2rem; }
}
/* "text-emerald-600 dark:text-emerald-400" / "text-indigo-600 dark:text-indigo-400" */
.hero__badge-ok { color: #059669; display: flex; }
.mk-dark .hero__badge-ok { color: #34d399; }
.hero__badge-box { color: #4f46e5; display: flex; }
.mk-dark .hero__badge-box { color: #818cf8; }

/* The mock is a "screenshot" of the (dark) editor — it stays dark on the
   light page deliberately, like an app screenshot.
   "rounded-2xl overflow-hidden" + background #0d1117 and the lifted shadow. */
.hero__shot {
  border-radius: 1rem;
  overflow: hidden;
  background: #0d1117;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.28), 0 0 60px rgba(99, 102, 241, 0.1);
}
/* "flex items-center gap-3 px-4 h-10 border-b border-white/5" + bg #111827 */
.hero__shot-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  height: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: #111827;
}
/* "flex gap-1.5" + "w-3 h-3 rounded-full bg-{red,yellow,green}-500/70" */
.hero__shot-dots { display: flex; gap: 0.375rem; }
.hero__shot-dots i {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
  display: block;
}
.hero__shot-dots i:nth-child(1) { background: rgba(239, 68, 68, 0.7); }
.hero__shot-dots i:nth-child(2) { background: rgba(234, 179, 8, 0.7); }
.hero__shot-dots i:nth-child(3) { background: rgba(34, 197, 94, 0.7); }
/* "flex-1 max-w-xs mx-auto h-6 rounded-md flex items-center gap-2 px-3" */
.hero__shot-url {
  flex: 1 1 0%;
  max-width: 20rem;
  margin-left: auto;
  margin-right: auto;
  height: 1.5rem;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  background: #1c2333;
}
/* "text-xs text-slate-500 truncate" */
.hero__shot-url span {
  font-size: 0.75rem;
  line-height: 1rem;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "flex" + height 480px */
.hero__shot-body { display: flex; height: 480px; }

/* Sections rail: "w-52 border-r border-white/5 flex-col hidden md:flex" */
.hero__rail {
  display: none;
  width: 13rem;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  flex-direction: column;
  background: #0a0f1a;
}
@media (min-width: 768px) { .hero__rail { display: flex; } }
/* "px-3 py-2 border-b border-white/5" */
.hero__rail-head {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
/* "text-[9px] text-slate-500 uppercase tracking-widest font-semibold" */
.hero__rail-title,
.hero__panel-title {
  font-size: 9px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}
/* "flex items-center gap-2 px-3 py-2 text-xs transition-colors text-slate-500
    hover:text-slate-300" */
.hero__rail-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: #64748b;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hero__rail-row:hover { color: #cbd5e1; }
/* the selected row: "bg-blue-600/20 text-blue-400" */
.hero__rail-row.is-editing {
  background: rgba(37, 99, 235, 0.2);
  color: #60a5fa;
}
.hero__rail-row.is-editing:hover { color: #60a5fa; }
/* "text-[10px] opacity-50" */
.hero__rail-grip { font-size: 10px; opacity: 0.5; }
/* "capitalize" */
.hero__rail-name { text-transform: capitalize; }
/* "ml-auto text-[9px] bg-blue-500/20 text-blue-400 px-1.5 py-0.5 rounded" */
.hero__rail-tag {
  margin-left: auto;
  font-size: 9px;
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
}

/* Preview column: "flex-1 overflow-hidden relative" + bg #161b27 */
.hero__stage {
  flex: 1 1 0%;
  overflow: hidden;
  position: relative;
  background: #161b27;
}
/* "absolute inset-4 rounded-lg overflow-hidden border border-white/5" */
.hero__stage-inner {
  position: absolute;
  inset: 1rem;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ── The mocked portfolio, restyled by the theme switcher ──────────────────
   React recomputed every inline style from a `tc` object. Here the same three
   palettes are custom properties on .hero__mock and the switcher swaps one
   attribute, which is what keeps the 0.4s background transition working.
   The -p-XX variables are the hex-with-alpha strings the original built by
   string concatenation (`${tc.primary}2b`), which CSS cannot do. */
.hero__mock {
  --tc-bg: #ffffff;
  --tc-surface: #f7f8fa;
  --tc-text: #0f172a;
  --tc-primary: #2563eb;
  --tc-border: var(--mk-divider);
  --tc-p-2b: #2563eb2b;
  --tc-p-1f: #2563eb1f;
  --tc-p-0a: #2563eb0a;
  --tc-p-08: #2563eb08;

  background: var(--tc-bg);
  height: 100%;
  padding: 16px;
  font-family: Inter, sans-serif;
  overflow: hidden;
  transition: background 0.4s;
}
.hero__mock[data-theme="dark"] {
  --tc-bg: #0b0f19;
  --tc-surface: #111827;
  --tc-text: #e5e7eb;
  --tc-primary: #38bdf8;
  --tc-border: #1f2937;
  --tc-p-2b: #38bdf82b;
  --tc-p-1f: #38bdf81f;
  --tc-p-0a: #38bdf80a;
  --tc-p-08: #38bdf808;
}
.hero__mock[data-theme="bold"] {
  --tc-bg: #ffffff;
  --tc-surface: #f5f3ff;
  --tc-text: #18181b;
  --tc-primary: #7c3aed;
  --tc-border: #e4e4e7;
  --tc-p-2b: #7c3aed2b;
  --tc-p-1f: #7c3aed1f;
  --tc-p-0a: #7c3aed0a;
  --tc-p-08: #7c3aed08;
}

.hero__mock-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--tc-border);
  padding-bottom: 8px;
  margin-bottom: 12px;
}
.hero__mock-brand { font-weight: 800; font-size: 12px; color: var(--tc-text); }
.hero__mock-navlinks { display: flex; gap: 8px; }
.hero__mock-navlink { font-size: 9px; color: var(--tc-text); opacity: 0.6; }
.hero__mock-navcta { font-size: 9px; background: var(--tc-primary); color: #fff; border-radius: 4px; padding: 2px 6px; }

.hero__mock-hero { margin-bottom: 10px; }
.hero__mock-eyebrow { font-size: 8px; color: var(--tc-primary); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 3px; }
.hero__mock-name { font-size: 17px; font-weight: 800; color: var(--tc-text); line-height: 1.1; margin-bottom: 3px; }
.hero__mock-tagline { font-size: 10px; color: var(--tc-primary); font-weight: 600; margin-bottom: 4px; }
.hero__mock-actions { display: flex; gap: 6px; margin-top: 6px; }
.hero__mock-btn { font-size: 8px; background: var(--tc-primary); color: #fff; border-radius: 4px; padding: 3px 8px; }
.hero__mock-btn--ghost { font-size: 8px; background: none; border: 1px solid var(--tc-border); color: var(--tc-text); border-radius: 4px; padding: 3px 8px; opacity: 0.7; }

/* The section selected in the rail, shown mid-edit. */
.hero__mock-about {
  position: relative;
  border: 1.5px solid var(--tc-primary);
  background: var(--tc-surface);
  border-radius: 6px;
  padding: 7px 9px;
  margin-bottom: 10px;
}
.hero__mock-editing {
  position: absolute;
  top: -6px;
  right: 8px;
  font-size: 6.5px;
  font-weight: 700;
  background: var(--tc-primary);
  color: #fff;
  border-radius: 3px;
  padding: 1px 5px;
  letter-spacing: 0.06em;
}
.hero__mock-h3 { font-size: 9px; font-weight: 800; color: var(--tc-text); margin-bottom: 3px; }
.hero__mock-body { font-size: 7.5px; color: var(--tc-text); opacity: 0.55; line-height: 1.55; }

.hero__mock-heading { font-size: 9px; font-weight: 800; color: var(--tc-text); margin-bottom: 5px; }
.hero__mock-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.hero__mock-card { background: var(--tc-surface); border-radius: 6px; overflow: hidden; border: 1px solid var(--tc-border); }
.hero__mock-thumb { height: 42px; padding: 5px 7px; }
.hero__mock-thumb--kanban { background: linear-gradient(135deg, var(--tc-p-2b), var(--tc-p-0a)); }
.hero__mock-thumb--search {
  background: linear-gradient(135deg, var(--tc-p-1f), var(--tc-p-08));
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hero__mock-kanban { display: flex; gap: 4px; height: 100%; }
.hero__mock-kanban-col { flex: 1 1 0%; display: flex; flex-direction: column; gap: 2px; }
.hero__mock-kanban-title { height: 3px; width: 60%; border-radius: 2px; background: var(--tc-primary); opacity: 0.55; }
.hero__mock-kanban-item { height: 6px; border-radius: 2px; background: var(--tc-bg); border: 1px solid var(--tc-border); }
.hero__mock-searchbar { height: 7px; border-radius: 3px; background: var(--tc-bg); border: 1px solid var(--tc-border); width: 80%; }
.hero__mock-searchrow { display: flex; gap: 3px; align-items: center; }
.hero__mock-searchdot { width: 8px; height: 8px; border-radius: 50%; background: var(--tc-primary); opacity: 0.35; }
.hero__mock-searchline { height: 3px; border-radius: 2px; background: var(--tc-text); opacity: 0.25; }
.hero__mock-cardbody { padding: 6px 8px; }
.hero__mock-cardtitle { font-size: 8px; font-weight: 700; color: var(--tc-text); }
.hero__mock-carddesc { font-size: 7px; color: var(--tc-text); opacity: 0.5; margin-top: 1.5px; line-height: 1.4; }
.hero__mock-cardstack { font-size: 6.5px; color: var(--tc-primary); margin-top: 3px; font-weight: 600; }

.hero__mock-skills { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.hero__mock-skill {
  font-size: 7px;
  color: var(--tc-text);
  opacity: 0.75;
  border: 1px solid var(--tc-border);
  background: var(--tc-surface);
  border-radius: 999px;
  padding: 2px 7px;
}

.hero__mock-exp { border-left: 2px solid var(--tc-primary); padding-left: 8px; margin-bottom: 12px; }
.hero__mock-exp-role { font-size: 8px; font-weight: 700; color: var(--tc-text); }
.hero__mock-exp-note { font-size: 7px; color: var(--tc-text); opacity: 0.5; margin-top: 1px; }

.hero__mock-footer {
  border-top: 1px solid var(--tc-border);
  padding-top: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hero__mock-footer span { font-size: 6.5px; color: var(--tc-text); }
.hero__mock-footer span:first-child { opacity: 0.4; }
.hero__mock-footer span:last-child { opacity: 0.5; }

/* Inspector: "w-56 border-l border-white/5 flex-col hidden lg:flex" */
.hero__panel {
  display: none;
  width: 14rem;
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  flex-direction: column;
  background: #0a0f1a;
}
@media (min-width: 1024px) { .hero__panel { display: flex; } }
/* "flex border-b border-white/5" */
.hero__panel-tabs { display: flex; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
/* "flex-1 text-[10px] py-2 font-semibold text-slate-500" / active adds
    "text-white border-b-2 border-blue-500" */
.hero__panel-tab {
  flex: 1 1 0%;
  font-size: 10px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-weight: 600;
  color: #64748b;
  background: none;
  font-family: inherit;
}
.hero__panel-tab.is-active { color: #fff; border-bottom: 2px solid #3b82f6; }
/* "p-3 flex flex-col gap-3" */
.hero__panel-body { padding: 0.75rem; display: flex; flex-direction: column; gap: 0.75rem; }
/* "text-[9px] text-slate-500 uppercase mb-1" */
.hero__panel-label { font-size: 9px; color: #64748b; text-transform: uppercase; margin-bottom: 0.25rem; }
/* "bg-slate-800/60 rounded px-2 py-1.5 border border-white/5" */
.hero__panel-field {
  background: rgba(30, 41, 59, 0.6);
  border-radius: 0.25rem;
  padding: 0.375rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
/* "text-[10px] text-slate-300 truncate" */
.hero__panel-value {
  font-size: 10px;
  color: #cbd5e1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* "border-t border-white/5 pt-3" */
.hero__panel-theme { border-top: 1px solid rgba(255, 255, 255, 0.05); padding-top: 0.75rem; }
.hero__panel-theme .hero__panel-label { margin-bottom: 0.5rem; }
/* "flex gap-1.5" + "w-7 h-7 rounded-full border border-white/10 flex
    items-center justify-center text-[8px]" */
.hero__panel-swatches { display: flex; gap: 0.375rem; }
.hero__panel-swatch {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
}

/* Stats: "mt-20 w-full" wrapper, then "max-w-3xl mx-auto grid grid-cols-2
    md:grid-cols-4 gap-px rounded-2xl overflow-hidden border border-slate-200
    dark:border-white/8" + background var(--mk-divider) as the hairline. */
.hero__stats-wrap { margin-top: 5rem; width: 100%; }
.hero__stats {
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: var(--mk-divider);
  box-shadow: var(--mk-shadow-card);
}
/* NO dark override, deliberately. The original writes
   `dark:border-white/8`, but 8 is not on Tailwind's opacity scale, so no rule
   is generated and the slate-200 border stays put in dark mode. Reproducing
   the rendered result, not the apparent intent — see migration/PROJECT.md. */
@media (min-width: 768px) { .hero__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* "py-6 px-4" + background var(--mk-tile) */
.hero__stat { padding: 1.5rem 1rem; background: var(--mk-tile); }
/* "text-3xl font-black text-slate-900 dark:text-white" */
.hero__stat-value {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 900;
  color: #0f172a;
  display: block;
}
.mk-dark .hero__stat-value { color: #fff; }
/* "text-xs text-slate-500 mt-1.5" */
.hero__stat-label { font-size: 0.75rem; line-height: 1rem; color: #64748b; margin-top: 0.375rem; }

/* ═══ Host marquee ═════════════════════════════════════════════════════════ */

/* "py-14 border-y border-slate-200 dark:border-white/5" + bg var(--mk-bg-alt) */
.hosts {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  background: var(--mk-bg-alt);
}
.mk-dark .hosts { border-top-color: rgba(255, 255, 255, 0.05); border-bottom-color: rgba(255, 255, 255, 0.05); }
/* "text-center text-xs text-slate-500 uppercase tracking-[0.2em] font-semibold mb-8" */
.hosts__title {
  text-align: center;
  font-size: 0.75rem;
  line-height: 1rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
  margin-bottom: 2rem;
}
/* "flex items-center gap-3 px-10 text-lg font-bold text-slate-500
    dark:text-slate-600 whitespace-nowrap hover:text-[#000000]
    dark:hover:text-slate-400 transition-colors" */
.hosts__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  color: #64748b;
  white-space: nowrap;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mk-dark .hosts__item { color: #475569; }
.hosts__item:hover { color: #000; }
.mk-dark .hosts__item:hover { color: #94a3b8; }
/* "w-1.5 h-1.5 rounded-full bg-indigo-500/50" */
.hosts__dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: rgba(99, 102, 241, 0.5);
}

/* ═══ Shared section scaffolding ═══════════════════════════════════════════ */

/* "py-32" + a top hairline on every section after the marquee. */
.section { padding-top: 8rem; padding-bottom: 8rem; }
.section--bg { background: var(--mk-bg); }
.section--alt { background: var(--mk-bg-alt); }
.section--rule { border-top: 1px solid #e2e8f0; }
.mk-dark .section--rule { border-top-color: rgba(255, 255, 255, 0.05); }
.section--relative { position: relative; }
.section--clip { overflow: hidden; }

.wrap-7xl { max-width: 80rem; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.wrap-6xl { max-width: 72rem; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.wrap-3xl { max-width: 48rem; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }

/* Section headings. "font-black … tracking-tight" + letterSpacing -0.03em;
   the size step differs per section, so each carries its own rule. */
.section__head { text-align: center; }
.section__title {
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.03em;
  margin-bottom: 1.25rem;
}
.mk-dark .section__title { color: #fff; }
/* "text-5xl md:text-6xl" — Features */
.section__title--5-6 { font-size: 3rem; line-height: 1; }
@media (min-width: 768px) { .section__title--5-6 { font-size: 3.75rem; } }
/* "text-5xl" — How it works, Testimonials, FAQ */
.section__title--5 { font-size: 3rem; line-height: 1; }
/* "text-4xl md:text-5xl … mb-6" — The export */
.section__title--4-5 { font-size: 2.25rem; line-height: 2.5rem; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .section__title--4-5 { font-size: 3rem; line-height: 1; } }

/* ═══ Features (bento grid) ════════════════════════════════════════════════ */

.features__head { margin-bottom: 4rem; }
/* "text-lg text-[#000000] dark:text-slate-400 max-w-xl mx-auto" */
.features__sub {
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: #000;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}
.mk-dark .features__sub { color: #94a3b8; }

/* "grid grid-cols-1 md:grid-cols-6 gap-4" */
.bento {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 768px) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bento__cell--4 { grid-column: span 4 / span 4; }
  .bento__cell--2 { grid-column: span 2 / span 2; }
}

/* FeatureCardShell: GlowCard + "rounded-2xl border border-slate-200
    dark:border-white/6 hover:border-indigo-300 dark:hover:border-indigo-500/30
    transition-colors duration-300 overflow-hidden" + card gradient and shadow */
.card {
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  transition: color 300ms cubic-bezier(0.4, 0, 0.2, 1),
              background-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  background: var(--mk-card-grad);
  box-shadow: var(--mk-shadow-card);
  height: 100%;
}
.card:hover { border-color: #a5b4fc; }
/* `dark:border-white/6` generates nothing (6 is off Tailwind's opacity scale),
   so the resting border stays slate-200 in dark mode too. The dark hover
   colour IS generated, and does apply. */
.mk-dark .card:hover { border-color: rgba(99, 102, 241, 0.3); }
.card--p8 { padding: 2rem; }
.card--p7 { padding: 1.75rem; }
/* the large card: "flex flex-col md:flex-row gap-8 items-center" */
.card--split { display: flex; flex-direction: column; gap: 2rem; align-items: center; }
@media (min-width: 768px) { .card--split { flex-direction: row; } }
/* the tall card: "flex flex-col" */
.card--stack { display: flex; flex-direction: column; }
.card__col { flex: 1 1 0%; }
/* "flex-1 w-full max-w-xs" */
.card__col--capped { flex: 1 1 0%; width: 100%; max-width: 20rem; }

/* FeatureIcon: "w-10 h-10 rounded-xl flex items-center justify-center
    text-indigo-600 dark:text-indigo-400 mb-4 border border-indigo-200
    dark:border-indigo-400/20" + background rgba(99,102,241,0.08) */
.feature-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4f46e5;
  margin-bottom: 1rem;
  border: 1px solid #c7d2fe;
  background: rgba(99, 102, 241, 0.08);
}
.mk-dark .feature-icon { color: #818cf8; border-color: rgba(129, 140, 248, 0.2); }

/* "font-bold text-slate-900 dark:text-white text-xl mb-3" */
.card__title-xl { font-weight: 700; color: #0f172a; font-size: 1.25rem; line-height: 1.75rem; margin-bottom: 0.75rem; }
.mk-dark .card__title-xl { color: #fff; }
/* "font-bold text-slate-900 dark:text-white text-base mb-2" */
.card__title-base { font-weight: 700; color: #0f172a; font-size: 1rem; line-height: 1.5rem; margin-bottom: 0.5rem; }
.mk-dark .card__title-base { color: #fff; }
/* "text-sm text-[#444444] dark:text-slate-400 leading-relaxed mb-3" / "mb-5" */
.card__text { font-size: 0.875rem; color: #444; line-height: 1.625; }
.mk-dark .card__text { color: #94a3b8; }
.card__text--mb3 { margin-bottom: 0.75rem; }
.card__text--mb5 { margin-bottom: 1.25rem; }
/* "text-sm font-semibold text-indigo-600 dark:text-indigo-400" */
.card__kicker { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: #4f46e5; }
.mk-dark .card__kicker { color: #818cf8; }
/* "text-[13px] text-[#444444] dark:text-slate-500 leading-relaxed" */
.card__desc { font-size: 13px; color: #444; line-height: 1.625; }
.mk-dark .card__desc { color: #64748b; }

/* Token visual: "rounded-xl border border-white/8 p-4 flex flex-col gap-4"
    + background #090e1a */
.tokens {
  border-radius: 0.75rem;
  /* `border-white/8` generates no rule, so this border renders in Tailwind
     preflight's default #e5e7eb — a pale hairline on the near-black panel.
     That is what the live page shows; it is not a mistake in the port. */
  border: 1px solid #e5e7eb;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: #090e1a;
}
/* "flex items-center justify-between mb-1.5" */
.tokens__row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.375rem; }
/* "text-[10px] text-slate-500 uppercase tracking-wider font-semibold" */
.tokens__label { font-size: 10px; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
/* "w-3.5 h-3.5 rounded-full border border-white/20" */
.tokens__chip { width: 0.875rem; height: 0.875rem; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.2); }
/* "h-1.5 rounded-full bg-white/6 overflow-hidden" — `bg-white/6` generates no
   rule, so the track is transparent and only the filled portion is visible. */
.tokens__bar { height: 0.375rem; border-radius: 9999px; overflow: hidden; }
.tokens__fill { height: 100%; border-radius: 9999px; }
/* "flex gap-2 pt-1" + "flex-1 rounded-lg border border-white/8 py-2 text-center
    font-bold" with per-index font-size and colour */
.tokens__aa { display: flex; gap: 0.5rem; padding-top: 0.25rem; }
.tokens__aa > div {
  flex: 1 1 0%;
  border-radius: 0.5rem;
  /* `border-white/8` again — preflight's #e5e7eb is what renders. */
  border: 1px solid #e5e7eb;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.02);
}
.tokens__aa > div:nth-child(1) { font-size: 11px; color: #94a3b8; }
.tokens__aa > div:nth-child(2) { font-size: 14px; color: #e2e8f0; }
.tokens__aa > div:nth-child(3) { font-size: 17px; color: #fff; }

/* Zip listing: "mt-auto rounded-xl border border-white/8 p-3.5 font-mono
    text-[11px] leading-relaxed" + background #090e1a */
.ziplist {
  margin-top: auto;
  border-radius: 0.75rem;
  /* `border-white/8` again — preflight's #e5e7eb is what renders. */
  border: 1px solid #e5e7eb;
  padding: 0.875rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
  line-height: 1.625;
  background: #090e1a;
}
.ziplist__root { color: #cbd5e1; }
.ziplist__item { color: #64748b; }
/* "text-emerald-400 mt-2" */
.ziplist__ok { color: #34d399; margin-top: 0.5rem; }

/* ═══ The export ═══════════════════════════════════════════════════════════ */

/* "max-w-6xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center" */
.export__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 4rem;
  align-items: center;
}
@media (min-width: 1024px) { .export__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* "text-[#000000] dark:text-slate-400 leading-relaxed mb-8" */
.export__lede { color: #000; line-height: 1.625; margin-bottom: 2rem; }
.mk-dark .export__lede { color: #94a3b8; }
/* "flex flex-col gap-4" */
.export__list { display: flex; flex-direction: column; gap: 1rem; }
/* "flex items-start gap-3 text-sm text-slate-700 dark:text-slate-300" */
.export__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #334155;
}
.mk-dark .export__item { color: #cbd5e1; }
/* "text-emerald-600 dark:text-emerald-400 mt-0.5 flex-shrink-0" */
.export__tick { color: #059669; margin-top: 0.125rem; flex-shrink: 0; }
.mk-dark .export__tick { color: #34d399; }

/* Code window: "mk-conic-subtle rounded-2xl p-px" → "rounded-2xl
    overflow-hidden" + background #090e1a */
.codewin__frame { border-radius: 1rem; padding: 1px; }
.codewin { border-radius: 1rem; overflow: hidden; background: #090e1a; }
/* "flex items-center gap-2 px-4 h-10 border-b border-white/5" */
.codewin__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  height: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
/* "flex gap-1.5" + "w-2.5 h-2.5 rounded-full bg-{…}-500/60" */
.codewin__dots { display: flex; gap: 0.375rem; }
.codewin__dots i { width: 0.625rem; height: 0.625rem; border-radius: 9999px; display: block; }
.codewin__dots i:nth-child(1) { background: rgba(239, 68, 68, 0.6); }
.codewin__dots i:nth-child(2) { background: rgba(234, 179, 8, 0.6); }
.codewin__dots i:nth-child(3) { background: rgba(34, 197, 94, 0.6); }
/* "text-xs text-slate-500 font-mono ml-2" */
.codewin__file {
  font-size: 0.75rem;
  line-height: 1rem;
  color: #64748b;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  margin-left: 0.5rem;
}
/* "p-5 font-mono text-[12.5px] leading-[1.8] overflow-x-auto" */
.codewin__code {
  padding: 1.25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12.5px;
  line-height: 1.8;
  overflow-x: auto;
}
/* CodeLine: "whitespace-pre". Scoped to the code lines themselves, NOT to
   every <p> in the window — the summary line below is ordinary wrapped text,
   and inheriting `pre` there turned its source newlines into blank lines. */
.codewin__line { white-space: pre; }
/* "mt-3 pt-3 border-t border-white/5" + colour T.dim */
.codewin__foot {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  color: #444444;
}
.codewin__foot .ok { color: #34d399; }

/* ═══ How it works ═════════════════════════════════════════════════════════ */

.steps__head { margin-bottom: 5rem; }
/* "text-[#000000] dark:text-slate-400 text-lg max-w-xl mx-auto" */
.steps__sub {
  color: #000;
  font-size: 1.125rem;
  line-height: 1.75rem;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}
.mk-dark .steps__sub { color: #94a3b8; }
/* "relative grid grid-cols-1 md:grid-cols-4 gap-4" */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 768px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Connector line: "hidden md:block absolute top-12 left-[12%] right-[12%] h-px
    bg-gradient-to-r from-indigo-500/10 via-indigo-500/50 to-indigo-500/10" */
.steps__line { display: none; }
@media (min-width: 768px) {
  .steps__line {
    display: block;
    position: absolute;
    top: 3rem;
    left: 12%;
    right: 12%;
    height: 1px;
    background-image: linear-gradient(to right, rgba(99, 102, 241, 0.1), rgba(99, 102, 241, 0.5), rgba(99, 102, 241, 0.1));
  }
}
/* Step card: GlowCard + "relative rounded-2xl border … transition-colors p-7
    h-full" — same card treatment as the bento cards, without the 300ms
    override and with position:relative. */
.step { position: relative; padding: 1.75rem; }
/* "w-12 h-12 rounded-xl flex items-center justify-center text-white mb-5
    relative z-10" + gradient and glow */
.step__icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 10;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
}
/* "text-[11px] font-bold text-indigo-600 dark:text-indigo-400
    tracking-[0.2em] mb-2" */
.step__n { font-size: 11px; font-weight: 700; color: #4f46e5; letter-spacing: 0.2em; margin-bottom: 0.5rem; }
.mk-dark .step__n { color: #818cf8; }
/* "text-lg font-bold text-slate-900 dark:text-white mb-2" */
.step__title { font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; color: #0f172a; margin-bottom: 0.5rem; }
.mk-dark .step__title { color: #fff; }
/* "text-[#000000] dark:text-slate-500 text-[13px] leading-relaxed" */
.step__desc { color: #000; font-size: 13px; line-height: 1.625; }
.mk-dark .step__desc { color: #64748b; }

/* ═══ Testimonials ═════════════════════════════════════════════════════════ */

.quotes__head { margin-bottom: 3.5rem; }
/* "text-[#000000] dark:text-slate-400 text-base max-w-lg mx-auto" */
.quotes__sub {
  color: #000;
  font-size: 1rem;
  line-height: 1.5rem;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
}
.mk-dark .quotes__sub { color: #94a3b8; }
/* "flex flex-col gap-5" */
.quotes__rows { display: flex; flex-direction: column; gap: 1.25rem; }
/* "py-1" on each marquee track */
.quotes__track { padding-top: 0.25rem; padding-bottom: 0.25rem; }
/* "w-[380px] flex-shrink-0 mx-2.5 p-6 rounded-2xl border border-slate-200
    dark:border-white/6" + tile background and card shadow */
.quote {
  width: 380px;
  flex-shrink: 0;
  margin-left: 0.625rem;
  margin-right: 0.625rem;
  padding: 1.5rem;
  border-radius: 1rem;
  border: 1px solid #e2e8f0;
  background: var(--mk-tile);
  box-shadow: var(--mk-shadow-card);
}
/* `dark:border-white/6` generates nothing — slate-200 stays in dark mode. */
/* "flex gap-1 mb-4" */
.quote__stars { display: flex; gap: 0.25rem; margin-bottom: 1rem; }
/* "text-sm text-slate-700 dark:text-slate-300 leading-relaxed mb-5" */
.quote__text { font-size: 0.875rem; color: #334155; line-height: 1.625; margin-bottom: 1.25rem; }
.mk-dark .quote__text { color: #cbd5e1; }
/* "flex items-center gap-3" */
.quote__by { display: flex; align-items: center; gap: 0.75rem; }
/* "w-8 h-8 rounded-full flex items-center justify-center text-[11px]
    font-bold text-white flex-shrink-0" + gradient */
.quote__avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  background: linear-gradient(135deg, #6366f1, #a855f7);
}
/* "text-xs font-semibold text-slate-800 dark:text-slate-200" */
.quote__author { font-size: 0.75rem; line-height: 1rem; font-weight: 600; color: #1e293b; }
.mk-dark .quote__author { color: #e2e8f0; }
/* "text-[11px] text-slate-500" */
.quote__role { font-size: 11px; color: #64748b; }

/* ═══ FAQ ══════════════════════════════════════════════════════════════════ */

.faq__head { margin-bottom: 4rem; }
/* "flex flex-col gap-2.5" */
.faq__list { display: flex; flex-direction: column; gap: 0.625rem; }
/* "text-center mt-10" + "text-sm text-slate-500" */
.faq__more { text-align: center; margin-top: 2.5rem; }
.faq__more p { font-size: 0.875rem; line-height: 1.25rem; color: #64748b; }
/* "text-indigo-600 dark:text-indigo-400 hover:text-indigo-700
    dark:hover:text-indigo-300 font-medium" */
.faq__link { color: #4f46e5; font-weight: 500; }
.faq__link:hover { color: #4338ca; }
.mk-dark .faq__link { color: #818cf8; }
.mk-dark .faq__link:hover { color: #a5b4fc; }

/* ═══ Final CTA ════════════════════════════════════════════════════════════ */

/* "py-32 px-6 border-t border-slate-200 dark:border-white/5" */
.cta { padding: 8rem 1.5rem; border-top: 1px solid #e2e8f0; background: var(--mk-bg-alt); }
.mk-dark .cta { border-top-color: rgba(255, 255, 255, 0.05); }
/* "max-w-5xl mx-auto" then "mk-conic-subtle rounded-3xl p-px" */
.cta__wrap { max-width: 64rem; margin-left: auto; margin-right: auto; }
.cta__frame { border-radius: 1.5rem; padding: 1px; }
/* The CTA card keeps its dark surface on the light site — a deliberate
   contrast anchor, and its glow reads best on dark.
   "relative rounded-3xl px-8 py-20 text-center overflow-hidden" */
.cta__card {
  position: relative;
  border-radius: 1.5rem;
  padding: 5rem 2rem;
  text-align: center;
  overflow: hidden;
  background: radial-gradient(120% 140% at 50% 0%, #10162e 0%, #05070f 60%);
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.25);
}
/* "absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[280px] rounded-full
    opacity-25 pointer-events-none" + radial glow and blur */
.cta__glow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 280px;
  border-radius: 9999px;
  opacity: 0.25;
  pointer-events: none;
  background: radial-gradient(ellipse at center, #6366f1, transparent 70%);
  filter: blur(50px);
}
.cta__body { position: relative; }
/* "text-5xl md:text-6xl font-black text-white tracking-tight mb-6"
    + lineHeight 1.02, letterSpacing -0.03em */
.cta__title {
  font-size: 3rem;
  line-height: 1.02;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.03em;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) { .cta__title { font-size: 3.75rem; } }
/* This panel is ALWAYS dark — no dark variants, original values.
   "text-lg text-slate-400 mb-10 max-w-xl mx-auto" */
.cta__lede {
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: #94a3b8;
  margin-bottom: 2.5rem;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}
/* "flex flex-col sm:flex-row items-center justify-center gap-4" */
.cta__buttons { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }
@media (min-width: 640px) { .cta__buttons { flex-direction: row; } }
/* "text-xs text-slate-600 mt-6" */
.cta__note { font-size: 0.75rem; line-height: 1rem; color: #475569; margin-top: 1.5rem; }