/* MrKeyword marketing pages design system (about, pricing, features, AI SEO, developers, free tools,
   FAQ, security, contact, 404, legal). The HOME PAGE does not load this file — it has its own
   /landing.css, which is the approved design and must stay untouchable from here.
   This file borrows that design's language so the site reads as one brand: the same lavender/mint
   gradient in page heroes, indigo accents and links, green ticks, #e8eaf1 hairlines, 18px cards,
   Plus Jakarta Sans display face and the Caveat handwriting accent.
   The one deliberate exception is the product mock kit (.mkm-*): those frames imitate the signed-in
   app, which uses the same indigo / lavender / mint / green as this site, so the mock tokens below map to it. */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400 800;font-display:swap;src:url("/fonts/plus-jakarta-sans-latin-var.woff2") format("woff2")}

.marketing-shell{overflow-x:clip;background:#fff}
.mk-landing{
  --pad:clamp(20px,6vw,128px);--section:clamp(76px,8.4vw,152px);
  /* Palette: identical to /landing.css so a visitor cannot tell where one stylesheet ends. */
  --ink:#0a0c15;--text:#2b3040;--muted:#5a6175;--soft:#5f6678;
  --line:#e8eaf1;--hair:#f1f2f6;--soft-bg:#f4f4f8;--band:#f8f8fb;--tint:#f0effe;
  /* --soft is a shade deeper than the home page's #737a8e so eyebrows and captions clear 4.5:1
     on white, --band and --tint alike; every other token is identical. */
  --indigo:#4338ca;--indigo-deep:#3f37c9;--indigo-soft:#eeeefe;--green:#16a34a;--green-soft:#e7f6ec;
  /* Mock-only accents: the colours the signed-in app actually uses, scoped to .mkm-* frames. */
  --lime:#4338ca;--lime-deep:#3730a3;--lime-ink:#3730a3;--lime-soft:#f0effe;
  --yellow:#b4aef5;--yellow-soft:#f0effe;--orange:#8fd9bf;--orange-soft:#e3f6ee;
  --up:#16a34a;--down:#d92d20;
  --display:"Plus Jakarta Sans","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#fff;color:var(--ink);font-family:var(--rf-font);font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility
}
.mk-hand{margin:0;color:#1b1f2e;font-family:"Caveat","Bradley Hand",cursive;font-weight:500;line-height:1.02}
.mk-wrap{width:100%;max-width:1760px;margin-inline:auto;padding-inline:var(--pad)}
.mk-landing img{display:block;max-width:100%}
.mk-landing h1,.mk-landing h2,.mk-landing h3{color:var(--ink);text-wrap:balance}
.mk-landing :is(h1,h2,h3,.mk-price b,.mk-num,.mkm-num,.mkm-rail b,.mk-step-num){font-family:var(--display)}
.mk-landing :is(a,button,summary,input):focus-visible{outline:2px solid var(--indigo);outline-offset:3px;border-radius:4px}
.mk-landing .hatch{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.28) 0 2px,transparent 2px 6px)}

/* ------------------------------------------------------------- buttons */
.mk-black-button,.mk-outline-button,.mk-white-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 24px;border:1px solid var(--ink);border-radius:11px;background:var(--ink);color:#fff;font:inherit;font-size:15.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background .18s,border-color .18s,transform .18s}
.mk-black-button:hover{border-color:#272b3c;background:#272b3c}
.mk-black-button:active,.mk-outline-button:active,.mk-white-button:active{transform:translateY(1px)}
.mk-black-button svg,.mk-link-button svg{width:18px;height:18px;flex:none;transition:transform .18s}
.mk-black-button:hover svg,.mk-link-button:hover svg{transform:translateX(3px)}
.mk-outline-button{border-color:#dcdfe8;background:#fff;color:var(--ink)}
.mk-outline-button:hover{border-color:var(--ink)}
.mk-white-button{border-color:#fff;background:#fff;color:var(--ink)}
.mk-white-button:hover{background:#eeeefe}
.mk-link-button{display:inline-flex;align-items:center;gap:8px;padding:0 0 3px;border:0;border-bottom:1.5px solid var(--ink);background:none;color:var(--ink);font:inherit;font-size:15.5px;font-weight:600;cursor:pointer}

/* ------------------------------------------------------ small elements */
.mk-eyebrow{display:block;color:var(--soft);font-size:clamp(12px,.82vw,13.5px);font-weight:650;letter-spacing:.13em;text-transform:uppercase}
.mk-icon{display:inline-grid;place-items:center;width:clamp(48px,3.6vw,60px);height:clamp(48px,3.6vw,60px);border-radius:14px;background:var(--tint);color:var(--indigo-deep)}
.mk-icon svg{width:46%;height:46%}
/* The four icon tones from the approved page: lilac, mint, sky and neutral. */
.mk-icon.yellow{background:var(--green-soft);color:#146c34}
.mk-icon.orange{background:#eaf1ff;color:#2f6be0}
.mk-icon.soft{background:#f1f2f6;color:#4b5163}
.mk-chip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:999px;background:#f1f2f6;color:#4b5163;font-size:12px;font-weight:600;line-height:1;white-space:nowrap}
.mk-chip svg{width:12px;height:12px}
.mk-chip.lime{background:var(--green-soft);color:#146c34}.mk-chip.yellow{background:#fff3dd;color:#b45309}.mk-chip.orange{background:#eaf1ff;color:#2f6be0}.mk-chip.indigo{background:var(--indigo-soft);color:var(--indigo)}
.mk-checks{display:grid;gap:13px;margin:0;padding:0;list-style:none}
.mk-checks li{display:flex;align-items:flex-start;gap:12px;color:var(--text);font-size:clamp(15.5px,1.05vw,17px);line-height:1.5}
.mk-checks svg{width:21px;height:21px;flex:none;margin-top:1px;color:var(--green)}
.mk-section-head{display:grid;gap:clamp(12px,1.1vw,18px);max-width:760px;margin-bottom:clamp(36px,3.6vw,64px)}
.mk-section-head.center{justify-items:center;margin-inline:auto;text-align:center}
.mk-section-head h2,.mk-ai h2,.mk-faq-head h2{margin:0;font-size:clamp(30px,2.9vw,52px);font-weight:700;line-height:1.08;letter-spacing:-.032em}
.mk-section-head p{max-width:38em;margin:0;color:var(--muted);font-size:clamp(16.5px,1.22vw,20px);line-height:1.55}
.mk-section-head p b{color:var(--ink);font-weight:650}

/* -------------------------------------------------- header / mobile nav */
.mk-top{position:relative}
.mk-ribbon{display:none}
.mk-nav{position:relative;z-index:5;display:flex;align-items:center;gap:clamp(20px,3vw,56px);height:clamp(76px,5.6vw,96px);border-bottom:1px solid transparent}
.mk-wordmark{display:inline-flex;align-items:center;text-decoration:none}
.mk-wordmark img{display:block;width:auto;height:clamp(48px,3.4vw,64px);max-width:min(340px,58vw);object-fit:contain}
.mk-nav nav{display:flex;gap:clamp(20px,2.2vw,38px)}
.mk-nav nav a,.mk-login{color:var(--text);font-size:clamp(14.5px,1vw,15.5px);font-weight:500;text-decoration:none;transition:color .15s}
.mk-nav nav a:hover,.mk-login:hover{color:var(--ink)}
.mk-nav nav a[aria-current="page"]{color:var(--ink);font-weight:600}
.mk-nav-actions{display:flex;align-items:center;gap:clamp(14px,1.6vw,26px);margin-left:auto}
.mk-login{padding:0;border:0;background:none;font-family:inherit;cursor:pointer}
.mk-nav .mk-black-button{height:clamp(40px,2.8vw,46px);padding:0 clamp(16px,1.3vw,22px);font-size:clamp(14px,1vw,15px)}
.mk-nav .dev-button{display:none}
/* Mobile menu: a <details> sheet, so it works with no JavaScript and is keyboard operable by default.
   site.js only adds Escape-to-close and closes it when the viewport grows back. */
.mk-menu{display:none}
.mk-menu>summary{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;list-style:none;cursor:pointer}
.mk-menu>summary::-webkit-details-marker{display:none}
.mk-menu>summary svg{width:20px;height:20px;color:var(--ink)}
.mk-menu>summary .x,.mk-menu[open]>summary .burger{display:none}
.mk-menu[open]>summary .x{display:block}
/* A closed <details> still lays its children out (they are only skipped for painting), and an absolutely
   positioned sheet in that state resolves against the wrong box and widens the page. Take it out of
   layout entirely until it is open. */
.mk-menu:not([open]) .mk-menu-sheet{display:none}
.mk-menu-sheet{position:absolute;top:calc(100% + 10px);right:0;left:0;z-index:20;display:grid;gap:4px;padding:12px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 26px 60px rgba(20,22,28,.12)}
.mk-menu-sheet a{padding:13px 12px;border-radius:11px;color:var(--ink);font-size:16.5px;font-weight:550;text-decoration:none}
.mk-menu-sheet a:hover,.mk-menu-sheet a[aria-current="page"]{background:var(--soft-bg)}
.mk-menu-sheet .mk-black-button{margin-top:6px;height:50px}

/* ---------------------------------------------------------------- hero */
.mk-hero{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:clamp(36px,4.4vw,88px);padding-block:clamp(32px,3.8vw,72px) clamp(52px,5.6vw,104px)}
.mk-hero-copy{display:flex;min-width:0;flex-direction:column;align-items:flex-start}
.mk-kicker{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;background:var(--green-soft);color:#1d7440;font-size:clamp(13px,.92vw,14.5px);font-weight:600}
/* The hero's row of eyebrow chips. The first is filled, the rest are hairline, so the row reads as
   "this, and these are the parts of it" instead of four competing labels. */
.mk-kickers{display:flex;flex-wrap:wrap;gap:8px}
.mk-kickers .mk-kicker{background:#fff;border:1px solid var(--line);color:var(--text);font-weight:600}
.mk-kickers .mk-kicker:first-child{border-color:transparent;background:var(--green-soft);color:#1d7440;font-weight:650}
.mk-hero-copy h1{max-width:11em;margin:clamp(18px,1.6vw,28px) 0 0;font-size:clamp(40px,4vw,72px);font-weight:700;line-height:1.05;letter-spacing:-.035em}
.mk-lead{max-width:28em;margin:clamp(18px,1.6vw,26px) 0 clamp(26px,2.4vw,40px);color:var(--muted);font-size:clamp(17px,1.28vw,21px);line-height:1.52}
.mk-lead b{color:var(--ink);font-weight:600}
.mk-search{display:flex;align-items:center;width:100%;max-width:580px;height:clamp(56px,3.8vw,64px);padding:6px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 12px 30px -16px rgba(20,22,28,.3)}
.mk-search:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(21,23,28,.08)}
.mk-search label{display:flex;align-items:center;gap:12px;min-width:0;flex:1;height:100%;padding:0 12px 0 14px;color:var(--ink)}
.mk-search label svg{width:20px;height:20px;flex:none;color:var(--muted)}
.mk-search input{min-width:0;width:100%;height:100%;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:clamp(15px,1.02vw,16.5px);text-overflow:ellipsis}
.mk-search input::placeholder{color:var(--soft)}
.mk-search .mk-black-button{height:100%;padding:0 clamp(18px,1.6vw,28px);border-radius:10px}
.mk-trust-label{display:block;margin:clamp(30px,3vw,52px) 0 16px;color:var(--soft);font-size:clamp(13px,.92vw,14px)}
.mk-trust{display:flex;flex-wrap:wrap;align-items:center;width:100%;max-width:640px;gap:12px clamp(18px,1.8vw,32px);color:var(--text)}
.mk-trust>span{display:inline-flex;align-items:center;gap:.45em;font-size:clamp(13.5px,.95vw,15.5px);font-weight:600;letter-spacing:-.02em;line-height:1;white-space:nowrap}
.mk-logo-mark{width:1.15em;height:1.15em;flex:none;color:var(--muted)}

/* The hero composite: three mocks overlapping slightly on one soft shadow. */
.mk-stage{position:relative;display:grid;gap:14px;min-width:0}
.mk-stage .mkm-wrap:first-child{filter:drop-shadow(0 30px 80px rgba(20,22,28,.08))}
.mk-stage-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:14px;margin-top:-4px}

/* ---------------------------------------------------- product mock kit */
/* Mock UI made only of HTML/CSS/inline SVG — no screenshots and no image files, so it stays crisp at any
   width. Each mock is aria-hidden and captioned "Sample data": the figures are illustrative. */
.mkm-wrap{position:relative;display:grid;gap:8px;margin:0;min-width:0;animation:mkm-in .55s cubic-bezier(.2,.8,.2,1) both}
.mkm-cap{color:var(--soft);font-size:12px;letter-spacing:.01em}
.mkm{display:grid;align-content:start;gap:14px;min-width:0;padding:18px 20px;border:1px solid var(--line);border-radius:18px;background:#fff}
.mkm *{min-width:0}
.mkm-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.mkm-label{display:block;color:var(--muted);font-size:12.5px;line-height:1.35}
.mkm-num{display:block;margin-top:5px;color:var(--ink);font-size:clamp(30px,2.6vw,40px);font-weight:550;letter-spacing:-.035em;line-height:1}
.mkm-num.sm{font-size:clamp(22px,1.7vw,27px)}
.mkm-up,.mkm-down{display:inline-block;margin-top:6px;color:var(--up);font-size:12.5px;font-style:normal;font-weight:600}
.mkm-down{color:var(--down)}
.mkm-tag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--soft-bg);color:var(--text);font-size:11.5px;font-weight:550;white-space:nowrap}
.mkm-chart{display:block;width:100%;height:auto;margin-top:2px}
.mkm-line{stroke-dasharray:640;stroke-dashoffset:640;animation:mkm-draw 1.6s .15s cubic-bezier(.4,0,.2,1) forwards}
@keyframes mkm-in{from{opacity:0;transform:translateY(10px)}}
@keyframes mkm-draw{to{stroke-dashoffset:0}}

/* Rank hero: one huge number, a trend line, and three stacked stats on the right. */
.mkm-rank{grid-template-columns:minmax(0,1fr) 132px;gap:18px;padding:20px 22px}
.mkm-rank-main{display:grid;align-content:start;gap:6px;min-width:0}
.mkm-rail{display:grid;align-content:start;gap:12px;padding-left:18px;border-left:1px solid var(--hair)}
.mkm-rail>div{display:grid;gap:2px}
.mkm-rail b{color:var(--ink);font-size:19px;font-weight:550;letter-spacing:-.025em}
.mkm-rail em{color:var(--up);font-size:11.5px;font-style:normal;font-weight:600}
.mkm-rail em.dn{color:var(--down)}

/* Biggest movers */
.mkm-list{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.mkm-list li{display:flex;align-items:center;gap:11px;padding:8px 0;border-top:1px solid var(--hair);color:var(--text);font-size:13.5px}
.mkm-list li:first-child{border-top:0}
.mkm-list span{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}
.mkm-list b{color:var(--ink);font-size:13px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.mkm-badge{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:9px;background:var(--lime-soft);color:var(--lime-ink)}
.mkm-badge svg{width:14px;height:14px}
.mkm-badge.dn{background:#fbebe7;color:var(--down)}

/* Position distribution: one hatched segmented bar + a legend */
.mkm-bar{display:flex;height:16px;overflow:hidden;border-radius:6px;background:var(--soft-bg)}
.mkm-bar i{display:block;height:100%}
.mkm-bar i.lime{background-color:var(--lime)}
.mkm-bar i.lime2{background-color:#b4aef5}
.mkm-bar i.yellow{background-color:var(--yellow)}
.mkm-bar i.orange{background-color:var(--orange)}
.mkm-bar i.grey{background-color:#e2e2dd}
.mkm-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 16px;margin:0;padding:0;list-style:none}
.mkm-legend li{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12.5px}
.mkm-legend i{width:10px;height:10px;flex:none;border-radius:3px}
.mkm-legend i.lime{background-color:var(--lime)}.mkm-legend i.lime2{background-color:#b4aef5}
.mkm-legend i.yellow{background-color:var(--yellow)}.mkm-legend i.orange{background-color:var(--orange)}
.mkm-legend i.grey{background-color:#e2e2dd}
.mkm-legend b{margin-left:auto;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}

/* Semicircle gauge */
.mkm-gauge{justify-items:center;text-align:center}
.mkm-gauge svg{display:block;width:100%;max-width:230px;height:auto}
.mkm-gauge .g-num{fill:var(--ink);font-family:var(--display);font-size:34px;font-weight:550;letter-spacing:-.03em}
.mkm-gauge .g-sub{fill:#8b8f96;font-size:11px}
.mkm-foot{color:var(--muted);font-size:12.5px}

/* Keyword search: one big rounded input with an ink button inside it */
.mkm-input{display:flex;align-items:center;gap:10px;height:46px;padding:0 6px 0 14px;border:1px solid var(--line);border-radius:12px;color:var(--ink);font-size:14px}
.mkm-input>svg{width:17px;height:17px;flex:none;color:var(--muted)}
.mkm-input>span{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}
.mkm-input i{display:grid;place-items:center;height:34px;padding:0 15px;border-radius:9px;background:var(--ink);color:#fff;font-size:12.5px;font-style:normal;font-weight:600}
.mkm-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mkm-strip>div{display:grid;gap:1px;padding:11px 13px;border-radius:12px;background:var(--band)}
.mkm-strip span{color:var(--muted);font-size:11.5px}
.mkm-strip b{color:var(--ink);font-size:20px;font-weight:550;letter-spacing:-.03em}
.mkm-strip small{color:var(--soft);font-size:10.5px}
.mkm-table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.mkm-table th{padding:0 8px 8px;border-bottom:1px solid var(--hair);color:var(--soft);font-size:11px;font-weight:500;text-align:left;white-space:nowrap}
.mkm-table td{padding:9px 8px;border-bottom:1px solid var(--hair);color:var(--text);white-space:nowrap}
.mkm-table tr:last-child td{border-bottom:0}
.mkm-table td:first-child{overflow:hidden;max-width:0;width:52%;color:var(--ink);text-overflow:ellipsis}
.mkm-table .r{text-align:right}
.mkm-pill{display:inline-flex;align-items:center;height:21px;padding:0 9px;border-radius:999px;background:var(--soft-bg);color:var(--ink);font-size:11px;font-weight:600;white-space:nowrap}
.mkm-pill.lime{background:var(--lime);color:#fff}
.mkm-pill.lime2{background:var(--lime-soft)}
.mkm-pill.yellow{background:var(--yellow-soft)}
.mkm-dot{display:inline-flex;align-items:center;gap:7px;color:var(--text);font-weight:600}
.mkm-dot::before{width:8px;height:8px;border-radius:50%;background:var(--lime-deep);content:""}
.mkm-dot.mid::before{background:var(--yellow)}
.mkm-dot.hi::before{background:#f59e0b}

/* Ranked rows with a thin hatched progress bar underneath */
.mkm-rows{display:grid;gap:13px;margin:0;padding:0;list-style:none}
.mkm-rows li{display:grid;gap:6px}
.mkm-rows div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;color:var(--text);font-size:13.5px}
.mkm-rows b{color:var(--ink);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.mkm-rows span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mkm-track{display:block;height:7px;overflow:hidden;border-radius:999px;background:var(--soft-bg)}
.mkm-track i{display:block;height:100%;border-radius:inherit;background-color:var(--lime)}
.mkm-track i.yellow{background-color:var(--yellow)}
.mkm-track i.orange{background-color:var(--orange)}
.mkm-track i.grey{background-color:#d8d8d2}

/* Audit score: ring + issues by category */
.mkm-audit-top{display:flex;align-items:center;gap:16px}
.mkm-ring{width:86px;height:86px;flex:none}
.mkm-ring .r-num{fill:var(--ink);font-family:var(--display);font-size:30px;font-weight:550;letter-spacing:-.03em}
.mkm-arc{stroke-dasharray:226;stroke-dashoffset:226;animation:mkm-arc 1.4s .15s cubic-bezier(.4,0,.2,1) forwards}
@keyframes mkm-arc{to{stroke-dashoffset:48}}

/* Filter chips: the active one is ink */
.mkm-chips{display:flex;flex-wrap:wrap;gap:7px}
.mkm-chips i{display:inline-flex;align-items:center;height:28px;padding:0 12px;border:1px solid var(--line);border-radius:999px;color:var(--text);font-size:12px;font-style:normal;font-weight:550;white-space:nowrap}
.mkm-chips i.on{border-color:var(--ink);background:var(--ink);color:#fff}

/* Report thumbnail */
.mkm-report{grid-template-columns:minmax(0,.95fr) minmax(0,1fr);gap:18px;align-items:start}
.mkm-paper{display:grid;gap:8px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--band)}
.mkm-paper .p-h{display:block;height:9px;width:58%;border-radius:3px;background:#dcdcd5}
.mkm-paper .p-s{display:block;height:6px;width:38%;border-radius:3px;background:#e7e7e1}
.mkm-paper .p-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:2px}
.mkm-paper .p-grid i{display:block;height:34px;border-radius:7px;background:#fff;border:1px solid var(--line)}
.mkm-paper .p-bars{display:flex;align-items:flex-end;gap:5px;height:56px;padding-top:4px}
.mkm-paper .p-bars i{display:block;flex:1;border-radius:3px 3px 0 0;background-color:var(--lime)}
.mkm-side{display:grid;gap:9px}
.mkm-side>span{display:flex;align-items:center;gap:9px;color:var(--text);font-size:13px}
.mkm-side>span svg{width:15px;height:15px;flex:none;color:var(--lime-ink)}

/* Bar widths live in classes because the CSP forbids inline styles. */
.mkm .w2{width:2%}.mkm .w4{width:4%}.mkm .w6{width:6%}.mkm .w8{width:8%}.mkm .w10{width:10%}.mkm .w12{width:12%}.mkm .w14{width:14%}.mkm .w16{width:16%}.mkm .w18{width:18%}.mkm .w20{width:20%}
.mkm .w22{width:22%}.mkm .w24{width:24%}.mkm .w26{width:26%}.mkm .w28{width:28%}.mkm .w30{width:30%}.mkm .w32{width:32%}.mkm .w34{width:34%}.mkm .w36{width:36%}.mkm .w38{width:38%}.mkm .w40{width:40%}
.mkm .w42{width:42%}.mkm .w44{width:44%}.mkm .w46{width:46%}.mkm .w48{width:48%}.mkm .w50{width:50%}.mkm .w52{width:52%}.mkm .w54{width:54%}.mkm .w56{width:56%}.mkm .w58{width:58%}.mkm .w60{width:60%}
.mkm .w62{width:62%}.mkm .w64{width:64%}.mkm .w66{width:66%}.mkm .w68{width:68%}.mkm .w70{width:70%}.mkm .w72{width:72%}.mkm .w74{width:74%}.mkm .w76{width:76%}.mkm .w78{width:78%}.mkm .w80{width:80%}
.mkm .w82{width:82%}.mkm .w84{width:84%}.mkm .w86{width:86%}.mkm .w88{width:88%}.mkm .w90{width:90%}.mkm .w92{width:92%}.mkm .w94{width:94%}.mkm .w96{width:96%}.mkm .w98{width:98%}.mkm .w100{width:100%}
.mkm .h30{height:30%}.mkm .h40{height:40%}.mkm .h50{height:50%}.mkm .h55{height:55%}.mkm .h60{height:60%}.mkm .h65{height:65%}.mkm .h70{height:70%}.mkm .h75{height:75%}.mkm .h80{height:80%}.mkm .h85{height:85%}.mkm .h90{height:90%}.mkm .h100{height:100%}

/* --------------------------------------------------- alternating rows */
.mk-rows{display:grid;gap:clamp(64px,6.4vw,120px);padding-block:clamp(8px,1vw,20px) var(--section)}
.mk-row{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);align-items:center;gap:clamp(36px,4.6vw,96px)}
.mk-row.reverse .mk-row-copy{order:2}
.mk-row-copy{display:flex;min-width:0;flex-direction:column;align-items:flex-start}
.mk-row-copy h3{max-width:15em;margin:14px 0 16px;font-size:clamp(26px,2.3vw,40px);font-weight:700;line-height:1.1;letter-spacing:-.03em}
.mk-row-copy>p{max-width:31em;margin:0 0 26px;color:var(--muted);font-size:clamp(16.5px,1.2vw,19px);line-height:1.55}
.mk-row-copy .mk-checks{margin-bottom:28px}
.mk-row-visual{min-width:0}
/* The mocks read as product, not as wireframes, when they sit slightly off the page. */
.mk-row-visual .mkm,.mk-page-visual .mkm{box-shadow:0 24px 60px -40px rgba(20,22,28,.5)}

/* ------------------------------------------------------- how it works */
.mk-steps{padding-block:var(--section)}
.mk-step-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,34px);margin:0;padding:0;list-style:none}
.mk-step{display:grid;align-content:start;gap:12px}
.mk-step-num{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.mk-step h3{margin:6px 0 0;font-size:clamp(19px,1.4vw,23px);font-weight:650;letter-spacing:-.022em}
.mk-step p{margin:0;color:var(--muted);font-size:clamp(15.5px,1.06vw,17px);line-height:1.6}

/* --------------------------------------------------------- bands / AI */
.mk-band{background:var(--band)}
.mk-ai{padding-block:var(--section);background:radial-gradient(60% 80% at 85% 20%,rgba(91,79,240,.28) 0,rgba(91,79,240,0) 60%),radial-gradient(50% 60% at 0% 100%,rgba(22,163,74,.12) 0,rgba(22,163,74,0) 60%),#0b0c14;color:#e8e9f1}
.mk-ai-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:clamp(40px,5vw,110px)}
.mk-ai-copy{display:flex;min-width:0;flex-direction:column;align-items:flex-start}
.mk-ai .mk-eyebrow{color:#aba5fb}
.mk-landing .mk-ai h2{max-width:13em;margin:14px 0 18px;color:#fff}
.mk-ai-copy>p{max-width:32em;margin:0 0 28px;color:#aeb2c4;font-size:clamp(16.5px,1.2vw,19px);line-height:1.6}
.mk-ai .mk-checks{margin-bottom:32px}
.mk-ai .mk-checks li{color:#dfe1ea}
.mk-ai .mk-checks svg{color:#7fd39f}
.mk-ai .mk-black-button{border-color:#fff;background:#fff;color:var(--ink)}
.mk-ai .mk-black-button:hover{background:#e9e7ff}
.mk-ai-cta{display:flex;flex-wrap:wrap;gap:12px}
.mk-ai .mk-outline-button{border-color:#33364b;background:transparent;color:#fff}
.mk-ai .mk-outline-button:hover{border-color:#fff;background:#171826}
.mk-ai :is(a,button):focus-visible{outline-color:#fff}
.mk-terminal{min-width:0;overflow:hidden;border:1px solid #262839;border-radius:18px;background:#12131d;box-shadow:0 50px 90px -40px rgba(91,79,240,.55)}
.mk-terminal-bar{display:flex;align-items:center;gap:8px;height:46px;padding:0 18px;background:#171826;color:#80859b;font-size:13px}
.mk-terminal-bar i{width:11px;height:11px;border-radius:50%;background:#3a3d52}
.mk-terminal-bar span{margin-left:10px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.mk-terminal pre{margin:0;padding:clamp(18px,2vw,30px);overflow-x:auto;color:#c4c7cc;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:clamp(12.5px,.88vw,14px);line-height:1.8}
.c-dim{color:#70748a}.c-green{color:#7fd39f}.c-amber{color:#f3c77b}.c-white{color:#fff}
.mk-terminal-cap{margin:0;padding:0 clamp(20px,2.2vw,32px) 18px;color:#9499ad;font-size:12px}
.mk-works{display:flex;flex-wrap:wrap;align-items:center;gap:14px clamp(24px,2.6vw,48px);margin-top:clamp(56px,5.6vw,104px);padding-top:clamp(28px,2.4vw,40px);border-top:1px solid #23253a;color:#dfe1ea;font-size:clamp(14.5px,1vw,16px);font-weight:550}
.mk-works>span{display:inline-flex;align-items:center;gap:10px}
.mk-works .mk-works-label{color:#80859b;font-weight:500}
.mk-works svg{width:20px;height:20px;flex:none;color:#dfe1ea}

/* ------------------------------------------------- "Ask your AI" strip */
/* A compact band of example questions somebody can put to their assistant once MrKeyword's MCP
   server is connected, each captioned with the tools that answer it. The questions are examples,
   not transcripts, so the block is labelled "Example" and the mock bubbles are aria-hidden. */
.mk-ask{padding-block:clamp(52px,5.2vw,96px)}
.mk-ask-head{display:grid;gap:clamp(10px,1vw,16px);max-width:760px;margin-bottom:clamp(26px,2.6vw,44px)}
.mk-ask-head h2{margin:0;font-size:clamp(26px,2.3vw,40px);font-weight:700;line-height:1.1;letter-spacing:-.03em}
.mk-ask-head p{max-width:40em;margin:0;color:var(--muted);font-size:clamp(16px,1.15vw,19px);line-height:1.55}
.mk-ask-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(12px,1.2vw,20px);margin:0;padding:0;list-style:none}
/* Three across at most: five questions then read 3 + 2 instead of 4 + one orphan. */
@media(min-width:1000px){.mk-ask-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mk-ask-item{display:grid;align-content:start;gap:12px;padding:clamp(18px,1.6vw,26px);border:1px solid var(--line);border-radius:18px;background:#fff;transition:border-color .18s,transform .18s}
.mk-ask-item:hover{border-color:#d9d9d3;transform:translateY(-2px)}
/* The question sits in a chat bubble with a small tail, so the block reads as a conversation. */
.mk-ask-q{position:relative;margin:0;padding:13px 16px;border-radius:14px 14px 14px 4px;background:var(--tint);color:var(--ink);font-size:clamp(15px,1.06vw,17px);font-weight:550;line-height:1.45}
.mk-ask-q::after{position:absolute;bottom:-6px;left:0;width:12px;height:8px;background:var(--tint);clip-path:polygon(0 0,100% 0,0 100%);content:""}
.mk-ask-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.mk-ask-tools small{margin-right:2px;color:var(--text);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.mk-mono{display:inline-flex;align-items:center;height:23px;padding:0 8px;border:1px solid #e0defb;border-radius:7px;background:var(--indigo-soft);color:var(--indigo);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;line-height:1;white-space:nowrap}
.mk-mono.act{border-color:#e9d7ae;background:#fff3dd;color:#8a5a08}
.mk-ask-note{margin:clamp(18px,1.6vw,26px) 0 0;color:var(--text);font-size:13.5px;line-height:1.6}
.mk-ask-note a{color:var(--ink)}
/* The same pair (question + the tools that answer it) inside a feature row's copy column. */
.mk-row-ask{display:grid;gap:10px;width:100%;margin-bottom:28px;padding:clamp(15px,1.3vw,20px);border:1px solid var(--line);border-left:3px solid var(--indigo);border-radius:4px 14px 14px 4px;background:var(--band)}
.mk-row-ask .mk-ask-q{padding:0;border-radius:0;background:none;font-size:clamp(15px,1.05vw,17px)}
.mk-row-ask .mk-ask-q::after{display:none}

/* ------------------------------------------------ sample AI conversation */
/* A transcript mock: the question, the tool calls the assistant makes, and the answer it comes back
   with. Every figure in it is invented sample data for a fictional site, so it is aria-hidden and
   captioned. */
/* min-width:0 on every descendant, or the long tool names and keyword rows refuse to shrink and the
   whole figure pushes the page sideways on a phone. (.mkm has the same rule for the same reason.) */
.mk-chat{display:grid;gap:12px;min-width:0;padding:clamp(18px,1.8vw,28px);border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 26px 70px -46px rgba(20,22,28,.5)}
.mk-chat *{min-width:0}
.mk-chat-you{justify-self:end;max-width:min(100%,30em);padding:12px 16px;border-radius:14px 14px 4px 14px;background:var(--ink);color:#fff;font-size:clamp(14.5px,1vw,16px);line-height:1.45}
.mk-chat-calls{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mk-chat-calls span{color:var(--text);font-size:12px}
.mk-chat-say{max-width:min(100%,38em);margin:0;padding:13px 16px;border-radius:14px 14px 14px 4px;background:var(--band);color:var(--text);font-size:clamp(14.5px,1vw,16px);line-height:1.55}
.mk-chat-say b{color:var(--ink);font-weight:650}
.mk-chat-rows{display:grid;gap:0;margin:0;padding:0;list-style:none;font-variant-numeric:tabular-nums}
.mk-chat-rows li{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 2px;border-top:1px solid var(--hair);color:var(--text);font-size:13.5px}
.mk-chat-rows li:first-child{border-top:0}
.mk-chat-rows span{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}
.mk-chat-rows b{color:var(--ink);font-weight:600;white-space:nowrap}
.mk-chat-rows i{display:inline-flex;align-items:center;height:21px;padding:0 9px;border-radius:999px;background:var(--green-soft);color:#146c34;font-size:11px;font-style:normal;font-weight:600;white-space:nowrap}
.mk-chat-rows i.dn{background:#fdeced;color:#b42318}
.mk-chat-src{margin:0;color:var(--text);font-size:12px;line-height:1.5}

/* ---------------------------------------------------- copyable command */
.mk-code{position:relative;display:grid;gap:10px}
.mk-code pre{margin:0;overflow-x:auto;padding:16px 18px;border:1px solid #262839;border-radius:14px;background:#12131d;color:#c9ccda;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.7}
.mk-code code{font:inherit}
.mk-code .c-key{color:#7fd39f}.mk-code .c-str{color:#f3c77b}.mk-code .c-cmt{color:#70748a}
.mk-copy{justify-self:start;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.mk-copy:hover{border-color:var(--indigo);color:var(--indigo)}
.mk-copy svg{width:15px;height:15px}

/* ------------------------------------------------------------ pricing */
.mk-pricing{padding-block:var(--section)}
.mk-plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.6vw,26px);max-width:1180px;margin-inline:auto;align-items:start}
.mk-plan{position:relative;display:flex;flex-direction:column;gap:clamp(18px,1.7vw,26px);padding:clamp(24px,2.1vw,36px);border:1px solid var(--line);border-radius:20px;background:#fff}
.mk-plan.is-featured{border-color:#0b0c14;background:#0b0c14;color:#fff;box-shadow:0 40px 80px -36px rgba(11,12,20,.55)}
.mk-landing .mk-plan.is-featured h3{color:#fff}
.mk-plan.is-featured .mk-plan-head p,.mk-plan.is-featured .mk-price span{color:#a6aabd}
.mk-plan.is-featured ul{border-color:#262839}
.mk-plan.is-featured li{color:#dfe1ea}
.mk-plan.is-featured li svg{color:#7fd39f}
.mk-plan.is-featured .mk-plan-badge{background:#2a2560;color:#cfcaff}
.mk-plan.is-featured .mk-outline-button{border-color:#fff;background:#fff;color:var(--ink)}
.mk-plan-head{display:grid;gap:7px}
.mk-plan h3{margin:0;font-size:clamp(19px,1.35vw,23px);font-weight:650;letter-spacing:-.025em}
.mk-plan-head p{margin:0;color:var(--muted);font-size:clamp(14.5px,1vw,16px);line-height:1.5}
.mk-price{display:flex;align-items:baseline;gap:6px}
.mk-price b{font-size:clamp(40px,3.1vw,54px);font-weight:600;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.mk-price span{color:var(--soft);font-size:15.5px}
.mk-plan>:is(button,a){width:100%}
.mk-plan ul{display:grid;gap:12px;margin:0;padding:clamp(18px,1.6vw,26px) 0 0;border-top:1px solid var(--line);list-style:none}
.mk-plan li{display:flex;align-items:flex-start;gap:11px;color:var(--text);font-size:clamp(14.5px,1vw,16px);line-height:1.45}
.mk-plan li svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--green);stroke-width:2.4}
/* The featured card carries a label; the others get an empty row of the same height so every price,
   button and feature list still lines up across the three cards. */
.mk-plan:not(.is-featured)::before{content:"";height:26px}
.mk-plan-badge{display:inline-flex;align-items:center;align-self:flex-start;height:26px;padding:0 11px;border-radius:999px;background:var(--indigo-soft);color:var(--indigo);font-size:12px;font-weight:600}

/* ---------------------------------------------------------------- FAQ */
.mk-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,5vw,112px);padding-block:var(--section)}
.mk-faq-head{position:sticky;top:40px;display:flex;flex-direction:column;align-items:flex-start;align-self:start}
.mk-faq-head h2{margin:14px 0 16px}
.mk-faq-head p{max-width:24em;margin:0 0 26px;color:var(--muted);font-size:clamp(16.5px,1.2vw,19px);line-height:1.55}
.mk-faq-list{border-top:1px solid var(--line)}
.mk-faq details{border-bottom:1px solid var(--line)}
.mk-faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(20px,1.7vw,28px) 0;color:var(--ink);font-size:clamp(16.5px,1.22vw,20px);font-weight:600;letter-spacing:-.015em;list-style:none;cursor:pointer}
.mk-faq summary::-webkit-details-marker{display:none}
.mk-faq summary svg{width:20px;height:20px;flex:none;color:var(--soft);transition:transform .2s}
.mk-faq details[open] summary svg{color:var(--ink);transform:rotate(45deg)}
.mk-faq details p{max-width:62ch;margin:-4px 0 clamp(22px,1.9vw,30px);color:var(--muted);font-size:clamp(15.5px,1.06vw,17px);line-height:1.65}
/* The home page does not load site.css, so inline links in these two blocks have to get their colour
   here or they fall back to the browser's blue — the one colour this design system never uses. */
.mk-faq details p a,.mk-pricing .mk-plan-note a{color:var(--ink);text-underline-offset:3px}

/* ------------------------------------------------------- CTA + footer */
.mk-final-wrap{padding-block:0 clamp(36px,3.2vw,64px)}
.mk-final{position:relative;display:flex;align-items:center;justify-content:space-between;gap:32px;overflow:hidden;padding:clamp(32px,3vw,56px) clamp(28px,6vw,128px);border-radius:24px;background:radial-gradient(90% 180% at 0% 100%,#e9e6ff 0,rgba(233,230,255,0) 55%),radial-gradient(70% 160% at 100% 0%,#e6f6ee 0,rgba(230,246,238,0) 55%),#f5f4ff;color:var(--ink)}

.mk-landing .mk-final h2{margin:0;color:var(--ink);font-size:clamp(23px,2vw,36px);font-weight:700;letter-spacing:-.025em}
.mk-final p{margin:10px 0 0;color:var(--muted);font-size:clamp(15.5px,1.1vw,18px)}
.mk-final-cta{position:relative;z-index:1;display:grid;flex:none;justify-items:center;gap:10px}
.mk-final small{color:var(--soft);font-size:13.5px}

.mk-footer{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,.8fr)) minmax(0,1.1fr);gap:30px;padding-block:clamp(26px,2.2vw,42px) clamp(36px,3.2vw,66px);border-top:1px solid var(--line);color:var(--muted);font-size:clamp(14px,.95vw,15px)}
.mk-footer-brand a{display:inline-flex;text-decoration:none}
.mk-footer-brand img{display:block;width:auto;height:clamp(40px,2.8vw,52px);max-width:min(280px,72vw);object-fit:contain}
.mk-footer-brand span{display:block;margin-top:8px}
.mk-footer strong{display:block;margin-bottom:12px;color:var(--ink);font-weight:600}
.mk-footer a{display:block;margin-top:9px;color:var(--muted);text-decoration:none;transition:color .15s}
.mk-footer a:hover,.mk-footer a[aria-current="page"]{color:var(--ink)}
.mk-footer-legal{display:grid;justify-items:end;align-content:start;gap:12px;text-align:right}
.mk-footer-legal nav{display:flex;gap:18px}
.mk-footer-legal nav a{margin:0}

/* ------------------------------------------------------------ hovers */
.mk-card,.mk-plan,.mkm{transition:border-color .18s,transform .18s,box-shadow .18s}
.mk-card:hover,.mk-plan:hover{border-color:#d7d4fb;transform:translateY(-2px)}

/* ------------------------------------------------------- breakpoints */
/* Side by side, the plan blurbs have to occupy the same two lines or the prices step down the row. */
@media(min-width:1181px){.mk-plan-head p{min-height:3em}}
@media(max-width:1180px){
  .mk-row,.mk-ai-grid{grid-template-columns:1fr}
  .mk-row.reverse .mk-row-copy{order:0}
  .mk-row-copy h3{max-width:18em}
  .mk-plan-grid{grid-template-columns:1fr;max-width:540px}
  .mk-footer{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mk-footer-brand{grid-column:1/-1}
  .mk-footer-legal{grid-column:1/-1;justify-items:start;text-align:left}
}
@media(max-width:1000px){
  .mk-step-list{grid-template-columns:1fr;max-width:640px;gap:28px}
}
@media(max-width:900px){
  .mk-nav nav,.mk-nav-actions .mk-login{display:none}
  .mk-menu{display:block}
  .mk-hero{grid-template-columns:1fr;gap:34px}
  .mk-hero-copy h1{max-width:13em}
  .mk-faq{grid-template-columns:1fr}
  .mk-faq-head{position:static}
  .mk-final{flex-direction:column;align-items:flex-start}
  .mk-final-cta{justify-items:start}
  .mkm-rank{grid-template-columns:1fr}
  .mkm-rail{grid-template-columns:repeat(3,minmax(0,1fr));padding:12px 0 0;border-top:1px solid var(--hair);border-left:0}
  .mkm-report{grid-template-columns:1fr}
}
@media(max-width:640px){
  /* The header keeps the wordmark and the menu button; the primary action lives inside the sheet,
     which is what stops the row from overflowing a 360px screen. */
  .mk-nav{gap:12px}
  .mk-nav-actions>.mk-black-button{display:none}
  .mk-wordmark img{height:44px;max-width:min(190px,48vw)}
  .mk-hero-copy h1{font-size:clamp(36px,10.5vw,50px)}
  .mk-search{height:auto;flex-wrap:wrap;gap:6px}
  .mk-search label{height:48px;flex-basis:100%}
  .mk-search .mk-black-button{width:100%;height:48px}
  .mk-stage-row{grid-template-columns:1fr}
  .mkm{padding:16px}
  .mkm-strip{grid-template-columns:1fr}
  .mkm-rank .mkm-tag{display:none}
  .mkm-legend{grid-template-columns:1fr}
  .mk-footer{grid-template-columns:1fr 1fr}
}
@media(max-width:400px){
  .mk-trust>span{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  .mk-landing *{transition:none!important}
  .mkm-wrap,.mkm-line,.mkm-arc{animation:none}
  .mkm-line{stroke-dashoffset:0}
  .mkm-arc{stroke-dashoffset:48}
}

/* Footer v2: a solid ink band edge to edge with a faint lavender glow, equal link columns, legal in a bottom bar.
   Full-bleed without changing the markup: the band is painted past the content width and clipped to the viewport. */
.mk-footer{grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));gap:28px 32px;margin-top:clamp(48px,5vw,88px);padding-block:clamp(48px,4.4vw,76px) 28px;border-top:0;color:#a9aec2;
  background:#0a0c15;background-image:radial-gradient(60% 120% at 88% 0%,rgba(123,114,234,.22),transparent 60%),radial-gradient(40% 90% at 8% 100%,rgba(180,174,245,.10),transparent 70%);
  box-shadow:0 0 0 100vmax #0a0c15;clip-path:inset(0 -100vmax)}
.mk-footer .mk-footer-brand a{display:inline-flex;width:auto;margin-top:0;padding:10px 14px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(180,174,245,.35)}
.mk-footer .mk-footer-brand img{height:clamp(34px,2.4vw,42px)}
.mk-footer .mk-footer-brand span{color:#c9c5f7}
.mk-footer strong{margin-bottom:14px;color:#fff;font-size:14.5px;letter-spacing:.01em}
.mk-footer a{margin-top:10px;color:#a9aec2;font-size:14.5px}
.mk-footer a:hover,.mk-footer a[aria-current="page"]{color:#fff}
.mk-footer a:focus-visible{outline:2px solid #b4aef5;outline-offset:3px;border-radius:4px}
.mk-footer .mk-footer-legal{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:clamp(20px,2.4vw,40px);padding-top:22px;border-top:1px solid rgba(255,255,255,.1);text-align:left}
.mk-footer .mk-footer-legal small{color:#8b90a6;font-size:13px}
.mk-footer .mk-footer-legal nav a{color:#a9aec2;font-size:13.5px}
@media(max-width:1100px){.mk-footer{grid-template-columns:repeat(3,minmax(0,1fr))}.mk-footer .mk-footer-brand{grid-column:1/-1}}
@media(max-width:640px){.mk-footer{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}.mk-footer .mk-footer-legal{flex-direction:column;align-items:flex-start}}

/* Footer palette: keep the surface white and let lavender carry the brand accent. */
.mk-footer{--footer-ink:oklch(.24 .03 275);--footer-muted:oklch(.43 .035 275);--footer-lavender:oklch(.42 .13 285);--footer-wash:oklch(.96 .025 285);--footer-line:oklch(.89 .03 285);background:#fff;background-image:none;box-shadow:none;clip-path:none;border-top:1px solid var(--footer-line);color:var(--footer-muted)}
.mk-footer .mk-footer-brand a{background:var(--footer-wash);box-shadow:0 0 0 1px var(--footer-line)}
.mk-footer .mk-footer-brand span{color:var(--footer-lavender)}
.mk-footer strong{color:var(--footer-ink)}
.mk-footer a{color:var(--footer-muted)}
.mk-footer a:hover,.mk-footer a:focus-visible{color:var(--footer-lavender)}
.mk-footer a:focus-visible{outline-color:var(--footer-lavender)}
.mk-footer .mk-footer-legal{border-top-color:var(--footer-line)}
.mk-footer .mk-footer-legal small,.mk-footer .mk-footer-legal nav a{color:var(--footer-muted)}
.mk-footer-heading-icon{border-color:var(--footer-line);background:var(--footer-wash);color:var(--footer-lavender)}
.mk-footer-actions>span{color:var(--footer-muted)}
.mk-footer-socials a{border-color:var(--footer-line);background:var(--footer-wash);color:var(--footer-lavender)!important}
.mk-footer-socials a:hover{border-color:var(--footer-lavender);background:var(--footer-lavender);color:#fff!important}

/* Footer utility layer: recognizable icons give the link columns and brand actions a clearer visual rhythm. */
.mk-footer-heading{display:flex!important;align-items:center;gap:9px}
.mk-footer-heading-icon{display:grid;place-items:center;width:28px;height:28px;border:1px solid rgba(180,174,245,.24);border-radius:9px;background:rgba(180,174,245,.10);color:#c9c5f7}
.mk-footer-heading-icon svg{width:15px;height:15px}
.mk-footer-actions{display:grid;gap:11px;margin-top:24px}
.mk-footer-actions>span{color:#8b90a6;font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.mk-footer-socials{display:flex;gap:8px}
.mk-footer-socials a{display:grid!important;place-items:center;width:36px;height:36px;margin:0!important;border:1px solid rgba(180,174,245,.22);border-radius:11px;background:rgba(255,255,255,.045);color:#c9c5f7!important;transition:background .18s,border-color .18s,color .18s,transform .18s}
.mk-footer-socials a:hover{border-color:rgba(180,174,245,.58);background:rgba(180,174,245,.14);color:#fff!important;transform:translateY(-2px)}
.mk-footer-socials svg{width:17px;height:17px}
@media(max-width:640px){.mk-footer-actions{margin-top:20px}}

/* Generated product visuals replace the old code-only mockups on the core tool pages. */
.mk-image-visual{display:grid;gap:10px;margin:0;width:100%}
.mk-image-visual img{display:block;width:100%;height:auto;aspect-ratio:1586/992;object-fit:cover;border:1px solid rgba(17,19,31,.08);border-radius:20px;box-shadow:0 20px 48px rgba(27,29,48,.12),0 2px 5px rgba(27,29,48,.06);background:#f5f5f8}
.mk-image-visual figcaption{color:var(--soft);font-size:12px;line-height:1.35;letter-spacing:.02em}
.mk-page-visual>.mk-image-visual{max-width:620px}
.mk-row-visual>.mk-image-visual{max-width:590px}
.mk-row.reverse .mk-row-visual>.mk-image-visual{margin-left:auto}
@media(max-width:900px){.mk-page-visual>.mk-image-visual,.mk-row-visual>.mk-image-visual{max-width:720px;margin-inline:auto}.mk-image-visual img{border-radius:16px}}
@media(prefers-reduced-motion:reduce){.mk-image-visual img{transition:none}}