/* =============================================================================
 * marketplace.css — the /companies/ catalogue. Loaded ONLY by that section.
 *
 * Deliberately a separate file rather than an addition to styles.css: this section adds 300+
 * pages, and putting its rules in the stylesheet every other page loads would make every
 * unrelated deploy a cache-busting event for the whole site.
 *
 * Everything here reuses the tokens of styles.css (--gold, --panel, --line, --rcard, the --tb-*
 * type scale). No new colours, no new radii, no new type ramp.
 *
 * TYPE FOLLOWS BLOCK-CATALOG §0, not taste (redesign 2026-09-23, owner: "увеличить шрифт
 * согласно правилам"). The first version set card facts at 10.5–14.5px and filter labels at
 * 14.5px — below the catalogue's own floors (13px mono label, 14px text; 15.5px card text on a
 * phone). Every size below is either a --tb-* token or sits on one of those floors.
 *
 * The three viewport tiers of the project hold: >=1440 desktop, 700–1440 fluid, <=700 mobile.
 * ========================================================================== */

.mk-body { background: var(--bg); }

/* Vertical rhythm. styles.css gives every `section` clamp(120px, 18vh, 260px) of breathing room,
   which is right for a jurisdiction page built as a scroll narrative and wrong here: a catalogue
   is a working surface, and six short sections at 260px apart is three thousand pixels of empty
   dark. Halving it keeps the same blocks and the same type scale at a density you can actually
   scan. Scoped to .mk-body so no other page is touched. */
.mk-body section { padding-block: clamp(56px, 8vh, 110px); }
.mk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── hero: scene 0 of a flow story, figure right, text left ────────────────────────────────
   The same composition every jurisdiction page opens with (mica-latvia's flow block, BLOCK-
   CATALOG §2.12). styles.css defines .scene for the PINNED model — absolute, centred, opacity 0
   until the choreographer fades it in — so the flow overrides below are what make it a normal
   block in the document. Without them the hero text sits at opacity 0 over an empty screen. */
.mk-story .story-stage { position: static; height: auto; overflow: visible; }
.mk-story .scene {
  position: relative; inset: auto; display: block; pointer-events: auto;
  min-height: min(86vh, 920px);
  padding: clamp(104px, 14vh, 150px) 6vw clamp(40px, 6vh, 80px);
  text-align: left;
}
/* A hero with no stat cards under it is a heading and two lines: held at 86vh it left a 300px
   empty band before the next block. It still keeps enough height for the figure beside it. */
.mk-story .scene:not(:has(.mk-stats)):not(:has(.mk-price-box)) { min-height: min(68vh, 700px); }
.mk-story .scene-head,
.mk-story .scene-body,
.mk-story .scene-body > * { opacity: 1; transform: none; }
/* `.scene[data-fig="0"]` in the selectors below is not decoration: styles.css centres the
   homepage hero with `.scene[data-fig="0"] .scene-body{align-items:center;text-align:center}`
   (0,3,0), and a plain `.mk-story .scene-body` (0,2,0) loses to it — the first build had the
   heading left-aligned and the lead and buttons centred under it. */
.mk-story .scene[data-fig="0"] .scene-head { width: min(50vw, 820px); transform-origin: left center; text-align: left; }
.mk-story .scene[data-fig="0"] .scene-body { width: min(50vw, 760px); align-items: flex-start; text-align: left; gap: 0; }
.mk-story .scene-head :is(h1, h2) {
  font-size: clamp(34px, 3.7vw, 66px); line-height: .98; text-align: left; margin: 0;
  text-wrap: balance;
}
.mk-story .scene-body > .lead:first-child,
.mk-story .scene-body .lead {
  margin: var(--tb-gap-heading) 0 0; font-size: var(--tb-lead-hero) !important; max-width: 56ch;
  color: #c7cedd;
}
.mk-story .lead .flag { width: 24px; height: 17px; margin-right: 10px; vertical-align: -2px; border-radius: 3px; }
.mk-story .hero-ctas {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: calc(var(--tb-gap-body) + 8px);
}
.mk-story .hero-ctas .btn { text-decoration: none; }
.mk-story .hero-ctas .copy-link { font-size: 17px; }

/* Hero stats — three separate cards with the gold top rule, as on mica-latvia. */
.mk-story .scene[data-fig="0"] .stats.mk-stats {
  position: static; display: grid !important; grid-template-columns: repeat(3, 1fr);
  gap: 14px !important; width: min(760px, 100%) !important; margin-top: clamp(28px, 4.5vh, 48px);
}
.mk-story .scene[data-fig="0"] .mk-stats .stat {
  border: 1px solid var(--line); border-top: 2px solid var(--gold); border-radius: 14px;
  background: rgba(10, 12, 22, .55); backdrop-filter: blur(9px);
  padding: 14px 18px 16px !important;
}
.mk-story .mk-stats .stat .num { font-size: var(--tb-stat-num-sub); }
.mk-story .mk-stats .stat p { font-size: var(--tb-p-card); margin-top: 8px; max-width: 26ch; line-height: 1.4; }

/* ── breadcrumbs: a quiet line above the eyebrow, inside the text column ─────────────────── */
.mk-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px;
  font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.mk-crumbs a { color: var(--muted); text-decoration: none; transition: color .2s; }
.mk-crumbs a:hover { color: var(--gold); }
.mk-crumbs i { font-style: normal; opacity: .45; }
.mk-crumbs span[aria-current] { color: var(--body); }

/* ── listing hero: chips + price box under the title ───────────────────────────────────── */
.mk-hero-listing .scene-head :is(h1, h2) { font-size: clamp(30px, 3.2vw, 56px); }
.mk-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--tb-gap-heading); }
.mk-price-box {
  margin-top: clamp(22px, 3vh, 34px); border: 1px solid var(--line2); border-radius: var(--rcard);
  background: var(--panel); backdrop-filter: blur(9px); padding: clamp(22px, 2.4vw, 32px);
  width: min(620px, 100%);
}
.mk-price-main { font-family: Anton, sans-serif; font-size: clamp(38px, 4vw, 58px); color: var(--ink); line-height: 1; }
.mk-price-main .mk-poa { font-size: clamp(22px, 2vw, 30px); }
.mk-price-note { font-size: var(--tb-p-card); color: var(--body); margin: 14px 0 22px; max-width: 54ch; line-height: 1.5; }
.mk-stale { font-size: 14px; color: var(--gold-soft); margin: 14px 0 0; }
.mk-cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.mk-cta-row .pill { text-decoration: none; }
.mk-price-box .mk-add { font-size: 16px; padding: 14px 24px; }

/* ── A.I. Overview: the block language models quote ────────────────────────────────────── */
.mk-aio {
  border: 1px solid var(--line2); border-radius: var(--rcard); background: var(--panel);
  backdrop-filter: blur(9px); padding: clamp(24px, 2.6vw, 38px);
  border-left: 3px solid var(--gold);
}
.mk-aio-h {
  font-family: "JetBrains Mono", monospace; font-size: clamp(14px, 1.5vw, 16px); font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px;
}
.mk-aio > p { font-size: var(--tb-lead); line-height: 1.55; color: var(--body); max-width: 70ch; margin: 0; }
.mk-facts { width: 100%; border-collapse: collapse; margin-top: 24px; }
.mk-facts th, .mk-facts td {
  text-align: left; padding: 14px 0; border-top: 1px solid var(--line);
  line-height: 1.45; vertical-align: top;
}
.mk-facts th {
  width: 32%; color: var(--muted); font-weight: 400; padding-right: 18px;
  font-family: "JetBrains Mono", monospace; font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
}
.mk-facts td { color: var(--ink); font-size: clamp(16px, 1.35vw, 19px); hyphens: auto; overflow-wrap: anywhere; }

/* ── the constraint strip ──────────────────────────────────────────────────────────────── */
.mk-constraint { padding-top: clamp(26px, 3vw, 40px); }
.mk-constraint-in {
  border: 1px solid rgba(255, 184, 42, .32); border-radius: var(--rcard);
  background: linear-gradient(180deg, rgba(255, 184, 42, .07), rgba(255, 184, 42, .02));
  padding: clamp(22px, 2.4vw, 32px);
}
.mk-constraint-in p { margin: 10px 0 0; font-size: var(--tb-lead); line-height: 1.5; color: var(--ink); max-width: 72ch; }

/* ── catalogue layout: rail + results ──────────────────────────────────────────────────── */
/* The catalogue is the one section that outgrows the site's 1200px measure: subtract the filter
   rail and two cards are all that fit, which on a 1920 screen reads as a broken grid rather than
   a wide one. 1520 gives three columns from ~1700 up and changes nothing below it. */
.mk-catalogue { padding-top: clamp(34px, 4vw, 60px); max-width: min(94vw, 1520px); }
.mk-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(22px, 2.6vw, 40px); align-items: start; }
.mk-rail { position: sticky; top: 96px; }
.mk-facet-toggle { display: none; }

.mk-facets {
  border: 1px solid var(--line); border-radius: var(--rcard); background: var(--panel);
  backdrop-filter: blur(9px); padding: 8px 20px 10px;
  max-height: calc(100vh - 124px); overflow: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .16) transparent;
}
/* Sheet controls: invisible on desktop, essential on a phone. */
.mk-sheet-close, .mk-sheet-apply { display: none; }
.mk-facet-head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 14px 0 14px; border-bottom: 1px solid var(--line);
}
.mk-facet-head > span {
  font-family: "JetBrains Mono", monospace; font-size: clamp(14px, 1.5vw, 16px); font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase; color: var(--gold);
}
.mk-reset {
  background: none; border: 0; color: var(--muted); cursor: pointer; padding: 8px 2px; min-height: 36px;
  font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  transition: color .2s;
}
.mk-reset:hover { color: var(--gold); }

/* A group folds on its summary. The summary is the group's title, its active-count badge and
   a caret that turns — nothing else, so the whole row is one tap target. */
.mk-facet { border-bottom: 1px solid var(--line); }
.mk-facet:last-of-type { border-bottom: 0; }
.mk-facet > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  padding: 16px 0; min-height: 52px; user-select: none;
}
.mk-facet > summary::-webkit-details-marker { display: none; }
.mk-facet > summary > span {
  flex: 1; font-size: 16px; font-weight: 600; letter-spacing: .02em; color: var(--ink);
}
.mk-facet > summary:hover > span { color: var(--gold); }
.mk-facet-on {
  font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 700; color: #10131c;
  background: var(--gold); border-radius: 999px; min-width: 24px; height: 24px; padding: 0 7px;
  display: inline-grid; place-items: center;
}
.mk-facet-on:empty { display: none; }
.mk-caret {
  width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s cubic-bezier(.2, .7, .2, 1), border-color .2s;
}
.mk-facet[open] > summary .mk-caret { transform: rotate(225deg) translate(-2px, -2px); border-color: var(--gold); }
.mk-opts { padding: 0 0 16px; display: flex; flex-direction: column; gap: 2px; }
.mk-facet[open] .mk-opts { animation: mk-drop .28s cubic-bezier(.2, .7, .2, 1); }
@keyframes mk-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* One option: the native input is kept (form state, keyboard, screen readers) but visually
   replaced by .mk-box, which is the thing the eye reads. */
.mk-opt {
  position: relative; display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 7px 8px; margin: 0 -8px; min-height: 42px; border-radius: 12px;
  font-size: 16px; line-height: 1.3; color: var(--body); transition: background .2s, color .2s;
}
.mk-opt:hover { background: rgba(255, 255, 255, .04); color: var(--ink); }
/* The native input lies exactly over the drawn box, transparent, as the real click target.
   Shrunk to 1px it was unreachable to anything that clicks the control itself rather than its
   label — assistive tech, autofill, the flow test — and the drawn box swallowed the click. */
.mk-opt > input {
  position: absolute; left: 8px; top: 50%; width: 20px; height: 20px; margin: -10px 0 0;
  opacity: 0; cursor: pointer; z-index: 1;
}
.mk-opt > span { flex: 1; min-width: 0; }
.mk-box {
  flex: none; width: 20px; height: 20px; border-radius: 6px;
  border: 1.5px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .03);
  display: grid; place-items: center; transition: background .18s, border-color .18s, box-shadow .18s;
}
.mk-box-radio { border-radius: 50%; }
.mk-box::after {
  content: ""; width: 10px; height: 6px; border-left: 2px solid #10131c; border-bottom: 2px solid #10131c;
  transform: rotate(-45deg) translate(1px, -1px) scale(.4); opacity: 0;
  transition: transform .18s cubic-bezier(.2, .7, .2, 1.4), opacity .18s;
}
.mk-box-radio::after { width: 8px; height: 8px; border: 0; border-radius: 50%; background: #10131c; transform: scale(.4); }
.mk-opt > input:checked + .mk-box { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 4px rgba(255, 184, 42, .14); }
.mk-opt > input:checked + .mk-box::after { opacity: 1; transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.mk-opt > input:checked + .mk-box-radio::after { transform: scale(1); }
.mk-opt > input:checked ~ span { color: var(--ink); }
.mk-opt > input:focus-visible + .mk-box { box-shadow: 0 0 0 3px rgba(255, 184, 42, .35); }
.mk-opt .flag { width: 22px; height: 15px; border-radius: 3px; flex: none; }
.mk-count {
  font-style: normal; font-family: "JetBrains Mono", monospace; font-size: 13px; color: var(--muted);
  min-width: 24px; text-align: right;
}
.mk-count:empty { display: none; }
.mk-facet-search {
  width: 100%; background: rgba(255, 255, 255, .04); border: 1px solid var(--line2);
  border-radius: 999px; padding: 11px 16px; color: var(--ink); font: inherit; font-size: 15px;
  margin-bottom: 6px; transition: border-color .2s, box-shadow .2s;
}
.mk-facet-search:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 184, 42, .22); }
.mk-facet-grp[hidden], .mk-opt[hidden] { display: none; }
.mk-facet-grp > b {
  display: block; font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  margin: 14px 0 4px;
}
.mk-range-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 2px 0 8px; }
.mk-range-row label {
  display: block; font-family: "JetBrains Mono", monospace; font-size: 13px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em;
}
.mk-range-row input {
  width: 100%; margin-top: 6px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line2);
  border-radius: 12px; padding: 11px 12px; color: var(--ink); font: inherit; font-size: 16px;
  font-variant-numeric: tabular-nums; transition: border-color .2s, box-shadow .2s;
}
.mk-range-row input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 184, 42, .22); }
.mk-pills { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px; }
.mk-pill-check { position: relative; cursor: pointer; }
.mk-pill-check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.mk-pill-check span {
  display: inline-flex; align-items: center; min-height: 40px;
  border: 1px solid var(--line2); border-radius: 999px; padding: 8px 15px; font-size: 15px; color: var(--body);
  transition: border-color .2s, background .2s, color .2s;
}
.mk-pill-check:hover span { border-color: rgba(255, 184, 42, .5); color: var(--ink); }
.mk-pill-check input:checked + span { border-color: var(--gold); background: rgba(255, 184, 42, .14); color: var(--ink); }
.mk-pill-check input:focus-visible + span { box-shadow: 0 0 0 3px rgba(255, 184, 42, .35); }

/* ── results ───────────────────────────────────────────────────────────────────────────── */
.mk-results { min-width: 0; }
.mk-results-head {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 18px;
}
.mk-result-count {
  font-family: Anton, sans-serif; font-size: clamp(22px, 1.9vw, 28px); letter-spacing: .01em;
  text-transform: uppercase; color: var(--ink);
}
.mk-sort {
  font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); display: flex; align-items: center; gap: 10px;
}
.mk-sort select {
  appearance: none; -webkit-appearance: none;
  background: rgba(255, 255, 255, .04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffb82a' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px;
  border: 1px solid var(--line2); border-radius: 999px; min-height: 42px;
  color: var(--ink); font-family: Inter, sans-serif; font-size: 15px; letter-spacing: 0; text-transform: none;
  padding: 9px 38px 9px 16px; cursor: pointer; transition: border-color .2s;
}
.mk-sort select:hover, .mk-sort select:focus { border-color: var(--gold); outline: none; }
.mk-sort select option { background: #0a0c16; color: var(--ink); }

/* What is applied, removable one by one. Without this row a folded filter group is a filter
   the buyer forgot they set — and "why are there only two companies?" has no visible answer. */
.mk-active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 20px; }
.mk-active[hidden] { display: none; }
.mk-active button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer;
  border: 1px solid rgba(255, 184, 42, .5); background: rgba(255, 184, 42, .1); color: var(--ink);
  border-radius: 999px; padding: 6px 12px 6px 14px; font: inherit; font-size: 14.5px;
  transition: background .2s, border-color .2s; animation: mk-pop .22s cubic-bezier(.2, .7, .2, 1.3);
}
.mk-active button::after { content: "×"; font-size: 18px; line-height: 1; color: var(--gold); }
.mk-active button:hover { background: rgba(255, 184, 42, .2); border-color: var(--gold); }
.mk-active .mk-clear { border-color: transparent; background: none; color: var(--muted); animation: none; }
.mk-active .mk-clear::after { content: none; }
.mk-active .mk-clear:hover { background: none; color: var(--gold); }
@keyframes mk-pop { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }

/* Cards sit on an even grid, so an optional field can never make one card taller than its
   neighbour. `auto-fill` (not auto-fit) keeps the last row left-aligned instead of stretching
   one lonely card across the full width — the classic ragged-last-row defect of §17.2.
   360px minimum: at the catalogue's type sizes a narrower card breaks the title into four
   lines and the three facts into a stack. */
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 20px; }
/* Without a filter rail the results have the full measure. */
.mk-grid-plain { margin-top: 30px; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }

.mk-card {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--rcard);
  padding: 24px 24px 22px; backdrop-filter: blur(9px);
  transition: border-color .25s, transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s;
}
/* The site-wide card hover (BLOCK-CATALOG §0), with the scale held to 1.02: at 1.05 a card in a
   three-column grid grows 18px into the 20px gutter and touches its neighbour. */
.mk-card:hover {
  border-color: rgba(255, 184, 42, .6); transform: translateY(-5px) scale(1.02);
  box-shadow: 0 26px 56px -22px rgba(255, 184, 42, .45); z-index: 1;
}
/* Cards that come back after a filter change arrive, they do not blink in. The delay steps
   with the card's order (set by marketplace.js), so a row reads left to right. */
.mk-card.mk-in { animation: mk-rise .42s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes mk-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.mk-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mk-card-where {
  display: inline-flex; align-items: center; gap: 9px; min-width: 0;
  font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mk-card-where .flag { width: 22px; height: 15px; border-radius: 3px; flex: none; }
.mk-chip {
  font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line2); color: var(--muted); white-space: nowrap; flex: none;
}
.mk-chip-protegra { border-color: rgba(255, 184, 42, .5); color: var(--gold); }
.mk-chip-partner { border-color: rgba(128, 82, 255, .5); color: var(--violet-soft); }
.mk-chip-network { border-color: rgba(0, 153, 204, .5); color: var(--cyan-soft); }
.mk-chip-ref { border-style: dashed; }
.mk-chip-status[data-status="available"] { color: #7fdca4; border-color: rgba(127, 220, 164, .45); background: rgba(127, 220, 164, .06); }
.mk-chip-status[data-status="available"]::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #7fdca4;
  margin-right: 7px; vertical-align: 1px; animation: mk-live 2.4s ease-in-out infinite;
}
@keyframes mk-live { 0%, 100% { box-shadow: 0 0 0 0 rgba(127, 220, 164, .5); } 50% { box-shadow: 0 0 0 5px rgba(127, 220, 164, 0); } }
.mk-chip-status[data-status="under_offer"], .mk-chip-status[data-status="reserved"] { color: var(--gold-soft); border-color: rgba(255, 210, 122, .4); }
.mk-chip-status[data-status="on_request"] { color: var(--cyan-soft); border-color: rgba(51, 182, 230, .4); }
.mk-chip-status[data-status="sold"] { color: var(--muted); text-decoration: line-through; }

/* The title is never clamped. An ellipsis on "Maltese CASP company, operating since…" cut the
   one word a buyer was reading for; two lines are reserved so bodies still line up. */
.mk-card h3 {
  font-family: Anton, sans-serif !important; font-weight: 400 !important; text-transform: uppercase;
  font-size: var(--tb-card-h) !important; line-height: 1.08; letter-spacing: .01em; margin: 2px 0 0;
  min-height: 2.16em; text-wrap: balance; hyphens: manual; overflow-wrap: break-word;
}
.mk-card h3 a { color: var(--ink); text-decoration: none; transition: color .2s; }
.mk-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }   /* whole card clicks through */
.mk-card:hover h3 a { color: var(--gold-soft); }
.mk-card-lic {
  margin: 0; font-size: var(--tb-p-card); color: var(--body); line-height: 1.45;
  hyphens: auto; overflow-wrap: break-word; min-height: 2.9em;
}
.mk-card-spec {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 2px 0 0;
  padding: 16px 0 0; border-top: 1px solid var(--line);
}
.mk-card-spec dt {
  font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.mk-card-spec dd { margin: 6px 0 0; font-size: clamp(15.5px, 1.2vw, 17px); font-weight: 500; color: var(--ink); line-height: 1.3; }
.mk-card-foot {
  position: relative; z-index: 2;   /* above the card-wide link, so the button stays its own target */
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.mk-price-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mk-src {
  font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.mk-src-protegra { color: var(--gold); }
.mk-price { font-family: Anton, sans-serif; font-size: clamp(28px, 2.3vw, 36px); color: var(--ink); line-height: 1; letter-spacing: .01em; }
.mk-price i { font-family: Inter, sans-serif; font-style: normal; font-size: 15px; color: var(--muted); letter-spacing: 0; }
/* A POA card must not read as broken. The price slot is always filled — with words, at the same
   optical weight as a number. */
.mk-poa { font-family: Inter, sans-serif; font-size: 18px; font-weight: 500; color: var(--gold); letter-spacing: .01em; }

/* The shortlist button: gold outline at rest, solid gold with a tick once added. */
.mk-add {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-height: 44px;
  padding: 10px 18px 10px 14px; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 500;
  color: var(--ink); background: rgba(255, 184, 42, .06); border: 1px solid rgba(255, 184, 42, .55);
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.mk-add svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform .3s cubic-bezier(.2, .7, .2, 1.4); }
.mk-add:hover { background: rgba(255, 184, 42, .16); border-color: var(--gold); transform: translateY(-1px); }
.mk-add[data-in="1"] { background: var(--gold); border-color: var(--gold); color: #10131c; }
.mk-add[data-in="1"] svg { transform: rotate(0deg); }
.mk-add.mk-bump { animation: mk-bump .42s cubic-bezier(.2, .7, .2, 1.4); }
@keyframes mk-bump { 0% { transform: scale(1); } 35% { transform: scale(1.1); } 100% { transform: scale(1); } }
.mk-ask {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px;
  border-radius: 999px; border: 1px solid rgba(255, 184, 42, .55); color: var(--ink); text-decoration: none;
  font-size: 15px; font-weight: 500; transition: background .2s, border-color .2s;
}
.mk-ask em { font-style: normal; color: var(--gold); transition: transform .2s; }
.mk-ask:hover { background: rgba(255, 184, 42, .14); border-color: var(--gold); }
.mk-ask:hover em { transform: translateX(3px); }
.mk-card-poa .mk-poa-note { font-size: var(--tb-p-card); color: var(--body); line-height: 1.5; margin: 0; }
.mk-range { font-size: 15px; color: var(--body); margin: 0; line-height: 1.5; }
.mk-range b { color: var(--ink); font-weight: 500; }
.mk-range i { display: block; color: var(--muted); font-style: normal; font-family: "JetBrains Mono", monospace; font-size: 13px; margin-top: 2px; }
.mk-range-none { color: var(--muted); }

.mk-empty {
  text-align: center; padding: clamp(48px, 7vw, 90px) 24px; color: var(--body);
  border: 1px dashed var(--line2); border-radius: var(--rcard); background: rgba(10, 12, 22, .45);
}
.mk-empty[hidden] { display: none; }
.mk-empty p { margin: 0 auto 22px; max-width: 52ch; font-size: var(--tb-p-card); line-height: 1.55; }

/* ── tiles, steps, comparison ──────────────────────────────────────────────────────────── */
.mk-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-top: 40px; }
.mk-tile {
  display: flex; align-items: center; gap: 16px; text-decoration: none; min-height: 84px;
  border: 1px solid var(--line); border-radius: var(--rcard); background: var(--panel);
  padding: 18px 20px; transition: border-color .25s, transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s;
}
.mk-tile:hover { border-color: rgba(255, 184, 42, .6); transform: translateY(-4px); box-shadow: 0 20px 44px -22px rgba(255, 184, 42, .45); }
.mk-tile .flag { width: 34px; height: 24px; border-radius: 4px; flex: none; }
/* The name and the count are one stacked unit beside the flag. Left as bare siblings of the
   flag they became a third and fourth flex column, and the count landed next to the name. */
.mk-tile-t { min-width: 0; flex: 1; }
.mk-tile b { display: block; color: var(--ink); font-size: 18px; font-weight: 600; line-height: 1.2; }
.mk-tile-t > span { display: block; font-family: "JetBrains Mono", monospace; font-size: 13px; color: var(--muted); margin-top: 5px; letter-spacing: .04em; }
.mk-tile::after { content: "⟶"; color: var(--gold); opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .2s; }
.mk-tile:hover::after { opacity: 1; transform: none; }

.mk-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--tb-card-gap); margin-top: 40px; }
.mk-step {
  border: 1px solid var(--line); border-radius: var(--rcard); background: var(--panel); padding: 26px 24px;
  transition: border-color .25s, transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s;
}
.mk-step:hover { border-color: rgba(255, 184, 42, .6); transform: translateY(-5px); box-shadow: 0 26px 56px -22px rgba(255, 184, 42, .45); }
.mk-step b { font-family: "JetBrains Mono", monospace; font-size: clamp(14px, 1.1vw, 16px); font-weight: 700; color: var(--gold); letter-spacing: .05em; }
.mk-step h3 { font-family: Anton, sans-serif !important; font-weight: 400 !important; text-transform: uppercase; font-size: var(--tb-card-h) !important; margin: 12px 0 12px; }
.mk-step p { font-size: var(--tb-p-card); color: var(--body); line-height: 1.5; margin: 0; }

.mk-two, .mk-compare { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.2vw, 34px); margin-top: 40px; }
.mk-two > div, .mk-compare-col { border: 1px solid var(--line); border-radius: var(--rcard); background: var(--panel); padding: clamp(22px, 2.4vw, 32px); }
.mk-two h3, .mk-compare-col h3 { font-family: Anton, sans-serif !important; font-weight: 400 !important; text-transform: uppercase; font-size: var(--tb-card-h) !important; margin: 0 0 16px; }
.mk-list, .mk-compare-col ul { list-style: none; padding: 0; margin: 0; }
.mk-list li, .mk-compare-col li { position: relative; padding-left: 24px; margin-bottom: 10px; font-size: var(--tb-p-card); color: var(--body); line-height: 1.5; }
.mk-list li::before, .mk-compare-col li::before { content: '—'; position: absolute; left: 0; color: var(--gold); }
.mk-compare-col .pill { margin: 14px 8px 0 0; text-decoration: none; }
.mk-note { font-size: 15px; color: var(--muted); margin-top: 18px; }
.mk-note .pill { text-decoration: none; }

/* ── CTA ───────────────────────────────────────────────────────────────────────────────── */
.mk-cta { padding-top: clamp(40px, 5vw, 80px); padding-bottom: clamp(40px, 5vw, 80px); }
.mk-cta-in {
  border: 1px solid var(--line2); border-radius: var(--rcard);
  background: linear-gradient(180deg, rgba(128, 82, 255, .10), rgba(10, 12, 22, .8));
  padding: clamp(30px, 3.6vw, 58px); text-align: center;
}
.mk-cta-in h2 { font-family: Anton, sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(28px, 3.2vw, 48px); margin: 0 0 16px; color: var(--ink); }
.mk-cta-in p { max-width: 60ch; margin: 0 auto 28px; color: var(--body); font-size: var(--tb-lead); line-height: 1.5; }
.mk-cta-in .mk-cta-row { justify-content: center; }
.mk-cta-in .btn { text-decoration: none; }

/* ── shortlist bar and page ────────────────────────────────────────────────────────────── */
.mk-bar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 22px; z-index: 40;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center;
  background: rgba(10, 12, 22, .94); border: 1px solid rgba(255, 184, 42, .35); border-radius: 999px;
  padding: 12px 14px 12px 24px; backdrop-filter: blur(12px);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 184, 42, .08);
  max-width: min(700px, calc(100vw - 32px));
  animation: mk-bar-in .38s cubic-bezier(.2, .7, .2, 1);
}
@keyframes mk-bar-in { from { opacity: 0; transform: translate(-50%, 24px); } to { opacity: 1; transform: translate(-50%, 0); } }
.mk-bar[hidden] { display: none; }
.mk-bar-text { font-size: 15.5px; color: var(--body); }
.mk-bar-text b { color: var(--gold); font-size: 17px; }
.mk-bar .btn { padding: 12px 24px; font-size: 15.5px; text-decoration: none; }

.mk-compare-wrap { overflow-x: auto; margin-top: 30px; }
/* With nothing shortlisted the table collapses to zero height and the section's own generous
   padding leaves a 250px hole between the lead and the one sentence telling you what to do.
   When the empty state is showing, the section shrinks to fit it. */
.mk-body section:has(#compare-empty:not([hidden])) { padding-block: clamp(16px, 2vh, 30px); }
.mk-compare-wrap:has(.mk-compare-table[hidden]) { margin-top: 0; }
.mk-compare-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.mk-compare-table th, .mk-compare-table td { text-align: left; padding: 16px 16px; border-bottom: 1px solid var(--line); font-size: 16px; color: var(--body); vertical-align: top; }
.mk-compare-table thead th { font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mk-compare-table td b { color: var(--ink); }
.mk-drop { background: none; border: 0; color: var(--muted); font-size: 22px; cursor: pointer; line-height: 1; min-width: 36px; min-height: 36px; }
.mk-drop:hover { color: var(--gold); }
.mk-total { margin-top: 20px; font-family: Anton, sans-serif; font-size: clamp(22px, 2.2vw, 32px); color: var(--ink); }
.mk-empty-note { color: var(--body); margin: 10px 0 0; font-size: var(--tb-p-card); }
.mk-empty-note a { color: var(--gold); }

.mk-form { margin-top: 34px; }
.mk-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mk-form label {
  display: block; font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); min-height: 30px;
}
.mk-form input[type="text"], .mk-form input[type="email"], .mk-form textarea {
  width: 100%; margin-top: 8px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line2);
  border-radius: 16px; padding: 14px 16px; color: var(--ink); font-family: Inter, sans-serif; font-size: 16px;
  text-transform: none; letter-spacing: 0; transition: border-color .2s, box-shadow .2s;
}
.mk-form input:focus, .mk-form textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 184, 42, .22); }
.mk-form textarea { border-radius: var(--rcard); resize: vertical; }
.mk-form .mk-form-wide { margin-top: 18px; }
/* Specificity matters here: `.mk-form label` sets uppercase + letter-spacing for field labels,
   and it was winning over `.mk-nda`. The result was the one sentence in the form that a buyer
   is actually agreeing to, set in spaced capitals — the least readable text on the page. */
.mk-form .mk-nda {
  margin: 22px 0; text-transform: none; letter-spacing: 0; font-family: Inter, sans-serif; font-size: 16px;
  color: var(--body); display: flex; gap: 12px; align-items: flex-start; line-height: 1.5;
  max-width: 78ch; min-height: 0;
}
.mk-form .mk-nda input { accent-color: var(--gold); margin-top: 3px; width: 18px; height: 18px; flex: none; }
.mk-compare-table[hidden] { display: none; }
.mk-form .btn { margin-top: 8px; }
.mk-form-status { margin-top: 14px; font-size: 15px; color: var(--gold-soft); text-transform: none; letter-spacing: 0; }

/* ── FAQ list spacing (the block itself is styled in styles.css) ───────────────────────── */
.faq-list { margin-top: 40px; display: flex; flex-direction: column; gap: 12px; }

/* ── fluid tier ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1240px) {
  .mk-layout { grid-template-columns: 272px minmax(0, 1fr); }
  .mk-steps { grid-template-columns: repeat(2, 1fr); }
  .mk-grid, .mk-grid-plain { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}

/* An eighth top-level item in a navigation tuned for seven.
   styles.css already solved this once — `--nav-gap` drops from 16.5px to 13px and the type to
   12.2px between 1025 and 1200, with a comment recording that seven items had eaten the air
   around the logo and the CTA. Eight items spend the rest of it: measured clearance between the
   last menu item and the "Consultation" pill is 0px from 1025 to 1080, 10px at 1100, and only
   comfortable from 1130 up. One more notch of the SAME two dials — not a new mechanism — buys
   ~35px back exactly where it is missing. Scoped to .mk-body because only these pages carry the
   eighth item today; when stage 9 adds it everywhere, this moves into styles.css and loses the
   scope. Above 1100 the existing values already work and are left alone. */
@media (min-width: 1025px) and (max-width: 1100px) {
  .mk-body { --nav-gap: 10px; }
  .mk-body nav .menu { letter-spacing: .03em; }
}

/* The last 35 pixels. Between 1025 and 1060 even the tighter dials leave the menu abutting the
   pill, because there is simply nothing left to give. One pixel lower the site already hides
   that pill — the burger layout does exactly this — so the band inherits the behaviour instead
   of inventing a third one. The consultation CTA is on every page of the section anyway. */
@media (min-width: 1025px) and (max-width: 1060px) {
  .mk-body nav .nav-in > .pill { display: none; }
}

/* Below the engine's mobile switch the figure moves under the text (engine-image.js places the
   hero figure in the bottom band on phones), so the text column takes the full width and the
   scene leaves room at the bottom for the figure to show. */
@media (max-width: 1024px) {
  .mk-story .scene[data-fig="0"] .scene-head, .mk-story .scene[data-fig="0"] .scene-body { width: min(64vw, 720px); }
}
@media (max-width: 860px) {
  .mk-layout { grid-template-columns: 1fr; }
  .mk-rail { position: static; }
  .mk-facet-toggle {
    display: inline-flex; align-items: center; gap: 10px; min-height: 46px; margin-bottom: 16px;
    padding: 10px 20px 10px 16px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 16px; font-weight: 500;
    color: var(--ink); background: rgba(255, 184, 42, .08); border: 1px solid rgba(255, 184, 42, .55);
  }
  .mk-facet-toggle svg { width: 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; }
  .mk-facet-n:empty { display: none; }
  .mk-facet-n {
    font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 700; color: #10131c; background: var(--gold);
    border-radius: 999px; min-width: 22px; height: 22px; padding: 0 6px; display: inline-grid; place-items: center;
  }

  /* The rail becomes a sheet from the bottom, not an invisible column. */
  .mk-facets {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; max-height: 82vh;
    border-radius: var(--rcard) var(--rcard) 0 0; border-bottom: 0;
    transform: translateY(101%); transition: transform .34s cubic-bezier(.2, .7, .2, 1);
    background: rgba(10, 12, 22, .98); padding: 0 20px;
    box-shadow: 0 -30px 80px -20px rgba(0, 0, 0, .9);
  }
  .mk-facets.open { transform: none; }
  /* The header stays put while the filters scroll, so the way out is always on screen; the
     apply button doubles as the answer to "did that leave me anything?". */
  .mk-facet-head {
    position: sticky; top: 0; z-index: 2; margin: 0 -20px; padding: 16px 20px 14px; background: #0a0c16;
  }
  .mk-sheet-close {
    display: block; background: none; border: 0; color: var(--body); cursor: pointer;
    font-size: 30px; line-height: 1; padding: 0 4px; min-height: 40px; min-width: 40px;
  }
  .mk-sheet-apply {
    display: block; position: sticky; bottom: 0; margin: 0 -20px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
    background: #0a0c16; border-top: 1px solid var(--line);
  }
  .mk-sheet-apply .btn { width: 100%; justify-content: center; padding: 15px 20px; font-size: 16.5px; }
}

/* ── mobile tier ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .mk-story .scene { min-height: auto; padding: 96px 22px 44vh; }
  .mk-story .scene[data-fig="0"] .scene-head, .mk-story .scene[data-fig="0"] .scene-body { width: 100%; }
  .mk-story .scene-head :is(h1, h2) { font-size: clamp(30px, 8.4vw, 42px); }
  .mk-story .scene[data-fig="0"] .stats.mk-stats { grid-template-columns: 1fr; gap: 10px !important; }
  .mk-story .mk-stats .stat { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; }
  .mk-story .mk-stats .stat p { margin-top: 0; max-width: none; font-size: 15.5px; }
  .mk-crumbs { font-size: 12px; margin-bottom: 16px; }
}

@media (max-width: 700px) {
  .mk-grid, .mk-grid-plain { grid-template-columns: 1fr; gap: 14px; }
  .mk-card { padding: 20px 18px 18px; }
  .mk-card-lic, .mk-card-poa .mk-poa-note { font-size: 15.5px; min-height: 0; }
  .mk-card h3 { min-height: 0; }
  .mk-two, .mk-compare, .mk-form-grid, .mk-steps { grid-template-columns: 1fr; }
  .mk-results-head { flex-wrap: wrap; }
  .mk-facts th { width: 40%; font-size: 13px; }
  .mk-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mk-tile { padding: 14px; gap: 10px; min-height: 72px; }
  .mk-tile b { font-size: 16px; }
  .mk-tile::after { content: none; }

  /* The shortlist bar is the classic 375 offender: it lands on top of the CTA and the chat
     bubble. Full-width above the fold line, with room left for the chat launcher. */
  .mk-bar {
    left: 12px; right: 12px; bottom: 12px; transform: none; max-width: none;
    padding: 12px 14px; justify-content: space-between; border-radius: 22px;
    animation-name: mk-bar-in-m;
  }
  @keyframes mk-bar-in-m { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  .mk-bar .btn { padding: 11px 18px; font-size: 15px; }
  .mk-body { padding-bottom: 92px; }
  .mk-cta { padding-bottom: clamp(60px, 9vw, 110px); }
}

@media (max-width: 420px) {
  .mk-bar { gap: 10px; }
  .mk-bar-text { font-size: 14px; }
  .mk-tiles { grid-template-columns: 1fr; }
  /* Three facts do not fit three columns at 375 ("Bank + EMI" is ~90px on its own), and two
     columns strand the third fact on a row of its own. A label-left, value-right list reads
     like the specification sheet it is. */
  .mk-card-spec { grid-template-columns: 1fr; gap: 0; padding-top: 6px; }
  .mk-card-spec > div {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, .05);
  }
  .mk-card-spec > div:last-child { border-bottom: 0; }
  .mk-card-spec dd { margin: 0; text-align: right; }
}
@media (max-width: 760px) {
  /* On a phone the engine parks the figure in the bottom band behind the text; the stat cards
     get an opaque ground so the certificate showing through never sits under a number. */
  .mk-story .scene[data-fig="0"] .mk-stats .stat { background: rgba(10, 12, 22, .88); }
}

@media (prefers-reduced-motion: reduce) {
  .mk-card, .mk-tile, .mk-facets, .mk-step, .mk-add { transition: none; }
  .mk-card.mk-in, .mk-bar, .mk-active button, .mk-add.mk-bump, .mk-facet[open] .mk-opts { animation: none; }
  .mk-chip-status[data-status="available"]::before { animation: none; }
}