/* ══════════════════════════════════════════════════════════════════════════════
   Clode — public site.
   Loaded AFTER app.css, which owns the brand tokens, buttons, cards and forms.
   Everything here is prefixed mk- so it can never reach into the cabinet.

   Two rules the whole sheet follows:
   • Type and rhythm scale fluidly with clamp(), so 360px and 1920px are both
     designed states rather than a desktop layout squeezed or stretched.
   • Nothing horizontally overflows. Wide things (tables, code) scroll inside their
     own box; the page body never does.
   ══════════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;
  --mk-max: 1180px;
  --mk-gutter: clamp(1.15rem, 4vw, 2.25rem);
  --mk-sec-y: clamp(3.5rem, 8vw, 6.5rem);
  --mk-ink-soft: #4B4152;
  --mk-line: #ECE7E2;
  --mk-ink-bg: #241D2A;
  /* how far the first-screen wash reaches; a page with a taller hero raises it */
  --mk-wash-h: 760px;
  --mk-glow: radial-gradient(120% 120% at 15% -10%, rgba(221,115,130,.16), transparent 55%),
             radial-gradient(100% 100% at 95% 0%, rgba(149,93,140,.14), transparent 55%);
}

body.mk { background: var(--surface); }
/* ── the first screen, on every page ─────────────────────────────────────────
   One wash for the whole site, painted once on <main> rather than per page: a warm
   radial bloom over a dot grid, both fading out before the content below them. It is
   what /pricing had alone, and the reason every other page read as white-on-white —
   the page started with a breadcrumb on nothing.

   On <main> instead of on each first section because the breadcrumb, the head and the
   hero are three different elements on three different templates; the background has to
   sit behind all of them and cannot be a property of any one. `isolation` keeps the
   z-index:-1 layers inside main, so a section with its own background (.tint,
   .mk-cta-band) still paints over them. */
body.mk main { display: block; position: relative; isolation: isolate; }
body.mk main::before, body.mk main::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0;
  height: var(--mk-wash-h); z-index: -1; pointer-events: none;
}
body.mk main::before {
  background:
    radial-gradient(55% 45% at 50% -8%, rgba(221,115,130,.20), transparent 70%),
    radial-gradient(40% 36% at 88% 8%, rgba(149,93,140,.14), transparent 70%),
    radial-gradient(40% 36% at 10% 12%, rgba(221,115,130,.11), transparent 70%),
    linear-gradient(180deg, var(--tint) 0%, rgba(252,245,248,0) 62%);
}
body.mk main::after {
  background-image: radial-gradient(rgba(42,34,48,.13) 1px, transparent 1.3px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 42%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 42%);
}

/* ── skip link ─────────────────────────────────────────────────────────────── */
.mk-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--plum); color: #fff; padding: .7rem 1.1rem;
  border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.mk-skip:focus { left: 0; color: #fff; }

/* ── shell ─────────────────────────────────────────────────────────────────── */
.mk-wrap { width: 100%; max-width: var(--mk-max); margin: 0 auto; padding: 0 var(--mk-gutter); }
.mk-wrap.narrow { max-width: 760px; }
.mk-wrap.mid { max-width: 940px; }

.mk-sec { padding: var(--mk-sec-y) 0; position: relative; }
/* Two plain sections in a row would otherwise stack two full paddings between them.
   A section that CHANGES the background is different: collapsing its top padding puts
   the tint's edge hard against the first card in it, which is what made the "most
   people" badge on /pricing look like it was floating outside the panel. So the
   collapse applies only when the background does not change. */
.mk-sec + .mk-sec:not(.tint) { padding-top: 0; }
.mk-sec.tint { background: var(--tint); border-top: 1px solid var(--tint-line); border-bottom: 1px solid var(--tint-line); }
.mk-sec.tint + .mk-sec { padding-top: var(--mk-sec-y); }
.mk-sec.pad + .mk-sec { padding-top: var(--mk-sec-y); }

/* ── typography ────────────────────────────────────────────────────────────── */
.mk-h1 { font-size: clamp(2.05rem, 5.2vw, 3.4rem); line-height: 1.06; letter-spacing: -.032em; margin: 0 0 1rem; font-weight: 750; }
.mk-split .mk-h1 { font-size: clamp(1.85rem, 3.6vw, 2.65rem); line-height: 1.09; }
.mk-h2 { font-size: clamp(1.55rem, 3.2vw, 2.25rem); line-height: 1.14; letter-spacing: -.022em; margin: 0 0 .7rem; font-weight: 650; }
.mk-h3 { font-size: clamp(1.06rem, 1.6vw, 1.22rem); line-height: 1.3; letter-spacing: -.012em; margin: 0 0 .4rem; font-weight: 650; }
.mk-lede { font-size: clamp(1.02rem, 1.55vw, 1.19rem); line-height: 1.62; color: var(--mk-ink-soft); margin: 0; }
.mk-lede.wide { max-width: 62ch; }
.grad-txt {
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}


.mk-head { max-width: 68ch; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.mk-head.center { margin-left: auto; margin-right: auto; text-align: center; }
/* A page whose first screen is a heading and a grid: the heading is the whole of that
   screen, so it is centred and capped rather than set in one column with nothing beside
   it. The lede runs narrower than the heading on purpose — two lines, not four. */
.mk-head.lead {
  max-width: none; text-align: center; margin-bottom: clamp(1.7rem, 3vw, 2.4rem);
  /* the head owns the size; the heading is 1em of it and the lede is measured in the
     SAME font context, so the paragraph can never set wider than the heading above it —
     which is what happened between 600 and 1024 when the two caps were in different ems */
  font-size: clamp(1.9rem, 3.1vw, 2.6rem);
}
.mk-head.lead .mk-h1 { font-size: 1em; line-height: 1.1; max-width: 27ch; margin: 0 auto; text-wrap: balance; }
.mk-head.lead .mk-lede, .mk-head.lead p { max-width: 56ch; margin: .9rem auto 0; font-size: clamp(1rem, 1.3vw, 1.1rem); }
/* The eyebrow's rule is drawn on the left only, so centring the whole inline-flex box
   pushed the WORD 13px off the page's axis. Mirrored, the word sits on it. */

/* When the hero falls back to a centred head, everything in it centres — a flex row of
   buttons or chips ignores text-align and would otherwise pack to the left edge under a
   centred heading. */
.mk-head.lead .mk-ctas, .mk-head.lead .mk-trust { justify-content: center; }
/* The pairs keep a common left edge inside a centred block — centring each row made
   two labels of different length wobble against each other. */
.mk-head.lead .mk-defs { max-width: 68ch; margin-inline: auto; text-align: left; }

/* An intro that is a paragraph rather than a one-line lede: the heading centres with
   every other page, the paragraph stays a left-set block on a readable measure. */
.mk-head.lead.wide .mk-lede, .mk-head.lead.wide p { max-width: 76ch; text-align: left; }
/* The question/where pairs under a paragraph lede. .mk-defs had no size of its own, so its
   68ch was measured at the head's 2.6rem and came out wider than the wrap: a rule and two
   labels running from the gutter under a centred heading. Measured at the lede's size it
   shares the lede's 76ch box and its left edge. */
.mk-head.lead.wide .mk-defs { font-size: clamp(1rem, 1.3vw, 1.1rem); max-width: 76ch; margin-inline: auto; }

/* Anything narrower than the wrap under a centred head is centred with it — a 72ch
   article or a callout left at the gutter reproduced the empty-right-half the centring
   was there to fix, one element further down. */
body.mk:has(.mk-head.lead) .mk-article,
body.mk:has(.mk-head.lead) .mk-callout { margin-inline: auto; }
body.mk:has(.mk-head.lead) .mk-topics { justify-content: center; }
.mk-head p { margin: 0; color: var(--mk-ink-soft); font-size: 1.02rem; line-height: 1.62; }
.mk-head p + p { margin-top: .7rem; }








/* ── the hero motif ───────────────────────────────────────────────────────────
   A shape, not a screen, and it carries no figures anywhere. The home page showed a
   hand-built replica with invented numbers once and it was removed for exactly that;
   this replaces a real screenshot because the owner wanted movement, and a screenshot
   cannot move without becoming a video of one customer's data.

   The grid is the honest part: one square is one page, three coverage states, and a
   grouping chip dims the pages outside it while each keeps its state, which is what the
   real control does: it changes which pages you look at, not what Google did with them.
   Proportions are decorative. Put a count on any of it and it becomes a measurement
   nobody made. */
.hero-motif{background:var(--tint);border:1px solid var(--tint-border);border-radius:18px;
  padding:clamp(1rem,2vw,1.5rem);min-width:0}
.hm-chart{display:block;width:100%;height:auto;max-width:100%;overflow:visible}
.hm-grid line{stroke:var(--tint-border);stroke-width:1;opacity:.55}
.hm-bar{fill:var(--tint-border);transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);
  animation:hm-grow .65s cubic-bezier(.22,.9,.3,1) forwards}
.hm-area{opacity:0;animation:hm-fade 1.1s ease 1.1s forwards}
.hm-prev{fill:none;stroke:var(--tint-border);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:5 7;
  opacity:0;animation:hm-fade .8s ease .5s forwards}
.hm-line{fill:none;stroke:url(#hmLine);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:640;stroke-dashoffset:640;animation:hm-draw 2.2s cubic-bezier(.33,.9,.4,1) .15s forwards}
.hm-dot{opacity:0;animation:hm-fade .45s ease 2.1s forwards}
.hm-pulse{transform-box:fill-box;transform-origin:center;animation:hm-pulse 2.6s ease-out 2.4s infinite}
@keyframes hm-draw{to{stroke-dashoffset:0}}
@keyframes hm-fade{to{opacity:1}}
@keyframes hm-grow{to{transform:scaleY(1)}}
@keyframes hm-pulse{0%{opacity:.5;transform:scale(1)}70%{opacity:0;transform:scale(2.6)}100%{opacity:0;transform:scale(2.6)}}
.hm-legend{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;margin-top:.85rem;font-size:.82rem;color:var(--mute)}
.hm-legend span{display:inline-flex;align-items:center;gap:.4rem}
.hm-sw{width:16px;height:3px;border-radius:99px;background:var(--grad);display:inline-block;flex:none}
.hm-sw--prev{background:none;border-top:2px dashed var(--tint-border);height:0}
.hm-panel{margin-top:1rem;display:grid;gap:.8rem}
.hm-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.hm-chip{font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;padding:.36rem .72rem;
  border-radius:999px;border:1px solid var(--tint-border);background:var(--surface);color:var(--mute);
  transition:background var(--t),color var(--t),border-color var(--t)}
.hm-chip[aria-pressed="true"]{background:var(--grad);border-color:transparent;color:#fff}
.hm-chip:focus-visible{outline:2px solid var(--plum);outline-offset:2px}
.hm-grid{display:grid;grid-template-columns:repeat(20,1fr);gap:4px}
.hm-cell{aspect-ratio:1;border-radius:2.5px;background:var(--tint-border);opacity:.55;
  transition:background .4s ease,opacity .4s ease,transform .4s ease}
.hm-cell.is-served{background:var(--rise);opacity:1}
.hm-cell.is-stopped{background:var(--rose);opacity:1}
.hm-cell.is-never{background:var(--tint-border);opacity:.5}
.hm-cell.is-out{opacity:.22;transform:scale(.78)}
.hm-keys{display:flex;flex-wrap:wrap;gap:.35rem .9rem;font-size:.78rem;color:var(--mute)}
.hm-keys span{display:inline-flex;align-items:center;gap:.35rem}
.hm-key{width:9px;height:9px;border-radius:2px;display:inline-block;flex:none}
.hm-key--served{background:var(--rise)}
.hm-key--stopped{background:var(--rose)}
.hm-key--never{background:var(--tint-border);opacity:.6}
/* Fifteen across, so the sixty squares make four full rows: fourteen left a fifth row of
   four that read as a rendering fault in a picture meant to show a site as one block.
   The chips shrink just enough for all four English ones to share a line at 390px; the
   longer Ukrainian set still wraps, which is what flex-wrap is kept for. */
@media (max-width:560px){
  .hm-grid{grid-template-columns:repeat(15,1fr)}
  .hm-chip{padding:.32rem .55rem;font-size:.76rem}
}
@media (prefers-reduced-motion:reduce){
  .hm-line{animation:none;stroke-dashoffset:0}
  .hm-prev,.hm-area,.hm-dot{animation:none;opacity:1}
  .hm-bar{animation:none;transform:none}
  .hm-pulse{animation:none;opacity:0}
  .hm-cell{transition:none}
}

/* ── header ────────────────────────────────────────────────────────────────── */
.mk-top {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
  /* The hairline is ALWAYS there. Drawn only once the page scrolled, the header at rest
     was a strip of nothing between the logo and the first heading. */
  border-bottom: 1px solid var(--mk-line);
  box-shadow: 0 4px 20px -10px rgba(42,34,48,.08);
  transition: box-shadow var(--t), background var(--t);
}
.mk-top.is-stuck { background: rgba(255,255,255,.94); box-shadow: 0 8px 28px -12px rgba(42,34,48,.18); }
.mk-top .bar { display: flex; align-items: center; gap: .75rem; height: 74px; }
.mk-top .brand { flex: none; font-size: 1.24rem; font-weight: 650; gap: .6rem; }
/* The wordmark sets its own width from the 2460:730 artwork; only the height is fixed. */
.mk-top .brand svg { width: auto; height: 24px; }
/* The one action the header exists for: a real button, not a chip. */
.mk-top .mk-actions .btn { padding: .66rem 1.2rem; border-radius: 11px; font-size: .95rem; font-weight: 650; }
.mk-top .mk-actions .btn-grad { box-shadow: 0 8px 22px -6px rgba(149,93,140,.55), inset 0 1px 0 rgba(255,255,255,.22); }
.mk-top .mk-actions .btn-grad:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -6px rgba(149,93,140,.6), inset 0 1px 0 rgba(255,255,255,.22); }
/* On a phone the burger hides the whole action row, so a compact version of the same
   button stays beside it — signing up should never require opening a menu first. */
.mk-cta-m { display: none; margin-left: auto; padding: .55rem .9rem; border-radius: 10px; font-size: .9rem; font-weight: 650; }
/* A hairline between the mark and the menu. Without it "Clode Product" reads as
   one run of words and the first nav item looks like part of the brand. */
.mk-top nav.mk-links {
  display: flex; align-items: center; gap: .2rem; flex: 1 1 auto;
  margin-left: 1.35rem; padding-left: 1.35rem; border-left: 1px solid var(--mk-line);
}
.mk-top .mk-actions { display: flex; align-items: center; gap: .65rem; flex: none; }
/* The sign-in link is a link, not a button, and should not compete with the one action
   the header is actually there to offer. */
.mk-top .mk-actions .mk-navlink { color: var(--mk-ink-soft); }
.mk-top .mk-actions .mk-navlink:hover { color: var(--plum); }

.mk-navlink {
  position: relative; display: inline-flex; align-items: center; gap: .3rem;
  padding: .58rem .85rem; border-radius: 10px; font-size: .95rem; font-weight: 600;
  color: var(--ink); line-height: 1.2; white-space: nowrap;
  transition: color var(--t), background var(--t), box-shadow var(--t);
}
.mk-navlink:hover { color: var(--plum); background: var(--tint); }
/* The page you are on is a filled pill — the same shape hover and an open menu use, so
   the header has one vocabulary instead of an underline here and a tint there. */
.mk-navlink[aria-current] { color: var(--plum); font-weight: 650; background: var(--tint); box-shadow: inset 0 0 0 1px var(--tint-line); }
/* Keyboard users get the same affordance the mouse does, on the link and on the
   summary that opens a panel. */
.mk-navlink:focus-visible, .mk-dd > summary:focus-visible {
  outline: 2px solid var(--mauve); outline-offset: 1px; border-radius: 9px;
}

/* dropdown — <details>, so it works without JS */
.mk-dd { position: relative; }
.mk-dd > summary { list-style: none; cursor: pointer; }
.mk-dd > summary::-webkit-details-marker { display: none; }
.mk-dd > summary::marker { content: ''; }
/* The chevron turns when the menu opens. This was written for a class `.car` that no
   template has ever put on anything, so the one control present on every page of the
   site had a caret that never moved, while the footer's language caret did. */
.mk-dd > summary > svg { transition: transform var(--t); }
.mk-dd[open] > summary > svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .mk-dd > summary > svg { transition: none; } }
.mk-dd[open] > summary { color: var(--plum); background: var(--tint); }
.mk-panel {
  position: absolute; top: calc(100% + .4rem); left: -.4rem; z-index: 60;
  background: var(--surface); border: 1px solid var(--mk-line); border-radius: 16px;
  box-shadow: var(--sh-lg); padding: .45rem; min-width: 320px; max-width: min(92vw, 760px);
  animation: mk-pop .15s cubic-bezier(.2,0,0,1);
  overflow: hidden; /* so the footer strip can run to the panel's own rounded edge */
}
.mk-panel.two { min-width: 620px; display: grid; grid-template-columns: 1fr 1fr; gap: .1rem; }
/* The last menu opens towards the brand, not the viewport edge: anchored left, its
   two-column panel ran off the right of a 1280px screen. */
.mk-top nav.mk-links .mk-dd:last-child .mk-panel { left: auto; right: -.4rem; }
@keyframes mk-pop { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.mk-panel a {
  display: flex; gap: .7rem; align-items: flex-start; padding: .55rem .6rem;
  border-radius: 11px; color: var(--ink); transition: background var(--t);
}
.mk-panel a:hover { background: var(--tint); color: var(--ink); }
/* A tinted tile rather than a loose glyph: it gives every row the same left edge, so a
   nine-item panel can be scanned down the icons instead of read line by line. */
.mk-panel a .ic {
  flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: var(--tint); color: var(--mauve); transition: background var(--t), color var(--t);
}
.mk-panel a:hover .ic { background: var(--surface); color: var(--plum); }
.mk-panel a b { display: block; font-weight: 620; font-size: .9rem; line-height: 1.3; }
/* Clamped: one long answer used to make the whole panel taller than the viewport it
   drops into, and the row it sits in taller than every row beside it. */
.mk-panel a span {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: .79rem; color: var(--mute); line-height: 1.4; margin-top: .12rem;
}

/* The "everything in this section" links are a FOOTER, not two more items: one tinted
   strip running to the panel's edges, so the eye stops there rather than reading them as
   the tenth and eleventh features. */
/* The chip row: the nine features that are not led with. Spans both columns, because
   it is one band under the rows rather than a fifth and sixth row of them. */
.mk-panel .more {
  grid-column: 1 / -1; margin-top: .45rem; padding-top: .6rem;
  border-top: 1px solid var(--mk-line);
  display: flex; flex-wrap: wrap; gap: .3rem; align-items: center;
}
.mk-panel .more .lbl {
  width: 100%; font-size: .7rem; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 700; color: var(--mute); margin-bottom: .15rem;
}
.mk-panel a.mini {
  display: inline-flex; align-items: center; gap: .35rem; padding: .34rem .6rem;
  border: 1px solid var(--mk-line); border-radius: 999px; background: var(--surface);
  font-size: .82rem; font-weight: 550; color: var(--mk-ink-soft); white-space: nowrap;
}
.mk-panel a.mini:hover { background: var(--tint); border-color: var(--tint-border); color: var(--ink); }
.mk-panel a.mini svg { flex: none; color: var(--plum); }
.mk-panel .sep { display: none; }
.mk-panel .all {
  grid-column: 1/-1; font-weight: 620; font-size: .85rem; color: var(--plum);
  justify-content: space-between; align-items: center; background: var(--tint);
  border-radius: 0; margin: 0 -.45rem; padding: .6rem 1.05rem; border-top: 1px solid var(--mk-line);
}
.mk-panel .all + .all { border-top-color: transparent; padding-top: .1rem; }
.mk-panel .all:first-of-type { margin-top: .45rem; }
.mk-panel .all:last-child { margin-bottom: -.45rem; padding-bottom: .7rem; }
.mk-panel .all:hover { background: var(--tint); color: var(--plum-700, var(--plum)); }
.mk-panel .all svg { transition: transform var(--t); }
.mk-panel .all:hover svg { transform: translateX(3px); }

/* mobile menu */
.mk-burger { display: none; margin-left: auto; position: static; }
.mk-burger > summary {
  list-style: none; cursor: pointer; width: 42px; height: 42px; border-radius: 11px;
  border: 1px solid var(--mk-line); background: var(--surface); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.mk-burger > summary::-webkit-details-marker { display: none; }
.mk-burger > summary::marker { content: ''; }
.mk-burger[open] > summary { background: var(--tint); border-color: var(--tint-border); color: var(--plum); }
/* ABSOLUTE, not fixed. The header carries `backdrop-filter`, and a filter or
   backdrop-filter makes an element the containing block for its fixed-position
   descendants — so `position: fixed; inset: 68px 0 0` resolved against the 68px-tall
   header instead of the viewport and collapsed the panel to nothing but its first
   label. Absolute against the (sticky, therefore positioned) header is what the
   layout actually wants and does not depend on the filter being there. */
.mk-sheet {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 1;
  max-height: calc(100vh - 74px); max-height: calc(100dvh - 74px); overflow-y: auto;
  background: var(--surface); border-top: 1px solid var(--mk-line);
  box-shadow: 0 24px 48px -12px rgba(42,34,48,.22);
  padding: 1.1rem var(--mk-gutter) 2.5rem;
  animation: mk-slide .18s cubic-bezier(.2,0,0,1);
}
@keyframes mk-slide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.mk-sheet .sh {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--mute);
  margin: 1.35rem 0 .5rem; font-weight: 700;
}
.mk-sheet .sh:first-child { margin-top: .3rem; }
.mk-sheet a:not(.btn) {
  display: flex; align-items: center; gap: .7rem;
  padding: .62rem .1rem; font-size: 1rem; font-weight: 550; color: var(--ink);
  border-bottom: 1px solid var(--mk-line);
}
/* The same icon tile the desktop panels use, so the sheet is a version of that menu
   rather than an unrelated wall of text. */
.mk-sheet a .ic {
  flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: var(--tint); color: var(--mauve);
}
/* The action sits above the links, and the first thing under it is the page most people
   opened the menu to find. */
.mk-sheet .cta-pair.sheet-top { margin: 0 0 1.1rem; }
.mk-sheet .sheet-lead {
  font-weight: 650; font-size: 1.05rem; border-bottom: none;
  background: var(--tint); border-radius: 11px; padding: .7rem .85rem !important;
}
.mk-sheet .sheet-lead[aria-current="page"] { color: var(--plum); }
.mk-sheet a:not(.btn):hover { color: var(--plum); }
.mk-sheet .btn { width: 100%; justify-content: center; margin-top: .5rem; }
.mk-sheet .cta-pair { margin-top: 1.4rem; display: grid; gap: .55rem; }

/* Between the collapse point and the full width the bar has to fit the LONGEST locale,
   not the shortest. Ukrainian's five menu labels run ~60px wider than the English ones,
   which pushed the header 7px past a 1024px viewport and gave every /uk page a sideways
   scrollbar. Tightening the links here costs English nothing it can see and buys the
   room the other languages need. */
@media (min-width: 1001px) and (max-width: 1180px) {
  .mk-top nav.mk-links { margin-left: 1rem; padding-left: 1rem; gap: 0; min-width: 0; }
  .mk-navlink { padding-left: .55rem; padding-right: .55rem; font-size: .91rem; }
  .mk-top .mk-actions { gap: .45rem; }
  .mk-top .mk-actions .btn { padding-left: .9rem; padding-right: .9rem; }
}
/* Guides and Compare joined the bar, so it carries five labels again. Estimated at a
   conservative .65em per Cyrillic character, the Ukrainian bar needs about 906px of the
   929px a 1001px window leaves; this last step buys ~25px more margin at the narrow end,
   where English has room to spare and loses nothing it can see. */
@media (min-width: 1001px) and (max-width: 1100px) {
  .mk-top nav.mk-links { margin-left: .75rem; padding-left: .75rem; }
  .mk-navlink { padding-left: .45rem; padding-right: .45rem; }
}

@media (max-width: 1000px) {
  .mk-top nav.mk-links, .mk-top .mk-actions { display: none; }
  .mk-cta-m { display: inline-flex; }
  .mk-burger { display: block; margin-left: 0; }
}
/* With the sheet open its own "Start free" button is 40px below this one; two gradient
   buttons in a stack read as a mistake, so the header's steps aside until the sheet closes. */
.mk-top .bar:has(.mk-burger[open]) .mk-cta-m { visibility: hidden; }
/* The phone bar keeps its button at every width. It used to drop it below 400px on the
   belief that brand, button and burger no longer fit; at 390 about 190px of the row was
   empty. Measured the long way round: brand ~96px, "Get started" ~116px, burger 44px and
   two 12px gaps come to ~280px, inside the 324px a 360px phone leaves. Two cases really
   are tight, and each gives up the wordmark (the mark stays) rather than the action: any
   phone under 340px, and a signed-in visitor under 380px, whose "Відкрити кабінет" runs
   ~60px longer than "Get started". */

/* ── buttons: marketing sizes ──────────────────────────────────────────────── */
.btn-lg { padding: .8rem 1.35rem; font-size: 1rem; border-radius: 11px; }
.btn-xl { padding: .95rem 1.7rem; font-size: 1.05rem; border-radius: 12px; }
.mk-ctas { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.mk-ctas.center { justify-content: center; }
/* A 44px touch target on a phone for every marketing button. Anything not .btn-lg or
   .btn-xl inherited the app's .btn (.55rem padding, line-height 1) and came out about 34px
   tall: "Talk to us" on /faq, the guide's in-article feature button, the header's own.
   Scoped to body.mk so the app's buttons keep their density. .btn is inline-flex with
   align-items:center, so the label stays centred in the taller box. */
@media (max-width: 700px) {
  body.mk .btn { min-height: 44px; }
  .mk-burger > summary { width: 44px; height: 44px; }
}

/* ── trust chips ───────────────────────────────────────────────────────────── */
/* The same chips the plan cards sit above: a pill per objection, not a run of ticks. */
.mk-trust { display: flex; flex-wrap: wrap; gap: .55rem .6rem; margin-top: 1.5rem; font-size: .86rem; color: var(--mk-ink-soft); }
.mk-trust span {
  display: inline-flex; align-items: center; gap: .45rem; font-weight: 560;
  background: var(--surface); border: 1px solid var(--mk-line); border-radius: 999px;
  padding: .38rem .85rem .38rem .5rem; box-shadow: var(--sh-sm);
}
.mk-trust span > svg {
  width: 21px; height: 21px; padding: 5px; box-sizing: border-box; border-radius: 50%;
  background: var(--rise-soft); color: var(--rise); flex: none;
}
.mk-trust.on-grad { color: #fff; }
.mk-trust.on-grad span { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); box-shadow: none; color: #fff; }
.mk-trust.on-grad span > svg { background: #fff; color: var(--plum); }
/* On a phone the chips wrap one per row, and a column of bordered, shadowed pills under
   two real buttons reads as three more buttons (about 125px of the closing band). There
   they become a line of reassurance: the round check stays as the marker, the chip goes,
   and the three claims wrap as text over one or two lines. ul.mk-trust on /pricing gets
   the same treatment beside its own rules further down. */
@media (max-width: 520px) {
  .mk-trust { gap: .3rem .9rem; font-size: .82rem; }
  .mk-trust span, .mk-trust.on-grad span { background: none; border: 0; box-shadow: none; padding: 0; }
}

/* ── hero ──────────────────────────────────────────────────────────────────── */
.mk-hero { position: relative; padding: clamp(2.75rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem); }
.mk-hero .mk-wrap { position: relative; }
.mk-hero-grid { display: grid; grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.mk-hero .mk-h1 { max-width: 15ch; }
.mk-hero .mk-lede { max-width: 46ch; margin-top: .2rem; }
.mk-hero .hero-note { margin-top: 1.1rem; font-size: .9rem; color: var(--mute); max-width: 46ch; }

/* The eyebrow that replaced the badge: the same words, with the border, the ground, the
   shadow and the pulsing dot taken off. What a page is about is a line of type, not a
   chip, and the chip was the thing that read as decoration. */
.mk-eyebrow {
  display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .9rem;
  font-size: .84rem; font-weight: 650; color: var(--plum);
}
.mk-eyebrow svg { flex: none; }
@keyframes mk-pulse { 0% { transform: scale(.6); opacity: .45; } 70%,100% { transform: scale(1.5); opacity: 0; } }

@media (max-width: 940px) {
  .mk-hero-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .mk-hero .mk-h1, .mk-hero .mk-lede, .mk-hero .hero-note { max-width: none; }
}

/* ── product mock ──────────────────────────────────────────────────────────── */
.mk-mock {
  background: var(--surface); border: 1px solid var(--mk-line); border-radius: 16px;
  box-shadow: 0 2px 6px rgba(42,34,48,.05), 0 26px 60px -18px rgba(42,34,48,.22);
  overflow: hidden; transform: perspective(1400px) rotateY(-1.6deg);
}
@media (max-width: 940px) { .mk-mock { transform: none; } }
.mk-mock .chrome {
  display: flex; align-items: center; gap: .4rem; padding: .55rem .8rem;
  background: var(--surface-2); border-bottom: 1px solid var(--mk-line);
}
.mk-mock .chrome i { width: 9px; height: 9px; border-radius: 50%; background: #DFD9D2; flex: none; }
.mk-mock .chrome .url {
  margin-left: .5rem; font-family: var(--font-mono); font-size: .7rem; color: var(--mute);
  background: var(--surface); border: 1px solid var(--mk-line); border-radius: 6px;
  padding: .16rem .5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mk-mock .body { padding: .95rem; display: grid; gap: .8rem; }
.mk-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.mk-kpi { border: 1px solid var(--mk-line); border-radius: 11px; padding: .6rem .7rem; background: var(--surface); min-width: 0; }
.mk-kpi .l { font-size: .63rem; text-transform: uppercase; letter-spacing: .07em; color: var(--mute); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-kpi .v { font-family: var(--font-display); font-size: clamp(1.05rem, 2.6vw, 1.4rem); font-weight: 650; letter-spacing: -.02em; margin: .12rem 0; }
.mk-kpi .d { font-size: .72rem; font-weight: 650; }
.mk-up { color: var(--rise); } .mk-down { color: var(--fall); }
.mk-chartbox { border: 1px solid var(--mk-line); border-radius: 11px; padding: .6rem .7rem .4rem; }
.mk-chartbox .cap { font-size: .68rem; color: var(--mute); margin-bottom: .3rem; }
.mk-spark { width: 100%; height: 66px; display: block; }
.mk-rows { border: 1px solid var(--mk-line); border-radius: 11px; overflow: hidden; }
.mk-rows .r {
  display: flex; align-items: center; gap: .5rem; padding: .45rem .65rem;
  font-size: .78rem; border-bottom: 1px solid var(--mk-line); min-width: 0;
}
.mk-rows .r:last-child { border-bottom: none; }
.mk-rows .r.head { background: var(--surface-2); color: var(--mute); font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 650; }
.mk-rows .grow { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-rows .num { font-variant-numeric: tabular-nums; flex: none; }
.mk-chip { flex: none; font-size: .68rem; font-weight: 650; padding: .1rem .42rem; border-radius: 999px; }
.mk-chip.up { color: var(--rise); background: var(--rise-soft); }
.mk-chip.down { color: var(--fall); background: var(--fall-soft); }
.mk-chip.tag { color: var(--plum); background: var(--plum-soft); }
.mk-stamp {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .66rem; color: var(--mute);
  background: var(--surface-2); border: 1px solid var(--mk-line); border-radius: 999px; padding: .12rem .5rem;
}

/* ── stat band ─────────────────────────────────────────────────────────────── */
.mk-band { border-top: 1px solid var(--mk-line); border-bottom: 1px solid var(--mk-line); background: var(--surface-2); }
.mk-band .in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--mk-line); }
.mk-band .st { background: var(--surface-2); padding: 1.5rem clamp(.9rem, 2vw, 1.4rem); text-align: center; }
.mk-band .v { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; letter-spacing: -.02em; }
.mk-band .v.grad-txt { display: inline-block; }
.mk-band .l { font-size: .82rem; color: var(--mute); margin-top: .25rem; line-height: 1.45; }
@media (max-width: 780px) { .mk-band .in { grid-template-columns: 1fr 1fr; } }

/* ── generic grids & cards ─────────────────────────────────────────────────── */
/* WRAP, NOT A FIXED TRACK COUNT, so the last row fills the width instead of leaving a
   card stranded at a third of the row. Thirteen features in three columns left one card
   alone with two empty columns beside it; five guides in three left two.

   The basis is the exact width a column would have had, so a FULL row still lays out
   identically to the grid this replaced: three bases plus two gaps come to 100%, there is
   no free space, and `flex-grow` has nothing to do. Only a short last row has slack, and
   there the growth is shared equally, so one card becomes the full width and two become
   halves rather than one card taking the leftovers. The count is never written down,
   which is the point: adding a fourteenth feature cannot strand it. */
.mk-grid { --g: clamp(.9rem, 2vw, 1.15rem); display: flex; flex-wrap: wrap; gap: var(--g); }
.mk-grid > * { flex: 1 1 auto; min-width: 0; }
.mk-grid.c2 > * { flex-basis: calc((100% - var(--g)) / 2); }
.mk-grid.c3 > * { flex-basis: calc((100% - 2 * var(--g)) / 3); }
.mk-grid.c4 > * { flex-basis: calc((100% - 3 * var(--g)) / 4); }
@media (max-width: 980px) {
  .mk-grid.c3 > *, .mk-grid.c4 > * { flex-basis: calc((100% - var(--g)) / 2); }
}
@media (max-width: 640px) {
  .mk-grid.c2 > *, .mk-grid.c3 > *, .mk-grid.c4 > * { flex-basis: 100%; }
}
/* Three parallel cards, not a long list: an odd last card keeps its half width instead of
   doubling in prominence over the other two. Scoped to the comparison pages; the long
   grids above keep their stretch. Below 640px every card is already full width. */
.mk-grid.mk-pairs > *:last-child:nth-child(odd) { flex-grow: 0; }

/* /guides: three groups under real headings, three cards and then two and two. A GRID,
   not the wrapping flex above, because the count per group is known and fixed (--n,
   written by the template): each group fills its own row exactly and no card is ever
   stretched across a row it does not own. Above 980px the three sit side by side.
   Below that, three columns of prose are too narrow, and a two-column fallback would
   strand the third card, so every group becomes one column of compact rows: the icon
   to the left of the words instead of above them, which also takes the phone stack
   from seven tall cards to seven short ones. */
.mk-guidegrp + .mk-guidegrp { margin-top: clamp(2.1rem, 4.5vw, 3rem); }
.mk-guidegrp-h { font-size: clamp(1.15rem, 1.9vw, 1.38rem); letter-spacing: -.016em; margin: 0 0 .95rem; }
.mk-guidegrp-list {
  display: grid; gap: clamp(.9rem, 2vw, 1.15rem);
  grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr));
}
@media (max-width: 980px) {
  .mk-guidegrp-list { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .mk-guidegrp-list > .mk-card {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: start;
  }
  .mk-guidegrp-list > .mk-card > .ic { grid-column: 1; grid-row: 1 / span 3; margin-bottom: 0; }
  .mk-guidegrp-list > .mk-card > :not(.ic) { grid-column: 2; }
  .mk-guidegrp-list > .mk-card > .more { justify-self: start; padding-top: .6rem; }
  .mk-guidegrp-list > .mk-card > p { max-width: 68ch; }
}
@media (max-width: 480px) {
  .mk-guidegrp-list > .mk-card { column-gap: .8rem; }
  .mk-guidegrp-list > .mk-card > .ic { width: 34px; height: 34px; border-radius: 10px; }
}

.mk-card {
  background: var(--surface); border: 1px solid var(--mk-line); border-radius: 15px;
  padding: clamp(1.15rem, 2.4vw, 1.5rem);
  box-shadow: 0 1px 2px rgba(42,34,48,.04), 0 10px 28px -14px rgba(42,34,48,.10);
  display: flex; flex-direction: column; min-width: 0;
}
.mk-card p { color: var(--mk-ink-soft); line-height: 1.6; margin: 0; }
/* The blog cards: POSTS carries an icon per post and nothing drew it, so /blog was the
   one card grid on the site with no mark on its cards. It groups five posts across three
   topics by what the post is about, before the title is read. */
.mk-post-meta .tp {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: var(--tint); color: var(--plum); border: 1px solid var(--tint-line); flex: none;
}
a.mk-card { transition: transform var(--t), box-shadow var(--t), border-color var(--t); color: inherit; }
a.mk-card:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); border-color: var(--tint-border); color: inherit; }
.mk-card .ic {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: var(--tint); color: var(--plum); border: 1px solid var(--tint-line);
  margin-bottom: .85rem; flex: none;
}
a.mk-card:hover .ic { background: var(--grad); color: #fff; border-color: transparent; }
.mk-card .more {
  margin-top: auto; padding-top: .85rem; font-size: .86rem; font-weight: 650; color: var(--plum);
  display: inline-flex; align-items: center; gap: .3rem;
}
a.mk-card:hover .more { gap: .5rem; }
.mk-card .more svg { transition: transform var(--t); }
/* ICON BESIDE THE HEADING ON A PHONE. Stacked, the 40px tile took a row of its own plus a
   .85rem gap, about 56px of every card before its first word, ~730px across /features
   alone. Once the grids are one column (640px, the breakpoint above) the tile shrinks to
   32px and shares the first row with the heading, and everything after it keeps the text
   column: the compact form /pricing's feature list already uses, which is why .pr-feat is
   left as it is. Cards that set their own row layout inline (audience.eta) are left too.
   A grid here, on the card itself, which is otherwise a flex column. */
@media (max-width: 640px) {
  .mk-card:has(> .ic):not(.pr-feat):not([style*="flex-direction:row"]) {
    display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: .8rem; row-gap: 0; align-content: start;
  }
  .mk-card:has(> .ic):not(.pr-feat):not([style*="flex-direction:row"]) > * { grid-column: 2; min-width: 0; }
  .mk-card:has(> .ic):not(.pr-feat):not([style*="flex-direction:row"]) > .ic {
    grid-column: 1; grid-row: 1; width: 32px; height: 32px; border-radius: 9px; margin: 0; align-self: start;
  }
  .mk-card:has(> .ic):not(.pr-feat):not([style*="flex-direction:row"]) > .ic > svg { width: 17px; height: 17px; }
  .mk-card:has(> .ic):not(.pr-feat):not([style*="flex-direction:row"]) > .ic + * { align-self: center; margin-bottom: 0; }
  .mk-card:has(> .ic):not(.pr-feat):not([style*="flex-direction:row"]) > .ic + * + * { margin-top: .4rem; }
  .mk-card:has(> .ic):not(.pr-feat):not([style*="flex-direction:row"]) > .more { justify-self: start; }
}

/* ── /features: four groups and the row that jumps between them ───────────────
   The index was one grid of thirteen identical cards. Each group now has a real heading,
   and the row of links above them is the page's own contents: plain anchors, so it works
   without script and a crawler reads it as the outline it is. */
.feat-jump {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
  margin: 0 auto clamp(1.8rem, 3.5vw, 2.6rem); max-width: 60rem;
}
.feat-jump a {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 44px;
  padding: .55rem .95rem; border: 1px solid var(--mk-line); border-radius: 12px;
  background: var(--surface); box-shadow: var(--sh-sm);
  font-size: .92rem; font-weight: 600; color: var(--ink); text-decoration: none;
  transition: border-color var(--t), background var(--t), color var(--t);
}
.feat-jump a:hover { border-color: var(--tint-border); background: var(--tint); color: var(--plum); }
.feat-jump a:focus-visible { outline: 2px solid var(--mauve); outline-offset: 2px; }
.feat-jump b { font-weight: 560; font-size: .78rem; color: var(--mute); font-variant-numeric: tabular-nums; }
.feat-group + .feat-group { margin-top: clamp(2.2rem, 4.5vw, 3.2rem); }
.feat-group-h {
  font-size: clamp(1.22rem, 2.2vw, 1.5rem); letter-spacing: -.018em; margin: 0 0 1rem;
  /* Clears the 74px sticky header (and a little air) when a jump link lands here. */
  scroll-margin-top: 92px;
}
/* On a phone the four links are a 2 x 2 block rather than a ragged wrap, each one a full
   touch target with its label free to take two lines. */
@media (max-width: 560px) {
  .feat-jump { display: grid; grid-template-columns: 1fr 1fr; }
  .feat-jump a { justify-content: space-between; padding: .6rem .8rem; font-size: .88rem; line-height: 1.3; }
}

/* pain cards */
.mk-pain { position: relative; padding-top: 1.35rem; }
.mk-pain .q { font-family: var(--font-display); font-size: 1.05rem; font-weight: 650; letter-spacing: -.012em; margin-bottom: .5rem; }
/* The fix stays attached to the paragraph it answers; the card's slack goes above the
   link instead (`.mk-pain .more`), so the feet of the three cards still line up. */
.mk-pain .fix {
  padding-top: .9rem; display: flex; gap: .45rem; align-items: flex-start;
  font-size: .88rem; color: var(--plum); font-weight: 550; line-height: 1.5;
}
.mk-pain .fix svg { flex: none; margin-top: .18rem; }

/* ── home: who it is for, as a chooser ─────────────────────────────────────────
   Six sentences a reader might say about themselves, and one panel that answers the one
   they pick: that audience page's own headline, its promise, what it shows, and the way
   in. Radios and `:checked ~`, the feature tabs' pattern, so every panel is in the HTML
   and nothing needs script. The panels share one grid cell, so the section is as tall as
   the tallest and does not jump on a switch; visibility (not display) keeps one panel in
   the accessibility tree and the tab order at a time. Written out to eight, not six: a
   sibling combinator cannot count, and AUDIENCES in site.ts is the list that grows. */
.hm2-aud { position: relative; margin-top: clamp(1.6rem, 3vw, 2.3rem); }
.hm2-aud-in { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.hm2-aud-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .55rem; }
.hm2-aud-tab {
  display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; min-width: 0;
  padding: .85rem .9rem .95rem; border: 1px solid var(--tint-line); border-radius: 14px;
  background: rgba(255,255,255,.62); cursor: pointer; user-select: none;
  font-size: .9rem; font-weight: 620; line-height: 1.32; color: var(--ink);
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
.hm2-aud-tab:hover { background: var(--surface); border-color: var(--tint-border); }
.hm2-aud-tab .ic {
  flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: var(--surface); color: var(--plum); border: 1px solid var(--tint-line);
  transition: background var(--t), color var(--t), border-color var(--t);
}
.hm2-aud-tab .tx { min-width: 0; text-wrap: balance; }
.hm2-aud-in:nth-of-type(1):checked ~ .hm2-aud-tabs .hm2-aud-tab:nth-of-type(1),
.hm2-aud-in:nth-of-type(2):checked ~ .hm2-aud-tabs .hm2-aud-tab:nth-of-type(2),
.hm2-aud-in:nth-of-type(3):checked ~ .hm2-aud-tabs .hm2-aud-tab:nth-of-type(3),
.hm2-aud-in:nth-of-type(4):checked ~ .hm2-aud-tabs .hm2-aud-tab:nth-of-type(4),
.hm2-aud-in:nth-of-type(5):checked ~ .hm2-aud-tabs .hm2-aud-tab:nth-of-type(5),
.hm2-aud-in:nth-of-type(6):checked ~ .hm2-aud-tabs .hm2-aud-tab:nth-of-type(6),
.hm2-aud-in:nth-of-type(7):checked ~ .hm2-aud-tabs .hm2-aud-tab:nth-of-type(7),
.hm2-aud-in:nth-of-type(8):checked ~ .hm2-aud-tabs .hm2-aud-tab:nth-of-type(8) {
  background: var(--surface); border-color: var(--tint-border);
  box-shadow: 0 1px 2px rgba(42,34,48,.05), 0 10px 26px -16px rgba(149,93,140,.45);
}
.hm2-aud-in:nth-of-type(1):checked ~ .hm2-aud-tabs .hm2-aud-tab:nth-of-type(1) .ic,
.hm2-aud-in:nth-of-type(2):checked ~ .hm2-aud-tabs .hm2-aud-tab:nth-of-type(2) .ic,
.hm2-aud-in:nth-of-type(3):checked ~ .hm2-aud-tabs .hm2-aud-tab:nth-of-type(3) .ic,
.hm2-aud-in:nth-of-type(4):checked ~ .hm2-aud-tabs .hm2-aud-tab:nth-of-type(4) .ic,
.hm2-aud-in:nth-of-type(5):checked ~ .hm2-aud-tabs .hm2-aud-tab:nth-of-type(5) .ic,
.hm2-aud-in:nth-of-type(6):checked ~ .hm2-aud-tabs .hm2-aud-tab:nth-of-type(6) .ic,
.hm2-aud-in:nth-of-type(7):checked ~ .hm2-aud-tabs .hm2-aud-tab:nth-of-type(7) .ic,
.hm2-aud-in:nth-of-type(8):checked ~ .hm2-aud-tabs .hm2-aud-tab:nth-of-type(8) .ic {
  background: var(--grad); color: #fff; border-color: transparent;
}
.hm2-aud-in:nth-of-type(1):focus-visible ~ .hm2-aud-tabs .hm2-aud-tab:nth-of-type(1),
.hm2-aud-in:nth-of-type(2):focus-visible ~ .hm2-aud-tabs .hm2-aud-tab:nth-of-type(2),
.hm2-aud-in:nth-of-type(3):focus-visible ~ .hm2-aud-tabs .hm2-aud-tab:nth-of-type(3),
.hm2-aud-in:nth-of-type(4):focus-visible ~ .hm2-aud-tabs .hm2-aud-tab:nth-of-type(4),
.hm2-aud-in:nth-of-type(5):focus-visible ~ .hm2-aud-tabs .hm2-aud-tab:nth-of-type(5),
.hm2-aud-in:nth-of-type(6):focus-visible ~ .hm2-aud-tabs .hm2-aud-tab:nth-of-type(6),
.hm2-aud-in:nth-of-type(7):focus-visible ~ .hm2-aud-tabs .hm2-aud-tab:nth-of-type(7),
.hm2-aud-in:nth-of-type(8):focus-visible ~ .hm2-aud-tabs .hm2-aud-tab:nth-of-type(8) {
  outline: 2px solid var(--plum); outline-offset: 2px;
}
.hm2-aud-panes { display: grid; margin-top: .8rem; }
.hm2-aud-pane {
  grid-area: 1 / 1; min-width: 0; visibility: hidden; opacity: 0; transition: opacity var(--t);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.2rem, 3.2vw, 2.6rem);
  align-items: start; padding: clamp(1.2rem, 2.8vw, 2rem);
  background: var(--surface); border: 1px solid var(--mk-line); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(42,34,48,.04), 0 10px 28px -14px rgba(42,34,48,.10);
}
.hm2-aud-in:nth-of-type(1):checked ~ .hm2-aud-panes .hm2-aud-pane:nth-of-type(1),
.hm2-aud-in:nth-of-type(2):checked ~ .hm2-aud-panes .hm2-aud-pane:nth-of-type(2),
.hm2-aud-in:nth-of-type(3):checked ~ .hm2-aud-panes .hm2-aud-pane:nth-of-type(3),
.hm2-aud-in:nth-of-type(4):checked ~ .hm2-aud-panes .hm2-aud-pane:nth-of-type(4),
.hm2-aud-in:nth-of-type(5):checked ~ .hm2-aud-panes .hm2-aud-pane:nth-of-type(5),
.hm2-aud-in:nth-of-type(6):checked ~ .hm2-aud-panes .hm2-aud-pane:nth-of-type(6),
.hm2-aud-in:nth-of-type(7):checked ~ .hm2-aud-panes .hm2-aud-pane:nth-of-type(7),
.hm2-aud-in:nth-of-type(8):checked ~ .hm2-aud-panes .hm2-aud-pane:nth-of-type(8) {
  visibility: visible; opacity: 1;
}
.hm2-aud-h { margin: 0 0 .6rem; font-family: var(--font-display); font-weight: 650;
  font-size: clamp(1.2rem, 2.1vw, 1.55rem); line-height: 1.22; letter-spacing: -.015em;
  color: var(--ink); text-wrap: balance; }
.hm2-aud-tag { margin: 0 0 1.2rem; color: var(--mk-ink-soft); line-height: 1.6; max-width: 52ch; }
.hm2-aud-list.mk-checks { margin: 0; }
@media (max-width: 1099px) {
  /* Three across in two rows, the icon beside the words: six columns here left each
     sentence four lines tall. */
  .hm2-aud-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hm2-aud-tab { flex-direction: row; align-items: center; padding: .7rem .8rem; }
}
@media (max-width: 760px) {
  /* A strip that snaps a tab at a time, the rail's own phone shape, with the next tab
     showing at the edge. The panel keeps the full width and stacks. */
  .hm2-aud-tabs { display: flex; gap: .45rem; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; padding: 2px 2px .4rem; margin: 0 -2px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
  .hm2-aud-tabs::-webkit-scrollbar { display: none; }
  /* The strip clips at its own edge, so the ring is drawn inside the tab here. */
  .hm2-aud-in:nth-of-type(1):focus-visible ~ .hm2-aud-tabs .hm2-aud-tab:nth-of-type(1),
  .hm2-aud-in:nth-of-type(2):focus-visible ~ .hm2-aud-tabs .hm2-aud-tab:nth-of-type(2),
  .hm2-aud-in:nth-of-type(3):focus-visible ~ .hm2-aud-tabs .hm2-aud-tab:nth-of-type(3),
  .hm2-aud-in:nth-of-type(4):focus-visible ~ .hm2-aud-tabs .hm2-aud-tab:nth-of-type(4),
  .hm2-aud-in:nth-of-type(5):focus-visible ~ .hm2-aud-tabs .hm2-aud-tab:nth-of-type(5),
  .hm2-aud-in:nth-of-type(6):focus-visible ~ .hm2-aud-tabs .hm2-aud-tab:nth-of-type(6),
  .hm2-aud-in:nth-of-type(7):focus-visible ~ .hm2-aud-tabs .hm2-aud-tab:nth-of-type(7),
  .hm2-aud-in:nth-of-type(8):focus-visible ~ .hm2-aud-tabs .hm2-aud-tab:nth-of-type(8) {
    outline-offset: -2px;
  }
  .hm2-aud-tab { flex: 0 0 auto; width: min(15rem, 72%); scroll-snap-align: start; font-size: .88rem; }
  .hm2-aud-tab:last-child { margin-right: 32px; }
  .hm2-aud-pane { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .hm2-aud-lead .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .hm2-aud-tab, .hm2-aud-tab .ic, .hm2-aud-pane { transition: none; }
}

/* ── split rows ────────────────────────────────────────────────────────────── */
.mk-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(1.8rem, 4vw, 3.5rem); align-items: center; }
.mk-split + .mk-split { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.mk-split.rev > :first-child { order: 2; }
@media (max-width: 900px) {
  /* minmax(0,1fr), NOT 1fr. The desktop rule above is already written that way and the
     phone rule was not, so the one column a phone gets took its width from its widest
     unbreakable child instead of from the page. A long button label was enough: the
     column measured 374px inside a 358px container and the whole home page scrolled
     sideways by two pixels. A grid track's default minimum is its content, which is the
     single most common cause of horizontal overflow on a narrow screen. */
  .mk-split { grid-template-columns: minmax(0, 1fr); gap: 1.7rem; }
  .mk-split.rev > :first-child { order: 0; }
}
.mk-checks { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: .7rem; }
.mk-checks li { display: flex; gap: .6rem; align-items: flex-start; line-height: 1.55; color: var(--mk-ink-soft); }
/* Ticks sit in soft discs, so a list reads as a column of marks rather than loose
   glyphs. Ported from the plan cards, where it was the thing that made them scannable. */
.mk-checks li > svg {
  flex: none; margin-top: .1rem; width: 20px; height: 20px; padding: 4px; box-sizing: border-box;
  border-radius: 50%; background: var(--rise-soft); color: var(--rise);
}
.mk-checks li strong { color: var(--ink); font-weight: 620; }

/* ── steps ─────────────────────────────────────────────────────────────────── */
.mk-steps { counter-reset: st; display: grid; gap: clamp(1rem, 2vw, 1.2rem); }
.mk-steps.c3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 900px) { .mk-steps.c3 { grid-template-columns: 1fr; } }
.mk-step { position: relative; padding-top: 3.1rem; }
.mk-step::before {
  counter-increment: st; content: counter(st);
  position: absolute; top: 1.15rem; left: clamp(1.15rem, 2.4vw, 1.5rem);
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--grad); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  box-shadow: 0 4px 12px rgba(149,93,140,.3);
}
.mk-step .t { display: block; margin-top: .8rem; font-size: .78rem; color: var(--mute); font-weight: 600; }

/* ── /how-it-works: the two-lane time rail ────────────────────────────────────────
   Columns: the clock marks, then the YOU lane (steps 1-2), then the CLODE lane (3-5).
   Each lane has a line down it: dashed while that lane is idle (the rail's own ::before
   and ::after), solid where it is working (each step's .hiw-wire). At the handoff a
   crossbar carries the line from one lane to the other, and before step 5 the axis
   breaks, because "every day after" is not a point on the same clock.
   The wire idea is the home page's (.mk-fl + .mk-fl::before, reveal-driven), rebuilt
   under its own names so neither block can restyle the other. Each <li> also carries
   .mk-step, only as the hook public/js/marketing.js reveals; the two .mk-step rules
   above are cancelled for it below, so the number is a tile BESIDE the heading and no
   longer overlaps it.
   Every horizontal position is one calc from four numbers, so the idle lines, the
   wires, the dots and the lane labels cannot drift apart:
     --hiw-ax  the clock column   --hiw-gx  the column gap
     --hiw-lx  line inside a lane --hiw-in  card indent inside a lane
   Under 960px the columns collapse to one, both lines become the one line in the left
   gutter, the clock mark sits on the rail above its card and the card names its lane. */
.hiw-run {
  --hiw-ax: 6.4rem; --hiw-gx: clamp(1rem, 2.2vw, 1.6rem); --hiw-gy: 1.15rem;
  --hiw-lx: 11px; --hiw-in: 2.1rem; --hiw-pad: clamp(1.15rem, 2.4vw, 1.5rem);
  --hiw-you: var(--rose); --hiw-us: var(--plum);
  --hiw-x1: calc(var(--hiw-ax) + var(--hiw-gx) + var(--hiw-lx));
  --hiw-x2: calc(var(--hiw-ax) + var(--hiw-gx) * 2 + (100% - var(--hiw-ax) - var(--hiw-gx) * 2) / 2 + var(--hiw-lx));
  max-width: 1040px; margin: 0 auto;
}
.hiw-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; margin-top: .85rem;
  font-size: .8rem; font-weight: 600; color: var(--mute); line-height: 1.4;
}
.hiw-t { display: inline-flex; align-items: center; gap: .35rem; }
.hiw-t svg { flex: none; }
.hiw-more { display: inline-flex; align-items: center; gap: .3rem; font-size: .86rem; font-weight: 650; color: var(--plum); }
.hiw-more svg { transition: transform var(--t); }
.hiw-more:hover svg, .hiw-more:focus-visible svg { transform: translateX(2px); }

/* Before step one: dashed, unnumbered, off the clock. */
.hiw-pre {
  display: flex; gap: 1rem; align-items: flex-start;
  margin-left: calc(var(--hiw-ax) + var(--hiw-gx));
  padding: var(--hiw-pad); border: 1.5px dashed var(--tint-border); border-radius: 16px;
  background: var(--surface);
}
.hiw-pre-ic {
  flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: var(--tint); color: var(--plum); border: 1px solid var(--tint-line);
}
.hiw-pre-tx { min-width: 0; }
.hiw-pre .mk-h3 { margin: 0 0 .35rem; }
.hiw-pre p { margin: 0; color: var(--mk-ink-soft); line-height: 1.6; }

/* The running total, then the two lane headings over their lines. */
.hiw-head {
  display: grid; grid-template-columns: var(--hiw-ax) minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--hiw-gx); row-gap: 1rem; margin: clamp(1.8rem, 3.5vw, 2.6rem) 0 .9rem;
}
.hiw-total {
  grid-column: 2 / -1; margin: 0; display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-size: clamp(1.12rem, 1.9vw, 1.35rem); font-weight: 650;
  letter-spacing: -.014em; line-height: 1.3; color: var(--ink);
}
.hiw-total svg { flex: none; color: var(--plum); }
.hiw-lanes { display: contents; }
.hiw-lane {
  display: inline-flex; align-items: center; gap: .55rem; margin-left: calc(var(--hiw-lx) - 7px);
  font-size: .86rem; font-weight: 700; color: var(--ink);
}
.hiw-lane::before { content: ''; flex: none; width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; }
.hiw-lane--you { grid-column: 2; }
.hiw-lane--us { grid-column: 3; }
.hiw-lane--you::before { border: 3px solid var(--hiw-you); background: var(--surface); }
.hiw-lane--us::before { background: var(--hiw-us); }

/* The rail and its two idle lines. */
/* isolate + z-index -1: the idle lines paint under every step's wire and card, whatever
   their order in the tree (an ::after comes last and would otherwise dash over a wire) */
.hiw-rail { position: relative; isolation: isolate; list-style: none; margin: 0; padding: 0; display: grid; row-gap: var(--hiw-gy); }
.hiw-rail::before, .hiw-rail::after {
  content: ''; position: absolute; z-index: -1; top: calc(var(--hiw-pad) + 15px); bottom: 0; width: 0; margin-left: -1px;
  border-left: 2px dashed var(--tint-border); pointer-events: none;
}
.hiw-rail::before { left: var(--hiw-x1); }
.hiw-rail::after { left: var(--hiw-x2); }
/* .mk-step is only the reveal hook here: no top padding, no counter tile. */
.hiw-rail > .mk-step { padding-top: 0; }
.hiw-rail > .mk-step::before { content: none; }

.hiw-st {
  position: relative; display: grid; align-items: start;
  grid-template-columns: var(--hiw-ax) minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--hiw-gx);
}
.hiw-at {
  grid-column: 1; grid-row: 1; justify-self: end; text-align: right;
  padding-top: calc(var(--hiw-pad) + 6px);
  font-size: .8rem; font-weight: 700; line-height: 1.3; color: var(--ink); font-variant-numeric: tabular-nums;
}
.hiw-card { position: relative; z-index: 1; grid-row: 1; margin-left: var(--hiw-in); }
.hiw-st--you .hiw-card { grid-column: 2; }
.hiw-st--us .hiw-card { grid-column: 3; }
/* the dot on the lane line, level with the number tile */
.hiw-card::before {
  content: ''; position: absolute; top: calc(var(--hiw-pad) + 8px);
  left: calc(var(--hiw-lx) - var(--hiw-in) - 7px);
  width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box;
}
.hiw-st--you .hiw-card::before { border: 3px solid var(--hiw-you); background: var(--surface); }
.hiw-st--us .hiw-card::before { background: var(--hiw-us); box-shadow: 0 0 0 3px var(--surface); }
.hiw-top { display: flex; align-items: flex-start; gap: .7rem; }
/* first line of the heading centred on the 30px tile, and a two-line heading grows
   downward rather than pulling the tile (and the dot on the lane) off its line */
.hiw-top .mk-h3 { margin: 0; padding-top: .2rem; }
.hiw-n {
  flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: .9rem;
}
.hiw-st--you .hiw-n { background: var(--surface); color: #A8435A; box-shadow: inset 0 0 0 2px var(--hiw-you); }
.hiw-st--us .hiw-n { background: var(--grad); color: #fff; box-shadow: 0 4px 12px rgba(149,93,140,.3); }
.hiw-card > p { margin-top: .6rem; }
.hiw-card .hiw-shot { margin-top: .95rem; }
/* On the wide rail the lane is the column, so the card's own lane name is for screen
   readers only; on a phone it is the only place the lane is said. */
.hiw-who {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.hiw-who::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .4rem; vertical-align: .05em; box-sizing: border-box; }
.hiw-st--you .hiw-who::before { border: 2px solid var(--hiw-you); }
.hiw-st--us .hiw-who::before { background: var(--hiw-us); }

/* The handoff: what the YOU lane says on the row where the work changes hands. */
.hiw-hand {
  grid-column: 2; grid-row: 1; margin: 0 0 0 var(--hiw-in); padding-top: calc(var(--hiw-pad) + .2rem);
  font-size: .9rem; line-height: 1.55; color: var(--mk-ink-soft); max-width: 34ch;
}

/* A step's stretch of its lane line, from the top of its row to the top of the next. */
.hiw-wire {
  position: absolute; z-index: 0; top: 0; bottom: calc(var(--hiw-gy) * -1); width: 0; margin-left: -1px;
  border-left: 2px solid; transform-origin: top; pointer-events: none;
}
.hiw-st--you .hiw-wire { left: var(--hiw-x1); border-color: var(--hiw-you); }
.hiw-st--us .hiw-wire { left: var(--hiw-x2); border-color: var(--hiw-us); }
/* the line starts at the first dot, not above it */
.hiw-st:first-child .hiw-wire { top: calc(var(--hiw-pad) + 15px); }
/* the crossbar that carries the line from your lane into ours */
.hiw-cross {
  position: absolute; z-index: 0; top: -1px; left: var(--hiw-x1); width: calc(var(--hiw-x2) - var(--hiw-x1));
  border-top: 2px solid var(--hiw-us); transform-origin: left; pointer-events: none;
}
/* the axis break before "every day after": two short strokes across the line */
.hiw-st--later::after {
  content: ''; position: absolute; z-index: 2; left: calc(var(--hiw-x2) - 8px); top: calc(var(--hiw-gy) / -2 - 4px);
  width: 16px; height: 6px; border-top: 2px solid var(--hiw-us); border-bottom: 2px solid var(--hiw-us);
  background: var(--surface); transform: skewY(-24deg); pointer-events: none;
}
.hiw-st--later .hiw-at { color: var(--plum); }

/* Drawn as each step arrives, the way the home page's wire is. The class that hides it
   is added by the script, so without JavaScript, or with reduced motion, the rail is
   simply drawn. */
html.js-reveal .hiw-st.will-reveal .hiw-wire { transform: scaleY(0); }
html.js-reveal .hiw-st.is-revealed .hiw-wire { transform: scaleY(1); transition: transform .55s ease .12s; }
html.js-reveal .hiw-st.will-reveal .hiw-cross { transform: scaleX(0); }
html.js-reveal .hiw-st.is-revealed .hiw-cross { transform: scaleX(1); transition: transform .4s ease; }

/* The rail ends in the lag card, across both lanes. */
.hiw-lag {
  flex-direction: row; gap: 1rem; align-items: flex-start;
  margin: var(--hiw-gy) 0 0 calc(var(--hiw-ax) + var(--hiw-gx));
  background: var(--tint); border-color: var(--tint-border);
}
.hiw-lag .ic { margin: 0; background: var(--surface); }
/* on a phone the card sits in the rail's indent and the line ends in a ring beside it */
.hiw-lag::before { content: none; }
.hiw-lag .mk-h3 { margin: 0 0 .35rem; }
.hiw-lag p { max-width: 72ch; }

@media (max-width: 960px) {
  .hiw-run { --hiw-ax: 0px; --hiw-gx: 0px; --hiw-in: 1.9rem; --hiw-x1: var(--hiw-lx); --hiw-x2: var(--hiw-lx); }
  .hiw-pre { margin-left: 0; }
  .hiw-lag { position: relative; margin-left: var(--hiw-in); }
  .hiw-lag::before {
    content: ''; position: absolute; top: calc(var(--hiw-pad) + 13px); left: calc(var(--hiw-lx) - var(--hiw-in) - 7px);
    width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box;
    border: 3px solid var(--hiw-us); background: var(--surface);
  }
  .hiw-st:first-child .hiw-wire { top: 0; }
  .hiw-rail::before { top: 0; }
  .hiw-st:last-child .hiw-wire { bottom: calc((var(--hiw-gy) + var(--hiw-pad) + 13px) * -1); }
  .hiw-head { grid-template-columns: minmax(0, 1fr); row-gap: .7rem; }
  .hiw-total { grid-column: 1; }
  .hiw-lanes { display: flex; flex-wrap: wrap; gap: .4rem 1.3rem; }
  .hiw-lane { margin-left: calc(var(--hiw-lx) - 7px); font-size: .82rem; }
  .hiw-lane--us { margin-left: 0; }
  .hiw-rail::after, .hiw-cross { display: none; }
  .hiw-st { grid-template-columns: minmax(0, 1fr); }
  .hiw-at, .hiw-hand, .hiw-st--you .hiw-card, .hiw-st--us .hiw-card { grid-column: 1; grid-row: auto; }
  .hiw-at { justify-self: start; text-align: left; padding: 0 0 .45rem var(--hiw-in); }
  .hiw-hand { margin: 0 0 .75rem var(--hiw-in); padding: 0; max-width: none; }
  .hiw-who { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; color: var(--ink); }
}
@media (max-width: 600px) {
  .hiw-pre, .hiw-lag { flex-direction: column; gap: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hiw-wire, .hiw-cross { transition: none; transform: none; }
  html.js-reveal .hiw-st.will-reveal .hiw-wire, html.js-reveal .hiw-st.will-reveal .hiw-cross { transform: none; }
  .hiw-more svg { transition: none; }
}

/* ── the accuracy proof block ──────────────────────────────────────────────── */
/* One grid, two cards, three shared rows — the same subgrid idiom the plan cards use.
   The labels are different lengths ("WHAT A DASHBOARD USUALLY SHOWS" wraps, "WHAT WE SHOW"
   does not), so as two independent boxes the two CTR figures sat on different baselines:
   the one comparison on the page whose whole point is that the two numbers line up. */
.mk-proof { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; gap: 1rem; margin-top: 0; }
@media (max-width: 720px) { .mk-proof { grid-template-columns: 1fr; grid-template-rows: none; } }
.mk-proof .p {
  border-radius: 14px; padding: 1.1rem 1.2rem; border: 1px solid var(--mk-line); background: var(--surface);
  display: grid; grid-template-rows: subgrid; grid-row: span 3; align-content: start;
}
@media (max-width: 720px) { .mk-proof .p { grid-template-rows: none; grid-row: auto; } }
.mk-proof .p.bad { border-color: rgba(210,58,87,.28); background: linear-gradient(180deg, rgba(210,58,87,.05), transparent 60%); }
.mk-proof .p.good { border-color: rgba(26,158,132,.3); background: linear-gradient(180deg, rgba(26,158,132,.06), transparent 60%); }
.mk-proof .lbl { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.mk-proof .p.bad .lbl { color: var(--fall); }
.mk-proof .p.good .lbl { color: var(--rise); }
.mk-proof .val { font-family: var(--font-display); font-size: clamp(1.6rem,4vw,2.15rem); font-weight: 700; letter-spacing: -.025em; margin: .35rem 0 .45rem; }
.mk-proof .note { font-size: .87rem; color: var(--mk-ink-soft); line-height: 1.55; margin: 0; }
/* `flex-wrap: wrap` on a one-line flex row with a long text node put the tick on a line
   of its own, reading as a stray glyph above the caption. */
.mk-proof .p.good .note { display: flex; align-items: flex-start; gap: .4rem; flex-wrap: nowrap; font-family: var(--font-mono); font-size: .76rem; color: var(--mute); }
.mk-proof .p.good .note > svg { flex: none; margin-top: .2rem; color: var(--rise); }

/* ── comparison table ──────────────────────────────────────────────────────── */
.mk-cmp-wrap { overflow-x: auto; border: 1px solid var(--mk-line); border-radius: 15px; background: var(--surface); box-shadow: var(--sh-sm); }
.mk-cmp { width: 100%; border-collapse: collapse; min-width: 620px; }
.mk-cmp th, .mk-cmp td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--mk-line); vertical-align: top; font-size: .92rem; line-height: 1.5; }
.mk-cmp thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); font-weight: 700; background: var(--surface-2); }
.mk-cmp thead th:last-child { color: var(--plum); }
.mk-cmp tbody tr:last-child th, .mk-cmp tbody tr:last-child td { border-bottom: none; }
.mk-cmp tbody th { font-weight: 620; color: var(--ink); width: 30%; }
.mk-cmp td.them { color: var(--mute); }
.mk-cmp td.us { color: var(--ink); font-weight: 550; background: var(--tint); }
/* The tick used to sit on every Clode cell, including the rows Clode loses or ties, so it
   said nothing. Each row now carries its own verdict from views/marketing/compare.eta: the
   check on the side that does it better and the home page's ring (full, half, empty) on
   the other, while the tinted, heavier column still says which side is ours. A Google
   tool that wins its row is set in ink rather than grey, so the win reads at a glance. */
.mk-cmp-win { float: left; display: flex; margin: .22rem .5rem 0 0; color: var(--rise); }
.mk-cmp td.them.is-win { color: var(--ink); }
.mk-cmp-ref { font-size: .8em; font-weight: 600; color: var(--plum); text-decoration: none; white-space: nowrap;
  /* A citation mark is 14px of text; the padding makes it a 24px target without moving a
     word, and the negative margin gives the space back to the line. */
  display: inline-block; min-width: 24px; min-height: 24px; padding: 4px 3px; margin: -4px -3px;
  text-align: center; line-height: 16px; vertical-align: baseline; border-radius: 4px; }
.mk-cmp-ref:focus-visible { outline: 2px solid var(--mauve); outline-offset: 1px; }
.mk-cmp-ref:hover { text-decoration: underline; }
.mk-cmp-ref:focus-visible { outline: 2px solid var(--mauve); outline-offset: 2px; border-radius: 3px; }
.mk-scrollhint { font-size: .78rem; color: var(--mute); margin-top: .5rem; display: none; }
@media (max-width: 700px) {
  /* THE TABLE STACKS, it does not scroll. The case against the incumbent was six rows of
     620px behind a 12.5px hint arrow, readable only by dragging sideways, which is the
     one interaction a reader on a phone will not perform for an argument they have not
     been sold on yet. Six blocks instead, each headed by its own row label, with the
     column names printed from data-label because a stacked cell has lost its header.
     The hint goes with the scroll it was explaining. */
  .mk-cmp-wrap { overflow-x: visible; }
  .mk-cmp { min-width: 0; }
  .mk-cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  /* Each row opens on its subject (a larger, heavier label and a 2px rule between rows) so
     a dozen stacked rows can be skimmed by topic, and each column name runs into its value
     on the same line instead of taking a line of its own. */
  .mk-cmp tbody tr { display: block; border-bottom: 2px solid var(--mk-line); }
  .mk-cmp tbody tr:last-child { border-bottom: none; }
  .mk-cmp tbody th { display: block; width: auto; border-bottom: none; padding-top: 1rem; padding-bottom: .3rem;
    font-size: 1rem; font-weight: 700; }
  .mk-cmp tbody td { display: block; border-bottom: none; padding: .2rem 1rem .5rem; }
  .mk-cmp tbody td:last-child { padding-bottom: .85rem; }
  .mk-cmp td.them::before, .mk-cmp td.us::before {
    content: attr(data-label); display: inline; margin-right: .45rem;
    font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
    color: var(--mute); }
  .mk-scrollhint { display: none; }
}

/* ── the comparison pages around the table ─────────────────────────────────── */
/* The key: what the four marks mean, printed once above the table at every width. */
.mk-cmp-key { display: flex; flex-wrap: wrap; gap: .45rem 1.1rem; margin: 0 0 .75rem; }
.mk-cmp-key > span { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-mono);
  font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--mute); }
.mk-cmp-key .mk-vs-m, .mk-cmp-key .mk-cmp-win { float: none; margin: 0; }
/* One source line under the table instead of the same citation inside five cells. */
.mk-cmp-src { max-width: 78ch; margin: .9rem 0 0; font-size: .82rem; line-height: 1.55; color: var(--mute); }
.mk-cmp-src p { margin: 0 0 .35rem; }
.mk-cmp-src ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.mk-cmp-src li { padding: .15rem .4rem; margin-left: -.4rem; border-radius: 6px; scroll-margin-top: 6rem; }
.mk-cmp-src li:target { background: var(--tint); color: var(--mk-ink-soft); }
.mk-cmp-src .n { font-family: var(--font-mono); font-weight: 700; color: var(--plum); }
/* Verdict, table and "where they're better" are the page's three equal sections: one
   heading size for all of them. */
.mk-cmp-h { font-size: clamp(1.3rem, 2.5vw, 1.6rem); }
/* The way back to the hub, under each comparison's lede: a plain one-line link. */
.mk-head.lead p.mk-cmp-up { margin-top: .75rem; font-size: .92rem; }
.mk-cmp-up a { color: var(--plum); font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px; }
.mk-cmp-up a:focus-visible { outline: 2px solid var(--mauve); outline-offset: 3px; border-radius: 3px; }
/* The verdict: the uppercase kicker became a heading that states the finding. */
.mk-callout.mk-cmp-verdict { max-width: 78ch; margin-inline: auto; padding: 1.15rem 1.35rem 1.25rem; }
.mk-cmp-verdict .mk-cmp-h { margin: 0 0 .55rem; color: var(--ink); }
.mk-cmp-verdict p + p { margin-top: .85rem; }
/* Where they're better: a section with a real heading, sized like "Side by side". */
.mk-fair { margin-top: 2rem; max-width: 78ch; padding: clamp(1.15rem, 2.4vw, 1.5rem);
  border: 1px solid var(--tint-border); border-radius: 15px; background: var(--tint); }
.mk-fair .mk-cmp-h { margin: 0 0 .5rem; }
.mk-fair p { margin: 0; color: var(--mk-ink-soft); line-height: 1.62; }
/* What each tool is for, above the Search Console table: two lists, not a paragraph.
   A grid container, two equal tracks; one track at phone width. */
.mk-dol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.9rem, 2vw, 1.15rem);
  max-width: 78ch; margin: 1.4rem auto 0; }
.mk-dol-col { border: 1px solid var(--mk-line); border-radius: 15px; background: var(--surface);
  padding: 1.05rem 1.2rem 1.15rem; box-shadow: var(--sh-sm); min-width: 0; }
.mk-dol-col--us { background: var(--tint); border-color: var(--tint-border); }
.mk-dol-col .mk-h3 { margin: 0 0 .6rem; }
.mk-dol-col--us .mk-h3 { color: var(--plum); }
.mk-dol-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.mk-dol-col li { position: relative; padding-left: 1.05rem; line-height: 1.45; color: var(--mk-ink-soft); font-size: .95rem; }
.mk-dol-col li::before { content: ''; position: absolute; left: 0; top: .5em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--mute); opacity: .55; }
.mk-dol-col--us li::before { background: var(--rise); opacity: 1; }
@media (max-width: 700px) {
  .mk-dol { grid-template-columns: minmax(0, 1fr); }
  .mk-callout.mk-cmp-verdict { padding: 1rem 1.05rem 1.1rem; }
}

/* ── /compare: start from what you need ───────────────────────────────────────
   Six radios as chips; :has() shows the one row whose radio is checked. Without :has()
   the chips stay hidden and the definition list shows every row, so no reader and no
   crawler ever gets less than the whole answer. */
.mk-pick { max-width: 60rem; margin: 0 auto clamp(2.4rem, 5vw, 3.4rem); }
.mk-pick-head { text-align: center; margin-bottom: 1.1rem; }
.mk-pick-head .mk-cmp-h { margin: 0 0 .35rem; }
.mk-pick-head p { margin: 0; color: var(--mk-ink-soft); }
.mk-pick-chips { display: none; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 0 1rem; }
.mk-pick-chip {
  position: relative; display: inline-flex; align-items: center; cursor: pointer; user-select: none;
  border: 1px solid var(--mk-line); border-radius: 10px; background: var(--surface);
  padding: .52rem .95rem; font-size: .9rem; font-weight: 600; line-height: 1.3; color: var(--mk-ink-soft);
  transition: border-color var(--t), background var(--t), color var(--t);
}
/* The radio stays in the accessibility tree and takes the keyboard; only its dot is hidden. */
.mk-pick-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mk-pick-chip:hover { border-color: var(--tint-border); color: var(--plum); }
.mk-pick-chip:has(input:checked) { background: var(--plum); border-color: var(--plum); color: #fff; }
.mk-pick-chip:has(input:focus-visible) { outline: 2px solid var(--mauve); outline-offset: 2px; }
.mk-pick-list { margin: 0; display: grid; gap: 1rem; }
.mk-pick-row {
  border: 1px solid var(--mk-line); border-radius: 15px; background: var(--surface);
  padding: clamp(1rem, 2.2vw, 1.35rem); box-shadow: 0 1px 2px rgba(42,34,48,.04), 0 10px 28px -14px rgba(42,34,48,.10);
}
.mk-pick-row dt { font-family: var(--font-display); font-weight: 650; font-size: 1.02rem; color: var(--ink); margin: 0 0 .8rem; }
.mk-pick-row dd { margin: 0; }
.mk-pick-tools { list-style: none; margin: 0 0 .95rem; padding: 0; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }
.mk-pick-tool {
  display: flex; flex-direction: column; gap: .35rem; min-width: 0; padding: .7rem .8rem;
  border: 1px solid var(--mk-line); border-radius: 11px; background: var(--surface-2);
  transition: opacity var(--t), background var(--t), border-color var(--t);
}
.mk-pick-tool .nm { font-weight: 650; font-size: .92rem; line-height: 1.25; color: var(--ink); }
.mk-pick-tool .st { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-mono);
  font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--mute); }
.mk-pick-tool .mk-vs-m { float: none; margin: 0; }
.mk-pick-tool.is-yes { background: var(--tint); border-color: var(--tint-border); box-shadow: inset 0 0 0 1px var(--tint-border); }
.mk-pick-tool.is-yes .st { color: var(--rise); }
.mk-pick-tool.is-part { background: var(--surface); border-style: dashed; border-color: var(--tint-border); }
.mk-pick-tool.is-no { background: var(--surface); }
.mk-pick-tool.is-no .nm { color: var(--mute); }
.mk-pick-tool.is-no .mk-vs-m { opacity: .5; }
.mk-pick-tool.is-us.is-yes .nm { color: var(--plum); }
.mk-pick-ans { margin: 0; line-height: 1.62; color: var(--mk-ink-soft); max-width: 70ch; }
.mk-pick-ans strong { color: var(--ink); font-weight: 650; }
@supports selector(:has(*)) {
  .mk-pick-chips { display: flex; }
  .mk-pick-row { display: none; }
  /* The chip names the need, so the row's own label is kept for screen readers only. */
  .mk-pick-row dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mk-pick:has(.mk-pick-chip:nth-child(1) input:checked) .mk-pick-row:nth-child(1),
  .mk-pick:has(.mk-pick-chip:nth-child(2) input:checked) .mk-pick-row:nth-child(2),
  .mk-pick:has(.mk-pick-chip:nth-child(3) input:checked) .mk-pick-row:nth-child(3),
  .mk-pick:has(.mk-pick-chip:nth-child(4) input:checked) .mk-pick-row:nth-child(4),
  .mk-pick:has(.mk-pick-chip:nth-child(5) input:checked) .mk-pick-row:nth-child(5),
  .mk-pick:has(.mk-pick-chip:nth-child(6) input:checked) .mk-pick-row:nth-child(6) {
    display: block; animation: mk-pick-in .24s ease-out;
  }
}
@keyframes mk-pick-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) {
  .mk-pick-head { text-align: left; }
  .mk-pick-chips { justify-content: flex-start; gap: .4rem; }
  .mk-pick-chip { font-size: .86rem; padding: .48rem .75rem; }
  .mk-pick-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
  .mk-pick-tool { padding: .6rem .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-pick-chip, .mk-pick-tool { transition: none; }
  .mk-pick-row { animation: none !important; }
}

/* ── home: three steps ─────────────────────────────────────────────────────── */
/* Its own class set rather than .mk-steps, which /how-it-works still uses and which is a
   plain numbered card. Here the three steps are one run: a dashed wire crosses the gap
   between them, drawn left to right as each step arrives, and each step carries a small
   drawing of what happens in it. */
/* NOT `.mk-flow`: that class is the long-form prose wrapper on every feature and audience
   page (feature.eta, audience.eta), and sharing the name turned 19 pages of prose into
   three narrow columns with the card padding gone. */
.mk-steprail {
  --fl-gap: clamp(1rem, 2.2vw, 1.7rem);
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fl-gap);
}
.mk-fl {
  position: relative; background: var(--surface); border: 1px solid var(--mk-line);
  border-radius: 16px; padding: 1.1rem 1.2rem 1.3rem; box-shadow: var(--sh-sm);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.mk-fl:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--tint-border); }
/* The wire lives on the step it arrives AT, so it is drawn by that step's own reveal
   rather than by a fourth element nobody can see. */
.mk-fl + .mk-fl::before {
  content: ''; position: absolute; top: calc(1.1rem + 41px);
  left: calc((var(--fl-gap) + 1px) * -1); width: calc(var(--fl-gap) + 2px);
  border-top: 2px dashed var(--tint-border); transform-origin: left;
}
html.js-reveal .mk-fl.will-reveal::before { transform: scaleX(0); }
html.js-reveal .mk-fl.is-revealed::before { transform: scaleX(1); transition: transform .45s ease .14s; }

.fl-head { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; }
.fl-n {
  flex: none; width: 27px; height: 27px; border-radius: 9px; display: grid; place-items: center;
  background: var(--grad); color: #fff; font-family: var(--font-display); font-weight: 700;
  font-size: .86rem; box-shadow: 0 4px 12px rgba(149, 93, 140, .28);
}
.mk-fl .mk-h3 { margin: 0; font-size: 1.02rem; letter-spacing: -.015em; }
.mk-fl > p { margin: .55rem 0 0; color: var(--mk-ink-soft); font-size: .93rem; line-height: 1.55; }

.fl-art {
  height: 82px; border-radius: 11px; background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--mk-line); padding: 0 .85rem; overflow: hidden;
  display: flex; align-items: center;
}

/* 1. the connection: two ends and one dot crossing between them */
.fl-link { gap: .5rem; }
.fl-chip {
  flex: none; max-width: 42%; font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  padding: .3rem .5rem; border-radius: 7px; background: var(--surface); color: var(--mute);
  box-shadow: inset 0 0 0 1px var(--mk-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fl-chip--us { background: var(--grad); color: #fff; box-shadow: none; }
.fl-wire {
  position: relative; flex: 1; height: 2px;
  background: repeating-linear-gradient(90deg, var(--tint-border) 0 5px, transparent 5px 10px);
}
.fl-wire i {
  position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%;
  background: var(--grad); animation: flDot 2.9s cubic-bezier(.62, 0, .38, 1) infinite;
}
@keyframes flDot {
  0% { left: 0; opacity: 0; }
  14% { opacity: 1; }
  86% { opacity: 1; }
  100% { left: calc(100% - 8px); opacity: 0; }
}

/* 2. the groups: three folders, and the pages falling into each one. Every row is one
   folder with its own colour on the tab at the left; its pages take that colour column by
   column, so the drawing reads as pages being sorted rather than a table filling in.
   The resting state is the sorted one, so with no motion the picture is finished. */
.hm2-flg { flex-direction: column; justify-content: center; align-items: stretch; gap: 7px; }
.hm2-flg-row { --c: var(--mauve); display: flex; align-items: center; gap: 4px; }
.hm2-flg-row:nth-child(2) { --c: var(--rose); }
.hm2-flg-row:nth-child(3) { --c: var(--plum); }
.hm2-flg-row b { flex: none; width: 26px; height: 9px; margin-right: 6px; border-radius: 3px; background: var(--c); }
.hm2-flg-row i {
  flex: 1 1 0; height: 11px; border-radius: 3px; background: var(--c); opacity: .78;
  animation: hm2-flg-sort 5.6s ease-in-out infinite; animation-delay: calc(var(--k, 0) * .11s);
}
@keyframes hm2-flg-sort {
  0%, 8% { background: var(--surface); box-shadow: inset 0 0 0 1px var(--mk-line); opacity: 1; }
  26%, 84% { background: var(--c); box-shadow: none; opacity: .78; }
  100% { background: var(--surface); box-shadow: inset 0 0 0 1px var(--mk-line); opacity: 1; }
}

/* 3. the week, with today landing on the right of it every few seconds */
.fl-days { padding-bottom: .8rem; align-items: flex-end; }
/* Bars capped and centred rather than stretched: seven bars across the full box are
   30px wide each, which reads as seven blocks and not as a week. */
.fl-bars {
  flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 7px;
  height: 56px; border-bottom: 1px solid var(--mk-line);
}
.fl-bars i { flex: 1 1 0; max-width: 19px; border-radius: 3px 3px 0 0; background: var(--tint-line); }
.fl-bars i:last-child { background: var(--grad); transform-origin: bottom; animation: flToday 4.4s ease-in-out infinite; }
@keyframes flToday {
  0% { transform: scaleY(.04); }
  16% { transform: scaleY(1); }
  88% { transform: scaleY(1); }
  100% { transform: scaleY(.04); }
}

@media (max-width: 900px) {
  .mk-steprail { grid-template-columns: 1fr; }
  /* One column, so the wire turns and runs down the left, in line with the numbers. */
  .mk-fl + .mk-fl::before {
    top: calc((var(--fl-gap) + 1px) * -1); left: 2.4rem; width: 0; height: calc(var(--fl-gap) + 2px);
    border-top: none; border-left: 2px dashed var(--tint-border); transform-origin: top;
  }
  html.js-reveal .mk-fl.will-reveal::before { transform: scaleY(0); }
  html.js-reveal .mk-fl.is-revealed::before { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  /* Every drawing rests in its finished state, so switching the motion off leaves a
     picture rather than a blank. */
  .fl-wire i, .hm2-flg-row i, .fl-bars i:last-child { animation: none; }
  .mk-fl, .mk-fl + .mk-fl::before { transition: none; }
}
/* How long each step takes, as a quiet line at the foot of the card. The card is a
   column so the three lines sit level across the rail whatever the paragraph above. */
.mk-fl { display: flex; flex-direction: column; }
.mk-fl > .hm2-fl-t {
  margin: auto 0 0; padding-top: .8rem; display: flex; align-items: center; gap: .4rem;
  font-size: .8rem; font-weight: 650; color: var(--plum);
}
.mk-fl > .hm2-fl-t .ic-svg { flex: none; color: var(--mauve); }
/* The one sentence for somebody not in Search Console yet, directly over the button. */
.hm2-how-pre {
  margin: 1.6rem auto 0; max-width: 62ch; text-align: center; text-wrap: balance;
  color: var(--mk-ink-soft); font-size: .93rem; line-height: 1.55;
}
.hm2-how-pre a { color: var(--plum); font-weight: 650; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .25rem; }
.hm2-how-pre a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hm2-how-pre a:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; border-radius: 4px; }
.hm2-how-pre + .mk-ctas { margin-top: .9rem; }

/* ── home: the scrubbed decomposition ──────────────────────────────────────────
   Ten cases, one chart each, and one control that pulls the aggregate apart. The
   drawing is public/js/mk-scrub.js; everything here is the frame around it. The
   `.mp-` prefix is the block's own, so these rules cannot reach the rest of the page.
   Nothing starts hidden: with no script the ten cases are still prose, and the stage
   is the only thing that stays empty. */
.mp-block{
  --mp-t:0; --mp-k:0;
  --mp-r:18px;
  box-sizing:border-box; width:100%; max-width:1120px; margin:0 auto;
  padding:clamp(16px,2.4vw,28px);
  background:var(--surface); border:1px solid var(--mk-line); border-radius:var(--mp-r);
  color:var(--ink); overflow:hidden;
}
.mp-block *,.mp-block *::before,.mp-block *::after{box-sizing:border-box}
.mp-h{margin:0; font-size:clamp(21px,2.5vw,29px); line-height:1.18; letter-spacing:-.015em; font-weight:700; color:var(--ink)}
.mp-sub{margin:8px 0 0; max-width:60ch; font-size:15px; line-height:1.5; color:var(--mute)}
/* Phone: the case, then the strip of ten, then the chart, so every case is seen before
   the drawing. 700 to 899: one column with the ten as a two-column index under the
   chart. 900 up: case beside chart, and the index across the full width under both, which
   is the only width at which every headline fits on one line. */
.mp-grid{display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:'t' 'n' 's'; gap:18px; margin-top:22px}
.mp-col-text{grid-area:t}
.mp-col-stage{grid-area:s}
.mp-nav{grid-area:n}
@media (min-width:700px){
  .mp-grid{grid-template-areas:'t' 's' 'n'; gap:22px}
}
@media (min-width:900px){
  .mp-grid{grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr); grid-template-areas:'t s' 'n n'; gap:26px 32px; align-items:start}
}

/* ---- case copy: all ten always in the DOM ---- */
.mp-cases{display:grid; align-items:start; margin:0; padding:0; list-style:none}
.mp-case{grid-area:1/1; transition:opacity .28s ease, transform .28s ease}
.mp-case[data-mp-on="0"]{visibility:hidden; opacity:0; transform:translateY(6px); pointer-events:none}
.mp-case[data-mp-on="1"]{visibility:visible; opacity:1; transform:none}
.mp-hl{margin:0; font-size:clamp(19px,2.1vw,25px); line-height:1.22; letter-spacing:-.012em; font-weight:700; color:var(--ink)}
.mp-side{margin:14px 0 0; padding-left:14px; border-left:2px solid var(--mk-line); font-size:15px; line-height:1.55}
.mp-det{color:color-mix(in srgb, var(--mute), var(--ink) calc((1 - var(--mp-t)) * 100%))}
.mp-ans{color:color-mix(in srgb, var(--mute), var(--ink) calc(var(--mp-t) * 100%))}
.mp-ans{border-left-color:color-mix(in srgb, var(--mk-line), var(--mauve) calc(var(--mp-t) * 100%))}
.mp-det{border-left-color:color-mix(in srgb, var(--mk-line), var(--mute) calc((1 - var(--mp-t)) * 100%))}
.mp-tag{display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--mute); margin-bottom:4px}

/* ---- case navigation: the ten headlines ----
   Wide: an index of ten rows in two columns, read down (1 to 5, then 6 to 10), a hairline
   above it so it reads as the block's contents rather than as more of the case. The
   lit row is the case on screen: tint ground and the number in the brand gradient. */
.mp-nav{min-width:0; padding-top:16px; border-top:1px solid var(--mk-line)}
.mp-dots{position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(5,auto); grid-auto-flow:column; gap:4px 20px; min-width:0}
.mp-dot{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  display:flex; align-items:center; gap:11px; width:100%; min-width:0; min-height:40px;
  padding:6px 12px 6px 7px; border-radius:10px; text-align:left;
  border:1px solid transparent; background:transparent; color:var(--mk-ink-soft);
  font:inherit; font-size:14px; font-weight:550; line-height:1.35;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.hm2-mp-n{flex:none; width:26px; height:26px; border-radius:8px; display:grid; place-items:center;
  font-family:var(--font-mono); font-size:11.5px; font-weight:700; color:var(--mute);
  background:var(--surface-2); border:1px solid var(--mk-line);
  transition:background-color .18s ease, color .18s ease, border-color .18s ease}
.hm2-mp-h{min-width:0; text-wrap:pretty}
.mp-dot:hover{background:var(--surface-2); color:var(--ink)}
.mp-dot[aria-pressed="true"]{background:var(--tint); border-color:var(--tint-border); color:var(--ink); font-weight:650}
.mp-dot[aria-pressed="true"] .hm2-mp-n{background:var(--grad); border-color:transparent; color:#ffffff}
.mp-block :focus-visible{outline:2px solid var(--mauve); outline-offset:2px; border-radius:6px}
.mp-dot:focus-visible{border-radius:10px}
@media (min-width:700px) and (max-width:899px){
  /* Under the chart here, so the hairline separates it from the scrub labels. */
  .mp-nav{padding-top:18px}
}
/* Phone: the same ten chips in one strip that scrolls sideways and snaps a chip at a
   time. A chip is at most 82% of the strip, so the next one always shows at the edge,
   which is the affordance; the fade on the right edge says the same thing. Two lines of
   headline at most, and every headline in the dictionary fits in two at this width. */
@media (max-width:699px){
  .mp-nav{padding-top:0; border-top:none; margin:0 -2px}
  .mp-dots{display:flex; gap:6px; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-padding:0 2px; padding:2px 2px 6px; scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent)}
  .mp-dots::-webkit-scrollbar{display:none}
  /* The strip clips at its own edge, so the ring is drawn inside the chip here. */
  .mp-dot:focus-visible{outline-offset:-2px}
  .mp-dot{flex:0 0 auto; width:auto; max-width:82%; min-height:44px; padding:6px 12px 6px 6px; gap:8px;
    scroll-snap-align:start; background:var(--surface-2); border-color:var(--mk-line); font-size:13px; line-height:1.3}
  .mp-dot:last-child{margin-right:28px}
  .hm2-mp-n{width:24px; height:24px; font-size:11px}
  .hm2-mp-h{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
}

/* ---- stage ---- */
.mp-stagewrap{position:relative; border:1px solid var(--mk-line); border-radius:14px; background:var(--surface-2); overflow:hidden; touch-action:pan-y; cursor:ew-resize; user-select:none; -webkit-user-select:none}
.mp-stagewrap:active{cursor:grabbing}
.mp-stage{display:block; width:100%; height:auto}
.mp-hint{position:absolute; left:50%; bottom:8px; transform:translateX(-50%); margin:0; padding:3px 10px; border-radius:999px; background:var(--surface); border:1px solid var(--mk-line); font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em; color:var(--mute); pointer-events:none; transition:opacity .3s ease}
.mp-hint[data-mp-off="1"]{opacity:0}
/* On a phone the pill sat on the chart's own x-axis and hid the two dates that say what
   window the chart covers. Here it leaves the drawing and prints on its own line at the
   foot of the stage, still inside the area that takes the drag it describes, and it
   keeps its line when it fades so nothing under it moves. */
@media (max-width:699px){
  .mp-hint{position:static; transform:none; display:block; margin:.5rem auto .6rem; width:max-content; max-width:calc(100% - 1rem); text-align:center}
}

/* ---- scrub ---- */
.mp-controls{display:flex; align-items:center; gap:12px; margin-top:14px}
.mp-play{
  -webkit-appearance:none; appearance:none; cursor:pointer; flex:0 0 auto;
  display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px 0 12px;
  border-radius:11px; border:1px solid var(--tint-border); background:var(--tint); color:var(--plum);
  font:inherit; font-size:13px; font-weight:600; line-height:1; white-space:nowrap;
  transition:background-color .18s ease, color .18s ease;
}
.mp-play:hover{background:var(--grad); border-color:transparent; color:#ffffff}
.mp-play svg{width:13px; height:13px; display:block}
.mp-scrub{flex:1 1 auto; min-width:0; position:relative; height:38px; display:flex; align-items:center}
.mp-track{position:relative; width:100%; height:8px; border-radius:999px; background:var(--mk-line)}
.mp-fill{position:absolute; inset:0 auto 0 0; width:calc(var(--mp-t) * 100%); border-radius:999px; background:var(--grad)}
.mp-knob{position:absolute; top:50%; left:calc(var(--mp-t) * 100%); width:24px; height:24px; margin:-12px 0 0 -12px; border-radius:50%; background:var(--surface); border:1px solid var(--tint-border); box-shadow:0 1px 4px rgba(42,34,48,.16); display:flex; align-items:center; justify-content:center}
.mp-knob span{width:9px; height:9px; border-radius:50%; background:var(--grad); display:block}
.mp-range{position:absolute; inset:-15px 0; width:100%; height:38px; margin:0; opacity:0; cursor:ew-resize}
.mp-track:has(.mp-range:focus-visible){outline:2px solid var(--mauve); outline-offset:6px; border-radius:999px}
.mp-ends{display:flex; justify-content:space-between; gap:12px; margin-top:9px; font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase}
.mp-end-a{color:color-mix(in srgb, var(--mute), var(--mk-ink-soft) calc((1 - var(--mp-t)) * 100%))}
.mp-end-b{color:color-mix(in srgb, var(--mute), var(--mauve) calc(var(--mp-t) * 100%))}
.mp-note{margin:10px 0 0; font-size:11.5px; color:var(--mute)}

/* ---- svg pieces ---- */
.mp-ax{fill:var(--mute); font-size:10px}
.mp-axm{fill:var(--mute); font-size:10px; font-family:var(--font-mono)}
.mp-cap{fill:var(--mute); font-size:11px; font-family:var(--font-mono); letter-spacing:.03em}
.mp-lab{fill:var(--mk-ink-soft); font-size:11.5px; font-weight:700}
.mp-labs{fill:var(--mute); font-size:10.5px}
.mp-gl{stroke:var(--mk-line); stroke-width:1}
.mp-base{stroke:var(--tint-line); stroke-width:1}
.mp-ln{fill:none; stroke-width:2.25; stroke-linejoin:round; stroke-linecap:round}
.mp-ln-n{stroke:var(--plum)}
.mp-up{stroke:color-mix(in srgb, var(--plum), var(--rise) calc(var(--mp-k) * 100%))}
.mp-dn{stroke:color-mix(in srgb, var(--plum), var(--fall) calc(var(--mp-k) * 100%))}
.mp-ro{stroke:color-mix(in srgb, var(--plum), var(--rose) calc(var(--mp-k) * 100%))}
.mp-tup{fill:color-mix(in srgb, var(--plum), var(--rise) calc(var(--mp-k) * 100%))}
.mp-tdn{fill:color-mix(in srgb, var(--plum), var(--fall) calc(var(--mp-k) * 100%))}
.mp-fup{fill:color-mix(in srgb, var(--plum), var(--rise) calc(var(--mp-k) * 100%))}
.mp-fdn{fill:color-mix(in srgb, var(--plum), var(--fall) calc(var(--mp-k) * 100%))}
.mp-fma{fill:color-mix(in srgb, var(--plum), var(--mauve) calc(var(--mp-k) * 100%))}
.mp-fro{fill:color-mix(in srgb, var(--plum), var(--rose) calc(var(--mp-k) * 100%))}
.mp-sq{shape-rendering:crispEdges}
.mp-sq1{fill:color-mix(in srgb, var(--mute), var(--rise) calc(var(--mp-k) * 100%))}
.mp-sq2{fill:color-mix(in srgb, var(--mute), var(--mauve) calc(var(--mp-k) * 100%))}
.mp-sq3{fill:color-mix(in srgb, var(--mute), var(--rose) calc(var(--mp-k) * 100%))}
.mp-sq4{fill:color-mix(in srgb, var(--mute), var(--fall) calc(var(--mp-k) * 100%))}
.mp-mark{stroke:var(--mauve); stroke-width:1.5; stroke-dasharray:3 3}
.mp-rose{fill:var(--rose)}
.mp-mauve{fill:var(--mauve)}
.mp-plum{fill:var(--plum)}
.mp-riseF{fill:var(--rise)}
.mp-fallF{fill:var(--fall)}
.mp-strokeM{stroke:var(--mauve); fill:none; stroke-width:1.5}
@media (prefers-reduced-motion:reduce){
  .mp-block *{transition:none !important; animation:none !important}
}

/* ── home: the Search Console comparison ───────────────────────────────────── */
/* Fourteen rows, so the table is grouped and the last two groups are folded. The fold is
   a checkbox and a sibling selector, not script: every row is in the markup whether it is
   folded or not, which is what a crawler and a reader without JS both need. The rows are
   hidden with `display: none` rather than clipped, so a screen reader skips exactly what
   the eye does. */
.mk-vs { position: relative; }
.mk-vs-in { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  border: 0; opacity: 0; clip-path: inset(50%); overflow: hidden; }
.mk-vst { width: 100%; border-collapse: collapse; }
.mk-vst thead th {
  text-align: left; padding: .5rem .9rem .55rem; font-family: var(--font-mono);
  font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700;
  color: var(--mute); border-bottom: 1px solid var(--mk-line);
}
.mk-vst thead th.us { color: var(--plum); }
.mk-vst tr.grp th {
  text-align: left; padding: 1.15rem .9rem .4rem; font-family: var(--font-mono);
  font-size: .71rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
  color: var(--plum);
}
.mk-vst tbody:first-of-type tr.grp th { padding-top: .8rem; }
.mk-vst tbody th[scope="row"] {
  text-align: left; vertical-align: top; width: 27%; min-width: 10.5rem;
  padding: .78rem .9rem; font-family: var(--font-display); font-weight: 640;
  letter-spacing: -.012em; color: var(--ink); border-top: 1px solid var(--mk-line);
}
.mk-vst tbody td {
  vertical-align: top; padding: .78rem .9rem; font-size: .93rem; line-height: 1.5;
  border-top: 1px solid var(--mk-line);
}
.mk-vst tr.grp th { border-top: none; background: var(--surface); }
.mk-vst td.them { color: var(--mute); width: 33%; }
.mk-vst td.us { color: var(--ink); font-weight: 550; background: var(--tint); }
/* The tick floats so the second line of a wrapped cell runs under the first word rather
   than under the tick, which is what a flex row on a table cell costs in column width. */
.mk-vst td.us > .ic-svg { float: left; margin: .2rem .5rem 0 0; color: var(--rise); }
/* Search Console's half of the row, as a mark: a ring with nothing in it, half of it, or
   all of it. Drawn rather than an icon because the three have to read as one scale, and
   three unrelated glyphs do not. Grey, not red: these are limits, not faults. */
.mk-vs-m {
  float: left; width: 13px; height: 13px; margin: .3rem .55rem 0 0; box-sizing: border-box;
  border: 1.5px solid var(--mute); border-radius: 50%; opacity: .62;
}
/* `--no` is the empty ring, and carries no slash: a diagonal inside a 13px circle is
   mostly slash and barely circle, which read as a stray stroke rather than as the first
   step of a scale. */
.mk-vs-m--no { background: none; }
.mk-vs-m--lim { background: linear-gradient(90deg, var(--mute) 50%, transparent 50%); }
.mk-vs-m--eq { background: var(--mute); }
.mk-vst tbody tr:hover th[scope="row"], .mk-vst tbody tr:hover td.them { background: var(--surface-2); }
.mk-vst tbody tr:hover td.us { background: var(--tint-line); }
.mk-vst tr.grp:hover th { background: none; }
.mk-vst tr.more { display: none; }
.mk-vs-in:checked ~ .mk-vst tr.more { display: table-row; }

.mk-vs-btn {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; margin-top: 1rem;
  font-size: .88rem; font-weight: 620; color: var(--plum); user-select: none;
  border: 1px solid var(--mk-line); border-radius: 10px; padding: .5rem .95rem;
  background: var(--surface); transition: border-color .16s, transform .16s;
}
.mk-vs-btn:hover { border-color: var(--tint-border); transform: translateY(-1px); }
.mk-vs-in:focus-visible ~ .mk-vs-btn { outline: 2px solid var(--mauve); outline-offset: 2px; }
.mk-vs-btn .a, .mk-vs-btn .b { display: inline-flex; align-items: center; gap: .4rem; }
.mk-vs-btn .b { display: none; }
.mk-vs-btn .b .ic-svg { transform: rotate(180deg); }
.mk-vs-in:checked ~ .mk-vs-btn .a { display: none; }
.mk-vs-in:checked ~ .mk-vs-btn .b { display: inline-flex; }

/* The key is the stacked table's column header, printed once. */
.mk-vs-key { display: none; }

@media (max-width: 760px) {
  /* STACKS, AND STILL COMPARES. The first version of this printed the column name above
     every cell, which is 28 repetitions of the same two words and four lines per row; the
     two values ended up reading as a flat list rather than as two sides of one question.
     The marks carry the column instead, the key above the table says what they mean once,
     and each row is now the topic and two lines under it. */
  .mk-vst thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mk-vst tbody tr { display: block; }
  .mk-vst tr.grp th { display: block; padding: 1.25rem 0 .3rem; }
  .mk-vst tbody th[scope="row"] {
    display: block; width: auto; min-width: 0; padding: .75rem 0 .35rem; font-size: 1rem;
  }
  /* `.mk-vst td.them` is one class heavier than `.mk-vst tbody td`, so the desktop 33%
     survived the stack and every value wrapped inside a 92px column. Both cells are
     re-widened here at matching specificity. */
  .mk-vst tbody td { display: flex; gap: .5rem; align-items: flex-start; border-top: none;
    padding: .2rem 0; font-size: .95rem; }
  .mk-vst td.them, .mk-vst td.us { width: auto; }
  .mk-vst tbody td:last-child { margin-bottom: .55rem; }
  .mk-vst td.them::before, .mk-vst td.us::before { content: none; }
  /* float is ignored on a flex item, so both marks become the row's first column and the
     second line of a wrapped value lines up under the first. */
  .mk-vst td.us > .ic-svg { display: block; float: none; margin: .22rem 0 0; }
  .mk-vst .mk-vs-m { display: block; float: none; margin: .3rem 0 0; }
  .mk-vst td.us { background: var(--tint); border-radius: 9px; padding: .4rem .6rem; margin-left: -.6rem;
    margin-right: -.6rem; }
  .mk-vst tbody tr:hover th[scope="row"], .mk-vst tbody tr:hover td.them,
  .mk-vst tbody tr:hover td.us { background: none; }
  .mk-vst tbody tr:hover td.us { background: var(--tint); }
  .mk-vst tr.more { display: none; }
  .mk-vs-in:checked ~ .mk-vst tr.more { display: block; }

  .mk-vs-key { display: flex; gap: .55rem .95rem; flex-wrap: wrap; padding-bottom: .7rem;
    border-bottom: 1px solid var(--mk-line); margin: 0; }
  .mk-vs-key span { display: inline-flex; align-items: center; gap: .4rem;
    font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase;
    letter-spacing: .07em; font-weight: 700; color: var(--mute); }
  .mk-vs-key .us { color: var(--plum); }
  .mk-vs-key .mk-vs-m { float: none; margin: 0; }
  .mk-vs-key .ic-svg { color: var(--rise); }
  /* The key follows the rows. It is the stacked table's only column header, so it pins
     flush under the site header (a 74px bar and its 1px hairline, so 75px and not more:
     any gap shows the rows through above the key) while the rows scroll under
     it, and lets go when the table ends: sticky is scoped to .mk-vs, and nothing between
     it and the page sets overflow or a transform. The ground is the page's own, bled to
     the gutter so rows do not show through at its edges. */
  .mk-vs-key { position: sticky; top: 75px; z-index: 2; background: var(--surface);
    margin: 0 calc(-1 * var(--mk-gutter)); padding: .55rem var(--mk-gutter) .7rem; }
  .mk-vs-key .hm2-vk-sc { color: var(--ink); }
}

/* ── FAQ ───────────────────────────────────────────────────────────────────── */
/* ── home: three features worked, six listed ─────────────────────────────────
   Nine tabs made a stranger choose between nine names before reading one of them,
   and then showed eight of the nine to nobody. These three rows are the questions
   people arrive with, each answered and then shown; the six under them are a list,
   because a list is what breadth should look like. No script is involved, so the
   reader and the crawler see the same section. */
/* ── home: the features, as vertical tabs ────────────────────────────────────
   Nine features, one rail, every pane in the markup at rest. The block was tabs
   once and was taken off them because the old ones hid eight of the nine from a
   reader who never clicked, asked that reader to choose between nine nouns, and
   jumped in height on every switch. The shape is back; those three are not:

     - every pane is in the HTML, so a crawler and a reader with no JavaScript get
       all nine, and the rail is nine headings of the section's own outline;
     - each tab carries the customer's QUESTION under the feature name, so the
       choice is between problems somebody recognises;
     - the panes are stacked in ONE grid cell and the picture well has a fixed
       aspect, so the section is the same height whichever tab is open.

   NO SCRIPT: a radio group drives it, which is also the correct keyboard model
   for a tab strip (arrow keys move between radios).

   THE PRICE OF THIS SHAPE, stated: the rail takes about 280px, so at 1440 a 976px
   capture lands in an ~800px pane, which is 0.82 of native. A manifest width is the
   CSS width at which a shot is 1:1 and the cabinet's own 15px type is 15px, and 0.8
   is the floor under which a screenshot stops being evidence. This sits just above
   it. A full-width band would be ~1034px; the rail is what it costs.            */
/* ── the section reads as the centrepiece ────────────────────────────────────
   This is the block the whole page is arguing towards, and it was the flattest thing
   on it: the same pale wash as three other tinted sections, with nothing to say "look
   here". Two changes, both restrained on purpose, because the evidence in the panes
   is what has to be looked at and a loud ground competes with it:

     - the heading's first two words carry the brand gradient, the way the hero's own
       h1 does, and the heading is a size larger than its neighbours;
     - three soft colour fields drift behind the section on a slow loop.

   The drift animates TRANSFORM on one pseudo-element, which the compositor handles
   without repainting, rather than background-position on a full-width gradient, which
   repaints the whole band every frame. It is switched off entirely for anyone who has
   asked their system for reduced motion: a background that moves is decoration, and
   decoration is the first thing that should go. */
/* `clip`, not `hidden`. Both keep the drifting colour fields inside the section, but
   `hidden` makes the element a scroll container, and a scroll container is exactly what
   stops `position: sticky` working in anything inside it: the pane beside the rail simply
   scrolled away. `clip` clips without creating one. The fields are also inset to 0 and
   scaled gently, so a browser too old for `clip` bleeds a few per cent rather than a
   third of the section. */
#features { position: relative; isolation: isolate; overflow: clip; }
#features::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 42% at 16% 20%, rgba(221,115,130,.22), transparent 62%),
    radial-gradient(34% 40% at 84% 28%, rgba(149,93,140,.18), transparent 62%),
    radial-gradient(42% 46% at 58% 92%, rgba(182,118,150,.16), transparent 62%);
  animation: fxt-drift 38s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes fxt-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1.04); }
  50%  { transform: translate3d(2.2%, -1.8%, 0) scale(1.12); }
  100% { transform: translate3d(-1.8%, 2.2%, 0) scale(1.07); }
}
@media (prefers-reduced-motion: reduce) { #features::before { animation: none; } }

/* A size larger than the other section headings, and the gradient half set on its own
   line where the column allows it, so the number lands before the qualifier does. */
.fxt-h { font-size: clamp(1.75rem, 4vw, 2.7rem); max-width: 20ch; text-wrap: balance; }
.fxt-h .grad-txt { display: inline-block; }

.fxt {
  display: grid; grid-template-columns: minmax(0, 262px) minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem); align-items: start;
  margin-top: clamp(1.7rem, 3vw, 2.5rem);
}
/* Off screen, not display:none: a radio that is not rendered is not focusable, and
   the rail's keyboard behaviour is the whole reason this is a radio group. */
.fxt-in { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }

/* Not sticky any more: the pane beside it is, and two sticky columns in one grid pin
   against each other and neither moves. */
.fxt-rail { display: grid; gap: .25rem; }
.fxt-tab, .fxt-more {
  display: flex; gap: .65rem; align-items: flex-start; padding: .7rem .8rem;
  border: 1px solid transparent; border-radius: 13px; cursor: pointer; min-width: 0;
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
.fxt-tab:hover, .fxt-more:hover { background: rgba(255,255,255,.62); border-color: var(--tint-line); }
.fxt-tab .ic, .fxt-more .ic {
  flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: var(--surface); color: var(--plum); border: 1px solid var(--tint-line);
  transition: background var(--t), color var(--t), border-color var(--t);
}
.fxt-tab .tx, .fxt-more .tx { min-width: 0; }
.fxt-tab b, .fxt-more b { display: block; font-size: .93rem; font-weight: 620; color: var(--ink); line-height: 1.3; }
/* The question, not a truncated paragraph: two lines is the whole of every `q` in
   the dictionary at this width, and a clamped third line would be a sentence the
   reader is invited to choose on and then not allowed to finish. */
.fxt-tab i, .fxt-more i {
  display: block; font-style: normal; margin-top: .12rem; color: var(--mk-ink-soft);
  font-size: .82rem; line-height: 1.4; overflow-wrap: anywhere;
}
/* THE DOOR. Dashed, because a dashed edge is the one border on this site that reads as
   "there is more behind this" rather than as a card. It is never lit: it does not own a
   pane, so a selected state would be a lie about where the reader is. */
.fxt-more {
  align-items: center; text-decoration: none; color: inherit; margin-top: .4rem;
  border-style: dashed; border-color: var(--tint-line);
}
.fxt-more:hover { border-style: solid; }
.fxt-more .go { margin-left: auto; flex: none; color: var(--plum); display: grid; place-items: center; transition: transform var(--t); }
.fxt-more:hover .go { transform: translateX(3px); }
.fxt-more:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .fxt-more:hover .go { transform: none; } }

/* The pressed tab is drawn INTO the panel: white ground, and the pink border that
   the rest of this site uses for "this one". */
/* GENERATED TO SIXTEEN, not to the number of features there happen to be today.
   A sibling combinator cannot count, so each of these four blocks is a written-out list of
   nth-of-type pairs, and a hand-written list stops at whatever the count was on the day it
   was written: at nine, adding a tenth feature left its tab unlit and its pane invisible
   with nothing failing anywhere. Sixteen is the ceiling this section is designed for; past
   it the rail is a menu, not a rail. */
.fxt-in:nth-of-type(1):checked ~ .fxt-rail .fxt-tab:nth-of-type(1),
.fxt-in:nth-of-type(2):checked ~ .fxt-rail .fxt-tab:nth-of-type(2),
.fxt-in:nth-of-type(3):checked ~ .fxt-rail .fxt-tab:nth-of-type(3),
.fxt-in:nth-of-type(4):checked ~ .fxt-rail .fxt-tab:nth-of-type(4),
.fxt-in:nth-of-type(5):checked ~ .fxt-rail .fxt-tab:nth-of-type(5),
.fxt-in:nth-of-type(6):checked ~ .fxt-rail .fxt-tab:nth-of-type(6),
.fxt-in:nth-of-type(7):checked ~ .fxt-rail .fxt-tab:nth-of-type(7),
.fxt-in:nth-of-type(8):checked ~ .fxt-rail .fxt-tab:nth-of-type(8),
.fxt-in:nth-of-type(9):checked ~ .fxt-rail .fxt-tab:nth-of-type(9),
.fxt-in:nth-of-type(10):checked ~ .fxt-rail .fxt-tab:nth-of-type(10),
.fxt-in:nth-of-type(11):checked ~ .fxt-rail .fxt-tab:nth-of-type(11),
.fxt-in:nth-of-type(12):checked ~ .fxt-rail .fxt-tab:nth-of-type(12),
.fxt-in:nth-of-type(13):checked ~ .fxt-rail .fxt-tab:nth-of-type(13),
.fxt-in:nth-of-type(14):checked ~ .fxt-rail .fxt-tab:nth-of-type(14),
.fxt-in:nth-of-type(15):checked ~ .fxt-rail .fxt-tab:nth-of-type(15),
.fxt-in:nth-of-type(16):checked ~ .fxt-rail .fxt-tab:nth-of-type(16) {
  background: var(--surface); border-color: var(--tint-border);
  box-shadow: 0 1px 2px rgba(42,34,48,.05), 0 10px 26px -18px rgba(42,34,48,.22);
}
.fxt-in:nth-of-type(1):checked ~ .fxt-rail .fxt-tab:nth-of-type(1) .ic,
.fxt-in:nth-of-type(2):checked ~ .fxt-rail .fxt-tab:nth-of-type(2) .ic,
.fxt-in:nth-of-type(3):checked ~ .fxt-rail .fxt-tab:nth-of-type(3) .ic,
.fxt-in:nth-of-type(4):checked ~ .fxt-rail .fxt-tab:nth-of-type(4) .ic,
.fxt-in:nth-of-type(5):checked ~ .fxt-rail .fxt-tab:nth-of-type(5) .ic,
.fxt-in:nth-of-type(6):checked ~ .fxt-rail .fxt-tab:nth-of-type(6) .ic,
.fxt-in:nth-of-type(7):checked ~ .fxt-rail .fxt-tab:nth-of-type(7) .ic,
.fxt-in:nth-of-type(8):checked ~ .fxt-rail .fxt-tab:nth-of-type(8) .ic,
.fxt-in:nth-of-type(9):checked ~ .fxt-rail .fxt-tab:nth-of-type(9) .ic,
.fxt-in:nth-of-type(10):checked ~ .fxt-rail .fxt-tab:nth-of-type(10) .ic,
.fxt-in:nth-of-type(11):checked ~ .fxt-rail .fxt-tab:nth-of-type(11) .ic,
.fxt-in:nth-of-type(12):checked ~ .fxt-rail .fxt-tab:nth-of-type(12) .ic,
.fxt-in:nth-of-type(13):checked ~ .fxt-rail .fxt-tab:nth-of-type(13) .ic,
.fxt-in:nth-of-type(14):checked ~ .fxt-rail .fxt-tab:nth-of-type(14) .ic,
.fxt-in:nth-of-type(15):checked ~ .fxt-rail .fxt-tab:nth-of-type(15) .ic,
.fxt-in:nth-of-type(16):checked ~ .fxt-rail .fxt-tab:nth-of-type(16) .ic {
  background: var(--grad); color: #fff; border-color: transparent;
}
/* Keyboard focus has to be visible on the LABEL, because the input it drives is off
   screen. Without this the rail is operable and invisible to anyone using it. */
.fxt-in:focus-visible + .fxt-in ~ .fxt-rail .fxt-tab,
.fxt-in:focus-visible ~ .fxt-rail .fxt-tab { outline: none; }
.fxt-in:nth-of-type(1):focus-visible ~ .fxt-rail .fxt-tab:nth-of-type(1),
.fxt-in:nth-of-type(2):focus-visible ~ .fxt-rail .fxt-tab:nth-of-type(2),
.fxt-in:nth-of-type(3):focus-visible ~ .fxt-rail .fxt-tab:nth-of-type(3),
.fxt-in:nth-of-type(4):focus-visible ~ .fxt-rail .fxt-tab:nth-of-type(4),
.fxt-in:nth-of-type(5):focus-visible ~ .fxt-rail .fxt-tab:nth-of-type(5),
.fxt-in:nth-of-type(6):focus-visible ~ .fxt-rail .fxt-tab:nth-of-type(6),
.fxt-in:nth-of-type(7):focus-visible ~ .fxt-rail .fxt-tab:nth-of-type(7),
.fxt-in:nth-of-type(8):focus-visible ~ .fxt-rail .fxt-tab:nth-of-type(8),
.fxt-in:nth-of-type(9):focus-visible ~ .fxt-rail .fxt-tab:nth-of-type(9),
.fxt-in:nth-of-type(10):focus-visible ~ .fxt-rail .fxt-tab:nth-of-type(10),
.fxt-in:nth-of-type(11):focus-visible ~ .fxt-rail .fxt-tab:nth-of-type(11),
.fxt-in:nth-of-type(12):focus-visible ~ .fxt-rail .fxt-tab:nth-of-type(12),
.fxt-in:nth-of-type(13):focus-visible ~ .fxt-rail .fxt-tab:nth-of-type(13),
.fxt-in:nth-of-type(14):focus-visible ~ .fxt-rail .fxt-tab:nth-of-type(14),
.fxt-in:nth-of-type(15):focus-visible ~ .fxt-rail .fxt-tab:nth-of-type(15),
.fxt-in:nth-of-type(16):focus-visible ~ .fxt-rail .fxt-tab:nth-of-type(16) {
  outline: 2px solid var(--plum); outline-offset: 2px;
}

/* ── the panes ───────────────────────────────────────────────────────────────
   All nine in ONE grid cell. That, and not a min-height guess, is what stops the
   section changing height when a tab is pressed: the cell is as tall as the tallest
   pane and every pane is drawn into the same box. */
/* THE PANE IS ITS OWN HEIGHT, and it follows you down the rail.
   It used to stretch to the rail's height, which was right at nine tabs and wrong at
   thirteen: the rail grew to 1,174px, the picture well took all the slack, and a 748px
   screenshot ended up floating in 230px of empty ground top and bottom. The rail is a
   list and lists grow; a picture well is a frame and frames should not.
   So each pane sizes to its own content, the grid cell is as tall as the tallest of them
   (which is what keeps the section from changing height when a tab is pressed), and the
   column is sticky, so the answer stays on screen while the eye runs down thirteen
   questions. */
.fxt-panes { display: grid; min-width: 0; align-items: start; position: sticky; top: 84px; }
.fxt-pane {
  --fxt-pad: clamp(1.1rem, 2.2vw, 1.5rem);
  grid-area: 1 / 1; min-width: 0; min-height: 0;
  background: var(--surface); border: 1px solid var(--mk-line); border-radius: 15px;
  padding: var(--fxt-pad);
  box-shadow: 0 1px 2px rgba(42,34,48,.04), 0 10px 28px -14px rgba(42,34,48,.10);
  display: flex; flex-direction: column;
  /* visibility, not display: the inactive panes keep their box so the cell keeps its
     height, and visibility:hidden is out of the accessibility tree and out of tab
     order, so a screen reader and the keyboard both see one pane at a time. */
  visibility: hidden; opacity: 0;
  transition: opacity var(--t);
}
.fxt-in:nth-of-type(1):checked ~ .fxt-panes .fxt-pane:nth-of-type(1),
.fxt-in:nth-of-type(2):checked ~ .fxt-panes .fxt-pane:nth-of-type(2),
.fxt-in:nth-of-type(3):checked ~ .fxt-panes .fxt-pane:nth-of-type(3),
.fxt-in:nth-of-type(4):checked ~ .fxt-panes .fxt-pane:nth-of-type(4),
.fxt-in:nth-of-type(5):checked ~ .fxt-panes .fxt-pane:nth-of-type(5),
.fxt-in:nth-of-type(6):checked ~ .fxt-panes .fxt-pane:nth-of-type(6),
.fxt-in:nth-of-type(7):checked ~ .fxt-panes .fxt-pane:nth-of-type(7),
.fxt-in:nth-of-type(8):checked ~ .fxt-panes .fxt-pane:nth-of-type(8),
.fxt-in:nth-of-type(9):checked ~ .fxt-panes .fxt-pane:nth-of-type(9),
.fxt-in:nth-of-type(10):checked ~ .fxt-panes .fxt-pane:nth-of-type(10),
.fxt-in:nth-of-type(11):checked ~ .fxt-panes .fxt-pane:nth-of-type(11),
.fxt-in:nth-of-type(12):checked ~ .fxt-panes .fxt-pane:nth-of-type(12),
.fxt-in:nth-of-type(13):checked ~ .fxt-panes .fxt-pane:nth-of-type(13),
.fxt-in:nth-of-type(14):checked ~ .fxt-panes .fxt-pane:nth-of-type(14),
.fxt-in:nth-of-type(15):checked ~ .fxt-panes .fxt-pane:nth-of-type(15),
.fxt-in:nth-of-type(16):checked ~ .fxt-panes .fxt-pane:nth-of-type(16) {
  visibility: visible; opacity: 1;
}
.fxt-nm { font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--mauve); margin-bottom: .45rem; }
.fxt-q { margin: 0 0 .4rem; font-family: var(--font-display); font-weight: 650;
  font-size: clamp(1.16rem, 1.9vw, 1.42rem); line-height: 1.24; letter-spacing: -.014em;
  color: var(--ink); text-wrap: balance; }
.fxt-line { margin: 0; color: var(--mk-ink-soft); font-size: .97rem; line-height: 1.6;
  max-width: 66ch; text-wrap: pretty; }

/* The well is a fixed shape so every pane is the same height. A picture shorter than
   the well keeps its own height and sits centred on the ground rather than being
   stretched: a 796x167 strip blown up to fill a 420px box would be blurrier than the
   sentence it is evidence for. */
/* FULL BLEED INSIDE THE PANE, and the width is the whole argument: the rail already
   takes 262px off the 1108px well, and paying another 48px to the pane's own padding
   would drop a 976px capture to 0.77 of native. Breaking the picture out to the pane's
   edges buys that back and lands it at about 0.84, just clear of the 0.80 floor under
   which a screenshot stops being evidence. */
.fxt-well {
  flex: 0 0 auto; min-width: 0;
  margin: .95rem calc(-1 * var(--fxt-pad)) 0;
  display: grid; gap: .5rem; align-content: center; justify-items: center; overflow: hidden;
  background: var(--surface-2); border-top: 1px solid var(--mk-line);
  border-bottom: 1px solid var(--mk-line);
  padding: clamp(.5rem, 1.1vw, .75rem);
}
.fxt-s { width: 100%; max-width: var(--fxt-sw, none); min-width: 0; }
.fxt-well .mk-shot { margin: 0; }
.fxt-well .mk-shot img { width: 100%; height: auto; border-radius: 9px;
  border: 1px solid var(--mk-line); background: #fff;
  box-shadow: 0 1px 3px rgba(42,34,48,.10), 0 10px 26px -16px rgba(42,34,48,.26); }
/* A CROP IS A RATIO, NOT A HEIGHT, so the same fraction of the same picture shows at
   every viewport instead of a different one at each breakpoint. */
.fxt-s.is-crop { aspect-ratio: var(--fx-ar); overflow: hidden; border-radius: 9px; }
.fxt-s.is-crop .mk-shot, .fxt-s.is-crop .mk-shot img { height: 100%; }
.fxt-s.is-crop .mk-shot img { object-fit: cover; object-position: top center; }

.fxt-foot { margin-top: auto; padding-top: .9rem; display: flex; flex-wrap: wrap; gap: .5rem 1.1rem;
  align-items: baseline; justify-content: space-between; }
.fxt-foot .more { margin-top: 0; }
.fxt-where { font-size: .8rem; color: var(--mute); }

/* The section closes on the action rather than trailing off. */
.fxt-cta {
  margin-top: clamp(1.1rem, 2vw, 1.5rem); border-radius: 15px;
  padding: clamp(1.1rem, 2.4vw, 1.5rem) clamp(1.2rem, 2.6vw, 1.7rem);
  background: var(--grad); color: #fff;
  display: flex; flex-wrap: wrap; gap: .9rem 1.4rem; align-items: center; justify-content: space-between;
}
.fxt-cta p { margin: 0; color: rgba(255,255,255,.93); font-size: .96rem; line-height: 1.55; max-width: 62ch; }
.fxt-cta .btn-grad { background: #fff; color: var(--plum); box-shadow: none; flex: none; }
.fxt-cta .btn-grad:hover { background: #fff; color: var(--ink); transform: translateY(-1px); }

/* ── narrower, and then the phone ────────────────────────────────────────────
   A 290px rail beside a pane stops being two columns somewhere under 900px: the
   pane falls under the legibility floor before the rail runs out of room. The rail
   becomes a horizontal strip of the same tabs, which is the same control lying
   down, and the pane keeps the full width. */
@media (max-width: 900px) {
  .fxt { grid-template-columns: minmax(0, 1fr); }
  /* One column, so the pane no longer sits beside a tall rail and has nothing to follow:
     sticky would only pin it to the top of its own cell. The cell is still as tall as the
     tallest pane, which is what keeps the section from jumping when a tab is pressed, and
     here the CARD fills it rather than leaving tint underneath: at this width the card is
     the full column, so empty space below it reads as a gap in the page, while the same
     space inside it reads as the footer sitting at the bottom of a card. */
  .fxt-panes { position: static; }
  .fxt-pane { height: 100%; }
  /* A cut tab at the right edge is the affordance, and the mask makes the cut look
     deliberate rather than broken. Snap points stop a flick leaving a tab half on
     screen as the resting state. */
  .fxt-rail { position: static; grid-auto-flow: column; grid-auto-columns: minmax(min(292px, 84%), 1fr);
    overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: .35rem; gap: .45rem;
    scroll-snap-type: x proximity;
    mask-image: linear-gradient(to right, #000 calc(100% - 38px), transparent); }
  .fxt-tab, .fxt-more { scroll-snap-align: start; }
  .fxt-tab { background: rgba(255,255,255,.62); border-color: var(--tint-line); }
  /* The question stays on the lying-down tabs too: it is what the reader chooses on, and
     without it the strip was four product nouns. The track is wide enough (292px, or 84%
     of a narrower rail so the next tab still shows) for the longest question in either
     language to finish inside two lines; the clamp is only the ceiling. */
  .fxt-tab i, .fxt-more i { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; font-size: .78rem; line-height: 1.35; }
  .fxt-tab b, .fxt-more b { font-size: .88rem; }
  /* The rail runs sideways here, so the door sits at its end rather than under it. */
  .fxt-more { margin-top: 0; }
}
/* On a phone nothing in the manifest is legible in a 353px column, so the picture
   stops pretending to be readable and becomes what it is: a framed doorway with the
   site's own tap-to-enlarge on it. The well loses its fixed aspect here because a
   420px box under a 353px picture is mostly empty ground. */
@media (max-width: 560px) {
  /* The well's floor exists to stop a tall rail leaving a short picture marooned; on a
     phone the rail is a strip and there is no slack to fill, so the floor only adds
     empty ground under a picture that is already a doorway. */
  .fxt-well { min-height: 0; padding: .5rem; }
  .fxt-s.is-crop { aspect-ratio: 16 / 9; }
  .fxt-well .mk-shot.is-zoomable .zoom-hint { opacity: 1; }
  .fxt-foot { flex-direction: column; align-items: flex-start; gap: .45rem; }
}

.mk-pain .more { margin-top: auto; padding-top: .7rem; }

@media (max-width: 700px) {
  /* The case against the incumbent was readable only by dragging it sideways behind a
     12.5px hint. Six blocks instead of one 620px table, and the only horizontal scroll
     on the page goes with it. */
  .mk-cmp-wrap { overflow-x: visible; }
  .mk-cmp { min-width: 0; }
  .mk-cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  /* Each row opens on its subject (a larger, heavier label and a 2px rule between rows) so
     a dozen stacked rows can be skimmed by topic, and each column name runs into its value
     on the same line instead of taking a line of its own. */
  .mk-cmp tbody tr { display: block; border-bottom: 2px solid var(--mk-line); }
  .mk-cmp tbody tr:last-child { border-bottom: none; }
  .mk-cmp tbody th { display: block; width: auto; border-bottom: none; padding-top: 1rem; padding-bottom: .3rem;
    font-size: 1rem; font-weight: 700; }
  .mk-cmp tbody td { display: block; border-bottom: none; padding: .2rem 1rem .5rem; }
  .mk-cmp tbody td:last-child { padding-bottom: .85rem; }
  .mk-cmp td.them::before, .mk-cmp td.us::before {
    content: attr(data-label); display: inline; margin-right: .45rem;
    font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
    color: var(--mute); }
  .mk-scrollhint { display: none; }
}

  .mk-hero { padding-top: 2rem; }
  .mk-hero-grid { gap: 1.6rem; }
  .mk-hero .mk-ctas { margin-top: 1.1rem; }
  .mk-hero .mk-trust { margin-top: .9rem; }
  .mk-hero .hero-note { margin-top: .8rem; }

/* The picture is worth looking at properly: click it and it opens at full size. The
   cursor and the corner hint say so before the click, because an image that does
   something on click and looks like an image that does not is a trap. */
/* The bottom edge fades where the picture is cut, so the crop reads as "there is more
   of this" rather than as an image that failed to load. */
.mk-shot img[data-zoom] { cursor: zoom-in; }
.mk-shot.is-zoomable { position: relative; }
.mk-shot .zoom-hint {
  position: absolute; right: .6rem; bottom: .6rem; display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem .55rem; border-radius: 999px; font-size: .76rem; pointer-events: none;
  background: rgba(36,29,42,.78); color: #fff; opacity: 0; transition: opacity var(--t);
}
.mk-shot.is-zoomable:hover .zoom-hint, .mk-shot img[data-zoom]:focus-visible + .zoom-hint { opacity: 1; }
/* A phone has no hover, so a hint that waits for one is never seen. Below 560px every
   enlargeable picture says so at rest. */
@media (max-width: 560px) { .mk-shot.is-zoomable .zoom-hint { opacity: 1; } }
/* A strip on a phone is 17 to 32px tall, shorter than the hint, so a pill laid over it
   covers the picture and rises above it. There the hint is a label under the strip. */
@media (max-width: 560px) {
  .mk-fp-strip .mk-shot.is-zoomable .zoom-hint {
    position: static; margin-top: .45rem; background: var(--tint); color: var(--plum); border: 1px solid var(--tint-border);
  }
}

/* Rows, not a centred stack: the caption needs a line of its own, and absolutely
   positioning it over the picture put it behind a full-height screenshot. */
.mk-lb {
  position: fixed; inset: 0; z-index: 90; display: grid; grid-template-rows: 1fr auto;
  justify-items: center; align-items: center; gap: .9rem;
  padding: clamp(1rem, 4vw, 3rem); background: rgba(26,21,31,.82);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.mk-lb img { max-width: 100%; max-height: 100%; border-radius: 10px; background: #fff; box-shadow: 0 30px 90px -20px rgba(0,0,0,.6); object-fit: contain; }
.mk-lb-close {
  position: absolute; top: 1rem; right: 1rem; width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.mk-lb-close:hover { background: rgba(255,255,255,.26); }
.mk-lb-cap { margin: 0; max-width: 90ch; text-align: center; color: rgba(255,255,255,.82); font-size: .85rem; line-height: 1.5; }

/* ── contact form ─────────────────────────────────────────────────────────────
   One card, two columns at the top and full width below — a name and an address are
   short, a message is not, and giving all three the same width makes the page look like
   a database form rather than a note to a person. */
.ct-card { padding: clamp(1.2rem, 3vw, 1.9rem); }
.ct-lede { margin: .35rem 0 1.3rem; color: var(--mk-ink-soft); font-size: .98rem; line-height: 1.6; }
.ct-form { display: grid; gap: 1rem; }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ct-field { display: grid; gap: .35rem; min-width: 0; }
.ct-field label { font-size: .88rem; font-weight: 560; color: var(--ink); }
.ct-field input, .ct-field select, .ct-field textarea {
  width: 100%; padding: .68rem .8rem; border-radius: 11px; border: 1px solid var(--mk-line);
  background: var(--surface); color: var(--ink); font: inherit; font-size: .97rem;
}
.ct-field textarea { resize: vertical; min-height: 8.5rem; line-height: 1.6; }
.ct-field input:focus-visible, .ct-field select:focus-visible, .ct-field textarea:focus-visible {
  outline: none; border-color: var(--tint-border); box-shadow: 0 0 0 3px var(--tint);
}
.ct-field [aria-invalid="true"] { border-color: var(--fall); }
.ct-err { font-size: .85rem; color: var(--fall); }
.ct-err--top { margin: 0 0 1rem; }
.ct-send { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.ct-priv, .rc-note { font-size: .82rem; color: var(--mute); line-height: 1.5; }
/* reCAPTCHA's badge, hidden the way Google documents it: the branding line under the
   form (mkt.form.recaptcha) is the permitted alternative, and it is the one that belongs
   on a page instead of a floating logo.
   pointer-events is the part that is not cosmetic. The badge ships an invisible 256x60
   iframe pinned to the bottom-right corner, and it EATS CLICKS: the language menu in the
   footer sits under it, and the layout check timed out for 55 retries trying to open
   that menu on /contact. A control nobody can click is a bug whether or not anyone
   has noticed it yet. */
.grecaptcha-badge { visibility: hidden; pointer-events: none; }

.ct-priv a, .rc-note a { color: var(--mute); text-decoration: underline; }
.rc-note { margin: .9rem 0 0; }
/* Off-screen rather than display:none: a field that is not rendered at all is one a bot
   can see is a trap in the markup, and `hidden` inputs are skipped by some form fillers. */
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ct-done { display: flex; gap: 1rem; align-items: flex-start; }
.ct-done .ic { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--tint); color: var(--rise); }
.ct-done p { margin: .3rem 0 0; color: var(--mk-ink-soft); line-height: 1.6; }
.ct-or { margin: 2.6rem 0 1rem; }
@media (max-width: 620px) { .ct-row { grid-template-columns: 1fr; } }
/* Send is the page's one conversion, and on a phone it was its smallest control: a 65px
   button beside grey microcopy that outweighed it. Full width, the /pricing plan-button
   size, with the privacy line underneath rather than competing beside it. */
@media (max-width: 620px) {
  .ct-send { display: grid; gap: .8rem; }
  .ct-send .btn { width: 100%; justify-content: center; padding: .9rem 1.2rem; font-size: 1.02rem; border-radius: 12px; }
}
/* A jump to the form lands with the card's top edge clear of the sticky header. */
.ct-card { scroll-margin-top: 90px; }
/* The dropdown the address cards just changed, ringed for a moment so the reader sees what
   the click did. The ring itself does not move; only its fade is motion. */
.ct-field select.is-picked { border-color: var(--tint-border); box-shadow: 0 0 0 3px var(--tint), 0 0 0 4px var(--tint-border); }
.ct-field select { transition: box-shadow .5s ease, border-color .5s ease; }
@media (prefers-reduced-motion: reduce) { .ct-field select { transition: none; } }

/* The four answers people most often write in for, above the form: a tinted strip rather
   than a card, so it reads as a shortcut and not as a second form. */
.ct-quick {
  margin-top: 2rem; padding: clamp(1rem, 2.4vw, 1.3rem) clamp(1.1rem, 2.6vw, 1.5rem);
  background: var(--tint); border: 1px solid var(--tint-line); border-radius: 15px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .2rem 1rem;
}
.ct-quick h2 { margin: 0 0 .5rem; }
.ct-quick ul {
  grid-column: 1 / -1; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem 1.4rem;
}
.ct-quick ul a {
  display: flex; align-items: center; justify-content: space-between; gap: .7rem; min-height: 44px;
  padding: .45rem 0; border-bottom: 1px solid var(--tint-line);
  color: var(--ink); font-size: .95rem; font-weight: 550; line-height: 1.4; text-decoration: none;
}
.ct-quick ul a svg { flex: none; color: var(--plum); transition: transform var(--t); }
.ct-quick ul a:hover { color: var(--plum); }
.ct-quick ul a:hover svg { transform: translateX(3px); }
.ct-quick ul a:focus-visible, .ct-quick-all:focus-visible { outline: 2px solid var(--mauve); outline-offset: 2px; border-radius: 6px; }
.ct-quick-all {
  grid-column: 2; grid-row: 1; justify-self: end;
  display: inline-flex; align-items: center; gap: .3rem; font-size: .86rem; font-weight: 650; color: var(--plum);
}
@media (prefers-reduced-motion: reduce) { .ct-quick ul a svg { transition: none; } .ct-quick ul a:hover svg { transform: none; } }
@media (max-width: 700px) {
  .ct-quick ul { grid-template-columns: minmax(0, 1fr); }
}

/* The address cards: a mailto for people who prefer their own client, and a way into the
   form with the right topic already picked. Pointer and hover only once the script has run
   (it adds .is-live), because without it the card itself does nothing on click. */
.ct-box .ct-acts {
  margin-top: auto; padding-top: .85rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.2rem;
}
.ct-box .ct-acts .more { margin-top: 0; padding-top: 0; }
.ct-use {
  display: inline-flex; align-items: center; font-size: .86rem; font-weight: 600; color: var(--mk-ink-soft);
  text-decoration: underline; text-decoration-color: var(--tint-border); text-underline-offset: 3px;
}
.ct-use:hover { color: var(--plum); text-decoration-color: var(--mauve); }
.ct-boxes.is-live .ct-box { cursor: pointer; transition: border-color var(--t), box-shadow var(--t); }
.ct-boxes.is-live .ct-box:hover { border-color: var(--tint-border); box-shadow: var(--sh-lg); }
@media (prefers-reduced-motion: reduce) { .ct-boxes.is-live .ct-box { transition: none; } }

/* Where the service runs: one card on the grid's column edges, laid out as a strip. */
/* margin-top is .mk-grid's own gap, so the strip sits one gap under the cards like a row. */
.ct-where { margin-top: clamp(.9rem, 2vw, 1.15rem); flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.1rem; }
.ct-where h2 { margin: 0; }
.ct-where p { flex: 1 1 22rem; }
.ct-where .more { margin: 0 0 0 auto; padding-top: 0; }
@media (max-width: 640px) { .ct-where { flex-direction: column; align-items: flex-start; } .ct-where p { flex: none; } .ct-where .more { margin: .5rem 0 0; } }

/* ── FAQ page: index, search, deep links ──────────────────────────────────────
   Twenty-four answers in one column is a page nobody finishes. The rail holds the
   sections still while you read; the search filters in place rather than navigating,
   so nothing you have open is lost; every answer has an address of its own. The rail
   collapses into the flow below 1000px, where a sticky column would eat the screen. */
.faq-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
/* A grid item's min-width is `auto`, so the horizontally scrolling rail below 1000px
   would push the whole page 197px wide instead of scrolling inside itself. */
.faq-nav { min-width: 0; }
.faq-main { max-width: 820px; min-width: 0; }
.faq-nav-inner { position: sticky; top: 96px; }
.faq-nav-h { font-size: .74rem; font-weight: 640; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin-bottom: .6rem; }
.faq-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.faq-nav ul a {
  display: flex; align-items: center; gap: .5rem; padding: .46rem .6rem; border-radius: 9px;
  font-size: .92rem; color: var(--mk-ink-soft); text-decoration: none; border-left: 2px solid transparent;
}
.faq-nav ul a span { flex: 1; min-width: 0; }
.faq-nav ul a b { font-weight: 560; font-size: .78rem; color: var(--mute); font-variant-numeric: tabular-nums; }
.faq-nav ul a:hover { background: var(--surface-2); color: var(--ink); }
.faq-nav ul a[aria-current="true"] { background: var(--tint); border-left-color: var(--plum); color: var(--plum); font-weight: 560; }
.faq-nav ul a[aria-current="true"] b { color: var(--plum); }
.faq-nav-ask {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: .9rem; padding: .46rem .6rem;
  font-size: .88rem; color: var(--plum); text-decoration: none;
}
.faq-nav-ask:hover { text-decoration: underline; }

.faq-tools { display: flex; gap: .6rem; align-items: center; margin-bottom: .9rem; }
.faq-search { position: relative; flex: 1; display: flex; align-items: center; }
.faq-search svg { position: absolute; left: .7rem; color: var(--mute); pointer-events: none; }
.faq-search input {
  width: 100%; padding: .62rem 2.1rem .62rem 2.35rem; border-radius: 11px;
  border: 1px solid var(--mk-line); background: var(--surface); color: var(--ink);
  font: inherit; font-size: .95rem;
}
.faq-search input::-webkit-search-cancel-button { display: none; }
.faq-search input:focus-visible { outline: none; border-color: var(--tint-border); box-shadow: 0 0 0 3px var(--tint); }
.faq-search button {
  position: absolute; right: .45rem; width: 24px; height: 24px; border: 0; border-radius: 50%;
  background: var(--surface-2); color: var(--mute); font-size: 1rem; line-height: 1; cursor: pointer;
}
.faq-search button:hover { color: var(--ink); }
.faq-toggle {
  flex: none; padding: .62rem .85rem; border-radius: 11px; border: 1px solid var(--mk-line);
  background: var(--surface); color: var(--mk-ink-soft); font: inherit; font-size: .88rem; cursor: pointer; white-space: nowrap;
}
.faq-toggle:hover { border-color: var(--tint-border); color: var(--plum); }
.faq-count { margin: 0 0 .9rem; font-size: .88rem; color: var(--mute); }
.faq-none { margin: 1.2rem 0 0; font-size: .96rem; color: var(--mk-ink-soft); }
.faq-none a { color: var(--plum); }

.faq-sec + .faq-sec { margin-top: 2.4rem; }
/* Clears the sticky header when a section is jumped to from the rail or a #link. */
.faq-sec, .mk-faq details { scroll-margin-top: 90px; }
.faq-sec-h { font-size: clamp(1.18rem, 2.2vw, 1.42rem); margin: 0 0 .9rem; display: flex; align-items: baseline; gap: .5rem; }
.faq-sec-h span { font-size: .78rem; font-weight: 560; color: var(--mute); font-variant-numeric: tabular-nums; }
.mk-faq mark { background: var(--tint); color: inherit; border-radius: 3px; padding: 0 .1em; }
/* The answer that a #link points at, so arriving at it does not mean hunting for it. */
.mk-faq details:target { border-color: var(--plum); box-shadow: 0 0 0 3px var(--tint); }
.faq-link {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .55rem;
  font-size: .82rem; color: var(--mute); text-decoration: none;
}
.faq-link:hover { color: var(--plum); }
.faq-link.is-copied { color: var(--rise); }

@media (max-width: 1000px) {
  .faq-layout { grid-template-columns: 1fr; }
  .faq-nav-inner { position: static; }
  .faq-nav-inner { min-width: 0; }
  /* Wrapped, not scrolled. The chip row used to scroll sideways with its scrollbar hidden,
     so at 390 the second chip was cut mid-word and the third was off screen: an index that
     read as a broken label. A handful of sections fits on two rows, all visible. */
  .faq-nav ul { display: flex; flex-wrap: wrap; gap: .35rem; }
  .faq-nav ul a { border-left: 0; border: 1px solid var(--mk-line); border-radius: 999px; padding: .38rem .75rem; }
  .faq-nav ul a[aria-current="true"] { border-color: var(--tint-border); }
  .faq-nav-ask { display: none; }
}
@media (max-width: 560px) {
  .faq-tools { flex-wrap: wrap; }
  .faq-toggle { width: 100%; }
}

.mk-faq { display: grid; gap: .6rem; max-width: 860px; }
.mk-faq details {
  border: 1px solid var(--mk-line); border-radius: 13px; background: var(--surface);
  transition: border-color var(--t), box-shadow var(--t);
}
.mk-faq details[open] { border-color: var(--tint-border); box-shadow: var(--sh-sm); }
.mk-faq summary {
  list-style: none; cursor: pointer; padding: 1rem 3rem 1rem 1.15rem; position: relative;
  font-weight: 620; font-size: 1rem; line-height: 1.45; color: var(--ink);
  border-radius: 13px;
}
.mk-faq summary::-webkit-details-marker { display: none; }
.mk-faq summary::marker { content: ''; }
.mk-faq summary:hover { color: var(--plum); }
.mk-faq summary::after {
  content: ''; position: absolute; right: 1.15rem; top: 1.35rem; width: 11px; height: 11px;
  border-right: 2px solid var(--mauve); border-bottom: 2px solid var(--mauve);
  transform: rotate(45deg); transition: transform var(--t);
}
.mk-faq details[open] summary::after { transform: rotate(-135deg); }
.mk-faq .a { padding: 0 1.15rem 1.15rem; color: var(--mk-ink-soft); line-height: 1.65; max-width: 72ch; }
.mk-faq .a p { margin: 0 0 .7rem; }
.mk-faq .a p:last-child { margin-bottom: 0; }

/* ── pricing ───────────────────────────────────────────────────────────────── */
/* The calculator is the Paid card now, so it inherits the card's own frame rather than
   drawing a second one inside it. overflow stays VISIBLE: hidden clipped the "most
   people" badge that sits half outside the top edge. */
.mk-calc { position: relative; overflow: visible; }

/* The interactive block: one inset panel so the slider, the billing toggle and the
   sentence under them read as a single control rather than three loose rows. */
.mk-calcbox {
  background: linear-gradient(180deg, #FDF8FA, #FAF3F6); border: 1px solid var(--tint-line); border-radius: 16px;
  padding: 1.05rem 1.15rem .95rem; margin: 0 0 1.3rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.mk-calc-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-bottom: .35rem; }
.mk-calcbox .mk-billed { margin-top: .55rem; min-height: 0; font-size: .85rem; }
.mk-calcbox .mk-range { margin: .45rem 0 .15rem; }
.mk-calcbox .mk-toggle { background: var(--surface); border-color: var(--tint-border); }

.mk-calc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.mk-toggle { display: inline-flex; background: var(--surface-2); border: 1px solid var(--mk-line); border-radius: 999px; padding: 3px; flex: none; }
.mk-toggle label {
  position: relative;  /* keeps the visually-hidden radio inside its own label */
  padding: .4rem .85rem; border-radius: 999px; font-size: .85rem; font-weight: 620; color: var(--mute);
  cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; transition: background var(--t), color var(--t);
}
/* The radio is hidden but present and focusable: the label is the control a mouse
   uses, the radio is the one a keyboard and a screen reader use. Clipped rather than
   display:none, which would take it out of the tab order entirely. */
.mk-toggle input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.mk-toggle label:has(input:checked) { background: var(--plum); color: #fff; box-shadow: 0 2px 8px rgba(106,74,110,.35); }
.mk-toggle label:has(input:checked) .save { background: rgba(255,255,255,.22); color: #fff; }
.mk-toggle label:has(input:focus-visible) { outline: 2px solid var(--mauve); outline-offset: 2px; }
.mk-toggle .save { font-size: .7rem; font-weight: 700; color: var(--rise); background: var(--rise-soft); border-radius: 999px; padding: .05rem .38rem; }

.mk-calc-out { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1.5rem; align-items: end; margin: 1.4rem 0 .4rem; }
@media (max-width: 620px) { .mk-calc-out { grid-template-columns: 1fr; align-items: start; gap: .9rem; } }
.mk-amt { font-family: var(--font-display); font-size: clamp(2.4rem, 7vw, 3.6rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.mk-per { font-size: .92rem; color: var(--mute); margin-left: .3rem; font-family: var(--font-body); font-weight: 500; letter-spacing: 0; }
.mk-billed { font-size: .9rem; color: var(--mk-ink-soft); margin-top: .5rem; min-height: 1.4em; }
.mk-calcnote { font-size: .85rem; color: var(--plum); background: var(--tint); border: 1px solid var(--tint-line); border-radius: 10px; padding: .55rem .75rem; margin-top: .9rem; }
.mk-calcnote:empty { display: none; }

/* A slider drawn to match the page: gradient fill up to the thumb (marketing.js keeps
   --pct current; with JS off it stays at the default stop, which is the first one), a
   white thumb with a halo on hover and focus. The browser's default control was the
   one grey thing on the card. */
.mk-range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: .5rem 0 .1rem; background: transparent; cursor: pointer; --pct: 0%; }
.mk-range:focus-visible { outline: none; }
.mk-range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, #DD7382, #955D8C var(--pct), var(--border) var(--pct)); }
.mk-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%;
  background: #fff; border: 2px solid var(--mauve); box-shadow: 0 2px 8px rgba(149,93,140,.35);
  transition: transform var(--t), box-shadow var(--t);
}
.mk-range:hover::-webkit-slider-thumb, .mk-range:focus-visible::-webkit-slider-thumb { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(149,93,140,.14), 0 2px 8px rgba(149,93,140,.35); }
.mk-range::-moz-range-track { height: 6px; border-radius: 999px; background: var(--border); }
.mk-range::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--grad); }
.mk-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--mauve); box-shadow: 0 2px 8px rgba(149,93,140,.35); }
.mk-range:hover::-moz-range-thumb, .mk-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 6px rgba(149,93,140,.14), 0 2px 8px rgba(149,93,140,.35); }
.mk-range-scale { display: flex; justify-content: space-between; font-size: .74rem; color: var(--mute); font-variant-numeric: tabular-nums; }
.mk-sitecount { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -.015em; }

/* ── the archive timeline (views/partials/mk_timeline.eta) ──────────────────────
   One drawing on four pages: /pricing (a card slot), /compare/bigquery-export (a wide
   column), the 16-month guide (an article column) and the search-history hero. So it
   sizes by its OWN width, not the viewport's: the figure is a size container and the
   axis labels thin out by container queries. The bars are positioned HTML, which keeps
   every label at .75rem or larger on a phone instead of shrinking with a scaled SVG. */
.mk-tl {
  container: mktl / inline-size; width: 100%; min-width: 0; box-sizing: border-box;
  margin: 0; background: var(--surface); border: 1px solid var(--mk-line); border-radius: 16px;
  padding: 1.15rem 1.25rem 1.05rem; box-shadow: var(--sh); color: var(--ink); text-align: left;
}
.mk-tl-cap { display: block; margin: 0 0 .75rem; }
.mk-tl-h { display: block; font-family: var(--font-display); font-size: 1.06rem; font-weight: 680; letter-spacing: -.012em; line-height: 1.3; color: var(--ink); }
.mk-tl-p { display: block; margin-top: .25rem; font-size: .88rem; line-height: 1.5; color: var(--mk-ink-soft); }

.mk-tl-keys { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .95rem; font-size: .78rem; line-height: 1.35; color: var(--mk-ink-soft); }
.mk-tl-keys li { display: inline-flex; align-items: center; gap: .4rem; }
.mk-tl-sw { flex: none; width: 15px; height: 10px; border-radius: 3px; }

/* one colour per meaning, shared by the bar and its swatch in the key */
.mk-tl-seg--gsc,   .mk-tl-sw--gsc   { background: #A9A0AD; }
.mk-tl-seg--gone,  .mk-tl-sw--gone  { background: repeating-linear-gradient(135deg, rgba(110,100,115,.34) 0 2px, transparent 2px 6px); }
.mk-tl-sw--gone { box-shadow: inset 0 0 0 1px rgba(110,100,115,.3); }
.mk-tl-seg--bq,    .mk-tl-sw--bq    { background: #6D8196; }
.mk-tl-seg--copy,  .mk-tl-sw--copy  { background: #C9A3C2; }
.mk-tl-seg--sync,  .mk-tl-sw--sync  { background: var(--plum); }
.mk-tl-seg--room,  .mk-tl-sw--room  { background: var(--tint); border: 1.5px dashed #D2A9C1; box-sizing: border-box; }
.mk-tl-seg--focus, .mk-tl-sw--focus { background: rgba(221,115,130,.2); box-shadow: inset 0 0 0 2px #C4506A; }
.mk-tl-sw--conn { width: 3px; height: 13px; border-radius: 2px; background: var(--mauve); margin: 0 6px; }

.mk-tl-plot { position: relative; }
.mk-tl-pins { position: relative; height: 1.2rem; margin-bottom: .15rem; }
.mk-tl-pin {
  position: absolute; bottom: 0; transform: translateX(-50%); white-space: nowrap;
  font-size: .75rem; font-weight: 680; color: var(--ink); line-height: 1.2; transition: left var(--t);
}
.mk-tl-pin--focus { color: #A83F55; }
.mk-tl-pin.is-start { transform: none; }
.mk-tl-pin.is-end { transform: translateX(-100%); }

.mk-tl-lanes { position: relative; display: grid; gap: .55rem; }
/* The label sits on the panel colour and above the marker lines, so a line crossing
   the lane never runs through its words. */
.mk-tl-lab {
  position: relative; z-index: 2; display: block; width: max-content; max-width: 100%;
  margin-bottom: .2rem; padding-right: .4rem; background: var(--surface);
  font-size: .78rem; font-weight: 620; line-height: 1.3; color: var(--mk-ink-soft);
}
.mk-tl-track { position: relative; height: 18px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.mk-tl-seg { position: absolute; top: 0; bottom: 0; transition: left var(--t), width var(--t); }
.mk-tl-seg--room { border-radius: 5px; }
.mk-tl-seg--focus { z-index: 1; }

.mk-tl-line { position: absolute; top: 0; bottom: 0; z-index: 1; width: 0; pointer-events: none; transition: left var(--t); }
.mk-tl-line--now { border-left: 1.5px dashed var(--ink); margin-left: -.75px; }
.mk-tl-line--conn { border-left: 2px solid var(--mauve); margin-left: -1px; }
.mk-tl-line--conn::after { content: ''; position: absolute; left: -5px; bottom: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--mauve); box-shadow: 0 0 0 2px var(--surface); }

.mk-tl-axis { position: relative; height: 1.45rem; margin-top: .35rem; border-top: 1px solid var(--mk-line); }
.mk-tl-t { position: absolute; top: 0; height: 4px; border-left: 1px solid #D6CFD3; }
.mk-tl-t--y { height: 7px; border-left-color: var(--mute); }
.mk-tl-t b {
  position: absolute; top: 7px; left: 0; transform: translateX(-50%); display: none; white-space: nowrap;
  font-size: .75rem; font-weight: 500; line-height: 1.2; color: var(--mute); font-variant-numeric: tabular-nums;
}
.mk-tl-t--y b { display: block; font-weight: 650; color: var(--mk-ink-soft); }
.mk-tl-t.is-start b { transform: none; }
.mk-tl-t.is-end b { transform: translateX(-100%); }
/* the half-year and quarter labels appear once the drawing is wide enough to hold them
   (the partial works the width out from the axis span; see bucket() there) */
.mk-tl[data-tl-h="all"] .mk-tl-t--h b, .mk-tl[data-tl-q="all"] .mk-tl-t--q b { display: block; }
@container mktl (min-width: 400px) { .mk-tl[data-tl-h="400"] .mk-tl-t--h b, .mk-tl[data-tl-q="400"] .mk-tl-t--q b { display: block; } }
@container mktl (min-width: 560px) { .mk-tl[data-tl-h="560"] .mk-tl-t--h b, .mk-tl[data-tl-q="560"] .mk-tl-t--q b { display: block; } }
@container mktl (min-width: 760px) { .mk-tl[data-tl-h="760"] .mk-tl-t--h b, .mk-tl[data-tl-q="760"] .mk-tl-t--q b { display: block; } }

.mk-tl-ctl { margin-top: .85rem; }
.mk-tl-ctlh { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .15rem .8rem; font-size: .84rem; }
.mk-tl-ctlh label { font-weight: 620; color: var(--mk-ink-soft); }
.mk-tl-val { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.mk-tl .mk-tl-range { margin: .3rem 0 .1rem; }
.mk-tl .mk-tl-range:disabled { cursor: default; }   /* until the script takes the handle */
.mk-tl .mk-range-scale { font-size: .75rem; }

.mk-tl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .5rem; margin: .85rem 0 0; }
.mk-tl-stat { margin: 0; padding: .5rem .7rem .55rem; border-radius: 10px; background: var(--tint); border: 1px solid var(--tint-line); }
.mk-tl-stat--gsc, .mk-tl-stat--bq { background: var(--surface-2); border-color: var(--mk-line); }
.mk-tl-stat dt { font-size: .75rem; line-height: 1.3; color: var(--mute); }
.mk-tl-stat dd { margin: .12rem 0 0; font-family: var(--font-display); font-size: 1.06rem; font-weight: 700; letter-spacing: -.01em; color: var(--plum); font-variant-numeric: tabular-nums; }
.mk-tl-stat--gsc dd { color: var(--ink); }
.mk-tl-stat--bq dd { color: #4E6176; }
.mk-tl-read { margin: .7rem 0 0; font-size: .9rem; line-height: 1.55; color: var(--mk-ink-soft); }
.mk-tl-note { margin: .55rem 0 0; font-size: .75rem; line-height: 1.45; color: var(--mute); }

/* 390: the panel hands its padding to the drawing; the keys and the stats already wrap */
@media (max-width: 520px) {
  .mk-tl { padding: 1rem .95rem .95rem; border-radius: 14px; }
  .mk-tl-keys { gap: .3rem .75rem; font-size: .75rem; }
  .mk-tl-read { font-size: .88rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-tl-seg, .mk-tl-line, .mk-tl-pin { transition: none; }
}

/* start, not stretch: stretched, the Free card was a 200px void between its last line
   and its button. Two cards of honest height beat two equal cards with a hole in one. */
/* ── the two cards are ONE grid ──────────────────────────────────────────────
   .mk-plans owns twelve row tracks; each card is a subgrid spanning all of them, and the
   row list inside each card is a subgrid of eight more. So the header, the box, the
   button, the list heading and every one of the eight rows sit on the SAME line in both
   cards — "History" in Free is level with "History" in Paid, which is what lets the eye
   read across instead of hunting. A wrapped value in one card lifts the same row in the
   other. The Paid card is wider (1.1fr): the eye lands on it first and the calculator
   has room. */
.mk-plans {
  display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  grid-template-rows: repeat(12, auto); column-gap: 1.4rem; row-gap: 0; align-items: stretch;
}
/* One plan, one card: the two-column track would leave it hugging the left edge of a
   1180px page with a hole beside it. Centred, and narrow enough that the spec list keeps
   a readable measure rather than stretching a five-word row across the whole width.
   From 1000px the archive timeline takes the second column: see "one plan" below. */
.mk-plans--one { grid-template-columns: minmax(0, 560px); justify-content: center; }

.mk-plan { position: relative; display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; align-content: start; }
.mk-plan .ptop { margin-bottom: .2rem; }
.mk-spec { grid-row: span 8; display: grid; grid-template-rows: subgrid; list-style: none; margin: 0; padding: 0; }
.mk-plan { --pp: clamp(1.5rem, 2.8vw, 2rem); border-radius: 20px; padding: var(--pp); }
/* Gradient border + a blush at the top + a plum-tinted shadow: three cues that this is
   the card, where a 3px line at the top was one. */
.mk-plan.feature {
  border-color: transparent;
  background: linear-gradient(180deg, #FCF5F8 0%, #fff 36%) padding-box, var(--grad) border-box;
  box-shadow: 0 2px 4px rgba(42,34,48,.04), 0 32px 70px -26px rgba(149,93,140,.42), 0 0 0 6px rgba(221,115,130,.06);
}
.mk-plan .ph { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-bottom: .2rem; }
/* The plan's name is its heading (an h2), in sentence case: an uppercase eyebrow over the
   price was the kicker pattern the rest of the site dropped. */
.mk-plan .pname { margin: 0; font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; letter-spacing: -.012em; line-height: 1.2; color: var(--ink); }
.mk-plan.feature .pname { color: var(--plum); }
.mk-plan .pprice {
  font-family: var(--font-display); font-size: clamp(2.5rem, 4.2vw, 3.4rem); font-weight: 750; letter-spacing: -.04em;
  line-height: 1; margin: .6rem 0 .3rem; display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap;
}
.mk-plan .mk-amt { font-size: inherit; letter-spacing: inherit; }
.mk-plan .mk-per { font-size: 1rem; margin-left: 0; }
.mk-plan .psub { color: var(--mk-ink-soft); font-size: .93rem; line-height: 1.5; margin-bottom: 1.2rem; }
/* Free's answer to the calculator across the gap: same frame, same first line ("1 site"),
   no control in it. Flat surface rather than the calculator's blush, so it reads as a
   note and not as a slider that is switched off. */
.mk-freebox {
  background: var(--surface); border: 1px solid var(--tint-border); border-radius: 16px;
  padding: 1.05rem 1.15rem .95rem; margin: 0 0 1.3rem;
  /* As tall as what it says. Stretched to the calculator's height with space-between, its
     three short lines sat far apart in an empty frame; the button still lands level with
     Paid's because it has a row track of its own. */
  display: flex; flex-direction: column; justify-content: flex-start; gap: .55rem; align-self: start;
}
.mk-freebox p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--mk-ink-soft); }
.mk-freebox .lead { font-family: var(--font-display); font-size: 1.05rem; font-weight: 650; color: var(--ink); }
.mk-freebox .note { font-size: .84rem; color: var(--mute); }
/* margin-top:auto, not a fixed gap: the cards are equal height and the two calls to
   action have to land on the same line whatever the lists above them do. The earlier
   attempt set this before this rule and lost the tie on source order. */
.mk-plan .btn { width: 100%; justify-content: center; margin: .1rem 0 1.5rem; padding: .95rem 1.2rem; font-size: 1.02rem; border-radius: 12px; }
.mk-plan.feature .btn-grad { box-shadow: 0 12px 28px -8px rgba(149,93,140,.6), inset 0 1px 0 rgba(255,255,255,.22); }
.mk-plan.feature .btn-grad:hover { transform: translateY(-1px); box-shadow: 0 16px 32px -8px rgba(149,93,140,.65), inset 0 1px 0 rgba(255,255,255,.22); }
/* The list heading doubles as the legend: in Paid it carries the plum weight the
   changed values use, so the colour explains itself. */
.mk-spec-h { font-size: .92rem; font-weight: 650; color: var(--mk-ink-soft); margin: 0 0 .35rem; align-self: end; }
.mk-spec-h .hl { color: var(--plum); font-weight: 750; }
.mk-spec-h .stack { display: none; }
/* One row: disc · label · value (· pill). The label column is a fixed width in BOTH cards,
   so values start at the same offset from each card's edge whatever the card's width. */
.mk-spec li {
  display: grid; grid-template-columns: 20px minmax(0, 8.5rem) minmax(0, 1fr) auto; column-gap: .7rem;
  align-items: start; padding: .58rem 0; border-top: 1px solid var(--tint-line);
  font-size: .93rem; line-height: 1.45; transition: background var(--t);
}
.mk-spec li > svg {
  width: 20px; height: 20px; padding: 4px; box-sizing: border-box; border-radius: 50%;
  background: var(--rise-soft); color: var(--rise); margin-top: .1rem;
}
.mk-spec .k { color: var(--mute); font-weight: 560; }
.mk-spec .v { color: var(--ink); font-weight: 560; min-width: 0; }
/* what changes, in plum — the only plum text in either list, so the count of differences
   is visible before a word is read */
.mk-plan.feature .mk-spec li[data-diff] .v { color: var(--plum); font-weight: 700; }
/* absences: muted words AND a muted × — never a green tick beside "No" */
.mk-spec li.no > svg { background: rgba(110,100,115,.12); color: var(--mute); }
.mk-spec li.no .k, .mk-spec li.no .v { color: var(--mute); font-weight: 500; }
/* not shipped yet: a clock in the tint and MUTED text — the plum means "you get this
   today", and an unshipped feature is not that */
.mk-spec li.soon > svg { background: var(--tint); color: var(--plum); }
.mk-plan.feature .mk-spec li.soon .v { color: var(--mute); font-weight: 600; }
/* the row that is the same on both: one tinted band bled to both card edges, so at the
   same y the two cards show one continuous stripe. TWO CARDS ONLY: with one card there is
   nothing for the rows to be the same as, and the band was emphasis with no referent that
   made the card's lower half look like a second component. */
.mk-plans:not(.mk-plans--one) .mk-spec li.same {
  background: var(--tint); border-top: 0; border-bottom: 0;
  margin-inline: calc(var(--pp) * -1); padding-inline: var(--pp); border-radius: 0;
}
/* a hairline between the identical rows, none at the block's own edges */
.mk-plans:not(.mk-plans--one) .mk-spec li.same + li.same { border-top: 1px solid var(--tint-line); }
.mk-plans:not(.mk-plans--one) .mk-spec li.same:last-child { padding-bottom: .75rem; }
.mk-plans:not(.mk-plans--one) .mk-spec li:not(.same) + li.same { margin-top: .55rem; padding-top: .75rem; }
.mk-plans:not(.mk-plans--one) .mk-spec li.same .v { font-weight: 600; }
/* the band draws its own bottom rule; the next row's top rule on the same pixel made a
   2px step at the padding edge */
.mk-plans:not(.mk-plans--one) .mk-spec li.same + li:not(.same) { border-top: 0; }
.mk-spec li.same { grid-template-columns: 20px minmax(0, 8.5rem) minmax(0, 1fr); }
.mk-spec li.spec-sep {
  display: block; border-top: 0; padding: .7rem 0 .2rem; margin-top: .55rem;
  font-size: .84rem; font-weight: 650; color: var(--plum);
}
/* Two cards: the separator opens the tinted band, so it bleeds to the card edges like the
   rows under it, and the first identical row loses the gap it kept when it opened the band. */
.mk-plans:not(.mk-plans--one) .mk-spec li.spec-sep {
  background: var(--tint); margin-inline: calc(var(--pp) * -1); padding-inline: var(--pp);
}
.mk-plans:not(.mk-plans--one) .mk-spec li.spec-sep + li.same { margin-top: 0; padding-top: .45rem; border-top: 0; }
/* hovering a row lights the SAME row in the other card (marketing.js pairs them) */
.mk-spec li.pair:not(.same) { background: var(--surface-2); }
/* the Free value inside the Paid cell — only when the cards stack, see the media rule */
.mk-spec .was { display: none; color: var(--mute); font-weight: 500; margin-right: .45rem; }
.mk-spec .was .arr { display: inline-block; margin-left: .45rem; color: var(--mute); }

/* Stacked on a phone the shared tracks make no sense: back to a plain column, and the
   comparison rides on the identical labels, the muted × rows and the "was → now" cell. */
@media (max-width: 820px) {
  .mk-plans { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 1.4rem; }
  .mk-plan { display: flex; flex-direction: column; grid-row: auto; }
  .mk-spec { display: grid; grid-row: auto; grid-template-rows: none; }
  .mk-spec .was { display: inline; }
  .mk-spec li { grid-template-columns: 20px minmax(0, 7.25rem) minmax(0, 1fr) auto; }
  .mk-spec li.same { grid-template-columns: 20px minmax(0, 7.25rem) minmax(0, 1fr); }
  /* align-self:end was the subgrid's bottom edge; in a flex column it became the right edge */
  .mk-spec-h { align-self: stretch; }
  .mk-spec-h .wide { display: none; }
  .mk-spec-h .stack { display: inline; }
}
/* On a narrow phone the value takes the whole line under its label: "One → As many as
   you like" beside a label column was breaking into three lines. Two cards only: the one
   launch card has no such cell, and stacking "Sites" over "Unlimited" eight times turned
   a spec sheet into a tall list. */
@media (max-width: 480px) {
  .mk-plans:not(.mk-plans--one) .mk-spec li { grid-template-columns: 20px minmax(0, 1fr); row-gap: .1rem; }
  .mk-plans:not(.mk-plans--one) .mk-spec .k { grid-column: 2; }
  .mk-plans:not(.mk-plans--one) .mk-spec .v { grid-column: 2; }
  /* The band's tag goes on its own line under the value. It used to sit beside the label
     in an auto column, but the tag does not wrap and at 390px it is about 250px wide, so
     the label and the value were left a 12px column and ran one letter per line down a
     700px-tall row (0px at 360). Only the two-card page has the tag, so the launch page
     never showed it. */
  .mk-plans:not(.mk-plans--one) .mk-spec li.same { grid-template-columns: 20px minmax(0, 1fr); row-gap: .1rem; }
  .mk-plans:not(.mk-plans--one) .mk-spec li.same .pill { grid-column: 2; grid-row: auto; white-space: normal; margin-top: .3rem; }
}
@supports not (grid-template-rows: subgrid) {
  .mk-plans { grid-template-rows: none; align-items: start; row-gap: 1.4rem; }
  .mk-plan { display: flex; flex-direction: column; grid-row: auto; }
  .mk-spec { display: grid; grid-row: auto; grid-template-rows: none; }
  .mk-spec-h { align-self: stretch; }
}

/* ── one plan: the card, and the archive timeline in the calculator's slot ──────
   The twelve shared row tracks exist so two cards line up row for row. With one card
   beside a drawing they would do harm: the timeline spans the tracks and its height
   would be shared out between them, opening gaps inside the card. So the card is a
   plain column, and the grid is only two columns side by side.
   Below 1000px the two stack, card first, both in one 560px column; at 390 that column
   is simply the page width. */
.mk-plans.mk-plans--one {
  grid-template-columns: minmax(0, 560px); grid-template-rows: none;
  justify-content: center; align-items: start; row-gap: 1.4rem;
}
.mk-plans--one .mk-plan { display: flex; flex-direction: column; grid-row: auto; }
.mk-plans--one .mk-spec { grid-row: auto; grid-template-rows: none; }
.mk-plans--one > .mk-tl { min-width: 0; }
@media (min-width: 1000px) {
  .mk-plans.mk-plans--one {
    grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); justify-content: stretch;
    column-gap: clamp(1.4rem, 3vw, 2.4rem);
  }
  /* the drawing is shorter than the card: it stays in view while the rows scroll past */
  .mk-plans--one > .mk-tl { position: sticky; top: 5.5rem; }
}
/* The card's name is its heading: sentence case, the display face, ink. */
.mk-plan .pr-plan-title { margin: 0 0 .1rem; font-size: 1.2rem; color: var(--ink); }
/* the price stands over the button with room, now that no sub-line and box sit between */
.mk-plans--one .mk-plan .pprice { margin-bottom: 1.2rem; }
/* The rows' heading, in words: "In the plan", not an uppercase label. */
.mk-plans--one .mk-spec-h {
  align-self: stretch; margin: 0 0 .45rem; font-family: inherit;
  font-size: .9rem; font-weight: 650; letter-spacing: 0; text-transform: none; line-height: 1.4; color: var(--ink);
}
/* No pill column with one card, so every row is the same three tracks. */
.mk-plans--one .mk-spec li { grid-template-columns: 20px minmax(0, 8.5rem) minmax(0, 1fr); }
@media (max-width: 820px) {
  .mk-plans--one .mk-spec li { grid-template-columns: 20px minmax(0, 7.25rem) minmax(0, 1fr); }
}
@media (max-width: 400px) {
  .mk-plans--one .mk-spec li { grid-template-columns: 20px minmax(0, 6.4rem) minmax(0, 1fr); column-gap: .6rem; }
}
.mk-badge-top {
  position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%); white-space: nowrap;
  background: var(--grad); color: #fff;
  font-size: .72rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase;
  padding: .34rem .85rem; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(149,93,140,.38), inset 0 1px 0 rgba(255,255,255,.25);
}

.mk-ptable { width: 100%; border-collapse: collapse; }
.mk-ptable th, .mk-ptable td { padding: .7rem .85rem; border-bottom: 1px solid var(--mk-line); font-variant-numeric: tabular-nums; text-align: right; }
.mk-ptable th:first-child, .mk-ptable td:first-child { text-align: left; }
.mk-ptable thead th { font-size: .73rem; text-transform: uppercase; letter-spacing: .05em; color: var(--mute); font-weight: 700; }
.mk-ptable tbody tr:last-child th, .mk-ptable tbody tr:last-child td { border-bottom: none; background: var(--tint); font-weight: 620; }
.mk-ptable tbody tr:last-child th { white-space: nowrap; }
.mk-ptable .cap-tag { font-size: .68rem; font-weight: 700; color: var(--plum); background: var(--plum-soft); border-radius: 999px; padding: .08rem .4rem; margin-left: .35rem; text-transform: uppercase; letter-spacing: .04em; }

/* ── article / prose ───────────────────────────────────────────────────────── */
.mk-article { max-width: 72ch; }
.mk-article h2 { font-size: clamp(1.28rem, 2.4vw, 1.6rem); letter-spacing: -.018em; margin: 2.4rem 0 .75rem; scroll-margin-top: 90px; }
.mk-article h2:first-child { margin-top: 0; }
.mk-article h3 { font-size: 1.06rem; margin: 1.6rem 0 .5rem; }
.mk-article p { line-height: 1.72; margin: 0 0 1rem; color: var(--mk-ink-soft); }
.mk-article ul, .mk-article ol { margin: 0 0 1.15rem; padding-left: 1.3rem; }
.mk-article li { line-height: 1.7; margin-bottom: .5rem; color: var(--mk-ink-soft); }
.mk-article li strong, .mk-article p strong { color: var(--ink); font-weight: 620; }
.mk-article a { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--tint-border); }
.mk-article a:hover { text-decoration-color: var(--mauve); }
.mk-article a.btn, .mk-inline-cta a.btn { text-decoration: none; }
.mk-article code { font-size: .86em; }
/* A token the reader is meant to copy (`rowLimit: 25000`, `dimensions: ["query"]`) broke
   at its own space on a phone and read as two values. The longest inline token in any
   guide or post is 23 characters, which fits a 390px column. Scoped to the two article
   templates, so the legal documents set their code exactly as before. */
.mk-guidebody code, .mk-postbody code { white-space: nowrap; }
.mk-article table { width: 100%; border-collapse: collapse; margin: 0 0 1.2rem; font-size: .92rem; }
.mk-article th, .mk-article td { border: 1px solid var(--mk-line); padding: .6rem .7rem; text-align: left; vertical-align: top; }
.mk-article thead th { background: var(--surface-2); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mute); }
.mk-tablewrap { overflow-x: auto; min-width: 0; }
/* The worked CTR table in the metrics guide (mkt.guide.metrics.s3.p). Numbers right-
   aligned, the two ways of summing them on a tint underneath, the wrong one struck and
   in the fall colour. prose.ts marks every percentage in a body as a .fig; inside a
   column of them that is noise, so the table sets them in its own type. */
.mk-article .afig-ctr thead th:not(:first-child), .mk-article .afig-ctr tbody td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.mk-article .afig-ctr tfoot th, .mk-article .afig-ctr tfoot td { background: var(--tint); color: var(--ink); font-weight: 600; }
.mk-article .afig-ctr tfoot th { font-size: .88rem; line-height: 1.45; }
.mk-article .afig-ctr tfoot td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mk-article .afig-ctr tr.afig-ctr-wrong td { color: var(--fall); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.mk-article .afig-ctr tr.afig-ctr-right td { color: var(--rise); }
.mk-article .afig-ctr .fig { font: inherit; color: inherit; letter-spacing: inherit; }
/* The brand guide's two-by-two (mkt.guide.brand.s3.p): brand across, non-brand down,
   the case the guide is about tinted. At 390 the row label goes above its two cells and
   the cells become two cards of about 170px, so nothing scrolls sideways. */
.mk-article .afig-quad { table-layout: fixed; }
.mk-article .afig-quad thead td { width: 7.5rem; border: 0; background: none; }
.mk-article .afig-quad thead th { text-align: center; }
.mk-article .afig-quad tbody th { background: var(--surface-2); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mute); vertical-align: middle; }
.mk-article .afig-quad td { font-size: .9rem; line-height: 1.55; color: var(--mk-ink-soft); }
.mk-article .afig-quad td strong { display: block; margin-bottom: .2rem; color: var(--ink); }
.mk-article .afig-quad td.afig-quad-key { background: var(--fall-soft); }
.mk-article .afig-quad td.afig-quad-key strong { color: var(--fall); }
@media (max-width: 560px) {
  .mk-article .afig-quad, .mk-article .afig-quad thead, .mk-article .afig-quad tbody { display: block; }
  .mk-article .afig-quad tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; margin-bottom: .4rem; }
  .mk-article .afig-quad thead td { display: none; }
  .mk-article .afig-quad thead th { border: 0; background: none; padding: 0 .2rem; }
  .mk-article .afig-quad tbody th { grid-column: 1 / -1; border: 0; background: none; padding: .45rem .1rem 0; text-align: left; }
  .mk-article .afig-quad td { border-radius: 10px; padding: .6rem .65rem; font-size: .86rem; }
}

/* ── /security: what each Google permission reaches ───────────────────────────
   Two cards between "The access we ask for" and the rest of the page, on the article's
   own 72ch measure so the page keeps one left edge. The ch is the article's too: these
   blocks carry no font-size of their own. */
.sec-scopes, .sec-links { max-width: 72ch; margin-inline: auto; }
.sec-scopes { margin-top: 1.4rem; margin-bottom: 2.4rem; }
.sec-links { margin-top: 2.4rem; }
.sec-scope .mk-h3 { margin-bottom: .15rem; }
.sec-scope .mk-h3 code { font-size: .86em; background: var(--plum-soft); padding: .1rem .4rem; border-radius: 6px; overflow-wrap: anywhere; }
.sec-scope .sec-scope-what { font-size: .88rem; font-weight: 600; color: var(--plum); }
.sec-scope ul { list-style: none; margin: .85rem 0 0; padding: 0; display: grid; gap: .5rem; }
.sec-scope li { display: flex; gap: .55rem; align-items: flex-start; font-size: .92rem; line-height: 1.5; color: var(--ink); }
.sec-scope li > svg {
  flex: none; width: 19px; height: 19px; padding: 3px; margin-top: .1rem; box-sizing: border-box;
  border-radius: 50%; background: var(--rise-soft); color: var(--rise);
}
.sec-scope li > span { min-width: 0; }
.sec-scope .sec-scope-note {
  margin-top: auto; padding-top: .85rem; font-size: .84rem; line-height: 1.55;
  color: var(--mute);
}
.sec-scope-note code { font-size: .92em; }
.sec-revoke {
  display: flex; gap: .6rem; align-items: flex-start; margin: 1rem 0 0;
  font-size: .92rem; line-height: 1.6; color: var(--mk-ink-soft);
}
.sec-revoke > svg { flex: none; margin-top: .2rem; color: var(--plum); }
.sec-revoke a { color: var(--plum); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--tint-border); }
.sec-revoke a:hover { text-decoration-color: var(--mauve); }

.mk-callout {
  border-left: 3px solid var(--mauve); background: var(--tint); border-radius: 0 12px 12px 0;
  padding: 1rem 1.2rem; margin: 0 0 1.6rem;
}
.mk-callout .lbl { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--plum); margin-bottom: .35rem; }
.mk-callout p { margin: 0; color: var(--mk-ink-soft); line-height: 1.65; }
/* A takeaway long enough to be given paragraphs gets the air between them. */
.mk-callout p + p { margin-top: .5rem; }
/* The takeaway's label on a guide or a post is the block's only context, so it is a real
   heading rather than a small-caps kicker. Sized for the callout, not for the article's
   section h2s, which it would otherwise inherit. */
.mk-callout > .mk-callout-h { margin: 0 0 .35rem; font-size: 1rem; line-height: 1.35; letter-spacing: -.01em; color: var(--ink); }

.mk-doc { display: grid; grid-template-columns: 230px minmax(0,1fr); gap: clamp(1.5rem,4vw,3.5rem); align-items: start; }
/* Collapsed, the contents list must not be the whole first screen: on /legal/terms at
   390 the title started at y=839, a screen and a half below a bare list of links. */
@media (max-width: 900px) {
  .mk-doc { grid-template-columns: minmax(0,1fr); }
  .mk-doc > .mk-article { order: 1; }
  .mk-toc { position: static !important; order: 2; margin-top: 2.2rem; }
}
/* The wash is calibrated for a page that opens with a heading. A document opens with a
   sticky contents list, and a fade running through the middle of it looked like a
   rendering fault — so it dies above the article's first line instead. */
body.mk:has(.mk-doc) { --mk-wash-h: 430px; }
/* A hero is twice the height of a heading, so the fade lands past the screenshot rather
   than a third of the way up it. */
body.mk:has(.mk-hero), body.mk:has(.mk-shot--hero) { --mk-wash-h: 1040px; }
.mk-toc { position: sticky; top: 92px; font-size: .87rem; }
.mk-toc .th { font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; color: var(--mute); margin-bottom: .6rem; }
.mk-toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: .1rem; }
.mk-toc a { display: block; padding: .32rem .55rem; border-radius: 8px; color: var(--mk-ink-soft); line-height: 1.4; }
.mk-toc a:hover { background: var(--tint); color: var(--plum); }

/* The contents list of a guide or a post (`.mk-toc--fold`; the legal pages keep the list
   above). Below 901px it used to come after the whole article and the closing box, so
   every link in it pointed back up at sections already read, in rows 31px tall. Now it
   sits above the article as one 48px row, and a checkbox beside a label opens it: no
   script, and the list is in the markup either way. That still honours the note above,
   the title is one row down the screen, not a screen and a half. From 901px the row and
   the box are gone and it is the sticky rail it always was. */
.mk-tocfold-in { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  border: 0; opacity: 0; clip-path: inset(50%); overflow: hidden; }
.mk-tocfold-btn { display: none; }
@media (min-width: 901px) {
  .mk-tocfold-in { display: none; }
}
@media (max-width: 900px) {
  .mk-doc > .mk-toc--fold {
    order: 0; margin: 0; font-size: .95rem;
    border: 1px solid var(--mk-line); border-radius: 12px; background: var(--surface);
  }
  .mk-toc--fold > .th { display: none; }
  .mk-toc--fold > .mk-tocfold-btn {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    min-height: 48px; padding: 0 .95rem; border-radius: 11px; cursor: pointer; user-select: none;
    font-weight: 620; color: var(--ink);
  }
  .mk-toc--fold > .mk-tocfold-btn .ic-svg { flex: none; color: var(--plum); transition: transform var(--t); }
  .mk-tocfold-in:checked ~ .mk-tocfold-btn .ic-svg { transform: rotate(180deg); }
  .mk-tocfold-in:focus-visible ~ .mk-tocfold-btn { outline: 2px solid var(--mauve); outline-offset: 2px; }
  .mk-toc--fold > ol { display: none; padding: .35rem .45rem .5rem; border-top: 1px solid var(--mk-line); }
  .mk-tocfold-in:checked ~ ol { display: grid; }
  /* 44px rows by construction, not by a padding that happens to add up at one size. */
  .mk-toc--fold a { display: flex; align-items: center; min-height: 44px; padding: .5rem .7rem; }
  .mk-toc.mk-toc--fold a::before { left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-toc--fold > .mk-tocfold-btn .ic-svg { transition: none; }
}

/* ── CTA band ──────────────────────────────────────────────────────────────── */
.mk-cta-band { position: relative; overflow: hidden; background: var(--grad); color: #fff; padding: clamp(3rem,7vw,5rem) 0; text-align: center; }
.mk-cta-band::after { content: ''; position: absolute; inset: 0; background: radial-gradient(110% 90% at 78% -20%, rgba(255,255,255,.3), transparent 58%); pointer-events: none; }
.mk-cta-band .mk-wrap { position: relative; z-index: 1; }
.mk-cta-band h2 { color: #fff; font-size: clamp(1.6rem,4vw,2.4rem); letter-spacing: -.022em; margin: 0 auto .7rem; max-width: 20ch; line-height: 1.14; font-weight: 680; text-wrap: balance; }
.mk-cta-band p { color: rgba(255,255,255,.93); max-width: 56ch; margin: 0 auto; line-height: 1.62; text-wrap: pretty; }
/* The secondary DARKENS the band instead of whitening it. A white wash composited to about
   rgb(187,134,164) and left the white label at 3.0:1. A plum wash at .4 keeps the label
   at 4.7:1 even over the palest colour the band can produce anywhere (the rose stop under
   the full .3 white glow, rgb(231,157,168)), 4.9:1 over the centre stop under that glow,
   and 7.0:1 over the pixel measured behind the button at 1440. The bright border keeps it reading as a button without
   competing with the solid white primary beside it. */
.mk-cta-band .btn-ghost { background: rgba(38,16,36,.4); color: #fff; border: 1.5px solid rgba(255,255,255,.7); }
.mk-cta-band .btn-ghost:hover { background: rgba(38,16,36,.52); color: #fff; border-color: #fff; }
.mk-cta-band .btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.mk-cta-band .btn-grad { background: #fff; color: var(--plum); box-shadow: 0 8px 24px rgba(60,30,60,.24); }
.mk-cta-band .btn-grad:hover { background: #fff; color: var(--plum-700); filter: none; }
.mk-cta-band .mk-trust { justify-content: center; }

/* ── inline CTA (inside articles) ──────────────────────────────────────────── */
.mk-inline-cta {
  border: 1px solid var(--tint-border); background: var(--tint); border-radius: 15px;
  padding: 1.2rem 1.35rem; margin: 2rem 0; display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap;
}
.mk-inline-cta .txt { flex: 1 1 320px; min-width: 0; }
.mk-inline-cta .mk-trust { margin-top: .55rem; font-size: .8rem; }
.mk-inline-cta h3 { margin: 0 0 .25rem; font-size: 1.02rem; }
.mk-inline-cta p { margin: 0; font-size: .9rem; color: var(--mk-ink-soft); line-height: 1.55; }
/* A post's own onward route, under the closing box's heading: a plain link, because the
   button beside it is the sign-up. */
.mk-inline-cta .mk-inline-more {
  display: inline-flex; align-items: center; gap: .3rem; margin-top: .1rem;
  font-size: .88rem; font-weight: 620; color: var(--plum);
}
.mk-inline-cta .mk-inline-more .ic-svg { transition: transform var(--t); }
.mk-inline-cta .mk-inline-more:hover .ic-svg { transform: translateX(2px); }
/* The guide's screenshot belongs to the card above it, so it sits closer to that card
   than to the prose that follows. */
.mk-guidebody .mk-shot { margin: 1.8rem 0; }
.mk-guidebody .mk-inline-cta + .mk-shot { margin-top: -.9rem; }
@media (prefers-reduced-motion: reduce) {
  .mk-inline-cta .mk-inline-more .ic-svg { transition: none; }
}
/* The one action in its box ("Talk to us" on /faq, a guide's feature button, a post's
   closing link) was a 120px island on a phone. Full width, like every other stacked CTA. */
@media (max-width: 700px) {
  .mk-inline-cta .btn { width: 100%; justify-content: center; }
}

/* ── footer ────────────────────────────────────────────────────────────────── */
.mk-footer { background: var(--surface-2); border-top: 1px solid var(--mk-line); margin-top: 0; padding: clamp(2.5rem,5vw,3.5rem) 0 1.75rem; }
.mk-fgrid { display: grid; grid-template-columns: minmax(180px, 1.2fr) repeat(5, minmax(0,1fr)); gap: clamp(1.4rem,3vw,2.2rem); }
@media (max-width: 960px) { .mk-fgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } .mk-fbrand { grid-column: 1/-1; } }
@media (max-width: 520px) { .mk-fgrid { grid-template-columns: 1fr; } }
.mk-fbrand p { color: var(--mute); font-size: .88rem; line-height: 1.6; margin: .7rem 0 0; max-width: 34ch; }
.mk-footer .fh { font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; color: var(--mute); font-weight: 700; margin: 0 0 .75rem; line-height: 1.4; letter-spacing: .09em; }
.mk-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .42rem; }
.mk-footer li a { color: var(--mk-ink-soft); font-size: .89rem; }
.mk-footer li a:hover { color: var(--plum); }
.mk-fbot {
  margin-top: clamp(1.8rem,4vw,2.6rem); padding-top: 1.2rem; border-top: 1px solid var(--mk-line);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  font-size: .84rem; color: var(--mute);
}
.mk-fbot .lang-dd > summary { background: var(--surface); }
/* Payment marks (mk_pay.eta): a quiet row of card-shaped chips, one colour, so they read as
   information about checkout rather than as five logos competing with ours. */
.mk-pay { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-left: auto; }
.mk-pay-by { font-size: .8rem; color: var(--mute); white-space: nowrap; }
/* `.mk-footer ul` (a one-column grid for the link lists) outweighs a bare class, so the
   row is named through the footer too. */
.mk-footer .mk-pay-list { display: flex; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.mk-pay-list li {
  width: 40px; height: 26px; display: grid; place-items: center; flex: none;
  background: var(--surface); border: 1px solid var(--mk-line); border-radius: 5px;
}
.mk-pay-list svg { display: block; fill: var(--mk-ink-soft); }
/* The marks and the language picker as one right-aligned group (mk_foot.eta says why). The
   group wraps inside itself from the right, so the picker ends a line and never starts one. */
.mk-fend { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .75rem 1rem; margin-left: auto; }
.mk-fend .mk-pay { margin-left: 0; }
@media (max-width: 640px) {
  /* On a phone the row takes its own line under the copyright, left-aligned with it. The
     group lets go of its two children for that, and the picker keeps to the right edge by
     itself: beside the copyright when there is room, alone on the next line when there is
     not (the Ukrainian "Налаштування cookie" makes the difference). */
  .mk-fend { display: contents; }
  .mk-pay { order: 3; flex-basis: 100%; margin-left: 0; }
  .mk-fbot .lang-dd { margin-left: auto; }
}
/* The folding columns (mk_foot.eta). Above 520px nothing folds: the checkbox is not
   rendered, the chevron is not drawn and the heading does not take a click, so the grid
   is exactly what it was. Below it each heading is a 48px row that opens its own list. */
.mk-fcol { position: relative; min-width: 0; }
.mk-fcol-t { display: none; }
.mk-fcol .fh label { display: block; pointer-events: none; }
.mk-fcol .fh svg { display: none; }
@media (max-width: 520px) {
  .mk-fgrid { row-gap: 0; }
  .mk-fbrand { margin-bottom: 1.5rem; }
  .mk-fcol { border-top: 1px solid var(--mk-line); }
  .mk-fcol:last-child { border-bottom: 1px solid var(--mk-line); }
  /* Visually hidden, still focusable: Space on the focused box toggles it, and the ring is
     drawn on the heading row it controls. */
  .mk-fcol-t {
    display: block; position: absolute; top: 0; left: 0; width: 1px; height: 1px;
    margin: 0; opacity: 0; clip-path: inset(50%);
  }
  .mk-footer .mk-fcol .fh { margin: 0; }
  .mk-fcol .fh label {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    min-height: 48px; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent;
  }
  .mk-fcol .fh svg { display: block; flex: none; color: var(--mute); transition: transform var(--t); }
  .mk-fcol-t:checked ~ .fh svg { transform: rotate(180deg); }
  .mk-fcol-t:focus-visible ~ .fh label { outline: 2px solid var(--mauve); outline-offset: 2px; border-radius: 6px; }
  .mk-fcol-t:not(:checked) ~ ul { display: none; }
  .mk-fcol ul { padding: .1rem 0 1.1rem; }
}
@media (prefers-reduced-motion: reduce) { .mk-fcol .fh svg { transition: none; } }

/* ── misc utilities ────────────────────────────────────────────────────────── */
.mk-note { font-size: .85rem; color: var(--mute); line-height: 1.55; }
.mk-anchor { scroll-margin-top: 90px; }
.mk-hr { border: none; border-top: 1px solid var(--mk-line); margin: clamp(2.5rem,5vw,4rem) 0; }
.mk-tagline { font-size: .95rem; color: var(--mk-ink-soft); }
.mk-partial {
  display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; font-weight: 650;
  color: var(--mute); background: var(--surface-2); border: 1px solid var(--mk-line);
  border-radius: 999px; padding: .02rem .4rem;
}
.mk-prevnext { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2.5rem; }
.mk-prevnext a { font-weight: 600; font-size: .92rem; display: inline-flex; align-items: center; gap: .4rem; }

/* ── narrow phones ─────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  /* The hero was 47px too tall for the first screen: the screenshot's top edge sat just
     below an 844px fold, so the page's one piece of evidence was invisible until a
     scroll. These five trims put the top strip of the real product on screen one. */
  .mk-hero { padding-top: 2rem; }
  .mk-hero-grid { gap: 1.6rem; }
  .mk-hero .mk-ctas { margin-top: 1.1rem; }
  .mk-hero .mk-trust { margin-top: .9rem; }
  .mk-hero .hero-note { margin-top: .8rem; }
  /* Two CTAs of different widths stacked read as a mistake; full width reads as a
     choice. Only below 520px — side by side they should stay content-sized. */
  .mk-ctas .btn { width: 100%; justify-content: center; }
  /* "Average position" truncated to "AVERAGE PO…" looks like a bug. Let it wrap. */
  .mk-kpi .l { white-space: normal; font-size: .58rem; line-height: 1.25; }
  .mk-kpi .v { font-size: 1.15rem; }
}

/* Flex items refuse to shrink below their min-content width unless told to, and a
   line of copy containing a <code> token has a wide min-content. That is a 2px
   sideways scroll at 390px — invisible, and enough to make the whole page slide. */
.mk-arith .a > span, .mk-limits li > span, .mk-checks li > span,
.mk-defs .d > span, .mk-trust span, .mk-shot figcaption > span {
  min-width: 0; overflow-wrap: anywhere;
}

/* Long words (URLs, query strings) must wrap rather than widen the page. */
.mk-card, .mk-article, .mk-faq .a, .mk-cmp td, .mk-cmp th { overflow-wrap: break-word; }

@media (prefers-reduced-motion: reduce) {
  .mk-panel, .mk-sheet { animation: none; }
  a.mk-card:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Feature pages, second edition — screenshots and real functional depth.
   The first version was a hero, three bullets and a paragraph, and it read as a
   brochure for something the reader could not picture. These blocks exist to show
   the screen and name its controls.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── a screenshot ──────────────────────────────────────────────────────────── */
.mk-shot { margin: 0; }
.mk-shot img {
  display: block; width: 100%; height: auto; border-radius: 13px;
  border: 1px solid var(--mk-line); background: var(--surface);
  box-shadow: 0 2px 6px rgba(42,34,48,.05), 0 18px 44px -20px rgba(42,34,48,.28);
}
.mk-shot figcaption {
  margin-top: .6rem; font-size: .82rem; color: var(--mute); line-height: 1.5;
  display: flex; gap: .4rem; align-items: flex-start;
}
.mk-shot figcaption svg { flex: none; margin-top: .18rem; color: var(--mauve); }
.mk-shot--hero img { box-shadow: 0 2px 6px rgba(42,34,48,.05), 0 26px 60px -18px rgba(42,34,48,.3); }
/* An audience hero on a phone: a 976px table scaled into a 350px column is 5px text, so a
   TALL hero is cropped rather than shrunk, to a 16:9 window on its top-left corner, where
   the column headers and the first rows are, and the whole picture is one tap away. The
   class is set only when audience.eta's own tallShot test is true, never on .mk-shot--hero
   as such: that class also sits on the 796x72 verdict strip, which a forced 16:9 would crop
   to nothing. A crop is a ratio, not a height (see .fxt-s.is-crop).
   The picture inside the window is drawn at 180% of the column, not fitted to it: an
   object-fit crop keeps the scale that made the text 5px and only shortens the box, so
   the window would hold the same unreadable table, less of it. At 180% the headers and
   the first rows read at about 8px, and the frame moves from the picture to the window. */
@media (max-width: 640px) {
  .mk-shot--crop {
    aspect-ratio: 16 / 9; overflow: hidden; border-radius: 13px;
    border: 1px solid var(--mk-line); background: var(--surface);
    box-shadow: 0 2px 6px rgba(42,34,48,.05), 0 18px 40px -20px rgba(42,34,48,.28);
  }
  .mk-shot--crop img { width: 180%; max-width: none; height: auto; border: 0; border-radius: 0; box-shadow: none; }
}
/* The shots that run the full width of the wrap under a section (audience.eta). A strip is
   legible at 1100px and a sliver at 525px, which is why they left the half-width column.
   A shot taller than 0.6 of its width is a page, and at that width would run a screen and
   a half, so it is cropped by ratio on its top-left corner, at every width. */
.mk-audshot { margin-top: clamp(1.6rem, 3.5vw, 2.4rem); }
/* No wider than the capture's own CSS width (the PNGs are 2x, so that is the size the
   interface was drawn at): a 796px alerts panel stretched to 1100px sets its text at 22px. */
.mk-audshot > .mk-shot { max-width: var(--shot-w, none); margin-inline: auto; }
.mk-audshot--tall .mk-shot img { aspect-ratio: 16 / 9; height: auto; object-fit: cover; object-position: top left; }

/* The hero's headline counts as text above the picture (rank movement): the three
   figures the card opens with, readable at any width before the capture is. */
.mk-fp-stats { margin: 0 0 1rem; }
.mk-fp-stats ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.mk-fp-stats li {
  border: 1px solid var(--mk-line); border-radius: 12px; background: var(--surface);
  padding: .7rem .8rem; font-size: .84rem; line-height: 1.35; color: var(--mk-ink-soft); min-width: 0;
}
.mk-fp-stats li strong {
  display: block; font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.6rem); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.1; color: var(--ink); margin-bottom: .2rem; font-variant-numeric: tabular-nums;
}
.mk-fp-stats li.s1 { border-color: rgba(26,158,132,.35); background: var(--rise-soft); }
.mk-fp-stats li.s1 strong { color: var(--rise); }
.mk-fp-stats li.s3 { border-color: rgba(210,58,87,.3); background: var(--fall-soft); }
.mk-fp-stats li.s3 strong { color: var(--fall); }
.mk-fp-stats p { margin: .55rem 0 0; font-size: .8rem; color: var(--mute); line-height: 1.45; }
@media (max-width: 420px) {
  .mk-fp-stats ul { gap: .4rem; }
  .mk-fp-stats li { padding: .55rem .55rem; font-size: .76rem; }
}

/* A tall hero on a phone. The whole screen at 358px is a picture of text too small to
   read, so the phone gets the top-left corner at the capture's own CSS size (--fp-w, from
   the manifest), 4:3, fading at the two cut edges; the tap opens all of it. Above 700px
   the wrapper does nothing. */
@media (max-width: 700px) {
  .mk-fp-crop {
    position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 13px;
    border: 1px solid var(--mk-line); background: var(--surface);
    box-shadow: 0 2px 6px rgba(42,34,48,.05), 0 18px 44px -20px rgba(42,34,48,.28);
  }
  .mk-fp-crop .mk-shot { height: 100%; overflow: hidden; }
  .mk-fp-crop .mk-shot img { width: var(--fp-w); max-width: none; height: auto; border: 0; border-radius: 0; box-shadow: none; }
  .mk-fp-crop::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom, transparent 62%, var(--surface)), linear-gradient(to right, transparent 82%, var(--surface));
  }
  .mk-fp-crop .zoom-hint { z-index: 2; }
}

/* The one place the site says out loud what a reader is looking at. Real interface,
   example data — a caption, not a disclaimer in small print. */
.mk-shotnote {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem;
  font-size: .78rem; color: var(--mute); background: var(--surface-2);
  border: 1px solid var(--mk-line); border-radius: 999px; padding: .22rem .7rem;
}

/* ── capability block: picture one side, detail the other ──────────────────── */
.mk-cap { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: clamp(1.6rem,4vw,3.2rem); align-items: center; }
.mk-cap + .mk-cap { margin-top: clamp(2.6rem, 6vw, 4.5rem); }
.mk-cap:nth-child(even) > .mk-cap-txt { order: 2; }
@media (max-width: 900px) {
  .mk-cap { grid-template-columns: 1fr; gap: 1.5rem; }
  .mk-cap:nth-child(even) > .mk-cap-txt { order: 0; }
}
/* Inside .mk-fp-caps the picture side is set by the template (.is-flip), not by
   position: a strip or a text-only block between two picture blocks must not flip the
   ones after it, and an interactive block after a step is a sibling too. */
.mk-fp-caps > .mk-cap:nth-child(n) > .mk-cap-txt { order: 0; }
.mk-fp-caps > .mk-cap.is-flip > .mk-cap-txt { order: 2; }
@media (max-width: 900px) { .mk-fp-caps > .mk-cap.is-flip > .mk-cap-txt { order: 0; } }
/* A strip (ratio under 0.34) runs under its text at up to its own width instead of
   floating in the middle of a 541px column a thousand pixels tall. A block with no
   picture is text on a measure, with no empty half beside it. */
.mk-cap.mk-cap--strip, .mk-cap.mk-cap--text { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.mk-cap--strip > .mk-cap-txt, .mk-cap--text > .mk-cap-txt { max-width: 72ch; }
.mk-fp-strip { width: 100%; min-width: 0; }
/* Clears the sticky header, and on a phone the sticky step strip under it too. */
.mk-fp-caps > .mk-cap { scroll-margin-top: 96px; }
.mk-fp-after { margin-top: clamp(2.6rem, 6vw, 4.5rem); min-width: 0; }
.mk-fp-after + .mk-cap { margin-top: clamp(2.6rem, 6vw, 4.5rem); }

/* ── the steps, as links, under "How it works" ─────────────────────────────── */
.mk-fp-steps { margin: calc(-1 * clamp(.6rem, 1.6vw, 1.2rem)) 0 clamp(2rem, 4.5vw, 3.2rem); }
.mk-fp-steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .6rem; }
.mk-fp-steps a {
  display: flex; gap: .6rem; align-items: flex-start; height: 100%; box-sizing: border-box;
  padding: .7rem .85rem; border: 1px solid var(--tint-border); border-radius: 12px; background: var(--surface);
  color: var(--ink); font-size: .88rem; font-weight: 600; line-height: 1.35;
  transition: border-color var(--t), box-shadow var(--t);
}
.mk-fp-steps a:hover { border-color: var(--mauve); box-shadow: var(--sh-sm); color: var(--ink); }
.mk-fp-steps a:focus-visible { outline: 2px solid var(--mauve); outline-offset: 2px; }
.mk-fp-steps .n {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 7px; background: var(--tint); border: 1px solid var(--tint-line); color: var(--plum);
  font-family: var(--font-display); font-weight: 700; font-size: .78rem;
}
.mk-fp-steps .t { min-width: 0; }
@media (max-width: 900px) {
  .mk-fp-steps ol { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; }
}
/* On a phone the strip holds under the header for the length of the section: one
   sideways row, snapping to a step, cut at the right edge so the cut reads as "more". */
@media (max-width: 700px) {
  .mk-fp-steps {
    position: sticky; top: 75px; z-index: 5;
    margin: 0 calc(-1 * var(--mk-gutter)) 1.6rem; padding: .5rem 0;
    background: var(--surface); border-block: 1px solid var(--tint-line);
  }
  .mk-fp-steps ol {
    display: flex; gap: .45rem; overflow-x: auto; overscroll-behavior-x: contain;
    padding: 2px var(--mk-gutter); scroll-snap-type: x proximity; scroll-padding-inline: var(--mk-gutter);
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  }
  .mk-fp-steps ol::-webkit-scrollbar { display: none; }
  .mk-fp-steps li { flex: none; scroll-snap-align: start; }
  .mk-fp-steps a { align-items: center; padding: .45rem .7rem .45rem .5rem; font-size: .82rem; background: var(--surface-2); border-color: var(--mk-line); }
  .mk-fp-steps .t { display: block; max-width: 14.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mk-fp-steps a:focus-visible { outline-offset: -2px; }
  .mk-fp-caps > .mk-cap { scroll-margin-top: 140px; }
}
.mk-cap-txt h3 { font-size: clamp(1.15rem, 2.2vw, 1.45rem); letter-spacing: -.015em; margin: 0 0 .6rem; font-weight: 650; line-height: 1.22; }
.mk-cap-txt p { color: var(--mk-ink-soft); line-height: 1.68; margin: 0; }
/* A body that arrived as one string and was given paragraphs. Same type as the single
   <p> it replaced, with the gap that one never needed. */
.mk-flow p { color: var(--mk-ink-soft); line-height: 1.68; margin: 0; }
.mk-flow p + p { margin-top: .75rem; }
.mk-flow .lead-p { color: var(--ink); }
/* The card's own heading, lifted out of the paragraph it used to open. */
.mk-flow > h2, .mk-flow > h3 { font-size: 1.02rem; font-weight: 650; letter-spacing: -.012em; color: var(--ink); margin: 0 0 .5rem; line-height: 1.32; }
.mk-cap-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; margin-bottom: .7rem;
  background: var(--tint); border: 1px solid var(--tint-line); color: var(--plum);
  font-family: var(--font-display); font-weight: 700; font-size: .82rem;
}
/* ── audience pages: the numbered body cards ─────────────────────────────────
   At 390px the body section is one 2,500px column of prose; the number and a heading a
   step above body size are what a thumb scrolling past it can navigate by. Scoped to the
   audience cards so the feature pages' .mk-flow headings are untouched. */
.mk-audcard > .mk-cap-n { align-self: flex-start; }
.mk-audcard > h2 { font-size: 1.08rem; }
/* The feature-page link sits at the foot of the card (margin-top:auto from .mk-card .more),
   and only as wide as its words, so the tap target is the link rather than the whole row. */
.mk-audcard > a.more { align-self: flex-start; }
@media (max-width: 640px) {
  .mk-audcard > h2 { font-size: 1.15rem; }
}

/* /for/publishers: the figures the cards argue from, above them. */
.mk-audfigs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--mk-line); border: 1px solid var(--mk-line); border-radius: 15px; overflow: hidden;
  margin-bottom: clamp(1.2rem, 3vw, 1.8rem);
}
.mk-audfigs p { margin: 0; background: var(--surface); padding: 1rem 1.2rem; font-size: .88rem; line-height: 1.5; color: var(--mk-ink-soft); }
.mk-audfigs b {
  display: block; margin-bottom: .2rem; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.35rem, 2.6vw, 1.7rem); line-height: 1.15; letter-spacing: -.02em; color: var(--ink);
}
@media (max-width: 640px) {
  .mk-audfigs { grid-template-columns: minmax(0, 1fr); }
  .mk-audfigs p { padding: .85rem 1rem; }
}

/* /for/seo-specialists card 1: a path rule tried on twenty example paths (mk-aud.js).
   The .mk-flow prefixes are specificity, not decoration: .mk-flow p and .mk-flow p + p
   would otherwise set the colour and add a margin on top of the grid gap. */
.mk-audseg {
  margin-top: 1rem; padding: .95rem 1rem 1rem; display: grid; gap: .7rem;
  background: var(--tint); border: 1px solid var(--tint-line); border-radius: 12px;
}
.mk-flow .mk-audseg p { margin: 0; }
.mk-flow .mk-audseg-h { font-size: .92rem; font-weight: 650; color: var(--ink); line-height: 1.4; }
.mk-audseg-ctl { display: flex; gap: .5rem; align-items: stretch; min-width: 0; }
.mk-audseg-ops {
  flex: none; display: inline-flex; min-width: 0; margin: 0; padding: 2px;
  border: 1px solid var(--mk-line); border-radius: 9px; background: var(--surface);
}
.mk-audseg-ops label { position: relative; display: flex; }
.mk-audseg-ops input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.mk-audseg-ops span {
  padding: .36rem .7rem; border-radius: 7px; font-size: .84rem; font-weight: 600; line-height: 1.3;
  color: var(--mute); cursor: pointer; white-space: nowrap;
}
.mk-audseg-ops input:checked + span { background: var(--plum); color: #fff; }
.mk-audseg-ops input:focus-visible + span { outline: 2px solid var(--mauve); outline-offset: 2px; }
.mk-audseg-ops input:disabled + span { cursor: default; }
.mk-audseg-in { flex: 1 1 auto; min-width: 0; display: flex; }
.mk-audseg-in input {
  width: 100%; min-width: 0; padding: .45rem .7rem; font-family: var(--font-mono); font-size: .88rem;
  color: var(--ink); background: var(--surface); border: 1px solid var(--tint-border); border-radius: 9px;
}
/* With no script the field is disabled, and it still has to read as the worked example. */
.mk-audseg-in input:disabled { opacity: 1; -webkit-text-fill-color: var(--ink); }
.mk-audseg-in input:focus-visible { outline: 2px solid var(--mauve); outline-offset: 1px; border-color: var(--mauve); }
.mk-audseg.is-bad .mk-audseg-in input { border-color: var(--fall); }
.mk-flow .mk-audseg-n { font-size: .9rem; font-weight: 650; color: var(--plum); line-height: 1.4; }
.mk-flow .mk-audseg.is-bad .mk-audseg-n { color: var(--fall); }
.mk-audseg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.mk-audseg-list li {
  max-width: 100%; padding: .2rem .45rem; border-radius: 6px; overflow-wrap: anywhere;
  font-family: var(--font-mono); font-size: .74rem; line-height: 1.3;
  color: var(--mute); background: var(--surface); border: 1px solid var(--mk-line);
}
/* A match is marked by a dot as well as by colour, so it does not rest on colour alone. */
.mk-audseg-list li.hit { color: var(--plum-700); background: var(--plum-soft); border-color: var(--tint-border); font-weight: 600; }
.mk-audseg-list li.hit::before {
  content: ""; display: inline-block; width: .4rem; height: .4rem; margin-right: .35rem;
  border-radius: 50%; background: var(--plum); vertical-align: .08em;
}
@media (prefers-reduced-motion: no-preference) {
  .mk-audseg-list li { transition: background var(--t), color var(--t), border-color var(--t); }
}
.mk-flow .mk-audseg-try { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; font-size: .8rem; color: var(--mute); line-height: 1.4; }
.mk-flow .mk-audseg-try[hidden] { display: none; }
.mk-audseg-try button {
  font: inherit; font-size: .8rem; padding: .22rem .62rem; border-radius: 999px; cursor: pointer;
  color: var(--plum); background: var(--surface); border: 1px solid var(--tint-border);
}
.mk-audseg-try button:hover { background: var(--plum-soft); }
.mk-flow .mk-audseg-note { font-size: .8rem; line-height: 1.5; color: var(--mute); }
/* 390px: the two-way switch above the field rather than squeezing it to 150px beside it. */
@media (max-width: 640px) {
  .mk-audseg { padding: .85rem; }
  .mk-audseg-ctl { flex-direction: column; }
  .mk-audseg-ops { align-self: flex-start; }
}

/* /for/seo-specialists card 2: Search Console's own table against the full list, to scale. */
.mk-audbars { margin: 1rem 0 0; display: grid; gap: .85rem; }
.mk-audbars .r { display: grid; gap: .3rem; min-width: 0; }
.mk-flow .mk-audbars .l {
  margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: .15rem .8rem; font-size: .84rem; line-height: 1.4; color: var(--mk-ink-soft);
}
.mk-audbars .n { color: var(--ink); white-space: nowrap; }
.mk-audbars .n b { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; }
.mk-audbars .t { display: block; height: 12px; overflow: hidden; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--mk-line); }
.mk-audbars .b { display: block; height: 100%; min-width: 4px; border-radius: 999px; }
.mk-audbars .b.gsc { background: var(--mute); }
.mk-audbars .b.us { background: var(--grad); }
.mk-audbars figcaption { font-size: .8rem; line-height: 1.5; color: var(--mute); }

/* /for/online-stores card 1: the four coverage groups as one bar. The colours are the
   coverage screen's own: rise, fall, the cabinet's --warn (#B87708), mute. */
.mk-audcov { margin: .15rem 0 1rem; }
.mk-audcov .live { --c: var(--rise); }
.mk-audcov .stopped { --c: var(--fall); }
.mk-audcov .never { --c: #B87708; }
.mk-audcov .orphan { --c: var(--mute); }
.mk-audcov .bar { display: flex; gap: 2px; height: 14px; overflow: hidden; border-radius: 999px; }
.mk-audcov .bar span { flex-basis: 0; flex-shrink: 1; min-width: 4px; background: var(--c); }
.mk-audcov .lg {
  list-style: none; margin: .65rem 0 0; padding: 0; display: grid; gap: .5rem .8rem;
  grid-template-columns: repeat(auto-fit, minmax(6.4rem, 1fr));
}
.mk-audcov .lg li { display: flex; gap: .45rem; align-items: flex-start; min-width: 0; font-size: .82rem; line-height: 1.35; color: var(--mk-ink-soft); }
.mk-audcov .lg i { flex: none; width: 10px; height: 10px; margin-top: .22rem; border-radius: 3px; background: var(--c); }
.mk-audcov .lg b { display: block; font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; color: var(--ink); }
.mk-audcov figcaption { margin-top: .6rem; font-size: .82rem; line-height: 1.45; color: var(--mute); }
.mk-audcov figcaption b { color: var(--ink); }

/* the controls that block exposes, as term — meaning pairs */
.mk-defs { margin: 1rem 0 0; padding: .85rem 0 0; border-top: 1px solid var(--mk-line); display: grid; gap: .45rem; }
/* The label and its value wrap onto separate lines when they have to: a Ukrainian term
   is longer than its English equivalent, and "Перемістити вгору / Перемістити вниз /
   Видалити групу" on one unbreakable flex line put the page 34px past a 390px phone. */
.mk-defs .d { display: flex; flex-wrap: wrap; gap: .2rem .5rem; align-items: baseline; font-size: .88rem; line-height: 1.5; min-width: 0; }
.mk-defs .d > * { min-width: 0; overflow-wrap: anywhere; }
/* was flex:none — which pins the label at max-content, so a long Ukrainian term could
   not break however much wrapping the row allowed */
.mk-defs .d b { flex: 0 1 auto; min-width: 0; font-weight: 620; color: var(--ink); }
.mk-defs .d span { color: var(--mute); }
.mk-defs .d .sep { color: var(--border); }

/* ── folding on a phone: first paragraph visible, the rest behind a label ──────
   A checkbox and a sibling selector, so it opens with no script and every word stays in
   the DOM. The checkbox is clipped, not removed, so a keyboard reaches it and the label
   shows its focus. Above 700px the checkbox and label are gone and nothing folds. */
.mk-fp-tg { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.mk-fp-tgl { display: none; }
.mk-fp-more > .mk-flow { margin-top: .75rem; }
@media (min-width: 701px) { .mk-fp-tg { display: none; } }
@media (max-width: 700px) {
  .mk-fp-tg:not(:checked) ~ .mk-fp-more, .mk-fp-tg:not(:checked) ~ .mk-fp-rest { display: none; }
  .mk-fp-tgl {
    display: flex; align-items: center; gap: .45rem; width: 100%; box-sizing: border-box; min-height: 44px;
    margin-top: .8rem; padding: .5rem .8rem; border: 1px solid var(--tint-border); border-radius: 10px;
    background: var(--surface); color: var(--plum); font-size: .86rem; font-weight: 620; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mk-fp-tgl .o, .mk-fp-tgl .x { flex: 1 1 auto; min-width: 0; }
  .mk-fp-tgl svg { flex: none; transition: transform var(--t); }
  .mk-fp-tgl .x { display: none; }
  .mk-fp-tg:checked ~ .mk-fp-tgl .o { display: none; }
  .mk-fp-tg:checked ~ .mk-fp-tgl .x { display: inline; }
  .mk-fp-tg:checked ~ .mk-fp-tgl svg { transform: rotate(180deg); }
  .mk-fp-tg:focus-visible ~ .mk-fp-tgl { outline: 2px solid var(--mauve); outline-offset: 2px; }
  .mk-fp-tgl.is-sm { width: fit-content; min-height: 40px; margin-top: .45rem; padding: .35rem .7rem; font-size: .82rem; }
  .mk-fp-tgl.is-sm .o, .mk-fp-tgl.is-sm .x { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .mk-fp-tgl svg { transition: none; } }

/* ── "what these numbers are measured over" — same place on all nine pages ─── */
.mk-measured {
  border: 1px solid var(--tint-border); background: var(--tint); border-radius: 15px;
  padding: clamp(1.15rem,2.4vw,1.6rem); display: grid; gap: .55rem; max-width: 78ch;
}
.mk-measured p { margin: 0; color: var(--mk-ink-soft); line-height: 1.68; }

/* ── the arithmetic strip: thresholds, stated ─────────────────────────────── */
.mk-arith { display: grid; gap: .1rem; border: 1px solid var(--mk-line); border-radius: 14px; overflow: hidden; background: var(--mk-line); }
.mk-arith .a { background: var(--surface); padding: .85rem 1.1rem; display: flex; gap: .7rem; align-items: flex-start; font-size: .92rem; line-height: 1.55; }
.mk-arith .a svg { flex: none; margin-top: .2rem; color: var(--mauve); }
.mk-arith .a code { font-size: .86em; }
/* /for/small-business: the dashboard's first lines set as text on a phone, where the
   796x72 picture of them is 5px type. Wide screens keep the picture. */
.mk-audverdict { display: none; text-align: left; }
.mk-audverdict .mk-arith { box-shadow: 0 2px 6px rgba(42,34,48,.05), 0 18px 40px -20px rgba(42,34,48,.28); }
.mk-audverdict .a { font-size: 1rem; color: var(--ink); }
.mk-audverdict .a svg { color: var(--fall); margin-top: .28rem; }
.mk-audverdict .sub { display: block; margin-top: .3rem; font-size: .9rem; color: var(--mute); }
.mk-audverdict .cap { margin: .6rem 0 0; display: flex; gap: .4rem; align-items: flex-start; font-size: .8rem; line-height: 1.5; color: var(--mute); }
.mk-audverdict .cap svg { flex: none; margin-top: .18rem; color: var(--mauve); }
@media (max-width: 640px) {
  .mk-audverdict { display: block; }
  .mk-shot.mk-audverdict-img { display: none; }
}

/* ── feature data widgets: the arithmetic, worked (views/partials/fx/, fxd-) ────
   Five blocks, one per feature page, each server-rendered in its default state so it
   reads with scripts off: a subtotal table (pivot analytics), a silence timeline (page
   coverage), a file preview (export), a threshold checker (drop alerts) and the named
   share of clicks (query long tail). Every toggle is a visually hidden radio and a
   `:checked ~` selector, the pattern .mx uses, so both states stay in the DOM. */
.fxd-q-in, .fxd-cv-in, .fxd-ex-in, .fxd-ex-sin { position: absolute; width: 1px; height: 1px; opacity: 0; clip-path: inset(50%); pointer-events: none; }
.fxd-q-tabs, .fxd-cv-seg, .fxd-ex-tabs { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .25rem; padding: .25rem; background: var(--tint); border-radius: 11px; max-width: 100%; }
.fxd-q-tabs label, .fxd-cv-seg label, .fxd-ex-tabs label {
  text-align: center; padding: .45rem .85rem; border-radius: 9px; cursor: pointer; white-space: nowrap;
  font-size: .86rem; font-weight: 600; color: var(--mk-ink-soft); line-height: 1.25;
  transition: background var(--t), color var(--t), box-shadow var(--t);
}
.fxd-q-tabs label:hover, .fxd-cv-seg label:hover, .fxd-ex-tabs label:hover { color: var(--ink); }

/* query long tail: the named share, clicks or impressions */
.fxd-q-head { max-width: 64ch; margin-bottom: clamp(1.1rem, 3vw, 1.7rem); }
.fxd-q-h { font-size: clamp(1.4rem, 3vw, 2rem); }
.fxd-q-head p { margin: 0; color: var(--mk-ink-soft); line-height: 1.65; }
.fxd-q-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1rem; align-items: stretch; }
@media (max-width: 820px) { .fxd-q-grid { grid-template-columns: minmax(0, 1fr); } }
.fxd-q-card { position: relative; min-width: 0; border: 1px solid var(--mk-line); border-radius: 16px; background: var(--surface); padding: clamp(1rem, 2.2vw, 1.35rem); box-shadow: var(--sh-sm); }
.fxd-q-card .mk-h3 { margin-bottom: .35rem; }
.fxd-q-in:nth-of-type(1):checked ~ .fxd-q-tabs label:nth-of-type(1),
.fxd-q-in:nth-of-type(2):checked ~ .fxd-q-tabs label:nth-of-type(2) { background: var(--surface); color: var(--ink); box-shadow: var(--sh-sm); }
.fxd-q-in:nth-of-type(1):focus-visible ~ .fxd-q-tabs label:nth-of-type(1),
.fxd-q-in:nth-of-type(2):focus-visible ~ .fxd-q-tabs label:nth-of-type(2) { outline: 2px solid var(--plum); outline-offset: 2px; }
.fxd-q-big { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 1rem; }
.fxd-q-fig { grid-area: 1 / 1; visibility: hidden; color: var(--mk-ink-soft); font-size: .95rem; }
.fxd-q-fig b { font-family: var(--font-display); font-size: clamp(2rem, 4.6vw, 2.6rem); font-weight: 680; letter-spacing: -.03em; line-height: 1; color: var(--plum); font-variant-numeric: tabular-nums; }
.fxd-q-in:nth-of-type(1):checked ~ .fxd-q-big .fxd-q-fig:nth-of-type(1),
.fxd-q-in:nth-of-type(2):checked ~ .fxd-q-big .fxd-q-fig:nth-of-type(2) { visibility: visible; }
.fxd-q-bar { display: flex; height: 34px; margin-top: .8rem; border-radius: 9px; overflow: hidden; background: var(--tint); }
.fxd-q-bar i { font-style: normal; font-size: .8rem; font-weight: 650; padding: 0 .55rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fxd-q-named { flex: none; width: 21%; display: flex; align-items: center; background: var(--grad); transition: width .45s cubic-bezier(.4, 0, .2, 1); }
.fxd-q-named i { color: #fff; }
.fxd-q-rest { flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end; background: repeating-linear-gradient(135deg, var(--tint) 0 6px, var(--tint-line) 6px 12px); }
.fxd-q-rest i { color: var(--mk-ink-soft); }
.fxd-q-card .m { display: none; }
.fxd-q-in:nth-of-type(2):checked ~ .fxd-q-bar .fxd-q-named { width: 60%; }
.fxd-q-in:nth-of-type(2):checked ~ .fxd-q-bar .c,
.fxd-q-in:nth-of-type(2):checked ~ .fxd-q-key .c { display: none; }
.fxd-q-in:nth-of-type(2):checked ~ .fxd-q-bar .m,
.fxd-q-in:nth-of-type(2):checked ~ .fxd-q-key .m { display: inline; }
.fxd-q-capped { display: block; height: 100%; background: var(--mauve); }
.fxd-q-key { list-style: none; margin: .85rem 0 0; padding: 0; display: grid; gap: .4rem; font-size: .88rem; line-height: 1.45; color: var(--mk-ink-soft); }
.fxd-q-key li { display: flex; gap: .55rem; align-items: flex-start; }
.fxd-q-key b { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fxd-q-key .sw { flex: none; width: 12px; height: 12px; margin-top: .22rem; border-radius: 3px; }
.fxd-q-key .sw.named { background: var(--grad); }
.fxd-q-key .sw.rest { background: repeating-linear-gradient(135deg, var(--tint) 0 3px, var(--tint-border) 3px 6px); }
.fxd-q-key .sw.capped { background: var(--mauve); }
.fxd-q-key .sw.under { background: var(--tint); border: 1px solid var(--tint-border); }
.fxd-q-sub { margin: 0; color: var(--mk-ink-soft); font-size: .92rem; line-height: 1.6; }
.fxd-q-says { margin: 1rem 0 0; padding: .15rem 0 .15rem 1rem; border-left: 3px solid var(--tint-border); max-width: 78ch; }
.fxd-q-says figcaption { font-size: .82rem; color: var(--mute); margin-bottom: .3rem; }
.fxd-q-says blockquote { margin: 0; }
.fxd-q-says p { margin: 0; color: var(--ink); line-height: 1.55; }

/* pivot analytics: one subtotal, recomputed */
.fxd-an { margin: 1.1rem 0 0; border: 1px solid var(--mk-line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.fxd-an-h { margin: 0; padding: .8rem 1rem .35rem; font-size: .95rem; font-weight: 650; letter-spacing: -.01em; color: var(--ink); line-height: 1.35; }
.fxd-an-scroll { overflow-x: auto; }
.fxd-an-scroll:focus-visible { outline: 2px solid var(--plum); outline-offset: -2px; }
.fxd-an-t { width: 100%; border-collapse: collapse; font-size: .86rem; font-variant-numeric: tabular-nums; }
.fxd-an-t th, .fxd-an-t td { padding: .5rem .65rem; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--mk-line); }
.fxd-an-t thead th { font-size: .68rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--mute); }
.fxd-an-t th:first-child { text-align: left; }
.fxd-an-t tbody th { font-weight: 500; color: var(--ink); white-space: normal; min-width: 7em; }
.fxd-an-t tr.par { background: var(--surface-2); }
.fxd-an-t tr.par th, .fxd-an-t tr.par td { font-weight: 700; color: var(--ink); }
.fxd-an-t tr.par td.rate { color: var(--plum); }
.fxd-an-t tr.kid th { padding-left: 1.5rem; }
.fxd-an-t tr.avg th, .fxd-an-t tr.avg td { border-bottom: 0; color: var(--fall); }
.fxd-an-t tr.avg th { font-weight: 500; font-style: italic; }
.fxd-an-t s { text-decoration-thickness: 2px; }
.fxd-an figcaption { padding: .75rem 1rem .9rem; border-top: 1px solid var(--mk-line); background: var(--tint); font-size: .86rem; line-height: 1.55; color: var(--mk-ink-soft); }
@media (max-width: 480px) {
  .fxd-an-t { font-size: .8rem; }
  .fxd-an-t th, .fxd-an-t td { padding: .45rem .35rem; }
  .fxd-an-t thead th { font-size: .62rem; letter-spacing: .02em; }
  .fxd-an-t tbody th { min-width: 6.2em; }
  .fxd-an-t tr.kid th { padding-left: .8rem; }
}

/* page coverage: the silence threshold on a 28-day timeline */
.fxd-cv { position: relative; margin: 0; min-width: 0; border: 1px solid var(--mk-line); border-radius: 16px; background: var(--surface); padding: clamp(1rem, 2.2vw, 1.35rem); box-shadow: var(--sh-sm); }
.fxd-cv-h { float: left; width: 100%; padding: 0; margin: 0 0 .75rem; font-size: 1rem; font-weight: 650; letter-spacing: -.01em; color: var(--ink); line-height: 1.35; }
.fxd-cv-top { clear: both; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .8rem; }
.fxd-cv-lab { font-size: .86rem; font-weight: 600; color: var(--mk-ink-soft); }
.fxd-cv-in:nth-of-type(1):checked ~ .fxd-cv-top label:nth-of-type(1),
.fxd-cv-in:nth-of-type(2):checked ~ .fxd-cv-top label:nth-of-type(2),
.fxd-cv-in:nth-of-type(3):checked ~ .fxd-cv-top label:nth-of-type(3) { background: var(--surface); color: var(--ink); box-shadow: var(--sh-sm); }
.fxd-cv-in:nth-of-type(1):focus-visible ~ .fxd-cv-top label:nth-of-type(1),
.fxd-cv-in:nth-of-type(2):focus-visible ~ .fxd-cv-top label:nth-of-type(2),
.fxd-cv-in:nth-of-type(3):focus-visible ~ .fxd-cv-top label:nth-of-type(3) { outline: 2px solid var(--plum); outline-offset: 2px; }
.fxd-cv-rows { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .9rem; }
.fxd-cv-rh { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .55rem; margin-bottom: .35rem; font-size: .88rem; line-height: 1.4; }
.fxd-cv-rh b { color: var(--ink); font-weight: 650; }
.fxd-cv-meta { color: var(--mute); font-size: .8rem; }
.fxd-cv-st { margin-left: auto; font-size: .8rem; font-weight: 650; white-space: nowrap; }
.fxd-cv-st > span { display: none; }
.fxd-cv-st > span::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: .35rem; border-radius: 50%; background: currentColor; vertical-align: .08em; }
.fxd-cv-st > .on { color: var(--rise); }
.fxd-cv-st > .off { color: var(--fall); }
.fxd-cv-svg { display: block; width: 100%; height: auto; overflow: visible; }
.fxd-cv-svg .tick { fill: var(--surface-2); stroke: var(--mk-line); stroke-width: 1; }
.fxd-cv-svg .tick.on { fill: var(--mauve); stroke: none; }
.fxd-cv-svg .tick.last { fill: var(--plum); }
.fxd-cv-svg .band { fill: rgba(221, 115, 130, .13); stroke: var(--rose); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; transition: opacity .2s ease; }
.fxd-cv-in:nth-of-type(1):checked ~ .fxd-cv-rows .fxd-cv-st > .t3,
.fxd-cv-in:nth-of-type(2):checked ~ .fxd-cv-rows .fxd-cv-st > .t7,
.fxd-cv-in:nth-of-type(3):checked ~ .fxd-cv-rows .fxd-cv-st > .t14 { display: inline; }
.fxd-cv-in:nth-of-type(1):checked ~ .fxd-cv-rows .band.t3,
.fxd-cv-in:nth-of-type(2):checked ~ .fxd-cv-rows .band.t7,
.fxd-cv-in:nth-of-type(3):checked ~ .fxd-cv-rows .band.t14 { opacity: 1; }
.fxd-cv-axis { display: flex; justify-content: space-between; gap: 1rem; margin-top: .4rem; font-size: .74rem; color: var(--mute); }
.fxd-cv-key { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: .8rem; line-height: 1.4; color: var(--mk-ink-soft); }
.fxd-cv-key li { display: flex; align-items: center; gap: .4rem; }
.fxd-cv-key .sw { flex: none; width: 10px; height: 14px; border-radius: 2px; }
.fxd-cv-key .sw.on { background: var(--mauve); }
.fxd-cv-key .sw.off { background: var(--surface-2); border: 1px solid var(--mk-line); }
.fxd-cv-key .sw.band { width: 18px; background: rgba(221, 115, 130, .13); border: 1px dashed var(--rose); }
.fxd-cv-bl, .fxd-cv-count > span { display: none; }
.fxd-cv-in:nth-of-type(1):checked ~ .fxd-cv-key .fxd-cv-bl.t3,
.fxd-cv-in:nth-of-type(2):checked ~ .fxd-cv-key .fxd-cv-bl.t7,
.fxd-cv-in:nth-of-type(3):checked ~ .fxd-cv-key .fxd-cv-bl.t14,
.fxd-cv-in:nth-of-type(1):checked ~ .fxd-cv-count > .t3,
.fxd-cv-in:nth-of-type(2):checked ~ .fxd-cv-count > .t7,
.fxd-cv-in:nth-of-type(3):checked ~ .fxd-cv-count > .t14 { display: inline; }
.fxd-cv-count { margin: .85rem 0 0; font-size: .95rem; font-weight: 650; color: var(--ink); }
.fxd-cv-cap { margin: .4rem 0 0; font-size: .84rem; line-height: 1.55; color: var(--mute); }

/* export: the file, as it opens */
.fxd-ex { position: relative; min-width: 0; border: 1px solid var(--mk-line); border-radius: 16px; background: var(--surface); padding: clamp(1rem, 2.4vw, 1.6rem); box-shadow: var(--sh-sm); }
.fxd-ex-h { margin: 0 0 .35rem; }
.fxd-ex-p { margin: 0 0 1rem; max-width: 72ch; color: var(--mk-ink-soft); line-height: 1.6; }
.fxd-ex-in:nth-of-type(1):checked ~ .fxd-ex-tabs label:nth-of-type(1),
.fxd-ex-in:nth-of-type(2):checked ~ .fxd-ex-tabs label:nth-of-type(2) { background: var(--surface); color: var(--ink); box-shadow: var(--sh-sm); }
.fxd-ex-in:nth-of-type(1):focus-visible ~ .fxd-ex-tabs label:nth-of-type(1),
.fxd-ex-in:nth-of-type(2):focus-visible ~ .fxd-ex-tabs label:nth-of-type(2) { outline: 2px solid var(--plum); outline-offset: 2px; }
.fxd-ex-panes { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; margin-top: .9rem; }
.fxd-ex-pane { grid-area: 1 / 1; min-width: 0; visibility: hidden; opacity: 0; transition: opacity .22s ease; }
.fxd-ex-in:nth-of-type(1):checked ~ .fxd-ex-panes .fxd-ex-pane:nth-of-type(1),
.fxd-ex-in:nth-of-type(2):checked ~ .fxd-ex-panes .fxd-ex-pane:nth-of-type(2) { visibility: visible; opacity: 1; }
.fxd-ex-win { position: relative; min-width: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
.fxd-ex-bar { display: flex; align-items: center; gap: .6rem; min-width: 0; padding: .5rem .8rem; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: .8rem; color: var(--mk-ink-soft); }
.fxd-ex-dots { display: inline-flex; gap: .3rem; flex: none; }
.fxd-ex-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--border); }
.fxd-ex-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); }
.fxd-ex-pre { margin: 0; padding: .9rem 1rem; overflow-x: auto; white-space: pre; font-family: var(--font-mono); font-size: .78rem; line-height: 1.65; color: var(--ink); background: #FBFAF8; }
.fxd-ex-pre .c { color: var(--mute); }
.fxd-ex-pre .hd { color: var(--plum); font-weight: 650; }
.fxd-ex-pre:focus-visible, .fxd-ex-sheet:focus-visible { outline: 2px solid var(--plum); outline-offset: -2px; }
.fxd-ex-note { margin: .7rem 0 0; font-size: .86rem; line-height: 1.55; color: var(--mk-ink-soft); }
/* The sheets switch with display, not visibility: they sit inside a pane that is itself
   hidden with visibility, and a child set to visible would show through a hidden parent. */
.fxd-ex-sheet { display: none; overflow-x: auto; min-width: 0; }
.fxd-ex-sin:nth-of-type(1):checked ~ .fxd-ex-sheets .fxd-ex-sheet:nth-of-type(1),
.fxd-ex-sin:nth-of-type(2):checked ~ .fxd-ex-sheets .fxd-ex-sheet:nth-of-type(2) { display: block; }
.fxd-ex-grid { min-width: 100%; border-collapse: collapse; font-size: .78rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.fxd-ex-grid th, .fxd-ex-grid td { padding: .32rem .55rem; border: 1px solid #E3E1DC; text-align: left; white-space: nowrap; }
.fxd-ex-grid .cl, .fxd-ex-grid .rn { background: #F3F2EF; color: var(--mute); font-size: .7rem; font-weight: 500; text-align: center; }
.fxd-ex-grid .rn { width: 2.2rem; }
.fxd-ex-grid td.b { font-weight: 700; }
.fxd-ex-grid td.r { text-align: right; }
.fxd-ex-grid td.m { text-align: center; }
/* About this export: one wide column, wrapped (xlsx.ts: width 100, wrap: true). */
.fxd-ex-about { width: 100%; }
.fxd-ex-about td { white-space: normal; line-height: 1.5; }
.fxd-ex-stabs { display: flex; overflow-x: auto; padding: 0 .5rem; background: #F3F2EF; border-top: 1px solid var(--border); }
.fxd-ex-stabs label { padding: .42rem .9rem; border-right: 1px solid var(--border); font-size: .78rem; white-space: nowrap; color: var(--mk-ink-soft); cursor: pointer; }
.fxd-ex-stabs label:first-child { border-left: 1px solid var(--border); }
.fxd-ex-sin:nth-of-type(1):checked ~ .fxd-ex-stabs label:nth-of-type(1),
.fxd-ex-sin:nth-of-type(2):checked ~ .fxd-ex-stabs label:nth-of-type(2) { background: var(--surface); color: var(--ink); font-weight: 650; box-shadow: inset 0 -2px 0 var(--plum); }
.fxd-ex-sin:nth-of-type(1):focus-visible ~ .fxd-ex-stabs label:nth-of-type(1),
.fxd-ex-sin:nth-of-type(2):focus-visible ~ .fxd-ex-stabs label:nth-of-type(2) { outline: 2px solid var(--plum); outline-offset: -2px; }

/* drop alerts: the four checks, on the reader's own numbers */
.fxd-al { min-width: 0; border: 1px solid var(--mk-line); border-radius: 16px; background: var(--surface); padding: clamp(1rem, 2.4vw, 1.6rem); box-shadow: var(--sh-sm); }
.fxd-al-h { margin: 0 0 .35rem; }
.fxd-al-p { margin: 0 0 1rem; max-width: 72ch; color: var(--mk-ink-soft); line-height: 1.6; }
.fxd-al-t { width: 100%; border-collapse: collapse; font-size: .92rem; }
.fxd-al-t thead th { padding: .4rem .6rem; border-bottom: 1px solid var(--mk-line); text-align: left; font-size: .7rem; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); }
.fxd-al-t tbody tr { border-bottom: 1px solid var(--mk-line); }
.fxd-al-t tbody th { padding: .6rem; text-align: left; font-weight: 600; color: var(--ink); line-height: 1.35; }
.fxd-al-t td { padding: .45rem .6rem; vertical-align: middle; }
.fxd-al-t tr.fxd-al-r--floor th { padding-left: 1.4rem; font-size: .86rem; font-weight: 500; color: var(--mk-ink-soft); }
.fxd-al-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.fxd-al-f { display: block; }
.fxd-al-f input { width: 100%; max-width: 9rem; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--ink); font: inherit; font-variant-numeric: tabular-nums; }
.fxd-al-f input:focus-visible { outline: 2px solid var(--plum); outline-offset: 1px; border-color: var(--plum); }
.fxd-al-o { min-width: 13rem; line-height: 1.4; }
.fxd-al-chip { display: inline-block; padding: .16rem .55rem; border-radius: 7px; font-size: .78rem; font-weight: 650; line-height: 1.35; }
.fxd-al-chip.none { background: var(--surface-2); color: var(--mk-ink-soft); }
.fxd-al-chip.warn { background: rgba(214, 143, 36, .15); color: #85560C; }
.fxd-al-chip.crit { background: var(--fall-soft); color: var(--fall); }
.fxd-al-chip.met { background: var(--rise-soft); color: #13735F; }
.fxd-al-chip.floor, .fxd-al-chip.need { padding-left: 0; padding-right: 0; background: none; color: var(--mute); font-weight: 500; }
.fxd-al-ch { margin-left: .5rem; font-size: .86rem; white-space: nowrap; color: var(--mk-ink-soft); font-variant-numeric: tabular-nums; }
.fxd-al-say { margin-top: 1.1rem; padding: 1rem 1.1rem; border: 1px solid var(--tint-line); border-radius: 12px; background: var(--tint); }
.fxd-al-sh { margin: 0 0 .55rem; font-size: .92rem; font-weight: 650; color: var(--ink); }
.fxd-al-msgs { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.fxd-al-msgs li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .6rem; line-height: 1.5; }
.fxd-al-msgs li.fxd-al-nil { color: var(--mk-ink-soft); }
.fxd-al-m { min-width: 0; overflow-wrap: anywhere; color: var(--ink); font-weight: 550; }
.fxd-al-note { margin: .6rem 0 0; font-size: .8rem; color: var(--mute); }
@media (max-width: 560px) {
  .fxd-al-t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .fxd-al-t, .fxd-al-t tbody { display: block; }
  .fxd-al-t tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .45rem .6rem; padding: .85rem 0; }
  .fxd-al-t tbody th, .fxd-al-t tr.fxd-al-r--floor th { grid-column: 1 / -1; padding: 0; }
  .fxd-al-t td { display: block; padding: 0; }
  .fxd-al-t td.fxd-al-o { grid-column: 1 / -1; min-width: 0; }
  .fxd-al-k { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; display: block; margin-bottom: .2rem; font-size: .74rem; color: var(--mute); }
  .fxd-al-f input { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fxd-q-named, .fxd-cv-svg .band, .fxd-ex-pane { transition: none; }
}

/* ── named limits ─────────────────────────────────────────────────────────── */
.mk-limits { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .7rem; }
.mk-limits li { display: flex; gap: .6rem; align-items: flex-start; line-height: 1.6; color: var(--mk-ink-soft); }
/* MAUVE, not the red this product uses for a metric that fell. The only list with this
   class is the precision section on a feature page, and its content is what each figure
   IS, not a tally of failures. The red said "apology" over copy that is the opposite. */
.mk-limits li > svg { flex: none; margin-top: .28rem; color: var(--mauve); }

/* ── the third section, laid out as one axis ──────────────────────────────────
   The measured panel and the precision list are long prose, so each keeps its 78ch
   measure and sits centred; the arithmetic between them is short, comparable rows and
   takes the full width as two columns. Nothing leaves an empty strip down one edge. */
.mk-fp-s3 { max-width: 78ch; margin-inline: auto; }
.mk-fp-s3 .mk-measured { max-width: none; }
.mk-fp-arithw { margin-top: clamp(2.2rem, 4vw, 3rem); }
.mk-arith.mk-fp-arith { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; }
.mk-arith.mk-fp-arith .a:last-child:nth-child(odd) { grid-column: 1 / -1; }
.mk-fp-lim { margin-top: clamp(2.2rem, 4vw, 3rem); }
@media (max-width: 700px) {
  .mk-arith.mk-fp-arith { grid-template-columns: minmax(0, 1fr); }
}

/* Which half of Google's data feeds which part of the screen: two short lists, window
   first. Side by side where there is room, one above the other on a phone. */
.mk-fp-src { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 0 0 1rem; }
.mk-fp-src > div { border: 1px solid var(--mk-line); border-radius: 13px; background: var(--surface); padding: .9rem 1rem; min-width: 0; }
.mk-fp-src > .is-complete { border-top: 3px solid var(--rise); }
.mk-fp-src > .is-sample { border-top: 3px solid var(--mauve); }
.mk-fp-src h3 { margin: 0 0 .55rem; font-size: .96rem; font-weight: 650; line-height: 1.3; color: var(--ink); }
.mk-fp-src dl { margin: 0; display: grid; gap: .25rem; font-size: .86rem; line-height: 1.45; }
.mk-fp-src dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--mute); margin-top: .35rem; }
.mk-fp-src dt:first-child { margin-top: 0; }
.mk-fp-src dd { margin: 0; color: var(--mk-ink-soft); padding-left: .8rem; position: relative; overflow-wrap: anywhere; }
.mk-fp-src dd::before { content: ""; position: absolute; left: 0; top: .6em; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .55; }
@media (max-width: 700px) { .mk-fp-src { grid-template-columns: minmax(0, 1fr); } }

/* The window drawing: three bars on one track. The range you picked, what is stored,
   and the stretch the figures are measured over, which lies inside both. Drawn in CSS so
   its labels stay at text size at every width. */
.mk-fp-win {
  margin: 0 0 1rem; padding: .95rem 1.05rem .85rem; border: 1px solid var(--mk-line); border-radius: 13px;
  background: var(--surface); display: grid; gap: .5rem;
}
.mk-fp-win .r { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: .8rem; align-items: center; }
.mk-fp-win .l { font-size: .82rem; color: var(--mk-ink-soft); line-height: 1.3; }
.mk-fp-win .k { position: relative; height: 14px; border-radius: 4px; background: var(--surface-2);
  background-image: linear-gradient(to right, transparent 34%, var(--tint) 34%, var(--tint) 76%, transparent 76%); }
.mk-fp-win .k i { position: absolute; top: 0; bottom: 0; border-radius: 4px; box-sizing: border-box; }
.mk-fp-win .pick i { left: 10%; right: 24%; border: 2px solid var(--mauve); }
.mk-fp-win .store i { left: 34%; right: 0; background: repeating-linear-gradient(135deg, var(--tint-border) 0 5px, var(--surface) 5px 9px); border: 1px solid var(--tint-border); }
.mk-fp-win .meas i { left: 34%; right: 24%; background: var(--plum); }
.mk-fp-win .meas .l { color: var(--ink); font-weight: 650; }
.mk-fp-win figcaption { margin-top: .2rem; font-size: .84rem; color: var(--ink); font-weight: 560; line-height: 1.45; }
@media (max-width: 480px) {
  .mk-fp-win .r { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
}

/* ── related reading, when there is one item ─────────────────────────────────
   One row the shape of the previous/next pair below it rather than a card stretched to
   the wrap. */
.mk-fp-rel1 {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 1rem 1.2rem; align-items: center;
  border: 1px solid var(--mk-line); border-radius: 15px; background: var(--surface); padding: 1rem 1.2rem;
  box-shadow: 0 1px 2px rgba(42,34,48,.04), 0 10px 28px -14px rgba(42,34,48,.10);
  color: inherit; transition: border-color var(--t), box-shadow var(--t);
}
.mk-fp-rel1:hover { border-color: var(--tint-border); box-shadow: var(--sh-lg); color: inherit; }
.mk-fp-rel1:focus-visible { outline: 2px solid var(--mauve); outline-offset: 2px; }
.mk-fp-rel1 .ic {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--tint); color: var(--plum); border: 1px solid var(--tint-line);
}
.mk-fp-rel1 .tx { min-width: 0; }
.mk-fp-rel1 h3 { margin: 0 0 .25rem; font-size: clamp(1.02rem, 1.5vw, 1.14rem); font-weight: 650; line-height: 1.3; letter-spacing: -.012em; max-width: 62ch; }
.mk-fp-rel1 p { margin: 0; color: var(--mk-ink-soft); line-height: 1.55; font-size: .93rem; max-width: 62ch; }
.mk-fp-rel1 .more { display: inline-flex; align-items: center; gap: .3rem; font-size: .86rem; font-weight: 650; color: var(--plum); white-space: nowrap; }
.mk-fp-rel1 .more svg { transition: transform var(--t); }
.mk-fp-rel1:hover .more svg { transform: translateX(3px); }
@media (max-width: 700px) {
  .mk-fp-rel1 { grid-template-columns: 44px minmax(0, 1fr); align-items: start; }
  .mk-fp-rel1 .more { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .mk-fp-rel1 .more svg { transition: none; } .mk-fp-rel1:hover .more svg { transform: none; } }

/* ── prev / next, with the one-liner so a reader knows where they are going ── */
.mk-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: clamp(2rem,4vw,3rem); }
@media (max-width: 700px) {
  .mk-pn { grid-template-columns: 1fr; }
}
.mk-pn a { border: 1px solid var(--mk-line); border-radius: 13px; padding: 1rem 1.15rem; background: var(--surface); transition: border-color var(--t), box-shadow var(--t); color: inherit; }
.mk-pn a:hover { border-color: var(--tint-border); box-shadow: var(--sh-sm); color: inherit; }
.mk-pn .dir { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); font-weight: 700; }
/* Previous and next were distinguishable only by the word and the text-align. The arrow
   points the way each one goes, and moves that way on hover. */
.mk-pn .dir svg { transition: transform var(--t); }
/* One glyph for both, mirrored for Previous so it points back, and still travels back. */
.mk-pn a:not(.next) .dir svg { transform: scaleX(-1); }
.mk-pn a:hover .dir svg { transform: scaleX(-1) translateX(3px); }
.mk-pn a.next:hover .dir svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .mk-pn .dir svg { transition: none; } .mk-pn a:hover .dir svg { transform: scaleX(-1); } .mk-pn a.next:hover .dir svg { transform: none; } }
.mk-pn .nm { display: block; font-weight: 650; margin: .25rem 0 .2rem; color: var(--plum); }
.mk-pn .tg { display: block; font-size: .85rem; color: var(--mute); line-height: 1.5; }
.mk-pn a.next { text-align: right; }
/* One column: both cards read from the left, and the word and arrow carry the direction.
   After the base rule on purpose: same specificity, so the later one wins. */
@media (max-width: 700px) { .mk-pn a.next { text-align: left; } }

/* ── feature widgets: groups, sites, teams (views/partials/fx/, fxs-) ─────────
   Five blocks on three feature pages: a live grouping rule tester and a drawn "what a
   grouping is for" (groups), a two-calendar window and the three causes of Not in
   Search Console (all your sites), and one project seen by each role (team access).
   Every toggle is a visually hidden radio and a `:checked ~` selector, so both states
   stay in the DOM and the block reads with scripts off; only the rule tester needs
   public/js/mk-fx-sites.js, and with no script it shows its seeded result. */
.fxs-win-in, .fxs-role-in { position: absolute; width: 1px; height: 1px; opacity: 0; clip-path: inset(50%); pointer-events: none; }
.fxs-win, .fxs-role, .fxs-rt, .fxs-nig {
  position: relative; margin: 0; min-width: 0; border: 1px solid var(--mk-line); border-radius: 16px;
  background: var(--surface); padding: clamp(1rem, 2.4vw, 1.5rem); box-shadow: var(--sh-sm);
}
/* A legend does not take part in a fieldset's layout like a block; floated at full width
   it does, and the radios after it stay its siblings for `~`. */
.fxs-win-lg, .fxs-role-lg { float: left; width: 100%; padding: 0; margin: 0 0 .8rem; font-size: 1rem; font-weight: 650; letter-spacing: -.01em; color: var(--ink); line-height: 1.35; }
.fxs-win-seg, .fxs-role-seg { clear: both; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .25rem; padding: .25rem; background: var(--tint); border-radius: 11px; }
.fxs-win-seg label, .fxs-role-seg label {
  display: flex; align-items: center; justify-content: center; text-align: center; min-height: 2.5rem;
  padding: .4rem .7rem; border-radius: 9px; cursor: pointer; font-size: .86rem; font-weight: 600;
  color: var(--mk-ink-soft); line-height: 1.25; transition: background var(--t), color var(--t), box-shadow var(--t);
}
.fxs-win-seg label:hover, .fxs-role-seg label:hover { color: var(--ink); }
#fxs-win-sh:checked ~ .fxs-win-seg label[for="fxs-win-sh"],
#fxs-win-own:checked ~ .fxs-win-seg label[for="fxs-win-own"],
#fxs-role-view:checked ~ .fxs-role-seg label[for="fxs-role-view"],
#fxs-role-edit:checked ~ .fxs-role-seg label[for="fxs-role-edit"],
#fxs-role-owner:checked ~ .fxs-role-seg label[for="fxs-role-owner"] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-sm); }
#fxs-win-sh:focus-visible ~ .fxs-win-seg label[for="fxs-win-sh"],
#fxs-win-own:focus-visible ~ .fxs-win-seg label[for="fxs-win-own"],
#fxs-role-view:focus-visible ~ .fxs-role-seg label[for="fxs-role-view"],
#fxs-role-edit:focus-visible ~ .fxs-role-seg label[for="fxs-role-edit"],
#fxs-role-owner:focus-visible ~ .fxs-role-seg label[for="fxs-role-owner"] { outline: 2px solid var(--plum); outline-offset: 2px; }

/* all your sites, step 2: two sites, one window, placed two ways */
.fxs-win-tracks { margin-top: 1.15rem; display: grid; gap: .75rem; }
.fxs-win-site { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .8rem; align-items: center; }
.fxs-win-name b { display: block; font-size: .9rem; font-weight: 650; color: var(--ink); line-height: 1.3; }
.fxs-win-name span { display: block; font-size: .76rem; color: var(--mute); line-height: 1.35; }
.fxs-win-track { position: relative; padding: 5px 0; min-width: 0; }
.fxs-win-cells { display: flex; }
.fxs-win-cells i { flex: 1 1 0; min-width: 0; height: 22px; margin: 0 1px; border-radius: 3px; background: rgba(149,93,140,.38); }
.fxs-win-cells i.gap { background: repeating-linear-gradient(135deg, var(--border) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--border); }
.fxs-win-frame {
  position: absolute; top: 0; bottom: 0; left: calc(100% * 3 / 31); width: calc(100% * 28 / 31);
  border: 2px solid var(--plum); border-radius: 6px; background: rgba(106,74,110,.07); pointer-events: none;
  transition: left .45s cubic-bezier(.4,0,.2,1), border-color var(--t), background var(--t);
}
#fxs-win-own:checked ~ .fxs-win-tracks .is-b .fxs-win-frame { left: 0; }
/* Shared: Site B's window reaches past its data, and the three empty days inside it are
   the ones read as a fall. */
#fxs-win-sh:checked ~ .fxs-win-tracks .is-b .fxs-win-frame { border-color: var(--fall); background: var(--fall-soft); }
#fxs-win-sh:checked ~ .fxs-win-tracks .is-b .fxs-win-cells i.gap { background: repeating-linear-gradient(135deg, rgba(210,58,87,.55) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px rgba(210,58,87,.5); }
.fxs-win-axis { display: flex; justify-content: space-between; margin-left: calc(7.5rem + .8rem); font-size: .74rem; color: var(--mute); }
.fxs-win-key { list-style: none; margin: .8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: .78rem; color: var(--mk-ink-soft); }
.fxs-win-key li { display: inline-flex; align-items: center; gap: .4rem; }
.fxs-win-key .sw { width: 14px; height: 12px; border-radius: 3px; flex: none; }
.fxs-win-key .sw.on { background: rgba(149,93,140,.38); }
.fxs-win-key .sw.gap { background: repeating-linear-gradient(135deg, var(--border) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--border); }
.fxs-win-key .sw.frame { border: 2px solid var(--plum); background: rgba(106,74,110,.07); }
.fxs-win-out { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--mk-line); display: grid; gap: .4rem; }
.fxs-win-r { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--mk-ink-soft); font-variant-numeric: tabular-nums; padding-left: .7rem; border-left: 3px solid var(--border); }
.fxs-win-r.is-b { color: var(--ink); font-weight: 650; }
.fxs-win-r.is-sh { border-left-color: var(--fall); }
.fxs-win-r.is-own { border-left-color: var(--rise); }
.fxs-win-cap { margin: .2rem 0 0; font-size: .86rem; line-height: 1.55; color: var(--mk-ink-soft); }
.fxs-win-out .is-sh { display: none; }
#fxs-win-sh:checked ~ .fxs-win-out .is-sh { display: block; }
#fxs-win-sh:checked ~ .fxs-win-out .is-own { display: none; }
.fxs-win-note { margin: .7rem 0 0; font-size: .76rem; color: var(--mute); }
@media (max-width: 560px) {
  .fxs-win-site { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .fxs-win-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5rem; }
  .fxs-win-axis { margin-left: 0; }
  .fxs-win-cells i { height: 18px; margin: 0 .5px; }
}

/* all your sites, step 3: Not in Search Console, three causes and what clears each */
.fxs-nig-h { margin: 0; font-size: 1.05rem; font-weight: 650; letter-spacing: -.01em; color: var(--ink); line-height: 1.3; }
.fxs-nig-lead { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin-top: .6rem; }
.fxs-nig-lead p { flex: 1 1 22rem; margin: 0; font-size: .92rem; line-height: 1.6; color: var(--mk-ink-soft); }
.fxs-nig-badge {
  display: inline-flex; align-items: center; gap: .4rem; flex: none; white-space: nowrap;
  font-size: .78rem; font-weight: 600; color: var(--fall); background: var(--fall-soft);
  border-radius: 999px; padding: .2rem .7rem;
}
.fxs-nig-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fxs-nig-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; margin-top: 1.2rem; padding-bottom: .45rem; border-bottom: 1px solid var(--mk-line); font-size: .8rem; font-weight: 650; color: var(--mute); }
.fxs-nig-head span + span { padding-left: 1rem; }
.fxs-nig-list { list-style: none; margin: 0; padding: 0; }
.fxs-nig-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; padding: 1rem 0; border-bottom: 1px solid var(--mk-line); }
.fxs-nig-row:last-child { border-bottom: 0; padding-bottom: 0; }
.fxs-nig-c { display: flex; gap: .7rem; min-width: 0; }
.fxs-nig-c .n {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 7px; background: var(--tint); border: 1px solid var(--tint-line); color: var(--plum); font-size: .78rem; font-weight: 700;
}
.fxs-nig-c h5 { margin: .1rem 0 .25rem; font-size: .95rem; font-weight: 650; color: var(--ink); line-height: 1.35; }
.fxs-nig-c p, .fxs-nig-r p { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--mk-ink-soft); }
.fxs-nig-r { min-width: 0; padding-left: 1rem; border-left: 3px solid var(--rise-soft); }
.fxs-nig-r p { color: var(--ink); }
.fxs-nig-r .lab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 700px) {
  .fxs-nig-head { display: none; }
  .fxs-nig-row { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .fxs-nig-r { margin-left: calc(24px + .7rem); padding: .65rem .8rem; border-left: 0; border-radius: 10px; background: var(--tint); }
  .fxs-nig-r .lab { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; display: block; margin-bottom: .2rem; font-size: .76rem; font-weight: 650; color: var(--plum); }
}

/* team access, step 2: one project, three roles */
.fxs-role-mock { margin-top: 1rem; display: grid; gap: .55rem; padding: .7rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); font-size: .82rem; }
.fxs-role-bar { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.fxs-role-bar .fav { width: 16px; height: 16px; flex: none; border-radius: 4px; background: var(--grad); }
.fxs-role-bar b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; color: var(--ink); }
.fxs-role-btn { display: inline-flex; align-items: center; gap: .35rem; flex: none; padding: .3rem .6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: .78rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.fxs-role-card { min-width: 0; padding: .6rem .7rem; border: 1px solid var(--mk-line); border-radius: 10px; background: var(--surface); }
.fxs-role-ch { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 1.9rem; margin-bottom: .35rem; font-size: .8rem; font-weight: 650; color: var(--ink); }
.fxs-role-alert { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.fxs-role-alert .chip { flex: none; font-size: .7rem; font-weight: 650; color: #8A5A00; background: rgba(230,160,0,.16); border-radius: 999px; padding: .1rem .5rem; }
.fxs-role-alert .msg { flex: 1; min-width: 0; color: var(--mk-ink-soft); line-height: 1.4; }
.fxs-role-x { display: inline-flex; align-items: center; gap: .2rem; flex: none; padding: .25rem; border: 1px solid transparent; border-radius: 6px; color: var(--mute); }
.fxs-role-lock { display: none; flex: none; color: var(--fall); }
.fxs-role-toast { display: none; align-items: center; gap: .45rem; margin-top: .55rem; padding: .5rem .7rem; border-radius: 9px; background: var(--ink); color: #fff; font-size: .8rem; font-weight: 500; line-height: 1.4; }
.fxs-role-toast svg { flex: none; }
.fxs-role-mem { display: flex; align-items: center; gap: .5rem; min-width: 0; padding: .28rem 0; }
.fxs-role-mem + .fxs-role-mem { border-top: 1px solid var(--mk-line); }
.fxs-role-mem .ava { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: .68rem; font-weight: 700; }
.fxs-role-mem .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mk-ink-soft); }
.fxs-role-badge { flex: none; font-size: .72rem; font-weight: 600; color: var(--plum); background: var(--plum-soft); border-radius: 999px; padding: .12rem .5rem; white-space: nowrap; }
.fxs-role-sel { display: none; align-items: center; gap: .25rem; flex: none; padding: .15rem .45rem; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); font-size: .74rem; color: var(--ink); white-space: nowrap; }
.fxs-role-btn.is-inv { display: none; font-size: .74rem; padding: .22rem .55rem; }
#fxs-role-view:checked ~ .fxs-role-mock .fxs-role-lock { display: inline-block; }
#fxs-role-view:checked ~ .fxs-role-mock .fxs-role-btn.is-sync,
#fxs-role-view:checked ~ .fxs-role-mock .fxs-role-x { border-color: rgba(210,58,87,.45); }
#fxs-role-view:checked ~ .fxs-role-mock .fxs-role-toast { display: flex; }
#fxs-role-owner:checked ~ .fxs-role-mock .fxs-role-btn.is-inv { display: inline-flex; }
#fxs-role-owner:checked ~ .fxs-role-mock .fxs-role-badge.is-other { display: none; }
#fxs-role-owner:checked ~ .fxs-role-mock .fxs-role-sel.is-other { display: inline-flex; }
.fxs-role-out { margin-top: 1.1rem; }
.fxs-role-oh { margin: 0 0 .4rem; font-size: .92rem; font-weight: 650; color: var(--ink); }
.fxs-role-out dl { margin: 0; }
.fxs-role-o { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: .8rem; padding: .55rem 0; border-top: 1px solid var(--mk-line); }
.fxs-role-o dt { font-size: .86rem; font-weight: 600; color: var(--ink); line-height: 1.45; }
.fxs-role-o dd { display: none; margin: 0; padding-left: .9rem; position: relative; font-size: .86rem; line-height: 1.45; color: var(--mk-ink-soft); }
.fxs-role-o dd::before { content: ''; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: var(--rise); }
.fxs-role-o dd.is-no { color: var(--fall); }
.fxs-role-o dd.is-no::before { background: var(--fall); }
.fxs-role-o dd code { font-size: .82em; overflow-wrap: anywhere; }
#fxs-role-view:checked ~ .fxs-role-out dd.for-view,
#fxs-role-edit:checked ~ .fxs-role-out dd.for-edit,
#fxs-role-owner:checked ~ .fxs-role-out dd.for-owner { display: block; }
.fxs-role-cap { margin: .8rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--mute); }
@media (max-width: 560px) {
  .fxs-role-o { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .fxs-role-mem .who { font-size: .76rem; }
}

/* groups, after step 2: the rule tester */
.fxs-rt-head { max-width: 68ch; margin-bottom: 1.1rem; }
.fxs-rt-h { margin: 0 0 .35rem; font-size: 1.08rem; font-weight: 650; letter-spacing: -.01em; color: var(--ink); line-height: 1.3; }
.fxs-rt-head p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--mk-ink-soft); }
.fxs-rt-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 1.8rem); align-items: start; }
.fxs-rt-groups { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.fxs-rt-g { --c: var(--plum); min-width: 0; padding: .7rem .8rem; border: 1px solid var(--mk-line); border-left: 4px solid var(--c); border-radius: 12px; background: var(--surface-2); }
.fxs-rt-g.is-b { --c: var(--rose); }
.fxs-rt-g.is-moved { animation: fxs-rt-moved .6s ease-out; }
@keyframes fxs-rt-moved { from { box-shadow: 0 0 0 3px var(--tint-border); } to { box-shadow: 0 0 0 3px transparent; } }
.fxs-rt-gh { display: flex; align-items: center; gap: .5rem; min-height: 2rem; margin-bottom: .55rem; }
.fxs-rt-gh .dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--c); }
.fxs-rt-gh b { font-weight: 650; color: var(--ink); }
.fxs-rt-gh .ord { font-size: .72rem; font-weight: 700; color: var(--mute); padding: .05rem .35rem; border: 1px solid var(--mk-line); border-radius: 6px; background: var(--surface); }
.fxs-rt-mv { margin-left: auto; display: flex; gap: .3rem; }
.fxs-rt-mv button { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); cursor: pointer; }
.fxs-rt-mv button:hover:not(:disabled) { border-color: var(--tint-border); background: var(--tint); }
.fxs-rt-mv button:disabled { opacity: .35; cursor: default; }
.fxs-rt:not(.is-live) .fxs-rt-mv { display: none; }
.fxs-rt-rule {
  min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: .4rem;
  grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr) 40px;
  grid-template-areas: "n dir type type" ". val val aa" ". err err err";
}
.fxs-rt-rule + .fxs-rt-rule { margin-top: .6rem; padding-top: .6rem; border-top: 1px dashed var(--mk-line); }
.fxs-rt-rn { grid-area: n; font-size: .74rem; font-weight: 700; color: var(--mute); text-align: center; }
.fxs-rt-dir { grid-area: dir; }
.fxs-rt-type { grid-area: type; }
.fxs-rt-val { grid-area: val; }
.fxs-rt-aa { grid-area: aa; }
.fxs-rt-err { grid-area: err; margin: 0; font-size: .78rem; line-height: 1.45; color: var(--fall); overflow-wrap: anywhere; }
.fxs-rt-rule select, .fxs-rt-rule .fxs-rt-val {
  width: 100%; min-width: 0; height: 36px; padding: 0 .5rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: .86rem;
}
.fxs-rt-rule .fxs-rt-val { font-family: var(--font-mono); font-size: .84rem; }
.fxs-rt-rule select:focus-visible, .fxs-rt-rule .fxs-rt-val:focus-visible, .fxs-rt-mv button:focus-visible { outline: 2px solid var(--plum); outline-offset: 1px; }
.fxs-rt-rule .fxs-rt-val[aria-invalid="true"] { border-color: var(--fall); }
.fxs-rt-rule.is-neg .fxs-rt-dir { color: var(--fall); border-color: rgba(210,58,87,.45); }
/* No script: the rule reads as a rule, not as a form that does nothing. */
.fxs-rt-rule select:disabled, .fxs-rt-rule .fxs-rt-val:disabled { opacity: 1; background: var(--surface-2); cursor: default; }
.fxs-rt-aa { position: relative; display: grid; place-items: center; height: 36px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: .82rem; font-weight: 700; color: var(--mute); cursor: pointer; transition: background var(--t), color var(--t); }
.fxs-rt-aa input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.fxs-rt-aa:has(input:checked) { background: var(--plum); border-color: var(--plum); color: #fff; }
.fxs-rt-aa:has(input:focus-visible) { outline: 2px solid var(--plum); outline-offset: 1px; }
.fxs-rt-aa:has(input:disabled) { background: var(--surface-2); cursor: default; }
.fxs-rt-fixed { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 0 calc(22px + .4rem); font-size: .84rem; }
.fxs-rt-fixed span, .fxs-rt-fixed code { padding: .32rem .55rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); line-height: 1.3; }
.fxs-rt-fixed code { font-family: var(--font-mono); font-size: .82rem; }
.fxs-rt-first { margin: .7rem 0 0; font-size: .82rem; line-height: 1.5; color: var(--mute); }
.fxs-rt-count { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: 0 0 .6rem; font-size: .84rem; color: var(--mk-ink-soft); }
.fxs-rt-count .c { display: inline-flex; align-items: center; gap: .35rem; }
.fxs-rt-count .c i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.fxs-rt-count .c b { color: var(--ink); font-variant-numeric: tabular-nums; }
.fxs-rt-count .is-a { --c: var(--plum); }
.fxs-rt-count .is-b { --c: var(--rose); }
.fxs-rt-count .is-o { --c: var(--border); }
.fxs-rt-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--mk-line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.fxs-rt-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .6rem; align-items: baseline; padding: .34rem .7rem; border-top: 1px solid var(--mk-line); font-size: .84rem; line-height: 1.4; transition: background .2s ease; }
.fxs-rt-list li:first-child { border-top: 0; }
.fxs-rt-list .q { min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.fxs-rt-list .t { font-size: .74rem; font-weight: 650; color: var(--mute); white-space: nowrap; }
.fxs-rt-list .n { grid-column: 1 / -1; font-size: .74rem; color: var(--mute); }
.fxs-rt-list .n:empty { display: none; }
.fxs-rt-list li.g-a { background: rgba(106,74,110,.08); box-shadow: inset 3px 0 0 var(--plum); }
.fxs-rt-list li.g-a .t { color: var(--plum); }
.fxs-rt-list li.g-b { background: rgba(221,115,130,.11); box-shadow: inset 3px 0 0 var(--rose); }
.fxs-rt-list li.g-b .t { color: #A8425A; }
.fxs-rt-note { margin: .9rem 0 0; font-size: .76rem; color: var(--mute); }
@media (max-width: 860px) {
  .fxs-rt-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .fxs-rt-rule { grid-template-columns: 18px minmax(0, 1fr) 40px; grid-template-areas: "n dir dir" ". type type" ". val aa" ". err err"; }
}

/* groups, after step 4: what a grouping is for */
.fxs-use-head { max-width: 68ch; }
.fxs-use-h { margin: 0 0 .5rem; font-size: clamp(1.15rem, 2.2vw, 1.45rem); font-weight: 650; letter-spacing: -.015em; line-height: 1.22; color: var(--ink); }
.fxs-use-head p { margin: 0; line-height: 1.65; color: var(--mk-ink-soft); }
.fxs-use-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.fxs-use-p { min-width: 0; margin: 0; padding: .9rem 1rem .6rem; border: 1px solid var(--mk-line); border-radius: 14px; background: var(--surface); }
.fxs-use-p.is-before { background: var(--surface-2); }
.fxs-use-p figcaption > b { display: block; margin-bottom: .35rem; font-size: .88rem; font-weight: 650; color: var(--ink); }
.fxs-use-p ul { list-style: none; margin: 0 0 .3rem; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem .9rem; }
.fxs-use-p li { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--mk-ink-soft); }
.fxs-use-p li i { width: 14px; height: 3px; border-radius: 2px; background: var(--lc); }
.fxs-use-p li b { font-weight: 700; color: var(--lc); font-variant-numeric: tabular-nums; }
.fxs-use-p svg { display: block; width: 100%; height: auto; overflow: visible; }
.fxs-use-p .gr { stroke: var(--mk-line); stroke-width: 1; }
.fxs-use-p .base { stroke: var(--border); stroke-width: 1; }
.fxs-use-p .ax { font-size: 10px; fill: var(--mute); }
.fxs-use-p .ln { fill: none; stroke: var(--lc); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.fxs-use-p .pt { fill: var(--lc); }
.fxs-use .l-total { --lc: var(--ink); }
.fxs-use .l-brand { --lc: #6A4A6E; }
.fxs-use .l-non { --lc: #955D8C; }
.fxs-use .l-fall { --lc: var(--fall); }
.fxs-use .l-rise { --lc: var(--rise); }
.fxs-use-note { margin: .7rem 0 0; font-size: .78rem; color: var(--mute); }
.fxs-use-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.fxs-use-links a { display: grid; gap: .3rem; align-content: start; padding: 1rem 1.1rem; border: 1px solid var(--mk-line); border-radius: 13px; background: var(--surface); color: inherit; transition: border-color var(--t), box-shadow var(--t); }
.fxs-use-links a:hover { border-color: var(--tint-border); box-shadow: var(--sh-sm); color: inherit; }
.fxs-use-links a:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }
.fxs-use-links b { font-weight: 650; color: var(--plum); }
.fxs-use-links span { font-size: .9rem; line-height: 1.6; color: var(--mk-ink-soft); }
@media (max-width: 860px) {
  .fxs-use-panels { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .fxs-use-links { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .fxs-win-frame, .fxs-win-seg label, .fxs-role-seg label, .fxs-rt-list li, .fxs-rt-aa { transition: none; }
  .fxs-rt-g.is-moved { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Blog
   ══════════════════════════════════════════════════════════════════════════════ */
/* A dek running the full 1058px of the wrap is ~118 characters a line; the card holds
   it to the same measure the articles use. */
.mk-posts { display: grid; gap: 1.1rem; }
.mk-posts .mk-card > h2, .mk-posts .mk-card > p { max-width: 72ch; }
/* Each post's own measured number, set in the display face with one line saying what it
   counts. Held to 72ch, the text left a third of every 1,100px card empty; from 900px that
   third is this column. Below 900px it is a tinted strip between the dek and the link. */
.mk-postcard-fig {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .6rem; margin-top: .95rem;
  padding: .7rem .9rem; border-radius: 11px; background: var(--tint); border: 1px solid var(--tint-line);
}
.mk-postcard-fig .fig {
  flex: none; font-family: var(--font-display); font-size: 1.35rem; font-weight: 680; line-height: 1.1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--plum);
}
.mk-postcard-fig .lbl { min-width: 0; font-size: .84rem; line-height: 1.45; color: var(--mk-ink-soft); }
@media (min-width: 900px) {
  .mk-posts .mk-postcard {
    display: grid; grid-template-columns: minmax(0, 1fr) 220px; grid-template-rows: auto auto auto 1fr;
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
  }
  .mk-posts .mk-postcard > :not(.mk-postcard-fig) { grid-column: 1; }
  .mk-posts .mk-postcard > .more { justify-self: start; }
  .mk-posts .mk-postcard > .mk-postcard-fig {
    grid-column: 2; grid-row: 1 / -1; align-self: center; margin: 0;
    flex-direction: column; align-items: flex-start; gap: .4rem; padding: 1.05rem 1.15rem;
  }
  .mk-postcard-fig .fig { font-size: 2.2rem; }
}
.mk-post-card { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 1.1rem; align-items: start; }
@media (max-width: 560px) { .mk-post-card { grid-template-columns: 1fr; } }
.mk-post-meta { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; font-size: .8rem; color: var(--mute); }
.mk-topics { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.mk-topics a {
  font-size: .87rem; font-weight: 550; padding: .35rem .8rem; border-radius: 999px;
  border: 1px solid var(--mk-line); background: var(--surface); color: var(--mk-ink-soft);
}
.mk-topics a:hover { border-color: var(--tint-border); background: var(--tint); color: var(--plum); }
.mk-topics a[aria-current] { border-color: var(--tint-border); background: var(--plum-soft); color: var(--plum-700); font-weight: 650; }
/* The last section of an audience page: on a phone the two nearest audiences stay cards and
   the rest become one row of links, which took about 500px of cards written for other
   readers off every page. Wide screens keep all five cards. */
.mk-audmore { display: none; }
@media (max-width: 640px) {
  a.mk-card.mk-audsib--far { display: none; }
  .mk-audmore { display: block; margin-top: .9rem; }
}
/* A topic page lists the guides that work the same ground, under its posts: one bordered
   list of rows rather than a card grid, because there are one to three of them and a grid
   of one is a card stretched across the page. */
.mk-topicguides { margin-top: clamp(2.2rem, 4.5vw, 2.8rem); }
.mk-topicguides > h2 { margin: 0 0 .85rem; }
.mk-topicguides ul {
  list-style: none; margin: 0; padding: 0; overflow: hidden;
  border: 1px solid var(--mk-line); border-radius: 15px; background: var(--surface);
}
.mk-topicguides li + li { border-top: 1px solid var(--mk-line); }
.mk-topicguides a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .95rem; align-items: center;
  padding: 1rem clamp(1rem, 2.4vw, 1.4rem); color: inherit; transition: background var(--t);
}
.mk-topicguides a:hover { background: var(--tint); color: inherit; }
.mk-topicguides a:focus-visible { outline: 2px solid var(--mauve); outline-offset: -3px; border-radius: 14px; }
.mk-topicguides .ic {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: var(--tint); color: var(--plum); border: 1px solid var(--tint-line);
}
.mk-topicguides .tx { display: grid; gap: .2rem; min-width: 0; }
.mk-topicguides .tx > strong {
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 650; line-height: 1.35;
  letter-spacing: -.012em; color: var(--ink);
}
.mk-topicguides .tx > span { max-width: 72ch; font-size: .88rem; line-height: 1.55; color: var(--mk-ink-soft); }
.mk-topicguides a > .ic-svg { color: var(--plum); transition: transform var(--t); }
.mk-topicguides a:hover > .ic-svg { transform: translateX(3px); }
@media (max-width: 560px) {
  .mk-topicguides a { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .8rem; }
  .mk-topicguides a > .ic-svg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-topicguides a, .mk-topicguides a > .ic-svg { transition: none; }
}
.mk-postbody { max-width: 72ch; }
.mk-postbody .mk-shot { margin: 1.8rem 0; }

/* ══════════════════════════════════════════════════════════════════════════════
   Comparison index + accuracy page
   ══════════════════════════════════════════════════════════════════════════════ */
.mk-refuse { display: grid; gap: 1rem; }
.mk-refuse .r {
  border: 1px solid var(--mk-line); border-left: 3px solid var(--mauve); border-radius: 0 13px 13px 0;
  background: var(--surface); padding: 1.05rem 1.2rem;
}
.mk-refuse .when { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--mute); }
.mk-refuse .says { font-family: var(--font-mono); font-size: .88rem; color: var(--ink); margin: .4rem 0 .5rem; line-height: 1.55; }
.mk-refuse .why { font-size: .89rem; color: var(--mk-ink-soft); line-height: 1.6; margin: 0; }

/* The free plan's exclusions. Same list shape so the eye reads it as one column, muted
   and marked absent so a limit is never mistaken for a feature. */
.mk-nots { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line, #ECEEF1); }
.mk-nots li { color: var(--muted, #6B7280); }
.mk-nots li svg { color: var(--muted, #6B7280); opacity: .75; }

/* ---------- pricing: the first screen IS the prices ----------
   Everything above the cards is delay. The heading is capped so it never runs past two
   lines, the lede is one, and the section carries its own tight padding instead of the
   page default — which together bring the cards from 740px down to roughly 300. */
.pricing-top { padding-top: clamp(1.6rem, 2.8vw, 2.2rem); padding-bottom: clamp(2.6rem, 4.5vw, 4rem); }

/* "Why it matters", one item per changed row, in the rows' order: icon disc, the heading
   and the sentence. The heading names the row, so there is no label over it. Lighter
   than six framed cards, so the page does not say the same thing in two visual languages
   one screen apart. */
/* THREE ITEMS, NEVER TWO PLUS ONE. Two columns left the third item either half-width and
   stranded or stretched across the page with a 150-character first line under a heading
   that sat alone at the left. So: three equal columns from 1000px, with the icon above
   the text so each column's measure is the whole column; one item per row from 721 to
   999px, each paragraph held to a measure; one column on a phone (the 720px rule).
   .mk-diffs is a FLEX row, so it is the flex-basis that moves, never a grid track. */
.mk-diffs { --gx: clamp(1.5rem, 4vw, 3rem); list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: clamp(1.4rem, 3vw, 2rem) var(--gx); }
.mk-diffs > li { flex: 1 1 calc((100% - var(--gx)) / 2); min-width: 0; }
.mk-diffs li { display: flex; gap: 1rem; align-items: flex-start; min-width: 0; }
.mk-diffs .ic {
  flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--tint); color: var(--plum); border: 1px solid var(--tint-line);
}
.mk-diffs .mk-h3 { margin: 0 0 .35rem; }
.mk-diffs p { margin: 0; color: var(--mk-ink-soft); line-height: 1.62; font-size: .95rem; }
@media (min-width: 1000px) {
  .mk-diffs > li { flex-basis: calc((100% - 2 * var(--gx)) / 3); flex-direction: column; gap: .85rem; }
}
@media (min-width: 721px) and (max-width: 999px) {
  .mk-diffs > li { flex-basis: 100%; }
  .mk-diffs p { max-width: 72ch; }
}
@media (max-width: 720px) {
  .mk-diffs > li { flex-basis: 100%; }
  .mk-diffs .ic { width: 34px; height: 34px; }
}
/* The two claims no plan row makes (the drop alert, deleting your own account), as small
   print under the three: two columns, one on a phone. A hairline says they are a coda to
   the three, not a fourth and fifth item. .mk-checks supplies the tick discs. */
.mk-checks.pr-also {
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem clamp(1.5rem, 4vw, 3rem);
  margin: clamp(1.6rem, 3vw, 2.2rem) 0 0; padding-top: clamp(1.1rem, 2vw, 1.4rem);
  border-top: 1px solid var(--mk-line); font-size: .93rem;
}
@media (max-width: 720px) { .mk-checks.pr-also { grid-template-columns: minmax(0, 1fr); } }
/* "Your whole site, on every screen": the card is as wide as its own text and centred
   under the section, rather than full width with its paragraph stopping at 68ch and the
   right third of the card empty. */
.mk-not {
  flex-direction: row; gap: 1rem; align-items: flex-start; margin: 2rem auto 0; max-width: 46rem;
  background: var(--tint); border-color: var(--tint-border);
}
.mk-not .ic { margin: 0; background: var(--surface); color: var(--rise); }
.mk-not p { max-width: 68ch; }
@media (max-width: 600px) { .mk-not { flex-direction: column; } }

/* screen-reader-only text — the site had no such utility before the plan rows needed one */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Under the cards: the note about what is charged today, and the way to a bigger deal.
   Both are cards in the same family as the plans, not a callout and a paragraph. */
/* The launch ribbon: one line under the header while LAUNCH_FREE_PLAN=1. */
.mk-launchbar { background: var(--tint); border-bottom: 1px solid var(--tint-line); color: var(--plum); font-size: .9rem; }
.mk-launchbar .mk-wrap { display: flex; align-items: center; gap: .5rem; padding: .5rem 1rem; flex-wrap: wrap; }
.mk-launchbar .sep { opacity: .5; }
.mk-launchbar .more { opacity: .85; }
/* On a phone the qualifier wrapped to two more lines and spent 72px of the first screen
   on a secondary message, pushing the headline down. The offer is the half that has to
   be read; the terms of it are on /pricing, one tap away. */
@media (max-width: 640px) {
  .mk-launchbar .sep, .mk-launchbar .more { display: none; }
  .mk-launchbar .mk-wrap { padding: .45rem 1rem; }
}
.mk-split--top { align-items: start; }

.mk-devnote {
  display: flex; gap: .95rem; align-items: flex-start; margin: 1.6rem 0 0;
  border: 1px solid var(--tint-border); border-radius: 18px; background: var(--surface);
  box-shadow: 0 1px 2px rgba(42,34,48,.04), 0 10px 28px -14px rgba(42,34,48,.10); padding: 1rem 1.2rem;
}
.mk-devnote .ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--tint); color: var(--plum); border: 1px solid var(--tint-line); }
.mk-devnote p { margin: 0; font-size: .93rem; align-self: center; }
.mk-ent { flex-direction: row; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 1.4rem; border-radius: 18px; padding: clamp(1.25rem, 2.4vw, 1.6rem) clamp(1.25rem, 2.6vw, 1.9rem); }
.mk-ent .mk-h3 { margin-bottom: .3rem; }
.mk-ent p { font-size: .93rem; max-width: 66ch; }
.mk-ent .btn { flex: none; }
@media (max-width: 720px) { .mk-ent { flex-direction: column; align-items: stretch; } .mk-ent .btn { justify-content: center; } }

/* The three objections that stop a signup, as chips under the buttons. */
ul.mk-trust {
  list-style: none; margin: 1.7rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem .7rem;
  font-size: .87rem; color: var(--mk-ink-soft);
}
ul.mk-trust li {
  display: inline-flex; align-items: center; gap: .5rem; font-weight: 560;
  background: var(--surface); border: 1px solid var(--mk-line); border-radius: 999px;
  padding: .42rem .95rem .42rem .55rem; box-shadow: var(--sh-sm);
}
ul.mk-trust li > svg { width: 22px; height: 22px; padding: 5px; box-sizing: border-box; border-radius: 50%; background: var(--rise-soft); color: var(--rise); flex: none; }
@media (max-width: 560px) { ul.mk-trust { gap: .45rem .5rem; font-size: .82rem; } ul.mk-trust li { padding: .36rem .8rem .36rem .45rem; } }
/* The phone form of the trust line (see .mk-trust above): text with a check, not chips. */
@media (max-width: 520px) {
  ul.mk-trust { gap: .3rem .9rem; }
  ul.mk-trust li { background: none; border: 0; box-shadow: none; padding: 0; }
}

/* ── pricing: the thirteen, as a grid ────────────────────────────────────────
   Compact on purpose. This is the "for what" beside a price, not the pitch: a name,
   the question it answers, and a way through to the page that explains it. The icon
   sits beside the text rather than above it, which is what keeps thirteen cards to a
   height a reader can take in at once. */
.pr-feats { margin-top: clamp(1.4rem, 2.5vw, 2rem); }
.pr-feat { flex-direction: row; gap: .75rem; align-items: flex-start;
  padding: clamp(.9rem, 1.8vw, 1.1rem); }
.pr-feat .ic { width: 34px; height: 34px; border-radius: 10px; margin-bottom: 0; }
.pr-feat .tx { min-width: 0; }
.pr-feat h3 { margin: 0 0 .2rem; font-size: .98rem; }
.pr-feat p { font-size: .87rem; line-height: 1.5; color: var(--mk-ink-soft); text-wrap: pretty; }
/* A link that looks like one: the name in the link colour, and a chevron pinned to the
   right edge (the down chevron, turned). Muted at rest, plum and nudged on hover and on
   keyboard focus, so a phone reader who cannot hover still sees where each card goes. */
.pr-feat .tx { flex: 1 1 auto; }
.pr-feat h3 { color: var(--plum); }
.pr-feat-go {
  flex: none; align-self: center; margin-left: auto; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%; color: var(--mute); opacity: .7;
  transition: color var(--t), opacity var(--t), transform var(--t), background var(--t);
}
.pr-feat-go svg { transform: rotate(-90deg); }
a.pr-feat:hover .pr-feat-go, a.pr-feat:focus-visible .pr-feat-go {
  color: var(--plum); opacity: 1; background: var(--tint); transform: translateX(2px);
}
a.pr-feat:focus-visible { outline: 2px solid var(--mauve); outline-offset: 3px; border-radius: 15px; }
@media (prefers-reduced-motion: reduce) {
  .pr-feat-go { transition: none; }
  a.pr-feat:hover .pr-feat-go, a.pr-feat:focus-visible .pr-feat-go { transform: none; }
}

/* ── long-form: rhythm without a word changed ────────────────────────────────
   The posts and guides are long because that is what they are for, and the length was
   the problem only in the way it was set: at 1180px the worst of them rendered 6,140px
   of paragraphs at one weight, with its numbers in the same grey as the sentence. The
   three rules below are structural and typographic; src/domain/marketing/prose.ts adds
   the hooks without adding text, and scripts/verify-prose.mjs asserts that. */

/* The first paragraph of a section opens it. One step of size and ink is enough: a
   section now has a beginning a skimming eye can find, and the rest reads as before. */
.mk-article .lead-p { font-size: 1.07rem; line-height: 1.68; color: var(--ink); }
/* The takeaway box keeps its own voice: enriched takeaway HTML marks its first paragraph
   as a lead, and that must not make it larger or darker than the paragraphs after it. */
.mk-article .mk-callout .lead-p { font-size: inherit; line-height: 1.65; color: var(--mk-ink-soft); }

/* A figure, set in the display face. These are the sentences' evidence and they were
   invisible inside them; this is a change of typeface and colour, never of content. */
.mk-article .fig {
  font-family: var(--font-display); font-weight: 620; font-variant-numeric: tabular-nums;
  color: var(--plum); letter-spacing: -.01em;
}
/* /about's three defects, printed against the truth (the table lives in the
   mkt.about.s4.p strings). What the screen showed is struck through in grey, what was true
   keeps the figure colour, so the row reads left to right as a correction. */
.mk-article .ab-fix td:nth-child(2) .fig { color: var(--mute); text-decoration: line-through; text-decoration-color: var(--fall); text-decoration-thickness: 1.5px; }
.mk-article .ab-fix td:nth-child(1) { color: var(--ink); font-weight: 560; }
.mk-article .ab-fix td { color: var(--mk-ink-soft); }
@media (max-width: 520px) { .mk-article .ab-fix { font-size: .86rem; } .mk-article .ab-fix th, .mk-article .ab-fix td { padding: .5rem .55rem; } }

/* BEATS: a run of paragraphs that each opened with a bolded lead-in was already a list.
   Numbered, hairline-separated, with the lead-in promoted to its own line, it reads as
   four changes rather than as four more paragraphs. */
/* `.mk-article ol` sets a 1.3rem padding-left for the numbers it renders itself, and it
   is one specificity point heavier than a bare `.mk-beats`, so the card list inherited a
   gutter and every card sat inset from its own container. Scoped to the article, which is
   the only place this list exists. */
.mk-article .mk-beats { list-style: none; counter-reset: beat; margin: 1.5rem 0; padding: 0;
  display: grid; gap: 0;
  background: var(--surface); border: 1px solid var(--mk-line); border-radius: 15px; overflow: hidden; }
.mk-article .mk-beats li { counter-increment: beat; background: var(--surface); margin: 0;
  padding: clamp(1rem, 2.2vw, 1.35rem) clamp(1rem, 2.4vw, 1.5rem); }
/* The hairlines are drawn on the items, not by a grey list showing through 1px gaps: the
   reveal hides each item until it scrolls in, and a grey list behind hidden items was a
   solid grey slab the height of the list. Now an item not yet arrived is white space
   inside the same bordered box. */
.mk-article .mk-beats li + li { border-top: 1px solid var(--mk-line); }
.mk-article .mk-beats h3 { display: flex; gap: .6rem; align-items: baseline; margin: 0 0 .45rem;
  font-size: 1.02rem; font-weight: 650; letter-spacing: -.012em; color: var(--ink); }
.mk-article .mk-beats h3::before {
  content: counter(beat); flex: none; width: 24px; height: 24px; border-radius: 8px;
  display: grid; place-items: center; align-self: flex-start; margin-top: .05rem;
  background: var(--tint); border: 1px solid var(--tint-line); color: var(--plum);
  font-family: var(--font-display); font-size: .78rem; font-weight: 700;
}
.mk-article .mk-beats p { margin: 0; color: var(--mk-ink-soft); line-height: 1.65; }

/* ── long-form: the reading chrome ───────────────────────────────────────────
   Drawn by public/js/marketing.js and meaningless without a viewport, so none of it
   is rendered by the server and none of it carries content. */
.mk-progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60; pointer-events: none;
  opacity: 0; transition: opacity var(--t);
}
.mk-progress.is-on { opacity: 1; }
.mk-progress > i { display: block; height: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: var(--grad); }

/* The section you are in, in the table of contents. */
.mk-toc a[aria-current="true"] { color: var(--plum); font-weight: 620; }
.mk-toc a[aria-current="true"]::before { opacity: 1; transform: scaleY(1); }
.mk-toc a::before {
  content: ''; position: absolute; left: -11px; top: .15em; bottom: .15em; width: 2px;
  border-radius: 2px; background: var(--grad); opacity: 0; transform: scaleY(.4);
  transition: opacity var(--t), transform var(--t);
}
.mk-toc li { position: relative; }
.mk-toc a { position: relative; }

/* ARRIVAL. `will-reveal` is added by the script, so a reader with no JavaScript, or one
   who has asked for reduced motion, never meets a hidden element: the server's own
   output is the visible state. Composed blocks only, never a paragraph. */
html.js-reveal .will-reveal { opacity: 0; transform: translateY(10px); }
html.js-reveal .will-reveal.is-revealed {
  opacity: 1; transform: none;
  transition: opacity .45s cubic-bezier(.22,.61,.36,1), transform .45s cubic-bezier(.22,.61,.36,1);
}
/* The stagger inside one group is set by the script, as an inline delay per element,
   because it depends on the element's position among its siblings. */
@media (prefers-reduced-motion: reduce) {
  html.js-reveal .will-reveal { opacity: 1; transform: none; transition: none; }
}

/* A figure outside an article: same idea, quieter, because these blocks are already
   panels and the page does not need two levels of emphasis fighting inside one. */
.mk-measured .fig, .mk-arith .fig, .mk-limits .fig {
  font-family: var(--font-display); font-weight: 620; font-variant-numeric: tabular-nums;
  color: var(--ink); letter-spacing: -.01em;
}

/* SAID: the product's own caption, quoted inside a sentence. The measured panels are
   built out of these (77 of them in the Ukrainian set) and set every one in the same
   grey as the prose carrying it, which is how a 2,566-character panel ends up with no
   landmarks at all.

   Colour and weight, NOT a chip. The first version gave these a tinted background, and
   two things went wrong at once: the panel they live in is already tinted, so the chip
   was invisible, and its horizontal padding indented every line a long quotation wrapped
   onto, which left a ragged left edge down the paragraph. These run to a full sentence
   more often than not, so anything boxed has to survive wrapping, and colour does.
   Plum on the panel tint is 6.9:1, so a whole sentence can be set in it. */
.mk-said { color: var(--plum); font-weight: 540; }

/* MEASURED: now several paragraphs rather than one 2,566-character block, so the panel
   needs the air between them that a single paragraph never needed. */
.mk-measured { gap: .8rem; }
.mk-measured .lead-p { color: var(--ink); font-size: 1.02rem; line-height: 1.62; }

/* POINTS: a bulleted list whose every item named a thing and then explained it. The
   marker moves out of the text flow and becomes a rule down the side, so the name of
   each thing can be a line of its own instead of a bold run inside a bullet. */
.mk-article .mk-points { list-style: none; margin: 1.35rem 0; padding: 0; display: grid; gap: .8rem; }
.mk-article .mk-points li {
  position: relative; margin: 0; padding: .1rem 0 .1rem 1.1rem;
  border-left: 2px solid var(--tint-border); border-radius: 2px;
}
.mk-article .mk-points h3 {
  margin: 0 0 .25rem; font-size: 1rem; font-weight: 640; letter-spacing: -.01em; color: var(--ink);
}
.mk-article .mk-points p { margin: 0; color: var(--mk-ink-soft); line-height: 1.65; }

/* ── the same window, read twice ──────────────────────────────────────────────
   Radios and `:checked ~`, the pattern the feature tabs already use, so the control
   needs no script: with JavaScript off the first reading is on screen and every reading
   is in the DOM. Nothing is hidden from a reader without scripts or from a crawler.

   Up to five readings. The home page reads one window twice; the guides use the same
   control for a three-way case picker and a five-way builder picker, so the tab row takes
   as many equal columns as it has labels, and the per-reading rules run to five.

   The CLOSED panes are taken out of the height, not only out of sight. They used to be
   stacked in one grid cell at full height, which held the card at the height of its
   tallest reading: on the home page that left a 90px band of empty card under the short
   reading, which read as a picture that had failed to load. Now the card ends under the
   reading that is open. */
.mx { border: 1px solid var(--mk-line); border-radius: 16px; background: var(--surface); padding: clamp(1rem,2.2vw,1.35rem); box-shadow: var(--sh-sm); }
.mx-in { position: absolute; width: 1px; height: 1px; opacity: 0; clip-path: inset(50%); }
.mx-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .25rem; padding: .25rem; background: var(--tint); border-radius: 11px; }
.mx-tabs label {
  display: flex; align-items: center; justify-content: center; min-height: 2.25rem;
  text-align: center; padding: .5rem .5rem; border-radius: 9px; cursor: pointer;
  font-size: .86rem; font-weight: 600; color: var(--mk-ink-soft); line-height: 1.25;
  transition: background var(--t), color var(--t), box-shadow var(--t);
}
.mx-in:nth-of-type(1):checked ~ .mx-tabs label:nth-of-type(1),
.mx-in:nth-of-type(2):checked ~ .mx-tabs label:nth-of-type(2),
.mx-in:nth-of-type(3):checked ~ .mx-tabs label:nth-of-type(3),
.mx-in:nth-of-type(4):checked ~ .mx-tabs label:nth-of-type(4),
.mx-in:nth-of-type(5):checked ~ .mx-tabs label:nth-of-type(5) {
  background: var(--surface); color: var(--ink); box-shadow: var(--sh-sm);
}
.mx-in:nth-of-type(1):focus-visible ~ .mx-tabs label:nth-of-type(1),
.mx-in:nth-of-type(2):focus-visible ~ .mx-tabs label:nth-of-type(2),
.mx-in:nth-of-type(3):focus-visible ~ .mx-tabs label:nth-of-type(3),
.mx-in:nth-of-type(4):focus-visible ~ .mx-tabs label:nth-of-type(4),
.mx-in:nth-of-type(5):focus-visible ~ .mx-tabs label:nth-of-type(5) { outline: 2px solid var(--plum); outline-offset: 2px; }
.mx-panes { display: grid; margin-top: 1rem; }
.mx-pane { grid-area: 1 / 1; visibility: hidden; opacity: 0; height: 0; overflow: hidden; transition: opacity .22s ease; }
.mx-in:nth-of-type(1):checked ~ .mx-panes .mx-pane:nth-of-type(1),
.mx-in:nth-of-type(2):checked ~ .mx-panes .mx-pane:nth-of-type(2),
.mx-in:nth-of-type(3):checked ~ .mx-panes .mx-pane:nth-of-type(3),
.mx-in:nth-of-type(4):checked ~ .mx-panes .mx-pane:nth-of-type(4),
.mx-in:nth-of-type(5):checked ~ .mx-panes .mx-pane:nth-of-type(5) { visibility: visible; opacity: 1; height: auto; overflow: visible; }
/* On a phone every tab is a 44px target, and a row of four or five cannot share 318px
   without cutting a word like "Squarespace" in half, so it wraps: four as two by two,
   five as three over two. The grid is six columns there so both rows are filled edge to
   edge. `:has()` counts the labels; a browser without it keeps one row, which still
   works, only tighter. */
@media (max-width: 640px) {
  .mx-tabs label { min-height: 44px; }
  .mx-tabs:has(> label:nth-of-type(4)) { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mx-tabs:has(> label:nth-of-type(5)) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mx-tabs:has(> label:nth-of-type(5)) > label { grid-column: span 2; }
  .mx-tabs:has(> label:nth-of-type(5)) > label:nth-of-type(n+4) { grid-column: span 3; }
}
.mx .big { display: flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 680; font-size: clamp(1.9rem,4.4vw,2.5rem); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.mx .big.up { color: var(--rise); }
.mx .big.down { color: var(--fall, #B4485C); }
.mx .sub { margin-top: .45rem; color: var(--mk-ink-soft); font-size: .93rem; line-height: 1.45; }
.mx .note { margin: .85rem 0 0; color: var(--mute); font-size: .86rem; line-height: 1.5; }
.mx-cmp { margin-top: 1.1rem; display: grid; gap: .65rem; }
.mx-cmp .r { display: grid; grid-template-columns: 1fr auto; gap: .2rem .7rem; align-items: center; }
.mx-cmp .k { font-size: .78rem; color: var(--mute); grid-column: 1 / -1; }
.mx-cmp .b { height: 10px; border-radius: 99px; background: var(--tint); overflow: hidden; }
.mx-cmp .b i { display: block; height: 100%; border-radius: 99px; background: var(--tint-border); }
.mx-cmp .now .b i { background: var(--grad); }
.mx-cmp .v { font-variant-numeric: tabular-nums; font-weight: 640; color: var(--mk-ink-soft); font-size: .88rem; }
.mx-cmp .now .v { color: var(--ink); }
.mx-rows { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .4rem; }
.mx-rows li { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: .6rem; align-items: center; font-size: .84rem; }
.mx-rows .barwrap { min-width: 0; }
/* The track is what the page was; the fill is what it is now, so the empty part of the
   bar IS the loss and needs no second colour to say so. */
.mx-rows .bar { height: 8px; border-radius: 99px; background: var(--tint); overflow: hidden; }
.mx-rows .bar i { display: block; height: 100%; border-radius: 99px; background: var(--grad); }
.mx-rows .n { font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.mx-rows .n .ar { color: var(--mute); }
.mx-rows .d { font-variant-numeric: tabular-nums; font-weight: 640; color: var(--fall, #B4485C); min-width: 3.4em; text-align: right; }
.mx-src { margin: 1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--mk-line); color: var(--mute); font-size: .78rem; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .mx-pane { transition: none; } }
/* ── in-article figures ────────────────────────────────────────────────────────
   views/partials/fig/*.eta, placed by the article templates after a heading, after a
   section body, or before the closing box. Every one of them is drawn from numbers the
   template writes down in the open and says whether it is an example or quoted from the
   article. The interactive ones are `.mx` above, so they need no script; the charts are
   SVG with preserveAspectRatio="none" for the marks only, and every word on them is
   HTML laid over the top, so a label is the same size at 358px as at 1180px instead of
   shrinking with the drawing. Scoped under .mk-article, whose own p/li/table rules they
   have to beat. */
.mk-article .afig { margin: 1.9rem 0; }
.mk-article .afig-sub { margin: 0 0 .85rem; font-size: .95rem; line-height: 1.5; color: var(--ink); font-weight: 560; }
.mk-article .afig-cap { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--mk-line); font-size: .9rem; line-height: 1.55; color: var(--mk-ink-soft); }
.mk-article .afig-src { display: block; margin-top: .3rem; font-size: .78rem; line-height: 1.5; color: var(--mute); }
.mk-article .afig-cap > .afig-src:first-child { margin-top: 0; }
.mk-article .afig-note { margin: .85rem 0 0; font-size: .9rem; line-height: 1.55; color: var(--mk-ink-soft); }
.mk-article .afig-note.is-first { margin: 0 0 .85rem; }
.mk-article .afig-axt { margin: 0 0 .35rem; font-size: .72rem; line-height: 1.3; color: var(--mute); }

/* A plot: y labels | marks, then x labels under the marks. */
.afig-plot { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .5rem; }
.afig-plot-noy { grid-template-columns: minmax(0, 1fr); }
.afig-yax { position: relative; grid-row: 1; min-width: 2.5rem; font-size: .72rem; color: var(--mute); font-variant-numeric: tabular-nums; }
.afig-yax span { position: absolute; right: 0; transform: translateY(-50%); white-space: nowrap; line-height: 1; }
.afig-yax .is-lid { color: var(--fall); font-weight: 650; }
.afig-area { position: relative; grid-row: 1; height: clamp(150px, 26vw, 210px); }
.afig-plot-bars .afig-area { height: clamp(140px, 22vw, 180px); }
.afig-area svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.afig-xax { grid-column: 2; display: flex; justify-content: space-between; gap: .5rem; margin-top: .45rem; font-size: .72rem; line-height: 1.3; color: var(--mute); }
.afig-plot-noy .afig-xax { grid-column: 1; }
.afig-xax-mid { text-align: center; }

.afig-gl { stroke: var(--mk-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.afig-gl-lid { stroke: var(--fall); stroke-dasharray: 4 4; opacity: .6; }
.afig-ln { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.afig-ln-total { stroke: var(--plum); }
.afig-ln-ghost { stroke: var(--tint-border); stroke-width: 2; stroke-dasharray: 6 5; }
.afig-ln-brand { stroke: var(--mauve); }
.afig-ln-fall { stroke: var(--fall); }
.afig-ln-lid { stroke: var(--fall); stroke-width: 4.5; }
.afig-ln-last { stroke: var(--plum); stroke-width: 4.5; }
.afig-lid .afig-ln-total { stroke-width: 1.75; }

/* A word on the drawing, pinned to a value: above its line by default, below with
   -below, at the right end or the left start. */
.afig-tag {
  position: absolute; font-size: .74rem; line-height: 1.2; font-weight: 600; white-space: nowrap;
  padding: .05rem .25rem; border-radius: 4px; background: rgba(255,255,255,.86);
  transform: translateY(calc(-100% - 4px));
}
.afig-tag b { font-weight: 700; font-variant-numeric: tabular-nums; }
.afig-tag-end { right: 0; }
.afig-tag-start { left: 0; }
.afig-tag-below { transform: translateY(4px); }
.afig-tag.is-total { color: var(--plum); }
.afig-tag.is-ghost { color: var(--mute); }
.afig-tag.is-brand { color: var(--mauve); }
.afig-tag.is-fall { color: var(--fall); }

/* Marks and their keys share a class, so a swatch is always the colour of its bar. */
.afig-sa { fill: var(--plum); background: var(--plum); }
.afig-sb { fill: var(--rose); background: var(--rose); }
.afig-so { fill: var(--tint-border); background: var(--tint-border); }
.afig-had { fill: var(--tint); stroke: var(--tint-border); stroke-width: 1; vector-effect: non-scaling-stroke; background: var(--tint); box-shadow: inset 0 0 0 1px var(--tint-border); }
.afig-got { fill: var(--mauve); background: var(--mauve); }
.afig-got.is-starved { fill: var(--fall); }
.mk-article .afig-legend { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin: .95rem 0 0; padding: 0; }
.mk-article .afig-legend li { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-size: .8rem; line-height: 1.3; color: var(--mk-ink-soft); }
.afig-sw { display: block; width: 12px; height: 12px; border-radius: 3px; flex: none; }

/* A case's one-line verdict. The case worth acting on is the tinted one. */
.mk-article .afig-verdict { margin: .95rem 0 0; padding: .7rem .85rem; border-radius: 10px; background: var(--surface-2); color: var(--ink); font-size: .93rem; line-height: 1.55; }
.mk-article .afig-verdict-1 { background: var(--fall-soft); }

/* A worked number and the rows it comes from. */
.afig-avg { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .65rem; margin-bottom: .75rem; }
.afig-avg b { font-family: var(--font-display); font-weight: 680; font-size: clamp(1.8rem, 4vw, 2.3rem); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
.afig-avg.is-worse b { color: var(--fall); }
.afig-avg span { font-size: .86rem; line-height: 1.4; color: var(--mk-ink-soft); }
.mk-article .afig-tbl { margin: 0; font-size: .88rem; }
.mk-article .afig-tbl th, .mk-article .afig-tbl td { border: 0; border-bottom: 1px solid var(--mk-line); padding: .5rem .45rem; vertical-align: middle; }
.mk-article .afig-tbl thead th { background: none; font-size: .7rem; padding-top: 0; }
.mk-article .afig-tbl thead th:not(:first-child) { text-align: right; }
.mk-article .afig-tbl tbody th { font-weight: 500; color: var(--ink); text-transform: none; letter-spacing: 0; }
.mk-article .afig-tbl td { width: 1%; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; color: var(--mk-ink-soft); }
.mk-article .afig-tbl tbody tr:last-child > * { border-bottom: 0; }
.mk-article .afig-tbl tr.is-new > * { background: var(--fall-soft); }
.afig-tbl em { font-style: normal; font-size: .72rem; font-weight: 650; color: var(--fall); margin-left: .25rem; }
.mk-article .afig-tbl .is-url { font-family: var(--font-mono); font-size: .8rem; overflow-wrap: anywhere; }
.mk-article .afig-math { margin: .75rem 0 0; font-size: .8rem; line-height: 1.5; color: var(--mute); font-variant-numeric: tabular-nums; }
.mk-article .afig-report-h { margin: 0 0 .65rem; font-size: .95rem; font-weight: 650; color: var(--ink); }

/* The builder picker: the steps are the content, so they get the numbered-card
   treatment the article's own beats use, and the last one, the button to press, is the
   filled number. */
.mk-article .afig-pick { margin: 0 0 .65rem; font-size: .98rem; font-weight: 650; color: var(--ink); }
.mk-article .afig-steps { list-style: none; counter-reset: afs; margin: 0; padding: 0; display: grid; gap: .65rem; }
.mk-article .afig-steps > li { counter-increment: afs; position: relative; margin: 0; padding-left: 2.2rem; font-size: .95rem; line-height: 1.6; color: var(--mk-ink-soft); }
.mk-article .afig-steps > li::before {
  content: counter(afs); position: absolute; left: 0; top: .08rem; width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center; border-radius: 7px;
  background: var(--tint); border: 1px solid var(--tint-line); color: var(--plum);
  font-family: var(--font-display); font-size: .78rem; font-weight: 700;
}
.mk-article .afig-steps > li.is-verify { color: var(--ink); font-weight: 600; }
.mk-article .afig-steps > li.is-verify::before { background: var(--plum); border-color: var(--plum); color: #fff; }
.mk-article .afig-steps ul { margin: .45rem 0 0; padding-left: 1.1rem; }
.mk-article .afig-steps ul li { margin: 0 0 .35rem; font-size: .92rem; line-height: 1.55; }
.mk-article .afig-steps code { overflow-wrap: anywhere; }
.mk-article .afig-help { margin: .9rem 0 0; font-size: .86rem; }

/* The orphan-pages sets. The drawing keeps its proportions (circles must stay round),
   so it is capped at 460px and centred; the words sit over it in HTML. A region you can
   pick is a label with a 44px target; the one you cannot (working, the healthy middle)
   is plain text. */
.afig-venn-box { position: relative; max-width: 460px; margin: 0 auto; aspect-ratio: 340 / 222; }
.afig-venn-box svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.afig-vin { position: absolute; width: 1px; height: 1px; opacity: 0; clip-path: inset(50%); }
.afig-vr { transition: fill-opacity var(--t); }
.afig-vr-1 { fill: var(--mauve); fill-opacity: .1; }
.afig-vr-2 { fill: var(--rose); fill-opacity: .13; }
.afig-vr-m { fill: var(--rise); fill-opacity: .16; }
.afig-vc { fill: none; stroke: var(--tint-border); stroke-width: 1.5; }
.afig-vstop { fill: none; stroke: var(--fall); stroke-width: 1.6; stroke-dasharray: 4 4; opacity: .8; }
.afig-vhead { fill: var(--fall); }
.afig-vt { position: absolute; transform: translateX(-50%); font-size: .78rem; font-weight: 650; line-height: 1.2; color: var(--ink); white-space: nowrap; }
.afig-vl {
  position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center;
  min-width: 44px; min-height: 44px; max-width: 27%; padding: .2rem .4rem; border-radius: 9px;
  text-align: center; font-size: .8rem; font-weight: 600; line-height: 1.2; color: var(--ink);
  transition: background var(--t), box-shadow var(--t);
}
label.afig-vl { cursor: pointer; color: var(--plum); text-decoration: underline dotted; text-underline-offset: 3px; }
label.afig-vl-3 { color: var(--fall); }
label.afig-vl:hover { background: rgba(255,255,255,.7); }
.afig-vl-m { color: color-mix(in srgb, var(--rise), #000 30%); }
.afig-vin-1:checked ~ svg .afig-vr-1 { fill-opacity: .34; }
.afig-vin-2:checked ~ svg .afig-vr-2 { fill-opacity: .38; }
.afig-vin-3:checked ~ svg .afig-vr-1 { fill-opacity: .2; }
.afig-vin-3:checked ~ svg .afig-vstop { opacity: 1; stroke-width: 2.6; }
.afig-vin-1:checked ~ .afig-vl-1,
.afig-vin-2:checked ~ .afig-vl-2,
.afig-vin-3:checked ~ .afig-vl-3 { background: var(--surface); box-shadow: 0 2px 8px rgba(42,34,48,.12); text-decoration: none; }
.afig-vin-1:focus-visible ~ .afig-vl-1,
.afig-vin-2:focus-visible ~ .afig-vl-2,
.afig-vin-3:focus-visible ~ .afig-vl-3 { outline: 2px solid var(--plum); outline-offset: 2px; }
.mk-article .afig-venn .afig-cap { max-width: 460px; margin-left: auto; margin-right: auto; }
/* The picked region's list, directly under the figure: the section body, found as the
   first .mk-points after it, since it has no ids of its own. */
.mk-article .afig-venn:has(.afig-vin-1:checked) ~ .mk-points:not(.afig-venn ~ .mk-points ~ .mk-points) > li:nth-child(1),
.mk-article .afig-venn:has(.afig-vin-2:checked) ~ .mk-points:not(.afig-venn ~ .mk-points ~ .mk-points) > li:nth-child(2),
.mk-article .afig-venn:has(.afig-vin-3:checked) ~ .mk-points:not(.afig-venn ~ .mk-points ~ .mk-points) > li:nth-child(3) {
  background: var(--tint); border-left-color: var(--mauve); border-radius: 0 10px 10px 0; padding-right: .7rem;
}

/* The traffic-drop checklist: the article's card list, with a real checkbox per step. */
.mk-article .afig-ck { margin: 2.6rem 0 0; }
.mk-article .afig-ck-h { margin: 0 0 .45rem; }
.mk-article .afig-ck-p { margin: 0 0 1rem; }
.mk-article .afig-ck-list {
  list-style: none; counter-reset: afd; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--mk-line); border: 1px solid var(--mk-line); border-radius: 15px; overflow: hidden;
}
.mk-article .afig-ck-list > li {
  counter-increment: afd; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .85rem; align-items: start;
  margin: 0; padding: clamp(.9rem, 2.2vw, 1.15rem) clamp(.95rem, 2.4vw, 1.35rem); background: var(--surface);
  transition: background var(--t);
}
.afig-ck-in { width: 22px; height: 22px; margin: .12rem 0 0; accent-color: var(--plum); cursor: pointer; }
.mk-article .afig-ck-t { display: inline-flex; gap: .45rem; align-items: baseline; font-size: 1.02rem; font-weight: 650; line-height: 1.4; color: var(--ink); text-decoration: none; }
.mk-article .afig-ck-t::before { content: counter(afd) "."; color: var(--plum); font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.mk-article .afig-ck-t:hover { color: var(--plum); text-decoration: underline; text-decoration-color: var(--tint-border); }
.afig-ck-d { display: block; margin-top: .25rem; font-size: .95rem; line-height: 1.6; color: var(--mk-ink-soft); cursor: pointer; }
.mk-article .afig-ck-in:checked + .afig-ck-body .afig-ck-t { color: var(--mute); text-decoration: line-through; text-decoration-color: var(--tint-border); }
.mk-article .afig-ck-in:checked + .afig-ck-body .afig-ck-d { color: var(--mute); }
.mk-article .afig-ck-list > li:has(.afig-ck-in:checked) { background: var(--surface-2); }

/* 390: the plots keep their y labels but lose a little height, and the long sentence
   under a legend key may wrap under its swatch rather than squeeze it. */
@media (max-width: 560px) {
  .mk-article .afig { margin: 1.6rem 0; }
  .afig-yax { min-width: 2.2rem; }
  .mk-article .afig-legend { gap: .3rem .9rem; }
  .mk-article .afig-steps > li { padding-left: 2rem; font-size: .93rem; }
  .afig-vt { font-size: .72rem; }
  .afig-vl { font-size: .74rem; padding: .15rem .25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .afig-vr, .afig-vl, .mk-article .afig-ck-list > li { transition: none; }
}

/* ── cookie consent ────────────────────────────────────────────────────────────
   views/partials/consent_banner.eta, driven by public/js/consent.js. Here and not in app.css
   because both page families that show it (the public site and the sign-in screens) load
   this sheet, and the cabinet and the admin panel, which never show it, do not.

   A card in the bottom-left corner from 701px, a bottom sheet at 700px and below, the break
   the site's buttons already use for their 44px phone height. z-index 35 puts it over every
   piece of content and UNDER the sticky header (40), so the header's own menus and the phone
   sheet open over it rather than behind it, and under the lightbox (90).

   Everything inside is named through .mk-consent. The same form is drawn inline inside the
   Cookie Policy's article, and `.mk-article p` and friends would otherwise restyle it there. */
.mk-consent {
  position: fixed; z-index: 35; left: 1.25rem; bottom: 1.25rem;
  /* 100% of a fixed box's containing block is the viewport without its scrollbar, which
     100vw is not: this cannot cause a sideways scroll. */
  width: min(440px, calc(100% - 2.5rem));
  /* Never taller than the room under the header; past that it scrolls inside itself. */
  max-height: calc(100vh - 76px - 2.5rem);
  max-height: calc(100dvh - 76px - 2.5rem);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--mk-line); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(42,34,48,.06), 0 24px 60px -18px rgba(42,34,48,.34);
  font-size: .9rem; line-height: 1.5; text-align: left;
  animation: mk-consent-in .24s cubic-bezier(.2,0,0,1);
}
/* There is no global [hidden] rule, and the display above would beat the browser's own. */
.mk-consent[hidden] { display: none; }
@keyframes mk-consent-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.mk-consent .mk-consent-f { position: relative; margin: 0; padding: 1.1rem 1.2rem 1.15rem; }
.mk-consent .mk-consent-t {
  margin: 0 0 .3rem; font-family: var(--font-display); font-size: 1rem; font-weight: 700;
  line-height: 1.35; letter-spacing: -.01em; color: var(--ink);
}
.mk-consent .mk-consent-p { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--mk-ink-soft); }
.mk-consent .mk-consent-links { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; margin: .5rem 0 0; font-size: .82rem; line-height: 1.5; }
.mk-consent .mk-consent-links a {
  color: var(--plum); font-weight: 560;
  text-decoration: underline; text-decoration-color: var(--tint-border); text-underline-offset: 3px;
}
.mk-consent .mk-consent-links a:hover { color: var(--plum-700); text-decoration-color: currentColor; }

/* "Choose what to allow": a full-width row under a hairline, so it reads as the way into more
   detail rather than as a third answer competing with the two below it. The panel opens ABOVE
   the answers, which keeps the two buttons where they were under the pointer: the card grows
   upward from its anchored bottom edge. */
.mk-consent .mk-consent-more { margin: .85rem 0 0; border-top: 1px solid var(--mk-line); }
.mk-consent .mk-consent-more > summary {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  min-height: 44px; padding: .2rem 0; list-style: none; cursor: pointer;
  font-size: .875rem; font-weight: 650; color: var(--plum);
  -webkit-tap-highlight-color: transparent; transition: color var(--t);
}
.mk-consent .mk-consent-more > summary::-webkit-details-marker { display: none; }
.mk-consent .mk-consent-more > summary::marker { content: ''; }
.mk-consent .mk-consent-more > summary svg { flex: none; color: var(--mauve); transition: transform var(--t); }
.mk-consent .mk-consent-more[open] > summary svg { transform: rotate(180deg); }
.mk-consent .mk-consent-more > summary:hover { color: var(--plum-700); }
.mk-consent .mk-consent-more > summary:focus-visible { outline: 2px solid var(--mauve); outline-offset: 2px; border-radius: 6px; }

.mk-consent .mk-consent-panel { display: grid; gap: .5rem; padding: 0 0 .2rem; }
.mk-consent .mk-cc { display: grid; gap: .4rem; }
.mk-consent .mk-cc-row {
  position: relative; display: flex; align-items: center; gap: .9rem; margin: 0;
  padding: .62rem .75rem; border-radius: 12px; background: var(--surface-2); border: 1px solid transparent;
}
.mk-consent label.mk-cc-row { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background var(--t), border-color var(--t); }
.mk-consent label.mk-cc-row:hover,
.mk-consent label.mk-cc-row:has(.mk-cc-in:focus-visible) { background: var(--tint); border-color: var(--tint-line); }
.mk-consent .mk-cc-txt { flex: 1 1 auto; min-width: 0; display: grid; gap: .1rem; }
.mk-consent .mk-cc-n { font-size: .875rem; font-weight: 650; line-height: 1.35; color: var(--ink); }
.mk-consent .mk-cc-d { font-size: .8rem; line-height: 1.45; color: var(--mute); }
.mk-consent .mk-cc-on {
  flex: none; display: inline-flex; align-items: center; gap: .3rem;
  font-size: .78rem; font-weight: 650; color: var(--mute); white-space: nowrap;
}
.mk-consent .mk-cc-on svg { flex: none; }
.mk-consent .mk-cc-row.is-fixed { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .1rem .9rem; }
.mk-consent .mk-cc-row.is-fixed .mk-cc-d { grid-column: 1 / -1; }
.mk-consent .mk-cc-row.is-fixed .mk-cc-on { align-self: center; }

/* THE SWITCH. The real control is the checkbox, stretched invisibly over the whole row (so the
   row is the tap target and a screen reader meets an ordinary role="switch"); the track and
   thumb are drawn from its state. Off is an OUTLINED track with a grey thumb and on is a
   filled plum track with a white one, so the two states differ in shape as well as colour,
   and the off outline keeps 3:1 against both the row and the card. */
.mk-consent .mk-cc-in {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer;
}
.mk-consent .mk-sw {
  flex: none; position: relative; width: 44px; height: 26px; border-radius: 999px;
  border: 2px solid #8A7F8F; background: var(--surface);
  transition: background var(--t), border-color var(--t);
}
.mk-consent .mk-sw::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #8A7F8F; transition: transform var(--t), background var(--t);
}
.mk-consent .mk-cc-in:checked ~ .mk-sw { background: var(--plum); border-color: var(--plum); }
.mk-consent .mk-cc-in:checked ~ .mk-sw::after { background: #fff; transform: translateX(18px); box-shadow: 0 1px 2px rgba(42,34,48,.25); }
.mk-consent .mk-cc-in:focus-visible ~ .mk-sw { outline: 2px solid var(--mauve); outline-offset: 2px; }
/* Windows High Contrast and other forced-colour modes replace every background, and the
   switch shows its state only through backgrounds (the thumb is a filled circle, the track a
   filled pill), so on and off became the same empty outline. Here it is drawn in system
   colours instead: off, an outlined track with a thumb in text colour on the left; on, a
   highlighted track with the thumb in highlight-text colour on the right. Position and fill
   both change, as they do in normal colours. */
@media (forced-colors: active) {
  .mk-consent .mk-sw { forced-color-adjust: none; border-color: CanvasText; background: Canvas; }
  .mk-consent .mk-sw::after { background: CanvasText; box-shadow: none; }
  .mk-consent .mk-cc-in:checked ~ .mk-sw { background: Highlight; border-color: Highlight; }
  .mk-consent .mk-cc-in:checked ~ .mk-sw::after { background: HighlightText; }
  .mk-consent .mk-cc-in:focus-visible ~ .mk-sw { outline-color: Highlight; }
}

/* THE ANSWERS. One class for all three, so "Reject all" and "Accept all" cannot drift apart in
   size, weight or colour (scripts/verify-consent.mjs compares their computed styles), and one
   grid of two equal columns, so neither is wider. Outlined rather than filled: this is a
   question about the visitor, not the page's call to action, and the header's gradient button
   keeps that job. */
.mk-consent .mk-consent-acts { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .45rem; }
.mk-consent .mk-consent-btn {
  -webkit-appearance: none; appearance: none;
  display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 44px; margin: 0;
  padding: .55rem .9rem; border-radius: 11px; border: 1.5px solid var(--plum);
  background: var(--surface); color: var(--plum);
  font: inherit; font-size: .9rem; font-weight: 650; line-height: 1.2; text-align: center; cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t);
}
.mk-consent .mk-consent-btn:hover { background: var(--tint); border-color: var(--plum-700); color: var(--plum-700); }
/* Reopened under a pointer that has not moved yet (consent.js, holdHover): no hover tint, so
   neither answer looks already chosen. The same values as the resting button. */
.mk-consent.is-fresh .mk-consent-btn:hover { background: var(--surface); border-color: var(--plum); color: var(--plum); }
.mk-consent.is-fresh label.mk-cc-row:hover:not(:has(.mk-cc-in:focus-visible)) { background: var(--surface-2); border-color: transparent; }
.mk-consent .mk-consent-btn:active { transform: translateY(1px); }
.mk-consent .mk-consent-btn:focus-visible { outline: 2px solid var(--mauve); outline-offset: 2px; }
.mk-consent .mk-consent-save { width: 100%; }
.mk-consent form[aria-busy="true"] .mk-consent-btn { cursor: progress; opacity: .72; }

/* Only when the banner was opened again from "Cookie settings" (consent.js adds the class):
   an answer is already stored, so leaving without a new one is a real option. */
.mk-consent .mk-consent-x {
  display: none; position: absolute; top: .5rem; right: .5rem; z-index: 2;
  width: 36px; height: 36px; place-items: center; padding: 0; margin: 0;
  border: 0; border-radius: 10px; background: transparent; color: var(--mute); cursor: pointer;
  transition: background var(--t), color var(--t);
}
.mk-consent.is-reopened .mk-consent-x { display: grid; }
.mk-consent.is-reopened .mk-consent-t { padding-right: 2.25rem; }
.mk-consent .mk-consent-x:hover { background: var(--surface-2); color: var(--ink); }
.mk-consent .mk-consent-x:focus-visible { outline: 2px solid var(--mauve); outline-offset: 1px; }

/* Read out by consent.js once a choice is saved. Visually hidden, and outside the banner
   because the banner is hidden by then. */
.mk-consent-live {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* While the banner shows, keep what a keyboard moves to above it (WCAG 2.4.11: a focused
   element must not be hidden behind a sticky one), and give the page as much room at its end
   as the banner covers, so its last lines (the footer's links, the sign-up's "you agree to the
   Terms" line, a short page's button) can be scrolled clear of it. At every width: the corner
   card covered the whole Legal column at 768px and the "Log in" button of /login at 1024x768,
   where the page could not scroll at all. On the public site the room is inside the footer,
   so the footer's colour reaches the bottom edge; on the sign-in screens it is on the body.
   Only while the banner shows, so a returning visitor's page is its usual height.
   consent.js writes the measured height inline; these are the estimates for a page without
   script, set a little above the tallest measured case (the Ukrainian card covers 20.6rem with
   its gap at 1440 and 768, the sheet 20.4rem at 390): a few rem of spare room is harmless, a
   shortfall leaves the last row under the card. */
html:has(> body > .mk-consent:not([hidden])) { scroll-padding-bottom: 22rem; }
body:not(.mk):has(> .mk-consent:not([hidden])) { padding-bottom: 21rem; }
body.mk:has(> .mk-consent:not([hidden])) > .mk-footer { padding-bottom: 22rem; }
@media (max-width: 700px) {
  html:has(> body > .mk-consent:not([hidden])) { scroll-padding-bottom: 24rem; }
  body:not(.mk):has(> .mk-consent:not([hidden])) { padding-bottom: 23rem; }
  body.mk:has(> .mk-consent:not([hidden])) > .mk-footer { padding-bottom: 24rem; }
}

/* The phone: a sheet across the full width, flush with the bottom edge, its own scroll when
   the switches are open, and the home indicator's inset kept clear. */
@media (max-width: 700px) {
  .mk-consent:not(.mk-consent--inline) {
    left: 0; right: 0; bottom: 0; width: auto;
    max-height: calc(100vh - 76px - .5rem);
    max-height: calc(100dvh - 76px - .5rem);
    border-width: 1px 0 0; border-radius: 18px 18px 0 0;
    box-shadow: 0 -14px 40px -14px rgba(42,34,48,.3);
    animation-name: mk-consent-up;
  }
  .mk-consent:not(.mk-consent--inline) .mk-consent-f {
    padding: 1rem var(--mk-gutter) calc(1rem + env(safe-area-inset-bottom, 0px));
  }
}
@keyframes mk-consent-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media print { .mk-consent:not(.mk-consent--inline), .mk-consent-live { display: none; } }

/* Inline, inside the Cookie Policy: the same form as a plain card in the text flow. */
.mk-consent.mk-consent--inline {
  position: static; z-index: auto; width: auto; max-width: 34rem; max-height: none; overflow: visible;
  margin: .4rem 0 2rem; box-shadow: var(--sh-sm); animation: none;
}
.mk-consent--inline .mk-consent-f { padding: 1.05rem 1.1rem 1.1rem; }
.mk-consent .mk-consent-status { margin: 0 0 .8rem; font-size: .875rem; line-height: 1.55; color: var(--mk-ink-soft); transition: color var(--t); }
/* A save that leaves the form on screen needs a sign it happened: the status line goes green
   for a moment (consent.js), in the colour the site already uses for "that worked". */
.mk-consent .mk-consent-status.is-just-saved { color: #137a66; font-weight: 600; }
.mk-consent--inline .mk-consent-acts { margin-top: .6rem; }

/* The footer's "Cookie settings", beside the copyright (views/partials/mk_foot.eta). */
.mk-fcopy { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 .55rem; }
.mk-fsep { color: var(--mute); opacity: .55; }
.mk-fbot .mk-fset {
  color: var(--mk-ink-soft); text-decoration: underline; text-decoration-color: var(--mk-line);
  text-underline-offset: 3px; transition: color var(--t), text-decoration-color var(--t);
}
.mk-fbot .mk-fset:hover { color: var(--plum); text-decoration-color: currentColor; }