/* ==========================================================================
   Talea CV — mallgalleriet (/mallar/) och yrkessidorna (/exempel/)
   Statiska sidor, byggda av _design/bygg_mallsidor.js respektive
   _design/bygg_yrkessidor.js. De delar tokens, app.css och templates.css
   med appen; här ligger bara det som är eget för de statiska sidorna.

   Förhandsvisningarna är riktiga A4-ark (794 px) som skalas ned med
   transform. Transform tar ingen plats i layouten, därför bär omslaget
   höjden via aspect-ratio — annars hade varje kort lämnat 1123 px luft
   under sig.

   Färgreglerna (designgenomgången 18/8): plommon är yta (panelen,
   finalen) och primär-CTA; sanden bär insiktscitatet och
   certmarkörerna; allt annat är ink. Endast tokens ur tokens.css —
   var()-referenser utan definition gör hela deklarationen ogiltig,
   vilket var buggen som nollade luft och radier här t.o.m. 18/8.
   ========================================================================== */

.mv {
  margin: 0;
  /* app.css sätter html,body { height:100% } för appen — det gör body en
     viewporthöjd hög och sticky-toppen slutar sticka efter en skärm
     (granskningen 18/8, uppmätt). Marknadssidorna måste ha auto. */
  height: auto;
  background: var(--canvas);
  color: var(--ink-700);
  font-family: "Montserrat", system-ui, sans-serif;
}
/* Ankarhopp ska inte gömma rubriken bakom den klistrade toppen. */
.mv [id] { scroll-margin-top: 96px; }
/* Fokusringen (app.css: plum-600) syns inte mot plommonytorna — sanden
   gör den synlig, samma lösning som appens rail. */
.mv__topp :focus-visible, .mv__hero :focus-visible, .mv__finale :focus-visible,
body:has(.mv__main--flode) .mv__brodsmula :focus-visible { outline-color: var(--sand-300); }

/* --- topp och fot ---------------------------------------------------------
   Toppen följer /foretag (Mahmouds "föredömlig", 18/8): mörkt plommonglas
   som ligger kvar vid scroll, vit logga (samma invert-filter som appens
   rail) och en ghost-pill som CTA — den riktiga CTA:n står i flödet. */
.mv__topp {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5); padding: var(--s4) var(--s8);
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid var(--dark-line);
  /* Täckande grund FÖRE color-mix — utan den blir toppen osynlig i
     webbläsare utan color-mix (facit gör samma tvåsteg). */
  background: var(--plum-900);
  background: color-mix(in srgb, var(--plum-900) 94%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--dark-text);
}
.mv__brand { display: inline-flex; align-items: center; gap: var(--s3); text-decoration: none; }
.mv__brand img { height: 26px; display: block; }
.mv__topp .brandstack img { filter: brightness(0) invert(1); }
.mv__topp .brandstack__work { color: rgba(255,255,255,.92); }
.mv__produkt {
  font-weight: 600; letter-spacing: .08em; color: var(--sand-300);
  border-left: 1px solid var(--dark-line); padding-left: var(--s3);
}
/* Höger i toppen: Logga in (textlänk) + ghost-pill — obligatoriskt par
   enligt designstandarden. */
.mv__topp__hoger { display: flex; align-items: center; gap: var(--s5); }
.mv__loggain {
  color: var(--dark-muted); text-decoration: none;
  font-size: var(--t-sm); font-weight: 600;
}
.mv__loggain:hover { color: var(--dark-text); }

/* Toppnav — hemflytten 20/8: talea.se bär hela sajten och topbaren fick
   huvudmenyn. Länkarna följer Logga in-mönstret (--dark-muted → --dark-text),
   aktuell sida markeras i sand (accentregeln: sand bär accenten). Under
   960px lägger sig raden under ordbilden och rullar i sidled i stället
   för att radbrytas — fem länkar staplade vore en halv skärm meny. */
.mv__toppnav { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); }
.mv__toppnav a {
  color: var(--dark-muted); text-decoration: none;
  font-size: var(--t-sm); font-weight: 600; white-space: nowrap;
}
.mv__toppnav a:hover { color: var(--dark-text); }
.mv__toppnav a[aria-current="page"] { color: var(--sand-300); }
@media (max-width: 960px) {
  .mv__topp { flex-wrap: wrap; row-gap: var(--s2); }
  .mv__toppnav {
    order: 10; flex-basis: 100%;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    /* Fade-kanten visar att raden rullar — klippet ensamt är för svagt
       vid 375–393px där bara "Fö" av sista länken syns (granskning 20/8). */
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  /* padding-block ger 36px träffyta (WCAG 2.5.8) och dragyta för gesten. */
  .mv__toppnav a { padding-block: var(--s2); }
  .mv__toppnav::-webkit-scrollbar { display: none; }
}

.mv__cta {
  display: inline-block; padding: var(--s3) var(--s6);
  background: var(--plum-700); color: var(--white);
  border-radius: var(--r-pill); text-decoration: none; font-weight: 600;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.mv__cta:hover { background: var(--plum-800); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(44,5,56,.25); }
.mv__cta--stor { padding: var(--s4) var(--s8); font-size: var(--t-md); }
/* På mörk botten (hero, CTA-bandet) är sanden primärfärgen — /foretag-knappen. */
.mv__cta--invert { background: var(--sand-300); color: var(--plum-900); }
.mv__cta--invert:hover { background: var(--sand-200); box-shadow: 0 10px 24px rgba(44,5,56,.35); }
/* I den mörka toppen: ghost-pill, inte en till fylld knapp. */
.mv__topp .mv__cta { background: transparent; border: 1px solid var(--dark-line); }
.mv__topp .mv__cta:hover { background: var(--dark-soft); transform: none; box-shadow: none; }

.mv__brodsmula {
  padding: var(--s4) var(--s8) 0; font-size: var(--t-sm); color: var(--ink-400);
}
.mv__brodsmula a { color: var(--ink-500); }
.mv__sep { margin: 0 var(--s2); color: var(--ink-300); }

.mv__main { max-width: 1180px; margin: 0 auto; padding: var(--s5) var(--s8) var(--s10); }
.mv__main h1 {
  font-size: var(--t-3xl); line-height: 1.15; letter-spacing: -.01em;
  color: var(--ink-800); margin: var(--s4) 0 var(--s3); max-width: 30ch;
}
.mv__ingress { font-size: var(--t-lg); line-height: 1.55; color: var(--ink-600); max-width: 58ch; margin: 0 0 var(--s6); }

/* --- flödessidorna (/exempel/): fullbreddsband som startsidan ------------- */
.mv__main--flode { max-width: none; padding: 0; }
.mv__rad { max-width: 1180px; margin: 0 auto; padding: 0 var(--s8); }
/* Smalspåret: FAQ och citat läses i 760 px, inte i 1180. */
.mv__rad--smal { max-width: 760px; }
/* Flytande sektionsandning — aldrig fast 72px (designstandarden §1). */
.mv__band { padding: clamp(48px, 7vw, 88px) 0; }
.mv__band--ton { background: var(--ink-100); }
/* Vitt är förstahandsvalet för golvväxling; ton sparsamt (anti-tårta §2). */
.mv__band--vit { background: var(--white); }
/* Textbanden centrerar sin spalt — 68ch vänsterställt i 1180 px lämnar
   annars en död högersida på breda skärmar. */
.mv__band .mv__text { margin: 0 auto; }

/* Hjälten lånar /foretag rakt av: aurorans radialgradienter i varumärkets
   toner ovanpå plommongradienten, och loggans plakettgeometri som rundat
   nedervänsterhörn. Brödsmulan ovanför färgas in i samma yta via :has()
   så att topp → smula → hero läses som EN mörk zon. */
.mv__hero {
  background:
    radial-gradient(1100px 640px at 88% -12%, rgba(139,75,161,.5), transparent 62%),
    radial-gradient(760px 520px at -8% 108%, rgba(232,201,155,.14), transparent 55%),
    linear-gradient(175deg, var(--plum-850) 0%, var(--plum-800) 55%, var(--plum-700) 100%);
  color: var(--dark-text);
  padding: clamp(36px, 6vw, 68px) 0 clamp(44px, 7vw, 84px);
  border-radius: 0 0 0 clamp(40px, 8vw, 96px);
  overflow: hidden;
}
body:has(.mv__main--flode) .mv__brodsmula {
  background: var(--plum-850); color: var(--dark-muted);
  margin: 0; padding-top: var(--s4); padding-bottom: var(--s3);
  /* linjera smulan med hero-innehållets 1180-spår på breda skärmar */
  padding-left: max(var(--s8), calc((100% - 1180px) / 2 + var(--s8)));
  padding-right: max(var(--s8), calc((100% - 1180px) / 2 + var(--s8)));
}
body:has(.mv__main--flode) .mv__brodsmula a { color: var(--dark-muted); }
body:has(.mv__main--flode) .mv__brodsmula [aria-current] { color: var(--dark-text); }
body:has(.mv__main--flode) .mv__sep { color: var(--dark-line); }
.mv__ogonbryn {
  font-size: var(--t-sm); font-weight: 600; letter-spacing: .02em;
  color: var(--ink-500); margin: 0 0 var(--s3);
}
.mv__hero .mv__ogonbryn {
  color: var(--sand-300); font-size: var(--t-xs);
  letter-spacing: .2em; text-transform: uppercase;
}
.mv__hero h1 { color: var(--dark-text); margin-top: 0; }  /* facits ton, inte rent vitt */
.mv__hero .mv__ingress { margin-bottom: 0; color: var(--dark-muted); }
.mv__hero .mv__byline { color: var(--dark-muted); }
.mv__hero .mv__byline strong { color: var(--dark-text); }
.mv__hero .mv__byline__m { background: var(--sand-300); color: var(--plum-900); }

/* Förtroenderaden under hjälten — /foretag:s bevis-strip. */
.mv__bevis { border-bottom: 1px solid var(--line-soft); }
.mv__bevis .mv__rad {
  display: flex; flex-wrap: wrap; gap: var(--s4) clamp(20px, 4vw, 48px);
  justify-content: center; padding-top: var(--s5); padding-bottom: var(--s5);
}
.mv__bevis .mv__rad > div { display: grid; justify-items: center; gap: 2px; text-align: center; }
.mv__bevis strong { font-size: var(--t-md); font-weight: 700; color: var(--plum-900); letter-spacing: -.02em; }
.mv__bevis span { font-size: var(--t-xs); color: var(--ink-600); }  /* ink-500 låg under AA */

/* Avsändarplaketten: loggans mjuka kvadrat i miniatyr. */
.mv__byline {
  display: flex; align-items: center; gap: var(--s3);
  margin: var(--s5) 0 0; font-size: var(--t-sm); color: var(--ink-500);
}
.mv__byline__m {
  flex: none; width: 34px; height: 34px; border-radius: var(--r-sm);
  background: var(--plum-800); color: var(--white);
  display: grid; place-items: center; font-weight: 800; font-size: var(--t-md);
}
.mv__byline strong { color: var(--ink-800); }
.mv__byline a { color: inherit; text-decoration: none; }
.mv__byline a:hover { text-decoration: underline; }

/* --- filterrad ------------------------------------------------------------ */
.mv__filter { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s6); }
.mv__chip {
  padding: var(--s2) var(--s4); border: 1px solid var(--line);
  background: var(--white); border-radius: var(--r-pill); cursor: pointer;
  font: inherit; font-size: var(--t-sm); color: var(--ink-600);
}
.mv__chip:hover { border-color: var(--plum-400); }
.mv__chip.ar-vald { background: var(--plum-700); border-color: var(--plum-700); color: var(--white); }

/* --- rutnät och kort ------------------------------------------------------ */
.mv__rutnat {
  display: grid; gap: var(--s6);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.mv__rutnat--smal { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

.mv__kort[hidden] { display: none; }
.mv__kort {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 18px; overflow: hidden;   /* kanon: kortradie 18px */
  transition: box-shadow .18s ease, transform .18s ease;
}
.mv__kort:hover { box-shadow: var(--sh-3); transform: translateY(-2px); }

.mv__kortbild { display: block; background: var(--ink-100); }
.mv__korttext { padding: var(--s4) var(--s4) var(--s5); }
.mv__korttext h2 { font-size: var(--t-md); line-height: 1.35; margin: 0 0 var(--s2); }
.mv__korttext h2 a { color: var(--ink-800); text-decoration: none; }
.mv__korttext h2 a:hover { text-decoration: underline; }
.mv__korttext p { margin: 0 0 var(--s3); font-size: var(--t-sm); color: var(--ink-500); }
.mv__korttext p:last-child { margin-bottom: 0; }

/* --- guidekorten (/guide/) — textkort utan förhandsvisning ---------------- */
.mv__rutnat--guider { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.mv__kort--guide .mv__korttext { padding: var(--s5); }
/* Kortrubrikerna är h3 — sju h2 i samma band hade plattat dokumenthierarkin. */
.mv__kort--guide .mv__korttext h3 { font-size: var(--t-lg); line-height: 1.35; margin: 0 0 var(--s2); }
.mv__kort--guide .mv__korttext h3 a { color: var(--ink-800); text-decoration: none; }
.mv__kort--guide .mv__korttext h3 a:hover { text-decoration: underline; }
.mv__kort--guide .mv__korttext p { color: var(--ink-600); max-width: 46ch; }
@media (max-width: 640px) {
  /* Textkorten tål inte tvåspalt på mobil — rubrikerna bryter till tre rader. */
  .mv__rutnat--guider { grid-template-columns: 1fr; }
}

/* Brödtextlänkarna är silons kärnfunktion (korslänkningen) och får inte se ut
   som vanlig text — den globala a-regeln nollar annars både färg och streck.
   Finalen träffas inte (kräver .mv__band), så dess sand-länkar står orörda. */
.mv__main--flode .mv__band :is(p, li) a:not(.mv__cta) { color: var(--plum-700); text-decoration: underline; text-underline-offset: 2px; }
.mv__main--flode .mv__band :is(p, li) a:not(.mv__cta):hover { color: var(--plum-800); }

/* --- märken --------------------------------------------------------------- */
.mv__marken { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; }
.mv__mark {
  font-size: var(--t-xs); padding: 2px var(--s3); border-radius: var(--r-pill);
  background: var(--ink-100); color: var(--ink-500); border: 1px solid var(--line);
}
/* Gratis är hela argumentet mot konkurrenterna — det ska synas, inte viskas. */
.mv__mark--gratis { background: var(--ok-100); color: var(--ok); border-color: #BFE0CC; }
.mv__mark--ats { background: #E9EFF8; color: #1E3352; border-color: #C4D4EC; }
/* Ärligheten är också ett säljargument: bara två konkurrenter vågar märka ut
   när en mall INTE är ATS-säker. */
.mv__mark--ej { background: var(--warn-100); color: var(--warn); border-color: #EBD6B8; }

/* --- skalade förhandsvisningar -------------------------------------------- */
.mv__skala, .mv__stor {
  --skala: .28;
  width: 100%; overflow: hidden;
  aspect-ratio: 794 / 1123;          /* bär höjden som transform inte gör */
}
.mv__ark {
  transform-origin: top left;
  transform: scale(var(--skala));
  box-shadow: none;
  pointer-events: none;               /* kortet är länken, inte dokumentet */
}
/* Grundskalan är satt för en typisk kolumn (~230 px). mallfilter.js räknar om
   den exakt efter uppmätt bredd — men sidan ska se rätt ut även utan skript,
   därför står ett dugligt värde här och inte noll. */

/* --- uppslaget (mall- och yrkessidor) ------------------------------------- */
.mv__uppslag {
  display: grid; gap: var(--s8); align-items: start;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
  margin-bottom: var(--s8);
}
.mv__band .mv__uppslag { margin-bottom: 0; }
.mv__stor { --skala: 1; max-width: 560px; box-shadow: var(--sh-4); border-radius: var(--r-sm); }

/* Panelen är sidans produktkort — plommonyta gör att den läses som Talea,
   sticky för att CTA:n ska följa med medan A4-arket granskas. */
.mv__panel {
  background: var(--plum-050); border: 1px solid var(--plum-200);
  border-radius: var(--r-md); padding: var(--s6);
  /* toppen (uppmätt 81 px) är sticky med z-index 20 — panelen måste
     fastna UNDER den, inte glida in bakom glaset */
  position: sticky; top: calc(81px + var(--s4));
}
.mv__panel .mv__cta { display: block; text-align: center; margin: var(--s5) 0 var(--s3); }
.mv__finstilt { font-size: var(--t-xs); color: var(--ink-600); text-align: center; margin: 0; }

.mv__fakta { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s5); margin: var(--s6) 0 0; font-size: var(--t-sm); }
.mv__fakta dt { color: var(--ink-400); }
.mv__fakta dd { margin: 0; color: var(--ink-700); }

/* --- brödtext ------------------------------------------------------------- */
.mv__text { max-width: 68ch; margin: var(--s8) 0 0; }
.mv__text h2 {
  font-size: var(--t-xl); line-height: 1.3; color: var(--ink-800);
  margin: var(--s10) 0 var(--s4);
}
/* Plommonmarkören: loggans mjuka form i miniatyr som sektionsankare. */
.mv__text h2::before {
  content: ""; display: block; width: 28px; height: 4px;
  border-radius: var(--r-pill); background: var(--plum-300);
  margin-bottom: var(--s3);
}
.mv__text > h2:first-child, .mv__text > p:first-child + h2 { margin-top: 0; }
.mv__band .mv__text > h2:first-child { margin-top: 0; }
.mv__text p, .mv__text li { font-size: var(--t-md); color: var(--ink-600); line-height: 1.65; }
.mv__text p { margin: 0 0 var(--s4); }
.mv__steg li, .mv__kategorier li { margin-bottom: var(--s3); }

/* --- FAQ: /foretag:s fällbara rader — details/summary utan skript --------- */
.mv__faq { margin: var(--s4) 0 0; }
.mv__faq details { border-bottom: 1px solid var(--line); }
.mv__faq summary {
  cursor: pointer; padding: var(--s5) 36px var(--s5) 0;
  font-size: var(--t-md); font-weight: 700; color: var(--ink-800);
  list-style: none; position: relative;
}
.mv__faq summary::-webkit-details-marker { display: none; }
.mv__faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
  font-weight: 400; font-size: 1.3rem; color: var(--plum-700);
  transition: transform .15s ease;
}
.mv__faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.mv__faq details > p { margin: 0; padding: 0 36px var(--s5) 0; color: var(--ink-600); line-height: 1.65; max-width: 62ch; }

/* ==========================================================================
   Yrkessidornas artikelblock
   ========================================================================== */

/* Svag/stark sida vid sida — sidans jämförelse, med rekryterarstämplar.
   Korten är små dokument (vit yta, skugga), inte varningsrutor. */
.mv__jamfor { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: start; margin: var(--s5) 0; }
.mv__exempel { margin: 0; padding: var(--s5); background: var(--white); border-radius: var(--r-md); box-shadow: var(--sh-2); }
.mv__stampel {
  display: inline-block; font-size: var(--t-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 3px 10px; border-radius: var(--r-pill); margin-bottom: var(--s3);
}
.mv__exempel--svag .mv__stampel { background: var(--warn-100); color: var(--warn); }
.mv__exempel--stark .mv__stampel { background: var(--ok-100); color: var(--ok); }
.mv__exempel blockquote { margin: 0 0 var(--s3); color: var(--ink-700); line-height: 1.6; font-size: var(--t-md); }

.mv__kommentar { font-size: var(--t-base); color: var(--ink-500); line-height: 1.6; }
.mv__kommentar strong { color: var(--ink-700); }
.mv__exempel .mv__kommentar { margin: 0; padding-top: var(--s3); border-top: 1px solid var(--line-soft); }

/* Arbetsposterna: kort + "Vår läsning" som bildtext under. */
.mv__post {
  margin: var(--s5) 0 var(--s2); padding: var(--s5);
  background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--r-md);
}
.mv__post h3 { font-size: var(--t-md); margin: 0 0 var(--s3); color: var(--ink-800); }
.mv__post ul { margin: 0; padding-left: 1.2em; }
.mv__post li { margin-bottom: var(--s1); }
.mv__kommentar--post { margin: 0 0 var(--s6); padding-left: var(--s5); max-width: 58ch; }

/* Insikten: sidans enda sandyta — bemanningsfirmans röst från golvet. */
.mv__insikt {
  margin: var(--s8) 0 0; padding: var(--s6) var(--s6) var(--s6) var(--s10);
  background: var(--sand-050); border-radius: var(--r-lg); position: relative;
}
.mv__insikt::before {
  content: "\201D"; position: absolute; left: var(--s4); top: var(--s2);
  font-size: 3rem; line-height: 1; color: var(--sand-300);
  font-family: Georgia, "Times New Roman", serif;
}
.mv__insikt p { margin: 0; font-size: var(--t-md); color: var(--ink-700); line-height: 1.6; }
.mv__insikt footer { margin-top: var(--s3); font-size: var(--t-sm); color: var(--ink-500); }

/* Certlistan: sandstreck i stället för browserpunkter, ledorden i ink-800. */
.mv__certlista { list-style: none; padding-left: 0; margin: var(--s4) 0; }
.mv__certlista li { position: relative; padding-left: var(--s6); margin-bottom: var(--s4); }
.mv__certlista li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 14px; height: 3px; border-radius: var(--r-pill); background: var(--sand-600);
}
.mv__certlista strong { color: var(--ink-800); }

/* Syskonlänkarna som chips — startsidans .st-yrke-mönster. */
.mv__yrken { display: flex; flex-wrap: wrap; gap: var(--s3); }
.mv__yrkechip {
  padding: 9px 18px; border-radius: var(--r-pill);
  border: 1.5px solid var(--line); background: var(--white);
  color: var(--ink-700); font-size: var(--t-sm); font-weight: 600; text-decoration: none;
}
.mv__yrkechip:hover { border-color: var(--ink-700); box-shadow: var(--sh-1); }
.mv__yrkechip--alla { border-color: var(--ink-700); font-weight: 800; }
.mv__mallrad { margin: var(--s6) 0 0; font-size: var(--t-sm); color: var(--ink-500); }
.mv__mallrad a { color: var(--ink-700); font-weight: 600; }

/* ==========================================================================
   Finalen — sidans ENDA mörka band efter heron och enda centrerade CTA.
   Aurora i spegel av heron, plaketthörn övre vänster (diagonalen).
   Tvåspaltsgrid: centrerad CTA-spalt + nav-spalt med syskonchips i mörk
   variant och mallrad — chips och CTA staplas aldrig mer som egna plattor.
   ========================================================================== */
.mv__finale {
  background:
    radial-gradient(900px 520px at 12% 112%, rgba(139,75,161,.45), transparent 60%),
    radial-gradient(700px 460px at 96% -10%, rgba(232,201,155,.12), transparent 55%),
    linear-gradient(175deg, var(--plum-850) 0%, var(--plum-800) 70%, var(--plum-700) 100%);
  color: var(--dark-text);
  border-radius: clamp(40px, 8vw, 96px) 0 0 0;
  padding: clamp(48px, 7vw, 88px) 0;
  overflow: hidden;
}
.mv__finale__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 72px); align-items: center; }
.mv__finale__cta { text-align: center; }
.mv__finale .mv__ogonbryn {
  color: var(--sand-300); font-size: var(--t-xs);
  letter-spacing: .2em; text-transform: uppercase;
}
.mv__finale__cta h2 { font-size: var(--t-2xl); color: var(--white); letter-spacing: -.02em; margin: 0 0 var(--s3); }
.mv__finale__sub { color: var(--dark-muted); max-width: 44ch; margin: 0 auto var(--s6); }
.mv__finale__finstilt { font-size: var(--t-xs); color: var(--dark-text); margin-top: var(--s3); }
.mv__finale__nav h3 { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--sand-300); margin: 0 0 var(--s4); }
.mv__finale .mv__yrkechip { background: transparent; border-color: var(--dark-line); color: var(--dark-text); }
.mv__finale .mv__yrkechip:hover { background: var(--dark-soft); border-color: var(--dark-muted); box-shadow: none; }
.mv__finale .mv__mallrad { color: var(--dark-text); }  /* dark-muted föll under AA nära auroran */
.mv__finale .mv__mallrad a { color: var(--sand-300); }

/* Kolofonen: EN rad text på canvas — aldrig en platta, aldrig ink-800-yta. */
/* ink-600, inte ink-500: 13px-texten mätte 4,42:1 mot canvas — under AA
   (granskning 20/8, org.nr-raden gjorde det synligt). */
.mv__kolofon { padding: var(--s6) var(--s8); text-align: center; font-size: var(--t-sm); color: var(--ink-600); background: var(--canvas); }
.mv__kolofon p { margin: 0; }
.mv__kolofon a { color: var(--plum-700); }

/* Hubbens trust-rad — startsidans .st-trust-mönster. */
.mv__trust {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6);
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  padding: var(--s6) 0; margin: var(--s8) 0 0;
}
.mv__trust h3 { font-size: var(--t-md); color: var(--ink-800); margin: 0 0 var(--s1); }
.mv__trust p { font-size: var(--t-sm); color: var(--ink-500); margin: 0; }

/* --- mobil ---------------------------------------------------------------- */
@media (max-width: 860px) {
  .mv__uppslag { grid-template-columns: 1fr; }
  /* Panelen först på smal skärm: märken, CTA och fakta ska inte ligga
     halvannan skärm ner under ett helt A4-ark. */
  .mv__panel { order: -1; position: static; }
  .mv__stor { --skala: .85; max-width: none; }
  .mv__jamfor { grid-template-columns: 1fr; }
  .mv__trust { grid-template-columns: 1fr; }
  .mv__finale__grid { grid-template-columns: 1fr; }
  .mv__finale__nav { text-align: center; }
  .mv__finale .mv__yrken { justify-content: center; }
}
@media (max-width: 480px) {
  /* Topbarens minimum är 430 px med Logga in — på 360–393-telefoner gav den
     sidledsscroll åt hela sidan. På de minsta skärmarna nås inloggningen
     via verktyget i stället. */
  .mv__loggain { display: none; }
  .mv__topp__hoger { gap: var(--s3); }
}
@media (max-width: 680px) {
  .mv__topp { padding: var(--s4) var(--s5); }
  /* Knappen i toppen tog en fjärdedel av mobilskärmen och tvingade rubriken
     nedåt. Den ska finnas, inte dominera — den riktiga CTA:n står i flödet. */
  .mv__topp .mv__cta { padding: var(--s3) var(--s4); font-size: var(--t-sm); white-space: nowrap; }
  .mv__main { padding: var(--s4) var(--s5) var(--s10); }
  .mv__main--flode { padding: 0; }
  .mv__rad { padding: 0 var(--s5); }
  .mv__brodsmula { padding: var(--s4) var(--s5) 0; }
  .mv__rutnat { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s5); }
  .mv__stor { --skala: .62; }
  /* Faktarutan bryter sönder i två spalter på 287 px — stapla den. */
  .mv__fakta { grid-template-columns: 1fr; gap: 0; }
  .mv__fakta dt { margin-top: var(--s3); }
  /* Hela spaltbredden som träffyta för flödes-CTA:n. */
  .mv__finale .mv__cta--stor { display: block; }
  .mv__exempel, .mv__post { padding: var(--s3) var(--s4); }
  .mv__insikt { padding: var(--s5) var(--s5) var(--s5) var(--s8); }
}
@media (max-width: 430px) {
  .mv__stor { --skala: .42; }
}

/* mallsidornas del av sidslutet */
/* "Liknande CV-mallar"-bandet: kortrutnätet bor i textspalten, och kortens
   H2 är kortrubriker — inte sektionsrubriker. Utan de här raderna ärver de
   xl-skalan och plommonmarkören från .mv__text h2. */
.mv__text .mv__korttext h2 { font-size: var(--t-md); margin: 0 0 var(--s2); }
.mv__text .mv__korttext h2::before { content: none; }
.mv__text .mv__korttext p { font-size: var(--t-sm); color: var(--ink-500); margin: 0 0 var(--s3); }
.mv__text .mv__korttext p:last-child { margin-bottom: 0; }