.mk-page{min-height:100vh}
html:has(.mk-page){scroll-padding-top:calc(var(--cvt-size-nav-height) + var(--cvt-space-4))}
/* In-page anchors glide; the browser keeps control of scrolling (no JS
   scroll hijack), and a reduced-motion preference jumps instead. */
@media (prefers-reduced-motion:no-preference){html:has(.mk-page){scroll-behavior:smooth}}
.mk-page img{max-width:100%;height:auto}
.mk-skip{position:absolute;left:var(--cvt-space-4);top:-100px;z-index:200;padding:var(--cvt-space-3) var(--cvt-space-4);border-radius:var(--cvt-radius-md);background:var(--cvt-bg-surface);color:var(--cvt-text-primary);font-weight:700}
.mk-skip:focus{top:var(--cvt-space-2)}

/* ── Top nav (marketing) ─────────────────────────────────────────────── */
.mk-nav{position:sticky;top:0;z-index:50}
.mk-nav .cvt-topnav{max-width:none}
.mk-nav .cvt-brand{gap:8px}
.mk-nav .cvt-brand svg{width:auto;height:28px}
/* Below 600 the wordmark gives way to the CTA (brand.md: app bar hides it
   too); it stays in the link for screen readers. */
@media (max-width:599px){.mk-nav .cvt-brand span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.mk-nav .cvt-nav-actions{flex:none}
.mk-nav-divider{width:1px;height:24px;margin:0 var(--cvt-space-2);background:var(--cvt-border-subtle)}
.mk-nav-text{display:inline-flex;align-items:center;min-height:var(--cvt-size-touch-min);padding:0 var(--cvt-space-3);border:0;border-radius:var(--cvt-radius-md);background:none;color:var(--cvt-text-primary);font:600 15px/1 var(--cvt-font-ui);text-decoration:none;cursor:pointer}
.mk-nav-text:hover{background:var(--cvt-action-secondary-bg-hover)}
.mk-nav-text:focus-visible{outline:2px solid var(--cvt-focus-ring);outline-offset:2px}
/* Below 1200 the nav-only extras live in the menu sheet instead. */
.mk-desktop-only{display:none}
@media (min-width:1200px){.mk-desktop-only{display:inline-flex}}
/* The CTA keeps one line and its 44px height at 360 in every locale. */
.mk-nav .cvt-nav-actions .cvt-btn:not(.cvt-btn--icon){white-space:nowrap;padding:0 var(--cvt-space-4)}
.mk-nav .cvt-menu-sheet{position:absolute;left:0;right:0;top:100%;max-height:calc(100vh - var(--cvt-size-nav-height-mobile));overflow:auto;box-shadow:0 0 0 100vmax var(--cvt-overlay-scrim)}
.mk-menu-group{display:grid;gap:var(--cvt-space-3);padding-top:var(--cvt-space-4)}
.mk-menu-signout{display:flex;align-items:center;width:100%;min-height:var(--cvt-size-touch-min);padding:0;border:0;border-bottom:1px solid var(--cvt-border-subtle);background:none;color:var(--cvt-text-primary);font:600 16px/1 var(--cvt-font-ui);text-align:left;cursor:pointer}
.mk-menu-signout:focus-visible{outline:2px solid var(--cvt-focus-ring);outline-offset:-2px}

/* Language and currency switchers (shared partials) on the paper nav. The
   partials carry light-on-indigo styles for the unmigrated pages; these
   rules repaint them in tokens here only. */
.mk-page .nav-lang{display:inline-flex;position:relative;align-items:center}
.mk-page .nav-lang select{min-height:var(--cvt-size-touch-min);max-width:none;padding:0 32px 0 32px;border:1px solid var(--cvt-border-control);border-radius:var(--cvt-radius-md);background:var(--cvt-bg-surface);color:var(--cvt-text-primary);font:600 15px/1.2 var(--cvt-font-ui);cursor:pointer}
.mk-page .nav-lang select:hover{background:var(--cvt-action-secondary-bg-hover);border-color:var(--cvt-border-control)}
.mk-page .nav-lang select:focus-visible{outline:2px solid var(--cvt-focus-ring);outline-offset:2px}
.mk-page .nav-lang svg{color:var(--cvt-text-secondary);opacity:1}
.mk-page .nav-lang option{color:var(--cvt-text-primary);background:var(--cvt-bg-surface)}
.mk-menu-group .nav-lang,.mk-menu-group .nav-lang select{width:100%}

/* ── Sections ────────────────────────────────────────────────────────── */
.mk-section{padding:var(--cvt-space-12) 0}
.mk-section--alt{background:var(--cvt-bg-surface);border-block:1px solid var(--cvt-border-subtle)}
@media (min-width:900px){.mk-section{padding:var(--cvt-space-20) 0}}
.mk-head{display:grid;gap:var(--cvt-space-3);max-width:760px;margin-bottom:var(--cvt-space-8)}
.mk-head .cvt-lede{margin-top:var(--cvt-space-1)}
.mk-note{margin:var(--cvt-space-5) 0 0;color:var(--cvt-text-secondary);font-size:var(--cvt-type-body-size)}
.mk-links{display:flex;flex-wrap:wrap;gap:var(--cvt-space-2) var(--cvt-space-6);margin-top:var(--cvt-space-4)}

/* ── Hero: v7 compact composition ────────────────────────────────────── */
.mk-hero{padding:var(--cvt-space-8) 0 var(--cvt-space-12)}
.mk-hero__grid{display:grid;gap:var(--cvt-space-8);align-items:center}
.mk-hero__copy{display:grid;gap:var(--cvt-space-4);min-width:0}
.mk-hero__copy .cvt-lede{margin-bottom:var(--cvt-space-2)}
.mk-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cvt-space-3)}
.mk-trust{display:flex;flex-wrap:wrap;gap:var(--cvt-space-2) var(--cvt-space-5);margin:0;padding:0;list-style:none;color:var(--cvt-text-secondary);font-size:15px;font-weight:600}
.mk-trust li{display:inline-flex;align-items:center;gap:var(--cvt-space-2)}
.mk-trust li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cvt-bg-brand)}
/* The hero stage (homepage v2): the Evidence Ledger as the first-screen
   visual. Job requirements on one card, the CV for that job on a flat page,
   numbered reference marks pairing them, the gap shown as a gap, and a fit
   strip. Flat on purpose (no tilt, no floating panels): DISTINCTIVENESS.md
   in docs/design/screens/homepage-visual-v2/. */
.mk-stage{position:relative;display:grid;gap:var(--cvt-space-3);margin:0;min-width:0;padding:var(--cvt-space-4);border:1px solid var(--cvt-border-subtle);border-radius:var(--cvt-radius-lg);background:var(--cvt-bg-sunken)}
.mk-stage__label,.mk-stage__eyebrow{margin:0;font:var(--cvt-type-eyebrow-weight) var(--cvt-type-eyebrow-size)/1.5 var(--cvt-font-ui);letter-spacing:var(--cvt-type-eyebrow-tracking);text-transform:uppercase;color:var(--cvt-text-label-accent)}
.mk-stage__label{color:var(--cvt-text-secondary)}
.mk-stage__job{padding:var(--cvt-space-3) var(--cvt-space-4) var(--cvt-space-2);border:1px solid var(--cvt-border-subtle);border-radius:var(--cvt-radius-md);background:var(--cvt-bg-surface)}
.mk-stage__title{margin:var(--cvt-space-1) 0 var(--cvt-space-2);font-size:16px;font-weight:700;line-height:1.3}
.mk-stage__title span{display:block;font-size:var(--cvt-type-small-size);font-weight:400;color:var(--cvt-text-secondary)}
.mk-reqs,.mk-cvlines{margin:0;padding:0;list-style:none}
.mk-req{display:grid;grid-template-columns:22px minmax(0,1fr);gap:var(--cvt-space-2);align-items:start;padding:7px 0;border-top:1px solid var(--cvt-border-subtle);font-size:14px;line-height:1.4}
.mk-req em{display:block;font-style:normal;font-size:var(--cvt-type-small-size);font-weight:600;color:var(--cvt-status-warning-fg)}
.mk-refno{display:grid;place-items:center;width:20px;height:20px;margin-top:1px;border:1px solid var(--cvt-bg-brand);border-radius:50%;background:var(--cvt-bg-brand);color:var(--cvt-text-on-brand);font:600 11px/1 var(--cvt-font-mono)}
.mk-req--gap .mk-refno{border:1px dashed var(--cvt-border-control);background:var(--cvt-bg-surface);color:var(--cvt-text-secondary)}
.mk-stage__cv{display:grid;gap:var(--cvt-space-1);min-width:0}
.mk-doc{padding:var(--cvt-space-4) var(--cvt-space-4) var(--cvt-space-3);border:1px solid var(--cvt-border-subtle);border-radius:var(--cvt-radius-sm);background:var(--cvt-bg-surface);box-shadow:var(--cvt-shadow-e1)}
.mk-doc p{margin:0}
.mk-doc__name{font-size:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.mk-doc__role{font-size:var(--cvt-type-small-size);color:var(--cvt-text-secondary)}
.mk-doc__section{margin-top:var(--cvt-space-3)!important;padding-bottom:4px;border-bottom:1px solid var(--cvt-text-primary);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.mk-cvline{display:grid;grid-template-columns:22px minmax(0,1fr);gap:var(--cvt-space-2);align-items:start;padding-top:var(--cvt-space-2);font-size:14px;line-height:1.45}
/* The grid item is __body; __text stays an inline span so the marker follows
   every wrapped line and is only as wide as the text. */
.mk-cvline__text{background:linear-gradient(var(--cvt-bg-accent),var(--cvt-bg-accent)) no-repeat 0 100%/100% 38%;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.mk-stage__fit{display:flex;flex-wrap:wrap;gap:2px var(--cvt-space-2);margin:0;padding:var(--cvt-space-2) var(--cvt-space-3);border-radius:var(--cvt-radius-md);background:var(--cvt-bg-brand-soft);font-size:14px;line-height:1.4}
.mk-stage__fit strong{color:var(--cvt-text-link)}
@media (min-width:900px){
  .mk-hero{padding:var(--cvt-space-12) 0 var(--cvt-space-12)}
  .mk-hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px}
  .mk-stage{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start;padding:var(--cvt-space-5);border-radius:var(--cvt-radius-xl)}
  .mk-stage__label,.mk-stage__fit{grid-column:1/-1}
  .mk-stage__job{margin-top:22px}
}
@media (hover:hover){
  .mk-stage:has(.mk-req[data-ref="1"]:hover) .mk-cvline[data-ref="1"] .mk-cvline__text,
  .mk-stage:has(.mk-req[data-ref="2"]:hover) .mk-cvline[data-ref="2"] .mk-cvline__text,
  .mk-stage:has(.mk-req[data-ref="3"]:hover) .mk-cvline[data-ref="3"] .mk-cvline__text{background-size:100% 100%}
}

/* Value points under the hero: four short ledger entries. */
.mk-points{display:grid;gap:var(--cvt-space-4);margin:var(--cvt-space-10) 0 0;padding:0;list-style:none}
.mk-points li{padding-top:var(--cvt-space-3);border-top:2px solid var(--cvt-text-primary);color:var(--cvt-text-secondary);font-size:15px;line-height:1.5}
.mk-points strong{display:block;margin-bottom:var(--cvt-space-1);color:var(--cvt-text-primary);font-size:16px}
@media (min-width:600px){.mk-points{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cvt-space-5) var(--cvt-space-6)}}
@media (min-width:900px){.mk-points{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ── Proof ledger, large ─────────────────────────────────────────────── */
.mk-ledger .cvt-ledger__text+.cvt-ledger__text{margin-top:var(--cvt-space-2)}
@media (min-width:900px){
  .mk-ledger{grid-template-columns:1fr 1fr 1.2fr}
  .mk-ledger .cvt-ledger__item--draft{grid-column:auto}
  .mk-ledger .cvt-ledger__item{padding:var(--cvt-space-5)}
  .mk-ledger .cvt-ledger__text{font-size:17px}
}

/* ── How it works ────────────────────────────────────────────────────── */
.mk-steps{display:grid;gap:var(--cvt-space-4);margin:0;padding:0;list-style:none;counter-reset:mk-step}
.mk-steps>li{counter-increment:mk-step;display:grid;align-content:start;grid-template-columns:40px 1fr;gap:var(--cvt-space-4);padding:var(--cvt-space-5);border:1px solid var(--cvt-border-subtle);border-radius:var(--cvt-radius-lg);background:var(--cvt-bg-surface)}
.mk-steps>li::before{content:counter(mk-step);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--cvt-bg-brand);color:var(--cvt-text-on-brand);font:700 18px/1 var(--cvt-font-display)}
.mk-steps p{margin:var(--cvt-space-2) 0 0;color:var(--cvt-text-secondary)}
.mk-tag{display:inline-flex;margin-top:var(--cvt-space-3);padding:2px 10px;border-radius:var(--cvt-radius-pill);background:var(--cvt-bg-sunken);color:var(--cvt-text-secondary);font-size:var(--cvt-type-small-size);font-weight:600}
@media (min-width:900px){.mk-steps{grid-template-columns:repeat(3,minmax(0,1fr))}.mk-steps>li{grid-template-columns:1fr}}

/* ── Comparison with a general chat ──────────────────────────────────── */
.mk-compare{display:grid;gap:var(--cvt-space-3)}
.mk-compare__head{display:none}
.mk-compare__row{display:grid;gap:0;overflow:hidden;border:1px solid var(--cvt-border-subtle);border-radius:var(--cvt-radius-lg);background:var(--cvt-bg-surface)}
.mk-compare__cell{padding:var(--cvt-space-3) var(--cvt-space-4);font-size:16px;line-height:1.5}
.mk-compare__cell--chat{background:var(--cvt-bg-sunken);color:var(--cvt-text-secondary)}
.mk-compare__label{display:block;margin-bottom:2px;font:var(--cvt-type-eyebrow-weight) var(--cvt-type-eyebrow-size)/1.4 var(--cvt-font-ui);letter-spacing:var(--cvt-type-eyebrow-tracking);text-transform:uppercase;color:var(--cvt-text-label-accent)}
@media (min-width:900px){
  .mk-compare{gap:0;overflow:hidden;border:1px solid var(--cvt-border-subtle);border-radius:var(--cvt-radius-lg);background:var(--cvt-bg-surface)}
  .mk-compare__head,.mk-compare__row{display:grid;grid-template-columns:1fr 1fr}
  .mk-compare__head span{padding:var(--cvt-space-3) var(--cvt-space-5);font:var(--cvt-type-eyebrow-weight) var(--cvt-type-eyebrow-size)/1.4 var(--cvt-font-ui);letter-spacing:var(--cvt-type-eyebrow-tracking);text-transform:uppercase;color:var(--cvt-text-label-accent);border-bottom:1px solid var(--cvt-border-subtle)}
  .mk-compare__row{border:0;border-radius:0;border-bottom:1px solid var(--cvt-border-subtle)}
  .mk-compare__row:last-child{border-bottom:0}
  .mk-compare__cell{padding:var(--cvt-space-4) var(--cvt-space-5)}
  .mk-compare__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* ── Reviews: real, consented quotes only (testimonials.py) ──────────
   Phones: a swipe row with scroll-snap, no script and no auto-advance, so
   there is no motion to reduce.
   900px and up: a plain grid. Panel with the 2px ink top rule of the guide
   card; no photo, stars or score. */
.mk-reviews{display:flex;gap:var(--cvt-space-4);margin:0 calc(var(--cvt-space-4) * -1);padding:var(--cvt-space-1) var(--cvt-space-4) var(--cvt-space-3);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;list-style:none}
.mk-reviews:focus-visible{outline:2px solid var(--cvt-focus-ring);outline-offset:2px}
.mk-review{flex:0 0 84%;max-width:420px;min-width:0;scroll-snap-align:center}
.mk-review:only-child{flex-basis:100%;max-width:none}
.mk-review__quote{display:grid;gap:var(--cvt-space-4);height:100%;margin:0;padding:var(--cvt-space-5);border:1px solid var(--cvt-border-subtle);border-top:2px solid var(--cvt-text-primary);border-radius:0 0 var(--cvt-radius-lg) var(--cvt-radius-lg);background:var(--cvt-bg-surface)}
.mk-review__text{margin:0;font-size:18px;line-height:1.55;overflow-wrap:anywhere;hyphens:auto}
.mk-review__by{display:grid;gap:2px;align-self:end;font-size:16px;line-height:1.4}
.mk-review__name{font-weight:700;font-style:normal}
.mk-review__role,.mk-review__date{color:var(--cvt-text-secondary)}
.mk-review__date{font:var(--cvt-type-mono-size)/1.5 var(--cvt-font-mono)}
@media (min-width:600px){.mk-review{flex-basis:46%}}
@media (min-width:900px){
  .mk-reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin:0;padding:0;overflow:visible;scroll-snap-type:none}
  .mk-review,.mk-review:only-child{max-width:none}
  .mk-reviews--single{grid-template-columns:minmax(0,640px)}
}
@media (prefers-reduced-motion:reduce){.mk-reviews{scroll-behavior:auto}}

/* ── Included: bento of our own screens and documents ───────────────── */
.mk-bento{display:grid;gap:var(--cvt-space-4)}
.mk-tile{display:grid;align-content:start;gap:var(--cvt-space-2);min-width:0;padding:var(--cvt-space-4);border:1px solid var(--cvt-border-subtle);border-radius:var(--cvt-radius-lg);background:var(--cvt-bg-surface)}
.mk-tile p{margin:0;color:var(--cvt-text-secondary)}
.mk-tile__shot{display:grid;align-items:center;height:200px;margin-bottom:var(--cvt-space-2);overflow:hidden;padding:var(--cvt-space-4);border-radius:var(--cvt-radius-md);background:var(--cvt-bg-sunken)}
.mk-tile__shot--doc{align-items:start;justify-items:center;padding-bottom:0}
.mk-tile__shot--doc img{display:block;width:72%;max-width:260px;height:auto;border:1px solid var(--cvt-border-subtle);border-bottom:0;border-radius:var(--cvt-radius-sm) var(--cvt-radius-sm) 0 0;box-shadow:var(--cvt-shadow-e1)}
.mk-tile__shot--photo{padding:0}
.mk-tile__shot--photo picture,.mk-tile__shot--photo img{display:block;width:100%;height:100%}
.mk-tile__shot--photo img{object-fit:cover;object-position:62% 22%;filter:saturate(.72) sepia(.08)}
.mk-tile .mk-tile__shot p{color:var(--cvt-text-primary)}
.mk-fitpanel,.mk-atspanel{display:grid;gap:6px;padding:var(--cvt-space-3);border:1px solid var(--cvt-border-subtle);border-radius:var(--cvt-radius-md);background:var(--cvt-bg-surface)}
.mk-fitpanel__head{display:flex;justify-content:space-between;gap:var(--cvt-space-2);font-size:14px;font-weight:700}
.mk-fitpanel__head span{font:600 13px/1.4 var(--cvt-font-mono);color:var(--cvt-text-link)}
.mk-fitrow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--cvt-space-2);align-items:center;font-size:13px;line-height:1.35}
.mk-fitrow span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-chip{padding:1px 8px;border-radius:var(--cvt-radius-pill);font-size:12px;font-weight:700}
.mk-chip--met{background:var(--cvt-status-success-bg);color:var(--cvt-status-success-fg)}
.mk-chip--gap{background:var(--cvt-status-warning-bg);color:var(--cvt-status-warning-fg)}
.mk-atsrow{display:grid;grid-template-columns:minmax(0,1fr) 45%;gap:var(--cvt-space-3);align-items:center;font-size:13px}
.mk-atsbar{position:relative;height:8px;overflow:hidden;border-radius:var(--cvt-radius-pill);background:var(--cvt-bg-sunken)}
.mk-atsbar::after{content:"";position:absolute;inset:0 auto 0 0;width:88%;border-radius:inherit;background:var(--cvt-bg-brand)}
.mk-atsbar--2::after{width:100%}
.mk-atsbar--3::after{width:76%}
.mk-big{display:block;margin-bottom:var(--cvt-space-1);font:700 44px/1 var(--cvt-font-display);color:var(--cvt-text-link)}
@media (min-width:600px){.mk-bento{grid-template-columns:repeat(2,minmax(0,1fr))}.mk-tile--fit,.mk-tile--langs{grid-column:1/-1}}
@media (min-width:900px){.mk-bento{grid-template-columns:repeat(3,minmax(0,1fr))}.mk-tile--fit{grid-column:span 2}.mk-tile--fit .mk-tile__shot{padding:var(--cvt-space-4) 12%}}

/* ── Templates: specimen sheet (desktop), swipe track (phones) ─────────
   Base: a scroll-snap row of linked cards, usable without the script. The
   script adds .is-on, shows the index (900px and up), the counter and the
   buttons, and moves .is-active. */
.mk-tpl{display:grid;gap:var(--cvt-space-3);min-width:0}
.mk-tpl__track{display:flex;gap:var(--cvt-space-4);margin:0 calc(var(--cvt-space-4) * -1);padding:var(--cvt-space-1) var(--cvt-space-4) var(--cvt-space-3);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;list-style:none}
.mk-tpl__card{flex:0 0 64%;max-width:300px;scroll-snap-align:center}
.mk-tpl__card a{display:grid;gap:var(--cvt-space-2);color:var(--cvt-text-primary);text-decoration:none}
.mk-tpl__card img{display:block;width:100%;height:auto;border:1px solid var(--cvt-border-subtle);border-radius:var(--cvt-radius-sm);background:var(--cvt-bg-surface);box-shadow:var(--cvt-shadow-e1)}
.mk-tpl__name{font-size:16px;font-weight:700}
.mk-tpl__bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cvt-space-2)}
.mk-tpl__count{min-width:56px;font:var(--cvt-type-mono-size)/1.5 var(--cvt-font-mono);color:var(--cvt-text-secondary)}
.mk-tpl__pause{min-height:var(--cvt-size-touch-min);margin-left:auto}
.mk-tpl__index{display:none;margin:0;padding:0;list-style:none}
.mk-tpl .mk-tpl__bar[hidden],.mk-tpl .mk-tpl__pause[hidden]{display:none}
.mk-tpl__pick{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;width:100%;min-height:var(--cvt-size-touch-min);padding:var(--cvt-space-2) var(--cvt-space-3);border:0;border-bottom:1px solid var(--cvt-border-subtle);border-radius:0;background:none;color:var(--cvt-text-primary);font:600 18px/1.3 var(--cvt-font-ui);text-align:left;cursor:pointer}
.mk-tpl__num{font:var(--cvt-type-mono-size)/1 var(--cvt-font-mono);color:var(--cvt-text-label-accent)}
.mk-tpl__pick[aria-pressed="true"]{background:var(--cvt-bg-brand-soft);color:var(--cvt-text-link)}
.mk-tpl__pick:focus-visible{outline:2px solid var(--cvt-focus-ring);outline-offset:-2px}
.mk-tpl__track:focus-visible{outline:2px solid var(--cvt-focus-ring);outline-offset:2px}
.mk-tpl.is-on .mk-tpl__card:not(.is-active){transform:scale(.92)}
.mk-tpl.is-on .mk-tpl__card:not(.is-active) img{opacity:.55}
@media (min-width:600px){.mk-tpl__card{flex-basis:40%}}
@media (min-width:900px){
  .mk-tpl__track{margin:0;padding:var(--cvt-space-1) 0 var(--cvt-space-3)}
  .mk-tpl__card{flex-basis:26%}
  .mk-tpl.is-on{grid-template-columns:minmax(0,1fr) minmax(0,420px);grid-template-rows:auto 1fr;column-gap:64px;align-items:start}
  .mk-tpl.is-on .mk-tpl__index{display:block;grid-column:1;grid-row:1;border-top:1px solid var(--cvt-border-subtle)}
  .mk-tpl.is-on .mk-tpl__bar{grid-column:1;grid-row:2;align-self:start}
  .mk-tpl.is-on .mk-tpl__prev,.mk-tpl.is-on .mk-tpl__next{display:none}
  .mk-tpl.is-on .mk-tpl__track{display:grid;grid-column:2;grid-row:1/span 2;overflow:visible;padding:0}
  .mk-tpl.is-on .mk-tpl__card{grid-area:1/1;max-width:none}
  .mk-tpl.is-on .mk-tpl__card:not(.is-active){visibility:hidden;opacity:0;transform:none}
}

/* ── Prices ──────────────────────────────────────────────────────────── */
.mk-prices{display:grid;gap:var(--cvt-space-4)}
.mk-price{display:flex;flex-direction:column;gap:var(--cvt-space-2);min-width:0;padding:var(--cvt-space-5);border:1px solid var(--cvt-border-subtle);border-radius:var(--cvt-radius-lg);background:var(--cvt-bg-surface)}
.mk-price--free{border-color:var(--cvt-bg-brand);box-shadow:inset 0 0 0 1px var(--cvt-bg-brand)}
.mk-price__name{margin:0;font:var(--cvt-type-heading-4-weight) var(--cvt-type-heading-4-size)/var(--cvt-type-heading-4-line) var(--cvt-font-ui)}
.mk-price__amount{font:700 40px/1 var(--cvt-font-display);letter-spacing:-.02em}
.mk-price__amount sup{margin-right:1px;font-size:.6em;vertical-align:.55em}
.mk-price__amount small{font:600 14px/1 var(--cvt-font-ui);letter-spacing:0;color:var(--cvt-text-secondary)}
.mk-price__qty{font-weight:700}
.mk-price__line{margin:0;color:var(--cvt-text-secondary);font-size:var(--cvt-type-body-size)}
.mk-price__cta{margin-top:auto;padding-top:var(--cvt-space-3)}
.mk-price__cta .cvt-btn{width:100%;white-space:normal;text-align:center}
@media (min-width:600px){.mk-prices{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.mk-prices{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mk-price-notes{display:grid;gap:var(--cvt-space-4);margin:var(--cvt-space-6) 0 0;padding:0;list-style:none}
.mk-price-notes li{min-width:0}
.mk-price-notes strong{display:block}
.mk-price-notes p{margin:var(--cvt-space-1) 0 0;color:var(--cvt-text-secondary);font-size:var(--cvt-type-body-size)}
@media (min-width:900px){.mk-price-notes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mk-alert{margin-bottom:var(--cvt-space-4);font-size:var(--cvt-type-body-size)}

/* ── FAQ: <details> with the question as an H3 inside <summary> ──────── */
.mk-faq{display:grid;align-items:start;gap:0 var(--cvt-space-8);border-top:1px solid var(--cvt-border-subtle)}
.mk-faq details{border-bottom:1px solid var(--cvt-border-subtle)}
.mk-faq summary{display:flex;justify-content:space-between;align-items:center;gap:var(--cvt-space-4);min-height:var(--cvt-size-touch-min);padding:var(--cvt-space-3) 0;list-style:none;cursor:pointer}
.mk-faq summary::-webkit-details-marker{display:none}
.mk-faq summary::after{content:"+";flex:none;color:var(--cvt-text-label-accent);font:700 24px/1 var(--cvt-font-ui)}
.mk-faq details[open] summary::after{content:"\2212"}
.mk-faq summary:focus-visible{outline:2px solid var(--cvt-focus-ring);outline-offset:-2px}
.mk-faq summary h3{margin:0;font:var(--cvt-type-heading-4-weight) 17px/1.4 var(--cvt-font-ui)}
.mk-faq .mk-faq__a{margin:0 0 var(--cvt-space-4);max-width:68ch;color:var(--cvt-text-secondary);line-height:1.6}
.mk-faq .mk-faq__a a{color:var(--cvt-text-link);font-weight:600;text-underline-offset:3px}
@media (min-width:900px){.mk-faq{grid-template-columns:1fr 1fr;border-top:0}.mk-faq details:nth-child(-n+2){border-top:1px solid var(--cvt-border-subtle)}}

/* ── Guides ──────────────────────────────────────────────────────────── */
.mk-guides{display:grid;gap:var(--cvt-space-4)}
.mk-guides .guide-card{display:flex;flex-direction:column;gap:var(--cvt-space-2);min-width:0;padding:var(--cvt-space-5);border-top:2px solid var(--cvt-text-primary);border-radius:0 0 var(--cvt-radius-md) var(--cvt-radius-md);background:var(--cvt-bg-canvas);color:var(--cvt-text-primary);text-decoration:none}
.mk-section--alt .mk-guides .guide-card{background:var(--cvt-bg-canvas)}
.mk-guides .guide-card:hover{background:var(--cvt-bg-sunken)}
.mk-guides .guide-card:focus-visible{outline:2px solid var(--cvt-focus-ring);outline-offset:2px}
.mk-guides .guide-card h3{margin:0}
.mk-guides .guide-card p{margin:0;color:var(--cvt-text-secondary);font-size:var(--cvt-type-body-size)}
.mk-guide__more{margin-top:auto;padding-top:var(--cvt-space-2);color:var(--cvt-text-label-accent);font-weight:700}
@media (min-width:600px){.mk-guides{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.mk-guides{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ── Final band and footer (ink) ─────────────────────────────────────── */
.mk-final{padding:0 0 var(--cvt-space-12)}
.mk-band{display:grid;gap:var(--cvt-space-4);padding:var(--cvt-space-10) var(--cvt-space-6);border-radius:var(--cvt-radius-xl);background:var(--cvt-bg-inverse);color:var(--cvt-text-on-inverse)}
.mk-band p{margin:0;max-width:56ch;color:var(--cvt-text-on-inverse-muted);font-size:17px}
.mk-band .mk-meta{font-size:var(--cvt-type-body-size)}
@media (min-width:900px){.mk-final{padding-bottom:var(--cvt-space-20)}.mk-band{padding:var(--cvt-space-16)}}
/* Footer: an ink card with rounded top corners (stodio reference). Link
   columns separated by hairlines, the wordmark across the full width, then
   the operator line. Two columns on phones, three from 600px. */
.mk-footer{margin-inline:var(--cvt-space-2);padding:var(--cvt-space-12) 0 calc(var(--cvt-space-8) + 72px);border-radius:var(--cvt-radius-xl) var(--cvt-radius-xl) 0 0;background:var(--cvt-bg-inverse);color:var(--cvt-text-on-inverse-muted);font-size:15px}
@media (min-width:600px){.mk-footer{margin-inline:var(--cvt-space-4);padding-bottom:var(--cvt-space-8)}}
.mk-footer a{display:inline-block;min-height:var(--cvt-size-touch-min);line-height:var(--cvt-size-touch-min);color:var(--cvt-text-on-inverse);text-decoration:underline;text-underline-offset:3px}
.mk-footer a:focus-visible{outline:2px solid var(--cvt-focus-ring-inverse);outline-offset:2px}
.mk-footer__inner{display:grid;gap:var(--cvt-space-12);container-type:inline-size}
.mk-footer__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cvt-space-6) 0}
@media (min-width:600px){.mk-footer__cols{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mk-footer__col{margin:0;padding:0 0 0 var(--cvt-space-4);list-style:none;border-left:1px solid var(--cvt-border-inverse)}
@media (min-width:900px){.mk-footer__col{padding-left:var(--cvt-space-6)}}
.mk-footer .mk-footer__col a{display:inline-flex;align-items:center;min-width:var(--cvt-size-touch-min);line-height:1.3;font-size:17px;text-decoration:none}
/* Phones: the legal column takes the full row, so long labels
   ("Datenschutzerklärung") never break mid-word. */
.mk-footer__col:nth-child(3){grid-column:1/-1}
@media (min-width:600px){.mk-footer__col:nth-child(3){grid-column:auto}}
@media (min-width:900px){.mk-footer .mk-footer__col a{font-size:19px}}
/* Reopens the cookie choice (same opener the legal pages' footers use). */
.mk-footer__btn{display:inline-flex;align-items:center;min-height:var(--cvt-size-touch-min);min-width:var(--cvt-size-touch-min);padding:0;border:0;background:transparent;color:var(--cvt-text-on-inverse);font:400 17px/1.3 var(--cvt-font-ui);text-align:left;cursor:pointer}
@media (min-width:900px){.mk-footer__btn{font-size:19px}}
.mk-footer__btn:focus-visible{outline:2px solid var(--cvt-focus-ring-inverse);outline-offset:2px}
@media (hover:hover){.mk-footer__btn:hover{text-decoration:underline}}
.mk-footer a.mk-footer__mark{display:flex;align-items:center;gap:.18em;min-height:0;line-height:1;font:700 56px/1 var(--cvt-font-ui);font-size:clamp(48px,20cqi,240px);letter-spacing:-.04em;color:var(--cvt-text-on-inverse);text-decoration:none}
.mk-footer__mark img{width:.72em;height:.72em;flex:none}
.mk-footer__copy{margin:0;padding-top:var(--cvt-space-6);border-top:1px solid var(--cvt-border-inverse);text-align:center;line-height:1.6}
.mk-footer .cvt-version{color:var(--cvt-text-on-inverse-muted)}
@media (hover:hover){.mk-footer .mk-footer__col a:hover{text-decoration:underline}}

/* ── Phone sticky CTA: appears after the hero CTA scrolls away ───────── */
.mk-sticky{position:fixed;inset:auto 0 0 0;z-index:40;transform:translateY(110%);transition:transform var(--cvt-motion-duration-base) var(--cvt-motion-ease-standard)}
.mk-sticky.is-visible{transform:none}
.mk-sticky .cvt-btn{white-space:nowrap}
@media (min-width:600px){.mk-sticky{display:none}}
/* Never over the first-visit cookie banner (Ticket 04, H8). */
body:has(#cv-cookie-banner:not(.hidden)) .mk-sticky{display:none}

/* ── Auth dialog (ids and script unchanged; the look moves to tokens) ── */
.mk-auth-overlay{position:fixed;inset:0;z-index:1000;align-items:center;justify-content:center;padding:var(--cvt-space-4);background:var(--cvt-overlay-scrim)}
.mk-auth{width:100%;max-width:440px;max-height:calc(100vh - 2*var(--cvt-space-4));overflow:auto;padding:var(--cvt-space-6);border-radius:var(--cvt-radius-lg);background:var(--cvt-bg-surface);color:var(--cvt-text-primary);box-shadow:var(--cvt-shadow-e3)}
.mk-auth__head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--cvt-space-3);margin-bottom:var(--cvt-space-4)}
.mk-auth__title{margin:0;padding-top:10px;font:var(--cvt-type-heading-4-weight) 20px/1.3 var(--cvt-font-ui)}
.mk-auth__divider{display:flex;align-items:center;gap:var(--cvt-space-3);margin:var(--cvt-space-4) 0;color:var(--cvt-text-secondary);font-size:var(--cvt-type-small-size)}
.mk-auth__divider::before,.mk-auth__divider::after{content:"";flex:1;height:1px;background:var(--cvt-border-subtle)}
.mk-auth .cvt-field{margin-bottom:var(--cvt-space-3)}
.mk-auth__links{display:grid;gap:var(--cvt-space-1);justify-items:center;margin-top:var(--cvt-space-2)}
.mk-auth__links .cvt-btn{width:100%}
.mk-auth__msg{margin:var(--cvt-space-3) 0 0;font-size:15px;font-weight:600;text-align:center;color:var(--cvt-status-success-fg)}
.mk-auth__err{margin:var(--cvt-space-3) 0 0;font-size:15px;font-weight:600;text-align:center;color:var(--cvt-status-danger-fg)}
.mk-auth__err a{color:inherit}
.mk-auth__hint{margin:0 0 var(--cvt-space-3);color:var(--cvt-text-secondary);font-size:var(--cvt-type-small-size);line-height:var(--cvt-type-small-line)}
@media (max-width:599px){
  .mk-auth-overlay{align-items:flex-end;padding:0}
  .mk-auth{max-width:none;max-height:92vh;padding:var(--cvt-space-2) var(--cvt-space-4) calc(var(--cvt-space-4) + env(safe-area-inset-bottom));border-radius:var(--cvt-radius-lg) var(--cvt-radius-lg) 0 0}
  .mk-auth .cvt-grabber{display:block;width:36px;height:4px;margin:var(--cvt-space-1) auto var(--cvt-space-2);border-radius:2px;background:var(--cvt-border-control)}
  /* The first-visit cookie banner sits above everything at the bottom; while
     it is open the sheet becomes a top card so its buttons stay reachable. */
  body:has(#cv-cookie-banner:not(.hidden)) .mk-auth-overlay{align-items:flex-start;padding:var(--cvt-space-2)}
  /* --mk-cookie-h is the banner's measured height (landing script); the
     fallback covers a browser without ResizeObserver. */
  body:has(#cv-cookie-banner:not(.hidden)) .mk-auth{max-height:calc(100vh - var(--mk-cookie-h,340px) - var(--cvt-space-4));border-radius:var(--cvt-radius-lg)}
}

/* ── Referral banner ─────────────────────────────────────────────────── */
.mk-ref{background:var(--cvt-bg-accent-soft);border-bottom:1px solid var(--cvt-border-subtle)}
.mk-ref__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--cvt-space-2) var(--cvt-space-4);padding:var(--cvt-space-2) 0}
.mk-ref__text{display:inline-flex;align-items:center;gap:var(--cvt-space-2);font-weight:600}
.mk-ref__actions{display:flex;align-items:center;gap:var(--cvt-space-2)}

/* ── Pricing page ────────────────────────────────────────────────────── */
.mk-pr-hero{padding:var(--cvt-space-10) 0 var(--cvt-space-6)}
.mk-pr-hero h1 em{font-style:normal;color:var(--cvt-text-link)}
.mk-pr-hero .cvt-lede{margin-top:var(--cvt-space-4)}
@media (min-width:900px){.mk-pr-hero{padding:var(--cvt-space-16) 0 var(--cvt-space-8)}}
.mk-explainer{margin-bottom:var(--cvt-space-6)}
.mk-explainer p{margin:var(--cvt-space-1) 0 0;color:var(--cvt-text-secondary)}
.mk-shared{display:flex;flex-wrap:wrap;gap:var(--cvt-space-2);margin:var(--cvt-space-6) 0 0;padding:var(--cvt-space-4) var(--cvt-space-5);border-radius:var(--cvt-radius-lg);background:var(--cvt-bg-sunken)}
.mk-shared__title{width:100%;font-weight:700}
.mk-shared .cvt-chip{min-height:32px;font-size:14px}
.mk-trust-grid{display:grid;gap:var(--cvt-space-4);margin-top:var(--cvt-space-6)}
.mk-trust-grid h3{margin:0;font:var(--cvt-type-heading-4-weight) var(--cvt-type-heading-4-size)/var(--cvt-type-heading-4-line) var(--cvt-font-ui)}
.mk-trust-grid p{margin:var(--cvt-space-1) 0 0;color:var(--cvt-text-secondary);font-size:var(--cvt-type-body-size)}
@media (min-width:900px){.mk-trust-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.mk-trust-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── Money-back guarantee (prototype H5) ─────────────────────────────────
   The summary sits before the first price card at every width, so on a
   phone it is read before any paid button. Each paid card repeats the
   short form under its button. The detail (#refunds) follows the cards. */
.mk-guarantee{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--cvt-space-3);align-items:start;margin:0 0 var(--cvt-space-4);padding:var(--cvt-space-4);border-radius:var(--cvt-radius-md);background:var(--cvt-bg-accent);color:var(--cvt-text-on-accent)}
.mk-guarantee svg{width:24px;height:24px;flex:none}
.mk-guarantee strong{display:block;font-size:17px}
.mk-guarantee p{margin:2px 0 0;font-size:15px}
.mk-guarantee a{color:var(--cvt-text-on-accent);font-weight:600}
.mk-guarantee--detail{margin:var(--cvt-space-6) 0 0;background:var(--cvt-bg-accent-soft);color:var(--cvt-text-primary)}
.mk-guarantee--detail svg{color:var(--cvt-text-label-accent)}
.mk-guarantee--detail h2{margin:0;font:var(--cvt-type-heading-4-weight) var(--cvt-type-heading-4-size)/var(--cvt-type-heading-4-line) var(--cvt-font-ui)}
.mk-guarantee--detail p+p{margin-top:var(--cvt-space-2)}
.mk-guarantee--detail a{color:var(--cvt-text-link)}
.mk-price__guarantee{display:flex;align-items:center;gap:var(--cvt-space-2);margin:var(--cvt-space-2) 0 0;font-size:14px;font-weight:600;color:var(--cvt-text-primary)}
.mk-price__guarantee svg{width:16px;height:16px;flex:none;color:var(--cvt-text-label-accent)}
.mk-checkout-error{display:none;margin-bottom:var(--cvt-space-4)}
.mk-promo{display:flex;align-items:center;gap:var(--cvt-space-2);margin:0 0 var(--cvt-space-4);color:var(--cvt-text-secondary);font-size:var(--cvt-type-body-size)}
.mk-page .testmode-banner{margin:0 0 var(--cvt-space-4)}
/* Coming-soon notice: hidden until a buy click records interest. */
.mk-cs{display:none}
.mk-cs.is-visible{display:grid}
.mk-cs .cvt-alert__text a{color:var(--cvt-text-link);font-weight:600}
.mk-band h2 em,.mk-band .cvt-display-2 em{font-style:normal;color:var(--cvt-text-on-brand-accent)}
/* ── Homepage motion ──────────────────────────────────────────────────
   Progressive enhancement, homepage only. A tiny script in the landing
   <head> adds .mk-motion to <html> when the browser has
   IntersectionObserver and the visitor has not asked for reduced motion.
   Without that class (no JS, old browser, reduced motion) none of this
   applies and every element renders in place. Elements below the hero are
   hidden only once the page script has tagged them with data-reveal and is
   observing them, so a script failure never leaves content invisible.
   Patterns adapted from the reference: a staggered hero rise, the hero stage
   linking sequence, fade-up section entrances with short staggers, and quiet state
   transitions. No lift or glow on buttons (design-system.md, States). */
.mk-motion{--mk-ease:var(--cvt-motion-ease-standard);--mk-rise:20px}
@media (max-width:599px){.mk-motion{--mk-rise:14px}}
@keyframes mk-rise{from{opacity:0;transform:translate3d(0,var(--mk-rise),0)}}
@keyframes mk-fade{from{opacity:0}}

/* Hero: copy rises in order; the stage links requirement to CV line. */
.mk-motion .mk-hero__copy>*{animation:mk-rise 700ms var(--mk-ease) backwards}
.mk-motion .mk-hero__copy>:nth-child(2){animation-delay:80ms}
.mk-motion .mk-hero__copy>:nth-child(3){animation-delay:160ms}
.mk-motion .mk-hero__copy>:nth-child(4){animation-delay:240ms}
.mk-motion .mk-hero__copy>:nth-child(5){animation-delay:320ms}

/* Hero stage: the link sequence. Each requirement's reference mark fills,
   the same mark appears beside the CV line that answers it, and the gold
   change marker draws under that line; then the next pair; then the gap
   and the fit strip. It plays once and rests on the final state, which is
   the element's own style (backwards fill only). The page script pauses it
   with .is-wait while the stage is out of view. */
@keyframes mk-ref-on{from{border-color:var(--cvt-border-control);background:var(--cvt-bg-surface);color:var(--cvt-text-secondary)}}
@keyframes mk-mark{from{background-size:0% 38%}}
.mk-motion .mk-stage .mk-refno{animation:mk-ref-on 420ms var(--mk-ease) backwards}
.mk-motion .mk-stage .mk-cvline__text{animation:mk-mark 700ms var(--mk-ease) backwards}
.mk-motion .mk-req[data-ref="1"] .mk-refno{animation-delay:700ms}
.mk-motion .mk-cvline[data-ref="1"] .mk-refno{animation-delay:900ms}
.mk-motion .mk-cvline[data-ref="1"] .mk-cvline__text{animation-delay:1000ms}
.mk-motion .mk-req[data-ref="2"] .mk-refno{animation-delay:1600ms}
.mk-motion .mk-cvline[data-ref="2"] .mk-refno{animation-delay:1800ms}
.mk-motion .mk-cvline[data-ref="2"] .mk-cvline__text{animation-delay:1900ms}
.mk-motion .mk-req[data-ref="3"] .mk-refno{animation-delay:2500ms}
.mk-motion .mk-cvline[data-ref="3"] .mk-refno{animation-delay:2700ms}
.mk-motion .mk-cvline[data-ref="3"] .mk-cvline__text{animation-delay:2800ms}
.mk-motion .mk-req--gap em{animation:mk-fade 500ms var(--mk-ease) 3400ms backwards}
.mk-motion .mk-stage__fit{animation:mk-rise 600ms var(--mk-ease) 3800ms backwards}
.mk-motion .mk-stage.is-wait *{animation-play-state:paused}
.mk-motion .mk-stage .mk-cvline__text{transition:background-size var(--cvt-motion-duration-base) var(--mk-ease)}

/* Templates: neighbours sit back on the phone track; the specimen sheet
   cross-fades between templates. */
.mk-motion .mk-tpl.is-on .mk-tpl__card{transition:opacity 400ms var(--mk-ease),transform 400ms var(--mk-ease),visibility 0s linear 0s}
.mk-motion .mk-tpl.is-on .mk-tpl__card img{transition:opacity 400ms var(--mk-ease)}
@media (min-width:900px){.mk-motion .mk-tpl.is-on .mk-tpl__card:not(.is-active){transition:opacity 400ms var(--mk-ease),visibility 0s linear 400ms}}
.mk-motion .mk-tpl__pick{transition:background-color var(--cvt-motion-duration-base) var(--mk-ease),color var(--cvt-motion-duration-base) var(--mk-ease)}

/* Section entrances: tagged by the page script, revealed on scroll. */
.mk-motion [data-reveal]{transition:opacity 700ms var(--mk-ease),transform 700ms var(--mk-ease);transition-delay:calc(var(--mk-i,0) * 70ms)}
.mk-motion [data-reveal]:not(.is-in){opacity:0;transform:translate3d(0,var(--mk-rise),0)}
/* A keyboard user never tabs into something still faded out. */
.mk-motion [data-reveal]:not(.is-in):focus-within{opacity:1;transform:none;transition:none}

/* Interaction states: colour and border shifts, a pressed nudge, arrows
   that move. Pointer-only flourishes stay behind (hover:hover). */
.mk-motion .cvt-btn{transition:background-color var(--cvt-motion-duration-base) var(--mk-ease),border-color var(--cvt-motion-duration-base) var(--mk-ease),color var(--cvt-motion-duration-base) var(--mk-ease),transform var(--cvt-motion-duration-fast) var(--mk-ease)}
.mk-motion .cvt-btn:active{transform:scale(.98)}
.mk-motion .mk-nav{transition:box-shadow var(--cvt-motion-duration-slow) var(--mk-ease)}
.mk-motion .mk-nav.is-scrolled{box-shadow:var(--cvt-shadow-e2)}
.mk-motion .mk-steps>li,.mk-motion .mk-tile,.mk-motion .mk-price,.mk-motion .mk-compare__row,.mk-motion .mk-guides .guide-card{transition:opacity 700ms var(--mk-ease),transform 700ms var(--mk-ease),border-color var(--cvt-motion-duration-base) var(--mk-ease),background-color var(--cvt-motion-duration-base) var(--mk-ease),box-shadow var(--cvt-motion-duration-slow) var(--mk-ease);transition-delay:calc(var(--mk-i,0) * 70ms),calc(var(--mk-i,0) * 70ms),0s,0s,0s}
.mk-motion .mk-guide__more::after{content:"\2192";display:inline-block;margin-left:6px;transition:transform var(--cvt-motion-duration-base) var(--mk-ease)}
.mk-motion .mk-faq summary::after{transition:transform var(--cvt-motion-duration-base) var(--mk-ease)}
.mk-motion .mk-faq details[open] summary::after{transform:rotate(180deg)}
.mk-motion .mk-faq details[open] .mk-faq__a{animation:mk-rise 360ms var(--mk-ease) backwards}
@media (hover:hover){
  .mk-motion .mk-steps>li:hover,.mk-motion .mk-tile:hover,.mk-motion .mk-price:hover{border-color:var(--cvt-border-control);box-shadow:var(--cvt-shadow-e1)}
  .mk-motion .mk-guides .guide-card:hover .mk-guide__more::after{transform:translateX(4px)}
}
/* Belt and braces: if the preference changes after load, stop everything. */
@media (prefers-reduced-motion:reduce){
  .mk-motion *,.mk-motion *::before,.mk-motion *::after{animation:none!important;transition:none!important}
  .mk-motion [data-reveal]{opacity:1!important;transform:none!important}
}
@media print{
  .mk-motion *,.mk-motion *::before,.mk-motion *::after{animation:none!important;transition:none!important}
  .mk-motion [data-reveal]{opacity:1!important;transform:none!important}
}

/* ── Content pages: About, FAQ, Help (Ticket 09 follow-up, W8b) ──────────
   Same shell as pricing: eyebrow, H1, lede, then sections on the canvas
   with an alternate surface band, the FAQ rows from the homepage, and the
   ink band. Help adds a search field, category cards with line icons and a
   contact sheet. */
.mk-pg-hero{padding:var(--cvt-space-10) 0 var(--cvt-space-6)}
.mk-pg-hero .cvt-lede{max-width:60ch;margin-top:var(--cvt-space-4)}
.mk-pg-hero .mk-cta-row{margin-top:var(--cvt-space-6)}
@media (min-width:900px){.mk-pg-hero{padding:var(--cvt-space-16) 0 var(--cvt-space-8)}}
.mk-prose{max-width:68ch}
.mk-prose p{margin:0 0 var(--cvt-space-4);color:var(--cvt-text-secondary);font-size:17px;line-height:1.65}
.mk-prose p:last-child{margin-bottom:0}
.mk-prose a{color:var(--cvt-text-link);font-weight:600;text-underline-offset:3px}
.mk-diff{display:grid;gap:var(--cvt-space-4)}
.mk-diff h3{margin:0;font:var(--cvt-type-heading-4-weight) var(--cvt-type-heading-4-size)/var(--cvt-type-heading-4-line) var(--cvt-font-ui)}
.mk-diff p{margin:var(--cvt-space-2) 0 0;color:var(--cvt-text-secondary)}
.mk-diff a{color:var(--cvt-text-link);font-weight:600;text-underline-offset:3px}
@media (min-width:900px){.mk-diff{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mk-faq[hidden],.mk-help-group[hidden]{display:none}
.mk-faq.mk-faq--one{grid-template-columns:minmax(0,1fr);border-top:1px solid var(--cvt-border-subtle)}
.mk-faq.mk-faq--one details:nth-child(-n+2){border-top:0}
.mk-search{position:relative;max-width:560px;margin-top:var(--cvt-space-6)}
.mk-search svg{position:absolute;left:var(--cvt-space-4);top:50%;width:20px;height:20px;transform:translateY(-50%);color:var(--cvt-text-secondary);pointer-events:none}
.mk-search .cvt-input{min-height:var(--cvt-size-touch-min);padding-left:calc(var(--cvt-space-4) + 32px)}
.mk-cats{display:grid;gap:var(--cvt-space-3)}
@media (min-width:600px){.mk-cats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.mk-cats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mk-cat{display:grid;align-content:start;gap:var(--cvt-space-1);min-width:0;padding:var(--cvt-space-5);border:1px solid var(--cvt-border-subtle);border-radius:var(--cvt-radius-lg);background:var(--cvt-bg-surface);color:var(--cvt-text-primary);text-decoration:none}
.mk-cat:hover{border-color:var(--cvt-border-control)}
.mk-cat:focus-visible{outline:2px solid var(--cvt-focus-ring);outline-offset:2px}
.mk-cat__icon{display:grid;place-items:center;width:40px;height:40px;margin-bottom:var(--cvt-space-2);border-radius:var(--cvt-radius-md);background:var(--cvt-bg-accent-soft);color:var(--cvt-text-label-accent)}
.mk-cat__icon svg{width:22px;height:22px}
.mk-cat__title{font:700 17px/1.3 var(--cvt-font-ui)}
.mk-cat__desc{color:var(--cvt-text-secondary);font-size:var(--cvt-type-body-size)}
.mk-cat__count{color:var(--cvt-text-secondary);font-size:var(--cvt-type-small-size);font-weight:600}
.mk-help-grid{display:grid;gap:var(--cvt-space-10)}
@media (min-width:900px){.mk-help-grid{grid-template-columns:minmax(0,1fr) 320px;gap:var(--cvt-space-12);align-items:start}}
.mk-help-group{margin:var(--cvt-space-8) 0 var(--cvt-space-2);scroll-margin-top:calc(var(--cvt-size-nav-height-mobile) + var(--cvt-space-4))}
.mk-help-group:first-child{margin-top:0}
.mk-side{display:grid;gap:var(--cvt-space-4);align-content:start;min-width:0}
.mk-side .cvt-panel p{margin:var(--cvt-space-1) 0 var(--cvt-space-4);color:var(--cvt-text-secondary)}
.mk-side-links{display:grid;margin:var(--cvt-space-2) 0 0;padding:0;list-style:none}
.mk-side-links a{display:flex;align-items:center;gap:var(--cvt-space-2);min-height:var(--cvt-size-touch-min);color:var(--cvt-text-link);font-weight:600;text-underline-offset:3px}
.mk-side-links a:focus-visible{outline:2px solid var(--cvt-focus-ring);outline-offset:2px}
.mk-side-links svg{width:16px;height:16px;flex:none}
.cvt-dialog.mk-contact{width:min(560px,100% - 2*var(--cvt-space-4))}
@media (max-width:599px){.cvt-dialog.mk-contact{width:100%}}
.mk-contact .cvt-dialog__body{display:grid;gap:var(--cvt-space-4)}
.mk-contact .cvt-dialog__body p{margin:0}
.mk-contact .cvt-dialog__actions{margin-top:0}
.mk-contact__sub{margin:0;color:var(--cvt-text-secondary)}
.mk-contact [hidden]{display:none}
.mk-pills{display:flex;flex-wrap:wrap;gap:var(--cvt-space-2)}
.mk-pill{min-height:var(--cvt-size-touch-min);padding:0 var(--cvt-space-4);border:1px solid var(--cvt-border-control);border-radius:var(--cvt-radius-pill);background:var(--cvt-bg-surface);color:var(--cvt-text-primary);font:600 15px/1.2 var(--cvt-font-ui);cursor:pointer}
.mk-pill:hover{background:var(--cvt-action-secondary-bg-hover)}
.mk-pill[aria-pressed="true"]{border-color:var(--cvt-bg-brand);background:var(--cvt-bg-brand);color:var(--cvt-text-on-brand)}
.mk-pill:focus-visible{outline:2px solid var(--cvt-focus-ring);outline-offset:2px}
.mk-contact__done{display:grid;justify-items:start;gap:var(--cvt-space-3)}
.mk-contact__done svg{width:32px;height:32px;color:var(--cvt-status-success-fg)}

/* ── Cookie banner and preferences on the system ───────────────────────
   _cookie_consent.html is shared with pages not yet on the system, so its
   own styles stay; these rules restyle it only where this partial loads.
   A paper card with the page's buttons: Accept is the green primary,
   Reject the outlined secondary, both the same size (rejecting is as easy
   as accepting). Behaviour, copy and ids are unchanged. */
body:has(#cv-cookie-banner) #cv-cookie-banner{left:var(--cvt-space-2);right:var(--cvt-space-2);bottom:var(--cvt-space-2);gap:var(--cvt-space-4);padding:var(--cvt-space-5);border:1px solid var(--cvt-border-subtle);border-radius:var(--cvt-radius-xl);background:var(--cvt-bg-surface);color:var(--cvt-text-primary);box-shadow:var(--cvt-shadow-e3);font:400 15px/1.5 var(--cvt-font-ui)}
@media (min-width:900px){body:has(#cv-cookie-banner) #cv-cookie-banner{left:50%;right:auto;bottom:var(--cvt-space-4);width:min(var(--cvt-size-container-max),100% - 2*var(--cvt-gutter));padding:var(--cvt-space-5) var(--cvt-space-6);transform:translateX(-50%)}}
body:has(#cv-cookie-banner) #cv-cookie-banner p{min-width:0}
body:has(#cv-cookie-banner) #cv-cookie-banner a{color:var(--cvt-text-link);font-weight:600;text-underline-offset:3px}
body:has(#cv-cookie-banner) #cv-cookie-banner a:focus-visible{outline:2px solid var(--cvt-focus-ring);outline-offset:2px}
body:has(#cv-cookie-banner) #cv-cookie-banner .cv-cookie-fine{margin-top:var(--cvt-space-1);color:var(--cvt-text-secondary);font-size:var(--cvt-type-small-size)}
body:has(#cv-cookie-banner) .cv-cookie-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cvt-space-2);width:100%}
@media (min-width:900px){body:has(#cv-cookie-banner) .cv-cookie-actions{display:flex;align-items:center;width:auto}}
body:has(#cv-cookie-banner) .cv-cookie-btn{min-height:var(--cvt-size-touch-min);padding:0 var(--cvt-space-5);border:1px solid transparent;border-radius:var(--cvt-radius-md);font:var(--cvt-type-button-weight) var(--cvt-type-button-size)/1.2 var(--cvt-font-ui);transition:background-color var(--cvt-motion-duration-fast) var(--cvt-motion-ease-standard)}
body:has(#cv-cookie-banner) .cv-cookie-btn:hover{opacity:1}
body:has(#cv-cookie-banner) .cv-cookie-btn:focus-visible{outline:2px solid var(--cvt-focus-ring);outline-offset:2px}
body:has(#cv-cookie-banner) .cv-cookie-btn-accept{background:var(--cvt-action-primary-bg);border-color:var(--cvt-action-primary-bg);color:var(--cvt-action-primary-fg)}
body:has(#cv-cookie-banner) .cv-cookie-btn-accept:hover{background:var(--cvt-action-primary-bg-hover)}
body:has(#cv-cookie-banner) .cv-cookie-btn-reject{background:transparent;border-color:var(--cvt-border-control);color:var(--cvt-text-primary)}
body:has(#cv-cookie-banner) .cv-cookie-btn-reject:hover{background:var(--cvt-action-secondary-bg-hover)}
body:has(#cv-cookie-banner) .cv-cookie-btn-manage{grid-column:1/-1;justify-self:start;padding:0;border:0;background:transparent;color:var(--cvt-text-link);font-weight:600;text-decoration:underline;text-underline-offset:3px}
body:has(#cv-cookie-banner) #cv-cookie-modal-overlay{background:var(--cvt-overlay-scrim)}
body:has(#cv-cookie-banner) #cv-cookie-modal{padding:var(--cvt-space-6);border-radius:var(--cvt-radius-lg);background:var(--cvt-bg-surface);color:var(--cvt-text-primary);box-shadow:var(--cvt-shadow-e3);font-family:var(--cvt-font-ui)}
body:has(#cv-cookie-banner) #cv-cookie-modal h2{font:700 20px/1.3 var(--cvt-font-ui);color:var(--cvt-text-primary)}
body:has(#cv-cookie-banner) #cv-cookie-modal .cv-cm-subtitle,body:has(#cv-cookie-banner) .cv-cm-cat-desc{color:var(--cvt-text-secondary);font-size:var(--cvt-type-small-size)}
body:has(#cv-cookie-banner) .cv-cm-category{border-color:var(--cvt-border-subtle);border-radius:var(--cvt-radius-md);background:var(--cvt-bg-canvas)}
body:has(#cv-cookie-banner) .cv-cm-cat-title{color:var(--cvt-text-primary)}
body:has(#cv-cookie-banner) .cv-toggle-slider{background:var(--cvt-border-control)}
body:has(#cv-cookie-banner) .cv-toggle-slider::before{background:var(--cvt-bg-surface)}
body:has(#cv-cookie-banner) .cv-toggle input:checked + .cv-toggle-slider{background:var(--cvt-action-primary-bg)}
body:has(#cv-cookie-banner) .cv-toggle input:focus-visible + .cv-toggle-slider{outline:2px solid var(--cvt-focus-ring);outline-offset:2px}
body:has(#cv-cookie-banner) .cv-cm-footer .cv-cookie-btn-accept{background:var(--cvt-action-primary-bg);border-color:var(--cvt-action-primary-bg);color:var(--cvt-action-primary-fg)}
body:has(#cv-cookie-banner) .cv-cm-footer .cv-cookie-btn-reject{background:transparent;border-color:var(--cvt-border-control);color:var(--cvt-text-primary)}