/* ---------------------------------------------------------------------------
 * Bruksområde-sidene, i POVs formspråk.
 *
 * Dette arket er med vilje ikke Knips' eget. Eieren av pov.camera har gitt
 * tillatelse til å kopiere oppsettet og designet, og det er det som er gjort:
 * målene under er lest av deres egen side ved 1280 piksler, ikke gjettet.
 *
 *   innholdsbredde   976 px, altså 152 px luft på hver side ved 1280
 *   bakgrunn         #1E1E1E     tekst   #FCFCFE
 *   flate            #343434     panel   #26262A
 *   aksent           #5756CE
 *   hårstrek         hvit på 0,07 · 0,10 · 0,12 · 0,15
 *   h1               44 px, versaler, 1,1 px sperring, 0,95 i linjeavstand
 *   h2               21 px, halvfet
 *   brødtekst        19 px, 1,5 i linjeavstand, hvit på 0,60
 *
 * **Det som ikke er kopiert, og hvorfor.** Kundeomtalene deres står ikke her.
 * De er ekte menneskers ord om et annet produkt, og de menneskene har ikke sagt
 * ja til å stå som Knips-referanser — en tillatelse fra den som eier nettstedet
 * dekker ikke den som skrev omtalen. Fotografiene deres står heller ikke her,
 * av samme grunn: de viser andres bryllup. Fotoboksseksjonen er borte fordi
 * Knips ikke lager fotobok, og bloggseksjonen fordi det ikke finnes noe å
 * lenke til.
 *
 * Skriftene er Satoshi og Clash Display, hentet fra Fontshare, som er stedet de
 * lisensieres fra. POV bruker Satoshi og «Sink»; Sink finnes ikke på Fontshare
 * og er ikke deres å gi videre, så overskriftene står i Clash Display — som POV
 * også laster, og som ligger fritt tilgjengelig samme sted.
 *
 * Resten av nettstedet brukte home.css og appens formspråk. De to
 * arkene møtes aldri: ingen side laster begge.
 * ------------------------------------------------------------------------- */

@font-face {
  font-family: 'Satoshi';
  src: url('/assets/fonts/Satoshi-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/assets/fonts/Satoshi-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/assets/fonts/Satoshi-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/assets/fonts/Satoshi-900.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('/assets/fonts/ClashDisplay-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('/assets/fonts/ClashDisplay-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --pov-bg: #1e1e1e;
  --pov-flate: #343434;
  --pov-panel: #26262a;
  --pov-panel-aksent: #2e2d3e;
  --pov-tekst: #fcfcfe;
  --pov-dempet: rgba(252, 252, 254, 0.6);
  --pov-svak: rgba(252, 252, 254, 0.42);
  --pov-strek: rgba(252, 252, 254, 0.07);
  --pov-strek-2: rgba(252, 252, 254, 0.12);
  --pov-strek-3: rgba(252, 252, 254, 0.15);
  --pov-fyll: rgba(252, 252, 254, 0.07);
  --pov-aksent: #5756ce;
  /* Bevegelsen deres, målt: 67 elementer på fargeoverganger med
     cubic-bezier(0.4, 0, 0.2, 1) på 0,3 s, 25 på transform med 0,15 s, og
     ingen scroll-utløste inntoninger i det hele tatt. Det siste er verdt å
     merke seg — siden er statisk, og all bevegelse er tilstandsendringer.
     Den ene animasjonen som finnes er en fade på 0,3 s når siden er klar. */
  --pov-kurve: cubic-bezier(0.4, 0, 0.2, 1);
  --pov-fart: 0.3s;
  --pov-fart-rask: 0.15s;
  --pov-display: 'Clash Display', 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
  --pov-sans: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  /* 976 innhold + 152 luft på hver side ved 1280. Under det spiser luften
     inn før innholdet gjør det, som er hvorfor det er en clamp og ikke en
     prosent. */
  /* SF Symbols' `person.fill`, traced — samme glyf appen setter på trinnet du
     står på. Ni linjer SVG i en data-URI, mot en forespørsel og en 404-risiko. */
  --pov-person: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 7.6a3.4 3.4 0 1 0 0-6.8 3.4 3.4 0 0 0 0 6.8Zm0 1.1c-3 0-5.6 1.7-5.6 3.9 0 1.6 1.4 2.6 5.6 2.6s5.6-1 5.6-2.6c0-2.2-2.6-3.9-5.6-3.9Z'/%3E%3C/svg%3E");
  --pov-bredde: 976px;
  --pov-luft: clamp(20px, 5vw, 152px);
}

*, *::before, *::after { box-sizing: border-box; }

body.pov {
  margin: 0;
  /* Gjelder hele siden: et ord som ikke får plass skal brekke, ikke dytte
     dokumentet bredere. Den forrige feilen kostet en revisjonsrunde å finne. */
  overflow-wrap: break-word;
  background: var(--pov-bg);
  color: var(--pov-tekst);
  font-family: var(--pov-sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* `height: auto` er ikke pynt her. Bildene bærer width/height-attributter for
   å reservere plass mot layoutskift, og uten denne linja vinner attributtet:
   det første bildet ble 330 × 1800 og dyttet hele tekstkolonnen ut av
   skjermen, fordi raden ble nesten to tusen piksler høy. */
.pov img, .pov video { display: block; max-width: 100%; height: auto; }
.pov a { color: inherit; text-decoration: none; }

.pov-inn {
  width: min(100%, var(--pov-bredde));
  margin-inline: auto;
  padding-inline: var(--pov-luft);
}
@media (min-width: 1281px) { .pov-inn { padding-inline: 0; } }

/* ------------------------------------------------------------------ Toppen */
/* Gjennomskinnelig og festet, med hårstrek under. POV måler headeren til
   48 px høy; her er den 56, fordi ordmerket vårt er et bilde og ikke en
   tekstlogo og trenger den ekstra åtte for ikke å bli klemt. */
.pov-topp {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--pov-strek);
  background: rgba(30, 30, 30, 0.72);
  backdrop-filter: saturate(140%) blur(14px);
}
.pov-topp-inn {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 56px;
  width: min(100%, 1280px);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
}
.pov-merke img { width: 74px; height: auto; }
.pov-nav { display: flex; align-items: center; gap: 26px; margin-left: 12px; }
.pov-nav > a, .pov-meny > summary {
  color: var(--pov-tekst);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--pov-fart) var(--pov-kurve);
}
.pov-nav > a:hover, .pov-meny > summary:hover { color: var(--pov-dempet); }
.pov-hoyre { margin-left: auto; display: flex; align-items: center; gap: 18px; }

/* ------------------------------------------------------- Menyen med panelet */
.pov-meny { position: relative; }
.pov-meny > summary {
  display: inline-flex; align-items: center; gap: 6px; list-style: none;
}
.pov-meny > summary::-webkit-details-marker { display: none; }
.pov-meny > summary svg { width: 10px; height: 10px; transition: transform var(--pov-fart-rask) var(--pov-kurve); }
.pov-meny[open] > summary svg { transform: rotate(180deg); }

.pov-panel {
  position: absolute;
  top: calc(100% + 17px);
  left: 50%;
  z-index: 60;
  width: max-content;
  max-width: min(94vw, 560px);
  transform: translateX(-50%);
  border: 1px solid var(--pov-strek-2);
  border-radius: 16px;
  background: var(--pov-panel);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}
/* Pilen som peker opp på menypunktet. POV tegner den som en rotert firkant med
   samme kant og samme fyll som panelet, slik at hårstreken går ubrutt rundt. */
.pov-panel::before {
  content: "";
  position: absolute;
  top: -6px; left: 50%;
  width: 11px; height: 11px;
  transform: translateX(-50%) rotate(45deg);
  border-top: 1px solid var(--pov-strek-2);
  border-left: 1px solid var(--pov-strek-2);
  background: var(--pov-panel);
}
.pov-gruppe { padding: 18px 16px; }
.pov-gruppe + .pov-gruppe { border-top: 1px solid var(--pov-strek); }
.pov-gruppe-tittel {
  margin: 0 8px 12px;
  color: var(--pov-svak);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pov-gruppe-rader { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 2px; }
.pov-gruppe-rader a {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 8px;
  border-radius: 8px;
  color: var(--pov-tekst);
  font-size: 16px;
  font-weight: 500;
  transition: background-color var(--pov-fart) var(--pov-kurve);
}
.pov-gruppe-rader a:hover { background: var(--pov-fyll); }
.pov-gruppe-rader svg { flex: 0 0 auto; width: 17px; height: 17px; color: var(--pov-svak); }
.pov-gruppe-rader a[aria-current="page"] svg { color: var(--pov-aksent); }

/* -------------------------------------------------------------- Typografien */
.pov h1 {
  margin: 0 0 16px;
  max-width: 12ch;
  font-family: var(--pov-display);
  /* 30 px smalt og 44 px bredt, som POV. Linjeavstanden deres strammer med
     størrelsen — 27/30 = 0,90 mot 41,8/44 = 0,95 — så den følger samme klem. */
  font-size: clamp(30px, 4.4vw, 44px);
  font-weight: 700;
  line-height: clamp(0.9em, 0.86em + 0.4vw, 0.95em);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  /* «KNIPS FOR SKOLEARRANGEMENT» er ett ord for mye ved 375 piksler. Norsk
     lager dem, og en display-font i versaler har ingen naturlige bruddpunkter
     — så orddeling må slås på eksplisitt. `lang="nb"` på dokumentet er det som
     gjør at nettleseren vet hvor den kan dele. */
  hyphens: auto;
}
.pov h2 {
  margin: 0 0 12px;
  hyphens: auto;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.5;
}
.pov h3 {
  margin: 0 0 24px;
  hyphens: auto;
  font-size: 25px;
  font-weight: 700;
}
.pov p { margin: 0; color: var(--pov-dempet); font-size: 19px; font-weight: 500; line-height: 1.5; }
.pov .pov-liten { font-size: 16px; }

/* -------------------------------------------------------------- Seksjonene */
/* POVs bærende grep: alt står i et rutenett av hårstreker. Hver seksjon har en
   strek over seg, og en toparts seksjon har en loddrett strek i midten som går
   helt opp og helt ned. Det er den streken som gjør at siden leses som et
   oppslag og ikke som en stabel med bokser. */
.pov-seksjon { border-top: 1px solid var(--pov-strek); }
.pov-seksjon:first-of-type { border-top: 0; }

.pov-delt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  width: min(100%, 1280px);
  margin-inline: auto;
}
/* `min-width: 0` er ikke pynt. Et rutenettspor på `1fr` har automatisk
   minimum lik innholdets min-content, så ett barn som ber om mer plass enn det
   er — her `.pov-vurdering` med `width: max-content` — vokser sporet forbi
   beholderen i stedet for å bli klemt. Målt ved 320 piksler: begge sporene ble
   360 brede og dokumentet førti piksler for bredt. Dette er den vanlige
   kuren, og den hører hjemme på hvert rutenettbarn og ikke på synderen. */
.pov-delt > * { min-width: 0; padding: clamp(40px, 5vw, 64px) clamp(20px, 4vw, 56px); }
.pov-delt > :first-child { border-right: 1px solid var(--pov-strek); }
.pov-delt-tekst { display: grid; gap: 16px; align-content: center; justify-items: start; }
.pov-delt-media { display: grid; place-items: center; min-height: 320px; }
/* Et stående bilde i en toparts rad skal ikke kunne bli høyere enn skjermen —
   da er raden ikke lenger et oppslag, den er to skjermer stablet.
 *
 * Bundet til `.pov-figur` og ikke til `figure`. Den generelle utgaven var
 * `.pov-delt-media > figure > img`, som er mer spesifikk enn `.pov-iphone img`
 * og derfor vant med `width: auto` — og bredden på et bilde som ennå ikke er
 * lastet er null. Resultatet var at hver eneste telefonramme i en seksjon,
 * på hver eneste side, kollapset til 150 × 13 piksler. Bare de tre i heroen
 * slapp unna, fordi de står i `.pov-telefoner` og ikke i `.pov-delt-media`.
 * Rammen setter sine egne mål og skal ikke ha noen over seg. */
.pov-delt-media > .pov-figur { max-height: 74svh; }
.pov-delt-media > .pov-figur > img { max-height: 74svh; width: auto; }

/* Snudd: bilde til venstre, tekst til høyre. Streken flytter seg med. */
.pov-delt-speil > :first-child { border-right: 0; }
.pov-delt-speil > :last-child { border-left: 1px solid var(--pov-strek); }

.pov-bred { width: min(100%, 1280px); margin-inline: auto; padding: clamp(48px, 6vw, 80px) clamp(20px, 4vw, 56px); }

/* ------------------------------------------------------------- App-merkene */
.pov-merker { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
/* Apples merke, til Apples mål.
 *
 * Den forrige var hjemmesnekret og så det ut: 22 px logo, 9 px og 15 px tekst,
 * 9/16 px innrykk og en radius på 8. Apples eget merke er 129 × 38 — forholdet
 * 3,395 — med 8,5 i radius, hvit hårstrek rundt, logoen 18,5 høy, og de to
 * tekstlinjene på 7,6 og 16,5. POV bruker akkurat den filen, som er hvorfor
 * deres ser riktig ut og vår så billig ut ved siden av.
 *
 * Bygget i CSS og ikke som en kopi av Apples SVG: merket er varemerket deres og
 * skal ikke redistribueres fra vår server. Målene er derimot bare mål.
 *
 * MERK: teksten sier fortsatt «Prøv betaen på iPhone» og lenken går til
 * TestFlight, fordi appen ikke er i App Store ennå. Ved lansering skal teksten
 * bli «Last ned på App Store» og lenken peke dit — Apples retningslinjer
 * tillater ikke merket for en app som ikke er i butikken. */
.pov-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: 129px;
  height: 38px;
  padding: 0 9px 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 8.5px;
  background: #000;
  color: #fff;
  transition: border-color var(--pov-fart) var(--pov-kurve);
}
.pov-badge:hover { border-color: #fff; }
.pov-badge svg { flex: 0 0 auto; width: 16px; height: 18.5px; }
.pov-badge span { display: block; min-width: 0; }
/* 7,6 og 16,5, og linjeavstanden strammet inn til nesten ingenting — de to
   linjene i Apples merke står tettere enn noen tekst ellers gjør. */
.pov-badge small {
  display: block;
  font-size: 7.6px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.006em;
  white-space: nowrap;
}
.pov-badge strong {
  display: block;
  margin-top: -0.5px;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.012em;
  white-space: nowrap;
}

.pov-knapp {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  border-radius: 9999px;
  background: var(--pov-aksent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  transition: filter var(--pov-fart) var(--pov-kurve);
}
.pov-knapp:hover { filter: brightness(1.12); }

/* --------------------------------------------------- «Del med en …»-fanene */
/* Venstre kolonne er en liste med et loddrett merke foran hver linje. Den
   aktive er hvit tekst med aksentfarget merke; resten er dempet med et svakt
   merke. Ingen ramme, ingen bakgrunn — bare streken. */
.pov-faner { display: grid; gap: 0; margin: 24px 0 28px; }
.pov-fane {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 0 9px 14px;
  border: 0;
  border-left: 3px solid var(--pov-strek-3);
  background: none;
  color: var(--pov-svak);
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: color var(--pov-fart) var(--pov-kurve), border-color var(--pov-fart) var(--pov-kurve);
}
.pov-fane:hover { color: var(--pov-dempet); }
.pov-fane[aria-selected="true"] { border-left-color: var(--pov-aksent); color: var(--pov-tekst); }
.pov-fane-tekst { min-height: 84px; }

/* Viften av skilt.
 *
 * Første utgave posisjonerte de tre kortene absolutt, og da kolliderte den med
 * plassholder-reglene: `.pov-plassholder` setter sin egen bredde, sitt eget
 * sideforhold og sin egen `display: grid`, og resultatet var tre kort stablet
 * oppå hverandre med teksten i grøt. To regelsett som begge vil bestemme
 * størrelsen på det samme elementet taper alltid mot hverandre.
 *
 * Nå er det flex med negative marger. Kortene kan ikke havne oppå hverandre
 * fordi flex legger dem etter hverandre uansett, og overlappet er en marg jeg
 * bestemmer i stedet for en tilfeldighet. Rotasjonen ligger på kortet og ikke
 * på plasseringen, så ingenting flytter seg når innholdet skifter. */
.pov-kortvifte {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-block: 18px;
}
/* Sammensatt velger, ikke `> *`. Første forsøk brukte `.pov-kortvifte > *`,
   som er nøyaktig like spesifikk som `.pov-plassholder` — og siden
   plassholderen står lenger nede i fila vant den, med 330 px bredde og 3 : 4
   i stedet for kortets egne mål. To regelsett med samme vekt om samme
   egenskap avgjøres av rekkefølge, som er den vanskeligste formen for feil å
   se på i et stilark. */
.pov-kortvifte > .pov-plassholder {
  flex: 0 0 auto;
  width: clamp(96px, 15vw, 150px);
  max-width: none;
  aspect-ratio: 5 / 8;
  margin: 0;
  padding: 14px 10px;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.pov-kortvifte > .pov-plassholder:nth-child(1) { transform: rotate(-9deg); margin-right: -14px; }
.pov-kortvifte > .pov-plassholder:nth-child(2) { z-index: 2; transform: translateY(-10px); }
.pov-kortvifte > .pov-plassholder:nth-child(3) { transform: rotate(9deg); margin-left: -14px; }
/* Teksten inne i et kort er halve størrelsen av en vanlig plassholder — det er
   et kort på 120 piksler, ikke en billedplass på 330. */
.pov-kortvifte .pov-plassholder b { font-size: 9px; letter-spacing: 0.12em; }
.pov-kortvifte .pov-plassholder span { font-size: 11px; line-height: 1.35; }

/* ---------------------------------------------------------------- Spørsmål */
/* Rader med stiplet skillelinje, ikon til venstre og pluss til høyre. Stiplet
   og ikke heltrukket — det er den ene detaljen som skiller POVs FAQ visuelt fra
   enhver annen trekkspilliste. */
.pov-faq h3 { margin-bottom: 24px; }
.pov-faq details {
  border-bottom: 1px dashed var(--pov-strek-3);
}
.pov-faq details:first-of-type { border-top: 1px dashed var(--pov-strek-3); }
.pov-faq summary {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 4px;
  list-style: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
}
.pov-faq summary::-webkit-details-marker { display: none; }
.pov-faq summary .pov-faq-ikon { flex: 0 0 auto; width: 17px; height: 17px; color: var(--pov-svak); }
.pov-faq summary .pov-faq-pluss {
  flex: 0 0 auto; margin-left: auto; width: 13px; height: 13px;
  color: var(--pov-svak);
  transition: transform var(--pov-fart) var(--pov-kurve);
}
.pov-faq details[open] summary .pov-faq-pluss { transform: rotate(45deg); }
.pov-faq details > p { padding: 0 4px 18px 45px; font-size: 16px; }
.pov-faq-mer {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 4px;
  color: var(--pov-dempet);
  font-size: 16px;
  font-weight: 500;
}
.pov-faq-mer span:last-child { margin-left: auto; }

/* ------------------------------------------------------------------ Foten */
.pov-fot { border-top: 1px solid var(--pov-strek); }
.pov-fot-inn {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 34px;
  width: min(100%, 1280px);
  margin-inline: auto;
  padding: 46px clamp(20px, 4vw, 56px) 34px;
}
.pov-fot h4 {
  margin: 0 0 14px;
  color: var(--pov-svak);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pov-fot ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pov-fot a { color: var(--pov-dempet); font-size: 15px; }
.pov-fot a:hover { color: var(--pov-tekst); }
.pov-fot-bunn {
  width: min(100%, 1280px);
  margin-inline: auto;
  padding: 0 clamp(20px, 4vw, 56px) 44px;
  color: var(--pov-svak);
  font-size: 13px;
}

/* --------------------------------------------------- Kortet nede til venstre */
/* POV har en stabel med bilder og en QR-kode festet nederst til venstre gjennom
   hele siden. Vår versjon bærer den ekte koden fra samme koder som gjesteflyten
   bruker — aldri en plassholder, som er en regel og ikke en preferanse. */
.pov-hjorne {
  position: fixed;
  bottom: 14px; left: 12px;
  z-index: 40;
  display: grid;
  justify-items: center;
  gap: 7px;
  /* Trangere enn før, fordi koden inni er blitt større og merket må bli
     værende innenfor margen. Se regnestykket i `js/bruk.js`. */
  padding: 10px;
  border: 1px solid var(--pov-strek-3);
  border-radius: 14px;
  background: var(--pov-panel);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.6);
  transition: transform var(--pov-fart) var(--pov-kurve), border-color var(--pov-fart) var(--pov-kurve);
}
.pov-hjorne:hover { transform: translateY(-4px); border-color: rgba(252, 252, 254, 0.35); }
/* Merket flyter over sida, og under 1500 px er det ingen marg å flyte i.
 *
 * `.pov-bred` er `min(100%, 1280px)` med `clamp(20px, 4vw, 56px)` innvendig, så
 * ved 1280 begynner teksten på 51 px mens merket slutter på 155. Målt på
 * forsiden la det seg over de første åtti pikslene av hvert spørsmål i FAQ-en —
 * «[Må gj]estene laste ned en app?». Fra 1500 og opp er ytre marg 110 px og
 * innholdet begynner på 166, og da er det elleve piksler klaring. Under det er
 * knappen øverst til høyre uansett synlig hele veien. */
@media (max-width: 1499px) { .pov-hjorne { display: none; } }
.pov-hjorne .pov-hjorne-qr { display: grid; place-items: center; padding: 5px; border-radius: 8px; background: #fff; }
.pov-hjorne-tekst { color: var(--pov-tekst); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

/* --------------------------------------------------------------- Oversikten */
.pov-rutenett { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--pov-strek); }
.pov-rutenett a {
  display: grid; gap: 8px; align-content: start;
  padding: 28px 26px 32px;
  background: var(--pov-bg);
  transition: background-color var(--pov-fart) var(--pov-kurve);
}
.pov-rutenett a:hover { background: var(--pov-panel); }
.pov-rutenett svg { width: 21px; height: 21px; color: var(--pov-svak); }
/* Norsk lager lange sammensatte ord, og «SKOLEARRANGEMENT» er ett av dem: 253
   piksler i versaler mot 187 innvendig i kortet ved 1440. Uten dette skjøt det
   førti piksler ut av siden og tok med seg hele dokumentbredden.
   `hyphens: auto` virker fordi dokumentet er `lang="nb"` — nettleseren kan
   dele norsk. `break-word` er nettet under, for ord ordboken ikke kjenner. */
.pov-rutenett strong {
  font-family: var(--pov-display);
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  hyphens: auto;
  overflow-wrap: break-word;
}
.pov-rutenett span { color: var(--pov-dempet); font-size: 15px; line-height: 1.5; }

/* ------------------------------------------------------------ Plassholdere */
/* Bilder vi ikke har tatt ennå. Med vilje ikke en grå boks: en plassholder som
   ser ferdig ut blir sendt i produksjon, og en som står med motivet sitt kan
   ikke forveksles med noe. Samme 3 : 4 som de ekte bildene, så ingenting
   flytter seg når bildet lander. */
.pov-plassholder {
  display: grid; place-content: center; gap: 10px;
  width: min(100%, 330px);
  margin: 0;
  padding: 24px;
  aspect-ratio: 3 / 4;
  border: 1px dashed var(--pov-strek-3);
  border-radius: 12px;
  background: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(252,252,254,0.025) 10px 20px);
  text-align: center;
}
.pov-plassholder b { color: var(--pov-svak); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.pov-plassholder span { color: var(--pov-dempet); font-size: 14px; line-height: 1.5; }
.pov-plassholder-bred { width: min(100%, 560px); aspect-ratio: 16 / 10; }

@media (max-width: 900px) {
  .pov-nav, .pov-hjorne { display: none; }
  .pov-delt { grid-template-columns: 1fr; }
  .pov-delt > :first-child,
  .pov-delt-speil > :last-child { border-right: 0; border-left: 0; border-bottom: 1px solid var(--pov-strek); }
  .pov-delt-speil { display: flex; flex-direction: column-reverse; }
  .pov-delt-speil > :first-child { border-bottom: 0; }
  .pov-delt-speil > :last-child { border-bottom: 1px solid var(--pov-strek); }
  .pov-gruppe-rader { grid-template-columns: 1fr; }
  .pov h1 { max-width: none; }
}


/* ═════════════════════════════════════════ Resten av siden, samme språk ═════ */

.pov-kicker {
  margin: 0;
  color: var(--pov-svak);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.pov-figur { margin: 0; width: min(100%, 330px); }
.pov-figur img { border-radius: 12px; }
.pov-film { margin: 0; width: min(100%, 300px); aspect-ratio: 9 / 16; overflow: hidden; border-radius: 12px; background: #000; }
.pov-film video { width: 100%; height: 100%; object-fit: cover; }
.pov-smal { max-width: 720px; margin-inline: auto; }

/* Bildestripen går av seg selv.
 *
 * Den var `overflow-x: auto` med snap — å dra den var gratis, men prisen var
 * et rullefelt tvers over hele bredden under bildene. På en Mac med «vis
 * rullefelt: alltid» står det der permanent, grått og fire piksler høyt, og
 * det er det første øyet finner i en seksjon som handler om fotografier.
 * `scrollbar-width: none` hadde skjult feltet, men da er det en stripe som ser
 * statisk ut og som man må gjette på at kan dras.
 *
 * Nå går den selv. Sporet er lagt to ganger etter hverandre og skyves én hel
 * runde til venstre; når den er ferdig står klonen nøyaktig der originalen
 * begynte, og løkka er usynlig. Ingen rullefelt, ingenting å gjette på, og
 * ingen JavaScript — 60 sekunder på én runde er rundt tretti piksler i
 * sekundet, langsomt nok til å lese hvert bilde.
 *
 * Klonene er de samme åtte URL-ene som originalen, så de koster ingenting å
 * laste: første sett henter bytene, andre sett treffer bufferen. */
.pov-stripe {
  margin-top: 26px;
  overflow: hidden;
  /* Bildene tones ut i kantene i stedet for å bli kappet. Uten dette ser
     stripa ut som noe som er klippet av, ikke som noe som fortsetter. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 44px,
                                      #000 calc(100% - 44px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 44px,
                              #000 calc(100% - 44px), transparent 100%);
}
.pov-stripe-spor {
  display: flex;
  gap: 12px;
  width: max-content;
  will-change: transform;
  animation: pov-stripe-rull 60s linear infinite;
}
/* Peker man på den, stopper den. Et bilde man vil se på skal ikke løpe fra en. */
.pov-stripe:hover .pov-stripe-spor { animation-play-state: paused; }
.pov-stripe img {
  flex: 0 0 auto;
  width: clamp(150px, 21vw, 230px);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 10px;
}
/* Halve sporet pluss én halv luke: `-50%` lander midt i luka mellom de to
   settene, ikke på begynnelsen av klonen, og seks piksler er halve `gap`. */
@keyframes pov-stripe-rull {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 6px)); }
}

/* ------------------------------------------------------------------- Prisen */
.pov-priskort {
  width: 100%;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--pov-strek-2);
  border-radius: 16px;
  background: var(--pov-panel);
}
.pov-priskort-topp { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.pov-priskort-topp h2 { margin: 0; font-family: var(--pov-display); font-size: 27px; font-weight: 700; line-height: 1.05; letter-spacing: 0.4px; text-transform: uppercase; }
.pov-priskort-topp strong { color: var(--pov-dempet); font-size: 18px; font-weight: 700; white-space: nowrap; }

/* Stigen. Fyller til og med det valgte trinnet, slik GuestsStep gjør i appen —
   raden leses som et nivå som stiger, ikke som sju radioknapper. Sju og aldri
   åtte: appen slettet «+»-trinnet med vilje, fordi et trinn ingen kan kjøpe
   leses som et trinn som ikke lastet. */
/* Trinnene skal være omtrent kvadratiske, som i appen. `1fr` alene strekker
   dem til kortbredden, og på et kort på 700 piksler blir hvert trinn 95 bredt
   og 43 høyt — det leser som sju knapper, ikke som en stige. Taket på 64 gjør
   at raden slutter å vokse og legger seg til venstre i stedet. */
.pov-stige {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 64px));
  gap: 8px;
  height: 43px;
}
.pov-trinn {
  min-width: 0;
  padding: 0;
  border: 1px solid var(--pov-strek-2);
  border-radius: 11px;
  background: var(--pov-flate);
  color: var(--pov-dempet);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  /* Fargen er med vilje ikke i overgangen.
   *
   * Den sto her, med samme trappeforsinkelse som fyllet — opptil 120 ms før
   * den i det hele tatt begynte, og 300 ms på å bli ferdig. Trinnet du trykker
   * på setter samtidig `color: transparent` og tegner personglyfen i `::after`,
   * og glyfen har ingen overgang. I nesten en halv sekund lå derfor tallet og
   * glyfen oppå hverandre: «160» med en person tvers over sekstallet. Det ser
   * ut som en feiltegning, fordi det er en.
   *
   * Fyllet er det som skal kaskade over raden. Tallet skal bare bytte, i samme
   * bilde som glyfen kommer og i samme bilde som den går. */
  transition: background-color var(--pov-fart) var(--pov-kurve) var(--trinn-forsinkelse, 0ms),
              border-color var(--pov-fart) var(--pov-kurve) var(--trinn-forsinkelse, 0ms);
}
.pov-trinn.er-fylt { border-color: var(--pov-aksent); background: rgba(87, 86, 206, 0.22); color: var(--pov-tekst); }
/* Glyfen erstatter tallet på trinnet du står på. Begge deler i en rute på
   43 piksler er tjuesju piksler innhold i førtitre — de tar borti hverandre,
   og trinnet du har valgt blir det som ser ødelagt ut. */
.pov-trinn.er-valgt { position: relative; color: transparent; }
.pov-trinn.er-valgt::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--pov-aksent);
  -webkit-mask: var(--pov-person) center / 15px 15px no-repeat;
  mask: var(--pov-person) center / 15px 15px no-repeat;
}
/* Hover må ikke male tallet tilbake på trinnet som viser glyfen.
 *
 * `.pov-trinn:hover` og `.pov-trinn.er-valgt` har nøyaktig samme vekt — én
 * klasse og én pseudoklasse mot to klasser, begge 0-2-0 — og hover sto sist i
 * fila. Ved likhet vinner den siste, så i det øyeblikket pekeren traff det
 * valgte trinnet ble `color: transparent` overstyrt med hvit, og tallet kom
 * tilbake oppå personglyfen. Det er derfor feilen bare viste seg når man holdt
 * musa der, og hvorfor den overlevde at fargen ble tatt ut av overgangen.
 *
 * Kanten skal fortsatt svare på hover overalt; det er bare tallet som ikke skal
 * det der glyfen står. */
.pov-trinn:hover { border-color: var(--pov-strek-3); }
.pov-trinn:hover:not(.er-valgt) { color: var(--pov-tekst); }
.pov-trinn.er-fylt:hover { border-color: var(--pov-aksent); }
.pov-trinn:focus-visible { outline: 2px solid var(--pov-aksent); outline-offset: 3px; }

.pov-prisnote { margin-top: 12px; color: var(--pov-svak); }
.pov-prisnote a { color: var(--pov-aksent); text-decoration: underline; text-underline-offset: 3px; }
.pov-punktliste { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; color: var(--pov-dempet); font-size: 15px; }
.pov-punktliste li { position: relative; padding-left: 19px; }
.pov-punktliste li::before { content: ""; position: absolute; top: 0.55em; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--pov-svak); }

.pov-fakta { display: grid; margin-top: 26px; border-top: 1px solid var(--pov-strek); }
.pov-fakta > div { display: grid; grid-template-columns: minmax(210px, 0.7fr) minmax(0, 1.3fr); gap: 30px; padding: 22px 0; border-bottom: 1px solid var(--pov-strek); }
.pov-fakta strong { font-size: 16px; }
.pov-fakta span { color: var(--pov-dempet); font-size: 16px; line-height: 1.5; }

/* ---------------------------------------------- POVs staggede toparts-rute */
/* To blokker ved siden av hverandre, forskjøvet mot hverandre.
 *
 * Målt på pov.camera/use-cases/vacations: `grid-cols-2` med like kolonner,
 * hårstrek på toppen av begge, 47 px mellom tekst og media, og 40 px luft inn
 * mot midten fra hver side. Venstre kolonne er `column` — tekst øverst, bilde
 * under. Høyre er `column-reverse` — bilde øverst, tekst under. Det er hele
 * grepet: to blokker leses som ett oppslag, og øyet går i sikksakk nedover
 * siden i stedet for fram og tilbake mellom to fullbreddes rader.
 *
 * Sidene her sto med én blokk per rad i full bredde. Innholdet var det samme,
 * men siden leste som en liste og ikke som POVs, og det var den forskjellen
 * som var synlig når de to lå ved siden av hverandre. */
.pov-par {
  display: grid;
  grid-template-columns: 1fr;
  width: min(100%, 1280px);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 56px);
}
.pov-par-kol {
  display: flex;
  flex-direction: column;
  gap: 30px;
  min-width: 0;
  padding-block: clamp(36px, 4vw, 48px);
  border-top: 1px solid var(--pov-strek);
}
/* Media skyves ned mot bunnen, så de to bildene i en rute møtes på tvers
   uansett hvor ulike tekstene er i lengde. */
.pov-par-media { margin-top: auto; display: grid; place-items: center; }
.pov-par-tekst { display: grid; gap: 14px; align-content: start; }
.pov-par-tekst h2 { margin: 0; }
.pov-par-tekst p { margin: 0; color: var(--pov-dempet); }

@media (min-width: 900px) {
  .pov-par { grid-template-columns: 1fr 1fr; }
  .pov-par-kol { gap: 47px; padding-block: 0; }
  .pov-par-kol:first-child { padding: 40px 40px 0 0; }
  /* Snudd kolonne: bildet øverst, teksten under. `column-reverse` snur bare
     tegnerekkefølgen — i markupen står teksten fortsatt først, som er den
     rekkefølgen en skjermleser og en søkemotor skal få den i. */
  .pov-par-snu { flex-direction: column-reverse; padding: 0 0 40px 40px; border-left: 1px solid var(--pov-strek); }
  .pov-par-snu .pov-par-media { margin-top: 0; margin-bottom: auto; }
}

/* Heroens to telefoner, når det er to og ikke tre. POVs bruksområdehero har
   to; forsiden deres har tre, og det er samme rendringer i begge. */
.pov-telefoner-par { gap: clamp(10px, 1.6vw, 22px); }

/* --------------------------------------------------------------- Avslutning */
.pov-slutt .pov-bred { display: grid; justify-items: center; gap: 14px; text-align: center; padding-block: clamp(60px, 8vw, 100px); }
.pov-slutt h3 { max-width: 16ch; margin: 0; font-family: var(--pov-display); font-size: clamp(28px, 3.6vw, 40px); line-height: 1.03; letter-spacing: 0.6px; text-transform: uppercase; }

/* ---------------------------------------------------------------- Juridisk */
/* De to sidene Apple åpner når de sjekker om lenkene virker. Smal spalte, ingen
   media, ingenting som kan gå i stykker. */
.pov-juridisk h1 { margin-bottom: 6px; }
.pov-juridisk section { margin-top: 30px; }
.pov-juridisk h2 { margin: 0 0 8px; font-size: 19px; }
.pov-juridisk p { font-size: 17px; }
.pov-oppdatert { color: var(--pov-svak); }
.pov-oppdatert a { color: var(--pov-aksent); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------- Mobilmenyen */
.pov-mobilmeny { display: none; margin-left: auto; position: relative; }
.pov-mobilmeny > summary { display: grid; gap: 4px; width: 34px; padding: 8px 6px; list-style: none; cursor: pointer; }
.pov-mobilmeny > summary::-webkit-details-marker { display: none; }
.pov-mobilmeny > summary i { display: block; height: 1.5px; background: var(--pov-tekst); border-radius: 2px; }
.pov-mobilmeny > nav {
  position: absolute; top: calc(100% + 12px); right: 0;
  z-index: 60;
  display: grid; gap: 4px;
  width: max-content; min-width: 210px;
  padding: 12px;
  border: 1px solid var(--pov-strek-2);
  border-radius: 14px;
  background: var(--pov-panel);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.6);
}
.pov-mobilmeny > nav > a { padding: 10px 12px; border-radius: 8px; font-size: 16px; font-weight: 500; }
.pov-mobilmeny > nav > a:hover { background: var(--pov-fyll); }
.pov-mobilmeny > nav > .pov-knapp { justify-content: center; margin-top: 6px; }

@media (max-width: 560px) {
  .pov-priskort-topp { flex-direction: column; align-items: flex-start; gap: 6px; }
  .pov-stige { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .pov-hoyre { display: none; }
  .pov-mobilmeny { display: block; }
  .pov-stige { gap: 6px; height: 40px; }
  .pov-trinn { font-size: 13px; border-radius: 9px; }
  /* Bare når kortet faktisk er smalt. 900 er brytepunktet for menyen, ikke
     for dette kortet, og på 830 piksler er det god plass til én linje. */
  .pov-fakta > div { grid-template-columns: 1fr; gap: 6px; }
}


/* ═══════════════════════════════════════════ Forsiden, som POVs forside ════ */

/* Båndet over headeren. POVs er `hidden md:flex` på den andre veien — det vises
   bare når nav-en har kollapset, altså på smal skjerm, og forsvinner når det er
   plass til hele menyen. Samme her, samme brytepunkt. */
.pov-band {
  display: none;
  padding: 13px 20px;
  border-bottom: 1px solid var(--pov-strek);
  background: var(--pov-panel-aksent);
  color: var(--pov-aksent);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  transition: background-color var(--pov-fart) var(--pov-kurve);
}
.pov-band:hover { background: #35334a; }
.pov-band span { margin-left: 6px; }

/* De tre telefonene i heroen.
 *
 * Målt hos POV ved 760 piksler: bredder 91, 97 og 104, høyder 194, 212 og 227,
 * og topper 348, 339 og 331 — altså stiger de mot høyre, både i størrelse og
 * plassering. Det er ikke tre like bilder på rad, det er et perspektiv. Her er
 * det tre ekte skjermbilder fra appen — album, kamera og fremkalling — i stedet
 * for tre plassholdere, fordi de tre finnes allerede. */

/* Plassen der vurderingen skal stå. Tom med vilje — se kommentaren i
   generatoren: appen er ikke lansert, og et oppdiktet antall stjerner er en
   forfalsket opplysning uansett hensikten bak. */
.pov-vurdering {
  display: grid;
  justify-items: center;
  gap: 2px;
  margin: 20px auto 0;
  width: fit-content;
  max-width: 100%;
  padding: 8px 16px;
  text-align: center;
  border: 1px dashed var(--pov-strek-3);
  border-radius: 10px;
  background: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(252,252,254,0.025) 10px 20px);
}
.pov-vurdering b { color: var(--pov-svak); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.pov-vurdering span { color: var(--pov-dempet); font-size: 14px; }

/* Fade når siden er klar. POVs sidewrapper har nøyaktig
   `opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)` og går fra 0 til 1 når React har
   montert. Her er det en CSS-animasjon i stedet for et rammeverk, og den
   starter selv — ingen JavaScript trengs, så en side uten skript viser
   fortsatt innholdet. */
/* Innlastingen.
 *
 * POVs wrapper står med `transition-opacity duration-300` og går fra 0 til 1
 * når appen er montert — hele siden toner inn, headeren med. Første utgave her
 * animerte bare `main` og foten, så toppen poppet inn mens resten tonet, og
 * det leses som et hakk og ikke som en inntoning.
 *
 * Deres fade starter etter at rammeverket har hydrert, altså et lite stykke
 * etter første maling. En CSS-animasjon starter derimot i samme øyeblikk som
 * elementet males, og da rekker den å bli ferdig før noe er synlig. De 60
 * millisekundene forsinkelse er det som gjør at man faktisk ser den. */
@keyframes pov-inn { from { opacity: 0; } to { opacity: 1; } }
body.pov > .pov-band,
body.pov > .pov-topp,
body.pov > main,
body.pov > .pov-fot,
body.pov > .pov-hjorne { animation: pov-inn var(--pov-fart) var(--pov-kurve) 60ms both; }

@media (prefers-reduced-motion: reduce) {
  body.pov > * { animation: none !important; }
  .pov *, .pov *::before, .pov *::after { transition-duration: 0.01ms !important; }
  /* Bildestripa ligger for dypt til å bli fanget av regelen over, som bare
     treffer direkte barn av `body`. Stopper man den uten å gjøre noe mer, blir
     den stående som en avkuttet rad med et halvt bilde i kanten — og de åtte
     siste er klonene, som da står som duplikater i full offentlighet. Her
     brytes den i stedet, klonene tas ut, og alle åtte er synlige på én gang
     uten at noe beveger seg. */
  .pov-stripe { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .pov-stripe-spor {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
  }
  .pov-stripe-spor [data-klone] { display: none; }
}

/* Under brytepunktet er heroen midtstilt, slik POVs er. */
@media (max-width: 900px) {
  .pov-band { display: block; }
  .pov-hero .pov-delt > :first-child { border-bottom: 0; }
  .pov-hero .pov-delt-tekst { justify-items: center; text-align: center; padding-bottom: 8px; }
  .pov-hero .pov-delt-tekst h1 { max-width: none; }
  .pov-hero .pov-delt-media { padding-top: 0; }
  .pov-hero .pov-merker { justify-content: center; }
  .pov-vurdering { justify-items: center; }
}


/* ═══════════════════════════════════════════════════ Telefonbildene ════════ */

/* Rammen var tegnet i CSS. Den er nå rendret.
 *
 * `scripts/telefonbilder.swift` rendrer en iPhone 16 fra `docs/3d/iphone-16.usdz`
 * med skjermbildet lagt på skjermflaten, og skriver ti JPEG-er til
 * `assets/telefoner/`. CSS-en gjør ingenting annet enn å bestemme hvor store
 * de skal være.
 *
 * Det ble rendret og ikke tegnet fordi en `rotateY` på et flatt bilde ikke er
 * en rotasjon: kantene forblir parallelle, telefonen får ingen tykkelse, og
 * øyet leser det som et sammenklemt bilde. Ved 28 graders synsfelt i
 * rendringen konvergerer topp- og bunnkanten, den nære langsiden blir høyere
 * enn den fjerne, og skjermbildet følger med inn i dybden — fordi det ligger
 * på en flate i den samme geometrien og ikke oppå den.
 *
 * Bildene er JPEG mot #1E1E1E og ikke PNG med alfa. Som PNG veide de 528 KB
 * hver; som JPEG rundt 135, altså 1,4 MB mot 5,3 for de ti. Prisen er at de
 * forutsetter at bakgrunnen er nettopp den fargen. Endres `--pov-bg`, må
 * `BAKGRUNN` i renderskriptet endres og bildene lages på nytt. */
.pov-telefon {
  margin: 0;
  flex: 0 0 auto;
}
.pov-telefon img {
  display: block;
  width: 100%;
  height: auto;
}

/* De tre i heroen. Størrelsene og høydeforskjellene er POVs, målt ved 1280:
   140, 148 og 162 brede med topper på 208, 194 og 178 — de stiger mot høyre i
   både størrelse og plassering, og det er stigningen som gjør at raden leses
   som ett objekt. Rendringene er bredere enn telefonen fordi de har luft rundt
   seg, så tallene er skalert opp tilsvarende. */
.pov-telefoner {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(4px, 0.8vw, 10px);
  /* Ingen forskyvning lenger, så ingen overheng å ta høyde for. */
}
/* Like store, og på linje.
 *
 * Første utgave hadde POVs trapp — tre ulike bredder og to forskyvninger
 * nedover — men den bygget på at telefonene hadde hver sin vinkel. Når alle
 * står likt blir en størrelsesforskjell bare en størrelsesforskjell: den ene
 * ser nærmere ut uten at noe annet støtter det, og raden leses som tre bilder
 * i tilfeldige størrelser. Én bredde, én grunnlinje. */
.pov-telefoner .pov-telefon { width: clamp(100px, 13.2vw, 168px); }

/* Telefonen i en toparts rad. */
.pov-delt-media > .pov-telefon { width: clamp(170px, 24vw, 300px); }