/*
 * Public marketing pages (layout/marketing.html.twig). Loaded only by that layout.
 * Colours stay on the SB Admin 2 palette; text colours are picked for WCAG AA on their backgrounds.
 */
.mk {
    --mk-primary: #3a62d8;
    --mk-primary-dark: #224abe;
    --mk-ink: #2e2f37;
    --mk-text: #4a4b55;
    --mk-line: #e3e6f0;
    --mk-soft: #f8f9fc;
    --mk-ok: #13855c;
    --mk-bad: #c0392b;
    --mk-focus: #1a3a9e;
    color: var(--mk-text);
    background: #fff;
    font-size: 1rem;
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

.mk h1, .mk h2, .mk h3 { color: var(--mk-ink); font-weight: 800; letter-spacing: -.01em; }
.mk code { color: #b02a63; word-break: break-word; }
.mk a:not(.btn) { color: var(--mk-primary-dark); }
.mk [id] { scroll-margin-top: 5rem; }
.mk main:focus { outline: none; }

/* Focus: visible everywhere, white on dark bands. */
.mk a:focus-visible,
.mk button:focus-visible,
.mk summary:focus-visible {
    outline: 3px solid var(--mk-focus);
    outline-offset: 2px;
    box-shadow: none;
}
.mk-hero a:focus-visible,
.mk-cta a:focus-visible { outline-color: #fff; }

/* Tap targets of at least 44px. */
.mk .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.mk .btn-block { display: flex; }
.mk .btn-sm { min-height: 36px; }

.mk-skip {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 1100;
    padding: .75rem 1rem;
    background: #fff;
    color: var(--mk-primary-dark);
    border-radius: .35rem;
    box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .2);
}
.mk-skip:focus { top: 1rem; }

/* ---------- Header ---------- */
.mk-header { background: #fff; border-bottom: 1px solid var(--mk-line); z-index: 1030; }
.mk-header .navbar { padding-top: .5rem; padding-bottom: .5rem; }
.mk-brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; color: var(--mk-ink) !important; min-height: 44px; }
/* The full name next to the menu button on phones: a smaller brand keeps both on one line. */
@media (max-width: 420px) { .mk-brand { font-size: 1rem; margin-right: .25rem; } .mk-brand img { width: 24px; height: 24px; } }
.mk-header .nav-link { color: var(--mk-text) !important; font-weight: 600; min-height: 44px; display: flex; align-items: center; padding-left: .75rem !important; padding-right: .75rem !important; }
.mk-header .nav-link:hover { color: var(--mk-primary-dark) !important; }
.mk-toggler { min-width: 44px; min-height: 44px; border-color: var(--mk-line) !important; }
.mk-nav-actions { display: flex; align-items: center; gap: .5rem; }
@media (max-width: 991.98px) {
    .mk-header .navbar-collapse { padding: .5rem 0 1rem; }
    .mk-nav-actions { flex-direction: column; align-items: stretch; margin-top: .5rem; }
    .mk-nav-actions .btn { width: 100%; }
}

/* ---------- Hero ---------- */
.mk-hero {
    background: linear-gradient(180deg, var(--mk-primary) 10%, var(--mk-primary-dark) 100%);
    color: #fff;
    padding: 3.5rem 0 4rem;
}
.mk-hero-title { color: #fff !important; font-size: 2.1rem; line-height: 1.2; margin-bottom: 1rem; }
.mk-hero-lead { font-size: 1.15rem; line-height: 1.6; margin-bottom: 1.75rem; color: #fff; }
.mk-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.mk-btn-hero { color: var(--mk-primary-dark) !important; font-weight: 700; }
@media (min-width: 768px) { .mk-hero-title { font-size: 2.6rem; } }
@media (min-width: 992px) { .mk-hero { padding: 5rem 0 5.5rem; } .mk-hero-title { font-size: 2.9rem; } }

/* Request-builder mock (pure HTML/CSS). */
.mk-mock {
    background: #fff;
    color: var(--mk-text);
    border-radius: .6rem;
    box-shadow: 0 1.5rem 3rem rgba(10, 25, 80, .35);
    overflow: hidden;
    font-size: .85rem;
}
.mk-mock-chrome { display: flex; align-items: center; gap: .35rem; padding: .55rem .8rem; background: var(--mk-soft); border-bottom: 1px solid var(--mk-line); }
.mk-mock-chrome span { width: .65rem; height: .65rem; border-radius: 50%; background: #d1d3e2; }
.mk-mock-chrome em { font-style: normal; margin-left: .5rem; font-weight: 700; color: var(--mk-text); }
.mk-mock-url { display: flex; align-items: center; gap: .5rem; padding: .75rem .8rem; min-width: 0; }
.mk-mock-url .method-badge { min-width: 3.2rem; padding: .35rem .4rem; }
.mk-mock-address {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid var(--mk-line);
    border-radius: .3rem;
    padding: .3rem .5rem;
    font-family: SFMono-Regular, Menlo, Consolas, monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mk-mock-address b { color: #b02a63; background: #fdecf3; border-radius: 3px; font-weight: 400; }
.mk-mock-send { background: var(--mk-primary); color: #fff; border-radius: .3rem; padding: .3rem .8rem; font-weight: 700; }
.mk-mock-tabs { display: flex; gap: 1rem; padding: 0 .8rem; border-bottom: 1px solid var(--mk-line); overflow: hidden; white-space: nowrap; }
.mk-mock-tabs span { padding: .4rem 0; }
.mk-mock-tabs span.is-active { color: var(--mk-primary-dark); font-weight: 700; border-bottom: 2px solid var(--mk-primary); }
.mk-mock-tabs i { font-style: normal; font-size: .7rem; background: var(--mk-soft); border-radius: 1rem; padding: 0 .35rem; }
.mk-mock-kv { display: grid; grid-template-columns: minmax(6rem, auto) 1fr; gap: .35rem .75rem; margin: 0; padding: .7rem .8rem; }
.mk-mock-kv dt { font-weight: 600; color: var(--mk-ink); }
.mk-mock-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.mk-mock-vault { color: var(--mk-ok); font-weight: 600; }
.mk-mock-response { border-top: 1px solid var(--mk-line); padding: .7rem .8rem .8rem; background: #fcfcfe; }
.mk-mock-meta { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
.mk-mock-json { margin: 0; font-size: .78rem; color: var(--mk-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.mk-mock-json .k { color: #224abe; }
.mk-mock-json .s { color: var(--mk-ok); }
.mk-mock-json .n { color: #8a4b00; }

.mk-pill { display: inline-block; font-size: .75rem; font-weight: 700; padding: .15rem .55rem; border-radius: 1rem; background: #eaecf4; color: var(--mk-ink); }
.mk-pill-ok { background: #d4f4e6; color: #0b5e3f; }
.mk-pill-bad { background: #fbdcd8; color: #8c1d12; }

/* ---------- Proof strip ---------- */
.mk-proof { background: var(--mk-soft); border-bottom: 1px solid var(--mk-line); }
.mk-proof-list { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 2rem; list-style: none; margin: 0; padding: 1.25rem 0; font-weight: 700; color: var(--mk-ink); }
.mk-proof-list li { display: inline-flex; align-items: center; gap: .5rem; }
.mk-proof-list i { color: var(--mk-primary); }

/* ---------- Sections ---------- */
.mk-section { padding: 4rem 0; }
.mk-section-alt { background: var(--mk-soft); border-top: 1px solid var(--mk-line); border-bottom: 1px solid var(--mk-line); }
.mk-section-head { max-width: 46rem; margin: 0 auto 2.5rem; text-align: center; }
.mk-section-head h2 { font-size: 1.8rem; margin-bottom: .75rem; }
.mk-section-head p { font-size: 1.1rem; margin: 0; }
.mk-narrow { max-width: 50rem; }

.mk-card { background: #fff; border: 1px solid var(--mk-line); border-radius: .6rem; padding: 1.5rem; }
.mk-card h3 { font-size: 1.25rem; margin: .75rem 0 .35rem; }
.mk-card-lead { font-weight: 600; color: var(--mk-ink); }
.mk-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: .5rem; background: #e8eefc; color: var(--mk-primary-dark); font-size: 1.15rem; }

.mk-checks { list-style: none; padding: 0; margin: 0; }
.mk-checks li { position: relative; padding-left: 1.6rem; margin-bottom: .55rem; }
.mk-checks li::before {
    content: "";
    position: absolute;
    left: .15rem;
    top: .45rem;
    width: .8rem;
    height: .45rem;
    border-left: 2px solid var(--mk-ok);
    border-bottom: 2px solid var(--mk-ok);
    transform: rotate(-45deg);
}

/* How it works */
.mk-steps { list-style: none; counter-reset: step; display: grid; gap: 1.5rem; padding: 0; margin: 0; }
@media (min-width: 768px) { .mk-steps { grid-template-columns: repeat(3, 1fr); } }
.mk-steps li { counter-increment: step; background: #fff; border: 1px solid var(--mk-line); border-radius: .6rem; padding: 1.5rem; }
.mk-steps li::before {
    content: counter(step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--mk-primary-dark);
    color: #fff;
    font-weight: 800;
    margin-bottom: .75rem;
}
.mk-steps h3 { font-size: 1.15rem; }
.mk-steps p { margin: 0; }

/* Deep dives */
.mk-dive { padding: 2rem 0; }
.mk-dive + .mk-dive { border-top: 1px solid var(--mk-line); }
.mk-dive h3 { font-size: 1.5rem; margin-bottom: .75rem; }
@media (min-width: 992px) {
    .mk-dive { padding: 3rem 0; }
    .mk-dive-flip > :first-child { order: 2; }
}
.mk-problem { text-transform: uppercase; letter-spacing: .04em; font-size: .8rem; font-weight: 800; color: var(--mk-primary-dark); margin-bottom: .35rem; }

.mk-visual { background: #fff; border: 1px solid var(--mk-line); border-radius: .6rem; padding: 1rem; box-shadow: 0 .75rem 2rem rgba(58, 59, 69, .08); font-size: .85rem; }
.mk-visual-title { font-weight: 700; color: var(--mk-ink); margin-bottom: .75rem; overflow-wrap: anywhere; }
.mk-visual-title i { color: var(--mk-primary); margin-right: .35rem; }
.mk-visual-dark { background: #1f2330; border-color: #1f2330; }
.mk-visual-dark .mk-visual-title { color: #fff; }
.mk-visual-dark .mk-visual-title i { color: #9fb5f5; }




.mk-term {
    margin: 0;
    background: #1f2330;
    color: #e8eaf2;
    border-radius: .4rem;
    padding: .9rem 1rem;
    font-size: .8rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.mk-term .c { color: #a3abc4; }
.mk-term code { color: inherit; }

/* Try it */
.mk-try-command { position: relative; }
.mk-try-command .mk-term { padding-right: 5rem; }
.mk .mk-copy { position: absolute; top: .3rem; right: .3rem; min-height: 44px; min-width: 44px; }
.mk-try-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .9rem 0; }
.mk-try-actions .btn-link { padding-left: .25rem; padding-right: .25rem; }
.mk-try-result .mk-term { max-height: 18rem; overflow: auto; }

/* Security */
.mk-safeguard { height: 100%; }
.mk-safeguard i { color: var(--mk-primary); font-size: 1.4rem; margin-bottom: .6rem; }
.mk-safeguard h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.mk-safeguard p { margin: 0; font-size: .95rem; }

/* Plans */
.mk-plan { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--mk-line); border-radius: .6rem; padding: 1.5rem; }
.mk-plan-featured { border: 2px solid var(--mk-primary); box-shadow: 0 .75rem 2rem rgba(78, 115, 223, .15); }
.mk-plan-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1rem; }
.mk-plan-head h3 { font-size: 1.4rem; margin: 0; }
.mk-badge { font-size: .75rem; font-weight: 700; padding: .25rem .6rem; border-radius: 1rem; }
.mk-badge-primary { background: #e8eefc; color: var(--mk-primary-dark); }
.mk-badge-muted { background: #eaecf4; color: var(--mk-text); }
.mk-plan-limits { margin: 0 0 1.25rem; flex: 1 1 auto; }
.mk-plan-limits div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-top: 1px solid var(--mk-line); }
.mk-plan-limits dt { font-weight: 400; }
.mk-plan-limits dd { margin: 0; font-weight: 800; color: var(--mk-ink); text-align: right; white-space: nowrap; }

/* FAQ */
.mk-faq details { border-top: 1px solid var(--mk-line); }
.mk-faq details:last-child { border-bottom: 1px solid var(--mk-line); }
.mk-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 44px;
    padding: .85rem 0;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--mk-ink);
    cursor: pointer;
    list-style: none;
}
.mk-faq summary::-webkit-details-marker { display: none; }
.mk-faq summary::after { content: "+"; font-size: 1.4rem; font-weight: 400; color: var(--mk-primary-dark); line-height: 1; }
.mk-faq details[open] summary::after { content: "\2212"; }
.mk-faq details p { padding-bottom: 1rem; margin: 0; }

/* Final CTA */
.mk-cta { background: linear-gradient(180deg, var(--mk-primary) 10%, var(--mk-primary-dark) 100%); color: #fff; text-align: center; padding: 3.5rem 0; }
.mk-cta h2 { color: #fff; font-size: 1.7rem; margin-bottom: 1.25rem; }

/* Footer */
.mk-footer { background: #1f2330; color: #d6d9e4; padding: 3rem 0 2rem; }
.mk-footer a { color: #fff !important; display: inline-block; padding: .625rem 0; min-height: 44px; }
.mk-footer-brand { display: flex; align-items: center; gap: .5rem; font-weight: 800; color: #fff; font-size: 1.1rem; }
.mk-footer-heading { color: #fff !important; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .25rem; }
.mk-footer-legal { border-top: 1px solid #3a3f52; padding-top: 1.25rem; font-size: .9rem; }

@media (prefers-reduced-motion: reduce) {
    .mk *, .mk *::before, .mk *::after { transition: none !important; animation: none !important; }
}
.mk-plan-note { text-align: center; margin: .5rem 0 0; font-size: .95rem; }

/* SB Admin's badge colours put white text on light fills (~2:1); darker fills here keep AA contrast. */
.mk .method-GET, .mk .badge-success { background-color: #13855c; color: #fff; }
.mk .badge-info { background-color: #1a6f80; color: #fff; }
.mk .badge-warning { background-color: #f6c23e; color: #2e2f37; }
.mk .btn-primary { background-color: #2e59d9; border-color: #2e59d9; }
.mk .btn-primary:hover, .mk .btn-primary:focus { background-color: #224abe; border-color: #224abe; }
.mk .btn-link { color: var(--mk-primary-dark); }
.mk-plans-lead { font-size: 1.15rem; }

/* Real screenshots (assets/images/screens, captured from the demo workspace). */
.mk-shot { margin: 0; }
.mk-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--mk-line); border-radius: .6rem; box-shadow: 0 1rem 2.5rem rgba(58, 59, 69, .14); background: var(--mk-soft); }
.mk-shot-wide { max-width: 64rem; margin: 0 auto 3rem; }
.mk-shot figcaption { text-align: center; font-size: .9rem; margin-top: .75rem; }
.mk-shot-link { display: block; border-radius: .6rem; }