/* =========================================================
   NAAS Portal – Marketing CSS
   Complete redesign: clean, modern, human-coded
   ========================================================= */

@font-face {
    font-family: "Google Sans";
    src: url("/assets/fonts/GoogleSans-Regular.ttf") format("truetype");
    font-display: swap;
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: "Google Sans";
    src: url("/assets/fonts/GoogleSans-SemiBold.ttf") format("truetype");
    font-display: swap;
    font-style: normal;
    font-weight: 600;
}

@font-face {
    font-family: "Google Sans";
    src: url("/assets/fonts/GoogleSans-Bold.ttf") format("truetype");
    font-display: swap;
    font-style: normal;
    font-weight: 700;
}

@font-face {
    font-family: "Inter Variable";
    src: url("/assets/fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
    font-display: swap;
    font-style: normal;
    font-weight: 100 900;
}

/* ── Variables ─────────────────────────────────────────── */
:root {
    --ink:           #0d1b33;
    --ink-mid:       #21314f;
    --muted:         #63708a;
    --primary:       #1f6fff;
    --primary-hover: #0d57d4;
    --primary-deep:  #0f2b6d;
    --primary-soft:  #edf4ff;
    --sky:           #4994ff;
    --teal:          #11845b;
    --line:          #d8dfeb;
    --line-soft:     #eaeff6;
    --paper:         #f6f9ff;
    --white:         #ffffff;
    --shell:         1240px;
    --r-sm:          8px;
    --r-md:          14px;
    --r-lg:          22px;
    --r-xl:          32px;
    --sh-sm:         0 2px 8px rgba(13, 27, 51, .06);
    --sh-md:         0 6px 24px rgba(13, 27, 51, .08);
    --sh-lg:         0 18px 52px rgba(13, 27, 51, .10);
    --t:             160ms ease;

    /* Legacy aliases for purchase page compat */
    --marketing-blue:       var(--primary);
    --marketing-blue-deep:  var(--primary-deep);
    --marketing-blue-soft:  var(--primary-soft);
    --marketing-accent:     var(--sky);
    --marketing-ink:        var(--ink);
    --marketing-ink-soft:   var(--muted);
    --marketing-ink-muted:  var(--muted);
    --marketing-line:       var(--line);
    --marketing-card:       var(--white);
    --marketing-panel:      var(--paper);
    --marketing-shell-width: var(--shell);
    --marketing-shadow-soft: var(--sh-md);
    --marketing-shadow-card: var(--sh-lg);
    --marketing-transition:  var(--t);
}

/* ── Base ──────────────────────────────────────────────── */
.marketing-body {
    margin: 0;
    color: var(--ink);
    font-family: "Inter Variable", "Inter", sans-serif;
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}

.marketing-body *,
.marketing-body *::before,
.marketing-body *::after { box-sizing: border-box; }

.marketing-body a { color: inherit; text-decoration: none; }
.marketing-body img { max-width: 100%; }

.marketing-body [hidden],
.mk-pricing [hidden],
.purchase-form [hidden] {
    display: none !important;
}

.marketing-shell {
    width: min(var(--shell), 85%);
    margin: 0 auto;
}

.marketing-main { padding-bottom: 0; }

/* ── Section anchor offsets ────────────────────────────── */
#highlights,
#capabilities,
#pricing,
#solutions,
#features,
#mobile {
    /* Match the 73px sticky header exactly so a jumped-to section sits flush
       under the header, with no sliver of the previous section showing. */
    scroll-margin-top: 73px;
}

/* ── Header ────────────────────────────────────────────── */
.marketing-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid var(--line-soft);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.marketing-header__suite { min-height: 72px; }

.marketing-header__suite-inner,
.marketing-header > .marketing-shell {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "brand nav actions";
    align-items: center;
    gap: 24px;
    min-height: 72px;
}

.brand-mark {
    grid-area: brand;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.brand-mark:hover { color: var(--primary); }

.brand-mark__logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 10px;
}

.suite-nav {
    grid-area: nav;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.marketing-actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    gap: 12px;
    justify-self: end;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.suite-nav a,
.marketing-link {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: var(--r-sm);
    color: var(--ink-mid);
    font-size: 14px;
    font-weight: 600;
    transition: color var(--t), background var(--t);
}

.suite-nav a:hover,
.marketing-link:hover {
    color: var(--primary);
    background: var(--primary-soft);
}

.suite-nav a.is-active,
.suite-nav a[aria-current="page"] {
    color: var(--primary);
    background: var(--primary-soft);
}

.suite-nav a:focus-visible,
.marketing-link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.marketing-link {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    padding: 0;
}

.marketing-link:hover { background: none; }

/* ── Buttons ───────────────────────────────────────────── */
.marketing-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 22px;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: transform var(--t), background var(--t), border-color var(--t), box-shadow var(--t);
}

.marketing-btn:hover { transform: translateY(-1px); }

.marketing-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

/* Header login button */
.marketing-header .marketing-btn--ghost {
    min-height: 38px;
    padding: 0 16px;
    border-radius: var(--r-sm);
    color: var(--white);
    font-size: 13px;
    background: var(--primary);
    border-color: var(--primary-hover);
    box-shadow: 0 2px 8px rgba(31, 111, 255, .24);
}

.marketing-header .marketing-btn--ghost:hover {
    background: var(--primary-hover);
    color: var(--white);
}

/* Solid primary */
.marketing-btn--primary,
.marketing-btn--hero-primary,
.marketing-btn--pricing-banner,
.marketing-btn--pricing-card {
    color: var(--white);
    background: var(--primary);
    border-color: var(--primary-hover);
    box-shadow: 0 4px 16px rgba(31, 111, 255, .28);
}

.marketing-btn--primary:hover,
.marketing-btn--hero-primary:hover,
.marketing-btn--pricing-banner:hover,
.marketing-btn--pricing-card:hover {
    background: var(--primary-hover);
    color: var(--white);
    box-shadow: 0 8px 24px rgba(31, 111, 255, .32);
}

/* Outlined on dark background */
.marketing-btn--hero-secondary {
    color: rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .28);
}

.marketing-btn--hero-secondary:hover {
    background: rgba(255, 255, 255, .14);
    color: var(--white);
    border-color: rgba(255, 255, 255, .44);
}

/* Outline on light bg */
.marketing-btn--secondary,
.marketing-btn--ghost {
    color: var(--ink);
    background: var(--white);
    border-color: var(--line);
    box-shadow: var(--sh-sm);
}

.marketing-btn--secondary:hover,
.marketing-btn--ghost:hover {
    color: var(--primary);
    border-color: var(--primary);
}

/* Outline on dark bg — must use higher specificity to beat inherited color */
.mk-cta .marketing-btn--outline-light,
.mk-hero .marketing-btn--outline-light,
.marketing-btn--outline-light {
    color: var(--white) !important;
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .36);
}

.mk-cta .marketing-btn--outline-light:hover,
.mk-hero .marketing-btn--outline-light:hover,
.marketing-btn--outline-light:hover {
    background: rgba(255, 255, 255, .18);
    color: var(--white) !important;
}

/* ── Section tag / eyebrow ─────────────────────────────── */
.section-tag {
    display: inline-flex;
    align-items: center;
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────────────────── */
.mk-hero {
    background: var(--ink);
    color: var(--white);
    padding: 80px 0 0;
    overflow: hidden;
}

.mk-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}

.mk-hero__copy {
    padding-bottom: 80px;
}

.mk-region-pill {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .84);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.marketing-region--india .mk-region-pill {
    color: #d8f7e9;
    border-color: rgba(43, 181, 122, .42);
}

.mk-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .86);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
}

.mk-hero__eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sky);
    flex-shrink: 0;
}

.mk-hero h1 {
    margin: 22px 0 0;
    font-family: "Google Sans", sans-serif;
    font-size: clamp(46px, 5.5vw, 72px);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.04;
    color: var(--white);
}

.mk-hero h1 em {
    font-style: normal;
    color: var(--sky);
}

.mk-hero__sub {
    max-width: 520px;
    margin: 22px 0 0;
    color: rgba(255, 255, 255, .72);
    font-size: 17px;
    line-height: 1.65;
}

.mk-hero__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.mk-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px;
}

.mk-hero__chips span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .64);
    font-size: 12px;
    font-weight: 600;
}

/* Hero browser mockup */
.mk-hero__visual {
    align-self: end;
    padding-bottom: 0;
}

.mk-browser {
    overflow: hidden;
    border-radius: 16px 16px 0 0;
    background: var(--white);
    box-shadow: 0 -8px 40px rgba(0, 0, 0, .32), 0 0 0 1px rgba(255, 255, 255, .08);
}

.mk-browser__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 16px;
    background: #141e30;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.mk-browser__dots {
    display: flex;
    gap: 6px;
}

.mk-browser__dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
}

.mk-browser__url {
    flex: 1;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .07);
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, .4);
    font-size: 12px;
    font-weight: 500;
}

.mk-browser__body {
    display: grid;
    grid-template-columns: 168px 1fr;
    min-height: 360px;
}

.mk-browser__sidebar {
    display: grid;
    align-content: start;
    gap: 3px;
    padding: 16px 12px;
    background: var(--paper);
    border-right: 1px solid var(--line-soft);
}

.mk-browser__sidebar span {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border-radius: var(--r-sm);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--t), color var(--t);
}

.mk-browser__sidebar span:hover {
    background: var(--line-soft);
    color: var(--ink-mid);
}

.mk-browser__sidebar span.is-active {
    background: var(--primary);
    color: var(--white);
    box-shadow: 0 4px 12px rgba(31, 111, 255, .3);
}

.mk-browser__sidebar span.is-active:hover {
    background: var(--primary);
    color: var(--white);
}

/* Demo content panels */
.mk-browser__pill {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

.mk-browser__pill--green { background: #e7faf2; color: #11845b; }
.mk-browser__pill--blue  { background: var(--primary-soft); color: var(--primary); }
.mk-browser__pill--amber { background: #fff6df; color: #c58100; }

.mk-browser__canvas {
    padding: 18px;
    background: var(--white);
}

.mk-browser__kpi {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.mk-browser__kpi-card {
    padding: 14px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    background: var(--paper);
}

.mk-browser__kpi-card small {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mk-browser__kpi-card strong {
    display: block;
    margin-top: 8px;
    color: var(--ink);
    font-family: "Google Sans", sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.04em;
}

.mk-browser__chart {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 7px;
    align-items: end;
    height: 100px;
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    background: var(--paper);
}

.mk-browser__chart-label {
    padding: 0 14px 8px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.mk-browser__chart i {
    display: block;
    border-radius: 4px 4px 2px 2px;
    background: var(--primary);
    opacity: .7;
}

.mk-browser__chart i:nth-child(1) { height: 32px; }
.mk-browser__chart i:nth-child(2) { height: 48px; }
.mk-browser__chart i:nth-child(3) { height: 72px; }
.mk-browser__chart i:nth-child(4) { height: 56px; opacity: .5; }
.mk-browser__chart i:nth-child(5) { height: 88px; }
.mk-browser__chart i:nth-child(6) { height: 76px; background: var(--sky); opacity: 1; }

.mk-browser__rows {
    display: grid;
    gap: 7px;
    margin-top: 10px;
}

.mk-browser__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    background: var(--white);
}

.mk-browser__row b {
    color: var(--ink-mid);
    font-size: 12px;
    font-weight: 600;
}

.mk-browser__row span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
}

/* ── Module strip ──────────────────────────────────────── */
.mk-modules {
    background: var(--white);
    border-bottom: 1px solid var(--line-soft);
    padding: 0;
    overflow: hidden;
}

.mk-modules__inner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 28px 0;
}

.mk-modules__label {
    flex-shrink: 0;
    padding: 4px 20px 0 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-right: 1px solid var(--line-soft);
    margin-right: 4px;
}

.mk-modules__chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mk-modules__chips span {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink-mid);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: border-color var(--t), background var(--t), color var(--t);
}

.mk-modules__chips span:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary);
}

/* ── Platform / Why section ────────────────────────────── */
.mk-platform {
    padding: 96px 0;
    background: var(--white);
}

.mk-platform__inner {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 48px;
    align-items: start;
}

.mk-platform__copy .section-tag { margin-bottom: 16px; }

.mk-platform__copy h2 {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: clamp(36px, 4vw, 52px);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.06;
    color: var(--ink);
}

.mk-platform__copy p {
    margin: 18px 0 0;
    max-width: 36ch;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.7;
}

.mk-platform__points {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mk-platform__point {
    padding: 22px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    background: var(--paper);
    transition: border-color var(--t), box-shadow var(--t);
}

.mk-platform__point:hover {
    border-color: var(--line);
    box-shadow: var(--sh-sm);
}

.mk-platform__point strong {
    display: block;
    color: var(--ink);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.mk-platform__point span {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}

/* ── Feature sections ──────────────────────────────────── */
.mk-feature {
    padding: 88px 0;
}

.mk-feature--alt { background: var(--paper); }
.mk-feature--white { background: var(--white); }

.mk-feature__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px;
    align-items: center;
}

.mk-feature--flip .mk-feature__copy { order: 2; }
.mk-feature--flip .mk-feature__visual { order: 1; }

.mk-feature__copy .section-tag { margin-bottom: 14px; }

.mk-feature__copy h2 {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: clamp(32px, 3.6vw, 46px);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.08;
    color: var(--ink);
}

.mk-feature__copy p {
    margin: 16px 0 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.7;
}

.mk-feature__list {
    display: grid;
    gap: 10px;
    margin-top: 24px;
    list-style: none;
    padding: 0;
}

.mk-feature__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--ink-mid);
    font-size: 14px;
    line-height: 1.6;
}

.mk-feature__list li::before {
    content: "";
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--primary-soft);
    border: 1.5px solid var(--primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%231f6fff' d='M2.5 6l2.5 2.5 4.5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px;
}

/* Feature visual mockup panels */
.mk-feature__visual {
    border-radius: var(--r-xl);
    overflow: hidden;
    border: 1px solid var(--line-soft);
    background: var(--white);
    box-shadow: var(--sh-lg);
}

.mk-feature__mockup {
    padding: 20px;
}

.mk-mockup__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: var(--r-md);
    margin-bottom: 14px;
    background: var(--ink);
    color: var(--white);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.mk-mockup__bar i {
    width: 12px;
    height: 12px;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .2);
    flex-shrink: 0;
}

.mk-mockup__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.mk-mockup__stat {
    padding: 14px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    background: var(--paper);
}

.mk-mockup__stat small {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.mk-mockup__stat strong {
    display: block;
    margin-top: 6px;
    color: var(--ink);
    font-family: "Google Sans", sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.04em;
}

.mk-mockup__stat.is-blue strong { color: var(--primary); }
.mk-mockup__stat.is-teal strong { color: var(--teal); }

.mk-mockup__rows {
    display: grid;
    gap: 8px;
}

.mk-mockup__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    background: var(--white);
}

.mk-mockup__row:first-child {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.mk-mockup__row b {
    color: var(--ink-mid);
    font-size: 13px;
    font-weight: 600;
}

.mk-mockup__row span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.mk-mockup__row .mk-status {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.mk-status--green {
    background: #e7faf2;
    color: var(--teal);
}

.mk-status--blue {
    background: var(--primary-soft);
    color: var(--primary);
}

.mk-status--amber {
    background: #fff6df;
    color: #c58100;
}

/* Field ops mockup with phone / form link card */
.mk-mockup__form-card {
    margin-top: 14px;
    padding: 16px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    background: var(--paper);
}

.mk-mockup__form-card strong {
    display: block;
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
}

.mk-mockup__form-card p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.mk-mockup__form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 12px;
}

.mk-mockup__form-grid span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--white);
    color: var(--ink-mid);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

/* HR mockup */
.mk-mockup__hr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    background: var(--paper);
}

.mk-mockup__hr-header strong {
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
}

.mk-mockup__hr-header small {
    color: var(--muted);
    font-size: 12px;
}

.mk-mockup__hr-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.mk-mockup__hr-stat {
    padding: 12px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    text-align: center;
    background: var(--white);
}

.mk-mockup__hr-stat strong {
    display: block;
    color: var(--ink);
    font-family: "Google Sans", sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.04em;
}

.mk-mockup__hr-stat small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* ── Mobile App section ────────────────────────────────── */
.mk-mobile {
    padding: 96px 0;
    background: var(--ink);
    color: var(--white);
}

.mk-mobile__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
}

.mk-mobile__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(73, 148, 255, .15);
    border: 1px solid rgba(73, 148, 255, .3);
    color: var(--sky);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.mk-mobile h2 {
    margin: 18px 0 0;
    font-family: "Google Sans", sans-serif;
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.06;
    color: var(--white);
}

.mk-mobile__sub {
    margin: 16px 0 0;
    color: rgba(255, 255, 255, .68);
    font-size: 16px;
    line-height: 1.65;
}

.mk-mobile__features {
    display: grid;
    gap: 14px;
    margin-top: 32px;
}

.mk-mobile__feature {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .04);
    transition: border-color var(--t), background var(--t);
}

.mk-mobile__feature:hover {
    border-color: rgba(73, 148, 255, .3);
    background: rgba(73, 148, 255, .06);
}

.mk-mobile__feature-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--r-sm);
    background: rgba(73, 148, 255, .15);
    border: 1px solid rgba(73, 148, 255, .2);
    display: grid;
    place-items: center;
    color: var(--sky);
    font-size: 16px;
    font-weight: 700;
}

.mk-mobile__feature-body strong {
    display: block;
    color: var(--white);
    font-size: 14px;
    font-weight: 700;
}

.mk-mobile__feature-body span {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, .56);
    font-size: 13px;
    line-height: 1.5;
}

/* Desktop app window mockup */
.mk-desktop-win {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background: #111827;
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 32px 64px rgba(0, 0, 0, .44), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.mk-desktop-win__titlebar {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 42px;
    padding: 0 16px;
    background: #0d1520;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.mk-desktop-win__controls {
    display: flex;
    gap: 7px;
}

.mk-desktop-win__controls span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
}

.mk-desktop-win__controls span:nth-child(1) { background: #ff5f57; }
.mk-desktop-win__controls span:nth-child(2) { background: #febc2e; }
.mk-desktop-win__controls span:nth-child(3) { background: #28c840; }

.mk-desktop-win__title {
    flex: 1;
    text-align: center;
    color: rgba(255, 255, 255, .4);
    font-size: 12px;
    font-weight: 600;
}

.mk-desktop-win__body {
    display: grid;
    grid-template-columns: 160px 1fr;
    min-height: 340px;
}

.mk-desktop-win__sidebar {
    display: grid;
    align-content: start;
    gap: 3px;
    padding: 14px 10px;
    background: #0d1520;
    border-right: 1px solid rgba(255, 255, 255, .06);
}

.mk-desktop-win__sidebar span {
    display: flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 7px;
    color: rgba(255, 255, 255, .5);
    font-size: 12px;
    font-weight: 600;
}

.mk-desktop-win__sidebar span.is-active {
    background: var(--primary);
    color: var(--white);
}

.mk-desktop-win__content {
    padding: 16px;
}

.mk-desktop-win__kpis {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
    margin-bottom: 12px;
}

.mk-desktop-win__kpi {
    padding: 12px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .07);
}

.mk-desktop-win__kpi small {
    display: block;
    color: rgba(255, 255, 255, .4);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.mk-desktop-win__kpi strong {
    display: block;
    margin-top: 6px;
    color: var(--sky);
    font-family: "Google Sans", sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.04em;
}

.mk-desktop-win__rows {
    display: grid;
    gap: 6px;
}

.mk-desktop-win__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .06);
}

.mk-desktop-win__row b {
    flex: 1;
    color: rgba(255, 255, 255, .78);
    font-size: 12px;
    font-weight: 600;
}

.mk-desktop-win__row small {
    color: rgba(255, 255, 255, .36);
    font-size: 11px;
}

.mk-desktop-win__badge {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(73, 148, 255, .2);
    color: var(--sky);
}

/* Coming soon badge for desktop section */
.mk-mobile__coming-soon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(249, 158, 11, .15);
    border: 1px solid rgba(249, 158, 11, .3);
    color: #f59e0b;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-top: 20px;
}

/* ── Capabilities section ──────────────────────────────── */
.mk-caps {
    padding: 96px 0;
    background: var(--paper);
}

.mk-caps__heading {
    max-width: 820px;
    margin-bottom: 48px;
}

.mk-caps__heading .section-tag { margin-bottom: 14px; }

.mk-caps__heading h2 {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.06;
    color: var(--ink);
}

.mk-caps__heading p {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.7;
}

.mk-caps__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.mk-caps__card {
    padding: 24px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    background: var(--white);
    transition: border-color var(--t), box-shadow var(--t);
}

.mk-caps__card:hover {
    border-color: var(--line);
    box-shadow: var(--sh-sm);
}

.mk-caps__card-head h3 {
    margin: 0;
    color: var(--ink);
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.mk-caps__card-head p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

.mk-caps__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 18px;
}

.mk-caps__pill {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--line-soft);
    background: var(--paper);
    color: var(--ink-mid);
    font-size: 12px;
    font-weight: 650;
    line-height: 1;
    transition: border-color var(--t), background var(--t), color var(--t);
}

.mk-caps__card:nth-child(1) .mk-caps__pill:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.mk-caps__card:nth-child(2) .mk-caps__pill:hover { border-color: #0a6b50; background: #e7faf2; color: var(--teal); }
.mk-caps__card:nth-child(3) .mk-caps__pill:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.mk-caps__card:nth-child(4) .mk-caps__pill:hover { border-color: #8a6f18; background: #fff6df; color: #c58100; }
.mk-caps__card:nth-child(5) .mk-caps__pill:hover { border-color: #0a6b50; background: #e7faf2; color: var(--teal); }
.mk-caps__card:nth-child(6) .mk-caps__pill:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }

/* ── Pricing section ───────────────────────────────────── */
.mk-pricing {
    padding: 22px 0 28px;
    background: var(--white);
}

.mk-pricing__heading {
    max-width: 600px;
    margin: 0 auto 14px;
    text-align: center;
}

.mk-pricing__heading .section-tag { margin-bottom: 6px; }

.mk-pricing__heading h2 {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.08;
    color: var(--ink);
}

.mk-pricing__heading p {
    margin: 6px auto 0;
    max-width: 500px;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.45;
}

/* Region is auto-detected and locked per visitor; no visible region control. */

.mk-pricing__core {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    max-width: 800px;
    margin: 0 auto 14px;
    padding: 7px 16px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    background: var(--paper);
    text-align: center;
}

.mk-pricing__core strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
}

.mk-pricing__core strong::before {
    content: "\2713";
    color: var(--teal);
    font-weight: 900;
}

.mk-pricing__core span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.mk-pricing__board {
    max-width: 1040px;
    margin: 0 auto;
    border: 1px solid var(--line);
    border-radius: 5px;
    overflow: hidden;
    background: var(--white);
}

.mk-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 3px;
    border-radius: 999px;
    background: var(--line-soft);
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    font-style: normal;
    line-height: 1;
    cursor: help;
    vertical-align: middle;
}

.mk-info:hover,
.mk-info:focus-visible {
    background: var(--primary-soft);
    color: var(--primary);
    outline: none;
}

.mk-pricing-builder {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 0;
    background: var(--white);
}

.mk-pricing-builder__controls {
    display: grid;
    gap: 0;
}

.mk-pricing-control {
    min-width: 0;
    margin: 0;
    padding: 11px 18px;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
}

.mk-pricing-control:last-child {
    border-bottom: 0;
}

.mk-pricing-control legend {
    float: left;
    width: 100%;
    margin: 0 0 7px;
    padding: 0;
    color: var(--muted);
    font-family: "Inter Variable", "Inter", sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.mk-pricing-control legend + * {
    clear: both;
}

.mk-pricing-plan-grid,
.mk-pricing-workspaces {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.mk-pricing-option,
.mk-pricing-workspace {
    position: relative;
    display: grid;
    align-content: start;
    gap: 2px;
    padding: 9px 11px;
    border: 1.5px solid var(--line);
    border-radius: 5px;
    background: var(--white);
    cursor: pointer;
    transition: border-color var(--t), background var(--t);
}

.mk-pricing-option input,
.mk-pricing-workspace input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mk-pricing-option span,
.mk-pricing-workspace span {
    padding-right: 24px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
}

.mk-pricing-option strong {
    margin-top: 1px;
    color: var(--ink);
    font-family: "Google Sans", sans-serif;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.mk-pricing-option small,
.mk-pricing-workspace small {
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.35;
}

.mk-pricing-workspace em {
    align-self: start;
    margin-top: 2px;
    color: var(--teal);
    font-size: 11.5px;
    font-style: normal;
    font-weight: 800;
}

.mk-pricing-option::after,
.mk-pricing-workspace::after {
    content: "";
    position: absolute;
    top: 11px;
    right: 11px;
    width: 17px;
    height: 17px;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    transition: background var(--t), border-color var(--t);
}

.mk-pricing-option:hover,
.mk-pricing-workspace:hover {
    border-color: var(--primary);
}

.mk-pricing-option.is-selected,
.mk-pricing-workspace.is-selected {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.mk-pricing-option.is-selected::after,
.mk-pricing-workspace.is-selected::after {
    border-color: var(--primary);
    background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.mk-pricing-option.is-selected strong {
    color: var(--primary);
}

.mk-pricing-workspace.is-disabled {
    cursor: default;
    opacity: .55;
}

.mk-pricing-segments {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--paper);
}

.mk-pricing-segments label {
    display: flex;
    margin: 0;
    cursor: pointer;
}

.mk-pricing-segments input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mk-pricing-segments span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 18px;
    border-radius: 4px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    transition: background var(--t), color var(--t);
}

.mk-pricing-segments input:checked + span {
    background: var(--ink);
    color: var(--white);
}

.mk-pricing-note {
    margin: 9px 0 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.mk-pricing-volume {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 200px));
    gap: 12px;
}

.mk-pricing-volume label {
    display: grid;
    gap: 5px;
}

.mk-pricing-volume span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.mk-pricing-volume input {
    width: 100%;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--white);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
}

.mk-pricing-volume input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

.mk-pricing-volume small {
    color: var(--muted);
    font-size: 11px;
}

/* Live estimate — dark gradient "order summary" panel */
.mk-pricing-summary {
    position: sticky;
    top: 92px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 20px;
    border-left: none;
    color: #fff;
    background:
        radial-gradient(circle at top right, rgba(73, 148, 255, .22), transparent 42%),
        linear-gradient(160deg, #0d1b33 0%, #1a3a7a 55%, #1f6fff 135%);
}

.mk-pricing-summary__eyebrow {
    display: block;
    color: rgba(255, 255, 255, .55);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.mk-pricing-summary h3 {
    margin: 3px 0 0;
    color: #fff;
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0;
}

.mk-pricing-summary__price {
    margin-top: 14px;
    color: #fff;
    font-family: "Google Sans", sans-serif;
    font-size: 46px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
}

.mk-pricing-summary > p {
    margin: 6px 0 0;
    color: rgba(255, 255, 255, .6);
    font-size: 12.5px;
    line-height: 1.45;
}

.mk-pricing-summary__includes {
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 5px;
    background: rgba(255, 255, 255, .05);
}

.mk-pricing-summary__includes-title {
    display: block;
    margin-bottom: 9px;
    color: rgba(255, 255, 255, .5);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.mk-pricing-summary__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.mk-pricing-summary__list li {
    display: grid;
    grid-template-columns: 16px 1fr auto;
    align-items: center;
    gap: 9px;
}

.mk-pricing-summary__list i {
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(73, 148, 255, .32);
}

.mk-pricing-summary__list i::before {
    content: "\2713";
    color: #c5dbff;
    font-size: 9.5px;
    font-weight: 900;
}

.mk-pricing-summary__list span {
    color: rgba(255, 255, 255, .68);
    font-size: 12.5px;
}

.mk-pricing-summary__list b {
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
}

.mk-pricing-summary__save {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 11px;
    padding: 9px 13px;
    border: 1px solid rgba(93, 202, 165, .32);
    border-radius: 5px;
    background: rgba(29, 158, 117, .16);
}

.mk-pricing-summary__save span {
    color: #9fe1cb;
    font-size: 12px;
    font-weight: 700;
}

.mk-pricing-summary__save b {
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.mk-pricing-summary__actions {
    display: grid;
    gap: 9px;
    margin-top: auto;
    padding-top: 16px;
}

.mk-pricing-summary__actions .marketing-btn--pricing-card {
    width: 100%;
    min-height: 46px;
    background: #fff;
    color: var(--ink);
    border-color: #fff;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(3, 12, 32, .28);
}

.mk-pricing-summary__actions .marketing-btn--pricing-card:hover {
    background: var(--paper);
    color: var(--ink);
}

.mk-pricing-summary__trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    color: rgba(255, 255, 255, .58);
    font-size: 11.5px;
    font-weight: 600;
}

.mk-pricing-summary__actions .marketing-link {
    justify-self: center;
    color: rgba(255, 255, 255, .6);
    font-size: 12.5px;
}

.mk-pricing-summary__actions .marketing-link:hover {
    color: #fff;
    background: none;
}

@media (max-width: 860px) {
    .mk-pricing__heading h2 { font-size: 25px; }

    .mk-pricing-builder {
        grid-template-columns: 1fr;
    }

    .mk-pricing-summary {
        position: static;
        border-left: 0;
        border-top: 1px solid var(--line);
    }

    .mk-pricing-plan-grid,
    .mk-pricing-workspaces {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── CTA banner ────────────────────────────────────────── */
.mk-cta {
    position: relative;
    padding: 100px 0;
    background: var(--ink);
    overflow: hidden;
}

.mk-cta__deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.mk-cta__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
}

.mk-cta__orb--1 {
    width: 560px;
    height: 560px;
    top: -240px;
    left: -120px;
    background: var(--primary);
    opacity: .28;
}

.mk-cta__orb--2 {
    width: 420px;
    height: 420px;
    bottom: -180px;
    right: -80px;
    background: var(--sky);
    opacity: .16;
}

.mk-cta__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 72px;
    align-items: center;
}

.mk-cta__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(73, 148, 255, .15);
    border: 1px solid rgba(73, 148, 255, .3);
    color: var(--sky);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.mk-cta__copy h2 {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.06;
    color: var(--white);
}

.mk-cta__copy p {
    margin: 16px 0 0;
    max-width: 440px;
    color: rgba(255, 255, 255, .72);
    font-size: 16px;
    line-height: 1.65;
}

.mk-cta__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.marketing-btn--cta-primary {
    color: var(--ink);
    background: var(--white);
    border-color: var(--white);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .24);
}

.marketing-btn--cta-primary:hover {
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}

.mk-cta__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.mk-cta__card {
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .05);
    transition: border-color var(--t), background var(--t);
}

.mk-cta__card:hover {
    border-color: rgba(73, 148, 255, .36);
    background: rgba(73, 148, 255, .08);
}

.mk-cta__card strong {
    display: block;
    color: var(--white);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.mk-cta__card span {
    display: block;
    margin-top: 6px;
    color: rgba(255, 255, 255, .52);
    font-size: 12px;
    line-height: 1.5;
}

/* ── Footer ────────────────────────────────────────────── */
.marketing-footer {
    position: relative;
    padding: 28px 0 0;
    background: #eef2f8;
    border-top: 1px solid #d8e0eb;
    color: var(--ink);
}

.marketing-footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    padding-bottom: 24px;
}

.marketing-footer__brand .brand-mark {
    color: var(--ink);
}

.marketing-footer__brand .brand-mark:hover { color: var(--primary); }

.marketing-footer__tagline {
    margin: 14px 0 0;
    max-width: 380px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.65;
}

.marketing-footer__nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}

.marketing-footer__col {
    display: grid;
    gap: 12px;
    align-content: start;
}

.marketing-footer__col strong {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.marketing-footer__col a {
    color: var(--ink-mid);
    font-size: 14px;
    font-weight: 500;
    transition: color var(--t);
}

.marketing-footer__col a:hover { color: var(--primary); }

.marketing-footer__col span {
    color: var(--muted);
    font-size: 14px;
}

.marketing-footer__base {
    padding: 12px 0;
    border-top: 1px solid var(--line-soft);
}

.marketing-footer__base small {
    color: var(--muted);
    font-size: 13px;
}

/* ── Legacy spotlight / capability / favorites / tailored ─
   (kept for partial backward compat, now mostly unused by
    the new layout but may be referenced elsewhere) ──────── */
.marketing-shell { width: min(var(--shell), 85%); margin: 0 auto; }

/* ── Purchase page (full preserve) ────────────────────────────────── */
.purchase-page {
    min-height: calc(100vh - 72px);
    padding-top: 48px;
    background:
        radial-gradient(circle at top left, rgba(73, 148, 255, .14), transparent 28%),
        radial-gradient(circle at top right, rgba(31, 111, 255, .1), transparent 24%),
        linear-gradient(180deg, #fbfdff 0%, #f5faff 52%, #edf6ff 100%);
}

.purchase-hero { padding: 8px 0 12px; }

.purchase-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(360px, 0.96fr);
    gap: 18px;
    align-items: start;
}

.purchase-panel,
.purchase-card {
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(31, 111, 255, .12);
    background:
        radial-gradient(circle at top right, rgba(73, 148, 255, .08), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #f9fcff 100%);
    box-shadow: 0 22px 54px rgba(14, 53, 110, .1);
    overflow: hidden;
    position: relative;
}

.purchase-panel h1 {
    max-width: 20ch;
    margin: 6px 0 0;
    font-family: "Google Sans", sans-serif;
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.12;
    color: var(--ink);
}

.purchase-panel p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.purchase-points,
.purchase-pricing-grid,
.purchase-plan-options,
.billing-status-grid { display: grid; gap: 10px; }

.purchase-points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 10px;
}

.purchase-points div,
.purchase-preview div,
.pricing-card {
    padding: 10px;
    border: 1px solid rgba(31, 111, 255, .12);
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f4faff 100%);
}

.purchase-points > div > strong { display: block; color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: 0; }
.purchase-points span strong { display: inline; color: inherit; font-size: inherit; font-weight: 700; letter-spacing: normal; }
.purchase-points span, .pricing-note { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.45; }

.purchase-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 10px; }

.pricing-card { box-shadow: 0 12px 28px rgba(31, 111, 255, .06); position: relative; overflow: hidden; }

.pricing-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(31, 111, 255, .14);
    color: var(--primary-deep);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.pricing-badge--soft { background: rgba(73, 148, 255, .18); color: var(--primary-deep); }

.pricing-card h3 {
    margin: 18px 0 0;
    color: var(--ink);
    font-family: "Google Sans", sans-serif;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0;
}

.purchase-included-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.purchase-included-strip div,
.purchase-workspace-preview {
    padding: 10px 12px;
    border: 1px solid rgba(17, 132, 91, .14);
    border-radius: 12px;
    background: #f3fbf7;
}

.purchase-included-strip span,
.purchase-workspace-preview span {
    display: block;
    color: #0f7a58;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.purchase-included-strip strong,
.purchase-workspace-preview strong {
    display: block;
    margin-top: 4px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
}

.purchase-workspace-preview {
    margin-top: 10px;
}

.purchase-card-head h2 { display: block; margin-top: 8px; font-family: "Google Sans", sans-serif; font-size: 20px; font-weight: 700; letter-spacing: 0; color: var(--ink); }
.purchase-card-head p { margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.5; }

.purchase-form { margin-top: 14px; }

.purchase-choice-group {
    min-width: 0;
    margin: 14px 0 0;
    padding: 0;
    border: 0;
}

.purchase-choice-group:first-of-type {
    margin-top: 0;
}

.purchase-choice-group legend {
    float: left;
    width: 100%;
    margin: 0 0 8px;
    padding: 0;
    color: var(--ink);
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
}

.purchase-choice-group legend + * {
    clear: both;
}

.purchase-region-switch,
.purchase-package-grid {
    display: grid;
    gap: 8px;
}

.purchase-region-switch {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.purchase-package-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.purchase-region-card,
.purchase-package-card {
    position: relative;
    display: grid;
    align-content: start;
    min-width: 0;
    border: 1px solid rgba(31, 111, 255, .16);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(31, 111, 255, .05);
    cursor: pointer;
    transition: transform var(--t), border-color var(--t), box-shadow var(--t), background var(--t);
}

.purchase-region-card {
    gap: 6px;
    min-height: 112px;
    padding: 18px 20px;
}

.purchase-package-card {
    gap: 6px;
    min-height: 0;
    padding: 18px;
}

.purchase-package-card[hidden] {
    display: none;
}

.purchase-region-card input,
.purchase-package-card input {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

.purchase-region-card span,
.purchase-package-card span {
    padding-right: 28px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.purchase-region-card strong,
.purchase-package-card strong {
    color: var(--ink);
    font-family: "Google Sans", sans-serif;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.1;
}

.purchase-region-card small,
.purchase-package-card p,
.purchase-package-card em {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.purchase-package-card strong {
    color: var(--primary);
}

.purchase-package-card strong small {
    color: var(--muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
}

.purchase-package-card p {
    margin: 4px 0 0;
}

.purchase-package-card em {
    font-style: normal;
    font-weight: 800;
}

.purchase-package-card dl {
    display: grid;
    gap: 8px;
    margin: auto 0 0;
}

.purchase-package-card dl div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--line-soft);
}

.purchase-package-card dt,
.purchase-package-card dd {
    margin: 0;
    font-size: 12px;
}

.purchase-package-card dt {
    color: var(--muted);
    font-weight: 700;
}

.purchase-package-card dd {
    color: var(--ink);
    font-weight: 800;
}

.purchase-region-card:hover,
.purchase-package-card:hover,
.purchase-region-card.is-selected,
.purchase-package-card.is-selected {
    border-color: rgba(31, 111, 255, .38);
    background: linear-gradient(180deg, #ffffff 0%, #eef7ff 100%);
    box-shadow: 0 16px 34px rgba(31, 111, 255, .1);
    transform: translateY(-1px);
}

.purchase-region-card:focus-within,
.purchase-package-card:focus-within {
    border-color: rgba(31, 111, 255, .42);
    box-shadow: 0 0 0 4px rgba(73, 148, 255, .14);
}

.purchase-plan-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.purchase-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: 124px;
    padding: 18px 16px 16px 48px;
    border: 1px solid rgba(31, 111, 255, .16);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f4faff 100%);
    cursor: pointer;
    transition: transform var(--t), border-color var(--t), box-shadow var(--t), background var(--t);
}

.purchase-plan-card::before {
    content: "";
    position: absolute;
    top: 18px; left: 16px;
    width: 18px; height: 18px;
    border: 2px solid rgba(31, 111, 255, .34);
    border-radius: 999px;
    background: #ffffff;
    box-shadow: inset 0 0 0 3px #ffffff;
    transition: border-color var(--t), background var(--t), box-shadow var(--t);
}

.purchase-plan-card::after {
    content: "";
    position: absolute;
    top: 23px; left: 21px;
    width: 8px; height: 8px;
    border-radius: 999px;
    background: var(--primary);
    transform: scale(0);
    transition: transform var(--t);
}

.purchase-plan-card:hover { transform: translateY(-1px); border-color: rgba(31, 111, 255, .32); box-shadow: 0 14px 30px rgba(31, 111, 255, .1); background: linear-gradient(180deg, #ffffff 0%, #edf7ff 100%); }
.purchase-plan-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.purchase-plan-card span { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.purchase-plan-card strong { color: var(--ink); font-family: "Google Sans", sans-serif; font-size: 22px; font-weight: 700; letter-spacing: 0; }

.purchase-plan-card:has(input[type="radio"]:checked) { border-color: rgba(31, 111, 255, .42); background: linear-gradient(180deg, #ffffff 0%, #e9f5ff 100%); box-shadow: 0 16px 34px rgba(31, 111, 255, .12); }
.purchase-plan-card:has(input[type="radio"]:checked)::before { border-color: rgba(31, 111, 255, .72); box-shadow: inset 0 0 0 3px #ffffff, 0 0 0 4px rgba(73, 148, 255, .14); }
.purchase-plan-card:has(input[type="radio"]:checked)::after { transform: scale(1); }
.purchase-plan-card:focus-within { border-color: rgba(31, 111, 255, .42); box-shadow: 0 0 0 4px rgba(73, 148, 255, .14); }

.purchase-card input[type="text"], .purchase-card input[type="email"], .purchase-card input[type="password"] { border-color: rgba(31, 111, 255, .16); background: linear-gradient(180deg, #ffffff 0%, #fafdff 100%); }
.purchase-card input[type="text"]:focus, .purchase-card input[type="email"]:focus, .purchase-card input[type="password"]:focus { border-color: rgba(31, 111, 255, .4); box-shadow: 0 0 0 4px rgba(73, 148, 255, .14); }

.purchase-preview { display: grid; gap: 12px; margin-top: 6px; }
.purchase-preview div { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.purchase-preview span { color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.purchase-preview strong { color: var(--ink); text-align: right; }
.purchase-help { margin-top: 12px; color: var(--muted); font-size: 13px; }

/* ============================================================
   PURCHASE — reimagined to match the pricing language
   (light configurator + reused dark .mk-pricing-summary panel)
   ============================================================ */
/* Dark body so the frosted header has dark behind it at the very top too
   (otherwise the white body shows through the blur and reads as gray) */
.purchase-body { background: #0a1226; }

.purchase-page {
    position: relative;
    /* Override the old light-theme 48px top padding so the heading sits just
       below the header (minimal gap). */
    padding-top: 6px;
    background: linear-gradient(165deg, #0a1226 0%, #0d1b33 46%, #112a54 100%);
}

.purchase-hero {
    position: relative;
    z-index: 1;
    padding: 8px 0 30px;
}

/* ── Ambient animated backdrop (NAAS portal motif) ── */
.purchase-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.purchase-bg__aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .55;
}

.purchase-bg__aurora--1 {
    width: 540px; height: 540px; top: -150px; left: -110px;
    background: radial-gradient(circle, rgba(31, 111, 255, .68), transparent 70%);
    animation: pbgAurora1 15s ease-in-out infinite;
}

.purchase-bg__aurora--2 {
    width: 480px; height: 480px; bottom: -170px; right: -90px;
    background: radial-gradient(circle, rgba(73, 148, 255, .54), transparent 70%);
    animation: pbgAurora2 18s ease-in-out infinite;
}

.purchase-bg__aurora--3 {
    width: 410px; height: 410px; top: 38%; left: 52%;
    background: radial-gradient(circle, rgba(17, 132, 91, .36), transparent 70%);
    animation: pbgAurora3 21s ease-in-out infinite;
}

@keyframes pbgAurora1 { 0%, 100% { transform: translate(0, 0) scale(1); opacity: .5; } 50% { transform: translate(94px, 66px) scale(1.32); opacity: .72; } }
@keyframes pbgAurora2 { 0%, 100% { transform: translate(0, 0) scale(1); opacity: .46; } 50% { transform: translate(-104px, -62px) scale(1.3); opacity: .68; } }
@keyframes pbgAurora3 { 0%, 100% { transform: translate(0, 0) scale(1); opacity: .46; } 50% { transform: translate(-70px, 86px) scale(1.42); opacity: .66; } }

.purchase-bg__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at center, #000 25%, transparent 80%);
    mask-image: radial-gradient(ellipse 80% 70% at center, #000 25%, transparent 80%);
}

.purchase-bg__card {
    position: absolute;
    display: grid;
    gap: 6px;
    width: 176px;
    padding: 13px 15px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    box-shadow: 0 20px 50px rgba(3, 10, 28, .42);
    color: #fff;
    opacity: .92;
}

.purchase-bg__card small {
    color: rgba(255, 255, 255, .55);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.purchase-bg__card strong {
    font-family: "Google Sans", sans-serif;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.purchase-bg__rowline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 11px;
}

.purchase-bg__rowline b { color: rgba(255, 255, 255, .88); font-weight: 700; }

.purchase-bg__pill {
    flex: 0 0 auto;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    font-style: normal;
}

.purchase-bg__pill--green { background: rgba(29, 158, 117, .24); color: #74e2bb; }
.purchase-bg__pill--amber { background: rgba(239, 159, 39, .22); color: #f6cd80; }
.purchase-bg__pill--blue  { background: rgba(73, 148, 255, .24); color: #9cc4ff; }

.purchase-bg__bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 30px;
}

.purchase-bg__bars i {
    flex: 1;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(99, 162, 255, .95), rgba(31, 111, 255, .35));
}

.purchase-bg__bars i:nth-child(1) { height: 38%; }
.purchase-bg__bars i:nth-child(2) { height: 58%; }
.purchase-bg__bars i:nth-child(3) { height: 46%; }
.purchase-bg__bars i:nth-child(4) { height: 78%; }
.purchase-bg__bars i:nth-child(5) { height: 62%; }
.purchase-bg__bars i:nth-child(6) { height: 92%; }

.purchase-bg__card--a { top: 122px; left: 4%; animation: pbgCardFloat 8.5s ease-in-out infinite; }
.purchase-bg__card--b { top: 372px; left: 6.5%; animation: pbgCardFloat 10s ease-in-out infinite .5s; }
.purchase-bg__card--c { bottom: 118px; left: 5%; animation: pbgCardFloat 7.5s ease-in-out infinite 1.1s; }
.purchase-bg__card--d { top: 150px; right: 5%; animation: pbgCardFloat 9s ease-in-out infinite .3s; }
.purchase-bg__card--e { bottom: 150px; right: 6.5%; animation: pbgCardFloat 8s ease-in-out infinite .8s; }
.purchase-bg__card--f { top: 628px; left: 5%; animation: pbgCardFloat 9.5s ease-in-out infinite 1.3s; }
.purchase-bg__card--g { top: 548px; right: 4.5%; animation: pbgCardFloat 8.5s ease-in-out infinite .55s; }
.purchase-bg__card--h { top: 330px; right: 8.5%; animation: pbgCardFloat 10.5s ease-in-out infinite 1.7s; }

@keyframes pbgCardFloat {
    0%, 100% { transform: translateY(0) rotate(-1.6deg); }
    50% { transform: translateY(-28px) rotate(2.2deg); }
}

/* The form board + heading sit on the dark scene */
.purchase-page .purchase-board { box-shadow: 0 40px 90px rgba(3, 10, 28, .5); }
.purchase-page .purchase-heading h1 { color: #ffffff; }
.purchase-page .purchase-heading p { color: rgba(255, 255, 255, .66); }
.purchase-page .purchase-heading .section-tag { color: #7aa9ff; }

/* Permanent frosted-glass header — high-opacity dark tint stays consistent
   over any content (dark hero or the white form), with a blur for the glass feel */
.purchase-body .marketing-header {
    background: rgba(11, 20, 40, 0.82);
    -webkit-backdrop-filter: blur(12px) saturate(125%);
    backdrop-filter: blur(12px) saturate(125%);
    border-bottom-color: rgba(255, 255, 255, 0.09);
}

.purchase-body .marketing-header .brand-mark,
.purchase-body .marketing-header .brand-mark__text { color: #ffffff; }

.purchase-body .marketing-header .marketing-link { color: rgba(255, 255, 255, 0.75); }
.purchase-body .marketing-header .marketing-link:hover { color: #ffffff; background: none; }

.purchase-body .marketing-header .marketing-btn--secondary {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.26);
    color: #ffffff;
    box-shadow: none;
}

.purchase-body .marketing-header .marketing-btn--secondary:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.45);
    color: #ffffff;
}

@media (max-width: 1180px) {
    .purchase-bg__card { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .purchase-bg__aurora,
    .purchase-bg__card { animation: none; }
}

.purchase-heading {
    max-width: 620px;
    margin: 0 auto 16px;
    text-align: center;
}

.purchase-heading .section-tag { margin-bottom: 6px; }

.purchase-heading h1 {
    margin: 0;
    font-family: "Google Sans", sans-serif;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: var(--ink);
}

.purchase-heading p {
    margin: 8px auto 0;
    max-width: 540px;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.5;
}

.purchase-alert {
    max-width: 1040px;
    margin: 0 auto 12px;
    padding: 10px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
    color: var(--ink-mid);
    font-size: 13px;
    line-height: 1.45;
}

.purchase-alert--error {
    border-color: rgba(226, 75, 74, .4);
    background: #fdecec;
    color: #a32d2d;
}

.purchase-board {
    max-width: 1040px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    border: 1px solid var(--line);
    border-radius: 5px;
    overflow: hidden;
    background: var(--white);
}

.purchase-config { display: grid; gap: 0; }

.purchase-control {
    margin: 0;
    padding: 14px 20px;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
}

.purchase-control:last-child { border-bottom: 0; }

.purchase-control legend {
    float: left;
    width: 100%;
    margin: 0 0 10px;
    padding: 0;
    color: var(--muted);
    font-family: "Inter Variable", "Inter", sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.purchase-control legend + * { clear: both; }

.purchase-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px 14px;
}

.purchase-fields .form-block { display: grid; gap: 5px; min-width: 0; margin: 0; align-self: start; align-content: start; }

/* Country-of-incorporation segmented control (SG/IN) */
.purchase-country { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 5px; background: var(--paper); }
.purchase-country__opt { padding: 7px 16px; border-radius: 4px; font-size: 13px; font-weight: 600; color: var(--muted); transition: background var(--t), color var(--t); }
.purchase-country__opt:hover { color: var(--ink); }
.purchase-country__opt.is-active { background: var(--ink); color: #fff; }
.purchase-fields .form-block--full { grid-column: 1 / -1; }
.purchase-fields label { color: var(--ink); font-size: 12.5px; font-weight: 700; }

.purchase-fields input {
    width: 100%;
    min-height: 40px;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--white);
    color: var(--ink);
    font: inherit;
    font-size: 13.5px;
    box-shadow: none;
}

.purchase-fields input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

.purchase-config .purchase-help { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.purchase-config .purchase-help strong { color: var(--ink); font-weight: 700; }
.purchase-note { margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }

.purchase-package-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.purchase-package-card {
    position: relative;
    display: grid;
    align-content: start;
    gap: 2px;
    padding: 10px 11px;
    border: 1.5px solid var(--line);
    border-radius: 5px;
    background: var(--white);
    box-shadow: none;
    transform: none;
    cursor: pointer;
    transition: border-color var(--t), background var(--t);
}

.purchase-package-card input { position: absolute; opacity: 0; pointer-events: none; }

.purchase-package-card span {
    padding-right: 22px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
}

.purchase-package-card strong {
    margin: 1px 0 0;
    color: var(--ink);
    font-family: "Google Sans", sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.purchase-package-card strong small { font-size: 11px; font-weight: 700; color: var(--muted); }
.purchase-package-card__sum { margin-top: 1px; color: var(--muted); font-size: 11px; line-height: 1.3; }
.purchase-package-card::before { content: none; }

.purchase-package-card::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 10px;
    width: 17px;
    height: 17px;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    box-shadow: none;
}

.purchase-package-card:hover { border-color: var(--primary); background: var(--white); box-shadow: none; transform: none; }
.purchase-package-card.is-selected,
.purchase-package-card:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); box-shadow: none; }
.purchase-package-card.is-selected strong,
.purchase-package-card:has(input:checked) strong { color: var(--primary); }

.purchase-package-card.is-selected::after,
.purchase-package-card:has(input:checked)::after {
    border-color: var(--primary);
    background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.purchase-workspace-checks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.purchase-workspace-check {
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px 30px 10px 11px;
    border: 1.5px solid var(--line);
    border-radius: 5px;
    background: var(--white);
    box-shadow: none;
    cursor: pointer;
    transition: border-color var(--t), background var(--t);
}

.purchase-workspace-check input { position: absolute; opacity: 0; pointer-events: none; }
.purchase-workspace-check span { color: var(--ink); font-size: 12.5px; font-weight: 800; line-height: 1.2; }

.purchase-workspace-check::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 9px;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background: var(--white);
}

.purchase-workspace-check:hover { border-color: var(--primary); }
.purchase-workspace-check.is-selected,
.purchase-workspace-check:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }

.purchase-workspace-check.is-selected::after,
.purchase-workspace-check:has(input:checked)::after {
    border-color: var(--primary);
    background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.purchase-volume {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 200px));
    gap: 12px;
}

.purchase-volume label { display: grid; gap: 5px; }
.purchase-volume span { color: var(--muted); font-size: 12px; font-weight: 800; }

.purchase-volume input {
    width: 100%;
    min-height: 40px;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--white);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    box-shadow: none;
}

.purchase-volume input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.purchase-volume small { color: var(--muted); font-size: 11px; }

/* Dark order summary reuses .mk-pricing-summary; small additions */
.purchase-summary__wslist {
    margin: 9px 0 0;
    color: rgba(255, 255, 255, .6);
    font-size: 11.5px;
    line-height: 1.45;
}

/* Workspaces + team size moved into the dark order summary */
.purchase-summary__group {
    margin: 16px 0 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.purchase-summary__group legend {
    float: left;
    width: 100%;
    margin: 0 0 9px;
    padding: 0;
    color: rgba(255, 255, 255, .5);
    font-family: "Inter Variable", "Inter", sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.purchase-summary__group legend + * { clear: both; }

.purchase-summary .purchase-workspace-checks {
    grid-template-columns: 1fr;
    gap: 6px;
}

.purchase-summary .purchase-workspace-check {
    padding: 9px 30px 9px 11px;
    border-color: rgba(255, 255, 255, .15);
    background: rgba(255, 255, 255, .05);
}

.purchase-summary .purchase-workspace-check span { color: rgba(255, 255, 255, .9); }

.purchase-summary .purchase-workspace-check::after {
    border-color: rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .06);
}

.purchase-summary .purchase-workspace-check:hover { border-color: rgba(255, 255, 255, .42); }

.purchase-summary .purchase-workspace-check:has(input:checked) {
    border-color: var(--primary);
    background: rgba(31, 111, 255, .24);
}

.purchase-summary .purchase-workspace-check:has(input:checked)::after {
    border-color: var(--primary);
    background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.purchase-summary .purchase-note { margin: 8px 0 0; color: rgba(255, 255, 255, .5); }

.purchase-summary .purchase-volume {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.purchase-summary .purchase-volume:has([data-purchase-employee-group][hidden]) {
    grid-template-columns: 1fr;
}

.purchase-summary .purchase-volume span { color: rgba(255, 255, 255, .62); }

.purchase-summary .purchase-volume input {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
}

.purchase-summary .purchase-volume input:focus {
    border-color: #6ea8ff;
    box-shadow: 0 0 0 3px rgba(31, 111, 255, .28);
}

.purchase-summary .mk-pricing-summary__price {
    font-size: 32px;
    line-height: 1.12;
}

.purchase-summary .mk-info { background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .82); }
.purchase-summary .mk-info:hover,
.purchase-summary .mk-info:focus-visible { background: rgba(31, 111, 255, .45); color: #ffffff; }

.mk-pricing-summary > p:empty { display: none; margin: 0; }

/* On laptop widths the 1040px board fills most of the screen and feels oversized.
   Trimming the max-width restores the contained, well-margined look of the 1920 view
   (and gives the floating ambient cards room to breathe at the edges). */
@media (max-width: 1400px) {
    .purchase-board { max-width: 920px; }
}

@media (max-width: 900px) {
    .purchase-board { grid-template-columns: 1fr; }
    .purchase-summary.mk-pricing-summary { position: static; }
    .purchase-package-grid,
    .purchase-workspace-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .purchase-fields { grid-template-columns: 1fr; }
}

.success-message, .info-message, .error-message { margin-bottom: 18px; padding: 18px; border-radius: 18px; }
.success-message { background: #eefaf0; border: 1px solid #b5e0bb; color: #155a24; }
.info-message { background: #eef5ff; border: 1px solid #bfd6ff; color: #174d99; }
.error-message { background: #fff0ef; border: 1px solid #f2c7c2; color: #9d342f; }
.success-message p, .info-message p, .error-message p { margin: 0; }
.error-message p + p { margin-top: 8px; }

.billing-status-panel { width: 100%; }
.billing-status-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 26px; }
.billing-status-note { margin-top: 18px; }

.billing-status-card,
.billing-status-note {
    padding: 24px;
    border: 1px solid rgba(16, 42, 88, .08);
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    box-shadow: 0 16px 34px rgba(16, 42, 88, .06);
}

.billing-status-card strong { display: block; color: var(--ink); font-size: 20px; font-weight: 700; letter-spacing: -0.04em; }
.billing-status-card span { display: block; margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.billing-status-note p { margin: 0; color: var(--muted); }

/* ── Responsive ────────────────────────────────────────── */
/* Onboarding success and password setup are public, light-only screens. */
.onboarding-body {
    background: #f5f8fc;
    color: var(--ink);
}

.onboarding-page {
    min-height: 100vh;
    padding: 72px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f5f8fc 48%, #eef5ff 100%);
}

.onboarding-hero {
    min-height: calc(100vh - 144px);
    display: flex;
    align-items: center;
}

.onboarding-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, .86fr);
    gap: 28px;
    align-items: start;
}

.onboarding-panel,
.onboarding-card {
    border: 1px solid rgba(16, 42, 88, .1);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(16, 42, 88, .08);
}

.onboarding-panel {
    padding: clamp(28px, 4vw, 44px);
}

.onboarding-panel h1 {
    max-width: 620px;
    margin: 10px 0 12px;
    color: var(--ink);
    font-family: "Google Sans", sans-serif;
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.04;
    letter-spacing: -0.04em;
}

.onboarding-panel p {
    max-width: 660px;
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.7;
}

.onboarding-card {
    padding: clamp(22px, 3vw, 32px);
}

.onboarding-card .purchase-preview {
    margin-top: 14px;
}

.onboarding-card .purchase-preview div {
    min-height: 44px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--line-soft);
}

.onboarding-card .purchase-preview div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.onboarding-form {
    display: grid;
    gap: 16px;
}

@media (max-width: 1160px) {
    .marketing-header__suite-inner,
    .marketing-header > .marketing-shell {
        grid-template-columns: auto auto;
        grid-template-areas: "brand actions" "nav nav";
        row-gap: 12px;
        min-height: auto;
        padding-block: 12px;
    }

    .suite-nav { justify-content: center; }
    .marketing-actions { align-self: start; }
    .mk-caps__grid { grid-template-columns: repeat(2, 1fr); }
    .mk-mobile__inner { gap: 40px; }
    .purchase-grid { grid-template-columns: 1fr; }
    .onboarding-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
    .mk-hero__inner,
    .mk-platform__inner,
    .mk-feature__inner,
    .mk-mobile__inner { grid-template-columns: 1fr; gap: 40px; }

    .mk-hero__copy { padding-bottom: 0; }
    .mk-hero__visual { display: none; }
    .mk-feature--flip .mk-feature__copy { order: 0; }
    .mk-feature--flip .mk-feature__visual { order: 0; }
    .mk-platform__points { grid-template-columns: 1fr; }
    .mk-mobile__inner { text-align: center; }
    .mk-mobile__features { text-align: left; max-width: 560px; margin-inline: auto; }
    .mk-desktop-win { display: none; }
    .billing-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .purchase-package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .marketing-shell { width: min(var(--shell), calc(100% - 24px)); }

    .marketing-header { position: static; }
    .marketing-header__suite-inner,
    .marketing-header > .marketing-shell {
        grid-template-columns: 1fr;
        grid-template-areas: "brand" "actions";
        gap: 12px;
        justify-items: stretch;
    }

    .suite-nav { display: none; }
    .marketing-actions { width: 100%; }

    .mk-hero { padding: 48px 0 0; }
    .mk-hero h1 { font-size: clamp(38px, 10vw, 52px); }
    .mk-region-pill {
        max-width: 100%;
        white-space: normal;
        line-height: 1.3;
        padding-block: 8px;
    }

    .mk-modules__label { display: none; }

    .mk-platform, .mk-feature, .mk-mobile, .mk-caps, .mk-pricing, .mk-cta { padding: 64px 0; }

    .mk-caps__grid { grid-template-columns: 1fr; }

    .mk-pricing__heading h2 {
        font-size: 34px;
        line-height: 1.12;
    }

    .mk-pricing__region-switch,
    .mk-pricing-plan-grid,
    .mk-pricing-workspaces,
    .mk-pricing-volume {
        grid-template-columns: 1fr;
    }

    .mk-pricing__core {
        flex-direction: column;
        align-items: flex-start;
    }

    .mk-pricing__plans { grid-template-columns: 1fr; }
    .mk-pricing__plan { border-right: none; border-bottom: 1px solid var(--line-soft); }
    .mk-pricing__plan:last-child { border-bottom: none; }

    .mk-pricing__banner { flex-direction: column; align-items: flex-start; gap: 16px; }

    .mk-pricing-builder {
        grid-template-columns: 1fr;
    }

    .mk-pricing-control,
    .mk-pricing-summary {
        padding: 24px;
    }

    .mk-pricing-summary {
        position: static;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .1);
    }

    .mk-pricing-segments {
        width: 100%;
        border-radius: 7px;
    }

    .mk-pricing-segments span {
        white-space: normal;
        text-align: center;
    }

    .mk-cta__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .mk-cta__cards {
        grid-template-columns: repeat(2, 1fr);
        max-width: 480px;
    }

    .marketing-footer__inner { grid-template-columns: 1fr; gap: 32px; }
    .marketing-footer__nav { grid-template-columns: repeat(2, 1fr); gap: 24px; }

    .purchase-points { grid-template-columns: 1fr; }
    .purchase-pricing-grid { grid-template-columns: 1fr; }
    .purchase-included-strip { grid-template-columns: 1fr; }
    .purchase-region-switch,
    .purchase-package-grid { grid-template-columns: 1fr; }
    .purchase-plan-options { grid-template-columns: 1fr; }
    .billing-status-grid { grid-template-columns: 1fr; }
    .onboarding-page { padding: 28px 0; }
    .onboarding-hero { min-height: auto; }
    .onboarding-panel,
    .onboarding-card { padding: 22px; }
    .onboarding-card .purchase-preview div {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
}

@media (max-width: 480px) {
    .mk-hero__actions { flex-direction: column; align-items: stretch; }
    .mk-cta__actions { flex-direction: column; align-items: stretch; }
    .mk-cta__cards { grid-template-columns: 1fr; }
    .marketing-btn { width: 100%; }
    .marketing-footer__nav { grid-template-columns: 1fr; }
}