/* landning.css: landningssidan (/), ovanpå sida.css. Hemsidan v2: förslag C (Huvudrollen) som grund, med det bästa ur
   A och B (docs/beslut/2026-10-01_hemsidan_v2.md, docs/ux/2026-10-01_v2/blindprovet.md).
   Ur A: filmens början i hjälten, faktaraden, Samma Kim med flikar, matchklippet i ögonhöjd, tabellen med VEM,
   salongen vid priset och den sista knappen. Ur B: Dina papper blir ett manus, de fotografiska kopiorna och mörkrummet.
   Allt i C:s färger och typsnitt. Fälten: tomat, papper, solgult, granskog och blak. Falurött är inget fält här.
   Alla texter är UTKAST. Kim Testsson och de andra i bilderna är påhittade. */

:root {
  /* kopiorna: vit kant, skugga som när ett foto ligger på ett bord (ur B) */
  --mat: 12px;
  --kontakt: 0 1px 1px rgb(27 23 20 / .14), 0 16px 30px -14px rgb(27 23 20 / .5);
  --kontakt-lag: 0 1px 1px rgb(27 23 20 / .1), 0 10px 18px -10px rgb(27 23 20 / .4);
  /* understrykningen i papperen när paret visas: tomat tonad i ljus (blak text 13:1) */
  --tomat-ljus: #FBD3C2;
  /* hur långt en bild ska gå ut till fönstrets högra kant */
  --utfall: calc((min(1312px, 100vw - 2 * var(--sida)) - 100vw) / 2);
}
@media (max-width: 700px) { :root { --mat: 8px; } }
/* töjningen är en animation; samma kurva också för övergången, så att sidan bara har sina två kurvor (D01) */
.toj { transition-timing-function: var(--ut); }

/* ================================================================ sidhuvudet */
.sidhuvud .topp { min-height: 64px; }
.sidnav { display: flex; align-items: center; gap: 8px 28px; }
@media (max-width: 700px) { .sidhuvud .topp { min-height: 48px; } .bara-bred { display: none; } }

/* ================================================================ 1. hjälten */
.hjalte { padding: 24px 0 72px; overflow-x: clip; }
.hjalte-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
/* rubriken säger vad tjänsten är; repliken under är exemplet */
.hjalte h1 { grid-column: 1 / 8; grid-row: 1; font: 800 var(--t-6)/1 var(--rubrik); letter-spacing: -.02em; max-width: 15ch; }
.hjalte-ingress { grid-column: 8 / 13; grid-row: 1; align-self: end; font: 500 var(--t-3)/1.5 var(--brod); max-width: 44ch; }

.exempel { grid-column: 1 / 7; grid-row: 2 / span 2; margin-top: 40px; padding-top: 14px; border-top: 2px solid var(--text); container-type: inline-size; }
.exempel-etikett { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font: 600 var(--t-1)/1.3 var(--brod); color: var(--text); }
.exempel-etikett span { background: var(--blak); color: var(--papper); padding: 3px 8px; border-radius: 2px; font-weight: 700; }
.affisch { margin-top: 18px; }
/* "Det här är" står mindre än rubriken, så att h1 säger vad tjänsten är och repliken är exemplet. Citattecknet hänger
   ut i marginalen, så att bokstäverna står i spaltens kant */
.det-har-ar { display: block; font: 600 var(--t-4)/1.2 var(--rubrik); letter-spacing: -.01em; text-indent: -.42em; }
/* repliken: ett ord per rad, fast radhöjd, passad i spalten (som motorns passa()). --k är det bredaste ordets bredd i em.
   Höjden för två rader hålls bara när namnet har två rader (data-rader från landning.js) */
.replik { --k: 4.45; display: block; margin-top: 4px; font-family: var(--rubrik); font-size: min(var(--t-8), 100cqi / var(--k)); line-height: .9; letter-spacing: -.02em; min-height: 1.8em; padding-top: .04em; }
.replik[data-rader="1"] { min-height: .94em; }
.replik .ord { display: block; white-space: nowrap; }
.exempel .knapp { margin-top: 32px; min-height: 56px; padding: 0 28px; font-size: 20px; }
/* knapptexten med ett skrivet namn: ett långt namn utan mellanslag bryts i stället för att gå ut ur knappen */
#hjalteKnappText, #prisKnappText, #slutKnappText { min-width: 0; overflow-wrap: anywhere; }
/* faktaraden ur A: svaren på främlingens frågor, direkt under knappen. Varje fakta har sin fyrkantiga markör, så att
   ingen skiljepunkt blir hängande sist på en rad när raden bryts */
.faktarad { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 14px; font: 600 var(--t-1)/1.5 var(--brod); color: var(--text); }
.faktarad > span { white-space: nowrap; }
.faktarad > span.hela { white-space: normal; }
.faktarad > span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; vertical-align: .16em; background: currentColor; }
.mikro { margin-top: 14px; font: 500 var(--t-1)/1.4 var(--brod); color: var(--text-2); }
.mikro.besked { font-weight: 700; color: var(--text); }
.mikro.besked:empty { display: none; }

/* filmen: affischbilden står still, och på ett klick spelar filmens början med berättarens röst, paus och undertexter */
.filmruta { grid-column: 7 / 13; grid-row: 2; margin: 40px 0 0; }
.filmruta .duk-ram { margin-right: var(--utfall); }
.duk-ram, .visning-duk { position: relative; aspect-ratio: 16 / 9; background: var(--blak); overflow: hidden; }
.duk-ram > img, .duk-ram > canvas, .visning-duk > img, .visning-duk > canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.visning-duk > canvas { opacity: 0; }
.visning.igang .visning-duk > canvas { opacity: 1; }
.visning:not(.igang) .tidkod { display: none; }

.spela { position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px; background: none; border: 0; cursor: pointer; color: var(--papper); font: 700 var(--t-2)/1 var(--rubrik); }
.duk-ram .spela { left: 28%; }
.skiva { position: relative; display: block; width: 72px; height: 72px; border-radius: 50%; background: var(--solgul); transition: transform var(--snabb) var(--fjader); }
.skiva::after { content: ""; position: absolute; left: 29px; top: 23px; border-left: 22px solid var(--blak); border-top: 13px solid transparent; border-bottom: 13px solid transparent; }
.spela:hover .skiva, .spela:focus-visible .skiva { transform: scale(1.06); }
.spela:active .skiva { transform: scale(.97); }
.spela .etikett { display: block; background: var(--blak); color: var(--papper); padding: 6px 10px; border-radius: 2px; white-space: nowrap; }
.spela:focus-visible, .styr:focus-visible { outline: 3px solid var(--solgul); outline-offset: 2px; border-radius: 4px; }
/* efter rösten: Hör igen där Pausa stod, så att namnet i slutbilden står fritt */
.duk-ram.slut .spela { left: auto; right: 12px; top: 12px; transform: none; flex-direction: row; gap: 8px; padding: 4px; }
.duk-ram.slut .skiva { width: 36px; height: 36px; }
.duk-ram.slut .skiva::after { left: 14px; top: 11px; border-left-width: 11px; border-top-width: 7px; border-bottom-width: 7px; }
/* Pausa och Spela: en platta i blak med symbolen, uppe till höger */
.styr { position: absolute; right: 12px; top: 12px; z-index: 3; min-height: 36px; padding: 0 12px 0 10px; display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--papper); background: var(--blak); color: var(--papper); font: 700 var(--t-1)/1 var(--rubrik); border-radius: 4px; cursor: pointer; }
.styr::before { content: ""; flex: none; width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.styr[data-lage=pausad]::before, .styr[data-lage=slut]::before { width: 0; height: 0; border-inline: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
/* tidkoden i Samma Kim, som på en monitor: timmar, minuter, sekunder och bildruta. Nere till höger, där motorn inte skriver */
.tidkod { position: absolute; right: 12px; bottom: 12px; z-index: 2; padding: 3px 8px; background: var(--blak); color: var(--papper); font: 600 var(--t-1)/1.3 var(--brod); font-variant-numeric: tabular-nums; letter-spacing: .02em; border-radius: 2px; pointer-events: none; }
/* textremsan som undertexter: en platta per rad, inte en balk över filmen */
.textremsa { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 2; padding: 0 16px; margin: 0; color: var(--papper); font: 600 var(--t-2)/1.6 var(--brod); text-align: center; pointer-events: none; }
.textremsa span { background: var(--blak); padding: 2px 8px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.textremsa:empty { display: none; }

/* namnfältet: en provning av raden, under filmen */
.prova { grid-column: 7 / 13; grid-row: 3; margin-top: 28px; display: grid; gap: 8px; max-width: 460px; }
.prova label { font: 700 var(--t-2)/1.3 var(--rubrik); }
.prova .mikro { margin-top: 0; }
/* samma fältform som sidans andra fält (2 px kant, 4 px hörn), med rubrikens typsnitt eftersom namnet hamnar i repliken */
#fornamn { font: 700 var(--t-4)/1.2 var(--rubrik); min-height: 60px; padding: 10px 16px; }
#fornamn::placeholder { font-weight: 500; }

/* ================================================================ kapitlen */
.kapitel-avsnitt { padding: 112px 0; overflow-x: clip; }
.kapitel { font-size: var(--t-7); line-height: .95; letter-spacing: -.02em; max-width: 16ch; }
.ingress { font: 500 var(--t-4)/1.35 var(--brod); max-width: 34ch; }
.avsnitt-huvud { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
.avsnitt-huvud > h2 { grid-column: 1 / 8; }
.avsnitt-huvud > .ingress { grid-column: 8 / 13; padding-bottom: 6px; }

/* de fotografiska kopiorna ur B: vit kant, lätt lutning, skugga. Märkningen står i kanten, 6 px under bilden (AK19) */
.kopia { margin: 0; padding: var(--mat) var(--mat) 0; background: var(--ljus); color: var(--blak); box-shadow: var(--kontakt); transform: rotate(var(--lut, 0deg)); transition: transform var(--mellan) var(--ut); }
.kopia:hover { transform: none; }
.kopia img { width: 100%; height: auto; }
.kopia figcaption { display: flex; flex-direction: column; gap: 2px; padding: 6px 2px 12px; font: 500 var(--t-1)/1.35 var(--brod); color: var(--blak); }
.kopia figcaption .ai { color: var(--grafit); }
.kopia figcaption b { font: 700 var(--t-2)/1.3 var(--rubrik); }

/* ---------------------------------------------------------------- 2. förlagan: matchklippet i ögonhöjd (ur A)
   Ögonen sitter på 40 % av fotots höjd och 42,4 % av porträttets (4:5). Med bredderna 38 och 52 cqw och samma kant
   (--mat) blir fotots förskjutning 0,53 × porträttbilden − 0,40 × fotobilden, och linjen går genom båda ögonparen */
.matchklipp { position: relative; container-type: inline-size; display: flex; justify-content: space-between; align-items: flex-start; max-width: 940px; margin: 72px auto 0; }
.foto-kopia { --lut: -1.6deg; width: 38cqw; margin-top: calc(12.36cqw - .26 * var(--mat)); }
.slut-kopia { --lut: .8deg; width: 52cqw; }
.slut-kopia img { aspect-ratio: 4 / 5; object-fit: cover; }
.ogonlinje { position: absolute; left: -32px; right: -32px; top: calc(27.56cqw - .06 * var(--mat) - 1px); z-index: 2; height: 2px; background: var(--tomat); pointer-events: none; }
.ogonlinje::before, .ogonlinje::after { content: ""; position: absolute; top: -5px; width: 2px; height: 12px; background: var(--tomat); }
.ogonlinje::before { left: 0; } .ogonlinje::after { right: 0; }
.fotnot { margin: 56px auto 0; max-width: 940px; font: 400 var(--t-2)/1.5 var(--brod); color: var(--text-2); border-top: 2px solid var(--text); padding-top: 16px; }

/* ---------------------------------------------------------------- 3. dina papper blir ett manus (ur B) */
.papper-yta { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; margin-top: 64px; align-items: start; }
.papperen { grid-column: 1 / 7; display: grid; gap: 24px; align-content: start; }
.papperen .exempel-etikett { margin-bottom: 4px; }
.ark { padding: 20px 24px 22px; background: var(--ljus); color: var(--blak); box-shadow: var(--kontakt-lag); transform: rotate(var(--lut, 0deg)); transition: transform var(--mellan) var(--ut); }
.ark:hover { transform: none; }
.ark:nth-of-type(1) { --lut: -.8deg; }
.ark:nth-of-type(2) { --lut: .6deg; margin-left: 6%; }
.ark:nth-of-type(3) { --lut: -.4deg; margin-right: 10%; }
.ark-namn { margin-bottom: 8px; font: 700 var(--t-1)/1.3 var(--brod); color: var(--grafit); }
.ark p { font: 400 var(--t-3)/1.65 var(--brod); }
.ark mark { background-color: transparent; color: inherit; text-decoration: underline 3px var(--tomat); text-underline-offset: 5px; text-decoration-skip-ink: none; transition: background-color var(--snabb) var(--ut); }
.korr { margin-left: 2px; font: 800 12px/1 var(--rubrik); font-stretch: 75%; letter-spacing: .02em; color: var(--falurott); vertical-align: super; }
.manus-ark { grid-column: 7 / 13; position: sticky; top: 24px; padding: 28px 32px 24px; background: var(--ljus); color: var(--blak); box-shadow: var(--kontakt); }
.manus-huvud { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; padding-bottom: 12px; border-bottom: 2px solid var(--blak); font: 600 var(--t-1)/1.3 var(--brod); color: var(--grafit); }
.manus-huvud span:first-child { font: 800 var(--t-4)/1.1 var(--rubrik); color: var(--blak); }
.manus-rader { list-style: none; margin: 0; padding: 0; }
.manus-rader li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; padding: 18px 8px 18px 0; border-bottom: 1px solid var(--blak); transition: background-color var(--snabb) var(--ut); }
.rad-nr { padding-top: 6px; font: 800 var(--t-1)/1 var(--rubrik); font-stretch: 75%; letter-spacing: .02em; color: var(--falurott); }
.manus-rader p { font: 700 var(--t-4)/1.25 var(--rubrik); letter-spacing: -.01em; }
.kalla { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 8px; font: 600 var(--t-1)/1.3 var(--brod); }
.kalla::before { content: ""; width: 10px; height: 10px; background: var(--tomat); }
.kontroll { font-weight: 500; color: var(--grafit); }
.kontroll::before { content: "· "; }
.manus-not { margin-top: 16px; font: 400 var(--t-2)/1.5 var(--brod); color: var(--grafit); }
/* pekar du på ett krav eller en replik visas paret. Källan står också i text, så inget kräver mus */
.papper-yta:has([data-par="1"]:hover) [data-par="1"], .papper-yta:has([data-par="2"]:hover) [data-par="2"],
.papper-yta:has([data-par="3"]:hover) [data-par="3"], .papper-yta:has([data-par="4"]:hover) [data-par="4"] { background-color: var(--tomat-ljus); }

/* ---------------------------------------------------------------- 4. samma Kim, två jobb (ur A): spelaren och flikarna */
.visning { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; margin-top: 64px; align-items: start; }
.visning-film { grid-column: 1 / 10; margin: 0; }
/* flikarna står som två kapitel bredvid spelaren, och under dem vad exemplet visar */
.visning-sida { grid-column: 10 / 13; display: grid; gap: 28px; align-content: start; }
.rullar { display: grid; gap: 16px; }
.visning-text { padding-top: 16px; border-top: 2px solid var(--text); font: 500 var(--t-4)/1.35 var(--brod); }
.rulle { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 12px; align-items: start; width: 100%; padding: 18px 18px 16px; border: 2px solid var(--papper); border-radius: 4px; background: transparent; color: var(--papper); text-align: left; cursor: pointer; font: inherit;
  transition: background-color var(--snabb) var(--ut), color var(--snabb) var(--ut); }
.rulle:hover { background: rgb(244 236 219 / .1); }
.rulle[aria-pressed=true] { background: var(--papper); color: var(--blak); }
.rulle-nr { grid-row: 1 / 3; font: 800 48px/.82 var(--rubrik); font-stretch: 75%; }
.rulle-namn { grid-column: 2 / 4; font: 780 var(--t-4)/1.15 var(--rubrik); }
.rulle-roll { grid-column: 2 / 4; margin-top: 4px; font: 500 var(--t-1)/1.4 var(--brod); color: var(--dimljus); }
.rulle[aria-pressed=true] .rulle-roll { color: var(--grafit); }
.rulle-linje { grid-column: 1 / 3; grid-row: 3; align-self: center; height: 4px; margin-top: 18px; background: rgb(201 191 173 / .35); }
.rulle[aria-pressed=true] .rulle-linje { background: rgb(27 23 20 / .18); }
.rulle-linje i { display: block; height: 100%; width: calc(var(--del, 0) * 100%); background: currentColor; }
.rulle-tid { grid-column: 3; grid-row: 3; margin-top: 18px; font: 600 var(--t-1)/1 var(--brod); font-variant-numeric: tabular-nums; }
/* när motorn har ritat står namnet i bilden: Spela båda och Spela igen flyttar upp till höger, där Pausa står */
.visning.igang .visning-duk .spela { left: auto; right: 12px; top: 12px; transform: none; flex-direction: row; gap: 8px; padding: 4px; }
.visning.igang .visning-duk .skiva { width: 36px; height: 36px; }
.visning.igang .visning-duk .skiva::after { left: 14px; top: 11px; border-left-width: 11px; border-top-width: 7px; border-bottom-width: 7px; }

/* ---------------------------------------------------------------- 6. mörkrummet: sidans enda helbildsfoto (ur B)
   Bilden går ut till kanterna. Texten står i bildens mörka vänstra tredjedel på datorn och under bilden på mobilen.
   Retuschen: till vänster i bilden står en mörkröd panel (1,6–30,2 % av bredden) med en lodrät kant. Den tonas bort i
   blak fram till mörkret före framkallningsbaljan (39,6 %), så att ingen skarv syns och texten står på fältets eget
   mörker. På mobilen beskärs bilden från höger, och tonen följer samma kanter i den beskurna bilden */
.morkrum { padding-bottom: 40px; overflow-x: clip; }
.morkrum-scen { position: relative; }
.morkrum-scen > img { width: 100%; height: auto; aspect-ratio: 2560 / 1097; object-fit: cover; object-position: 100% 50%; }
.morkrum-scen::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 2560 / 1097; pointer-events: none;
  background: linear-gradient(90deg, var(--blak) 0, var(--blak) 31%, rgb(27 23 20 / .6) 35.5%, rgb(27 23 20 / 0) 40%); }
.morkrum-ai { width: min(1312px, 100% - 2 * var(--sida)); margin: 8px auto 0; color: var(--dimljus); }
.morkrum-text { width: min(1312px, 100% - 2 * var(--sida)); margin: 40px auto 0; }
.morkrum-text h2 { font-size: var(--t-6); line-height: 1; letter-spacing: -.02em; max-width: 13ch; }
.morkrum-text p { margin-top: 20px; max-width: 40ch; font: 500 var(--t-3)/1.5 var(--brod); }
@media (min-width: 901px) {
  .morkrum-text { position: absolute; top: 0; left: 0; width: 100%; margin: 0; aspect-ratio: 2560 / 1097; display: flex; flex-direction: column; justify-content: center;
    padding-inline: max(var(--sida), (100% - 1312px) / 2); }
  .morkrum-text > h2, .morkrum-text > p { max-width: calc(38vw - max(var(--sida), (100vw - 1312px) / 2) - 32px); }
  .morkrum-text h2 { font-size: clamp(32px, 3.4vw, 56px); }
}

/* ---------------------------------------------------------------- 7. så går det till: vem som gör vad (ur A) */
.plan { list-style: none; margin: 56px 0 0; padding: 0; }
.plan li { display: grid; grid-template-columns: 72px minmax(0, 3fr) minmax(0, 5fr) 120px; column-gap: 24px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--blak); }
.plan li.plan-huvud { padding: 0 0 12px; border-bottom: 2px solid var(--blak); font: 700 var(--t-1)/1.3 var(--brod); color: var(--grafit); }
.plan li.plan-huvud span:last-child { justify-self: end; }
/* siffrorna: fyllda där du gör något, konturer där vi eller din dator gör det */
.plan .nr { font: 800 52px/.8 var(--rubrik); font-stretch: 75%; letter-spacing: -.02em; }
.plan .vi .nr { color: transparent; -webkit-text-stroke: 2px var(--blak); }
.plan h3 { font: 780 var(--t-4)/1.2 var(--rubrik); }
.plan p { font: 400 var(--t-3)/1.5 var(--brod); max-width: 52ch; }
.plan .vem { justify-self: end; padding: 5px 10px; border: 2px solid var(--blak); border-radius: 2px; font: 700 var(--t-1)/1.2 var(--rubrik); white-space: nowrap; }
.plan .du .vem { background: var(--blak); color: var(--papper); }
/* steg 6, betalningsögonblicket, framhävt i tomat */
.plan li.signal { margin: 0 -16px; padding: 28px 16px; background: var(--tomat); border-bottom: 0; }
.plan li.signal h3 { font-size: var(--t-5); line-height: 1.05; letter-spacing: -.01em; }

/* ---------------------------------------------------------------- 5. fler i huvudrollen: kopior på bordet, på papper */
.utspridda { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; margin-top: 64px; align-items: start; }
.utspridda .kopia img { aspect-ratio: 16 / 9; object-fit: cover; }
.utspridda .kopia:nth-child(1) { --lut: -1.1deg; grid-column: 1 / 8; grid-row: 1 / 3; }
.utspridda .kopia:nth-child(1) img { aspect-ratio: 4 / 3.5; }
.utspridda .kopia:nth-child(2) { --lut: 1.3deg; grid-column: 8 / 13; grid-row: 1; margin-top: 32px; }
.utspridda .kopia:nth-child(3) { --lut: -.6deg; grid-column: 8 / 12; grid-row: 2; }

/* ---------------------------------------------------------------- 8. priset: salongen med Kims film på duken (ur A)
   Salongen i gråskala, tonad i tomat utanför duken, så att den hör till fältet. Filmen på duken står i sina egna färger,
   och bänkraderna framför ligger över den (multiply). Rutan är 16:9, så bilden (1920 × 815) beskärs i sidorna: duken
   ligger då på 32,88–67,25 % av bredden och 23,19–54,59 % av höjden */
.pris-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
.pris-text { grid-column: 1 / 6; }
#prisRubrik { font-size: var(--t-6); line-height: 1; max-width: 14ch; }
.belopp-rad { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; margin-top: 20px; }
.belopp { font: 800 var(--t-8)/.85 var(--rubrik); letter-spacing: -.03em; white-space: nowrap; }
.per-film { font: 600 var(--t-4)/1 var(--rubrik); }
.reserv { margin-top: 28px; font: 780 var(--t-4)/1.25 var(--rubrik); }
.villkor { margin-top: 10px; max-width: 46ch; }
.gratis { margin-top: 10px; font-weight: 600; }
.pris-text .knapp { margin-top: 32px; }
.salong { grid-column: 6 / 13; margin: 0; }
.salong-ram { position: relative; isolation: isolate; aspect-ratio: 16 / 9; overflow: hidden; background: var(--blak); margin-right: var(--utfall); }
.salong-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: grayscale(1) contrast(1.08) brightness(1.3); }
.pa-duken { position: absolute; left: 32.88%; top: 23.19%; width: 34.37%; height: 31.4%; max-width: none; object-fit: cover; object-position: 66% 40%; mix-blend-mode: multiply; }
.salong-ton { position: absolute; inset: 0; background: var(--tomat); mix-blend-mode: multiply; pointer-events: none;
  clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 32.88% 23.19%, 67.25% 23.19%, 67.25% 54.59%, 32.88% 54.59%, 32.88% 23.19%); }

/* ---------------------------------------------------------------- 9. frågor: rubriken står kvar till vänster, från 900 px */
.fragor { margin-top: 48px; max-width: 860px; border-top: 2px solid var(--text); }
@media (min-width: 900px) {
  .fragor-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 24px; align-items: start; }
  .fragor-grid h2 { position: sticky; top: 32px; }
  .fragor-grid .fragor { margin-top: 0; max-width: none; }
}
details.fraga { border-bottom: 2px solid var(--text); }
details.fraga summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 64px; padding: 12px 0; font: 700 var(--t-4)/1.25 var(--rubrik); }
details.fraga summary::-webkit-details-marker { display: none; }
details.fraga summary::after { content: "+"; font: 400 40px/1 var(--rubrik); transition: transform var(--snabb) var(--ut); flex: none; }
details.fraga[open] summary::after { transform: rotate(45deg); }
details.fraga p { padding: 0 0 24px; max-width: 64ch; }

/* ---------------------------------------------------------------- 10. eftertexterna och den sista knappen */
.eftertexter { padding: 120px 0 72px; text-align: center; }
.eftertexter h2 { font-size: var(--t-6); letter-spacing: -.02em; }
.krediter { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; row-gap: 14px; margin: 56px auto 0; max-width: 980px; text-align: left; }
.krediter dt { text-align: right; color: var(--dimljus); font: 500 var(--t-2)/1.45 var(--brod); }
.krediter dd { margin: 0; font: 500 var(--t-3)/1.4 var(--brod); }
.krediter dd b { font: 800 var(--t-4)/1.1 var(--rubrik); }
.slutkort { display: grid; justify-items: center; gap: 20px; margin-top: 120px; padding-top: 96px; border-top: 2px solid var(--dimljus); }
.slut-etikett { font: 600 var(--t-2)/1.3 var(--brod); color: var(--dimljus); }
.slut-replik { max-width: 100%; font: 800 var(--t-7)/.95 var(--rubrik); letter-spacing: -.02em; overflow-wrap: anywhere; }
.slutkort .knapp { margin-top: 12px; min-height: 56px; padding: 0 28px; font-size: 20px; }
.slutkort .faktarad { justify-content: center; margin-top: 0; }
.slutrad { margin-top: 96px; font: 500 var(--t-2)/1.4 var(--brod); color: var(--dimljus); }
.slutrad a { display: inline-flex; align-items: center; min-height: 40px; color: var(--papper); }

/* ================================================================ smalare fönster */
@media (min-width: 901px) and (max-width: 1100px) {
  .hjalte h1 { font-size: 40px; }
  .morkrum-text p { margin-top: 14px; font-size: var(--t-2); }
  .visning-film { grid-column: 1 / 9; }
  .visning-sida { grid-column: 9 / 13; }
}
@media (max-width: 900px) {
  .hjalte-grid, .pris-grid, .papper-yta, .visning { grid-template-columns: minmax(0, 1fr); }
  .hjalte h1, .hjalte-ingress, .exempel, .filmruta, .prova { grid-column: 1 / -1; grid-row: auto; }
  /* hjälten: rubriken, exemplet med knappen, filmen, och sedan förklaringen och namnfältet (KR01) */
  .hjalte h1 { order: 1; max-width: 18ch; }
  .exempel { order: 2; }
  .filmruta { order: 3; }
  .hjalte-ingress { order: 4; margin-top: 28px; }
  .prova { order: 5; }
  .filmruta .duk-ram { margin-right: 0; }
  .avsnitt-huvud { display: block; }
  .avsnitt-huvud > .ingress { margin-top: 24px; padding: 0; }
  .papperen, .manus-ark { grid-column: 1 / -1; }
  .manus-ark { position: static; margin-top: 40px; }
  .visning-film, .visning-sida { grid-column: 1 / -1; }
  .visning-sida { margin-top: 20px; }
  .rullar { grid-template-columns: 1fr 1fr; }
  .visning-text { font-size: var(--t-3); }
  .morkrum { padding-bottom: 72px; }
  .morkrum-scen > img { aspect-ratio: 16 / 9; }
  /* beskuren från höger syns bilden från 23,8 % av bredden: panelens kant står då på 8,4 % och baljan på 20,7 % */
  .morkrum-scen::before { aspect-ratio: 16 / 9; background: linear-gradient(90deg, var(--blak) 0, var(--blak) 9.5%, rgb(27 23 20 / .6) 14%, rgb(27 23 20 / 0) 20%); }
  .pris-text, .salong { grid-column: 1 / -1; }
  .salong { order: -1; margin: 0 0 48px; }
  .salong-ram { margin-right: 0; }
}
/* tabellen på mobilen: vem står i raden med rubriken, och texten under, så att nio steg inte blir 2 000 px */
@media (max-width: 800px) {
  .plan { margin-top: 40px; }
  .plan li { grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; padding: 16px 0 18px; }
  .plan li.plan-huvud { display: none; }
  .plan .nr { grid-row: 1 / 3; font-size: 36px; }
  .plan h3 { grid-column: 2; grid-row: 1; }
  .plan .vem { grid-column: 3; grid-row: 1; align-self: start; }
  .plan p { grid-column: 2 / 4; grid-row: 2; font-size: var(--t-2); }
  .utspridda { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .utspridda .kopia:nth-child(n) { grid-column: 1 / -1; grid-row: auto; margin: 0; }
  .utspridda .kopia:nth-child(1) img { aspect-ratio: 16 / 9; }
  .utspridda .kopia:nth-child(2) { --lut: .9deg; }
}
@media (max-width: 700px) {
  .hjalte { padding: 16px 0 56px; }
  .hjalte h1 { font-size: 28px; line-height: 1.08; }
  .exempel { margin-top: 18px; padding-top: 10px; }
  .affisch { margin-top: 10px; }
  .det-har-ar { font-size: var(--t-3); }
  /* på mobilen står repliken på en rad, så att knappen och filmen får plats i första vyn */
  .replik { font-size: min(var(--t-8), 100cqi / var(--k-rad, 7.3)); min-height: 1em; white-space: nowrap; }
  .replik .ord { display: inline; }
  .exempel .knapp { margin-top: 16px; min-height: 52px; font-size: var(--t-3); width: 100%; }
  .faktarad { margin-top: 8px; }
  .filmruta { margin-top: 18px; }
  .duk-ram .spela { left: 30%; }
  .skiva { width: 60px; height: 60px; }
  .skiva::after { left: 24px; top: 19px; border-left-width: 18px; border-top-width: 11px; border-bottom-width: 11px; }
  .textremsa { font-size: var(--t-1); bottom: 8px; }
  .hjalte-ingress { font-size: var(--t-2); }

  .kapitel-avsnitt { padding: 72px 0; }
  .ingress { font-size: var(--t-3); }
  .matchklipp { margin-top: 48px; }
  .ogonlinje { left: -12px; right: -12px; }
  .kopia figcaption b { font-size: var(--t-1); }
  .ark { padding: 16px 16px 18px; }
  .ark:nth-of-type(2) { margin-left: 0; } .ark:nth-of-type(3) { margin-right: 0; }
  .ark p { font-size: var(--t-2); }
  .manus-ark { padding: 20px 16px 18px; }
  .manus-rader li { grid-template-columns: 36px minmax(0, 1fr); column-gap: 8px; }
  .manus-rader p { font-size: 20px; }
  .rullar { gap: 8px; }
  .rulle { grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 8px; padding: 12px 10px 10px; }
  .rulle-nr { font-size: 32px; }
  .rulle-namn { font-size: var(--t-2); }
  .morkrum-text { margin-top: 32px; }
  .plan li.signal { margin: 0 -12px; padding: 18px 12px 20px; }
  .plan li.signal h3 { font-size: var(--t-4); }
  .plan h3 { font-size: 20px; }
  .plan .vem { padding: 4px 8px; }
  .salong { margin: 0 calc(-1 * var(--sida)) 40px; }
  .salong .tryckrad { padding: 0 var(--sida); }
  .pris-text .knapp { width: 100%; }
  .eftertexter { padding: 80px 0 56px; }
  .eftertexter h2 { font-size: var(--t-5); }
  .krediter { column-gap: 16px; }
  .krediter dt { font-size: var(--t-1); }
  .krediter dd { font-size: var(--t-2); }
  .slutkort { margin-top: 72px; padding-top: 64px; }
  .slutkort .knapp { width: 100%; font-size: var(--t-3); }
}
/* 320 px: knapptexten står på en rad, och filmkorten står under varandra så att rubrikerna ryms i kortet */
@media (max-width: 360px) {
  .exempel .knapp, .pris-text .knapp, .slutkort .knapp { font-size: var(--t-2); }
  .exempel .knapp::after, .pris-text .knapp::after, .slutkort .knapp::after { display: none; }
  .rullar { grid-template-columns: minmax(0, 1fr); }
}

/* TR03: länken till sidan om de tekniska kraven (/krav), i mörkrummet, steg 8 och Bra att veta */
.krav-lank { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* AK16: textlänkarna i frågorna och till kraven får minst 24 px höga klickytor */
.fraga a, .krav-lank { padding-block: 2px; }