/* Marketing host (round 26f; round 28e MKT-2, r.1016/1020): layout only — head, page, placeholder, Creator section,
   footer and the example panel. Buttons, cards, inputs and the header row are the app's own classes.
   Colours, radius, shadow, duration and fonts only via tokens; the theme follows html[data-sc-theme]. */

.mk-body {
    --mk-head-max: 70px;
    --mk-head-min: var(--sc-bar-h);
    --mk-head-h: var(--mk-head-max);
    --sc-header-h: var(--mk-head-max);
    --mk-wrap-w: 1080px;
    --mk-wrap-pad: 60px;
    --mk-card-w: 136px;
    --mk-gutter: 2rem;
    --sc-z-rail: 30;
    background: var(--sc-color-bg);
    color: var(--sc-color-text);
    font-family: var(--sc-font-sans);
    min-height: 100vh;
    overflow-x: clip;
    padding-top: var(--mk-head-max);
}
/* Run 31d (MKT-1, r.187): the Creator wrapper symmetric on the marketing host; (0,2,0) after shared.css beats its
   app-rail rule .siteclick-container .siteclick-wrapper 60/20 (≤ 1224 px). */
.mk-body .siteclick-wrapper { padding-inline: var(--mk-wrap-pad); }
@media (max-width: 1224px) {
    .mk-body { --mk-wrap-pad: 20px; }
}
.mk-body main { display: block; outline: none; }
.mk-body h1, .mk-body h2, .mk-body h3 { color: var(--sc-color-text-strong); font-weight: var(--sc-font-weight-title); }
.mk-body a:focus-visible, .mk-body button:focus-visible {
    outline: none;
    box-shadow: var(--sc-ring);
    border-radius: var(--sc-radius-sm);
}

.mk-skip {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: calc(var(--sc-z-rail) + 10);
    padding: .5rem 1rem;
    background: var(--sc-color-panel-bg);
    color: var(--sc-color-text-strong);
    border-radius: var(--sc-radius-md);
}
.mk-skip:focus { top: 1rem; }

/* Head (r.187–195, V8; run 31d MKT-1, r.179/185): fixed, 70 px at the top and 40 px (the app bar) after 60 px of
   scroll — marketing.js sets --mk-head-h on the body. The body keeps padding-top --mk-head-max, so the head shrinks
   over the content and nothing in the flow moves (no layout shift). Three columns: the logo left, the nav in the middle
   (exactly centred while both sides fit, then it shifts instead of overlapping), the end right. The end stops one
   rail width from the edge, so the user button sits where the app's does (the '…' cell of the app header).
   html.mk-head-menu (marketing.js, measured) swaps the nav for the hamburger menu. */
.mk-head {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: calc(var(--sc-z-rail) + 5);
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
    align-items: center;
    height: var(--mk-head-h);
    background: var(--sc-color-bar-bg);
    box-shadow: inset 0 -1px 0 var(--sc-color-hairline);
}
.mk-head-logo { grid-column: 1; justify-self: start; display: inline-flex; align-items: center; padding-left: var(--mk-gutter); }
.mk-head-wordmark {
    display: block;
    height: 18px;
    aspect-ratio: 997 / 143;
    background: var(--sc-shine-text);
    -webkit-mask: url("/brand/logo.svg") center / contain no-repeat;
    mask: url("/brand/logo.svg") center / contain no-repeat;
}
.mk-head-mark {
    display: none;
    height: 18px;
    aspect-ratio: 15 / 18;
    background: var(--sc-shine-text);
    -webkit-mask: url("/brand/mark.svg") center / contain no-repeat;
    mask: url("/brand/mark.svg") center / contain no-repeat;
}
/* Run 40a (P2.1): no dimming; the base is --sc-shine-text and the shine comes from .sc-shine.sc-shine--mask (ui-card.css). */
.mk-head .mk-head-logo:is(:hover, :focus-visible) :is(.mk-head-wordmark, .mk-head-mark) { background-color: var(--sc-shine-text-band); }
.mk-head-nav {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: .25rem;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}
.mk-head .mk-head-item { flex: none; font-size: 1.1rem; font-weight: var(--sc-font-weight-ui); text-decoration: none; }
.mk-head .mk-head-item[aria-current="page"] { color: var(--sc-color-bar-ink-active); }
.mk-head-end { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: .5rem; padding-right: var(--sc-rail-w, 40px); }
.mk-head-guest, .mk-head-user { display: flex; align-items: center; gap: .5rem; }
.mk-head-user:empty, .mk-head-user:not(:empty) ~ .mk-head-guest { display: none; }
.mk-head .mk-head-pending { display: none; }
html.mk-auth-pending .mk-head-guest { display: none; }
html.mk-auth-pending .mk-head .mk-head-pending { display: inline-flex; }
.mk-head-more { display: none; }
html.mk-head-menu .mk-head-nav { display: none; }
html.mk-head-menu .mk-head-more { display: inline-block; }
.mk-head-burger {
    height: 30px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--sc-radius-md);
    background: var(--sc-color-transparent);
    color: var(--sc-color-bar-ink-active);
    font-size: 1.1rem;
    cursor: pointer;
}
.mk-head-burger:hover, .mk-head-more.open .mk-head-burger { background: var(--sc-color-text-soft-bg); }
.mk-head-menu-panel .sc-more-item { font-size: 1.1rem; }

/* Header row on the marketing host: below the head, from templates; no 'Alle …' edge button (the template links). */
.mk-body .sc-switcher { top: var(--mk-head-h); }
.mk-body .sc-switcher-body { overflow-y: auto; padding-bottom: 1rem; }
.mk-body .sc-switcher-all { display: none; }
/* Run 31d (MKT-1, r.184): one fixed card width in the half row (dropdowns and the features band); (0,4,0) beats the
   loop ladder .sc-loop > * of sc-chrome-items.css. */
.mk-body .sc-switcher[data-sc-switcher-size="half"] .sc-loop > * { flex-basis: var(--mk-card-w); }
.mk-feature-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--sc-color-white);
}

/* Pages (r.1008–1013): the title section or the published legal text. */
.mk-page, .mk-section { max-width: 72rem; margin: 0 auto; padding: 4rem var(--mk-gutter); }
.mk-legal { max-width: 48rem; line-height: 1.6; color: var(--sc-color-text); }
.mk-legal > p:first-child { color: var(--sc-color-text-muted); }
.mk-section-head { max-width: 44rem; margin: 0 0 2.5rem; }
.mk-section-head h1 { font-size: 2.25rem; line-height: 1.15; margin: .5rem 0 .75rem; }
.mk-section-head p { color: var(--sc-color-text-muted); line-height: 1.6; margin: 0; }

/* Creator section (r.1012/1019): above the footer, on home on top; the stage keeps the app's sizes (no own padding). */
.mk-creator { padding: 0; }

/* Run 30c (MKT-1): the mesh behind the footer (home) or behind Creator + footer as one stage (every other page).
   The stage inside the foot-stage drops its own ground so the one mesh shows through; (0,3,0) beats the light
   ground of site-creator.css, html[data-sc-theme="light"] .sc-creator-stage (0,2,1). */
.mk-foot-stage, .mk-footer-wrap { position: relative; isolation: isolate; overflow: hidden; --sc-mesh-ground: var(--sc-color-bg); }
.mk-foot-stage .mk-creator .sc-creator-stage { background: none; }

/* Examples */
.mk-examples-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }

/* Footer (r.998–1007; run 31d MKT-1, r.186–187): a card on the mesh in the theme ground with exactly the box of
   .siteclick-wrapper, so its content lines up with the Creator above; edge to edge below 1080 px. */
.mk-footer-wrap { padding: 4rem 0; }
.mk-footer {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
    box-sizing: border-box; /* NAFIX-31d-2: the box of .siteclick-wrapper (border-box), not 2 × --mk-wrap-pad wider */
    max-width: var(--mk-wrap-w);
    margin: 0 auto;
    padding: 2rem var(--mk-wrap-pad);
    background: var(--sc-color-bg);
    border-radius: var(--sc-radius-lg);
    box-shadow: var(--sc-shadow-pop);
}
.mk-footer-brand { display: inline-flex; align-self: start; }
.mk-footer-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; }
.mk-footer-col { display: flex; flex-direction: column; gap: .5rem; }
.mk-footer-title { margin: 0 0 .25rem; color: var(--sc-color-text-strong); font-weight: var(--sc-font-weight-ui); }
.mk-footer-col a { color: var(--sc-color-text-muted); text-decoration: none; transition: color var(--sc-dur-fast) var(--sc-ease-out); }
.mk-footer-col a:hover { color: var(--sc-color-text-strong); }
.mk-footer-bottom { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--sc-color-text-subtle); }
.mk-footer-copy { margin: 0; }
@media (max-width: 1080px) {
    .mk-footer { border-radius: 0; }
}

/* Example panel (siteclick-panel-* in a wide sheet) */
.mk-panel { position: fixed; inset: 0; z-index: calc(var(--sc-z-rail) + 10); }
.mk-panel[hidden] { display: none; }
.mk-panel-backdrop { position: absolute; inset: 0; background: var(--sc-overlay-dark); animation: mk-fade var(--sc-motion-d, var(--sc-dur-slow)) var(--sc-motion-ease, var(--sc-ease-out)); }
.mk-panel-sheet {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(32rem, 100%);
    display: flex;
    flex-direction: column;
    background: var(--sc-color-panel-bg);
    box-shadow: var(--sc-shadow-pop);
    animation: mk-slide var(--sc-motion-d, var(--sc-dur-slow)) var(--sc-motion-ease, var(--sc-ease-out));
}
/* Closing plays both animations in reverse in the same phase; marketing.js hides the panel on animationend. */
.mk-panel.is-closing .mk-panel-backdrop { animation: mk-fade-close var(--sc-motion-d, var(--sc-dur-slow)) var(--sc-motion-ease, var(--sc-ease-out)) reverse both; }
.mk-panel.is-closing .mk-panel-sheet { animation: mk-slide-close var(--sc-motion-d, var(--sc-dur-slow)) var(--sc-motion-ease, var(--sc-ease-out)) reverse both; }
.mk-example-panel .mk-panel-sheet { width: min(72rem, 92vw); }
.mk-panel .siteclick-panel-title { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; }
.mk-panel .siteclick-panel-title-in { flex: 1; display: flex; align-items: baseline; gap: 1rem; min-width: 0; }
.mk-panel .siteclick-panel-close { position: static; }
.mk-panel .siteclick-panel-body-in { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.mk-panel .siteclick-panel-content { flex: 1; overflow: auto; }
.mk-panel .siteclick-panel-footer { padding: 1rem 1.25rem; }
.mk-example-visit { color: var(--sc-color-text-muted); font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-example-frame { height: 100%; }
.mk-example-frame iframe { display: block; width: 100%; height: 100%; min-height: 60vh; border: 0; background: var(--sc-color-white); }
html.mk-locked { overflow: hidden; }
@keyframes mk-fade { from { opacity: 0; } }
@keyframes mk-slide { from { transform: translateX(2rem); opacity: 0; } }
@keyframes mk-fade-close { from { opacity: 0; } }
@keyframes mk-slide-close { from { transform: translateX(2rem); opacity: 0; } }

/* Below 64em the wordmark gives way to the S mark. */
@media (width < 64em) {
    .mk-head-wordmark { display: none; }
    .mk-head-mark { display: block; }
}

/* Phones (375 px without horizontal scroll): the footer stacks. */
@media (max-width: 48em) {
    .mk-body { --mk-gutter: 1rem; }
    .mk-page, .mk-section { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .mk-footer-wrap { padding: 2rem 0; }
    .mk-footer { grid-template-columns: 1fr; padding: 1.5rem var(--mk-wrap-pad); }
    .mk-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mk-panel-sheet, .mk-example-panel .mk-panel-sheet { width: 100%; }
}

/* Reduced motion: the panel without animation. */
@media (prefers-reduced-motion: reduce) {
    .mk-panel-backdrop, .mk-panel-sheet, .mk-panel.is-closing .mk-panel-backdrop, .mk-panel.is-closing .mk-panel-sheet { animation: none; }
}