/* Inter (variabel, SIL OFL 1.1) — självhostad, inlinad för att slippa @import-hopp. */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../media/fonts/inter-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../media/fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Byggbevis — designsystem v2 "Lättnad"
   Hållning: schweizisk neo-grotesk i vikt 400–500, stor och lugn typografi,
   nästan raka hörn, vit botten med mörka infällda kontrastpaneler, EN
   accentfärg som bara används på huvudknappen. Sajten ska kännas som att
   någon äntligen skrivit ut exakt vad som gäller — dyrare än den kostar,
   aldrig skrikig.
   ========================================================================== */

:root {
  /* Ytor och text */
  --paper: #ffffff;
  --paper-alt: #f7f7f4;
  --paper-sunk: #f0f0ec;
  --ink: #0c0a08;
  --muted: rgba(12, 10, 8, .62);
  --faint: rgba(12, 10, 8, .58);   /* 4,88:1 mot vitt — WCAG AA för liten text.
                                      Mot --paper-sunk blir det 4,69:1: mörka
                                      inte --paper-sunk, då faller den under 4,5. */
  --border: rgba(12, 10, 8, .12);        /* 1,30:1 — endast dekorativt (avdelare, kortkanter) */
  --border-ui: rgba(12, 10, 8, .48);     /* 3,50:1 — allt som identifierar en kontroll (WCAG 1.4.11) */
  --border-strong: rgba(12, 10, 8, .48);

  /* Accent — hi-vis, byggbranschens säkerhetsfärg. Alltid med svart text.
     Används ENDAST på knappar (arbetsregel 3). */
  --accent: #d4f250;
  --accent-hover: #c6e93a;

  /* Mörka ytor — infällda paneler à la Lithic, inte helskärmsband */
  --dark: #0c0a08;
  --dark-alt: #171412;
  --dark-text: #ffffff;
  --dark-muted: rgba(255, 255, 255, .62);
  --dark-border: rgba(255, 255, 255, .38);  /* 3,12:1 mot --dark (WCAG 1.4.11) */
  --dark-hairline: rgba(255, 255, 255, .14); /* endast dekorativ linje på mörk yta */

  /* Radie — nästan raka hörn. Tre värden + pill, aldrig fler. */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 12px;
  --r-pill: 999px;

  /* Typografi — vikt 400 är standard, 500 för betoning. Aldrig 700+.
     Hierarkin görs med GRAD och luft, inte vikt — som ramp.com, vars
     jätterubrik ligger på medium och bara är stor. */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-display: clamp(2.8rem, 6.2vw, 5.5rem);
  --fs-h2: clamp(2rem, 3.6vw, 3.25rem);
  --fs-h3: clamp(1.3rem, 1.7vw, 1.65rem);
  --fs-h4: 1.0625rem;
  /* Leaden ska ALLTID vara större än --fs-body (17px). Den gamla kurvan
     (1.25vw) nådde 1.25rem först vid 1600px och gav 16,8px vid 1280 —
     alltså mindre än brödtexten mitt i det vanligaste bredd-spannet. */
  --fs-lead: clamp(1.125rem, 0.95rem + 0.6vw, 1.35rem);
  /* Storstatens siffergrad. Kalibrerad mot två uppmätta punkter, inte gissad:
     64px vid 768 och 88px vid 1280. Golvet 44px är läsbarhetsgränsen på den
     minsta telefonen, taket 96px nås vid 1447px. */
  --fs-stat: clamp(2.75rem, 1.75rem + 4.7vw, 6rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;

  /* Spacing */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 40px;
  --s-5: 72px;
  --s-6: 120px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur-1: .16s;
  --dur-2: .34s;
  --dur-3: .6s;

  --shadow-1: 0 1px 2px rgba(12, 10, 8, .05);
  --shadow-2: 0 1px 3px rgba(12, 10, 8, .06), 0 10px 30px rgba(12, 10, 8, .06);

  --content: min(1240px, 90%);
  --nav-h: 72px;

  /* Prickraster — Ramp-liknande textur, medvetet nästan omärklig.
     Glesare och ljusare än v1: texturen ska anas, inte synas. */
  --dots: radial-gradient(rgba(12, 10, 8, .09) 1px, transparent 1px);
  --dots-size: 26px 26px;
}

@media (min-width: 1600px) {
  :root { --content: min(1320px, 86%); }
}

/* ==========================================================================
   Bas
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv05' 1, 'ss01' 1;
}

body.nav-open { overflow: hidden; }

img, video { display: block; max-width: 100%; height: auto; }

/* Rubriker: vikt 400, tajt radavstånd, negativt teckenavstånd. Storleken
   bär hierarkin. */
h1, h2, h3, h4 { margin: 0; font-weight: 400; overflow-wrap: break-word; }
h1 { font-size: var(--fs-display); line-height: .98; letter-spacing: -0.028em; }
h2 { font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -0.022em; }
h3, .as-h3 { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.01em; }
/* .as-h3 sitter på h2 där rubriken hör hemma på nivå 2 i dokumentstrukturen
   men ska se ut som en h3. Märkspråket följer innehållet, storleken designen. */
h4 { font-size: var(--fs-h4); line-height: 1.3; font-weight: 500; }
p { margin: 0 0 var(--s-2); }
p:last-child { margin-bottom: 0; }
strong { font-weight: 500; }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--faint); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: var(--r-sm); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: var(--s-2) var(--s-3); border-radius: 0 0 var(--r-sm) 0;
  font-size: var(--fs-sm);
}
.skip-link:focus { left: 0; color: var(--paper); }

.wrap { width: var(--content); margin-inline: auto; }

.section { padding-block: var(--s-6); }
.section.pt-half { padding-top: var(--s-5); }
.section.pb-half { padding-bottom: var(--s-5); }
.section--alt { background: var(--paper-alt); }

/* Etikett: liten, dämpad, versaler med måttlig spärrning. */
.label {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}
.label--accent { color: var(--muted); }

/* OBS: ch-enheten mäter bredden på siffran "0", som i Inter är bredare än
   genomsnittstecknet. 58ch gav uppmätt 614px = ~72 faktiska tecken, alltså
   precis i överkant av det bekväma spannet 45–75. 52ch ger ~65 tecken. */
.lede { font-size: var(--fs-lead); line-height: 1.45; color: var(--muted); max-width: 52ch; }
.measure { max-width: 66ch; }   /* ~78 tecken → var 72ch = ~85, för brett */
.nowrap { white-space: nowrap; }
.muted { color: var(--muted); }

/* Datatillägg i etikettrader. Var en inramad chip — den grå lådan var det
   första ägaren pekade ut på mobilen. Nu ren text i samma versalsättning
   som etiketten, skild med luft i stället för ram. */
.chip-data {
  display: inline-block;
  margin-left: var(--s-1);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  color: var(--muted);
}

/* ==========================================================================
   Knappar — 3 px radie, vikt 500, gemener. Ingen versalspärrning.
   Accentfärgen finns bara här.
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1);
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease);
}

.btn--primary { background: var(--accent); color: var(--ink); }
.btn--primary:hover { background: var(--accent-hover); color: var(--ink); }

.btn--ghost { background: var(--paper); color: var(--ink); border-color: var(--border-strong); }
.btn--ghost:hover { border-color: var(--ink); }

.btn--dark { background: var(--ink); color: var(--paper); }
.btn--dark:hover { background: var(--dark-alt); color: var(--paper); }

.btn--ghost-light { background: transparent; color: var(--dark-text); border-color: var(--dark-border); }
.btn--ghost-light:hover { border-color: var(--dark-text); color: var(--dark-text); }

/* min-height i stället för mer padding: knappen behåller sin visuella täthet
   men träffytan når 44px. "Börja nu" i menyn är sajtens viktigaste knapp. */
.btn--sm { padding: 9px 16px; font-size: var(--fs-xs); min-height: 44px; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: center; }

/* ==========================================================================
   Navigering — vit, hårfin linje, inget toppband. Lugnet börjar här.
   ========================================================================== */

.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav__bar {
  display: flex; align-items: center; gap: var(--s-4);
  width: var(--content); margin-inline: auto;
  height: var(--nav-h);
}
.nav__brand {
  font-size: 1.1875rem; font-weight: 500; letter-spacing: -0.03em;
  color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px;
}
.nav__brand::before {
  content: ''; width: 14px; height: 14px; flex: none;
  background: var(--accent);
  border: 1px solid rgba(12, 10, 8, .18);
  border-radius: 2px;
}

.nav__links {
  display: flex; align-items: center; gap: var(--s-3);
  list-style: none; margin: 0 0 0 auto; padding: 0;
}
.nav__links a {
  color: var(--muted); text-decoration: none;
  font-size: var(--fs-sm);
  transition: color var(--dur-1) var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a[aria-current="page"] { color: var(--ink); }
.nav__links .btn { color: var(--ink); }
/* Sekundärlänkar (Logga in, Verifiera) finns bara i mobilmenyn. */
.nav__extra { display: none; }
@media (max-width: 860px) {
  .js .nav__extra { display: block; }
}

/* Språkväxlare — synlig i navigationen, alla sju språken listade.
   Oöversatta språk visas med "kommer snart" i stället för att döljas
   (ägarens brief 2026-08-04): ärlighet före putsad yta. */
.lang { position: relative; flex: none; }
.lang summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: .06em;
  color: var(--muted);
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary::after {
  content: ''; width: 7px; height: 7px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg) translateY(-2px);
}
.lang[open] summary { border-color: var(--border-strong); color: var(--ink); }
.lang__list {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 120;
  min-width: 220px;
  margin: 0; padding: var(--s-1); list-style: none;
  background: var(--paper);
  border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
}
.lang__list li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.lang__list a, .lang__list span {
  display: block; padding: 9px 10px;
  font-size: var(--fs-sm); color: var(--ink); text-decoration: none;
  border-radius: var(--r-sm);
}
.lang__list a:hover { background: var(--paper-alt); }
.lang__list a[aria-current="true"] { font-weight: 500; }
.lang__list li > span { color: var(--faint); }
.lang__soon {
  flex: none; padding-right: 10px;
  font-size: var(--fs-xs); font-style: normal; color: var(--faint);
  letter-spacing: .04em;
}

.nav__toggle {
  display: none;
  width: 40px; height: 40px; margin-left: auto;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border); border-radius: var(--r-sm);
  cursor: pointer;
}
.nav__toggle span { display: block; width: 16px; height: 1.5px; background: var(--ink); position: relative; }
.nav__toggle span::before, .nav__toggle span::after {
  content: ''; position: absolute; left: 0; width: 16px; height: 1.5px; background: var(--ink);
  transition: transform var(--dur-2) var(--ease);
}
.nav__toggle span::before { top: -5px; }
.nav__toggle span::after { top: 5px; }
body.nav-open .nav__toggle span { background: transparent; }
body.nav-open .nav__toggle span::before { transform: translateY(5px) rotate(45deg); }
body.nav-open .nav__toggle span::after { transform: translateY(-5px) rotate(-45deg); }

/* ==========================================================================
   Hero — ljus, prickraster, jätterubrik i vikt 400
   ========================================================================== */

.hero {
  position: relative;
  padding-block: clamp(var(--s-5), 9vw, 140px) var(--s-5);
  background-color: var(--paper);
  background-image: var(--dots);
  background-size: var(--dots-size);
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, var(--paper) 100%);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; width: var(--content); margin-inline: auto; }
.hero h1 { max-width: 16ch; }
.hero .lede { margin-top: var(--s-3); }
.hero .btn-row { margin-top: var(--s-4); }
.hero__note { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--faint); }

/* Produktpanel under hero — den stora ljusgrå ytan */
.showcase {
  margin-top: var(--s-5);
  background: var(--paper-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(var(--s-3), 4vw, var(--s-5));
  background-image: var(--dots);
  background-size: var(--dots-size);
}
.showcase__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); align-items: stretch; }

.card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3);
  box-shadow: var(--shadow-1);
}
.card__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  padding-bottom: var(--s-2); margin-bottom: var(--s-2);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--faint);
  letter-spacing: .06em; text-transform: uppercase;
}

/* Kursframsteg */
.progress { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.progress li { display: grid; grid-template-columns: 18px 1fr auto; gap: var(--s-2); align-items: center; font-size: var(--fs-sm); }
.progress .tick {
  width: 18px; height: 18px; border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  display: grid; place-content: center;
}
.progress .done { background: var(--accent); border-color: transparent; }
.progress .done::after {
  content: ''; width: 8px; height: 4px;
  border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  transform: rotate(-45deg) translate(1px, -1px);
}
.progress .state { font-size: var(--fs-xs); color: var(--faint); }

/* Bevis-miniatyr */
.cert {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 6px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: var(--s-4) var(--s-3);
  background:
    linear-gradient(180deg, var(--paper) 0%, var(--paper-alt) 100%);
}
.cert__label { font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.cert__name { font-size: 1.35rem; letter-spacing: -0.02em; }
.cert__course { font-size: var(--fs-sm); color: var(--muted); max-width: 24ch; }
.cert__code {
  margin-top: var(--s-2); padding-top: var(--s-2);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Faktarad — hårfina avdelare, Lithic-band
   ========================================================================== */

.facts-strip { border-block: 1px solid var(--border); }
.facts-strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
/* Lodrät padding och siffergrad kläms i stället för att stå fast. Vid 28px
   behövde "Bevis samma dag" 239px men fick 182px mellan 1025 och 1200px, och
   min-width:0 hindrar rutnätsobjektet från att tvinga ut sitt spår. */
.facts-strip__item { padding: clamp(var(--s-3), 3vw, var(--s-4)) var(--s-3); border-left: 1px solid var(--border); min-width: 0; }
.facts-strip__item:first-child { border-left: 0; padding-left: 0; }
.facts-strip__item strong { display: block; text-wrap: balance; font-size: clamp(1.25rem, 1.6vw, 1.75rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1.1; }
.facts-strip__item span { display: block; margin-top: 6px; font-size: var(--fs-sm); color: var(--muted); }

/* ==========================================================================
   Sektionshuvud
   ========================================================================== */

.head { max-width: 60ch; margin-bottom: var(--s-4); }
.head h2 + .lede { margin-top: var(--s-2); }

/* ==========================================================================
   Kurskort
   ========================================================================== */

.courses { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s-2); }

.course {
  display: flex; flex-direction: column; gap: var(--s-2);
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--paper);
  padding: var(--s-3);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.course:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.course__body { display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.course__meta { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.course__meta li {
  font-size: var(--fs-xs); color: var(--muted);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 4px 10px;
}
/* Priset staplas, det ligger INTE bredvid sin notis.
   Uppmätt fel: som flexbox med align-items:baseline krympte <strong> till
   74–83px medan "1 095 kr" vid 26px behöver 97px — siffran bröts på två rader
   redan vid 1280px viewport. Ett pris som radbryts mitt i talet är oläsligt.
   Som block får siffran hela kortets bredd och kan aldrig krympas av sitt
   syskon. Samma mönster som ramp.com/pricing, där prisradens alla delar
   ligger på en gemensam vänsterkant. */
.course__price { margin-top: auto; padding-top: var(--s-2); border-top: 1px solid var(--border); }
.course__price strong { display: block; font-size: 1.6rem; font-weight: 400; letter-spacing: -0.03em; line-height: 1.15; white-space: nowrap; }
.course__price span { display: block; margin-top: 2px; color: var(--faint); font-size: var(--fs-sm); line-height: 1.4; }
.course--soon { background: var(--paper-alt); }
.course .btn { align-self: start; }
.course--soon .course__body .btn { margin-top: auto; }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: 500;
  padding: 4px 10px; border-radius: var(--r-sm);
  width: fit-content;
}
/* Accent hör till knappar. Statuspunkten är en liten mörk prick + text. */
.tag--live { background: var(--paper-alt); color: var(--ink); border: 1px solid var(--border); }
.tag--live::before { content: ''; width: 7px; height: 7px; border-radius: 1px; background: var(--ink); }
.tag--soon { background: var(--paper-sunk); color: var(--muted); }

/* ==========================================================================
   Steg
   ========================================================================== */

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
.step { padding-top: var(--s-3); border-top: 1px solid var(--ink); }
.step__no { display: block; font-size: var(--fs-xs); color: var(--faint); margin-bottom: var(--s-2); font-variant-numeric: tabular-nums; }
.step h3, .step .as-h3 { font-size: 1.15rem; margin-bottom: 6px; }
.step p { color: var(--muted); font-size: var(--fs-sm); margin: 0; }

/* ==========================================================================
   Panel — infälld yta med nästan raka hörn. Ljus som standard,
   mörk (.panel--dark) för sajtens viktigaste löften, à la Lithic.
   ========================================================================== */

.panel {
  background: var(--paper-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(var(--s-4), 5vw, var(--s-5));
}
.panel__grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: var(--s-5); align-items: center; }
.panel p { color: var(--muted); }

.panel--dark {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--dark-text);
}
.panel--dark h2, .panel--dark h3 { color: var(--dark-text); }
.panel--dark p { color: var(--dark-muted); }
.panel--dark .label { color: var(--dark-muted); }
.panel--dark .muted { color: var(--dark-muted); }
.panel--dark .check li::before { border-color: var(--dark-text); }
.panel--dark .seal { background: transparent; border-color: var(--dark-border); color: var(--dark-text); }
.panel--dark .seal span { color: var(--dark-muted); }

/* Ackrediteringsmärke i sigillplattan: märket är orange/svart på vitt och
   kräver vit botten även i mörka paneler. Bilden får plattans hela bredd. */
.seal--marke { background: var(--paper); padding: var(--s-3); }
.panel--dark .seal--marke { background: var(--paper); border-color: transparent; }
.seal--marke img { display: block; width: 100%; height: auto; }

.check { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: 11px; }
.check li { position: relative; padding-left: 28px; font-size: var(--fs-sm); }
.check li::before {
  content: ''; position: absolute; left: 0; top: .42em;
  width: 13px; height: 6px;
  border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  transform: rotate(-45deg);
}

/* Sigillet var en cirkel — omgjort till en rak platta 2026-08-03 på ägarens
   beslut ("alla cirklar i webbsidan hatar jag"). Rektangeln följer radien i
   resten av systemet och slipper cirkelns hela geometriproblem: texten får
   plattans fulla bredd och kan aldrig klämmas av en inskriven kvadrat. */
.seal {
  display: grid; gap: 6px; align-content: center; text-align: center;
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  padding: var(--s-4) var(--s-3);
  background: var(--paper);
}
.seal strong { display: block; font-size: clamp(1.75rem, 3vw, 2.75rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; }
.seal span { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }

/* ==========================================================================
   Omfattning — sajtens signaturkomponent. Två spalter: vad utbildningen
   ger dig rätt att göra, och vad den INTE täcker. Det ingen konkurrent
   skriver ut, satt som ett dokument: lugnt, definitivt, svart på vitt.
   ========================================================================== */

.scope {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper);
}
.scope__col { padding: clamp(var(--s-3), 4vw, var(--s-4)); min-width: 0; }
.scope__col + .scope__col { border-left: 1px solid var(--border); }
.scope__col--no { background: var(--paper-alt); }
.scope__col > .label { margin-bottom: var(--s-3); }
.scope ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.scope li { position: relative; padding-left: 28px; font-size: var(--fs-sm); color: var(--ink); }
/* Ja-spalten: bock. Nej-spalten: kort streck. Båda i bläck — accentfärgen
   är reserverad för knappar. */
.scope__col--yes li::before {
  content: ''; position: absolute; left: 0; top: .42em;
  width: 13px; height: 6px;
  border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  transform: rotate(-45deg);
}
.scope__col--no li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 13px; height: 1.5px; background: var(--ink);
}
.scope__col--no li { color: var(--muted); }
/* Fotrad under spalterna: vad arbetsgivaren måste ordna vid sidan av. */
.scope__foot {
  grid-column: 1 / -1;
  padding: var(--s-3) clamp(var(--s-3), 4vw, var(--s-4));
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.scope__foot strong { color: var(--ink); }

/* ==========================================================================
   Målgruppsspår
   ========================================================================== */

.tracks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.track {
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: clamp(var(--s-3), 3vw, var(--s-4));
}
.track h3 { margin-bottom: var(--s-1); }
.track .btn { margin-top: var(--s-3); }

/* ==========================================================================
   Statement
   ========================================================================== */

.statement { text-align: center; }
.statement p {
  font-size: clamp(1.5rem, 2.9vw, 2.5rem);
  font-weight: 400; line-height: 1.12; letter-spacing: -0.02em;
  max-width: 26ch; margin-inline: auto;
}

/* ==========================================================================
   CTA-band — mörkt, infällt med luft runt om i stället för kant i kant.
   ========================================================================== */

.cta { padding-block: 0 var(--s-6); }
.cta__inner {
  background: var(--dark); color: var(--dark-text);
  border-radius: var(--r-lg);
  padding: clamp(var(--s-4), 5vw, var(--s-5));
  display: grid; grid-template-columns: 1.3fr .7fr; gap: var(--s-4); align-items: center;
}
/* Färgerna sitter på .cta__inner, inte .cta: kurssidornas #anmal-sektion
   använder panelen utan .cta-klassen på sektionen, och bläckfärgade
   .label/.muted/prisnotiser försvann annars mot den mörka bottnen. */
.cta__inner h2 { color: var(--dark-text); max-width: 18ch; }
.cta__inner p { color: var(--dark-muted); }
.cta__inner .label { color: var(--dark-muted); }
.cta__inner .muted { color: var(--dark-muted); }
.cta__inner .course__price { border-color: var(--dark-hairline); }
.cta__inner .course__price strong { color: var(--dark-text); }
.cta__inner .course__price span { color: var(--dark-muted); }
.cta__inner .btn--ghost { background: transparent; color: var(--dark-text); border-color: var(--dark-border); }
.cta__inner .btn--ghost:hover { border-color: var(--dark-text); }
.cta__note { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--dark-muted); }

/* ==========================================================================
   Sidhuvud för undersidor
   ========================================================================== */

.page-head {
  padding-block: clamp(var(--s-4), 6vw, var(--s-5)) var(--s-4);
  border-bottom: 1px solid var(--border);
  background-color: var(--paper);
  background-image: var(--dots);
  background-size: var(--dots-size);
}
.page-head h1 { font-size: var(--fs-h2); max-width: 20ch; }
.buybar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-3); }
.buybar__price {
  /* En vänsterkant, en rad per faktum — mönstret är taget från ramp.com/pricing,
     där priskortets alla rader ligger på samma vänsterkant (uppmätt: "Plus",
     "$15/mo/user", "+ Platform fee…", "Save 20%…" börjar alla på x=544).

     Det gamla blocket var flex med baseline-justering: <strong>1 395 kr</strong>
     bredvid en <span> som i sin tur innehöll ett <br> och resten av texten.
     Följden blev att andra raden hängde in under "exkl. moms" i stället för
     under siffran, och att tre orelaterade fakta — inkl.-beloppet, betalsätten
     och fakturavillkoret — trängdes på en 90 tecken lång rad separerad med "·". */
  margin: 0;
}
.price__sum {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 4px;
}
.price__sum strong {
  font-size: 1.75rem;      /* 28px, samma som Ramps prisrad */
  font-weight: 400;        /* Ramp håller HELA priskortet på 400 */
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.price__sum span { font-size: var(--fs-sm); color: var(--faint); }
/* Kvalificerarna: 13px, en per rad, samma vänsterkant som siffran. */
.price__note {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--faint);
}
.page-head .lede { margin-top: var(--s-3); }

/* ==========================================================================
   Löpande text
   ========================================================================== */

.prose h2 { margin-block: var(--s-4) var(--s-2); }
.prose h3 { margin-block: var(--s-3) var(--s-1); font-size: 1.2rem; }
.prose ul, .prose ol { padding-left: 1.15em; margin-block: 0 var(--s-2); }
.prose li { margin-bottom: 6px; }
.prose p, .prose li { color: var(--muted); }
.prose strong { color: var(--ink); }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: var(--s-3); font-size: var(--fs-sm); }
.prose th, .prose td { text-align: left; padding: 13px 12px 13px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.prose th { font-weight: 500; color: var(--ink); }
.prose td { color: var(--muted); }

/* Jämförelsetabeller på mobil: en klämd tvåspaltare är oläslig under 640px
   ("Antal platser i ordern" bröts på tre rader i en 100px-spalt). Raderna
   staplas i stället: första cellen blir radens etikett, resten lägger sig
   under. Kolumnrubrikerna döljs — i trekolumnstabellerna bär varje cell i
   stället sin rubrik via data-th, satt i märkspråket. */
@media (max-width: 640px) {
  .prose table, .prose tbody, .prose tr, .prose th, .prose td { display: block; }
  .prose thead { display: none; }
  .prose tr { padding-block: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border); }
  .prose th, .prose td { padding: 0; border-bottom: 0; }
  .prose tr > :first-child {
    font-size: var(--fs-xs); font-weight: 500;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink); margin-bottom: 6px;
  }
  .prose tr > :first-child strong { font-weight: 500; }
  .prose td + td { margin-top: 8px; }
  .prose td[data-th]::before {
    content: attr(data-th);
    display: block;
    font-size: var(--fs-xs); font-weight: 500;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 2px;
  }
  /* Etikettcellen behöver ingen egen data-th-rad. */
  .prose tr > td[data-th]:first-child::before { content: none; }
}

/* Fyra spår: Omfattning, Format, Giltighet, Språk. Rastret måste rymma
   alla fyra på en rad — med tre kolumner hamnade den fjärde rutan ensam
   på en egen rad och tog full radhöjd. */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); margin-block: var(--s-4); }
/* Ligger faktaraden först i sin sektion har den redan sektionens luft ovanför
   sig. Egen toppmarginal ovanpå det gav 200 px tomt band under köprutan. */
.facts:first-child { margin-top: 0; }
.fact { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-3); }
.fact strong { font-size: 1.05rem; font-weight: 500; }

.chapters { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); max-width: 62rem; }
.chapters li {
  display: grid; grid-template-columns: 56px 1fr; gap: var(--s-2);
  padding-block: var(--s-3); border-bottom: 1px solid var(--border);
}
.chapters .no { color: var(--faint); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.chapters h3 { font-size: 1.1rem; margin-bottom: 4px; }
.chapters p { color: var(--muted); font-size: var(--fs-sm); margin: 0; }

/* Dragspel */
.acc { border-top: 1px solid var(--border); }
.acc__item { border-bottom: 1px solid var(--border); }
.acc__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  padding: var(--s-3) 0; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 1.0625rem; color: var(--ink); text-align: left;
}
.acc__icon { position: relative; width: 13px; height: 13px; flex: none; }
.acc__icon::before, .acc__icon::after {
  content: ''; position: absolute; background: var(--ink);
  transition: transform var(--dur-2) var(--ease);
}
.acc__icon::before { top: 6px; left: 0; width: 13px; height: 1.5px; }
.acc__icon::after { left: 6px; top: 0; width: 1.5px; height: 13px; }
.acc__btn[aria-expanded="true"] .acc__icon::after { transform: rotate(90deg); }
.acc__panel { overflow: hidden; max-height: 0; transition: max-height var(--dur-2) var(--ease); }
.acc__panel > div { padding-bottom: var(--s-3); color: var(--muted); max-width: 72ch; font-size: var(--fs-sm); }

/* ==========================================================================
   Footer
   ========================================================================== */

.footer { background: var(--dark); color: var(--dark-text); padding-block: var(--s-5) var(--s-3); }
.footer__grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--s-4); }
/* Sidfotens rubriker är syskon till huvudinnehållet, alltså h2 i märkspråket.
   Storleken styrs av klassen så att den visuella hierarkin är oförändrad. */
.footer__heading { font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--dark-muted); margin-bottom: var(--s-2); font-weight: 400; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer a { color: var(--dark-text); text-decoration: none; font-size: var(--fs-sm); }
.footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer__brand { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.03em; margin-bottom: var(--s-1); display: inline-flex; align-items: center; gap: 7px; }
.footer__brand::before {
  content: ''; width: 14px; height: 14px; flex: none;
  background: var(--accent); border-radius: 2px;
}
.footer__legal {
  margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--dark-hairline);
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); align-items: center;
  color: var(--dark-muted); font-size: var(--fs-xs);
}
.footer__legal a { font-size: var(--fs-xs); color: var(--dark-muted); }

/* ==========================================================================
   Animation — diskret. Utgångsläget sätts bara när JS är på.
   ========================================================================== */

/* VARNING: sätt aldrig .reveal på hjältens H1 eller något annat
   LCP-kandidatelement. Google räknar inte element med opacity 0 som LCP —
   mätvärdet skulle då bli "när main.js kört" i stället för "när texten syns". */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}
.js .anim-list > * { opacity: 0; transform: translateY(12px); }
.js .anim-list.is-in > * {
  opacity: 1; transform: none;
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}

/* ==========================================================================
   Formulär
   ========================================================================== */

.form-layout { display: grid; grid-template-columns: 1.3fr .7fr; gap: var(--s-5); align-items: start; }
.form { display: grid; gap: var(--s-3); max-width: 42rem; }
.honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.chips { border: 0; margin: 0; padding: 0; }
.chips legend { padding: 0; margin-bottom: var(--s-1); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.chips__row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font: inherit; font-size: var(--fs-sm);
  padding: 8px 15px;
  background: var(--paper); color: var(--muted);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.chip:hover { border-color: var(--border-strong); color: var(--ink); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.field { display: grid; gap: 6px; }
.field label { font-size: var(--fs-sm); color: var(--muted); }
.field input, .field textarea {
  font: inherit; font-size: 16px;
  padding: 12px 14px;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--border-ui); border-radius: var(--r-sm);
  transition: border-color var(--dur-1) var(--ease);
}
.field input:focus, .field textarea:focus { border-color: var(--ink); }
.field textarea { resize: vertical; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #b42318; }

.form__note { font-size: var(--fs-sm); color: var(--faint); margin: 0; }
.form__submit { justify-self: start; }
/* Explicita färger i stället för opacity: opacity tunnar ut BÅDE text och
   botten och tar kontrasten från 15,64:1 till ~4,9:1. */
.form__submit[disabled] {
  opacity: 1;
  background: #e6f5a3;
  color: rgba(12, 10, 8, .8);
  cursor: progress;
}
.spinner { display: none; width: 13px; height: 13px; border: 1.5px solid rgba(12,10,8,.25); border-top-color: var(--ink); border-radius: 50%; }
.form__submit.is-loading .spinner { display: block; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.form__status { margin: 0; font-size: var(--fs-sm); min-height: 1.4em; }
.form__status.is-ok { color: var(--ink); }
.form__status.is-err { color: #b42318; }

.form-aside { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-3); background: var(--paper-alt); }
.form-aside h3, .form-aside .as-h3 { font-size: 1.05rem; font-weight: 500; margin-bottom: var(--s-2); }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); font-size: var(--fs-sm); }
.contact-list .label { display: block; margin: 0 0 2px; }

/* ==========================================================================
   Responsivt
   ========================================================================== */

@media (max-width: 1024px) {
  .facts-strip__grid { grid-template-columns: repeat(2, 1fr); }
  .facts-strip__item:nth-child(3) { border-left: 0; padding-left: 0; }
  .facts-strip__item:nth-child(n+3) { border-top: 1px solid var(--border); }
}

@media (max-width: 960px) {
  .panel__grid, .cta__inner, .tracks, .showcase__grid, .form-layout, .scope { grid-template-columns: 1fr; }
  .panel__grid { gap: var(--s-4); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .scope__col + .scope__col { border-left: 0; border-top: 1px solid var(--border); }
  /* 4 → 2, inte 4 → 1. Utan mellansteg blev fyra rutor en 500 px hög
     stapel så fort fönstret understeg 1024 px. */
  .facts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  /* backdrop-filter skapar ett containing block — måste av här, annars
     klipps den fixerade menyn till baren i stället för viewporten. */
  .nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--paper); }

  /* Mobilmenyn: mörk fullskärmspanel — sajtens Lithic-ögonblick. Numrerade
     poster i stor lugn grad, hårfina avdelare, accentknappen längst ned.
     Menyn ligger ÖVER navbaren (inset 0) — krysset är enda kontrollen och
     färgas därför vitt när menyn är öppen. */
  .js .nav__links {
    position: fixed; inset: 0;
    z-index: 100;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0;
    margin: 0; padding: calc(var(--nav-h) + var(--s-3)) 7% var(--s-4);
    background: var(--dark);
    transform: translateY(-100%);
    transition: transform var(--dur-2) var(--ease);
    overflow-y: auto;
    counter-reset: meny;
  }
  .js body.nav-open .nav__links { transform: translateY(0); }

  .js .nav__links li { border-bottom: 1px solid var(--dark-hairline); }
  .js .nav__links li:has(> .btn), .js .nav__links li.nav__extra { border-bottom: 0; }

  .js .nav__links a {
    min-height: 60px; display: flex; align-items: center; gap: var(--s-2);
    color: var(--dark-text);
    font-size: clamp(1.6rem, 6.5vw, 1.9rem); letter-spacing: -0.02em;
  }
  .js .nav__links a:not(.btn)::before {
    counter-increment: meny;
    content: counter(meny, decimal-leading-zero);
    font-size: var(--fs-xs);
    letter-spacing: .1em;
    color: var(--dark-muted);
    font-variant-numeric: tabular-nums;
    min-width: 2em;
  }
  .js .nav__links a[aria-current="page"]:not(.btn) { color: var(--dark-text); }
  .js .nav__links li:not(.nav__extra) a:not(.btn):not([aria-current="page"]) { color: var(--dark-muted); }
  .js .nav__links li:not(.nav__extra) a:not(.btn):hover { color: var(--dark-text); }

  /* Sekundärraden: mindre, utan nummer, efter en luftspalt.
     (first-of-type går på elementtyp, inte klass — träffa därför den
     första extraraden via syskonet före.) */
  .js .nav__links li:not(.nav__extra) + li.nav__extra { margin-top: var(--s-3); }
  .js .nav__links li.nav__extra a {
    min-height: 44px;
    font-size: var(--fs-sm); letter-spacing: 0;
    color: var(--dark-muted);
  }
  .js .nav__links li.nav__extra a::before { content: none; counter-increment: none; }
  .js .nav__links li.nav__extra a:hover { color: var(--dark-text); }

  /* Huvudknappen sist, i full bredd, skjuten mot botten. Färgen måste
     upprepas: menyregeln .js .nav__links a väger tyngre än .btn--primary. */
  .js .nav__links li:has(> .btn) { margin-top: auto; padding-top: var(--s-3); }
  .js .nav__links a.btn { width: 100%; font-size: var(--fs-sm); min-height: 52px; color: var(--ink); }

  /* Mjuk intoning av posterna när panelen glidit ner. */
  .js .nav__links li { opacity: 0; transform: translateY(8px); }
  .js body.nav-open .nav__links li {
    opacity: 1; transform: none;
    transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  }
  .js body.nav-open .nav__links li:nth-child(1) { transition-delay: .05s; }
  .js body.nav-open .nav__links li:nth-child(2) { transition-delay: .09s; }
  .js body.nav-open .nav__links li:nth-child(3) { transition-delay: .13s; }
  .js body.nav-open .nav__links li:nth-child(4) { transition-delay: .17s; }
  .js body.nav-open .nav__links li:nth-child(5) { transition-delay: .21s; }
  .js body.nav-open .nav__links li:nth-child(6) { transition-delay: .25s; }
  .js body.nav-open .nav__links li:nth-child(n+7) { transition-delay: .29s; }

  .nav__toggle { width: 44px; height: 44px; margin-left: 0; }
  /* Mobilraden: märke — växlare (skjuts höger) — hamburgare. Växlaren ska
     synas även när menyn är stängd; i öppet läge ligger den under panelen. */
  .lang { margin-left: auto; }
  .js .nav__toggle { display: flex; position: relative; z-index: 101; }
  /* Krysset står på mörk botten när menyn är öppen. */
  body.nav-open .nav__toggle { border-color: var(--dark-border); background: transparent; }
  body.nav-open .nav__toggle span::before,
  body.nav-open .nav__toggle span::after { background: var(--dark-text); }
}

@media (max-width: 640px) {
  .facts { grid-template-columns: 1fr; }
  :root { --s-6: 68px; --s-5: 48px; }
  /* "Ställningsutbildning" är 20 tecken — utan avstavning spräcker den skärmen.
     Men gränsen behövs: utan den bröt webbläsaren även korta ord mitt i en
     rubrik ("kra-vet"). Minst 10 tecken i ordet, minst 4 på varje sida. */
  h1 { font-size: clamp(2.05rem, 8.4vw, 2.7rem); hyphens: auto;
       hyphenate-limit-chars: 10 4 4;
       -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; }
  h2 { font-size: clamp(1.7rem, 6.4vw, 2.1rem); }
  .hero h1 { max-width: none; }
  .hero .btn-row .btn, .cta .btn-row .btn { width: 100%; }
  .hero .btn-row, .cta .btn-row { flex-direction: column; align-items: stretch; }
  .steps, .courses, .footer__grid, .facts-strip__grid { grid-template-columns: 1fr; }
  .facts-strip__item { border-left: 0; padding-inline: 0; border-top: 1px solid var(--border); }
  .facts-strip__item:first-child { border-top: 0; }
  .chapters li { grid-template-columns: 1fr; gap: 4px; }
  input, select, textarea { font-size: 16px; }

  /* Touchmål. Målgruppen står på en byggarbetsplats, ofta med handskar.
     18px höga sidfotslänkar är formellt tillåtna (inline-undantaget i
     WCAG 2.5.8) men praktiskt oanvändbara. Negativ marginal håller
     radavstånden visuellt oförändrade medan träffytan blir 44px. */
  .footer__grid a, .footer__legal a {
    display: inline-flex; align-items: center;
    min-height: 44px; margin-block: -12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .js .reveal, .js .anim-list > * { opacity: 1; transform: none; }
}

/* Tabeller scrollar i egen container i stället för att spränga sidbredden. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ==========================================================================
   Bevisverifiering — publik sida, ingen inloggning
   ========================================================================== */

.verify {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
}
.verify__form { display: grid; gap: var(--s-3); justify-items: start; }
.verify__form .field { width: 100%; max-width: 30rem; }
/* Koden är alfanumerisk och läses av från ett papper — gles och stor. */
/* Ingen text-transform här. Verifieringskoden är skiftlägeskänslig — Moodle
   bygger den ur A–Z a–z 0–9 och jämför rakt av mot databasen. Versalisering
   i visningen fick koden att se felskriven ut för den som läste av en kod med
   gemener, alltså i praktiken varje kod. */
.verify__form input {
  font-size: 1.25rem;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}
.verify__form input::placeholder {
  letter-spacing: .06em;
  color: var(--faint);
}
.field__hint {
  margin-top: var(--s-1);
  font-size: var(--fs-sm);
  color: var(--faint);
}
.verify__aside { padding-left: var(--s-4); border-left: 1px solid var(--border); }

@media (max-width: 860px) {
  .verify { grid-template-columns: 1fr; gap: var(--s-4); }
  .verify__aside { padding-left: 0; border-left: 0; padding-top: var(--s-3); border-top: 1px solid var(--border); }
  .verify__form .field { max-width: none; }
  .verify__form .btn { width: 100%; }
}

/* Interna länkar mellan kurssidorna — länkvärde och nästa steg för kunden. */
.related__list { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.related__list li { font-size: var(--fs-lead); }
.related__list a { text-underline-offset: 4px; }
.related__list .muted { font-size: var(--fs-sm); }

/* Sajten visar EXKLUSIVE moms som huvudsiffra (ägarens beslut 2026-08-01),
   eftersom de flesta kunder är företag. Inkl.-beloppet står bredvid på varje
   pris och är det som faktiskt dras i kassan.

   Öppen juridisk punkt: prisinformationslagen (2004:347) 2 § definierar
   "pris" som beloppet inbegripet moms, och 3 § gäller mot konsument. Se
   JURIST 6 i kopvillkor.html. */
.buybar__vat { font-size: var(--fs-xs); color: var(--faint); }

/* ==========================================================================
   Aktuellt — artiklar som svarar på frågan i första stycket
   ========================================================================== */

.postlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.postcard {
  padding-block: var(--s-4);
  border-top: 1px solid var(--border);
  max-width: 66ch;
}
.postcard:last-child { border-bottom: 1px solid var(--border); }
.postcard h2 { margin-bottom: var(--s-1); }
.postcard h2 a { text-decoration: none; }
.postcard h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Hela kortet är klickbart via rubriklänken — men bara rubriken tar fokus,
   så tangentbordsnavigeringen får ett enda mål per artikel. */
.postcard .muted { font-size: var(--fs-sm); }

.post__meta { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--faint); }

/* Svaret först. Läsaren ska inte behöva scrolla för att få veta. Markören är
   en tunn bläcklinje — accentfärgen hör till knapparna. */
.answer {
  padding: var(--s-3);
  background: var(--paper-alt);
  border-left: 2px solid var(--ink);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin-bottom: var(--s-4);
}
.answer .label { margin-bottom: 6px; }
.answer p:last-child { color: var(--ink); font-size: var(--fs-lead); line-height: 1.45; }

.post__close {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
  color: var(--ink);
}
.post__cta {
  margin-top: var(--s-5);
  padding: var(--s-4);
  background: var(--paper-alt);
  border-radius: var(--r-md);
  max-width: 66ch;
}

/* ==========================================================================
   Fungerar med — Ramps logovägg översatt till ordmärken. Vi har inga
   logotillgångar och ritar inga andras varumärken; välsatta ordmärken i
   chipform gör samma jobb: visa att kedjan hänger ihop med det kunden
   redan använder. Endast tokens, inga nya färgvärden.
   ========================================================================== */

.worksrow { padding-block: var(--s-3); border-bottom: 1px solid var(--border); }
.worksrow .wrap { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.worksrow .label { margin: 0; }
/* Ordmärken utan ramar — åtta inramade piller blev en plottrig vägg på
   mobil. Ramp-mönstret är en tyst rad av dämpade märken, inte chips. */
.worksrow__list { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); list-style: none; margin: 0; padding: 0; }
.worksrow__list li {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}

/* Företagssidans panelmock — behållare för inline-SVG:n. */
.dashmock { border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-2); overflow: hidden; background: var(--paper); }
.dashmock svg { display: block; width: 100%; height: auto; }

/* ==========================================================================
   Inline-SVG i innehållet
   Utan explicit bredd/höjd väljer flera webbläsare 300×150 i stället för
   viewBoxens proportion, så måtten sätts här. Inte som style-attribut:
   sajtens CSP är style-src 'self' utan 'unsafe-inline', och ett
   style-attribut hade blockerats när CSP:n slås på skarpt.
   ========================================================================== */

.figsvg { display: block; width: 100%; height: auto; }
.figur { margin: 0; }
.figur--ram { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-2); overflow: hidden; }
.figur figcaption { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--faint); }
/* Höga flödesscheman ska inte svälla på bred skärm. */
.figur--hog { max-width: 460px; }
/* Beviset är tätt av naturen — en A4-miniatyr. Utan golv krympte
   momentlistan till ~6,9px vid 320px skärm. Hellre att figuren rullar i
   sidled än att texten blir oläslig. */
.figur--bred { max-width: 620px; }
.figur--bred > svg { min-width: 22rem; }
.figur--bred { overflow-x: auto; }

/* ==========================================================================
   Siffersystem — storstat

   Hela poängen med formen: den kan inte klämmas, den kan bara stapla.
   Faktaraden och priskortet gick sönder därför att siffran delade rad med
   en text som fick krympa den. Här är siffran skyddad på tre oberoende sätt:

     1. Kolumnens MINIMUM är max-content (minmax(max-content, 1fr)) — spåret
        kan aldrig bli smalare än siffrans naturliga bredd.
     2. white-space: nowrap — siffran kan aldrig brytas inuti sig själv.
        "1 095 kr" har ett tusentalsmellanrum, och det är ingen brytpunkt.
     3. Under 860px finns ingen andra kolumn att konkurrera med.

   Etikettspalten är fast (30ch) i stället för innehållsstyrd. Det är därför
   ALLA etiketter börjar på samma x oavsett hur bred siffran är — hos rogo.ai
   ligger de på x=836 rad efter rad, och det är den lugnet som gör serien
   läsbar. Med en innehållsstyrd spalt fransar vänsterkanten (uppmätt: 556,
   572, 704, 499 — oanvändbart).
   ========================================================================== */

.bigstats {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.bigstat {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) minmax(0, 30ch);
  column-gap: var(--s-4);
  /* Baslinje, inte center: etiketten ska sitta på siffrans baslinje som i en
     sättning, inte sväva i mitten av en 88px hög rad. */
  align-items: baseline;
  padding-block: clamp(var(--s-4), 5vw, var(--s-5));
  border-bottom: 1px solid var(--border);
}

.bigstat__num {
  justify-self: start;
  font-size: var(--fs-stat);
  font-weight: 400;              /* rogo håller hela sektionen på 400 */
  line-height: .95;              /* siffror har inga underhäng — tätare än rubrik */
  letter-spacing: -0.04em;
  white-space: nowrap;
  /* Tabulära siffror så att raderna optiskt får samma vänsterkant. Sajten gör
     redan så i .cert__code, .step__no och .chapters .no. */
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.bigstat__label {
  display: block;
  font-size: var(--fs-lead);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.bigstat__note {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* Staplar i stället för att klämma. 860 och inte 640: vid 861px har
     sifferspalten 413px att röra sig på och den längsta siffran mäter
     297,5px — under det börjar marginalen ta slut. */
  .bigstat { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-2); }

/* ==========================================================================
   Bildplatshållare — .ph
   Fotografierna kommer senare. Rutan äger därför bildförhållandet redan nu:
   sidan har sin slutgiltiga höjd innan bilden finns, och bytet flyttar
   ingenting. Etiketten talar om vad rutan väntar på, så att en kund som ser
   sajten i dag förstår att det är en avsikt och inte ett fel.
   ========================================================================== */

.ph {
  /* Tre rader: 1fr sväljer överskottet, så etiketten hamnar alltid nere till
     vänster oavsett rutans höjd. Bilden läggs sedan i samma rutnät och spänner
     över alla tre raderna — därför behöver bytet inte röra layouten. */
  display: grid;
  grid-template-rows: 1fr auto auto;
  overflow: hidden;
  margin: 0;
  /* Uppmätt: en .ph--3x2 i full innehållsbredd blir 1152 x 768 px vid 1280 px
     fönster, och hjältebandet 1600 x 686 vid 1600 px. Bilden tar då över hela
     skärmen och trycker ner texten som ska sälja kursen. Höjden kapas därför,
     och cover beskär i stället — bildförhållandet i etiketten säger vad
     fotografen ska leverera, inte vad rutan visar. */
  max-height: 560px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  /* --paper-sunk och inte --paper-alt: platshållaren måste läsas som en urgröpt
     yta även när den ligger i en .section--alt, som redan är --paper-alt. */
  background-color: var(--paper-sunk);
  background-image: var(--dots);
  background-size: var(--dots-size);
}

/* Etiketten ligger i data-attributen i stället för i märkspråket. Skälet är
   bytet: står texten i HTML måste den plockas bort för hand vid varje bild, och
   den etikett som glöms kvar följer med till produktion. */
/* --muted, inte --faint: prickrastret mörknar bottnen och --faint ligger
   redan på 4,69:1 mot --paper-sunk. Se varningen vid --faint i :root. */
.ph::before,
.ph::after { grid-column: 1; }

.ph::before {
  grid-row: 2;
  /* Ren ASCII i strängen med flit. En extern stilmall utan @charset tolkas som
     UTF-8 av moderna webbläsare, men serveras den med fel Content-Type blir
     mittpunkten kråkfötter. Skiljetecknen ligger därför i HTML-attributen,
     där <meta charset> gäller. */
  content: 'Bild: ' attr(data-format);
  margin: 0 var(--s-3) var(--s-1);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.ph::after {
  grid-row: 3;
  content: attr(data-motiv);
  margin: 0 var(--s-3) var(--s-3);
  max-width: 44ch;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--muted);
}

/* Bilden spänner över hela rutnätet och målas över etiketten. z-index krävs:
   ::after målas annars efter elementets innehåll och skulle ligga överst.
   Egen bakgrund så att en genomskinlig PNG inte släpper igenom prickrastret. */
.ph > img,
.ph > picture,
.ph > video {
  grid-area: 1 / 1 / -1 / -1;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--paper-sunk);
}
.ph > picture > img { width: 100%; height: 100%; object-fit: cover; }

/* Vissa skärmläsare läser ändå upp genererat innehåll. När bilden väl finns ska
   etiketten vara borta ur trädet, inte bara övermålad. */
.ph:has(> img, > picture, > video)::before,
.ph:has(> img, > picture, > video)::after { content: none; }

/* Med ett foto i rutan är platshållarklädseln fel: kantlinjen blir en ram
   (och ramar är bannlysta i designsystemet), prickrastret skulle skina igenom
   en genomskinlig PNG. Genomskinlig kant i stället för none — geometrin står
   stilla när bilden kommer på plats. Gäller även hjältebandets över- och
   underkant. */
.ph:has(> img, > picture, > video) {
  border-color: transparent;
  background-image: none;
}

/* Bildförhållanden */
.ph--16x9 { aspect-ratio: 16 / 9; }
.ph--3x2  { aspect-ratio: 3 / 2; }
.ph--4x3  { aspect-ratio: 4 / 3; }
.ph--1x1  { aspect-ratio: 1 / 1; }

/* Uppmätt med riktiga foton: höjdtaket 560 px gör en fullbred figur till
   ca 2:1 — cover kapar då hjälmarna ur 3:2-fotona (montagebilden förlorar
   båda hjässorna, kvartsbilden nuddar hjälmen). I stället för att peta i
   object-position per bild får figuren den bredd där förhållandet ryms
   HELT under taket: 3:2 · 560 = 840, 4:3 · 560 = 747. Centrerad som ett
   redaktionellt block — hela motivet syns, på varje skärm, oavsett vilket
   foto som byts in i framtiden. Hjältebandet berörs inte (21:9 är beskuret
   med avsikt och är kontrollerat mot motivet). */
/* width, inte max-width: som barn i en grid- eller flexförälder skulle
   automarginaler + max-width krympa figuren till innehållets bredd — och en
   lazy-bild som inte laddats är 0 px bred. min() ger en bestämd bredd i alla
   kontexter. */
.ph--3x2,
.ph--4x3 { margin-inline: auto; }
.ph--3x2 { width: min(100%, 840px); }
.ph--4x3 { width: min(100%, 747px); }

/* Helbleed-band. Figuren ligger som direkt barn till <main>, utanför .wrap, och
   går därför kant i kant utan 100vw — som räknar in rullisten och ger vågrät
   scroll. Ingen ram och ingen radie: en kantlinje i skärmens ytterkant ser ut
   som ett misstag. 21:9 blir en 90 px hög strimma i mobil, därför trappas
   förhållandet ner på befintliga brytpunkter. Höjdtaket på .ph gäller även
   här: bandet slutar växa vid 1307 px fönsterbredd. */
.ph--hero {
  aspect-ratio: 21 / 9;
  min-height: 300px;
  border-inline: 0;
  border-radius: 0;
  /* Höjdtaket stoppar bandet vid 1307 px bredd (560 × 21/9). Utan centrering
     fastnar det då vid vänsterkanten och lämnar en vit remsa till höger på
     breda skärmar — uppmätt 133 px vid 1440. Under 1307 px är bandet
     kant i kant och marginalerna är noll ändå. */
  margin-inline: auto;
}

/* Smal spalt: två rader etikett tar över en ruta under ~260 px. Kortare luft,
   mindre text — motivet står kvar, formatet räcker som eyebrow. */
.ph--compact::before { margin: 0 var(--s-2) 6px; }
.ph--compact::after  { margin: 0 var(--s-2) var(--s-2); font-size: var(--fs-xs); }

/* Flera bilder i rad. Lägre minimibredd än .courses (320px) — en bild tål att
   bli smalare än ett kort med text i. */
.ph-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-2);
}

/* I löpande text behöver bilden samma luft ovanför sig som en h2 får. */
.prose .ph { margin-block: var(--s-4); }

@media (max-width: 960px) {
  .ph--hero { aspect-ratio: 16 / 9; }
}

@media (max-width: 640px) {
  .ph--hero { aspect-ratio: 3 / 2; min-height: 240px; }
}