/* The DataGarden — website v2 components (DMR-1998, epic DMR-1997).

   The shared pieces of the two approved drafts (homepage v2, Geo Sales landing), as
   classes the rebuilt pages compose: DMR-1999 (homepage), DMR-2000 (Geo Sales),
   DMR-2002 / DMR-2003 (the two coming-soon product pages). Tokens (--ink, --green-hi,
   --s0..--s4, --display/--body/--mono) are declared in marketing.css, which every
   marketing page loads; this sheet only consumes them.

   Every class carries the `mk-` prefix. The drafts call them .btn, .card, .dash, .t,
   .status, .chip — and the pages not yet rebuilt already style .btn-primary their own
   way (marketing.css), so an unprefixed .btn-primary here would restyle every one of
   them at once. The prefix keeps a v2 class from meaning anything on a page that did
   not ask for it, and keeps it clear of the workspace's Tailwind utilities.

   Loaded by templates/marketing/base.html only. Markup that repeats lives in
   templates/marketing/_components.html (Jinja macros). */

/* ───── LAYOUT + TYPE ───── */
.mk-wrap { max-width: 1160px; margin: 0 auto; padding-inline: 16px; }
@media (min-width: 640px) { .mk-wrap { padding-inline: 20px; } }
.mk-section { padding: 88px 0; }
.mk-eyebrow {
  font: 600 12.5px var(--body); letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 14px;
}
.mk-h1, .mk-h2, .mk-h3 {
  font-family: var(--display); font-weight: 600; text-wrap: balance;
  margin: 0; letter-spacing: -.01em; color: var(--text);
}
.mk-h1 { font-size: clamp(36px, 5.4vw, 68px); line-height: 1.04; }
.mk-h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; }
.mk-h3 { font-size: 21px; line-height: 1.25; }
.mk-h1 em, .mk-h2 em { font-style: italic; color: var(--green-hi); font-weight: 500; }
.mk-lead { font-size: 19px; color: var(--muted); max-width: 60ch; margin: 18px 0 0; }
.mk-num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.mk-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; align-items: center; }
.mk-link { color: var(--green-hi); font-weight: 600; }

/* ───── BUTTONS ───── */
.mk-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 8px; padding: 13px 22px; border: 0; cursor: pointer;
  font: 600 16px var(--body); text-decoration: none; line-height: 1.2;
}
.mk-btn-primary { background: var(--gold); color: #1a1406; }
.mk-btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.mk-btn-ghost:hover { border-color: var(--green); }
.mk-btn-sm { padding: 8px 16px; font-size: 15px; }

/* ───── FOCUS ─────
   Every interactive v2 element shows a visible ring on keyboard focus — the drafts
   set it on .btn and links; inputs keep theirs in the notify form below. */
.mk-btn:focus-visible,
.mk-top a:focus-visible,
.mk-top button:focus-visible,
.mk-footer a:focus-visible,
.mk-card a:focus-visible,
.mk-part-link:focus-visible {
  outline: 2px solid var(--green-hi); outline-offset: 3px; border-radius: 6px;
}

/* ───── SECTION HEADING ───── */
.mk-heading { max-width: 760px; }
.mk-heading--center { margin-inline: auto; text-align: center; }
.mk-heading--center .mk-lead { margin-inline: auto; }

/* ───── STATUS PILL + "YOUR DATA" BADGE ───── */
.mk-status {
  display: inline-block; align-self: flex-start;
  font: 600 11.5px var(--body); letter-spacing: .12em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 10px;
}
.mk-status--live { background: rgb(63 154 104 / .2); color: var(--green-hi); }
.mk-status--soon { background: rgb(255 255 255 / .06); color: var(--muted); border: 1px solid var(--line); }
.mk-badge-own {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  font: 600 11.5px var(--body); letter-spacing: .1em; text-transform: uppercase;
  color: #1a1406; background: var(--gold); border-radius: 4px; padding: 2px 7px;
}

/* ───── CARD ───── */
.mk-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.mk-card {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 16px;
}
.mk-card--live { border-color: var(--green); }
.mk-card-vis {
  height: 170px; position: relative; overflow: hidden;
  background: #0f1d18; border-bottom: 1px solid var(--line);
}
.mk-card-vis svg { display: block; width: 100%; height: 100%; }
.mk-card-body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.mk-card-q { font: italic 15px var(--display); color: var(--gold); margin: 0; }
.mk-card-d { color: var(--muted); font-size: 15.5px; margin: 0; }
.mk-card ul { margin: 2px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14.5px; }
.mk-card li { padding-left: 18px; position: relative; }
.mk-card li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 8px; height: 8px; border-radius: 2px; background: var(--green);
}
.mk-card--soon li::before { background: var(--muted); }
.mk-card-foot { margin-top: auto; padding-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ───── PART BAND (Geo Sales: part 1 distribution, part 2 potential) ───── */
.mk-part { padding: 72px 0 8px; }
.mk-part--two { background: linear-gradient(180deg, rgb(232 184 75 / .06), transparent 340px); }
.mk-part-band {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: start;
  border-top: 1px solid var(--line); padding-top: 40px;
}
.mk-part--two .mk-part-band { border-top-color: var(--gold); }
.mk-part-num { font: 600 76px/0.9 var(--display); color: var(--gold); letter-spacing: -.03em; }
.mk-part-num small {
  display: block; margin-top: 10px;
  font: 600 12px var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.mk-part-band .mk-h2 { font-size: clamp(30px, 3.6vw, 46px); }
.mk-part-band .mk-lead { max-width: 64ch; }
.mk-part-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.mk-part-facts span {
  font-size: 14px; border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 12px; color: var(--text); background: var(--ink-2);
}
.mk-part-facts b { color: var(--gold); font-weight: 600; }

/* ───── DASHBOARD PANEL (a working screen, drawn with real figures) ───── */
.mk-dash {
  min-width: 0; overflow: hidden;
  background: var(--ink); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 24px 60px rgb(0 0 0 / .35);
}
.mk-dash-body { padding: 16px; }
.mk-dash-title { font: 600 17px var(--display); margin: 0 0 2px; }
.mk-dash-sub { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.mk-screen-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--ink-3); border-bottom: 1px solid var(--line);
  font-size: 13px; color: var(--muted);
}
.mk-screen-bar b { color: var(--text); font-weight: 600; }
.mk-dots { display: flex; gap: 6px; }
.mk-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); display: block; }
.mk-tbl-wrap { overflow-x: auto; }
table.mk-t { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.mk-t th {
  font: 600 11px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.mk-t th:first-child, .mk-t td:first-child { text-align: left; }
.mk-t .mk-band th { text-align: center; padding-bottom: 4px; }
.mk-t td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.mk-t tr:nth-child(even) td { background: rgb(255 255 255 / .02); }
.mk-t td.mk-mine { color: var(--green-hi); font-family: var(--mono); }
.mk-t td.mk-comp { color: var(--gold); font-family: var(--mono); }
.mk-t td.mk-mkt { color: var(--text); font-family: var(--mono); }
.mk-t td.mk-nd { color: var(--muted); }
.mk-t td small { display: block; color: var(--muted); font-size: 12px; font-family: var(--body); }

/* "Illustrative": the figures beside it are examples, not data (DMR-2002). In a
   screen bar it sits at the bar's right end. */
.mk-ill {
  display: inline-block; font: 600 10.5px var(--body); letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); border: 1px solid rgb(232 184 75 / .45); border-radius: 4px; padding: 1px 6px;
}
.mk-screen-bar .mk-ill { margin-left: auto; }

/* Share ramp swatches — a legend for a map coloured --s0..--s4. */
.mk-ramp { display: flex; }
.mk-ramp span { width: 22px; height: 7px; }
.mk-ramp .mk-s0 { background: var(--s0); } .mk-ramp .mk-s1 { background: var(--s1); }
.mk-ramp .mk-s2 { background: var(--s2); } .mk-ramp .mk-s3 { background: var(--s3); }
.mk-ramp .mk-s4 { background: var(--s4); }

/* ───── NOTIFY FORM (posts to /marketing/notify, DMR-2001) ───── */
.mk-notify { width: 100%; display: grid; gap: 6px; }
.mk-notify label { font-size: 13.5px; color: var(--text); font-weight: 600; }
.mk-notify-row { display: flex; gap: 8px; }
.mk-notify input {
  flex: 1; min-width: 0; padding: 10px 12px;
  background: var(--ink); border: 1px solid var(--line); border-radius: 8px;
  color: var(--text); font: 15px var(--body);
}
.mk-notify input:focus-visible { outline: 2px solid var(--green-hi); outline-offset: 1px; border-color: transparent; }
.mk-notify .mk-btn { padding: 10px 14px; font-size: 14.5px; white-space: nowrap; }
.mk-notify-note { margin: 0; font-size: 13px; color: var(--muted); }
.mk-notify-msg { margin: 0; min-height: 1.2em; font-size: 13.5px; color: var(--muted); }
.mk-notify-msg.is-ok { color: var(--green-hi); }
.mk-notify-msg.is-err { color: var(--gold); }
.mk-notify.is-done label, .mk-notify.is-done .mk-notify-row, .mk-notify.is-done .mk-notify-note { display: none; }
/* The notify form's honeypot (DMR-2001): off-screen, not display:none, so a bot that
   skips hidden inputs still sees and fills it. */
.mk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ───── HOMEPAGE (DMR-1999) ─────
   The homepage v2 draft's own sections. Kept here, not in a <style> block on the
   page, so a later page that reuses a piece (the layer stack, the matrix) gets it. */
.mk-section.mk-section--pt40 { padding-top: 40px; }
.mk-section.mk-section--pt24 { padding-top: 24px; }
.mk-section.mk-section--pt0 { padding-top: 0; }
.mk-actions--center { justify-content: center; }

/* Hero: copy left, the three-layer foundation right. */
.mk-hero {
  padding: 72px 0 80px;
  background:
    radial-gradient(900px 520px at 88% 10%, rgb(63 154 104 / .16), transparent 60%),
    radial-gradient(600px 400px at 0% 100%, rgb(232 184 75 / .06), transparent 60%), var(--ink);
}
.mk-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.mk-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 40px; border-top: 1px solid var(--line); }
.mk-stats div { padding: 14px 14px 0 0; min-width: 0; }
.mk-stats strong { display: block; font: 600 26px var(--display); color: var(--text); }
.mk-stats span { font-size: 13.5px; color: var(--muted); }
.mk-stack { position: relative; display: grid; gap: 14px; min-width: 0; }
.mk-layer {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center;
  border-radius: 14px; padding: 18px 20px; border: 1px solid var(--line); background: var(--ink-2);
}
.mk-layer-ic { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; }
.mk-layer-ic svg { width: 24px; height: 24px; }
.mk-layer-title { font: 600 18px/1.25 var(--display); margin: 0; color: var(--text); }
.mk-layer p { margin: 2px 0 0; font-size: 14.5px; color: var(--muted); }
.mk-layer-fig { font: 500 13px var(--mono); color: var(--muted); text-align: right; white-space: nowrap; }
.mk-layer--stats .mk-layer-ic { background: rgb(140 199 232 / .14); color: var(--sky); }
.mk-layer--shops .mk-layer-ic { background: rgb(127 211 162 / .14); color: var(--green-hi); }
.mk-layer--sales { border-style: dashed; border-color: rgb(232 184 75 / .5); }
.mk-layer--sales .mk-layer-ic { background: rgb(232 184 75 / .14); color: var(--gold); }
.mk-joiner { height: 14px; margin: -14px auto; width: 2px; background: var(--line); }
.mk-stack-cap { font-size: 13px; color: var(--muted); text-align: center; margin: 0; }

/* Products: heading left, the status sentence right. */
.mk-products-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.mk-products-note { margin: 0; max-width: 44ch; }
.mk-card-note { margin: 0; font-size: 14.5px; color: var(--muted); }

/* How it fits together: data layer x product. Scrolls inside its own box at phone
   width, never the page. */
.mk-matrix-wrap { overflow-x: auto; margin-top: 36px; border: 1px solid var(--line); border-radius: 14px; }
table.mk-matrix { width: 100%; border-collapse: collapse; min-width: 640px; }
.mk-matrix th, .mk-matrix td { padding: 16px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.mk-matrix thead th {
  font: 600 12px var(--body); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); background: var(--ink-2);
}
.mk-matrix thead th.mk-matrix-p {
  text-align: center; color: var(--text); letter-spacing: .04em; text-transform: none; font: 600 16px var(--display);
}
.mk-matrix tbody th { font-weight: 600; width: 34%; color: var(--text); }
.mk-matrix tbody th small { display: block; color: var(--muted); font-weight: 400; font-size: 14px; margin-top: 2px; }
.mk-matrix td { text-align: center; }
.mk-matrix tr:last-child th, .mk-matrix tr:last-child td { border-bottom: 0; }
.mk-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; }
.mk-dot--included { background: var(--green-hi); }
.mk-dot--optional { background: var(--gold); }
.mk-dot--no { border: 1px solid var(--line); }
.mk-matrix-key { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13.5px; color: var(--muted); margin-top: 12px; }
.mk-matrix-key span { display: inline-flex; align-items: center; gap: 6px; }

/* Geo Sales spotlight: the two parts as links into the Geo Sales page. */
.mk-spot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.mk-two { display: grid; gap: 14px; min-width: 0; }
.mk-two-part {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px;
  text-decoration: none; color: var(--text);
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px;
}
.mk-two-part--two { border-color: rgb(232 184 75 / .45); }
.mk-two-n { font: 600 40px/1 var(--display); color: var(--green-hi); }
.mk-two-part--two .mk-two-n { color: var(--gold); }
.mk-two-title { font: 600 19px/1.25 var(--display); margin: 0; }
.mk-two-part p { color: var(--muted); margin: 4px 0 0; font-size: 15px; }
.mk-two-k { font: 600 11px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mk-two-part:focus-visible { outline: 2px solid var(--green-hi); outline-offset: 3px; }

/* Who it is for. */
.mk-aud { background: var(--ink-2); border-block: 1px solid var(--line); }
.mk-aud-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 36px; }
.mk-aud-grid > div { border-top: 2px solid var(--green); padding-top: 16px; min-width: 0; }
.mk-aud-title { font: 600 20px/1.25 var(--display); margin: 0; color: var(--text); }
.mk-aud-grid p { color: var(--muted); margin: 8px 0 0; font-size: 16px; }
.mk-aud-grid .mk-aud-uses { font-size: 13.5px; color: var(--green-hi); margin-top: 10px; }

/* Sources strip. */
.mk-sources { padding: 56px 0; }
.mk-src-row { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; margin-top: 18px; }
.mk-src-row span { font: 600 18px var(--display); color: var(--muted); }
.mk-src-note { font-size: 14px; color: var(--muted); margin: 14px 0 0; }

/* Closing call to action. */
.mk-cta { text-align: center; background: linear-gradient(160deg, #1d4a33, #12291f); border-top: 1px solid var(--line); }
.mk-mail { font: 500 14px var(--mono); color: var(--muted); overflow-wrap: anywhere; }

/* ───── GEO SALES LANDING (DMR-2000) ─────
   /solutions/geo-sales, the second approved draft. Every bar on the page is an SVG
   rect sized in percent of its own axis by marketing/geo_sales_page.py, so these rules
   colour and size the boxes and never the lengths (no inline styles, nothing
   exaggerated). The Countries map is drawn by static/js/geo-sales-landing.js. */
.mk-gs-hero {
  padding: 64px 0 72px;
  background:
    radial-gradient(900px 500px at 85% 20%, rgb(63 154 104 / .16), transparent 60%),
    radial-gradient(600px 400px at 5% 100%, rgb(232 184 75 / .07), transparent 60%), var(--ink);
}
.mk-gs-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
.mk-gs-h1 { font-size: clamp(36px, 5.2vw, 64px); }
.mk-gs-hero-note { margin-top: 26px; font-size: 14px; color: var(--muted); }
.mk-gs-screen {
  min-width: 0; overflow: hidden; background: var(--ink-2);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 30px 80px rgb(0 0 0 / .45);
}
.mk-gs-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.mk-gs-chip {
  font-size: 12.5px; border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 10px; color: var(--muted); white-space: nowrap;
}
.mk-gs-chip b { color: var(--text); font-weight: 600; }
.mk-gs-chip--on { border-color: var(--green); background: rgb(63 154 104 / .14); color: var(--text); }
.mk-gs-map-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.mk-gs-map { position: relative; background: #0f1d18; min-height: 300px; border-right: 1px solid var(--line); }
.mk-gs-map svg { display: block; width: 100%; height: auto; }
.mk-gs-country { fill: #18271f; stroke: #0f1d18; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.mk-gs-country--mk { cursor: pointer; }
.mk-gs-country--mk:hover { stroke: var(--gold); stroke-width: 2; }
.mk-gs-country.mk-gs-s0 { fill: var(--s0); } .mk-gs-country.mk-gs-s1 { fill: var(--s1); }
.mk-gs-country.mk-gs-s2 { fill: var(--s2); } .mk-gs-country.mk-gs-s3 { fill: var(--s3); }
.mk-gs-country.mk-gs-s4 { fill: var(--s4); }
.mk-gs-mlbl {
  font: 700 30px var(--body); fill: var(--text); text-anchor: middle; pointer-events: none;
  paint-order: stroke; stroke: #0f1d18; stroke-width: 6px; stroke-linejoin: round;
}
.mk-gs-legend {
  position: absolute; left: 10px; bottom: 10px; padding: 6px 8px;
  background: rgb(12 22 18 / .88); border: 1px solid var(--line); border-radius: 8px;
  font-size: 11px; color: var(--muted);
}
.mk-gs-legend .mk-ramp { margin-top: 4px; }
.mk-gs-tip {
  position: absolute; pointer-events: none; min-width: 150px; padding: 7px 9px;
  background: var(--ink); border: 1px solid var(--line); border-radius: 8px; font-size: 12px;
}
.mk-gs-tip b { display: block; margin-bottom: 2px; }
.mk-gs-tip span { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); }
.mk-gs-tip em { font-style: normal; color: var(--gold); font-family: var(--mono); }
.mk-gs-mapfail {
  display: grid; place-items: center; min-height: 300px; margin: 0; padding: 20px;
  color: var(--muted); font-size: 14px; text-align: center;
}
.mk-gs-rank { padding: 12px 14px; font-size: 13.5px; }
.mk-gs-rank h4 {
  margin: 0 0 6px; font: 600 11.5px var(--body); letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.mk-gs-rank-list { list-style: none; margin: 0; padding: 0; }
.mk-gs-rrow {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 8px;
  padding: 6px 0; border-bottom: 1px solid var(--line);
}
.mk-gs-rrow:last-child { border-bottom: 0; }
.mk-gs-rrow .mk-num { color: var(--text); }
.mk-gs-rbar { grid-column: 1 / -1; display: block; width: 100%; height: 4px; border-radius: 2px; background: var(--line); }
.mk-gs-rbar rect { fill: var(--green); }

/* Two-part intro. */
.mk-gs-intro { padding: 0 0 24px; }
.mk-gs-intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: stretch; }
.mk-gs-ipart {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px;
  text-decoration: none; color: var(--text);
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px;
}
.mk-gs-ipart:hover { border-color: var(--green); }
.mk-gs-ipart:focus-visible { outline: 2px solid var(--green-hi); outline-offset: 3px; }
.mk-gs-ipart--two { border-color: rgb(232 184 75 / .45); }
.mk-gs-ipart--two:hover { border-color: var(--gold); }
.mk-gs-ipart-n { font: 600 46px/1 var(--display); color: var(--green-hi); }
.mk-gs-ipart--two .mk-gs-ipart-n { color: var(--gold); }
.mk-gs-ipart-k { font: 600 11.5px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mk-gs-ipart-title { margin: 4px 0 0; font: 600 21px/1.25 var(--display); }
.mk-gs-ipart p { color: var(--muted); margin: 8px 0 0; font-size: 15.5px; }
.mk-gs-mix { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.mk-gs-mix span { font-size: 12.5px; border-radius: 999px; padding: 3px 10px; border: 1px solid var(--line); }
.mk-gs-mix .mk-gs-mix-pub { color: var(--green-hi); border-color: rgb(127 211 162 / .4); }
.mk-gs-mix .mk-gs-mix-own { color: var(--gold); border-color: rgb(232 184 75 / .5); }
.mk-gs-mix .mk-gs-mix-plus { border: 0; color: var(--muted); padding-inline: 0; }
.mk-gs-go { display: inline-block; margin-top: 12px; font-size: 14px; color: var(--green-hi); }
.mk-gs-ipart--two .mk-gs-go { color: var(--gold); }
.mk-gs-arrow { align-self: center; font: 500 22px var(--mono); color: var(--muted); }

/* Compare to your competitors. */
.mk-gs-compare { background: var(--ink-2); border-bottom: 1px solid var(--line); }
.mk-gs-kpi3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.mk-gs-ktile {
  min-width: 0; padding: 16px; background: var(--ink);
  border: 1px solid var(--line); border-top: 2px solid var(--green); border-radius: 12px;
}
.mk-gs-big { font: 600 30px/1.1 var(--display); color: var(--text); }
.mk-gs-big em { font-style: normal; color: var(--green-hi); }
.mk-gs-sm { font-size: 14px; color: var(--muted); margin-top: 4px; }
.mk-gs-sm b { color: var(--text); font-weight: 600; }
.mk-gs-split { display: block; width: 100%; height: 16px; margin-top: 12px; border-radius: 4px; background: rgb(255 255 255 / .06); }
.mk-gs-crow .mk-gs-split { margin-top: 4px; }
.mk-gs-split rect.mk-gs-k-only, i.mk-gs-k-only { fill: var(--green-hi); background: var(--green-hi); }
.mk-gs-split rect.mk-gs-k-both, i.mk-gs-k-both { fill: var(--green); background: var(--green); }
.mk-gs-split rect.mk-gs-k-comp, i.mk-gs-k-comp { fill: rgb(255 255 255 / .14); background: rgb(255 255 255 / .14); }
.mk-gs-split-n { font: 500 10.5px var(--mono); text-anchor: middle; dominant-baseline: central; fill: #08130e; }
.mk-gs-split-n--both { fill: var(--text); }
.mk-gs-split-n--comp { fill: var(--muted); }
.mk-gs-keyrow { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--muted); margin-top: 8px; }
.mk-dash-body > .mk-gs-keyrow:first-of-type { margin: 0 0 4px; }
.mk-gs-keyrow i { display: inline-block; width: 10px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.mk-gs-keyrow--q { margin-top: 12px; }
.mk-gs-dash-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.mk-gs-dash-wide { margin-top: 20px; }
.mk-gs-brow { margin: 9px 0; }
.mk-gs-lbl { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.mk-gs-lbl b { font-weight: 600; }
.mk-gs-v { font-family: var(--mono); color: var(--muted); }
.mk-gs-trk { display: block; width: 100%; height: 7px; margin-top: 4px; border-radius: 4px; background: rgb(255 255 255 / .06); }
.mk-gs-trk rect { fill: var(--s3); }
.mk-gs-brow--me { background: rgb(232 184 75 / .08); border-left: 2px solid var(--gold); border-radius: 6px; padding: 6px 8px; margin-inline: -8px; }
.mk-gs-brow--me .mk-gs-trk rect { fill: var(--gold); }
.mk-gs-crow { margin: 10px 0; }
.mk-gs-nm { font-size: 13.5px; font-weight: 600; }
.mk-gs-qchart {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; align-items: end;
  height: 190px; padding-top: 18px; border-bottom: 1px solid var(--line);
}
.mk-gs-qcol {
  display: flex; gap: 2px; align-items: flex-end; justify-content: center; height: 100%;
  min-width: 0; border-right: 1px dashed var(--line); padding: 0 4px;
}
.mk-gs-qcol:last-child { border-right: 0; }
.mk-gs-qbar { flex: 1 1 0; min-width: 0; max-width: 22px; height: 100%; overflow: visible; }
.mk-gs-qbar text { font: 500 9.5px var(--mono); fill: var(--muted); text-anchor: middle; }
.mk-gs-q0 rect, i.mk-gs-q0 { fill: var(--green-hi); background: var(--green-hi); }
.mk-gs-q1 rect, i.mk-gs-q1 { fill: #5b8def; background: #5b8def; }
.mk-gs-q2 rect, i.mk-gs-q2 { fill: #e0913a; background: #e0913a; }
.mk-gs-q3 rect, i.mk-gs-q3 { fill: #b5643a; background: #b5643a; }
.mk-gs-q4 rect, i.mk-gs-q4 { fill: #d9568f; background: #d9568f; }
.mk-gs-q5 rect, i.mk-gs-q5 { fill: #9a6ae0; background: #9a6ae0; }
.mk-gs-q6 rect, i.mk-gs-q6 { fill: #3fb6c4; background: #3fb6c4; }
.mk-gs-qlabels {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px;
  font-size: 12px; color: var(--muted); text-align: center; margin-top: 6px;
}
.mk-gs-note { font-size: 13px; color: var(--muted); margin: 14px 0 0; }
.mk-gs-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.mk-gs-points > div { border-top: 2px solid var(--gold); padding-top: 14px; }
.mk-gs-points p, .mk-gs-signals p { color: var(--muted); font-size: 15.5px; margin: 8px 0 0; }
.mk-gs-h3s { font: 600 18px/1.25 var(--display); margin: 0; color: var(--text); }

/* Views: copy beside a working screen. */
.mk-gs-view { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; margin-top: 72px; }
.mk-gs-view--flip .mk-gs-copy { order: 2; }
.mk-gs-view--stack { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.mk-gs-view--stack .mk-gs-copy { max-width: 760px; }
.mk-gs-view--stack ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.mk-gs-view--mt40 { margin-top: 40px; }
.mk-gs-copy p { color: var(--muted); margin: 14px 0 0; }
.mk-gs-copy ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.mk-gs-copy li { padding-left: 22px; position: relative; color: var(--text); font-size: 16px; }
.mk-gs-copy li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 9px; height: 9px; border-radius: 2px; background: var(--green);
}
.mk-gs-tag {
  display: inline-block; margin-bottom: 10px;
  font: 600 12px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--green-hi);
}
.mk-gs-th-sub { text-transform: none; letter-spacing: 0; }
.mk-gs-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.mk-gs-tb { font-size: 12.5px; border: 1px solid var(--line); border-radius: 7px; padding: 4px 10px; color: var(--text); }
.mk-gs-seg { display: inline-flex; padding: 0; overflow: hidden; }
.mk-gs-seg span { padding: 4px 10px; }
.mk-gs-seg .mk-gs-seg-on { background: var(--green); color: #fff; }
.mk-gs-summary { font-size: 12.5px; color: var(--muted); padding: 8px 14px; border-bottom: 1px solid var(--line); }

/* Part 2: the model, the signals, the ceiling, your numbers. */
.mk-gs-yours { padding-top: 24px; background: linear-gradient(180deg, rgb(232 184 75 / .04), transparent); }
.mk-gs-model { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, .9fr); gap: 16px; align-items: stretch; margin-top: 36px; }
.mk-gs-mcol { display: grid; gap: 12px; align-content: start; }
.mk-gs-mcol > h4 { margin: 0; font: 600 12px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mk-gs-mbox { background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.mk-gs-mbox p { color: var(--muted); font-size: 15px; margin: 6px 0 0; }
.mk-gs-who { font: 600 11px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--green-hi); }
.mk-gs-mbox--own { border-color: rgb(232 184 75 / .45); }
.mk-gs-mbox--own .mk-gs-who { color: var(--gold); }
.mk-gs-mbox--ai { border-left: 3px solid var(--green); }
.mk-gs-step { font: 500 12px var(--mono); color: var(--gold); }
.mk-gs-mbox--out { background: linear-gradient(160deg, #1d4a33, #13211b); border-color: var(--green); }
.mk-gs-mbox--out ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.mk-gs-mbox--out li { font-size: 15px; padding-left: 18px; position: relative; }
.mk-gs-mbox--out li::before { content: "→"; position: absolute; left: 0; color: var(--gold); }
.mk-gs-signals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.mk-gs-signals > div { border-top: 2px solid var(--green); padding-top: 14px; }
.mk-gs-ceiling {
  margin-top: 22px; padding: 16px 18px; border: 1px dashed rgb(232 184 75 / .55); border-radius: 12px;
  background: rgb(232 184 75 / .05); color: var(--text); font-size: 16px;
}
.mk-gs-ceiling b { color: var(--gold); }
.mk-gs-bars { padding: 16px 14px 6px; display: grid; gap: 12px; }
.mk-gs-bar-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 70px; gap: 10px; align-items: center; font-size: 13.5px; }
.mk-gs-pbar { display: block; width: 100%; height: 18px; border-radius: 4px; background: rgb(255 255 255 / .04); }
.mk-gs-pbar .mk-gs-pot { fill: rgb(232 184 75 / .22); stroke: rgb(232 184 75 / .6); stroke-dasharray: 4 3; }
.mk-gs-pbar .mk-gs-sold { fill: var(--green); }
.mk-gs-ratio { text-align: right; color: var(--muted); }
.mk-gs-bar-key { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--muted); padding: 0 14px 14px; }
.mk-gs-bar-key i { display: inline-block; width: 12px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.mk-gs-key-sold { background: var(--green); }
.mk-gs-key-pot { background: rgb(232 184 75 / .3); border: 1px dashed rgb(232 184 75 / .7); }

/* The case, two ways to start, what is underneath, the FAQ. */
.mk-gs-case { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }
.mk-gs-case-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mk-gs-case-stats div { background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; padding: 16px; min-width: 0; }
.mk-gs-case-stats strong { display: block; font: 600 30px var(--display); color: var(--gold); }
.mk-gs-case-stats span { font-size: 14px; color: var(--muted); }
.mk-gs-how { background: var(--ink-2); border-block: 1px solid var(--line); }
.mk-gs-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
.mk-gs-path { background: var(--ink); border: 1px solid var(--line); border-radius: 14px; padding: 22px; min-width: 0; }
.mk-gs-path--two { border-color: rgb(232 184 75 / .5); }
.mk-gs-kind { font: 600 12px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--green-hi); }
.mk-gs-path--two .mk-gs-kind { color: var(--gold); }
.mk-gs-path .mk-h3 { margin-top: 6px; }
.mk-gs-path dl { margin: 16px 0 0; display: grid; gap: 10px; }
.mk-gs-path dt { font: 600 12px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mk-gs-path dd { margin: 2px 0 0; font-size: 15.5px; }
.mk-gs-paths-note { text-align: center; color: var(--muted); margin: 22px 0 0; font-size: 16px; }
.mk-gs-data-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.mk-gs-facts { display: grid; margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.mk-gs-fact {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px;
  padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--ink-2);
}
.mk-gs-fact:last-child { border-bottom: 0; }
.mk-gs-fact dt { margin: 0; font: 600 13px var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.mk-gs-fact dd { margin: 0; color: var(--muted); font-size: 15.5px; }
.mk-gs-fact dd b { color: var(--text); font-weight: 600; }
.mk-gs-faq { display: grid; gap: 10px; margin-top: 32px; max-width: 820px; }
.mk-gs-faq details { border: 1px solid var(--line); border-radius: 10px; background: var(--ink-2); padding: 16px 20px; }
.mk-gs-faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px;
  font: 600 18px var(--display); color: var(--text);
}
.mk-gs-faq summary::-webkit-details-marker { display: none; }
.mk-gs-faq summary::after { content: "+"; color: var(--gold); font-family: var(--mono); }
.mk-gs-faq details[open] summary::after { content: "–"; }
.mk-gs-faq summary:focus-visible { outline: 2px solid var(--green-hi); outline-offset: 3px; border-radius: 6px; }
.mk-gs-faq p { color: var(--muted); margin: 10px 0 0; font-size: 16px; }
.mk-gs-sources { margin: 28px auto 0; max-width: 60ch; font-size: 13px; color: var(--muted); }

/* ───── BRAND BROWSER COMING SOON (DMR-2002) ─────
   /products/brand-browser. The views and the store-finder chart reuse the Geo Sales
   page's mk-gs- classes as they are; this block is what the draft adds. Bars are SVG
   rects sized by marketing/brand_browser_page.py, never here. */
.mk-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 36px; }
.mk-bb-hero {
  padding: 64px 0 72px;
  background:
    radial-gradient(900px 500px at 85% 20%, rgb(63 154 104 / .16), transparent 60%),
    radial-gradient(600px 400px at 5% 100%, rgb(232 184 75 / .07), transparent 60%), var(--ink);
}
.mk-bb-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
.mk-bb-h1 { font-size: clamp(36px, 5.2vw, 64px); }
.mk-bb-status { margin-bottom: 18px; }
.mk-bb-mini {
  display: inline-block; width: 70px; height: 6px; margin-left: 8px; vertical-align: middle;
  border-radius: 3px; background: rgb(255 255 255 / .06);
}
.mk-bb-mini rect { fill: var(--s3); }
.mk-bb-dash-note { font-size: 13px; color: var(--muted); margin: 0; padding: 10px 14px 14px; }
.mk-t td.mk-bb-inh { color: var(--muted); font-family: var(--mono); }

/* What it will answer. */
.mk-bb-answers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.mk-bb-ans { min-width: 0; background: var(--ink-2); border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.mk-bb-q { font: italic 500 19px/1.3 var(--display); color: var(--gold); margin: 0 0 10px; }
.mk-bb-ans p { color: var(--muted); margin: 0; font-size: 15.5px; }
.mk-bb-ans .mk-bb-q { color: var(--gold); margin: 0 0 10px; }
.mk-bb-ans ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14.5px; }
.mk-bb-ans li { padding-left: 18px; position: relative; }
.mk-bb-ans li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 8px; height: 8px; border-radius: 2px; background: var(--green);
}

/* The three views. */
.mk-bb-views { background: var(--ink-2); border-block: 1px solid var(--line); }
.mk-gs-view.mk-bb-view { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); margin-top: 64px; }
.mk-bb-views-note { margin-top: 28px; }
.mk-bb-title-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.mk-bb-title-row .mk-ill { margin-left: auto; }
.mk-bb-keyrow { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--muted); margin: 0 0 4px; }
.mk-bb-keyrow i { display: inline-block; width: 10px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.mk-bb-crow { margin: 12px 0; }
.mk-bb-nm { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; margin-bottom: 4px; }
.mk-bb-nm b { font-weight: 600; }
.mk-bb-nm span { font: 12.5px var(--mono); color: var(--muted); white-space: nowrap; }
.mk-bb-split { display: block; width: 100%; height: 16px; border-radius: 4px; background: rgb(255 255 255 / .06); }
.mk-bb-split rect.mk-bb-k-own, i.mk-bb-k-own { fill: var(--green-hi); background: var(--green-hi); }
.mk-bb-split rect.mk-bb-k-res, i.mk-bb-k-res { fill: var(--gold); background: var(--gold); }
.mk-bb-split-n { font: 500 10.5px var(--mono); text-anchor: middle; dominant-baseline: central; fill: #08130e; }

/* Hear when it opens. */
.mk-bb-signup { background: linear-gradient(160deg, #1d4a33, #12291f); border-top: 1px solid var(--line); }
.mk-bb-signup-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.mk-bb-signup .mk-notify, .mk-bb-notify-off {
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 16px; padding: 22px; min-width: 0;
}
.mk-bb-signup .mk-notify { gap: 8px; }
.mk-bb-signup .mk-notify label { font-size: 15px; }
.mk-bb-notify-off { display: grid; gap: 8px; }
.mk-bb-notify-off .mk-card-note { font-size: 16px; }

/* Available today: Geo Sales. */
.mk-bb-today-band { padding: 56px 0; }
.mk-bb-today {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center;
  background: var(--ink-2); border: 1px solid var(--green); border-radius: 16px; padding: 24px 28px;
}
.mk-bb-today p { color: var(--muted); margin: 6px 0 0; font-size: 16px; }

/* ───── PUBLIC DATA BROWSER COMING SOON (DMR-2003) ─────
   /products/public-data-browser. The hero, answers, notify and "available today"
   reuse the Brand Browser page's mk-bb- classes as they are; this block is what the
   draft adds: the one-schema table, theme cards, source groups and the SDK code box. */
.mk-pdb-band { background: var(--ink-2); border-block: 1px solid var(--line); }

/* The hero gives the six-column schema table the wider half. */
.mk-bb-hero-grid.mk-pdb-hero-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }

/* The one-schema table: identifiers left, the value right. */
.mk-t.mk-pdb-t { font-size: 12.5px; }
.mk-t.mk-pdb-t th, .mk-t.mk-pdb-t td { padding-inline: 8px; }
.mk-t.mk-pdb-t th, .mk-t.mk-pdb-t td { text-align: left; }
.mk-t.mk-pdb-t th:nth-child(4), .mk-t.mk-pdb-t td.mk-mine { text-align: right; }
.mk-t.mk-pdb-t th .mk-ill { margin-left: 6px; letter-spacing: .08em; }
.mk-t td.mk-pdb-m { font-family: var(--mono); }
.mk-t td.mk-pdb-dim { color: var(--muted); }
.mk-pdb-src { display: inline-block; font-size: 12px; border-radius: 999px; padding: 1px 8px; }
.mk-pdb-src--eu { background: rgb(140 199 232 / .14); color: var(--sky); }
.mk-pdb-src--un { background: rgb(232 184 75 / .16); color: var(--gold); }

/* Themes. */
.mk-pdb-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.mk-pdb-theme { min-width: 0; background: var(--ink); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.mk-pdb-theme .mk-h3 { font-size: 19px; }
.mk-pdb-theme p { color: var(--muted); font-size: 15px; margin: 6px 0 10px; }
.mk-pdb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-pdb-chips span { font-size: 12.5px; border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; color: var(--text); }
.mk-pdb-theme--own { border-style: dashed; }
.mk-pdb-theme--own .mk-pdb-chips span { color: var(--muted); }

/* Sources, grouped. */
.mk-pdb-srcgrp { margin-top: 36px; }
.mk-pdb-srcgrp h3 { font: 600 12px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.mk-pdb-srclist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mk-pdb-src-item { min-width: 0; background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.mk-pdb-src-item b { display: block; font: 650 17px var(--display); }
.mk-pdb-src-item > span { font-size: 13.5px; color: var(--muted); }
.mk-pdb-cov { margin-top: 6px; font-size: 13.5px; color: var(--text); }
.mk-pdb-cov small { display: block; font-size: 12.5px; color: var(--muted); }

/* For data teams: the API and the SDK. */
.mk-pdb-api-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.mk-pdb-api-grid code { font: 0.92em var(--mono); color: var(--text); }
.mk-pdb-points { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.mk-pdb-points li { padding-left: 22px; position: relative; font-size: 16px; }
.mk-pdb-points li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 9px; height: 9px; border-radius: 2px; background: var(--green);
}
.mk-pdb-codebox { min-width: 0; overflow: hidden; background: var(--ink); border: 1px solid var(--line); border-radius: 14px; }
.mk-pdb-codebox pre { margin: 0; padding: 16px 18px; font: 13.5px/1.7 var(--mono); color: var(--text); overflow-x: auto; }
.mk-pdb-c { color: var(--muted); }
.mk-pdb-k { color: var(--sky); }
.mk-pdb-s { color: var(--gold); }

/* ───── COVERAGE — the scope page (DMR-2050) ─────
   /coverage: one card per POS market with its figures, inclusions, free preview strip and
   country table. Shops are size bands, drawn as six segments (.mk-cov-bar, `mk-on` up to
   the band); the table scrolls inside its own box on a phone. */
.mk-cov-hero { padding: 56px 0 8px; }
.mk-cov-h1 { font-size: clamp(34px, 4.6vw, 52px); max-width: 18ch; }
.mk-cov-legend {
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  margin-top: 28px; font-size: 14px; color: var(--muted);
}
.mk-cov-legend-note { flex-basis: 100%; margin: 0; }
.mk-cov-legend-band { display: inline-flex; align-items: center; gap: 8px; }
.mk-cov-bar { display: inline-flex; gap: 3px; }
.mk-cov-bar i { display: block; width: 10px; height: 14px; border-radius: 2px; background: var(--line); }
.mk-cov-bar i.mk-on { background: var(--green-hi); }
.mk-cov-markets { padding: 32px 0 80px; }
.mk-cov-stack { display: grid; gap: 32px; }
.mk-cov-empty { margin: 0; padding: 20px 24px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); }
.mk-cov-market { min-width: 0; overflow: hidden; background: var(--ink-2); border: 1px solid var(--line); border-radius: 16px; }
.mk-cov-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
  gap: 16px; padding: 24px 24px 18px;
}
.mk-cov-head-copy { display: grid; gap: 10px; max-width: 640px; min-width: 0; }
.mk-cov-name { font-size: clamp(26px, 3vw, 32px); }
.mk-cov-blurb { margin: 0; color: var(--muted); }
.mk-cov-figures { display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 4px 0; }
.mk-cov-figures div { display: grid; }
.mk-cov-figures strong { font: 600 26px/1.15 var(--display); color: var(--text); font-variant-numeric: tabular-nums; }
.mk-cov-figures span { font-size: 13px; color: var(--muted); }
.mk-cov-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mk-cov-chips li {
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--s2);
  color: var(--green-hi); font-size: 13px; font-weight: 600;
}
.mk-cov-cta { display: grid; justify-items: end; gap: 6px; text-align: right; }
.mk-cov-cta .mk-btn { white-space: nowrap; }
.mk-cov-cta .mk-link { font-size: 14px; }
.mk-cov-pill {
  padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: rgb(232 184 75 / .14); color: var(--gold);
}
.mk-cov-preview {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
  margin: 0 24px 18px; padding: 14px 16px; border-radius: 12px;
  background: var(--ink-3); border: 1px dashed var(--s3);
}
.mk-cov-preview p { margin: 0; }
.mk-cov-preview-tag { font: 700 12px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.mk-cov-preview-name { font-size: 17px; font-weight: 600; }
.mk-cov-preview-note { font-size: 14px; color: var(--muted); }
.mk-cov-preview .mk-btn { white-space: nowrap; }
.mk-cov-tbl-wrap { border-top: 1px solid var(--line); }
table.mk-cov-t { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.mk-cov-t th, .mk-cov-t td { padding: 11px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.mk-cov-t thead th {
  font: 600 12px var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.mk-cov-t tbody th { font-weight: 600; }
.mk-cov-t td { color: var(--muted); }
.mk-cov-t tbody tr:last-child th, .mk-cov-t tbody tr:last-child td { border-bottom: 0; }
.mk-cov-t .mk-cov-r { text-align: right; }
.mk-cov-t td.mk-cov-price { color: var(--text); font-weight: 600; }
.mk-cov-band { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
.mk-cov-costs {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px;
  padding: 28px; border-radius: 16px; background: var(--ink-3); border: 1px solid var(--s2);
}
.mk-cov-costs > div:first-child { max-width: 640px; display: grid; gap: 6px; }
.mk-cov-costs-title { font-size: 26px; }
.mk-cov-costs p { margin: 0; color: var(--muted); }
.mk-cov-costs-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.mk-cov-terms { margin: 0; font-size: 14px; color: var(--muted); }
.mk-cov-market a:focus-visible, .mk-cov-costs a:focus-visible, .mk-cov-terms a:focus-visible {
  outline: 2px solid var(--green-hi); outline-offset: 3px; border-radius: 6px;
}

/* ───── TERMS OF SALE (DMR-2055) ─────
   /terms: one reading column — the draft notice, a wrapping list of section links, then the
   numbered sections. Bracketed placeholders are plain text; the notice says what they are. */
.mk-terms { padding: 56px 0 88px; }
.mk-terms-wrap { max-width: 820px; }
.mk-terms-h1 { font-size: clamp(34px, 4.6vw, 52px); }
.mk-terms-draft {
  margin: 22px 0 0; padding: 14px 18px; border-radius: 12px; font-size: 15px;
  background: var(--ink-3); border: 1px solid var(--warn); color: var(--text);
}
.mk-terms-draft strong { color: var(--warn); }
.mk-terms-toc { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 32px 0 8px; font-size: 14px; }
.mk-terms-toc a { color: var(--green-hi); }
.mk-terms-section { padding: 28px 0 4px; border-bottom: 1px solid var(--line); }
.mk-terms-section:last-of-type { border-bottom: none; }
.mk-terms-section p { margin: 12px 0 0; color: var(--muted); line-height: 1.7; max-width: 70ch; }
.mk-terms-updated { margin: 32px 0 0; font-size: 14px; color: var(--muted); }
.mk-terms a:focus-visible {
  outline: 2px solid var(--green-hi); outline-offset: 3px; border-radius: 6px;
}

/* ───── SITE HEADER (marketing only — templates/marketing/_site_header.html) ─────
   The pieces it shares with the app's header keep their site-header.css classes
   (.nav-dashboards, .nav-account, .nav-dropdown, .nav-hamburger, .mobile-drawer) so
   site-header.js drives them unchanged; site-header.css declares the pre-v2 palette on
   those elements, and this block re-points it at the v2 tokens on the marketing side. */
.mk-top .nav-dashboards, .mk-top .nav-account, .mobile-drawer.mk-drawer {
  --dark: var(--ink); --dark2: var(--ink-2); --green: #3f9a68; --green-light: var(--s3);
  --gold: #e8b84b; --muted: #9aaea3; --white: var(--text);
}
.mk-top {
  position: sticky; top: 0; z-index: 100;
  background: rgb(12 22 18 / .92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.mk-top-inner { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.mk-logo {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  font: 600 18px var(--display); color: var(--text); text-decoration: none;
}
.mk-logo i {
  width: 30px; height: 30px; border-radius: 7px; background: var(--green);
  display: grid; place-items: center; font: normal 700 13px var(--body); color: #fff;
}
.mk-nav { display: flex; gap: 20px; flex-wrap: wrap; flex: 1; }
.mk-nav a { color: var(--muted); text-decoration: none; font-size: 15px; }
.mk-nav a:hover, .mk-nav a[aria-current="page"] { color: var(--text); }
.mk-top-actions { display: flex; gap: 10px; align-items: center; margin-left: auto; }
.mk-login { color: var(--text); text-decoration: none; font-size: 15px; padding: 8px 12px; }
.mk-login:hover { color: var(--green-hi); }
.mk-top .nav-hamburger { margin-left: auto; border-color: var(--line); }
.mk-top .nav-hamburger span { background: var(--text); }
.mk-top .nav-dropdown { border-color: var(--line); }
.mobile-drawer.mk-drawer { border-left-color: var(--line); }
.mk-drawer .mobile-nav-group-label, .mk-drawer .mobile-drawer-nav a { font-family: var(--body); }
.mk-drawer-cta .mk-btn, .mk-drawer-cta .mk-login { justify-content: center; text-align: center; }

/* ───── SITE FOOTER ───── */
.mk-footer { padding: 32px 0; font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); background: var(--ink); }
.mk-footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 24px; }
.mk-footer-tagline { margin: 10px 0 0; max-width: 34ch; }
.mk-footer h4 {
  margin: 0 0 8px; font: 600 12px var(--body); letter-spacing: .14em;
  text-transform: uppercase; color: var(--text);
}
.mk-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mk-footer a { color: var(--muted); text-decoration: none; }
.mk-footer a:hover { color: var(--text); }
.mk-footer .mk-logo { color: var(--text); }
.mk-soon { font-size: 11px; color: var(--gold); margin-left: 6px; letter-spacing: .08em; text-transform: uppercase; }

/* ───── PHONE / TABLET ───── */
@media (max-width: 960px) {
  .mk-cards, .mk-hero-grid, .mk-aud-grid, .mk-spot { grid-template-columns: minmax(0, 1fr); }
  .mk-gs-hero-grid, .mk-gs-view, .mk-gs-data-grid { grid-template-columns: minmax(0, 1fr); }
  .mk-gs-view--flip .mk-gs-copy { order: 0; }
  .mk-gs-hero { padding: 48px 0 56px; }
  .mk-bb-hero-grid, .mk-bb-answers, .mk-gs-view.mk-bb-view, .mk-bb-signup-grid, .mk-bb-today { grid-template-columns: minmax(0, 1fr); }
  .mk-bb-hero { padding: 48px 0 56px; }
  .mk-pdb-api-grid, .mk-bb-hero-grid.mk-pdb-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .mk-pdb-themes, .mk-pdb-srclist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-hero { padding: 48px 0 56px; }
  .mk-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-section { padding: 64px 0; }
}
/* 900px is site-header.css's breakpoint for the hamburger and the drawer. */
@media (max-width: 900px) {
  .mk-nav, .mk-top-actions { display: none; }
  .mk-gs-intro-grid, .mk-gs-kpi3, .mk-gs-dash-pair, .mk-gs-points, .mk-gs-model,
  .mk-gs-signals, .mk-gs-case, .mk-gs-paths { grid-template-columns: minmax(0, 1fr); }
  .mk-gs-arrow { transform: rotate(90deg); justify-self: center; }
  .mk-gs-map-split { grid-template-columns: minmax(0, 1fr); }
  .mk-gs-map { border-right: 0; border-bottom: 1px solid var(--line); }
  .mk-gs-qbar text { display: none; }
  .mk-gs-fact { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (max-width: 700px) {
  .mk-part-band { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .mk-part-num { font-size: 56px; }
  .mk-gs-view--stack ul { grid-template-columns: minmax(0, 1fr); }
  .mk-stats--3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mk-pdb-themes, .mk-pdb-srclist { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .mk-cov-head { padding: 20px 16px 14px; }
  .mk-cov-cta { justify-items: start; text-align: left; }
  .mk-cov-preview { margin: 0 16px 16px; }
  .mk-cov-costs { padding: 20px; }
}
@media (max-width: 480px) {
  .mk-footer-grid { grid-template-columns: minmax(0, 1fr); }
  .mk-gs-big { font-size: 26px; }
  .mk-gs-bar-row { grid-template-columns: 92px minmax(0, 1fr) 52px; gap: 8px; }
  .mk-gs-qchart { gap: 4px; } .mk-gs-qcol { padding: 0 1px; gap: 1px; }
  /* The layer's figure drops under its text rather than squeezing it. */
  .mk-layer { grid-template-columns: auto minmax(0, 1fr); padding: 16px; }
  .mk-layer-fig { grid-column: 2; text-align: left; }
  .mk-notify-row { flex-wrap: wrap; }
}

/* ───── MOTION — only for visitors who have not asked for less ───── */
@media (prefers-reduced-motion: no-preference) {
  .mk-btn { transition: transform .15s ease, border-color .15s ease; }
  .mk-btn:hover { transform: translateY(-1px); }
  .mk-card { transition: transform .2s ease, border-color .2s ease; }
  .mk-card:hover { transform: translateY(-2px); }
  .mk-two-part { transition: transform .2s ease, border-color .2s ease; }
  .mk-two-part:hover { transform: translateY(-2px); }
  .mk-gs-ipart { transition: transform .2s ease, border-color .2s ease; }
  .mk-gs-ipart:hover { transform: translateY(-2px); }
  .mk-gs-country { transition: fill .3s ease; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mobile-drawer.mk-drawer, .mk-top .nav-hamburger span { transition: none; }
}