/* One-delene på nettsida. Bare ONEs egne regler: tokenene, fontene og knappene
 * kommer fra one-tokens.css (generert fra ONE ved hver bygging). Her står bare
 * oppsettet. Ingen NordicOps-skrift, ingen kursiv, ingen tegninger.
 *
 * Størrelsene er ONEs: 44 px er den største tittelen ONE bruker (Øya), 36 px
 * den nest største; brødtekst 16 px, grensesnitt 14 px, etiketter 12 px.
 * Hjørner, skygger og varigheter er tokenene (--r-*, --elev-*, --dur-*).
 * ONEs egne regler (stil-konsistens.css): skrift 400/500/600, aldri 700;
 * etiketter i vanlig skrift, aldri STORE BOKSTAVER; knapper er rektangler.
 */
.one-flate {
  background: var(--bg);
  color: var(--text);
  font-family: var(--np-font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding: 40px 0 var(--rom);
}
.one-flate :is(h2, h3, p, ul) { margin: 0; }
.one-flate :focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--r-sm); }
.one-flate .np-knapper { display: flex; flex-wrap: wrap; gap: 10px; }
.one-flate .np-btn { font-family: var(--np-font); text-decoration: none; cursor: pointer; }
.one-flate .np-btn.sek:hover { border-color: var(--line-hover); }
@media (pointer: coarse) { .one-flate .np-btn { min-height: 44px; } }

/* Forsida: ONE-merket til venstre, «Utforsk →» til høyre; under hverandre på mobil */
.of-hode { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 56px; }
.of-hode .of-merke { --one-h: 44px; margin: 0; }

/* ONE-merket: O 316, luft 47, N 370, luft 57, E 250 enheter på 340 i høyden, som i ONE */
.of-merke { --one-h: 34px; display: inline-flex; align-items: center; color: var(--text); margin-bottom: 28px; }
.of-merke svg { height: var(--one-h); fill: currentColor; }
.of-merke .o { width: calc(var(--one-h) * 316 / 340); margin-right: calc(var(--one-h) * 47 / 340); }
.of-merke .n { width: calc(var(--one-h) * 370 / 340); }
.of-merke .e { width: calc(var(--one-h) * 250 / 340); margin-left: calc(var(--one-h) * 57 / 340); }

.of-tittel { font-family: var(--np-font-display); font-weight: 600; font-size: 44px; line-height: 1.12; letter-spacing: -0.01em; color: var(--white); max-width: 18ch; }
.of-tekst { margin-top: 14px !important; font-size: 16px; color: var(--text-2); max-width: 52ch; }
@media (max-width: 640px) { .of-tittel { font-size: 36px; } }

.of-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--neutral-bg); border: 1px solid var(--neutral-border); font-size: var(--np-t-12); font-weight: 600; color: var(--text-2); }
.of-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-2); }

.of-bilde { margin: 48px 0 0; border-radius: var(--r-xl); overflow: hidden; background: var(--bg); box-shadow: var(--elev-modal);
  isolation: isolate; }   /* Safari mistet de runde hjørnene og blinket når filmen startet uten eget lag */
.of-bilde img, .of-bilde picture { display: block; width: 100%; height: auto; }
.of-bilde video { display: block; width: 100%; height: auto; aspect-ratio: 2160 / 1350; background: var(--bg); }
/* Telefonfilmen (one-mobil.mp4) på mobil, PC-filmen ellers. Den skjulte lastes aldri: one-video.js
   starter bare en film som er på skjermen. */
.of-bilde video.mobil { display: none; aspect-ratio: 780 / 1688; }
@media (max-width: 860px) {
  .of-bilde.of-film { width: min(100%, 320px); margin-left: auto; margin-right: auto; }
  .of-bilde video.pc { display: none; }
  .of-bilde video.mobil { display: block; }
}
/* ONEs knapperegel setter display, som ellers slår hidden-attributtet */
.one-flate [hidden] { display: none !important; }
@media (max-width: 760px) { .of-bilde { margin-top: 32px; border-radius: var(--r-lg); } }

/* ── /one: produktsida ─────────────────────────────────────────────────
 * Filmen øverst er omvisningen. Resten forteller hva ONE hjelper med, som en
 * dag: problemet, alt samlet på ett sted, øyeblikkene med ONE på telefon
 * (verktoy/one_bilder.mjs), tilkoblingene og flyttingen. Ingen kort og ingen
 * meny: tekst og ekte skjermbilder. */
.os { padding: 0; }
.os-topp { padding: calc(var(--topp-h) + 72px) 0 var(--rom); text-align: center; }
.os-topp .of-merke { --one-h: 52px; margin-bottom: 36px; }
.os-topp .of-tittel { margin: 0 auto; }
.os-topp .of-tekst { margin: 18px auto 0 !important; font-size: 18px; }
.os-handling { display: grid; justify-items: center; gap: 16px; margin-top: 28px; }
.os-topp .np-knapper { justify-content: center; }
.os-topp .of-bilde { margin-top: 64px; }

.os-etikett { font-size: var(--np-t-12); font-weight: 500; color: var(--text-3); margin-bottom: 12px !important; }
.os-h { text-wrap: balance; font-family: var(--np-font-display); font-weight: 600; font-size: 36px; line-height: 1.15; letter-spacing: -0.01em; color: var(--white); max-width: 22ch; }
.os .os-ingress { margin-top: 18px !important; font-size: 18px; line-height: 1.6; color: var(--text-2); max-width: 44ch; }
.os-midt { text-align: center; }
.os-midt .os-h, .os-midt .os-ingress { margin-left: auto !important; margin-right: auto !important; }

/* Du driver bedriften: tittel, ingress og tre korte ord-par midt på */
.os-start { padding-top: 40px; }
.os-start .os-h { font-size: 44px; max-width: 20ch; }
.os-start .os-ingress { max-width: 50ch; }
.os-tre { margin: 28px auto 0 !important; font-size: 18px; font-weight: 500; color: var(--white); }

/* Alt samles: strømmen. Kildene til venstre, ONE i midten, «Akkurat nå» til høyre (på telefon under hverandre).
   Strekene fra hver kilde inn i ONE tegnes av one-samlet.js etter hvor brikkene står. Én hendelse om gangen:
   kilden lyser, et lys går langs streken inn i ONE, tallet for i dag teller, og et kort morfer ut av ONE og blir
   raden øverst. Rolig med vilje: én hendelse hvert femte sekund. Uten skriptet står kildene, ONE og radene stille;
   med redusert bevegelse står strekene også, men ingenting går. Bare tokens; ingen farger i skriptet. */
.os-samlet { padding-top: 160px; }
.os-samlet .os-h { font-size: 44px; }
.os-flyt { position: relative; max-width: 1120px; margin: 96px auto 0; display: grid; grid-template-columns: 172px minmax(0, 1fr) 440px;
  align-items: center; text-align: left; }
.os-linjer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; fill: none; z-index: 0; }
.os-linjer path { stroke: var(--line-strong); stroke-width: 1.25; transition: stroke 600ms var(--ease); }
.os-linjer path.aktiv { stroke: var(--line-hover); }
.os-linjer path.puls { stroke: var(--white); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0.16 1.4; transition: none;
  filter: drop-shadow(0 0 5px var(--text-2)); }
.os-kilder { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; justify-items: end; }
.os-kilder li { position: relative; height: 34px; display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid var(--neutral-border);
  border-radius: var(--r-pill); background: var(--surface); color: var(--text-2); font-size: var(--np-t-ui); font-weight: 500; white-space: nowrap;
  transition: background-color 500ms var(--ease), border-color 500ms var(--ease), color 500ms var(--ease); }
.os-kilder li.aktiv { background: var(--raised-2); border-color: var(--line-hover); color: var(--white); }
/* Kjernen: ONE-merket, tallet for i dag og en ring som brer seg når noe kommer inn */
.os-kjerne { position: relative; z-index: 1; justify-self: center; width: 184px; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center;
  justify-items: center; background: radial-gradient(circle at 50% 30%, var(--surface-2), var(--bg-2) 72%); border: 1px solid var(--line-strong);
  box-shadow: 0 0 0 12px var(--bg), 0 0 0 13px var(--line-soft), 0 0 120px 10px var(--chart-glow), var(--elev-pop); }
.os-kjerne .of-merke { --one-h: 22px; margin: 0 0 14px; color: var(--white); }
.os-kjerne-tall .os-rulle { height: 46px; font-size: 44px; font-weight: 600; letter-spacing: -0.01em; color: var(--white); }
.os-kjerne-tall .os-rulle > span { line-height: 46px; text-align: center; }
.os-kjerne-tekst { margin-top: 2px; font-size: var(--np-t-12); color: var(--text-3); }
.os-ring { position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--text-2); opacity: 0; pointer-events: none; }
.os-rulle { display: inline-grid; height: 18px; overflow: hidden; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.os-rulle > span { grid-area: 1 / 1; line-height: 18px; }
/* Akkurat nå */
.os-panel { position: relative; z-index: 1; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--elev-modal); overflow: hidden; }
.os-panel-hode { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px; border-bottom: 1px solid var(--line); }
.os-direkte { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
html.bev .os-direkte { animation: os-direkte 2.8s var(--ease) infinite; }
.os-pause { margin-left: auto; }
.stoppet .os-direkte { animation-play-state: paused; }
@keyframes os-direkte { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.os-panel-tittel { font-size: 13.5px; font-weight: 500; color: var(--text); }
.os-strom { list-style: none; margin: 0; padding: 0; height: calc(4 * 76px); overflow: hidden; }
.os-rad { box-sizing: border-box; height: 76px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; column-gap: 16px; row-gap: 3px;
  padding: 0 22px; border-bottom: 1px solid var(--line); transition: background-color 1800ms var(--ease); }
.os-rad > span { transition: opacity 500ms var(--ease); }
.os-rad-tittel { grid-column: 1; font-size: 15px; font-weight: 600; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-rad-tekst { grid-column: 1; font-size: 13.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Hvor det kom fra og hvor det havnet */
.os-rad .os-rad-mal { grid-column: 2; grid-row: 1 / 3; align-self: center; height: 28px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px;
  border: 1px solid var(--neutral-border); border-radius: var(--r-pill); background: var(--neutral-bg); font-size: var(--np-t-12); font-weight: 500; color: var(--text-3);
  white-space: nowrap; transition: opacity 600ms var(--ease-ut) 250ms, transform 800ms var(--ease-ut) 250ms; }
.os-rad-mal .til { color: var(--text); }
/* Den nye raden: tom til kortet har landet, så lyser den og slukner sakte */
.os-rad.lys { background: var(--raised); transition: none; }
.os-rad.ny > span { opacity: 0; }
.os-rad.ny .os-rad-mal { opacity: 0; transform: translateX(12px); }
/* Kortet som morfer ut av ONE og lander som raden */
.os-drape { position: absolute; left: 0; top: 0; z-index: 3; box-sizing: border-box; width: 300px; height: 66px; padding: 13px 20px; overflow: hidden;
  border: 1px solid var(--line-hover); border-radius: var(--r-lg); background: var(--raised); box-shadow: var(--elev-pop); pointer-events: none; will-change: transform; }
.os-drape-navn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--np-t-ui); font-weight: 500; color: var(--white); white-space: nowrap; }
.os-drape-inn { display: grid; gap: 3px; width: 258px; }
.os-drape b { font-size: 15px; font-weight: 600; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-drape-inn span { font-size: 13.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Før figuren er på skjermen (bare med skriptet) */
.os-flyt.venter .os-kilder li, .os-flyt.venter .os-kjerne, .os-flyt.venter .os-panel, .os-flyt.venter .os-linjer { opacity: 0; }
/* Smalere enn PC: kildene øverst, ONE under, «Akkurat nå» nederst; strekene går ned i ONE */
@media (max-width: 960px) {
  .os-flyt { display: flex; flex-direction: column; align-items: center; max-width: 560px; margin-top: 56px; }
  .os-kilder { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 8px; max-width: 420px; }
  .os-kjerne { width: 148px; margin-top: 96px; }
  .os-kjerne .of-merke { --one-h: 18px; margin-bottom: 10px; }
  .os-kjerne-tall .os-rulle { height: 40px; font-size: 36px; }
  .os-kjerne-tall .os-rulle > span { line-height: 40px; }
  .os-panel { align-self: stretch; margin-top: 72px; }
}

/* En dag med ONE: trinnene til venstre, telefonen står stille til høyre og bytter
   skjerm når et nytt trinn kommer midt på skjermen (one-dag.js). Uten skriptet og
   på telefon har hvert trinn sitt eget bilde. */
.os-dag { padding-top: 120px; overflow-x: clip; }
.os-dag-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 96px; max-width: 1180px; }
.os-trinn { padding: 72px 0; }
/* Telefonen (28.10.2026, Phillip: «alle bildene i denne seksjonen føltes billig og ikke premium»): en ekte iPhone
   Pro Max i ONEs farger. Hele skjermer med statuslinje og hjemstrek (one_bilder.py) bak glass med iPhonens
   hjørner, en mørk kant innenfor en stålramme i tre lag, knappene på sidene, en myk refleks over glasset og en
   dyp skygge. Den samme telefonen står i hvert trinn på mobil og stille ved siden av trinnene på PC. */
.os-enhet { --kant: 10px; --hjorne: 40px; position: relative; margin: 0; padding: var(--kant); border-radius: calc(var(--hjorne) + var(--kant));
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--line-strong), 0 0 0 4px var(--raised-2), 0 0 0 5px var(--line-strong),
    var(--elev-modal), 0 56px 110px -36px var(--skygge-farge); }
/* Knappene: handling og volum til venstre, av og på til høyre */
.os-enhet::before, .os-enhet::after { content: ""; position: absolute; width: 3px; border-radius: 2px; }
.os-enhet::before { left: -8px; top: 17%; height: 29%;
  background: linear-gradient(to bottom, var(--raised-2) 0 13%, transparent 13% 27%, var(--raised-2) 27% 59%, transparent 59% 68%, var(--raised-2) 68% 100%); }
.os-enhet::after { right: -8px; top: 28%; height: 12%; background: var(--raised-2); }
.os-glass { position: relative; overflow: hidden; border-radius: var(--hjorne); aspect-ratio: 430 / 932; background: var(--bg); isolation: isolate; }
.os-glass :is(img, video) { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--bg); }
/* Glasset: en svak refleks på skrå og en hårfin kant */
.os-glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: linear-gradient(118deg, color-mix(in srgb, var(--white) 9%, transparent) 0%, color-mix(in srgb, var(--white) 3%, transparent) 26%, transparent 42%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--white) 7%, transparent); }
.os-mobilbilde { margin-top: 40px; margin-left: 8px; width: min(calc(100% - 16px), 300px); }
.os-telefonen { display: none; }
@media (min-width: 861px) {
  .os-dag.klar .os-trinnliste { padding: 8vh 0 12vh; }
  .os-dag.klar .os-trinn { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; padding: 0; }
  /* Trinnene som ikke er aktive dempes med ONEs dempede teksttoken (6,2:1), ikke med opasitet: 0,3 ga 1,6 til 2,4:1,
     under WCAG-kravet (revisjonen R20) */
  .os-dag.klar .os-trinn > :not(figure) { transition: color 500ms var(--ease); }
  .os-dag.klar .os-trinn:not(.paa) > :not(figure),
  .os-dag.klar .os-trinn:not(.paa) > :not(figure) * { color: var(--text-3); }
  /* Teksten i trinnet som blir aktivt spretter opp på plass, linje for linje, med en liten overshoot (Phillip 28.10:
     «poppe litt opp selv»). CSS-snappen er tatt ut 29.10; magneten som legger trinnet midt på, er i one-dag.js og går bare fremover. */
  .os-dag.klar .os-trinn > :not(figure) { transform: translateY(26px);
    transition: transform 760ms cubic-bezier(0.34, 1.5, 0.5, 1); }
  .os-dag.klar .os-trinn.paa.sett > :not(figure) { transform: none; }
  .os-dag.klar .os-trinn.paa.sett > h2 { transition-delay: 60ms; }
  .os-dag.klar .os-trinn.paa.sett > .os-ingress { transition-delay: 130ms; }
  .os-dag.klar .os-trinn.paa.sett > .os-flytt { transition-delay: 200ms; }
  .os-dag.klar .os-mobilbilde { display: none; }
  .os-dag.klar .os-telefonen { --ramme-h: min(680px, calc(100vh - var(--topp-h) - 128px)); display: block; grid-column: 2; grid-row: 1;
    position: sticky; top: calc(var(--topp-h) + (100vh - var(--topp-h) - var(--ramme-h) - 27px) / 2); align-self: start; }
  /* Et svakt lys bak telefonen, så den står fram fra natta */
  .os-dag.klar .os-telefonen::before { content: ""; position: absolute; inset: -14% -45% -10%; z-index: -1; pointer-events: none;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--text-2) 11%, transparent), transparent); }
}
/* Telefonen på PC er like høy som plassen tillater; videoene ligger oppå hverandre, og den nye tones rolig inn
   over den gamle mens den legger seg fra litt nærmere */
.os-ramme { width: calc((var(--ramme-h) - 2 * var(--kant)) * 430 / 932 + 2 * var(--kant)); }
.os-ramme :is(img, video) { position: absolute; inset: 0; opacity: 0; transform: scale(1.025);
  transition: opacity 750ms var(--ease), transform 1100ms var(--ease-ut);
  /* Eget lag hele tida: Safari laget og slapp laget ved hver overgang, og videoen blinket mørk i byttet */
  will-change: opacity, transform; }
.os-ramme :is(img, video).paa { opacity: 1; transform: none; z-index: 1; }
/* Hvor langt dagen har kommet: stripa i deler, som timekortet i ONE */
.os-steg { display: flex; gap: 4px; margin-top: 24px; }
/* Hver del fyller seg fra venstre mens man ruller mot trinnet (one-dag.js setter --fyll fra 0 til 1) */
.os-steg span { position: relative; overflow: hidden; flex: 1; height: 3px; border-radius: 2px; background: var(--line-strong); }
.os-steg span::after { content: ""; position: absolute; inset: 0; background: var(--text-2); transform: scaleX(var(--fyll, 0)); transform-origin: left; }

/* Siste trinn i dagen: flyttingen fra systemet man har i dag */
.os .os-flytt { margin-top: 32px !important; padding-top: 24px; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.6; color: var(--text-2); max-width: 44ch; }
.os-flytt b { font-weight: 600; color: var(--white); }

.os-slutt { padding: 176px 0 var(--rom); text-align: center; }
.os-slutt .of-merke { --one-h: 40px; }
.os-slutt .os-h { margin: 0 auto; }
.os-slutt .lokke-lenke { margin-top: 30px; color: var(--white); }
/* Nye muligheter: overskriften til venstre, tre avsnitt til høyre; første avsnitt lysest */
.os-muligheter { padding-top: 176px; }
.os-mul { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 80px; align-items: start; max-width: 1120px; }
.os-mul-hode .os-h { font-size: 44px; max-width: 16ch; }
.os-mul-tekst .os-ingress:first-child { margin-top: 0 !important; }
.os .os-mul-forst { color: var(--white); }

@media (max-width: 860px) {
  .os-rad { padding: 0 16px; column-gap: 12px; }
  .os-panel-hode { padding: 0 16px; }
  .os-drape { width: 280px; padding: 13px 16px; }
  .os-drape-inn { width: 246px; }
  .os-dag-wrap { grid-template-columns: 1fr; gap: 32px; }
  .os-trinn { padding: 48px 0; }
  .os-mul { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 760px) {
  .os-topp { padding-top: calc(var(--topp-h) + 48px); }
  .os-topp .of-merke { --one-h: 40px; }
  .os-topp .of-bilde { margin-top: 40px; }
  .os-h { font-size: 26px; }
  /* «Alt bedriften trenger.» står på én linje ned til 320 px, så «trenger.» ikke blir stående alene */
  .os-samlet .os-h, .os-start .os-h, .os-mul-hode .os-h { font-size: min(36px, 8.8vw); }
  .os-tre { font-size: 16px; }
  .os-muligheter { padding-top: 112px; }
  /* Raden får tre linjer på telefon: merket under teksten */
  .os-strom { height: calc(4 * 100px); }
  .os-rad { height: 100px; grid-template-columns: minmax(0, 1fr); }
  .os-rad .os-rad-mal { grid-column: 1; grid-row: auto; justify-self: start; height: 24px; margin-top: 5px; }
  .os .os-ingress, .os-topp .of-tekst { font-size: 16px; }
  .os-samlet { padding-top: 112px; }
  .os-dag { padding-top: 48px; }
  .os-slutt { padding-top: 120px; }
}
/* På telefon: hvert trinn spretter opp én gang når det kommer inn (.sett), uten å dimme de andre */
@media (max-width: 860px) {
  .os-dag.klar .os-trinn > * { transform: translateY(28px); opacity: 0;
    transition: transform 760ms cubic-bezier(0.34, 1.5, 0.5, 1), opacity 500ms var(--ease); }
  .os-dag.klar .os-trinn.sett > * { transform: none; opacity: 1; }
  .os-dag.klar .os-trinn.sett > h2 { transition-delay: 60ms; }
  .os-dag.klar .os-trinn.sett > .os-ingress { transition-delay: 130ms; }
  .os-dag.klar .os-trinn.sett > figure { transition-delay: 200ms; }
}
@media (prefers-reduced-motion: reduce) {
  .os-ramme :is(img, video), .os-dag .os-trinn, .os-dag .os-trinn > *, .os-steg span { transition: none; }
  .os-dag.klar .os-trinn > *, .os-dag.klar .os-trinn > :not(figure) { transform: none; opacity: 1; }

}

/* ── Forsida: ONE mot det de fleste bruker i dag ───────────────────────
 * Tabellen i et ONE-kort. ONE-kolonnen er hevet (--raised) og fylles ovenfra
 * når kortet kommer inn (felles.js setter .inne), rad for rad. Etikettene i
 * vanlig skrift, ikke STORE BOKSTAVER (ONEs regel). */
.sml { padding: 24px 0 var(--rom); }
.sml-kort { max-width: 920px; margin: 0 auto; padding: 56px 48px 40px; border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--surface); box-shadow: var(--elev-modal); text-align: center; }
.sml-tittel { margin: 0; font-family: var(--np-font-display); font-weight: 600; font-size: 36px; line-height: 1.15; letter-spacing: -0.01em; color: var(--white); }
.one-flate .sml-under { margin-top: 14px; font-size: 16px; color: var(--text-2); }
.sml-tabell { width: 100%; margin-top: 44px; border-collapse: separate; border-spacing: 0; font-size: var(--np-t-ui); }
.sml-tabell th, .sml-tabell td { position: relative; z-index: 0; padding: 20px 16px; border-top: 1px solid var(--line); color: var(--text-2); font-weight: 400; line-height: 1.4; vertical-align: middle; }
.sml-tabell thead th, .sml-tabell thead td { border-top: 0; padding: 18px 16px; font-size: 15px; font-weight: 500; color: var(--text); }
.sml-tabell thead th { white-space: nowrap; }
.sml-tabell tbody th { text-align: left; font-size: 13.5px; font-weight: 500; color: var(--text-2); width: 24%; padding-left: 0; }
/* Nettstedets nullstilling gjør svg til blokk; her står ikonet på linja foran ordet */
.sml-ikn { display: inline-block; width: 18px; height: 18px; margin-right: 9px; vertical-align: -4px; color: var(--text-3); }
.sml-tabell thead .of-merke { --one-h: 18px; margin: 0; vertical-align: middle; }
/* ONE-kolonnen: hevet flate bak cellene, avrundet øverst og nederst. Flaten starter
   under radstreken, så streken går rett gjennom hele tabellen uten hakk ved kolonnen. */
.sml-tabell .one { width: 26%; color: var(--white); font-weight: 600; font-size: 15px; }
.sml-tabell .one::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--raised); }
.sml-tabell tbody .one::before { top: 1px; }
.sml-tabell thead .one::before { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.sml-tabell tbody tr:last-child .one::before { border-radius: 0 0 var(--r-lg) var(--r-lg); }
/* Planene under prisen i ONE-kolonnen */
.sml-sma { display: block; margin-top: 4px; font-size: var(--np-t-12); font-weight: 500; color: var(--text-2); white-space: nowrap; }
.sml-sma > span + span::before { content: " · "; }
.one-flate .sml-merknad { margin-top: 28px; font-size: var(--np-t-12); color: var(--text-3); }
/* Inn: verdiene kommer, rad for rad. ONE-kolonnens farge står fra start (Phillip 29.10: «reveal animasjonen … kan du ta bort. men la fargen være») */
/* Bare teksten kommer; strekene mellom radene står fra start */
html.bev .sml-kort td { transition: color 700ms var(--ease); }
html.bev .sml-kort:not(.inne) td { color: transparent; }
/* Planene under prisen har egen farge; de følger raden sin inn */
html.bev .sml-kort td .sml-sma { transition: color 700ms var(--ease); transition-delay: inherit; }
html.bev .sml-kort:not(.inne) td .sml-sma { color: transparent; }
html.bev .sml-kort.inne tbody tr:nth-child(1) > * { transition-delay: 460ms; }
html.bev .sml-kort.inne tbody tr:nth-child(2) > * { transition-delay: 600ms; }
html.bev .sml-kort.inne tbody tr:nth-child(3) > * { transition-delay: 740ms; }
html.bev .sml-kort.inne tbody tr:nth-child(4) > * { transition-delay: 880ms; }
html.bev .sml-kort.inne tbody tr:nth-child(5) > * { transition-delay: 1020ms; }
html.bev .sml-kort.inne tbody tr:nth-child(6) > * { transition-delay: 1160ms; }
html.bev .sml-kort.inne tbody tr:nth-child(7) > * { transition-delay: 1300ms; }
html.bev .sml-kort.inne tbody tr:nth-child(8) > * { transition-delay: 1440ms; }
html.bev .sml-kort.inne tbody tr:nth-child(9) > * { transition-delay: 1580ms; }
html.bev .sml-kort.inne tbody tr:nth-child(10) > * { transition-delay: 1720ms; }
html.bev .sml-kort.inne tbody tr:nth-child(11) > * { transition-delay: 1860ms; }
html.bev .sml-kort.inne tbody tr:nth-child(12) > * { transition-delay: 2000ms; }
html.bev .sml-kort.inne tbody tr:nth-child(13) > * { transition-delay: 2140ms; }
@media (max-width: 760px) {
  .sml-kort { padding: 40px 16px 28px; }
  .sml-tittel { font-size: 26px; }
  .sml-tabell, .sml-tabell thead, .sml-tabell tbody { display: block; }
  .sml-tabell tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sml-tabell thead td { display: none; }
  .sml-tabell thead th { white-space: normal; padding: 12px 6px; font-size: 13px; }
  .sml-ikn { display: block; margin: 0 auto 6px; }
  .sml-tabell tbody th { grid-column: 1 / -1; width: auto; padding: 18px 0 10px; font-size: 13px; text-align: center; }
  .sml-tabell tbody td { border-top: 0; padding: 12px 6px; font-size: 13px; }
  .sml-tabell .one { width: auto; font-size: 13px; }
  /* Planene på hver sin linje: kolonnen er for smal til begge */
  .sml-sma > span { display: block; }
  .sml-sma > span + span::before { content: none; }
  .sml-tabell tbody .one::before { top: 0; border-radius: var(--r-md); }
}
@media (prefers-reduced-motion: reduce) { .sml-kort td { transition: none; } }


/* VQ-26: på telefon er kortet nesten to skjermer høyt; radene kommer da inn sammen, så ingen rad står gjennomsiktig */
@media (max-width: 760px) {
  html.bev .sml-kort.inne tr > * { transition-delay: 0s !important; }
}
/* VQ-05: på de smaleste skjermene deles lange ord («Oppsigelsestid») i stedet for å gå inn i nabocellen */
@media (max-width: 360px) {
  .sml-tabell tbody td, .sml-tabell tbody th { font-size: 11.5px; overflow-wrap: anywhere; hyphens: manual; }
}