/* =====================================================================
   CA-Portal — Public marketing site ("Ledger" identity).
   Multi-page landing (Home / Features / About / Contact) + shared
   header & footer. Uses the same design tokens as the app so light/dark
   themes and brand colours stay consistent. Prefix: .mk-
   ===================================================================== */

.mk{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;background:var(--bg)}
.mk-container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--s6)}
.mk main{flex:1 1 auto}

/* ---------- Header ---------- */
.mk-header{position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:saturate(1.3) blur(10px);-webkit-backdrop-filter:saturate(1.3) blur(10px);
  border-bottom:1px solid var(--border)}
.mk-header__inner{display:flex;align-items:center;gap:var(--s5);height:68px}
.mk-brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;flex:none}
.mk-brand:hover{text-decoration:none}
.mk-brand__mark{width:38px;height:38px;flex:none;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;
  background:linear-gradient(155deg,var(--primary-press),var(--primary));color:var(--accent);box-shadow:var(--sh-1)}
.mk-brand__mark svg{width:22px;height:22px}
.mk-brand__tx{display:flex;flex-direction:column;line-height:1.05}
.mk-brand__name{font-family:var(--font-display);font-weight:600;font-size:var(--fs-18);letter-spacing:-.01em}
.mk-brand__sub{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);font-weight:600}
.mk-nav{display:flex;align-items:center;gap:2px;margin-left:var(--s4)}
.mk-nav a{padding:8px var(--s3);border-radius:var(--r-md);color:var(--ink-muted);font-weight:600;font-size:var(--fs-14)}
.mk-nav a:hover{background:var(--surface-2);color:var(--ink);text-decoration:none}
.mk-nav a.active{color:var(--primary);background:var(--primary-tint)}
.mk-header__cta{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}
.mk-burger{display:none}

/* Mobile menu panel */
.mk-mobile{display:none;border-bottom:1px solid var(--border);background:var(--surface)}
.mk-mobile.open{display:block}
.mk-mobile__inner{padding:var(--s3) var(--s6) var(--s5);display:flex;flex-direction:column;gap:4px}
.mk-mobile a{padding:12px var(--s3);border-radius:var(--r-md);color:var(--ink);font-weight:600;font-size:var(--fs-16)}
.mk-mobile a:hover,.mk-mobile a.active{background:var(--surface-2);text-decoration:none;color:var(--primary)}
.mk-mobile .btn{margin-top:var(--s3)}

/* ---------- Shared section frame ---------- */
.mk-section{padding:var(--s10) 0}
.mk-section--tint{background:var(--surface-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.mk-shead{max-width:660px;margin:0 auto var(--s8);text-align:center;display:flex;flex-direction:column;gap:var(--s3);align-items:center}
.mk-shead h2{font-size:clamp(var(--fs-28),3.2vw,var(--fs-36))}
.mk-shead p{color:var(--ink-muted);font-size:var(--fs-16);line-height:1.6;max-width:56ch}
.mk-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--r-pill);
  background:var(--primary-tint);color:var(--primary);font-size:var(--fs-12);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.mk-eyebrow svg{width:14px;height:14px}

/* ---------- Hero ---------- */
.mk-hero{position:relative;isolation:isolate;overflow:hidden;color:var(--primary-ink);
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb,var(--accent) 28%,transparent), transparent 55%),
    radial-gradient(120% 120% at 0% 100%, color-mix(in srgb,var(--primary-ink) 8%,transparent), transparent 50%),
    linear-gradient(155deg,var(--primary-press),var(--primary) 74%)}
.mk-hero__lines{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:repeating-linear-gradient(transparent,transparent 38px,color-mix(in srgb,var(--primary-ink) 7%,transparent) 39px)}
.mk-hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s9);align-items:center;padding:var(--s10) 0 calc(var(--s10) + var(--s6))}
.mk-hero__eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--primary-ink) 12%,transparent);border:1px solid color-mix(in srgb,var(--primary-ink) 18%,transparent);
  color:color-mix(in srgb,var(--primary-ink) 94%,transparent);font-size:var(--fs-12);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.mk-hero__eyebrow svg{width:14px;height:14px;color:var(--accent)}
.mk-hero h1{color:var(--primary-ink);font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.04;letter-spacing:-.02em;margin-top:var(--s5);max-width:16ch}
.mk-hero h1 em{font-style:italic;color:var(--accent)}
.mk-hero__lede{color:color-mix(in srgb,var(--primary-ink) 82%,transparent);max-width:50ch;font-size:var(--fs-18);line-height:1.6;margin-top:var(--s5)}
.mk-hero__actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s7)}
.mk-hero__chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:var(--s7)}
.mk-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--r-pill);font-size:var(--fs-13);font-weight:600;
  background:color-mix(in srgb,var(--primary-ink) 12%,transparent);border:1px solid color-mix(in srgb,var(--primary-ink) 18%,transparent);
  color:color-mix(in srgb,var(--primary-ink) 92%,transparent)}
.mk-chip svg{width:15px;height:15px;color:var(--accent)}

/* Light CTA buttons that sit on the pine hero / bands */
.mk-cta-light{background:#fff;color:var(--primary);border-color:#fff}
.mk-cta-light:hover{background:color-mix(in srgb,#fff 92%,var(--accent))}
.mk-cta-ghost{background:color-mix(in srgb,var(--primary-ink) 10%,transparent);color:var(--primary-ink);border-color:color-mix(in srgb,var(--primary-ink) 32%,transparent)}
.mk-cta-ghost:hover{background:color-mix(in srgb,var(--primary-ink) 18%,transparent)}

/* Hero visual — invoice/statement preview */
.mk-hero__art{position:relative;display:flex;justify-content:flex-end}
.mk-invoice{width:min(420px,100%);padding:var(--s6);background:var(--surface);color:var(--ink);box-shadow:var(--sh-pop)}
.mk-invoice__top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s3);padding-bottom:var(--s4);border-bottom:1px solid var(--border)}
.mk-invoice__from{font-family:var(--font-display);font-weight:600;font-size:var(--fs-16)}
.mk-invoice__meta{font-size:var(--fs-12);color:var(--ink-faint);margin-top:3px}
.mk-invoice__rows{display:flex;flex-direction:column;padding:var(--s3) 0}
.mk-invoice__row{display:flex;justify-content:space-between;gap:var(--s4);font-size:var(--fs-14);padding:7px 0;color:var(--ink-muted)}
.mk-invoice__row b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.mk-invoice__total{display:flex;justify-content:space-between;align-items:center;padding-top:var(--s4);border-top:1px solid var(--border)}
.mk-invoice__total span{color:var(--ink-muted);font-weight:600}
.mk-invoice__total b{font-family:var(--font-display);font-size:var(--fs-22);font-variant-numeric:tabular-nums}
.mk-hero__stamp{position:absolute;left:0;bottom:-18px;display:flex;align-items:center;gap:10px;padding:12px var(--s4);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.mk-hero__stamp .ic{width:36px;height:36px;flex:none;border-radius:var(--r-md);background:var(--success-tint);color:var(--success);display:flex;align-items:center;justify-content:center}
.mk-hero__stamp .ic svg{width:20px;height:20px}
.mk-hero__stamp .t{font-size:var(--fs-12);color:var(--ink-faint);font-weight:600}
.mk-hero__stamp .v{font-family:var(--font-display);font-weight:600;font-size:var(--fs-16)}

/* ---------- Feature grid ---------- */
.mk-features{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.mk-feature{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s6);box-shadow:var(--sh-1);
  transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2),border-color var(--dur-1)}
.mk-feature:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--primary)}
.mk-feature__ic{width:46px;height:46px;border-radius:var(--r-md);background:var(--primary-tint);color:var(--primary);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--s4)}
.mk-feature__ic svg{width:22px;height:22px}
.mk-feature h3{font-size:var(--fs-18);margin-bottom:6px}
.mk-feature p{color:var(--ink-muted);font-size:var(--fs-14);line-height:1.6}

/* ---------- Steps ---------- */
.mk-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);counter-reset:step}
.mk-step{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s6);box-shadow:var(--sh-1)}
.mk-step__n{font-family:var(--font-display);font-size:var(--fs-36);font-weight:600;color:var(--accent);line-height:1}
.mk-step h3{font-size:var(--fs-18);margin:var(--s3) 0 6px}
.mk-step p{color:var(--ink-muted);font-size:var(--fs-14);line-height:1.6}

/* ---------- Split rows (features / about) ---------- */
.mk-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s9);align-items:center}
.mk-split + .mk-split{margin-top:var(--s10)}
.mk-split--rev .mk-split__media{order:2}
.mk-split h3{font-size:var(--fs-28);margin-bottom:var(--s3)}
.mk-split p{color:var(--ink-muted);font-size:var(--fs-16);line-height:1.65}
.mk-split__media{border:1px solid var(--border);border-radius:var(--r-xl);background:var(--surface-2);box-shadow:var(--sh-1);
  padding:var(--s7);min-height:260px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.mk-split__media--pine{background:linear-gradient(155deg,var(--primary-press),var(--primary));color:var(--primary-ink);border-color:transparent}
.mk-split__glyph{width:96px;height:96px;color:var(--accent);opacity:.9}

/* Check lists */
.mk-checks{list-style:none;margin:var(--s4) 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.mk-checks li{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-15,var(--fs-14));color:var(--ink-muted);line-height:1.5}
.mk-checks li svg{flex:none;width:20px;height:20px;color:var(--success);margin-top:1px}
.mk-checks li b{color:var(--ink);font-weight:600}

/* ---------- Services grid ---------- */
.mk-services{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.mk-service{display:flex;gap:var(--s3);align-items:flex-start;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--sh-1)}
.mk-service__ic{width:40px;height:40px;flex:none;border-radius:var(--r-md);background:var(--accent-tint);color:var(--accent);
  display:flex;align-items:center;justify-content:center}
.mk-service__ic svg{width:20px;height:20px}
.mk-service h3{font-size:var(--fs-16)}
.mk-service p{color:var(--ink-muted);font-size:var(--fs-13);line-height:1.55;margin-top:3px}

/* ---------- Stat strip ---------- */
.mk-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.mk-statc{text-align:center;padding:var(--s5) var(--s4)}
.mk-statc .v{font-family:var(--font-display);font-size:var(--fs-36);font-weight:600;color:var(--primary);line-height:1;font-variant-numeric:tabular-nums}
.mk-statc .k{margin-top:8px;font-size:var(--fs-13);color:var(--ink-muted);font-weight:600}

/* ---------- CTA band ---------- */
.mk-band{position:relative;overflow:hidden;isolation:isolate;color:var(--primary-ink);text-align:center;
  border-radius:var(--r-xl);padding:var(--s10) var(--s6);
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb,var(--accent) 26%,transparent), transparent 55%),
    linear-gradient(155deg,var(--primary-press),var(--primary) 76%)}
.mk-band__lines{position:absolute;inset:0;z-index:-1;background-image:repeating-linear-gradient(transparent,transparent 38px,color-mix(in srgb,var(--primary-ink) 7%,transparent) 39px)}
.mk-band h2{color:var(--primary-ink);font-size:clamp(var(--fs-28),3vw,var(--fs-36));max-width:20ch;margin:0 auto}
.mk-band p{color:color-mix(in srgb,var(--primary-ink) 82%,transparent);max-width:52ch;margin:var(--s4) auto 0;font-size:var(--fs-16);line-height:1.6}
.mk-band__actions{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center;margin-top:var(--s7)}

/* ---------- Contact ---------- */
.mk-contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s8);align-items:start}
.mk-contact__cards{display:flex;flex-direction:column;gap:var(--s3)}
.mk-cc{display:flex;gap:var(--s3);align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s4);box-shadow:var(--sh-1)}
.mk-cc__ic{width:40px;height:40px;flex:none;border-radius:var(--r-md);background:var(--primary-tint);color:var(--primary);display:flex;align-items:center;justify-content:center}
.mk-cc__ic svg{width:20px;height:20px}
.mk-cc .k{font-size:var(--fs-12);color:var(--ink-faint);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.mk-cc .v{font-size:var(--fs-15,var(--fs-14));color:var(--ink);margin-top:2px;line-height:1.5}
.mk-form{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.mk-form .field--full{grid-column:1 / -1}

/* ---------- Footer ---------- */
.mk-footer{background:var(--surface);border-top:1px solid var(--border);padding:var(--s9) 0 var(--s6);margin-top:auto}
.mk-footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--s7)}
.mk-footer__about{max-width:34ch}
.mk-footer__about p{color:var(--ink-muted);font-size:var(--fs-13);line-height:1.6;margin-top:var(--s3)}
.mk-footer__about .mk-footer__estab{color:var(--ink-faint);font-size:var(--fs-12);letter-spacing:.02em;margin-top:var(--s4)}
.mk-fcol h4{font-size:var(--fs-12);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;margin-bottom:var(--s3)}
.mk-fcol a,.mk-fcol span{display:block;color:var(--ink-muted);font-size:var(--fs-14);padding:5px 0}
.mk-fcol a:hover{color:var(--primary);text-decoration:none}
.mk-footer__bottom{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;color:var(--ink-faint);font-size:var(--fs-13)}
.mk-footer__bottom .disc{max-width:70ch}

/* ---------- Page hero (interior pages) ---------- */
.mk-phero{background:var(--surface-2);border-bottom:1px solid var(--border);padding:var(--s9) 0}
.mk-phero__in{max-width:720px;display:flex;flex-direction:column;gap:var(--s3)}
.mk-phero h1{font-size:clamp(var(--fs-28),4vw,var(--fs-36))}
.mk-phero p{color:var(--ink-muted);font-size:var(--fs-16);line-height:1.6;max-width:60ch}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .mk-hero__grid{grid-template-columns:1fr;gap:var(--s7);padding:var(--s8) 0 calc(var(--s9) + var(--s5))}
  .mk-hero__art{justify-content:flex-start}
  .mk-features,.mk-steps,.mk-services{grid-template-columns:repeat(2,1fr)}
  .mk-stats{grid-template-columns:repeat(2,1fr)}
  .mk-split,.mk-contact{grid-template-columns:1fr;gap:var(--s6)}
  .mk-split--rev .mk-split__media{order:0}
  .mk-footer__grid{grid-template-columns:1fr 1fr}
  .mk-footer__about{grid-column:1 / -1;max-width:none}
}
@media (max-width:640px){
  .mk-container{padding:0 var(--s4)}
  .mk-nav{display:none}
  .mk-header__cta .mk-loginbtn{display:none}
  .mk-burger{display:inline-flex}
  .mk-features,.mk-steps,.mk-services,.mk-stats{grid-template-columns:1fr}
  .mk-form{grid-template-columns:1fr}
  .mk-section{padding:var(--s9) 0}
  .mk-invoice{width:100%}
}