/* ---------------------------------------------------------------------------
   marketing.css — the shared design system for the NEW public marketing pages
   served by routes/pages-marketing.js (/business-agent, /pricing and the
   placeholder pages).

   Why a shared file when the older landings each inline their own block: those
   pages are single-angle campaign pages that get re-angled independently, and
   docs/LANDING_PAGES.md is explicit that their inline blocks must not be
   merged. The pages here are the opposite — a section hub, a price table and a
   set of stubs that must look like ONE site behind one navigation bar. So they
   share `mk-*`.

   Two-ink contract (docs/SEO_LANDING_PAGES.md): dark bands sit on
   --brand-gradient and declare a local --band-* scale; light bands use the
   normal --ink scale. No colour literals — every value resolves to theme.css.
   ------------------------------------------------------------------------ */

.mk-body {
    background: var(--surface-page);
    color: var(--ink);
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

.mk-wrap { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.mk-narrow { max-width: 800px; margin: 0 auto; padding: 0 20px; }

/* ── bands ─────────────────────────────────────────────────────────────── */
.mk-dark {
    background: var(--brand-gradient);
    --band-ink: var(--brand-ink);
    --band-ink-soft: var(--veil-strong, rgba(255, 255, 255, 0.72));
    --band-line: var(--veil, rgba(255, 255, 255, 0.16));
    color: var(--band-ink);
}

.mk-section { padding: 72px 0; }
.mk-section--tight { padding: 48px 0; }
.mk-raised { background: var(--surface-raised); }

/* ── hero ──────────────────────────────────────────────────────────────── */
/* Bottom padding is deliberately smaller than the top: the band ends right
   under the last line, instead of trailing 90px of empty black that reads as
   an unfinished page. */
.mk-hero { padding: 76px 0 64px; text-align: center; }

.mk-eyebrow {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--band-ink-soft, var(--ink-muted));
    margin: 0 0 16px;
}

.mk-h1 {
    font-size: clamp(2.15rem, 5.4vw, 3.5rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.028em;
    margin: 0 auto 20px;
    max-width: 16ch;
    color: var(--band-ink, var(--ink));
}

.mk-hero .mk-h1 { max-width: 20ch; }

.mk-lede {
    font-size: clamp(1.02rem, 2vw, 1.18rem);
    line-height: 1.65;
    color: var(--band-ink-soft, var(--ink-soft));
    max-width: 62ch;
    margin: 0 auto 32px;
}

.mk-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* On --brand-gradient a --brand-fill button is black on black, so the primary
   CTA flips to a light pill inside a dark band. */
.mk-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 26px;
    border-radius: 50px;
    font-size: 0.98rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

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

.mk-btn--primary { background: var(--brand-fill); color: var(--brand-ink); }
.mk-btn--primary:hover { background: var(--brand-fill-hover); color: var(--brand-ink); }

.mk-dark .mk-btn--primary { background: var(--surface-page); color: var(--ink); }
.mk-dark .mk-btn--primary:hover { background: var(--surface-raised); color: var(--ink); }

.mk-btn--ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line-strong);
}

.mk-btn--ghost:hover { background: var(--surface-sunken); color: var(--ink); }

.mk-dark .mk-btn--ghost { color: var(--band-ink); border-color: var(--band-line); }
.mk-dark .mk-btn--ghost:hover { background: var(--band-line); color: var(--band-ink); }

.mk-note {
    margin: 18px 0 0;
    font-size: 0.88rem;
    color: var(--band-ink-soft, var(--ink-muted));
}

/* ── section headings ──────────────────────────────────────────────────── */
.mk-h2 {
    font-size: clamp(1.6rem, 3.4vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -0.022em;
    line-height: 1.18;
    margin: 0 0 14px;
    color: var(--band-ink, var(--ink));
}

.mk-sub {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--band-ink-soft, var(--ink-soft));
    max-width: 60ch;
    margin: 0 0 40px;
}

.mk-head--center { text-align: center; }
.mk-head--center .mk-sub { margin-left: auto; margin-right: auto; }

/* ── cards ─────────────────────────────────────────────────────────────── */
.mk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

/* Four cards in a `.mk-grid` land 3 + 1, which reads as a row with something
   missing. `--four` narrows the track so all four sit on one line at desktop
   width and fall to a clean 2 × 2 before they get cramped. */
.mk-grid--four { grid-template-columns: repeat(auto-fit, minmax(226px, 1fr)); }

.mk-card {
    background: var(--surface-page);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 28px;
}

.mk-grid--four .mk-card { padding: 24px 22px; }

.mk-raised .mk-card { background: var(--surface-page); }

.mk-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--brand-fill-soft);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    margin-bottom: 16px;
}

.mk-card h3 {
    font-size: 1.08rem;
    font-weight: 750;
    letter-spacing: -0.012em;
    margin: 0 0 9px;
    color: var(--ink);
}

.mk-card p { font-size: 0.94rem; line-height: 1.62; color: var(--ink-soft); margin: 0; }

.mk-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
}

.mk-card-link:hover { text-decoration: underline; color: var(--ink); }

/* ── numbered steps ────────────────────────────────────────────────────── */
.mk-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 26px; }

.mk-step-n {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--band-line, var(--brand-fill-soft));
    color: var(--band-ink, var(--ink));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
    margin-bottom: 14px;
}

.mk-step h3 { font-size: 1.02rem; font-weight: 750; margin: 0 0 8px; color: var(--band-ink, var(--ink)); }
.mk-step p { font-size: 0.93rem; line-height: 1.6; color: var(--band-ink-soft, var(--ink-soft)); margin: 0; }

/* ── check list ────────────────────────────────────────────────────────── */
.mk-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }

.mk-checks li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 0.97rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

.mk-checks .bi { color: var(--ink); font-size: 0.95rem; margin-top: 0.25em; }

/* A check list inside a dark band. Both rules are load-bearing: --ink-soft and
   --ink are the LIGHT-band scale, so without these the list renders black text
   and black ticks on --brand-gradient, i.e. invisible. */
.mk-dark .mk-checks li { color: var(--band-ink-soft); }
.mk-dark .mk-checks .bi { color: var(--band-ink); }

/* ── split (copy + panel) ──────────────────────────────────────────────── */
.mk-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}

.mk-panel {
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 26px;
}

/* Same fix `.mk-raised .mk-card` carries: the panel's fill IS the raised band's
   fill, so on a raised section it disappears into it and reads as loose text
   inside a hairline rectangle. Lift it to the page surface instead. */
.mk-raised .mk-panel { background: var(--surface-page); }

/* ── pricing ───────────────────────────────────────────────────────────── */
/* No `align-items: start` here. The cards carry different numbers of feature
   rows, and with `start` each grid item shrinks to its own content — which
   makes `margin-top: auto` on .mk-plan-cta a no-op and leaves the three "Go
   live" buttons at three different heights. Stretch (the default) gives every
   card the row's full height, so the buttons line up along the bottom. */
.mk-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
}

.mk-plan {
    position: relative;
    background: var(--surface-page);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 30px 26px 26px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mk-plan--popular {
    border-color: var(--line-strong);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.1);
}

.mk-plan-badge {
    position: absolute;
    top: -12px;
    left: 26px;
    background: var(--brand-fill);
    color: var(--brand-ink);
    border-radius: 50px;
    padding: 5px 14px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.mk-plan-name { font-size: 1.18rem; font-weight: 800; margin: 0 0 10px; letter-spacing: -0.015em; }

.mk-plan-price { margin: 0 0 10px; display: flex; align-items: baseline; gap: 6px; }
.mk-plan-amount { font-size: 2.5rem; font-weight: 900; letter-spacing: -0.035em; line-height: 1; }
.mk-plan-period { font-size: 0.92rem; color: var(--ink-muted); font-weight: 600; }

/* The yearly figure, printed under the monthly one. Both come from
   config/agent-plans.js — never restate a number here. */
.mk-plan-yearly {
    margin: 0 0 16px;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--ink-muted);
}

.mk-plan-save {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border: 1px solid var(--line-strong);
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink);
}

.mk-plan-tagline { font-size: 0.93rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 20px; }

.mk-plan-headline {
    list-style: none;
    margin: 0 0 20px;
    padding: 18px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 8px;
    font-size: 0.93rem;
    color: var(--ink-soft);
}

.mk-plan-headline strong { color: var(--ink); }

.mk-plan-features-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin: 0 0 14px;
}

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

.mk-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

/* Off rows use --ink-muted, not --ink-disabled. They still have to be READ —
   the ✓/— comparison is the whole reason the grid exists — and at
   --ink-disabled on white they fell below a comfortable contrast ratio and the
   Starter card turned into a block of grey mush. */
.mk-plan-features li.is-off { color: var(--ink-muted); }
.mk-plan-features .bi { font-size: 0.85rem; margin-top: 0.28em; color: var(--ink); }
.mk-plan-features li.is-off .bi { color: var(--ink-disabled); }

.mk-plan-cta {
    margin-top: auto;
    display: block;
    text-align: center;
    padding: 14px 20px;
    border-radius: 50px;
    background: var(--brand-fill);
    color: var(--brand-ink);
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.18s ease;
}

.mk-plan-cta:hover { background: var(--brand-fill-hover); color: var(--brand-ink); }

.mk-plan:not(.mk-plan--popular) .mk-plan-cta {
    background: var(--surface-page);
    color: var(--ink);
    border: 1px solid var(--line-strong);
}

.mk-plan:not(.mk-plan--popular) .mk-plan-cta:hover { background: var(--surface-sunken); color: var(--ink); }

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.mk-faq { display: grid; gap: 4px; }

.mk-faq-item { border-bottom: 1px solid var(--line); padding: 20px 0; }
.mk-faq-q { font-size: 1.02rem; font-weight: 750; margin: 0 0 8px; color: var(--ink); }
.mk-faq-a { font-size: 0.95rem; line-height: 1.65; color: var(--ink-soft); margin: 0; }

/* ── footer ────────────────────────────────────────────────────────────── */
/* The `mk-footer*` rules moved to public/css/public-footer.css, which
   views/partials/public-footer.hbs links itself. They lived here until the
   front door started using the same partial without loading this file, and
   rendered the footer as a wall of unstyled links. A shared partial has to
   carry its own styles. */

/* ── product screenshot ────────────────────────────────────────────────── */
/* A real screenshot of the dashboard, framed as a window so it reads as a
   product shot rather than a stray image. `--lift` pulls the frame up over the
   dark band above it, which is why `.mk-hero--shot` carries extra bottom
   padding: the band has to be tall enough to have something to overlap. */
.mk-shot { position: relative; }
.mk-shot--lift { margin-top: -104px; z-index: 2; }

.mk-shot-frame {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-page);
    box-shadow: 0 28px 64px rgba(0, 0, 0, 0.24);
    overflow: hidden;
}

.mk-shot-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 15px;
    background: var(--surface-raised);
    border-bottom: 1px solid var(--line);
}

.mk-shot-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }

/* The capture is a crop of a taller board, so the bottom edge lands mid-card.
   Fading it into the page background makes that cut read as depth instead of a
   truncated image — don't replace this with a hard edge. */
.mk-shot-media { position: relative; }
.mk-shot-media img { display: block; width: 100%; height: auto; }

.mk-shot-media::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 84px;
    background: linear-gradient(to bottom, transparent, var(--surface-page));
    pointer-events: none;
}

/* The fade above assumes the frame sits on `--surface-page`. Inside a raised
   band it has to fade to that band's own fill, or the wash reads as a grey
   smear across the bottom of the screenshot. */
.mk-raised .mk-shot-media::after {
    background: linear-gradient(to bottom, transparent, var(--surface-raised));
}

/* `--flat` is for a capture of a WHOLE window rather than a crop of a taller
   board. There is nothing truncated to imply, and the bottom of the window is
   usually where the interesting control sits (the prompt bar and its price), so
   fading it out would hide the thing the caption points at. */
.mk-shot--flat .mk-shot-media::after { content: none; }

.mk-shot-caption {
    margin: 18px auto 0;
    max-width: 62ch;
    text-align: center;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--ink-muted);
}

.mk-hero--shot { padding-bottom: 150px; }

/* ── photo figures (generated character imagery) ───────────────────────── */
.mk-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.mk-fig { margin: 0; min-width: 0; }

.mk-fig img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid var(--line);
}

.mk-fig figcaption {
    margin-top: 9px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--band-ink-soft, var(--ink-muted));
}

/* A single tall still (9:16), used where the point is vertical video. It is a
   grid child of .mk-split, so it needs its own max-width — otherwise it fills
   half the page and dwarfs the copy beside it. */
.mk-media-tall { justify-self: center; width: 100%; max-width: 330px; }

.mk-media-tall img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    border-radius: 20px;
    border: 1px solid var(--line);
}

/* ── roster row (many characters, one schedule board) ──────────────────── */
.mk-roster { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

.mk-roster img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--band-line, var(--line));
}

/* ── chips (platforms, formats) ────────────────────────────────────────── */
.mk-chips { display: flex; flex-wrap: wrap; gap: 10px; }

.mk-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 50px;
    border: 1px solid var(--band-line, var(--line));
    font-size: 0.9rem;
    font-weight: 650;
    color: var(--band-ink, var(--ink));
}

/* ── before / after pair (the product shot → the influencer wearing it) ─── */
/* Two photographs read as one claim: this flat-lay produced that campaign shot.
   Both frames are locked to the same 3:4 box so the pair lines up, but they fit
   their image differently on purpose — a catalog flat-lay is `contain` on a
   plate, because cropping it cuts the garment in half, while the try-on is
   `cover`: it is a photograph of a person and its edges are disposable. It is a
   grid child of .mk-split, so it needs its own max-width for the same reason
   .mk-media-tall does. */
.mk-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
    justify-self: center;
    width: 100%;
    max-width: 460px;
}

.mk-pair figure { margin: 0; min-width: 0; }

.mk-pair img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--surface-raised);
}

.mk-pair-plate img { object-fit: contain; }
.mk-pair-worn img { object-fit: cover; }

/* --line is the light-band hairline and vanishes against --brand-gradient. */
.mk-dark .mk-pair img { border-color: var(--band-line); }

.mk-pair figcaption {
    margin-top: 9px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--band-ink-soft, var(--ink-muted));
}

.mk-pair-step {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--band-ink, var(--ink));
}

/* ── Aria showcase (/aria) ─────────────────────────────────────────────── */
/* The one page whose subject is a person rather than a feature, so it opens
   asymmetric: copy on the left, her face and a real exchange on the right. The
   transcript is a STATIC mock, not a live chat — the live chat is the bubble
   this page's CTAs open (views/partials/aria-widget.hbs). Keeping it static is
   the point: a card that pretends to be interactive and isn't costs the click. */
.mk-aria-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: 54px;
    align-items: center;
    padding: 68px 0 74px;
    text-align: left;
}

.mk-aria-hero .mk-h1 { margin-left: 0; max-width: 15ch; }
.mk-aria-hero .mk-lede { margin-left: 0; }
.mk-aria-hero .mk-cta-row { justify-content: flex-start; }
.mk-aria-hero .mk-note { text-align: left; }

/* Identity strip — face, name, and the line that says what she actually is. */
.mk-aria-id { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; }

.mk-aria-face {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--band-line, var(--line));
    background: var(--veil-glass, var(--surface-raised));
    flex: none;
}

/* Her portrait is read live from her character document, and she may have none
   (scripts/seed-guide-character.js --skip-face). The monogram keeps the strip
   from collapsing into a floating name when the image is absent. */
.mk-aria-face--blank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--band-ink, var(--ink));
}

.mk-aria-id-name { font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; margin: 0; }

.mk-aria-id-role {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.84rem;
    margin: 3px 0 0;
    color: var(--band-ink-soft, var(--ink-muted));
}

.mk-aria-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

/* The transcript card. Same "framed product surface" language as .mk-shot-frame
   so the two read as one family on pages that carry both. */
.mk-chatcard {
    background: var(--surface-page);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 28px 64px rgba(0, 0, 0, 0.24);
    overflow: hidden;
    color: var(--ink);
}

.mk-chatcard-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 18px;
    background: var(--surface-raised);
    border-bottom: 1px solid var(--line);
}

.mk-chatcard-head img,
.mk-chatcard-head .mk-chatcard-blank {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
}

.mk-chatcard-blank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-fill-soft);
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 800;
}

.mk-chatcard-name { font-size: 0.9rem; font-weight: 750; color: var(--ink); }
.mk-chatcard-sub { font-size: 0.76rem; color: var(--ink-muted); margin-left: auto; }

.mk-chatcard-body { padding: 18px; display: grid; gap: 11px; }

.mk-msg {
    max-width: 88%;
    padding: 11px 15px;
    font-size: 0.91rem;
    line-height: 1.55;
    border-radius: 16px;
}

.mk-msg--them {
    background: var(--surface-sunken);
    color: var(--ink);
    border-bottom-left-radius: 6px;
    justify-self: start;
}

.mk-msg--you {
    background: var(--brand-fill);
    color: var(--brand-ink);
    border-bottom-right-radius: 6px;
    justify-self: end;
}

.mk-msg strong { font-weight: 750; }

/* The closing note under the transcript: what she did AFTER answering. */
.mk-chatcard-foot {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 18px;
    border-top: 1px solid var(--line);
    background: var(--surface-raised);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--ink-muted);
}

.mk-chatcard-foot .bi { color: var(--ink); font-size: 0.9rem; }

/* ── "try asking" prompts ──────────────────────────────────────────────── */
/* Anchors, not buttons, so a middle-click still reaches her page — the same
   contract every `data-aria-open` link on the marketing pages keeps. */
.mk-asks { display: flex; flex-wrap: wrap; gap: 11px; justify-content: center; }

.mk-ask {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    border-radius: 50px;
    border: 1px solid var(--line);
    background: var(--surface-page);
    color: var(--ink);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease;
}

.mk-ask:hover { background: var(--surface-sunken); color: var(--ink); transform: translateY(-1px); }
.mk-ask .bi { color: var(--ink-muted); font-size: 0.85rem; }

/* ── aspect-ratio row (one prompt, several formats) ────────────────────── */
/* Three renders of the SAME scene at three different aspect ratios, shown at
   their real proportions side by side — the shapes ARE the claim, so never
   force them into one uniform box. The tracks are weighted so the wide frame
   gets the room it needs and the vertical one does not tower over the row;
   every image sets its own `aspect-ratio` inline-free via the modifier class.
   `min-width: 0` on the items is the usual grid + aspect-ratio trap: without
   it a frame refuses to shrink below its intrinsic width and the row overflows
   on a phone. */
.mk-ratios {
    display: grid;
    grid-template-columns: 1.5fr 1fr 0.62fr;
    gap: 16px;
    align-items: end;
}

.mk-ratios figure { margin: 0; min-width: 0; }

.mk-ratios img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--surface-raised);
}

.mk-ratios figcaption {
    margin-top: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-muted);
    text-align: center;
}

/* ── expression row (one face, several expressions) ────────────────────── */
/* Four square portraits of the SAME person. They are locked to 1:1 and sized
   identically on purpose — here the variable is the expression, so everything
   else has to be held constant or the row stops being a controlled comparison
   (which is the opposite of .mk-ratios, where the differing shape IS the point). */
.mk-exprs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

.mk-exprs figure { margin: 0; min-width: 0; }

.mk-exprs img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid var(--line);
}

.mk-exprs figcaption {
    margin-top: 9px;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    color: var(--band-ink-soft, var(--ink-muted));
}

/* A single reference photograph beside a column of copy. Same job as
   .mk-media-tall, different box: 3:4 rather than 9:16. */
.mk-media-portrait { justify-self: center; width: 100%; max-width: 400px; }

.mk-media-portrait img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid var(--line);
}

.mk-media-portrait figcaption {
    margin-top: 11px;
    text-align: center;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--ink-muted);
}

/* ── art-backed dark hero ──────────────────────────────────────────────── */
/* A generated illustration sitting UNDER a .mk-dark band rather than beside
   the copy. The band keeps its own gradient underneath, so if the image ever
   404s the hero degrades to the normal dark hero instead of to white text on
   white. The overlay is what guarantees the two-ink contract survives whatever
   the art does — never delete it to "make the picture pop". */
.mk-hero-art {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.mk-hero-art > .mk-hero-art-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
    z-index: -2;
}

.mk-hero-art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 8, 14, 0.62) 0%, rgba(8, 8, 14, 0.78) 55%, rgba(8, 8, 14, 0.92) 100%);
    z-index: -1;
}

/* ── illustration beside a column of copy ──────────────────────────────── */
/* The sibling of .mk-media-tall, for LANDSCAPE artwork rather than a portrait
   photograph. Never reach for .mk-media-tall here: it force-crops its image to
   9:16, which decapitates a wide illustration. This one keeps the art's own
   proportions and only centres it in the track. */
.mk-media-art { justify-self: center; width: 100%; }

.mk-media-art img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: var(--surface-raised);
}

/* ── accordion (expand-for-detail) ─────────────────────────────────────── */
/* Native <details>/<summary>, so it opens with JS disabled, is keyboard
   operable for free and every closed panel is still in the DOM for a crawler.
   The marker is stripped on both engines — `list-style` for Firefox/Chrome,
   `::-webkit-details-marker` for older Safari — because the caret is drawn as
   its own element on the right. */
.mk-acc { display: grid; gap: 12px; }

.mk-acc-item {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-page);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mk-acc-item[open] {
    border-color: var(--line-strong, var(--line));
    box-shadow: 0 10px 30px rgba(15, 15, 25, 0.06);
}

.mk-acc-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.mk-acc-head::-webkit-details-marker { display: none; }
.mk-acc-head:hover { background: var(--surface-sunken); }

.mk-acc-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--surface-sunken);
    border: 1px solid var(--line);
    color: var(--ink);
    font-size: 1.02rem;
}

.mk-acc-heading { flex: 1 1 auto; min-width: 0; }

.mk-acc-name {
    display: block;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--ink);
}

.mk-acc-desc {
    display: block;
    margin-top: 3px;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--ink-muted);
}

.mk-acc-caret {
    flex: 0 0 auto;
    color: var(--ink-muted);
    font-size: 0.9rem;
    transition: transform 0.18s ease;
}

.mk-acc-item[open] .mk-acc-caret { transform: rotate(180deg); }

.mk-acc-body {
    padding: 4px 20px 22px;
    border-top: 1px solid var(--line);
    margin-top: -1px;
}

.mk-acc-lede {
    margin: 18px 0 0;
    font-size: 0.96rem;
    line-height: 1.7;
    color: var(--ink-soft, var(--ink-muted));
}

/* One sub-setting per row: what the control is called in the product, then
   what it actually decides. Keep the label text identical to the dashboard's
   own label — the whole point of the row is that the reader recognises it when
   they get there. */
.mk-acc-rows { display: grid; gap: 2px; margin: 18px 0 0; }

.mk-acc-row {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 18px;
    padding: 13px 0;
    border-top: 1px solid var(--line);
}

.mk-acc-row:first-child { border-top: 0; }

.mk-acc-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.45;
}

.mk-acc-text {
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--ink-muted);
    margin: 0;
}

.mk-acc-text strong { color: var(--ink); font-weight: 650; }

/* ── code snippet ──────────────────────────────────────────────────────────
   A block of real markup the reader is meant to copy — first used for the embed
   tag on /business-agent/widget. It scrolls inside itself (`overflow-x: auto`)
   rather than widening the page: a script tag with a full URL in it is longer
   than a phone is wide. Follows the two-ink contract, so it also works inside a
   .mk-dark band, where --band-* replaces the light scale.
   ------------------------------------------------------------------------- */
.mk-code {
    background: var(--surface-sunken);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px 20px;
    margin: 0;
    overflow-x: auto;
}

.mk-code code {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.85rem;
    line-height: 1.95;
    color: var(--ink);
    white-space: pre;
}

/* The parts of the snippet the reader has to change — their own agent's URL. */
.mk-code b { color: var(--ink); font-weight: 750; }
.mk-code .mk-code-dim { color: var(--ink-muted); font-weight: 400; }

.mk-dark .mk-code { background: var(--veil-wash); border-color: var(--band-line); }
.mk-dark .mk-code code,
.mk-dark .mk-code b { color: var(--band-ink); }
.mk-dark .mk-code .mk-code-dim { color: var(--band-ink-soft); }

/* ── UI replica ("a dashboard, redrawn") ──────────────────────────────────
   A hand-built copy of a real dashboard, in markup rather than a screenshot,
   with invented placeholder data. First used on /business-agent/channels, where
   the two real dashboards — Agent Email (/dashboard/email) and Instagram DM
   Agents (/dashboard/dm-agents) — cannot be photographed for a public page: a
   real capture shows real addresses, real contacts and real conversations.

   It goes INSIDE `.mk-shot-frame`, in place of `.mk-shot-media`, so it reads as
   the same kind of product shot as a genuine capture elsewhere on the site. Two
   rules follow from that:

   - it must keep looking like the product. When either dashboard is redesigned,
     redraw this — a stale replica is the same lie as a stale screenshot;
   - every string in it is fictional and must stay fictional. No real customer
     address, handle or name is ever pasted in here.

   Type is sized in `em` off `.mk-ui`'s own font-size, so the whole replica
   scales down in one place on a narrow screen instead of per rule.
   ------------------------------------------------------------------------- */
.mk-ui {
    background: var(--surface-page);
    padding: 14px;
    font-size: 15px;
    line-height: 1.4;
}

/* Every track is `minmax(0, …)` and every box that holds nowrap text sets
   `min-width: 0`. A grid or flex child defaults to a content-sized floor, and
   the content here is deliberately unbreakable — full email addresses, single
   ellipsised lines — so without these the replica refuses to go below its
   natural width and pushes the whole PAGE into a horizontal scroll on a phone. */
.mk-ui-panes {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) minmax(0, 1.35fr);
    gap: 10px;
    height: 430px;
}

.mk-ui-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}

/* Same `flex: 0 0 auto` the real dashboards need — a column header with
   `overflow: hidden` resolves `min-height: auto` to zero and squashes itself.
   See docs/CHARACTER_EMAIL_DASHBOARD.md § "Column headers were being squashed". */
.mk-ui-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
    font-size: 0.8em;
    font-weight: 800;
    color: var(--ink);
    overflow: hidden;
}

.mk-ui-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mk-ui-list { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 6px; }

.mk-ui-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 9px;
    border-radius: 10px;
    min-width: 0;
}

.mk-ui-row + .mk-ui-row { border-top: 1px solid var(--line-soft); border-radius: 0; }
.mk-ui-row.is-active { background: var(--surface-page); border: 1px solid var(--line-strong); border-radius: 10px; }

.mk-ui-av {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--surface-sunken);
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    font-size: 0.62em;
    font-weight: 800;
    color: var(--ink-soft);
    letter-spacing: 0.02em;
}

.mk-ui-av--sq { border-radius: 8px; }

.mk-ui-txt { min-width: 0; flex: 1 1 auto; }

/* `display: block` matters: these are spans, and left inline the name and the
   snippet under it run together on one line whenever the pair happens to fit. */
.mk-ui-strong {
    display: block;
    font-size: 0.76em;
    font-weight: 750;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mk-ui-soft {
    display: block;
    font-size: 0.7em;
    color: var(--ink-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mk-ui-opt {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px 9px;
    font-size: 0.68em;
    color: var(--ink-soft);
}

.mk-ui-box {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid var(--line-strong);
    display: grid;
    place-items: center;
    font-size: 8px;
    color: var(--brand-ink);
}

.mk-ui-box.is-on { background: var(--ink); border-color: var(--ink); }

.mk-ui-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface-page);
    font-size: 0.68em;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
}

.mk-ui-btn--solid { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--brand-ink); }
.mk-ui-btn--muted { color: var(--ink-disabled); }

.mk-ui-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface-page);
    font-size: 0.7em;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
}

.mk-ui-state {
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--surface-sunken);
    font-size: 0.92em;
    font-weight: 800;
    color: var(--ink-muted);
}

.mk-ui-state--on { background: var(--status-success); color: var(--status-ink); }
.mk-ui-state--set { background: var(--ink); color: var(--brand-ink); }

.mk-ui-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }

/* the conversation column */
.mk-ui-thread { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 12px; display: grid; gap: 9px; align-content: start; }

.mk-ui-bub {
    max-width: 78%;
    padding: 9px 12px;
    border-radius: 14px;
    font-size: 0.74em;
    line-height: 1.55;
}

.mk-ui-bub--in { justify-self: start; background: var(--surface-page); border: 1px solid var(--line); color: var(--ink-soft); border-bottom-left-radius: 5px; }
.mk-ui-bub--out { justify-self: end; background: var(--ink); color: var(--brand-ink); border-bottom-right-radius: 5px; }
.mk-ui-bub b { color: var(--ink); font-weight: 750; }
.mk-ui-bub--out b { color: var(--brand-ink); }

.mk-ui-meta { font-size: 0.64em; color: var(--ink-muted); }
.mk-ui-meta--out { justify-self: end; }

.mk-ui-reply {
    flex: 0 0 auto;
    border-top: 1px solid var(--line);
    padding: 9px 10px;
    background: var(--surface-page);
}

.mk-ui-field {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-raised);
    padding: 8px 10px;
    font-size: 0.72em;
    color: var(--ink-disabled);
    margin-bottom: 8px;
}

.mk-ui-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

/* the DM dashboard: a stacked card rather than three columns */
.mk-ui-card {
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px;
}

.mk-ui-card + .mk-ui-card { margin-top: 10px; }

.mk-ui-cardhead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 11px;
}

.mk-ui-title { font-size: 0.86em; font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 7px; }
.mk-ui-label { font-size: 0.7em; font-weight: 700; color: var(--ink-muted); margin-bottom: 7px; }

.mk-ui-select {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-page);
    padding: 8px 11px;
    min-width: 0;
}

.mk-ui-select .mk-ui-strong { flex: 1 1 auto; min-width: 0; }
.mk-ui-caret { color: var(--ink-muted); font-size: 0.7em; }

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

.mk-ui-camp {
    min-width: 0;
    background: var(--surface-page);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 11px 12px;
}

.mk-ui-camp-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.mk-ui-camp-name { font-size: 0.8em; font-weight: 800; color: var(--ink); }

.mk-ui-tag {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--surface-sunken);
    font-size: 0.64em;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    text-transform: uppercase;
}

.mk-ui-key {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 8px;
    background: var(--surface-sunken);
    font-size: 0.72em;
    font-weight: 700;
    color: var(--ink);
    margin-top: 9px;
}

.mk-ui-camp-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 11px; }

/* ── channel flow diagram ─────────────────────────────────────────────────
   The routing rule in one picture: four inbound channels → the keyword match →
   the agent that owns that keyword → what comes out. Built in markup, not as a
   generated image, because every label here is a product term that has to stay
   true; a baked-in label cannot be corrected when the product moves.
   ------------------------------------------------------------------------- */
.mk-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; }

.mk-flow-step {
    position: relative;
    background: var(--surface-page);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px 18px;
}

.mk-raised .mk-flow-step { background: var(--surface-raised); }

/* The arrow between two steps. Drawn on the step rather than as its own element
   so the grid stays four cells wide and wraps cleanly. */
.mk-flow-step + .mk-flow-step::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 50%;
    width: 14px;
    height: 1px;
    background: var(--line-strong);
}

.mk-flow-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--brand-ink);
    font-size: 0.78rem;
    font-weight: 800;
    margin-bottom: 12px;
}

.mk-flow-step h3 { font-size: 0.98rem; font-weight: 780; margin: 0 0 8px; color: var(--ink); letter-spacing: -0.01em; }
.mk-flow-step p { font-size: 0.88rem; line-height: 1.6; color: var(--ink-soft); margin: 0; }

.mk-flow-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

.mk-flow-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--surface-sunken);
    font-size: 0.76rem;
    font-weight: 650;
    color: var(--ink-soft);
}

.mk-raised .mk-flow-tag { background: var(--surface-page); }
.mk-flow-tag .bi { font-size: 0.8rem; }

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
    .mk-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mk-flow-step + .mk-flow-step::before { content: none; }
}

@media (max-width: 860px) {
    .mk-acc-row { grid-template-columns: minmax(0, 1fr); gap: 5px; }
    .mk-acc-head { padding: 15px 15px; gap: 12px; }
    .mk-acc-body { padding: 4px 15px 18px; }
    .mk-ratios { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
    .mk-ratios figure:first-child { grid-column: 1 / -1; }
    .mk-exprs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mk-split { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .mk-hero { padding: 58px 0 62px; }
    .mk-hero--shot { padding-bottom: 110px; }
    .mk-section { padding: 54px 0; }
    .mk-shot--lift { margin-top: -70px; }
    .mk-roster img { width: 72px; height: 72px; }
    .mk-aria-hero { grid-template-columns: minmax(0, 1fr); gap: 34px; padding: 52px 0 58px; }
    .mk-aria-hero .mk-h1 { max-width: none; }

    /* The replica drops its widest column rather than shrinking three of them
       into unreadable slivers: the two that carry the story (what is connected,
       and what the agent said) stay. `.mk-ui-drop` marks the one that goes. */
    .mk-ui { font-size: 13px; }
    .mk-ui-panes { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); height: 380px; }
    .mk-ui-drop { display: none; }
    .mk-ui-camps { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
    .mk-ui { font-size: 12px; padding: 10px; }
    .mk-ui-panes { grid-template-columns: minmax(0, 1fr); height: 340px; }
    .mk-ui-drop--sm { display: none; }
}