/* ═══════════════════════════════════════════════════════════════
   CONNECTIFY NORDIC — v3.css  (PILOT: KUN forsiden / index.html)
   «Den mørke scenen» — dyp navy base, cyan-glød, lyse app-skjermer
   som lyskilder. Alt scoped under .cn-v3 så ingenting lekker til de
   9 andre sidene. style.css er IKKE rørt; her gjenbrukes header/
   footer/cookie-markup, men re-styles i v3-uttrykket.
   Fonter: Space Grotesk (display) og Inter (body) settes her i v3.css.
   Logoen (.logo-text) arver Orbitron fra style.css — v3 overstyrer kun
   farge, ikke font-family — så Orbitron lastes og brukes på forsiden.
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════
   V3 TOKENS  (lokale; overstyrer ikke globale :root)
═══════════════════════════════════════ */
.cn-v3 {
  /* Mørk premium-scene, men mindre «sort» enn før (var #05080f-sjiktet).
     Lysere navy-base gir roligere, mer plain bakgrunn; surface-tonene er
     hevet i takt så kort beholder tydelig flate-mot-bakgrunn-separasjon. */
  --v3-bg: #0b1220;
  --v3-bg-2: #0c1424;
  --v3-ink: #111a2e;
  --v3-surface: #16213a;
  --v3-surface-2: #1a2740;
  --v3-surface-3: #1f2e4a;

  /* Aksent — brand-cyan med glød + liten elektrisk sekundær (sparsomt).
     NB: enkelte data-URI-SVG-er hardkoder #00E3E3 i strengen (f.eks. ruting-
     diagrammets forgreningslinje ~v3.css:3835 + chevron-masker) — disse må synkes
     MANUELT hvis --v3-cyan endres (CSS-variabler virker ikke inni data-URI). */
  --v3-cyan: #00E3E3;
  --v3-cyan-2: #36b6ff;             /* lys himmelblå, kun som gradient-endepunkt */
  --v3-cyan-soft: rgba(0, 227, 227, 0.14);
  --v3-cyan-line: rgba(0, 227, 227, 0.30);
  --v3-electric: #5b8cff;           /* kald elektrisk blå, kun i smådoser */
  --v3-grad-primary: linear-gradient(120deg, var(--v3-cyan), var(--v3-cyan-2));

  /* Semantisk grønn — «under grensen → regnskap» (motpart til cyan «over → lønn»
     i ruting-diagrammet + .v3-route-pill.under). CN-systemets første grønn-token. */
  --v3-green: #43d39a;
  --v3-green-line: rgba(67, 211, 154, 0.32);
  --v3-green-soft: rgba(67, 211, 154, 0.10);

  /* Varsel/amber — godkjent amber-bruk: forbehold-/disclaimer-modalens
     varsel-badge (.cn-legal-modal-mark) + kalender-mockupens fravær-markører
     (.v3-cal-chip--em / .is-absent). (Gml. UTKAST-banner + [FYLL INN] er fjernet.) */
  --v3-warn: #f5b840;                       /* solid amber (ikon/varsel) */
  --v3-warn-strong: #ffd27a;                /* lys amber, emfase-tekst */
  --v3-warn-text: #f6e2b8;                  /* amber brødtekst, AA mot banner */
  --v3-warn-soft: rgba(245, 184, 64, 0.09); /* svak amber-tint bakgrunn */
  --v3-warn-line: rgba(245, 184, 64, 0.4);  /* amber kantlinje */

  /* Feil/danger — kun skjema-validering (:user-invalid) + innsendingsfeil.
     CN-systemets danger-familie (speiler cyan/green/warn-mønsteret). -line-strong
     bevarer den eksisterende 0.6-kanten på :user-invalid uten visuell endring. */
  --v3-danger: #ef6360;
  --v3-danger-line: rgba(239, 99, 96, 0.5);
  --v3-danger-line-strong: rgba(239, 99, 96, 0.6);
  --v3-danger-soft: rgba(239, 99, 96, 0.12);
  --v3-danger-ring: rgba(239, 99, 96, 0.14);

  /* Tekst — faint/muted re-målt mot ny, lysere bakgrunn (alle ≥ AA 4.5:1).
     faint #8294bb: 6.05:1 mot bg-2, 5.26:1 mot surface (lyseste flate).
     muted #97a7c5: 6.59:1 mot surface. */
  --v3-text: #c9d6ec;
  --v3-text-strong: #f3f7ff;
  --v3-text-muted: #97a7c5;
  --v3-text-faint: #8294bb;
  --v3-on-accent: #04101c;

  /* Linjer & glass */
  --v3-line: rgba(150, 180, 230, 0.10);
  --v3-line-strong: rgba(150, 180, 230, 0.18);
  --v3-glass: rgba(8, 13, 24, 0.66);
  --v3-glass-deep: rgba(4, 9, 18, 0.74); /* dyp glass-tint: pill-labels + cap-gradient */

  /* Glød/skygge */
  --v3-glow-cyan: 0 0 0 1px var(--v3-cyan-line), 0 18px 60px -18px rgba(0, 227, 227, 0.30);
  --v3-glow-focus: 0 0 0 1px var(--v3-cyan-line), 0 0 20px -6px rgba(0, 227, 227, 0.5); /* per-steg fokus-løft i ruting-diagram */
  --v3-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.85);
  --v3-shadow-soft: 0 24px 60px -30px rgba(0, 0, 0, 0.7);

  /* Radius */
  --v3-r-xs: 7px;   /* C5/DF-2: minste trinn (turnus-celler, calc-check) */
  --v3-r-sm: 12px;
  --v3-r-md: 18px;
  --v3-r-lg: 28px;
  --v3-r-pill: 999px;

  /* B5/SPC-1 — 8px-basert spacing-skala (0.5rem-trinn). Additiv: definerer
     bare en felles rytme-vokabular for seksjons-/gap-/padding-verdier.
     1=0.5rem … 14=7rem. Brukes der vertikal/horisontal rytme normaliseres. */
  --v3-sp-1: 0.5rem;
  --v3-sp-2: 1rem;
  --v3-sp-3: 1.5rem;
  --v3-sp-4: 2rem;
  --v3-sp-5: 2.5rem;
  --v3-sp-6: 3rem;
  --v3-sp-7: 3.5rem;
  --v3-sp-8: 4rem;
  --v3-sp-9: 4.5rem;
  --v3-sp-10: 5rem;
  --v3-sp-11: 5.5rem;
  --v3-sp-12: 6rem;
  --v3-sp-13: 6.5rem;
  --v3-sp-14: 7rem;

  /* Motion */
  --v3-ease: cubic-bezier(0.16, 1, 0.3, 1);     /* expo.out */
  --v3-ease-soft: cubic-bezier(0.32, 0.72, 0, 1);

  background: var(--v3-bg);
  color: var(--v3-text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* B3 — Inter OpenType-finish: rolige stilsett som hever brødteksten til
     SaaS-nivå. ss01 = spec'ens trygge gulv (gjelder uansett hvilken Inter-
     subset Google serverer); cv05/cv08/ss03 forfiner l/I/sifre der de er
     tilgjengelige (no-op ellers — ingen visuell regresjon). Endrer ikke
     brand-identitet (ikke single-storey a / cv11). */
  font-feature-settings: "ss01" 1, "cv05" 1, "cv08" 1, "ss03" 1;
}

/* Scene-bakteppe: rolig, plain bakgrunn. Kun en meget subtil vertikal
   gradient (lysest nær toppen) for litt dybde — ingen synlige former,
   ingen blobs, ingen blur-klipping. */
.cn-v3 {
  position: relative;
  isolation: isolate;
}
.cn-v3-atmos {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(180deg, var(--v3-bg-2) 0%, var(--v3-bg) 38%, var(--v3-bg) 100%);
}

/* ═══════════════════════════════════════
   BASE / TYPOGRAFI
═══════════════════════════════════════ */
.cn-v3 .v3-container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.cn-v3 .v3-wide { max-width: 1320px; }

.cn-v3 h1, .cn-v3 h2, .cn-v3 h3 {
  font-family: "Space Grotesk", "Inter", sans-serif;
  color: var(--v3-text-strong);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 700;
  /* B1 — jevnere ragging på overskrifter (unngår orphans/skjeve linjer) */
  text-wrap: balance;
}
/* B2 — strammere lesemål + B1 pretty-wrap (færre orphans i brødprosa) */
.cn-v3 p { max-width: 58ch; text-wrap: pretty; }

.cn-v3 .v3-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: "Inter", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--v3-cyan);
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--v3-cyan-line);
  border-radius: var(--v3-r-pill);
  background: var(--v3-cyan-soft);
}
.cn-v3 .v3-eyebrow .v3-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--v3-cyan);
  box-shadow: 0 0 10px 1px var(--v3-cyan);
}

.cn-v3 .v3-section-head {
  max-width: 720px;
  margin: 0 auto clamp(2.4rem, 4vw, 3.5rem);
  text-align: center;
}
.cn-v3 .v3-section-head .v3-eyebrow { margin-bottom: 1.1rem; }
.cn-v3 .v3-section-head h2 {
  font-size: clamp(2rem, 4vw, 3.1rem);
  margin-bottom: 1rem;
}
.cn-v3 .v3-section-head p {
  color: var(--v3-text-muted);
  font-size: 1.075rem;
  margin: 0 auto;
  max-width: 56ch;
  text-wrap: pretty;
}

/* ═══════════════════════════════════════
   HEADER / NAV  (gjenbruker markup, re-stylet i v3)
═══════════════════════════════════════ */
.cn-v3 .site-header { background: transparent; border-bottom-color: transparent; }
/* Glass på ::before (z-index:-1) — se style.css HEADER-blokk: hindrer at
   backdrop-filter gjør headeren til containing block for mobil-panelet. */
.cn-v3 .site-header::before { background: transparent; border-bottom-color: transparent; }
.cn-v3 .site-header.scrolled::before {
  background: var(--v3-glass);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--v3-line);
}
/* Uten backdrop-filter (eldre Safari): solid mørk header så innholdet bak
   ikke lekker gjennom og blir uleselig. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cn-v3 .site-header.scrolled::before { background: var(--v3-bg-2); }
}
.cn-v3 .logo-text { color: var(--v3-text-strong); }
.cn-v3 .logo-text-accent { color: var(--v3-cyan); }
.cn-v3 .nav-link { color: var(--v3-text-muted); }
.cn-v3 .nav-link:hover { color: var(--v3-text-strong); background: rgba(150, 180, 230, 0.06); }
.cn-v3 .nav-link.active,
.cn-v3 .nav-link[aria-current="page"] { color: var(--v3-text-strong); }
.cn-v3 .nav-link.active::after,
.cn-v3 .nav-link[aria-current="page"]::after {
  background: linear-gradient(90deg, var(--v3-cyan), var(--v3-electric));
}
.cn-v3 .nav-link-app { color: var(--v3-cyan); }
.cn-v3 .nav-toggle { border-color: var(--v3-line-strong); }
.cn-v3 .nav-toggle-bar { background: var(--v3-text-strong); }

/* Knapper i v3-uttrykk (magnetiske via JS-wrapper) */
.cn-v3 .v3-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.96rem;
  line-height: 1;
  padding: 0.85rem 1.5rem;
  border-radius: var(--v3-r-pill);
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 200ms var(--v3-ease),
              box-shadow 280ms var(--v3-ease),
              background 280ms var(--v3-ease),
              border-color 280ms var(--v3-ease),
              color 280ms var(--v3-ease);
}
.cn-v3 .v3-btn-lg { padding: 1rem 1.9rem; font-size: 1.02rem; }
.cn-v3 .v3-btn:active { transform: scale(0.97); }
.cn-v3 .v3-btn:focus-visible { outline: 2px solid var(--v3-cyan); outline-offset: 3px; }

/* Delt fokus-synlighet for lenker + hamburger (knapper har egen regel over).
   v3-cyan = brand-aksent; samme uttrykk som knappenes ring, ingen kollisjon. */
.cn-v3 a:focus-visible,
.cn-v3 .nav-toggle:focus-visible {
  outline: 2px solid var(--v3-cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

.cn-v3 .v3-btn-primary {
  background: var(--v3-grad-primary);
  color: var(--v3-on-accent);
  box-shadow: 0 14px 40px -14px rgba(0, 227, 227, 0.6);
}
.cn-v3 .v3-btn-primary:hover {
  box-shadow: 0 20px 56px -14px rgba(0, 227, 227, 0.75);
  transform: translateY(-2px);
}
.cn-v3 .v3-btn-primary:active { transform: translateY(-2px) scale(0.97); }

.cn-v3 .v3-btn-ghost {
  background: rgba(150, 180, 230, 0.05);
  color: var(--v3-text-strong);
  border-color: var(--v3-line-strong);
  backdrop-filter: blur(4px);
}
.cn-v3 .v3-btn-ghost:hover {
  background: rgba(150, 180, 230, 0.10);
  border-color: var(--v3-cyan-line);
  transform: translateY(-2px);
}

/* ── C1: magnetisk CTA — CSS eier transform, JS setter kun --mag-x/--mag-y ──
   JS (initMagnetic) skriver pekeroffset til --mag-x/--mag-y og toggler
   .is-magnet-active. CSS-en under bygger transform-en av dem PLUSS de bevisst
   designede hover-løftet (-2px) og active-trykket (scale .97), så magnet-draget
   ikke lenger spiser knappens states. .is-magnet-active = crisp 60ms-følging
   under drag; uten den gir .v3-btn sin 200ms expo-transition myk retur-fjæring.
   PLASSERING: rett ETTER .v3-btn-primary/.v3-btn-ghost sine :hover/:active
   (samme spesifisitet → denne vinner på source-order) så hover-løftet OG
   active-trykket faktisk kombineres med magnet-draget. Ingen !important.
   Reduced-motion: JS setter aldri --mag-* (fallback 0) → ingen forskyvning. */
.cn-v3 [data-magnetic] {
  transform: translate(var(--mag-x, 0), var(--mag-y, 0));
}
.cn-v3 [data-magnetic].is-magnet-active {
  transition: transform 60ms linear;
}
.cn-v3 [data-magnetic]:hover {
  transform: translate(var(--mag-x, 0), calc(var(--mag-y, 0) - 2px));
}
.cn-v3 [data-magnetic]:active {
  transform: translate(var(--mag-x, 0), var(--mag-y, 0)) scale(0.97);
}

/* Knapp-i-knapp pil-affordans */
.cn-v3 .v3-btn-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(4, 16, 28, 0.22);
  transition: transform 220ms var(--v3-ease);
}
.cn-v3 .v3-btn-ghost .v3-btn-ico { background: rgba(150, 180, 230, 0.12); }
.cn-v3 .v3-btn:hover .v3-btn-ico { transform: translate(2px, -1px); }
.cn-v3 .v3-btn-ico svg { width: 13px; height: 13px; }

.cn-v3 .v3-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  gap: 0.45rem;
  color: var(--v3-cyan);
  font-weight: 600;
  font-size: 0.96rem;
  transition: gap 200ms var(--v3-ease), color 200ms var(--v3-ease);
}
.cn-v3 .v3-link svg { width: 15px; height: 15px; }
.cn-v3 .v3-link:hover { gap: 0.7rem; color: var(--v3-text-strong); }

/* ═══════════════════════════════════════
   1 — HERO (mørk scene)
═══════════════════════════════════════ */
.cn-v3 .v3-hero {
  position: relative;
  padding: 11rem 0 5rem;
  overflow: hidden;
}
.cn-v3 .v3-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: var(--v3-sp-6);
  align-items: center;
}
.cn-v3 .v3-hero-copy { max-width: 600px; }
.cn-v3 .v3-hero-copy .v3-eyebrow { margin-bottom: 1.6rem; }
.cn-v3 .v3-hero-title {
  font-size: clamp(3rem, 7vw, 5.6rem);
  letter-spacing: -0.05em;
  line-height: 0.98;
  margin-bottom: 1.5rem;
  text-wrap: balance;
}
.cn-v3 .v3-hero-title .v3-accent {
  color: var(--v3-cyan);
  text-shadow: 0 0 40px rgba(0, 227, 227, 0.35);
}
.cn-v3 .v3-hero-sub {
  font-size: 1.15rem;
  color: var(--v3-text-muted);
  margin-bottom: 2.2rem;
  max-width: 50ch;
  line-height: 1.6;
  text-wrap: pretty;
}
.cn-v3 .v3-hero-cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 2rem; }
.cn-v3 .v3-hero-trust {
  display: flex; flex-wrap: wrap;
  gap: 1.3rem;
  font-size: 0.86rem;
  color: var(--v3-text-faint);
}
.cn-v3 .v3-hero-trust li { display: inline-flex; align-items: center; gap: 0.45rem; }
.cn-v3 .v3-hero-trust svg { width: 15px; height: 15px; color: var(--v3-cyan); }

/* Hero-scene: web-skjermbilde og mobilapp STATISK side om side.
   Web-vinduet er det KLART DOMINERENDE bildet (kolonne 1, ~72 % av bredden),
   telefonen er en klart mindre følgesvenn ved siden (kolonne 2, ~24 %) —
   ingen overlapp, ingen 3D-tilt, ingen svev. Telefonen er bunnjustert mot
   web-vinduet med en liten nedforskyvning slik at høydene harmonerer og
   web-vinduet ikke ser «kort» ut. Rolig cyan-glød + skygge gir dybde. */
.cn-v3 .v3-hero-scene {
  position: relative;
  display: grid;
  /* HERO-4: telefon-kolonnen hevet (108→172px min) for den større telefonen;
     web-vinduet beholder dominans via 1fr. */
  grid-template-columns: minmax(0, 1fr) minmax(172px, 0.34fr);
  align-items: end;
  gap: 1.6rem;
}

.cn-v3 .v3-frame {
  position: relative;
  border-radius: var(--v3-r-lg);
  background: var(--v3-ink);
  border: 1px solid var(--v3-line-strong);
  box-shadow: var(--v3-shadow), 0 0 0 1px rgba(0, 227, 227, 0.06);
  overflow: hidden;
}
.cn-v3 .v3-frame-web {
  width: 100%;
  max-width: none;
}
/* .v3-frame-dot / .v3-frame-url beholdes — fortsatt brukt av .v3-mock-bar
   (CSS-mockups på kontakt/priser). Den falske nettleser-baren (.v3-frame-bar)
   er fjernet fra web-skjermbildene så bildet fyller hele rammen. */
.cn-v3 .v3-frame-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--v3-surface-3); }
.cn-v3 .v3-frame-dot:nth-child(1) { background: #ef6360; }
.cn-v3 .v3-frame-dot:nth-child(2) { background: #f1b13a; }
.cn-v3 .v3-frame-dot:nth-child(3) { background: #43d39a; }
.cn-v3 .v3-frame-url {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--v3-text-faint);
  font-family: "Inter", sans-serif;
  letter-spacing: 0.01em;
}
.cn-v3 .v3-frame-web img { width: 100%; height: auto; display: block; }

/* Telefon ved siden av web-vinduet, statisk og klart mindre. Bunnjustert
   mot web-vinduet med liten nedforskyvning for rytme. Max-bredde holder
   den slank så høyden harmonerer med det dominerende web-vinduet (ingen
   tårnende telefon). Tynnere bezel + mindre radius i den nye skalaen. */
.cn-v3 .v3-frame-phone {
  position: relative;
  width: 100%;
  /* HERO-4: større, mer dominant telefon (148→172px). Grid-kolonnene under
     er hevet tilsvarende så den ikke kolliderer med web-rammen på 768–1100px. */
  max-width: 172px;
  justify-self: center;
  align-self: end;
  margin-bottom: -1.4rem;
  border-radius: 22px;       /* fysisk korrekt bezel-radius (beholdes) */
  border: 4px solid var(--v3-ink);
  box-shadow: var(--v3-shadow), 0 0 44px -16px rgba(0, 227, 227, 0.22);
}
.cn-v3 .v3-frame-phone img { width: 100%; height: auto; border-radius: 18px; display: block; }

/* Solo-scene (KUN forsiden): web-vinduet står alene og fyller hele scene-
   kolonnen, uten telefon ved siden. Brukes på hero-scenen på index. De delte
   .v3-frame-phone-reglene over er urørt så undersidene
   (tjenester/om-oss) beholder web + telefon. */
.cn-v3 .v3-hero-scene.solo {
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 0;
}
.cn-v3 .v3-hero-scene.solo .v3-frame-web {
  width: 100%;
  order: 0;
}

/* ═══════════════════════════════════════
   GRADIENT-BRO (myk overgang mellom seksjoner)
═══════════════════════════════════════ */
.cn-v3 .v3-bridge {
  height: 120px;
  margin-top: -60px;
  margin-bottom: -60px;
  pointer-events: none;
  position: relative;
  z-index: 0;
}
.cn-v3 .v3-bridge::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 100% at 50% 50%, rgba(0, 227, 227, 0.08), transparent 70%);
}

/* ═══════════════════════════════════════
   2 — SIGNATURSCENE: «Turnusen bygger seg selv»
═══════════════════════════════════════ */
.cn-v3 .v3-build {
  position: relative;
  padding: var(--v3-sp-12) 0;
}
.cn-v3 .v3-build-inner {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: var(--v3-sp-6);
  align-items: center;
}
.cn-v3 .v3-build-copy h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 1.1rem;
}
.cn-v3 .v3-build-copy .v3-eyebrow { margin-bottom: 1.3rem; }
.cn-v3 .v3-build-lead {
  color: var(--v3-text-muted);
  font-size: 1.075rem;
  margin-bottom: 1.8rem;
  line-height: 1.6;
  text-wrap: pretty;
}
.cn-v3 .v3-build-principle {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--v3-text-strong);
  letter-spacing: -0.02em;
}
.cn-v3 .v3-build-principle b { color: var(--v3-cyan); font-weight: 700; }
.cn-v3 .v3-build-principle::before {
  content: "";
  width: 28px; height: 1px;
  background: linear-gradient(90deg, var(--v3-cyan), transparent);
}

/* Turnusgrid som fylles vakt for vakt */
.cn-v3 .v3-grid-card {
  position: relative;
  border-radius: var(--v3-r-lg);
  background:
    linear-gradient(180deg, var(--v3-surface) 0%, var(--v3-ink) 100%);
  border: 1px solid var(--v3-line-strong);
  box-shadow: var(--v3-shadow), 0 0 60px -30px rgba(0, 227, 227, 0.2);
  overflow: hidden;
}
.cn-v3 .v3-grid-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 0.7rem 0.95rem;
  background: var(--v3-surface);
  border-bottom: 1px solid var(--v3-line);
}
.cn-v3 .v3-grid-body { padding: 1.1rem 1.1rem 1.3rem; }
.cn-v3 .v3-grid-head {
  display: grid;
  grid-template-columns: 64px repeat(7, 1fr);
  gap: 5px;
  margin-bottom: 6px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--v3-text-faint);
  text-transform: uppercase;
}
.cn-v3 .v3-grid-head span { text-align: center; }
.cn-v3 .v3-grid-head span:first-child { text-align: left; }
.cn-v3 .v3-grid-row {
  display: grid;
  grid-template-columns: 64px repeat(7, 1fr);
  gap: 5px;
  margin-bottom: 5px;
  align-items: center;
}
.cn-v3 .v3-grid-name {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--v3-text);
  white-space: nowrap;
}
.cn-v3 .v3-cell {
  height: 30px;
  border-radius: var(--v3-r-xs);   /* DF-2: minste radius-trinn (turnus-celle) */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: transparent;
  background: rgba(150, 180, 230, 0.04);
  border: 1px solid transparent;
  transition: color 320ms var(--v3-ease), background 320ms var(--v3-ease),
              border-color 320ms var(--v3-ease), transform 320ms var(--v3-ease);
}
.cn-v3 .v3-cell.v3-empty { background: rgba(150, 180, 230, 0.03); }
/* STANDARD = FYLT (no-JS / reduced-motion viser komplett turnus).
   Vakt-celler (.v3-day/.v3-eve/.v3-night) er fylt med mindre kortet bærer
   .v3-grid--anim (satt av v3.js KUN når scrub-animasjon faktisk kjører),
   da starter de tomme og fylles trinnvis via .is-filled. */
.cn-v3 .v3-cell.v3-day,
.cn-v3 .v3-cell.v3-eve,
.cn-v3 .v3-cell.v3-night { color: var(--v3-text-strong); }
.cn-v3 .v3-cell.v3-day    { background: rgba(0, 227, 227, 0.16);  border-color: rgba(0, 227, 227, 0.34); }
.cn-v3 .v3-cell.v3-eve    { background: rgba(91, 140, 255, 0.18); border-color: rgba(91, 140, 255, 0.36); }
.cn-v3 .v3-cell.v3-night  { background: rgba(138, 107, 255, 0.18); border-color: rgba(138, 107, 255, 0.36); }

/* Animert modus: nullstill vakt-celler til tomme, fyll via .is-filled */
.cn-v3 .v3-grid--anim .v3-cell.v3-day,
.cn-v3 .v3-grid--anim .v3-cell.v3-eve,
.cn-v3 .v3-grid--anim .v3-cell.v3-night {
  color: transparent;
  background: rgba(150, 180, 230, 0.04);
  border-color: transparent;
}
.cn-v3 .v3-grid--anim .v3-cell.is-filled { color: var(--v3-text-strong); }
.cn-v3 .v3-grid--anim .v3-cell.v3-day.is-filled    { background: rgba(0, 227, 227, 0.16);  border-color: rgba(0, 227, 227, 0.34); }
.cn-v3 .v3-grid--anim .v3-cell.v3-eve.is-filled    { background: rgba(91, 140, 255, 0.18); border-color: rgba(91, 140, 255, 0.36); }
.cn-v3 .v3-grid--anim .v3-cell.v3-night.is-filled  { background: rgba(138, 107, 255, 0.18); border-color: rgba(138, 107, 255, 0.36); }
.cn-v3 .v3-cell.v3-ot { position: relative; }
.cn-v3 .v3-cell.v3-ot::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--v3-r-xs);   /* DF-2: matcher cellens radius */
  box-shadow: inset 0 0 0 1px rgba(0, 227, 227, 0.55);
  opacity: 1;
  transition: opacity 320ms var(--v3-ease);
}
.cn-v3 .v3-grid--anim .v3-cell.v3-ot::after { opacity: 0; }
.cn-v3 .v3-grid--anim .v3-cell.v3-ot.is-filled::after { opacity: 1; }

.cn-v3 .v3-grid-ai {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.9rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--v3-r-sm);
  background: var(--v3-cyan-soft);
  border: 1px solid var(--v3-cyan-line);
  transition: opacity 400ms var(--v3-ease), transform 400ms var(--v3-ease);
}
/* Skjules kun i animert modus; vises trinnvis via .is-on. No-JS = synlig. */
.cn-v3 .v3-grid--anim .v3-grid-ai { opacity: 0; transform: translateY(10px); }
.cn-v3 .v3-grid--anim .v3-grid-ai.is-on { opacity: 1; transform: none; }
.cn-v3 .v3-grid-ai-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--v3-cyan); color: var(--v3-on-accent);
  flex-shrink: 0;
}
.cn-v3 .v3-grid-ai-ico svg { width: 14px; height: 14px; }
.cn-v3 .v3-grid-ai-text { font-size: 0.82rem; color: var(--v3-text-strong); font-weight: 500; }
.cn-v3 .v3-grid-ai-badge {
  margin-left: auto;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.34rem 0.7rem;
  border-radius: var(--v3-r-pill);
  background: var(--v3-cyan);
  color: var(--v3-on-accent);
}

/* ═══════════════════════════════════════
   3 — TRE PILARER  (asymmetrisk, ikke tre like bokser)
═══════════════════════════════════════ */
.cn-v3 .v3-pillars { padding: var(--v3-sp-12) 0; }
.cn-v3 .v3-pillars-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.4rem;
}
.cn-v3 .v3-pillar {
  position: relative;
  border-radius: var(--v3-r-lg);
  padding: 2rem;
  background: linear-gradient(180deg, var(--v3-surface-2) 0%, var(--v3-ink) 100%);
  border: 1px solid var(--v3-line-strong);
  box-shadow: var(--v3-shadow-soft);
  overflow: hidden;
}
.cn-v3 .v3-pillar::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 227, 227, 0.4), transparent);
  opacity: 0.6;
}
.cn-v3 .v3-pillar-lead { grid-column: span 7; }
.cn-v3 .v3-pillar-b    { grid-column: span 5; }
.cn-v3 .v3-pillar-c    { grid-column: span 12; }

.cn-v3 .v3-pillar-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;          /* DF-2: standardisert ikon-flis */
  border-radius: var(--v3-r-sm);
  margin-bottom: 1.2rem;
  background: var(--v3-cyan-soft);
  border: 1px solid var(--v3-cyan-line);
  color: var(--v3-cyan);
}
.cn-v3 .v3-pillar-ico svg { width: 22px; height: 22px; }
.cn-v3 .v3-pillar h3 {
  font-size: 1.45rem;
  margin-bottom: 0.7rem;
}
.cn-v3 .v3-pillar > p {
  color: var(--v3-text-muted);
  font-size: 1rem;
  margin-bottom: 1.3rem;
  line-height: 1.6;
}
.cn-v3 .v3-pillar-list {
  display: grid;
  gap: 0.6rem;
}
.cn-v3 .v3-pillar-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.93rem;
  color: var(--v3-text);
  line-height: 1.55;
}
.cn-v3 .v3-pillar-list svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--v3-cyan);
}
/* Pilar C (eksterne/frivillige) — full bredde: kort oppsummering + peker til
   #expense (detaljen bor nå i Reise & Utgifter-seksjonen). Tekst-dominant 2-kol. */
.cn-v3 .v3-pillar-c .v3-pillar-c-inner {
  display: grid;
  grid-template-columns: 1.55fr 0.65fr;
  gap: clamp(1.6rem, 3vw, 2.6rem);
  align-items: center;
}
.cn-v3 .v3-pillar-c-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
}
.cn-v3 .v3-pillar-c-cta .v3-link { white-space: nowrap; }
/* Pilar-C høyre-kolonne: rute-piller (visuelt ekko av #expense-diagrammet, aria-hidden) over CTA-lenken. */
.cn-v3 .v3-pillar-c-routes {
  display: grid;
  gap: 0.55rem;
  width: 100%;
  max-width: 15rem;
}

/* MERK: .v3-flow / .v3-flow-route / .v3-route-pill (+ .v3-pillar-c-h3, ~v3.css:1567)
   konsumeres fortsatt av tjenester.html, IKKE slett ved
   framtidig opprydding selv om forsiden ikke lenger bruker .v3-flow-route. */
.cn-v3 .v3-flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
}
.cn-v3 .v3-flow-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: var(--v3-r-sm);
  background: var(--v3-surface);
  border: 1px solid var(--v3-line);
}
.cn-v3 .v3-flow-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--v3-cyan-soft); border: 1px solid var(--v3-cyan-line);
  color: var(--v3-cyan); font-size: 0.78rem; font-weight: 700;
  flex-shrink: 0;
}
.cn-v3 .v3-flow-text { font-size: 0.9rem; color: var(--v3-text); }
.cn-v3 .v3-flow-text b { color: var(--v3-text-strong); font-weight: 700; }
.cn-v3 .v3-flow-route {
  display: flex; gap: 0.7rem; margin-top: 0.3rem;
}
.cn-v3 .v3-route-pill {
  flex: 1;
  text-align: center;
  font-size: 0.8rem;
  padding: 0.6rem 0.5rem;
  border-radius: var(--v3-r-sm);
  border: 1px solid var(--v3-line);
  background: var(--v3-ink);
  color: var(--v3-text-muted);
  line-height: 1.3;
}
.cn-v3 .v3-route-pill b { display: block; color: var(--v3-text-strong); font-size: 0.84rem; margin-bottom: 1px; }
.cn-v3 .v3-route-pill.under { border-color: var(--v3-green-line); }
.cn-v3 .v3-route-pill.under b { color: var(--v3-green); }
.cn-v3 .v3-route-pill.over { border-color: var(--v3-cyan-line); }
.cn-v3 .v3-route-pill.over b { color: var(--v3-cyan); }

/* ═══════════════════════════════════════
   5 — FRA GODKJENNING TIL LØNN + integrasjoner
═══════════════════════════════════════ */
.cn-v3 .v3-flowpay { padding: var(--v3-sp-12) 0; }
.cn-v3 .v3-flowpay-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin: 0 auto 4rem;
  max-width: 1000px;
  counter-reset: fp;
}
.cn-v3 .v3-fp-step {
  position: relative;
  padding: 2rem 1.8rem;
  border-radius: var(--v3-r-lg);
  background: linear-gradient(180deg, var(--v3-surface-2), var(--v3-ink));
  border: 1px solid var(--v3-line-strong);
  box-shadow: var(--v3-shadow-soft);
}
.cn-v3 .v3-fp-step .v3-fp-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--v3-r-sm);   /* DF-2: behold 38px, tokeniser radius */
  margin-bottom: 1rem;
  background: var(--v3-cyan-soft); border: 1px solid var(--v3-cyan-line);
  color: var(--v3-cyan); font-family: "Space Grotesk", sans-serif; font-weight: 700;
}
.cn-v3 .v3-fp-step h3 { font-size: 1.18rem; margin-bottom: 0.5rem; }
.cn-v3 .v3-fp-step p { font-size: 0.94rem; color: var(--v3-text-muted); line-height: 1.55; }
.cn-v3 .v3-fp-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%; right: -1.05rem;
  width: 1.3rem; height: 1px;
  background: linear-gradient(90deg, var(--v3-cyan-line), transparent);
}

/* Integrasjonsstripe — varierte wordmarks med dybde (ikke uniforme dot-piller) */
.cn-v3 .v3-integr {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}
.cn-v3 .v3-integr-label {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--v3-text-faint);
  margin-bottom: 1.4rem;
}
.cn-v3 .v3-integr-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.1rem;
}
.cn-v3 .v3-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.4rem;
  border-radius: var(--v3-r-md);
  background: var(--v3-surface);
  border: 1px solid var(--v3-line-strong);
  box-shadow: var(--v3-shadow-soft);
  /* MOT-4: kjappere transform-del (200ms), farge/skygge beholdt 280ms. */
  transition: transform 200ms var(--v3-ease), border-color 280ms var(--v3-ease), box-shadow 280ms var(--v3-ease);
}
.cn-v3 .v3-brand:hover {
  transform: translateY(-3px);
  border-color: var(--v3-cyan-line);
  box-shadow: var(--v3-shadow-soft), 0 14px 40px -20px rgba(0, 227, 227, 0.4);
  will-change: transform;
}
.cn-v3 .v3-brand.big { padding: 1.2rem 1.8rem; }
.cn-v3 .v3-brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--v3-r-sm);   /* DF-2: behold 40px, tokeniser radius */
  background: var(--v3-ink);
  border: 1px solid var(--v3-line);
  color: var(--v3-cyan);
  flex-shrink: 0;
}
.cn-v3 .v3-brand-mark svg { width: 20px; height: 20px; }
.cn-v3 .v3-brand-name {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--v3-text-strong);
  letter-spacing: -0.01em;
}
.cn-v3 .v3-brand.big .v3-brand-name { font-size: 1.3rem; }
.cn-v3 .v3-brand-tag { display: block; font-family: "Inter", sans-serif; font-size: 0.74rem; font-weight: 400; color: var(--v3-text-faint); letter-spacing: 0; margin-top: 1px; }
.cn-v3 .v3-integr-note { margin-top: 1.4rem; font-size: 0.86rem; color: var(--v3-text-faint); }

/* ═══════════════════════════════════════
   6 — SANNE TALL
═══════════════════════════════════════ */
.cn-v3 .v3-facts { padding: var(--v3-sp-12) 0; }
.cn-v3 .v3-facts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  margin-bottom: 2.2rem;
}
.cn-v3 .v3-fact {
  padding: 2rem 1.8rem;
  border-radius: var(--v3-r-lg);
  background: linear-gradient(180deg, var(--v3-surface-2), var(--v3-ink));
  border: 1px solid var(--v3-line-strong);
  box-shadow: var(--v3-shadow-soft);
}
.cn-v3 .v3-fact-num {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--v3-text-strong);
  line-height: 1;
  margin-bottom: 0.6rem;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
}
.cn-v3 .v3-fact-num .u { color: var(--v3-cyan); }
.cn-v3 .v3-fact-label { font-size: 0.92rem; color: var(--v3-text-muted); line-height: 1.5; }
.cn-v3 .v3-facts-foot {
  text-align: center;
  font-size: 0.96rem;
  color: var(--v3-text-muted);
  font-variant-numeric: tabular-nums;
}
.cn-v3 .v3-facts-foot a { color: var(--v3-cyan); font-weight: 600; }
.cn-v3 .v3-facts-foot a:hover { color: var(--v3-text-strong); }

/* ═══════════════════════════════════════
   7 — CTA-FINALE
═══════════════════════════════════════ */
.cn-v3 .v3-finale { padding: 5rem 0 7rem; }
.cn-v3 .v3-finale-card {
  position: relative;
  text-align: center;
  padding: 5rem clamp(2rem, 4vw, 3.5rem);
  border-radius: var(--v3-r-lg);   /* DF-2: tokeniser radius (32→28px) */
  overflow: hidden;
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(0, 227, 227, 0.12), transparent 60%),
    linear-gradient(180deg, var(--v3-surface-2), var(--v3-ink));
  border: 1px solid var(--v3-cyan-line);
  box-shadow: var(--v3-shadow), 0 0 90px -40px rgba(0, 227, 227, 0.4);
}
.cn-v3 .v3-finale-glow {
  position: absolute;
  top: -40%; left: 50%;
  width: 70%; height: 100%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(0, 227, 227, 0.18), transparent 65%);
  filter: blur(40px);
  pointer-events: none;
}
.cn-v3 .v3-finale-card h2 {
  position: relative;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  letter-spacing: -0.04em;
  margin: 0 auto 1rem;
  max-width: 18ch;
  text-wrap: balance;
}
.cn-v3 .v3-finale-card p {
  position: relative;
  color: var(--v3-text-muted);
  font-size: 1.1rem;
  margin: 0 auto 2rem;
  max-width: 52ch;
  text-wrap: pretty;
}
.cn-v3 .v3-finale-cta { position: relative; display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; }

/* ═══════════════════════════════════════
   FOOTER  (re-stylet, hierarki + tillitsutsagn)
═══════════════════════════════════════ */
.cn-v3 .site-footer {
  position: relative;
  z-index: 1;
  background: var(--v3-bg-2);
  border-top: 1px solid var(--v3-line);
}
.cn-v3 .v3-footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
  gap: 2.5rem;
  padding: 4.5rem var(--gutter, 1.5rem) 3rem;
  max-width: 1320px;
  margin: 0 auto;
}
.cn-v3 .v3-footer-brand .logo { margin-bottom: 1.1rem; }
.cn-v3 .v3-footer-col h3 {
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--v3-text-faint); margin-bottom: 1.1rem; font-weight: 600;
  font-family: "Inter", sans-serif;
}
.cn-v3 .v3-footer-col ul { display: grid; gap: 0.65rem; }
.cn-v3 .v3-footer-col a, .cn-v3 .v3-footer-contact li {
  color: var(--v3-text-muted); font-size: 0.92rem;
  transition: color 150ms var(--v3-ease);
}
/* Komfortabel trefferflate uten å endre den tette, ryddige looken. */
.cn-v3 .v3-footer-col a, .cn-v3 .v3-footer-contact a {
  display: inline-flex; align-items: center; min-height: 32px;
}
.cn-v3 .v3-footer-col a:hover { color: var(--v3-cyan); }
.cn-v3 .v3-footer-bottom { border-top: 1px solid var(--v3-line); }
.cn-v3 .v3-footer-bottom-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.4rem var(--gutter, 1.5rem);
  max-width: 1320px; margin: 0 auto;
}
.cn-v3 .v3-footer-bottom-inner p { color: var(--v3-text-faint); font-size: 0.86rem; margin: 0; }
.cn-v3 .v3-footer-legal { display: flex; gap: 1.4rem; }
.cn-v3 .v3-footer-legal a {
  display: inline-flex; align-items: center; min-height: 32px;
  color: var(--v3-text-faint); font-size: 0.86rem; transition: color 150ms var(--v3-ease);
}
.cn-v3 .v3-footer-legal a:hover { color: var(--v3-text); }

/* ═══════════════════════════════════════
   COOKIE-BANNER  (re-stylet i v3-uttrykk)
═══════════════════════════════════════ */
.cn-v3 .cn-cookie {
  position: fixed;
  z-index: 120;
  left: 1rem; right: 1rem; bottom: 1rem;
  max-width: 760px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  padding: 1rem 1.2rem;
  border-radius: var(--v3-r-md);
  background: var(--v3-glass);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--v3-line-strong);
  box-shadow: var(--v3-shadow);
  /* v3 sentrerer via left/right + margin:auto, ikke translateX. Nullstill
     basens transform (style.css) og bruk en v3-egen inn-animasjon uten
     translateX(-50%), så «fill:both» ikke re-innfører −50% og skyver
     banneret utenfor skjermen på mobil. */
  transform: none;
}
@media (prefers-reduced-motion: no-preference) {
  .cn-v3 .cn-cookie { animation: cn-cookie-in-v3 var(--t-med, 320ms) var(--v3-ease) both; }
}
@keyframes cn-cookie-in-v3 {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.cn-v3 .cn-cookie[hidden] { display: none; }
/* flex-basis:auto: i kolonneretning (≤560px) blir basis ellers 320px HØYDE
   → gigantisk boks. Behold grow/shrink. */
.cn-v3 .cn-cookie-text { flex: 1 1 auto; font-size: 0.88rem; color: var(--v3-text-muted); margin: 0; max-width: none; }
.cn-v3 .cn-cookie-text strong { color: var(--v3-text-strong); }
.cn-v3 .cn-cookie-text a { color: var(--v3-cyan); }
.cn-v3 .cn-cookie-ok {
  flex-shrink: 0;
  padding: 0.6rem 1.3rem;
  border-radius: var(--v3-r-pill);
  border: none;
  background: var(--v3-grad-primary);
  color: var(--v3-on-accent);
  font-weight: 600;
  font-size: 0.9rem;
}

/* ═══════════════════════════════════════
   SCROLL-REVEAL (v3-egen klasse for å unngå style.css-konflikt)
═══════════════════════════════════════ */
/* Standard = SYNLIG (no-JS viser alt). Skjult start-tilstand gjelder KUN
   når <html> har .cn-v3-js (satt av head-guard FØR paint, ingen flash).
   Feiler guard-en eller er JS av, forblir innholdet synlig og lesbart. */
.cn-v3 .v3-reveal {
  transition: opacity 700ms var(--v3-ease), transform 700ms var(--v3-ease);
  will-change: opacity, transform;
}
.cn-v3-js .cn-v3 .v3-reveal { opacity: 0; transform: translateY(26px); }
.cn-v3-js .cn-v3 .v3-reveal.is-in { opacity: 1; transform: none; }

/* ═══════════════════════════════════════════════════════════════
   DELTE UNDERSIDE-KOMPONENTER (bolk A: tjenester,
   gjenbrukes av senere bolker). Samme «mørke scene»-
   språk som forsiden: plain navy, cyan-aksent, Space Grotesk display,
   rolige skygger. Alt scoped under .cn-v3.
═══════════════════════════════════════════════════════════════ */

/* ── Brødsmuler ── */
.cn-v3 .v3-crumbs {
  padding: 6.4rem 0 0;
}
.cn-v3 .v3-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  font-size: 0.82rem;
  color: var(--v3-text-faint);
}
.cn-v3 .v3-crumbs li { display: inline-flex; align-items: center; gap: 0.5rem; }
/* DF-12: skarpere, optisk sentrert brødsmule-chevron. */
.cn-v3 .v3-crumbs li:not(:last-child)::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--v3-text-faint);
  border-bottom: 1.5px solid var(--v3-text-faint);
  transform: translateY(-1px) rotate(-45deg);
  opacity: 0.9;
}
.cn-v3 .v3-crumbs a {
  display: inline-flex; align-items: center; min-height: 32px;
  color: var(--v3-text-muted);
  transition: color 150ms var(--v3-ease);
}
.cn-v3 .v3-crumbs a:hover { color: var(--v3-cyan); }
.cn-v3 .v3-crumbs [aria-current="page"] { color: var(--v3-text); font-weight: 600; }

/* ── Underside-hero (mindre enn forsidens, samme språk) ── */
.cn-v3 .v3-subhero { padding: 3rem 0 4.5rem; position: relative; overflow: hidden; }
.cn-v3 .v3-subhero-inner {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: var(--v3-sp-6);
  align-items: center;
}
.cn-v3 .v3-subhero-copy { max-width: 600px; }
.cn-v3 .v3-subhero-copy .v3-eyebrow { margin-bottom: 1.4rem; }
.cn-v3 .v3-subhero-title {
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  letter-spacing: -0.05em;
  line-height: 1.0;
  margin-bottom: 1.3rem;
  text-wrap: balance;
}
.cn-v3 .v3-subhero-title .v3-accent {
  color: var(--v3-cyan);
  text-shadow: 0 0 40px rgba(0, 227, 227, 0.32);
}
.cn-v3 .v3-subhero-sub {
  font-size: 1.15rem;
  color: var(--v3-text-muted);
  margin-bottom: 2rem;
  max-width: 52ch;
  line-height: 1.6;
  text-wrap: pretty;
}
.cn-v3 .v3-subhero-cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 1.9rem; }
.cn-v3 .v3-platforms { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.cn-v3 .v3-platform {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.4rem 0.85rem;
  border-radius: var(--v3-r-pill);
  color: var(--v3-text-muted);
  background: rgba(150, 180, 230, 0.05);
  border: 1px solid var(--v3-line-strong);
}

/* ── Hopp-nav (sticky «på siden») ──
   Klistrer seg rett under den faste headeren (≈68px høy). */
.cn-v3 .v3-jump {
  position: sticky;
  top: 66px;
  z-index: 40;
  background: var(--v3-glass);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-top: 1px solid var(--v3-line);
  border-bottom: 1px solid var(--v3-line);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cn-v3 .v3-jump { background: var(--v3-bg-2); }
}
.cn-v3 .v3-jump-inner {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.cn-v3 .v3-jump-inner::-webkit-scrollbar { display: none; }
.cn-v3 .v3-jump-label {
  flex-shrink: 0;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--v3-text-faint);
  margin-right: 0.6rem;
}
.cn-v3 .v3-jump-link {
  flex-shrink: 0;
  display: inline-flex; align-items: center; min-height: 32px;
  padding: 0.4rem 0.85rem;
  border-radius: var(--v3-r-pill);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--v3-text-muted);
  border: 1px solid transparent;
  transition: color 160ms var(--v3-ease), background 160ms var(--v3-ease), border-color 160ms var(--v3-ease);
}
.cn-v3 .v3-jump-link:hover { color: var(--v3-text-strong); background: rgba(150, 180, 230, 0.06); }
.cn-v3 .v3-jump-link[aria-current="true"] {
  color: var(--v3-cyan);
  background: var(--v3-cyan-soft);
  border-color: var(--v3-cyan-line);
}
/* Ankerforskyvning så fast header + sticky hopp-nav ikke dekker overskriften
   ved hopp (header ≈66px + hopp-nav ≈52px + litt luft). */
.cn-v3 .v3-anchor { scroll-margin-top: 128px; }

/* ── Feature-rad (kopi + scene, vekslende side) ── */
.cn-v3 .v3-feature { padding: var(--v3-sp-12) 0; }
.cn-v3 .v3-feature-inner {
  display: grid;
  grid-template-columns: 1fr 1.06fr;
  gap: var(--v3-sp-6);
  align-items: center;
}
.cn-v3 .v3-feature-inner.rev { grid-template-columns: 1.06fr 1fr; }
.cn-v3 .v3-feature-inner.rev .v3-feature-copy { order: 2; }
.cn-v3 .v3-feature-copy h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  margin-bottom: 1rem;
}
.cn-v3 .v3-feature-copy .v3-eyebrow { margin-bottom: 1.2rem; }
.cn-v3 .v3-feature-lead {
  color: var(--v3-text-muted);
  font-size: 1.075rem;
  margin-bottom: 1.6rem;
  line-height: 1.6;
  text-wrap: pretty;
}
.cn-v3 .v3-checklist { display: grid; gap: 0.7rem; margin-bottom: 1.5rem; }
.cn-v3 .v3-checklist li {
  display: flex; align-items: flex-start; gap: 0.65rem;
  font-size: 0.96rem; color: var(--v3-text); line-height: 1.55;
}
.cn-v3 .v3-checklist li::before {
  content: "";
  flex-shrink: 0;
  margin-top: 1px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--v3-cyan-soft);
  border: 1px solid var(--v3-cyan-line);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2300E3E3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Nummererte steg (godkjenning → lønn) */
.cn-v3 .v3-steps { display: grid; gap: 0.9rem; margin-bottom: 0.5rem; counter-reset: vstep; }
.cn-v3 .v3-steps li {
  display: flex; align-items: flex-start; gap: 0.9rem;
  font-size: 0.98rem; color: var(--v3-text); line-height: 1.5;
}
.cn-v3 .v3-steps li::before {
  counter-increment: vstep;
  content: counter(vstep, decimal-leading-zero);
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--v3-r-sm);   /* DF-2: tokeniser radius */
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.82rem; font-weight: 700;
  color: var(--v3-cyan);
  background: var(--v3-cyan-soft);
  border: 1px solid var(--v3-cyan-line);
}

/* Scene-rammer på undersider: web-vindu (+ valgfri telefon) side om side */
.cn-v3 .v3-feature-scene {
  position: relative;
  display: grid;
  /* HERO-4: telefon-kolonnen hevet (108→172px min) for den større telefonen. */
  grid-template-columns: minmax(0, 1fr) minmax(172px, 0.34fr);
  align-items: end;
  gap: 1.6rem;
}
.cn-v3 .v3-feature-scene.solo { grid-template-columns: 1fr; }
.cn-v3 .v3-feature-scene .v3-frame-phone {
  position: relative;
  width: 100%;
  max-width: 172px;          /* HERO-4: matcher den større telefonskalaen */
  justify-self: center;
  align-self: end;
  margin-bottom: -1.4rem;
  border-radius: 22px;
  border: 4px solid var(--v3-ink);
  box-shadow: var(--v3-shadow), 0 0 44px -16px rgba(0, 227, 227, 0.22);
}
.cn-v3 .v3-feature-scene .v3-frame-phone img { width: 100%; height: auto; border-radius: 18px; display: block; }

/* Mock-vindu (chat / regel-linjer) — CSS, ingen bilde */
.cn-v3 .v3-mock {
  position: relative;
  border-radius: var(--v3-r-lg);
  background: linear-gradient(180deg, var(--v3-surface) 0%, var(--v3-ink) 100%);
  border: 1px solid var(--v3-line-strong);
  box-shadow: var(--v3-shadow), 0 0 60px -30px rgba(0, 227, 227, 0.18);
  overflow: hidden;
}
.cn-v3 .v3-mock-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 0.7rem 0.95rem;
  background: var(--v3-surface);
  border-bottom: 1px solid var(--v3-line);
}
.cn-v3 .v3-mock-body { padding: 1.3rem; }
.cn-v3 .v3-mock-note {
  margin: 0.9rem 0 0;
  font-size: 0.74rem;
  color: var(--v3-text-faint);
  text-align: right;
}

/* Chat-mock */
.cn-v3 .v3-chat { display: grid; gap: 0.8rem; }
.cn-v3 .v3-chat-row { display: flex; }
.cn-v3 .v3-chat-row.user { justify-content: flex-end; }
.cn-v3 .v3-chat-bubble {
  max-width: 88%;
  padding: 0.8rem 1rem;
  border-radius: 16px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--v3-text);
}
.cn-v3 .v3-chat-row.user .v3-chat-bubble {
  background: rgba(150, 180, 230, 0.06);
  border: 1px solid var(--v3-line-strong);
  border-bottom-right-radius: 5px;
}
.cn-v3 .v3-chat-row.ai .v3-chat-bubble {
  background: var(--v3-cyan-soft);
  border: 1px solid var(--v3-cyan-line);
  border-bottom-left-radius: 5px;
}
.cn-v3 .v3-chat-bubble strong { color: var(--v3-text-strong); }
.cn-v3 .v3-chat-codes { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.cn-v3 .v3-chat-code {
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.74rem; font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: var(--v3-r-pill);
  color: var(--v3-cyan);
  background: var(--v3-ink);
  border: 1px solid var(--v3-cyan-line);
}
.cn-v3 .v3-chat-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.cn-v3 .v3-chat-btn {
  font-size: 0.78rem; font-weight: 700;
  padding: 0.4rem 0.85rem;
  border-radius: var(--v3-r-pill);
}
.cn-v3 .v3-chat-btn-primary { background: var(--v3-cyan); color: var(--v3-on-accent); }
.cn-v3 .v3-chat-btn-ghost {
  color: var(--v3-text-strong);
  background: rgba(150, 180, 230, 0.06);
  border: 1px solid var(--v3-line-strong);
}

/* Regel-linjer-mock (lønnslinjer / firmakort / bokføring) */
.cn-v3 .v3-rules { display: grid; gap: 0.6rem; }
.cn-v3 .v3-mock-body .v3-chat + .v3-rules { margin-top: 0.9rem; }
.cn-v3 .v3-rule-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0.95rem;
  border-radius: var(--v3-r-sm);
  background: var(--v3-surface);
  border: 1px solid var(--v3-line);
}
.cn-v3 .v3-rule-label {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 0.9rem; font-weight: 600; color: var(--v3-text-strong);
}
.cn-v3 .v3-rule-label span {
  font-size: 0.74rem; font-weight: 400; color: var(--v3-text-faint);
}
.cn-v3 .v3-rule-tag {
  flex-shrink: 0;
  font-size: 0.76rem; font-weight: 700;
  padding: 0.3rem 0.7rem;
  border-radius: var(--v3-r-pill);
  font-variant-numeric: tabular-nums;
}
.cn-v3 .v3-rule-tag-base { color: var(--v3-text); background: rgba(150, 180, 230, 0.08); border: 1px solid var(--v3-line-strong); }
.cn-v3 .v3-rule-tag-ot { color: var(--v3-cyan); background: var(--v3-cyan-soft); border: 1px solid var(--v3-cyan-line); }
.cn-v3 .v3-rule-sum {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 0.9rem;
  padding: 0.85rem 0.95rem;
  border-radius: var(--v3-r-sm);
  background: var(--v3-cyan-soft);
  border: 1px solid var(--v3-cyan-line);
  font-weight: 700; color: var(--v3-text-strong);
  font-variant-numeric: tabular-nums;
}

/* ── Reise & Utgifter (tjenester): §3 overførings-splitt + §5 tre-veis rute ──
   §3-mock og §5-pilar er MØRKE øyer. .under (grønn) og .over (cyan) er mørke
   piller med lys brødtekst (passerer AA ~7:1). .report er en PALE TEAL-brikke:
   lys teal-flate + mørk, mettet --ph-teal-tekst → AA-lesbar (~5,2:1) OG en
   genuint distinkt tredje hue (grønn = regnskap, teal = innrapportering, cyan
   = lønn). --ph-teal er mørk og krever lys flate, derav den pale brikken. */
.cn-v3 .v3-route-pill.report {
  border-color: var(--ph-teal-line);
  background: var(--ph-teal-pale);   /* pale teal-flate, AA-bærer for mørk --ph-teal-tekst på mørk øy */
  color: var(--ph-teal);
}
.cn-v3 .v3-route-pill.report b { color: var(--ph-teal); }

/* Rute-piller i split-mock (2-veis #exp-overforing / 3-veis #eksterne) bryter mykt
   på smale skjermer. Re-scopet til .v3-exp-split etter at .v3-pillar-c gikk ut av
   tjenester.html (#eksterne er nå feature-stil med mørk mock). */
.cn-v3 .v3-exp-split .v3-flow-route .v3-route-pill { flex: 1 1 8.5rem; }

/* §3 + #eksterne: «Godkjent …» → forgrener til ruter (inni .v3-mock). */
.cn-v3 .v3-exp-split { display: grid; justify-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.cn-v3 .v3-exp-split-src {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.95rem;
  border-radius: var(--v3-r-pill);
  background: var(--v3-surface);   /* SOLID mørk flate (var cyan-soft semi-transp. → tvetydig komposisjon mot lerret) */
  border: 1px solid var(--v3-cyan-line);
  color: var(--v3-text-strong);   /* lys tekst + cyan check på solid mørk → AA ~14:1 / grafikk ~10:1, konsistent med mørk mock-øy */
  font-size: 0.82rem; font-weight: 700;
}
.cn-v3 .v3-exp-split-src svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--v3-cyan); }
.cn-v3 .v3-exp-split-fork {
  width: 1px; height: 0.85rem;
  background: linear-gradient(180deg, var(--v3-cyan-line), transparent);
}
.cn-v3 .v3-exp-split .v3-flow-route { width: 100%; margin-top: 0; flex-wrap: wrap; }

/* §3: tidstyring-chip under overførings-radene. */
.cn-v3 .v3-exp-timing {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 0.9rem;
  padding: 0.55rem 0.95rem;
  border-radius: var(--v3-r-sm);
  background: var(--v3-surface);
  border: 1px solid var(--v3-line);
  font-size: 0.8rem; color: var(--v3-text-muted);
}
.cn-v3 .v3-exp-timing-now {
  flex-shrink: 0;
  font-size: 0.74rem; font-weight: 700;
  color: var(--v3-cyan);
  padding: 0.25rem 0.65rem;
  border-radius: var(--v3-r-pill);
  background: var(--v3-cyan-soft);
  border: 1px solid var(--v3-cyan-line);
}

/* ── Service-band: tydelig tjeneste-skille på lyst lerret (tjenester.html).
   Full-bredde topp-strek + sentrert, teal tjeneste-navn + kort undertekst,
   romslig luft over. ph-*-tekst (lyst lerret). Navn = --ph-teal (lyse-lerret-
   aksenten, AA ~7:1 + stor tekst), undertekst dempet --ph-muted. ── */
.cn-v3 .v3-svc-divider { padding: var(--v3-sp-9) 0 0; }
.cn-v3 .v3-svc-divider > .v3-container {
  border-top: 2px solid var(--ph-line-strong);
  padding-top: var(--v3-sp-5);
  text-align: center;
}
.cn-v3 .v3-svc-divider-name {
  font-size: clamp(2rem, 4.5vw, 3rem);
  letter-spacing: -0.04em;
  color: var(--ph-teal);
  margin: 0 0 0.4rem;
}
.cn-v3 .v3-svc-divider-sub {
  font-size: 1.05rem;
  color: var(--ph-muted);
  margin: 0 auto;
}

/* ── «Hvorfor CN»-pilarer (3 like, men v3-kort) ── */
.cn-v3 .v3-why { padding: var(--v3-sp-12) 0; }
.cn-v3 .v3-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.cn-v3 .v3-why-card {
  position: relative;
  border-radius: var(--v3-r-lg);
  padding: 2rem;
  background: linear-gradient(180deg, var(--v3-surface-2) 0%, var(--v3-ink) 100%);
  border: 1px solid var(--v3-line-strong);
  box-shadow: var(--v3-shadow-soft);
  overflow: hidden;
}
.cn-v3 .v3-why-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 227, 227, 0.4), transparent);
  opacity: 0.6;
}
.cn-v3 .v3-why-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;          /* DF-2: standardisert ikon-flis */
  border-radius: var(--v3-r-sm);
  margin-bottom: 1.2rem;
  background: var(--v3-cyan-soft);
  border: 1px solid var(--v3-cyan-line);
  color: var(--v3-cyan);
}
.cn-v3 .v3-why-ico svg { width: 22px; height: 22px; }
.cn-v3 .v3-why-card h3 { font-size: 1.25rem; margin-bottom: 0.6rem; }
.cn-v3 .v3-why-card p { color: var(--v3-text-muted); font-size: 0.96rem; line-height: 1.6; }

/* ── Tjeneste-oversikt (cards) — mørke øyer på lerretet, light-on-dark.
   Egen liste-klasse (IKKE .v3-checklist) fordi sjekklista tvinges mørk på
   undersider; her må teksten være lys mot kortets mørke bakgrunn. ── */
.cn-v3 .v3-svc { padding: 2rem 0 var(--v3-sp-12); }
.cn-v3 .v3-svc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
}
/* 4 tjeneste-kort: 2×2 allerede fra 1200px så kortene ikke blir smale
   spalter på mellomstore skjermer (1 kolonne på mobil settes i RESPONSIV). */
@media (max-width: 1200px) {
  .cn-v3 .v3-svc-grid { grid-template-columns: repeat(2, 1fr); }
}
.cn-v3 .v3-svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--v3-r-lg);
  padding: 2rem;
  background: linear-gradient(180deg, var(--v3-surface-2) 0%, var(--v3-ink) 100%);
  border: 1px solid var(--v3-line-strong);
  box-shadow: var(--v3-shadow-soft);
  overflow: hidden;
}
.cn-v3 .v3-svc-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--v3-cyan), transparent);
  opacity: 0.7;
}
.cn-v3 .v3-svc-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--v3-r-sm);
  margin-bottom: 1.2rem;
  background: var(--v3-cyan-soft);
  border: 1px solid var(--v3-cyan-line);
  color: var(--v3-cyan);
}
.cn-v3 .v3-svc-ico svg { width: 22px; height: 22px; }
.cn-v3 .v3-svc-card h2 { font-size: 1.25rem; margin-bottom: 1.1rem; }
.cn-v3 .v3-svc-list {
  display: grid;
  gap: 0.7rem;
  margin: 0 0 1.8rem;
  padding: 0;
  list-style: none;
}
.cn-v3 .v3-svc-list li {
  display: flex; align-items: flex-start; gap: 0.65rem;
  font-size: 0.95rem; color: var(--v3-text); line-height: 1.5;
}
.cn-v3 .v3-svc-list li::before {
  content: "";
  flex-shrink: 0;
  margin-top: 1px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--v3-cyan-soft);
  border: 1px solid var(--v3-cyan-line);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2300E3E3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0 0 0 1px rgba(0, 227, 227, 0.08), 0 0 10px -2px rgba(0, 227, 227, 0.35);
}
.cn-v3 .v3-svc-cta { margin-top: auto; align-self: flex-start; text-decoration: none; }
.cn-v3 .v3-svc-cta svg { width: 16px; height: 16px; }
/* «Kommer snart»-status (ikke en knapp): rolig dempet pille med klokke-cue,
   bunnforankret som CTA-ene så kort-høyden holder. Ikke-interaktiv <span>. */
.cn-v3 .v3-svc-soon {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border-radius: var(--v3-r-pill);
  background: rgba(150, 180, 230, 0.06);
  border: 1px solid var(--v3-line-strong);
  color: var(--v3-text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: default;
}
.cn-v3 .v3-svc-soon svg { width: 15px; height: 15px; color: var(--v3-cyan); }

/* ════════════════════════════════════════════════════════════════
   TJENESTE-HUB — full-skjerm mørk scene  (KUN tjenester.html)
   ────────────────────────────────────────────────────────────────
   De tre tjeneste-kortene er det første som møter besøkende: en rolig
   kinematisk mørk scene (navy + dempet cyan-glød) der kortene står
   sentrert og fyller første skjerm under den faste headeren. Resten av
   siden UNDER huben forblir lyst lerret (.cn-v3:not(.page-home)); den
   mørke scenen er scopet til .v3-svc--hub via en absolutt ::before-
   bakgrunn (IKKE body/atmos), og .v3-bridge--hub smelter mørk → lys.
   Header er position:fixed (overlay) → 100dvh + padding-top for klaring,
   ikke calc(100dvh − header). min-height (ikke height) → vokser/scroller
   når 3 kort stables på mobil. ── */
.cn-v3 .v3-svc--hub {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 100vh;             /* fallback for nettlesere uten dvh */
  min-height: 100dvh;            /* fyller første skjerm; vokser ved behov */
  padding-top: 6.4rem;           /* klaring for den faste headeren */
  padding-bottom: 3.2rem;
}
/* Mørk scene-bakgrunn, scopet til huben (bak innholdet, dekker lerret-atmos
   innenfor hub-boksen via egen stacking-context fra isolation:isolate). */
.cn-v3 .v3-svc--hub::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(78% 86% at 50% 36%, rgba(0, 227, 227, 0.10), transparent 68%),
    linear-gradient(180deg, var(--v3-ink) 0%, var(--v3-bg) 100%);
}
/* Kortene «poppes» på den mørke scenen: lysere overflate + cyan kant-glød +
   mørk drop-shadow + rolig cyan glød + hårfin topp-høylys (løftet hardware).
   3 klasser → slår A1-lys-lerret-skyggen (.cn-v3 .v3-svc-card, 2 klasser)
   uavhengig av kilderekkefølge. Topplinje (::before) og sjekk-prikker er
   allerede cyan og beholdes; korttekst er allerede lys (AA på mørkt). */
.cn-v3 .v3-svc--hub .v3-svc-card {
  background: linear-gradient(180deg, var(--v3-surface-3) 0%, var(--v3-surface) 100%);
  border-color: var(--v3-cyan-line);
  box-shadow:
    var(--v3-shadow-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(0, 227, 227, 0.10),
    0 24px 64px -32px rgba(0, 227, 227, 0.28);
  transition: box-shadow 320ms var(--v3-ease), border-color 320ms var(--v3-ease);
}
.cn-v3 .v3-svc--hub .v3-svc-card:hover {
  box-shadow:
    var(--v3-shadow-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0 0 1px rgba(0, 227, 227, 0.18),
    0 30px 80px -30px rgba(0, 227, 227, 0.42);
}
/* Mørk hub → lyst lerret: solid vertikal overgang (ikke bare cyan-glød som
   den delte .v3-bridge gir mellom flater på samme lerret). display:block +
   egen geometri gjør modifikatoren uavhengig av base-.v3-bridge (som er en
   inline span uten display); ::before arver content/position/inset fra
   base-regelen og overstyrer kun bakgrunnen. */
.cn-v3 .v3-bridge--hub {
  display: block;
  height: 110px;
  margin: 0;
}
.cn-v3 .v3-bridge.v3-bridge--hub::before {
  background:
    radial-gradient(70% 130% at 50% 0%, rgba(0, 227, 227, 0.10), transparent 60%),
    linear-gradient(180deg, var(--v3-bg) 0%, var(--ph-canvas) 100%);
}

/* ── Visuelt skjult (sr-only) — tilgjengelig for skjermleser, usynlig.
   Brukes for seksjons-h2 som holder dokument-hierarkiet h1→h2→h3. ── */
.cn-v3 .v3-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Sammenligningstabell (mørk) ── */
.cn-v3 .v3-compare { padding: var(--v3-sp-12) 0; }
.cn-v3 .v3-compare-wrap {
  border-radius: var(--v3-r-lg);
  border: 1px solid var(--v3-line-strong);
  background: linear-gradient(180deg, var(--v3-surface-2) 0%, var(--v3-ink) 100%);
  box-shadow: var(--v3-shadow-soft);
  overflow: hidden;
}
.cn-v3 .v3-compare-table { width: 100%; border-collapse: collapse; }
.cn-v3 .v3-compare-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cn-v3 .v3-compare-table th,
.cn-v3 .v3-compare-table td {
  padding: 1.05rem 1.3rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--v3-line);
  font-size: 0.94rem;
  line-height: 1.5;
}
.cn-v3 .v3-compare-table thead th {
  background: var(--v3-surface);
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.04rem;
  color: var(--v3-text-strong);
  position: sticky; top: 0;
}
.cn-v3 .v3-compare-table tbody th[scope="row"] {
  color: var(--v3-text-faint);
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  width: 22%;
}
.cn-v3 .v3-compare-table td { color: var(--v3-text); }
.cn-v3 .v3-compare-table tbody tr:last-child th,
.cn-v3 .v3-compare-table tbody tr:last-child td { border-bottom: none; }
.cn-v3 .v3-compare-prod { display: inline-flex; align-items: center; gap: 0.55rem; }
.cn-v3 .v3-compare-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.cn-v3 .v3-compare-dot-cal { background: var(--v3-cyan); box-shadow: 0 0 8px 0 rgba(0, 227, 227, 0.6); }
.cn-v3 .v3-compare-dot-exp { background: var(--v3-electric); box-shadow: 0 0 8px 0 rgba(91, 140, 255, 0.6); }
.cn-v3 .v3-compare-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 1.6rem;
}
.cn-v3 .v3-compare-foot p { color: var(--v3-text-muted); margin: 0; }

/* ── Galleri (mørk) + lightbox-trigger ── */
.cn-v3 .v3-gallery-sec { padding: var(--v3-sp-12) 0; }
.cn-v3 .v3-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.4rem;
  align-items: start;
}
.cn-v3 .v3-gallery-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  border-radius: var(--v3-r-md);
  border: 1px solid var(--v3-line-strong);
  background: var(--v3-ink);
  box-shadow: var(--v3-shadow-soft);
  overflow: hidden;
  /* MOT-4: kjappere transform (200ms) enn farge/skygge (280ms) → crisp løft. */
  transition: transform 200ms var(--v3-ease), border-color 280ms var(--v3-ease), box-shadow 280ms var(--v3-ease);
}
.cn-v3 .v3-gallery-item:hover {
  transform: translateY(-4px);
  border-color: var(--v3-cyan-line);
  box-shadow: var(--v3-shadow-soft), 0 18px 50px -28px rgba(0, 227, 227, 0.4);
  will-change: transform;
}
.cn-v3 .v3-gallery-web { grid-column: span 8; }
.cn-v3 .v3-gallery-web-narrow { grid-column: span 4; }
.cn-v3 .v3-gallery-phone { grid-column: span 4; }
/* Trigger-knappen fyller kortet og kapsler bildet i en fast ramme-høyde
   med object-fit, så ingen celle strekkes til en tom mørk boks (rettelse av
   gammel defekt der høye portrettbilder dro raden opp). */
.cn-v3 .v3-gallery-zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: var(--v3-ink);
  cursor: zoom-in;
}
.cn-v3 .v3-gallery-zoom img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: top center;
  display: block;
  pointer-events: none;
  /* MOT-3: oppfyll zoom-affordansen — mykt scale-on-hover (overflow:hidden
     på .v3-gallery-item beskjærer overflødet). */
  transition: transform 400ms var(--v3-ease);
  will-change: transform;
}
.cn-v3 .v3-gallery-item:hover .v3-gallery-zoom img { transform: scale(1.04); }
.cn-v3 .v3-gallery-phone .v3-gallery-zoom img { object-fit: contain; background: var(--v3-ink); }
.cn-v3 .v3-gallery-zoom:focus-visible { outline: 2px solid var(--v3-cyan); outline-offset: -3px; }
.cn-v3 .v3-gallery-cap {
  display: block;
  padding: 0.75rem 1rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--v3-text-muted);
  border-top: 1px solid var(--v3-line);
  background: var(--v3-surface);
}

/* Lightbox: re-styler den delte overlay-en i v3-uttrykk (markup uendret).
   Lightbox-en ligger som etterkommer av body, så body.cn-v3 treffer den. */
body.cn-v3 .cn-lightbox { background: rgba(7, 11, 22, 0.86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
body.cn-v3 .cn-lightbox-cap { color: var(--v3-text-muted); }
body.cn-v3 .cn-lightbox-close { color: var(--v3-text-strong); }

/* ── FAQ-accordion (mørk, elegant) — gjenbruker .faq* markup + JS ── */
.cn-v3 .v3-faq-sec { padding: var(--v3-sp-12) 0; }
.cn-v3 .faq { max-width: 800px; }
.cn-v3 .faq-item {
  border-radius: var(--v3-r-md);
  background: linear-gradient(180deg, var(--v3-surface-2) 0%, var(--v3-ink) 100%);
  border: 1px solid var(--v3-line-strong);
  overflow: hidden;
  transition: border-color 220ms var(--v3-ease);
}
.cn-v3 .faq-item:hover { border-color: var(--v3-cyan-line); }
.cn-v3 .faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%;
  padding: 1.25rem 1.4rem;
  background: transparent;
  border: none;
  text-align: left;
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--v3-text-strong);
}
.cn-v3 .faq-q:focus-visible { outline: 2px solid var(--v3-cyan); outline-offset: -2px; border-radius: var(--v3-r-md); }
.cn-v3 .faq-icon {
  position: relative; width: 20px; height: 20px; flex-shrink: 0;
  /* MOT-8: hele +/− ikonet roterer mykt ved åpning for en taktil følelse. */
  transition: transform 240ms var(--v3-ease);
}
.cn-v3 .faq-q[aria-expanded="true"] .faq-icon { transform: rotate(90deg); }
.cn-v3 .faq-icon::before,
.cn-v3 .faq-icon::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  background: var(--v3-cyan);
  border-radius: 2px;
  transition: transform 240ms var(--v3-ease);
}
.cn-v3 .faq-icon::before { width: 12px; height: 2px; transform: translate(-50%, -50%); }
.cn-v3 .faq-icon::after { width: 2px; height: 12px; transform: translate(-50%, -50%); }
.cn-v3 .faq-q[aria-expanded="true"] .faq-icon::after { transform: translate(-50%, -50%) scaleY(0); }
.cn-v3 .faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 280ms var(--v3-ease);
}
.cn-v3 .faq-q[aria-expanded="true"] + .faq-a { grid-template-rows: 1fr; }
.cn-v3 .faq-a-inner { overflow: hidden; }
.cn-v3 .faq-a p {
  padding: 0 1.4rem 1.3rem;
  color: var(--v3-text-muted);
  font-size: 0.96rem;
  line-height: 1.6;
  max-width: none;
}

/* Eyebrow over h3 i pilar C → litt luft mellom eyebrow og overskrift */
.cn-v3 .v3-pillar-c .v3-pillar-c-h3 { margin-top: 1rem; }

/* ── Eksterne/frivillige-stripe (gjenbruk av forsidens rute-piller på tjenester.html) ── */
.cn-v3 .v3-ext-routes { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-bottom: 1.5rem; }
.cn-v3 .v3-ext-routes .v3-route-pill { min-width: 200px; flex: 1 1 200px; }

/* ── Seksjons-helper: behold style.css .section-padding under cn-v3 ── */
.cn-v3 .v3-section { padding: 5rem 0; }

/* ═══════════════════════════════════════
   RESPONSIV
═══════════════════════════════════════ */
@media (max-width: 1024px) {
  .cn-v3 .v3-hero-inner { grid-template-columns: 1fr; gap: 3.5rem; }
  .cn-v3 .v3-hero-scene { max-width: 640px; margin: 0 auto; }
  /* Solo web-vinduet (forsiden) får mer plass uten telefon ved siden */
  .cn-v3 .v3-hero-scene.solo { max-width: 760px; }
  .cn-v3 .v3-build-inner { grid-template-columns: 1fr; gap: 2.6rem; }
  .cn-v3 .v3-pillar-lead,
  .cn-v3 .v3-pillar-b { grid-column: span 12; }
  .cn-v3 .v3-pillar-c .v3-pillar-c-inner { grid-template-columns: 1fr; gap: 1.6rem; }
  .cn-v3 .v3-pillar-c-cta { align-items: flex-start; }

  /* Underside-komponenter */
  .cn-v3 .v3-subhero-inner { grid-template-columns: 1fr; gap: 3rem; }
  .cn-v3 .v3-subhero-scene { max-width: 640px; margin: 0 auto; }
  .cn-v3 .v3-feature-inner,
  .cn-v3 .v3-feature-inner.rev { grid-template-columns: 1fr; gap: 2.6rem; }
  .cn-v3 .v3-feature-inner.rev .v3-feature-copy { order: 0; }
  .cn-v3 .v3-feature-scene { max-width: 640px; margin: 0 auto; }
  .cn-v3 .v3-why-grid { grid-template-columns: 1fr; }
  .cn-v3 .v3-svc-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .cn-v3 .v3-hero { padding: 8.5rem 0 3.5rem; }
  .cn-v3 .v3-hero-title { font-size: clamp(2.2rem, 9.5vw, 3.2rem); }
  .cn-v3 .v3-flowpay-steps { grid-template-columns: 1fr; }
  .cn-v3 .v3-fp-step:not(:last-child)::after { display: none; }
  .cn-v3 .v3-facts-grid { grid-template-columns: repeat(2, 1fr); }
  .cn-v3 .v3-footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .cn-v3 .v3-footer-brand { grid-column: 1 / -1; }
  /* Hero-scenen beholder web + telefon SIDE OM SIDE på mobil
     (smalere telefon-kolonne, mindre nedforskyvning). */
  .cn-v3 .v3-hero-scene { max-width: 520px; margin: 0 auto; gap: 1rem; }
  .cn-v3 .v3-frame-phone { margin-bottom: -1rem; }
  .cn-v3 .v3-build-inner { gap: 2rem; }

  /* Underside-komponenter */
  .cn-v3 .v3-subhero { padding: 1.6rem 0 3.5rem; }
  .cn-v3 .v3-subhero-title { font-size: clamp(2rem, 8.5vw, 2.9rem); }
  .cn-v3 .v3-feature-scene { max-width: 520px; gap: 1rem; }
  .cn-v3 .v3-feature-scene .v3-frame-phone { margin-bottom: -1rem; }
  .cn-v3 .v3-why-grid { grid-template-columns: 1fr; }
  .cn-v3 .v3-svc-grid { grid-template-columns: 1fr; }
  /* Sammenligningstabell: la den scrolle horisontalt heller enn å klemmes */
  .cn-v3 .v3-compare-wrap { overflow-x: auto; }
  .cn-v3 .v3-compare-table { min-width: 560px; }
  /* Galleri: kollaps 12-kol → 2-kol så ingen celle blir for smal */
  .cn-v3 .v3-gallery { grid-template-columns: repeat(2, 1fr); }
  .cn-v3 .v3-gallery-web,
  .cn-v3 .v3-gallery-web-narrow,
  .cn-v3 .v3-gallery-phone { grid-column: span 1; }
  .cn-v3 .v3-gallery-zoom img { height: 200px; }
  .cn-v3 .v3-gallery-phone .v3-gallery-zoom img { height: 280px; }
}

@media (max-width: 520px) {
  .cn-v3 .v3-hero-title { font-size: clamp(1.95rem, 9vw, 2.6rem); }
  .cn-v3 .v3-hero-cta .v3-btn,
  .cn-v3 .v3-finale-cta .v3-btn { flex: 1 1 auto; }
  .cn-v3 .v3-facts-grid { grid-template-columns: 1fr; }
  .cn-v3 .v3-footer-top { grid-template-columns: 1fr; }
  /* Mer luft mellom legal-lenkene på mobil så trefferflatene ikke overlapper. */
  .cn-v3 .v3-footer-legal { flex-wrap: wrap; gap: 0.6rem 1.8rem; }
  /* Mer vertikal trefferflate på footer-lenker (~40px) KUN på mobil.
     Desktop-tettheten (32px) beholdes uendret. */
  .cn-v3 .v3-footer-col a,
  .cn-v3 .v3-footer-contact a,
  .cn-v3 .v3-footer-legal a { min-height: 40px; }
  /* På smal mobil er det ikke plass til et dominerende web-vindu OG en
     brukbar telefon side om side — vi stabler: web-vinduet FØRST og i full,
     stor bredde (det dominerende bildet), telefonen UNDER, sentrert og klart
     mindre. Ingen overlapp, ingen overflow. */
  .cn-v3 .v3-hero-scene {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 1.4rem;
    max-width: 360px;
  }
  /* Solo web-vinduet (forsiden): full bredde på mobil, ingen telefon å ta hensyn til */
  .cn-v3 .v3-hero-scene.solo {
    max-width: none;
    gap: 0;
  }
  .cn-v3 .v3-frame-web { width: 100%; }
  .cn-v3 .v3-frame-phone {
    order: 1;
    width: 60%;
    max-width: 170px;
    margin-bottom: 0;
  }
  .cn-v3 .v3-finale-card { padding: 3.5rem 1.3rem; }
  .cn-v3 .v3-pillar { padding: 1.6rem; }
  /* På smal skjerm: grid scroller horisontalt heller enn å klemmes.
     Klamre hele forfedre-kjeden (build-scene → grid-card → grid-body) til
     viewport-bredden og bryt grid-item min-width:auto-fellen, slik at den
     horisontale scrollingen havner INNE i .v3-grid-body — ikke på dokumentet. */
  .cn-v3 .v3-build-scene { min-width: 0; max-width: 100%; }
  .cn-v3 .v3-grid-card { min-width: 0; max-width: 100%; }
  .cn-v3 .v3-grid-body { overflow-x: auto; min-width: 0; max-width: 100%; }
  .cn-v3 .v3-grid-head,
  .cn-v3 .v3-grid-row { min-width: 440px; }

  /* Underside-komponenter: feature-scene stables (web først, telefon under) */
  .cn-v3 .v3-subhero-cta .v3-btn { flex: 1 1 auto; }
  .cn-v3 .v3-feature-scene {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 1.4rem;
    max-width: 360px;
  }
  .cn-v3 .v3-feature-scene .v3-frame-web { width: 100%; }
  .cn-v3 .v3-feature-scene .v3-frame-phone {
    width: 60%;
    max-width: 170px;
    margin-bottom: 0;
  }
  .cn-v3 .v3-why-card { padding: 1.6rem; }
  .cn-v3 .v3-svc-card { padding: 1.6rem; }
  .cn-v3 .v3-ext-routes .v3-route-pill { flex-basis: 100%; }
  /* Galleri på smal mobil: én kolonne, web full bredde */
  .cn-v3 .v3-gallery { grid-template-columns: 1fr; }
  .cn-v3 .v3-gallery-zoom img { height: 220px; }
  .cn-v3 .v3-gallery-phone .v3-gallery-zoom img { height: 360px; }
}

/* ═══════════════════════════════════════════════════════════════
   DELTE UNDERSIDE-KOMPONENTER (bolk B: priser / kontakt / om-oss).
   Samme «mørke scene»-språk: plain navy, cyan-aksent, Space Grotesk
   display, rolige skygger. Alt scoped under .cn-v3. Additivt — rører
   ingen eksisterende v3-CSS. De interaktive elementene (kalkulator,
   skjema, FAQ) beholder ID-ene script.js spør på; her re-styles kun.
═══════════════════════════════════════════════════════════════ */

/* ── Pris-paneler (tre tjenester, prismodell i stedet for kr-beløp) ── */
.cn-v3 .v3-plans-sec { padding: var(--v3-sp-12) 0; }
.cn-v3 .v3-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  align-items: stretch;
  max-width: 1080px;
  margin: 0 auto;
}
.cn-v3 .v3-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--v3-r-lg);
  padding: 2rem 1.9rem;
  background: linear-gradient(180deg, var(--v3-surface-2) 0%, var(--v3-ink) 100%);
  border: 1px solid var(--v3-line-strong);
  box-shadow: var(--v3-shadow-soft);
  overflow: hidden;
  /* MOT-4: kjappere transform-del (200ms), farge/skygge beholdt 280ms. */
  transition: transform 200ms var(--v3-ease), border-color 280ms var(--v3-ease), box-shadow 280ms var(--v3-ease);
}
.cn-v3 .v3-plan::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 227, 227, 0.4), transparent);
  opacity: 0.6;
}
.cn-v3 .v3-plan:hover {
  transform: translateY(-4px);
  border-color: var(--v3-cyan-line);
  box-shadow: var(--v3-shadow-soft), 0 18px 50px -28px rgba(0, 227, 227, 0.35);
  will-change: transform;
}
/* Anbefalt plan (begge moduler) — løftet, glødende ramme */
.cn-v3 .v3-plan-best {
  border-color: var(--v3-cyan-line);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(0, 227, 227, 0.10), transparent 60%),
    linear-gradient(180deg, var(--v3-surface-2) 0%, var(--v3-ink) 100%);
  box-shadow: var(--v3-shadow-soft), 0 0 60px -28px rgba(0, 227, 227, 0.4);
}
.cn-v3 .v3-plan-badge {
  position: absolute;
  top: 1.3rem; right: 1.3rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border-radius: var(--v3-r-pill);
  color: var(--v3-on-accent);
  background: var(--v3-grad-primary);
  box-shadow: 0 8px 22px -10px rgba(0, 227, 227, 0.7);
}
.cn-v3 .v3-plan-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.1rem; }
.cn-v3 .v3-plan-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;          /* DF-2: standardisert ikon-flis */
  border-radius: var(--v3-r-sm);
  background: var(--v3-cyan-soft);
  border: 1px solid var(--v3-cyan-line);
  color: var(--v3-cyan);
  flex-shrink: 0;
}
.cn-v3 .v3-plan-ico svg { width: 21px; height: 21px; }
.cn-v3 .v3-plan h3 { font-size: 1.25rem; }
.cn-v3 .v3-plan-price {
  display: flex; align-items: baseline; gap: 0.4rem;
  margin-bottom: 0.3rem;
}
.cn-v3 .v3-plan-price-num {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2.2rem, 4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--v3-text-strong);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
}
.cn-v3 .v3-plan-price-unit { font-size: 0.86rem; color: var(--v3-text-faint); }
.cn-v3 .v3-plan-tagline { font-size: 0.92rem; color: var(--v3-text-muted); margin-bottom: 1.4rem; }
/* Pris-base-linje: fast månedskostnad under per-bruker-prisen (eget blokk, ikke i flex-raden) */
.cn-v3 .v3-plan-price-base { font-size: 0.86rem; font-weight: 600; color: var(--v3-text-muted); margin: 0 0 1rem; }
/* ── Prismodell i stedet for kr-beløp (rev. 2026-07-13): én enkel, dempet linje
   («Per bruker» / «For faktisk bruk») i samme stil som den gamle prisenhets-linja
   (.v3-plan-price-unit). «Pris på forespørsel»-budskapet bæres av .v3-plans-note
   under kortene — prisfeltet skal ikke rope. ── */
.cn-v3 .v3-plan-price-model { margin-bottom: 0.6rem; }
.cn-v3 .v3-plan-model { font-size: 0.86rem; color: var(--v3-text-faint); }
/* Samlet prisnote under plankortene (lyst lerret → ph-tokens) */
.cn-v3 .v3-plans-note {
  max-width: 1080px;
  margin: 1.6rem auto 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--ph-muted);
}
/* Pakke-seksjonen er sidens inngang på priser.html (ingen brødsmule/hero) → klarering for den faste headeren */
.cn-v3.page-priser .v3-plans-sec { padding-top: 8rem; }
.cn-v3 .v3-plan-feats {
  display: grid;
  gap: 0.6rem;
  margin: 0 0 1.6rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--v3-line);
}
.cn-v3 .v3-plan-feats li {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-size: 0.92rem; color: var(--v3-text); line-height: 1.55;
}
.cn-v3 .v3-plan-feats li::before {
  content: "";
  flex-shrink: 0;
  margin-top: 1px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--v3-cyan-soft);
  border: 1px solid var(--v3-cyan-line);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%2300E3E3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.cn-v3 .v3-plan-cta { margin-top: auto; }
.cn-v3 .v3-plan-cta .v3-btn { width: 100%; }

/* ── Priskalkulator (premium mørkt panel) ── */
.cn-v3 .v3-calc-sec { padding: var(--v3-sp-12) 0; }
.cn-v3 .v3-calc {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: 1.4rem;
  align-items: stretch;
  max-width: 1040px;
  margin: 0 auto;
}
.cn-v3 .v3-calc-panel {
  border-radius: var(--v3-r-lg);
  padding: 2rem;
  background: linear-gradient(180deg, var(--v3-surface-2) 0%, var(--v3-ink) 100%);
  border: 1px solid var(--v3-line-strong);
  box-shadow: var(--v3-shadow-soft);
}
.cn-v3 .v3-calc-panel h3 {
  font-size: 1.18rem;
  margin-bottom: 1.3rem;
}
.cn-v3 .v3-calc-option {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  margin-bottom: 0.8rem;
  border-radius: var(--v3-r-md);
  background: var(--v3-surface);
  border: 1px solid var(--v3-line-strong);
  cursor: pointer;
  transition: border-color 200ms var(--v3-ease), background 200ms var(--v3-ease), transform 200ms var(--v3-ease);
}
.cn-v3 .v3-calc-option:hover { border-color: var(--v3-cyan-line); }
/* MOT-7: taktilt trykk-feedback (svært subtilt scale). */
.cn-v3 .v3-calc-option:active { transform: scale(0.995); }
.cn-v3 .v3-calc-check {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: var(--v3-r-xs);   /* DF-2: minste radius-trinn */
  border: 1.5px solid var(--v3-line-strong);
  background: var(--v3-ink);
  cursor: pointer;
  transition: background 180ms var(--v3-ease), border-color 180ms var(--v3-ease);
}
.cn-v3 .v3-calc-check:checked {
  background: var(--v3-grad-primary);
  border-color: transparent;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%2304101c' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"),
    var(--v3-grad-primary);
  background-repeat: no-repeat;
  background-position: center;
}
.cn-v3 .v3-calc-check:focus-visible { outline: 2px solid var(--v3-cyan); outline-offset: 3px; }
.cn-v3 .v3-calc-option-text { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.cn-v3 .v3-calc-option-text strong { font-size: 0.98rem; color: var(--v3-text-strong); font-weight: 600; }
.cn-v3 .v3-calc-option-text span { font-size: 0.8rem; color: var(--v3-text-faint); }
.cn-v3 .v3-calc-option-price {
  flex-shrink: 0;
  text-align: right;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--v3-text-strong);
  font-variant-numeric: tabular-nums;
}
.cn-v3 .v3-calc-option-price span {
  display: block;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--v3-text-faint);
}
.cn-v3 .v3-calc-users {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  margin-top: 1.3rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--v3-line);
}
.cn-v3 .v3-calc-users > label { font-size: 0.96rem; font-weight: 600; color: var(--v3-text-strong); }
.cn-v3 .v3-calc-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem;
  border-radius: var(--v3-r-pill);
  background: var(--v3-ink);
  border: 1px solid var(--v3-line-strong);
}
.cn-v3 .v3-calc-step-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(150, 180, 230, 0.06);
  color: var(--v3-text-strong);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms var(--v3-ease), color 160ms var(--v3-ease), transform 160ms var(--v3-ease);
}
.cn-v3 .v3-calc-step-btn:hover { background: var(--v3-cyan-soft); color: var(--v3-cyan); }
/* MOT-7: taktilt trykk på stepper-knappene. */
.cn-v3 .v3-calc-step-btn:active { transform: scale(0.92); background: var(--v3-cyan-soft); }
.cn-v3 .v3-calc-step-btn:focus-visible { outline: 2px solid var(--v3-cyan); outline-offset: 2px; }
.cn-v3 .v3-calc-users-input {
  width: 64px;
  min-height: 44px;
  text-align: center;
  background: transparent;
  border: none;
  color: var(--v3-text-strong);
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  caret-color: var(--v3-cyan);   /* DF-11: brand-caret */
  -moz-appearance: textfield;
}
.cn-v3 .v3-calc-users-input::-webkit-outer-spin-button,
.cn-v3 .v3-calc-users-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cn-v3 .v3-calc-users-input:focus-visible { outline: 2px solid var(--v3-cyan); outline-offset: 3px; border-radius: 6px; }

/* Resultat-kort */
.cn-v3 .v3-calc-result {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--v3-r-lg);
  padding: 2rem 1.9rem;
  overflow: hidden;
  background:
    radial-gradient(110% 90% at 50% 0%, rgba(0, 227, 227, 0.12), transparent 60%),
    linear-gradient(180deg, var(--v3-surface-2), var(--v3-ink));
  border: 1px solid var(--v3-cyan-line);
  box-shadow: var(--v3-shadow-soft), 0 0 70px -34px rgba(0, 227, 227, 0.4);
}
.cn-v3 .v3-calc-empty {
  margin: auto;
  text-align: center;
  font-size: 0.98rem;
  color: var(--v3-text-muted);
}
.cn-v3 .v3-calc-empty[hidden] { display: none; }
.cn-v3 .v3-calc-result-body[hidden] { display: none; }
.cn-v3 .v3-calc-result-head {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--v3-text-faint);
  margin-bottom: 0.6rem;
}
.cn-v3 .v3-calc-total {
  display: flex; align-items: baseline; gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.cn-v3 .v3-calc-total-num {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  color: var(--v3-text-strong);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
}
.cn-v3 .v3-calc-total-unit { font-size: 1rem; color: var(--v3-text-faint); }
.cn-v3 .v3-calc-total-sub { font-size: 0.92rem; color: var(--v3-text-muted); margin-bottom: 1.3rem; }
.cn-v3 .v3-calc-per { color: var(--v3-cyan); font-weight: 600; }
.cn-v3 .v3-calc-breakdown {
  display: grid;
  gap: 0.55rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--v3-line);
  border-bottom: 1px solid var(--v3-line);
  margin-bottom: 1.2rem;
}
/* .calc-line / .calc-line-year er klassenavnene script.js genererer i
   breakdown-HTML-en (initPriceCalculator). Beholdt slik så JS er uendret. */
.cn-v3 .calc-line {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
  color: var(--v3-text-muted);
}
.cn-v3 .calc-line span:last-child { color: var(--v3-text); font-variant-numeric: tabular-nums; }
.cn-v3 .calc-line-year {
  margin-top: 0.3rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--v3-line);
  font-weight: 600;
}
.cn-v3 .calc-line-year span:last-child { color: var(--v3-text-strong); }
.cn-v3 .v3-calc-save {
  display: flex;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  margin-bottom: 1.4rem;
  border-radius: var(--v3-r-sm);
  background: var(--v3-cyan-soft);
  border: 1px solid var(--v3-cyan-line);
  font-size: 0.88rem;
  color: var(--v3-text);
  line-height: 1.45;
}
.cn-v3 .v3-calc-save[hidden] { display: none; }
.cn-v3 .v3-calc-save strong { color: var(--v3-cyan); }
.cn-v3 .v3-calc-cta-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-bottom: 1rem; }
.cn-v3 .v3-calc-note { font-size: 0.78rem; color: var(--v3-text-faint); margin: 0; }

/* ── Funksjonstabell (delt med .v3-compare-tabell, men egne pris-rader) ── */
.cn-v3 .v3-plantable-foot {
  text-align: center;
  margin-top: 1.6rem;
  font-size: 0.96rem;
  color: var(--v3-text-muted);
}
.cn-v3 .v3-plantable-foot a { color: var(--v3-cyan); font-weight: 600; }
.cn-v3 .v3-plantable-foot a:hover { color: var(--v3-text-strong); }

/* ═══════════════════════════════════════
   KONTAKTSKJEMA + KONTAKTKORT (v3)
═══════════════════════════════════════ */
.cn-v3 .v3-contact-sec { padding: var(--v3-sp-12) 0; }
.cn-v3 .v3-form {
  border-radius: var(--v3-r-lg);
  padding: 2rem;
  background: linear-gradient(180deg, var(--v3-surface-2) 0%, var(--v3-ink) 100%);
  border: 1px solid var(--v3-line-strong);
  box-shadow: var(--v3-shadow-soft);
}
.cn-v3 .v3-form-row { display: grid; gap: 1.1rem; margin-bottom: 1.1rem; }
.cn-v3 .v3-form-row.two { grid-template-columns: 1fr 1fr; }
.cn-v3 .v3-field { display: flex; flex-direction: column; gap: 0.45rem; }
.cn-v3 .v3-field label {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--v3-text-strong);
}
.cn-v3 .v3-field .v3-req { color: var(--v3-cyan); }
.cn-v3 .v3-field input,
.cn-v3 .v3-field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: var(--v3-r-md);
  background: var(--v3-ink);
  border: 1px solid var(--v3-line-strong);
  color: var(--v3-text-strong);
  font-family: "Inter", sans-serif;
  /* 16px = hindrer iOS auto-zoom ved fokus på feltene (kun input/textarea,
     ikke labels). */
  font-size: 1rem;
  line-height: 1.5;
  caret-color: var(--v3-cyan);   /* DF-11: brand-caret */
  transition: border-color 180ms var(--v3-ease), box-shadow 180ms var(--v3-ease), background 180ms var(--v3-ease);
}
.cn-v3 .v3-field textarea { min-height: 140px; resize: vertical; }
.cn-v3 .v3-field input::placeholder,
.cn-v3 .v3-field textarea::placeholder { color: var(--v3-text-faint); }
.cn-v3 .v3-field input:hover,
.cn-v3 .v3-field textarea:hover { border-color: var(--v3-line-strong); background: var(--v3-bg-2); }
.cn-v3 .v3-field input:focus,
.cn-v3 .v3-field textarea:focus {
  outline: none;
  border-color: var(--v3-cyan-line);
  box-shadow: 0 0 0 3px var(--v3-cyan-soft);
  background: var(--v3-bg-2);
}
/* MOT-9: behold en tydelig tastatur-fokusring (focus-visible) i tillegg til
   den myke glød-ringen — sikrer at fokus alltid er synlig for tastaturbruk. */
.cn-v3 .v3-field input:focus-visible,
.cn-v3 .v3-field textarea:focus-visible {
  outline: 2px solid var(--v3-cyan);
  outline-offset: 2px;
}
/* Feiltilstand: native :invalid etter brukerinteraksjon (validering ved submit
   via script.js reportValidity). Vises kun når feltet ikke lenger er fokusert. */
.cn-v3 .v3-field input:user-invalid,
.cn-v3 .v3-field textarea:user-invalid {
  border-color: var(--v3-danger-line-strong);
  box-shadow: 0 0 0 3px var(--v3-danger-ring);
}
.cn-v3 .v3-form-submit { margin-top: 0.3rem; }
.cn-v3 .v3-form-consent { font-size: 0.8rem; color: var(--v3-text-faint); margin: 1rem 0 0; }
.cn-v3 .v3-form-consent a { color: var(--v3-cyan); }
.cn-v3 .v3-form-hint { font-size: 0.8rem; color: var(--v3-text-faint); margin: 0 0 1.4rem; }
.cn-v3 .v3-form-hint .v3-req { color: var(--v3-cyan); }

/* Takk-tilstand */
.cn-v3 .v3-form-success {
  text-align: center;
  border-radius: var(--v3-r-lg);
  padding: 3rem 2rem;
  background:
    radial-gradient(110% 90% at 50% 0%, rgba(0, 227, 227, 0.12), transparent 60%),
    linear-gradient(180deg, var(--v3-surface-2), var(--v3-ink));
  border: 1px solid var(--v3-cyan-line);
  box-shadow: var(--v3-shadow-soft), 0 0 70px -34px rgba(0, 227, 227, 0.4);
}
.cn-v3 .v3-form-success[hidden] { display: none; }
.cn-v3 .v3-form-success-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  margin-bottom: 1.2rem;
  border-radius: 50%;
  background: var(--v3-cyan-soft);
  border: 1px solid var(--v3-cyan-line);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%2300E3E3' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.cn-v3 .v3-form-success h3 { font-size: 1.5rem; margin-bottom: 0.7rem; }
.cn-v3 .v3-form-success p { color: var(--v3-text-muted); font-size: 1rem; margin: 0 auto; max-width: 42ch; }

/* Kontaktkort */
.cn-v3 .v3-contact-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 1.3rem;
  border-radius: var(--v3-r-md);
  background: var(--v3-surface);
  border: 1px solid var(--v3-line-strong);
  box-shadow: var(--v3-shadow-soft);
  /* MOT-4: kjappere transform-del (200ms), farge 280ms (konsistent m/ kort). */
  transition: transform 200ms var(--v3-ease), border-color 280ms var(--v3-ease);
}
/* DF-5: kalibrert hover-løft → -3px (matcher .v3-brand). */
.cn-v3 .v3-contact-card:hover { border-color: var(--v3-cyan-line); transform: translateY(-3px); will-change: transform; }
.cn-v3 .v3-contact-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;          /* DF-2: standardisert ikon-flis */
  border-radius: var(--v3-r-sm);
  flex-shrink: 0;
  background: var(--v3-cyan-soft);
  border: 1px solid var(--v3-cyan-line);
  color: var(--v3-cyan);
}
.cn-v3 .v3-contact-ico svg { width: 21px; height: 21px; }
/* Kontaktkort-label: h2 i support-seksjonen (h1 → h2, ingen nivåhopp). Liten
   uppercase-label uavhengig av basis-h2-skalaen. */
.cn-v3 .v3-contact-card h2 {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--v3-text-faint);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.cn-v3 .v3-contact-card p { font-size: 1rem; color: var(--v3-text-strong); margin: 0; }
.cn-v3 .v3-contact-card a { color: var(--v3-text-strong); transition: color 150ms var(--v3-ease); }
.cn-v3 .v3-contact-card a:hover { color: var(--v3-cyan); }

/* ── KONTAKT v2: support-seksjon (info) + sentrert skjema-seksjon ──
   Hero/finale/brødsmule er fjernet → support-seksjonen er nå første seksjon og
   trenger header-klarering (samme grep som .page-priser/.page-om-oss). De to
   kontaktkortene (e-post + telefon) bor her; skjemaet står alene i en sentrert
   kolonne i seksjon 2. */
.cn-v3 .v3-support-sec { padding: var(--v3-sp-12) 0; }
.cn-v3.page-kontakt .v3-support-sec { padding-top: 8rem; }
/* Rolig cyan startkant over h1 (speiler .page-om-oss): gir øyet et anker under
   den faste headeren uten å re-aktivere den globalt skjulte eyebrow-pillen. */
.cn-v3.page-kontakt .v3-support-sec .v3-section-head::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin: 0 auto 1.4rem;
  border-radius: var(--v3-r-pill);
  background: var(--v3-cyan);
}
/* h1 fanges ikke av .v3-section-head h2-reglene → egen skala + dark-on-light. */
.cn-v3.page-kontakt .v3-support-sec .v3-section-head h1 {
  font-size: clamp(2.4rem, 5vw, 3.9rem);
  margin: 0 0 1rem;
  color: var(--ph-ink);
}
.cn-v3 .v3-support-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  max-width: 640px;
  margin: 0 auto;
}

/* Seksjon 2: skjemaet alene i en sentrert kolonne (kontaktkortene er flyttet). */
.cn-v3 .v3-contact-form-wrap { max-width: 640px; margin: 0 auto; }

/* Honeypot mot spam (Formspree _gotcha): aldri synlig eller fokuserbart. */
.cn-v3 .v3-hp { display: none; }

/* Manuell e-post-fallback under skjemaet (på lyst lerret → ph-tokens). */
.cn-v3 .v3-form-alt {
  max-width: 640px;
  margin: 1.3rem auto 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--ph-muted);
}
.cn-v3 .v3-form-alt a { color: var(--ph-teal); font-weight: 600; }
.cn-v3 .v3-form-alt a:hover { color: var(--ph-ink); }
.cn-v3 .v3-form-alt[hidden] { display: none; }

/* Feiltilstand ved mislykket innsending (inne i det mørke skjema-kortet → lyse
   tekst-tokens). Bruker danger-familien (--v3-danger-soft/-line), samme røde som
   :user-invalid lenger opp. */
.cn-v3 .v3-form-error {
  margin: 1.2rem 0 0;
  padding: 0.85rem 1.05rem;
  border-radius: var(--v3-r-md);
  background: var(--v3-danger-soft);
  border: 1px solid var(--v3-danger-line);
  color: var(--v3-text-strong);
  font-size: 0.9rem;
  line-height: 1.5;
}
.cn-v3 .v3-form-error a { color: var(--v3-cyan); font-weight: 600; }
.cn-v3 .v3-form-error[hidden] { display: none; }

/* ── Verdi-kort (gjenbruker .v3-why-grid/.v3-why-card-uttrykket) ── */
.cn-v3 .v3-values { padding: var(--v3-sp-12) 0; }

/* ═══════════════════════════════════════
   RESPONSIV (bolk B)
═══════════════════════════════════════ */
@media (max-width: 1024px) {
  .cn-v3 .v3-plans { grid-template-columns: 1fr; max-width: 460px; }
  .cn-v3 .v3-calc { grid-template-columns: 1fr; max-width: 560px; }
}

@media (max-width: 768px) {
  .cn-v3 .v3-form-row.two { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .cn-v3 .v3-form { padding: 1.5rem; }
  .cn-v3 .v3-calc-panel,
  .cn-v3 .v3-calc-result { padding: 1.5rem; }
  .cn-v3 .v3-plan { padding: 1.7rem 1.5rem; }
  .cn-v3 .v3-calc-cta-row .v3-btn { flex: 1 1 auto; }
  .cn-v3 .v3-support-cards { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   LEGAL-SIDER (bolk C — personvern / vilkår / cookies)
   Juridiske utkast-dokumenter. Rolig, smal tekstkolonne i mørkt
   tema, høy lesbarhet (AA på all brødtekst), tydelige ankre.
   Behersket eleganse: ingen dekor-støy, ingen marquee, ingen orb.
   Alt scoped under .cn-v3, additivt.
═══════════════════════════════════════════════════════════════ */

/* ── Legal-layout: smal, rolig tekstkolonne ── */
.cn-v3 .v3-legal { padding: 2.4rem 0 4.5rem; }
.cn-v3 .v3-legal-inner {
  max-width: 760px;            /* ~70ch ved 1rem body */
  margin: 0 auto;
}

/* Hode: tittel + ingress + sist oppdatert */
.cn-v3 .v3-legal-head { margin-bottom: 2.6rem; }
.cn-v3 .v3-legal-head h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.2rem);
  letter-spacing: -0.04em;
  margin-bottom: 1.1rem;
}
.cn-v3 .v3-legal-lead {
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--v3-text);
  max-width: 60ch;
  margin-bottom: 1rem;
  text-wrap: pretty;
}
.cn-v3 .v3-legal-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--v3-text-faint);
  padding: 0.4rem 0.9rem;
  border-radius: var(--v3-r-pill);
  border: 1px solid var(--v3-line);
  background: rgba(150, 180, 230, 0.04);
}
/* Foreløpig-forbehold: lavmælt, alltid synlig fotnote ved dokumenthodet.
   Utfyller forbehold-modalen (som kun vises én gang + krever JS). Bevisst
   IKKE amber-banner — rolig, dempet tekst. */
.cn-v3 .v3-legal-disclaimer {
  margin: 0.85rem 0 0;
  max-width: 60ch;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--v3-text-faint);
}

/* Brødtekst: rolig rytme, god linjehøyde, AA-kontrast (--v3-text). */
.cn-v3 .v3-legal-body { color: var(--v3-text); }
.cn-v3 .v3-legal-body h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  letter-spacing: -0.03em;
  margin: 3rem 0 1rem;
  padding-top: 0.2rem;
}
.cn-v3 .v3-legal-body h2:first-of-type { margin-top: 2.2rem; }
.cn-v3 .v3-legal-body h3 {
  font-size: 1.1rem;
  color: var(--v3-text-strong);
  letter-spacing: -0.02em;
  margin: 1.9rem 0 0.65rem;
}
.cn-v3 .v3-legal-body p {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--v3-text);
  max-width: 64ch;
  margin-bottom: 1.15rem;
  text-wrap: pretty;
}
.cn-v3 .v3-legal-body ul {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  max-width: 64ch;
}
.cn-v3 .v3-legal-body ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.7rem;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--v3-text);
}
.cn-v3 .v3-legal-body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--v3-cyan);
  box-shadow: 0 0 8px -1px var(--v3-cyan);
}
.cn-v3 .v3-legal-body strong { color: var(--v3-text-strong); font-weight: 600; }
.cn-v3 .v3-legal-body a {
  color: var(--v3-cyan);
  text-decoration: underline;
  text-decoration-color: var(--v3-cyan-line);
  text-underline-offset: 3px;
  transition: text-decoration-color 150ms var(--v3-ease);
}
.cn-v3 .v3-legal-body a:hover { text-decoration-color: var(--v3-cyan); }

/* Ankerforskyvning så den faste headeren (≈99px desktop / ≈77px mobil) ikke
   dekker overskriften ved TOC-hopp. 116px gir headeren klaring + litt luft. */
.cn-v3 .v3-legal-body h2[id],
.cn-v3 .v3-legal-body h3[id] { scroll-margin-top: 116px; }

/* ── Innholdsfortegnelse (TOC) som v3-komponent ── */
.cn-v3 .v3-legal-toc {
  margin: 0 0 2.8rem;
  padding: 1.6rem 1.8rem;
  border-radius: var(--v3-r-md);
  border: 1px solid var(--v3-line);
  background: var(--v3-surface);
  box-shadow: var(--v3-shadow-soft);
}
.cn-v3 .v3-legal-body .v3-legal-toc h2 {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--v3-text-faint);
  margin: 0 0 1rem;
  padding: 0;
}
.cn-v3 .v3-legal-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
}
.cn-v3 .v3-legal-toc li { padding: 0; margin: 0; }
.cn-v3 .v3-legal-toc li::before { content: none; }
.cn-v3 .v3-legal-toc a {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--v3-r-sm);
  color: var(--v3-text-muted);
  font-size: 0.96rem;
  text-decoration: none;
  transition: color 150ms var(--v3-ease), background 150ms var(--v3-ease);
}
.cn-v3 .v3-legal-toc a:hover {
  color: var(--v3-text-strong);
  background: rgba(150, 180, 230, 0.06);
}
.cn-v3 .v3-legal-toc a::before {
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 1px;
  align-self: center;
  background: var(--v3-line-strong);
  transition: background 150ms var(--v3-ease), width 150ms var(--v3-ease);
}
.cn-v3 .v3-legal-toc a:hover::before { background: var(--v3-cyan); width: 20px; }

/* ── Kontakt-/info-boks i juridisk tekst ── */
.cn-v3 .v3-legal-callout {
  margin: 1.4rem 0 1.6rem;
  padding: 1.3rem 1.5rem;
  border-radius: var(--v3-r-md);
  border: 1px solid var(--v3-line);
  border-left: 1px solid var(--v3-line);
  background: var(--v3-bg-2);
}
.cn-v3 .v3-legal-callout p {
  margin: 0;
  line-height: 1.85;
  color: var(--v3-text);
}

/* ── Responsiv (legal) ── */
@media (max-width: 600px) {
  .cn-v3 .v3-legal { padding: 1.6rem 0 3.5rem; }
  .cn-v3 .v3-legal-toc { padding: 1.3rem 1.3rem; }
  .cn-v3 .v3-legal-callout { padding: 1.1rem 1.2rem; }
}

/* ═══════════════════════════════════════
   JURIDISK FORBEHOLD-MODAL (kun personvern + vilkår)
   Vises én gang per nettleser (localStorage «cn-legal-disclaimer-ack»).
   Skjult i markup → uten JS ingen blokkerende overlay.
═══════════════════════════════════════ */
.cn-v3 .cn-legal-modal {
  position: fixed;
  inset: 0;
  z-index: 200;                 /* over cookie-banner (120) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--v3-glass-deep);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  animation: cn-legal-modal-fade 260ms var(--v3-ease) both;
}
.cn-v3 .cn-legal-modal[hidden] { display: none; }

.cn-v3 .cn-legal-modal-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  padding: 2.3rem 2.2rem 1.9rem;
  border-radius: var(--v3-r-lg);
  background: linear-gradient(180deg, var(--v3-surface) 0%, var(--v3-ink) 100%);
  border: 1px solid var(--v3-line-strong);
  box-shadow: var(--v3-shadow), 0 0 0 1px color-mix(in oklch, var(--v3-cyan) 5%, transparent);
  max-height: calc(100dvh - 3rem);   /* mot klipping ved zoom / landskap */
  overflow-y: auto;
  animation: cn-legal-modal-rise 340ms var(--v3-ease) both;
}

.cn-v3 .cn-legal-modal-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--v3-r-pill);
  border: 1px solid var(--v3-line);
  background: transparent;
  color: var(--v3-text-muted);
  cursor: pointer;
  transition: color 200ms var(--v3-ease), background 200ms var(--v3-ease),
              border-color 200ms var(--v3-ease);
}
.cn-v3 .cn-legal-modal-close:hover {
  color: var(--v3-text-strong);
  background: var(--v3-line);
  border-color: var(--v3-line-strong);
}
.cn-v3 .cn-legal-modal-close svg { width: 17px; height: 17px; }
.cn-v3 .cn-legal-modal-close:focus-visible { outline: 2px solid var(--v3-cyan); outline-offset: 2px; }

.cn-v3 .cn-legal-modal-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--v3-r-pill);
  background: var(--v3-warn-soft);
  border: 1px solid var(--v3-warn-line);
  color: var(--v3-warn);
  margin-bottom: 1.15rem;
}
.cn-v3 .cn-legal-modal-mark svg { width: 22px; height: 22px; }

.cn-v3 .cn-legal-modal-title {
  margin: 0 0 0.9rem;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--v3-text-strong);
}
.cn-v3 .cn-legal-modal-desc p {
  margin: 0 0 0.9rem;
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--v3-text);
  max-width: none;
}
.cn-v3 .cn-legal-modal-desc p:last-child { margin-bottom: 0; }

.cn-v3 .cn-legal-modal-actions {
  margin-top: 1.7rem;
  display: flex;
  justify-content: flex-end;
}
.cn-v3 .cn-legal-modal-ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.72rem 1.7rem;
  border-radius: var(--v3-r-pill);
  border: none;
  background: var(--v3-grad-primary);
  color: var(--v3-on-accent);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 200ms var(--v3-ease), box-shadow 280ms var(--v3-ease);
}
.cn-v3 .cn-legal-modal-ok:hover { transform: translateY(-1px); box-shadow: var(--v3-glow-cyan); }
.cn-v3 .cn-legal-modal-ok:active { transform: translateY(0); }
.cn-v3 .cn-legal-modal-ok:focus-visible { outline: 2px solid var(--v3-cyan); outline-offset: 3px; }

@keyframes cn-legal-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes cn-legal-modal-rise {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 600px) {
  .cn-v3 .cn-legal-modal { padding: 1rem; }
  .cn-v3 .cn-legal-modal-card { padding: 1.9rem 1.5rem 1.6rem; }
  .cn-v3 .cn-legal-modal-title { font-size: 1.35rem; }
  /* Touch-mål ≥ 44×44 på mobil (SVG-ikonet forblir lite) */
  .cn-v3 .cn-legal-modal-close { width: 44px; height: 44px; }
  .cn-v3 .cn-legal-modal-ok { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .cn-v3 .cn-legal-modal,
  .cn-v3 .cn-legal-modal-card { animation: none; }
  .cn-v3 .cn-legal-modal-ok { transition: none; }
}

/* ═══════════════════════════════════════
   REDUCED-MOTION — innhold alltid synlig og lesbart
═══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .cn-v3 .v3-reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .cn-v3 .v3-grid-ai { opacity: 1; transform: none; }
  .cn-v3 .v3-cell.is-filled { transition: none; }
  .cn-v3 .faq-a { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   LYST LERRET  (Fase 2 — gjelder ALLE .cn-v3-sider)
   ───────────────────────────────────────────────────────────────
   Fase 1 scopet dette til .cn-v3.page-home. Fase 2 løfter de DELTE
   lerret-/tekst-tokenene + generiske prosa-reglene opp til .cn-v3 så
   ALLE 10 sidene deler samme lyse uttrykk. Det FORSIDE-spesifikke
   (video-hero, tjeneste-split) beholdes under .cn-v3.page-home lenger
   ned, og de subside-spesifikke prosa-flatene re-tunes i egen bolk.
   Mekanismen:
   • .cn-v3-tokenene + canvas-bg/color settes her, SENERE i fila enn de
     mørke .cn-v3-basisreglene (samme spesifisitet → cascade-vinner).
   • Lyst lerret + dark-on-light brødtekst på de ÅPNE prosa-flatene.
   • Header, footer og alle KORT/PRODUKTRAMMER forblir MØRKE «øyer».
     Kortene har alt egne mørke bakgrunner i v3 (gradient surface→ink),
     så de re-tunes ikke; vi demper bare glød/skygge for lyst, og lar
     kort-intern tekst beholde de lyse v3-tokenene (light-on-dark).
   • .v3-dark = eksplisitt mørk øy (sikrer egen background+color, ikke
     bare token-arv → unngår glass-lekkasje fra lerretet under).
   Lyse tokens: lerret #F4F7FB, ink #1B2740 (mørk tekst, 12.6:1 mot
   lerret), muted #46546F (7.0:1 mot lerret = AA), aksent-på-lys teal
   #05696A (6.4:1 mot lerret = AA, fra gammelt lyst palett for
   merkevarekonsistens med React-appene).
═══════════════════════════════════════════════════════════════ */
.cn-v3 {
  --ph-canvas: #f4f7fb;
  --ph-canvas-2: #eaf0f8;
  --ph-ink: #1b2740;           /* mørk overskrift på lyst */
  --ph-body: #34415c;          /* mørk brødtekst, 9.1:1 mot lerret */
  --ph-muted: #46546f;         /* dempet, 7.0:1 mot lerret = AA */
  --ph-faint: #5c6a85;         /* faint men ≥ AA 4.5:1 (5.0:1) */
  --ph-teal: #05696a;          /* aksent-på-lys, AA (6.4:1) */
  --ph-teal-pale: #d7ebe8;     /* pale teal-flate til mørk-på-lys-brikke (.report) */
  --ph-teal-line: rgba(5, 105, 106, 0.55);  /* teal hårkant @ 55 % (.report) */
  --ph-line: rgba(27, 39, 64, 0.16);
  --ph-line-strong: rgba(27, 39, 64, 0.22);

  /* Lyse skygge-tokens (Bolk A): navy-tintet ambient skygge for flater som
     hviler PÅ det lyse lerretet (kort/paneler — også de mørke øyene, som
     fortsatt kaster skygge NED på det lyse lerretet under seg). Erstatter de
     sorte --v3-shadow*-skyggene som var laget for den mørke scenen og fikk
     kortene til å se «limt på» ut. -soft = hvile, den tyngre for løft/hover. */
  --ph-shadow-soft: 0 1px 2px rgba(16, 28, 56, 0.06), 0 12px 28px -10px rgba(16, 28, 56, 0.16);
  --ph-shadow: 0 2px 4px rgba(16, 28, 56, 0.07), 0 24px 48px -16px rgba(16, 28, 56, 0.22);

  background: var(--ph-canvas);
  color: var(--ph-body);
}
/* Lerret-atmosfære: rolig lys vertikal gradient i stedet for mørk.
   Bruker samme #ph-canvas så ingen synlig søm mot seksjonsflatene. */
.cn-v3 .cn-v3-atmos {
  background: linear-gradient(180deg, var(--ph-canvas-2) 0%, var(--ph-canvas) 34%, var(--ph-canvas) 100%);
}
/* A2: subtil grain over gradienten så lerretet ikke leser som flatt papir.
   Statisk SVG fractalNoise (ingen reduced-motion-konflikt), holdt så lavt
   (opacity ~0.03 + multiply) at det aldri leses som mønster — kun bryter
   flatheten. Eget ::after-lag så det kan bære egen opacity/blend uten å
   påvirke gradient-bunnlaget. */
.cn-v3 .cn-v3-atmos::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.03;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Overskrifter + åpen prosa på lerretet → mørk (delt mellom alle sider) ── */
.cn-v3 .v3-section-head h2,
.cn-v3 .v3-build-copy h2 { color: var(--ph-ink); }
.cn-v3 .v3-section-head p { color: var(--ph-muted); }
.cn-v3 .v3-build-lead { color: var(--ph-body); }
.cn-v3 .v3-build-principle { color: var(--ph-ink); }
.cn-v3 .v3-build-principle b { color: var(--ph-teal); }
.cn-v3 .v3-build-principle::before { background: linear-gradient(90deg, var(--ph-teal), transparent); }
/* Aksent-ord i seksjonshoder (To tjenester … lykkes digitalt) → teal-på-lys */
.cn-v3 .v3-section-head .v3-accent { color: var(--ph-teal); text-shadow: none; }

/* Fakta- og integrasjons-tekst som ligger DIREKTE på lerretet (ikke i kort) */
.cn-v3 .v3-facts-foot { color: var(--ph-muted); }
.cn-v3 .v3-facts-foot a { color: var(--ph-teal); }
.cn-v3 .v3-facts-foot a:hover { color: var(--ph-ink); }
.cn-v3 .v3-integr-label { color: var(--ph-faint); }
.cn-v3 .v3-integr-note { color: var(--ph-faint); }

/* Ghost-knapp re-tunes for lyst lerret (mørk kant + mørk tekst) der den
   står på lerretet. På den mørke video-heroen beholder den lys variant
   (egen regel under .v3-hero-video). */
.cn-v3 .v3-services .v3-btn-ghost,
.cn-v3 .v3-service-actions .v3-btn-ghost,
.cn-v3 .v3-subhero-cta .v3-btn-ghost,
.cn-v3 .v3-feature-copy .v3-btn-ghost,
.cn-v3 .v3-compare-foot .v3-btn-ghost,
.cn-v3 .v3-calc-cta-row .v3-btn-ghost {
  background: rgba(27, 39, 64, 0.04);
  color: var(--ph-ink);
  border-color: var(--ph-line);
  backdrop-filter: none;
}
.cn-v3 .v3-services .v3-btn-ghost:hover,
.cn-v3 .v3-service-actions .v3-btn-ghost:hover,
.cn-v3 .v3-subhero-cta .v3-btn-ghost:hover,
.cn-v3 .v3-feature-copy .v3-btn-ghost:hover,
.cn-v3 .v3-compare-foot .v3-btn-ghost:hover,
.cn-v3 .v3-calc-cta-row .v3-btn-ghost:hover {
  background: rgba(27, 39, 64, 0.07);
  border-color: rgba(5, 105, 106, 0.5);
}
/* Ghost-pilen i knapp-i-knapp blir lys-på-lys → mørk tint på lerret-ghost */
.cn-v3 .v3-services .v3-btn-ghost .v3-btn-ico,
.cn-v3 .v3-service-actions .v3-btn-ghost .v3-btn-ico,
.cn-v3 .v3-subhero-cta .v3-btn-ghost .v3-btn-ico,
.cn-v3 .v3-feature-copy .v3-btn-ghost .v3-btn-ico,
.cn-v3 .v3-compare-foot .v3-btn-ghost .v3-btn-ico,
.cn-v3 .v3-calc-cta-row .v3-btn-ghost .v3-btn-ico { background: rgba(27, 39, 64, 0.08); }

/* Bro-glød (Bolk A4): hentet cyan-gnisten tilbake på det lyse lerretet —
   en svak brand-cyan radial som leser som lyssøm mellom seksjonene, pluss
   en hårfin parallell navy-lineær for en mykt skygge-søm under. Holdt lavt
   nok til at lerretet forblir rolig. */
.cn-v3 .v3-bridge::before {
  background:
    radial-gradient(70% 100% at 50% 50%, rgba(0, 227, 227, 0.10), transparent 72%),
    linear-gradient(180deg, rgba(27, 39, 64, 0.025), transparent);
}

/* ── EYEBROWS: skjules visuelt på ALLE sider (Fase 3) ──
   Beholder funksjonelle smålabels (v3-fact-label, v3-route-pill,
   v3-integr-label, v3-brand-tag, pris-labels) — kun .v3-eyebrow gjemmes. */
.cn-v3 .v3-eyebrow { display: none; }
/* Når eyebrow er borte: gjenopprett toppmarg på hodene den satt over. */
.cn-v3 .v3-section-head h2 { margin-top: 0; }

/* ═══════════════════════════════════════════════════════════════
   BOLK A — DYBDE / LYS / BRAND PÅ LERRETET
   ───────────────────────────────────────────────────────────────
   Mørk-scene-skyggene (--v3-shadow*, sort-alfa) ble gjenbrukt rått på
   det LYSE lerretet → kort/paneler så «limt på» ut. Her byttes basis-
   skyggen til de navy-tintede --ph-shadow*-tokenene (skyggen kastes NED
   på det lyse lerretet, så den skal være lys/navy, ikke sort). Eventuelle
   cyan-glød-ledd beholdes. Header/footer og genuint mørke kontekster
   bruker IKKE disse selektorene → deres --v3-shadow* står urørt.
   Disse reglene ligger SENERE i fila enn kort-basisreglene (samme
   spesifisitet → cascade-vinner), uten !important.
═══════════════════════════════════════════════════════════════ */

/* ── A1: lys basisskygge på hvile (kort/paneler som hviler på lerretet) ── */
.cn-v3 .v3-fact,
.cn-v3 .v3-fp-step,
.cn-v3 .v3-pillar,
.cn-v3 .v3-why-card,
.cn-v3 .v3-svc-card,
.cn-v3 .v3-calc-panel,
.cn-v3 .v3-form,
.cn-v3 .v3-brand {
  box-shadow: var(--ph-shadow-soft);
}
/* .v3-plan: hvile lys; løftet/anbefalt + hover beholder cyan-glød-leddet
   men bytter sort basis → ph-skygge. */
.cn-v3 .v3-plan { box-shadow: var(--ph-shadow-soft); }
.cn-v3 .v3-plan-best {
  box-shadow: var(--ph-shadow), 0 0 60px -28px rgba(0, 227, 227, 0.4);
}
.cn-v3 .v3-plan:hover {
  box-shadow: var(--ph-shadow), 0 18px 50px -28px rgba(0, 227, 227, 0.35);
}
.cn-v3 .v3-brand:hover {
  box-shadow: var(--ph-shadow), 0 14px 40px -20px rgba(0, 227, 227, 0.4);
}
/* Finale-kortet er løftet og bærer cyan-glød: tyngre ph-skygge + glød. */
.cn-v3 .v3-finale-card {
  box-shadow: var(--ph-shadow), 0 0 90px -40px rgba(0, 227, 227, 0.4);
}

/* ── A3: brand-cyan tilbake på DEKOR (ikke tekst) ──
   Tekst-lenker forblir --ph-teal (AA). Cyan kun der lesbarhet ikke er et
   krav: kort-topplinjer, enhets-suffiks, sjekkliste-prikk-glød. */
.cn-v3 .v3-fact-num .u { color: var(--v3-cyan); }
.cn-v3 .v3-pillar::before,
.cn-v3 .v3-why-card::before,
.cn-v3 .v3-plan::before {
  background: linear-gradient(90deg, transparent, var(--v3-cyan), transparent);
  opacity: 0.7;
}
.cn-v3 .v3-checklist li::before {
  box-shadow: 0 0 0 1px rgba(0, 227, 227, 0.08), 0 0 10px -2px rgba(0, 227, 227, 0.35);
}

/* ── A4: ::selection (gnist) ── */
.cn-v3 ::selection { background: rgba(0, 227, 227, 0.22); color: var(--ph-ink); }
.cn-v3 .v3-dark ::selection,
.site-header ::selection,
.site-footer ::selection,
.cn-v3 .v3-pillar ::selection,
.cn-v3 .v3-plan ::selection,
.cn-v3 .v3-why-card ::selection,
.cn-v3 .v3-form ::selection {
  background: rgba(0, 227, 227, 0.28);
  color: var(--v3-text-strong);
}

/* ── A5: mørke øyer svever rent over lerretet ──
   DF-9 harmonisering av web- og telefon-rammer + lys ring rundt mørk-øy-
   rammene så de leser som løftet hardware, ikke utklipp.
   Bolk C / HERO-3: sterkere topp-høylys (inset) + den tofargede ph-skyggen
   så web-rammen leser som løftet maskinvare med en glass-glint på toppkanten,
   uten å beskjære skjermbildet. */
.cn-v3 .v3-frame {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    var(--ph-shadow-soft),
    var(--ph-shadow),
    0 0 0 1px rgba(0, 227, 227, 0.06);
}
/* HERO-3: hårfin «chrome»-glint på toppkanten av web-rammen. Translucent
   sheen (~34px) lagt OVER toppen som innramming, ikke en opak bar — den
   demper raskt til transparent så skjermbildet under forblir helt synlig.
   z-index 2 holder den over img (img er pointer-events:none-nøytral) men
   under interaktive lag. Telefonrammene har egen bezel → ikke berørt. */
.cn-v3 .v3-frame-web::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 34px;
  z-index: 2;
  pointer-events: none;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 45%, transparent 100%);
}
.cn-v3 .v3-frame-phone {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.4),
    var(--ph-shadow-soft),
    0 0 48px -15px rgba(0, 227, 227, 0.3);
}
/* DF-4: «dynamic island»-pille på telefonrammene → leser som ekte enhet,
   ikke en tom firkant. Lagt på RAMMEN (alle phone-rammer har position:
   relative), z-index 2 over skjermbildet, sentrert nær toppen. */
.cn-v3 .v3-frame-phone::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 5px;
  border-radius: var(--v3-r-pill);
  background: rgba(4, 9, 18, 0.9);
  z-index: 2;
  pointer-events: none;
}
/* Forsidens mørke produkt-øyer (.v3-service-media .v3-frame*.v3-dark) får
   sin lys-ring + ph-skygge på sine egne, mer spesifikke regler lenger ned
   i fila (de re-asserterer også bakgrunn/farge), så de slås IKKE sammen hit. */

/* LIGHT-2: integrasjons-merkene + merkemerket ── */
.cn-v3 .v3-brand-mark {
  box-shadow: inset 0 0 0 1px var(--v3-cyan-line), 0 0 16px -8px rgba(0, 227, 227, 0.5);
}

/* ═══════════════════════════════════════════════════════════════
   LYST LERRET — UNDERSIDE-PROSA  (Fase 2, KUN .cn-v3:not(.page-home))
   ───────────────────────────────────────────────────────────────
   Åpne prosa-flater som finnes på de 9 undersidene (ikke på forsiden,
   som har egen video-hero/split). Headinger og brødtekst som ligger
   DIREKTE på lerretet → mørk-på-lys. Kort/produktrammer er allerede
   mørke øyer og rører vi ikke (intern tekst blir lys-på-mørk).
   :not(.page-home) hindrer at disse rør forsiden.
═══════════════════════════════════════════════════════════════ */

/* Header som mørk øy: på undersider ligger den (ikke-scrollet) over det
   LYSE lerretet, ikke en mørk hero. Gi den solid mørk bakgrunn så lys
   nav-tekst alltid har AA-kontrast (= header «forblir mørk på alle sider»).
   Bakgrunnen ligger på ::before (z-index:-1) — se style.css HEADER-blokk. */
.cn-v3:not(.page-home) .site-header::before {
  background: var(--v3-bg);
  border-bottom: 1px solid var(--v3-line);
}
.cn-v3:not(.page-home) .site-header.scrolled::before {
  background: var(--v3-glass);
  border-bottom: 1px solid var(--v3-line);
}

/* Brødsmuler + plattform-piller på lerret → mørk-på-lys */
.cn-v3:not(.page-home) .v3-crumbs ol { color: var(--ph-faint); }
.cn-v3:not(.page-home) .v3-crumbs li:not(:last-child)::after {
  border-right-color: var(--ph-faint);
  border-bottom-color: var(--ph-faint);
}
.cn-v3:not(.page-home) .v3-crumbs a { color: var(--ph-muted); }
.cn-v3:not(.page-home) .v3-crumbs a:hover { color: var(--ph-teal); }
.cn-v3:not(.page-home) .v3-crumbs [aria-current="page"] { color: var(--ph-ink); }
.cn-v3:not(.page-home) .v3-platform {
  color: var(--ph-muted);
  background: rgba(27, 39, 64, 0.04);
  border-color: var(--ph-line);
}

/* Sub-hero (alle prosa-undersider) */
.cn-v3:not(.page-home) .v3-subhero-title { color: var(--ph-ink); }
.cn-v3:not(.page-home) .v3-subhero-title .v3-accent { color: var(--ph-teal); text-shadow: none; }
.cn-v3:not(.page-home) .v3-subhero-sub { color: var(--ph-body); }

/* Hopp-nav som lys glass-stripe over lerret */
.cn-v3:not(.page-home) .v3-jump {
  background: rgba(244, 247, 251, 0.82);
  border-top: 1px solid var(--ph-line);
  border-bottom: 1px solid var(--ph-line);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cn-v3:not(.page-home) .v3-jump { background: var(--ph-canvas); }
}
.cn-v3:not(.page-home) .v3-jump-label { color: var(--ph-faint); }
.cn-v3:not(.page-home) .v3-jump-link { color: var(--ph-muted); }
.cn-v3:not(.page-home) .v3-jump-link:hover { color: var(--ph-ink); background: rgba(27, 39, 64, 0.05); }
.cn-v3:not(.page-home) .v3-jump-link[aria-current="true"] {
  color: var(--ph-teal);
  background: rgba(5, 105, 106, 0.08);
  border-color: rgba(5, 105, 106, 0.3);
}

/* Feature-rad (tjenester): kopi på lerret */
.cn-v3:not(.page-home) .v3-feature-copy h2 { color: var(--ph-ink); }
.cn-v3:not(.page-home) .v3-feature-copy h2 .v3-accent { color: var(--ph-teal); text-shadow: none; }
.cn-v3:not(.page-home) .v3-feature-lead { color: var(--ph-body); }
.cn-v3:not(.page-home) .v3-checklist li { color: var(--ph-body); }
.cn-v3:not(.page-home) .v3-steps li { color: var(--ph-body); }
/* Steg-nummer-sirkel på lerret: teal-på-blekteal (AA), speiler hopp-lenke-active.
   Den mørke-øy-defaulten (cyan-på-blekcyan) drukner på det lyse lerretet. */
.cn-v3:not(.page-home) .v3-steps li::before {
  color: var(--ph-teal);
  background: rgba(5, 105, 106, 0.08);
  border-color: rgba(5, 105, 106, 0.3);
}

/* Pilarer på lerret (tjenester) — KORTET (.v3-pillar) er en
   mørk øy og rører vi ikke. Rute-pillene under pilar C ligger inni kortet,
   så de beholder mørk look. Kun evt. åpen pilar-prosa berøres ikke (alt er
   inni kortene), så ingen ekstra regler trengs her. */

/* Sammenlign-/pristabell-fot på lerret */
.cn-v3:not(.page-home) .v3-compare-foot p { color: var(--ph-muted); }
.cn-v3:not(.page-home) .v3-plantable-foot { color: var(--ph-muted); }
.cn-v3:not(.page-home) .v3-plantable-foot a { color: var(--ph-teal); }
.cn-v3:not(.page-home) .v3-plantable-foot a:hover { color: var(--ph-ink); }

/* Pris-kalkulator-note + tom-tilstand ligger inni mørke kort → urørt.
   Men kalkulatorens sekundær-tekst som lekker ut på lerret finnes ikke;
   alt ligger i .v3-calc-panel/.v3-calc-result (mørke øyer). */

/* Legal-sider: tittel + brødtekst + lister ligger DIREKTE på lerret → mørk.
   TOC/callout/draft-note/[FYLL INN] er egne bokser (TOC+callout = mørke
   øyer, draft-note+fill = amber) og bevares ORDRETT — kun amber dempes ikke. */
.cn-v3:not(.page-home) .v3-legal-head h1 { color: var(--ph-ink); }
.cn-v3:not(.page-home) .v3-legal-lead { color: var(--ph-body); }
.cn-v3:not(.page-home) .v3-legal-meta {
  color: var(--ph-faint);
  border-color: var(--ph-line);
  background: rgba(27, 39, 64, 0.03);
}
.cn-v3:not(.page-home) .v3-legal-disclaimer { color: var(--ph-faint); }
.cn-v3:not(.page-home) .v3-legal-body { color: var(--ph-body); }
.cn-v3:not(.page-home) .v3-legal-body h2 { color: var(--ph-ink); }
.cn-v3:not(.page-home) .v3-legal-body h3 { color: var(--ph-ink); }
.cn-v3:not(.page-home) .v3-legal-body p { color: var(--ph-body); }
.cn-v3:not(.page-home) .v3-legal-body ul li { color: var(--ph-body); }
.cn-v3:not(.page-home) .v3-legal-body strong { color: var(--ph-ink); }
.cn-v3:not(.page-home) .v3-legal-body a { color: var(--ph-teal); text-decoration-color: rgba(5, 105, 106, 0.4); }
.cn-v3:not(.page-home) .v3-legal-body a:hover { text-decoration-color: var(--ph-teal); }
/* Listeprikken (cyan-glød) blir grell på lyst → rolig teal uten glød */
.cn-v3:not(.page-home) .v3-legal-body ul li::before { background: var(--ph-teal); box-shadow: none; }

/* Generisk: åpne v3-link på lerret (utenfor mørke kort) → teal. Lenker INNE
   i mørke kort (.v3-frame/.v3-mock/.v3-pillar/.v3-plan/.v3-calc/.v3-form/
   .v3-contact-card/.v3-legal-toc/.v3-legal-callout) beholder cyan. */
.cn-v3:not(.page-home) .v3-feature-copy .v3-link,
.cn-v3:not(.page-home) .v3-subhero-copy .v3-link { color: var(--ph-teal); }
.cn-v3:not(.page-home) .v3-feature-copy .v3-link:hover,
.cn-v3:not(.page-home) .v3-subhero-copy .v3-link:hover { color: var(--ph-ink); }

/* ── MØRKE ØYER I LEGAL-PROSA: re-assert lys tekst + cyan-aksent ──
   TOC og callout er mørke øyer (egne mørke bakgrunner: #16213a / #0c1424)
   nestet INNI .v3-legal-body. Prosa-mørkningen over (h2/a/li/li::before →
   --ph-ink/--ph-teal) lekket derfor inn og ga mørk-på-mørk overskrift
   (1.07:1) + svak teal-på-mørk lenke (2.46:1). Her gjenopprettes øyenes
   tiltenkte light-on-dark + cyan, med høyere spesifisitet enn prosareglene
   (3 klasser + element) OG senere i fila, så de vinner cascaden trygt. */
.cn-v3:not(.page-home) .v3-legal-body .v3-legal-toc h2 { color: var(--v3-text-faint); }
.cn-v3:not(.page-home) .v3-legal-body .v3-legal-toc a {
  color: var(--v3-text-muted);
  text-decoration-color: transparent;
}
.cn-v3:not(.page-home) .v3-legal-body .v3-legal-toc a:hover {
  color: var(--v3-text-strong);
  text-decoration-color: transparent;
}
.cn-v3:not(.page-home) .v3-legal-body .v3-legal-toc li::before { content: none; }
/* Callout: mørk øy (#0c1424). Prosa-regelen .v3-legal-body p (0,4,1) slo
   den eksisterende .v3-legal-callout p (0,3,1) → brødteksten ble mørk på
   mørk (1.8:1). Re-assert lys tekst + lys strong, og cyan-på-mørk for
   eventuelle lenker (ikke teal-på-lys). */
.cn-v3:not(.page-home) .v3-legal-body .v3-legal-callout p { color: var(--v3-text); }
.cn-v3:not(.page-home) .v3-legal-body .v3-legal-callout strong { color: var(--v3-text-strong); }
.cn-v3:not(.page-home) .v3-legal-body .v3-legal-callout a {
  color: var(--v3-cyan);
  text-decoration-color: rgba(0, 227, 227, 0.4);
}
.cn-v3:not(.page-home) .v3-legal-body .v3-legal-callout a:hover {
  text-decoration-color: var(--v3-cyan);
}

/* ── Cookie-/informasjonskapsel-tabell (lyst legal-tema) ──
   Skannbar oversikt over informasjonskapslene nettsiden bruker. Ligger på det
   lyse legal-lerretet (--ph-*). Wrapper scroller horisontalt på smal skjerm
   i stedet for å klemme de fem kolonnene. */
.cn-v3 .v3-legal-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
  color: var(--ph-ink);
  background: rgba(27, 39, 64, 0.06);
  padding: 0.12em 0.42em;
  border-radius: 6px;
  white-space: nowrap;
}
.cn-v3 .v3-legal-table-wrap {
  margin: 1.4rem 0 0.9rem;
  border: 1px solid var(--ph-line);
  border-radius: var(--v3-r-md);
  background: #ffffff;
  box-shadow: var(--v3-shadow-soft);
  overflow: hidden;
}
.cn-v3 .v3-legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.cn-v3 .v3-legal-table th,
.cn-v3 .v3-legal-table td {
  padding: 0.85rem 1.05rem;
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
  border-bottom: 1px solid var(--ph-line);
}
.cn-v3 .v3-legal-table thead th {
  background: rgba(27, 39, 64, 0.05);
  color: var(--ph-ink);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.cn-v3 .v3-legal-table tbody td { color: var(--ph-body); }
.cn-v3 .v3-legal-table tbody tr:last-child td { border-bottom: none; }
.cn-v3 .v3-legal-table-note {
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--ph-faint);
  max-width: 64ch;
}
@media (max-width: 640px) {
  .cn-v3 .v3-legal-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cn-v3 .v3-legal-table { min-width: 620px; }
}

/* Bro mellom subside-seksjoner: samme dempede teal-glød som forsiden
   (regelen over treffer alle .cn-v3 .v3-bridge, så ingen ekstra her). */

/* ═══════════════════════════════════════
   FORSIDE — VIDEO-HERO  (mørk, over lerret)
═══════════════════════════════════════ */
.cn-v3.page-home .v3-hero-video {
  position: relative;
  /* Full skjerm-høyde: heroen dekker hele viewporten ved landing slik at
     neste (lyse) seksjon ikke kikker frem før scroll. dvh for mobil-chrome,
     vh som fallback. Topp-padding klarerer den transparente faste headeren. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding: 7rem 0 5rem;
  overflow: hidden;
  isolation: isolate;
  background: var(--v3-bg);   /* mørk fallback bak video / før poster */
}
.cn-v3.page-home .v3-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  pointer-events: none;
}
/* Mørk slør over video → lesbar lys tekst (AA). Symmetrisk midt-vekt +
   vertikal demping slik at den nå SENTRERTE copy-en har jevn kontrast.
   Bolk C / LIGHT-3: senket senter-tyngden (0.82→0.66) så videoen puster mer.
   AA holdes via et smalt mørkere bånd (0.72) bak selve copy-blokken (egen
   .v3-hero-vinner-regel under) + text-shadow på tittel/sub. */
.cn-v3.page-home .v3-hero-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(7, 11, 22, 0.66) 0%, rgba(7, 11, 22, 0.55) 55%, rgba(7, 11, 22, 0.62) 100%),
    linear-gradient(180deg, rgba(7, 11, 22, 0.42) 0%, rgba(7, 11, 22, 0.22) 42%, rgba(7, 11, 22, 0.58) 100%);
}
/* AA-margin: et mykt mørkere midtbånd festet bak copy-blokken (ikke hele
   sløret), så hero-sub holder AA mot den lyseste videoframen uten å tynge
   ned hele scenen. Radialt avtonet → ingen synlig kant. */
.cn-v3.page-home .v3-hero-vinner::before {
  content: "";
  position: absolute;
  inset: -8% -6%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(70% 62% at 50% 50%, rgba(7, 11, 22, 0.42) 0%, rgba(7, 11, 22, 0.20) 60%, transparent 100%);
}
.cn-v3.page-home .v3-hero-vinner {
  position: relative;
  z-index: 1;
  /* Sentrer hero-innholdet horisontalt (vertikalt sentrert via flex på seksjonen) */
  text-align: center;
}
/* Hero-copy på video = lys tekst (mørk scene), aksentord = brand-cyan med glød.
   Strammet 2026-07-20 (brukervalg «Begge»: mindre H1-skrift + smalere kolonne):
   760→640px. Målt trygt: H1-ens bredeste ubrytbare ord («turnusplanlegging,» =
   494px @3.7rem) og trust-radens bredeste rad (584px) får plass uten orddeling
   eller endret wrap. IKKE under ~590px — da brekker trust-raden på nytt. */
.cn-v3.page-home .v3-hero-video .v3-hero-copy {
  max-width: 640px;
  margin-inline: auto;
}
.cn-v3.page-home .v3-hero-video .v3-hero-cta { justify-content: center; }
.cn-v3.page-home .v3-hero-video .v3-hero-trust { justify-content: center; }
.cn-v3.page-home .v3-hero-video .v3-hero-title {
  /* 2026-07-20: senket fra clamp(2.4rem, 5.4vw, 4.3rem) — mer kompakt H1
     (brukervalg). ≤768px styres av media-blokkene lenger ned (urørt). */
  font-size: clamp(2.4rem, 4.7vw, 3.7rem);
  letter-spacing: -0.05em;
  line-height: 1.0;
  margin-bottom: 1.5rem;
  color: var(--v3-text-strong);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4);
  text-wrap: balance;
  /* Lang firenøkkelord-h1 (SEO): la lange sammensatte ord (Turnusplanlegging)
     bryte ved behov, så heroen aldri får horisontal overflow på smale skjermer. */
  overflow-wrap: break-word;
}
.cn-v3.page-home .v3-hero-video .v3-hero-title .v3-accent {
  color: var(--v3-cyan);
  text-shadow: 0 0 40px rgba(0, 227, 227, 0.4);
}
.cn-v3.page-home .v3-hero-video .v3-hero-sub {
  font-size: 1.15rem;
  color: #d3def0;
  max-width: 56ch;
  margin: 0 auto 2.2rem;
  line-height: 1.6;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.45);
  text-wrap: pretty;
}
.cn-v3.page-home .v3-hero-video .v3-hero-trust { color: #b6c4dc; }
.cn-v3.page-home .v3-hero-video .v3-hero-trust svg { color: var(--v3-cyan); }
/* Ghost-knapp på video beholder lys variant (overstyrer lerret-regelen) */
.cn-v3.page-home .v3-hero-video .v3-btn-ghost {
  background: rgba(255, 255, 255, 0.08);
  color: var(--v3-text-strong);
  border-color: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(4px);
}
.cn-v3.page-home .v3-hero-video .v3-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--v3-cyan-line);
}

/* ── HERO-1: la primær-CTA TYDELIG vinne over ghost på video-heroen ──
   Større trykkflate + cyan glød-halo så den leser som det åpenbare neste
   steget; ghost-knappen dempes (lavere bakgrunn/kant) så de to ikke
   konkurrerer. Gjelder KUN video-heroen (page-home), ikke subside-heroer. */
.cn-v3.page-home .v3-hero-video .v3-hero-cta .v3-btn-primary {
  padding: 1.05rem 2rem;
  box-shadow:
    0 16px 44px -14px rgba(0, 227, 227, 0.7),
    0 0 0 1px rgba(0, 227, 227, 0.25),
    0 0 34px -6px rgba(0, 227, 227, 0.45);
}
.cn-v3.page-home .v3-hero-video .v3-hero-cta .v3-btn-primary:hover {
  box-shadow:
    0 22px 60px -14px rgba(0, 227, 227, 0.85),
    0 0 0 1px rgba(0, 227, 227, 0.3),
    0 0 44px -4px rgba(0, 227, 227, 0.55);
}
.cn-v3.page-home .v3-hero-video .v3-hero-cta .v3-btn-ghost {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.16);
}
.cn-v3.page-home .v3-hero-video .v3-hero-cta .v3-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: var(--v3-cyan-line);
}

/* ── HERO-2: tillits-stripe → glass-piller m/ skillere + full cyan hake ──
   Hvert punkt får en hårfin glass-pille-look og en 16px brand-cyan hake,
   med en subtil vertikal skiller mellom punktene (ikke etter siste). Løfter
   en flat flex-rad til et tydeligere, mer «betalt» trust-signal. */
.cn-v3.page-home .v3-hero-video .v3-hero-trust {
  gap: 0;
  align-items: center;
}
.cn-v3.page-home .v3-hero-video .v3-hero-trust li {
  padding: 0.4rem 1.1rem;
  position: relative;
}
.cn-v3.page-home .v3-hero-video .v3-hero-trust li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.18);
}
.cn-v3.page-home .v3-hero-video .v3-hero-trust svg {
  width: 16px;
  height: 16px;
  color: var(--v3-cyan);
}

/* ── HERO-5 (2026-07-19): strammet hero — video-pauseknapp ──
   (Eyebrow over H1 ble vurdert og AVVIST av bruker som hero-klisjé;
   .v3-eyebrow forblir globalt skjult via Fase 3-regelen ~linje 3036 —
   ingen unntak, heller ikke i heroen.) */

/* Pauseknapp for bakgrunnsvideoen (WCAG 2.2.2: bevegelse >5 s må kunne
   stoppes). Ghost-uttrykk som matcher .v3-btn-ghost på video (glass + lys
   hårlinje), diskré nederst til høyre — utenfor CTA-enes blikklinje.
   [hidden]-regelen er PÅKREVD: display-regelen under ville ellers slått
   UA-stylesheetens hidden → knappen hadde vist seg før video spiller. */
.cn-v3.page-home .v3-hero-video-toggle {
  position: absolute;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(7, 11, 22, 0.5);
  color: #d3def0;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 200ms var(--v3-ease),
              border-color 200ms var(--v3-ease),
              color 200ms var(--v3-ease);
}
.cn-v3.page-home .v3-hero-video-toggle[hidden] { display: none; }
.cn-v3.page-home .v3-hero-video-toggle:hover {
  background: rgba(7, 11, 22, 0.72);
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--v3-text-strong);
}
.cn-v3.page-home .v3-hero-video-toggle:focus-visible {
  outline: 2px solid var(--v3-cyan);
  outline-offset: 3px;
}
.cn-v3.page-home .v3-hero-video-toggle svg { width: 15px; height: 15px; }
.cn-v3.page-home .v3-hero-video-toggle .v3-vt-play { display: none; }
.cn-v3.page-home .v3-hero-video-toggle.is-paused .v3-vt-pause { display: none; }
.cn-v3.page-home .v3-hero-video-toggle.is-paused .v3-vt-play { display: block; }

/* ═══════════════════════════════════════
   FORSIDE — TO TJENESTER (web + mobil-split)
═══════════════════════════════════════ */
.cn-v3.page-home .v3-services { padding: var(--v3-sp-12) 0; }
.cn-v3.page-home .v3-service-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--v3-sp-6);
  align-items: center;
  margin-top: 4rem;
}
.cn-v3.page-home .v3-service-split-rev .v3-service-media { order: 2; }
.cn-v3.page-home .v3-service-split-rev .v3-service-body { order: 1; }

/* Media-oppstilling: dominant web-vindu + mindre telefon-følgesvenn,
   bunnjustert (gjenoppretter gamle main.html sin web+mobil-oppstilling). */
.cn-v3.page-home .v3-service-media {
  position: relative;
  display: grid;
  /* HERO-4: telefon-kolonnen hevet (104→172px min) for den større telefonen. */
  grid-template-columns: minmax(0, 1fr) minmax(172px, 0.32fr);
  align-items: end;
  gap: 1.4rem;
}
/* Mørke produktrammer som øyer på lerretet (re-asserterer bg+color).
   Bolk A5: lys ytre ring + topp-innerline + navy ph-skygge så øya svever
   rent på lerretet (erstatter den nær-usynlige cyan-ringen rgba(0,227,227,0.05)). */
.cn-v3.page-home .v3-service-media .v3-frame.v3-dark {
  background: var(--v3-ink);
  color: var(--v3-text);
  /* HERO-3-konsistens: samme sterkere topp-høylys + tofargede ph-skygge som
     den generelle .v3-frame, så forsidens produkt-øyer leser likt som hardware. */
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    var(--ph-shadow-soft),
    var(--ph-shadow),
    0 0 0 1px rgba(0, 227, 227, 0.06);
}
.cn-v3.page-home .v3-service-media .v3-frame-phone.v3-dark {
  position: relative;
  width: 100%;
  max-width: 172px;          /* HERO-4: matcher den større telefonskalaen */
  justify-self: center;
  align-self: end;
  margin: 0 0 -1.2rem;
  border-radius: 22px;
  border: 4px solid var(--v3-ink);
  background: var(--v3-ink);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.4),
    var(--ph-shadow-soft),
    0 0 48px -15px rgba(0, 227, 227, 0.3);   /* HERO-4: sterkere cyan rim-glød */
  overflow: hidden;
}
.cn-v3.page-home .v3-service-media .v3-frame-phone.v3-dark img {
  width: 100%; height: auto; border-radius: 18px; display: block;
}

/* Service-tekst (på lerret → mørk) */
.cn-v3.page-home .v3-service-tag {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ph-teal);
  background: rgba(5, 105, 106, 0.08);
  border: 1px solid rgba(5, 105, 106, 0.22);
  padding: 0.4rem 0.85rem;
  border-radius: var(--v3-r-pill);
  margin-bottom: 1.1rem;
}
.cn-v3.page-home .v3-service-body h3 {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  letter-spacing: -0.035em;
  color: var(--ph-ink);
  line-height: 1.05;
  margin-bottom: 0.8rem;
}
.cn-v3.page-home .v3-service-lead {
  color: var(--ph-body);
  font-size: 1.075rem;
  line-height: 1.6;
  margin-bottom: 1.4rem;
  max-width: 48ch;
  text-wrap: pretty;
}
.cn-v3.page-home .v3-service-points {
  display: grid;
  gap: 0.7rem;
  margin-bottom: 1.8rem;
}
.cn-v3.page-home .v3-service-points li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.97rem;
  color: var(--ph-body);
  line-height: 1.45;
}
.cn-v3.page-home .v3-service-points svg {
  width: 17px; height: 17px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--ph-teal);
}
.cn-v3.page-home .v3-service-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

/* ═══════════════════════════════════════
   FORSIDE — RESPONSIV (lyst lerret + video + split)
═══════════════════════════════════════ */
@media (max-width: 1024px) {
  .cn-v3.page-home .v3-service-split,
  .cn-v3.page-home .v3-service-split-rev {
    grid-template-columns: 1fr;
    gap: 2.6rem;
  }
  .cn-v3.page-home .v3-service-split-rev .v3-service-media,
  .cn-v3.page-home .v3-service-split-rev .v3-service-body { order: 0; }
  .cn-v3.page-home .v3-service-media { max-width: 640px; margin: 0 auto; }
}

@media (max-width: 768px) {
  .cn-v3.page-home .v3-hero-video { padding: 7rem 0 4rem; }
  .cn-v3.page-home .v3-hero-video .v3-hero-title { font-size: clamp(2.1rem, 9vw, 3.1rem); }
  .cn-v3.page-home .v3-service-media { max-width: 520px; gap: 1rem; }
}

/* Trust-raden skjules på telefon (brukerbeslutning 2026-07-19). Målt: raden
   ligger ryddig på 2 linjer (3+1) ned til ~540px og kollapser til 3 linjer
   under ~500px — 560 er sidens telefon-brekkpunkt og trygt over kollapsen.
   CTA-ens bunnmargin nulles i samme sveip så copy-blokken slutter rent på
   knappene (flex-sentreringen re-sentrerer da optisk riktig). KUN forsiden. */
@media (max-width: 560px) {
  .cn-v3.page-home .v3-hero-video .v3-hero-trust { display: none; }
  .cn-v3.page-home .v3-hero-video .v3-hero-cta { margin-bottom: 0; }
}

@media (max-width: 520px) {
  .cn-v3.page-home .v3-hero-video { padding: 6.5rem 0 3.5rem; }
  .cn-v3.page-home .v3-hero-video .v3-hero-title { font-size: clamp(1.95rem, 8.5vw, 2.6rem); }
  .cn-v3.page-home .v3-hero-cta .v3-btn { flex: 1 1 auto; }
  /* Split-media stables: web først (full bredde), telefon under, mindre. */
  .cn-v3.page-home .v3-service-media {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 1.4rem;
    max-width: 360px;
  }
  .cn-v3.page-home .v3-service-media .v3-frame-web { width: 100%; }
  .cn-v3.page-home .v3-service-media .v3-frame-phone.v3-dark {
    width: 60%;
    max-width: 168px;
    margin-bottom: 0;
  }
  .cn-v3.page-home .v3-service-actions .v3-btn { flex: 1 1 auto; }
}

/* ═══════════════════════════════════════════════════════════════
   BOLK C — FINISH-KLYNGE (C5) + MOTION-GATING
   ───────────────────────────────────────────────────────────────
   Sekundære kontroller, scrollbar, fokus, prosa-detaljer og den ene
   behersket pulsende anbefalt-planen. Lagt sist i fila → vinner cascaden
   uten !important. All bevegelse her er reduced-motion-gated nederst.
═══════════════════════════════════════════════════════════════ */

/* ── DF-10: rolig brand-scrollbar ── */
.cn-v3 {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 227, 227, 0.35) transparent;
}
.cn-v3::-webkit-scrollbar { width: 10px; height: 10px; }
.cn-v3::-webkit-scrollbar-track { background: transparent; }
.cn-v3::-webkit-scrollbar-thumb {
  background: rgba(0, 227, 227, 0.30);
  border-radius: var(--v3-r-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
.cn-v3::-webkit-scrollbar-thumb:hover { background: rgba(0, 227, 227, 0.45); background-clip: content-box; }

/* ── DF-6: cookie-OK pille-fokus (ringen følger pille-formen) ── */
.cn-v3 .cn-cookie-ok:focus-visible {
  outline: 2px solid var(--v3-cyan);
  outline-offset: 2px;
  border-radius: var(--v3-r-pill);
}

/* ── DF-7: prosa-underline på inline-fot-lenker (på lerretet) ──
   Hårfin teal-underline i hvile → currentColor (mørk ink/strong) på hover. */
.cn-v3 .v3-facts-foot a,
.cn-v3 .v3-plantable-foot a,
.cn-v3 .v3-compare-foot a {
  text-decoration: underline;
  text-decoration-color: rgba(5, 105, 106, 0.35);
  text-underline-offset: 3px;
}
.cn-v3 .v3-facts-foot a:hover,
.cn-v3 .v3-plantable-foot a:hover,
.cn-v3 .v3-compare-foot a:hover { text-decoration-color: currentColor; }

/* ── DF-8: interne dividers som var nær usynlige → sterkere linje ──
   AVVIK fra spec-token: disse tre dividerne ligger på MØRKE flater (plan/
   calc-kort + mørk footer), ikke på det lyse lerretet. --ph-line-strong er
   en MØRK navy-linje (laget for lyst lerret) → den ville blitt usynlig her.
   Vi hever derfor til --v3-line-strong (den sterkere LYSE linjen for mørke
   flater), som oppfyller DF-8s INTENSJON: gjøre faint dividers synlige. */
.cn-v3 .v3-plan-feats { border-top-color: var(--v3-line-strong); }
.cn-v3 .v3-calc-breakdown { border-top-color: var(--v3-line-strong); border-bottom-color: var(--v3-line-strong); }
.cn-v3 .v3-footer-bottom { border-top-color: var(--v3-line-strong); }

/* ── MOT-5: behersket puls KUN på anbefalt-plan (reduced-motion-gated) ──
   Basis = Bolk A sin ph-skygge på best-planen, så pulsen kun ANDER glød-
   leddet — den skal være rolig, ikke støyende. */
@keyframes v3-pulse-glow {
  0%, 100% { box-shadow: var(--ph-shadow), 0 0 60px -28px rgba(0, 227, 227, 0.40); }
  50%      { box-shadow: var(--ph-shadow), 0 0 60px -22px rgba(0, 227, 227, 0.55); }
}
.cn-v3 .v3-plan-best {
  animation: v3-pulse-glow 4.5s var(--v3-ease-soft) infinite;
}

/* ── Motion-gating for ALL ny Bolk C-bevegelse ── */
@media (prefers-reduced-motion: reduce) {
  /* C1: magnet-følging av (JS setter ikke --mag-* ved reduced, men nuller
     transition for sikkerhets skyld). */
  .cn-v3 [data-magnetic].is-magnet-active { transition: none; }
  /* MOT-3: galleri-zoom statisk. */
  .cn-v3 .v3-gallery-zoom img { transition: none; }
  .cn-v3 .v3-gallery-item:hover .v3-gallery-zoom img { transform: none; }
  /* MOT-8: FAQ-ikon roterer ikke. */
  .cn-v3 .faq-icon { transition: none; }
  /* MOT-5: anbefalt-plan pulser ikke. */
  .cn-v3 .v3-plan-best { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   2 — PLATTFORM-VISNING  (.v3-show — to enheter: nettleser + telefon)
   ───────────────────────────────────────────────────────────────
   Apple-aktig plattform-avduking: to SENTRERTE enheter — en nettleser-ramme
   (kalender → utgifter) og en stående iPhone-bezel (fire mobilskjermer) —
   som crossfader gjennom seks underbilder, med tre steg-tekster UNDER.
   Seksjonen er en egen MØRK «øy» (full-bredde mørk flate) midt på det
   lyse lerretet, så de lyse skjermbildene popper og rammen leser som
   løftet hardware. Seksjonshode + steg-tekst bruker derfor de LYSE
   v3-tekst-tokenene (AA mot mørk: strong #f3f7ff, muted #97a7c5 6.59:1,
   faint #8294bb ≥5:1) — og re-asserterer over de globale lerret-
   overstyringene (mørk-ink) som ligger tidligere i fila.

   To moduser:
   • FALLBACK (standard, INGEN .v3-show--anim): begge enheter vises i normal
     flyt (nettleser-rammen med sine 2 shots, deretter de 4 telefon-skjermene
     stablet stående med sine labels), alle 3 steg synlige stablet, dots
     skjult. Full lesbarhet for no-JS / reduced-motion / mobil.
   • ANIMERT (.v3-show--anim, settes av v3.js KUN på desktop m/ GSAP og
     uten reduced-motion): de to enhetene legges i samme grid-celle og
     crossfader (kun aktiv enhet vist), shots ligger absolutt oppå hverandre
     og crossfader (opacity + subtil scale-zoom, expo); kun aktivt steg vist;
     dots vist. GSAP pinner seksjonen og scrubber gjennom 6 underbilder —
     CSS sørger for crossfade + sentrering i pinnet viewport.
   Kun transform/opacity animeres. Bevegelse reduced-motion-gated nederst.
═══════════════════════════════════════════════════════════════ */
.cn-v3 .v3-show {
  position: relative;
  padding: var(--v3-sp-12) 0;
  /* Mørk øy på det lyse lerretet: dyp navy-base + en subtil cyan-glød øverst
     så seksjonen leser som en intensjonell, opplyst scene (ikke en sort blokk). */
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(0, 227, 227, 0.10), transparent 60%),
    linear-gradient(180deg, var(--v3-ink) 0%, var(--v3-bg) 100%);
  color: var(--v3-text);
  overflow: hidden;
}

/* Seksjonshode + aksent-ord re-asserteres til LYS (vinner over lerret-
   overstyringene .cn-v3 .v3-section-head h2{color:ink} m.fl. lenger oppe). */
.cn-v3 .v3-show .v3-section-head h2 { color: var(--v3-text-strong); }
.cn-v3 .v3-show .v3-section-head h2 .v3-accent {
  color: var(--v3-cyan);
  text-shadow: 0 0 40px rgba(0, 227, 227, 0.35);
}
.cn-v3 .v3-show .v3-section-head p { color: var(--v3-text-muted); }

/* Sentrert kolonne: enhet → tekst, sentrert under hverandre. */
.cn-v3 .v3-show-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.2rem, 4vw, 3.2rem);
  max-width: 1040px;
  margin: 0 auto;
}

/* ── Enheten: stor sentrert nettleser-ramme ── */
.cn-v3 .v3-show-device {
  width: 100%;
  max-width: 960px;
}
.cn-v3 .v3-show-frame {
  position: relative;
  margin: 0;
  border-radius: var(--v3-r-lg);
  border: 1px solid var(--v3-line-strong);
  overflow: hidden;
}
/* Mørk øy-uttrykk: lys ytre ring + topp-høylys + ph-skygge ned på lerretet,
   pluss en cyan rim-glød — samme «løftet hardware»-språk som forsidens øvrige
   produkt-øyer (.v3-frame.v3-dark). */
.cn-v3 .v3-show-frame.v3-dark {
  background: var(--v3-ink);
  color: var(--v3-text);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    var(--ph-shadow-soft),
    var(--ph-shadow),
    0 0 70px -28px rgba(0, 227, 227, 0.28);
}

/* Skjermbilde-flaten: reserver plass via aspect-ratio (ingen CLS / flash).
   Standard = relativ flyt (fallback stabler skjermbildene vertikalt). */
.cn-v3 .v3-show-shots {
  position: relative;
  width: 100%;
}
.cn-v3 .v3-show-shot {
  margin: 0;
  position: relative;
}
.cn-v3 .v3-show-shot picture { display: block; }
.cn-v3 .v3-show-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1900 / 915;
  object-fit: cover;
}
.cn-v3 .v3-show-cap {
  padding: 0.7rem 1rem 0.9rem;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--v3-text-muted);
  text-align: center;
  border-top: 1px solid var(--v3-line);
}

/* ── Tekst under enheten: tre steg, sentrert ── */
.cn-v3 .v3-show-copy {
  width: 100%;
  max-width: 640px;
  text-align: center;
}
.cn-v3 .v3-show-steps {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
}
.cn-v3 .v3-show-step { margin: 0 auto; }
.cn-v3 .v3-show-step + .v3-show-step { margin-top: 1.6rem; }
.cn-v3 .v3-show-kicker {
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v3-cyan);
  margin-bottom: 0.7rem;
}
.cn-v3 .v3-show-step h3 {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.03em;
  color: var(--v3-text-strong);
  margin: 0 0 0.6rem;
}
.cn-v3 .v3-show-step p {
  color: var(--v3-text-muted);
  font-size: 1.04rem;
  line-height: 1.6;
  margin: 0 auto;
  max-width: 52ch;
  text-wrap: pretty;
}

/* ── Dots: skjult i fallback, vist i animert modus ── */
.cn-v3 .v3-show-dots {
  display: none;
  justify-content: center;
  gap: 0.7rem;
  margin-bottom: 1.6rem;
}
.cn-v3 .v3-show-dot {
  position: relative;
  width: 11px;
  height: 11px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(150, 180, 230, 0.28);
  cursor: pointer;
  transition: background 240ms var(--v3-ease), box-shadow 240ms var(--v3-ease), transform 240ms var(--v3-ease);
}
/* ≥44px treffflate uten å endre den visuelle prikken (usynlig hit-area). */
.cn-v3 .v3-show-dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.cn-v3 .v3-show-dot:hover { background: rgba(150, 180, 230, 0.5); }
.cn-v3 .v3-show-dot.is-active {
  background: var(--v3-cyan);
  box-shadow: 0 0 0 1px var(--v3-cyan-line), 0 0 14px 1px rgba(0, 227, 227, 0.55);
  transform: scale(1.1);
}
.cn-v3 .v3-show-dot:focus-visible {
  outline: 2px solid var(--v3-cyan);
  outline-offset: 4px;
}

/* «Les mer»-lenke (sentrert, på mørk øy → lys cyan, vinner over lerret-teal). */
.cn-v3 .v3-show-copy .v3-link { color: var(--v3-cyan); }
.cn-v3 .v3-show-copy .v3-link:hover { color: var(--v3-text-strong); }

/* ───────── ANIMERT MODUS (.v3-show--anim, kun desktop via v3.js) ─────────
   Skjermbildene legges absolutt oppå hverandre; kun .is-active synlig med
   en subtil zoom-crossfade. Kun aktivt steg vist. Dots vist. */
.cn-v3 .v3-show--anim .v3-show-shots {
  /* Reserver høyden mens shots er absolutt-posisjonert (ingen kollaps). */
  aspect-ratio: 1900 / 915;
}
.cn-v3 .v3-show--anim .v3-show-shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 700ms var(--v3-ease), transform 900ms var(--v3-ease);
  pointer-events: none;
}
.cn-v3 .v3-show--anim .v3-show-shot.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.cn-v3 .v3-show--anim .v3-show-shot img {
  /* I absolutt modus fyller bildet rammen; aspect-ratio holdes av forelder. */
  height: 100%;
}
.cn-v3 .v3-show--anim .v3-show-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, transparent, var(--v3-glass-deep));
  border-top: 0;
}

/* Steg: kun aktivt vist (crossfade). Stables på samme plass via grid. */
.cn-v3 .v3-show--anim .v3-show-steps {
  display: grid;
}
.cn-v3 .v3-show--anim .v3-show-step {
  grid-area: 1 / 1;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms var(--v3-ease), transform 420ms var(--v3-ease);
  pointer-events: none;
}
.cn-v3 .v3-show--anim .v3-show-step.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.cn-v3 .v3-show--anim .v3-show-dots { display: flex; }

/* ───────── TO ENHETER: nettleser (sub 0–1) + telefon (sub 2–5) ─────────
   Browser- og phone-wrapper ligger begge i .v3-show-device. I FALLBACK
   stables de i normal flyt (browser med sine 2 shots, så de 4 telefon-
   skjermene under hverandre). I ANIMERT modus legges de i samme grid-celle
   og crossfader (samme uttrykk som stegene). All telefon-CSS er scopet til
   .v3-show-phone, så delte baseklasser (Expense-sticky, AI-konsoll) er urørt.
   iPhone-bezelen tegner INGEN notch — skjermbildene har egen iOS-statuslinje. */
.cn-v3 .v3-show-browser { width: 100%; }

/* Telefon-enheten (steg 03): EN rad med fire stående iPhone-bezels side ved
   side (.v3-show-phones), hver med ett skjermbilde + label under. INGEN intern
   scroll-sykling. Bezelen tegner INGEN notch (bildene har egen iOS-statuslinje).
   Smal skjerm = 2×2-rutenett (responsiv-blokk lenger ned). */
.cn-v3 .v3-show-browser { width: 100%; }
.cn-v3 .v3-show-phones {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(0.7rem, 1.5vw, 1.25rem);
}
.cn-v3 .v3-show-phone {           /* <figure> per telefon: bezel + label */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  width: clamp(150px, 17vw, 215px);
}
.cn-v3 .v3-phone-frame {          /* selve bezelen */
  position: relative;
  display: block;
  width: 100%;
  padding: 8px;
  border-radius: 36px;
  background: var(--v3-ink);
  border: 1px solid var(--v3-line-strong);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    var(--ph-shadow-soft),
    var(--ph-shadow),
    0 0 50px -24px rgba(0, 227, 227, 0.30);
}
.cn-v3 .v3-phone-frame picture {
  display: block;
  border-radius: 28px;
  overflow: hidden;
}
.cn-v3 .v3-phone-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1206 / 2622;
  object-fit: cover;
  object-position: top;
}
/* Diskret sideknapp (ren dekor, ingen notch). */
.cn-v3 .v3-phone-frame::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 28%;
  width: 2px;
  height: 46px;
  border-radius: 2px;
  background: var(--v3-line-strong);
  pointer-events: none;
}
/* Label under hver telefon (overstyrer delt base-cap + anim-cap-gradient —
   derfor plassert ETTER anim-blokken over). */
.cn-v3 .v3-show-phone .v3-show-cap {
  position: static;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--v3-text-muted);
}

/* Fallback-stabling: browser-frame, så telefon-raden under. */
.cn-v3 .v3-show-browser + .v3-show-phones { margin-top: 2.6rem; }

/* ── Animert modus: enhetene crossfader i samme grid-celle ──
   Stagen reserverer den høyeste enhetens høyde så byttet ikke hopper. */
.cn-v3 .v3-show--anim .v3-show-device {
  display: grid;
  place-items: center;
  min-height: clamp(450px, 56vh, 540px);
}
.cn-v3 .v3-show--anim .v3-show-browser,
.cn-v3 .v3-show--anim .v3-show-phones {
  grid-area: 1 / 1;
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 600ms var(--v3-ease), transform 700ms var(--v3-ease);
  pointer-events: none;
}
.cn-v3 .v3-show--anim .v3-show-browser.is-active,
.cn-v3 .v3-show--anim .v3-show-phones.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* Subtil forskjøvet inn-fade: de fire telefonene stiger inn etter hverandre
   når raden blir aktiv (kun transform, opacity eies av enhets-crossfaden over).
   Reduced-motion nullstilles i blokken nederst. */
.cn-v3 .v3-show--anim .v3-show-phones .v3-show-phone {
  transform: translateY(16px);
  transition: transform 620ms var(--v3-ease);
}
.cn-v3 .v3-show--anim .v3-show-phones.is-active .v3-show-phone { transform: none; }
.cn-v3 .v3-show--anim .v3-show-phones.is-active .v3-show-phone:nth-child(1) { transition-delay: 60ms; }
.cn-v3 .v3-show--anim .v3-show-phones.is-active .v3-show-phone:nth-child(2) { transition-delay: 130ms; }
.cn-v3 .v3-show--anim .v3-show-phones.is-active .v3-show-phone:nth-child(3) { transition-delay: 200ms; }
.cn-v3 .v3-show--anim .v3-show-phones.is-active .v3-show-phone:nth-child(4) { transition-delay: 270ms; }

/* ═══════════════════════════════════════════════════════════════
   3: REISE & UTGIFTER  (.v3-expense / .v3-sticky, sticky bilde + tekststeg)
   ───────────────────────────────────────────────────────────────
   Mac-stil scrollytelling: tekststegene scroller naturlig på VENSTRE,
   en nettleser-ramme er STICKY på HØYRE. Idet et steg kommer i fokus
   crossfader rammen til steget sitt skjermbilde. Bevisst visuell
   variasjon mot den sentrerte turnus-showcasen over (.v3-show).

   Rammen gjenbruker .v3-show-frame.v3-dark + .v3-grid-bar +
   .v3-show-shots/.v3-show-shot (crossfade-CSS i .v3-show-blokken over
   arves der den er generisk; her settes layout + sticky + steg).

   • FALLBACK (standard, INGEN .v3-sticky--anim): IKKE sticky. Stablet
     i normal flyt, alle 3 steg synlige, hvert steg etterfulgt av sitt
     skjermbilde (interleaved) — full lesbarhet for no-JS, reduced-
     motion og mobil. 0 horisontal overflow.
   • ANIMERT (.v3-sticky--anim, settes av v3.js KUN på desktop ≥861px
     uten reduced-motion + med IntersectionObserver): 2-kol grid,
     media sticky, kun aktivt shot synlig (opacity + subtil scale-zoom,
     samme crossfade-uttrykk som .v3-show). IntersectionObserver setter
     aktivt steg/bilde — INGEN GSAP-pin (holder de to scenene uavhengige).
   Kun transform/opacity animeres. Bevegelse reduced-motion-gated nederst.
═══════════════════════════════════════════════════════════════ */
.cn-v3 .v3-expense {
  position: relative;
  padding: var(--v3-sp-12) 0;
  /* Mørk øy — samme bakgrunn som .v3-show / .v3-ai, så forsiden slutter å veksle
     lys/mørk (tjenester → expense → claude leser som én sammenhengende mørk flate). */
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(0, 227, 227, 0.10), transparent 60%),
    linear-gradient(180deg, var(--v3-ink) 0%, var(--v3-bg) 100%);
  color: var(--v3-text);
  /* BEVISST `clip`, ikke `hidden` (som .v3-show bruker): #expense-media bruker
     NATIV `position: sticky` (initStickyScene), og `overflow: hidden` på en
     forelder gjør den til scroll-container → bryter sticky-scrollen på desktop.
     `clip` klipper likt UTEN å lage scroll-container (sticky beholdes); faller
     trygt tilbake til dagens (uklippede) oppførsel på eldre nettlesere.
     .v3-show tåler `hidden` fordi den pinnes via GSAP (viewport-fixed), ikke sticky. */
  overflow: clip;
}
/* Seksjonshode + aksent-ord re-asserteres til LYS (vinner over lerret-
   overstyringene .cn-v3 .v3-section-head h2{color:ink} m.fl.) — speiler .v3-show. */
.cn-v3 .v3-expense .v3-section-head h2 { color: var(--v3-text-strong); }
.cn-v3 .v3-expense .v3-section-head h2 .v3-accent {
  color: var(--v3-cyan);
  text-shadow: 0 0 40px rgba(0, 227, 227, 0.35);
}
.cn-v3 .v3-expense .v3-section-head p { color: var(--v3-text-muted); }
/* Sticky-stegene re-asserteres fra --ph-* (lerret) til de mørke --v3-*-fargene.
   Scopet under .v3-expense for sikkerhets skyld (reglene er #expense-only) og
   vinner på spesifisitet over de globale .v3-sticky-*-fargene. */
.cn-v3 .v3-expense .v3-sticky-kicker { color: var(--v3-cyan); }
.cn-v3 .v3-expense .v3-sticky-step h3 { color: var(--v3-text-strong); }
.cn-v3 .v3-expense .v3-sticky-step p { color: var(--v3-text-muted); }
.cn-v3 .v3-expense .v3-sticky-note { color: var(--v3-text-faint); }
.cn-v3 .v3-expense .v3-sticky-actions .v3-link { color: var(--v3-cyan); }
.cn-v3 .v3-expense .v3-sticky-actions .v3-link:hover { color: var(--v3-text-strong); }

/* ── FALLBACK: enkel stablet flyt (standard, uten .v3-sticky--anim) ──
   Steg-listen vises i normal flyt, deretter media-rammen med ALLE 3
   shots stablet og lesbare. Ingen sticky, ingen overflow. */
.cn-v3 .v3-sticky {
  display: block;
}
.cn-v3 .v3-sticky-steps {
  list-style: none;
  margin: 0 0 2.4rem;
  padding: 0;
}
.cn-v3 .v3-sticky-step { margin: 0; max-width: 56ch; }
.cn-v3 .v3-sticky-step + .v3-sticky-step { margin-top: 2.2rem; }
.cn-v3 .v3-sticky-kicker {
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ph-teal);
  margin-bottom: 0.7rem;
}
.cn-v3 .v3-sticky-step h3 {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.03em;
  color: var(--ph-ink);
  margin: 0 0 0.6rem;
}
.cn-v3 .v3-sticky-step p {
  color: var(--ph-body);
  font-size: 1.04rem;
  line-height: 1.6;
  margin: 0;
  max-width: 52ch;
  text-wrap: pretty;
}
.cn-v3 .v3-sticky-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.4rem;
  margin-top: 1.5rem;
}
.cn-v3 .v3-sticky-actions .v3-link { color: var(--ph-teal); }
.cn-v3 .v3-sticky-actions .v3-link:hover { color: var(--ph-ink); }
.cn-v3 .v3-sticky-price {
  font-family: "Inter", sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ph-faint);
}
/* Juridisk forbeholdslinje under hele sticky-blokken (synlig, men subtil; ph-faint = AA 5.0:1) */
.cn-v3 .v3-sticky-note {
  margin: 2.4rem auto 0;
  max-width: 64ch;
  font-size: 0.78rem;
  line-height: 1.55;
  text-align: center;
  color: var(--ph-faint);
}

/* Media-kolonnen i fallback: stablet, lesbare øyer. */
.cn-v3 .v3-sticky-media {
  display: grid;
  gap: 1.6rem;
}
.cn-v3 .v3-sticky-media .v3-show-frame { margin: 0; }
/* I fallback ligger shots i normal flyt (arver .v3-show-shot: relativ). De tre
   ruting-diagrammene er identiske, så fallback-regelen lenger ned viser kun det
   første. Diagram + .v3-route-foot bærer betydningen (per-shot .v3-show-cap er
   fjernet fra diagram-shotsene → ingen cap/foot-overlapp). */

/* ── ANIMERT MODUS (.v3-sticky--anim, kun desktop ≥861px via v3.js) ── */
.cn-v3 .v3-sticky--anim .v3-sticky {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
/* Venstre: stegene scroller naturlig, hver med nok høyde til å drive
   scroll-byttet. Inaktive steg dempes lett (fokus på det aktive). */
.cn-v3 .v3-sticky--anim .v3-sticky-steps {
  margin: 0;
}
.cn-v3 .v3-sticky--anim .v3-sticky-step {
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 46ch;
  opacity: 0.4;
  transform: translateY(8px);
  transition: opacity 480ms var(--v3-ease), transform 480ms var(--v3-ease);
}
.cn-v3 .v3-sticky--anim .v3-sticky-step + .v3-sticky-step { margin-top: 0; }
.cn-v3 .v3-sticky--anim .v3-sticky-step.is-active {
  opacity: 1;
  transform: none;
}
/* Første og siste steg trenger litt mindre høyde så seksjonen ikke
   åpner/lukker med stor død luft. */
.cn-v3 .v3-sticky--anim .v3-sticky-step:first-child { min-height: 64vh; padding-top: 4vh; }
.cn-v3 .v3-sticky--anim .v3-sticky-step:last-child { min-height: 64vh; padding-bottom: 4vh; }

/* Høyre: nettleser-rammen klistres mens stegene passerer. */
.cn-v3 .v3-sticky--anim .v3-sticky-media {
  position: sticky;
  top: 12vh;
  display: block;
}
.cn-v3 .v3-sticky--anim .v3-sticky-media .v3-show-frame { margin: 0; }
/* Shots legges absolutt oppå hverandre; kun .is-active synlig med subtil
   zoom-crossfade (samme uttrykk som .v3-show--anim). */
.cn-v3 .v3-sticky--anim .v3-show-shots {
  aspect-ratio: 1900 / 915;
}
.cn-v3 .v3-sticky--anim .v3-show-shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 700ms var(--v3-ease), transform 900ms var(--v3-ease);
  pointer-events: none;
}
.cn-v3 .v3-sticky--anim .v3-show-shot.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.cn-v3 .v3-sticky--anim .v3-show-shot img { height: 100%; }
.cn-v3 .v3-sticky--anim .v3-show-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, transparent, rgba(4, 9, 18, 0.72));
  border-top: 0;
}

/* ───────── RUTING-DIAGRAM (Expense-sticky-media, CSS/SVG — erstatter screenshots)
   Brukes nå kun av shot 2 (steg 03), med fremhevingstilstanden .is-output (dest-
   nodene løftes, head/foot dempes). Atmosfærisk bakteppe (radial cyan-glød + faint
   forgreningslinjer) via ::before. Ingen JS-endring. Bevegelse = ren opacity/box-
   shadow → trygt ved reduced-motion. Delt med undersidene → ikke fjern. ───── */
.cn-v3 .v3-route-diagram {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 13.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.6rem, 1.4vw, 1rem);
  padding: clamp(0.85rem, 2vw, 1.5rem);
  background: var(--v3-ink);
}
.cn-v3 .v3-route-diagram::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 70% at 22% 6%, rgba(0, 227, 227, 0.12), transparent 60%),
    radial-gradient(50% 60% at 92% 96%, rgba(0, 227, 227, 0.07), transparent 62%),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20120'%20fill='none'%20stroke='%2300E3E3'%20stroke-width='0.5'%20opacity='0.4'%3E%3Cpath%20d='M14%2060H86M86%2060c26%200%2026-26%2060-26M86%2060c26%200%2026%2026%2060%2026'/%3E%3C/svg%3E") center/82% auto no-repeat;
}
.cn-v3 .v3-route-diagram > * { position: relative; z-index: 1; }

/* Intake-rad: Ekstern → Reise & Utgifter */
.cn-v3 .v3-route-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}
/* Felles chip-uttrykk (node + destinasjon): tekst over, under-etikett under */
.cn-v3 .v3-route-node,
.cn-v3 .v3-route-dest {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 0.5rem 0.8rem;
  border-radius: var(--v3-r-sm);
  border: 1px solid var(--v3-line-strong);
  background: rgba(150, 180, 230, 0.08);
  color: var(--v3-text-strong);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}
.cn-v3 .v3-rn-ext { flex-direction: row; gap: 0.5rem; }
.cn-v3 .v3-route-node svg { width: 17px; height: 17px; color: var(--v3-cyan); flex-shrink: 0; }
.cn-v3 .v3-route-node small,
.cn-v3 .v3-route-dest small {
  font-weight: 500;
  font-size: 0.69rem;
  letter-spacing: 0.02em;
  color: var(--v3-text-faint);
}
.cn-v3 .v3-rn-hub { border-color: var(--v3-cyan-line); }
.cn-v3 .v3-rn-hub,
.cn-v3 .v3-route-dest { min-width: 6.5rem; }

/* CSS-chevron (arver currentColor, ingen ekstra markup/SVG) */
.cn-v3 .v3-route-arrow {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-top: 2px solid var(--v3-text-faint);
  border-right: 2px solid var(--v3-text-faint);
  transform: rotate(45deg);
}

/* Fork-rader: Under/Over 10 000 → Regnskap/Lønn */
.cn-v3 .v3-route-rows { display: grid; gap: 0.55rem; }
.cn-v3 .v3-route-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.cn-v3 .v3-route-tag {
  flex: 1 1 7rem;
  padding: 0.5rem 0.8rem;
  border-radius: var(--v3-r-sm);
  border: 1px solid var(--v3-line-strong);
  background: var(--v3-ink);
  color: var(--v3-text-muted);
  font-size: 0.79rem;
  font-weight: 600;
  line-height: 1.25;
}
.cn-v3 .v3-rr-under .v3-route-tag { border-color: var(--v3-green-line); color: var(--v3-green); }
.cn-v3 .v3-rr-over .v3-route-tag { border-color: var(--v3-cyan-line); color: var(--v3-cyan); }

.cn-v3 .v3-route-foot {
  margin: 0.1rem 0 0;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--v3-text-faint);
}

/* ── Fremheving per steg (cyan-løft på aktiv del, demping på resten) ── */
.cn-v3 .v3-route-diagram .v3-route-head,
.cn-v3 .v3-route-diagram .v3-route-rows,
.cn-v3 .v3-route-diagram .v3-route-foot { transition: opacity 480ms var(--v3-ease); }
.cn-v3 .is-output .v3-route-head { opacity: 0.45; }
.cn-v3 .is-output .v3-route-dest { box-shadow: var(--v3-glow-focus); }
.cn-v3 .is-output .v3-route-foot { color: var(--v3-text-muted); }

/* Fallback (uten .v3-sticky--anim → mobil/no-JS/reduced): de tre shotsene er nå
   distinkte (invite = «sendt»-tilstand, tabell = alle rader, diagram = split) →
   vis ALLE tre stablet med luft. Diagram-shotet nøytraliseres (ingen demping/glød). */
.cn-v3 .v3-expense:not(.v3-sticky--anim) .v3-show-shots { display: grid; gap: 0.9rem; }
.cn-v3 .v3-expense:not(.v3-sticky--anim) .v3-route-head,
.cn-v3 .v3-expense:not(.v3-sticky--anim) .v3-route-rows,
.cn-v3 .v3-expense:not(.v3-sticky--anim) .v3-route-foot { opacity: 1; }
/* …og nøytraliser intake-nodenes cyan-glød (den hører til den animerte
   fremhevingen) så det ene synlige diagrammet står helt rolig i fallback/reduced. */
.cn-v3 .v3-expense:not(.v3-sticky--anim) .v3-rn-ext,
.cn-v3 .v3-expense:not(.v3-sticky--anim) .v3-rn-hub { box-shadow: none; }

/* ───────── STEG-VISNINGER (Expense-sticky): tre distinkte shots ─────────
   Shot 0 = e-postinvitasjon (konvolutt flyr → «sendt» ved .is-active; statisk
   «sendt» i fallback/reduced). Shot 1 = tellingen mot grensen (ren CSS-filter via
   skjulte radios + :has). Shot 2 = ruting-diagrammet (over). Token-basert, lys-på-
   mørk, fiktive data. Ingen JS-endring. ───── */

/* NB: initStickyScene legger .v3-sticky--anim PÅ selve seksjonen (.v3-expense),
   så selektorene må være KOMPOUND (.v3-expense.v3-sticky--anim), ikke etterkommer. */
/* Stabil rammehøyde: rommer det høyeste shotet (tabellen) så crossfaden ikke hopper. */
.cn-v3 .v3-expense.v3-sticky--anim .v3-show-shots {
  aspect-ratio: auto;
  min-height: clamp(24rem, 44vh, 26.5rem);
}
/* Inaktive shots ut av tab-rekkefølge/AT (shot 1 har ekte filtre) — visibility
   forsinkes så crossfade-uttoningen fortsatt vises. */
.cn-v3 .v3-expense.v3-sticky--anim .v3-show-shot {
  visibility: hidden;
  transition: opacity 700ms var(--v3-ease), transform 900ms var(--v3-ease), visibility 0s linear 700ms;
}
.cn-v3 .v3-expense.v3-sticky--anim .v3-show-shot.is-active {
  visibility: visible;
  transition: opacity 700ms var(--v3-ease), transform 900ms var(--v3-ease), visibility 0s;
}

/* ── Shot 0: e-postinvitasjon (ren illustrasjon → inert, ingen falsk klikk-affordans) ── */
.cn-v3 .v3-expense .v3-invite {
  position: relative; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; padding: clamp(1rem, 2.5vw, 1.75rem); text-align: center;
  pointer-events: none;
}
/* Fallback/reduced: compose skjult, «sendt» statisk. */
.cn-v3 .v3-expense .v3-invite-compose { display: none; }
.cn-v3 .v3-expense .v3-invite-sent {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.cn-v3 .v3-expense .v3-invite-sent-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--v3-cyan-soft); border: 1px solid var(--v3-cyan-line);
  box-shadow: var(--v3-glow-focus);
}
.cn-v3 .v3-expense .v3-invite-sent-ico svg { width: 24px; height: 24px; color: var(--v3-cyan); }
.cn-v3 .v3-expense .v3-invite-sent-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--v3-text-strong); }
.cn-v3 .v3-expense .v3-invite-sent-sub { margin: 0; font-size: 0.85rem; color: var(--v3-text-muted); max-width: 22rem; }

/* Animert modus: compose synlig, «sendt» legges oppå og fades inn etter at
   konvolutten har fløyet. */
.cn-v3 .v3-expense.v3-sticky--anim .v3-invite-compose {
  display: flex; flex-direction: column; align-items: stretch; gap: 0.8rem;
  width: min(20rem, 86%); position: relative; text-align: left;
}
.cn-v3 .v3-expense.v3-sticky--anim .v3-invite-sent {
  position: absolute; inset: 0; justify-content: center;
  opacity: 0; transform: translateY(10px) scale(0.97);
}
.cn-v3 .v3-expense .v3-invite-label {
  font-size: 0.72rem; font-weight: 600; color: var(--v3-text-faint);
}
.cn-v3 .v3-expense .v3-invite-field {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  background: var(--v3-ink); border: 1px solid var(--v3-line-strong);
  border-radius: var(--v3-r-sm);
}
.cn-v3 .v3-expense .v3-invite-field-ico { width: 17px; height: 17px; color: var(--v3-text-faint); flex-shrink: 0; }
.cn-v3 .v3-expense .v3-invite-field input {
  flex: 1; min-width: 0; border: 0; background: transparent; padding: 0;
  color: var(--v3-text-strong); font: inherit; font-size: 0.9rem;
}
.cn-v3 .v3-expense .v3-invite-field input:focus { outline: none; }
.cn-v3 .v3-expense .v3-invite-send { width: 100%; justify-content: center; }
.cn-v3 .v3-expense .v3-invite-envelope {
  position: absolute; left: 50%; bottom: 0.3rem; margin-left: -17px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: var(--v3-cyan-soft); border: 1px solid var(--v3-cyan-line);
  opacity: 0; pointer-events: none;
}
.cn-v3 .v3-expense .v3-invite-envelope svg { width: 18px; height: 18px; color: var(--v3-cyan); }

/* Sekvensen gates på at seksjonens .v3-section-head har fått .is-in (v3-reveal
   legger den når seksjonen SCROLLER inn) — ikke ved page-load, der setActive(0)
   ellers ville spilt konvolutten av-skjerm. Re-spilles når man scroller tilbake
   til steg 1 (is-active re-toggles). Uten :has()-støtte spilles ikke flyvningen
   (compose-kortet står statisk) — kun i animert modus, ufarlig fallback. */
.cn-v3 .v3-expense.v3-sticky--anim:has(.v3-section-head.is-in) .v3-show-shot.is-active .v3-invite-envelope { animation: v3-invite-fly 1150ms var(--v3-ease) 450ms both; }
.cn-v3 .v3-expense.v3-sticky--anim:has(.v3-section-head.is-in) .v3-show-shot.is-active .v3-invite-compose { animation: v3-invite-dim 500ms var(--v3-ease) 1350ms both; }
.cn-v3 .v3-expense.v3-sticky--anim:has(.v3-section-head.is-in) .v3-show-shot.is-active .v3-invite-sent { animation: v3-invite-reveal 600ms var(--v3-ease) 1500ms both; }
/* Når shot 0 forlater steget (mister .is-active) HOLDES sluttilstanden — compose
   dempet, «sendt» synlig — slik at crossfade-uttoningen (700ms) ikke blinker
   tilbake til skjemaet. Defaulten (lys compose / skjult sendt) gjelder dermed kun
   FØR sekvensen spiller; verdiene matcher animasjonens forwards-sluttilstand → ingen
   snap inn/ut. (Kun shot 0 har .v3-invite-*.) */
.cn-v3 .v3-expense.v3-sticky--anim:has(.v3-section-head.is-in) .v3-show-shot:not(.is-active) .v3-invite-compose { opacity: 0.12; }
.cn-v3 .v3-expense.v3-sticky--anim:has(.v3-section-head.is-in) .v3-show-shot:not(.is-active) .v3-invite-sent { opacity: 1; transform: none; }

@keyframes v3-invite-fly {
  0%   { opacity: 0; transform: translate(0, 8px) scale(0.85) rotate(-4deg); }
  14%  { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
  45%  { opacity: 1; transform: translate(10px, -46px) scale(0.95) rotate(7deg); }
  72%  { opacity: 1; transform: translate(34px, -104px) scale(0.8) rotate(13deg); }
  100% { opacity: 0; transform: translate(58px, -168px) scale(0.6) rotate(18deg); }
}
@keyframes v3-invite-dim { to { opacity: 0.12; } }
@keyframes v3-invite-reveal {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Shot 1: tellingen mot grensen (ren CSS-filter) ── */
.cn-v3 .v3-expense .v3-ledger {
  position: relative; width: 100%; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-start;
  gap: 0.7rem; padding: clamp(0.9rem, 2vw, 1.4rem);
}
.cn-v3 .v3-expense .v3-ledger-top {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  flex-wrap: wrap;
}
.cn-v3 .v3-expense .v3-ledger-filters {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; border: 0; min-width: 0;
}
.cn-v3 .v3-expense .v3-ledger-filters legend {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cn-v3 .v3-expense .v3-ledger-filters input {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.cn-v3 .v3-expense .v3-ledger-filter {
  cursor: pointer; user-select: none;
  font-size: 0.73rem; font-weight: 600; line-height: 1;
  padding: 0.42rem 0.68rem;
  border-radius: var(--v3-r-pill);
  border: 1px solid var(--v3-line); background: var(--v3-ink); color: var(--v3-text-muted);
  transition: color 200ms var(--v3-ease), border-color 200ms var(--v3-ease), background 200ms var(--v3-ease);
}
.cn-v3 .v3-expense .v3-ledger-filters input:checked + .v3-ledger-filter {
  color: var(--v3-cyan); border-color: var(--v3-cyan-line); background: var(--v3-cyan-soft);
}
.cn-v3 .v3-expense .v3-ledger-filters input:focus-visible + .v3-ledger-filter {
  outline: 2px solid var(--v3-cyan); outline-offset: 2px;
}
.cn-v3 .v3-expense .v3-ledger-count {
  margin: 0; font-size: 0.77rem; font-weight: 600; color: var(--v3-text-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cn-v3 .v3-expense .v3-ledger-count .v3-lc-under { color: var(--v3-green); }
.cn-v3 .v3-expense .v3-ledger-count .v3-lc-over { color: var(--v3-cyan); }
.cn-v3 .v3-expense .v3-ledger-rows { display: grid; gap: 0.4rem; }
.cn-v3 .v3-expense .v3-ledger-row {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.45rem 0.8rem;
  border-radius: var(--v3-r-sm);
  background: var(--v3-surface); border: 1px solid var(--v3-line);
}
.cn-v3 .v3-expense .v3-ledger-name {
  flex: 1; min-width: 0; font-size: 0.84rem; font-weight: 600; color: var(--v3-text-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cn-v3 .v3-expense .v3-ledger-amount {
  font-size: 0.8rem; font-weight: 600; color: var(--v3-text-muted);
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.cn-v3 .v3-expense .v3-ledger-badge {
  flex-shrink: 0; font-size: 0.67rem; font-weight: 700;
  padding: 0.22rem 0.58rem; border-radius: var(--v3-r-pill); white-space: nowrap;
}
.cn-v3 .v3-expense .v3-lb-under { color: var(--v3-green); background: var(--v3-green-soft); border: 1px solid var(--v3-green-line); }
.cn-v3 .v3-expense .v3-lb-over { color: var(--v3-cyan); background: var(--v3-cyan-soft); border: 1px solid var(--v3-cyan-line); }
/* CSS-filter (skjulte radios + :has). Uten :has-støtte → ingen regel matcher → alle rader vises. */
.cn-v3 .v3-expense .v3-ledger:has(input[value="under"]:checked) .v3-ledger-row[data-status="over"],
.cn-v3 .v3-expense .v3-ledger:has(input[value="over"]:checked) .v3-ledger-row[data-status="under"] { display: none; }

/* Reduced-motion: ingen konvolutt-flyvning; «sendt» vises statisk (gardér selv om
   .v3-sticky--anim utilsiktet skulle finnes — v3.js legger den ikke til ved reduced). */
@media (prefers-reduced-motion: reduce) {
  .cn-v3 .v3-expense .v3-invite-envelope,
  .cn-v3 .v3-expense .v3-invite-compose,
  .cn-v3 .v3-expense .v3-invite-sent { animation: none !important; }
  .cn-v3 .v3-expense.v3-sticky--anim .v3-invite-compose { display: none; }
  .cn-v3 .v3-expense.v3-sticky--anim .v3-invite-sent { position: static; opacity: 1; transform: none; }
}

/* ───────── INTEGRASJONER (.v3-connect — mørk seksjon m/ rullerende logostripe)
   Samme mørke øy-uttrykk som .v3-show/.v3-ai/.v3-expense. Tre flate verdipunkter
   (ikon + h3 + p, underordnet) + en kontinuerlig logo-marquee (2× chip-sett →
   translateX(0→-50%) = sømløs løkke; spacing via margin-PÅ-chip, ikke gap, så
   -50% lander eksakt). Pause på hover + når utenfor viewport (initTrustMarquee).
   Mykt kant-fade via mask. Reduced-motion → statisk, wrappet, sentrert. ───── */
.cn-v3 .v3-connect {
  position: relative;
  padding: var(--v3-sp-12) 0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(0, 227, 227, 0.10), transparent 60%),
    linear-gradient(180deg, var(--v3-ink) 0%, var(--v3-bg) 100%);
  color: var(--v3-text);
  overflow: clip;
}
.cn-v3 .v3-connect .v3-section-head h2 { color: var(--v3-text-strong); }
.cn-v3 .v3-connect .v3-section-head h2 .v3-accent {
  color: var(--v3-cyan);
  text-shadow: 0 0 40px rgba(0, 227, 227, 0.35);
}
.cn-v3 .v3-connect .v3-section-head p { color: var(--v3-text-muted); }

/* Tre verdipunkter — flate kolonner (ingen kort-chrome → marqueen er fokus) */
.cn-v3 .v3-connect-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 3vw, 2.6rem);
  max-width: 1000px;
  margin: 0 auto clamp(2.6rem, 5vw, 3.6rem);
}
/* Dempet, badge-løst line-ikon (cyan) → verdipunktene underordnes marqueen */
.cn-v3 .v3-connect-ico {
  display: inline-flex;
  margin-bottom: 0.7rem;
  color: var(--v3-cyan);
}
.cn-v3 .v3-connect-ico svg { width: 25px; height: 25px; }
.cn-v3 .v3-connect-value h3 { font-size: 1.12rem; margin: 0 0 0.45rem; color: var(--v3-text-strong); }
.cn-v3 .v3-connect-value p { font-size: 0.95rem; line-height: 1.55; margin: 0; color: var(--v3-text-muted); }

/* Rullerende logostripe */
.cn-v3 .v3-connect-marquee {
  position: relative;
  overflow: hidden;   /* klipper det brede sporet → ingen sidescroll @360px */
  /* vertikal luft så overflow:hidden ikke klipper chip-skyggen (--v3-shadow-soft) */
  padding: clamp(1.25rem, 3vw, 1.75rem) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cn-v3 .v3-connect-track {
  display: flex;
  width: max-content;
  align-items: stretch;
  animation: v3-connect-scroll 40s linear infinite;
}
.cn-v3 .v3-connect-track .v3-brand {
  flex-shrink: 0;
  margin-right: clamp(0.85rem, 2vw, 1.4rem);   /* spacing PÅ chip → sømløs -50% */
  box-shadow: var(--v3-shadow-soft);           /* mørkt token (ikke ph-skyggen som forsvinner på mørk øy) */
}
/* Chip-ene er ikke-klikkbare spans → nøytraliser den arvede løft-hover-en
   (falsk klikkbar-affordans); hele stripa pauser uansett på hover. */
.cn-v3 .v3-connect-track .v3-brand:hover {
  transform: none;
  border-color: var(--v3-line-strong);
  box-shadow: var(--v3-shadow-soft);
  will-change: auto;
}
.cn-v3 .v3-connect-track .v3-brand-name { white-space: nowrap; }
.cn-v3 .v3-connect-marquee:hover .v3-connect-track { animation-play-state: paused; }
@keyframes v3-connect-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 760px) {
  .cn-v3 .v3-connect-values { grid-template-columns: 1fr; gap: 1.8rem; max-width: 460px; }
}
@media (prefers-reduced-motion: reduce) {
  /* Statisk: ingen scroll, vis kun ett sett (dup skjult), wrappet + sentrert. */
  .cn-v3 .v3-connect-track {
    animation: none;
    transform: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(0.7rem, 2vw, 1rem);
  }
  .cn-v3 .v3-connect-track .v3-brand { margin-right: 0; }
  .cn-v3 .v3-connect-track .v3-brand-dup { display: none; }
  .cn-v3 .v3-connect-marquee { -webkit-mask-image: none; mask-image: none; }
}

/* ═══════════════════════════════════════════════════════════════
   7 — CN + CLAUDE  (.v3-ai — chat-konsoll, lese-kun AI-assistent)
   ───────────────────────────────────────────────────────────────
   Mørk øy på det lyse lerretet (samme uttrykk som turnus-/Expense-
   scenene). To-delt på desktop: VENSTRE = venstrejustert seksjonshode
   + «Enkelt å koble til»-stigen (.v3-flow), HØYRE = mørk chat-konsoll
   (gjenbruker .v3-show-frame.v3-dark + .v3-grid-bar). De fem
   spørsmål/svar-parene ligger absolutt oppå hverandre; kun .is-active
   vises via opacity-crossfade + subtil translateY (samme crossfade-DNA
   som .v3-show--anim). v3.js (initAssistantScene) auto-roterer og styrer
   fanene; INGEN GSAP-pin, INGEN sticky (de to scroll-scenene er urørt).

   • FALLBACK (standard, INGEN .v3-ai--anim): alle 5 par i normal vertikal
     flyt, fullt synlige som en statisk eksempel-logg; fanene er statiske
     etiketter. Full lesbarhet for no-JS / reduced-motion / mobil.
   • ANIMERT (.v3-ai--anim, settes av v3.js KUN med .cn-v3-js og uten
     reduced-motion): parene legges absolutt oppå hverandre, kun .is-active
     synlig; auto-rotasjon + klikkbare faner.
   Kun transform/opacity animeres. Bevegelse reduced-motion-gated nederst.
═══════════════════════════════════════════════════════════════ */
.cn-v3 .v3-ai {
  position: relative;
  padding: var(--v3-sp-12) 0;
  /* Mørk øy: dyp navy-base + subtil cyan-glød øverst (samme som .v3-show). */
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(0, 227, 227, 0.10), transparent 60%),
    linear-gradient(180deg, var(--v3-ink) 0%, var(--v3-bg) 100%);
  color: var(--v3-text);
  overflow: hidden;
}
.cn-v3 .v3-ai-inner {
  display: grid;
  /* Video dominerer side-ved-side: smal tekstkolonne, klart størst video. */
  grid-template-columns: 0.62fr 1.38fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

/* ── VENSTRE: venstrejustert hode + stige ── */
.cn-v3 .v3-ai-copy { min-width: 0; }
/* Seksjonshode venstrejustert (overstyrer .v3-section-head sentrering). */
.cn-v3 .v3-ai-head {
  max-width: none;
  margin: 0 0 clamp(1.8rem, 3vw, 2.4rem);
  text-align: left;
}
/* Mørk øy → re-asserter LYS tekst (vinner over lerret-overstyringene
   .cn-v3 .v3-section-head h2{color:ink} m.fl. lenger oppe). */
.cn-v3 .v3-ai-head h2 { color: var(--v3-text-strong); }
.cn-v3 .v3-ai-head h2 .v3-accent {
  color: var(--v3-cyan);
  text-shadow: 0 0 40px rgba(0, 227, 227, 0.35);
}
.cn-v3 .v3-ai-head p { color: var(--v3-text-muted); max-width: 52ch; }

.cn-v3 .v3-ai-flow-label {
  font-family: "Inter", sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v3-cyan);
  margin: 0 0 1rem;
}
.cn-v3 .v3-ai-flow { gap: 0.8rem; }
/* Stigen står på mørk øy: gjenbruker .v3-flow-step men teksten må være lys. */
.cn-v3 .v3-ai-flow .v3-flow-step { align-items: flex-start; }
.cn-v3 .v3-ai-flow .v3-flow-no { margin-top: 1px; }
.cn-v3 .v3-ai-flow .v3-flow-text { color: var(--v3-text); line-height: 1.5; }
.cn-v3 .v3-ai-flow .v3-flow-text b { color: var(--v3-text-strong); }

.cn-v3 .v3-ai-actions { margin-top: 1.8rem; }
.cn-v3 .v3-ai-note {
  margin: 1.2rem 0 0;
  max-width: 52ch;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--v3-text-faint);
}

/* ── HØYRE: video + chat-konsoll stablet vertikalt i samme kolonne
   (.v3-ai-video-col). Begge gjenbruker den mørke nettleser-rammen
   (.v3-show-frame.v3-dark + .v3-grid-bar). ── */
.cn-v3 .v3-ai-console { min-width: 0; }
.cn-v3 .v3-ai-console .v3-show-frame { margin: 0; }
/* Høyre kolonne stables vertikalt: [video-ramme] + [chat-konsoll], med gap.
   Fyller tomrommet under videoen og balanserer mot venstre kolonne. */
.cn-v3 .v3-ai-video-col {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.5rem);
}

/* Video i høyre kolonne: fyller rammen under grid-baren. Skjermopptaket har
   svart marg BAKT INN (≈16 % øverst, ≈10 % nederst) — derfor gjøres boksen
   lavere enn kilden (aspect 2.8/1 < kildens ~2.076) så object-fit:cover
   beskjærer bort de svarte båndene. .v3-ai-video-frame arver overflow:hidden
   fra .v3-show-frame → rent klipp. Aspect reserverer høyden (ingen CLS).
   NB: verdiene er SKJERMBILDE-utledet (ikke fra eksakte videopiksler) og kan
   finjusteres — aspect ~2.7–2.9, object-position-Y ~58–66 %. */
.cn-v3 .v3-ai-video-frame { margin: 0; }
.cn-v3 .v3-ai-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2.8 / 1;
  object-fit: cover;
  object-position: center 63%;
  background: var(--v3-ink);
}
.cn-v3 .v3-ai-video-cap {
  margin: 0;
  padding: 0.85rem 1.1rem 1rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--v3-text-muted);
  border-top: 1px solid var(--v3-line);
}

/* Chat-konsoll: ligger nå i høyre kolonne, rett UNDER videoen. Fyller
   kolonnens bredde (margin:0 arves fra .v3-ai-console .v3-show-frame; gap mot
   videoen styres av .v3-ai-video-col flex-gap). */
.cn-v3 .v3-ai-console-row .v3-show-frame {
  max-width: none;
}

/* Innholdsflate UNDER grid-baren: chat-tråd + faner i et eget padding-rom. */
.cn-v3 .v3-ai-stage {
  position: relative;
  /* Reserver høyde så boble-bytte aldri gir layout-shift (CLS). */
  min-height: 248px;
  padding: 1.4rem 1.4rem 0.4rem;
}
/* FALLBACK: alle tråder i normal vertikal flyt (statisk eksempel-logg). */
.cn-v3 .v3-ai-thread { margin: 0; }
.cn-v3 .v3-ai-thread + .v3-ai-thread {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--v3-line);
}

/* Chat-bobler */
.cn-v3 .v3-ai-msg { display: flex; gap: 0.6rem; }
.cn-v3 .v3-ai-msg + .v3-ai-msg { margin-top: 0.7rem; }
.cn-v3 .v3-ai-msg p {
  margin: 0;
  max-width: 80%;
  padding: 0.7rem 0.95rem;
  border-radius: var(--v3-r-md);
  font-size: 0.94rem;
  line-height: 1.5;
}
/* Bruker: høyrejustert, cyan-tonet (tekst i strong for AA på cyan-soft). */
.cn-v3 .v3-ai-msg-user { justify-content: flex-end; }
.cn-v3 .v3-ai-msg-user p {
  background: var(--v3-cyan-soft);
  border: 1px solid var(--v3-cyan-line);
  color: var(--v3-text-strong);
  border-bottom-right-radius: var(--v3-r-xs);
}
/* Assistent: venstrejustert, dempet surface-flate. */
.cn-v3 .v3-ai-msg-bot { justify-content: flex-start; align-items: flex-end; }
.cn-v3 .v3-ai-msg-bot p {
  background: var(--v3-surface);
  border: 1px solid var(--v3-line);
  color: var(--v3-text);
  border-bottom-left-radius: var(--v3-r-xs);
}
.cn-v3 .v3-ai-avatar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--v3-cyan-soft);
  border: 1px solid var(--v3-cyan-line);
  color: var(--v3-cyan);
}
.cn-v3 .v3-ai-avatar svg { width: 17px; height: 17px; }

/* ── Faner (tablist): klikkbare piller ── */
.cn-v3 .v3-ai-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.4rem 1.4rem 1.4rem;
  border-top: 1px solid var(--v3-line);
  margin-top: 0.6rem;
}
.cn-v3 .v3-ai-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-family: "Inter", sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.5rem 0.95rem;
  border-radius: var(--v3-r-pill);
  border: 1px solid var(--v3-line-strong);
  background: rgba(150, 180, 230, 0.05);
  color: var(--v3-text-muted);
  cursor: pointer;
  transition: background 240ms var(--v3-ease), color 240ms var(--v3-ease),
              border-color 240ms var(--v3-ease), box-shadow 240ms var(--v3-ease);
}
/* ≥44px treffflate uten å endre den visuelle pillen (usynlig hit-area). */
.cn-v3 .v3-ai-tab::before {
  content: "";
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 44px;
  transform: translateY(-50%);
}
.cn-v3 .v3-ai-tab:hover { color: var(--v3-text-strong); background: rgba(150, 180, 230, 0.10); }
.cn-v3 .v3-ai-tab.is-active {
  color: var(--v3-on-accent);
  background: var(--v3-cyan);
  border-color: var(--v3-cyan);
  box-shadow: 0 0 0 1px var(--v3-cyan-line), 0 0 16px -2px rgba(0, 227, 227, 0.5);
}
.cn-v3 .v3-ai-tab:focus-visible { outline: 2px solid var(--v3-cyan); outline-offset: 3px; }

/* ── ANIMERT MODUS (.v3-ai--anim, settes av v3.js) ──
   Trådene legges absolutt oppå hverandre; kun .is-active synlig med en
   rolig opacity + translateY-crossfade (samme uttrykk som .v3-show--anim). */
.cn-v3 .v3-ai--anim .v3-ai-stage {
  display: grid;
}
.cn-v3 .v3-ai--anim .v3-ai-thread {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(10px) scale(0.99);
  transition: opacity 520ms var(--v3-ease), transform 520ms var(--v3-ease);
  pointer-events: none;
}
.cn-v3 .v3-ai--anim .v3-ai-thread.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.cn-v3 .v3-ai--anim .v3-ai-thread + .v3-ai-thread {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ── Forside-showcase + expense: responsiv ── */
@media (max-width: 1024px) {
  /* 861–1024px: anim-klassen KAN være satt (JS-terskel = ≥861px). Smale
     2-kol blir trang → fall tilbake til ÉN kolonne: steg over, sticky-
     media under. Sticky beholdes (top-justert) men i full bredde. */
  .cn-v3 .v3-sticky--anim .v3-sticky {
    grid-template-columns: 1fr;
    gap: 2.6rem;
  }
  .cn-v3 .v3-sticky--anim .v3-sticky-step {
    min-height: 0;
    max-width: 60ch;
    opacity: 1;
    transform: none;
    display: block;
  }
  .cn-v3 .v3-sticky--anim .v3-sticky-step:first-child,
  .cn-v3 .v3-sticky--anim .v3-sticky-step:last-child { min-height: 0; padding: 0; }
  .cn-v3 .v3-sticky--anim .v3-sticky-step + .v3-sticky-step { margin-top: 2.2rem; }
  /* Sticky-media av i 1-kol (uten en ledsagende scroll-kolonne gir sticky
     ingen mening) → vis kun aktivt shot som vanlig blokk øverst-på-skjerm. */
  .cn-v3 .v3-sticky--anim .v3-sticky-media {
    position: static;
    max-width: 720px;
    margin: 0 auto;
  }

  /* CN + Claude: med så smal tekstkolonne blir 861–1024px for trangt for
     stige-teksten → stable allerede her (hode + stige først, så video +
     chat-konsoll stablet i høyre kolonne under). */
  .cn-v3 .v3-ai-inner { grid-template-columns: 1fr; gap: 2.6rem; }
  .cn-v3 .v3-ai-head p,
  .cn-v3 .v3-ai-note { max-width: none; }
  .cn-v3 .v3-ai-console { max-width: 720px; margin: 0 auto; width: 100%; }
}

@media (max-width: 860px) {
  /* ≤860px: showcase er ALLTID fallback (v3.js setter aldri .v3-show--anim
     her). Sikre at enheten/teksten ikke renner over på smale skjermer. */
  .cn-v3 .v3-show-device { max-width: 100%; }
  .cn-v3 .v3-show-stage { gap: 2rem; }
  /* Telefon-raden: fire-på-rad får ikke plass → 2×2-rutenett (ingen
     horisontal overflow @360px). Hver telefon fyller cellen sin. */
  .cn-v3 .v3-show-phones {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.8rem, 3vw, 1.4rem);
    max-width: 440px;
    margin: 0 auto;
  }
  .cn-v3 .v3-show-phone { width: 100%; }
  /* Expense-fallback på mobil: steg + media stablet, lesbart, ingen overflow. */
  .cn-v3 .v3-sticky-media { max-width: 640px; margin: 0 auto; width: 100%; }
  .cn-v3 .v3-sticky-step { max-width: none; }

  /* CN + Claude: kolonnene er allerede stablet fra ≤1024px (se over).
     Her strammer vi inn maks-bredden for telefon. Chat-konsollen ligger nå
     inni kolonnen (under videoen) → arver bredden, ingen egne regler her. */
  .cn-v3 .v3-ai-console { max-width: 640px; }
}

@media (max-width: 520px) {
  .cn-v3 .v3-show { padding: var(--v3-sp-10) 0; }
  .cn-v3 .v3-show-step h3 { font-size: clamp(1.35rem, 6vw, 1.7rem); }
  .cn-v3 .v3-expense { padding: var(--v3-sp-10) 0; }
  .cn-v3 .v3-sticky-step h3 { font-size: clamp(1.35rem, 6vw, 1.7rem); }
  .cn-v3 .v3-ai { padding: var(--v3-sp-10) 0; }
  .cn-v3 .v3-ai-stage { padding: 1.1rem 1.1rem 0.3rem; min-height: 0; }
  .cn-v3 .v3-ai-tabs { padding: 0.4rem 1.1rem 1.1rem; }
  .cn-v3 .v3-ai-msg p { max-width: 88%; font-size: 0.9rem; }
  .cn-v3 .v3-ai-video-cap { padding: 0.75rem 1.1rem 0.9rem; }
}

/* ── Motion-gating: showcase-bevegelse av ved reduced-motion ──
   (JS legger aldri .v3-show--anim / .v3-sticky--anim ved reduced-motion,
   men vi nuller transitions for sikkerhets skyld om klassen henger igjen.) */
@media (prefers-reduced-motion: reduce) {
  /* Plattform-visning + Expense-sticky: full reset om en anim-klasse noen gang
     skulle henge igjen (JS legger den aldri ved reduced-motion). Tving alt
     tilbake til synlig, stablet flyt — speiler fallback (samme prinsipp som
     Claude-scenen under). Defense-in-depth; endrer ikke dagens oppførsel. */
  .cn-v3 .v3-show--anim .v3-show-device { display: block; min-height: 0; }
  .cn-v3 .v3-show--anim .v3-show-browser,
  .cn-v3 .v3-show--anim .v3-show-phones,
  .cn-v3 .v3-show--anim .v3-show-phones .v3-show-phone {
    grid-area: auto;
    opacity: 1;
    transform: none;
    transition: none;
    pointer-events: auto;
  }
  .cn-v3 .v3-show--anim .v3-show-steps { display: block; }
  .cn-v3 .v3-show--anim .v3-show-dots { display: none; }
  .cn-v3 .v3-show--anim .v3-show-shot,
  .cn-v3 .v3-sticky--anim .v3-show-shot {
    position: relative; /* fallback-verdi for .v3-show-shot (bevarer label-/sideknapp-ankring) */
    opacity: 1;
    transform: none;
    transition: none;
    pointer-events: auto;
  }
  .cn-v3 .v3-show--anim .v3-show-step,
  .cn-v3 .v3-sticky--anim .v3-sticky-step {
    grid-area: auto;
    opacity: 1;
    transform: none;
    transition: none;
    pointer-events: auto;
  }
  /* Ruting-diagram (shot 2, is-output): nøytraliser per-steg-glød om .v3-sticky--anim
     skulle henge igjen (JS legger den aldri ved reduced-motion — gating i v3.js:244). */
  .cn-v3 .v3-sticky--anim .is-output .v3-route-dest { box-shadow: none; }
  /* CN + Claude: nuller crossfade OG grid-stacking om .v3-ai--anim henger
     igjen (JS legger den aldri ved reduced-motion). Stagen tilbake til normal
     flyt + alle tråder synlige/interaktive → vertikalt stablede, lesbare par. */
  .cn-v3 .v3-ai--anim .v3-ai-stage {
    display: block;
  }
  .cn-v3 .v3-ai--anim .v3-ai-thread {
    grid-area: auto;
    position: static;
    opacity: 1;
    transform: none;
    transition: none;
    pointer-events: auto;
  }
  /* Gjenopprett separatoren mellom par så de stablede trådene blir adskilt. */
  .cn-v3 .v3-ai--anim .v3-ai-thread + .v3-ai-thread {
    margin-top: 1.4rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--v3-line);
  }
}

/* ═══════════════════════════════════════════════════════════════
   PLAN & TIME: MODUL-SEKSJONER  (KUN tjenester.html)
   ───────────────────────────────────────────────────────────────
   Seks feature-rader for Plan & Time på det LYSE lerretet. De fem
   første visuelle figurene er mørke «øyer» (v3-frame / v3-mock) med
   lys-på-mørk tekst, bygget i CSS uten bilder: månedskalender,
   dashbord-KPI + ukestrip, vakt-flyt-feed, AI-chat (gjenbruk av
   .v3-chat) og rolle-diagram. Lønn-figuren gjenbruker .v3-steps +
   .v3-integr direkte på lerretet. All tekst inne i de mørke øyene må
   sette farge eksplisitt fra --v3-*-tokenene (lerretets --ph-body
   ville ellers gi mørk-på-mørk). Cyan kun på dekor, ikke brødtekst.
   Additivt: alle selektorer er nye .v3-cal*-klasser → rører ingen
   delt komponent og påvirker ingen annen side.
═══════════════════════════════════════════════════════════════ */

/* ── Hero uten bilde: én kolonne, tekst-forankret (scoped til tjenester) ── */
.cn-v3.page-tjenester .v3-subhero-solo {
  grid-template-columns: 1fr;
  gap: 0;
}
.cn-v3.page-tjenester .v3-subhero-solo .v3-subhero-copy { max-width: 760px; }
.cn-v3.page-tjenester .v3-subhero-solo .v3-subhero-sub { max-width: 62ch; }

/* ── Figur-bredde når feature-radene stables (≤1024px). Scoped til de nye
   .v3-cal-fig-figurene → rører ikke #expense sin .v3-feature-scene. ── */
@media (max-width: 1024px) {
  .cn-v3 .v3-cal-fig {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── Seksjon 1: månedskalender-mock (i .v3-frame-web, mørk ink-øy) ── */
.cn-v3 .v3-cal-month { padding: 0.9rem 1rem 1.15rem; }
.cn-v3 .v3-cal-dow {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px;
  margin-bottom: 6px;
}
.cn-v3 .v3-cal-dow span {
  text-align: center; font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--v3-text-faint);
}
.cn-v3 .v3-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cn-v3 .v3-cal-cell {
  display: flex; flex-direction: column; gap: 3px;
  min-height: clamp(42px, 8.5vw, 54px);
  padding: 4px 5px;
  border-radius: 9px;
  background: var(--v3-surface);
  border: 1px solid var(--v3-line);
  overflow: hidden;
}
.cn-v3 .v3-cal-cell--off { background: rgba(150, 180, 230, 0.03); }
.cn-v3 .v3-cal-cell--muted { opacity: 0.4; }
.cn-v3 .v3-cal-cell--today {
  border-color: var(--v3-cyan-line);
  box-shadow: inset 0 0 0 1px var(--v3-cyan-line);
}
.cn-v3 .v3-cal-date { font-size: 0.62rem; font-weight: 600; color: var(--v3-text-muted); line-height: 1; }
.cn-v3 .v3-cal-cell--today .v3-cal-date { color: var(--v3-cyan); }
.cn-v3 .v3-cal-chip {
  margin-top: auto;
  border-radius: 5px;
  padding: 2px 4px;
  font-size: 0.66rem; font-weight: 600; line-height: 1.15;
  letter-spacing: 0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cn-v3 .v3-cal-chip b { display: block; font-weight: 700; }
.cn-v3 .v3-cal-chip--day { background: var(--v3-cyan-soft); border: 1px solid var(--v3-cyan-line); color: var(--v3-text-strong); }
.cn-v3 .v3-cal-chip--ferie { background: var(--v3-green-soft); border: 1px solid var(--v3-green-line); color: var(--v3-text-strong); }
.cn-v3 .v3-cal-chip--em { background: var(--v3-warn-soft); border: 1px solid var(--v3-warn-line); color: var(--v3-warn-text); }

/* ── Seksjon 2: dashbord-KPI + ukestrip (i .v3-mock) ── */
.cn-v3 .v3-cal-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.65rem; margin-bottom: 1.1rem; }
.cn-v3 .v3-cal-kpi {
  padding: 0.8rem 0.85rem; border-radius: var(--v3-r-sm);
  background: var(--v3-surface); border: 1px solid var(--v3-line);
}
.cn-v3 .v3-cal-kpi-label { display: block; font-size: 0.71rem; font-weight: 500; color: var(--v3-text-faint); margin-bottom: 0.4rem; }
.cn-v3 .v3-cal-kpi-val {
  display: block;
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: clamp(1.05rem, 3.2vw, 1.4rem); line-height: 1;
  color: var(--v3-text-strong); font-variant-numeric: tabular-nums;
}
.cn-v3 .v3-cal-kpi-val .u {
  font-family: "Inter", sans-serif; font-size: 0.7rem; font-weight: 500;
  color: var(--v3-text-muted); margin-left: 0.3rem;
}
.cn-v3 .v3-cal-week-label { display: block; font-size: 0.71rem; font-weight: 500; color: var(--v3-text-faint); margin-bottom: 0.55rem; }
.cn-v3 .v3-cal-week-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 0.85rem; }
.cn-v3 .v3-cal-day7 {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 0.5rem 0; border-radius: 10px;
  background: var(--v3-surface); border: 1px solid var(--v3-line);
}
.cn-v3 .v3-cal-day7 i { font-style: normal; font-size: 0.66rem; font-weight: 600; color: var(--v3-text-muted); }
.cn-v3 .v3-cal-day7 b { width: 7px; height: 7px; border-radius: 50%; background: var(--v3-surface-3); }
.cn-v3 .v3-cal-day7.is-today { border-color: var(--v3-cyan-line); }
.cn-v3 .v3-cal-day7.is-work b { background: var(--v3-cyan); box-shadow: 0 0 8px -1px rgba(0, 227, 227, 0.7); }
.cn-v3 .v3-cal-day7.is-logged b { background: var(--v3-green); }
.cn-v3 .v3-cal-day7.is-absent b { background: var(--v3-warn); }
.cn-v3 .v3-cal-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.cn-v3 .v3-cal-legend span { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; color: var(--v3-text-muted); }
.cn-v3 .v3-cal-legend i { width: 8px; height: 8px; border-radius: 50%; }
.cn-v3 .v3-cal-legend .dot-work { background: var(--v3-cyan); }
.cn-v3 .v3-cal-legend .dot-logged { background: var(--v3-green); }
.cn-v3 .v3-cal-legend .dot-absent { background: var(--v3-warn); }

/* ── Seksjon 3: vakt-flyt-feed (i .v3-mock) ── */
.cn-v3 .v3-cal-feed { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.cn-v3 .v3-cal-feed-row {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.7rem 0.8rem; border-radius: var(--v3-r-sm);
  background: var(--v3-surface); border: 1px solid var(--v3-line);
}
.cn-v3 .v3-cal-feed-ico {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--v3-cyan-soft); border: 1px solid var(--v3-cyan-line); color: var(--v3-cyan);
}
.cn-v3 .v3-cal-feed-ico svg { width: 16px; height: 16px; }
.cn-v3 .v3-cal-feed-ico--ok { background: var(--v3-green-soft); border-color: var(--v3-green-line); color: var(--v3-green); }
.cn-v3 .v3-cal-feed-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cn-v3 .v3-cal-feed-text b { font-size: 0.9rem; font-weight: 600; color: var(--v3-text-strong); }
.cn-v3 .v3-cal-feed-text span { font-size: 0.76rem; color: var(--v3-text-faint); }
.cn-v3 .v3-cal-feed-tag {
  margin-left: auto; flex-shrink: 0;
  font-size: 0.71rem; font-weight: 700;
  padding: 0.28rem 0.65rem; border-radius: var(--v3-r-pill);
}
.cn-v3 .v3-cal-feed-tag--open { color: var(--v3-text); background: rgba(150, 180, 230, 0.08); border: 1px solid var(--v3-line-strong); }
.cn-v3 .v3-cal-feed-tag--yes { color: var(--v3-cyan); background: var(--v3-cyan-soft); border: 1px solid var(--v3-cyan-line); }
.cn-v3 .v3-cal-feed-tag--ok { color: var(--v3-green); background: var(--v3-green-soft); border: 1px solid var(--v3-green-line); }
.cn-v3 .v3-cal-feed-tag--push { color: var(--v3-cyan); background: var(--v3-cyan-soft); border: 1px solid var(--v3-cyan-line); }

/* ── Seksjon 5: rolle-/organisasjons-diagram (lettere, i .v3-mock med topp-bar) ── */
.cn-v3 .v3-cal-orgmock .v3-mock-body { padding: 1.5rem 1.3rem; }
.cn-v3 .v3-cal-org { display: grid; gap: 1.4rem; margin: 0; padding: 0; list-style: none; }
.cn-v3 .v3-cal-org-node {
  position: relative;
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.9rem 1rem; border-radius: var(--v3-r-sm);
  background: var(--v3-surface); border: 1px solid var(--v3-line);
}
.cn-v3 .v3-cal-org-node:not(:last-child)::after {
  content: ""; position: absolute; left: 32px; bottom: -1.4rem;
  width: 2px; height: 1.4rem; border-radius: 2px;
  background: linear-gradient(180deg, var(--v3-cyan-line), rgba(0, 227, 227, 0.04));
}
.cn-v3 .v3-cal-org-ico {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--v3-cyan-soft); border: 1px solid var(--v3-cyan-line); color: var(--v3-cyan);
}
.cn-v3 .v3-cal-org-ico svg { width: 18px; height: 18px; }
.cn-v3 .v3-cal-org-node--ansatt .v3-cal-org-ico {
  background: rgba(150, 180, 230, 0.08); border-color: var(--v3-line-strong); color: var(--v3-text-muted);
}
.cn-v3 .v3-cal-org-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cn-v3 .v3-cal-org-text b { font-size: 0.95rem; font-weight: 600; color: var(--v3-text-strong); }
.cn-v3 .v3-cal-org-text span { font-size: 0.78rem; color: var(--v3-text-faint); }
.cn-v3 .v3-cal-org-scope {
  margin-left: auto; flex-shrink: 0;
  font-size: 0.7rem; font-weight: 600;
  padding: 0.26rem 0.6rem; border-radius: var(--v3-r-pill);
  color: var(--v3-text-muted);
  background: rgba(150, 180, 230, 0.06); border: 1px solid var(--v3-line-strong);
}
.cn-v3 .v3-cal-org-node--admin .v3-cal-org-scope {
  color: var(--v3-cyan); background: var(--v3-cyan-soft); border-color: var(--v3-cyan-line);
}

/* ── Seksjon 6: lønn — gjenbrukt .v3-steps + .v3-integr på lerretet ──
   Innrammet LYST panel (speiler .v3-why-card-innrammingen, men holdt lyst så
   steg-tekst/-numre og integrasjons-chips forblir lesbare på lyst): lys
   overflate + ph-line-kant + ph-shadow-soft + r-lg-radius + padding, så den
   leser som en tydelig figur i stedet for å flyte lyst-på-lyst. */
.cn-v3 .v3-cal-export {
  display: grid; gap: 0;
  padding: 2rem;
  background: #fafcff;
  border: 1px solid var(--ph-line);
  border-radius: var(--v3-r-lg);
  box-shadow: var(--ph-shadow-soft);
}
.cn-v3 .v3-cal-export-integr {
  margin-top: 1.7rem; padding-top: 1.7rem;
  border-top: 1px solid var(--ph-line);
}

/* ═══════════════════════════════════════════════════════════════
   OM OSS  (scoped .page-om-oss)
   ───────────────────────────────────────────────────────────────
   Bildeløs «om oss»-side uten hero. Story-seksjonen er én sentrert
   lesekolonne: sentrert seksjonshode (delt .v3-section-head) over en
   sentrert prosa-blokk (dark-on-light via --ph-tokens). Ingen bilder,
   intet fakta-panel, intet kort-rutenett. Additivt: alle selektorer er
   scoped til .page-om-oss.
═══════════════════════════════════════════════════════════════ */

/* Heroen er fjernet → story-seksjonen er nå første seksjon og trenger egen
   klarering for den faste headeren (samme grep som .page-priser .v3-plans-sec). */
.cn-v3.page-om-oss .v3-story { padding: 8rem 0 var(--v3-sp-12); }

/* Rolig startkant over h1: kort, sentrert cyan-aksent som gir øyet et anker
   under den faste headeren uten å re-aktivere den globalt skjulte eyebrow-pillen
   (Fase 3). Ekko av .v3-svc-divider-toppstreken, men kort og sentrert, og lagt
   INNE i story-hodet (etter 8rem header-klaringen), aldri på .v3-story-toppen
   der den ville kollidert med den faste headeren. Animeres med hodet (v3-reveal). */
.cn-v3.page-om-oss .v3-story .v3-section-head::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin: 0 auto 1.4rem;
  border-radius: var(--v3-r-pill);
  background: var(--v3-cyan);
}

/* Story-seksjon: én sentrert lesekolonne (fakta-panelet er fjernet).
   Seksjonshodet er sentrert via det delte .v3-section-head; brødprosaen
   ligger i en sentrert blokk med venstrejustert tekst for rolig lesing. */
.cn-v3.page-om-oss .v3-story-main {
  max-width: 62ch;
  margin: 0 auto;
}

/* Forfremmet h1 (var h2): løftet til hero-skala (speiler .v3-subhero-title) så
   over-folden ikke føles tom på bredt lerret; beholder margin og
   dark-on-light-fargen, siden .v3-section-head h2-reglene ikke treffer h1. */
.cn-v3.page-om-oss .v3-section-head h1 {
  font-size: clamp(2.4rem, 5vw, 3.9rem);
  margin: 0 0 1rem;
  color: var(--ph-ink);
}

/* Lik lesebredde: scope introen til samme bredde som prosaen (62ch) så intro og
   brødtekst deler venstrekant (den delte .v3-section-head p er 56ch). Kun
   .page-om-oss → rører ikke intro-bredden på andre sider; margin auto bevart. */
.cn-v3.page-om-oss .v3-section-head p {
  max-width: 62ch;
  margin: 0 auto;
}

/* Prosa direkte på lerretet → dark-on-light. Fyller den sentrerte blokken. */
.cn-v3.page-om-oss .v3-story-main p {
  color: var(--ph-body);
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: none;
  margin-bottom: 1.2rem;
  text-wrap: pretty;
}
.cn-v3.page-om-oss .v3-story-main p:last-child { margin-bottom: 0; }
.cn-v3.page-om-oss .v3-story-lead {
  font-size: 1.22rem;
  line-height: 1.6;
  color: var(--ph-ink);
  font-weight: 500;
}
.cn-v3.page-om-oss .v3-story-main .v3-accent {
  color: var(--ph-teal);
  font-weight: 600;
  text-shadow: none;
}