@import "./design-system/styles.css";

/* ============================================================
   SYSTEMTILLÄGG — godkänt av Mike 2026-07-31

   Enda tillägget till Dagsljus. Ligger HÄR och inte i
   design-system/, så att det överlever en framtida uppdatering
   av systemet från Claude Design — och så att det syns.

   Bakgrund: referensbilderna (Bloom, Aevum, Sunvolt) bygger sin
   premiumkänsla på generösa radier, 16–32 px. Systemet stannar
   vid 12. Vi lägger till ETT steg och tillåter piller på nav och
   knappar — inget annat ändras. Palett, typsnitt, solen som enda
   accent och hela läsbarhetsarbetet står orört.
   ============================================================ */
:root{
  --radius-xl:24px;   /* hjälteram, bildkort, stora ytor */
}

/* ============================================================
   Northbound SEO — komponentlager
   Statisk HTML/CSS-implementation av kontrakten i
   design-system/components/**. Samma komponentnamn, samma
   visuella utfall som JSX-filerna.

   REGEL: inga nya färger, typsnitt, radier eller skuggor.
   Endast tokens ur design-system/tokens/*.css.
   ============================================================ */

/* ---- Layoutprimitiver ---------------------------------- */
*,*::before,*::after{box-sizing:border-box}
img,svg{display:block;max-width:100%}
/* ============================================================
   SEKTIONSRYTM — 2026-07-31

   Problemet: --paper #FFFBF2 och --surface-card #FFFFFF skiljer
   sig 1,04:1. Det är i praktiken osynligt. Med bara de två
   värdena ligger hela sidan i den översta tjugondelen av
   tonskalan och ingenting får tyngd.

   Lösningen är inte nya färger — det är att använda de två
   värden som redan finns men stått oanvända: --surface-accent
   (solton) och framför allt --surface-inverse (bläck, 15,1:1).
   Bläcket är sidans uttrycksverktyg.
   ============================================================ */
.section{padding:var(--section-pad) 40px}
.section--card{background-color:var(--surface-card)}
.section--accent{background-color:var(--surface-accent)}
.section--ink{background-color:var(--ink)}

/* Kort behöver en synlig kant. --line (#EAE3D3) försvinner mot
   både papper och vitt; --line-strong (#D8CFBA) gör det inte. */
.card,.PackageCard,.CompassBadge,.info-card,.MethodRow .step,.sov,.ProofChip{
  border-color:var(--line-strong)}
.PackageCard--popular{border-color:var(--border-strong)}
/* På bläckband och soltonsband ärver kanten mörkerlägets linje */
.section--ink .card,.section--ink .CompassBadge,.section--ink .MethodRow .step{
  border-color:var(--border-default)}
.wrap{max-width:var(--container);margin:0 auto}
.wrap--narrow{max-width:var(--container-narrow);margin:0 auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:16px;top:-100px;z-index:100;background:var(--sun);color:var(--ink);padding:12px 16px;font:700 15px/1 var(--font-sans);text-decoration:none;border-radius:var(--radius-md)}
.skip-link:focus{top:16px}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}

h1{font:var(--type-h1);letter-spacing:var(--tracking-display)}
h2{font:var(--type-h2);letter-spacing:var(--tracking-display)}
h3{font:var(--type-h3)}
p{margin:0}

/* Svenska sammansättningar är långa — "Synlighetskompassen" är 19 tecken
   och kan inte brytas. Utan detta spräcker rubrikerna en 320 px-skärm. */
h1,h2,h3,h4,.page-h1,.sec-h2{overflow-wrap:break-word}

/* Sidrubriker enligt referenssidorna.
   OBS: sätt aldrig font-size inline här — inline vinner över
   mediafrågorna nedan och rubriken slutar krympa i mobil. */
.page-h1{margin:0;font:700 44px/1.1 var(--font-display);letter-spacing:var(--tracking-display);color:var(--text-heading);max-width:720px}
.page-h1--hero{font-size:52px;max-width:640px}
.page-lead{font:400 17px/1.6 var(--font-sans);color:var(--text-body);margin:16px 0 0;max-width:640px;text-wrap:pretty}
.page-lead--hero{font-size:18px;margin-top:20px;max-width:520px}
.sec-h2{margin:0;font:700 30px/1.2 var(--font-display);letter-spacing:var(--tracking-display);color:var(--text-heading)}
.sec-h2--lg{font-size:32px}
.sec-body{font:400 16px/1.6 var(--font-sans);color:var(--text-body);margin:16px 0 0;max-width:620px;text-wrap:pretty}
.fine{font:400 13px/1.5 var(--font-sans);color:var(--text-muted)}

/* ============================================================
   Button
   ============================================================ */
.Button{display:inline-flex;align-items:center;gap:8px;justify-content:center;
  font-family:var(--font-sans);font-weight:700;font-size:15px;line-height:1;
  border-radius:var(--radius-md);padding:13px 24px;cursor:pointer;text-decoration:none;
  border:2px solid transparent;box-sizing:border-box;
  transition:background var(--speed) var(--ease),color var(--speed) var(--ease),transform var(--speed) var(--ease)}
.Button:active{transform:scale(.98)}
.Button--sm{padding:9px 16px;font-size:14px}
.Button--lg{padding:17px 30px;font-size:17px}

/* Primär = solfylld. Guiden och Button.prompt.md ("primary is the only
   sun-filled element on a page") styr; Button.jsx:s bläckfyllda default
   är avvikaren — CTABand måste överstyra den tillbaka till sol.
   Beslut av Mike 2026-07-30. Vill du byta: ändra dessa två rader. */
.Button--primary{background:var(--sun);color:var(--ink)}
.Button--primary:hover{background:var(--accent-strong);color:var(--ink)}

.Button--secondary{background:transparent;color:var(--text-heading);border-color:var(--border-strong)}
.Button--secondary:hover{background:var(--ink);color:var(--sun-bright)}

.Button--tertiary{background:transparent;color:var(--text-heading);border-radius:0;
  padding:13px 4px;border:0;border-bottom:2px solid var(--accent)}
.Button--tertiary:hover{color:var(--accent-strong)}
.Button--tertiary.Button--lg{padding:17px 4px}
.Button--tertiary.Button--sm{padding:9px 4px}

.Button--block{display:flex;width:100%}

/* På bläckytor (CTABand): tertiär blir pappersfärgad */
[data-theme="dark"] .Button--tertiary{color:var(--paper)}
[data-theme="dark"] .Button--tertiary:hover{color:var(--sun-bright)}

/* Cirkulär ikonbricka inuti knappen — greppet ur Bloom/Sunvolt.
   Cirkeln är en form, inte en ny radie. Inverterad mot knappen:
   bläckcirkel med solpil på den solfyllda primärknappen. */
.Button__badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.9em;height:1.9em;border-radius:50%;flex:none;
  background:var(--ink);color:var(--sun-bright);
  font-size:.8em;line-height:1;margin-left:-.55em}
.Button--secondary .Button__badge{background:var(--ink);color:var(--sun-bright)}
[data-theme="dark"] .Button--primary .Button__badge{background:var(--ink);color:var(--sun-bright)}

/* Piller på knappar — godkänt tillägg 2026-07-31 */
.Button--pill{border-radius:var(--radius-pill)}

/* ============================================================
   Badge
   ============================================================ */
.Badge{display:inline-flex;align-items:center;gap:6px;
  font:700 11px/1 var(--font-sans);letter-spacing:var(--tracking-caps);text-transform:uppercase;
  padding:6px 12px;border-radius:var(--radius-pill)}
.Badge--accent{background:var(--accent);color:var(--text-on-accent)}
.Badge--neutral{background:var(--surface-accent);color:var(--text-heading)}
.Badge--outline{background:transparent;color:var(--text-heading);border:1px solid var(--line-strong)}
.Badge--ok{background:var(--ok-tint);color:var(--ok)}

/* ============================================================
   Input · Checkbox · textarea
   ============================================================ */
.Input{display:flex;flex-direction:column;gap:6px;font-family:var(--font-sans)}
.Input > span{font:600 13px/1 var(--font-sans);color:var(--text-heading)}
.Input input,.Input textarea{
  font:400 15px/1.4 var(--font-sans);color:var(--text-heading);background:var(--surface-card);
  border:1px solid var(--border-default);border-radius:var(--radius-md);padding:12px 14px;
  outline:none;width:100%;transition:border var(--speed) var(--ease)}
.Input textarea{resize:vertical;min-height:132px}
.Input input:focus,.Input textarea:focus{border-color:var(--accent);box-shadow:var(--focus-ring)}
.Input input:user-invalid,.Input textarea:user-invalid{border-color:var(--err)}
.Input .hint{font:400 12px/1.4 var(--font-sans);color:var(--text-faint)}
.Input .err{font:400 12px/1.4 var(--font-sans);color:var(--err)}
.Input .err:empty{display:none}

.Checkbox{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-family:var(--font-sans)}
.Checkbox input{position:absolute;opacity:0;width:0;height:0}
.Checkbox .box{width:20px;height:20px;flex:none;border-radius:var(--radius-sm);
  border:2px solid var(--line-strong);background:var(--surface-card);
  display:flex;align-items:center;justify-content:center;
  color:var(--sun-bright);font:700 13px/1 var(--font-sans);
  transition:all var(--speed) var(--ease);margin-top:1px}
.Checkbox .box::after{content:"✓";opacity:0}
.Checkbox input:checked + .box{border-color:var(--ink);background:var(--ink)}
.Checkbox input:checked + .box::after{opacity:1}
.Checkbox input:focus-visible + .box{box-shadow:var(--focus-ring)}
.Checkbox .txt{font:400 14px/1.5 var(--font-sans);color:var(--text-body)}

/* ============================================================
   DotGrid — 10 prickar = 100 %
   ============================================================ */
.DotGrid{display:grid;grid-template-columns:minmax(80px,auto) 1fr 52px;gap:12px 16px;
  align-items:center;font-family:var(--font-sans)}
.DotGrid .label{font:500 14px/1 var(--font-sans);color:var(--text-heading)}
.DotGrid .dots{display:flex;gap:7px}
.DotGrid .dots i{width:13px;height:13px;border-radius:50%;background:var(--dot-empty);display:block}
.DotGrid .dots i.on{background:var(--sun)}
.DotGrid .val{font:600 14px/1 var(--font-mono);color:var(--text-heading);text-align:right}
[data-theme="dark"] .DotGrid .label{color:var(--paper)}
[data-theme="dark"] .DotGrid .val{color:var(--sun-bright)}

/* Under 560 px behåller vi en rad per motor men krymper prickarna:
   10×9 px + 9×3 px mellanrum = 117 px mätare, som tillsammans med
   etikett (≤62 px) och värde ryms i 232 px innehållsbredd (320 px-vy).
   OBS: order-tricket funkar inte här — grid auto-placering sorterar då
   ALLA etiketter före ALLA värden i stället för per rad. */
@media(max-width:560px){
  .DotGrid{grid-template-columns:auto 1fr auto;gap:12px 10px}
  .DotGrid .label{font-size:13px}
  .DotGrid .dots{gap:3px}
  .DotGrid .dots i{width:9px;height:9px}
  .DotGrid .val{font-size:13px}
}

/* ============================================================
   PhotoFigure — fotografi med bildtext
   ============================================================ */
.PhotoFigure{margin:0}
.PhotoFigure img{display:block;width:100%;height:auto;border-radius:var(--radius-xl);
  border:1px solid var(--border-default)}
.PhotoFigure figcaption{font:400 13px/1.5 var(--font-sans);color:var(--text-muted);margin-top:10px}

/* ============================================================
   StatDelta
   ============================================================ */
.StatDelta{display:flex;flex-direction:column;gap:8px;font-family:var(--font-sans)}
.StatDelta .label{font:600 12px/1 var(--font-sans);letter-spacing:var(--tracking-caps);
  text-transform:uppercase;color:var(--text-faint)}
.StatDelta .row{display:flex;align-items:baseline;gap:10px}
.StatDelta .before{font:500 18px/1 var(--font-sans);color:var(--text-faint);text-decoration:line-through}
.StatDelta .after{font:700 36px/1 var(--font-sans);letter-spacing:var(--tracking-data);color:var(--text-heading)}
.StatDelta .arrow{font:600 14px/1 var(--font-mono);color:var(--ok)}
.StatDelta .note{font:400 13px/1.4 var(--font-sans);color:var(--text-muted)}

/* ============================================================
   Header
   ============================================================ */
.Header{background:var(--surface-page);border-bottom:1px solid var(--border-default);font-family:var(--font-sans)}
.Header__bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 40px}
.Header__logo{display:flex;align-items:center;gap:9px;font:700 24px/1 var(--font-display);
  letter-spacing:var(--tracking-display);color:var(--ink);text-decoration:none}
.Header__logo svg{flex:none;width:30px;height:30px}
.Header__nav{display:flex;gap:24px;align-items:center}
/* Pillernavigering — godkänt tillägg 2026-07-31. Greppet ur
   Bloom och Sunvolt: länkarna är chips, den aktiva är fylld. */
.Header__nav{gap:6px}
.Header__nav a{font:500 15px/1 var(--font-sans);color:var(--text-heading);text-decoration:none;
  padding:10px 16px;border-radius:var(--radius-pill);
  transition:background var(--speed) var(--ease),color var(--speed) var(--ease)}
.Header__nav a:hover{background:var(--surface-accent)}
.Header__nav a[aria-current="page"]{background:var(--ink);color:var(--paper)}
.Header__nav a[aria-current="page"]:hover{background:var(--ink)}
.Header__toggle{display:none;background:none;border:1px solid var(--line-strong);
  border-radius:var(--radius-md);padding:10px 14px;cursor:pointer;
  font:700 16px/1 var(--font-sans);color:var(--ink);min-height:44px}

@media(max-width:1120px){
  /* Menyn måste falla ner på egen rad — annars konkurrerar den om
     bredden med logotyp och hamburgare och trycker ut sidan. */
  .Header__bar{padding:14px 20px;flex-wrap:wrap}
  .Header__toggle{display:block}
  .Header__nav{flex:1 0 100%;flex-direction:column;align-items:stretch;gap:4px;
    margin-top:14px;padding:8px 0 6px;border-top:1px solid var(--border-default)}
  .Header__nav[hidden]{display:none}
  .Header__nav a{font-size:17px;padding:14px 16px;border-radius:var(--radius-pill)}
  .Header__nav .Button{margin-top:14px}
}

/* ============================================================
   HeroFrame — grepp A + B ur referenserna
   Blödande foto i en rundad scen; innehållet i en SOLID panel
   ovanpå. Systemet är uttryckligt: "Protection gradients: none —
   flat capsule/solid surfaces instead." Därför en fylld panel i
   stället för skuggslöja — bättre läsbarhet, och på system.
   ============================================================ */
.HeroFrame{padding:var(--space-6) 40px var(--space-9)}
.HeroFrame__stage{
  position:relative;
  max-width:var(--container);margin:0 auto;
  border-radius:var(--radius-xl);overflow:hidden;
  min-height:clamp(560px,72vh,760px);
  padding:clamp(20px,4vw,44px);
  display:grid;align-items:end;
  background-color:var(--sunken);
  background-image:var(--hero-img,none);
  background-size:cover;background-position:center;
  box-shadow:var(--shadow-raised)}

/* Platshållare tills fotot finns — ta bort klassen när bilden är på plats. */
.HeroFrame__stage.is-placeholder::before{
  content:"Hjältebild placeras här — liggande, minst 2400 × 1400, himmel eller jämn yta i övre halvan";
  position:absolute;inset:16px;border:2px dashed var(--line-strong);
  border-radius:var(--radius-lg);
  display:flex;align-items:flex-start;justify-content:center;
  padding:20px 32px;text-align:center;
  font:500 13px/1.5 var(--font-sans);color:var(--text-muted)}

.HeroFrame__panel{
  position:relative;z-index:2;
  background:var(--ink);border-radius:var(--radius-xl);
  padding:clamp(24px,3.5vw,44px);
  max-width:660px}
.HeroFrame__panel .eyebrow{
  font:600 12px/1 var(--font-sans);letter-spacing:var(--tracking-caps);
  text-transform:uppercase;color:var(--sun-bright);display:block;margin-bottom:18px}
/* 5,5vw i stället för 4,4 — annars faller rubriken till 34 px på
   surfplatta, och skalkontrasten är hela premiumkänslan. */
.HeroFrame__panel h1{
  font:700 clamp(32px,5.5vw,56px)/1.08 var(--font-display);
  letter-spacing:var(--tracking-display);color:var(--paper);margin:0}
.HeroFrame__panel p{
  font:400 clamp(15px,1.3vw,18px)/1.6 var(--font-sans);
  color:var(--text-body);margin:18px 0 0;max-width:46ch}
.HeroFrame__panel .cta-row{margin-top:28px}

/* ProofChips — grepp F. Aevums specchips, men med VÅRA siffror. */
.ProofChips{
  position:absolute;top:clamp(20px,4vw,44px);right:clamp(20px,4vw,44px);
  z-index:2;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.ProofChips__label{
  font:600 11px/1 var(--font-sans);letter-spacing:var(--tracking-caps);
  text-transform:uppercase;color:var(--text-heading);
  background:var(--surface-card);border-radius:var(--radius-pill);
  padding:7px 13px;box-shadow:var(--shadow-card)}
.ProofChip{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--surface-card);border-radius:var(--radius-pill);
  padding:8px 15px;box-shadow:var(--shadow-card);
  font:500 13px/1 var(--font-sans);color:var(--text-heading);white-space:nowrap}
.ProofChip b{font-weight:700;letter-spacing:var(--tracking-data)}
.ProofChip .dot{width:8px;height:8px;border-radius:50%;background:var(--sun);flex:none}

@media(max-width:900px){
  .HeroFrame{padding:var(--space-5) 20px var(--space-8)}
  .HeroFrame__stage{min-height:clamp(520px,86vh,720px);align-items:end}
  .ProofChips{position:static;flex-direction:row;flex-wrap:wrap;
    align-items:flex-start;justify-content:flex-start;margin-bottom:16px}
  .HeroFrame__panel{max-width:none}
  .HeroFrame__stage.is-placeholder::before{font-size:12px;padding:14px 18px}
}

/* ---- Variant C: helbredd (full bleed) -------------------
   Bilden går kant i kant, ingen ram, ingen radie. Innehållet
   ligger kvar på containerns vänsterkant så hjälten linjerar
   med resten av sidan — annars tappar sidan sin lodräta linje.

   Höjden växer med skärmen men taklagd på 820 px, av tre skäl:
   · Svaret ska synas. Briefens answer-first-regel faller om
     hjälten äter hela vyn.
   · Beskärningen skenar annars. Bilden är 1,90 i förhållande;
     en 2560-bred scen på fast höjd visar bara en smal remsa.
   · Källan är 1727 px bred. Bredare scen = uppskalning.        */
.HeroFrame--bleed{padding:0}
.HeroFrame--bleed .HeroFrame__stage{
  max-width:none;
  border-radius:0;
  box-shadow:none;
  /* ── HJÄLTENS HÖJD — enda ratten ──────────────────────
     Ändra --hero-h nedan. Tre lägen värda att känna till:

       min(46vw, 80vh)   nuvarande. En remsa av nästa sektion
                         syns = scroll-signal, och svaret ryms
                         ovanför vikningen (answer-first).
       min(46vw, 92vh)   nästan helskärm. Bara en aning syns.
       100svh            helskärm. svh, inte vh — annars hoppar
                         den när mobilens adressfält glider undan.

     Går du mot helskärm: svaret hamnar under vikningen, vilket
     bryter briefens answer-first-regel. Det är ditt val, men
     det är den kostnaden du betalar.                            */
  --hero-h:clamp(520px, min(46vw, 80vh), 1200px);
  min-height:var(--hero-h);
  /* 100% inte 100vw: 100vw räknar in rullisten och sköt panelen
     7 px ur linje mot resten av sidan. */
  padding-inline:max(40px, calc((100% - var(--container)) / 2));
  padding-block:clamp(28px,4vw,56px)}
.HeroFrame--bleed .ProofChips{
  top:clamp(28px,4vw,56px);
  right:max(40px, calc((100% - var(--container)) / 2))}

/* Brytpunkten måste följa .section (640), inte 900 — annars
   linjerar hjälten inte med sidan mellan 640 och 900 px. */
@media(max-width:640px){
  .HeroFrame--bleed .HeroFrame__stage{
    /* svh, inte vh: annars ändrar hjälten höjd när mobilens
       adressfält glider undan vid scroll. */
    --hero-h:clamp(480px, 76svh, 680px);
    padding-inline:20px}
  .HeroFrame--bleed .ProofChips{right:auto}
}

/* ---- Variant B: "öppen" hjälte -------------------------
   Typografin ligger DIREKT på bilden, utan panel — Blooms grepp.
   Fungerar här därför att bilden har en ljus, jämn himmel i övre
   halvan: bläck på ljus himmel ger hög kontrast, till skillnad
   från Blooms vita text på ljus bild.
   ⚠ Kontrasten beror på de faktiska pixlarna och måste mätas mot
   den riktiga bilden. Håller den inte läggs en solid pappers-
   kapsel bakom texten — samma lösning som systemet föreskriver. */
.HeroFrame--open .HeroFrame__stage{
  min-height:clamp(440px,60vh,620px);
  align-items:start;
  background-position:center 62%}
.HeroFrame--open .HeroFrame__panel{
  background:none;padding:0;max-width:720px;border-radius:0}
/* Ögonbrynet är bara 12 px och måste därför klara 4,5:1. I --ink-2
   mätte det 3,91 mot himlen; i full --ink blir det 6,9. Stor text
   har lägre krav och klarar sig — den lilla gör det inte. */
.HeroFrame--open .HeroFrame__panel .eyebrow{color:var(--ink)}
.HeroFrame--open .HeroFrame__panel h1{color:var(--ink)}
.HeroFrame--open .HeroFrame__panel p{color:var(--ink-2)}
.HeroFrame--open .ProofChips{top:auto;bottom:clamp(20px,4vw,44px)}

/* Pappers­kapsel bakom texten. PÅSLAGEN igen 2026-07-31.

   Mätserie på fyra hjältebilder:
     1 · landskap        4,48  → underkänd, kapsel krävdes
     2 · landskap        6,34  → klarade text direkt på bild
     3 · stadsvy         5,91  → klarade text direkt på bild
     4 · arkitekturdetalj 1,35 med mörk text
                          1,31 med ljus text  → INGEN textfärg fungerar

   Bild 4 har både ljus himmel och djup skugga inuti varje textruta.
   Då finns ingen färg att kontrastera mot, och en solid yta bakom
   texten är enda lösningen — precis vad systemet föreskriver:
   "flat capsule/solid surfaces instead".

   OBS specificitet: .HeroFrame--open .HeroFrame__panel är två
   klasser och slår en ensam .HeroFrame__panel--capsule. Kapseln
   måste därför skrivas med samma tyngd, annars ser den ut att
   vara påslagen i HTML men gör ingenting. */
.HeroFrame--open .HeroFrame__panel--capsule,
.HeroFrame__panel--capsule{
  background:var(--paper);border-radius:var(--radius-xl);
  padding:clamp(22px,3vw,38px);
  box-shadow:var(--shadow-card)}

/* ---- Hjältebilden ---------------------------------------
   Lyktan, vald av Mike 2026-08-01. Källa 1984 × 793 (2,50) mot
   scenens 2,15 — cover beskär därför i SIDLED, noll vertikalt, och
   bilden renderar ned (0,79× på 1360) i stället för upp. All text
   ligger på solida ytor: h1 17,23:1 mot bläckpanelen, chipsen 17,79:1
   mot sina vita piller. Ingen text rör fotot.
   Föregångaren hero.* ligger kvar i assets/img/ som reserv.        */
.HeroFrame__stage.has-hero{
  background-image:url('/assets/img/gatlykta-fasad-kvallsljus.jpg');
  background-image:image-set(
    url('/assets/img/gatlykta-fasad-kvallsljus.webp') type('image/webp'),
    url('/assets/img/gatlykta-fasad-kvallsljus.jpg')  type('image/jpeg'))}
.HeroFrame__stage.has-hero::before{content:none}

/* Mindre skärm → mindre fil. 53 KB i stället för 96 KB på mobil. */
@media(max-width:700px){
  .HeroFrame__stage.has-hero{
    background-image:url('/assets/img/gatlykta-fasad-kvallsljus-1000.jpg');
    background-image:image-set(
      url('/assets/img/gatlykta-fasad-kvallsljus-1000.webp') type('image/webp'),
      url('/assets/img/gatlykta-fasad-kvallsljus-1000.jpg')  type('image/jpeg'))}
}
@media(min-width:701px) and (max-width:1100px){
  .HeroFrame__stage.has-hero{
    background-image:url('/assets/img/gatlykta-fasad-kvallsljus-1400.jpg');
    background-image:image-set(
      url('/assets/img/gatlykta-fasad-kvallsljus-1400.webp') type('image/webp'),
      url('/assets/img/gatlykta-fasad-kvallsljus-1400.jpg')  type('image/jpeg'))}
}

@media(max-width:900px){
  .HeroFrame--open .HeroFrame__stage{align-items:start}
  .HeroFrame--open .ProofChips{margin:20px 0 0}
}

/* Extra luft på de stora sektionerna — referenserna andas mer än 96 px */
.section--airy{padding-block:var(--space-10)}
@media(max-width:640px){.section--airy{padding-block:var(--space-8)}}

/* ============================================================
   FoundingBanner
   ============================================================ */
.FoundingBanner{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  background:var(--surface-accent);border-bottom:1px solid var(--line-strong);
  padding:10px 40px;font-family:var(--font-sans)}
.FoundingBanner[hidden]{display:none}
.FoundingBanner span{font:500 14px/1.4 var(--font-sans);color:var(--text-heading)}
.FoundingBanner a{font:700 14px/1 var(--font-sans);color:var(--accent-strong)}
.FoundingBanner button{background:none;border:0;cursor:pointer;
  font:400 16px/1 var(--font-sans);color:var(--text-muted);margin-left:12px;
  min-width:44px;min-height:44px}

/* ============================================================
   MethodRow
   ============================================================ */
.MethodRow{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;font-family:var(--font-sans)}
.MethodRow .step{background:var(--surface-card);border:1px solid var(--border-default);
  border-radius:var(--radius-md);padding:20px}
.MethodRow .step.is-active{background:var(--surface-accent)}
.MethodRow .n{font:600 12px/1 var(--font-mono);color:var(--accent-strong)}
.MethodRow .t{font:700 18px/1 var(--font-display);color:var(--text-heading);margin:8px 0}
.MethodRow .t .arr{color:var(--sun);margin-left:8px}
.MethodRow .d{font:400 13px/1.5 var(--font-sans);color:var(--text-body);margin:0}
@media(max-width:900px){.MethodRow{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.MethodRow{grid-template-columns:1fr}}

/* ============================================================
   ReportFrame
   ============================================================ */
.ReportFrame{background:var(--ink);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-raised);font-family:var(--font-sans)}
.ReportFrame__bar{display:flex;align-items:center;gap:10px;padding:14px 20px;
  border-bottom:1px solid var(--border-default)}
.ReportFrame__logo{display:flex;align-items:center;gap:7px;
  font:700 15px/1 var(--font-display);color:var(--sun-bright)}
.ReportFrame__logo svg{flex:none;width:20px;height:20px}
.ReportFrame__title{font:500 12px/1 var(--font-mono);color:var(--text-muted);margin-left:auto}
.ReportFrame__body{padding:24px}
@media(max-width:560px){.ReportFrame__body{padding:20px 16px}}
.ReportFrame__body p{font:400 12px/1.5 var(--font-sans);color:var(--text-muted);margin:18px 0 0}

/* ============================================================
   PackageCard
   ============================================================ */
.PackageCard{position:relative;background:var(--surface-card);
  border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:28px;
  display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-card);font-family:var(--font-sans)}
.PackageCard--popular{border:2px solid var(--border-strong)}
.PackageCard .Badge{position:absolute;top:-13px;left:22px}
.PackageCard .name{font:700 19px/1 var(--font-display);letter-spacing:var(--tracking-caps);color:var(--text-heading)}
.PackageCard--popular .name{margin-top:4px}
.PackageCard .price{font:700 30px/1 var(--font-sans);letter-spacing:var(--tracking-data);color:var(--text-heading)}
.PackageCard .price small{font:400 14px/1 var(--font-sans);color:var(--text-muted)}
.PackageCard .tagline{font:400 14px/1.5 var(--font-sans);color:var(--text-body);margin:0}
.PackageCard ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.PackageCard li{font:400 14px/1.4 var(--font-sans);color:var(--text-body);display:flex;gap:9px}
.PackageCard li::before{content:"✓";color:var(--accent-strong);font-weight:700;flex:none}
.PackageCard .Button{margin-top:auto}

/* ============================================================
   CompassBadge
   ============================================================ */
.CompassBadge{display:inline-flex;flex-direction:column;gap:4px;background:var(--surface-card);
  border:1px solid var(--border-default);border-radius:var(--radius-md);padding:14px 18px;
  font-family:var(--font-sans)}
.CompassBadge .top{display:flex;align-items:center;gap:8px}
.CompassBadge .dot{width:10px;height:10px;border-radius:50%;background:var(--sun);flex:none}
.CompassBadge .name{font:700 15px/1 var(--font-sans);color:var(--text-heading)}
.CompassBadge .desc{font:400 13px/1.4 var(--font-sans);color:var(--text-muted);padding-left:18px}

/* ============================================================
   FAQItem  (semantiskt <details>)
   ============================================================ */
.FAQItem{border-bottom:1px solid var(--border-default);font-family:var(--font-sans)}
.FAQItem summary{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:20px 4px;cursor:pointer;text-align:left;list-style:none}
.FAQItem summary::-webkit-details-marker{display:none}
.FAQItem summary span{font:700 16px/1.4 var(--font-sans);color:var(--text-heading)}
.FAQItem summary::after{content:"+";font:400 22px/1 var(--font-sans);color:var(--accent-strong);
  flex:none;transition:transform var(--speed) var(--ease)}
.FAQItem[open] summary::after{transform:rotate(45deg)}
.FAQItem p{font:400 15px/1.6 var(--font-sans);color:var(--text-body);margin:0 4px 20px;max-width:680px}

/* ============================================================
   CTABand
   ============================================================ */
/* CTA-bandet är ett fristående bläckkort på pappersgrunden (beslut Mike
   2026-08-27) — luften runt kortet skiljer det från sidfotens bläckyta,
   som annars smälter ihop med bandet till en enda svart massa. */
.CTABand{background:transparent;padding:16px 40px 96px;font-family:var(--font-sans)}
.CTABand .inner{max-width:var(--container);margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:40px;flex-wrap:wrap;
  background:var(--ink);border-radius:var(--radius-xl);padding:56px}
.CTABand h2{font:700 30px/1.2 var(--font-display);letter-spacing:var(--tracking-display);
  color:var(--paper);margin:0;max-width:560px}
.CTABand p{font:400 16px/1.6 var(--font-sans);color:var(--text-body);margin:12px 0 0;max-width:560px}
.CTABand .actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}

/* ============================================================
   Footer
   ============================================================ */
.Footer{background:var(--ink);padding:64px 40px 32px;font-family:var(--font-sans)}
.Footer__grid{display:grid;grid-template-columns:2fr 1.1fr .7fr 1fr 1fr;gap:40px;
  max-width:var(--container);margin:0 auto}
.Footer__logo{display:flex;align-items:center;gap:10px;font:700 26px/1 var(--font-display);
  letter-spacing:var(--tracking-display);color:var(--sun-bright)}
.Footer__logo svg{flex:none;width:32px;height:32px}
.Footer .blurb{font:400 14px/1.6 var(--font-sans);color:var(--text-body);margin:8px 0 0;max-width:320px}
.Footer .col{display:flex;flex-direction:column;gap:10px}
.Footer h2{font:700 13px/1 var(--font-sans);letter-spacing:var(--tracking-caps);
  text-transform:uppercase;color:var(--paper);margin:0 0 6px}
.Footer a{font:400 14px/1.4 var(--font-sans);color:var(--text-body);text-decoration:none}
.Footer a:hover{color:var(--sun-bright)}
.Footer a.Footer__logo{font:700 26px/1 var(--font-display);letter-spacing:var(--tracking-display);color:var(--sun-bright);text-decoration:none}
.Footer a.Footer__logo:hover{color:var(--sun-bright);opacity:.85}
.Footer address{font:500 13px/1.7 var(--font-sans);color:var(--text-body);font-style:normal}
.Footer__bottom{max-width:var(--container);margin:48px auto 0;padding-top:24px;
  border-top:1px solid var(--border-default);display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:12px;font:400 13px/1 var(--font-sans);color:var(--text-body)}
.Footer__bottom .links{display:flex;gap:20px}
/* Rutnätsceller har min-width:auto som default och krymper därför inte
   under sitt innehåll — e-postadressen tryckte ut sidan 26 px i mobil. */
.Footer__grid > *{min-width:0}
.Footer a,.Footer address{overflow-wrap:anywhere}
@media(max-width:760px){.Footer__grid{grid-template-columns:1fr 1fr;gap:32px 24px}}
@media(max-width:520px){.Footer__grid{grid-template-columns:1fr}}

/* ============================================================
   Sidmönster som referenssidorna använder
   ============================================================ */
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center}
.split--even{grid-template-columns:1fr 1fr}
.split--wide{grid-template-columns:1.2fr 1fr}
.split--top{align-items:start}
@media(max-width:900px){.split,.split--even,.split--wide{grid-template-columns:1fr;gap:40px}}

.pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
@media(max-width:1000px){.pkg-grid{grid-template-columns:1fr}}

.cta-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:28px}

/* Motorchipsen i hjälten */
.engines{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:32px;padding:0;list-style:none}
.engines .lead-in{font:500 13px/1 var(--font-sans);color:var(--text-faint);margin-right:4px}
.engines li{font:500 13px/1 var(--font-sans);color:var(--text-heading);background:var(--surface-card);
  border:1px solid var(--border-default);border-radius:var(--radius-pill);padding:7px 13px}

/* Prisraderna på Hem */
.price-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;
  border-bottom:1px solid var(--border-default);flex-wrap:wrap}
.price-row .nm{display:flex;align-items:center;gap:12px}
.price-row .nm b{font:700 17px/1 var(--font-sans);letter-spacing:var(--tracking-caps);color:var(--text-heading)}
.price-row .amt{font:700 18px/1 var(--font-sans);letter-spacing:var(--tracking-data);color:var(--text-heading)}

/* Faserna på Så funkar det */
.phase{display:grid;grid-template-columns:180px 1fr;gap:40px;padding-bottom:40px;
  border-bottom:1px solid var(--border-default)}
.phase .n{font:500 13px/1 var(--font-sans);color:var(--text-faint)}
.phase h2{margin:8px 0 0}
.phase .sees{margin:14px 0 0;font:500 14px/1.5 var(--font-sans);color:var(--text-heading);max-width:620px}
.phase .sees b{border-bottom:2px solid var(--sun);padding-bottom:1px;font-weight:500}
@media(max-width:760px){.phase{grid-template-columns:1fr;gap:16px}}

/* Kontaktkort */
.info-card{background:var(--surface-card);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-card)}
.info-card--accent{background:var(--sun-tint);box-shadow:none}
.info-card .kicker{margin:0;font:700 13px/1 var(--font-sans);letter-spacing:var(--tracking-caps);
  text-transform:uppercase;color:var(--text-faint)}
.info-card .rows{display:flex;flex-direction:column;gap:10px;margin-top:16px;
  font:400 14.5px/1.5 var(--font-sans);color:var(--text-body)}
.info-card .rows .muted{font:500 13px/1.5 var(--font-sans);color:var(--text-muted)}

.card-form{background:var(--surface-card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:32px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:18px;
  margin-top:36px;max-width:560px}
.field-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.field-2{grid-template-columns:1fr}}
.tack{background:var(--surface-card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:48px;text-align:center;box-shadow:var(--shadow-card);margin-top:36px}
.tack[hidden]{display:none}
.tack h2{margin:0;font:700 26px/1.2 var(--font-display);color:var(--text-heading)}
.tack p{margin:14px 0 0;font:400 15px/1.6 var(--font-sans);color:var(--text-body)}

/* Honungsfälla — samma mönster som den befintliga funneln */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Platshållare som måste ersättas före publicering */
.todo{background:var(--surface-accent);border-bottom:1px dashed var(--accent-strong);
  padding:1px 4px;border-radius:var(--radius-sm)}

@media(max-width:640px){
  .section{padding:var(--space-8) 20px}
  .CTABand{padding:12px 20px 64px}
  .CTABand .inner{padding:32px 24px}
  .Footer{padding:var(--space-8) 20px 32px}
  .page-h1,.page-h1--hero{font-size:32px}
  .page-lead,.page-lead--hero{font-size:16px}
  .sec-h2,.sec-h2--lg,.CTABand h2{font-size:24px}
  .StatDelta .after{font-size:30px}
  .PackageCard .price{font-size:26px}
}

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

/* ============================================================
   LÄSBARHET — beslut 2026-07-31

   Problemet: --accent-strong (#D98F00) och --text-faint (#8A93A0)
   ger 2,4–3,1:1 mot papper och vitt. Kravet är 4,5:1.

   Principen: färgen bär inte längre TEXT — den bär FORM.
   Solen sitter kvar där den är stark: fyllda knappar, ★-brickan,
   prickarna i rapporten, understrykningen under aktiv menypost.
   Den slutar bara vara textfärg, där den är för ljus.

   Inga nya färger. Inga ändringar i design-system/.
   Endast andra tokens ur systemets egen palett.
   ============================================================ */

/* Ljusgrå etiketter → ett steg mörkare (--text-muted, 5,89:1 mot papper) */
.Input .hint,
.StatDelta .label,
.StatDelta .before,
.engines .lead-in,
.phase .n,
.info-card .kicker{color:var(--text-muted)}

/* Text i accentfärg → bläck. Solen finns kvar som ram/understrykning.
   OBS: aktiv menypost är sedan 2026-07-31 ett FYLLT bläckpiller med
   pappersfärgad text (14,9:1). Den ska därför INTE tvingas till
   text-heading här — det vore bläck på bläck. */
.Header__nav a[aria-current="page"]{color:var(--paper)}
.MethodRow .n{color:var(--text-muted)}
.FoundingBanner a{color:var(--text-heading);text-decoration:underline;
  text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px}
.PackageCard li::before{color:var(--text-heading)}
.FAQItem summary::after{color:var(--text-heading)}

/* Hovring får inte heller hamna under kravet: understrykningen mörknar
   i stället för att texten bleknar till accentfärg. */
a:hover{color:var(--text-heading);text-decoration-color:var(--border-strong)}
.Button--tertiary:hover{color:var(--text-heading);border-bottom-color:var(--border-strong)}
.Footer a:hover{color:var(--sun-bright)}          /* på bläck — 10:1, redan bra */
[data-theme="dark"] a:hover{color:var(--sun-bright)}

/* ============================================================
   JURIDISK PROSA — /integritetspolicy/ (2026-08-07)
   Kort på smal spalt. Endast befintliga tokens, inga nya färger.
   ============================================================ */
.legal{display:flex;flex-direction:column;gap:18px;margin-top:40px}
.legal .card h2{margin:0 0 10px;font:700 20px/1.3 var(--font-display);letter-spacing:var(--tracking-display);color:var(--text-heading)}
.legal .card p{margin:0;font:400 15px/1.65 var(--font-sans);color:var(--text-body);text-wrap:pretty}
.legal .card p+p{margin-top:10px}
.legal .card ul{margin:8px 0 0;padding-left:20px}
.legal .card li{margin:6px 0;font:400 15px/1.65 var(--font-sans);color:var(--text-body);text-wrap:pretty}
.legal .card li::marker{color:var(--text-muted)}
.legal .card--tldr{background:var(--surface-accent)}
.legal-updated{font:400 13px/1.5 var(--font-sans);color:var(--text-muted);margin:24px 0 0}

/* ============================================================
   RÖRELSELAGRET — infört 2026-08-01 enligt MOTION-PLAN-LEAN.md

   Ett grepp (toning + lyft) i tre tempon, plus en header som
   svarar kontinuerligt på skroll, plus prickfyllningen som
   sidans enda dataögonblick.

   REGEL 2 I PLANEN, OCH DEN ÄR ICKE FÖRHANDLINGSBAR:
   allt nedan är scopat under html[data-motion="on"], som app.js
   sätter först när JS kör OCH besökaren inte bett om reducerad
   rörelse. Utan JS, för en crawler, eller med reducerad rörelse
   existerar inte en enda regel här — sidan renderas färdig.
   Prickarna ligger i markup som .on och ritas bara TOMMA av
   lagret, aldrig tvärtom. Det finns inga räknare någonstans:
   talen är alltid sina riktiga värden, i alla lägen.
   ============================================================ */
html[data-motion="on"]{
  --rise:16px;          /* text  */
  --rise-card:22px;     /* kort  */
  --speed-enter:520ms;  /* ankomst — enda systemtillägget */
  --settle:cubic-bezier(.16,1,.3,1);
}
html[data-motion="on"] [data-rise]{
  opacity:0;transform:translateY(var(--rise));
  transition:opacity var(--speed-enter) var(--settle),
             transform var(--speed-enter) var(--settle);
  transition-delay:var(--d,0ms)}
html[data-motion="on"] [data-rise="card"]{transform:translateY(var(--rise-card))}
html[data-motion="on"] [data-rise].is-in{opacity:1;transform:none}

html[data-motion="on"] .DotGrid .dots i.on{background:var(--dot-empty);
  transition:background 200ms var(--settle)}
html[data-motion="on"] .DotGrid .dots i.on.is-lit{background:var(--sun)}

/* ---- Header: det enda som svarar kontinuerligt -------------- */
.Header{position:sticky;top:0;z-index:50;
  transition:background-color 200ms var(--ease),border-color 200ms var(--ease),
             box-shadow 200ms var(--ease)}
.Header__bar{transition:padding 200ms var(--ease)}
.Header__logo svg{transition:width 200ms var(--ease),height 200ms var(--ease)}
.Header:not(.is-condensed){border-bottom-color:transparent;box-shadow:none}
.Header.is-condensed .Header__bar{padding-top:12px;padding-bottom:12px}
.Header.is-condensed .Header__logo svg{width:26px;height:26px}
.Header.is-condensed{box-shadow:var(--shadow-card)}

/* Bläckläget. Utan raden för aktiv menypost blir den bläck på
   bläck och försvinner — pillen vänder därför till solfylld med
   bläcktext, 8,58:1. Fyllning, inte textfärg: på system. */
.Header.is-onink{background:var(--ink);border-bottom-color:rgba(255,255,255,.14)}
.Header.is-onink .Header__logo{color:var(--paper)}
.Header.is-onink .Header__nav a:not(.Button){color:var(--paper)}
.Header.is-onink .Header__nav a[aria-current="page"]{background:var(--sun);color:var(--ink)}
.Header.is-onink .Header__nav a:not(.Button):hover{background:rgba(255,255,255,.12)}
.Header.is-onink .Header__toggle{color:var(--paper);border-color:rgba(255,255,255,.28)}

/* Den fasta baren skulle annars täcka varje ankarmål */
:target,[id]{scroll-margin-top:88px}
html{scroll-behavior:smooth}

/* FAQ: äkta höjdövergång där webbläsaren stöder det. Safari och
   Firefox faller tillbaka på omedelbar öppning = dagens beteende.
   Ingen regression, ingen JS. */
@supports (interpolate-size:allow-keywords){
  html[data-motion="on"]{interpolate-size:allow-keywords}
  html[data-motion="on"] .FAQItem::details-content{
    height:0;overflow:hidden;
    transition:height 260ms var(--settle),content-visibility 260ms allow-discrete}
  html[data-motion="on"] .FAQItem[open]::details-content{height:auto}
}

/* FoundingBanner kollapsar i stället för att snäppa bort */
.FoundingBanner{transition:height 240ms var(--ease),opacity 200ms var(--ease)}

@media(prefers-reduced-motion:reduce){
  .Header,.Header__bar,.Header__logo svg,.FoundingBanner{transition:none}
  html{scroll-behavior:auto}
}