/* The alternate section ground is the app's own muted grey. It was a
     green-grey of its own (#eef4f4) that sat a hair off the page background
     and read as a smudge rather than as a second surface. */
  :root {
    --tint: var(--bg-soft); --navy: #0d1b2a;
    /* The app's verdict and seal colours (frontend/src/index.css), for the
       illustrations only: a verdict is never decoration. */
    --ok-soft: #d6f2e4; --seal: #a66a00; --seal-soft: #fceed4;
  }

  /* ── Rhythm: three beats, not one ────────────────────────────────────────
     Every section used to be `88px 0` with a rule on top and a centred h2 of
     the same size, so six of them read as one pile: nothing was heavier than
     anything else, and nothing told the eye that a section had ended. A page
     is not made readable by cutting words out of it (the copy here is already
     short: no string on the site passes 52 words). It is made readable by
     making its parts unequal.

       .mk-section          the default beat: a heading and a grid
       .mk-section-anchor   the page's centre of gravity, one idea per screen
       .mk-section-quiet    a breather: enough to separate, not to weigh

     Vertical space is the ONLY difference between the three. Something that
     needs a different layout takes a layout class (`mk-split`, `mk-notes`),
     never a padding tweak at the call site: that is how six identical
     sections happened in the first place. */
  .mk-section { padding: 76px 0; border-top: 1px solid var(--line); margin: 0; }
  .mk-section.mk-section-anchor { padding: 112px 0; }
  .mk-section.mk-section-quiet { padding: 44px 0; }
  .mk-section.mk-stats-band { padding: 48px 0; }

  /* ── One separator per seam, never two ───────────────────────────────────
     A tinted ground already says "new section". A hairline drawn on top of a
     colour change is a second separator doing the same job, and two of them
     at every seam is exactly what makes a page read as a stack of boxes
     rather than as a document. The rule survives only where two untinted
     sections genuinely touch, which is the one seam that needs marking. */
  .mk-section.mk-tint { background: var(--tint); border-top: 0; }
  .mk-section.mk-tint + .mk-section,
  .mk-hero + .mk-section { border-top: 0; }
  .visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
  }

  /* ── Page heads ── */
  .mk-eyebrow { display: inline-block; font-size: 13px; font-weight: 600; color: var(--accent); }
  .mk-hero { padding: 72px 0 64px; margin: 0; }
  .mk-hero-split {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 56px; align-items: center;
  }
  /* Inter Tight is already a narrow cut: tracking it -3% on top glued the
     letters of every display heading together. */
  .mk-hero h1 {
    font-size: clamp(34px, 4.6vw, 54px); line-height: 1.08; letter-spacing: -0.022em;
    margin: 16px 0 0; text-wrap: balance; max-width: 17ch;
  }
  .mk-hero.mk-hero-page { padding: 32px 0 64px; }
  .mk-hero.mk-hero-page h1 { font-size: clamp(30px, 3.8vw, 44px); line-height: 1.12; max-width: 24ch; margin-top: 0; }
  .mk-lead {
    font-size: 18px; line-height: 1.6; color: var(--ink-soft);
    max-width: 60ch; margin-top: 18px; text-wrap: pretty;
  }
  .mk-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
  .mk-ctas .btn, .mk-more .btn { display: inline-flex; align-items: center; gap: 8px; }
  .mk-note { font-size: 13px; color: var(--ink-faint); margin-top: 14px; }
  /* The address a connector is pasted with (/integrations/mcp). */
  .mk-endpoint { margin-top: 24px; font-size: 15px; color: var(--ink-soft); }
  .mk-endpoint code {
    display: inline-block; margin-top: 6px; padding: 8px 12px; font-size: 15px;
    background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r);
    color: var(--ink); overflow-wrap: anywhere;
  }

  /* Hero search */
  .mk-search { position: relative; margin-top: 26px; max-width: 560px; }
  .mk-search svg.lead { position: absolute; left: 16px; top: 17px; color: var(--ink-faint); }
  .mk-search input {
    width: 100%; font: inherit; font-size: 16px; color: var(--ink);
    padding: 15px 16px 15px 46px; border: 1px solid #cfd6e2; border-radius: var(--r);
    background: var(--card); outline: none;
  }
  .mk-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(38, 120, 93, .12); }
  .mk-results {
    list-style: none; margin-top: 6px; border: 1px solid var(--line); border-radius: var(--r-card);
    background: var(--card); overflow: hidden; box-shadow: 0 12px 32px rgba(13, 19, 28, .10);
    position: absolute; left: 0; right: 0; z-index: 5;
  }
  .mk-results.inline { position: static; box-shadow: none; }
  .mk-results:empty { display: none; }
  .mk-results li + li { border-top: 1px solid var(--line-soft); }
  .mk-results a, .mk-results .row {
    display: flex; align-items: center; gap: 12px; padding: 11px 16px; font-size: 14px;
  }
  /* The name takes the slack so the number and the locality stay pinned to the
     right, which `justify-content: space-between` only managed while every row
     had exactly two children. The logo is a third. */
  .mk-results .nm { flex: 1; }
  .mk-results a:hover, .mk-results a:focus { background: var(--bg-soft); }
  .mk-results .nm { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mk-results .aux { color: var(--ink-faint); font-size: 13px; flex: none; font-variant-numeric: tabular-nums; }
  .mk-status { font-size: 14px; color: var(--ink-faint); padding: 10px 2px; display: none; }
  .mk-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
  .mk-tab {
    font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line);
    background: var(--card); color: var(--ink-soft);
  }
  .mk-tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

  /* ── The proof band: figures, then the registers they come from ──────────
     One band, not two. The register names used to be a strip of their own
     between the hero and the figures, with a rule above and a rule below, and
     the figures then counted the very sources that strip had just named. Two
     thin bands back to back is the emptiest kind of stacking: neither is
     worth its own seam. The names now sit under the figures as their caption,
     which is what they always were. */
  .mk-stat { text-align: center; }
  /* The register names are the figures' caption, so they are quiet and they
     share their centre line: smaller, lighter, and no rule between the two.
     A hairline here would be the second separator the whole page just got rid
     of, and the drop in size already says which of the two is the headline.
     The sentence that introduces them is in the markup but not on screen
     (`visually-hidden` in home.html): the list needs no label above a band
     that has just given its figures, and a screen reader still gets one. */
  .mk-sources {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
    gap: 6px 20px; margin: 28px 0 0;
  }
  .mk-sources .src { font-size: 13px; font-weight: 500; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 8px; }
  .mk-sources .src svg { color: var(--accent); }
  /* `auto-fit`, not a fixed count: the band holds three tiles today, held
     four until the "5 official registers" one went (the five are named one
     by one on the line below, so counting them told you the length of a
     list you can read), and holds ONE on a worker whose aggregates have
     not been built yet, because the two live counts are conditional. A
     `repeat(4, ...)` left an empty track in every one of those cases, and
     an empty track pushes a band we just centred off its own centre. */
  .mk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 24px; }
  .mk-stat b {
    display: block; font-size: clamp(26px, 3vw, 36px); font-weight: 700; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums; color: var(--navy);
  }
  .mk-stat span { font-size: 14px; color: var(--ink-soft); }

  /* ── Section heads ── */
  .mk-head { max-width: 720px; margin: 0 0 40px; }
  .mk-head p { max-width: 60ch; }
  .mk-head.mk-center p { margin-left: auto; margin-right: auto; }
  .mk-head.mk-center { margin-left: auto; margin-right: auto; text-align: center; }
  .mk-kicker { font-size: 13px; font-weight: 600; color: var(--accent); margin-bottom: 8px; display: block; }
  .mk-head h2, .mk-cta h2, .mk-row h2, .mk-prose h2 {
    font-size: clamp(24px, 2.8vw, 32px); font-weight: 700; letter-spacing: -0.016em;
    line-height: 1.18; margin: 0 0 12px; text-wrap: balance;
  }
  .mk-head p, .mk-row p { color: var(--ink-soft); font-size: 16px; line-height: 1.6; }

  /* ── Cards and grids ── */
  .mk-grid { display: grid; gap: 20px; }
  .mk-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mk-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mk-card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
    padding: 24px; display: flex; flex-direction: column; gap: 10px;
  }
  a.mk-card { transition: border-color .15s; }
  a.mk-card:hover { border-color: rgba(38, 120, 93, .45); }
  .mk-card h3, .mk-card-title { font-size: 17px; font-weight: 600; line-height: 1.3; margin: 2px 0 0; }
  .mk-card p { color: var(--ink-soft); font-size: 15px; line-height: 1.55; }
  /* Decorative illustrations (_illus.html). Sized by height so a portrait
     drawing and a landscape one sit on the same line across a row of cards. */
  .mk-illus { display: block; max-width: 100%; }
  .mk-card-illus { height: 104px; width: auto; align-self: center; margin-bottom: 8px; }
  .mk-hero-illus { width: 100%; max-width: 440px; height: auto; max-height: 320px; object-fit: contain; justify-self: center; }
  .mk-card .go { margin-top: auto; padding-top: 6px; color: var(--accent); font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
  .mk-checks { list-style: none; display: flex; flex-direction: column; gap: 9px; margin: 18px 0 22px; }
  .mk-checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
  /* Lists open on a small neutral dot. A teal checkmark in front of every
     line of every list was the loudest of the stock-template tics. */
  .mk-checks li::before, .mk-list li::before, .mk-section-list li::before, .mk-lines .ln::before {
    content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-faint);
    flex: none; margin-top: .62em;
  }
  /* ── A section that turns the reading axis ───────────────────────────────
     `mk-head` on top of `mk-grid` is the shape of most sections on this site,
     and three of them in a row is what the eye reads as a pile. This one
     turns ninety degrees: the heading holds still on the left while the
     points run down the right. Same content, same words. Changing the axis
     breaks a sequence far harder than changing a background colour does,
     which is all the tint was ever doing.

     The heading is NOT sticky, and that was measured rather than assumed: the
     column is 339px of content against an 83px heading, so a sticky head held
     for 180px of scroll and was then pushed out by its own container. A
     heading that freezes, holds for a fifth of a screen and then jerks away
     reads as a bug, not as an effect. Sticky belongs to a long column. */
  .mk-split {
    display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: 56px; align-items: start;
  }
  .mk-split > .mk-head { margin-bottom: 0; }
  .mk-split > .mk-head .mk-more { margin-top: 22px; }
  /* Rules between the points, not boxes around them: a bordered card inside a
     section that is already a surface is a frame drawn inside a frame. */
  .mk-split-list { list-style: none; margin: 0; padding: 0; }
  .mk-split-list > li { padding: 22px 0; border-top: 1px solid var(--line); }
  .mk-split-list > li:first-child { padding-top: 0; border-top: 0; }
  .mk-split-list > li:last-child { padding-bottom: 0; }
  .mk-split-list h3 { font-size: 19px; font-weight: 600; line-height: 1.3; margin: 0; letter-spacing: -0.01em; }
  .mk-split-list p { margin: 7px 0 0; color: var(--ink-soft); font-size: 16px; line-height: 1.6; max-width: 56ch; }
  /* A split whose right half is facts rather than points (the publisher's
     identity on /about): same rules between rows, a label over a value. */
  .mk-facts { margin: 0; }
  .mk-facts > div { padding: 16px 0; border-top: 1px solid var(--line); }
  .mk-facts > div:first-child { padding-top: 0; border-top: 0; }
  .mk-facts > div:last-child { padding-bottom: 0; }
  .mk-facts dt { font-size: 14px; color: var(--ink-soft); }
  .mk-facts dd { margin: 4px 0 0; font-size: 17px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
  /* The last import dates under the sources table on /data. */
  .mk-refresh { margin-top: 40px; max-width: 420px; }
  .mk-refresh h3 { font-size: 19px; font-weight: 600; margin: 0 0 16px; letter-spacing: -0.01em; }

  /* ── Notes: the quiet beat's layout ──────────────────────────────────────
     The trust block used to be a fourth card grid in a row of card grids, and
     it restates in four cards what /security says in full. Same four claims,
     same words, a third of the height: a thin rule instead of a box, smaller
     type, and the quiet beat around it. The descriptions stay in the markup
     because they are the part a crawler indexes; only their weight changes. */
  .mk-notes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 32px; }
  .mk-notes > div { padding-left: 18px; border-left: 1px solid var(--line); }
  .mk-notes h3 { font-size: 15px; font-weight: 600; line-height: 1.35; margin: 0; }
  .mk-notes p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
  .mk-notes-head {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    gap: 8px 24px; margin-bottom: 22px;
  }
  .mk-notes-head h2 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }

  .mk-more { margin-top: 32px; }
  .mk-more.mk-center { text-align: center; }
  .mk-link { color: var(--accent); font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
  .mk-link:hover { text-decoration: underline; text-underline-offset: 3px; }
  .mk-sub-note { margin-top: 28px; font-size: 15px; color: var(--ink-soft); }
  .mk-sub-note a { color: var(--accent); font-weight: 600; }

  /* ── Alternating product rows ── */
  .mk-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
  .mk-row + .mk-row { margin-top: 88px; }
  .mk-row.flip > :first-child { order: 2; }

  /* ── Product illustrations (fictional data) ──
     Drawn with the app's own classes, translated from Tailwind: a panel is
     `rounded-lg border bg-card p-5` (4px, no shadow: the app separates panels
     with a rule, never an altitude), a section title `text-base
     font-semibold`, a table head `font-mono text-[0.62rem] uppercase`. They
     must read as a screenshot of the product, not as a drawing of one. */
  .mock { margin: 0; display: flex; flex-direction: column; }
  .mock figcaption { font-size: 12px; color: var(--ink-faint); margin-top: 10px; text-align: right; }
  .app-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; }
  .app-h { font-size: 16px; font-weight: 600; margin: 0 0 8px; }
  .app-cap { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; }
  .app-badge { display: inline-flex; align-items: center; border-radius: 3px; padding: 2px 8px; font-size: 12px; font-weight: 500; line-height: 1.35; white-space: nowrap; }
  .app-badge.ok { background: var(--ok-soft); color: var(--green); }

  /* Fiche header + underline TabBar */
  .app-fiche-head { display: flex; align-items: center; gap: 16px; }
  .app-logo { width: 48px; height: 48px; border-radius: var(--r); background: #e4e4e7; color: #71717a; display: grid; place-items: center; font-weight: 600; font-size: 16px; flex: none; }
  .app-id { min-width: 0; }
  .app-name { font-size: 22px; font-weight: 600; line-height: 1.25; }
  .app-name span { font-size: 15px; font-weight: 400; color: var(--ink-soft); margin-left: 4px; }
  .app-idline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 4px; font-size: 14px; color: var(--ink-soft); }
  .app-seat { display: inline-flex; align-items: center; gap: 8px; }
  .app-seat i { font-style: normal; font-size: 8px; }
  .app-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 24px 0 24px; overflow: hidden; white-space: nowrap; }
  .app-tabs span { padding: 8px 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 14px; font-weight: 500; color: var(--ink-soft); }
  .app-tabs span.on { border-bottom-color: var(--accent); color: var(--ink); }

  /* CompanyScoreCard */
  .app-score { display: flex; align-items: flex-start; gap: 20px; }
  .app-grade { flex: none; text-align: center; }
  .app-grade b { display: block; font-size: 48px; font-weight: 700; line-height: 1; color: var(--green); }
  .app-grade span { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-soft); }
  .app-score-body { min-width: 0; flex: 1; }
  .app-band { display: flex; gap: 4px; }
  .app-band i { height: 8px; flex: 1; border-radius: 3px; background: var(--bg-soft); }
  .app-band i.on { background: var(--green); }
  .app-scale { display: flex; justify-content: space-between; margin-top: 4px; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
  .app-verdict { margin-top: 12px; font-size: 14px; }
  .app-verdict b { color: var(--green); font-weight: 600; }
  .app-prov { margin-top: 8px; font-size: 12px; color: var(--ink-soft); line-height: 1.5; }

  /* KeyFiguresTable (components/ui/table.tsx) */
  .app-table-wrap { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow-x: auto; }
  .app-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
  .app-table th {
    height: 32px; padding: 0 12px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 500;
    letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft);
  }
  .app-table td { padding: 8px 12px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
  .app-table td:first-child { text-align: left; color: var(--ink-soft); }
  .app-table tr:last-child td { border-bottom: 0; }
  .app-inds { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
  .app-inds .app-cap { margin-bottom: 0; }
  .app-ind > div:first-child { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; }
  .app-ind b { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .app-bar { margin-top: 4px; height: 6px; border-radius: 3px; background: var(--bg-soft); overflow: hidden; }
  .app-bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }

  /* EventsFeed */
  .app-summary { font-size: 14px; color: var(--ink-soft); margin-bottom: 16px; }
  .app-feed { list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
  .app-feed li { display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
  .app-feed li + li { border-top: 1px solid var(--line); }
  .app-feed b { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-feed time { flex: none; font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
  .app-pill { flex: none; border-radius: var(--r); padding: 2px 8px; font-size: 12px; font-weight: 500; background: var(--bg-soft); color: var(--ink-soft); white-space: nowrap; }
  .app-pill.risk { background: var(--red-soft); color: var(--red); }
  .app-pill.seal { background: var(--seal-soft); color: var(--seal); }

  /* Docs CodePanel. Dark on the light site: a code sample reads as a
     terminal, and it sets the snippet apart from the prose around it.
     Same palette as the app's dark theme (`.dark` in the SPA index.css). */
  .app-code { background: #131316; border: 1px solid #24252a; border-radius: var(--r); overflow: hidden; color-scheme: dark; }
  .app-code-bar { height: 44px; display: flex; align-items: center; padding: 0 12px; border-bottom: 1px solid #24252a; font-size: 12px; font-weight: 600; color: #c2c3ca; }
  .app-code pre {
    margin: 0; padding: 16px; overflow-x: auto; font-size: 12px; line-height: 1.65;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #ecedef;
  }
  .app-code .k { color: #7dd3fc; }
  .app-code .s { color: #6ee7b7; }
  .app-code .l { color: #f9a8d4; }
  .app-code .n { color: #fcd34d; }

  /* ── Tables ── */
  .mk-table th { font-size: 13px; }
  .mk-table td, .mk-table th { padding: 14px 18px; vertical-align: top; }
  .mk-table .c { text-align: center; }
  /* An inline icon sits on the text baseline and floated 4px above the label
     of its row; centred on the line box it lines up with the words. */
  .mk-table .c svg { vertical-align: middle; }
  .mk-table .yes { color: var(--green); }
  .mk-table .no { color: var(--ink-faint); opacity: .6; }
  .mk-table tbody tr:nth-child(even) { background: #f9fafc; }
  .mk-table td.hl { color: var(--ink); font-weight: 500; }
  .mk-table-block + .mk-table-block { margin-top: 72px; }

  /* ── Lists (comparisons, pains) ── */
  .mk-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .mk-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.55; }
  .mk-disclaimer { margin-top: 40px; font-size: 13px; color: var(--ink-faint); max-width: 80ch; }

  /* ── Pricing ── */
  .mk-line-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
  .mk-line-head h2 { font-size: 22px; font-weight: 700; margin: 0; }
  .mk-line-sub { color: var(--ink-soft); font-size: 15px; max-width: 70ch; margin-bottom: 26px; }
  .mk-plan { position: relative; }
  .mk-plan.best { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
  .mk-badge {
    position: absolute; top: -11px; left: 50%; transform: translateX(-50%); white-space: nowrap;
    background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px;
  }
  .mk-plan h3 { font-size: 19px; font-weight: 700; }
  .mk-plan .desc { font-size: 14px; color: var(--ink-soft); }
  .mk-price { display: flex; align-items: baseline; gap: 4px; margin-top: 4px; }
  .mk-price b { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
  .mk-price span, .mk-vat { color: var(--ink-faint); font-size: 13px; }
  .mk-price .mk-vat { font-size: 11px; margin-left: 2px; }
  .mk-lines { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 14px; }
  .mk-lines .ln { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
  .mk-lines .sub { font-size: 12px; color: var(--ink-faint); padding-left: 13px; margin-top: -3px; }
  .mk-plan .btn { margin-top: auto; }
  .mk-second-line { margin-top: 72px; }
  .mk-matrix { margin-top: 40px; }
  .mk-matrix h3 { font-size: 17px; font-weight: 600; margin-bottom: 14px; }
  .mk-included { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 24px; }
  .mk-included li { display: flex; align-items: center; gap: 8px; font-size: 15px; }
  .mk-included .yes { color: var(--green); display: inline-flex; }
  .mk-fine { text-align: center; margin-top: 24px; font-size: 13px; color: var(--ink-soft); display: flex; flex-direction: column; gap: 3px; }

  /* ── FAQ ── */
  .mk-faq { max-width: 800px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); }
  .mk-faq details + details { border-top: 1px solid var(--line-soft); }
  .mk-faq summary {
    cursor: pointer; list-style: none; padding: 17px 20px; font-weight: 600; font-size: 15px;
    display: flex; justify-content: space-between; gap: 16px; align-items: center;
  }
  .mk-faq summary::-webkit-details-marker { display: none; }
  .mk-faq summary:hover { color: var(--accent); }
  .mk-faq summary::after { content: "+"; color: var(--ink-faint); font-size: 20px; line-height: 1; flex: none; }
  .mk-faq details[open] summary::after { content: "\2212"; }
  .mk-faq details p { padding: 0 20px 18px; color: var(--ink-soft); font-size: 15px; line-height: 1.65; max-width: 68ch; }

  /* ── Long-form pages (guides, security, about) ── */
  .mk-article { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 56px; align-items: start; }
  .mk-prose { max-width: 70ch; }
  .mk-prose h2 { margin-top: 44px; }
  .mk-prose h2:first-child { margin-top: 0; }
  .mk-prose p { font-size: 17px; line-height: 1.7; color: var(--ink-body); margin-top: 16px; }
  .mk-prose ul { margin: 16px 0 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 17px; line-height: 1.65; color: var(--ink-body); }
  .mk-prose .mk-faq { margin-top: 16px; }
  .mk-prose .table-wrap { margin-top: 18px; }
  .mk-prose td:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; white-space: nowrap; color: var(--ink); }
  .mk-aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 16px; }
  .mk-aside .mk-card { padding: 20px; }
  .mk-aside h2 { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
  .mk-aside ul { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--ink-soft); }
  .mk-aside li { display: flex; gap: 8px; }
  .mk-aside li a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
  .mk-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--ink-faint); margin-top: 16px; }
  .mk-takeaways { border-left: 3px solid var(--accent); background: var(--card); border-radius: 0 var(--r-card) var(--r-card) 0; padding: 18px 22px; margin-top: 44px; }
  .mk-takeaways h2 { font-size: 17px; margin: 0 0 8px; }
  .mk-takeaways ul { margin-top: 0; }
  .mk-section-list { display: flex; flex-direction: column; gap: 20px; }
  .mk-section-list .mk-card { flex-direction: row; gap: 18px; align-items: flex-start; }
  .mk-section-list ul { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
  .mk-section-list li { display: flex; gap: 10px; font-size: 15px; color: var(--ink-soft); line-height: 1.55; }
  .mk-section-list .mk-card-title { font-size: 19px; }

  /* ── Closing call to action ── */
  .mk-cta { background: var(--navy); color: #fff; border-top: 0; }
  .mk-cta .container { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; }
  .mk-cta h2 { color: #fff; margin: 0 0 10px; }
  .mk-cta p { color: #b7c6d6; font-size: 16px; max-width: 58ch; }
  .mk-cta .btn-ghost { background: transparent; color: #fff; border-color: #3a4f66; }
  .mk-cta .btn-ghost:hover { border-color: #fff; }
  .mk-cta .mk-ctas { margin-top: 0; }
  .mk-cta .mk-cta-contact { display: inline-block; margin-top: 14px; color: #8ee0d3; font-size: 14px; }
  .mk-cta .mk-cta-contact:hover { text-decoration: underline; text-underline-offset: 3px; }
  /* The dark band closes the page: no gap between it and the footer. */
  main:has(> .mk-cta:last-child) + .site-footer { margin-top: 0; }

  /* ── Responsive ── */
  @media (max-width: 1000px) {
    .mk-grid-4, .mk-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mk-article { grid-template-columns: minmax(0, 1fr); }
    .mk-aside { position: static; }
  }
  @media (max-width: 900px) {
    .mk-hero-split, .mk-row, .mk-cta .container, .mk-split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    /* One column: the heading is back on top of its list, so the rule that
       opens the first item would draw straight under it. */
    .mk-split { gap: 28px; }
    .mk-row.flip > :first-child { order: 0; }
    .mk-grid-3, .mk-grid-2 { grid-template-columns: minmax(0, 1fr); }
    .mk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Two per row leaves an odd tile alone on the last one, and a lone
       tile sitting in column 1 is off the centre line the band and the
       register names below it share. Let it take the row. */
    .mk-stats > .mk-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
    /* Once the page head is one column the drawing lands under the text, in
       the way of what follows: it only belongs beside the heading. */
    .mk-hero-illus { display: none; }
  }
  @media (max-width: 560px) {
    .mk-grid-4 { grid-template-columns: minmax(0, 1fr); }
    .mk-hero { padding: 44px 0 48px; }
    .mk-hero.mk-hero-page { padding: 24px 0 44px; }
    .mk-section { padding: 56px 0; }
    .mk-section.mk-section-anchor { padding: 76px 0; }
    .mk-section.mk-section-quiet { padding: 36px 0; }
    .mk-section.mk-stats-band { padding: 40px 0; }
    .mk-notes { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .mk-lead { font-size: 16px; }
    .mk-stats { gap: 24px 16px; }
    .mk-stat b { font-size: 24px; }
    .mk-head { margin-bottom: 28px; }
    .mk-row + .mk-row { margin-top: 64px; }
    .mk-card { padding: 20px; }
    /* A centred wrap of five register names read as a cloud; stacked and
       left-aligned they read as the list they are. */
    /* Five long institution names wrapped and centred read as a cloud;
       stacked they read as the list they are, and centred they stay on
       the figures' axis. */
    .mk-sources { flex-direction: column; align-items: center; gap: 6px; text-align: center; }
    .mk-ctas .btn { flex: 1 1 auto; justify-content: center; }
    .mk-cta .container { gap: 28px; }
    .mk-section-list .mk-card { flex-direction: column; }
    /* On a phone the page head is the text: the drawing only pushed it down. */
    /* One card per row: a drawing centred over left-aligned text floated in
       the middle of an empty band. The card turns into a row instead, the
       drawing as a small thumbnail beside the title and the text. */
    .mk-card:has(> .mk-card-illus) {
      display: grid; grid-template-columns: 64px minmax(0, 1fr);
      column-gap: 16px; row-gap: 8px; align-items: start;
    }
    .mk-card:has(> .mk-card-illus) > * { grid-column: 2; }
    .mk-card > .mk-card-illus {
      grid-column: 1; grid-row: 1 / span 3; width: 64px; height: 64px;
      object-fit: contain; margin: 0; align-self: start;
    }
  }