/* ============================================================
   Claude · guide — editorial / cinematic design system
   Inspirerat av Apples typografi-rytm och SpaceX helbredds-drama,
   anpassat till den varma akvarellen.
   ============================================================ */

:root {
  --paper:      #f3eddf;   /* ren, varm canvas för innehåll */
  --paper-2:    #ece3d0;   /* alternerande ton */
  --ink:        #1f1b14;   /* djup, nästan svart text */
  --ink-soft:   #574f42;
  /* 4.74:1 mot --paper, 5.08:1 mot --panel. Var #8c8473, som gav 3.18:1 och
     underkände WCAG AA för den småtext (.79–.86rem) den används på. */
  --ink-faint:  #6f6858;
  --accent:     #b85c38;   /* terrakotta, sparsamt */
  /* Semantiskt fel — inte en andra accentfärg, utan en djupare röd i samma
     varma familj. Måste vara skiljbar från --accent-deep, som markerar lyckat
     utfall: förut låg fel på #b94a3b, några nyanser från accenten, så de två
     tillstånden såg likadana ut. 6.86:1 mot --panel. */
  --danger:     #a3231d;
  /* Footern är systemets enda permanent mörka yta i det ljusa temat och har
     därför en egen ramp snarare än att låna det mörka temats. */
  --footer-bg:       #1c1810;
  --footer-ink:      #e9e0cd;
  --footer-ink-soft: #a89f8c;
  --footer-ink-faint:#8f8674;  /* noter och copyright, 4.91:1 mot --footer-bg */
  --footer-link:     #cfc6b2;
  --footer-brand:    #fff;   /* varumarkesnamnet ar footerns ljusaste ton */
  --cream:      #f7f1e4;   /* text på mörk bild */
  --accent-on-dark: #e8a074; /* terrakotta som håller mot mörkt underlag */
  /* Etikettext på mättad terrakottafyllning — pills, badges, nav-CTA.
     DESIGN.md §Colors dokumenterar rollen; det här ger den ett namn.
     Vitt hör bara hit, aldrig som yta och aldrig som text på papper. */
  --on-accent:  #fff;

  /* Text över bild: skuggan är ett systemvärde, inte pynt. Den lyfter
     lokal kontrast där motivet växlar ton under en bokstav. */
  --shadow-text:    0 2px 24px rgba(20, 16, 10, .38);
  --shadow-text-sm: 0 1px 12px rgba(20, 16, 10, .5);
  /* Tredje steget: tät gloria för liten text som korsar hela akvarellens
     tonomfång i en och samma kolumn. De mjuka varianterna ovan räcker för
     stora bokstäver mot mörk grund. Men en lodrät rad 0,62rem mono ligger
     samtidigt över ljus himmel, mellantonade berg och mörk ås — ingen
     enskild textfärg klarar alla tre. Glorian löser det i stället per
     tecken: den bär med sig sitt eget mörka underlag, så cream mäts mot
     skuggan och inte mot motivet. Därför tät och opak, inte diffus. */
  --shadow-text-tight: 0 0 3px rgba(20, 16, 10, .92), 0 0 9px rgba(20, 16, 10, .78);
  --accent-deep:#963f22;
  --line:       rgba(31, 27, 20, 0.12);
  --line-soft:  rgba(31, 27, 20, 0.08);

  --panel:      #faf5e9;   /* solitt kort — inte glas */
  --panel-bord: rgba(31, 27, 20, 0.10);

  --shadow-sm:  0 1px 2px rgba(31, 27, 20, 0.05);
  --shadow:     0 28px 64px -34px rgba(31, 27, 20, 0.42);
  --shadow-lg:  0 40px 90px -36px rgba(31, 27, 20, 0.5);

  --maxw: 1120px;
  --r:    20px;

  /* Navets faktiska höjd (uppmätt: 1.05rem padding + CTA-pillret ≈ 73px).
     Sektionernas toppluft ligger som token här så ankaroffseten längre ner
     kan räkna med exakt samma värde — de får inte glida ifrån varandra. */
  --nav-h: 73px;
  --sec-pad-top: clamp(4.5rem, 10vw, 8rem);
  --anchor-gap: 1.5rem;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* endast etiketter */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Instrument Serif finns bara i vikt 400. Utan detta smetar browsern ut en
   syntetisk fetstil över en högkontrastserif så fort en regel ber om 600/700.
   Schibsted Grotesk har riktiga vikter 400–700 och påverkas inte — syntes
   används bara när vikten saknas i familjen. Displayhierarkin bärs av storlek. */
* { font-synthesis-weight: none; }

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

body {
  font-family: var(--sans);
  color: var(--ink);
  line-height: 1.6;
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: rgba(184, 92, 56, 0.22); }

/* ============================================================
   Levande bakgrund (statisk bild, drivande moln)
   ============================================================ */
.scene { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: var(--paper); }

.scene__art { position: absolute; inset: 0; width: 100%; height: 100%; }

.scene__img {
  position: absolute;
  inset: 0;
  /* url() först som fallback för webbläsare utan image-set, sedan AVIF (131 KB
     mot JPG:ns 393 KB). Bilden är sidans LCP — vikten syns direkt i Core Web Vitals. */
  background-image: url("assets/hero-syntetisk.jpg");
  background-image: image-set(
    url("assets/hero-syntetisk.avif") type("image/avif"),
    url("assets/hero-syntetisk.jpg") type("image/jpeg")
  );
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}

/* Drivande moln — enda rörelsen */
.scene__clouds {
  position: absolute;
  top: 0; left: -20%; right: -20%;
  height: 48%;
  background-image:
    radial-gradient(50% 60% at 20% 40%, rgba(255,255,255,0.45), transparent 70%),
    radial-gradient(45% 55% at 55% 30%, rgba(255,255,255,0.35), transparent 70%),
    radial-gradient(60% 70% at 82% 50%, rgba(255,255,255,0.40), transparent 72%);
  background-repeat: no-repeat;
  mix-blend-mode: soft-light;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
  animation: drift 60s linear infinite;
  will-change: transform;
}
@keyframes drift {
  from { transform: translateX(-6%); }
  to   { transform: translateX(6%); }
}

.scene__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(243,237,223,0.14) 0%, rgba(243,237,223,0.02) 38%, rgba(243,237,223,0.10) 100%);
}

/* Skarven mellan akvarellen och pappret.
   Scenen är fixed och sektionerna glider över den, så kanten flyttar sig när
   sidan skrollas — masken måste därför ligga på sektionen som täcker bilden,
   inte på bilden. Första sektionen efter hero:n börjar genomskinlig och blir
   solid papper först 190px ner, så akvarellen tonar ut i stället för att kapas.
   Zonen ligger helt inom sektionens padding-top, så ingen text hamnar i den. */
.hero + .section {
  --fade: clamp(88px, 11vw, 170px);
  padding-top: calc(var(--fade) + 1.6rem);
  background: linear-gradient(180deg,
    rgba(243, 237, 223, 0) 0,
    rgba(243, 237, 223, 0.55) calc(var(--fade) * .42),
    rgba(243, 237, 223, 0.92) calc(var(--fade) * .78),
    var(--paper) var(--fade));
}

@media (prefers-reduced-motion: reduce) {
  .scene__clouds { animation: none; }
  html { scroll-behavior: auto; }
  /* Railen får byta läge och markera aktivt steg — men hoppa dit direkt */
  .rail, .rail a, .rail a::before { transition: none; }
}

/* ============================================================
   Navigation
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.05rem clamp(1.1rem, 4vw, 2.6rem);
}
/* Headern har ingen egen yta: inget band, ingen hairline-kant, ingen blur.
   De tre elementen — märket, CTA-pillret och toggeln — bär sitt eget underlag.
   Kvar är en mjuk papperstonad gradient utan synlig kant. Den är omärklig över
   akvarellens ljusa himmel i toppen, men hindrar att text kolliderar med
   chipsen när sidan scrollas under den fasta headern. */
.nav::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(243, 237, 223, .72) 0%,
    rgba(243, 237, 223, .34) 55%,
    rgba(243, 237, 223, 0) 100%);
}

.nav__brand {
  display: inline-flex; align-items: center;
  color: var(--ink); text-decoration: none;
}
/* Ordtexten är borta ur headern — jätteordet i hero:n och footern bär
   varumärket. Cirkelmärket står kvar som hemlänk, för utan den finns ingen
   väg tillbaka till startsidan från en bloggartikel. */
.nav__brand > span:not(.nav__mark) { display: none; }
.nav__brand-dim { color: var(--ink-faint); font-weight: 400; }
.nav__mark {
  position: relative;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--line);
}

/* Yin-yang-symbol byggd i CSS (mask) — skalar krispt och följer temat */
.nav__mark::after, .footer__mark::after, .loader__mark::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20fill='%23fff'%20fill-rule='evenodd'%20d='M50%200A50%2050%200%200%201%2050%20100A25%2025%200%200%201%2050%2050A25%2025%200%200%200%2050%200ZM50%2067a8%208%200%201%200%200%2016a8%208%200%201%200%200-16Z'/%3E%3Ccircle%20cx='50'%20cy='25'%20r='8'%20fill='%23fff'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20fill='%23fff'%20fill-rule='evenodd'%20d='M50%200A50%2050%200%200%201%2050%20100A25%2025%200%200%201%2050%2050A25%2025%200%200%200%2050%200ZM50%2067a8%208%200%201%200%200%2016a8%208%200%201%200%200-16Z'/%3E%3Ccircle%20cx='50'%20cy='25'%20r='8'%20fill='%23fff'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.nav__links { display: flex; gap: clamp(1.05rem, 1.55vw, 1.7rem); }
.nav__links a {
  position: relative; white-space: nowrap;
  color: var(--ink-soft); text-decoration: none;
  font-size: .92rem; font-weight: 500; letter-spacing: -.005em;
  padding: .2rem 0; transition: color .25s;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -3px;
  width: 100%; height: 2px; background: var(--accent); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); }

.nav__toggle {
  display: none; flex-direction: column; gap: 5px;
  width: 42px; height: 38px; padding: 9px 8px;
  background: var(--panel); border: 1px solid var(--panel-bord); border-radius: 12px; cursor: pointer;
}
.nav__toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease), opacity .25s; }

/* Alla tre chips samlade till höger. Vänsterkanten hålls fri från chrome
   eftersom sektionernas marginaletiketter bor där — med märket kvar i vänstra
   hörnet lade det sig över rubriken när etiketten gled upp under headern. */
.nav { justify-content: flex-end; gap: clamp(.8rem, 2vw, 1.4rem); }

/* ============================================================
   SIDHUVUD (blogg, artikel) — samma grammatik som hero:n
   Ett kortare helbleed-band med eget bildlager, positionerat så att
   motivets mörka rygg ligger där texten står. Sektionssidor får
   varumärkesregistret (grotesk versaler), artiklar får innehålls-
   registret (serif) — bandet är detsamma, rösten skiljer.
   ============================================================ */
.pagehero {
  position: relative;
  min-height: 56svh;
  display: grid; align-content: end;
  padding: 8rem clamp(1.25rem, 4vw, 3.4rem) clamp(2rem, 4vw, 3.2rem);
  overflow: hidden;
}
.pagehero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("assets/hero-syntetisk.jpg") center 78% / cover no-repeat;
  background-image: image-set(
    url("assets/hero-syntetisk.avif") type("image/avif"),
    url("assets/hero-syntetisk.jpg") type("image/jpeg")
  );
}
/* Scrim: bandet är för kort för att rymma hela textstapeln i motivets
   mörka zon, så texten får sitt eget underlag. Hero:n behöver ingen —
   där ligger ordet redan i den mätta mörka zonen. */
.pagehero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
    rgba(20, 16, 10, .80) 0%,
    rgba(20, 16, 10, .60) 52%,
    rgba(20, 16, 10, .22) 80%,
    transparent 96%);
}
.pagehero__kicker {
  font-family: var(--mono); font-size: .6rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(247, 241, 228, .9); margin-bottom: 1rem;
  text-shadow: var(--shadow-text-sm);
}
.pagehero h1 {
  font-family: var(--sans); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2rem, 6.4vw, 5rem); line-height: .9; letter-spacing: -.04em;
  color: var(--cream); text-wrap: balance;
  text-shadow: var(--shadow-text);
}
.pagehero--article h1 {
  font-family: var(--display); font-weight: 400; text-transform: none;
  font-size: clamp(1.9rem, 4.4vw, 3.4rem); line-height: 1.04; letter-spacing: -.01em;
  max-width: 34rem;
}
.pagehero__lead {
  margin-top: 1.2rem; max-width: 34rem;
  font-size: 1rem; line-height: 1.55;
  color: rgba(247, 241, 228, .92);
  text-shadow: var(--shadow-text-sm);
}
.pagehero__meta {
  margin-top: 1.1rem; font-family: var(--mono); font-size: .58rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(247, 241, 228, .8);
}
.pagehero__meta a { color: var(--accent-on-dark); text-decoration: none; }
.pagehero .breadcrumb { margin-bottom: 1rem; color: rgba(247,241,228,.8); }
/* Bandet bär toppluften — sektionen efter det behöver inte 8rem till */
.pagehero + .section,
.pagehero + .article,
.pagehero + .section--alt { padding-top: clamp(2.4rem, 5vw, 4rem); }
.pagehero .breadcrumb a { color: var(--cream); }

/* ============================================================
   Hero
   ============================================================ */
/* ============================================================
   HERO — RIKTNINGSKONTRAKT
   THESIS: Första vyn ÄR ett typografiskt moment. Ett enda ord i
     versaler, kant till kant över landskapets mörka rygg — vägrar
     både den centrerade rubrik-plus-knapp-hero:n och den tysta
     etikettvarianten. Ersätter tidigare The No-Hero-Display Rule.
   OWN-WORLD: Helbleed akvarell med brett tonomfång, ordet i cream
     Schibsted Grotesk 700 nedre vänster, sektions-railen i ink mot den
     ljusa himlen övre höger (den lever numera utanför hero:n — se .rail),
     sex hårfina grafitikoner i den mörka bottenremsan. Bildens egen
     tonala delning bär bägge textfärgerna.
   STORY: Besökaren ser vems sajt det är, vad den innehåller (sex
     ikoner, sex nummer) och kan gå direkt till sitt ämne.
   FIRST VIEWPORT: index övre höger, ordet i två rader nedre vänster
     (68–90 % höjd — mätt zon där cream klarar 3:1), avsändarrad och
     ikonrad i bottenremsan.
   FORM: Användarens referensbild 1 (Tokyo), fastpinnad av briefen.
     Placeringen är inte kopierad utan mätt: radprofilen visade att
     cream text klarar kontrastkravet först från 70 % ner i bilden.
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto auto;
  padding: 7rem clamp(1.25rem, 4vw, 3.4rem) clamp(1.6rem, 3vw, 2.6rem);
}

/* Sektions-rail — sifferindexet som förr satt absolut i hero:ns övre höger
   hörn, nu fast över hela sidan så det bär wayfinding hela vägen ner.

   I vila ligger den kvar på exakt sin gamla höjd, mot den ljusa himlen där
   ink har sin kontrast. Så fort sidan scrollas glider den till lodrätt
   mitten — en enda övergång på top, inte en position räknad per scrollpixel.

   Färgen växlar med underlaget, för railen passerar hela hero:ns tonomfång:
   ink mot himlen och mot papper, cream medan bandet ligger över bergen.
   Samma tonala delning som bär hero:ns egna två textfärger. */
.rail {
  position: fixed;
  top: clamp(7rem, 14vh, 11rem); right: clamp(1.25rem, 4vw, 3.4rem);
  z-index: 40;
  display: flex; flex-direction: column; align-items: flex-end; gap: .55rem;
  font-family: var(--mono); font-size: .62rem; font-weight: 500; letter-spacing: .12em;
  transition: top .55s var(--ease-out), transform .55s var(--ease-out), opacity .8s var(--ease-out);
}
/* transform i stället för en uträknad top: -50 % gäller elementets egen
   höjd, så mitten håller även om antalet steg ändras. */
.rail.is-pinned { top: 50%; transform: translateY(-50%); }

/* Railen hör inte till hero-entrén men ska inte stå kvar under loadern */
.js .rail { opacity: 0; }
.js .is-ready .rail { opacity: 1; }

.rail a {
  position: relative; display: block; padding: .1rem 0;
  color: var(--ink-soft); text-decoration: none;
  transition: color .25s, opacity .3s;
}
.rail a:hover { color: var(--accent-deep); }

/* Strecket: nav-länkarnas underline vriden 90° och lagd till vänster om
   siffran, så den växer ut i marginalen i stället för in mot innehållet.
   scaleX från full bredd, inte animerad width — samma skäl som står vid
   .progress: width tvingar fram omlayout, transform går på compositorn. */
.rail a::before {
  content: ""; position: absolute; top: 50%; right: calc(100% + .45rem);
  width: 14px; height: 1px; background: currentColor;
  transform: translateY(-50%) scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .3s var(--ease);
}
.rail a[aria-current="true"] { color: var(--accent-deep); }
.rail a[aria-current="true"]::before { transform: translateY(-50%) scaleX(1); }
/* Dämpningen slås på först när railen har ett aktivt steg — annars står
   hela kolumnen halvsläckt medan hero:n ligger i vyn.

   .85 är inte smak utan en mätt gräns. De inaktiva siffrorna är länkar i
   0,62rem, så de ska klara 4,5:1. Full --ink-soft mot papper ger 6,91:1;
   dämpningen äter av det, och blandningen faller under kravet redan vid
   .8 (4,27:1). .85 landar på 4,8:1 i ljust tema och 7,54:1 i mörkt.
   Hierarkin blir därmed avsiktligt svag — det är accentfärgen och
   strecket som ska säga var man är, inte att grannarna släcks ner. */
.rail.is-active a:not([aria-current="true"]) { opacity: .85; }
.rail a:hover { opacity: 1; }

/* Mot akvarellen bär bara cream kontrasten, och bara med tät gloria:
   siffrorna är små och motivet växlar ton flera gånger under kolumnen.
   Klassen sitter per siffra, inte på railen — JS mäter var och en för sig
   mot hero, kortkommandon och partner, de tre sektioner som släpper
   igenom bilden. Kolumnen kan därför vara tvåfärgad vid en gräns. */
.rail a.is-ondark { color: var(--cream); text-shadow: var(--shadow-text-tight); }
.rail a.is-ondark:hover,
.rail a.is-ondark[aria-current="true"] { color: var(--accent-on-dark); }

/* Ordet — enda gången displayregistret får skrikа */
.hero__inner { grid-row: 2; align-self: end; max-width: 100%; }
.hero__word {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(2.4rem, 11.2vw, 9.5rem);
  line-height: .82; letter-spacing: -.045em; text-transform: uppercase;
  white-space: nowrap;
  color: var(--cream);
  text-shadow: var(--shadow-text);
}
.hero__word em { font-style: normal; color: var(--accent); }
.hero__by {
  position: absolute; right: clamp(1.25rem, 4vw, 3.4rem); bottom: clamp(1.6rem, 3vw, 2.6rem);
  max-width: 15rem; text-align: right;
  font-size: .84rem; font-weight: 500; line-height: 1.5;
  color: rgba(247, 241, 228, .9);
  text-shadow: var(--shadow-text-sm);
}
.hero__by a { color: var(--accent-on-dark); text-decoration: none; font-weight: 600; }
.hero__by a:hover { text-decoration: underline; }

/* Ikonrad i bottenremsan — mätt till 4,7:1 i värsta punkt */
.hero__topics { grid-row: 3; margin-top: clamp(1.8rem, 4vh, 3.2rem); }
.hero__topics ul {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: clamp(1.4rem, 3.4vw, 3.2rem);
}
.htopic {
  display: flex; flex-direction: column; gap: .55rem;
  color: rgba(247, 241, 228, .9); text-decoration: none;
  transition: color .25s, transform .3s var(--ease);
}
.htopic:hover { color: var(--cream); transform: translateY(-2px); }
.htopic__ico svg { width: 1.5rem; height: 1.5rem; display: block; }
.htopic__label {
  font-family: var(--mono); font-size: .58rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
}

@media (max-width: 720px) {
  .hero { padding-top: 6rem; }
  /* Smal skärm: railen skulle konkurrera med innehållet om högerkanten.
     Hero:ns ikonrad och footerns nav bär wayfindingen där i stället. */
  .rail { display: none; }
  .hero__word { letter-spacing: -.03em; }
  .hero__topics ul { gap: 1.1rem 1.6rem; }
  .htopic__label { font-size: .52rem; }
}

/* Den absoluta avsändarraden kräver ~900px bredd för att inte kollidera med
   ikonraden. Under det flödar den med i stället. */
@media (max-width: 960px) {
  .hero__by {
    position: static; grid-row: 3; max-width: none; text-align: left;
    margin: 1rem 0 0; font-size: .82rem;
  }
  .hero__topics { grid-row: 4; margin-top: 1.4rem; }
}

.hero__lead {
  font-size: clamp(1.05rem, 2.1vw, 1.26rem);
  line-height: 1.6; color: var(--ink-soft);
  max-width: 540px; margin: 0 auto 2.4rem;
  text-wrap: pretty;
}

.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .85rem 1.7rem; border-radius: 999px;
  font-size: .96rem; font-weight: 600; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .3s var(--ease), box-shadow .3s, background .3s, color .3s, border-color .3s;
}
.btn--solid {
  background: var(--ink); color: #f7f1e4;
  box-shadow: 0 16px 30px -16px rgba(31,27,20,.7);
}
.btn--solid:hover { transform: translateY(-2px); box-shadow: 0 22px 40px -18px rgba(31,27,20,.75); }
.btn--ghost {
  background: rgba(250, 245, 233, 0.5);
  color: var(--ink); border-color: var(--line);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.btn--ghost:hover { transform: translateY(-2px); background: rgba(250, 245, 233, 0.85); border-color: rgba(31,27,20,.22); }

@keyframes scrolldot {
  0% { opacity: 0; transform: translateY(0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(13px); }
}

/* ============================================================
   Keyscene — kortkommandon som cinematiskt helbredds-moment
   THESIS: Genvägar är sidans mest praktiska innehåll, men de behöver
     inte se ut som en tabell. Här ligger de direkt på akvarellen:
     sektionen bär ingen egen bakgrund, så fjällen syns genom korten.
   OWN-WORLD: Centrerat uppslag i stället för sidans sticky-etikett —
     ett medvetet brott mot uppslagsmönstret, för att markera att
     detta är ett moment och inte ett kapitel. Korten är frostat glas,
     inte solida paneler: bakgrunden får läsa igenom, men texten står
     alltid på egen grund.
   STORY: Läsaren lyfter blicken från manualen, ser landskapet, och får
     genvägarna i samma andetag.
   FORM: Glaspaneler (variant A), valda av användaren efter renderad
     jämförelse mot variant B (helt öppna listor utan kort), som föll
     på kontrast där berget går mörkt.
   ============================================================ */
/* Tyngre botten- än toppadding drar det centrerade innehållet uppåt i
   rutan — rutorna hamnar över mitten, där fjällryggen ligger, i stället
   för nere i den mörka förgrunden. */
.keyscene {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(3.5rem, 8vw, 5.5rem) clamp(1.25rem, 5vw, 3rem) clamp(6rem, 15vw, 11rem);
  background: transparent;
}
.keyscene::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 90% at 50% 45%, rgba(243,237,223,0.55) 0%, rgba(243,237,223,0.22) 55%, transparent 100%);
}
.keyscene__inner { width: 100%; max-width: var(--maxw); }

/* Rubriken är centrerad — den hör till bilden, inte till marginalen */
.keyscene__head { text-align: center; max-width: 720px; margin: 0 auto 1.9rem; }
.keyscene__kicker {
  display: inline-flex; align-items: baseline; gap: .6rem;
  text-transform: uppercase; letter-spacing: .28em; font-size: .72rem;
  font-weight: 600; color: var(--accent-deep); margin-bottom: 1rem;
}
.keyscene__kicker b {
  font-family: var(--display); font-weight: 400; font-size: 1.05rem;
  letter-spacing: 0; color: var(--ink-faint);
}
.keyscene__head p {
  font-size: clamp(1rem, 2vw, 1.15rem); color: var(--ink-soft);
  max-width: 560px; margin: 0 auto; line-height: 1.55;
}

/* Rutorna samlas i mitten av bilden — smalare än sidans maxbredd, så
   akvarellen får andas på båda sidor i stället för att bli en ram.
   56rem är exakt innehållsspaltens gamla mått (.section__body), så
   panelerna behåller precis den storlek de hade i uppslagsläget. */
.keyscene__grid { max-width: 56rem; margin-left: auto; margin-right: auto; }

/* Frostat glas: bergen läser igenom, texten står på egen grund */
.keyscene .keys {
  padding: 1.6rem 1.7rem;
  background: rgba(250, 245, 233, .58);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgba(250, 245, 233, .7);
  box-shadow: 0 28px 64px -34px rgba(31, 27, 20, .45);
}
.keyscene .keys__title { border-bottom-color: rgba(31, 27, 20, .16); }
.keyscene .ostoggle__btn {
  background: rgba(250, 245, 233, .6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.keyscene .ostoggle__btn[aria-pressed="true"] { background: var(--accent); }

/* Utan stöd för backdrop-filter blir glaset nästan opakt i stället för
   grumligt — läsbarheten går före effekten. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .keyscene .keys { background: rgba(250, 245, 233, .93); }
  .keyscene .ostoggle__btn { background: rgba(250, 245, 233, .93); }
}

/* ============================================================
   Sektioner (rena, opaka editorial-sidor)
   ============================================================ */
.section {
  position: relative;
  padding: var(--sec-pad-top) clamp(1.25rem, 5vw, 3rem);
  background: var(--paper);
}
.section--alt { background: var(--paper-2); }
.section > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }

.section__head { max-width: 720px; margin-bottom: 3.4rem; }
.section__kicker {
  display: inline-block; text-transform: uppercase; letter-spacing: .24em;
  font-size: .73rem; font-weight: 600; color: var(--accent-deep); margin-bottom: 1rem;
}
.section__kicker-row { display: flex; align-items: baseline; gap: .8rem; margin-bottom: 1rem; }
.section__kicker-row .section__kicker { margin-bottom: 0; }
.section__num {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--accent-deep); line-height: 1;
}
.section__head h1,
.section__head h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.4rem, 5.8vw, 4.2rem); line-height: 1.02; letter-spacing: -.01em;
  margin-bottom: .9rem;
}
.section__head p { color: var(--ink-soft); font-size: 1.1rem; line-height: 1.55; }

/* ============================================================
   SEKTIONSUPPSLAG — RIKTNINGSKONTRAKT (förslag C)
   THESIS: Varje sektion är ett uppslag, inte en låda med kort.
     Etiketten står kvar i vänstermarginalen medan innehållet rullar,
     som i en tryckt manual. Vägrar rutnätet av likformiga kort.
   OWN-WORLD: Monoetikett i vänsterspalt, hårfina linjer istället för
     kortkanter, siffror som små monofigurer i marginalen, ett läsmått
     på 34rem. Terrakotta bara i etiketten och i länkar.
   STORY: Läsaren vet alltid var i guiden hon är, och läser en spalt
     istället för att skanna nio rutor.
   FIRST VIEWPORT (per sektion): etikett + rubrik uppe till vänster,
     innehållet till höger, avgränsat av linjer.
   FORM: Uppslaget, valt av användaren efter renderad jämförelse mot
     A (radera) och B (linjer).
   ============================================================ */
/* Sektionen går kant till kant — den bär sidans bakgrund, och en max-width
   här skulle förvandla bakgrunden till en låda med akvarellen synlig utanför.
   Spalterna centreras med justify-content i stället. */
.section:has(> .section__body) {
  display: grid;
  grid-template-columns: minmax(0, 12.5rem) minmax(0, 56rem);
  column-gap: clamp(1.6rem, 3vw, 3rem);
  justify-content: center;
  align-items: start;
}
.section:has(> .section__body) > .section__head {
  grid-column: 1;
  position: sticky; top: 6.5rem;
  max-width: none; margin: 0 0 2.5rem;
}
.section__body { grid-column: 2; min-width: 0; margin: 0 !important; }
/* Läsmåttet gäller löptext. Jämförande innehåll — licenser, API-priser,
   tangentbord, utrullningssteg — behöver full spaltbredd och behåller
   därför sin egen form. */
.section__body > .callout,
.section__body > .grid--cards,
.section__body > .subhead,
.section__body > .subhead__lead,
.section__body > .anatomy,
.section__body > .table-foot,
.section__body > .lic-help,
.section__body > .faq,
.section__body > p { max-width: 44rem; }

/* Etiketten: monokicker, dämpad rubrik, ingressen som marginalanteckning */
.section:has(> .section__body) .section__kicker-row { display: block; margin-bottom: .5rem; }
.section:has(> .section__body) .section__kicker {
  font-family: var(--mono); font-size: .58rem; font-weight: 600;
  letter-spacing: .16em; color: var(--accent-deep); margin: 0;
}
.section:has(> .section__body) .section__num { display: none; }
.section:has(> .section__body) .section__head h2 {
  font-size: clamp(1.75rem, 2.6vw, 2.1rem); line-height: 1.08;
  letter-spacing: -.005em; margin-bottom: .6rem;
  /* långa sammansatta svenska ord måste få brytas i en 10,5rem-spalt */
  overflow-wrap: break-word; hyphens: auto;
}
/* Kontroller hör inte hemma i etikettmarginalen — de tillhör innehållet */
.section:has(> .section__body) .section__head .ostoggle {
  flex-wrap: wrap; margin-top: 1.1rem; gap: .4rem;
}
.section:has(> .section__body) .section__head p {
  font-size: .86rem; line-height: 1.5; color: var(--ink-faint);
}

/* Innehållet: linjer, inte lådor */
.section__body > * + * { margin-top: 1.8rem; }
.section__body .grid--cards { display: block; }
.section__body .card {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  padding: 1.5rem 0 1.5rem 2.8rem;
  border-top: 1px solid var(--line);
}
.section__body .grid--cards .card:first-child { border-top: 0; padding-top: 0; }
.section__body .card:hover { transform: none; box-shadow: none; }
.section__body .card__num {
  position: absolute; left: 0; top: 1.6rem;
  font-family: var(--mono); font-size: .62rem; font-weight: 500;
  color: var(--ink-faint); margin: 0;
}
.section__body .grid--cards .card:first-child .card__num { top: .1rem; }
.section__body .callout { display: block; }
.section__body .callout__mark { display: none; }
.section__body .card .eg strong { color: var(--ink); }

/* Undantag: fyrkolumnsjämförelsen av licenser behöver bredden mer än den
   behöver en marginaletikett. Typografin är C:s, layouten är staplad. */
#priser.section:has(> .section__body) { display: block; }
#priser.section:has(> .section__body) > .section__head {
  position: static; max-width: 40rem; margin-bottom: 2.4rem;
}

@media (max-width: 900px) {
  .section:has(> .section__body) { display: block; }
  .section:has(> .section__body) > .section__head {
    position: static; max-width: 34rem; margin-bottom: 2.4rem;
  }
  .section:has(> .section__body) .section__head h2 { font-size: clamp(1.9rem, 5.5vw, 2.6rem); }
  .section:has(> .section__body) .section__head p { font-size: 1rem; color: var(--ink-soft); }
  .section__body { max-width: 34rem; }
}

/* ============================================================
   Vanliga frågor (FAQ)
   ============================================================ */
.faq { display: flex; flex-direction: column; gap: .9rem; max-width: 760px; }
.faq__item {
  background: var(--panel); border: 1px solid var(--panel-bord); border-radius: var(--r);
  box-shadow: var(--shadow-sm); overflow: hidden; transition: border-color .3s, box-shadow .3s;
}
.faq__item[open] { box-shadow: var(--shadow); border-color: rgba(31,27,20,.18); }
.faq__q {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.15rem 1.5rem; font-family: var(--display); font-weight: 600;
  font-size: 1.05rem; color: var(--ink); -webkit-tap-highlight-color: transparent;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__icon {
  flex: none; width: 1.4rem; height: 1.4rem; border-radius: 999px; border: 1px solid var(--panel-bord);
  position: relative; transition: transform .3s var(--ease-out);
}
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: var(--accent-deep);
  transform: translate(-50%, -50%);
}
.faq__icon::before { width: .6rem; height: 2px; }
.faq__icon::after { width: 2px; height: .6rem; transition: opacity .25s; }
.faq__item[open] .faq__icon::after { opacity: 0; }
.faq__item[open] .faq__icon { transform: rotate(180deg); }
.faq__a { margin: 0 1.5rem 1.3rem; color: var(--ink-soft); font-size: .98rem; line-height: 1.6; }
.faq__a a { color: var(--accent-deep); font-weight: 600; }

/* ============================================================
   Grids
   ============================================================ */
.grid { display: grid; gap: 1.3rem; }
.grid--cards { grid-template-columns: repeat(3, 1fr); }
.grid--keys  { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.1rem; }
.grid--api   { grid-template-columns: repeat(4, 1fr); margin-top: 1.5rem; }

/* ============================================================
   Kort (solida paneler — inte glas)
   ============================================================ */
.card {
  position: relative;
  padding: 1.9rem 1.7rem 1.7rem;
  background: var(--panel);
  border: 1px solid var(--panel-bord);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: rgba(31,27,20,.18);
}
.card__num {
  display: inline-block; font-family: var(--display);
  font-size: 1.7rem; font-weight: 600; color: var(--accent);
  letter-spacing: .01em; margin-bottom: 1.1rem;
}
.card h3 { font-family: var(--display); font-size: 1.3rem; letter-spacing: 0; line-height: 1.15; margin-bottom: .45rem; }
.card p { color: var(--ink-soft); font-size: .96rem; line-height: 1.58; }
.card em { font-style: normal; color: var(--accent-deep); font-weight: 600; }

/* ============================================================
   Kortkommandon
   ============================================================ */
.ostoggle { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.3rem; }
.keyscene .ostoggle { margin-top: 1.4rem; }
.ostoggle__label { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); font-weight: 600; }
.ostoggle__btn {
  font-family: inherit; font-size: .88rem; font-weight: 600; color: var(--ink-soft);
  background: var(--panel); border: 1px solid var(--panel-bord);
  padding: .42rem 1rem; border-radius: 999px; cursor: pointer;
  transition: background .25s var(--ease), color .25s, transform .2s, box-shadow .25s, border-color .25s;
}
.ostoggle__btn:hover { transform: translateY(-1px); border-color: rgba(31,27,20,.2); }
.ostoggle__btn[aria-pressed="true"] {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
  box-shadow: 0 10px 22px -12px rgba(150, 63, 34, .8);
}

.keys {
  padding: 1.4rem 1.5rem;
  background: var(--panel);
  border: 1px solid var(--panel-bord);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}
.keys__title {
  font-family: var(--display); font-size: 1.14rem; font-weight: 600;
  margin-bottom: .6rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line);
  letter-spacing: -.01em;
}
.keys__title span { color: var(--ink-faint); font-weight: 400; font-size: .86rem; font-family: var(--sans); }
.keys__list { list-style: none; }
.keys__list li {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .42rem 0; border-bottom: 1px dashed var(--line-soft);
}
.keys__list li:last-child { border-bottom: none; }
.keys__list li > span { color: var(--ink-soft); font-size: .91rem; }
.keys__note { margin-top: .8rem; font-size: .79rem; color: var(--ink-faint); line-height: 1.5; }

/* Tangenter — keycap-stil. Yttre kbd som innehåller andra kbd blir osynlig grupp. */
kbd {
  font-family: var(--sans); font-size: .78rem; font-weight: 600; color: var(--ink);
  background: linear-gradient(180deg, #fff, #efe7d4);
  border: 1px solid rgba(31,27,20,.18); border-bottom-width: 2px; border-radius: 7px;
  padding: .14rem .42rem; white-space: nowrap; line-height: 1.4;
}
kbd:has(kbd) {
  background: none; border: none; padding: 0;
  display: inline-flex; gap: .22rem; align-items: center;
  color: var(--ink-faint); font-weight: 500;
}

/* ============================================================
   Pristabell
   ============================================================ */
.table-wrap {
  background: var(--panel);
  border: 1px solid var(--panel-bord);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.ptable { width: 100%; border-collapse: collapse; font-size: .96rem; }
.ptable thead th {
  text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-faint); font-weight: 600; padding: 1.1rem 1.4rem;
  background: rgba(31,27,20,.035); border-bottom: 1px solid var(--line);
}
.ptable tbody tr { transition: background .25s; }
.ptable tbody tr:hover { background: rgba(184,92,56,.06); }
.ptable tbody th, .ptable tbody td {
  text-align: left; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--line-soft);
  vertical-align: top; color: var(--ink-soft);
}
.ptable tbody tr:last-child th, .ptable tbody tr:last-child td { border-bottom: none; }
.ptable tbody th {
  font-family: var(--display); font-weight: 600; font-size: 1.1rem; color: var(--ink); white-space: nowrap;
}
.ptable td strong { color: var(--ink); font-size: 1.12rem; }
.ptable td span { color: var(--ink-faint); font-size: .82rem; }
.ptable em { font-style: normal; color: var(--accent-deep); font-weight: 600; }

/* Rekommenderad plan */
.ptable__feature { background: rgba(184,92,56,.07); }
.ptable__feature th[scope="row"]::after {
  content: "Populär"; display: inline-block; margin-left: .55rem;
  font-family: var(--sans); font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-accent); background: var(--accent); padding: .16rem .45rem; border-radius: 999px; vertical-align: middle;
}

.table-foot { margin-top: 1rem; font-size: .85rem; color: var(--ink-faint); }
/* Löptextlänkar saknade färgregel helt och föll tillbaka på browserblått */
.table-foot a,
.section__body p a:not([class]) {
  color: var(--accent-deep); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 2px;
}
.table-foot a:hover,
.section__body p a:not([class]):hover { color: var(--ink); }

.subhead { font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin: 3.6rem 0 .3rem; letter-spacing: -.005em; line-height: 1.15; }
.subhead__lead { color: var(--ink-soft); }

.api {
  padding: 1.6rem 1.5rem;
  background: var(--panel); border: 1px solid var(--panel-bord); border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.api:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.api h4 { font-size: 1.04rem; font-weight: 600; letter-spacing: -.01em; }
.api__role { color: var(--ink-faint); font-size: .84rem; margin-bottom: 1rem; }
.api__price { font-family: var(--display); font-size: 1rem; color: var(--ink-soft); }
.api__price span { color: var(--accent); font-weight: 600; font-size: 1.55rem; }

/* ============================================================
   Footer
   ============================================================ */
/* Basen bor hos den senare .footer-regeln. Det som lag har var overskrivet av
   den och alltsa dott; position: relative flyttades dit. */

/* ============================================================
   Förbättringar: skip-link, läsprogress, scroll-spy, till-toppen
   ============================================================ */

/* Hoppa till innehåll (a11y) */
/* Text som bara skärmläsare och sökmotorer ska nå. Inte display:none —
   det skulle plocka bort den ur uppläsningen också. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: fixed; top: -120px; left: 1rem; z-index: 300;
  background: var(--ink); color: #f7f1e4; padding: .7rem 1.1rem; border-radius: 10px;
  font-size: .9rem; font-weight: 600; text-decoration: none;
  transition: top .25s var(--ease);
}
.skip:focus { top: 1rem; }

/* Läsprogress överst */
.progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 60;
  background: linear-gradient(90deg, var(--accent), var(--accent-deep));
  /* scaleX istället för width: den här stapeln uppdateras vid varje scrollhändelse,
     och width tvingar fram omlayout varje gång. transform går på compositorn. */
  transform: scaleX(0);
  transform-origin: 0 50%;
  /* Ingen transition. Scrollpositionen är redan kontinuerlig, så en utjämning
     tillför bara latens: stapeln får ett nytt mål varje frame och hinner aldrig
     fram, vilket läses som att den laggar efter fingret. */
  will-change: transform;
}

/* Aktiv nav-länk (scroll-spy) */

/* Ankaroffset. Den gamla fasta 88px räknade bara navet — men sektionens
   egen toppluft (72–128px) lades ovanpå, så rubriken landade 216px ner och
   halva innehållet hamnade under folden. Samtidigt var 88px mer än navets
   73px, så en 15px-remsa av föregående sektion stack fram under det.
   Formeln nedan scrollar in i sektionens luft i stället: rubriken hamnar
   alltid --anchor-gap under navet, oavsett fönsterbredd, och sektionens
   egen bakgrund börjar ovanför folden så ingen remsa kan synas.

   min(0px, …) är vad som garanterar det sista: på smala fönster krymper
   sektionsluften till 72px, mindre än nav + gap, och utan klämman skulle
   offseten bli positiv och remsan komma tillbaka. Då landar sektionens
   kant på 0 i stället, och etiketten hamnar vid navets underkant — fritt
   från navets kontroller, som alla sitter till höger. */
.section  { scroll-margin-top: min(0px, calc(var(--nav-h) + var(--anchor-gap) - var(--sec-pad-top))); }
.partner  { scroll-margin-top: min(0px, calc(var(--nav-h) + var(--anchor-gap) - clamp(4.5rem, 11vw, 8rem))); }
/* Kortkommandon är ett helskärmsmoment med lodrätt centrerat innehåll —
   där ska rutan fyllas, inte förskjutas. */
.keyscene { scroll-margin-top: 0; }

/* Flytande knappstack: Öppna Claude + Till toppen */

/* Tema-knapp */
.theme-toggle {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--panel-bord); background: var(--panel); color: var(--ink);
  cursor: pointer; display: grid; place-items: center; font-size: 1rem; line-height: 1;
  transition: background .25s, transform .25s, border-color .25s, color .25s;
}
.theme-toggle:hover { transform: translateY(-1px); border-color: rgba(31,27,20,.22); }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 2rem; z-index: 300;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--paper);
  padding: .72rem 1.15rem; border-radius: 999px; font-size: .9rem; font-weight: 600;
  box-shadow: var(--shadow); opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Kopiera-på-klick i kortkommandon */
.keys__list li { cursor: pointer; border-radius: 9px; margin: 0 -.5rem; padding-left: .5rem; padding-right: .5rem; transition: background .2s; }
.keys__list li:hover { background: rgba(184,92,56,.09); }

/* Tydlig tangentfokus (a11y) */
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* Utskrift — ren fusklapp på papper */
@media print {
  .scene, .nav, .hero, .progress, .skip, .footer, .rail { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding: 1rem 0; background: #fff !important; }
  .card, .keys, .api, .table-wrap { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  kbd { background: #fff !important; }
  /* Kortkommandon ÄR fusklappen — glaset måste bli papper, inte försvinna. */
  .keyscene { min-height: 0; display: block; padding: 1rem 0; }
  .keyscene::before { display: none; }
  .keyscene__head { text-align: left; margin-bottom: 1rem; }
  .keyscene__head p, .keyscene .ostoggle { display: none; }
  /* På papper finns ingen etikett-kontext — då måste rubriken tillbaka,
     annars får den utskrivna fusklappen ingen titel. */
  .keyscene__head .sr-only {
    position: static; width: auto; height: auto; margin: 0;
    clip-path: none; white-space: normal;
    font-family: var(--display); font-size: 1.7rem; line-height: 1.1;
  }
  .keyscene .keys {
    background: #fff !important; backdrop-filter: none; -webkit-backdrop-filter: none;
    padding: 0 0 .5rem;
  }
}

/* ============================================================
   Reveal-animation
   ============================================================ */
.reveal { opacity: 0; transform: translateY(30px) scale(.98); filter: blur(8px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ============================================================
   PREMIUM-LAGER
   ============================================================ */

/* Egen scrollbar */
html { scrollbar-color: rgba(184,92,56,.6) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(184,92,56,.5); border-radius: 999px; border: 3px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Filmkorn */
.grain {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 170px 170px;
  animation: grain 1.1s steps(4) infinite;
}
@keyframes grain {
  0% { transform: translate(0,0); } 25% { transform: translate(-3%,2%); }
  50% { transform: translate(2%,-2%); } 75% { transform: translate(-2%,-3%); } 100% { transform: translate(0,0); }
}

/* Hero-entré (staggrad) — döljs bara när JS finns, spelas när loadern lyfter */
@keyframes heroUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.js .hero-in > * { opacity: 0; }
.js .is-ready .hero-in > * { animation: heroUp .95s var(--ease-out) forwards; }
.is-ready .hero-in .hero__word { animation-delay: .05s; }
.is-ready .hero-in .hero__by { animation-delay: .32s; }

/* Knapp-svep */
.btn--solid { position: relative; overflow: hidden; }
.btn--solid::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg);
}
.btn--solid:hover::after { animation: sweep .75s var(--ease); }
@keyframes sweep { from { left: -60%; } to { left: 130%; } }

/* Muspekar-glöd + 3D-tilt på kort */
.card, .api, .license { transition: transform .18s var(--ease), box-shadow .4s var(--ease-out), border-color .4s; will-change: transform; transform-style: preserve-3d; }
.card, .api, .keys, .license { position: relative; overflow: hidden; }
.card::after, .api::after, .keys::after, .license::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 0%), rgba(184,92,56,.16), transparent 46%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.card:hover::after, .api:hover::after, .keys:hover::after, .license:hover::after { opacity: 1; }

/* Licenskort (klickbara) */
.grid--license { grid-template-columns: repeat(4, 1fr); }
.license {
  display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; text-align: left;
  font-family: inherit; cursor: pointer;
  padding: 1.7rem 1.5rem 1.5rem;
  background: var(--panel); border: 1px solid var(--panel-bord); border-radius: var(--r);
  box-shadow: var(--shadow-sm); color: var(--ink);
}
.license:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(31,27,20,.18); }
.license--pop { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-sm); }
.license__tag {
  position: absolute; top: 1rem; right: 1rem;
  font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-accent); background: var(--accent); padding: .18rem .5rem; border-radius: 999px;
}
.license__name { font-family: var(--display); font-size: 1.5rem; letter-spacing: 0; line-height: 1.15; }
.license__price { font-family: var(--display); display: flex; align-items: baseline; gap: .4rem; }
.license__price strong { font-size: 1.7rem; color: var(--accent); font-weight: 600; }
.license__price span { font-size: .8rem; color: var(--ink-faint); font-family: var(--sans); }
.license__for { color: var(--ink-soft); font-size: .92rem; line-height: 1.5; flex: 1; }
.license__more { margin-top: .4rem; color: var(--accent-deep); font-weight: 600; font-size: .9rem; }
.license__more span { display: inline-block; transition: transform .25s var(--ease); }
.license:hover .license__more span { transform: translateX(4px); }

/* Licens-modal */
.modal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 1.5rem; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(15,12,8,.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fadeIn .3s var(--ease); }
/* Panelen är bred nog för två spalter — hela licensen ska rymmas i ett
   ögonkast. overflow: auto är kvar som skyddsnät för korta fönster och
   stor systemtext, inte som normalläge. */
.modal__panel {
  /* 3rem = .modal:s egen padding upp och ner. Med 88vh drog panelen på
     sig scroll långt innan fönstret var slut, eftersom ytterpaddingen
     inte räknades in. */
  position: relative; z-index: 1; width: min(880px, 100%);
  max-height: calc(100dvh - 3rem); overflow: auto;
  background: var(--panel); border: 1px solid var(--panel-bord); border-radius: 24px;
  box-shadow: var(--shadow-lg); padding: clamp(1.5rem, 3.4vw, 2.4rem);
  animation: modalIn .4s var(--ease-out);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(22px) scale(.98); } to { opacity: 1; transform: none; } }
.modal__close {
  position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--panel-bord); background: transparent; color: var(--ink-soft);
  cursor: pointer; font-size: .9rem; display: grid; place-items: center; transition: background .25s, color .25s;
}
.modal__close:hover { background: rgba(184,92,56,.12); color: var(--ink); }
.modal__eyebrow { text-transform: uppercase; letter-spacing: .22em; font-size: .7rem; font-weight: 600; color: var(--accent-deep); margin-bottom: .7rem; }
.modal__title { font-family: var(--display); font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.05; }
.modal__price { font-family: var(--display); margin-top: .4rem; font-size: 1.4rem; color: var(--accent); font-weight: 600; }
.modal__price span { font-family: var(--sans); font-size: .85rem; color: var(--ink-faint); font-weight: 400; margin-left: .3rem; }
.modal__for { margin-top: .7rem; color: var(--ink-soft); font-size: .98rem; line-height: 1.5; max-width: 52ch; }

/* Två spalter, balanserade av browsern. break-inside håller en sektion
   ihop — en rubrik får inte stå ensam kvar längst ner i en spalt. */
.modal__secs {
  margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line-soft);
  columns: 2; column-gap: 2.4rem;
}
.modal__sec { break-inside: avoid; margin-bottom: 1.2rem; }
.modal__sec:last-child { margin-bottom: 0; }
.modal__sec h4 { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-faint); font-weight: 600; margin-bottom: .55rem; }
.modal__sec ul { list-style: none; display: grid; gap: .38rem; }
.modal__sec li { position: relative; padding-left: 1.4rem; color: var(--ink-soft); font-size: .93rem; line-height: 1.45; }
.modal__sec li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; }
.modal__sec p { color: var(--ink-soft); font-size: .93rem; line-height: 1.5; }

/* En spalt när panelen inte längre är bred nog för två — då är
   scroll det ärliga svaret, inte oläslig text. */
@media (max-width: 620px) {
  .modal__secs { columns: 1; }
}

/* Låga fönster — laptop i landskap, delad skärm. Här är höjden bristvaran,
   så luften krymper. Typstorlekarna rörs inte: läsbarheten är inte det
   som ska ge vika för att slippa scroll. */
@media (min-width: 621px) and (max-height: 760px) {
  .modal { padding: .75rem; }
  .modal__panel { max-height: calc(100dvh - 1.5rem); padding: 1.4rem 1.6rem; }
  .modal__for { margin-top: .5rem; }
  .modal__secs { margin-top: 1rem; padding-top: .9rem; }
  .modal__sec { margin-bottom: .85rem; }
  .modal__sec ul { gap: .3rem; }
  .modal__sec h4 { margin-bottom: .4rem; }
  .modal__cta { margin-top: 1rem; padding-top: .9rem; }
}

/* Riktigt låga fönster. Här får display-rubriken ge sig ett steg — den är
   en rubrik, inte löptext, och API-licensen är den längsta av de fyra. */
@media (min-width: 621px) and (max-height: 640px) {
  .modal__panel { padding: 1.1rem 1.4rem; }
  .modal__title { font-size: 1.7rem; }
  .modal__eyebrow { margin-bottom: .45rem; }
  .modal__secs { margin-top: .8rem; padding-top: .75rem; }
  .modal__sec { margin-bottom: .65rem; }
  .modal__cta { margin-top: .8rem; padding-top: .75rem; }
}
.modal__link { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.8rem; color: var(--accent-deep); font-weight: 600; text-decoration: none; font-size: .95rem; }
.modal__link:hover { text-decoration: underline; }
body.modal-open { overflow: hidden; }

/* ============================================================
   PROMPTING-sektion
   ============================================================ */
.callout {
  display: flex; gap: 1.1rem; align-items: flex-start;
  padding: 0 0 1.7rem; margin-bottom: 0;
  background: none; border: 0;
  border-bottom: 1px solid var(--line); border-radius: 0;
}
.callout__mark { font-family: var(--display); font-weight: 600; font-size: 2.6rem; color: var(--accent); line-height: 1; flex: none; }
.callout p { color: var(--ink-soft); font-size: 1.06rem; line-height: 1.6; }
.callout strong { color: var(--ink); }

/* Exempel-ruta i kort */
.card .eg {
  margin-top: .6rem; padding: 0;
  color: var(--ink-soft); font-size: .88rem;
  border-radius: 0 9px 9px 0; font-size: .85rem; color: var(--ink-soft); line-height: 1.5;
}
.card .eg strong { color: var(--accent-deep); font-style: normal; }

/* Anatomin av en bra prompt */
.anatomy {
  margin-top: 1.4rem; background: var(--panel);
  border: 1px solid var(--panel-bord); border-radius: var(--r);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.anatomy__row {
  display: flex; gap: 1.1rem; align-items: baseline;
  padding: 1rem 1.4rem; border-bottom: 1px solid var(--line-soft);
}
.anatomy__row:last-child { border-bottom: none; }
.anatomy__label {
  flex: none; width: 86px; text-align: center;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
  color: var(--on-accent); background: var(--accent); padding: .28rem .5rem; border-radius: 999px;
}
.anatomy__row > span:last-child { color: var(--ink-soft); font-size: .96rem; line-height: 1.5; }

@media (max-width: 540px) {
  .anatomy__row { flex-direction: column; gap: .4rem; }
}

/* ============================================================
   Promptbibliotek
   THESIS: Sektionen ovanför är råd *om* prompting. Det här är
     samma råd i körbar form — anatomi-tabellens ord (Roll, Kontext,
     Uppgift, Format, Exempel) är prompternas taggar, så biblioteket
     läser som tabellen gjord till text man kan bära ut.
   OWN-WORLD: Disclosure-mönstret är FAQ:ns, av samma skäl: fem
     prompts à 40 rader är 200 rader text i ett avsnitt. Kollapsat
     är biblioteket fem rader.
   FORM: Fällbart bibliotek (variant B), valt av användaren efter
     renderad jämförelse mot ett enskilt utfällt block (variant A).
   ============================================================ */
.plib { display: flex; flex-direction: column; gap: .9rem; max-width: 44rem; }
.plib__item {
  background: var(--panel); border: 1px solid var(--panel-bord);
  border-radius: var(--r); box-shadow: var(--shadow-sm); overflow: hidden;
  transition: border-color .3s, box-shadow .3s;
}
.plib__item[open] { box-shadow: var(--shadow); border-color: rgba(31,27,20,.18); }
.plib__q {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; padding: 1.05rem 1.4rem;
  -webkit-tap-highlight-color: transparent;
}
.plib__q::-webkit-details-marker { display: none; }
.plib__q::marker { content: ""; }
.plib__title { display: flex; align-items: baseline; gap: .8rem; min-width: 0; }
.plib__num {
  font-family: var(--mono); font-size: .55rem; font-weight: 600;
  letter-spacing: .16em; color: var(--accent-deep); flex: none;
}
.plib__name {
  font-family: var(--display); font-weight: 400; font-size: 1.15rem;
  line-height: 1.15; color: var(--ink);
}
.plib__for {
  display: block; font-family: var(--sans); font-size: .84rem;
  color: var(--ink-faint); margin-top: .15rem;
}
.plib__icon {
  flex: none; width: 1.4rem; height: 1.4rem; border-radius: 999px;
  border: 1px solid var(--panel-bord); position: relative;
  transition: transform .3s var(--ease-out);
}
.plib__icon::before, .plib__icon::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  background: var(--accent-deep); transform: translate(-50%, -50%);
}
.plib__icon::before { width: .6rem; height: 2px; }
.plib__icon::after { width: 2px; height: .6rem; transition: opacity .25s; }
.plib__item[open] .plib__icon::after { opacity: 0; }
.plib__item[open] .plib__icon { transform: rotate(180deg); }
.plib__body { border-top: 1px solid var(--line-soft); }

/* Promptblocket. Kroppen sätts i Schibsted Grotesk, inte Martian Mono:
   The Mono-Never-Speaks Rule säger att mono aldrig sätter meningar, och
   en prompt är meningar. Taggarna bär strukturen med accentfärg i stället
   för att en monofont bär den. */
.prompt__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .9rem .8rem .2rem 1.4rem;
}
.prompt__label {
  font-family: var(--mono); font-size: .55rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint);
}
.prompt__copy {
  font-family: inherit; font-size: .78rem; font-weight: 600;
  color: var(--ink-soft); background: transparent;
  border: 1px solid var(--panel-bord); border-radius: 999px;
  padding: .34rem .9rem; cursor: pointer; flex: none;
  transition: background .25s, color .25s, border-color .25s, transform .2s;
}
.prompt__copy:hover {
  transform: translateY(-1px);
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}
.prompt__body {
  margin: 0; padding: .9rem 1.4rem 1.4rem;
  font-family: var(--sans); font-size: .87rem; line-height: 1.62;
  color: var(--ink-soft); white-space: pre-wrap; overflow-x: auto;
  tab-size: 2;
}
/* Taggarna är strukturen, inte innehållet */
.prompt__body b { color: var(--accent-deep); font-weight: 600; }
/* Platshållaren är det enda som ska bytas ut. 7px är keycap-steget i
   radieskalan — samma sorts liten inline-markör. */
.prompt__body i {
  font-style: normal; background: rgba(184, 92, 56, .1);
  color: var(--accent-deep); font-weight: 600;
  padding: 0 .3em; border-radius: 7px;
}

/* ============================================================
   SATORI · AI-partner / konvertering
   ============================================================ */

/* Nav-CTA */
.nav__cta {
  display: inline-flex; align-items: center; flex: none;
  background: var(--accent); color: var(--on-accent); text-decoration: none;
  font-weight: 600; font-size: .9rem; letter-spacing: -.01em;
  padding: .5rem 1.15rem; border-radius: 999px;
  box-shadow: 0 10px 22px -14px rgba(150,63,34,.9);
  transition: background .25s, transform .2s;
}
.nav__cta:hover { background: var(--accent-deep); transform: translateY(-1px); }

/* Hero-attribution */

/* Licens-hjälp-banner */
.lic-help {
  margin-top: 1.4rem; display: flex; align-items: center; justify-content: space-between;
  gap: 1.2rem 1.6rem; flex-wrap: wrap;
  padding: 1.3rem 1.6rem; background: var(--panel);
  border: 1px solid var(--panel-bord);
  border-radius: var(--r); box-shadow: var(--shadow-sm);
}
.lic-help strong { display: block; color: var(--ink); font-size: 1.04rem; }
.lic-help span { color: var(--ink-soft); font-size: .92rem; }

/* Partner-sektion (cinematiskt bild-moment) */
.partner {
  position: relative; display: grid; place-items: center;
  padding: clamp(4.5rem, 11vw, 8rem) clamp(1.25rem, 5vw, 3rem);
}
.partner::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 90% at 50% 50%, rgba(243,237,223,.42) 0%, rgba(243,237,223,.12) 58%, transparent 100%);
}
.partner__card {
  width: 100%; max-width: 740px; text-align: center;
  background: var(--panel); border: 1px solid var(--panel-bord);
  border-radius: 26px; box-shadow: var(--shadow-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
}
.partner__eyebrow { text-transform: uppercase; letter-spacing: .22em; font-size: .72rem; font-weight: 600; color: var(--accent-deep); margin-bottom: 1rem; }
.partner h2 { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.05; letter-spacing: -.025em; }
.partner h2 em { font-style: italic; color: var(--accent); }
.partner__lead { color: var(--ink-soft); font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.6; max-width: 560px; margin: 1.1rem auto 1.9rem; }
.partner__points { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; text-align: left; margin-bottom: 2.1rem; }
.partner__points li { display: flex; flex-direction: column; gap: .35rem; padding-top: 1rem; border-top: 2px solid var(--accent); }
.partner__points strong { font-size: 1rem; color: var(--ink); }
.partner__points span { font-size: .88rem; color: var(--ink-soft); line-height: 1.5; }
.partner__cta { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
[data-theme="dark"] .partner::before { background: radial-gradient(120% 90% at 50% 50%, rgba(15,12,8,.55) 0%, rgba(15,12,8,.18) 58%, transparent 100%); }

/* Bokningsformulär */
.booking { margin-top: 2.1rem; text-align: left; }
.booking__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.booking label {
  display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem;
  font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint);
}
.booking__opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-faint); }
.booking input, .booking select, .booking textarea {
  font-family: inherit; font-size: .98rem; font-weight: 400; color: var(--ink); text-transform: none; letter-spacing: 0;
  background: var(--paper); border: 1px solid var(--panel-bord); border-radius: 12px;
  padding: .72rem .9rem; transition: border-color .2s, box-shadow .2s;
}
.booking input:focus, .booking select:focus, .booking textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(184,92,56,.16);
}
.booking textarea { resize: vertical; }
.booking__foot { display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; margin-top: .3rem; }
.booking__status { margin-top: .9rem; font-size: .92rem; font-weight: 600; min-height: 1.2em; }
/* Utfallet får inte hänga på färgen. De två tillstånden låg tidigare på
   --accent-deep respektive #b94a3b — två varma rödtoner några nyanser isär, så
   lyckat och misslyckat såg likadana ut, och för den som inte skiljer dem åt
   fanns ingen annan signal. Marken bär beskedet, färgen förstärker det.
   ✓ är systemets befintliga bocksymbol, se .modal__sec li::before. */
.booking__status.is-ok,
.booking__status.is-err { display: flex; align-items: baseline; gap: .45rem; }
.booking__status.is-ok::before,
.booking__status.is-err::before { font-weight: 700; flex: none; }
.booking__status.is-ok { color: var(--accent-deep); }
.booking__status.is-ok::before { content: "✓"; }
.booking__status.is-err { color: var(--danger); }
.booking__status.is-err::before { content: "!"; }
.partner__link { color: var(--accent-deep); font-weight: 600; text-decoration: none; font-size: .92rem; }
.partner__link:hover { text-decoration: underline; }
@media (max-width: 560px) { .booking__row { grid-template-columns: 1fr; } }

/* Footer boka-länk */
.footer__book { display: inline-block; margin-top: 1.1rem; color: var(--accent); font-weight: 600; text-decoration: none; }
.footer__book:hover { text-decoration: underline; }

/* Modal-CTA */
.modal__cta { display: flex; gap: .9rem 1.2rem; align-items: center; flex-wrap: wrap; margin-top: 1.3rem; padding-top: 1.2rem; border-top: 1px solid var(--line-soft); }
.modal__cta .btn { font-size: .9rem; padding: .7rem 1.3rem; }
.modal__cta .modal__link { margin-top: 0; }

@media (max-width: 640px) {
  .partner__points { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 480px) {
  .nav__cta { padding: .42rem .85rem; font-size: .82rem; }
}

/* Statistik i korthet */
.stats {
  position: relative; background: var(--paper);
  padding: clamp(2.6rem, 5vw, 4rem) clamp(1.25rem, 5vw, 3rem);
  border-bottom: 1px solid var(--line-soft);
}
.stats__inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.stat { text-align: center; }
.stat__num {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: clamp(2.5rem, 6vw, 3.9rem); color: var(--accent); line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.stat__label { display: block; margin-top: .5rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-faint); font-weight: 600; }

/* Marquee */
.marquee {
  overflow: hidden; background: var(--paper-2);
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  padding: 1.05rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: marquee 30s linear infinite; }
.marquee__track span {
  font-family: var(--display); font-style: italic; font-size: 1.45rem; color: var(--ink-faint);
  padding: 0 1.7rem; position: relative; white-space: nowrap;
}
.marquee__track span::after { content: "•"; position: absolute; right: -.25rem; color: var(--accent); opacity: .55; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* Footer (premium) */
.footer { position: relative; padding: clamp(3rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 3rem) 2.5rem; background: var(--footer-bg); color: var(--footer-ink); }
.footer__inner { max-width: var(--maxw); margin: 0 auto; }
.footer__top { display: flex; justify-content: space-between; gap: 2.5rem; flex-wrap: wrap; padding-bottom: 2.2rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer__brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--display); font-size: 1.45rem; font-weight: 600; color: var(--footer-brand); text-decoration: none; }
.footer__mark { position: relative; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); }
.footer__brand-dim { color: var(--footer-ink-soft); font-weight: 400; }
.footer__tagline { margin-top: .8rem; color: var(--footer-ink-soft); font-size: .9rem; max-width: 320px; line-height: 1.55; }
.footer__links { display: flex; flex-direction: column; gap: .65rem; }
.footer__links a { color: var(--footer-link); text-decoration: none; font-size: .92rem; display: inline-block; transition: color .25s, transform .25s; }
.footer__links a:hover { color: var(--footer-ink); transform: translateX(4px); }
.footer__bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.6rem; }
.footer__note { color: var(--footer-ink-faint); font-size: .82rem; max-width: 560px; line-height: 1.55; }
.footer__copy { color: var(--footer-ink-faint); font-size: .82rem; white-space: nowrap; }

/* Intro-loader */
.loader {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background: var(--paper);
  animation: loaderAuto .7s var(--ease) 1.4s forwards;
}
.intro-seen .loader { display: none; }
.loader__box { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.loader__mark {
  position: relative;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--line);
  animation: loaderPulse 1.4s var(--ease) infinite;
}
.loader__word { font-family: var(--display); font-size: 1.35rem; font-weight: 600; color: var(--ink); letter-spacing: -.01em; opacity: 0; animation: loaderWord .8s var(--ease-out) .25s forwards; }
.loader__dim { color: var(--ink-faint); font-weight: 400; }
.loader__bar { width: 120px; height: 3px; border-radius: 999px; background: var(--line); overflow: hidden; }
.loader__bar::after { content: ""; display: block; height: 100%; width: 38%; border-radius: 999px; background: var(--accent); animation: loaderBar 1.15s var(--ease) infinite; }
@keyframes loaderAuto { to { opacity: 0; visibility: hidden; } }
@keyframes loaderPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@keyframes loaderWord { to { opacity: 1; } }
@keyframes loaderBar { 0% { transform: translateX(-130%); } 100% { transform: translateX(360%); } }

/* Scroll-driven inzoomning på det cinematiska momentet.
   Bara rubriken rör sig — den var en enrading som fick blekna ut.
   Genvägslistorna under står still: innehåll man läser av och skriver
   efter får inte skala eller tona bort mitt i läsningen. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .keyscene__head {
      animation: zoomThrough linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 45%;
    }
    @keyframes zoomThrough {
      0% { opacity: 0; transform: translateY(42px) scale(.9); }
      100% { opacity: 1; transform: none; }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .grain, .marquee__track { animation: none; }
  .loader { display: none; }
  .js .hero-in > * { opacity: 1; animation: none; }
}

/* ============================================================
   MÖRKT TEMA
   ============================================================ */
[data-theme="dark"] {
  --paper: #15120c;
  --paper-2: #1c180f;
  --ink: #f1ebde;
  --ink-soft: #c7bea9;
  --ink-faint: #908774;
  --accent: #db8c61;
  --accent-deep: #e8a074;
  /* Ljusare än den ljusa temats --danger — en mörk röd på mörkt underlag
     underkänner. 7.01:1 mot --panel. */
  --danger: #f08a7a;
  --line: rgba(241,235,222,.14);
  --line-soft: rgba(241,235,222,.08);
  --panel: #211b12;
  --panel-bord: rgba(241,235,222,.10);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow: 0 28px 64px -30px rgba(0,0,0,.8);
  --shadow-lg: 0 40px 90px -34px rgba(0,0,0,.85);
}
[data-theme="dark"] body { background: var(--paper); }
[data-theme="dark"] .scene { background: var(--paper); }
[data-theme="dark"] .scene__img { filter: brightness(.6) saturate(.92); }
[data-theme="dark"] .scene__veil {
  background: linear-gradient(180deg, rgba(15,12,8,.6) 0%, rgba(15,12,8,.4) 32%, rgba(15,12,8,.8) 100%);
}
[data-theme="dark"] .hero + .section {
  background: linear-gradient(180deg,
    rgba(21, 18, 12, 0) 0,
    rgba(21, 18, 12, 0.55) calc(var(--fade) * .42),
    rgba(21, 18, 12, 0.92) calc(var(--fade) * .78),
    var(--paper) var(--fade));
}
[data-theme="dark"] .keyscene::before {
  background: radial-gradient(120% 90% at 50% 45%, rgba(15,12,8,.62) 0%, rgba(15,12,8,.28) 55%, transparent 100%);
}
/* Glaset måste vända med temat — annars lyser ljusa paneler mot mörk akvarell */
[data-theme="dark"] .keyscene .keys {
  background: rgba(33, 27, 18, .62);
  border-color: rgba(241, 235, 222, .14);
  box-shadow: var(--shadow);
}
[data-theme="dark"] .keyscene .keys__title { border-bottom-color: rgba(241, 235, 222, .18); }
[data-theme="dark"] .keyscene .ostoggle__btn { background: rgba(33, 27, 18, .62); }
[data-theme="dark"] .keyscene .ostoggle__btn[aria-pressed="true"] { background: var(--accent); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-theme="dark"] .keyscene .keys,
  [data-theme="dark"] .keyscene .ostoggle__btn { background: rgba(33, 27, 18, .95); }
}
[data-theme="dark"] .grain { mix-blend-mode: screen; opacity: .05; }
[data-theme="dark"] .nav::before {
  background: linear-gradient(180deg, rgba(15,12,8,.78) 0%, rgba(15,12,8,.36) 55%, transparent 100%);
}
/* Scenen dimmas till 60 % i mörkt tema, så himlen blir mellangrå. Indexet
   måste då byta håll: ljus text i stället för mörk. */
/* Railen har medvetet ingen mörk-tema-överskrivning. Den gamla indexraden
   hade en, men den satt sist i filen och vann då över aktiv-färgen — i
   mörkt läge blev markören omärkbar. Alla tre tillstånden bärs i stället
   av tokens som redan vänder med temat: --ink-soft mot papper,
   --accent-deep som markör, och cream + gloria mot akvarellen. */
[data-theme="dark"] .nav__links { background: rgba(21,18,12,.97); }
[data-theme="dark"] .btn--solid { background: var(--ink); color: #15120c; }
[data-theme="dark"] .btn--ghost { background: rgba(33,27,18,.5); }
[data-theme="dark"] .ptable thead th { background: rgba(241,235,222,.05); }
[data-theme="dark"] .ptable tbody tr:hover { background: rgba(219,140,97,.10); }
[data-theme="dark"] .loader { background: var(--paper); }
[data-theme="dark"] ::selection { background: rgba(219,140,97,.3); }
[data-theme="dark"] kbd { background: linear-gradient(180deg, #2d2618, #221c12); border-color: rgba(241,235,222,.2); color: var(--ink); }
[data-theme="dark"] kbd:has(kbd) { background: none; border: none; }
[data-theme="dark"] .theme-toggle:hover { border-color: rgba(241,235,222,.28); }

/* ============================================================
   Responsivt
   ============================================================ */
@media (max-width: 900px) {
  .grid--cards { grid-template-columns: repeat(2, 1fr); }
  .grid--api   { grid-template-columns: repeat(2, 1fr); }
  .grid--license { grid-template-columns: repeat(2, 1fr); }
}

/* Nav-raden behöver ~1160px för att inte brytas. Hamburgaren gällde tidigare
   bara till 720px, vilket lämnade en 440px bred zon där länkarna visades men
   inte fick plats. Nav har därför en egen brytpunkt, skild från rutnätens. */
/* A · Hamburgaren överallt. Länkraden har panelbeteende på alla bredder:
   ikonraden i hero:n och footerns nav bär wayfinding, headern bär bara
   märket, CTA:n och toggeln. Ingen nav-brytpunkt att underhålla. */
.nav__links {
  position: absolute; top: 100%; left: 0; right: 0;
  flex-direction: column; gap: 0;
  padding: .5rem 1.25rem 1.25rem;
  background: rgba(243, 237, 223, 0.97);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
  transform: translateY(-12px); opacity: 0; pointer-events: none;
  transition: transform .3s var(--ease), opacity .3s;
}
.nav__links.is-open { transform: none; opacity: 1; pointer-events: auto; }
.nav__links a { padding: .85rem 0; border-bottom: 1px solid var(--line-soft); }
.nav__toggle { display: flex; }
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


@media (max-width: 720px) {
  .grid--cards, .grid--api, .grid--license { grid-template-columns: 1fr; }

  .table-wrap { overflow-x: auto; }
  .ptable { min-width: 560px; }

  .stats__inner { grid-template-columns: repeat(2, 1fr); gap: 1.9rem 1rem; }
  .footer__top { flex-direction: column; gap: 1.6rem; }
}

/* ============================================================
   Blogg — översikt + artikel
   ============================================================ */
.pagehead { padding-top: clamp(7rem, 12vw, 10rem); }
.pagehead .section__head { margin-bottom: 2.6rem; }

.bloglist { align-items: stretch; }
.postcard { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.postcard__meta {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-faint); font-weight: 600; margin-bottom: .9rem;
}
.postcard h2 { font-family: var(--display); font-size: 1.32rem; line-height: 1.2; margin-bottom: .6rem; }
.postcard p { color: var(--ink-soft); font-size: .98rem; line-height: 1.58; flex: 1; }
.postcard__more {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: 1.1rem;
  font-weight: 600; font-size: .92rem; color: var(--accent);
  transition: gap .25s var(--ease);
}
.postcard:hover .postcard__more { gap: .7rem; }
.bloglist__note { margin-top: 2.6rem; color: var(--ink-soft); font-size: 1.02rem; }
.bloglist__note a { color: var(--accent); font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .25s; }
.bloglist__note a:hover { border-color: var(--accent); }

/* ---- Artikel ---- */
.article { padding-top: clamp(7rem, 12vw, 10rem); }
.article > * { max-width: 760px; }
.breadcrumb { font-size: .85rem; color: var(--ink-faint); margin-bottom: 1.4rem; }
.breadcrumb a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--line); }
.breadcrumb a:hover { color: var(--accent); border-color: var(--accent); }
.article__head h1 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.1rem, 5.2vw, 3.4rem); line-height: 1.08; letter-spacing: -.025em;
  margin: .4rem 0 1.1rem;
}
.article__lead { font-size: clamp(1.12rem, 2.2vw, 1.32rem); line-height: 1.55; color: var(--ink-soft); margin-bottom: 1.3rem; }
.article__meta { font-size: .88rem; color: var(--ink-faint); padding-bottom: 1.8rem; border-bottom: 1px solid var(--line); margin-bottom: 2.4rem; }
.article__meta a { color: var(--accent-deep); text-decoration: none; font-weight: 600; }

.article__body { font-size: 1.08rem; line-height: 1.72; color: var(--ink); }
.article__body > * { margin-bottom: 1.3rem; }
.article__body h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.18; letter-spacing: -.02em; margin: 2.6rem 0 .9rem; }
.article__body p { color: var(--ink-soft); }
.article__body em { font-style: normal; color: var(--accent-deep); font-weight: 600; }
.article__body strong { color: var(--ink); font-weight: 600; }
/* Artikeltextens länkar saknade färgregel och föll tillbaka på browserblått */
.article__body a {
  color: var(--accent-deep); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 2px;
}
.article__body a:hover { color: var(--ink); }
.article__body ul { padding-left: 1.3rem; }
.article__body li { color: var(--ink-soft); margin-bottom: .55rem; }
.article__body blockquote {
  position: relative;
  margin: 2rem 0; padding: .2rem 0 .2rem 3rem;
  border-left: 1px solid var(--line);
  font-family: var(--display); font-style: italic; font-size: 1.2rem; font-weight: 500; line-height: 1.5; color: var(--ink);
}
.article__body blockquote::before {
  content: "\201C"; position: absolute; top: .1rem; left: 1rem;
  font-family: var(--display); font-style: normal; font-weight: 700;
  font-size: 2.8rem; line-height: 1; color: var(--accent);
}
.article__cta {
  margin: 3rem 0 2rem; padding: 2rem; text-align: center;
  background: var(--panel); border: 1px solid var(--panel-bord);
  border-radius: var(--r); box-shadow: var(--shadow-sm);
}
.article__cta h2 { margin-top: 0; }
.article__cta p { margin-bottom: 1.6rem; }
.article__cta .btn { margin: 0 auto; }
.article__back { padding-top: 1.4rem; border-top: 1px solid var(--line); }
.article__back a { color: var(--accent); text-decoration: none; font-weight: 600; }
.article__back a:hover { text-decoration: underline; }


/* Honeypot-fältet i bokningsformuläret. Utanför skärmen i stället för
   display:none — en del bottar hoppar över dolda fält, men fyller i det här. */
.booking__trap {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}