/* Ekrano: stil for undersidene (support, vilkår, personvern, gratis kanaler og 404). Legges etter ekrano.css.
   Bruker bare flatene og variablene derfra (nettside-verktoy/STIL.md), så alt her virker på dusk, sand og paper.
   Forsiden laster ikke denne filen. */

/* ============ menyen på undersidene ============ */
/* Uten skript skifter ikke menyen flate, så da rulles den bort sammen med toppen i stedet for å ligge over lyst innhold. */
html:not(.js) nav{position:absolute}
.n-links a[aria-current=page]{opacity:1;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:7px}
/* Bare to lenker: de får plass fra 561 px, ikke først fra 1081. */
@media(max-width:1080px) and (min-width:561px){
  .n-links{display:flex;gap:24px}
  nav .cta{margin-left:0}
}

/* ============ toppen: lav by i skumringen med tittelen over ============ */
.sub{position:relative;overflow:hidden;background:linear-gradient(180deg,#070709 0%,#0d0b10 46%,#1a1216 76%,#2a1a1a 100%)}
.sub>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.sub-in{position:relative;z-index:2;padding-top:clamp(112px,15vh,150px);padding-bottom:clamp(120px,15vw,188px)}
.sub h1{font-family:var(--disp);font-weight:800;font-size:clamp(38px,6.2vw,74px);line-height:1;letter-spacing:-.035em;
        margin:0;text-wrap:balance;text-shadow:0 2px 30px rgba(10,10,12,.55)}
.sub h1.lang{font-size:clamp(34px,5.2vw,62px)}
.sub h1 .magi{font-size:1.06em;letter-spacing:-.02em;text-shadow:0 0 .42em rgba(255,166,92,0),0 2px 30px rgba(10,10,12,.55);transition:text-shadow 1.6s ease}
.sub h1.ferdig .magi,html:not(.js) .sub h1 .magi{text-shadow:0 0 .42em rgba(255,166,92,.3),0 2px 30px rgba(10,10,12,.55)}
.sub .lede{text-shadow:0 1px 16px rgba(10,10,12,.7);margin-top:22px}
.sub .lede a{color:var(--fg);text-decoration-thickness:1px;text-underline-offset:4px}
.sub .lede a:hover{color:var(--amber)}
@media(max-width:560px){.sub-in{padding-top:104px;padding-bottom:132px}}

/* Hopp til en gruppe spørsmål */
.gruppelenker{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.gruppelenker a{font-size:14px;font-weight:500;text-decoration:none;color:var(--fg2);border:1px solid var(--rule);border-radius:100px;
                padding:7px 15px;background:color-mix(in srgb,var(--bg) 55%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
                transition:color .2s,border-color .2s}
.gruppelenker a:hover,.gruppelenker a:focus-visible{color:var(--fg);border-color:var(--amber)}

/* 404: hele skjermen, sentrert */
.sub.full{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.sub.full .sub-in{width:100%;text-align:center;padding-top:clamp(110px,14vh,140px);padding-bottom:var(--byrom,clamp(150px,22vh,230px))}
.sub.full .eyebrow{justify-content:center}
.sub.full .eyebrow::after{content:'';width:34px;height:1.5px;background:currentColor;flex:none}
.sub.full h1{margin:0 auto}
.sub.full .lede{margin-left:auto;margin-right:auto}
.sub.full .knapper{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:14px 26px;margin-top:34px}
@media(max-width:760px){.sub.full .sub-in{--byrom:clamp(190px,30vh,260px)}}

/* ============ lesing: lys flate, rolig bredde ============ */
.lesing{padding:clamp(52px,7vw,96px) 0 clamp(84px,10vw,136px)}
.wrap.smal{max-width:calc(700px + 2*clamp(20px,4vw,48px))}
.wrap.smal.bred{max-width:calc(820px + 2*clamp(20px,4vw,48px))}
.tekst{--les:#3B332B;color:var(--les);font-size:17px;line-height:1.7}
.tekst>p:first-child{font-size:clamp(18px,2vw,20px);line-height:1.6;color:var(--fg)}
.tekst p{margin:0 0 16px;max-width:68ch;text-wrap:pretty}
.tekst a,.svar a,.kontakt a:not(.btn),.steg a,.notice a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.tekst a:hover,.svar a:hover,.kontakt a:not(.btn):hover,.steg a:hover,.notice a:hover{color:var(--ember-dyp)}
.tekst strong,.svar strong,.steg strong{color:var(--fg);font-weight:600}
.tekst h2{--h:1.95em;font-family:var(--disp);font-weight:700;font-size:clamp(22px,2.6vw,27px);line-height:1.22;letter-spacing:-.02em;color:var(--fg);
          max-width:none;text-wrap:balance;position:relative;margin:clamp(40px,5vw,56px) 0 14px;padding:clamp(28px,3.4vw,38px) 0 0;border-top:1px solid var(--rule);scroll-margin-top:84px}
/* Nummeret er en serif i kursiv, som på forsiden. På smale skjermer henger overskriften under det. */
.tekst h2 .nr{display:inline-block;width:calc(var(--h) / 1.18);text-indent:0;font-family:var(--serif);font-style:italic;font-weight:400;
              font-size:1.18em;letter-spacing:0;color:var(--magi)}
.tekst h2:has(> .nr){padding-left:var(--h);text-indent:calc(-1 * var(--h))}
@media(min-width:960px){
  /* Nummeret henger i marginen, så overskriftene står på linje med teksten. */
  .tekst h2:has(> .nr){padding-left:0;text-indent:0}
  .tekst h2 .nr{position:absolute;right:100%;width:auto;margin-right:18px;top:clamp(28px,3.4vw,38px)}
}
.tekst .stand{display:block;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--fg3);margin-bottom:14px}
.tekst .inn{margin:22px 0 10px;color:var(--fg);font-weight:600}
.tekst ul{margin:0 0 20px;max-width:68ch}
.tekst .muted,.muted{color:var(--fg2)}

/* ============ spørsmål og svar (details) ============ */
.faq h2{font-family:var(--disp);font-weight:700;font-size:clamp(23px,2.8vw,30px);line-height:1.2;letter-spacing:-.02em;max-width:none;
        margin:clamp(48px,6vw,68px) 0 18px;scroll-margin-top:96px}
.faq h2:first-child{margin-top:0}
details.q{border-top:1px solid var(--rule)}
details.q:last-of-type{border-bottom:1px solid var(--rule)}
details.q summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:18px;padding:22px 4px 22px 0;
                  font-family:var(--disp);font-weight:600;font-size:clamp(18px,2.1vw,21px);letter-spacing:-.012em;line-height:1.3;color:var(--fg)}
details.q summary::-webkit-details-marker{display:none}
/* Vinduet er mørkt når spørsmålet er lukket, og tennes når det åpnes. */
details.q summary::before{content:'';flex:none;width:18px;height:14px;border-radius:3px;margin-top:.32em;
                          box-shadow:inset 0 0 0 1.6px var(--fg3);transition:box-shadow .35s var(--ease),background .35s}
details.q summary:hover::before{box-shadow:inset 0 0 0 1.6px var(--accent)}
details.q[open] summary::before{background:var(--glow);box-shadow:inset 0 0 0 1.6px rgba(245,245,247,.92),0 0 12px rgba(255,166,92,.6)}
details.q summary:focus-visible{outline-offset:2px;border-radius:6px}
.svar{padding:0 0 26px 36px;color:var(--fg2);font-size:16.5px;line-height:1.7}
.svar p{margin:0 0 12px;max-width:64ch;text-wrap:pretty}
.svar p:last-child{margin-bottom:0}
.svar ul{margin:4px 0 12px;max-width:64ch}
.svar li{color:var(--fg2)}
[data-pris]{display:inline-block;font-variant-numeric:tabular-nums;font-weight:600;color:var(--fg)}
.pris-ny{animation:prisNy .8s var(--ease)}
@keyframes prisNy{from{opacity:.15;transform:translateY(.3em)}to{opacity:1;transform:none}}
.valuta{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;margin-top:16px;font-size:14px;color:var(--fg2)}
.valuta[hidden]{display:none}
.valuta select{font:inherit;font-size:14px;color:var(--fg);background-color:var(--paper);border:1px solid var(--card-rule);border-radius:100px;
               padding:8px 36px 8px 16px;max-width:100%;-webkit-appearance:none;appearance:none;cursor:pointer;
               background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235C5348' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
               background-repeat:no-repeat;background-position:right 14px center}
.valuta select:hover{border-color:var(--card-hover)}
.fotnote{font-size:13.5px;color:var(--fg3);margin-top:12px}

/* ============ kontaktkortet ============ */
.kontakt{margin-top:clamp(52px,6vw,72px);padding:clamp(26px,4vw,40px);background:var(--card);border:1px solid var(--card-rule);border-radius:22px;
         box-shadow:0 24px 60px var(--shadow)}
.kontakt .eyebrow{margin-bottom:16px}
.kontakt h2{font-family:var(--disp);font-weight:700;font-size:clamp(24px,3vw,32px);line-height:1.15;letter-spacing:-.02em;max-width:none;margin:0 0 10px}
.kontakt p:not(.eyebrow){color:var(--fg2);max-width:56ch;margin:0}
.kontakt .btn{margin-top:22px}
.kontakt address{font-style:normal;font-size:14.5px;color:var(--fg3);margin-top:22px;line-height:1.55}

/* ============ gratis kanaler ============ */
.notice{background:var(--card);border:1px solid var(--card-rule);border-left:3px solid var(--accent);border-radius:14px;padding:18px 22px;
        font-size:15.5px;line-height:1.65;color:var(--fg2)}
.notice strong{color:var(--fg)}
.notice .checked{font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;color:var(--fg3);margin:12px 0 0}
.lists{display:grid;gap:16px;margin-top:28px}
.list-card{background:var(--card);border:1px solid var(--card-rule);border-radius:18px;padding:clamp(22px,3vw,28px)}
.list-card .land{font-family:var(--disp);font-weight:700;font-size:22px;letter-spacing:-.015em;line-height:1.2;max-width:none;margin:0 0 8px;display:flex;align-items:center;gap:12px}
.list-card .channels{font-size:16px;color:var(--fg);margin:0 0 4px}
.list-card .where{font-size:14.5px;color:var(--fg2);margin:0 0 18px}
.url-row{display:flex;gap:12px;align-items:stretch}
.url-row code{flex:1;min-width:0;font-family:var(--mono);font-size:12.5px;line-height:1.55;background:var(--sand);border:1px solid var(--line);border-radius:12px;
              padding:12px 14px;color:var(--fg2);overflow-wrap:anywhere;user-select:all;-webkit-user-select:all}
.copy-btn{flex:none;border:0;cursor:pointer;background:var(--btn-bg);color:var(--btn-fg);font:inherit;font-size:15px;font-weight:600;line-height:1.3;
          padding:0 26px;border-radius:100px;transition:background .25s,color .25s,box-shadow .3s}
.copy-btn:hover{background:var(--btn-hbg);color:var(--btn-hfg);box-shadow:var(--btn-glow)}
.copy-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.copy-btn.copied{background:var(--ink);color:#fff}
.steg{list-style:none;counter-reset:steg;display:grid;gap:16px;margin:0 0 20px;padding:0}
.steg li{counter-increment:steg;position:relative;padding-left:52px;min-height:34px}
.steg li::before{content:counter(steg);position:absolute;left:0;top:-1px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
                 background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font-family:var(--disp);font-weight:700;font-size:16px}
@media(max-width:640px){
  .url-row{flex-direction:column}
  .copy-btn{padding:13px 22px}
}

/* ============ redusert bevegelse ============ */
@media(prefers-reduced-motion:reduce){
  details.q summary::before,.sub h1 .magi{transition:none}
  .pris-ny{animation:none}
}

/* ============ utskrift: bare teksten ============ */
@media print{
  nav,#progress,.hopp,.sub>canvas,.gruppelenker,.valuta,footer,.copy-btn{display:none!important}
  body,.sub,.sand,.paper{background:#fff!important;color:#000!important}
  .sub-in{padding:0 0 24px!important}
  .sub h1,.sub .lede,.sub .eyebrow,.tekst,.tekst h2,.svar,.tekst p{color:#000!important;text-shadow:none!important}
  .sub h1 .magi{color:#000!important;text-shadow:none!important}
  .lesing{padding:0!important}
  details.q .svar{display:block}
}