/* Marketing sections (run 32b, MKP-0, r.25–30): <x-mk.section> and the inner markup of marketing.sections.*, plus
   the base of the product visuals (.mk-vis + mock primitives) and, since MKP-5, the visuals themselves (part 1 and
   part 2 below, formerly visuals-1.css and visuals-2.css): one stylesheet per marketing page.
   The inner box equals the Creator wrapper and the footer card (border-box, --mk-wrap-w, --mk-wrap-pad), so every
   section's content lines up with them. Tokens only; sizes are allowed here (feature sheet, not ui-*.css). */

.mk-sec { padding-block: clamp(3rem, 8vw, 6rem); background: var(--sc-color-bg); }
.mk-sec-in { box-sizing: border-box; max-width: var(--mk-wrap-w); margin: 0 auto; padding-inline: var(--mk-wrap-pad); }
.mk-sec.is-wide > .mk-sec-in { max-width: none; }
.mk-sec--hero { padding-top: clamp(2rem, 6vw, 4rem); }
/* An existing full-bleed block (Creator on the mesh): no box and no ground of its own. */
.mk-sec--block { padding: 0; background: none; }
.mk-sec--block > .mk-sec-in { max-width: none; padding: 0; }

.mk-sec-head { max-width: 44rem; margin: 0 0 2.5rem; }
.mk-sec-head p { margin: .75rem 0 0; color: var(--sc-color-text-muted); }
.mk-more { display: inline-block; margin-top: 1rem; color: var(--sc-color-primary); font-weight: var(--sc-font-weight-ui); text-decoration: none; }
.mk-more:hover { text-decoration: underline; }
.mk-more + .mk-more { margin-left: 1.5rem; }

/* hero */
.mk-hero { display: flex; flex-direction: column; align-items: center; text-align: center; }
.mk-hero-title { font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1.05; letter-spacing: -.02em; margin: 0; }
.mk-hero-text { max-width: 36rem; margin: 1rem 0 0; color: var(--sc-color-text-muted); font-size: 1.125rem; }
.mk-hero-cta { justify-content: center; margin-top: 1.5rem; }
.mk-hero-visual { margin-top: clamp(2rem, 5vw, 3.5rem); }

/* split */
.mk-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--mk-gutter); align-items: center; }
.mk-split-copy p { margin: .75rem 0 0; color: var(--sc-color-text-muted); }
.mk-sec--split.is-flip .mk-split-copy { order: 2; }

/* grid */
.mk-grid { display: grid; gap: 1rem; }
.mk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mk-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.mk-tile { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem; color: inherit; text-decoration: none; }
.mk-tile-icon { display: inline-flex; color: var(--sc-color-text-strong); font-size: 1.25rem; }
.mk-tile-title { margin: 0; font-size: 1rem; }
.mk-tile-text { margin: 0; color: var(--sc-color-text-muted); }

/* band */
.mk-band { display: flex; flex-direction: column; align-items: center; gap: 2rem; text-align: center; }
.mk-band-title { margin: 0; }
.mk-band-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1.5rem; width: 100%; max-width: var(--mk-wrap-w); margin: 0; }
.mk-band-figures dt { color: var(--sc-color-text-strong); font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: var(--sc-font-weight-title); line-height: 1.1; }
.mk-band-figures dd { margin: .25rem 0 0; color: var(--sc-color-text-muted); }
.mk-band-cta { justify-content: center; }

/* proof: the loop keeps its .sc-loop ladder; the section is wide, the heading stays in the content box. */
.mk-sec--proof .mk-sec-head { box-sizing: border-box; max-width: var(--mk-wrap-w); margin-inline: auto; }

/* steps */
.mk-steps { counter-reset: mk-step; display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.mk-steps > li { counter-increment: mk-step; display: flex; align-items: baseline; gap: 1rem; }
.mk-steps > li::before {
    content: counter(mk-step);
    flex: 0 0 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--sc-color-surface-alt);
    color: var(--sc-color-text-strong);
    font-weight: var(--sc-font-weight-ui);
}

/* chips */
.mk-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.mk-chips > li { padding: .375rem .875rem; border-radius: 999px; background: var(--sc-color-surface-alt); color: var(--sc-color-text); }

/* faq */
.mk-faqs { display: grid; gap: .5rem; }
.mk-faq { border-bottom: 1px solid var(--sc-color-hairline); }
.mk-faq > summary { padding: 1rem 0; color: var(--sc-color-text-strong); font-weight: var(--sc-font-weight-ui); cursor: pointer; }
.mk-faq > p { margin: 0 0 1rem; color: var(--sc-color-text-muted); }

/* Visual base (marketing D4): every marketing.visuals.{name} root is div.mk-vis.mk-vis--{name}. */
.mk-vis {
    --mk-vis-bar: 1.75rem;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid var(--sc-color-hairline);
    border-radius: var(--sc-radius-lg);
    background: var(--sc-color-surface);
    box-shadow: var(--sc-shadow-pop);
    color: var(--sc-color-text);
    font-size: .75rem;
}
.mk-vis--hero { aspect-ratio: 21 / 9; }
/* A window: the title bar (with three dots) is drawn by ::before/::after; content sits below it. */
.mk-vis-win {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    height: 100%;
    padding: calc(var(--mk-vis-bar) + .75rem) .75rem .75rem;
    border: 1px solid var(--sc-color-hairline);
    border-radius: var(--sc-radius-md);
    background: var(--sc-color-bg);
    overflow: hidden;
}
.mk-vis-win::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: var(--mk-vis-bar);
    border-bottom: 1px solid var(--sc-color-hairline);
    background: var(--sc-color-surface-alt);
}
.mk-vis-win::after {
    content: '';
    position: absolute;
    top: calc(var(--mk-vis-bar) / 2 - 3px);
    left: .75rem;
    width: 30px;
    height: 6px;
    background: radial-gradient(circle, var(--sc-color-text-faint) 2.5px, transparent 3px) 0 0 / 12px 6px repeat-x;
}
.mk-vis-row { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.mk-vis-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .125rem .5rem;
    border: 1px solid var(--sc-color-hairline);
    border-radius: 999px;
    background: var(--sc-color-surface-alt);
    color: var(--sc-color-text-muted);
    white-space: nowrap;
}
.mk-vis-dot { display: inline-block; flex: 0 0 auto; width: .5rem; height: .5rem; border-radius: 50%; background: var(--mk-vis-dot, var(--sc-color-primary)); }
/* A text bar; --w sets its width (default 100%). */
.mk-vis-line { display: block; width: var(--w, 100%); height: .5rem; border-radius: 999px; background: var(--sc-color-text-faint); opacity: .45; }
/* A mock grid; --cols sets the column count (default 3). */
.mk-vis-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: .5rem; }

@media (prefers-reduced-motion: reduce) {
    .mk-vis, .mk-vis * { transition: none; animation: none; }
}

/* Phones: one column, the visual above the copy; 6 tiles become 2. */
@media (max-width: 48em) {
    .mk-split { grid-template-columns: 1fr; }
    .mk-split-visual { order: -1; }
    .mk-sec--split.is-flip .mk-split-copy { order: 0; }
    .mk-grid--3, .mk-grid--4 { grid-template-columns: 1fr; }
    .mk-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mk-band-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* MKP-5 (MEET-MKP-1 nafix): section buttons are at least 40 px high. (0,2,0)/(0,2,1) after shared.css
   .siteclick-container .button (0,2,0, min-height: auto): wins on load order (this sheet loads in the body). */
.mk-sec .button, .mk-sec button.button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; }
/* A hero visual outside .mk-hero (founding mark) is centred under the title like the hero itself. */
.mk-sec--hero > .mk-sec-in > .mk-hero-visual { display: flex; justify-content: center; }
.mk-hero-visual .sc-founding-mark { color: var(--sc-color-primary); }
/* /contact: the pricing root inside a block section takes the section box. (0,3,0) beats .mk-body .sc-pricing
   (sc-pricing.css, 0,2,0), which loads later inside that section. */
.mk-sec.mk-sec--block .sc-pricing {
    max-width: var(--mk-wrap-w);
    padding: clamp(3rem, 8vw, 6rem) var(--mk-wrap-pad);
    gap: 0;
}

/* Run 32b MKP-V1: marketing visuals part 1 (product/app mockups). Tokens only; the .mk-vis base lives in sections.css (MKP-0).
   Every size is in em on a stage font-size that follows the container width, so a mockup scales as one picture. */

.mk-vis--editor, .mk-vis--inherit, .mk-vis--breakpoints, .mk-vis--sections, .mk-vis--agent, .mk-vis--aibar, .mk-vis--flow,
.mk-vis--import, .mk-vis--help, .mk-vis--hubs, .mk-vis--org, .mk-vis--members, .mk-vis--health, .mk-vis--staffel {
    container-type: inline-size;
}

.mk-v1-stage {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1em;
    width: 100%;
    height: 100%;
    padding: 1.6em;
    overflow: hidden;
    font-family: var(--sc-font-sans);
    font-size: clamp(6px, 1.7cqi, 13px);
    line-height: 1.3;
    color: var(--sc-color-text-muted);
}

.mk-v1-stage *, .mk-v1-stage *::before, .mk-v1-stage *::after { box-sizing: border-box; }


/* Primitives of §7.F (sections.css, MKP-0): only sizes in em here, so they scale with the stage; colours stay theirs. */
.mk-v1-stage { --mk-vis-bar: 2.4em; }
.mk-v1-stage .mk-vis-win { flex: 1 1 auto; min-height: 0; padding: calc(var(--mk-vis-bar) + 1em) 1em 1em; gap: .7em; }
.mk-v1-stage .mk-vis-win.mk-v1-win--flush { padding: var(--mk-vis-bar) 0 0; gap: 0; }
.mk-v1-stage .mk-vis-row { gap: .6em; }
.mk-v1-stage .mk-vis-chip { flex: 0 0 auto; gap: .4em; padding: .25em .7em; }
.mk-v1-stage .mk-vis-dot { width: .7em; height: .7em; }
.mk-v1-stage .mk-vis-line { flex: 0 0 auto; height: .55em; }
.mk-v1-stage .mk-vis-grid { gap: .8em; min-height: 0; }
.mk-v1-col1 { --cols: 1; }

.mk-v1-w20 { --w: 20%; }
.mk-v1-w30 { --w: 30%; }
.mk-v1-w40 { --w: 40%; }
.mk-v1-w50 { --w: 50%; }
.mk-v1-w60 { --w: 60%; }
.mk-v1-w70 { --w: 70%; }
.mk-v1-w80 { --w: 80%; }
.mk-v1-w90 { --w: 90%; }

.mk-v1-stage .mk-vis-line.mk-v1-title { height: 1em; background: var(--sc-color-text-faint); }
.mk-v1-stage .mk-vis-chip.is-on { background: var(--sc-color-primary); color: var(--sc-color-white); }

/* Atoms of this file. */
.mk-v1-url {
    position: absolute;
    top: calc(var(--mk-vis-bar) / 2);
    left: 50%;
    z-index: 1;
    max-width: 50%;
    padding: .15em .8em;
    overflow: hidden;
    border-radius: var(--sc-radius-full);
    background: var(--sc-color-bg);
    color: var(--sc-color-text-subtle);
    white-space: nowrap;
    text-overflow: ellipsis;
    transform: translate(-50%, -50%);
}

.mk-v1-label { color: var(--sc-color-text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-v1-strong { color: var(--sc-color-text-strong); font-weight: var(--sc-font-weight-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-v1-mono { font-family: var(--sc-font-mono); }
.mk-v1-grow { flex: 1 1 auto; min-width: 0; }
.mk-v1-link { color: var(--sc-color-primary); white-space: nowrap; }

.mk-v1-panel {
    display: flex;
    flex-direction: column;
    gap: .7em;
    min-width: 0;
    min-height: 0;
    padding: 1em;
    overflow: hidden;
    border-radius: var(--sc-radius-md);
    background: var(--sc-color-bg);
    box-shadow: inset 0 0 0 1px var(--sc-color-hairline);
}

.mk-v1-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4em;
    flex: 0 0 auto;
    padding: .45em 1em;
    border-radius: var(--sc-radius-sm);
    background: var(--sc-color-primary);
    color: var(--sc-color-white);
    white-space: nowrap;
}

.mk-v1-btn--ghost { background: transparent; color: var(--sc-color-text-muted); box-shadow: inset 0 0 0 1px var(--sc-color-hairline); }

.mk-v1-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.2em;
    height: 1.2em;
    border-radius: var(--sc-radius-sm);
    box-shadow: inset 0 0 0 1px var(--sc-color-border-strong);
    font-size: 1em;
}

.mk-v1-check.is-on { background: var(--sc-color-primary); box-shadow: none; color: var(--sc-color-white); }
.mk-v1-check .icon { font-size: .8em; }

/* Level dots: the editor's categorical level colours. */
.mk-v1-lvl { display: inline-block; flex: 0 0 auto; width: .7em; height: .7em; border-radius: 50%; }
.mk-v1-lvl--site { background: var(--np-lvl-site); }
.mk-v1-lvl--page { background: var(--np-lvl-page); }
.mk-v1-lvl--section { background: var(--np-lvl-section); }
.mk-v1-lvl--row { background: var(--np-lvl-row); }
.mk-v1-lvl--column { background: var(--np-lvl-column); }
.mk-v1-lvl--component { background: var(--np-lvl-component); }

/* editor: page + nodebar + sidebar */
.mk-v1-ed-body { display: grid; grid-template-columns: minmax(0, 1fr) 34%; flex: 1 1 auto; min-height: 0; }
.mk-v1-ed-page { display: flex; flex-direction: column; gap: .8em; padding: 1.4em 1.6em; min-width: 0; overflow: hidden; }
.mk-v1-ed-node { position: relative; display: flex; flex-direction: column; gap: .6em; margin-top: 2.2em; padding: .9em; border-radius: var(--sc-radius-sm); box-shadow: 0 0 0 2px var(--np-lvl-component); }
.mk-v1-ed-nodebar { position: absolute; left: -2px; bottom: calc(100% + .4em); display: flex; gap: .3em; }
.mk-v1-ed-nodebar .mk-vis-chip { padding: .2em .55em; background: var(--sc-color-surface-alt); }
.mk-v1-ed-cols { --cols: 3; }
.mk-v1-ed-card { display: flex; flex-direction: column; gap: .5em; padding: .8em; border-radius: var(--sc-radius-sm); background: var(--sc-color-surface-alt); }
.mk-v1-ed-side { display: flex; flex-direction: column; gap: .8em; padding: 1.1em; min-width: 0; background: var(--sc-color-panel-bg); box-shadow: inset 1px 0 0 var(--sc-color-hairline); }
.mk-v1-ed-field { display: grid; grid-template-columns: .7em minmax(0, 2fr) minmax(0, 3fr); align-items: center; gap: .5em; }
.mk-v1-ed-input { height: 1.6em; border-radius: var(--sc-radius-sm); background: var(--sc-color-surface-alt); }

/* inherit: site → page → section */
.mk-v1-in-step { display: grid; grid-template-columns: 7em minmax(0, 1fr); align-items: center; gap: 1em; }
.mk-v1-in-step + .mk-v1-in-step { position: relative; }
.mk-v1-in-row { display: flex; align-items: center; gap: .7em; min-width: 0; padding: .8em 1em; border-radius: var(--sc-radius-md); background: var(--sc-color-bg); box-shadow: inset 0 0 0 1px var(--sc-color-hairline); }
.mk-v1-in-row.is-own { box-shadow: inset 0 0 0 1px var(--np-lvl-section); }
.mk-v1-in-swatch { flex: 0 0 auto; width: 1.4em; height: 1.4em; border-radius: var(--sc-radius-sm); background: var(--sc-color-primary); }
.mk-v1-in-swatch--own { background: var(--sc-color-green); }
.mk-v1-in-row .mk-v1-label { flex: 1 1 auto; }
.mk-v1-in-tabs { display: flex; gap: .3em; flex: 0 0 auto; }

/* breakpoints: three ranges */
.mk-v1-bp { display: grid; grid-template-columns: 5fr 3fr 2fr; align-items: end; gap: 1.4em; flex: 1 1 auto; min-height: 0; }
.mk-v1-bp-dev { display: flex; flex-direction: column; gap: .6em; min-width: 0; height: 100%; justify-content: flex-end; }
.mk-v1-stage .mk-v1-bp-dev .mk-vis-win { flex: 0 0 auto; padding: calc(var(--mk-vis-bar) + .8em) .8em .8em; gap: .6em; }
.mk-v1-stage .mk-v1-bp-dev--d .mk-vis-win { height: 70%; }
.mk-v1-stage .mk-v1-bp-dev--t .mk-vis-win { height: 82%; }
.mk-v1-stage .mk-v1-bp-dev--m .mk-vis-win { height: 92%; }
.mk-v1-stage .mk-v1-bp-cols { --cols: 3; gap: .5em; }
.mk-v1-stage .mk-v1-bp-dev--t .mk-v1-bp-cols { --cols: 2; }
.mk-v1-stage .mk-v1-bp-dev--m .mk-v1-bp-cols { --cols: 1; }
.mk-v1-bp-tile { height: 3.2em; border-radius: var(--sc-radius-sm); background: var(--sc-color-surface-alt); }
.mk-v1-bp-dev .mk-vis-row { justify-content: center; }

/* sections: library */
.mk-v1-lib { --cols: 3; flex: 1 1 auto; }
.mk-v1-lib-card { display: flex; flex-direction: column; gap: .5em; min-width: 0; min-height: 0; }
.mk-v1-lib-thumb { display: flex; flex-direction: column; justify-content: center; gap: .45em; flex: 1 1 auto; padding: .9em; border-radius: var(--sc-radius-sm); background: var(--sc-color-bg); box-shadow: inset 0 0 0 1px var(--sc-color-hairline); }
.mk-v1-lib-card.is-on .mk-v1-lib-thumb { box-shadow: inset 0 0 0 2px var(--sc-color-primary); }
.mk-v1-lib-thumb--center { align-items: center; }
.mk-v1-lib-split { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; align-items: center; }
.mk-v1-lib-block { height: 3em; border-radius: var(--sc-radius-sm); background: var(--sc-color-surface-alt); }
.mk-v1-lib-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; }
.mk-v1-lib-cols .mk-v1-lib-block { height: 2em; }

/* agent: composer + answer card */
.mk-v1-ag-msg { align-self: flex-end; max-width: 70%; padding: .7em 1em; border-radius: var(--sc-radius-md); background: var(--sc-color-primary-soft); color: var(--sc-color-text-strong); }
.mk-v1-ag-card { flex: 0 0 auto; }
.mk-v1-ag-card .mk-vis-row .icon { color: var(--sc-color-green); }
.mk-v1-composer { display: flex; flex-direction: column; gap: .8em; flex: 0 0 auto; padding: .9em 1em; border-radius: var(--sc-radius-lg); background: var(--sc-color-bg); box-shadow: inset 0 0 0 1px var(--sc-color-border-strong); }
.mk-v1-composer-send { display: inline-flex; align-items: center; justify-content: center; width: 2em; height: 2em; margin-left: auto; border-radius: 50%; background: var(--sc-color-primary); color: var(--sc-color-white); }

/* aibar: AI bar at the bottom */
.mk-v1-ai-page { flex: 1 1 auto; align-content: start; padding: 1.6em; gap: 1em; }
.mk-v1-ai-bar { display: flex; align-items: center; gap: .6em; flex: 0 0 auto; height: 3.4em; padding: 0 .8em; overflow: hidden; background: var(--sc-color-bar-bg); box-shadow: inset 0 1px 0 var(--sc-color-hairline); color: var(--sc-color-bar-ink); }
.mk-v1-ai-ctx { display: inline-flex; align-items: center; gap: .5em; flex: 0 0 auto; padding: .35em .7em; border-radius: var(--sc-radius-sm); background: var(--sc-color-bar-control-bg); color: var(--sc-color-bar-control-ink); }
.mk-v1-ai-ctx .sc-avatar { --sc-avatar-size: 1.5em; }
.mk-v1-ai-bar .mk-vis-chip { background: transparent; box-shadow: inset 0 0 0 1px var(--sc-color-hairline); color: var(--sc-color-bar-ink); }

/* flow: choice → review → done */
.mk-v1-fl-steps { justify-content: center; }
.mk-v1-fl-sep { flex: 0 1 3em; height: 1px; background: var(--sc-color-hairline); }
.mk-v1-fl-steps .mk-vis-chip.is-done { background: var(--sc-color-green-soft); color: var(--sc-color-text-strong); }
.mk-v1-fl-steps .mk-vis-chip.is-done .icon { color: var(--sc-color-green); }
.mk-v1-fl-choices { --cols: 3; }
.mk-v1-fl-choice { display: flex; flex-direction: column; gap: .6em; padding: 1em; border-radius: var(--sc-radius-md); background: var(--sc-color-surface-alt); }
.mk-v1-fl-choice.is-on { box-shadow: inset 0 0 0 2px var(--sc-color-primary); }
.mk-v1-fl-foot { justify-content: flex-end; }

/* import: crawl review in a sitemap */
.mk-v1-im-tree { display: flex; flex-direction: column; gap: .55em; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.mk-v1-im-node { padding-left: calc(var(--d, 0) * 1.8em); }
.mk-v1-im-d1 { --d: 1; }
.mk-v1-im-d2 { --d: 2; }
.mk-v1-im-node.is-off .mk-v1-label { text-decoration: line-through; opacity: .6; }
.mk-v1-im-path { flex: 1 1 auto; }
.mk-v1-im-node .mk-vis-chip.is-new { background: var(--sc-color-green-soft); color: var(--sc-color-text-strong); }

/* help: help pane with a link */
.mk-v1-hp { display: grid; grid-template-columns: minmax(0, 1fr) 42%; flex: 1 1 auto; min-height: 0; }
.mk-v1-hp-page { align-content: start; padding: 1.6em; gap: 1em; }
.mk-v1-hp-pane { display: flex; flex-direction: column; gap: .8em; padding: 1.1em; min-width: 0; background: var(--sc-color-panel-bg); box-shadow: inset 1px 0 0 var(--sc-color-hairline); }
.mk-v1-hp-search { padding: .45em .8em; border-radius: var(--sc-radius-sm); background: var(--sc-color-surface-alt); color: var(--sc-color-text-subtle); }
.mk-v1-hp-link { align-self: flex-start; display: inline-flex; align-items: center; gap: .3em; padding: .3em .7em; border-radius: var(--sc-radius-sm); background: var(--sc-color-primary-soft); color: var(--sc-color-text-strong); }

/* hubs: four mini panels */
.mk-v1-hubs { --cols: 2; grid-template-rows: repeat(2, minmax(0, 1fr)); flex: 1 1 auto; }
.mk-v1-hub-head { color: var(--sc-color-text-strong); }
.mk-v1-hub-head .icon { color: var(--sc-color-primary); }
.mk-v1-hub-swatches { display: flex; gap: .4em; }
.mk-v1-hub-swatch { width: 1.8em; height: 1.8em; border-radius: var(--sc-radius-sm); background: var(--sc-color-primary); }
.mk-v1-hub-swatch--2 { background: var(--sc-color-green); }
.mk-v1-hub-swatch--3 { background: var(--sc-color-orange); }
.mk-v1-hub-swatch--4 { background: var(--sc-color-text-strong); }
.mk-v1-hub-type { margin-left: auto; color: var(--sc-color-text-strong); font-size: 2em; font-weight: var(--sc-font-weight-title); line-height: 1; }
.mk-v1-hub-meter { flex: 1 1 auto; height: .55em; overflow: hidden; border-radius: var(--sc-radius-full); background: var(--sc-color-surface-alt); }
.mk-v1-hub-meter > span { display: block; width: 82%; height: 100%; background: var(--sc-color-green); }
.mk-v1-hub-score { color: var(--sc-color-text-strong); font-weight: var(--sc-font-weight-title); }

/* org: avatar + site loop */
.mk-v1-org-head .sc-avatar { --sc-avatar-size: 3em; }
.mk-v1-org-loop { --cols: 4; }
.mk-v1-org-site { display: flex; flex-direction: column; gap: .5em; min-width: 0; min-height: 0; }
.mk-v1-org-shot { aspect-ratio: 3 / 4; display: flex; flex-direction: column; gap: .4em; padding: .8em; border-radius: var(--sc-radius-sm); background: var(--sc-color-bg); box-shadow: inset 0 0 0 1px var(--sc-color-hairline); }
.mk-v1-org-shot .mk-v1-lib-block { flex: 1 1 auto; height: auto; }
.mk-v1-org-site .mk-vis-dot { --mk-vis-dot: var(--sc-color-border-strong); }
.mk-v1-org-site .mk-vis-dot.is-live { --mk-vis-dot: var(--sc-color-green); }

/* members: access per site */
.mk-v1-mb-table { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) repeat(3, minmax(0, .8fr)); align-items: center; gap: .8em 1em; }
.mk-v1-mb-head { color: var(--sc-color-text-subtle); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-v1-mb-head:first-child, .mk-v1-mb-head:nth-child(2) { text-align: left; }
.mk-v1-mb-cell { display: flex; justify-content: center; }
.mk-v1-mb-table .sc-avatar { --sc-avatar-size: 2em; }

/* health: badges + rows */
.mk-v1-hl-sum .sc-health-badge { flex: 0 0 auto; }
.mk-v1-hl-rows { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.mk-v1-hl-row { padding: .75em 0; box-shadow: inset 0 -1px 0 var(--sc-color-hairline); }
.mk-v1-hl-row .sc-health-badge { flex: 0 0 auto; }

/* staffel: price stair from PricingQuote::tiers('month') */
.mk-v1-st { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: .8em; flex: 1 1 auto; min-height: 0; }
.mk-v1-st-step { display: flex; flex-direction: column; justify-content: flex-start; gap: .4em; min-width: 0; padding: 1em; border-radius: var(--sc-radius-md) var(--sc-radius-md) 0 0; background: var(--sc-color-surface-alt); box-shadow: inset 0 0 0 1px var(--sc-color-hairline); }
.mk-v1-st-step--1 { height: 100%; background: var(--sc-color-primary-soft); }
.mk-v1-st-step--2 { height: 78%; }
.mk-v1-st-step--3 { height: 58%; }
.mk-v1-st-price { color: var(--sc-color-text-strong); font-size: 2.2em; font-weight: var(--sc-font-weight-title); line-height: 1.1; white-space: nowrap; }

@media (prefers-reduced-motion: no-preference) {
    .mk-v1-lib-card .mk-v1-lib-thumb, .mk-v1-fl-choice { transition: box-shadow .2s ease; }
}

/* Run 32b MKP-V2: marketing visuals part 2 (hubs, commerce, company). Tokens only; the .mk-vis base and the
   primitives live in sections.css (MKP-0). Sizes are in em on a stage font-size that follows the container width,
   so a mockup scales as one picture; layouts stretch, so 16/10 and 21/9 both fill. */

.mk-vis--collections, .mk-vis--connectors, .mk-vis--media, .mk-vis--design, .mk-vis--effects, .mk-vis--library,
.mk-vis--seo, .mk-vis--geo, .mk-vis--analytics, .mk-vis--hosting, .mk-vis--cookies, .mk-vis--legal,
.mk-vis--updates, .mk-vis--partners, .mk-vis--referral, .mk-vis--status {
    container-type: inline-size;
}

.mk-v2-stage {
    --mk-vis-bar: 2em;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1em;
    width: 100%;
    height: 100%;
    padding: 1.6em;
    overflow: hidden;
    font-family: var(--sc-font-sans);
    font-size: clamp(6px, 1.7cqi, 13px);
    line-height: 1.3;
    color: var(--sc-color-text-muted);
}
.mk-v2-stage *, .mk-v2-stage *::before, .mk-v2-stage *::after { box-sizing: border-box; }
.mk-v2-stage ul, .mk-v2-stage ol { margin: 0; padding: 0; list-style: none; }
.mk-v2-stage p { margin: 0; }

/* Primitives (names from §7.F) re-scaled to the stage. */
.mk-v2-stage .mk-vis-win { flex: 1 1 auto; min-height: 0; gap: .8em; padding: calc(var(--mk-vis-bar) + 1em) 1em 1em; }
.mk-v2-stage .mk-vis-row { gap: .6em; }
.mk-v2-stage .mk-vis-chip { gap: .35em; padding: .2em .7em; font-size: .9em; }
.mk-v2-stage .mk-vis-dot { width: .7em; height: .7em; }
.mk-v2-stage .mk-vis-line { height: .6em; }
.mk-v2-stage .mk-vis-grid { gap: .8em; }

.mk-v2-w30 { --w: 30%; }
.mk-v2-w50 { --w: 50%; }
.mk-v2-w70 { --w: 70%; }
.mk-v2-w90 { --w: 90%; }

.mk-v2-dot-green { --mk-vis-dot: var(--sc-color-green); }
.mk-v2-dot-orange { --mk-vis-dot: var(--sc-color-orange); }
.mk-v2-dot-purple { --mk-vis-dot: var(--sc-color-purple); }

/* Shared building blocks. */
.mk-v2-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1em; flex: 1 1 auto; min-height: 0; }
.mk-v2-col { display: flex; flex-direction: column; gap: .7em; min-width: 0; min-height: 0; overflow: hidden; }
.mk-v2-grow { flex: 1 1 auto; min-width: 0; }
.mk-v2-end { margin-left: auto; }
.mk-v2-title { overflow: hidden; color: var(--sc-color-text-strong); font-size: 1.15em; font-weight: var(--sc-font-weight-title); text-overflow: ellipsis; white-space: nowrap; }
.mk-v2-label { color: var(--sc-color-text-subtle); font-size: .85em; text-transform: uppercase; letter-spacing: .04em; }
.mk-v2-strong { color: var(--sc-color-text-strong); font-weight: var(--sc-font-weight-ui); }
.mk-v2-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-v2-card {
    display: flex;
    flex-direction: column;
    gap: .6em;
    min-width: 0;
    padding: .9em;
    border-radius: var(--sc-radius-md);
    background: var(--sc-color-surface);
    box-shadow: inset 0 0 0 1px var(--sc-color-hairline);
}
.mk-v2-card.is-on { box-shadow: inset 0 0 0 1px var(--sc-color-primary); }
.mk-v2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .5em 1em;
    border-radius: var(--sc-radius-md);
    background: var(--sc-color-primary);
    color: var(--sc-color-white);
    font-weight: var(--sc-font-weight-ui);
    white-space: nowrap;
}
.mk-v2-btn--ghost { background: var(--sc-color-transparent); color: var(--sc-color-text-strong); box-shadow: inset 0 0 0 1px var(--sc-color-border-strong); }
.mk-v2-mono { font-family: var(--sc-font-mono); }

/* collections: list with date + location, detail with a map tile. */
.mk-v2-date {
    display: flex;
    flex: 0 0 3.2em;
    flex-direction: column;
    align-items: center;
    padding: .35em 0;
    border-radius: var(--sc-radius-sm);
    background: var(--sc-color-surface-alt);
    font-size: .85em;
    line-height: 1.1;
}
.mk-v2-date b { color: var(--sc-color-text-strong); font-size: 1.35em; }
.mk-v2-item { padding: .45em; border-radius: var(--sc-radius-md); }
.mk-v2-item.is-on { background: var(--sc-color-primary-soft); }
.mk-v2-item .mk-v2-strong { display: block; }
.mk-v2-map {
    position: relative;
    flex: 1 1 6em;
    min-height: 4em;
    overflow: hidden;
    border-radius: var(--sc-radius-md);
    background:
        linear-gradient(var(--sc-color-hairline) 1px, transparent 1px) 0 0 / 2.4em 2.4em,
        linear-gradient(90deg, var(--sc-color-hairline) 1px, transparent 1px) 0 0 / 2.4em 2.4em,
        var(--sc-color-surface-alt);
}
.mk-v2-map::before {
    content: '';
    position: absolute;
    inset: 35% -10% auto -10%;
    height: .8em;
    background: var(--sc-color-blue-soft);
    transform: rotate(-12deg);
}
.mk-v2-pin {
    position: absolute;
    top: 38%;
    left: 52%;
    width: 1.4em;
    height: 1.4em;
    border: .3em solid var(--sc-color-white);
    border-radius: 50% 50% 50% 0;
    background: var(--sc-color-danger);
    transform: translate(-50%, -100%) rotate(-45deg);
}

/* connectors: brand cards + incoming items. */
.mk-v2-logo { display: inline-flex; flex: 0 0 auto; width: 1.8em; height: 1.8em; color: var(--sc-color-text-strong); }
.mk-v2-logo svg { width: 100%; height: 100%; }
.mk-v2-stars { color: var(--sc-color-yellow); letter-spacing: .1em; }

/* media: masonry of placeholder tiles. */
.mk-v2-masonry { flex: 0 0 auto; columns: 4; column-gap: .8em; }
.mk-v2-tile {
    display: block;
    height: 6em;
    margin-bottom: .8em;
    border-radius: var(--sc-radius-md);
    background: linear-gradient(135deg, var(--mk-v2-tile, var(--sc-color-primary)), var(--mk-v2-tile-soft, var(--sc-color-primary-soft)));
    break-inside: avoid;
}
.mk-v2-tile--tall { height: 10em; }
.mk-v2-tile--short { height: 4em; }
.mk-v2-tile--purple { --mk-v2-tile: var(--sc-color-purple); --mk-v2-tile-soft: var(--sc-color-purple-soft); }
.mk-v2-tile--green { --mk-v2-tile: var(--sc-color-green); --mk-v2-tile-soft: var(--sc-color-green-soft); }
.mk-v2-tile--orange { --mk-v2-tile: var(--sc-color-orange); --mk-v2-tile-soft: var(--sc-color-orange-soft); }

/* design: colours, type, buttons. */
.mk-v2-swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em; }
.mk-v2-swatch { aspect-ratio: 1; border-radius: var(--sc-radius-md); box-shadow: inset 0 0 0 1px var(--sc-color-hairline); }
.mk-v2-swatch--primary { background: var(--sc-color-primary); }
.mk-v2-swatch--purple { background: var(--sc-color-purple); }
.mk-v2-swatch--green { background: var(--sc-color-green); }
.mk-v2-swatch--orange { background: var(--sc-color-orange); }
.mk-v2-swatch--text { background: var(--sc-color-text-strong); }
.mk-v2-swatch--surface { background: var(--sc-color-surface-alt); }
.mk-v2-lib.mk-v2-design .mk-v2-card { justify-content: flex-start; }
.mk-v2-fill { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.mk-v2-aa { color: var(--sc-color-text-strong); font-size: 3.4em; font-weight: var(--sc-font-weight-title); line-height: 1; }

/* effects: one card per family with a schematic motion. */
.mk-v2-fx { display: grid; flex: 1 1 auto; min-height: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: .8em; }
.mk-v2-fx .mk-v2-card { justify-content: space-between; overflow: hidden; }
.mk-v2-fx-stage { position: relative; flex: 1 1 auto; min-height: 2.5em; }
.mk-v2-fx-stage::before, .mk-v2-fx-stage::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.6em;
    height: 1.8em;
    border-radius: var(--sc-radius-sm);
    translate: -50% -50%;
}
.mk-v2-fx-stage::before { background: var(--sc-color-primary-soft-strong); }
.mk-v2-fx-stage::after { background: var(--sc-color-primary); }
.mk-v2-fx--fade .mk-v2-fx-stage::before { translate: -120% -50%; }
.mk-v2-fx--fade .mk-v2-fx-stage::after { translate: 20% -50%; }
.mk-v2-fx--slide .mk-v2-fx-stage::before { translate: -50% 10%; }
.mk-v2-fx--slide .mk-v2-fx-stage::after { translate: -50% -90%; }
.mk-v2-fx--zoom-in .mk-v2-fx-stage::before { scale: .5; }
.mk-v2-fx--zoom-in .mk-v2-fx-stage::after { scale: 1.1; opacity: .85; }
.mk-v2-fx--fade-rotate .mk-v2-fx-stage::before { rotate: -25deg; }
.mk-v2-fx--fade-rotate .mk-v2-fx-stage::after { rotate: 0deg; translate: -20% -50%; }
.mk-v2-fx--fade-blur .mk-v2-fx-stage::before { filter: blur(.25em); translate: -110% -50%; }
.mk-v2-fx--fade-blur .mk-v2-fx-stage::after { translate: 10% -50%; }
.mk-v2-fx--pop-in .mk-v2-fx-stage::before { scale: 1.35; border-radius: 50%; }
.mk-v2-fx--pop-in .mk-v2-fx-stage::after { border-radius: 50%; }
.mk-v2-fx-meta { display: flex; justify-content: space-between; gap: .4em; }

/* library: tabs + section cards with a wireframe. */
.mk-v2-tabs { display: flex; gap: 1.2em; border-bottom: 1px solid var(--sc-color-hairline); }
.mk-v2-tab { padding-bottom: .4em; }
.mk-v2-tab.is-on { color: var(--sc-color-text-strong); box-shadow: inset 0 -2px 0 var(--sc-color-primary); }
.mk-v2-lib { grid-auto-rows: minmax(0, 1fr); flex: 1 1 auto; min-height: 0; }
.mk-v2-lib .mk-v2-card { justify-content: space-between; overflow: hidden; }
.mk-v2-wire { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: center; gap: .35em; min-height: 2.5em; padding: .5em; border-radius: var(--sc-radius-sm); background: var(--sc-color-surface-alt); }
.mk-v2-wire--cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: center; }
.mk-v2-wire-block { display: block; height: 1.6em; border-radius: var(--sc-radius-sm); background: var(--sc-color-primary-soft-strong); }

/* seo: score meter (x-sc.meter, its GB text hidden) + search snippet. */
.mk-vis--seo .sc-meter { gap: .5em; }
.mk-vis--seo .sc-meter-text { display: none; }
.mk-vis--seo .sc-meter-bar { height: .7em; border-radius: var(--sc-radius-full); background: var(--sc-color-hairline); overflow: hidden; }
.mk-vis--seo .sc-meter-fill { display: block; width: var(--sc-meter, 0%); height: 100%; border-radius: inherit; background: var(--sc-color-green); }
.mk-v2-score { color: var(--sc-color-text-strong); font-size: 2.6em; font-weight: var(--sc-font-weight-title); line-height: 1; }
.mk-v2-snippet { gap: .3em; }
.mk-v2-snippet-url { color: var(--sc-color-text-subtle); font-size: .9em; }
.mk-v2-snippet-title { color: var(--sc-color-blue); font-size: 1.25em; }

/* geo: llms.txt in mono. */
.mk-v2-code {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 1em;
    overflow: hidden;
    border-radius: var(--sc-radius-md);
    background: var(--sc-color-surface);
    color: var(--sc-color-text);
    font-family: var(--sc-font-mono);
    font-size: 1em;
    line-height: 1.5;
    white-space: pre;
}
.mk-v2-code-h { color: var(--sc-color-text-strong); font-weight: var(--sc-font-weight-ui); }
.mk-v2-code-link { color: var(--sc-color-primary); }

/* analytics: KPI row + a static x-sc.chart that fills the rest. */
.mk-v2-kpi { color: var(--sc-color-text-strong); font-size: 1.6em; font-weight: var(--sc-font-weight-title); font-variant-numeric: tabular-nums; }
.mk-v2-chart { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.mk-vis--analytics .sc-chart { flex: 1 1 auto; min-height: 0; }
.mk-vis--analytics .sc-chart .sc-chart-body { flex: 1 1 auto; height: auto; min-height: 3em; }

/* hosting, status: status dot (no pulse in a visual) + chips. */
:is(.mk-vis--hosting, .mk-vis--status) .sc-status-dot { color: var(--sc-color-text-strong); }
:is(.mk-vis--hosting, .mk-vis--status) .sc-status-dot-pulse::after { display: none; }
/* status: one bar per check, green while the feed reports operational. */
.mk-v2-beats { display: flex; flex: 1 1 auto; gap: .3em; min-height: 0; }
.mk-v2-beats span { flex: 1 1 0; border-radius: 2px; background: var(--sc-color-text-faint); opacity: .45; }
.mk-vis--status.is-operational .mk-v2-beats span { background: var(--sc-color-green); opacity: .7; }
.mk-v2-chips { display: flex; flex-wrap: wrap; gap: .5em; }
.mk-v2-check { color: var(--sc-color-green); font-weight: var(--sc-font-weight-ui); }

/* cookies: page behind a consent notice with the app switches (.siteclick-switch.active). */
.mk-v2-page { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; gap: .8em; min-height: 0; }
.mk-v2-hero-block { flex: 1 1 auto; min-height: 3em; border-radius: var(--sc-radius-md); background: var(--sc-color-primary-soft); }
.mk-v2-consent {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(26em, 100%);
    padding: 1em;
    border-radius: var(--sc-radius-lg);
    background: var(--sc-color-surface);
    box-shadow: var(--sc-shadow-pop), inset 0 0 0 1px var(--sc-color-hairline);
}
.mk-v2-consent .mk-vis-row { justify-content: space-between; }
.mk-v2-consent .siteclick-switch { flex: 0 0 auto; cursor: default; }
.mk-v2-consent .siteclick-switch.is-locked { opacity: .5; }

/* legal: document with articles + acceptance log. */
.mk-v2-article { display: flex; flex-direction: column; gap: .35em; padding-bottom: .6em; border-bottom: 1px solid var(--sc-color-hairline); }

/* updates: own mini card from UpdatesFeed::latest(). */
.mk-v2-update { flex: 1 1 auto; gap: .8em; padding: 1.4em; }
.mk-v2-update .mk-v2-title { font-size: 1.5em; white-space: normal; }
.mk-v2-update-text { display: -webkit-box; overflow: hidden; color: var(--sc-color-text-muted); -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.mk-v2-update--prev { flex: 0 0 auto; opacity: .55; }

/* partners: one card per level. */
.mk-v2-levels { display: grid; flex: 1 1 auto; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: .8em; min-height: 0; }
.mk-v2-levels .mk-v2-card { justify-content: space-between; padding: 1.2em; }
.mk-v2-percent { color: var(--sc-color-text-strong); font-size: 3em; font-weight: var(--sc-font-weight-title); line-height: 1; }

/* referral: link field + steps + credit. */
.mk-v2-link { display: flex; align-items: center; gap: .8em; padding: .7em .9em; border-radius: var(--sc-radius-md); background: var(--sc-color-surface-alt); }
.mk-v2-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8em; }
.mk-v2-step-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8em;
    height: 1.8em;
    border-radius: 50%;
    background: var(--sc-color-primary-soft);
    color: var(--sc-color-primary);
    font-weight: var(--sc-font-weight-ui);
}
.mk-v2-credit { color: var(--sc-color-green); font-weight: var(--sc-font-weight-ui); }