.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}
/* 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__wm{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}
/* 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)}
/* W108: below 600 the CTA may shrink and wrap to two lines inside its 44px
   height (fr "Commencer gratuitement" ran the bar to 346px at 320). */
@media (max-width:599px){
  .mk-nav .cvt-nav-actions{flex:0 1 auto;min-width:0}
  .mk-nav .cvt-nav-actions .cvt-btn:not(.cvt-btn--icon){white-space:normal;min-width:0;padding:0 var(--cvt-space-3);line-height:1.15;text-align:center;text-wrap:balance}
}
.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);clip-path:inset(0 -100vmax -100vmax -100vmax)}
/* W57: the open sheet and the bar read as one piece. The scrim is clipped
   at the sheet's top edge, so the bar (mark, Start free, close) keeps its
   colour; bar and sheet share the surface; the menu icon becomes a close
   icon; the page behind does not scroll. Opening focuses the sheet itself
   (static/cvt-ui.js), not its first link: a tap draws no focus box round
   that link (Safari), and Tab still lands on it with the ring. */
.mk-nav:has(.cvt-menu-btn[aria-expanded="true"]) .cvt-topnav{background:var(--cvt-bg-surface)}
.mk-nav .mk-ico-close,.mk-nav .cvt-menu-btn[aria-expanded="true"] .mk-ico-open{display:none}
.mk-nav .cvt-menu-btn[aria-expanded="true"] .mk-ico-close{display:block}
.mk-page:has(.mk-nav .cvt-menu-sheet:not([hidden])){overflow:hidden}
/* Keyboard open: the ring sits inside the sheet (its top edge is clipped
   by the scrim's clip-path, its sides by the viewport). */
.mk-nav .cvt-menu-sheet:focus-visible{outline-offset:-2px}
/* The marketing bar shows its links from 1440, not 1200: at 1200 the row
   did not fit in de, fr, ru or pt-pt even signed out (labels wrapped into
   the mark, fr scrolled sideways by 91px), and signed in it holds My
   applications and Sign out too. 1200 to 1439 keeps the menu button and
   the sheet (static/cvt-ui.js reads data-cvt-menu-until). From 1440 no
   label wraps. Signed in, the row is two items longer and did not fit even
   at 1440 (fr, ru, pt-pt ran under the wordmark), so the signed-in nav keeps
   the sheet at every width: the bar holds the mark, Open app and the menu
   button. */
@media (min-width:1200px) and (max-width:1439px){
  .mk-nav .cvt-navlinks{display:none}
  .mk-nav .cvt-menu-btn{display:inline-flex!important}
  .mk-nav .cvt-menu-sheet:not([hidden]){display:block!important}
}
@media (min-width:1200px){
  .mk-nav[data-mk-signed-in] .cvt-navlinks{display:none}
  .mk-nav[data-mk-signed-in] .cvt-menu-btn{display:inline-flex!important}
  .mk-nav[data-mk-signed-in] .cvt-menu-sheet:not([hidden]){display:block!important}
}
.mk-nav .cvt-navlinks a,.mk-nav .mk-nav-text{white-space:nowrap}
@media (min-width:900px){.mk-nav .cvt-menu-sheet{padding-inline:max(var(--cvt-gutter),calc((100% - var(--cvt-size-container-max)) / 2))}}
.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}}
/* Same-background neighbours (W61): no colour change marks the boundary, so
   stacking both paddings reads as a blank band. The gap is one section's
   padding instead: 48px on a phone (mobile.md), 80px from 900px. A section
   with its own inline padding-top keeps it. */
.mk-hero+.mk-section:not(.mk-section--alt),
.mk-section:not(.mk-section--alt)+.mk-section:not(.mk-section--alt),
.mk-section--alt+.mk-section--alt{padding-top:0}
.mk-section--alt+.mk-section--alt{border-top:0}
.mk-pg-hero+.mk-section:not(.mk-section--alt){padding-top:var(--cvt-space-6)}
@media (min-width:900px){
  .mk-hero+.mk-section:not(.mk-section--alt){padding-top:var(--cvt-space-8)}
  .mk-pg-hero+.mk-section:not(.mk-section--alt){padding-top:var(--cvt-space-12)}
}
.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 (desktop A.4) ──────────────────────────────────────────────────
   Copy on the left; on the right the product proof: real CVTailor UI in
   HTML (fit assessment, tailored CV, letter, answers) on a laptop drawn
   with two boxes. From 1200px the homepage runs on A.4's wider measure,
   with the bar aligned to it. */
.mk-home{--mk-home-max:1280px;--mk-font-serif:'Source Serif 4',Georgia,'Times New Roman',serif;--mk-font-hand:'Caveat','Segoe Print','Bradley Hand',cursive}
/* Homepage typography exception (approved by Sergio 2026-10-17;
   docs/design/brand.md, "Typography", "Homepage exception"): the
   display headings take A.4's editorial serif, the
   margin notes a handwriting face. Weight 700 is the only file shipped, so
   it is pinned and never synthesised. Logo, UI and app type are unchanged. */
.mk-home .cvt-display-1,.mk-home .cvt-display-2{font-family:var(--mk-font-serif);font-weight:700;letter-spacing:-.015em;font-synthesis:none}
.mk-home .cvt-display-1{font-size:clamp(34px,9vw,48px);line-height:1.06}
.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);justify-items:start;min-width:0}
.mk-hero__copy .cvt-lede{margin:0;max-width:34em}
.mk-hero__act{display:grid;justify-items:center;gap:var(--cvt-space-3);margin-top:var(--cvt-space-2)}
.mk-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cvt-space-3)}
.mk-hero__cta{gap:var(--cvt-space-3)}
.mk-hero__cta svg{width:20px;height:20px;flex:none}
.mk-hero__note{margin:0;color:var(--cvt-text-secondary);font-size:var(--cvt-type-small-size);text-align:center}
.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 proof. Base card and score styles; the laptop composition follows.
   Below 900px it is shown zoomed (mobile A.5); the fit section under the
   story repeats the fit card at reading size. */
.mk-proof{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));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-proof__label{grid-column:1/-1;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-secondary)}
.mk-laptop,.mk-proof__note,.mk-rays,.mk-proof__dots{display:none}
.mk-proof__bar{grid-column:1/-1;margin:0;color:var(--cvt-text-secondary);font-size:13px;font-weight:600;line-height:1.35}
.mk-card{position:relative;z-index:1;min-width:0;padding:var(--cvt-space-4);border:1px solid var(--cvt-border-subtle);border-radius:var(--cvt-radius-md);background:var(--cvt-bg-surface);box-shadow:var(--cvt-shadow-e1)}
.mk-card p{margin:0}
.mk-card--fit,.mk-card--cv{grid-column:1/-1}
.mk-card__title{font:700 18px/1.3 var(--cvt-font-ui)}
.mk-card__head{display:flex;align-items:center;gap:var(--cvt-space-2);font:700 14px/1.3 var(--cvt-font-ui)}
.mk-card__head svg{width:18px;height:18px;flex:none;color:var(--cvt-text-link)}
/* Compound labels (nl "Sollicitatieantwoorden", de "Bewerbungsantworten")
   break inside the card instead of pushing the page sideways. */
.mk-card__head span,.mk-card__title,.mk-check span{min-width:0;overflow-wrap:anywhere;hyphens:auto}
.mk-card__sub{margin:var(--cvt-space-4) 0 var(--cvt-space-2)!important;padding-top:var(--cvt-space-4);border-top:1px solid var(--cvt-border-subtle);font:700 14px/1.3 var(--cvt-font-ui)}
.mk-score{display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--cvt-space-4);align-items:center;margin:var(--cvt-space-4) 0 var(--cvt-space-5)}
.mk-score__ring{grid-area:1/1;width:72px;height:72px}
.mk-score__track,.mk-score__bar{fill:none;stroke-width:5}
.mk-score__track{stroke:var(--cvt-bg-sunken)}
.mk-score__bar{stroke:var(--cvt-bg-brand);stroke-linecap:round;stroke-dasharray:119.4;stroke-dashoffset:26.3}
.mk-score__num{grid-area:1/1;display:grid;justify-items:center;line-height:1}
.mk-score__num strong{font:700 26px/1 var(--cvt-font-display)}
.mk-score__num span{font:600 9px/1.2 var(--cvt-font-mono);color:var(--cvt-text-secondary)}
.mk-score__text{display:grid;gap:2px;font-size:13px;line-height:1.35}
.mk-score__text strong{font-size:16px;color:var(--cvt-text-link)}
.mk-score__text span{color:var(--cvt-text-secondary)}
.mk-checks{display:grid;gap:var(--cvt-space-2);margin:0;padding:0;list-style:none}
.mk-check{display:grid;grid-template-columns:18px minmax(0,1fr);gap:var(--cvt-space-2);align-items:start;font-size:13.5px;line-height:1.4}
.mk-check__ico{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--cvt-bg-brand);color:var(--cvt-text-on-brand)}
.mk-check__ico svg{width:12px;height:12px}
.mk-check--gap .mk-check__ico{background:var(--cvt-bg-accent);color:var(--cvt-text-on-accent)}
.mk-check em{display:block;font-style:normal;font-size:12px;font-weight:600;color:var(--cvt-status-warning-fg)}
.mk-ats{display:flex;justify-content:space-between;gap:var(--cvt-space-2);margin-top:var(--cvt-space-4)!important;padding:6px var(--cvt-space-3);border-radius:var(--cvt-radius-sm);background:var(--cvt-bg-brand-soft);font-size:13px}
.mk-ats strong{color:var(--cvt-text-link);white-space:nowrap}
.mk-doc{margin-top:var(--cvt-space-3);padding:var(--cvt-space-3);border:1px solid var(--cvt-border-subtle);border-radius:var(--cvt-radius-sm);background:var(--cvt-bg-surface)}
.mk-doc__name{font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.mk-doc__role{font-size:12px;color:var(--cvt-text-secondary)}
.mk-doc__section{margin-top:var(--cvt-space-2)!important;padding-bottom:3px;border-bottom:1px solid var(--cvt-text-primary);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.mk-cvlines{margin:0;padding:0;list-style:none}
.mk-cvline{padding-top:var(--cvt-space-2);font-size:12.5px;line-height:1.45}
.mk-cvline__body{display:block;min-width:0}
/* The change marker: an inline span, so it follows every wrapped line. */
.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-card--mini{padding:var(--cvt-space-3)}
.mk-lines{display:grid;gap:6px;margin-top:var(--cvt-space-3)}
.mk-lines i{display:block;height:6px;border-radius:var(--cvt-radius-pill);background:var(--cvt-bg-sunken)}
.mk-lines i:nth-child(2){width:86%}
.mk-lines i:nth-child(3){width:64%}
.mk-lines i:nth-child(4){width:78%}
/* The laptop composition (A.4; below 900px zoomed to the column, see
   "Mobile A.5"). Rows: label and note, the part of the fit card
   above the screen, the app's title bar, then the documents. The fit card
   stands up out of the screen; the CV sits on it; the letter and answers
   cards overlap its right edge. */
.mk-proof{grid-template-columns:3% minmax(0,40%) 4% minmax(0,1fr) 16%;grid-template-rows:60px 44px auto auto auto 1fr;gap:0;padding:0 0 50px;border:0;border-radius:0;background:none}
.mk-proof__label{grid-area:1/2;align-self:end;margin-bottom:var(--cvt-space-2)}
.mk-laptop{display:block;position:absolute;inset:104px 2% 0 0}
.mk-laptop__screen{position:absolute;inset:0 3% 18px;border:11px solid var(--cvt-bg-inverse);border-bottom-width:16px;border-radius:18px 18px 4px 4px;background:var(--cvt-bg-canvas);box-shadow:var(--cvt-shadow-e2)}
.mk-laptop__base{position:absolute;left:-1%;right:-1%;bottom:0;height:18px;border-radius:2px 2px 16px 16px;background:linear-gradient(var(--cvt-bg-surface),var(--cvt-border-control));box-shadow:var(--cvt-shadow-e1)}
.mk-laptop__base::before{content:"";position:absolute;left:50%;top:0;width:16%;height:6px;margin-left:-8%;border-radius:0 0 8px 8px;background:var(--cvt-border-control)}
/* Its soft shadow on the desk. */
.mk-laptop::after{content:"";position:absolute;left:2%;right:2%;bottom:-16px;height:30px;background:radial-gradient(closest-side,var(--cvt-border-control),transparent);opacity:.7}
/* The app's title bar on the screen: the application the documents belong to. */
.mk-proof__bar{position:relative;z-index:1;grid-area:3/4/4/5;display:flex;align-items:center;gap:var(--cvt-space-2);min-width:0;margin:var(--cvt-space-5) 0 0;font-size:12px}
.mk-proof__dots{display:inline-flex;gap:4px;flex:none}
.mk-proof__dots i{width:7px;height:7px;border-radius:50%;background:var(--cvt-border-control)}
.mk-card{box-shadow:var(--cvt-shadow-e2)}
.mk-card--fit{grid-area:2/2/7/3;align-self:start;padding:var(--cvt-space-6) var(--cvt-space-5) var(--cvt-space-5);border-radius:var(--cvt-radius-lg)}
.mk-card--cv{grid-area:4/4/7/5;align-self:start;margin-top:var(--cvt-space-3)}
.mk-card--letter{grid-area:4/5/5/6;align-self:start;margin:var(--cvt-space-8) -4% 0 -34%}
.mk-card--answers{grid-area:5/5/6/6;align-self:start;margin:var(--cvt-space-3) -8% 0 -26%}
/* The margin note: its arrow runs down and left into the fit card's top
   right corner. */
.mk-proof__note{display:block;position:relative;grid-area:1/4/3/6;justify-self:start;align-self:start;max-width:14em;margin:-6px 0 0 44px;font:500 24px/1.05 var(--mk-font-hand);color:var(--cvt-text-primary);transform:rotate(-4deg)}
.mk-proof__arrow{position:absolute;right:calc(100% + 2px);top:12px;width:84px;height:72px;color:var(--cvt-text-primary)}
/* Accent marks (A.4): green beside the fit card, gold beside the letter. */
.mk-rays{display:block;position:absolute;z-index:2;width:34px;height:34px}
.mk-rays--green{left:-3%;top:74px;color:var(--cvt-bg-brand)}
/* Gold is never a text colour (test_marketing_rollout): the mark sets its
   stroke directly. */
.mk-rays--gold{right:-5%;top:36%}
.mk-rays--gold path{stroke:var(--cvt-bg-accent)}
/* The marks may reach past the container; never past the window. */
.mk-hero{overflow-x:clip}
@media (min-width:900px){
  .mk-hero{padding:var(--cvt-space-10) 0 var(--cvt-space-12)}
  .mk-hero__grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--cvt-space-12)}
  .mk-hero .cvt-display-1{font-size:54px;line-height:1.05}
  /* Warm depth behind the proof (A.4's soft window light), drawn with the
     paper tokens: a light pool behind the laptop and a faint gold glow in
     the top corner. No photo, no blur filter. */
  .mk-hero{background:radial-gradient(44% 58% at 74% 50%,var(--cvt-bg-surface) 0%,transparent 74%),radial-gradient(36% 46% at 86% 78%,color-mix(in srgb,var(--cvt-bg-accent-soft) 70%,transparent) 0%,transparent 72%),radial-gradient(30% 40% at 98% 4%,var(--cvt-bg-accent-soft) 0%,transparent 72%),var(--cvt-bg-canvas)}
}
@media (min-width:1200px){
  .mk-home .cvt-container{width:min(var(--mk-home-max),100% - 2*var(--cvt-gutter))}
  .mk-home .mk-nav .cvt-topnav{padding-inline:max(var(--cvt-gutter),calc((100% - var(--mk-home-max)) / 2))}
  /* Links centred between the mark and the switchers (A.4). */
  .mk-home .mk-nav .cvt-navlinks{flex:1}
  .mk-home .mk-nav .cvt-navlinks>a:first-child,.mk-home .mk-nav .mk-nav-divider{margin-left:auto}
  .mk-hero{padding:var(--cvt-space-10) 0 var(--cvt-space-10)}
  .mk-hero__grid{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:var(--cvt-space-12)}
  .mk-hero .cvt-display-1{max-width:7.6em;font-size:66px;line-height:1.04;text-wrap:pretty}
  .mk-hero__cta{min-height:56px;padding-inline:var(--cvt-space-8);font-size:18px}
}
@media (hover:hover){
  .mk-card--cv:hover .mk-cvline__text{background-size:100% 100%}
}

/* ── From job description to an application (desktop A.4) ───────────────
   Phones: heading and three steps stacked. 900 to 1199: the same, the steps
   in a row. From 1200: frustration photo, the steps, relief photo, in one
   full-width band (narrower slots crop the maintainer's photos too tightly
   to keep the faces clear of the thoughts). The thoughts are live text over
   the photos. Until the files arrive the slots are placeholders
   (data-photo-pending). */
.mk-tf{padding:var(--cvt-space-12) 0;background:var(--cvt-bg-surface);border-block:1px solid var(--cvt-border-subtle)}
.mk-tf__grid{width:min(var(--cvt-size-container-max),100% - 2*var(--cvt-gutter));margin-inline:auto}
.mk-tf__photo{display:none;margin:0}
.mk-tf__body{display:grid;gap:var(--cvt-space-6);min-width:0}
.mk-tf__title{margin:0}
.mk-tf__steps{display:grid;gap:var(--cvt-space-5);margin:0;padding:0;list-style:none}
.mk-tf__steps li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:var(--cvt-space-4);align-items:start}
.mk-tf__num{grid-row:1/3;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--cvt-border-control);border-radius:50%;background:var(--cvt-bg-canvas);font:700 18px/1 var(--cvt-font-display)}
.mk-tf__steps h3{margin:0;font:700 17px/1.3 var(--cvt-font-ui)}
.mk-tf__steps p{margin:var(--cvt-space-1) 0 0;color:var(--cvt-text-secondary);font-size:15px;line-height:1.45}
.mk-tf__time{margin:0;color:var(--cvt-text-secondary);font-size:var(--cvt-type-small-size)}
.mk-tf__say{position:absolute;z-index:1;display:grid;justify-items:end;max-width:8em;margin:0;font:500 clamp(21px,1.6vw,24px)/1.05 var(--mk-font-hand);text-wrap:balance;color:var(--cvt-text-primary);text-align:right}
/* Every arrow runs down and left, from the thought to the person. */
.mk-tf__arrow{width:34px;height:30px;margin-top:2px;transform:scaleX(-1)}
.mk-tf__rays{display:none}
@media (min-width:900px){
  .mk-tf{padding:var(--cvt-space-16) 0}
  .mk-tf__body{justify-items:center;gap:var(--cvt-space-5);text-align:center}
  .mk-tf__title{max-width:12em;font-size:40px;line-height:1.08}
  .mk-tf__steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--cvt-space-6);max-width:640px}
  .mk-tf__steps li{position:relative;grid-template-columns:minmax(0,1fr);justify-items:center;align-content:start}
  .mk-tf__num{grid-row:auto;margin-bottom:var(--cvt-space-3);background:var(--cvt-bg-surface);box-shadow:var(--cvt-shadow-e1)}
  .mk-tf__steps li+li::before{content:"\2192";position:absolute;top:8px;left:calc(var(--cvt-space-6) / -2);transform:translateX(-50%);color:var(--cvt-text-secondary);font:400 22px/1 var(--cvt-font-ui)}
  .mk-tf__steps h3{font-size:16px}
  .mk-tf__steps p{font-size:14px}
}
@media (min-width:1200px){
  .mk-tf{padding:0;overflow:hidden}
  /* Capped at 1920 so the photo slots never go wider than the files allow. */
  .mk-tf__grid{display:grid;grid-template-columns:minmax(0,34fr) minmax(0,39fr) minmax(0,27fr);width:auto;max-width:1920px;height:440px}
  .mk-tf__photo{display:block;position:relative;min-width:0}
  /* --mk-tf-focus is the point of each photo that stays in view as the
     slot changes shape (object-position on the photo, background-position
     on the placeholder). Tuned on the maintainer's 3:2 files: in "before"
     the person sits left of centre, in "after" right of centre, so the
     thoughts take the open wall beside them. */
  .mk-tf__photo--before{--mk-tf-focus:0% 40%}
  .mk-tf__photo--after{--mk-tf-focus:55% 40%}
  .mk-tf__img{position:absolute;inset:0;background:var(--cvt-bg-sunken) no-repeat var(--mk-tf-focus)/cover}
  .mk-tf__img img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--mk-tf-focus)}
  /* Each photo fades into the band on its inner edge. */
  .mk-tf__photo--before .mk-tf__img{-webkit-mask-image:linear-gradient(to right,var(--cvt-bg-inverse) 78%,transparent);mask-image:linear-gradient(to right,var(--cvt-bg-inverse) 78%,transparent)}
  .mk-tf__photo--after .mk-tf__img{-webkit-mask-image:linear-gradient(to left,var(--cvt-bg-inverse) 82%,transparent);mask-image:linear-gradient(to left,var(--cvt-bg-inverse) 82%,transparent)}
  /* A fixed height keeps the photos at one scale in every language; the
     steps fit it in all ten (scripts/check_landing_a4.py). */
  .mk-tf__body{align-content:center;padding:var(--cvt-space-6) var(--cvt-space-4)}
  .mk-tf__title{font-size:clamp(36px,3.05vw,44px)}
  /* The thoughts, as percentages of their photo slot, so they follow the
     slot at every width. Before: one on the open wall top left, pointing
     down and right at him; two on the wall to his left (our right),
     pointing down and left. After: one line top right. The text sits on
     light wall, never on the face, hands or dark sleeves. */
  .mk-tf__say--1{top:4%;left:3%;justify-items:start;text-align:left}
  .mk-tf__say--1 .mk-tf__arrow{transform:none}
  .mk-tf__say--2{top:5%;right:3%}
  .mk-tf__say--3{top:40%;right:3%}
  .mk-tf__say--4{top:6%;right:4%;max-width:none;white-space:nowrap}
  /* A small green accent by the relief (A.4). */
  .mk-tf__rays{display:block;position:absolute;z-index:1;top:30%;left:8%;width:30px;height:30px;color:var(--cvt-bg-brand)}
}

/* 1200 to 1439: the before slot is too narrow for a third thought beside
   his hands; two carry the moment. */
@media (min-width:1200px) and (max-width:1439px){.mk-tf__say--3{display:none}}

/* 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))}}

/* ── 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}}
/* Four steps (/how-it-works): two by two from 900px, one row from 1200px. */
@media (min-width:900px){.mk-steps--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.mk-steps--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* CV template gallery (/cv-templates) and each template's page (W57). The
   card is one link: the rendered preview, the name and its layout tag. */
.mk-tplgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cvt-space-4);margin:0;padding:0;list-style:none}
@media (min-width:600px){.mk-tplgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.mk-tplgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--cvt-space-6)}}
.mk-tplcard{display:flex;flex-direction:column;gap:var(--cvt-space-3);height:100%;box-sizing:border-box;padding:var(--cvt-space-3);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-tplcard:hover{background:var(--cvt-bg-sunken)}
.mk-tplcard:focus-visible{outline:2px solid var(--cvt-focus-ring);outline-offset:2px}
.mk-tplcard img{display:block;width:100%;border:1px solid var(--cvt-border-subtle);border-radius:var(--cvt-radius-sm);background:var(--cvt-bg-surface)}
.mk-tplcard__meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--cvt-space-2);margin-top:auto}
.mk-tplcard__name{margin:0;font-weight:700}
.mk-tplcard__meta .mk-tag{margin-top:0}
/* Three points (/cv-templates): one row of three from 900px, not 4 with a gap. */
@media (min-width:900px){.mk-points--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mk-crumbs{margin:0 0 var(--cvt-space-6);color:var(--cvt-text-secondary)}
.mk-crumbs a{display:inline-flex;align-items:center;min-height:var(--cvt-size-touch-min);color:var(--cvt-text-link);font-weight:600;text-underline-offset:3px}
.mk-tpldetail{display:grid;gap:var(--cvt-space-8);align-items:start}
@media (min-width:900px){.mk-tpldetail{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--cvt-space-12)}}
.mk-tpldetail figure{margin:0}
.mk-tpldetail figure img{display:block;width:100%;border:1px solid var(--cvt-border-subtle);border-radius:var(--cvt-radius-md);box-shadow:var(--cvt-shadow-e1);background:var(--cvt-bg-surface)}
.mk-tpldetail figcaption{margin-top:var(--cvt-space-3);color:var(--cvt-text-secondary);font-size:var(--cvt-type-small-size)}
.mk-tpldetail h2{margin:0 0 var(--cvt-space-3)}
.mk-tpldetail h2+p{margin:0 0 var(--cvt-space-8);color:var(--cvt-text-secondary);font-size:var(--cvt-type-reading-size);line-height:var(--cvt-type-reading-line);max-width:62ch}
.mk-specs{margin:0 0 var(--cvt-space-6);padding:0;list-style:none;border-top:1px solid var(--cvt-border-subtle)}
.mk-specs li{padding:var(--cvt-space-3) 0;border-bottom:1px solid var(--cvt-border-subtle);color:var(--cvt-text-secondary)}
.mk-specs strong{margin-right:var(--cvt-space-1);color:var(--cvt-text-primary)}

/* ── 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}}

/* ── Templates band (desktop A.4) ─────────────────────────────────────
   Base: a scroll-snap row of linked cards, usable without the script. The
   script adds .is-on, the counter and the buttons, and moves .is-active.
   Phones: one card centred, neighbours set back, counter, Pause. From
   900px about five cards in view with round arrows at the row's ends;
   from 1200px the heading sits to the left of the row. */
.mk-tplband{background:color-mix(in srgb,var(--cvt-bg-sunken) 55%,var(--cvt-bg-canvas))}
.mk-tplband__grid{display:grid;gap:var(--cvt-space-6)}
.mk-tplband__head{margin-bottom:0}
.mk-tplband__all{justify-self:start;gap:var(--cvt-space-2);margin-top:var(--cvt-space-2)}
.mk-tplband__all svg{width:18px;height:18px;flex:none}
.mk-tpl{position:relative;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 a{border-radius:var(--cvt-radius-sm)}
.mk-tpl__card a:focus-visible{outline:2px solid var(--cvt-focus-ring);outline-offset:3px}
.mk-tpl__sheet{display:block;overflow:hidden;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__sheet img{display:block;width:100%;height:auto}
.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 .mk-tpl__bar[hidden],.mk-tpl .mk-tpl__pause[hidden]{display:none}
.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-tplband{padding:var(--cvt-space-16) 0}
  .mk-tpl{--mk-tpl-gap:var(--cvt-space-4);container-type:inline-size}
  .mk-tpl__track{gap:var(--mk-tpl-gap);margin:0;padding:var(--cvt-space-1) 2px var(--cvt-space-1);scroll-snap-type:x mandatory;scrollbar-width:none}
  .mk-tpl__track::-webkit-scrollbar{display:none}
  .mk-tpl__card{flex:0 0 calc((100% - 4 * var(--mk-tpl-gap)) / 5);max-width:none;scroll-snap-align:start}
  .mk-tpl__card a{gap:var(--cvt-space-3);justify-items:center}
  .mk-tpl__sheet{width:100%;box-sizing:border-box;aspect-ratio:3/4;padding:6px;border-radius:var(--cvt-radius-md)}
  .mk-tpl__sheet img{height:100%;object-fit:cover;object-position:top;border-radius:2px}
  .mk-tpl__name{font-size:15px;font-weight:600;text-align:center}
  .mk-tpl.is-on .mk-tpl__card:not(.is-active){transform:none}
  .mk-tpl.is-on .mk-tpl__card:not(.is-active) img{opacity:1}
  .mk-tpl__card.is-active .mk-tpl__sheet{border-color:var(--cvt-bg-brand);box-shadow:0 0 0 1px var(--cvt-bg-brand),var(--cvt-shadow-e2)}
  .mk-tpl__card.is-active .mk-tpl__name{color:var(--cvt-text-link)}
  /* The arrows sit on the row's ends, level with the middle of a sheet. */
  .mk-tpl__bar{display:contents}
  .mk-tpl__count,.mk-tpl .mk-tpl__pause{display:none}
  .mk-tpl__prev,.mk-tpl__next{position:absolute;z-index:1;top:38%;top:calc(4px + (100cqw - 4 * var(--mk-tpl-gap)) / 5 * 2 / 3);width:44px;height:44px;margin-top:-22px;padding:0;border-radius:var(--cvt-radius-pill);background:var(--cvt-bg-surface);box-shadow:var(--cvt-shadow-e2)}
  .mk-tpl__prev{left:-22px}
  .mk-tpl__next{right:-22px}
  .mk-tpl__prev svg,.mk-tpl__next svg{width:20px;height:20px}
}
@media (min-width:1200px){
  .mk-tplband{padding:var(--cvt-space-12) 0}
  .mk-tplband__grid{grid-template-columns:minmax(0,320px) minmax(0,1fr);column-gap:var(--cvt-space-16);align-items:center}
  .mk-tplband__head .cvt-display-2{font-size:40px;line-height:1.08}
  .mk-tpl{gap:var(--cvt-space-2);padding-inline:32px}
  .mk-tpl__prev{left:-10px}
  .mk-tpl__next{right:-10px}
}

/* ── 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-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)}}

/* ── Homepage pricing and FAQ (desktop A.4) ───────────────────────────
   One band. Four cards with the same inclusions list; the free card leads
   in brand green. From 1200px the FAQ runs beside the cards as a compact
   closed list. The shared .mk-price, .mk-guarantee and .mk-faq rules
   (also on /pricing and /faq) stay untouched: everything here is scoped
   to the homepage modifiers. */
.mk-pf__top{display:grid;gap:var(--cvt-space-4);margin-bottom:var(--cvt-space-6)}
.mk-pf__top .mk-head{margin-bottom:0}
.mk-pf__top .mk-guarantee{margin:0}
.mk-pf .mk-guarantee--home{align-self:end;border-left:3px solid var(--cvt-bg-accent);background:var(--cvt-bg-accent-soft);color:var(--cvt-text-primary)}
.mk-pf .mk-guarantee--home svg{color:var(--cvt-text-label-accent)}
.mk-pf .mk-guarantee--home a{color:var(--cvt-text-link)}
.mk-prices--home .mk-price{gap:var(--cvt-space-1);padding:var(--cvt-space-5) var(--cvt-space-4) var(--cvt-space-4)}
.mk-prices--home .mk-price--free{background:var(--cvt-bg-brand-soft)}
.mk-prices--home .mk-price__name{font-size:18px;font-weight:700}
.mk-prices--home .mk-price__amount{margin-top:var(--cvt-space-2);font-family:var(--mk-font-serif);font-weight:700;letter-spacing:-.01em;font-synthesis:none}
.mk-prices--home .mk-price__amount small{font-family:var(--cvt-font-ui)}
.mk-prices--home .mk-price__qty{font-size:17px;font-weight:500}
.mk-pf__incl{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--cvt-space-2) var(--cvt-space-5);margin:0 0 var(--cvt-space-4);font-size:15px;line-height:1.4}
.mk-pf__incl p{margin:0;font-weight:700}
.mk-pf__incl ul{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)}
.mk-pf__incl li{position:relative;padding-left:20px}
.mk-pf__incl li::before{content:"";position:absolute;left:3px;top:.2em;width:6px;height:11px;border:solid var(--cvt-text-link);border-width:0 2px 2px 0;transform:rotate(45deg)}
.mk-price__per{margin:0;font-size:15px;font-weight:700;color:var(--cvt-text-primary)}
.mk-prices--home .mk-price__line{font-size:14px;text-wrap:pretty}
.mk-prices--home .mk-price__cta{padding-top:var(--cvt-space-4)}
.mk-prices--home .mk-price__cta .cvt-btn{min-height:var(--cvt-size-touch-min)}
@media (min-width:900px){
  .mk-pf__top{grid-template-columns:minmax(0,1fr) minmax(0,400px);column-gap:var(--cvt-space-8);align-items:end}
}
@media (min-width:1200px){
  .mk-pf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,288px);column-gap:var(--cvt-space-8);width:min(var(--mk-home-max),100% - 2*var(--cvt-gutter));margin-inline:auto;padding:var(--cvt-space-16) 0 var(--cvt-space-16)}
  .mk-pf>.mk-section{padding:0}
  .mk-pf .cvt-container{width:auto}
  @supports (grid-template-rows:subgrid){
    .mk-pf{grid-template-rows:repeat(4,auto) 1fr}
    .mk-pf__price,.mk-pf__price>.cvt-container{display:grid;grid-row:1/6;grid-template-rows:subgrid}
    .mk-pf__price>.cvt-container>*{grid-column:1}
    .mk-pf__price .mk-pf__top{grid-row:1}
    .mk-pf__price .mk-alert{grid-row:2}
    .mk-pf__price .mk-pf__incl{grid-row:3}
    .mk-pf__price .mk-prices--home{grid-row:4}
    .mk-pf__price .cvt-more{grid-row:5;justify-self:start;align-self:end}
    .mk-pf__faq{grid-column:2;grid-row:4/6}
  }
  .mk-pf__price .cvt-display-2{font-size:40px;line-height:1.08}
  .mk-prices--home{gap:var(--cvt-space-3)}
  .mk-prices--home .mk-price__cta .cvt-btn{padding-inline:var(--cvt-space-3);font-size:15px}
  .mk-pf__faq .mk-head{gap:var(--cvt-space-1);margin-bottom:var(--cvt-space-3)}
  .mk-pf__faq .cvt-display-2{font-size:24px;line-height:1.2}
  .mk-pf__faq .cvt-more{font-size:15px}
  .mk-faq--side{grid-template-columns:minmax(0,1fr);border:1px solid var(--cvt-border-subtle);border-radius:var(--cvt-radius-md);background:var(--cvt-bg-surface)}
  .mk-faq--side details,.mk-faq--side details:nth-child(-n+2){border-top:0}
  .mk-faq--side details:last-child{border-bottom:0}
  .mk-faq--side summary{min-height:var(--cvt-size-touch-min);padding:var(--cvt-space-2) var(--cvt-space-3)}
  .mk-faq--side summary h3{font-size:15px;font-weight:600;line-height:1.35}
  .mk-faq--side summary::after,.mk-faq--side details[open] summary::after{content:"";width:7px;height:7px;margin:0 4px 4px 0;border:solid var(--cvt-text-secondary);border-width:0 2px 2px 0;transform:rotate(45deg)}
  .mk-faq--side details[open] summary::after{margin:4px 4px 0 0;transform:rotate(-135deg)}
  .mk-faq--side .mk-faq__a{margin:0 var(--cvt-space-3) var(--cvt-space-3);font-size:14px;line-height:1.55}
}
@media (min-width:1200px) and (max-width:1439px){
  .mk-pf{grid-template-columns:minmax(0,1fr) minmax(0,240px);column-gap:var(--cvt-space-6)}
  .mk-prices--home .mk-price{padding-inline:14px}
  .mk-prices--home .mk-price__cta .cvt-btn{padding-inline:var(--cvt-space-2);font-size:14px}
}

/* ── 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))}}

/* ── Photos of hands at work: fixed ratio, no CLS, tone matches the hero photo ── */
.mk-photo{margin:0 0 var(--cvt-space-8);overflow:hidden;border-radius:var(--cvt-radius-lg);background:var(--cvt-bg-sunken);aspect-ratio:2/1}
.mk-photo picture,.mk-photo img{display:block;width:100%;height:100%}
.mk-photo img{object-fit:cover;filter:saturate(.72) sepia(.08)}
@media (min-width:900px){.mk-photo--wide{aspect-ratio:3/1}}
.mk-photo--band{margin:0;border-radius:var(--cvt-radius-md)}
@media (min-width:900px){.mk-band:has(.mk-photo--band){grid-template-columns:minmax(0,1fr) minmax(0,480px);column-gap:var(--cvt-space-12);align-items:center}.mk-band .mk-photo--band{grid-column:2;grid-row:1/span 3}.mk-band:has(.mk-photo--band)>:not(.mk-photo){grid-column:1}}

/* ── 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: the page's own cream paper under a hairline. The brand at header
   scale with one line on what CVTailor makes, three named link groups
   (ochre labels, like every eyebrow on the page), then the operator line.
   Phones fold the groups into disclosures; from 600px they are columns,
   and from 1200px the brand sits left of them behind a rule (below that the
   columns are too narrow for "Nutzungsbedingungen" and the like). */
.mk-footer{padding:var(--cvt-space-10) 0 calc(var(--cvt-space-6) + env(safe-area-inset-bottom));border-top:1px solid var(--cvt-border-subtle);background:var(--cvt-bg-canvas);color:var(--cvt-text-secondary);font-size:15px}
/* The landing page's phone sticky CTA (about 62px plus the safe area)
   covers the page end: keep the operator line clear of it. */
.mk-footer--sticky{padding-bottom:calc(var(--cvt-space-6) + 64px + env(safe-area-inset-bottom))}
@media (min-width:600px){.mk-footer,.mk-footer--sticky{padding:var(--cvt-space-12) 0 var(--cvt-space-8)}}
.mk-footer a{min-height:var(--cvt-size-touch-min);color:var(--cvt-text-primary);text-decoration:none}
.mk-footer a:focus-visible,.mk-footer summary:focus-visible{outline:2px solid var(--cvt-focus-ring);outline-offset:2px}
.mk-footer__inner{display:grid;gap:var(--cvt-space-8)}
@media (min-width:1200px){.mk-footer__inner{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--cvt-space-10) var(--cvt-space-12)}}
.mk-footer__brand{display:grid;gap:var(--cvt-space-4);align-content:start}
@media (min-width:1200px){.mk-footer__brand{padding-right:var(--cvt-space-12);border-right:1px solid var(--cvt-border-subtle)}}
.mk-footer .cvt-brand{margin-right:0;width:fit-content}
.mk-footer .cvt-brand .cvt-brand__icon{width:32px;height:32px}
.mk-footer .cvt-brand .cvt-brand__wm{height:22px}
.mk-footer__tag{margin:0;max-width:36ch;line-height:1.55}
.mk-footer__cols{display:grid}
@media (min-width:600px){.mk-footer__cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--cvt-space-6)}}
.mk-footer__group{border-bottom:1px solid var(--cvt-border-subtle)}
.mk-footer__group:first-child{border-top:1px solid var(--cvt-border-subtle)}
@media (min-width:600px){.mk-footer__group,.mk-footer__group:first-child{border:0}}
.mk-footer summary{display:flex;align-items:center;justify-content:space-between;min-height:var(--cvt-size-touch-min);padding:var(--cvt-space-2) 0;list-style:none;cursor:pointer}
.mk-footer summary::-webkit-details-marker{display:none}
.mk-footer summary::after{content:"";width:8px;height:8px;margin-right:6px;border:solid var(--cvt-text-primary);border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg)}
.mk-footer__group[open] summary::after{transform:translateY(2px) rotate(-135deg)}
@media (min-width:600px){.mk-footer summary{min-height:0;padding:0 0 var(--cvt-space-3);cursor:default}.mk-footer summary::after{display:none}}
/* Phones: a quieter label (12px, 600) so the wordmark stays the lead. */
.mk-footer__h{margin:0;color:var(--cvt-text-label-accent);font:600 12px/1.2 var(--cvt-font-ui);letter-spacing:.07em;text-transform:uppercase}
@media (min-width:600px){.mk-footer__h{font-weight:700;font-size:13px;letter-spacing:.08em}}
.mk-footer__col{margin:0;padding:0 0 var(--cvt-space-3);list-style:none}
@media (min-width:600px){.mk-footer__col{padding:0}}
.mk-footer .mk-footer__col a,.mk-footer__btn{display:inline-flex;align-items:center;min-height:var(--cvt-size-touch-min);min-width:var(--cvt-size-touch-min);line-height:1.3;font-size:16px}
/* Reopens the cookie choice (same opener the legal pages' footers use). */
.mk-footer__btn{padding:0;border:0;background:transparent;color:var(--cvt-text-primary);font-family:var(--cvt-font-ui);font-weight:400;text-align:left;cursor:pointer}
.mk-footer__btn:focus-visible{outline:2px solid var(--cvt-focus-ring);outline-offset:2px}
.mk-footer__copy{margin:0;padding-top:var(--cvt-space-6);border-top:1px solid var(--cvt-border-subtle);font-size:14px;line-height:1.6}
@media (min-width:1200px){.mk-footer__copy{grid-column:1/-1}}
@media not all and (min-width:600px){.mk-footer__copy{padding-top:0;border-top:0}}
.mk-footer .cvt-version{color:var(--cvt-text-secondary)}
@media (hover:hover){.mk-footer .mk-footer__col a:hover,.mk-footer__btn:hover{text-decoration:underline;text-underline-offset:3px}}

/* ── 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:normal;text-wrap:balance;overflow-wrap:anywhere;line-height:1.2;padding:var(--cvt-space-2) var(--cvt-space-4)}
.mk-sticky .cvt-sticky-bar__meta{max-width:34%}
@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__mark{display:block;width:32px;height:32px;margin-bottom:var(--cvt-space-3)}
.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)}
.mk-auth__optin{display:flex;align-items:center;gap:var(--cvt-space-2);min-height:44px;margin:0 0 var(--cvt-space-2);color:var(--cvt-text-secondary);font-size:var(--cvt-type-small-size);line-height:var(--cvt-type-small-line);cursor:pointer}
.mk-auth__optin input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--cvt-text-label-accent);cursor:pointer}
@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:var(--cvt-space-6) 0 0}
.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)}
/* ── Mobile A.5 (approved by Sergio 2026-10-17; below 900px) ────────────
   docs/design/screens/a5-mobile/README.md. From 900px the desktop A.4 page
   renders unchanged: every rule here is either below 900px ("not all and
   (min-width:900px)"), below 600px, or a new A.5 part that is hidden from
   900px. */

/* Phones: the homepage runs on A.5's wider side margin (24px at 390,
   about 20 at 320). */
@media (max-width:599px){.mk-home{--cvt-gutter:max(16px,6.15vw)}}

/* Header: the full lockup, as in A.5 (the other marketing pages keep the
   mark alone on phones). */
@media (max-width:599px){
  .mk-home .mk-nav .cvt-brand{flex:0 1 auto;min-width:0}
  .mk-home .mk-nav .cvt-brand__wm{position:static;flex:0 1 auto;width:97px;min-width:0;max-width:100%;height:auto;overflow:visible;clip:auto;white-space:normal}
}

/* Hero: the accent on the headline's last words, the full-width button with
   its gold arrow, ticks before the offer notes, and the product proof (the
   desktop composition, scaled to the column) with its pill. */
.mk-proof__pill{display:none}
@media not all and (min-width:900px){
  .mk-hero{padding:var(--cvt-space-6) 0 var(--cvt-space-8);background:radial-gradient(90% 34% at 50% 80%,var(--cvt-bg-surface) 0%,transparent 80%),var(--cvt-bg-canvas)}
  .mk-home .mk-hero .cvt-display-1{font-size:clamp(32px,9.6vw,52px);line-height:1.04;text-wrap:wrap}
  .mk-hero .mk-accent{color:var(--cvt-text-link)}
  .mk-hero__copy{gap:var(--cvt-space-3)}
  .mk-hero .cvt-eyebrow{letter-spacing:.06em}
  .mk-hero__copy .cvt-lede{font-size:17px;line-height:1.5}
  .mk-hero__act{justify-items:stretch;width:100%;margin-top:var(--cvt-space-3)}
  .mk-hero__act .mk-cta-row{display:grid}
  .mk-hero__cta{justify-content:center;width:100%;min-height:56px;border-radius:var(--cvt-radius-md);box-shadow:var(--cvt-shadow-e2)}
  .mk-hero__cta svg path{stroke:var(--cvt-bg-accent)}
  /* A tick before each note; the separator dot becomes the second tick. */
  .mk-hero__note::before,.mk-hero__sep::before{content:"";display:inline-block;width:5px;height:9px;margin:0 8px 2px 2px;border:solid var(--cvt-text-link);border-width:0 1.6px 1.6px 0;transform:rotate(45deg);vertical-align:middle}
  .mk-hero__sep{display:inline-block;margin-left:16px;font-size:0;white-space:nowrap;vertical-align:4px}
  .mk-hero__sep::before{font-size:var(--cvt-type-small-size)}
  /* The proof: the A.4 composition on a 600px stage, zoomed to the column.
     The column is minmax(0,1fr) so the stage can never widen it (the copy
     above would then be laid out 600px wide and clipped by the hero), and
     the hero script sets the zoom on the element as a plain number (Safari
     on iOS resolved the container-unit expression to 1). Without the script
     these two declarations apply as before: the expression, or .57 where
     trig functions are not supported. */
  .mk-hero__grid{grid-template-columns:minmax(0,1fr);gap:var(--cvt-space-6);container-type:inline-size}
  .mk-proof{width:600px;margin-inline:auto;grid-template-columns:2% minmax(0,39%) 3% minmax(0,1fr) 21%;zoom:.57;zoom:min(1,tan(atan2(100cqw,600px)))}
  .mk-proof__pill{display:block;position:absolute;z-index:3;right:0;bottom:6px;margin:0;padding:10px 20px;border:1px solid var(--cvt-border-subtle);border-radius:var(--cvt-radius-pill);background:var(--cvt-bg-surface);box-shadow:var(--cvt-shadow-e2);color:var(--cvt-text-link);font:700 19px/1.2 var(--cvt-font-ui);white-space:nowrap}
}

@media (min-width:600px) and (not (min-width:900px)){
  .mk-hero__act{justify-items:center;width:auto}
  .mk-hero__cta{width:auto;padding-inline:var(--cvt-space-8)}
}

/* The story: three slides, one in view with the next one's edge showing.
   Hidden from 900px, where the band above tells it. */
.mk-story{display:none}
@media not all and (min-width:900px){
  .mk-tf{padding:var(--cvt-space-4) 0 var(--cvt-space-2)}
  .mk-tf__grid{display:none}
  .mk-story{display:block;width:min(var(--cvt-size-container-max),100% - 2*var(--cvt-gutter));margin-inline:auto}
}
.mk-story__head{display:grid;gap:var(--cvt-space-2);margin-bottom:var(--cvt-space-4)}
.mk-home .mk-story .cvt-display-2{margin:0;font-size:clamp(28px,8.3vw,36px);line-height:1.04}
.mk-story .mk-accent{color:var(--cvt-text-link)}
.mk-story__rail{display:flex;align-items:stretch;gap:12px;margin:0 calc(var(--cvt-gutter) * -1);padding:2px 0 2px var(--cvt-gutter);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--cvt-gutter);scrollbar-width:none;list-style:none}
.mk-story__rail::-webkit-scrollbar{display:none}
.mk-story__rail::after{content:"";flex:0 0 calc(var(--cvt-gutter) - 12px)}
.mk-story__rail:focus-visible{outline:2px solid var(--cvt-focus-ring);outline-offset:-2px}
.mk-story__card{position:relative;display:flex;flex-direction:column;flex:0 0 calc(100% - var(--cvt-gutter) - 40px);max-width:340px;min-height:300px;box-sizing:border-box;overflow:hidden;scroll-snap-align:start;border:1px solid var(--cvt-border-subtle);border-radius:20px;background:var(--cvt-bg-canvas)}
.mk-story__photo{position:relative;flex:1 1 auto;min-height:190px;overflow:hidden;container-type:inline-size}
.mk-story__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
/* Thoughts over the photos, live text in the handwriting face. Arrows run
   from the thought down to him. */
.mk-story__say{position:absolute;z-index:1;display:grid;justify-items:end;max-width:7.4em;margin:0;font:500 16px/.95 var(--mk-font-hand);font-size:clamp(12.5px,5.2cqw,17px);color:var(--cvt-text-primary);text-align:right;text-wrap:balance}
.mk-story__say svg{width:1.4em;height:1.25em;margin-top:1px;transform:scaleX(-1)}
.mk-story__say--1{top:4%;left:4%;justify-items:start;text-align:left;transform:rotate(-5deg)}
.mk-story__say--1 svg{transform:none;margin-left:1.6em}
.mk-story__say--2{top:3%;right:4%;max-width:6em;transform:rotate(-6deg)}
.mk-story__say--3{top:47%;right:3%;max-width:5.2em;transform:rotate(-6deg)}
.mk-story__say--4{top:6%;right:6%;max-width:4.8em;font-size:clamp(15px,6.4cqw,21px);transform:rotate(-5deg)}
.mk-story__rays{position:absolute;z-index:1;top:20%;left:3%;width:38px;height:38px;color:var(--cvt-bg-brand);transform:scaleX(-1) rotate(-8deg)}
.mk-story__tag{position:absolute;z-index:1;bottom:10px;left:12px;padding:5px 8px;border-radius:6px;background:var(--cvt-bg-surface);color:var(--cvt-text-primary);font:800 12px/1.2 var(--cvt-font-ui);letter-spacing:.08em;text-transform:uppercase}
.mk-story__tag--after{background:var(--cvt-bg-brand);color:var(--cvt-text-on-brand)}
.mk-story__cap{flex:none;padding:12px 16px 14px}
.mk-story__cap h3{margin:0 0 3px;font:700 19px/24px var(--cvt-font-ui)}
.mk-story__cap p{margin:0;color:var(--cvt-text-secondary);font-size:13px;line-height:19px}
/* The middle slide: what CVTailor does, in the brand's own parts. */
.mk-story__card--app{gap:0;padding:16px;background:var(--cvt-bg-brand-soft)}
.mk-story__logo{display:flex;align-items:center;gap:8px;margin:0 0 14px}
.mk-story__logo img:first-child{width:30px;height:30px}
.mk-story__logo img:last-child{width:auto;height:19px}
.mk-story__in{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 8px;margin:0;font-size:13px;font-weight:600;line-height:1.25}
.mk-story__in span:not(.mk-story__plus){flex:1 1 auto;min-width:0;padding:10px;white-space:nowrap;border:1px solid var(--cvt-border-subtle);border-radius:12px;background:var(--cvt-bg-surface);text-align:center;overflow-wrap:anywhere;hyphens:auto}
.mk-story__plus{color:var(--cvt-text-label-accent);font-weight:700}
.mk-story__flow{display:block;width:20px;height:20px;margin:4px auto;color:var(--cvt-text-link)}
.mk-story__out{padding:12px;border:1px solid var(--cvt-border-subtle);border-top:3px solid var(--cvt-bg-accent);border-radius:12px;background:var(--cvt-bg-surface)}
.mk-story__out h3{margin:0 0 10px;font:700 18px/1.25 var(--cvt-font-ui)}
.mk-story__out ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 8px;margin:0;padding:0;list-style:none;color:var(--cvt-text-link);font-size:12px;font-weight:600;line-height:1.3}
.mk-story__out li{display:flex;gap:6px;align-items:flex-start;min-width:0;overflow-wrap:anywhere;hyphens:auto}
.mk-story__out li::before{content:"";flex:none;width:9px;height:12px;margin-top:1px;border:1.4px solid currentColor;border-radius:1px}
.mk-story__review{margin:12px 0 0;color:var(--cvt-text-link);font-size:13px;line-height:19px}
/* Controls: dots and count left, the hint, then 44px buttons 8px apart. */
.mk-story__bar{display:flex;align-items:center;gap:8px;min-height:44px;margin-top:8px}
.mk-story__dots{display:inline-flex;gap:6px}
.mk-story__dots i{width:6px;height:6px;border-radius:8px;background:var(--cvt-border-control)}
.mk-story__dots i.is-on{width:22px;background:var(--cvt-bg-brand)}
.mk-story__count{margin-left:6px;color:var(--cvt-text-secondary);font-size:13px;white-space:nowrap}
.mk-story__hint{flex:1;min-width:0;margin-left:8px;color:var(--cvt-text-secondary);font-size:13px;line-height:1.3}
.mk-story:not(.is-on) .mk-story__dots,.mk-story:not(.is-on) .mk-story__count{display:none}
.mk-story:not(.is-on) .mk-story__hint{margin-left:0}
.mk-story__btn{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1px solid var(--cvt-border-control);border-radius:12px;background:var(--cvt-bg-surface);color:var(--cvt-text-link);cursor:pointer}
.mk-story__btn[hidden]{display:none}
.mk-story__btn svg{width:22px;height:22px}
.mk-story__btn[aria-disabled="true"]{background:var(--cvt-bg-sunken);color:var(--cvt-text-secondary);cursor:default}
.mk-story__btn:focus-visible{outline:2px solid var(--cvt-focus-ring);outline-offset:2px}
@media (min-width:600px){.mk-story__card{flex-basis:340px}}

/* Know where you stand: the fit example in the app's labels. Hidden from
   900px, where the hero's laptop shows the fit card at full size. */
.mk-fit{padding:var(--cvt-space-12) 0;background:var(--cvt-bg-canvas)}
@media (min-width:900px){.mk-fit{display:none}}
.mk-home .mk-fit .cvt-display-2{font-size:clamp(28px,8.3vw,36px);line-height:1.06}
.mk-fit .mk-head{margin-bottom:var(--cvt-space-6)}
.mk-fitcard{display:grid;gap:var(--cvt-space-4);max-width:560px;padding:var(--cvt-space-5) var(--cvt-space-5) var(--cvt-space-4);border:1px solid var(--cvt-border-subtle);border-radius:20px;background:var(--cvt-bg-surface);box-shadow:var(--cvt-shadow-e2)}
.mk-fitcard__label{margin:0;color:var(--cvt-text-secondary);font:700 12px/1.4 var(--cvt-font-ui);letter-spacing:.08em;text-transform:uppercase}
.mk-fitcard__scores{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cvt-space-3);padding-bottom:var(--cvt-space-4);border-bottom:1px solid var(--cvt-border-subtle)}
.mk-fitring{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:10px;margin:0}
.mk-fitring svg,.mk-fitring__num{grid-area:1/1}
.mk-fitring svg{width:76px;height:76px}
.mk-fitring__track,.mk-fitring__bar{fill:none;stroke-width:5}
.mk-fitring__track{stroke:var(--cvt-bg-sunken)}
.mk-fitring__bar{stroke:var(--cvt-bg-brand);stroke-linecap:round;stroke-dasharray:119.4}
.mk-fitring__num{display:grid;justify-items:center;line-height:1}
.mk-fitring__num strong{font:700 26px/1 var(--cvt-font-display)}
.mk-fitring__num span{font:600 10px/1.3 var(--cvt-font-mono);color:var(--cvt-text-secondary)}
.mk-fitring__label{font-size:13px;font-weight:700;line-height:1.25;overflow-wrap:anywhere;hyphens:auto}
.mk-fitcard__rows{display:grid;gap:var(--cvt-space-4);margin:0;padding:0;list-style:none}
.mk-fitrow{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:var(--cvt-space-3)}
.mk-fitrow__ico{grid-row:1/3;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--cvt-bg-brand-soft);color:var(--cvt-text-link)}
.mk-fitrow__ico svg{width:15px;height:15px}
.mk-fitrow--gap .mk-fitrow__ico{background:var(--cvt-bg-accent-soft);color:var(--cvt-text-label-accent)}
.mk-fitrow h3{margin:2px 0 2px;font:700 15px/1.3 var(--cvt-font-ui)}
.mk-fitrow p{margin:0;color:var(--cvt-text-secondary);font-size:14px;line-height:1.45}

/* Templates below 900px: a light green band, two framed sheets in view
   (three from 600px), dots under the row, no buttons. */
.mk-tpl__pager{display:flex;align-items:center;justify-content:space-between;gap:var(--cvt-space-3)}
.mk-tpl__pager[hidden]{display:none}
.mk-tpl__swipe{display:inline-flex;align-items:center;gap:6px;color:var(--cvt-text-secondary);font-size:13px}
.mk-tpl__swipe svg{width:14px;height:14px}
.mk-tpl__dots{display:flex;gap:4px;margin-right:-10px}
.mk-tpl__dot{display:grid;place-items:center;width:32px;height:44px;padding:0;border:0;background:none;cursor:pointer}
.mk-tpl__dot::before{content:"";width:12px;height:12px;box-sizing:border-box;border:2px solid var(--cvt-bg-brand);border-radius:50%}
.mk-tpl__dot.is-on::before{background:var(--cvt-bg-brand)}
.mk-tpl__dot:focus-visible{outline:2px solid var(--cvt-focus-ring);outline-offset:-4px}
@media not all and (min-width:900px){
  .mk-tplband{background:var(--cvt-bg-brand-soft)}
  .mk-home .mk-tplband{padding-bottom:var(--cvt-space-8)}
  .mk-home .mk-tplband .cvt-display-2{font-size:clamp(28px,8.3vw,36px);line-height:1.06}
  .mk-tpl{gap:var(--cvt-space-2)}
  .mk-tpl__track{gap:16px;margin:0 calc(var(--cvt-gutter) * -1);padding:4px var(--cvt-gutter) 24px;scroll-snap-type:x mandatory;scroll-padding-inline:var(--cvt-gutter);scrollbar-width:none}
  .mk-tpl__track::-webkit-scrollbar{display:none}
  .mk-tpl__card{flex:0 0 calc((100% - 36px) / 2);max-width:none;scroll-snap-align:start}
  .mk-tpl.is-on .mk-tpl__card:not(.is-active){transform:none}
  .mk-tpl.is-on .mk-tpl__card:not(.is-active) img{opacity:1}
  /* The chosen template grows a little from its top edge (the track's
     bottom padding leaves it room); with motion on it eases in and out
     as the choice moves (the 400ms transform transition below). */
  .mk-tpl__card{transform-origin:50% 0}
  .mk-tpl.is-on .mk-tpl__card.is-active{transform:scale(1.06)}
  .mk-tpl__card a{gap:var(--cvt-space-3);justify-items:center}
  .mk-tpl__sheet{width:100%;box-sizing:border-box;aspect-ratio:3/4;padding:6px;border-radius:var(--cvt-radius-md);box-shadow:var(--cvt-shadow-e2)}
  .mk-tpl__sheet img{height:100%;object-fit:cover;object-position:top;border-radius:2px}
  .mk-tpl__card.is-active .mk-tpl__sheet{border-color:var(--cvt-bg-brand);box-shadow:0 0 0 1px var(--cvt-bg-brand),var(--cvt-shadow-e2)}
  .mk-tpl__name{font-size:15px;font-weight:600;text-align:center}
  .mk-tpl__count,.mk-tpl__prev,.mk-tpl__next{display:none}
  .mk-tpl__bar{min-height:0}
}
@media (min-width:600px) and (not (min-width:900px)){.mk-tpl__card{flex-basis:calc((100% - 60px) / 3)}}
@media (min-width:900px){.mk-tpl__pager,.mk-tpl__pager:not([hidden]){display:none}}

/* Pricing on phones (A.5): two by two, compact; the free card in brand
   green; the inclusions said once in the note; the guarantee, the terms
   line and the free-application button under the cards. */
.mk-pf__cta{display:none}
@media (max-width:599px){
  .mk-pf__price{background:var(--cvt-bg-surface)}
  .mk-pf__price .cvt-container{display:flex;flex-direction:column}
  .mk-pf__top{display:contents}
  .mk-pf__top .mk-head{order:1;margin-bottom:var(--cvt-space-6)}
  .mk-pf__price .mk-alert{order:2}
  .mk-pf__price .mk-prices--home{order:3}
  .mk-pf .mk-guarantee--home{order:4;margin-top:var(--cvt-space-5)}
  .mk-pf__cta{order:6;display:grid;margin-top:var(--cvt-space-5)}
  .mk-pf__price .cvt-more{order:8;align-self:start}
  .mk-home .mk-pf__price .cvt-display-2{font-size:clamp(28px,8.3vw,36px);line-height:1.06}
  .mk-prices--home{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .mk-prices--home .mk-price{gap:2px;padding:16px 14px 14px;border-radius:16px}
  .mk-prices--home .mk-price__name{font-size:14px;line-height:1.3;overflow-wrap:anywhere;hyphens:auto}
  .mk-prices--home .mk-price__amount{margin-top:6px;font-size:36px}
  .mk-prices--home .mk-price__amount small{display:block;margin-top:4px;font-size:12px}
  .mk-prices--home .mk-price__qty{font-size:13px;font-weight:400;color:var(--cvt-text-secondary)}
  .mk-prices--home .mk-price__per{font-size:13px;font-weight:400;color:var(--cvt-text-secondary)}
  .mk-pf__price .mk-pf__incl{order:3;gap:var(--cvt-space-1) var(--cvt-space-4);font-size:14px}
  .mk-pf__incl ul{gap:var(--cvt-space-1) var(--cvt-space-4)}
  .mk-prices--home .mk-price:not(.mk-price--free) .mk-price__line,.mk-prices--home .mk-price:not(.mk-price--free) .mk-price__cta{display:none}
  .mk-prices--home .mk-price--free{border-color:var(--cvt-bg-brand);background:var(--cvt-bg-brand);color:var(--cvt-text-on-brand)}
  .mk-prices--home .mk-price--free .mk-price__qty,.mk-prices--home .mk-price--free .mk-price__line{color:var(--cvt-text-on-brand-muted)}
  .mk-prices--home .mk-price--free .mk-price__line{font-size:12px}
  .mk-prices--home .mk-price--free .mk-price__cta{padding-top:var(--cvt-space-3)}
  .mk-prices--home .mk-price--free .mk-price__cta .cvt-btn{justify-self:start;width:auto;max-width:100%;white-space:normal;line-height:1.2;overflow-wrap:anywhere;hyphens:auto;min-height:var(--cvt-size-touch-min);padding:6px 14px;border-color:transparent;border-radius:10px;background:var(--cvt-bg-accent);color:var(--cvt-text-on-accent);font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
  .mk-prices--home .mk-price--free .mk-price__cta{display:grid}
}

/* Final band on phones (A.5): full width, brand green, centred, no photo. */
@media (max-width:599px){
  .mk-final{padding:0}
  .mk-final .cvt-container{width:100%}
  .mk-final .mk-band{justify-items:center;padding:var(--cvt-space-12) var(--cvt-gutter);border-radius:0;background:var(--cvt-bg-brand);text-align:center}
  .mk-final .mk-photo--band{display:none}
  .mk-home .mk-final .cvt-display-2{font-size:clamp(28px,8.3vw,36px);line-height:1.08;text-wrap:balance}
  .mk-final .mk-cta-row{display:grid;width:100%}
  .mk-final .mk-cta-row .cvt-btn{width:100%;min-height:56px;border-radius:var(--cvt-radius-md)}
}

/* Other section headings on phones: A.5's size. The guide cards (not in
   the A.5 mock, kept as resources) run compact: two lines of summary, the
   rest stays in the HTML and on each guide's page. */
@media (max-width:599px){
  .mk-home .mk-pf__faq .cvt-display-2,.mk-home #guides .cvt-display-2{font-size:clamp(28px,8.3vw,36px);line-height:1.06}
  .mk-home .mk-guides{gap:var(--cvt-space-3)}
  .mk-home .mk-guides .guide-card{gap:var(--cvt-space-1);padding:var(--cvt-space-4)}
  .mk-home .mk-guides .guide-card p{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;font-size:15px}
}

/* ── 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 proof
   assembling once, 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: the copy, the button and the laptop are on screen from the first
   frame (Sergio, 2026-10-17: never a blank hero). Only the product
   assembles, once: fit card, CV, letter, answers rise in turn, the score
   ring fills to its value, the gold change marks draw under the CV lines,
   then the margin note and the accent marks appear. It rests on the final
   state, which is each element's own style (backwards fill only), and
   never loops. The page script pauses it with .is-wait while the proof is
   out of view. */
@keyframes mk-ring{from{stroke-dashoffset:119.4}}
@keyframes mk-mark{from{background-size:0% 38%}}
.mk-motion .mk-card--fit{animation:mk-rise 520ms var(--mk-ease) backwards}
.mk-motion .mk-card--cv{animation:mk-rise 520ms var(--mk-ease) 110ms backwards}
.mk-motion .mk-card--letter{animation:mk-rise 520ms var(--mk-ease) 210ms backwards}
.mk-motion .mk-card--answers{animation:mk-rise 520ms var(--mk-ease) 290ms backwards}
.mk-motion .mk-score__bar{animation:mk-ring 900ms var(--mk-ease) 320ms backwards}
.mk-motion .mk-proof .mk-cvline__text{animation:mk-mark 600ms var(--mk-ease) backwards;transition:background-size var(--cvt-motion-duration-base) var(--mk-ease)}
.mk-motion .mk-cvline[data-ref="1"] .mk-cvline__text{animation-delay:560ms}
.mk-motion .mk-cvline[data-ref="2"] .mk-cvline__text{animation-delay:720ms}
.mk-motion .mk-cvline[data-ref="3"] .mk-cvline__text{animation-delay:880ms}
.mk-motion .mk-proof__note,.mk-motion .mk-rays{animation:mk-fade 500ms var(--mk-ease) 760ms backwards}
.mk-motion .mk-proof.is-wait *{animation-play-state:paused}

/* Templates: neighbours sit back on the phone track; on the desktop row
   the frame darkens on hover and the active frame eases in. */
.mk-motion .mk-tpl.is-on .mk-tpl__card{transition:transform 400ms var(--mk-ease)}
.mk-motion .mk-tpl.is-on .mk-tpl__card img{transition:opacity 400ms var(--mk-ease)}
.mk-motion .mk-tpl__sheet{transition:border-color var(--cvt-motion-duration-base) var(--mk-ease),box-shadow 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-price,.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)}
@media (min-width:1200px){.mk-motion .mk-faq--side details[open] summary::after{transform:rotate(-135deg)}}
.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-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)}
  .mk-motion .mk-tpl__card a:hover .mk-tpl__sheet{border-color:var(--cvt-border-control);box-shadow:var(--cvt-shadow-e2)}
}
/* 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. */
/* A form's rows (password reset): fields, button and messages, evenly spaced. */
.mk-stack{display:grid;gap:var(--cvt-space-4)}
.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-support-address a{display:inline-flex;align-items:center;min-height:var(--cvt-size-touch-min);color:var(--cvt-text-link);font-weight:600;text-underline-offset:3px;overflow-wrap:anywhere}
.mk-support-address a:focus-visible{outline:2px solid var(--cvt-focus-ring);outline-offset:2px}
.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)}