/* ============================================================
   ARIA MARKETING — DESIGN SYSTEM « TERMINAL » (v1, 2026-07-13)
   Source de vérité du thème marketing. Consommé par les pages
   de marketing/ via /styles/marketing-terminal.css?v=<hash>.
   Règles : tokens --mk-* uniquement · sélecteurs .mk-* ou
   descendants d'une racine .mk-* · jamais de fond fixé au viewport
   (régression connue en fullPage : cf. spec R2).

   ⚠️ CACHE-BUSTING (2026-07-15) : le `?v=` des pages est le HASH DE
   CONTENU de ce fichier (SHA-256, 8 hex). Après TOUTE modification de
   ce fichier (même un commentaire) :
       npm run marketing:css-bump
   (recalcule le hash et met à jour toutes les pages ; `-- --check`
   pour vérifier sans écrire). Le test
   tests/marketing-css-cache-version.test.js l'impose en CI — l'oubli
   fait échouer la suite. Contexte : navigateurs/Cloudflare
   (max-age=14400) servent l'ancien CSS si l'URL ne change pas
   (incident #510 : hero home en blob blanc).
   Specs : docs/superpowers/specs/2026-07-13-marketing-terminal-design-system-design.md
   · docs/superpowers/specs/2026-07-15-marketing-css-hash-guard-design.md
   ============================================================ */

/* ── 01 · TOKENS ─────────────────────────────────────────── */
:root {
  --mk-bg: #07080c;
  --mk-bg2: #0d0f16;
  --mk-bg3: #151824;
  --mk-fg: #e8ecf5;
  --mk-dim: #8a91a8;
  --mk-muted: #4a5068;
  --mk-line: rgba(138,145,168,0.12);
  --mk-accent: #e0913f;
  --mk-accent-deep: #c0562f;
  --mk-signal: #e8b04a;
  --mk-glow-top: #2a1a10;
  --mk-glow-ambient: rgba(224,145,63,0.13);
  --mk-radius: 10px;
  --mk-gap: 16px;
  --mk-pad-x: 56px;
  --mk-display: "Sora", "Inter", sans-serif;
  --mk-accent-font: "Inter Tight", sans-serif;
  --mk-nav-font: "Inter Tight", sans-serif;
  --mk-mono: "JetBrains Mono", ui-monospace, monospace;
  --mk-body-font: "Inter", -apple-system, sans-serif;
}
@media (max-width: 1024px) { :root { --mk-pad-x: 32px; } }
@media (max-width: 640px)  { :root { --mk-pad-x: 20px; } }

/* ── 02 · BASE (fond de page, section, kicker, titres) ──── */
html.mk { background: #030409; }

body.mk-page {
  background: radial-gradient(ellipse 90% 40vh at 50% 0%, var(--mk-glow-top) 0%, var(--mk-bg) 45%, #030409 100%) no-repeat;
  min-height: 100%;
  color: var(--mk-fg);
  font-family: var(--mk-body-font);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  padding: 0;
}

body.mk-page *,
body.mk-page *::before,
body.mk-page *::after { box-sizing: border-box; }

.mk-section {
  padding: 72px var(--mk-pad-x);
  border-bottom: 1px solid var(--mk-line);
}
@media (max-width: 640px) {
  .mk-section { padding-top: 56px; padding-bottom: 56px; }
}

.mk-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mk-accent);
  margin-bottom: 20px;
}

.mk-display {
  font-family: var(--mk-display);
  font-weight: 600;
  letter-spacing: -0.04em;
}

.mk-h1 {
  font-family: var(--mk-display);
  font-weight: 600;
  letter-spacing: -0.04em;
  font-size: clamp(44px, 5.5vw, 72px);
  line-height: 1;
  margin: 0 0 18px;
  /* garde-fou mot long : « automatiquement » (382px au clamp min) débordait
     la colonne 350px en 390vw — port blog 2026-07-15, même classe que #509 */
  overflow-wrap: break-word;
  hyphens: auto;
}

.mk-h2 {
  font-family: var(--mk-display);
  font-weight: 600;
  letter-spacing: -0.04em;
  font-size: 44px;
  line-height: 1;
  margin: 0 0 40px;
  /* même garde-fou mot long que .mk-h1 : « automatiquement » débordait la
     colonne 350px en 390vw — port sous-pages fonctionnalités 2026-07-15 */
  overflow-wrap: break-word;
  hyphens: auto;
}

.mk-dim { color: var(--mk-dim); }

/* ── 03 · BOUTONS ─────────────────────────────────────────── */
.mk-btn {
  display: inline-block;
  background: var(--mk-accent);
  color: #0a0a0a;
  border: none;
  border-radius: 6px;
  padding: 15px 28px;
  font-family: var(--mk-nav-font);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  /* les CTA sont souvent des <a> : sans ceci, le soulignement navigateur
     s'applique aux labels de bouton (constaté Gate 4 ports #519/#521) */
  text-decoration: none;
  transition: background .15s;
}
.mk-btn:hover { background: #ffffff; }

.mk-btn--login {
  padding: 8px 18px;
  font-size: 11px;
  font-family: inherit;
}

.mk-btn--xl {
  padding: 22px 40px;
  font-size: 15px;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--mk-bg);
}

.mk-btn--ghost {
  background: transparent;
  color: var(--mk-fg);
  border: 1px solid var(--mk-line);
  transition: all .15s;
}
.mk-btn--ghost:hover { background: var(--mk-fg); color: #0a0a0a; }

/* ── 04 · ANIMATIONS ──────────────────────────────────────── */
@keyframes mk-fadein {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: none; }
}
@keyframes mk-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}
@keyframes mk-blink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.mk-reveal { animation: mk-fadein .5s ease both; }
.mk-reveal-2 { animation-delay: .08s; }
.mk-reveal-3 { animation-delay: .16s; }
.mk-reveal-4 { animation-delay: .24s; }

.mk-cursor {
  display: inline-block;
  width: 0.55em;
  height: 0.9em;
  background: var(--mk-signal);
  margin-left: 8px;
  vertical-align: baseline;
  animation: mk-blink 1.1s step-end infinite;
}

/* ── 05 · NAV ─────────────────────────────────────────────── */
.mk-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--mk-pad-x);
  border-bottom: 1px solid var(--mk-line);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--mk-nav-font);
  position: sticky;
  top: 0;
  background: rgba(7,8,12,0.85);
  backdrop-filter: blur(12px);
  z-index: 10;
}

.mk-nav a { color: inherit; text-decoration: none; }

.mk-nav__brand {
  font-family: var(--mk-display);
  font-weight: 600;
  font-size: 23px;
  letter-spacing: -0.03em;
  text-transform: none;
}

.mk-nav__links { display: flex; gap: 36px; }
.mk-nav__links a.active { color: var(--mk-accent); }

.mk-nav__right { display: flex; gap: 20px; align-items: center; }

.mk-lang {
  background: transparent;
  border: 1px solid var(--mk-line);
  color: var(--mk-fg);
  padding: 4px 10px;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  letter-spacing: 0.1em;
}

@media (max-width: 640px) {
  .mk-nav { flex-wrap: wrap; row-gap: 14px; }
  .mk-nav__links {
    display: flex;
    order: 3;
    flex-basis: 100%;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 12px;
  }
}

/* ── 06 · FOOTER ──────────────────────────────────────────── */
.mk-footer {
  padding: 40px var(--mk-pad-x) 56px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  font-size: 12px;
  color: var(--mk-dim);
}

.mk-footer a { color: inherit; text-decoration: none; }

.mk-footer__brand {
  font-family: var(--mk-display);
  font-weight: 600;
  font-size: 22px;
  color: var(--mk-fg);
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}

.mk-footer__col-title {
  color: var(--mk-muted);
  margin-bottom: 12px;
  letter-spacing: 0.1em;
  font-family: var(--mk-mono);
  font-size: 11px;
}

.mk-footer__col-links {
  display: grid;
  gap: 8px;
  color: var(--mk-fg);
}

.mk-footer__fine { color: var(--mk-muted); }

.mk-footer__status-dot {
  color: #4ade80;
  animation: mk-pulse 2.4s ease infinite;
}

@media (max-width: 1024px) {
  .mk-footer { grid-template-columns: 1fr 1fr; }
}

/* ── 07 · CARTES ──────────────────────────────────────────── */

/* Grilles — utilitaire partagé (.plans/.grid9/.pains/.cases/.rel-grid) */
.mk-grid { display: grid; gap: var(--mk-gap); }
.mk-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.mk-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.mk-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

@media (max-width: 1024px) {
  /* Défaut (grid9/pains/cases) : 3 → 2 colonnes. */
  .mk-grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  /* .plans et .rel-grid collapsent directement à 1 colonne dans les gabarits
     (pas d'étape intermédiaire à 2) — override scopé via :has() sur la carte. */
  .mk-grid--3:has(.mk-plan) { grid-template-columns: 1fr; max-width: 520px; }
  .mk-grid--3:has(.mk-rel) { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .mk-grid--2,
  .mk-grid--3,
  .mk-grid--4 { grid-template-columns: 1fr; }
}

/* Carte forfait (Tarifs) */
.mk-plan {
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: background .2s, border-color .2s;
}
.mk-plan:hover { background: var(--mk-glow-ambient); }
.mk-plan--popular { background: rgba(224,145,63,0.05); border-color: rgba(224,145,63,0.35); }
.mk-plan--popular:hover { background: var(--mk-glow-ambient); }

/* Override scopé (pas une restyle globale de .mk-btn) : le CTA du plan
   populaire est signal, pas accent, dans le gabarit source. */
.mk-plan--popular .mk-btn:not(.mk-btn--ghost) { background: var(--mk-signal); }
.mk-plan--popular .mk-btn:not(.mk-btn--ghost):hover { background: #ffffff; }

.mk-plan__tag {
  position: absolute;
  top: -1px;
  right: -1px;
  background: var(--mk-signal);
  color: #0a0a0a;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  border-radius: 0 var(--mk-radius) 0 6px;
}

.mk-plan__prompt {
  font-family: var(--mk-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--mk-muted);
  margin-bottom: 24px;
}
.mk-plan--popular .mk-plan__prompt { color: var(--mk-accent); }

.mk-plan__price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.mk-plan__price .amount { font-family: var(--mk-display); font-weight: 600; font-size: 56px; line-height: 1; letter-spacing: -0.04em; }
.mk-plan__price .unit { color: var(--mk-muted); font-size: 14px; }

.mk-plan__mins { color: var(--mk-dim); font-size: 13px; margin-bottom: 28px; }

.mk-plan__features { flex: 1; margin-bottom: 24px; }
.mk-plan__features div { font-size: 13px; color: var(--mk-fg); margin-bottom: 10px; display: flex; gap: 10px; }
.mk-plan__features .tick { color: var(--mk-accent); }

/* Tableau comparatif (Tarifs) */
.mk-compare-wrap {
  overflow-x: auto;
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius);
  background: var(--mk-bg2);
}
table.mk-compare { width: 100%; border-collapse: collapse; min-width: 720px; }
.mk-compare th,
.mk-compare td { padding: 16px 22px; text-align: left; border-bottom: 1px solid var(--mk-line); font-size: 13px; }
.mk-compare th { font-family: var(--mk-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--mk-muted); text-transform: none; font-weight: 500; }
.mk-compare thead th { border-bottom: 1px solid var(--mk-line); padding-top: 22px; padding-bottom: 22px; }
.mk-compare thead .plan-col { color: var(--mk-fg); font-size: 13px; }
.mk-compare thead .plan-col .price-mini { display: block; color: var(--mk-dim); font-family: var(--mk-body-font); font-size: 12px; margin-top: 4px; letter-spacing: 0; }
.mk-compare thead .pop { color: var(--mk-accent); }
.mk-compare tbody tr:last-child td { border-bottom: none; }
.mk-compare tbody tr:hover { background: rgba(224,145,63,0.04); }
.mk-compare td.feature-name { color: var(--mk-dim); font-family: var(--mk-body-font); width: 34%; }
.mk-compare td .yes { color: var(--mk-accent); font-family: var(--mk-mono); }
.mk-compare td .no { color: var(--mk-muted); }
.mk-compare td { color: var(--mk-fg); font-family: var(--mk-mono); font-size: 12.5px; }
.mk-compare tr.group td {
  background: var(--mk-bg3);
  color: var(--mk-muted);
  font-family: var(--mk-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 22px;
}

/* Carte module + chip (Fonctionnalités) */
.mk-mod {
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius);
  padding: 32px 30px;
  min-height: 230px;
  display: flex;
  flex-direction: column;
  transition: background .2s;
}
.mk-mod:hover { background: var(--mk-glow-ambient); }
.mk-mod__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; }

.mk-chip {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mk-chip svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mk-chip--a { color: var(--mk-signal); border: 1px solid rgba(232,176,74,0.27); }
.mk-chip--b { color: var(--mk-accent); border: 1px solid rgba(224,145,63,0.27); }
.mk-chip--c { color: var(--mk-accent-deep); border: 1px solid rgba(192,86,47,0.35); }

.mk-mod__badge {
  font-size: 9px;
  color: var(--mk-signal);
  border: 1px solid var(--mk-signal);
  padding: 2px 7px;
  letter-spacing: 0.08em;
  border-radius: 2px;
  font-family: var(--mk-mono);
}

.mk-mod h3 { font-family: var(--mk-display); font-weight: 600; font-size: 23px; margin: 0 0 10px; letter-spacing: -0.02em; }
.mk-mod p { margin: 0; color: var(--mk-dim); font-size: 13px; line-height: 1.55; flex: 1; }
.mk-mod__more { margin-top: 18px; font-size: 12px; color: var(--mk-muted); letter-spacing: 0.04em; transition: color .2s; }
.mk-mod:hover .mk-mod__more { color: var(--mk-accent); }

/* Carte douleur (Industrie Plombiers) */
.mk-pain {
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius);
  padding: 30px 28px;
  transition: background .2s;
}
.mk-pain:hover { background: var(--mk-glow-ambient); }
.mk-pain__when {
  font-family: var(--mk-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--mk-signal);
  margin-bottom: 16px;
  text-transform: uppercase;
}
.mk-pain h3 { font-family: var(--mk-display); font-weight: 600; font-size: 21px; margin: 0 0 10px; letter-spacing: -0.02em; }
.mk-pain p { margin: 0; color: var(--mk-dim); font-size: 13px; }
.mk-pain p b { color: var(--mk-accent); font-weight: 600; }

/* Carte cas d'usage (Industrie Plombiers) */
.mk-case {
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius);
  padding: 32px 30px;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  transition: background .2s;
}
.mk-case:hover { background: var(--mk-glow-ambient); }
.mk-case__num { font-family: var(--mk-mono); font-size: 11px; color: var(--mk-muted); margin-bottom: 18px; }
.mk-case__num b { color: var(--mk-accent); font-weight: 500; }
.mk-case h3 { font-family: var(--mk-display); font-weight: 600; font-size: 21px; margin: 0 0 10px; letter-spacing: -0.02em; }
.mk-case p { margin: 0; color: var(--mk-dim); font-size: 13px; flex: 1; }

/* Bloc étude de cas — métriques + citation (Industrie Plombiers) */
.mk-cs {
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius);
  background: var(--mk-bg2);
  overflow: hidden;
}
.mk-cs__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  border-bottom: 1px solid var(--mk-line);
}
.mk-cs__metric { padding: 28px 26px; }
.mk-cs__metric + .mk-cs__metric { border-left: 1px solid var(--mk-line); }
.mk-cs__metric .n { font-family: var(--mk-display); font-weight: 600; font-size: clamp(28px, 2.6vw, 40px); line-height: 1; letter-spacing: -0.03em; }
.mk-cs__metric:first-child .n { color: var(--mk-accent); }
.mk-cs__metric .l { margin-top: 12px; font-size: 13px; color: var(--mk-dim); }

.mk-cs__quote { padding: 34px 32px; }
.mk-cs__quote .qmark { font-size: 40px; color: var(--mk-signal); line-height: 0.4; font-family: var(--mk-accent-font); }
.mk-cs__quote p { font-family: var(--mk-display); font-weight: 400; font-size: 21px; line-height: 1.45; margin: 18px 0 20px; max-width: 780px; letter-spacing: -0.01em; }
.mk-cs__quote .who { font-size: 14px; font-weight: 700; }
.mk-cs__quote .role { font-size: 13px; color: var(--mk-dim); }

@media (max-width: 640px) {
  .mk-cs__metrics { grid-template-columns: 1fr; }
  .mk-cs__metric + .mk-cs__metric { border-left: none; border-top: 1px solid var(--mk-line); }
}

/* Carte article lié (Blog) */
.mk-rel {
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  min-height: 190px;
  transition: background .2s;
  color: inherit;
  text-decoration: none;
}
.mk-rel:hover { background: var(--mk-glow-ambient); }
.mk-rel__cat {
  font-family: var(--mk-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--mk-accent);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.mk-rel h3 { font-family: var(--mk-display); font-weight: 600; font-size: 19px; line-height: 1.25; margin: 0 0 10px; letter-spacing: -0.02em; }
.mk-rel p { margin: 0; font-size: 13px; color: var(--mk-dim); flex: 1; }
.mk-rel__more { margin-top: 16px; font-size: 12px; color: var(--mk-muted); transition: color .2s; }
.mk-rel:hover .mk-rel__more { color: var(--mk-accent); }

/* Bande CTA — composant unique convergé (.reseller + .inline-cta, Tarifs + Blog).
   Le bouton n'a pas de classe dédiée : il réutilise .mk-btn tel quel (variante
   solide accent d'.inline-cta — canonique retenue, cf. rapport de tâche pour
   la justification de la convergence). */
.mk-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius);
  background: var(--mk-bg2);
  padding: 34px 38px;
}
.mk-strip__prompt { font-family: var(--mk-mono); font-size: 13px; color: var(--mk-accent); margin-bottom: 10px; }
.mk-strip__title { font-family: var(--mk-display); font-weight: 600; font-size: 26px; color: var(--mk-fg); letter-spacing: -0.02em; margin: 0 0 8px; }
.mk-strip__body { margin: 0; color: var(--mk-dim); font-size: 14px; max-width: 520px; }

@media (max-width: 640px) {
  .mk-strip { flex-direction: column; align-items: flex-start; }
}

/* ── 08 · ARTICLE (typo longue, TOC, callout, citation, auteur) ──── */

/* Layout TOC + article (blog-article.html : .art-layout) */
.mk-article-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 720px);
  gap: 72px;
  padding: 56px var(--mk-pad-x) 88px;
}
@media (max-width: 1024px) {
  .mk-article-layout { grid-template-columns: 1fr; gap: 40px; }
}

/* Table des matières */
.mk-toc { position: sticky; top: 96px; align-self: start; }
.mk-toc__title {
  font-family: var(--mk-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mk-muted);
  margin-bottom: 16px;
}
.mk-toc a {
  display: block;
  padding: 7px 0 7px 14px;
  font-size: 13px;
  color: var(--mk-dim);
  border-left: 1px solid var(--mk-line);
  transition: color .15s, border-color .15s;
}
.mk-toc a:hover,
.mk-toc a.on { color: var(--mk-accent); border-left-color: var(--mk-accent); }
.mk-toc .num { font-family: var(--mk-mono); font-size: 11px; color: var(--mk-muted); margin-right: 8px; }

@media (max-width: 1024px) {
  .mk-toc {
    position: static;
    border: 1px solid var(--mk-line);
    border-radius: var(--mk-radius);
    padding: 20px 22px;
    background: var(--mk-bg2);
  }
}

/* Typographie longue (transposé de `article X` → `.mk-article X`) */
.mk-article { font-size: 16.5px; line-height: 1.75; color: var(--mk-dim); min-width: 0; }
.mk-article > p:first-of-type { font-size: 19px; line-height: 1.65; color: var(--mk-fg); }
.mk-article p { margin: 0 0 24px; }
.mk-article strong { color: var(--mk-fg); font-weight: 600; }
.mk-article a { color: var(--mk-accent); border-bottom: 1px solid rgba(224,145,63,0.35); }
.mk-article h2 {
  font-family: var(--mk-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--mk-fg);
  font-size: 30px;
  line-height: 1.15;
  margin: 56px 0 18px;
  scroll-margin-top: 96px;
}
.mk-article h2 .snum {
  font-family: var(--mk-mono);
  font-size: 13px;
  color: var(--mk-accent);
  font-weight: 500;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 10px;
}
.mk-article h3 { font-family: var(--mk-display); font-weight: 600; letter-spacing: -0.02em; color: var(--mk-fg); font-size: 21px; margin: 36px 0 14px; }
.mk-article ul { margin: 0 0 24px; padding: 0; list-style: none; }
.mk-article ul li { padding-left: 26px; position: relative; margin-bottom: 12px; }
.mk-article ul li::before { content: '›'; position: absolute; left: 4px; color: var(--mk-accent); font-family: var(--mk-mono); }

@media (max-width: 640px) {
  .mk-article { font-size: 15.5px; }
}

/* Callout statistique */
.mk-callout {
  border: 1px solid rgba(224,145,63,0.3);
  border-radius: var(--mk-radius);
  background: rgba(224,145,63,0.05);
  padding: 24px 28px;
  margin: 0 0 24px;
  font-size: 15px;
}
.mk-callout__label { font-family: var(--mk-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mk-accent); margin-bottom: 10px; }
.mk-callout__big { font-family: var(--mk-display); font-weight: 600; font-size: 34px; color: var(--mk-fg); letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 8px; }

/* Citation */
.mk-quote {
  margin: 32px 0;
  padding: 4px 0 4px 28px;
  border-left: 2px solid var(--mk-accent);
  font-family: var(--mk-display);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.5;
  color: var(--mk-fg);
  letter-spacing: -0.01em;
}
.mk-quote .src { display: block; margin-top: 12px; font-family: var(--mk-mono); font-size: 12px; color: var(--mk-muted); letter-spacing: 0.04em; }

/* Bloc auteur */
.mk-author {
  display: flex;
  gap: 20px;
  align-items: center;
  border-top: 1px solid var(--mk-line);
  margin-top: 56px;
  padding-top: 32px;
}
.mk-author__avatar {
  width: 56px;
  height: 56px;
  border-radius: 99px;
  background: var(--mk-glow-ambient);
  border: 1px solid rgba(224,145,63,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mk-display);
  font-weight: 600;
  font-size: 20px;
  color: var(--mk-accent);
  flex-shrink: 0;
}
.mk-author__name { font-weight: 700; color: var(--mk-fg); font-size: 15px; }
.mk-author__bio { font-size: 13.5px; color: var(--mk-dim); max-width: 520px; }

/* ── 09 · INTERACTIFS (terminal, FAQ, deep-dive) ──────────────────── */

/* Fenêtre terminal (blog-article.html : .term) */
.mk-term {
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius);
  background: var(--mk-bg2);
  overflow: hidden;
  margin: 0 0 24px;
}
.mk-term__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--mk-line);
  font-family: var(--mk-mono);
  font-size: 11px;
  color: var(--mk-muted);
  letter-spacing: 0.1em;
}
.mk-term__bar .dots span { display: inline-block; width: 9px; height: 9px; border-radius: 99px; margin-right: 5px; }
.mk-term__bar .dots span:nth-child(1) { background: var(--mk-accent-deep); }
.mk-term__bar .dots span:nth-child(2) { background: var(--mk-signal); }
.mk-term__bar .dots span:nth-child(3) { background: var(--mk-accent); }
.mk-term__body {
  padding: 20px 24px;
  font-family: var(--mk-mono);
  font-size: 12.5px;
  line-height: 2;
  color: var(--mk-dim);
  overflow-x: auto;
}
.mk-term__body pre { margin: 0; font-family: inherit; white-space: pre; }

/* États scopés courts — convergés avec .mk-dive__visual (fonctionnalites.html)
   là où les valeurs sont identiques (.ok/.sig/.hi). .meta est propre au terminal
   (industrie-plombiers.html : .term-body .meta). */
.mk-term .ok,
.mk-dive__visual .ok { color: var(--mk-accent); }
.mk-term .sig,
.mk-dive__visual .sig { color: var(--mk-signal); }
.mk-term .hi,
.mk-dive__visual .hi { color: var(--mk-fg); }
.mk-term .meta { color: var(--mk-muted); font-size: 11.5px; letter-spacing: 0.06em; }

/* FAQ accordéon (tarifs.html + industrie-plombiers.html : .faq-*) */
.mk-faq { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; }
.mk-faq__title {
  font-family: var(--mk-display);
  font-weight: 600;
  letter-spacing: -0.04em;
  font-size: 48px;
  line-height: 1;
  margin: 0;
}
.mk-faq__item { border-top: 1px solid var(--mk-line); }
.mk-faq__item:last-child { border-bottom: 1px solid var(--mk-line); }
.mk-faq__q {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--mk-fg);
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.mk-faq__q .num { color: var(--mk-muted); font-size: 12px; font-family: var(--mk-mono); margin-right: 16px; }
.mk-faq__q .q { font-family: var(--mk-display); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; }
.mk-faq__q .toggle { color: var(--mk-signal); font-size: 18px; flex-shrink: 0; margin-left: 20px; }
.mk-faq__a { display: none; padding: 0 0 24px 36px; color: var(--mk-dim); font-size: 15px; max-width: 640px; }
.mk-faq__item.open .mk-faq__a { display: block; animation: mk-fadein .25s ease both; }

@media (max-width: 1024px) {
  .mk-faq { grid-template-columns: 1fr; gap: 32px; }
}

/* Deep-dive alterné (fonctionnalites.html : .dive) */
.mk-dive {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 64px 0;
  border-bottom: 1px solid var(--mk-line);
}
.mk-dive:last-child { border-bottom: none; padding-bottom: 0; }
.mk-dive:first-child { padding-top: 0; }
.mk-dive:nth-child(even) .mk-dive__visual { order: -1; }
.mk-dive .num { font-family: var(--mk-mono); font-size: 12px; color: var(--mk-muted); margin-bottom: 14px; }
.mk-dive .num b { color: var(--mk-accent); font-weight: 500; }
.mk-dive h3 {
  font-family: var(--mk-display);
  font-weight: 600;
  font-size: 34px;
  margin: 0 0 14px;
  letter-spacing: -0.03em;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.mk-dive p { color: var(--mk-dim); font-size: 15px; margin: 0 0 22px; max-width: 460px; }
.mk-dive .link { color: var(--mk-accent); font-size: 13px; font-family: var(--mk-nav-font); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
.mk-dive__visual {
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius);
  background: var(--mk-bg2);
  padding: 26px 28px;
  font-family: var(--mk-mono);
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--mk-dim);
  overflow-x: auto;
}
.mk-dive__visual .t-head {
  color: var(--mk-muted);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mk-dive__visual .dot { width: 8px; height: 8px; border-radius: 99px; background: var(--mk-accent); display: inline-block; }
.mk-dive__visual pre { margin: 0; font-family: inherit; white-space: pre; }

@media (max-width: 1024px) {
  .mk-dive { grid-template-columns: 1fr; gap: 32px; }
  .mk-dive:nth-child(even) .mk-dive__visual { order: 0; }
}

/* ── 10 · CTA (en-tête de page, bannière, CTA final) ──────────────── */

/* En-tête de page — convergence de .pricing-head/.ind-head/.feat-head
   (h1 réutilise .mk-h1, le "dim" du h1 réutilise .mk-dim ; ~5 valeurs
   divergentes tranchées ci-dessous, cf. rapport de tâche). */
.mk-hero-head__sub { font-size: 16px; color: var(--mk-dim); max-width: 620px; margin: 0 0 12px; }
.mk-hero-head__note { font-size: 13px; color: var(--mk-muted); font-family: var(--mk-mono); margin-bottom: 28px; }
.mk-hero-head__row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.mk-hero-head .crumb { color: var(--mk-muted); }

/* Bannière "nouveau" (fonctionnalites.html : .new-banner) */
.mk-banner {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(224,145,63,0.35);
  background: rgba(224,145,63,0.06);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13px;
  color: var(--mk-fg);
}
.mk-banner .tag {
  font-family: var(--mk-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #0a0a0a;
  background: var(--mk-signal);
  border-radius: 999px;
  padding: 2px 9px;
  font-weight: 700;
}
.mk-banner .go { color: var(--mk-accent); }

/* CTA final — convergence de .cta-final (tarifs/fonctionnalites/industrie) */
.mk-cta-final {
  padding: 120px var(--mk-pad-x) 80px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--mk-line);
}
.mk-cta-final .eol {
  position: absolute;
  top: 40px;
  right: var(--mk-pad-x);
  font-size: 11px;
  color: var(--mk-muted);
  letter-spacing: 0.14em;
  font-family: var(--mk-mono);
}
.mk-cta-final h2 {
  font-family: var(--mk-display);
  font-weight: 600;
  letter-spacing: -0.04em;
  font-size: clamp(56px, 8vw, 116px);
  line-height: 0.92;
  margin: 0;
}
.mk-cta-final h2 .accent { color: var(--mk-accent); font-family: var(--mk-accent-font); font-style: italic; font-weight: 400; }
.mk-cta-final .row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 56px;
  gap: 32px;
  flex-wrap: wrap;
}
.mk-cta-final .blurb { font-size: 14px; color: var(--mk-dim); max-width: 460px; }

@media (max-width: 640px) {
  .mk-cta-final .row { flex-direction: column; align-items: flex-start; }
}

/* ── HOME ─────────────────────────────────────────────────── */

/* Hero 2 colonnes (éditorial gauche / iPhone droite) */
.mk-home-hero { border-bottom: 1px solid var(--mk-line); }
.mk-home-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  max-width: 1360px;
  margin: 0 auto;
  min-height: 680px;
}
.mk-home-hero__left {
  padding: 72px 48px 56px var(--mk-pad-x);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 36px;
  position: relative;
  overflow: hidden;
}
/* Filigrane monogramme derrière le texte — le contenu passe au-dessus */
.mk-home-hero__watermark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 620px; max-width: none; opacity: 0.08;
  pointer-events: none; user-select: none; -webkit-user-select: none;
}
.mk-home-hero__left > :not(.mk-home-hero__watermark) { position: relative; }
.mk-home-hero__brand { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.mk-home-hero__brand img { width: 66px; height: 66px; display: block; }
.mk-home-hero__brand .word { font-family: var(--mk-display); font-weight: 600; font-size: 40px; color: var(--mk-fg); letter-spacing: -0.03em; }
.mk-home-hero__left h1 {
  font-family: var(--mk-display);
  font-weight: 600;
  letter-spacing: -0.04em;
  font-size: clamp(40px, 4.9vw, 74px);
  line-height: 0.99;
  margin: 0;
  color: var(--mk-fg);
}
.mk-home-hero__left h1 .dim { color: var(--mk-muted); }
.mk-home-hero__left h1 .accent {
  color: var(--mk-accent);
  font-family: var(--mk-accent-font);
  font-style: italic;
  font-weight: 400;
}
.mk-home-hero__sub { max-width: 470px; font-size: 16px; color: var(--mk-dim); line-height: 1.55; }
.mk-home-hero__cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.mk-home-hero__channels { display: flex; align-items: center; gap: 12px; }
.mk-home-hero__channels svg { width: 34px; height: 34px; }
/* Défs SVG partagées (dégradés des icônes de marque) — hors flux, invisibles */
.mk-svgdefs { position: absolute; width: 0; height: 0; overflow: hidden; }
.mk-home-hero__right { display: flex; align-items: center; justify-content: center; padding: 40px 0; overflow: hidden; }

/* iPhone mock */
.mk-phone {
  width: 296px; height: 600px;
  background: #0a0a0a; border-radius: 52px; padding: 10px;
  box-shadow: 0 40px 100px rgba(0,0,0,0.55), 0 0 0 1.5px #2a2a2e, inset 0 0 0 2px #1a1a1c;
  position: relative; flex-shrink: 0;
}
.mk-phone__screen {
  width: 100%; height: 100%;
  background: radial-gradient(125% 80% at 50% 0%, #3a2410 0%, #150d07 46%, #000 100%);
  border-radius: 42px; overflow: hidden; display: flex; flex-direction: column; position: relative;
}
.mk-phone__island { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 110px; height: 32px; background: #0a0a0a; border-radius: 20px; z-index: 10; }
.mk-phone__status { display: flex; justify-content: space-between; align-items: center; padding: 16px 26px 0; font-size: 14px; color: #fff; font-weight: 600; font-family: var(--mk-body-font); }
.mk-phone__lock { padding: 30px 20px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mk-phone__appicon {
  width: 96px; height: 96px; border-radius: 26px; display: block; margin-bottom: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45), 0 0 0 4px var(--mk-glow-ambient);
}
.mk-phone__lock .name { font-family: var(--mk-display); font-weight: 600; font-size: 30px; color: #fff; letter-spacing: -0.03em; }
.mk-phone__lock .status { font-size: 12px; color: rgba(255,255,255,0.82); display: flex; align-items: center; gap: 6px; font-family: var(--mk-body-font); }
.mk-phone__lock .status .dot { width: 6px; height: 6px; border-radius: 50%; background: #2ed3a3; box-shadow: 0 0 0 2px rgba(46,211,163,0.3); }
.mk-phone__notifs { flex: 1; overflow: hidden; padding: 8px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.mk-phone__indicator { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 120px; height: 4px; background: #000; border-radius: 2px; }

/* Carte de notification */
.mk-notif {
  background: rgba(28,28,32,0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: 17px; padding: 10px 12px; display: flex; gap: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.mk-notif__icon { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; overflow: hidden; display: block; color: var(--mk-accent); }
.mk-notif__icon svg { width: 30px; height: 30px; }
.mk-notif__body-wrap { flex: 1; min-width: 0; }
.mk-notif__head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.mk-notif__app { font-size: 10.5px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--mk-body-font); }
.mk-notif__time { font-size: 9.5px; color: rgba(255,255,255,0.55); flex-shrink: 0; }
.mk-notif__who { font-size: 12px; font-weight: 700; color: #fff; margin-top: 2px; font-family: var(--mk-body-font); }
.mk-notif__text { font-size: 11.5px; color: rgba(255,255,255,0.78); line-height: 1.35; margin-top: 1px; font-family: var(--mk-body-font); }
.mk-notif__outcome { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #2ed3a3; }
.mk-notif__outcome .dot { width: 5px; height: 5px; border-radius: 50%; background: #2ed3a3; }

/* Animation pop-in (enrichissement progressif) */
@keyframes mk-notifpop { from { opacity: 0; transform: translateY(-16px) scale(0.95); } to { opacity: 1; transform: none; } }
.mk-notif--anim { animation: mk-notifpop 0.5s cubic-bezier(.2,.9,.3,1.25) both; }
@media (prefers-reduced-motion: reduce) { .mk-notif--anim { animation: none; } }

/* « Comment ça marche » — 4 étapes numérotées */
.mk-step .num { font-family: var(--mk-mono); font-size: 13px; color: var(--mk-accent); margin-bottom: 14px; }
.mk-step h3 { font-family: var(--mk-display); font-weight: 600; font-size: 21px; margin: 0 0 10px; letter-spacing: -0.02em; }
.mk-step p { margin: 0; color: var(--mk-dim); font-size: 14px; line-height: 1.55; }

/* Responsive home */
@media (max-width: 1024px) {
  .mk-home-hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .mk-home-hero__right { order: 2; }
}
@media (max-width: 640px) { .mk-home-hero__left { padding: 48px 24px 32px; } }

/* Bandeau de stats sous le hero — 4 chiffres clés, dividers hairline */
.mk-home-stats { border-bottom: 1px solid var(--mk-line); padding: 48px var(--mk-pad-x); }
.mk-home-stats__grid { max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); }
.mk-home-stats__item {
  padding: 8px 32px;
  display: flex; flex-direction: column; gap: 12px;
  border-left: 1px solid var(--mk-line);
}
.mk-home-stats__item:first-child { border-left: none; }
.mk-home-stats__n {
  font-family: var(--mk-display); font-weight: 600; letter-spacing: -0.04em;
  font-size: clamp(30px, 2.8vw, 46px); line-height: 1; color: var(--mk-fg);
}
.mk-home-stats__item:first-child .mk-home-stats__n { color: var(--mk-accent); }
.mk-home-stats__meta { display: flex; flex-direction: column; gap: 4px; }
.mk-home-stats__label { font-size: 13px; font-weight: 700; color: var(--mk-fg); text-transform: uppercase; letter-spacing: 0.05em; }
.mk-home-stats__sub { font-size: 13px; color: var(--mk-dim); line-height: 1.45; }
@media (max-width: 760px) {
  .mk-home-stats__grid { grid-template-columns: 1fr 1fr; }
  .mk-home-stats__item { padding: 16px 20px; }
  .mk-home-stats__item:nth-child(odd) { border-left: none; }
  .mk-home-stats__item:nth-child(n+3) { border-top: 1px solid var(--mk-line); }
}

/* ── Section Multicanal (home) — carrousel de canaux + hub de convergence ── */
.mk-tint-accent { --tint: var(--mk-accent); }
.mk-tint-sms { --tint: #34c759; }
.mk-tint-msgr { --tint: #a855f7; }
.mk-tint-ig { --tint: #e1306c; }
.mk-chan__sub { max-width: 620px; font-size: 16px; color: var(--mk-dim); line-height: 1.55; margin: 0 0 48px; }
.mk-chan__panel { display: grid; grid-template-columns: 1.05fr 0.95fr; border: 1px solid var(--mk-line); background: var(--mk-bg2); }
.mk-chan__left { border-right: 1px solid var(--mk-line); display: flex; flex-direction: column; }
.mk-chan__tabs { display: flex; border-bottom: 1px solid var(--mk-line); }
.mk-chan__tab {
  flex: 1; background: transparent; border: none; border-bottom: 2px solid transparent; cursor: pointer;
  padding: 13px 0; display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.mk-chan__tab svg { width: 20px; height: 20px; opacity: 0.55; transition: opacity .15s; }
.mk-chan__tab.on { background: rgba(255,255,255,0.04); border-bottom-color: var(--tint); }
.mk-chan__tab.on svg { opacity: 1; }
.mk-chan__viewport { padding: 30px 26px; min-height: 560px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mk-chan__scene { display: none; }
.mk-chan__scene.on { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.mk-chan__cap { text-align: center; max-width: 340px; }
.mk-chan__cap .row { display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 6px; }
.mk-chan__cap .name { font-size: 15px; font-weight: 700; color: var(--mk-fg); }
.mk-chan__cap .pill {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mk-muted); border: 1px solid var(--mk-line); padding: 3px 8px; border-radius: 999px;
}
.mk-chan__cap .pill.on { color: var(--mk-accent); border-color: rgba(224,145,63,0.33); }
.mk-chan__cap .scn { font-size: 13px; color: var(--mk-dim); line-height: 1.5; }
.mk-chan__controls { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-top: 1px solid var(--mk-line); }
.mk-chan__arrow {
  background: transparent; border: 1px solid var(--mk-line); color: var(--mk-fg); width: 34px; height: 34px;
  border-radius: 999px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.mk-chan__dots { display: flex; gap: 7px; }
.mk-chan__dot { width: 7px; height: 7px; border-radius: 999px; border: none; cursor: pointer; padding: 0; background: var(--mk-line); transition: width .2s, background .2s; }
.mk-chan__dot.on { width: 22px; background: var(--tint); }

/* mini-téléphone des scènes */
.mk-cshell { width: 250px; height: 512px; background: #0a0a0a; border-radius: 44px; padding: 9px; box-shadow: 0 30px 70px rgba(0,0,0,0.55), 0 0 0 1.5px #2a2a2e; position: relative; flex-shrink: 0; }
.mk-cshell__screen { width: 100%; height: 100%; border-radius: 36px; overflow: hidden; display: flex; flex-direction: column; position: relative; background: #000; }
.mk-cshell__island { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 86px; height: 24px; background: #0a0a0a; border-radius: 16px; z-index: 20; }
.mk-ministatus { display: flex; justify-content: space-between; align-items: center; padding: 11px 22px 0; font-size: 13px; font-weight: 600; color: #fff; font-family: var(--mk-body-font); }
.mk-ministatus .right { display: flex; align-items: center; gap: 5px; }
.mk-ministatus .batt { width: 22px; height: 10px; border: 1px solid rgba(255,255,255,0.6); border-radius: 3px; padding: 1px; display: block; }
.mk-ministatus .batt i { display: block; width: 82%; height: 100%; background: currentColor; border-radius: 1px; }
.mk-ministatus--dark { color: #000; }
.mk-ministatus--dark .batt { border-color: rgba(0,0,0,0.4); }

/* scène appel iOS */
.mk-callscr { background: radial-gradient(ellipse 100% 55% at 50% 0%, #2a1a0c 0%, #0a0a0a 62%); color: #fff; }
.mk-callscr__id { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px 20px 0; }
.mk-callscr__icon { width: 82px; height: 82px; border-radius: 25px; margin-bottom: 13px; box-shadow: 0 0 0 4px var(--mk-glow-ambient); }
.mk-callscr__name { font-size: 22px; font-weight: 600; font-family: var(--mk-display); }
.mk-callscr__num { font-size: 12.5px; color: rgba(255,255,255,0.6); margin-top: 4px; }
.mk-callscr__state { margin-top: 7px; font-size: 13px; color: var(--mk-accent); letter-spacing: 0.05em; }
.mk-callscr__wave { display: flex; align-items: center; justify-content: center; gap: 3px; margin-top: 15px; height: 24px; }
.mk-callscr__wave i { width: 3px; border-radius: 2px; background: var(--mk-accent); opacity: 0.9; animation: mk-cwave 1s ease-in-out infinite alternate; }
.mk-callscr__wave i:nth-child(1) { height: 10px; animation-delay: 0s; }
.mk-callscr__wave i:nth-child(2) { height: 18px; animation-delay: 0.06s; }
.mk-callscr__wave i:nth-child(3) { height: 8px; animation-delay: 0.12s; }
.mk-callscr__wave i:nth-child(4) { height: 22px; animation-delay: 0.18s; }
.mk-callscr__wave i:nth-child(5) { height: 14px; animation-delay: 0.24s; }
.mk-callscr__wave i:nth-child(6) { height: 24px; animation-delay: 0.3s; }
.mk-callscr__wave i:nth-child(7) { height: 12px; animation-delay: 0.36s; }
.mk-callscr__wave i:nth-child(8) { height: 20px; animation-delay: 0.42s; }
.mk-callscr__wave i:nth-child(9) { height: 9px; animation-delay: 0.48s; }
.mk-callscr__wave i:nth-child(10) { height: 16px; animation-delay: 0.54s; }
.mk-callscr__wave i:nth-child(11) { height: 22px; animation-delay: 0.6s; }
.mk-callscr__wave i:nth-child(12) { height: 11px; animation-delay: 0.66s; }
.mk-callscr__wave i:nth-child(13) { height: 15px; animation-delay: 0.72s; }
@keyframes mk-cwave { from { transform: scaleY(0.4); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .mk-callscr__wave i { animation: none; } }
.mk-callscr__bottom { padding: 0 20px 24px; }
.mk-callscr__ctrls { display: grid; grid-template-columns: repeat(3, 56px); gap: 15px; margin-bottom: 20px; justify-content: center; }
.mk-callscr__ctrl { text-align: center; }
.mk-callscr__ctrl .btn { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,0.13); margin: 0 auto 5px; display: flex; align-items: center; justify-content: center; }
.mk-callscr__ctrl .lbl { font-size: 9px; color: rgba(255,255,255,0.7); display: block; }
.mk-callscr__end { width: 54px; height: 54px; border-radius: 50%; background: #ff3b30; margin: 0 auto; display: flex; align-items: center; justify-content: center; transform: rotate(135deg); color: #fff; }

/* scène app de messagerie (SMS / Messenger / Instagram) */
.mk-msgscr { background: #fff; }
.mk-msgscr__head { display: flex; align-items: center; gap: 9px; padding: 6px 12px 11px; border-bottom: 1px solid rgba(0,0,0,0.08); }
.mk-msgscr__head .back { font-size: 26px; line-height: 1; margin-top: -2px; }
.mk-msgscr__head .avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: block; }
.mk-msgscr__head .avatar img { width: 100%; height: 100%; border-radius: 50%; display: block; object-fit: cover; }
.mk-msgscr__head .avatar--ring { padding: 2px; }
.mk-msgscr__head .avatar--ring img { box-shadow: 0 0 0 2px #fff; }
.mk-msgscr__head .who { flex: 1; line-height: 1.15; display: flex; flex-direction: column; }
.mk-msgscr__head .who .t { font-size: 13.5px; font-weight: 700; color: #000; }
.mk-msgscr__head .who .s { font-size: 10.5px; color: #8e8e93; }
.mk-msgscr__head .acts { display: flex; gap: 13px; }
.mk-msgscr__msgs { flex: 1; padding: 14px 12px; display: flex; flex-direction: column; gap: 6px; justify-content: flex-end; }
.mk-msgscr__msgs .m { max-width: 76%; padding: 8px 12px; border-radius: 18px; font-size: 12.5px; line-height: 1.35; font-family: var(--mk-body-font); }
.mk-msgscr__msgs .m--aria { align-self: flex-start; }
.mk-msgscr__msgs .m--client { align-self: flex-end; color: #fff; }
.mk-msgscr__input { margin: 8px 12px 15px; border: 1px solid rgba(0,0,0,0.08); border-radius: 18px; padding: 7px 13px; font-size: 12px; color: #8e8e93; font-family: var(--mk-body-font); }
.mk-msgscr--sms .mk-msgscr__head { background: #f7f7f7; }
.mk-msgscr--sms .back, .mk-msgscr--sms .acts { color: #34c759; }
.mk-msgscr--sms .m--aria { background: #e9e9eb; color: #000; }
.mk-msgscr--sms .m--client { background: #34c759; }
.mk-msgscr--messenger .back, .mk-msgscr--messenger .acts { color: #0084ff; }
.mk-msgscr--messenger .avatar--ring { background: linear-gradient(135deg, #0084ff, #a033ff); }
.mk-msgscr--messenger .m--aria { background: #f0f0f0; color: #000; }
.mk-msgscr--messenger .m--client { background: #0084ff; }
.mk-msgscr--instagram .back { color: #000; }
.mk-msgscr--instagram .acts { color: #000; }
.mk-msgscr--instagram .avatar--ring { background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf); }
.mk-msgscr--instagram .m--aria { background: #efefef; color: #000; }
.mk-msgscr--instagram .m--client { background: linear-gradient(135deg, #5b51d8, #a033c8 55%, #c13584); }

/* scène chat web (fenêtre navigateur + widget) */
.mk-webscr { width: min(384px, 100%); height: 468px; background: var(--mk-bg3); border-radius: 12px; overflow: hidden; border: 1px solid var(--mk-line); box-shadow: 0 30px 70px rgba(0,0,0,0.55); display: flex; flex-direction: column; }
.mk-webscr__bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--mk-line); background: var(--mk-bg2); }
.mk-webscr__bar .d { width: 10px; height: 10px; border-radius: 5px; display: block; }
.mk-webscr__bar .d--r { background: #ff5f57; }
.mk-webscr__bar .d--y { background: #febc2e; }
.mk-webscr__bar .d--g { background: #28c840; }
.mk-webscr__bar .url { flex: 1; margin-left: 10px; background: var(--mk-bg); border: 1px solid var(--mk-line); border-radius: 6px; padding: 4px 10px; font-size: 11px; color: var(--mk-dim); font-family: var(--mk-mono); }
.mk-webscr__page { position: relative; flex: 1; background: linear-gradient(160deg, #0d0f16, #07080c); overflow: hidden; }
.mk-webscr__skeleton { position: absolute; inset: 0; padding: 22px 24px; opacity: 0.5; }
.mk-webscr__skeleton i { display: block; border-radius: 5px; }
.mk-webscr__skeleton .s1 { width: 58px; height: 10px; background: rgba(138,145,168,0.28); margin-bottom: 26px; }
.mk-webscr__skeleton .s2 { width: 82%; height: 15px; border-radius: 6px; background: rgba(138,145,168,0.22); margin-bottom: 9px; }
.mk-webscr__skeleton .s3 { width: 64%; height: 15px; border-radius: 6px; background: rgba(138,145,168,0.22); margin-bottom: 22px; }
.mk-webscr__skeleton .s4 { width: 90%; height: 8px; border-radius: 4px; background: rgba(138,145,168,0.14); margin-bottom: 8px; }
.mk-webscr__skeleton .s5 { width: 86%; height: 8px; border-radius: 4px; background: rgba(138,145,168,0.14); margin-bottom: 8px; }
.mk-webscr__skeleton .s6 { width: 70%; height: 8px; border-radius: 4px; background: rgba(138,145,168,0.14); margin-bottom: 26px; }
.mk-webscr__skeleton .s7 { width: 118px; height: 30px; border-radius: 7px; background: var(--mk-accent); opacity: 0.55; }
.mk-webscr__widget { position: absolute; bottom: 14px; right: 14px; width: 292px; max-width: calc(100% - 28px); background: #fff; border: 1px solid rgba(255,255,255,0.6); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.04); }
.mk-webscr__widget .head { display: flex; align-items: center; gap: 9px; padding: 11px 13px; background: var(--mk-accent); }
.mk-webscr__widget .head img { width: 26px; height: 26px; border-radius: 7px; box-shadow: 0 0 0 1px rgba(255,255,255,0.3); }
.mk-webscr__widget .head .t { line-height: 1.1; flex: 1; display: flex; flex-direction: column; }
.mk-webscr__widget .head b { font-size: 12.5px; font-weight: 700; color: #fff; }
.mk-webscr__widget .head .st { display: flex; align-items: center; gap: 5px; font-size: 10px; color: rgba(255,255,255,0.9); }
.mk-webscr__widget .head .dot { width: 6px; height: 6px; border-radius: 50%; background: #2ed3a3; box-shadow: 0 0 0 2px rgba(46,211,163,0.35); }
.mk-webscr__widget .msgs { padding: 12px; display: flex; flex-direction: column; gap: 7px; background: #f4f6fa; }
.mk-webscr__widget .msgs .m { max-width: 80%; padding: 7px 11px; border-radius: 13px; font-size: 12px; line-height: 1.35; font-family: var(--mk-body-font); }
.mk-webscr__widget .msgs .m--aria { align-self: flex-start; background: #fff; color: #1d2230; border: 1px solid rgba(0,0,0,0.07); box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.mk-webscr__widget .msgs .m--client { align-self: flex-end; background: var(--mk-accent); color: #fff; }
.mk-webscr__widget .input { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-top: 1px solid rgba(0,0,0,0.07); background: #fff; font-size: 11.5px; color: #9aa0ad; }
.mk-webscr__widget .input .send { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; background: var(--mk-accent); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; }

/* hub de convergence radial */
.mk-chan__right { padding: 26px 30px; display: flex; flex-direction: column; gap: 20px; }
.mk-chan__hub { position: relative; width: 100%; max-width: 360px; height: 244px; margin: 2px auto 4px; }
.mk-chan__hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mk-chan__hub-lines line { stroke: rgba(224,145,63,0.28); stroke-width: 1; stroke-dasharray: 3 4; }
.mk-chan__hub-lines line.on { stroke: var(--mk-accent); stroke-width: 1.4; }
.mk-chan__hub-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 92px; height: 92px; border-radius: 24px;
  background: linear-gradient(150deg, var(--mk-accent), #8a4a1a); display: flex; align-items: center; justify-content: center; z-index: 3;
  box-shadow: 0 0 0 6px var(--mk-glow-ambient), 0 14px 40px rgba(0,0,0,0.5);
}
.mk-chan__hub-core img { width: 58px; height: 58px; }
.mk-chan__hub-node {
  position: absolute; transform: translate(-50%,-50%); z-index: 2; width: 44px; height: 44px; padding: 0;
  border-radius: 13px; border: none; cursor: pointer; background: transparent; overflow: hidden;
  filter: saturate(0.85); opacity: 0.9; transition: opacity .15s, filter .15s;
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}
.mk-chan__hub-node svg { width: 44px; height: 44px; display: block; }
.mk-chan__hub-node.on { filter: none; opacity: 1; box-shadow: 0 0 0 2px var(--mk-accent), 0 8px 18px rgba(0,0,0,0.45); }
.mk-chan__hub-node.n1 { left: 50%; top: 10%; }
.mk-chan__hub-node.n2 { left: 86.1%; top: 37.6%; }
.mk-chan__hub-node.n3 { left: 72.3%; top: 82.4%; }
.mk-chan__hub-node.n4 { left: 27.7%; top: 82.4%; }
.mk-chan__hub-node.n5 { left: 13.9%; top: 37.6%; }
.mk-chan__hub-cap { position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--mk-accent); white-space: nowrap; }
.mk-chan__hub-cap .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--mk-accent); }

/* paires fonction → bénéfice + CTA */
.mk-chan__pair { display: grid; grid-template-columns: 44px 1fr; gap: 15px; padding: 16px 0; border-top: 1px solid var(--mk-line); }
.mk-chan__pair:first-child { border-top: none; }
.mk-chan__pair .ic { width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(224,145,63,0.08); border: 1px solid rgba(224,145,63,0.28); color: var(--mk-accent); }
.mk-chan__pair .ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mk-chan__pair .head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.mk-chan__pair .func { color: var(--mk-fg); }
.mk-chan__pair .arr { color: var(--mk-muted); }
.mk-chan__pair .ben { color: var(--mk-signal); }
.mk-chan__pair .body { font-size: 13px; color: var(--mk-dim); line-height: 1.5; }
.mk-chan__ctarow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mk-chan__ctarow .proof { font-size: 12px; color: var(--mk-muted); }

@media (max-width: 1024px) {
  .mk-chan__panel { grid-template-columns: 1fr; }
  .mk-chan__left { border-right: none; border-bottom: 1px solid var(--mk-line); }
  .mk-chan__viewport { min-height: 0; padding: 26px 16px; }
}

/* ── FORM ─────────────────────────────────────────────────── */

.mk-form { display: grid; gap: 18px; max-width: 560px; margin: 0 auto; }
.mk-field { display: grid; gap: 8px; }
.mk-label {
  font-family: var(--mk-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mk-dim);
}
.mk-input, .mk-textarea {
  width: 100%;
  background: var(--mk-bg2);
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-radius);
  color: var(--mk-fg);
  font-family: var(--mk-body-font);
  font-size: 15px;
  padding: 14px 16px;
}
.mk-textarea { min-height: 140px; resize: vertical; }
.mk-input::placeholder, .mk-textarea::placeholder { color: var(--mk-muted); }
.mk-input:focus-visible, .mk-textarea:focus-visible {
  outline: none;
  border-color: var(--mk-accent);
  box-shadow: 0 0 0 3px rgba(224,145,63,0.18);
}

/* Trust signals (rangée sous le formulaire) */
.mk-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; margin-top: 40px; }
.mk-trust__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mk-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mk-dim);
}
.mk-trust__item svg { width: 16px; height: 16px; color: var(--mk-accent); }

/* ── DEMO HERO (page prise-de-rendez-vous) ───────────────────────────── */
.mk-demo-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.mk-demo-hero__phone { display: flex; justify-content: center; }
@media (max-width: 900px) { .mk-demo-hero { grid-template-columns: 1fr; gap: 40px; } }

/* ── DEMO LAYOUT (en-tête centré + sidebar d'étapes + téléphone) ────── */
.mk-demo-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.mk-demo-head .mk-hero-head__sub { margin-left: auto; margin-right: auto; }
.mk-demo { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 1fr 360px; gap: 64px; align-items: start; }
.mk-demo__steps { position: sticky; top: 96px; }
.mk-demo__title { font-family: var(--mk-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mk-dim); margin-bottom: 18px; }
.mk-demo__step { width: 100%; display: flex; align-items: center; gap: 14px; padding: 13px 16px; background: transparent; border: 1px solid var(--mk-line); border-radius: var(--mk-radius); color: var(--mk-dim); font-size: 13.5px; font-weight: 600; font-family: var(--mk-nav-font); cursor: pointer; text-align: left; margin-bottom: 8px; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.mk-demo__step:hover { background: rgba(232,236,245,0.03); border-color: rgba(138,145,168,0.3); color: var(--mk-fg); }
.mk-demo__step.active { background: rgba(224,145,63,0.08); border-color: rgba(224,145,63,0.35); color: var(--mk-accent); }
.mk-demo__num { width: 28px; height: 28px; border-radius: 8px; background: rgba(232,236,245,0.05); display: flex; align-items: center; justify-content: center; font-family: var(--mk-mono); font-size: 11px; font-weight: 600; flex-shrink: 0; }
.mk-demo__step.active .mk-demo__num { background: rgba(224,145,63,0.15); color: var(--mk-accent); }
.mk-demo__phone { display: flex; justify-content: center; }
@media (max-width: 900px) { .mk-demo { grid-template-columns: 1fr; gap: 40px; } .mk-demo__steps { position: static; } }

/* ── PHONE WIDGET (réutilise .mk-phone §17 — écran en flux libre pour le widget) ── */
.mk-phone--widget .mk-phone__screen { display: block; }
.mk-phone__widget { padding: 54px 14px 20px; height: 100%; overflow-y: auto; scrollbar-width: none; font-family: var(--mk-body-font); }
.mk-phone__widget::-webkit-scrollbar { display: none; }

/* ── BOOKING WIDGET (mockup produit, thème sombre Terminal — restyle v3, structure live) ── */
.bk-logo { text-align: center; margin-bottom: 14px; font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -0.02em; display: flex; align-items: center; justify-content: center; gap: 5px; }
.bk-logo .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--mk-accent); }
.bk-card { background: rgba(13,15,22,0.85); border: 1px solid rgba(138,145,168,0.18); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.3); }
.bk-card-header { padding: 16px 16px 12px; border-bottom: 1px solid rgba(138,145,168,0.12); }
.bk-client-row { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.bk-client-logo { width: 24px; height: 24px; background: var(--mk-accent); border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #0a0a0a; flex-shrink: 0; }
.bk-client-name { font-size: 11px; font-weight: 600; color: var(--mk-fg); }
.bk-card-title { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.bk-card-sub { font-size: 11px; color: var(--mk-dim); }
.bk-progress { display: flex; gap: 3px; margin-top: 10px; }
.bk-step { height: 2.5px; flex: 1; border-radius: 100px; background: rgba(232,236,245,0.12); transition: background 0.3s; }
.bk-step.active { background: var(--mk-accent); }
.bk-step.done { background: rgba(224,145,63,0.45); }
.bk-card-body { padding: 14px 16px 16px; }
.bk-label { display: block; font-size: 11px; font-weight: 600; color: var(--mk-fg); margin-bottom: 5px; }
.bk-input { width: 100%; padding: 8px 10px; border: 1.5px solid rgba(138,145,168,0.25); border-radius: 7px; font-size: 12px; color: var(--mk-fg); background: rgba(232,236,245,0.05); font-family: var(--mk-body-font); margin-bottom: 10px; box-sizing: border-box; }
.bk-input::placeholder { color: var(--mk-muted); }
.bk-input:focus-visible { outline: none; border-color: var(--mk-accent); }
.bk-hint { font-size: 10px; color: var(--mk-muted); margin-top: -8px; margin-bottom: 10px; }
.bk-btn { width: 100%; padding: 10px; background: var(--mk-accent); color: #0a0a0a; border: none; border-radius: 7px; font-size: 12px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--mk-body-font); }
.bk-btn:hover:not(:disabled) { background: #fff; }
.bk-powered { text-align: center; font-size: 10px; color: var(--mk-muted); margin-top: 10px; }
.bk-step-panel { display: none; animation: bkIn .3s ease both; }
.bk-step-panel.active { display: block; }
@keyframes bkIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.bk-service-card { border: 1.5px solid rgba(138,145,168,0.25); border-radius: 7px; padding: 10px 12px; cursor: pointer; transition: all .15s; margin-bottom: 6px; }
.bk-service-card.selected { background: var(--mk-accent); border-color: var(--mk-accent); }
.bk-service-name { font-size: 12px; font-weight: 600; color: var(--mk-fg); margin-bottom: 2px; }
.bk-service-card.selected .bk-service-name { color: #0a0a0a; }
.bk-service-meta { font-size: 10.5px; color: var(--mk-dim); }
.bk-service-card.selected .bk-service-meta { color: rgba(10,10,10,.65); }
.bk-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 12px; }
.bk-slot { padding: 7px 4px; border: 1.5px solid rgba(138,145,168,0.25); border-radius: 7px; background: transparent; font-size: 11.5px; font-weight: 500; cursor: pointer; text-align: center; color: var(--mk-fg); font-family: var(--mk-body-font); transition: all .15s; }
.bk-slot.selected { background: var(--mk-accent); border-color: var(--mk-accent); color: #0a0a0a; }
.bk-summary-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid rgba(138,145,168,0.12); font-size: 11.5px; }
.bk-summary-row:last-child { border-bottom: none; }
.bk-summary-label { color: var(--mk-dim); }
.bk-summary-value { font-weight: 600; color: #fff; }
.bk-success { text-align: center; padding: 24px 16px 20px; }
.bk-success-icon { width: 48px; height: 48px; background: rgba(46,211,163,0.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; color: #2ed3a3; }
.bk-success-title { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.bk-success-msg { font-size: 11.5px; color: var(--mk-dim); margin-bottom: 14px; line-height: 1.5; }
.bk-success-detail { background: rgba(232,236,245,0.04); border: 1px solid rgba(138,145,168,0.15); border-radius: 7px; padding: 10px 12px; text-align: left; }
.bk-success-row { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--mk-dim); margin-bottom: 5px; }
.bk-success-row:last-child { margin-bottom: 0; }
.bk-success-row strong { color: #fff; margin-left: auto; font-size: 11.5px; }
.bk-nav-dots { display: flex; justify-content: center; gap: 6px; margin-top: 18px; }
.bk-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(232,236,245,0.2); border: none; cursor: pointer; padding: 0; transition: all .2s; }
.bk-dot.active { width: 20px; border-radius: 3px; background: var(--mk-accent); }

/* Utilitaires widget (remplacent les styles inline du live — versions sombres v3) */
.bk-btn:disabled { opacity: .35; cursor: not-allowed; }
.bk-mt8 { margin-top: 8px; }
.bk-mt10 { margin-top: 10px; }
.bk-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.bk-input--flat { margin-bottom: 0; }
.bk-input--ro { background: rgba(232,236,245,0.03); }
.bk-optional { font-weight: 400; color: var(--mk-muted); }
.bk-back { background: none; border: none; font-size: 11px; color: var(--mk-dim); cursor: pointer; display: flex; align-items: center; gap: 4px; margin-top: 8px; font-family: var(--mk-body-font); }
.bk-restart-wrap { text-align: center; margin-top: 8px; }
.bk-restart { background: none; border: none; font-size: 10.5px; color: var(--mk-dim); cursor: pointer; font-family: var(--mk-body-font); }
.bk-welcome { display: flex; align-items: center; gap: 8px; background: rgba(224,145,63,0.08); border: 1px solid rgba(224,145,63,0.3); border-radius: 7px; padding: 8px 10px; margin-bottom: 10px; }
.bk-welcome__avatar { width: 28px; height: 28px; background: var(--mk-accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #0a0a0a; font-weight: 700; font-size: 12px; flex-shrink: 0; }
.bk-welcome__title { font-size: 11.5px; font-weight: 600; color: #fff; }
.bk-welcome__sub { font-size: 10.5px; color: var(--mk-dim); }
.bk-label--tight { margin-bottom: 2px; }
.bk-tz { font-size: 10px; color: var(--mk-muted); margin-bottom: 8px; display: flex; align-items: center; gap: 3px; }
.bk-summary { border: 1px solid rgba(138,145,168,0.15); border-radius: 8px; overflow: hidden; margin-bottom: 12px; }
.bk-cal-link { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--mk-dim); border: 1px solid rgba(138,145,168,0.25); border-radius: 100px; padding: 6px 14px; margin-top: 10px; font-family: var(--mk-body-font); text-decoration: none; }
.bk-logo--sm { font-size: 13px; margin-bottom: 12px; }