/* =============================================================================
   kundexa.no — designsystemet «Gata» (14.10.2026)

   Én solfylt hovedgate der alle slags bedrifter går på samme system. Lyst og
   varmt, aldri mørkt (Marius 14.10.2026). Fasiten for forsida er
   .impeccable/mocks/forside-a2.png, godkjent av Marius.

   Skriftene ligger på sida selv (CSP: font-src 'self'): Assistant til
   overskrifter og Catamaran til tekst, begge SIL Open Font License, hentet fra
   Google Fonts 14.10.2026. Valgt ved måling mot fasiten (impeccable font-match).
   ============================================================================= */

/* Assistant, vekt 200–800 */
@font-face{font-family:'Assistant';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(fonter/assistant-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Assistant';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(fonter/assistant-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Catamaran, vekt 100–900 */
@font-face{font-family:'Catamaran';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonter/catamaran-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Catamaran';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonter/catamaran-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Tallene: Catamaran har bare gammeldagse tall, der null ligner en «o», og
   ingen funksjon for vanlige tall. Sifrene og kolon tas fra Assistant. */
@font-face{font-family:'KXtall';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(fonter/assistant-latin.woff2) format('woff2');unicode-range:U+0030-003A}

/* Reserveskrift med omtrent samme bredde, så ombrekkingen ikke hopper når
   skriften lander. */
@font-face{font-family:'KXdisp';src:local('Arial');size-adjust:92%;ascent-override:100%;descent-override:26%;line-gap-override:0%}
@font-face{font-family:'KXtekst';src:local('Arial');size-adjust:96%;ascent-override:104%;descent-override:30%;line-gap-override:0%}

:root{
  /* Blekk og flater, tatt fra fasiten */
  --blekk:#09091C;
  --blekk-2:#14141F;
  --dus:#474757;
  --svak:#5E5E6E;
  --hvit:#FFFFFF;
  --band:#F8F8F8;
  --linje:rgba(9,9,28,.11);
  --linje-sterk:rgba(9,9,28,.24);

  /* Handling: fiolett fra fasitens knapper */
  --fiolett:#4A28E3;
  --fiolett-mork:#3A1BC2;
  --fiolett-lys:#EEEAFE;

  /* Merkets fargevei: bare i merket, statusmerkene og klokkeslettene */
  --rav:#FF9E00; --glo:#FF4D1C; --het:#FF1465; --fio:#C42BFF; --el:#6A2BFF; --cy:#00C2FF;

  /* Status, fem merker og bare fem (NETTSIDE-INNHOLD.md): i drift, klar
     men ikke slått på, under arbeid, kommer, og på vent (22.10.2026: kassa
     og betaling er satt på vent) */
  --drift:#0B6B3C; --drift-flate:#E2F4EA;
  --klar:#0A5F8A; --klar-flate:#E2F0F8;
  --arbeid:#7A4A00; --arbeid-flate:#FFF0D2;
  --kommer:#4A28E3; --kommer-flate:#EEEAFE;
  --vent:#4F4F5C; --vent-flate:#EDEDF0;
  --feil:#B42318; --feil-flate:#FDECEA;

  /* Mål for seksjonene under åpningsbildet */
  --kant:max(16px,2.753vw);
  --rom:clamp(72px,7.5vw,200px);
  --meny-h:max(64px,6.25vw);
  --h2:clamp(34px,3.1vw,88px);
  --h3:clamp(28px,2.5vw,68px);
  --brod:clamp(17px,1.25vw,34px);
  --liten:clamp(14px,.98vw,26px);

  --disp:'Assistant','KXdisp',system-ui,-apple-system,'Segoe UI',sans-serif;
  --tekst:'KXtall','Catamaran','KXtekst',system-ui,-apple-system,'Segoe UI',sans-serif;

  --ease-ut:cubic-bezier(.23,1,.32,1);
  --ease-film:cubic-bezier(.65,.05,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--hvit);color:var(--blekk);font-family:var(--tekst);font-size:18px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--fiolett-lys);color:var(--blekk)}
:focus-visible{outline:3px solid var(--fiolett);outline-offset:3px;border-radius:6px}
.nb{white-space:nowrap}
.skjult{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hopp{position:absolute;left:16px;top:-120px;z-index:500;background:var(--blekk);color:#fff;padding:12px 18px;border-radius:10px;font-weight:600}
.hopp:focus{top:12px}

/* =============================================================================
   Toppmenyen. Ligger over gatebildet; blir hvit når man ruller.
   Målene er fasitens, i prosent av 2688 px bredde.
   ============================================================================= */
.meny{position:fixed;inset:0 0 auto 0;z-index:100;height:6.25vw;min-height:64px;
  display:flex;align-items:center;transition:background-color .3s ease,box-shadow .3s ease}
.meny.fast{background:rgba(255,255,255,.94);box-shadow:0 1px 0 var(--linje);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}
.meny-inn{display:flex;align-items:center;width:100%;padding:0 2.9vw 0 1.82vw}
.merke{position:relative;top:-.3vw;display:inline-flex;align-items:center;gap:1.384vw;width:12.83vw;min-width:150px;padding-left:.34vw;font-family:var(--disp);font-weight:700;
  font-size:clamp(21px,2.124vw,57px);letter-spacing:-.01em;line-height:1;color:var(--blekk);min-height:44px}
.merke img{width:auto;height:clamp(30px,2.75vw,74px);flex:none}
.meny-lenker{display:flex;gap:2.25vw;margin-left:3.03vw;font-family:var(--tekst);font-weight:500;
  font-size:clamp(15px,1.116vw,30px);color:var(--blekk)}
.meny-lenker a{display:inline-flex;align-items:center;min-height:44px;transition:color .2s}
.meny-lenker a:not(.knapp):hover{color:var(--fiolett)}
.meny-knapp{margin-left:auto}

/* =============================================================================
   Knapper
   ============================================================================= */
.knapp{display:inline-flex;align-items:center;justify-content:center;gap:.6em;white-space:nowrap;
  font-family:var(--disp);font-weight:600;line-height:1;border-radius:clamp(10px,.45vw,14px);
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .16s var(--ease-ut)}
.knapp:active{transform:scale(.97)}
.k-fiolett{background:var(--fiolett);color:#fff}
.k-fiolett:hover{background:var(--fiolett-mork)}
.k-kant{background:rgba(255,255,255,.86);color:var(--blekk);box-shadow:inset 0 0 0 2px var(--blekk)}
.k-kant:hover{background:#fff}
.meny .knapp{height:clamp(44px,3.125vw,84px);width:clamp(140px,10.12vw,272px);padding:0;font-size:clamp(15px,1.116vw,30px)}

/* =============================================================================
   Åpningsbildet: gata. Bildet fyller hele bredden; teksten står på himmelen.
   ============================================================================= */
.scene{position:relative;height:44.79vw;min-height:520px;overflow:hidden;background:#dfe9f0}
.scene-bilde,.scene-bilde img{position:absolute;inset:0;width:100%;height:100%}
.scene-bilde img{object-fit:cover;object-position:50% 50%}
.scene-tekst{position:absolute;left:2.98vw;top:7.63vw;width:42vw}
.scene h1{font-family:var(--disp);font-weight:700;font-size:clamp(40px,4.204vw,120px);line-height:1.02;
  letter-spacing:-.012em;color:var(--blekk)}
.scene h1 span{display:block}
.ingress{margin-top:.62vw;font-family:var(--tekst);font-weight:400;font-size:clamp(17px,1.339vw,40px);
  line-height:1.38;color:var(--blekk-2);max-width:34vw}
.scene-knapper{display:flex;gap:.75vw;margin-top:.83vw;margin-left:.15vw}
.scene-knapper .knapp{height:clamp(50px,3.795vw,104px);font-size:clamp(16px,1.339vw,38px)}
.scene-knapper .k-fiolett{width:13.1vw;min-width:190px}
.scene-knapper .k-kant{width:12.05vw;min-width:170px}
.prislinje{margin-top:.56vw;margin-left:-.15vw;font-family:var(--tekst);font-weight:330;font-size:clamp(14px,.967vw,28px);color:var(--blekk-2)}
.prislinje span+span::before{content:"·";margin:0 .7em;color:var(--svak)}

/* =============================================================================
   Kapittelbåndet: tre scener fra dagen i gata
   ============================================================================= */
.kapitler{background:var(--band);padding:.893vw 2.753vw 0;height:11.756vw;min-height:160px}
.kapitler ol{list-style:none;display:grid;grid-template-columns:31.1fr 29.24fr 31.92fr;gap:1.12vw}
.kapittel{display:grid;grid-template-columns:54% 1fr;align-items:start;height:9.077vw;min-height:130px;
  background:var(--hvit);border:1px solid var(--linje);border-radius:clamp(12px,.6vw,18px);overflow:hidden;
  transition:transform .3s var(--ease-ut),box-shadow .3s var(--ease-ut)}
.kapittel:hover{transform:translateY(-3px);box-shadow:0 22px 44px -26px rgba(9,9,28,.35)}
li:nth-child(2) .kapittel{grid-template-columns:53.4% 1fr}
li:nth-child(3) .kapittel{grid-template-columns:56% 1fr}
.kapittel img{width:100%;height:100%;object-fit:cover}
.kapittel-tekst{padding:1.09vw 0 0 1.35vw}
li:nth-child(2) .kapittel-tekst{padding-left:1.85vw}
li:nth-child(3) .kapittel-tekst{padding-left:1.67vw}
.kapittel time{display:block;font-family:var(--tekst);font-weight:370;font-size:clamp(14px,1.38vw,40px);letter-spacing:.02em;
  line-height:1.1;color:var(--fiolett);font-variant-numeric:tabular-nums}
.kapittel b{display:block;margin-top:1vw;font-family:var(--tekst);font-weight:600;letter-spacing:-.012em;
  font-size:clamp(16px,1.6vw,44px);line-height:1.05;color:var(--blekk)}
.kapittel-tekst > span{display:block;margin-top:.14vw;font-family:var(--tekst);font-weight:490;
  font-size:clamp(14px,1.2vw,34px);line-height:1.15;color:var(--blekk-2)}

/* Linjeskift som bare gjelder på brede skjermer */
@media (max-width:1279px){br.bred{display:none}}

/* =============================================================================
   Skriftene til appskjermene: appens egne bokstaver (Fraunces 700 til
   bedriftsnavnene, Inter til resten) og appens egne ikoner (Ionicons, MIT),
   bare de sida bruker. Laget av filene i node_modules 15.10.2026. Fraunces og
   Inter: SIL Open Font License.
   ============================================================================= */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonter/fraunces-700-latin.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonter/inter-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonter/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'KX Ikon';font-style:normal;font-weight:400;font-display:block;
  src:url(fonter/ikoner.woff2) format('woff2')}

/* Nettleserens egne flater får sidas farger */
html{scrollbar-color:rgba(9,9,28,.32) transparent}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-thumb{background:rgba(9,9,28,.28);border-radius:8px;border:3px solid var(--hvit)}
::-webkit-scrollbar-track{background:transparent}
input,textarea{caret-color:var(--fiolett)}

/* Ikonene: appens Ionicons, alltid pyntet, aldri lest opp */
.ik{font-family:'KX Ikon';font-style:normal;font-weight:400;line-height:1;display:inline-block;
  letter-spacing:0;text-transform:none;-webkit-font-smoothing:antialiased;speak:never}

/* =============================================================================
   Felles byggeklosser for seksjonene
   ============================================================================= */
.ram{padding-left:var(--kant);padding-right:var(--kant)}
.tittel{font-family:var(--disp);font-weight:700;font-size:var(--h2);line-height:1.04;letter-spacing:-.015em;
  color:var(--blekk);text-wrap:balance}
.ingress-b{font-size:var(--brod);line-height:1.5;color:var(--blekk-2);max-width:44ch;text-wrap:pretty}
.lenke{display:inline-flex;align-items:center;gap:.4em;font-family:var(--disp);font-weight:600;
  font-size:var(--brod);color:var(--fiolett);text-decoration:underline;text-decoration-thickness:.07em;
  text-underline-offset:.24em;text-decoration-color:rgba(74,40,227,.35);transition:text-decoration-color .2s ease,color .2s ease}
.lenke:hover{color:var(--fiolett-mork);text-decoration-color:currentColor}
.lenke .ik{font-size:.9em;transition:transform .2s var(--ease-ut)}
.lenke:hover .ik{transform:translateX(3px)}
.k-stor{height:clamp(50px,3.4vw,96px);padding:0 1.5em;font-size:clamp(16px,1.2vw,34px)}

/* Statusmerkene. Fire, og bare fire. */
.status{display:inline-flex;align-items:center;gap:.45em;padding:.34em .72em .36em;border-radius:999px;
  font-family:var(--tekst);font-weight:600;font-size:clamp(13px,.86vw,23px);line-height:1;white-space:nowrap}
.status::before{content:"";width:.52em;height:.52em;border-radius:50%;background:currentColor;flex:none}
.s-drift{color:var(--drift);background:var(--drift-flate)}
.s-klar{color:var(--klar);background:var(--klar-flate)}
.s-arbeid{color:var(--arbeid);background:var(--arbeid-flate)}
.s-kommer{color:var(--kommer);background:var(--kommer-flate)}
.s-vent{color:var(--vent);background:var(--vent-flate)}

/* =============================================================================
   En dag i gata: filmen i fire kapitler.
   Uten JavaScript, og for den som har bedt om mindre bevegelse, står hvert
   kapittel stille med nærbildet og appen. Med JavaScript (html.film-levende)
   blir kapitlet en scene som står fast mens man ruller: kameraet skyver inn mot
   butikkvinduet i gata og klipper til nærbildet der appen gjør jobben.
   ============================================================================= */
.film{padding-top:var(--rom)}
.film-topp{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:3vw;align-items:end;
  padding-bottom:clamp(28px,2.6vw,72px)}
.film-topp .ingress-b{justify-self:end}

.kap{position:relative;display:grid}
.kap > .kap-scene,.kap > .kap-tekstramme{grid-area:1/1}
.kap-scene{position:relative;display:grid;min-height:max(620px,min(100svh,62vw));overflow:hidden;
  background:#EFE8DF;isolation:isolate}
.kap-lag{position:absolute;inset:0;overflow:hidden}
.kap-lag img{width:100%;height:100%;object-fit:cover}
.kap-gate{display:none}
.gate-flate{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:var(--mx) var(--my)}
.kap-lag .gate-flate > picture img{width:100%;height:100%;object-fit:fill}
/* Ekte skjermbilder fra demoappene i butikkvinduene (verktoy/vindusbilder.js),
   lagt i perspektiv over de malte telefonene. Målene er bildets egne piksler. */
.gate-vinduer{position:absolute;left:0;top:0;width:3840px;height:1648px;transform-origin:0 0;pointer-events:none}
/* Hjørnene (70px), fargen og rammen er bakt inn i vindu-*-ramme.webp
   (verktoy/bak-vindusbilder.js). Klipping og filter her ga et eget tegnesteg per
   vindu per bilde i zoomen (16.10.2026). Rammen var .vindu::after: et eget lag i
   perspektiv som Chrome tegnet i full oppløsning, 81–95 MB grafikkminne per vindu
   på telefonen. Filmen trengte opptil 244 MB, og Android-Chrome har 256 MB (18.10.2026). */
.vindu{position:absolute;left:0;top:0;width:1080px;height:3000px;transform-origin:0 0;backface-visibility:hidden}
.kap-lag .vindu img{width:100%;height:100%;object-fit:cover}
.kap-naer img{object-position:var(--nx,50%) 50%}
.kap-kveld img{filter:sepia(.32) saturate(1.15) brightness(.86) hue-rotate(-8deg)}
.kap-sloer{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.93) 0%,rgba(255,255,255,.84) 24%,rgba(255,255,255,.42) 42%,rgba(255,255,255,0) 56%)}
.kap-stempel{position:absolute;z-index:3;right:var(--kant);top:calc(var(--meny-h) + clamp(12px,1.3vw,36px));
  display:flex;align-items:baseline;gap:.65em;padding:.55em .95em .6em;border-radius:999px;
  background:rgba(255,255,255,.94);color:var(--blekk-2);font-family:var(--tekst);font-weight:500;
  font-size:var(--liten);line-height:1;box-shadow:0 1px 2px rgba(9,9,28,.08),0 10px 28px -14px rgba(9,9,28,.32)}
.kap-stempel time{font-family:var(--disp);font-weight:700;font-size:1.3em;color:var(--fiolett);font-variant-numeric:tabular-nums}

.kap-innhold,.kap-tekstramme{display:grid;grid-template-columns:minmax(0,37fr) minmax(0,25fr) minmax(0,38fr);
  column-gap:2.4vw;align-items:center;padding:calc(var(--meny-h) + clamp(24px,2.4vw,64px)) var(--kant) clamp(28px,3.4vw,90px)}
.kap-innhold{position:relative;z-index:2;height:100%}
.kap-tekstramme{position:relative;z-index:3;pointer-events:none}
.kap-tekst{grid-column:1;max-width:30em;pointer-events:auto}
.kap-tekst h3{font-family:var(--disp);font-weight:700;font-size:var(--h3);line-height:1.06;letter-spacing:-.012em;
  color:var(--blekk);text-wrap:balance}
.kap-tekst > p{margin-top:.85em;font-size:var(--brod);line-height:1.5;color:var(--blekk-2);text-wrap:pretty}
.kap-fakta{display:flex;flex-wrap:wrap;gap:.45em .5em;margin-top:1.3em;list-style:none}
.kap-fakta li{display:flex;align-items:center;gap:.5em;flex-wrap:wrap;font-size:var(--liten);color:var(--dus)}
.kap-pakke{margin-top:.9em;font-size:var(--liten);color:var(--dus)}
.kap-pakke b{font-weight:600;color:var(--blekk-2)}
.kap-tekst .lenke{margin-top:1.15em}
.kap-tlf{grid-column:2;position:relative;justify-self:center}
.eksempel{display:table;margin:.9em auto 0;padding:.4em .85em .45em;border-radius:999px;background:rgba(255,255,255,.92);
  text-align:center;font-size:clamp(12px,.78vw,20px);line-height:1.3;color:var(--blekk-2)}

/* Det flytende kortet ved siden av telefonen: eierens side av samme øyeblikk */
.flyt{position:absolute;z-index:2;width:clamp(210px,15.5vw,420px);padding:1.05em 1.15em 1.15em;border-radius:clamp(12px,.8vw,20px);
  background:var(--hvit);color:var(--blekk);font-family:'Inter',var(--tekst);font-size:clamp(13px,.86vw,23px);line-height:1.45;
  box-shadow:0 1px 3px rgba(9,9,28,.1),0 18px 44px -18px rgba(9,9,28,.42)}
.flyt-hoyre{left:calc(100% - 1.6vw);bottom:12%}
.flyt-topp{left:calc(100% - 1.6vw);top:13%}
.flyt-tittel{display:flex;align-items:center;gap:.45em;font-weight:700;font-size:1em;color:#1E1B22}
.flyt-tittel .ik{font-size:1.1em;color:#9A4F63}
.flyt-stor{margin-top:.45em;font-weight:500;line-height:1.4;color:#2E2A33}
.flyt-under{margin-top:.35em;color:#6B6573}
.flyt-valg{display:flex;flex-wrap:wrap;gap:.35em;margin-top:.45em}
.flyt-valg span{padding:.35em .62em;border-radius:.6em;background:#F2EEF0;color:#3A3540;font-weight:500;font-variant-numeric:tabular-nums}
.flyt-valg .pa{background:#5A1A2B;color:#fff}
.flyt-lager{display:flex;gap:.4em;margin-top:.55em}
.flyt-lager span{flex:1;padding:.5em 0;border-radius:.6em;background:#F2F1F4;text-align:center;font-weight:600;font-variant-numeric:tabular-nums;color:#2A2930}
.flyt-lager small{display:block;font-weight:500;font-size:.78em;color:#6B6573}
.flyt-lager .mye{background:#1D1C22;color:#fff}
.flyt-lager .mye small{color:#C9B49A}
.flyt-rad{display:flex;gap:.6em;padding:.62em 0;border-top:1px solid #EEE9EC}
.flyt-rad:first-of-type{border-top:0;padding-top:.5em}
.flyt-rad .ik{flex:none;width:1.9em;height:1.9em;display:grid;place-items:center;border-radius:50%;background:#F4E7EA;color:#9A4F63;font-size:.95em}
.flyt-rad b{display:block;font-weight:600;color:#1E1B22;line-height:1.3}
.flyt-rad span{display:block;color:#6B6573;font-size:.92em;margin-top:.15em}

/* =============================================================================
   Telefonen og appskjermene. Alt inne i skjermen måles i em, og 1 em er
   appens brødtekst (15 pt på en telefon 390 pt bred), så skjermen skalerer
   som ett bilde. Fargene er demobedriftenes egne (database/26 og 49).
   ============================================================================= */
.tlf{--b:max(220px,min(20vw,calc((100svh - var(--meny-h) - 9vw) * .43),520px));position:relative;width:var(--b);height:calc(var(--b) * 2.1667);
  padding:calc(var(--b) * .028);border-radius:calc(var(--b) * .17);background:#121216;
  box-shadow:inset 0 0 0 calc(var(--b) * .007) #44444E,0 2px 6px rgba(9,9,28,.22),
    0 calc(var(--b) * .12) calc(var(--b) * .24) calc(var(--b) * -.07) rgba(9,9,28,.5)}
.tlf::before{content:"";position:absolute;z-index:5;left:50%;top:calc(var(--b) * .055);width:calc(var(--b) * .3);
  height:calc(var(--b) * .085);transform:translateX(-50%);border-radius:999px;background:#08080B}
.tlf-skjerm{position:relative;height:100%;overflow:hidden;border-radius:calc(var(--b) * .145);
  font-family:'Inter',system-ui,sans-serif;font-size:calc(var(--b) * .0362);line-height:1.47;
  background:var(--a-bunn);color:var(--a-tekst);-webkit-font-smoothing:antialiased}
.tlf-skjerm p{margin:0}

.app-lys{--a-bunn:#F7EEE7;--a-kort:#EBD6D3;--a-kant:#B98A93;--a-aksent:#9A4F63;--a-pa-aksent:#FFFFFF;
  --a-tekst:#241A1D;--a-dus:#6E5A60;--a-skille:#E4D3CF;--a-liste:#FFFFFF}
.app-trad{--a-bunn:#1D1C22;--a-kort:#2A292F;--a-kant:#B88E5E;--a-aksent:#B88E5E;--a-pa-aksent:#1D1C22;
  --a-tekst:#F5F3EF;--a-dus:#A7A4AD;--a-skille:#444349;--a-liste:#2A292F}
.app-pizza{--a-bunn:#5A1A2B;--a-kort:#642737;--a-kant:#E9DFC6;--a-aksent:#E9DFC6;--a-pa-aksent:#3A0F1B;
  --a-tekst:#FFFFFF;--a-dus:#E2C3CB;--a-skille:#7C3F4F;--a-liste:#642737}

.app-topp{position:relative;height:39%;color:#fff}
.app-topp > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.app-topp::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.55) 100%)}
.app-topp-inn{position:absolute;z-index:1;left:1.6em;right:1.6em;bottom:2.35em}
.app-logo{display:block;width:3.25em;height:3.25em;border-radius:.75em;background:#fff;overflow:hidden}
.app-logo img{width:100%;height:100%;object-fit:cover}
.app-navn{margin-top:.55em!important;font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:2em;line-height:1.1;letter-spacing:-.02em}
.app-sted{font-size:.87em;opacity:.85}
.app-panel{position:relative;z-index:2;margin-top:-1.6em;padding:1.45em 1.6em 0;border-radius:1.6em 1.6em 0 0;background:var(--a-bunn)}
.app-kampanje{padding:1.05em 1.1em 1.1em;border-radius:.95em;background:var(--a-kort);box-shadow:inset 0 0 0 1px var(--a-kant)}
.app-k-tittel{font-weight:600;font-size:1.07em;line-height:1.35}
.app-k-tekst{margin-top:.2em!important;color:var(--a-dus)}
.app-k-pris{margin-top:.45em!important;font-weight:600}
.app-k-tid{display:flex;align-items:center;gap:.3em;margin-top:.3em!important;font-weight:600;color:var(--a-aksent);font-variant-numeric:tabular-nums}
.app-lys .app-k-tid{color:#8A4258}
.app-knapp{display:flex;align-items:center;justify-content:center;gap:.45em;height:3.2em;margin-top:1.05em!important;
  border-radius:.95em;background:var(--a-aksent);color:var(--a-pa-aksent);font-weight:600;font-size:1.07em}
.app-etikett{margin-top:1.5em!important;font-weight:700;font-size:.73em;letter-spacing:.127em;text-transform:uppercase;color:var(--a-dus)}
.app-liste{margin-top:.7em;padding:0 1.1em;border-radius:.95em;background:var(--a-liste);list-style:none;box-shadow:inset 0 0 0 1px var(--a-skille)}
.app-liste li{display:flex;justify-content:space-between;gap:1em;padding:.92em 0;border-top:1px solid var(--a-skille)}
.app-liste li:first-child{border-top:0}
.app-liste b{font-weight:600;font-variant-numeric:tabular-nums}
.app-faner{position:absolute;z-index:3;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);
  padding:.55em .4em 1.25em;background:var(--a-bunn);box-shadow:0 -1px 0 var(--a-skille)}
.app-faner span{display:grid;justify-items:center;gap:.25em;font-size:.73em;color:var(--a-dus)}
.app-faner .ik{font-size:1.85em}
.app-faner .pa{color:var(--a-aksent)}
.app-lys .app-faner .pa{color:#8A4258}

/* Låseskjermen med SMS-en */
.las{color:#fff;background:#2B2226}
.las > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.las::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,14,16,.42),rgba(20,14,16,.2) 40%,rgba(20,14,16,.5))}
.las-klokke{position:absolute;z-index:1;left:0;right:0;top:14%;text-align:center}
.las-klokke span{display:block;font-weight:500;font-size:1.05em;opacity:.92}
.las-klokke b{display:block;font-weight:600;font-size:5.1em;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.varsel{position:absolute;z-index:1;left:.75em;right:.75em;top:44%;padding:.95em 1em 1.05em;border-radius:1.45em;
  background:rgba(250,246,247,.86);color:#1B1619;box-shadow:0 .4em 1.4em rgba(0,0,0,.18)}
.varsel-topp{display:flex;align-items:center;gap:.55em;font-size:.93em}
.varsel-topp b{font-weight:600}
.varsel-topp span:last-child{margin-left:auto;color:#6F676B}
.varsel-ikon{display:grid;place-items:center;width:2.05em;height:2.05em;border-radius:.55em;background:#1F7F38;color:#fff}
.varsel-ikon .ik{font-size:1.15em}
.varsel p{margin-top:.4em;font-size:.97em;line-height:1.38;overflow-wrap:anywhere}

/* Eierens skjerm: assistenten */
.eier{padding:0 1.2em}
.eier-topp{padding-top:3.4em}
.eier-tittel{font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:1.6em;line-height:1.15;letter-spacing:-.01em}
.eier-under{margin-top:.4em!important;font-size:.82em;line-height:1.45;color:var(--a-dus)}
.prat{display:grid;gap:.7em;margin-top:1.2em}
.boble{max-width:84%;padding:.62em .85em;border-radius:1.05em;line-height:1.4}
.boble.meg{justify-self:end;background:#9A4F63;color:#fff;border-bottom-right-radius:.3em}
.boble.den{justify-self:start;background:#fff;color:var(--a-tekst);border-bottom-left-radius:.3em;box-shadow:inset 0 0 0 1px var(--a-skille)}
.forslag{padding:.95em 1em 1em;border-radius:.95em;background:#fff;box-shadow:inset 0 0 0 1.5px #8A4258}
.forslag-topp{display:flex;align-items:center;justify-content:space-between;gap:.6em}
.forslag-merke{font-weight:700;font-size:.73em;letter-spacing:.127em;text-transform:uppercase;color:var(--a-dus)}
.forslag-status{display:flex;align-items:center;gap:.35em;font-size:.87em;color:#8A5A00}
.forslag-status::before{content:"";width:.55em;height:.55em;border-radius:50%;background:currentColor}
.forslag > p{margin-top:.4em!important;line-height:1.4}
.forslag-knapper{display:grid;grid-template-columns:1fr 1fr;gap:.5em;margin-top:.85em}
.fk{display:flex;align-items:center;justify-content:center;gap:.35em;height:2.7em;border-radius:.8em;font-weight:600;
  background:#F1E4E2;color:var(--a-tekst)}
.fk-fyll{background:#9A4F63;color:#fff}
.skrivefelt{position:absolute;left:1.2em;right:1.2em;bottom:1.6em;padding:.8em 1em;border-radius:1em;background:#fff;
  color:var(--a-dus);box-shadow:inset 0 0 0 1px var(--a-skille)}

/* =============================================================================
   Alt i én app: hele lista, med status ved hver linje
   ============================================================================= */
.alt{padding-top:var(--rom)}
.alt-topp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3vw;align-items:end}
.forklaring{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4vw;margin-top:clamp(28px,2.6vw,72px);
  padding:clamp(18px,1.4vw,40px) 0;border-top:1px solid var(--linje);border-bottom:1px solid var(--linje);list-style:none}
.forklaring li{display:grid;gap:.55em;justify-items:start;font-size:var(--liten);line-height:1.45;color:var(--dus)}
.omrader{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,clamp(300px,21vw,560px)),1fr));
  gap:clamp(36px,3vw,84px) clamp(28px,3vw,84px);margin-top:clamp(36px,3.4vw,96px)}
.omrade :is(h2,h3){display:flex;align-items:center;gap:.5em;font-family:var(--disp);font-weight:700;font-size:clamp(20px,1.45vw,40px);
  line-height:1.15;color:var(--blekk)}
.omrade :is(h2,h3) .ik{display:grid;place-items:center;width:1.75em;height:1.75em;border-radius:.5em;background:var(--fiolett-lys);
  color:var(--fiolett);font-size:.82em}
.linjer{margin-top:.8em;list-style:none}
.linjer li{display:flex;align-items:flex-start;justify-content:space-between;gap:.9em;padding:.72em 0;border-top:1px solid var(--linje)}
.linjer li:last-child{border-bottom:1px solid var(--linje)}
.linjer .navn{font-size:clamp(16px,1.08vw,29px);line-height:1.4;color:var(--blekk-2)}
.linjer small{display:block;margin-top:.15em;font-size:clamp(13px,.82vw,22px);color:var(--dus)}
.linjer .status{margin-top:.15em}
.alt-bunn{margin-top:clamp(28px,2.6vw,72px)}

/* =============================================================================
   Pakkene
   ============================================================================= */
.pakker{margin-top:var(--rom);padding:var(--rom) 0;background:var(--band)}
.pakker-topp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3vw;align-items:end}
.pakke-rad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.12vw,30px);margin-top:clamp(32px,3vw,84px);list-style:none}
.pakke{display:flex;flex-direction:column;padding:clamp(22px,1.8vw,48px);border-radius:clamp(14px,.75vw,20px);background:var(--hvit);
  border:1px solid var(--linje);transition:box-shadow .3s var(--ease-ut),transform .3s var(--ease-ut)}
.pakke:hover{transform:translateY(-3px);box-shadow:0 26px 52px -30px rgba(9,9,28,.4)}
.pakke h3{font-family:var(--disp);font-weight:700;font-size:clamp(22px,1.6vw,44px);line-height:1.1;color:var(--blekk)}
.pris{display:flex;align-items:baseline;gap:.35em;margin-top:.55em;font-family:var(--disp);color:var(--blekk)}
.pris b{font-weight:700;font-size:clamp(38px,3vw,84px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pris span{font-size:var(--liten);color:var(--dus)}
.pris-ar{margin-top:.35em;font-size:var(--liten);color:var(--dus);font-variant-numeric:tabular-nums}
.pakke-sporsmal{margin-top:1.1em;font-size:var(--brod);line-height:1.4;font-weight:600;color:var(--blekk);text-wrap:balance}
.pakke-for{margin-top:.5em;font-size:var(--liten);line-height:1.5;color:var(--dus)}
.pakke ul{display:grid;gap:.6em;margin-top:1.2em;padding-top:1.2em;border-top:1px solid var(--linje);list-style:none}
.pakke li{display:flex;gap:.55em;font-size:clamp(15px,1vw,27px);line-height:1.42;color:var(--blekk-2)}
.pakke li .ik{flex:none;margin-top:.18em;color:var(--drift);font-size:1.05em}
.pakke-paa-vei{display:flex;flex-wrap:wrap;align-items:center;gap:.5em;margin-top:1em;font-size:var(--liten);color:var(--dus)}
.pakke .lenke{margin-top:auto;padding-top:1.5em;font-size:clamp(16px,1.05vw,28px)}
.pakker-bunn{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1em 2em;margin-top:clamp(24px,2.2vw,60px)}
.pakker-bunn p{font-size:var(--liten);color:var(--dus);max-width:70ch}

/* =============================================================================
   Bytt uten stress
   ============================================================================= */
.bytt{padding-top:var(--rom)}
.steg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,84px);margin-top:clamp(32px,3vw,84px);list-style:none;counter-reset:steg}
.steg li{counter-increment:steg;padding-top:clamp(18px,1.4vw,40px);border-top:2px solid var(--blekk)}
.steg li::before{content:counter(steg);display:block;font-family:var(--disp);font-weight:700;font-size:clamp(40px,3.4vw,96px);
  line-height:1;color:var(--fiolett);font-variant-numeric:tabular-nums}
.steg h3{margin-top:.5em;font-family:var(--disp);font-weight:700;font-size:clamp(21px,1.5vw,42px);line-height:1.15;color:var(--blekk);text-wrap:balance}
.steg p{margin-top:.55em;font-size:var(--brod);line-height:1.5;color:var(--blekk-2);max-width:34ch}

/* =============================================================================
   Visjonen
   ============================================================================= */
.visjon{padding-top:var(--rom)}
.visjon-rad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,84px);margin-top:clamp(32px,3vw,84px)}
.visjon-rad h3{display:flex;align-items:center;gap:.6em;font-family:var(--disp);font-weight:700;font-size:clamp(20px,1.4vw,38px);color:var(--blekk)}
.visjon-rad h3 .status{font-size:clamp(15px,1.05vw,28px)}
.visjon-rad ul{margin-top:.8em;list-style:none}
.visjon-rad li{padding:.72em 0;border-top:1px solid var(--linje);font-size:clamp(16px,1.08vw,29px);line-height:1.4;color:var(--blekk-2)}
.visjon-rad li:last-child{border-bottom:1px solid var(--linje)}
.visjon-bunn{margin-top:clamp(28px,2.6vw,72px)}

/* =============================================================================
   Kontakt
   ============================================================================= */
.kontakt{margin-top:var(--rom);padding:var(--rom) 0;background:var(--band)}
.kontakt-inn{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,140px);align-items:start}
.ring{display:inline-block;margin-top:clamp(24px,2vw,56px);font-family:var(--disp);font-weight:700;font-size:clamp(34px,3vw,84px);
  line-height:1;color:var(--blekk);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.ring:hover{color:var(--fiolett)}
.epost{display:inline-block;margin-top:.7em;font-size:var(--brod);color:var(--blekk-2);text-decoration:underline;
  text-underline-offset:.24em;text-decoration-thickness:.07em;text-decoration-color:var(--linje-sterk)}
.epost:hover{color:var(--fiolett);text-decoration-color:currentColor}
.skjema{display:grid;gap:clamp(14px,1.1vw,30px);padding:clamp(22px,2.2vw,60px);border-radius:clamp(14px,.75vw,20px);
  background:var(--hvit);border:1px solid var(--linje)}
.felt-par{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.1vw,30px)}
.felt{display:grid;gap:.4em}
.felt label{font-family:var(--disp);font-weight:600;font-size:clamp(15px,1vw,27px);color:var(--blekk)}
.felt input,.felt textarea{width:100%;font:inherit;font-size:clamp(16px,1.05vw,28px);color:var(--blekk);background:var(--hvit);
  border:1.5px solid var(--linje-sterk);border-radius:clamp(10px,.5vw,14px);padding:.7em .85em;transition:border-color .15s ease,box-shadow .15s ease}
.felt textarea{resize:vertical;min-height:6.5em}
.felt input:hover,.felt textarea:hover{border-color:rgba(9,9,28,.42)}
.felt input:focus,.felt textarea:focus{outline:none;border-color:var(--fiolett);box-shadow:0 0 0 3px rgba(74,40,227,.2)}
.felt [aria-invalid="true"]{border-color:var(--feil);box-shadow:0 0 0 3px rgba(180,35,24,.14)}
.hjelp{font-size:clamp(13px,.82vw,22px);color:var(--dus)}
.honning{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.skjema .knapp{justify-self:start;height:clamp(50px,3.4vw,92px);padding:0 1.5em;font-size:clamp(16px,1.15vw,31px)}
.skjema .knapp[disabled]{opacity:.65;cursor:progress}
#skjema-svar{display:flex;align-items:flex-start;gap:.5em;font-size:var(--brod);line-height:1.45}
#skjema-svar:empty{display:none}
#skjema-svar:focus{outline:none}
.svar-ok{color:var(--drift)}
.svar-feil{color:var(--feil)}
.svar-dus{color:var(--dus)}
.personvern{font-size:clamp(13px,.82vw,22px);line-height:1.5;color:var(--dus)}
.personvern a{color:var(--blekk-2);text-decoration:underline;text-underline-offset:.2em}

/* =============================================================================
   Bunnen
   ============================================================================= */
.bunn{padding:clamp(40px,3.4vw,96px) 0 clamp(32px,2.4vw,64px);border-top:1px solid var(--linje)}
.bunn-inn{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,84px)}
.bunn .merke{position:static;width:auto;min-width:0;padding:0;gap:.55em;font-size:clamp(22px,1.5vw,40px)}
.bunn .merke img{height:1.25em}
.bunn h2{font-family:var(--disp);font-weight:700;font-size:var(--liten);color:var(--blekk);letter-spacing:.01em}
.bunn ul{display:grid;gap:.5em;margin-top:.8em;list-style:none}
.bunn li,.bunn p{font-size:var(--liten);line-height:1.5;color:var(--dus)}
.bunn a{color:var(--blekk-2)}
.bunn a:hover{color:var(--fiolett)}
.org{grid-column:1/-1;padding-top:clamp(20px,1.6vw,44px);border-top:1px solid var(--linje)}

/* =============================================================================
   Filmen i bevegelse: bare når html.film-levende er satt (JavaScript, nok
   høyde, og ingen ønske om mindre bevegelse). Verdiene settes per bilde av
   skriptet nederst på forsida; her står bare rammen.
   ============================================================================= */
html.film-levende .kap{height:220vh}
html.film-levende .kap-scene{position:sticky;top:0;height:100svh;min-height:0;align-self:start}
html.film-levende .kap-tekstramme{position:sticky;top:0;height:100svh;align-self:start}
html.film-levende .kap-gate{display:block}
html.film-levende .kap-naer{opacity:0}
html.film-levende .kap-gate img,html.film-levende .kap-naer img{will-change:transform}
html.film-levende .kap-sloer,html.film-levende .kap-tekstramme,html.film-levende .kap-tlf{opacity:0}
html.film-levende [data-trinn]{opacity:0;transform-origin:50% 0}

/* =============================================================================
   Smale skjermer
   ============================================================================= */
@media (max-width:1023px){
  .film-topp,.alt-topp,.pakker-topp{grid-template-columns:1fr;gap:16px}
  .film-topp .ingress-b{justify-self:start}
  .kap{display:flex;flex-direction:column}
  .kap-scene{order:0;min-height:0;height:min(80svh,700px)}
  .kap-tekstramme{order:1;display:block;padding:26px var(--kant) 48px;background:var(--hvit);pointer-events:auto}
  .kap-tekst{max-width:36em}
  .kap-sloer{background:linear-gradient(0deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 30%)}
  .kap-innhold{display:flex;align-items:center;justify-content:center;padding:calc(var(--meny-h) + 52px) var(--kant) 18px}
  .tlf{--b:max(180px,min(58vw,250px,calc((100svh - var(--meny-h) - 150px) * .4615)))}
  html.film-levende .kap{height:auto}
  html.film-levende .kap-scene{align-self:stretch}
  html.film-levende .kap-tekstramme{position:relative;top:auto;height:auto;opacity:1;margin-top:90svh;
    border-radius:22px 22px 0 0;box-shadow:0 -22px 44px -28px rgba(9,9,28,.4)}
  .flyt{display:none}
  .kap-stempel{right:auto;left:var(--kant);top:calc(var(--meny-h) + 12px)}
  .forklaring{grid-template-columns:1fr 1fr;gap:18px 20px}
  .pakke-rad{grid-template-columns:1fr 1fr}
  .steg,.visjon-rad{grid-template-columns:1fr}
  .kontakt-inn{grid-template-columns:1fr}
  .bunn-inn{grid-template-columns:1fr 1fr}
  .bunn-inn > :first-child{grid-column:1/-1}
}
@media (max-width:640px){
  .pakke-rad{grid-template-columns:1fr}
  .felt-par{grid-template-columns:1fr}
  .forklaring{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .pakke:hover,.kapittel:hover{transform:none}
  .lenke:hover .ik{transform:none}
}

/* =============================================================================
   Åpningsbildet og menyen på nettbrett og mobil. Fasiten er tegnet for en bred
   skjerm; under 1024 px står teksten øverst på hvitt og gata under, så teksten
   aldri ligger oppå et travelt bilde.
   ============================================================================= */
.meny-veksle{display:none}
@media (max-width:899px){
  .scene{display:flex;flex-direction:column;height:auto;min-height:0;padding-top:var(--meny-h);background:var(--hvit)}
  .scene-tekst{position:relative;left:auto;top:auto;width:auto;padding:clamp(24px,5vw,44px) var(--kant) clamp(22px,4vw,36px)}
  .scene h1{font-size:clamp(36px,7.4vw,64px);line-height:1.04}
  .ingress{margin-top:14px;max-width:34em;font-size:clamp(17px,2.4vw,21px)}
  .scene-knapper{flex-wrap:wrap;gap:10px;margin:22px 0 0}
  .scene-knapper .knapp{flex:1 1 160px;width:auto;min-width:0;max-width:260px;height:52px;font-size:17px}
  .prislinje{margin:16px 0 0;font-size:15px}
  .scene-bilde{position:relative;inset:auto;height:min(50svh,480px);aspect-ratio:auto}
  .scene-bilde img{object-position:66% 60%}
  .kapitler{height:auto;min-height:0;padding:14px var(--kant) 4px}
  .kapitler ol{grid-template-columns:minmax(0,1fr);gap:10px}
  .kapitler .kapittel{grid-template-columns:40% minmax(0,1fr);height:auto;min-height:104px}
  .kapitler .kapittel-tekst{padding:12px 14px}
  .kapittel time{font-size:14px}
  .kapittel b{margin-top:6px;font-size:18px}
  .kapittel-tekst > span{margin-top:2px;font-size:16px}
}
@media (max-width:899px) and (orientation:landscape){
  .scene-bilde{aspect-ratio:16/9;max-height:48svh}
  .scene h1{font-size:clamp(34px,5.2vw,56px)}
  .scene-tekst{padding-top:22px;padding-bottom:20px}
}
/* Stående mobil og nettbrett får et eget utsnitt av gata (gate-mobil-*, 2060×1648 rundt Lys & Lokk
   og Pizza Forno), valgt med media-attributtet i <picture>. Utsnittet er sentrert der 66 % pekte før. */
@media (max-width:899px) and (orientation:portrait){
  .scene-bilde img{object-position:50% 60%}
}
@media (max-width:860px){
  .meny{height:var(--meny-h);background:rgba(255,255,255,.96);box-shadow:0 1px 0 var(--linje);
    -webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}
  .meny-inn{position:relative;height:100%;padding:0 var(--kant)}
  .merke{top:0;width:auto;min-width:0;padding-left:0;gap:10px;font-size:23px}
  .merke img{height:30px}
  .meny .knapp.meny-knapp{width:auto;height:40px;padding:0 14px;font-size:15px}
  .meny-veksle{display:inline-grid;place-items:center;width:44px;height:44px;margin-left:6px;margin-right:-8px;
    border-radius:12px;color:var(--blekk);font-size:26px}
  .meny-veksle:hover{background:var(--band)}
  .meny-lenker{display:none;position:absolute;top:100%;left:0;right:0;margin:0;padding:6px var(--kant) 14px;
    flex-direction:column;gap:0;background:var(--hvit);box-shadow:0 1px 0 var(--linje),0 24px 40px -24px rgba(9,9,28,.35);font-size:18px}
  .meny-lenker a{min-height:52px;border-bottom:1px solid var(--linje)}
  .meny-lenker a:last-child{border-bottom:0}
  /* Menylinja har backdrop-filter, og da måles et fast barn fra linja, ikke fra
     skjermen. Arket står derfor rett under linja med skjermens høyde. */
  .meny.apen .meny-lenker{display:flex;position:absolute;top:100%;height:calc(100svh - var(--meny-h));overflow-y:auto;
    padding:8px var(--kant) calc(24px + env(safe-area-inset-bottom));font-family:var(--disp);font-weight:600;font-size:24px;
    box-shadow:0 1px 0 var(--linje)}
  .meny.apen .meny-lenker > a{min-height:64px}
  .meny-ark-bunn{display:grid;gap:12px;margin-top:auto;padding-top:28px}
  .meny .meny-ark-bunn .knapp{width:100%;height:54px;font-size:18px}
  .meny-ark-bunn .meny-ring{display:flex;align-items:center;justify-content:center;min-height:48px;font-family:var(--tekst);font-weight:600;font-size:18px;color:var(--blekk);border:0}
  .meny.apen .meny-lenker{animation:ark-inn .22s var(--ease-ut)}
  html.meny-apen{overflow:hidden}
}
@keyframes ark-inn{from{opacity:0;transform:translate3d(0,-8px,0)}to{opacity:1;transform:none}}
.meny-ark-bunn{display:none}
@media (max-width:860px){.meny.apen .meny-ark-bunn{display:grid}}
@media (prefers-reduced-motion:reduce){.meny.apen .meny-lenker{animation:none}}

/* Fra 900 til 1279 px: samme bilde som fasiten, bare mindre. Høyden på gata
   følger bredden, så overskriften står over himmelen og kortene er synlige. */
@media (min-width:900px) and (max-width:1279px){
  .scene{min-height:0}
  .scene h1{font-size:clamp(34px,4.204vw,120px)}
  .ingress{font-size:clamp(15px,1.339vw,40px);max-width:36vw}
  .scene-knapper .knapp{height:clamp(44px,3.795vw,104px);font-size:clamp(15px,1.339vw,38px)}
  .scene-knapper .k-fiolett{min-width:160px}
  .scene-knapper .k-kant{min-width:150px}
  .prislinje{font-size:clamp(13px,.967vw,28px)}
  .kapitler{min-height:0;height:auto;padding-bottom:.9vw}
  .kapittel{min-height:0;height:max(9.077vw,104px)}
}

/* Telefonen står ikke likt i alle fire kapitlene: i klesbutikken og på
   kjøkkenet er den vinklet inn mot lyset i bildet. */
#kl-1230 .kap-tlf .tlf{transform:perspective(1800px) rotateY(-15deg) rotateX(4deg) rotateZ(1.2deg);
  box-shadow:inset 0 0 0 calc(var(--b) * .007) #44444E,-2px 3px 6px rgba(9,9,28,.2),calc(var(--b) * -.1) calc(var(--b) * .12) calc(var(--b) * .24) calc(var(--b) * -.07) rgba(9,9,28,.48)}
#kl-1745 .kap-tlf .tlf{transform:perspective(1800px) rotateY(13deg) rotateX(5deg) rotateZ(-1.6deg);
  box-shadow:inset 0 0 0 calc(var(--b) * .007) #44444E,2px 3px 6px rgba(9,9,28,.2),calc(var(--b) * .1) calc(var(--b) * .12) calc(var(--b) * .24) calc(var(--b) * -.07) rgba(9,9,28,.48)}
@media (max-width:1023px){
  #kl-1230 .kap-tlf .tlf{transform:perspective(1400px) rotateY(-10deg) rotateX(3deg)}
  #kl-1745 .kap-tlf .tlf{transform:perspective(1400px) rotateY(9deg) rotateX(3deg)}
}

/* =============================================================================
   Undersidene (pakkene, funksjoner, bransjer, visjon, personvern, frisør).
   Samme verden som forsida: solfylte bilder, hvitt for innhold, fiolett for
   handling, statusmerkene ved hver funksjon. Byggeklossene her brukes av
   nettside/bygg-sider.js.
   ============================================================================= */
.underside .meny{background:rgba(255,255,255,.95);box-shadow:0 1px 0 var(--linje);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}
.meny-lenker a[aria-current="page"]{color:var(--fiolett);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.45em}
.sti{display:flex;flex-wrap:wrap;gap:.45em;font-size:var(--liten);color:var(--dus)}
.sti a{color:var(--blekk-2);text-decoration:underline;text-decoration-color:var(--linje-sterk);text-underline-offset:.2em}
.sti a:hover{color:var(--fiolett)}
.sti span[aria-hidden]{color:var(--svak)}

/* Toppen på en underside: bilde i hele bredden, tekst på venstre side, og en
   telefon med appen der bildet er rolig. */
.u-topp{position:relative;display:grid;min-height:max(640px,min(92svh,62vw));overflow:hidden;isolation:isolate;background:#EFE8DF}
.u-topp-bilde{position:absolute;inset:0}
.u-topp-bilde img{width:100%;height:100%;object-fit:cover;object-position:var(--bx,50%) var(--by,50%)}
/* Samme mobilutsnitt som på forsida (se gate-mobil-* i kx.css lenger ned): midtstilt, --bx gjelder bare den brede platen. */
@media (max-width:1023px) and (orientation:portrait){.u-topp-bilde img{object-position:50% var(--by,50%)}}
.u-topp-sloer{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.88) 30%,rgba(255,255,255,.4) 48%,rgba(255,255,255,0) 62%)}
.u-topp-inn{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,40fr) minmax(0,24fr) minmax(0,36fr);
  column-gap:2.4vw;align-items:center;padding:calc(var(--meny-h) + clamp(24px,2.6vw,72px)) var(--kant) clamp(36px,4vw,110px)}
.u-topp-tekst{grid-column:1;max-width:34em}
.u-topp h1{margin-top:.45em;font-family:var(--disp);font-weight:700;font-size:clamp(44px,4.6vw,128px);line-height:1;letter-spacing:-.02em;color:var(--blekk)}
.u-pris{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2em .5em;margin-top:.35em;font-family:var(--disp);color:var(--blekk)}
.u-pris b{font-weight:700;font-size:clamp(30px,2.6vw,72px);letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.u-pris span{font-size:var(--brod);color:var(--dus)}
.u-sporsmal{margin-top:1em;font-family:var(--disp);font-weight:600;font-size:clamp(20px,1.55vw,42px);line-height:1.25;color:var(--blekk);text-wrap:balance}
.u-for{margin-top:.6em;font-size:var(--brod);line-height:1.5;color:var(--blekk-2);text-wrap:pretty}
.u-knapper{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,1.8vw,48px)}
.u-topp .kap-tlf{grid-column:2}

/* Seksjoner på undersidene */
.u-seksjon{padding-top:var(--rom)}
.u-seksjon-topp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3vw;align-items:end;margin-bottom:clamp(28px,2.6vw,72px)}
.u-band{margin-top:var(--rom);padding:var(--rom) 0;background:var(--band)}
.u-band + .u-seksjon{padding-top:var(--rom)}
.tekst-smal{max-width:44em}
.tekst-smal p,.tekst-smal li{font-size:var(--brod);line-height:1.6;color:var(--blekk-2)}
.tekst-smal p + p{margin-top:.9em}
.tekst-smal h2{margin-top:2em;font-family:var(--disp);font-weight:700;font-size:clamp(24px,1.8vw,48px);line-height:1.15;color:var(--blekk)}
.tekst-smal h2:first-child{margin-top:0}
.tekst-smal ul{margin-top:.6em;padding-left:1.2em}
.tekst-smal li + li{margin-top:.35em}
.tekst-smal a{color:var(--fiolett);text-decoration:underline;text-underline-offset:.2em}

/* En dag med pakka: tre bilder i rekkefølge */
.tre-bilder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,64px);list-style:none}
.tre-bilder > li{display:grid;grid-template-rows:auto auto 1fr;gap:.7em;align-content:start}
.tre-bilder time{font-family:var(--disp);font-weight:700;font-size:clamp(24px,1.9vw,52px);line-height:1;color:var(--fiolett);font-variant-numeric:tabular-nums}
.tre-bilder h3{font-family:var(--disp);font-weight:700;font-size:clamp(20px,1.4vw,38px);line-height:1.2;color:var(--blekk);text-wrap:balance}
.tre-bilder p.tekst{font-size:var(--brod);line-height:1.5;color:var(--blekk-2);max-width:30em}
.tre-bilder .tlf{--b:clamp(220px,17vw,420px);margin-top:1.1em}
.tre-bilder .eksempel{margin:.9em 0 0}
.u-scene{display:grid;justify-items:start}

/* Det som ikke er med, og sammenligningen */
.ikke-med{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:3vw;align-items:start}
.ikke-med .linjer{margin-top:0}

/* Spørsmål og svar */
.svar{max-width:56em;border-top:1px solid var(--linje)}
.svar details{border-bottom:1px solid var(--linje)}
.svar summary{display:flex;align-items:center;justify-content:space-between;gap:1em;min-height:56px;padding:.9em 0;cursor:pointer;
  font-family:var(--disp);font-weight:600;font-size:clamp(18px,1.25vw,34px);line-height:1.3;color:var(--blekk);list-style:none}
.svar summary::-webkit-details-marker{display:none}
.svar summary .ik{flex:none;font-size:1.1em;color:var(--fiolett);transition:transform .25s var(--ease-ut)}
.svar details[open] summary .ik{transform:rotate(45deg)}
.svar summary:hover{color:var(--fiolett)}
.svar details p{padding:0 0 1.2em;max-width:44em;font-size:var(--brod);line-height:1.6;color:var(--blekk-2)}

/* Avslutningen på hver side */
.u-slutt{margin-top:var(--rom);padding:var(--rom) 0;background:var(--band)}
.u-slutt-inn{display:grid;grid-template-columns:minmax(0,1.2fr) auto;gap:3vw;align-items:end}
.u-slutt .ingress-b{margin-top:.6em}

/* Sammenligningstabellen på /pakker */
.tabell-ramme{overflow-x:auto;border:1px solid var(--linje);border-radius:clamp(14px,.75vw,20px);background:var(--hvit);-webkit-overflow-scrolling:touch}
.sammenligning{width:100%;min-width:760px;border-collapse:collapse;font-size:clamp(15px,1vw,27px)}
.sammenligning th,.sammenligning td{padding:.85em 1em;border-bottom:1px solid var(--linje);text-align:left;vertical-align:top;line-height:1.4}
.sammenligning thead th{position:sticky;top:0;z-index:1;background:var(--hvit);font-family:var(--disp);font-weight:700;color:var(--blekk);vertical-align:bottom}
.sammenligning thead th small{display:block;margin-top:.2em;font-family:var(--tekst);font-weight:500;font-size:.86em;color:var(--dus);font-variant-numeric:tabular-nums}
.sammenligning tbody th{position:sticky;left:0;background:var(--hvit);font-weight:500;color:var(--blekk-2);min-width:15em}
.sammenligning td{text-align:center;color:var(--dus)}
.sammenligning td .ik{font-size:1.25em;color:var(--drift)}
.sammenligning .gruppe th{padding-top:1.4em;font-family:var(--disp);font-weight:700;color:var(--blekk);background:var(--band)}
.sammenligning .gruppe td{background:var(--band)}
.sammenligning tr:last-child th,.sammenligning tr:last-child td{border-bottom:0}

/* Bransjekort */
.bransjer-rad{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,clamp(300px,26vw,640px)),1fr));gap:clamp(14px,1.2vw,32px);list-style:none}
.bransje{display:flex;flex-direction:column;gap:.6em;padding:clamp(22px,1.8vw,48px);border-radius:clamp(14px,.75vw,20px);background:var(--hvit);border:1px solid var(--linje)}
.bransje h3{display:flex;align-items:center;gap:.55em;font-family:var(--disp);font-weight:700;font-size:clamp(21px,1.5vw,40px);line-height:1.15;color:var(--blekk)}
.bransje h3 .ik{display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:.5em;background:var(--fiolett-lys);color:var(--fiolett);font-size:.8em}
.bransje p{font-size:var(--brod);line-height:1.5;color:var(--blekk-2)}
.bransje .forbehold{font-size:var(--liten);color:var(--arbeid)}
.bransje .lenke{margin-top:auto;padding-top:.6em}

@media (max-width:1023px){
  .u-topp{display:flex;flex-direction:column;min-height:0;background:var(--hvit)}
  .u-topp-bilde{position:relative;inset:auto;order:0;height:min(64svh,560px);margin-top:var(--meny-h)}
  .u-topp-sloer{display:none}
  .u-topp-inn{position:static;display:block;order:1;padding:26px var(--kant) 44px}
  .u-topp .kap-tlf{position:absolute;z-index:3;top:calc(var(--meny-h) + 24px);left:50%;transform:translateX(-50%)}
  .u-topp .tlf{--b:clamp(160px,36vw,230px)}
  .u-topp .eksempel{display:none}
  .u-seksjon-topp,.ikke-med,.u-slutt-inn{grid-template-columns:1fr;gap:16px}
  .tre-bilder{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(78vw,340px);overflow-x:auto;
    scroll-snap-type:x mandatory;padding-bottom:12px;margin-right:calc(var(--kant) * -1);padding-right:var(--kant)}
  .tre-bilder > li{scroll-snap-align:start}
  .tre-bilder .tlf{--b:min(62vw,250px)}
}
@media (prefers-reduced-motion:reduce){
  .svar summary .ik{transition:none}
}

/* Små øyeblikk i telefonene på undersidene: kommer inn når bildet ses */
.u-anim [data-inn]{opacity:0;transform:translate3d(0,.9em,0) scale(.97);transform-origin:50% 0;
  transition:opacity .45s var(--ease-ut),transform .6s var(--ease-ut)}
.u-anim .sett [data-inn]{opacity:1;transform:none}
.u-anim .sett [data-inn="2"]{transition-delay:.35s}
.u-anim .sett [data-inn="3"]{transition-delay:.7s}

/* =============================================================================
   Slutten: den samme gata ved stengetid. Kontaktdelen åpner på kveldsbildet,
   med overskriften over himmelen og skjemaet på et hvitt kort.
   ============================================================================= */
.kontakt.slutt{position:relative;isolation:isolate;overflow:hidden;background:#F1E7DC;
  padding:clamp(96px,8vw,220px) 0 var(--rom);min-height:max(760px,56vw)}
.slutt-bilde,.slutt-bilde img{position:absolute;inset:0;width:100%;height:100%}
.slutt-bilde{z-index:-2}
.slutt-bilde img{object-fit:cover;object-position:38% 42%}
.slutt-sloer{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,250,244,.62) 0%,rgba(255,250,244,.42) 28%,rgba(255,250,244,0) 50%)}
.kontakt.slutt .skjema{box-shadow:0 2px 6px rgba(9,9,28,.08),0 40px 80px -40px rgba(9,9,28,.45)}
@media (max-width:1023px){
  .kontakt.slutt{min-height:0;padding:0 0 var(--rom);background:var(--band)}
  .slutt-bilde{position:relative;display:block;height:min(46svh,420px)}
  .slutt-bilde img{position:absolute}
  .slutt-sloer{display:none}
  .kontakt.slutt .kontakt-inn{padding-top:28px}
}

/* =============================================================================
   Flere appskjermer til undersidene, tegnet etter appen med ordlyden fra
   koden: SMS-tråden, bestillingen, oversikten, vaktplanen, klokka og timene.
   Samme regel som på forsida: 1 em er appens brødtekst.
   ============================================================================= */
.sms{background:#fff;color:#111}
.sms-topp{display:grid;justify-items:center;gap:.35em;padding:3.5em 1em .8em;border-bottom:1px solid #E6E6EA;background:#F7F7F8}
.sms-topp span{display:grid;place-items:center;width:2.6em;height:2.6em;border-radius:50%;background:#9AA0AA;color:#fff;font-weight:700}
.sms-topp b{font-weight:600;font-size:.87em}
.sms-trad{display:grid;gap:.55em;padding:1em .85em}
.sms-tid{justify-self:center;font-size:.73em;color:#8A8A90}
.sms-boble{justify-self:start;max-width:86%;padding:.62em .8em;border-radius:1.15em;border-bottom-left-radius:.35em;background:#E9E9EB;
  font-size:.93em;line-height:1.38;overflow-wrap:anywhere}
.sms-boble u{color:#0A61D8;text-decoration-thickness:1px}

.app-hvit{--a-bunn:#F7EEE7;--a-tekst:#241A1D;--a-dus:#6E5A60;--a-aksent:#9A4F63;--a-pa-aksent:#fff;--a-kort:#FFFFFF;--a-skille:#E4D3CF}
.ui{padding:3.3em 1.15em 1em}
.ui-merke{font-weight:700;font-size:.73em;letter-spacing:.127em;text-transform:uppercase;color:var(--a-dus)}
.ui-tittel{margin-top:.25em!important;font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:1.6em;line-height:1.15;letter-spacing:-.01em;color:var(--a-tekst)}
.ui-under{margin-top:.25em!important;font-size:.87em;color:var(--a-dus)}
.ui-strek{display:grid;grid-template-columns:repeat(3,1fr);gap:.3em;margin-top:.55em}
.ui-strek i{height:.28em;border-radius:1em;background:var(--a-skille)}
.ui-strek i.pa{background:var(--a-aksent)}
.ui-brikke{display:flex;align-items:center;gap:.45em;margin-top:.9em!important;padding:.6em .8em;border-radius:.9em;background:var(--a-kort);
  box-shadow:inset 0 0 0 1px var(--a-skille);font-size:.9em}
.ui-brikke .ik{color:var(--a-aksent)}
.ui-brikke em{margin-left:auto;font-style:normal;font-weight:600;color:var(--a-aksent)}
.ui-dager{display:grid;grid-template-columns:repeat(4,1fr);gap:.4em;margin-top:.9em}
.ui-dager span{display:grid;justify-items:center;padding:.5em .2em;border-radius:.8em;background:var(--a-kort);box-shadow:inset 0 0 0 1px var(--a-skille);
  font-size:.8em;line-height:1.3;color:var(--a-tekst)}
.ui-dager span b{font-weight:600}
.ui-dager .pa{background:var(--a-aksent);color:#fff;box-shadow:none}
.ui-tider{display:grid;grid-template-columns:repeat(3,1fr);gap:.45em;margin-top:.8em}
.ui-tider span{padding:.62em 0;border-radius:.75em;text-align:center;background:var(--a-kort);box-shadow:inset 0 0 0 1px var(--a-skille);
  font-weight:600;font-size:.93em;font-variant-numeric:tabular-nums}
.ui-tider .pa{background:var(--a-aksent);color:#fff;box-shadow:none}
.ui-kort{margin-top:.85em;padding:.85em .95em;border-radius:.95em;background:var(--a-kort);box-shadow:inset 0 0 0 1px var(--a-skille)}
.ui-kort :is(h4,.ui-h4){font-weight:600;font-size:1.02em;line-height:1.3;color:var(--a-tekst)}
.ui-rad{display:flex;align-items:center;justify-content:space-between;gap:.8em;padding:.55em 0;border-top:1px solid var(--a-skille);font-size:.93em}
.ui-rad:first-of-type{border-top:0}
.ui-rad b{font-weight:600;font-variant-numeric:tabular-nums}
.ui-rad small{display:block;font-size:.82em;color:var(--a-dus)}
.ui-pille{display:inline-flex;align-items:center;gap:.3em;padding:.22em .6em;border-radius:1em;font-size:.78em;font-weight:600;
  background:#E5F2E9;color:#166534}
.ui-pille.gul{background:#FBF0D9;color:#8A5300}
.ui-pille.aks{background:#F4E4E7;color:#8A4258}
.ui-fliser{display:grid;grid-template-columns:1fr 1fr;gap:.5em;margin-top:.9em}
.ui-flis{padding:.75em .8em;border-radius:.9em;background:var(--a-kort);box-shadow:inset 0 0 0 1px var(--a-skille)}
.ui-flis span{display:block;font-size:.78em;color:var(--a-dus)}
.ui-flis b{display:block;margin-top:.15em;font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:1.45em;font-variant-numeric:tabular-nums;color:var(--a-tekst)}
.ui-flis small{display:block;margin-top:.1em;font-size:.72em;line-height:1.3;color:var(--a-dus)}
.ui-knapp{display:flex;align-items:center;justify-content:center;gap:.45em;height:3.1em;margin-top:.9em;border-radius:.95em;
  background:var(--a-aksent);color:#fff;font-weight:600}
.ui-knapp.kant{background:transparent;color:var(--a-aksent);box-shadow:inset 0 0 0 1.5px var(--a-aksent)}
.ui-stor{margin-top:.4em!important;font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:1.3em;line-height:1.25;color:var(--a-tekst)}
.ui-tekst{margin-top:.35em!important;font-size:.88em;line-height:1.45;color:var(--a-dus)}
.ui-dag{margin-top:.8em;padding:.75em .9em;border-radius:.95em;background:var(--a-kort);box-shadow:inset 0 0 0 1px var(--a-skille)}
.ui-dag :is(h4,.ui-h4){display:flex;justify-content:space-between;font-weight:600;font-size:.95em}
.ui-dag :is(h4,.ui-h4) span{font-weight:500;color:var(--a-dus)}

/* SMS-telefonene i «En dag med pakka»: lavere, tonet ut nederst, og større tekst, for ordlyden er selve beviset */
.tre-bilder .tlf.utsnitt{height:calc(var(--b) * 1.32);-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}
.tre-bilder .sms{font-size:calc(var(--b) * .047)}
.tre-bilder .sms .sms-topp{padding-top:3em}

/* Et ekte skjermbilde i telefonrammen */
.tlf-skjerm .tlf-bilde{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}

/* Undersider uten toppbilde, og tre punkter i rad med strek over */
.u-start{padding-top:calc(var(--meny-h) + clamp(32px,4vw,110px))}
.u-start .u-seksjon-topp{margin-top:clamp(14px,1.2vw,32px)}
.u-h1{font-size:clamp(44px,4.6vw,128px);line-height:1}
.pakke h2{font-family:var(--disp);font-weight:700;font-size:clamp(22px,1.6vw,44px);line-height:1.1;color:var(--blekk)}
.punkter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,84px);list-style:none}
.punkter li{padding-top:clamp(18px,1.4vw,40px);border-top:2px solid var(--blekk)}
.punkter h3{font-family:var(--disp);font-weight:700;font-size:clamp(21px,1.5vw,42px);line-height:1.15;color:var(--blekk);text-wrap:balance}
.punkter p{margin-top:.55em;font-size:var(--brod);line-height:1.5;color:var(--blekk-2);max-width:34ch}
.merknad{margin-top:1em;font-size:var(--liten);line-height:1.5;color:var(--dus)}
@media (max-width:1023px){.punkter{grid-template-columns:1fr}}

/* Avstander som før sto i HTML-en */
.svar-tittel{margin-bottom:clamp(20px,2vw,48px)}
.ikke-med .ingress-b{margin-top:.6em}
.lenke-rad{margin-top:1.2em}
.tre-bilder + .eksempel{margin-top:28px}
.ui-tittel + .ui-rad{margin-top:.6em}
.ui-strek + .ui-tittel{margin-top:.6em!important}
.ui-dager.tre{grid-template-columns:repeat(3,1fr)}
.linjer-smal{max-width:62em}

/* Bransjekortene: pakka og demoene nederst i kortet */
.bransje .bransje-pakke{margin-top:auto;padding-top:.5em;font-size:var(--liten);color:var(--dus)}
.bransje .bransje-pakke .lenke{margin:0;padding:0}
.bransje .bransje-demoer{display:flex;flex-wrap:wrap;gap:.35em 1.1em;font-size:var(--liten)}
.bransje .bransje-demoer .lenke{margin:0;padding:0}
.bransje .forbehold-dus{font-size:var(--liten);color:var(--dus)}
/* Visjonssida: fire punkter med merke over tittelen */
.punkter.fire{grid-template-columns:repeat(4,minmax(0,1fr))}
.punkter li > .status{display:inline-flex;margin:0 0 .8em}
@media (min-width:1024px) and (max-width:1279px){.punkter.fire{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1023px){.punkter.fire{grid-template-columns:1fr}}

/* Telefonbildene på frisørsida: «Hvem?» i bestillingen, og fargejournalen på kundekortet */
.ui-etikett{margin-top:1.15em!important}
.ui-hvem{display:flex;gap:.58em;margin:.55em -1.15em 0!important;padding:0 1.15em;overflow:hidden}
.ui-hvem span{flex:0 0 8.6em;display:grid;justify-items:center;align-content:center;gap:.2em;height:9.2em;padding:.6em .5em;border-radius:1.05em;
  background:var(--a-kort);box-shadow:inset 0 0 0 1px var(--a-skille);text-align:center}
.ui-hvem span.pa{background:#F4E4E7;box-shadow:inset 0 0 0 1.5px var(--a-aksent)}
.ui-hvem i{display:grid;place-items:center;width:3.4em;height:3.4em;margin-bottom:.25em;border-radius:50%;box-shadow:inset 0 0 0 2px var(--a-skille);
  font-style:normal;font-weight:700;font-size:1em;color:var(--a-dus)}
.ui-hvem span.pa i{box-shadow:inset 0 0 0 2px var(--a-aksent);color:var(--a-aksent)}
.ui-hvem b{font-weight:600;font-size:.86em;line-height:1.25;color:var(--a-tekst)}
.ui-hvem small{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.76em;color:var(--a-dus)}
.ui-journal{display:grid;gap:.55em}
.ui-journal-topp{display:flex;justify-content:space-between;gap:.6em;font-size:.78em;color:var(--a-dus)}
.ui-journal :is(h4,.ui-h4){margin-top:-.2em}
.ui-oppskrift{padding:.65em .75em;border-radius:.75em;background:#F4E4E7;box-shadow:inset 0 0 0 1px var(--a-skille);font-size:.9em;line-height:1.4;color:var(--a-tekst)}
.ui-oppskrift small{display:block;margin-bottom:.2em;font-weight:700;font-size:.78em;letter-spacing:.1em;text-transform:uppercase;color:var(--a-dus)}
.ui-felt{font-size:.9em;line-height:1.4;color:var(--a-tekst)}
.ui-felt small{display:block;font-size:.84em;color:var(--a-dus)}

/* Scenene: felles linjer på tvers av kolonnene, så telefonene starter likt */
.tre-bilder{grid-template-rows:repeat(4,auto);row-gap:0}
.tre-bilder > li{grid-row:span 4;grid-template-rows:subgrid;row-gap:.7em}

/* Personvern: lesesida */
.dok{display:grid;grid-template-columns:minmax(0,15em) minmax(0,46em);gap:clamp(28px,4vw,120px);align-items:start}
.dok-innhold{position:sticky;top:calc(var(--meny-h) + 28px);font-size:var(--liten);line-height:1.4}
.dok-innhold ol{display:grid;gap:.6em;padding-left:1.1em;border-left:1px solid var(--linje);list-style:none}
.dok-innhold a{color:var(--dus);text-decoration:none}
.dok-innhold a:hover{color:var(--fiolett)}
.dok-innhold a:focus-visible{outline:2px solid var(--fiolett);outline-offset:2px;border-radius:2px}
.dok-tekst section{scroll-margin-top:calc(var(--meny-h) + 24px)}
.dok-tekst section + section{margin-top:clamp(36px,3vw,80px);padding-top:clamp(36px,3vw,80px);border-top:1px solid var(--linje)}
.dok-tekst h2{font-family:var(--disp);font-weight:700;font-size:clamp(24px,1.9vw,52px);line-height:1.15;letter-spacing:-.01em;color:var(--blekk);text-wrap:balance}
.dok-tekst p{margin-top:.85em;font-size:var(--brod);line-height:1.6;color:var(--blekk-2);max-width:64ch}
.dok-tekst h2 + p{margin-top:.7em}
.lenke-tekst{color:var(--fiolett);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
.lenke-tekst:hover{text-decoration-thickness:2px}
.dok-rader{display:grid;grid-template-columns:minmax(0,10em) minmax(0,1fr);margin-top:1.3em;border-bottom:1px solid var(--linje)}
.dok-rader dt,.dok-rader dd{padding:1em 0;border-top:1px solid var(--linje);font-size:var(--brod);line-height:1.55}
.dok-rader dt{padding-right:1.4em;font-weight:600;color:var(--blekk)}
.dok-rader dd{color:var(--blekk-2)}
@media (max-width:1023px){
  .dok{grid-template-columns:1fr;gap:32px}
  .dok-innhold{position:static}
  .dok-rader{grid-template-columns:1fr}
  .dok-rader dd{padding-top:0;border-top:0}
}
.lenke-tekst[href^="tel:"]{white-space:nowrap}
.dok{padding-bottom:var(--rom)}
.kontakt-ingress{margin-top:.8em}
.bunn-om{margin-top:1em;max-width:34ch}

/* Undertittelen i H1 (søkefrasen i klartekst, under navnet på sida) */
.h1-under{display:block;margin-top:.4em;font-family:var(--disp);font-weight:600;font-size:clamp(21px,1.75vw,48px);
  line-height:1.15;letter-spacing:-.005em;color:var(--blekk-2);text-wrap:balance}
.u-h1 .h1-under{font-size:clamp(20px,1.5vw,42px)}
.u-topp h1.lang{font-size:clamp(40px,3.9vw,108px)}
/* Prisen brytes aldri midt i («1 199» og «kr» står sammen); «i måneden» går heller ned en linje */
.pris{flex-wrap:wrap;row-gap:.1em}
.pris b{white-space:nowrap}

/* «Se pakker» følger med mens filmen «En dag i gata» ruller forbi. Slås på fra kx.js. */
.flyt-pakker{position:fixed;right:var(--kant);bottom:clamp(16px,1.8vw,44px);z-index:40;display:inline-flex;align-items:center;gap:.45em;
  height:clamp(46px,3.1vw,84px);padding:0 1.3em;border-radius:999px;background:var(--blekk);color:#fff;font-family:var(--disp);font-weight:600;
  font-size:clamp(15px,1.08vw,30px);text-decoration:none;box-shadow:0 18px 40px -16px rgba(9,9,28,.55);
  opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .35s var(--ease-ut),transform .35s var(--ease-ut),background .2s ease}
.flyt-pakker.vis{opacity:1;transform:none;pointer-events:auto}
.flyt-pakker:hover{background:var(--fiolett)}
.flyt-pakker .ik{font-size:.95em}
@media (max-width:899px){
  .flyt-pakker{right:auto;left:50%;transform:translate(-50%,14px)}
  .flyt-pakker.vis{transform:translate(-50%,0)}
}
@media (prefers-reduced-motion:reduce){.flyt-pakker{transition:none}}
/* Forklaringa til «Alt i én app»: én linje, bare om merkene som ikke er i drift. */
.forklaring-kort{display:flex;flex-wrap:wrap;align-items:center;gap:.5em .55em;margin-top:clamp(24px,2.2vw,60px);
  padding:clamp(14px,1.1vw,32px) 0;border-top:1px solid var(--linje);border-bottom:1px solid var(--linje);
  font-size:var(--liten);line-height:1.45;color:var(--dus)}