/* W30 — public marketing site (Home/Product/Pricing/Contact/Security/FAQ/legal). Self-contained,
   no external font/CDN (CSP: style-src 'self' 'unsafe-inline'; script-src 'self' — no third-party
   origins at all), system font stack only. Same product family as Docs/_DocsLayout.cshtml but a
   deliberately more finished visual treatment for a persuasive, sellable surface. */

:root {
    color-scheme: light dark;
    --mk-bg: #ffffff;
    --mk-surface: #f5f6fa;
    --mk-surface-raised: #ffffff;
    --mk-border: #e1e3ea;
    --mk-text: #14161f;
    --mk-text-muted: #565b6b;
    --mk-accent: #2b4fe0;
    --mk-accent-strong: #1d3bc4;
    --mk-accent-contrast: #ffffff;
    --mk-shadow: 0 1px 2px rgba(20, 22, 31, 0.04), 0 8px 24px rgba(20, 22, 31, 0.06);
}

@media (prefers-color-scheme: dark) {
    :root {
        --mk-bg: #0b0d13;
        --mk-surface: #12141c;
        --mk-surface-raised: #161925;
        --mk-border: #262a3a;
        --mk-text: #e8e9f2;
        --mk-text-muted: #9a9fb4;
        --mk-accent: #6d87ff;
        --mk-accent-strong: #8a9fff;
        --mk-accent-contrast: #0b0d13;
        --mk-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
    }
}

:root[data-theme="dark"] {
    --mk-bg: #0b0d13; --mk-surface: #12141c; --mk-surface-raised: #161925; --mk-border: #262a3a;
    --mk-text: #e8e9f2; --mk-text-muted: #9a9fb4; --mk-accent: #6d87ff; --mk-accent-strong: #8a9fff;
    --mk-accent-contrast: #0b0d13; --mk-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
}

:root[data-theme="light"] {
    --mk-bg: #ffffff; --mk-surface: #f5f6fa; --mk-surface-raised: #ffffff; --mk-border: #e1e3ea;
    --mk-text: #14161f; --mk-text-muted: #565b6b; --mk-accent: #2b4fe0; --mk-accent-strong: #1d3bc4;
    --mk-accent-contrast: #ffffff; --mk-shadow: 0 1px 2px rgba(20, 22, 31, 0.04), 0 8px 24px rgba(20, 22, 31, 0.06);
}

* { box-sizing: border-box; }

body.mk {
    margin: 0;
    background: var(--mk-bg);
    color: var(--mk-text);
    font-family: -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.mk-shell { max-width: 1080px; margin: 0 auto; padding: 0 1.5rem; }

/* ---- header ------------------------------------------------------------------------------ */

.mk-header {
    border-bottom: 1px solid var(--mk-border);
    background: var(--mk-bg);
    position: sticky; top: 0; z-index: 10;
}
.mk-header-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 0; gap: 1.5rem;
}
.mk-wordmark {
    font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em;
    color: var(--mk-text); text-decoration: none;
}
.mk-wordmark span { color: var(--mk-accent); }
.mk-nav { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.mk-nav a {
    color: var(--mk-text-muted); text-decoration: none; font-size: 0.95rem; font-weight: 500;
}
.mk-nav a:hover, .mk-nav a:focus-visible { color: var(--mk-text); }
.mk-nav a:focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 3px; border-radius: 3px; }
.mk-cta-group { display: flex; align-items: center; gap: 0.75rem; }

/* ---- buttons / links ----------------------------------------------------------------------- */

.mk-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.6rem 1.2rem; border-radius: 6px; font-weight: 600; font-size: 0.95rem;
    text-decoration: none; border: 1px solid transparent; cursor: pointer;
    font-family: inherit;
}
.mk-btn:focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 2px; }
.mk-btn-primary { background: var(--mk-accent); color: var(--mk-accent-contrast); }
.mk-btn-primary:hover { background: var(--mk-accent-strong); }
.mk-btn-secondary { background: transparent; color: var(--mk-text); border-color: var(--mk-border); }
.mk-btn-secondary:hover { border-color: var(--mk-text-muted); }
.mk-btn-block { width: 100%; }

/* ---- hero ----------------------------------------------------------------------------------- */

.mk-hero { padding: 4.5rem 0 3.5rem; }
.mk-eyebrow {
    display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--mk-accent); margin-bottom: 1rem;
}
.mk-hero h1 {
    font-size: clamp(2.1rem, 4vw, 3.1rem); line-height: 1.1; letter-spacing: -0.02em;
    margin: 0 0 1.1rem; text-wrap: balance; max-width: 34ch;
}
.mk-hero p.mk-lede {
    font-size: 1.15rem; color: var(--mk-text-muted); max-width: 52ch; margin: 0 0 2rem;
}
.mk-hero p.mk-tagline {
    font-size: 1rem; font-weight: 600; color: var(--mk-accent); max-width: 52ch; margin: 0 0 1.1rem;
}
.mk-hero-actions { display: flex; gap: 0.85rem; flex-wrap: wrap; }

/* ---- generic sections ------------------------------------------------------------------------ */

.mk-section { padding: 3.25rem 0; }
.mk-section-border-top { border-top: 1px solid var(--mk-border); }
.mk-section h2 {
    font-size: 1.7rem; letter-spacing: -0.01em; margin: 0 0 0.6rem; text-wrap: balance;
}
.mk-section > p.mk-section-lede {
    color: var(--mk-text-muted); max-width: 60ch; margin: 0 0 2rem; font-size: 1.02rem;
}

.mk-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.mk-card {
    background: var(--mk-surface-raised); border: 1px solid var(--mk-border); border-radius: 10px;
    padding: 1.5rem; box-shadow: var(--mk-shadow);
}
.mk-card h3 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.mk-card p { margin: 0; color: var(--mk-text-muted); font-size: 0.95rem; }

/* ---- pricing --------------------------------------------------------------------------------- */

.mk-plans { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.mk-plan {
    background: var(--mk-surface-raised); border: 1px solid var(--mk-border); border-radius: 12px;
    padding: 2rem; display: flex; flex-direction: column; box-shadow: var(--mk-shadow);
}
.mk-plan-name { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.35rem; }
.mk-plan-price { font-size: 2.1rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.15rem; }
.mk-plan-price small { font-size: 0.95rem; font-weight: 500; color: var(--mk-text-muted); }
.mk-plan-features { list-style: none; margin: 1.5rem 0; padding: 0; flex: 1; }
.mk-plan-features li {
    padding: 0.45rem 0; border-top: 1px solid var(--mk-border); font-size: 0.92rem;
    color: var(--mk-text-muted);
}
.mk-plan-features li:first-child { border-top: none; }
.mk-plan-empty {
    text-align: center; padding: 2.5rem 1.5rem; color: var(--mk-text-muted);
    border: 1px dashed var(--mk-border); border-radius: 12px;
}

/* ---- forms (Contact) -------------------------------------------------------------------------- */

.mk-form { max-width: 34rem; }
.mk-field { margin-bottom: 1.25rem; }
.mk-field label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.35rem; }
.mk-field input, .mk-field select, .mk-field textarea {
    width: 100%; padding: 0.6rem 0.7rem; border: 1px solid var(--mk-border); border-radius: 6px;
    background: var(--mk-surface-raised); color: var(--mk-text); font: inherit;
}
.mk-field input:focus, .mk-field select:focus, .mk-field textarea:focus {
    outline: 2px solid var(--mk-accent); outline-offset: 1px;
}
.mk-field textarea { resize: vertical; min-height: 8rem; }
.mk-field-error { color: #d1435b; font-size: 0.85rem; margin-top: 0.35rem; }
.mk-notice {
    background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: 8px;
    padding: 1rem 1.15rem; margin-bottom: 1.5rem; font-size: 0.95rem;
}
.mk-notice-success { border-color: #2f9e5c; }
.mk-notice-error { border-color: #d1435b; }

/* ---- faq ----------------------------------------------------------------------------------- */

.mk-faq-item { border-top: 1px solid var(--mk-border); padding: 1.25rem 0; }
.mk-faq-item:first-child { border-top: none; }
.mk-faq-item h3 { margin: 0 0 0.4rem; font-size: 1.02rem; }
.mk-faq-item p { margin: 0; color: var(--mk-text-muted); }

/* ---- legal / prose --------------------------------------------------------------------------- */

.mk-prose { max-width: 68ch; }
.mk-prose h2 { font-size: 1.3rem; margin-top: 2rem; }
.mk-prose p, .mk-prose li { color: var(--mk-text-muted); }

/* ---- footer -------------------------------------------------------------------------------- */

.mk-footer { border-top: 1px solid var(--mk-border); padding: 2.5rem 0; margin-top: 2rem; }
.mk-footer-row {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
}
.mk-footer-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.mk-footer-links a { color: var(--mk-text-muted); text-decoration: none; font-size: 0.88rem; }
.mk-footer-links a:hover { color: var(--mk-text); }
.mk-footer-copy { color: var(--mk-text-muted); font-size: 0.85rem; }

@media (max-width: 640px) {
    .mk-header-row { flex-wrap: wrap; }
    .mk-nav { order: 3; width: 100%; justify-content: flex-start; gap: 1rem; }
}