/* ============================================================================
   MLC Marketing — "ATELIER" editorial design system  (v6, 2026)
   ----------------------------------------------------------------------------
   A warm, print-inspired identity for a WhatsApp-commerce product aimed at
   small sellers. The language is editorial: a serif display face (Fraunces),
   a clean grotesque for text (Inter), numbered section markers, hairline
   rules that draw in, asymmetric columns, generous whitespace, ink on warm
   paper with a single disciplined green accent and deep-forest statement
   bands.

   Tokens live in BOTH the inline critical CSS (mlc-unified.php) and here so
   the page is styled before this file loads. Names are shared. Structural
   classes the PHP shortcodes / motion JS depend on are kept and restyled.
   Motion lives in marketing-fx.js (GSAP + Three.js) with marketing.js as the
   no-GSAP fallback. Every page works fully without JS.
   ========================================================================== */

/* ── 0. Scoped reset ──────────────────────────────────────────────────── */
.mlc-marketing-wrapper, .mlc-marketing-wrapper *,
.mlc-marketing-wrapper *::before, .mlc-marketing-wrapper *::after { box-sizing: border-box; }
.mlc-marketing-wrapper :is(h1,h2,h3,h4,h5,p,ul,ol,figure,blockquote){ margin:0; }
.mlc-marketing-wrapper img, .mlc-marketing-wrapper svg{ max-width:100%; height:auto; }
.mlc-marketing-wrapper button{ font:inherit; }
.mlc-marketing-wrapper{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* ── 1. Tokens (mirror of critical CSS) ───────────────────────────────── */
:root{
  --paper:#F7F4ED; --paper-2:#EFEADD; --card:#FCFAF3;
  --ink:#191510; --ink-soft:#3E3830; --body:#5A5349; --muted:#8A8275;
  --line:#E2DBCB; --line-2:#CDC4AF;
  --green:#0F7A45; --green-dk:#0B5C34; --green-br:#1FAE63; --wa:#25D366;
  --forest:#14231A; --forest-2:#1E3327;
  --on-dark:#ECE6D7; --on-dark-dim:rgba(236,230,215,.6); --on-dark-line:rgba(236,230,215,.16);
  --clay:#B5503A; --amber-bg:#F6ECCB; --amber-tx:#7A5A18;
  --font-d:"Fraunces",Georgia,"Times New Roman",serif;
  --font-b:"Inter",system-ui,-apple-system,sans-serif;
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:22px;
  --ease:cubic-bezier(.16,1,.3,1);
  --shadow-sm:0 1px 2px rgba(25,21,16,.05);
  --shadow-md:0 16px 40px -24px rgba(25,21,16,.18);
  --shadow-lg:0 36px 80px -40px rgba(25,21,16,.24);
  --glow:0 18px 44px -20px rgba(15,122,69,.30);
  /* back-compat aliases used by older inline styles / legal pages */
  --faint:var(--muted); --sig-soft:var(--green-br);
}

/* ── 2. Canvas + base type ────────────────────────────────────────────── */
.mlc-marketing-wrapper{
  background:var(--paper); color:var(--body);
  font-family:var(--font-b); font-size:16px; line-height:1.7;
  font-feature-settings:"kern" 1,"liga" 1;
}
.mlc-marketing-wrapper ::selection{ background:rgba(31,174,99,.22); color:var(--ink); }
.mlc-marketing-wrapper a{ color:var(--green-dk); text-decoration:none; }
.mlc-marketing-wrapper p{ margin:0 0 1em; }

/* Containers */
.mlc-container{ max-width:1200px; margin:0 auto; padding:0 clamp(22px,5vw,72px); box-sizing:border-box; }
.mlc-container-narrow,.mlc-container.mk-narrow{ max-width:760px; }
.mlc-container.mk-wide{ max-width:1340px; }

/* ── 3. Type system ───────────────────────────────────────────────────── */
.mlc-marketing-wrapper .mk-h1,
.mlc-marketing-wrapper .mk-display{
  font-family:var(--font-d); font-optical-sizing:auto;
  font-weight:480; font-size:clamp(38px,5vw,68px); line-height:1.04;
  letter-spacing:-.02em; color:var(--ink); margin:0;
}
/* The homepage split hero shares its row with the chat figure — cap it
   smaller than the full-width content/legal heroes. */
.mk-hero-2col .mk-h1{ font-size:clamp(34px,3.9vw,54px); line-height:1.06; }
.mlc-marketing-wrapper .mk-h2{
  font-family:var(--font-d); font-optical-sizing:auto;
  font-weight:500; font-size:clamp(30px,4.4vw,52px); line-height:1.06;
  letter-spacing:-.018em; color:var(--ink); margin:0;
}
.mlc-marketing-wrapper .mk-h3{
  font-family:var(--font-d); font-weight:560; font-size:clamp(20px,2.2vw,26px);
  line-height:1.18; letter-spacing:-.01em; color:var(--ink); margin:0;
}
.mlc-marketing-wrapper .mk-h4{
  font-family:var(--font-b); font-weight:650; font-size:17px; letter-spacing:-.01em;
  color:var(--ink); margin:0;
}
.mlc-marketing-wrapper .mk-lead{
  font-family:var(--font-b); font-weight:400; font-size:clamp(16px,1.35vw,19px);
  line-height:1.66; color:var(--body); margin:0;
}
.mlc-marketing-wrapper .mk-lead strong{ color:var(--ink-soft); font-weight:600; }
.mlc-marketing-wrapper .mk-lead a{ color:var(--green-dk); border-bottom:1px solid rgba(15,92,52,.32); }
.mlc-marketing-wrapper .mk-lead a:hover{ border-bottom-color:var(--green); }

/* Serif italic accent text */
.mlc-marketing-wrapper .mk-grad-text{
  font-style:italic; font-variation-settings:"SOFT" 40; color:var(--green-dk);
}
.mk-section-dark .mk-grad-text,.mk-cta-section .mk-grad-text{ color:var(--green-br); }

/* Numbered editorial kicker */
.mlc-marketing-wrapper .mk-eyebrow,
.mlc-marketing-wrapper .mk-label,
.mlc-marketing-wrapper .mk-badge,
.mlc-marketing-wrapper .mk-badge-wa,
.mlc-marketing-wrapper .mk-badge-dark{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-b); font-size:12px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--green-dk);
  margin:0 0 22px;
}
.mlc-marketing-wrapper .mk-eyebrow::before,
.mlc-marketing-wrapper .mk-badge-wa::before{
  content:""; width:26px; height:1px; background:var(--green); display:inline-block; flex-shrink:0;
}
.mlc-marketing-wrapper .mk-badge-dot{ display:none; }
.mk-section-dark .mk-eyebrow,.mk-cta-section .mk-eyebrow,
.mk-section-dark .mk-badge-wa,.mk-cta-section .mk-badge-wa{ color:var(--green-br); }
.mk-section-dark .mk-eyebrow::before,.mk-cta-section .mk-eyebrow::before,
.mk-section-dark .mk-badge-wa::before,.mk-cta-section .mk-badge-wa::before{ background:var(--green-br); }

/* Section head — editorial masthead row */
.mlc-marketing-wrapper .mk-sec-head{ max-width:780px; margin:0 0 clamp(40px,5vw,64px); }
.mlc-marketing-wrapper .mk-sec-head .mk-lead{ margin-top:18px; }
.mlc-marketing-wrapper .mk-sec-head--center{ margin-left:auto; margin-right:auto; text-align:center; }
.mlc-marketing-wrapper .mk-sec-head--center .mk-eyebrow{ justify-content:center; }

/* A standalone hairline rule (GSAP draws scaleX 0->1) */
.mlc-marketing-wrapper .mk-rule{
  height:1px; background:var(--line-2); border:0; margin:0;
  transform-origin:left center;
}
.mk-section-dark .mk-rule,.mk-cta-section .mk-rule{ background:var(--on-dark-line); }

/* Inline code chip */
.mlc-marketing-wrapper code,.mlc-marketing-wrapper .mk-kbd{
  font-family:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;
  font-size:.86em; font-weight:600; color:var(--green-dk);
  background:rgba(15,122,69,.08); border:1px solid rgba(15,122,69,.2);
  padding:.1em .45em; border-radius:5px;
}

/* ── 4. Buttons ───────────────────────────────────────────────────────── */
.mlc-marketing-wrapper .mk-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-b); font-size:14.5px; font-weight:600; letter-spacing:.01em;
  padding:13px 24px; border-radius:var(--r-sm); border:1px solid transparent;
  text-decoration:none; cursor:pointer; transition:transform .35s var(--ease),
  background .25s, color .25s, border-color .25s, box-shadow .35s var(--ease);
  white-space:nowrap;
}
.mlc-marketing-wrapper .mk-btn-lg{ padding:16px 30px; font-size:15.5px; }
.mlc-marketing-wrapper .mk-btn-primary{ background:var(--green); color:#fff!important; box-shadow:var(--glow); }
.mlc-marketing-wrapper .mk-btn-primary:hover{ background:var(--green-dk); transform:translateY(-2px); }
.mlc-marketing-wrapper .mk-btn-ghost,
.mlc-marketing-wrapper .mk-btn-outline{ background:transparent; color:var(--ink)!important; border-color:var(--line-2); }
.mlc-marketing-wrapper .mk-btn-ghost:hover,
.mlc-marketing-wrapper .mk-btn-outline:hover{ border-color:var(--ink); transform:translateY(-2px); }
.mk-section-dark .mk-btn-ghost,.mk-cta-section .mk-btn-ghost,
.mlc-marketing-wrapper .mk-btn-ghost-white{ background:transparent; color:var(--on-dark)!important; border-color:var(--on-dark-line); }
.mk-section-dark .mk-btn-ghost:hover,.mk-cta-section .mk-btn-ghost:hover,
.mlc-marketing-wrapper .mk-btn-ghost-white:hover{ border-color:var(--on-dark); transform:translateY(-2px); }
.mlc-marketing-wrapper .mk-btn-link{
  display:inline-flex; align-items:center; gap:8px; padding:6px 0;
  font-family:var(--font-b); font-weight:600; font-size:15px; color:var(--ink)!important;
  border-bottom:1px solid var(--ink); border-radius:0;
}
.mlc-marketing-wrapper .mk-btn-link:hover{ color:var(--green-dk)!important; border-bottom-color:var(--green); }
.mlc-marketing-wrapper .mk-btn-group{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.mlc-marketing-wrapper .mk-btn:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }

/* ── 5. Hero (editorial asymmetric) ───────────────────────────────────── */
.mk-hero-inner{ position:relative; z-index:2; width:100%; }
.mk-hero-2col{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,6vw,84px); align-items:center; }
.mk-hero-left{ position:relative; z-index:3; }
.mlc-marketing-wrapper .mk-hero .mk-h1{ margin:0 0 8px; }
.mk-hero-lead{ max-width:30em; margin-top:24px!important; }
.mk-hero-actions{ margin-top:34px; }
.mk-hero-meta{ display:flex; align-items:center; gap:14px; margin-bottom:26px;
  font-family:var(--font-b); font-size:12px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); flex-wrap:wrap; }
.mk-hero-meta b{ color:var(--green-dk); font-weight:600; }
.mk-hero-meta .mk-hm-sep{ width:24px; height:1px; background:var(--line-2); }
.mk-hero-trust-bar{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:30px;
  padding-top:24px; border-top:1px solid var(--line); }
.mk-htrust-item{ font-size:13px; font-weight:500; color:var(--ink-soft); display:inline-flex; align-items:center; gap:6px; }

.mk-hero-right{ position:relative; z-index:2; }
.mk-figure{ position:relative; }
.mk-figure-cap{ display:flex; align-items:baseline; gap:10px; margin-top:16px;
  font-family:var(--font-b); font-size:12px; letter-spacing:.04em; color:var(--muted); }
.mk-figure-cap b{ font-weight:600; color:var(--green-dk); letter-spacing:.1em; text-transform:uppercase; }

.mk-hero-grid-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.55;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 72% 8%,#000 0%,transparent 70%);
  mask-image:radial-gradient(120% 90% at 72% 8%,#000 0%,transparent 70%); }
.mk-hero-orb,.mk-orb-1,.mk-orb-2,.mk-orb-3,.mk-cta-orb-a,.mk-cta-orb-b{ display:none!important; }
.mk-webgl-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.95; }
.mk-scroll-cue{ position:absolute; left:clamp(22px,5vw,72px); bottom:18px; z-index:3;
  font-family:var(--font-b); font-size:11px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted); writing-mode:vertical-rl; }
.mk-scroll-cue::after{ content:""; display:block; width:1px; height:34px; margin:10px auto 0;
  background:linear-gradient(var(--line-2),transparent); }

/* Hero stats — editorial figures with hairline dividers */
.mk-stats-row,.mk-hero-stats{ display:grid; grid-template-columns:repeat(4,1fr); margin-top:clamp(40px,6vw,64px);
  border-top:1px solid var(--line-2); }
.mk-stat-cell{ padding:24px 22px 4px 0; position:relative; }
.mk-stat-cell + .mk-stat-cell{ padding-left:26px; border-left:1px solid var(--line); }
.mk-stat-num{ font-family:var(--font-d); font-weight:500; font-size:clamp(28px,3.4vw,42px);
  line-height:1; color:var(--ink); letter-spacing:-.02em; }
.mk-stat-label{ font-family:var(--font-b); font-size:12.5px; color:var(--muted); margin-top:8px; line-height:1.45; }

/* ── 6. WhatsApp chat demo (authentic, editorial frame) ───────────────── */
.mk-chat-demo{ background:#E7DED2; border:1px solid var(--line-2); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow-lg); max-width:430px; margin-left:auto; }
.mk-chat-head{ display:flex; align-items:center; gap:11px; padding:13px 16px; background:#075E54; color:#fff; }
.mk-chat-ava{ width:38px; height:38px; border-radius:50%; background:#ffffff22; display:grid; place-items:center; font-size:19px; }
.mk-chat-id{ display:flex; flex-direction:column; line-height:1.2; flex:1; }
.mk-chat-name{ font-family:var(--font-b); font-weight:600; font-size:14.5px; color:#fff; }
.mk-chat-status{ font-size:11.5px; color:#cfeee4; }
.mk-chat-badge{ font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:#ffffff22; padding:4px 8px; border-radius:6px; }
.mk-chat-body{ padding:18px 14px; display:flex; flex-direction:column; gap:11px; background:#E7DED2; }
.mk-chat-msg{ position:relative; max-width:84%; align-self:flex-start; background:#fff; color:#1f2c25;
  font-size:13.5px; line-height:1.5; padding:9px 12px 18px; border-radius:8px; box-shadow:0 1px 1px rgba(0,0,0,.08);
  opacity:0; transform:translateY(8px); animation:mk-msg-in .5s var(--ease) forwards; }
.mk-chat-msg small{ position:absolute; right:9px; bottom:5px; font-size:10px; color:#90a29a; }
.mk-chat-msg--me{ align-self:flex-end; background:#D9FDD3; }
.mk-chat-order{ width:84%; }
.mk-chat-order strong{ display:block; font-weight:700; color:#0b3a28; margin-bottom:7px; font-size:13.5px; }
.mk-chat-order-rows{ display:flex; flex-direction:column; gap:4px; margin-bottom:8px; }
.mk-chat-order-row{ display:flex; justify-content:space-between; gap:10px; font-size:12.5px; color:#3a4a42; }
.mk-chat-order-row b{ color:#0b3a28; }
.mk-chat-order-total{ display:flex; justify-content:space-between; padding-top:7px; border-top:1px solid #00000014;
  font-weight:700; color:#0b5e40; font-size:14px; }
.mk-chat-sys{ align-self:center; background:#FDF3CF; color:#6b5a1a; font-size:11.5px; padding:6px 12px; border-radius:7px;
  opacity:0; animation:mk-msg-in .5s var(--ease) .9s forwards; }
.mk-chat-msg:nth-of-type(2){ animation-delay:.45s; }
.mk-chat-typing{ align-self:flex-start; display:flex; gap:4px; padding:11px 14px; background:#fff; border-radius:8px;
  opacity:0; animation:mk-msg-in .4s var(--ease) 1.3s forwards; }
.mk-chat-typing i{ width:7px; height:7px; border-radius:50%; background:#b8c4bd; animation:mk-typing 1.2s infinite ease-in-out; }
.mk-chat-typing i:nth-child(2){ animation-delay:.2s; } .mk-chat-typing i:nth-child(3){ animation-delay:.4s; }
@keyframes mk-msg-in{ to{ opacity:1; transform:translateY(0); } }
@keyframes mk-typing{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-5px); opacity:1; } }

/* Floating notification chips */
.mk-flow{ position:relative; }
.mk-flow-notif{ position:absolute; width:230px; background:var(--card); border:1px solid var(--line-2);
  border-radius:var(--r-md); padding:11px 13px; box-shadow:var(--shadow-md); z-index:4; }
.mk-flow-notif-wa{ top:-22px; right:-26px; animation:mk-float 6s ease-in-out infinite; }
.mk-flow-notif-email{ bottom:-26px; left:-30px; animation:mk-float 7s ease-in-out .8s infinite; }
.mk-flow-notif-app{ display:flex; align-items:center; gap:7px; font-size:11px; color:var(--muted); margin-bottom:5px; }
.mk-flow-notif-app-name{ font-weight:600; color:var(--ink-soft); }
.mk-flow-notif-time{ margin-left:auto; }
.mk-flow-notif-body{ font-size:12.5px; line-height:1.45; color:var(--body); }
.mk-flow-notif-body strong{ color:var(--ink); }
@keyframes mk-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
@media(max-width:980px){ .mk-flow-notif{ display:none; } }

/* Hero configurator — the side-column product showcase (calm, no bobbing) */
.mk-config{ background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-lg);
  padding:22px 22px 20px; box-shadow:var(--shadow-lg); max-width:404px; margin-left:auto; }
.mk-config-head{ display:flex; align-items:center; justify-content:space-between; padding-bottom:14px;
  border-bottom:1px solid var(--line); margin-bottom:16px; }
.mk-config-shop{ font-family:var(--font-d); font-weight:560; font-size:15px; color:var(--ink); }
.mk-config-live{ display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--green-dk); }
.mk-config-live::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--green); animation:mk-ping 1.8s infinite; }
.mk-config-product{ font-family:var(--font-d); font-weight:560; font-size:22px; color:var(--ink); margin-bottom:16px; }
.mk-config-group{ margin-bottom:14px; }
.mk-config-label{ display:block; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.mk-config-opts{ display:flex; flex-wrap:wrap; gap:8px; }
.mk-config-opt{ font-size:13px; padding:7px 13px; border-radius:99px; border:1px solid var(--line-2);
  color:var(--ink-soft); background:var(--paper); transition:border-color .2s,background .2s,color .2s; }
.mk-config-opt.is-sel{ border-color:var(--green); background:rgba(15,122,69,.08); color:var(--green-dk); font-weight:600; }
.mk-config-total{ display:flex; align-items:baseline; justify-content:space-between; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.mk-config-total > span:first-child{ font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.mk-config-price{ font-family:var(--font-d); font-weight:560; font-size:30px; color:var(--ink); letter-spacing:-.02em; }
.mk-config-cta{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:16px;
  background:var(--green); color:#fff; border-radius:var(--r-sm); padding:13px; font-family:var(--font-b);
  font-weight:600; font-size:14.5px; box-shadow:var(--glow); }
.mk-config-cta svg{ width:18px; height:18px; }
.mk-config-wa{ display:flex; align-items:center; gap:9px; margin-top:14px; max-width:404px; margin-left:auto; background:var(--forest); color:var(--on-dark);
  border-radius:var(--r-md); padding:11px 14px; font-size:12.5px; box-shadow:var(--shadow-md); line-height:1.4; }
.mk-config-wa b{ color:#fff; }
.mk-config-wa-ico{ font-size:15px; flex-shrink:0; }
.mk-config-wa-tick{ margin-left:auto; color:#53bdeb; font-size:13px; flex-shrink:0; }
.mk-config-wa{ transition:opacity .45s var(--ease),transform .45s var(--ease); }
.mk-config-wa.mk-config-wa--hidden{ opacity:0; transform:translateY(8px); }

/* ── 7. Marquee (editorial ticker) ────────────────────────────────────── */
.mk-marquee-bar{ border-block:1px solid var(--line-2); background:var(--paper-2); overflow:hidden; padding:14px 0; }
.mk-marquee-track{ display:flex; gap:42px; white-space:nowrap; width:max-content; animation:mk-marquee 38s linear infinite; }
.mk-marquee-item{ display:inline-flex; align-items:center; gap:11px; font-family:var(--font-b); font-size:13px;
  font-weight:500; letter-spacing:.04em; color:var(--ink-soft); }
.mk-marquee-dot{ width:4px; height:4px; border-radius:50%; background:var(--green); }
.mk-marquee-chip{ font-size:14px; }
@keyframes mk-marquee{ to{ transform:translateX(-50%); } }

/* ── 8. Index list (replaces bento) + cards ───────────────────────────── */
.mk-index{ border-top:1px solid var(--line-2); }
.mk-index-row{ display:grid; grid-template-columns:64px 1.1fr 1.4fr; gap:clamp(16px,3vw,48px);
  align-items:start; padding:clamp(26px,3.4vw,40px) 0; border-bottom:1px solid var(--line); }
.mk-index-num{ font-family:var(--font-d); font-weight:500; font-size:20px; color:var(--green-dk); font-variant-numeric:tabular-nums; }
.mk-index-row .mk-h3{ margin-bottom:0; }
.mk-index-row .mk-lead{ font-size:15.5px; }
.mk-index-tag{ display:inline-flex; align-items:center; gap:7px; margin-top:14px; font-size:12px;
  font-weight:600; letter-spacing:.04em; color:var(--green-dk); }
.mk-index-tag::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--green); }
@media(max-width:760px){ .mk-index-row{ grid-template-columns:44px 1fr; } .mk-index-row .mk-lead{ grid-column:2; } }

.mk-card{ background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-md);
  padding:clamp(24px,2.6vw,34px); transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .25s; }
.mk-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.mk-card .mk-h3{ margin-bottom:10px; }
.mk-card-grad{ background:var(--forest); border-color:var(--forest-2); color:var(--on-dark); }
.mk-card-grad .mk-h3,.mk-card-grad .mk-h2{ color:#fff; }
.mk-card-grad .mk-lead{ color:var(--on-dark-dim); }
.mk-card-ind{ background:var(--paper-2); }
.mk-icon-box{ width:46px; height:46px; border-radius:var(--r-sm); display:grid; place-items:center;
  font-size:22px; background:rgba(15,122,69,.08); border:1px solid rgba(15,122,69,.16); margin-bottom:18px; }
.mk-card-grad .mk-icon-box{ background:#ffffff14; border-color:#ffffff22; }
.mk-icon-green,.mk-icon-indigo{ }

.mk-grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.4vw,28px); }
.mk-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,28px); }
.mk-grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,24px); }
.mk-feat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(18px,2.4vw,28px); }
@media(max-width:860px){ .mk-grid-3,.mk-grid-4{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .mk-grid-2,.mk-grid-3,.mk-grid-4{ grid-template-columns:1fr; } }

.mk-split-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,80px); align-items:center; }
.mk-split-2-start{ align-items:start; }
.mk-split-3-7{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,7fr); gap:clamp(28px,5vw,72px); }
@media(max-width:760px){ .mk-split-2,.mk-split-3-7{ grid-template-columns:1fr; } }

/* ── 9. Steps (editorial numbered ledger) ─────────────────────────────── */
.mk-steps-row{ border-top:1px solid var(--line-2); }
.mk-step{ display:grid; grid-template-columns:88px 1fr; gap:clamp(16px,3vw,40px);
  padding:clamp(24px,3vw,36px) 0; border-bottom:1px solid var(--line); align-items:start; }
.mk-step-num{ font-family:var(--font-d); font-weight:500; font-size:clamp(30px,4vw,52px); line-height:1;
  color:var(--line-2); font-variant-numeric:tabular-nums; }
.mk-step-body{ max-width:46em; }
.mk-step-title{ font-family:var(--font-d); font-weight:560; font-size:clamp(19px,2.2vw,24px); color:var(--ink); margin-bottom:8px; }
.mk-step-desc{ font-family:var(--font-b); font-size:15.5px; color:var(--body); line-height:1.6; }
.mk-steps-connector{ display:none; }

/* ── 10. Voice demo ───────────────────────────────────────────────────── */
.mk-voice-demo-card{ background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:24px; box-shadow:var(--shadow-lg); }
.mk-vd-head{ margin-bottom:16px; }
.mk-vd-h{ font-family:var(--font-d); font-weight:560; font-size:20px; color:var(--ink); margin:0; }
.mk-vd-sub{ font-size:13px; color:var(--muted); margin:4px 0 0; }
.mk-vd-progress{ margin-bottom:16px; }
.mk-vd-progress-track{ height:5px; border-radius:99px; background:var(--paper-2); overflow:hidden; }
.mk-vd-progress-fill{ height:100%; border-radius:99px; background:var(--green); transition:width .6s var(--ease); }
.mk-vd-exchange{ animation:mk-vd-in .45s var(--ease); }
@keyframes mk-vd-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.mk-vd-progress-label{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted); margin-top:7px; }
.mk-vd-progress-pct{ font-weight:700; color:var(--green-dk); }
.mk-vd-body{ background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-md); padding:16px; }
.mk-vd-status{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--green-dk); margin-bottom:12px; }
.mk-vd-status::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--green); animation:mk-ping 1.4s infinite; }
.mk-vd-prompt{ font-family:var(--font-d); font-weight:560; font-size:16px; color:var(--ink); margin-bottom:12px; }
.mk-vd-transcript{ display:flex; flex-direction:column; gap:8px; }
.mk-vd-line{ display:flex; gap:8px; font-size:13.5px; padding:8px 11px; border-radius:8px; }
.mk-vd-line strong{ color:var(--green-dk); }
.mk-vd-wiz{ background:#fff; border:1px solid var(--line); color:var(--body); }
.mk-vd-usr{ background:rgba(15,122,69,.08); color:var(--ink-soft); align-items:center; }
.mk-vd-wave{ display:inline-flex; gap:2px; margin-left:auto; }
.mk-vd-wave b{ width:2px; height:10px; background:var(--green); border-radius:2px; animation:mk-wave 1s infinite ease-in-out; }
.mk-vd-wave b:nth-child(2){ animation-delay:.15s; } .mk-vd-wave b:nth-child(3){ animation-delay:.3s; }
.mk-vd-wave b:nth-child(4){ animation-delay:.45s; } .mk-vd-wave b:nth-child(5){ animation-delay:.6s; }
.mk-vd-mic{ text-align:center; margin-top:14px; }
.mk-vd-mic-btn{ font-family:var(--font-b); font-size:13px; font-weight:600; color:#fff; background:var(--clay); border:0; border-radius:99px; padding:9px 18px; }
.mk-vd-mic-btn--active{ animation:mk-rec 1.6s infinite; }
.mk-vd-actions{ display:flex; justify-content:space-between; margin-top:12px; }
.mk-vd-btn{ font-size:12.5px; color:var(--muted); }
.mk-voice-cmds-row,.mk-voice-lang-row{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }
.mk-voice-cmd,.mk-voice-lang-chip{ font-size:12.5px; font-weight:500; padding:6px 12px; border-radius:99px;
  background:#ffffff12; border:1px solid var(--on-dark-line); color:var(--on-dark); }
.mk-vc-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:14px; font-size:12px; color:var(--on-dark-dim); }
.mk-vc-sep{ color:var(--on-dark-line); }
@keyframes mk-ping{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@keyframes mk-wave{ 0%,100%{ height:8px; } 50%{ height:16px; } }
@keyframes mk-rec{ 0%,100%{ box-shadow:0 0 0 0 rgba(181,80,58,.5); } 50%{ box-shadow:0 0 0 8px rgba(181,80,58,0); } }

/* ── 11. Before / After ledger ────────────────────────────────────────── */
.mk-before-after{ display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(20px,3vw,40px); align-items:stretch; }
.mk-ba-card{ background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-md); padding:clamp(22px,2.6vw,32px); }
.mk-ba-before{ background:var(--paper-2); }
.mk-ba-after{ border-color:rgba(15,122,69,.35); box-shadow:var(--shadow-md); }
.mk-ba-label{ font-family:var(--font-b); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:18px; }
.mk-ba-label-bad{ color:var(--clay); } .mk-ba-label-good{ color:var(--green-dk); }
.mk-ba-list,.mk-gap-list{ list-style:none; margin:0; padding:0; }
.mk-ba-item,.mk-gap-item{ font-size:14.5px; line-height:1.5; padding:11px 0; border-bottom:1px solid var(--line); color:var(--ink-soft); }
.mk-ba-item:last-child,.mk-gap-item:last-child{ border-bottom:0; }
/* Scannable markers for the before/after ledger (replaces ✗/✓ glyphs) */
.mk-ba-item{ position:relative; padding-left:26px; }
.mk-ba-before .mk-ba-item::before{ content:"—"; position:absolute; left:0; top:11px; color:var(--clay); font-weight:600; }
.mk-ba-after .mk-ba-item::before{ content:"✓"; position:absolute; left:0; top:11px; color:var(--green); font-weight:700; }
.mk-ba-divider{ align-self:center; font-size:22px; color:var(--green); font-family:var(--font-d); }
@media(max-width:760px){ .mk-before-after{ grid-template-columns:1fr; } .mk-ba-divider{ transform:rotate(90deg); } }

/* ── 12. Personas + Team profiles ─────────────────────────────────────── */
.mk-persona-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,28px); }
.mk-persona-card{ background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-md);
  padding:clamp(24px,2.6vw,32px); transition:transform .4s var(--ease),box-shadow .4s var(--ease); }
.mk-persona-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.mk-persona-emoji{ font-size:34px; display:block; margin-bottom:14px; }
.mk-persona-card .mk-h3{ margin-bottom:8px; }
.mk-persona-tag{ display:inline-block; margin-top:16px; font-size:11.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); border-top:1px solid var(--line); padding-top:14px; width:100%; }
.mk-team-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,28px); }
.mk-team-card{ background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-md); padding:clamp(24px,2.6vw,32px); }
.mk-team-avatar{ width:64px; height:64px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-d);
  font-weight:600; font-size:22px; color:#fff; background:var(--forest); margin-bottom:16px; }
.mk-team-name{ font-family:var(--font-d); font-weight:560; font-size:20px; color:var(--ink); }
.mk-team-role{ font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--green-dk); margin:4px 0 12px; }
.mk-team-bio{ font-size:14.5px; color:var(--body); line-height:1.6; }
@media(max-width:980px){ .mk-persona-grid,.mk-team-row{ grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .mk-persona-grid,.mk-team-row{ grid-template-columns:1fr; } }

/* ── 13. Tables — editorial ledgers ───────────────────────────────────── */
.mk-cost-wrap,.mk-comp-wrap{ overflow-x:auto; border:1px solid var(--line-2); border-radius:var(--r-md); background:var(--card); }
.mk-cost-table,.mk-comp-table{ width:100%; border-collapse:collapse; font-family:var(--font-b); font-size:14px; min-width:560px; }
.mk-cost-table th,.mk-comp-table th{ text-align:left; font-weight:600; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); padding:16px 18px; border-bottom:1px solid var(--line-2); background:var(--paper-2); vertical-align:bottom; }
.mk-cost-table td,.mk-comp-table td{ padding:15px 18px; border-bottom:1px solid var(--line); color:var(--ink-soft); }
.mk-cost-table tr:last-child td,.mk-comp-table tr:last-child td{ border-bottom:0; }
.mk-ct-name{ font-weight:600; color:var(--ink); white-space:nowrap; }
.mk-th-highlight{ color:var(--green-dk)!important; }
.mk-comp-table .mk-th-highlight{ background:rgba(15,122,69,.07)!important; }
.mk-yes{ color:var(--green-dk); font-weight:600; }
.mk-no{ color:var(--muted); }
.mk-ct-real{ font-weight:700; color:var(--ink); }
.mk-ct-bad-val,.mk-ct-bad-total{ color:var(--clay); font-weight:600; }
.mk-ct-good,.mk-ct-good-total{ color:var(--green-dk); font-weight:600; }
.mk-ct-mlc-row td{ background:rgba(15,122,69,.07); }
.mk-ct-mlc-row .mk-ct-name{ box-shadow:inset 3px 0 0 var(--green); }
.mk-comp-table td[colspan]{ background:var(--paper-2); font-weight:700; color:var(--ink); font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.mk-ct-footnote{ font-size:12.5px; color:var(--muted); margin-top:16px; line-height:1.6; }
/* Smooth momentum scrolling for the wide ledgers on touch devices. */
.mk-cost-wrap,.mk-comp-wrap{ -webkit-overflow-scrolling:touch; }
/* On phones, let the dense first-column / price cells wrap so the table
   stays narrower and less horizontal scrolling is required. */
@media(max-width:600px){
  .mk-cost-table,.mk-comp-table{ min-width:0; font-size:13px; }
  .mk-cost-table th,.mk-comp-table th{ padding:12px 12px; }
  .mk-cost-table td,.mk-comp-table td{ padding:12px 13px; }
  .mk-ct-name{ white-space:normal; }
}

/* ── 14. Big stats (forest figures) ───────────────────────────────────── */
.mk-latam-stats{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--on-dark-line); }
.mk-latam-stat{ padding:30px 22px 4px 0; }
.mk-latam-stat + .mk-latam-stat{ padding-left:26px; border-left:1px solid var(--on-dark-line); }
.mk-ls-num{ font-family:var(--font-d); font-weight:500; font-size:clamp(34px,4.4vw,56px); line-height:1; color:var(--green-br); letter-spacing:-.02em; }
.mk-ls-label{ font-size:13px; color:var(--on-dark-dim); margin-top:10px; line-height:1.5; }
@media(max-width:860px){ .mk-latam-stats,.mk-stats-row,.mk-hero-stats{ grid-template-columns:1fr 1fr; }
  .mk-latam-stat:nth-child(3),.mk-stat-cell:nth-child(3){ border-left:0; } }
@media(max-width:480px){ .mk-latam-stats,.mk-stats-row,.mk-hero-stats{ grid-template-columns:1fr; }
  .mk-latam-stat,.mk-stat-cell{ border-left:0!important; padding-left:0!important; } }

/* ── 14b. On-forest text safety (any band, incl. ES mirror) ───────────── */
.mk-section-dark .mk-h2,.mk-section-dark .mk-h3,.mk-section-dark .mk-h4,
.mk-cta-section .mk-h2,.mk-cta-section .mk-h3,
.mk-callout-card .mk-h2,.mk-callout-card .mk-h3{ color:#fff; }
.mk-section-dark .mk-lead,.mk-cta-section .mk-lead,.mk-callout-card .mk-lead{ color:var(--on-dark-dim); }
.mk-section-dark a:not(.mk-btn),.mk-cta-section a:not(.mk-btn),.mk-callout-card a:not(.mk-btn){ color:var(--green-br); }
.mk-section-dark .mk-htrust-item{ color:var(--on-dark); }

/* ── 15. CTA finale ───────────────────────────────────────────────────── */
.mk-cta-section .mk-h2{ color:#fff; max-width:15em; margin:0 auto; }
.mk-cta-section .mk-lead{ color:var(--on-dark-dim); }
.mk-cta-actions{ justify-content:center; margin-top:30px; }

/* ── 16. FAQ accordion (editorial) ────────────────────────────────────── */
.mk-faq-wrap{ border-top:1px solid var(--line-2); }
.mk-faq-item{ border-bottom:1px solid var(--line); }
.mk-faq-trigger{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:transparent; border:0; cursor:pointer; text-align:left; padding:24px 0;
  font-family:var(--font-d); font-weight:560; font-size:clamp(17px,1.9vw,21px); color:var(--ink); }
.mk-faq-icon{ flex-shrink:0; width:30px; height:30px; border-radius:50%; border:1px solid var(--line-2);
  display:grid; place-items:center; font-size:18px; color:var(--green-dk); transition:transform .3s var(--ease); }
.mk-faq-item.mk-open .mk-faq-icon{ transform:rotate(45deg); background:var(--green); color:#fff; border-color:var(--green); }
.mk-faq-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s var(--ease); }
.mk-faq-item.mk-open .mk-faq-body{ grid-template-rows:1fr; }
.mk-faq-body-inner{ overflow:hidden; font-family:var(--font-b); font-size:15px; line-height:1.65; color:var(--body); max-width:62em; }
.mk-faq-item.mk-open .mk-faq-body-inner{ padding-bottom:24px; }
.mk-faq-wrap .mk-eyebrow{ display:flex; margin:40px 0 4px; }
.mk-faq-wrap .mk-eyebrow:first-child{ margin-top:0; }

/* ── 17. Contact + callout + chips ────────────────────────────────────── */
.mk-contact-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2vw,22px); }
.mk-contact-card{ background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-md);
  padding:clamp(22px,2.4vw,30px); transition:transform .4s var(--ease),box-shadow .4s var(--ease); }
.mk-contact-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.mk-contact-value{ display:inline-block; margin-top:10px; font-weight:600; color:var(--green-dk); border-bottom:1px solid rgba(15,92,52,.3); }
.mk-contact-note{ font-size:12.5px; color:var(--muted); margin-top:8px; }
.mk-callout-card{ background:var(--forest); color:var(--on-dark); border-radius:var(--r-lg); padding:clamp(28px,4vw,52px); position:relative; overflow:hidden; }
.mk-callout-card .mk-h2{ color:#fff; }
.mk-callout-card .mk-lead{ color:var(--on-dark-dim); }
.mk-callout-card .mk-eyebrow{ color:var(--green-br); }
.mk-callout-card .mk-eyebrow::before{ background:var(--green-br); }
.mk-callout-row{ display:flex; align-items:center; justify-content:space-between; gap:clamp(24px,4vw,48px); flex-wrap:wrap; }
.mk-trust-chip{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500; color:var(--ink-soft);
  background:var(--card); border:1px solid var(--line-2); border-radius:99px; padding:8px 15px; }
@media(max-width:720px){ .mk-contact-grid{ grid-template-columns:1fr; } }

/* ── 18. [yourmlc_get_free] inline widget ─────────────────────────────────── */
.mlc-getfree{ display:inline-block; }
.mlc-getfree--center{ display:block; text-align:center; }
.mlc-getfree-row{ display:flex; gap:10px; flex-wrap:wrap; }
.mlc-getfree-email{ flex:1; min-width:min(220px,100%); font-family:var(--font-b); font-size:16px; padding:13px 16px;
  border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--card); color:var(--ink); }
.mlc-getfree-email:focus{ outline:0; border-color:var(--green); box-shadow:0 0 0 3px rgba(15,122,69,.14); }
.mlc-getfree-btn{ font-family:var(--font-b); font-weight:600; font-size:14.5px; color:#fff; background:var(--green);
  border:0; border-radius:var(--r-sm); padding:13px 24px; cursor:pointer; box-shadow:var(--glow); }
.mlc-getfree-btn:hover{ background:var(--green-dk); }
.mlc-getfree-hp{ position:absolute!important; left:-9999px!important; }
.mlc-getfree-note{ font-size:12.5px; color:var(--muted); margin-top:9px; }
.mk-section-dark .mlc-getfree-note,.mk-cta-section .mlc-getfree-note{ color:var(--on-dark-dim); }
.mlc-getfree-msg{ font-size:13.5px; color:var(--green-dk); margin-top:9px; font-weight:600; }
.mk-section-dark .mlc-getfree-msg,.mk-cta-section .mlc-getfree-msg{ color:var(--green-br); }

/* ── 19. Account tip + auth/checkout/account framing ──────────────────── */
.mk-account-voice-tip{ display:flex; gap:14px; align-items:flex-start; background:rgba(15,122,69,.06);
  border:1px solid rgba(15,122,69,.18); border-radius:var(--r-md); padding:16px 18px; margin-bottom:26px; font-size:13.5px; color:var(--ink-soft); }
.mk-account-voice-tip-icon{ font-size:20px; }
.mk-account-voice-tip strong{ color:var(--ink); }
.mk-auth-card{ max-width:440px; margin:0 auto; background:var(--card); border:1px solid var(--line-2);
  border-radius:var(--r-lg); padding:clamp(28px,4vw,40px); box-shadow:var(--shadow-lg); }
.mk-auth-logo{ width:54px; height:54px; border-radius:var(--r-md); background:var(--forest); color:#fff; display:grid; place-items:center; font-size:24px; margin:0 auto 18px; }
.mk-auth-title{ font-family:var(--font-d); font-weight:560; font-size:26px; color:var(--ink); text-align:center; }
.mk-auth-sub{ text-align:center; color:var(--muted); font-size:14px; margin:8px 0 22px; }
.mk-logout-icon{ font-size:40px; text-align:center; margin-bottom:8px; }
.mk-checkout-inner{ max-width:940px; margin:0 auto; }
.mk-checkout-trust{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:26px; }

/* ── 20. Legal / prose pages ──────────────────────────────────────────── */
.mlc-marketing-wrapper .mk-section .mlc-container > h2.mk-h3{ margin-top:34px; padding-top:6px; }
.mlc-marketing-wrapper .mk-section ul{ margin:0 0 1em; padding-left:1.2em; }
.mlc-marketing-wrapper .mk-section ul li{ margin-bottom:.5em; color:var(--body); }
.mlc-marketing-wrapper .mk-section ul li::marker{ color:var(--green); }
.mk-legal-note{ display:flex; gap:10px; align-items:flex-start; background:var(--amber-bg); border:1px solid #E6D29A;
  border-radius:var(--r-md); padding:14px 18px; font-size:13px; color:var(--amber-tx); margin-bottom:28px; }

/* ── 21. Motion chrome ────────────────────────────────────────────────── */
#mlc-preloader{ position:fixed; inset:0; z-index:99999; background:var(--paper); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:20px; transition:opacity .6s var(--ease),visibility .6s; }
#mlc-preloader.is-done{ opacity:0; visibility:hidden; }
.mlc-pre-mark{ width:64px; height:64px; border-radius:14px; background:var(--forest); display:grid; place-items:center; animation:mk-pre 1.4s var(--ease) infinite; }
.mlc-pre-mark svg{ width:46px; height:46px; }
.mlc-pre-bar{ width:180px; height:1px; background:var(--line-2); overflow:hidden; }
.mlc-pre-bar i{ display:block; height:100%; width:100%; background:var(--green); transform:scaleX(0); transform-origin:left; }
.mlc-pre-count{ font-family:var(--font-d); font-size:14px; color:var(--muted); font-variant-numeric:tabular-nums; }
@keyframes mk-pre{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(.94); } }
.mk-scroll-progress{ position:fixed; top:0; left:0; height:2px; width:0; background:var(--green); z-index:10001; transition:width .1s linear; }

.mlc-split-line{ display:block; overflow:hidden; }
.mlc-ch{ display:block; }

/* Reveal: content is hidden ONLY when JS confirmed the animation system by
   adding html.mlc-reveal (set inline in <head>). No JS / failed JS -> visible. */
html.mlc-reveal [data-mk-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease),transform .8s var(--ease); }
html.mlc-reveal [data-mk-reveal="left"]{ transform:translateX(-30px); }
html.mlc-reveal [data-mk-reveal="right"]{ transform:translateX(30px); }
html.mlc-reveal [data-mk-reveal="scale"]{ transform:scale(.95); }
html.mlc-reveal [data-mk-reveal].mk-visible{ opacity:1; transform:none; }
html.mlc-fx [data-mk-reveal]{ transition:none; }

/* ── 22. Reduced motion + responsive ──────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .mlc-marketing-wrapper *,.mlc-marketing-wrapper *::before,.mlc-marketing-wrapper *::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
  [data-mk-reveal]{ opacity:1!important; transform:none!important; }
  .mk-webgl-canvas{ display:none!important; }
}
@media(max-width:860px){
  .mk-hero-2col{ grid-template-columns:1fr; }
  .mk-hero-right{ margin-top:32px; }
  .mk-chat-demo,.mk-config{ margin:0 auto; }
  .mk-config-wa{ max-width:404px; margin-left:auto; margin-right:auto; }
  .mk-figure-cap{ justify-content:center; text-align:center; }
  .mk-hero-lead{ max-width:none; }
}
@media(max-width:600px){
  /* Denser ledgers + momentum scroll on phones */
  .mk-cost-table,.mk-comp-table{ font-size:13px; }
  .mk-cost-table th,.mk-comp-table th,.mk-cost-table td,.mk-comp-table td{ padding:12px 13px; }
  .mk-cost-wrap,.mk-comp-wrap{ -webkit-overflow-scrolling:touch; }
  .mk-callout-row{ gap:24px; }
  .mk-account-voice-tip{ padding:14px 15px; }
  .mk-voice-cmds-row,.mk-voice-lang-row{ margin:14px 0; }
  /* index/steps: tighten the numbered gutters on phones */
  .mk-index-row{ gap:14px 16px; padding:22px 0; }
  .mk-step{ gap:14px; padding:22px 0; }
  .mk-step-num{ font-size:34px; }
}
@media(max-width:560px){
  .mlc-marketing-wrapper .mk-h1,.mlc-marketing-wrapper .mk-display{ font-size:clamp(33px,9vw,46px); }
  .mlc-marketing-wrapper .mk-h2{ font-size:clamp(26px,7vw,34px); }
  .mk-btn-group .mk-btn:not(.mk-btn-link){ width:100%; }
  .mk-btn-group{ gap:12px; }
  .mk-hero-meta{ font-size:11px; gap:10px; }
  .mk-sec-head{ margin-bottom:32px; }
  .mk-stat-num{ font-size:26px; }
  .mk-ls-num{ font-size:34px; }
  .mk-config{ padding:18px 18px 16px; }
  .mk-config-product{ font-size:20px; }
  .mk-config-price{ font-size:27px; }
}

/* ════════════════════════════════════════════════════════════════════════
   23. ELEVATED EDITORIAL — living hero (v7, 2026)
   A breathing aurora layer behind every hero (works on ALL devices, the
   WebGL topographic field layers on top of it on desktop), plus a reusable
   "aside" card so the secondary heroes carry a real visual anchor instead of
   bare text. Motion degrades with the global reduced-motion rule below.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 23.1 Aurora glow — soft green breath in the hero's top-right ── */
/* .mk-hero already clips; .mk-section-hero must too so the blurred aurora
   blobs and the WebGL canvas never bleed past the section or cause h-scroll. */
.mk-section-hero{ overflow:hidden; }
.mk-hero::before,
.mk-section-hero::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  top:-14%; right:-10%;
  width:min(74vw,860px); height:min(74vw,860px);
  background:radial-gradient(closest-side,
    rgba(31,174,99,.17), rgba(15,122,69,.06) 46%, transparent 72%);
  filter:blur(4px);
  animation:mk-aurora 24s var(--ease) infinite;
}
/* a second, cooler counter-glow low-left for depth (desktop only) */
.mk-hero::after,
.mk-section-hero::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  bottom:-22%; left:-12%;
  width:min(52vw,560px); height:min(52vw,560px);
  background:radial-gradient(closest-side,
    rgba(15,122,69,.10), rgba(20,35,26,.05) 50%, transparent 74%);
  filter:blur(8px);
  animation:mk-aurora 30s var(--ease) infinite reverse;
}
@keyframes mk-aurora{
  0%,100%{ transform:translate3d(0,0,0) scale(1); opacity:.92; }
  50%{ transform:translate3d(-4%,3%,0) scale(1.09); opacity:1; }
}
@media(max-width:600px){ .mk-hero::after,.mk-section-hero::after{ display:none; } }

/* ── 23.2 WebGL canvas — let the shader own the hero, soften the static grid ── */
.mk-webgl-canvas{ z-index:1; will-change:opacity; }
html.mlc-fx-webgl .mk-hero-grid-bg{ opacity:.22; }

/* ── 23.3 Scroll cue — gentle travel ── */
html.mlc-fx .mk-scroll-cue::after{ animation:mk-cue 2.4s var(--ease) infinite; }
@keyframes mk-cue{
  0%,100%{ transform:scaleY(1); transform-origin:top; opacity:.5; }
  50%{ transform:scaleY(.45); opacity:1; }
}

/* ── 23.4 Secondary-hero two-column layout ──
   Reuses .mk-hero-2col / .mk-hero-left / .mk-hero-right (already styled) so the
   GSAP hero-entrance timeline animates the aside the same way as the home hero. */
.mk-section-hero .mk-hero-2col{ align-items:center; }
.mk-section-hero .mk-hero-left .mk-lead{ max-width:34em; }

/* ── 23.5 Reusable hero aside card ── */
.mk-hero-aside{
  position:relative; background:var(--card); border:1px solid var(--line-2);
  border-radius:var(--r-lg); padding:clamp(22px,2.4vw,30px);
  box-shadow:var(--shadow-lg); max-width:420px; margin-left:auto;
}
.mk-hero-aside::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(150deg, rgba(31,174,99,.07), transparent 42%);
}
.mk-aside-eyebrow{
  display:inline-flex; align-items:center; gap:9px; margin:0 0 14px;
  font-family:var(--font-b); font-size:11px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--green-dk);
}
.mk-aside-eyebrow::before{ content:""; width:22px; height:1px; background:var(--green); }
.mk-aside-title{ font-family:var(--font-d); font-weight:560; font-size:21px;
  line-height:1.2; color:var(--ink); margin:0 0 4px; letter-spacing:-.01em; }
.mk-aside-sub{ font-family:var(--font-b); font-size:13.5px; color:var(--muted); margin:0 0 16px; line-height:1.5; }

/* price block (Pricing hero) */
.mk-aside-price{ display:flex; align-items:baseline; gap:10px; margin:6px 0 4px; }
.mk-aside-price-now{ font-family:var(--font-d); font-weight:560; font-size:clamp(38px,5vw,52px);
  line-height:1; color:var(--ink); letter-spacing:-.02em; }
.mk-aside-price-was{ font-family:var(--font-d); font-size:20px; color:var(--muted); text-decoration:line-through; }
.mk-aside-price-per{ font-family:var(--font-b); font-size:13px; color:var(--muted); }
.mk-aside-code{ display:inline-flex; align-items:center; gap:7px; margin-top:10px;
  font-family:var(--font-b); font-size:12.5px; color:var(--green-dk); }
.mk-aside-code b{ font-family:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace; font-weight:700;
  background:rgba(15,122,69,.09); border:1px solid rgba(15,122,69,.22); border-radius:5px; padding:.1em .5em; }

/* hairline divider inside the card */
.mk-aside-rule{ height:1px; background:var(--line); margin:16px 0; border:0; }

/* check / verdict list */
.mk-aside-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; }
.mk-aside-item{ position:relative; padding:11px 0 11px 28px; font-family:var(--font-b); font-size:14px;
  color:var(--ink-soft); border-bottom:1px solid var(--line); line-height:1.4; }
.mk-aside-item:last-child{ border-bottom:0; }
.mk-aside-item::before{ content:""; position:absolute; left:0; top:13px; width:16px; height:16px;
  border-radius:50%; background:rgba(15,122,69,.1);
  box-shadow:inset 0 0 0 1px rgba(15,122,69,.3); }
.mk-aside-item::after{ content:""; position:absolute; left:5px; top:16px; width:5px; height:8px;
  border:solid var(--green-dk); border-width:0 1.6px 1.6px 0; transform:rotate(45deg); }
.mk-aside-item b{ color:var(--ink); font-weight:600; }
.mk-aside-item .mk-aside-x::before{ background:rgba(181,80,58,.08); box-shadow:inset 0 0 0 1px rgba(181,80,58,.28); }

/* label/value comparison rows (Compare verdict) */
.mk-aside-vs{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 0; border-bottom:1px solid var(--line); font-family:var(--font-b); font-size:13.5px; }
.mk-aside-vs:last-child{ border-bottom:0; }
.mk-aside-vs-k{ color:var(--ink-soft); }
.mk-aside-vs-mlc{ font-weight:700; color:var(--green-dk); }
.mk-aside-vs-them{ color:var(--clay); font-weight:600; }

/* editorial pull-quote (About / Contact) */
.mk-aside-quote{ font-family:var(--font-d); font-weight:480; font-style:italic;
  font-size:clamp(19px,2.2vw,23px); line-height:1.4; color:var(--ink); margin:0 0 16px; letter-spacing:-.01em; }
.mk-aside-quote::before{ content:"\201C"; color:var(--green); font-size:1.1em; line-height:0; }
.mk-aside-cite{ display:flex; align-items:center; gap:11px; }
.mk-aside-cite-mark{ width:38px; height:38px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  background:var(--forest); color:#fff; font-family:var(--font-d); font-weight:560; font-size:15px; }
.mk-aside-cite-who{ font-family:var(--font-b); font-size:13px; line-height:1.35; color:var(--ink-soft); }
.mk-aside-cite-who b{ display:block; color:var(--ink); font-weight:600; }

/* small index rows (FAQ) */
.mk-aside-idx{ display:flex; align-items:baseline; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); }
.mk-aside-idx:last-child{ border-bottom:0; }
.mk-aside-idx-n{ font-family:var(--font-d); font-weight:500; font-size:18px; color:var(--green-dk);
  font-variant-numeric:tabular-nums; min-width:26px; }
.mk-aside-idx-t b{ display:block; font-family:var(--font-d); font-weight:560; font-size:16px; color:var(--ink); }
.mk-aside-idx-t span{ font-family:var(--font-b); font-size:12.5px; color:var(--muted); }

/* a "live" pill the aside can wear */
.mk-aside-live{ position:absolute; top:18px; right:18px; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-b); font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--green-dk); }
.mk-aside-live::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--green); animation:mk-ping 1.8s infinite; }

@media(max-width:860px){
  .mk-hero-aside{ margin:28px auto 0; }
  .mk-section-hero .mk-hero-left .mk-lead{ max-width:none; }
}

/* ── 23.6 Pricing "Free plan" callout aside — light card on the forest band,
   with the [yourmlc_get_free] download widget embedded full-width inside it.
   The row is a 2-col grid (not flex-wrap) so the wider card never wraps to its
   own line at desktop — it sits beside the text, then stacks only on mobile.
   This .mk-callout-row is used solely by this pricing callout. ── */
.mk-callout-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,360px);
  align-items:center; gap:clamp(28px,4vw,56px); }
.mk-callout-aside{ min-width:0; }
.mk-hero-aside--flush{ margin:0; max-width:none; }
.mk-aside-cta{ margin-top:18px; }
.mk-aside-cta .mlc-getfree,
.mk-aside-cta .mlc-getfree-form{ display:block; width:100%; }
.mk-aside-cta .mlc-getfree-row{ gap:10px; }
.mk-aside-cta .mlc-getfree-email{ width:100%; flex:1 1 100%; min-width:0; background:#fff; }
.mk-aside-cta .mlc-getfree-btn{ width:100%; justify-content:center; }
@media(max-width:860px){ .mk-callout-row{ grid-template-columns:1fr; } }