/* ============================================================
   Koklo Nya — public marketing site
   Single, self-contained stylesheet. No external @imports, no CDN.
   Self-hosted Inter, design-system tokens, component + layout CSS.
   Built so a strict CSP (style-src 'self', no 'unsafe-inline') holds:
   there are zero inline styles in the HTML.
   A product of logNsec LLC.
   ============================================================ */

/* ---------- Fonts (self-hosted; no Google Fonts) ---------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/InterVariable.woff2') format('woff2-variations'),
       url('/fonts/InterVariable.woff2') format('woff2');
}

/* ============================================================
   Tokens
   ============================================================ */
:root {
  /* Terracotta (brand / primary) */
  --terracotta-50:#fcf1ec; --terracotta-100:#f8dfd4; --terracotta-200:#efbba4;
  --terracotta-300:#e59674; --terracotta-400:#dc7049; --terracotta-500:#d04c24;
  --terracotta-600:#a8451f; --terracotta-700:#8a3a1b; --terracotta-800:#6e2f18; --terracotta-900:#552513;
  /* Amber / gold */
  --amber-50:#fdf6e8; --amber-100:#fae8c2; --amber-200:#f3d086; --amber-300:#ecb44c;
  --amber-400:#e89a22; --amber-500:#ce7f12; --amber-600:#a86310; --amber-700:#824b10;
  /* Espresso (ink + dark surfaces) */
  --espresso-50:#f6f2ee; --espresso-100:#e9e0d8; --espresso-200:#d3c4b6; --espresso-300:#b09a86;
  --espresso-400:#8a7058; --espresso-500:#6b5340; --espresso-600:#523e2e; --espresso-700:#3b2418;
  --espresso-800:#2a1810; --espresso-900:#1c0f09;
  /* Warm taupe neutrals */
  --neutral-0:#ffffff; --neutral-50:#faf8f5; --neutral-100:#f4f0ea; --neutral-200:#eae4dc;
  --neutral-300:#dbd2c7; --neutral-400:#bcb1a3; --neutral-500:#897e6f; --neutral-600:#6b6151;
  --neutral-700:#4e4639; --neutral-800:#332d24; --neutral-900:#211c15;
  /* Status */
  --green-50:#e8f5ec; --green-100:#c8e8d2; --green-500:#1e874b; --green-600:#176b3c; --green-700:#12552f;
  --warn-50:#fdf3e3; --warn-100:#f9e1bd; --warn-500:#c9760e; --warn-600:#a35e0a; --warn-700:#804a09;
  --red-50:#fceae9; --red-100:#f6cbc9; --red-500:#c92a2a; --red-600:#a81e1e; --red-700:#861818;
  --blue-50:#e9f0fc; --blue-100:#c6d8f5; --blue-500:#2563c7; --blue-600:#1d4fa0; --blue-700:#173e7d;

  /* Semantic aliases */
  --color-bg:var(--neutral-50); --color-surface:var(--neutral-0);
  --color-surface-sunken:var(--neutral-100); --color-surface-hover:var(--neutral-100);
  --color-surface-inverse:var(--espresso-800);
  --color-border:var(--neutral-200); --color-border-strong:var(--neutral-300);
  --color-border-inverse:rgba(255,255,255,.16);
  --color-text:var(--espresso-800); --color-text-secondary:var(--neutral-600);
  --color-text-muted:var(--neutral-500); --color-text-inverse:var(--neutral-0);
  --color-text-on-brand:#ffffff; --color-text-link:var(--terracotta-600);
  --color-brand-terracotta:var(--terracotta-500); --color-brand-amber:var(--amber-400);
  --color-brand-espresso:var(--espresso-700);
  --color-primary:var(--terracotta-600); --color-primary-hover:var(--terracotta-700);
  --color-primary-active:var(--terracotta-800); --color-primary-subtle:var(--terracotta-50);
  --color-accent:var(--terracotta-500); --color-focus:var(--terracotta-500);
  --color-success:var(--green-500); --color-success-bg:var(--green-50);
  --color-success-border:var(--green-100); --color-success-text:var(--green-700);
  --color-warning:var(--warn-500); --color-warning-bg:var(--warn-50);
  --color-warning-border:var(--warn-100); --color-warning-text:var(--warn-700);
  --color-error:var(--red-500); --color-error-bg:var(--red-50);
  --color-error-border:var(--red-100); --color-error-text:var(--red-700);
  --color-info:var(--blue-500); --color-info-bg:var(--blue-50);
  --color-info-border:var(--blue-100); --color-info-text:var(--blue-700);

  /* Type */
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --numeric-tabular:"tnum" 1,"lnum" 1,"cv01" 1;
  --text-2xs:.6875rem; --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-md:1.0625rem;
  --text-lg:1.25rem; --text-xl:1.5rem; --text-2xl:1.875rem; --text-3xl:2.25rem; --text-4xl:3rem;
  --text-5xl:3.75rem; --text-6xl:4.5rem;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-extrabold:800;
  --leading-none:1; --leading-tight:1.1; --leading-snug:1.25; --leading-normal:1.5; --leading-relaxed:1.65;
  --tracking-tighter:-.03em; --tracking-tight:-.02em; --tracking-snug:-.01em; --tracking-normal:0;
  --tracking-wide:.02em; --tracking-caps:.06em;
  --font-heading:var(--font-sans); --font-body:var(--font-sans);

  /* Spacing + layout */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem;
  --space-6:1.5rem; --space-7:1.75rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem;
  --space-14:3.5rem; --space-16:4rem; --space-20:5rem; --space-24:6rem; --space-28:7rem; --space-32:8rem;
  --container-max:1200px; --container-narrow:720px;
  --gutter:1.5rem; --gutter-lg:2rem; --section-y:6rem; --section-y-sm:4rem;

  /* Radius */
  --radius-xs:4px; --radius-sm:6px; --radius-md:8px; --radius-lg:10px; --radius-xl:14px;
  --radius-2xl:20px; --radius-3xl:28px; --radius-pill:999px; --radius-full:50%;

  /* Shadows (warm-tinted) */
  --shadow-xs:0 1px 2px rgba(42,24,16,.06);
  --shadow-sm:0 1px 3px rgba(42,24,16,.08),0 1px 2px rgba(42,24,16,.04);
  --shadow-md:0 4px 12px rgba(42,24,16,.08),0 2px 4px rgba(42,24,16,.04);
  --shadow-lg:0 12px 28px rgba(42,24,16,.10),0 4px 10px rgba(42,24,16,.05);
  --shadow-xl:0 24px 48px rgba(42,24,16,.14),0 8px 18px rgba(42,24,16,.06);
  --shadow-focus:0 0 0 3px rgba(208,76,36,.28);
  --ring-width:3px; --ring-color:var(--color-focus); --ring-offset:2px;

  /* Motion */
  --duration-fast:120ms; --duration-base:200ms; --duration-slower:480ms;
  --ease-standard:cubic-bezier(.2,0,0,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --transition-colors:color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}
@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast:0ms; --duration-base:0ms; --duration-slower:0ms; }
}

/* ============================================================
   Base
   ============================================================ */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
body {
  margin:0; font-family:var(--font-body); font-size:var(--text-base);
  line-height:var(--leading-normal); font-weight:var(--weight-regular);
  color:var(--color-text); background-color:var(--color-bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv01" 1,"cv03" 1; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6 {
  margin:0; font-family:var(--font-heading); font-weight:var(--weight-bold);
  line-height:var(--leading-snug); letter-spacing:var(--tracking-tight);
  color:var(--color-text); text-wrap:balance;
}
p { margin:0; text-wrap:pretty; }
a { color:var(--color-text-link); text-decoration:none; transition:var(--transition-colors); }
a:hover { text-decoration:underline; text-underline-offset:2px; }
.kn-tabular,[data-tabular] { font-variant-numeric:tabular-nums lining-nums; font-feature-settings:var(--numeric-tabular); }
:focus-visible { outline:var(--ring-width) solid var(--ring-color); outline-offset:var(--ring-offset); border-radius:var(--radius-sm); }
img,svg,video { display:block; max-width:100%; }
::selection { background:var(--terracotta-100); color:var(--espresso-800); }

/* Skip link (no inline styles / handlers — CSP-safe) */
.skip-link {
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--color-surface); color:var(--color-text);
  padding:8px 12px; border-radius:var(--radius-sm); box-shadow:var(--shadow-md);
  font-weight:var(--weight-semibold);
}
.skip-link:focus { left:8px; top:8px; }

/* ============================================================
   Buttons (design-system)
   ============================================================ */
.kn-btn {
  --_bg:var(--color-primary); --_fg:var(--color-text-on-brand); --_bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font-sans); font-weight:var(--weight-semibold);
  line-height:1; white-space:nowrap; text-decoration:none; cursor:pointer;
  border:1px solid var(--_bd); background:var(--_bg); color:var(--_fg);
  border-radius:var(--radius-lg);
  transition:var(--transition-colors), box-shadow var(--duration-fast) var(--ease-standard);
  -webkit-font-smoothing:antialiased;
}
.kn-btn:hover { text-decoration:none; }
.kn-btn:focus-visible { outline:none; box-shadow:var(--shadow-focus); }
.kn-btn--sm { font-size:var(--text-sm); padding:.5rem .875rem; height:36px; }
.kn-btn--md { font-size:var(--text-base); padding:.625rem 1.125rem; height:44px; }
.kn-btn--lg { font-size:var(--text-md); padding:.8125rem 1.5rem; height:52px; }
.kn-btn--full { width:100%; }
.kn-btn__icon { display:inline-flex; }
.kn-btn__icon svg { width:1.15em; height:1.15em; display:block; }
.kn-btn--primary { --_bg:var(--color-primary); --_fg:var(--color-text-on-brand); }
.kn-btn--primary:hover { --_bg:var(--color-primary-hover); }
.kn-btn--primary:active { --_bg:var(--color-primary-active); }
.kn-btn--secondary { --_bg:var(--color-surface); --_fg:var(--color-text); --_bd:var(--color-border-strong); }
.kn-btn--secondary:hover { --_bg:var(--color-surface-hover); }
.kn-btn--secondary:active { --_bg:var(--neutral-200); }
.kn-btn--ghost { --_bg:transparent; --_fg:var(--color-text); }
.kn-btn--ghost:hover { --_bg:var(--color-surface-hover); }

/* ============================================================
   Badge + Stat (design-system, as used by the product mock)
   ============================================================ */
.kn-badge {
  display:inline-flex; align-items:center; gap:.375rem; font-family:var(--font-sans);
  font-weight:var(--weight-semibold); border-radius:var(--radius-pill);
  border:1px solid transparent; white-space:nowrap; line-height:1;
}
.kn-badge--sm { font-size:var(--text-2xs); padding:.25rem .5rem; }
.kn-badge--md { font-size:var(--text-xs); padding:.3125rem .625rem; }
.kn-badge__dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.kn-badge--brand { background:var(--terracotta-50); color:var(--terracotta-700); border-color:var(--terracotta-100); }
.kn-badge--success { background:var(--color-success-bg); color:var(--color-success-text); border-color:var(--color-success-border); }
.kn-badge--warning { background:var(--color-warning-bg); color:var(--color-warning-text); border-color:var(--color-warning-border); }
.kn-badge--solid.kn-badge--brand { background:var(--color-primary); color:#fff; border-color:transparent; }

.kn-stat { display:flex; flex-direction:column; gap:4px; font-family:var(--font-sans); }
.kn-stat__label { font-size:var(--text-xs); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--color-text-muted); }
.kn-stat__value { font-size:var(--text-2xl); font-weight:var(--weight-bold); color:var(--color-text); letter-spacing:var(--tracking-tight); line-height:1.05; font-variant-numeric:tabular-nums lining-nums; }
.kn-stat__delta { display:inline-flex; align-items:center; gap:.25rem; font-size:var(--text-sm); font-weight:var(--weight-semibold); font-variant-numeric:tabular-nums; }
.kn-stat__delta--up { color:var(--color-success); }
.kn-stat__delta--down { color:var(--color-error); }
.kn-stat__delta svg { width:14px; height:14px; }

/* ============================================================
   Layout
   ============================================================ */
.mk { background:var(--color-bg); color:var(--color-text); }
.mk-container { width:100%; max-width:var(--container-max); margin:0 auto; padding-inline:var(--gutter); }
@media (min-width:1024px) { .mk-container { padding-inline:var(--gutter-lg); } }

.mk-eyebrow {
  display:inline-flex; align-items:center; gap:.5rem; font-size:var(--text-xs);
  font-weight:var(--weight-bold); letter-spacing:var(--tracking-caps);
  text-transform:uppercase; color:var(--color-accent);
}
.mk-section-head { max-width:640px; margin:0 auto; text-align:center; }
.mk-section-head h2 { font-size:var(--text-3xl); margin:var(--space-3) 0 0; letter-spacing:var(--tracking-tight); }
.mk-section-head p { margin-top:var(--space-3); font-size:var(--text-lg); color:var(--color-text-secondary); line-height:var(--leading-normal); }
@media (min-width:768px) { .mk-section-head h2 { font-size:var(--text-4xl); } }

/* ---------- Nav ---------- */
.mk-nav {
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--neutral-50) 92%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--color-border); box-shadow:var(--shadow-xs);
}
.mk-nav__inner { position:relative; display:flex; align-items:center; justify-content:space-between; height:68px; gap:var(--space-6); }
.mk-nav__brand { display:inline-flex; align-items:center; flex:0 0 auto; }
.mk-nav__brand img { height:52px; width:auto; }
.mk-nav__links { display:none; align-items:center; gap:var(--space-1); }
.mk-nav__link {
  font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--color-text-secondary);
  padding:.5rem .75rem; border-radius:var(--radius-md); text-decoration:none; transition:var(--transition-colors);
}
.mk-nav__link:hover { color:var(--color-text); background:var(--color-surface-hover); text-decoration:none; }
.mk-nav__right { display:flex; align-items:center; gap:var(--space-3); flex:0 0 auto; }
.mk-nav__cta { display:none; }
.mk-nav__menu { display:inline-flex; }
.mk-nav__burger {
  display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border-radius:var(--radius-lg); cursor:pointer; color:var(--color-text);
  list-style:none; -webkit-tap-highlight-color:transparent; transition:var(--transition-colors);
}
.mk-nav__burger::-webkit-details-marker { display:none; }
.mk-nav__burger:hover { background:var(--color-surface-hover); }
.mk-nav__burger .icon-close { display:none; }
.mk-nav__menu[open] .mk-nav__burger .icon-menu { display:none; }
.mk-nav__menu[open] .mk-nav__burger .icon-close { display:block; }
.mk-mobile-menu {
  position:absolute; top:calc(100% + 9px); left:0; right:0;
  border:1px solid var(--color-border); border-radius:var(--radius-xl);
  background:var(--color-surface); box-shadow:var(--shadow-lg); overflow:hidden;
}
.mk-mobile-menu__inner { display:flex; flex-direction:column; gap:var(--space-1); padding:var(--space-4); }
.mk-mobile-menu a:not(.kn-btn) { padding:.75rem .5rem; border-radius:var(--radius-md); font-weight:var(--weight-medium); color:var(--color-text); text-decoration:none; }
.mk-mobile-menu a:not(.kn-btn):hover { background:var(--color-surface-hover); text-decoration:none; }
.mk-mobile-menu .kn-btn { margin-top:var(--space-3); }
@media (min-width:1024px) {
  .mk-nav__links { display:flex; }
  .mk-nav__cta { display:inline-flex; }
  .mk-nav__menu { display:none; }
}

/* ---------- Hero ---------- */
.mk-hero { padding-top:var(--space-12); padding-bottom:var(--space-16); overflow:hidden; }
.mk-hero__grid { display:grid; grid-template-columns:1fr; gap:var(--space-12); align-items:center; }
.mk-hero h1 { font-size:var(--text-4xl); line-height:var(--leading-tight); letter-spacing:var(--tracking-tighter); margin-top:var(--space-4); }
.mk-hero__sub { margin-top:var(--space-5); font-size:var(--text-lg); color:var(--color-text-secondary); line-height:var(--leading-normal); max-width:34ch; }
.mk-hero__cta { display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-7); }
.mk-hero__trust { display:flex; align-items:center; gap:var(--space-2); margin-top:var(--space-7); font-size:var(--text-sm); color:var(--color-text-muted); }
.mk-hero__trust svg { color:var(--color-success); flex:0 0 auto; }
@media (min-width:640px) { .mk-hero h1 { font-size:var(--text-5xl); } }
@media (min-width:1024px) {
  .mk-hero__grid { grid-template-columns:1.05fr 1.1fr; gap:var(--space-16); }
  .mk-hero { padding-top:var(--space-20); padding-bottom:var(--space-24); }
}

/* ---------- Product mock ---------- */
.mk-mock { position:relative; }
.mk-mock__window { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-2xl); box-shadow:var(--shadow-xl); overflow:hidden; }
.mk-mock__bar { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--color-border); background:var(--neutral-50); }
.mk-mock__dots { display:flex; gap:6px; }
.mk-mock__dots span { width:10px; height:10px; border-radius:50%; background:var(--neutral-300); }
.mk-mock__url { font-size:var(--text-xs); color:var(--color-text-muted); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-pill); padding:3px 10px; }
.mk-mock__body { padding:var(--space-5); display:grid; gap:var(--space-4); }
.mk-mock__row { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3); }
.mk-mock__chart-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.mk-mock__chart-head .lbl { font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--color-text); }
.mk-mock__chart { display:flex; align-items:flex-end; gap:7px; height:120px; padding-top:var(--space-2); }
.mk-mock__chart span { flex:1; background:var(--terracotta-200); border-radius:4px 4px 0 0; }
.mk-mock__chart span.is-peak { background:var(--color-accent); }
.mk-mock__chart span:nth-child(1){height:52%} .mk-mock__chart span:nth-child(2){height:61%}
.mk-mock__chart span:nth-child(3){height:58%} .mk-mock__chart span:nth-child(4){height:67%}
.mk-mock__chart span:nth-child(5){height:72%} .mk-mock__chart span:nth-child(6){height:64%}
.mk-mock__chart span:nth-child(7){height:78%} .mk-mock__chart span:nth-child(8){height:83%}
.mk-mock__chart span:nth-child(9){height:76%} .mk-mock__chart span:nth-child(10){height:88%}
.mk-mock__chart span:nth-child(11){height:81%} .mk-mock__chart span:nth-child(12){height:91%}
.mk-mock__batches { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); }
.mk-mock__batch { border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-3) var(--space-4); display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.mk-mock__batch .name { font-size:var(--text-sm); font-weight:var(--weight-semibold); }
.mk-mock__batch .meta { font-size:var(--text-xs); color:var(--color-text-muted); font-variant-numeric:tabular-nums; }
.mk-mock__float { position:absolute; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:var(--space-3) var(--space-4); display:flex; align-items:center; gap:var(--space-3); }
.mk-mock__float--tl { top:-18px; left:-16px; }
.mk-mock__float--br { bottom:-20px; right:-14px; }
.mk-mock__float .ico { width:36px; height:36px; border-radius:var(--radius-md); display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.mk-mock__float .ico--egg { background:var(--terracotta-50); color:var(--color-accent); }
.mk-mock__float .ico--alert { background:var(--color-error-bg); color:var(--color-error); }
.mk-mock__float .t { font-size:var(--text-xs); color:var(--color-text-muted); }
.mk-mock__float .v { font-size:var(--text-base); font-weight:var(--weight-bold); font-variant-numeric:tabular-nums; }
@media (max-width:540px) { .mk-mock__float { display:none; } }

/* ---------- Features ---------- */
.mk-features { padding-block:var(--section-y-sm); background:var(--color-surface); }
@media (min-width:1024px) { .mk-features { padding-block:var(--section-y); } }
.mk-feature-grid { display:grid; grid-template-columns:1fr; gap:var(--space-4); margin-top:var(--space-12); }
@media (min-width:640px) { .mk-feature-grid { grid-template-columns:1fr 1fr; } }
@media (min-width:1024px) { .mk-feature-grid { grid-template-columns:repeat(4,1fr); } }
.mk-feature { display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-5); border:1px solid var(--color-border); border-radius:var(--radius-xl); background:var(--color-surface); transition:border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard); }
.mk-feature:hover { border-color:var(--terracotta-200); box-shadow:var(--shadow-sm); }
.mk-feature__icon { width:44px; height:44px; border-radius:var(--radius-lg); background:var(--terracotta-50); color:var(--color-accent); display:inline-flex; align-items:center; justify-content:center; }
.mk-feature h3 { font-size:var(--text-md); font-weight:var(--weight-semibold); }
.mk-feature p { font-size:var(--text-sm); color:var(--color-text-secondary); line-height:var(--leading-normal); }
.mk-crosscut { display:grid; grid-template-columns:1fr; gap:var(--space-4); margin-top:var(--space-6); }
@media (min-width:768px) { .mk-crosscut { grid-template-columns:1fr 1fr; } }
.mk-crosscut__item { display:flex; gap:var(--space-4); align-items:flex-start; padding:var(--space-5) var(--space-6); border-radius:var(--radius-xl); background:var(--neutral-50); border:1px solid var(--color-border); }
.mk-crosscut__item .ic { flex:0 0 auto; width:40px; height:40px; border-radius:var(--radius-lg); background:var(--espresso-700); color:#fff; display:inline-flex; align-items:center; justify-content:center; }
.mk-crosscut__item h3 { font-size:var(--text-base); font-weight:var(--weight-semibold); margin-bottom:2px; }
.mk-crosscut__item p { font-size:var(--text-sm); color:var(--color-text-secondary); }

/* ---------- How it works ---------- */
.mk-how { padding-block:var(--section-y-sm); }
@media (min-width:1024px) { .mk-how { padding-block:var(--section-y); } }
.mk-steps { display:grid; grid-template-columns:1fr; gap:var(--space-5); margin:var(--space-12) 0 0; padding:0; list-style:none; }
@media (min-width:768px) { .mk-steps { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px) { .mk-steps { grid-template-columns:repeat(4,1fr); } }
.mk-step { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:var(--space-6); display:flex; flex-direction:column; gap:var(--space-3); position:relative; }
.mk-step__n { width:32px; height:32px; border-radius:var(--radius-pill); background:var(--color-primary); color:#fff; font-weight:var(--weight-bold); font-size:var(--text-sm); display:inline-flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums; }
.mk-step h3 { font-size:var(--text-md); font-weight:var(--weight-semibold); }
.mk-step p { font-size:var(--text-sm); color:var(--color-text-secondary); line-height:var(--leading-normal); }
.mk-step__visual { margin-top:var(--space-2); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--neutral-50); padding:var(--space-3); display:flex; align-items:center; gap:var(--space-2); color:var(--color-text-muted); font-size:var(--text-xs); }
.mk-step__visual svg { flex:0 0 auto; }

/* ---------- Security ---------- */
.mk-security { padding-block:var(--section-y-sm); background:var(--color-surface); }
@media (min-width:1024px) { .mk-security { padding-block:var(--section-y); } }
.mk-sec-grid { display:grid; grid-template-columns:1fr; gap:var(--space-10); margin-top:var(--space-10); align-items:start; }
@media (min-width:1024px) { .mk-sec-grid { grid-template-columns:1fr 1fr; gap:var(--space-16); } }
.mk-sec-list { display:grid; gap:var(--space-5); }
.mk-sec-item { display:flex; gap:var(--space-4); align-items:flex-start; }
.mk-sec-item .ic { flex:0 0 auto; width:40px; height:40px; border-radius:var(--radius-lg); background:var(--color-success-bg); color:var(--color-success); display:inline-flex; align-items:center; justify-content:center; }
.mk-sec-item h3 { font-size:var(--text-base); font-weight:var(--weight-semibold); margin-bottom:2px; }
.mk-sec-item p { font-size:var(--text-sm); color:var(--color-text-secondary); line-height:var(--leading-normal); }
.mk-sec-panel { background:var(--espresso-800); border-radius:var(--radius-2xl); padding:var(--space-8); color:#fff; }
.mk-sec-panel h3 { color:#fff; font-size:var(--text-xl); }
.mk-sec-panel p { color:rgba(255,255,255,.7); font-size:var(--text-sm); margin-top:var(--space-2); line-height:var(--leading-normal); }
.mk-compliance { display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-6); }
.mk-compliance__badge { display:flex; flex-direction:column; gap:4px; padding:var(--space-3) var(--space-4); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-lg); background:rgba(255,255,255,.04); min-width:120px; }
.mk-compliance__badge .nm { font-size:var(--text-sm); font-weight:var(--weight-semibold); color:#fff; }
.mk-compliance__badge .st { font-size:var(--text-2xs); font-weight:var(--weight-bold); letter-spacing:.04em; text-transform:uppercase; color:var(--amber-300); }
.mk-sec-panel__note { margin-top:var(--space-6); padding-top:var(--space-5); border-top:1px solid rgba(255,255,255,.14); font-size:var(--text-sm); color:rgba(255,255,255,.6); }
.mk-sec-panel__note strong { color:#fff; font-weight:var(--weight-semibold); }

/* ---------- Pricing ---------- */
.mk-pricing { padding-block:var(--section-y-sm); }
@media (min-width:1024px) { .mk-pricing { padding-block:var(--section-y); } }
.mk-tiers { display:grid; grid-template-columns:1fr; gap:var(--space-5); margin-top:var(--space-12); align-items:stretch; }
@media (min-width:768px) { .mk-tiers { grid-template-columns:repeat(3,1fr); } }
.mk-tier { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-2xl); padding:var(--space-7); display:flex; flex-direction:column; gap:var(--space-4); }
.mk-tier--featured { border-color:var(--color-primary); box-shadow:var(--shadow-md); position:relative; }
.mk-tier__flag { position:absolute; top:-12px; left:var(--space-7); }
.mk-tier__name { font-size:var(--text-lg); font-weight:var(--weight-bold); }
.mk-tier__who { font-size:var(--text-sm); color:var(--color-text-secondary); }
.mk-tier__price { display:flex; align-items:baseline; gap:4px; font-variant-numeric:tabular-nums; }
.mk-tier__price .amt { font-size:var(--text-4xl); font-weight:var(--weight-extrabold); letter-spacing:var(--tracking-tight); }
.mk-tier__price .per { font-size:var(--text-sm); color:var(--color-text-muted); }
.mk-tier__list { display:grid; gap:var(--space-3); margin:var(--space-2) 0; padding:0; list-style:none; }
.mk-tier__list li { display:flex; gap:var(--space-3); align-items:flex-start; font-size:var(--text-sm); color:var(--color-text); }
.mk-tier__list svg { flex:0 0 auto; color:var(--color-success); margin-top:1px; }
.mk-tier .kn-btn { margin-top:auto; }

/* ---------- Final CTA ---------- */
.mk-cta { padding-block:var(--section-y-sm); }
.mk-cta__band { background:var(--espresso-800); border-radius:var(--radius-3xl); padding:var(--space-14) var(--space-8); text-align:center; position:relative; overflow:hidden; }
.mk-cta__band::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 78% 18%, rgba(208,76,36,.32), transparent 42%); pointer-events:none; }
.mk-cta__band h2 { color:#fff; font-size:var(--text-3xl); position:relative; }
.mk-cta__band p { color:rgba(255,255,255,.72); margin-top:var(--space-3); font-size:var(--text-lg); position:relative; }
.mk-cta__band .kn-btn { margin-top:var(--space-7); position:relative; }
@media (min-width:768px) { .mk-cta__band h2 { font-size:var(--text-4xl); } }

/* ---------- Footer ---------- */
.mk-footer { background:var(--espresso-900); color:rgba(255,255,255,.7); padding-block:var(--space-16) var(--space-8); }
.mk-footer__top { display:grid; grid-template-columns:1fr; gap:var(--space-10); }
@media (min-width:768px) { .mk-footer__top { grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--space-8); } }
.mk-footer__brand img { height:40px; width:auto; }
.mk-footer__brand p { margin-top:var(--space-4); font-size:var(--text-sm); color:rgba(255,255,255,.6); max-width:30ch; line-height:var(--leading-normal); }
.mk-footer__col h4 { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:rgba(255,255,255,.5); font-weight:var(--weight-bold); margin-bottom:var(--space-4); }
.mk-footer__col ul { list-style:none; margin:0; padding:0; display:grid; gap:var(--space-3); }
.mk-footer__col a { color:rgba(255,255,255,.75); font-size:var(--text-sm); text-decoration:none; }
.mk-footer__col a:hover { color:#fff; text-decoration:underline; text-underline-offset:2px; }
.mk-footer__bottom { display:flex; flex-direction:column; gap:var(--space-3); margin-top:var(--space-12); padding-top:var(--space-6); border-top:1px solid rgba(255,255,255,.12); font-size:var(--text-sm); color:rgba(255,255,255,.55); }
.mk-footer__bottom .legal { color:rgba(255,255,255,.5); }
.mk-footer__bottom strong { color:rgba(255,255,255,.85); font-weight:var(--weight-semibold); }
@media (min-width:768px) { .mk-footer__bottom { flex-direction:row; align-items:center; justify-content:space-between; } }

/* ---------- Legal pages (stubs) ---------- */
.mk-legal { padding-block:var(--space-16); }
.mk-legal__inner { max-width:var(--container-narrow); margin:0 auto; }
.mk-legal h1 { font-size:var(--text-4xl); letter-spacing:var(--tracking-tight); }
.mk-legal .updated { margin-top:var(--space-3); color:var(--color-text-muted); font-size:var(--text-sm); }
.mk-legal h2 { font-size:var(--text-xl); margin-top:var(--space-10); }
.mk-legal p { margin-top:var(--space-4); color:var(--color-text-secondary); line-height:var(--leading-relaxed); }
.mk-legal a.back { display:inline-block; margin-top:var(--space-12); font-weight:var(--weight-semibold); }
.mk-legal__note { margin-top:var(--space-8); padding:var(--space-4) var(--space-5); border:1px dashed var(--color-border-strong); border-radius:var(--radius-lg); background:var(--neutral-100); font-size:var(--text-sm); color:var(--color-text-secondary); }