/* DCM theme — port of the Next marketing stylesheet. Fonts self-hosted; media from ../media. */
@font-face { font-family: 'Anton'; src: url(../fonts/anton.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url(../fonts/inter.woff2) format('woff2'); font-weight: 400 500; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url(../fonts/jetbrains-mono.woff2) format('woff2'); font-weight: 400; font-display: swap; }
body { margin: 0; }
.wp-site-blocks > *, .wp-block-template-part { margin: 0; }

/* DearCustomer.Marketing public site — tokens from docs/design/design-system.md.
   Scoped under .mk so the admin/dashboard shell keeps its own palette. */
.mk {
  /* brand: navy is the business-card ground, gold the logo mark. Navy takes carbon's job as the structural dark; gold takes mint/volt's job as the only chromatic note, still on small elements */
  --canvas: #e5e5e5; --paper: #ffffff; --navy: #1e263b; --mist: #f3f3f3;
  --ash: #c6c6c6; --smoke: #9aa3b8; --slate: #444444; --graphite: #2f2f2f;
  --gold: #c9a464; --gold-pale: #efe2bd;
  /* motion: one strong ease-out for everything that moves; nothing here animates layout */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --cond: Anton, Impact, 'Arial Narrow', sans-serif;
  --body: Inter, ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --max: 1200px; --gutter: 24px;
  min-height: 100vh; background: var(--canvas); color: var(--navy);
  font-family: var(--body); font-size: 16px; line-height: 1.25; letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}
.mk *, .mk *::before, .mk *::after { box-sizing: border-box; }
.mk h1, .mk h2, .mk h3, .mk p { margin: 0; }
.mk a { color: inherit; text-decoration: none; }
.mk .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* type roles */
.mk .t-display { font-family: var(--cond); font-weight: 400; text-transform: uppercase;
  line-height: 0.9; letter-spacing: -0.03em; font-size: clamp(64px, 9vw, 130px); }
.mk .t-display-md { font-family: var(--cond); font-weight: 400; text-transform: uppercase;
  line-height: 0.9; letter-spacing: -0.03em; font-size: clamp(48px, 5.5vw, 80px); }
.mk .t-heading { font-family: var(--body); font-weight: 500; text-transform: uppercase;
  line-height: 1.1; letter-spacing: -0.02em; font-size: clamp(28px, 2.8vw, 40px); }
.mk .t-body { font-size: 16px; line-height: 1.25; color: var(--slate); text-wrap: pretty; }
.mk .t-body-lg { font-size: 18px; line-height: 1.33; }
.mk .t-mono { font-family: var(--mono); font-size: 12px; line-height: 1.6; letter-spacing: -0.03em; }

/* surfaces + components */
.mk .card { background: var(--paper); border-radius: 32px; padding: 24px; }
.mk .card-inv { background: var(--navy); color: var(--paper); border-radius: 32px; padding: 24px; }
.mk .card-inv .t-body { color: var(--smoke); }
.mk .dome { border-radius: 64px 64px 0 0; }
.mk .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px; border-radius: 8px; font-weight: 500; font-size: 16px;
  background: var(--navy); color: var(--paper); border: 0; cursor: pointer; }
.mk .btn-ghost { background: transparent; color: var(--slate); border: 1.5px solid var(--slate); border-radius: 4px; padding: 12px 16px; }
.mk .btn-inv { background: var(--paper); color: var(--navy); }
.mk .btn-gold { background: var(--gold); color: var(--navy); }
.mk .link { font-weight: 500; }
.mk .link:hover { text-decoration: underline; }
.mk .tag { display: inline-block; background: var(--gold-pale); color: var(--navy); border-radius: 64px;
  padding: 8px 16px; font-family: var(--mono); font-size: 12px; letter-spacing: -0.03em; }
.mk .gold-hl { background: var(--gold); padding: 0 4px; }
.mk .section { padding: 48px 0; }
.mk .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .mk .grid3 { grid-template-columns: 1fr; } }

/* ── nav ── */
.mk-nav { height: 8rem; display: flex; align-items: center; }
.mk-nav-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.mk-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: 18px; letter-spacing: -0.02em; min-height: 48px; }
/* 1296x333 brand lockup (navy/gold on the canvas, gold/cream in the footer); 56px keeps MARKETING legible, 48px on phones so the CTA still fits beside it */
.mk-logo-img { display: block; height: 56px; width: auto; }
.mk-pill { display: flex; align-items: center; gap: 4px; background: var(--mist); border-radius: 48px; padding: 6px; justify-self: center; }
.mk-pill-link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 40px; font-size: 16px; font-weight: 500; color: var(--navy); }
.mk-pill-link:hover { background: var(--paper); }
.mk-nav-cta { justify-self: end; white-space: nowrap; height: 48px; }
.mk-cta-short { display: none; }

/* ── hero ── */
/* the page's first black block: headline + paragraph in the left column, the hub render alive on the right, bleeding off the frame. One viewport tall at 1440x900 with the nav */
.mk-hero { position: relative; overflow: hidden; background: var(--navy); color: var(--paper); padding: 96px 0; min-height: 640px; display: flex; align-items: center; }
.mk-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "h obj" "copy obj"; align-content: center; width: 100%; }
.mk .mk-hero-h { grid-area: h; position: relative; z-index: 1; }
.mk .mk-hero-h { font-size: clamp(52px, 6vw, 92px); text-wrap: balance; }  /* 4 lines at 1440, buttons above a 900px fold */
.mk .mk-hero-h .gold { color: var(--gold); }
.mk-hero-copy { grid-area: copy; position: relative; z-index: 1; }
.mk .mk-hero-p { max-width: 440px; margin-top: 24px; color: var(--smoke); }
.mk .mk-hero-cta { display: inline-block; padding: 12px 0; line-height: 24px; margin-top: 24px; font-size: 18px; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; text-decoration-color: var(--gold); text-wrap: balance; }
.mk .mk-hero-cta span { white-space: nowrap; }
/* the object is a video, not a framed player: no radius, no border, the frame edge feathered into the navy so it never shows */
.mk-hero-object { pointer-events: none; position: absolute; }
.mk-hero-object video { display: block; background: var(--navy); mix-blend-mode: screen; }
/* the whole composition stays in frame (all six tiles, then the full dashboard). Anchored to the headline column's right edge (the wrap's midline, so it holds at every width), bled 7% off the right edge, vertically centred on the copy; the frame's own dark margin plus the 14% feather keeps its first tile clear of "MEASURED." (the headline's widest line, 508px in a 576px column at 1440) */
.mk-hero-object { top: 50%; left: calc(50% + 32px); right: -7%; max-width: 1100px; transform: translateY(-50%); }
.mk-hero-object video { width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 90%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 90%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent); mask-composite: intersect; }

@media (max-width: 900px) {
  .mk-nav { height: auto; padding: 16px 0 8px; }
  .mk-nav-row { grid-template-columns: 1fr auto; row-gap: 12px; column-gap: 12px; padding: 0 var(--gutter); }
  .mk-logo { grid-row: 1; grid-column: 1; }
  .mk-nav-cta { grid-row: 1; grid-column: 2; padding: 0 16px; font-size: 15px; }
  .mk-cta-long { display: none; }
  .mk-cta-short { display: inline; }
  .mk-logo { font-size: 15px; gap: 8px; }
  .mk-logo-img { height: 48px; }
  /* one 48px row of three section chips; Sign in is the footer's job on a phone and Book a call is already the button */
  .mk-pill { grid-row: 2; grid-column: 1 / -1; justify-self: stretch; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; border-radius: 48px; padding: 4px; }
  .mk-pill-link { min-height: 48px; justify-content: center; padding: 0 8px; font-size: 15px; }
  .mk-pill-desk { display: none; }
  /* the phone reads headline, then the render full bleed (so the hub is above the fold), then the paragraph */
  .mk-hero { padding: 32px 0 40px; min-height: 0; display: block; }
  .mk-hero-grid { grid-template-columns: 1fr; grid-template-areas: "h" "obj" "copy"; }
  .mk .mk-hero-p { margin-top: 8px; }
  .mk-hero-object { grid-area: obj; position: static; width: auto; max-width: none; transform: none; margin: 24px calc(-1 * var(--gutter)); }
  .mk-hero-object video { width: 100%; height: auto; object-fit: fill;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent); mask-composite: intersect; }
}

/* ── objects (cut-out renders with a CSS floor reflection; the work object uses it) ── */
.mk-object { position: relative; }
.mk-object img { display: block; width: 100%; height: auto; position: relative; z-index: 1; }
.mk-object::before, .mk-object::after { content: ""; position: absolute; left: 0; top: 100%; width: 100%; padding-top: 60%; margin-top: -4%; background: var(--obj) center bottom / 100% auto no-repeat; transform-origin: center; filter: blur(10px); opacity: 0.3; pointer-events: none; }
.mk-object::before { display: none; }

/* ── story ── */
.mk .mk-triad { padding-top: 16px; }
.mk .mk-label { margin: 20px 0 48px; max-width: 620px; color: var(--navy); font-weight: 400; }
.mk .mk-how { padding: 96px 0; }
.mk .mk-h2 { margin-bottom: 40px; }
.mk-steps { list-style: none; margin: 0; padding: 0; }
.mk-steps .card { display: flex; flex-direction: column; gap: 16px; padding: 32px; }
/* the numeral IS the object on the card — navy on paper, no plate (a black plate read as an empty image slot) */
.mk .mk-step-k { color: var(--slate); text-transform: uppercase; font-weight: 500; margin: 0; }
.mk-steps .t-body { margin: 0; }
/* the retainer: one paper card under the steps — head left, the four rhythms right */
.mk .mk-ret { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: 48px 64px; padding: 40px; margin-top: 24px; }
.mk-ret-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.mk .mk-ret-h { margin: 0; max-width: none; }
.mk .mk-ret-p { margin: 0; }
.mk-ret-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 32px 40px; align-content: start; }
.mk-ret-grid li { display: flex; flex-direction: column; gap: 10px; }
.mk .mk-ret-k { color: var(--slate); text-transform: uppercase; font-weight: 500; }
.mk-ret-grid .t-body { margin: 0; max-width: none; }
@media (max-width: 900px) {
  .mk .mk-ret { grid-template-columns: 1fr; gap: 32px; padding: 28px 24px; }
  .mk-ret-grid { grid-template-columns: 1fr; gap: 24px; }
}
.mk-ai { background: var(--navy); color: var(--paper); padding: 96px 0; margin-top: 0; }
.mk .mk-ai-h { margin-top: 24px; max-width: none; }
/* text row: headline left, paragraph seated on its baseline right */
.mk-ai-grid { display: grid; grid-template-columns: 1fr minmax(0, 440px); gap: 48px; align-items: end; }
.mk .mk-ai-p { color: var(--smoke); margin-top: 0; max-width: none; }
/* the board: an example week of the product, drawn flat in the block's own palette.
   Ink on navy: paper for values, smoke for labels, gold for the live series. Fills only, no strokes on boxes. */
.mk-ai-show { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 48px; align-items: start; margin-top: 56px; }
.mk-ai-board { background: rgba(255, 255, 255, 0.06); border-radius: 32px; padding: 24px; display: grid; gap: 20px; }
.mk-ai-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.mk .mk-ai-bt { color: var(--smoke); text-transform: uppercase; }
.mk .mk-ai-sample { display: inline-block; background: var(--gold); color: var(--navy); border-radius: 64px; padding: 4px 12px; text-transform: uppercase; }
.mk-ai-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mk-ai-kpi { background: rgba(255, 255, 255, 0.06); border-radius: 20px; padding: 16px; display: grid; grid-template-columns: minmax(min-content, 1fr) minmax(40px, 96px); grid-template-areas: "k k" "v s" "d d"; column-gap: 12px; align-items: end; }
.mk .mk-ai-k { grid-area: k; color: var(--smoke); text-transform: uppercase; }
.mk-ai-v { grid-area: v; font-family: var(--cond); font-size: 36px; line-height: 1; margin-top: 6px; white-space: nowrap; }
.mk-ai-x { font-family: var(--body); font-size: 24px; font-weight: 500; margin-left: 2px; }
.mk-ai-spark { grid-area: s; width: 100%; min-width: 0; height: 28px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mk-ai-spark path { vector-effect: non-scaling-stroke; }
.mk-ai-d { grid-area: d; margin-top: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: -0.03em; color: var(--smoke); }
.mk-ai-d.is-up { color: var(--gold); }
.mk-ai-d.is-down { color: var(--paper); }
.mk-ai-kpi.is-hi .mk-ai-v { color: var(--gold); }
.mk-ai-big { grid-area: s; font-family: var(--cond); font-size: 28px; line-height: 1; color: var(--gold); text-align: right; }
.mk-ai-panels { display: grid; grid-template-columns: 7fr 5fr; gap: 12px; }
.mk-ai-panels-1 { grid-template-columns: 1fr; }
.mk-ai-panel { background: rgba(255, 255, 255, 0.06); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mk .mk-ai-pt { color: var(--smoke); text-transform: uppercase; }
.mk-ai-trend { display: block; width: 100%; height: 160px; }
.mk-ai-gridl { stroke: rgba(255, 255, 255, 0.08); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mk-ai-base { stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mk-ai-area { fill: rgba(201, 164, 100, 0.14); }
.mk-ai-line { fill: none; stroke: var(--gold); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.mk-ai-dot { fill: var(--gold); }
.mk-ai-axis { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; letter-spacing: -0.03em; color: var(--smoke); margin-top: -2px; }
.mk-ai-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; height: 176px; align-items: end; }
.mk-ai-day { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; height: 100%; gap: 6px; }
.mk-ai-dbar { display: block; width: 100%; align-self: end; background: rgba(255, 255, 255, 0.22); border-radius: 6px 6px 0 0; order: 2; }
.mk-ai-day.is-hi .mk-ai-dbar { background: var(--gold); }
.mk-ai-dv { order: 1; align-self: end; font-family: var(--mono); font-size: 12px; color: var(--paper); }
.mk-ai-day.is-hi .mk-ai-dv { color: var(--gold); }
.mk-ai-dn { order: 3; font-family: var(--mono); font-size: 12px; color: var(--smoke); }
.mk-ai-funnel { display: grid; gap: 8px; }
.mk-ai-frow { display: grid; grid-template-columns: 108px minmax(0, 1fr) 44px; align-items: center; gap: 12px; font-family: var(--mono); font-size: 12px; letter-spacing: -0.03em; }
.mk-ai-fl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--smoke); }
.mk-ai-ft { display: block; height: 14px; }
.mk-ai-fb { display: block; height: 100%; min-width: 4px; background: rgba(255, 255, 255, 0.22); border-radius: 4px; }
.mk-ai-fb.is-last { background: var(--gold); }
.mk-ai-fv { text-align: right; color: var(--paper); }
.mk .mk-ai-fn { color: var(--smoke); }
.mk .mk-ai-fn b { color: var(--paper); font-weight: 500; }
.is-bad .mk-ai-fb { background: var(--gold); }
.is-bad .mk-ai-sl, .is-bad .mk-ai-fl, .is-bad .mk-ai-fv { color: var(--gold); }
.mk-ai-day.is-lo .mk-ai-dbar { background: rgba(255, 255, 255, 0.1); }
.mk-ai-day.is-lo .mk-ai-dv { color: var(--smoke); }
/* ad-set table: label + two bars (share of spend, share of orders) */
.mk-ai-sets { display: grid; gap: 8px; }
.mk-ai-shead, .mk-ai-set { display: grid; grid-template-columns: 124px 1fr 1fr 1fr; gap: 12px; align-items: center; font-family: var(--mono); font-size: 12px; letter-spacing: -0.03em; }
.mk-ai-shead { color: var(--smoke); text-transform: uppercase; font-size: 12px; }
.mk-ai-sl { color: var(--smoke); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-ai-sb { display: grid; grid-template-columns: 1fr 34px; gap: 8px; align-items: center; }
/* scenes: three boards stacked in one cell so the height never jumps; objects.js toggles .is-on */
.mk-ai-scenes { display: grid; }
/* scene handoff: the leaving scene clears fast, the arriving one settles slower through a blur so the two read as one morph, not a swap */
.mk-ai-scene { grid-area: 1 / 1; display: grid; grid-template-rows: auto 1fr; gap: 20px; opacity: 0; visibility: hidden; transform: translateY(8px); filter: blur(6px); transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), filter 240ms var(--ease-out), visibility 0s linear 240ms; }
.mk-ai-scene.is-on { opacity: 1; visibility: visible; transform: none; filter: none; transition: opacity 480ms var(--ease-out) 120ms, transform 480ms var(--ease-out) 120ms, filter 480ms var(--ease-out) 120ms, visibility 0s linear 0s; }
/* the three: what the AI wrote about that week. Big headers are the tabs; the line under the live one is the 10s timer */
.mk .mk-ai-three { margin: 0; padding: 0; display: grid; gap: 24px; align-content: start; }
.mk-ai-tabs { display: grid; gap: 28px; }
.mk-ai-item { display: grid; }
.mk .mk-ai-tab { appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; color: inherit; font: inherit; text-align: left; display: grid; gap: 2px; justify-items: start; width: 100%; }
.mk .mk-ai-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.mk .mk-ai-tab .mk-ai-tk { display: block; color: var(--smoke); text-transform: uppercase; transition: color 300ms var(--ease-out); }
.mk-ai-tt { display: block; font-family: var(--cond); font-size: 72px; line-height: 0.9; letter-spacing: -0.03em; text-transform: uppercase; color: rgba(255, 255, 255, 0.28); transition: color 300ms var(--ease-out); }
.mk .mk-ai-tab:hover .mk-ai-tt { color: var(--paper); }
.mk .mk-ai-tab.is-on .mk-ai-tt, .mk .mk-ai-tab.is-on .mk-ai-tk { color: var(--gold); }
.mk-ai-track { display: block; width: 100%; height: 3px; margin-top: 8px; background: rgba(255, 255, 255, 0.12); border-radius: 2px; overflow: hidden; }
.mk-ai-prog { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; }
.mk-ai-copy { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 400ms var(--ease-out); }
.mk-ai-copy:has(p.is-on) { grid-template-rows: 1fr; }
.mk .mk-ai-copy p { min-height: 0; overflow: hidden; margin: 0; padding-top: 0; color: var(--paper); opacity: 0; translate: 0 6px; transition: opacity 400ms var(--ease-out), translate 400ms var(--ease-out), padding-top 400ms var(--ease-out); }
.mk .mk-ai-copy p.is-on { opacity: 1; translate: 0 0; padding-top: 12px; }
.mk .mk-ai-tnote { grid-column: 1 / -1; color: var(--smoke); margin: 0; }
@media (max-width: 900px) {
  .mk .section { padding: 40px 0; }
  .mk .mk-triad { padding-top: 8px; }
  .mk .mk-label { margin: 16px 0 40px; }
  .mk .mk-how { padding: 64px 0; }
  .mk-ai { padding: 64px 0; margin-top: 0; }
  .mk-ai-grid { grid-template-columns: 1fr; gap: 24px; }
  .mk-ai-show { grid-template-columns: 1fr; gap: 40px; margin-top: 40px; }
  .mk-ai-board { padding: 16px; border-radius: 24px; gap: 12px; }
  .mk-ai-scene { gap: 12px; }
  .mk-ai-kpis { grid-template-columns: 1fr; }
  .mk-ai-kpi { grid-template-areas: "k k" "v s" "d d"; }
  .mk-ai-v { font-size: 36px; }
  .mk-ai-panels { grid-template-columns: 1fr; }
  .mk-ai-trend { height: 140px; }
  .mk-ai-days { height: 150px; }
  .mk-ai-frow { grid-template-columns: 104px 1fr 48px; gap: 8px; font-size: 12px; }
  .mk-ai-shead, .mk-ai-set { grid-template-columns: 1fr 1fr 1fr; gap: 4px 8px; font-size: 12px; }
  .mk-ai-shead span:first-child, .mk-ai-set .mk-ai-sl { grid-column: 1 / -1; }
  .mk-ai-shead span:first-child { display: none; }
  .mk-ai-set { padding-bottom: 4px; }
  .mk-ai-sb { grid-template-columns: 1fr 30px; gap: 6px; }
  .mk .mk-ai-three { order: -1; gap: 20px; }
  .mk-ai-tabs { gap: 20px; }
  .mk-ai-tt { font-size: 40px; }
}

/* -- our work (case showcase) -- the full-width navy block between the canvas triad and the white step cards (bar #2).
   One board, four beats. Same engine and walker as the boards above; the tabs are numbered like a case-study index.
   Beats reveal their result on the button's done-state (transform/opacity only, no layout shift). */
.mk-work { background: var(--navy); color: var(--paper); padding: 96px 0; margin-top: 48px; overflow: hidden; }
.mk-work-top { display: grid; grid-template-columns: minmax(0, 720px); justify-items: start; }
.mk .mk-work-h { margin-top: 24px; }
.mk .mk-work-p { color: var(--smoke); margin-top: 20px; max-width: 520px; }
.mk-case-show { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 56px; margin-top: 48px; }
.mk-case-show .mk-ai-board { position: sticky; top: 24px; }
.mk-case-show .mk-ai-scenes { min-height: 480px; }
.mk-case-show .mk-ai-tabs { gap: 22px; }
.mk .mk-case-show .mk-ai-tab { gap: 6px; }
.mk .mk-cs-k { display: flex; align-items: baseline; gap: 10px; font-family: var(--mono); font-size: 12px; line-height: 1.4; color: var(--smoke); }
.mk .mk-cs-k b { font-weight: 400; color: var(--gold); }
.mk .mk-case-show .mk-ai-tt { font-size: clamp(28px, 2.6vw, 36px); line-height: 1; margin-top: 2px; }
/* switch: two states stacked in one cell; the second shows once the beat's button is done */
.mk-cs-sw { display: inline-grid; vertical-align: top; }
.mk-cs-sw > * { grid-area: 1 / 1; transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); }
.mk-cs-sw > :last-child { opacity: 0; transform: translateY(4px); }
.mk-db-cv-p.mk-cs-sw, .mk-db-pr b.mk-cs-sw { display: grid; }
.mk-db-main:has(.mk-db-btn.is-done) .mk-cs-sw > :first-child { opacity: 0; transform: translateY(-4px); }
.mk-db-main:has(.mk-db-btn.is-done) .mk-cs-sw > :last-child { opacity: 1; transform: none; }
/* the shop page under the records: the new product card fills in */
.mk-cs-site { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--win); display: grid; }
.mk-cs-url { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--ink-3); background: var(--card); }
.mk-cs-url i { width: 8px; height: 8px; border-radius: 50%; background: var(--up); }
.mk-cs-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 12px; }
.mk-cs-card { display: grid; gap: 6px; font-size: 12px; font-weight: 500; color: var(--ink); min-width: 0; }
.mk-cs-card b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.mk-cs-card i { display: block; aspect-ratio: 4 / 3; border-radius: 8px; background: var(--tint); overflow: hidden; }
.mk-cs-card:nth-child(2) i { background: rgba(30, 38, 59, 0.12); }
.mk-cs-card:nth-child(3) i { background: rgba(30, 38, 59, 0.2); }
.mk-cs-ph { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
/* the published project's card: an empty dashed slot until the box is ticked; then the page reloads (a load line runs
   along the address bar) and the card arrives with its photo. Resetting snaps back with no transition. */
.mk-cs-site .mk-cs-url { position: relative; }
.mk-cs-site .mk-cs-url::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--at-blue, var(--navy)); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.mk-cs-card.is-new { opacity: 0.32; transform: translateY(4px); }
.mk-cs-card.is-new i { background: transparent; outline: 1.5px dashed var(--ink-3); outline-offset: -1.5px; }
.mk-cs-card.is-new .mk-cs-ph { opacity: 0; transform: scale(1.06); }
.mk-db-main:has(.mk-db-btn.is-done):not(.is-hold) .mk-cs-site .mk-cs-url::after, .mk-cs-site.is-pub .mk-cs-url::after, .mk-cs-site.is-go .mk-cs-url::after { transform: scaleX(1); opacity: 0; transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1) 80ms, opacity 240ms ease 820ms; }
.mk-db-main:has(.mk-db-btn.is-done) .mk-cs-card.is-new { opacity: 1; transform: none; transition: opacity 420ms var(--ease-out) 780ms, transform 420ms var(--ease-out) 780ms; }
.mk-db-main:has(.mk-db-btn.is-done) .mk-cs-card.is-new i { outline-color: transparent; transition: outline-color 200ms ease 780ms; }
.mk-db-main:has(.mk-db-btn.is-done) .mk-cs-card.is-new .mk-cs-ph { opacity: 1; transform: none; transition: opacity 520ms var(--ease-out) 840ms, transform 1100ms var(--ease-out) 840ms; }
/* inquiry: the site's form beside the records it lands in */
.mk-cs-two { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 14px; align-items: start; }
.mk-cs-form { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--win); display: grid; gap: 8px; padding: 0 10px 10px; }
.mk-cs-form .mk-cs-url { margin: 0 -10px 2px; }
.mk-cs-form .mk-db-tf { background: var(--card); padding: 7px 10px; }
.mk-cs-form .mk-db-tf b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-cs-form .mk-db-acts { padding-top: 2px; }
.mk-cs-rows .mk-db-tr { --tb: 1fr 1.2fr 1fr; }
.mk-cs-newrow { opacity: 0; transform: translateY(-6px); transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out); }
.mk-db-main:has(.mk-db-btn.is-done) .mk-cs-newrow { opacity: 1; transform: none; }
.mk-cs-form .mk-db-tf b { min-height: 1.3em; }
.mk-cs-form .mk-db-tf { transition: background-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.mk .mk-cs-form .mk-db-tf.is-live { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--gold); }
.mk-cs-form .mk-db-tf.is-live b::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 1px; vertical-align: -0.15em; background: var(--ink); animation: mk-caret 1s steps(1, end) infinite; }
.mk-cs-form .mk-db-tf.is-sent { box-shadow: inset 3px 0 0 var(--gold); }
.mk-cs-chip { position: absolute; left: 0; top: 0; z-index: 6; padding: 3px 9px; border-radius: 999px; background: var(--navy); color: var(--paper); font-size: 12px; font-weight: 600; line-height: 1.35; white-space: nowrap; pointer-events: none; will-change: transform; }
.mk-cs-newrow > span { transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); }
.mk-cs-newrow.is-fly > span:not(.is-in) { opacity: 0; transform: translateY(3px); }
.mk-cs-newrow.is-fly > span.is-in { animation: mk-land 900ms var(--ease-out); }
@keyframes mk-land { 0% { background: var(--gold-pale); } 100% { background: transparent; } }
/* rank: an eight-week line and the jump */
.mk-cs-rank { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px 10px; display: grid; gap: 8px; }
.mk-cs-jump { font-family: var(--mono); font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.mk-cs-jump b { color: var(--up); font-weight: 600; }
.mk-cs-svg { width: 100%; height: auto; display: block; }
.mk-cs-svg line { stroke: var(--line); stroke-width: 1; }
.mk-cs-svg polyline { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.mk-cs-svg circle { fill: var(--gold); }
.mk-cs-wk { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) {
  .mk-cs-sw > *, .mk-cs-card.is-new, .mk-cs-card.is-new i, .mk-cs-card.is-new .mk-cs-ph, .mk-cs-site .mk-cs-url::after, .mk-cs-newrow, .mk-cs-newrow > span, .mk-cs-form .mk-db-tf { transition: none !important; }
  .mk-cs-newrow.is-fly > span.is-in, .mk-cs-form .mk-db-tf.is-live b::after { animation: none; }
  .mk-case-show .mk-ai-board { position: static; }
  .mk-ai-scene, .mk .mk-ai-copy, .mk .mk-ai-copy p, .mk-ai-tt { transition: none; filter: none; }
}
@media (max-width: 900px) {
  .mk-work { padding: 64px 0; margin-top: 24px; }
  .mk .mk-work-p { margin-top: 16px; }
  .mk-case-show { grid-template-columns: 1fr; gap: 28px; margin-top: 32px; }
  .mk-case-show .mk-ai-board { position: static; }
  .mk-case-show .mk-ai-scenes { min-height: 0; position: relative; }
  .mk-case-show .mk-ai-scene:not(.is-on) { position: absolute; inset: 0; overflow: hidden; }
  .mk-case-show .mk-ai-tabs { gap: 18px; }
  .mk .mk-case-show .mk-ai-tt { font-size: 28px; }
  .mk-cs-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 10px; }
  .mk-cs-card b { font-size: 12px; }
  .mk-cs-two { grid-template-columns: 1fr; }
}

/* ── founding five ── */
.mk .mk-founding { padding-top: 96px; }
.mk-founding-head { display: flex; flex-direction: column; gap: 24px; margin-bottom: 40px; }
.mk-founding-head .mk-founding-sub { color: var(--slate); max-width: 440px; }
.mk .mk-offer { padding: 32px; }
.mk .mk-offer-grid { list-style: none; margin: 0; padding: 0; column-gap: 88px; }
.mk-offer-grid li { display: flex; flex-direction: column; gap: 16px; }
.mk .mk-offer-k { color: var(--slate); text-transform: uppercase; font-weight: 500; margin: 0; }
.mk-offer-grid .t-body { max-width: none; }
/* cols 2-3 wrap to two lines so the row bottom is flat against col 1 (verbatim copy, so measure not words) */
.mk-offer-foot { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 88px; align-items: end; margin-top: 40px; }
.mk-offer-foot .mk-quote { grid-column: 1 / 3; }
.mk .mk-quote { margin: 0; }
.mk .mk-offer-cta { grid-column: 3; justify-self: start; min-height: 56px; padding: 0 28px; font-size: 16px; }

/* ── footer ── */
.mk-footer { background: var(--navy); color: var(--paper); margin-top: 48px; padding: 96px 0 93px; }
.mk-footer-grid { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; }
.mk .mk-footer-h { margin-top: 0; }
.mk-footer-logo { display: block; height: 56px; width: auto; margin-bottom: 40px; }
.mk .mk-footer-cta { margin-top: 32px; }
.mk-footer-contact { font-style: normal; display: flex; flex-direction: column; align-items: flex-end; gap: 0; text-align: right; }
/* text sits at the bottom of each 48px hit box so the last link's baseline lands on the wordmark's */
.mk .mk-footer-line { display: inline-flex; align-items: flex-end; gap: 8px; min-height: 48px; font-size: 16px; font-weight: 500; color: var(--paper); }
.mk .mk-footer-line:hover { text-decoration: underline; text-underline-offset: 6px; }
/* .mk .wrap sets margin:0 auto, so the seat needs the same specificity */
.mk .mk-footer-bottom { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 56px auto 0; color: var(--smoke); }
.mk .mk-footer-tagline { font-size: 16px; color: var(--smoke); }
@media (max-width: 900px) {
  .mk .mk-founding { padding-top: 64px; }
  .mk-founding-head { gap: 16px; margin-bottom: 24px; }
  /* one display size on mobile too: H2, offer numerals and footer wordmark all 56px */
  .mk .t-display-md { font-size: 56px; }
  .mk .mk-offer { padding: 24px; }
  .mk .mk-offer-grid { gap: 40px; }
  .mk-offer-foot { grid-template-columns: 1fr; row-gap: 24px; margin-top: 32px; }
  .mk-offer-foot .mk-quote, .mk .mk-offer-cta { grid-column: auto; }
  .mk .mk-quote br { display: none; }
  .mk .mk-offer-cta { justify-self: stretch; }
  .mk-footer { margin-top: 24px; padding: 64px 0; }
  .mk .mk-footer-cta { align-self: stretch; width: 100%; }
  .mk-footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .mk-footer-contact { align-items: flex-start; text-align: left; }
  .mk .mk-footer-line { align-items: center; }
  .mk .mk-footer-bottom { flex-direction: column; gap: 8px; margin-top: 48px; }
}

/* inner pages (privacy, terms, ...) */
.mk .mk-page { padding: 140px 0 96px; }
.mk .mk-page-h { margin: 0 0 32px; }
.mk .mk-prose { max-width: 720px; font: 400 17px/1.6 Inter, system-ui, sans-serif; }
.mk .mk-prose h2 { font: 400 28px/1.1 Anton, Impact, sans-serif; text-transform: uppercase; letter-spacing: .01em; margin: 40px 0 12px; }
.mk .mk-prose p, .mk .mk-prose li { margin: 0 0 16px; }
.mk .mk-prose a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

/* booking: the calendar takes the card's seat, the three steps sit under it */
.mk .mk-offer-after { margin-top: 40px; }
.mk .mk-offer-after .link { color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.mk .wp-block-shortcode { margin: 0; }
@media (max-width: 900px) { .mk .mk-offer-after { margin-top: 32px; } }

/* ── what we do · the same showcase, on the canvas ─────────────────────────
   Board on a navy block so every .mk-ai-* piece keeps its colours; the tabs sit on the canvas in navy.
   Gold stays on the progress bar only (gold on canvas is ~1.9:1). ── */
.mk-what-show { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 64px; margin-top: 0; }
/* the board is sized to the tab column: three one-line titles plus the open copy come to about the same height, so the two sit level */
.mk-what-show .mk-ai-board { background: var(--navy); color: var(--paper); position: sticky; top: 24px; }
.mk-what-show .mk-ai-scenes { min-height: 456px; }
.mk-what-show .mk-ai-tabs { gap: 26px; }
.mk-what-show .mk-ai-tt { font-size: clamp(30px, 3vw, 38px); line-height: 1; color: rgba(30, 38, 59, 0.38); }
.mk .mk-what-show .mk-ai-tab:hover .mk-ai-tt, .mk .mk-what-show .mk-ai-tab.is-on .mk-ai-tt { color: var(--navy); }
.mk-what-show .mk-ai-track { margin-top: 10px; background: rgba(30, 38, 59, 0.12); }
.mk .mk-what-show .mk-ai-copy p { color: var(--slate); }
/* a scene that is only panels spans both rows, so the panels fill the board instead of floating over empty navy */
.mk-what-show .mk-ai-scene > :only-child { grid-row: 1 / -1; }
/* inside a panel the diagram takes the height the tallest scene set, and spreads its rows across it */
.mk-what-show .mk-ai-panel > .mk-ai-funnel, .mk-what-show .mk-ai-panel > .mk-do-list, .mk-what-show .mk-ai-panel > .mk-do-flow, .mk-what-show .mk-ai-panel > .mk-do-brief, .mk-what-show .mk-ai-panel > .mk-do-queue, .mk-what-show .mk-ai-panel > .mk-do-type { flex: 1 1 auto; align-content: space-evenly; }
.mk-what-show .mk-ai-panel { padding: 18px; gap: 14px; }
.mk-what-show .mk-ai-pt { font-size: 13px; }
.mk-what-show .mk-ai-frow { font-size: 14px; grid-template-columns: 104px minmax(0, 1fr) 40px; }
.mk-what-show .mk-ai-ft { height: 22px; }
.mk-what-show .mk-ai-fb { border-radius: 6px; }
/* board pieces for the three scenes: page editor, lists, flow, brief, swatches, type, queue. Nothing under 12px. */
.mk-do-page { flex: 1 1 auto; display: grid; grid-template-rows: auto 1fr auto; gap: 8px; }
.mk-do-block { display: grid; gap: 8px; padding: 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); align-content: start; }
.mk-do-block.is-on { background: rgba(201, 164, 100, 0.16); outline: 2px solid var(--gold); outline-offset: -2px; }
.mk-do-bk { font-size: 12px; color: var(--smoke); text-transform: uppercase; letter-spacing: 0.06em; }
.mk-do-block.is-on .mk-do-bk { color: var(--gold); }
.mk-do-bh { font-family: var(--cond); font-size: 32px; line-height: 1; text-transform: uppercase; letter-spacing: -0.02em; }
.mk-do-bl { display: block; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.22); }
.mk-do-bl.w-80 { width: 80%; } .mk-do-bl.w-55 { width: 55%; }
.mk-do-phs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mk-do-ph { display: block; aspect-ratio: 4 / 3; border-radius: 6px; background: rgba(255, 255, 255, 0.14); }
.mk-do-list { display: grid; gap: 10px; }
.mk-do-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: 16px; }
.mk-do-rl { color: var(--paper); }
.mk-do-rv { font-family: var(--mono); font-size: 13px; color: var(--smoke); text-align: right; white-space: nowrap; }
.mk-do-rv.is-ok { color: var(--gold); }
.mk-do-flow { display: grid; gap: 12px; }
.mk-do-frow { display: grid; grid-template-columns: 1fr 24px 1fr; gap: 12px; align-items: center; }
.mk-do-fs { padding: 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); font-size: 16px; }
.mk-do-fa { font-family: var(--mono); font-size: 16px; color: var(--gold); text-align: center; }
.mk-do-fd { display: grid; gap: 4px; padding: 12px 14px; border-radius: 10px; background: rgba(201, 164, 100, 0.16); font-family: var(--cond); font-size: 24px; line-height: 1; text-transform: uppercase; letter-spacing: -0.01em; }
.mk-do-sub { font-family: var(--mono); font-size: 12px; line-height: 1.3; text-transform: none; letter-spacing: 0; color: var(--smoke); }
.mk-do-brief { display: grid; gap: 14px; }
.mk-do-item { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
.mk-do-n { font-family: var(--mono); font-size: 13px; color: var(--gold); padding-top: 4px; }
.mk .mk-do-it { margin: 0; font-size: 16px; line-height: 1.45; color: var(--smoke); }
.mk .mk-do-it b { color: var(--paper); font-weight: 500; }
.mk-do-you .mk-ai-fl, .mk-do-you .mk-ai-fv { color: var(--gold); }
.mk-do-you .mk-ai-fb { background: var(--gold); }
.mk-do-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mk-do-sw { display: grid; gap: 6px; font-family: var(--mono); font-size: 12px; color: var(--smoke); }
.mk-do-sw i { display: block; aspect-ratio: 1; border-radius: 10px; }
.mk-do-type { display: grid; gap: 10px; }
.mk-do-tr { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; }
.mk-do-aa { display: grid; place-items: center; height: 52px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); font-size: 26px; line-height: 1; }
.mk-do-aa.is-cond { font-family: var(--cond); } .mk-do-aa.is-body { font-family: var(--body); font-weight: 500; }
.mk-do-tn { font-size: 15px; }
.mk-do-queue { display: grid; gap: 10px; }
.mk-do-q { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "t a e" "s a e"; column-gap: 8px; row-gap: 3px; align-items: center; padding: 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); }
.mk-do-qt { grid-area: t; font-size: 16px; }
.mk-do-qs { grid-area: s; font-family: var(--mono); font-size: 12px; color: var(--smoke); }
.mk-do-qa, .mk-do-qe { font-family: var(--mono); font-size: 12px; padding: 7px 12px; border-radius: 999px; }
.mk-do-qa { grid-area: a; background: var(--gold); color: var(--navy); }
.mk-do-qe { grid-area: e; background: rgba(255, 255, 255, 0.1); color: var(--paper); }
@media (max-width: 900px) {
  .mk-what-show { grid-template-columns: 1fr; gap: 32px; margin-top: 0; }
  .mk-what-show .mk-ai-board { position: static; }
  /* the board is as tall as the open scene, not the tallest of six: parked scenes leave the flow */
  .mk-what-show .mk-ai-scenes { min-height: 0; position: relative; }
  .mk-what-show .mk-ai-scene:not(.is-on) { position: absolute; inset: 0; overflow: hidden; }
  /* board first on a phone: the change is on screen when a title is tapped */
  .mk .mk-what-show .mk-ai-three { order: 0; }
  .mk-what-show .mk-ai-tabs { gap: 22px; }
  .mk-what-show .mk-ai-tt { font-size: 32px; }
  .mk-what-show .mk-ai-panel { padding: 14px; }
  .mk-what-show .mk-ai-frow { grid-template-columns: 88px minmax(0, 1fr) 36px; }
  .mk-do-frow { grid-template-columns: 1fr 20px 1fr; gap: 8px; }
  .mk-do-fs { font-size: 14px; padding: 12px; }
  .mk-do-fd { font-size: 19px; }
  .mk-do-qa, .mk-do-qe { padding: 6px 9px; }
  .mk-do-bh { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .mk-what-show .mk-ai-board { position: static; } }
/* -- the dashboard, drawn as the product: a light app window on the navy block, the way a real screenshot would look.
   Title bar, sidebar, chat-first analysis with metric links, real charts, a key-metrics table, a composer.
   Fills and 10% hairlines only (no shadows), brand ink, gold for the live series, green/red only where a number moved. Nothing under 12px. */
.mk .mk-db { --ink: var(--navy); --ink-2: #5b6478; --ink-3: #8a91a3; --line: rgba(30, 38, 59, 0.1); --win: #f4f4f6; --card: var(--paper); --tint: rgba(201, 164, 100, 0.14); --up: #2e7d5b; --down: #b8503f;
  background: var(--card); color: var(--ink); border-radius: 20px; padding: 0; gap: 0; overflow: hidden; grid-template-columns: minmax(0, 1fr); font-family: var(--body); font-size: 13px; line-height: 1.45; letter-spacing: 0; }
.mk .mk-db b { font-weight: 600; }
.mk .mk-db .mk-ai-scene { padding: 0; gap: 0; grid-template-columns: 184px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
/* title bar */
.mk-db-top { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--card); }
.mk-db-tl { display: inline-flex; gap: 6px; }
.mk-db-tl i { width: 11px; height: 11px; border-radius: 50%; background: var(--win); box-shadow: inset 0 0 0 1px var(--line); }
.mk-db-nav { display: inline-flex; gap: 10px; color: var(--ink-3); font-size: 18px; line-height: 1; margin-left: 4px; }
.mk-db-doc { margin-left: 6px; font-weight: 600; font-size: 13px; }
.mk-db-caret { color: var(--ink-3); font-size: 12px; }
.mk .mk-db-sample { margin-left: auto; background: var(--gold); color: var(--navy); border-radius: 64px; padding: 4px 10px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; }
/* sidebar */
.mk-db-side { background: var(--win); border-right: 1px solid var(--line); padding: 14px 12px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mk-db-ws { display: flex; align-items: center; gap: 8px; padding: 2px 4px; }
.mk-db-logo { height: 12px; width: auto; display: block; flex: none; }
.mk-db-ws div { display: grid; line-height: 1.2; min-width: 0; flex: 1; overflow: hidden; }
.mk-db-ws b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-db-ws span { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-db-ws .mk-db-caret { display: none; }
.mk-db-sq { display: flex; justify-content: space-between; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; color: var(--ink-3); font-size: 12px; }
.mk-db-sq span { font-family: var(--mono); font-size: 12px; }
.mk-db-sn { display: grid; gap: 2px; }
.mk-db-si { padding: 6px 10px; border-radius: 8px; color: var(--ink-2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out); }
.mk-db-si.is-on { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); }
.mk-db-sh { font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 10px 0; }
.mk-db-sn2 .mk-db-si { font-size: 12px; padding: 4px 10px; }
/* main column: a chat about the numbers */
.mk-db-main { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 16px 20px 16px; min-width: 0; background: var(--card); }
.mk-db-crumb { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--ink-3); }
.mk-db-crumb span:last-child { color: var(--ink); font-weight: 600; }
.mk-db-cs { color: var(--line); font-weight: 400 !important; }
.mk-db-q { align-self: flex-end; max-width: 78%; background: var(--win); border-radius: 16px 16px 4px 16px; padding: 9px 14px; font-size: 13px; }
.mk-db-rs { font-size: 12px; color: var(--ink-3); margin-bottom: -6px; }
.mk-db-rs span { font-size: 14px; line-height: 1; }
.mk .mk-db-ans { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); max-width: none; }
.mk .mk-db-ans b { color: var(--ink); }
.mk-db-mc { display: inline-flex; align-items: center; gap: 4px; background: var(--tint); color: var(--ink); border-radius: 6px; padding: 1px 6px 1px 5px; font-size: 12.5px; font-weight: 500; line-height: 1.4; white-space: nowrap; vertical-align: baseline; }
.mk-db-mc svg { width: 10px; height: 10px; fill: var(--gold); flex: none; }
.mk .mk-db-finds { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mk .mk-db-finds li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; align-items: start; }
.mk-db-fn { font-family: var(--mono); font-size: 12px; color: var(--gold); padding-top: 3px; }
.mk .mk-db-finds li > div > b { display: block; font-size: 13.5px; color: var(--ink); }
.mk .mk-db-finds p b { color: var(--ink); }
.mk .mk-db-finds p { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
/* cards */
.mk-db-card { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px 14px; display: grid; gap: 10px; min-width: 0; }
.mk-db-ch { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.mk-db-ch > div { display: grid; line-height: 1.3; }
.mk-db-ch b { font-size: 13px; }
.mk-db-ch span { font-size: 12px; color: var(--ink-3); }
.mk-db-lg { display: flex; gap: 12px; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.mk-db-lg span { display: inline-flex; align-items: center; gap: 5px; }
.mk-db-lg i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.mk-db-lg i.c2 { background: var(--ink-3); }
/* the chart: lines and grid in a percent-space svg, markers and pills in html so nothing scales down on a phone */
.mk-db-plot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.mk-db-yl { display: flex; flex-direction: column; justify-content: space-between; font-size: 12px; color: var(--ink-3); text-align: right; padding: 3px 0 4px; font-variant-numeric: tabular-nums; }
.mk-db-area { position: relative; aspect-ratio: 3 / 1; min-width: 0; }
.mk-db-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.mk-db-svg * { vector-effect: non-scaling-stroke; }
.mk-db-gv { stroke: var(--line); stroke-width: 1; stroke-dasharray: 1 3; }
.mk-db-gh { stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 4; }
.mk-db-fill { fill: rgba(201, 164, 100, 0.12); }
.mk-db-ln { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mk-db-ln.c2 { stroke: var(--ink-3); stroke-width: 1.5; }
.mk-db-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--card); border: 2px solid var(--gold); translate: -50% -50%; box-sizing: border-box; }
.mk-db-dot.c2 { border-color: var(--ink-3); }
.mk-db-dot.is-end { background: var(--gold); }
.mk-db-dot.c2.is-end { background: var(--ink-3); }
.mk-db-pill { position: absolute; translate: -50% calc(-100% - 8px); background: var(--navy); color: var(--paper); border-radius: 6px; padding: 2px 7px; font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 1.4; white-space: nowrap; }
.mk-db-pill.is-first { translate: 0 calc(-100% - 8px); }
.mk-db-pill.is-last { translate: -100% calc(-100% - 8px); }
.mk-db-pill.is-below { translate: -100% 8px; }
.mk-db-pill.c2 { background: var(--win); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.mk-db-xl { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); padding-left: 38px; font-variant-numeric: tabular-nums; }
.mk-db-xl span { flex: 1; text-align: center; }
.mk-db-xl span:first-child { text-align: left; }
.mk-db-xl span:last-child { text-align: right; }
/* tables: key metrics and lists */
.mk-db-tr { display: grid; grid-template-columns: var(--tb, 1.4fr 1fr 1fr); gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; min-width: 0; }
.mk-db-tr > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-db-th { border-top: 0; padding: 0 0 4px; font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.mk-db-kmt .mk-db-th { margin-top: -2px; }
.mk-db-tr:last-child { padding-bottom: 2px; }
.mk-db-tr.is-good { background: var(--tint); margin: 0 -14px; padding-left: 14px; padding-right: 14px; border-radius: 0; }
.mk-db-tr .mk-db-mc { justify-self: start; }
.mk-db-v { font-family: var(--mono); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.mk-db-d { font-family: var(--mono); font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mk-db-d.is-up { color: var(--up); }
.mk-db-d.is-down { color: var(--down); }
.mk-db-tag { display: inline-block; border-radius: 6px; padding: 2px 8px; font-size: 12px; line-height: 1.4; font-weight: 500; background: var(--win); color: var(--ink-2); }
.mk-db-tag.is-ok { background: rgba(46, 125, 91, 0.12); color: var(--up); }
.mk-db-tag.is-gold { background: var(--tint); color: var(--ink); }
.mk-db-tag.is-green { background: rgba(46, 125, 91, 0.12); color: var(--up); }
.mk-db-tag.is-blue { background: rgba(30, 38, 59, 0.08); color: var(--ink); }
.mk-db-tags { display: flex; flex-wrap: wrap; gap: 6px; }
/* the tinted key-metrics card */
.mk-db-kmc { background: var(--tint); border-radius: 14px; padding: 16px 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
.mk-db-kc { display: grid; gap: 2px; justify-items: center; min-width: 0; }
.mk-db-kc b { font-family: var(--cond); font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: 0.01em; }
.mk-db-kc em { font-style: normal; font-size: 12px; color: var(--ink-2); }
/* funnel bars */
.mk-db-bars { display: grid; gap: 8px; }
.mk-db-br { display: grid; grid-template-columns: 118px minmax(0, 1fr) 48px; gap: 10px; align-items: center; font-size: 13px; }
.mk-db-bl { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-db-bt { display: block; height: 14px; background: var(--win); border-radius: 4px; overflow: hidden; }
.mk-db-bt i { display: block; height: 100%; background: var(--gold); border-radius: 4px; }
.mk-db-bt i.c2 { background: var(--ink-3); }
.mk-db-br b { font-family: var(--mono); font-weight: 500; text-align: right; font-size: 13px; }
/* actions, composer */
.mk-db-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-db-btn { display: inline-block; border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 500; line-height: 1.3; white-space: nowrap; border: 1px solid var(--line); color: var(--ink); }
.mk-db-btn.is-navy { background: var(--navy); color: var(--paper); border-color: var(--navy); }
.mk-db-comp { margin-top: auto; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px 10px 14px; display: grid; gap: 10px; }
.mk-db-cq { font-size: 13px; color: var(--ink-3); }
.mk-db-cr { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mk-db-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: 12px; color: var(--ink-2); }
.mk-db-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--ink-3); box-sizing: border-box; }
.mk-db-send { width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: var(--paper); display: inline-grid; place-items: center; font-size: 15px; line-height: 1; }
/* the site editor: a page canvas with the hero selected, and its properties */
.mk-db-canvas { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--canvas); display: grid; }
.mk-db-cv-top { background: var(--card); border-bottom: 1px solid var(--line); padding: 8px 12px; font-size: 12px; color: var(--ink-3); }
.mk-db-cv-hero { position: relative; margin: 10px; padding: 18px 16px 16px; background: var(--navy); color: var(--paper); border-radius: 8px; display: grid; gap: 4px; justify-items: start; }
.mk-db-cv-hero.is-sel { outline: 2px solid var(--gold); outline-offset: 2px; }
.mk-db-cv-h { font-family: var(--cond); font-size: 28px; line-height: 1; text-transform: uppercase; }
.mk-db-cv-p { font-size: 12px; color: var(--smoke); }
.mk-db-cv-btn { margin-top: 8px; background: var(--gold); color: var(--navy); border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 600; }
.mk-db-hd { position: absolute; width: 8px; height: 8px; background: var(--card); border: 2px solid var(--gold); box-sizing: border-box; }
.mk-db-hd.h1 { top: -5px; left: -5px; } .mk-db-hd.h2 { top: -5px; right: -5px; } .mk-db-hd.h3 { bottom: -5px; left: -5px; } .mk-db-hd.h4 { bottom: -5px; right: -5px; }
.mk-db-cv-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 10px 10px; }
.mk-db-cv-row span { height: 34px; background: var(--card); border-radius: 6px; }
.mk-db-props { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 6px; }
.mk-db-pr { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; font-size: 13px; border-top: 1px solid var(--line); padding-top: 6px; }
.mk-db-pr span { color: var(--ink-3); }
.mk-db-pr b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* brand kit */
.mk-db-sws { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mk-db-sw { display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
.mk-db-sw i { display: block; height: 48px; border-radius: 8px; margin-bottom: 6px; }
.mk-db-sw b { font-size: 13px; }
.mk-db-sw span { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.mk-db-type { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mk-db-tf { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.mk-db-tf div { display: grid; line-height: 1.3; }
.mk-db-tf b { font-size: 13px; }
.mk-db-tf span { font-size: 12px; color: var(--ink-3); }
.mk-db-aa { font-size: 26px; line-height: 1; width: 44px; height: 44px; display: grid; place-items: center; background: var(--win); border-radius: 10px; }
.mk-db-aa.is-cond { font-family: var(--cond); font-size: 30px; }
/* approvals */
.mk-db-queue { display: grid; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.mk-db-qi { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); }
.mk-db-qi:first-child { border-top: 0; }
.mk-db-qi > div { display: grid; line-height: 1.3; min-width: 0; }
.mk-db-qi b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-db-qi span:not(.mk-db-btn) { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-db-qi .mk-db-btn { padding: 5px 12px; font-size: 12px; }
.mk .mk-db-draft { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
/* both showcases share the window */
.mk-what-show .mk-ai-scenes, .mk-ai-show .mk-ai-scenes { min-height: 0; }
/* the cursor: a named pointer that works the board the way a person would, and the chart scrubber it drives.
   On a desktop the real pointer takes the scrubber over. Transform and opacity only. */
.mk .mk-db .mk-ai-scenes { position: relative; }
.mk-db-cur { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; opacity: 0; will-change: transform; transition: opacity 240ms var(--ease-out); }
.mk-db-cur.is-on { opacity: 1; }
.mk-db-cur svg { display: block; width: 20px; height: 20px; fill: var(--navy); stroke: var(--paper); stroke-width: 1.5; stroke-linejoin: round; transform-origin: 5px 3px; transition: transform 140ms var(--ease-out); }
.mk-db-cur.is-press svg { transform: scale(0.86); }
.mk-db-cur span { position: absolute; left: 15px; top: 17px; background: var(--navy); color: var(--paper); font-size: 12px; font-weight: 600; line-height: 1.4; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.mk-db-cur.is-left span { left: auto; right: 2px; top: 21px; }
.mk-db-cur.is-lift span { top: auto; bottom: 20px; }
.mk-db-scrub { position: absolute; left: 0; top: 0; bottom: 0; width: 0; pointer-events: none; opacity: 0; will-change: transform; transition: opacity 200ms var(--ease-out); }
.mk-db-scrub.is-on { opacity: 1; }
.mk-db-sl { position: absolute; top: 0; bottom: 0; left: -0.5px; width: 1px; background: var(--navy); opacity: 0.45; }
.mk-db-sd { position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--card); translate: -50% -50%; will-change: transform; }
.mk-db-sd.c2 { background: var(--ink-3); }
.mk-db-tip { position: absolute; left: 0; top: 0; translate: 0 -50%; background: var(--navy); color: var(--paper); border-radius: 8px; padding: 6px 9px; display: grid; gap: 2px; font-size: 12px; line-height: 1.4; white-space: nowrap; will-change: transform; }
.mk-db-tip b { font-weight: 600; }
.mk-db-tip span { display: flex; align-items: center; gap: 6px; }
.mk-db-tip span i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: none; }
.mk-db-tip span.c2 i { background: var(--ink-3); }
.mk-db-tip em { font-style: normal; font-family: var(--mono); font-weight: 500; margin-left: auto; padding-left: 10px; }
.mk-db-pill { transition: opacity 200ms var(--ease-out); }
.mk-db-area.is-scrub .mk-db-pill { opacity: 0; }
/* what the cursor touches answers it, and answers the real pointer the same way */
.mk-db-tr, .mk-db-qi, .mk-db-pr, .mk-db-sw, .mk-db-tf { transition: background-color 200ms var(--ease-out); }
.mk-db-tr.is-hov:not(.mk-db-th) { background: var(--tint); margin: 0 -14px; padding-left: 14px; padding-right: 14px; border-radius: 0; }
.mk-db-qi.is-hov, .mk-db-sw.is-hov, .mk-db-tf.is-hov { background: var(--tint); }
.mk .mk-db-finds li.is-hov, .mk .mk-db-finds li.is-pick, .mk-db-kc.is-hov, .mk-db-kc.is-pick { background: var(--tint); border-radius: 8px; margin: -4px -8px; padding: 4px 8px; }
.mk .mk-db-finds li.is-pick, .mk-db-kc.is-pick { box-shadow: inset 3px 0 0 var(--gold); }
.mk-db-lg span.is-hov, .mk-db-lg span.is-pick { background: var(--tint); border-radius: 6px; margin: -3px -6px; padding: 3px 6px; }
.mk-db-lg span.is-pick { box-shadow: inset 3px 0 0 var(--gold); }
.mk-db-btn.is-busy, .mk-db-btn.is-navy.is-busy { opacity: 0.72; }
.mk-db-pr.is-hov { background: var(--tint); margin: 0 -14px; padding-left: 14px; padding-right: 14px; }
.mk-db-btn, .mk-db-send { transition: transform 160ms var(--ease-out), background-color 200ms var(--ease-out); }
.mk-db-btn.is-hov { background: var(--tint); }
.mk-db-btn.is-navy.is-hov, .mk-db-send.is-hov { background: #2c3752; }
.mk-db-btn.is-press, .mk-db-send.is-press { transform: scale(0.96); }
/* what a click leaves behind: a chosen row, a button that reports what it did, a confirmation strip, a question being typed */
.mk-db-si.is-hov:not(.is-on) { background: var(--tint); color: var(--ink); }
.mk-db-tr.is-pick:not(.mk-db-th), .mk-db-pr.is-pick { background: var(--tint); margin: 0 -14px; padding-left: 14px; padding-right: 14px; border-radius: 0; box-shadow: inset 3px 0 0 var(--gold); }
.mk-db-qi.is-pick, .mk-db-sw.is-pick, .mk-db-tf.is-pick { background: var(--tint); box-shadow: inset 3px 0 0 var(--gold); }
.mk-db-br.is-pick { box-shadow: inset 3px 0 0 var(--gold); padding-left: 10px; margin-left: -10px; }
.mk-db-btn.is-done, .mk-db-btn.is-navy.is-done, .mk-db-send.is-done { background: var(--gold); color: var(--navy); }
.mk-db-toast { position: absolute; left: 20px; right: 20px; bottom: 14px; z-index: 5; display: flex; align-items: center; gap: 10px; background: var(--navy); color: var(--paper); border-radius: 12px; padding: 10px 14px; font-size: 13px; line-height: 1.35; opacity: 0; transform: translateY(10px); transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); pointer-events: none; will-change: transform; }
.mk-db-toast.is-on { opacity: 1; transform: none; }
.mk-db-toast i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.mk-db-toast span { min-width: 0; }
.mk-db-toast em { margin-left: auto; flex: none; font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--gold); }
.mk-db-think { display: inline-flex; align-items: center; gap: 4px; height: 1.35em; vertical-align: top; }
.mk-db-think i { width: 5px; height: 5px; border-radius: 50%; background: var(--paper); opacity: 0.3; animation: mk-think 900ms var(--ease-out) infinite; }
.mk-db-think i:nth-child(2) { animation-delay: 150ms; }
.mk-db-think i:nth-child(3) { animation-delay: 300ms; }
@keyframes mk-think { 35% { opacity: 1; } }
.mk-db-cq { transition: color 200ms var(--ease-out); }
.mk-db-cq.is-live { color: var(--ink); }
.mk-db-cq.is-live::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 1px; vertical-align: -0.15em; background: var(--ink); animation: mk-caret 1s steps(1, end) infinite; }
@keyframes mk-caret { 50% { opacity: 0; } }
@media (hover: hover) and (pointer: fine) {
  .mk-db-tr:not(.mk-db-th):hover { background: var(--tint); margin: 0 -14px; padding-left: 14px; padding-right: 14px; border-radius: 0; }
  .mk-db-qi:hover, .mk-db-sw:hover, .mk-db-tf:hover { background: var(--tint); }
  .mk-db-btn:hover { background: var(--tint); }
  .mk-db-si:not(.is-on):hover { background: var(--tint); color: var(--ink); }
  .mk-db-si, .mk-db-btn, .mk-db-send, .mk-db-sw { cursor: pointer; }
  .mk-db-btn.is-navy:hover, .mk-db-send:hover { background: #2c3752; }
  .mk-db-btn:active, .mk-db-send:active { transform: scale(0.96); }
  .mk-db-area { cursor: crosshair; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-db-cur { display: none; }
  .mk-db-scrub, .mk-db-pill, .mk-db-btn, .mk-db-send, .mk-db-tr, .mk-db-qi, .mk-db-pr, .mk-db-sw, .mk-db-tf, .mk-db-si, .mk-db-toast, .mk-db-cq { transition: none; }
  .mk-db-cq.is-live::after { animation: none; }
  .mk-db-think i { animation: none; opacity: 0.7; }
}
@media (max-width: 900px) {
  .mk .mk-db { border-radius: 16px; padding: 0; gap: 0; font-size: 13px; }
  .mk .mk-db .mk-ai-scene { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 0; }
  .mk-db-top { padding: 9px 12px; gap: 8px; }
  .mk-db-nav { display: none; }
  .mk-db-doc { margin-left: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* the sidebar becomes one row: workspace, then the active window of four items */
  .mk-db-side { border-right: 0; border-bottom: 1px solid var(--line); padding: 8px 10px; gap: 8px; }
  .mk-db-ws { padding: 0 2px; }
  .mk-db-ws span, .mk-db-sq, .mk-db-sh, .mk-db-sn2 { display: none; }
  .mk-db-sn { display: flex; gap: 4px; }
  .mk-db-si { display: none; padding: 5px 10px; flex: 1; text-align: center; font-size: 12px; }
  .mk-db-si.is-m { display: block; }
  .mk-db-main { padding: 14px 14px 14px; gap: 12px; }
  .mk-db-toast { left: 10px; right: 10px; bottom: 10px; padding: 9px 12px; }
  .mk-db-toast em { display: none; }
  .mk-db-q { max-width: 92%; }
  .mk-db-area { aspect-ratio: 16 / 9; }
  .mk-db-xl span:nth-child(even) { visibility: hidden; }
  .mk-db-tr { gap: 8px; }
  .mk-db-tr.is-good { margin: 0 -14px; }
  .mk-db-kmc { padding: 14px 8px; gap: 6px; }
  .mk-db-kc b { font-size: 24px; }
  .mk-db-br { grid-template-columns: 96px minmax(0, 1fr) 44px; }
  .mk-db-sws { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-db-sw i { height: 36px; }
  .mk-db-type { grid-template-columns: 1fr; }
  .mk-db-qi { grid-template-columns: minmax(0, 1fr) auto; }
  .mk-db-qi .mk-db-btn.is-ghost { display: none; }
  .mk-db-cv-h { font-size: 24px; }
}

/* -- transitions between the parts. objects.js tags each part below the hero .mk-rv and flips .is-in once it scrolls into view;
   without JS nothing is hidden. Transform and opacity only, staggered by --rv-i: a group counts off its
   own items, a section counts off its solo parts, so the page arrives in order rather than in one frame.
   24px of travel rather than a nudge, because at 14px the arrival was there in the code and not on the screen. */
.mk .section, .mk .mk-work, .mk .mk-ai { scroll-margin-top: 24px; }
.mk.has-rv .mk-rv { opacity: 0; translate: 0 24px; transition: opacity 700ms var(--ease-out), translate 700ms var(--ease-out); transition-delay: calc(var(--rv-i, 0) * 70ms); }
.mk.has-rv .mk-rv.is-in { opacity: 1; translate: none; }
@media (prefers-reduced-motion: reduce) {
  .mk.has-rv .mk-rv { opacity: 1; translate: none; transition: none; }
}

/* -- Company X scenes drawn as the records app itself: base bar, table tabs, view toolbar, a real grid.
   The depicted app is content, so it carries a records-app palette (pastel select pills, blue selection, green checks). */
.mk .mk-db .mk-ai-scene.mk-at { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.mk .mk-db .mk-at-app { padding: 0; gap: 0; overflow: hidden; --at-line: #e1e3e8; --at-blue: #166ee1; --at-green: #20a933; --at-head: #f6f7f9; }
.mk-at-app > .mk-cs-site { margin: 12px 14px 14px; }
.mk-at .mk-cs-card i { aspect-ratio: 16 / 7; }
.mk-at-base { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--card); border-bottom: 1px solid var(--at-line); white-space: nowrap; min-width: 0; }
.mk-at-ico { flex: none; width: 24px; height: 24px; border-radius: 6px; background: var(--navy); display: grid; align-content: center; gap: 2px; padding: 0 6px; }
.mk-at-ico i { display: block; height: 3px; border-radius: 1px; background: var(--gold); }
.mk-at-ico i:nth-child(2) { opacity: 0.7; }
.mk-at-ico i:nth-child(3) { opacity: 0.45; }
.mk-at-base b { font-size: 14px; }
.mk-at-caret { color: var(--ink-3); font-size: 12px; }
.mk-at-nav { display: flex; gap: 4px; margin-left: 14px; }
.mk-at-nav span { padding: 4px 10px; border-radius: 6px; color: var(--ink-2); font-size: 13px; }
.mk-at-nav .is-on { background: var(--at-head); color: var(--ink); font-weight: 600; }
.mk-at-share { margin-left: auto; background: var(--navy); color: var(--paper); border-radius: 6px; padding: 4px 12px; font-size: 12px; font-weight: 600; }
.mk-at-tabs { display: flex; align-items: flex-end; gap: 2px; padding: 6px 12px 0; background: var(--navy); overflow: hidden; white-space: nowrap; }
.mk-at-tabs span { flex: none; padding: 6px 12px 7px; font-size: 13px; color: rgba(255, 255, 255, 0.78); border-radius: 6px 6px 0 0; }
.mk-at-tabs .is-on { background: var(--card); color: var(--ink); font-weight: 600; }
.mk-at-tabs .mk-at-more { font-size: 12px; padding: 6px 8px 7px; }
.mk-at-bar { display: flex; align-items: center; gap: 4px; padding: 6px 12px; border-bottom: 1px solid var(--at-line); background: var(--card); white-space: nowrap; overflow: hidden; }
.mk-at-views { color: var(--ink-3); font-size: 14px; padding: 0 6px 0 2px; }
.mk-at-view { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; padding: 4px 8px 4px 4px; margin-right: 8px; }
.mk-at-view i { width: 14px; height: 12px; border-radius: 2px; border: 1.5px solid var(--at-blue); border-top-width: 4px; }
.mk-at-tool { padding: 4px 8px; border-radius: 6px; font-size: 13px; color: var(--ink-2); }
.mk-at-tool.is-on { background: #d1f7c4; color: #1d1f25; }
.mk-at-pane .mk-at-tool.is-on { background: #ffe0cc; }
.mk-at-find { margin-left: auto; flex: none; width: 12px; height: 12px; border: 1.5px solid var(--ink-3); border-radius: 50%; }
/* the grid: fixed columns, clipped at the window edge the way a wide table is */
.mk-at-grid { overflow: hidden; background: var(--card); font-size: 13px; }
.mk-at-projects { --at: 40px 204px 64px 140px 110px 84px 96px 72px 100px 108px; }
/* records app: the toast rides the nav bar so it never covers the site cards it is announcing */
.mk-at-app > .mk-db-toast { top: 8px; bottom: auto; transform: translateY(-10px); }
.mk-at-app > .mk-db-toast.is-on { transform: none; }

@media (max-width: 900px) {
  /* records app, phone: the toast has to fit inside the base header so it never clips the table tabs */
  .mk-at-app > .mk-db-toast { top: 2px; padding: 5px 10px; font-size: 12px; line-height: 1.25; }
}
.mk-at-leads { --at: 36px 112px 132px 116px 96px 100px 132px; }
.mk .mk-db .mk-at .mk-db-tr, .mk .mk-db .mk-at .mk-db-tr.is-good, .mk .mk-db .mk-at .mk-db-tr.is-hov, .mk .mk-db .mk-at .mk-db-tr.is-pick {
  grid-template-columns: var(--at); width: max-content; min-width: 100%; gap: 0; margin: 0; padding: 0; border-top: 0; border-bottom: 1px solid var(--at-line); border-radius: 0; box-shadow: none; align-items: stretch; font-size: 13px; background: var(--card); }
.mk .mk-db .mk-at .mk-db-tr > span { display: flex; align-items: center; gap: 4px; height: 32px; padding: 0 8px; border-right: 1px solid var(--at-line); overflow: hidden; white-space: nowrap; }
.mk .mk-db .mk-at .mk-db-tr > span:nth-child(2) { border-right-color: #c9ccd3; }
.mk .mk-db .mk-at .mk-db-tr b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk .mk-db .mk-at .mk-db-th { background: var(--at-head); color: var(--ink-2); text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; }
.mk-at-g { flex: none; width: 16px; font-style: normal; font-size: 12px; color: var(--ink-3); text-align: center; }
.mk .mk-db .mk-at .mk-db-tr > .mk-at-n { justify-content: center; padding: 0 4px; color: var(--ink-3); font-size: 12px; border-right: 0; }
.mk .mk-db .mk-at .mk-db-tr > .mk-at-c { justify-content: center; }
.mk .mk-db .mk-at .mk-db-tr > .mk-at-r { justify-content: flex-end; }
.mk .mk-db .mk-at .mk-db-tr.is-hov:not(.mk-db-th) { background: #f7f8fa; }
.mk .mk-db .mk-at .mk-db-tr.is-pick:not(.mk-db-th), .mk .mk-db .mk-at .mk-db-tr.is-good { background: #eef4ff; }
.mk .mk-db .mk-at .mk-db-tr.is-pick > .mk-at-c:has(.mk-at-chk) { outline: 2px solid var(--at-blue); outline-offset: -2px; }
.mk-at-add { display: flex; height: 32px; border-bottom: 1px solid var(--at-line); }
.mk-at-add .mk-at-n { width: 40px; display: grid; place-items: center; color: var(--ink-3); font-size: 16px; }
.mk-at-foot { padding: 7px 12px; font-size: 12px; color: var(--ink-3); background: var(--at-head); }
/* cell values */
.mk-at-pill { display: inline-block; max-width: 100%; padding: 0 9px; border-radius: 999px; line-height: 20px; font-size: 12px; color: #1d1f25; background: #eee; overflow: hidden; text-overflow: ellipsis; }
.mk-at-pill.is-green { background: #d1f7c4; }
.mk-at-pill.is-yellow { background: #ffeab6; }
.mk-at-pill.is-orange { background: #fee2d5; }
.mk-at-pill.is-red { background: #ffdce5; }
.mk-at-pill.is-blue { background: #cfdfff; }
.mk-at-pill.is-teal { background: #c2f5e9; }
.mk-at-pill.is-cyan { background: #d0f0fd; }
.mk-at-pill.is-purple { background: #ede2fe; }
/* the base's own select colours, by Airtable colour name: Light2 pastels, Light1 mids, Bright solids with white text */
.mk-at-pill.is-blueLight2 { background: #cfdfff; }
.mk-at-pill.is-cyanLight2 { background: #d0f0fd; }
.mk-at-pill.is-tealLight2 { background: #c2f5e9; }
.mk-at-pill.is-greenLight2 { background: #d1f7c4; }
.mk-at-pill.is-yellowLight2 { background: #ffeab6; }
.mk-at-pill.is-orangeLight2 { background: #fee2d5; }
.mk-at-pill.is-redLight2 { background: #ffdce5; }
.mk-at-pill.is-pinkLight2 { background: #ffdaf6; }
.mk-at-pill.is-purpleLight2 { background: #ede2fe; }
.mk-at-pill.is-grayLight2 { background: #eeeeee; }
.mk-at-pill.is-blueLight1 { background: #9cc7ff; }
.mk-at-pill.is-cyanLight1 { background: #77d1f3; }
.mk-at-pill.is-tealLight1 { background: #72ddc3; }
.mk-at-pill.is-greenLight1 { background: #93e088; }
.mk-at-pill.is-yellowLight1 { background: #ffd66e; }
.mk-at-pill.is-orangeLight1 { background: #ffa981; }
.mk-at-pill.is-redLight1 { background: #ff9eb7; }
.mk-at-pill.is-pinkLight1 { background: #f99de2; }
.mk-at-pill.is-purpleLight1 { background: #cdb0ff; }
.mk-at-pill.is-grayLight1 { background: #cccccc; }
.mk-at-pill.is-blueBright { background: #2d7ff9; color: #fff; }
.mk-at-pill.is-cyanBright { background: #18bfff; color: #fff; }
.mk-at-pill.is-tealBright { background: #20d9d2; color: #fff; }
.mk-at-pill.is-greenBright { background: #20c933; color: #fff; }
.mk-at-pill.is-yellowBright { background: #fcb400; }
.mk-at-pill.is-orangeBright { background: #ff6f2c; color: #fff; }
.mk-at-pill.is-redBright { background: #f82b60; color: #fff; }
.mk-at-pill.is-pinkBright { background: #ff08c2; color: #fff; }
.mk-at-pill.is-purpleBright { background: #8b46ff; color: #fff; }
.mk-at-pill.is-grayBright { background: #666666; color: #fff; }
.mk-at-pill.is-grayDark1 { background: #444; color: #fff; }
.mk-at-link { display: inline-block; max-width: 100%; padding: 0 7px; border-radius: 4px; line-height: 20px; font-size: 12px; background: #e4ebf7; color: #1d1f25; overflow: hidden; text-overflow: ellipsis; }
.mk-at-ck { color: var(--at-green); font-weight: 700; font-size: 15px; line-height: 1; }
.mk-at-ph { flex: none; display: block; width: 22px; height: 22px; border-radius: 3px; object-fit: cover; background: #e6ddd3; }
.mk-at-now { color: var(--at-blue); font-weight: 500; }
/* the Portfolio checkbox: an empty box the cursor ticks; once done it is the same green check as the rows above it */
.mk .mk-db .mk-at .mk-at-chk .mk-db-btn { position: relative; display: block; width: 18px; height: 18px; padding: 0; border: 1.5px solid #c4c7cd; border-radius: 4px; background: var(--card); color: transparent; text-indent: 60px; overflow: hidden; white-space: nowrap; line-height: 1; }
.mk .mk-db .mk-at .mk-at-chk .mk-db-btn::after { content: ""; position: absolute; inset: 0; display: grid; place-items: center; text-indent: 0; color: var(--at-green); font-size: 15px; font-weight: 700; }
.mk .mk-db .mk-at .mk-at-chk .mk-db-btn.is-hov, .mk .mk-db .mk-at .mk-at-chk .mk-db-btn.is-busy { border-color: var(--at-blue); background: var(--card); opacity: 1; }
.mk .mk-db .mk-at .mk-at-chk .mk-db-btn.is-done { border-color: transparent; background: transparent; color: transparent; }
.mk .mk-db .mk-at .mk-at-chk .mk-db-btn.is-done::after { content: "\2713"; }
/* inquiry: the site's form window beside the records app */
.mk .mk-db .mk-at-duo { display: grid; grid-template-columns: minmax(0, 0.66fr) minmax(0, 1.34fr); gap: 14px; align-items: start; padding: 14px; background: var(--win); }
.mk-at-pane { border: 1px solid var(--at-line); border-radius: 10px; overflow: hidden; background: var(--card); min-width: 0; }
.mk-at-duo .mk-at-nav, .mk-at-duo .mk-at-share { display: none; }
.mk-at-duo .mk-cs-form { background: var(--card); border-radius: 10px; }
.mk-at-duo .mk-cs-form .mk-db-tf { background: var(--win); }
@media (hover: hover) and (pointer: fine) {
  .mk .mk-db .mk-at .mk-db-tr:not(.mk-db-th):hover { background: #f7f8fa; margin: 0; padding: 0; }
  .mk .mk-db .mk-at .mk-at-chk .mk-db-btn:hover { border-color: var(--at-blue); background: var(--card); }
}
@media (max-width: 900px) {
  .mk-at-nav, .mk-at-tool:not(.is-on), .mk-at-views { display: none; }
  .mk-at-base { padding: 8px 12px; }
  .mk-at-tabs { padding: 5px 8px 0; }
  .mk-at-tabs span { padding: 6px 10px 7px; }
  /* phone: keep the name, the photo, the website status, the box being ticked and the contract value; stage, type, crew and weeks step out; the Portfolio box sits beside its website status */
  .mk-at-projects { --at: 30px 112px 44px 92px 64px 76px; }
  .mk-at-projects .mk-db-tr > :nth-child(4), .mk-at-projects .mk-db-tr > :nth-child(7), .mk-at-projects .mk-db-tr > :nth-child(8), .mk-at-projects .mk-db-tr > :nth-child(9) { display: none !important; }
  .mk-at-leads { --at: 30px 108px 128px 112px 96px 96px 124px; }
  .mk .mk-db .mk-at-duo { grid-template-columns: 1fr; padding: 10px; gap: 10px; }
  .mk-at-app > .mk-cs-site { margin: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .mk .mk-db .mk-at .mk-db-tr, .mk .mk-db .mk-at .mk-at-chk .mk-db-btn { transition: none; }
}

/* -- fix + town: the app on the left does the work, the public page on the right shows it landing.
   .mk-cs-sw2 swaps only when the work arrives (the chip lands, or a real press with nothing in flight). */
.mk .mk-db .mk-ai-scene.mk-cs-duo2 { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.mk .mk-db .mk-at-duo.mk-cs-fixduo { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.mk .mk-db .mk-at-duo.mk-cs-townduo { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.mk-cs-duo2 .mk-cs-site { align-self: start; background: var(--card); border-color: var(--at-line); border-radius: 10px; }
.mk-cs-app { margin-left: auto; font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
.mk-cs-sw2 { display: inline-grid; vertical-align: top; }
.mk-cs-sw2 > * { grid-area: 1 / 1; transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out); }
.mk-cs-sw2 > :last-child { opacity: 0; transform: translateY(4px); }
.mk-db-main:has(.mk-db-btn.is-done):not(.is-hold) .mk-cs-sw2 > :first-child, .mk-cs-site.is-pub .mk-cs-sw2 > :first-child, .mk-cs-site.is-go .mk-cs-sw2 > :first-child { opacity: 0; transform: translateY(-4px); }
.mk-db-main:has(.mk-db-btn.is-done):not(.is-hold) .mk-cs-sw2 > :last-child, .mk-cs-site.is-pub .mk-cs-sw2 > :last-child, .mk-cs-site.is-go .mk-cs-sw2 > :last-child { opacity: 1; transform: none; }
/* site editor: page tabs, a layer tree, the selected block's fields */
.mk-cs-edb { display: grid; grid-template-columns: 116px minmax(0, 1fr); min-width: 0; }
.mk-cs-tree { display: grid; align-content: start; gap: 2px; padding: 10px 6px; border-right: 1px solid var(--at-line); background: var(--at-head); }
.mk-cs-tree span { padding: 4px 8px; border-radius: 6px; font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-cs-tree .is-open { color: var(--ink); font-weight: 600; }
.mk-cs-tree .is-kid { padding-left: 18px; }
.mk-cs-tree .is-on { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--at-line); }
.mk-cs-props { display: grid; gap: 8px; padding: 12px 14px 14px; min-width: 0; }
.mk-cs-edf { transition: box-shadow 200ms var(--ease-out); }
.mk .mk-cs-edf.is-live { box-shadow: inset 0 0 0 1.5px var(--gold); }
.mk-cs-typo { text-decoration: none; border-radius: 3px; transition: background-color 140ms ease; }
.mk-cs-typo .mk-cs-sw2 > :first-child { text-decoration: underline wavy var(--down) 1.5px; text-underline-offset: 3px; }
/* the review count is synced, not typed: it gets no spelling squiggle */
.mk #work-scene-fix .mk-cs-typo .mk-cs-sw2 > :first-child { text-decoration: none; }
.mk-cs-typo.is-sel { background: rgba(22, 110, 225, 0.22); }
.mk-cs-typo.is-live::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 1px; vertical-align: -0.15em; background: var(--ink); animation: mk-caret 1s steps(1, end) infinite; }
/* the live page */
.mk-cs-hero { display: grid; }
.mk-cs-hero .mk-cs-ph { aspect-ratio: 16 / 10; height: auto; }
.mk-cs-hcopy { display: grid; gap: 6px; padding: 12px 14px 14px; }
.mk-cs-hcopy b { font-size: 20px; line-height: 1.15; letter-spacing: -0.01em; }
.mk-cs-sub { font-size: 13px; color: var(--ink-2); border-radius: 4px; }
.mk-cs-sub.is-in { animation: mk-land 900ms var(--ease-out); }
.mk-cs-cta { justify-self: start; margin-top: 4px; padding: 5px 14px; border-radius: 6px; background: var(--navy); color: var(--paper); font-size: 12px; font-weight: 600; }
/* found online: checks on the left, the old address resolving on the right */
.mk-cs-chkb { display: grid; gap: 10px; padding: 12px 14px 14px; min-width: 0; }
.mk-cs-pend { font-size: 12px; font-weight: 400; color: var(--ink-3); white-space: nowrap; }
.mk-cs-chkb .mk-db-tr > span.is-in { animation: mk-land 900ms var(--ease-out); border-radius: 4px; }
.mk-cs-svg circle.is-pulse { transform-box: fill-box; transform-origin: center; animation: mk-cs-pulse 1.2s var(--ease-out) 2; }
@keyframes mk-cs-pulse { 40% { transform: scale(1.9); } 100% { transform: scale(1); } }
.mk-cs-redir .mk-cs-url .mk-cs-sw2 { min-width: 0; overflow: hidden; }
.mk-cs-redir .mk-cs-url .mk-cs-sw2 > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-cs-301 { margin-left: auto; flex: none; font-style: normal; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: rgba(46, 125, 91, 0.12); color: var(--up); opacity: 0; transform: scale(0.92); transition: opacity 220ms var(--ease-out) 120ms, transform 220ms var(--ease-out) 120ms; }
.mk-cs-site.is-go .mk-cs-301, .mk-db-main:has(.mk-db-btn.is-done):not(.is-hold) .mk-cs-301 { opacity: 1; transform: none; }
.mk-cs-rbody { display: grid; }
.mk-cs-404 { display: grid; place-content: center; justify-items: center; gap: 2px; padding: 24px 12px; color: var(--ink-3); font-size: 13px; }
.mk-cs-404 b { font-family: var(--mono); font-size: 28px; font-weight: 600; color: var(--down); }
.mk-cs-redir .mk-cs-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-cs-redir .mk-cs-card { align-content: start; }
.mk-cs-redir .mk-cs-card b { white-space: normal; line-height: 1.25; }
/* desktop: the toast takes the empty floor under the panes, so the page it announces stays in view */
@media (min-width: 901px) {
  .mk-cs-duo2 .mk-at-app > .mk-db-toast { top: auto; bottom: 14px; transform: translateY(10px); }
  .mk-cs-duo2 .mk-at-app > .mk-db-toast.is-on { transform: none; }
  /* under the browser pane only: on town the app column runs to the floor */
  .mk-cs-duo2 .mk-at-app.mk-cs-fixduo > .mk-db-toast { left: 60.4%; }
  .mk-cs-duo2 .mk-at-app.mk-cs-townduo > .mk-db-toast { left: 62.6%; }
  .mk-cs-redir .mk-cs-cards { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .mk-cs-redir .mk-cs-card { grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 12px; font-size: 13px; }
}
@media (max-width: 900px) {
  .mk .mk-db .mk-at-duo.mk-cs-fixduo, .mk .mk-db .mk-at-duo.mk-cs-townduo { grid-template-columns: 1fr; }
  .mk-cs-edb { grid-template-columns: 1fr; }
  .mk-cs-tree { display: none; }
  .mk-cs-props, .mk-cs-chkb { padding: 10px 12px 12px; }
  .mk-cs-hero { grid-template-columns: 112px minmax(0, 1fr); }
  .mk-cs-hero .mk-cs-ph { aspect-ratio: auto; height: 100%; }
  .mk-cs-hcopy { padding: 10px 12px; }
  .mk-cs-hcopy b { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-cs-sw2 > *, .mk-cs-edf, .mk-cs-typo, .mk-cs-301 { transition: none !important; }
  .mk-cs-typo.is-live::after, .mk-cs-sub.is-in, .mk-cs-chkb .mk-db-tr > span.is-in, .mk-cs-svg circle.is-pulse { animation: none; }
}

/* ── fit: every board shows its whole text at every width. Cells wrap instead of ellipsizing; the records grids fit their window instead of running off it ── */
.mk-db-tr > span { white-space: normal; overflow-wrap: break-word; text-overflow: clip; }
.mk .mk-db-mc { white-space: normal; }
.mk-db-qi b, .mk-db-qi span:not(.mk-db-btn), .mk-db-pr b, .mk-db-bl, .mk-cs-form .mk-db-tf b, .mk-cs-card b, .mk-cs-tree span, .mk-cs-app { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
.mk-cs-card b { line-height: 1.25; }
/* records: fr columns so the row is the window's width; a cell grows a line rather than hiding one */
.mk .mk-db .mk-at .mk-db-tr, .mk .mk-db .mk-at .mk-db-tr.is-good, .mk .mk-db .mk-at .mk-db-tr.is-hov, .mk .mk-db .mk-at .mk-db-tr.is-pick { width: 100%; min-width: 0; }
.mk .mk-db .mk-at .mk-db-tr > span { height: auto; min-height: 32px; padding: 5px 8px; white-space: normal; overflow-wrap: break-word; line-height: 1.3; min-width: 0; }
.mk .mk-db .mk-at .mk-db-tr b { white-space: normal; overflow: visible; text-overflow: clip; }
.mk .mk-db .mk-at .mk-db-th > span { align-items: flex-start; }
.mk-at-pill, .mk-at-link { white-space: normal; border-radius: 10px; text-overflow: clip; }
.mk-at-short { display: none; }
.mk-at-short small { display: block; font-size: 12px; font-weight: 400; color: var(--ink-3); }
.mk-at-projects .mk-db-tr > :nth-child(7), .mk-at-projects .mk-db-tr > :nth-child(8), .mk-at-projects .mk-db-tr > :nth-child(9) { display: none !important; }
.mk-at-projects { --at: 34px minmax(0, 2.2fr) 44px minmax(0, 1.25fr) minmax(0, 1.1fr) 76px minmax(0, 0.85fr); }
.mk-at-leads .mk-db-tr > :nth-child(5), .mk-at-leads .mk-db-tr > :nth-child(7) { display: none !important; }
.mk-at-leads { --at: 30px minmax(0, 1.1fr) minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.05fr); }
@media (max-width: 900px) {
  .mk-db-sn { flex-wrap: wrap; }
  .mk-db-si.is-m { flex: 1 1 auto; overflow: visible; text-overflow: clip; white-space: normal; }
  .mk-db-ch { flex-wrap: wrap; row-gap: 4px; }
  .mk .mk-db .mk-at-projects .mk-db-tr > :nth-child(4) { display: flex !important; }
  .mk-at-projects { --at: 30px minmax(0, 2fr) 40px minmax(0, 1.2fr) minmax(0, 1.1fr) 76px minmax(0, 0.8fr); }
  .mk-at-leads { --at: 30px minmax(0, 1.1fr) minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.05fr); }
}
/* phone: the records collapse to what the walker touches. Projects: the project, its website status, its Portfolio box. Leads: who, how they heard, what project */
@media (max-width: 600px) {
  .mk .mk-db .mk-at .mk-db-tr > span { padding: 5px 6px; }
  .mk .mk-db .mk-at .mk-db-th > span { font-size: 12px; }
  .mk .mk-db .mk-at .mk-db-th .mk-at-g { display: none; }
  .mk .mk-db .mk-at-projects .mk-db-tr > :nth-child(4) { display: none !important; }
  .mk-at-full { display: none; }
  .mk-at-short { display: block; }
  .mk-at-projects .mk-db-tr > :nth-child(1), .mk-at-projects .mk-db-tr > :nth-child(3), .mk-at-projects .mk-db-tr > :nth-child(4), .mk-at-projects .mk-db-tr > :nth-child(10) { display: none !important; }
  .mk-at-projects { --at: minmax(0, 1fr) 92px 66px; }
  .mk-at-leads .mk-db-tr > :nth-child(1), .mk-at-leads .mk-db-tr > :nth-child(3) { display: none !important; }
  .mk-at-leads { --at: minmax(0, 1fr) 88px 80px; }
  /* the window shows the first four projects; the footer still counts the table */
  .mk-at-projects .mk-db-tr:not(.mk-db-th):nth-child(n+6) { display: none; }
  .mk-at-tabs span:not(.is-on):not(.mk-at-more) { display: none; }
  .mk-at-tabs .is-on + span:not(.mk-at-more), .mk-at-tabs span:has(+ .is-on) { display: inline-block; }
}
/* the smallest phones: the nav keeps one row of logo + button, the title bar drops its window dots */
@media (max-width: 380px) {
  .mk-logo-img { height: 40px; }
  .mk-nav-cta { padding: 0 12px; }
  .mk-pill { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mk-pill-link { padding: 0 4px; font-size: 13.5px; }
  .mk-db-tl { display: none; }
  .mk .mk-db-sample { padding: 3px 8px; letter-spacing: 0; }
  .mk-db-kc b { font-size: 21px; }
}
/* ── fit, pass 2: the Portfolio box's label is hidden by size, not pushed out of its box; narrow tables size their short columns to their longest word so nothing splits mid-word ── */
.mk .mk-db .mk-at .mk-at-chk .mk-db-btn { font-size: 0; text-indent: 0; }
@media (max-width: 600px) {
  .mk-cs-chkb .mk-db-tb { --tb: minmax(0, 1fr) 66px 78px !important; }
  .mk-cs-redir .mk-cs-url .mk-cs-sw2, .mk-cs-redir .mk-cs-url .mk-cs-sw2 > span { white-space: normal; overflow: visible; text-overflow: clip; }
  .mk-db-tb4 .mk-db-tr > :nth-child(2) { display: none; }
  .mk-db-tb4 { --tb: minmax(0, 1fr) 100px 76px !important; }
}
@media (max-width: 380px) {
  .mk-nav-row { grid-template-columns: minmax(0, 1fr) auto; }
  .mk-logo-img { height: 34px; }
}
@media (max-width: 380px) {
  .mk-pill { grid-template-columns: repeat(3, auto); justify-content: space-between; }
  .mk-pill-link { white-space: nowrap; padding: 0 8px; }
}

/* ── fit, pass 3: rows are separate grids, so every narrow table gets fixed short columns sized to its longest word (BEFORE, Checking…, Leads) and the first column keeps the rest; side labels wrap instead of trailing off ── */
.mk-db-ws span, .mk-db-sn2 .mk-db-si { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }
.mk-cs-chkb .mk-db-tb { --tb: minmax(0, 1fr) 64px 72px !important; }
.mk-cs-redir .mk-cs-url .mk-cs-sw2 > span { font-size: 12px; }
.mk-db-btn.is-done { line-height: 1.45; padding-top: 6px; padding-bottom: 6px; }
@media (max-width: 600px) {
  .mk-cs-chkb .mk-db-tb { --tb: minmax(0, 1fr) 54px 66px !important; }
  #what-scene-found .mk-db-tb { --tb: minmax(0, 1fr) 58px 64px !important; }
  .mk-db-tb4 { --tb: minmax(0, 1fr) 96px 64px !important; gap: 8px; }
  .mk-cs-redir .mk-cs-url .mk-cs-sw2 > span { font-size: 12px; }
}
@media (max-width: 380px) {
  .mk-db-tb4 .mk-db-tr { gap: 8px; }
  .mk-db-tb4 .mk-db-tag { font-size: 12px; padding: 2px 6px; }
  .mk .mk-db .mk-at .mk-cs-rows .mk-db-tr { --tb: minmax(0, 1fr) 94px 78px; }
  .mk .mk-db .mk-at .mk-cs-rows .mk-db-tr > span { padding-left: 6px; padding-right: 6px; font-size: 12px; }
  .mk-cs-rows .mk-at-pill { font-size: 12px; padding: 0 6px; }
}

/* ── fit, pass 3b: the inbox phone grid is --at, not --tb; the checkbox lets its ✓ breathe; the narrowest phones drop the "When" column and tighten the town check ── */
.mk .mk-db .mk-at .mk-at-chk .mk-db-btn { overflow: visible; }
@media (max-width: 600px) {
  .mk-at-leads { --at: minmax(0, 1fr) 128px 84px; }
  .mk-at-leads .mk-at-pill { font-size: 12px; padding: 0 6px; }
  .mk-db-kmt .mk-db-tr { --tb: minmax(0, 1fr) 52px 92px !important; }
}
@media (max-width: 380px) {
  .mk-db-tb4 { --tb: minmax(0, 1fr) 96px 92px !important; }
  .mk-db-tb4 .mk-db-tr > :nth-child(4) { display: none; }
  .mk-cs-chkb .mk-db-tb { --tb: minmax(0, 1fr) 46px 60px !important; }
  .mk-cs-chkb .mk-db-tr { gap: 8px; }
  .mk-cs-chkb .mk-db-tr > :first-child { font-size: 12px; }
}
@media (max-width: 380px) {
  .mk-db-tb4 { --tb: minmax(0, 1fr) 70px 84px !important; }
  .mk-db-tb4 .mk-db-tr { font-size: 12px; }
  .mk-cs-chkb .mk-db-tb { --tb: minmax(0, 1fr) 54px 66px !important; }
  .mk-cs-chkb .mk-db-tr { gap: 6px; }
  .mk-db-kmt .mk-db-tr { --tb: minmax(0, 1fr) 44px 86px !important; gap: 8px; }
}
@media (max-width: 380px) {
  .mk-db-tb4 { --tb: minmax(0, 1fr) 92px !important; }
  .mk-db-tb4 .mk-db-tr > :nth-child(2) { display: none; }
  .mk-db-kmt .mk-db-tr { --tb: minmax(0, 1fr) 46px 72px !important; }
}
.mk-db-kmt .mk-db-v { white-space: nowrap; }
@media (max-width: 380px) { .mk-db-kmt .mk-db-tr { --tb: minmax(0, 1fr) 50px 70px !important; } }
@media (max-width: 380px) {
  .mk-at-leads { --at: minmax(0, 1fr) 128px; }
  .mk-at-leads .mk-db-tr > :nth-child(6) { display: none !important; }
}
/* ── fit, pass 4: desktop inbox gives Heard from the room its longest value needs (Google Business Profile), and the redirect URL breaks at its <wbr> instead of hiding its tail ── */
@media (min-width: 601px) { .mk-at-leads { --at: 30px minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, .9fr); } }
.mk-at-leads .mk-at-pill { padding: 0 6px; }
.mk-cs-redir .mk-cs-url .mk-cs-sw2 > span { white-space: normal; overflow: visible; text-overflow: clip; }
.mk-cs-redir .mk-cs-url .mk-cs-sw2 { overflow: visible; }
/* town check table on phones: the ✓ column needs a tick's width, not a word's; give the label the rest */
@media (max-width: 600px) { .mk-cs-chkb .mk-db-tb { --tb: minmax(0, 1fr) 52px 36px !important; } }
/* town check on phones: the in-progress state is a status dot (hollow = queued, filled pulse = checking), so the tick column stays a tick's width */
.mk-cs-pend em { font-style: normal; }
.mk-cs-pend i { display: none; }
@media (max-width: 600px) {
  .mk-cs-pend em { display: none; }
  .mk-cs-pend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--ink-3); vertical-align: middle; }
  .mk-cs-pend.is-chk i { background: var(--ink); border-color: transparent; animation: mk-pend 900ms ease-in-out infinite; }
}
@keyframes mk-pend { 50% { opacity: .35; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .mk-cs-pend.is-chk i { animation: none; } }

/* hero keyword line: the search phrase rides inside the h1 without changing what the hero says */
.mk .mk-hero-k { display: block; margin-bottom: 24px; font-family: var(--mono); font-size: 14px; line-height: 1.4;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold-pale); }
@media (max-width: 900px) { .mk .mk-hero-k { font-size: 12px; margin-bottom: 16px; } }

/* questions: the same words feed the FAQPage schema (inc/faq.php) */
.mk .mk-faq { padding: 96px 0; }
.mk .mk-faq-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin: 0; }
.mk .mk-faq-item { display: flex; flex-direction: column; gap: 12px; padding: 32px; }
.mk .mk-faq-q { font-weight: 500; font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; color: var(--navy); }
.mk .mk-faq-a { margin: 0; }
@media (max-width: 900px) {
  .mk .mk-faq { padding: 64px 0; }
  .mk .mk-faq-list { grid-template-columns: 1fr; gap: 16px; }
  .mk .mk-faq-item { padding: 24px; }
}
.mk .mk-faq-a a { white-space: nowrap; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

/* skip link: first tab stop, off-screen until focused; front page content sits in <main id="main"> */
/* WordPress injects its own skip link (#wp-skip-link) once the template has a <main>; this only brands it */
body.mk .skip-link.screen-reader-text:focus { left: 16px; top: 16px; padding: 12px 20px; border-radius: 999px; background: #1e263b; color: #ffffff; font: 500 16px/1.2 Inter, ui-sans-serif, system-ui, sans-serif; text-decoration: none; box-shadow: none; outline: 2px solid #c9a464; outline-offset: 3px; }
.mk-main { margin: 0; }
#main:focus, [data-jump]:focus { outline: none; }
/* pause for the walkthroughs: small, quiet, after the tabs; a 24px target. JS adds it, so no-JS and reduced motion never see it */
.mk .mk-ai-pause { appearance: none; background: none; border: 0; margin: 0; padding: 4px 0; min-height: 24px; justify-self: start; align-self: start; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: inherit; opacity: 0.6; text-transform: uppercase; transition: opacity 200ms var(--ease-out); }
.mk .mk-ai-pause:hover { opacity: 1; }
.mk .mk-ai-pause:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; opacity: 1; }
.mk-ai-pause-i { width: 8px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.mk-ai-pause.is-held .mk-ai-pause-i { border: 0; width: 0; height: 0; border-left: 9px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }

.mk-ai-side { display: grid; gap: 28px; align-content: start; min-width: 0; }
@media (max-width: 900px) { .mk-ai-side { gap: 20px; } }

/* stage 1: hero gets a primary button next to the text link */
.mk .mk-hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 24px; }
.mk .mk-hero-ctas .mk-hero-cta { margin-top: 0; }
/* stage 1: the What intro is a heading plus one more paragraph in the same style */
.mk .mk-label:has(+ .mk-label-2) { margin-bottom: 20px; }
.mk .mk-label + .mk-label-2 { margin-top: 0; }
@media (max-width: 900px) { .mk .mk-label:has(+ .mk-label-2) { margin-bottom: 16px; } .mk .mk-label + .mk-label-2 { margin-top: 0; } }

/* stage 1: the team paragraph replaces the old role line */
.mk .mk-footer-team { color: var(--smoke); margin-top: 16px; max-width: 560px; }
/* stage 2: unfinished projects have no photo yet */
.mk .mk-at-ph.is-empty { display: inline-block; background: rgba(30, 38, 59, 0.08); border: 1px dashed rgba(30, 38, 59, 0.25); }
/* stage 2: the redirect page's column fits its pane, so longer card labels wrap instead of running off */
.mk #work-scene-town .mk-cs-redir { grid-template-columns: minmax(0, 1fr); }