/* Forsiden (/, /no/). Bygger på stil.css: fargene, toppen, språkbryteren og bunnen kommer derfra.
   Oppsett: én bred spalte (1180 px). Åpningen har TV-en midtstilt under teksten, og delene under
   veksler mellom tekst til venstre og skjermbilde til høyre.
   Bevegelse: alt bruker kurven fra kameraet i appen (--kamera) og små utslag. Det som beveger seg,
   står samlet nederst i filen, og alt er slått av med Reduser bevegelse. */

.forside { --kamera: cubic-bezier(0.22, 0.8, 0.2, 1); }

.forside .side { max-width: 1180px; padding-top: 24px; }

.forside main { margin-top: 0; }

.forside h1, .forside h2 { text-wrap: balance; }
.forside p { text-wrap: pretty; }

/* Liten tekst over en overskrift. */
.merke {
  display: block;
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lakk);
}

/* ---------- Åpningen ---------- */

.apning { text-align: center; padding: clamp(36px, 6vw, 72px) 0 0; }

/* Viften: fem forsider som overlapper, vinklet om nedre kant som arkene i appikonet. Alle ligger i
   samme rute, og plassen bestemmes av --n (−2 … 2 fra venstre) og --ned (hvor langt ned i buen).
   Hele viften er knapt fire forsider bred, og forsidene følger skjermbredden, så den får plass ned til 320 px. */
.vifte {
  --b: clamp(64px, 22vw, 148px);
  display: grid;
  justify-content: center;
  margin: 0 auto clamp(40px, 5.5vw, 64px);
}

.vifte img {
  grid-area: 1 / 1;
  display: block;
  width: var(--b);
  height: auto;
  aspect-ratio: 320 / 453;
  border-radius: 3px;
  background: var(--flate);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 18px 28px -14px rgba(0, 0, 0, 0.85);
  transform-origin: 50% 100%;
  transform: translate(calc(var(--n) * 58%), calc(var(--ned) * 1% - var(--loft, 0px))) rotate(calc(var(--n) * 6deg));
}

.vifte img:nth-child(1) { --n: -2; --ned: 11; z-index: 1; }
.vifte img:nth-child(2) { --n: -1; --ned: 3; z-index: 2; }
.vifte img:nth-child(3) { --n: 0; --ned: 0; z-index: 3; }
.vifte img:nth-child(4) { --n: 1; --ned: 3; z-index: 2; }
.vifte img:nth-child(5) { --n: 2; --ned: 11; z-index: 1; }

.apning h1 {
  margin: 0 auto 22px;
  max-width: 15em;
  font-size: clamp(42px, 7.4vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.apning .ingress {
  margin: 0 auto;
  max-width: 34em;
  font-size: clamp(18px, 2.1vw, 22px);
  line-height: 1.5;
  color: var(--dempet);
}

.valg {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 22px;
  margin-top: 34px;
}

/* Apples eget merke «Download on Apple TV», uendret (bilder/<språk>/download-on-apple-tv.svg).
   Apples regler: minst 40 px høyt, og luft rundt på en firedel av høyden (12 px ved 48 px), som
   mellomrommene i .valg og margen på .ute holder. Ingen bevegelse, farge eller skygge på merket. */
.appstore { display: inline-flex; line-height: 0; border-radius: 8px; }
.appstore img { display: block; height: 48px; width: auto; }
.appstore:focus-visible { outline: 2px solid var(--lakk); outline-offset: 12px; }

.videre { color: var(--tekst); font-size: 17px; text-decoration: none; border-bottom: 1px solid var(--strek); padding-bottom: 2px; }
.videre:hover, .videre:focus-visible { border-color: var(--lakk); color: var(--lakk); }

/* Hvor appen er ute nå, rett under merket. */
.ute { margin: 20px 0 0; font-size: 16px; color: var(--tekst); }

.vilkar {
  margin: 8px 0 0;
  font-size: 15px;
  color: var(--dempet);
}

/* De to enhetene, side om side under knappene: Blad er én app for Apple TV og iPad. Kortene er
   lenker ned til delen om hver av dem. */
.enheter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 760px;
  margin: clamp(28px, 4vw, 40px) auto 0;
  text-align: left;
}

.enheter a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid rgba(154, 161, 173, 0.22);
  border-radius: 16px;
  background: var(--flate);
  color: var(--dempet);
  font-size: 15px;
  line-height: 1.4;
  text-decoration: none;
  transition: border-color 320ms cubic-bezier(.22, .8, .2, 1), translate 320ms cubic-bezier(.22, .8, .2, 1);
}

.enheter a:hover, .enheter a:focus-visible { border-color: var(--lakk); }
.enheter strong { display: block; margin-bottom: 2px; font-size: 19px; font-weight: 600; color: var(--tekst, #F2EFE9); }
/* «Ute nå» og «Kommer snart» ved siden av enhetsnavnet, så ingen tror iPad-utgaven kan hentes. */
.enheter .status { margin-left: 8px; padding: 2px 9px; border: 1px solid var(--strek); border-radius: 999px; font-size: 12px; font-style: normal; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lakk); vertical-align: 2px; white-space: nowrap; }
.enheter svg { flex: none; width: 48px; height: 40px; fill: none; stroke: var(--lakk); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .enheter a:hover { translate: 0 -3px; }
}

@media (max-width: 560px) {
  .enheter { grid-template-columns: 1fr; }
}

/* Merket over TV-rammen sier hvilken enhet demoen viser. */
.tvmerke { display: block; margin-top: clamp(40px, 6vw, 64px); }
.tvmerke + .tv { margin-top: 18px; }

/* TV-en: en tynn ramme og en fot. Skjermbildene er 16:9 og bytter med en rolig toning. */
.tv {
  position: relative;
  margin: clamp(44px, 7vw, 76px) auto 0;
  max-width: 1040px;
}

.tv::before {
  /* Lyset fra skjermen, i merkefargen. */
  content: "";
  position: absolute;
  inset: 8% -6% -10%;
  background: radial-gradient(60% 60% at 50% 55%, rgba(31, 138, 117, 0.34), rgba(31, 138, 117, 0) 70%);
  filter: blur(30px);
  z-index: 0;
}

.tv .skjerm {
  position: relative;
  z-index: 1;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  padding: clamp(5px, 0.9vw, 10px);
  border-radius: clamp(10px, 1.6vw, 18px);
  background: linear-gradient(180deg, #23272f, #0c0e12);
  box-shadow: 0 0 0 1px #000, 0 40px 80px -30px rgba(0, 0, 0, 0.9);
}

.tv .bilder { position: relative; width: 100%; height: 100%; border-radius: clamp(5px, 0.8vw, 9px); overflow: hidden; background: var(--blekk); }

.tv img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Det første bildet (Les nå) ligger fast i bunnen. De fire neste (oppslag, e-bok, tegneserie og
   bibliotek) tones inn over det etter tur, 7 s hver i en runde på 35 s. Hvert bilde blir stående til
   det neste ligger helt over det, så bunnen aldri skinner gjennom midt i et bytte. Resten hører til
   den klikkbare demoen og vises ikke før den er i gang. Rekkefølgen er TV_BILDER i lag-nettside.py. */
.tv img:nth-child(n+2) { opacity: 0; }
.tv img:nth-child(2) { animation: bytt 35s 7s infinite backwards; }
.tv img:nth-child(3) { animation: bytt 35s 14s infinite backwards; }
.tv img:nth-child(4) { animation: bytt 35s 21s infinite backwards; }
.tv img:nth-child(5) { animation: bytt-sist 35s 28s infinite backwards; }

/* Klikkbar demo: skriptet nederst på siden setter .demo på TV-en ved første berøring og .vis på
   bildet som gjelder. Byttet er en kort toning med et lite kameraglid, som i appen. */
.tv.demo img { animation: none; opacity: 0; transform: scale(1.025); transition: opacity 320ms ease, transform 700ms cubic-bezier(.22, .8, .2, 1); }
.tv.demo img.vis { opacity: 1; transform: none; }
.tv .bilder:focus-visible { outline: 2px solid var(--lakk); outline-offset: 4px; }

.tv .felt {
  position: absolute;
  z-index: 2;
  padding: 0;
  border: 0;
  border-radius: clamp(4px, 0.9vw, 12px);
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Feltene er usynlige også under pekeren (Robert ville ikke ha ramme der). Med tastatur vises fokus. */
.tv .felt:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--lakk); }

/* Sidevending i demoen: arket er halve skjermen og dreier om ryggen midt på, med den gamle siden
   foran og den nye bak. Under ligger den nye siden som kommer til syne. 760 ms, som i appen. */
.tv .bilder.uten-toning img { transition: none; }
.tv .under, .tv .ark, .tv .ark > div { position: absolute; top: 0; height: 100%; background-repeat: no-repeat; background-size: 200% 100%; }
.tv .under { left: 0; width: 100%; background-size: 100% 100%; z-index: 1; }
.tv .under.fram { clip-path: inset(0 0 0 50%); }
.tv .under.bak { clip-path: inset(0 50% 0 0); }
.tv .ark { width: 50%; z-index: 3; transform-style: preserve-3d; animation: 760ms cubic-bezier(.5, .02, .24, 1) both; }
.tv .ark.fram { left: 50%; transform-origin: left center; animation-name: vend-fram; }
.tv .ark.bak { left: 0; transform-origin: right center; animation-name: vend-bak; }
.tv .ark > div { left: 0; width: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tv .ark .bakside { transform: rotateY(180deg); }
.tv .ark.fram .forside, .tv .ark.bak .bakside { background-position: right center; }
.tv .ark.fram .bakside, .tv .ark.bak .forside { background-position: left center; }
/* Skyggen over arket mens det står på høykant. */
.tv .ark > div::after { content: ""; position: absolute; inset: 0; background: #000; opacity: 0; animation: arkskygge 760ms cubic-bezier(.5, .02, .24, 1) both; }

@keyframes vend-fram { from { transform: rotateY(0); } to { transform: rotateY(-180deg); } }
@keyframes vend-bak { from { transform: rotateY(0); } to { transform: rotateY(180deg); } }
@keyframes arkskygge { 0%, 100% { opacity: 0; } 50% { opacity: 0.32; } }

.tv .demolinje {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 18px;
  min-height: 40px;
}
.tv .demolinje[hidden] { display: none; }

.tv .demotekst { margin: 0; min-width: 0; font-size: 15px; color: var(--dempet); text-align: center; }

.tv .demotilbake {
  flex: none;
  padding: 8px 16px;
  border: 1px solid rgba(154, 161, 173, 0.35);
  border-radius: 999px;
  background: var(--flate);
  color: inherit;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: opacity 200ms ease, border-color 200ms ease;
}
.tv .demotilbake:hover, .tv .demotilbake:focus-visible { border-color: var(--lakk); }
/* På rotnivå er det ingenting å gå tilbake til, og knappen er borte til den trengs. */
.tv .demotilbake:disabled { display: none; }

/* Knappene som åpner et blad, e-boken eller tegneserien i demoen. De står under TV-en og ikke i
   skjermbildet, fordi hyllene på bildene bare viser blader. Den som er åpen, er merket. */
.tv .demovalg {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 12px;
}
.tv .demovalg[hidden] { display: none; }
.tv .demovalgnavn { margin-right: 4px; font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dempet); }
.tv .demovalg button {
  padding: 8px 16px;
  border: 1px solid rgba(154, 161, 173, 0.35);
  border-radius: 999px;
  background: var(--flate);
  color: inherit;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease;
}
.tv .demovalg button:hover, .tv .demovalg button:focus-visible { border-color: var(--lakk); }
.tv .demovalg button[aria-pressed="true"] { border-color: var(--lakk); color: var(--lakk); }

/* Toner inn på ett sekund, står i sju, og går ut etter at det neste bildet er helt inne. */
@keyframes bytt {
  0% { opacity: 0; }
  3%, 23% { opacity: 1; }
  26%, 100% { opacity: 0; }
}

/* Det siste bildet har ingenting over seg og toner selv ut til Les nå når runden er omme. */
@keyframes bytt-sist {
  0% { opacity: 0; }
  3%, 17% { opacity: 1; }
  20%, 100% { opacity: 0; }
}

.tv .fot {
  position: relative;
  z-index: 1;
  width: 22%;
  height: clamp(8px, 1.4vw, 16px);
  margin: 0 auto;
  background: linear-gradient(180deg, #14171c, #1c2029);
  clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);
}

@media (prefers-reduced-motion: reduce) {
  .tv img:nth-child(n+2) { animation: none; }
  .tv.demo img { transform: none; transition: opacity 200ms ease; }
}

/* ---------- Kildene som en rad med navn ---------- */

.kilderad {
  margin: clamp(56px, 8vw, 96px) 0 0;
  padding: 26px 0;
  border-block: 1px solid var(--strek);
  text-align: center;
}

.kilderad p { margin: 0 0 18px; font-size: 15px; color: var(--dempet); }

.kildegrupper {
  display: grid;
  grid-template-columns: 1.25fr 1.25fr 1fr;
  gap: 14px;
  margin: 0 auto;
  padding: 0;
  max-width: 1040px;
  list-style: none;
  text-align: left;
}

.kildekort {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
  padding: 20px 22px;
  border-radius: 16px;
  background: var(--flate);
  border: 1px solid var(--strek);
}

.kildekort svg { flex: none; width: 44px; height: 37px; margin-top: 2px; fill: none; stroke: var(--lakk); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kildekort strong { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lakk); }
.kildekort ul { display: grid; grid-template-columns: 1fr; gap: 5px 22px; margin: 0; padding: 0; list-style: none; }
/* De fire skytjenestene har korte navn og står to og to. Den midterste gruppen har også fire navn
   (OPDS kom til), men de er lange og står under hverandre. */
.kildekort:first-child ul:has(li:nth-child(4)) { grid-template-columns: auto auto; justify-content: start; }
.kildekort ul li { margin: 0; font-size: 17px; line-height: 1.35; color: var(--tekst); }

@media (max-width: 860px) {
  .kildegrupper { grid-template-columns: 1fr; }
}

/* ---------- iPad: tre stående skjermbilder, og e-bøker og tegneserier under ---------- */

.ipad { padding: clamp(64px, 10vw, 128px) 0 0; }
.ipad .hode { max-width: 44em; }
.ipad h2 { margin: 0 0 16px; font-size: clamp(30px, 4.2vw, 46px); line-height: 1.06; letter-spacing: -0.015em; }
.ipad .hode p { margin: 0 0 14px; font-size: 18px; line-height: 1.6; }

.nettbrett {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 3vw, 36px);
  margin-top: clamp(28px, 5vw, 56px);
}
.nettbrett figure { margin: 0; }
.nettbrett img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  /* Rammen rundt bildet er iPad-ens kant. */
  border: clamp(5px, 0.9vw, 10px) solid #1b1e26;
  border-radius: clamp(14px, 2.4vw, 28px);
  background: var(--flate);
  box-shadow: 0 0 0 1px var(--strek), 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}

.boker {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(16px, 4vw, 56px);
  margin-top: clamp(36px, 6vw, 72px);
  padding-top: clamp(24px, 4vw, 40px);
  border-top: 1px solid var(--strek);
}
.boker h3 { font-family: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif; font-weight: 700; margin: 0 0 12px; font-size: clamp(24px, 3vw, 32px); line-height: 1.1; letter-spacing: -0.01em; }
.boker p { margin: 0 0 12px; font-size: 17px; line-height: 1.6; max-width: 34em; }

@media (max-width: 640px) {
  .nettbrett { grid-template-columns: repeat(3, minmax(64vw, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
  .nettbrett figure { scroll-snap-align: center; }
  .boker { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Delene med tekst og skjermbilde ---------- */

.del {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  padding: clamp(56px, 9vw, 112px) 0 0;
}

.del.snudd .tekst { order: 2; }
.del.snudd { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

.del h2, .rolig h2 {
  margin: 0 0 16px;
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.015em;
}

.del p { margin: 0 0 14px; font-size: 18px; line-height: 1.6; max-width: 30em; }
.del p:last-child { margin-bottom: 0; }
.del .note { font-size: 15px; }

.del figure { margin: 0; }

.del img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  background: var(--flate);
  box-shadow: 0 0 0 1px var(--strek), 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}

@media (max-width: 820px) {
  .del, .del.snudd { grid-template-columns: minmax(0, 1fr); }
  .del.snudd .tekst { order: 0; }
}

/* ---------- Fjernkontrollen ---------- */

.rolig { padding: clamp(64px, 10vw, 128px) 0 0; }
.rolig > .hode { max-width: 40em; }
.rolig > .hode p { font-size: 18px; margin: 0; }

.knapper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
  background: var(--strek);
  border: 1px solid var(--strek);
  border-radius: 18px;
  overflow: hidden;
}

@media (max-width: 900px) { .knapper { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .knapper { grid-template-columns: minmax(0, 1fr); } }

.knapper li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
  padding: 22px 22px 24px;
  background: var(--flate);
}

.knapper .tast {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--flate-hoy);
  border: 1px solid #2f3541;
  color: var(--tekst);
  font-size: 17px;
  line-height: 1;
}

.knapper strong { display: block; color: var(--tekst); font-size: 17px; font-weight: 600; }
.knapper span.hva { display: block; color: var(--dempet); font-size: 16px; line-height: 1.45; }

/* ---------- Personvern: tre korte løfter ---------- */

.lofter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(20px, 3vw, 40px);
  margin-top: 36px;
}

.lofter h3 { margin: 0 0 6px; font-size: 19px; line-height: 1.3; color: var(--tekst); }
.lofter p { margin: 0; font-size: 16px; }
.lofter div { padding-top: 18px; border-top: 1px solid var(--lakk); }

/* ---------- Pris ---------- */

.pris {
  margin-top: clamp(64px, 10vw, 128px);
  padding: clamp(32px, 6vw, 64px);
  border-radius: 24px;
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(31, 138, 117, 0.28), rgba(31, 138, 117, 0) 60%),
    var(--flate);
  border: 1px solid var(--strek);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}

.pris h2 { margin: 0 0 14px; font-size: clamp(30px, 4.2vw, 46px); line-height: 1.06; letter-spacing: -0.015em; }
.pris p { margin: 0; font-size: 18px; max-width: 28em; }

.pris ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }

.pris li {
  display: grid;
  grid-template-columns: 8.6rem minmax(0, 1fr);
  gap: 4px 18px;
  align-items: baseline;
  margin: 0;
  padding: 18px 20px;
  border-radius: 14px;
  background: rgba(8, 9, 12, 0.55);
  border: 1px solid var(--strek);
}

.pris .tall {
  font-family: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  color: var(--lakk);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  grid-row: span 2;
  align-self: center;
}

.pris li strong { color: var(--tekst); font-weight: 600; font-size: 17px; }
.pris li span.hva { grid-column: 2; color: var(--dempet); font-size: 15px; line-height: 1.45; }

@media (max-width: 820px) { .pris { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Blad i korte trekk: faktaene som en rolig tabell, navn til venstre og forklaring til høyre ---------- */

.fakta { margin: 36px 0 0; border-top: 1px solid var(--strek); }

.fakta div {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 4px 32px;
  padding: 18px 0;
  border-bottom: 1px solid var(--strek);
}

.fakta dt { color: var(--tekst); font-size: 17px; font-weight: 600; line-height: 1.5; }
.fakta dd { margin: 0; max-width: 44em; color: var(--dempet); font-size: 17px; line-height: 1.5; }

@media (max-width: 640px) { .fakta div { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Spørsmål og svar ---------- */

.sporsmal { margin-top: 28px; border-top: 1px solid var(--strek); }

.sporsmal details { border-bottom: 1px solid var(--strek); }

.sporsmal summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  color: var(--tekst);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
}

.sporsmal summary::-webkit-details-marker { display: none; }

.sporsmal summary::after {
  content: "+";
  flex: none;
  color: var(--lakk);
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.2s ease;
}

.sporsmal details[open] summary::after { transform: rotate(45deg); }
.sporsmal summary:focus-visible { outline: 2px solid var(--lakk); outline-offset: 4px; border-radius: 6px; }
.sporsmal details p { margin: 0 0 22px; max-width: 42em; font-size: 17px; }

/* ---------- Avslutningen ---------- */

.slutt { text-align: center; padding: clamp(72px, 11vw, 136px) 0 clamp(16px, 3vw, 32px); }
.slutt img { width: 84px; height: 84px; border-radius: 20px; display: block; margin: 0 auto 24px; box-shadow: 0 0 0 1px var(--strek), 0 20px 40px -20px #000; }
.slutt h2 { margin: 0 auto 14px; max-width: 14em; font-size: clamp(32px, 5vw, 56px); line-height: 1.04; letter-spacing: -0.02em; }
.slutt p { margin: 0 auto; max-width: 32em; font-size: 18px; }

/* ---------- Bevegelse ---------- */

/* Delene glir rolig inn første gang de vises. Uten skript, eller med Reduser bevegelse, står de stille. */
@media (prefers-reduced-motion: no-preference) {
  .js .inn { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s var(--kamera); }
  .js .inn.synlig { opacity: 1; transform: none; }

  /* Skjermbildet i en del kommer et lite hakk etter teksten. */
  .js .inn.del figure { transform: translateY(14px); transition: transform 0.7s var(--kamera) 0.12s; }
  .js .inn.del.synlig figure { transform: none; }

  /* Viften folder seg ut én gang når siden åpnes. Uten skript virker den likt, for dette er ren CSS. */
  .vifte img { animation: vifte-ut 0.7s var(--kamera) 0.1s backwards; }
}

@keyframes vifte-ut {
  from { opacity: 0; transform: translate(0, 4%) rotate(0deg); }
}

/* iPad-ene etter tur. Ikke på smale skjermer, der de ligger i en rad som rulles sidelengs. */
@media (min-width: 641px) and (prefers-reduced-motion: no-preference) {
  .js .inn .nettbrett figure { transform: translateY(14px); transition: transform 0.7s var(--kamera); }
  .js .inn .nettbrett figure:nth-child(2) { transition-delay: 0.09s; }
  .js .inn .nettbrett figure:nth-child(3) { transition-delay: 0.18s; }
  .js .inn.synlig .nettbrett figure { transform: none; }
}

/* Forsider og skjermbilder løfter seg noen få piksler under pekeren. Bare der det finnes en peker. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .vifte img, .del img, .nettbrett img { transition: transform 0.32s var(--kamera), box-shadow 0.32s var(--kamera); }
  .vifte img:hover { --loft: 8px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 26px 32px -14px rgba(0, 0, 0, 0.9); }
  .del img:hover, .nettbrett img:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px #343a47, 0 38px 60px -30px rgba(0, 0, 0, 0.9); }
}

/* Lett dybde: skriptet nederst på siden setter --dybde (noen få piksler) på TV-en og iPad-ene mens
   siden rulles. Bare på brede skjermer: på smale ligger iPad-ene i en rad som rulles sidelengs. */
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  [data-dybde] { translate: 0 var(--dybde, 0px); }
}

/* ---------- Guider: kort som lenker til landingssidene (forsiden og landingssidene selv) ---------- */

.guider {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

.guider li { margin: 0; }

.guider a {
  display: block;
  height: 100%;
  padding: 20px 22px;
  border: 1px solid rgba(154, 161, 173, 0.22);
  border-radius: 16px;
  background: var(--flate);
  color: var(--dempet);
  font-size: 16px;
  line-height: 1.45;
  text-decoration: none;
  transition: border-color 320ms cubic-bezier(.22, .8, .2, 1);
}

.guider a:hover, .guider a:focus-visible { border-color: var(--lakk); }
.guider strong { display: block; margin-bottom: 4px; color: var(--tekst); font-size: 19px; font-weight: 600; line-height: 1.3; }

/* Radene under lenkene i bunnen: landingssidene, og Blad på andre språk. */
footer .bunnguider { margin-top: 10px; }

/* ---------- Kort forside: åpning som gjør hele jobben, hovedpunkter og utvidelser ----------
   Forsiden (/, /no/) er kort med vilje. Første skjerm sier hva Blad er, hva det koster og hvor det
   finnes, viser appen og har merket til App Store. Under kommer noen få hovedpunkter (.punkt) med én
   overskrift, én setning og ett bilde, og resten ligger i utvidelser (details.mer), som virker uten
   JavaScript. Landingssidene bruker det samme stilarket; alt her gjelder klasser bare forsiden har,
   eller er avgrenset med .forside:not(.guide). */

/* Åpningen: teksten først og TV-en under. På brede skjermer står de side om side. */
.hoved { padding-top: clamp(20px, 3.4vw, 44px); }
.hoved h1 { margin-bottom: 18px; font-size: clamp(36px, 4vw + 22px, 72px); }
.hoved .ingress { max-width: 30em; font-size: clamp(18px, 2vw, 21px); }
.hoved .valg { margin-top: 26px; }

/* Uthevet i en setning: det en som bare skummer, skal få med seg. Brukes sparsomt i tekstene. */
.hoved .ingress strong, .kjerne strong, .punkt .tekst p strong, .kildehode > p strong, .ipad .hode p strong { color: var(--tekst); font-weight: 600; }

/* De tre linjene en avgjørelse henger på: pris, hvor appen finnes, og egne filer uten kopisperre. */
.kjerne {
  display: grid;
  gap: 7px;
  margin: 24px auto 0;
  padding: 0;
  max-width: 31em;
  list-style: none;
  font-size: 15px;
  line-height: 1.45;
  color: var(--dempet);
}
.kjerne li { margin: 0; }

.hoved .tvmerke { margin-top: clamp(26px, 5vw, 48px); }
.hoved .tvmerke + .tv { margin-top: 14px; }

@media (min-width: 1000px) {
  .hoved {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    gap: clamp(32px, 4.5vw, 64px);
    text-align: left;
  }
  .hoved h1 { margin-left: 0; font-size: clamp(46px, 4.7vw, 62px); line-height: 1.04; }
  .hoved .ingress, .kjerne { margin-left: 0; }
  .hoved .valg { justify-content: flex-start; }
  .hoved .tvmerke { margin-top: 0; text-align: center; }
  .hoved .tv::before { inset: 8% -3% -10%; }
}

/* Knappen som åpner alle utvidelsene på én gang. Skriptet viser den; uten skript finnes den ikke. */
.visalt { margin: clamp(40px, 6vw, 72px) 0 0; text-align: center; }
.visalt[hidden] { display: none; }
.visalt button {
  padding: 9px 18px;
  border: 1px solid rgba(154, 161, 173, 0.35);
  border-radius: 999px;
  background: transparent;
  color: var(--dempet);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease;
}
.visalt button:hover, .visalt button:focus-visible { border-color: var(--lakk); color: var(--lakk); }
.visalt button:focus-visible { outline: 2px solid var(--lakk); outline-offset: 3px; }
.visalt + .kilderad { margin-top: clamp(28px, 4vw, 48px); }

/* Kildene som et hovedpunkt: overskrift, én setning og de tre kortene. */
.kildehode { padding: 0; border: 0; }
.kildehode h2 { margin: 0 auto 14px; max-width: 16em; font-size: clamp(30px, 4.2vw, 46px); line-height: 1.06; letter-spacing: -0.015em; }
.kildehode > p { margin: 0 auto 28px; max-width: 34em; font-size: 18px; line-height: 1.6; }
.kildehode .utvid { max-width: 1040px; margin-inline: auto; text-align: left; }

/* Hovedpunktene: som .del, med utvidelsen i full bredde under tekst og bilde. */
.punkt { row-gap: 26px; padding-top: clamp(52px, 6.5vw, 88px); }
.punkt > .utvid { grid-column: 1 / -1; order: 3; }
.punkt > .utvid > .mer { margin-top: 0; }
.forside:not(.guide) .rolig, .forside:not(.guide) .ipad { padding-top: clamp(56px, 7vw, 92px); }
.forside:not(.guide) .pris { margin-top: clamp(56px, 7vw, 92px); }

/* Utvidelsen: en rad med pluss foran, som i spørsmålene. Raden er minst 48 px høy, så den er lett å treffe. */
.mer { margin-top: 26px; border-block: 1px solid var(--strek); }
.mer > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 0;
  cursor: pointer;
  list-style: none;
  color: var(--tekst);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}
.mer > summary::-webkit-details-marker { display: none; }
.mer > summary::before {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid #343a47;
  border-radius: 50%;
  color: var(--lakk);
  font-size: 19px;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.2s ease;
}
.mer[open] > summary::before { transform: rotate(45deg); }
.mer > summary:hover { color: var(--lakk); }
.mer > summary:focus-visible { outline: 2px solid var(--lakk); outline-offset: 4px; border-radius: 6px; }
.merinnhold { padding: 8px 0 clamp(24px, 4vw, 36px); }
.merinnhold > p { margin: 0 0 12px; max-width: 42em; font-size: 17px; line-height: 1.6; }
.merinnhold > .knapper, .merinnhold > .fakta { margin-top: 8px; }
.merinnhold > .boker { margin-top: clamp(20px, 3vw, 32px); }

/* En underdel i en utvidelse: tekst og skjermbilde side om side, mindre enn hovedpunktene. */
.underdel {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  padding-top: clamp(20px, 3vw, 32px);
}
.underdel + .underdel { margin-top: clamp(24px, 4vw, 40px); border-top: 1px solid var(--strek); }
.underdel h3 { margin: 0 0 12px; font-family: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif; font-weight: 700; font-size: clamp(24px, 3vw, 32px); line-height: 1.1; letter-spacing: -0.01em; }
.underdel p { margin: 0 0 12px; max-width: 30em; font-size: 17px; line-height: 1.6; }
.underdel p:last-child { margin-bottom: 0; }
.underdel .note { font-size: 15px; }
.underdel figure { margin: 0; }
.underdel img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 12px; background: var(--flate); box-shadow: 0 0 0 1px var(--strek), 0 24px 48px -28px rgba(0, 0, 0, 0.8); }
@media (max-width: 820px) { .underdel { grid-template-columns: minmax(0, 1fr); } }

/* Tomme ankre foran en utvidelse: id-ene til underdelene, så lenker dit treffer også uten skript. */
.anker { display: block; height: 0; scroll-margin-top: 16px; }

/* Prisen på smale skjermer: tallet over teksten (før ble teksten klemt i en spalte på 66 px). */
@media (max-width: 560px) {
  .pris li { grid-template-columns: minmax(0, 1fr); }
  .pris .tall { grid-row: auto; align-self: start; margin-bottom: 4px; }
  .pris li span.hva { grid-column: 1; }
}

/* Viften står nå i avslutningen, litt mindre enn da den åpnet siden. */
.slutt .vifte { --b: clamp(60px, 15vw, 112px); margin-bottom: clamp(36px, 5vw, 56px); }
.slutt .vifte img { width: var(--b); height: auto; margin: 0; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 18px 28px -14px rgba(0, 0, 0, 0.85); }

/* Bunnen: varemerkelinjene skal stå der, men med mindre vekt enn lenkene over. */
.forside:not(.guide) footer { margin-top: 56px; }
.forside:not(.guide) footer > p { margin: 18px 0 0; font-size: 12.5px; line-height: 1.55; }
.forside:not(.guide) footer .bunnguider { font-size: 14px; }