/* /drift/ (ux-forside PR 12). Fasit: mockups/drift/nettside/drift-med-pris.html og drift-nett.css.
   Står for seg selv: forside.css og landing.css lastes ikke her, så overskriftene, knappen og
   hakelisten har egne dn-klasser. Farger bare fra tokens.css. */

.dn-side { padding-bottom: 40px; }
.dn-skjult { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Store overskrifter i versaler, som .fs-tittel og .fs-h2 på forsiden */
.dn-tittel, .dn-h2 {
  margin: 0; font-family: var(--skrift-display); font-weight: var(--skrift-vekt-overskrift); text-transform: uppercase;
  line-height: 0.97; letter-spacing: 0.005em; color: var(--farge-honerod); --omriss-farge: var(--farge-honerod);
}
.dn-tittel { font-size: clamp(46px, 7.4vw, 120px); }
.dn-tittel .omriss + .linje:not(.omriss) { margin-top: 0.07em; }
.dn-h2 { font-size: clamp(44px, 5.2vw, 84px); }
.dn-h2 .omriss { font-weight: var(--skrift-vekt-underoverskrift); }
.dn-bolge { margin-top: 10px; width: min(420px, 70%); }

/* Hovedknappen i stor utgave, som .fs-knapp */
.dn-cta { margin-top: 34px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.dn-cta-under { margin: 0; font-size: 12.5px; color: var(--farge-tekst-dempet); }
.knapp.knapp-pil.dn-knapp { font-size: 2rem; gap: 1rem; transform: none; }
.dn-knapp .knapp-pil-ikon { width: 60px; height: 60px; border-radius: 17px; }
.dn-knapp .knapp-pil-ikon svg { width: 28px; height: 28px; }

/* Hero */
.dn-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: center; padding: 64px var(--kant-side) 40px; max-width: var(--bredde-side); margin: 0 auto; }
.dn-hero-tekst { margin: 26px 0 0; max-width: 28em; font-size: 19px; color: var(--farge-tekst); }
.dn-hero-illu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; align-items: end; }
.dn-hero-illu img { width: 100%; height: auto; }
/* Én tegning fra LinkedIn-pakken i helten (drift og «Få appen ut», Anders 8.11), satt inn som SVG. */
.dn-hero-illu.helt-illu { grid-template-columns: 1fr; }
.helt-illu .helt-tegning { width: 100%; max-width: 460px; height: auto; justify-self: center; }
.helt-tegning .hf-rod { fill: var(--farge-honerod); }
.helt-tegning .hf-marine { fill: var(--farge-marine); }
.helt-tegning .hf-krem { fill: var(--farge-krem); }
.helt-tegning .hs-rod { stroke: var(--farge-honerod); }
.helt-tegning .hs-marine { stroke: var(--farge-marine); }
.helt-tegning .hs-krem { stroke: var(--farge-krem); }

/* Blokkene */
.dn-blokk { max-width: var(--bredde-side); margin: 0 auto; padding: 90px var(--kant-side) 0; }
.dn-blokk-siste { padding-bottom: 60px; }
.dn-ingress { margin: 24px 0 0; max-width: 30em; font-size: 19px; color: var(--farge-tekst); }

/* De fire nivåene */
.dn-kort { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--antall, 4), minmax(0, 1fr)); gap: 18px; }
.dn-kort > li {
  display: flex; flex-direction: column; gap: 12px; padding: 22px 20px; background: var(--farge-kort);
  border: 1.5px solid var(--farge-linje); border-radius: 14px;
}
.dn-kort img { width: 100%; max-width: 180px; height: auto; aspect-ratio: 160 / 140; }
.dn-kort h3 { margin: 0; font-family: var(--skrift-display); font-weight: var(--skrift-vekt-overskrift); text-transform: uppercase; font-size: 44px; line-height: 0.9; color: var(--farge-marine); }
.dn-kort p { margin: 0; }
.dn-niva-nr { margin: 0; font-family: var(--skrift-mono); font-size: 13px; color: var(--farge-honerod); }
.dn-passer { font-weight: 700; color: var(--farge-tekst); }
.dn-hakeliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; font-size: var(--skrift-str-liten); }
.dn-hakeliste li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 0.6rem; align-items: start; color: var(--farge-tekst); }
.dn-hakeliste li::before { content: ""; width: 18px; height: 18px; margin-top: 2px; background: url("../appsjekk/hake.e247d8cff300.svg") center / contain no-repeat; }
.dn-pris { margin-top: auto !important; padding-top: 8px; font-family: var(--skrift-mono); font-size: 14px; color: var(--farge-marine); }
.dn-pris b { font-family: var(--skrift-display); font-weight: var(--skrift-vekt-overskrift); font-size: 30px; letter-spacing: 0.01em; }
.dn-fot { margin: 10px 0 0; font-family: var(--skrift-mono); font-size: 12.5px; color: var(--farge-tekst-dempet); }

/* Tabellen «Dette er med på hvert nivå» */
.dn-tabell-plass { margin-top: 40px; border: 1.5px solid var(--farge-linje); border-radius: 14px; background: var(--farge-kort); }
.dn-tabell { width: 100%; min-width: 52rem; border-collapse: collapse; font-size: var(--skrift-str-liten); }
.dn-tabell caption { text-align: left; padding: 16px 20px 6px; font-weight: 700; color: var(--farge-marine); }
.dn-tabell th, .dn-tabell td { text-align: left; vertical-align: top; padding: 12px 16px; border-top: 1px solid var(--farge-linje); border-bottom: 0; }
.dn-tabell thead th { font-family: var(--skrift-mono); font-size: 12.5px; font-weight: 400; color: var(--farge-tekst-dempet); }
.dn-tabell thead th b { display: block; font-family: var(--skrift-display); font-weight: var(--skrift-vekt-overskrift); font-size: 24px; text-transform: uppercase; color: var(--farge-marine); }
.dn-tabell tbody th { font-size: var(--skrift-str-liten); font-weight: 700; color: var(--farge-marine); width: 14rem; }
.dn-tabell td { color: var(--farge-tekst); }

/* Ett nivå om gangen på mobil (samme mønster som driftstilbudet) */
.dn-mobil { display: none; }

/* Prisen følger appen */
.dn-to { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin-top: 30px; }
.dn-to h3 { margin: 0; font-family: var(--skrift-display); font-weight: var(--skrift-vekt-overskrift); text-transform: uppercase; font-size: 36px; line-height: 0.95; color: var(--farge-marine); }
.dn-to p { margin: 12px 0 0; color: var(--farge-tekst); max-width: 28em; }

/* Først en Appsjekk */
.dn-forst { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.dn-neste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-width: 34em; }
.dn-neste li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 16px; padding: 16px 0; border-top: 1.5px dashed var(--farge-stiplet); }
.dn-neste li:last-child { border-bottom: 1.5px dashed var(--farge-stiplet); }
.dn-neste .mono { grid-row: span 2; padding-top: 4px; font-size: 13px; color: var(--farge-honerod); }
.dn-neste b { font-family: var(--skrift-display); font-weight: var(--skrift-vekt-overskrift); text-transform: uppercase; font-size: 28px; line-height: 1; color: var(--farge-marine); }
.dn-neste span:not(.mono) { color: var(--farge-tekst); }
.dn-neste li:last-child b { color: var(--farge-honerod); }

@media (max-width: 1100px) {
  .dn-kort { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
}
@media (max-width: 860px) {
  .dn-hero, .dn-to, .dn-forst { grid-template-columns: 1fr; gap: 24px; }
  .dn-hero { padding-top: 40px; }
  .dn-hero-illu { order: -1; grid-template-columns: repeat(var(--antall, 4), minmax(0, 1fr)); }
  .dn-hero-illu.helt-illu { grid-template-columns: 1fr; }
  .helt-illu .helt-tegning { max-width: 300px; justify-self: start; }
  .dn-hero-tekst, .dn-ingress { font-size: 17px; }
  .dn-cta { margin-top: 20px; }
  .knapp.knapp-pil.dn-knapp { font-size: 1.625rem; }
  .dn-kort { grid-template-columns: 1fr; }
  .dn-blokk { padding-top: 70px; }
}
@media (max-width: 47.99rem) {
  .dn-tabell-plass { display: none; }
  .dn-mobil { display: flex; flex-direction: column; gap: 0.875rem; margin-top: 1.25rem; }
  .dn-mobil-niva { padding: 1rem 1.125rem; border-radius: 14px; background: var(--farge-kort); box-shadow: inset 0 0 0 1.5px var(--farge-linje-sterk); }
  .dn-mobil-niva h3 {
    display: flex; flex-direction: column; gap: 0.25rem; margin: 0 0 0.5rem;
    font-family: var(--skrift-display); font-weight: var(--skrift-vekt-overskrift); text-transform: uppercase;
    font-size: 1.75rem; line-height: 0.95; color: var(--farge-marine);
  }
  .dn-mobil-niva h3 .dn-niva-nr { text-transform: none; font-weight: 400; }
  .dn-mobil-niva dl { margin: 0; }
  .dn-mobil-niva dl > div { padding: 0.5rem 0; border-top: 1px dashed var(--farge-linje-sterk); }
  .dn-mobil-niva dt { font-size: 0.875rem; font-weight: 700; color: var(--farge-tekst); }
  .dn-mobil-niva dd { margin: 0.125rem 0 0; font-size: var(--skrift-str-liten); color: var(--farge-brodtekst); }
}

/* Uten DRIFT_KUNDE (PR 17): «Kommer snart» i heroen og på hvert nivå. */
.dn-snart-linje { margin: 18px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--farge-tekst); }
.dn-niva-snart { margin: -4px 0 0 !important; }
.dn-niva-snart-under { margin: 4px 0 0 !important; }

/* Liten forklaring under radnavnet, for eksempel «Sikkerhetsoppdateringer» (Anders 2026-11-03). */
.rad-forklaring { display: block; margin-top: .2rem; font-size: var(--skrift-str-mini); font-weight: 400; line-height: 1.4; color: var(--farge-tekst-dempet); }

/* Like brede nivåkolonner (planleggingsøkten 3.11): første kolonne fast, resten deles likt. */
.dn-tabell { table-layout: fixed; }
.dn-tabell thead th:first-child { width: 14rem; }
.rad-forklaring-over { margin: 0 0 4px; font-size: var(--skrift-str-mini); line-height: 1.45; color: var(--farge-tekst-dempet); }
.rad-forklaring-over b { color: var(--farge-tekst); }

/* Trygghet i drift P10: linjen i stedet for kortet for nivå 4 (NIVAA4_SKJULT). */
.dn-kritisk { margin: 18px 0 0; max-width: 62ch; font-size: 1.0625rem; }
.dn-kritisk a { font-weight: 700; color: var(--farge-lenke); }

/* «Se alt vi sjekker» (Anders 8.11, BUGS-APNING punkt 8). Teksten kommer fra felles/sjekkene.py. */
.dn-alt { margin-top: 18px; }
.dn-alt-brett { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 0 22px; background: var(--farge-kort); border: 1px solid var(--farge-linje); border-radius: 14px; font-weight: 700; font-size: 1.0625rem; color: var(--farge-marine); list-style: none; cursor: pointer; }
.dn-alt-brett::-webkit-details-marker { display: none; }
.dn-alt-pil::after { content: "▾"; }
.dn-alt[open] .dn-alt-pil::after { content: "▴"; }
.dn-alt-grupper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.dn-alt-gruppe { background: var(--farge-kort); border: 1px solid var(--farge-linje); border-radius: 14px; padding: 20px; }
.dn-alt-gruppe h3 { margin: 0 0 10px; }
.dn-alt-liste { list-style: none; margin: 0; padding: 0; }
.dn-alt-liste li { padding: 12px 0; border-top: 1px solid var(--farge-linje); display: flex; flex-direction: column; gap: 4px; }
.dn-alt-liste li:first-child { border-top: 0; padding-top: 0; }
.dn-alt-topp { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; color: var(--farge-marine); }
.dn-alt-liste p { margin: 0; font-size: var(--skrift-str-liten); color: var(--farge-tekst); line-height: 1.5; }
.dn-alt-verktoy { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 4px; background: var(--farge-sand); font-size: 12px; font-weight: 700; color: var(--farge-marine); }
.dn-alt-ofte { font-size: 13px; color: var(--farge-tekst-dempet); }
.dn-alt-niva { flex: none; white-space: nowrap; height: 24px; padding: 0 10px; border-radius: 12px; display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; color: var(--farge-marine); border: 1px solid var(--farge-marine); }
.dn-alt-niva-2, .dn-alt-niva-3 { border-style: dashed; color: var(--farge-tekst-dempet); border-color: var(--farge-tekst-dempet); }
.dn-alt-fot { margin: 12px 0 0; font-size: var(--skrift-str-mini); color: var(--farge-tekst-dempet); }
@media (max-width: 47.99rem) {
  .dn-alt-grupper { grid-template-columns: minmax(0, 1fr); }
  .dn-alt-gruppe { padding: 16px; }
}

/* DRIFT_PROVE (Anders 8.11): Nivå 1 kan prøves gratis i 14 dager etter Appsjekken. */
.dn-prove-linje { margin: 18px 0 0; max-width: 28em; font-size: 20px; font-weight: 700; color: var(--farge-marine); }
.dn-kort > li.dn-kort-prove { position: relative; border: 2px solid var(--farge-honerod); }
.dn-kort-merke { position: absolute; top: -15px; left: 20px; }
.dn-kort .dn-prove-under { font-size: 13px; color: var(--farge-tekst-dempet); }