/* ==== base.css ==== */
/* =============================================================================
   base.css – fundamentet for /alt/ (tokens, typografi, komponenter, nav, reveal)
   Alt her er felles for alle seksjoner. Seksjonene bruker bare tokens og .alt-*-klassene
   herfra; egne klasser prefikses med seksjonsnavnet (.hero-…, .strom-…).
   Se FUNDAMENT.md for oversikten.
   ============================================================================= */

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  /* Appens grunnpalett (Theme.swift), lys */
  --snow: #F7F4EE; --card: #FFFFFF; --raised: #EFEAE1;
  --ink: #1D3441; --ink-soft: #4E616B; --line: #E6DFD4;   /* ink-soft: 5,9:1 på snow, så den holder AA også på tonede og skyggelagte flater */
  --multe: #F29E4C; --multe-deep: #D9792A; --glow: #FF7B54; --fjord: #2F6B8A;
  --multe-text: #A9530F;          /* multe som tekstfarge på lys bunn (AA); i mørk modus lik --multe-deep */
  --on-multe: #1D3441;            /* tekst oppå multe-flater (hvit gir bare 2,4:1) */
  /* Hero-scenen: morgenlys */
  --stage: #FCEBD9; --stage-hill: #F8DCC0; --stage-sun: #FBD2A8;
  /* Natt: mørke seksjoner (.alt-dark) og footer */
  --night: #13222C; --night-ink: #E8EEF1; --night-soft: #AEBEC8;
  --shadow: 0 30px 60px -20px rgba(29, 52, 65, .28), 0 12px 24px -12px rgba(29, 52, 65, .18);
  --shadow-soft: 0 18px 40px -22px rgba(29, 52, 65, .30), 0 4px 12px -6px rgba(29, 52, 65, .10);
  --display: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Nunito Sans", system-ui, sans-serif;
  /* Trygt område (hakk, Dynamic Island, hjemlinje). Gutteren er aldri smalere enn innrykket til venstre og høyre, så teksten
     ikke havner under hakket i liggende format. Seksjoner med egne marger bruker --sa-l / --sa-r på samme måte. */
  --sa-t: env(safe-area-inset-top, 0px); --sa-r: env(safe-area-inset-right, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px); --sa-l: env(safe-area-inset-left, 0px);
  --gutter: max(clamp(16px, 4vw, 40px), var(--sa-l), var(--sa-r));
  --max: 1180px;
  /* De 7 tonene: hovedfarge (--t-*) og bløt bakgrunn (--s-*) */
  --t-multe: #F29E4C; --t-fjord: #3A7CA0; --t-mose: #6E9C7A; --t-isbre: #4FA9C4; --t-lyng: #9C7BC0; --t-nordlys: #36B28E; --t-rips: #E0655A;
  --s-multe: #FCEBD9; --s-fjord: #DEEAF1; --s-mose: #E3EEE5; --s-isbre: #DDF0F5; --s-lyng: #EDE5F5; --s-nordlys: #D9F2E9; --s-rips: #FBE3DF;
  /* Form */
  --r-card: 32px; --r-pill: 999px;
  /* Bevegelse: alt går i pustens tempo */
  --ease-out: cubic-bezier(.22, .7, .2, 1);
  --ease-io: cubic-bezier(.45, 0, .2, 1);
  --ease-soft: cubic-bezier(.3, 0, .1, 1);
  --ease-expo: cubic-bezier(.19, 1, .22, 1);   /* knapper (Bevels kurve) */
  --d-1: .6s; --d-2: 1.1s; --d-3: 1.8s;
}
/* Mørk: system (når siden ikke er tvunget lys) … */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --snow: #0F171D; --card: #17232B; --raised: #1D2B34; --ink: #E8EEF1; --ink-soft: #A8B8C2; --line: #26343D;
    --multe-deep: #F6B06B; --multe-text: #F6B06B;
    --stage: #2A2119; --stage-hill: #3A2C1F; --stage-sun: #5A3F25;
    --night: #09121A;
    --shadow: 0 30px 60px -20px rgba(0, 0, 0, .6), 0 12px 24px -12px rgba(0, 0, 0, .5);
    --shadow-soft: 0 18px 40px -22px rgba(0, 0, 0, .65), 0 4px 12px -6px rgba(0, 0, 0, .4);
    --s-multe: #33261A; --s-fjord: #16293A; --s-mose: #1B2D22; --s-isbre: #14313B; --s-lyng: #271F35; --s-nordlys: #13332B; --s-rips: #351B1A;
  }
}
/* … eller valgt, og i mørke seksjoner (.alt-dark) uansett sidens modus */
:root[data-theme="dark"], .alt-dark {
  color-scheme: dark;
  --snow: #0F171D; --card: #17232B; --raised: #1D2B34; --ink: #E8EEF1; --ink-soft: #A8B8C2; --line: #26343D;
  --multe-deep: #F6B06B; --multe-text: #F6B06B;
  --stage: #2A2119; --stage-hill: #3A2C1F; --stage-sun: #5A3F25;
  --night: #09121A;
  --shadow: 0 30px 60px -20px rgba(0, 0, 0, .6), 0 12px 24px -12px rgba(0, 0, 0, .5);
  --shadow-soft: 0 18px 40px -22px rgba(0, 0, 0, .65), 0 4px 12px -6px rgba(0, 0, 0, .4);
  --s-multe: #33261A; --s-fjord: #16293A; --s-mose: #1B2D22; --s-isbre: #14313B; --s-lyng: #271F35; --s-nordlys: #13332B; --s-rips: #351B1A;
}
:root[data-theme="light"] { color-scheme: light; }

/* Pastellgradienter per tone. Deklareres også i .alt-dark, siden var() løses der de står. */
:root, .alt-dark {
  --g-multe: linear-gradient(160deg, color-mix(in srgb, var(--s-multe) 60%, var(--card)) 0%, var(--s-multe) 50%, color-mix(in srgb, var(--t-multe) 24%, var(--s-multe)) 100%);
  --g-fjord: linear-gradient(160deg, color-mix(in srgb, var(--s-fjord) 60%, var(--card)) 0%, var(--s-fjord) 50%, color-mix(in srgb, var(--t-fjord) 24%, var(--s-fjord)) 100%);
  --g-mose: linear-gradient(160deg, color-mix(in srgb, var(--s-mose) 60%, var(--card)) 0%, var(--s-mose) 50%, color-mix(in srgb, var(--t-mose) 24%, var(--s-mose)) 100%);
  --g-isbre: linear-gradient(160deg, color-mix(in srgb, var(--s-isbre) 60%, var(--card)) 0%, var(--s-isbre) 50%, color-mix(in srgb, var(--t-isbre) 24%, var(--s-isbre)) 100%);
  --g-lyng: linear-gradient(160deg, color-mix(in srgb, var(--s-lyng) 60%, var(--card)) 0%, var(--s-lyng) 50%, color-mix(in srgb, var(--t-lyng) 24%, var(--s-lyng)) 100%);
  --g-nordlys: linear-gradient(160deg, color-mix(in srgb, var(--s-nordlys) 60%, var(--card)) 0%, var(--s-nordlys) 50%, color-mix(in srgb, var(--t-nordlys) 24%, var(--s-nordlys)) 100%);
  --g-rips: linear-gradient(160deg, color-mix(in srgb, var(--s-rips) 60%, var(--card)) 0%, var(--s-rips) 50%, color-mix(in srgb, var(--t-rips) 24%, var(--s-rips)) 100%);
}
@media (max-width: 860px) { :root { --r-card: 24px; } }

/* [data-tone="…"] på en hvilken som helst boks gir --tone, --tone-soft og --tone-g (gradient) til barna */
[data-tone="multe"] { --tone: var(--t-multe); --tone-soft: var(--s-multe); --tone-g: var(--g-multe); }
[data-tone="fjord"] { --tone: var(--t-fjord); --tone-soft: var(--s-fjord); --tone-g: var(--g-fjord); }
[data-tone="mose"] { --tone: var(--t-mose); --tone-soft: var(--s-mose); --tone-g: var(--g-mose); }
[data-tone="isbre"] { --tone: var(--t-isbre); --tone-soft: var(--s-isbre); --tone-g: var(--g-isbre); }
[data-tone="lyng"] { --tone: var(--t-lyng); --tone-soft: var(--s-lyng); --tone-g: var(--g-lyng); }
[data-tone="nordlys"] { --tone: var(--t-nordlys); --tone-soft: var(--s-nordlys); --tone-g: var(--g-nordlys); }
[data-tone="rips"] { --tone: var(--t-rips); --tone-soft: var(--s-rips); --tone-g: var(--g-rips); }

/* ---------- Grunnstil ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* overflow-anchor: none: når en seksjon vokser etter at JS har kjørt (kveld-banen får høyde), skal ikke nettleseren flytte scrollen
   for å «holde fast» ved et element. Uten dette havnet gjenopprettet scroll ved reload midt på siden flere hundre piksler feil.
   scroll-padding-top gjelder nettleserens eget hash-hopp og fokus; Alt.scrollTo bruker sin egen landing (se core.js). */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; overflow-anchor: none; }
body {
  margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column;
  background: var(--snow); color: var(--ink);
  font: 400 17px/1.5 var(--body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;   /* clip, ikke hidden: sticky fungerer fortsatt */
}
main { display: block; flex: 1 0 auto; }
/* Bare bilder krympes til foreldren. SVG og canvas får sin egen bredde i CSS: en generell max-width: 100% klemte brede fjell
   og auraer (bredere enn skjermen med vilje) ned til viewportbredden. */
img, svg, canvas { display: block; }
img { max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; letter-spacing: -.025em; line-height: 1.04; margin: 0; text-wrap: balance; }
/* Fokusringen er ink (11,8:1 på krem, lys på natt), ikke multe (2:1 på krem, og lik fargen på multe-knappene).
   --focus kan overstyres lokalt der bakgrunnen krever det. */
:focus-visible { outline: 3px solid var(--focus, var(--ink)); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
::selection { background: color-mix(in srgb, var(--multe) 35%, transparent); }

.alt-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.alt-skip {
  position: fixed; z-index: 200; left: 16px; top: 12px; padding: 12px 18px; border-radius: 14px;
  background: var(--ink); color: var(--snow); font: 800 15px/1 var(--display); text-decoration: none;
  transform: translateY(-220%); transition: transform .5s var(--ease-out);
}
.alt-skip:focus { transform: none; }

/* ---------- Layout og typografi ---------- */
.alt-wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.alt-sec { position: relative; padding-block: clamp(88px, 11vw, 160px); }
.alt-clip { overflow-x: clip; }
.alt-dark { background: var(--night); color: var(--ink); }
.alt-eyebrow { font: 800 13px/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--multe-text); }
.alt-h2 { font-family: var(--display); font-weight: 800; font-size: clamp(38px, 5.6vw, 76px); letter-spacing: -.03em; line-height: 1.02; text-wrap: balance; }
.alt-lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--ink-soft); max-width: 34em; text-wrap: pretty; }

/* ---------- Komponenter ---------- */
/* Kort. data-tone gir pastellgradient i tonen. */
.alt-card {
  position: relative; border-radius: var(--r-card); padding: clamp(24px, 3vw, 40px);
  background: var(--card); box-shadow: var(--shadow-soft); overflow: clip;
}
.alt-card[data-tone] { background: var(--tone-g); }

/* Knapp / pille. Hover: et lysfelt stiger opp nedenfra (som hos Bevel) og knappen vokser litt. */
.alt-btn, .alt-pill {
  --btn-bg: var(--ink); --btn-fg: var(--snow); --btn-glow: rgba(255, 255, 255, .55);
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 26px; border: 0; border-radius: var(--r-pill); cursor: pointer; text-decoration: none; white-space: nowrap;
  background: var(--btn-bg); color: var(--btn-fg); font: 800 17px/1 var(--display); letter-spacing: -.005em;
  -webkit-tap-highlight-color: transparent;
  transition: transform .6s var(--ease-expo), box-shadow .3s, background-color .4s, color .4s;
}
.alt-btn::before, a.alt-badge::before {
  content: ""; position: absolute; z-index: -1; left: 50%; bottom: 0; width: 130%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle farthest-side, var(--btn-glow), transparent);
  opacity: .7; transform: translate(-50%, 100%); transition: transform .6s var(--ease-expo);
}
.alt-btn--multe { --btn-bg: var(--multe); --btn-fg: var(--on-multe); --btn-glow: #FFE9CC; }
.alt-btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-glow: color-mix(in srgb, var(--ink) 16%, transparent); border: 1.5px solid color-mix(in srgb, var(--ink) 24%, transparent); }
.alt-btn--sm { height: 40px; padding: 0 18px; font-size: 15px; }
.alt-btn--lg { height: 60px; padding: 0 34px; font-size: 19px; }
@media (hover: hover) {
  .alt-btn:hover, .alt-pill:hover { transform: scale(1.025); box-shadow: inset 0 0 .3rem rgba(255, 255, 255, .35); }
  .alt-btn:hover::before, a.alt-badge:hover::before { transform: translate(-50%, 70%); }
}
.alt-btn:active, .alt-pill:active { transform: scale(.99); }

/* Glass-chip */
.alt-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--card) 62%, transparent); color: var(--ink);
  -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  box-shadow: 0 6px 18px -12px rgba(29, 52, 65, .35);
  font: 700 14.5px/1 var(--display); white-space: nowrap;
}
.alt-chip[data-tone]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tone); flex: none; }

/* Glassflate */
.alt-glass {
  border-radius: var(--r-card); color: var(--ink);
  background: color-mix(in srgb, var(--card) 56%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  box-shadow: var(--shadow-soft), inset 0 1px 0 color-mix(in srgb, var(--card) 80%, transparent);
}

/* «Kommer snart til App Store»: ikke en lenke, så ingen hover-lysfelt og ingen klikk-ring (de er bare for <a class="alt-badge">, når
   det finnes en ekte App Store-lenke). Markup: <span class="alt-badge"><svg …/><span><small>Kommer snart til</small><strong>App Store</strong></span></span> */
.alt-badge {
  --btn-glow: rgba(255, 255, 255, .5);
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 22px 12px 18px; border-radius: 16px; background: var(--ink); color: var(--snow); cursor: default;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;   /* -webkit-: Safari støtter ikke uprefikset user-select */
  transition: transform .6s var(--ease-expo);
}
.alt-badge svg { width: 28px; height: 28px; fill: currentColor; flex: none; }
.alt-badge small { display: block; font: 600 11.5px/1.1 var(--body); opacity: .8; }
.alt-badge strong { display: block; font: 800 19px/1.1 var(--display); letter-spacing: -.01em; }
a.alt-badge { cursor: pointer; text-decoration: none; }
@media (hover: hover) { a.alt-badge:hover { transform: scale(1.025); } }

/* Telefon og klokke: samme geometri som .phone / .watch på forsiden (rammen 3,2 % / 7 % av bredden). Skjermen (.scr / [data-screen])
   legges absolutt inni, ikke med padding: prosent-padding regnes av forelderens bredde, så rammen ble feil i flex og grid. */
.alt-phone {
  position: relative; flex: none; width: var(--phone-w, min(320px, 78vw)); aspect-ratio: 1206 / 2622; border-radius: 17.6% / 8.1%;
  background: #0B1116; box-shadow: var(--shadow), inset 0 0 0 1.5px #2a343c;
}
.alt-phone > .scr, .alt-phone > [data-screen] { position: absolute; inset: 1.472% 3.2%; border-radius: 15.4% / 7.1%; overflow: hidden; }
/* Ekte skjermbilder fra appen (data-shot) fyller skjermen */
.a-shot > .app-shot { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; -webkit-user-drag: none; user-select: none; }
.alt-watch {
  position: relative; flex: none; width: var(--watch-w, 150px); aspect-ratio: 416 / 496; border-radius: 30%;
  background: #0B1116; box-shadow: var(--shadow), inset 0 0 0 1.5px #2a343c;
}
.alt-watch > .wscr, .alt-watch > [data-screen] { position: absolute; inset: 5.87% 7%; border-radius: 22%; overflow: hidden; }

/* Utpust-ringen ved klikk (Alt.ripple) */
.alt-fx { position: fixed; inset: 0; z-index: 150; pointer-events: none; overflow: hidden; }
.alt-ripple { position: absolute; border-radius: 50%; border: 3px dotted currentColor; opacity: 0; will-change: transform, opacity; }

/* ---------- Reveal ----------
   Start-tilstanden ligger i CSS og gjelder bare når JS er på (.js settes i <head>), så det blir ingen blink.
   core.js animerer inn med Web Animations (Alt.reveal) og legger på .is-in. Bruker translate/scale (egne CSS-egenskaper)
   i stedet for transform, så komponentenes egne transform (hover, tilt) ikke kolliderer. */
.js [data-reveal]:not(.is-in) { opacity: 0; translate: 0 28px; }
.js [data-reveal="blur"]:not(.is-in) { filter: blur(12px); translate: 0 18px; }
.js [data-reveal="scale"]:not(.is-in) { scale: .94; translate: 0 20px; }
.js [data-reveal="fade"]:not(.is-in) { translate: none; }
.js [data-reveal="left"]:not(.is-in) { translate: -44px 0; }
.js [data-reveal="right"]:not(.is-in) { translate: 44px 0; }
/* [data-split]: ordene glir opp bak en maske. Skjult til core.js har delt teksten. */
.js [data-split]:not(.is-split) { visibility: hidden; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .12em; margin-block: -.12em; padding-inline: .04em; margin-inline: -.04em; }
.w > span { display: inline-block; }
.js [data-split]:not(.is-in) .w > span { opacity: 0; translate: 0 110%; filter: blur(8px); }
/* Hvis JS ikke starter, vises alt etter 3,5 s */
@keyframes alt-failsafe { to { opacity: 1; translate: none; scale: none; filter: none; visibility: visible; } }
html.js:not(.alt-ready) [data-reveal]:not(.is-in),
html.js:not(.alt-ready) [data-split] .w > span,
html.js:not(.alt-ready) [data-split]:not(.is-split) { animation: alt-failsafe .01s 3.5s forwards; }

/* ---------- Nav: flytende pille ---------- */
.alt-nav {
  position: fixed; z-index: 100; top: calc(16px + var(--sa-t)); left: 0; right: 0;
  padding-inline: max(12px, var(--sa-l)) max(12px, var(--sa-r));
  display: flex; justify-content: center; pointer-events: none;
  /* Glasset er tett nok (80 %) og lenkene mørke nok til at de holder AA både over lys himmel, fjell og en kveldshimmel som mørkner
     før pillen har snudd til .on-dark */
  --nv-bg: color-mix(in srgb, var(--snow) 80%, transparent);
  --nv-ink: var(--ink); --nv-soft: color-mix(in srgb, var(--ink) 90%, var(--snow));
  --nv-line: color-mix(in srgb, var(--ink) 9%, transparent);
  --nv-hi: color-mix(in srgb, var(--card) 85%, transparent);
  --nv-hover: color-mix(in srgb, var(--ink) 7%, transparent);
  --nv-shadow: 0 14px 34px -18px rgba(29, 52, 65, .4);
  --nv-sat: 1.6;
}
/* Over mørke seksjoner (core.js setter .on-dark når [data-nav="dark"] ligger bak pillen). Fargene bak forsterkes ikke (saturate 1):
   en oransje soloppgang bak mørkt glass ble ellers brun og gjørmete. */
.alt-nav.on-dark {
  --nv-bg: rgba(19, 34, 44, .76); --nv-ink: var(--night-ink); --nv-soft: rgba(232, 238, 241, .8);
  --nv-line: rgba(255, 255, 255, .13); --nv-hi: rgba(255, 255, 255, .1); --nv-hover: rgba(255, 255, 255, .1);
  --nv-shadow: 0 14px 34px -18px rgba(0, 0, 0, .65); --nv-sat: 1;
}
/* 6 px luft rundt 44 px høye mål: pillen er fortsatt 56 px, og alt i den er stort nok å trykke på */
.alt-nav-card {
  position: relative; pointer-events: auto; display: flex; align-items: center; padding: 6px; border-radius: 28px;
  color: var(--nv-ink); background: var(--nv-bg);
  -webkit-backdrop-filter: blur(14px) saturate(var(--nv-sat)); backdrop-filter: blur(14px) saturate(var(--nv-sat));
  box-shadow: var(--nv-shadow), inset 0 0 0 1px var(--nv-line), inset 0 1px 0 var(--nv-hi);
  transition: background-color .6s var(--ease-soft), color .6s var(--ease-soft), box-shadow .6s var(--ease-soft), transform 1s var(--ease-out);
  animation: alt-nav-in 1.4s var(--ease-out) .15s backwards;
}
@keyframes alt-nav-in { from { opacity: 0; transform: translateY(-16px); } }
.alt-nav[data-compact="true"] .alt-nav-card { transform: translateY(-6px); }
.alt-nav.is-init .alt-nav-card, .alt-nav.is-init .alt-nav-card * { transition: none !important; }

.alt-brand {
  display: flex; align-items: center; gap: 10px; flex: none; height: 44px; padding: 0 14px 0 6px; border-radius: 22px;
  color: var(--nv-ink); text-decoration: none; font: 800 19px/1 var(--display); letter-spacing: -.01em;
}
.alt-brand img { width: 32px; height: 32px; border-radius: 9px; animation: alt-breathe 10s var(--ease-io) infinite; }
@keyframes alt-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.07; } }

/* Lenkene kollapser ved scroll ned: grid-template-columns 1fr → 0fr (én liten, fast boks, så layoutkostnaden er ubetydelig) */
.alt-nav-mid { display: grid; grid-template-columns: 1fr; transition: grid-template-columns 1s var(--ease-out), opacity .7s var(--ease-soft); }
.alt-nav[data-compact="true"] .alt-nav-mid { grid-template-columns: 0fr; opacity: 0; }
.alt-mid-in { min-width: 0; overflow: hidden; }
.alt-links { position: relative; display: flex; width: max-content; }
.alt-links a {
  position: relative; isolation: isolate; flex: none; display: flex; align-items: center; height: 44px; padding: 0 15px; border-radius: 22px;
  color: var(--nv-soft); text-decoration: none; white-space: nowrap; font: 700 15.5px/1 var(--display);
  transition: color .5s var(--ease-soft);
}
.alt-links a::before {
  content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: var(--nv-hover);
  opacity: 0; scale: .86; transition: opacity .4s var(--ease-soft), scale .7s var(--ease-out);
}
.alt-links a[aria-current] { color: var(--nv-ink); }
.alt-links a:focus-visible { outline-offset: -3px; }
@media (hover: hover) {
  .alt-links a:hover { color: var(--nv-ink); }
  .alt-links a:hover::before { opacity: 1; scale: 1; }
}
/* Indikatoren: en liten multe-strek som glir (og strekker seg underveis) mellom lenkene */
.alt-ind {
  position: absolute; left: 0; bottom: 2px; width: 18px; height: 3px; border-radius: 3px; background: var(--multe);
  opacity: 0; pointer-events: none; transition: opacity .5s var(--ease-soft);
}
.alt-ind.on { opacity: 1; }

.alt-nav-end { display: flex; align-items: center; gap: 6px; flex: none; padding-left: 8px; }
.alt-nav-end .alt-btn--sm { height: 44px; }
.alt-theme {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--nv-ink); cursor: pointer; transition: background-color .4s var(--ease-soft);
}
.alt-theme-ic { display: grid; place-items: center; width: 20px; height: 20px; }
.alt-theme-ic svg { grid-area: 1 / 1; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: opacity .7s var(--ease-soft), rotate 1s var(--ease-out), scale 1s var(--ease-out); }
/* Ikonet viser målet for trykket (måne i lys modus, sol i mørk), på linje med etiketten og tittelen: «Mørk modus», «Lys modus» */
[data-alt-theme][data-mode="light"] .sun { opacity: 0; rotate: 60deg; scale: .5; }
[data-alt-theme][data-mode="dark"] .moon { opacity: 0; rotate: -60deg; scale: .5; }
@media (hover: hover) { .alt-theme:hover { background: var(--nv-hover); } }
.alt-burger, .alt-sheet-theme, .alt-sheet-motion { display: none; }

.alt-prog {
  position: absolute; left: 26px; right: 26px; bottom: 0; height: 2px; border-radius: 2px; background: var(--multe);
  opacity: .6; transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}

/* «Pause bevegelsen»: den ene globale bryteren (footer og mobilarket). Valget lagres og siden lastes på nytt, se core.js. */
.alt-motion-sw {
  position: relative; flex: none; width: 38px; height: 22px; border-radius: 11px;
  background: color-mix(in srgb, currentColor 26%, transparent); transition: background-color .4s var(--ease-soft);
}
.alt-motion-sw::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: currentColor;
  transition: transform .5s var(--ease-out), background-color .4s var(--ease-soft);
}
[data-alt-motion][aria-pressed="true"] .alt-motion-sw { background: var(--multe); }
[data-alt-motion][aria-pressed="true"] .alt-motion-sw::after { transform: translateX(16px); background: var(--night); }
[data-alt-motion]:disabled { cursor: default; }
.alt-motion {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 16px 0 12px; border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent); background: transparent; color: inherit; cursor: pointer;
  font: 700 14px/1 var(--display); -webkit-tap-highlight-color: transparent; transition: background-color .4s var(--ease-soft);
}
@media (hover: hover) { .alt-motion:not(:disabled):hover { background: color-mix(in srgb, currentColor 9%, transparent); } }

/* Mobil: logo + Kommer snart + menyknapp. Menyen åpnes som et ark som vokser nedover fra pillen. */
@media (max-width: 860px) {
  .alt-nav { top: calc(10px + var(--sa-t)); padding-inline: max(10px, var(--sa-l)) max(10px, var(--sa-r)); }
  .alt-nav[data-compact="true"] .alt-nav-card { transform: none; }
  .alt-nav-card {
    width: min(100%, 560px); display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "brand . end" "mid mid mid";
    align-items: center; transition: background-color .6s var(--ease-soft), color .6s var(--ease-soft), box-shadow .6s var(--ease-soft);
  }
  .alt-nav.is-open .alt-nav-card { --nv-bg: color-mix(in srgb, var(--snow) 91%, transparent); }
  .alt-nav.is-open.on-dark .alt-nav-card { --nv-bg: rgba(19, 34, 44, .92); }
  .alt-brand { grid-area: brand; }
  .alt-nav-end { grid-area: end; padding-left: 0; gap: 4px; }
  .alt-nav-end .alt-theme { display: none; }
  .alt-burger {
    position: relative; display: block; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 22px; background: transparent; color: var(--nv-ink); cursor: pointer;
  }
  .alt-burger i { position: absolute; left: 13px; right: 13px; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: currentColor; transition: transform .7s var(--ease-out); }
  .alt-burger i:first-child { transform: translateY(-4px); }
  .alt-burger i:last-child { transform: translateY(4px); }
  .alt-nav.is-open .alt-burger i:first-child { transform: rotate(45deg); }
  .alt-nav.is-open .alt-burger i:last-child { transform: rotate(-45deg); }
  .alt-nav-mid { grid-area: mid; grid-template-columns: none; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease-out); opacity: 1; }
  .alt-nav[data-compact="true"] .alt-nav-mid { grid-template-columns: none; opacity: 1; }
  .alt-nav.is-open .alt-nav-mid { grid-template-rows: 1fr; }
  .alt-mid-in { min-width: auto; min-height: 0; }
  .alt-links { width: auto; flex-direction: column; padding: 4px 4px 0; }
  .alt-links a {
    height: 54px; padding: 0 16px; font-size: 21px; color: var(--nv-ink);
    opacity: 0; translate: 0 10px; transition: opacity .5s var(--ease-out), translate .7s var(--ease-out), color .5s;
    transition-delay: 0s;
  }
  .alt-nav.is-open .alt-links a { opacity: 1; translate: none; transition-delay: calc(var(--n, 0) * 50ms + 120ms); }
  .alt-links a[aria-current]::after { content: ""; width: 8px; height: 8px; margin-left: 12px; border-radius: 50%; background: var(--multe); }
  .alt-ind { display: none; }
  .alt-sheet-theme, .alt-sheet-motion {
    display: flex; align-items: center; justify-content: space-between; width: calc(100% - 8px); height: 54px; margin: 0 4px; padding: 0 16px; border: 0; border-radius: 14px;
    background: transparent; color: var(--nv-soft); cursor: pointer; font: 700 17px/1 var(--display);
    opacity: 0; translate: 0 10px; transition: opacity .5s var(--ease-out), translate .7s var(--ease-out);
  }
  .alt-sheet-motion { margin-bottom: 4px; }
  .alt-nav.is-open .alt-sheet-theme { opacity: 1; translate: none; transition-delay: .32s; }
  .alt-nav.is-open .alt-sheet-motion { opacity: 1; translate: none; transition-delay: .37s; }
  .alt-prog { left: 22px; right: 22px; }
}
/* Smale skjermer: mindre luft i knappen så logo, «Kommer snart» og meny får plass ned til 320 px */
@media (max-width: 400px) {
  .alt-brand { gap: 8px; padding-right: 8px; font-size: 18px; }
  .alt-nav-end .alt-btn--sm { padding: 0 14px; font-size: 14.5px; }
}
/* 320 px: ikke plass til ordmerket ved siden av «Kommer snart» og menyknappen. Logoen står, og navnet leses fortsatt opp. */
@media (max-width: 350px) {
  .alt-brand { padding-right: 4px; }
  .alt-brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Liggende telefon: arket skal få plass i 375 px høyde også med bryterne nederst */
@media (max-width: 860px) and (max-height: 520px) {
  .alt-links a { height: 44px; font-size: 19px; }
  .alt-sheet-theme, .alt-sheet-motion { height: 44px; font-size: 16px; }
}

/* ---------- Bunn ---------- */
.alt-footer { background: var(--night); color: var(--night-soft); font-size: 14px; padding-block: 48px calc(40px + var(--sa-b)); border-top: 1px solid rgba(255, 255, 255, .07); }
.alt-footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 32px; padding-bottom: 22px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.alt-footer-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--night-ink); text-decoration: none; font: 800 18px/1 var(--display); letter-spacing: -.01em; }
.alt-footer-brand img { width: 30px; height: 30px; border-radius: 8px; }
.alt-footer-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.alt-footer-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--night-soft); text-decoration: none; transition: color .4s; }
.alt-footer-links a:hover { color: var(--night-ink); text-decoration: underline; text-underline-offset: 4px; }
.alt-footer-note { max-width: 42em; margin-top: 24px; line-height: 1.55; }
.alt-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin-top: 16px; font-size: 13px; }
.alt-footer .alt-motion { color: var(--night-ink); }

/* Liten, rolig merknad (f.eks. «Tegnet illustrasjon med eksempeldata.» under en telefon) */
.alt-note { font: 600 13.5px/1.4 var(--body); color: var(--ink-soft); text-align: center; text-wrap: balance; }

/* Seksjoner utenfor viewport: alle CSS-animasjoner står stille (core.js setter .alt-away). Reveal og andre Web Animations berøres ikke. */
.alt-away, .alt-away *, .alt-away *::before, .alt-away *::after { animation-play-state: paused !important; }

/* Berøringsskjermer: ingen backdrop-filter på de mange små glassbrikkene (hver er et eget komposittlag); mer dekkende bakgrunn i stedet */
@media (pointer: coarse) {
  .alt-chip { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--card) 88%, transparent); }
  .alt-btn--sm { min-height: 44px; }
}

/* Uten JavaScript monteres ikke skjermene (de er tegnet av skjermer.js): da skjules de tomme telefonrammene, og bryteren som trenger JS */
html:not(.js) .alt-phone, html:not(.js) .alt-watch, html:not(.js) .alt-motion, html:not(.js) .alt-sheet-motion { display: none; }

/* ---------- Redusert bevegelse: alt står stille og er ferdig ----------
   Gjelder både systeminnstillingen og brukerens eget valg («Pause bevegelsen», html[data-motion="off"]): build.py kopierer hver
   @media (prefers-reduced-motion: reduce)-blokk i alle delene til en variant under html[data-motion="off"], og pakker
   no-preference-blokkene inn i html:not([data-motion="off"]). Skriv derfor bare media-spørringen i seksjonene. */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-split] .w > span { opacity: 1 !important; translate: none !important; scale: none !important; filter: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* … speilet for «Pause bevegelsen» */

  :where(html[data-motion="off"]) :is(.js [data-reveal]), :where(html[data-motion="off"]) :is(.js [data-split] .w > span) { opacity: 1 !important; translate: none !important; scale: none !important; filter: none !important; }
  :where(html[data-motion="off"]) :is(*), :where(html[data-motion="off"]) :is(*)::before, :where(html[data-motion="off"]) :is(*)::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

/* Høykontrast (forced-colors): bakgrunner og skygger forsvinner, så knapper, merket og pillen trenger en kant for å skille seg ut */
@media (forced-colors: active) {
  .alt-btn, .alt-pill, .alt-badge, .alt-chip, .alt-motion, .alt-sheet-motion { border: 1px solid ButtonText; }
  .alt-nav-card { border: 1px solid CanvasText; }
  .alt-ind, .alt-prog { background: Highlight; forced-color-adjust: none; }
  .alt-motion-sw { border: 1px solid ButtonText; }
  .alt-motion-sw::after { background: ButtonText; forced-color-adjust: none; }
  [data-alt-motion][aria-pressed="true"] .alt-motion-sw { background: Highlight; forced-color-adjust: none; }
  [data-alt-motion][aria-pressed="true"] .alt-motion-sw::after { background: HighlightText; }
}
/* Reserve når View Transitions mangler: myk overgang mellom lys og mørk (.alt-fade settes i ~0,8 s av core.js) */
html.alt-fade *, html.alt-fade *::before, html.alt-fade *::after {
  transition: background-color .7s, color .7s, border-color .7s, fill .7s, stroke .7s, box-shadow .7s !important;
}
/* Temabyttet: en ring som utvider seg fra bryteren (core.js animerer clip-path på ::view-transition-new) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }

/* ==== skjermer.css ==== */
/* ==========================================================================
   App-skjermene (skjermer.css). Tegnet i HTML i appens egne koordinater og skalert inn i en ramme.
   iPhone: 390 × 848 pt. Klokka: 208 × 248 pt. Skaleringen er `--k` (verten måles av skjermer.js).
   Alt er prefikset med .a-/.app, så ingenting lekker ut. Fargene er appens egne (Theme.swift), og skjermene
   følger sidens lys/mørk-modus (data-theme eller systemet), eller tvinges med data-force="light|dark".
   ========================================================================== */

/* ---------- Verten (rammen) og tokens ---------- */
.a-host, .app {
  --a-font: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;
  --a-sys: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Nunito Sans", system-ui, sans-serif;
  /* Appens grunnpalett (Palette), lys */
  --snow: #F7F4EE; --card: #FFFFFF; --raised: #FBF9F5; --ink: #1D3441; --soft: #5E7280; --line: #E6DFD4;
  /* Tonene (Tone.color er lik i lys og mørk; Tone.soft skifter) */
  --t-multe: #F29E4C; --t-fjord: #3A7CA0; --t-mose: #6E9C7A; --t-isbre: #4FA9C4; --t-lyng: #9C7BC0; --t-nordlys: #36B28E; --t-rips: #E0655A;
  --s-multe: #FCEBD9; --s-fjord: #DEEAF1; --s-mose: #E3EEE5; --s-isbre: #DDF0F5; --s-lyng: #EDE5F5; --s-nordlys: #D9F2E9; --s-rips: #FBE3DF;
  /* iOS: gruppert liste (Form) og glass */
  --grp: #F2F2F7; --row: #FFFFFF; --sep: rgba(60, 60, 67, .16); --glass: rgba(255, 255, 255, .74); --fill: rgba(120, 120, 128, .12);
  --glass-edge: rgba(255, 255, 255, .7); --drop: rgba(29, 52, 65, .22); --segon: #FFFFFF;
}
.a-host.dark, .app.dark, .a-night, .a-host.dark .app {
  --snow: #0F171D; --card: #17232B; --raised: #1D2B34; --ink: #E8EEF1; --soft: #9AABB6; --line: #26343D;
  --s-multe: #33261A; --s-fjord: #16293A; --s-mose: #1B2D22; --s-isbre: #14313B; --s-lyng: #271F35; --s-nordlys: #13332B; --s-rips: #351B1A;
  --grp: #000000; --row: #1C1C1E; --sep: rgba(84, 84, 88, .6); --glass: rgba(34, 48, 57, .7); --fill: rgba(120, 120, 128, .24);
  --glass-edge: rgba(255, 255, 255, .12); --drop: rgba(0, 0, 0, .5); --segon: #636366;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .a-host:not(.light), :root:not([data-theme="light"]) .a-host:not(.light) .app {
    --snow: #0F171D; --card: #17232B; --raised: #1D2B34; --ink: #E8EEF1; --soft: #9AABB6; --line: #26343D;
    --s-multe: #33261A; --s-fjord: #16293A; --s-mose: #1B2D22; --s-isbre: #14313B; --s-lyng: #271F35; --s-nordlys: #13332B; --s-rips: #351B1A;
    --grp: #000000; --row: #1C1C1E; --sep: rgba(84, 84, 88, .6); --glass: rgba(34, 48, 57, .7); --fill: rgba(120, 120, 128, .24);
    --glass-edge: rgba(255, 255, 255, .12); --drop: rgba(0, 0, 0, .5); --segon: #636366;
  }
}
:root[data-theme="dark"] .a-host:not(.light), :root[data-theme="dark"] .a-host:not(.light) .app {
  --snow: #0F171D; --card: #17232B; --raised: #1D2B34; --ink: #E8EEF1; --soft: #9AABB6; --line: #26343D;
  --s-multe: #33261A; --s-fjord: #16293A; --s-mose: #1B2D22; --s-isbre: #14313B; --s-lyng: #271F35; --s-nordlys: #13332B; --s-rips: #351B1A;
  --grp: #000000; --row: #1C1C1E; --sep: rgba(84, 84, 88, .6); --glass: rgba(34, 48, 57, .7); --fill: rgba(120, 120, 128, .24);
  --glass-edge: rgba(255, 255, 255, .12); --drop: rgba(0, 0, 0, .5); --segon: #636366;
}

/* Rammen skjermen ligger i. `.scr`/`.wscr` er de gamle navnene fra forsiden; `.a-host` legges på automatisk. */
.a-host { position: relative; display: block; overflow: hidden; background: var(--snow); contain: paint; isolation: isolate; }
.a-host.scr { border-radius: 15.4% / 7.1%; }
.a-host.wscr { border-radius: 22%; background: #000; }

/* Selve skjermen: 390 × 848 pt, skalert med --k fra øverste venstre hjørne */
.app {
  position: absolute; left: 0; top: 0; width: 390px; height: max(848px, calc(100% / var(--k, 1))); overflow: hidden;
  transform-origin: 0 0; transform: scale(var(--k, 1));
  background: var(--snow); color: var(--ink);
  font: 500 17px/1.3 var(--a-font); letter-spacing: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.app *, .app *::before, .app *::after { box-sizing: border-box; }
.app.w { width: 208px; height: max(248px, calc(100% / var(--k, 1))); background: #000; color: #fff; }
.app svg { display: block; flex: none; max-width: none; }
.app canvas { max-width: none; }

/* Pause alt som går av seg selv når skjermen er utenfor synsfeltet */
.a-host.a-off .app *, .a-host.a-off .app *::before, .a-host.a-off .app *::after { animation-play-state: paused !important; }

/* ---------- Tonene ---------- */
.tn-multe { --tc: var(--t-multe); --ts: var(--s-multe); --td: #8E3B2B; }
.tn-fjord { --tc: var(--t-fjord); --ts: var(--s-fjord); --td: #12324A; }
.tn-mose { --tc: var(--t-mose); --ts: var(--s-mose); --td: #1E3F2C; }
.tn-isbre { --tc: var(--t-isbre); --ts: var(--s-isbre); --td: #0F3A4D; }
.tn-lyng { --tc: var(--t-lyng); --ts: var(--s-lyng); --td: #33204F; }
.tn-nordlys { --tc: var(--t-nordlys); --ts: var(--s-nordlys); --td: #0C3B33; }
.tn-rips { --tc: var(--t-rips); --ts: var(--s-rips); --td: #5A1F22; }

/* ---------- Tekststiler (Dynamic Type, SF Rounded) ---------- */
.a-lt { font: 800 34px/41px var(--a-font); letter-spacing: -.01em; }
.a-t1 { font: 800 28px/34px var(--a-font); letter-spacing: -.005em; }
.a-t2 { font: 800 22px/28px var(--a-font); }
.a-t3 { font: 800 20px/25px var(--a-font); }
.a-h { font: 800 17px/22px var(--a-font); }
.a-b { font: 500 17px/22px var(--a-font); }
.a-sh { font: 500 15px/20px var(--a-font); }
.a-shb { font: 700 15px/20px var(--a-font); }
.a-fn { font: 500 13px/18px var(--a-font); }
.a-c { font: 700 12px/16px var(--a-font); }
.a-c2 { font: 800 11px/13px var(--a-font); }
.a-soft { color: var(--soft); }
.a-caps { text-transform: uppercase; }
.a-tc { color: var(--tc); }
.a-num { font-variant-numeric: tabular-nums; }

/* ---------- Små byggeklosser ---------- */
.a-row { display: flex; align-items: center; }
.a-i { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.a-i .f { fill: currentColor; stroke: none; }
.a-i .fs { fill: currentColor; }
.a-card { background: var(--card); border-radius: 26px; padding: 18px; }
.a-circle { display: grid; place-items: center; border-radius: 50%; flex: none; }
.a-cap { display: inline-flex; align-items: center; border-radius: 999px; }
.a-lock { display: inline-grid; place-items: center; }

/* Glass (ultraThinMaterial / iOS 26) */
.a-glass { background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); box-shadow: inset 0 0 0 .5px var(--glass-edge), 0 6px 18px -8px var(--drop); }
.a-mat { background: color-mix(in srgb, var(--card) 58%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
/* Berøringsskjermer: glasset i de mange skjermene er hvert sitt komposittlag. Mer dekkende bakgrunn i stedet for uskarphet. */
@media (pointer: coarse) {
  .a-glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--card) 90%, transparent); }
  .a-mat { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--card) 80%, transparent); }
}

/* Rulling: innholdet kan skyves oppover (--sy i punkter), mens status, faner og navigasjon står */
.a-scroll { position: absolute; left: 0; top: 0; width: 100%; transform: translate(0, calc(var(--sy, 0) * -1px)); }
/* Eget lag bare for skjermer som faktisk ruller mens du ser på (PusteromSkjermer.scroll setter .a-scrolling): 20 faste lag var for mange */
.a-host.a-scrolling .a-scroll { will-change: transform; }
.a-fade-top { position: absolute; left: 0; right: 0; top: 0; height: 108px; z-index: 5; pointer-events: none; background: linear-gradient(var(--snow) 62%, color-mix(in srgb, var(--snow) 0%, transparent)); opacity: min(1, calc(var(--sy, 0) / 24)); }
.a-fade-bot { position: absolute; left: 0; right: 0; bottom: 0; height: 96px; z-index: 5; pointer-events: none; background: linear-gradient(color-mix(in srgb, var(--snow) 0%, transparent), color-mix(in srgb, var(--snow) 55%, transparent)); }

/* ---------- Statuslinje og fanelinje ---------- */
.a-sb { position: absolute; left: 0; right: 0; top: 0; height: 54px; z-index: 20; display: flex; justify-content: space-between; align-items: center; padding: 14px 32px 0 50px; font: 700 17px/1 var(--a-sys); letter-spacing: -.01em; color: var(--ink); pointer-events: none; }
.a-sb .ic { display: flex; gap: 6px; align-items: center; }
.a-night .a-sb, .a-sb.on-dark { color: #fff; }

/* Fanelinjen: flytende glass, tre faner (I dag · Utforsk · Fremgang), valgt fane i multe */
.a-tabs { position: absolute; left: 62px; width: 266px; bottom: 21px; height: 60px; z-index: 20; border-radius: 30px; display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; gap: 0; }
.a-tab { display: grid; place-items: center; align-content: center; gap: 2px; border-radius: 26px; font: 800 11px/13px var(--a-font); color: var(--ink); }
.a-tab svg { width: 26px; height: 24px; }
.a-tab.on { color: var(--t-multe); background: color-mix(in srgb, var(--ink) 7%, transparent); }

/* Navigasjon: runde glassknapper og store titler */
.a-nbtn { position: absolute; top: 59px; width: 44px; height: 44px; z-index: 20; border-radius: 50%; display: grid; place-items: center; color: var(--t-multe); }
.a-nbtn.r { right: 16px; }
.a-nbtn.l { left: 16px; }
.a-nbtn svg { width: 22px; height: 22px; }
.a-nbtn.in-ink { color: var(--ink); }

/* ---------- Dagens pusterom (CalmHero) ---------- */
.a-hero { border-radius: 30px; background: var(--card); overflow: hidden; box-shadow: 0 8px 16px rgba(0, 0, 0, .05); }
.a-hero-top { position: relative; height: 230px; background: var(--ts); overflow: hidden; }
.a-hero-top .a-chip { position: absolute; left: 14px; top: 14px; height: 28px; padding: 0 10px; gap: 6px; }
.a-hero-top .a-shuf { position: absolute; right: 14px; top: 14px; width: 36px; height: 36px; }
.a-hero-top .a-chip svg, .a-hero-top .a-shuf svg { width: 16px; height: 16px; }
.a-hero-body { padding: 18px; display: grid; gap: 12px; }
.a-hero-body .a-kind { margin-bottom: 6px; }
.a-btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border-radius: 26px; background: var(--ink); color: var(--snow); font: 700 17px/22px var(--a-font); }
.a-btn svg { width: 17px; height: 17px; }
.a-btn.tone { background: var(--tc); color: #fff; }
.a-kind { font: 800 11px/13px var(--a-font); letter-spacing: .1em; text-transform: uppercase; color: var(--tc); }

/* Pusteringene (BreathingRings): tre myke ringer og en fylt sirkel med symbol. Vokser 12 % i et rolig tempo. */
.a-orb { position: absolute; left: 50%; top: 50%; width: 182px; height: 182px; margin: -91px 0 0 -91px; }
.a-orb i { --w: calc(182px * (var(--b) + var(--d, .12))); position: absolute; left: 50%; top: 50%; border-radius: 50%; width: var(--w); height: var(--w); margin: calc(var(--w) / -2) 0 0 calc(var(--w) / -2); background: color-mix(in srgb, var(--tc) var(--o), transparent); transform: scale(var(--lo)); animation: a-orb 5s cubic-bezier(.37, 0, .63, 1) infinite alternate; }
.a-orb .core { background: color-mix(in srgb, var(--tc) 85%, transparent); }
.a-orb .sym { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.a-orb .sym svg { width: 24px; height: 24px; }
@keyframes a-orb { to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .a-orb i { animation: none; transform: scale(calc(var(--lo) + (1 - var(--lo)) * .6)); }
}
/* … speilet for «Pause bevegelsen» */

  :where(html[data-motion="off"]) :is(.a-orb i) { animation: none; transform: scale(calc(var(--lo) + (1 - var(--lo)) * .6)); }


/* Kort i rader */
.a-pad { padding-left: 20px; padding-right: 20px; }
.a-hrow { display: flex; gap: 12px; padding-left: 20px; }
.a-tile { flex: none; width: 150px; height: 170px; padding: 14px; border-radius: 22px; background: var(--ts); display: flex; flex-direction: column; }
.a-tile-top { display: flex; justify-content: space-between; align-items: flex-start; }
.a-tile-ic { position: relative; width: 52px; height: 52px; border-radius: 50%; background: color-mix(in srgb, var(--tc) 18%, transparent); display: grid; place-items: center; color: var(--tc); }
.a-tile-ic::before { content: ""; position: absolute; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--tc) 35%, transparent); }
.a-tile-ic svg { position: relative; width: 20px; height: 20px; }
.a-tile .a-lock { color: var(--tc); margin-top: 2px; }
.a-tile .a-lock svg { width: 12px; height: 12px; }
.a-tile .grow { flex: 1; }
.a-tile h4 { margin: 4px 0 0; font: 800 17px/22px var(--a-font); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-tile .meta { display: flex; align-items: center; gap: 4px; color: var(--soft); font: 700 12px/16px var(--a-font); margin-top: 8px; }
.a-tile .meta svg { width: 12px; height: 12px; }

/* Ukens topptur */
.a-summit-h { display: flex; justify-content: space-between; align-items: baseline; }
.a-pct { font: 800 22px/28px var(--a-font); color: var(--t-multe); font-variant-numeric: tabular-nums; }
.a-summit { counter-reset: apct 60 amin 18; }
.a-pct::before { content: counter(apct) " %"; }
.a-min::before { content: counter(amin); }
/* --sum-pct og --sum-min er heltall som JS skriver sammen med --p (skjermer.js). Mangler de, regner CSS selv med round(). */
@supports (width: round(1.5px, 1px)) {
  .a-summit { counter-reset: apct var(--sum-pct, round(calc(var(--p, .6) * 100), 1)) amin var(--sum-min, round(calc(var(--p, .6) * 30), 1)); }
}
@supports not (width: round(1.5px, 1px)) {
  .a-summit { counter-reset: apct var(--sum-pct, 60) amin var(--sum-min, 18); }
}
.a-trailbox { position: relative; height: 96px; margin-top: 14px; }
.a-trailbox svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.a-trail { stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--p, .6)); }
.a-marker { position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: 0; border-radius: 50%; background: var(--t-multe); border: 2.5px solid #fff; box-shadow: 0 0 4px color-mix(in srgb, var(--t-multe) 50%, transparent); offset-rotate: 0deg; offset-distance: calc(var(--p, .6) * 100%); box-sizing: border-box; }
.a-week { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 14px; }
.a-week span { display: grid; justify-items: center; gap: 5px; color: var(--soft); font: 700 11px/13px var(--a-font); }
.a-week span.today { color: var(--ink); }
.a-wd { position: relative; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--line) 60%, transparent); display: grid; place-items: center; color: #fff; }
.a-wd.on { background: var(--t-multe); }
.a-wd svg { width: 12px; height: 12px; stroke-width: 3.2; }
.today .a-wd::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid var(--ink); }

/* Tips */
.a-tip { display: flex; gap: 14px; align-items: flex-start; }
.a-tip .ic { width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--t-multe) 14%, transparent); color: var(--t-multe); display: grid; place-items: center; flex: none; }
.a-tip .ic svg { width: 20px; height: 20px; }

/* ---------- I dag: innsjekk-chip, kursbånd ---------- */
.a-moodchip { height: 36px; padding: 0 14px; gap: 6px; background: var(--card); font: 700 15px/20px var(--a-font); color: var(--ink); }
.a-moodchip svg { width: 16px; height: 16px; }
.a-mb6 { margin-bottom: 6px; }
.a-ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-two { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.a-course { position: relative; height: 250px; border-radius: 26px; overflow: hidden; color: #fff; }
.a-shade { position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(0, 0, 0, .28)); }
.a-course-t { position: absolute; left: 20px; right: 20px; bottom: 20px; }
.a-course-t .a-lt { color: #fff; }
.a-whitebtn { margin-top: 12px; gap: 6px; padding: 9px 14px; background: #fff; color: var(--tc); font: 800 15px/20px var(--a-font); }
.a-whitebtn svg { width: 13px; height: 13px; }

/* ---------- Utforsk ---------- */
.a-search { margin: 8px 20px 0; height: 36px; border-radius: 18px; background: var(--fill); display: flex; align-items: center; gap: 8px; padding: 0 12px; font: 500 17px/22px var(--a-font); color: var(--soft); white-space: nowrap; }
.a-search svg { width: 17px; height: 17px; color: var(--soft); flex: none; }
.a-search .a-ph { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.a-cgrid { display: grid; grid-template-rows: repeat(2, 80px); grid-auto-flow: column; grid-auto-columns: 104px; gap: 8px; padding-left: 20px; transform: translateX(calc(var(--gx, 0) * -1px)); width: max-content; }
.a-ctl { background: var(--card); border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0 6px; text-align: center; color: var(--ink); font: 800 12px/15px var(--a-font); }
.a-ctl svg { color: var(--tc); height: 26px; width: 22px; }
.a-ctl span { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.a-frow { gap: 12px; }
.a-fcard { flex: none; width: 326px; }
.a-fart { position: relative; height: 190px; border-radius: 24px; overflow: hidden; background: var(--tc); }
.a-toneart { position: absolute; inset: 0; overflow: hidden; }
.a-toneart .g { position: absolute; top: -40px; width: 230px; height: 230px; display: grid; place-items: center; }
.a-toneart .g > * { grid-area: 1 / 1; border-radius: 50%; }
.a-toneart .g svg { width: 50px; height: 50px; }
.a-badge { position: absolute; left: 12px; top: 12px; padding: 5px 10px; border-radius: 999px; background: #fff; font: 800 12px/16px var(--a-font); }
.a-meta { position: absolute; left: 12px; bottom: 12px; display: inline-flex; gap: 4px; align-items: center; padding: 5px 10px; border-radius: 999px; background: rgba(0, 0, 0, .28); color: #fff; font: 800 12px/16px var(--a-font); }
.a-catrow { display: block; }
.a-themeic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--tc) 16%, transparent); color: var(--tc); flex: none; }
.a-ctile { flex: none; width: 260px; }
.a-cart { position: relative; height: 150px; border-radius: 22px; overflow: hidden; }
.a-ptile { flex: none; width: 150px; height: 160px; padding: 14px; border-radius: 22px; background: var(--ts); display: flex; flex-direction: column; }
.a-pic { width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--tc) 18%, transparent); color: var(--tc); display: grid; place-items: center; }
.a-ptile .a-lock { color: var(--tc); margin-top: 2px; }
.a-ptile .grow, .a-bcard .grow { flex: 1; }

/* Kategorisiden (ExploreHeader + rutenett/rader) */
.a-xh { position: relative; padding: 118px 20px 26px; background: var(--ts); overflow: hidden; }
.a-xh .wm { position: absolute; right: -30px; bottom: -24px; color: color-mix(in srgb, var(--tc) 14%, transparent); }
.a-xh .wm svg { stroke-width: 1.6; }
.a-xh > :not(.wm) { position: relative; }
.a-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.a-stack14 { display: grid; gap: 14px; }
.a-crow { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 22px; background: var(--ts); }
.a-crow .col { flex: 1; min-width: 0; }
.a-rowic { position: relative; width: 56px; height: 56px; flex: none; border-radius: 50%; background: color-mix(in srgb, var(--tc) 18%, transparent); display: grid; place-items: center; color: var(--tc); }
.a-rowic::before { content: ""; position: absolute; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--tc) 35%, transparent); }
.a-rowic svg { position: relative; }
.a-crow .pc svg { display: block; }
.a-bcard { height: 190px; padding: 14px; border-radius: 22px; background: var(--ts); display: flex; flex-direction: column; align-items: flex-start; }
.a-bic { position: relative; width: 64px; height: 64px; display: grid; place-items: center; color: var(--tc); }
.a-bic .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--tc) 25%, transparent); }
.a-bic .fill { position: absolute; inset: 0; border-radius: 50%; background: color-mix(in srgb, var(--tc) 35%, transparent); transform: scale(.76); }
.a-bic svg { position: relative; }
.a-bcard .lk { position: absolute; left: 118px; top: 2px; color: var(--tc); }
.a-eff { display: inline-block; padding: 3px 8px; border-radius: 999px; font: 800 11px/13px var(--a-font); color: var(--tc); background: color-mix(in srgb, var(--tc) 16%, transparent); }
.app .grow { flex: 1; }

/* ---------- Ark (sheet): presenterende skjerm dempet bak ---------- */
.a-under { position: absolute; inset: 0; background: var(--snow); overflow: hidden; }
.a-dim { position: absolute; inset: 0; z-index: 10; background: rgba(0, 0, 0, .4); }
.a-sheet { position: absolute; left: 0; right: 0; bottom: 0; top: var(--st, 60px); z-index: 11; border-radius: 38px 38px 0 0; background: var(--snow); overflow: hidden; box-shadow: 0 -10px 40px rgba(0, 0, 0, .2); }
.a-sheet.grp { background: var(--grp); }
.a-grab { position: absolute; left: 50%; top: 8px; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 26%, transparent); z-index: 3; }
.a-sheetc { position: relative; padding: 34px 24px 24px; }
.a-bigic { width: 60px; height: 60px; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--tc) 18%, transparent); color: var(--tc); display: grid; place-items: center; }
.a-steps { margin-top: 22px; padding: 16px; border-radius: 20px; background: var(--ts); }
.a-step { display: flex; gap: 12px; align-items: center; }
.a-step .n { width: 28px; height: 28px; border-radius: 50%; background: var(--tc); color: #fff; display: grid; place-items: center; flex: none; }
.a-conn { display: block; width: 2px; height: 12px; margin-left: 13px; background: color-mix(in srgb, var(--tc) 30%, transparent); }
.a-chips { display: flex; gap: 10px; margin-top: 10px; }
.a-chips span { flex: 1; height: 44px; border-radius: 22px; background: var(--card); display: grid; place-items: center; font: 800 15px/20px var(--a-font); color: var(--ink); white-space: nowrap; }
.a-chips span.on { background: var(--tc); color: #fff; }

/* ---------- Pusteøvelsen (spilleren): alltid mørk ---------- */
.a-player { position: absolute; inset: 0; background: radial-gradient(circle 520px at 50% 42%, color-mix(in srgb, var(--tc) 16%, transparent), transparent), #05090D; color: var(--ink); }
.a-ptop, .a-mtop { position: absolute; left: 20px; right: 20px; top: 54px; display: flex; align-items: center; gap: 8px; z-index: 5; }
.a-pbtn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--card) 70%, transparent); color: var(--ink); }
.a-ptitle, .a-meyebrow { position: absolute; left: 0; right: 0; text-align: center; font: 800 12px/16px var(--a-font); letter-spacing: .17em; color: var(--soft); }
.a-ptitle { top: 104px; }
.a-meyebrow { top: 66px; }
.a-dots { position: absolute; display: block; pointer-events: none; }
.a-lblbox { position: absolute; left: 0; right: 0; top: 532px; text-align: center; }
.a-lbl { font: 800 28px/34px var(--a-font); color: #fff; }
.a-sec { margin-top: 6px; font: 500 20px/25px var(--a-font); color: rgba(255, 255, 255, .55); font-variant-numeric: tabular-nums; }
.a-lblbox.med { top: 384px; }
.a-lblbox.med .a-lbl { font-size: 22px; line-height: 28px; color: var(--ink); }
.a-lblbox.med .a-sec { font-size: 20px; color: var(--soft); margin-top: 4px; }
.a-pfoot { position: absolute; left: 0; right: 0; bottom: 54px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.a-left { font: 700 15px/22px var(--a-font); color: var(--soft); }
.a-pause { width: 76px; height: 76px; border-radius: 50%; background: var(--tc); color: #fff; display: grid; place-items: center; flex: none; }
.a-sym { position: absolute; z-index: 2; color: #fff; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--td, #000) 45%, transparent)); }
.a-sym svg { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); overflow: visible; stroke-width: 1.5; }

/* ---------- Meditasjonsspilleren: følger lys/mørk ---------- */
.a-medbg { position: absolute; inset: 0; background: linear-gradient(var(--ts), var(--snow)); }
.a-capline { position: absolute; left: 24px; right: 24px; top: 462px; height: 72px; text-align: center; font: 500 17px/22px var(--a-font); color: color-mix(in srgb, var(--ink) 85%, transparent); }
.a-capline span, .a-wcap span { position: absolute; left: 0; right: 0; top: 0; opacity: 0; transition: opacity .5s ease; }
.a-capline[data-k="in"] .c-in, .a-capline[data-k="out"] .c-out { opacity: 1; }
.a-mtitle { position: absolute; left: 24px; right: 24px; text-align: center; }
.a-ctrl { position: absolute; left: 24px; right: 24px; padding: 24px; border-radius: 28px; background: color-mix(in srgb, var(--card) 72%, transparent); }
.a-slider { position: relative; height: 28px; }
.a-slider .tr, .a-slider .fl { position: absolute; left: 0; top: 12px; height: 4px; border-radius: 2px; }
.a-slider .tr { right: 0; background: var(--fill); }
.a-slider .fl { background: var(--tc); }
.a-slider .th { position: absolute; top: 0; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .28); }
.a-times { display: flex; justify-content: space-between; margin-top: 4px; font: 500 12px/16px var(--a-font); color: var(--soft); }
.a-ctlrow { display: flex; justify-content: center; align-items: center; gap: 32px; margin-top: 18px; }
.a-skip { width: 52px; height: 52px; display: grid; place-items: center; color: var(--ink); }

/* ---------- Kurs ---------- */
.a-ntitle { position: absolute; left: 0; right: 0; top: 70px; text-align: center; font: 800 17px/22px var(--a-font); z-index: 6; }
.a-kart { position: relative; height: 220px; border-radius: 28px; overflow: hidden; }
.a-chrow { display: flex; gap: 8px; flex-wrap: wrap; }
.a-ch { display: inline-flex; gap: 4px; align-items: center; padding: 6px 10px; border-radius: 999px; background: var(--ts); color: var(--tc); font: 700 12px/16px var(--a-font); }
.a-segs { display: flex; gap: 5px; }
.a-segs i { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.a-lrow { display: flex; gap: 14px; align-items: flex-start; }
.a-lrow.dim { opacity: .55; }
.a-lrow .rail { display: flex; flex-direction: column; align-items: center; align-self: stretch; }
.a-lrow .n { position: relative; width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--ts); color: var(--tc); font: 800 17px/22px var(--a-font); }
.a-lrow .n.dn { background: var(--tc); color: #fff; }
.a-lrow .n.nx::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--tc) 50%, transparent); animation: a-pulse 1.8s ease-out infinite; }
@keyframes a-pulse { from { transform: scale(1); opacity: 1; } to { transform: scale(1.45); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .a-lrow .n.nx::after { animation: none; opacity: 0; } }
/* … speilet for «Pause bevegelsen» */
 :where(html[data-motion="off"]) :is(.a-lrow .n.nx)::after { animation: none; opacity: 0; } 
.a-lrow .ln { flex: 1; width: 2px; min-height: 20px; background: var(--line); }
.a-lrow .ln.dn { background: color-mix(in srgb, var(--tc) 50%, transparent); }
.a-lrow .tx { flex: 1; padding: 2px 0 22px; min-width: 0; }
.a-lrow .chv { padding-top: 14px; }

/* ---------- Fremgang ---------- */
.a-stat .a-t1 { letter-spacing: 0; }
.a-chart { display: block; width: 100%; height: auto; overflow: visible; }
.a-chart .ax { font: 500 11px var(--a-font); fill: var(--soft); }
.a-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 12px; }
.a-cal .wd { text-align: center; font: 800 11px/13px var(--a-font); color: var(--soft); }
.a-cal .d { position: relative; height: 32px; display: grid; place-items: center; border-radius: 50%; font: 500 13px/18px var(--a-font); color: color-mix(in srgb, var(--ink) 80%, transparent); }
.a-cal .d.on { background: var(--t-multe); color: #fff; font-weight: 800; }
.a-cal .d.fut { opacity: .38; }
.a-cal .d.today::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--ink); }
.a-kind-r { margin-top: 14px; }
.a-kind-r .bar { height: 8px; margin-top: 5px; border-radius: 4px; background: color-mix(in srgb, var(--line) 60%, transparent); }
.a-kind-r .bar i { display: block; height: 100%; border-radius: 4px; background: var(--tc); }
.a-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 12px; margin-top: 14px; }
.a-badgeit { display: flex; flex-direction: column; align-items: center; text-align: center; }
.a-bd { position: relative; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--line) 50%, transparent); color: color-mix(in srgb, var(--soft) 65%, transparent); }
.a-bd.on { background: color-mix(in srgb, var(--t-multe) 18%, transparent); color: var(--t-multe); }
.a-bd > svg:first-child { position: absolute; inset: 0; width: 64px; height: 64px; }

/* ---------- Innsjekk ---------- */
.a-mood { padding: 16px 20px 20px; }
.a-hop { display: flex; justify-content: flex-end; }
.a-hop .a-cap { height: 40px; padding: 0 16px; background: var(--card); font: 700 15px/20px var(--a-font); }
.a-mcard { min-height: 132px; padding: 14px; border-radius: 24px; background: var(--ts); display: flex; flex-direction: column; gap: 10px; }
.a-mcard .mic { width: 46px; height: 46px; border-radius: 50%; background: color-mix(in srgb, var(--tc) 18%, transparent); color: var(--tc); display: grid; place-items: center; }
.a-mcard.on { box-shadow: inset 0 0 0 2.5px var(--tc); transform: scale(1.03); }
.a-mcard.on .mic { background: var(--tc); color: #fff; }

/* ---------- Stille stund (spiller) ---------- */
.a-stime { position: absolute; left: 0; right: 0; top: 536px; text-align: center; }
.a-stfoot { position: absolute; left: 0; right: 0; bottom: 54px; display: grid; place-items: center; }

/* ---------- Innstillinger (Form) ---------- */
.a-form { position: absolute; inset: 0; padding: 0; overflow: hidden; }
.a-form .a-scroll { padding-bottom: 0; }
.a-fms { margin: 0 20px 22px; }
.a-fmh { padding: 0 16px 8px; font: 700 13px/18px var(--a-font); color: var(--soft); }
.a-fmf { padding: 8px 16px 0; font: 500 13px/18px var(--a-font); color: var(--soft); }
.a-fm { background: var(--row); border-radius: 26px; overflow: hidden; }
.a-fmr { position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px; font: 500 17px/22px var(--a-font); color: var(--ink); }
.a-fmr + .a-fmr::before { content: ""; position: absolute; left: 16px; right: 0; top: 0; height: .5px; background: var(--sep); }
.a-fmr .lb { flex: 1; min-width: 0; }
.a-fmr .vl { color: var(--soft); }
.a-fmr .vc { color: color-mix(in srgb, var(--soft) 70%, transparent); display: grid; }
.a-fmr .vc.ud { transform: rotate(90deg); }
.a-fmr.seg { padding: 8px 16px; }
.a-fmr.two { min-height: 62px; }
.a-fmr.two b { display: block; font-weight: 500; }
.a-fmr.two small { display: block; font: 500 12px/16px var(--a-font); color: var(--soft); }
.a-fmr .ck { color: var(--t-multe); }
.a-seg { display: flex; flex: 1; height: 32px; padding: 2px; border-radius: 9px; background: var(--fill); gap: 2px; }
.a-seg span { flex: 1; display: grid; place-items: center; border-radius: 7px; font: 700 13px/18px var(--a-font); }
.a-seg span.on { background: var(--segon); box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
.a-tog { position: relative; width: 51px; height: 31px; border-radius: 16px; background: rgba(120, 120, 128, .32); flex: none; }
.a-tog i { position: absolute; left: 2px; top: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .25); }
.a-tog.on { background: var(--t-multe); }
.a-tog.on i { left: 22px; }
.a-step2 { display: flex; height: 32px; border-radius: 9px; background: var(--fill); }
.a-step2 i { width: 47px; display: grid; place-items: center; font: 500 22px/1 var(--a-sys); font-style: normal; }
.a-step2 i + i { border-left: 1px solid var(--sep); }
.a-prem, .a-hi { display: grid; place-items: center; color: var(--t-multe); }
.a-prem { width: 36px; height: 36px; border-radius: 50%; background: var(--s-multe); }
.a-hi.plain { color: var(--ink); }
.a-time { padding: 6px 11px; border-radius: 8px; background: var(--fill); }
.a-wdays { display: flex; gap: 6px; width: 100%; padding: 6px 0; }
.a-wdays span { flex: 1; height: 36px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--line) 60%, transparent); font: 800 15px/20px var(--a-font); }
.a-wdays span.on { background: var(--t-multe); color: #fff; }
.a-snav { position: absolute; left: 0; right: 0; top: 0; height: 60px; z-index: 4; display: flex; align-items: center; justify-content: center; }
.a-snav .ti { font: 800 17px/22px var(--a-font); }
.a-done { position: absolute; right: 16px; top: 10px; height: 40px; padding: 0 16px; color: var(--t-multe); font: 800 17px/22px var(--a-font); }
.a-hfade { position: absolute; left: 0; right: 0; top: 0; height: 74px; z-index: 3; pointer-events: none; background: linear-gradient(var(--grp) 62%, color-mix(in srgb, var(--grp) 0%, transparent)); }

/* ---------- Velkomst ---------- */
.a-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.a-wshade { position: absolute; left: 0; right: 0; }
.a-wshade.t { top: 0; height: 240px; background: linear-gradient(rgba(0, 0, 0, .45), transparent); }
.a-wshade.b { bottom: 0; height: 380px; background: linear-gradient(transparent, rgba(0, 0, 0, .65)); }
.a-wmark { position: absolute; left: 0; right: 0; top: 90px; text-align: center; font: 700 24px/30px ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #fff; text-shadow: 0 0 12px rgba(0, 0, 0, .25); animation: a-wmark 8s cubic-bezier(.37, 0, .63, 1) infinite alternate; }
@keyframes a-wmark { from { transform: scale(1); opacity: .82; } to { transform: scale(1.06); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .a-wmark { animation: none; opacity: .9; } }
/* … speilet for «Pause bevegelsen» */
 :where(html[data-motion="off"]) :is(.a-wmark) { animation: none; opacity: .9; } 
.a-wbtns { position: absolute; left: 24px; right: 24px; bottom: 49px; display: grid; gap: 12px; }
.a-wtry { display: flex; gap: 8px; justify-content: center; align-items: center; height: 44px; margin-bottom: 4px; color: #fff; font: 700 17px/22px var(--a-font); }
.a-wb { height: 52px; border-radius: 26px; display: grid; place-items: center; font: 700 17px/22px var(--a-font); color: #fff; background: rgba(28, 30, 34, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.a-wb.on { background: #fff; color: #1D3441; box-shadow: none; }

/* ---------- Klokka (208 × 248) ---------- */
.a-wscroll { position: absolute; left: 0; top: 0; width: 100%; transform: translate3d(0, calc(var(--sy, 0) * -1px), 0); }
.a-whead { position: relative; height: 62px; padding: 10px 14px 0; }
.a-whead .tm { font: 700 17px/22px var(--a-font); color: #fff; }
.a-whead .ti { font: 800 17px/22px var(--a-font); color: var(--t-multe); }
.a-whead .gear { position: absolute; right: 16px; top: 8px; width: 36px; height: 36px; border-radius: 50%; background: #8E8E93; color: #fff; display: grid; place-items: center; }
.a-wnow { margin: 0 7px; height: 76px; border-radius: 24px; background: var(--tc); padding: 8px 12px 8px 16px; display: flex; justify-content: space-between; align-items: center; color: rgba(0, 0, 0, .85); }
.a-wnow .c { font: 700 11px/14px var(--a-font); opacity: .75; }
.a-wnow .t { font: 800 20px/24px var(--a-font); }
.a-wnow .m { font: 700 13px/16px var(--a-font); opacity: .75; }
.a-wnow .pl { width: 44px; height: 44px; flex: none; border-radius: 50%; background: rgba(0, 0, 0, .82); color: var(--tc); display: grid; place-items: center; }
.a-wrow { margin: 8px 7px 0; padding: 10px 12px; border-radius: 24px; background: #1C1C1E; display: flex; gap: 10px; align-items: center; }
.a-wrow .ic { width: 22px; display: grid; place-items: center; color: var(--tc); flex: none; }
.a-wrow .cp { font: 700 11px/14px var(--a-font); color: var(--tc); }
.a-wrow .t { font: 700 17px/21px var(--a-font); color: #fff; }
.a-wrow .m { font: 500 11px/14px var(--a-font); color: #8E8E93; }
.a-wfoot { margin: 12px 14px 0; display: flex; gap: 8px; align-items: center; font: 500 11px/14px var(--a-font); color: #fff; }
.a-wfoot .ring svg { width: 18px; height: 18px; }
.a-wstart { position: absolute; inset: 0; background: linear-gradient(color-mix(in srgb, var(--tc) 38%, #000), #000 72%); }
.a-wnav { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 0; }
.a-wnav .bk, .a-wnav .eye { width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; display: grid; place-items: center; }
.a-wnav .ti { font: 800 14px/18px var(--a-font); color: var(--t-multe); white-space: nowrap; }
.a-wbig { margin-top: 14px; text-align: center; font: 800 64px/70px var(--a-font); color: #fff; }
.a-wmin { text-align: center; font: 500 17px/22px var(--a-font); color: #8E8E93; }
.a-wrhy { text-align: center; padding: 4px 22px 0; font: 500 11px/14px var(--a-font); color: #8E8E93; }
.a-wcrown { position: absolute; right: 3px; top: 78px; width: 3px; height: 48px; border-radius: 2px; background: rgba(255, 255, 255, .4); }
.a-wstartbtn { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 44px; border-radius: 22px; background: var(--tc); color: rgba(0, 0, 0, .85); display: flex; gap: 6px; justify-content: center; align-items: center; font: 800 17px/22px var(--a-font); }
.a-wx { position: absolute; left: 15px; top: 17px; width: 35px; height: 35px; border-radius: 50%; background: var(--t-multe); color: #fff; display: grid; place-items: center; z-index: 3; }
.a-wtime { position: absolute; right: 16px; top: 18px; font: 700 17px/22px var(--a-font); color: #fff; z-index: 3; }
.a-wlbl { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font: 800 19px/24px var(--a-font); color: rgba(255, 255, 255, .92); text-shadow: 0 0 4px rgba(0, 0, 0, .6); z-index: 3; }
.a-wlbl.small { font-size: 16px; line-height: 20px; bottom: 46px; }
.a-wcap { position: absolute; left: 14px; right: 14px; top: 208px; height: 38px; text-align: center; font: 500 13px/16px var(--a-font); color: rgba(255, 255, 255, .85); }
.a-wcap[data-k="in"] .c-in, .a-wcap[data-k="out"] .c-out { opacity: 1; }
.a-pbtn { --pc: var(--card); }

/* ==== 10-hero.css ==== */
/* =============================================================================
   10-hero: «Fjordmorgen». Scene-kort med sol, dis, fjell i tre lag og fjordvann, pusteprikkene som aura bak fjellene,
   telefon og klokke i en rolig 3D-pose, og brikker som flyr inn mot telefonen. Alt går i takten til «Rolig rytme» (fem inn, fem ut).
   ============================================================================= */

/* ---------- Scenens farger (lys: morgen, mørk: fjordnatt med lav sol) ---------- */
.hero {
  --h-sky-a: #FBD2A4; --h-sky-b: #FCEBD9; --h-sky-c: #F8F1E6;
  --h-sun-a: #FFF1D9; --h-sun-b: #FBC684; --h-sun-c: rgba(242, 158, 76, .5); --h-sun-d: rgba(242, 158, 76, .16);
  --h-sun-mask: none;
  --h-far: #E2DAE0; --h-mid: #C0CAD7; --h-near: #90ABBE;
  --h-rim: rgba(255, 255, 255, .8);
  --h-water-a: #C6D9E5; --h-water-b: #A3C1D3; --h-glint: 255, 255, 255; --h-refl-c: 255, 190, 120; --h-refl: .55;
  --h-haze: 255, 255, 255; --h-haze-o: .6;
  --h-day-a: 226, 214, 246; --h-day-b: 255, 242, 232;   /* lavendel og krem, ikke blått: blått over oransje blir grått */
  --h-ink: color-mix(in srgb, var(--ink) 80%, var(--stage));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero {
    --h-sky-a: #09131B; --h-sky-b: #11202B; --h-sky-c: #2B2823;
    --h-sun-a: #FFE3B8; --h-sun-b: #F4A25A; --h-sun-c: rgba(238, 130, 62, .5); --h-sun-d: rgba(224, 101, 90, .16);
    --h-sun-mask: linear-gradient(180deg, transparent 8%, rgba(0, 0, 0, .4) 40%, #000 68%);   /* glødet holdes unna teksten */
    --h-far: #1E3242; --h-mid: #142636; --h-near: #0B1823;
    --h-rim: rgba(246, 176, 107, .34);
    --h-water-a: #12222E; --h-water-b: #08121A; --h-glint: 246, 176, 107; --h-refl-c: 246, 150, 80; --h-refl: .3;
    --h-haze: 120, 160, 196; --h-haze-o: .3;
    --h-day-a: 12, 30, 58; --h-day-b: 12, 30, 58;
  }
}
:root[data-theme="dark"] .hero {
  --h-sky-a: #09131B; --h-sky-b: #11202B; --h-sky-c: #2B2823;
  --h-sun-a: #FFE3B8; --h-sun-b: #F4A25A; --h-sun-c: rgba(238, 130, 62, .5); --h-sun-d: rgba(224, 101, 90, .16);
  --h-sun-mask: linear-gradient(180deg, transparent 8%, rgba(0, 0, 0, .4) 40%, #000 68%);
  --h-far: #1E3242; --h-mid: #142636; --h-near: #0B1823;
  --h-rim: rgba(246, 176, 107, .34);
  --h-water-a: #12222E; --h-water-b: #08121A; --h-glint: 246, 176, 107; --h-refl-c: 246, 150, 80; --h-refl: .3;
  --h-haze: 120, 160, 196; --h-haze-o: .3;
  --h-day-a: 12, 30, 58; --h-day-b: 12, 30, 58;
}

/* ---------- Scenekortet ---------- */
.alt-sec.hero { padding: 8px; padding-inline: max(8px, env(safe-area-inset-left, 0px)) max(8px, env(safe-area-inset-right, 0px)); }
.hero-stage {
  --vis: clamp(300px, 40svh, 500px);                 /* hvor mye av telefonen som står over kortets bunn */
  --pw: clamp(236px, min(24vw, 40svh), 500px);       /* telefonens bredde: vokser med vinduet, så den ikke blir liten på store skjermer */
  --water: clamp(64px, 9svh, 110px);
  --hh: clamp(210px, 28vw, 640px);                   /* høyden på fjellagene */
  position: relative; isolation: isolate; overflow: clip; border-radius: 28px;
  height: calc(100vh - 16px); height: calc(100svh - 16px); min-height: 680px;
  display: flex; flex-direction: column; align-items: center;
  background: var(--h-sky-b); color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent);   /* kanten synes også i mørk modus */
}
.hero-stage > * { pointer-events: none; }
.hero-stage > .hero-copy, .hero-stage > .hero-copy * { pointer-events: auto; }

.hero-sky { position: absolute; inset: 0; background: linear-gradient(180deg, var(--h-sky-a) 0%, var(--h-sky-b) 46%, var(--h-sky-c) 100%); }

/* Solen: lav, bak fjellene. Pusten styres av JS (scale 1 → 1,07), stigningen ved lasting av CSS.
   I mørk modus tones glødet ned mot teksten (--h-sun-mask), ellers ligger det lyst oransje bak «Gratis å laste ned». */
.hero-sunwrap {
  --sun: clamp(480px, 58vw, 860px); position: absolute; width: var(--sun); left: calc(50% - var(--sun) / 2); top: calc(100% - var(--vis) * .8 - var(--sun) / 2);
  -webkit-mask-image: var(--h-sun-mask); mask-image: var(--h-sun-mask);
}
.hero-sun {
  width: 100%; aspect-ratio: 1; border-radius: 50%; transform: scale(1.035);
  background: radial-gradient(circle closest-side, var(--h-sun-a) 0%, var(--h-sun-a) 13%, var(--h-sun-b) 24%, var(--h-sun-c) 44%, var(--h-sun-d) 70%, transparent 100%);
}

/* Dis: brede, myke bånd som driver sakte sidelengs (bare opacity og translate, ingen blend) */
.hero-haze { position: absolute; left: 0; right: 0; }
.hero-haze i {
  position: absolute; left: 4%; width: 92%; height: 100%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--h-haze), var(--h-haze-o)), rgba(var(--h-haze), 0));
  animation: hero-drift 72s var(--ease-io) infinite alternate;
}
.hero-haze--sky { top: 34%; height: 17%; }
.hero-haze--a { bottom: calc(var(--water) + var(--hh) * .40); height: calc(var(--hh) * .36); }
.hero-haze--a i { animation-duration: 88s; animation-direction: alternate-reverse; width: 80%; left: 10%; }
.hero-haze--b { bottom: calc(var(--water) + var(--hh) * .12); height: calc(var(--hh) * .30); }
.hero-haze--b i { animation-duration: 64s; width: 100%; left: 0; }
@keyframes hero-drift { from { translate: -8% 0; } to { translate: 8% 0; } }

/* Fjell i tre lag: luftperspektiv (bak = lysere og blåere) og en fin kantlinje i toppen.
   Fjellagene fortsetter 80 enheter under vannlinjen (gjemt bak vannet), så parallaksen aldri viser kanten, og har 200 enheter tom himmel over
   seg (viewBox starter på −200), så «slice» på brede skjermer bare beskjærer luft og aldri toppene.
   Sidelengs er de 24 px bredere enn kortet (kortet klipper), så pekeparallaksen aldri viser en kant av svg-boksen. */
.hero-hill { position: absolute; left: -24px; width: calc(100% + 48px); height: calc(var(--hh) * 1.6364); bottom: calc(var(--water) - 1px - var(--hh) * .1818); }
.hero-hill path { stroke: var(--h-rim); stroke-width: 1.3; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.hero-hill--far path { fill: var(--h-far); }
.hero-hill--mid path { fill: var(--h-mid); }
.hero-hill--near path { fill: var(--h-near); }

/* Fjordvann nederst, med glitrende linjer som tennes og slukkes i sine egne takter */
.hero-water {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--water);
  background: linear-gradient(180deg, var(--h-water-a), var(--h-water-b));
}
.hero-water i {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: 1.5px; border-radius: 2px;
  background: rgba(var(--h-glint), .9); opacity: .1; scale: .7 1;
  animation: hero-glint var(--d) var(--ease-io) var(--o) infinite;
}
@keyframes hero-glint { 50% { opacity: .75; scale: 1.1 1; } }
.hero-water::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1.5px; background: linear-gradient(90deg, transparent, rgba(var(--h-glint), .55) 20%, rgba(var(--h-glint), .55) 80%, transparent); }
.hero-water::after { content: ""; position: absolute; left: 50%; top: 0; width: 46%; height: 100%; translate: -50% 0; background: radial-gradient(closest-side at 50% 0, rgba(var(--h-refl-c), var(--h-refl)), transparent); }

/* Lysskifte morgen → dag: et lavendel- og kremtonet slør over scenen, tonet inn av scroll. Blått over oransje ga grått og matte åser;
   lyst og varmt gjør åsene lysere og dunstigere i stedet. */
.hero-day { position: absolute; inset: 0; opacity: 0; background: linear-gradient(180deg, rgba(var(--h-day-a), .32), rgba(var(--h-day-b), .24)); }

/* Pusteprikkene som aura: solens korona bak det nærmeste fjellet. «screen» lar de lyse prikkene lyse opp åsene i stedet for å farge dem
   (multe på blågrått ble gjørmete rosa). Klippet starter der telefonen starter, så prikkene aldri havner bak teksten; fjellet foran gir dybde. */
.hero-aura-clip {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--vis); overflow: clip; mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%); mask-image: linear-gradient(180deg, transparent 0, #000 24%);
}
.hero-aura {
  --au: min(calc(var(--pw) * 2.5), 1000px); position: absolute; width: var(--au); max-width: none; aspect-ratio: 1;   /* max-width: none, ellers krymper base.css lerretet og midten forskyves; taket holder lerretet (og minnet) i sjakk på store skjermer */
  left: calc(50% - var(--au) / 2); top: calc(var(--vis) * .34 - var(--au) / 2);
}

/* ---------- Tekst: introen er ren CSS (ingen skjult tekst før JS), så ingressen er synlig fra første tegning ---------- */
.hero-copy {
  position: relative; z-index: 6; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(88px, 10.4svh, 116px) var(--gutter) 0; width: 100%; max-width: 1000px;
}
.hero-eyebrow { font: 800 14.5px/1 var(--display); letter-spacing: .01em; padding: 10px 18px 10px 14px; margin-bottom: clamp(14px, 2svh, 22px); }
.hero-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--multe); flex: none; animation: hero-dot 10s var(--ease-io) infinite; }
@keyframes hero-dot { 50% { scale: 1.5; } }
.hero-h1 { font-size: clamp(42px, min(6.3vw, 9.2svh), 84px); font-weight: 900; line-height: .98; letter-spacing: -.028em; margin-bottom: clamp(14px, 2.4svh, 26px); }
.hero-h1 em { font-style: normal; color: var(--multe-text); }
.hero-lede { font-size: clamp(17px, min(1.55vw, 2.3svh), 21px); line-height: 1.45; color: var(--h-ink); max-width: 37em; text-wrap: balance; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 26px; margin-top: clamp(16px, 2.8svh, 28px); }
.hero-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; font: 700 14.5px/1.3 var(--display); color: color-mix(in srgb, var(--ink) 82%, var(--stage)); }
.hero-meta span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 14px 2px; border-radius: 50%; background: currentColor; opacity: .6; vertical-align: middle; }
.hero-note { flex-basis: 100%; margin-top: -4px; font: 600 12.5px/1.3 var(--display); color: color-mix(in srgb, var(--ink) 90%, var(--stage)); }
.hero-cta .alt-badge { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }   /* Safari kjenner bare -webkit-user-select */

/* ---------- Telefon og klokke: en rolig 3D-pose i hvile, pekeren vipper den litt oppå ---------- */
.hero-device { position: absolute; left: 0; right: 0; z-index: 4; display: flex; justify-content: center; bottom: calc(var(--vis) - var(--pw) * 2.1741); }
.hero-rise { position: relative; perspective: 1800px; }
/* Hvileposen ligger i `transform`; JS skriver pekeravviket i `rotate`, som regnes ytterst, så de legger seg oppå hverandre */
.hero-tilt { position: relative; width: var(--pw); transform-style: preserve-3d; transform-origin: 50% 22%; transform: rotateX(1.5deg) rotateY(8deg) rotateZ(3.5deg); }
.hero-phone { --phone-w: var(--pw); }
/* Klokka står litt foran telefonen (translateZ) og er vridd mot den, så pekevippingen gir dybde mellom de to */
.hero-watch {
  --watch-w: calc(var(--pw) * .57); position: absolute; left: 78%; top: calc(var(--vis) - var(--pw) * .68 - 26px); rotate: 6deg;   /* hele klokka over kortets bunn */
  transform: translateZ(54px) rotateY(-16deg);
}
/* Skjermkarusellen: tre skjermer side om side i et vindu med telefonens skjermform; JS flytter dem i takt med pusten.
   Startrekkefølgen (lag og plass) er den samme som JS gir ved første bilde: «I dag» vises, «Pust» venter til høyre, «Meditasjon» ligger bak. */
.hero-reel { position: absolute; inset: 1.472% 3.2%; border-radius: 15.4% / 7.1%; overflow: hidden; contain: paint; background: var(--snow); }
.hero-reel > .hero-s { position: absolute; inset: 0; border-radius: 0; box-shadow: -22px 0 40px -8px rgba(9, 18, 26, .32); }
/* Spillerne har prikkene midt på skjermen: løft dem litt, så de står fritt over kortets bunn (telefonen er avskåret der) */
.hero-reel > .hero-s:nth-child(n+2) .app { translate: 0 calc(var(--pw) * -.2); }
.hero-reel > .hero-s:nth-child(1) { z-index: 1; }
.hero-reel > .hero-s:nth-child(2) { z-index: 2; transform: translateX(100%); }
.hero-reel > .hero-s:nth-child(3) { z-index: 0; transform: translateX(-30%); }

/* ---------- Brikkene: flyr inn mot telefonen fra venstre, kommer ut til høyre ----------
   Seks baner (tre på hver side) à to brikker: hver brikke er synlig i ca. 12 s av en runde på 30 s, og de to i samme bane avløser hverandre,
   så det er alltid 4–6 brikker i bildet. --p er hvor langt ute i runden brikken står når siden åpnes. Kanten av scenekortet klipper dem. */
.hero-chips { --span: min(46vw, 760px); position: absolute; left: 0; right: 0; bottom: 0; height: var(--vis); z-index: 3; margin: 0; padding: 0; list-style: none; }
.hero-chip {
  --sx: calc(var(--span) * -.66);
  position: absolute; left: 50%; top: var(--y); display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px 12px 16px; border-radius: 999px; white-space: nowrap; color: var(--ink);
  background: color-mix(in srgb, var(--card) 86%, transparent);   /* nesten dekkende i stedet for backdrop-filter: tolv glassflater på samme tid ble for mange komposittlag */
  border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  box-shadow: 0 16px 34px -20px rgba(29, 52, 65, .45), inset 0 1px 0 color-mix(in srgb, var(--card) 70%, transparent);
  font: 800 16.5px/1 var(--display); letter-spacing: -.005em;
  translate: calc(-50% + var(--sx)) -50%; rotate: var(--r1, 0deg);   /* i ro (redusert bevegelse) står hver brikke i sin bane */
}
.hero-chip[data-side="r"] { --sx: calc(var(--span) * .66); }
.hero-chip::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--tone); flex: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--tone) 22%, transparent); }
.hero-chip > span { font-weight: 700; font-size: 14.5px; color: var(--ink-soft); }   /* ink-soft holder 4,5:1 på kortflaten; blandingen ga 3,8–4,3:1 */
.hero-chip:not(.hero-chip--card) > span::before { content: "· "; }

/* Mini-kortet: ikon, tittel, en tidslinje med rytmen og en liten tekst. Tidslinjen er øvelsens egne faser (som Alt.TECH), og en prikk følger den i øvelsens tempo. */
.hero-chip--card {
  display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto auto auto; align-items: center; gap: 0 12px; justify-items: start;
  width: 240px; padding: 14px 18px 13px 14px; border-radius: 24px;
}
.hero-chip--card::before { display: none; }
.hero-chip--card > b { grid-column: 2; grid-row: 1; align-self: end; font-size: 16px; line-height: 1.15; white-space: nowrap; }
.hero-chip--card > .hero-sub { grid-column: 2; grid-row: 2; align-self: start; font-size: 13.5px; line-height: 1.25; }
.hero-ico {
  grid-column: 1; grid-row: 1 / 3; display: grid; place-items: center; width: 44px; aspect-ratio: 1; border-radius: 50%;
  background: color-mix(in srgb, var(--tone) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 24%, transparent);
}
.hero-ico svg { width: 30px; height: 30px; overflow: visible; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hero-ico svg path { fill: color-mix(in srgb, var(--tone) 35%, transparent); }   /* månen fylles; strålene er bare streker */
.hero-ico svg circle { fill: var(--tone); stroke: none; }
.hero-bar { grid-column: 1 / -1; grid-row: 3; position: relative; display: flex; gap: 3px; width: 100%; margin-top: 12px; }
.hero-bar > i { flex: var(--w) 1 0; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--tone) 70%, transparent); }
.hero-bar > i:nth-child(2) { background: color-mix(in srgb, var(--tone) 46%, transparent); }
.hero-bar > i:nth-child(3) { background: color-mix(in srgb, var(--tone) 28%, transparent); }
.hero-bar > i:nth-child(4) { background: color-mix(in srgb, var(--tone) 46%, transparent); }
.hero-bar > em { position: absolute; left: 0; top: -2px; width: 100%; height: 10px; translate: -64% 0; }   /* i ro står prikken en tredjedel ut */
.hero-bar > em::after { content: ""; position: absolute; right: 0; top: 0; width: 10px; height: 10px; margin-right: -5px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--card) 80%, transparent); }
.hero-chip--card > small { grid-column: 1 / -1; grid-row: 4; margin-top: 7px; font: 700 12px/1.2 var(--display); color: color-mix(in srgb, var(--ink) 86%, var(--card)); font-variant-numeric: tabular-nums; }

/* I ro (redusert bevegelse, eller uten JS) står bare de seks brikkene med data-rest; de seks andre tas først i bruk når løkka går. */
.hero-chip:not([data-rest]) { display: none; }

@media (prefers-reduced-motion: no-preference) {
  :where(html:not([data-motion="off"])) :is(.alt-ready .hero-chip) { display: inline-flex; animation: hero-in 30s linear infinite both; animation-delay: calc(var(--p) * -1s); }
  :where(html:not([data-motion="off"])) :is(.alt-ready .hero-chip--card) { display: grid; }
  :where(html:not([data-motion="off"])) :is(.alt-ready .hero-chip[data-side="r"]) { animation-name: hero-out; }
  :where(html:not([data-motion="off"])) :is(.alt-ready .hero-ico svg) { animation: hero-ico var(--cycle, 10s) var(--ease-io) infinite; }
  :where(html:not([data-motion="off"])) :is(.alt-ready .hero-bar > em) { animation: hero-play var(--cycle, 10s) linear infinite; }
  :where(html:not([data-motion="off"])) :is(.alt-ready .hero-run) { animation: hero-run var(--cycle, 16s) linear infinite; }
  :where(html:not([data-motion="off"])) :is(.alt-ready .hero-chips) { animation: hero-fade 2.6s var(--ease-soft) 1.3s backwards; }
}
/* Venstre: inn mot telefonen, krymper og forsvinner idet brikken «går inn» (sine inn-ut) */
@keyframes hero-in {
  0% { opacity: 0; translate: calc(-50% - var(--span)) calc(-50% + var(--dy)); scale: var(--s0, 1.08); rotate: var(--r0); animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  5% { opacity: 1; }
  36% { opacity: 1; }
  42%, 100% { opacity: 0; translate: calc(-50% - 90px) -50%; scale: var(--s1, .85); rotate: var(--r1); }
}
/* Høyre: kommer ut bak telefonen og klokka, vokser og seiler ut (sine inn) */
@keyframes hero-out {
  0% { opacity: 0; translate: calc(-50% + 90px) -50%; scale: var(--s0, .85); rotate: var(--r0); animation-timing-function: cubic-bezier(.12, 0, .39, 0); }
  5% { opacity: 1; }
  36% { opacity: 1; }
  42%, 100% { opacity: 0; translate: calc(-50% + var(--span)) calc(-50% + var(--dy)); scale: var(--s1, 1.08); rotate: var(--r1); }
}
@keyframes hero-ico { 50% { scale: 1.09; } }
@keyframes hero-play { from { translate: -100% 0; } to { translate: 0 0; } }
/* Fire hjørner: prikken går én side per firkant-fase (inn, hold, ut, hold) */
@keyframes hero-run {
  0% { transform: translate(0, 0); }
  25% { transform: translate(13px, 0); }
  50% { transform: translate(13px, 13px); }
  75% { transform: translate(0, 13px); }
  100% { transform: translate(0, 0); }
}

/* ---------- Hjørnekortet «Pust med oss»: fader ut over de første 900 px ---------- */
.hero-corner {
  position: fixed; z-index: 40; right: max(20px, env(safe-area-inset-right, 0px)); bottom: max(20px, env(safe-area-inset-bottom, 0px));
  width: 304px; display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 12px;
  padding: 10px 34px 10px 10px; border-radius: 22px; cursor: pointer;
}
html:not(.js) .hero-corner { display: none; }   /* uten JS kan kortet ikke lukkes */
.hero-corner.is-gone { display: none; }   /* display:none, ikke visibility: da slutter prikkene å tegne (IntersectionObserver ser ikke skjulte bokser) */
.hero-corner.is-closed { opacity: 0 !important; transform: translateY(14px) scale(.96) !important; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.hero-corner-dots { width: 64px; height: 64px; }
.hero-corner-t { display: grid; gap: 4px; min-width: 0; }
.hero-corner-t b { font: 800 14.5px/1.2 var(--display); letter-spacing: -.005em; }
.hero-corner-t span { font: 700 13.5px/1 var(--display); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.hero-corner-t i { font-style: normal; }
.hero-corner-x {
  position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-soft); cursor: pointer; transition: background-color .4s var(--ease-soft), color .4s;
}
.hero-corner-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
@media (hover: hover) { .hero-corner-x:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink); } }
@media (max-width: 1100px) { .hero-corner { display: none; } }   /* under dette havner kortet over klokka */

/* ---------- Intro ved lasting ----------
   Teksten (brikke, overskrift, ingress, knapp) har egne CSS-animasjoner som starter ved første tegning, uten å vente på JS.
   Ingressen er LCP på mobil, og nettleseren teller teksten først når den er malt med opasitet over null i en vanlig tegning (en fade fra 0
   som går på GPU-en teller ikke før JS er ferdig). Den kommer derfor inn uten fade: uskarp og litt senket ved første tegning, og i fokus etter ett sekund.
   Overskriften skrives ord for ord. Scenen starter når siden er klar (.alt-ready); start-tilstanden ligger i CSS (ingen blink),
   og feiler JS vises alt etter 3,5 s. */
@media (prefers-reduced-motion: no-preference) {
  :where(html:not([data-motion="off"])) :is(.hero-eyebrow) { animation: hero-up 1.1s var(--ease-out) .05s backwards; }
  :where(html:not([data-motion="off"])) :is(.hero-h1 .w > span) { animation: hero-word 1.3s var(--ease-out) calc(.12s + var(--wi) * 70ms) backwards; }
  :where(html:not([data-motion="off"])) :is(.hero-lede) { animation: hero-focus 1.5s var(--ease-out) .2s backwards; }
  :where(html:not([data-motion="off"])) :is(.hero-cta) { animation: hero-up 1.2s var(--ease-out) .5s backwards; }
}
@keyframes hero-up { from { opacity: 0; translate: 0 18px; filter: blur(10px); } }
@keyframes hero-word { from { opacity: 0; translate: 0 110%; filter: blur(8px); } }
@keyframes hero-focus { from { translate: 0 14px; filter: blur(9px); } }

.js:not(.alt-ready) .hero-sunwrap, .js:not(.alt-ready) .hero-water, .js:not(.alt-ready) .hero-aura, .js:not(.alt-ready) .hero-rise, .js:not(.alt-ready) .hero-corner,
.js:not(.alt-ready) .hero-hill, .js:not(.alt-ready) .hero-chips { opacity: 0; }
.js:not(.alt-ready) .hero-device { visibility: hidden; }   /* usynlig så den ikke teller som layoutskift når JS måler og flytter den */
@keyframes hero-fs { to { opacity: 1; } }
html.js:not(.alt-ready) .hero-pre, html.js:not(.alt-ready) .hero-chips { animation: hero-fs .01s 3.5s forwards; }
html.js:not(.alt-ready) .hero-device { animation: hero-vis .01s 3.5s forwards; }
@keyframes hero-vis { to { visibility: visible; } }

@media (prefers-reduced-motion: no-preference) {
  :where(html:not([data-motion="off"])) :is(.alt-ready .hero-sunwrap) { animation: hero-sun-in 2.8s cubic-bezier(.215, .61, .355, 1) .1s backwards; }
  :where(html:not([data-motion="off"])) :is(.alt-ready .hero-hill) { animation: hero-hill-in 2.2s cubic-bezier(.215, .61, .355, 1) backwards; }
  :where(html:not([data-motion="off"])) :is(.alt-ready .hero-hill--far) { animation-delay: .15s; }
  :where(html:not([data-motion="off"])) :is(.alt-ready .hero-hill--mid) { animation-delay: .33s; }
  :where(html:not([data-motion="off"])) :is(.alt-ready .hero-hill--near) { animation-delay: .51s; }
  :where(html:not([data-motion="off"])) :is(.alt-ready .hero-water) { animation: hero-fade 1.8s var(--ease-soft) .5s backwards; }
  :where(html:not([data-motion="off"])) :is(.alt-ready .hero-aura) { animation: hero-fade 2.6s var(--ease-soft) 1.2s backwards; }
  :where(html:not([data-motion="off"])) :is(.alt-ready .hero-rise) { animation: hero-rise 1.8s cubic-bezier(.215, .61, .355, 1) .5s backwards; }
  :where(html:not([data-motion="off"])) :is(.alt-ready .hero-watch) { animation: hero-rise-w 1.8s cubic-bezier(.215, .61, .355, 1) 1s backwards; }
}
@keyframes hero-sun-in { from { opacity: 0; translate: 0 30%; } }
@keyframes hero-hill-in { from { opacity: 0; translate: 0 7%; } }   /* stiger i dis, ikke som et teppe med rett kant */
@keyframes hero-fade { from { opacity: 0; } }
@keyframes hero-rise { from { opacity: 0; translate: 0 14%; scale: .98; } }
@keyframes hero-rise-w { from { opacity: 0; translate: 0 22%; } }

/* Utenfor skjermen står alt som går av seg selv stille */
.hero.is-off .hero-stage *, .hero.is-off .hero-stage *::before { animation-play-state: paused !important; }
.hero:not(.is-off) .hero-rise, .hero:not(.is-off) .hero-sun { will-change: transform; }

/* ---------- Mobil: samme scene, men enklere (ingen brikker, ingen hjørnekort, ingen parallax) ---------- */
@media (max-width: 860px) {
  .alt-sec.hero { padding: 6px; padding-inline: max(6px, env(safe-area-inset-left, 0px)) max(6px, env(safe-area-inset-right, 0px)); }
  .hero-stage {
    --vis: clamp(290px, 40svh, 400px); --pw: clamp(240px, 64vw, 380px); --water: clamp(48px, 7svh, 72px); --hh: clamp(200px, 56vw, 300px);
    border-radius: 24px; height: calc(100vh - 12px); height: calc(100svh - 12px); min-height: 660px;
  }
  .hero-hill { left: 0; width: 100%; }
  .hero-copy { padding-top: clamp(78px, 10svh, 100px); }
  .hero-eyebrow { margin-bottom: 14px; }
  .hero-h1 { font-size: clamp(36px, 10.6vw, 54px); margin-bottom: 14px; }
  .hero-lede { font-size: 16px; line-height: 1.45; }
  .hero-cta { margin-top: 20px; gap: 12px; }
  .hero-meta { font-size: 12.5px; }
  .hero-meta span + span::before { margin: 0 8px 2px; }
  .hero-chips, .hero-corner { display: none; }
  .hero-sunwrap { --sun: min(120vw, 560px); }
}
@media (max-width: 520px) { .hero-aura { --au: calc(var(--pw) * 1.9); } .hero-watch { --watch-w: calc(var(--pw) * .5); left: 66%; } }
@media (max-width: 400px) { .hero-eyebrow { font-size: 13.5px; } }

/* ==== 20-fungerer.css ==== */
/* =============================================================================
   20-fungerer: «Fungerer med». En stille stripe: seks ikoner som tegner seg selv, og en laurbærgrein rundt «Laget i Norge».
   ============================================================================= */
.alt-sec.fungerer { padding-block: clamp(44px, 5vw, 68px) clamp(40px, 4.4vw, 56px); }
.fungerer-h { text-align: center; font: 800 clamp(20px, 1.7vw, 24px)/1.1 var(--display); letter-spacing: -.01em; color: var(--ink); }

.fungerer-list {
  list-style: none; margin: clamp(22px, 2.2vw, 30px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 14px;
}
.fungerer-item[hidden], .dypere-item[hidden] { display: none; }   /* Apple Watch skjules til klokkeappen kommer */
.fungerer-item { position: relative; display: grid; justify-items: center; align-content: start; gap: 5px; text-align: center; }
.fungerer-item b { font: 800 16.5px/1.2 var(--display); letter-spacing: -.005em; }
.fungerer-sub { max-width: 19ch; font-size: 14px; line-height: 1.35; color: var(--ink-soft); text-wrap: balance; }

/* Ikonet: en rund, myk flate i tonens farge. Den puster så vidt (10 s, hver sin fase) og får en utpust-ring ved hover. */
.fungerer-ic {
  position: relative; display: grid; place-items: center; width: 64px; aspect-ratio: 1; margin-bottom: 8px; border-radius: 50%;
  background: var(--tone-g);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 18%, transparent), 0 14px 26px -18px color-mix(in srgb, var(--tone) 70%, transparent);
  transition: transform .9s var(--ease-expo);
}
.fungerer-ic::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  border: 2px dotted var(--tone); opacity: 0; scale: .9;
}
.fungerer-ic svg { width: 30px; height: 30px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.fungerer-ic .dr { stroke-dasharray: 1; stroke-dashoffset: 0; }
.fungerer-ic .fill { fill: var(--ink); fill-opacity: .16; stroke: none; }

.fungerer-made { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 1.6vw, 18px); margin-top: clamp(26px, 3vw, 36px); color: var(--ink-soft); }
.fungerer-made span { font: 800 clamp(16px, 1.4vw, 19px)/1 var(--display); letter-spacing: -.005em; color: var(--ink); white-space: nowrap; }
.fungerer-sprig { width: clamp(40px, 4vw, 52px); height: auto; flex: none; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.fungerer-sprig--r { transform: scaleX(-1); }
.fungerer-sprig .dr { stroke-dasharray: 1; stroke-dashoffset: 0; }

@media (hover: hover) {
  .fungerer-item:hover .fungerer-ic { transform: translateY(-4px) scale(1.04); }
}

@media (prefers-reduced-motion: no-preference) {
  :where(html:not([data-motion="off"])) :is(.fungerer-ic) { animation: fungerer-breathe 10s var(--ease-io) calc(var(--i) * -1.7s) infinite; }
  @media (hover: hover) { :where(html:not([data-motion="off"])) :is(.fungerer-item:hover .fungerer-ic)::after { animation: fungerer-ring 1.9s var(--ease-out) both; } }
  /* Ikonene tegnes strek for strek når raden kommer inn (stagger fra venstre) */
  :where(html:not([data-motion="off"])) :is(.fungerer-item.is-in .fungerer-ic .dr) { animation: fungerer-draw 1.7s var(--ease-io) calc(var(--i) * 110ms + .3s) backwards; }
  :where(html:not([data-motion="off"])) :is(.fungerer-item.is-in .fungerer-ic .fill) { animation: fungerer-fade 1.4s var(--ease-soft) calc(var(--i) * 110ms + 1.2s) backwards; }
  /* Laurbærgrenen: stilken først, så bladene oppover (power2.inOut, 1,6 s) */
  :where(html:not([data-motion="off"])) :is(.fungerer-made.is-in .dr) { animation: fungerer-draw 1.6s var(--ease-io) calc(var(--k) * 70ms + .2s) backwards; }
}
@keyframes fungerer-draw { 0% { stroke-dashoffset: 1; opacity: 0; } 6% { opacity: 1; } 100% { stroke-dashoffset: 0; } }
@keyframes fungerer-fade { from { fill-opacity: 0; } }
@keyframes fungerer-breathe { 50% { scale: 1.045; } }
@keyframes fungerer-ring { 0% { opacity: 0; scale: .92; } 20% { opacity: .75; } 100% { opacity: 0; scale: 1.55; } }
.fungerer.is-off *, .fungerer.is-off *::before, .fungerer.is-off *::after { animation-play-state: paused !important; }

@media (max-width: 1040px) {
  .fungerer-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 12px; }
}
@media (max-width: 560px) {
  .fungerer-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fungerer-ic { width: 58px; }
}

/* ==== 30-strom.css ==== */
/* 30-strom: to rader med drift. Grunnstilen er den statiske, ferdige tilstanden: uten JS og ved redusert bevegelse er radene
   vanlige vannrette scrollere. JS legger på .is-live, og da klippes raden og kantene tones ut.
   Seksjonen klipper ingenting selv: radene klipper seg selv, og ingenting stikker ut til siden eller opp og ned (overflow-x: clip på en
   boks som kan stikke ut i høyden klipper også høyden i Safari når barna ligger i egne lag). */
.strom {
  --gap: 22px; --cw: 248px; --vis: 206px; --dots: 172px;
  position: relative; padding-block: clamp(72px, 8.5vw, 128px) clamp(40px, 5vw, 72px);
}
/* Myk fargeluft bak radene, så flaten ikke blir flat krem */
.strom::before {
  content: ""; position: absolute; inset: 24% 0 0; pointer-events: none;
  background:
    radial-gradient(46% 46% at 9% 52%, color-mix(in srgb, var(--t-isbre) 14%, transparent), transparent 70%),
    radial-gradient(43% 44% at 91% 40%, color-mix(in srgb, var(--t-multe) 14%, transparent), transparent 70%);
}
.strom-intro { position: relative; display: grid; justify-items: center; gap: clamp(14px, 1.6vw, 22px); text-align: center; }
.strom-intro .alt-lede { margin-inline: auto; }
.strom-nb { white-space: nowrap; }   /* de to siste ordene i overskriften holdes sammen (data-split deler på mellomrom, så &nbsp; ville gått tapt) */
.strom-stage { position: relative; display: grid; gap: clamp(8px, 1.4vw, 20px); margin-top: clamp(40px, 5vw, 72px); }

/* Raden */
.strom-row {
  --room: 0px;   /* ekstra luft under raden til skyggen på et løftet kort (se under) */
  position: relative; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin;
  padding: 26px max(var(--gutter), env(safe-area-inset-right, 0px)) calc(44px + var(--room)) max(var(--gutter), env(safe-area-inset-left, 0px));   /* ikke under hakket når kortene ligger i ro */
  margin-bottom: calc(var(--room) * -1);   /* luften ligger over det som kommer under, så oppsettet er det samme */
}
/* Raden klipper, og skyggen under et løftet kort er lengre enn paddingen: uten ekstra luft ender den i en rett kant. Bare der musa kan løfte kortet. */
@media (hover: hover) { .strom-row:not(.strom-row--pills) { --room: 26px; } }
.strom-track { display: flex; width: max-content; }
.strom-set { display: flex; align-items: flex-start; gap: var(--gap); flex: none; margin: 0; padding: 0; list-style: none; }
.strom-item { flex: none; scroll-snap-align: center; }
/* Stillestående rad: kortene står litt forskjøvet. I den levende raden tar dønningen (JS) over. */
.strom-row:not(.is-live):not(.strom-row--pills) .strom-item:nth-child(4n + 2) { margin-top: 22px; }
.strom-row:not(.is-live):not(.strom-row--pills) .strom-item:nth-child(4n + 3) { margin-top: 8px; }
.strom-row:not(.is-live):not(.strom-row--pills) .strom-item:nth-child(4n + 4) { margin-top: 30px; }
.strom-row.is-live {
  overflow: hidden; scroll-snap-type: none; padding-inline: 0; touch-action: pan-y;   /* fingeren drar raden sideveis, siden ruller fortsatt loddrett */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.strom-row.is-live .strom-set { padding-right: var(--gap); }   /* så settet er en hel periode: skjøten mellom kopiene blir usynlig */
.strom-row:focus-visible { outline-offset: -3px; border-radius: 28px; }

/* Pusteøvelsene: høye kort i tonens bløte gradient */
.strom-card {
  position: relative; width: var(--cw); overflow: hidden; padding-bottom: 24px; border-radius: 28px;
  background: var(--tone-g); border: 1px solid color-mix(in srgb, var(--tone) 22%, transparent); box-shadow: var(--shadow-soft);
  transition: transform .9s var(--ease-out), box-shadow .9s var(--ease-out);
}
.strom-vis { position: relative; display: grid; place-items: center; height: var(--vis); padding-top: 24px; }   /* prikkene ligger under merkelappene */
.strom-dots { width: var(--dots); height: var(--dots); opacity: .84; transition: opacity .9s var(--ease-soft); }
.strom-tag, .strom-price {
  position: absolute; top: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: var(--r-pill);
  font: 700 12.5px/1 var(--display); letter-spacing: .005em; white-space: nowrap;
}
.strom-tag { left: 14px; color: var(--ink); background: color-mix(in srgb, var(--card) 72%, transparent); }
.strom-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tone); }
.strom-price { right: 14px; color: color-mix(in srgb, var(--ink) 80%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.strom-price svg { width: 11px; height: 11px; fill: currentColor; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.strom-price svg path { fill: none; }
.strom-price.is-free { color: var(--ink); border-color: transparent; background: color-mix(in srgb, var(--tone) 30%, var(--card)); }

/* Rytmelinjen: hvert steg er et stykke (inn fylt, litt til lysere, hold svakt, ut prikket som ringen på utpusten); prikken følger pusten */
.strom-rhythm { display: flex; align-items: center; gap: 12px; margin: 2px 22px 0; height: 18px; }
.strom-phase { flex: none; width: 72px; font: 700 12.5px/1 var(--display); letter-spacing: .005em; color: color-mix(in srgb, var(--tone) 34%, var(--ink)); white-space: nowrap; }
.strom-bar { position: relative; flex: 1; display: flex; gap: 3px; height: 6px; }
.strom-bar i { flex: var(--s) 1 0; border-radius: 3px; background: var(--tone); }
.strom-bar .k-top { opacity: .55; }
.strom-bar .k-hold { opacity: .3; }
.strom-bar .k-out { background: radial-gradient(circle, var(--tone) 1.55px, transparent 1.9px) 0 50% / 6px 6px repeat-x; }
.strom-ph { position: absolute; inset: 0; transform: translateX(30%); }
.strom-ph::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--tone); box-shadow: 0 0 0 3px color-mix(in srgb, var(--card) 80%, transparent), 0 0 0 4px color-mix(in srgb, var(--tone) 40%, transparent);
}
.strom-title { margin: 18px 22px 0; font: 800 23px/1.1 var(--display); letter-spacing: -.02em; }
.strom-sub { margin: 8px 22px 0; min-height: 2.7em; font: 500 15px/1.35 var(--body); color: color-mix(in srgb, var(--ink) 80%, transparent); text-wrap: pretty; }

/* Merkelappen mellom radene: stiplede linjer som ringen på utpusten */
.strom-label { display: flex; align-items: center; gap: 20px; width: min(100% - 2 * var(--gutter), 860px); margin: 10px auto 0; font: 700 15px/1.2 var(--display); letter-spacing: .01em; color: color-mix(in srgb, var(--ink) 78%, transparent); text-align: center; }
.strom-label::before, .strom-label::after { content: ""; flex: 1; height: 4px; background: radial-gradient(circle, color-mix(in srgb, var(--ink) 26%, transparent) 1.5px, transparent 1.9px) 0 50% / 9px 4px repeat-x; }
.strom-label span { flex: 0 1 auto; }

/* Meditasjonene: lange, lave piller med et lite solsikkemønster i tonen */
.strom-pill {
  display: flex; align-items: center; gap: 14px; height: 78px; padding: 0 30px 0 14px; border-radius: var(--r-pill);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-soft);
  transition: transform .9s var(--ease-out), box-shadow .9s var(--ease-out), background-color .7s var(--ease-soft), border-color .7s var(--ease-soft);
}
.strom-seed { --dl: 0s; flex: none; width: 50px; height: 50px; padding: 5px; border-radius: 50%; color: var(--tone); background: var(--tone-soft); }
.strom-item:nth-child(3n + 2) .strom-seed { --dl: -3.3s; }
.strom-item:nth-child(3n) .strom-seed { --dl: -6.6s; }
/* Frøene puster bare mens pillen er i bildet (JS setter .is-seen på raden og .is-near på pillene): en løpende animasjon holder et eget
   lag i nettleseren, også når den er pauset, og 26 slike lag koster mer enn de gir. Pausen stopper dem der de står. */
.strom-row.is-seen .strom-item.is-near .strom-seed { animation: strom-breathe 10s var(--ease-io) var(--dl) infinite; }
.strom.is-paused .strom-row.is-seen .strom-item.is-near .strom-seed { animation-play-state: paused; }
@keyframes strom-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.1; } }
.strom-pill b { display: block; font: 800 21px/1.1 var(--display); letter-spacing: -.015em; white-space: nowrap; }
.strom-pill small { display: block; margin-top: 4px; font: 600 14px/1.2 var(--body); color: color-mix(in srgb, var(--ink) 76%, transparent); white-space: nowrap; }

.strom-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px; margin-top: 14px; padding-inline: var(--gutter); }
.strom-note { font: 600 15px/1.4 var(--display); color: color-mix(in srgb, var(--ink) 78%, transparent); text-align: center; text-wrap: balance; }
.strom-pause {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; cursor: pointer; color: var(--ink-soft);
  background: color-mix(in srgb, var(--card) 70%, transparent); border: 1.5px solid color-mix(in srgb, var(--ink) 18%, transparent);
  transition: color .5s var(--ease-soft), background-color .5s var(--ease-soft), transform .6s var(--ease-expo);
}
.strom-pause[hidden] { display: none; }
.strom-pause svg { width: 20px; height: 20px; fill: currentColor; }
.strom-pause .pl, .strom-pause[aria-pressed="true"] .pa { display: none; }
.strom-pause[aria-pressed="true"] .pl { display: block; }
@media (hover: hover) { .strom-pause:hover { color: var(--ink); background: var(--card); transform: scale(1.06); } }

/* Peker: kortet løftes, prikkene får full styrke og pillen fylles med tonen */
@media (hover: hover) {
  .strom-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-soft), 0 34px 60px -26px color-mix(in srgb, var(--tone) 75%, transparent); }
  .strom-card:hover .strom-dots { opacity: 1; }
  .strom-pill:hover { transform: translateY(-6px); background: var(--tone-g); border-color: color-mix(in srgb, var(--tone) 45%, transparent); box-shadow: var(--shadow-soft), 0 22px 36px -22px color-mix(in srgb, var(--tone) 75%, transparent); }
}

@media (max-width: 860px) {
  .strom { --gap: 16px; --cw: 214px; --vis: 178px; --dots: 148px; }
  .strom-card { border-radius: 24px; }
  .strom-title { font-size: 21px; }
  .strom-pill { height: 66px; padding-right: 24px; }
  .strom-seed { width: 42px; height: 42px; padding: 4px; }
  .strom-pill b { font-size: 18px; }
  .strom-label { gap: 10px; font-size: 13px; }
  .strom-label::before, .strom-label::after { min-width: 12px; }
  .strom-row:not(.is-live):not(.strom-row--pills) .strom-item:nth-child(4n + 2) { margin-top: 16px; }
  .strom-row:not(.is-live):not(.strom-row--pills) .strom-item:nth-child(4n + 4) { margin-top: 22px; }
}

/* ==== 40-start.css ==== */
/* =============================================================================
   40-start: «Start dagen med ro.» – tre høye tonekort der telefonen titter opp nederst.
   Dybden er lagdelt: tonegradient → himmellegeme → tekst → telefon → glass-chips.
   Alle mål inni kortene er i cqw (kortets egen bredde), så komposisjonen er lik fra 260 til 520 px.
   ============================================================================= */
.start { --tint-a: 50%; --sun-a: 1; --moon: #A88BD1; }   /* ingen overflow-x: clip: kortene klipper selv, og enkeltakse-clip er upålitelig i Safari */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .start { --tint-a: 30%; --sun-a: .82; --moon: #EFE7FC; } }
:root[data-theme="dark"] .start { --tint-a: 30%; --sun-a: .82; --moon: #EFE7FC; }

.start-head { max-width: 760px; margin: 0 auto clamp(44px, 6.5vw, 84px); text-align: center; display: grid; justify-items: center; gap: 18px; }
.start-head .alt-lede { max-width: 31em; text-align: center; }

.start-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); perspective: 1400px; }
@media (max-width: 960px) { .start-grid { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; } }

/* ---------- Kortet ---------- */
.js .start-card[data-reveal]:not(.is-in) { translate: 0 64px; }   /* løftes 64 px inn (Bevels kort står stille) */
.start-card {
  container-type: inline-size; isolation: isolate; display: flex; flex-direction: column; padding: 0;
  background: var(--tone-g); box-shadow: var(--shadow-soft), inset 0 0 0 1px color-mix(in srgb, var(--tone) 16%, transparent);
  transition: box-shadow 1.2s var(--ease-out);
}
.start-text { position: relative; z-index: 2; padding: clamp(24px, 8.4cqw, 42px) clamp(24px, 8.4cqw, 42px) 0; }
.start-text h3 { font-size: clamp(32px, 11.4cqw, 46px); font-weight: 900; letter-spacing: -.035em; line-height: 1; }
.start-text p { margin-top: clamp(10px, 3cqw, 14px); font-size: clamp(16px, 5.1cqw, 19px); line-height: 1.42; color: color-mix(in srgb, var(--ink) 80%, var(--tone-soft)); text-wrap: pretty; max-width: 21em; }

/* Tonelaget bak: puster (0,75 → 1 over 8 s) og glir med scroll (JS skriver transform på .start-tint) */
.start-tint { position: absolute; z-index: 0; inset: 26% -14% -26% -14%; pointer-events: none; will-change: transform; }
.start-tint i {
  position: absolute; inset: 0; animation: start-breathe-o 10s var(--ease-io) infinite;
  background:
    radial-gradient(52% 40% at 50% 34%, color-mix(in srgb, var(--tone) var(--tint-a), transparent), transparent 74%),
    linear-gradient(to top, color-mix(in srgb, var(--tone) calc(var(--tint-a) * .85), transparent), transparent 62%);
}
@keyframes start-breathe-o { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }

/* ---------- Himmellegemene: står bak telefonen og titter opp over kanten, som en soloppgang ----------
   .start-fx starter rett under teksten og toner ut mot den, så sol, måne og ringer aldri legger seg over ordene. */
.start-fx { position: absolute; z-index: 0; left: 0; right: 0; top: -22cqw; height: 62cqw; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10cqw); mask-image: linear-gradient(to bottom, transparent 0, #000 10cqw); }
.start-orb { position: absolute; z-index: 0; left: 50%; top: 2cqw; width: 44cqw; margin-left: -22cqw; aspect-ratio: 1; pointer-events: none; will-change: transform, opacity; }
/* Pust: prikkede ringer går utover fra telefonen, som ringen på utpusten */
.start-orb--rings { top: 3cqw; width: 42cqw; margin-left: -21cqw; }
.start-orb--rings i { position: absolute; inset: 0; border-radius: 50%; border: 2px dotted color-mix(in srgb, var(--tone) 85%, transparent); opacity: 0; transform: scale(.45); }   /* opacity og scale styres av 40-start.js, i takt med pusten */
/* Meditasjon: soloppgang */
.start-orb--sun {
  border-radius: 50%; animation: start-breathe-s 10s var(--ease-io) infinite;
  background: radial-gradient(circle at 36% 32%, #FFF1D6 0%, #FFD08A 46%, var(--t-multe) 100%);
  box-shadow: 0 0 0 5.5cqw color-mix(in srgb, #F6B06B calc(26% * var(--sun-a)), transparent), 0 0 0 12cqw color-mix(in srgb, #F6B06B calc(14% * var(--sun-a)), transparent), 0 0 0 20cqw color-mix(in srgb, #F6B06B calc(7% * var(--sun-a)), transparent);
}
@keyframes start-breathe-s { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }
/* Søvn: en tynn måne og noen få stjerner som kommer med scroll */
.start-orb--moon { left: auto; right: 12cqw; top: 5cqw; width: 26cqw; margin-left: 0; }
.start-orb--moon b { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset -7.5cqw 2.4cqw 0 0 var(--moon), 0 0 7cqw 0 color-mix(in srgb, var(--moon) 40%, transparent); animation: start-breathe-s 10s var(--ease-io) infinite; }
.start-stars { position: absolute; z-index: 0; inset: 0 0 auto 0; height: 44cqw; pointer-events: none; will-change: opacity; }
.start-stars i { position: absolute; width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: var(--moon); opacity: .9; animation: start-star 9s var(--ease-io) infinite; }
.start-stars i:nth-child(2n) { width: .9cqw; height: .9cqw; animation-delay: -3s; }
.start-stars i:nth-child(3n) { animation-delay: -6s; }
@keyframes start-star { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }

/* ---------- Scenen: telefon + glass ---------- */
.start-stage { position: relative; z-index: 1; flex: 1 0 auto; min-height: 118cqw; margin-top: 21cqw; }   /* høy nok til at glasskortet ligger under prikkene og tittelen */
.start-glow { position: absolute; inset: -6cqw 4cqw auto; height: 70cqw; border-radius: 50%; opacity: .55; pointer-events: none; transition: opacity 1.4s var(--ease-out), scale 1.6s var(--ease-out);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tone) 46%, transparent), transparent); }
.start-phone { position: absolute; z-index: 1; left: 11cqw; top: 0; width: 78cqw; will-change: transform; transition: translate 1.3s var(--ease-out); }
.start-phone .alt-phone { box-shadow: 0 30px 50px -22px rgba(20, 36, 48, .5), 0 8px 18px -10px rgba(20, 36, 48, .35), inset 0 0 0 1.5px #2a343c; }

/* ---------- Glass over telefonen ----------
   Lagdelt som hos Bevel: en liten brikke på telefonens toppkant og et større kort over nederste del, som stikker 8–9cqw ut på siden.
   Kortene bærer appens eget innhold (rytme, stemme, tidslinje) og går i samme takt som telefonen. De flyter i pustens tempo (10 s),
   og .start-par får motsatt parallaks av telefonen (JS skriver transform der, så float-animasjonen på .start-fl ikke kolliderer). */
.start-fl { position: absolute; z-index: 3; animation: start-float 10s var(--ease-io) infinite; transition: translate 1.3s var(--ease-out); }
.start-fl--chip { top: -3.6cqw; animation-delay: -2s; }
.start-fl--glass { bottom: var(--gb, 5cqw); width: 59cqw; animation-delay: -4.2s; animation-duration: 11s; }
.start-fl--l { left: 3.2cqw; }
.start-fl--r { right: 3.2cqw; }
.start-card:not(.is-off) .start-par { will-change: transform; }
@keyframes start-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.start-fl .alt-chip { font-size: clamp(12.5px, 4cqw, 15px); padding: clamp(7px, 2.4cqw, 10px) clamp(11px, 3.6cqw, 15px); gap: 7px;
  background: color-mix(in srgb, var(--card) 84%, transparent); box-shadow: 0 10px 24px -12px rgba(20, 36, 48, .4), inset 0 1px 0 color-mix(in srgb, var(--card) 70%, transparent); }
.start-ic { display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; margin-left: -2px; color: var(--tone); flex: none; }
.start-ic .a-i { width: 100%; height: 100%; }
.start-fl .alt-chip[data-tone]::before { display: none; }

.start-gc {
  display: grid; gap: clamp(6px, 2.2cqw, 9px); padding: clamp(11px, 3.5cqw, 16px) clamp(13px, 4.2cqw, 18px) clamp(12px, 3.8cqw, 16px); border-radius: clamp(18px, 6.2cqw, 26px);
  font: 600 clamp(11px, 3.3cqw, 13px)/1.3 var(--body); color: var(--ink);
  background: color-mix(in srgb, var(--card) 80%, transparent);   /* tett nok til at teksten holder kontrast både over lys bunn og over den mørke telefonen */
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  box-shadow: 0 26px 40px -22px rgba(20, 36, 48, .5), 0 6px 14px -8px rgba(20, 36, 48, .26), inset 0 1px 0 color-mix(in srgb, var(--card) 80%, transparent);
}
.start-gc-h { display: flex; align-items: center; gap: 7px; font: 800 clamp(13px, 4.2cqw, 16px)/1.1 var(--display); letter-spacing: -.012em; }
.start-gc-n { margin-left: auto; font: 700 .84em/1 var(--display); color: color-mix(in srgb, var(--ink) 74%, transparent); font-variant-numeric: tabular-nums; }
[data-live-breath] { font-variant-numeric: tabular-nums; min-width: 5.6em; }
.start-gc-l { display: flex; justify-content: space-between; gap: 8px; font: 700 clamp(10.5px, 3.05cqw, 12px)/1.2 var(--body); color: color-mix(in srgb, var(--ink) 74%, transparent); font-variant-numeric: tabular-nums; }
.start-gc-l span { transition: color 1s var(--ease-soft); }
.start-gc-l .on { color: var(--ink); }

/* Rytmelinjen: ett felt per steg, bredde etter sekunder (flex-grow = --w). Fyllet følger klokka (scaleX), og tones ut like før runden snur */
.start-seg { display: flex; gap: 3px; height: clamp(4px, 1.5cqw, 6px); }
.start-seg span { flex: var(--w) 1 0%; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--tone) 22%, transparent); }
.start-seg i { display: block; height: 100%; border-radius: inherit; background: var(--tone); transform-origin: 0 50%; transform: scaleX(0); }
.start-seg span:first-child i { transform: scaleX(.55); }   /* reserve uten JS */

/* Stemmekortet: teksten følger stemmen. Den gamle linjen toner ut først, så toner den nye inn (aldri to linjer oppå hverandre) */
.start-cap { display: grid; min-height: 2.7em; font: 700 clamp(12px, 3.8cqw, 14.5px)/1.32 var(--display); letter-spacing: -.005em; }
.start-cap > span { grid-area: 1 / 1; transition: opacity .5s var(--ease-soft), translate .5s var(--ease-out); }
.start-cap[data-k="in"] .start-cap-in, .start-cap[data-k="out"] .start-cap-out { transition: opacity 1s var(--ease-soft) .45s, translate 1s var(--ease-out) .45s; }
.start-cap[data-k="in"] .start-cap-out, .start-cap[data-k="out"] .start-cap-in { opacity: 0; translate: 0 5px; }

/* Nedtrappingen: tidslinje med en markør som puster svakt (glorien er en egen flate som skaleres, ikke en skygge som animeres) */
.start-line { --dot: clamp(10px, 3.3cqw, 13px); position: relative; height: clamp(4px, 1.5cqw, 6px); border-radius: 99px; background: color-mix(in srgb, var(--tone) 22%, transparent); }
.start-line i { position: absolute; inset: 0 auto 0 0; width: 35%; border-radius: inherit; background: var(--tone); }
.start-line b { position: absolute; left: 35%; top: 50%; width: var(--dot); height: var(--dot); translate: -50% -50%; border-radius: 50%; background: var(--card); box-shadow: 0 0 0 2px var(--tone); }
.start-line b::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: color-mix(in srgb, var(--tone) 26%, transparent); animation: start-halo 10s var(--ease-io) infinite; z-index: -1; }
@keyframes start-halo { 0%, 100% { transform: scale(.7); opacity: 0; } 50% { transform: scale(1.5); opacity: 1; } }

.start-note { margin: clamp(28px, 4vw, 44px) auto 0; max-width: 40em; text-align: center; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }

/* Lysglimt som følger pekeren (Alt.tilt skriver --px/--py) */
.start-card::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity 1.2s var(--ease-out);
  background: radial-gradient(circle at calc(50% + var(--px, 0) * 42%) calc(34% + var(--py, 0) * 36%), color-mix(in srgb, #fff 15%, transparent), transparent 44%); }

/* Pause alle løkker utenfor viewport */
.start-card.is-off *, .start-card.is-off::after { animation-play-state: paused !important; }

@media (hover: hover) {
  .start-card:hover { box-shadow: var(--shadow), inset 0 0 0 1px color-mix(in srgb, var(--tone) 24%, transparent); }
  .start-card:hover::after { opacity: 1; }
  .start-card:hover .start-phone { translate: 0 -18px; }
  .start-card:hover .start-glow { opacity: 1; scale: 1.12; }
  .start-card:hover .start-fl--l { translate: -6px -6px; }   /* ut mot kanten, men aldri ut av kortet */
  .start-card:hover .start-fl--r { translate: 6px -6px; }
}

/* Redusert bevegelse: komposisjonen står i ro */
@media (prefers-reduced-motion: reduce) {
  .start-card *, .start-card::after { animation: none !important; }
  .start-orb--rings i { opacity: .4; }
  .start-orb--rings i:nth-child(1) { transform: scale(.7); }
  .start-orb--rings i:nth-child(2) { transform: scale(1.05); opacity: .3; }
  .start-orb--rings i:nth-child(3) { transform: scale(1.4); opacity: .2; }
  .start-card:hover .start-phone, .start-card:hover .start-fl { translate: none; }
}
/* … speilet for «Pause bevegelsen» */

  :where(html[data-motion="off"]) :is(.start-card *), :where(html[data-motion="off"]) :is(.start-card)::after { animation: none !important; }
  :where(html[data-motion="off"]) :is(.start-orb--rings i) { opacity: .4; }
  :where(html[data-motion="off"]) :is(.start-orb--rings i:nth-child(1)) { transform: scale(.7); }
  :where(html[data-motion="off"]) :is(.start-orb--rings i:nth-child(2)) { transform: scale(1.05); opacity: .3; }
  :where(html[data-motion="off"]) :is(.start-orb--rings i:nth-child(3)) { transform: scale(1.4); opacity: .2; }
  :where(html[data-motion="off"]) :is(.start-card:hover .start-phone), :where(html[data-motion="off"]) :is(.start-card:hover .start-fl) { translate: none; }


/* ==== 50-utforsk.css ==== */
/* =============================================================================
   50-utforsk: ett bredt kort der telefonen med Utforsk-skjermen omkranses av to orbit-ringer.
   Tolv kategori-chips går rundt i motsatt retning på ringene, og tre prikkede ringer går ut fra telefonen
   på hver utpust. Geometrien (--hx, --hy, --pw, --pt) settes av 50-utforsk.js fra scenens størrelse, og
   chipene plasseres der (transform). Verdiene her er reserve før JS har kjørt.
   ============================================================================= */
/* Tonen som lyser bak telefonen og farger ringene. Registrert, så den kan krysstones når en kategori velges. */
@property --utforsk-aura { syntax: "<color>"; inherits: true; initial-value: #4FA9C4; }

.utforsk { padding-top: clamp(24px, 4vw, 64px); }   /* kortet følger rett etter «start», som har egen luft nederst. Kortet klipper selv (ingen overflow-x: clip her: upålitelig i Safari) */
/* Anker-lenker (Alt.scrollTo leser scroll-margin-top): kortets kant lander 96 px fra toppen, under den faste pillen, ikke bak den */
.utforsk { scroll-margin-top: calc(96px - clamp(24px, 4vw, 64px)); }

.utforsk-card {
  position: relative; isolation: isolate; height: clamp(600px, 58vw, 664px); border-radius: 36px; overflow: clip; color: var(--ink);
  background: linear-gradient(122deg, color-mix(in srgb, var(--s-isbre) 78%, var(--card)) 0%, var(--s-nordlys) 44%, var(--s-lyng) 100%);
  box-shadow: var(--shadow-soft), inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent);
}

/* Nordlys-gløden bak: to store, myke flater som sakte driver (transform, pauses utenfor viewport) */
.utforsk-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.utforsk-bg i { position: absolute; border-radius: 50%; will-change: transform; animation: utforsk-drift 46s var(--ease-io) infinite alternate; }
.utforsk-bg i:nth-child(1) { width: 62%; aspect-ratio: 1; left: -8%; bottom: -46%; background: radial-gradient(closest-side, color-mix(in srgb, var(--t-nordlys) 34%, transparent), transparent); }
.utforsk-bg i:nth-child(2) { width: 58%; aspect-ratio: 1; right: -10%; top: -40%; background: radial-gradient(closest-side, color-mix(in srgb, var(--t-lyng) 38%, transparent), transparent); animation-duration: 58s; animation-direction: alternate-reverse; }
@keyframes utforsk-drift { from { transform: translate3d(-4%, -3%, 0); } to { transform: translate3d(6%, 5%, 0); } }
.utforsk-card.is-off .utforsk-bg i { animation-play-state: paused; }

/* ---------- Teksten til venstre ---------- */
.utforsk-copy { position: relative; z-index: 4; width: min(440px, 43%); height: 100%; padding: clamp(32px, 4.6vw, 64px) 0 clamp(32px, 4.6vw, 64px) clamp(28px, 4.6vw, 64px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 18px; pointer-events: none; }
.utforsk-copy > * { pointer-events: auto; }
.utforsk-copy .alt-h2 { font-size: clamp(38px, 4.6vw, 62px); }
.utforsk-copy .alt-lede { font-size: clamp(16.5px, 1.45vw, 19px); color: color-mix(in srgb, var(--ink) 74%, var(--s-isbre)); }

/* Legenden: viser kategorien du holder over eller har valgt (samme tekst som under chipen) */
.utforsk-panel {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 80px; margin-top: 10px; padding: 14px 18px 14px 14px; border-radius: 24px;
  background: color-mix(in srgb, var(--card) 66%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  box-shadow: 0 14px 30px -20px rgba(29, 52, 65, .4), inset 0 1px 0 color-mix(in srgb, var(--card) 80%, transparent);
}
.utforsk-pi { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--tone); color: #fff; transition: background-color .9s var(--ease-soft); }
.utforsk-pi .a-i { width: 24px; height: 24px; }
.utforsk-pt { display: grid; gap: 3px; min-width: 0; }
.utforsk-pt strong { font: 800 17px/1.15 var(--display); letter-spacing: -.01em; }
.utforsk-pt small { font: 500 14px/1.35 var(--body); color: var(--ink-soft); }

/* ---------- Scenen: aura, ringer, chips og telefon ---------- */
.utforsk-stage { --hx: 66%; --hy: 50%; --pw: 240px; --pt: 70px; --utforsk-aura: var(--t-isbre); position: absolute; inset: 0; z-index: 1; transition: --utforsk-aura 1.1s var(--ease-soft); }
.utforsk-aura, .utforsk-ring, .utforsk-pulse { position: absolute; left: 0; top: 0; border-radius: 50%; pointer-events: none; }
.utforsk-aura { z-index: 0; opacity: 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--utforsk-aura) 46%, transparent), color-mix(in srgb, var(--utforsk-aura) 14%, transparent) 62%, transparent); }

/* Ringene og utpust-ringene toner ut mot tekstkolonnen */
.utforsk-rings { position: absolute; inset: 0; z-index: 0; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 0 42%, #000 58%); mask-image: linear-gradient(90deg, transparent 0 42%, #000 58%); }
.utforsk-ring { border: 1.5px dashed color-mix(in srgb, var(--utforsk-aura) 36%, color-mix(in srgb, var(--ink) 22%, transparent)); box-shadow: inset 0 0 30px color-mix(in srgb, var(--card) 70%, transparent); }
.utforsk-ring--2 { border: 3px dotted color-mix(in srgb, var(--utforsk-aura) 30%, color-mix(in srgb, var(--ink) 16%, transparent)); box-shadow: inset 0 0 44px color-mix(in srgb, var(--card) 55%, transparent); }
/* Små perler på ringen, så rotasjonen kan ses (en jevn stiplet linje ser lik ut hele veien rundt) */
.utforsk-ring b { position: absolute; inset: -1.5px; transform: rotate(var(--a)); pointer-events: none; }
.utforsk-ring b::after { content: ""; position: absolute; left: 50%; top: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tone) 18%, transparent); }
.utforsk-ring--2 b::after { width: 12px; height: 12px; margin: -6px 0 0 -6px; }
.utforsk-pulse { border: 2.5px dotted color-mix(in srgb, var(--t-isbre) 92%, var(--ink)); opacity: 0; }
.utforsk-stage.is-live .utforsk-ring, .utforsk-stage.is-live .utforsk-pulse, .utforsk-stage.is-live .utforsk-aura { will-change: transform, opacity; }

.utforsk-phone { position: absolute; z-index: 3; left: calc(var(--hx) - var(--pw) / 2); top: var(--pt); width: var(--pw); }
.utforsk-phone .alt-phone { box-shadow: 0 40px 70px -28px rgba(20, 36, 48, .55), 0 10px 22px -12px rgba(20, 36, 48, .35), inset 0 0 0 1.5px #2a343c; }
/* Flisen i telefonen som hører til chipen du holder over (forskyves til syne av JS) */
.utforsk-phone .a-ctl { transition: scale .9s var(--ease-out), box-shadow .8s var(--ease-out); }
.utforsk-phone .a-ctl.is-hl { scale: 1.07; box-shadow: 0 0 0 2.5px var(--tc), 0 10px 22px -10px color-mix(in srgb, var(--tc) 70%, transparent); position: relative; z-index: 2; }

/* ---------- Chipene ---------- */
.utforsk-chips { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.utforsk-chips li { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 1; opacity: 0; }
.utforsk-chips li[data-ring="2"] { z-index: 0; }
.utforsk-chips li.is-top { z-index: 6; }
/* Den ytre ringen ligger litt «lenger bak»: mindre chips, så de ikke krasjer med den indre når ringene krysser hverandre */
.utforsk-chips li[data-ring="2"] .utforsk-chip { scale: .9; }
.utforsk-chip {
  position: absolute; left: 0; top: 0; translate: -50% -50%; display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 17px 0 6px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  color: var(--ink); white-space: nowrap; font: 800 15px/1 var(--display); letter-spacing: -.005em;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  box-shadow: 0 12px 24px -14px rgba(29, 52, 65, .5), 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent);
  transition: scale .9s var(--ease-out), box-shadow .7s var(--ease-out), background-color .6s;
  -webkit-tap-highlight-color: transparent; scroll-margin-block: 96px;   /* tastaturfokus ruller aldri chipen inn under navpillen */
  /* Kanten mot telefonen løses opp med en maske fra JS. no-clip lar treffflaten (::after på mobil) leve utenfor boksen, slik masken ikke klipper den */
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-clip: no-clip; mask-clip: no-clip;
}
.utforsk-ci { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--tone); color: #fff; }
.utforsk-ci .a-i { width: 19px; height: 19px; }
.utforsk-chip:focus-visible { outline-offset: 4px; }
.utforsk-chip[aria-pressed="true"] { box-shadow: 0 16px 30px -14px rgba(29, 52, 65, .55), 0 0 0 2px var(--tone), inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent); }
@media (hover: hover) { .utforsk-chips li .utforsk-chip:hover { scale: 1.1; } }
.utforsk-chips li .utforsk-chip:focus-visible, .utforsk-chips li .utforsk-chip[aria-pressed="true"] { scale: 1.1; }

/* Undertittelen fra appen kommer som en liten boble (bare på desktop; på berøring viser legenden den samme teksten) */
.utforsk-tip {
  position: absolute; left: 50%; top: calc(100% + 12px); translate: calc(-50% + var(--tip-x, 0px)) 6px; display: grid; gap: 2px; width: max-content; max-width: 210px; white-space: normal; text-align: center; padding: 9px 15px 10px; border-radius: 16px; pointer-events: none;
  background: var(--ink); color: var(--snow); font: 600 13px/1.25 var(--body); letter-spacing: 0; opacity: 0; transition: opacity .6s var(--ease-soft), translate .9s var(--ease-out);
  box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .5);
}
.utforsk-tip em { font-style: normal; font-weight: 500; opacity: .66; font-size: 12px; }
.utforsk-chips li.is-up .utforsk-tip { top: auto; bottom: calc(100% + 12px); translate: calc(-50% + var(--tip-x, 0px)) -6px; }
.utforsk-chip:focus-visible .utforsk-tip, .utforsk-chip[aria-pressed="true"] .utforsk-tip { opacity: 1; translate: calc(-50% + var(--tip-x, 0px)) 0; }
@media (hover: hover) { .utforsk-chip:hover .utforsk-tip { opacity: 1; translate: calc(-50% + var(--tip-x, 0px)) 0; } }
.utforsk-chips li.is-quiet .utforsk-tip { opacity: 0; }   /* lukket med Escape */

/* ---------- Mobil: teksten først, så scenen. Buene stiger opp bak telefonen, nedre del av telefonen er klippet ---------- */
@media (max-width: 860px) {
  .utforsk-card { height: auto; display: flex; flex-direction: column; border-radius: 28px; }
  .utforsk-copy { width: auto; height: auto; padding: 36px 24px 6px; }
  .utforsk-copy .alt-h2 { font-size: clamp(36px, 10vw, 52px); }
  .utforsk-panel { margin-top: 4px; }
  .utforsk-stage { position: relative; inset: auto; width: 100%; max-width: 600px; margin-inline: auto; aspect-ratio: 1 / 1.22; --hx: 50%; --hy: 40%; --pw: 52%; --pt: 36%; }
  .utforsk-rings { -webkit-mask-image: none; mask-image: none; }
  .utforsk-chip { height: 38px; gap: 7px; padding: 0 13px 0 5px; font-size: 13px; }
  .utforsk-ci { width: 28px; height: 28px; }
  .utforsk-ci .a-i { width: 16px; height: 16px; }
  .utforsk-chip::after { content: ""; position: absolute; inset: -7px -4px; }   /* treffflate på minst 44 px uten at chipen blir tykkere */
  .utforsk-tip { display: none; }
  .utforsk-chips li .utforsk-chip[aria-pressed="true"], .utforsk-chips li .utforsk-chip:focus-visible { scale: 1.08; }
  .utforsk-chips li[data-ring="2"] .utforsk-chip { scale: .92; }
}

/* ---------- Redusert bevegelse: ingen ringer som dreier ----------
   På ringene ville fire av tolv chips stått for alltid bak telefonen eller utenfor kortet. I ro ligger alle tolv i en rolig rad
   under telefonen (alle synlige, alle klikkbare, i appens rekkefølge), og ringene er byttet ut med en myk glød bak telefonen. */
@media (prefers-reduced-motion: reduce) {
  .utforsk-pulse { display: none; }
  .utforsk-phone .a-ctl, .utforsk-chip { transition: none; }
  .utforsk-card { --pw2: min(62vw, 260px); --crop: .4; }
  .utforsk-stage { display: contents; }
  .utforsk-aura, .utforsk-rings, .utforsk-tip { display: none; }
  .utforsk-phone {
    position: relative; left: auto; top: auto; width: var(--pw2); margin: 12px auto calc(var(--pw2) * 2.174 * var(--crop) * -1);
  }
  /* Nederste del av telefonen tones bort rett over raden med chips (som den er klippet av kortkanten i den bevegelige utgaven) */
  .utforsk-phone .alt-phone { -webkit-mask-image: linear-gradient(to bottom, #000 calc((1 - var(--crop) - .16) * 100%), transparent calc((1 - var(--crop)) * 100%));
    mask-image: linear-gradient(to bottom, #000 calc((1 - var(--crop) - .16) * 100%), transparent calc((1 - var(--crop)) * 100%)); }
  .utforsk-phone::before { content: ""; position: absolute; z-index: -1; inset: -10% -45% 34% -45%; border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--t-isbre) 46%, transparent), transparent); }
  .utforsk-chips { position: relative; z-index: 4; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; padding: 8px 18px 4px; }
  /* !important slår inline-stilene fra JS, i tilfelle brukeren skrur på «reduser bevegelse» etter at siden er lastet */
  .utforsk-chips li { position: static; display: block; width: auto; height: auto; z-index: auto; transform: none !important; opacity: 1 !important; pointer-events: auto !important; }
  .utforsk-chip { position: relative; left: auto; top: auto; translate: none; -webkit-mask-image: none !important; mask-image: none !important; }
  .utforsk-chips li[data-ring="2"] .utforsk-chip { scale: 1; }
  .utforsk-chip::after { inset: -4px -3px; }   /* treffflaten (mobil) skal ikke flyte over i raden under */
}
/* … speilet for «Pause bevegelsen» */

  :where(html[data-motion="off"]) :is(.utforsk-pulse) { display: none; }
  :where(html[data-motion="off"]) :is(.utforsk-phone .a-ctl), :where(html[data-motion="off"]) :is(.utforsk-chip) { transition: none; }
  :where(html[data-motion="off"]) :is(.utforsk-card) { --pw2: min(62vw, 260px); --crop: .4; }
  :where(html[data-motion="off"]) :is(.utforsk-stage) { display: contents; }
  :where(html[data-motion="off"]) :is(.utforsk-aura), :where(html[data-motion="off"]) :is(.utforsk-rings), :where(html[data-motion="off"]) :is(.utforsk-tip) { display: none; }
  :where(html[data-motion="off"]) :is(.utforsk-phone) {
    position: relative; left: auto; top: auto; width: var(--pw2); margin: 12px auto calc(var(--pw2) * 2.174 * var(--crop) * -1);
  }
  /* Nederste del av telefonen tones bort rett over raden med chips (som den er klippet av kortkanten i den bevegelige utgaven) */
  :where(html[data-motion="off"]) :is(.utforsk-phone .alt-phone) { -webkit-mask-image: linear-gradient(to bottom, #000 calc((1 - var(--crop) - .16) * 100%), transparent calc((1 - var(--crop)) * 100%));
    mask-image: linear-gradient(to bottom, #000 calc((1 - var(--crop) - .16) * 100%), transparent calc((1 - var(--crop)) * 100%)); }
  :where(html[data-motion="off"]) :is(.utforsk-phone)::before { content: ""; position: absolute; z-index: -1; inset: -10% -45% 34% -45%; border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--t-isbre) 46%, transparent), transparent); }
  :where(html[data-motion="off"]) :is(.utforsk-chips) { position: relative; z-index: 4; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; padding: 8px 18px 4px; }
  /* !important slår inline-stilene fra JS, i tilfelle brukeren skrur på «reduser bevegelse» etter at siden er lastet */
  :where(html[data-motion="off"]) :is(.utforsk-chips li) { position: static; display: block; width: auto; height: auto; z-index: auto; transform: none !important; opacity: 1 !important; pointer-events: auto !important; }
  :where(html[data-motion="off"]) :is(.utforsk-chip) { position: relative; left: auto; top: auto; translate: none; -webkit-mask-image: none !important; mask-image: none !important; }
  :where(html[data-motion="off"]) :is(.utforsk-chips li[data-ring="2"] .utforsk-chip) { scale: 1; }
  :where(html[data-motion="off"]) :is(.utforsk-chip)::after { inset: -4px -3px; }   /* treffflaten (mobil) skal ikke flyte over i raden under */

@media (prefers-reduced-motion: reduce) and (min-width: 861px) {
  .utforsk-card { --pw2: clamp(220px, 22vw, 268px); --crop: .26; height: auto; display: grid; grid-template-columns: minmax(0, min(440px, 43%)) minmax(0, 1fr); align-items: center; }
  .utforsk-copy { width: auto; height: auto; grid-column: 1; grid-row: 1; }
  .utforsk-phone { grid-column: 2; grid-row: 1; margin-top: clamp(32px, 4vw, 56px); }
  /* Rutenett med like brede celler (fire i bredden på bred skjerm, tre på smal): tolv chips går opp uten en enslig rest */
  .utforsk-chips { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 12px 14px; width: 100%; max-width: calc(940px + 2 * clamp(24px, 4.6vw, 64px)); margin-inline: auto; padding: 6px clamp(24px, 4.6vw, 64px) clamp(30px, 4vw, 52px); }
  .utforsk-chips .utforsk-chip { width: 100%; }
}
/* … speilet for «Pause bevegelsen» */
@media (min-width: 861px) {
  :where(html[data-motion="off"]) :is(.utforsk-card) { --pw2: clamp(220px, 22vw, 268px); --crop: .26; height: auto; display: grid; grid-template-columns: minmax(0, min(440px, 43%)) minmax(0, 1fr); align-items: center; }
  :where(html[data-motion="off"]) :is(.utforsk-copy) { width: auto; height: auto; grid-column: 1; grid-row: 1; }
  :where(html[data-motion="off"]) :is(.utforsk-phone) { grid-column: 2; grid-row: 1; margin-top: clamp(32px, 4vw, 56px); }
  /* Rutenett med like brede celler (fire i bredden på bred skjerm, tre på smal): tolv chips går opp uten en enslig rest */
  :where(html[data-motion="off"]) :is(.utforsk-chips) { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 12px 14px; width: 100%; max-width: calc(940px + 2 * clamp(24px, 4.6vw, 64px)); margin-inline: auto; padding: 6px clamp(24px, 4.6vw, 64px) clamp(30px, 4vw, 52px); }
  :where(html[data-motion="off"]) :is(.utforsk-chips .utforsk-chip) { width: 100%; }
}

/* ==== 60-kveld.css ==== */
/* =============================================================================
   60-kveld: overgangen dag → kveld og tonekarusellen med de sju pusteprikk-orbene.
   Grunnstilen er den FERDIGE tilstanden (natt på plass, alt synlig). JS legger på .is-scrub og tar over scenen
   (sol som går ned, natt som sprer seg), så uten JS og ved «reduser bevegelse» ser siden riktig ut.
   ============================================================================= */

.kveld {
  --pin: 0px;                                  /* hvor lenge scenen står fast (settes av .is-scrub) */
  --over: clamp(110px, 22vh, 230px);           /* hvor langt karusellen stiger opp over fjellene */
  --mh: clamp(230px, 46vh, 520px);             /* høyden på fjellradene */
  --orb: clamp(250px, 25vw, 340px);
  padding: 0; overflow-x: clip;

  /* Dag, lys modus: varm himmel som går over i dis og blå fjell */
  --kv-d0: var(--snow);
  --kv-d1: var(--stage);
  --kv-d2: color-mix(in srgb, var(--multe) 34%, var(--stage));
  --kv-d3: color-mix(in srgb, var(--multe) 58%, var(--stage-sun));
  --kv-u0: color-mix(in srgb, var(--t-lyng) 34%, var(--snow));
  --kv-u1: color-mix(in srgb, var(--t-lyng) 26%, var(--stage));
  --kv-u2: color-mix(in srgb, var(--t-rips) 34%, var(--stage));
  --kv-u3: color-mix(in srgb, var(--glow) 62%, var(--stage));
  --kv-cloud: color-mix(in srgb, var(--card) 76%, transparent);
  --kv-dm1: color-mix(in srgb, var(--fjord) 30%, var(--card));
  --kv-dm2: color-mix(in srgb, var(--fjord) 52%, var(--card));
  --kv-dm3: color-mix(in srgb, var(--fjord) 78%, var(--night));
  --kv-dedge: color-mix(in srgb, var(--card) 60%, transparent);
  --kv-dmist: color-mix(in srgb, var(--stage-sun) 78%, transparent);
  --kv-halo: color-mix(in srgb, var(--glow) 50%, transparent);
  --kv-sun-hi: #FFE6BD; --kv-sun-mid: #FFC57A;
}
/* Dag, mørk modus: allerede mørk side, så solnedgangen blir en dyp skumring mot lyng og nordlys */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kveld {
    --kv-d1: color-mix(in srgb, var(--t-lyng) 15%, var(--snow));
    --kv-d2: color-mix(in srgb, var(--glow) 18%, color-mix(in srgb, var(--t-lyng) 14%, var(--snow)));
    --kv-d3: color-mix(in srgb, var(--glow) 42%, var(--snow));
    --kv-u0: color-mix(in srgb, var(--t-nordlys) 14%, var(--snow));
    --kv-u1: color-mix(in srgb, var(--t-lyng) 24%, var(--snow));
    --kv-u2: color-mix(in srgb, var(--t-rips) 28%, var(--snow));
    --kv-u3: color-mix(in srgb, var(--glow) 46%, var(--snow));
    --kv-cloud: color-mix(in srgb, var(--t-lyng) 26%, transparent);
    --kv-dm1: color-mix(in srgb, var(--t-lyng) 26%, var(--snow));
    --kv-dm2: color-mix(in srgb, var(--t-lyng) 15%, var(--snow));
    --kv-dm3: color-mix(in srgb, var(--fjord) 12%, var(--snow));
    --kv-dedge: color-mix(in srgb, var(--t-lyng) 50%, transparent);
    --kv-dmist: color-mix(in srgb, var(--glow) 16%, transparent);
    --kv-halo: color-mix(in srgb, var(--glow) 34%, transparent);
    --kv-sun-hi: #FFD9A6; --kv-sun-mid: #F6A663;
  }
}
:root[data-theme="dark"] .kveld {
  --kv-d1: color-mix(in srgb, var(--t-lyng) 15%, var(--snow));
  --kv-d2: color-mix(in srgb, var(--glow) 18%, color-mix(in srgb, var(--t-lyng) 14%, var(--snow)));
  --kv-d3: color-mix(in srgb, var(--glow) 42%, var(--snow));
  --kv-u0: color-mix(in srgb, var(--t-nordlys) 14%, var(--snow));
  --kv-u1: color-mix(in srgb, var(--t-lyng) 24%, var(--snow));
  --kv-u2: color-mix(in srgb, var(--t-rips) 28%, var(--snow));
  --kv-u3: color-mix(in srgb, var(--glow) 46%, var(--snow));
  --kv-cloud: color-mix(in srgb, var(--t-lyng) 26%, transparent);
  --kv-dm1: color-mix(in srgb, var(--t-lyng) 26%, var(--snow));
  --kv-dm2: color-mix(in srgb, var(--t-lyng) 15%, var(--snow));
  --kv-dm3: color-mix(in srgb, var(--fjord) 12%, var(--snow));
  --kv-dedge: color-mix(in srgb, var(--t-lyng) 50%, transparent);
  --kv-dmist: color-mix(in srgb, var(--glow) 16%, transparent);
  --kv-halo: color-mix(in srgb, var(--glow) 34%, transparent);
  --kv-sun-hi: #FFD9A6; --kv-sun-mid: #F6A663;
}
/* Strekningen der scenen står fast ligger i CSS fra første tegning, ikke først når JS legger på .is-scrub: da hopper ikke dokumenthøyden
   etter oppstart (CLS), og gjenopprettet scroll ved reload midt på siden treffer riktig selv uten scroll anchoring. Uten JS, ved
   «reduser bevegelse» og i lave vinduer (liggende telefon) står scenen ferdig og har ingen strekning. JS legger på .is-flat i de tilfellene. */
.js .kveld { --pin: 112vh; }
@media (max-width: 860px) {
  .kveld { --over: clamp(90px, 15vh, 150px); --orb: min(204px, 54vw); --mh: clamp(190px, 34vh, 340px); --mw: 9; }
  .js .kveld { --pin: 88vh; }
}
@media (max-height: 520px) { .js .kveld { --pin: 0px; } }
@media (prefers-reduced-motion: reduce) { .js .kveld { --pin: 0px; } }
/* … speilet for «Pause bevegelsen» */
 :where(html[data-motion="off"]) :is(.js .kveld) { --pin: 0px; } 
.js .kveld.is-flat { --pin: 0px; }

.kveld-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.kveld-fill { fill: var(--kv-fill); }
.kveld-edge { fill: none; stroke: var(--kv-edge, transparent); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }

/* ---------- Scenen: en lang strekning der den står fast mens sola går ned ---------- */
.kveld-track { position: relative; height: calc(100vh + var(--pin)); height: calc(100lvh + var(--pin)); min-height: calc(560px + var(--pin)); }
.kveld-stage {
  position: sticky; top: 0; height: 100vh; height: 100lvh; min-height: 560px;
  overflow: hidden; isolation: isolate; background: var(--night);
}
.kveld-navzone { position: absolute; left: 0; right: 0; bottom: 0; top: 0; pointer-events: none; }
.kveld-day, .kveld-night { position: absolute; inset: 0; }
.kveld-day { background: var(--kv-d0); }
.kveld-sky, .kveld-dusk, .kveld-nsky { position: absolute; inset: 0; }
.kveld-sky { background: linear-gradient(180deg, var(--kv-d0) 0%, var(--kv-d0) 8%, var(--kv-d1) 44%, var(--kv-d2) 72%, var(--kv-d3) 100%); }
.kveld-dusk { background: linear-gradient(180deg, var(--kv-u0) 0%, var(--kv-u1) 38%, var(--kv-u2) 72%, var(--kv-u3) 100%); opacity: 0; }

/* Fjell: tre rader, samme tegning i dag og natt. Bredden følger høyden (6:1), så toppene aldri strekkes. */
.kveld-m { position: absolute; left: 50%; bottom: 0; translate: -50% 0; width: max(100%, calc(var(--mh) * var(--mw, 6))); max-width: none; height: var(--mh); overflow: visible; }
.kveld-day .kveld-m1 { --kv-fill: var(--kv-dm1); --kv-edge: var(--kv-dedge); }
.kveld-day .kveld-m2 { --kv-fill: var(--kv-dm2); }
.kveld-day .kveld-m3 { --kv-fill: var(--kv-dm3); }
.kveld-night .kveld-m1 { --kv-fill: color-mix(in srgb, var(--fjord) 24%, var(--night)); --kv-edge: color-mix(in srgb, var(--t-isbre) 46%, transparent); }
.kveld-night .kveld-m2 { --kv-fill: color-mix(in srgb, var(--fjord) 12%, var(--night)); --kv-edge: color-mix(in srgb, var(--t-isbre) 22%, transparent); }
.kveld-night .kveld-m3 { --kv-fill: var(--night); }

.kveld-mist { position: absolute; left: -10%; right: -10%; bottom: 0; height: calc(var(--mh) * .62); pointer-events: none; animation: kv-drift 70s ease-in-out infinite alternate; }
.kveld-day .kveld-mist { background: linear-gradient(to top, var(--kv-dmist), transparent); }
.kveld-night .kveld-mist { background: linear-gradient(to top, color-mix(in srgb, var(--fjord) 26%, transparent), transparent); }
@keyframes kv-drift { from { transform: translateX(-3%); } to { transform: translateX(3%); } }

/* Sola: en skive med glød og prikkede ringer. En rød overtone tar over mens den går ned */
.kveld-sun { position: absolute; left: 50%; top: 46%; width: var(--sun); height: var(--sun); margin: calc(var(--sun) / -2) 0 0 calc(var(--sun) / -2); --sun: clamp(120px, 15vw, 210px); opacity: 0; visibility: hidden; }
.kveld-sun i { position: absolute; border-radius: 50%; }
.kveld-halo { inset: -120%; background: radial-gradient(circle closest-side, var(--kv-halo), color-mix(in srgb, var(--kv-halo) 40%, transparent) 42%, transparent); }
/* Skiva er nesten flat (som ikonet): litt lysere i midten og varmere ut mot kanten, uten glansen en kule ville hatt */
.kveld-disc { inset: 0; background: radial-gradient(circle at 50% 50%, var(--kv-sun-hi) 0%, var(--kv-sun-mid) 40%, var(--multe) 82%, color-mix(in srgb, var(--glow) 55%, var(--multe)) 100%); }
.kveld-sun-rings { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
.kveld-sun-rings circle { fill: none; stroke: color-mix(in srgb, var(--multe) 88%, var(--glow)); stroke-width: 1.9; stroke-linecap: round; stroke-dasharray: .1 5.4; }
.kveld-ember { inset: 0; background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--t-rips) 85%, transparent), color-mix(in srgb, var(--glow) 70%, transparent) 70%); opacity: 0; mix-blend-mode: multiply; }

.kveld-cloud { position: absolute; width: 52vw; height: 9vh; border-radius: 50%; opacity: 0; background: radial-gradient(closest-side, var(--kv-cloud), transparent); animation: kv-cloud 90s linear infinite alternate; }
.kveld-cloud-1 { left: 4%; top: 30%; }
.kveld-cloud-2 { right: -8%; top: 52%; width: 44vw; height: 7vh; animation-duration: 120s; animation-direction: alternate-reverse; }
@keyframes kv-cloud { from { transform: translateX(-5vw); } to { transform: translateX(6vw); } }
.is-scrub .kveld-cloud { opacity: 1; }

/* Natten: ligger oppå dagen og avdekkes av en voksende, myk sirkel (mask-image settes av JS) */
.kveld-night { background: var(--night); }
.kveld-nsky { background:
  radial-gradient(ellipse 56% 26% at 50% 100%, color-mix(in srgb, var(--glow) 44%, transparent), transparent 72%),
  radial-gradient(ellipse 96% 52% at 50% 100%, color-mix(in srgb, var(--t-lyng) 30%, transparent), transparent 74%),
  linear-gradient(180deg, color-mix(in srgb, var(--fjord) 10%, var(--night)) 0%, color-mix(in srgb, var(--fjord) 22%, var(--night)) 46%, color-mix(in srgb, var(--fjord) 40%, var(--night)) 100%); }
.kveld-aurora {
  position: absolute; left: -12%; right: -12%; top: 4%; height: 52%; opacity: .5; pointer-events: none;
  background:
    radial-gradient(ellipse 34% 46% at 28% 52%, color-mix(in srgb, var(--t-nordlys) 36%, transparent), transparent 72%),
    radial-gradient(ellipse 30% 40% at 66% 40%, color-mix(in srgb, var(--t-lyng) 32%, transparent), transparent 72%),
    radial-gradient(ellipse 22% 36% at 88% 58%, color-mix(in srgb, var(--t-isbre) 26%, transparent), transparent 72%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40%, #000 60%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 40%, #000 60%, transparent);
  animation: kv-aurora 42s ease-in-out infinite alternate;
}
@keyframes kv-aurora { from { transform: translateX(-3%); opacity: .34; } to { transform: translateX(3%); opacity: .62; } }

.kveld-stars { position: absolute; inset: 0; }
.kveld-stars i {
  position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%;
  background: var(--c); opacity: var(--a0);
}
/* Bare hver tredje stjerne funkler (.tw). 81 animerte stjerner ga like mange kompositt-lag og dyr stilberegning; himmelen ser like levende ut. */
.kveld-stars i.tw { animation: kv-tw var(--d) ease-in-out var(--l) infinite; }
.kveld-stars i.s1 { --c: var(--night-ink); }
.kveld-stars i.s2 { --c: color-mix(in srgb, var(--t-multe) 55%, white); }
.kveld-stars i.s3 { --c: color-mix(in srgb, var(--t-lyng) 50%, white); }
.kveld-stars i.s4 { --c: color-mix(in srgb, var(--t-isbre) 55%, white); }
.kveld-stars i.b { box-shadow: 0 0 calc(var(--s) * 2.6) color-mix(in srgb, var(--c) 70%, transparent); }
@keyframes kv-tw { 50% { opacity: var(--a1); } }

/* Månen: en rolig skive, og prikkede ringer som går ut i pustens tempo (som utpusten i prikkene) */
.kveld-moon { position: absolute; right: 9%; top: 10%; width: clamp(50px, 5.2vw, 78px); aspect-ratio: 1; }
.kveld-moon-disc, .kveld-moon-halo { position: absolute; inset: 0; border-radius: 50%; }
.kveld-moon-disc {
  background:
    radial-gradient(circle at 34% 40%, rgba(120, 140, 160, .22) 0 9%, transparent 10%),
    radial-gradient(circle at 62% 62%, rgba(120, 140, 160, .18) 0 12%, transparent 13%),
    radial-gradient(circle at 58% 28%, rgba(120, 140, 160, .14) 0 6%, transparent 7%),
    radial-gradient(circle at 36% 32%, #FBFDFE, #DDE8EF 58%, #B9C9D5);
  box-shadow: 0 0 36px 4px color-mix(in srgb, var(--t-isbre) 30%, transparent);
}
.kveld-moon-halo { inset: -140%; background: radial-gradient(circle closest-side, color-mix(in srgb, var(--t-isbre) 26%, transparent), transparent); animation: kv-halo 10s ease-in-out var(--kv-sync, 0s) infinite; }
@keyframes kv-halo { 0%, 100% { transform: scale(.9); opacity: .65; } 50% { transform: scale(1.08); opacity: 1; } }
/* Ringene er prikker (stroke-dasharray med runde ender) som vokser ved at radien animeres, ikke ved å skalere: da blir de flere, ikke
   større, og de ser like ut i alle nettlesere. Animasjonen er SMIL (ikke berørt av animation-play-state), så JS pauser den utenfor bildet
   og mens sola eller månen er skjult. */
.kveld-moon-rings { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
.kveld-moon-rings circle { fill: none; stroke: color-mix(in srgb, var(--t-isbre) 62%, white); stroke-width: 2.8; stroke-linecap: round; stroke-dasharray: .1 9; }

/* Skumringsbeltet legges som gradient på hele flaten (JS flytter radiene), så det aldri får en synlig kant */
.kveld-belt { position: absolute; inset: 0; pointer-events: none; visibility: hidden; opacity: 0; }

/* Kanten mellom dag og natt: prikkede ringer som går utover med sirkelen. Selve prikkene er tykke streker med runde ender
   (stroke-dasharray), så de forblir skarpe uansett størrelse. */
.kveld-arc { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; visibility: hidden; opacity: 0; overflow: visible; }
.kveld-arc circle { fill: none; stroke: url(#kveld-arc-g); stroke-linecap: round; }

/* ---------- Overskriften i scenen: kommer først når natten er på plass ---------- */
.kveld-head.alt-dark { background: none; position: absolute; z-index: 3; left: 0; right: 0; top: max(96px, 16vh); display: flex; flex-direction: column; align-items: center; gap: 20px; padding-inline: var(--gutter); text-align: center; }
.kveld-h { max-width: 13em; }
.kveld-lede { max-width: 31em; margin-inline: auto; }
.kveld-eyebrow, .kveld-lede { transition: opacity 1.2s var(--ease-out) var(--td, 0s), translate 1.2s var(--ease-out) var(--td, 0s), filter 1.2s var(--ease-out) var(--td, 0s); }
.kveld-lede { --td: .55s; }
.kveld-eyebrow { --td: .05s; }
.kveld-head .w > span { transition: opacity 1.3s var(--ease-out) calc(var(--wi, 0) * 70ms + .2s), translate 1.3s var(--ease-out) calc(var(--wi, 0) * 70ms + .2s), filter 1.3s var(--ease-out) calc(var(--wi, 0) * 70ms + .2s); }
.js .kveld.is-scrub .kveld-head:not(.is-on) .kveld-eyebrow,
.js .kveld.is-scrub .kveld-head:not(.is-on) .kveld-lede { opacity: 0; translate: 0 22px; filter: blur(8px); --td: 0s; transition-duration: .5s; }
.js .kveld.is-scrub .kveld-head:not(.is-on) .w > span { opacity: 0; translate: 0 110%; filter: blur(8px); transition-duration: .5s; transition-delay: 0s; }

/* ---------- Karusellen ---------- */
.kveld-body { position: relative; z-index: 2; margin-top: calc(var(--over) * -1); background: none; padding-bottom: clamp(88px, 11vw, 150px); }
.kveld-body::before { content: ""; position: absolute; z-index: -2; inset: var(--over) 0 0 0; background: var(--night); }
/* Gløden begynner over karusellen (inne i fjellene) og tones inn nedenfra, så den ikke har noen synlig overkant */
.kveld-glow {
  position: absolute; z-index: -1; inset: calc(var(--over) * -1.3) 0 0 0; pointer-events: none; overflow: clip;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 42%); mask-image: linear-gradient(to bottom, transparent 0, #000 42%);
}
.kveld-glow i {
  position: absolute; left: 50%; top: 0; width: min(1500px, 150%); height: 100%; translate: -50% 0; opacity: 0; transition: opacity 1.4s var(--ease-soft);
  background:
    radial-gradient(ellipse 30% 40% at 50% calc(var(--over) * 1.3 + var(--orb) * .5 + 24px), color-mix(in srgb, var(--tone) 34%, transparent), transparent 74%),
    radial-gradient(ellipse 52% 26% at 50% calc(var(--over) * 1.3 + var(--orb) * .95), color-mix(in srgb, var(--tone) 22%, transparent), transparent 76%),
    radial-gradient(ellipse 10% 90% at 50% 0, color-mix(in srgb, var(--tone) 18%, transparent), transparent 82%);
}
.kveld-glow i.is-on { opacity: 1; }
.kveld-box { position: relative; }

.kveld-rail {
  position: relative; height: calc(var(--orb) + 48px); outline: none; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent 100%);
}
.kveld-rail.is-drag { cursor: grabbing; }
.kveld-orb {
  position: absolute; left: 50%; top: 50%; width: var(--orb); height: var(--orb); margin: calc(var(--orb) / -2) 0 0 calc(var(--orb) / -2);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
/* Reserve før canvaset har tegnet (og uten JS): en prikket skive i tonen */
.kveld-orb::before {
  content: ""; position: absolute; inset: 18%; border-radius: 50%;
  background: radial-gradient(circle, var(--tone) 0 2.2px, transparent 2.8px) 0 0 / 12px 12px;
  -webkit-mask-image: radial-gradient(circle closest-side, #000 60%, transparent 100%); mask-image: radial-gradient(circle closest-side, #000 60%, transparent 100%);
}
.kveld-orb.is-drawn::before { content: none; }
.kveld-orb canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; }
.kveld-focus { position: absolute; left: 50%; top: 50%; width: calc(var(--orb) * .9); height: calc(var(--orb) * .9); translate: -50% -50%; border-radius: 50%; border: 2px dotted var(--multe); opacity: 0; pointer-events: none; transition: opacity .4s; }
.kveld-rail:focus-visible .kveld-focus { opacity: 1; }
/* Uten JS: bare én orb (ikke sju oppå hverandre), og ingen kontroller som ikke virker */
html:not(.js) .kveld-orb:not([data-tone="isbre"]), html:not(.js) .kveld-ctl, html:not(.js) .kveld-rhythm { display: none; }

.kveld-detail { display: grid; justify-items: center; gap: 14px; max-width: 780px; margin: 4px auto 0; padding-inline: var(--gutter); text-align: center; }
.kveld-detail > * { transition: opacity 1s var(--ease-out) calc(var(--i, 0) * 70ms), translate 1s var(--ease-out) calc(var(--i, 0) * 70ms), filter 1s var(--ease-out) calc(var(--i, 0) * 70ms); }
.kveld-detail.is-out > * { opacity: 0; translate: 0 -10px; filter: blur(6px); transition-duration: .38s; transition-delay: 0s; }
.kveld-hue { display: inline-flex; align-items: center; gap: 10px; font: 800 13px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--tone) 64%, white); }
.kveld-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--tone); }
.kveld-name { font-size: clamp(52px, 7.4vw, 100px); font-weight: 900; letter-spacing: -.04em; line-height: .96; color: var(--ink); padding-bottom: .04em; }
.kveld-uses { max-width: 34em; color: var(--ink-soft); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.45; text-wrap: balance; }
.kveld-uses b { color: var(--ink); font-weight: 700; }
.kveld-rhythm { display: grid; justify-items: center; gap: 12px; margin-top: 8px; }
.kveld-rlabel { color: var(--ink-soft); font-size: 15.5px; }
.kveld-rlabel b { color: var(--ink); font-weight: 700; }
.kveld-ph { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kveld-ph li {
  padding: 9px 16px; border-radius: var(--r-pill); font: 800 15.5px/1 var(--display); letter-spacing: -.005em; white-space: nowrap;
  color: var(--ink-soft); background: color-mix(in srgb, var(--ink) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent);
  transition: background-color .9s var(--ease-soft), color .9s var(--ease-soft), box-shadow .9s var(--ease-soft);
}
.kveld-ph li b { font-weight: 700; opacity: .8; }
.kveld-ph li.is-on { color: #0B1620; background: color-mix(in srgb, var(--tone) 68%, white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 80%, white); }
.kveld-sw { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; }
.kveld-sw-t { margin-right: 6px; color: var(--ink-soft); font-size: 14.5px; }
.kveld-sw-c { display: inline-flex; align-items: center; gap: 9px; min-width: 92px; padding: 10px 16px 10px 12px; border-radius: 14px; background: var(--bg); color: var(--fg); font: 800 14px/1 var(--display); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.kveld-sw-c i { width: 11px; height: 11px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 0 2px color-mix(in srgb, var(--fg) 12%, transparent); }

.kveld-ctl { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 34px; }
.kveld-dots { display: flex; align-items: center; gap: 14px; }
.kveld-dots i { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--tone); opacity: .38; cursor: pointer; transition: opacity .8s var(--ease-soft), scale .8s var(--ease-out); }
.kveld-dots i::before { content: ""; position: absolute; inset: -17px -7px; }   /* trykkflate 24 × 44 px; naboene overlapper ikke (senter til senter 24 px) */
.kveld-dots i::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--tone); opacity: 0; scale: .6; transition: opacity .8s var(--ease-soft), scale .9s var(--ease-out); }
.kveld-dots i.is-on { opacity: 1; scale: 1.15; }
.kveld-dots i.is-on::after { opacity: .9; scale: 1; }
@media (hover: hover) { .kveld-dots i:hover { opacity: .8; } }
.kveld-pause { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kveld-ring { position: absolute; inset: 0; width: 44px; height: 44px; rotate: -90deg; overflow: visible; }
.kveld-ring circle { fill: none; stroke-width: 2; }
.kveld-ring-bg { stroke: color-mix(in srgb, var(--ink) 18%, transparent); }
.kveld-ring-fg { stroke: var(--multe); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.kveld-ic { position: relative; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kveld-ic-play { display: none; fill: currentColor; }
.kveld-pause[aria-pressed="false"] .kveld-ic-pause { display: none; }
.kveld-pause[aria-pressed="false"] .kveld-ic-play { display: block; }
@media (hover: hover) { .kveld-pause:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); } }

/* ---------- Stille og sparing ---------- */
.kveld.is-live .kveld-m, .kveld.is-live .kveld-sun, .kveld.is-live .kveld-moon, .kveld.is-live .kveld-orb { will-change: transform; }
.kveld.is-off *, .kveld.is-off *::before, .kveld.is-off *::after { animation-play-state: paused !important; }
.kveld.is-stage-off .kveld-stage *, .kveld.is-stage-off .kveld-stage *::before, .kveld.is-stage-off .kveld-stage *::after { animation-play-state: paused !important; }
@media (max-width: 860px) {
  .kveld-head.alt-dark { top: max(92px, 14vh); gap: 16px; }
  .kveld-rail { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
  .kveld-moon { right: 9%; top: 9%; }
  .kveld-name { font-size: clamp(48px, 15vw, 72px); }
  .kveld-ctl { margin-top: 26px; }
}
@media (max-height: 760px) and (min-width: 861px) {
  .kveld-head.alt-dark { top: max(84px, 13vh); gap: 14px; }
  .kveld-head .alt-h2 { font-size: clamp(36px, 5vw, 60px); }
}
@media (max-height: 520px) {
  .kveld-track, .kveld-stage { min-height: 0; }   /* liggende telefon: scenen er like høy som vinduet, ikke 560 px */
  .kveld-head.alt-dark { top: 92px; gap: 12px; }   /* med luft under navpillen */
}
/* Scenen står ferdig (reduser bevegelse og lave vinduer): natten tones inn fra dagen over de øverste 120 px, så overgangen fra den
   kremfargede seksjonen over er en myk skumring og ikke en hårlinje. I full bevegelse gjør den voksende sirkelen den jobben. */
.kveld.is-flat .kveld-night { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 120px); mask-image: linear-gradient(to bottom, transparent 0, #000 120px); }
@media (prefers-reduced-motion: reduce) {
  .kveld-sun, .kveld-dusk, .kveld-cloud, .kveld-moon-rings { display: none; }
  .kveld-pause { display: none; }   /* ingenting bytter av seg selv, så ingenting å pause. Media-regel (ikke klasse) så høyden er lik fra første tegning */
}
/* … speilet for «Pause bevegelsen» */

  :where(html[data-motion="off"]) :is(.kveld-sun), :where(html[data-motion="off"]) :is(.kveld-dusk), :where(html[data-motion="off"]) :is(.kveld-cloud), :where(html[data-motion="off"]) :is(.kveld-moon-rings) { display: none; }
  :where(html[data-motion="off"]) :is(.kveld-pause) { display: none; }   /* ingenting bytter av seg selv, så ingenting å pause. Media-regel (ikke klasse) så høyden er lik fra første tegning */


/* ==== 70-dypere.css ==== */
/* =============================================================================
   70-dypere – fire store «vindukort» på natt (Bevels fixed-telefon i clip-path-kort, men rolig)
   Telefonen (.dypere-fixed) er position: fixed og står stille midt på skjermen. Hvert kort klipper den med clip-path, så kortet
   blir et vindu som sveiper over en stillestående telefon. Ingen forelder av .dypere-fixed kan ha transform, filter, will-change,
   contain, perspective eller backdrop-filter (da slutter fixed å virke): reveal og tilt ligger derfor bare på tekst og overlegg inni.
   Fixed brukes bare der musa styrer siden. Mobil, berøringsflater og redusert bevegelse får en statisk variant (se bunnen):
   telefonen er vanlig innhold i kortet, uten fixed og uten parallaks.
   ============================================================================= */

/* Fargen kortet lyser i. Registrert, så den glir over når rytmen byttes (Dobbelt innpust → Fire hjørner). */
@property --dypere-tone { syntax: '<color>'; inherits: true; initial-value: #4FA9C4; }

.dypere.alt-sec {
  --slot: clamp(400px, 46vw, 580px);                                       /* kolonnen telefonen står i */
  --phone-w: clamp(230px, calc((100svh - 150px) / 2.1741), 372px);          /* telefonen følger vindushøyden (aspekt 1206/2622) */
  --phone-h: calc(var(--phone-w) * 2.1741);
  --m: calc((var(--slot) - var(--phone-w)) / 2);                           /* ledig plass på hver side av telefonen: overleggene blir innenfor kolonnen */
  --card-h: max(560px, calc(var(--phone-h) - 40px));                       /* litt lavere enn telefonen: kortkanten klipper den */
  --gap: 32px;
  --exit-h: clamp(240px, 24vw, 360px);
  padding-block: 0;
  isolation: isolate;
}
.dypere-night {
  position: relative; overflow-x: clip;
  padding-block: clamp(88px, 11vw, 160px) calc(var(--exit-h) * .46);
}

/* ---------- Innledning ---------- */
/* Himmellyset puster i 10 s. Ren CSS-animasjon på opacity (compositor): JS skrev før --breath på et maskert, skjermstort lag hver ramme. */
.dypere-sky {
  position: absolute; z-index: 0; left: 0; right: 0; top: 0; height: min(900px, 90vw); pointer-events: none;
  background:
    radial-gradient(52% 58% at 50% 22%, color-mix(in srgb, var(--multe) 15%, transparent), transparent 74%),
    radial-gradient(70% 45% at 50% 18%, color-mix(in srgb, var(--fjord) 22%, transparent), transparent 80%);
  opacity: .81;   /* hvilenivå (redusert bevegelse): midt i pusten */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 38%); mask-image: linear-gradient(to bottom, transparent, #000 38%);   /* ingen kant mot seksjonen over */
  animation: dypere-sky 10s cubic-bezier(.37, 0, .63, 1) infinite;
}
@keyframes dypere-sky { 0%, 100% { opacity: .62; } 50% { opacity: 1; } }
.dypere-night > .alt-wrap { position: relative; z-index: 1; }
.dypere-head { display: grid; justify-items: center; gap: 22px; text-align: center; }
.dypere-head .alt-h2 { max-width: 12.5em; }
.dypere-head .alt-lede { max-width: 31em; color: var(--night-soft); }
/* En tynn linje med en prikk som sakte glir ned: «bla videre» */
.dypere-cue { position: relative; width: 1px; height: 76px; margin-top: 14px; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--night-ink) 34%, transparent)); }
.dypere-cue::after {
  content: ""; position: absolute; left: -2.5px; top: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--multe);
  animation: dypere-cue 6s var(--ease-io) infinite;
}
@keyframes dypere-cue { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(72px); opacity: 0; } }
.dypere.is-idle .dypere-cue::after, .dypere.is-idle .dypere-sky, .dypere.is-idle .dypere-float, .dypere.is-idle .dypere-glow, .dypere-card.is-off .dypere-float, .dypere-card.is-off .dypere-glow { animation-play-state: paused; }

/* ---------- Kortene ---------- */
.dypere-cards { display: grid; gap: var(--gap); margin-top: clamp(56px, 7vw, 100px); }
.dypere-item {
  position: relative; isolation: isolate;
  --dypere-tone: var(--tone); transition: --dypere-tone 1.8s var(--ease-io);
}
/* Kantlyset bak kortet: tonen siver ut i natten rundt det kortet du står på (opacity styres av scrollen) */
.dypere-aura {
  position: absolute; z-index: 0; inset: -9% -7%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--dypere-tone) 30%, transparent), transparent);
}
.dypere-card {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) var(--slot); align-items: center;
  min-height: var(--card-h); border-radius: var(--r-card); color: var(--ink);
  background:
    radial-gradient(110% 80% at 100% 100%, color-mix(in srgb, var(--dypere-tone) 18%, transparent), transparent 62%),
    linear-gradient(168deg, color-mix(in srgb, var(--dypere-tone) 17%, var(--card)) 0%, color-mix(in srgb, var(--dypere-tone) 7%, var(--night)) 58%, color-mix(in srgb, var(--dypere-tone) 15%, var(--night)) 100%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--night-ink) 11%, transparent);
  -webkit-clip-path: inset(0 round var(--r-card)); clip-path: inset(0 round var(--r-card));   /* vinduet */
}
/* Solen: gløden stiger fra bunnen av kortet, under telefonen (flyttes av scrollen) */
.dypere-glow {
  position: absolute; z-index: 0; right: -16%; bottom: -66%; width: 100%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--dypere-tone) 64%, transparent), color-mix(in srgb, var(--dypere-tone) 22%, transparent) 54%, transparent);
  animation: dypere-sun 10s var(--ease-io) infinite;
}
@keyframes dypere-sun { 0%, 100% { scale: 1; } 50% { scale: 1.07; } }

/* Teksten */
.dypere-text { position: relative; z-index: 3; padding: clamp(44px, 5.4vw, 80px) 24px clamp(44px, 5.4vw, 80px) clamp(32px, 4.8vw, 68px); max-width: 30em; }
.dypere-eyebrow { display: flex; align-items: center; gap: 12px; font: 800 13px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--dypere-tone) 58%, white); }
.dypere-eyebrow span { display: inline-flex; align-items: center; gap: 12px; color: var(--night-soft); }
.dypere-eyebrow span::after { content: ""; width: 28px; height: 1.5px; background: currentColor; opacity: .7; }
.dypere-h { margin-top: 20px; font-size: clamp(36px, 4.1vw, 58px); letter-spacing: -.03em; line-height: 1.02; }
.dypere-p { margin-top: 22px; max-width: 25em; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }
.dypere-p2 { margin-top: 12px; }

/* Velgere (segmentert kontroll): tommel som glir, ingen layout-animasjon */
.dypere-pick { display: grid; gap: 12px; margin-top: 30px; max-width: 24em; }
.dypere-pick-l { font: 800 12.5px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--night-soft); }
.dypere-seg {
  --i: 0; position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--night-ink) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--night-ink) 13%, transparent);
}
.dypere-thumb {
  position: absolute; z-index: 0; left: 4px; top: 4px; bottom: 4px; width: calc((100% - 8px) / var(--n)); border-radius: var(--r-pill);
  background: linear-gradient(180deg, color-mix(in srgb, var(--dypere-tone) 38%, transparent), color-mix(in srgb, var(--dypere-tone) 22%, transparent));   /* tonen lyser ikke sterkere enn at lys tekst på tommelen holder 4,5:1 */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dypere-tone) 70%, transparent), 0 8px 20px -10px var(--dypere-tone);
  translate: calc(var(--i) * 100%) 0; transition: translate .9s var(--ease-out);
}
.dypere-seg button {
  position: relative; z-index: 1; min-width: 0; height: 44px; padding: 0 8px; border: 0; border-radius: var(--r-pill); background: none; cursor: pointer;
  color: var(--night-soft); font: 800 14.5px/1.1 var(--display); letter-spacing: -.005em; transition: color .5s var(--ease-soft);
  -webkit-tap-highlight-color: transparent;
}
.dypere-seg button[aria-pressed="true"] { color: var(--night-ink); }
@media (hover: hover) { .dypere-seg button:hover { color: var(--night-ink); } }
.dypere-seg button:focus-visible { outline-offset: 1px; }
.dypere-note { min-height: 3em; font-size: 15px; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; }

/* Rytmechips (Inn 2,5 s · Litt til 1 s · Ut 6,5 s) */
.dypere-rhythm { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.dypere-rhythm li {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--r-pill); font: 700 14px/1 var(--display); white-space: nowrap;
  background: color-mix(in srgb, var(--night-ink) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--night-ink) 12%, transparent);
}
.dypere-rhythm li i { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--dypere-tone) 80%, white); }
.dypere-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 26px; }
.dypere-tags .alt-chip { background: color-mix(in srgb, var(--night-ink) 8%, transparent); color: var(--night-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--night-ink) 12%, transparent); border: 0; }
.dypere-fine { font-size: 13.5px; color: var(--night-soft); }

/* ---------- Telefonen: fixed i kolonnen, klippet av kortet ---------- */
.dypere-slot { position: relative; z-index: 2; width: var(--slot); align-self: stretch; }
/* Usynlig mål for rektangelet telefonen står i (midt i vinduet), så JS kan se når et kort dekker det */
.dypere-probe { position: fixed; left: 0; top: 50%; width: 1px; height: var(--phone-h); translate: 0 -50%; visibility: hidden; pointer-events: none; }
.dypere-fixed {
  position: fixed; top: 0; bottom: 0; left: auto; right: auto; width: var(--slot);   /* left: auto = der kolonnen står */
  display: grid; place-items: center; pointer-events: none;
}
.dypere-card.is-off .dypere-fixed { display: none; }   /* ingen tegning når telefonen ikke er synlig i kortet (IntersectionObserver ser ikke clip-path på fixed) */
.dypere-stage {
  position: relative; width: var(--phone-w); height: var(--phone-h); font-size: max(12.5px, calc(var(--phone-w) * .043));
}
.dypere-stage .alt-phone {
  position: absolute; inset: 0; width: auto;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--night-ink) 22%, transparent), 0 40px 80px -24px rgba(0, 0, 0, .7), inset 0 0 0 1.5px #2a343c;
}

/* Sekundærtekst i glasset: night-ink dempet til 88 % (night-soft ga 3–4:1 over tone-gløden) */
.dypere { --dypere-soft: color-mix(in srgb, var(--night-ink) 88%, transparent); }

/* Overlegg (glass som flyter over og ved siden av telefonen). Tre lag: .pos (plassering + parallaks + inngang), .float (hvile), innholdet.
   De holdes innenfor kolonnen (data-side l/r = kolonnekanten), så de aldri havner oppå teksten. */
.dypere-pos { position: absolute; }
.dypere-pos[data-side="l"] { left: calc(var(--m) * -1 + 2px); }
.dypere-pos[data-side="r"] { right: calc(var(--m) * -1 + 14px); }
.dypere-float { animation: dypere-float 10s var(--ease-io) infinite; animation-delay: var(--fd, 0s); }
@keyframes dypere-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.55em); } }
.dypere-pane {
  position: relative; display: block; color: var(--night-ink); border-radius: 1.45em;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--night-ink) 13%, transparent), color-mix(in srgb, var(--night-ink) 4%, transparent)),
    color-mix(in srgb, var(--night) 66%, transparent);   /* mørk bunn: liten tekst i glasset holder AA også over tone-gløden */
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: 0 28px 56px -22px rgba(0, 0, 0, .7), inset 0 0 0 1px color-mix(in srgb, var(--night-ink) 16%, transparent), inset 0 1px 0 color-mix(in srgb, var(--night-ink) 24%, transparent);
}
.dypere-chip { display: flex; align-items: center; gap: .6em; width: max-content; max-width: 14em; padding: .8em 1.05em .8em .9em; border-radius: 1.2em; font: 700 1em/1.25 var(--display); }
.dypere-chip > i { flex: none; display: inline-flex; }
.dypere-chip .a-i { flex: none; width: 1.3em; height: 1.3em; color: color-mix(in srgb, var(--dypere-tone) 60%, white); }
.dypere-cap { display: flex; align-items: center; gap: .55em; margin: 0; font: 800 max(11px, .8em)/1 var(--display); letter-spacing: .09em; text-transform: uppercase; color: var(--dypere-soft); }
.dypere-cap b { font-weight: 800; color: var(--night-ink); }
.dypere-cap i { display: inline-flex; width: .6em; height: .6em; border-radius: 50%; background: color-mix(in srgb, var(--dypere-tone) 80%, white); flex: none; }
.dypere-cap i[data-ic] { width: auto; height: auto; background: none; color: color-mix(in srgb, var(--dypere-tone) 60%, white); }
.dypere-cap em { margin-left: auto; padding: .35em .7em; border-radius: 99px; font-style: normal; letter-spacing: .04em; color: var(--night-ink); background: color-mix(in srgb, var(--night-ink) 14%, transparent); }

/* Inngang: overleggene toner inn og vokser litt, i stagger, når kortet kommer inn (bare opacity og scale, så parallaks og hvile ikke kolliderer) */
.dypere.is-armed .dypere-card:not(.is-in) .dypere-pos { opacity: 0; scale: .9; }
.dypere-pos { transition: opacity 1.4s var(--ease-out), scale 1.6s var(--ease-out); transition-delay: calc(var(--i, 0) * 170ms + 250ms); }
html.js:not(.alt-ready) .dypere-pos { animation: alt-failsafe .01s 3.5s forwards; }

/* Utpust-ringer bak telefonen (JS skriver opacity og scale) */
.dypere-rings { position: absolute; left: 50%; top: var(--cy, 40%); width: 0; height: 0; pointer-events: none; }
.dypere-ring { position: absolute; left: 0; top: 0; width: var(--phone-w); aspect-ratio: 1; margin: calc(var(--phone-w) * -.5) 0 0 calc(var(--phone-w) * -.5); opacity: 0; color: color-mix(in srgb, var(--dypere-tone) 68%, white); }
.dypere-ring svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dypere-ring circle { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: .01 9; vector-effect: non-scaling-stroke; }

/* ----- Kort 1: bue med rytmen ----- */
.dypere-c1 { --cy: 40.5%; }
.dypere-c1 .dypere-o1 { top: 17%; }
.dypere-c1 .dypere-o2 { top: 55%; }
.dypere-c1 .dypere-o3 { top: 71%; }
.dypere-gauge { width: 15em; padding: 1.05em 1.1em 1em; }
.dypere-gw { position: relative; width: 78%; margin: .95em auto .5em; aspect-ratio: 1; }
.dypere-g { width: 100%; height: 100%; overflow: visible; }
.dypere-g circle { fill: none; }
.dypere-g-segs circle { stroke: color-mix(in srgb, var(--night-ink) 20%, transparent); stroke-width: 5; stroke-linecap: round; transition: stroke .8s var(--ease-soft); transform: rotate(-90deg); transform-origin: 60px 60px; }
.dypere-g-segs circle.on { stroke: color-mix(in srgb, var(--dypere-tone) 78%, white); }
.dypere-g-lit { stroke: color-mix(in srgb, var(--dypere-tone) 62%, white); stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: 100 100; transform: rotate(-90deg); transform-origin: 60px 60px; opacity: .85; }
/* Prikken som går rundt ringen er HTML, ikke SVG: en transform på et SVG-element tvinger layout hver ramme, en på HTML går på compositoren.
   Boksen dekker hele målerens felt (midten = midten av ringen), så den roterer rundt riktig punkt. Størrelsene er prosent av ringen (viewBox 120). */
.dypere-g-dot { position: absolute; inset: 0; pointer-events: none; }
.dypere-card:not(.is-off) .dypere-g-dot { will-change: transform; }
.dypere-g-dot b { position: absolute; left: 50%; top: 8.33%; width: 15%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: color-mix(in srgb, color-mix(in srgb, var(--dypere-tone) 70%, white) 28%, transparent); }   /* glorien */
.dypere-g-dot b::after { content: ""; position: absolute; inset: 20%; border-radius: 50%; background: #fff; }                                                                                                                 /* prikken */
.dypere-gc { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.dypere-gc strong { font: 900 2.55em/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dypere-gc span { margin-top: .3em; font: 700 max(11px, .9em)/1 var(--display); color: var(--dypere-soft); }
.dypere-gnote { margin: 0; text-align: center; font-size: max(11px, .82em); color: var(--dypere-soft); }

/* ----- Kort 2: teksting som lyser i takt, og stemme ----- */
.dypere-c2 { --cy: 29%; }
.dypere-c2 .dypere-o1 { top: 40%; }
.dypere-c2 .dypere-o2 { top: 73%; }
.dypere-c2 .dypere-o3 { top: 14%; }
.dypere-kara { width: min(16.6em, calc(var(--m) + var(--phone-w) * .4 - 8px)); padding: 1.05em 1.15em 1.2em; container-type: inline-size; }   /* rekker aldri inn over «Pust ut» i skjermen, heller ikke når telefonen er på sitt største */
@container (max-width: 14em) { .dypere-cap-x { display: none; } }   /* smalere brikke: bare «Teksting», så etiketten ikke bryter og gjør brikken høyere */
.dypere-pairs { position: relative; display: grid; margin-top: 1.1em; }
.dypere-pair { grid-area: 1 / 1; display: grid; align-content: start; gap: .8em; opacity: 0; transition: opacity 1.4s var(--ease-soft); }
.dypere-pair.on { opacity: 1; }
.dypere-line { margin: 0; font: 800 1.3em/1.28 var(--display); letter-spacing: -.012em; text-wrap: pretty; }
.dypere-wd { opacity: .56; }
.dypere-line.done .dypere-wd { opacity: .86; }
.dypere-voice { display: flex; align-items: center; gap: .9em; padding: .8em 1.15em .8em .95em; border-radius: 1.3em; }
.dypere-voice p { display: grid; gap: .2em; margin: 0; }
.dypere-voice strong { font: 800 1.05em/1 var(--display); }
.dypere-voice span { font-size: max(11px, .84em); color: var(--dypere-soft); }
.dypere-wave { display: flex; align-items: center; gap: .17em; height: 2.6em; }
.dypere-wave i { display: block; width: .2em; height: 100%; border-radius: 99px; background: color-mix(in srgb, var(--dypere-tone) 62%, white); transform: scaleY(.3); }

/* ----- Kort 3: klokka og trykkene ----- */
.dypere-c3 { --cy: 50%; --wp: calc(var(--phone-w) * .94); }
.dypere-watchbox { position: absolute; left: 50%; top: 50%; width: var(--wp); aspect-ratio: 416 / 496; translate: -50% -50%; }
.dypere-watchbox .alt-watch { --watch-w: var(--wp); position: absolute; inset: 0; width: auto; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--night-ink) 22%, transparent), 0 40px 80px -24px rgba(0, 0, 0, .75), inset 0 0 0 1.5px #2a343c; }
.dypere-dunks { position: absolute; inset: 0; pointer-events: none; }
.dypere-dunk { position: absolute; inset: 0; border-radius: 30%; border: 2px solid color-mix(in srgb, var(--dypere-tone) 74%, white); opacity: 0; }
.dypere-c3 .dypere-o1 { top: 5%; }
.dypere-c3 .dypere-o2 { top: 80%; }
.dypere-c3 .dypere-o3 { top: 88%; }
.dypere-taps { width: 15em; padding: 1.05em 1.15em .95em; }
.dypere-tl { position: relative; height: 3.4em; margin-top: 1em; border-radius: .6em; overflow: hidden; background: color-mix(in srgb, var(--night-ink) 7%, transparent); }
.dypere-tl .tp { position: absolute; bottom: 0; width: .24em; margin-left: -.12em; border-radius: 99px 99px 0 0; background: color-mix(in srgb, var(--dypere-tone) 66%, white); opacity: .5; transform-origin: bottom; transition: opacity .9s var(--ease-soft); }
.dypere-tl .tp.off { opacity: 0; }
.dypere-tl-empty { position: absolute; inset: 0; display: grid; place-items: center; font: 700 max(11px, .85em)/1 var(--display); color: var(--dypere-soft); opacity: 0; transition: opacity .9s var(--ease-soft); }
.dypere-tl-empty.on { opacity: 1; }
/* Lesehodet er like bredt som tidslinjen og sitter med høyrekanten på det som er nå (flyttes med transform) */
.dypere-tl-head { position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: 100%; border-right: 1.5px solid color-mix(in srgb, var(--night-ink) 75%, transparent); transform: translateX(-100%); }
.dypere-tl-l { display: flex; margin: .55em 0 0; font: 700 max(11px, .8em)/1 var(--display); color: var(--dypere-soft); }
.dypere-tl-l span:last-child { text-align: right; }

/* ----- Kort 4: fjellet ----- */
.dypere-c4 .dypere-o1 { top: 17%; }
.dypere-c4 .dypere-o2 { top: 55%; }
.dypere-c4 .dypere-o3 { top: 71%; }
/* Fjellkortet er en liten tegning med morgenlys (ugjennomsiktig, så telefonens egen topptur bak ikke forstyrrer) */
.dypere-mtn {
  width: 18.4em; padding: 0; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--t-fjord) 26%, var(--night)) 0%, color-mix(in srgb, var(--t-mose) 20%, var(--night)) 100%);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.dypere-mtn .dypere-cap { position: relative; z-index: 1; padding: 1.05em 1.15em 0; }
.dypere-mtn-svg { display: block; width: 100%; height: auto; margin-top: -.5em; }
.dypere-mtn-svg .far { fill: color-mix(in srgb, var(--t-fjord) 46%, var(--night)); }
.dypere-mtn-svg .near { fill: color-mix(in srgb, var(--t-mose) 62%, var(--night)); }
.dypere-mtn-svg .snow { fill: color-mix(in srgb, #fff 90%, transparent); }
.dypere-mtn-svg .trail-base, .dypere-mtn-svg .trail { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dypere-mtn-svg .trail-base { stroke: color-mix(in srgb, var(--night-ink) 56%, transparent); stroke-width: 2.4; stroke-dasharray: .1 6.5; }
.dypere-mtn-svg .trail { stroke: var(--multe); stroke-width: 3.6; stroke-dasharray: 1 1; stroke-dashoffset: .4; }
.dypere-mtn-svg .flag path:first-child { stroke: var(--night-ink); stroke-width: 2; fill: none; stroke-linecap: round; }
.dypere-mtn-svg .flag path:last-child { fill: var(--multe); }
.dypere-mtn-svg .mark circle { fill: var(--multe); }
.dypere-mtn-svg .mark .halo { fill: var(--multe); opacity: .3; }
.dypere-mtn-n { display: flex; align-items: baseline; gap: .5em; margin: 0; padding: .1em 1.15em 1.1em; }
.dypere-mtn-n strong { font: 900 2.1em/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dypere-mtn-n span { font: 700 .95em/1 var(--display); color: var(--dypere-soft); }

/* ---------- Utgangen: soloppgang ---------- */
/* Bånd 2 er åsen soloppgangen står bak. Lys modus: flat fersken. Mørk modus: lyskanten øverst, og så smelter åsen ned i natten
   (flat ocker ble sidens lyseste og mest mettede flate). --melt er hvor mye av natten som blandes inn nederst. */
.dypere-exit { --melt: 0%; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dypere-exit { --melt: 80%; } }
:root[data-theme="dark"] .dypere-exit { --melt: 80%; }
.dypere-exit {
  --sun-r: clamp(70px, 10vw, 140px);
  position: relative; z-index: 2; height: var(--exit-h); margin-top: calc(var(--exit-h) * -.46); overflow: clip;
}
.dypere-exit-night { position: absolute; inset: 0; }
.dypere-band { position: absolute; left: 0; right: 0; bottom: -3px; width: 100%; height: calc(100% + 3px); display: block; }   /* stikker under kanten, så en brøkdel av en piksel aldri slipper natten gjennom */
.dypere-band path { fill: var(--c); }
.dypere-band[data-k="0"] { --c: color-mix(in srgb, var(--fjord) 26%, #000); }
.dypere-band[data-k="1"] { --c: color-mix(in srgb, var(--fjord) 74%, #000); }
.dypere-band[data-k="2"] { --c: color-mix(in srgb, var(--multe) 44%, var(--stage-sun)); }
.dypere-band[data-k="2"] path { fill: url(#dypere-rim); }
.dypere-band[data-k="2"] stop:nth-child(1) { stop-color: var(--c); }
.dypere-band[data-k="2"] stop:nth-child(2) { stop-color: color-mix(in srgb, var(--c), var(--snow) calc(var(--melt) * .7)); }
.dypere-band[data-k="2"] stop:nth-child(3) { stop-color: color-mix(in srgb, var(--c), var(--snow) var(--melt)); }
.dypere-band[data-k="3"] { --c: var(--snow); }
.dypere-sun {
  position: absolute; left: 50%; top: calc(50% - var(--sun-r)); width: calc(var(--sun-r) * 2); aspect-ratio: 1; border-radius: 50%; translate: -50% 0;
  background: radial-gradient(circle, #FFF3DF 0 20%, var(--multe) 44%, color-mix(in srgb, var(--glow) 38%, transparent) 60%, transparent 72%);
}
/* Der navet snur fra mørkt til lyst glass (data-nav="light"): når den oransje åsen når pillen. Lavere (36 %) ble en mørk, gjørmete pille over fersken. */
.dypere-lz { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; pointer-events: none; }

/* ---------- Mobil: statisk variant (ingen fixed, ingen parallaks) ----------
   Telefonen er vanlig innhold, avskåret nederst. Brikkene ligger på en hylle OVER telefonen (i stedet for oppå skjermen), så de aldri
   dekker tittel, pustetekst eller tall i skjermen. Hylla er litt lavere enn den største brikken: den stikker bare ned over rammen. */
@media (max-width: 860px) {
  .dypere.alt-sec {
    --phone-w: min(70vw, clamp(262px, calc(262px + (100vw - 390px) * .3), 330px)); --gap: 20px; --exit-h: 220px; --crop: .72;
    --m: calc((100vw - 2 * var(--gutter) - var(--phone-w)) / 2);   /* kortet er like bredt som skjermen minus marg */
    --em: max(12px, calc(var(--phone-w) * .046));                   /* brikkene regnes i em av denne */
    --cw: calc(100vw - 2 * var(--gutter));                          /* kortets bredde: de små brikkene får det hovedbrikken ikke bruker (8 px marg ytterst og 8 px imellom) */
    --shelf: 0px;                                                   /* høyden på hylla over telefonen, per kort */
  }
  .dypere-card { display: block; min-height: 0; }
  .dypere-text { max-width: none; padding: 42px 24px 8px; }
  .dypere-h { font-size: clamp(34px, 9.4vw, 44px); }
  .dypere-slot { width: auto; height: calc(var(--phone-h) * var(--crop) + 4px + var(--shelf)); overflow: hidden; align-self: auto; }
  .dypere-fixed { position: absolute; inset: 0; width: auto; display: block; }
  .dypere-card.is-off .dypere-fixed { display: block; }
  .dypere-stage { position: absolute; left: 50%; top: calc(28px + var(--shelf)); translate: -50% 0; font-size: var(--em); }
  .dypere-glow { right: -40%; bottom: -60%; width: 150%; }
  .dypere-pos[data-side="l"] { left: calc(var(--m) * -1 + 8px); }
  .dypere-pos[data-side="r"] { right: calc(var(--m) * -1 + 8px); }
  .dypere-card .dypere-o1 { top: calc(var(--shelf) * -1); }                      /* hovedbrikken øverst til venstre på hylla */
  .dypere-card .dypere-o2 { top: calc(var(--shelf) * -1 + var(--o2, 1em)); }    /* den lille til høyre, ved siden av */
  .dypere-card .dypere-o3 { display: none; }
  .dypere-seg button { font-size: 13.5px; height: 46px; }

  /* Smalere brikker, så to får plass ved siden av hverandre også på 360 px */
  .dypere-gauge { width: 14em; padding: .95em 1em .85em; }
  .dypere-gauge .dypere-gw { width: 70%; margin: .8em auto .15em; }
  .dypere-gnote { display: none; }
  .dypere-kara { width: 15.2em; }
  .dypere-kara .dypere-line { font-size: 1.16em; }
  .dypere-cap-x, .dypere-mtn .dypere-cap span { display: none; }   /* tittelen står i kortet over, og brikkene skal være smale */
  .dypere-voice { gap: .7em; padding-right: .95em; max-width: calc(var(--cw) - 24px - 15.2em); }
  .dypere-wave i:nth-child(even) { display: none; }   /* ti streker i stedet for tjue, med hele bølgeformen */
  .dypere-taps { width: 14.5em; }
  .dypere-mtn { width: 15em; }
  .dypere-c1 .dypere-o2 .dypere-chip { max-width: min(11em, calc(var(--cw) - 24px - 14em)); }
  .dypere-c3 .dypere-o2 .dypere-chip { max-width: min(12em, calc(var(--cw) - 24px - 14.5em)); }
  .dypere-c4 .dypere-o2 .dypere-chip { max-width: min(12em, calc(var(--cw) - 24px - 15em)); }
  /* Hyllas høyde er bare en start (JS måler brikken og setter --shelf, siden linjebrytingen avhenger av skriften) */
  .dypere-c1 { --shelf: calc(var(--em) * 10.5); --o2: 2.2em; }
  .dypere-c2 { --shelf: calc(var(--em) * 11); --o2: 3.4em; }
  .dypere-c3 { --wp: calc(var(--phone-w) * .8); --crop: .56; --shelf: calc(var(--em) * 7.4); --o2: 1.6em; }
  .dypere-c3 .dypere-watchbox { top: 31%; }
  .dypere-c4 { --shelf: calc(var(--em) * 15); --o2: 1.6em; }
}
/* Redusert bevegelse (og «Pause bevegelsen») og berøringsflater på desktop-bredde (iPad, liggende iPhone Pro Max): telefonen ligger i kolonnen,
   ikke som fixed. iOS/iPadOS mister clip-path over et fixed-element ved rotasjon (WebKit 221261), og da ville telefonen male over teksten i alle kort. */
@media (max-width: 400px) { .dypere-wave { display: none; } }   /* på de smaleste telefonene er det ikke plass til bølgen ved siden av teksting-brikken */
@media (prefers-reduced-motion: reduce) and (min-width: 861px), (hover: none) and (min-width: 861px) {
  .dypere-card { min-height: calc(var(--phone-h) + 96px); }
  .dypere-fixed { position: absolute; inset: 0; width: auto; }
  .dypere-card.is-off .dypere-fixed { display: grid; }
}
/* … speilet for «Pause bevegelsen» */
@media (min-width: 861px), (hover: none) and (min-width: 861px) {
  :where(html[data-motion="off"]) :is(.dypere-card) { min-height: calc(var(--phone-h) + 96px); }
  :where(html[data-motion="off"]) :is(.dypere-fixed) { position: absolute; inset: 0; width: auto; }
  :where(html[data-motion="off"]) :is(.dypere-card.is-off .dypere-fixed) { display: grid; }
}
@media (prefers-reduced-motion: reduce) {
  .dypere-float, .dypere-glow, .dypere-cue::after, .dypere-sky { animation: none !important; }
  .dypere-pos { transition: none !important; }
}
/* … speilet for «Pause bevegelsen» */

  :where(html[data-motion="off"]) :is(.dypere-float), :where(html[data-motion="off"]) :is(.dypere-glow), :where(html[data-motion="off"]) :is(.dypere-cue)::after, :where(html[data-motion="off"]) :is(.dypere-sky) { animation: none !important; }
  :where(html[data-motion="off"]) :is(.dypere-pos) { transition: none !important; }


/* ==== 80-mer.css ==== */
/* =============================================================================
   80-mer: «Og mer til.» – fanene med ring-timer og telefonen som bytter skjerm.
   Alt animeres med transform, opacity og (sparsomt) filter. Ringen er stroke-dashoffset på ett SVG-element.
   ========================================================================== */
.mer {
  --mer-phone: clamp(250px, min(26vw, calc((100svh - 190px) * .46)), 336px);
  --mer-out: cubic-bezier(.165, .84, .44, 1);   /* power4.out: samme kurve som skjermbyttet i Bevel, men lengre */
}
/* Mørkt kort følger rett etter: litt mindre luft nederst, så de to seksjonene ikke får to ganger full luft mellom seg */
.mer.alt-sec { padding-bottom: clamp(56px, 6.5vw, 100px); }
.mer-head { display: grid; justify-items: center; gap: 20px; text-align: center; }
.mer-head .alt-lede { margin-inline: auto; }

.mer-body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start;
  gap: clamp(32px, 6vw, 96px); margin-top: clamp(44px, 6vw, 88px);
}

/* ---------- Fanene ---------- */
.mer-list { position: relative; display: flex; flex-direction: column; gap: 10px; }
.mer-tab {
  position: relative; isolation: isolate; display: flex; align-items: center; gap: 22px; width: 100%;
  padding: 24px 26px 24px 30px; border: 0; border-radius: 28px; background: transparent; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transform: scale(.94); transform-origin: 0 50%;
  transition: transform .9s var(--ease-expo);
}
/* To lag bak teksten: en rolig flate (alltid) og tonegradienten (bare når fanen er aktiv) */
.mer-tab::before, .mer-tab::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; }
.mer-tab::before { background: color-mix(in srgb, var(--card) 62%, transparent); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .9s var(--ease-soft); }
.mer-tab::after { background: var(--tone-g); box-shadow: var(--shadow-soft), inset 0 0 0 1px color-mix(in srgb, var(--tone) 26%, transparent); opacity: 0; transition: opacity 1s var(--ease-soft); }
.mer-tab.is-active { transform: scale(1); }
.mer-tab.is-active::after { opacity: 1; }
.mer-tab.is-active::before { background: transparent; box-shadow: none; }
.mer-tab:active { transform: scale(.985); }
.mer-tab.is-active:active { transform: scale(.995); }
@media (hover: hover) {
  .mer-tab:not(.is-active):hover { transform: scale(.975); }
  .mer-tab:not(.is-active):hover .mer-t { color: var(--ink); }
}

.mer-txt { display: grid; gap: 8px; min-width: 0; flex: 1; }
.mer-t { font: 800 clamp(21px, 1.9vw, 25px)/1.1 var(--display); letter-spacing: -.022em; color: color-mix(in srgb, var(--ink) 74%, var(--card)); transition: color .8s var(--ease-soft); }
.mer-d { font-size: 16.5px; line-height: 1.45; color: var(--ink-soft); text-wrap: pretty; transition: color .8s var(--ease-soft); }
.mer-tab.is-active .mer-t { color: var(--ink); }
.mer-tab.is-active .mer-d { color: color-mix(in srgb, var(--ink) 78%, var(--card)); }

/* Ring-timer: spor, fremdrift (JS skriver stroke-dashoffset), en liten pusteprikk i midten og en pause-markør */
.mer-ring { position: relative; flex: none; display: grid; place-items: center; width: 46px; height: 46px; color: color-mix(in srgb, var(--tone) 68%, var(--ink)); }
.mer-ring > svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; overflow: visible; }
.mer-ring circle { fill: none; stroke-width: 6; }
.mer-ring .trk { stroke: color-mix(in srgb, var(--ink) 16%, transparent); transition: stroke .8s var(--ease-soft); }
.mer-ring .bar { stroke: currentColor; stroke-linecap: round; stroke-dasharray: 339.292; stroke-dashoffset: 339.292; }
.mer-tab:not(.is-active) .bar { transition: stroke-dashoffset 1.2s var(--ease-out); }
.mer-tab.is-active .bar { stroke-dashoffset: 0; }   /* uten JS og ved redusert bevegelse: en full ring (valgt) */
.mer-tab.is-active .trk { stroke: color-mix(in srgb, var(--tone) 30%, transparent); }
.mer-go { position: relative; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .55; transition: opacity .6s var(--ease-soft), transform .9s var(--ease-expo); }
.mer-tab.is-active .mer-go { opacity: 0; transform: scale(.7); }
@media (hover: hover) { .mer-tab:not(.is-active):hover .mer-go { opacity: 1; transform: translateX(2px); } }
.mer-pip, .mer-pause { position: absolute; left: 50%; top: 50%; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease-soft), scale .9s var(--ease-expo); }
.mer-pip { width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: currentColor; scale: .4; }
.mer-tab.is-active .mer-pip { opacity: 1; scale: 1; animation: mer-pip 6.5s var(--ease-io) infinite; }
@keyframes mer-pip { 0%, 100% { transform: scale(.62); } 50% { transform: scale(1); } }
.mer-pause { width: 12px; height: 14px; margin: -7px 0 0 -6px; background: linear-gradient(90deg, currentColor 0 34%, transparent 34% 66%, currentColor 66%); border-radius: 2px; scale: .8; }
.mer.is-held .mer-tab.is-active .mer-pip { opacity: 0; }
.mer.is-held .mer-tab.is-active .mer-pause { opacity: 1; scale: 1; }

/* ---------- Scenen: telefon, aura og flytende chips ---------- */
@property --mer-glow { syntax: "<color>"; inherits: true; initial-value: #4FA9C4; }
/* Scenen står stille (sticky) mens listen ruller forbi. Toppen regnes ut fra telefonens høyde (aspekt 1206/2622) så den sentreres i skjermen. */
.mer-stage {
  position: sticky; top: max(84px, calc((100svh - var(--mer-phone) * 2.174 - 56px) / 2)); display: grid; justify-items: center; gap: 26px;
  --mer-glow: var(--tone); transition: --mer-glow 1.7s var(--ease-soft);
}
.mer-box { position: relative; width: var(--mer-phone); }
.mer .alt-phone { --phone-w: var(--mer-phone); z-index: 2; }

/* Tonen til fanen som en stor, myk flate bak telefonen. Den skifter farge når fanen skifter og puster langsomt (10 s). */
.mer-glow {
  position: absolute; left: 50%; top: 47%; z-index: 0; width: 215%; aspect-ratio: .92; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--mer-glow) 38%, transparent) 30%, color-mix(in srgb, var(--mer-glow) 22%, transparent) 58%, color-mix(in srgb, var(--mer-glow) 7%, transparent) 82%, transparent);
  animation: mer-glow 10s var(--ease-io) infinite;
}
@keyframes mer-glow { 0%, 100% { transform: scale(.93); } 50% { transform: scale(1.07); } }
.mer-aura {
  position: absolute; left: 50%; top: 50%; z-index: 0; width: 178%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none;
  opacity: .8; transition: opacity 1.1s var(--ease-soft);
}
.mer-aura.is-swap { opacity: 0; transition-duration: .55s; }
.mer-aura canvas { width: 100%; height: 100%; }
.mer-ground {
  position: absolute; left: 50%; bottom: -3.4%; z-index: 1; width: 82%; height: 5%; translate: -50% 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(29, 52, 65, .34), transparent);
}
:root[data-theme="dark"] .mer-ground { background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mer-ground { background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); } }

/* Skjermene ligger i paneler som tones og glir (12 px) over hverandre. Skjult panel = display: none, så prikker og CSS-animasjoner hviler. */
.mer-panel {
  position: absolute; inset: 1.472% 3.2%; border-radius: 15.4% / 7.1%; overflow: hidden; background: var(--snow);
  opacity: 0; transform: translateY(14px) scale(.985); filter: blur(6px);
  transition: opacity .7s var(--ease-soft), transform .8s var(--ease-soft), filter .7s var(--ease-soft);
}
.mer-panel.is-active {
  opacity: 1; transform: none; filter: none;
  transition: opacity 1s var(--mer-out), transform 1.1s var(--mer-out), filter .9s var(--mer-out);
}
.mer-panel.is-leave { opacity: 0; transform: translateY(-12px) scale(1.012); filter: blur(5px); }
.mer-panel > .scr.a-host { position: absolute; inset: 0; border-radius: 0; }
.mer-panel .a-tog, .mer-panel .a-mcard { transition: background-color .8s var(--ease-soft), box-shadow .8s var(--ease-soft), border-color .8s var(--ease-soft); }
.mer-panel .a-tog i { left: 2px; transform: translateX(0); transition: transform .9s var(--ease-expo); }
.mer-panel .a-tog.on i { left: 2px; transform: translateX(20px); }

/* Det som skjer inni skjermene mens fanen er aktiv: valgene skifter rolig i stedet for å hoppe */
.mer-panel .a-chips span { transition: background-color .8s var(--ease-soft), color .8s var(--ease-soft), box-shadow .8s var(--ease-soft); }
/* Dagens pusterom bytter forslag: flaten og ringene toner ned til kortfargen (.is-dip, satt av 80-mer.js), og tonen byttes først når de er borte.
   En ren fargeovergang mellom to toner går ellers gjennom gråbeige. */
.mer-panel .a-hero-top { transition: background-color 1.1s var(--ease-soft); }
.mer-panel .a-orb { transition: opacity .9s var(--ease-soft) .12s; }
.mer-panel .a-hero.is-dip .a-hero-top { background-color: var(--card); transition-duration: .46s; }
.mer-panel .a-hero.is-dip .a-orb { opacity: 0; transition-duration: .42s; transition-delay: 0s; }
.mer-panel .a-hero-body > div:first-child { transition: opacity .45s var(--ease-soft), transform .6s var(--ease-soft); }
.mer-panel .a-hero-body > div:first-child.is-out { opacity: 0; transform: translateY(6px); }
.mer-panel .a-shuf { transition: transform .6s var(--ease-soft), box-shadow .6s var(--ease-soft); }
.mer-panel .a-shuf.is-press { transform: scale(.82); box-shadow: 0 0 0 7px color-mix(in srgb, var(--multe) 26%, transparent); }

/* Lydbilde-velgeren: en glassbit under knappen øverst til høyre, som skifter mellom de fem lydbildene */
.mer-amb { position: absolute; z-index: 3; right: 4.6%; top: 14.4%; width: 72%; height: 34px; pointer-events: none; }
.mer-amb-s {
  position: absolute; right: 0; top: 0; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 15px 0 11px; border-radius: 17px; white-space: nowrap;
  background: color-mix(in srgb, var(--card) 88%, transparent); color: var(--ink); font: 800 13.5px/1 var(--display); letter-spacing: -.005em;
  box-shadow: 0 12px 26px -12px rgba(29, 52, 65, .5), inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
  opacity: 0; transform: translateY(-7px) scale(.95); transform-origin: 100% 0;
  transition: opacity .7s var(--ease-soft), transform 1s var(--ease-expo);
}
.mer-amb-s.is-on { opacity: 1; transform: none; }
.mer-amb-s svg { width: 17px; height: 17px; fill: none; stroke: var(--t-lyng); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Lys/mørk-sammenligningen: dra i håndtaket (eller bruk piltastene) */
.mer-cmp { --x: 50%; touch-action: pan-y; }
.mer-cmp > .mer-dark { clip-path: inset(0 0 0 var(--x)); }
.mer-range { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.mer-handle { position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--x); width: 2px; translate: -1px 0; background: rgba(255, 255, 255, .92); box-shadow: 0 0 0 1px rgba(0, 0, 0, .14), 0 0 18px rgba(0, 0, 0, .18); pointer-events: none; }
.mer-handle i {
  position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
}
.mer-handle i::before, .mer-handle i::after { content: ""; position: absolute; top: 50%; margin-top: -5px; border: 5px solid transparent; }
.mer-handle i::before { left: 9px; border-right: 7px solid #1D3441; border-left-width: 0; }
.mer-handle i::after { right: 9px; border-left: 7px solid #1D3441; border-right-width: 0; }
.mer-range:focus-visible + .mer-handle i { outline: 3px solid var(--multe); outline-offset: 3px; }

.mer-note { font-size: 13px; line-height: 1.4; color: var(--ink-soft); text-align: center; }

/* Chipene: glass som stikker ut bak/foran telefonen. Ytre = plassering og inngang, indre = rolig flyt (9 s). */
.mer-chips { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.mer-chip {
  --ov: 20px;
  position: absolute; top: var(--y); translate: 0 -50%; opacity: 0;
  transition: opacity .5s var(--ease-soft), transform .6s var(--ease-soft);
}
.mer-chip[data-side="l"] { right: calc(100% - var(--ov)); transform: translateX(28px) scale(.92); }
.mer-chip[data-side="r"] { left: calc(100% - var(--ov)); transform: translateX(-28px) scale(.92); }
.mer-chips.is-active .mer-chip {
  opacity: 1; transform: none;
  transition: opacity 1.1s var(--ease-out) calc(.5s + var(--k, 0) * .22s), transform 1.5s var(--mer-out) calc(.5s + var(--k, 0) * .22s);
}
.mer-chip .alt-chip { padding: 11px 17px; font-size: 15px; animation: mer-float 9s var(--ease-io) infinite; animation-delay: var(--f, 0s); box-shadow: 0 14px 30px -16px rgba(29, 52, 65, .5); }
@keyframes mer-float { 0%, 100% { transform: translateY(-5px); } 50% { transform: translateY(5px); } }

/* CSS-animasjonene (puls, flyt, glød) står stille mens komponenten er utenfor bildet */
.mer:not(.is-live) .mer-glow, .mer:not(.is-live) .mer-pip, .mer:not(.is-live) .mer-chip .alt-chip { animation-play-state: paused; }

/* ---------- Mobil: fanene blir en rad som kan sveipes, telefonen under ---------- */
@media (max-width: 860px) {
  .mer { --mer-phone: min(262px, 66vw); }
  .mer-body { grid-template-columns: 1fr; gap: 34px; margin-top: 40px; }
  .mer-list {
    flex-direction: row; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); margin-bottom: -22px; padding: 10px max(var(--gutter), var(--sa-r)) 44px max(var(--gutter), var(--sa-l)); scroll-padding-inline: max(var(--gutter), var(--sa-l)) max(var(--gutter), var(--sa-r));   /* rom nederst så skyggen til den aktive fanen ikke klippes */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }
  .mer-list::-webkit-scrollbar { display: none; }
  .mer-tab { flex: 0 0 min(304px, 80vw); align-items: flex-start; gap: 14px; padding: 20px 20px 22px 22px; scroll-snap-align: center; transform-origin: 50% 50%; transform: scale(.94); }
  .mer-t { font-size: 21px; }
  .mer-d { font-size: 15.5px; }
  .mer-ring { width: 40px; height: 40px; margin-top: -2px; }
  .mer-go { width: 20px; height: 20px; }
  .mer-stage { position: relative; top: auto; }
  .mer-chip { --ov: 24px; }
  .mer-chip .alt-chip { padding: 9px 14px; font-size: 13.5px; }
  .mer-aura { width: 150%; }
}
/* Smale skjermer: chipene ville dekket innholdet i telefonen, så de flyter i en rad under den (plassen er reservert, så siden ikke hopper når fanen byttes) */
@media (max-width: 560px) {
  .mer-box { margin-bottom: 112px; }
  .mer-stage { gap: 0; }
  .mer-chips { inset: auto; left: 50%; top: calc(100% + 26px); width: min(92vw, 400px); translate: -50% 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 12px 10px; }
  .mer-chip { position: static; translate: none; transform: translateY(14px) scale(.94); }
  .mer-chip[data-side="l"], .mer-chip[data-side="r"] { transform: translateY(14px) scale(.94); }
  .mer-chips.is-active .mer-chip { transform: none; }
  .mer-chip .alt-chip { animation-duration: 8s; }
}
/* Mellomstørrelser: kolonnene er tettere og margen til skjermkanten mindre, så chipene trekkes inn over telefonen i trinn
   (de skal aldri stikke ut over skjermkanten) */
@media (min-width: 861px) and (max-width: 1320px) { .mer-chip { --ov: 40px; } }
@media (min-width: 861px) and (max-width: 1100px) {
  .mer-chip { --ov: 54px; }
  .mer-chip .alt-chip { font-size: 14px; padding: 9px 14px; }
}
@media (min-width: 861px) and (max-width: 980px) { .mer-chip { --ov: 94px; } }

/* ==== 85-personvern.css ==== */
/* =============================================================================
   85-personvern: et mørkt kort med et prikkefelt som lyser rundt pekeren, og en hengelås tegnet med pusteprikker.
   Feltet og låsen er canvas; bakgrunnsglødene er CSS (bare opacity animeres).
   ========================================================================== */
.personvern.alt-sec { padding-top: clamp(40px, 5vw, 76px); padding-bottom: clamp(72px, 9vw, 130px); }
.personvern-card {
  --pv-pad: clamp(26px, 5.2vw, 72px);
  isolation: isolate; padding: 0; border-radius: clamp(26px, 3.2vw, 40px);
  background:
    radial-gradient(ellipse 80% 60% at 50% -12%, rgba(79, 169, 196, .15), transparent 72%),
    linear-gradient(180deg, #112530 0%, #0A151C 62%, #08121A 100%);
  /* Skyggen rekker høyst ca. 66 px under kortet (seksjonens bunnpolstring er 72 px ved smal bredde): Safari kan klippe i høyden på overflow-x: clip, og da skal ingen skygge bli hardt avskåret */
  box-shadow: 0 40px 70px -44px rgba(8, 18, 26, .38), 0 14px 30px -24px rgba(8, 18, 26, .3), inset 0 0 0 1px rgba(255, 255, 255, .075);
}
:root[data-theme="dark"] .personvern-card { box-shadow: 0 40px 70px -44px rgba(0, 0, 0, .6), 0 14px 30px -24px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .075); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .personvern-card { box-shadow: 0 40px 70px -44px rgba(0, 0, 0, .6), 0 14px 30px -24px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .075); } }

/* Glød i hjørnene: nordlys nede til venstre, isbre nede til høyre, litt lyng oppe (som nordlys over en fjord). Går i pustens tempo. */
.personvern-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.personvern-glow i { position: absolute; border-radius: 50%; opacity: .85; animation: pv-glow 10s var(--ease-io) infinite; }
.personvern-glow i:nth-child(1) { left: -22%; bottom: -46%; width: 64%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(54, 178, 142, .36), transparent); }
.personvern-glow i:nth-child(2) { right: -20%; bottom: -50%; width: 60%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(79, 169, 196, .30), transparent); animation-delay: -3.3s; }
.personvern-glow i:nth-child(3) { right: 6%; top: -48%; width: 42%; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(156, 123, 192, .22), transparent); animation-delay: -6.6s; }
@keyframes pv-glow { 0%, 100% { opacity: .55; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.04); } }

/* Prikkefeltet ligger nederst (z 0). Teksten og de seks flatene ligger over (z 1), så lyset aldri går gjennom bokstavene. */
.personvern-field, .personvern-lit { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; }

.personvern-inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 18px; padding: calc(var(--pv-pad) * .5) var(--pv-pad) var(--pv-pad); text-align: center; }
.personvern-lock { width: 300px; height: 300px; margin: -52px 0 -50px; max-width: none; pointer-events: none; }
.personvern-h { font-size: clamp(38px, 5.4vw, 72px); max-width: 12em; text-shadow: 0 2px 26px rgba(9, 18, 26, .9); }
.personvern-inner .alt-lede { margin-inline: auto; color: rgba(232, 238, 241, .76); text-shadow: 0 1px 18px rgba(9, 18, 26, .9); }

/* De seks punktene: matte glassflater over prikkefeltet. Lyset skinner svakt gjennom, og kantene er rolige. Hover løfter bare flaten. */
.personvern-list { list-style: none; margin: clamp(26px, 4vw, 52px) 0 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; text-align: left; }
.personvern-list li { position: relative; display: flex; align-items: flex-start; gap: 16px; padding: 22px 24px 24px 22px; }
.personvern-list li::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 24px; pointer-events: none;
  background: rgba(9, 18, 26, .66); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: transform .9s var(--ease-expo), box-shadow .9s var(--ease-soft), background-color .9s var(--ease-soft);
}
.personvern-ic {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; color: var(--c, #7EE0E0);
  background: color-mix(in srgb, var(--c, #7EE0E0) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, #7EE0E0) 24%, transparent);
  transition: transform .9s var(--ease-expo);
}
.personvern-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.personvern-list h3 { font: 800 18.5px/1.2 var(--display); letter-spacing: -.012em; color: var(--ink); text-wrap: balance; }
/* «mindful-minutter» skal ikke brytes ved bindestreken */
.personvern-nb { white-space: nowrap; }
.personvern-list p { margin-top: 6px; font-size: 15.5px; line-height: 1.45; color: rgba(232, 238, 241, .76); text-wrap: pretty; }
@media (hover: hover) {
  .personvern-list li:hover::before { transform: scale(1.018); background: rgba(12, 24, 33, .8); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 36%, transparent), inset 0 1px 0 rgba(255, 255, 255, .08); }
  .personvern-list li:hover .personvern-ic { transform: scale(1.08); }
}

@media (max-width: 980px) {
  .personvern-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .personvern-card { --pv-pad: clamp(20px, 5vw, 36px); }
  .personvern-lock { width: 240px; height: 240px; margin: -40px 0 -40px; }
  .personvern-h { font-size: clamp(34px, 9.4vw, 52px); }
}
@media (max-width: 620px) {
  .personvern-list { grid-template-columns: 1fr; gap: 10px; }
  .personvern-list li { padding: 18px 18px 20px; gap: 14px; }
}

/* ==== 88-steder.css ==== */
/* 88-steder: kinetisk typografi. Grunnstilen er den statiske tilstanden (vannrette scrollere); JS legger på .is-live. */
/* Seksjonen klipper ingenting selv: radene klipper seg selv, og ingenting stikker ut til siden eller opp og ned (se 30-strom.css) */
.steder { --gap: 18px; position: relative; padding-block: clamp(56px, 7vw, 104px) clamp(190px, 21vw, 300px); }
.steder-intro { display: grid; justify-items: center; gap: clamp(14px, 1.6vw, 22px); text-align: center; }
.steder-intro .alt-lede { margin-inline: auto; }
.steder-nb { white-space: nowrap; }   /* de to siste ordene i overskriften holdes sammen (data-split deler på mellomrom, så &nbsp; ville gått tapt) */
.steder-stage { position: relative; display: grid; gap: 6px; margin-top: clamp(40px, 5vw, 72px); }

.steder-row {
  --h: 68px; --fs: clamp(22px, 2.2vw, 30px); --pad: 14px;
  --room: 0px;   /* ekstra luft under raden til skyggen på en løftet pille (se under) */
  position: relative; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin;
  padding: var(--pad) max(var(--gutter), env(safe-area-inset-right, 0px)) calc(var(--pad) + var(--room)) max(var(--gutter), env(safe-area-inset-left, 0px));   /* ikke under hakket når radene ligger i ro */
  margin-bottom: calc(var(--room) * -1);   /* luften ligger over raden under, så oppsettet er det samme */
}
/* Raden klipper, og skyggen under en løftet pille er lengre enn paddingen: uten ekstra luft ender den i en rett kant. Bare der musa kan løfte pillen. */
@media (hover: hover) { .steder-row { --room: 32px; } }
.steder-row--2 { --h: 88px; --fs: clamp(28px, 3vw, 42px); }
.steder-track { display: flex; width: max-content; }
.steder-set { position: relative; display: flex; align-items: center; gap: var(--gap); flex: none; margin: 0; padding: 0; list-style: none; }
.steder-item { flex: none; scroll-snap-align: center; transform-origin: 50% 50%; }
.steder-row.is-live {
  overflow: hidden; scroll-snap-type: none; padding-inline: 0; touch-action: pan-y;   /* fingeren drar raden sideveis, siden ruller fortsatt loddrett */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.steder-row.is-live .steder-set { padding-right: var(--gap); }
.steder-row:focus-visible { outline-offset: -3px; border-radius: 28px; }

/* Pillene: tre stiler som veksler (hvit flate, tonens bløte flate, stiplet kant som ringen på utpusten) */
.steder-pill {
  display: inline-flex; align-items: center; gap: .48em; height: var(--h); padding: 0 calc(var(--h) * .5) 0 calc(var(--h) * .34); border: 2px solid transparent; border-radius: var(--r-pill);
  font: 800 var(--fs)/1 var(--display); letter-spacing: -.02em; color: var(--ink); white-space: nowrap;
  transition: transform .9s var(--ease-out), background .7s var(--ease-soft), border-color .7s var(--ease-soft), box-shadow .9s var(--ease-out);
}
.steder-pill.s0 { background: var(--card); border-color: var(--line); box-shadow: var(--shadow-soft); }
.steder-pill.s1 { background: var(--tone-soft); border-color: color-mix(in srgb, var(--tone) 20%, transparent); }
.steder-pill.s2 { background: transparent; border: 2px dotted color-mix(in srgb, var(--tone) 78%, transparent); }
.steder-ring { flex: none; width: 1.05em; height: 1.05em; color: var(--tone); transition: rotate 1.6s var(--ease-out); }

@media (hover: hover) {
  .steder-pill:hover { transform: translateY(-7px); background: var(--tone-g); border: 2px solid color-mix(in srgb, var(--tone) 50%, transparent); box-shadow: var(--shadow-soft), 0 26px 40px -24px color-mix(in srgb, var(--tone) 75%, transparent); }
  .steder-pill:hover .steder-ring { rotate: 120deg; }
}

/* Kapselen: over radene på smale flater (og når radene står stille), midt i dem på brede. Midtraden har da et mykt hull under den,
   så ordene løses opp før de når kapselen i stedet for å ligge bak den. */
.steder-cap {
  position: relative; z-index: 3; justify-self: center; margin: 0 var(--gutter) 14px; display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 22px 13px 18px; border-radius: var(--r-pill); pointer-events: none;
  background: color-mix(in srgb, var(--card) 90%, transparent); box-shadow: var(--shadow), inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
  font: 800 15px/1.2 var(--display); letter-spacing: -.005em;
}
.steder-cap svg { width: 20px; height: 20px; color: var(--multe-text); flex: none; }
@media (min-width: 1100px) {
  .steder-stage:not(:has(.is-static)) .steder-cap {
    position: absolute; left: 50%; top: 50%; translate: -50% -50%; margin: 0; padding: 15px 26px 15px 22px; white-space: nowrap; font-size: 17px;
  }
  .steder-row--2.is-live {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%), linear-gradient(90deg, #000 calc(50% - 350px), transparent calc(50% - 214px), transparent calc(50% + 214px), #000 calc(50% + 350px));
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%), linear-gradient(90deg, #000 calc(50% - 350px), transparent calc(50% - 214px), transparent calc(50% + 214px), #000 calc(50% + 350px));
    mask-composite: intersect;
  }
}

/* Skumringen: bunnen av siden går fra krem via lilla til en varm horisontglød. Seksjonen under (90-cta) har en fjellrygg i nattfarge
   som stikker opp i den, så ryggen står som en silhuett mot gløden i stedet for mot en rett kant. */
.steder-dusk {
  position: absolute; left: 0; right: 0; bottom: 0; height: clamp(220px, 26vw, 380px); pointer-events: none;
  background: linear-gradient(in oklab 180deg, transparent 0, color-mix(in oklab, var(--t-lyng) 24%, var(--snow)) 46%, color-mix(in oklab, var(--t-multe) 62%, var(--t-lyng)) 100%);
}
/* Navet blir mørkt litt før natten under, omtrent der fjellryggen begynner */
.steder-dusk i { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(40px, 6vw, 90px); }

/* Pauseknappen */
.steder-foot { display: flex; justify-content: center; margin-top: 8px; position: relative; z-index: 1; }
.steder-pause {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; cursor: pointer; color: var(--ink-soft);
  background: color-mix(in srgb, var(--card) 70%, transparent); border: 1.5px solid color-mix(in srgb, var(--ink) 18%, transparent);
  transition: color .5s var(--ease-soft), background-color .5s var(--ease-soft), transform .6s var(--ease-expo);
}
.steder-pause[hidden] { display: none; }
.steder-pause svg { width: 20px; height: 20px; fill: currentColor; }
.steder-pause .pl, .steder-pause[aria-pressed="true"] .pa { display: none; }
.steder-pause[aria-pressed="true"] .pl { display: block; }
@media (hover: hover) { .steder-pause:hover { color: var(--ink); background: var(--card); transform: scale(1.06); } }

@media (max-width: 860px) {
  .steder { --gap: 12px; padding-bottom: 170px; }
  .steder-row { --h: 54px; --fs: 20px; --pad: 8px; }
  .steder-row--2 { --h: 62px; --fs: 23px; }
  .steder-cap { padding: 12px 18px 12px 16px; font-size: 14px; text-wrap: balance; }
  .steder-dusk { height: 200px; }
}

/* ==== 90-cta.css ==== */
/* =============================================================================
   90-cta – «Pust ut. Du er her nå.»  (id="last-ned", natt)
   Lagene bak → frem: himmel, soloppgang-lys (dawn), stjerner, fjern rygg, dis, midtre rygg, nær rygg (= footerens farge).
   Selve innholdet ligger over (.cta-in). Orben har sin egen glød bak seg, inne i .cta-stage.
   Overgangen fra forrige seksjon (.cta-horizon + .cta-top) stikker opp over seksjonens kant, så den ligger UTENFOR .cta-clip:
   Safari klipper begge aksene når en boks med overflow-x: clip har noe som stikker ut i høyden (kjent WebKit-feil),
   og da ville fjellryggen forsvinne. Klippet ligger derfor på .cta-clip, som bare har ting som skal holdes innenfor.
   ============================================================================= */
/* Forrige seksjons farge (sidens snow, ikke den mørke som .alt-dark setter her): brukes til å sy overgangen */
:root { --cta-from: var(--snow); }

.cta {
  /* z-index 1 + negativ margin-bottom: seksjonen dekker footerens kantlinje og litt av luften øverst i footeren (begge er natt), så natten går sømløst videre
     og ordene under orben kan stå helt nede mot footeren. Ingenting av footerens innhold ligger så høyt (den har 48 px luft over seg) */
  --cta-bleed: 16px;
  position: relative; z-index: 1; margin-bottom: calc(-1px - var(--cta-bleed)); isolation: isolate; text-align: center;
  padding-block: 0;   /* .alt-sec gir polstring; den ligger nå på .cta-clip, slik at overgangen kan stå utenfor klippet */
  /* JS (90-cta.js) måler footeren og ordblokken og skriver målene hit; faste tall som reserve til de er målt */
  --cta-foot: 283px; --cta-wh: 84px;
  --top-h: calc(max(100vw, 1100px) / 10);   /* høyden på fjellene som stikker opp i forrige seksjon (viewBox 1600 × 160) */
  --cta-far-a: color-mix(in srgb, var(--night) 58%, #2F6B8A);
  --cta-far-b: color-mix(in srgb, var(--night) 80%, #2F6B8A);
  --cta-mid-a: color-mix(in srgb, var(--night) 80%, #1F5A72);
  --cta-mid-b: color-mix(in srgb, var(--night) 92%, #1F5A72);
  /* Fjellene i overgangen er lyse mot dagens bakgrunn (fjern dis, så blåere mot natten) */
  --cta-tf: color-mix(in srgb, #4E8CA8 26%, var(--cta-from));
  --cta-tm: color-mix(in srgb, #2C5F78 64%, var(--cta-from));
}

/* Klippeboksen: tar over seksjonens polstring og klipper stjerner, glød og dis i sidene (og i høyden, så Chrome og Safari gjør det samme) */
.cta-clip { position: relative; overflow: clip; padding-block: clamp(92px, 7.5vw, 112px) 0; }

/* ---------- Bakgrunnen ---------- */
.cta-bg { position: absolute; inset: 0; z-index: 0; overflow: clip; pointer-events: none; }
.cta-sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(110% 46% at 50% 100%, rgba(232, 101, 122, .2), transparent 70%),
    linear-gradient(180deg, var(--night) 0%, #0D1E2B 32%, #152A3F 58%, #232F52 80%, #3B3453 100%);
}
/* Når du har pustet tre ganger, løfter lyset seg over horisonten et øyeblikk (opacity skrives av JS) */
.cta-dawn {
  position: absolute; inset: 0; opacity: 0;
  /* Lyset ligger rundt horisonten, der fjellryggene møter himmelen (ca. 300 px over bunnen), og stiger litt opp mot orben */
  background:
    radial-gradient(75% 340px at 50% calc(100% - 290px), rgba(255, 168, 108, .42), rgba(240, 112, 120, .2) 48%, transparent 100%),
    linear-gradient(0deg, rgba(242, 158, 76, .3) 0%, rgba(232, 101, 122, .12) 30%, transparent 58%);
}
/* Stjerner: små, flate prikker (som pusteprikkene). Bare opacity funkler, i seks grupper med hver sin takt (4–8 s) */
.cta-stars { position: absolute; inset: -10% 0; opacity: 0; }
.cta-sg { position: absolute; inset: 0; animation: cta-twinkle var(--t, 6s) var(--ease-io) var(--w, 0s) infinite; }
.cta-sg i { position: absolute; border-radius: 50%; }
@keyframes cta-twinkle { 50% { opacity: .4; } }
.cta.is-off .cta-sg, .cta.is-off .cta-haze, .cta.is-off .cta-ring { animation-play-state: paused; }

.cta-ridge {
  position: absolute; bottom: -1px; left: 50%; display: block; max-width: none; height: auto;
  width: max(100%, 1120px); margin-left: calc(max(100%, 1120px) / -2);
  transform: translate3d(0, 0, 0);
}
.cta-rim { fill: none; stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.cta-haze {
  position: absolute; left: -20%; right: -20%; bottom: 8%; height: 46%; opacity: .9;
  background:
    radial-gradient(52% 38% at 28% 56%, rgba(79, 169, 196, .13), transparent 70%),
    radial-gradient(46% 34% at 72% 44%, rgba(156, 123, 192, .1), transparent 70%);
  animation: cta-haze 80s var(--ease-io) infinite alternate;
}
@keyframes cta-haze { from { transform: translate3d(-7%, 0, 0); } to { transform: translate3d(7%, 0, 0); } }

/* ---------- Overgangen fra forrige seksjon ---------- */
/* Varmt morgenlys som ligger bak fjellene, på dagens bakgrunn */
.cta-horizon {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: calc(100% - 1px); height: calc(var(--top-h) * 2.2); pointer-events: none; opacity: 0;
  background: radial-gradient(72% 84% at 50% 100%, rgba(255, 158, 98, .36), rgba(232, 101, 122, .15) 46%, transparent 78%);
}
/* Tre lag fjell. Beholderen klipper, så lagene kan løftes opp fra bunnen uten å vise seg inne i himmelen */
.cta-top { position: absolute; z-index: 2; left: 0; right: 0; bottom: calc(100% - 1px); height: var(--top-h); overflow: hidden; pointer-events: none; }
.cta-top-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; background: linear-gradient(180deg, transparent, var(--night) 94%); }
.cta-tl--far > path { fill: var(--cta-tf); }
.cta-tl--mid > path { fill: var(--cta-tm); }
.cta-tl--near > path:first-of-type, .cta-ridge--near > path { fill: var(--night); }
.cta-tl {
  position: absolute; bottom: 0; left: 50%; display: block; max-width: none; height: auto; overflow: visible;
  width: max(100%, 1100px); margin-left: calc(max(100%, 1100px) / -2);
}

/* ---------- Innholdet ---------- */
.cta-in { position: relative; z-index: 1; }
.cta-head { display: grid; justify-items: center; }

/* Ikonet med myk glød og to prikkede ringer som går utover, i pustens tempo (10 s) */
.cta-mark { position: relative; display: grid; place-items: center; width: 80px; height: 80px; }
.cta-icon {
  position: relative; width: 80px; height: 80px; border-radius: 20px; scale: calc(1 + var(--lvl, 0) * .05);
  box-shadow: 0 18px 46px -8px rgba(242, 158, 76, .5), 0 0 0 1px rgba(255, 255, 255, .08);
}
.cta-mark::before {
  content: ""; position: absolute; inset: -70%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle closest-side, rgba(242, 158, 76, .3), rgba(242, 158, 76, .1) 45%, transparent 100%);
  opacity: calc(.55 + var(--lvl, 0) * .45);
}
/* Ringen er runde prikker (som utpusten i pusteprikkene): 64 stk, strekket med 0 lengde og runde ender */
.cta-ring {
  position: absolute; left: -8px; top: -8px; width: calc(100% + 16px); height: calc(100% + 16px); max-width: none; overflow: visible; opacity: 0;
  animation: cta-ring 10s var(--ease-out) infinite;
}
.cta-ring circle { fill: none; stroke: #F6B06B; stroke-width: 1.9; stroke-linecap: round; stroke-dasharray: 0 1; }
.cta-ring:nth-of-type(2) { animation-delay: -5s; }
@keyframes cta-ring {
  0% { transform: scale(.96); opacity: 0; }
  10% { opacity: .85; }
  100% { transform: scale(2.7); opacity: 0; }
}

/* Overskriften ligger over ringene */
.cta-h2 {
  position: relative; z-index: 1;
  margin-top: clamp(24px, 3vw, 34px); font-weight: 900; font-size: clamp(46px, 7.2vw, 100px);
  letter-spacing: -.03em; word-spacing: .06em; line-height: .98; color: var(--night-ink);
}
.cta-h2 em { font-style: normal; color: var(--multe-text); }
.cta-lede { margin: clamp(18px, 2vw, 24px) auto 0; max-width: 40em; color: var(--night-soft); }
.cta-act { display: grid; justify-items: center; gap: 14px; margin-top: clamp(26px, 3vw, 34px); }
/* Merket er lyst på natten: lysfeltet som stiger ved hover får multe-farge (hvitt ville ikke synes).
   Safari kjenner bare -webkit-user-select: uten den kan teksten markeres, og et langt trykk på iPhone gir markering på noe som ikke er en lenke */
.cta .alt-badge { --btn-glow: rgba(242, 158, 76, .95); -webkit-user-select: none; -webkit-touch-callout: none; }
/* Tre påstander som aldri brekkes midt i: på smale skjermer fordeles de på to linjer */
.cta-meta { max-width: 26em; font: 600 14px/1.5 var(--body); letter-spacing: .01em; color: var(--night-soft); text-wrap: balance; }
.cta-meta span { white-space: nowrap; }
.cta-meta span:not(:last-child)::after { content: "·"; margin-inline: .55em .3em; }

/* ---------- Orben ---------- */
/* Siden hviler nederst, med footeren under. Der skal hele orben, ordet og instruksjonen stå fritt i bildet, under navpillen (72 px fra toppen):
   høyden regnes fra bunnen opp: skjermen − footeren (målt av JS, minus det vi legger over den) − luft under navet − ordblokken */
.cta-stage { --cta-s: min(600px, 78vw); --cta-side: max(200px, var(--cta-s)); position: relative; isolation: isolate; width: var(--cta-side); aspect-ratio: 1; margin: clamp(36px, 5vw, 64px) auto 0; }
@supports (width: 1svh) {
  .cta-stage { --cta-s: min(600px, 78vw, calc(100svh - var(--cta-foot) + var(--cta-bleed) - 72px - var(--cta-wh))); }
}
/* Gløden bak orben følger pusten: JS skriver transform og opacity på .cta-glow. Den ligger i en boks som står i ro og fader gløden ut mot bunnen av seksjonen:
   klippet (.cta-clip) skal aldri kutte en glød som fortsatt er synlig, for da blir det en hard kant mot footeren. Boksen er like stor som gløden (inset -52 %);
   stage-bunnen ligger (1 + 0,52) × orbens størrelse nede i den, og ordblokken (--cta-wh) fyller resten ned til seksjonens kant */
.cta { --glow-out: .52; }
.cta-glowbox {
  position: absolute; z-index: -1; inset: calc(var(--glow-out) * -100%); pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 calc((1 + var(--glow-out)) * var(--cta-side)), transparent calc((1 + var(--glow-out)) * var(--cta-side) + var(--cta-wh)));
  mask-image: linear-gradient(180deg, #000 calc((1 + var(--glow-out)) * var(--cta-side)), transparent calc((1 + var(--glow-out)) * var(--cta-side) + var(--cta-wh)));
}
.cta-glow {
  position: absolute; inset: 0; border-radius: 50%; opacity: 0; will-change: transform, opacity;
  background: radial-gradient(circle closest-side, rgba(255, 168, 118, .34) 0%, rgba(240, 118, 124, .19) 28%, rgba(176, 108, 170, .1) 54%, transparent 100%);
}
.cta.is-off .cta-glow { will-change: auto; }
.cta-orbwrap { position: absolute; inset: 0; }
.cta-orb {
  position: absolute; inset: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer;
  /* pan-y og ikke none: et stille hold virker, men en vertikal sveip scroller siden (og slipper pusten via pointercancel) */
  touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.cta-orb:focus-visible { outline: 3px solid var(--multe); outline-offset: 10px; }
.cta-canvas { display: block; width: 100%; height: 100%; max-width: none; pointer-events: none; }

/* Ordene ligger på fjellene: en mørk, myk skygge rundt bokstavene holder dem lesbare der kantlinjene krysser */
.cta-words { display: grid; justify-items: center; gap: 8px; margin-top: clamp(4px, .8vw, 10px); text-shadow: 0 0 22px rgba(9, 18, 26, .95), 0 1px 3px rgba(9, 18, 26, .7); }
.cta-word { height: 1.15em; font: 800 clamp(26px, 3.1vw, 34px)/1.15 var(--display); letter-spacing: -.02em; color: var(--night-ink); }
.cta-notes { display: grid; justify-items: center; }
/* På bred skjerm står instruksjonen på én linje (sparer høyde, så orben får bli større); på smal skjerm er det to */
@media (min-width: 861px) { .cta-hint br { display: none; } }
.cta-hint, .cta-done { grid-area: 1 / 1; font: 500 clamp(16px, 1.4vw, 18px)/1.5 var(--body); color: color-mix(in srgb, var(--night-ink) 78%, transparent); transition: opacity 1.2s var(--ease-soft), translate 1.2s var(--ease-out), filter 1.2s var(--ease-soft); }
.cta-done { font: 800 clamp(20px, 2vw, 24px)/1.3 var(--display); letter-spacing: -.01em; color: var(--multe-text); opacity: 0; translate: 0 8px; filter: blur(6px); }
.cta-notes.is-done .cta-hint { opacity: 0; translate: 0 -8px; filter: blur(6px); }
.cta-notes.is-done .cta-done { opacity: 1; translate: 0 0; filter: none; }

/* Uten JS finnes ikke orben: ingen tom flate med en instruksjon. Da må teksten ha luft ned mot footeren selv */
html:not(.js) .cta-stage, html:not(.js) .cta-words { display: none; }
html:not(.js) .cta-clip { padding-bottom: clamp(56px, 7vw, 88px); }

/* ---------- Mobil ---------- */
@media (max-width: 860px) {
  .cta { --glow-out: .4; }
}

/* ---------- Redusert bevegelse: natten står der, orben er et stille bilde, og holdet virker uten glidning ---------- */
@media (prefers-reduced-motion: reduce) {
  .cta-stars { opacity: 1; }
  .cta-glow { opacity: .8; }
  .cta-horizon { opacity: 1; }
  .cta-notes .cta-hint, .cta-notes .cta-done { transition: none; }
}
/* … speilet for «Pause bevegelsen» */

  :where(html[data-motion="off"]) :is(.cta-stars) { opacity: 1; }
  :where(html[data-motion="off"]) :is(.cta-glow) { opacity: .8; }
  :where(html[data-motion="off"]) :is(.cta-horizon) { opacity: 1; }
  :where(html[data-motion="off"]) :is(.cta-notes .cta-hint), :where(html[data-motion="off"]) :is(.cta-notes .cta-done) { transition: none; }


/* Apples «Last ned fra App Store»-merke (Tools/appstore_lansering.py) */
.badge-apple { display: inline-block; line-height: 0; border-radius: 10px; transition: transform .2s ease; }
.badge-apple:hover { transform: translateY(-1px); }
.badge-apple img { height: 52px; width: auto; }
.alt-badge.badge-apple { background: none; padding: 0; box-shadow: none; border: 0; }