/* 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; }
/* The two data products behind Geo Sales (DMR-2081). Stacks with .mk-cards at 960px. */
.mk-cards.mk-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.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; }

/* ───── "BOOK A DEMO" MODAL (DMR-2112 — templates/marketing/_demo_modal.html) ───── */
/* Centred: the page's margin reset also zeroes the UA stylesheet's `margin: auto` on a modal
   <dialog>, which pinned it to the top-left corner; put it back. */
.mk-demo {
  position: fixed; inset: 0; margin: auto; height: fit-content; max-height: calc(100vh - 32px);
  width: min(480px, calc(100vw - 32px)); padding: 28px 28px 22px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--ink-2); color: var(--text);
}
.mk-demo::backdrop { background: rgb(0 0 0 / .6); }
.mk-demo-close-form { position: absolute; top: 10px; right: 12px; margin: 0; }
.mk-demo-close {
  border: 0; background: transparent; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer;
}
.mk-demo-close:hover { color: var(--text); }
.mk-demo-title { margin: 0 24px 8px 0; }
.mk-demo-lead { margin: 0 0 16px; font-size: 15px; color: var(--muted); }
.mk-demo-label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--muted); }
.mk-demo-row { display: flex; gap: 10px; flex-wrap: wrap; }
.mk-demo-input {
  flex: 1 1 200px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--ink); color: var(--text); font: inherit;
}
.mk-demo-status { margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; font-size: 14px; }
.mk-demo-status--ok { background: rgb(63 154 104 / .18); color: var(--green-hi); }
.mk-demo-status--invalid, .mk-demo-status--error { background: rgb(232 184 75 / .14); color: var(--gold); }
.mk-demo-alt { margin: 16px 0 0; font-size: 13px; color: var(--muted); }
.mk-demo a:focus-visible, .mk-demo button:focus-visible, .mk-demo-input:focus-visible {
  outline: 2px solid var(--green-hi); outline-offset: 2px;
}

/* ───── 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 Geo Sales teaser 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); }
/* The homepage hero's two figures (DMR-2069): two columns at every width, kept close together. */
.mk-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 440px; }
/* The Geo Sales teaser (DMR-2066): one framed panel, the map image on top and the "Shops
   selling each brand" table attached under it (an overlapping card hid the map's territory
   profile and legend). The table follows /coverage's .mk-cov-t. Bars are inline SVG, so
   their length is an attribute, not an inline style. */
.mk-teaser { display: grid; margin: 0; min-width: 0; }
.mk-teaser-map { display: block; border: 1px solid var(--line); border-bottom: 0; border-radius: 14px 14px 0 0; overflow: hidden; }
.mk-teaser-map img { display: block; width: 100%; height: auto; }
.mk-teaser-card {
  min-width: 0; overflow: hidden; background: var(--ink-2);
  border: 1px solid var(--line); border-radius: 0 0 14px 14px; box-shadow: 0 18px 40px rgb(0 0 0 / .35);
}
table.mk-teaser-t { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.mk-teaser-t caption {
  caption-side: top; padding: 14px 16px 10px; text-align: left;
  font: 600 16px/1.3 var(--display); color: var(--text);
}
.mk-teaser-t caption span { display: block; margin-top: 2px; font: 400 13px var(--body); color: var(--muted); }
.mk-teaser-t th, .mk-teaser-t td { padding: 7px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.mk-teaser-t thead th {
  border-top: 1px solid var(--line); font: 700 11.5px var(--body); letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.mk-teaser-t tbody th { font-weight: 600; color: var(--text); }
.mk-teaser-t td { color: var(--muted); }
.mk-teaser-t tbody tr:last-child th, .mk-teaser-t tbody tr:last-child td { border-bottom: 0; }
.mk-teaser-t .mk-teaser-r { text-align: right; }
.mk-teaser-share { display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; white-space: nowrap; }
.mk-teaser-bar { width: 72px; height: 6px; fill: var(--green); }
.mk-teaser-bar .mk-teaser-track { fill: var(--line); }
.mk-teaser-this th, .mk-teaser-this td { background: rgb(232 184 75 / .08); color: var(--text); }
.mk-teaser-this .mk-teaser-bar { fill: var(--gold); }
.mk-teaser-tag {
  margin-left: 6px; font: 700 10.5px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--gold);
}
.mk-teaser-cap { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.mk-teaser-cap small { flex-basis: 100%; font-size: 11.5px; }
.mk-teaser a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* The sales-potential section under the hero (DMR-2079): three steps, then one view of two
   panels. The province bars are the Geo Sales page's own chart (mk-gs-bars / mk-gs-pbar,
   further down); this block lays out the steps, the panels, the shop table and the caption. */
.mk-pot-steps {
  list-style: none; margin: 40px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
}
/* Four steps since DMR-2115: one row on a wide screen, two by two below 1100px, stacked below
   700px (the 700px block further down). */
@media (max-width: 1100px) { .mk-pot-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mk-pot-steps li {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px;
}
.mk-pot-n { flex: none; font: 500 13px/1 var(--mono); color: var(--ink); background: var(--gold); border-radius: 6px; padding: 5px 8px; }
/* The badge says whose step it is (DMR-2115): gold the customer's data, green ours and our
   model, the ramp's end the output. */
.mk-pot-steps li:nth-child(2) .mk-pot-n,
.mk-pot-steps li:nth-child(3) .mk-pot-n { background: var(--green-hi); }
.mk-pot-steps li:nth-child(4) .mk-pot-n { background: var(--s4); }
.mk-pot-step-t { margin: 0; font: 700 17px/1.3 var(--body); color: var(--text); }
.mk-pot-steps p { margin: 2px 0 0; font-size: 15px; color: var(--muted); }
.mk-pot-view { margin: 28px 0 0; min-width: 0; }
.mk-pot-panels {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
}
.mk-pot-panel { min-width: 0; padding: 22px 0 8px; }
.mk-pot-panel + .mk-pot-panel { border-left: 1px solid var(--line); }
.mk-pot-head { padding: 0 20px; }
.mk-pot-t { margin: 0; font: 600 20px/1.25 var(--display); color: var(--text); }
.mk-pot-sub { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.mk-pot-panel .mk-gs-bars { padding: 18px 20px 8px; }
.mk-pot-panel .mk-gs-bar-key { padding: 4px 20px 14px; }
/* The shop table scrolls inside its own box at phone width, never the page. */
.mk-pot-tbl-wrap { overflow-x: auto; margin-top: 10px; }
table.mk-pot-t { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.mk-pot-t th, .mk-pot-t td { padding: 9px 20px; border-top: 1px solid var(--line); text-align: left; vertical-align: middle; }
.mk-pot-t thead th {
  border-top: 0; padding-block: 6px;
  font: 600 11px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.mk-pot-t tbody th { font-weight: 600; color: var(--text); }
.mk-pot-t tbody th small { display: block; font-weight: 400; font-size: 13px; color: var(--muted); }
.mk-pot-t .mk-pot-rank { width: 1%; padding-right: 0; font: 500 13px var(--mono); color: var(--muted); }
.mk-pot-t .mk-pot-r { text-align: right; white-space: nowrap; }
.mk-pot-t td.mk-pot-r { font: 500 13.5px var(--mono); color: var(--s4); }
.mk-pot-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.mk-pot-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.mk-pot a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* 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; }
.mk-src-more { margin: 10px 0 0; font-size: 14px; }

/* ───── SOURCES PAGE (DMR-2114 — templates/marketing/sources.html) ─────
   One card per public source, grouped worldwide / Europe / per country, its datasets listed
   under it. Cards sit two across, one on phones; long names and links wrap. */
.mk-srcpage-h1 { margin: 6px 0 0; }
.mk-srcpage-lead { max-width: 64ch; }
.mk-srcpage-count { display: block; margin-top: 8px; font: 500 13px var(--mono); color: var(--muted); }
.mk-srcpage-unavailable { margin: 28px 0 0; color: var(--muted); }
.mk-srcpage-group { margin: 40px 0 0; }
.mk-srcpage-group-title { margin: 0 0 14px; }
/* Two flowing columns, not a grid: a grid row is as tall as its tallest card, which left a
   gap under every short card. Each card now sits right under the one above it. */
.mk-srcpage-grid { columns: 2; column-gap: 16px; }
.mk-srcpage-card {
  display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 20px 22px;
  break-inside: avoid; margin: 0 0 16px;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px;
}
.mk-srcpage-name { margin: 0; font: 700 18px/1.3 var(--body); color: var(--text); overflow-wrap: anywhere; }
.mk-srcpage-meta { margin: 0; font: 500 12px var(--mono); letter-spacing: .04em; color: var(--muted); }
.mk-srcpage-desc { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text); }
.mk-srcpage-datasets {
  list-style: none; margin: 4px 0 0; padding: 10px 0 0; display: grid; gap: 8px;
  border-top: 1px solid var(--line); font-size: 14px;
}
.mk-srcpage-datasets li { display: grid; gap: 2px; overflow-wrap: anywhere; }
.mk-srcpage-dataset-name { font-weight: 600; color: var(--text); }
.mk-srcpage-dataset-desc { color: var(--muted); }
.mk-srcpage-foot {
  margin: 0; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 6px 18px;
  font-size: 14px; color: var(--muted);
}
@media (max-width: 700px) { .mk-srcpage-grid { columns: 1; } }

/* 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); }
/* Signed out, in place of the country table (DMR-2067): the count and a sign-up. */
.mk-cov-locked {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px;
  padding: 18px 24px; border-top: 1px solid var(--line);
}
.mk-cov-locked p { margin: 0; max-width: 560px; color: var(--muted); }
.mk-cov-locked-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.mk-cov-locked .mk-btn { white-space: nowrap; }
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-sub { margin: 22px 0 0; font-family: var(--body); font-size: 16px; font-weight: 600; color: var(--text); }
.mk-terms-section ul { margin: 12px 0 0; padding-left: 20px; color: var(--muted); line-height: 1.7; max-width: 70ch; }
.mk-terms-section li + li { margin-top: 8px; }
.mk-terms-section li strong { color: var(--text); }
.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-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-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; }
/* No Developers column while the developer docs are off (DMR-2111). */
.mk-footer-grid--no-dev { grid-template-columns: 1.4fr repeat(2, minmax(0, 1fr)); }
.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-cards.mk-cards--2, .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; }
  /* The potential section: panels stack (DMR-2079); the steps go two by two (DMR-2115). */
  .mk-pot-panels { grid-template-columns: minmax(0, 1fr); }
  .mk-pot-panel + .mk-pot-panel { border-left: 0; border-top: 1px solid var(--line); }
}
@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); }
  .mk-pot-steps { grid-template-columns: minmax(0, 1fr); }  /* DMR-2115: the steps stack */
}
@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-locked { padding: 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 teaser's table tightens rather than scrolling. */
  .mk-teaser-t th, .mk-teaser-t td { padding: 7px 12px; }
  .mk-teaser-bar { width: 48px; }
  .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; }
}