/* ============================================================================
   SERP KINETIC — PUBLIC MARKETING LAYER
   ----------------------------------------------------------------------------
   Deliberately self-contained: this file does NOT import css/main.css, because
   the old marketing stylesheet is built on a different type scale and palette
   (Outfit / Space Grotesk). The public site now shares the DASHBOARD's identity
   instead — the same --lk-* semantic tokens and the same Fraunces / Inter /
   JetBrains Mono families defined in dashboard.html — so the homepage reads as
   the front door of the product it is selling.

   Token names are copied verbatim from the dashboard's :root and
   body.light-mode blocks so anything lifted from the app keeps working here.
   ========================================================================== */

/* ---------------------------------------------------------------- TOKENS -- */
:root{
  /* dark is the hero experience and matches the dashboard exactly */
  --lk-void:#0A0B14; --lk-surface:#10112a; --lk-card:#141536; --lk-card-hover:#1a1c45;
  --lk-border:rgba(139,92,246,.12); --lk-border-hover:rgba(249,115,22,.35);
  --lk-orange:#f97316; --lk-orange-glow:rgba(249,115,22,.2); --lk-orange-hover:#ea580c; --lk-orange-soft:rgba(249,115,22,.1);
  --lk-violet:#8b5cf6; --lk-violet-glow:rgba(139,92,246,.18); --lk-violet-soft:rgba(139,92,246,.1);
  --lk-magenta:#D946EF; --lk-magenta-glow:rgba(217,70,239,.15);
  --lk-green:#0FF0A8; --lk-green-glow:rgba(15,240,168,.18);
  --lk-blue:#3b82f6;
  --lk-success:#10b981; --lk-warning:#f59e0b; --lk-danger:#ef4444;
  --lk-txt:#F1F0FB; --lk-txt2:#94a3b8; --lk-txt3:#7d8899;   /* lifted from #64748b: AA at 11-13px on --lk-card */
  --lk-shadow-sm:0 4px 14px rgba(0,0,0,.22);
  --lk-shadow-md:0 14px 34px rgba(0,0,0,.26);
  --lk-shadow-lg:0 28px 64px rgba(0,0,0,.32);
  --lk-font-display:'Fraunces',Georgia,serif;
  --lk-font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --lk-font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* marketing-only additions */
  --mk-max:1240px;
  --mk-gutter:clamp(20px,4vw,40px);
  --mk-radius:18px;
  --mk-radius-lg:26px;
  --mk-section-y:clamp(72px,9vw,132px);
  --mk-grid-line:rgba(139,92,246,.07);
  --mk-hero-glow-a:rgba(139,92,246,.24);
  --mk-hero-glow-b:rgba(249,115,22,.16);
  --mk-scrim:rgba(10,11,20,.72);
  /* chip label colours are separated from the brand accents: the brand
     orange/green are tuned for fills and fail AA as 11px text on a tint */
  --mk-chip-o:var(--lk-orange); --mk-chip-g:var(--lk-green); --mk-rank-low:#ff7b7b; --mk-violet-text:#a78bfa;
}
[data-theme="light"]{
  /* Intentionally designed, not inverted — warm off-white page, clean white
     cards, violet stays the identity colour, orange stays reserved for action. */
  --lk-void:#F7F6F2; --lk-surface:#F1EEFA; --lk-card:#FFFFFF; --lk-card-hover:#FBFAFE;
  --lk-border:rgba(30,27,60,.10); --lk-border-hover:rgba(249,115,22,.38);
  --lk-orange:#ea580c; --lk-orange-glow:rgba(249,115,22,.16); --lk-orange-hover:#c2410c; --lk-orange-soft:rgba(249,115,22,.08);
  --lk-violet:#7c3aed; --lk-violet-glow:rgba(124,58,237,.14); --lk-violet-soft:rgba(124,58,237,.07);
  --lk-magenta:#c026d3; --lk-magenta-glow:rgba(192,38,211,.12);
  --lk-green:#059669; --lk-green-glow:rgba(5,150,105,.14);
  --lk-blue:#2563eb;
  --lk-success:#059669; --lk-warning:#b45309; --lk-danger:#dc2626;
  --lk-txt:#161328; --lk-txt2:#514B6B; --lk-txt3:#6B6688;
  --lk-shadow-sm:0 2px 8px rgba(30,27,60,.06);
  --lk-shadow-md:0 10px 26px rgba(30,27,60,.08);
  --lk-shadow-lg:0 22px 48px rgba(30,27,60,.10);
  --mk-grid-line:rgba(30,27,60,.06);
  --mk-hero-glow-a:rgba(124,58,237,.13);
  --mk-hero-glow-b:rgba(249,115,22,.10);
  --mk-scrim:rgba(255,255,255,.75);
  --mk-chip-o:#b03d0a; --mk-chip-g:#036249; --mk-rank-low:#b3261e; --mk-violet-text:#5b21b6;
}

/* ------------------------------------------------------------- BASE ------ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--lk-void);color:var(--lk-txt);
  font-family:var(--lk-font-body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--lk-font-display);font-weight:700;line-height:1.1;margin:0;letter-spacing:-.02em}
p{margin:0}
:focus-visible{outline:2px solid var(--lk-orange);outline-offset:3px;border-radius:6px}
.mk-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mk-skip{position:absolute;left:-999px;top:8px;z-index:200;padding:10px 16px;border-radius:10px;
  background:var(--lk-orange);color:#fff;font-weight:700}
.mk-skip:focus{left:8px}

/* --------------------------------------------------------- PRIMITIVES ---- */
.mk-wrap{width:100%;max-width:var(--mk-max);margin:0 auto;padding:0 var(--mk-gutter)}
.mk-section{padding:var(--mk-section-y) 0;position:relative}
/* the header is sticky, so anchor targets must clear it or the section
   heading lands underneath the nav bar */
[id]{scroll-margin-top:88px}
.mk-section.alt{background:var(--lk-surface)}
.mk-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--lk-font-mono);
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--mk-violet-text);
  padding:6px 13px;border:1px solid var(--lk-border);border-radius:999px;background:var(--lk-violet-soft)}
.mk-h2{font-size:clamp(28px,4.2vw,50px);margin:18px 0 0;max-width:19ch}
.mk-lead{margin-top:16px;max-width:62ch;color:var(--lk-txt2);font-size:clamp(15px,1.5vw,17.5px);line-height:1.75}
.mk-head{max-width:760px}
.mk-head.ctr{margin-inline:auto;text-align:center}
.mk-head.ctr .mk-h2,.mk-head.ctr .mk-lead{margin-inline:auto}
.mk-grad{background:linear-gradient(105deg,var(--lk-orange),var(--lk-magenta) 55%,var(--lk-violet));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* buttons */
.mk-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:0 24px;border-radius:12px;border:1px solid transparent;cursor:pointer;
  font-weight:650;font-size:15px;letter-spacing:-.01em;transition:transform .18s,box-shadow .22s,background .22s,border-color .22s}
.mk-btn svg{width:17px;height:17px;flex:0 0 auto}
.mk-btn-primary{background:linear-gradient(120deg,var(--lk-orange),var(--lk-magenta));color:#fff;
  box-shadow:0 10px 30px var(--lk-orange-glow)}
.mk-btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px var(--lk-orange-glow)}
.mk-btn-primary:active{transform:translateY(0)}
.mk-btn-ghost{background:var(--lk-card);border-color:var(--lk-border);color:var(--lk-txt)}
.mk-btn-ghost:hover{border-color:var(--lk-border-hover);background:var(--lk-card-hover);transform:translateY(-2px)}
.mk-btn-sm{min-height:40px;padding:0 16px;font-size:13.5px;border-radius:10px}

/* card system — variants, used only where hierarchy benefits */
.mk-card{background:var(--lk-card);border:1px solid var(--lk-border);border-radius:var(--mk-radius);
  padding:26px;position:relative;overflow:hidden}
.mk-card.elevated{box-shadow:var(--lk-shadow-md)}
.mk-card.interactive{transition:border-color .22s,transform .22s,box-shadow .22s}
.mk-card.interactive:hover{border-color:var(--lk-border-hover);transform:translateY(-4px);box-shadow:var(--lk-shadow-md)}
.mk-card.spotlight{background:linear-gradient(150deg,var(--lk-violet-soft),transparent 55%),var(--lk-card);
  border-color:color-mix(in srgb,var(--lk-violet) 34%,transparent)}
.mk-card.accent-orange{border-color:color-mix(in srgb,var(--lk-orange) 34%,transparent)}
.mk-card.accent-purple{border-color:color-mix(in srgb,var(--lk-violet) 34%,transparent)}
.mk-card.accent-success{border-color:color-mix(in srgb,var(--lk-green) 34%,transparent)}
.mk-card h3{font-size:19px;margin-bottom:9px}
.mk-card p{color:var(--lk-txt2);font-size:14.5px;line-height:1.7}

/* the shared icon tile used across the dashboard */
.mk-ico{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:var(--lk-violet-soft);border:1px solid var(--lk-border);color:var(--lk-violet);margin-bottom:14px}
.mk-ico svg{width:20px;height:20px}
.mk-ico.o{background:var(--lk-orange-soft);color:var(--lk-orange)}
.mk-ico.g{background:color-mix(in srgb,var(--lk-green) 12%,transparent);color:var(--lk-green)}

/* labelled data chips (mono, dashboard style) */
.mk-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
  border:1px solid var(--lk-border);background:var(--lk-surface);
  font-family:var(--lk-font-mono);font-size:11px;color:var(--lk-txt2);white-space:nowrap}
/* chips used as list rows carry full sentences, so they wrap and left-align */
li.mk-chip{white-space:normal;text-align:left;line-height:1.55;padding:8px 13px}
.mk-chip.o{border-color:color-mix(in srgb,var(--lk-orange) 32%,transparent);color:var(--mk-chip-o)}
.mk-chip.g{border-color:color-mix(in srgb,var(--lk-green) 32%,transparent);color:var(--mk-chip-g)}

/* an explicit, honest marker for illustrative product data */
.mk-demo-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--lk-font-mono);
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--lk-txt3);
  border:1px dashed var(--lk-border);border-radius:999px;padding:3px 10px}

/* ------------------------------------------------------- MOTION SYSTEM --- */
/* Scoped to .js: the hidden start state is only applied when JavaScript is
   available to reveal it again. Without JS the page renders fully visible
   instead of leaving whole sections at opacity 0. */
.js .mk-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.js .mk-reveal.in{opacity:1;transform:none}
.js .mk-stagger>*{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js .mk-stagger.in>*{opacity:1;transform:none}
.mk-stagger.in>*:nth-child(1){transition-delay:.04s}
.mk-stagger.in>*:nth-child(2){transition-delay:.10s}
.mk-stagger.in>*:nth-child(3){transition-delay:.16s}
.mk-stagger.in>*:nth-child(4){transition-delay:.22s}
.mk-stagger.in>*:nth-child(5){transition-delay:.28s}
.mk-stagger.in>*:nth-child(6){transition-delay:.34s}
.mk-stagger.in>*:nth-child(n+7){transition-delay:.40s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .mk-reveal,.mk-stagger>*,.js .mk-reveal,.js .mk-stagger>*{opacity:1!important;transform:none!important}
}

/* ------------------------------------------------------------- HEADER ---- */
.mk-header{position:sticky;top:0;z-index:100;transition:background .3s,border-color .3s,backdrop-filter .3s;
  border-bottom:1px solid transparent}
.mk-header.stuck{background:color-mix(in srgb,var(--lk-void) 86%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--lk-border)}
.mk-header-in{display:flex;align-items:center;gap:22px;height:72px}
.mk-logo{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.mk-logo-mark{width:36px;height:36px;border-radius:11px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--lk-orange),var(--lk-magenta));
  display:flex;align-items:center;justify-content:center}
.mk-logo-mark svg{width:23px;height:23px}
.mk-logo-txt{font-family:var(--lk-font-display);font-weight:700;font-size:17.5px;line-height:1.1;white-space:nowrap}
.mk-logo-txt span{color:var(--lk-orange)}
.mk-logo-sub{display:block;font-family:var(--lk-font-body);font-size:9.5px;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--lk-txt3);margin-top:2px;font-weight:500}
.mk-nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.mk-nav a{padding:9px 12px;border-radius:9px;font-size:14px;font-weight:500;color:var(--lk-txt2);
  transition:color .18s,background .18s}
.mk-nav a:hover{color:var(--lk-txt);background:var(--lk-violet-soft)}
.mk-header-cta{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.mk-theme{width:40px;height:40px;border-radius:11px;border:1px solid var(--lk-border);background:var(--lk-card);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s,background .2s}
.mk-theme:hover{border-color:var(--lk-border-hover)}
.mk-theme svg{width:17px;height:17px}
.mk-theme .moon{display:none}
[data-theme="light"] .mk-theme .sun{display:none}
[data-theme="light"] .mk-theme .moon{display:block}
.mk-burger{display:none;width:42px;height:42px;border-radius:11px;border:1px solid var(--lk-border);
  background:var(--lk-card);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4.5px}
.mk-burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--lk-txt);transition:transform .25s,opacity .2s}
.mk-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.mk-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.mk-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* mobile drawer */
.mk-drawer{position:fixed;inset:0;z-index:99;background:var(--lk-void);display:none;
  flex-direction:column;padding:88px var(--mk-gutter) 32px;overflow-y:auto}
.mk-drawer.open{display:flex}
.mk-drawer a{padding:15px 4px;font-size:17px;font-weight:600;border-bottom:1px solid var(--lk-border)}
.mk-drawer .mk-drawer-cta{display:grid;gap:11px;margin-top:26px}
.mk-drawer .mk-drawer-cta a{border:0;justify-content:center}
body.mk-locked{overflow:hidden}

@media(max-width:1080px){ .mk-nav a{padding:9px 9px;font-size:13.5px} }
@media(max-width:940px){
  .mk-nav,.mk-header-cta .mk-btn{display:none}
  .mk-burger{display:flex}
  .mk-header-cta{margin-left:auto}
}

/* --------------------------------------------------------------- HERO ---- */
.mk-hero{position:relative;padding:clamp(48px,7vw,92px) 0 clamp(64px,8vw,108px);overflow:hidden}
/* ambient field — CSS only, no canvas, so it costs nothing on LCP */
.mk-hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 520px at 78% 18%,var(--mk-hero-glow-a),transparent 68%),
    radial-gradient(680px 420px at 12% 78%,var(--mk-hero-glow-b),transparent 66%)}
.mk-hero::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--mk-grid-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--mk-grid-line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000,transparent 75%);
          mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000,transparent 75%)}
.mk-hero-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(32px,5vw,64px);align-items:center}
.mk-hero h1{font-size:clamp(34px,5.6vw,66px);margin:20px 0 0;letter-spacing:-.032em;max-width:15ch}
.mk-hero h1 em{font-style:normal;display:block}
.mk-hero-sub{margin-top:20px;max-width:54ch;color:var(--lk-txt2);font-size:clamp(15px,1.6vw,18px);line-height:1.75}
.mk-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.mk-hero-strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;padding-top:24px;border-top:1px solid var(--lk-border)}

/* ------------------------------------------------- OPPORTUNITY RADAR ----- */
.mk-radar{position:relative;aspect-ratio:1/1;width:100%;max-width:540px;margin-inline:auto}
/* a soft instrument glow behind the dial so it reads as lit glass, not a diagram */
.mk-radar::before{content:'';position:absolute;inset:8%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 45%,var(--lk-violet-glow),transparent 68%);filter:blur(18px)}
/* clipped, not visible: at <=430px the bezel painted past the viewport edge */
.mk-radar svg{position:relative;width:100%;height:100%;overflow:hidden}
.mk-radar-ring{fill:none;stroke:var(--lk-border);stroke-width:1}
/* the outer bezel is heavier than the inner rings — depth without extra elements */
.mk-radar-bezel{fill:none;stroke:color-mix(in srgb,var(--lk-violet) 34%,transparent);stroke-width:1.5}
.mk-radar-cross{stroke:var(--lk-border);stroke-width:1}
/* fine graticule ticks around the bezel */
.mk-radar-ticks{stroke:color-mix(in srgb,var(--lk-violet) 40%,transparent);stroke-width:1.4;
  stroke-dasharray:1.5 12.2;stroke-linecap:round;fill:none;opacity:.7}
.mk-radar-sweep{transform-origin:200px 200px;animation:mkSweep 7s linear infinite}
@keyframes mkSweep{to{transform:rotate(360deg)}}
/* a slow counter-rotating ring adds mechanical depth at almost no cost */
.mk-radar-orbit{fill:none;stroke:color-mix(in srgb,var(--lk-orange) 55%,transparent);stroke-width:1.5;
  stroke-dasharray:40 300;stroke-linecap:round;transform-origin:200px 200px;
  animation:mkOrbit 18s linear infinite}
@keyframes mkOrbit{to{transform:rotate(-360deg)}}
.mk-radar-core{fill:none;stroke:color-mix(in srgb,var(--lk-orange) 60%,transparent);stroke-width:1}
.mk-radar-core-dot{fill:var(--lk-orange)}
@media(prefers-reduced-motion:reduce){ .mk-radar-sweep,.mk-radar-orbit{animation:none} }
.mk-node{cursor:pointer}
.mk-node-dot{transition:r .25s,opacity .25s}
.mk-node-halo{opacity:.32;animation:mkPing 3.4s ease-out infinite}
.mk-node:nth-of-type(2) .mk-node-halo{animation-delay:.9s}
.mk-node:nth-of-type(3) .mk-node-halo{animation-delay:1.8s}
.mk-node:nth-of-type(4) .mk-node-halo{animation-delay:2.5s}
@keyframes mkPing{0%{r:6;opacity:.42}70%,100%{r:26;opacity:0}}
.mk-node:hover .mk-node-dot,.mk-node[aria-current="true"] .mk-node-dot{r:8}
.mk-node:focus{outline:none}
.mk-node:focus-visible .mk-node-dot{r:9;stroke:var(--lk-orange);stroke-width:3}
/* intelligence readout — real DOM text, so it stays crawlable and accessible */
.mk-radar-read{position:absolute;left:0;right:0;bottom:-6px;display:grid;gap:8px}
.mk-radar-card{background:color-mix(in srgb,var(--lk-card) 92%,transparent);
  border:1px solid var(--lk-border);border-radius:14px;padding:13px 15px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:var(--lk-shadow-sm)}
.mk-radar-card .row1{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.mk-radar-card b{font-size:14.5px}
.mk-radar-card .meta{font-family:var(--lk-font-mono);font-size:11.5px;color:var(--lk-txt3);margin-top:5px}
.mk-radar-bars{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:11px}
.mk-radar-bar span{display:block;font-family:var(--lk-font-mono);font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--lk-txt3);margin-bottom:4px}
.mk-radar-bar i{display:block;height:4px;border-radius:99px;background:var(--lk-surface);overflow:hidden;position:relative}
.mk-radar-bar i::after{content:'';position:absolute;inset:0 auto 0 0;width:var(--v,50%);border-radius:99px;
  background:linear-gradient(90deg,var(--lk-orange),var(--lk-magenta));transition:width .5s ease}

@media(max-width:900px){
  .mk-hero-in{grid-template-columns:minmax(0,1fr);gap:38px}
  .mk-radar{max-width:420px}
}

/* ------------------------------------------------------ WORKFLOW RAIL ---- */
.mk-rail{border-block:1px solid var(--lk-border);background:var(--lk-surface);padding:26px 0}
.mk-rail-scroll{display:flex;align-items:center;gap:0;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;padding-bottom:2px}
.mk-rail-scroll::-webkit-scrollbar{display:none}
.mk-rail-step{display:flex;align-items:center;gap:12px;flex:0 0 auto;padding-right:12px}
.mk-rail-step b{font-family:var(--lk-font-mono);font-size:10px;color:var(--lk-txt3);letter-spacing:.1em}
.mk-rail-step span{font-size:14.5px;font-weight:600;white-space:nowrap}
.mk-rail-arrow{flex:0 0 auto;width:26px;height:1px;background:linear-gradient(90deg,var(--lk-border),var(--lk-violet));
  margin-right:12px;position:relative}
.mk-rail-arrow::after{content:'';position:absolute;right:0;top:-2.5px;border:3px solid transparent;
  border-left-color:var(--lk-violet)}

/* ----------------------------------------------------- GENERIC LAYOUTS -- */
.mk-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(30px,5vw,64px);align-items:center}
.mk-split.rev>*:first-child{order:2}
.mk-grid{display:grid;gap:18px}
.mk-grid.g2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.mk-grid.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.mk-grid.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
@media(max-width:880px){ .mk-split{grid-template-columns:minmax(0,1fr)} .mk-split.rev>*:first-child{order:0} }

/* ------------------------------------------------------- PRODUCT FRAME -- */
/* recreated product UI rather than screenshots: crisp, theme-aware, animatable */
.mk-ui{background:var(--lk-card);border:1px solid var(--lk-border);border-radius:var(--mk-radius-lg);
  overflow:hidden;box-shadow:var(--lk-shadow-lg)}
.mk-ui-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--lk-border);
  background:var(--lk-surface)}
.mk-ui-dots{display:flex;gap:6px}
.mk-ui-dots i{width:9px;height:9px;border-radius:50%;background:var(--lk-border);display:block}
.mk-ui-dots i:first-child{background:color-mix(in srgb,var(--lk-orange) 60%,transparent)}
.mk-ui-title{font-family:var(--lk-font-mono);font-size:11.5px;color:var(--lk-txt3);margin-left:6px}
.mk-ui-body{padding:18px}

/* data table used by lead finder + GBP */
.mk-tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.mk-tbl th{text-align:left;font-family:var(--lk-font-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--lk-txt3);font-weight:600;padding:0 12px 10px;white-space:nowrap}
.mk-tbl td{padding:12px;border-top:1px solid var(--lk-border);vertical-align:middle}
.mk-tbl tr:hover td{background:var(--lk-card-hover)}
.mk-tbl .biz{font-weight:600}
.mk-tbl .sub{display:block;font-size:11.5px;color:var(--lk-txt3);font-family:var(--lk-font-mono);margin-top:2px}
.mk-scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ------------------------------------------------------ RANK GRID DEMO -- */
.mk-rank{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;max-width:330px}
.mk-rank b{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border-radius:11px;
  font-family:var(--lk-font-mono);font-size:14px;font-weight:600;border:1px solid transparent;
  transition:transform .3s ease, background .3s ease}
/* rank state carries a border pattern + label as well as colour, never colour alone */
.mk-rank b.t3{background:color-mix(in srgb,var(--lk-green) 20%,transparent);color:var(--mk-chip-g);
  border-color:color-mix(in srgb,var(--lk-green) 46%,transparent)}
.mk-rank b.t10{background:var(--lk-orange-soft);color:var(--mk-chip-o);
  border-color:color-mix(in srgb,var(--lk-orange) 42%,transparent)}
.mk-rank b.low{background:color-mix(in srgb,var(--lk-danger) 14%,transparent);color:var(--mk-rank-low);
  border-color:color-mix(in srgb,var(--lk-danger) 38%,transparent);border-style:dashed}
.mk-rank-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px;font-size:12px;color:var(--lk-txt2)}
.mk-rank-legend i{width:11px;height:11px;border-radius:4px;display:inline-block;margin-right:6px;vertical-align:-1px;border:1px solid}
.mk-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px;margin-top:20px}
.mk-metric{background:var(--lk-surface);border:1px solid var(--lk-border);border-radius:13px;padding:13px 14px}
.mk-metric span{display:block;font-family:var(--lk-font-mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--lk-txt3)}
.mk-metric b{display:block;font-family:var(--lk-font-display);font-size:24px;margin-top:5px}
.mk-seg{display:inline-flex;padding:3px;border-radius:11px;background:var(--lk-surface);
  border:1px solid var(--lk-border);gap:3px;flex-wrap:wrap}
.mk-seg button{border:0;background:transparent;color:var(--lk-txt2);padding:7px 13px;border-radius:8px;
  cursor:pointer;font-size:12.5px;font-weight:600;transition:background .2s,color .2s}
.mk-seg button[aria-pressed="true"]{background:var(--lk-orange);color:#fff}

/* --------------------------------------------------- TEMPLATE GALLERY --- */
.mk-gallery{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 0 18px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mk-gallery::-webkit-scrollbar{display:none}
.mk-tpl{flex:0 0 clamp(230px,26vw,290px);scroll-snap-align:start;background:var(--lk-card);
  border:1px solid var(--lk-border);border-radius:var(--mk-radius);overflow:hidden;
  transition:transform .25s,border-color .25s}
.mk-tpl:hover,.mk-tpl:focus-within{transform:translateY(-5px);border-color:var(--lk-border-hover)}
.mk-tpl-shot{aspect-ratio:16/11;position:relative;overflow:hidden;border-bottom:1px solid var(--lk-border)}
/* miniature of the real template palette rather than a stock image */
.mk-tpl-mini{position:absolute;inset:0;display:flex;flex-direction:column}
.mk-tpl-mini .bar{height:15%;display:flex;align-items:center;gap:4px;padding:0 9px}
.mk-tpl-mini .bar i{width:14px;height:5px;border-radius:2px;background:rgba(255,255,255,.5);display:block}
.mk-tpl-mini .bar i:first-child{width:22px;background:rgba(255,255,255,.9)}
.mk-tpl-mini .hero{flex:1;padding:11px;display:flex;flex-direction:column;justify-content:center;gap:6px}
.mk-tpl-mini .hero b{display:block;height:8px;width:70%;border-radius:3px;background:rgba(255,255,255,.92)}
.mk-tpl-mini .hero u{display:block;height:5px;width:52%;border-radius:3px;background:rgba(255,255,255,.5)}
.mk-tpl-mini .hero em{display:block;height:13px;width:64px;border-radius:5px;margin-top:4px}
.mk-tpl-mini .strip{height:26%;display:flex;gap:5px;padding:0 9px 9px}
.mk-tpl-mini .strip i{flex:1;border-radius:4px;background:rgba(255,255,255,.16);display:block}
.mk-tpl-body{padding:15px 16px}
.mk-tpl-body b{font-family:var(--lk-font-display);font-size:16px;display:block}
.mk-tpl-body .cat{font-family:var(--lk-font-mono);font-size:11px;color:var(--lk-txt3);
  letter-spacing:.09em;text-transform:uppercase;margin-top:3px;display:block}
.mk-tpl-body p{font-size:12.5px;color:var(--lk-txt2);margin-top:9px;line-height:1.6}

/* --------------------------------------------- FLAGSHIP TEMPLATES ------- */
.mk-tpl3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.mk-tpl-big{display:flex;flex-direction:column;background:var(--lk-card);border:1px solid var(--lk-border);
  border-radius:var(--mk-radius-lg);overflow:hidden;transition:transform .28s,border-color .28s,box-shadow .28s}
.mk-tpl-big:hover,.mk-tpl-big:focus-within{transform:translateY(-6px);border-color:var(--lk-border-hover);
  box-shadow:var(--lk-shadow-lg)}
/* fixed ratio on the shot + flex body = all three cards match exactly, whatever
   the copy length */
.mk-tpl-big .mk-tpl-shot{aspect-ratio:16/11;border-bottom:1px solid var(--lk-border);position:relative;overflow:hidden}
.mk-tpl-big .mk-tpl-body{padding:20px 22px 24px;flex:1;display:flex;flex-direction:column}
.mk-tpl-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mk-tpl-row b{font-family:var(--lk-font-display);font-size:21px}
.mk-tpl-big .cat{display:block;font-family:var(--lk-font-mono);font-size:11px;color:var(--lk-txt3);
  letter-spacing:.08em;text-transform:uppercase;margin-top:6px}
.mk-tpl-big p{font-size:13.5px;color:var(--lk-txt2);margin-top:11px;line-height:1.7}
.mk-tpl-note{max-width:720px;margin:22px auto 0;text-align:center;font-size:14px;color:var(--lk-txt2)}
.mk-tpl-note a{color:var(--lk-orange);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* Template miniature: a scaled abstraction of each real design's palette and
   layout rhythm, drawn in CSS so it stays crisp and theme-independent. */
.mk-mini{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--m-bg);overflow:hidden}
.mk-mini .m-bar{height:7%;flex:0 0 auto}
.mk-mini .m-nav{flex:0 0 auto;height:15%;display:flex;align-items:center;gap:5px;padding:0 9px;background:var(--m-nav)}
.mk-mini .m-nav i{height:4px;width:15px;border-radius:2px;background:color-mix(in srgb,var(--m-ink) 55%,transparent)}
.mk-mini .m-nav i.brand{width:30px;height:8px;border-radius:3px;background:var(--m-ink)}
.mk-mini .m-nav i.btn{margin-left:auto;width:32px;height:11px;border-radius:4px;background:var(--m-cta)}
.mk-mini .m-nav.light i{background:color-mix(in srgb,var(--m-ink) 60%,transparent)}
.mk-mini .m-hero{flex:1;min-height:0;padding:11px;display:flex;flex-direction:column;justify-content:center;gap:5px}
.mk-mini .m-hero b{display:block;height:9px;width:62%;border-radius:3px;background:var(--m-ink)}
.mk-mini .m-hero b.wide{width:80%;height:11px}
.mk-mini .m-hero b.s2{width:52%}
.mk-mini .m-hero b.ctr,.mk-mini .m-hero u.ctr{margin-inline:auto}
.mk-mini .m-hero u{display:block;height:5px;width:46%;border-radius:3px;
  background:color-mix(in srgb,var(--m-ink) 55%,transparent)}
.mk-mini .m-hero em{display:block;height:13px;width:60px;border-radius:5px;background:var(--m-cta);margin-top:6px}
.mk-mini .m-hero.split{flex-direction:row;align-items:center;gap:9px}
.mk-mini .m-col{flex:1;display:flex;flex-direction:column;gap:5px}
.mk-mini .m-form{flex:0 0 40%;align-self:stretch;margin:6px 0;border-radius:6px;background:#fff;
  padding:6px;display:flex;flex-direction:column;gap:4px;justify-content:center}
.mk-mini .m-form i{height:5px;border-radius:2px;background:rgba(0,0,0,.14)}
.mk-mini .m-form i.go{height:8px;background:var(--m-cta);margin-top:2px}
.mk-mini .m-cards{display:flex;gap:5px;margin-top:8px;height:38%}
.mk-mini .m-cards i{flex:1;border-radius:5px}
.mk-mini .m-strip{flex:0 0 22%;display:flex;align-items:center;gap:6px;padding:0 9px}
.mk-mini .m-strip i{flex:1;height:7px;border-radius:3px;background:color-mix(in srgb,var(--m-bg) 30%,transparent)}

/* ------------------------------------------------- WORDPRESS FLOW ------- *//* ------------------------------------------------- WORDPRESS FLOW ------- */
.mk-wpflow{display:flex;align-items:stretch;gap:0;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.mk-wpflow::-webkit-scrollbar{display:none}
.mk-wpstep{flex:1 0 210px;min-width:0;padding:4px 18px 4px 0}
.mk-wpstep b{font-family:var(--lk-font-mono);font-size:11px;color:var(--mk-chip-o);letter-spacing:.1em}
.mk-wpstep h3{font-size:16.5px;margin:8px 0 7px}
.mk-wpstep p{font-size:13.5px;color:var(--lk-txt2);line-height:1.65}
.mk-wparrow{flex:0 0 auto;align-self:center;width:26px;height:1px;margin-right:18px;
  background:linear-gradient(90deg,var(--lk-border),var(--lk-orange));position:relative}
.mk-wparrow::after{content:'';position:absolute;right:0;top:-2.5px;border:3px solid transparent;
  border-left-color:var(--lk-orange)}
@media(max-width:760px){
  .mk-wpflow{flex-direction:column;gap:18px}
  .mk-wpstep{flex:none;padding-right:0}
  .mk-wparrow{display:none}
}

/* ---------------------------------------------------- WORKFLOW FILM ---- */
/* A "film" made of DOM: `data-slide` on #mk-film selects the frame. Everything
   is real markup, so it is crisp at any DPI, correct in both themes, keyboard
   navigable via the chapter rail, and readable through the live caption. */
.mk-film{max-width:1000px;margin:44px auto 0}
.mk-film-play{margin-left:auto;width:28px;height:28px;border-radius:8px;border:1px solid var(--lk-border);
  background:var(--lk-card);color:var(--lk-txt2);display:flex;align-items:center;justify-content:center;cursor:pointer}
.mk-film-play svg{width:13px;height:13px}
.mk-film-play .r{display:none}
.mk-film.paused .mk-film-play .p{display:none}
.mk-film.paused .mk-film-play .r{display:block}

.mk-film-stage{position:relative;min-height:390px;background:var(--lk-surface);
  border-bottom:1px solid var(--lk-border);overflow:hidden}
.mk-fs{position:absolute;inset:0;padding:26px;opacity:0;transform:translateY(12px);
  transition:opacity .5s ease,transform .5s ease;pointer-events:none;
  display:flex;flex-direction:column;justify-content:center}
.mk-film[data-slide="1"] .mk-fs[data-s="1"],.mk-film[data-slide="2"] .mk-fs[data-s="2"],
.mk-film[data-slide="3"] .mk-fs[data-s="3"],.mk-film[data-slide="4"] .mk-fs[data-s="4"],
.mk-film[data-slide="5"] .mk-fs[data-s="5"],.mk-film[data-slide="6"] .mk-fs[data-s="6"],
.mk-film[data-slide="7"] .mk-fs[data-s="7"],.mk-film[data-slide="8"] .mk-fs[data-s="8"]{
  opacity:1;transform:none;pointer-events:auto}

/* 1 — build type */
.mk-fs-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.mk-fcard{padding:16px;border-radius:14px;border:1px solid var(--lk-border);background:var(--lk-card);position:relative}
.mk-fcard.on{border-color:color-mix(in srgb,var(--lk-orange) 46%,transparent);
  box-shadow:0 0 0 3px var(--lk-orange-soft)}
.mk-fcard.soon{opacity:.55}
.mk-fcard .ic{display:block;width:30px;height:30px;border-radius:9px;margin-bottom:10px;
  background:var(--lk-violet-soft);border:1px solid var(--lk-border)}
.mk-fcard .ic.o{background:var(--lk-orange-soft)}
.mk-fcard b{display:block;font-family:var(--lk-font-display);font-size:14.5px;line-height:1.25}
.mk-fcard small{display:block;font-size:11.5px;color:var(--lk-txt3);margin-top:6px;line-height:1.55}
.mk-fcard .tag{display:inline-block;margin-top:10px;font-style:normal;font-family:var(--lk-font-mono);
  font-size:10px;padding:3px 8px;border-radius:99px;background:var(--lk-surface);
  border:1px solid var(--lk-border);color:var(--lk-txt3)}
.mk-fcard .tag.ok{color:var(--mk-chip-g);border-color:color-mix(in srgb,var(--lk-green) 40%,transparent)}

/* 2 — the form typing itself */
.mk-fsteps{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.mk-fsteps i{font-style:normal;font-family:var(--lk-font-mono);font-size:10.5px;padding:5px 11px;
  border-radius:99px;border:1px solid var(--lk-border);color:var(--lk-txt3)}
.mk-fsteps i.on{background:var(--lk-orange-soft);color:var(--mk-chip-o);
  border-color:color-mix(in srgb,var(--lk-orange) 42%,transparent)}
.mk-fform{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mk-fform label{display:block;font-size:11px;color:var(--lk-txt3);font-weight:600}
.mk-fform label.wide{grid-column:1/-1}
/* the required-field asterisk is 11px text, so it needs the readable
   orange rather than the fill orange */
.mk-fform em{color:var(--mk-chip-o);font-style:normal}
.mk-fform .ai{float:right;font-style:normal;font-family:var(--lk-font-mono);font-size:10px;
  color:var(--mk-violet-text);border:1px solid var(--lk-border);border-radius:99px;padding:2px 8px}
.mk-fform .fv{display:block;margin-top:6px;padding:10px 12px;border-radius:10px;background:var(--lk-card);
  border:1px solid var(--lk-border);font-size:13px;color:var(--lk-txt);
  white-space:nowrap;overflow:hidden}
/* typed-in effect: the value width animates open like a caret filling the field */
.mk-film[data-slide="2"] .mk-fform .fv{animation:mkType .5s steps(18) backwards}
.mk-film[data-slide="2"] .type2{animation-delay:.35s}
.mk-film[data-slide="2"] .type3{animation-delay:.7s}
.mk-film[data-slide="2"] .type4{animation-delay:1.05s}
@keyframes mkType{from{max-width:2.5ch}to{max-width:100%}}
.mk-fform .fchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.mk-fform .fchips i{font-style:normal;font-size:11.5px;padding:6px 11px;border-radius:99px;
  background:var(--lk-card);border:1px solid var(--lk-border);color:var(--lk-txt2)}
.mk-film[data-slide="2"] .fchips i{animation:mkPop .4s backwards;animation-delay:1.4s}
.mk-film[data-slide="2"] .fchips i:nth-child(2){animation-delay:1.55s}
.mk-film[data-slide="2"] .fchips i:nth-child(3){animation-delay:1.7s}
.mk-film[data-slide="2"] .fchips i:nth-child(4){animation-delay:1.85s}
@keyframes mkPop{from{opacity:0;transform:translateY(7px) scale(.96)}to{opacity:1;transform:none}}

/* 3 — design match */
.mk-fmatch{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px;align-items:center}
.mk-fmatch-shot{aspect-ratio:16/11;border-radius:12px;overflow:hidden;border:1px solid var(--lk-border);position:relative}
.mk-fmatch-side .row{display:flex;align-items:baseline;gap:12px}
.mk-fmatch-side b{font-family:var(--lk-font-display);font-size:25px}
.mk-fmatch-side .pct{margin-left:auto;font-family:var(--lk-font-display);font-size:27px;color:var(--mk-violet-text)}
.mk-fmatch-side small{display:block;font-family:var(--lk-font-mono);font-size:11px;color:var(--lk-txt3);margin-top:3px}
.mk-fmatch-side p{font-size:12.5px;color:var(--lk-txt2);margin-top:12px;line-height:1.6}
.mk-fchipwrap{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.mk-fchipwrap.tight{margin-top:10px}
.mk-fbtn,.mk-fpublish{display:inline-block;margin-top:14px;padding:10px 18px;border-radius:10px;
  font-size:13px;font-weight:650;color:#fff;background:linear-gradient(120deg,var(--lk-orange),var(--lk-magenta));
  box-shadow:0 8px 22px var(--lk-orange-glow)}

/* 4 — building */
.mk-fbuild{display:flex;align-items:center;gap:26px}
.mk-forb{position:relative;width:88px;height:88px;flex:0 0 auto}
.mk-forb span{position:absolute;inset:0;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--lk-violet) 42%,transparent)}
.mk-forb span:nth-child(1){animation:mkOrbA 3s ease-in-out infinite}
.mk-forb span:nth-child(2){inset:14px;border-color:color-mix(in srgb,var(--lk-orange) 46%,transparent);
  animation:mkOrbA 3s ease-in-out infinite -1.5s}
.mk-forb span:nth-child(3){inset:0;border:0;background:radial-gradient(circle,var(--lk-violet-glow),transparent 68%)}
@keyframes mkOrbA{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.12)}}
.mk-fbuild-body{flex:1;min-width:0}
.mk-fbuild-body .kick{font-family:var(--lk-font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mk-violet-text)}
.mk-fbuild-body b{display:block;font-family:var(--lk-font-display);font-size:21px;margin-top:5px}
.mk-fbuild-body small{display:block;font-size:13px;color:var(--lk-txt2);margin-top:4px;min-height:19px}
.mk-fbar{height:5px;border-radius:99px;background:color-mix(in srgb,var(--lk-txt3) 26%,transparent);
  margin-top:14px;overflow:hidden}
.mk-fbar i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--lk-orange),var(--lk-magenta),var(--lk-violet))}
.mk-film[data-slide="4"] .mk-fbar i{animation:mkFill 3.4s ease-out forwards}
@keyframes mkFill{from{width:0}to{width:67%}}
.mk-fbuild-body .mono{display:block;font-family:var(--lk-font-mono);font-size:11px;color:var(--lk-txt3);margin-top:7px}

/* 5 — the finished site */
.mk-fsite{border-radius:12px;overflow:hidden;border:1px solid var(--lk-border);
  background:linear-gradient(160deg,#1b2a33,#0f1720);--m-ink:#eef4f8;--m-cta:#8fc0d8;--m-nav:#0b1119}
.mk-fsite .m-nav{height:38px;display:flex;align-items:center;gap:6px;padding:0 12px;background:var(--m-nav)}
.mk-fsite .m-nav i{height:4px;width:17px;border-radius:2px;background:rgba(238,244,248,.5)}
.mk-fsite .m-nav i.brand{width:34px;height:9px;background:#eef4f8}
.mk-fsite .m-nav i.btn{margin-left:auto;width:38px;height:13px;border-radius:5px;background:var(--m-cta)}
.fs-hero{padding:26px 20px 20px;text-align:center}
.fs-hero .pill{display:inline-block;font-size:10.5px;color:rgba(238,244,248,.8);border:1px solid rgba(238,244,248,.2);
  border-radius:99px;padding:4px 12px;margin-bottom:12px}
.fs-hero b{display:block;font-family:var(--lk-font-display);font-size:clamp(19px,2.6vw,28px);color:#eef4f8;line-height:1.15}
.fs-hero b.accent{color:var(--m-cta)}
.fs-hero u{display:block;text-decoration:none;font-size:12px;color:rgba(238,244,248,.66);margin-top:9px}
.fs-cta{display:flex;gap:9px;justify-content:center;margin-top:14px}
.fs-cta i{display:block;height:28px;width:112px;border-radius:8px}
.fs-cta .a{background:var(--m-cta)}
.fs-cta .b{background:transparent;border:1px solid rgba(238,244,248,.28)}
.fs-trust{display:flex;gap:1px;background:rgba(238,244,248,.1);margin-top:18px}
.fs-trust i{flex:1;height:34px;background:#0b1119}
.mk-film[data-slide="5"] .mk-fsite>*{animation:mkPop .45s backwards}
.mk-film[data-slide="5"] .fs-hero{animation-delay:.12s}
.mk-film[data-slide="5"] .fs-trust{animation-delay:.26s}

/* 6 — restyle */
.mk-fedit{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:18px;align-items:stretch}
.mk-fpanel{padding:16px;border-radius:12px;background:var(--lk-card);border:1px solid var(--lk-border)}
.mk-fpanel .ph{display:block;font-family:var(--lk-font-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--lk-txt3);margin:14px 0 8px}
.mk-fpanel .ph:first-child{margin-top:0}
.mk-fpanel .ph em{font-style:normal;color:var(--mk-chip-o)}
.mk-fpanel .sw{display:flex;gap:7px}
.mk-fpanel .sw i{flex:1;height:22px;border-radius:6px;border:1.5px solid transparent}
.mk-fpanel .sw i.on{border-color:var(--lk-orange)}
.mk-fpanel .fp{display:flex;flex-wrap:wrap;gap:6px}
.mk-fpanel .fp i{font-style:normal;font-size:11px;padding:5px 10px;border-radius:8px;
  border:1px solid var(--lk-border);color:var(--lk-txt2)}
.mk-fpanel .fp i.on{border-color:var(--lk-orange);color:var(--lk-txt);background:var(--lk-orange-soft)}
.mk-fpreview{border-radius:12px;border:1px solid var(--lk-border);overflow:hidden;position:relative;
  display:flex;flex-direction:column}
.mk-fswatch{flex:1;background:linear-gradient(135deg,#C0392B,#e06a4a 45%,#FFB03B);
  animation:mkHue 6s ease-in-out infinite}
@keyframes mkHue{0%,100%{filter:hue-rotate(0)}50%{filter:hue-rotate(40deg)}}
.mk-fpreview .lbl{padding:10px 12px;font-size:11.5px;color:var(--lk-txt3);background:var(--lk-card);
  border-top:1px solid var(--lk-border)}

/* 7 — section library */
.mk-flib-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.mk-flib-tabs i{font-style:normal;font-size:11px;padding:5px 11px;border-radius:99px;
  border:1px solid var(--lk-border);color:var(--lk-txt3)}
.mk-flib-tabs i.on{background:var(--lk-violet-soft);color:var(--mk-violet-text);
  border-color:color-mix(in srgb,var(--lk-violet) 44%,transparent)}
.mk-flib-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mk-flib-card{border-radius:12px;border:1px solid var(--lk-border);background:var(--lk-card);overflow:hidden}
.mk-flib-card .thumb{display:block;height:74px;padding:11px;background:#141c2b;display:flex;
  flex-direction:column;justify-content:center;gap:6px}
.mk-flib-card .thumb.light{background:#f4f2ee}
.mk-flib-card .thumb i{display:block;height:7px;border-radius:3px;background:rgba(255,255,255,.22)}
.mk-flib-card .thumb.light i{background:rgba(20,20,30,.14)}
.mk-flib-card .thumb i:nth-child(2){width:70%}
.mk-flib-card .thumb i:nth-child(3){width:45%}
.mk-flib-card b{display:block;font-size:12.5px;padding:11px 12px 0}
.mk-flib-card small{display:block;font-size:11px;color:var(--lk-txt3);padding:4px 12px 12px;line-height:1.5}
.mk-flib-note{display:block;margin-top:13px;font-size:12px;color:var(--lk-txt2)}

/* 8 — SEO + publish */
.mk-fseo-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.mk-fseo-tabs i{font-style:normal;font-size:11.5px;padding:6px 12px;border-radius:9px;color:var(--lk-txt3)}
.mk-fseo-tabs i.on{color:var(--mk-chip-o);border-bottom:2px solid var(--lk-orange);border-radius:0}
.mk-fseo-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.mk-fseo-left .lb{display:block;font-size:11px;color:var(--lk-txt3);font-weight:600;margin-bottom:6px}
.mk-fseo-left .lb em{float:right;font-style:normal;font-family:var(--lk-font-mono);color:var(--mk-chip-g)}
.mk-fseo-left .in{padding:10px 12px;border-radius:10px;background:var(--lk-card);border:1px solid var(--lk-border);
  font-size:12.5px;color:var(--lk-txt);margin-bottom:12px;line-height:1.55}
.mk-fseo-left .in.tall{min-height:58px}
.mk-fserp{background:#fff;border-radius:12px;padding:15px 16px;align-self:start;border:1px solid var(--lk-border)}
.mk-fserp .u{display:block;font-size:11.5px;color:#4d5156}
.mk-fserp b{display:block;font-size:16px;color:#1a0dab;margin-top:4px;line-height:1.3}
.mk-fserp p{font-size:12.5px;color:#4d5156;margin-top:5px;line-height:1.6}

/* caption + chapter rail */
.mk-film-rail{padding:16px 18px}
.mk-film-cap{font-size:14px;color:var(--lk-txt2);min-height:42px;line-height:1.6}
.mk-film-dots{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0;counter-reset:fd}
.mk-film-dots button{display:flex;align-items:center;gap:7px;padding:6px 11px;border-radius:99px;cursor:pointer;
  border:1px solid var(--lk-border);background:transparent;color:var(--lk-txt3);
  font-family:var(--lk-font-mono);font-size:10.5px;transition:.2s}
.mk-film-dots button:before{counter-increment:fd;content:counter(fd,decimal-leading-zero)}
.mk-film-dots button:hover{border-color:var(--lk-border-hover);color:var(--lk-txt2)}
.mk-film-dots button[aria-selected="true"]{background:var(--lk-orange-soft);color:var(--mk-chip-o);
  border-color:color-mix(in srgb,var(--lk-orange) 44%,transparent)}

@media(max-width:860px){
  .mk-fs-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mk-fmatch,.mk-fedit,.mk-fseo-body{grid-template-columns:minmax(0,1fr)}
  .mk-flib-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mk-film-stage{min-height:440px}
}
@media(max-width:620px){
  .mk-fs{padding:18px}
  .mk-fform{grid-template-columns:minmax(0,1fr)}
  .mk-flib-grid{grid-template-columns:minmax(0,1fr)}
  .mk-flib-card:nth-child(n+2){display:none}
  .mk-fbuild{flex-direction:column;align-items:flex-start;gap:16px}
  .mk-film-dots button span{display:none}
  .mk-film-stage{min-height:400px}
}
@media(prefers-reduced-motion:reduce){
  .mk-fs,.mk-fs *{animation:none!important;transition:none!important}
  .mk-fswatch,.mk-forb span{animation:none!important}
}

/* ---------------------------------------------------------- STORIES ---- */
.mk-stories{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;align-items:start}
.mk-story-lead{padding:32px}
.mk-story-top{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap}
.mk-stars{color:var(--lk-warning);letter-spacing:3px;font-size:14px}
.mk-story-lead blockquote{margin:20px 0 0;padding:0}
.mk-story-lead blockquote p{font-family:var(--lk-font-display);font-size:clamp(19px,2.2vw,25px);
  line-height:1.5;color:var(--lk-txt);letter-spacing:-.015em}
.mk-story-by{display:flex;align-items:center;gap:12px;margin-top:24px;padding-top:18px;
  border-top:1px solid var(--lk-border)}
.mk-story-by b{display:block;font-size:14px}
.mk-story-by small{display:block;font-size:12.5px;color:var(--lk-txt3);margin-top:2px}
.mk-avatar{width:42px;height:42px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;background:var(--lk-surface);border:1px solid var(--lk-border);
  color:var(--lk-txt3);font-family:var(--lk-font-mono)}
.mk-story-tools{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.mk-story-side{display:grid;gap:16px}
.mk-story-side .mk-card p{margin-top:12px;color:var(--lk-txt2);font-size:14px}
@media(max-width:880px){ .mk-stories{grid-template-columns:minmax(0,1fr)} .mk-story-lead{padding:24px} }

/* ---------------------------------------------------------- OS GRAPH ---- */
.mk-os{position:relative;max-width:620px;margin-inline:auto;aspect-ratio:1/1}
.mk-os svg{width:100%;height:100%}
.mk-os-link{stroke:var(--lk-border);stroke-width:1.2;stroke-dasharray:4 6;animation:mkFlow 12s linear infinite}
@keyframes mkFlow{to{stroke-dashoffset:-200}}
.mk-os-core{fill:var(--lk-card);stroke:color-mix(in srgb,var(--lk-orange) 45%,transparent);stroke-width:1.5}
.mk-os-node{fill:var(--lk-surface);stroke:var(--lk-border);stroke-width:1}
.mk-os-label{font-family:var(--lk-font-body);font-size:11px;font-weight:600;fill:var(--lk-txt2)}
.mk-os-core-label{font-family:var(--lk-font-display);font-size:17px;font-weight:700;fill:var(--lk-txt)}

/* -------------------------------------------------------- COMPARISON ---- */
.mk-cmp{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
.mk-cmp th,.mk-cmp td{padding:15px 16px;text-align:left;border-bottom:1px solid var(--lk-border)}
.mk-cmp thead th{font-family:var(--lk-font-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--lk-txt3);font-weight:600;white-space:nowrap}
.mk-cmp tbody th{font-weight:600;color:var(--lk-txt)}
.mk-cmp td{color:var(--lk-txt2)}
.mk-cmp .own{background:linear-gradient(180deg,var(--lk-violet-soft),transparent);
  border-left:1px solid var(--lk-border);border-right:1px solid var(--lk-border);color:var(--lk-txt);font-weight:600}
.mk-cmp thead .own{border-top:1px solid var(--lk-border);border-radius:14px 14px 0 0;color:var(--lk-orange)}
.mk-cmp tbody tr:last-child .own{border-bottom:1px solid var(--lk-border);border-radius:0 0 14px 14px}
/* mobile: the table becomes stacked capability blocks rather than a pinch-zoom grid */
.mk-cmp-cards{display:none;gap:14px}
.mk-cmp-card dl{margin:12px 0 0;display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:13.5px}
.mk-cmp-card dt{font-family:var(--lk-font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--lk-txt3);align-self:center}
.mk-cmp-card dd{margin:0;color:var(--lk-txt2)}
.mk-cmp-card dd.own{color:var(--lk-txt);font-weight:600}
@media(max-width:820px){ .mk-cmp-wrap{display:none} .mk-cmp-cards{display:grid} }

/* ---------------------------------------------------------- PRICING ----- */
.mk-price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;align-items:start}
.mk-plan{background:var(--lk-card);border:1px solid var(--lk-border);border-radius:var(--mk-radius-lg);padding:28px;position:relative}
.mk-plan.best{border-color:color-mix(in srgb,var(--lk-orange) 46%,transparent);
  background:linear-gradient(165deg,var(--lk-orange-soft),transparent 46%),var(--lk-card);
  box-shadow:var(--lk-shadow-lg)}
.mk-plan-badge{position:absolute;top:-11px;left:28px;padding:4px 12px;border-radius:999px;
  background:linear-gradient(120deg,var(--lk-orange),var(--lk-magenta));color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.mk-plan h3{font-size:20px}
.mk-plan-desc{color:var(--lk-txt2);font-size:13.5px;margin-top:6px;min-height:38px}
.mk-plan-price{display:flex;align-items:baseline;gap:4px;margin:18px 0 4px}
.mk-plan-price b{font-family:var(--lk-font-display);font-size:44px;line-height:1;letter-spacing:-.03em}
.mk-plan-price span{color:var(--lk-txt3);font-family:var(--lk-font-mono);font-size:12.5px}
.mk-plan-note{font-family:var(--lk-font-mono);font-size:11px;color:var(--lk-txt3);min-height:16px}
.mk-plan ul{list-style:none;margin:20px 0 24px;padding:0;display:grid;gap:10px}
.mk-plan li{display:flex;gap:10px;font-size:13.5px;color:var(--lk-txt2);line-height:1.55}
.mk-plan li svg{width:16px;height:16px;flex:0 0 auto;margin-top:2px;color:var(--lk-green)}
.mk-plan .mk-btn{width:100%}
.mk-bill{display:inline-flex;align-items:center;gap:12px;margin-top:22px}
.mk-bill-note{font-size:12.5px;color:var(--lk-txt3);margin-top:14px}

/* ------------------------------------------- COMPACT ACCORDION --------- */
/* Used where four short ideas would otherwise eat a full screen as cards.
   Native <details> so it degrades to an open list without JS. */
.mk-acc{display:grid;gap:8px}
.mk-acc details{border:1px solid var(--lk-border);border-radius:12px;background:var(--lk-card);
  overflow:hidden;transition:border-color .2s}
.mk-acc details[open]{border-color:color-mix(in srgb,var(--lk-orange) 34%,transparent)}
.mk-acc summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;
  padding:13px 44px 13px 15px;font-weight:600;font-size:14.5px;position:relative}
.mk-acc summary::-webkit-details-marker{display:none}
.mk-acc summary .n{font-family:var(--lk-font-mono);font-size:11px;color:var(--mk-chip-o);flex:0 0 auto}
.mk-acc summary::after{content:'';position:absolute;right:17px;top:19px;width:8px;height:8px;
  border-right:2px solid var(--lk-txt3);border-bottom:2px solid var(--lk-txt3);
  transform:rotate(45deg);transition:transform .22s}
.mk-acc details[open] summary::after{transform:rotate(225deg);top:22px}
.mk-acc p{padding:0 15px 15px 42px;margin:0;font-size:13.5px;line-height:1.7;color:var(--lk-txt2)}
@media(max-width:420px){ .mk-acc p{padding-left:15px} }

/* ------------------------------------------------------------- FAQ ------ */
.mk-faq{max-width:820px;margin-inline:auto;display:grid;gap:10px}
.mk-faq details{background:var(--lk-card);border:1px solid var(--lk-border);border-radius:14px;overflow:hidden}
.mk-faq details[open]{border-color:var(--lk-border-hover)}
.mk-faq summary{cursor:pointer;list-style:none;padding:18px 52px 18px 20px;position:relative;
  font-weight:600;font-size:15.5px}
.mk-faq summary::-webkit-details-marker{display:none}
.mk-faq summary::after{content:'';position:absolute;right:22px;top:24px;width:9px;height:9px;
  border-right:2px solid var(--lk-txt3);border-bottom:2px solid var(--lk-txt3);
  transform:rotate(45deg);transition:transform .25s}
.mk-faq details[open] summary::after{transform:rotate(225deg);top:27px}
.mk-faq .a{padding:0 20px 20px;color:var(--lk-txt2);font-size:14.5px;line-height:1.75}

/* --------------------------------------------------------- FINAL CTA --- */
.mk-final{position:relative;overflow:hidden;border-radius:var(--mk-radius-lg);
  border:1px solid var(--lk-border);background:var(--lk-card);padding:clamp(38px,6vw,72px) clamp(24px,5vw,60px);text-align:center}
.mk-final::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(620px 340px at 50% 0%,var(--lk-violet-glow),transparent 70%)}
.mk-final::after{content:'';position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);
  pointer-events:none;opacity:.5;
  background:repeating-radial-gradient(circle at 50% 50%,transparent 0 48px,var(--mk-grid-line) 48px 49px);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000,transparent 62%);
          mask-image:radial-gradient(circle at 50% 50%,#000,transparent 62%)}
.mk-final>*{position:relative;z-index:1}
.mk-final h2{font-size:clamp(28px,4.6vw,52px);max-width:17ch;margin-inline:auto}

/* ---------------------------------------------------------- FOOTER ----- */
.mk-footer{border-top:1px solid var(--lk-border);background:var(--lk-surface);padding:56px 0 30px;margin-top:var(--mk-section-y)}
.mk-foot-grid{display:grid;grid-template-columns:minmax(min(220px,100%),1.4fr) repeat(auto-fit,minmax(min(130px,100%),1fr));gap:34px}
.mk-foot-brand p{color:var(--lk-txt2);font-size:13.5px;margin-top:14px;max-width:34ch;line-height:1.7}
.mk-foot h4{font-family:var(--lk-font-body);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--lk-txt3);font-weight:700;margin-bottom:13px}
.mk-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.mk-foot a{font-size:13.5px;color:var(--lk-txt2);transition:color .18s}
.mk-foot a:hover{color:var(--lk-orange)}
/* A fixed 220px brand column plus an auto-fit track cannot fit a phone: the
   repeat still lays down one 130px column and the row overflows. Below the
   tablet breakpoint the brand spans the full width and the links go 2-up. */
@media(max-width:760px){
  .mk-foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 22px}
  .mk-foot-brand{grid-column:1/-1}
}
@media(max-width:420px){ .mk-foot-grid{grid-template-columns:minmax(0,1fr)} }
.mk-foot-bottom{margin-top:42px;padding-top:22px;border-top:1px solid var(--lk-border);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
  font-size:12.5px;color:var(--lk-txt3)}

/* ---------------------------------------------- SMALL-SCREEN POLISH ---- */
@media(max-width:600px){
  .mk-card{padding:20px}
  .mk-plan{padding:22px}
  .mk-ui-body{padding:14px}
  .mk-hero-actions .mk-btn{width:100%}
  .mk-rank{max-width:100%}
  .mk-final{border-radius:20px}
}
@media(max-width:380px){
  :root{--mk-gutter:16px}
  .mk-logo-sub{display:none}
}

/* ============================================================================
   HERO FLAGSHIP BAND — the two tools that produce the deliverable
   ----------------------------------------------------------------------------
   The radar answers "where is the opportunity". These two answer "and then
   what" — the Architect builds the site, the Forge fills it. They sit directly
   under the radar because that is the order the work happens in, and because
   they are the two things a visitor is actually buying.
   ========================================================================== */
.mk-hero-in{align-items:start}
/* lifts the dial out of the vertical centre so it reads as an instrument
   mounted at the top of the panel, and leaves room for the band below */
.mk-hero-side{margin-top:clamp(-64px,-4.2vw,-12px)}
.mk-hero-copy{padding-top:clamp(0px,1.4vw,18px)}

.mk-duo{grid-column:1/-1;margin-top:clamp(46px,6vw,78px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.mk-duo-lead{grid-column:1/-1;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding-bottom:6px}
.mk-duo-lead b{font-family:var(--lk-font-display);font-size:clamp(18px,2.1vw,23px);letter-spacing:-.02em}
.mk-duo-lead span{font-family:var(--lk-font-mono);font-size:11.5px;color:var(--lk-txt3);
  letter-spacing:.06em}

/* a flagship card: heavier than .mk-card on purpose — this is the top of the
   hierarchy on the page and has to look like it */
.mk-flag{position:relative;overflow:hidden;border-radius:var(--mk-radius-lg);
  border:1px solid var(--lk-border);background:var(--lk-card);
  padding:26px 26px 24px;display:flex;flex-direction:column;
  box-shadow:var(--lk-shadow-md);
  transition:transform .26s,border-color .26s,box-shadow .26s}
.mk-flag:hover{transform:translateY(-5px);box-shadow:var(--lk-shadow-lg)}
/* the lit top edge is the whole signature — one hairline of the tool's colour */
.mk-flag::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--f-accent),transparent);opacity:.9}
.mk-flag::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(520px 220px at 20% 0%,
    color-mix(in srgb,var(--f-accent) 13%,transparent),transparent 70%)}
.mk-flag>*{position:relative;z-index:1}
.mk-flag.a-orange{--f-accent:var(--lk-orange)}
.mk-flag.a-magenta{--f-accent:var(--lk-magenta)}
.mk-flag:hover{border-color:color-mix(in srgb,var(--f-accent) 45%,transparent)}

.mk-flag-head{display:flex;align-items:center;gap:13px}
.mk-flag-ico{width:44px;height:44px;flex:0 0 auto;border-radius:13px;display:flex;
  align-items:center;justify-content:center;color:var(--f-accent);
  background:color-mix(in srgb,var(--f-accent) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--f-accent) 30%,transparent)}
.mk-flag-ico svg{width:21px;height:21px}
.mk-flag-kicker{display:block;font-family:var(--lk-font-mono);font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--f-accent);opacity:.95}
.mk-flag h3{font-size:clamp(19px,2.2vw,23px);margin-top:3px;letter-spacing:-.02em}
.mk-flag p{color:var(--lk-txt2);font-size:14px;line-height:1.72;margin-top:14px}

/* the flow rail — four beats of the pipeline, in the tool's own colour */
.mk-flag-flow{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:18px}
.mk-flag-flow span{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  border:1px solid var(--lk-border);background:var(--lk-surface);
  font-family:var(--lk-font-mono);font-size:10.5px;color:var(--lk-txt2);white-space:nowrap}
.mk-flag-flow span b{width:5px;height:5px;border-radius:50%;background:var(--f-accent);display:block}
.mk-flag-flow i{width:12px;height:1px;background:var(--lk-border);display:block;flex:0 0 auto}

.mk-flag-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
  margin-top:auto;padding-top:22px}
.mk-flag-stat{background:var(--lk-surface);border:1px solid var(--lk-border);border-radius:12px;
  padding:11px 12px}
.mk-flag-stat b{display:block;font-family:var(--lk-font-display);font-size:19px;line-height:1.15;
  letter-spacing:-.02em}
.mk-flag-stat span{display:block;font-family:var(--lk-font-mono);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--lk-txt3);margin-top:4px}
.mk-flag-link{display:inline-flex;align-items:center;gap:7px;margin-top:20px;
  font-size:13.5px;font-weight:650;color:var(--f-accent)}
.mk-flag-link svg{width:15px;height:15px;transition:transform .2s}
.mk-flag:hover .mk-flag-link svg{transform:translateX(3px)}

@media(max-width:900px){
  .mk-hero-side{margin-top:0}
  .mk-hero-copy{padding-top:0}
  .mk-duo{margin-top:clamp(34px,5vw,54px)}
}
@media(max-width:720px){ .mk-duo{grid-template-columns:minmax(0,1fr)} }
@media(max-width:420px){ .mk-flag-stats{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ============================================================================
   CONTENT FORGE — the research→brief→outline→article pipeline
   ----------------------------------------------------------------------------
   Drawn as recreated product UI rather than a screenshot, for the same reason
   the rest of the page is: it stays crisp, follows the theme, and every label
   in it is real text a crawler and a screen reader can read.
   ========================================================================== */
.mk-cf{--cf:var(--lk-magenta)}
.mk-cf-stage{position:relative}
.mk-cf-steps{display:flex;align-items:center;gap:0;overflow-x:auto;scrollbar-width:none;
  padding:14px 16px;border-bottom:1px solid var(--lk-border);background:var(--lk-surface)}
.mk-cf-steps::-webkit-scrollbar{display:none}
.mk-cf-step{display:flex;align-items:center;gap:8px;flex:0 0 auto;
  font-family:var(--lk-font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--lk-txt3)}
.mk-cf-step b{width:19px;height:19px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:9.5px;border:1px solid var(--lk-border);
  background:var(--lk-card);color:var(--lk-txt3)}
.mk-cf-step.on{color:var(--lk-txt)}
.mk-cf-step.on b{background:var(--cf);border-color:var(--cf);color:#fff}
.mk-cf-tie{width:22px;height:1px;background:var(--lk-border);flex:0 0 auto;margin:0 10px}

.mk-cf-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;padding:16px}
.mk-cf-pane{background:var(--lk-surface);border:1px solid var(--lk-border);border-radius:14px;padding:14px}
.mk-cf-pane-h{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-family:var(--lk-font-mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--lk-txt3);margin-bottom:12px}
.mk-cf-pane-h em{font-style:normal;color:var(--cf)}

/* SERP read — the pages the research actually opened */
.mk-cf-src{display:grid;gap:8px}
.mk-cf-src li{list-style:none;display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:9px;
  align-items:center;padding:8px 10px;border-radius:10px;background:var(--lk-card);
  border:1px solid var(--lk-border)}
.mk-cf-src li>i{width:18px;height:18px;border-radius:6px;display:flex;align-items:center;
  justify-content:center;font-family:var(--lk-font-mono);font-size:9px;font-style:normal;
  background:var(--lk-orange-soft);color:var(--mk-chip-o)}
.mk-cf-src b{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-cf-src small{display:block;font-family:var(--lk-font-mono);font-size:10px;color:var(--lk-txt3);margin-top:1px}
.mk-cf-src u{text-decoration:none;font-family:var(--lk-font-mono);font-size:10.5px;color:var(--mk-chip-g);
  white-space:nowrap}
/* the read sweeps down the list once, so the panel looks like it is working */
.mk-cf-src li{animation:mkCfRead 6s ease-in-out infinite}
.mk-cf-src li:nth-child(2){animation-delay:.5s}
.mk-cf-src li:nth-child(3){animation-delay:1s}
.mk-cf-src li:nth-child(4){animation-delay:1.5s}
@keyframes mkCfRead{0%,60%,100%{border-color:var(--lk-border)}
  20%,40%{border-color:color-mix(in srgb,var(--cf) 48%,transparent)}}

/* brief panel — the decisions the research produced */
.mk-cf-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px}
.mk-cf-fact{background:var(--lk-card);border:1px solid var(--lk-border);border-radius:10px;padding:9px 11px}
.mk-cf-fact span{display:block;font-family:var(--lk-font-mono);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--lk-txt3)}
.mk-cf-fact b{display:block;font-size:13px;margin-top:3px}
.mk-cf-out{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.mk-cf-out li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;align-items:baseline;
  font-size:12.5px;color:var(--lk-txt2);line-height:1.55}
.mk-cf-out li i{font-style:normal;font-family:var(--lk-font-mono);font-size:9.5px;color:var(--cf)}
.mk-cf-out li.sub{padding-left:16px;color:var(--lk-txt3);font-size:12px}

/* the finished piece */
.mk-cf-paper{margin:0 16px 16px;background:var(--lk-card);border:1px solid var(--lk-border);
  border-radius:14px;padding:18px 20px;position:relative;overflow:hidden}
.mk-cf-paper::after{content:'';position:absolute;left:0;right:0;bottom:0;height:52px;
  background:linear-gradient(180deg,transparent,var(--lk-card))}
.mk-cf-paper h4{font-family:var(--lk-font-display);font-size:17px;letter-spacing:-.02em}
.mk-cf-paper .by{font-family:var(--lk-font-mono);font-size:10px;color:var(--lk-txt3);margin-top:5px;
  letter-spacing:.06em}
.mk-cf-lines{display:grid;gap:7px;margin-top:14px}
.mk-cf-lines i{display:block;height:6px;border-radius:99px;background:var(--lk-surface)}
.mk-cf-lines i:nth-child(2){width:94%}
.mk-cf-lines i:nth-child(3){width:88%}
.mk-cf-lines i.h{height:9px;width:46%;background:linear-gradient(90deg,
  color-mix(in srgb,var(--cf) 45%,transparent),color-mix(in srgb,var(--cf) 12%,transparent));margin-top:6px}
.mk-cf-lines i:nth-child(6){width:91%}
.mk-cf-lines i:nth-child(7){width:70%}
.mk-cf-foot{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}

/* the four beats, as cards under the stage */
.mk-cf-beats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:26px}
.mk-cf-beat{position:relative;background:var(--lk-card);border:1px solid var(--lk-border);
  border-radius:var(--mk-radius);padding:22px;overflow:hidden;transition:border-color .22s,transform .22s}
.mk-cf-beat:hover{border-color:color-mix(in srgb,var(--cf) 42%,transparent);transform:translateY(-4px)}
.mk-cf-beat>b{font-family:var(--lk-font-mono);font-size:10.5px;letter-spacing:.14em;color:var(--cf)}
.mk-cf-beat h3{font-size:17px;margin-top:9px}
.mk-cf-beat p{color:var(--lk-txt2);font-size:13.5px;line-height:1.7;margin-top:9px}

@media(max-width:820px){ .mk-cf-body{grid-template-columns:minmax(0,1fr)} }
@media(max-width:520px){ .mk-cf-facts{grid-template-columns:minmax(0,1fr)} }
@media(prefers-reduced-motion:reduce){ .mk-cf-src li{animation:none} }

/* ============================================================================
   SUB-PAGE HERO — features / compare / pricing / faq
   ----------------------------------------------------------------------------
   Lighter than the homepage hero on purpose: those pages are read, not sold to
   on first sight, so the ambient field is dimmer and the type scale is smaller.
   ========================================================================== */
.mk-phero{position:relative;overflow:hidden;padding:clamp(52px,7vw,96px) 0 clamp(34px,4.5vw,58px);
  text-align:center}
.mk-phero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 420px at 50% -12%,var(--mk-hero-glow-a),transparent 68%)}
.mk-phero::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.42;
  background-image:linear-gradient(var(--mk-grid-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--mk-grid-line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 20%,#000,transparent 74%);
          mask-image:radial-gradient(ellipse 70% 70% at 50% 20%,#000,transparent 74%)}
.mk-phero>*{position:relative;z-index:1}
.mk-phero h1{font-size:clamp(32px,5vw,58px);letter-spacing:-.032em;margin:18px auto 0;max-width:17ch}
.mk-phero p{margin:18px auto 0;max-width:62ch;color:var(--lk-txt2);
  font-size:clamp(15px,1.5vw,17.5px);line-height:1.75}
.mk-phero .mk-hero-actions{justify-content:center}
.mk-crumb{display:inline-flex;align-items:center;gap:8px;font-family:var(--lk-font-mono);
  font-size:11px;color:var(--lk-txt3);margin-bottom:4px}
.mk-crumb a{color:var(--lk-txt3)}
.mk-crumb a:hover{color:var(--lk-orange)}

/* ============================================================================
   PRICING — plans, the credit ledger, and the full capability matrix
   ========================================================================== */
/* billing switch */
.mk-bill-toggle{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:12px;
  background:var(--lk-card);border:1px solid var(--lk-border);margin-top:26px}
.mk-bill-toggle button{border:0;background:transparent;color:var(--lk-txt2);cursor:pointer;
  padding:9px 18px;border-radius:9px;font-size:13.5px;font-weight:650;
  transition:background .2s,color .2s;display:inline-flex;align-items:center;gap:8px}
.mk-bill-toggle button[aria-pressed="true"]{background:linear-gradient(120deg,var(--lk-orange),var(--lk-magenta));
  color:#fff}
.mk-bill-toggle .save{font-family:var(--lk-font-mono);font-size:10px;letter-spacing:.06em;
  padding:2px 7px;border-radius:99px;background:color-mix(in srgb,var(--lk-green) 16%,transparent);
  color:var(--mk-chip-g);border:1px solid color-mix(in srgb,var(--lk-green) 34%,transparent)}
.mk-bill-toggle button[aria-pressed="true"] .save{background:rgba(255,255,255,.22);color:#fff;
  border-color:rgba(255,255,255,.4)}

/* four plans need a tighter track than the homepage's three */
.mk-plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.mk-plans .mk-plan{display:flex;flex-direction:column;padding:26px 24px}
.mk-plans .mk-plan ul{flex:1}
/* three plans: a narrower grid so the cards keep the width of the four-up layout */
.mk-plans.three{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1060px;margin-inline:auto}
@media(max-width:1080px){ .mk-plans,.mk-plans.three{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:620px){ .mk-plans,.mk-plans.three{grid-template-columns:minmax(0,1fr)} }

/* the credit allowance sits above the feature list — it is the real unit of value */
.mk-plan-credits{margin:16px 0 18px;padding:13px 14px;border-radius:13px;
  background:var(--lk-surface);border:1px solid var(--lk-border)}
.mk-plan.best .mk-plan-credits{border-color:color-mix(in srgb,var(--lk-orange) 34%,transparent)}
.mk-plan-credits b{display:block;font-family:var(--lk-font-display);font-size:25px;line-height:1.1;
  letter-spacing:-.025em}
.mk-plan-credits span{display:block;font-family:var(--lk-font-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--lk-txt3);margin-top:4px}
.mk-plan-credits em{display:block;font-style:normal;font-size:12px;color:var(--lk-txt2);margin-top:7px;
  line-height:1.55}
.mk-plan-seats{font-family:var(--lk-font-mono);font-size:11px;color:var(--lk-txt3);
  margin:-10px 0 4px}
.mk-plan li.muted{color:var(--lk-txt3)}
.mk-plan li.muted svg{color:var(--lk-txt3);opacity:.6}
.mk-plan-price s{color:var(--lk-txt3);font-family:var(--lk-font-mono);font-size:15px;
  text-decoration-thickness:1px;margin-right:2px}

/* enterprise strip */
.mk-enterprise{margin-top:18px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  background:linear-gradient(120deg,var(--lk-violet-soft),transparent 60%),var(--lk-card);
  border:1px solid color-mix(in srgb,var(--lk-violet) 30%,transparent);
  border-radius:var(--mk-radius-lg);padding:26px 28px}
.mk-enterprise h3{font-size:20px}
.mk-enterprise p{color:var(--lk-txt2);font-size:14px;margin-top:8px;max-width:64ch;line-height:1.7}
.mk-enterprise .mk-btn{margin-left:auto;flex:0 0 auto}
@media(max-width:720px){ .mk-enterprise .mk-btn{margin-left:0;width:100%} }

/* ---- the credit ledger: what one run of each tool actually costs --------- */
.mk-ledger{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:820px){ .mk-ledger{grid-template-columns:minmax(0,1fr)} }
.mk-ledger-group{background:var(--lk-card);border:1px solid var(--lk-border);
  border-radius:var(--mk-radius);padding:20px 22px}
.mk-ledger-group>h3{font-size:15px;display:flex;align-items:center;gap:9px;
  padding-bottom:13px;border-bottom:1px solid var(--lk-border)}
.mk-ledger-group>h3 i{width:8px;height:8px;border-radius:50%;background:var(--l-accent,var(--lk-orange));
  display:block;flex:0 0 auto}
.mk-ledger-list{list-style:none;margin:0;padding:0;display:grid}
.mk-ledger-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--lk-border)}
.mk-ledger-list li:last-child{border-bottom:0;padding-bottom:0}
.mk-ledger-list b{font-size:13.5px;font-weight:600}
.mk-ledger-list small{display:block;font-size:12px;color:var(--lk-txt3);margin-top:2px;line-height:1.5}
.mk-ledger-list u{text-decoration:none;font-family:var(--lk-font-mono);font-size:12px;font-weight:600;
  color:var(--lk-txt);white-space:nowrap;
  background:var(--lk-surface);border:1px solid var(--lk-border);border-radius:8px;padding:4px 9px}
.mk-ledger-list u.free{color:var(--mk-chip-g);border-color:color-mix(in srgb,var(--lk-green) 34%,transparent);
  background:color-mix(in srgb,var(--lk-green) 10%,transparent)}

/* ---- estimator ---------------------------------------------------------- */
.mk-est{background:var(--lk-card);border:1px solid var(--lk-border);border-radius:var(--mk-radius-lg);
  padding:clamp(22px,3.4vw,34px);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(24px,4vw,44px);align-items:start}
.mk-est-rows{display:grid;gap:18px}
.mk-est-row label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:14px;font-weight:600;margin-bottom:9px}
.mk-est-row label span{font-family:var(--lk-font-mono);font-size:12px;color:var(--lk-txt3);font-weight:500}
.mk-est-row label span b{color:var(--lk-orange);font-size:13px}
.mk-est-row input[type=range]{width:100%;height:5px;border-radius:99px;appearance:none;-webkit-appearance:none;
  background:linear-gradient(90deg,var(--lk-orange) var(--p,0%),var(--lk-surface) var(--p,0%));
  border:1px solid var(--lk-border);cursor:pointer}
.mk-est-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;
  border-radius:50%;background:var(--lk-card);border:2px solid var(--lk-orange);cursor:pointer;
  box-shadow:var(--lk-shadow-sm)}
.mk-est-row input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;
  background:var(--lk-card);border:2px solid var(--lk-orange);cursor:pointer}
.mk-est-out{background:var(--lk-surface);border:1px solid var(--lk-border);border-radius:var(--mk-radius);
  padding:22px;position:sticky;top:96px}
.mk-est-total{font-family:var(--lk-font-display);font-size:clamp(34px,4.6vw,46px);line-height:1;
  letter-spacing:-.03em}
.mk-est-out .cap{font-family:var(--lk-font-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--lk-txt3);margin-top:7px;display:block}
.mk-est-plan{margin-top:20px;padding-top:18px;border-top:1px solid var(--lk-border)}
.mk-est-plan span{font-family:var(--lk-font-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--lk-txt3);display:block}
.mk-est-plan b{display:block;font-family:var(--lk-font-display);font-size:24px;margin-top:6px;
  letter-spacing:-.02em}
.mk-est-plan em{display:block;font-style:normal;font-size:13px;color:var(--lk-txt2);margin-top:8px;
  line-height:1.6}
.mk-est-bar{height:6px;border-radius:99px;background:var(--lk-card);border:1px solid var(--lk-border);
  overflow:hidden;margin-top:16px}
.mk-est-bar i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--lk-orange),var(--lk-magenta));transition:width .35s ease}
@media(max-width:880px){ .mk-est{grid-template-columns:minmax(0,1fr)} .mk-est-out{position:static} }

/* ---- capability matrix -------------------------------------------------- */
.mk-matrix{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
.mk-matrix th,.mk-matrix td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--lk-border)}
.mk-matrix thead th{font-family:var(--lk-font-mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--lk-txt3);font-weight:600;white-space:nowrap;
  position:sticky;top:72px;background:var(--lk-void);z-index:2}
.mk-matrix .grp th{font-family:var(--lk-font-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mk-violet-text);background:var(--lk-surface);
  border-top:1px solid var(--lk-border)}
.mk-matrix tbody th{font-weight:600;color:var(--lk-txt)}
.mk-matrix tbody th small{display:block;font-weight:400;font-size:12px;color:var(--lk-txt3);margin-top:2px}
.mk-matrix td{color:var(--lk-txt2);text-align:center;white-space:nowrap}
.mk-matrix td.on{color:var(--mk-chip-g)}
.mk-matrix td.off{color:var(--lk-txt3);opacity:.55}
.mk-matrix col.hl{background:var(--lk-violet-soft)}
.mk-matrix thead th.hl{color:var(--lk-orange)}
.mk-tick{width:16px;height:16px;display:inline-block;vertical-align:-3px}
@media(max-width:760px){ .mk-matrix thead th{position:static} }

/* ---- top-ups ------------------------------------------------------------ */
.mk-topups{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.mk-topup{background:var(--lk-card);border:1px solid var(--lk-border);border-radius:var(--mk-radius);
  padding:22px;text-align:center;transition:border-color .22s,transform .22s}
.mk-topup:hover{border-color:var(--lk-border-hover);transform:translateY(-4px)}
.mk-topup b{display:block;font-family:var(--lk-font-display);font-size:27px;letter-spacing:-.025em}
.mk-topup span{display:block;font-family:var(--lk-font-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--lk-txt3);margin-top:5px}
.mk-topup em{display:block;font-style:normal;font-size:20px;font-weight:700;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--lk-border)}
.mk-topup small{display:block;font-size:12px;color:var(--lk-txt3);margin-top:5px}

/* the active page in the primary nav, so a visitor always knows where they are */
.mk-nav a[aria-current="page"]{color:var(--lk-txt);background:var(--lk-violet-soft);
  box-shadow:inset 0 -2px 0 var(--lk-orange)}

/* ============================================================================
   FEATURES — the tool encyclopedia
   ----------------------------------------------------------------------------
   Every card here names a tool that exists in the product and carries the plan
   it needs and what one run costs, so the page is a reference rather than a
   brochure. lib/admin/tool-registry.js is the source of truth for the names.
   ========================================================================== */
.mk-jump{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:28px}
.mk-jump a{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;
  border:1px solid var(--lk-border);background:var(--lk-card);
  font-family:var(--lk-font-mono);font-size:11.5px;color:var(--lk-txt2);
  transition:border-color .2s,color .2s,transform .2s}
.mk-jump a:hover{border-color:var(--lk-border-hover);color:var(--lk-txt);transform:translateY(-2px)}
.mk-jump a i{width:7px;height:7px;border-radius:50%;background:var(--j,var(--lk-orange));display:block}

/* a family of tools, introduced then listed */
.mk-fam{padding-top:clamp(40px,5vw,64px)}
.mk-fam-head{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;
  padding-bottom:20px;border-bottom:1px solid var(--lk-border)}
.mk-fam-head .n{font-family:var(--lk-font-mono);font-size:11px;letter-spacing:.16em;
  color:var(--f-accent,var(--lk-orange))}
.mk-fam-head h2{font-size:clamp(24px,3.2vw,36px);margin-top:8px;max-width:20ch}
.mk-fam-head p{color:var(--lk-txt2);font-size:14.5px;line-height:1.75;max-width:54ch;margin-left:auto}

.mk-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:22px}
.mk-tool{position:relative;display:flex;flex-direction:column;background:var(--lk-card);
  border:1px solid var(--lk-border);border-radius:var(--mk-radius);padding:22px;
  transition:border-color .22s,transform .22s,box-shadow .22s}
.mk-tool:hover{border-color:color-mix(in srgb,var(--f-accent,var(--lk-orange)) 42%,transparent);
  transform:translateY(-4px);box-shadow:var(--lk-shadow-md)}
.mk-tool-top{display:flex;align-items:flex-start;gap:12px}
.mk-tool-ico{width:38px;height:38px;flex:0 0 auto;border-radius:11px;display:flex;align-items:center;
  justify-content:center;color:var(--f-accent,var(--lk-orange));
  background:color-mix(in srgb,var(--f-accent,var(--lk-orange)) 11%,transparent);
  border:1px solid color-mix(in srgb,var(--f-accent,var(--lk-orange)) 26%,transparent)}
.mk-tool-ico svg{width:19px;height:19px}
.mk-tool h3{font-size:16.5px;letter-spacing:-.015em}
.mk-tool p{color:var(--lk-txt2);font-size:13.5px;line-height:1.72;margin-top:11px;flex:1}
.mk-tool-meta{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--lk-border)}
.mk-plan-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  font-family:var(--lk-font-mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  border:1px solid var(--lk-border);background:var(--lk-surface);color:var(--lk-txt3)}
.mk-plan-tag.free{color:var(--mk-chip-g);border-color:color-mix(in srgb,var(--lk-green) 34%,transparent)}
.mk-plan-tag.starter{color:var(--mk-violet-text);border-color:color-mix(in srgb,var(--lk-violet) 34%,transparent)}
.mk-plan-tag.pro{color:var(--mk-chip-o);border-color:color-mix(in srgb,var(--lk-orange) 34%,transparent)}
.mk-cost-tag{margin-left:auto;font-family:var(--lk-font-mono);font-size:10.5px;color:var(--lk-txt3);
  white-space:nowrap}
.mk-cost-tag b{color:var(--lk-txt2)}

/* the two flagship tools get a wide, illustrated block rather than a card */
.mk-hero-tool{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(26px,4vw,52px);align-items:center;margin-top:26px}
.mk-hero-tool.rev>*:first-child{order:2}
@media(max-width:900px){ .mk-hero-tool{grid-template-columns:minmax(0,1fr)} .mk-hero-tool.rev>*:first-child{order:0} }
.mk-hero-tool h3{font-size:clamp(21px,2.6vw,28px);margin-top:14px}
.mk-hero-tool .mk-lead{font-size:15px}
.mk-bullets{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:13px}
.mk-bullets li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;
  font-size:14px;color:var(--lk-txt2);line-height:1.7}
.mk-bullets li svg{width:19px;height:19px;color:var(--f-accent,var(--lk-orange));margin-top:2px}
.mk-bullets li b{color:var(--lk-txt);font-weight:650}
@media(max-width:880px){ .mk-fam-head p{margin-left:0} }

/* ============================================================================
   COMPARE — the stack you are replacing
   ========================================================================== */
.mk-stack{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(18px,3vw,34px);
  align-items:center}
@media(max-width:880px){ .mk-stack{grid-template-columns:minmax(0,1fr)} }
.mk-stack-col{background:var(--lk-card);border:1px solid var(--lk-border);
  border-radius:var(--mk-radius-lg);padding:26px}
.mk-stack-col.own{border-color:color-mix(in srgb,var(--lk-orange) 44%,transparent);
  background:linear-gradient(165deg,var(--lk-orange-soft),transparent 48%),var(--lk-card);
  box-shadow:var(--lk-shadow-lg)}
.mk-stack-col>h3{font-size:18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.mk-stack-col>p{color:var(--lk-txt3);font-family:var(--lk-font-mono);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;margin-top:6px}
.mk-stack-list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:9px}
.mk-stack-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:baseline;
  padding:10px 12px;border-radius:11px;background:var(--lk-surface);border:1px solid var(--lk-border);
  font-size:13.5px}
.mk-stack-list li span{color:var(--lk-txt2)}
.mk-stack-list li u{text-decoration:none;font-family:var(--lk-font-mono);font-size:12px;
  color:var(--lk-txt3);white-space:nowrap}
.mk-stack-col.own .mk-stack-list li{background:color-mix(in srgb,var(--lk-void) 30%,transparent)}
.mk-stack-col.own .mk-stack-list li u{color:var(--mk-chip-g)}
.mk-stack-total{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin-top:20px;padding-top:16px;border-top:1px solid var(--lk-border)}
.mk-stack-total span{font-family:var(--lk-font-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--lk-txt3)}
.mk-stack-total b{font-family:var(--lk-font-display);font-size:clamp(26px,3.4vw,34px);
  letter-spacing:-.03em;line-height:1}
.mk-stack-vs{display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;flex:0 0 auto;margin-inline:auto;
  border:1px solid var(--lk-border);background:var(--lk-surface);
  font-family:var(--lk-font-mono);font-size:12px;color:var(--lk-txt3)}

/* an honest note block — used where the fair answer is "not us" */
.mk-honest{border-left:2px solid var(--lk-orange);padding:2px 0 2px 20px;margin-top:18px}
.mk-honest h3{font-size:16px}
.mk-honest p{color:var(--lk-txt2);font-size:14px;line-height:1.75;margin-top:8px}

/* ============================================================================
   FAQ PAGE — filterable, but readable with JavaScript off
   ----------------------------------------------------------------------------
   The search field and the category chips are progressive enhancement: with no
   JS every question is present and open-able, and the chips are ordinary
   in-page anchors.
   ========================================================================== */
.mk-faq-search{position:relative;max-width:520px;margin:26px auto 0}
.mk-faq-search input{width:100%;height:50px;padding:0 18px 0 46px;border-radius:14px;
  border:1px solid var(--lk-border);background:var(--lk-card);color:var(--lk-txt);
  font:inherit;font-size:15px;transition:border-color .2s,box-shadow .2s}
.mk-faq-search input::placeholder{color:var(--lk-txt3)}
.mk-faq-search input:focus{outline:none;border-color:var(--lk-border-hover);
  box-shadow:0 0 0 3px var(--lk-orange-soft)}
.mk-faq-search svg{position:absolute;left:16px;top:16px;width:18px;height:18px;color:var(--lk-txt3);
  pointer-events:none}
.mk-faq-cats{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:20px}
.mk-faq-cats a,.mk-faq-cats button{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;
  border-radius:999px;border:1px solid var(--lk-border);background:var(--lk-card);cursor:pointer;
  font-family:var(--lk-font-mono);font-size:11.5px;color:var(--lk-txt2);
  transition:border-color .2s,color .2s,background .2s}
.mk-faq-cats a:hover,.mk-faq-cats button:hover{border-color:var(--lk-border-hover);color:var(--lk-txt)}
.mk-faq-cats [aria-pressed="true"]{background:var(--lk-orange-soft);color:var(--mk-chip-o);
  border-color:color-mix(in srgb,var(--lk-orange) 44%,transparent)}
.mk-faq-group{margin-top:clamp(34px,4.5vw,54px)}
.mk-faq-group>h2{font-size:clamp(20px,2.4vw,26px);max-width:820px;margin-inline:auto;
  display:flex;align-items:center;gap:11px;margin-bottom:16px}
.mk-faq-group>h2 i{width:8px;height:8px;border-radius:50%;background:var(--g,var(--lk-orange));display:block;
  flex:0 0 auto}
.mk-faq-empty{max-width:820px;margin:28px auto 0;text-align:center;color:var(--lk-txt2);font-size:14.5px}
.mk-faq mark{background:color-mix(in srgb,var(--lk-orange) 26%,transparent);color:inherit;
  border-radius:3px;padding:0 2px}
/* the breadcrumb is its own line above the eyebrow, not a sibling chip beside it */
.mk-phero .mk-crumb{display:flex;justify-content:center;margin:0 0 16px}
/* the tick and the sentence are one flex item each — without the span an inline
   <strong> in the copy would become a third item and split the line in two */
.mk-plan li>span{min-width:0}
/* the four cards align their feature lists even though the summaries differ in
   length, so a reader compares like with like across the row */
.mk-plans .mk-plan-desc{min-height:60px}
.mk-plans .mk-plan-credits{min-height:132px}
.mk-plans .mk-plan-seats{min-height:32px}
@media(max-width:1080px){
  .mk-plans .mk-plan-desc,.mk-plans .mk-plan-credits,.mk-plans .mk-plan-seats{min-height:0}
}