/* /ny-startsida i Källans form (src/pages/ny-startsida.astro). Bara den sidan läser filen.
 * Bygger på ../system/kallan.css (rörs inte). Värden som inte finns i tokens.json
 * har prefixet --w- och listas i README.md. */

/* Gör guldmarkeringen animerbar (kallan.css använder --k-mark i calc). */
@property --k-mark { syntax: "<number>"; inherits: true; initial-value: 1; }

:root {
  /* Sidhuvudets höjd när Fig. 1 står fast (kompakt sidhuvud); riktning.ts läser samma värde. */
  --sh7-fast-topp: 61px;
  /* Raster */
  --w-max: 1360px;
  --w-sida: clamp(20px, 2.8vw, 40px);      /* sidmarginal = gutter [20, 40] */
  --w-gap: clamp(20px, 2.8vw, 40px);
  /* Typskala, linjär mellan 390 och 1440 px */
  --w-display: clamp(48px, calc(23.26px + 6.095vw), 112px);   /* token 44–112; min 48 för tre rader på mobil */
  --w-statement: clamp(44px, calc(26.17px + 4.571vw), 92px); /* § 06: två rader, ca 60 % av skärmhöjden */
  --w-rubrik: clamp(34px, calc(19.89px + 3.619vw), 72px);     /* opsz 72 / 380: ≥ 4:1 mot brödtext */
  --w-mellan: clamp(22px, calc(18.29px + .952vw), 32px);      /* enda serifmellanläget: liggare, steg, tjänster, citat */
  --w-ingress: clamp(19px, calc(17.51px + .381vw), 23px);
  --w-lopande: clamp(17px, calc(16.63px + .095vw), 18px);
  --w-etikett: clamp(12px, calc(11.63px + .095vw), 13px);
  --w-kalla: clamp(13px, calc(12.63px + .095vw), 14px);
  --w-siffra: clamp(56px, calc(33.7px + 5.714vw), 116px);
  --w-nr: clamp(30px, calc(24.4px + 1.43vw), 44px);           /* 01–06 i marginalen */
  /* Rytm */
  --w-avsnitt: clamp(88px, 10vw, 152px);
  --w-fokus: var(--k-teal);
  --w-har-ritad: 1;
}
:root { --k-fg2: #2c463c; }  /* mörkare än ink-dämpad: brödtext och källrader > 8:1 på papper */
.k-natt { --w-fokus: var(--k-guld-ljus); --k-etikett: var(--k-natt-text-dampad); --k-fg2: var(--k-natt-text-dampad); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--k-papper); color: var(--k-ink);
  font-family: var(--k-sans); font-size: var(--w-lopande); line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-kerning: normal;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.k-etikett { font-size: var(--w-etikett); line-height: 1.45; }
.k-kalla { font-size: var(--w-kalla); line-height: 1.5; }
.natt { background: var(--k-bg); color: var(--k-fg); }

.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--w-fokus); outline-offset: 3px; border-radius: 1px; }

.hoppa {
  position: absolute; left: var(--w-sida); top: 8px; z-index: 10;
  background: var(--k-teal); color: var(--k-papper); padding: 10px 14px; font-weight: 600; text-decoration: none;
  transform: translateY(-160%); transition: transform var(--k-dur) var(--k-ease-satt);
}
.hoppa:focus { transform: none; }

/* ---------- Raster ---------- */
.wrap { max-width: calc(var(--w-max) + 2 * var(--w-sida)); margin-inline: auto; padding-inline: var(--w-sida); }
.rad { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--w-gap); }
.marg { grid-column: 1 / span 2; }
.text-bred { grid-column: 3 / -1; }
.las { max-width: 62ch; }
.blk { display: block; }

/* Hårlinje: varje avsnitt börjar med en 1 px linje som ritas fram. */
.har { position: relative; padding-top: 24px; }
.har::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--k-rule);
  transform-origin: 0 50%; transform: scaleX(var(--w-har-ritad));
}

/* Nummer i marginalen (liggare, steg, tjänster): ett system, 01–06. */
.nr {
  font-family: var(--k-serif); font-variation-settings: "opsz" 72; font-weight: 340;
  font-size: var(--w-nr); line-height: .9; letter-spacing: -.02em;
  font-variant-numeric: lining-nums tabular-nums; color: var(--k-fg);
}

/* ---------- Länkar och knappar ---------- */
.lank {
  color: inherit; text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--w-understruken, var(--k-linje-stark)), var(--w-understruken, var(--k-linje-stark)));
  background-repeat: no-repeat; background-position: 0 100%, 0 100%;
  background-size: 0% 1px, 100% 1px;
  transition: background-size var(--k-dur-satt) var(--k-ease-satt);
  padding-bottom: 2px;
}
.lank:hover, .lank:focus-visible { background-size: 100% 1px, 100% 1px; }
.k-natt .lank { --w-understruken: rgba(255,255,255,.34); }
.lank-pil { font-weight: 600; }
.lank-pil::after { content: "\00a0→"; display: inline-block; transition: transform var(--k-dur) var(--k-ease-satt); }
.lank-pil:hover::after { transform: translateX(3px); }

.knapp {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 24px;
  background: var(--k-teal); color: var(--k-papper); border-radius: 2px;
  font-weight: 600; font-size: 16px; letter-spacing: .005em; text-decoration: none;
  transition: background-color var(--k-dur-snabb) linear;
}
.knapp:hover { background: var(--k-natt); }
.knapp--ljus { background: var(--k-papper); color: var(--k-ink); }
.knapp--ljus:hover { background: var(--k-papper-upphojd); }
.knapp-liten { min-height: 38px; padding: 0 14px; font-size: 15px; background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
/* Primärknapp i hjälten: större ink-yta i stället för guld (se README). */
.knapp--stor { min-height: 60px; padding: 0 32px; font-size: 17.5px; letter-spacing: .01em; }
.knapp-liten:hover { background: var(--k-ink); color: var(--k-papper); }

/* ---------- Header ---------- */
/* Headern följer med: kompakt, papper med hårlinje; byter ton över natt-sektioner. */
.topp { position: sticky; top: 0; z-index: 20; background: var(--k-papper); color: var(--k-ink); border-bottom: 1px solid var(--k-linje); transition: background-color var(--k-dur) linear, color var(--k-dur) linear, border-color var(--k-dur) linear; }
.topp-rad { transition: min-height var(--k-dur) var(--k-ease-satt); }
.topp.is-kompakt .topp-rad { min-height: 60px; }
/* Varv 6 slut2: den kompakta headern får inte flytta sidan. Utan kompensation flyttades allt innehåll 12 px uppåt
 * när man scrollade förbi 40 px (layoutskifte, och skarven i de sydda helsidorna klippte tjänsteingressen under hjälten). */
@media (min-width: 760px) {
  .topp { transition: background-color var(--k-dur) linear, color var(--k-dur) linear, border-color var(--k-dur) linear, margin-bottom var(--k-dur) var(--k-ease-satt); }
  .topp.is-kompakt { margin-bottom: 12px; }
}
.lockup { position: relative; display: block; }
.lockup-natt { position: absolute; inset: 0; opacity: 0; }
.topp--natt { background: var(--k-natt); color: var(--k-natt-text); border-bottom-color: var(--k-natt-linje); --w-fokus: var(--k-guld-ljus); }
.topp--natt .lockup-ljus { opacity: 0; }
.topp--natt .lockup-natt { opacity: 1; }
.topp--natt .nav-sep { border-left-color: var(--k-natt-linje); }
.topp--natt .nav-sprak, .topp--natt .meny-knapp { color: var(--k-natt-text-dampad); }
.topp--natt .nav-sprak .lank, .topp--natt .meny-knapp { color: var(--k-natt-text); }
.topp--natt .knapp-liten { color: var(--k-natt-text); box-shadow: inset 0 0 0 1px var(--k-natt-text); }
.topp--natt .knapp-liten:hover { background: var(--k-papper); color: var(--k-ink); }
.topp-cta { display: none; }
html { scroll-padding-top: 72px; }
.topp-rad { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 24px; }
.lockup img { width: 154px; height: auto; }
.nav ul { display: flex; align-items: center; gap: 28px; font-size: 15px; }
.nav .lank { background-size: 0% 1px, 0% 1px; }
.nav .lank:hover, .nav .lank:focus-visible, .nav .lank[aria-current] { background-size: 100% 1px, 0% 1px; }
.nav .lank[aria-current] { font-weight: 600; }
.nav-sep { padding-left: 28px; border-left: 1px solid var(--k-linje); }
.nav-sprak { color: var(--k-fg2); font-size: 14px; letter-spacing: .04em; }
.meny-knapp { display: none; font: 600 15px/1 var(--k-sans); color: inherit; background: none; border: 0; padding: 12px 0 12px 12px; cursor: pointer; }
.meny-knapp::after { content: ""; display: inline-block; width: 18px; height: 7px; margin-left: 10px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; vertical-align: 2px; }
.meny-knapp[aria-expanded="true"]::after { height: 0; border-bottom: 0; }
.nav li { white-space: nowrap; }
/* Surfplatta: hela menyn på en rad, tätare. */
@media (min-width: 760px) and (max-width: 1023px) {
  .lockup img { width: 132px; }
  .topp-rad { gap: 16px; }
  .nav ul { gap: 18px; font-size: 14px; }
  .nav-sep { padding-left: 18px; }
}

/* ---------- Hjälte ---------- */
.hjalte { padding-top: clamp(40px, 6.5vw, 96px); }
.hjalte-rad { row-gap: clamp(28px, 3.6vw, 52px); }
.hjalte-kicker { grid-row: 1; padding-top: .55em; max-width: 17em; }
.hjalte-rubrik { grid-column: 3 / -1; grid-row: 1; font-size: var(--w-display); text-wrap: balance; max-width: 11.5em; }
.hm-hel { white-space: nowrap; }
.hm-karna { background-image: none; }            /* på bred skärm bär hela frasen markeringen */
.hjalte-text { grid-column: 3 / span 6; grid-row: 2; }
.ingress { font-size: var(--w-ingress); line-height: 1.5; max-width: 34em; text-wrap: pretty; }
/* Tjänstelistan: hårlinjerad, två spalter, ingen punkt. */
.stod { margin-top: clamp(24px, 2.4vw, 36px); max-width: 40em; }
.handlingar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: clamp(28px, 2.6vw, 40px); }
.kallrad { margin-top: 20px; }
.hjalte-text .kallrad { padding-top: 14px; border-top: 1px solid var(--k-linje); max-width: 34em; margin-top: 28px; }

/* Fig. 1: tryckt utsnitt, ingen ram, inga rundade hörn. Multiply låter tidningspappret bli vårt papper. */

.publikationer-namn {
  grid-column: 3 / -1;
  font-family: var(--k-serif); font-variation-settings: "opsz" 36; font-weight: 400;
  font-size: clamp(21px, calc(18.4px + .667vw), 28px); line-height: 1.3; letter-spacing: -.01em;
}
/* Namnen som inline-block med luft emellan: inga avgränsare som kan hamna ensamma på en rad. */
.publikationer-namn { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 1em; row-gap: 0; }
.pn { white-space: nowrap; }

/* ---------- Avsnitt ---------- */
.avsnitt { padding-block: var(--w-avsnitt) 0; }
.avsnitt--forst { padding-top: clamp(72px, 8vw, 128px); }
.avsnitt.natt { padding-block: var(--w-avsnitt); margin-top: var(--w-avsnitt); }
.avsnitt-marg { display: flex; flex-direction: column; gap: 6px; }
.paragraf {
  font-family: var(--k-serif); font-variation-settings: "opsz" 24; font-size: 20px; line-height: 1;
  font-variant-numeric: lining-nums tabular-nums; color: var(--k-fg2, var(--k-ink-dampad));
  white-space: nowrap;
}
.avsnitt-rubrik {
  font-size: var(--w-rubrik); font-variation-settings: "opsz" 72; font-weight: 380; letter-spacing: -.02em; line-height: 1.02;
  text-wrap: balance; max-width: 17em; margin-bottom: clamp(24px, 2.6vw, 40px);
}
.natt-rubrik { font-weight: 340; }
.lopande { font-size: var(--w-lopande); line-height: 1.6; color: var(--k-fg2, var(--k-ink-dampad)); text-wrap: pretty; }
.lopande + .lopande { margin-top: 1em; }
.lopande--ink { color: var(--k-fg); }

/* Fig. 2 "Riktning" (../viz/) i sidans raster: Fig.-nummer överst och källan nederst i marginalen,
 * figuren och dess stegindikator i textkolumnen. Kärnan (kallan-viz.js/.css) är orörd; bara placering här. */
.kv-fig.s1-viz { position: relative; margin-top: clamp(48px, 5vw, 80px); padding-top: 24px; align-items: start; }
.s1-viz::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--k-rule); }
.s1-viz > .viz-marg { grid-column: 1 / span 2; grid-row: 1; }
.s1-viz > .kv-scen, .s1-viz > .kv-beskrivning, .s1-viz > .kv-fot { grid-column: 3 / -1; }
.s1-viz > .kv-scen { grid-row: 1; }
.s1-viz .kv-fot { margin-top: 8px; }
/* Statisk SVG (utan JS): liggande på bred skärm, stående på smal, som adapterns brytpunkt (600 px figurbredd). */
.kv-statisk { display: block; width: 100%; height: auto; }
/* Varv 6 slut2: valvets ben beskärs i webbens behållare (viz-kärnan orörd). Figuren slutar strax under "En bild av er".
 * Statisk SVG (utan JS): fast beskärning ur viewBox, liggande 1120×627 → 480 (texten står på y 440),
 * stående 390×554 → 371 (y 335). Med JS ritar riktning.ts hela figuren i alla lägen.
 * clip-path klipper bara nederkanten, så etiketter utanför viewBox i sidled och upptill syns som förut. */
.s1-viz .kv-scen { clip-path: inset(-200px -400px 0 -400px); }
.s1-viz .kv-scen > .kv-statisk-ligg { margin-bottom: -13.1%; }
.s1-viz .kv-scen > .kv-statisk-staende { margin-bottom: -46.9%; }
/* Reducerad rörelse (tre stillbilder i rad): guld bara i slutläget, så att en vy aldrig har två guldpunkter. */
.s1-viz .kv-tre .kv-panel:not(:last-child) .kv-punkt { fill: var(--kv-nod); }
.kv-statisk-staende { display: none; }
@media (max-width: 640px) { .kv-statisk-ligg { display: none; } .kv-statisk-staende { display: block; } }

/* ---------- § 03 natt / diagram ---------- */
.matt { font-size: var(--w-ingress); line-height: 1.45; color: var(--k-natt-text-dampad); max-width: 34em; margin-top: -8px; }
.diagram { margin-top: clamp(48px, 5vw, 80px); }
.diagram-fig { padding-top: .7em; }
.diagram-titel { display: block; font-size: var(--w-mellan); font-style: italic; color: var(--k-natt-text-dampad); margin-bottom: clamp(24px, 3vw, 40px); }
.staplar { width: 100%; border-collapse: collapse; }
.stapel-rad { border-top: 1px solid var(--k-natt-linje); }
.stapel-rad th, .stapel-rad td { padding: 18px 0 22px; vertical-align: top; text-align: left; }
.stapel-man { width: 128px; padding-top: 26px !important; font-weight: 600; }
.stapel-varde { display: block; font-size: var(--w-siffra); color: var(--k-natt-text-dampad); margin-bottom: 18px; }
.stapel-rad--nu .stapel-varde { color: var(--k-natt-text); }
.stapel-spar { display: block; height: 4px; position: relative; }   /* datastapel 4 px (runda 5: tunnare, exaktare) */
.stapel { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) / 15 * 100%); background: rgba(217,227,220,.34); transform-origin: 0 50%; }
.stapel-rad--nu .stapel { background: var(--k-guld); }
.skala { position: relative; height: 34px; margin-left: 128px; border-top: 1px solid var(--k-natt-linje); font-size: var(--w-kalla); color: var(--k-natt-text-dampad); font-variant-numeric: tabular-nums; }
.skala span { position: absolute; top: 0; left: calc(var(--t) / 15 * 100%); padding-top: 10px; transform: translateX(-50%); }
.skala span::before { content: ""; position: absolute; left: 50%; top: 0; height: 6px; width: 1px; background: var(--k-natt-linje); }
.skala span:first-child { transform: none; }
.skala span:first-child::before { left: 0; }
.skala span:last-child { transform: translateX(-100%); }
.skala span:last-child::before { left: auto; right: 0; }
.diagram-kalla { margin-top: 28px; max-width: 60ch; }

.citerad { margin-top: clamp(64px, 7vw, 112px); padding-top: 28px; position: relative; align-items: start; }
.citerad::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--k-natt-linje); }
.citerad-tal { grid-column: 3 / span 4; display: flex; flex-direction: column; gap: 6px; }
.citerad-tal .k-siffra { font-size: var(--w-siffra); }
.citerad-enhet { font-size: 15px; }
.citerad-text { grid-column: 7 / -1; padding-top: 10px; }
.citerad-text .k-citat { display: block; font-size: var(--w-mellan); max-width: 18em; text-wrap: balance; }

/* ---------- § 05 steg ---------- */
.steg { margin-top: 20px; }

/* ---------- § 06 statement: helbredd, utan marginalkolumn ---------- */
.statement { padding-block: clamp(72px, 7vw, 104px) clamp(56px, 5vw, 80px); }
.statement-har { padding-top: 28px; }
.statement-etikett { display: flex; align-items: baseline; gap: 14px; margin-bottom: clamp(28px, 3vw, 48px); }
.statement-rubrik {
  font-size: var(--w-statement); line-height: .98; letter-spacing: -.025em; text-wrap: balance;
}
.statement-rubrik em { font-weight: 360; }
.statement-fot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--w-gap); margin-top: clamp(32px, 3.5vw, 56px); padding-top: 24px; border-top: 1px solid var(--k-linje); align-items: end; }
.statement-ingress { grid-column: 1 / span 7; color: var(--k-ink); max-width: 36em; }
.statement-lank { grid-column: 9 / -1; justify-self: end; }

/* ---------- Uppdragsgivare ---------- */
.uppdrag { padding-top: clamp(56px, 6vw, 96px); }
.uppdrag-rad { position: relative; padding-block: 22px 26px; align-items: center; }
.uppdrag-rad::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--k-linje); }
.uppdrag-rad + .uppdrag-rad { align-items: baseline; }
.uppdrag-etikett { margin: 0; }
.loggor { grid-column: 3 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.logga { width: auto; }
/* Samma optiska storlek: höjden sätts per märke efter dess form. */
.logga--lkr { height: 46px; } .logga--naprapater { height: 58px; } .logga--northern { height: 27px; }
.logga--almi { height: 31px; } .logga--bl { height: 40px; }
.uppdrag-lank { grid-column: 3 / -1; margin-top: 18px; font-size: 15px; }

/* ---------- § 02 Genomslag i media (runda 6): ett redaktionellt uppslag, inte ett grid ----------
 * Hierarki som på en tidningssida: förstasidan stor (Fig.-nummer och källa i marginalen), sedan två klipp i olika
 * skala förskjutna i höjd och sist registret: arkivrader i 215 px (DI, TechCrunch, Forbes). Rubrikbeskärningar, 1 px linje,
 * inga rundade hörn, ingen skugga. Markeringen ligger exakt under originalrubriken (uppmätt i verktyg/bilder.py):
 * guld bara på förstasidan, bläck på övriga (en guld per vy), papper på TechCrunchs gröna yta. */
.media-ingress { margin-top: clamp(20px, 2vw, 28px); }
.klipp-etikett { position: relative; display: flex; justify-content: space-between; gap: 16px; padding-top: 10px; margin-bottom: 14px; }
.klipp-etikett::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--k-ink); transform-origin: 0 50%; }
.klipp-medium { color: var(--k-fg2); text-align: right; }
.klipp-bild { position: relative; display: block; overflow: hidden; }
.klipp-bild picture { display: block; }
.klipp-bild img { display: block; width: 100%; height: auto; border: 1px solid var(--k-linje); background: #fff; }
.klipp-mark { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: 4px; background-position: 0 100%; pointer-events: none; }
/* Sekundära klipp: dämpad linjefärg, inte bläck. En bläcklinje under varje rubrikrad läses som en hyperlänk (prövat). */
.klipp-mark--ink { background-image: linear-gradient(var(--k-linje-stark), var(--k-linje-stark)); }
.klipp-mark--ljus { background-image: linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.6)); }
.klipp-fot { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; max-width: 34em; }
.klipp-text { font-family: var(--k-serif); font-variation-settings: "opsz" 24; font-style: italic; font-size: 19px; line-height: 1.3; text-wrap: pretty; }
/* Heartspaces roll (ordagrant ur KALLOR.md): etikettstil efter källraden, så att den läses som vårt arbete och
 * inte som en del av publiceringens källa eller som ett orsaksanspråk. */
.klipp-roll { margin-top: 6px; }
/* Varv 6 slut2: större klipp (verktyg/klipp_v2.py). Förstasidan tar textkolumnens hela bredd, andra nivån staplas
 * förskjutet (Altinget åtta spalter, SvD till höger under), registret växer där originalet räcker (DI 215 px = 2x av 430). */
.media[data-klippvariant] .klipp--forsta .klipp-bild { grid-column: 3 / -1; }
.media[data-klippvariant] .klipp-par { row-gap: clamp(48px, 5vw, 80px); }
.media[data-klippvariant] .klipp--altinget { grid-column: 3 / span 8; grid-row: 1; }
.media[data-klippvariant] .klipp--svd { grid-column: 8 / -1; grid-row: 2; max-width: 543px; justify-self: end; width: 100%; margin-top: 0; }
.media[data-klippvariant] .klipp--reg { grid-template-columns: var(--reg-w, 215px) minmax(0, 1fr); }
.media[data-klippvariant] .klipp--techcrunch, .media[data-klippvariant] .klipp--forbes { --reg-w: 420px; }
/* Ram: papperston runt, en hårlinje, ingen skugga. Bilden sitter i en vit "tidningssida" med 1 px kant. */
.media[data-klippvariant] .klipp-bild img { border: 1px solid var(--k-linje-stark); }

.klipp--forsta { --n: 2; } .klipp--altinget { --n: 2; } .klipp--svd { --n: 2; } .klipp--forbes { --n: 1; } .klipp--techcrunch { --n: 3; } .klipp--di { --n: 2; }

/* Förstasidan: ett eget 12-kolumnsraster i figuren, så att etikett och källa hamnar i sidans marginal. */
.klipp-forsta { margin-top: clamp(48px, 5vw, 80px); }
.klipp--forsta { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--w-gap); }
.klipp--forsta .klipp-etikett { grid-column: 1 / span 2; grid-row: 1; flex-direction: column; justify-content: flex-start; gap: 4px; margin: 0; }
.klipp--forsta .klipp-medium { text-align: left; }
.klipp--forsta .klipp-bild { grid-column: 3 / span 9; grid-row: 1 / span 2; }
.klipp--forsta .klipp-fot { grid-column: 1 / span 2; grid-row: 2; align-self: end; margin: 0; }
.klipp--forsta .klipp-text { font-size: clamp(20px, calc(18.5px + .38vw), 24px); }

/* Andra nivån: olika skala, förskjutna i höjd (tidningsrytm, inte jämna rader). */
.klipp-par { align-items: start; }
.klipp-par--a { margin-top: clamp(72px, 8vw, 128px); }
.klipp--altinget { grid-column: 3 / span 6; }
.klipp--svd { grid-column: 9 / span 4; max-width: 421px; margin-top: clamp(48px, 6vw, 96px); }   /* 421 px = SvD-originalet i exakt 2x */

/* Registret: arkivrader, en per klipp, staplade som i ett index (inte en rad bredvid varandra, som läses som karusell).
 * Alla i 215 px: DI = originalets 430 px i 2x. TechCrunch och Forbes (Voiijer) står här eftersom de pekar bort
 * från målgruppen; de redovisas men lyfts inte. */
.klipp-register { margin-top: clamp(64px, 7vw, 112px); row-gap: clamp(28px, 3vw, 40px); }
.klipp--reg { grid-column: 3 / span 9; display: grid; grid-template-columns: 215px minmax(0, 1fr); column-gap: var(--w-gap); align-items: start; }
.klipp--reg .klipp-etikett { grid-column: 1 / -1; }
.klipp--reg .klipp-fot { margin-top: 0; }
.klipp--reg .klipp-text { font-size: 18px; }

/* ---------- § 04 citat: sidans andra topp. Valvet beskär porträtten. ---------- */
.valv { display: block; overflow: hidden; border-radius: 999px 999px 0 0; background: var(--k-dimma); }
.valv img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.valv--stor { width: min(100%, 160px); margin-bottom: 18px; }   /* 160 px = 320 px-originalet i 2x */
.valv--liten { width: 88px; flex: none; }
.citat-stort { margin-top: clamp(32px, 3.5vw, 56px); align-items: start; }
.citat-attr { display: flex; flex-direction: column; gap: 4px; }
.citat-namn { font-family: var(--k-serif); font-variation-settings: "opsz" 24; font-size: 20px; line-height: 1.25; }
.citat-titel { display: block; max-width: 16em; }
.citat-text-stor { grid-column: 3 / -1; margin: 0; }
.citat-text-stor p {
  font-family: var(--k-serif); font-variation-settings: "opsz" 48; font-style: italic; font-weight: 360;
  font-size: clamp(27px, calc(19.6px + 1.9vw), 47px); line-height: 1.2; letter-spacing: -.012em;
  max-width: 25em; text-wrap: pretty; text-indent: -.42em;
}
.citat-text-stor p::before { content: "”"; }
.citat-text-stor p::after { content: "”"; }
.citat-liggare { margin-top: clamp(56px, 6vw, 96px); }
.citat-litet { display: flex; gap: 22px; align-items: flex-start; position: relative; padding-top: 24px; margin: 0; }
.citat-litet::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--k-rule); }
.citat-liggare .citat-litet:nth-of-type(1) { grid-column: 3 / span 5; }
.citat-liggare .citat-litet:nth-of-type(2) { grid-column: 8 / -1; }
.citat-litet blockquote { margin: 0 0 14px; }
.citat-litet blockquote p { font-family: var(--k-serif); font-variation-settings: "opsz" 36; font-style: italic; font-size: var(--w-mellan); line-height: 1.25; text-wrap: pretty; }
.citat-litet blockquote p::before, .citat-litet blockquote p::after { content: "”"; }
/* Engelska citattecken på /en: “ … ”. */
:lang(en) .citat-text-stor p::before, :lang(en) .citat-litet blockquote p::before { content: "“"; }
.citat-litet figcaption { display: flex; flex-direction: column; gap: 2px; }
.citat-litet .citat-namn { font-size: 18px; }

/* ---------- § 07 FAQ ---------- */
.fragor { grid-column: 3 / span 9; }
.fraga { border-top: 1px solid var(--k-linje); }
.fraga:last-child { border-bottom: 1px solid var(--k-linje); }
.fraga summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 20px 0; }
.fraga summary::-webkit-details-marker { display: none; }
.fraga-text { font-family: var(--k-serif); font-variation-settings: "opsz" 36; font-size: var(--w-mellan); line-height: 1.2; letter-spacing: -.01em; }
.fraga summary::after {
  content: ""; flex: none; width: 16px; height: 16px; margin-top: 4px;
  background: linear-gradient(currentColor, currentColor) center / 16px 1px no-repeat, linear-gradient(currentColor, currentColor) center / 1px 16px no-repeat;
  transition: background-size var(--k-dur) var(--k-ease-satt);
}
.fraga[open] summary::after { background-size: 16px 1px, 1px 0; }
.fraga summary:hover .fraga-text { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.fraga .lopande { max-width: 62ch; padding: 0 40px 26px 0; }

/* ---------- § 08 avslut + sidfot ---------- */
.avslut { padding-block: var(--w-avsnitt) clamp(72px, 8vw, 128px); }
.avslut-rubrik { font-size: clamp(40px, calc(23.3px + 4.29vw), 85px); text-wrap: balance; max-width: 12em; margin-bottom: clamp(40px, 4.5vw, 72px); }
.vagar { grid-column: 3 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--w-gap); }
.vag { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 18px; border-top: 1px solid var(--k-natt-linje); }
.vag .nr { font-size: 28px; color: var(--k-natt-text-dampad); }
.vag .lank-pil { font-size: 17px; line-height: 1.45; }
.fot { padding-bottom: 40px; }
.fot-rad { padding-top: 36px; row-gap: 32px; position: relative; }
.fot-rad::before { content: ""; position: absolute; left: var(--w-sida); right: var(--w-sida); top: 0; height: 1px; background: var(--k-natt-linje); }
.fot-marg img { width: 132px; }
.fot-text { grid-column: 3 / span 7; display: flex; flex-direction: column; gap: 10px; }
.fot-om { color: var(--k-natt-text); font-family: var(--k-serif); font-variation-settings: "opsz" 24; font-size: 20px; line-height: 1.35; max-width: 26em; }
.fot-kontakt { font-style: normal; display: flex; flex-wrap: wrap; gap: 6px 28px; color: var(--k-natt-text-dampad); font-size: 15px; }
.fot-botten { grid-column: 3 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; padding-top: 20px; border-top: 1px solid var(--k-natt-linje); }
.fot-lankar { display: flex; gap: 22px; flex-wrap: wrap; }
.fot .k-kalla { color: var(--k-natt-text-dampad); }
/* Sajtens länkar (samma grupper som sidfoten på undersidorna). */
.fot-grupper { grid-column: 3 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 28px 32px; }
.fot-grupp .k-etikett { color: var(--k-natt-text-dampad); margin-bottom: 12px; }
.fot-grupp ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--k-natt-text); font-size: 15px; line-height: 1.4; }

/* ---------- Rörelse (varv 8) ----------
 * Rörelsen följer scrollen: sajtmotorns scrollmotor (scripts/kallan/rorelse.ts) räknar ett framsteg 0–1 per del ur
 * delens läge i fönstret och skriver det som stil. Inga övergångar i tid, inga utlösare. Står läsaren still mitt i
 * glider delen färdigt åt det håll läsaren scrollade. CSS döljer aldrig något själv: utan JS, med minskad rörelse
 * och innan skriptet har läst av sidan står allt i slutläget. */
/* Hjältens rubrik spelas in en gång när sidan laddas, i CSS: orden är delade redan i bygget (Ord.astro), så rubriken
   ritas i startläget från första bildrutan och blinkar aldrig. Guldmarkeringen dras när orden står. Samma villkor som
   all rörelse på sidan (grund.ts): utan JS och med minskad rörelse står rubriken still. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .hjalte-rubrik .o { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .06em .16em; margin: 0 -.06em -.16em; }
  .hjalte-rubrik .oi { display: inline-block; animation: k-ord-upp var(--k-dur-satt) var(--k-ease-satt) calc(150ms + var(--i, 0) * 45ms) both; }
  .hjalte-rubrik .k-mark { animation: k-mark-in var(--k-dur-markera) var(--k-ease-markera) 750ms both; }
}
@keyframes k-ord-upp { from { transform: translateY(108%); } }
@keyframes k-mark-in { from { --k-mark: 0; } to { --k-mark: 1; } }

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-satt].is-delad .o { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .06em .16em; margin: 0 -.06em -.16em; }
  [data-satt].is-delad .oi { display: inline-block; will-change: transform; }
  [data-rull], [data-rull] *, [data-rull]::before, [data-rull] *::before { transition: none !important; }
  [data-klipp][data-rull] .klipp-etikett::before { transform: scaleX(var(--kp-e, 1)); }
  [data-rull] .kp-gantt-spar::before { transform: scaleX(var(--kp-g, 1)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- ≤ 1300 px: hjältens etiketter går ovanför (marginalen blir för smal för kickern) ---------- */
@media (max-width: 1300px) {
  .hjalte-kicker { grid-column: 1 / -1; }
  .hjalte-kicker { grid-row: 1; padding-top: 0; margin-bottom: -8px; max-width: 30em; }
  .hjalte-rubrik { grid-column: 1 / -1; grid-row: 2; }
  .hjalte-text { grid-column: 1 / span 7; grid-row: 3; }
  }

/* ---------- ≤ 1100 px: marginalkolumnen blir etikettrad ovanför ---------- */
@media (max-width: 1100px) {
  .marg { grid-column: 1 / -1; margin-bottom: 16px; }
  .text-bred { grid-column: 1 / -1; }
  .avsnitt-marg { flex-direction: row; align-items: baseline; gap: 12px; }


            
  .diagram-yta { grid-column: 1 / -1; }
  .stapel-man, .skala { --w-man: 104px; }
  .stapel-man { width: 104px; }
  .skala { margin-left: 104px; }
  .citerad-tal { grid-column: 1 / span 5; }
  .citerad-text { grid-column: 6 / -1; }

      /* 901–1100: nummer | titel | exempel */
      

  .loggor, .uppdrag-lank, .publikationer-namn { grid-column: 1 / -1; }
  .uppdrag-etikett { margin-bottom: 14px; }
  .klipp--forsta .klipp-etikett { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; margin-bottom: 14px; }
  .klipp--forsta .klipp-medium { text-align: right; }
  .klipp--forsta .klipp-bild { grid-column: 1 / -1; grid-row: 2; }
  .klipp--forsta .klipp-fot { grid-column: 1 / -1; grid-row: 3; margin-top: 14px; }
  .klipp--altinget { grid-column: 1 / span 7; }
  .klipp--svd { grid-column: 8 / -1; }
  .klipp--reg { grid-column: 1 / -1; }
  .s1-viz > .viz-marg { grid-column: 1 / -1; }
  .s1-viz > .kv-scen, .s1-viz > .kv-beskrivning, .s1-viz > .kv-fot { grid-column: 1 / -1; }
  .s1-viz > .kv-scen { grid-row: auto; }
  .s1-viz > .kv-fot { order: 1; }
    .citat-stort .marg { display: grid; grid-template-columns: 120px 1fr; column-gap: 20px; align-items: end; margin-bottom: 28px; }
  .valv--stor { width: 120px; margin-bottom: 0; grid-row: 1 / span 3; }
  .citat-text-stor { grid-column: 1 / -1; }
  .citat-liggare .marg { display: none; }
  .citat-liggare .citat-litet:nth-of-type(1) { grid-column: 1 / span 6; }
  .citat-liggare .citat-litet:nth-of-type(2) { grid-column: 7 / -1; }
  .fragor, .vagar { grid-column: 1 / -1; }
  .vagar-rad .marg, .faq .rad > .marg[aria-hidden] { display: none; }
  .fot-marg { margin-bottom: 0; }
  .fot-text { grid-column: 1 / -1; }
  .fot-botten { grid-column: 1 / -1; }
  .fot-grupper { grid-column: 1 / -1; }
}

/* ---------- ≤ 900 px: § 05 och tjänster staplas ---------- */
@media (max-width: 900px) {
          .hjalte-text { grid-column: 1 / -1; }
    .citat-liggare { row-gap: 40px; }
  .citat-liggare .citat-litet:nth-of-type(n) { grid-column: 1 / -1; }
  .vagar { grid-template-columns: 1fr; row-gap: 0; }
  .vag { flex-direction: row; align-items: center; padding-block: 16px; }
}

/* ---------- Mobil ---------- */
@media (max-width: 759px) {
  .rad { grid-template-columns: minmax(0, 1fr); }
  .rad > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .marg { margin-bottom: 14px; }
  .paragraf { font-size: 17px; }

  .topp-rad { min-height: 60px; flex-wrap: wrap; }
  .lockup img { width: 128px; }
  .topp-cta { display: inline-flex; margin-left: auto; min-height: 36px; padding: 0 12px; font-size: 14px; }
  .topp-rad { gap: 0; }
  html { scroll-padding-top: 72px; }   /* luft under den klistrade headern (61 px) vid ankare, t.ex. Fig. 2 → #fig-3a, #fig-4 */
  .knapp--stor { min-height: 56px; padding: 0 26px; font-size: 17px; }
  .statement-fot { grid-template-columns: 1fr; row-gap: 20px; }
  .statement-ingress, .statement-lank { grid-column: 1 / -1; justify-self: start; }
  .nav { flex-basis: 100%; }
  .nav ul { flex-wrap: wrap; gap: 10px 20px; padding-bottom: 14px; }
  .nav-sep { padding-left: 0; border-left: 0; }
  /* Med skript är menyn en utfällbar lista bakom Meny-knappen redan från första bildrutan, så att sidhuvudet inte
     krymper när skriptet laddas (layoutskift). Utan skript står menyn öppen. Sidfoten har sajtens sidor om
     skriptet ändå inte skulle laddas. */
  @media (scripting: enabled) {
    .meny-knapp { display: inline-block; margin-left: 14px; }
    .nav { display: none; padding-bottom: 8px; }
    .nav.is-oppen { display: block; }
    .nav ul { flex-direction: column; align-items: flex-start; gap: 0; font-size: 19px; padding: 4px 0 16px; }
    .nav li { width: 100%; padding: 12px 0; border-top: 1px solid var(--k-linje); }
    .nav li:last-child { border-top: 0; padding-top: 16px; }
  }

  .hjalte { padding-top: 32px; }
  .hjalte-rad { row-gap: 0; }
  .hjalte-kicker { margin-bottom: 18px; max-width: 24em; }
  .hjalte-rubrik { margin-bottom: 22px; }
  /* Mobil: bara "mycket" markeras, så att guldet aldrig bryts över två rader. */
  .hm-hel { white-space: normal; background-image: none; }
  .hm-karna { background-image: linear-gradient(var(--k-guld), var(--k-guld)); }
  .handlingar { gap: 18px 24px; }
    .blk { display: inline; }

          
  .stapel-man { width: 84px; }
  .skala { margin-left: 84px; }
  .citerad-text { padding-top: 18px; }

      
  .statement-rubrik .blk { display: block; }
  .statement { padding-block: 80px; }
    .loggor { justify-content: flex-start; gap: 22px 32px; }
  .publikationer-namn { justify-content: flex-start; }
  .logga--lkr { height: 38px; } .logga--naprapater { height: 48px; } .logga--northern { height: 22px; }
  .logga--almi { height: 26px; } .logga--bl { height: 33px; }
  .citat-stort .marg { grid-template-columns: 96px 1fr; }
  .valv--stor { width: 96px; }
  .valv--liten { width: 64px; }
  .klipp-forsta { margin-top: 40px; }
  .klipp--forsta { grid-template-columns: minmax(0, 1fr); }
  .klipp--forsta > * { grid-column: 1 / -1 !important; }
  .klipp-par { row-gap: 48px; }
  .klipp-par--a, .klipp-register { margin-top: 48px; }
  .klipp-register { row-gap: 32px; }
  .klipp--svd { margin-top: 0; }
  .klipp--svd { width: 80%; justify-self: end; }   /* mobil: förstasidan förblir störst, rytm i stället för jämn stapel */
  .klipp--reg { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .klipp--reg .klipp-bild { width: 215px; }
  .klipp--reg .klipp-fot { margin-top: 14px; }
  .citat-litet { gap: 16px; }
  .fraga .lopande { padding-right: 0; }
  .vag { flex-direction: column; align-items: flex-start; }

  .fot-botten { flex-direction: column; }
}

/* =====================================================================================================
 * STRATEGISK HANDLINGSPLAN (erbjudandet, 2026-11-01) – prefix sh-
 * Inga nya typsnitt, färger eller typgrader: alla storlekar är befintliga --w-värden (eller citatets clamp).
 * ===================================================================================================== */

/* ---------- Startsidan: hjälten (variant B) ---------- */
.sh-lofte {
  font-family: var(--k-serif); font-variation-settings: "opsz" 36; font-weight: 400;
  font-size: var(--w-mellan); line-height: 1.18; letter-spacing: -.01em; color: var(--k-ink);
  max-width: 22em; text-wrap: balance;
}
.sh-hjalte-ingress { margin-top: 14px; color: var(--k-fg2); }
.sh-hjalte-namn { font-weight: 600; }

/* ---------- Startsidan: § 01 – figuren leder till insikten ---------- */
.sh-s1-viz.kv-fig { margin-top: clamp(56px, 6vw, 96px); }

/* ---------- Startsidan: FAQ-listan och avslutet ---------- */
.sh-vag-pris { font-size: 16px; line-height: 1.45; color: var(--k-natt-text-dampad); font-variant-numeric: lining-nums tabular-nums; }
.sh-vag-pris .sh-hjalte-namn { color: var(--k-natt-text); }

/* Formulären: fält med hårlinje, inga rundade rutor. */
.sh-form { grid-column: 7 / -1; padding-top: 6px; border-top: 1px solid var(--k-ink); }
.sh-falt { display: flex; flex-direction: column; gap: 6px; padding: 16px 0 6px; }
.sh-falt-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--w-gap); }
.sh-falt label { font-size: var(--w-etikett); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--k-teal); }
.sh-falt .sh-valfri { font-weight: 400; letter-spacing: .04em; text-transform: none; color: var(--k-fg2); }
.sh-falt input, .sh-falt textarea {
  width: 100%; font: 400 var(--w-lopande)/1.5 var(--k-sans); color: var(--k-ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--k-linje-stark); border-radius: 0; padding: 8px 0 10px;
}
.sh-falt textarea { min-height: 112px; resize: vertical; }
.sh-falt input:focus-visible, .sh-falt textarea:focus-visible { outline: 2px solid var(--w-fokus); outline-offset: 2px; border-bottom-color: var(--k-ink); }
.sh-falt input:user-invalid, .sh-falt textarea:user-invalid { border-bottom-color: #8a2f22; }
.sh-honung { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sh-skicka { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 28px; }
.sh-bindande { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--k-linje); color: var(--k-ink); max-width: 40em; }
.sh7-form .sh-bindande { max-width: none; }
.sh-kvitto { display: block; margin-top: 24px; padding: 18px 0 4px; border-top: 1px solid var(--k-ink); }
/* Varv 8: kvittot visas bara när skriptet tagit bort hidden efter serverns svar (inget :target-kvitto via adressen). */
.sh-kvitto[hidden] { display: none; }
.sh-kvitto .k-etikett { color: var(--k-teal); }
.sh-kvitto p + p { margin-top: 6px; }
.sh-kvitto-lista li { padding: 6px 0; color: var(--k-fg2); }

@media (max-width: 1100px) {
          /* Liggaren: veckan går upp som etikett; den lodräta linjen följer med listan. */
                                          .sh-form { grid-column: 6 / -1; }
  }
@media (max-width: 900px) {
                            .sh-form { grid-column: 1 / -1; }
  .sh-form { margin-top: 40px; }
}
@media (max-width: 759px) {
  .sh-lofte { max-width: none; }
                    .sh-falt-par { grid-template-columns: minmax(0, 1fr); }
      }
.sh-ihop { white-space: nowrap; }
.sh-skicka .knapp { font-family: var(--k-sans); border: 0; cursor: pointer; }
.sh-kvitto:focus { outline: none; }

/* Varv 6 slut2: större pressklipp, smalare skärmar (måste stå efter grundreglerna ovan). */
@media (max-width: 1100px) {
  .media[data-klippvariant] .klipp--forsta .klipp-bild { grid-column: 1 / -1; }
  .media[data-klippvariant] .klipp--altinget { grid-column: 1 / span 10; }
  .media[data-klippvariant] .klipp--svd { grid-column: 6 / -1; }
}
@media (max-width: 759px) {
  .media[data-klippvariant] .klipp--altinget, .media[data-klippvariant] .klipp--svd { grid-column: 1 / -1; grid-row: auto; max-width: none; }
  .media[data-klippvariant] .klipp--reg { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .media[data-klippvariant] .klipp--di .klipp-bild { max-width: 215px; }
}

/* Varv 6 slut2: § 07 Beställning – två vägar sida vid sida (fråga | beställning). Inga flikar, inga priskort:
 * villkoren som en typografisk rad överst, två spalter med varsin rubrik och hårlinje. Beställningen är den bredare. */
.sh-vag .sh-form { grid-column: auto; }
.sh-godkann { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 24px; line-height: 1.45; }
.sh-godkann input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--k-teal); }
.sh-skicka-pris { color: var(--k-fg2); }


/* =====================================================================================================
 * VARV 7 (2026-11-01): den sammanslagna startsidan – prefix sh7-.
 * Inga befintliga regler ändras. Storlekar ur befintliga --w-värden eller värden som redan finns i sh-blocket (20, 22 px).
 * ===================================================================================================== */

/* Hjälten: kundlöfte → hur → produkt och pris → handling. Produktraden är ett faktum under en hårlinje, inget priskort. */
.sh7-produkt { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--k-linje); max-width: 34em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; }
.sh7-produkt-namn { font-size: var(--w-lopande); line-height: 1.45; font-variant-numeric: lining-nums tabular-nums; color: var(--k-ink); }
.sh7-produkt-villkor { font-family: var(--k-serif); font-variation-settings: "opsz" 24; font-style: italic; font-size: 20px; line-height: 1.3; color: var(--k-ink); }
.sh7-hjalte .handlingar { margin-top: 24px; }

/* § 01 */
.sh7-s1-intro .ingress { max-width: 34em; color: var(--k-ink); }
.sh7-s1-intro .lopande { margin-top: 1em; }

/* Fig. 1: tillstånden under figuren. Utan styrning (utan JS, reducerad rörelse) är alla tre lika. */
.sh7-lagen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--w-gap); margin-top: 18px; }
.sh7-lage { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-content: start; padding-top: 14px; border-top: 1px solid var(--k-ink); }
.sh7-lage-nr { grid-row: 1 / span 2; font-family: var(--k-serif); font-variation-settings: "opsz" 72; font-weight: 340; font-size: 22px; line-height: 1.05; color: var(--k-fg2); font-variant-numeric: lining-nums tabular-nums; }
.sh7-lage-titel { font-family: var(--k-serif); font-variation-settings: "opsz" 36; font-weight: 400; font-size: 20px; line-height: 1.2; letter-spacing: -.005em; color: var(--k-ink); text-wrap: balance; }
.sh7-lage-text { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--k-fg2); max-width: 36ch; text-wrap: pretty; }
.sh7-lagen.is-styrd .sh7-lage { border-top-color: var(--k-linje); }
.sh7-lagen.is-styrd .sh7-lage::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: var(--k-mark-h); background: var(--k-ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--k-dur-markera, 600ms) var(--k-ease-markera); }
.sh7-lagen.is-styrd .sh7-lage.is-aktiv::before { transform: none; }
.sh7-lagen.is-styrd .sh7-lage:not(.is-aktiv) .sh7-lage-titel { color: var(--k-fg2); }
@media (min-width: 1101px) {
  .sh7-viz > .kv-fot { grid-row: 2; }
  .sh7-viz > .sh7-lagen { grid-column: 3 / -1; grid-row: 3; }
  .sh7-viz > .kv-beskrivning { grid-row: 4; }
  }
@media (max-width: 1100px) {
  .sh7-viz > .sh7-lagen { grid-column: 1 / -1; order: 2; }
  .sh7-viz > .kv-beskrivning { order: 3; }
  }

/* § 02 Strategisk handlingsplan: redaktionell uppställning. Tre skalor: numret (rubrikgrad), rubriken (mellanläge), texten (löptext). */
.sh7-plan-intro .ingress { max-width: 34em; color: var(--k-ink); }
.sh7-plan-intro .lopande { margin-top: 1em; max-width: 40em; }
.sh7-delar { margin-top: clamp(48px, 5vw, 80px); }
.sh7-delar-etikett { margin: 0 0 14px; color: var(--k-teal); }
.sh7-del { position: relative; padding-block: 26px 34px; align-items: start; }
.sh7-del::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--k-rule); }
.sh7-del:first-child::before { background: var(--k-ink); }
.sh7-del:last-child::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--k-rule); }
.sh7-del-nr { font-family: var(--k-serif); font-variation-settings: "opsz" 72; font-weight: 340; font-size: var(--w-rubrik); line-height: .82; letter-spacing: -.02em; color: var(--k-fg2); font-variant-numeric: lining-nums tabular-nums; }
.sh7-del-titel { grid-column: 3 / span 4; margin: 0; padding-top: 2px; font-family: var(--k-serif); font-variation-settings: "opsz" 36; font-weight: 400; font-size: var(--w-mellan); line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
.sh7-del-text { grid-column: 7 / -1; padding-top: 4px; }
.sh7-del-text .lopande { max-width: 46ch; }

/* Avslutande produktinformation: priset har skalan (inget guld), villkoren i kursiv, en primär handling. */
.sh7-kop { margin-top: clamp(48px, 5vw, 80px); }
.sh7-kop-yta { grid-column: 3 / -1; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: var(--w-gap); align-items: start; padding-top: 18px; border-top: 1px solid var(--k-ink); }
.sh7-kop-pris { grid-column: 1 / span 4; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.sh7-kop-pris .k-siffra { font-size: var(--w-rubrik); line-height: 1; padding-bottom: .08em; white-space: nowrap; }
.sh7-kop-moms { font-size: var(--w-lopande); color: var(--k-fg2); }
.sh7-kop-text { grid-column: 5 / -1; padding-top: 6px; }
.sh7-kop-villkor { font-family: var(--k-serif); font-variation-settings: "opsz" 24; font-style: italic; font-size: 22px; line-height: 1.3; color: var(--k-ink); max-width: 26em; text-wrap: balance; }
.sh7-kop-handling { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 24px; }

/* § 05: Mäklarsamfundet som case, samma liggarform som produktsidans kundrader. */
.sh7-case { position: relative; margin-top: clamp(56px, 6vw, 96px); padding-top: 24px; align-items: start; }
.sh7-case::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--k-rule); }
.sh7-case-namn { grid-column: 3 / span 4; font-family: var(--k-serif); font-variation-settings: "opsz" 36; font-weight: 400; font-size: var(--w-mellan); line-height: 1.15; letter-spacing: -.01em; }
.sh7-case-text { grid-column: 7 / -1; }
.sh7-case-text .lopande { max-width: 52ch; }
.sh7-case-kalla { margin-top: 10px; }

/* § 03: DN Debatt i registret, i originalets bredd (480 px-utsnitt). */
.media[data-klippvariant] .klipp--dndebatt { --reg-w: 420px; }

/* § 07 Människa och teknik + arbetsflödet som bevis. */
.sh7-manniska-text { grid-column: 1 / span 8; }
.sh7-manniska-text .lopande { margin-top: 1em; max-width: 40em; }
.sh7-manniska .statement-lank { align-self: end; }

/* § 09 Beställ: priset och de andra vägarna till vänster, beställningen till höger. Grupper med tunna avdelare. */
.sh7-best { margin-top: clamp(40px, 4.5vw, 72px); align-items: start; }
.sh7-best-sida { grid-column: 1 / span 4; padding-top: 14px; border-top: 1px solid var(--k-ink); }
.sh7-best-pris .k-siffra { display: inline-block; font-size: var(--w-rubrik); line-height: .95; padding-bottom: .06em; white-space: nowrap; }
.sh7-best-moms { display: block; margin-top: 8px; font-size: var(--w-ingress); color: var(--k-ink); }
.sh7-best-villkor { margin-top: 14px; font-family: var(--k-serif); font-variation-settings: "opsz" 24; font-style: italic; font-size: 20px; line-height: 1.3; color: var(--k-ink); max-width: 20em; }
.sh7-fraga-form { margin-top: 18px; padding-top: 2px; border-top: 1px solid var(--k-linje); }
.sh7-fraga-form .sh-skicka { margin-top: 22px; }
.sh7-boka { margin-top: 18px; font-size: 16px; }
.sh-form.sh7-form { grid-column: 6 / -1; padding-top: 0; border-top: 0; }
.sh7-grupp { border: 0; margin: 0; padding: 0; min-width: 0; }
.sh7-grupp + .sh7-grupp { margin-top: 36px; }
.sh7-grupp-rubrik { float: left; width: 100%; display: flex; align-items: baseline; gap: 12px; padding: 14px 0 2px; border-top: 1px solid var(--k-linje);
  font-family: var(--k-serif); font-variation-settings: "opsz" 36; font-weight: 400; font-size: 22px; line-height: 1.2; letter-spacing: -.005em; color: var(--k-ink); }
.sh7-grupp-rubrik + * { clear: both; }
.sh7-form > .sh7-grupp:first-of-type .sh7-grupp-rubrik { border-top-color: var(--k-ink); }
/* Med JS står flikarnas hårlinje direkt ovanför formuläret och är dess övre linje; utan JS har första gruppen sin egen. */
@media (scripting: enabled) {
  .sh7-vagval .sh7-form > .sh7-grupp:first-of-type .sh7-grupp-rubrik { border-top: 0; padding-top: 0; }
  .sh7-vagval .sh7-fraga-form .sh7-grupp--forfragan { border-top: 0; padding-top: 0; }
}
.sh7-grupp-nr { flex: none; min-width: 1.1em; font-family: var(--k-serif); font-variation-settings: "opsz" 72; font-weight: 340; color: var(--k-fg2); font-variant-numeric: lining-nums tabular-nums; }
.sh7-falt-halv { max-width: calc(50% - var(--w-gap) / 2); }
.sh7-villkor-lista { margin-top: 12px; }
.sh7-villkor-lista li { position: relative; padding: 8px 0 8px 18px; border-top: 1px solid var(--k-linje); font-size: 16px; line-height: 1.45; color: var(--k-ink); }
.sh7-villkor-lista li:first-child { border-top: 0; }
.sh7-villkor-lista li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 8px; height: 1px; background: var(--k-ink); }
.sh7-grupp--villkor .sh-godkann { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--k-ink); }
.sh7-grupp--villkor .sh-skicka { margin-top: 24px; }
/* Fel vid fältet (validering.ts). Samma mörkröda linje som :user-invalid. */
.sh-fel { margin: 2px 0 0; font-size: 14px; line-height: 1.4; font-weight: 600; color: #8a2f22; }
.sh-godkann .sh-fel { grid-column: 2; }
.sh-falt [aria-invalid="true"] { border-bottom-color: #8a2f22; box-shadow: 0 1px 0 #8a2f22; }
.sh-godkann input[aria-invalid="true"] { outline: 2px solid #8a2f22; outline-offset: 2px; }
.sh7-kvitto { margin-top: 32px; }
.sh7-kvitto-uppg { margin: 14px 0 10px; }
.sh7-kvitto-uppg > div { display: grid; grid-template-columns: 10em minmax(0, 1fr); gap: 12px; padding: 7px 0; border-top: 1px solid var(--k-linje); }
.sh7-kvitto-uppg dt { font-size: var(--w-etikett); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--k-teal); padding-top: 3px; }
.sh7-kvitto-uppg dd { margin: 0; color: var(--k-ink); overflow-wrap: anywhere; }
.sh7-kvitto-villkor-rubrik { margin-top: 18px; }

@media (max-width: 1100px) {
  .sh7-del-nr { grid-column: 1 / span 2; margin-bottom: 0; }
  .sh7-kop > .marg, .sh7-case > .marg { display: none; }
  .sh7-kop-yta { grid-column: 1 / -1; }
  .sh7-case-namn { grid-column: 1 / span 5; }
  .sh7-case-text { grid-column: 6 / -1; }
  .sh7-manniska-text { grid-column: 1 / span 9; }
  .sh7-best-sida { grid-column: 1 / span 5; }
  .sh-form.sh7-form { grid-column: 7 / -1; }
}
@media (max-width: 900px) {
  .sh7-lagen { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .sh7-lage { padding-block: 12px 14px; }
  .sh7-del-titel, .sh7-del-text { grid-column: 3 / -1; }
  .sh7-del-text { padding-top: 10px; }
  .sh7-kop-pris, .sh7-kop-text { grid-column: 1 / -1; }
  .sh7-kop-text { margin-top: 12px; }
  .sh7-case-namn, .sh7-case-text { grid-column: 1 / -1; }
  .sh7-case-namn { margin-bottom: 12px; }
  .sh7-manniska-text { grid-column: 1 / -1; }
  .sh7-best-sida, .sh-form.sh7-form { grid-column: 1 / -1; }
  .sh-form.sh7-form { margin-top: 48px; }
}
@media (max-width: 759px) {
  .sh7-produkt { gap: 0 14px; }
  .sh7-del { padding-block: 20px 26px; }
  .sh7-del-nr { margin-bottom: 10px; font-size: var(--w-nr); }
  .sh7-kop-yta { grid-template-columns: minmax(0, 1fr); }
  .sh7-kop-handling { gap: 18px 24px; }
  .sh7-falt-halv { max-width: none; }
  .sh7-kvitto-uppg > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .media[data-klippvariant] .klipp--dndebatt .klipp-bild { width: 100%; max-width: 420px; }
}
/* Priset följer med bredvid formuläret på bred skärm, så länge frågevägen är hopfälld (öppen kan den bli högre än vyn). */
@media (min-width: 901px) {
  .sh7-best-sida:not(:has(details[open])) { position: sticky; top: 96px; }
}

/* =========================================================================================================
 * VARV 7, EFTER DESIGN CRITIC (2026-11-01): startsidans sh7-klasser.
 * ========================================================================================================= */
/* K11: sidhuvudet bryts inte på 320 px; Kontakta oss nås via menyn */
@media (max-width: 359px) { .sh7-topp-cta { display: none; } }

/* § 05 (B10): Mäklarsamfundet först, med etikettrad */
.sh7-case-etikett { padding-top: .4em; color: var(--k-teal); }
.citat-avsnitt .sh7-case { margin-top: clamp(24px, 3vw, 40px); }
.citat-avsnitt .sh7-case + .citat-stort { margin-top: clamp(56px, 6vw, 96px); }
@media (max-width: 1100px) { .sh7-case > .sh7-case-etikett { display: block; grid-column: 1 / -1; margin-bottom: 10px; } }

/* FAQ (AD-beslut 7): Vad ingår inte? */
.sh7-inte-lista { margin: 4px 0 14px; max-width: 46em; }
.sh7-inte-lista li { position: relative; padding: 7px 0 7px 18px; border-top: 1px solid var(--k-linje); font-size: var(--w-lopande); line-height: 1.5; color: var(--k-fg2); }
.sh7-inte-lista li:first-child { border-top: 0; }
.sh7-inte-lista li::before { content: ""; position: absolute; left: 0; top: 1.1em; width: 8px; height: 1px; background: var(--k-fg2); }

/* § 09 förfrågan och beställningssidan */
.sh7-alias { position: absolute; display: block; width: 0; height: 0; }
.sh7-fraga-form .sh7-grupp--forfragan { padding-top: 2px; border-top: 1px solid var(--k-ink); }

/* K13: fälten läsbara för mobilbeställaren. Etiketter 16 px i gemener (Figtree 500), lätt fyllning och tunn ram i Källans ton.
 * Källans versaletikett behålls bara för grupprubrikerna. */
.sh7-form .sh-falt label { font-size: 16px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--k-ink); line-height: 1.35; }
.sh7-form .sh-falt .sh-valfri { font-size: 15px; letter-spacing: 0; }
.sh7-form .sh-falt input, .sh7-form .sh-falt textarea { background: var(--k-papper-upphojd); border: 1px solid var(--k-linje-stark); padding: 10px 12px 11px; }
.sh7-form .sh-falt input:focus-visible, .sh7-form .sh-falt textarea:focus-visible { border-color: var(--k-ink); }
.sh7-form .sh-falt input:user-invalid, .sh7-form .sh-falt textarea:user-invalid, .sh7-form .sh-falt [aria-invalid="true"] { border-color: #8a2f22; box-shadow: inset 0 -1px 0 #8a2f22; }
.sh-hjalp { margin: 0; font-size: 14px; line-height: 1.4; color: var(--k-fg2); }
.sh7-form .sh-falt { padding-top: 14px; }
/* Grupp 2 och 3 sida vid sida på bred skärm (ett fält var) */
.sh7-grupp-par { margin-top: 36px; }
@media (min-width: 1101px) {
  .sh7-grupp-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--w-gap); align-items: start; }
  .sh7-grupp-par > .sh7-grupp + .sh7-grupp { margin-top: 0; }
  .sh7-grupp-par .sh-falt textarea { min-height: 96px; }
}
@media (max-width: 1100px) { .sh7-grupp-par > .sh7-grupp + .sh7-grupp { margin-top: 36px; } }
.sh7-grupp-par + .sh7-grupp { margin-top: 36px; }
/* K12: litet nummer i grupprubriken, ingen egen kolumn */
.sh7-form .sh7-grupp-nr { min-width: 0; font: 600 13px/1 var(--k-sans); letter-spacing: .06em; color: var(--k-teal); font-variant-numeric: lining-nums tabular-nums; position: relative; top: -.15em; }
.sh7-form .sh7-grupp-rubrik { gap: 10px; }
/* B8: kvittot */
.sh7-kvitto-rubrik { font-family: var(--k-serif); font-variation-settings: "opsz" 36; font-weight: 400; font-size: var(--w-mellan); line-height: 1.15; letter-spacing: -.01em; color: var(--k-ink); margin: 0 0 8px; }
.sh7-kvitto-preview { font-size: 14px; line-height: 1.45; color: var(--k-fg2); }
.sh7-kvitto-preview .k-etikett { margin-right: 8px; }
.sh7-kvitto-produkt { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--k-linje); font-weight: 600; color: var(--k-ink); font-variant-numeric: lining-nums tabular-nums; }
.sh7-kvitto .sh7-kvitto-uppg { margin-top: 0; }
/* K15: reducerad rörelse – stillbildernas spalter linjerar med förklaringens 01/02/03 (samma mellanrum som rastret) */
@media (min-width: 901px) { .sh7-viz .kv-tre { column-gap: var(--w-gap); } }

/* § 07: guldet hålls på en rad där det får plats (bryts annars i 320 px och ger horisontell scroll) */
@media (min-width: 400px) { .sh7-ihop-bred { white-space: nowrap; } }

/* § 09 förfrågan (koordinatorns punkt B): hela förfrågan med knappen syns när man landar på #forfragan i 1440×900.
   Mindre luft ovanför, Namn, E-post och Telefon på en rad (bred skärm), "Berätta gärna mer" tre rader.
   På mobil kommer fälten direkt efter rubrik och intro; priset står kompakt efter formuläret, följt av "Beställ direkt". */
.sh7-fraga-form .sh-skicka { margin-top: 20px; }
@media (min-width: 1101px) { .sh7-fraga-form .sh7-falt-tre { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Fig. 1 sticky-spår. I bred och hög vy (>= 1024 × 760) med rörelse står figuren fast under sidhuvudet medan läsaren
   scrollar två vyhöjder, och läget följer var i spåret läsaren är (scripts/kallan/riktning.ts). Bara CSS bestämmer
   spårets höjd, redan vid första ritningen, så att ingenting flyttar sig när skripten laddats och ankarlänkar landar rätt.
   Scenen smalnas av så att figuren med förklaringen ryms under sidhuvudet. */
@media (min-width: 1024px) and (min-height: 760px) and (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .sh7-fig-spar > .kv-fig { position: sticky; top: var(--sh7-fast-topp); }
  .sh7-fig-spar::after { content: ""; display: block; height: 200vh; }
  .sh7-fig-spar .kv-scen { max-width: min(100%, calc((100vh - var(--sh7-fast-topp) - var(--sh7-fig-ovrigt, 250px)) / 0.56)); }
}

/* Fig. 1 (varv 8): förklaringens markering följer figurens läge kontinuerligt (--lage 0–1 per läge, riktning.ts). */
.sh7-lagen.is-styrd .sh7-lage::before, .sh7-lagen.is-styrd .sh7-lage.is-aktiv::before { transform: scaleX(var(--lage, 0)); transition: none; }
.sh7-lagen.is-styrd .sh7-lage-titel, .sh7-lagen.is-styrd .sh7-lage-nr { transition: none; }

/* § 09 (varv 8): beställningen och frågan i samma avsnitt. Beställ är förvald; växlingen är diskret, två textflikar
   på en hårlinje (vagval.ts). Utan JS syns båda formulären under varandra och växlingen är dold. */
.sh7-vagval { grid-column: 6 / -1; min-width: 0; }
.sh7-vagval .sh-form.sh7-form { grid-column: auto; }
.sh7-vaxel { display: flex; gap: 28px; margin-bottom: 26px; border-bottom: 1px solid var(--k-linje); }
.sh7-vaxel[hidden] { display: none; }
.sh7-flik { appearance: none; background: none; border: 0; margin: 0 0 -1px; padding: 10px 0 12px; cursor: pointer;
  font: 600 var(--w-etikett, 13px)/1.2 var(--k-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--k-fg2);
  border-bottom: var(--k-mark-h) solid transparent; }
.sh7-flik[aria-selected="true"] { color: var(--k-ink); border-bottom-color: var(--k-ink); }
.sh7-flik:hover { color: var(--k-ink); }
.sh7-flik:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.sh7-panel[hidden] { display: none; }
.sh7-panel + .sh7-panel { margin-top: 56px; }
@media (scripting: enabled) { .sh7-panel + .sh7-panel { margin-top: 0; } }
.sh-turnstile:empty { display: none; }
.sh-turnstile { margin-top: 18px; }
.sh-fel--server { margin-top: 18px; }
.sh7-demo { margin-top: 20px; padding: 12px 0 0; border-top: 1px solid var(--k-linje); }
.knapp[disabled] { opacity: .45; cursor: not-allowed; }
@media (max-width: 1100px) { .sh7-vagval { grid-column: 7 / -1; } }
@media (max-width: 900px) { .sh7-vagval { grid-column: 1 / -1; margin-top: 48px; } .sh7-vagval .sh-form.sh7-form { margin-top: 0; } }

.sh7-bestall { padding-bottom: clamp(56px, 6vw, 96px); }
/* Bilder som laddas lat visar aldrig sin alt-text som ruta medan de hämtas; ytan har papperets ton (alt läses ändå upp). */
.klipp-bild img, .valv img { color: transparent; background: var(--k-papper-upphojd); }