/*
  Forsiden på nausto.no (forslag D): ett stilark for den norske og den engelske utgaven.
  Fargene og Manrope kommer fra /brand/nausto.css; eksemplene i «Spør Nausto» har spor.css.
  Målene er referansen i docs/proposals/forside/referanse/forslag-d.dc.html, oversatt fra
  lerretets container-enheter til vw og rem; telefonvarianten gjelder under 720 px.
*/

/*
  Heroen og prisbåndet er sjøgrønne i begge temaer (eiers valg for forslag D): flaten er
  brand.ink, og det som ligger på den, bruker profilens lyse palett uansett tema. Verdiene står
  her én gang, som egne variabler; alt annet på siden følger --nausto-*-variablene i lyst og
  mørkt tema. Fila er et navngitt unntak i design/brand-audit.config.json for denne blokken.
*/
:root {
  --forside-ink: #123c43;
  --forside-ink-tekst: #ffffff;
  --forside-ink-ingress: #e0efeb;
  --forside-ink-dempet: #aec7c7;
  --forside-ink-boks: #24474b;
  --forside-ink-kant: #36565c;
  --forside-ink-ramme: #102a30;
  --forside-kort: #ffffff;
  --forside-kort-tekst: #123c43;
  --forside-kort-dempet: #516d72;
  --forside-kort-kant: #cdddda;
  --forside-kort-subtil: #e0efeb;
  --forside-kort-handling: #126a70;
  --forside-kort-handling-hover: #105b61;
  --forside-kort-ok: #246b55;
  /* Telefonrammene i kapitlene: sjøgrønn i lyst tema, litt lysere enn flatene i mørkt tema. */
  --forside-telefonramme: var(--forside-ink);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --forside-telefonramme: var(--nausto-surfaceSubtle);
  }
}

:root[data-theme='dark'] {
  --forside-telefonramme: var(--nausto-surfaceSubtle);
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--nausto-background);
  color: var(--nausto-text);
  font-family: var(--nausto-font);
  font-size: 1rem;
  line-height: 1.5;
  /* Lange sammensatte ord brytes ved stor tekst på smal skjerm i stedet for å skyve siden bredere. */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
}

img,
svg {
  display: block;
}

a {
  color: var(--nausto-action);
}

a:hover {
  color: var(--nausto-actionHover);
}

summary {
  list-style: none;
  cursor: pointer;
}

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

details[open] .chevron {
  transform: rotate(180deg);
}

:focus-visible {
  outline: 2px solid var(--nausto-focus);
  outline-offset: 3px;
}

.ink :focus-visible {
  outline-color: var(--nausto-accent);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Felles mål */

.ramme {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.seksjon {
  padding: 5rem 0;
}

.seksjon-hvit {
  background: var(--nausto-surface);
}

.seksjon-papir {
  background: var(--nausto-background);
}

.ink {
  background: var(--forside-ink);
  color: var(--forside-ink-tekst);
}

.stabel {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.to-kolonner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3rem;
}

.to-kolonner-speilet {
  flex-direction: row-reverse;
}

.kolonne-tekst {
  flex: 1 1 400px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* To telefonrammer (250 + 240 px og 24 px mellomrom) trenger 514 px: spalten blir ikke smalere
 * enn det, så oppsettet står i én spalte til to får plass, i stedet for at rammene stikker ut av
 * siden. Under 720 px vises bare den ene rammen, og min(100 %, …) holder spalten innenfor. */
.kolonne-bilder {
  flex: 1 1 400px;
  min-width: min(100%, 520px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 1.5rem;
}

.nav-compact,
.only-narrow {
  display: none;
}

/* Typografi */

.eyebrow {
  font-size: 0.9375rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--nausto-textMuted);
}

.ink .eyebrow {
  color: var(--nausto-accent);
}

.tittel {
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.tittel-balansert {
  text-wrap: balance;
}

.ingress {
  max-width: 520px;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--nausto-textMuted);
  text-wrap: pretty;
}

.ingress-bred {
  max-width: 560px;
}

.ink .ingress {
  max-width: none;
  color: var(--forside-ink-ingress);
}

.liten {
  font-size: 0.875rem;
  line-height: 1.3125rem;
  color: var(--nausto-textMuted);
}

.ink .liten {
  color: var(--forside-ink-dempet);
}

.dempet {
  color: var(--nausto-textMuted);
}

.kapittel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1rem;
}

.kapittel-nummer {
  font-size: 3.5rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--nausto-action);
  font-variant-numeric: tabular-nums;
}

.kapittel-tekst {
  max-width: 720px;
}

/* Lister med hake */

.hakeliste {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.hakeliste li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 1rem;
  line-height: 1.5rem;
}

.hakeliste svg {
  flex: none;
  margin-top: 2px;
  color: var(--nausto-action);
}

.hakeliste li > span {
  min-width: 0;
}

/* Knapper og lenker */

.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  max-width: 100%;
  /* Ved stor tekst på smal skjerm brytes heller ordet enn at knappen skyver siden bredere. */
  overflow-wrap: anywhere;
  min-height: 3rem;
  padding: 0.6875rem 1.4375rem;
  border: 1px solid transparent;
  border-radius: var(--nausto-radius-button);
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  text-decoration: none;
}

.knapp-mint {
  min-height: 3.25rem;
  padding: 0.8125rem 1.6875rem;
  background: var(--nausto-accent);
  color: var(--forside-kort-tekst);
  font-size: 1.0625rem;
  font-weight: 700;
}

.knapp-mint:hover {
  /* Mintknappen står på sjøgrønt: litt lysere ved hover, ikke handlingsfargen, som er lik flaten. */
  background: var(--forside-ink-ingress);
  color: var(--forside-kort-tekst);
}

.knapp-kant {
  border-color: var(--nausto-borderStrong);
  background: var(--nausto-surface);
  color: var(--nausto-action);
}

.knapp-kant:hover {
  color: var(--nausto-actionHover);
  border-color: var(--nausto-action);
}

.tekstlenke {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  font-weight: 600;
  text-decoration: none;
}

.lenke-i-tekst {
  color: var(--nausto-action);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Toppen: merket og menyen */

.topp {
  display: flex;
  flex-wrap: wrap;
  /* Toppen justeres fra toppen, så merket blir stående når menyen folder seg ut under «Meny». */
  align-items: flex-start;
  gap: 0.5rem 1.5rem;
  padding: 1rem 1.5rem;
}

.merke {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  flex: none;
}

.merke img {
  width: 138px;
  height: 38px;
}

.nav-wide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  margin-left: auto;
}

.nav-wide a,
.nav-compact nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.625rem;
  color: var(--forside-ink-tekst);
  font-size: 0.9375rem;
  line-height: 1.25rem;
  font-weight: 600;
  text-decoration: none;
}

.nav-wide a:hover,
.nav-compact nav a:hover {
  color: var(--forside-ink-tekst);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.nav-wide .nav-sprak,
.nav-compact .nav-sprak {
  color: var(--forside-ink-dempet);
}

.nav-wide .nav-logginn,
.nav-compact .nav-logginn {
  color: var(--nausto-accent);
}

.nav-compact {
  margin-left: auto;
}

.nav-compact summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 0.5rem;
  color: var(--forside-ink-tekst);
  font-size: 0.9375rem;
  line-height: 1.25rem;
  font-weight: 600;
}

.nav-compact nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.25rem 0 0.75rem;
}

.nav-compact nav a {
  padding: 0 0.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
}

/* Heroen */

.hero {
  overflow: hidden;
}

.hero-innhold {
  padding: 2rem 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.hero-tekst {
  max-width: 880px;
}

.hero h1 {
  font-size: clamp(2.375rem, 6.6vw, 6rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--forside-ink-tekst);
}

.hero h1 span {
  display: block;
}

.hero .ingress {
  max-width: 640px;
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  line-height: 1.5;
}

.hero-handling {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hero-status {
  max-width: 520px;
  padding: 0.875rem 1rem;
  border-radius: var(--nausto-radius-button);
  background: var(--forside-ink-boks);
  color: var(--forside-ink-tekst);
  font-size: 1rem;
  line-height: 1.5rem;
}

/* Produktbildet: PC-skjermen med telefonen oppå, skåret av flatens nedre kant. Høyden følger
 * nettleserrammen, så kanten alltid skjærer bildet på samme sted, også på smalere flater. */

.hero-bilde {
  max-height: 540px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.hero-pc {
  grid-area: 1 / 1;
  border-radius: 12px 12px 0 0;
  border: 1px solid var(--forside-ink-kant);
  border-bottom: 0;
  overflow: hidden;
  background: var(--forside-kort);
  box-shadow: 0 24px 48px var(--nausto-scrim);
}

.hero-pc-topp {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--forside-kort-kant);
  background: var(--forside-kort-subtil);
}

.hero-pc-prikk {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: var(--forside-kort-kant);
}

.hero-pc-adresse {
  margin-left: 12px;
  padding: 4px 12px;
  border-radius: 8px;
  background: var(--forside-kort);
  border: 1px solid var(--forside-kort-kant);
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--forside-kort-dempet);
}

/* Bildet er 1440 × 940 i CSS-piksler; rammen viser alltid de øverste rundt 66 % (1440 × 620), så
 * den tomme nedre delen av Hjem ikke kommer fram når rammen er smal. */
.hero-pc img {
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 620;
  object-fit: cover;
  object-position: top;
}

/* Telefonrammen får samme kant som nettleserrammen, så den ikke flyter sammen med heroen når
 * appen er mørk. */
.hero-telefon {
  grid-area: 1 / 1;
  justify-self: start;
  align-self: end;
  width: clamp(160px, 16vw, 230px);
  margin: 0 0 -72px 32px;
  padding: 7px;
  border: 1px solid var(--forside-ink-kant);
  border-radius: 30px;
  background: var(--forside-ink-ramme);
  box-shadow: 0 20px 40px var(--nausto-scrim);
}

.hero-telefon .telefon-skjerm {
  border-radius: 24px;
}

@media (max-width: 720px) {
  .hero-bilde {
    height: 380px;
    display: block;
  }

  .hero-telefon {
    width: 260px;
    margin: 0 auto;
    padding: 8px 8px 0;
    border-radius: 36px 36px 0 0;
    box-shadow: 0 24px 48px var(--nausto-scrim);
  }

  .hero-telefon .telefon-skjerm {
    border-radius: 28px 28px 0 0;
  }
}

/* Telefonrammer i kapitlene */

.telefon {
  flex: none;
  width: 240px;
  max-width: 100%;
  padding: 8px;
  border-radius: 36px;
  background: var(--forside-telefonramme);
  box-shadow: 0 20px 40px var(--nausto-shadowSoft);
}

.telefon-skjerm {
  border-radius: 28px;
  overflow: hidden;
  background: var(--nausto-background);
  aspect-ratio: 390 / 797;
}

.telefon-skjerm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.telefon-forskjovet {
  margin-top: 3rem;
}

.telefon-forskjovet-mer {
  margin-top: 4rem;
}

.telefon-skraa-ramme {
  flex: none;
  perspective: 1200px;
  padding: 1rem 0;
}

.telefon-skraa {
  width: 250px;
  box-shadow: 28px 32px 56px var(--nausto-shadowSoft);
  transform: rotateY(-18deg) rotateX(4deg);
}

/* Spør Nausto; klassene med prefikset spor- tilhører eksemplene i spor.css. */

.assistent-tekst {
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.assistent-eksempler {
  flex: 1 1 440px;
  min-width: 0;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Oppgavetavla */

.host-innhold {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.tavle {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 12px 4px 24px;
  scrollbar-width: thin;
}

.tavle-kolonne {
  flex: 0 0 236px;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.75rem;
  border-radius: var(--nausto-radius-card);
  background: var(--nausto-surfaceSubtle);
}

.tavle-topp {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0.375rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
}

.tavle-antall {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--nausto-textMuted);
}

.tavle-kort {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.875rem;
  border-radius: var(--nausto-radius-button);
  background: var(--nausto-surface);
}

.tavle-kort svg {
  color: var(--nausto-action);
}

.tavle-kort-tittel {
  font-size: 1rem;
  line-height: 1.375rem;
  font-weight: 600;
}

.tavle-kort-under {
  font-size: 0.8125rem;
  line-height: 1.125rem;
  color: var(--nausto-textMuted);
}

.tavle-kort-loftet {
  position: relative;
  border: 1px solid var(--nausto-action);
  box-shadow: 0 16px 32px var(--nausto-shadowSoft);
  transform: rotate(2deg) translate(6px, -6px);
}

.tavle-peker {
  position: absolute;
  right: -8px;
  bottom: -14px;
  color: var(--nausto-text);
  fill: var(--nausto-surface);
}

.tavle-legg-til {
  padding: 0.5rem 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--nausto-action);
}

@media (prefers-reduced-motion: reduce) {
  .tavle-kort-loftet {
    transform: none;
  }
}

/* Kort i rutenett: Hele året, Kom i gang, Det folk lurer på */

.kortrad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1.5rem;
}

.kort {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1.5rem;
  border-radius: var(--nausto-radius-card);
  background: var(--nausto-surface);
}

.kort svg {
  color: var(--nausto-action);
}

.kort h3 {
  font-size: 1.125rem;
  line-height: 1.625rem;
  font-weight: 700;
}

.kort p {
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--nausto-textMuted);
}

.steg {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1.5rem;
}

.steg li {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  border-radius: var(--nausto-radius-card);
  background: var(--nausto-background);
}

.steg-nummer {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 1.25rem;
  background: var(--nausto-text);
  color: var(--nausto-background);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  line-height: 1.5rem;
  font-weight: 700;
}

.steg h3 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
}

.steg p {
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--nausto-textMuted);
}

.kom-i-gang-innhold {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Priser (sjøgrønn flate) */

.priser {
  padding: 5.5rem 0;
}

.priser-innhold {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.priser-topp {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.prisnivaa {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

.priskort {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.75rem;
  border-radius: var(--nausto-radius-card);
  background: var(--forside-kort);
  color: var(--forside-kort-tekst);
}

.priskort h3 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
}

.priskort-topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.pris-merke {
  padding: 0.25rem 0.625rem;
  border-radius: 10px;
  background: var(--nausto-accent);
  color: var(--forside-kort-tekst);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}

.pris {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.pris-belop {
  font-size: 2.75rem;
  line-height: 3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.priskort .dempet,
.priskort .liten,
.pris-periode {
  color: var(--forside-kort-dempet);
}

.priskort p {
  font-size: 1rem;
  line-height: 1.5rem;
  text-wrap: pretty;
}

.priskort .liten {
  font-size: 0.875rem;
  line-height: 1.3125rem;
}

.priskort .hakeliste {
  gap: 0.5rem;
}

.priskort .hakeliste svg {
  color: var(--forside-kort-handling);
}

.knapp-handling {
  margin-top: auto;
  background: var(--forside-kort-handling);
  color: var(--forside-ink-tekst);
}

.knapp-handling:hover {
  background: var(--forside-kort-handling-hover);
  color: var(--forside-ink-tekst);
}

.priser-alt summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  color: var(--nausto-accent);
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
}

.priser-alt summary:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.tabell-boks {
  margin-top: 1rem;
  overflow-x: auto;
  border-radius: var(--nausto-radius-button);
  background: var(--forside-kort);
  color: var(--forside-kort-tekst);
}

.tabell {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.375rem;
}

.tabell th,
.tabell td {
  text-align: left;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--forside-kort-kant);
}

.tabell thead th {
  padding: 1rem 1.25rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
}

.tabell thead th:first-child {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--forside-kort-dempet);
}

.tabell tbody th {
  font-weight: 500;
}

.tabell tbody tr:last-child th,
.tabell tbody tr:last-child td {
  border-bottom: 0;
}

.tabell .premium {
  background: var(--forside-kort-subtil);
}

.tabell svg {
  color: var(--forside-kort-ok);
}

.tabell .ikke-med {
  color: var(--forside-kort-dempet);
}

.priser-vilkaar {
  max-width: 800px;
  text-wrap: pretty;
}

/* Det folk lurer på */

.sporsmal-innhold {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.sporsmal-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 2rem 3rem;
}

.sporsmal-liste > div {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sporsmal-liste h3 {
  font-size: 1.125rem;
  line-height: 1.625rem;
  font-weight: 700;
}

.sporsmal-liste p {
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--nausto-textMuted);
}

.videre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2rem;
  border-radius: var(--nausto-radius-card);
  background: var(--nausto-surface);
  border: 1px solid var(--nausto-border);
}

.videre-tekst {
  flex: 1 1 360px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.videre h3 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
}

.videre p {
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--nausto-textMuted);
}

/* Bunnteksten */

.bunn {
  background: var(--nausto-surface);
  border-top: 1px solid var(--nausto-border);
  padding: 3rem 0 2rem;
}

.bunn-innhold {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.bunn-kolonner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 2rem 1.5rem;
}

.bunn-kolonne {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.bunn-merke {
  gap: 0.75rem;
}

.bunn-merke img {
  width: 146px;
  height: 40px;
}

.bunn h3 {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--nausto-textMuted);
}

/* Lenkene i bunnteksten er treffmål på 44 px; teksten uten lenke står dempet, så den ikke ligner en. */
.bunn-kolonne a,
.bunn-uten-lenke {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  max-width: 100%;
  overflow-wrap: anywhere;
  min-width: 2.75rem;
  min-height: 2.75rem;
  font-size: 0.9375rem;
  line-height: 1.375rem;
  font-weight: 600;
}

.bunn-kolonne a {
  color: var(--nausto-text);
  text-decoration: none;
}

.bunn-kolonne a:hover {
  color: var(--nausto-action);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.bunn-kolonne a[href^='mailto:'] {
  color: var(--nausto-action);
}

.bunn-kolonne a[href^='mailto:']:hover {
  color: var(--nausto-actionHover);
}

.bunn-uten-lenke {
  color: var(--nausto-textMuted);
}

.bunn-kontakt p {
  padding: 0.25rem 0;
  font-size: 0.9375rem;
  line-height: 1.375rem;
}

.bunn-opphav {
  padding-top: 1.5rem;
  border-top: 1px solid var(--nausto-border);
}

/*
  Telefon (under 720 px, som lerretets beholder): merket og «Meny», ett bilde per kapittel.
  Står sist, så reglene over ikke slår dem.
*/
@media (max-width: 720px) {
  .nav-wide,
  .only-wide {
    display: none;
  }

  .nav-compact,
  .only-narrow {
    display: block;
  }

  .seksjon {
    padding: 3.5rem 0;
  }

  .priser {
    padding: 4rem 0;
  }
}