/**
 * CCTRL CHILD THEME – CSS LAYER: PUBLIC SECTIONS
 * Handle: 'cctrl-public-sections'  ·  dep: 'cctrl-interactions'  ·  villkor: is_public_page()
 *
 * VAD DET HÄR ÄR
 * Det DELADE sektionslagret för svepets publika marknadsytor (startsida, nivå-landning,
 * community-landning). Det ersätter front-page-silon `front-page-claude.css` + `.fph-*`,
 * som var en fork av .btn / .card / .cctrl-section med 206 hårdkodade px-värden.
 * Order: #1739 · FACIT: agents/kommunikation-erik/uppdrag/2026-08-16-publik-startsida-FACIT.md
 * Designdom: Isabel 2026-08-16 (GS-A: .on-dark som delad ytklass).
 *
 * LAGEN SOM GÄLLER I DENNA FIL (GS §1/§2)
 * - Noll !important. Behövs det är det ett specificitetsproblem, inte ett behov.
 * - Noll px-literaler. Rum/typ/radie/kantbredd konsumeras som tokens ur cctrl-core.css.
 * - Noll hex och noll rgba. Färg = token. Mörkt läge sker via token-flip, aldrig via
 *   en handhållen mörk variant per komponent.
 * - Noll :root. Denna fil DEFINIERAR ingen token — den konsumerar dem.
 * - Delade komponenter (.btn .card .grid .cctrl-section .cctrl-container .eyebrow
 *   .sec-head .on-dark .ib-*) konsumeras. Ingen dubblett byggs här.
 *
 * DENNA FIL ÄGER: .hero .promise .recog .features/.feature .persona .proofband/
 * .proof-honest .ctaband .newsletter .faq .level-badge .level-hero .level-img
 * .kortsvar samt två delade ytfixar (se sist).
 *
 * NIVÅ-LANDNINGEN (#1764) bor i SAMMA lager. Den avvecklade silon `role-claude.css`
 * (+ .ccrole-*) är borta ur enqueue-kön och ur repot; nivåsidan konsumerar
 * komponenterna här och byter identitet genom --acc/--acc-bg/--acc-text (§12.1),
 * inte genom en kopia. Ett `niva-claude.css` hade varit husets fjärde silo.
 *
 * @package CCTRL
 */

/* ===================================================================
   0. MÅTTDOMÄN — två, inte sju
   ------------------------------------------------------------------
   .cctrl-container = --content-max-public (1200) på publik yta; den regeln
   finns redan i cctrl-layout.css. --tight aktiveras här (layout-filen lämnade
   den avstängd med en not "aktivera vid behov"). Specificiteten måste slå
   `.public-page .cctrl-container` (0,2,0) — därav .public-page-prefixet.
   =================================================================== */
.public-page .cctrl-container--tight {
  max-width: var(--content-max-tight);
}

/* ===================================================================
   1. HERO — sidans enda fokuspunkt
   ------------------------------------------------------------------
   EN yta: radial gradient från --ctp-tint-lilac ut i --bg. Ingen bild bakom,
   inget vitt kort ovanpå, ingen social-proof-strip (borttagen permanent i v2,
   copy-är-lag). Båda tokens flippar → gradienten flippar gratis.
   =================================================================== */
.hero {
  background: radial-gradient(115% 130% at 50% -20%, var(--ctp-tint-lilac) 0%, var(--bg) 60%);
  text-align: center;
}

.hero__in {
  max-width: 68ch;
  margin-inline: auto;
  padding-inline: var(--section-pad-x);
}

.hero h1 {
  text-wrap: balance;
  margin-block: 0 var(--flow-gap);
}

.hero__lead {
  font-size: var(--text-lead);
  color: var(--muted);
  max-width: 46ch;
  margin-inline: auto;
  margin-block: 0 var(--space-6);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--flow-gap);
  justify-content: center;
}

/* ===================================================================
   2. PROBLEM → LÖFTE — sidans andningspaus
   ------------------------------------------------------------------
   Tre element, ingen bild, inga kort, ingen CTA. Tidigare ett fjärde mörkt
   band (.fph-band) tidigt i flödet — det tog fokus från heron och bröt
   ljus/tonad-rytmen. Nu en tonad sektion (FACIT §5).
   =================================================================== */
.promise {
  text-align: center;
}

.promise h2 {
  max-width: 22ch;
  margin-inline: auto;
  text-wrap: balance;
}

.promise p {
  color: var(--muted);
  max-width: 56ch;
  margin-inline: auto;
  margin-block: var(--space-2) 0;
}

/* ===================================================================
   3. IGENKÄNNINGS-HOOK — .recog
   ------------------------------------------------------------------
   Isabels villkor 1.3: korten är INTE länkar. Sektionen har exakt EN väg ut,
   den samlade länken under rutnätet. Tomt tillstånd: renderas inte alls när
   copyn saknas — det sker i PHP, inte här.
   =================================================================== */
.recog {
  border-block: var(--hairline) solid var(--outline);
}

.recog__grid {
  gap: var(--space-2);
}

.recog__item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--flow-gap);
  background: var(--bg-elev);
  border: var(--hairline) solid var(--outline);
  border-inline-start: var(--recog-accent-w) solid var(--acc);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.recog__q {
  color: var(--text);
  font-size: var(--text-small);
  font-weight: 500;
}

.recog__link {
  color: var(--accent-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

/* Den samlade länken under ett rutnät. .recog__all är sektionens ENA väg ut
   (Isabels villkor 1.3); .section-more är samma form på de sektioner som har
   ett eget arkiv att peka på. */
.recog__all,
.section-more {
  text-align: center;
  margin-block: var(--space-3) 0;
  font-size: var(--text-small);
  font-weight: 600;
}

/* ===================================================================
   4. TJÄNSTEN — alternerande feature-rader
   ------------------------------------------------------------------
   Pias v2-feedback: fylligare och utrymmesgenerös, inte minikort.
   Alterneringen är nth-child-driven — en redaktör som lägger till eller tar
   bort en rad kan inte bryta rytmen. Ingen .feature--rev-klass i markup.
   Komponenten är ANTALSOKÄNSLIG: fyra rader i dag, sex om erbjudandet landar
   där (Isabel/Elin), utan en rad ny CSS.
   =================================================================== */
.features {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
}

.feature:nth-child(even) .feature__media {
  order: 2;
}

/* Rad utan media (bilderna är beställda men inte levererade) faller till en
   kolumn i stället för att lämna en tom halva. */
.feature:not(:has(.feature__media)) {
  grid-template-columns: 1fr;
}

.feature__media {
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-lg);
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-4);
  margin: 0;
  border: var(--hairline) solid var(--ctp-border-soft);
  background: var(--acc-bg);
  color: var(--muted);
}

/* Ikonen skalar med sloten i stället för att vara en fast liten symbol i en stor
   tom ruta. Mätt på prod: en 48 px-ikon i en 536 px-bred panel läser som en
   trasig bild, inte som en avsedd illustration. Bredden sätts på wrappern —
   en procent på själva svg:n löses mot wrappern, som krymper runt ikonen, och
   ger tillbaka samma lilla ikon. Procent = ingen px-literal, och den håller när
   bilderna kommer och sloten byter innehåll. */
.feature__media > * {
  width: 30%;
  min-width: var(--space-8);
}

.feature__media svg {
  width: 100%;
  height: auto;
  opacity: 0.55;
  color: var(--ctp-cat-violet);
}

/* Märkt platshållare. Ska SE UT som en platshållare — aldrig som färdig design. */
.feature__tag {
  display: block;
  margin-top: var(--flow-gap);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  color: var(--ctp-cat-violet);
}

.feature__ib {
  width: var(--space-6);
  height: var(--space-6);
  margin-bottom: var(--space-2);
}

.feature__text h3 {
  margin-block: 0;
}

.feature__lead {
  color: var(--muted);
  font-size: var(--text-lead);
  line-height: 1.5;
  margin-block: var(--flow-gap) 0;
}

.feature__list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.feature__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  color: var(--text);
}

.feature__list svg {
  flex: none;
  width: var(--space-2);
  height: var(--space-2);
  color: var(--ctp-cat-green-text);
}

/* ===================================================================
   5. PERSONAS — innehållsmodifierare på delade .card
   ------------------------------------------------------------------
   Ingen egen kortanatomi. .persona lägger BARA till innehållsregler; ytan,
   kanten, radien och skuggan kommer från .card i cctrl-components.css.
   =================================================================== */
.persona {
  padding: var(--space-3);
}

.persona__ib {
  width: var(--space-5);
  height: var(--space-5);
  margin-bottom: var(--flow-gap);
}

.persona h3 {
  margin-block: 0;
}

.persona .card__body {
  padding: 0;
  color: var(--muted);
  font-size: var(--text-small);
  margin-block: var(--space-1) 0;
}

/* Länken linjerar i botten på alla tre kort — inget kort ur grid. */
.persona__more {
  margin-top: auto;
  padding-top: var(--flow-gap);
  font-size: var(--text-small);
  font-weight: 600;
}

/* ===================================================================
   6. BEVIS — .proofband / .proof-honest
   ------------------------------------------------------------------
   Inga påhittade kundcitat, inga stjärnbetyg, inga logotyper utan tillstånd,
   inga siffror utan källa. Saknas godkänt anonymiserat material renderas
   sektionen inte alls — det sker i PHP.
   =================================================================== */
.proofband {
  border-block: var(--hairline) solid var(--outline);
}

.proof-honest {
  max-width: var(--content-max-tight);
  margin-inline: auto;
  background: var(--bg-elev);
  border: var(--hairline) solid var(--outline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: var(--space-6) var(--space-4);
  text-align: center;
}

.proof-honest__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ctp-cat-green-text);
  background: var(--ctp-cat-green-bg);
  border: var(--hairline) solid var(--ctp-cat-green);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--flow-gap);
}

.proof-honest p {
  font-family: var(--font-heading);
  font-size: var(--text-lead);
  color: var(--ink);
  line-height: 1.45;
  margin-block: var(--space-2) 0;
}

.proof-honest__by {
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: var(--text-small);
}

/* ===================================================================
   7. CTA-BAND — .ctaband
   ------------------------------------------------------------------
   Sidans ENDA permanent mörka band. Flippar inte med temat. Textfärgen ägs
   av ytklassen .on-dark (cctrl-components.css) — inte av reglerna här. Det
   är rotorsaksfixen: sätts färgen på elementet vinner ett barn med egen färg
   över bandet, och mörk text hamnar på mörk yta (Isabel, designdom §3).
   =================================================================== */
.ctaband {
  background: var(--ctp-brand-gradient);
  text-align: center;
}

.ctaband p {
  margin-block: var(--flow-gap) var(--space-3);
}

/* ===================================================================
   8. NYHETSBREV — .newsletter
   =================================================================== */
.newsletter {
  background: var(--ctp-tint-lilac);
  border-block: var(--hairline) solid var(--ctp-border-soft);
}

.newsletter__in {
  text-align: center;
}

.newsletter p {
  color: var(--muted);
  max-width: 50ch;
  margin-inline: auto;
  margin-block: var(--flow-gap) var(--space-3);
}

.newsletter__form {
  display: flex;
  gap: var(--flow-gap);
  max-width: 52ch;
  margin-inline: auto;
}

.newsletter__label {
  display: block;
  font-size: var(--text-small);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.newsletter__input {
  flex: 1;
  min-width: 0;
  border: var(--hairline) solid var(--outline);
  background: var(--bg-elev);
  color: var(--text);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-body);
  font-family: inherit;
}

.newsletter__input::placeholder {
  color: var(--muted);
}

.newsletter__hint {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: var(--space-2);
}

/* ===================================================================
   8b. PRISKORT — .plan  ·  FÖRTROENDESIFFROR — .stat
   ------------------------------------------------------------------
   FACIT är tyst om båda sektionerna, men de ligger publicerade på prod och en
   ombyggnad tar inte bort publicerat innehåll (roll-splitten: Fredrik äger
   stacken, Kom äger innehållet). De är rebyggda på delade .card/.grid här i
   stället för i .fph-plan/.fph-stat, så silon kan avvecklas i ett pass.
   Prisliteralen i markup är en känd defekt — priset ska renderas ur PMPro-nivån
   (Isabel, designdom villkor 2.2). Eget issue; den rättas inte genom att
   sektionen tas bort.
   =================================================================== */
.plan {
  padding: var(--space-3);
  text-align: center;
}

.plan h3 {
  margin-block: 0;
}

.plan__sub {
  color: var(--muted);
  font-size: var(--text-small);
  margin-block: var(--space-1) 0;
}

.plan__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-1);
  margin-block: var(--flow-gap);
}

.plan__amount {
  font-family: var(--font-heading);
  font-size: var(--h3-size);
  font-weight: var(--weight-bold);
  color: var(--ink);
}

.plan__period {
  color: var(--muted);
  font-size: var(--text-small);
}

.plan .feature__list {
  text-align: start;
  margin-bottom: var(--space-3);
}

.plan .btn {
  margin-top: auto;
}

.stat {
  padding: var(--space-3);
  text-align: center;
}

.stat__num {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--h3-size);
  font-weight: var(--weight-bold);
  color: var(--accent-text);
}

.stat__label {
  display: block;
  color: var(--muted);
  font-size: var(--text-small);
  margin-top: var(--space-1);
}

/* ===================================================================
   9. FAQ — .faq
   ------------------------------------------------------------------
   FACIT är tyst om FAQ:n, men den ligger publicerad på prod med fem svar och
   ska inte tas bort av en ombyggnad. Här är den samma innehåll i det delade
   vokabuläret i stället för .fph-qa. Formen döms av Erik som allt annat.
   =================================================================== */
.faq {
  max-width: var(--content-max-tight);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.faq__item {
  background: var(--bg-elev);
  border: var(--hairline) solid var(--outline);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
}

.faq__item > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.faq__item > summary::-webkit-details-marker {
  display: none;
}

.faq__item > summary svg {
  flex: none;
  width: var(--space-2);
  height: var(--space-2);
  color: var(--acc-text);
  transition: transform var(--transition-fast);
}

.faq__item[open] > summary svg {
  transform: rotate(45deg);
}

.faq__a {
  color: var(--muted);
  margin-block: var(--flow-gap) 0;
}

/* ===================================================================
   10. DELADE YTFIXAR — mörkt läge på publik yta
   ------------------------------------------------------------------
   Två regler som inte hör till någon enskild sektion utan lagar ett delat
   beteende, scopat till publik yta så blast-radien är mätbar.

   (a) .cctrl-section--bg-soft konsumerar --angel-vault-100, som INTE flippar.
       En tonad sektion blev därför ljuslila även i mörkt läge. Rätt slutfix är
       att tokenifiera modifieraren globalt — det berör varje yta som ärver den
       och är eget arbete. Här flippas den bara på publik yta.
   (b) .card hårdkodar #fff (och gör det igen i två mer specifika regler för
       tonad/otonad sektion). Ett vitt kort i mörkt läge bär ljus --text = ljus
       på vit. Tokenifieringen av .card är eget issue (FACIT §14 punkt 6); den
       här regeln gör personakorten korrekta i mörkt läge under tiden, utan att
       röra kortet på app-ytorna.
   Specificiteten måste slå `.cctrl-section:not(.cctrl-section--bg-soft) .card`
   (0,3,0) — därav html[data-theme] + .public-page.
   =================================================================== */
html[data-theme="dark"] .public-page .cctrl-section--bg-soft {
  background: var(--ctp-surface-alt);
}

html[data-theme="dark"] .public-page .card {
  background: var(--bg-card);
  border-color: var(--ctp-border);
}

/* Sista sektionen: temat nollar dess padding-bottom med !important i
   cctrl-layout.css (för att inte lämna en vit glipa mot sidfoten). På en TONAD
   sista sektion blir följden att innehållet ligger klistrat mot sidfotens kant.
   Luften läggs därför på behållaren i stället — samma resultat, inget
   !important-krig med det delade lagret. */
.cctrl-main > .cctrl-section:last-child > .cctrl-container {
  padding-bottom: var(--section-pad-y);
}

/* ===================================================================
   11. MOBIL — en kolumn genomgående (≤ 680 px)
   ------------------------------------------------------------------
   .grid.cols-2/3/4 → 1fr sköts redan av cctrl-layout.css. Här bara det som
   är sektionslagrets eget: feature-raden staplar med media först, knappar
   full bredd, formuläret staplat.
   =================================================================== */
@media (max-width: 680px) {
  .feature {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .feature:nth-child(even) .feature__media {
    order: 0;
  }

  .features {
    gap: var(--space-6);
  }

  .hero__cta .btn,
  .ctaband .btn {
    width: 100%;
  }

  .newsletter__form {
    flex-direction: column;
  }

  .newsletter__input {
    text-align: center;
  }
}

/* ===================================================================
   12. NIVÅ-IDENTITET — .level-* + .kortsvar
   ------------------------------------------------------------------
   Order: #1764 · FACIT: agents/kommunikation-erik/uppdrag/2026-08-16-niva-landning-FACIT.md
   Designdom: Isabel 2026-08-16 (GS-D: .level-*-familjen som DELAD komponent).

   Detta ersätter silon `role-claude.css` + `.ccrole-*` (55 selektorer, 100
   px-literaler, 17 hex, 9 rgba(255,…), ett !important, egen .ccrole-btn som
   skuggade delade .btn). Familjen bor HÄR, i det delade lagret, och inte i ett
   `niva-claude.css` — en fjärde silo hade varit samma fel en gång till.
   =================================================================== */

/* --- 12.1 Accent-indirektionen: EN NY NIVÅ = EN RAD -------------------
   Nivån byter identitet genom tre tokens, aldrig genom en kopia av lagret.
   Defaulterna bor i cctrl-core.css :root och är identiska med dagens
   lavendelvärden. Ingen ny färg skapas (Isabels GS-D) — varje nivå konsumerar
   en BEFINTLIG kategori-accent. Kartan nivå → accent bor i nivå-identitets-
   schemat: Coworker = blue, Leader = violet, Governance = green.
   (--ctp-cat-violet saknar medvetet en -text-variant: den klarar AA på sin egen
   tint utan, se cctrl-core.css #688.) */
.level-page--blue {
  --acc: var(--ctp-cat-blue);
  --acc-bg: var(--ctp-cat-blue-bg);
  --acc-text: var(--ctp-cat-blue-text);
}

.level-page--violet {
  --acc: var(--ctp-cat-violet);
  --acc-bg: var(--ctp-cat-violet-bg);
  --acc-text: var(--ctp-cat-violet);
}

.level-page--green {
  --acc: var(--ctp-cat-green);
  --acc-bg: var(--ctp-cat-green-bg);
  --acc-text: var(--ctp-cat-green-text);
}

.level-page--gold {
  --acc: var(--ctp-cat-gold);
  --acc-bg: var(--ctp-cat-gold-bg);
  --acc-text: var(--ctp-cat-gold-text);
}

/* Kategoriparet färg+tint är AVSIKTLIGT statiskt i mörkt läge (cctrl-core.css
   #688/#1657). Det håller för en liten ikonbädd men inte för en hero-YTA: en
   ljusblå tint som bakgrund i mörkt läge är fel yta, och kategorins -text når
   inte AA mot mörk bakgrund. Nivåns tint och textfärg härleds därför ur accenten
   i stället för att paletten flippas globalt — scopat till nivåsidan så att
   ikonbäddarna på alla andra ytor står still.
   Mätt: 22 %-blandningen ger 1,20–1,43:1 mot --bg (subtil yta, samma roll som
   tinten i ljust läge); 55 %-blandningen ger 7,2–8,4:1 mot --bg och 6,0–6,6:1
   mot tinten för alla fyra accenter = AA med marginal. */
html[data-theme="dark"] .level-page {
  --acc-bg: color-mix(in srgb, var(--acc) 22%, var(--bg));
  --acc-text: color-mix(in srgb, var(--acc) 55%, var(--on-dark));
}

/* --- 12.2 .level-badge — nivåns namn, ALDRIG ett nivånummer -----------
   Isabels villkor 2.1/3.4: PMPro-nivånumret är access-logik och visas aldrig
   för kund. Pillen bär nivåns NAMN. */
.level-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--acc-text);
  background: var(--acc-bg);
  border: var(--hairline) solid var(--acc);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--flow-gap);
}

.level-badge svg {
  flex: none;
  width: 1em;
  height: 1em;
}

/* --- 12.3 .level-hero — LJUS accent-radial, inte ett mörkt band -------
   Prod hade tre permanent mörka ytor (hero, business case, CTA). Då bär ingen
   av dem någon tyngd. Sidan har efter ombyggnaden EXAKT en: CTA-bandet.
   Båda tokens flippar → gradienten flippar gratis. */
.level-hero {
  background: radial-gradient(120% 130% at 80% -20%, var(--acc-bg) 0%, var(--bg) 62%);
}

.level-hero__in {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-6);
  align-items: center;
}

.level-hero h1 {
  text-wrap: balance;
  margin-block: var(--flow-gap);
}

.level-hero__lead {
  font-size: var(--text-lead);
  color: var(--muted);
  max-width: 44ch;
  margin-block: 0 var(--space-4);
}

.level-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* --- 12.4 .level-img — SLOTTEN CROPPAR ALDRIG ------------------------
   Isabels villkor 3.1 var svepets enda faktiska visuella fel: slotten satte
   object-fit:cover + object-position:left center mot aspect-ratio 4/3 och fick
   en 1950×450-banner med inbränd text. Nivånamnet kapades mitt i ordet
   ("Modern Coworl") i ljust, mörkt OCH mobil.
   Rotorsaken var fel MOTIV, inte fel crop-parameter — men regeln nedan är det
   som gör att felet inte kan återkomma när nivå fyra levereras:
   object-fit:cover och object-position är FÖRBJUDNA på den här slotten. Ett
   motiv med avvikande proportion letterboxas mot accentfonden, aldrig kapas.
   Hela motivfamiljen är 5:4 (mätt: 2000×1600 på alla tre nivåerna), samma
   proportion som delade .feature__media. */
.level-img {
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-lg);
  background: var(--acc-bg);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: var(--space-3);
  margin: 0;
}

.level-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Nivå utan levererat motiv får en ÄRLIG, märkt platshållare — aldrig en lånad
   bild från en annan nivå. */
.level-img--empty {
  border: var(--hairline) dashed var(--acc);
  color: var(--acc-text);
  text-align: center;
}

.level-img--empty svg {
  width: var(--space-6);
  height: var(--space-6);
  opacity: 0.7;
}

.level-img__tag {
  display: block;
  margin-top: var(--flow-gap);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
}

/* --- 12.5 .kortsvar — det citerbara blocket (GEO) --------------------
   Ligger direkt under fråge-rubriken, före brödtexten. Det är blocket AI-motorer
   lyfter, och det ska gå att citera fristående. */
.kortsvar {
  background: var(--acc-bg);
  border: var(--hairline) solid var(--acc);
  border-radius: var(--radius-md);
  padding: var(--flow-gap);
  margin-block: var(--space-3);
}

.kortsvar b {
  color: var(--acc-text);
}

/* --- 12.6 Delade komponenter i nivåns accent -------------------------
   Två scopade rader i stället för två forkade komponenter. Startsidan rörs inte.
   CTA-bandet: brand-gradienten slutar i NIVÅNS accent i stället för i lavendel.
   Ytan är permanent mörk i båda lägena och bär .on-dark (Isabels GS-A) — ingen
   regel här sätter någon textfärg. */
.level-page .ctaband {
  background: linear-gradient(150deg, var(--lav-900) 0%, var(--acc) 100%);
}

.level-page .feature__media svg {
  color: var(--acc-text);
}

/* Business case-bandets avslutning: en ghost-knapp och en textlänk på samma rad.
   Ingen terracotta här — sidans enda primära CTA är hero + CTA-bandet (FACIT §11). */
.level-page .section-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

/* --- 12.7 Nivåsidans mobil (≤ 860 px) — FACIT §3 ---------------------
   Hero blir en kolumn med BILDEN FÖRST; igenkänning och feature-rader staplar
   tidigare än det delade lagrets 680 px eftersom nivåsidans rader är fylligare.
   Allt scopat till .level-page så startsidans breakpoints står still. */
@media (max-width: 860px) {
  .level-hero__in {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .level-hero__lead {
    margin-inline: auto;
  }

  .level-hero__cta {
    justify-content: center;
  }

  .level-img {
    order: -1;
  }

  .level-page .recog__grid {
    grid-template-columns: 1fr;
  }

  .level-page .feature {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .level-page .feature:nth-child(even) .feature__media {
    order: 0;
  }
}

@media (max-width: 680px) {
  .level-hero__cta .btn {
    width: 100%;
  }
}