/* =============================================================
   Solidlab.no — komplett lys-først stilark
   Arver KUN designtokens fra colors_and_type.css.
   site.css brukes bevisst ikke (den er dark-first og hardkodet).
   ============================================================= */
@import url('./colors_and_type.css');

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

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

/* Norske sammensatte ord er lange — orddeling og brytesikring globalt */
h1, h2, h3, p, li, a {
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

body {
  background: var(--antikkhvit);
  color: var(--sort);
  font-family: var(--font-sans);
  font-feature-settings: 'ss01', 'cv01', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--oslo); color: var(--antikkhvit); }

.shell { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }

.sl-slash {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fog);
}

.sl-link {
  color: var(--oslo);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 150ms var(--ease-in-out);
}
.sl-link:hover { border-bottom-color: currentColor; }

/* ---------- Knapper ---------- */
.sl-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  line-height: 1; padding: 15px 22px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background 150ms var(--ease-in-out), color 150ms var(--ease-in-out),
              border-color 150ms var(--ease-in-out), transform 150ms var(--ease-out);
}
.sl-btn--primary { background: var(--oslo); color: var(--antikkhvit); }
.sl-btn--primary:hover { background: var(--sort); }
.sl-btn--ghost { background: transparent; color: var(--sort); border-color: var(--linbla); }
.sl-btn--ghost:hover { border-color: var(--oslo); color: var(--oslo); }
.sl-btn:focus-visible { outline: 2px solid var(--oslo); outline-offset: 3px; }

/* ---------- Header ---------- */
.sl-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(244, 241, 234, 0.88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border-light);
}
.sl-header__inner {
  display: flex; align-items: center; justify-content: space-between; height: 80px;
}

.sl-wm {
  font-size: 26px; letter-spacing: -0.02em; line-height: 1;
  color: var(--sort); text-decoration: none;
  display: inline-flex; align-items: center;
  white-space: nowrap; flex: 0 0 auto;
}
.sl-wm__solid { font-weight: 700; }
.sl-wm__lab   { font-weight: 300; }
.sl-wm__ai    { font-weight: 400; color: var(--oslo); }

.sl-nav { display: flex; align-items: center; gap: 26px; flex: 0 1 auto; min-width: 0; }
.sl-nav a { white-space: nowrap; }
.sl-nav a {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fog); text-decoration: none;
  transition: color 150ms var(--ease-in-out);
}
.sl-nav a:hover { color: var(--sort); }
.sl-nav__ext {
  color: var(--fog) !important;
  border-left: 1px solid var(--border-light);
  padding-left: 22px;
}
.sl-nav__ext:hover { color: var(--oslo) !important; }
.sl-nav--desktop { display: flex; }

/* ---------- Mobilmeny ---------- */

.sl-sidemenu { position: fixed; inset: 0; z-index: 40; visibility: hidden; }
.sl-sidemenu--open { visibility: visible; }
.sl-sidemenu__backdrop {
  position: absolute; inset: 0; background: rgba(10,10,10,0.45);
  opacity: 0; transition: opacity 250ms var(--ease-in-out);
}
.sl-sidemenu--open .sl-sidemenu__backdrop { opacity: 1; }
.sl-sidemenu__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(88vw, 400px);
  background: var(--antikkhvit); border-left: 1px solid var(--border-light);
  padding: 28px 32px 40px; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 300ms var(--ease-out);
  overflow-y: auto;
}
.sl-sidemenu--open .sl-sidemenu__panel { transform: translateX(0); }
.sl-sidemenu__head { display: flex; align-items: center; justify-content: space-between; height: 52px; }
.sl-sidemenu__close {
  background: none; border: none; cursor: pointer; display: inline-flex;
  align-items: center; gap: 6px; color: var(--fog);
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.08em;
}
.sl-sidemenu__close-x { font-size: 20px; line-height: 1; }
.sl-sidemenu__nav { display: flex; flex-direction: column; gap: 4px; margin-top: 32px; }
.sl-sidemenu__link {
  font-family: var(--font-sans); font-size: 30px; font-weight: 500;
  letter-spacing: -0.02em; color: var(--sort); text-decoration: none; padding: 8px 0;
}
.sl-sidemenu__link:hover { color: var(--oslo); }
.sl-sidemenu__divider { height: 1px; background: var(--border-light); margin: 28px 0; }
.sl-sidemenu__secondary, .sl-sidemenu__social { display: flex; flex-direction: column; gap: 10px; }
.sl-sidemenu__link-small {
  font-family: var(--font-mono); font-size: 13px; color: var(--fog); text-decoration: none;
}
.sl-sidemenu__link-small:hover { color: var(--oslo); }
.sl-sidemenu__social-label { margin-bottom: 4px; }
.sl-sidemenu__footer { margin-top: auto; padding-top: 32px; }
.sl-sidemenu__meta {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fog);
}

/* ---------- Hero ---------- */
.sl-hero { padding: clamp(64px, 9vw, 112px) 0 clamp(56px, 8vw, 96px); border-bottom: 1px solid var(--border-light); }
.sl-hero__eyebrow { margin-bottom: 36px; }
.sl-hero__title {
  font-size: clamp(32px, 7.8vw, 88px); line-height: 1.04; letter-spacing: -0.03em;
  font-weight: 400; color: var(--sort); max-width: 15ch; text-wrap: balance;
  display: flex; flex-direction: column; gap: clamp(6px, 1.4vw, 14px);
  hyphens: none; -webkit-hyphens: none;
}
.sl-hero__light { font-weight: 300; }
.sl-hero__bold  { font-weight: 700; }
.sl-typewriter__text { color: var(--oslo); font-weight: 500; }
.sl-typewriter__cursor {
  color: var(--oslo); font-weight: 200; margin-left: 2px;
  animation: sl-blink 1.05s steps(1) infinite;
}
@keyframes sl-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }

.sl-hero__sub {
  font-size: clamp(16px, 1.35vw, 19px); line-height: 1.65; color: var(--fog);
  max-width: 58ch; margin-top: clamp(24px, 3vw, 36px); text-wrap: pretty;
}
.sl-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }


/* ---------- Seksjoner ---------- */
.sl-section { padding: clamp(64px, 8vw, 104px) 0; border-bottom: 1px solid var(--border-light); }
.sl-section__head {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: end;
  margin-bottom: 64px;
}
.sl-section__title {
  font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; letter-spacing: -0.025em;
  font-weight: 600; color: var(--sort); text-wrap: balance;
}
.sl-section__intro {
  font-size: 17px; line-height: 1.7; color: var(--fog); text-wrap: pretty;
}

/* ---------- Tjenester ---------- */
.sl-services {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--oslo);
}
.sl-service {
  padding: 40px 48px 48px 0;
  border-bottom: 1px solid var(--border-light);
  transition: background 250ms var(--ease-in-out);
}
.sl-service:nth-child(odd) { padding-right: 64px; }
.sl-service:nth-child(even) { padding-left: 48px; border-left: 1px solid var(--border-light); }
.sl-service:nth-child(3), .sl-service:nth-child(4) { border-bottom: none; }
.sl-service__num { display: block; margin-bottom: 20px; color: var(--oslo); }
.sl-service__title {
  font-size: 24px; font-weight: 600; letter-spacing: -0.015em;
  color: var(--sort); margin-bottom: 14px;
}
.sl-service__body { font-size: 16px; line-height: 1.7; color: var(--fog); text-wrap: pretty; }

/* ---------- Metode (varm bånd-seksjon) ---------- */
.sl-no-metode { background: var(--antikkgra); border-bottom: 1px solid #C4BDAE; }
.sl-no-metode .sl-section__intro { color: #55524A; }
.sl-no-metode .sl-slash { color: #6E6A60; }

.sl-no-steps {
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(74,90,98,0.18);
}
/* Strek som tegnes fra venstre når seksjonen kommer til syne */
.sl-no-steps::before {
  content: ""; position: absolute; top: -1px; left: 0;
  height: 1px; width: 0; background: var(--oslo);
  transition: width 1600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sl-no-steps--aktiv::before { width: 100%; }
.sl-no-step { padding: 36px 32px 8px 0; position: relative; --prikk-x: 0px; }
.sl-no-step + .sl-no-step { padding-left: 32px; border-left: 1px solid rgba(74,90,98,0.22); --prikk-x: 32px; }
.sl-no-step::before {
  content: ""; position: absolute; top: -5px; left: var(--prikk-x);
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(74,90,98,0.22); transform: scale(0.62);
  transition: background 420ms var(--ease-out), transform 420ms var(--ease-out);
}
/* Ring som slår ut én gang når punktet tennes */
.sl-no-step::after {
  content: ""; position: absolute; top: -5px; left: var(--prikk-x);
  width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid var(--oslo); opacity: 0; pointer-events: none;
}
.sl-no-steps--aktiv .sl-no-step::before {
  background: var(--oslo); transform: scale(1);
}
.sl-no-steps--aktiv .sl-no-step::after {
  animation: sl-ring 900ms var(--ease-out) forwards;
}
@keyframes sl-ring {
  from { opacity: 0.85; transform: scale(1); }
  to   { opacity: 0;    transform: scale(3.4); }
}
.sl-no-steps--aktiv .sl-no-step:nth-child(1)::before,
.sl-no-steps--aktiv .sl-no-step:nth-child(1)::after { transition-delay: 60ms;  animation-delay: 60ms; }
.sl-no-steps--aktiv .sl-no-step:nth-child(2)::before,
.sl-no-steps--aktiv .sl-no-step:nth-child(2)::after { transition-delay: 440ms; animation-delay: 440ms; }
.sl-no-steps--aktiv .sl-no-step:nth-child(3)::before,
.sl-no-steps--aktiv .sl-no-step:nth-child(3)::after { transition-delay: 820ms; animation-delay: 820ms; }
.sl-no-steps--aktiv .sl-no-step:nth-child(4)::before,
.sl-no-steps--aktiv .sl-no-step:nth-child(4)::after { transition-delay: 1200ms; animation-delay: 1200ms; }
.sl-no-step__num { display: block; margin-bottom: 18px; color: var(--oslo); }
.sl-no-step__title { font-size: 19px; font-weight: 600; color: var(--sort); margin-bottom: 12px; }
.sl-no-step__body { font-size: 15px; line-height: 1.65; color: #55524A; padding-right: 12px; }

/* ---------- Hvorfor / verdier ---------- */
.sl-about__inner { max-width: 940px; }
.sl-about__title {
  font-size: clamp(30px, 3.6vw, 46px); line-height: 1.12; letter-spacing: -0.025em;
  font-weight: 600; color: var(--sort); margin-bottom: 32px; text-wrap: balance;
}
.sl-about__body { display: flex; flex-direction: column; gap: 18px; max-width: 62ch; }
.sl-about__body p { font-size: 17px; line-height: 1.72; color: var(--fog); text-wrap: pretty; }
.sl-about__body strong { color: var(--sort); font-weight: 600; }

.sl-values {
  display: grid; grid-template-columns: repeat(2, 1fr);
  margin-top: 72px; border-top: 1px solid var(--linbla);
}
.sl-value { padding: 32px 48px 36px 0; border-bottom: 1px solid var(--border-light); }
.sl-value:nth-child(even) { padding-left: 48px; border-left: 1px solid var(--border-light); }
.sl-value:nth-child(3), .sl-value:nth-child(4) { border-bottom: none; }
.sl-value__num {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--oslo); margin-bottom: 14px;
}
.sl-value__title { font-size: 18px; font-weight: 600; color: var(--sort); margin-bottom: 10px; }
.sl-value__body { font-size: 15px; line-height: 1.65; color: var(--fog); }

/* ---------- Om oss ---------- */
.sl-advisory { padding: clamp(64px, 8vw, 104px) 0; background: var(--antikkhvit); border-bottom: 1px solid var(--border-light); }
.sl-advisory__eyebrow { display: block; margin-bottom: 44px; }
.sl-advisory__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 72px; }
.sl-advisory__title {
  font-size: clamp(28px, 3.2vw, 40px); line-height: 1.15; letter-spacing: -0.025em;
  font-weight: 600; color: var(--sort); text-wrap: balance;
}
.sl-advisory__title em { font-style: normal; color: var(--oslo); font-weight: 400; }
.sl-advisory__right { display: flex; flex-direction: column; gap: 18px; padding-top: 6px; }
.sl-advisory__body { font-size: 17px; line-height: 1.72; color: var(--fog); text-wrap: pretty; }

/* ---------- Kontakt (mørkt kontrastfelt) ---------- */
.sl-contact { background: var(--sort); padding: clamp(64px, 8vw, 104px) 0; }

/* Hangtagen henger i skjøten under den taupe metode-seksjonen */
.sl-td { position: relative; }
.sl-td > .shell { position: relative; z-index: 2; }
.sl-advisory { position: relative; }
.sl-advisory > .shell { position: relative; z-index: 2; }
/* Gjør plass til hangtagen så teksten ikke løper under den */

.sl-padle {
  position: absolute; z-index: 1; pointer-events: none;
  top: 24px; right: clamp(16px, 4vw, 72px);
  width: 140px;
}
/* Skyggen tegnes BAK merket, ikke som filter på det.
   Filter tvinger rastrering — da mister teksten skarphet.
   Målene under er hentet rett fra svg-ens viewBox (1000x2200). */
.sl-padle::before, .sl-padle::after {
  content: ""; position: absolute; z-index: 0;
  box-shadow: 0 4px 10px rgba(10,10,10,0.10), 0 18px 38px rgba(10,10,10,0.14);
}
.sl-padle::before {                       /* skiva: cx500 cy500 r470 */
  left: 3%; top: 1.364%; width: 94%; height: 42.727%; border-radius: 50%;
}
.sl-padle::after {                        /* håndtaket: x330 y899.5 340x1240.5 */
  left: 33%; top: 40.886%; width: 34%; height: 56.386%; border-radius: 999px;
}
.sl-padle img { display: block; position: relative; z-index: 1; width: 100%; height: auto; }
.sl-contact .sl-slash { color: var(--alvesolv); }
.sl-contact__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 72px; align-items: start; }
.sl-contact__title {
  font-size: clamp(34px, 4.4vw, 60px); line-height: 1.06; letter-spacing: -0.03em;
  font-weight: 600; color: var(--antikkhvit); text-wrap: balance;
}
.sl-contact__title em { font-style: normal; color: var(--nordic-breeze); }
.sl-contact__meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 24px; padding-top: 12px; }
.sl-contact__label {
  display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--alvesolv); margin-bottom: 8px;
}
.sl-contact__meta div { font-size: 16px; color: var(--antikkhvit); line-height: 1.5; }
.sl-contact__meta a { color: var(--antikkhvit); text-decoration: none; border-bottom: 1px solid rgba(244,241,234,0.25); }
.sl-contact__meta a:hover { color: var(--nordic-breeze); border-bottom-color: var(--nordic-breeze); }

/* ---------- Footer ---------- */
.sl-footer { background: var(--sort); padding: 40px 0 48px; border-top: 1px solid var(--border-dark); }
.sl-footer__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 12px; color: var(--mist);
}
.sl-wm--footer { font-size: 16px; color: var(--antikkhvit); }
.sl-footer__right { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.sl-footer__right a {
  color: var(--mist); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
}
.sl-footer__right a:hover { color: var(--antikkhvit); }
.sl-footer__sep { color: var(--fog); }

/* =============================================================
   Responsivt — fire nivåer:
   >1024 desktop | 861–1024 kompakt | 721–860 nettbrett | <=720 mobil
   ============================================================= */

/* --- Kompakt desktop / stort nettbrett --- */
@media (max-width: 1024px) {
  .sl-section__head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
  .sl-td .sl-section__intro { padding-right: 0; }
  .sl-advisory__grid, .sl-contact__grid { grid-template-columns: 1fr; gap: 36px; }
  .sl-service:nth-child(odd) { padding-right: 40px; }
  .sl-service:nth-child(even) { padding-left: 40px; }
  .sl-value { padding-right: 36px; }
  .sl-value:nth-child(even) { padding-left: 36px; }

  /* Steg: 2x2 rutenett */
  .sl-no-steps { grid-template-columns: repeat(2, 1fr); }
  .sl-no-step,
  .sl-no-step + .sl-no-step { padding: 36px 28px 24px 0; border-left: none; }
  .sl-no-step, .sl-no-step + .sl-no-step { --prikk-x: 0px; }
  .sl-no-step:nth-child(even) { padding-left: 32px; border-left: 1px solid rgba(74,90,98,0.22); --prikk-x: 32px; }
  .sl-no-step:nth-child(3),
  .sl-no-step:nth-child(4) { border-top: 1px solid rgba(74,90,98,0.22); margin-top: 8px; }
}

/* --- Nav bytter til hamburger --- */
@media (max-width: 1120px) {
  .sl-nav--desktop { display: none; }
  }
@media (max-width: 860px) { .sl-header__inner { height: 72px; } }

/* Litt tettere meny mellom 1120 og 1300 */
@media (min-width: 1121px) and (max-width: 1300px) {
  .sl-nav { gap: 18px; }
  .sl-nav a { font-size: 11px; }
  .sl-nav__ext { padding-left: 16px; }
}

/* --- Mobil: alt i én kolonne --- */
@media (max-width: 720px) {
  .sl-services, .sl-values, .sl-no-steps, .sl-contact__meta { grid-template-columns: 1fr; }

  .sl-service, .sl-value {
    padding: 28px 0 30px !important;
    border-left: none !important;
    border-bottom: 1px solid var(--border-light) !important;
  }
  .sl-service:last-child, .sl-value:last-child { border-bottom: none !important; }

  .sl-no-step, .sl-no-step + .sl-no-step {
    padding: 28px 0 4px !important;
    border-left: none !important; border-top: none !important;
    margin-top: 0 !important;
  }
  .sl-no-step, .sl-no-step + .sl-no-step { --prikk-x: 0px !important; }
  .sl-no-step + .sl-no-step { margin-top: 24px !important; }
  .sl-no-step__body { padding-right: 0; }

  .sl-values { margin-top: 48px; }
    .sl-contact__meta { gap: 26px; }

  .sl-padle { width: 82px; top: 14px; right: 16px; }
  .sl-footer__inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .sl-footer__right { gap: 8px 18px; }
}

/* --- Små telefoner: CTA i full bredde for tommelen --- */
@media (max-width: 480px) {
  .sl-hero__cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .sl-hero__cta .sl-btn { justify-content: center; padding: 16px 20px; }
  .sl-sidemenu__panel { width: 100vw; border-left: none; }
  .sl-sidemenu__link { font-size: 26px; padding: 10px 0; }
  .sl-section__title, .sl-about__title { letter-spacing: -0.02em; }
}

/* --- Telefon i landskap: lav høyde, mindre luft --- */
@media (max-height: 520px) and (orientation: landscape) {
  .sl-hero { padding: 48px 0 44px; }
  .sl-hero__eyebrow { margin-bottom: 20px; }
    .sl-header { position: static; }
}

/* --- Utskrift --- */
@media print {
  .sl-header, .sl-sidemenu, .sl-hero__cta, .sl-padle { display: none !important; }
  .sl-contact, .sl-footer { background: #fff !important; }
  .sl-contact__title, .sl-contact__meta div, .sl-contact__meta a { color: #000 !important; }
  * { background: #fff !important; color: #000 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .sl-no-steps::before { width: 100% !important; transition: none !important; }
  .sl-no-step::before { background: var(--oslo) !important; transform: scale(1) !important; transition: none !important; }
  .sl-no-step::after { display: none !important; }
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* =============================================================
   V2 — mykere formspråk: ikonografi, moderat avrunding, dybde
   Beholder Solidlabs typografi og palett. Ny varm sekundæraksent.
   ============================================================= */
:root {
  --kobber:      #A9683F;   /* varm sekundæraksent — dempet, ikke SaaS-gul */
  --kobber-svak: #F0E5DC;
  --flate:       #FBFAF6;   /* kortflate, litt lysere enn Antikkhvit */
  --radius:      10px;
  --radius-sm:   8px;
  --skygge:      0 1px 2px rgba(10,10,10,0.04), 0 4px 16px rgba(10,10,10,0.05);
  --skygge-lop:  0 2px 4px rgba(10,10,10,0.05), 0 12px 32px rgba(10,10,10,0.09);
}

/* ---------- Ikoner ---------- */
.sl-ikon { display: block; }

/* ---------- Hero i to spalter ---------- */
.sl-hero__grid {
  display: grid; grid-template-columns: 1.08fr 0.92fr;
  gap: 56px; align-items: center;
}
.sl-hero__right { display: flex; justify-content: center; }
.sl-hero__diagram { width: 100%; max-width: 420px; height: auto; }
.sl-diagram__noder > g {
  opacity: 0; transform-origin: center;
  animation: sl-node-inn 620ms var(--ease-out) forwards;
}
@keyframes sl-node-inn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Knapper: moderat avrunding ---------- */
.sl-btn { border-radius: var(--radius-sm); }
.sl-btn--primary:hover { transform: translateY(-1px); box-shadow: var(--skygge); }

/* ---------- Tjenestekort: flate, radius, dybde ---------- */
.sl-services {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 20px; border-top: none;
}
.sl-service {
  background: var(--flate);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 28px 28px 32px !important;
  box-shadow: var(--skygge);
  transition: box-shadow 220ms var(--ease-out), transform 220ms var(--ease-out),
              border-color 220ms var(--ease-out);
}
.sl-service:hover {
  box-shadow: var(--skygge-lop);
  transform: translateY(-3px);
  border-color: var(--linbla);
}
.sl-service__top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.sl-service__ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--kobber-svak); color: var(--kobber);
}
.sl-service:nth-child(2) .sl-service__ikon,
.sl-service:nth-child(3) .sl-service__ikon { background: #E3EAEE; color: var(--oslo); }
.sl-service__num { margin-bottom: 0 !important; color: var(--mist) !important; }
.sl-service__title { margin-bottom: 10px; }

/* ---------- Metodesteg: ikon over nummer ---------- */
.sl-no-step__ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: rgba(244,241,234,0.72); color: var(--oslo);
  border: 1px solid rgba(74,90,98,0.18);
  margin-bottom: 16px;
}
.sl-no-step__num { color: var(--kobber) !important; }

/* ---------- Verdikort ---------- */
.sl-values {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 16px; border-top: none; margin-top: 56px;
}
.sl-value {
  background: var(--flate); border: 1px solid var(--border-light);
  border-radius: var(--radius); padding: 24px 26px 28px !important;
  border-left: 3px solid var(--kobber) !important;
}
.sl-value__num { color: var(--kobber); }

/* ---------- Kontakt: mykt hjørne på det mørke feltet ---------- */
.sl-contact { border-radius: var(--radius) var(--radius) 0 0; }
.sl-contact__title em { color: var(--nordic-breeze); }

/* ---------- Ordmerke: .no i Oslo-blå ---------- */
.sl-wm__ai { color: var(--oslo); }
/* På svart bunn er Oslo-blå for mørk — lysere variant i footeren */
.sl-wm--footer .sl-wm__ai { color: var(--nordic-breeze); }

/* ---------- Responsivt for v2 ---------- */
@media (max-width: 1024px) {
  .sl-hero__grid { grid-template-columns: 1fr; gap: 44px; }
  .sl-hero__right { order: 2; }
  .sl-hero__diagram { max-width: 360px; }
  .sl-services { gap: 16px; }
}
@media (max-width: 720px) {
  .sl-services, .sl-values { grid-template-columns: 1fr; gap: 14px; }
  .sl-service, .sl-value {
    padding: 24px 22px 26px !important;
    border: 1px solid var(--border-light) !important;
    border-radius: var(--radius);
  }
  .sl-value { border-left: 3px solid var(--kobber) !important; }
  .sl-hero__diagram { max-width: 300px; }
}

/* =============================================================
   Verktøykassa
   ============================================================= */
.sl-nav__side { color: var(--sort) !important; font-weight: 600; }

.sl-vk-hero { padding: clamp(56px, 7vw, 88px) 0 clamp(40px, 5vw, 56px); }
.sl-vk-hero__title {
  font-size: clamp(34px, 5.2vw, 66px); line-height: 1.06; letter-spacing: -0.03em;
  font-weight: 600; color: var(--sort); max-width: 18ch; text-wrap: balance;
}
.sl-vk-hero__title em { font-style: normal; font-weight: 300; color: var(--fog); }
.sl-vk-hero__intro {
  font-size: clamp(16px, 1.4vw, 19px); line-height: 1.68; color: var(--fog);
  max-width: 62ch; margin-top: 28px; text-wrap: pretty;
}
.sl-vk-tall {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px;
}
.sl-vk-tall > div {
  flex: 1 1 180px; background: var(--flate); border: 1px solid var(--border-light);
  border-left: 3px solid var(--kobber); border-radius: var(--radius);
  padding: 18px 20px 20px; box-shadow: var(--skygge);
}
.sl-vk-tall strong {
  display: block; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; color: var(--sort);
}
.sl-vk-tall span {
  display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--fog);
}

/* Innholdsfortegnelse — klebrig under headeren */
.sl-vk-innhold {
  position: sticky; top: 80px; z-index: 10;
  background: rgba(244,241,234,0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}
.sl-vk-innhold__inner {
  display: flex; flex-wrap: nowrap; gap: 6px;
  padding-top: 12px; padding-bottom: 12px;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  /* Toner ut høyre kant så det synes at det er mer å rulle til */
  mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%);
}
.sl-vk-innhold a { scroll-snap-align: start; }
/* Padding faller bort i rullecontainere — siste pille trenger egen luft */
.sl-vk-innhold__inner::after { content: ""; flex: 0 0 clamp(20px, 4vw, 48px); }
.sl-vk-innhold__inner::-webkit-scrollbar { display: none; }
.sl-vk-innhold a {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-light);
  background: var(--flate); color: var(--fog); text-decoration: none;
  font-size: 13px; transition: all 160ms var(--ease-in-out);
}
.sl-vk-innhold a:hover { color: var(--sort); border-color: var(--linbla); }
.sl-vk-innhold__num {
  font-family: var(--font-mono); font-size: 10px; color: var(--kobber); letter-spacing: 0.06em;
}

/* Gruppene */
.sl-vk-gruppe {
  padding: clamp(36px, 3.6vw, 52px) 0;
  border-bottom: 1px solid var(--border-light);
  scroll-margin-top: calc(var(--klebrig-h, 142px) + 8px);
}
.sl-vk-gruppe:nth-child(even) { background: rgba(213,207,194,0.28); }
.sl-vk-gruppe__grid { display: grid; grid-template-columns: 0.85fr 1.55fr; gap: 56px; align-items: start; }
.sl-vk-gruppe__head { position: sticky; top: calc(var(--klebrig-h, 142px) + 28px); }
.sl-vk-gruppe__num { color: var(--oslo) !important; margin-bottom: 14px; }
.sl-vk-gruppe__title {
  font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -0.025em;
  font-weight: 600; color: var(--sort); margin-bottom: 14px; text-wrap: balance;
}
.sl-vk-gruppe__intro { font-size: 15px; line-height: 1.68; color: var(--fog); text-wrap: pretty; }

.sl-vk-liste { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.sl-vk-item {
  background: var(--flate); border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); padding: 16px 18px 18px;
  transition: border-color 180ms var(--ease-in-out), box-shadow 180ms var(--ease-in-out);
}
.sl-vk-item:hover { border-color: var(--linbla); box-shadow: var(--skygge); }
.sl-vk-item__navn { font-size: 15px; font-weight: 600; color: var(--sort); margin-bottom: 6px; }
.sl-vk-item__navn--dempet { color: var(--oslo); }
.sl-vk-item__note { font-size: 13.5px; line-height: 1.6; color: var(--fog); text-wrap: pretty; }
.sl-vk-item--mer { background: transparent; border-style: dashed; }

/* Avslutning */
.sl-vk-avslutning { padding: clamp(64px, 8vw, 96px) 0; text-align: center; }
.sl-vk-avslutning__title {
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.12; letter-spacing: -0.025em;
  font-weight: 600; color: var(--sort);
}
.sl-vk-avslutning__intro {
  font-size: 17px; line-height: 1.7; color: var(--fog);
  max-width: 58ch; margin: 20px auto 32px; text-wrap: pretty;
}

@media (max-width: 1024px) {
  .sl-vk-gruppe__grid { grid-template-columns: 1fr; gap: 28px; }
  .sl-vk-gruppe__head { position: static; }
}
@media (max-width: 860px) { .sl-vk-innhold { top: 72px; } }
@media (max-width: 640px) {
  .sl-vk-liste { grid-template-columns: 1fr; }
  .sl-vk-tall > div { flex: 1 1 100%; }
}

/* =============================================================
   Kontaktseksjon — venstre spalte med knapp
   ============================================================= */
.sl-contact__venstre { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.sl-contact__cta { align-self: flex-start; }

/* Lys knapp for mørk bakgrunn */
.sl-btn--lys { background: var(--antikkhvit); color: var(--sort); }
.sl-btn--lys:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,0.28); }

/* =============================================================
   Kontaktskjema — popup
   ============================================================= */
.sl-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; }

.sl-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(10,10,10,0.58);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: sl-fade 220ms var(--ease-out);
}
@keyframes sl-fade { from { opacity: 0; } to { opacity: 1; } }

.sl-modal__panel {
  position: relative;
  width: min(92vw, 620px);
  max-height: min(88vh, 720px);
  overflow-y: auto;
  background: var(--antikkhvit);
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(10,10,10,0.32);
  padding: 56px clamp(24px, 5vw, 56px) clamp(28px, 4vw, 44px);
  animation: sl-modal-inn 300ms var(--ease-out);
}
@keyframes sl-modal-inn {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.sl-modal__lukk {
  position: absolute; top: 14px; right: 16px;
  width: 40px; height: 40px; border: none; background: transparent;
  font-size: 26px; line-height: 1; color: var(--fog); cursor: pointer;
  border-radius: 8px; transition: background 150ms var(--ease-in-out);
}
.sl-modal__lukk:hover { background: rgba(10,10,10,0.06); color: var(--sort); }

.sl-modal__fremdrift {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: rgba(74,90,98,0.14);
  border-radius: 14px 14px 0 0; overflow: hidden;
}
.sl-modal__fremdrift span {
  display: block; height: 100%; background: var(--oslo);
  transition: width 320ms var(--ease-out);
}

.sl-modal__teller { display: block; margin-bottom: 14px; }
.sl-modal__sporsmaal {
  font-size: clamp(24px, 3.2vw, 34px); line-height: 1.14; letter-spacing: -0.025em;
  font-weight: 600; color: var(--sort); margin-bottom: 10px; text-wrap: balance;
}
.sl-modal__hjelp { font-size: 15px; line-height: 1.6; color: var(--fog); }
.sl-modal__felt { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }

.sl-felt {
  width: 100%; font-family: var(--font-sans); font-size: 17px; color: var(--sort);
  background: var(--flate); border: 1px solid var(--linbla); border-radius: var(--radius-sm);
  padding: 15px 16px; transition: border-color 160ms var(--ease-in-out), box-shadow 160ms var(--ease-in-out);
}
.sl-felt::placeholder { color: var(--mist); }
.sl-felt:focus {
  outline: none; border-color: var(--oslo);
  box-shadow: 0 0 0 3px rgba(74,90,98,0.14);
}
.sl-felt--stor { resize: vertical; min-height: 116px; line-height: 1.6; }

.sl-valg { display: flex; flex-direction: column; gap: 8px; }
.sl-valg__knapp {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  font-family: var(--font-sans); font-size: 16px; color: var(--sort);
  background: var(--flate); border: 1px solid var(--linbla); border-radius: var(--radius-sm);
  padding: 13px 16px; cursor: pointer;
  transition: border-color 150ms var(--ease-in-out), background 150ms var(--ease-in-out);
}
.sl-valg__knapp:hover { border-color: var(--oslo); background: #fff; }
.sl-valg__knapp--valgt { border-color: var(--oslo); background: #fff; box-shadow: 0 0 0 2px rgba(74,90,98,0.16); }
.sl-valg__bokstav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: 5px;
  background: rgba(74,90,98,0.10); color: var(--oslo);
  font-family: var(--font-mono); font-size: 11px;
}
.sl-valg__knapp:focus-visible { outline: 2px solid var(--oslo); outline-offset: 2px; }

.sl-modal__feil {
  margin-top: 14px; font-size: 14px; color: #8C3B2E;
  background: #F6E7E3; border-radius: 6px; padding: 10px 12px;
}
.sl-modal__knapper { display: flex; align-items: center; gap: 10px; margin-top: 28px; flex-wrap: wrap; }
.sl-modal__hint {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--mist); margin-left: 4px;
}
.sl-modal__hint kbd {
  font-family: var(--font-mono); background: rgba(10,10,10,0.06);
  border-radius: 4px; padding: 2px 5px; font-size: 11px;
}

.sl-modal__ferdig { text-align: left; }
.sl-modal__hake {
  width: 52px; height: 52px; border-radius: 50%; margin-bottom: 20px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(74,90,98,0.10); color: var(--oslo);
}
.sl-modal__hake svg { width: 26px; height: 26px; }

@media (max-width: 720px) {
  .sl-modal { align-items: flex-end; }
  .sl-modal__panel {
    width: 100%; max-width: none; max-height: 92vh;
    border-radius: 16px 16px 0 0; padding: 48px 22px 28px;
    animation: sl-modal-opp 300ms var(--ease-out);
  }
  @keyframes sl-modal-opp {
    from { transform: translateY(28px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }
  .sl-modal__knapper .sl-btn { flex: 1 1 auto; justify-content: center; }
  .sl-modal__hint { display: none; }
  .sl-contact__venstre { gap: 24px; }
  .sl-contact__cta { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-modal__panel, .sl-modal__backdrop { animation: none !important; }
}

/* ---------- Avkrysning (nyhetsbrev) — lavmælt ---------- */
.sl-avkrys {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 4px; padding: 2px 2px 2px 0;
  cursor: pointer;
}
.sl-avkrys input { position: absolute; opacity: 0; width: 0; height: 0; }
.sl-avkrys__boks {
  flex: 0 0 17px; width: 17px; height: 17px; margin-top: 2px;
  border: 1.5px solid var(--mist); border-radius: 4px;
  background: transparent; color: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 150ms var(--ease-in-out), border-color 150ms var(--ease-in-out), color 150ms var(--ease-in-out);
}
.sl-avkrys__boks svg { width: 11px; height: 11px; }
.sl-avkrys:hover .sl-avkrys__boks { border-color: var(--oslo); }
.sl-avkrys input:checked + .sl-avkrys__boks {
  background: var(--oslo); border-color: var(--oslo); color: var(--antikkhvit);
}
.sl-avkrys input:focus-visible + .sl-avkrys__boks { outline: 2px solid var(--oslo); outline-offset: 2px; }
.sl-avkrys__tekst { font-size: 14px; line-height: 1.4; color: var(--fog); font-weight: 400; }
.sl-avkrys input:checked ~ .sl-avkrys__tekst { color: var(--sort); }
.sl-avkrys__note {
  display: block; margin-top: 2px;
  font-size: 12.5px; line-height: 1.45; color: var(--mist);
}

/* =============================================================
   Jens — assistent nede til høyre
   ============================================================= */
.sl-jens-knapp {
  position: fixed; right: 24px; bottom: 24px; z-index: 50;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 18px 13px 15px;
  background: var(--sort); color: var(--antikkhvit);
  border: none; border-radius: 999px; cursor: pointer;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  box-shadow: 0 4px 14px rgba(10,10,10,0.18), 0 12px 32px rgba(10,10,10,0.14);
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out),
              background 320ms var(--ease-in-out), color 320ms var(--ease-in-out);
}

/* Over kontaktfeltet og footeren, som begge er svarte */
.sl-jens-knapp--lys {
  background: var(--antikkhvit); color: var(--sort);
  box-shadow: 0 4px 14px rgba(0,0,0,0.34), 0 12px 32px rgba(0,0,0,0.26);
}
.sl-jens-knapp--lys:hover {
  background: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,0.40), 0 18px 44px rgba(0,0,0,0.30);
}
.sl-jens-knapp--lys .sl-jens-knapp__prikk {
  box-shadow: 0 0 0 2px var(--antikkhvit);
  transition: box-shadow 320ms var(--ease-in-out);
}
.sl-jens-knapp:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(10,10,10,0.24), 0 18px 44px rgba(10,10,10,0.18); }
.sl-jens-knapp:focus-visible { outline: 2px solid var(--oslo); outline-offset: 3px; }
.sl-jens-knapp svg { width: 19px; height: 19px; }
.sl-jens-knapp--apen {
  width: 52px; height: 52px; padding: 0; justify-content: center;
  background: var(--oslo);
}
.sl-jens-knapp__x { font-size: 26px; line-height: 1; }
.sl-jens-knapp__prikk {
  position: absolute; top: 9px; right: 11px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--kobber);
  box-shadow: 0 0 0 2px var(--sort);
  animation: sl-puls 2.4s ease-in-out infinite;
}
@keyframes sl-puls { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.sl-jens {
  position: fixed; right: 24px; bottom: 90px; z-index: 50;
  width: min(92vw, 392px); height: min(72vh, 560px);
  display: flex; flex-direction: column;
  background: var(--antikkhvit);
  border: 1px solid var(--border-light); border-radius: 16px;
  box-shadow: 0 12px 40px rgba(10,10,10,0.16), 0 28px 80px rgba(10,10,10,0.14);
  overflow: hidden;
  animation: sl-jens-inn 260ms var(--ease-out);
}
@keyframes sl-jens-inn {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.sl-jens__topp {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 14px 14px 16px; border-bottom: 1px solid var(--border-light);
  background: var(--flate);
}
.sl-jens__ident { display: flex; align-items: center; gap: 11px; font-size: 14px; }
.sl-jens__ident strong { display: block; color: var(--sort); font-weight: 600; }
.sl-jens__merke {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
  background: var(--oslo); color: var(--antikkhvit);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 15px;
}
.sl-jens__rolle {
  display: block; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--mist); margin-top: 2px;
}
.sl-jens__lukk {
  width: 34px; height: 34px; border: none; background: transparent;
  font-size: 22px; line-height: 1; color: var(--fog); cursor: pointer; border-radius: 8px;
}
.sl-jens__lukk:hover { background: rgba(10,10,10,0.06); color: var(--sort); }

.sl-jens__log {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: thin;
}
.sl-jens__melding {
  max-width: 86%; padding: 11px 14px; border-radius: 14px;
  font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: break-word;
}
.sl-jens__melding--jens {
  align-self: flex-start; background: var(--flate);
  border: 1px solid var(--border-light); border-bottom-left-radius: 5px; color: var(--sort);
}
.sl-jens__melding--du {
  align-self: flex-end; background: var(--oslo); color: var(--antikkhvit);
  border-bottom-right-radius: 5px;
}
.sl-jens__skriver { display: flex; gap: 5px; align-items: center; padding: 15px 16px; }
.sl-jens__skriver span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--mist);
  animation: sl-hopp 1.3s ease-in-out infinite;
}
.sl-jens__skriver span:nth-child(2) { animation-delay: 0.18s; }
.sl-jens__skriver span:nth-child(3) { animation-delay: 0.36s; }
@keyframes sl-hopp { 0%,60%,100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-4px); opacity: 1; } }

.sl-jens__forslag { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.sl-jens__forslag button {
  font-family: var(--font-sans); font-size: 13px; color: var(--oslo);
  background: transparent; border: 1px solid var(--linbla); border-radius: 999px;
  padding: 8px 13px; cursor: pointer; transition: all 150ms var(--ease-in-out);
}
.sl-jens__forslag button:hover { background: var(--flate); border-color: var(--oslo); }

/* Handlingsknapp Jens tilbyr når han vil åpne skjemaet ([[SKJEMA]]-markør) */
.sl-jens__handling {
  align-self: flex-start; margin: 2px 0 4px;
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 500;
  color: var(--antikkhvit); background: var(--oslo);
  border: none; border-radius: 8px; padding: 10px 15px;
  cursor: pointer; transition: all 160ms var(--ease-in-out);
}
.sl-jens__handling:hover { background: var(--sort); transform: translateY(-1px); }

.sl-jens__bunn {
  display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border-light);
  background: var(--flate);
}
.sl-jens__felt {
  flex: 1; font-family: var(--font-sans); font-size: 14.5px; color: var(--sort);
  background: var(--antikkhvit); border: 1px solid var(--linbla);
  border-radius: 10px; padding: 11px 13px;
}
.sl-jens__felt::placeholder { color: var(--mist); }
.sl-jens__felt:focus { outline: none; border-color: var(--oslo); box-shadow: 0 0 0 3px rgba(74,90,98,0.12); }
.sl-jens__send {
  flex: 0 0 44px; width: 44px; border: none; border-radius: 10px;
  background: var(--oslo); color: var(--antikkhvit); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 150ms var(--ease-in-out), opacity 150ms var(--ease-in-out);
}
.sl-jens__send svg { width: 18px; height: 18px; }
.sl-jens__send:hover:not(:disabled) { background: var(--sort); }
.sl-jens__send:disabled { opacity: 0.38; cursor: default; }

.sl-jens__fot {
  padding: 0 14px 12px; font-size: 11.5px; line-height: 1.45; color: var(--mist);
  background: var(--flate);
}
.sl-jens__fot a { color: var(--fog); }

@media (max-width: 640px) {
  .sl-jens-knapp { right: 16px; bottom: 16px; padding: 12px 16px 12px 14px; }
  .sl-jens {
    right: 0; left: 0; bottom: 0; width: 100%;
    height: 86vh; height: 86dvh;
    border-radius: 16px 16px 0 0; border-left: none; border-right: none; border-bottom: none;
  }
  .sl-jens__melding { max-width: 90%; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-jens, .sl-jens-knapp__prikk, .sl-jens__skriver span { animation: none !important; }
}

/* ---------- Stikkordbånd i heroen ---------- */
/* Grid- og flex-elementer har min-width: auto som standard, altså
   innholdets bredde. Uten min-width: 0 vokser sporet ut av siden. */
.sl-hero__left, .sl-hero__grid > * { min-width: 0; }
.sl-band {
  width: 100%; max-width: 100%; min-width: 0;
  margin-top: 56px; padding-top: 22px;
  border-top: 1px solid var(--border-light);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 60px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 60px), transparent 100%);
}
.sl-band__spor {
  display: flex; width: max-content;
  animation: sl-band-rull 38s linear infinite;
}
.sl-band:hover .sl-band__spor { animation-play-state: paused; }
.sl-band__sett { display: flex; flex: 0 0 auto; }
.sl-band__ord {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fog); white-space: nowrap;
}
.sl-band__ord::before {
  content: "/"; margin: 0 10px 0 26px; color: var(--linbla);
}
@keyframes sl-band-rull { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .sl-band { mask-image: none; -webkit-mask-image: none; }
  .sl-band__spor { animation: none; flex-wrap: wrap; width: 100%; }
  .sl-band__sett:last-child { display: none; }
  .sl-band__ord::before { margin-left: 0; margin-right: 8px; }
  .sl-band__sett { flex-wrap: wrap; gap: 4px 18px; }
}

/* =============================================================
   Metodelinjen — tillegg til den eksisterende oppstreken.
   Bruker ::after på lista; ::before er opptatt av selve linjen.
   ============================================================= */

/* Et rolig signal som vandrer langs linjen etter at den er tegnet.
   Samme idé som hero-diagrammet: noe beveger seg gjennom systemet. */
.sl-no-steps::after {
  content: ""; position: absolute; top: -2px; left: -120px;
  width: 120px; height: 3px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg,
    transparent, rgba(107,130,144,0.55) 40%, var(--antikkhvit) 50%,
    rgba(107,130,144,0.55) 60%, transparent);
}
.sl-no-steps--aktiv::after { animation: sl-signal 8s 2.4s ease-in-out infinite; }
@keyframes sl-signal {
  0%   { left: -120px; opacity: 0; }
  12%  { opacity: 0.9; }
  84%  { opacity: 0.9; }
  100% { left: 100%; opacity: 0; }
}

/* Punktet svarer når man er innom steget */
.sl-no-step::before { will-change: transform; }
.sl-no-step:hover::before { box-shadow: 0 0 0 5px rgba(74,90,98,0.13); }
.sl-no-step__ikon {
  transition: transform 240ms var(--ease-out),
              border-color 240ms var(--ease-in-out),
              background 240ms var(--ease-in-out);
}
.sl-no-step:hover .sl-no-step__ikon {
  transform: translateY(-2px);
  border-color: var(--oslo);
  background: var(--antikkhvit);
}

@media (max-width: 720px) { .sl-no-steps::after { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .sl-no-steps::after { display: none; }
  .sl-no-step:hover .sl-no-step__ikon { transform: none; }
}

/* =============================================================
   Skjult spill
   ============================================================= */
.sl-hero__diagramknapp {
  display: block; width: 100%; padding: 0; border: none;
  background: transparent; cursor: pointer;
  border-radius: 14px;
  transition: transform 320ms var(--ease-out), filter 320ms var(--ease-out);
}
.sl-hero__diagramknapp:hover { transform: translateY(-3px) scale(1.012); }
.sl-hero__diagramknapp:active { transform: scale(0.995); }
.sl-hero__diagramknapp:focus-visible { outline: 2px solid var(--oslo); outline-offset: 6px; }

.sl-spill { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; }
.sl-spill__bak {
  position: absolute; inset: 0; background: rgba(10,10,10,0.62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: sl-fade 260ms var(--ease-out);
}
.sl-spill__panel {
  position: relative; width: min(94vw, 760px);
  background: var(--antikkhvit); border-radius: 16px;
  box-shadow: 0 28px 90px rgba(10,10,10,0.38);
  padding: 22px clamp(18px, 3vw, 30px) 20px;
  animation: sl-spill-inn 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes sl-spill-inn {
  from { opacity: 0; transform: translateY(26px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.sl-spill__topp { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sl-spill__tittel {
  font-size: clamp(21px, 2.6vw, 27px); font-weight: 600; letter-spacing: -0.02em;
  color: var(--sort); margin-top: 6px;
}
.sl-spill__lukk {
  width: 38px; height: 38px; border: none; background: transparent; cursor: pointer;
  font-size: 25px; line-height: 1; color: var(--fog); border-radius: 8px; flex: 0 0 38px;
}
.sl-spill__lukk:hover { background: rgba(10,10,10,0.06); color: var(--sort); }

.sl-spill__maalere {
  display: flex; gap: 22px; margin: 14px 0 12px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--fog);
}
.sl-spill__maalere strong { font-size: 16px; color: var(--sort); margin-right: 3px; }

.sl-spill__flate {
  position: relative; width: 100%; height: min(52vh, 380px);
  background: linear-gradient(160deg, rgba(213,207,194,0.55), rgba(232,223,210,0.35));
  border: 1px solid var(--border-light); border-radius: 12px; overflow: hidden;
}
.sl-spill__lerret { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.sl-spill__lerret:active { cursor: grabbing; }

.sl-spill__treff {
  position: absolute; top: 44%; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 26px; font-weight: 600; color: var(--kobber);
  pointer-events: none; animation: sl-treff 2200ms var(--ease-out) forwards;
}
/* Meldingen skal rekkes å leses: rask inn, lang pause, rolig ut. */
@keyframes sl-treff {
  0%   { opacity: 0; transform: translate(-50%, 8px)   scale(0.9); }
  9%   { opacity: 1; transform: translate(-50%, 0)     scale(1); }
  70%  { opacity: 1; transform: translate(-50%, -10px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -34px) scale(1.05); }
}

.sl-spill__slutt {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  background: rgba(244,241,234,0.96);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  border-radius: 16px;
  animation: sl-fade 260ms var(--ease-out);
}
.sl-spill__sluttall {
  font-size: 58px; font-weight: 700; letter-spacing: -0.04em; color: var(--sort); line-height: 1;
}
.sl-spill__slutttekst { font-size: 15px; color: var(--fog); margin-bottom: 18px; }
.sl-spill__knapper { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.sl-spill__hjelp { margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: var(--mist); }

@media (max-width: 640px) {
  .sl-spill__panel { width: 100%; border-radius: 16px 16px 0 0; align-self: flex-end; padding: 18px 16px 16px; }
  .sl-spill { align-items: flex-end; }
  .sl-spill__flate { height: 46vh; }
  .sl-spill__maalere { gap: 16px; }
}

/* ---------- Mediumvelger i spillet ---------- */
.sl-spill__velger { display: flex; gap: 8px; margin-bottom: 12px; }
.sl-medium {
  position: relative; flex: 1 1 0;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px 9px 10px;
  background: var(--flate); border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); cursor: pointer; color: var(--oslo);
  font-family: var(--font-sans); text-align: left;
  transition: border-color 160ms var(--ease-in-out), background 160ms var(--ease-in-out),
              box-shadow 160ms var(--ease-in-out);
}
.sl-medium:hover { border-color: var(--linbla); }
.sl-medium--valgt {
  border-color: var(--oslo); background: #fff;
  box-shadow: 0 0 0 2px rgba(74,90,98,0.15);
}
.sl-medium__ikon { width: 22px; height: 22px; flex: 0 0 22px; }
.sl-medium__navn { font-size: 13px; font-weight: 500; color: var(--sort); }
.sl-medium__poeng {
  margin-left: auto; font-family: var(--font-mono); font-size: 12px;
  font-weight: 600; color: var(--kobber);
}
.sl-medium__tast {
  position: absolute; top: 5px; right: 6px;
  font-family: var(--font-mono); font-size: 9px; color: var(--mist);
}
@media (max-width: 640px) {
  .sl-spill__velger { gap: 6px; }
  .sl-medium { flex-direction: column; align-items: flex-start; gap: 3px; padding: 8px 8px 9px; }
  .sl-medium__navn { font-size: 11.5px; }
  .sl-medium__poeng { margin-left: 0; }
  .sl-medium__tast { display: none; }
}

/* ---------- Kildesortering: fasit og feilmelding ---------- */
.sl-medium__fasit {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.03em;
  color: var(--mist); margin-left: auto; padding-right: 10px; white-space: nowrap;
}
.sl-medium--valgt .sl-medium__fasit { color: var(--fog); }
.sl-medium__poeng { margin-left: 0; }
.sl-spill__treff { font-size: 20px; white-space: nowrap; }

/* Feilmeldingen lærer bort noe — den skal stå lenger og veie tyngre
   enn den positive kvitteringen. */
.sl-spill__treff--feil {
  color: var(--kobber);
  font-weight: 600;
  font-size: 15px; line-height: 1.4;
  white-space: normal; text-align: center;
  width: max-content; max-width: min(84%, 320px);
  background: rgba(240, 229, 220, 0.94);
  border: 1px solid rgba(169, 104, 63, 0.35);
  border-radius: 8px;
  padding: 8px 14px;
  box-shadow: 0 6px 20px rgba(10, 10, 10, 0.10);
  animation-name: sl-treff-feil;
  animation-duration: 3200ms;
}
@keyframes sl-treff-feil {
  0%   { opacity: 0; transform: translate(-50%, 10px) scale(0.92); }
  6%   { opacity: 1; transform: translate(-50%, 0)    scale(1.04); }
  11%  { opacity: 1; transform: translate(-50%, 0)    scale(1); }
  78%  { opacity: 1; transform: translate(-50%, -8px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -26px) scale(1); }
}
@media (max-width: 640px) {
  .sl-medium__fasit { margin-left: 0; padding-right: 0; font-size: 9px; }
  .sl-spill__treff { font-size: 15px; }
}

/* ---------- Innsalg på sluttskjermen ---------- */
.sl-spill__slutt { padding: 24px clamp(18px, 4vw, 48px); text-align: center; overflow-y: auto; }
.sl-spill__sluttall { font-size: clamp(42px, 6vw, 58px); }
.sl-spill__slutttekst { margin-bottom: 20px; }
.sl-spill__pitch {
  max-width: 460px; margin: 0 auto 22px; padding-top: 18px;
  border-top: 1px solid var(--border-light);
}
.sl-spill__pitch .sl-slash { display: block; margin-bottom: 8px; }
.sl-spill__pitch p {
  font-size: 14.5px; line-height: 1.6; color: var(--fog); text-wrap: pretty;
}
.sl-spill__pitch strong { color: var(--sort); font-weight: 600; }
.sl-spill__lukklenke {
  margin-top: 14px; background: none; border: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--mist);
}
.sl-spill__lukklenke:hover { color: var(--fog); }
@media (max-height: 700px) {
  .sl-spill__sluttall { font-size: 34px; }
  .sl-spill__slutttekst { margin-bottom: 10px; font-size: 13.5px; }
  .sl-spill__pitch { padding-top: 12px; margin-bottom: 14px; }
  .sl-spill__pitch p { font-size: 13px; line-height: 1.5; }
  .sl-spill__lukklenke { margin-top: 10px; }
}
@media (max-width: 640px) {
  .sl-spill__pitch { padding-top: 14px; margin-bottom: 16px; }
  .sl-spill__pitch p { font-size: 13.5px; }
  .sl-spill__sluttall { font-size: 40px; }
  .sl-spill__slutttekst { margin-bottom: 14px; }
}

/* ---------- Siste ti sekunder ---------- */
.sl-spill__hast { color: var(--kobber); }
.sl-spill__hast strong { color: var(--kobber); animation: sl-hast 1s ease-in-out infinite; }
@keyframes sl-hast { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .sl-spill__hast strong { animation: none; } }

/* =============================================================
   Leveringssteder for EE-avfall
   ============================================================= */
.sl-eavfall__utloser {
  margin-top: 18px; padding: 10px 16px;
  background: transparent; border: 1px dashed var(--linbla); border-radius: var(--radius-sm);
  cursor: pointer; font-family: var(--font-sans); font-size: 13.5px; color: var(--oslo);
  transition: border-color 160ms var(--ease-in-out), background 160ms var(--ease-in-out);
}
.sl-eavfall__utloser:hover { border-style: solid; background: var(--flate); }

.sl-eavfall {
  width: 100%; max-width: 470px; margin: 18px auto 0;
  padding-top: 16px; border-top: 1px solid var(--border-light); text-align: left;
}
.sl-eavfall__topp { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sl-eavfall__lukk {
  width: 26px; height: 26px; border: none; background: none; cursor: pointer;
  font-size: 19px; line-height: 1; color: var(--mist); border-radius: 5px;
}
.sl-eavfall__lukk:hover { color: var(--sort); background: rgba(10,10,10,0.05); }

.sl-eavfall__sok { display: flex; flex-direction: column; gap: 9px; }
.sl-eavfall__pos { justify-content: center; }
.sl-eavfall__pos svg { width: 16px; height: 16px; }
.sl-eavfall__eller {
  text-align: center; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--mist);
}
.sl-eavfall__felt { display: flex; gap: 7px; }
.sl-eavfall__felt .sl-felt { font-size: 14.5px; padding: 11px 13px; }
.sl-eavfall__felt .sl-btn { flex: 0 0 auto; }

.sl-eavfall__status, .sl-eavfall__fra {
  font-size: 13px; color: var(--fog); margin-top: 10px;
}
.sl-eavfall__fra { margin-bottom: 8px; }
.sl-eavfall__feil {
  margin-top: 10px; font-size: 13px; color: #8C3B2E;
  background: #F6E7E3; border-radius: 6px; padding: 9px 11px;
}

.sl-eavfall__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sl-eavfall__liste li {
  position: relative; background: var(--flate);
  border: 1px solid var(--border-light); border-left: 3px solid var(--oslo);
  border-radius: var(--radius-sm); padding: 11px 13px 12px;
}
.sl-eavfall__navn { font-size: 14.5px; font-weight: 600; color: var(--sort); padding-right: 74px; }
.sl-eavfall__meta {
  display: flex; flex-wrap: wrap; gap: 3px 12px; margin-top: 3px;
  font-size: 12.5px; color: var(--fog);
}
.sl-eavfall__km {
  font-family: var(--font-mono); font-weight: 600; color: var(--kobber);
}
.sl-eavfall__tid { margin-top: 4px; font-size: 12px; color: var(--mist); }
.sl-eavfall__kart {
  position: absolute; top: 11px; right: 12px;
  font-family: var(--font-mono); font-size: 11px; color: var(--oslo); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.sl-eavfall__kart:hover { border-bottom-color: currentColor; }

.sl-eavfall__nytt {
  margin-top: 10px; background: none; border: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fog); padding: 0;
}
.sl-eavfall__nytt:hover { color: var(--sort); }
.sl-eavfall__kilde { margin-top: 12px; font-size: 11.5px; line-height: 1.5; color: var(--mist); }

@media (max-width: 640px) {
  .sl-eavfall__navn { padding-right: 0; }
  .sl-eavfall__kart { position: static; display: inline-block; margin-top: 6px; }
  .sl-eavfall__utloser { font-size: 12.5px; padding: 9px 12px; }
}

/* ---------- Merkelapp på leveringssted ---------- */
.sl-eavfall__merke {
  display: inline-block; margin-left: 8px; vertical-align: 1px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.05em;
  text-transform: uppercase; font-weight: 500;
  padding: 2px 6px; border-radius: 4px; white-space: nowrap;
}
.sl-eavfall__merke--butikk  { background: rgba(169,104,63,0.13); color: #8B5433; }
.sl-eavfall__merke--stasjon { background: rgba(74,90,98,0.12);  color: var(--oslo); }
.sl-eavfall__jus {
  margin-top: 11px; font-size: 12px; line-height: 1.55; color: var(--fog);
  background: var(--flate); border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); padding: 9px 11px;
}
@media (max-width: 640px) {
  .sl-eavfall__merke { display: block; margin: 4px 0 0; width: max-content; }
}

/* ---------- Veibeskrivelse og kartlenke ---------- */
.sl-eavfall__lenker {
  position: absolute; top: 10px; right: 12px;
  display: flex; align-items: center; gap: 10px;
}
.sl-eavfall__vei {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px;
  background: var(--oslo); color: var(--antikkhvit);
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  text-decoration: none; white-space: nowrap;
  transition: background 150ms var(--ease-in-out), transform 150ms var(--ease-out);
}
.sl-eavfall__vei:hover { background: var(--sort); transform: translateY(-1px); }
.sl-eavfall__vei svg { width: 13px; height: 13px; }
.sl-eavfall__kart {
  position: static; font-family: var(--font-mono); font-size: 11px;
  color: var(--mist); text-decoration: none; border-bottom: 1px solid transparent;
}
.sl-eavfall__kart:hover { color: var(--fog); border-bottom-color: currentColor; }

@media (max-width: 640px) {
  .sl-eavfall__lenker { position: static; margin-top: 9px; gap: 12px; }
  .sl-eavfall__vei { padding: 8px 14px; font-size: 12.5px; }
}
.sl-eavfall__merke--kjede { background: rgba(74,90,98,0.16); color: var(--oslo); font-weight: 600; }

/* ---------- Plakat-tilbud ---------- */
.sl-plakat {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 12px; padding: 13px 15px;
  background: var(--flate); border: 1px solid var(--linbla);
  border-left: 3px solid var(--kobber); border-radius: var(--radius-sm);
}
.sl-plakat__tekst { flex: 1 1 190px; display: flex; flex-direction: column; gap: 2px; }
.sl-plakat__tekst strong { font-size: 14px; font-weight: 600; color: var(--sort); }
.sl-plakat__tekst span { font-size: 12.5px; line-height: 1.45; color: var(--fog); }
.sl-plakat__knapp { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 640px) {
  .sl-plakat__knapp { width: 100%; justify-content: center; }
}

/* ---------- Plakat-knapp i sluttskjermen ---------- */
.sl-spill__plakat { margin-top: 14px; }
.sl-modal__jobber {
  margin-top: 12px; font-size: 13.5px; color: var(--fog);
  display: flex; align-items: center; gap: 8px;
}
.sl-modal__jobber::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--linbla); border-top-color: var(--oslo);
  animation: sl-snurr 700ms linear infinite;
}
@keyframes sl-snurr { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sl-modal__jobber::before { animation: none; } }

/* ---------- Plakat-lenke nederst i spillpanelet ---------- */
.sl-spill__fot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--border-light);
}
.sl-spill__fot > span { font-size: 12.5px; color: var(--mist); }
.sl-spill__fotknapp {
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--linbla); color: var(--oslo);
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; white-space: nowrap;
  transition: border-color 160ms var(--ease-in-out), background 160ms var(--ease-in-out),
              color 160ms var(--ease-in-out);
}
.sl-spill__fotknapp:hover { border-color: var(--oslo); background: var(--oslo); color: var(--antikkhvit); }
.sl-spill__fotknapp:focus-visible { outline: 2px solid var(--oslo); outline-offset: 2px; }
@media (max-width: 640px) {
  .sl-spill__fot { justify-content: center; margin-top: 10px; padding-top: 10px; }
  .sl-spill__fot > span { flex: 1 1 100%; text-align: center; font-size: 12px; }
  .sl-spill__fotknapp { width: 100%; }
}

/* ---------- Treg kartdatabase: fluktvei ---------- */
.sl-modal__treig {
  margin-top: 12px; padding: 11px 13px;
  background: var(--flate); border: 1px solid var(--linbla);
  border-radius: var(--radius-sm);
}
.sl-modal__treig p { font-size: 13px; line-height: 1.5; color: var(--fog); margin-bottom: 9px; }
.sl-modal__treig .sl-btn { font-size: 13px; padding: 9px 14px; }

/* ---------- "Din score ble" over tallet ---------- */
.sl-spill__scorelabel {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--fog); margin-bottom: 6px;
}
@media (max-height: 700px) { .sl-spill__scorelabel { font-size: 10px; margin-bottom: 4px; } }

/* ---------- CTA i KI-seksjonen ---------- */
.sl-advisory__cta { align-self: flex-start; margin-top: 10px; }
@media (max-width: 640px) {
  .sl-advisory__cta { width: 100%; justify-content: center; }
}

/* =============================================================
   Teknisk design — levende demo med målgruppevelger
   ============================================================= */
.sl-td__grid {
  display: grid; grid-template-columns: 1.55fr 1fr; gap: 28px; align-items: start;
}

/* --- Demoflaten --- */
.sl-td__demo { display: flex; flex-direction: column; gap: 14px; }
.sl-td__vindu {
  background: var(--d-bak); border: 1px solid var(--d-kant);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 2px 6px rgba(10,10,10,0.05), 0 18px 44px rgba(10,10,10,0.08);
  transition: background 420ms var(--ease-in-out), border-color 420ms var(--ease-in-out);
}
.sl-td__topp {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; border-bottom: 1px solid var(--d-kant);
  transition: border-color 420ms var(--ease-in-out);
}
.sl-td__prikker { display: flex; gap: 5px; }
.sl-td__prikker i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--d-kant); transition: background 420ms var(--ease-in-out);
}
.sl-td__vtittel {
  font-family: var(--d-font); font-size: 12.5px; font-weight: var(--d-vekt);
  letter-spacing: var(--d-sperr); color: var(--d-svak);
  transition: color 420ms var(--ease-in-out), font-family 0ms;
}

.sl-td__flate {
  padding: calc(20px * var(--d-luft));
  display: flex; flex-direction: column; gap: calc(16px * var(--d-luft));
  transition: padding 420ms var(--ease-in-out), gap 420ms var(--ease-in-out);
}

.sl-td__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(10px * var(--d-luft)); }
.sl-td__stat {
  background: var(--d-kort); border: 1px solid var(--d-kant);
  border-radius: var(--d-radius); padding: calc(12px * var(--d-luft)) 14px;
  box-shadow: var(--d-skygge);
  transition: all 420ms var(--ease-in-out);
}
.sl-td__statm {
  display: block; font-family: var(--d-font); font-size: calc(10.5px * var(--d-skala));
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--d-svak);
  transition: color 420ms var(--ease-in-out);
}
.sl-td__statv {
  display: block; margin-top: 4px; font-family: var(--d-font);
  font-size: calc(21px * var(--d-skala)); font-weight: 700;
  letter-spacing: var(--d-sperr); color: var(--d-tekst);
  transition: color 420ms var(--ease-in-out), font-size 420ms var(--ease-in-out);
}

.sl-td__kort {
  background: var(--d-kort); border: 1px solid var(--d-kant);
  border-radius: var(--d-radius); padding: calc(18px * var(--d-luft)) 20px calc(18px * var(--d-luft));
  box-shadow: var(--d-skygge); transition: all 420ms var(--ease-in-out);
}
.sl-td__kort h3 {
  font-family: var(--d-font); font-size: calc(16px * var(--d-skala)); font-weight: var(--d-vekt);
  letter-spacing: var(--d-sperr); color: var(--d-tekst); margin-bottom: 6px;
  transition: color 420ms var(--ease-in-out), font-size 420ms var(--ease-in-out);
}
.sl-td__kort p {
  font-family: var(--d-font); font-size: calc(13.5px * var(--d-skala)); line-height: 1.55;
  color: var(--d-svak); margin-bottom: calc(14px * var(--d-luft));
  transition: color 420ms var(--ease-in-out);
}
.sl-td__knapp {
  font-family: var(--d-font); font-size: calc(13px * var(--d-skala)); font-weight: var(--d-vekt);
  letter-spacing: var(--d-sperr); cursor: default;
  background: var(--d-aksent); color: var(--d-aksent-tekst);
  border: none; border-radius: var(--d-radius);
  padding: calc(10px * var(--d-luft)) 18px;
  transition: all 420ms var(--ease-in-out);
}

.sl-td__liste { list-style: none; display: flex; flex-direction: column; gap: calc(6px * var(--d-luft)); }
.sl-td__liste li {
  display: flex; align-items: center; gap: 12px;
  background: var(--d-kort); border: 1px solid var(--d-kant);
  border-radius: var(--d-radius); padding: calc(9px * var(--d-luft)) 14px;
  transition: all 420ms var(--ease-in-out);
}
.sl-td__ra {
  font-family: var(--d-font); font-size: calc(12.5px * var(--d-skala)); font-weight: 600;
  color: var(--d-tekst); min-width: 58px; transition: color 420ms var(--ease-in-out);
}
.sl-td__rb {
  flex: 1; font-family: var(--d-font); font-size: calc(12.5px * var(--d-skala));
  color: var(--d-svak); transition: color 420ms var(--ease-in-out);
}
.sl-td__pille {
  font-family: var(--d-font); font-size: calc(10.5px * var(--d-skala)); font-weight: 600;
  letter-spacing: 0.04em; padding: 4px 10px; border-radius: 999px;
  background: var(--d-pille); color: var(--d-pille-tekst); white-space: nowrap;
  transition: all 420ms var(--ease-in-out);
}


/* --- Målgruppemenyen --- */
.sl-td__meny { display: flex; flex-direction: column; gap: 8px; }
.sl-td__valg {
  position: relative; display: grid; gap: 3px; text-align: left; cursor: pointer;
  background: var(--flate); border: 1px solid var(--border-light);
  border-radius: var(--radius); padding: 15px 17px 16px;
  transition: border-color 200ms var(--ease-in-out), background 200ms var(--ease-in-out),
              box-shadow 200ms var(--ease-in-out), transform 200ms var(--ease-out);
}
.sl-td__valg:hover { border-color: var(--linbla); transform: translateX(-2px); }
.sl-td__valg--aktiv {
  background: #fff; border-color: var(--oslo);
  box-shadow: 0 1px 2px rgba(10,10,10,0.04), 0 10px 26px rgba(10,10,10,0.07);
}
.sl-td__valg--aktiv::before {
  content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--oslo);
}
.sl-td__valg:focus-visible { outline: 2px solid var(--oslo); outline-offset: 2px; }
.sl-td__vnr {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--mist);
}
.sl-td__vnavn { font-size: 15.5px; font-weight: 600; color: var(--sort); }
.sl-td__vmal { font-size: 12.5px; line-height: 1.45; color: var(--fog); }
.sl-td__vfarger { display: flex; gap: 4px; margin-top: 8px; }
.sl-td__vfarger i {
  width: 15px; height: 15px; border-radius: 4px;
  border: 1px solid rgba(10,10,10,0.10);
}

@media (max-width: 1024px) {
  .sl-td__grid { grid-template-columns: 1fr; gap: 20px; }
  .sl-td__meny { display: grid; grid-template-columns: repeat(2, 1fr); }
  .sl-td__valg:hover { transform: none; }
}
@media (max-width: 640px) {
  .sl-td__meny { grid-template-columns: 1fr; }
  .sl-td__stats { grid-template-columns: 1fr; }
  .sl-td__liste li { flex-wrap: wrap; gap: 6px 10px; }
  .sl-td__rb { flex: 1 1 100%; order: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-td__vindu, .sl-td__flate, .sl-td__stat, .sl-td__kort, .sl-td__knapp,
  .sl-td__liste li, .sl-td__pille { transition: none !important; }
}

/* Åtte valg gjør menyen høy — strammes inn */
.sl-td__valg { padding: 12px 15px 13px; }
.sl-td__vnavn { font-size: 14.5px; }
.sl-td__vmal { font-size: 12px; }
.sl-td__vfarger { margin-top: 6px; }
.sl-td__vfarger i { width: 13px; height: 13px; border-radius: 3px; }
@media (min-width: 1025px) {
  /* Åtte valg i én kolonne blir dobbelt så høyt som demoen.
     To kolonner gir omtrent samme høyde på begge sider. */
  .sl-td__grid { grid-template-columns: 1.28fr 1fr; gap: 26px; }
  .sl-td__meny { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; align-content: start; }
  .sl-td__valg { padding: 13px 14px 14px; }
  .sl-td__valg:hover { transform: translateY(-2px); }
  .sl-td__vnavn { font-size: 14px; letter-spacing: -0.01em; }
  .sl-td__vmal { font-size: 11.5px; }
}

/* =============================================================
   Demo-grensesnitt — ett per tjeneste. Alle arver temaet.
   ============================================================= */
.sl-td__flate > div { display: flex; flex-direction: column; gap: calc(12px * var(--d-luft)); }
.m-etikett {
  font-family: var(--d-font); font-size: calc(10px * var(--d-skala)); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--d-svak);
}
.m-knapp {
  font-family: var(--d-font); font-size: calc(12.5px * var(--d-skala)); font-weight: var(--d-vekt);
  letter-spacing: var(--d-sperr); cursor: default; border: none;
  background: var(--d-aksent); color: var(--d-aksent-tekst);
  border-radius: var(--d-radius); padding: calc(9px * var(--d-luft)) 16px;
  transition: all 420ms var(--ease-in-out);
}
.m-knapp--sek { background: transparent; color: var(--d-tekst); border: 1px solid var(--d-kant); }
.m-knapp--vipps { background: #FF5B24; color: #fff; }
.m-pille {
  font-family: var(--d-font); font-size: calc(10px * var(--d-skala)); font-weight: 600;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  background: var(--d-pille); color: var(--d-pille-tekst);
}
.sl-td__flate b, .sl-td__flate h3 { color: var(--d-tekst); font-family: var(--d-font); }
.sl-td__flate span, .sl-td__flate p { color: var(--d-svak); font-family: var(--d-font); }

/* Nettside */
.m-ns__hero { padding: calc(6px * var(--d-luft)) 0 calc(4px * var(--d-luft)); }
.m-merke { display:block; font-size: calc(11px * var(--d-skala)); font-weight:600; margin-bottom:8px; }
.m-ns__hero h3 { font-size: calc(21px * var(--d-skala)); line-height:1.15; margin-bottom:7px; }
.m-ns__hero p { font-size: calc(13px * var(--d-skala)); line-height:1.55; max-width: 42ch; }
.m-ns__cta { display:flex; align-items:center; gap:12px; margin-top: calc(13px * var(--d-luft)); }
.m-ns__tlf { font-size: calc(12px * var(--d-skala)); }
.m-ns__bevis { display:flex; gap:16px; flex-wrap:wrap; padding: calc(10px * var(--d-luft)) 0;
  border-top:1px solid var(--d-kant); border-bottom:1px solid var(--d-kant); }
.m-ns__bevis span { font-size: calc(11.5px * var(--d-skala)); }
.m-ns__sok { display:flex; flex-direction:column; gap:7px; }
.m-ns__rad { display:flex; justify-content:space-between; align-items:center;
  background:var(--d-kort); border:1px solid var(--d-kant); border-radius:var(--d-radius);
  padding: calc(8px * var(--d-luft)) 13px; font-size: calc(12.5px * var(--d-skala)); }

/* Webapplikasjon */
.m-webapp { display:grid !important; grid-template-columns: 0.85fr 1.15fr; gap:12px; }
.m-wa__liste, .m-wa__detalj { display:flex; flex-direction:column; gap:7px;
  background:var(--d-kort); border:1px solid var(--d-kant); border-radius:var(--d-radius);
  padding: calc(12px * var(--d-luft)) 13px; }
.m-wa__rad { display:flex; gap:9px; align-items:baseline; font-size: calc(12.5px * var(--d-skala));
  padding:6px 8px; border-radius:calc(var(--d-radius) / 1.6); }
.m-wa__rad--valgt { background: var(--d-pille); }
.m-wa__rad--valgt b, .m-wa__rad--valgt span { color: var(--d-pille-tekst); }
.m-wa__detalj h3 { font-size: calc(15px * var(--d-skala)); margin-bottom:4px; }
.m-wa__felt { display:flex; justify-content:space-between; font-size: calc(12.5px * var(--d-skala));
  padding:5px 0; border-bottom:1px solid var(--d-kant); }
.m-wa__knapper { display:flex; gap:8px; margin-top: calc(8px * var(--d-luft)); }

/* Nettbutikk */
.m-bu__linje { display:flex; align-items:center; gap:12px; background:var(--d-kort);
  border:1px solid var(--d-kant); border-radius:var(--d-radius); padding:11px 13px; }
.m-bu__linje > div { display:flex; flex-direction:column; flex:1; }
.m-bu__linje b { font-size: calc(13.5px * var(--d-skala)); }
.m-bu__linje span { font-size: calc(11.5px * var(--d-skala)); }
.m-bu__bilde { width:38px; height:38px; border-radius:6px; background:var(--d-pille); flex:0 0 38px; }
.m-bu__pris { font-size: calc(14px * var(--d-skala)); }
.m-bu__frakt { display:flex; flex-direction:column; gap:6px; }
.m-bu__valg { display:flex; align-items:center; gap:10px; background:var(--d-kort);
  border:1px solid var(--d-kant); border-radius:var(--d-radius); padding:9px 13px;
  font-size: calc(12.5px * var(--d-skala)); }
.m-bu__valg span { flex:1; font-size: calc(11.5px * var(--d-skala)); }
.m-bu__valg--valgt { border-color: var(--d-aksent); box-shadow: inset 0 0 0 1px var(--d-aksent); }
.m-bu__sum { display:flex; flex-direction:column; gap:4px; padding: 10px 2px 0; }
.m-bu__sum > div { display:flex; justify-content:space-between; font-size: calc(12.5px * var(--d-skala)); }
.m-bu__sum span { color: var(--d-svak); }
.m-bu__total { padding-top:7px; border-top:1px solid var(--d-kant); }
.m-bu__total b { font-size: calc(14.5px * var(--d-skala)); }
.m-bu__betal { display:flex; gap:8px; }
.m-bu__betal .m-knapp { flex:1; }
.m-bu__fri { font-size: calc(11px * var(--d-skala)); text-align:center; }

/* Modulsystem */
.m-mo__grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:8px; }
.m-mo__kort { background:var(--d-kort); border:1px solid var(--d-kant); border-radius:var(--d-radius);
  padding:11px 12px; display:flex; flex-direction:column; gap:4px; opacity:.55; }
.m-mo__kort--pa { opacity:1; }
.m-mo__topp { display:flex; justify-content:space-between; align-items:center; }
.m-mo__kort b { font-size: calc(12.5px * var(--d-skala)); }
.m-mo__kort span { font-size: calc(11px * var(--d-skala)); }
.m-bryter { width:26px; height:15px; border-radius:999px; background:var(--d-kant);
  position:relative; flex:0 0 26px; transition: background 300ms var(--ease-in-out); }
.m-bryter::after { content:""; position:absolute; top:2.5px; left:2.5px; width:10px; height:10px;
  border-radius:50%; background:var(--d-bak); transition: left 300ms var(--ease-out); }
.m-bryter--pa { background: var(--d-aksent); }
.m-bryter--pa::after { left:13.5px; }
.m-mo__note { font-size: calc(11.5px * var(--d-skala)); color:var(--d-svak);
  border-left:2px solid var(--d-aksent); padding-left:10px; }

/* KI-agent */
.m-ag__boble { max-width:82%; padding:10px 14px; border-radius:var(--d-radius);
  font-size: calc(13px * var(--d-skala)); line-height:1.5; }
.m-ag__boble--kunde { align-self:flex-end; background:var(--d-aksent); color:var(--d-aksent-tekst) !important; }
.m-ag__boble--agent { align-self:flex-start; background:var(--d-kort); border:1px solid var(--d-kant);
  color:var(--d-tekst) !important; }
.m-ag__boble--grense { border-left:2px solid var(--d-aksent); }
.m-ag__lenke { display:block; margin-top:6px; font-size: calc(11px * var(--d-skala)); }
.m-ag__verktoy { align-self:flex-start; display:flex; align-items:center; gap:8px;
  font-size: calc(11px * var(--d-skala)); color:var(--d-svak); padding-left:4px; }
.m-ag__snurr { width:11px; height:11px; border-radius:50%; border:1.6px solid var(--d-kant);
  border-top-color: var(--d-aksent); animation: sl-snurr 800ms linear infinite; }
.m-ag__fot { font-size: calc(11px * var(--d-skala)); color:var(--d-svak); text-align:center;
  padding-top:6px; border-top:1px solid var(--d-kant); }

/* KI-implementering */
.m-ki__topp { display:flex; justify-content:space-between; align-items:baseline; }
.m-ki__naa { font-family:var(--d-font); font-size:calc(22px * var(--d-skala)); font-weight:700;
  letter-spacing:var(--d-sperr); color:var(--d-tekst) !important; }

.m-ki__graf { position:relative; }
.m-ki__graf svg { display:block; width:100%; height:calc(78px * var(--d-luft)); overflow:visible; }
.m-ki__linje { stroke-dasharray:1000; stroke-dashoffset:1000; animation:ki-tegn 1100ms .15s var(--ease-out) forwards; }
@keyframes ki-tegn { to { stroke-dashoffset:0; } }
.m-ki__flate { opacity:0; animation:ki-tone 700ms .75s var(--ease-out) forwards; }
@keyframes ki-tone { to { opacity:1; } }
.m-ki__prikk { opacity:0; animation:ki-prikk 260ms var(--ease-out) forwards; }
@keyframes ki-prikk { from { opacity:0; transform:scale(.4); } to { opacity:1; transform:scale(1); } }
.m-ki__akse { display:flex; justify-content:space-between; margin-top:4px;
  font-family:var(--d-font); font-size:calc(9.5px * var(--d-skala)); color:var(--d-svak); }

.m-ki__liste { display:flex; flex-direction:column; gap:calc(9px * var(--d-luft));
  padding-top:calc(8px * var(--d-luft)); border-top:1px solid var(--d-kant); }
.m-ki__rad { display:flex; flex-direction:column; gap:5px; }
.m-ki__rad--av { opacity:.5; }
.m-ki__navn { display:flex; align-items:center; gap:9px; font-size:calc(12.5px * var(--d-skala)); }
.m-ki__navn b { flex:1; }
.m-ki__spart { font-family:var(--d-font); font-weight:700; color:var(--d-aksent) !important;
  font-size:calc(12px * var(--d-skala)); }
.m-ki__rad--av .m-ki__spart { color:var(--d-svak) !important; }
.m-ki__spor { height:5px; border-radius:999px; background:var(--d-kant); overflow:hidden; }
.m-ki__fyll { height:100%; width:0; border-radius:999px; background:var(--d-aksent);
  animation:ki-vokse 900ms var(--ease-out) forwards; }
@keyframes ki-vokse { to { width:var(--m); } }
.m-ki__fot { font-size:calc(11px * var(--d-skala)); color:var(--d-svak);
  border-left:2px solid var(--d-aksent); padding-left:10px; }

/* Automasjoner */
.m-au__topp { display:flex; justify-content:space-between; align-items:center; }
.m-au__steg { display:flex; align-items:center; gap:11px; background:var(--d-kort);
  border:1px solid var(--d-kant); border-radius:var(--d-radius); padding:9px 12px;
  font-size: calc(12px * var(--d-skala)); }
.m-au__nr { color:var(--d-svak); }
.m-au__tekst { flex:1; color:var(--d-tekst) !important; }
.m-au__st { width:16px; text-align:center; color:var(--d-svak); }
.m-au__steg--ok .m-au__st { color: var(--d-aksent); }
.m-au__steg--feil { border-color: var(--d-aksent); }
.m-au__steg--feil .m-au__st { color: var(--d-aksent); font-weight:700; }
.m-au__steg--venter { opacity:.5; }
.m-au__feil { font-size: calc(11.5px * var(--d-skala)); color:var(--d-svak);
  border-left:2px solid var(--d-aksent); padding-left:10px; }

/* Integrasjoner */
.m-in__rad { display:flex; align-items:center; gap:9px; background:var(--d-kort);
  border:1px solid var(--d-kant); border-radius:var(--d-radius); padding:8px 12px;
  font-size: calc(11.5px * var(--d-skala)); }
.m-in__sys { color:var(--d-tekst) !important; font-weight:600; }
.m-in__pil { color: var(--d-aksent) !important; }
.m-in__frek { flex:1; text-align:right; }
.m-in__logg { display:flex; flex-direction:column; gap:3px; background:var(--d-kort);
  border:1px solid var(--d-kant); border-radius:var(--d-radius); padding:10px 12px;
  font-size: calc(10.5px * var(--d-skala)); }
.m-in__logg span { color: var(--d-aksent) !important; margin-right:8px; }
.m-in__sum { font-size: calc(11px * var(--d-skala)); text-align:center; }

@media (max-width: 640px) {
  .m-webapp { grid-template-columns: 1fr !important; }
  .m-mo__grid { grid-template-columns: 1fr; }
  .m-bu__betal { flex-direction: column; }
  .m-ki__sum { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .m-ag__snurr, .m-ki__linje, .m-ki__flate, .m-ki__prikk, .m-ki__fyll { animation: none !important; }
  .m-ki__linje { stroke-dashoffset: 0; }
  .m-ki__flate, .m-ki__prikk { opacity: 1; }
  .m-ki__fyll { width: var(--m); }
}

/* Produktbilde i nettbutikk-demoen */
img.m-bu__bilde {
  width: 52px; height: 52px; flex: 0 0 52px;
  border-radius: calc(var(--d-radius) / 1.4);
  object-fit: cover; background: var(--d-pille);
  border: 1px solid var(--d-kant);
  transition: border-radius 420ms var(--ease-in-out), border-color 420ms var(--ease-in-out);
}

/* Demo-knappene er nå ekte knapper */
.m-knapp { cursor: pointer; }
.m-knapp:hover { filter: brightness(1.06); }
.m-knapp:focus-visible { outline: 2px solid var(--d-aksent); outline-offset: 2px; }
.sl-modal__panel--smal { width: min(92vw, 480px); }

/* Klikkbare flater som ikke er vanlige knapper */
.m-knapp-flate { cursor: pointer; }
.m-ag__skriv {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--d-kort); border: 1px solid var(--d-kant);
  border-radius: var(--d-radius); padding: 10px 14px;
  font-family: var(--d-font); font-size: calc(12.5px * var(--d-skala));
  color: var(--d-svak); transition: border-color 200ms var(--ease-in-out);
}
.m-ag__skriv:hover { border-color: var(--d-aksent); }
.m-ag__send {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 22px;
  background: var(--d-aksent); color: var(--d-aksent-tekst) !important;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}
.m-bryter.m-knapp-flate:hover { filter: brightness(1.15); }
.m-modul .m-knapp, .m-kiimpl .m-knapp { align-self: flex-start; }

/* ---------- Bla mellom designforslag ---------- */
.sl-td__topp { justify-content: flex-start; }
.sl-td__bla {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
}
.sl-td__vnavnvar {
  font-family: var(--d-font); font-size: 11px; font-weight: var(--d-vekt);
  letter-spacing: var(--d-sperr); color: var(--d-tekst);
  padding: 3px 9px; border-radius: 999px; background: var(--d-pille);
  white-space: nowrap; transition: all 420ms var(--ease-in-out);
}
.sl-td__pil {
  width: 22px; height: 22px; flex: 0 0 22px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1; padding-bottom: 2px;
  background: transparent; color: var(--d-svak);
  border: 1px solid var(--d-kant); border-radius: 6px;
  transition: all 200ms var(--ease-in-out);
}
.sl-td__pil:hover { color: var(--d-tekst); border-color: var(--d-aksent); }
.sl-td__pil:focus-visible { outline: 2px solid var(--d-aksent); outline-offset: 2px; }
.sl-td__teller {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--d-svak);
  min-width: 46px; text-align: center; transition: color 420ms var(--ease-in-out);
}
@media (max-width: 520px) {
  .sl-td__topp { flex-wrap: wrap; row-gap: 8px; }
  .sl-td__bla { margin-left: 0; width: 100%; justify-content: space-between; }
}

/* =============================================================
   Integrasjoner og systemflyt
   ============================================================= */
.sl-flyt__kart {
  position: relative;
  display: grid; grid-template-columns: 0.9fr 1.5fr 0.9fr;
  gap: 0; align-items: stretch; margin-bottom: 44px;
}
/* Kurvede forbindelser mellom hver boks og kjernen */
.sl-flyt__lenker {
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none; overflow: visible;
}
.sl-flyt__bane {
  fill: none; stroke: rgba(74,90,98,0.32); stroke-width: 1.5;
  transition: stroke 220ms var(--ease-out), stroke-width 220ms var(--ease-out);
}
.sl-flyt__pil { fill: rgba(74,90,98,0.45); }
.sl-flyt__bane--aktiv { stroke: var(--oslo); stroke-width: 2.2; }
.sl-flyt__prikk { fill: var(--oslo); }
.sl-flyt__prikk--retur { fill: none; stroke: var(--oslo); stroke-width: 1.4; opacity: 0.7; }
.sl-flyt__kol { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.sl-flyt__koltopp { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.sl-flyt__merke {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--mist);
}
.sl-flyt__kolhjelp { font-size: 12.5px; color: var(--fog); line-height: 1.3; }
.sl-flyt__node {
  position: relative; z-index: 2;
  background: var(--flate); border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); padding: 10px 13px;
  font-size: 13px; color: var(--fog);
  opacity: 0; transform: translateY(6px);
  transition: opacity 460ms var(--ease-out), transform 460ms var(--ease-out);
  transition-delay: calc(var(--i) * 90ms);
}
.sl-flyt__kart--inn .sl-flyt__node { opacity: 1; transform: none; }
.sl-flyt__node--aktiv {
  border-color: var(--oslo); color: var(--sort);
  box-shadow: 0 0 0 3px rgba(74,90,98,0.07);
}

/* Knutepunktet der alt møtes */
.sl-flyt__midt {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
}
.sl-flyt__nav {
  position: relative; width: 244px; aspect-ratio: 202.0 / 87.0;
  display: flex; align-items: center; justify-content: center;
}
/* Skya svever. Bevisst INGEN rotasjon — en sky som vipper fra side til side
   ser ut som den blir dyttet over av trafikken som kommer inn. Igjen står to
   loddrette bevegelser med ulik periode (9 s svev, 6 s pust) som aldri går
   i takt, så det føles levende uten å bli skjevt. */
.sl-flyt__sky {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  transform-origin: 50% 58%;
  animation: sl-skysvev 9s ease-in-out infinite;
  will-change: transform;
}
.sl-flyt__skydrift {
  transform-box: fill-box; transform-origin: 50% 58%;
  animation: sl-skypust 6s ease-in-out infinite;
  will-change: transform;
}
@keyframes sl-skysvev {
  0%, 100% { transform: translateY(-3.5px); }
  50%      { transform: translateY(4px); }
}
@keyframes sl-skypust {
  0%, 100% { transform: translateY(-1.5px) scale(1); }
  50%      { transform: translateY(1.5px) scale(1.03); }
}
.sl-flyt__sky path {
  fill: var(--flate); stroke: var(--oslo); stroke-width: 1.5;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 10px rgba(10,10,10,0.05));
}
.sl-flyt__navinnhold {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 10px;
}
.sl-flyt__navtekst {
  font-size: 14px; font-weight: 600; letter-spacing: -0.015em;
  color: var(--sort); white-space: nowrap;
}
.sl-flyt__navprikk {
  position: relative; flex: 0 0 9px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--oslo);
}
.sl-flyt__navprikk::before, .sl-flyt__navprikk::after {
  content: ""; position: absolute; inset: -4px;
  border-radius: 50%; border: 1px solid var(--oslo);
  opacity: 0; animation: sl-navring 3.2s ease-out infinite;
}
.sl-flyt__navprikk::after { animation-delay: 1.6s; }
@keyframes sl-navring {
  0%   { transform: scale(0.5); opacity: 0.6; }
  70%  { opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Det kortet sa, sagt uten kort */
.sl-flyt__limet { margin: 0 0 34px; }
.sl-flyt__limet strong {
  display: block; font-size: 17px; font-weight: 600;
  letter-spacing: -0.02em; color: var(--sort); margin-bottom: 13px;
}
.sl-flyt__limet ul {
  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 22px;
}
.sl-flyt__limet li {
  position: relative; padding-left: 15px;
  font-size: 13.5px; line-height: 1.5; color: var(--fog);
}
.sl-flyt__limet li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--kobber);
}

/* =============================================================
   Neste steg — automasjon
   ============================================================= */
.sl-auto {
  margin: 0 0 40px; padding: 30px 0 0;
  border-top: 1px solid var(--border-light);
}
.sl-auto__topp { max-width: 64ch; margin-bottom: 26px; }
.sl-auto__tittel {
  font-size: 27px; font-weight: 600; letter-spacing: -0.03em;
  line-height: 1.18; color: var(--sort); margin: 14px 0 10px;
}
.sl-auto__intro { font-size: 15px; line-height: 1.65; color: var(--fog); }

.sl-auto__rutenett {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 34px;
  align-items: start;
}
.sl-auto__venstre, .sl-auto__hoyre { display: flex; flex-direction: column; gap: 12px; }

.sl-auto__utlosere { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.sl-auto__utloser {
  position: relative; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-left: 2px solid var(--border-light);
  padding: 11px 0 11px 15px; font: inherit;
  font-size: 14.5px; line-height: 1.45; color: var(--mist);
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.sl-auto__utloser:hover { color: var(--fog); border-left-color: var(--linbla); }
.sl-auto__utloser--aktiv { color: var(--sort); border-left-color: var(--oslo); }
.sl-auto__utloser--aktiv .sl-auto__utlosertekst { font-weight: 600; }
.sl-auto__tid {
  position: absolute; left: -2px; top: 0; width: 2px;
  background: var(--kobber); animation: sl-auto-tid 6.5s linear forwards;
}
@keyframes sl-auto-tid { from { height: 0; } to { height: 100%; } }

.sl-auto__handlinger {
  list-style: none; display: flex; flex-direction: column; gap: 2px;
  border-left: 1px solid var(--border-light); padding-left: 22px; margin-left: 5px;
}
.sl-auto__handling {
  position: relative; padding: 9px 0;
  font-size: 15px; line-height: 1.5; color: var(--fog);
  opacity: 0; transform: translateY(7px);
  animation: sl-auto-inn 460ms var(--ease-out) forwards;
  animation-delay: calc(var(--i) * 130ms);
}
.sl-auto__handling::before {
  content: ""; position: absolute; left: -27px; top: 17px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--antikkhvit); border: 2px solid var(--oslo);
}
@keyframes sl-auto-inn { to { opacity: 1; transform: none; } }

.sl-auto__fot {
  margin-top: 26px; font-size: 13.5px; line-height: 1.6; color: var(--mist);
  max-width: 74ch;
}

@media (max-width: 900px) {
  .sl-auto__rutenett { grid-template-columns: 1fr; gap: 26px; }
  .sl-auto__tittel { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-auto__handling { opacity: 1 !important; transform: none !important; animation: none !important; }
  .sl-auto__tid { display: none !important; }
}

.sl-flyt__grupper {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.sl-flyt__gruppe {
  background: var(--flate); border: 1px solid var(--border-light);
  border-radius: var(--radius); padding: 16px 17px 17px;
  transition: border-color 200ms var(--ease-in-out), box-shadow 200ms var(--ease-in-out);
}
.sl-flyt__gruppe:hover { border-color: var(--linbla); box-shadow: var(--skygge); }
.sl-flyt__gtopp { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.sl-flyt__gikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px;
  background: rgba(74,90,98,0.10); color: var(--oslo);
}
.sl-flyt__gikon svg { width: 17px; height: 17px; }
.sl-flyt__gruppe h3 { font-size: 14px; font-weight: 600; color: var(--sort); letter-spacing: -0.01em; }
.sl-flyt__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sl-flyt__chip {
  font-size: 12.5px; color: var(--fog); background: var(--antikkhvit);
  border: 1px solid var(--border-light); border-radius: 999px; padding: 4px 10px;
  white-space: nowrap;
}
.sl-flyt__fot {
  margin-top: 22px; font-size: 14px; line-height: 1.6; color: var(--fog);
  border-left: 2px solid var(--kobber); padding-left: 13px; max-width: 62ch;
}

@media (max-width: 1024px) {
  .sl-flyt__grupper { grid-template-columns: repeat(2, 1fr); }
  .sl-flyt__kart { grid-template-columns: 0.85fr 1.2fr 0.85fr; }
  .sl-flyt__limet ul { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .sl-flyt__kart { grid-template-columns: 1fr; gap: 14px; }
  .sl-flyt__lenker { display: none; }
  .sl-flyt__midt { height: 104px; }
  .sl-flyt__nav { width: 194px; }
  .sl-flyt__midt::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
    width: 2px; margin-left: -1px; background: var(--border-light);
  }
  .sl-flyt__limet ul { grid-template-columns: 1fr; }
  .sl-flyt__grupper { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-flyt__prikk { display: none !important; }
  .sl-flyt__navprikk::before, .sl-flyt__navprikk::after { animation: none !important; }
  .sl-flyt__sky, .sl-flyt__skydrift { animation: none !important; }
  .sl-flyt__node { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =============================================================
   Meny-knapp i headeren
   ============================================================= */
.sl-nav--desktop { display: none !important; }
.sl-meny-knapp {
  display: inline-flex; align-items: center; gap: 11px; cursor: pointer;
  background: transparent; border: 1px solid var(--linbla);
  border-radius: 999px; padding: 9px 18px 9px 15px;
  transition: border-color 200ms var(--ease-in-out), background 200ms var(--ease-in-out),
              color 200ms var(--ease-in-out);
}
.sl-meny-knapp:hover { border-color: var(--oslo); background: var(--oslo); }
.sl-meny-knapp:hover .sl-meny-knapp__ord { color: var(--antikkhvit); }
.sl-meny-knapp:hover i { background: var(--antikkhvit); }
.sl-meny-knapp:focus-visible { outline: 2px solid var(--oslo); outline-offset: 3px; }
.sl-meny-knapp__strek { display: flex; flex-direction: column; gap: 4px; }
.sl-meny-knapp__strek i {
  display: block; width: 17px; height: 1.5px; border-radius: 2px;
  background: var(--sort); transition: background 200ms var(--ease-in-out), width 200ms var(--ease-out);
}
.sl-meny-knapp__strek i:last-child { width: 11px; }
.sl-meny-knapp:hover .sl-meny-knapp__strek i:last-child { width: 17px; }
.sl-meny-knapp__ord {
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  letter-spacing: -0.005em; color: var(--sort);
  transition: color 200ms var(--ease-in-out);
}

/* =============================================================
   Utglidende panel
   ============================================================= */
.sl-sidemenu__panel {
  width: min(92vw, 440px); padding: 26px 34px 32px;
  display: flex; flex-direction: column;
  background: var(--antikkhvit); border-left: 1px solid var(--border-light);
  box-shadow: -18px 0 60px rgba(10,10,10,0.14);
}
.sl-sidemenu__head { height: 46px; }

.sl-sidemenu__nav { display: flex; flex-direction: column; margin-top: 26px; }
.sl-sidemenu__link {
  position: relative; display: flex; align-items: baseline; gap: 14px;
  padding: 13px 0; text-decoration: none;
  border-bottom: 1px solid var(--border-light);
  opacity: 0; transform: translateX(22px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
  transition-delay: calc(var(--n) * 45ms + 120ms);
}
.sl-sidemenu--open .sl-sidemenu__link { opacity: 1; transform: none; }
.sl-sidemenu__nr {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em;
  color: var(--mist); flex: 0 0 auto; transition: color 200ms var(--ease-in-out);
}
.sl-sidemenu__ord {
  flex: 1; font-family: var(--font-sans); font-size: 27px; font-weight: 500;
  letter-spacing: -0.028em; line-height: 1.1; color: var(--sort);
  transition: color 200ms var(--ease-in-out), transform 260ms var(--ease-out);
}
.sl-sidemenu__pil {
  font-size: 17px; color: var(--linbla); opacity: 0; transform: translateX(-8px);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), color 200ms;
}
.sl-sidemenu__link:hover .sl-sidemenu__ord { color: var(--oslo); transform: translateX(4px); }
.sl-sidemenu__link:hover .sl-sidemenu__nr { color: var(--oslo); }
.sl-sidemenu__link:hover .sl-sidemenu__pil { opacity: 1; transform: none; color: var(--oslo); }
.sl-sidemenu__link:focus-visible { outline: 2px solid var(--oslo); outline-offset: 3px; }

.sl-sidemenu__bunn {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  margin-top: auto; padding-top: 30px;
}
.sl-sidemenu__blokk { display: flex; flex-direction: column; gap: 7px; }
.sl-sidemenu__blokk .sl-slash { margin-bottom: 3px; }
.sl-sidemenu__blokk a {
  font-size: 13.5px; color: var(--fog); text-decoration: none;
  transition: color 160ms var(--ease-in-out);
}
.sl-sidemenu__blokk a:hover { color: var(--sort); }

.sl-sidemenu__fot {
  display: flex; flex-direction: column; gap: 3px;
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border-light);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--mist);
}

@media (max-width: 640px) {
  .sl-sidemenu__panel { width: 100vw; border-left: none; padding: 22px 24px 26px; }
  .sl-sidemenu__ord { font-size: 23px; }
  .sl-sidemenu__bunn { grid-template-columns: 1fr; gap: 18px; }
  .sl-meny-knapp { padding: 8px 15px 8px 13px; }
  .sl-meny-knapp__ord { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-sidemenu__link { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =============================================================
   Teknisk design — mobiloppsett (trekkspill)
   Under 640px ligger forhåndsvisningen inne i raden du trykker på,
   i stedet for over hele menyen. Ingen scrolling, ingen hopp.
   ============================================================= */
@media (max-width: 640px) {
  .sl-td__meny--trekkspill {
    display: flex; flex-direction: column; gap: 8px;
  }
  .sl-td__rad { display: flex; flex-direction: column; }

  /* Plass til kroken til høyre */
  .sl-td__meny--trekkspill .sl-td__valg { padding-right: 42px; }

  .sl-td__krok {
    position: absolute; right: 15px; top: 50%;
    transform: translateY(-50%) rotate(90deg);
    font-size: 19px; line-height: 1; color: var(--mist);
    transition: transform 220ms var(--ease-in-out), color 220ms var(--ease-in-out);
  }
  .sl-td__valg--apen .sl-td__krok {
    transform: translateY(-50%) rotate(-90deg); color: var(--oslo);
  }

  /* Åpen rad henger sammen med panelet under */
  .sl-td__valg--apen {
    border-radius: var(--radius) var(--radius) 0 0;
    border-bottom-color: transparent;
    box-shadow: none;
  }
  .sl-td__valg--apen::before { bottom: 0; border-radius: 0 3px 0 0; }

  .sl-td__panel {
    border: 1px solid var(--oslo); border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    background: #fff; padding: 12px 12px 14px;
    box-shadow: 0 1px 2px rgba(10,10,10,0.04), 0 10px 26px rgba(10,10,10,0.07);
    animation: sl-td-fold 260ms var(--ease-out) both;
  }
  .sl-td__panel .sl-td__demo { gap: 10px; }
  .sl-td__panel .sl-td__vindu { box-shadow: none; }

  /* Toppraden i demoen blir trang på mobil — la varianttelleren få egen linje */
  .sl-td__panel .sl-td__topp { flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px; }
  .sl-td__panel .sl-td__bla { margin-left: auto; }
}

@keyframes sl-td-fold {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-td__panel { animation: none; }
  .sl-td__krok { transition: none; }
}