/* attest — marketing site UI kit. White background, light-grey surfaces,
   high-contrast ink, indigo brand, marbled premium CTA. Inter throughout;
   Fraunces reserved for the wordmark. */

.mk {
  --bg: #FFFFFF; --bg-soft: #F7F8F9; --paper: #FFFFFF;
  --ink: #0F1115; --ink-2: #353A40; --ink-3: #646A72; --ink-4: #9AA0A8;
  --line: #E6E8EB; --line-strong: #CDD1D6;
  --brand: #1E3A8A; --brand-2: #16296A; --brand-soft: #EEF1FB;
  --good: #2D7A4F; --good-soft: #E6F2EB;
  --radius: 8px; --radius-lg: 12px; --radius-xl: 16px;
  --shadow-soft: 0 0 0 1px rgba(15,17,21,.04), 0 10px 28px rgba(15,17,21,.05);
  --shadow: 0 0 0 1px rgba(15,17,21,.05), 0 18px 40px rgba(15,17,21,.06);
  --shadow-lg: 0 0 0 1px rgba(15,17,21,.05), 0 24px 60px rgba(15,17,21,.08);
  --ring: rgba(30,58,138,.16);
  min-height: 100vh; background: var(--bg); color: var(--ink);
  font-family: var(--font-ui); -webkit-font-smoothing: antialiased;
}
.mk * { box-sizing: border-box; }
* { box-sizing: border-box; } html,body { margin:0; }
.mk a { color: inherit; text-decoration: none; }
.mk p { color: var(--ink-3); margin: 0; }
.mk button { font: inherit; cursor: pointer; }

.mk h1, .mk h2, .mk h3 { font-family: var(--font-display); color: var(--ink); margin: 0; letter-spacing: 0; font-weight: 500; }
.mk h1 { font-size: clamp(36px, 5.2vw, 58px); line-height: 1.08; }
.mk h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; }
.mk h3 { font-family: var(--font-ui); font-size: 17px; line-height: 1.4; font-weight: 600; letter-spacing: -0.005em; }

.mk-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:10.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color: var(--ink-3); }
.mk-eyebrow [data-lucide] { color: var(--brand); width:14px; height:14px; }
.mk-container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.mk-section { padding: 92px 0; }
.mk-section--alt { background: var(--bg-soft); }
.mk-section-head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.mk-section-head h2 { margin: 14px 0; }
.mk-section-head p { font-size: 17px; line-height: 1.6; }

/* Nav */
/* Horizontal padding tracks the .mk-container edge (max-width 1180 + 24px) so
   the top-left brand lines up with the footer brand on every viewport width. */
.mk-nav { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; padding: 14px max(24px, calc((100% - 1180px) / 2 + 24px)); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid color-mix(in srgb, var(--line) 86%, transparent); }
.mk-brand { font-family: var(--font-brand); font-weight: 500; font-size: 80px; letter-spacing: 0; color: #1E3A8A; line-height: 1; }
.mk-nav-links { display: inline-flex; align-items: center; gap: 4px; }
.mk-nav-links a { padding: 8px 14px; font-size: 14px; font-weight: 500; color: var(--ink-2); border-radius: 8px; transition: background .16s ease, color .16s ease; }
.mk-nav-links a:hover { background: var(--bg-soft); color: var(--ink); }
.mk-nav-actions { display: inline-flex; align-items: center; gap: 8px; }
/* Mobile nav: keep the header to the brand plus account actions. Footer links
   carry the rest of the navigation on small screens. */
@media (max-width: 860px) {
  .mk-nav { flex-wrap: nowrap; gap: 10px; padding: 12px 16px; }
  .mk-nav .mk-brand { font-size: clamp(46px, 14vw, 64px); font-weight: 500; }
  .mk-nav-links { display: none; }
  .mk-nav-actions { gap: 6px; margin-left: auto; }
  .mk-login { padding: 7px 8px; font-size: 13px; }
  .mk-nav-actions .mk-btn { padding: 8px 11px; font-size: 13px; border-radius: 10px; }
  .mk-nav-actions .mk-btn [data-lucide] { display: none; }
}

/* Buttons */
.mk-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; border-radius: var(--radius-lg); border:1px solid transparent; font-size:14px; font-weight:500; padding:9px 18px; transition: all .16s ease; white-space: nowrap; }
.mk-btn--lg { padding: 12px 22px; font-size: 15px; }
.mk-btn--primary { background: var(--ink); color:#fff; border-color: var(--ink); }
.mk-btn--primary:hover { background: var(--ink-2); }
.mk-btn--brand { background: var(--brand); color:#fff; border-color: var(--brand); font-weight:600; box-shadow: 0 12px 24px rgba(30,58,138,.18); }
.mk-btn--brand:hover { background: var(--brand-2); transform: translateY(-1px); box-shadow: 0 16px 32px rgba(30,58,138,.24); }
.mk-btn--brand [data-lucide] { color:#fff; }
@property --mkang { syntax:'<angle>'; initial-value:0deg; inherits:false; }
.mk-btn--premium { position:relative; color:#fff; border-color: transparent; font-weight:600; text-shadow: 0 1px 3px rgba(0,0,0,.42);
  background-color:#27184E;
  background-image:
    radial-gradient(70% 90% at 22% 32%, rgba(176,52,70,.96) 0%, transparent 62%),
    radial-gradient(48% 70% at 82% 34%, rgba(36,54,120,.82) 0%, transparent 60%),
    radial-gradient(74% 92% at 55% 98%, rgba(96,42,92,.94) 0%, transparent 66%);
  background-size: 200% 200%, 220% 220%, 180% 200%;
  animation: mk-cta-water 30s ease-in-out infinite; }
.mk-btn--premium::before {
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background: conic-gradient(from var(--mkang),
    transparent 0deg, transparent 74deg,
    rgba(255,255,255,.82) 90deg, transparent 106deg,
    transparent 254deg, rgba(255,255,255,.5) 270deg, transparent 286deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:0; transition: opacity .5s ease; pointer-events:none;
}
.mk-btn--premium:hover::before { opacity:1; animation: mk-cta-spin 7s linear infinite; }
@keyframes mk-cta-spin { to { --mkang:360deg; } }
.mk-btn--premium .lbl, .mk-btn--premium [data-lucide] { position:relative; z-index:1; color:#fff; }

/* ===== Functional chat hero ===== */
.mk-hero-center { position:relative; z-index:1; width:100%; max-width: 720px; margin: 0 auto; text-align:center; }
.mk-hero-center h1 { margin: 18px auto 12px; }
.mk-hero-center .mk-hero-sub { margin: 0 auto 26px; }
.mk-chat { text-align:left; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); padding:16px; }
.mk-chat-scroll { display:flex; flex-direction:column; gap:10px; }
.mk-chat-scroll:empty { display:none; }
.mk-chat-quick { display:flex; gap:6px; flex-wrap:wrap; margin: 12px 0 10px; }
.mk-qa { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:8px; border:1px solid var(--line); background:#fff; box-shadow:0 0 0 1px var(--ring); font-size:12.5px; font-weight:500; color:var(--ink-2); transition: all .15s ease; }
.mk-qa:hover { background:var(--bg-soft); transform: translateY(-1px); }
.mk-qa [data-lucide] { width:14px; height:14px; color:var(--brand); }
.mk-chat-editor { position:relative; background:var(--bg-soft); border:1px solid var(--line); border-radius:14px; padding:12px 14px; transition: border-color .2s ease, box-shadow .2s ease; }
.mk-chat-editor:focus-within { border-color:var(--brand); box-shadow:0 0 0 4px var(--ring); }
.mk-chat-editor textarea { width:100%; border:0; outline:0; resize:none; background:transparent; font-family:var(--font-ui); font-size:15px; line-height:1.5; color:var(--ink); min-height:24px; }
.mk-chat-editor textarea::placeholder { color:var(--ink-4); }
.mk-chat-toolbar { display:flex; align-items:center; gap:8px; margin-top:8px; }
.mk-chat-tool { width:30px; height:30px; border-radius:8px; border:0; background:transparent; color:var(--ink-4); display:inline-flex; align-items:center; justify-content:center; }
.mk-chat-tool:hover { background:#fff; color:var(--ink-2); }
.mk-chat-tool [data-lucide] { width:16px; height:16px; }
.mk-chat-send { margin-left:auto; width:34px; height:34px; border-radius:10px; border:0; background:var(--brand); color:#fff; display:inline-flex; align-items:center; justify-content:center; }
.mk-chat-send:hover { background:var(--brand-2); }
.mk-chat-send [data-lucide] { width:17px; height:17px; color:#fff; }
.mk-thinking { color:var(--brand); font-size:13.5px; }

/* Auto-typing command ghost inside the input */
.mk-type { position:absolute; left:14px; top:12px; right:54px; pointer-events:none; color:var(--ink-4); font-size:15px; line-height:1.5; white-space:nowrap; overflow:hidden; }
.mk-type.hidden { display:none; }
.mk-caret { display:inline-block; width:1.5px; height:1.05em; background:var(--brand); margin-left:1px; vertical-align:-2px; animation: mk-blink 1.05s step-end infinite; }
@keyframes mk-blink { 50% { opacity:0; } }

/* ===== Footer-edge glow ===== */
/* Light emits from the footer's top border + the lower-left/right corners,
   ending exactly at the footer top (never under it). Reveals near page end. */
.mk-footer { position: relative; isolation: isolate; }
.mk-footer::before {
  content:''; position:absolute; left:0; right:0; bottom:100%; height:30vh;
  pointer-events:none; z-index:0; opacity:0; transition: opacity .6s ease;
  background:
    radial-gradient(40% 100% at 1% 100%, rgba(163,45,45,.70), transparent 60%),
    radial-gradient(40% 100% at 99% 100%, rgba(30,58,138,.80), transparent 60%),
    radial-gradient(62% 92% at 50% 100%, rgba(94,58,110,.52), transparent 62%);
  filter: blur(8px) saturate(122%);
  -webkit-mask: linear-gradient(to top, #000 0%, #000 6%, transparent 92%);
  mask: linear-gradient(to top, #000 0%, #000 6%, transparent 92%);
}
.mk-footer.is-lit::before { opacity: 1; }
.mk-footer::after {
  content:''; position:absolute; left:0; right:0; top:-1px; height:2px; z-index:1;
  background: linear-gradient(90deg, #A32D2D 0%, #5C2E55 50%, #1E3A8A 100%);
  opacity:0; transition: opacity .6s ease;
}
.mk-footer.is-lit::after { opacity: .9; }
@media (prefers-reduced-motion: reduce) { .mk-footer::before, .mk-footer::after { transition: none; } }
@keyframes mk-cta-water {
  0%   { background-position:   0% 0%, 100% 0%, 50% 100%; }
  25%  { background-position:  60% 100%, 10% 60%, 100% 10%; }
  50%  { background-position: 100% 40%, 50% 100%, 0% 60%; }
  75%  { background-position:  20% 90%, 100% 10%, 90% 100%; }
  100% { background-position:   0% 0%, 100% 0%, 50% 100%; }
}
@media (prefers-reduced-motion: reduce) { .mk-btn--premium { animation: none; } }
.mk-btn--secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.mk-btn--secondary:hover { background: var(--bg-soft); border-color: var(--ink-2); }
.mk-btn--amber { background: var(--amber); color: var(--amber-fg); border-color: var(--amber); font-weight:600; box-shadow: 0 10px 22px rgba(232,180,90,.30); }
.mk-btn--amber:hover { background: var(--amber-2); transform: translateY(-1px); }
.mk-login { padding: 8px 14px; font-size: 14px; font-weight: 500; color: var(--ink-2); border-radius: 8px; }
.mk-login:hover { background: var(--bg-soft); }

/* Hero */
.mk-hero { position: relative; padding: 72px 0 28px; overflow: hidden; }
.mk-hero::before { content:""; position:absolute; inset:-10% -10% auto -10%; height:70%; background: radial-gradient(50% 50% at 22% 28%, rgba(30,58,138,.10), transparent 60%), radial-gradient(60% 60% at 80% 8%, rgba(163,45,45,.07), transparent 60%); pointer-events:none; z-index:0; }
.mk-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .mk-hero-grid { grid-template-columns: 1fr; gap: 32px; } }
.mk-hero-tag { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; font-size:12px; font-weight:600; color: var(--brand); background: var(--brand-soft); border:1px solid color-mix(in srgb, var(--brand) 14%, transparent); padding:6px 12px; border-radius:8px; }
.mk-hero-tag [data-lucide] { width:14px; height:14px; }
.mk-hero h1 { margin: 18px 0; }
.mk-hero-sub { max-width: 520px; font-size: 18px; line-height: 1.55; color: var(--ink-3); margin-bottom: 28px; }
.mk-cta-row { display: inline-flex; gap: 12px; flex-wrap: wrap; }
.mk-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
.mk-stats b { font-family: var(--font-display); font-weight: 500; font-size: 30px; color: var(--ink); display: block; line-height: 1; }
.mk-stats span { font-size: 12px; font-weight: 600; color: var(--ink); display: block; margin: 8px 0 4px; }
.mk-stats p { font-size: 11.5px; line-height: 1.4; }

/* Hero chat preview */
.mk-hero-chat { background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 16px; display:flex; flex-direction:column; gap:12px; }
.mk-hero-chat-bubbles { display: flex; flex-direction: column; gap: 10px; }
.mk-cbubble { padding: 11px 14px; font-size: 13.5px; line-height: 1.5; border-radius: 14px; max-width: 88%; }
.mk-cbubble--user { background: var(--bg-soft); border:1px solid var(--line); color: var(--ink-2); margin-left:auto; border-bottom-right-radius: 5px; }
.mk-cbubble--ai { background: var(--brand-soft); border:1px solid color-mix(in srgb, var(--brand) 16%, transparent); color: var(--ink-2); font-family: var(--font-display); border-bottom-left-radius: 5px; }
.mk-cbubble-refs { display:flex; gap:6px; flex-wrap:wrap; margin-top:9px; }
.mk-cbubble-refs span { font-family: var(--font-ui); font-size:10.5px; font-weight:500; white-space:nowrap; padding:3px 8px; background: var(--paper); border:1px solid var(--line); border-radius:6px; color: var(--ink-3); }
.mk-hero-chat-editor { background: var(--bg); border:1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.mk-hero-chat-editor .ph { color: var(--ink-4); font-size: 14px; }
.mk-hero-chat-toolbar { display:flex; align-items:center; margin-top: 10px; }
.mk-hero-chat-submit { margin-left:auto; width:32px; height:32px; border-radius:10px; background: var(--brand); color:#fff; border:0; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 12px 24px rgba(30,58,138,.18); }

/* Features */
.mk-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 980px) { .mk-grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mk-grid-4 { grid-template-columns: 1fr; } }
.mk-card { background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; display:flex; flex-direction:column; gap:10px; transition: all .22s ease; }
.mk-card:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow-soft); }
.mk-card-icon { width:36px; height:36px; border-radius:10px; background: var(--brand-soft); color: var(--brand); display:inline-flex; align-items:center; justify-content:center; }
.mk-card h3 { margin-top: 4px; }
.mk-card p { font-size: 14px; line-height: 1.55; }

/* Pricing */
.mk-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 980px) { .mk-plans { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mk-plans { grid-template-columns: 1fr; } }
.mk-plan { position: relative; background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-xl); padding: 28px 24px; display:flex; flex-direction:column; gap:16px; transition: all .16s ease; }
.mk-plan:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow-lg); }
.mk-plan--featured { border: 1.5px solid var(--brand); box-shadow: 0 1px 2px rgba(30,58,138,.04), 0 24px 60px rgba(30,58,138,.10); }
.mk-plan-badge { position:absolute; top:-12px; left:50%; transform: translateX(-50%); font-size:10.5px; font-weight:700; letter-spacing:.10em; text-transform:uppercase; padding:6px 14px; border-radius:8px; background: var(--gradient-premium); color:#fff; white-space: nowrap; }
.mk-plan h3 { font-family: var(--font-display); font-size: 20px; font-weight: 500; }
.mk-plan-price { display: flex; align-items: baseline; gap: 6px; }
.mk-plan-price b { font-family: var(--font-display); font-size: 34px; font-weight: 500; color: var(--ink); }
.mk-plan-price span { font-size: 13px; color: var(--ink-3); }
.mk-plan > p { font-size: 13px; line-height: 1.5; }
.mk-plan ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.mk-plan li { display: flex; gap: 9px; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.mk-plan li [data-lucide] { color: var(--good); width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
.mk-btn--block { width: 100%; }

/* FAQ */
.mk-faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.mk-faq details { border:1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); padding: 4px 18px; }
.mk-faq summary { display:flex; align-items:center; justify-content:space-between; cursor:pointer; padding:14px 0; font-size:15px; font-weight:600; color: var(--ink); list-style:none; }
.mk-faq summary::-webkit-details-marker { display:none; }
.mk-faq summary span { font-size: 20px; color: var(--ink-3); font-weight: 400; transition: transform .2s ease; }
.mk-faq details[open] summary span { transform: rotate(45deg); }
.mk-faq p { font-size: 14px; line-height: 1.6; padding-bottom: 16px; }

/* Footer — brand + grouped public navigation. Columns on desktop, stacked and
   centered on mobile; the same links render on both. */
.mk-footer { border-top:0; padding: 56px 0 44px; background: #14225A; color: rgba(255,255,255,.70); text-align:left; }
.mk-footer-grid { display:flex; align-items:flex-start; justify-content:space-between; gap:48px; flex-wrap:wrap; }
.mk-footer-brand { display:flex; flex-direction:column; align-items:flex-start; }
.mk-footer .mk-brand { color:#fff; font-size:80px; }
.mk-footer-brand p { font-size: 13px; line-height:1.55; max-width: 330px; margin-top: 12px; color: rgba(255,255,255,.62); }
.mk-footer-nav { display:flex; gap:72px; flex-wrap:wrap; align-items:flex-start; justify-content:flex-end; }
.mk-footer-section { display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.mk-footer-section h2 { margin:0; font-family:var(--font-ui); font-size:12px; line-height:1.25; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#9FB4E8; }
.mk-footer-section a { max-width:min(100%, 360px); font-size:14px; line-height:1.3; font-weight:500; color: rgba(255,255,255,.64); overflow-wrap:anywhere; }
.mk-footer-section a:hover { color:#fff; }
.mk-footer-legal { border-top:1px solid rgba(255,255,255,.12); margin-top: 40px; padding-top: 22px; font-size: 12px; line-height:1.55; color: rgba(255,255,255,.50); text-align:center; }
@media (max-width: 860px) {
  .mk-footer { padding: 68px 0 48px; background:#14225A; color:rgba(255,255,255,.74); text-align:center; }
  .mk-footer-grid { flex-direction:column; align-items:center; justify-content:flex-start; gap:44px; }
  .mk-footer-brand { align-items:center; }
  .mk-footer .mk-brand { font-size:42px; }
  .mk-footer-brand p { font-size:14px; max-width:360px; margin-top:14px; color:rgba(255,255,255,.66); }
  .mk-footer-nav { flex-direction:column; align-items:center; justify-content:flex-start; gap:48px; }
  .mk-footer-section { align-items:center; gap:22px; }
  .mk-footer-section h2 { font-size:18px; letter-spacing:0; text-transform:none; color:#9FB4E8; }
  .mk-footer-section a { font-size:22px; color:rgba(255,255,255,.72); }
  .mk-footer-section a:hover { color:#fff; }
  .mk-footer-legal { border-top-color:rgba(255,255,255,.12); margin-top:42px; padding-top:24px; color:rgba(255,255,255,.52); }
}

/* ===== Background zones (landing): indigo → white → indigo ===== */
.mk--landing .mk-hero { background: transparent; padding-top: 40px; }
.mk--landing .mk-hero-center h1 { color: var(--ink); }
.mk--landing .mk-hero-center .mk-hero-sub { color: rgba(255,255,255,.80); }
.mk--landing .mk-hero-tag { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.24); color:#EAF0FF; }
.mk--landing .mk-hero-tag [data-lucide] { color:#fff; }
.mk-zone-fade { height: 200px; background: linear-gradient(180deg, #FFFFFF 0%, #2A4496 70%, #14225A 100%); position:relative; z-index:1; }

/* Scroll-driven dark→light background layer (JS interpolates its color) */
.mk--landing #mk-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: #12205A; }
.mk--landing .mk-nav, .mk--landing main, .mk--landing .mk-footer { position: relative; z-index: 1; }
/* NB: .mk-signup is intentionally excluded — it must keep position:fixed/z-index:200
   (from .mk-signup below) so the sign-up gate is a full-page blurred overlay, not an
   in-flow box at the bottom of the page. */
.mk--landing main { z-index: 1; }
.mk--landing .mk-section--alt { background: color-mix(in srgb, var(--bg-soft) 70%, transparent); }

/* Nav adapts: solid indigo on the dark hero (logo white + top stays indigo),
   solid white once scrolled into the light zone. */
.mk--landing .mk-nav { background: #12205A; border-bottom-color: rgba(255,255,255,.14); }
.mk--landing .mk-nav .mk-brand { color:#fff; transition: color .25s ease; }
.mk--landing .mk-nav-links a, .mk--landing .mk-login { color: rgba(255,255,255,.84); }
.mk--landing .mk-nav-links a:hover, .mk--landing .mk-login:hover { background: rgba(255,255,255,.12); color:#fff; }
.mk--landing .mk-nav.scrolled { background: color-mix(in srgb, #fff 92%, transparent); border-bottom-color: var(--line); }
.mk--landing .mk-nav.scrolled .mk-brand { color:#1E3A8A !important; }
.mk--landing .mk-nav.scrolled .mk-nav-links a, .mk--landing .mk-nav.scrolled .mk-login { color: var(--ink-2) !important; }
.mk--landing .mk-nav.scrolled .mk-nav-links a:hover, .mk--landing .mk-nav.scrolled .mk-login:hover { background: var(--bg-soft); color: var(--ink) !important; }

/* ===== Composer pills (bottom of the text box) + dropdowns ===== */
.mk-composer-bottom { display:flex; align-items:center; gap:8px; margin-top:10px; }
.mk-pills { display:flex; gap:6px; flex-wrap:wrap; }
.mk-pill { position:relative; display:inline-flex; align-items:center; gap:6px; padding:6px 10px 6px 11px; border-radius:8px; border:1px solid var(--line); background:#fff; font-size:12.5px; font-weight:500; color:var(--ink-2); transition: all .14s ease; }
.mk-pill:hover { background:var(--bg-soft); }
.mk-pill [data-lucide] { width:14px; height:14px; color:var(--brand); }
.mk-pill .chev { width:13px; height:13px; color:var(--ink-4); transition: transform .18s ease; }
.mk-pill.open { border-color:var(--brand); background:var(--brand-soft); color:var(--brand); }
.mk-pill.open .chev { transform: rotate(180deg); }
.mk-menu { position:absolute; left:0; bottom:calc(100% + 6px); min-width:240px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg); padding:6px; z-index:40; display:none; }
.mk-menu.open { display:block; }
.mk-menu-label { font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-4); padding:6px 10px 4px; }
.mk-menu button { display:flex; width:100%; align-items:center; text-align:left; gap:8px; padding:8px 10px; border:0; background:transparent; border-radius:8px; font-size:13px; color:var(--ink-2); }
.mk-menu button:hover { background:var(--bg-soft); color:var(--ink); }
.mk-menu button [data-lucide] { width:14px; height:14px; color:var(--ink-4); }

/* ===== Sign-up gate (blurred background) ===== */
.mk-signup { position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:20px; }
.mk-signup.open { display:flex; }
.mk-signup-backdrop { position:absolute; inset:0; background: rgba(15,17,21,.30); backdrop-filter: blur(9px) saturate(118%); -webkit-backdrop-filter: blur(9px) saturate(118%); }
.mk-signup-card { position:relative; width:min(430px,94vw); background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-lg); padding:30px 28px 26px; text-align:center; }
.mk-signup-card .mk-brand { font-size:40px; display:inline-block; margin-bottom:8px; }
.mk-signup-card h3 { font-family:var(--font-ui); font-size:19px; font-weight:600; color:var(--ink); margin:0 0 6px; }
.mk-signup-card p { font-size:14px; line-height:1.55; margin:0 auto 18px; max-width:320px; }
.mk-signup-field { width:100%; height:42px; border-radius:10px; border:1px solid var(--line); background:var(--bg-soft); padding:0 14px; font-family:var(--font-ui); font-size:14px; color:var(--ink); margin-bottom:10px; }
.mk-signup-field:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--ring); }
.mk-signup-later { margin-top:12px; background:transparent; border:0; color:var(--ink-3); font-size:13px; }
.mk-signup-later:hover { color:var(--ink); text-decoration:underline; }
.mk-signup-meta { margin-top:14px; font-size:11.5px; color:var(--ink-4); }

/* ===== Page hero (pricing / security) ===== */
.mk-page-hero { text-align:center; padding: 64px 0 8px; }
.mk-page-hero h1 { margin: 14px auto 14px; max-width: 760px; font-family: var(--font-brand); font-weight: 500; letter-spacing: -.01em; }
.mk-page-hero p { max-width: 600px; margin: 0 auto; font-size: 17px; line-height: 1.6; }
.mk-sec-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
@media (max-width: 900px){ .mk-sec-grid { grid-template-columns:1fr 1fr; } }
@media (max-width: 600px){ .mk-sec-grid { grid-template-columns:1fr; } }
.mk-sec-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px; display:flex; flex-direction:column; gap:9px; }
.mk-sec-card-icon { width:36px; height:36px; border-radius:10px; background:var(--brand-soft); color:var(--brand); display:inline-flex; align-items:center; justify-content:center; }
.mk-sec-card h3 { margin-top:2px; }
.mk-sec-card p { font-size:13.5px; line-height:1.55; }
.mk-badge-row { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:8px; }
.mk-cert { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border:1px solid var(--line); border-radius:10px; background:var(--paper); font-size:13px; font-weight:600; color:var(--ink-2); }
.mk-cert [data-lucide] { width:15px; height:15px; color:var(--good); }

/* Dark CTA band — cohesive dark close for pricing / security pages */
.mk-cta-dark { background:#14225A; padding:76px 0; text-align:center; }
.mk-cta-dark h2 { color:#fff; max-width:680px; margin:0 auto 14px; }
.mk-cta-dark p { color:rgba(255,255,255,.72); max-width:520px; margin:0 auto 26px; }
.mk-cta-dark .mk-btn--secondary { color:#fff; border-color:rgba(255,255,255,.42); }
.mk-cta-dark .mk-btn--secondary:hover { background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.6); }

/* Plan comparison table — large, prominent */
.mk-compare { width:100%; border:1px solid var(--line); border-radius:var(--radius-xl); overflow:hidden; background:var(--paper); box-shadow:var(--shadow); }
.mk-compare-row { display:grid; grid-template-columns: 2.4fr repeat(4,1fr); align-items:center; }
.mk-compare-row + .mk-compare-row { border-top:1px solid var(--line); }
.mk-compare-head { background:var(--bg-soft); }
.mk-compare-cell { padding:20px 22px; font-size:15px; color:var(--ink-2); text-align:center; }
.mk-compare-cell:first-child { text-align:left; color:var(--ink); font-weight:500; }
.mk-compare-head { position:sticky; top:0; }
.mk-compare-head .mk-compare-cell { font-family:var(--font-display); font-size:20px; font-weight:600; color:var(--ink); padding-top:24px; padding-bottom:24px; }
.mk-compare-head .mk-compare-cell.feat { font-family:var(--font-ui); color:var(--ink-3); font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.mk-compare-head .mk-compare-cell small { display:block; font-family:var(--font-ui); font-size:13px; font-weight:500; color:var(--ink-3); margin-top:2px; }
.mk-compare-cell [data-lucide] { color:var(--good); width:19px; height:19px; }
.mk-compare-muted { color:var(--ink-4); }
.mk-compare-wrap { max-width:780px; margin:0 auto; }
@media (max-width:820px){ .mk-compare-wrap { overflow-x:auto; } .mk-compare { min-width:680px; } }

/* ============================================================
   HERO SCROLL DEMO — pinned: case fills → processing → note writes → quiz
   ============================================================ */
.mk-demo { display:flex; justify-content:center; align-items:flex-start; gap:0; margin:0 auto; width:100%; max-width:1080px; }
.mk-hero[data-demo="note"] .mk-demo, .mk-hero[data-demo="ready"] .mk-demo { gap:28px; }
.mk-demo-left { flex:0 0 560px; max-width:560px; min-width:0; }
.mk-search { max-width:560px; margin:0 auto; position:relative; }
@media (max-width:920px){ .mk-demo { flex-direction:column; max-width:560px; gap:24px; } .mk-demo-left{ flex:1 1 auto; } }
.mk-demo-right { display:none; flex:1 1 auto; min-width:0; flex-direction:column; text-align:left; }
.mk-note { width:100%; }
.mk-hero[data-demo="note"] .mk-demo-right, .mk-hero[data-demo="ready"] .mk-demo-right { display:flex; animation: mk-fade-up .55s cubic-bezier(.4,0,.2,1) both; }
.mk-hero[data-demo="note"] .mk-hero-center, .mk-hero[data-demo="ready"] .mk-hero-center { max-width:1140px; }
@media (max-width:920px){ .mk-demo-right { width:auto; } }

/* Processing indicator inside the search box */
.mk-processing { display:none; align-items:center; gap:10px; margin-top:10px; font-size:13px; color:var(--brand); }
.mk-hero[data-demo="proc"] .mk-processing, .mk-hero.swapping .mk-processing { display:flex; }
.mk-proc-dots { display:inline-flex; gap:4px; }
.mk-proc-dots i { width:6px; height:6px; border-radius:999px; background:var(--brand); opacity:.4; animation: mk-proc 1.1s ease-in-out infinite; }
.mk-proc-dots i:nth-child(2){ animation-delay:.15s; } .mk-proc-dots i:nth-child(3){ animation-delay:.3s; }
@keyframes mk-proc { 0%,100%{ opacity:.3; transform:translateY(0);} 50%{ opacity:1; transform:translateY(-3px);} }

/* Clinical note — styled like a note editor */
.mk-note { background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); overflow:hidden; text-align:left; }
.mk-note-toolbar { display:flex; align-items:center; justify-content:space-between; padding:11px 16px; border-bottom:1px solid var(--line); }
.mk-note-doc { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--ink); }
.mk-note-doc [data-lucide] { width:15px; height:15px; color:var(--brand); }
.mk-note-saved { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--good); font-weight:500; }
.mk-note-saved [data-lucide] { width:13px; height:13px; }
.mk-note-format { display:flex; align-items:center; gap:3px; padding:7px 12px; border-bottom:1px solid var(--line); background:var(--bg-soft); }
.mk-note-format button { width:28px; height:28px; border-radius:7px; border:0; background:transparent; color:var(--ink-3); display:inline-flex; align-items:center; justify-content:center; cursor:default; }
.mk-note-format button:hover { background:#fff; color:var(--ink); box-shadow:0 0 0 1px var(--line); }
.mk-note-format button [data-lucide] { width:15px; height:15px; }
.mk-note-format .sep { width:1px; height:18px; background:var(--line); margin:0 5px; }
.mk-note-ai { margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:600; color:var(--brand); }
.mk-note-ai [data-lucide] { width:13px; height:13px; }
.mk-note-body { padding:20px 24px 24px; height:360px; overflow-y:auto; }
.mk-note-sec { margin-bottom:15px; }
.mk-note-sec:last-child { margin-bottom:0; }
.mk-note-label { display:block; font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:3px; }
.mk-note-text { display:block; white-space:pre-line; font-size:13.5px; line-height:1.65; color:var(--ink-2); }
.mk-note-text b { color:var(--ink); }
/* line reveal — transition-based so it runs reliably after the panel shows */
.mk-note .rv { opacity:0; transform:translateY(8px); transition: opacity .5s ease, transform .5s ease; }
.mk-note.writing .rv { opacity:1; transform:none; }

/* Test-me button — appears (right of note) only once the note finishes, with a stronger continuous glimmer */
.mk-testme { margin-top:16px; align-self:flex-end; display:none; }
.mk-hero[data-demo="ready"]:not(.swapping) .mk-testme { display:inline-flex; }
.mk-testme::before { opacity:1 !important; animation: mk-cta-spin 3.4s linear infinite !important; }

/* Board-question modal */
.mk-board { position:fixed; inset:0; z-index:210; display:none; align-items:center; justify-content:center; padding:20px; }
.mk-board.open { display:flex; }
.mk-board-backdrop { position:absolute; inset:0; background:rgba(15,17,21,.34); backdrop-filter:blur(9px) saturate(118%); -webkit-backdrop-filter:blur(9px) saturate(118%); }
.mk-board-card { position:relative; width:min(620px,95vw); max-height:88vh; overflow-y:auto; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-lg); }
.mk-board-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line); background:var(--bg-soft); }
.mk-board-tag { display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--brand); }
.mk-board-close { width:30px; height:30px; border-radius:8px; border:0; background:transparent; color:var(--ink-3); display:inline-flex; align-items:center; justify-content:center; }
.mk-board-close:hover { background:var(--paper); color:var(--ink); }
.mk-board-body { padding:18px 20px 20px; }
.mk-board-stem { font-size:14px; line-height:1.65; color:var(--ink-1,var(--ink)); }
.mk-board-lead { font-weight:600; color:var(--ink); margin-top:12px; }
.mk-board-opts { display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.mk-board-opt { display:flex; align-items:flex-start; gap:11px; padding:11px 14px; border:1px solid var(--line); border-radius:12px; background:#fff; text-align:left; width:100%; font-size:13.5px; line-height:1.45; color:var(--ink-2); transition:all .14s ease; }
.mk-board-opt:hover:not(:disabled) { background:var(--bg-soft); border-color:var(--line-strong); }
.mk-board-lt { width:24px; height:24px; flex-shrink:0; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; border:1px solid var(--line-strong); background:var(--bg-soft); color:var(--ink-3); }
.mk-board-opt.sel { border-color:var(--brand); background:var(--brand-soft); }
.mk-board-opt.sel .mk-board-lt { background:var(--brand); border-color:var(--brand); color:#fff; }
.mk-board-opt.correct { border-color:#9AC9AE; background:#E6F2EB; color:#1f5e3c; }
.mk-board-opt.correct .mk-board-lt { background:var(--good); border-color:var(--good); color:#fff; }
.mk-board-opt.wrong { border-color:#E0B4AC; background:#FBECE8; color:#7a2420; }
.mk-board-opt.wrong .mk-board-lt { background:#A32D2D; border-color:#A32D2D; color:#fff; }
.mk-board-submit { margin-top:14px; }
.mk-board-explain { margin-top:16px; border-top:1px solid var(--line); padding-top:14px; }
.mk-board-verdict { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; margin-bottom:10px; }
.mk-board-verdict.ok { color:var(--good); } .mk-board-verdict.no { color:#A32D2D; }
.mk-board-explain p { font-size:13px; line-height:1.6; color:var(--ink-2); margin-bottom:10px; }
.mk-board-refs { display:flex; gap:6px; flex-wrap:wrap; }
.mk-board-refs span { font-size:10.5px; font-weight:500; padding:3px 8px; background:var(--bg-soft); border:1px solid var(--line); border-radius:6px; color:var(--ink-3); }
.mk-demo-hint { margin-top:14px; font-size:12px; color:var(--ink-4); display:flex; align-items:center; justify-content:center; gap:6px; transition:opacity .4s ease; }
.mk-hero[data-demo="proc"] .mk-demo-hint, .mk-hero[data-demo="note"] .mk-demo-hint { opacity:0; }

/* Inline quiz (below the hero) + generating animation */
.mk-quiz { display:none; position:relative; z-index:1; padding:0 0 48px; }
.mk-quiz.show { display:block; }
.mk-quiz-card { max-width:680px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-lg); overflow:hidden; animation: mk-fade-up .55s cubic-bezier(.4,0,.2,1) both; transition: max-width .6s cubic-bezier(.4,0,.2,1); }
@keyframes mk-fade-up { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
.mk-quiz-card.answered { width:960px; max-width:94vw; }
.mk-quiz-card.answered .mk-board-body { display:grid; grid-template-columns: 1fr 0.82fr; gap:24px; align-items:start; }
@media (max-width:760px){ .mk-quiz-card.answered .mk-board-body { grid-template-columns:1fr; } }
.mk-quiz-side { animation: mk-fade-up .5s cubic-bezier(.4,0,.2,1) both; }
.mk-quiz-stats { background:var(--bg-soft); border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin-top:14px; }
.mk-quiz-stats h4 { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-4); margin:0 0 14px; display:flex; align-items:center; gap:7px; }
.mk-quiz-stats h4 [data-lucide] { width:14px; height:14px; color:var(--brand); }
.mk-stat-big { display:flex; align-items:baseline; gap:8px; margin-bottom:16px; }
.mk-stat-big b { font-family:var(--font-display); font-size:36px; font-weight:600; color:var(--brand); line-height:1; }
.mk-stat-big span { font-size:12.5px; color:var(--ink-3); }
.mk-stat { margin-bottom:13px; }
.mk-stat:last-child { margin-bottom:0; }
.mk-stat-row { display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-2); margin-bottom:5px; }
.mk-stat-row b { color:var(--ink); font-weight:600; }
.mk-bar { height:8px; border-radius:999px; background:var(--line); overflow:hidden; }
.mk-bar i { display:block; height:100%; width:0; border-radius:999px; background:var(--brand); transition: width 1.1s cubic-bezier(.4,0,.2,1); }
.mk-bar i.good { background:var(--good); }
.mk-bar i.amber { background:#D69E3F; }

/* ===== Batch-2 showcase sections ===== */
.mk-split2 { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.mk-split2--text-only { grid-template-columns:minmax(0, 760px); justify-content:center; }
.mk-split2--text-only > div { max-width:760px; }
@media (max-width:900px){ .mk-split2 { grid-template-columns:1fr; gap:32px; } }
.mk-flist { list-style:none; padding:0; margin:18px 0 24px; display:flex; flex-direction:column; gap:15px; }
.mk-flist li { display:flex; gap:12px; }
.mk-flist .ic { width:30px; height:30px; border-radius:8px; background:var(--brand-soft); color:var(--brand); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.mk-flist .ic [data-lucide] { width:16px; height:16px; }
.mk-flist b { color:var(--ink); }
.mk-flist p { font-size:13.5px; line-height:1.5; margin-top:2px; }
.mk-accent { color:var(--brand); }

/* Tutor + AI mock */
.mk-tutor { background:var(--paper); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-lg); padding:14px; }
.mk-tutor-video { position:relative; border-radius:14px; overflow:hidden; background:linear-gradient(135deg,#2E4399,#14225A); min-height:188px; display:flex; align-items:flex-end; gap:8px; padding:14px; }
.mk-tutor-video .badge { position:absolute; top:12px; right:12px; background:rgba(255,255,255,.92); color:#A32D2D; font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:999px; display:inline-flex; align-items:center; gap:5px; }
.mk-tutor-video .badge::before { content:''; width:6px; height:6px; border-radius:999px; background:#A32D2D; }
.mk-tutor-chip { background:rgba(255,255,255,.92); border-radius:8px; padding:6px 10px; font-size:11.5px; font-weight:600; color:var(--ink); display:inline-flex; gap:6px; align-items:center; }
.mk-tutor-chip [data-lucide] { width:13px; height:13px; color:var(--brand); }
.mk-tutor-ai { margin-top:12px; background:#0E1B4D; border-radius:14px; padding:14px; }
.mk-tutor-ai-head { color:#fff; font-size:13px; font-weight:600; display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.mk-tutor-ai-head [data-lucide] { width:15px; height:15px; color:#9FB4E8; }
.mk-tutor-ai-chips { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.mk-tutor-ai-chips span { font-size:10.5px; background:rgba(255,255,255,.12); color:rgba(255,255,255,.85); border-radius:999px; padding:4px 9px; }
.mk-tutor-ai-input { background:rgba(255,255,255,.1); border-radius:10px; padding:9px 12px; display:flex; align-items:center; justify-content:space-between; color:rgba(255,255,255,.55); font-size:12.5px; }
.mk-tutor-ai-send { width:26px; height:26px; border-radius:7px; background:#fff; color:#1E3A8A; display:inline-flex; align-items:center; justify-content:center; }
.mk-tutor-ai-send [data-lucide] { width:14px; height:14px; }

/* Question showcase card */
.mk-qshow { background:var(--paper); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-lg); padding:22px; }
.mk-qshow-q { font-size:13.5px; line-height:1.6; color:var(--ink-2); margin-bottom:14px; }
.mk-qshow-opt { display:flex; align-items:center; gap:10px; padding:11px 14px; border:1px solid var(--line); border-radius:10px; font-size:13px; color:var(--ink-2); margin-bottom:8px; }
.mk-qshow-opt.wrong { border-color:#E0B4AC; background:#FBECE8; color:#7a2420; }
.mk-qshow-pop { border:1px solid #9AC9AE; border-radius:12px; padding:13px 14px; background:#fff; box-shadow:var(--shadow-soft); margin-top:4px; }
.mk-qshow-pop b { font-size:12px; color:var(--good); display:block; margin-bottom:8px; }
.mk-qshow-pop .ln { height:7px; border-radius:5px; background:var(--bg-soft); margin-top:7px; }
.mk-qshow-pop .ln:nth-child(3){ width:82%; } .mk-qshow-pop .ln:nth-child(4){ width:64%; }
.mk-quiz-gen { padding:44px 26px; text-align:center; }
.mk-quiz-gen-icon { width:44px; height:44px; border-radius:12px; background:var(--brand-soft); color:var(--brand); display:inline-flex; align-items:center; justify-content:center; margin-bottom:14px; animation: mk-genpulse 1.4s ease-in-out infinite; }
@keyframes mk-genpulse { 0%,100%{ transform:scale(1); opacity:.85; } 50%{ transform:scale(1.08); opacity:1; } }
.mk-quiz-gen-label { font-size:14px; font-weight:600; color:var(--ink); display:inline-flex; align-items:center; gap:8px; }
.mk-quiz-gen-dots { display:inline-flex; gap:4px; }
.mk-quiz-gen-dots i { width:5px; height:5px; border-radius:999px; background:var(--brand); opacity:.4; animation: mk-proc 1.1s ease-in-out infinite; }
.mk-quiz-gen-dots i:nth-child(2){ animation-delay:.15s; } .mk-quiz-gen-dots i:nth-child(3){ animation-delay:.3s; }
.mk-quiz-skel { margin:22px auto 0; max-width:460px; display:flex; flex-direction:column; gap:10px; }
.mk-quiz-skel span { height:11px; border-radius:6px; background:linear-gradient(90deg, var(--bg-soft) 0%, #ECEEF1 50%, var(--bg-soft) 100%); background-size:200% 100%; animation: mk-shimmer 1.3s linear infinite; }
.mk-quiz-skel span:nth-child(2){ width:88%; } .mk-quiz-skel span:nth-child(3){ width:72%; }
@keyframes mk-shimmer { 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

/* ===== Vera-style hero search (dark hero) ===== */
.mk-hero-title { font-family:var(--font-display); font-weight:600; line-height:1.05; margin:0 auto 26px; max-width:780px; display:flex; flex-direction:column; gap:8px; align-items:center; }
.mk-hero-title .l1, .mk-hero-title .l2 { font-size:clamp(32px,4.8vw,54px); color:#fff; }
.mk-hero-title .hl { font-style:italic; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:14px; padding:2px 18px; color:#EAF0FF; }
.mk-search { max-width:660px; margin:0 auto; position: relative; }
.mk-search-box { position:relative; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.18); border-radius:16px; padding:16px 16px 52px; text-align:left; transition:border-color .2s ease, box-shadow .2s ease; }
.mk-search-box:focus-within { border-color:rgba(255,255,255,.42); box-shadow:0 0 0 4px rgba(255,255,255,.06); }
.mk-search-box textarea { width:100%; border:0; outline:0; resize:none; background:transparent; font-family:var(--font-ui); font-size:16px; line-height:1.5; color:#fff; min-height:26px; max-height:200px; overflow-y:auto; }
.mk-search .mk-type { left:16px; top:16px; right:96px; color:rgba(255,255,255,.46); font-size:16px; }
.mk-search .mk-caret { background:rgba(255,255,255,.72); }
.mk-search-actions { position:absolute; right:13px; bottom:11px; display:flex; align-items:center; gap:8px; }
.mk-search-tool { width:34px; height:34px; border-radius:10px; border:0; background:transparent; color:rgba(255,255,255,.6); display:inline-flex; align-items:center; justify-content:center; }
.mk-search-tool:hover { background:rgba(255,255,255,.08); color:#fff; }
.mk-search-tool [data-lucide] { width:18px; height:18px; }
.mk-search-send { width:34px; height:34px; border-radius:999px; border:0; background:#fff; color:#12205A; display:inline-flex; align-items:center; justify-content:center; }
.mk-search-send:hover { background:#EAF0FF; }
.mk-search-send [data-lucide] { width:17px; height:17px; color:#12205A; }
/* pills below the box */
.mk-hero .mk-pills { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:16px; }
.mk-hero .mk-pill { position:static; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.88); border-radius:10px; padding:8px 13px; font-size:13px; font-weight:500; display:inline-flex; align-items:center; gap:7px; transition:all .14s ease; }
.mk-hero .mk-pill:hover { background:rgba(255,255,255,.12); }
.mk-hero .mk-pill [data-lucide] { width:14px; height:14px; color:rgba(255,255,255,.7); }
.mk-hero .mk-pill.open { background:#fff; color:#12205A; border-color:#fff; }
.mk-hero .mk-pill.open [data-lucide] { color:#12205A; }
/* suggestion list under the box */
.mk-suggest { position:absolute; left:0; right:0; top:100%; z-index:20; margin-top:12px; display:none; flex-direction:column; gap:1px; text-align:left; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:8px; }
.mk-suggest.open { display:flex; }
.mk-suggest button { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; text-align:left; background:transparent; border:0; border-radius:10px; padding:11px 12px; color:rgba(255,255,255,.82); font-size:13.5px; line-height:1.4; transition:background .14s ease, color .14s ease; }
.mk-suggest button:hover { background:rgba(255,255,255,.08); color:#fff; }
.mk-suggest button [data-lucide] { width:15px; height:15px; color:rgba(255,255,255,.45); flex-shrink:0; }
.mk-suggest .lead { color:#9FB4E8; font-weight:600; }
.mk-partner { margin-top:42px; text-align:center; color:rgba(255,255,255,.5); font-size:12.5px; }

/* Mission band under the hero */
.mk-mission { padding: 4px 0 68px; text-align:center; position:relative; z-index:1; }
.mk-mission p { max-width: 820px; margin:0 auto; font-family: var(--font-brand); font-style: italic; font-size: clamp(20px,2.4vw,28px); line-height:1.4; font-weight:500; color:var(--ink-2); letter-spacing:-0.005em; }

/* ============================================================
   LANDING v2 — light top → dark bottom
   ============================================================ */
.mk--landing #mk-bg { background:#FFFFFF; }
.mk--landing .mk-hero-pin { position: relative; z-index: 1; height: 175vh; }
.mk--landing .mk-hero { background: transparent; position: sticky; top: 0; min-height: 100vh; display:flex; align-items:center; padding: 40px 0 32px; }
.mk--landing .mk-hero::before {
  content:''; position:absolute; inset:-15% -12% auto -12%; height:130%;
  background:
    radial-gradient(40% 52% at 24% 26%, rgba(30,58,138,.08), transparent 60%),
    radial-gradient(36% 46% at 78% 20%, rgba(163,45,45,.05), transparent 60%),
    radial-gradient(44% 50% at 60% 70%, rgba(94,58,110,.05), transparent 62%);
  pointer-events:none; z-index:0;
  animation: mk-clouds 30s ease-in-out infinite alternate;
}
@keyframes mk-clouds {
  0%   { transform: translate3d(-3%, 0, 0) scale(1); }
  50%  { transform: translate3d(2%, 1.5%, 0) scale(1.05); }
  100% { transform: translate3d(4%, -1%, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .mk--landing .mk-hero::before { animation: none; } }
.mk-hero-center { z-index:1; }

/* Fraunces cycling hero title */
.mk .mk-hero-h { font-family: var(--font-brand); font-weight:500; font-size: clamp(34px,5vw,60px); line-height:1.1; letter-spacing:-0.01em; color: var(--ink); max-width:900px; margin:0 auto 30px; text-align:center; }
.mk-hero-headline-line { display:inline-flex; align-items:baseline; justify-content:center; gap:.18em; max-width:100%; white-space:nowrap; transform:translateX(clamp(46px,5.7vw,78px)); }
.mk-hero-headline-fixed { flex:0 0 auto; }
.mk-cycle { color:#1E3A8A; font-style: italic; display:inline-block; flex:0 0 6.8ch; width:6.8ch; min-width:6.8ch; text-align:left; transition: opacity .28s ease, transform .28s ease; will-change: opacity, transform; }
.mk-cycle.swap { opacity:0; transform: translateY(8px); }
@media (max-width: 420px) {
  .mk .mk-hero-h { font-size: clamp(30px,8.8vw,60px); }
  .mk-hero-headline-line { gap:.12em; transform:translateX(clamp(19px,5.4vw,36px)); }
  .mk-cycle { flex-basis:6.4ch; width:6.4ch; min-width:6.4ch; }
}

/* Hero search box — LIGHT */
.mk-search-box { background:#fff; border:1px solid var(--line); box-shadow: var(--shadow-soft); }
.mk-search-box:focus-within { border-color: var(--brand); box-shadow:0 0 0 4px var(--ring); }
.mk-search-box textarea { color: var(--ink); }
.mk-search .mk-type { color: var(--ink-4); }
.mk-search .mk-caret { background: var(--brand); }
.mk-search-tool { color: var(--ink-4); }
.mk-search-tool:hover { background: var(--bg-soft); color: var(--ink-2); }
.mk-search-send { background: var(--brand); color:#fff; }
.mk-search-send [data-lucide] { color:#fff; }
.mk-search-send:hover { background: var(--brand-2); }
.mk-search-send:disabled,
.mk-search-send[aria-disabled="true"],
.mk-search-send.is-disabled {
  background:#E5E7EB;
  color:var(--ink-4);
  cursor:not-allowed;
  box-shadow:none;
  opacity:1;
}
.mk-search-send:disabled:hover,
.mk-search-send[aria-disabled="true"]:hover,
.mk-search-send.is-disabled:hover {
  background:#E5E7EB;
}
.mk-search-send:disabled [data-lucide],
.mk-search-send[aria-disabled="true"] [data-lucide],
.mk-search-send.is-disabled [data-lucide] {
  color:var(--ink-4);
}
.mk-hero .mk-pill { background:#fff; border:1px solid var(--line); color: var(--ink-2); box-shadow:0 0 0 1px var(--ring); }
.mk-hero .mk-pill:hover { background: var(--bg-soft); }
.mk-hero .mk-pill [data-lucide] { color: var(--brand); }
.mk-hero .mk-pill.open { background: var(--brand); color:#fff; border-color: var(--brand); box-shadow:none; }
.mk-hero .mk-pill.open [data-lucide] { color:#fff; }
.mk-suggest { background:#fff; border:1px solid var(--line); box-shadow: var(--shadow-soft); }
.mk-suggest button { color: var(--ink-2); }
.mk-suggest button:hover { background: var(--bg-soft); color: var(--ink); }
.mk-suggest button [data-lucide] { color: var(--ink-4); }
.mk-suggest .lead { color: var(--brand); }
.mk-partner { color: var(--ink-4); }

/* Nav: light at top, dark once in the dark zone */
.mk--landing .mk-nav { background: color-mix(in srgb,#fff 88%, transparent); border-bottom-color: var(--line); }
.mk--landing .mk-nav .mk-brand { color:#1E3A8A !important; transition: color .25s ease; }
.mk--landing .mk-nav-links a, .mk--landing .mk-login { color: var(--ink-2) !important; }
.mk--landing .mk-nav-links a:hover, .mk--landing .mk-login:hover { background: var(--bg-soft); }
.mk--landing.is-dark .mk-nav { background: rgba(18,32,90,.74); backdrop-filter: blur(16px) saturate(160%); border-bottom-color: rgba(255,255,255,.12); }
.mk--landing.is-dark .mk-nav .mk-brand { color:#fff !important; }
.mk--landing.is-dark .mk-nav-links a, .mk--landing.is-dark .mk-login { color: rgba(255,255,255,.85) !important; }
.mk--landing.is-dark .mk-nav-links a:hover, .mk--landing.is-dark .mk-login:hover { background: rgba(255,255,255,.12); }

/* Dark zone (last ~quarter) — light text on the dark fixed bg */
.mk-darkzone { position: relative; z-index:1; }
.mk--landing.is-dark h1, .mk--landing.is-dark h2, .mk--landing.is-dark h3 { color:#fff; }
.mk--landing.is-dark p { color: rgba(255,255,255,.74); }
.mk--landing.is-dark .mk-eyebrow { color: rgba(255,255,255,.62); }
.mk--landing.is-dark .mk-eyebrow [data-lucide] { color:#9FB4E8; }
.mk--landing.is-dark .mk-sec-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.mk--landing.is-dark .mk-sec-card p { color: rgba(255,255,255,.72); }
.mk--landing.is-dark .mk-sec-card-icon { background: rgba(255,255,255,.10); color:#fff; }
.mk--landing.is-dark .mk-cert { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color:#fff; }
.mk--landing.is-dark .mk-btn--secondary { color:#fff; border-color: rgba(255,255,255,.42); }
.mk--landing.is-dark .mk-btn--secondary:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.6); }

/* Footer: plain dark mode (no gradient / glow) */
.mk-footer::before, .mk-footer::after { display:none !important; }

/* Evidence showcase (light) */
.mk-evidence { display:grid; grid-template-columns: 0.9fr 1.1fr; gap:44px; align-items:center; }
@media (max-width: 900px){ .mk-evidence { grid-template-columns:1fr; gap:28px; } }
.mk-evidence-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); padding:18px; }
.mk-evidence-q { font-size:13.5px; color:var(--ink-3); background:var(--bg-soft); border:1px solid var(--line); border-radius:12px; padding:11px 14px; margin-bottom:10px; }
.mk-evidence-a { font-family:var(--font-ui); font-size:14px; line-height:1.6; color:var(--ink-2); }
.mk-evidence-refs { display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; }
.mk-evidence-refs span { font-size:10.5px; font-weight:500; white-space:nowrap; padding:3px 8px; background:var(--bg-soft); border:1px solid var(--line); border-radius:6px; color:var(--ink-3); }

/* ============================================================
   DARK MODE — a real theme flip when .mk.is-dark is active
   (applies to every visible component during/after the transition)
   ============================================================ */
.mk--landing.is-dark { color: rgba(255,255,255,.82); }
/* Smooth, subtle theme flip — ease the color swap on every themed surface */
.mk--landing .mk-card, .mk--landing .mk-faq details, .mk--landing .mk-faq summary,
.mk--landing .mk-faq p, .mk--landing .mk-sec-card, .mk--landing .mk-evidence-card,
.mk--landing .mk-evidence-q, .mk--landing .mk-sec-card-icon, .mk--landing .mk-card-icon,
.mk--landing .mk-cert, .mk--landing .mk-btn--secondary, .mk--landing h2, .mk--landing h3,
.mk--landing p, .mk--landing .mk-eyebrow, .mk--landing #mk-steps li, .mk--landing #mk-steps li span,
.mk--landing .mk-section--alt { transition: background-color .5s ease, color .5s ease, border-color .5s ease; }
.mk--landing.is-dark h1, .mk--landing.is-dark h2, .mk--landing.is-dark h3 { color:#fff; }
.mk--landing.is-dark p { color: rgba(255,255,255,.72); }
.mk--landing.is-dark .mk-eyebrow { color: rgba(255,255,255,.62); }
.mk--landing.is-dark .mk-eyebrow [data-lucide] { color:#9FB4E8; }
.mk--landing.is-dark .mk-section--alt { background: rgba(255,255,255,.03); }
.mk--landing.is-dark .mk-card,
.mk--landing.is-dark .mk-evidence-card,
.mk--landing.is-dark .mk-sec-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.mk--landing.is-dark .mk-card p,
.mk--landing.is-dark .mk-evidence-a { color: rgba(255,255,255,.72); }
.mk--landing.is-dark .mk-card-icon,
.mk--landing.is-dark .mk-sec-card-icon { background: rgba(255,255,255,.10); color:#fff; }
.mk--landing.is-dark .mk-faq details { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.mk--landing.is-dark .mk-faq summary { color:#fff; }
.mk--landing.is-dark .mk-faq summary span { color: rgba(255,255,255,.6); }
.mk--landing.is-dark .mk-faq p { color: rgba(255,255,255,.72); }
.mk--landing.is-dark .mk-evidence-q { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.72); }
.mk--landing.is-dark .mk-evidence-refs span { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.72); }
.mk--landing.is-dark .mk-btn--secondary { color:#fff; border-color: rgba(255,255,255,.42); }
.mk--landing.is-dark .mk-btn--secondary:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.6); }
.mk--landing.is-dark .mk-flist b { color:#fff; }
/* how-it-works step rows use inline light styles → re-skin for dark */
.mk--landing.is-dark #mk-steps li { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.14) !important; }
.mk--landing.is-dark #mk-steps li span { color: rgba(255,255,255,.78) !important; }

/* ===== Theme-threshold dark-mode additions ===== */
.mk-compare-wrap { max-width:620px; }
.mk-compare--3 .mk-compare-row { grid-template-columns: 1.8fr 1fr 1fr; }
.mk-quiz-card { min-height:430px; }
.mk-quiz-card.answered { min-height:0; }
.mk--landing.is-dark .mk-accent { color:#9FB4E8; }
/* Premium CTA in dark mode: lean the gradient strongly red for contrast on the
   dark band, and make the spinning border-shine brighter + wider so it pops. */
.mk--landing.is-dark .mk-btn--premium {
  background-color:#3A1230;
  background-image:
    radial-gradient(72% 92% at 22% 30%, rgba(224,72,92,.98) 0%, transparent 60%),
    radial-gradient(58% 78% at 82% 36%, rgba(158,40,74,.94) 0%, transparent 62%),
    radial-gradient(80% 96% at 55% 100%, rgba(78,40,108,.82) 0%, transparent 66%);
  box-shadow: 0 10px 34px rgba(214,70,92,.42);
}
.mk--landing.is-dark .mk-btn--premium::before {
  opacity:1 !important;
  padding:1.6px;
  background: conic-gradient(from var(--mkang),
    transparent 0deg, transparent 52deg,
    rgba(255,214,214,.95) 80deg, #ffffff 96deg, rgba(255,214,214,.95) 112deg, transparent 140deg,
    transparent 232deg, rgba(255,232,232,.85) 264deg, #ffffff 280deg, rgba(255,232,232,.85) 296deg, transparent 324deg) !important;
  animation: mk-cta-spin 2.6s linear infinite !important;
}
.mk--landing.is-dark .mk-flist .ic { background:rgba(255,255,255,.10); color:#fff; }
.mk--landing.is-dark .mk-card, .mk--landing.is-dark .mk-tutor, .mk--landing.is-dark .mk-qshow { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); }
.mk--landing.is-dark .mk-qshow-q { color:rgba(255,255,255,.82); }
.mk--landing.is-dark .mk-qshow-opt { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.16); color:rgba(255,255,255,.82); }
.mk--landing.is-dark .mk-compare { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); box-shadow:none; }
.mk--landing.is-dark .mk-compare-row + .mk-compare-row { border-top-color:rgba(255,255,255,.12); }
.mk--landing.is-dark .mk-compare-head { background:rgba(255,255,255,.06); }
.mk--landing.is-dark .mk-compare-cell { color:rgba(255,255,255,.78); }
.mk--landing.is-dark .mk-compare-cell:first-child { color:#fff; }
.mk--landing.is-dark .mk-compare-head .mk-compare-cell { color:#fff; }
.mk--landing.is-dark .mk-compare-head .mk-compare-cell.feat { color:rgba(255,255,255,.6); }
.mk--landing.is-dark .mk-compare-muted { color:rgba(255,255,255,.4); }
.mk-qshow-lead { font-weight:600; color:var(--ink); font-size:13px; margin:10px 0 12px; }
.mk-qshow-exp { font-size:12px; line-height:1.55; color:var(--ink-2); margin-top:7px; }
.mk-qshow .mk-board-tag { color:var(--brand); }
.mk--landing.is-dark .mk-qshow-lead { color:#fff; }
.mk--landing.is-dark .mk-qshow .mk-board-tag { color:#9FB4E8; }
/* Testimonials sit inside the landing dark zone — flip their cards to match. */
.mk--landing.is-dark .mk-quote { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); }
.mk--landing.is-dark .mk-quote blockquote { color:#fff; }
.mk--landing.is-dark .mk-quote figcaption b { color:#fff; }
.mk--landing.is-dark .mk-quote figcaption > span:last-child { color:rgba(255,255,255,.6); }
/* The time-saved stat band opens the dark zone — flip its surface, numbers, and bars. */
.mk--landing .mk-statband { transition:background-color .5s ease, border-color .5s ease; }
.mk--landing.is-dark .mk-statband { background:transparent; border-color:rgba(255,255,255,.12); }
.mk--landing.is-dark .mk-statbig b { color:#fff; }
.mk--landing.is-dark .mk-statbig span { color:rgba(255,255,255,.72); }
.mk--landing.is-dark .mk-statbar { background:rgba(255,255,255,.16); }
.mk--landing.is-dark .mk-statbar i { background:linear-gradient(90deg, #9FB4E8, #ffffff); }
/* Trust strip + how-it-works steps + the cycling hero word also live in the
   landing dark zone (it now opens at the trust strip, as the hero is pinned). */
.mk--landing .mk-truststrip { transition:background-color .5s ease, border-color .5s ease; }
.mk--landing.is-dark .mk-truststrip { background:transparent; border-color:rgba(255,255,255,.12); }
.mk--landing.is-dark .mk-truststrip-lead { color:rgba(255,255,255,.7); }
.mk--landing.is-dark .mk-truststrip-lead b { color:#fff; }
.mk--landing.is-dark .mk-trustitem { color:rgba(255,255,255,.82); }
.mk--landing.is-dark .mk-trustitem [data-lucide] { color:#9FB4E8; }
.mk--landing.is-dark .mk-step { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); }
.mk--landing.is-dark .mk-step p { color:rgba(255,255,255,.72); }
.mk--landing.is-dark .mk-step-n { color:rgba(255,255,255,.32); }
.mk--landing.is-dark .mk-cycle { color:#9FB4E8; }

/* ---- Footer + dark CTA on pages whose dark zone runs to the page end ---- */
.mk--landing .mk-footer { transition:background-color .5s ease, color .5s ease, border-color .5s ease; }
.mk--landing.is-dark .mk-cta-dark { background:transparent; }
.mk--landing.is-dark .mk-footer { background:#14225A; border-top-color:transparent; color:rgba(255,255,255,.70); }
.mk--landing.is-dark .mk-footer .mk-brand { color:#fff; }
.mk--landing.is-dark .mk-footer-brand p { color:rgba(255,255,255,.62); }
.mk--landing.is-dark .mk-footer-section h2 { color:#9FB4E8; }
.mk--landing.is-dark .mk-footer-nav a { color:rgba(255,255,255,.64); }
.mk--landing.is-dark .mk-footer-nav a:hover { color:#fff; }
.mk--landing.is-dark .mk-footer-legal { color:rgba(255,255,255,.50); border-top-color:rgba(255,255,255,.12); }
@media (max-width: 860px) {
  .mk--landing.is-dark .mk-footer { background:#14225A; color:rgba(255,255,255,.74); }
  .mk--landing.is-dark .mk-footer-brand p { color:rgba(255,255,255,.66); }
  .mk--landing.is-dark .mk-footer-section h2 { color:#9FB4E8; }
  .mk--landing.is-dark .mk-footer-nav a { color:rgba(255,255,255,.72); }
  .mk--landing.is-dark .mk-footer-legal { color:rgba(255,255,255,.52); border-top-color:rgba(255,255,255,.12); }
}

/* ============================================================
   TRY — kit-styled blurred chat behind the sign-up gate (/try)
   ============================================================ */
.mk--try { min-height:100vh; }
.mk-try-main { max-width:760px; margin:0 auto; padding:0 20px; }
.mk-try-thread { padding:54px 0 26px; display:flex; flex-direction:column; gap:16px; }
.mk-try-eyebrow { display:inline-flex; align-items:center; gap:7px; align-self:flex-start; font-size:12px; font-weight:600; color:var(--brand); }
.mk-try-eyebrow [data-lucide] { width:14px; height:14px; }
.mk-chat-msg { font-size:15px; line-height:1.55; }
.mk-chat-msg--user { align-self:flex-end; max-width:78%; background:var(--brand); color:#fff; padding:12px 16px; border-radius:16px 16px 4px 16px; }
.mk-chat-msg--ai { align-self:stretch; background:#fff; border:1px solid var(--line); border-radius:16px 16px 16px 4px; padding:16px 18px; box-shadow:var(--shadow-soft); }
.mk-chat-gen { display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:500; color:var(--brand); }
.mk-chat-skel { margin-top:14px; }
.mk-chat-skel span { display:block; height:11px; border-radius:6px; margin-top:9px; background:linear-gradient(90deg, var(--bg-soft) 25%, var(--line) 37%, var(--bg-soft) 63%); background-size:400% 100%; animation:mk-shimmer 1.5s ease infinite; }
.mk-chat-skel span:nth-child(2){ width:92%; }
.mk-chat-skel span:nth-child(3){ width:73%; }
@keyframes mk-shimmer { 0%{ background-position:100% 0; } 100%{ background-position:0 0; } }
.mk-try-composer { display:flex; align-items:center; gap:10px; max-width:760px; margin:6px auto 0; padding:13px 16px; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-soft); }
.mk-try-composer-ph { flex:1; color:var(--ink-4); font-size:15px; }
.mk-try-composer-send { width:34px; height:34px; border-radius:999px; background:var(--brand); color:#fff; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.mk-try-composer-send [data-lucide] { width:17px; height:17px; color:#fff; }
.mk-signup-later[href] { display:inline-block; text-decoration:none; }

/* The nav wordmark must read indigo at the top of every marketing page and
   white once the page goes dark — force it above any earlier rule. */
.mk.mk--landing .mk-nav .mk-brand { color:#1E3A8A !important; }
.mk.mk--landing.is-dark .mk-nav .mk-brand { color:#fff !important; }

/* ============================================================
   LANDING v3 — new conversion sections
   (hero eyebrow/lede/cta, trust strip, how-it-works steps,
   testimonials, pricing teaser, boards hero)
   ============================================================ */

/* Hero additions */
.mk-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 18px; padding: 6px 13px;
  background: var(--brand-soft); color: var(--brand);
  border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
  border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .01em;
}
.mk-hero-eyebrow [data-lucide] { width: 14px; height: 14px; }
.mk-hero-lede {
  max-width: 600px; margin: 16px auto 6px; text-align: center;
  font-size: 17px; line-height: 1.55; color: var(--ink-3);
}
.mk-hero-cta {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 12px; margin-top: 22px;
}
.mk-hero-cta-note { font-size: 12.5px; color: var(--ink-4); }
@media (max-width: 560px) { .mk-hero-cta-note { width: 100%; text-align: center; } }

/* Trust strip under the hero */
.mk-truststrip { padding: 26px 0; background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mk-truststrip-lead { text-align: center; font-size: 14px; color: var(--ink-3); margin: 0 0 16px; }
.mk-truststrip-lead b { color: var(--ink-2); font-weight: 600; }
.mk-trustrow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 26px; }
.mk-trustitem { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.mk-trustitem [data-lucide] { width: 16px; height: 16px; color: var(--brand); flex-shrink: 0; }

/* How it works — numbered steps */
.mk-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 820px) { .mk-steps { grid-template-columns: 1fr; } }
.mk-step {
  position: relative; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-xl); padding: 26px 22px 22px; box-shadow: var(--shadow-soft);
}
.mk-step-n {
  position: absolute; top: 20px; right: 22px;
  font-family: var(--font-display); font-weight: 600; font-size: 28px;
  color: color-mix(in srgb, var(--brand) 22%, transparent); line-height: 1;
}
.mk-step .mk-card-icon { margin-bottom: 14px; }
.mk-step h3 { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin: 0 0 7px; letter-spacing: -.01em; }
.mk-step p { font-size: 13.5px; line-height: 1.55; color: var(--ink-3); margin: 0; }

/* 3-up feature grid */
.mk-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .mk-grid-3 { grid-template-columns: 1fr; } }

/* Testimonials */
.mk-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 820px) { .mk-quotes { grid-template-columns: 1fr; } }
.mk-quote { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 24px 22px; box-shadow: var(--shadow-soft); margin: 0; }
.mk-quote blockquote { margin: 0 0 18px; font-size: 15.5px; line-height: 1.55; color: var(--ink); font-family: var(--font-display); }
.mk-quote figcaption { display: flex; align-items: center; gap: 12px; }
.mk-quote figcaption > span:last-child { display: flex; flex-direction: column; font-size: 12.5px; color: var(--ink-4); line-height: 1.35; }
.mk-quote figcaption b { font-size: 13px; color: var(--ink); font-weight: 600; }
.mk-quote-av {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand);
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
}

/* Pricing teaser */
.mk-priceteaser { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 820px) { .mk-priceteaser { grid-template-columns: 1fr; } }
.mk-priceteaser-card { position: relative; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 26px 24px; box-shadow: var(--shadow-soft); }
.mk-priceteaser-card--featured { border-color: color-mix(in srgb, var(--brand) 40%, transparent); box-shadow: var(--shadow); }
.mk-priceteaser-card p { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); margin: 8px 0 20px; flex: 1; }
.mk-priceteaser-card .mk-plan-price { margin: 10px 0 4px; }
.mk-priceteaser-card .mk-btn { margin-top: auto; }

/* Boards hero */
/* `.mk h1` (0,1,1) would otherwise beat a bare `.mk-boards-h` (0,1,0); scope to
   `.mk .mk-boards-h` (0,2,0) so the Fraunces treatment actually wins. */
.mk .mk-boards-h { font-family: var(--font-brand); font-weight: 500; font-size: 46px; line-height: 1.08; letter-spacing: -.01em; margin: 14px 0 0; color: var(--ink); }
@media (max-width: 560px) { .mk .mk-boards-h { font-size: 32px; } }
.mk-boards-note { font-size: 12.5px; color: var(--ink-4); margin-top: 12px; }

/* Time-saved stats band */
.mk-statband { padding: 50px 0; background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mk-statband-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 820px) { .mk-statband-grid { grid-template-columns: 1fr; gap: 30px; } }
.mk-statbig { text-align: center; }
.mk-statbig b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 48px; line-height: 1; letter-spacing: -0.02em; color: var(--brand); font-variant-numeric: tabular-nums; }
.mk-statbig span { display: block; margin: 10px auto 0; max-width: 230px; font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
.mk-statband-note { text-align: center; margin: 26px 0 0; font-size: 11.5px; color: var(--ink-4); }
/* Animated graph bar under each stat — fills to data-w% when scrolled into view (see ds-statband.ts). */
.mk-statbar { height: 8px; max-width: 168px; margin: 16px auto 0; border-radius: 999px; background: var(--line); overflow: hidden; }
.mk-statbar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); transition: width 1.2s cubic-bezier(.22, 1, .36, 1); }

/* ============================================================
   LANDING (home) — below-hero refinement
   Scoped to .mk--home so the security/boards pages (which also use
   .mk--landing) and pricing (.mk) stay untouched. The hero is excluded:
   every rule targets .mk-truststrip / .mk-section / the closing CTA,
   never .mk-hero.

   Grounded in UI/UX Pro Max guidance:
   - Pattern: "Trust & Authority + Conversion" — proof up high, deliberate CTA close.
   - Style:   "Accessible & Ethical" — visible focus rings, hover + active
              feedback, smooth in-page scroll, reduced-motion respected.
   Brand tokens are reused as-is (no palette/font swap); every surface has a
   matching .is-dark variant so the scroll-driven theme still reads right.
   ============================================================ */

/* --- Accessibility: keyboard focus, in-page scroll, press feedback --- */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.mk--home .mk-section a:focus-visible,
.mk--home .mk-section button:focus-visible,
.mk--home .mk-truststrip a:focus-visible,
.mk--home .mk-footer a:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 8px;
}
.mk--home.is-dark .mk-section a:focus-visible,
.mk--home.is-dark .mk-section button:focus-visible,
.mk--home.is-dark .mk-truststrip a:focus-visible,
.mk--home.is-dark .mk-footer a:focus-visible { outline-color: #9FB4E8; }

.mk--home .mk-section .mk-btn:active,
.mk--home .mk-truststrip .mk-btn:active { transform: translateY(0) scale(.98); }

/* --- Trust strip → a more deliberate proof band --- */
.mk--home .mk-truststrip { padding: 30px 0; }
.mk--home .mk-trustitem { font-size: 13.5px; font-weight: 600; }
.mk--home .mk-trustitem [data-lucide] { width: 17px; height: 17px; }
@media (min-width: 720px) {
  .mk--home .mk-trustrow { gap: 0; }
  .mk--home .mk-trustitem { position: relative; padding: 2px 28px; }
  .mk--home .mk-trustitem:not(:last-child)::after {
    content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    width: 1px; height: 18px; background: var(--line);
  }
  .mk--home.is-dark .mk-trustitem:not(:last-child)::after { background: rgba(255, 255, 255, .18); }
}

/* --- Section headers: a small brand accent under each heading --- */
.mk--home .mk-section .mk-section-head h2::after {
  content: ''; display: block; width: 42px; height: 3px; margin: 16px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 25%, transparent));
}
.mk--home.is-dark .mk-section .mk-section-head h2::after {
  background: linear-gradient(90deg, #9FB4E8, rgba(159, 180, 232, .25));
}

/* --- Cards (features / security / notes / education): depth + affordance --- */
.mk--home .mk-section .mk-card,
.mk--home .mk-section .mk-sec-card {
  position: relative; overflow: hidden;
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease, background-color .5s ease;
}
/* top hairline accent, revealed on hover */
.mk--home .mk-section .mk-card::before,
.mk--home .mk-section .mk-sec-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--brand), transparent 72%);
  opacity: 0; transition: opacity .25s ease;
}
.mk--home.is-dark .mk-section .mk-card::before,
.mk--home.is-dark .mk-section .mk-sec-card::before {
  background: linear-gradient(90deg, #9FB4E8, transparent 72%);
}
.mk--home .mk-section .mk-card:hover::before,
.mk--home .mk-section .mk-sec-card:hover::before { opacity: 1; }

/* icon tile lifts subtly with the card */
.mk--home .mk-section .mk-card-icon,
.mk--home .mk-section .mk-sec-card-icon { transition: transform .2s ease, background-color .3s ease, color .3s ease; }
.mk--home .mk-section .mk-card:hover .mk-card-icon,
.mk--home .mk-section .mk-sec-card:hover .mk-sec-card-icon { transform: scale(1.06); }

/* light state (top of page, before the scroll-driven dark flip) */
.mk--home:not(.is-dark) .mk-section .mk-card:hover,
.mk--home:not(.is-dark) .mk-section .mk-sec-card:hover {
  transform: translateY(-3px); border-color: var(--brand); box-shadow: var(--shadow);
}
/* dark state (the dark zone) */
.mk--home.is-dark .mk-section .mk-card:hover,
.mk--home.is-dark .mk-section .mk-sec-card:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, .08);
  border-color: rgba(159, 180, 232, .45);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .30);
}

/* --- Sources section: turn the bare list into tidy cards --- */
.mk--home .mk-flist li {
  padding: 14px 16px; border-radius: var(--radius-lg);
  border: 1px solid var(--line); background: var(--paper);
  transition: border-color .25s ease, background-color .5s ease, transform .2s ease;
}
.mk--home.is-dark .mk-flist li { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); }
.mk--home .mk-flist li:hover { transform: translateX(2px); }
.mk--home:not(.is-dark) .mk-flist li:hover { border-color: var(--brand); }
.mk--home.is-dark .mk-flist li:hover { border-color: rgba(159, 180, 232, .45); }

/* --- Closing CTA: a deliberate, bounded panel --- */
.mk--home main > .mk-section--tight .mk-container {
  max-width: 760px; padding: 52px 36px; border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 60%),
    var(--paper);
  box-shadow: var(--shadow);
}
.mk--home.is-dark main > .mk-section--tight .mk-container {
  border-color: rgba(255, 255, 255, .14);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(159, 180, 232, .14), transparent 60%),
    rgba(255, 255, 255, .04);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .32);
}

/* --- Respect reduced motion across the new interactions --- */
@media (prefers-reduced-motion: reduce) {
  .mk--home .mk-section .mk-card,
  .mk--home .mk-section .mk-sec-card,
  .mk--home .mk-flist li,
  .mk--home .mk-section .mk-card-icon,
  .mk--home .mk-section .mk-sec-card-icon { transition: none; }
  .mk--home .mk-section .mk-card:hover,
  .mk--home .mk-section .mk-sec-card:hover,
  .mk--home .mk-flist li:hover { transform: none; }
}

/* ============================================================
   LANDING (home) — bolder pass (push 2)
   Heavier card + icon treatment, brand-tinted in-card labels, and the
   "How it works" steps section (kit's .mk-steps) added after features as
   the pattern's "solution overview" beat. Light + dark variants throughout.
   ============================================================ */

/* Bigger, branded icon tiles across cards + steps */
.mk--home .mk-section .mk-card-icon,
.mk--home .mk-section .mk-sec-card-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--brand) 18%, transparent), color-mix(in srgb, var(--brand) 6%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent);
  color: var(--brand);
}
.mk--home .mk-section .mk-card-icon [data-lucide],
.mk--home .mk-section .mk-sec-card-icon [data-lucide] { width: 20px; height: 20px; }
.mk--home.is-dark .mk-section .mk-card-icon,
.mk--home.is-dark .mk-section .mk-sec-card-icon {
  background: linear-gradient(150deg, rgba(159, 180, 232, .24), rgba(159, 180, 232, .06));
  box-shadow: inset 0 0 0 1px rgba(159, 180, 232, .30);
  color: #d3ddf6;
}

/* Heftier card surface: rounder, more padding, subtle top-lit gradient (dark) */
.mk--home .mk-section .mk-card,
.mk--home .mk-section .mk-sec-card { border-radius: var(--radius-xl); padding: 26px; }
.mk--home.is-dark .mk-section .mk-card,
.mk--home.is-dark .mk-section .mk-sec-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
}

/* Brand-tint the in-card eyebrow labels (Consult / Notes / Scribe) */
.mk--home .mk-section .mk-card .mk-eyebrow { color: var(--brand); }
.mk--home.is-dark .mk-section .mk-card .mk-eyebrow { color: #9FB4E8; }

/* How it works — lift the numbered steps to match the card affordance */
.mk--home .mk-step { transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease, background-color .5s ease; }
.mk--home .mk-step:hover { transform: translateY(-3px); }
.mk--home:not(.is-dark) .mk-step:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.mk--home.is-dark .mk-step:hover { border-color: rgba(159, 180, 232, .45); box-shadow: 0 18px 40px rgba(0, 0, 0, .30); }
@media (prefers-reduced-motion: reduce) {
  .mk--home .mk-step { transition: none; }
  .mk--home .mk-step:hover { transform: none; }
}

/* ============================================================
   LANDING (home) — Evidence section (redesigned)
   Split layout: left = four evidence pillars (mk-flist cards),
   right = a "source library" panel that visualizes transparency.
   Same principles: brand tokens, light + dark variants, reduced motion.
   ============================================================ */
.mk--home .mk-evidence-split { align-items: start; }
@media (max-width: 900px) { .mk--home .mk-evidence-split { align-items: stretch; } }

.mk--home .mk-evidence-panel {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  padding: 18px; display: flex; flex-direction: column; gap: 14px;
}
.mk--home.is-dark .mk-evidence-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
  border-color: rgba(255, 255, 255, .14); box-shadow: 0 24px 60px rgba(0, 0, 0, .32);
}

.mk--home .mk-evidence-panel-search {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px; border-radius: 12px;
  background: var(--bg-soft); border: 1px solid var(--line);
  color: var(--ink-4); font-size: 14px;
}
.mk--home .mk-evidence-panel-search [data-lucide] { width: 17px; height: 17px; color: var(--brand); }
.mk--home.is-dark .mk-evidence-panel-search { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .55); }
.mk--home.is-dark .mk-evidence-panel-search [data-lucide] { color: #9FB4E8; }

.mk--home .mk-evidence-panel-label { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.mk--home.is-dark .mk-evidence-panel-label { color: rgba(255, 255, 255, .5); }

.mk--home .mk-evidence-srcs { display: flex; flex-direction: column; gap: 8px; }
.mk--home .mk-evidence-src {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg-soft);
  font-size: 13.5px; color: var(--ink);
  transition: border-color .2s ease, transform .2s ease, background-color .5s ease;
}
.mk--home .mk-evidence-src b { font-weight: 600; }
.mk--home .mk-evidence-src .ic { width: 30px; height: 30px; border-radius: 8px; background: var(--brand-soft); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mk--home .mk-evidence-src .ic [data-lucide] { width: 16px; height: 16px; }
.mk--home .mk-evidence-src .tag { margin-left: auto; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; }
.mk--home .mk-evidence-src .tag--brand { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 40%, transparent); background: var(--brand-soft); }
.mk--home .mk-evidence-src:hover { transform: translateX(2px); border-color: var(--brand); }

.mk--home.is-dark .mk-evidence-src { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); color: #fff; }
.mk--home.is-dark .mk-evidence-src .ic { background: rgba(159, 180, 232, .18); color: #d3ddf6; }
.mk--home.is-dark .mk-evidence-src .tag { color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); }
.mk--home.is-dark .mk-evidence-src .tag--brand { color: #9FB4E8; background: rgba(159, 180, 232, .14); border-color: rgba(159, 180, 232, .4); }
.mk--home.is-dark .mk-evidence-src:hover { border-color: rgba(159, 180, 232, .45); }

.mk--home .mk-evidence-panel-foot { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); padding-top: 2px; }
.mk--home .mk-evidence-panel-foot [data-lucide] { width: 14px; height: 14px; color: var(--good); }
.mk--home.is-dark .mk-evidence-panel-foot { color: rgba(255, 255, 255, .6); }
.mk--home.is-dark .mk-evidence-panel-foot [data-lucide] { color: #7FD3A3; }

@media (prefers-reduced-motion: reduce) {
  .mk--home .mk-evidence-src { transition: none; }
  .mk--home .mk-evidence-src:hover { transform: none; }
}