/* ============================================================
   VIBELY — "Gläntan" v2 · premium product
   Mörkgrön bas · guld · stillhet · precision
   Ingen viktig yta kräver JS: reveal gate:as bakom .js
   ============================================================ */

:root{
  --bg:#081512;
  --bg-deep:#050d0b;
  --bg-raise:#0c1d17;
  --bg-card:#0e211a;
  --line:rgba(217,181,109,.13);
  --line-strong:rgba(217,181,109,.32);
  /* Kant på interaktiva kontroller där kanten är den enda visuella identifieraren.
     WCAG 1.4.11 kräver 3:1. rgba(217,181,109,.5) mot --bg #081512 ger 3.22:1
     (och 3.13:1 mot ljusaste kortbotten --bg-card #0e211a). Endast för kontroller —
     dekorativa ramar och avdelare behåller --line/--line-strong. */
  --line-interactive:rgba(217,181,109,.5);
  --ink:#ece5d3;
  --ink-soft:#a7b7aa;
  --ink-faint:#7c8f81;
  --gold:#d9b56d;
  --gold-bright:#f1d99e;
  --gold-deep:#a67c22;
  --risk:#d98a6d;

  /* TYPSKALAN — sex grader mellan 9 och 26 px. Över dem tar rubrikernas clamp() vid.
     Före det här paketet låg 50 olika grader i samma spann, 46 av dem mindre än en
     pixel från grannen: åtta "brödtextgrader" (.94–1.08rem) rymdes i ett fönster på
     2,2 px. Skillnader man inte kan se är inte hierarki, de är bara brus — och bruset
     kostade läsaren orienteringen i mellanregistret. Stegen nedan ligger 2 px isär,
     vilket är det minsta som faktiskt läses som ett steg i den här storleken.
     Samma sex värden står i dungen.css, manifest.css och privacy-brochure.css: de
     sidorna laddar sina egna stilmallar och kan inte ärva de här. */
  --fs-2xs:11px;   /* versalgemena etiketter: eyebrow, tag, kicker, sidfotsrubrik */
  --fs-xs:13px;    /* stödtext: hint, bildtext, fotnot, felmeddelande */
  --fs-sm:15px;    /* gränssnitt: knapp, navlänk, fältetikett, kortbrödtext */
  --fs-md:17px;    /* brödtext — sajtens grundstorlek */
  --fs-lg:19px;    /* ordmärket, större gränssnittstext */
  --fs-xl:22px;    /* minsta rubrikgraden, strax under h3:ns clamp-tak (22,4 px) */
  /* GLYFGRADER, inte textgrader: de sätter storleken på ETT tecken — guldets › i
     summary, .path, .prob och ◆ i punktlistorna. En ikon som råkar vara ett tecken
     ska följa ikonens optik, inte textens skala, så de står utanför de sex. */
  --glyph:24px;
  --glyph-sm:10px;

  /* AVSTÅND. Sajten går på ett 2-pixelsrutnät med fyran som huvudslag: av 432 mätta
     värden ligger 42 % på fyran, 40 % på fyrans halvsteg (10/14/18/22/26 …) och 18 %
     är udda. De tre vanligaste — 18 (×34), 14 (×31), 10 (×28) — är alltså halvsteg,
     inte slarv: de bär hela sajtens vertikala puls.

     DE STÅR KVAR, och det är ett mätt beslut, inte en bekvämlighet. 22 kandidater
     provades genom att patcha regeln i den levande stilmallen och jämföra HELA
     dokumentets geometri före och efter, på sex sidor × två bredder. Alla 22 som
     renderas flyttade något: knappen, navraden, formulärfälten, kalkylatorns rader,
     sidfotens länklista, kortens bildtexter. Ett rutnätssnapp här är alltså inte en
     städning utan en omritning — och den designen är godkänd.

     Det som ÄR fixat är att man nu kan se vilket slag ett värde ligger på. Vill man
     flytta pulsen till ren fyra är det ett eget arbete med kunden, inte en följdfix.

     Enskilda avvikelser med egen motivering står kommenterade på plats — sök på
     "9px" i navraden (träffyta utan att raden växer) och "1px" i .check input. */

  /* RADIER. --radius-pill och --radius-lg fanns förut bara som literaler: 999px på 21
     ställen, och 24 px stavat både `24px` och `calc(var(--radius) + 4px)` inom samma
     block. Ett värde med två stavningar är två värden nästa gång någon ändrar. */
  --radius-xs:4px;
  --radius-sm:12px;
  --radius:20px;
  --radius-lg:24px;
  --radius-pill:999px;

  --font-display:"Fraunces", Georgia, "Times New Roman", serif;
  --font-body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --w:1160px;
  /* --ease betyder EN kurva i hela kodbasen. Dungen och manifestet hade egna kurvor
     under samma namn; de heter nu --ease-grove respektive --ease-arrive i sina filer. */
  --ease:cubic-bezier(.22,.8,.3,1);
}

/* INGEN metrik-override på fallbacken — den är PRÖVAD OCH FÖRKASTAD, mätt och inte gissad.
   Fraunces (90 kB) sitter på varje h1/h2/h3 med font-display:swap, så rubrikerna ritas
   först med Georgia. Standardgreppet är en justerad fallbackfamilj
   (@font-face{font-family:"Fraunces Fallback";src:local("Georgia");size-adjust:…})
   som next/font och fontaine genererar. Här gör den skada.

   Uppmätt i Chrome/macOS med 900 ms fördröjt svar på Fraunces-filen, summerad CLS
   över 7 sidor × 5 vybredder (360/390/412/768/1280):

     ingen fallbackfamilj (så här)   0,2517   <- bäst
     size-adjust 100 %               0,2516   (= ingen breddändring alls)
     size-adjust 94 %                0,5423
     size-adjust 92 %                0,5802
     size-adjust 90,4 %              0,5878
     size-adjust 89,02 %             0,7695

   CLS sjunker alltså monotont mot 100 % och landar exakt på utgångsläget.
   Skälet: size-adjust optimerar MEDELBREDDEN per tecken, men det som flyttar
   sidan är RADBRYTNINGEN — och Georgias naturliga bredd råkar redan ge samma
   antal rader som Fraunces för den här sidans rubriker. Varje nedskalning bryter
   den träffen: på /kontakt/ vid 390 px växte hjälten 210 -> 254 px när Fraunces
   kom, alltså exakt en h1-rad till (41,6 px × 1,06).

   Att ta bort .reveal ovanför folden påverkar inte det här: samma mätning med
   den nya markupen men utan fallbackfamilj ger 0,2517 — identiskt.

   Vill man ner till noll är font-display:optional vägen, inte metriken. Priset är
   att förstagångsbesökare på långsam uppkoppling får Georgia hela besöket, och
   det är ett designbeslut. CLS ligger i dag på 0,039 på "/" i staging, alltså
   redan inom Core Web Vitals gröna gräns (< 0,1). */
/* URL:erna är versionslösa med flit. RemakeShell förladdar de här två filerna, och
   en förladdning som inte ber om exakt samma URL som @font-face blir en andra
   hämtning i stället för en tidigare. Den här filen serveras rått ur public/ och kan
   inte läsa ASSET_VERSION, så en version här hade varit en literal som ska hållas lika
   med en konstant i TSX — utan mekanism som håller dem lika. Fullständigt skäl i
   components/remake/RemakeShell.tsx; låst av tests/unit/font-urls.test.js.
   Cachebrytningen sköts av filnamnet (som redan bär sitt subset) plus max-age=604800
   i staticwebapp.config.json. */
@font-face{
  font-family:"Fraunces";
  src:url("/manifest/manifest-assets/Fraunces-latin.woff2") format("woff2");
  font-weight:300 600;
  font-style:normal;
  font-display:swap;
}
/* Familjenamnet säger vad filen ÄR. Brödtexten deklarerades som "Instrument
   Sans" men filen är Inter Regular 4.001 (namntabellen), så tokens ljög för
   den som läste dem — besökaren har alltid sett Inter. Namnet följer filen;
   byts typsnittet på riktigt ska filen, namnet och den här raden bytas ihop. */
@font-face{
  font-family:"Inter";
  src:url("/manifest/manifest-assets/Inter-latin.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px;color-scheme:dark;accent-color:var(--gold);
  -webkit-tap-highlight-color:transparent;scrollbar-color:rgba(217,181,109,.35) transparent}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{background:var(--bg);color:var(--ink);font-family:var(--font-body);
  font-size:var(--fs-md);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.nav-open{overflow:hidden;overscroll-behavior:none}
::selection{background:rgba(217,181,109,.28);color:var(--gold-bright)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(217,181,109,.26);border:3px solid transparent;border-radius:var(--radius-pill);background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(217,181,109,.42);border:3px solid transparent;background-clip:padding-box}

/* ---------- Atmosfär ---------- */
.grove{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;
  background:radial-gradient(120% 90% at 70% -10%, #0b1d16 0%, var(--bg) 55%, var(--bg-deep) 100%)}
.grove::after{content:"";position:absolute;inset:-50%;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}
.orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:.45;will-change:transform}
.orb-gold{width:52vmax;height:52vmax;top:-26vmax;right:-10vmax;
  background:radial-gradient(circle at 45% 45%, rgba(217,181,109,.16), transparent 62%)}
.orb-green{width:74vmax;height:74vmax;bottom:-38vmax;left:-24vmax;
  background:radial-gradient(circle at 55% 45%, rgba(24,58,44,.7), transparent 65%)}
@media (prefers-reduced-motion:no-preference){
  .orb-gold{animation:drift 52s var(--ease) infinite alternate}
  .orb-green{animation:drift 64s var(--ease) infinite alternate-reverse}}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-5vmax,4vmax,0) scale(1.06)}}

/* ---------- Grund ---------- */
.wrap{max-width:var(--w);margin:0 auto;padding:0 24px}
img{max-width:100%;display:block}
a{color:var(--gold);text-decoration:none;transition:color .25s}
a:hover{color:var(--gold-bright)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:var(--radius-xs)}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--bg);
  padding:10px 18px;border-radius:0 0 var(--radius-sm) 0;font-weight:600;z-index:99}
.skip:focus{left:0}

h1,h2,h3{font-family:var(--font-display);font-weight:480;line-height:1.06;letter-spacing:-.015em}
h1{font-size:clamp(2.6rem,6.4vw,4.9rem)}
h2{font-size:clamp(1.9rem,4vw,3.1rem)}
h3{font-size:clamp(1.1rem,1.9vw,1.4rem);font-weight:540}
h1,h2,h3{overflow-wrap:break-word;text-wrap:balance}
.lede,.prob span{text-wrap:pretty}
/* SOFT-axeln fanns på EN rad i hela stilmallen: guldkursiven nedan. Följden var en
   personlighetsklyfta inuti samma rubrik — "Det Vibely Team levererar." såg ut att
   vara satt i två typsnitt, för den raka delen stod på Fraunces plainaste skärning
   (SOFT 0) medan kursiven låg på SOFT 60. Rubriken får därför en egen mjuknad så att
   raden hänger ihop, och de två största graderna en till, eftersom axeln syns bättre
   ju större graden är. WONK ligger på 1 som standard i filen; den skrivs ut bara där
   deklarationen ändå räknar upp axlarna, för att inte se ut som en tyst standard.
   Axlarna är verifierade i den subsettade filen: opsz 9–144, wght 100–900,
   SOFT 0–100, WONK 0–1. .prob p står här och inte bland rubrikerna för att den bär
   samma guldkursiv i samma displaygrad — utan raden hade klyftan bara flyttat dit.
   Sidfotens h2 träffas också av selektorn men står i brödtextsnittet, som saknar
   axeln; deklarationen är alltså verkningslös där och behöver inget undantag. */
h1,h2,.prob p{font-variation-settings:"SOFT" 20}
.trust-lines p,.finale h2{font-variation-settings:"SOFT" 30,"WONK" 1}
h1 em,h2 em,.prob em{font-style:italic;color:var(--gold);font-variation-settings:"SOFT" 60,"WONK" 1}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-2xs);font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold);opacity:.6}
.lede{color:var(--ink-soft);font-size:clamp(var(--fs-md),1.6vw,1.3rem);max-width:30em;line-height:1.55}

section{padding:clamp(68px,9vw,124px) 0;position:relative}
.sect-head{max-width:680px;margin-bottom:clamp(34px,4vw,54px)}
.tight{padding-top:clamp(34px,4.5vw,60px);padding-bottom:clamp(54px,7vw,92px)}

/* ---------- Nav ---------- */
.nav{position:absolute;inset:0 0 auto 0;z-index:50;transition:background .3s,border-color .3s;
  border-bottom:1px solid transparent}
.nav.scrolled{background:transparent;border-color:transparent;box-shadow:none}
body.nav-open .nav{position:fixed;background:rgba(6,13,11,.98);border-color:var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink);font-family:var(--font-display);
  font-size:var(--fs-lg)}
.brand img{width:32px;height:32px;filter:drop-shadow(0 0 14px rgba(217,181,109,.45))}
.brand:hover{color:var(--gold-bright)}
.nav-links{display:flex;align-items:center;gap:34px;list-style:none}
/* padding 9px (inte 6px) ger ≥24px träffyta (WCAG 2.5.8) utan att nav-raden växer —
   inline-padding påverkar inte layouten. ::after kompenseras med bottom:3px så
   understrykningen ligger kvar exakt där den låg. */
.nav-links a{color:var(--ink-soft);font-size:var(--fs-sm);letter-spacing:.02em;position:relative;padding:9px 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:3px;height:1px;width:0;
  background:var(--gold);transition:width .3s var(--ease)}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--ink)}
.nav-links a:hover::after,.nav-links a[aria-current]::after{width:100%}
.nav-cta{margin-left:8px}
.nav-links .nav-cta .btn{min-height:42px;padding:10px 18px;border-radius:var(--radius-pill);
  color:#06110d;background:linear-gradient(135deg,#f6dfaa 0%,var(--gold-bright) 42%,#d3a155 100%);
  border:1px solid rgba(255,248,232,.58);font-size:var(--fs-sm);font-weight:700;letter-spacing:.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.46),inset 0 -1px 0 rgba(85,54,10,.22),0 14px 36px -24px rgba(241,217,158,.86)}
.nav-links .nav-cta .btn::after{display:none}
.nav-links .nav-cta .btn:hover{color:#06110d;background:linear-gradient(135deg,#ffe8b7 0%,#f4d996 46%,#d7a85b 100%);
  transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.58),0 18px 44px -24px rgba(241,217,158,.96)}
.nav-links .nav-cta .btn:active{transform:translateY(1px)}
/* Språkväljaren (nav.nav-lang med en <a> per språk, renderad av RemakeShell).
   .nav-links .nav-lang a väger tyngre än både .nav-links a och mobilregeln, så
   växlaren behåller sin kompakta form i mobilmenyn. min 34×34 px klarar WCAG 2.5.8
   (24×24). Färg och understrykning ärvs från .nav-links a respektive a[aria-current]
   — samma kontrast som resten av menyn. */
.nav-lang{display:flex;align-items:center;gap:10px}
.nav-links .nav-lang a{display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;min-height:34px;padding:9px 6px;font-size:var(--fs-xs);letter-spacing:.08em}
.nav-toggle{display:none;background:none;border:1px solid var(--line-interactive);border-radius:var(--radius-sm);
  color:var(--ink);padding:9px 12px;font:inherit;cursor:pointer}
@media(max-width:860px){
  .nav{position:fixed;background:rgba(6,13,11,.78);border-color:var(--line);
    isolation:isolate}
  .nav.scrolled{background:rgba(6,13,11,.94);border-color:var(--line)}
  .nav-links{position:fixed;top:76px;right:0;bottom:0;left:0;height:calc(100vh - 76px);height:calc(100dvh - 76px);
    min-height:0;flex-direction:column;align-items:stretch;
    gap:0;padding:18px 24px calc(24px + env(safe-area-inset-bottom));background:rgba(6,13,11,.985);backdrop-filter:blur(18px);
    display:flex;opacity:0;visibility:hidden;pointer-events:none;overflow-y:auto;
    transition:opacity .2s var(--ease),visibility 0s .2s}
  .nav-links.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .2s var(--ease)}
  .nav-links li:not(.nav-cta){border-bottom:1px solid var(--line)}
  .nav-links a{display:block;font-size:clamp(1.55rem,7vw,2.2rem);padding:17px 0;font-family:var(--font-display)}
  .nav-links a::after{display:none}
  .nav-links .nav-lang{gap:20px}
  .nav-links .nav-lang a{font-family:var(--font-body);font-size:var(--fs-md);padding:14px 6px}
  .nav-toggle{display:block}
  .nav-cta{margin:auto 0 0;padding-top:24px;width:100%}
  .nav-links .nav-cta .btn{width:100%;justify-content:center;padding:13px 20px;font-family:var(--font-body);font-size:var(--fs-md)}}

/* ---------- Knappar ---------- */
/* background:transparent syns bara på ett enda ställe i dag — kalkylatorns
   återställningsknapp, sajtens enda <button class="btn"> utan .btn-gold eller
   .btn-ghost ovanpå. Utan egen bakgrund ärvde den webbläsarens ButtonFace och
   ritades som en solid grå platta (uppmätt rgb(107,107,107)) mitt i kalkylatorn.
   Länkarna med .btn har aldrig haft problemet: <a> har ingen systembakgrund. */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:var(--radius-pill);
  font-weight:600;font-size:var(--fs-sm);border:1px solid transparent;background:transparent;cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;font-family:var(--font-body)}
.btn-gold{background:var(--gold-bright);color:#07110d;border-color:rgba(255,248,232,.4);
  font-weight:700;text-shadow:none;box-shadow:inset 0 0 0 1px rgba(6,13,11,.16)}
.btn-gold:hover{transform:translateY(-1px);background:#e8c979;box-shadow:0 12px 34px -18px rgba(217,181,109,.72);color:#07110d}
.btn-ghost{border-color:var(--line-interactive);color:var(--ink)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-bright);transform:translateY(-1px)}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}

/* ---------- Hero ---------- */
.hero{min-height:100svh;display:flex;align-items:center;padding:120px 0 60px}
/* .hero är flex för att kunna centrera innehållet vertikalt — och det gör .wrap till
   ett flexbarn, som krymper till sitt innehåll i stället för att fylla raden. Då
   biter varken max-width:1160px eller margin:0 auto som avsett: blocket centreras i
   VIEWPORTEN, inte i innehållskolumnen, och indraget blir en funktion av hur lång
   rubriken råkar vara. Uppmätt vid 1440 px låg hjältetexten på /tjanster/ 244 px
   till höger om sidans övriga kolumn, och hoppade 69 px i sidled bara av att byta
   språk. width:100% ger tillbaka radbredden; max-width sköter resten. */
.hero .wrap{width:100%}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr}.hero{min-height:auto;padding-top:130px}}
.hero .lede{margin:26px 0 40px}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.hero-note{margin-top:26px;font-size:var(--fs-xs);color:var(--ink-faint);letter-spacing:.04em}
/* Bottenluften finns för att väga upp texten mot högerkolumnen i tvåkolumnsrastret.
   Under 960 px finns ingen högerkolumn kvar att väga mot — då är det bara tom yta
   under sista knappen, och den låg först i vyn. */
.hero-sub{padding-bottom:clamp(56px,8vw,96px)}
@media(max-width:960px){.hero-sub{padding-bottom:0}}
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  width:1px;height:56px;background:linear-gradient(var(--gold),transparent);opacity:.6}
body.has-scrolled .scroll-cue{opacity:0;transition:opacity .35s var(--ease)}
@media (prefers-reduced-motion:no-preference){.scroll-cue{animation:cue 2.6s ease-in-out infinite}}
@media(max-width:960px){.scroll-cue{display:none}}
@keyframes cue{0%,100%{opacity:.15;transform:translate(-50%,0)}50%{opacity:.7;transform:translate(-50%,8px)}}

/* ---------- Hero-atmosfär (originalets ring) + flytande panel ---------- */
.hero{isolation:isolate}
.hero-atmos{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero-atmos img{width:100%;height:100%;object-fit:cover;object-position:68% 40%}
.hero-services .hero-atmos img{object-position:58% 46%}
.hero-courses .hero-atmos img{object-position:56% 52%}
.hero h1{text-shadow:0 1px 30px rgba(8,21,18,.6)}
.hero-atmos::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(8,21,18,.94) 0%, rgba(8,21,18,.72) 34%, rgba(8,21,18,.18) 62%, rgba(8,21,18,.05) 100%),
    linear-gradient(rgba(8,21,18,.55), transparent 26% 72%, var(--bg) 99%)}
@media(max-width:960px){
  .hero-atmos img{object-position:72% 42%}
  .hero-services .hero-atmos img{object-position:62% 48%}
  .hero-courses .hero-atmos img{object-position:58% 52%}
  .hero-atmos::after{background:linear-gradient(rgba(8,21,18,.82), rgba(8,21,18,.66) 55%, var(--bg) 98%)}}
/* HÄR LÅG EN KEN BURNS-ZOOM på hjältebilden (@keyframes atmos, 26 s, scale 1 → 1,045).
   Startsidan körde tre samtidiga tomgångsslingor bakom samma text — orbarnas 52 och
   64 s plus den här. Ingen av dem svarar på något besökaren gör, men den här låg
   direkt bakom rubriken: en bild som sakta växer under stillastående text läses inte
   som liv utan som att sidan inte står stilla. Orbarna ligger kvar; de rör sig i
   suddig bakgrund och konkurrerar inte med läsningen. */


/* ---------- UI-mockups (gruppnivå) ---------- */
.tag{font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  border:1px solid var(--line-strong);border-radius:var(--radius-pill);padding:4px 12px;white-space:nowrap}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.chips span{font-size:var(--fs-xs);border:1px solid var(--line);border-radius:var(--radius-pill);padding:5px 12px;color:var(--ink-soft)}
.mission{border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px;margin-top:8px;
  background:rgba(217,181,109,.04)}
.mission b{display:block;color:var(--ink);margin-bottom:4px}
.mission span{font-size:var(--fs-xs);color:var(--ink-soft)}

/* ---------- Problemet ---------- */
.prob-list{display:flex;flex-direction:column}
.prob{display:block;
  --prob-pad:clamp(26px,4vw,44px);
  --prob-title:clamp(1.5rem,3.6vw,2.6rem);
  padding:var(--prob-pad) 0;border-top:1px solid var(--line);position:relative;
  cursor:pointer;transition:background .28s var(--ease),padding-left .28s var(--ease)}
.prob::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,var(--gold),transparent);
  opacity:.72;transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
@media(hover:hover){.prob:hover{background:rgba(217,181,109,.035);padding-left:12px}.prob:hover::before{transform:scaleX(1)}}
.prob:last-child{border-bottom:1px solid var(--line)}
.prob p{font-family:var(--font-display);font-size:var(--prob-title);line-height:1.15;font-weight:460}
.prob span{display:block;font-family:var(--font-body);font-size:clamp(var(--fs-sm),1.3vw,var(--fs-md));
  color:var(--ink-soft);margin-top:10px;max-width:34em}
.prob .prob-detail{max-height:0;overflow:hidden;opacity:0;margin-top:0;color:var(--gold-bright);
  transition:max-height .32s var(--ease),opacity .2s ease,margin-top .32s var(--ease)}
.prob:hover .prob-detail,.prob:focus .prob-detail,.prob.open .prob-detail{max-height:8em;opacity:.82;margin-top:8px}
.prob:focus-visible{outline-offset:8px}
/* Raderna var role="button" aria-expanded utan en enda synlig ledtråd om att de går
   att fälla ut. På desktop avslöjade hovern texten; på mobil finns ingen hover, och
   då satt hela detaljinnehållet bakom en osynlig tryckyta. Samma guld-› som
   summary::after, roterad nedåt i stängt läge och uppåt i öppet — den kopplar ihop
   raden med sajtens andra utfällbara yta i stället för att uppfinna en egen symbol.
   Chevronen ligger absolut placerad och tar därför ingen plats i flödet: rutan är
   exakt titelns första radhöjd, så tecknet centreras mot rubriken oavsett bredd,
   och rubrikerna är korta nog (bredast 257 px av 1112 vid 1440, 151 av 327 vid 375)
   att texten aldrig når fram till den. Rutan är kvadratisk (1em) för att rotationen
   sker kring dess mitt — med en ruta bara så bred som tecknet hade den liggande
   pilen stuckit ut utanför spalten. Enbart CSS: .open sätts redan av vibely.js. */
.prob::after{content:"›";position:absolute;right:0;top:var(--prob-pad);
  width:1em;height:calc(var(--prob-title) * 1.15);display:grid;place-items:center;
  font-family:var(--font-display);font-size:var(--glyph);line-height:1;
  color:var(--gold);opacity:.65;transform:rotate(90deg);
  transition:transform .28s var(--ease),opacity .28s var(--ease)}
/* :focus står utanför hover-frågan av samma skäl som .prob:focus .prob-detail gör
   det: tangentbordet fäller ut raden på varje enhet, och då ska pilen följa med. */
.prob.open::after,.prob:focus::after{opacity:1;transform:rotate(-90deg)}
@media(hover:hover){.prob:hover::after{opacity:1;transform:rotate(-90deg)}}

/* ---------- Tvåspaltslayout (pin-wrap) — scroll-storyn som gav namnet är borta; produktvideon använder gridden ---------- */
.pin-wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,88px);align-items:start}
@media(max-width:900px){.pin-wrap{grid-template-columns:1fr}}

/* ---------- Trust / integritet ---------- */
.trust{text-align:center}
.trust-lines{display:flex;flex-direction:column;gap:clamp(6px,1.4vw,14px);margin:0 auto}
.trust-lines p{font-family:var(--font-display);font-size:clamp(1.8rem,5vw,3.6rem);line-height:1.1;font-weight:460}
.trust-lines .gold{color:var(--gold-bright)}
.trust-sub{margin:34px auto 0;max-width:34em;color:var(--ink-soft)}

/* ---------- Kort (kvar men lugnare) ---------- */
.card{background:linear-gradient(160deg,var(--bg-card),var(--bg-raise));
  border:1px solid var(--line);border-radius:var(--radius);padding:32px;
  transition:transform .4s var(--ease),border-color .4s;position:relative;overflow:hidden}
@media(hover:hover){
  .card:hover{transform:none;border-color:rgba(217,181,109,.4)}}
.card::before,.path::before,.team-readiness-card::after,.calc::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .24s var(--ease);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(241,217,158,.16),transparent 42%);
  mix-blend-mode:screen}
@media(pointer:fine) and (prefers-reduced-motion:no-preference){
  .card.is-lit::before,.panel.is-lit::before,.path.is-lit::before,.team-readiness-card.is-lit::after,.calc.is-lit::before{opacity:1}
}
.card .num{font-family:var(--font-display);font-style:italic;color:var(--gold);
  font-size:var(--fs-sm);letter-spacing:.06em;display:block;margin-bottom:14px}
.card h3{margin-bottom:10px}
.card p{color:var(--ink-soft);font-size:var(--fs-sm)}
.service-card{display:flex;flex-direction:column;min-height:100%}
.service-card .btn{margin-top:auto}
.team-card{padding:24px 24px 28px}
.team-portrait{aspect-ratio:4/5;margin:0 0 20px;overflow:hidden;border-radius:var(--radius-sm);
  border:1px solid rgba(217,181,109,.22);background:linear-gradient(160deg,rgba(217,181,109,.08),rgba(255,248,232,.02))}
.team-portrait img{width:100%;height:100%;object-fit:cover;object-position:var(--portrait-position,50% 36%);
  filter:saturate(.9) contrast(1.04);transform:scale(1.01)}
@media(max-width:640px){.team-card{padding:22px}.team-portrait{aspect-ratio:16/13;max-height:340px}}

/* ---------- Om oss: inkorporerat AI-manifest ---------- */
.manifest-inline{display:grid;grid-template-columns:minmax(0,.72fr) minmax(360px,1fr);
  gap:clamp(28px,6vw,82px);align-items:center}
.manifest-copy h2{margin-bottom:18px}
.manifest-paper-wrap{position:relative;perspective:1400px}
.paper{position:relative;max-width:780px;margin:0 auto;
  padding:clamp(36px,5vw,68px);overflow:hidden;border:1px solid rgba(217,181,109,.34);
  border-radius:var(--radius-lg);color:#122822;
  background:
    linear-gradient(115deg,rgba(255,255,255,.56),rgba(255,255,255,0) 34%),
    radial-gradient(circle at 18% 22%,rgba(217,181,109,.13),transparent 30%),
    repeating-linear-gradient(0deg,rgba(18,40,34,.024),rgba(18,40,34,.024) 1px,transparent 1px,transparent 9px),
    #fff9ec;
  box-shadow:0 50px 120px rgba(0,0,0,.36),inset 0 0 0 1px rgba(255,255,255,.46)}
.paper::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:.5;pointer-events:none;
  background:linear-gradient(90deg,rgba(217,181,109,.28),transparent 18%,transparent 82%,rgba(217,181,109,.18))}
.paper::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.35;
  background-image:linear-gradient(90deg,rgba(18,40,34,.035) 1px,transparent 1px),
  linear-gradient(rgba(18,40,34,.022) 1px,transparent 1px);background-size:86px 86px}
@media (prefers-reduced-motion:no-preference){
  .paper{animation:paperFloat 12s ease-in-out infinite}}
@keyframes paperFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.letterhead{display:flex;justify-content:space-between;align-items:center;gap:16px;
  border-bottom:1px solid rgba(217,181,109,.25);padding-bottom:clamp(18px,2.8vw,30px);position:relative;z-index:1}
.letterhead .lh-brand{display:flex;align-items:center;gap:12px;font-family:var(--font-display);
  font-size:var(--fs-xl);color:#122822}
.letterhead img{width:32px;height:32px}
.letterhead span{font-size:var(--fs-2xs);letter-spacing:.22em;text-transform:uppercase;color:#5d6f60}
.ink-title{font-family:"Caveat",var(--font-display),cursive;font-style:normal;font-weight:700;
  color:#10251f;font-size:clamp(2.3rem,5.2vw,4.8rem);line-height:1.02;margin:clamp(34px,5vw,62px) 0 18px;position:relative;z-index:1}
.ink{font-family:"Caveat",var(--font-display),cursive;font-style:normal;font-weight:500;
  color:#17352d;font-size:clamp(1.55rem,3.35vw,3rem);line-height:1.1;position:relative;z-index:1}
.ink .w,.ink-title .w{display:block}
.sign-row{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-top:clamp(38px,5vw,66px);position:relative;z-index:1}
.signature{font-family:"Great Vibes","Snell Roundhand","Apple Chancery",cursive;
  color:#1b3b33;font-size:clamp(2.3rem,5vw,4.4rem);line-height:.86;transform:rotate(-3deg)}
.signature small{display:block;font-family:var(--font-body);font-size:var(--fs-2xs);
  letter-spacing:.16em;text-transform:uppercase;color:#6c7b6d;margin-top:14px;transform:rotate(3deg)}
.seal{width:clamp(80px,11vw,108px);aspect-ratio:1;border-radius:50%;flex:none;
  display:grid;place-items:center;border:1px solid rgba(217,181,109,.34);
  background:rgba(255,249,236,.36);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);transform:rotate(-8deg)}
.seal img{width:52%}
.js .paper .ww{clip-path:inset(-30% 108% -30% -8%);filter:blur(2.5px);
  transform:translateY(.18em);opacity:.45;display:inline-block}
.js .paper.go .ww{clip-path:inset(-30% -8% -30% -8%);filter:blur(0);transform:none;opacity:1;
  transition:clip-path var(--wt) var(--ease),filter var(--wt) var(--ease),transform var(--wt) var(--ease),opacity var(--wt) var(--ease);
  transition-delay:var(--wd)}
.js .paper .signature,.js .paper .seal{opacity:0}
.js .paper.go .signature{opacity:1;transition:opacity 1.4s var(--ease);transition-delay:var(--sd,0s)}
.js .paper.go .seal{opacity:1;transform:scale(1) rotate(-8deg);
  transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--kd,0s)}
.js .paper:not(.go) .seal{transform:scale(1.5) rotate(-8deg)}
@media(max-width:900px){
  .manifest-inline{grid-template-columns:1fr}
  .paper{padding:34px 26px}
  .letterhead{align-items:flex-start}
  .sign-row{align-items:center}
}
@media (prefers-reduced-motion:reduce){
  .paper{animation:none}
  .js .paper .ww{clip-path:none;filter:none;transform:none;opacity:1}
  .js .paper .signature,.js .paper .seal{opacity:1;transform:rotate(-8deg)}
  .js .paper .signature{transform:rotate(-3deg)}
  .js .paper.go .ww,.js .paper.go .signature,.js .paper.go .seal{transition:none}
}

.podcast-card{display:grid;grid-template-columns:minmax(112px,154px) 1fr;gap:26px;align-items:center}
.podcast-cover{aspect-ratio:1;margin:0;overflow:hidden;border-radius:var(--radius-sm);
  border:1px solid rgba(217,181,109,.26);background:#050806;box-shadow:inset 0 0 0 1px rgba(255,248,232,.04)}
.podcast-cover img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.82) contrast(1.02)}
.podcast-copy h3{font-size:clamp(1.45rem,2.2vw,1.75rem);margin-bottom:8px}
.podcast-copy p{margin:0 0 16px}
.podcast-link{display:inline-flex;align-items:center;gap:10px;color:var(--gold-bright);font-weight:700}
.podcast-link img{width:20px;height:20px;flex:none}
@media(max-width:640px){.podcast-card{grid-template-columns:92px 1fr;gap:18px;padding:22px}.podcast-copy h3{font-size:var(--fs-lg)}}

/* ---------- Team readiness quiz ---------- */
.team-readiness{overflow:hidden;background:
  radial-gradient(circle at 84% 10%,rgba(217,181,109,.14),transparent 34%),
  linear-gradient(180deg,rgba(8,21,18,.98),rgba(5,13,11,.96));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.team-readiness-inner{display:grid;grid-template-columns:minmax(0,.76fr) minmax(390px,.84fr);
  gap:clamp(26px,4vw,52px);align-items:center}
.team-readiness-copy{display:grid;gap:14px;max-width:650px}
.team-readiness-copy h2{max-width:10ch}
.team-readiness-note{max-width:540px;color:var(--ink-soft);font-weight:600}
.team-readiness-card{position:relative;min-height:430px;overflow:hidden;border:1px solid var(--line);
  border-radius:var(--radius);background:linear-gradient(160deg,var(--bg-card),var(--bg-raise));
  box-shadow:inset 0 1px 0 rgba(255,248,232,.04)}
.team-readiness-card::before{content:"";position:absolute;inset:0;pointer-events:none;
  border-top:1px solid rgba(217,181,109,.34);background:
  radial-gradient(circle at 92% 8%,rgba(217,181,109,.16),transparent 30%),
  linear-gradient(rgba(217,181,109,.035) 1px,transparent 1px),
  linear-gradient(90deg,rgba(217,181,109,.028) 1px,transparent 1px);
  background-size:auto,72px 72px,72px 72px}
.team-readiness-start,.team-readiness-question,.team-readiness-result{position:relative;z-index:1;
  display:grid;min-height:430px;align-content:center;gap:15px;padding:clamp(22px,3vw,34px)}
.team-readiness-start[hidden],.team-readiness-question[hidden],.team-readiness-result[hidden]{display:none!important}
/* Riktade övergångar. Förut spelade fram och tillbaka samma animation, så "nästa"
   och "föregående" kändes likadant — och en wizard vars enda navigering är fram och
   tillbaka har ingenting annat att berätta riktningen med. Nya panelen kommer nu in
   från den sida den kommer ifrån: framåt från höger, bakåt från vänster. Rörelsen är
   liten (6 px) med flit; den ska svara på "vart tog jag vägen", inte dra blicken.
   Klasserna sätts av team-readiness-quiz.js, som är det enda stället riktningen finns. */
.team-readiness-question.quiz-shift,.team-readiness-result.quiz-shift,.team-readiness-start.quiz-shift{
  animation:quizShift .3s var(--ease) both}
.team-readiness-question.quiz-shift-back,.team-readiness-result.quiz-shift-back,.team-readiness-start.quiz-shift-back{
  animation:quizShiftBack .3s var(--ease) both}
@keyframes quizShift{from{opacity:0;transform:translateX(6px)}to{opacity:1;transform:none}}
@keyframes quizShiftBack{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.team-readiness-card-kicker,.team-readiness-result-label{width:fit-content;color:var(--gold);
  font-size:var(--fs-2xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase}
/* Kortets rubrik är en h3 i en sektion vars egen h2 står tvärs över gången. Den gamla
   graden gav 50,4 px vid 1440 mot h2:ns 49,6 — frågan var alltså STÖRRE än rubriken
   den lyder under, och vid 375 exakt lika stor (30,4). Här ligger den en grad under
   h2 i båda ändar: 25,6 mot 30,4 vid 375 och 43,2 mot 49,6 vid 1440. */
.team-readiness-start h3,.team-readiness-question h3,.team-readiness-result h3{font-size:clamp(1.6rem,3vw,2.8rem);
  line-height:1;margin:0}
.team-readiness-question h3:focus,.team-readiness-result h3:focus{outline:none}
.team-readiness-start p,.team-readiness-result>p{max-width:560px;color:var(--ink-soft);font-size:clamp(var(--fs-sm),1.2vw,var(--fs-md))}
.team-readiness-inline-start,.team-readiness-actions button{width:fit-content;min-height:44px;border:1px solid var(--line-interactive);
  border-radius:var(--radius-pill);padding:0 18px;background:rgba(255,248,232,.04);color:var(--ink);font:inherit;
  font-size:var(--fs-xs);font-weight:700;cursor:pointer;transition:transform .25s var(--ease),border-color .25s,background .25s}
.team-readiness-inline-start:hover,.team-readiness-actions button:hover,.team-readiness-inline-start:focus-visible,.team-readiness-actions button:focus-visible{
  border-color:var(--gold);background:rgba(217,181,109,.08);color:var(--gold-bright);transform:translateY(-1px)}
.team-readiness-progress{display:grid;gap:8px;color:var(--ink-faint);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.team-readiness-progress div{height:3px;overflow:hidden;background:rgba(255,248,232,.1)}
.team-readiness-progress i{display:block;width:12.5%;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-bright));
  transition:width .26s var(--ease)}
.team-readiness-options{display:grid;gap:8px}
.team-readiness-option{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:center;width:100%;
  min-height:58px;border:1px solid var(--line-interactive);border-radius:var(--radius-sm);padding:11px 13px;
  background:rgba(255,248,232,.035);color:var(--ink);font:inherit;text-align:left;cursor:pointer;
  transition:transform .22s var(--ease),border-color .22s,background .22s}
.team-readiness-option span{display:grid;width:30px;height:30px;place-items:center;border:1px solid var(--line-strong);
  border-radius:50%;color:var(--gold);font-size:var(--fs-2xs);font-weight:700}
.team-readiness-option strong{color:var(--ink);font-size:clamp(var(--fs-sm),1.25vw,var(--fs-md));line-height:1.42}
.team-readiness-option:hover,.team-readiness-option:focus-visible,.team-readiness-option[aria-pressed="true"]{
  border-color:rgba(217,181,109,.58);background:rgba(217,181,109,.08);transform:translateY(-1px)}
.team-readiness-error{margin:-4px 0 0;color:var(--risk);font-size:var(--fs-sm);font-weight:700}
.team-readiness-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.team-readiness-actions button:disabled{cursor:not-allowed;opacity:.45;transform:none}
.team-readiness-recommendation{display:grid;gap:6px;padding:16px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:rgba(255,248,232,.035)}
.team-readiness-recommendation span{color:var(--gold);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.team-readiness-recommendation p{margin:0;color:var(--ink-soft);font-size:var(--fs-md);font-weight:600;line-height:1.52}
.team-readiness-result-actions{justify-content:flex-start}
.team-readiness-secondary-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;
  border:1px solid var(--line-interactive);border-radius:var(--radius-pill);padding:0 18px;color:var(--ink);font-size:var(--fs-sm);font-weight:700;
  transition:transform .25s var(--ease),border-color .25s,color .25s}
.team-readiness-secondary-link:hover,.team-readiness-secondary-link:focus-visible{border-color:var(--gold);color:var(--gold-bright);transform:translateY(-1px)}
.team-readiness-secondary-link[hidden]{display:none!important}
.team-readiness[data-result="vibely_direct"] .team-readiness-result-label{color:#8ed0aa}
.team-readiness[data-result="vibely_with_startup"] .team-readiness-result-label,
.team-readiness[data-result="course_first"] .team-readiness-result-label{color:var(--gold-bright)}
.team-readiness[data-result="services_first"] .team-readiness-result-label{color:var(--risk)}
@media(max-width:980px){.team-readiness-inner{grid-template-columns:1fr}.team-readiness-copy h2{max-width:12ch}}
@media(max-width:640px){.team-readiness-card,.team-readiness-start,.team-readiness-question,.team-readiness-result{min-height:0}
  .team-readiness-start,.team-readiness-question,.team-readiness-result{padding:22px}
  .team-readiness-option{grid-template-columns:30px minmax(0,1fr);min-height:60px;padding:12px}
  .team-readiness-option span{width:28px;height:28px}
  .team-readiness-actions{display:grid;grid-template-columns:1fr}
  .team-readiness-actions .btn,.team-readiness-actions .team-readiness-secondary-link,.team-readiness-actions button,.team-readiness-inline-start{width:100%}}
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
/* Varje .grid-3 på sajten bär exakt tre kort. Två kolumner gav därför alltid ett
   ensamt kort på rad två med en tom cell bredvid — uppmätt 370×491 px vid 768.
   En rak enkolumnare läser bättre än en föräldralös. */
@media(max-width:940px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:1fr}}
@media(max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ---------- Vägar in (slimmat) ---------- */
.paths{display:flex;flex-direction:column}
.path{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;position:relative;overflow:hidden;
  padding:clamp(22px,3vw,34px) 8px;border-top:1px solid var(--line);color:var(--ink);
  transition:padding-left .3s var(--ease),background .3s}
.path:last-child{border-bottom:1px solid var(--line)}
.path:hover{background:rgba(217,181,109,.04);padding-left:20px;color:var(--ink)}
.path h3{font-size:clamp(1.3rem,2.4vw,1.8rem)}
.path p{color:var(--ink-soft);font-size:var(--fs-sm);margin-top:4px}
.path .arr{color:var(--gold);font-size:var(--glyph);transition:transform .3s var(--ease)}
.path:hover .arr{transform:translateX(6px)}

/* ---------- Reveal (endast med JS) ---------- */
.js .reveal{opacity:0;transform:translateY(12px)}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}}
.js .reveal.in{opacity:1;transform:none;transition:opacity .42s var(--ease),transform .42s var(--ease);
  transition-delay:var(--d,0s)}
/* Produktmodulerna växlar sida — text/klipp, klipp/text — men växlingen fanns bara som
   ett faktum i layouten: alla fyra tonade in likadant nedifrån, så ögat fick upptäcka
   alterneringen själv. Nu glider varje spalt in från sin egen kant, och då hörs
   växlingen som en rytm när man scrollar förbi.
   Första barnet är alltid vänsterspalten: modulerna utan order-attribut har DOM-ordning
   = visuell ordning, och de med order sätter :1 på just det element som står först.
   Under 901 px finns ingen sidled att komma från — då gäller den vanliga inglidningen.
   Regeln för .in måste stå sist: den har samma specificitet som de riktade och skulle
   annars inte kunna nolla dem. */
@media(min-width:901px) and (prefers-reduced-motion:no-preference){
  .js .product-video-layout>.reveal:first-child{transform:translate(-16px,8px)}
  .js .product-video-layout>.reveal:last-child{transform:translate(16px,8px)}
  .js .product-video-layout>.reveal.in{transform:none}
}

/* ---------- Kalkylator ---------- */
.calc{border:1px solid var(--line);border-radius:var(--radius-lg);
  background:linear-gradient(165deg, rgba(14,33,26,.7), rgba(8,21,18,.5));
  padding:clamp(22px,3.2vw,42px);display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(22px,3.5vw,46px);
  position:relative;overflow:hidden}
.calc-section .sect-head{margin-bottom:clamp(28px,3.5vw,44px)}
@media(max-width:900px){.calc{grid-template-columns:1fr}}
.calc label{display:block;font-weight:600;margin:28px 0 8px;font-size:var(--fs-sm)}
.calc label:first-of-type{margin-top:0}
.calc .hint{font-size:var(--fs-xs);color:var(--ink-faint);margin-top:5px}
.calc-assumption{display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:baseline;
  margin:24px 0 20px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.calc-assumption span{font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.calc-assumption strong{font-family:var(--font-display);font-weight:520;color:var(--ink)}
.calc-assumption small{grid-column:2;color:var(--gold-bright);font-variant-numeric:tabular-nums}
.calc output{float:right;color:var(--gold-bright);font-variant-numeric:tabular-nums;font-weight:600}
/* Reglage: elementet bär träffytan (24px, WCAG 2.5.8), spåret ligger kvar på 3px men
   flyttat till pseudoelementen. Reglaget är inline-block och baselinar mot sin
   underkant, så negativ margin-top krymper marginalboxen tillbaka till de 3px som
   raden byggde på förut, och relativ förskjutning lägger tillbaka spåret på exakt
   samma pixel. Kalkylatorn renderas identiskt — bara träffytan växer. */
input[type=range]{width:100%;appearance:none;-webkit-appearance:none;height:24px;
  margin-top:calc(3px - 24px);position:relative;top:calc((24px - 3px) / 2);
  background:transparent;outline-offset:6px}
input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold) var(--fill,50%),rgba(217,181,109,.16) var(--fill,50%))}
input[type=range]::-moz-range-track{height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold) var(--fill,50%),rgba(217,181,109,.16) var(--fill,50%))}
input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  margin-top:calc((3px - 22px) / 2);
  background:var(--gold-bright);border:3px solid var(--bg);box-shadow:0 0 0 1px var(--gold),0 0 18px rgba(217,181,109,.5);cursor:grab;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;
  background:var(--gold-bright);border:3px solid var(--bg);box-shadow:0 0 0 1px var(--gold);cursor:grab;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
input[type=range]:active{cursor:grabbing}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15);box-shadow:0 0 0 1px var(--gold),0 0 26px rgba(217,181,109,.7)}
input[type=range]:active::-moz-range-thumb{transform:scale(1.15);box-shadow:0 0 0 1px var(--gold),0 0 26px rgba(217,181,109,.7)}
@media(pointer:coarse){
  input[type=range]{height:44px;margin-top:calc(3px - 44px);top:calc((44px - 3px) / 2)}
  input[type=range]::-webkit-slider-thumb{width:26px;height:26px;margin-top:calc((3px - 26px) / 2)}
  input[type=range]::-moz-range-thumb{width:26px;height:26px}
}
.calc-res{border-left:1px solid var(--line);padding-left:clamp(24px,4vw,60px)}
@media(max-width:900px){.calc-res{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:28px}}
.calc-big{font-family:var(--font-display);font-size:clamp(2.2rem,4.2vw,3.35rem);color:var(--gold-bright);
  line-height:1;margin:6px 0 24px;font-variant-numeric:tabular-nums;font-weight:480}
.calc-big.pulse{animation:calcPulse .42s var(--ease)}
@keyframes calcPulse{0%{text-shadow:0 0 0 rgba(241,217,158,0)}45%{text-shadow:0 0 28px rgba(241,217,158,.35)}100%{text-shadow:0 0 0 rgba(241,217,158,0)}}
.calc-rows{display:flex;flex-direction:column;gap:11px;font-size:var(--fs-sm)}
.calc-rows div{display:flex;justify-content:space-between;gap:16px;padding-bottom:11px;border-bottom:1px dashed var(--line)}
.calc-rows span:last-child{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
.calc-rows .net span:last-child{color:var(--gold-bright)}
.calc-note{font-size:var(--fs-xs);color:var(--ink-faint);margin-top:18px}
.chip{display:inline-block;font-size:var(--fs-2xs);letter-spacing:.08em;border:1px solid var(--line-strong);
  border-radius:var(--radius-pill);padding:5px 14px;color:var(--ink-soft)}
.legal-stack{display:grid;gap:10px;max-width:860px}
.legal-stack details{background:rgba(12,29,23,.34)}
.legal-stack .det-body p+p{margin-top:12px}

/* ---------- Details ---------- */
details{border:1px solid var(--line);border-radius:var(--radius-sm);background:rgba(12,29,23,.45)}
details{interpolate-size:allow-keywords;overflow:hidden}
details+details{margin-top:12px}
summary{cursor:pointer;list-style:none;padding:20px 24px;font-weight:600;display:flex;
  justify-content:space-between;align-items:center;gap:14px;transition:color .25s}
summary::-webkit-details-marker{display:none}
summary::after{content:"›";font-family:var(--font-display);color:var(--gold);font-size:var(--glyph);
  line-height:1;transition:transform .28s var(--ease);flex:none;transform:rotate(90deg)}
details[open] summary::after{transform:rotate(-90deg)}
details[open] summary{color:var(--gold-bright)}
.det-body{padding:0 24px 24px;color:var(--ink-soft)}
.det-body ul{padding-left:20px;display:flex;flex-direction:column;gap:8px}
@supports selector(details::details-content){
  details::details-content{block-size:0;opacity:0;transition:block-size .25s var(--ease),opacity .15s ease;overflow:hidden}
  details[open]::details-content{block-size:auto;opacity:1;transition:block-size .25s var(--ease),opacity .15s .08s ease}}

/* ---------- Formulär ---------- */
.field{margin-bottom:18px}
.field label{display:block;font-size:var(--fs-sm);font-weight:600;margin-bottom:7px;color:var(--ink)}
.field input,.field textarea,.field select{width:100%;padding:13px 16px;border-radius:var(--radius-sm);
  border:1px solid var(--line-interactive);background:rgba(6,13,11,.6);color:var(--ink);font:inherit;font-size:var(--fs-sm);
  transition:border-color .3s,box-shadow .3s}
/* HÄR STOD outline:none. Det gjorde textfälten till sajtens svagaste fokusläge:
   kvar som markering blev bara kanten, som går från --line-interactive (50 %
   guld) till helt guld. Uppmätt ur renderad DOM är det språnget 3,06:1 — och i
   faktiska pixlar 2,95:1 på /kontakt/, där kortbotten ligger ljusare — på 1 px.
   WCAG 2.4.11 vill ha 3:1 på minst 2 px, så markeringen föll på båda leden, och
   den satt på elva fält i rad i bokningsformuläret: precis den sträcka där en
   tangentbordsanvändare behöver se var hon står.

   Utan raden faller fälten tillbaka på :focus-visible (rad 161), alltså exakt
   samma 2 px guldring med 3 px offset som varje annan kontroll på sajten redan
   bär. Kantfärgen och glöden står kvar — de är designen, ringen är kravet — och
   de krockar inte: glödens 3 px spread slutar på samma pixel som ringens offset
   börjar. Fältens egen radie (--radius-sm) väger tyngre än radien i regeln på
   rad 161, så hörnen ändras inte av att ringen kommer tillbaka. */
.field input:focus,.field textarea:focus{border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(217,181,109,.14)}
.field input:-webkit-autofill,.field textarea:-webkit-autofill,.field select:-webkit-autofill{
  -webkit-text-fill-color:var(--ink);box-shadow:0 0 0 1000px var(--bg) inset,0 0 0 3px rgba(217,181,109,.12);
  caret-color:var(--gold);transition:background-color 9999s ease-out}
.field textarea{min-height:120px;resize:vertical}
.course-interest-form .field textarea{min-height:92px}
/* Indraget ska ställa texten under samtyckestexten, inte under kryssrutan:
   rutans bredd + .check-gapet. Rutan växte från 17 till 24 px, alltså 24+12. */
.form-privacy{margin:4px 0 0 36px;color:var(--ink-faint);font-size:var(--fs-xs)}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:640px){.f-grid{grid-template-columns:1fr}}
.tracks{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px;border:0}
.tracks input{position:absolute;opacity:0;pointer-events:none}
.tracks label{border:1px solid var(--line-interactive);border-radius:var(--radius-pill);padding:9px 18px;cursor:pointer;
  font-size:var(--fs-sm);color:var(--ink-soft);transition:all .3s}
.tracks input:checked+label{border-color:var(--gold);color:var(--gold-bright);background:rgba(217,181,109,.08)}
.tracks input:focus-visible+label{outline:2px solid var(--gold);outline-offset:2px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-sm);color:var(--ink-soft);margin-bottom:14px}
/* Rutan var 17×17 px med webbläsarens eget utseende — det ljusaste elementet i ett
   annars art-directat formulär, och under WCAG 2.5.8:s 24 px träffyta. Formspråket är
   lånat rakt av från .tracks input:checked+label och quizets bokstavsbrickor: samma
   kant, samma guldfyllning i valt läge. appearance:none gör accent-color meningslös,
   så den är borta; bocken ritas i stället som ett ::before, vilket fungerar just för
   att inputen inte längre renderas som en systemkontroll. */
/* margin-top:1px är en optisk justering och inget rutnätsvärde: raden är
   align-items:flex-start, och rutans överkant och versalhöjden i samtyckestexten
   bredvid ligger inte på samma linje av sig själva. En pixel ner rättar det. */
.check input{appearance:none;-webkit-appearance:none;flex:none;width:24px;height:24px;margin-top:1px;
  /* 7px står kvar med flit: rutan är 24 px, så --radius-sm (12) hade gjort den rund
     och --radius-xs (4) hade gjort den till en systemkryssruta igen. Den ska läsas
     som samma mjuka fyrkant som quizets bokstavsbrickor, och det är den grad som
     träffar det. Enda radien på sajten som inte har en token. */
  display:grid;place-content:center;border:1px solid var(--line-interactive);border-radius:7px;
  background:rgba(255,248,232,.04);cursor:pointer;transition:border-color .25s,background .25s}
.check input::before{content:"";width:13px;height:13px;background:var(--gold-bright);
  transform:scale(0);transition:transform .18s var(--ease);
  clip-path:polygon(14% 46%,3% 60%,38% 96%,97% 20%,85% 8%,37% 71%)}
.check input:hover{border-color:var(--gold)}
.check input:checked{border-color:var(--gold);background:rgba(217,181,109,.08)}
.check input:checked::before{transform:scale(1)}
@media (prefers-reduced-motion:reduce){.check input::before{transition:none}}
/* Samtyckesradens länkar skildes bara med FÄRG från texten omkring, och färgen
   räcker inte till: uppmätt ur renderad DOM ligger guldet 1,52:1 mot .check:s
   text och 1,08:1 mot .form-privacy:s. WCAG 1.4.1 kräver 3:1 när färgen är enda
   skillnaden — och den nivån går inte att nå med ett guld som fortfarande är
   sajtens guld, så länkarna får i stället den urskiljning som INTE är färg.
   1 px i länkens egen färg är samma understrykning som navraden redan bär
   (.nav-links a::after), och text-decoration-skip-ink hoppar över underlängderna
   i "integritetstexten" av sig själv. Enda undantaget från a{text-decoration:none}
   på rad 159, som står kvar för alla andra länkar. */
.check a,.form-privacy a{text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:2px}
.form-step{border-left:1px solid var(--line);padding:4px 0 30px 28px;position:relative}
.form-step::before{content:attr(data-n);position:absolute;left:-16px;top:0;width:32px;height:32px;
  border-radius:50%;background:var(--bg-card);border:1px solid var(--line-strong);color:var(--gold);
  font-family:var(--font-display);font-style:italic;display:grid;place-items:center;font-size:var(--fs-sm);
  transition:background .28s var(--ease),color .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease)}
.form-step.active{border-left-color:rgba(217,181,109,.42)}
.form-step.active::before{background:var(--gold-bright);color:#06110d;border-color:var(--gold-bright);
  box-shadow:0 0 0 5px rgba(217,181,109,.1),0 0 28px rgba(217,181,109,.22)}
.form-step h3{margin-bottom:16px;font-size:var(--fs-md)}
.hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}
.form-msg{border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:16px 20px;
  margin-top:16px;color:var(--gold-bright);background:rgba(217,181,109,.06)}
.form-msg.err{border-color:rgba(217,138,109,.4);color:var(--risk);background:rgba(217,138,109,.05)}
button[aria-busy="true"],.btn[aria-busy="true"]{position:relative;pointer-events:none;color:transparent!important}
button[aria-busy="true"]::after,.btn[aria-busy="true"]::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;
  margin:-9px 0 0 -9px;border-radius:50%;border:2px solid rgba(6,13,11,.28);border-top-color:#06110d;
  animation:busySpin .8s linear infinite}
@keyframes busySpin{to{transform:rotate(360deg)}}

/* ---------- Kurs ---------- */
.course-hero{padding-top:150px;padding-bottom:50px;min-height:0}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:30px 0}
/* Kurshjälten har tre fakta, inte ett jämnt antal. I tvåkolumnsrastret hamnade den
   tredje ensam på rad två och lämnade en tom ruta stor som ett helt faktakort
   (uppmätt 563×76 px) direkt under hjälterubriken. auto-fit lägger raden efter hur
   många fakta kursen faktiskt har. */
.course-hero .facts{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.fact{border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 20px;min-width:130px;
  background:rgba(12,29,23,.5)}
.service-card .fact,.card .fact{min-width:0}
.fact span{display:block;font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.fact b{font-family:var(--font-display);font-weight:540;color:var(--gold-bright);font-size:var(--fs-md)}
/* I korten är faktaspalten ~139 px bred, och där ryms "Rådgivning" på en rad men
   "Halvdag / heldag" på två. Följden blev att grannkorten på samma rad fick
   faktarutor av olika höjd — uppmätt 76 mot 103 px på /tjanster/. Två rader
   reserveras därför alltid, så rutorna står i linje oavsett hur långt värdet är.
   Bara i korten: kurshjältens faktarad har inga grannar att linjera mot. */
.card .fact b{display:block;min-height:2lh}
.course-cols{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;align-items:start}
@media(max-width:900px){.course-cols{grid-template-columns:1fr}}
.price-card{position:sticky;top:100px}
.price-card .calc-big{font-size:2.3rem;margin:2px 0 8px}
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(6,13,11,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.sticky-cta::before{content:"";position:absolute;left:0;top:0;height:2px;width:var(--course-progress,0%);
  background:linear-gradient(90deg,var(--gold),var(--gold-bright));transition:width .12s linear}
.sticky-cta .btn{width:100%;justify-content:center;padding:12px 20px;font-size:var(--fs-sm)}
@media(max-width:900px){.sticky-cta.show{display:block}body:has(.sticky-cta.show) footer{padding-bottom:110px}}

/* ---------- Video ---------- */
.video-shell{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(160deg,#0d211a,#071310);aspect-ratio:16/9;display:grid;place-items:center}
.video-shell video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.product-flow-loop{box-shadow:0 28px 80px rgba(4,10,8,.28)}
.film-link{text-align:center;margin-top:16px;font-size:var(--fs-sm)}
.film-link a{display:inline-flex;align-items:center;gap:8px;color:var(--gold-bright);font-weight:700;text-decoration:none}
.film-link a::after{content:"";position:absolute;width:0;height:1px;background:currentColor;bottom:-4px;left:0;transition:width .18s ease-out}
.film-link a{position:relative}
.film-link a:hover::after{width:100%}
.film-page .hero{min-height:72svh;padding-bottom:54px}
.film-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.36fr);gap:clamp(28px,5vw,72px);align-items:end;width:100%}
.film-hero .lede{margin:24px 0 34px;max-width:36em}
.film-hero-card{border:1px solid var(--line-strong);border-radius:var(--radius);padding:22px;
  background:linear-gradient(165deg, rgba(18,38,30,.64), rgba(8,21,18,.74));backdrop-filter:blur(12px)}
.film-hero-card span{display:block;font-size:var(--fs-2xs);font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.film-hero-card p{font-family:var(--font-display);font-size:clamp(1.35rem,2.2vw,1.85rem);line-height:1.16;color:var(--ink)}
.film-frame-premium{position:relative;overflow:hidden;border:1px solid var(--line);
  border-radius:var(--radius-lg);background:linear-gradient(160deg,#0d211a,#050d0b);
  box-shadow:0 34px 100px rgba(4,10,8,.36)}
.film-frame-premium::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,rgba(217,181,109,.18),transparent 18%,transparent 82%,rgba(217,181,109,.12))}
.film-frame-premium video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#020706}
.film-caption-premium{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding:15px 18px;color:var(--ink-faint);
  font-size:var(--fs-2xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.film-caption-premium span:first-child{color:var(--gold)}
@media(max-width:860px){
  .film-page .hero{min-height:auto;padding-top:130px}
  .film-hero-grid{grid-template-columns:1fr}
}

/* ---------- Produktklipp i flödet ---------- */
.product-proof{display:grid;gap:22px;align-content:center}
.product-proof-copy h3{font-size:var(--fs-xl);margin-bottom:14px}
.product-proof-copy p{color:var(--ink-soft);max-width:30em}
.product-proof-stack{align-content:start}
.product-video-layout{grid-template-columns:minmax(260px,.82fr) minmax(0,1fr);gap:clamp(34px,6vw,86px)}
.product-video-card{position:relative;overflow:hidden;border:1px solid rgba(217,181,109,.18);
  border-radius:var(--radius-lg);background:linear-gradient(160deg,rgba(14,31,25,.92),rgba(5,12,10,.96));
  box-shadow:0 24px 70px rgba(4,10,8,.26);transition:border-color .22s var(--ease),background .22s var(--ease)}
.product-video-card::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(241,217,158,.13),transparent 18%,transparent 82%,rgba(217,181,109,.1)),
    radial-gradient(70% 48% at 50% 0%,rgba(241,217,158,.12),transparent 72%)}
.product-video-card video,.product-video-card img{display:block;width:100%;height:auto;background:#020706;filter:saturate(.94) contrast(1.03)}
.product-video-card figcaption{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;
  border-top:1px solid rgba(217,181,109,.14);padding:13px 15px;color:var(--ink-soft);
  font-size:var(--fs-xs);line-height:1.35}
.product-video-card figcaption span{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.product-video-card figcaption b{font-weight:600;color:var(--ink);max-width:18em;text-align:right}
/* 32 px är inte ett korthörn utan en telefonram: den ska ligga utanför skärmens
   --radius-lg med exakt sin egen 8 px padding, annars ser ramen sned ut i hörnen. */
.product-video-phone{width:min(292px,100%);justify-self:center;border-radius:32px;padding:8px}
.product-video-phone video,.product-video-phone img{aspect-ratio:244/480;object-fit:cover;border-radius:var(--radius-lg)}
.product-video-phone figcaption{padding:13px 8px 7px;border-top:0}
.product-video-still img{object-position:50% 0}
.product-video-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;justify-self:center;
  width:min(500px,100%);align-items:start}
.product-video-pair .product-video-phone{width:100%;max-width:238px}
.product-video-compact.product-video-phone{width:min(268px,100%)}
.product-video-wide{width:100%;max-width:520px}
.product-video-wide video{aspect-ratio:480/284;object-fit:cover}
.product-video-feature.product-video-phone{width:min(306px,100%)}
.product-video-feature.product-video-wide{max-width:720px;justify-self:end}
.product-video-under{margin-top:4px}
@media(pointer:fine){
  .product-video-card:hover{border-color:rgba(241,217,158,.42);
    background:linear-gradient(160deg,rgba(18,38,30,.96),rgba(5,12,10,.98))}
}
@media(max-width:900px){
  .product-video-layout{grid-template-columns:1fr;gap:28px}
  .product-video-layout .product-proof-copy{order:2}
  .product-video-layout .product-video-card{order:1!important}
  .product-video-pair{order:1!important;width:min(540px,100%);gap:12px}
  .product-video-pair .product-video-phone{max-width:none}
  .product-video-wide{max-width:100%}
  .product-video-phone{width:min(280px,88vw)}
  .product-video-compact.product-video-phone{width:min(244px,80vw)}
  .product-video-feature.product-video-phone{width:min(260px,84vw)}
  .product-video-feature.product-video-wide{max-width:100%;justify-self:stretch}
}
@media(max-width:640px){
  .product-proof{gap:18px}
  .product-video-card figcaption{font-size:var(--fs-2xs)}
  .product-video-card figcaption b{text-align:left}
}

/* ---------- Finale & footer ---------- */
.finale{text-align:center;position:relative;overflow:hidden}
.finale::before{content:"";position:absolute;inset:auto 0 -40% 0;height:120%;pointer-events:none;
  background:radial-gradient(55% 70% at 50% 100%,rgba(217,181,109,.15),transparent 70%)}
.finale h2{font-size:clamp(2.2rem,5.5vw,4rem);margin-bottom:16px}
.finale .lede{margin:0 auto 40px}
footer{border-top:1px solid var(--line);padding:56px 0 40px;
  background:linear-gradient(rgba(6,13,11,.5),transparent)}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
@media(max-width:760px){.foot{grid-template-columns:1fr}}
.foot h2{font-size:var(--fs-2xs);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);
  margin-bottom:14px;font-family:var(--font-body);font-weight:600}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.foot a{color:var(--ink-soft)}
/* ≥24px träffyta (WCAG 2.5.8). Inline-padding ändrar inte radhöjd eller radavstånd —
   listan renderas exakt som förut. */
.foot ul a{padding-block:3px}
.foot a:hover{color:var(--gold-bright)}
.foot a[target="_blank"]::after{content:"↗";margin-left:.35em;color:var(--gold);font-size:.78em}
.foot-brand p{color:var(--ink-soft);font-size:var(--fs-sm);max-width:24em;margin-top:12px}
.foot-base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:44px;padding-top:22px;border-top:1px solid var(--line);
  color:var(--ink-faint);font-size:var(--fs-xs)}

.list-check{list-style:none;display:flex;flex-direction:column;gap:12px;color:var(--ink-soft)}
.list-check li{padding-left:26px;position:relative}
.list-check li::before{content:"◆";position:absolute;left:0;color:var(--gold);font-size:var(--glyph-sm);top:.5em}
.divider{width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--line-strong),transparent)}

/* ---------- Redaktionella rader ---------- */
.editorial-ledger,.journey-ledger{border-top:1px solid var(--line)}
.editorial-row,.journey-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:clamp(20px,5vw,70px);
  padding:clamp(24px,3.2vw,38px) 0;border-bottom:1px solid var(--line)}
.editorial-row .num,.journey-row .num{font-family:var(--font-display);font-style:italic;color:var(--gold)}
.editorial-row p,.journey-row p{color:var(--ink-soft);max-width:46em}
.journey-row div{display:grid;grid-template-columns:minmax(150px,.45fr) 1fr;gap:24px;align-items:baseline}
.journey-row h3{font-size:clamp(1.35rem,2.3vw,1.8rem)}
@media(max-width:640px){
  section{padding:58px 0}
  .tight{padding-top:32px;padding-bottom:54px}
  .editorial-row,.journey-row{grid-template-columns:1fr;gap:6px}
  .journey-row div{grid-template-columns:1fr;gap:6px}
  .calc-assumption{grid-template-columns:1fr}
  .calc-assumption small{grid-column:1}}

/* ---------- Hero: roterande rader (en H1, spans) ---------- */
.hero-lines{display:grid;min-height:2.2em}
.hero-line{grid-area:1/1;opacity:0;visibility:hidden;filter:blur(4px);transform:translateY(8px);
  transition:opacity .5s var(--ease),filter .5s var(--ease),transform .5s var(--ease),visibility 0s .5s}
.hero-line.on{opacity:1;visibility:visible;filter:blur(0);transform:none;transition:opacity .5s var(--ease),filter .5s var(--ease),transform .5s var(--ease)}
@media (prefers-reduced-motion:no-preference){
  .hero-line.on{animation:none}}

/* Kontakthjälten är avsiktligt låg — men höjden satt som style="min-height:46svh"
   i markupen, och en inline-regel går inte att ta tillbaka i en mediafråga. Den
   vann alltså över .hero{min-height:auto} och reserverade halva mobilskärmen åt en
   rubrik. Här gäller den bara där tvåkolumnsrastret gör det. */
@media(min-width:961px){.hero-contact{min-height:46svh}}

/* HÄR LÅG @view-transition{navigation:auto} med en 200 ms korsning mellan sidor.
   200 ms är kortare än den tid det tar att flytta blicken, så övergången hann aldrig
   bli sedd — den var ren kostnad: ett extra renderingssteg vid varje sidbyte, och en
   extra sak att felsöka den dag något ritas fel mitt i. Alternativet, en övergång
   lång nog att märkas, kräver view-transition-name på element i sidfilerna, och de
   ska inte öppnas igen i den här omgången. Ett halvt grepp är sämre än inget. */

@media (prefers-reduced-motion:reduce){
  .calc-big.pulse,
  .team-readiness-question.quiz-shift,.team-readiness-result.quiz-shift,.team-readiness-start.quiz-shift,
  .team-readiness-question.quiz-shift-back,.team-readiness-result.quiz-shift-back,.team-readiness-start.quiz-shift-back,
  button[aria-busy="true"]::after,.btn[aria-busy="true"]::after{animation:none}
  .card::before,.path::before,.team-readiness-card::after,.calc::before{display:none}
  /* Chevronen byter riktning utan att snurra dit. Riktningen är informationen,
     rotationen är bara vägen till den — och en roterande symbol är precis den sorts
     rörelse inställningen finns för. Utfällningen av .prob-detail står kvar med sin
     övergång: den ändrar höjd, inte läge, och ingen del av den snurrar eller flyger. */
  .prob::after{transition:none}
}

/* ---------- Dynamiska kurssidor (Next) ---------- */
.session-options{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.session-option{display:flex;gap:13px;align-items:flex-start;padding:14px 18px;cursor:pointer;
  border:1px solid var(--line-interactive);border-radius:var(--radius-sm);background:rgba(6,13,11,.55);
  transition:border-color .3s,background .3s}
/* hovern måste ligga ljusare än vilokanten (--line-interactive .5) för att fortsatt läsas som hover */
.session-option:hover{border-color:rgba(217,181,109,.66)}
.session-option input{margin-top:4px;accent-color:var(--gold);width:17px;height:17px;flex:none}
.session-option:has(input:checked){border-color:var(--gold);background:rgba(217,181,109,.07)}
.session-option:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
.session-option-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.session-option-body strong{font-family:var(--font-display);font-weight:540;font-size:var(--fs-md);color:var(--gold-bright)}
.session-option-body span{font-size:var(--fs-sm);color:var(--ink-soft)}
.session-option-body em{font-style:normal;font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.session-option.is-disabled{opacity:.5;cursor:not-allowed}
.session-option.is-disabled:hover{border-color:var(--line-interactive)}
/* Felmeddelandet renderas INUTI .field, direkt efter inputen, som inte har någon
   egen bottenmarginal — en negativ margin-top drog därför in texten 11px i
   inputens ruta så att fältkanten gick rakt genom den. Positiv marginal ger
   luft; .field bär avståndet ned till nästa fält. */
.field-error{margin:6px 0 0;font-size:var(--fs-xs);color:var(--risk)}
/* Sessionsradiorna är ett eget block före .field-error — där behövs uppdraget. */
.session-options+.field-error{margin:-12px 0 18px}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:rgba(217,138,109,.55)}
.field input[aria-invalid="true"]:focus,.field textarea[aria-invalid="true"]:focus{
  border-color:var(--risk);box-shadow:0 0 0 3px rgba(217,138,109,.14)}
.form-optional{color:var(--ink-faint);font-weight:400}
.check a{color:var(--gold-bright)}
.check input[aria-invalid="true"]{outline:2px solid var(--risk);outline-offset:2px}
.check:has(input:focus-visible){color:var(--ink)}
.course-interest-form .form-msg{margin-top:20px}

/* ---------- Polish: handstilsfonter ---------- */
/* Caveat är en variabel font (wght 400-700) — en fil täcker .ink (500) och .ink-title (700),
   samma mönster som Fraunces/Inter ovan. Great Vibes bär .signature.
   Versionslösa URL:er av samma skäl som deklarationerna högre upp: /om-oss/ förladdar
   Caveat och måste kunna be om exakt den här strängen. */
@font-face{
  font-family:"Caveat";
  src:url("/manifest/manifest-assets/Caveat-latin.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Great Vibes";
  src:url("/manifest/manifest-assets/GreatVibes-latin.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* Här låg en tätare scrim enbart för kurshjälten. Den lade sig över symtomet:
   texten stod mitt i bilden, där 90deg-graderingen är som tunnast, så bilden fick
   släckas för att texten skulle bli läsbar. Med .hero .wrap{width:100%} står texten
   åter i den vänstra tredjedelen där scrimmen är tät av sig själv — och fotot syns.
   Lägg inte tillbaka den utan att först mäta var texten faktiskt hamnar. */