/* ══════════════════════════════════════════════════════════
   SYSTEMLYFTET · delad stilmall
   Används av index.html och alla landningssidor. Ändrar du
   något här slår det igenom på hela sajten — det är poängen.
   ══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   1. TOKENS
   ══════════════════════════════════════════════════════════ */
:root{
  --bg:        #08090B;
  --surface:   #0F1116;
  --surface-2: #14171D;
  --surface-3: #1A1E26;

  --text:      #F3F5F8;
  --text-2:    #A2A9B4;
  --text-3:    #6C737F;

  --line:      rgba(255,255,255,.08);
  --line-2:    rgba(255,255,255,.14);

  --accent:    #3DDC97;
  --accent-dim:rgba(61,220,151,.12);
  --accent-2:  #FFB84D;
  --danger:    #FF6152;

  /* Två färger till, för lägen som inte är bra, dåliga eller
     brådskande och därför inte ryms i grönt, rött och gult.
     Lila är mailspåret i ringlistan, blått ett eget beslut att
     lägga något åt sidan. Båda är valda för att gå isär från de
     tre ovan även för den som skiljer rött och grönt illa — de
     ligger på en annan ljushet, inte bara en annan kulör. */
  --lila:      #B98CFF;
  --lila-dim:  rgba(185,140,255,.13);
  --lila-linje:rgba(185,140,255,.34);
  --bla:       #5FB2F5;
  --bla-dim:   rgba(95,178,245,.12);
  --bla-linje: rgba(95,178,245,.32);

  /* Ljusa värden — pappersutseendet i kalkylarket på /excel-till-system */
  --paper:     #F4F1E8;
  --paper-2:   #E7E2D4;
  --ink:       #16150F;

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;

  --f-sans: "Manrope", -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --wrap: 1200px;
  --ease: cubic-bezier(.22,.68,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

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

html{ scroll-behavior:smooth; scroll-padding-top:92px; -webkit-text-size-adjust:100%; }

body{
  font-family:var(--f-sans);
  font-size:clamp(15.5px,1vw,17px);
  line-height:1.65;
  font-weight:400;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Rutnätet lever kvar — men som ett svagt tekniskt raster, inte som papper */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 120% 80% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 120% 80% at 50% 0%, #000 20%, transparent 78%);
}

main, header, footer{ position:relative; z-index:1; }

::selection{ background:var(--accent); color:#04150D; }

/* Göms genom att skjutas upp ur bild — inte via left:-9999px, som
   drar ut dokumentytan och ger 4 px sidoscroll på hela sidan. */
.skip{
  position:absolute; left:0; top:0; z-index:300;
  background:var(--accent); color:#04150D; padding:.8rem 1.2rem; font-weight:600;
  border-radius:0 0 var(--r-sm) 0; text-decoration:none;
  transform:translateY(-130%); transition:transform .2s var(--ease-out);
}
.skip:focus{ transform:translateY(0); }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }

/* ══════════════════════════════════════════════════════════
   2. TYPOGRAFI
   ══════════════════════════════════════════════════════════ */
h1,h2,h3,.h2{ font-weight:700; line-height:1.06; letter-spacing:-.035em; }
h1{ font-size:clamp(2.7rem,6.4vw,4.9rem); font-weight:800; letter-spacing:-.045em; }
h2,.h2{ font-size:clamp(2rem,4vw,3.15rem); }
h3{ font-size:clamp(1.15rem,1.6vw,1.4rem); letter-spacing:-.025em; line-height:1.22; }
a{ color:inherit; }

.lede{
  font-size:clamp(1.02rem,1.25vw,1.19rem); line-height:1.62;
  color:var(--text-2); font-weight:400; letter-spacing:-.01em; max-width:56ch;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--f-mono); font-size:.7rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}
.eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 12px var(--accent);
}

/* Sektionsetiketter — monospace behålls, det läser tekniskt */
.ref{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--f-mono); font-size:.7rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--text-3);
  margin-bottom:1.5rem;
}
.ref b{
  font-weight:600; color:var(--accent); background:var(--accent-dim);
  border:1px solid rgba(61,220,151,.25);
  padding:.2em .55em; border-radius:5px; letter-spacing:.08em;
}

/* ══════════════════════════════════════════════════════════
   3. LAYOUT
   ══════════════════════════════════════════════════════════ */
.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }
.hero-grid > *, .split > *, .contact-grid > *, .about > *, .screen, .app-main{ min-width:0; }
section{ padding-block:clamp(4.5rem,8.5vw,7.5rem); position:relative; }
.head-block{ max-width:60ch; }
.divider{ border:0; border-top:1px solid var(--line); }

/* ══════════════════════════════════════════════════════════
   4. HEADER
   ══════════════════════════════════════════════════════════ */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(8,9,11,.72);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:border-color .35s, background .35s;
}
header.stuck{ border-bottom-color:var(--line); background:rgba(8,9,11,.9); }
.bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; height:76px; }

.logo{ display:flex; align-items:center; gap:.65rem; text-decoration:none; }
.logo-mark{ width:26px; height:26px; flex:none; display:block; overflow:visible; }
.logo-mark .rise-cell{ transition:transform .5s var(--ease-out); }
.logo:hover .logo-mark .rise-cell{ transform:translateY(-3px); }
.logo-word{ font-weight:700; font-size:1.06rem; letter-spacing:-.035em; color:var(--text); white-space:nowrap; }
.logo-word em{ font-style:normal; color:var(--accent); }

nav.links{ display:flex; align-items:center; gap:1.6rem; }
nav.links a{
  font-size:.875rem; font-weight:500; text-decoration:none; color:var(--text-2);
  transition:color .2s; letter-spacing:-.01em; position:relative;
}
nav.links a:hover{ color:var(--text); }
/* Understrykningen dras ut från vänster. Ligger på :not(.btn) så att
   knappen i menyn inte får ett streck under sig. */
nav.links a:not(.btn)::after{
  content:""; position:absolute; left:0; right:0; bottom:-5px; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--ease-out);
}
nav.links a:not(.btn):hover::after,
nav.links a:not(.btn):focus-visible::after{ transform:scaleX(1); }

.burger{
  display:none; background:rgba(255,255,255,.04); color:var(--text);
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:.5rem .75rem; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em; cursor:pointer;
}

/* ══════════════════════════════════════════════════════════
   5. KNAPPAR
   ══════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--f-sans); font-size:.92rem; font-weight:600; letter-spacing:-.015em;
  padding:.82rem 1.4rem; border-radius:var(--r-sm); text-decoration:none; cursor:pointer;
  border:1px solid transparent; position:relative;
  background:var(--accent); color:#04150D;
  transition:transform .2s var(--ease-out), box-shadow .28s var(--ease), background .2s, border-color .2s;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 8px 26px -10px rgba(61,220,151,.6);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 14px 34px -10px rgba(61,220,151,.75); }
.btn:active{ transform:translateY(0); }

.btn.ghost{
  background:rgba(255,255,255,.03); color:var(--text); border-color:var(--line-2);
  box-shadow:none;
}
.btn.ghost:hover{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.24); box-shadow:none; }
.btn.sm{ padding:.58rem 1.05rem; font-size:.85rem; }
.btn .arrow{ transition:transform .25s var(--ease-out); }
.btn:hover .arrow{ transform:translateX(3px); }

/* ══════════════════════════════════════════════════════════
   6. HERO
   ══════════════════════════════════════════════════════════ */
.hero{ padding-top:clamp(3rem,6vw,5rem); padding-bottom:clamp(3.5rem,6vw,5.5rem); overflow:hidden; }
.hero::before{
  content:""; position:absolute; top:-30%; left:50%; transform:translateX(-50%);
  width:1100px; height:700px; pointer-events:none; z-index:-1;
  background:radial-gradient(ellipse at center, rgba(61,220,151,.13), transparent 62%);
  filter:blur(28px);
}
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(2.2rem,4.5vw,4rem); align-items:center; }

.hero h1 .thin{ font-weight:300; color:var(--text-2); }
/* Strykningen ritas som en gradient på själva texten — då följer den med
   om raden bryts, i stället för ett fast streck som klipps vid nowrap. */
.hero h1 .strike{
  background-image:linear-gradient(var(--danger), var(--danger));
  background-repeat:no-repeat;
  background-position:0 56%;
  background-size:0% 3px;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  animation:strike .75s var(--ease-out) 1.1s forwards;
}
@keyframes strike{ to{ background-size:100% 3px; } }

.hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.1rem; }

.trust{ display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; margin-top:2.3rem; font-family:var(--f-mono); font-size:.72rem; color:var(--text-3); letter-spacing:.02em; }
.trust span{ display:inline-flex; align-items:center; gap:.5rem; }
.trust span::before{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--accent); flex:none;
  box-shadow:0 0 8px rgba(61,220,151,.8);
}

/* ── Systemväxlaren ──────────────────────────────────────
   Sex skärmar i samma rutnätscell, alltså staplade ovanpå
   varandra. Behållaren får höjden av den högsta, så det
   hoppar inte när man växlar. Vilken som syns styrs av
   aria-hidden — då kan inte utseendet och tillgängligheten
   hamna i otakt. */
.demo{ position:relative; }

.demo-flikar{ display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.9rem; }
.flik{
  font-family:var(--f-mono); font-size:.66rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  padding:.4rem .72rem; border:1px solid var(--line-2); border-radius:20px;
  background:var(--surface); color:var(--text-3); cursor:pointer; white-space:nowrap;
  transition:color .3s, background .3s, border-color .3s;
}
.flik:hover{ color:var(--text); border-color:rgba(255,255,255,.2); }
.flik.on{ background:var(--accent); border-color:var(--accent); color:#04150D; }

.screens{ display:grid; }
.screen{
  grid-area:1 / 1;
  border-radius:var(--r); overflow:hidden;
  background:var(--surface); border:1px solid var(--line-2);
  box-shadow:0 26px 70px -24px rgba(0,0,0,.95), 0 0 0 1px rgba(61,220,151,.09);
  transition:opacity .45s var(--ease), transform .55s var(--ease-out);
}
.screen[aria-hidden="true"]{ opacity:0; transform:translateY(14px) scale(.985); pointer-events:none; }
.screen:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.screen-bar{
  display:flex; align-items:center; gap:.5rem; padding:.5rem .75rem;
  border-bottom:1px solid var(--line); background:rgba(255,255,255,.025);
  font-family:var(--f-mono); font-size:.65rem; color:var(--text-3);
}
.screen .dots{ display:flex; gap:4px; flex:none; }
.screen .dots i{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.14); }
.fname{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Kalkylarket ─────────────────────────────────────────
   Bara på /excel-till-system, som "Före"-panelen i samma
   växlare som ovan. Medvetet kvar i ljust, gammalt utseende
   — det är hela poängen med kontrasten mot appen bredvid. */
.screen.ark{
  background:var(--paper); border-color:rgba(0,0,0,.35);
  box-shadow:0 26px 60px -26px rgba(0,0,0,.9);
}
.screen.ark .screen-bar{
  border-bottom-color:rgba(22,21,15,.22); background:var(--paper-2); color:#4A4739;
}
.screen.ark .dots i{ border:1px solid rgba(22,21,15,.5); background:none; }

.sheet{ font-family:var(--f-mono); font-size:.66rem; color:var(--ink); }
.sheet table{ border-collapse:collapse; width:100%; table-layout:fixed; }
.sheet th,.sheet td{ border:1px solid rgba(22,21,15,.16); padding:.32rem .42rem; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sheet thead th{ background:rgba(22,21,15,.09); font-weight:500; text-align:center; }
.sheet tbody th{ background:rgba(22,21,15,.09); width:24px; text-align:center; font-weight:400; }
.sheet .err{ background:rgba(214,67,43,.18); color:#B33A26; font-weight:700; }
.sheet .warn{ background:rgba(200,149,27,.24); }
.sheet .dup{ background:rgba(214,67,43,.09); }
.sheet-tabs{ display:flex; gap:2px; padding:.3rem .45rem; background:var(--paper-2); border-top:1px solid rgba(22,21,15,.22); font-family:var(--f-mono); font-size:.6rem; overflow:hidden; }
.sheet-tabs i{ padding:.18rem .5rem; border:1px solid rgba(22,21,15,.22); border-bottom:0; background:rgba(22,21,15,.06); color:#6E6A59; font-style:normal; white-space:nowrap; }
.sheet-tabs i.act{ background:var(--paper); color:var(--ink); font-weight:700; }

.app{ display:grid; grid-template-columns:104px 1fr; }
.app-side{ background:rgba(255,255,255,.02); border-right:1px solid var(--line); padding:.85rem .6rem; font-size:.7rem; }
.app-side b{ font-family:var(--f-mono); font-size:.58rem; letter-spacing:.14em; color:var(--text-3); display:block; margin-bottom:.65rem; padding-left:.4rem; }
/* nowrap: panelerna ligger staplade, så en meny som radbryter i en av
   dem hade gjort behållaren högre för alla sex. */
.app-side u{ display:block; padding:.34rem .5rem; border-radius:6px; text-decoration:none; color:var(--text-3); margin-bottom:.1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-side u.act{ background:var(--accent-dim); color:var(--accent); font-weight:600; }
.app-main{ padding:.85rem .95rem 1rem; }
.app-head{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.8rem; }
.app-head h4{ font-size:1rem; font-weight:700; letter-spacing:-.03em; }
.app-head span{ font-family:var(--f-mono); font-size:.58rem; padding:.22rem .5rem; border-radius:20px; background:var(--accent-dim); color:var(--accent); white-space:nowrap; }
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:.45rem; margin-bottom:.8rem; }
.stat{ border:1px solid var(--line); border-radius:var(--r-sm); padding:.5rem .55rem; background:rgba(255,255,255,.02); }
.stat b{ display:block; font-size:1rem; font-weight:700; line-height:1.15; letter-spacing:-.03em; }
.stat i{ font-style:normal; font-family:var(--f-mono); font-size:.54rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }
.rows{ display:flex; flex-direction:column; gap:.28rem; }
.row{ display:grid; grid-template-columns:1fr auto auto; gap:.55rem; align-items:center; border:1px solid var(--line); border-radius:var(--r-sm); padding:.4rem .6rem; font-size:.72rem; background:rgba(255,255,255,.015); }
.row .who{ font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row .num{ font-family:var(--f-mono); font-size:.66rem; color:var(--text-3); }
.pill{ font-family:var(--f-mono); font-size:.54rem; letter-spacing:.06em; text-transform:uppercase; padding:.18rem .45rem; border-radius:20px; white-space:nowrap; }
.pill.ok{ color:var(--accent); background:var(--accent-dim); }
.pill.wait{ color:var(--accent-2); background:rgba(255,184,77,.14); }
.pill.new{ color:var(--danger); background:rgba(255,97,82,.14); }

.rows.tajt .row{ padding:.32rem .6rem; font-size:.68rem; }
.app-fot{
  font-family:var(--f-mono); font-size:.56rem; line-height:1.5; color:var(--text-3);
  margin-top:.7rem; display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;
}
.prick{ width:6px; height:6px; border-radius:2px; background:var(--accent); flex:none; }
.prick.lag{ background:var(--accent-2); }
.prick.kritisk{ background:var(--danger); }

/* ── 1 · Bokning — veckokalender ─────────────────────────
   Blocken ligger absolut i sitt dygnsspår med --s (start) och
   --h (höjd) i procent. Det ger en kalender som ser oregelbunden
   ut på riktigt, utan att någon räknar pixlar i markupen. */
.kal{ display:grid; grid-template-columns:repeat(5,1fr); gap:.3rem; margin-bottom:.7rem; }
.kal-dag{ display:flex; flex-direction:column; gap:.3rem; min-width:0; }
.kal-dag > b{
  font-family:var(--f-mono); font-size:.5rem; letter-spacing:.1em;
  color:var(--text-3); text-align:center; font-weight:500;
}
.kal-spar{
  position:relative; display:block; height:104px; border-radius:5px;
  background:rgba(255,255,255,.022); border:1px solid var(--line);
  background-image:repeating-linear-gradient(rgba(255,255,255,.05) 0 1px, transparent 1px 26px);
}
.bok{
  position:absolute; left:2px; right:2px; top:var(--s); height:var(--h);
  border-radius:3px; border-left:2px solid var(--accent);
  background:var(--accent-dim); transform-origin:top;
}
.bok.b{ border-left-color:var(--accent-2); background:rgba(255,184,77,.13); }
.bok.c{ border-left-color:#7C8CF8; background:rgba(124,140,248,.14); }

/* ── 2 · Lager — saldostaplar ────────────────────────────
   Bredden ligger i basregeln, inte bara i animationen — utan
   JavaScript ska staplarna stå rätt ändå. */
.staplar{ display:flex; flex-direction:column; gap:.42rem; }
.stapel{ display:grid; grid-template-columns:1fr 84px auto; gap:.55rem; align-items:center; }
.stapel b{ font-size:.72rem; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stapel em{ font-family:var(--f-mono); font-size:.62rem; color:var(--text-3); font-style:normal; white-space:nowrap; }
.spar{ display:block; height:6px; border-radius:20px; background:rgba(255,255,255,.07); overflow:hidden; }
.spar i{ display:block; height:100%; width:var(--f); border-radius:20px; background:var(--accent); }
.spar i.lag{ background:var(--accent-2); }
.spar i.kritisk{ background:var(--danger); }

/* ── 4 · Kundregister — pipeline ─────────────────────────── */
.pipe{ display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; }
.pipe-kol{ display:flex; flex-direction:column; gap:.3rem; min-width:0; }
.pipe-kol > b{
  font-family:var(--f-mono); font-size:.5rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-3); font-weight:500; display:flex; align-items:center; gap:.35rem;
  padding-bottom:.3rem; border-bottom:1px solid var(--line);
}
.pipe-kol > b span{
  background:rgba(255,255,255,.07); color:var(--text-2);
  border-radius:20px; padding:.05rem .3rem; letter-spacing:.04em;
}
.kkort{
  border:1px solid var(--line); border-left:2px solid var(--text-3); border-radius:var(--r-sm);
  padding:.42rem .5rem; background:rgba(255,255,255,.02);
}
.kkort strong{ display:block; font-size:.68rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kkort span{ font-family:var(--f-mono); font-size:.54rem; color:var(--text-3); }
.kkort.ute{ border-left-color:var(--accent-2); }
.kkort.vunnen{ border-left-color:var(--accent); }

/* ── 5 · Kundportal — statusspår ─────────────────────────
   Linjen mellan punkterna ritas av ::before på varje steg utom
   det första, så antalet steg kan ändras utan att räkna om något. */
.steg{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); margin-bottom:.75rem; }
.steg li{
  position:relative; text-align:center; padding-top:1.35rem;
  font-size:.66rem; font-weight:500; color:var(--text-3); min-width:0;
}
.steg li::before{
  content:""; position:absolute; top:5px; right:50%; left:-50%; height:2px;
  background:var(--line-2); transform-origin:left;
}
.steg li:first-child::before{ display:none; }
.steg li.klar::before, .steg li.nu::before{ background:var(--accent); }
.steg .punkt{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:12px; height:12px; border-radius:50%;
  border:2px solid var(--line-2); background:var(--surface); z-index:2;
}
.steg li.klar{ color:var(--text-2); }
.steg li.klar .punkt{ border-color:var(--accent); background:var(--accent); }
.steg li.nu{ color:var(--text); font-weight:700; }
.steg li.nu .punkt{ border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-dim); }
.steg em{
  display:block; font-family:var(--f-mono); font-size:.52rem;
  font-style:normal; color:var(--text-3); margin-top:.15rem;
}

/* ── 6 · Verktyg — checklista ────────────────────────────── */
.framsteg{ display:flex; align-items:center; gap:.6rem; margin-bottom:.7rem; }
.framsteg .spar{ flex:1; }
.framsteg em{ font-family:var(--f-mono); font-size:.56rem; color:var(--text-3); font-style:normal; white-space:nowrap; }
.check{ display:flex; flex-direction:column; gap:.28rem; }
.chk{
  display:grid; grid-template-columns:auto 1fr auto; gap:.55rem; align-items:center;
  border:1px solid var(--line); border-radius:var(--r-sm);
  padding:.36rem .6rem; font-size:.7rem; background:rgba(255,255,255,.015);
}
.chk .box{
  width:13px; height:13px; border-radius:3px; border:1.5px solid var(--line-2);
  position:relative; flex:none;
}
.chk.klar .box{ background:var(--accent); border-color:var(--accent); }
.chk.klar .box::after{
  content:""; position:absolute; left:3.5px; top:.5px; width:4px; height:8px;
  border:solid #04150D; border-width:0 2px 2px 0; transform:rotate(42deg);
}
.chk.avvik .box{ background:var(--danger); border-color:var(--danger); }
.chk em{ font-family:var(--f-mono); font-size:.56rem; color:var(--text-3); font-style:normal; }
.chk.avvik em{ color:var(--danger); }
.chk:not(.klar){ color:var(--text-3); }

/* ── Intoning när en panel växlas fram ───────────────────
   Klassen .spelar sätts om av skriptet vid varje växling, vilket
   startar animationerna på nytt. Alla slutar i exakt det läge
   basreglerna redan ritar — utan JavaScript, och vid reducerad
   rörelse, syns panelen alltså färdig direkt. */
@keyframes stig{ from{ opacity:0; transform:translateY(9px); } }
@keyframes vaxut{ from{ transform:scaleY(.2); opacity:0; } }
@keyframes fyllupp{ from{ width:0; } }
@keyframes bocka{ from{ transform:scale(.4); opacity:0; } }
/* Stegens linje har left/right satta, så bredden går inte att animera —
   den dras i stället ut med scaleX från föregående punkt. */
@keyframes dra{ from{ transform:scaleX(0); } }

.screen.spelar .app-main > *{ animation:stig .45s var(--ease-out) both; }
.screen.spelar .app-main > *:nth-child(2){ animation-delay:.05s; }
.screen.spelar .app-main > *:nth-child(3){ animation-delay:.1s; }
.screen.spelar .app-main > *:nth-child(4){ animation-delay:.15s; }

.screen.spelar .bok{ animation:vaxut .4s var(--ease-out) both; }
.screen.spelar .kal-dag:nth-child(2) .bok{ animation-delay:.06s; }
.screen.spelar .kal-dag:nth-child(3) .bok{ animation-delay:.12s; }
.screen.spelar .kal-dag:nth-child(4) .bok{ animation-delay:.18s; }
.screen.spelar .kal-dag:nth-child(5) .bok{ animation-delay:.24s; }

.screen.spelar .spar i{ animation:fyllupp .7s var(--ease-out) both; }
.screen.spelar .stapel:nth-child(2) .spar i{ animation-delay:.07s; }
.screen.spelar .stapel:nth-child(3) .spar i{ animation-delay:.14s; }
.screen.spelar .stapel:nth-child(4) .spar i{ animation-delay:.21s; }
.screen.spelar .stapel:nth-child(5) .spar i{ animation-delay:.28s; }

.screen.spelar .steg li::before{ animation:dra .45s var(--ease-out) both; }
.screen.spelar .steg li:nth-child(3)::before{ animation-delay:.12s; }
.screen.spelar .steg li:nth-child(4)::before{ animation-delay:.24s; }

.screen.spelar .chk.klar .box{ animation:bocka .35s var(--ease-out) both; }
.screen.spelar .chk:nth-child(2) .box{ animation-delay:.07s; }
.screen.spelar .chk:nth-child(3) .box{ animation-delay:.14s; }
.screen.spelar .chk:nth-child(4) .box{ animation-delay:.21s; }

.demo-note{ font-family:var(--f-mono); font-size:.66rem; color:var(--text-3); margin-top:.8rem; text-align:right; }

/* ══════════════════════════════════════════════════════════
   7. KORT — generell yta
   ══════════════════════════════════════════════════════════ */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  position:relative; transition:border-color .3s, transform .3s var(--ease-out), background .3s;
}
.card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.05), transparent 42%);
}
.card:hover{ border-color:rgba(255,255,255,.2); transform:translateY(-3px); background:var(--surface-2); }

/* ══════════════════════════════════════════════════════════
   8. SPLIT / SYMPTOM
   ══════════════════════════════════════════════════════════ */
.split{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.sticky-head{ position:sticky; top:112px; }

.symptoms{ list-style:none; display:grid; gap:0; border-top:1px solid var(--line); }
.symptoms li{
  display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:baseline;
  padding:1.15rem .5rem; border-bottom:1px solid var(--line);
  transition:background .28s, padding-left .28s var(--ease-out);
}
.symptoms li:hover{ background:rgba(255,255,255,.022); padding-left:1rem; }
.symptoms li .no{ font-family:var(--f-mono); font-size:.7rem; color:var(--accent); font-weight:500; }
.symptoms li strong{ font-weight:600; font-size:1rem; letter-spacing:-.02em; }
.symptoms li p{ color:var(--text-2); font-size:.91rem; margin-top:.22rem; }

.pull{
  margin-top:2.6rem; padding:2rem 2.1rem; border-radius:var(--r-lg);
  background:linear-gradient(135deg, rgba(61,220,151,.1), rgba(61,220,151,.02));
  border:1px solid rgba(61,220,151,.22);
}
.pull p{ font-size:clamp(1.2rem,2vw,1.6rem); font-weight:600; letter-spacing:-.03em; line-height:1.28; }
.pull span{ display:block; margin-top:.9rem; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }

/* ══════════════════════════════════════════════════════════
   9. TJÄNSTER
   ══════════════════════════════════════════════════════════ */
.cells{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2.8rem; }
@media (max-width:900px){ .cells{ grid-template-columns:repeat(2,1fr); } }
.cell{ padding:1.8rem 1.55rem 1.9rem; }
.cell .idx{ font-family:var(--f-mono); font-size:.65rem; color:var(--text-3); letter-spacing:.1em; }
.cell h3{ margin:.85rem 0 .65rem; }
.cell p{ font-size:.91rem; color:var(--text-2); }
.cell ul{ list-style:none; margin-top:1.05rem; display:grid; gap:.35rem; }
.cell ul li{ font-family:var(--f-mono); font-size:.69rem; color:var(--text-3); padding-left:1rem; position:relative; }
.cell ul li::before{ content:"→"; position:absolute; left:0; color:var(--accent); }

/* ══════════════════════════════════════════════════════════
   10. BREDDEN — systemtyper
   ══════════════════════════════════════════════════════════ */
.systems{ display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; margin-top:2.8rem; }
@media (max-width:820px){ .systems{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .systems{ grid-template-columns:1fr; } }
.sys{ padding:1.35rem 1.35rem 1.5rem; }
.sys h3{ font-size:1.06rem; margin-bottom:.4rem; }
.sys p{ font-size:.86rem; color:var(--text-2); }
.sys .dot{
  width:26px; height:26px; border-radius:7px; background:var(--accent-dim);
  border:1px solid rgba(61,220,151,.24); display:grid; place-items:center;
  font-family:var(--f-mono); font-size:.62rem; color:var(--accent); margin-bottom:.9rem;
}

/* ══════════════════════════════════════════════════════════
   11. SPEC
   ══════════════════════════════════════════════════════════ */
.specs{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:2.8rem; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
@media (max-width:980px){ .specs{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .specs{ grid-template-columns:1fr; } }
.spec{ background:var(--surface); padding:1.5rem 1.35rem 1.6rem; transition:background .3s; }
.spec:hover{ background:var(--surface-2); }
.spec .ic{ font-family:var(--f-mono); font-size:.63rem; letter-spacing:.12em; color:var(--accent); }
.spec h3{ font-size:1.02rem; margin:.65rem 0 .45rem; }
.spec p{ font-size:.85rem; color:var(--text-2); }

/* ══════════════════════════════════════════════════════════
   12. PROCESS
   ══════════════════════════════════════════════════════════ */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:2.8rem; }
@media (max-width:1020px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }
.step{ padding:1.6rem 1.4rem 1.7rem; overflow:hidden; }
/* Framstegslinje längs kortets överkant, som dras ut kort för kort när
   sektionen rullas fram. Utan JavaScript står den full — .js-anim nollar
   den bara för att kunna spela upp den. */
.step::after{
  content:""; position:absolute; inset:0 0 auto; height:2px;
  background:linear-gradient(90deg, var(--accent), rgba(61,220,151,.2));
  transform-origin:left; transition:transform .8s var(--ease-out);
}
.js-anim .steps .step::after{ transform:scaleX(0); }
.js-anim .steps.in .step::after{ transform:scaleX(1); }
.js-anim .steps.in .step:nth-child(2)::after{ transition-delay:.05s; }
.js-anim .steps.in .step:nth-child(3)::after{ transition-delay:.1s; }
.js-anim .steps.in .step:nth-child(4)::after{ transition-delay:.15s; }
.step .n{
  font-family:var(--f-mono); font-size:.63rem; font-weight:600; letter-spacing:.12em;
  color:var(--accent); background:var(--accent-dim); border:1px solid rgba(61,220,151,.22);
  display:inline-block; padding:.2rem .5rem; border-radius:5px;
}
.step h3{ margin:.9rem 0 .5rem; }
.step p{ font-size:.87rem; color:var(--text-2); }
.step .when{ margin-top:1rem; font-family:var(--f-mono); font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-2); }

/* ══════════════════════════════════════════════════════════
   13. PRISER
   ══════════════════════════════════════════════════════════ */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:2.8rem; align-items:stretch; }
@media (max-width:900px){ .plans{ grid-template-columns:1fr; } }
.plan{ padding:1.9rem 1.7rem 1.9rem; display:flex; flex-direction:column; }
.plan.flag{
  border-color:rgba(61,220,151,.4);
  background:linear-gradient(180deg, rgba(61,220,151,.07), var(--surface) 55%);
}
.plan.flag::after{
  content:"VANLIGAST"; position:absolute; top:1.3rem; right:1.3rem;
  font-family:var(--f-mono); font-size:.56rem; font-weight:600; letter-spacing:.12em;
  background:var(--accent); color:#04150D; padding:.24rem .5rem; border-radius:20px;
}
.plan h3{ margin-bottom:.45rem; }
.plan .price{ font-size:2rem; font-weight:800; letter-spacing:-.045em; margin:1.1rem 0 .15rem; }
.plan .price small{ font-size:.7rem; font-weight:500; color:var(--text-3); letter-spacing:0; }
.plan .unit{ font-family:var(--f-mono); font-size:.65rem; color:var(--text-3); letter-spacing:.06em; text-transform:uppercase; }
.plan p.what{ font-size:.89rem; color:var(--text-2); margin-top:.35rem; }
.plan ul{ list-style:none; margin:1.4rem 0; display:grid; gap:.5rem; flex:1; }
.plan ul li{ font-size:.86rem; padding-left:1.45rem; position:relative; color:var(--text-2); }
.plan ul li::before{ content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:700; font-size:.8rem; }
.plan .btn{ width:100%; }

/* Prisstegen i Systembygge. Egen stil eftersom raderna bär ett belopp och
   inte är en bockad punktlista — de svarar på "vad kostar mitt fall?". */
.plan ul.tiers{
  margin:1.3rem 0 .2rem; padding:1rem 1.05rem; gap:.85rem; flex:0;
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:rgba(255,255,255,.02);
}
.plan ul.tiers li{ padding-left:0; font-size:.83rem; line-height:1.5; }
.plan ul.tiers li::before{ content:none; }
.plan ul.tiers li b{
  display:block; color:var(--text); font-size:.95rem;
  font-weight:700; letter-spacing:-.02em; margin-bottom:.12rem;
}
.plan ul.tiers li a{ color:var(--accent); }
.price-note{ margin-top:1.9rem; font-family:var(--f-mono); font-size:.71rem; color:var(--text-3); max-width:72ch; line-height:1.65; }

.compare-wrap{ margin-top:4rem; overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); }
table.compare{ border-collapse:collapse; width:100%; min-width:700px; font-size:.87rem; }
table.compare caption{ text-align:left; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); padding:1.1rem 1.2rem .3rem; }
table.compare th,table.compare td{ border-top:1px solid var(--line); padding:.9rem 1.2rem; text-align:left; vertical-align:top; color:var(--text-2); }
table.compare thead th{ font-family:var(--f-mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); font-weight:500; }
table.compare thead th.us{ color:var(--accent); }
table.compare tbody th{ font-weight:600; color:var(--text); width:19%; }
table.compare td.us{ background:rgba(61,220,151,.055); color:var(--text); }

/* ══════════════════════════════════════════════════════════
   14. BRANSCHER
   ══════════════════════════════════════════════════════════ */
.trades{ display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; margin-top:2.8rem; }
@media (max-width:860px){ .trades{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .trades{ grid-template-columns:1fr; } }
.trade{ padding:1.25rem 1.3rem 1.4rem; }
.trade h3{ font-size:1rem; margin-bottom:.35rem; }
.trade p{ font-size:.84rem; color:var(--text-2); }

/* Länk vidare till en branschsida. Sitter bara på de branscher som
   fått en egen sida — resten är kort utan länk tills de får en. */
.mer{
  display:inline-block; margin-top:.9rem;
  font-family:var(--f-mono); font-size:.66rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); text-decoration:none;
}
.mer:hover{ text-decoration:underline; }
.mer .arrow{ transition:transform .25s var(--ease-out); display:inline-block; }
.mer:hover .arrow{ transform:translateX(3px); }

/* ══════════════════════════════════════════════════════════
   15. EXEMPEL
   ══════════════════════════════════════════════════════════ */
.cases{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:2.8rem; }
@media (max-width:900px){ .cases{ grid-template-columns:1fr; } }
.case{ overflow:hidden; }
.case-top{
  padding:.55rem 1.3rem; font-family:var(--f-mono); font-size:.62rem;
  letter-spacing:.11em; text-transform:uppercase; color:var(--accent);
  background:var(--accent-dim); border-bottom:1px solid rgba(61,220,151,.18);
}
.case-body{ padding:1.4rem 1.3rem 1.5rem; }
.case-body h3{ font-size:1.1rem; margin-bottom:.6rem; }
.case-body p{ font-size:.87rem; color:var(--text-2); }
.case-metrics{ display:flex; gap:1.6rem; margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--line); }
.case-metrics div b{ display:block; font-size:1.1rem; font-weight:700; color:var(--accent); line-height:1.15; letter-spacing:-.03em; }
.case-metrics div i{ font-style:normal; font-family:var(--f-mono); font-size:.57rem; letter-spacing:.09em; text-transform:uppercase; color:var(--text-3); }

/* ══════════════════════════════════════════════════════════
   16. FAQ
   ══════════════════════════════════════════════════════════ */
.faq{ margin-top:2.4rem; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:1.25rem .5rem; display:flex; gap:1.1rem; align-items:baseline;
  font-weight:600; font-size:1rem; letter-spacing:-.02em; transition:background .22s, padding-left .22s var(--ease-out);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ background:rgba(255,255,255,.022); padding-left:.95rem; }
.faq summary .q{ font-family:var(--f-mono); font-size:.67rem; color:var(--accent); font-weight:500; flex:none; }
.faq summary .sign{ margin-left:auto; font-family:var(--f-mono); font-size:1rem; color:var(--text-3); transition:transform .32s var(--ease-out); flex:none; }
.faq details[open] summary .sign{ transform:rotate(45deg); color:var(--accent); }
/* Svaret glider upp i stället för att hoppa fram. <details> går inte att
   animera på höjd i klassisk CSS — ::details-content plus interpolate-size
   löser det utan en enda extra tagg. Webbläsare som saknar stödet hoppar
   som förut, vilket är precis vad @supports-villkoret ser till. */
@supports (interpolate-size: allow-keywords){
  :root{ interpolate-size:allow-keywords; }
  .faq details::details-content{
    block-size:0; overflow:hidden;
    transition:block-size .34s var(--ease-out), content-visibility .34s allow-discrete;
  }
  .faq details[open]::details-content{ block-size:auto; }
}
.faq .ans{ padding:0 .5rem 1.4rem 3rem; color:var(--text-2); font-size:.92rem; max-width:78ch; }
.faq .ans p + p{ margin-top:.75rem; }

/* ══════════════════════════════════════════════════════════
   17. OM
   ══════════════════════════════════════════════════════════ */
.about{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,4rem); align-items:start; }
.about-points{ list-style:none; display:grid; gap:1.4rem; }
.about-points li{ padding-left:1.5rem; position:relative; }
.about-points li::before{ content:""; position:absolute; left:0; top:.5em; width:7px; height:7px; border-radius:2px; background:var(--accent); }
.about-points strong{ display:block; font-weight:600; margin-bottom:.22rem; letter-spacing:-.02em; }
.about-points p{ font-size:.89rem; color:var(--text-2); }

/* Grundarblocket. Ligger under rutnätet och i full bredd, eftersom det
   är sidans enda ställe med en namngiven människa — det ska inte klämmas
   in i en kolumn. Byt initialerna mot ett foto enligt LÄS-MIG § 13. */
.grundare{
  margin-top:3.4rem; padding:2.2rem 2.1rem;
  display:grid; grid-template-columns:auto 1fr; gap:1.9rem; align-items:start;
}
.grundare-portratt{
  width:104px; height:104px; border-radius:50%; display:block;
  object-fit:cover; border:1px solid var(--line-2);
}
/* Reserv tills ett foto finns. Ser medvetet ut som en avatar och inte
   som en trasig bild. */
.grundare-initialer{
  width:104px; height:104px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--accent-dim); border:1px solid rgba(61,220,151,.3);
  font-family:var(--f-mono); font-size:1.7rem; font-weight:700;
  color:var(--accent); letter-spacing:.02em;
}
.grundare h3{ font-size:1.5rem; letter-spacing:-.03em; margin-bottom:.2rem; }
.grundare .roll{
  display:block; margin-bottom:1.3rem;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--text-3);
}
.grundare p{ font-size:.93rem; color:var(--text-2); line-height:1.68; max-width:68ch; }
.grundare p + p{ margin-top:.85rem; }
.grundare p strong{ color:var(--text); font-weight:600; }

@media (max-width:640px){
  .grundare{ grid-template-columns:1fr; gap:1.3rem; padding:1.7rem 1.4rem; }
  .grundare-portratt,.grundare-initialer{ width:84px; height:84px; }
  .grundare-initialer{ font-size:1.4rem; }
}

/* ══════════════════════════════════════════════════════════
   18. KONTAKT
   ══════════════════════════════════════════════════════════ */
/* overflow:hidden krävs — ljusskenet nedan är bredare än smala vyer
   och skapar annars några pixlars sidoscroll på hela sidan. */
.contact{ position:relative; overflow:hidden; }
.contact::before{
  content:""; position:absolute; bottom:-20%; left:50%; transform:translateX(-50%);
  width:900px; height:520px; pointer-events:none; z-index:-1;
  background:radial-gradient(ellipse at center, rgba(61,220,151,.1), transparent 62%);
  filter:blur(30px);
}
.contact-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:clamp(2rem,5vw,4rem); align-items:start; }
form{ display:grid; gap:1rem; }
.field{ display:grid; gap:.4rem; }
.field label{ font-family:var(--f-mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); }
.field input,.field textarea,.field select{
  font-family:var(--f-sans); font-size:.93rem; color:var(--text);
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--r-sm); padding:.78rem .9rem; width:100%;
  transition:border-color .22s, background .22s, box-shadow .22s;
}
.field select option{ background:var(--surface); color:var(--text); }
.field textarea{ resize:vertical; min-height:112px; }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:0; border-color:var(--accent); background:var(--surface-2);
  box-shadow:0 0 0 3px rgba(61,220,151,.14);
}
.field input::placeholder,.field textarea::placeholder{ color:var(--text-3); }
.form-note{ font-family:var(--f-mono); font-size:.65rem; color:var(--text-3); line-height:1.6; }
/* Utan egen regel ärver länken notens gråa ton och blir osynlig som länk. */
.form-note a{ color:var(--text-2); text-decoration:underline; text-underline-offset:2px; transition:color .2s; }
.form-note a:hover{ color:var(--accent); }

/* Honungsfälla — dold för människor, syns för robotar. Position i stället
   för display:none, eftersom en del robotar hoppar över dolda fält. */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Kvittens och felmeddelande under skicka-knappen */
.form-status{
  font-family:var(--f-mono); font-size:.72rem; line-height:1.6;
  margin-top:1rem; padding:.85rem 1rem; border-radius:var(--r-sm);
  border:1px solid var(--line-2); display:none;
}
.form-status.visa{ display:block; }
.form-status.ok{ color:var(--accent); border-color:rgba(61,220,151,.4); background:rgba(61,220,151,.07); }
.form-status.fel{ color:var(--danger); border-color:rgba(255,97,82,.4); background:rgba(255,97,82,.07); }
.form-status a{ color:inherit; }
form.skickar button[type=submit]{ opacity:.55; pointer-events:none; }

.contact-list{ list-style:none; display:grid; gap:1.2rem; margin-top:2rem; }
.contact-list li{ display:grid; gap:.2rem; }
.contact-list .k{ font-family:var(--f-mono); font-size:.63rem; letter-spacing:.13em; text-transform:uppercase; color:var(--text-3); }
.contact-list .v{ font-size:1.06rem; font-weight:600; letter-spacing:-.02em; text-decoration:none; width:fit-content; }
a.contact-v{ color:var(--accent); transition:opacity .2s; }
a.contact-v:hover{ opacity:.75; }

/* ══════════════════════════════════════════════════════════
   19. FOOTER
   ══════════════════════════════════════════════════════════ */
footer{ border-top:1px solid var(--line); padding-block:2.4rem 3rem; }
.foot{ display:flex; flex-wrap:wrap; gap:1.1rem; align-items:center; justify-content:space-between; font-family:var(--f-mono); font-size:.68rem; color:var(--text-3); }
.foot a{ text-decoration:none; transition:color .2s; }
.foot a:hover{ color:var(--accent); }
.foot nav{ display:flex; flex-wrap:wrap; gap:1.1rem; }
.foot-seo{ margin-top:1.5rem; font-size:.76rem; color:var(--text-3); max-width:105ch; line-height:1.6; }

/* ══════════════════════════════════════════════════════════
   20. REVEAL
   ══════════════════════════════════════════════════════════ */
.js-anim .rise{ opacity:0; transform:translateY(20px); transition:opacity .75s var(--ease-out), transform .75s var(--ease-out); }
.js-anim .rise.in{ opacity:1; transform:none; }
.js-anim .hero .rise{ transition-delay:calc(var(--i,0) * 95ms); }

/* ── Stegvis intoning i rutnäten ─────────────────────────
   Ett rutnät med sex kort tonade tidigare in som en klump. Här
   tonar barnen in ett i taget i stället, i en våg från första
   kortet. Behållaren står stilla — annars ligger två intoningar
   ovanpå varandra och det blir grumligt.

   Fördröjningen är knuten till nth-child och inte till scroll,
   eftersom korten i en rad passerar brytpunkten samtidigt och
   annars ändå hade tonat in ihop. */
.js-anim .rise.stegvis{ opacity:1; transform:none; }
.js-anim .stegvis > *{
  opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.js-anim .stegvis.in > *{ opacity:1; transform:none; }
.js-anim .stegvis.in > *:nth-child(2){ transition-delay:.05s; }
.js-anim .stegvis.in > *:nth-child(3){ transition-delay:.1s; }
.js-anim .stegvis.in > *:nth-child(4){ transition-delay:.15s; }
.js-anim .stegvis.in > *:nth-child(5){ transition-delay:.2s; }
.js-anim .stegvis.in > *:nth-child(6){ transition-delay:.25s; }
.js-anim .stegvis.in > *:nth-child(7){ transition-delay:.3s; }
.js-anim .stegvis.in > *:nth-child(8){ transition-delay:.35s; }
.js-anim .stegvis.in > *:nth-child(9){ transition-delay:.4s; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .js-anim .rise{ opacity:1; transform:none; }
  .js-anim .stegvis > *{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ══════════════════════════════════════════════════════════
   21. RESPONSIVT
   ══════════════════════════════════════════════════════════ */
@media (max-width:960px){
  .hero-grid,.split,.contact-grid,.about{ grid-template-columns:1fr; }
  .sticky-head{ position:static; }
  nav.links{ display:none; }
  .burger{ display:block; }
  header.open nav.links{
    display:flex; position:absolute; top:76px; left:0; right:0; flex-direction:column;
    align-items:stretch; gap:0; background:rgba(8,9,11,.98); backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line); padding:.5rem 1.25rem 1.15rem;
  }
  header.open nav.links a{ padding:.8rem 0; border-bottom:1px solid var(--line); }
  header.open nav.links a.btn{ margin-top:.85rem; border-bottom:0; justify-content:center; }
}
@media (max-width:640px){
  .flik{ font-size:.6rem; padding:.34rem .6rem; }
  .sheet{ font-size:.58rem; }
  /* Sidomenyn ryms inte utan att etiketterna kapas — och en riktig
     mobilvy har ändå ingen sidomeny. Panelen får hela bredden. */
  .app{ grid-template-columns:1fr; }
  .app-side{ display:none; }
  .stats{ grid-template-columns:1fr 1fr; }
  .stats .stat:last-child{ display:none; }
  .cells{ grid-template-columns:1fr; }
  .faq .ans{ padding-left:.5rem; }
  body::before{ background-size:40px 40px; }
}

/* ══════════════════════════════════════════════════════════
   22. DOKUMENTSIDOR
   Löpande text med rubriker och listor — integritetspolicy och
   liknande. Den globala reseten nollar marginaler på p, ul och h*,
   så prosan behöver egna regler; de gäller bara inuti .dokument
   och rör alltså inget annat på sajten.
   ══════════════════════════════════════════════════════════ */
.dokument{ max-width:74ch; }

.dokument h2{
  font-size:clamp(1.35rem,2.1vw,1.75rem);
  margin-top:3.4rem; padding-top:2.2rem; border-top:1px solid var(--line);
}
.dokument h2:first-of-type{ margin-top:2.6rem; }

.dokument h3{ margin-top:2.1rem; color:var(--text); }

.dokument p{ margin-top:1.05rem; color:var(--text-2); max-width:68ch; }
.dokument h2 + p, .dokument h3 + p{ margin-top:.95rem; }

.dokument a:not(.btn){ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.dokument a:not(.btn):hover{ opacity:.75; }

.dokument ul{ list-style:none; margin-top:1.05rem; display:grid; gap:.7rem; }
.dokument li{
  position:relative; padding-left:1.5rem; color:var(--text-2); max-width:66ch;
}
.dokument li::before{
  content:""; position:absolute; left:.25rem; top:.72em;
  width:5px; height:5px; border-radius:1px; background:var(--accent); opacity:.65;
}
.dokument li strong{ color:var(--text); font-weight:600; }

/* Faktarutan högst upp — vem som ansvarar, i klartext */
.dokument-fakta{ padding:1.6rem 1.7rem; margin-top:2.4rem; }
.dokument-fakta dl{ display:grid; gap:1rem; }
.dokument-fakta dt{
  font-family:var(--f-mono); font-size:.63rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--text-3); margin-bottom:.15rem;
}
.dokument-fakta dd{ font-size:1rem; color:var(--text); }
/* Måste vara minst lika specifik som .dokument a:not(.btn) ovan, annars
   vinner den och drar understrykningar genom hela faktarutan. */
.dokument .dokument-fakta a{ color:var(--accent); text-decoration:none; }
.dokument .dokument-fakta a:hover{ opacity:.75; }

.dokument-datum{
  margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--line);
  font-family:var(--f-mono); font-size:.68rem; color:var(--text-3);
}

@media (min-width:700px){
  .dokument-fakta dl{ grid-template-columns:repeat(2,1fr); gap:1.4rem 2rem; }
}

/* ══════════════════════════════════════════════════════════
   23. PRISTRAPPA
   Prissidans N4. Använd inte .specs här — den är byggd för korta
   funktionspunkter i fyra kolumner och trycker ner beloppet till
   samma vikt som brödtexten. På en sida vars hela poäng är siffror
   måste beloppen vara det ögat fastnar på, och de måste ligga i
   linje under varandra så att trappan går att skanna.
   ══════════════════════════════════════════════════════════ */
.pristrappa{
  margin-top:2.8rem; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
}

/* Markup-ordningen är rubrik → belopp → beskrivning, vilket är rätt
   läsordning på mobil. På bredare skärmar flyttar rutnätet upp beloppet
   bredvid rubriken utan att DOM:en behöver ändras. */
.pristrappa-rad{
  display:grid; grid-template-columns:1fr auto; column-gap:2.5rem;
  align-items:start; padding:1.6rem 1.7rem;
  border-top:1px solid var(--line); transition:background .3s;
}
.pristrappa-rad:first-child{ border-top:0; }
.pristrappa-rad:hover{ background:var(--surface-2); }

.pristrappa-rad h3{ font-size:1.06rem; grid-column:1; grid-row:1; }
.pristrappa-belopp{ grid-column:2; grid-row:1; }
.pristrappa-txt{
  grid-column:1; grid-row:2;
  font-size:.87rem; color:var(--text-2); margin-top:.45rem; max-width:58ch;
}

/* tabular-nums håller siffrorna lika breda så kolumnen inte hoppar. */
.pristrappa-belopp{
  font-size:clamp(1.5rem,2.4vw,1.95rem); font-weight:800; letter-spacing:-.045em;
  font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; line-height:1.1;
}
.pristrappa-belopp small{
  display:block; margin-top:.4rem;
  font-family:var(--f-mono); font-size:.6rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-3);
}
.pristrappa-rad.noll .pristrappa-belopp{ color:var(--accent); }

/* Under 640 px ryms inte belopp och rubrik bredvid varandra. Då släpps
   rutnätet och allt faller tillbaka på markup-ordningen. */
@media (max-width:640px){
  .pristrappa-rad{ grid-template-columns:1fr; padding:1.4rem 1.3rem; }
  .pristrappa-rad h3,
  .pristrappa-belopp,
  .pristrappa-txt{ grid-column:auto; grid-row:auto; }
  .pristrappa-belopp{ text-align:left; margin-top:.7rem; }
  .pristrappa-belopp small{ display:inline; margin-left:.55rem; }
  .pristrappa-txt{ margin-top:.7rem; }
}

/* Rutan under trappan — det som aldrig läggs på fakturan. */
.aldrig{ margin-top:1.1rem; padding:1.5rem 1.7rem; }
.aldrig h3{ font-size:1rem; }
.aldrig ul{ list-style:none; margin-top:1.1rem; display:grid; gap:.6rem; }
@media (min-width:760px){ .aldrig ul{ grid-template-columns:1fr 1fr; gap:.6rem 2rem; } }
.aldrig li{ position:relative; padding-left:1.5rem; font-size:.87rem; color:var(--text-2); }
.aldrig li::before{
  content:"✓"; position:absolute; left:0; top:-.05em;
  color:var(--accent); font-weight:700; font-size:.82rem;
}

/* ══════════════════════════════════════════════════════════
   24. SAMTYCKESRUTAN
   Byggs av skript.js och visas bara när Google Ads är
   konfigurerat. Den täcker aldrig innehållet helt — en ruta som
   tvingar fram ett klick för att sidan ska gå att läsa är både
   sämre för besökaren och tveksam som samtycke.
   ══════════════════════════════════════════════════════════ */
.samtycke{
  position:fixed; z-index:250; left:1rem; right:1rem; bottom:1rem;
  max-width:640px; margin-inline:auto;
  display:grid; gap:1.1rem; padding:1.4rem 1.5rem;
  background:var(--surface-2); border:1px solid var(--line-2);
  border-radius:var(--r); box-shadow:0 18px 50px rgba(0,0,0,.55);
  transform:translateY(130%); opacity:0;
  transition:transform .35s var(--ease-out), opacity .35s var(--ease-out);
}
.samtycke.inne{ transform:none; opacity:1; }

.samtycke-text strong{ display:block; font-size:.97rem; letter-spacing:-.02em; margin-bottom:.4rem; }
.samtycke-text p{ font-size:.83rem; color:var(--text-2); line-height:1.6; }
.samtycke-text a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }

/* Lika stora knappar, samma rad, ingen av dem nedtonad. */
.samtycke-knappar{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.samtycke-knappar .btn{ justify-content:center; width:100%; }

@media (prefers-reduced-motion:reduce){
  .samtycke{ transform:none; }
}