:root {
    --mk-ink: #172321;
    --mk-ink-soft: #43514e;
    --mk-charcoal: #172522;
    --mk-charcoal-2: #21332f;
    --mk-brand: #0f9f8b;
    --mk-brand-dark: #087968;
    --mk-brand-soft: #e4f7f2;
    --mk-paper: #ffffff;
    --mk-canvas: #f4f7f5;
    --mk-warm: #fbfaf7;
    --mk-line: #dce5e1;
    --mk-muted: #677571;
    --mk-radius-sm: 10px;
    --mk-radius: 18px;
    --mk-radius-lg: 28px;
    --mk-shadow-sm: 0 8px 24px rgba(21, 43, 37, .08);
    --mk-shadow: 0 24px 70px rgba(21, 43, 37, .14);
    --mk-wrap: 1180px;
}

.as-passkey-login{display:none;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;margin-bottom:10px;border:1px solid #cfdcda;border-radius:999px;background:#fff;color:#172725;font-weight:850;box-shadow:none}.as-passkey-login[hidden]{display:none!important}.as-passkey-login:hover{border-color:#7fb9b3;background:#f3faf9;color:#0f766e;transform:none}.as-passkey-login:disabled{opacity:.62;cursor:wait}.as-passkey-login i{font-size:18px;color:#0f766e}@media(max-width:768px){.as-passkey-login{display:flex}}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { color: var(--mk-ink); background: var(--mk-canvas); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
body, button, input, select, textarea, h1, h2, h3, h4, summary { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(15, 159, 139, .35); outline-offset: 3px; }
.mk-skip-link { position: fixed; z-index: 9999; top: 8px; left: 8px; padding: 10px 14px; border-radius: 8px; color: #fff; background: var(--mk-charcoal); transform: translateY(-150%); transition: transform .18s ease; }
.mk-skip-link:focus { transform: translateY(0); }
.mk-wrap { width: min(var(--mk-wrap), calc(100% - 40px)); margin-inline: auto; }

/* Shared controls */
.mk-button, .as-login-button, .as-recovery-button {
    min-height: 46px; border: 1px solid transparent; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 11px 19px; color: #fff; background: var(--mk-brand); font-weight: 760; line-height: 1.15; text-decoration: none; cursor: pointer;
    box-shadow: 0 9px 22px rgba(15, 159, 139, .18); transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.mk-button:hover, .as-login-button:hover, .as-recovery-button:hover { color: #fff; background: var(--mk-brand-dark); transform: translateY(-1px); box-shadow: 0 12px 25px rgba(15, 159, 139, .24); }
.mk-button-light { border-color: var(--mk-line); color: var(--mk-ink); background: #fff; box-shadow: none; }
.mk-button-light:hover { border-color: #b9cdc7; color: var(--mk-ink); background: #f8fbfa; }
.mk-button-small { min-height: 40px; padding: 9px 15px; border-radius: 10px; font-size: 13px; }
.mk-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--mk-brand-dark); font-size: 12px; font-weight: 820; letter-spacing: .11em; line-height: 1.4; text-transform: uppercase; }
.mk-eyebrow::before { width: 24px; height: 2px; border-radius: 99px; content: ""; background: var(--mk-brand); }

/* Marketing shell */
.mk-site { overflow-x: clip; background: var(--mk-paper); }
.mk-announcement { min-height: 36px; display: flex; align-items: center; background: var(--mk-charcoal); color: #e5f3ef; font-size: 12px; }
.mk-announcement { justify-content: center; gap: 12px; }
.mk-announcement a { color: #76decd; font-weight: 750; }
.mk-header { position: sticky; z-index: 100; top: 0; border-bottom: 1px solid rgba(220, 229, 225, .85); background: rgba(255, 255, 255, .92); backdrop-filter: blur(18px); transition: box-shadow .2s ease; }
.mk-header.is-compact { box-shadow: var(--mk-shadow-sm); }
.mk-header-row { min-height: 78px; display: flex; align-items: center; gap: 28px; transition: min-height .2s ease; }
.mk-header.is-compact .mk-header-row { min-height: 66px; }
.mk-brand { display: inline-flex; align-items: center; gap: 11px; color: var(--mk-ink); text-decoration: none; flex: 0 0 auto; }
.mk-brand-mark { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #13b29b, #087968); font-size: 19px; font-weight: 900; box-shadow: 0 8px 18px rgba(15, 159, 139, .22); }
.mk-brand span:last-child { display: grid; }
.mk-brand strong { font-size: 14px; letter-spacing: .075em; }
.mk-brand small { margin-top: 1px; color: var(--mk-muted); font-size: 10px; }
.mk-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.mk-nav > a, .mk-resource-menu > summary { min-height: 40px; padding: 10px 11px; border-radius: 9px; display: inline-flex; align-items: center; gap: 5px; color: #46534f; font-size: 13px; font-weight: 690; text-decoration: none; cursor: pointer; list-style: none; }
.mk-nav > a:hover, .mk-nav > a.active, .mk-resource-menu > summary:hover, .mk-resource-menu[open] > summary { color: var(--mk-brand-dark); background: var(--mk-brand-soft); }
.mk-resource-menu { position: relative; }
.mk-resource-menu summary::-webkit-details-marker { display: none; }
.mk-resource-menu > div { position: absolute; top: calc(100% + 10px); right: 0; width: 210px; padding: 8px; border: 1px solid var(--mk-line); border-radius: 12px; background: #fff; box-shadow: var(--mk-shadow-sm); }
.mk-resource-menu > div a { display: block; padding: 10px 11px; border-radius: 8px; color: var(--mk-ink); font-size: 13px; text-decoration: none; }
.mk-resource-menu > div a:hover { color: var(--mk-brand-dark); background: var(--mk-brand-soft); }
.mk-header-actions { display: flex; align-items: center; gap: 10px; }
.mk-link-button { color: var(--mk-ink); font-size: 13px; font-weight: 750; text-decoration: none; }
.mk-menu-button {
    position: relative; width: 42px; height: 42px; padding: 0; border: 1px solid #d7e2de; border-radius: 12px; display: none;
    grid-template-columns: 1fr; grid-template-rows: repeat(3, 2px); place-content: center; justify-items: center; gap: 4px;
    color: var(--mk-ink); background: #fff; box-shadow: 0 5px 16px rgba(21, 43, 37, .08); cursor: pointer;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.mk-menu-button:hover { border-color: #b9cec8; background: #f8fbfa; box-shadow: 0 7px 18px rgba(21, 43, 37, .11); }
.mk-menu-button span {
    grid-column: 1 !important; width: 18px !important; height: 2px !important; border-radius: 999px; display: block;
    background: currentColor; transform-origin: center; transition: transform .2s ease, opacity .15s ease;
}
.mk-menu-button span:nth-child(1) { grid-row: 1; }
.mk-menu-button span:nth-child(2) { grid-row: 2; }
.mk-menu-button span:nth-child(3) { grid-row: 3; }
.mk-menu-button b { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
body.mk-menu-open .mk-menu-button { border-color: #a9cbc3; color: var(--mk-brand-dark); background: var(--mk-brand-soft); box-shadow: none; }
body.mk-menu-open .mk-menu-button span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.mk-menu-open .mk-menu-button span:nth-child(2) { opacity: 0; }
body.mk-menu-open .mk-menu-button span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Hero and product imagery */
.mk-hero { position: relative; padding: 82px 0 72px; overflow: hidden; background: radial-gradient(circle at 85% 15%, rgba(15, 159, 139, .14), transparent 31%), linear-gradient(180deg, #fbfdfc 0%, #f2f7f5 100%); }
.mk-hero::after { position: absolute; right: -180px; bottom: -300px; width: 600px; height: 600px; border: 1px solid rgba(15, 159, 139, .13); border-radius: 50%; content: ""; }
.mk-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .88fr) minmax(500px, 1.12fr); align-items: center; gap: 64px; }
.mk-hero-copy h1 { max-width: 690px; margin: 20px 0 20px; color: var(--mk-charcoal); font-size: clamp(42px, 5.1vw, 68px); letter-spacing: -.055em; line-height: .99; }
.mk-hero-copy > p { max-width: 620px; margin: 0; color: #52615d; font-size: clamp(17px, 1.7vw, 20px); line-height: 1.65; }
.mk-hero-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 11px; }
.mk-trust-row { margin-top: 27px; display: flex; flex-wrap: wrap; gap: 9px 17px; }
.mk-trust-row span { display: inline-flex; align-items: center; gap: 7px; color: #586661; font-size: 12px; font-weight: 650; }
.mk-trust-row i { width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; color: var(--mk-brand-dark); background: var(--mk-brand-soft); font-style: normal; }
.mk-product-shot { position: relative; padding: 18px; border: 1px solid rgba(205, 219, 214, .8); border-radius: var(--mk-radius-lg); background: rgba(255, 255, 255, .74); box-shadow: var(--mk-shadow); }
.mk-product-shot::before { position: absolute; z-index: -1; inset: 18% -7% -8% 12%; border-radius: 40px; content: ""; background: rgba(15, 159, 139, .13); filter: blur(2px); transform: rotate(3deg); }
.mk-product-shot picture, .mk-product-shot img { width: 100%; }
.mk-product-shot img { aspect-ratio: 16/9; border: 1px solid #d8e2df; border-radius: 16px; object-fit: cover; object-position: top left; background: #edf3f1; }
.mk-shot-label { position: absolute; right: 30px; bottom: -15px; padding: 11px 14px; border: 1px solid var(--mk-line); border-radius: 11px; display: inline-flex; align-items: center; gap: 8px; color: var(--mk-ink); background: #fff; font-size: 12px; font-weight: 750; box-shadow: var(--mk-shadow-sm); }
.mk-shot-label i { color: var(--mk-brand); }
.mk-proof-strip { border-block: 1px solid var(--mk-line); background: #fff; }
.mk-proof-grid { min-height: 86px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; }
.mk-proof-grid span { min-height: 42px; padding: 0 22px; border-right: 1px solid var(--mk-line); display: flex; align-items: center; justify-content: center; gap: 10px; color: #4c5a56; font-size: 13px; font-weight: 700; text-align: center; }
.mk-proof-grid span:last-child { border-right: 0; }
.mk-proof-grid i { color: var(--mk-brand); font-size: 17px; }

/* Sections */
.mk-section { padding: 96px 0; background: #fff; }
.mk-section.is-tinted { background: var(--mk-canvas); }
.mk-section.is-dark { color: #dbe9e5; background: var(--mk-charcoal); }
.mk-section-heading { max-width: 690px; margin-bottom: 42px; }
.mk-section-heading.centered { margin-inline: auto; text-align: center; }
.mk-section-heading.centered .mk-eyebrow { justify-content: center; }
.mk-section-heading h2 { margin: 15px 0 13px; color: var(--mk-charcoal); font-size: clamp(30px, 3.2vw, 44px); letter-spacing: -.04em; line-height: 1.08; }
.mk-section.is-dark .mk-section-heading h2 { color: #fff; }
.mk-section-heading p { margin: 0; color: var(--mk-muted); font-size: 16px; line-height: 1.72; }
.mk-section-heading > a { margin-top: 15px; display: inline-block; color: var(--mk-brand-dark); font-size: 13px; font-weight: 780; }
.mk-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mk-feature-grid article { min-height: 220px; padding: 27px; border: 1px solid var(--mk-line); border-radius: var(--mk-radius); background: #fff; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.mk-feature-grid article:hover { border-color: #b7d8d0; transform: translateY(-3px); box-shadow: var(--mk-shadow-sm); }
.mk-feature-card-head { min-height: 56px; margin-bottom: 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.mk-feature-icon { width: 48px; height: 48px; border: 1px solid #cfe9e3; border-radius: 14px; display: grid; place-items: center; color: var(--mk-brand-dark); background: linear-gradient(145deg, #f2fbf8, var(--mk-brand-soft)); font-size: 18px; }
.mk-feature-index { padding-top: 2px; color: #b4c1bd; font-size: 11px; font-weight: 780; letter-spacing: .08em; }
.mk-feature-grid h3 { margin: 0 0 10px; font-size: 18px; letter-spacing: -.02em; }
.mk-feature-grid p { margin: 0; color: var(--mk-muted); font-size: 14px; line-height: 1.66; }

/* Product tour */
.mk-tour { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 42px; align-items: start; }
.mk-tour-tabs { display: grid; gap: 9px; }
.mk-tour-tab { width: 100%; padding: 18px; border: 1px solid var(--mk-line); border-radius: 14px; display: grid; grid-template-columns: 38px 1fr; gap: 12px; color: var(--mk-ink); background: #fff; text-align: left; cursor: pointer; transition: border-color .18s ease, background .18s ease; }
.mk-tour-tab > span { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--mk-brand-dark); background: var(--mk-brand-soft); font-weight: 850; }
.mk-tour-tab strong { display: block; margin-bottom: 5px; font-size: 14px; }
.mk-tour-tab small { display: block; color: var(--mk-muted); font-size: 12px; line-height: 1.45; }
.mk-tour-tab[aria-selected="true"] { border-color: var(--mk-brand); background: #eefaf7; box-shadow: inset 4px 0 0 var(--mk-brand); }
.mk-tour-panel[hidden] { display: none; }
.mk-tour-frame { position: relative; padding: 12px; border: 1px solid #d3dfdb; border-radius: 21px; background: #edf3f1; box-shadow: var(--mk-shadow); }
.mk-tour-frame > picture:not(.mk-tour-mobile-shot) > img { width: 100%; aspect-ratio: 16/9; border-radius: 13px; object-fit: cover; object-position: top left; background: #fff; }
.mk-tour-mobile-shot { position: absolute; right: 24px; bottom: -30px; width: 19%; min-width: 105px; padding: 5px; border: 1px solid #d0dfda; border-radius: 19px; background: #fff; box-shadow: 0 18px 45px rgba(15,35,30,.24); }
.mk-tour-mobile-shot img { width: 100%; border-radius: 14px; }
.mk-tour-caption { margin-top: 18px; display: flex; justify-content: space-between; gap: 30px; }
.mk-tour-caption h3 { margin: 0; font-size: 20px; }
.mk-tour-caption p { max-width: 600px; margin: 0; color: var(--mk-muted); font-size: 14px; line-height: 1.65; }

/* Workflow, audiences, continuity */
.mk-workflow { counter-reset: workflow; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.mk-workflow article { position: relative; padding: 0 34px 0 0; }
.mk-workflow article:not(:last-child)::after { position: absolute; top: 25px; right: 0; left: 62px; height: 1px; content: ""; background: #bdd0ca; }
.mk-workflow b { position: relative; z-index: 1; width: 50px; height: 50px; border: 5px solid #fff; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--mk-brand); box-shadow: 0 0 0 1px #b7cbc5; }
.mk-workflow h3 { margin: 22px 0 8px; font-size: 18px; }
.mk-workflow p { max-width: 290px; margin: 0; color: var(--mk-muted); font-size: 14px; line-height: 1.65; }
.mk-audience-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mk-audience-grid article { min-height: 225px; padding: 25px; border: 1px solid #324640; border-radius: var(--mk-radius); background: #21332f; }
.mk-audience-grid span { display: block; color: #79d9c9; font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.mk-audience-grid h3 { margin: 42px 0 10px; color: #fff; font-size: 18px; }
.mk-audience-grid p { margin: 0; color: #b7c8c3; font-size: 14px; line-height: 1.65; }
.mk-continuity-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: start; }
.mk-continuity-copy h2 { margin: 15px 0; color: #fff; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.08; }
.mk-continuity-copy p { color: #b7c8c3; line-height: 1.7; }
.mk-security-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mk-security-list article { padding: 21px; border: 1px solid #385049; border-radius: 15px; background: rgba(255,255,255,.035); }
.mk-security-list i { margin-bottom: 20px; display: block; color: #72d5c4; font-size: 19px; }
.mk-security-list b, .mk-security-list span { display: block; }
.mk-security-list b { color: #fff; font-size: 15px; }
.mk-security-list span { margin-top: 7px; color: #b6c7c2; font-size: 13px; line-height: 1.55; }

/* Existing package, FAQ and final components */
.mk-package-grid { gap: 16px; }
.mk-package-card { border-color: var(--mk-line); border-radius: var(--mk-radius); box-shadow: none; }
.mk-package-card.featured { border-color: var(--mk-brand); box-shadow: 0 20px 50px rgba(15, 159, 139, .13); transform: translateY(-6px); }
.mk-package-card li::before { color: var(--mk-brand); }
.mk-faq-list details { border-color: var(--mk-line); border-radius: 14px; background: #fff; }
.mk-faq-list summary { font-weight: 730; }
.mk-final { padding: 0 0 92px; background: #fff; }
.mk-final-card { padding: 48px 52px; border-radius: 24px; background: linear-gradient(120deg, #172522, #24403a); box-shadow: var(--mk-shadow); }
.mk-final-card h2 { max-width: 700px; margin: 11px 0 10px; color: #fff; font-size: clamp(28px, 3vw, 40px); line-height: 1.08; }
.mk-final-card p { color: #bcd0ca; }
.mk-final-login { color: #d7e9e4; }
.mk-footer { background: #101b19; }

/* Internal marketing pages */
.mk-page-hero { padding: 54px 0 68px; background: linear-gradient(180deg, #f8fbfa, #edf4f1); }
.mk-breadcrumb { margin-bottom: 27px; display: flex; align-items: center; gap: 8px; color: var(--mk-muted); font-size: 12px; }
.mk-breadcrumb a { color: var(--mk-brand-dark); font-weight: 700; }
.mk-page-hero h1 { max-width: 850px; margin: 14px 0; color: var(--mk-charcoal); font-size: clamp(36px, 4.8vw, 58px); letter-spacing: -.045em; line-height: 1.04; }
.mk-page-hero p { max-width: 760px; color: var(--mk-muted); font-size: 17px; line-height: 1.7; }
.mk-prose { max-width: 790px; }
.mk-prose.is-reading { max-width: 720px; }
.mk-prose h2 { color: var(--mk-charcoal); letter-spacing: -.025em; }
.mk-contact-cards a { border-color: var(--mk-line); border-radius: 15px; }
.mk-feature-detail-grid article { border-color: var(--mk-line); border-radius: var(--mk-radius); }

/* Compact public authentication shell */
.mk-auth-body { min-height: 100vh; display: flex; flex-direction: column; background: radial-gradient(circle at 8% 12%, rgba(15,159,139,.11), transparent 25%), var(--mk-canvas); }
.mk-auth-wrap { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.mk-auth-header { min-height: 74px; border-bottom: 1px solid rgba(220,229,225,.9); display: flex; align-items: center; background: rgba(255,255,255,.9); backdrop-filter: blur(16px); }
.mk-auth-header .mk-auth-wrap { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.mk-auth-header nav { display: flex; align-items: center; gap: 17px; }
.mk-auth-back { display: inline-flex; align-items: center; gap: 7px; color: #4a5954; font-size: 13px; font-weight: 700; text-decoration: none; }
.mk-auth-back:hover { color: var(--mk-brand-dark); }
.mk-auth-main { width: 100%; flex: 1 0 auto; padding: 56px 20px; display: grid; place-items: center; }
.mk-auth-alert { width: min(540px, 100%); margin: 0 auto 16px; padding: 13px 16px; border: 1px solid #acd9ce; border-radius: 12px; color: #17695c; background: #eaf8f4; font-size: 13px; }
.mk-auth-footer { border-top: 1px solid var(--mk-line); background: rgba(255,255,255,.72); }
.mk-auth-footer .mk-auth-wrap { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--mk-muted); font-size: 12px; }
.mk-auth-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 16px; }
.mk-auth-footer a { text-decoration: none; }
.mk-auth-footer a:hover { color: var(--mk-brand-dark); }
.as-login-shell { width: min(1120px, 100%); display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr); border: 1px solid rgba(211,224,219,.9); border-radius: 26px; overflow: hidden; background: #fff; box-shadow: var(--mk-shadow); }
.as-login-brand { padding: 48px; color: #d5e5e0; background: linear-gradient(140deg, #172522, #26443d); }
.as-login-brand .as-login-logo { width: 46px; height: 46px; margin-bottom: 35px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: var(--mk-brand); font-size: 22px; font-weight: 900; }
.as-login-eyebrow { color: #72d8c7; font-size: 11px; font-weight: 820; letter-spacing: .11em; text-transform: uppercase; }
.as-login-brand h1 { max-width: 480px; margin: 13px 0 14px; color: #fff; font-size: clamp(32px, 3.2vw, 46px); letter-spacing: -.045em; line-height: 1.05; }
.as-login-lead { max-width: 500px; margin: 0; color: #b8cbc5; font-size: 15px; line-height: 1.7; }
.as-login-product-preview { position: relative; margin-top: 30px; padding: 9px; border: 1px solid #3f5952; border-radius: 17px; background: rgba(255,255,255,.05); }
.as-login-product-preview img { width: 100%; aspect-ratio: 16/9; border-radius: 11px; object-fit: cover; object-position: top left; opacity: .94; }
.as-login-product-preview > span { margin: 8px 3px 0; padding: 7px 9px; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; display: inline-flex; align-items: center; gap: 5px; color: #fff; background: rgba(13,29,25,.78); font-size: 10px; font-weight: 720; }
.as-login-preview-badges { position: absolute; right: 17px; bottom: 17px; left: 17px; display: flex; flex-wrap: wrap; gap: 6px; }
.as-login-preview-badges span { padding: 7px 9px; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; color: #fff; background: rgba(13,29,25,.84); font-size: 10px; font-weight: 720; backdrop-filter: blur(8px); }
.as-login-metrics { margin-top: 34px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.as-login-metrics span { min-height: 112px; padding: 16px; border: 1px solid #3b554e; border-radius: 13px; display: flex; flex-direction: column; justify-content: flex-end; background: rgba(255,255,255,.045); }
.as-login-metrics strong, .as-login-metrics small { display: block; }
.as-login-metrics strong { color: #fff; font-size: 12px; line-height: 1.4; }
.as-login-metrics strong i { margin-right: 4px; color: #6ad6c5; }
.as-login-metrics small { margin-top: 6px; color: #adc2bc; font-size: 10px; line-height: 1.45; }
.as-login-card, .as-recovery-card { padding: 47px 44px; background: #fff; }
.as-login-card h2, .as-recovery-card h1 { margin: 0 0 9px; color: var(--mk-charcoal); font-size: 27px; letter-spacing: -.035em; }
.as-login-card-head { margin-bottom: 25px; }
.as-login-card-head p { margin: 0; color: var(--mk-muted); font-size: 13px; line-height: 1.55; }
.as-login-subtitle, .as-recovery-subtitle { margin: 0 0 28px; color: var(--mk-muted); font-size: 14px; line-height: 1.55; }
.as-login-card form, .as-recovery-card form { display: grid; gap: 8px; }
.as-login-field, .as-recovery-field { display: grid; gap: 7px; }
.as-login-field label, .as-recovery-field label, .as-login-card form > label:not(.as-check), .as-recovery-card form > label, .as-field-label-row { color: #33433e; font-size: 12px; font-weight: 760; }
.as-field-label-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.as-field-label-row a { color: var(--mk-brand-dark); font-size: 11px; font-weight: 720; }
.as-login-field input, .as-recovery-field input, .as-login-card form > input, .as-recovery-card input, .mk-demo-form input:not([type="checkbox"]), .mk-demo-form select, .mk-demo-form textarea { width: 100%; min-height: 47px; padding: 11px 13px; border: 1px solid #ccd9d5; border-radius: 10px; color: var(--mk-ink); background: #fff; font-size: 14px; transition: border-color .16s ease, box-shadow .16s ease; }
.as-login-field input:focus, .as-recovery-field input:focus, .as-login-card form > input:focus, .as-recovery-card input:focus, .mk-demo-form input:not([type="checkbox"]):focus, .mk-demo-form select:focus, .mk-demo-form textarea:focus { border-color: var(--mk-brand); outline: 0; box-shadow: 0 0 0 4px rgba(15,159,139,.12); }
.as-login-card input[aria-invalid="true"] { border-color: #e3a39c; background: #fffafa; }
.as-login-card input[aria-invalid="true"]:focus { border-color: #c53b2f; box-shadow: 0 0 0 4px rgba(197,59,47,.1); }
.as-auth-error { margin: 0 0 21px; padding: 13px 14px; border: 1px solid #f1c4bf; border-radius: 11px; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; gap: 11px; color: #7d271f; background: #fff8f7; }
.as-auth-error__icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #b73529; background: #fde8e5; font-size: 14px; }
.as-auth-error strong { display: block; color: #7d271f; font-size: 12px; line-height: 1.4; }
.as-auth-error p { margin: 3px 0 0; color: #9a3b32; font-size: 12px; line-height: 1.48; }
.as-login-error, .as-recovery-error { margin: 0; color: #b42318; font-size: 12px; line-height: 1.45; }
.as-login-check, .as-check { margin-top: 4px; display: flex; align-items: center; gap: 8px; color: var(--mk-muted); font-size: 12px; }
.as-login-check input, .as-check input { width: 16px; height: 16px; accent-color: var(--mk-brand); }
.as-login-button, .as-recovery-button, .as-login-card form > button[type="submit"], .as-recovery-submit { width: 100%; min-height: 46px; border: 1px solid transparent; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #fff; background: var(--mk-brand); font-weight: 760; text-decoration: none; cursor: pointer; }
.as-login-submit { margin-top: 12px; }
.as-login-card form > button[type="submit"]:hover, .as-recovery-submit:hover { color: #fff; background: var(--mk-brand-dark); }
.as-login-separator, .as-separator { margin: 20px 0 14px; display: flex; align-items: center; gap: 10px; color: #8b9693; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.as-login-separator::before, .as-login-separator::after, .as-separator span { height: 1px; flex: 1; content: ""; background: var(--mk-line); }
.as-login-help, .as-login-note { color: var(--mk-muted); font-size: 12px; line-height: 1.55; text-align: center; }
.as-login-help a, .as-login-note a { color: var(--mk-brand-dark); font-weight: 760; }
.as-login-card > a.button.secondary { width: 100%; min-height: 46px; margin-top: 10px; border: 1px solid #cbd8d4; border-radius: 11px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--mk-ink); background: #f8faf9; font-size: 13px; font-weight: 750; text-decoration: none; }
.as-login-card > a.button.secondary:hover { border-color: #abcac2; color: var(--mk-brand-dark); background: var(--mk-brand-soft); }
.as-recovery-shell, .as-auth-single { width: min(520px, 100%); display: block; }
.as-recovery-shell .as-login-brand { display: none; }
.as-recovery-card, .as-auth-single { border: 1px solid var(--mk-line); border-radius: 21px; background: #fff; box-shadow: var(--mk-shadow-sm); }
.as-recovery-card { width: 100%; }
.as-recovery-icon { width: 46px; height: 46px; margin-bottom: 22px; border-radius: 13px; display: grid; place-items: center; color: var(--mk-brand-dark); background: var(--mk-brand-soft); font-size: 18px; }
.as-recovery-status, .as-recovery-security-note { padding: 12px 14px; border-radius: 10px; color: #36514a; background: #f0f7f5; font-size: 12px; line-height: 1.55; }
.as-recovery-back, .as-back-link { margin-top: 22px; display: inline-flex; align-items: center; gap: 7px; color: var(--mk-brand-dark); font-size: 12px; font-weight: 750; }
.as-recovery-privacy { margin: 18px 0 0; color: var(--mk-muted); font-size: 11px; line-height: 1.5; }
.as-password-wrap, .as-password-field { position: relative; }
.as-password-wrap input, .as-password-field input { padding-right: 45px; }
.as-password-toggle, .as-password-field button { position: absolute; top: 50%; right: 8px; width: 34px; height: 34px; border: 0; border-radius: 7px; color: var(--mk-muted); background: transparent; transform: translateY(-50%); cursor: pointer; }
.as-password-rules { margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; list-style: none; color: var(--mk-muted); font-size: 11px; }
.as-password-rules li::before { margin-right: 5px; content: "○"; color: #9ca9a5; }
.as-password-rules li.valid, .as-password-rules li.is-valid { color: #147866; }
.as-password-rules li.valid::before, .as-password-rules li.is-valid::before { content: "✓"; color: var(--mk-brand); }

/* Demo flow refinements inside compact auth shell */
.mk-auth-main .mk-demo-section { width: min(1120px, 100%); padding: 0; background: transparent; }
.mk-auth-main .mk-demo-grid { border: 1px solid var(--mk-line); border-radius: 25px; overflow: hidden; background: #fff; box-shadow: var(--mk-shadow); }
.mk-auth-main .mk-demo-copy { padding: 50px; color: #dceae6; background: linear-gradient(145deg, #172522, #27443d); }
.mk-auth-main .mk-demo-copy h1 { color: #fff; letter-spacing: -.04em; }
.mk-auth-main .mk-demo-copy p { color: #b8cac5; }
.mk-auth-main .mk-demo-form { padding: 45px; background: #fff; }
.mk-demo-form .mk-consent { grid-column: 1 / -1; margin: 0; padding: 2px 0; display: grid !important; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 10px; }
.mk-demo-form .mk-consent input[type="checkbox"] { width: 18px !important; height: 18px !important; min-height: 18px !important; margin: 2px 0 0; padding: 0; accent-color: var(--mk-brand); }
.mk-demo-form .mk-consent > span { min-width: 0; margin: 0 !important; line-height: 1.55; }
.mk-demo-form .google-auth-separator { margin-top: 22px; }
.mk-auth-main .mk-demo-card { border: 1px solid var(--mk-line); border-radius: 21px; background: #fff; box-shadow: var(--mk-shadow-sm); }

[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (max-width: 1050px) {
    .mk-nav { display: none; }
    .mk-menu-button { display: grid; }
    .mk-header-actions { margin-left: auto; }
    body.mk-menu-open .mk-header-row { flex-wrap: wrap; padding-bottom: 15px; }
    body.mk-menu-open .mk-nav { order: 4; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
    body.mk-menu-open .mk-nav > a, body.mk-menu-open .mk-resource-menu > summary { width: 100%; }
    body.mk-menu-open .mk-resource-menu > div { position: static; width: 100%; border: 0; box-shadow: none; }
    .mk-hero-grid { grid-template-columns: 1fr; gap: 48px; }
    .mk-hero-copy { max-width: 780px; }
    .mk-product-shot { max-width: 800px; }
    .mk-feature-grid { grid-template-columns: repeat(2, 1fr); }
    .mk-audience-grid { grid-template-columns: repeat(2, 1fr); }
    .mk-tour { grid-template-columns: 280px minmax(0, 1fr); gap: 25px; }
}

@media (max-width: 780px) {
    body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
    .mk-wrap, .mk-auth-wrap { width: min(100% - 28px, var(--mk-wrap)); }
    .mk-announcement { display: none; }
    .mk-header-row { min-height: 68px; gap: 10px; }
    .mk-brand small { display: none; }
    .mk-header-actions .mk-link-button { display: none; }
    .mk-header-actions .mk-button { padding-inline: 12px; font-size: 12px; }
    body.mk-menu-open .mk-nav { grid-template-columns: 1fr; }
    .mk-hero { padding: 55px 0 52px; }
    .mk-hero-copy h1 { font-size: clamp(38px, 11vw, 52px); }
    .mk-hero-grid { gap: 36px; }
    .mk-proof-grid { grid-template-columns: 1fr 1fr; padding: 13px 0; }
    .mk-proof-grid span { min-height: 48px; border-right: 0; }
    .mk-section { padding: 70px 0; }
    .mk-feature-grid { grid-template-columns: 1fr; }
    .mk-feature-grid article { min-height: 0; }
    .mk-tour { grid-template-columns: 1fr; }
    .mk-tour-tabs { grid-template-columns: repeat(4, minmax(160px, 1fr)); overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x mandatory; }
    .mk-tour-tab { scroll-snap-align: start; }
    .mk-tour-caption { display: block; }
    .mk-tour-caption p { margin-top: 8px; }
    .mk-workflow { grid-template-columns: 1fr; gap: 29px; }
    .mk-workflow article { padding: 0 0 0 68px; }
    .mk-workflow article:not(:last-child)::after { top: 50px; right: auto; bottom: -29px; left: 25px; width: 1px; height: auto; }
    .mk-workflow b { position: absolute; top: 0; left: 0; }
    .mk-workflow h3 { margin-top: 0; padding-top: 3px; }
    .mk-continuity-grid { grid-template-columns: 1fr; gap: 35px; }
    .mk-security-list { grid-template-columns: 1fr; }
    .mk-final-card { padding: 35px 28px; }
    .mk-page-hero { padding: 38px 0 50px; }
    .mk-auth-main { padding: 34px 14px; }
    .as-login-shell { display: block; }
    .as-login-brand { display: none; }
    .as-login-card, .as-recovery-card { padding: 34px 28px; }
    .mk-auth-header nav .mk-button { display: none; }
    .mk-auth-footer .mk-auth-wrap { padding: 18px 0; display: grid; }
    .mk-auth-footer nav { justify-content: flex-start; }
    .mk-auth-main .mk-demo-grid { display: block; }
    .mk-auth-main .mk-demo-copy { padding: 35px 27px; }
    .mk-auth-main .mk-demo-form { padding: 32px 25px; }
    .mk-mobile-bar { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
    .mk-auth-body { padding-bottom: 0; }
}

@media (max-width: 520px) {
    .mk-hero-copy h1 { font-size: 39px; }
    .mk-hero-actions { display: grid; }
    .mk-hero-actions .mk-button { width: 100%; }
    .mk-product-shot { padding: 7px; border-radius: 16px; }
    .mk-product-shot img { border-radius: 10px; }
    .mk-shot-label { right: 15px; bottom: -17px; }
    .mk-proof-grid { grid-template-columns: 1fr; }
    .mk-proof-grid span { justify-content: flex-start; border-bottom: 1px solid var(--mk-line); }
    .mk-proof-grid span:last-child { border-bottom: 0; }
    .mk-audience-grid { grid-template-columns: 1fr; }
    .mk-audience-grid article { min-height: 190px; }
    .mk-auth-header { min-height: 66px; }
    .mk-auth-header .mk-brand small, .mk-auth-back i { display: none; }
    .mk-auth-back { font-size: 12px; }
    .mk-auth-footer nav { gap: 11px; }
    .as-login-card, .as-recovery-card { padding: 29px 21px; }
    .as-password-rules { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    [data-reveal] { opacity: 1; transform: none; }
}