/* ============================================================================
   ENGAGE WORKFORCE — MARKETING SITE DESIGN SYSTEM
   Premium ANZ workforce-management aesthetic. Editorial masthead typography
   (Bebas Neue display / Outfit body / DM Serif Display accents) on the
   existing application palette: deep navy + gold rule-lines + light-blue
   paper washes. All classes are prefixed `mk-` to avoid app collisions.
   ========================================================================== */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body.mk-body{
  background:#ffffff;
  color:#1a2e4a;
  font-family:'Outfit',sans-serif;
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
}
.mk-body a{text-decoration:none}
/* zero-specificity colour reset so component rules (.mk-btn-* etc.) always win */
:where(.mk-body) a{color:inherit}
/* thin scrollbar — same as the landing page */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:#f0f4fc}
::-webkit-scrollbar-thumb{background:#c4d0e8;border-radius:2px}
.mk-body img{display:block;max-width:100%}
.mk-body ::selection{background:#0d1e3c;color:#fff}

:root{
  --n900:#0d1e3c;
  --n800:#112548;
  --n700:#1a3260;
  --n600:#234282;
  --n400:#3a62a8;
  --n200:#9db8e2;
  --n100:#d4e2f4;
  --n50:#eef4fc;
  --n20:#f6f9fe;
  --white:#ffffff;
  /* The project does not use gold — these legacy token names resolve to the
     brand blues so nothing can render golden. */
  --gold:#3a62a8;
  --gold-l:#9db8e2;
  --green:#1e8a5e;
  --ink:#1a2e4a;
  --ink-mute:#4a6080;
  --ink-faint:#7a8ba8;
  --shadow-s:0 2px 10px rgba(13,30,60,.07);
  --shadow-m:0 6px 28px rgba(13,30,60,.10);
  --shadow-l:0 16px 56px rgba(13,30,60,.14);
  --r:12px;
  --r-l:20px;
  --r-xl:28px;
}

/* ── CONTAINERS ─────────────────────────────────────────────────────────── */
.mk-container{max-width:1180px;margin:0 auto;padding:0 24px}
.mk-container-narrow{max-width:860px;margin:0 auto;padding:0 24px}

/* ── BUTTONS ────────────────────────────────────────────────────────────── */
.mk-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:'Outfit',sans-serif;font-size:.9rem;font-weight:600;letter-spacing:.5px;
  padding:13px 28px;border-radius:9px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .25s,box-shadow .25s,background .25s,border-color .25s,color .25s;
  white-space:nowrap;
}
.mk-btn svg{flex-shrink:0}
.mk-btn-solid{background:var(--n900);color:#fff;box-shadow:0 5px 18px rgba(13,30,60,.28)}
.mk-btn-solid:hover{background:var(--n700);transform:translateY(-2px);box-shadow:0 9px 26px rgba(13,30,60,.36)}
/* Primary CTA — navy on light sections, white on dark bands (no gold). */
.mk-btn-gold{background:var(--n900);color:#fff;box-shadow:0 5px 18px rgba(13,30,60,.28)}
.mk-btn-gold:hover{background:var(--n700);transform:translateY(-2px);box-shadow:0 9px 26px rgba(13,30,60,.36)}
.mk-cta .mk-btn-gold,.mk-section-dark .mk-btn-gold{background:#fff;color:var(--n900);box-shadow:0 6px 22px rgba(0,0,0,.22)}
.mk-cta .mk-btn-gold:hover,.mk-section-dark .mk-btn-gold:hover{background:var(--n50);transform:translateY(-2px);box-shadow:0 10px 32px rgba(0,0,0,.28)}
.mk-btn-line{background:#fff;color:var(--n900);border-color:var(--n100)}
.mk-btn-line:hover{background:var(--n50);border-color:var(--n400);transform:translateY(-2px)}
.mk-btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.mk-btn-ghost:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.7);transform:translateY(-2px)}
.mk-btn-sm{padding:9px 20px;font-size:.82rem}

/* ── SCROLL PROGRESS BAR (same as the landing page, navy/blue only) ─────── */
#mk-scroll-progress{
  position:fixed;top:0;left:0;height:3px;z-index:9999;
  background:linear-gradient(90deg,var(--n900),var(--n600),var(--n400));
  width:0%;transition:width .1s linear;
  box-shadow:0 0 10px rgba(13,30,60,.3),0 0 5px rgba(58,98,168,.3);
}

/* ── NAV (mirrors the landing-page topbar design exactly) ───────────────── */
.mk-nav{
  position:fixed;inset:0 0 auto 0;z-index:900;
  background:rgba(255,255,255,0);
  border-bottom:1px solid transparent;
  transition:background .4s,border-color .4s,box-shadow .4s;
}
.mk-nav.stuck{
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(13,30,60,.09);
  box-shadow:0 2px 20px rgba(13,30,60,.07);
}
.mk-nav-inner{
  width:100%;padding:0 6%;height:68px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.mk-logo{display:flex;align-items:center;gap:11px;flex-shrink:0}
.mk-logo img{width:36px;height:36px;object-fit:contain}
.mk-logo-words{display:flex;flex-direction:column;line-height:1;gap:1px}
.mk-logo-top{font-family:'Bebas Neue',sans-serif;font-size:1.35rem;letter-spacing:3px;color:var(--n900)}
.mk-logo-sub{font-size:.6rem;font-weight:600;letter-spacing:3.5px;text-transform:uppercase;color:var(--n400)}
.mk-nav-links{display:flex;align-items:center;gap:32px;list-style:none}
.mk-nav-links>li{position:relative}
.mk-nav-links>li>a{
  display:inline-block;
  font-size:.83rem;font-weight:500;letter-spacing:.4px;
  color:var(--n700);transition:color .25s;position:relative;
}
.mk-nav-links>li>a::after{
  content:'';position:absolute;left:0;bottom:-3px;
  width:0;height:1.5px;background:var(--n900);transition:width .28s;
}
.mk-nav-links>li>a:hover,.mk-nav-links>li>a.active{color:var(--n900)}
.mk-nav-links>li>a:hover::after,.mk-nav-links>li>a.active::after{width:100%}
.mk-nav-links>li>button{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Outfit',sans-serif;font-size:.83rem;font-weight:500;letter-spacing:.4px;
  color:var(--n700);background:none;border:none;cursor:pointer;padding:0;
  transition:color .25s;
}
.mk-nav-links>li>button:hover{color:var(--n900)}
.mk-drop-caret{width:8px;height:8px;flex-shrink:0;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s}
.mk-drop.open .mk-drop-caret{transform:rotate(225deg) translateY(-1px)}
.mk-drop-menu{
  position:absolute;top:calc(100% + 14px);left:50%;min-width:288px;
  background:#fff;border:1px solid var(--n100);border-radius:14px;
  box-shadow:0 16px 56px rgba(13,30,60,.14);padding:10px;
  opacity:0;visibility:hidden;transform:translate(-50%,8px);
  transition:opacity .22s,transform .22s,visibility .22s;
  text-align:left;
}
.mk-drop-menu::before{ /* invisible hover bridge across the gap above the menu */
  content:'';position:absolute;top:-16px;left:0;right:0;height:16px;
}
.mk-drop.open .mk-drop-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media (hover:hover) and (min-width:881px){
  .mk-drop:hover .mk-drop-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
}
.mk-drop-menu a{
  display:block;padding:9px 12px;border-radius:9px;
  font-size:.84rem;font-weight:500;color:var(--ink-mute);
  transition:background .18s,color .18s;
}
.mk-drop-menu a:hover{background:var(--n50);color:var(--n900)}
.mk-drop-menu a strong{display:block;font-weight:600;color:var(--n900);font-size:.86rem}
.mk-drop-menu a span{display:block;font-size:.74rem;color:var(--ink-faint);margin-top:1px}
.mk-drop-menu .mk-drop-head{
  font-size:.62rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--gold);padding:8px 12px 4px;
}
.mk-nav-actions{display:flex;align-items:center;gap:20px;flex-shrink:0}
.mk-nav-login{
  font-size:.83rem;font-weight:600;color:var(--n700);
  transition:color .25s;
}
/* Mobile-only Log in entry (see the <li> right before </ul> in _Marketing.cshtml)
   — never shown in the horizontal desktop bar; revealed inside the mobile
   hamburger menu at the ≤880px breakpoint below. */
.mk-nav-mobile-login{display:none}
.mk-nav-login:hover{color:var(--n900)}
.mk-nav .mk-btn-sm{ /* match the landing .nav-cta button exactly */
  padding:9px 22px;font-size:.82rem;font-weight:600;letter-spacing:.6px;
  border-radius:8px;box-shadow:0 4px 14px rgba(13,30,60,.28);
}
.mk-nav .mk-btn-sm:hover{background:var(--n700);transform:translateY(-1px);box-shadow:0 7px 20px rgba(13,30,60,.35)}
.mk-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.mk-burger span{display:block;width:24px;height:2px;background:var(--n900);border-radius:2px;transition:all .3s}
.mk-nav.open .mk-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mk-nav.open .mk-burger span:nth-child(2){opacity:0}
.mk-nav.open .mk-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── PAGE HERO (editorial masthead) ─────────────────────────────────────── */
.mk-hero{
  position:relative;padding:118px 0 84px;overflow:hidden;
  background:
    radial-gradient(900px 480px at 88% -10%,rgba(212,226,244,.55) 0%,transparent 60%),
    radial-gradient(700px 420px at -8% 30%,rgba(238,244,252,.9) 0%,transparent 55%),
    #ffffff;
}
.mk-hero::before{ /* fine dot grid texture */
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(13,30,60,.10) 1px,transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(720px 480px at 78% 8%,#000 0%,transparent 70%);
  -webkit-mask-image:radial-gradient(720px 480px at 78% 8%,#000 0%,transparent 70%);
}
.mk-hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.mk-kicker{
  display:inline-flex;align-items:center;gap:14px;
  font-size:.72rem;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--gold);
  margin-bottom:22px;
}
.mk-kicker::before{content:'';width:44px;height:1.5px;background:linear-gradient(90deg,var(--gold),var(--gold-l))}
.mk-hero h1{
  font-family:'Bebas Neue',sans-serif;font-weight:400;
  font-size:clamp(2.9rem,5.4vw,4.6rem);line-height:1.02;letter-spacing:1.5px;
  color:var(--n900);margin-bottom:22px;
}
.mk-hero h1 em,.mk-em{
  font-family:'DM Serif Display',serif;font-style:italic;font-weight:400;
  letter-spacing:0;color:var(--n400);
}
.mk-lede{font-size:1.06rem;line-height:1.75;color:var(--ink-mute);max-width:560px;margin-bottom:32px}
.mk-hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:30px}
.mk-hero-meta{display:flex;flex-wrap:wrap;gap:22px;padding-top:22px;border-top:1px solid var(--n100)}
.mk-hero-meta span{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:500;color:var(--ink-faint)}
.mk-hero-meta svg{color:var(--green);flex-shrink:0}

/* ── HERO PANEL (abstract product board) ────────────────────────────────── */
.mk-panel{
  position:relative;background:#fff;border:1px solid var(--n100);border-radius:var(--r-l);
  box-shadow:var(--shadow-l);padding:22px;
}
.mk-panel::before{
  content:'';position:absolute;top:0;left:24px;right:24px;height:3px;border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold-l) 60%,transparent 100%);
}
.mk-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.mk-panel-title{font-size:.68rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--n400)}
.mk-panel-dot{display:inline-flex;align-items:center;gap:6px;font-size:.66rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--green)}
.mk-panel-dot::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(30,138,94,.15);animation:mkPulse 2.2s infinite}
@keyframes mkPulse{0%,100%{box-shadow:0 0 0 3px rgba(30,138,94,.18)}50%{box-shadow:0 0 0 7px rgba(30,138,94,.05)}}
.mk-row{
  display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;
  border:1px solid var(--n50);background:var(--n20);margin-bottom:9px;
}
.mk-row:last-child{margin-bottom:0}
.mk-row-avatar{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:700;color:#fff;background:var(--n600);
}
.mk-row-avatar.alt{background:var(--gold)}
.mk-row-avatar.alt2{background:var(--green)}
.mk-row-main{flex:1;min-width:0}
/* display:block is load-bearing, not cosmetic: the markup nests these two
   spans with no whitespace between their tags (…verified</span><span…),
   so as plain inline elements the last word of the name glues directly onto
   the first word of the sub as one unbreakable compound word — on a long
   enough pairing that can't wrap and forces the whole row (and, since these
   panels sit in the fixed nav's row, the nav itself) wider than the viewport. */
.mk-row-name{display:block;font-size:.84rem;font-weight:600;color:var(--n900);line-height:1.3}
.mk-row-sub{display:block;font-size:.72rem;color:var(--ink-faint);line-height:1.3}
.mk-tag{
  font-size:.62rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;white-space:nowrap;
}
.mk-tag-green{background:rgba(30,138,94,.1);color:var(--green)}
.mk-tag-gold{background:rgba(13,30,60,.07);color:var(--n700)}
.mk-tag-blue{background:var(--n50);color:var(--n400)}
.mk-chip{
  position:absolute;background:#fff;border:1px solid var(--n100);border-radius:12px;
  box-shadow:var(--shadow-m);padding:12px 16px;
  animation:mkFloat 7s ease-in-out infinite;
}
.mk-chip-num{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:1px;color:var(--n900);line-height:1}
.mk-chip-lbl{font-size:.62rem;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink-faint);margin-top:3px}
@keyframes mkFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ── SECTIONS ───────────────────────────────────────────────────────────── */
.mk-section{padding:88px 0;position:relative}
.mk-section-alt{background:var(--n20);border-top:1px solid var(--n50);border-bottom:1px solid var(--n50)}
.mk-section-dark{background:linear-gradient(160deg,var(--n900) 0%,var(--n800) 70%,var(--n700) 100%);color:#fff}
.mk-sec-head{max-width:720px;margin-bottom:52px}
.mk-sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.mk-sec-head.center .mk-kicker{justify-content:center}
.mk-sec-head.center .mk-kicker::before{display:none}
.mk-sec-head h2{
  font-family:'Bebas Neue',sans-serif;font-weight:400;
  font-size:clamp(2rem,3.6vw,3rem);line-height:1.08;letter-spacing:1.2px;
  color:var(--n900);margin-bottom:14px;
}
.mk-section-dark .mk-sec-head h2{color:#fff}
.mk-sec-head h2 em{font-family:'DM Serif Display',serif;font-style:italic;font-weight:400;letter-spacing:0;color:var(--n400)}
.mk-section-dark .mk-sec-head h2 em{color:var(--gold-l)}
.mk-sec-sub{font-size:1rem;line-height:1.75;color:var(--ink-mute)}
.mk-section-dark .mk-sec-sub{color:var(--n200)}

/* ── GRIDS & CARDS ──────────────────────────────────────────────────────── */
.mk-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.mk-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.mk-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.mk-card{
  position:relative;background:#fff;border:1px solid var(--n100);border-radius:var(--r-l);
  padding:30px 28px;overflow:hidden;
  transition:transform .3s,box-shadow .3s,border-color .3s;
}
.mk-card::before{
  content:'';position:absolute;top:0;left:0;width:0;height:3px;
  background:linear-gradient(90deg,var(--gold),var(--gold-l));
  transition:width .4s ease;
}
.mk-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-m);border-color:var(--n200)}
.mk-card:hover::before{width:100%}
.mk-card-icon{
  width:46px;height:46px;border-radius:12px;background:var(--n50);
  display:flex;align-items:center;justify-content:center;color:var(--n600);
  margin-bottom:18px;
}
.mk-card h3{font-size:1.08rem;font-weight:600;color:var(--n900);margin-bottom:9px;letter-spacing:.2px}
.mk-card p{font-size:.89rem;line-height:1.7;color:var(--ink-mute)}
.mk-card .mk-card-link{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font-size:.8rem;font-weight:600;letter-spacing:.6px;color:var(--n400);
  transition:color .2s,gap .2s;
}
.mk-card .mk-card-link:hover{color:var(--n900);gap:11px}
a.mk-card{display:block}

/* numbered editorial index on cards/sections */
.mk-num{
  font-family:'Bebas Neue',sans-serif;font-size:.95rem;letter-spacing:2px;color:var(--gold);
  display:inline-block;margin-bottom:10px;
}

/* ── TICK LISTS ─────────────────────────────────────────────────────────── */
.mk-ticks{list-style:none;display:flex;flex-direction:column;gap:13px}
.mk-ticks li{display:flex;gap:12px;align-items:flex-start;font-size:.93rem;line-height:1.6;color:var(--ink-mute)}
.mk-ticks li strong{color:var(--n900);font-weight:600}
.mk-tick{
  flex-shrink:0;width:20px;height:20px;border-radius:50%;margin-top:2px;
  background:rgba(30,138,94,.1);color:var(--green);
  display:inline-flex;align-items:center;justify-content:center;
}

/* ── SPLIT (alternating feature rows) ───────────────────────────────────── */
.mk-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:46px 0}
/* Grid "blowout": a 1fr track still implies minmax(auto,1fr), so a grid item's
   own min-content (here: the .mk-ticks text, which has no min-width reset of
   its own) can force the ITEM wider than its track regardless of how narrow
   the track itself is — only visible on the narrowest phones, where the gap
   between "track width" and "content's min-content width" finally shows. */
.mk-split>div{min-width:0}
.mk-split+.mk-split{border-top:1px solid var(--n50)}
.mk-split h3,.mk-split-h{
  font-family:'Bebas Neue',sans-serif;font-weight:400;
  font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:1px;line-height:1.1;
  color:var(--n900);margin-bottom:14px;
}
.mk-split p{font-size:.95rem;line-height:1.75;color:var(--ink-mute);margin-bottom:18px}
.mk-split-media{
  position:relative;border-radius:var(--r-l);min-height:300px;
  background:
    linear-gradient(150deg,var(--n50) 0%,#fff 55%,var(--n20) 100%);
  border:1px solid var(--n100);
  display:flex;align-items:center;justify-content:center;padding:34px;
}
.mk-split-media::after{
  content:'';position:absolute;inset:14px;border:1px dashed var(--n100);border-radius:14px;pointer-events:none;
}
.mk-split.rev .mk-split-media{order:-1}

/* ── STAT BAND (dark) ───────────────────────────────────────────────────── */
.mk-statband{
  display:grid;grid-template-columns:repeat(4,1fr);gap:34px;
}
.mk-stat{position:relative;padding-left:20px}
.mk-stat::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--gold),transparent)}
.mk-stat-num{
  font-family:'Bebas Neue',sans-serif;font-size:clamp(2.4rem,4vw,3.4rem);
  letter-spacing:1px;color:#fff;line-height:1;
}
.mk-stat-num small{font-size:55%;color:var(--gold-l)}
.mk-stat-lbl{font-size:.8rem;font-weight:500;letter-spacing:.5px;color:var(--n200);margin-top:8px;line-height:1.5}

/* ── STEPS (numbered process) ───────────────────────────────────────────── */
.mk-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:mkstep}
.mk-step{
  position:relative;background:#fff;border:1px solid var(--n100);border-radius:var(--r-l);
  padding:34px 28px 28px;counter-increment:mkstep;
}
.mk-step::before{
  content:counter(mkstep,decimal-leading-zero);
  font-family:'Bebas Neue',sans-serif;font-size:2.6rem;letter-spacing:1px;
  color:var(--n100);position:absolute;top:18px;right:22px;line-height:1;
  transition:color .3s;
}
.mk-step:hover::before{color:var(--gold)}
.mk-step h3{font-size:1.04rem;font-weight:600;color:var(--n900);margin-bottom:9px}
.mk-step p{font-size:.88rem;line-height:1.7;color:var(--ink-mute)}

/* ── LEDGER TABLE ───────────────────────────────────────────────────────── */
.mk-table-wrap{overflow-x:auto;border:1px solid var(--n100);border-radius:var(--r-l);background:#fff}
.mk-table{width:100%;border-collapse:collapse;min-width:640px}
.mk-table th{
  background:var(--n900);color:#fff;text-align:left;
  font-size:.74rem;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;
  padding:15px 20px;
}
.mk-table th:first-child{border-radius:0}
.mk-table td{
  padding:15px 20px;font-size:.9rem;color:var(--ink-mute);
  border-bottom:1px solid var(--n50);vertical-align:top;
}
.mk-table tr:last-child td{border-bottom:none}
.mk-table td strong{color:var(--n900);font-weight:600}
.mk-table tbody tr:hover td{background:var(--n20)}

/* ── FAQ ACCORDION ──────────────────────────────────────────────────────── */
.mk-faq{display:flex;flex-direction:column;gap:14px}
.mk-faq details{
  background:#fff;border:1px solid var(--n100);border-radius:14px;
  padding:0;overflow:hidden;transition:border-color .25s,box-shadow .25s;
}
.mk-faq details[open]{border-color:var(--n200);box-shadow:var(--shadow-s)}
.mk-faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:19px 22px;font-size:.98rem;font-weight:600;color:var(--n900);
}
.mk-faq summary::-webkit-details-marker{display:none}
.mk-faq summary::after{
  content:'+';font-family:'Bebas Neue',sans-serif;font-size:1.5rem;color:var(--gold);
  transition:transform .3s;line-height:1;flex-shrink:0;
}
.mk-faq details[open] summary::after{transform:rotate(45deg)}
.mk-faq .mk-faq-a{padding:0 22px 21px;font-size:.91rem;line-height:1.75;color:var(--ink-mute)}
.mk-faq .mk-faq-a a{color:var(--n400);font-weight:600;border-bottom:1px solid var(--n100)}
.mk-faq .mk-faq-a a:hover{color:var(--n900)}

/* ── QUOTE / PULL ───────────────────────────────────────────────────────── */
.mk-quote{
  position:relative;background:#fff;border:1px solid var(--n100);border-radius:var(--r-l);
  padding:34px 36px;box-shadow:var(--shadow-s);
}
.mk-quote::before{
  content:'\201C';font-family:'DM Serif Display',serif;font-size:4.2rem;line-height:1;
  color:var(--gold);position:absolute;top:14px;left:24px;opacity:.5;
}
.mk-quote p{font-family:'DM Serif Display',serif;font-style:italic;font-size:1.12rem;line-height:1.7;color:var(--n800);margin:14px 0 18px}
.mk-quote cite{font-style:normal;font-size:.8rem;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-faint)}

/* ── CTA BAND ───────────────────────────────────────────────────────────── */
.mk-cta{
  position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--n900) 0%,var(--n800) 60%,var(--n700) 100%);
  border-radius:var(--r-xl);padding:74px 56px;text-align:center;color:#fff;
}
.mk-cta::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(157,184,226,.22) 1px,transparent 1px);
  background-size:24px 24px;
  mask-image:radial-gradient(620px 360px at 50% 0%,#000 0%,transparent 75%);
  -webkit-mask-image:radial-gradient(620px 360px at 50% 0%,#000 0%,transparent 75%);
}
.mk-cta::after{
  content:'';position:absolute;top:-90px;right:-90px;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(58,98,168,.3) 0%,transparent 65%);
}
.mk-cta>*{position:relative;z-index:1}
.mk-cta .mk-kicker{color:var(--gold-l);justify-content:center}
.mk-cta .mk-kicker::before{background:var(--gold-l)}
.mk-cta h2{
  font-family:'Bebas Neue',sans-serif;font-weight:400;
  font-size:clamp(2.1rem,4vw,3.2rem);letter-spacing:1.5px;line-height:1.08;margin-bottom:14px;
}
.mk-cta h2 em{font-family:'DM Serif Display',serif;font-style:italic;font-weight:400;letter-spacing:0;color:var(--gold-l)}
.mk-cta p{font-size:1rem;line-height:1.7;color:var(--n200);max-width:560px;margin:0 auto 32px}
.mk-cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.mk-cta-note{margin-top:20px;font-size:.72rem;font-weight:500;letter-spacing:1.8px;text-transform:uppercase;color:rgba(255,255,255,.35)}

/* ── BREADCRUMBS ────────────────────────────────────────────────────────── */
.mk-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:.76rem;font-weight:500;color:var(--ink-faint);margin-bottom:26px}
.mk-crumbs a{color:var(--n400);transition:color .2s}
.mk-crumbs a:hover{color:var(--n900)}
.mk-crumbs .sep{color:var(--n100)}

/* ── PROSE (long-form guides) ───────────────────────────────────────────── */
.mk-prose{max-width:760px}
.mk-prose h2{
  font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:1.9rem;letter-spacing:1px;
  color:var(--n900);margin:46px 0 16px;
}
.mk-prose h3{font-size:1.12rem;font-weight:600;color:var(--n900);margin:32px 0 12px}
.mk-prose p{font-size:.97rem;line-height:1.85;color:var(--ink-mute);margin-bottom:18px}
.mk-prose ul,.mk-prose ol{margin:0 0 20px 22px;display:flex;flex-direction:column;gap:9px}
.mk-prose li{font-size:.95rem;line-height:1.7;color:var(--ink-mute)}
.mk-prose li::marker{color:var(--gold)}
.mk-prose a{color:var(--n400);font-weight:600;border-bottom:1px solid var(--n100);transition:color .2s,border-color .2s}
.mk-prose a:hover{color:var(--n900);border-color:var(--n400)}
.mk-prose blockquote{
  border-left:3px solid var(--gold);background:var(--n20);border-radius:0 12px 12px 0;
  padding:18px 24px;margin:26px 0;
}
.mk-prose blockquote p{margin:0;font-family:'DM Serif Display',serif;font-style:italic;color:var(--n800)}
.mk-callout{
  background:var(--n20);border:1px solid var(--n100);border-radius:14px;padding:20px 24px;margin:26px 0;
  font-size:.88rem;line-height:1.7;color:var(--ink-mute);
}
.mk-callout strong{color:var(--n900)}

/* ── PRICING ────────────────────────────────────────────────────────────── */
.mk-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
.mk-plan{
  position:relative;background:#fff;border:1px solid var(--n100);border-radius:var(--r-l);
  padding:36px 32px;display:flex;flex-direction:column;
  transition:transform .3s,box-shadow .3s,border-color .3s;
}
.mk-plan:hover{transform:translateY(-5px);box-shadow:var(--shadow-m)}
.mk-plan.featured{border-color:var(--n400);box-shadow:0 12px 44px rgba(58,98,168,.18)}
.mk-plan-flag{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--n900);color:#fff;
  font-size:.62rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  padding:6px 16px;border-radius:999px;white-space:nowrap;
}
.mk-plan-name{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:2px;color:var(--n900)}
.mk-plan-for{font-size:.8rem;color:var(--ink-faint);margin:6px 0 22px;line-height:1.5}
.mk-plan-price{display:flex;align-items:baseline;gap:7px;margin-bottom:4px}
.mk-plan-price .amt{font-family:'Bebas Neue',sans-serif;font-size:3rem;letter-spacing:1px;color:var(--n900);line-height:1}
.mk-plan-price .per{font-size:.78rem;color:var(--ink-faint)}
.mk-plan-bill{font-size:.72rem;color:var(--ink-faint);margin-bottom:24px}
.mk-plan .mk-ticks{margin-bottom:28px;flex:1}
.mk-plan .mk-btn{width:100%}

/* ── FORMS ──────────────────────────────────────────────────────────────── */
.mk-form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mk-form .full{grid-column:1/-1}
.mk-field label{
  display:block;font-size:.72rem;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--n700);margin-bottom:8px;
}
.mk-field label .req{color:var(--gold)}
.mk-input,.mk-select,.mk-textarea{
  width:100%;font-family:'Outfit',sans-serif;font-size:.92rem;color:var(--ink);
  background:#fff;border:1.5px solid var(--n100);border-radius:10px;
  padding:13px 15px;outline:none;transition:border-color .25s,box-shadow .25s;
}
.mk-input:focus,.mk-select:focus,.mk-textarea:focus{border-color:var(--n400);box-shadow:0 0 0 4px rgba(58,98,168,.1)}
.mk-textarea{min-height:130px;resize:vertical}
.mk-form-note{font-size:.76rem;color:var(--ink-faint);line-height:1.6}
.mk-form-msg{display:none;border-radius:12px;padding:16px 20px;font-size:.9rem;line-height:1.6}
.mk-form-msg.ok{display:block;background:rgba(30,138,94,.08);border:1px solid rgba(30,138,94,.25);color:var(--green)}
.mk-form-msg.err{display:block;background:rgba(192,57,43,.07);border:1px solid rgba(192,57,43,.25);color:#c0392b}
.mk-hp{position:absolute !important;left:-9999px !important;opacity:0;height:0;overflow:hidden} /* honeypot */

/* ── FOOTER (mirrors the landing-page footer) ───────────────────────────── */
.mk-footer{
  background:#ffffff;border-top:1px solid var(--n100);
  padding:64px 0 26px;position:relative;
}
.mk-footer-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:44px;
}
.mk-footer-brand p{font-size:.85rem;line-height:1.72;color:var(--ink-mute);max-width:260px;margin-top:14px}
.mk-social-row{display:flex;gap:8px;margin-top:18px}
.mk-social{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--n100);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.78rem;color:var(--n600);transition:color .25s,border-color .25s;
}
.mk-social:hover{color:var(--n900);border-color:var(--n400)}
.mk-store-badges{display:flex;flex-direction:column;gap:10px}
.mk-store-badge{
  display:inline-flex;align-items:center;gap:11px;
  background:var(--n900);border-radius:9px;padding:8px 18px 8px 14px;
  width:fit-content;min-width:178px;
  transition:transform .25s,box-shadow .25s,background .25s;
}
.mk-store-badge:hover{background:var(--n700);transform:translateY(-2px);box-shadow:0 6px 18px rgba(13,30,60,.28)}
.mk-store-badge svg{flex-shrink:0}
.mk-store-badge small{display:block;font-size:.56rem;font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--n200);line-height:1.25}
.mk-store-badge strong{display:block;font-size:.94rem;font-weight:600;color:#fff;line-height:1.25}
.mk-footer h4{
  font-size:.68rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--n900);margin-bottom:18px;
}
.mk-footer-links{list-style:none;display:flex;flex-direction:column;gap:10px}
.mk-footer-links a{font-size:.84rem;font-weight:500;color:var(--n600);transition:color .2s}
.mk-footer-links a:hover{color:var(--n900)}
.mk-footer-links li span{font-size:.84rem;color:var(--ink-mute)}
.mk-footer-bottom{
  border-top:1px solid var(--n100);padding-top:24px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
}
.mk-footer-bottom p{font-size:.78rem;color:var(--ink-mute)}
.mk-footer-bottom p a{color:var(--n700);font-weight:600}
.mk-footer-legal{display:flex;gap:22px}
.mk-footer-legal a{font-size:.78rem;font-weight:500;color:var(--n600);transition:color .2s}
.mk-footer-legal a:hover{color:var(--n900)}

/* ── REVEAL ANIMATIONS ──────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(26px);transition:opacity .65s ease,transform .65s ease}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .mk-chip{animation:none}
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .mk-grid-4{grid-template-columns:repeat(2,1fr)}
  .mk-statband{grid-template-columns:repeat(2,1fr);row-gap:40px}
  .mk-footer-grid{grid-template-columns:1.4fr 1fr 1fr;row-gap:36px}
}
@media (max-width:880px){ /* nav collapse — same pattern as the landing mobile menu */
  .mk-nav-links{
    display:none;position:absolute;top:68px;left:0;right:0;
    background:rgba(255,255,255,.98);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    border-bottom:1px solid var(--n100);box-shadow:0 8px 32px rgba(13,30,60,.08);
    flex-direction:column;align-items:stretch;gap:0;padding:0;
    max-height:calc(100vh - 68px);overflow-y:auto;
  }
  .mk-nav.open .mk-nav-links{display:flex}
  .mk-nav-links>li{border-bottom:1px solid var(--n100)}
  .mk-nav-links>li>a{display:block;padding:16px 5%;font-size:.95rem}
  .mk-nav-links>li>button{width:100%;display:flex;align-items:center;justify-content:space-between;padding:16px 5%;font-size:.95rem}
  .mk-drop-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;border-radius:0;
    padding:0 0 8px;display:none;min-width:0}
  /* .mk-drop.open .mk-drop-menu{transform:translate(-50%,0)} (the desktop hover/open
     rule, declared outside any media query) has the SAME specificity as this
     selector — the plain .mk-drop-menu{transform:none} reset two lines up loses
     that tie-break by being less specific, not by being earlier in the file, so
     the desktop's -50% translateX was still shifting the whole open panel
     (and everything inside it) half its own width off to the left on mobile.
     Matching the specificity exactly here is what actually wins the override. */
  .mk-drop.open .mk-drop-menu{display:block;transform:none}
  .mk-drop-menu a{padding:10px 8%}
  .mk-drop-menu .mk-drop-head{padding:8px 5% 4px}
  .mk-burger{display:flex}
  .mk-nav-login{display:none}
  .mk-nav-mobile-login{display:block}
  .mk-nav.open .mk-nav-links .mk-nav-mobile-login a{font-weight:600;color:var(--n900)}
}
/* ── Nav — narrow relief zone just above the mobile-nav breakpoint ───────────
   Mirrors the landing page's own fix: the full desktop nav (logo + 4 links +
   Login + Book a Demo) has no spare room right above ≤880px and can clip the
   CTA button before the browser's own scrollbar-driven overflow check ever
   fires (html/body are effectively overflow-x:hidden via .mk-body, so this
   would be a silent clip, not a visible scrollbar). Trimming the two nav gaps
   reclaims comfortable margin with no visible impact anywhere the desktop
   nav wasn't already tight. ─────────────────────────────────────────────── */
@media (min-width:881px) and (max-width:1010px){
  .mk-nav-links{gap:20px}
  .mk-nav-actions{gap:10px}
}
@media (max-width:960px){
  .mk-hero-grid{grid-template-columns:1fr;gap:44px}
  .mk-split{grid-template-columns:1fr;gap:30px;padding:34px 0}
  .mk-split.rev .mk-split-media{order:0}
  .mk-grid-3{grid-template-columns:1fr 1fr}
  .mk-steps{grid-template-columns:1fr}
  .mk-plans{grid-template-columns:1fr;max-width:480px;margin:0 auto}
}
@media (max-width:640px){
  #mk-scroll-progress{display:none}
  .mk-hero{padding:100px 0 60px}
  .mk-section{padding:60px 0}
  .mk-grid-2,.mk-grid-3,.mk-grid-4{grid-template-columns:1fr}
  .mk-statband{grid-template-columns:1fr 1fr;gap:26px}
  .mk-form{grid-template-columns:1fr}
  .mk-cta{padding:54px 26px;border-radius:var(--r-l)}
  .mk-footer-grid{grid-template-columns:1fr 1fr}
  .mk-footer-grid>div:first-child{grid-column:1/-1}
  .mk-footer-bottom{flex-direction:column;align-items:flex-start}
  .mk-hero-actions .mk-btn{width:100%}
  .mk-cta-actions .mk-btn{width:100%}
}
/* ── Smallest phones — the tier the nav was actually missing ──────────────
   Measured: at 320px the logo (139px, flex-shrink:0) + nav-actions (187px,
   flex-shrink:0) need 326px but only ~282px is available inside the 6%
   nav padding — the 44px deficit was NOT visible as page-level horizontal
   overflow (html/body are overflow-x:hidden, so it never produced a
   scrollbar or a non-zero scrollWidth) — it silently pushed the burger
   button off the right edge of the viewport instead, with nothing left
   to click. Every trim below is real, measured margin, not a bare-minimum
   fix, so it holds comfortably across 320–400px, not just at exactly 320. */
@media (max-width:400px){
  .mk-nav-inner{padding:0 3%}
  .mk-logo{gap:8px}
  .mk-logo img{width:30px;height:30px}
  .mk-logo-top{font-size:1.05rem;letter-spacing:2px}
  .mk-logo-sub{font-size:.5rem;letter-spacing:2px}
  .mk-nav-actions{gap:8px}
  .mk-nav .mk-btn-sm{padding:8px 14px;font-size:.76rem}
}

/* ════════════════════════════════════════════════════════════════════════
   AURORA UI v2 — global design-system layer (2026-07)
   Applies the homepage's Aurora language to every marketing page by
   overriding the mk-* component library in place. Class names unchanged.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── motion primitives (translate/opacity channels — compose with hovers) */
@keyframes mkFloatT{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes mkAuroraPulse{0%,100%{opacity:.72}50%{opacity:1}}
@keyframes mkGridDrift{from{background-position:0 0,0 0}to{background-position:56px 56px,56px 56px}}
@keyframes mkLineFlow{from{background-position:200% 0}to{background-position:-200% 0}}

/* ── global chrome ── */
.mk-body ::selection{background:var(--n100);color:var(--n900)}
#mk-scroll-progress{background:linear-gradient(90deg,#3a62a8,#5d8fe8,#7db2ff);box-shadow:0 0 12px rgba(93,143,232,.5)}

/* ── nav — deeper glass + gradient CTA ── */
.mk-nav.stuck{
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 4px 30px rgba(13,30,60,.08);
}
.mk-nav-links>li>a::after{background:linear-gradient(90deg,#3a62a8,#7db2ff);height:2px}
.mk-nav .mk-btn-sm{
  background:linear-gradient(120deg,#12264a,#234282);
  box-shadow:0 4px 14px rgba(13,30,60,.3),0 0 24px rgba(93,143,232,.16);
  border-radius:10px;
}
.mk-nav .mk-btn-sm:hover{
  background:linear-gradient(120deg,#1a3260,#2c5694);
  box-shadow:0 7px 20px rgba(13,30,60,.35),0 0 34px rgba(93,143,232,.3);
}
.mk-drop-menu{border-radius:16px;box-shadow:0 20px 60px rgba(13,30,60,.14)}
.mk-drop-menu a{transition:background .18s,transform .18s}
.mk-drop-menu a:hover{transform:translateX(3px)}
.mk-logo img{border-radius:9px}

/* ── typography — Outfit display everywhere (Bebas stays in the logo) ── */
.mk-hero h1{
  font-family:'Outfit',sans-serif;font-weight:600;
  font-size:clamp(2.4rem,4.6vw,3.9rem);
  letter-spacing:-.025em;line-height:1.07;
}
.mk-sec-head h2,.mk-cta h2,.mk-prose h2{
  font-family:'Outfit',sans-serif;font-weight:600;
  letter-spacing:-.02em;line-height:1.12;
}
.mk-split h3,.mk-split-h{
  font-family:'Outfit',sans-serif;font-weight:600;
  letter-spacing:-.015em;line-height:1.15;
}
.mk-hero h1 em,.mk-em,.mk-sec-head h2 em{
  padding-right:.06em;
  background:linear-gradient(105deg,#3a62a8 0%,#5d8fe8 70%,#7db2ff 115%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.mk-section-dark .mk-sec-head h2 em,.mk-cta h2 em{
  background:linear-gradient(105deg,#9cc2ff 0%,#7db2ff 60%,#3ddc97 130%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.mk-num{
  font-family:'Outfit',sans-serif;font-weight:700;font-size:.72rem;
  letter-spacing:2.2px;color:var(--n400);
}
.mk-plan-name{font-family:'Outfit',sans-serif;font-weight:600;font-size:1.2rem;letter-spacing:-.01em}
.mk-plan-price .amt{font-family:'Outfit',sans-serif;font-weight:600;font-size:2.6rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mk-chip-num{font-family:'Outfit',sans-serif;font-weight:600;font-size:1.3rem;letter-spacing:-.01em;font-variant-numeric:tabular-nums}

/* ── kicker → frosted pill with gradient dot ── */
.mk-kicker{
  display:inline-flex;align-items:center;gap:9px;
  padding:6px 16px;border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid var(--n100);
  backdrop-filter:blur(10px);
  box-shadow:0 2px 10px rgba(13,30,60,.04);
}
.mk-kicker::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:linear-gradient(120deg,#3a62a8,#5d8fe8);
}
.mk-sec-head.center .mk-kicker::before{display:inline-block}
.mk-section-dark .mk-kicker,.mk-cta .mk-kicker{
  background:rgba(255,255,255,.06);border-color:rgba(157,184,226,.25);color:#c9d9f2;
}
.mk-cta .mk-kicker::before{background:linear-gradient(120deg,#7db2ff,#3ddc97)}

/* ── hero — light aurora treatment on every page ── */
.mk-hero{
  background:
    radial-gradient(ellipse 58% 62% at 8% -10%,rgba(93,143,232,.2),transparent 60%),
    radial-gradient(ellipse 52% 58% at 96% -6%,rgba(157,184,226,.28),transparent 60%),
    radial-gradient(ellipse 40% 38% at 78% 88%,rgba(30,138,94,.06),transparent 60%),
    linear-gradient(180deg,#fdfeff 0%,#f2f7fe 100%);
}
.mk-hero::before{
  background-image:
    linear-gradient(rgba(13,30,60,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(13,30,60,.035) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 75% at 50% 20%,#000 15%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 90% 75% at 50% 20%,#000 15%,transparent 100%);
  animation:mkGridDrift 44s linear infinite;
}
.mk-hero::after{
  content:'';position:absolute;top:-220px;right:-180px;width:640px;height:640px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(93,143,232,.2),transparent 65%);
  filter:blur(60px);
  animation:mkAuroraPulse 12s ease-in-out infinite;
}
.mk-hero-grid{position:relative;z-index:1}
.mk-hero .mk-container,.mk-hero .mk-container-narrow{position:relative;z-index:1}

/* ── buttons — gradient primary, glass secondary ── */
.mk-btn{border-radius:12px}
.mk-btn-solid,.mk-btn-gold{
  background:linear-gradient(120deg,#12264a,#234282);
  box-shadow:0 6px 22px rgba(13,30,60,.26),0 0 34px rgba(93,143,232,.15);
}
.mk-btn-solid:hover,.mk-btn-gold:hover{
  background:linear-gradient(120deg,#1a3260,#2c5694);
  box-shadow:0 12px 30px rgba(13,30,60,.32),0 0 50px rgba(93,143,232,.28);
}
.mk-cta .mk-btn-gold,.mk-section-dark .mk-btn-gold{
  background:#fff;color:var(--n900);
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 12px 36px rgba(3,8,20,.45),0 0 44px rgba(125,178,255,.2);
}
.mk-cta .mk-btn-gold:hover,.mk-section-dark .mk-btn-gold:hover{
  background:var(--n50);
  box-shadow:0 0 0 1px rgba(255,255,255,.2),0 16px 44px rgba(3,8,20,.55),0 0 64px rgba(125,178,255,.3);
}
.mk-btn-line{background:rgba(255,255,255,.7);backdrop-filter:blur(8px)}
.mk-btn-line:hover{background:#fff;border-color:var(--n400)}
.mk-btn-ghost{background:rgba(255,255,255,.05);border-color:rgba(157,184,226,.3);backdrop-filter:blur(10px)}
.mk-btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(157,184,226,.55)}

/* ── cards — frosted glass, blue glow, gentle float ── */
.mk-card,.mk-step,.mk-quote,.mk-plan,.mk-callout,.mk-table-wrap,.mk-faq details{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(13,30,60,.08);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.mk-card{box-shadow:0 4px 18px rgba(13,30,60,.04)}
.mk-card::before{height:2px;background:linear-gradient(90deg,#3a62a8,#5d8fe8,#7db2ff)}
.mk-card:hover{border-color:rgba(93,143,232,.55);box-shadow:0 22px 60px rgba(58,98,168,.14)}
.mk-card,.mk-step{animation:mkFloatT 9s ease-in-out infinite}
.mk-card:nth-child(2),.mk-step:nth-child(2){animation-delay:1.2s}
.mk-card:nth-child(3),.mk-step:nth-child(3){animation-delay:2.4s}
.mk-card:nth-child(4),.mk-step:nth-child(4){animation-delay:.6s}
.mk-card:nth-child(5){animation-delay:1.8s}
.mk-card:nth-child(6){animation-delay:3s}
.mk-card-icon{
  border-radius:50%;
  background:rgba(93,143,232,.1);border:1px solid rgba(93,143,232,.18);
  color:var(--n400);
  transition:transform .35s,background .35s,box-shadow .35s,color .35s,border-color .35s;
}
.mk-card:hover .mk-card-icon{
  transform:scale(1.1) rotate(-5deg);
  background:linear-gradient(135deg,#3a62a8,#5d8fe8);border-color:transparent;
  box-shadow:0 8px 22px rgba(58,98,168,.35);color:#fff;
}
.mk-step{transition:transform .3s,box-shadow .3s,border-color .3s}
.mk-step:hover{border-color:rgba(93,143,232,.5);box-shadow:0 18px 48px rgba(58,98,168,.12)}
.mk-step::before{
  font-family:'Outfit',sans-serif;font-weight:700;font-size:2rem;letter-spacing:-.02em;
  color:rgba(13,30,60,.06);
}
.mk-step:hover::before{color:var(--n400)}

/* ── product mockup panels — glass + aurora glow + browser feel ── */
.mk-panel{
  background:rgba(255,255,255,.78);
  border:1px solid rgba(13,30,60,.08);
  backdrop-filter:blur(14px);
  box-shadow:0 26px 70px rgba(13,30,60,.13),0 4px 14px rgba(13,30,60,.05),0 0 60px rgba(93,143,232,.12);
  transition:box-shadow .45s ease;
}
.mk-panel:hover{box-shadow:0 32px 84px rgba(13,30,60,.16),0 6px 18px rgba(13,30,60,.06),0 0 90px rgba(93,143,232,.2)}
.mk-chip{
  background:rgba(255,255,255,.8);
  border:1px solid rgba(13,30,60,.08);
  border-radius:14px;
  backdrop-filter:blur(14px);
  box-shadow:0 16px 40px rgba(13,30,60,.13);
}
.mk-split-media{
  background:
    radial-gradient(ellipse 70% 70% at 20% 10%,rgba(93,143,232,.12),transparent 60%),
    radial-gradient(ellipse 60% 60% at 90% 90%,rgba(157,184,226,.16),transparent 60%),
    linear-gradient(150deg,#f6f9fe 0%,#fff 55%,#f2f7fe 100%);
  border:1px solid rgba(13,30,60,.08);
  box-shadow:0 20px 56px rgba(13,30,60,.08);
}
.mk-split-media::after{border-color:rgba(93,143,232,.22)}

/* ── ticks + tags ── */
.mk-tick{background:linear-gradient(135deg,#1e8a5e,#2aa876);color:#fff;box-shadow:0 3px 10px rgba(30,138,94,.28)}
.mk-tag{backdrop-filter:blur(6px)}
.mk-tag-blue{background:rgba(93,143,232,.1);border:1px solid rgba(93,143,232,.2)}
.mk-tag-green{border:1px solid rgba(30,138,94,.2)}
.mk-tag-gold{background:rgba(13,30,60,.05);border:1px solid rgba(13,30,60,.1)}

/* ── sections — aurora rhythm ── */
.mk-section-alt{
  background:
    radial-gradient(ellipse 55% 70% at 0% 0%,rgba(157,184,226,.16),transparent 58%),
    radial-gradient(ellipse 50% 60% at 100% 100%,rgba(93,143,232,.1),transparent 58%),
    linear-gradient(135deg,#f2f7fe 0%,#eef4fc 100%);
  border-top:none;border-bottom:none;
}
.mk-section-dark{
  background:
    radial-gradient(ellipse 75% 85% at 15% -10%,rgba(58,98,168,.5),transparent 60%),
    radial-gradient(ellipse 65% 75% at 90% 110%,rgba(93,143,232,.3),transparent 60%),
    #0a1526;
}
.mk-stat::before{background:linear-gradient(180deg,#7db2ff,transparent)}
.mk-stat-num{
  font-family:'Outfit',sans-serif;font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#ffffff 40%,#9cc2ff 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.mk-stat-num small{-webkit-text-fill-color:#7db2ff}

/* ── CTA band — aurora bloom finale ── */
.mk-cta{
  background:
    radial-gradient(ellipse 75% 85% at 15% 0%,rgba(58,98,168,.48),transparent 58%),
    radial-gradient(ellipse 70% 80% at 90% 100%,rgba(93,143,232,.32),transparent 58%),
    radial-gradient(ellipse 45% 45% at 60% 45%,rgba(30,138,94,.12),transparent 60%),
    #0a1526;
  border:1px solid rgba(157,184,226,.16);
}
.mk-cta::before{
  background-image:
    linear-gradient(rgba(157,184,226,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(157,184,226,.06) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 90% 90% at 50% 30%,#000 25%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 90% 90% at 50% 30%,#000 25%,transparent 100%);
}
.mk-cta::after{
  background:radial-gradient(circle,rgba(125,178,255,.24),transparent 60%);
  filter:blur(40px);
  animation:mkAuroraPulse 11s ease-in-out infinite;
}
.mk-cta p{color:rgba(203,219,243,.6)}
.mk-cta-note{color:rgba(157,184,226,.45)}

/* ── table ── */
.mk-table th{background:linear-gradient(90deg,#0d1e3c,#16305e)}
.mk-table tbody tr:hover td{background:rgba(93,143,232,.05)}

/* ── FAQ ── */
.mk-faq details{border-radius:16px;transition:border-color .3s,box-shadow .3s,background .3s}
.mk-faq details:hover{border-color:rgba(93,143,232,.35)}
.mk-faq details[open]{border-color:rgba(93,143,232,.45);box-shadow:0 14px 40px rgba(58,98,168,.1);background:rgba(255,255,255,.9)}
.mk-faq summary::after{color:var(--n400);font-family:'Outfit',sans-serif;font-weight:500;font-size:1.3rem}

/* ── prose ── */
.mk-prose li::marker{color:var(--n400)}
.mk-prose blockquote{border-left:3px solid var(--n400)}

/* ── pricing ── */
.mk-plan:hover{border-color:rgba(93,143,232,.5);box-shadow:0 22px 60px rgba(58,98,168,.14)}
.mk-plan.featured{
  border-color:rgba(93,143,232,.55);
  box-shadow:0 16px 52px rgba(58,98,168,.2),0 0 44px rgba(93,143,232,.12);
  background:rgba(255,255,255,.85);
}
.mk-plan-flag{background:linear-gradient(120deg,#3a62a8,#5d8fe8);box-shadow:0 6px 18px rgba(58,98,168,.35)}

/* ── forms — glass inputs, animated focus ── */
.mk-input,.mk-select,.mk-textarea{
  background:rgba(246,249,254,.7);
  border:1px solid var(--n100);border-radius:10px;
  backdrop-filter:blur(6px);
  transition:border-color .25s,box-shadow .25s,background .25s,transform .25s;
}
.mk-input:focus,.mk-select:focus,.mk-textarea:focus{
  background:#fff;transform:translateY(-1px);
  border-color:var(--n400);box-shadow:0 0 0 4px rgba(93,143,232,.12),0 6px 18px rgba(13,30,60,.06);
}
.mk-field label{transition:color .25s}
.mk-field:focus-within label{color:var(--n400)}
.mk-field label .req{color:var(--n400)}

/* ── footer — dark aurora fade (matches the homepage) ── */
.mk-footer{
  background:
    radial-gradient(ellipse 70% 60% at 88% 0%,rgba(58,98,168,.3),transparent 60%),
    radial-gradient(ellipse 60% 55% at 8% 100%,rgba(93,143,232,.2),transparent 60%),
    #0a1526;
  border-top:none;overflow:hidden;
}
.mk-footer::after{
  content:'ENGAGE';position:absolute;right:-1%;bottom:-4%;
  font-family:'Outfit',sans-serif;font-weight:700;
  font-size:clamp(6rem,16vw,14rem);letter-spacing:-.04em;line-height:1;
  color:rgba(255,255,255,.025);
  pointer-events:none;user-select:none;
}
.mk-footer .mk-container{position:relative;z-index:1}
.mk-footer .mk-logo-top{color:#fff}
.mk-footer .mk-logo-sub{color:#9db8e2}
.mk-footer .mk-logo img{border-radius:8px;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.mk-footer-brand p{color:#93a8cc}
.mk-footer h4{color:#e8f0fe}
.mk-footer-links a{color:#9db8e2}
.mk-footer-links a:hover{color:#fff}
.mk-footer-links li span{color:#8fa5c9}
.mk-social{background:rgba(255,255,255,.06);border-color:rgba(157,184,226,.22);color:#c9d9f2}
.mk-social:hover{background:linear-gradient(135deg,#3a62a8,#5d8fe8);border-color:transparent;color:#fff}
.mk-store-badge{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(157,184,226,.22);
  backdrop-filter:blur(10px);border-radius:12px;
}
.mk-store-badge:hover{
  background:rgba(255,255,255,.1);border-color:rgba(125,178,255,.45);
  box-shadow:0 8px 24px rgba(3,8,20,.4),0 0 24px rgba(125,178,255,.15);
}
.mk-store-badge small{color:#8fa5c9}
.mk-footer-bottom{border-top:none;position:relative}
.mk-footer-bottom::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(125,178,255,.45),rgba(61,220,151,.25),transparent);
  background-size:220% 100%;
  animation:mkLineFlow 9s linear infinite;
}
.mk-footer-bottom p{color:#8fa5c9}
.mk-footer-bottom p a{color:#c9d9f2}
.mk-footer-legal a{color:#9db8e2}
.mk-footer-legal a:hover{color:#fff}

/* ── reduced motion — kill the aurora motion layer ── */
@media (prefers-reduced-motion:reduce){
  .mk-card,.mk-step,.mk-hero::before,.mk-hero::after,.mk-cta::after,
  .mk-footer-bottom::before{animation:none}
}