/* ==========================================================================
   MARKETING LAYER — public site only (body.mk)
   --------------------------------------------------------------------------
   Owns every public-site presentation rule. Loaded last by asset-head.php when
   header.php sets $mk_public, so it can retheme the legacy dark "surface-ink"
   bands that older shared CSS still defines for other surfaces.

   Structure (single file, ordered):
     1 Base · 2 Layout · 3 Type · 4 Buttons · 5 Header/Nav · 6 Footer
     7 Sections & bands · 8 Product visuals · 9 Editorial components
     10 Pricing · 11 Forms · 12 Article/legal · 13 Utility pages
     14 Legacy remap (retheme older shared classes on public pages)
     15 Responsive · 16 Print

   Rules: tokens only (--mk-*), no !important, no inline styles in markup,
   dark surfaces exist ONLY as .mk-band--dark / .mk-canvas--dark.
   ========================================================================== */

/* ---------- 1. BASE ---------------------------------------------------- */
body.mk{
  margin:0;
  background:var(--mk-canvas);
  color:var(--mk-text);
  font-family:var(--font-body);
  font-size:var(--mk-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
.mk :where(h1,h2,h3,h4){ font-family:var(--font-display); color:var(--mk-ink); font-weight:600; letter-spacing:-.022em; line-height:1.12; margin:0; text-wrap:balance; }
.mk :where(p){ margin:0; text-wrap:pretty; }
.mk :where(a){ color:inherit; text-decoration:none; }
.mk :where(ul,ol){ margin:0; padding:0; }
.mk :where(img,svg,video){ max-width:100%; }
.mk :where(img){ height:auto; display:block; }
.mk :focus-visible{ outline:2px solid var(--mk-brand); outline-offset:3px; border-radius:4px; }
.mk-band--dark :focus-visible{ outline-color:var(--mk-brand-on-dark); }
.mk ::selection{ background:var(--mk-brand-tint); color:var(--mk-ink); }
.mk main{ display:block; }
.mk-skip{
  position:absolute; left:16px; top:-64px; z-index:1000;
  background:var(--mk-ink); color:#fff; padding:12px 18px; border-radius:var(--mk-r-1);
  font-weight:600; transition:top .15s var(--mk-ease);
}
.mk-skip:focus{ top:12px; outline:2px solid #fff; outline-offset:2px; }
.mk-sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.mk [hidden]{ display:none; }

/* ---------- 2. LAYOUT -------------------------------------------------- */
.mk-container{ width:100%; max-width:var(--mk-max); margin-inline:auto; padding-inline:var(--mk-gutter); }
.mk-container--narrow{ max-width:calc(760px + var(--mk-gutter) * 2); }
.mk-container--read{ max-width:calc(720px + var(--mk-gutter) * 2); }
.mk-section{ padding-block:var(--mk-section); position:relative; }
.mk-section--tight{ padding-block:clamp(40px, 3rem + 2vw, 80px); }
.mk-band--warm{ background:var(--mk-warm); }
.mk-band--muted{ background:var(--mk-muted); }
.mk-band--tint{ background:var(--mk-tint); }
.mk-band--line{ border-top:1px solid var(--mk-border); }
.mk-band--dark{ background:var(--mk-dark); color:var(--mk-on-dark-2); }
.mk-band--dark :where(h1,h2,h3,h4){ color:var(--mk-on-dark); }
.mk-stack{ display:flex; flex-direction:column; gap:var(--mk-stack, 16px); }
.mk-cluster{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--mk-cluster, 12px); }
.mk-split{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(28px,4vw,64px); align-items:center; }
.mk-split > .mk-split__a{ grid-column:span 5; }
.mk-split > .mk-split__b{ grid-column:span 7; }
.mk-split--even > .mk-split__a, .mk-split--even > .mk-split__b{ grid-column:span 6; }
.mk-split--top{ align-items:start; }
.mk-split--flip > .mk-split__a{ order:2; }
.mk-grid{ display:grid; gap:clamp(24px,3vw,40px); grid-template-columns:repeat(var(--cols,3),minmax(0,1fr)); }
.mk-grid--2{ --cols:2; } .mk-grid--3{ --cols:3; } .mk-grid--4{ --cols:4; }

/* ---------- 3. TYPE ---------------------------------------------------- */
.mk-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:var(--mk-label); font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; color:var(--mk-brand);
}
.mk-eyebrow::before{ content:""; width:18px; height:1px; background:currentColor; }
.mk-band--dark .mk-eyebrow{ color:var(--mk-brand-on-dark); }
.mk-display-xl{ font-size:var(--mk-display-xl); line-height:1.03; letter-spacing:-.035em; }
.mk-display-lg{ font-size:var(--mk-display-lg); line-height:1.06; letter-spacing:-.03em; }
.mk-h1{ font-size:var(--mk-h1); line-height:1.08; letter-spacing:-.03em; }
.mk-h2{ font-size:var(--mk-h2); letter-spacing:-.025em; }
.mk-h3{ font-size:var(--mk-h3); }
.mk-h4{ font-size:var(--mk-h4); letter-spacing:-.01em; }
.mk-lead{ font-size:var(--mk-body-lg); line-height:1.55; color:var(--mk-text-2); max-width:58ch; }
.mk-band--dark .mk-lead{ color:var(--mk-on-dark-2); }
.mk-body-sm{ font-size:var(--mk-body-sm); color:var(--mk-text-2); }
.mk-caption{ font-size:var(--mk-caption); color:var(--mk-text-3); line-height:1.5; }
.mk-band--dark .mk-caption{ color:var(--mk-on-dark-2); }
.mk-mono{ font-family:var(--font-mono); }
.mk-metric{ font-family:var(--font-display); font-size:var(--mk-metric); font-weight:600; letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--mk-ink); line-height:1; }
.mk-link{ color:var(--mk-brand-hover); font-weight:500; text-decoration:underline; text-decoration-color:color-mix(in srgb,currentColor 35%,transparent); text-underline-offset:3px; transition:text-decoration-color .15s; }
.mk-link:hover{ text-decoration-color:currentColor; }
.mk-band--dark .mk-link{ color:var(--mk-brand-on-dark); }
.mk-arrow-link{ display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--mk-brand-hover); }
.mk-arrow-link svg{ transition:transform .2s var(--mk-ease); }
.mk-arrow-link:hover svg{ transform:translateX(3px); }
.mk-band--dark .mk-arrow-link{ color:var(--mk-brand-on-dark); }
.mk-section-head{ max-width:720px; margin-bottom:clamp(32px,4vw,56px); display:flex; flex-direction:column; gap:16px; }
.mk-section-head--center{ margin-inline:auto; text-align:center; align-items:center; }
.mk-section-head--center .mk-lead{ margin-inline:auto; }

/* ---------- 4. BUTTONS ------------------------------------------------- */
.mk-btn{
  --btn-bg:transparent; --btn-fg:var(--mk-ink); --btn-bd:var(--mk-border-strong);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 20px;
  font:600 .9375rem/1 var(--font-body); letter-spacing:-.005em;
  color:var(--btn-fg); background:var(--btn-bg); border:1px solid var(--btn-bd);
  border-radius:var(--mk-r-1); cursor:pointer; white-space:nowrap;
  transition:background-color .16s var(--mk-ease), border-color .16s var(--mk-ease), color .16s var(--mk-ease), box-shadow .16s var(--mk-ease), transform .16s var(--mk-ease);
}
.mk-btn:hover{ --btn-bd:var(--mk-ink); }
.mk-btn:active{ transform:translateY(1px); }
.mk-btn[disabled], .mk-btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; pointer-events:none; }
.mk-btn--primary{ --btn-bg:var(--mk-brand); --btn-fg:#fff; --btn-bd:var(--mk-brand); box-shadow:0 1px 2px rgba(58,32,180,.25), inset 0 1px 0 rgba(255,255,255,.14); }
.mk-btn--primary:hover{ --btn-bg:var(--mk-brand-hover); --btn-bd:var(--mk-brand-hover); }
.mk-btn--ink{ --btn-bg:var(--mk-ink); --btn-fg:#fff; --btn-bd:var(--mk-ink); }
.mk-btn--ink:hover{ --btn-bg:#232842; --btn-bd:#232842; }
.mk-btn--text{ --btn-bd:transparent; padding-inline:6px; min-height:44px; color:var(--mk-brand-hover); }
.mk-btn--text:hover{ --btn-bd:transparent; text-decoration:underline; text-underline-offset:4px; }
.mk-btn--lg{ min-height:52px; padding-inline:26px; font-size:1rem; }
.mk-btn--sm{ min-height:38px; padding-inline:14px; font-size:.875rem; }
.mk-btn--block{ width:100%; }
.mk-btn--icon{ width:44px; padding:0; }
.mk-btn--danger{ --btn-bg:var(--mk-negative); --btn-fg:#fff; --btn-bd:var(--mk-negative); }
.mk-btn.is-loading{ pointer-events:none; color:transparent; position:relative; }
.mk-btn.is-loading::after{ content:""; position:absolute; width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.5); border-top-color:#fff; animation:mk-spin .7s linear infinite; }
.mk-band--dark .mk-btn:not(.mk-btn--primary){ --btn-fg:var(--mk-on-dark); --btn-bd:var(--mk-border-dark); }
.mk-band--dark .mk-btn:not(.mk-btn--primary):hover{ --btn-bd:var(--mk-on-dark-2); }
.mk-band--dark .mk-btn--primary{ --btn-bg:#fff; --btn-fg:var(--mk-ink); --btn-bd:#fff; box-shadow:none; }
.mk-band--dark .mk-btn--primary:hover{ --btn-bg:#E6E3FF; --btn-bd:#E6E3FF; }
@keyframes mk-spin{ to{ transform:rotate(360deg); } }

/* ---------- 5. HEADER / NAV -------------------------------------------- */
.mk-header{
  position:sticky; top:0; z-index:var(--z-sticky, 100);
  background:var(--mk-canvas);
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--mk-ease), box-shadow .2s var(--mk-ease);
}
.mk-header.is-scrolled{ border-bottom-color:var(--mk-border); box-shadow:0 6px 20px -14px rgba(14,18,32,.25); }
.mk-header__inner{ display:flex; align-items:center; gap:28px; height:var(--mk-header-h); }
.mk-logo{ display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:1.0625rem; letter-spacing:-.02em; color:var(--mk-ink); flex:none; min-height:44px; }
.mk-logo__mark{ width:26px; height:26px; flex:none; }
.mk-nav{ flex:1; min-width:0; }
.mk-nav__list{ list-style:none; display:flex; align-items:center; gap:2px; }
.mk-nav__item{ position:static; }
.mk-nav__trigger, .mk-nav__link{
  display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 12px;
  font:500 .9375rem/1 var(--font-body); color:var(--mk-text); background:none; border:0; border-radius:var(--mk-r-1); cursor:pointer;
  transition:color .15s, background-color .15s;
}
.mk-nav__trigger:hover, .mk-nav__link:hover, .mk-nav__trigger[aria-expanded="true"]{ color:var(--mk-ink); background:var(--mk-muted); }
.mk-nav__link[aria-current="page"], .mk-nav__trigger.is-current{ color:var(--mk-brand-hover); }
.mk-nav__caret{ width:10px; height:10px; transition:transform .2s var(--mk-ease); }
.mk-nav__trigger[aria-expanded="true"] .mk-nav__caret{ transform:rotate(180deg); }
.mk-header__actions{ display:flex; align-items:center; gap:8px; margin-left:auto; flex:none; }
.mk-header__signin{ display:inline-flex; align-items:center; min-height:44px; padding:0 12px; font-weight:500; font-size:.9375rem; color:var(--mk-text); border-radius:var(--mk-r-1); }
.mk-header__signin:hover{ color:var(--mk-ink); background:var(--mk-muted); }
.mk-iconbtn{ width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; background:none; border:0; border-radius:var(--mk-r-1); color:var(--mk-text); cursor:pointer; }
.mk-iconbtn:hover{ background:var(--mk-muted); color:var(--mk-ink); }
.mk-nav-toggle{ display:none; }

.mk-menu{
  position:absolute; left:0; right:0; top:100%;
  background:var(--mk-canvas); border-top:1px solid var(--mk-border); border-bottom:1px solid var(--mk-border);
  box-shadow:var(--mk-shadow-3);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s var(--mk-ease), transform .18s var(--mk-ease), visibility 0s linear .18s;
}
.mk-menu.is-open{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.mk-menu__inner{ display:grid; grid-template-columns:repeat(var(--menu-cols,3),minmax(0,1fr)) minmax(0,1.1fr); gap:8px 40px; padding-block:28px 32px; }
.mk-menu__group{ display:flex; flex-direction:column; gap:2px; }
.mk-menu__label{ font:500 var(--mk-label)/1 var(--font-mono); letter-spacing:.09em; text-transform:uppercase; color:var(--mk-text-3); padding:0 12px 10px; }
.mk-menu__link{ display:block; padding:10px 12px; border-radius:var(--mk-r-1); transition:background-color .15s; }
.mk-menu__link:hover, .mk-menu__link:focus-visible{ background:var(--mk-muted); }
.mk-menu__title{ display:block; font-weight:600; font-size:.9375rem; color:var(--mk-ink); }
.mk-menu__desc{ display:block; font-size:.8125rem; color:var(--mk-text-3); line-height:1.4; margin-top:2px; }
.mk-menu__aside{ background:var(--mk-warm); border:1px solid var(--mk-border); border-radius:var(--mk-r-2); padding:20px; display:flex; flex-direction:column; gap:10px; align-self:start; }
.mk-menu__aside p{ font-size:.875rem; color:var(--mk-text-2); line-height:1.5; }
.mk-menu-scrim{ position:fixed; inset:var(--mk-header-h) 0 0 0; background:rgba(14,18,32,.28); opacity:0; visibility:hidden; transition:opacity .18s, visibility 0s linear .18s; z-index:-1; }
.mk-menu-scrim.is-on{ opacity:1; visibility:visible; transition-delay:0s; }

/* ---------- 6. FOOTER -------------------------------------------------- */
.mk-footer{ background:var(--mk-warm); border-top:1px solid var(--mk-border); padding-top:clamp(48px,6vw,80px); color:var(--mk-text-2); }
.mk-footer__top{ display:grid; grid-template-columns:minmax(0,1.5fr) repeat(6,minmax(0,1fr)); gap:32px 28px; }
.mk-footer__brand p{ font-size:.9375rem; max-width:34ch; margin-top:14px; line-height:1.55; }
.mk-footer__brand .mk-btn{ margin-top:20px; }
.mk-footer__col h2{ font:500 var(--mk-label)/1 var(--font-mono); letter-spacing:.09em; text-transform:uppercase; color:var(--mk-text-3); margin-bottom:16px; }
.mk-footer__col ul{ list-style:none; display:flex; flex-direction:column; gap:2px; }
.mk-footer__col a{ display:inline-block; padding:6px 0; font-size:.9375rem; color:var(--mk-text); }
.mk-footer__col a:hover{ color:var(--mk-brand-hover); text-decoration:underline; text-underline-offset:3px; }
.mk-footer__bottom{ margin-top:clamp(40px,5vw,64px); padding-block:22px; border-top:1px solid var(--mk-border); display:flex; flex-wrap:wrap; gap:12px 32px; justify-content:space-between; align-items:center; font-size:.875rem; color:var(--mk-text-3); }
.mk-footer__legal{ display:flex; flex-wrap:wrap; gap:4px 20px; }
.mk-footer__legal a{ padding:6px 0; color:var(--mk-text-2); }
.mk-footer__legal a:hover{ color:var(--mk-brand-hover); }

/* ---------- 7. SECTIONS / PAGE HERO ------------------------------------ */
.mk-hero{ padding-block:clamp(48px,6vw,104px) clamp(48px,5vw,88px); background:var(--mk-canvas); position:relative; overflow:hidden; }
.mk-hero--warm{ background:var(--mk-warm); }
.mk-hero__grid{ display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:center; }
.mk-hero__copy{ display:flex; flex-direction:column; gap:22px; align-items:flex-start; }
.mk-hero__copy .mk-lead{ max-width:52ch; }
.mk-hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; }
.mk-hero__note{ font-size:var(--mk-caption); color:var(--mk-text-3); }
.mk-hero--page .mk-hero__copy{ max-width:780px; }
.mk-crumbs{ display:flex; flex-wrap:wrap; gap:4px 8px; list-style:none; font-size:.8125rem; color:var(--mk-text-3); margin-bottom:8px; }
.mk-crumbs li{ display:inline-flex; align-items:center; gap:8px; }
.mk-crumbs li + li::before{ content:"/"; color:var(--mk-border-strong); }
.mk-crumbs a{ color:var(--mk-text-2); padding-block:6px; }
.mk-crumbs a:hover{ color:var(--mk-brand-hover); text-decoration:underline; }
.mk-crumbs [aria-current]{ color:var(--mk-ink); }

.mk-tag{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; font:500 var(--mk-label)/1.2 var(--font-mono); letter-spacing:.04em; text-transform:uppercase; color:var(--mk-text-2); background:var(--mk-muted); border:1px solid var(--mk-border); border-radius:999px; }
.mk-tag--brand{ color:var(--mk-brand-hover); background:var(--mk-brand-tint); border-color:transparent; }
.mk-tag--positive{ color:var(--mk-positive); background:var(--mk-positive-tint); border-color:transparent; }
.mk-tag--warning{ color:var(--mk-warning); background:var(--mk-warning-tint); border-color:transparent; }
.mk-tag--negative{ color:var(--mk-negative); background:var(--mk-negative-tint); border-color:transparent; }
.mk-tag--info{ color:var(--mk-info); background:var(--mk-info-tint); border-color:transparent; }
.mk-live-dot{ width:8px; height:8px; border-radius:50%; background:var(--mk-positive); box-shadow:0 0 0 0 rgba(11,122,85,.5); animation:mk-pulse 2.4s ease-out infinite; flex:none; }
@keyframes mk-pulse{ 0%{ box-shadow:0 0 0 0 rgba(11,122,85,.45);} 70%,100%{ box-shadow:0 0 0 8px rgba(11,122,85,0);} }

.mk-note{ display:flex; gap:12px; padding:16px 18px; border:1px solid var(--mk-border); background:var(--mk-warm); border-radius:var(--mk-r-2); font-size:var(--mk-body-sm); color:var(--mk-text-2); }
.mk-note strong{ color:var(--mk-ink); }
.mk-note--info{ background:var(--mk-info-tint); border-color:transparent; }
.mk-note--warning{ background:var(--mk-warning-tint); border-color:transparent; }

/* hairline list: editorial replacement for grids of cards */
.mk-rows{ list-style:none; border-top:1px solid var(--mk-border); }
.mk-rows > li{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:8px 40px; padding:26px 0; border-bottom:1px solid var(--mk-border); align-items:start; }
.mk-rows h3{ font-size:1.125rem; letter-spacing:-.015em; }
.mk-rows p{ color:var(--mk-text-2); }
.mk-rows__meta{ font:500 var(--mk-label)/1.4 var(--font-mono); text-transform:uppercase; letter-spacing:.08em; color:var(--mk-text-3); margin-bottom:6px; display:block; }
.mk-cols{ display:grid; grid-template-columns:repeat(var(--cols,3),minmax(0,1fr)); gap:0; border-top:1px solid var(--mk-border); }
.mk-cols > *{ padding:28px 28px 28px 0; border-bottom:1px solid var(--mk-border); }
.mk-cols > * + *{ padding-left:28px; border-left:1px solid var(--mk-border); }
.mk-cols h3{ font-size:1.0625rem; margin-bottom:8px; letter-spacing:-.01em; }
.mk-cols p{ font-size:var(--mk-body-sm); color:var(--mk-text-2); }
.mk-cols--2{ --cols:2; } .mk-cols--4{ --cols:4; }
.mk-band--dark .mk-rows, .mk-band--dark .mk-rows > li, .mk-band--dark .mk-cols, .mk-band--dark .mk-cols > *{ border-color:var(--mk-border-dark); }
.mk-band--dark .mk-rows p, .mk-band--dark .mk-cols p{ color:var(--mk-on-dark-2); }

.mk-check{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.mk-check li{ display:flex; gap:10px; align-items:flex-start; font-size:var(--mk-body-sm); color:var(--mk-text); }
.mk-check li::before{ content:""; flex:none; width:18px; height:18px; margin-top:2px; border-radius:50%; background:var(--mk-brand-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.7 2.6L13 6.6' fill='none' stroke='%235B3FE4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; }

/* capability list: hierarchy without card grids */
.mk-cap{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(24px,3vw,48px); }
.mk-cap__lead{ grid-column:span 7; display:flex; flex-direction:column; gap:14px; padding:clamp(24px,3vw,40px); border:1px solid var(--mk-border); background:var(--mk-canvas); border-radius:var(--mk-r-3); }
.mk-cap__side{ grid-column:span 5; display:flex; flex-direction:column; }
.mk-cap__item{ display:flex; flex-direction:column; gap:6px; padding:22px 0; border-bottom:1px solid var(--mk-border); transition:padding-left .2s var(--mk-ease); }
.mk-cap__item:first-child{ padding-top:4px; }
.mk-cap__item:hover{ padding-left:8px; }
.mk-cap__item h3{ font-size:1.0625rem; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.mk-cap__item p{ font-size:var(--mk-body-sm); color:var(--mk-text-2); }
.mk-cap__more{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 32px; margin-top:8px; grid-column:1 / -1; border-top:1px solid var(--mk-border); }
.mk-cap__more a{ display:block; padding:16px 0; border-bottom:1px solid var(--mk-border); font-weight:500; font-size:.9375rem; color:var(--mk-ink); }
.mk-cap__more a span{ display:block; font-weight:400; font-size:.8125rem; color:var(--mk-text-3); margin-top:2px; }
.mk-cap__more a:hover{ color:var(--mk-brand-hover); }

/* ---------- 8. PRODUCT VISUALS ----------------------------------------- */
.mk-app{ background:var(--mk-canvas); border:1px solid var(--mk-border); border-radius:var(--mk-r-3); box-shadow:var(--mk-shadow-3); overflow:hidden; text-align:left; font-size:.8125rem; color:var(--mk-text); }
.mk-app__bar{ display:flex; align-items:center; gap:10px; padding:11px 16px; border-bottom:1px solid var(--mk-border); background:var(--mk-warm); }
.mk-app__title{ font-weight:600; color:var(--mk-ink); font-size:.8125rem; }
.mk-app__bar .mk-tag{ margin-left:auto; }
.mk-app__body{ padding:16px; display:flex; flex-direction:column; gap:14px; }
.mk-kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.mk-kpi{ padding:12px; border:1px solid var(--mk-border); border-radius:var(--mk-r-1); background:var(--mk-canvas); min-width:0; }
.mk-kpi__label{ font:500 .625rem/1.2 var(--font-mono); text-transform:uppercase; letter-spacing:.04em; overflow-wrap:anywhere; color:var(--mk-text-3); }
.mk-kpi__value{ font:600 1.25rem/1.2 var(--font-display); letter-spacing:-.02em; color:var(--mk-ink); margin-top:6px; font-variant-numeric:tabular-nums; }
.mk-kpi__delta{ font:500 .75rem/1 var(--font-mono); margin-top:6px; color:var(--mk-positive); }
.mk-kpi__delta.is-down{ color:var(--mk-negative); }
.mk-app__row{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:12px; }
.mk-panel{ border:1px solid var(--mk-border); border-radius:var(--mk-r-1); padding:14px; background:var(--mk-canvas); min-width:0; }
.mk-panel__h{ font:500 .6875rem/1.2 var(--font-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--mk-text-3); margin-bottom:10px; display:flex; justify-content:space-between; gap:8px; }
.mk-chart{ width:100%; height:auto; display:block; }
.mk-chart__line{ fill:none; stroke:var(--mk-brand); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:var(--len,900); stroke-dashoffset:var(--len,900); animation:mk-draw 1.4s var(--mk-ease) .3s forwards; }
.mk-chart__ref{ fill:none; stroke:var(--mk-border-strong); stroke-width:1.5; stroke-dasharray:3 4; }
.mk-chart__area{ fill:var(--mk-brand); opacity:.08; }
.mk-chart__grid{ stroke:var(--mk-border); stroke-width:1; }
.mk-chart__dot{ fill:var(--mk-brand); }
.mk-chart__flag{ fill:var(--mk-negative); }
@keyframes mk-draw{ to{ stroke-dashoffset:0; } }
.mk-signal{ display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--mk-border); align-items:flex-start; }
.mk-signal:last-child{ border-bottom:0; padding-bottom:0; }
.mk-signal:first-child{ padding-top:0; }
.mk-signal__dot{ width:8px; height:8px; border-radius:50%; margin-top:5px; flex:none; background:var(--mk-brand); }
.mk-signal__dot.is-warn{ background:#D97706; } .mk-signal__dot.is-neg{ background:var(--mk-negative); } .mk-signal__dot.is-pos{ background:var(--mk-positive); }
.mk-signal__t{ font-weight:600; color:var(--mk-ink); font-size:.8125rem; line-height:1.35; }
.mk-signal__d{ color:var(--mk-text-3); font-size:.75rem; line-height:1.4; margin-top:2px; }
.mk-app__foot{ display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:var(--mk-r-1); background:var(--mk-brand-tint); color:var(--mk-text); font-size:.8125rem; line-height:1.45; }
.mk-app__foot strong{ color:var(--mk-ink); }
.mk-bars{ display:flex; flex-direction:column; gap:10px; }
.mk-bar__head{ display:flex; justify-content:space-between; font-size:.8125rem; margin-bottom:5px; color:var(--mk-text); }
.mk-bar__head span:last-child{ font-family:var(--font-mono); color:var(--mk-text-2); }
.mk-bar__track{ height:6px; background:var(--mk-muted); border-radius:3px; overflow:hidden; }
.mk-bar__fill{ display:block; height:100%; width:var(--fill,50%); background:var(--mk-brand); border-radius:3px; transform-origin:left; animation:mk-grow 1s var(--mk-ease) .2s both; }
.mk-bar__fill.is-neg{ background:var(--mk-negative); } .mk-bar__fill.is-pos{ background:var(--mk-positive); } .mk-bar__fill.is-mid{ background:#D97706; }
@keyframes mk-grow{ from{ transform:scaleX(0); } }
.mk-table{ width:100%; border-collapse:collapse; font-size:.8125rem; }
.mk-table th{ text-align:left; font:500 .6875rem/1.2 var(--font-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--mk-text-3); padding:8px 10px; border-bottom:1px solid var(--mk-border); white-space:nowrap; }
.mk-table td{ padding:10px; border-bottom:1px solid var(--mk-border); color:var(--mk-text); }
.mk-table tr:last-child td{ border-bottom:0; }
.mk-table .num{ font-family:var(--font-mono); text-align:right; font-variant-numeric:tabular-nums; }
.mk-table th.num{ text-align:right; }
.mk-table tr.is-you td{ background:var(--mk-brand-tint); font-weight:600; color:var(--mk-ink); }
.mk-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* dark variant — only for intentional cinematic bands */
.mk-app--dark{ background:var(--mk-dark-2); border-color:var(--mk-border-dark); box-shadow:0 30px 80px -30px rgba(0,0,0,.6); color:var(--mk-on-dark-2); }
.mk-app--dark .mk-app__bar{ background:rgba(255,255,255,.03); border-color:var(--mk-border-dark); }
.mk-app--dark .mk-app__title, .mk-app--dark .mk-signal__t, .mk-app--dark .mk-kpi__value{ color:var(--mk-on-dark); }
.mk-app--dark .mk-panel, .mk-app--dark .mk-kpi{ background:transparent; border-color:var(--mk-border-dark); }
.mk-app--dark .mk-signal{ border-color:var(--mk-border-dark); }
.mk-app--dark .mk-tag{ background:rgba(255,255,255,.06); border-color:var(--mk-border-dark); color:var(--mk-on-dark-2); }
.mk-app--dark .mk-signal__d, .mk-app--dark .mk-panel__h, .mk-app--dark .mk-kpi__label{ color:var(--mk-on-dark-2); }

/* Observe → Measure loop */
.mk-loop{ list-style:none; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; counter-reset:loop; position:relative; }
.mk-loop > li{ position:relative; padding:28px 24px 8px 0; counter-increment:loop; }
.mk-loop > li::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--mk-border); }
.mk-loop > li::after{ content:""; position:absolute; top:0; left:0; height:2px; width:0; background:var(--mk-brand); transition:width .9s var(--mk-ease); }
.mk-loop.is-in > li::after{ width:100%; }
.mk-loop.is-in > li:nth-child(2)::after{ transition-delay:.15s; } .mk-loop.is-in > li:nth-child(3)::after{ transition-delay:.3s; } .mk-loop.is-in > li:nth-child(4)::after{ transition-delay:.45s; } .mk-loop.is-in > li:nth-child(5)::after{ transition-delay:.6s; }
.mk-loop__n{ font:500 var(--mk-label)/1 var(--font-mono); color:var(--mk-brand); letter-spacing:.08em; }
.mk-loop h3{ font-size:1.25rem; margin:12px 0 6px; }
.mk-loop__q{ font-weight:600; color:var(--mk-ink); font-size:.9375rem; margin-bottom:10px; }
.mk-loop p{ font-size:var(--mk-body-sm); color:var(--mk-text-2); }
.mk-loop__mods{ margin-top:14px; display:flex; flex-wrap:wrap; gap:6px; list-style:none; }
.mk-loop__mods a{ display:inline-block; padding:4px 0; font-size:.8125rem; color:var(--mk-brand-hover); text-decoration:underline; text-decoration-color:color-mix(in srgb,currentColor 30%,transparent); text-underline-offset:3px; }
.mk-loop__mods li:not(:last-child)::after{ content:"·"; margin-left:6px; color:var(--mk-border-strong); }

/* Signal → decision flow */
.mk-flow{ list-style:none; position:relative; display:flex; flex-direction:column; gap:0; }
.mk-flow::before{ content:""; position:absolute; left:15px; top:16px; bottom:16px; width:2px; background:linear-gradient(var(--mk-brand),var(--mk-border)); opacity:.5; }
.mk-flow > li{ position:relative; display:grid; grid-template-columns:32px minmax(0,1fr); gap:18px; padding-block:14px; }
.mk-flow__n{ width:32px; height:32px; border-radius:50%; background:var(--mk-canvas); border:2px solid var(--mk-brand); color:var(--mk-brand-hover); font:600 .75rem/28px var(--font-mono); text-align:center; z-index:1; }
.mk-flow h3{ font-size:1.0625rem; margin-bottom:4px; }
.mk-flow p{ font-size:var(--mk-body-sm); color:var(--mk-text-2); }
.mk-flow__ex{ margin-top:8px; padding:10px 12px; background:var(--mk-warm); border:1px solid var(--mk-border); border-radius:var(--mk-r-1); font-size:.8125rem; color:var(--mk-text); }
.mk-band--warm .mk-flow__n{ background:var(--mk-warm); }

/* Intelligence graph */
.mk-graph{ position:relative; width:100%; aspect-ratio:16/11; border:1px solid var(--mk-border); border-radius:var(--mk-r-3); background:var(--mk-canvas); overflow:hidden; }
.mk-graph svg{ width:100%; height:100%; display:block; }
.mk-graph__edge{ stroke:var(--mk-border-strong); stroke-width:1.2; fill:none; }
.mk-graph__edge.is-hot{ stroke:var(--mk-brand); stroke-width:1.8; stroke-dasharray:5 5; animation:mk-dash 3s linear infinite; }
@keyframes mk-dash{ to{ stroke-dashoffset:-40; } }
.mk-graph__node circle{ fill:var(--mk-canvas); stroke:var(--mk-ink); stroke-width:1.5; transition:fill .2s; }
.mk-graph__node.is-brand circle{ fill:var(--mk-brand); stroke:var(--mk-brand); }
.mk-graph__node.is-comp circle{ stroke:var(--mk-negative); }
.mk-graph__node.is-opp circle{ stroke:var(--mk-positive); }
.mk-graph__node text{ font:500 11px var(--font-body); fill:var(--mk-text); text-anchor:middle; }
.mk-graph__legend{ display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:14px; font-size:.8125rem; color:var(--mk-text-2); list-style:none; }
.mk-graph__legend li{ display:inline-flex; align-items:center; gap:8px; }
.mk-graph__legend i{ width:10px; height:10px; border-radius:50%; border:2px solid var(--mk-ink); display:inline-block; }
.mk-graph__legend i.is-brand{ background:var(--mk-brand); border-color:var(--mk-brand); } .mk-graph__legend i.is-comp{ border-color:var(--mk-negative); } .mk-graph__legend i.is-opp{ border-color:var(--mk-positive); }

/* Live feed */
.mk-feed{ list-style:none; display:flex; flex-direction:column; }
.mk-feed li{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--mk-border-dark); font-size:.8125rem; color:var(--mk-on-dark); animation:mk-feed-in .5s var(--mk-ease) both; }
.mk-feed li:last-child{ border-bottom:0; }
.mk-feed__k{ font:500 .6875rem/1 var(--font-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--mk-brand-on-dark); min-width:76px; }
.mk-feed__t{ font:400 .75rem/1 var(--font-mono); color:var(--mk-on-dark-2); }
@keyframes mk-feed-in{ from{ opacity:0; transform:translateY(-6px); } }

/* Analyst panel */
.mk-analyst{ display:flex; flex-direction:column; gap:14px; }
.mk-analyst__q{ align-self:flex-end; max-width:88%; background:var(--mk-brand-on-dark); color:#14102E; padding:10px 14px; border-radius:14px 14px 4px 14px; font-size:.875rem; font-weight:500; }
.mk-analyst__a{ background:rgba(255,255,255,.04); border:1px solid var(--mk-border-dark); border-radius:14px 14px 14px 4px; padding:16px; color:var(--mk-on-dark); font-size:.875rem; display:flex; flex-direction:column; gap:12px; }
.mk-analyst__ev{ list-style:none; display:flex; flex-direction:column; gap:6px; font-size:.8125rem; color:var(--mk-on-dark-2); }
.mk-analyst__ev li::before{ content:"›"; color:var(--mk-brand-on-dark); margin-right:8px; }
.mk-analyst__rec{ padding:12px; border-radius:var(--mk-r-1); background:rgba(181,166,255,.1); border:1px solid rgba(181,166,255,.25); font-size:.8125rem; }

/* Tabs */
.mk-tabs__list{ display:flex; flex-wrap:wrap; gap:4px; border-bottom:1px solid var(--mk-border); margin-bottom:32px; }
.mk-tabs__tab{ position:relative; min-height:44px; padding:0 16px; background:none; border:0; font:500 .9375rem/1 var(--font-body); color:var(--mk-text-2); cursor:pointer; border-radius:var(--mk-r-1) var(--mk-r-1) 0 0; }
.mk-tabs__tab:hover{ color:var(--mk-ink); }
.mk-tabs__tab[aria-selected="true"]{ color:var(--mk-ink); }
.mk-tabs__tab[aria-selected="true"]::after{ content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:2px; background:var(--mk-brand); }
.mk-tabs__panel[hidden]{ display:none; }
.mk-tabs__panel{ animation:mk-fade .28s var(--mk-ease); }
@keyframes mk-fade{ from{ opacity:0; transform:translateY(4px); } }

/* Trust strip */
.mk-trust{ list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; border-top:1px solid var(--mk-border); border-bottom:1px solid var(--mk-border); }
.mk-trust li{ padding:24px 24px 24px 0; }
.mk-trust li + li{ padding-left:24px; border-left:1px solid var(--mk-border); }
.mk-trust h3{ font-size:1rem; margin-bottom:6px; }
.mk-trust p{ font-size:var(--mk-body-sm); color:var(--mk-text-2); }

/* Numbered outcomes */
.mk-outcomes{ list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(24px,4vw,64px); counter-reset:o; }
.mk-outcomes li{ counter-increment:o; display:grid; grid-template-columns:44px minmax(0,1fr); gap:16px; padding:24px 0; border-top:1px solid var(--mk-border); }
.mk-outcomes li::before{ content:counter(o,decimal-leading-zero); font:500 .8125rem/1.6 var(--font-mono); color:var(--mk-brand); }
.mk-outcomes h3{ font-size:1.125rem; margin-bottom:6px; }
.mk-outcomes p{ font-size:var(--mk-body-sm); color:var(--mk-text-2); }

/* FAQ (native <details>: works without JS) */
.mk-faq{ border-top:1px solid var(--mk-border); }
.mk-faq details{ border-bottom:1px solid var(--mk-border); }
.mk-faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px 0; min-height:44px; font-weight:600; font-size:1.0625rem; color:var(--mk-ink); letter-spacing:-.01em; }
.mk-faq summary::-webkit-details-marker{ display:none; }
.mk-faq summary::after{ content:""; flex:none; width:12px; height:12px; background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat, linear-gradient(currentColor,currentColor) center/2px 100% no-repeat; transition:transform .25s var(--mk-ease); color:var(--mk-text-2); }
.mk-faq details[open] summary::after{ transform:rotate(45deg); }
.mk-faq summary:hover{ color:var(--mk-brand-hover); }
.mk-faq__a{ padding:0 0 22px; color:var(--mk-text-2); max-width:70ch; }
.mk-faq__a p + p{ margin-top:10px; }

/* CTA band */
.mk-cta{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:20px; }
.mk-cta h2{ max-width:20ch; }
.mk-cta .mk-lead{ margin-inline:auto; }
.mk-cta__note{ font-size:var(--mk-caption); color:var(--mk-text-3); }
.mk-band--dark .mk-cta__note{ color:var(--mk-on-dark-2); }

/* Related links */
.mk-related{ list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 32px; border-top:1px solid var(--mk-border); }
.mk-related a{ display:flex; flex-direction:column; gap:4px; padding:20px 0; border-bottom:1px solid var(--mk-border); }
.mk-related__k{ font:500 var(--mk-label)/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--mk-text-3); }
.mk-related__t{ font-weight:600; color:var(--mk-ink); display:flex; justify-content:space-between; gap:8px; }
.mk-related__d{ font-size:var(--mk-body-sm); color:var(--mk-text-2); }
.mk-related a:hover .mk-related__t{ color:var(--mk-brand-hover); }

/* Cards — reserved for genuine grouping (plans, articles, forms) */
.mk-card{ background:var(--mk-canvas); border:1px solid var(--mk-border); border-radius:var(--mk-r-2); overflow:hidden; display:flex; flex-direction:column; transition:border-color .2s, box-shadow .2s, transform .2s var(--mk-ease); }
a.mk-card:hover{ border-color:var(--mk-border-strong); box-shadow:var(--mk-shadow-2); transform:translateY(-2px); }
.mk-card__img{ aspect-ratio:16/9; background:var(--mk-muted); overflow:hidden; }
.mk-card__img img{ width:100%; height:100%; object-fit:cover; }
.mk-card__body{ padding:20px 22px 22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.mk-card__meta{ font:500 var(--mk-label)/1.2 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--mk-text-3); }
.mk-card h3{ font-size:1.125rem; letter-spacing:-.015em; }
.mk-card p{ font-size:var(--mk-body-sm); color:var(--mk-text-2); }
.mk-empty{ text-align:center; padding:clamp(40px,6vw,72px) 24px; border:1px dashed var(--mk-border-strong); border-radius:var(--mk-r-2); background:var(--mk-warm); display:flex; flex-direction:column; align-items:center; gap:12px; }
.mk-empty h3{ font-size:1.25rem; } .mk-empty p{ color:var(--mk-text-2); max-width:52ch; }

/* ---------- 10. PRICING ------------------------------------------------ */
.mk-plans{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:20px; align-items:stretch; }
.mk-plan{ display:flex; flex-direction:column; gap:18px; padding:clamp(24px,2.5vw,32px); background:var(--mk-canvas); border:1px solid var(--mk-border); border-radius:var(--mk-r-3); position:relative; }
.mk-plan.is-featured{ border-color:var(--mk-brand); box-shadow:0 0 0 1px var(--mk-brand), var(--mk-shadow-2); background:linear-gradient(180deg,var(--mk-tint),var(--mk-canvas) 38%); }
.mk-plan__flag{ position:absolute; top:-12px; left:24px; }
.mk-plan__name{ font-size:1.25rem; letter-spacing:-.02em; }
.mk-plan__for{ font-size:var(--mk-body-sm); color:var(--mk-text-2); min-height:3em; }
.mk-plan__price{ display:flex; align-items:baseline; gap:6px; }
.mk-plan__amount{ font:600 clamp(2.25rem,2rem + 1vw,3rem)/1 var(--font-display); letter-spacing:-.04em; color:var(--mk-ink); font-variant-numeric:tabular-nums; }
.mk-plan__per{ font-size:.875rem; color:var(--mk-text-3); }
.mk-plan__meta{ font-size:.8125rem; color:var(--mk-text-3); }
.mk-plan .mk-check{ flex:1; padding-top:18px; border-top:1px solid var(--mk-border); }
.mk-compare{ width:100%; border-collapse:separate; border-spacing:0; font-size:.9375rem; min-width:640px; }
.mk-compare caption{ text-align:left; padding-bottom:16px; }
.mk-compare th, .mk-compare td{ padding:14px 16px; border-bottom:1px solid var(--mk-border); text-align:center; }
.mk-compare thead th{ position:sticky; top:0; background:var(--mk-canvas); font-weight:600; color:var(--mk-ink); border-bottom:1px solid var(--mk-border-strong); z-index:2; }
.mk-compare tbody th{ text-align:left; font-weight:500; color:var(--mk-text); position:sticky; left:0; background:var(--mk-canvas); z-index:1; min-width:180px; }
.mk-compare thead th:first-child{ left:0; text-align:left; z-index:3; }
.mk-compare .is-featured{ background:var(--mk-tint); }
.mk-compare__yes{ color:var(--mk-positive); font-weight:700; }
.mk-compare__no{ color:var(--mk-text-3); }
.mk-compare__txt{ font-family:var(--font-mono); font-size:.8125rem; color:var(--mk-text); }
.mk-scrollhint{ display:none; font-size:.8125rem; color:var(--mk-text-3); margin-bottom:8px; }

/* ---------- 11. FORMS + ALERTS ----------------------------------------- */
.mk-form{ display:flex; flex-direction:column; gap:20px; }
.mk-form__row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.mk-field{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.mk-label{ font-weight:600; font-size:.9375rem; color:var(--mk-ink); }
.mk-label .mk-opt{ font-weight:400; color:var(--mk-text-3); font-size:.8125rem; margin-left:6px; }
.mk-hint{ font-size:.8125rem; color:var(--mk-text-3); line-height:1.45; }
.mk-input{
  width:100%; min-height:46px; padding:11px 14px; font:400 1rem/1.4 var(--font-body); color:var(--mk-ink);
  background:var(--mk-canvas); border:1px solid var(--mk-border-strong); border-radius:var(--mk-r-1);
  transition:border-color .15s, box-shadow .15s, background-color .15s; appearance:none;
}
textarea.mk-input{ min-height:132px; resize:vertical; }
select.mk-input{ padding-right:40px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%234B5263' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:12px; }
.mk-input::placeholder{ color:var(--mk-text-3); opacity:.8; }
.mk-input:hover{ border-color:var(--mk-text-3); }
.mk-input:focus{ outline:none; border-color:var(--mk-brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--mk-brand) 22%,transparent); }
.mk-input:disabled{ background:var(--mk-muted); color:var(--mk-text-3); cursor:not-allowed; }
.mk-input[aria-invalid="true"]{ border-color:var(--mk-negative); }
.mk-input[aria-invalid="true"]:focus{ box-shadow:0 0 0 3px color-mix(in srgb,var(--mk-negative) 22%,transparent); }
.mk-error{ font-size:.8125rem; color:var(--mk-negative); font-weight:500; }
.mk-hp{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; }
.mk-formcard{ background:var(--mk-canvas); border:1px solid var(--mk-border); border-radius:var(--mk-r-3); padding:clamp(24px,3.5vw,40px); box-shadow:var(--mk-shadow-2); }
.mk-alert{ display:flex; gap:12px; padding:14px 16px; border-radius:var(--mk-r-1); font-size:.9375rem; border:1px solid transparent; }
.mk-alert--success{ background:var(--mk-positive-tint); color:#075B40; border-color:#BFE6D5; }
.mk-alert--error{ background:var(--mk-negative-tint); color:#8E1A31; border-color:#F2C2CC; }
.mk-alert--info{ background:var(--mk-info-tint); color:#164C9E; }
.mk-alert--warning{ background:var(--mk-warning-tint); color:#6E4700; }
.mk-alert[role]{ scroll-margin-top:96px; }
.mk-privacy{ font-size:.8125rem; color:var(--mk-text-3); line-height:1.5; }

/* channel list (contact) */
.mk-channels{ list-style:none; border-top:1px solid var(--mk-border); }
.mk-channels li{ padding:18px 0; border-bottom:1px solid var(--mk-border); }
.mk-channels h3{ font-size:1rem; margin-bottom:4px; }
.mk-channels p{ font-size:var(--mk-body-sm); color:var(--mk-text-2); }

/* ---------- 12. ARTICLE / LEGAL / INSIGHTS ----------------------------- */
.mk-article__head{ padding-block:clamp(40px,5vw,72px) 32px; }
.mk-article__title{ font-size:var(--mk-display-lg); letter-spacing:-.03em; line-height:1.08; max-width:22ch; }
.mk-article__dek{ font-size:var(--mk-body-lg); color:var(--mk-text-2); margin-top:16px; max-width:56ch; }
.mk-article__meta{ display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:20px; font-size:.875rem; color:var(--mk-text-3); }
.mk-article__cover{ margin-bottom:clamp(32px,4vw,56px); border-radius:var(--mk-r-3); overflow:hidden; border:1px solid var(--mk-border); }
.mk-article__cover img{ width:100%; height:auto; aspect-ratio:16/8; object-fit:cover; }
.mk-layout{ display:grid; grid-template-columns:minmax(0,220px) minmax(0,var(--mk-measure)); gap:clamp(32px,5vw,80px); justify-content:center; align-items:start; }
.mk-layout--solo{ grid-template-columns:minmax(0,var(--mk-measure)); }
.mk-toc{ position:sticky; top:calc(var(--mk-header-h) + 24px); font-size:.875rem; }
.mk-toc h2{ font:500 var(--mk-label)/1 var(--font-mono); letter-spacing:.09em; text-transform:uppercase; color:var(--mk-text-3); margin-bottom:14px; }
.mk-toc ol, .mk-toc ul{ list-style:none; display:flex; flex-direction:column; border-left:1px solid var(--mk-border); }
.mk-toc a{ display:block; padding:7px 0 7px 16px; margin-left:-1px; border-left:2px solid transparent; color:var(--mk-text-2); line-height:1.35; }
.mk-toc a:hover{ color:var(--mk-ink); }
.mk-toc a.is-active{ color:var(--mk-brand-hover); border-left-color:var(--mk-brand); font-weight:600; }
.mk-prose{ font-size:1.0625rem; line-height:1.75; color:var(--mk-text); overflow-wrap:anywhere; }
.mk-prose > * + *{ margin-top:1.15em; }
.mk-prose h2{ font-size:var(--mk-h2); margin-top:2.2em; scroll-margin-top:calc(var(--mk-header-h) + 24px); }
.mk-prose h3{ font-size:var(--mk-h3); margin-top:1.8em; scroll-margin-top:calc(var(--mk-header-h) + 24px); }
.mk-prose h4{ margin-top:1.6em; }
.mk-prose a{ color:var(--mk-brand-hover); text-decoration:underline; text-underline-offset:3px; }
.mk-prose ul, .mk-prose ol{ padding-left:1.4em; }
.mk-prose li + li{ margin-top:.4em; }
.mk-prose blockquote{ margin-inline:0; padding:4px 0 4px 22px; border-left:3px solid var(--mk-brand); font-size:1.25rem; line-height:1.5; color:var(--mk-ink); font-weight:500; letter-spacing:-.01em; }
.mk-prose img{ border-radius:var(--mk-r-2); margin-block:1.6em; }
.mk-prose table{ width:100%; border-collapse:collapse; font-size:.9375rem; display:block; overflow-x:auto; }
.mk-prose th, .mk-prose td{ padding:10px 12px; border:1px solid var(--mk-border); text-align:left; }
.mk-prose th{ background:var(--mk-warm); }
.mk-prose pre, .mk-prose code{ font-family:var(--font-mono); font-size:.875em; }
.mk-prose code{ background:var(--mk-muted); padding:.15em .4em; border-radius:4px; }
.mk-prose pre{ background:var(--mk-dark); color:var(--mk-on-dark); padding:16px 18px; border-radius:var(--mk-r-2); overflow-x:auto; }
.mk-prose pre code{ background:none; padding:0; }
.mk-prose hr{ border:0; border-top:1px solid var(--mk-border); margin-block:2.2em; }
.mk-prose--legal{ font-size:1rem; line-height:1.7; }
.mk-prose--legal h2{ font-size:1.375rem; margin-top:2em; }
.mk-updated{ font-size:.875rem; color:var(--mk-text-3); }
.mk-filters{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin-bottom:32px; }
.mk-filters a{ display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border:1px solid var(--mk-border-strong); border-radius:999px; font-size:.875rem; font-weight:500; color:var(--mk-text); transition:background-color .15s,border-color .15s,color .15s; }
.mk-filters a:hover{ border-color:var(--mk-ink); }
.mk-filters a[aria-current="page"]{ background:var(--mk-ink); color:#fff; border-color:var(--mk-ink); }
.mk-feature-post{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:center; }
.mk-feature-post__img{ aspect-ratio:16/10; border-radius:var(--mk-r-3); overflow:hidden; background:var(--mk-muted); border:1px solid var(--mk-border); }
.mk-feature-post__img img{ width:100%; height:100%; object-fit:cover; }
.mk-pagination{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:40px; list-style:none; }
.mk-pagination a, .mk-pagination span{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0 12px; border:1px solid var(--mk-border-strong); border-radius:var(--mk-r-1); font-weight:500; }
.mk-pagination .is-current{ background:var(--mk-ink); color:#fff; border-color:var(--mk-ink); }
.mk-pagination a:hover{ border-color:var(--mk-ink); }
.mk-tool-context{ border-top:1px solid var(--mk-border); }

/* ---------- 13. UTILITY PAGES ------------------------------------------ */
.mk-error-page{ min-height:min(70vh,720px); display:flex; align-items:center; }
.mk-error-page__code{ font:500 clamp(4rem,3rem + 6vw,8rem)/1 var(--font-mono); color:var(--mk-brand); letter-spacing:-.06em; }
.mk-linklist{ list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 32px; border-top:1px solid var(--mk-border); max-width:560px; }
.mk-linklist a{ display:flex; justify-content:space-between; gap:8px; padding:14px 0; border-bottom:1px solid var(--mk-border); font-weight:500; color:var(--mk-ink); }
.mk-linklist a:hover{ color:var(--mk-brand-hover); }
.mk-steps{ list-style:none; counter-reset:s; display:flex; flex-direction:column; gap:0; }
.mk-steps li{ counter-increment:s; display:grid; grid-template-columns:36px minmax(0,1fr); gap:16px; padding:18px 0; border-bottom:1px solid var(--mk-border); }
.mk-steps li::before{ content:counter(s); width:32px; height:32px; border-radius:50%; background:var(--mk-brand-tint); color:var(--mk-brand-hover); display:grid; place-items:center; font:600 .8125rem var(--font-mono); }
.mk-steps h3{ font-size:1.0625rem; margin-bottom:4px; } .mk-steps p{ color:var(--mk-text-2); font-size:var(--mk-body-sm); }
.mk-stat-row{ display:flex; flex-wrap:wrap; gap:24px 48px; }
.mk-stat-row > div{ display:flex; flex-direction:column; gap:6px; }
.mk-stat-row .mk-caption{ max-width:22ch; }

/* ---------- 14. LEGACY REMAP -------------------------------------------
   Older shared classes (design-system.css / foundation.css) are dark-first
   or app-flavoured. Pages not yet rebuilt on mk-* primitives (free tools,
   interactive demo, shared reports) still use them, so on the public shell
   they are re-themed here to the same light system. This is the one place
   that knowledge lives; delete a block only after its last consumer is gone.
   ---------------------------------------------------------------------- */
.mk section:not([class*="mk-"]){ padding-block:0; } /* legacy sections only; mk-section owns its rhythm */
.mk .surface-ink, .mk .surface-paper{ background:var(--mk-warm); color:var(--mk-text); }
.mk .surface-paper{ background:var(--mk-canvas); }
.mk .surface-ink .label, .mk .surface-paper .label, .mk .label{ color:var(--mk-text-3); }
.mk .surface-ink .lead, .mk .surface-paper .lead, .mk .lead{ color:var(--mk-text-2); font-size:var(--mk-body-lg); max-width:60ch; }
.mk .surface-ink .dek, .mk .surface-paper .dek, .mk .section-head .dek{ color:var(--mk-text-2); }
.mk .hairline, .mk .surface-ink .hairline{ border-top:1px solid var(--mk-border); }
.mk .hero{ padding:clamp(40px,5vw,80px) 0; background:var(--mk-warm); }
.mk .hero h1{ font-size:var(--mk-h1); letter-spacing:-.03em; color:var(--mk-ink); }
.mk .eyebrow, .mk .surface-paper .eyebrow{ font:500 var(--mk-label)/1 var(--font-mono); letter-spacing:.09em; text-transform:uppercase; color:var(--mk-brand); margin-bottom:14px; display:block; }
.mk .section-head h2{ font-size:var(--mk-h2); color:var(--mk-ink); }
.mk .text-muted{ color:var(--mk-text-3); }
.mk .text-center{ text-align:center; }
.mk .btn{ min-height:44px; padding:0 20px; font-weight:600; border-radius:var(--mk-r-1); justify-content:center; }
.mk .btn-primary{ background:var(--mk-brand); color:#fff; border-color:var(--mk-brand); box-shadow:none; }
.mk .btn-primary:hover{ background:var(--mk-brand-hover); border-color:var(--mk-brand-hover); color:#fff; }
.mk .btn-outline, .mk .btn-secondary, .mk .surface-ink .btn-outline{ background:transparent; color:var(--mk-ink); border-color:var(--mk-border-strong); }
.mk .btn-outline:hover, .mk .btn-secondary:hover, .mk .surface-ink .btn-outline:hover{ border-color:var(--mk-ink); color:var(--mk-ink); }
.mk .btn-ghost, .mk .surface-ink .btn-ghost{ color:var(--mk-brand-hover); border-bottom-color:transparent; padding:0 6px; }
.mk .btn-sm{ min-height:38px; padding:0 14px; }
.mk .btn-lg{ min-height:52px; padding:0 26px; }
.mk .btn-block{ width:100%; }
.mk .card, .mk .card-outline, .mk .card-feature, .mk .card-highlight, .mk .panel, .mk .form-card{ background:var(--mk-canvas); color:var(--mk-text); border:1px solid var(--mk-border); border-radius:var(--mk-r-2); }
.mk .card:hover{ background:var(--mk-canvas); }
.mk .cards-grid{ background:none; border:0; gap:24px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.mk .card-body p, .mk .card-meta{ color:var(--mk-text-2); }
.mk .card-img{ background:var(--mk-muted); }
.mk .form-card{ max-width:640px; padding:clamp(24px,3.5vw,40px); box-shadow:var(--mk-shadow-2); }
.mk .form-group{ margin-bottom:20px; }
.mk .form-group label, .mk .field label{ display:block; font-weight:600; font-size:.9375rem; color:var(--mk-ink); margin-bottom:8px; }
.mk .form-control, .mk .field input, .mk .field select, .mk .field textarea{ width:100%; min-height:46px; padding:11px 14px; font:400 1rem/1.4 var(--font-body); color:var(--mk-ink); background:var(--mk-canvas); border:1px solid var(--mk-border-strong); border-radius:var(--mk-r-1); }
.mk .form-control:focus, .mk .field input:focus, .mk .field select:focus, .mk .field textarea:focus{ outline:none; border-color:var(--mk-brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--mk-brand) 22%,transparent); }
.mk textarea.form-control{ min-height:132px; }
.mk .form-row{ gap:20px; }
.mk .badge{ display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; font:500 var(--mk-label)/1.2 var(--font-mono); letter-spacing:.04em; text-transform:uppercase; background:var(--mk-muted); color:var(--mk-text-2); }
.mk .badge-info{ background:var(--mk-info-tint); color:var(--mk-info); } .mk .badge-warning{ background:var(--mk-warning-tint); color:var(--mk-warning); } .mk .badge-danger{ background:var(--mk-negative-tint); color:var(--mk-negative); } .mk .badge-success{ background:var(--mk-positive-tint); color:var(--mk-positive); }
.mk .alert{ padding:14px 16px; border-radius:var(--mk-r-1); margin-bottom:20px; font-size:.9375rem; border:1px solid transparent; }
.mk .alert-success{ background:var(--mk-positive-tint); color:#075B40; border-color:#BFE6D5; }
.mk .alert-danger, .mk .alert-error{ background:var(--mk-negative-tint); color:#8E1A31; border-color:#F2C2CC; }
.mk .alert-info{ background:var(--mk-info-tint); color:#164C9E; } .mk .alert-warning{ background:var(--mk-warning-tint); color:#6E4700; }
.mk .empty-state, .mk .surface-ink .empty-state, .mk .surface-paper .empty-state{ border:1px dashed var(--mk-border-strong); background:var(--mk-warm); color:var(--mk-text-2); border-radius:var(--mk-r-2); padding:40px 24px; text-align:center; }
.mk .empty-state h3, .mk .surface-ink .empty-state h3{ color:var(--mk-ink); }
.mk .checklist li, .mk .surface-ink .checklist li{ border-color:var(--mk-border); color:var(--mk-text-2); }
.mk .metric-strip{ background:var(--mk-canvas); border-color:var(--mk-border); }
.mk .metric-value, .mk .surface-ink .metric-value{ color:var(--mk-ink); }
.mk .bench-table th{ color:var(--mk-text-3); border-color:var(--mk-border); } .mk .bench-table td{ border-color:var(--mk-border); color:var(--mk-text); }
.mk .data-table th, .mk .data-table td{ border-color:var(--mk-border); }
.mk .blog-content{ font-size:1.0625rem; line-height:1.75; color:var(--mk-text); }
.mk .blog-content h2{ font-size:var(--mk-h2); margin:1.8em 0 .6em; } .mk .blog-content h3{ font-size:var(--mk-h3); margin:1.5em 0 .5em; }
.mk .blog-content p{ margin:0 0 1.1em; } .mk .blog-content a{ color:var(--mk-brand-hover); text-decoration:underline; }
.mk .blog-content img{ border-radius:var(--mk-r-2); margin-block:1.4em; }
.mk .filter-bar{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.mk .tool-row:hover{ background:var(--mk-muted); }
.mk .demo-node, .mk .demo-kpi{ background:var(--mk-canvas); color:var(--mk-text); border-color:var(--mk-border); }
.mk .demo-badge{ background:var(--mk-brand-tint); color:var(--mk-brand-hover); }
.mk .cmp-check{ color:var(--mk-positive); } .mk .cmp-x, .mk .cmp-dash{ color:var(--mk-text-3); }

/* ---------- 15. RESPONSIVE --------------------------------------------- */
@media (max-width:1180px){
  .mk-footer__top{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .mk-footer__brand{ grid-column:1 / -1; }
  .mk-footer__brand p{ max-width:60ch; }
}
@media (max-width:1023px){
  :root{ --mk-header-h:64px; }
  .mk-nav-toggle{ display:inline-flex; }
  .mk-header__signin{ display:none; }
  .mk-nav{ position:fixed; inset:var(--mk-header-h) 0 0 0; background:var(--mk-canvas); overflow-y:auto; overscroll-behavior:contain; padding:8px var(--mk-gutter) 32px; transform:translateY(-8px); opacity:0; visibility:hidden; transition:opacity .2s var(--mk-ease), transform .2s var(--mk-ease), visibility 0s linear .2s; border-top:1px solid var(--mk-border); flex:none; }
  .mk-nav.is-open{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
  .mk-nav__list{ flex-direction:column; align-items:stretch; gap:0; }
  .mk-nav__item{ border-bottom:1px solid var(--mk-border); }
  .mk-nav__trigger, .mk-nav__link{ width:100%; justify-content:space-between; min-height:54px; padding:0 4px; font-size:1.0625rem; border-radius:0; }
  .mk-nav__trigger:hover, .mk-nav__link:hover, .mk-nav__trigger[aria-expanded="true"]{ background:none; }
  .mk-menu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; display:none; transition:none; }
  .mk-menu.is-open{ display:block; }
  .mk-menu__inner{ grid-template-columns:1fr; padding:0 0 16px; gap:12px; }
  .mk-menu__aside{ display:none; }
  .mk-menu-scrim{ display:none; }
  .mk-nav__cta{ display:flex; flex-direction:column; gap:10px; margin-top:24px; }
  body.mk.is-nav-open{ overflow:hidden; }
}
@media (min-width:1024px){ .mk-nav__cta{ display:none; } }
@media (max-width:1023px){
  .mk-split, .mk-cap{ grid-template-columns:minmax(0,1fr); }
  .mk-hero__grid{ grid-template-columns:minmax(0,1fr); }
  .mk-split > .mk-split__a, .mk-split > .mk-split__b, .mk-split--even > .mk-split__a, .mk-split--even > .mk-split__b{ grid-column:1 / -1; }
  .mk-split--flip > .mk-split__a{ order:0; }
  .mk-cap__lead, .mk-cap__side{ grid-column:1 / -1; }
  .mk-cap__more{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mk-loop{ grid-template-columns:1fr; }
  .mk-loop > li{ padding:24px 0 24px 28px; border-left:2px solid var(--mk-border); }
  .mk-loop > li::before{ display:none; }
  .mk-loop > li::after{ top:0; left:-2px; width:2px; height:0; transition:height .8s var(--mk-ease); }
  .mk-loop.is-in > li::after{ width:2px; height:100%; }
  .mk-trust{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mk-trust li:nth-child(3){ padding-left:0; border-left:0; }
  .mk-trust li:nth-child(n+3){ border-top:1px solid var(--mk-border); }
  .mk-grid{ --cols:2; } .mk-grid--4{ --cols:2; }
  .mk-related{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mk-layout{ grid-template-columns:minmax(0,1fr); }
  .mk-toc{ position:static; border:1px solid var(--mk-border); border-radius:var(--mk-r-2); padding:16px 18px; background:var(--mk-warm); }
  .mk-feature-post{ grid-template-columns:1fr; }
  .mk-cols{ --cols:2; }
  .mk-cols > *:nth-child(odd){ padding-left:0; border-left:0; }
  .mk-scrollhint{ display:block; }
  .mk .cards-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:719px){
  .mk-header__actions .mk-btn--primary{ display:none; }
  .mk-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mk-app__row{ grid-template-columns:1fr; }
  .mk-rows > li{ grid-template-columns:1fr; gap:6px; padding:22px 0; }
  .mk-outcomes{ grid-template-columns:1fr; }
  .mk-grid, .mk-grid--3, .mk-grid--4, .mk-grid--2{ --cols:1; }
  .mk-form__row{ grid-template-columns:1fr; }
  .mk-footer__top{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mk-cap__more{ grid-template-columns:1fr; }
  .mk-related{ grid-template-columns:1fr; }
  .mk-cols{ --cols:1; }
  .mk-cols > *, .mk-cols > * + *{ padding:22px 0; border-left:0; }
  .mk-trust{ grid-template-columns:1fr; }
  .mk-trust li, .mk-trust li + li{ padding:20px 0; border-left:0; }
  .mk-trust li + li{ border-top:1px solid var(--mk-border); }
  .mk-linklist{ grid-template-columns:1fr; }
  .mk-hero__cta .mk-btn{ flex:1 1 100%; }
  .mk-cta .mk-hero__cta{ width:100%; }
  .mk .cards-grid{ grid-template-columns:1fr; }
  .mk .form-row{ grid-template-columns:1fr; }
  .mk-footer__bottom{ flex-direction:column; align-items:flex-start; }
  .mk-app__body{ padding:12px; }
}
@media (max-width:359px){
  .mk-kpis{ grid-template-columns:1fr; }
  .mk-logo span{ font-size:.9375rem; }
  .mk-footer__top{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .mk *,.mk *::before,.mk *::after{ animation-duration:.001ms; animation-iteration-count:1; transition-duration:.001ms; scroll-behavior:auto; }
  .mk-chart__line{ stroke-dashoffset:0; }
  .mk-loop > li::after{ width:100%; height:100%; }
}

/* ---------- 16. PRINT -------------------------------------------------- */
@media print{
  .mk-header, .mk-footer, .mk-cta-band, .mk-toc, .mk-skip, .mk-menu-scrim{ display:none; }
  body.mk{ color:#000; background:#fff; }
  .mk-prose{ font-size:11pt; line-height:1.55; }
  .mk-prose a{ color:#000; text-decoration:underline; }
  .mk-prose a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; }
  .mk-layout{ display:block; }
}

/* No-JS fallback: header gets .js from site.js; until then, menus open on hover/focus (desktop only) */
@media (min-width:1024px){
  .mk-header:not(.js) .mk-nav__item:hover > .mk-menu,
  .mk-header:not(.js) .mk-nav__item:focus-within > .mk-menu{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
}
@media (max-width:1023px){
  .mk-header:not(.js) .mk-nav{ position:static; opacity:1; visibility:visible; transform:none; padding:0; border:0; }
  .mk-header:not(.js) .mk-nav-toggle{ display:none; }
  .mk-header:not(.js) .mk-menu{ display:block; }
}

.mk-app__cap{ padding:0 16px 14px; }
.mk-list-cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,4vw,64px); }
.mk-list-cols h3{ font-size:1.125rem; margin-bottom:16px; }
.mk-prose-lite p + p{ margin-top:12px; }
.mk-prose-lite p{ color:var(--mk-text-2); }
@media (max-width:719px){ .mk-list-cols{ grid-template-columns:1fr; } }

/* Legacy alias tokens: older inline styles reference --cream* and --amber, which are "text on a dark band" values.
   On the light public shell they must resolve to readable ink colours. */
.mk{ --cream:var(--mk-ink); --cream-70:var(--mk-text-2); --cream-50:var(--mk-text-3); --amber:var(--mk-brand-hover); --ink-70:var(--mk-text-2); --ink-50:var(--mk-text-3); --line-dark:var(--mk-border); --line-light:var(--mk-border); }
.mk-tool-list{ list-style:none; border-top:1px solid var(--mk-border); }
.mk-tool-list a{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr) auto; gap:8px 32px; align-items:center; padding:22px 0; border-bottom:1px solid var(--mk-border); transition:padding-left .2s var(--mk-ease); }
.mk-tool-list a:hover{ padding-left:8px; }
.mk-tool-list h3{ font-size:1.0625rem; } .mk-tool-list p{ color:var(--mk-text-2); font-size:var(--mk-body-sm); }
@media (max-width:719px){ .mk-tool-list a{ grid-template-columns:1fr auto; } .mk-tool-list a p{ grid-column:1 / -1; } }

.mk-nav-toggle .mk-ico-close{ display:none; }
.mk-nav-toggle[aria-expanded="true"] .mk-ico-open{ display:none; }
.mk-nav-toggle[aria-expanded="true"] .mk-ico-close{ display:inline-flex; }
.mk-nav-toggle span{ display:inline-flex; }

/* --------------------------------------------------------------------------
   FREE TOOLS — shared result components (website-audit.php, seo-audit.php,
   and future single-run tools under /tools/*). These two pages previously
   duplicated the exact same score-ring, issue-card and hero-form markup as
   page-specific inline styles. Only the genuinely dynamic value — the ring
   color, computed per score — stays inline, as a CSS custom property.
   -------------------------------------------------------------------------- */
.tool-hero{ padding:60px 0 50px; }
.tool-hero-title{ font-size:36px; max-width:820px; }
.lead.is-narrow{ max-width:640px; }
.tool-input-form{ display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; max-width:560px; }
.tool-input{
  flex:1; min-width:220px; padding:12px 16px; border-radius:8px;
  border:1px solid var(--border); background:var(--surface-2); color:var(--text); font-size:.95rem;
}
.container.is-narrow{ max-width:640px; }
.container.is-medium{ max-width:760px; }
.container.is-wide-md{ max-width:900px; }

.tool-score-card{ display:grid; grid-template-columns:auto 1fr; gap:36px; align-items:center; }
.tool-score-ring{
  width:120px; height:120px; border-radius:50%;
  border:8px solid var(--ring-color, var(--accent));
  display:flex; align-items:center; justify-content:center; margin:0 auto;
}
.tool-score-value{ font-size:2rem; font-family:var(--font-mono); color:var(--text); }
.tool-score-col{ text-align:center; }
.tool-score-caption{ color:var(--text-muted); font-size:.8rem; margin-top:10px; }
.tool-result-url{ word-break:break-all; }
.tool-result-meta{ color:var(--text-secondary); font-size:.9rem; margin-top:6px; }
.tool-result-badges{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }

.section-head.is-narrow{ max-width:640px; margin-bottom:28px; }
.tool-issue-list{ display:flex; flex-direction:column; gap:14px; }
.tool-issue-card{ padding:18px 22px; }
.tool-issue-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tool-issue-desc{ color:var(--text-secondary); font-size:.9rem; margin-top:8px; }
.tool-issue-page{ color:var(--text-muted); font-size:.78rem; margin-top:4px; word-break:break-all; }
.tool-issue-fix{ color:var(--text); font-size:.88rem; margin-top:6px; }
.tool-more-note{ color:var(--text-muted); font-size:.82rem; margin-top:16px; }
.tool-cta-section{ padding-block:72px; }

.data-table.is-full{ width:100%; }
.cell-score{ font-family:var(--font-mono); }

/* .finding — free-tool result finding row (was referenced but undefined;
   both email-deliverability-checker.php and landing-page-scorecard.php
   duplicated its actual styling as inline style="" instead). */
.finding{ padding:12px 0; border-bottom:1px solid var(--border-color, #e5e5e5); }
.tool-hero.is-compact{ padding:56px 0 40px; }
.success-text{ color:var(--success); }
.demo-node.is-danger-border{ border-color:var(--danger); }

/* Benchmark Delta (Performance Benchmarks page) — extends the existing
   .mk-bar__track/.mk-bar__fill pair with a target marker instead of adding
   a new chart component. Phase 2. */
.mk-bar__track{ position:relative; }
.mk-bar__track.has-target{ overflow:visible; }
.mk-bar__target{ position:absolute; top:-3px; bottom:-3px; width:2px; left:var(--target,50%); background:var(--mk-text); }
.mk-bar__target::after{ content:attr(data-label); position:absolute; top:-16px; left:50%; transform:translateX(-50%); font-size:.66rem; color:var(--mk-text-2); white-space:nowrap; }
.mk-delta{ font-family:var(--font-mono); font-size:.72rem; margin-left:6px; }
.mk-delta.is-pos{ color:var(--mk-positive); } .mk-delta.is-neg{ color:var(--mk-negative); }