/* ─────────────────────────────────────────────────────────────────────────────
   StoryMint secondary marketing pages (WS4, remediation 2026-09, PLAN §5 WS4).
   /coloring-books, /solutions, /why-storymint, /use-cases, /examples, /pricing,
   /about, /for-teachers, /business, /library, /how-it-works and /guides.
   Generated by scripts/build_marketing_pages.mjs + scripts/build_editorial_pages.mjs
   (component markup: scripts/marketing/components.mjs).
   Only I12 tokens (var(--sm-*)) are used; the public header and footer come from
   the WS3 partials and style.css. Class prefix: .mk-*.
   ───────────────────────────────────────────────────────────────────────────── */

/* A metric-matched stand-in for Space Grotesk while the web font loads, so headings keep their line breaks
   when the font swaps in (no layout shift). Local fonts only; nothing is downloaded. */
@font-face { font-family: "mk-grotesk-fallback"; font-weight: 100 450; src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans"), local("DejaVu Sans"); size-adjust: 96%; ascent-override: 102%; descent-override: 30%; line-gap-override: 0%; }
@font-face { font-family: "mk-grotesk-fallback"; font-weight: 451 900; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), local("Helvetica Bold"), local("Liberation Sans Bold"), local("DejaVu Sans Bold"); size-adjust: 85%; ascent-override: 106%; descent-override: 31%; line-gap-override: 0%; }
body.mk-page { background: var(--sm-paper); background-image: none; color: var(--sm-ink); font-family: var(--sm-font-body); }
.mk { --sm-font-display: "Space Grotesk", "mk-grotesk-fallback", system-ui, -apple-system, "Segoe UI", sans-serif; }
/* Coloring pages and book pages are printed paper: they stay white with dark ink in both themes. */
.mk { display: block; overflow-x: clip; --mk-paper: #fff; --mk-paper-ink: #1c2420; }
/* Accent text and icons on the forest bands: mint in light mode. In dark mode --sm-mint is a dark fill (1.25:1 on
   --sm-forest), so the light accent ink takes its place (>= 4.5:1 in both themes). */
:root { --mk-on-forest-accent: var(--sm-mint); }
html[data-theme="dark"] { --mk-on-forest-accent: var(--sm-accent-ink); }
.mk img { max-width: 100%; height: auto; }
.mk :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote) { margin: 0; }
.mk-wrap { width: min(1180px, calc(100% - 2rem)); margin-inline: auto; }
.mk-wrap--narrow { width: min(820px, calc(100% - 2rem)); }
.mk-sec { position: relative; padding-block: clamp(3.75rem, 7vw, 6.5rem); }
.mk-sec--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.mk-sec--flush-top { padding-top: 0; }
.mk-sec--panel { background: var(--sm-panel); }
.mk-sec--surface { background: var(--sm-surface); }
.mk-sec--forest { background: var(--sm-forest); color: var(--sm-on-forest); }
.mk-sec--line { border-top: 1px solid var(--sm-line); }
.sr-only, .mk-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Type ─────────────────────────────────────────────────────────────────── */
.mk-eyebrow { margin: 0 0 .9rem; font-family: var(--sm-font-mono); font-size: .76rem; line-height: 1.4; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sm-accent); }
.mk-sec--forest .mk-eyebrow { color: var(--mk-on-forest-accent); }
.mk-h1 { font-family: var(--sm-font-display); font-size: clamp(2.5rem, 5.4vw, 4.6rem); font-weight: 700; line-height: 1.02; letter-spacing: -.042em; color: var(--sm-ink); text-wrap: balance; }
.mk-h1--xl { font-size: clamp(2.7rem, 6.4vw, 5.6rem); letter-spacing: -.048em; }
.mk-h2 { margin-bottom: 1rem; font-family: var(--sm-font-display); font-size: clamp(1.95rem, 3.9vw, 3.15rem); font-weight: 700; line-height: 1.06; letter-spacing: -.032em; color: var(--sm-ink); text-wrap: balance; }
.mk-h3 { font-family: var(--sm-font-display); font-size: 1.22rem; font-weight: 700; line-height: 1.2; letter-spacing: -.015em; color: var(--sm-ink); }
.mk-sec--forest :is(.mk-h2, .mk-h3, .mk-h1) { color: var(--sm-on-forest); }
.mk-lead { max-width: 38em; font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.6; color: var(--sm-ink-2); }
.mk-body { max-width: 40em; font-size: 1rem; line-height: 1.65; color: var(--sm-ink-2); }
.mk-body + .mk-body { margin-top: .8rem; }
.mk-sec--forest :is(.mk-lead, .mk-body) { color: color-mix(in srgb, var(--sm-on-forest) 82%, transparent); }
.mk-body a, .mk-lead a, .mk-faq-a a, .mk-note a { color: var(--sm-accent); font-weight: 600; text-underline-offset: .18em; }
.mk-note { font-size: .86rem; line-height: 1.55; color: var(--sm-muted); }
.mk-micro { display: inline-flex; align-items: center; gap: .45rem; margin-top: .9rem; font-size: .9rem; color: var(--sm-muted); }
.mk-micro svg { flex: 0 0 auto; color: var(--sm-accent); }
.mk-sec--forest .mk-micro { color: color-mix(in srgb, var(--sm-on-forest) 76%, transparent); }
.mk-sec--forest .mk-micro svg { color: var(--mk-on-forest-accent); }
.mk-head { max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3.1rem); }
.mk-head--center { margin-inline: auto; text-align: center; }
.mk-head--center .mk-lead { margin-inline: auto; }
.mk-head--row { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2.5rem; }
.mk-head--row > div { max-width: 720px; }
.mk-head .mk-lead { margin-top: .2rem; }
.mk-quote { font-family: var(--sm-font-display); font-weight: 600; letter-spacing: -.01em; }

/* ── Buttons, links, chips, badges ─────────────────────────────────────────── */
.mk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.6rem; }
.mk-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; padding: .7rem 1.2rem; border-radius: 12px; border: 1px solid transparent; font-family: var(--sm-font-body); font-size: .98rem; font-weight: 650; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; }
.mk-btn svg { flex: 0 0 auto; transition: transform .18s ease; }
.mk-btn:hover svg { transform: translateX(2px); }
.mk-btn--primary { background: var(--sm-accent); color: var(--sm-on-accent); box-shadow: var(--sm-shadow-card); }
.mk-btn--primary:hover { background: var(--sm-accent-ink); color: var(--sm-on-accent); }
.mk-btn--ghost { background: var(--sm-surface); color: var(--sm-ink); border-color: var(--sm-line); }
.mk-btn--ghost:hover { border-color: var(--sm-ink-2); color: var(--sm-ink); }
.mk-btn--light { background: var(--sm-mint); color: var(--sm-accent-ink); }
.mk-btn--light:hover { background: var(--sm-surface); color: var(--sm-accent-ink); }
.mk-btn--sm { min-height: 38px; padding: .5rem .9rem; font-size: .9rem; border-radius: 10px; }
.mk-btn--block { width: 100%; }
.mk-btn[disabled] { opacity: .6; cursor: default; }
.mk :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--sm-accent); outline-offset: 3px; }
.mk-link { display: inline-flex; align-items: center; gap: .35rem; color: var(--sm-accent); font-weight: 650; text-decoration: none; }
.mk-link:hover { text-decoration: underline; text-underline-offset: .2em; }
button.mk-link { padding: 0; border: 0; background: none; font: inherit; font-weight: 650; cursor: pointer; }
.mk-link svg { transition: transform .18s ease; }
.mk-link:hover svg { transform: translateX(2px); }
.mk-sec--forest .mk-link { color: var(--mk-on-forest-accent); }
.mk-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.mk-chip { display: inline-flex; align-items: center; gap: .4rem; min-height: 38px; padding: .45rem .9rem; border: 1px solid var(--sm-line); border-radius: var(--sm-r-pill); background: var(--sm-surface); color: var(--sm-ink-2); font: 600 .9rem/1.2 var(--sm-font-body); cursor: pointer; text-decoration: none; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.mk-chip[hidden] { display: none !important; }
.mk-chip:hover { border-color: var(--sm-ink-2); color: var(--sm-ink); }
.mk-chip[aria-pressed="true"], .mk-chip[aria-selected="true"], .mk-chip.is-active, .mk-chip:has(input:checked) { background: var(--sm-ink); border-color: var(--sm-ink); color: var(--sm-surface); }
.mk-chip input { position: absolute; opacity: 0; pointer-events: none; }
.mk-chip:has(input:focus-visible) { outline: 3px solid var(--sm-accent); outline-offset: 2px; }
.mk-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .55rem; border-radius: var(--sm-r-pill); background: var(--sm-mint-soft); color: var(--sm-accent-ink); font: 700 .72rem/1.3 var(--sm-font-body); letter-spacing: .01em; white-space: nowrap; }
.mk-badge--coloring { background: var(--sm-surface); color: var(--sm-ink); border: 1px solid var(--sm-line); }
.mk-badge--coloring::before { content: ""; width: 26px; height: 8px; border-radius: 4px; background: radial-gradient(circle at 4px 4px, var(--sm-crayon-1) 3.2px, transparent 3.6px), radial-gradient(circle at 13px 4px, var(--sm-crayon-3) 3.2px, transparent 3.6px), radial-gradient(circle at 22px 4px, var(--sm-crayon-5) 3.2px, transparent 3.6px); }
.mk-badge--comic { background: color-mix(in srgb, var(--sm-crayon-5) 16%, var(--sm-surface)); color: var(--sm-ink); }
.mk-badge--novel { background: color-mix(in srgb, var(--sm-crayon-6) 15%, var(--sm-surface)); color: var(--sm-ink); }
.mk-badge--picture { background: color-mix(in srgb, var(--sm-crayon-2) 18%, var(--sm-surface)); color: var(--sm-ink); }
.mk-badge--en { background: var(--sm-panel); color: var(--sm-ink-2); border: 1px solid var(--sm-line); }
.mk-badge--idea { background: color-mix(in srgb, var(--sm-gold) 26%, var(--sm-surface)); color: var(--sm-ink); }
.mk-badge--new { background: var(--sm-mint); color: var(--sm-accent-ink); }
.mk-sec--forest .mk-badge { background: color-mix(in srgb, var(--sm-mint) 22%, transparent); color: var(--sm-on-forest); }

/* ── Images and frames ─────────────────────────────────────────────────────── */
.mk-frame { position: relative; display: block; overflow: hidden; border-radius: 14px; background: var(--sm-surface); border: 1px solid var(--sm-line); box-shadow: var(--sm-shadow-card); }
.mk-frame img { display: block; width: 100%; height: auto; }
.mk-frame--paper { padding: 6%; background: var(--mk-paper); }
.mk-cover { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 10px 26px rgba(17,21,18,.16); }
.mk-figure figcaption, .mk-cap { margin-top: .6rem; font-size: .82rem; line-height: 1.45; color: var(--sm-muted); }
.mk-art-note { margin-top: 1rem; font-size: .8rem; color: var(--sm-muted); text-align: center; }

/* ── Hero variants ─────────────────────────────────────────────────────────── */
.mk-hero { position: relative; isolation: isolate; padding-block: clamp(2.75rem, 6vw, 5.25rem) clamp(2.75rem, 6vw, 4.75rem); }
.mk-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(circle at 1px 1px, var(--sm-line) 1.2px, transparent 0); background-size: 22px 22px; -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.3) 75%, transparent); mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.3) 75%, transparent); }
.mk-hero--split .mk-wrap { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.mk-hero--center { text-align: center; }
.mk-hero--center .mk-h1 { margin-inline: auto; max-width: 15ch; }
.mk-hero--center .mk-lead { margin-inline: auto; margin-top: 1.2rem; }
.mk-hero--compact { padding-block: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 2.5vw, 2rem); }
.mk-hero .mk-lead { margin-top: 1.25rem; }
.mk-hero-copy .mk-h1 { max-width: 13.5ch; }
html[lang="es"] .mk-hero-copy .mk-h1 { max-width: 15ch; }
.mk-hero-media { position: relative; min-width: 0; }
.mk-pill-row { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-bottom: 1.25rem; padding: .3rem .8rem .3rem .35rem; border: 1px solid var(--sm-line); border-radius: var(--sm-r-pill); background: var(--sm-surface); font-size: .86rem; color: var(--sm-ink-2); }
.mk-pill-row span:first-child { padding: .1rem .55rem; border-radius: var(--sm-r-pill); background: var(--sm-mint); color: var(--sm-accent-ink); font-weight: 700; font-size: .76rem; }

/* ── Prompt card (Base44-style composer) ───────────────────────────────────── */
.mk-prompt { position: relative; margin-top: 1.6rem; padding: .85rem; border: 1px solid var(--sm-line); border-radius: 18px; background: var(--sm-surface); box-shadow: var(--sm-shadow-card); text-align: left; }
.mk-prompt textarea { display: block; width: 100%; min-height: 84px; padding: .45rem .5rem; border: 0; outline: none; resize: none; background: transparent; color: var(--sm-ink); font: 1.02rem/1.5 var(--sm-font-body); }
.mk-prompt textarea::placeholder { color: var(--sm-muted); }
.mk-prompt-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; padding-top: .55rem; border-top: 1px solid var(--sm-line); }
.mk-prompt-bar .mk-chips { gap: .35rem; }
.mk-prompt-bar .mk-chip { min-height: 34px; padding: .35rem .75rem; font-size: .84rem; }
.mk-prompt-go { display: inline-flex; align-items: center; gap: .5rem; min-height: 42px; padding: .55rem .95rem; border: 0; border-radius: 12px; background: var(--sm-accent); color: var(--sm-on-accent); font: 650 .95rem/1.2 var(--sm-font-body); cursor: pointer; }
.mk-prompt-go:hover { background: var(--sm-accent-ink); }
.mk-prompt-extra { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; padding: .3rem .2rem .7rem; font-size: .88rem; color: var(--sm-ink-2); }
.mk-prompt-extra .mk-chip { min-height: 34px; padding: .35rem .75rem; font-size: .84rem; }
.mk-prompt-extra--check { padding-top: 0; }
.mk-prompt-bar > span:first-child:empty { flex: 1 1 auto; }
.mk-prompt-extra legend, .mk-legend { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sm-muted); }
.mk-prompt fieldset { display: contents; border: 0; margin: 0; padding: 0; }
.mk-check { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.mk-check input { width: 18px; height: 18px; accent-color: var(--sm-accent); }
.mk-hero--center .mk-prompt { max-width: 720px; margin-inline: auto; }

/* ── Coloring hero: fanned stack with a colour wipe ───────────────────────── */
.mk-stack { position: relative; width: min(100%, 520px); aspect-ratio: 5 / 5.1; margin-inline: auto; }
.mk-stack-card { position: absolute; width: 50%; border-radius: 12px; overflow: hidden; background: var(--mk-paper); border: 1px solid var(--sm-line); box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 22px 48px rgba(17,21,18,.16); }
.mk-stack-card img { display: block; width: 100%; height: auto; }
.mk-stack-card--a { left: 2%; top: 9%; transform: rotate(-8deg); }
.mk-stack-card--b { left: 46%; top: 5%; transform: rotate(7deg); }
.mk-stack-card--c { left: 23%; top: 0; z-index: 2; transform: rotate(-1deg); width: 54%; }
.mk-stack-card--c .mk-wipe { position: absolute; inset: 0; }
.mk-wipe img { position: absolute; inset: 0; width: 100%; height: 100%; }
.mk-wipe-color { clip-path: inset(0 100% 0 0); animation: mk-wipe 7s ease-in-out 1s infinite; }
@keyframes mk-wipe { 0%, 10% { clip-path: inset(0 100% 0 0); } 45%, 70% { clip-path: inset(0 0 0 0); } 92%, 100% { clip-path: inset(0 100% 0 0); } }
.mk-stack-tag { position: absolute; z-index: 3; left: 50%; bottom: 3%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .8rem; border-radius: var(--sm-r-pill); background: var(--sm-surface); border: 1px solid var(--sm-line); box-shadow: var(--sm-shadow-pop); font-size: .84rem; font-weight: 650; color: var(--sm-ink); white-space: nowrap; }
.mk-crayons { display: inline-flex; gap: 3px; }
.mk-crayons i { width: 8px; height: 8px; border-radius: 50%; background: var(--sm-crayon-1); }
.mk-crayons i:nth-child(2) { background: var(--sm-crayon-2); } .mk-crayons i:nth-child(3) { background: var(--sm-crayon-3); } .mk-crayons i:nth-child(4) { background: var(--sm-crayon-4); } .mk-crayons i:nth-child(5) { background: var(--sm-crayon-5); } .mk-crayons i:nth-child(6) { background: var(--sm-crayon-6); }

/* ── Theme rail (templates) ────────────────────────────────────────────────── */
.mk-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(168px, 1fr); gap: 1rem; overflow-x: auto; padding: .25rem .25rem 1.1rem; margin-inline: -.25rem; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.mk-theme { position: relative; display: flex; flex-direction: column; scroll-snap-align: start; border-radius: 16px; background: var(--sm-surface); border: 1px solid var(--sm-line); text-decoration: none; color: inherit; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.mk-theme:hover { transform: translateY(-3px); box-shadow: var(--sm-shadow-card); border-color: var(--sm-ink-2); }
.mk-theme-art { position: relative; aspect-ratio: 4 / 5; background: var(--mk-paper); overflow: hidden; }
.mk-theme-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: opacity .25s ease; }
.mk-theme-art img + img { opacity: 0; }
.mk-theme:hover .mk-theme-art img + img, .mk-theme:focus-visible .mk-theme-art img + img { opacity: 1; }
.mk-theme-body { display: grid; gap: .15rem; padding: .7rem .85rem .85rem; border-top: 1px solid var(--sm-line); }
.mk-theme-body strong { font-family: var(--sm-font-display); font-size: 1.02rem; }
.mk-theme-body span { font-size: .84rem; color: var(--sm-muted); }

/* ── Before / after slider ─────────────────────────────────────────────────── */
.mk-ba { --pos: 50%; position: relative; overflow: hidden; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 1 / 1.08; border-radius: 16px; background: var(--mk-paper); border: 1px solid var(--sm-line); box-shadow: var(--sm-shadow-card); user-select: none; touch-action: pan-y; }
.mk-ba img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.mk-ba-after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.mk-ba-after img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.mk-ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--sm-ink); pointer-events: none; }
.mk-ba-knob { position: absolute; top: 50%; left: var(--pos); width: 44px; height: 44px; margin: -22px 0 0 -22px; display: flex; align-items: center; justify-content: center; gap: 0; border-radius: 50%; background: var(--sm-surface); color: var(--sm-ink); border: 2px solid var(--sm-ink); box-shadow: var(--sm-shadow-pop); pointer-events: none; }
.mk-ba input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.mk-ba:has(input:focus-visible) { outline: 3px solid var(--sm-accent); outline-offset: 3px; }
.mk-ba-label { position: absolute; top: .8rem; padding: .25rem .6rem; border-radius: var(--sm-r-pill); background: var(--sm-surface); border: 1px solid var(--sm-line); font-size: .78rem; font-weight: 700; color: var(--sm-ink); pointer-events: none; }
.mk-ba-label--before { left: .8rem; } .mk-ba-label--after { right: .8rem; }

/* ── Split rows, collages ─────────────────────────────────────────────────── */
.mk-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.mk-split--reverse > :first-child { order: 2; }
.mk-list { display: grid; gap: .65rem; margin-top: 1.3rem; padding: 0; list-style: none; }
.mk-list li { position: relative; padding-left: 1.75rem; line-height: 1.55; color: var(--sm-ink-2); }
.mk-list li::before { content: ""; position: absolute; left: 0; top: .28em; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--sm-mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e3d1f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 70% no-repeat; }
.mk-collage { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-rows: 1fr 1fr; gap: 1rem; }
.mk-collage > * { width: 100%; height: 100%; min-height: 0; }
.mk-collage > :first-child { grid-row: span 2; aspect-ratio: 3 / 4; }
.mk-collage > img, .mk-collage > .mk-frame > img { height: 100%; object-fit: cover; object-position: center top; }
.mk-collage > .mk-frame--paper { display: grid; place-items: center; padding: 5%; }
.mk-collage > .mk-frame--paper > img { object-fit: contain; }
.mk-collage > img.mk-cover { border-radius: 14px; }
.mk-collage-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; align-items: end; }
.mk-collage-3 > :nth-child(2) { transform: translateY(-1.5rem); }

/* ── Tabs (audience switcher, gallery bands, formats) ─────────────────────── */
.mk-tablist { display: flex; flex-wrap: wrap; gap: .4rem; padding: .35rem; border: 1px solid var(--sm-line); border-radius: 14px; background: var(--sm-surface); width: max-content; max-width: 100%; }
.mk-tab { min-height: 42px; padding: .55rem 1.05rem; border: 0; border-radius: 10px; background: transparent; color: var(--sm-ink-2); font: 650 .95rem/1.2 var(--sm-font-body); cursor: pointer; }
.mk-tab:hover { color: var(--sm-ink); background: var(--sm-panel); }
.mk-tab[aria-selected="true"] { background: var(--sm-ink); color: var(--sm-surface); }
.mk-tabs-sticky { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 72px); z-index: 5; display: flex; justify-content: center; padding-block: .6rem; }
.mk-tabpanel[hidden] { display: none !important; }
.mk-tabpanel { animation: mk-fade .35s ease both; }
@keyframes mk-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mk-audience { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.mk-audience .mk-split { padding: clamp(1.5rem, 3vw, 2.75rem); border: 1px solid var(--sm-line); border-radius: 24px; background: var(--sm-surface); box-shadow: var(--sm-shadow-card); }
.mk-flow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.5rem; padding: 0; list-style: none; }
.mk-flow li { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .75rem .4rem .45rem; border-radius: var(--sm-r-pill); background: var(--sm-panel); font-size: .86rem; font-weight: 650; color: var(--sm-ink); }
.mk-flow li span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--sm-surface); color: var(--sm-accent); }
.mk-flow li + li { position: relative; margin-left: 1.1rem; }
.mk-flow li + li::before { content: "→"; position: absolute; left: -1.05rem; color: var(--sm-muted); font-weight: 400; }
.mk-starters { margin-top: 1.4rem; }
.mk-starters .mk-legend { display: block; margin-bottom: .55rem; }
.mk-starters .mk-chip { font-weight: 550; }
.mk-starters .mk-chip svg { color: var(--sm-accent); }

/* ── Cover strip (four formats) ───────────────────────────────────────────── */
.mk-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); }
.mk-strip-item { display: flex; flex-direction: column; gap: .8rem; text-decoration: none; color: inherit; }
.mk-strip-art { display: block; aspect-ratio: 3 / 4; padding: 1rem; border-radius: 18px; background: var(--sm-panel); border: 1px solid var(--sm-line); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.mk-strip-item:hover .mk-strip-art { transform: translateY(-3px); box-shadow: var(--sm-shadow-card); }
.mk-strip-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: 10px; box-shadow: 0 8px 22px rgba(17,21,18,.14); }
.mk-strip-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.mk-strip-meta strong { font-family: var(--sm-font-display); font-size: 1.1rem; }

/* ── CTA band ─────────────────────────────────────────────────────────────── */
.mk-cta { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 2rem; align-items: center; padding: clamp(2rem, 5vw, 3.75rem); border-radius: 28px; background: var(--sm-forest); color: var(--sm-on-forest); }
.mk-cta .mk-h2 { color: var(--sm-on-forest); margin-bottom: .6rem; }
.mk-cta .mk-lead { color: color-mix(in srgb, var(--sm-on-forest) 82%, transparent); }
.mk-cta .mk-micro { color: color-mix(in srgb, var(--sm-on-forest) 76%, transparent); }
.mk-cta .mk-micro svg { color: var(--mk-on-forest-accent); }
.mk-cta-art { position: relative; height: 100%; min-height: 220px; }
.mk-cta-art img { position: absolute; width: 34%; height: auto; border-radius: 10px; background: var(--mk-paper); box-shadow: 0 18px 40px rgba(0,0,0,.28); }
.mk-cta-art img:nth-child(1) { left: 6%; top: 14%; transform: rotate(-9deg); }
.mk-cta-art img:nth-child(2) { left: 32%; top: 2%; transform: rotate(2deg); z-index: 2; }
.mk-cta-art img:nth-child(3) { left: 58%; top: 16%; transform: rotate(10deg); }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.mk-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.mk-faq-list { border-top: 1px solid var(--sm-line); }
.mk-faq-item { border-bottom: 1px solid var(--sm-line); }
.mk-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 0; cursor: pointer; list-style: none; font-family: var(--sm-font-display); font-size: 1.06rem; font-weight: 600; color: var(--sm-ink); }
.mk-faq-item summary::-webkit-details-marker { display: none; }
.mk-faq-item summary svg { flex: 0 0 auto; color: var(--sm-accent); transition: transform .2s ease; }
.mk-faq-item[open] summary svg { transform: rotate(45deg); }
.mk-faq-a { padding: 0 2.5rem 1.2rem 0; color: var(--sm-ink-2); line-height: 1.65; }
.mk-faq-a p + p { margin-top: .6rem; }
.mk-faq-a .mk-btn { margin-top: .9rem; }

/* ── Compare table ────────────────────────────────────────────────────────── */
.mk-table-wrap { overflow-x: auto; border: 1px solid var(--sm-line); border-radius: 20px; background: var(--sm-surface); box-shadow: var(--sm-shadow-card); }
.mk-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .95rem; }
.mk-table th, .mk-table td { padding: .95rem 1.1rem; border-bottom: 1px solid var(--sm-line); text-align: left; vertical-align: middle; }
.mk-table tr:last-child :is(th, td) { border-bottom: 0; }
.mk-table thead th { font-family: var(--sm-font-display); font-size: 1rem; color: var(--sm-ink); background: var(--sm-panel); }
.mk-table thead th:nth-child(2) { background: var(--sm-mint-soft); color: var(--sm-accent-ink); }
.mk-table tbody th { font-weight: 600; color: var(--sm-ink); width: 38%; }
.mk-table td:nth-child(2) { background: color-mix(in srgb, var(--sm-mint-soft) 55%, transparent); }
.mk-yes, .mk-part, .mk-you { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; white-space: nowrap; }
.mk-yes { color: var(--sm-accent-ink); } .mk-part { color: var(--sm-ink-2); } .mk-you { color: var(--sm-muted); }
.mk-yes svg { color: var(--sm-accent); }

/* ── Bento ────────────────────────────────────────────────────────────────── */
.mk-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.mk-tile { position: relative; grid-column: span 5; display: flex; flex-direction: column; gap: .6rem; padding: 1.4rem; border-radius: 22px; background: var(--sm-surface); border: 1px solid var(--sm-line); overflow: hidden; }
.mk-tile--lg { grid-column: span 7; }
.mk-tile--md { grid-column: span 5; }
.mk-tile-art .mk-crop { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 30%; border-radius: 12px; }
.mk-tile .mk-ba { max-width: none; aspect-ratio: 16 / 11; }
.mk-es-covers { display: flex; gap: .7rem; align-items: flex-end; }
.mk-es-covers img { width: 32%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; box-shadow: var(--sm-shadow-card); }
.mk-es-covers img:nth-child(2) { transform: translateY(-.6rem); }
.mk-tile--half { grid-column: span 6; }
.mk-tile--mint { background: var(--sm-mint-soft); }
.mk-tile--forest { background: var(--sm-forest); color: var(--sm-on-forest); border-color: transparent; }
.mk-tile--forest .mk-h3 { color: var(--sm-on-forest); }
.mk-tile--forest .mk-body { color: color-mix(in srgb, var(--sm-on-forest) 80%, transparent); }
.mk-tile-art { margin-top: auto; }
.mk-tile-pages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.mk-tile-pages img { border-radius: 10px; aspect-ratio: 1; object-fit: cover; }
.mk-tile .mk-body { font-size: .95rem; }
.mk-es-cover { position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.2rem; align-items: end; margin-top: auto; }
.mk-es-title { font-family: var(--sm-font-display); font-size: 1.35rem; font-weight: 700; line-height: 1.1; color: var(--sm-ink); }
.mk-shield { display: grid; place-items: center; width: 64px; height: 64px; margin-top: auto; border-radius: 18px; background: color-mix(in srgb, var(--sm-mint) 30%, transparent); color: var(--sm-mint); }
.mk-edit-bubble { position: absolute; right: 1.2rem; bottom: 1.2rem; max-width: 70%; padding: .7rem .9rem; border-radius: 14px 14px 4px 14px; background: var(--sm-surface); border: 1px solid var(--sm-line); box-shadow: var(--sm-shadow-pop); font-size: .86rem; color: var(--sm-ink); }

/* ── Artifact hero (prompt → spread) ──────────────────────────────────────── */
.mk-artifact { position: relative; display: grid; gap: 1rem; }
.mk-artifact-prompt { position: relative; z-index: 2; max-width: 420px; padding: 1rem 1.1rem; border-radius: 16px; background: var(--sm-surface); border: 1px solid var(--sm-line); box-shadow: var(--sm-shadow-pop); }
.mk-artifact-prompt small { display: block; margin-bottom: .35rem; font-family: var(--sm-font-mono); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sm-muted); }
.mk-artifact-prompt p { font-size: 1.02rem; line-height: 1.45; color: var(--sm-ink); }
.mk-artifact-arrow { display: flex; align-items: center; gap: .5rem; padding-left: 1.4rem; font-size: .84rem; font-weight: 650; color: var(--sm-accent); }
.mk-spread { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 10px; border-radius: 16px; background: var(--sm-surface); border: 1px solid var(--sm-line); box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 28px 60px rgba(17,21,18,.16); }
.mk-spread::after { content: ""; position: absolute; top: 10px; bottom: 10px; left: 50%; width: 24px; margin-left: -12px; background: linear-gradient(90deg, transparent, rgba(0,0,0,.09) 45%, rgba(0,0,0,.14) 50%, rgba(0,0,0,.09) 55%, transparent); pointer-events: none; }
.mk-spread img { display: block; width: 100%; height: auto; }
.mk-spread > :first-child img { border-radius: 8px 0 0 8px; } .mk-spread > :last-child img { border-radius: 0 8px 8px 0; }

/* ── Masonry idea gallery ─────────────────────────────────────────────────── */
.mk-filter { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 72px); z-index: 5; display: flex; justify-content: center; margin-bottom: 2rem; padding: .5rem 0; }
.mk-filter .mk-chips { justify-content: center; padding: .4rem; border-radius: var(--sm-r-pill); background: var(--sm-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.mk-masonry { columns: 3 300px; column-gap: 1.1rem; }
.mk-mcard, .mk-interstitial { break-inside: avoid; margin-bottom: 1.1rem; }
.mk-mcard { display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: var(--sm-surface); border: 1px solid var(--sm-line); transition: box-shadow .18s ease, transform .18s ease; }
.mk-mcard:hover { box-shadow: var(--sm-shadow-card); transform: translateY(-2px); }
.mk-mcard[hidden] { display: none; }
.mk-mcard-art { position: relative; background: var(--sm-panel); }
.mk-mcard-art img { display: block; width: 100%; height: auto; }
.mk-mcard-art--paper { background: var(--mk-paper); padding: 7% 7% 0; }
.mk-mcard-art .mk-badge { position: absolute; left: .75rem; top: .75rem; }
.mk-mcard-body { display: grid; gap: .55rem; padding: 1rem 1.1rem 1.15rem; }
.mk-mcard-moment { font-family: var(--sm-font-mono); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sm-muted); }
.mk-mcard-idea { font-family: var(--sm-font-display); font-size: 1.12rem; font-weight: 600; line-height: 1.3; color: var(--sm-ink); }
.mk-mcard .mk-link { font-size: .92rem; }
.mk-mcard--idea { background: color-mix(in srgb, var(--sm-gold) 10%, var(--sm-surface)); }
.mk-idea-art { display: grid; place-items: center; aspect-ratio: 4 / 3; color: color-mix(in srgb, var(--sm-gold) 70%, var(--sm-ink)); background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--sm-gold) 28%, transparent), transparent 60%), var(--sm-panel); }
.mk-interstitial { padding: 1.6rem 1.5rem; border-radius: 18px; background: var(--sm-forest); color: var(--sm-on-forest); }
.mk-interstitial .mk-h3 { color: var(--sm-on-forest); font-size: 1.4rem; }
.mk-interstitial p { margin-top: .6rem; line-height: 1.55; color: color-mix(in srgb, var(--sm-on-forest) 82%, transparent); }
.mk-interstitial .mk-link { margin-top: 1rem; color: var(--mk-on-forest-accent); }
.mk-empty { padding: 2rem; border: 1px dashed var(--sm-line); border-radius: 18px; text-align: center; color: var(--sm-ink-2); }

/* ── Flipbook (examples) ──────────────────────────────────────────────────── */
.mk-flip { position: relative; }
.mk-flip-tabs { margin-bottom: 1rem; }
.mk-flip-stage { position: relative; padding: clamp(.8rem, 2vw, 1.2rem); border-radius: 22px; background: var(--sm-surface); border: 1px solid var(--sm-line); box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 30px 70px rgba(17,21,18,.14); }
.mk-flip-book[hidden] { display: none; }
.mk-flip-spread { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 200px; }
.mk-flip-spread::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 26px; margin-left: -13px; background: linear-gradient(90deg, transparent, rgba(0,0,0,.07) 45%, rgba(0,0,0,.13) 50%, rgba(0,0,0,.07) 55%, transparent); pointer-events: none; }
.mk-flip-book[data-single="true"] .mk-flip-spread::after { display: none; }
.mk-flip-page { display: none; flex-direction: column; background: var(--mk-paper); }
.mk-flip-page.is-left, .mk-flip-page.is-right { display: flex; }
.mk-flip-page.is-left { border-radius: 10px 0 0 10px; } .mk-flip-page.is-right { border-radius: 0 10px 10px 0; }
.mk-flip-page img { display: block; width: 100%; height: auto; }
.mk-flip-page--line img { padding: 4%; }
.mk-flip-text { padding: .75rem 1rem 1rem; font-family: var(--sm-font-display); font-size: .98rem; line-height: 1.45; color: var(--mk-paper-ink); }
.mk-flip-text:empty { display: none; }
.mk-flip-cover { display: flex; align-items: center; justify-content: center; padding: 5%; background: var(--sm-panel); }
/* once the runtime drives the spreads, the cover shows only on its own spread (it stayed visible next to pages 1–2) */
.js .mk-flip-cover:not(.is-left):not(.is-right) { display: none; }
.mk-flip-cover img { width: 100%; border-radius: 8px; box-shadow: 0 16px 36px rgba(17,21,18,.22); }
.mk-flip-spread.mk-flip-solo { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.mk-flip-spread.mk-flip-solo::after { display: none; }
.mk-flip-spread.mk-flip-solo .mk-flip-page.is-solo { width: min(100%, 44%); border-radius: 10px; }
.mk-flip-book[data-format="novel"] .mk-flip-spread.mk-flip-solo .mk-flip-page.is-solo { width: min(100%, 64%); }
.mk-flip-book[data-format="coloring"] .mk-flip-spread.mk-flip-solo .mk-flip-page.is-solo, .mk-flip-book[data-format="comic"] .mk-flip-spread.mk-flip-solo .mk-flip-page.is-solo { width: min(100%, 34%); }
.mk-flip-hero .mk-flip { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.mk-flip-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.mk-flip-head .mk-h1 { max-width: 16ch; }
.mk-flip-head .mk-lead { max-width: 34em; }
.mk-flip-prose { padding: clamp(1rem, 3vw, 2rem); font-family: Georgia, "Times New Roman", serif; font-size: 1.02rem; line-height: 1.7; color: var(--mk-paper-ink); }
.mk-flip-prose h3 { margin-bottom: .8rem; font-family: var(--sm-font-display); font-size: 1.1rem; }
.mk-flip-prose p + p { margin-top: .8rem; }
.mk-flip-bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .9rem; }
.mk-flip-nav { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--sm-line); border-radius: 50%; background: var(--sm-surface); color: var(--sm-ink); cursor: pointer; }
.mk-flip-nav:hover { border-color: var(--sm-ink-2); }
.mk-flip-nav[disabled] { opacity: .35; cursor: default; }
.mk-flip-count { font-size: .88rem; font-weight: 600; color: var(--sm-ink-2); }
.mk-flip-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-top: 1rem; }
.mk-flip-title { font-family: var(--sm-font-display); font-size: 1.12rem; font-weight: 700; color: var(--sm-ink); }
.mk-flip-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.mk-idea { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; padding: clamp(1.4rem, 3vw, 2rem); border-radius: 22px; background: var(--sm-surface); border: 1px solid var(--sm-line); }
.mk-idea small { display: block; margin-bottom: .45rem; font-family: var(--sm-font-mono); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sm-muted); }
.mk-idea blockquote { font-family: var(--sm-font-display); font-size: clamp(1.25rem, 2.4vw, 1.7rem); font-weight: 600; line-height: 1.3; letter-spacing: -.015em; color: var(--sm-ink); }
.mk-more { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.1rem; }
.mk-more a { display: flex; flex-direction: column; gap: .55rem; text-decoration: none; color: inherit; }
.mk-more-art { aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: var(--sm-panel); border: 1px solid var(--sm-line); }
.mk-more-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.mk-more a:hover .mk-more-art img { transform: scale(1.03); }
.mk-more strong { font-family: var(--sm-font-display); font-size: 1rem; line-height: 1.25; }
.mk-dialog { width: min(760px, calc(100% - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 0; border-radius: 22px; background: var(--sm-surface); color: var(--sm-ink); box-shadow: var(--sm-shadow-pop); }
.mk-dialog::backdrop { background: var(--sm-scrim); }
.mk-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--sm-line); }
.mk-dialog-body { padding: 1rem 1.2rem 1.3rem; }
.mk-dialog-close { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--sm-panel); color: var(--sm-ink); cursor: pointer; }
.mk-canvas-stage { position: relative; max-width: 420px; margin: 0 auto; background: var(--mk-paper); border-radius: 12px; overflow: hidden; border: 1px solid var(--sm-line); }
.mk-canvas-stage img, .mk-canvas-stage canvas { display: block; width: 100%; height: auto; }
.mk-canvas-stage canvas { position: absolute; inset: 0; height: 100%; }
.mk-palette { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .9rem; }
.mk-swatch { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--sm-surface); box-shadow: 0 0 0 1px var(--sm-line); cursor: pointer; }
.mk-swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--sm-ink); }

/* ── Coloring page sections ───────────────────────────────────────────────── */
.mk-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.mk-page-card { display: flex; flex-direction: column; margin: 0; }
.mk-page-card .mk-frame--paper { padding: 4%; aspect-ratio: 3 / 3.6; display: grid; place-items: center; }
.mk-page-card .mk-frame--paper img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.mk-page-card figcaption { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .55rem; font-size: .86rem; font-weight: 600; color: var(--sm-ink-2); }
.mk-check3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; counter-reset: step; }
.mk-check3 figure { position: relative; padding: 1rem; border-radius: 20px; background: var(--sm-surface); border: 1px solid var(--sm-line); }
.mk-check3 figure > div { position: relative; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 12px; background: var(--mk-paper); }
.mk-check3 img { width: 100%; height: 100%; object-fit: contain; }
.mk-check3 figcaption { margin-top: .9rem; }
.mk-check3 figcaption strong { display: flex; align-items: center; gap: .55rem; font-family: var(--sm-font-display); font-size: 1.05rem; color: var(--sm-ink); }
.mk-check3 figcaption strong::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sm-mint); color: var(--sm-accent-ink); font-size: .85rem; }
.mk-check3 figcaption span { display: block; margin-top: .3rem; font-size: .9rem; line-height: 1.5; color: var(--sm-ink-2); }
.mk-print { position: absolute; inset: 0; display: grid; place-items: center; background: var(--sm-panel); }
.mk-print-sheet { width: 62%; aspect-ratio: 8.5 / 11; padding: 6%; border-radius: 4px; background: var(--mk-paper); box-shadow: 0 14px 30px rgba(17,21,18,.18); transform: rotate(-3deg); }
.mk-print-sheet img { width: 100%; height: 100%; object-fit: contain; }
.mk-variants { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.mk-variant { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1.25rem; align-items: center; padding: 1.25rem; border-radius: 22px; background: var(--sm-surface); border: 1px solid var(--sm-line); }
.mk-variant .mk-frame--paper { padding: 5%; }
.mk-caption-quote { margin-top: .8rem; padding: .7rem .85rem; border-left: 3px solid var(--sm-gold); border-radius: 0 10px 10px 0; background: var(--sm-panel); font-family: var(--sm-font-display); font-size: .98rem; line-height: 1.4; color: var(--sm-ink); }
.mk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.mk-card { padding: clamp(1.3rem, 3vw, 1.9rem); border-radius: 22px; background: var(--sm-surface); border: 1px solid var(--sm-line); }
.mk-card-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 1rem; border-radius: 14px; background: var(--sm-mint-soft); color: var(--sm-accent); }
.mk-card .mk-body { margin-top: .5rem; }
.mk-series { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.mk-series-name { margin: -.2rem 0 .9rem; font-family: var(--sm-font-display); font-size: 1.2rem; font-weight: 600; color: var(--sm-ink); }
.mk-card--art { display: flex; flex-direction: column; gap: .2rem; }
.mk-card-art { position: relative; display: grid; place-items: center; height: 220px; margin: -.4rem -.4rem 1.2rem; border-radius: 16px; background: var(--sm-panel); overflow: hidden; }
.mk-card-art .mk-print-sheet { position: absolute; width: 34%; left: 36%; top: 12%; z-index: 2; }
.mk-card-art .mk-print-sheet--back { left: 26%; top: 18%; z-index: 1; transform: rotate(-9deg); opacity: .96; }
.mk-screen { width: 78%; padding: .6rem; border-radius: 14px; background: var(--sm-surface); border: 1px solid var(--sm-line); box-shadow: var(--sm-shadow-pop); }
.mk-screen .mk-spread { box-shadow: none; border: 0; padding: 0; }
.mk-screen .mk-spread img { aspect-ratio: 3 / 3.4; object-fit: cover; object-position: center 55%; background: var(--mk-paper); }
.mk-series-covers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.mk-series-covers figure { position: relative; }
.mk-series-covers figcaption { margin-top: .55rem; font-size: .84rem; font-weight: 650; color: var(--sm-ink-2); }
.mk-series-num { position: absolute; top: -.6rem; left: -.6rem; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sm-gold); color: var(--sm-on-gold); font: 700 .9rem/1 var(--sm-font-display); box-shadow: var(--sm-shadow-card); }

/* ── Pricing ─────────────────────────────────────────────────────────────── */
.mk-toggle { display: inline-flex; gap: .3rem; margin-top: 1.4rem; padding: .3rem; border: 1px solid var(--sm-line); border-radius: 14px; background: var(--sm-surface); }
.mk-toggle button { min-height: 42px; padding: .55rem 1.2rem; border: 0; border-radius: 10px; background: transparent; color: var(--sm-ink-2); font: 650 .95rem/1.2 var(--sm-font-body); cursor: pointer; }
.mk-toggle button.active, .mk-toggle button[aria-pressed="true"] { background: var(--sm-ink); color: var(--sm-surface); }
.mk-currency { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem .45rem; margin-top: .9rem; min-height: 1.9rem; font-size: .86rem; line-height: 1.5; color: var(--sm-muted); }
.mk-currency svg { flex: 0 0 auto; }
/* the explicit credit-currency switch (credits view only; monthly plans bill in CAD) */
.mk-currency-switch { appearance: none; border: 1px solid var(--sm-line); background: var(--sm-surface); color: var(--sm-accent); font: inherit; font-weight: 600; font-size: .8rem; line-height: 1.2; padding: .3rem .7rem; border-radius: var(--sm-r-pill, 999px); cursor: pointer; }
.mk-currency-switch:hover { border-color: var(--sm-accent); }
.mk-currency-switch:focus-visible { outline: 2px solid var(--sm-accent); outline-offset: 2px; }
.mk-price-panel[hidden] { display: none !important; }
.mk-price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.mk-price-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mk-credit, .mk-plan { position: relative; display: flex; flex-direction: column; gap: .9rem; padding: 1.4rem; border-radius: 22px; background: var(--sm-surface); border: 1px solid var(--sm-line); }
.mk-credit--featured, .mk-plan--featured { border-color: var(--sm-accent); box-shadow: 0 0 0 1px var(--sm-accent), var(--sm-shadow-card); }
.mk-credit-art { display: flex; align-items: flex-end; gap: .5rem; height: 116px; padding: .9rem .9rem 0; border-radius: 14px; background: var(--sm-panel); overflow: hidden; }
.mk-credit-art { justify-content: center; }
.mk-credit-art img { width: 28%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; border-radius: 6px 6px 0 0; box-shadow: 0 -4px 16px rgba(17,21,18,.12); }
.mk-credit-art img:nth-child(2) { width: 32%; }
.mk-price-kicker { font-family: var(--sm-font-mono); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sm-accent); }
.mk-price-name { font-family: var(--sm-font-display); font-size: 1.3rem; font-weight: 700; line-height: 1.2; letter-spacing: -.015em; color: var(--sm-ink); }
.mk-price-copy { font-size: .93rem; line-height: 1.5; color: var(--sm-ink-2); }
/* letter-spacing: normal on the row, so the small labels never inherit the legacy .credit-price tracking
   (style.css sets -0.05em at ~2.7rem there, which squashed "per book" into "perbook"); only numbers are tight */
.mk-price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .4rem; letter-spacing: normal; font-size: 1rem; }
.mk-price-number, .credit-price-number, .plan-price-number { font-family: var(--sm-font-display); font-size: 2.2rem; font-weight: 700; letter-spacing: -.03em; color: var(--sm-ink); }
.mk-price-meta, .credit-currency, .plan-price-meta { font-size: .88rem; font-weight: 600; letter-spacing: normal; word-spacing: normal; color: var(--sm-muted); }
.mk-features { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; font-size: .92rem; }
.mk-features li { position: relative; padding-left: 1.5rem; line-height: 1.45; color: var(--sm-ink-2); }
.mk-features li::before { content: ""; position: absolute; left: 0; top: .2em; width: .95rem; height: .95rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23145c32' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat; }
html[data-theme="dark"] .mk-features li::before { filter: invert(.7) sepia(1) hue-rotate(80deg); }
.mk-price-action, .price-action { margin-top: auto; display: grid; gap: .5rem; }
.price-action .btn-primary, .price-action .btn-ghost, .price-action button, .price-action a { width: 100%; justify-content: center; }
.mk-plan-flag { position: absolute; top: -.75rem; left: 1.4rem; padding: .25rem .65rem; border-radius: var(--sm-r-pill); background: var(--sm-accent); color: var(--sm-on-accent); font-size: .75rem; font-weight: 700; }
.current-badge { align-self: flex-start; padding: .25rem .6rem; border-radius: var(--sm-r-pill); background: var(--sm-mint); color: var(--sm-accent-ink); font-size: .75rem; font-weight: 700; }
/* on a plan card the current-plan badge takes the flag's slot on the top edge (pricing.js hides the flag meanwhile);
   resets the legacy style.css tab look (negative margins, uppercase) that pushed it under the flag */
.mk-plan .current-badge { position: absolute; top: -.75rem; left: 1.4rem; margin: 0; padding: .25rem .65rem; border: 1px solid var(--sm-accent); text-align: left; text-transform: none; letter-spacing: normal; line-height: 1.35; white-space: nowrap; }
.pricing-upgrade-context { display: grid; gap: .25rem; margin: 0 0 1.25rem; padding: .9rem 1.1rem; border-radius: 14px; background: var(--sm-mint-soft); border: 1px solid var(--sm-mint); color: var(--sm-ink); }
.credit-card-contextual { border-color: var(--sm-accent); box-shadow: 0 0 0 2px var(--sm-accent), var(--sm-shadow-card); }
.mk-assure { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.mk-assure div { display: flex; gap: .7rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: 16px; background: var(--sm-panel); }
.mk-assure svg { flex: 0 0 auto; color: var(--sm-accent); margin-top: .1rem; }
.mk-assure strong { display: block; font-size: .95rem; color: var(--sm-ink); }
.mk-assure span { font-size: .86rem; color: var(--sm-ink-2); }
.mk-limits { margin-top: 1.5rem; border: 1px solid var(--sm-line); border-radius: 18px; background: var(--sm-surface); }
.mk-limits > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; cursor: pointer; list-style: none; font-family: var(--sm-font-display); font-weight: 650; color: var(--sm-ink); }
.mk-limits > summary::-webkit-details-marker { display: none; }
.mk-limits[open] > summary svg { transform: rotate(180deg); }
.mk-limits .mk-table-wrap { margin: 0 1rem 1rem; box-shadow: none; }
.mk-limits .mk-table td, .mk-limits .mk-table th { font-size: .9rem; padding: .7rem .9rem; }
.mk-limits .mk-table td:nth-child(2) { background: transparent; }
.mk-limits .mk-table thead th:nth-child(2) { background: var(--sm-panel); color: var(--sm-ink); }
.mk-page--pricing .mk-hero .mk-h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.mk-page--pricing .mk-hero .mk-lead { margin-top: .9rem; }
.mk-price-panel .mk-head { margin-bottom: 1.5rem; }
.mk-price-panel .mk-h2 { font-size: clamp(1.5rem, 2.6vw, 2.15rem); margin-bottom: .5rem; }
.mk-price-panel .mk-lead { font-size: 1.02rem; }
.mk-plan .mk-price-name { font-size: 1.45rem; }
#checkout-overlay { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; background: var(--sm-scrim); }
#checkout-overlay[hidden] { display: none; }
.checkout-overlay-inner { padding: 1.5rem 2rem; border-radius: 18px; background: var(--sm-surface); color: var(--sm-ink); text-align: center; box-shadow: var(--sm-shadow-pop); }

/* ── Timeline, principles, tiles (about, teachers) ────────────────────────── */
.mk-timeline { position: relative; display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.mk-timeline::before { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px; background: var(--sm-line); }
.mk-timeline li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 1rem 1.25rem; align-items: center; }
.mk-timeline-dot { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sm-surface); border: 2px solid var(--sm-accent); color: var(--sm-accent); font: 700 .95rem/1 var(--sm-font-display); }
.mk-timeline li > div h3 { font-family: var(--sm-font-display); font-size: 1.15rem; color: var(--sm-ink); }
.mk-timeline li > div p { margin-top: .3rem; line-height: 1.55; color: var(--sm-ink-2); }
.mk-timeline-art { width: 72px; }
.mk-timeline-art img { aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; }
.mk-timeline-art img { border-radius: 8px; box-shadow: var(--sm-shadow-card); }
.mk-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.mk-principle { padding: 1.6rem; border-radius: 22px; background: var(--sm-surface); border: 1px solid var(--sm-line); }
.mk-principle-num { display: block; margin-bottom: 1.4rem; font: 700 2.4rem/1 var(--sm-font-display); letter-spacing: -.04em; color: color-mix(in srgb, var(--sm-accent) 65%, var(--sm-line)); } /* 65%: >= 3:1 large text on the card (3.85 light, 4.5 dark); 45% was 2.63:1 (public-site-07) */
.mk-longread { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); }
.mk-longread-side { font-family: var(--sm-font-mono); font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sm-accent); }
.mk-longread-body p { font-size: 1.12rem; line-height: 1.75; color: var(--sm-ink-2); }
.mk-longread-body p + p { margin-top: 1.1rem; }
.mk-longread-body p:first-of-type { font-family: var(--sm-font-display); font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.4; color: var(--sm-ink); letter-spacing: -.01em; }
.mk-cover-wall { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .9rem; align-items: end; }
.mk-cover-wall > :nth-child(odd) { transform: translateY(1.2rem); }
.mk-cover-wall img { aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; }
.mk-contact-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.mk-contact-row a { display: grid; gap: .3rem; padding: 1.3rem; border-radius: 18px; background: var(--sm-surface); border: 1px solid var(--sm-line); text-decoration: none; color: inherit; }
.mk-contact-row a:hover { border-color: var(--sm-ink-2); }
.mk-contact-row strong { font-family: var(--sm-font-display); font-size: 1.05rem; color: var(--sm-ink); }
.mk-contact-row span { font-size: .92rem; color: var(--sm-ink-2); }
.mk-lesson { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; counter-reset: lesson; }
.mk-lesson li { position: relative; list-style: none; padding: 1.5rem; border-radius: 22px; background: var(--sm-surface); border: 1px solid var(--sm-line); }
.mk-lesson li::before { counter-increment: lesson; content: counter(lesson, decimal-leading-zero); display: block; margin-bottom: 1.1rem; font: 700 .85rem/1 var(--sm-font-mono); letter-spacing: .1em; color: var(--sm-accent); }
.mk-lesson li:not(:last-child)::after { content: ""; position: absolute; top: 2.05rem; left: calc(100% - 1.5rem); width: 2.5rem; height: 2px; background: var(--sm-line); }
.mk-lesson h3 { font-family: var(--sm-font-display); font-size: 1.2rem; color: var(--sm-ink); }
.mk-lesson p { margin-top: .5rem; line-height: 1.55; color: var(--sm-ink-2); }
.mk-lesson-wrap { padding: 0; margin: 0; }
.mk-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.mk-art-tile { display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: var(--sm-surface); border: 1px solid var(--sm-line); }
.mk-art-tile-media { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: .6rem; height: 210px; padding: 1.1rem 1.1rem 0; background: var(--sm-panel); overflow: hidden; }
.mk-art-tile-media img { width: 44%; height: auto; aspect-ratio: 3 / 4; border-radius: 8px 8px 0 0; box-shadow: 0 -4px 18px rgba(17,21,18,.12); object-fit: cover; object-position: center top; }
.mk-art-tile-media--paper img { object-fit: contain; }
.mk-art-tile-media--paper img { background: var(--mk-paper); padding: 4%; }
.mk-art-tile-body { padding: 1.1rem 1.2rem 1.3rem; }
.mk-art-tile-body p { margin-top: .4rem; font-size: .93rem; line-height: 1.55; color: var(--sm-ink-2); }
.mk-privacy { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.mk-privacy-list { display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; }
.mk-privacy-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: .9rem; align-items: start; padding: 1.1rem 1.2rem; border-radius: 18px; background: var(--sm-surface); border: 1px solid var(--sm-line); }
.mk-privacy-list li > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--sm-mint-soft); color: var(--sm-accent); }
.mk-privacy-list strong { display: block; font-family: var(--sm-font-display); color: var(--sm-ink); }
.mk-privacy-list p { margin-top: .25rem; font-size: .93rem; line-height: 1.55; color: var(--sm-ink-2); }
.mk-callout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; padding: clamp(1.4rem, 3vw, 2.1rem); border-radius: 22px; background: var(--sm-mint-soft); border: 1px solid color-mix(in srgb, var(--sm-mint) 70%, var(--sm-line)); }
.mk-callout .mk-h3 { font-size: 1.45rem; }
.mk-callout .mk-body { margin-top: .4rem; }

/* ── Business ─────────────────────────────────────────────────────────────── */
.mk-window { overflow: hidden; border-radius: 18px; background: var(--sm-surface); border: 1px solid var(--sm-line); box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 30px 70px rgba(17,21,18,.16); }
.mk-window-bar { display: flex; align-items: center; gap: .4rem; padding: .7rem .9rem; border-bottom: 1px solid var(--sm-line); background: var(--sm-panel); }
.mk-window-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--sm-line); }
.mk-window-bar span { margin-left: .6rem; font-size: .8rem; font-weight: 650; color: var(--sm-ink-2); }
.mk-window-body { display: grid; grid-template-columns: 150px minmax(0, 1fr); min-height: 300px; }
.mk-window-side { display: grid; align-content: start; gap: .35rem; padding: 1rem .8rem; border-right: 1px solid var(--sm-line); background: var(--sm-panel); font-size: .8rem; color: var(--sm-ink-2); }
.mk-window-side span { padding: .4rem .55rem; border-radius: 8px; }
.mk-window-side span:first-child { background: var(--sm-surface); color: var(--sm-ink); font-weight: 650; }
.mk-window-main { padding: 1rem; }
.mk-window-main :is(h2, h3, .mk-window-title) { font-family: var(--sm-font-display); font-size: .98rem; font-weight: 700; color: var(--sm-ink); }
.mk-window-shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin-top: .8rem; }
.mk-window-shelf img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; border-radius: 6px; box-shadow: var(--sm-shadow-card); }
.mk-window-seats { display: flex; align-items: center; gap: .4rem; margin-top: 1rem; font-size: .8rem; color: var(--sm-ink-2); }
.mk-window-seats i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--sm-surface); background: var(--sm-mint); margin-left: -.55rem; }
.mk-window-seats i:first-child { margin-left: 0; background: var(--sm-gold); } .mk-window-seats i:nth-child(3) { background: color-mix(in srgb, var(--sm-crayon-5) 45%, var(--sm-surface)); } .mk-window-seats i:nth-child(4) { background: color-mix(in srgb, var(--sm-crayon-6) 40%, var(--sm-surface)); }
.mk-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.mk-pillar { overflow: hidden; border-radius: 22px; background: var(--sm-surface); border: 1px solid var(--sm-line); }
.mk-pillar-art { display: flex; align-items: flex-end; justify-content: center; gap: .5rem; height: 190px; padding: 1.1rem 1.1rem 0; background: var(--sm-panel); overflow: hidden; }
.mk-pillar-art img { width: 38%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; border-radius: 8px 8px 0 0; box-shadow: 0 -4px 18px rgba(17,21,18,.12); }
.mk-pillar-body { padding: 1.2rem 1.3rem 1.4rem; }
.mk-pillar-body p { margin-top: .45rem; line-height: 1.55; color: var(--sm-ink-2); font-size: .95rem; }
.mk-brand-mark { position: absolute; left: .6rem; bottom: .6rem; padding: .2rem .5rem; border-radius: 6px; background: var(--sm-surface); font-size: .7rem; font-weight: 700; color: var(--sm-accent); box-shadow: var(--sm-shadow-card); }
.mk-pillar-art figure { position: relative; width: 38%; }
.mk-pillar-art figure img { width: 100%; }
.mk-rollout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; counter-reset: roll; }
.mk-rollout li { padding: 1.5rem; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--sm-on-forest) 18%, transparent); }
.mk-rollout li::before { counter-increment: roll; content: counter(roll); display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 1rem; border-radius: 50%; background: var(--sm-mint); color: var(--sm-accent-ink); font: 700 1rem/1 var(--sm-font-display); }
.mk-rollout h3 { font-family: var(--sm-font-display); font-size: 1.2rem; color: var(--sm-on-forest); }
.mk-rollout p { margin-top: .45rem; line-height: 1.55; color: color-mix(in srgb, var(--sm-on-forest) 80%, transparent); }
.mk-plancard { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 3rem); padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: 26px; background: var(--sm-surface); border: 1px solid var(--sm-line); box-shadow: var(--sm-shadow-card); }
.mk-plancard .mk-price { margin: .8rem 0 .4rem; }
.mk-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: clamp(1.3rem, 3vw, 2rem); border-radius: 22px; background: var(--sm-surface); border: 1px solid var(--sm-line); }
.mk-field { display: grid; gap: .4rem; }
.mk-field--wide { grid-column: 1 / -1; }
.mk-field label { font-size: .88rem; font-weight: 650; color: var(--sm-ink); }
.mk-field :is(input, select, textarea) { width: 100%; min-height: 46px; padding: .65rem .8rem; border: 1px solid var(--sm-line); border-radius: var(--sm-r-input); background: var(--sm-paper); color: var(--sm-ink); font: 1rem/1.4 var(--sm-font-body); }
.mk-field textarea { min-height: 120px; resize: vertical; }
.mk-field :is(input, select, textarea):focus { outline: 2px solid var(--sm-accent); outline-offset: 1px; border-color: var(--sm-accent); }
.mk-form-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; }
.mk-form-status { font-size: .9rem; color: var(--sm-ink-2); }
.mk-form-status:empty { display: none; }

/* ── How it works: sticky scrollytelling ─────────────────────────────────── */
.mk-scrolly { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.mk-scrolly-frame { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 96px); }
.mk-scrolly-screen { position: relative; aspect-ratio: 4 / 3.2; overflow: hidden; border-radius: 22px; background: var(--sm-panel); border: 1px solid var(--sm-line); box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 30px 70px rgba(17,21,18,.14); }
.mk-scene { position: absolute; inset: 0; display: grid; place-items: center; padding: 6%; opacity: 0; transform: scale(.985); transition: opacity .45s ease, transform .45s ease; }
.mk-scene.is-active { opacity: 1; transform: none; }
.mk-scene-prompt { width: 100%; max-width: 440px; padding: 1rem; border-radius: 16px; background: var(--sm-surface); border: 1px solid var(--sm-line); box-shadow: var(--sm-shadow-pop); }
.mk-scene-prompt p { min-height: 4.2em; font-size: 1.02rem; line-height: 1.45; color: var(--sm-ink); }
.mk-scene-prompt div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--sm-line); }
.mk-scene-prompt div span:last-child { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--sm-accent); color: var(--sm-on-accent); }
.mk-scene-progress { width: 100%; max-width: 440px; display: grid; gap: .8rem; }
.mk-scene-progress .mk-bar { height: 10px; border-radius: 99px; background: var(--sm-surface); overflow: hidden; border: 1px solid var(--sm-line); }
.mk-scene-progress .mk-bar i { display: block; width: 62%; height: 100%; border-radius: 99px; background: var(--sm-accent); }
.mk-scene-progress ol { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; font-size: .9rem; color: var(--sm-ink-2); }
.mk-scene-progress li { display: flex; align-items: center; gap: .5rem; }
.mk-scene-progress li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--sm-accent); }
.mk-scene-progress li.is-now::before { background: var(--sm-gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sm-gold) 30%, transparent); }
.mk-scene-progress li.is-next::before { background: var(--sm-line); }
.mk-scene-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.mk-scene-thumbs img { border-radius: 8px; background: var(--mk-paper); }
.mk-scene .mk-spread { width: 100%; box-shadow: var(--sm-shadow-pop); }
.mk-scene-edit { position: relative; width: 78%; }
.mk-scene-edit .mk-edit-bubble { right: -6%; bottom: 8%; }
.mk-scene-share { display: grid; grid-template-columns: .8fr 1.2fr; gap: 1.2rem; align-items: center; width: 100%; }
.mk-scene-share ul { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.mk-scene-share li { display: flex; align-items: center; gap: .6rem; padding: .65rem .8rem; border-radius: 12px; background: var(--sm-surface); border: 1px solid var(--sm-line); font-size: .9rem; font-weight: 600; color: var(--sm-ink); }
.mk-scene-share li svg { color: var(--sm-accent); }
.mk-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.mk-step { min-height: 46vh; display: flex; flex-direction: column; justify-content: center; padding-block: 2rem; }
.mk-step-num { font-family: var(--sm-font-mono); font-size: .8rem; font-weight: 700; letter-spacing: .12em; color: var(--sm-accent); }
/* :is(h2, h3): the step title keeps this size at either heading level (heading order, public-site-11) */
.mk-step :is(h2, h3) { margin-top: .6rem; font-family: var(--sm-font-display); font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.1; letter-spacing: -.025em; color: var(--sm-ink); }
.mk-step p { margin-top: .8rem; max-width: 30em; font-size: 1.05rem; line-height: 1.6; color: var(--sm-ink-2); }
/* The steps that are not in view are dimmed with a colour, never with opacity: at opacity .5 their copy fell to
   2.3:1 on paper (public-site-07). --sm-muted keeps >= 4.5:1 on paper in both themes. Phones show every step
   at full strength (no scroll-driven state below 861px). */
.mk-step > :is(.mk-step-num, h2, h3, p) { transition: color .3s ease; }
@media (min-width: 861px) {
  .mk-step:not(.is-active) > :is(.mk-step-num, h2, h3, p) { color: var(--sm-muted); }
}
.mk-decide { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.mk-decide .mk-card:last-child { background: var(--sm-mint-soft); border-color: transparent; }
.mk-mini-pages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.mk-article { display: grid; grid-template-columns: 220px minmax(0, 720px); gap: 3.5rem; align-items: start; }
.mk-article .article-toc { position: sticky; top: 96px; padding: 1rem 0; border-top: 1px solid var(--sm-line); }
.mk-article .article-toc strong { font-family: var(--sm-font-display); font-size: .85rem; }
.mk-article .article-toc a { display: block; margin-top: .68rem; color: var(--sm-ink-2); text-decoration: none; font-size: .85rem; line-height: 1.35; }
.mk-article .article-toc a:hover { color: var(--sm-accent); }
.mk .article-body { font-size: 1.03rem; line-height: 1.8; color: var(--sm-ink); }
.mk .article-body h2 { scroll-margin-top: 110px; margin: 2.8rem 0 .8rem; font-family: var(--sm-font-display); font-size: clamp(1.55rem, 2.8vw, 2.1rem); line-height: 1.14; letter-spacing: -.03em; }
.mk .article-body h2:first-child { margin-top: 0; }
.mk .article-body h3 { margin: 1.8rem 0 .5rem; font-family: var(--sm-font-display); font-size: 1.18rem; }
.mk .article-body p { margin: 0 0 1.2rem; }
.mk .article-body ul, .mk .article-body ol { margin: .2rem 0 1.4rem; padding-left: 1.3rem; }
.mk .article-body li { margin: .5rem 0; }
.mk .article-body a { color: var(--sm-accent); font-weight: 600; }
/* The guide callout is a fixed dark-green box in both themes: its link must not take the accent green above
   (#145c32 on #123f26 = 1.47:1, public-site-07). This selector out-specifies '.mk .article-body a'. */
.mk .article-body .article-callout a { color: var(--sm-on-forest, #fff); font-weight: 700; text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .2em; }
.mk .article-body .article-callout a:hover { color: #b6f0c8; }
.mk .article-body .article-callout a:focus-visible { outline: 3px solid #b6f0c8; outline-offset: 3px; border-radius: 4px; }
.mk .article-note { margin: 1.5rem 0; padding: 1.1rem 1.25rem; border-radius: 16px; background: var(--sm-mint-soft); }
.mk .article-note strong { display: block; margin-bottom: .35rem; font-family: var(--sm-font-display); }
.mk-byline { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: 1rem; font-size: .88rem; color: var(--sm-muted); }
.mk-byline strong { color: var(--sm-ink); }

/* ── Library (bookstore shelves) ──────────────────────────────────────────── */
.mk-lib-hero .mk-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: end; }
.mk-lib-count { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; font-size: .95rem; font-weight: 600; color: var(--sm-ink-2); }
.mk-lib-count[hidden] { display: none; }
.mk-lib-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, auto) minmax(14rem, auto); gap: .6rem; padding: .6rem; border-radius: 18px; background: var(--sm-surface); border: 1px solid var(--sm-line); box-shadow: var(--sm-shadow-card); }
.mk-lib-tools label { position: relative; display: flex; align-items: center; }
.mk-lib-tools svg { position: absolute; left: .8rem; width: 18px; height: 18px; fill: none; stroke: var(--sm-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.mk-lib-tools input, .mk-lib-tools select { width: 100%; min-width: 12rem; min-height: 46px; padding: .6rem .8rem .6rem 2.4rem; border: 1px solid var(--sm-line); border-radius: 12px; background: var(--sm-paper); color: var(--sm-ink); font: 1rem/1.3 var(--sm-font-body); }
.mk-lib-tools input { min-width: 0; }
.mk-lib-cats { display: flex; gap: .45rem; overflow-x: auto; padding: .25rem 0 .75rem; scrollbar-width: thin; }
.mk-lib-cats .mk-chip { flex: 0 0 auto; }
.mk-shelves { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4vw, 3rem); }
.mk-shelf { min-width: 0; }
.mk-lib-hero .mk-lib-tools { grid-column: 1 / -1; margin-top: clamp(1rem, 2vw, 1.5rem); }
.mk-shelf[hidden] { display: none; }
.mk-shelf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.mk-shelf-head h2 { font-family: var(--sm-font-display); font-size: clamp(1.35rem, 2.4vw, 1.75rem); letter-spacing: -.02em; color: var(--sm-ink); }
.mk-shelf-head p { margin-top: .25rem; font-size: .92rem; color: var(--sm-muted); }
.mk-shelf-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 176px); gap: 1rem; overflow-x: auto; padding: .2rem .2rem 1rem; margin-inline: -.2rem; scroll-snap-type: x proximity; scrollbar-width: thin; list-style: none; margin-block: 0; }
.mk-shelf-row > li { scroll-snap-align: start; }
.mk-lib-grid-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin: 2.5rem 0 1rem; }
.mk-lib-grid-head h2 { font-family: var(--sm-font-display); font-size: clamp(1.35rem, 2.4vw, 1.75rem); color: var(--sm-ink); }
.mk-lib-status { font-size: .92rem; color: var(--sm-muted); }
.mk-typeset { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 12% 11%; background: var(--mk-ts-bg, var(--sm-mint-soft)); color: var(--sm-ink); }
.mk-typeset::before { content: ""; position: absolute; inset: 6%; border: 1.5px solid color-mix(in srgb, var(--sm-ink) 18%, transparent); border-radius: 6px; pointer-events: none; }
.mk-typeset strong { position: relative; font-family: var(--sm-font-display); font-size: clamp(.95rem, 1.6vw, 1.15rem); line-height: 1.18; letter-spacing: -.01em; overflow-wrap: anywhere; }
.mk-typeset small { position: relative; font-family: var(--sm-font-mono); font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--sm-ink) 65%, transparent); }
.mk-typeset i { position: relative; display: block; width: 36%; height: 4px; border-radius: 2px; background: var(--mk-ts-ink, var(--sm-accent)); }
.mk-typeset[data-format="coloring"] { --mk-ts-bg: var(--mk-paper); --mk-ts-ink: linear-gradient(90deg, var(--sm-crayon-1), var(--sm-crayon-3), var(--sm-crayon-4), var(--sm-crayon-5)); color: var(--mk-paper-ink); }
.mk-typeset[data-format="comic"], .mk-typeset[data-format="chapter_comic"] { --mk-ts-bg: color-mix(in srgb, var(--sm-crayon-5) 16%, var(--sm-surface)); --mk-ts-ink: var(--sm-crayon-5); }
.mk-typeset[data-format="novel"] { --mk-ts-bg: color-mix(in srgb, var(--sm-crayon-6) 14%, var(--sm-surface)); --mk-ts-ink: var(--sm-crayon-6); }
.mk-typeset[data-format="picture"] { --mk-ts-bg: color-mix(in srgb, var(--sm-crayon-2) 16%, var(--sm-surface)); --mk-ts-ink: var(--sm-crayon-2); }
.mk-typeset[data-cat="bedtime"] { --mk-ts-bg: color-mix(in srgb, var(--sm-crayon-5) 10%, var(--sm-panel)); }
.mk-typeset[data-cat="space"] { --mk-ts-bg: color-mix(in srgb, var(--sm-crayon-6) 12%, var(--sm-panel)); }
.mk-typeset[data-cat="animals"] { --mk-ts-bg: color-mix(in srgb, var(--sm-crayon-4) 14%, var(--sm-panel)); }
.mk-typeset[data-cat="fantasy"] { --mk-ts-bg: color-mix(in srgb, var(--sm-crayon-1) 10%, var(--sm-panel)); }
.mk-lib .sm-book-card-cover { position: relative; }
.mk-lib .sm-book-card-cover img.is-broken { display: none; }
.mk-lib .sm-book-grid { list-style: none; margin: 0; padding: 0; }
.mk-lib-empty { display: grid; justify-items: center; gap: .8rem; padding: 3rem 1.5rem; border: 1px dashed var(--sm-line); border-radius: 22px; text-align: center; }
.mk-lib-empty[hidden] { display: none; }
.mk-lib-empty h2 { font-family: var(--sm-font-display); font-size: 1.4rem; color: var(--sm-ink); }
.mk-lib-empty p { max-width: 36em; color: var(--sm-ink-2); line-height: 1.55; }
.mk-lib-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin-top: 2rem; }
.mk-lib-pages button { min-width: 42px; min-height: 42px; padding: 0 .75rem; border: 1px solid var(--sm-line); border-radius: 10px; background: var(--sm-surface); color: var(--sm-ink); font: 600 .92rem/1 var(--sm-font-body); cursor: pointer; }
.mk-lib-pages button[aria-current="page"] { background: var(--sm-ink); color: var(--sm-surface); border-color: var(--sm-ink); }
.mk-lib-pages button[disabled] { opacity: .45; cursor: default; }
.mk-lib-pages span { align-self: center; padding: 0 .3rem; color: var(--sm-muted); }

/* ── Guides (magazine index) ─────────────────────────────────────────────── */
.mk-mag-feature { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 0; overflow: hidden; border-radius: 26px; background: var(--sm-surface); border: 1px solid var(--sm-line); text-decoration: none; color: inherit; box-shadow: var(--sm-shadow-card); }
.mk-mag-feature-art { position: relative; min-height: 340px; background: var(--sm-panel); overflow: hidden; }
.mk-mag-feature-art img { position: absolute; width: 34%; border-radius: 10px; box-shadow: 0 18px 40px rgba(17,21,18,.2); background: var(--mk-paper); }
.mk-mag-feature-art img:nth-child(1) { left: 10%; top: 14%; transform: rotate(-6deg); }
.mk-mag-feature-art img:nth-child(2) { left: 32%; top: 8%; transform: rotate(2deg); z-index: 2; }
.mk-mag-feature-art img:nth-child(3) { left: 54%; top: 16%; transform: rotate(8deg); }
.mk-mag-feature-body { display: flex; flex-direction: column; justify-content: center; gap: .8rem; padding: clamp(1.5rem, 4vw, 2.75rem); }
.mk-mag-feature-body h2 { font-family: var(--sm-font-display); font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.1; letter-spacing: -.03em; color: var(--sm-ink); }
.mk-mag-feature-body p { line-height: 1.6; color: var(--sm-ink-2); }
.mk-mag-meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .84rem; color: var(--sm-muted); }
.mk-mag-rails { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.mk-mag-rail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--sm-line); }
.mk-mag-rail-head h2 { font-family: var(--sm-font-display); font-size: 1.35rem; color: var(--sm-ink); }
.mk-mag-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.mk-mag-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: var(--sm-surface); border: 1px solid var(--sm-line); text-decoration: none; color: inherit; transition: box-shadow .18s ease, transform .18s ease; }
.mk-mag-card:hover { box-shadow: var(--sm-shadow-card); transform: translateY(-2px); }
.mk-mag-card-art { aspect-ratio: 16 / 9; overflow: hidden; background: var(--sm-panel); }
.mk-mag-card-art img { width: 100%; height: 100%; object-fit: cover; }
.mk-mag-card-art--paper { background: var(--mk-paper); }
.mk-mag-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mk-mag-feature-art img { aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; }
.mk-mag-card-art--paper img { object-fit: contain; padding: 4%; }
.mk-mag-card-body { display: grid; gap: .45rem; padding: 1.1rem 1.2rem 1.3rem; }
.mk-mag-card-body strong { font-family: var(--sm-font-display); font-size: 1.12rem; line-height: 1.25; color: var(--sm-ink); }
.mk-mag-card-body span { font-size: .92rem; line-height: 1.5; color: var(--sm-ink-2); }
.mk-mag-card-body small { font-size: .8rem; color: var(--sm-muted); }
.mk-method { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 2rem; padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: 24px; background: var(--sm-panel); }
.mk-method p { line-height: 1.75; color: var(--sm-ink-2); }
.mk-guide-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding-bottom: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--sm-line); }
.mk-guide-hero .mk-h1 { font-size: clamp(2.2rem, 4.8vw, 3.9rem); }
.mk-guide-hero .mk-lead { margin-top: 1.1rem; }
.mk-crumbs { margin-bottom: 1.4rem; font-size: .86rem; color: var(--sm-muted); }
.mk-crumbs a { color: inherit; text-decoration: none; }
.mk-crumbs a:hover { color: var(--sm-accent); }
.mk-guide-art { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; align-items: end; }
.mk-guide-art > * { aspect-ratio: 3 / 4; }
.mk-guide-art img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.mk-guide-art > .mk-frame--paper { display: grid; place-items: center; padding: 6%; }
.mk-guide-art > .mk-frame--paper img { object-fit: contain; }
.mk-guide-art > :first-child { transform: translateY(-1rem) rotate(-2deg); }
.mk-guide-art > :last-child { transform: translateY(.6rem) rotate(2deg); }
.mk-guide-body { padding-top: clamp(2rem, 4vw, 3rem); }
.mk-guide-cta { margin-top: 3rem; }

/* ── Hero entrance (no content is ever hidden without JS) ────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .mk-hero :is(.mk-h1, .mk-lead, .mk-prompt, .mk-actions, .mk-hero-media) { animation: mk-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .mk-hero .mk-lead { animation-delay: .06s; }
  .mk-hero :is(.mk-prompt, .mk-actions) { animation-delay: .12s; }
  .mk-hero .mk-hero-media { animation-delay: .1s; }
}
@keyframes mk-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .mk-wipe-color { animation: none; clip-path: inset(0 0 0 50%); }
  .mk-tabpanel, .mk-scene, .mk-step, .mk-step > :is(.mk-step-num, h2, h3, p) { animation: none; transition: none; }
}

/* ── FAQ variants (faq({variant})) ─────────────────────────────────────── */
.mk-faq-head .mk-body { margin-top: .6rem; }
.mk-faq--stack { display: block; max-width: 780px; margin-inline: auto; }
.mk-faq--stack .mk-faq-head { text-align: center; margin-bottom: 1.8rem; }
.mk-faq--stack .mk-faq-list { border-top: 0; display: grid; gap: .6rem; }
.mk-faq--stack .mk-faq-item { border: 1px solid var(--sm-line); border-radius: 16px; background: var(--sm-surface); padding-inline: 1.2rem; }
.mk-faq--stack .mk-faq-a { padding-right: .5rem; }
.mk-faq--grid { display: block; }
.mk-faq--grid .mk-faq-head { max-width: 640px; margin-bottom: 2rem; }
.mk-qa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.mk-qa { position: relative; padding: 1.4rem 1.4rem 1.3rem 4.2rem; border-radius: 18px; background: var(--sm-surface); border: 1px solid var(--sm-line); }
.mk-qa-num { position: absolute; left: 1.3rem; top: 1.3rem; font-family: var(--sm-font-mono); font-size: .8rem; font-weight: 700; letter-spacing: .08em; color: var(--sm-accent); }
.mk-qa-q { font-family: var(--sm-font-display); font-size: 1.08rem; font-weight: 600; line-height: 1.3; color: var(--sm-ink); margin-bottom: .45rem; }
.mk-qa .mk-faq-a, .mk-qa-inline .mk-faq-a { padding: 0; }
.mk-faq--inline { display: block; }
.mk-faq--inline .mk-faq-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; padding-bottom: 1.2rem; border-bottom: 2px solid var(--sm-ink); margin-bottom: 1.6rem; }
.mk-faq--inline .mk-faq-head .mk-eyebrow { flex-basis: 100%; }
.mk-faq--inline .mk-faq-head .mk-body { margin: 0; }
.mk-qa-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem 2.2rem; }
.mk-qa-inline .mk-qa-q { font-size: 1rem; }
.mk-qa-inline .mk-faq-a { font-size: .95rem; }

/* ── Closing sections (one per page) ─────────────────────────────────────── */
.mk-close { border-radius: 28px; padding: clamp(1.75rem, 4.5vw, 3.25rem); }
.mk-close-head { max-width: 640px; }
.mk-close-head .mk-lead, .mk-close-copy .mk-lead { margin-top: .6rem; }
.mk-close .mk-micro { margin-top: .9rem; }
.mk-close-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; margin-top: 1.6rem; }
.mk-close-foot .mk-micro { margin-top: 0; }
.mk-close-sheet { background: var(--mk-paper); border-radius: 12px; padding: 6%; box-shadow: 0 14px 34px rgba(20, 30, 24, .16); }
.mk-close-sheet img { display: block; width: 100%; }
/* /coloring-books: paper card with a composer and a line-art / colored pair */
.mk-close--prompt { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; background: color-mix(in srgb, var(--sm-mint) 22%, var(--sm-surface)); border: 1px solid color-mix(in srgb, var(--sm-accent) 18%, var(--sm-line)); }
.mk-close--prompt .mk-prompt { margin-top: 1.3rem; }
.mk-close-pair { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.mk-close-pair .mk-close-sheet:first-child { transform: rotate(-3deg); }
.mk-close-pair .mk-close-sheet:last-child { transform: rotate(3deg) translateY(10%); }
/* /solutions: four audience doors */
.mk-close--doors { background: var(--sm-surface); border: 1px solid var(--sm-line); }
.mk-doors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1.8rem; }
.mk-door { display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; border: 1px solid var(--sm-line); background: var(--sm-paper); color: inherit; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.mk-door:hover { transform: translateY(-3px); box-shadow: var(--sm-shadow-card); }
.mk-door:focus-visible { outline: 2px solid var(--sm-accent); outline-offset: 3px; }
.mk-door-art { aspect-ratio: 4 / 3; overflow: hidden; background: var(--sm-panel); }
.mk-door-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.mk-door-body { display: grid; gap: .3rem; padding: 1rem 1.05rem 1.15rem; }
.mk-door-body strong { font-family: var(--sm-font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sm-accent); }
.mk-door-body > span:not(.mk-door-go) { font-family: var(--sm-font-display); font-weight: 600; font-size: 1.05rem; line-height: 1.3; color: var(--sm-ink); }
.mk-door-go { display: inline-flex; align-items: center; gap: .35rem; margin-top: .35rem; font-weight: 600; font-size: .9rem; color: var(--sm-accent); }
/* /why-storymint: the compare table in three columns */
.mk-close--summary { background: var(--sm-surface); border: 1px solid var(--sm-line); }
.mk-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.8rem; align-items: stretch; }
.mk-sum-col { display: flex; flex-direction: column; gap: .55rem; padding: 1.3rem 1.4rem 1.4rem; border-radius: 18px; background: var(--sm-paper); border: 1px dashed color-mix(in srgb, var(--sm-muted) 45%, transparent); color: var(--sm-ink-2); }
.mk-sum-icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; background: var(--sm-panel); color: var(--sm-ink-2); }
.mk-sum-col--us .mk-sum-icon { background: var(--sm-forest); color: var(--sm-on-forest); }
.mk-sum-col h3 { font-family: var(--sm-font-display); font-size: 1.1rem; color: var(--sm-ink); }
.mk-sum-col--us { border: 2px solid var(--sm-accent); background: color-mix(in srgb, var(--sm-mint) 20%, var(--sm-surface)); }
/* /use-cases: moment picker */
.mk-close--moments { background: var(--sm-surface); border: 1px solid var(--sm-line); text-align: center; }
.mk-close--moments .mk-close-head { margin-inline: auto; }
.mk-close--moments .mk-close-foot { justify-content: center; }
.mk-moments { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: 1.6rem; }
.mk-moment { display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1.1rem .7rem .7rem; border-radius: var(--sm-r-pill, 999px); border: 1px solid var(--sm-line); background: var(--sm-paper); color: var(--sm-ink); text-decoration: none; font-weight: 600; transition: border-color .15s ease, background .15s ease; }
.mk-moment:hover { border-color: var(--sm-accent); background: color-mix(in srgb, var(--sm-mint) 20%, var(--sm-surface)); }
.mk-moment:focus-visible { outline: 2px solid var(--sm-accent); outline-offset: 2px; }
.mk-moment-icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: color-mix(in srgb, var(--sm-mint) 30%, var(--sm-surface)); color: var(--sm-accent); }
/* /examples: one more book, opened */
.mk-close--book { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 4vw, 3.25rem); align-items: center; background: color-mix(in srgb, var(--sm-gold) 12%, var(--sm-surface)); border: 1px solid var(--sm-line); }
.mk-open-book { display: grid; grid-template-columns: 1fr 1fr; padding: 4%; border-radius: 16px; background: color-mix(in srgb, var(--sm-ink) 8%, var(--sm-panel)); box-shadow: inset 0 0 0 1px var(--sm-line); }
.mk-open-book > div { overflow: hidden; background: var(--mk-paper); box-shadow: 0 10px 26px rgba(20, 30, 24, .18); }
.mk-open-cover { border-radius: 10px 2px 2px 10px; }
.mk-open-page { border-radius: 2px 10px 10px 2px; padding: 5%; display: grid; place-items: center; }
.mk-open-book img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mk-open-page img { object-fit: contain; }
.mk-open-title { margin-top: 1.1rem; font-family: var(--sm-font-display); font-weight: 700; font-size: 1.1rem; color: var(--sm-ink); }
.mk-open-idea { margin: .6rem 0 1.2rem; padding: .9rem 1.1rem; border-left: 3px solid var(--sm-gold); border-radius: 0 12px 12px 0; background: var(--sm-surface); font-family: var(--sm-font-display); font-size: 1.05rem; line-height: 1.4; color: var(--sm-ink); }
.mk-open-idea small { display: block; margin-bottom: .3rem; font-family: var(--sm-font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sm-muted); }
/* /about: editorial sign-off */
.mk-close--signoff { padding-inline: 0; border-radius: 0; border-top: 1px solid var(--sm-line); text-align: center; }
.mk-signoff-kicker { font-family: var(--sm-font-mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sm-accent); }
.mk-signoff-title { max-width: 22ch; margin: .8rem auto 0; font-family: var(--sm-font-display); font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.08; letter-spacing: -.02em; color: var(--sm-ink); }
.mk-close--signoff .mk-lead { margin-top: .9rem; }
.mk-close--signoff .mk-actions { justify-content: center; margin-top: 1.6rem; }
/* /for-teachers: worksheet card */
.mk-close--sheet { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; background: var(--mk-paper); color: var(--mk-paper-ink); border: 2px dashed color-mix(in srgb, var(--sm-accent) 45%, transparent); }
.mk-close--sheet .mk-h2 { color: var(--mk-paper-ink); }
.mk-close--sheet .mk-lead, .mk-close--sheet .mk-micro { color: #4a524c; }
.mk-checks { display: grid; gap: .55rem; margin: 1.2rem 0 1.4rem; padding: 0; list-style: none; }
.mk-checks li { display: flex; align-items: center; gap: .7rem; font-weight: 600; }
.mk-checks li span { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; border: 2px solid #1c2420; border-radius: 5px; }
.mk-close-pages { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.mk-close-pages .mk-close-sheet { box-shadow: 0 0 0 1px #e3e0d8, 0 10px 24px rgba(20, 30, 24, .12); }
.mk-close-pages .mk-close-sheet:first-child { transform: rotate(-2deg); }
.mk-close-pages .mk-close-sheet:last-child { transform: rotate(2.5deg); }
/* /how-it-works: the steps as one line */
.mk-close--recap { background: var(--sm-surface); border: 1px solid var(--sm-line); }
.mk-recap { counter-reset: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8rem; margin: 1.8rem 0 0; padding: 0; list-style: none; }
.mk-recap li { position: relative; display: grid; gap: .6rem; font-family: var(--sm-font-display); font-weight: 600; line-height: 1.3; color: var(--sm-ink); }
.mk-recap li:not(:last-child)::after { content: ""; position: absolute; top: 1.15rem; left: 2.9rem; right: .2rem; height: 2px; background: repeating-linear-gradient(90deg, var(--sm-line) 0 6px, transparent 6px 11px); }
.mk-recap-num { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--sm-forest); color: var(--sm-on-forest); font-family: var(--sm-font-mono); font-size: .9rem; }
/* /business: slim contact bar */
.mk-close--sales { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-block: clamp(1.4rem, 3vw, 2rem); background: var(--sm-forest); color: var(--sm-on-forest); border-radius: 22px; }
.mk-close--sales .mk-h3 { color: var(--sm-on-forest); }
.mk-close--sales .mk-body { color: color-mix(in srgb, var(--sm-on-forest) 80%, transparent); margin-top: .3rem; }
.mk-sales-price { display: flex; align-items: baseline; gap: .4rem; }
.mk-sales-price strong { font-family: var(--sm-font-display); font-size: 1.9rem; letter-spacing: -.02em; }
.mk-sales-price span { font-size: .88rem; opacity: .85; }
.mk-close--sales .mk-btn--ghost { background: transparent; color: var(--sm-on-forest); border-color: color-mix(in srgb, var(--sm-on-forest) 45%, transparent); }

/* ── Use-cases: balanced masonry, prompt cards, show more ─────────────────── */
.mk-masonry.is-js { columns: auto; display: flex; align-items: flex-start; gap: 1.1rem; }
.mk-mcol { flex: 1 1 0; min-width: 0; }
.mk-masonry .is-capped { display: none; }
.mk-masonry-more { display: flex; justify-content: center; margin-top: .4rem; }
.mk-masonry-more [hidden] { display: none; }
.mk-mcard--prompt { background: color-mix(in srgb, var(--sm-gold) 14%, var(--sm-surface)); border-style: dashed; border-color: color-mix(in srgb, var(--sm-gold) 55%, var(--sm-line)); }
.mk-mcard--prompt .mk-mcard-body { padding: 1.2rem 1.25rem 1.3rem; gap: .7rem; }
.mk-mcard--prompt .mk-mcard-moment { display: inline-flex; align-items: center; gap: .45rem; color: color-mix(in srgb, var(--sm-gold) 55%, var(--sm-ink)); }
.mk-mcard--prompt .mk-mcard-idea { font-size: 1.22rem; }
.mk-mcard-art--comic { background: #14161a; padding: 4%; }
.mk-mcard-art--comic img { border-radius: 4px; }
/* why bento: a real comic page, whole, so the panels and speech bubbles read */
.mk-comic-page { display: grid; place-items: center; padding: 1rem; border-radius: 12px; background: radial-gradient(circle, color-mix(in srgb, var(--sm-ink) 14%, transparent) 1px, transparent 1.4px) 0 0 / 10px 10px, var(--sm-panel); }
.mk-comic-page img { display: block; width: auto; max-height: 330px; border-radius: 4px; box-shadow: 0 12px 30px rgba(0, 0, 0, .22); }

@media (max-width: 1080px) {
  .mk-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-qa-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .mk-close--prompt, .mk-close--book, .mk-close--sheet { grid-template-columns: minmax(0, 1fr); }
  .mk-close-pair, .mk-close-pages { max-width: 420px; }
  .mk-sum { grid-template-columns: minmax(0, 1fr); }
  .mk-recap { grid-template-columns: minmax(0, 1fr); gap: .7rem; }
  .mk-recap li { grid-template-columns: auto 1fr; align-items: center; }
  .mk-recap li::after { display: none; }
  .mk-qa-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .mk-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .mk-door-body { padding: .8rem .85rem .95rem; }
  .mk-door-body > span:not(.mk-door-go) { font-size: .95rem; }
  .mk-qa-cols { grid-template-columns: minmax(0, 1fr); gap: 1.3rem; }
  .mk-qa { padding: 1.2rem 1.1rem 1.1rem 3.4rem; }
  .mk-qa-num { left: 1.05rem; top: 1.2rem; }
  .mk-moment { padding: .55rem .9rem .55rem .55rem; font-size: .92rem; }
  .mk-moment-icon { width: 2rem; height: 2rem; }
  .mk-comic-page img { max-height: 360px; }
  .mk-close--sales { flex-direction: column; align-items: flex-start; }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .mk-price-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mk-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mk-tile, .mk-tile--md, .mk-tile--half { grid-column: span 3; }
  .mk-tile--lg { grid-column: span 6; grid-row: auto; }
  .mk-cover-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mk-mag-cards, .mk-mag-cards--4, .mk-tiles, .mk-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-lib-tools { grid-template-columns: 1fr 1fr; }
  .mk-lib-tools label:first-child { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .mk-hero--split .mk-wrap, .mk-split, .mk-faq, .mk-cta, .mk-series, .mk-privacy, .mk-plancard, .mk-scrolly, .mk-lib-hero .mk-wrap, .mk-mag-feature, .mk-method, .mk-guide-hero, .mk-longread, .mk-article { grid-template-columns: minmax(0, 1fr); }
  .mk-split--reverse > :first-child { order: 0; }
  .mk-hero-copy .mk-h1 { max-width: none; }
  .mk-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-price-grid, .mk-assure, .mk-check3, .mk-variants, .mk-principles, .mk-lesson, .mk-rollout, .mk-contact-row, .mk-two, .mk-decide { grid-template-columns: minmax(0, 1fr); }
  .mk-lesson li:not(:last-child)::after { display: none; }
  .mk-variant { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .mk-cta-art { min-height: 200px; }
  .mk-scrolly-frame { position: relative; top: 0; }
  .mk-step { min-height: auto; opacity: 1; padding-block: 1.25rem; }
  .mk-scrolly-screen { display: none; }
  .mk-scrolly-frame .mk-note { display: none; }
  .mk-step-scene { display: block; margin-top: 1rem; }
  .mk-article .article-toc { position: static; }
  .mk-mag-feature-art { min-height: 260px; }
}
.mk-step-scene { display: none; }
.mk-step-scene .mk-scene { position: relative; opacity: 1; transform: none; aspect-ratio: 4 / 3.2; border-radius: 18px; background: var(--sm-panel); border: 1px solid var(--sm-line); }
@media (max-width: 640px) {
  .mk-sec { padding-block: 3.25rem; }
  .mk-h1 { font-size: clamp(2.2rem, 10.5vw, 3rem); }
  .mk-h1--xl { font-size: clamp(2.35rem, 11.5vw, 3.2rem); }
  .mk-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .mk-bento { grid-template-columns: minmax(0, 1fr); }
  .mk-tile, .mk-tile--md, .mk-tile--half, .mk-tile--lg { grid-column: auto; }
  .mk-mag-cards, .mk-mag-cards--4, .mk-tiles, .mk-pillars { grid-template-columns: minmax(0, 1fr); }
  .mk-price-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .mk-lib-tools { grid-template-columns: minmax(0, 1fr); }
  .mk-lib-tools input, .mk-lib-tools select { min-width: 0; }
  .mk-form { grid-template-columns: minmax(0, 1fr); }
  .mk-variant { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: .9rem; padding: 1rem; }
  .mk-check3 figure > div { aspect-ratio: 4 / 3.4; }
  .mk-check3 img { object-fit: cover; object-position: center 55%; }
  .mk-idea, .mk-callout { grid-template-columns: minmax(0, 1fr); }
  .mk-stack { width: 92%; }
  .mk-tablist { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .mk-tablist::-webkit-scrollbar { display: none; }
  .mk-tab { flex: 1 0 auto; padding-inline: .8rem; white-space: nowrap; }
  .mk-tabs-sticky { top: calc(env(safe-area-inset-top, 0px) + 60px); }
  .mk-filter { top: calc(env(safe-area-inset-top, 0px) + 60px); }
  .mk-filter .mk-chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; max-width: 100%; border-radius: 16px; }
  .mk-filter .mk-chip { flex: 0 0 auto; }
  .mk-masonry { columns: 1; }
  .mk-flip-spread { grid-template-columns: minmax(0, 1fr); }
  .mk-flip-spread::after { display: none; }
  .mk-flip-page.is-right:not(.is-solo) { display: none; }
  .mk-flip-page.is-left { border-radius: 10px; }
  .mk-timeline li { grid-template-columns: 44px minmax(0, 1fr); }
  .mk-timeline-art { display: none; }
  .mk-window-body { grid-template-columns: minmax(0, 1fr); }
  .mk-window-side { display: none; }
  .mk-prompt-bar { align-items: stretch; }
  .mk-prompt-go { width: 100%; justify-content: center; }
  .mk-toggle { width: 100%; }
  .mk-toggle button { flex: 1 1 0; padding-inline: .6rem; }
  .mk-faq-a { padding-right: 0; }
  .mk-stack { width: 100%; }
  .mk-cta { padding: 1.6rem; }
  .mk-cta-art { min-height: 170px; }
  .mk-series-covers { gap: .7rem; }
}

/* ── Hero art compositions ───────────────────────────────────────────────── */
.mk-classbook { position: relative; width: min(100%, 560px); margin-inline: auto; padding-bottom: 12%; }
.mk-classbook > img { display: block; width: 62%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; border-radius: 14px; box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 24px 56px rgba(17,21,18,.18); transform: rotate(-3deg); }
.mk-classbook > .mk-spread { position: absolute; right: 0; bottom: 0; width: 70%; transform: rotate(2deg); }
.mk-classbook > .mk-spread img { aspect-ratio: 1; object-fit: cover; background: var(--mk-paper); }
.mk-classbook-tag { position: absolute; left: 4%; bottom: 2%; z-index: 2; display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; border-radius: var(--sm-r-pill); background: var(--sm-surface); border: 1px solid var(--sm-line); box-shadow: var(--sm-shadow-pop); font-size: .84rem; font-weight: 650; color: var(--sm-ink); }
.mk-classbook-tag svg { color: var(--sm-accent); }
.mk-artifact .mk-spread { transform: rotate(-1.2deg); }
.mk-artifact-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; margin-top: .9rem; }
.mk-artifact-thumbs img { border-radius: 8px; aspect-ratio: 1; object-fit: cover; box-shadow: var(--sm-shadow-card); }
.mk-artifact-thumbs span { display: grid; place-items: center; border-radius: 8px; background: var(--sm-panel); font-size: .8rem; font-weight: 650; color: var(--sm-ink-2); }
@media (max-width: 1080px) { .mk-more { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .mk-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-flip-spread.mk-flip-solo .mk-flip-page.is-solo { width: min(100%, 78%); }
  .mk-flip-book[data-format="coloring"] .mk-flip-spread.mk-flip-solo .mk-flip-page.is-solo, .mk-flip-book[data-format="comic"] .mk-flip-spread.mk-flip-solo .mk-flip-page.is-solo { width: min(100%, 70%); }
  .mk-flip-book[data-format="novel"] .mk-flip-spread.mk-flip-solo .mk-flip-page.is-solo { width: 100%; }
  .mk-collage { gap: .6rem; }
  .mk-artifact-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mk-artifact-thumbs > :nth-child(5) { display: none; }
}

/* ── Design polish 2026-10 (tokens: style.css "Additive polish tokens") ─────────────────────────────────────────
   Tactile buttons, layered card depth, pricing cards that lift, a featured plan with a soft green glow, and a
   library search bar whose fields light up on focus. The 3px focus outline above stays; the halo is extra. */
.mk-btn { transition: background-color var(--sm-dur) var(--sm-ease), border-color var(--sm-dur) var(--sm-ease), color var(--sm-dur) var(--sm-ease), box-shadow var(--sm-dur) var(--sm-ease), transform var(--sm-dur-fast) var(--sm-ease); letter-spacing: -.005em; }
.mk-btn--primary { box-shadow: var(--sm-shadow-btn), 0 4px 12px -6px color-mix(in srgb, var(--sm-accent) 60%, transparent); }
.mk-btn--primary:hover { box-shadow: var(--sm-shadow-btn), 0 10px 22px -8px color-mix(in srgb, var(--sm-accent) 65%, transparent); }
.mk-btn--ghost { border-color: var(--sm-line-strong); box-shadow: var(--sm-shadow-xs); }
.mk-btn--ghost:hover { background: var(--sm-tint); border-color: color-mix(in srgb, var(--sm-accent) 35%, var(--sm-line)); box-shadow: var(--sm-shadow-sm); }
.mk-btn:active:not([disabled]) { transform: translateY(1px) scale(.99); }
.mk-chip { transition: background-color var(--sm-dur-fast) ease, color var(--sm-dur-fast) ease, border-color var(--sm-dur-fast) ease, box-shadow var(--sm-dur) var(--sm-ease); }
.mk-chip:not([aria-pressed="true"]):not([aria-selected="true"]):not(.is-active):not(:has(input:checked)):hover { background: var(--sm-tint); }
.mk-chip[aria-pressed="true"], .mk-chip[aria-selected="true"], .mk-chip.is-active, .mk-chip:has(input:checked) { box-shadow: var(--sm-shadow-sm); }

.mk-card { border-color: color-mix(in srgb, var(--sm-line) 85%, transparent); box-shadow: var(--sm-shadow-sm); }

/* Pricing: resting depth, a lift on hover, the featured card glows */
.mk-credit, .mk-plan {
  border-color: color-mix(in srgb, var(--sm-line) 85%, transparent); box-shadow: var(--sm-shadow-sm);
  transition: transform .28s var(--sm-ease), box-shadow .28s var(--sm-ease), border-color .2s ease;
}
.mk-credit:hover, .mk-plan:hover { transform: translateY(-3px); box-shadow: var(--sm-shadow-lg); }
.mk-credit--featured, .mk-plan--featured {
  border-color: var(--sm-accent);
  background: linear-gradient(180deg, var(--sm-tint), var(--sm-surface) 45%);
  box-shadow: 0 0 0 1px var(--sm-accent), var(--sm-shadow-md), 0 30px 60px -30px color-mix(in srgb, var(--sm-accent) 50%, transparent);
}
.mk-credit--featured:hover, .mk-plan--featured:hover { box-shadow: 0 0 0 1px var(--sm-accent), var(--sm-shadow-lg), 0 36px 70px -30px color-mix(in srgb, var(--sm-accent) 60%, transparent); }
.mk-credit-art { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sm-line) 70%, transparent); }
.mk-price-name { letter-spacing: var(--sm-track-tight); }
.mk-toggle { border-color: color-mix(in srgb, var(--sm-line) 85%, transparent); box-shadow: var(--sm-shadow-sm); }
.mk-toggle button { transition: background-color var(--sm-dur) var(--sm-ease), color var(--sm-dur) var(--sm-ease), box-shadow var(--sm-dur) var(--sm-ease); }
.mk-toggle button:not(.active):not([aria-pressed="true"]):hover { background: var(--sm-hover); color: var(--sm-ink); }
.mk-toggle button.active, .mk-toggle button[aria-pressed="true"] { box-shadow: var(--sm-shadow-sm); }
/* dark mode: the legacy html[data-theme="dark"] .billing-pill.active wash (style.css) left the selected pill's dark
   ink on a dark green fill (about 1.3:1); the selected pill keeps the light-mode pairing, ink fill + surface text */
html[data-theme="dark"] .mk-toggle button.active, html[data-theme="dark"] .mk-toggle button[aria-pressed="true"] { background: var(--sm-ink); color: var(--sm-surface); }

/* Library: search bar */
.mk-lib-tools { border-color: color-mix(in srgb, var(--sm-line) 85%, transparent); box-shadow: var(--sm-shadow-md); }
.mk-lib-tools input, .mk-lib-tools select { transition: border-color var(--sm-dur) ease, box-shadow var(--sm-dur) ease, background-color var(--sm-dur) ease; }
.mk-lib-tools input:hover, .mk-lib-tools select:hover { border-color: var(--sm-line-strong); }
.mk-lib-tools input:focus, .mk-lib-tools select:focus { border-color: var(--sm-accent); background: var(--sm-surface); box-shadow: var(--sm-ring); }
/* room for the card lift and its shadow inside the scrolling shelves */
.mk-shelf-row { padding-top: .6rem; margin-top: -.4rem; padding-bottom: 1.6rem; margin-bottom: -.6rem; }

.mk-credit--featured, .mk-plan--featured { background-color: var(--sm-surface); }
@media (prefers-reduced-motion: reduce) {
  .mk-btn, .mk-chip, .mk-credit, .mk-plan, .mk-toggle button { transition: none; }
  .mk-btn:active:not([disabled]), .mk-credit:hover, .mk-plan:hover { transform: none; }
}