/* ============================================================================
   Kervence landing — «Børsdagen» (scroll-craft, kapittel-editorial, 2026-09-02, revidert)

   Verdenslaget (tokens, fonter, .lys-btn, .rom, .annotasjon) bor i lys.css og den
   delte offentlige headeren i trust.css. Motoren (scrollcraft.css/js) ligger i
   static/vendor og redigeres aldri; den temaes kun gjennom --sc-*-tokens under.
   Alt annet her er sidens egen komposisjon.

   Standalone side: ingen style.css, så [hidden]-vakten må bo her
   (se test_hidden_attribute.py).
   ========================================================================== */
[hidden] { display: none !important; }

:root {
  /* --sc-*-tokenene mappes i offentlig.css (delt med tillitssidene). */
  /* Folioen tar venstre marg på brede skjermer; innholdet rykker inn like mye. */
  --folio-b: 13rem;
  --venstre: calc(var(--sc-gutter) + var(--folio-b));

  /* Settes av landing.js fra scrollposisjonen: 0 = 07:00, 1 = 18:00. */
  --dag: 0;
  --sol-x: 10%;
  --sol-y: 80%;
}
@media (max-width: 1180px) { :root { --folio-b: 6rem; } }
@media (max-width: 900px)  { :root { --folio-b: 0rem; } }

/* Grunnen males av motoren (--sc-canvas via drift) på body og propagerer til lerretet,
   så lyslaget under (z-index -1) synes gjennom de gjennomsiktige seksjonene. */
body { position: relative; }

/* ------------------------------------------------------------------ lyset */
/* Faste gullflekker på det lyse: ligger BAK alt innhold, ruller med siden, og får
   litt parallakse fra landing.js så de lever. Ugjennomsiktige flater dekker dem. */
.lyslag { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.flekk {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s); height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(236, 202, 130, 0.42), rgba(236, 202, 130, 0.16) 45%, transparent 100%);
  will-change: transform;
}
/* Ventelistens gull-lyskaster som henger etter musa (venteliste-mus.js lager
   elementet). Bak innholdet, som på ventelista, og dempet. */
.vl-lys {
  position: fixed; top: 0; left: 0; z-index: -2; pointer-events: none;
  width: 380px; height: 340px; margin: -170px 0 0 -190px;
  transform: translate3d(-9999px, -9999px, 0);
  will-change: transform; opacity: 0.5;
}
.vl-lys::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(46% 52% at 39% 41%, color-mix(in srgb, var(--sol-glod) 84%, transparent) 0%, transparent 62%),
    radial-gradient(40% 44% at 67% 61%, color-mix(in srgb, var(--sol) 56%, transparent) 0%, transparent 60%),
    radial-gradient(54% 50% at 58% 37%, color-mix(in srgb, var(--sol-glod) 46%, transparent) 0%, transparent 66%),
    radial-gradient(66% 64% at 47% 55%, color-mix(in srgb, var(--sol) 26%, transparent) 0%, transparent 64%);
  filter: blur(11px);
  transform-origin: 52% 48%;
}
@media (prefers-reduced-motion: no-preference) {
  .vl-lys::before { animation: vl-lys-morf 8.5s ease-in-out infinite alternate; }
}
@keyframes vl-lys-morf {
  from { transform: scale(1, 1) rotate(0deg); }
  to   { transform: scale(1.07, 0.95) rotate(5deg); }
}

/* ------------------------------------------------------------------ folio */
/* Reisens kart og klokke: dagslinja på høykant. Skjult til reisen begynner. */
.folio {
  position: fixed; z-index: 60;
  left: clamp(1rem, 2.4vw, 2rem); top: 14vh; bottom: 12vh;
  width: 11rem;
  opacity: 0; visibility: hidden;
  transition: opacity var(--tid-rom) var(--ease-ut), visibility 0s linear var(--tid-rom);
}
.folio--synlig { opacity: 1; visibility: visible; transition-delay: 0s; }
.folio__spor {
  position: absolute; left: 3rem; top: 0; bottom: 0;
  width: 6px; margin: 0; padding: 0; list-style: none;
  border-radius: 999px;
  background: linear-gradient(180deg,
    rgba(91, 107, 124, 0.28), rgba(91, 107, 124, 0.14) 18%,
    rgba(91, 107, 124, 0.14) 82%, rgba(91, 107, 124, 0.28));
}
.folio__straale {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  background: radial-gradient(200% 140px at 50% calc(var(--dag) * 100%),
    var(--sol) 0%, var(--sol-glod) 34%, transparent 72%);
}
.folio--stengt .folio__straale {
  background: radial-gradient(200% 140px at 50% calc(var(--dag) * 100%),
    var(--skygge) 0%, var(--skygge-svak) 34%, transparent 72%);
  opacity: 0.55;
}
.folio__tikk {
  position: absolute; left: -4px; top: calc(var(--t) * 100%);
  width: 14px; height: 1px; background: var(--kull-svak);
}
.folio__kap {
  position: absolute; left: 20px; top: calc(var(--t) * 100%);
  translate: 0 -50%; white-space: nowrap;
}
.folio__kap a {
  font-size: 0.78rem; color: var(--kull-svak); text-decoration: none;
  transition: color var(--tid-ui) var(--ease-ut);
}
.folio__kap a:hover { color: var(--kull); }
.folio__kap a[aria-current] { color: var(--kull); font-weight: 600; }
.folio__merke {
  position: absolute; left: 50%; top: calc(var(--dag) * 100%);
  translate: -50% -50%;
  width: 14px; height: 14px;
}
.folio__sol {
  display: block; width: 14px; height: 14px; border-radius: 50%;
  background: var(--kalk-lys); border: 2.5px solid var(--sol-blekk);
  box-shadow: 0 0 0 4px rgba(217, 165, 60, 0.28);
}
.folio--stengt .folio__sol { border-color: var(--skygge); box-shadow: 0 0 0 4px rgba(91, 107, 124, 0.2); }
.folio__tid {
  position: absolute; right: calc(100% + 10px); top: 50%; translate: 0 -50%;
  font-size: 0.82rem; font-weight: 600; color: var(--kull); white-space: nowrap;
}
.folio__fase {
  position: absolute; left: 0; top: calc(100% + 0.9rem); margin: 0;
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--kull-svak); white-space: nowrap;
}
@media (max-width: 1180px) {
  .folio { width: 4rem; }
  .folio__kap { display: none; }
}

/* -------------------------------------------------------------------- hero */
.hero { padding-block: clamp(2.5rem, 6vh, 4rem) clamp(3rem, 8vh, 5rem); }
.hero__inn {
  max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 4vw, 4rem); align-items: center;
}
.hero h1 {
  font-size: clamp(2.2rem, 1.2rem + 2.6vw, 3.3rem);
  line-height: 1.04; letter-spacing: -0.025em;
  max-width: 22ch; margin: 0 0 1.4rem;
}
.hero__lede { max-width: 50ch; font-size: 1.05rem; line-height: 1.55; color: var(--kull-myk); margin: 0 0 1.8rem; text-wrap: pretty; }
.hero__handling { margin: 0; display: flex; gap: 12px; flex-wrap: wrap; }
.figur--ferdig { --tegn: 1; }
.hero .f-etikett { font-size: 17px; }
.hero .f-node-tekst { font-size: 16px; }

/* -------------------------------------------------------------- funksjoner */
.funksjoner { padding-block: clamp(4rem, 10vh, 7rem); }
.funksjoner__inn { max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }
.funksjoner h2, .priser h2, .dagen h2 {
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); line-height: 1.1; margin: 0 0 2.2rem; max-width: 24ch;
}
.funksjoner__liste {
  margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 6vw, 6rem);
}
.funksjoner__liste > div {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; align-items: baseline;
  padding: 1.1rem 0; border-top: 1px solid var(--mortel);
}
.funksjoner__liste dt { font-weight: 600; color: var(--kull); }
.funksjoner__liste dd { margin: 0; color: var(--kull-myk); max-width: 40ch; }

/* ------------------------------------------------------------------- dagen */
.dagen { padding-block: clamp(5rem, 14vh, 10rem) clamp(2rem, 5vh, 3rem); }
.dagen__inn { max-width: calc(var(--sc-maxw) + var(--folio-b)); margin-inline: auto; padding-inline: var(--venstre) var(--sc-gutter); }
.dagen h2 { margin-bottom: 0.9rem; }
.dagen p { margin: 0; color: var(--kull-myk); font-size: 1.08rem; }

/* ----------------------------------------------------------------- kapitler */
/* Grunnen glir mellom kapitlene (data-sc-drift); seksjonene er gjennomsiktige. */
.kap { padding-block: clamp(4rem, 11vh, 8rem) clamp(4rem, 10vh, 8rem); }
.kap__inn {
  max-width: calc(var(--sc-maxw) + var(--folio-b));
  margin-inline: auto;
  padding-inline: var(--venstre) var(--sc-gutter);
}
.kap h2 {
  font-size: clamp(1.9rem, 1.2rem + 2.3vw, 3.1rem);
  line-height: 1.08; max-width: 24ch;
  margin: 0 0 clamp(2.5rem, 7vh, 4.5rem);
}
.kap__spredning {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.kap__tekst p { max-width: 44ch; font-size: 1.08rem; line-height: 1.6; color: var(--kull); margin: 0; text-wrap: pretty; }
.kap__tekst > p + p { margin-top: 1.25rem; }
.figur { margin: 0; }
.figur svg { width: 100%; height: auto; overflow: visible; }

/* figurpennen */
.f-akse { stroke: var(--stein); stroke-width: 1.6; stroke-linecap: round; }
.f-etikett { font-family: var(--font-sans); font-size: 13px; fill: var(--kull-myk); }
.f-etikett.mono { font-family: var(--font-mono); font-size: 12px; fill: var(--kull-svak); }
.f-midt { text-anchor: middle; }
.f-punkt { fill: var(--kull-svak); }
.f-punkt--sol { fill: var(--sol-blekk); }
.f-peiler { stroke: var(--kull-svak); stroke-width: 1.2; stroke-dasharray: 3 4; }
.f-linje { fill: none; stroke: var(--kull-svak); stroke-width: 1.8; stroke-linecap: round; }
.f-linje--sol { stroke: var(--sol-blekk); }
.f-node { fill: var(--kalk-lys); stroke: var(--kull); stroke-width: 1.6; }
.f-node--deg { stroke: var(--sol-blekk); stroke-width: 2; }
.f-node-tekst { fill: var(--kull); font-weight: 600; }
.f-laas-kropp { fill: var(--kalk-lys); stroke: var(--sol-blekk); stroke-width: 1.6; }
.f-laas-bogel { fill: none; stroke: var(--sol-blekk); stroke-width: 1.6; stroke-linecap: round; }
.f-fasit { fill: none; stroke: var(--kull-svak); stroke-width: 2; }
.f-hake, .f-kryss { fill: none; stroke: var(--kull-myk); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Morgenbriefen: samme rom-idiom som varselet. */
.brief { padding: 1.5rem 1.7rem 1.4rem; display: grid; gap: 0.9rem; max-width: 32rem; }
.brief__topp, .varsel__topp { display: flex; gap: 0.6rem; margin: 0; font-size: 0.78rem; color: var(--kull-svak); }
.brief__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.brief__liste li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 0.8rem; align-items: baseline; color: var(--kull); font-size: 0.98rem; line-height: 1.5; }
.brief__prikk { width: 10px; height: 10px; border-radius: 50%; background: var(--kull-svak); translate: 0 -1px; }
.brief__prikk--sol { background: var(--sol-blekk); }
.brief__notis, .varsel__notis { font-size: 0.78rem; font-style: italic; color: var(--kull-svak); margin: 0; }

/* ---------------------------------------------------------------- stillhet */
.stille {
  min-height: 70vh;
  display: grid; place-items: center;
  padding-left: var(--folio-b);
}
.stille__tid { margin: 0; font-size: 0.82rem; color: var(--kull-svak); }

/* ------------------------------------------------------------------ toppen */
.topp { display: grid; place-items: center; }
.topp__inn {
  position: relative; width: 100%;
  max-width: calc(var(--sc-maxw) + var(--folio-b));
  padding-inline: var(--venstre) var(--sc-gutter);
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 0 clamp(3rem, 8vw, 8rem);
  align-items: start;
}
.topp h2 { grid-column: 1 / -1; margin-bottom: clamp(2rem, 6vh, 3.6rem); }
.lop { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; align-content: start; }
.lop__linje { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 0.8rem; font-size: 1.08rem; line-height: 1.5; max-width: 34rem; }
.lop__linje time { color: var(--kull-svak); font-size: 0.82rem; padding-top: 0.32em; }
.lop__linje--du span { font-weight: 600; }
.lop__linje--resten { color: var(--kull-svak); }
.varsel { padding: 1.5rem 1.7rem 1.4rem; display: grid; gap: 0.7rem; max-width: 30rem; }
.varsel h3 { margin: 0; font-size: 1.22rem; line-height: 1.25; }
.varsel p { margin: 0; color: var(--kull-myk); font-size: 0.95rem; line-height: 1.5; }
.peiler { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.peiler path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, calc((var(--sc-p, 0) - 0.42) / 0.16), 1)); }
.peiler circle { opacity: clamp(0, calc((var(--sc-p, 0) - 0.56) / 0.04), 1); }

/* Alle sju seksjonene hadde `scroll-margin-top: 0` mens `.public-header` er klebrig og
   68 px høy på desktop, 116 på mobil der navigasjonen brytes -- så hvert eneste ankerhopp
   la seksjonens overskrift under headeren. Målt i Chrome 2026-09-10 ved å klikke «Priser».
   Én regel dekker alle sju, i stedet for én per seksjon som ville drevet fra hverandre. */
main section[id] { scroll-margin-top: clamp(5rem, 9vw, 8rem); }

/* -------------------------------------------------------------- følgelisten */
/* Paret: tekst til venstre, produktflaten til høyre. Brukes av «Start med oversikten» og
   følgelisten, så de to kapitlene deler rytme. Robert står øverst i tekstkolonnen. */
.par {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.par__tekst { position: relative; }
.par__tekst .maskott--kap { margin: 0 0 0.5rem -0.6rem; }
.par__tekst h2 { margin-bottom: 1.2rem; }
.par__tekst > p { margin: 0; max-width: 46ch; color: var(--kull-myk); font-size: 1.08rem; line-height: 1.6; }
.par .produkt { justify-self: end; width: 100%; }
.folgeliste__gir { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 0.8rem; }
.folgeliste__gir li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.8rem; align-items: baseline; }
.folgeliste__gir .mono { font-size: 0.78rem; color: var(--kull-svak); }
.folgeliste__gir span:last-child { color: var(--kull); font-size: 1.02rem; }
.folgeliste__gir small {
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  color: var(--sol-blekk); margin-left: 0.3rem;
}
.folgeliste__tokens {
  margin: 1.8rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--mortel);
  max-width: 46ch; color: var(--kull-myk); font-size: 1.02rem; line-height: 1.6;
}
.folgeliste__tokens strong { color: var(--kull); }
.produkt--folgeliste { max-width: 26rem; justify-self: end; width: 100%; }
.folgeliste__liste { list-style: none; margin: 0.9rem 0 0; padding: 0; counter-reset: plass; display: grid; gap: 0.45rem; }
.folgeliste__liste li {
  counter-increment: plass;
  display: grid; grid-template-columns: 1.3rem 2.15rem minmax(0, 1fr) auto; gap: 0.8rem; align-items: center;
  padding: 0.55rem 0.8rem; border-radius: 12px;
  background: var(--kalk); border: 1px solid var(--mortel);
}
.folgeliste__liste li::before {
  content: counter(plass); font-family: var(--font-mono); font-size: 0.74rem; color: var(--kull-svak);
  font-variant-numeric: tabular-nums;
}
.folgeliste__navn { font-weight: 600; color: var(--kull); font-size: 0.95rem; }
.folgeliste__tikker { font-size: 0.74rem; color: var(--kull-svak); }
.folgeliste__liste .folgeliste__ledig { background: transparent; border-style: dashed; grid-template-columns: 1.3rem minmax(0, 1fr); }
.folgeliste__ledig .folgeliste__navn { font-weight: 400; color: var(--kull-svak); font-style: italic; }
@media (max-width: 900px) {
  .par { grid-template-columns: 1fr; }
  .par .produkt, .produkt--folgeliste { justify-self: start; }
  .folgeliste__gir li { grid-template-columns: 5.5rem minmax(0, 1fr); }
}

/* ------------------------------------------------------ gjengitte flater */
/* Produktflatene gjengitt som HTML i stedet for skjermbilder: samme tekst, samme tall,
   samme lesning, men skarpt i alle størrelser og uten en dato bakt inn i piksler. Målestokken
   er litt mindre enn produktets egen (0,86 rem-grunn) så flatene får plass i figurbredden. */
.gj { font-size: 0.86rem; line-height: 1.55; color: var(--kull); padding: 1.1em 1.3em; }
.gj p { margin: 0; }
.gj__prikk { display: inline-block; width: 0.55em; height: 0.55em; border-radius: 50%; margin-right: 0.6em; vertical-align: middle; background: var(--kull-svak); }
.gj__prikk--plomme { background: #574a63; }
.gj__prikk--sol { background: var(--sol); }
.gj .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums lining-nums; }

/* Rapporten: to rom under hverandre. I det pinnede kapittelet kommer bull fra venstre og bear
   fra høyre (clip-path-wipe fra motoren), så rommene har litt luft ut til kantene. */
.produkt-rapport .produkt__scene { padding-block: 0; }
.produkt-rapport .produkt__intro { margin-bottom: 1.4rem; }
.produkt-rapport h2 { font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.5rem); margin-bottom: 0; }
.produkt-rapport .produkt__vindu--rapport { overflow: visible; background: transparent; border: none; box-shadow: none; border-radius: 0; }
.produkt-rapport .gj--rapport { background: transparent; padding: 0; font-size: 0.84rem; }
.produkt-rapport .gj__rom { box-shadow: 0 24px 55px -28px rgba(38, 34, 27, .3); align-self: start; }
@media (min-width: 901px) {
  /* Side om side: bull kommer fra venstre, bear fra høyre, og de møtes på midten. */
  .produkt-rapport .gj--rapport { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
  .produkt-rapport .gj__rom--bear { margin-top: 2.2rem; }
}
.produkt-rapport figcaption { margin-top: 1rem; }
.gj--rapport { display: grid; gap: 0.9em; background: var(--kalk); }
.gj__rom { padding: 1.1em 1.4em 1.2em; border-radius: 14px; background: var(--kalk-lys); border: 1px solid var(--mortel); box-shadow: 0 10px 28px -18px rgba(38, 34, 27, 0.35); }
.gj__rom h4 { margin: 0 0 0.6em; font-size: 1.1em; font-weight: 700; }
.gj__rom p { color: var(--kull-myk); max-width: 62ch; }
.gj__rom p + p { margin-top: 0.7em; }

/* I heroen står Robert nederst i figuren; rapporten får et gulv under seg så han ikke står
   foran tekst kunden skal lese, og litt mindre skrift så figuren ikke blir høyere enn heroen. */
.produkt--hero .gj--dashbord { font-size: 0.72rem; padding-bottom: 8em; }
.produkt--hero .maskott--hero { height: clamp(130px, 15vw, 165px); bottom: 4px; }

/* Dashbordet etter det ekte overview.html: hilsen-rom (kalk-dyp, dagslinje, markedspille) over
   porteføljerommet (kalk-lys). */
.gj--dashbord { background: var(--kalk); display: grid; gap: 0.8em; padding: 0.9em; }
.gj__hilsen { padding: 1.1em 1.3em 1em; border-radius: 14px; background: linear-gradient(90deg, rgba(236, 202, 130, 0.35), rgba(222, 212, 191, 0.5) 60%, rgba(216, 223, 231, 0.6)); display: grid; gap: 0.7em; }
.gj__hei { font-family: var(--font-display); font-weight: 700; font-size: 1.9em; line-height: 1; letter-spacing: -0.02em; }
.gj__dagslinje { display: flex; align-items: center; gap: 0.9em; }
.gj__dagslinje-spor { position: relative; flex: 1; height: 6px; border-radius: 999px; background: linear-gradient(90deg, rgba(91, 107, 124, 0.28), rgba(91, 107, 124, 0.14) 18%, rgba(91, 107, 124, 0.14) 82%, rgba(91, 107, 124, 0.28)); }
.gj__dagslinje-spor::before, .gj__dagslinje-spor::after { content: ""; position: absolute; top: -3px; width: 1px; height: 12px; background: var(--kull-svak); left: 18.18%; }
.gj__dagslinje-spor::after { left: 84.85%; }
.gj__sol { position: absolute; left: 6%; top: 50%; width: 14px; height: 14px; border-radius: 50%; translate: -50% -50%; background: var(--kalk-lys); border: 2.5px solid var(--sol-blekk); box-shadow: 0 0 0 4px rgba(217, 165, 60, 0.28); }
.gj__dagslinje .mono { font-size: 0.85em; color: var(--kull); }
.gj__hilsen .gj__pille small { font-size: 0.9em; font-weight: 400; color: var(--kull-myk); margin-left: 0.3em; }
.gj__portefolje { padding: 1.1em 1.3em 1.1em; border-radius: 14px; background: var(--kalk-lys); border: 1px solid var(--mortel); display: grid; gap: 0.5em; }
.gj__romtopp { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.gj__romnavn { font-size: 1.1em; color: var(--sol-blekk); }
.gj__romnavn i { font-style: normal; color: var(--kull-svak); margin-left: 0.2em; }
.gj__periode { display: inline-flex; gap: 0.1em; padding: 0.2em; border-radius: 999px; background: var(--kalk-dyp); }
.gj__periode > span { padding: 0.3em 0.8em; border-radius: 999px; font-weight: 600; font-size: 0.9em; color: var(--kull-myk); }
.gj__periode > .er-valgt { background: var(--kalk-lys); color: var(--kull); box-shadow: 0 4px 12px -8px rgba(38, 34, 27, 0.5); }
.gj__verdi { font-family: var(--font-display); font-weight: 700; font-size: 2em; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.gj__idag { color: var(--opp); font-weight: 600; font-size: 0.95em; }
.gj__kurve { position: relative; padding: 0.4em 4.2em 1.5em 0; margin-top: 0.4em; }
.gj__kurve svg { display: block; width: 100%; height: auto; aspect-ratio: 600 / 170; overflow: visible; }
.gj__akselinje { stroke: var(--mortel); stroke-width: 1; }
.gj__areal { fill: rgba(38, 34, 27, 0.07); }
.gj__linje { fill: none; stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.gj__linje--portefolje { stroke: var(--kull); }
.gj__linje--indeks { stroke: var(--sol-blekk); stroke-dasharray: 3 3; }
.gj__y { position: absolute; right: 0; top: var(--y); font-size: 0.72em; color: var(--kull-svak); white-space: pre; }
.gj__x { position: absolute; left: 0; right: 4.2em; bottom: 0.1em; display: flex; justify-content: space-between; font-size: 0.72em; color: var(--kull-svak); }
.gj__legende { display: flex; gap: 1.4em; flex-wrap: wrap; font-size: 0.85em; color: var(--kull-myk); }
.gj__legende span { display: inline-flex; align-items: center; gap: 0.5em; }
.gj__strek { display: inline-block; width: 1.4em; height: 2px; background: var(--kull); }
.gj__strek--indeks { background: var(--sol-blekk); }
.gj--dashbord .gj__fliser--seks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6em; margin-top: 0.4em; }
.gj__flis > span { display: flex; align-items: center; justify-content: space-between; gap: 0.4em; }
.gj__info { display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; border-radius: 50%; border: 1px solid var(--kull-svak); color: var(--kull-svak); font-style: normal; font-size: 0.8em; font-family: var(--font-sans); line-height: 1; }
.gj__flis--prikket b { text-decoration: underline dotted; text-underline-offset: 0.2em; }
.gj__fliser--seks .gj__flis { padding: 0.65em 0.7em 0.75em; background: #e4e7ec; min-width: 0; overflow: hidden; }
.gj__fliser--seks .gj__flis > span { font-size: 0.92em; }
.gj__fliser--seks .gj__flis b { font-size: 1.25em; font-family: var(--font-sans); font-weight: 700; font-variant-numeric: lining-nums; white-space: nowrap; letter-spacing: -0.01em; }
.gj__flis--opp { background: #dfe8df !important; }
.gj__flis--opp b { color: var(--opp); }
.gj__flis--opp .gj__stolpe::before { background: var(--opp); }
.gj__flis--ned { background: #efe0da !important; }
.gj__flis--ned b { color: var(--ned); }
.gj__flis--ned .gj__stolpe::before { background: var(--ned); }
.gj__fliser--seks .gj__stolpe::after { display: none; }

/* Dagens brief: smal kolonne. */
.gj--brief { background: linear-gradient(180deg, rgba(236, 202, 130, 0.35), rgba(236, 202, 130, 0) 30%), var(--kalk-lys); }
.gj__topp { display: flex; align-items: baseline; gap: 0.7em; margin-bottom: 0.7em !important; }
.gj__topp b { font-size: 1.15em; color: var(--sol-blekk); }
.gj__topp .mono { margin-left: auto; font-size: 0.8em; color: var(--sol-blekk); font-weight: 600; }
.gj__tittel { font-family: var(--font-display); font-weight: 700; font-size: 1.35em; line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 1em !important; }
.gj__etikett { font-size: 0.95em; color: var(--kull-svak); margin: 0.9em 0 0.4em !important; }
.gj__rad { display: grid; grid-template-columns: 1.4em minmax(0, 1fr); gap: 0.3em; color: var(--kull-myk); }
.gj__pil { font-style: normal; color: var(--ned); font-weight: 700; }
.gj__tikker { font-weight: 700; font-size: 0.9em; margin: 0.9em 0 0.4em !important; }

/* Markedsbredde. */
.gj--bredde { padding: 1.1em 1.3em 1em; }
.gj__status { display: flex; align-items: center; gap: 1em; margin-bottom: 0.9em !important; }
.gj__status .mono { font-size: 0.85em; color: var(--kull-svak); }
.gj__pille { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.35em 0.9em; border-radius: 999px; background: var(--kalk-dyp); font-weight: 600; }
.gj__pille i { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--kull-svak); }
.gj__pille--opp i, .gj__pille--klar i { background: var(--opp); }
.gj__pille--prognose { background: var(--sol-glod); }
.gj__pille--prognose i { background: var(--sol-blekk); }
.gj__pille { transition: background-color 200ms var(--ease-ut); }
.gj__pille--ned i { background: var(--ned); }
/* Pulsen når status eller regime bytter: én kort utvidelse, så ro. */
.gj__pille.er-ny { animation: gj-puls 520ms var(--ease-ut); }
@keyframes gj-puls { 0% { transform: scale(0.94); box-shadow: 0 0 0 0 rgba(217, 165, 60, 0.55); } 60% { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(217, 165, 60, 0); } 100% { transform: none; box-shadow: 0 0 0 0 rgba(217, 165, 60, 0); } }
@media (prefers-reduced-motion: reduce) { .gj__pille.er-ny { animation: none; } }
.gj__stolpe::before { transition: transform 90ms linear; }
.gj__setning { color: var(--kull-myk); max-width: 60ch; margin-bottom: 1em !important; }
.gj__fliser { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9em; }
.gj__flis { padding: 0.9em 1.1em 1em; border-radius: 12px; background: var(--kalk-dyp); display: grid; gap: 0.2em; }
.gj__flis span { font-weight: 600; font-size: 0.95em; }
.gj__flis b { font-family: var(--font-display); font-size: 1.7em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.gj__stolpe { position: relative; display: block; height: 4px; border-radius: 999px; background: var(--kalk-grunn); margin-top: 0.5em; }
.gj__stolpe::before { content: ""; position: absolute; inset: 0; width: 100%; transform: scaleX(calc(var(--v) / 100)); transform-origin: left; border-radius: inherit; background: var(--skygge); }
.gj__stolpe::after { content: ""; position: absolute; left: 50%; top: -3px; width: 1px; height: 10px; background: var(--kull-svak); }
.gj__kilde { margin-top: 1em !important; font-size: 0.9em; color: var(--kull-svak); }

/* Selskapskortene: 2 × 2. */
.gj--selskaper { padding: 0.9em; background: var(--kalk); }
.gj__kortnett { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8em; }
.gj__kort {
  display: grid; grid-template-columns: auto minmax(0, 1fr) 5.5em auto; gap: 0.7em; align-items: start;
  padding: 0.9em 1em; border-radius: 12px; background: var(--kalk-lys); border: 1px solid var(--mortel);
}
.gj__kort .firma-logo { inline-size: 2.4em; block-size: 2.4em; font-size: 0.8em; }
.gj__kort-tekst { display: grid; gap: 0.3em; min-width: 0; }
.gj__meta { font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.04em; color: var(--kull-svak); }
.gj__navn { font-weight: 700; text-transform: uppercase; font-size: 1em; letter-spacing: 0.01em; display: flex; align-items: center; gap: 0.5em; }
.gj__stjerne { font-style: normal; display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--kalk-dyp); color: var(--kull-svak); font-size: 0.85em; }
.gj__kort-status { display: flex; align-items: center; gap: 0.6em; flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.8em; }
.gj__kort-status .gj__pille { font-weight: 500; padding: 0.3em 0.8em; }
.gj__kort-status em { color: var(--kull-svak); }
.gj__spark { width: 100%; height: 2em; align-self: center; }
.gj__spark polyline { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.gj__spark--opp polyline { stroke: var(--opp); }
.gj__spark--ned polyline { stroke: var(--ned); }
.gj__pris { display: grid; justify-items: end; gap: 0.2em; font-size: 0.95em; }
.gj__pris b { font-size: 1.15em; }
.gj__endring--opp { color: var(--opp); font-size: 0.85em; }
.gj__endring--ned { color: var(--ned); font-size: 0.85em; }

@media (max-width: 900px) {
  .gj { font-size: 0.8rem; }
  .gj__fliser { grid-template-columns: 1fr; }
  .gj--dashbord .gj__fliser--seks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gj__info { display: none; }
  .gj__periode-tekst { display: none; }
  .gj__kortnett { grid-template-columns: 1fr; }
  .gj__kort { grid-template-columns: auto minmax(0, 1fr) auto; }
  .gj__spark { display: none; }
}

/* ------------------------------------------------------------------ priser */
/* Kvelden: ugjennomsiktig kull, og lysene tennes. Bak kortene ligger ett lys per selskap i
   katalogen (canvas, landing.js). Planen du velger tenner sin andel; det valgte kortet er
   selv lyst. Alt innhold er lesbart uten JS og uten å peke -- feltet er bevis, ikke bærer. */
.priser {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--kull); color: var(--kalk-dyp);
  padding-block: clamp(5rem, 12vh, 9rem) clamp(4rem, 10vh, 7rem);
}
.priser__lys { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.priser__inn { position: relative; max-width: calc(var(--sc-maxw) + var(--folio-b)); margin-inline: auto; padding-inline: var(--venstre) var(--sc-gutter); }
.priser h2 { color: var(--kalk-lys); margin-bottom: 0; max-width: 18ch; }
/* Robert står ved siden av overskriften og vinker, ikke ute i høyre marg. */
.priser__hode { display: flex; align-items: flex-end; gap: clamp(1.5rem, 4vw, 4rem); margin-bottom: clamp(2.4rem, 6vh, 3.6rem); }
.priser__hode .maskott--kap { margin: 0 0 -0.5rem; flex: 0 0 auto; }
/* Like høye kort, så de tre knappene står på samme linje og øyet kan sammenligne vannrett. */
.planer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; max-width: 62rem; align-items: stretch; }

/* Månedlig / Årlig over kortene: to native radioer som ett todelt valg, tent i samme farge som
   «Anbefalt»-pillen. Prisbyttet er ren CSS via :has; uten :has står begge prisene synlige --
   rotete, men aldri feil. */
.periode {
  position: relative; display: inline-flex; gap: 0.25rem; padding: 0.25rem;
  margin: 0 0 clamp(1.8rem, 4vh, 2.6rem); border-radius: 999px;
  background: rgba(38, 34, 27, 0.7); border: 1px solid rgba(250, 247, 240, 0.14);
}
.periode__valg { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.periode label {
  padding: 0.45rem 1.1rem; border-radius: 999px; cursor: pointer;
  font-size: 0.9rem; font-weight: 500; color: var(--kalk-dyp);
  transition: background-color 120ms var(--ease-ut), color 120ms var(--ease-ut);
}
@media (hover: hover) and (pointer: fine) { .periode label:hover { color: var(--kalk-lys); } }
.periode__spar { margin-left: 0.35rem; font-size: 0.75rem; color: var(--sol-glod); }
.periode__valg:checked + label { background: var(--sol); color: var(--kull); }
.periode__valg:checked + label .periode__spar { color: inherit; }
.periode__valg:focus-visible + label { outline: 2px solid var(--sol); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .periode label { transition: none; } }
.priser__inn:has(#periode-aar:checked) .kun-mnd,
.priser__inn:has(#periode-maaned:checked) .kun-aar { display: none; }

/* Kortet er et vindu i kveldshuset: mørkt glass over lysfeltet, tett nok til at teksten står
   (målt AA mot kull). Det valgte vinduet er tent innenfra. Navn og pris står sentrert som en
   plakat øverst; kvotene under er en tallkolonne, ikke en hakeliste. */
.plan {
  --tid-valg: 110ms;
  --ease-sprett: cubic-bezier(0.2, 1.4, 0.4, 1);   /* liten overshoot: snappy, ikke bouncy */
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: 2rem 1.7rem 1.6rem;
  border-radius: var(--radius-rom);
  background: rgba(38, 34, 27, 0.7); border: 1px solid rgba(250, 247, 240, 0.14);
  position: relative; isolation: isolate; cursor: pointer;
  --mx: 50%; --my: 0%;
  transition: transform 240ms var(--ease-sprett), background-color var(--tid-valg) var(--ease-ut),
              border-color var(--tid-valg) var(--ease-ut), box-shadow var(--tid-valg) var(--ease-ut);
}

/* Håndlykta under glasset. */
.plan::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(18rem 18rem at var(--mx) var(--my),
              rgba(217, 165, 60, 0.22), transparent 70%);
  opacity: 0; transition: opacity 120ms var(--ease-ut); pointer-events: none;
}
.plan__valg { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

@media (hover: hover) and (pointer: fine) {
  .plan:hover::after { opacity: 1; }
  .plan:hover {
    transform: translateY(-8px);
    background-color: rgba(38, 34, 27, 0.8); border-color: rgba(217, 165, 60, 0.5);
    box-shadow: 0 18px 40px -26px rgba(217, 165, 60, 0.5);
  }
}
.plan:active { transform: translateY(-3px) scale(0.98); transition-duration: 80ms; }
.plan__valg:focus-visible + .plan { outline: 2px solid var(--sol); outline-offset: 4px; }

/* Ingen ny fontfil: Bricolage Grotesque er variabel på bredde (75-100 %) og optisk størrelse,
   og ingen av aksene var i bruk. Navnet smalt og lett som en skiltbokstav, prisen stor, smal
   og tung -- plakattypografi under buen, samme stemme som resten av siden. */
.plan h3 {
  margin: 0; text-align: center;
  font-family: var(--font-display); font-stretch: 82%; font-weight: 500;
  font-size: 1.1rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kalk-dyp);
}
.plan__pris {
  margin: 0.2rem 0 0; display: flex; justify-content: center; align-items: baseline; gap: 0.4rem;
  font-family: var(--font-display); color: var(--kalk-lys);
}
.plan__kr {
  font-size: 3.6rem; line-height: 0.95; font-weight: 700; font-stretch: 80%;
  font-optical-sizing: auto; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.03em;
}
.plan__enhet { font-family: var(--font-sans); font-size: 0.9rem; color: var(--skygge-svak); }
/* Dagsprisen: samme tall delt på 30 (år: på 365), sagt slik folk sammenligner det -- med en kaffe. */
.plan__dag { margin: -0.2rem 0 0; text-align: center; font-size: 0.85rem; color: var(--skygge-svak); }
/* Hvem planen er for: verdens annotasjonsstemme (kursiv, 500), sentrert under prisen. */
.plan__for {
  margin: 0.5rem 0 0.4rem; padding-top: 0.9rem; border-top: 1px solid rgba(250, 247, 240, 0.12);
  text-align: center; font-style: italic; font-weight: 500;
  color: var(--kalk-dyp); font-size: 0.95rem; line-height: 1.5; text-wrap: balance;
}
/* Listen: først måltallene (selskaper, tokens) med tallet i målefonten -- det ER måltall --
   så funksjonene som hakeliste. Hakene er de samme i alle kort; det som vokser oppover er
   hvor mange rader som står der. */
.plan__liste { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.5rem; }
.plan__liste li {
  position: relative; padding-left: 1.5rem;
  font-size: 0.95rem; line-height: 1.45; color: var(--kalk-dyp);
}
.plan__liste li::before {
  content: ""; position: absolute; left: 0.2rem; top: 0.22em;
  width: 0.4rem; height: 0.72rem; border: solid var(--sol-glod); border-width: 0 2px 2px 0; rotate: 45deg;
}
.plan__maal { padding-left: 0 !important; }
.plan__maal::before { display: none; }
.plan__maal b {
  font-family: var(--font-mono); font-weight: 500; font-size: 1.05rem;
  font-variant-numeric: tabular-nums lining-nums; color: var(--sol-glod);
}
/* Månedstallet under ukestallet (eier 2026-09-11): sekundært, arver kortets farge. */
.plan__mnd { display: block; margin-top: 0.1rem; font-size: 0.8rem; opacity: 0.75; }
.plan__maal + li:not(.plan__maal) { margin-top: 0.4rem; }
/* Hver linje er en lenke til stedet på siden som viser funksjonen. Ligger i labelen: klikk på
   lenken hopper, klikk ellers velger planen. Understreken kommer først når du peker. */
.plan__liste a {
  color: inherit; text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 0.2em; transition: text-decoration-color 120ms var(--ease-ut);
}
.plan__liste a:hover, .plan__liste a:focus-visible { text-decoration-color: currentColor; }
.plan__liste a:focus-visible { outline: 2px solid var(--sol); outline-offset: 2px; border-radius: 3px; }
/* «Alt i Start» peker på Start-kortet, som står rett ved siden av: hoppet er usynlig, så
   kortet blunker i stedet. */
.plan:has(h3:target) { animation: plan-blunk 900ms var(--ease-ut); }
@keyframes plan-blunk {
  0%, 100% { outline: 2px solid transparent; outline-offset: 4px; }
  20%, 60% { outline-color: var(--sol); }
}
.funksjoner__liste > div[id], .plan h3[id], #tokens { scroll-margin-top: clamp(6rem, 10vw, 9rem); }

/* «Anbefalt» henger som en pille på kortets øvre kant. */
.plan__merke {
  position: absolute; top: 0; left: 50%; translate: -50% -50%;
  margin: 0; padding: 5px 12px; border-radius: 999px;
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  background: var(--sol); color: var(--kull);
  box-shadow: 0 6px 16px -8px rgba(217, 165, 60, 0.8);
}
/* Knappen i hvert kort. Ett trykk fra «denne» til registrering. Lenken ligger i labelen;
   klikk på lenken navigerer, klikk ellers velger. */
.plan__cta {
  margin-top: auto; padding-top: 13px; justify-content: center; gap: 0;
  background: transparent; color: var(--kalk-lys);
  box-shadow: inset 0 0 0 1.5px rgba(250, 247, 240, 0.28);
  text-decoration: none;
  transition: transform var(--tid-trykk) var(--ease-ut), box-shadow var(--tid-valg) var(--ease-ut),
              background-color var(--tid-valg) var(--ease-ut), color var(--tid-valg) var(--ease-ut);
}
@media (hover: hover) and (pointer: fine) {
  .plan__cta:hover { background: rgba(250, 247, 240, 0.08); box-shadow: inset 0 0 0 1.5px rgba(250, 247, 240, 0.5); }
}
.plan__cta:focus-visible { outline: 2px solid var(--sol); outline-offset: 3px; }
/* Verbet følger valget: «Velg Start» på de mørke, «Kom i gang med Pluss» på det som lyser.
   Lenketeksten er bare plannavnet, så navnet aldri kan komme i utakt med kortet. */
.plan__cta::before { content: "Velg "; white-space: pre; }
.plan__valg:checked + .plan .plan__cta::before { content: "Kom i gang med "; }
/* /en: knappene sier «Join the waitlist» hele veien; prefikset er norsk og hører ikke til der. */
:lang(en) .plan__cta::before, :lang(en) .plan__valg:checked + .plan .plan__cta::before { content: none; }

/* Det tente vinduet FØLGER valget. Pluss er `checked` i malen, så siden ser lik ut ved
   lasting. Karmen får lyset innenfra (varm gradient), ruta under er ren kalk. */
.plan__valg:checked + .plan {
  transform: translateY(-14px);
  background-color: var(--kalk-lys); border-color: var(--sol); color: var(--kull);
  background-image: linear-gradient(180deg, rgba(236, 202, 130, 0.6), rgba(236, 202, 130, 0) 45%);
  box-shadow: 0 24px 60px -24px rgba(217, 165, 60, 0.6), 0 14px 34px -16px rgba(217, 165, 60, 0.45);
}
.plan__valg:checked + .plan h3 { color: var(--kull-myk); }
.plan__valg:checked + .plan .plan__for { border-top-color: var(--mortel); }
.plan__valg:checked + .plan .plan__pris { color: var(--sol-blekk); }
.plan__valg:checked + .plan .plan__enhet,
.plan__valg:checked + .plan .plan__dag,
.plan__valg:checked + .plan .plan__for,
.plan__valg:checked + .plan .plan__liste li { color: var(--kull-myk); }
.plan__valg:checked + .plan .plan__maal b { color: var(--sol-blekk); }
.plan__valg:checked + .plan .plan__liste li::before { border-color: var(--sol-blekk); }
.plan__valg:checked + .plan::after { display: none; }
.plan__valg:checked + .plan .plan__cta {
  background: var(--sol); color: var(--kull); box-shadow: 0 10px 24px -12px rgba(138, 98, 16, 0.6);
}
@media (hover: hover) and (pointer: fine) {
  .plan__valg:checked + .plan .plan__cta:hover { background: var(--sol-glod); box-shadow: 0 12px 28px -12px rgba(138, 98, 16, 0.7); }
  .plan__valg:checked + .plan:hover { transform: translateY(-18px); background-color: var(--kalk-lys); border-color: var(--sol); }
}
.plan__valg:checked + .plan:active { transform: translateY(-12px) scale(0.98); }

@media (prefers-reduced-motion: reduce) {
  /* Færre og roligere, ikke null: trykket må fortsatt svare. */
  .plan { transition: none; }
  .plan:hover,
  .plan__valg:checked + .plan,
  .plan__valg:checked + .plan:hover { transform: none; }
  .plan:active,
  .plan__valg:checked + .plan:active { transform: scale(0.99); }
  .plan::after { display: none; }
}

.priser__fot { margin: 2.4rem 0 0; display: flex; gap: 0.6rem 1.6rem; flex-wrap: wrap; align-items: baseline; font-size: 0.9rem; color: var(--skygge-svak); }
.priser__telling { font-size: 0.8rem; color: var(--sol-glod); font-variant-numeric: tabular-nums; }
.priser ::selection { background: var(--sol-glod); color: var(--kull); }

/* Folioen over kvelden: lys skrift på kull. */
.folio--natt .folio__kap a { color: var(--skygge-svak); }
.folio--natt .folio__kap a:hover, .folio--natt .folio__kap a[aria-current], .folio--natt .folio__tid { color: var(--kalk-lys); }
.folio--natt .folio__fase { color: var(--skygge-svak); }
.folio--natt .folio__tikk { background: var(--skygge-svak); }
.folio--natt .folio__spor { background: rgba(147, 160, 172, 0.28); }

/* ---------------------------------------------------------- redusert bevegelse */
@media (prefers-reduced-motion: reduce) {
  .peiler path { stroke-dashoffset: 0; }
  .peiler circle { opacity: 1; }
  .folio { transition: none; }
  .flekk { transform: none !important; }
}

/* ------------------------------------------------------------------ mobil */
@media (max-width: 900px) {
  /* Folioen blir en vannrett dagslinje festet i bunnen (headeren eier toppen). */
  .folio {
    left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 46px;
    background: var(--kalk-dyp); border-top: 1px solid var(--mortel);
    padding: 0 16px;
  }
  .folio__spor {
    left: 16px; right: 72px; top: 50%; bottom: auto; width: auto; height: 6px;
    translate: 0 -50%;
    background: linear-gradient(90deg,
      rgba(91, 107, 124, 0.28), rgba(91, 107, 124, 0.14) 18%,
      rgba(91, 107, 124, 0.14) 82%, rgba(91, 107, 124, 0.28));
  }
  .folio__straale { background: radial-gradient(140px 200% at calc(var(--dag) * 100%) 50%, var(--sol) 0%, var(--sol-glod) 34%, transparent 72%); }
  .folio--stengt .folio__straale { background: radial-gradient(140px 200% at calc(var(--dag) * 100%) 50%, var(--skygge) 0%, var(--skygge-svak) 34%, transparent 72%); }
  .folio__tikk { left: calc(var(--t) * 100%); top: -4px; width: 1px; height: 14px; }
  .folio__kap { display: none; }
  .folio__merke { left: calc(var(--dag) * 100%); top: 50%; }
  .folio__tid { right: auto; left: calc(100% + 8px); top: 50%; font-size: 0.78rem; }
  .folio__fase { display: none; }
  body { padding-bottom: 46px; }

  .hero__inn { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero h1 { max-width: 14ch; }
  .hero__handling .lys-btn { justify-content: center; }
  .funksjoner__liste { grid-template-columns: 1fr; }
  .funksjoner__liste > div { grid-template-columns: 1fr; gap: 0.3rem; }
  .kap { padding-block: clamp(4rem, 10vh, 6rem) clamp(3rem, 8vh, 5rem); }
  .kap h2 { max-width: 18ch; margin-bottom: 2rem; }
  .kap__spredning { grid-template-columns: 1fr; gap: 2.2rem; }
  .stille { min-height: 50vh; }

  .topp__inn { grid-template-columns: 1fr; gap: 1.4rem; }
  .topp h2 { margin-bottom: 0.4rem; }
  .lop { gap: 0.7rem; }
  .lop__linje { font-size: 0.98rem; }
  .lop__linje--resten { display: none; }
  .varsel { padding: 1.1rem 1.2rem 1rem; gap: 0.5rem; }
  .varsel h3 { font-size: 1.05rem; }
  .varsel p { font-size: 0.88rem; }
  .peiler { display: none; }

  .planer { grid-template-columns: 1fr; }
  /* På én kolonne står kortene under hverandre, så løftet lager bare et hull over det
     valgte i stedet for å skille det ut fra naboene. Det valgte er tydelig nok på farge. */
  .plan__valg:checked + .plan { transform: none; }
  .plan:active,
  .plan__valg:checked + .plan:active { transform: scale(0.97); }
}

/* Ekte produktbilder. Fokusrammen følger markedsforklaringen gjennom skrollen. */
.produkt { margin: 0; min-width: 0; }
.produkt__vindu {
  position: relative; overflow: hidden; border: 1px solid var(--mortel);
  border-radius: 18px; background: var(--kalk-lys);
  box-shadow: 0 24px 55px -28px rgba(38, 34, 27, .3);
}
.produkt img { display: block; width: 100%; height: auto; }
.produkt figcaption { margin-top: 16px; color: var(--kull-svak); font-size: .78rem; line-height: 1.5; }
.produkt--hero { perspective: 1200px; }
.produkt--hero .produkt__vindu { transform: rotateY(-9deg) rotateX(4deg); }
.produkt__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; margin-bottom: 2.5rem; }
.produkt__intro h2 { margin: 0; }
.produkt__intro p { margin: 0; max-width: 44ch; color: var(--kull-myk); font-size: 1.08rem; line-height: 1.6; }
.produkt-kap { padding-block: 4rem 6rem; }
.produkt__scene { display: grid; align-items: center; }
/* Pinnet: scenen er en skjermhøyde og sentrerer selv, så kapittelpadding blir bare tomrom. */
.produkt-marked { padding-block: 0; }
.produkt__scene > .kap__inn { width: 100%; }
.produkt-marked h2 { margin-bottom: 1rem; font-size: clamp(1.8rem, 2.7vw, 2.6rem); max-width: none; }
.produkt__forklaring { display: grid; max-width: 64ch; margin-bottom: 1.5rem; }
.produkt__forklaring p { grid-area: 1 / 1; margin: 0; font-size: 1rem; line-height: 1.55; color: var(--kull-myk); }
.produkt__forklaring strong { color: var(--kull); }
/* «I dag»-linjen deler cue med «Selskapene» og lå oppå den i samme celle. Egen rad. */
.produkt__forklaring .produkt__idag { grid-area: 2 / 1; margin-top: 0.6rem; font-size: 0.95rem; }
.produkt--fokus { max-width: min(100%, 76vh); margin-inline: auto; }
.produkt__fokus {
  position: absolute; top: 53%; left: 10.5%; width: 79%; height: 11.5%;
  border: 2px solid var(--sol-blekk); border-radius: 10px;
  transform: translateY(calc(clamp(0, var(--sc-p, 0), 1) * 265%));
  pointer-events: none;
}
.produkt__intro--rapport { grid-template-columns: 1fr 1fr; }
@media (min-width: 901px) {
  /* Dashbordet er bredt: figuren får 7 av 12 kolonner. */
  .hero__inn { grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); }
  .produkt--hero { margin-right: -1rem; }
  /* Rapportintroen har Robert og lista med Pro-modulene. Med Robert i tredje kolonne (lys.css) havnet
     lista der, 150 px bred med ett ord per linje (eier 2026-10-07, «kl 16:43 er det glitcha»). */
  .produkt__intro--rapport .maskott--kap { grid-area: 1 / 3; }
  .produkt__intro--rapport .folgeliste__gir { grid-column: 1 / 3; }
}
@media (max-width: 900px) {
  .produkt__intro, .produkt__intro--rapport, .produkt__intro:has(.maskott--kap) { grid-template-columns: 1fr; gap: 1.2rem; }
  .produkt--hero .produkt__vindu { transform: none; }
  .produkt__scene { padding-block: 1.5rem 4rem; }
  .produkt__vindu { border-radius: 12px; }
  .produkt-marked h2 { font-size: 1.9rem; }
  .produkt__forklaring { min-height: 8rem; }
  .produkt--fokus { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .produkt--hero .produkt__vindu, .produkt[data-sc-parallax] { transform: none !important; }
  .produkt__fokus { display: none; }
  .produkt__forklaring { display: block; }
  .produkt__forklaring p { opacity: 1 !important; transform: none !important; margin-bottom: 1rem; }
}

/* ---------------------------------------------------------------------------
   Bevis: tre beskårne produktutsnitt som bytter i takt med teksten i k3.
   Ett bilde per påstand, ikke ett fullskudd bak tre påstander -- utsnittet ER
   beviset for setningen som står ved siden av. Motoren driver opacity og
   translateY per bilde via data-sc-cue, så CSS-en her setter bare scenen:
   arkene stables i samme boks og kryssfader.
   --------------------------------------------------------------------------- */
.bevis {
  position: relative;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  /* Arkene er HTML nå, ikke bilder: stables i samme rutenettcelle, så boksen blir så høy
     som det høyeste arket uten et fast sideforhold. Motoren skriver fortsatt opacity og
     translateY per ark via data-sc-cue. */
  display: grid;
}

.bevis__ark {
  grid-area: 1 / 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  align-self: start;
  opacity: 0;
  will-change: opacity, transform;
}

.bevis__ark .gj {
  border-radius: 14px;
  border: 1px solid rgba(38, 34, 27, 0.10);
  background: var(--kalk-lys);
  /* Offset og blur, aldri et null-offset fargeglød. */
  box-shadow: 0 18px 40px -28px rgba(38, 34, 27, 0.45);
}

.bevis__ark figcaption {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--kull-myk, #5a5248);
  max-width: 46ch;
}

.bevis__note {
  position: absolute;
  bottom: -1.9rem;
  margin: 0;
  font-size: 0.76rem;
  color: var(--kull-svak, #8a8177);
}

/* Uten scroll-drevet bevegelse er en stabel av usynlige ark bare tomhet.
   Da vises alle tre under hverandre, som en vanlig figurliste. */
@media (prefers-reduced-motion: reduce) {
  .bevis { gap: 2rem; }
  .bevis__ark { grid-area: auto; opacity: 1; will-change: auto; }
  .bevis__note { position: static; margin-top: 0.5rem; }
}

/* Dagens brief er en smal kolonne i produktet (351 css-px). Uten et tak her
   strekkes utsnittet til full spaltebredde og skaleres opp 1,36x -- samme
   uskarphet som det gamle dashbordbildet hadde. Et smalt panel skal vises
   smalt; det er ærlig mot hva flaten faktisk er. */
.produkt__vindu--smal { max-width: 26rem; margin-inline: auto; }
.produkt--brief figcaption { text-align: center; }

/* Dashbordet og dagens brief ligger side om side i produktet -- kurven bredt til
   venstre, briefen som en smal kolonne til høyre. Landingssiden speiler det.
   Briefen avdekkes senere enn kurven (reveal-at 0.34 mot 0.04), så den kommer
   fram mens du ruller, ikke ferdig synlig når seksjonen treffer. */
.produkt__par {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.75fr);
  gap: clamp(1.2rem, 2.4vw, 2.2rem);
  align-items: start;
}
.produkt--brief .produkt__vindu { max-width: 26rem; }

@media (max-width: 900px) {
  .produkt__par { grid-template-columns: 1fr; }
  .produkt--brief .produkt__vindu { max-width: 26rem; margin-inline: auto; }
}