/* Plattformens forside (markedsføring) og «kommer snart». Bygger på site.css – bare det som gjør siden varmere. */

/* ---- Hero ------------------------------------------------------------------------ */
.hero-varm {
    background:
        radial-gradient(circle at 8% 110%, color-mix(in srgb, var(--aksent) 45%, transparent) 0, transparent 42%),
        radial-gradient(circle at 95% -10%, rgba(255,255,255,0.18) 0, transparent 40%),
        linear-gradient(150deg, var(--klubbfarge) 0%, var(--klubb-moerk) 100%);
}
.hero-varm::before { display: none; }
.hero-varm .hero-inner { padding: 4rem 1rem 4rem; }
.hero-varm h1 { font-size: 3.1rem; line-height: 1.08; }
.hero .knapp.knapp-aksent { background: var(--aksent); color: #fff; box-shadow: 0 8px 22px rgba(255, 138, 42, 0.45); }
.hero .knapp.knapp-aksent:hover { box-shadow: 0 10px 26px rgba(255, 138, 42, 0.55); }
.hero-trygg { list-style: none; padding: 0; margin: 0.4rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-size: 0.95rem; color: rgba(255,255,255,0.88); }
.hero-trygg li { display: inline-flex; align-items: center; gap: 0.35rem; }
.hero-trygg .ikon { width: 1.05rem; height: 1.05rem; color: #ffd166; stroke-width: 3; }

/* Produktbildet: en liten kopi av oversikten */
.hero-varm .nettleser { transform: rotate(-1.5deg); box-shadow: 0 30px 70px rgba(10, 20, 40, 0.45); }
.mini-app { background: var(--bakgrunn); }
.mini-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.9rem; background: linear-gradient(120deg, var(--klubbfarge), var(--klubb-moerk)); color: #fff; }
.mini-bar b { font-size: 0.95rem; }
.mini-bar small { opacity: 0.8; font-size: 0.78rem; }
.mini-logo { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: rgba(255,255,255,0.25); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 0.8rem; }
.mini-kropp { display: flex; }
.mini-meny { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.6rem 0.4rem; background: #fff; border-right: 1px solid var(--kant); }
.mini-meny i { display: flex; width: 1.9rem; height: 1.9rem; align-items: center; justify-content: center; border-radius: 7px; color: var(--dempet); }
.mini-meny i .ikon { width: 1rem; height: 1rem; }
.mini-meny i.aktiv { background: var(--klubb-lys); color: var(--klubbfarge); }
.mini-hoved { flex: 1; min-width: 0; padding: 0.8rem 0.9rem 0.9rem; }
.mini-hilsen { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.6rem; font-size: 1.02rem; }
.mini-hilsen .ikon { color: var(--aksent); }
.mini-hilsen b { font-weight: 900; }
.mini-kig { background: #fff; border: 1px solid var(--kant); border-radius: 10px; padding: 0.55rem 0.7rem 0.6rem; margin-bottom: 0.6rem; box-shadow: var(--skygge); position: relative; overflow: hidden; }
.mini-kig::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--aksent), var(--klubbfarge)); }
.mini-kig div { display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; margin-bottom: 0.35rem; }
.mini-kig b { display: inline-flex; align-items: center; gap: 0.3rem; }
.mini-kig b .ikon { color: var(--aksent); width: 1rem; height: 1rem; }
.mini-kig span { color: var(--dempet); font-weight: 700; font-size: 0.75rem; }
.mini-kig em, .mini-fremdrift { display: block; height: 0.4rem; background: #eeece6; border-radius: 999px; overflow: hidden; }
.mini-kig em i, .mini-fremdrift i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--aksent), var(--klubbfarge)); }
.mini-fremdrift { margin-top: 0.35rem; height: 0.3rem; }
.hero .mini-rutenett { padding: 0; background: none; gap: 0.5rem; }
.hero .mini-rutenett > div { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.55rem 0.6rem; border-left: 4px solid var(--klubbfarge); }
.hero .mini-rutenett > div.mini-varsel { border-left-color: var(--varsel); }
.hero .mini-rutenett > div.mini-ok { border-left-color: var(--ok); }
.hero .mini-rutenett p { margin: 0; min-width: 0; flex: 1; }
.hero .mini-rutenett b { font-size: 0.8rem; line-height: 1.25; }
.hero .mini-rutenett i { font-size: 0.72rem; line-height: 1.3; display: block; }
.mini-ik { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 7px; background: var(--klubb-lys); color: var(--klubbfarge); display: inline-flex; align-items: center; justify-content: center; }
.mini-ik .ikon { width: 0.9rem; height: 0.9rem; }
.mini-varsel .mini-ik { background: var(--varsel-lys); color: var(--varsel); }
.mini-ok .mini-ik { background: var(--ok-lys); color: var(--ok); }

/* Heroen som situasjon (UX-runde 2026-10): overtittel, ekte produktbilde i nettleservinduet, Kvikk med snakkeboble, «2 min + 2 min + 1 min» */
.hero-situasjon .hero-inner { grid-template-columns: 1.05fr 1fr; gap: 3rem; padding-bottom: 3.2rem; }
.hero-situasjon h1 { font-size: 2.7rem; }
.hero-situasjon h1 em { font-style: normal; color: #ffd166; position: relative; white-space: nowrap; }
.hero-situasjon h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.1em; height: 0.28em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 40 2, 80 10, 120 5 S 180 4, 198 7' fill='none' stroke='%23ff8a2a' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat; }
.hero-situasjon .overtittel-lys { margin-bottom: 0.9rem; }
.hero-situasjon .lead { max-width: 32rem; }
.tre-steg-lys { justify-content: flex-start; margin: 1.3rem 0 0; }
.tre-steg-lys li { color: rgba(255,255,255,0.85); }
.tre-steg-lys li > span { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.35); color: #fff; }
.tre-steg-lys li + li::before { background: rgba(255,255,255,0.35); }
.tre-steg-lys li b { color: #fff; }
.tre-steg-lys li small { color: #ffd166; }
.hero-produkt { position: relative; padding-bottom: 2.6rem; }
.hero-produkt .nettleser { transform: rotate(-1.2deg); }
.hero-produkt .nettleser img { display: block; width: 100%; height: auto; }
.hero-kvikk { position: absolute; left: -1.6rem; bottom: 0; display: flex; align-items: flex-end; gap: 0.4rem; }
.hero-kvikk img { width: 150px; height: 150px; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3)); transform: rotate(4deg); }
.hero-boble { position: relative; margin: 0 0 2.6rem; background: #fff; color: var(--tekst); border-radius: 14px; padding: 0.55rem 0.8rem; font-size: 0.92rem; font-weight: 700; max-width: 15rem; box-shadow: var(--skygge-hev); order: 2; }
.hero-boble::after { content: ""; position: absolute; left: -0.5rem; bottom: 0.9rem; border: 0.55rem solid transparent; border-right-color: #fff; border-left: 0; }
.skjermbilde { background: var(--flate); border: 1px solid var(--kant); border-radius: 14px; box-shadow: var(--skygge-hev); overflow: hidden; }
.skjermbilde img { display: block; width: 100%; height: auto; }
.dok-stempel { display: inline-block; border: 2px solid var(--ok); color: var(--ok); border-radius: 6px; padding: 0.05rem 0.45rem; font-weight: 800; transform: rotate(-3deg); margin-right: 0.5rem; }

/* «Kjenner du deg igjen?» – personfoto (Shixart1985, CC BY 2.0) ved siden av situasjonen før Klubbmotor. */
.person-foto { margin: 0; text-align: center; position: relative; max-width: 380px; margin-inline: auto; }
.person-foto img { display: block; width: 100%; max-width: 380px; height: auto; margin: 0 auto; border-radius: 18px; box-shadow: var(--skygge-hev); }
.person-foto figcaption { font-size: 0.78rem; color: var(--dempet); margin-top: 0.5rem; }
/* Prisstempelet oppe til høyre over personfotoet (eieren 2026-10-20). PNG med gjennomsiktig bakgrunn, allerede skråstilt; vises bare når prisen er 1 900 kr. */
.person-foto .pris-stempel { position: absolute; top: -64px; right: -6px; width: 196px; max-width: 55%; height: auto; margin: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25)); pointer-events: none; }
/* Klistret knapp nederst på mobil (forside.js) – aldri på brede skjermer. */
.klistret { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(6px); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08); text-align: center; }
.klistret .knapp { width: 100%; max-width: 420px; justify-content: center; }
.klistret[hidden] { display: none; }
@media (min-width: 801px) { .klistret { display: none !important; } }

/* Modulene: tre med bilde, så områdene som lenker til /Moduler */
.seksjon-moduler { padding: 2.6rem 1rem 1.6rem; background: var(--flate); border-top: 1px solid var(--kant); border-bottom: 1px solid var(--kant); }
.seksjon-moduler h2 { font-size: 1.6rem; margin-bottom: 1.2rem; }
.modul-kort-rad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin: 0 0 1.4rem; }
.modul-kort { display: flex; flex-direction: column; gap: 0.3rem; text-decoration: none; color: var(--tekst); background: var(--bakgrunn); border: 1px solid var(--kant); border-radius: 14px; padding: 0.8rem; transition: transform .15s ease, box-shadow .15s ease; }
.modul-kort:hover { transform: translateY(-2px); box-shadow: var(--skygge-hev); border-color: var(--klubbfarge); }
.modul-kort-bilde { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--kant); background: #fff; margin-bottom: 0.4rem; }
.modul-kort-bilde img { display: block; width: 100%; height: auto; }
.modul-kort b { font-size: 1.02rem; }
.modul-kort > span:last-child { font-size: 0.9rem; color: var(--dempet); }
.moduler-linje { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; justify-content: center; }
.pille-ki { display: flex; width: fit-content; align-items: center; gap: 0.35rem; margin-bottom: 0.7rem; padding: 0.3rem 0.8rem; font-size: 0.85rem; letter-spacing: 0.02em; color: #1b2b4b; background: linear-gradient(100deg, #ffd166, #ffb347); box-shadow: 0 4px 14px rgba(255, 179, 71, 0.4); }
.pille-ki .ikon { width: 1rem; height: 1rem; stroke-width: 2.4; }
.hero-tekst > .pille-ki { align-self: flex-start; }
.pille-lenke { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--bakgrunn); border: 1px solid var(--kant); color: var(--tekst); text-decoration: none; padding: 0.4rem 0.8rem; font-size: 0.9rem; }
.pille-lenke .ikon { color: var(--aksent); }
.pille-lenke:hover { border-color: var(--klubbfarge); color: var(--klubbfarge); }
.moduler-alle { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 800; padding: 0.4rem 0.3rem; }

/* CTA med Kvikk, og spørsmålene med lenker videre */
.cta-med-kvikk { display: flex; align-items: center; gap: 1.6rem; justify-content: center; text-align: left; }
.cta-med-kvikk img { flex: none; width: 120px; height: 120px; }
.cta-med-kvikk .cta-rad-midt { justify-content: flex-start; }
.sporsmal-mer, .sporsmal-guider { margin: 1.2rem 0 0; color: var(--dempet); }
.sporsmal-guider { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; align-items: center; }
.sporsmal-guider a { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.35rem 0; }

/* ---- Salgsbilder ---------------------------------------------------------------- */
.mock-ny { border-radius: 16px; }
.mock-ny .mock-topp b { display: inline-flex; align-items: center; gap: 0.4rem; }
.mock-ny .mock-topp .ikon { color: var(--aksent); }
.mock-ny .mock-rad:not(.mock-topp) { transition: background 0.15s; }
.mock-ny .mock-rad:not(.mock-topp):hover { background: color-mix(in srgb, var(--klubbfarge) 4%, #fff); }
.mock-ik { flex: none; width: 2rem; height: 2rem; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; }
.mock-ik .ikon { width: 1.05rem; height: 1.05rem; }
.mock-info { background: var(--klubb-lys); color: var(--klubbfarge); }
.mock-varsel { background: var(--varsel-lys); color: var(--varsel); }
.mock-fare { background: var(--feil-lys); color: var(--feil); }
.mock-ok { background: var(--ok-lys); color: var(--ok); }
.flyt b { display: inline-flex; }
.flyt b .ikon { width: 0.9rem; height: 0.9rem; }
.flyt span:last-child { background: var(--aksent-lys); border-color: color-mix(in srgb, var(--aksent) 40%, var(--kant)); color: #8a4200; }

/* ---- Alt som følger med: de fem områdene som lenker til /Moduler (moduler.css har selve modulsiden) --------- */
.omrade-lenker { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.8rem; margin: 0.4rem 0 1.2rem; }
.omrade-lenke { display: flex; flex-direction: column; gap: 0.15rem; padding: 1rem 1rem 1.1rem; background: var(--bakgrunn); border: 1px solid var(--kant); border-radius: 14px; color: var(--tekst); text-decoration: none; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
.omrade-lenke:hover { transform: translateY(-2px); box-shadow: var(--skygge-hev); border-color: color-mix(in srgb, var(--klubbfarge) 35%, var(--kant)); }
.omrade-lenke .kort-ikon { background: var(--aksent-lys); color: var(--aksent); margin-bottom: 0.4rem; }
.omrade-lenke:hover .kort-ikon { background: var(--klubbfarge); color: #fff; }
.omrade-lenke b { font-size: 1.02rem; line-height: 1.25; }
.omrade-lenke:hover b { color: var(--klubbfarge); }
.omrade-lenke small { color: var(--dempet); font-weight: 700; font-size: 0.8rem; }
.omrade-lenke > span:last-child { color: var(--dempet); font-size: 0.88rem; line-height: 1.4; margin-top: 0.3rem; }
.omrade-alle { margin: 0; }

/* ---- Fem områder (hva det er) og fordelene ------------------------------------- */
.omrade-rutenett { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.6rem; }
.omrade-kort-fs { background: var(--bakgrunn); border: 1px solid var(--kant); border-radius: 16px; padding: 1.2rem 1.3rem 1.1rem; display: flex; flex-direction: column; gap: 0.3rem; transition: transform 0.15s, box-shadow 0.15s; }
.omrade-kort-fs:hover { transform: translateY(-2px); box-shadow: var(--skygge-hev); }
.omrade-kort-fs .kort-ikon { background: var(--aksent-lys); color: var(--aksent); margin-bottom: 0.3rem; }
.omrade-kort-fs h3 { margin: 0; font-size: 1.15rem; }
.omrade-kort-fs p { margin: 0; color: var(--tekst); }
.omrade-kort-fs small { color: var(--dempet); font-size: 0.82rem; line-height: 1.35; margin-top: 0.2rem; }
.omrade-kort-cta { background: var(--klubb-lys); border-color: transparent; }
.omrade-kort-cta .kort-ikon { background: var(--klubbfarge); color: #fff; }
.fordel-rad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1.6rem 0 1.2rem; }
.fordel-rad > div { display: flex; flex-direction: column; gap: 0.15rem; background: var(--bakgrunn); border: 1px solid var(--kant); border-radius: var(--radius); padding: 1rem 1.1rem; }
.fordel-rad .ikon { color: var(--aksent); width: 1.5rem; height: 1.5rem; margin-bottom: 0.3rem; }
.fordel-rad b { font-size: 1rem; }
.fordel-rad span { color: var(--dempet); font-size: 0.9rem; }
/* «Se alle …» – detaljene bak ett klikk, så siden er kort for dem som bare vil forstå */
.alle-detaljer { margin-top: 1.6rem; background: none; border: 0; padding: 0; }
.alle-detaljer > summary { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 800; color: var(--klubbfarge); cursor: pointer; padding: 0.7rem 1.1rem; border: 2px solid var(--klubbfarge); border-radius: 999px; list-style: none; }
.alle-detaljer > summary::-webkit-details-marker { display: none; }
.alle-detaljer > summary::after { content: ""; width: 0.5rem; height: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.15s; }
.alle-detaljer[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.alle-detaljer > summary:hover { background: var(--klubb-lys); }
.alle-detaljer[open] > summary { margin-bottom: 1.2rem; }
.alle-detaljer .sett-rutenett { margin-top: 0; }

/* ---- Pris og avslutning ---------------------------------------------------------- */
.pris-kort { position: relative; border-color: var(--aksent); padding-top: 2.2rem; }
.pris-merke { position: absolute; top: -0.85rem; left: 50%; transform: translateX(-50%); background: var(--aksent); color: #fff; font-weight: 800; font-size: 0.8rem; border-radius: 999px; padding: 0.25rem 0.8rem; display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; box-shadow: 0 4px 12px rgba(255, 138, 42, 0.35); }
.pris-belop { color: var(--aksent); }
.cta-varm { background:
        radial-gradient(circle at 85% 120%, color-mix(in srgb, var(--aksent) 40%, transparent) 0, transparent 45%),
        linear-gradient(150deg, var(--klubbfarge), var(--klubb-moerk)); padding: 4rem 1rem; }
.cta-varm h2 { font-size: 2.3rem; }
.cta-varm .knapp-aksent { box-shadow: 0 8px 22px rgba(255, 138, 42, 0.45); }

/* ---- Kommer snart --------------------------------------------------------------- */
.venter-varm { color: #fff; background:
        radial-gradient(circle at 10% 100%, color-mix(in srgb, var(--aksent) 45%, transparent) 0, transparent 45%),
        radial-gradient(circle at 90% 0%, rgba(255,255,255,0.16) 0, transparent 40%),
        linear-gradient(150deg, var(--klubbfarge), var(--klubb-moerk)); min-height: calc(100vh - 7.6rem); }
.venter-varm h1 { font-size: 2.6rem; font-weight: 900; letter-spacing: -0.02em; margin-bottom: 0.6rem; }
.venter-varm p { color: rgba(255,255,255,0.92); }
.venter-logo { width: 4.6rem; height: 4.6rem; border-radius: 22px; background: #fff; color: var(--klubbfarge); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 2.3rem; margin-bottom: 1.2rem; box-shadow: 0 14px 34px rgba(0,0,0,0.25); transform: rotate(-4deg); }
.venter-pille { display: inline-flex !important; align-items: center; gap: 0.5rem; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.25); border-radius: 999px; padding: 0.35rem 0.9rem; font-size: 0.95rem !important; margin-top: 0.8rem !important; }
.venter-pille i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #ffd166; box-shadow: 0 0 0 0 rgba(255, 209, 102, 0.7); animation: puls 1.8s infinite; }
@keyframes puls { 70% { box-shadow: 0 0 0 10px rgba(255, 209, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 209, 102, 0); } }
.venter-ikoner { display: flex; justify-content: center; gap: 0.7rem; margin-top: 2rem; }
.venter-ikoner span { width: 2.8rem; height: 2.8rem; border-radius: 12px; background: rgba(255,255,255,0.12); display: inline-flex; align-items: center; justify-content: center; }
.venter-ikoner span:nth-child(odd) { transform: translateY(6px); }
.venter-ikoner .ikon { width: 1.3rem; height: 1.3rem; }

/* ---- Vilkår og personvern ------------------------------------------------------- */
.tekstside-kort { background: var(--flate); border: 1px solid var(--kant); border-radius: 16px; box-shadow: var(--skygge); padding: 2.2rem 2.4rem 2.6rem; }
.tekstside-hode { display: flex; gap: 1rem; align-items: center; margin-bottom: 0.4rem; }
.tekstside-hode h1 { margin: 0; }
.tekstside-hode .kort-ikon { margin: 0; width: 3rem; height: 3rem; border-radius: 14px; }
.tekstside-hode .kort-ikon .ikon { width: 1.5rem; height: 1.5rem; }
.tekstside-kort h2 { padding-left: 0.8rem; border-left: 4px solid var(--aksent); }
.tekstside-kort li { margin: 0.3rem 0; }

/* ---- Mobil ------------------------------------------------------------------------ */
@media (max-width: 800px) {
    .hero-varm .hero-inner { padding: 2.2rem 1rem 2.5rem; gap: 2rem; }
    .hero-varm h1 { font-size: 2.2rem; }
    .hero-situasjon .hero-inner { grid-template-columns: 1fr; gap: 1.6rem; }
    .hero-situasjon h1 { font-size: 1.9rem; }
    .hero-situasjon h1 em { white-space: normal; }
    .hero-produkt { padding-bottom: 0; margin-top: 0.4rem; }
    .hero-produkt .nettleser { transform: none; }
    .hero-kvikk { position: static; margin-top: 0.8rem; justify-content: flex-end; }
    .hero-kvikk img { width: 96px; height: 96px; transform: none; }
    .hero-boble { margin: 0 0 1rem; }
    .tre-steg-lys { flex-direction: row; flex-wrap: wrap; gap: 0.5rem 1rem; }
    .tre-steg-lys li + li::before { display: none; }
    .tre-steg-lys li small { display: none; }
    .cta-med-kvikk { flex-direction: column; text-align: center; }
    .cta-med-kvikk .cta-rad-midt { justify-content: center; }
    .moduler-linje { justify-content: flex-start; }
    .modul-kort-rad { grid-template-columns: 1fr; }
    #gjelder-dere .argument-speil .argument-tekst { order: 0; }
    .person-foto { margin-top: 48px; }   /* plass til prisstempelet, så det ikke går inn i teksten over (én kolonne) */
    .seksjon { padding: 2rem 1rem; }
    .flyt { display: none; }
    .referanse-rutenett { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
    .referanse-rutenett a { min-height: 6rem; padding: 0.7rem 0.4rem; font-size: 0.85rem; }
    .hero-varm .hero-bilde { display: block; }
    .hero-varm .nettleser { transform: none; }
    .hero .cta-rad .knapp { width: 100%; }
    .mini-meny { display: none; }
    .hero .mini-rutenett { grid-template-columns: 1fr; }
    .hero .mini-rutenett > div:nth-child(n+4) { display: none; }
    .omrade-lenker { grid-template-columns: 1fr; }
    .omrade-alle .knapp { width: 100%; }
    .omrade-rutenett { grid-template-columns: 1fr; }
    .fordel-rad { grid-template-columns: 1fr; }
    .hero-trygg { flex-direction: column; gap: 0.35rem; }
    .alle-detaljer > summary { width: 100%; justify-content: center; }
    .cta-varm h2 { font-size: 1.8rem; }
    .cta-varm .knapp { width: 100%; }
    .venter-varm h1 { font-size: 2rem; }
    .sett-rutenett { grid-template-columns: 1fr; }
    .tekstside-kort { padding: 1.3rem 1.1rem 1.6rem; border-radius: var(--radius); }
}

/* ---- Sammenligningssiden (/Sammenlign) ---- */
.tabell-rull { overflow-x: auto; margin: 1rem 0; }
table.sammenlign th, table.sammenlign td { font-size: 0.92rem; }
table.sammenlign th:first-child { min-width: 14rem; }
table.sammenlign th:nth-child(2), table.sammenlign td:nth-child(2) { background: var(--klubb-lys); font-weight: 800; }
table.sammenlign .midt { text-align: center; white-space: nowrap; }
table.sammenlign th:first-child, table.sammenlign td:first-child { position: sticky; left: 0; background: var(--flate); z-index: 1; box-shadow: 1px 0 0 var(--kant); }
table.sammenlign thead th:first-child { background: var(--bakgrunn); }
@media (max-width: 800px) {
    table.sammenlign th:first-child { min-width: 9.5rem; }
    table.sammenlign td:first-child { font-size: 0.88rem; line-height: 1.3; }
    table.sammenlign th:nth-child(2), table.sammenlign td:nth-child(2) { white-space: normal; }
    table.sammenlign thead th { font-size: 0.78rem; padding: 0.5rem 0.4rem; }
}
#sammenlign .knapp { margin-top: 0.5rem; }

/* Sammenlignet med én leverandør (/Sammenlign/{hvem}) */
.pris-sammenlign { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0; }
.pris-boks { background: var(--flate); border: 1px solid var(--kant); border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--skygge); }
.pris-boks > b { display: block; font-size: 1.1rem; margin-bottom: 0.3rem; }
.pris-boks ul { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.pris-boks li { margin: 0.3rem 0; }
.pris-oss { border: 2px solid var(--klubbfarge); }
.pris-tall { display: block; font-size: 1.7rem; font-weight: 900; color: var(--klubbfarge); line-height: 1.1; }
table.sammenlign-to th:first-child { min-width: 12rem; }
table.sammenlign-to th:nth-child(2), table.sammenlign-to td:nth-child(2) { background: none; font-weight: 500; }
table.sammenlign-to th:nth-child(3), table.sammenlign-to td:nth-child(3) { background: var(--klubb-lys); font-weight: 700; }
@media (max-width: 800px) { .pris-sammenlign { grid-template-columns: 1fr; } }

/* ---- demo: «Se demo» i bunn-CTA ---- */
.cta-rad-midt { justify-content: center; margin: 0 0 0.6rem; }
.seksjon-cta .knapp-sekundaer { color: #fff; border-color: rgba(255,255,255,0.75); background: transparent; }
.seksjon-cta .knapp-sekundaer:hover { background: rgba(255,255,255,0.12); }
.cta-demo-hint { font-size: 0.92rem; opacity: 0.85; margin: 0.4rem 0 0; }

/* ---- Referanseklubber (057) ------------------------------------------------------- */
.referanse-rutenett { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.8rem; }
.referanse-rutenett a { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; text-align: center; text-decoration: none; color: inherit; background: var(--bakgrunn); border: 1px solid var(--kant); border-radius: var(--radius); padding: 1rem 0.8rem; min-height: 8rem; justify-content: center; font-weight: 700; font-size: 0.92rem; transition: transform 0.15s, box-shadow 0.15s; }
.referanse-rutenett a:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08); }
.referanse-rutenett img { max-height: 56px; max-width: 120px; object-fit: contain; }
.referanse-initial { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--aksent-lys); color: var(--aksent); font-size: 1.5rem; font-weight: 800; }

/* ---- landing: landingssider på egne domener (Pages/Landing, Tenancy/Landingssider.cs) ---- */
.medl { background: var(--bakgrunn); padding: 0.7rem 0.8rem 0.8rem; }
.medl-filter { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-bottom: 0.55rem; font-size: 0.72rem; }
.medl-sok { display: inline-flex; align-items: center; gap: 0.3rem; background: #fff; border: 1px solid var(--kant); border-radius: 999px; padding: 0.2rem 0.6rem; color: var(--dempet); }
.medl-sok .ikon { width: 0.85rem; height: 0.85rem; }
.medl-pille { background: #fff; border: 1px solid var(--kant); border-radius: 999px; padding: 0.2rem 0.6rem; font-weight: 700; color: var(--tekst); }
.medl-pille-aktiv { background: var(--klubbfarge); border-color: var(--klubbfarge); color: #fff; }
.medl-liste { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--kant); border-radius: 10px; overflow: hidden; font-size: 0.76rem; box-shadow: var(--skygge); }
.medl-liste th { text-align: left; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dempet); padding: 0.4rem 0.55rem; background: var(--flate); border-bottom: 1px solid var(--kant); }
.medl-liste td { padding: 0.4rem 0.55rem; border-bottom: 1px solid var(--kant); vertical-align: top; }
.medl-liste tr:last-child td { border-bottom: 0; }
.medl-liste b { display: block; font-size: 0.8rem; line-height: 1.2; }
.medl-liste small { display: block; color: var(--dempet); font-size: 0.66rem; line-height: 1.25; }
.medl-liste i { font-style: normal; font-weight: 800; font-size: 0.66rem; border-radius: 999px; padding: 0.1rem 0.45rem; white-space: nowrap; }
.medl-ok { background: var(--ok-lys); color: var(--ok); }
.medl-nei { background: var(--varsel-lys); color: #6b4b00; }
.medl-fri { background: #eeece6; color: var(--dempet); }
.medl-bunn { margin-top: 0.6rem; background: #fff; border: 1px solid var(--kant); border-radius: 10px; padding: 0.5rem 0.7rem 0.55rem; box-shadow: var(--skygge); }
.medl-bunn b { display: block; font-size: 0.8rem; margin-bottom: 0.3rem; }
.medl-bunn em { display: block; height: 0.4rem; background: #eeece6; border-radius: 999px; overflow: hidden; }
.medl-bunn em i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--aksent), var(--klubbfarge)); }
.medl-bunn span { display: block; margin-top: 0.3rem; font-size: 0.7rem; color: var(--dempet); }
.landing-hvem { margin-top: 1.4rem; }
.landing-hvem .boks { margin: 0; height: 100%; }
.landing-hvem h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.4rem; font-size: 1.15rem; }
.landing-hvem h3 .ikon { color: var(--aksent); width: 1.3rem; height: 1.3rem; }
.landing-hvem .hake { margin-top: 0.4rem; }
.landing-nif { background: var(--info-lys); border-color: color-mix(in srgb, var(--klubbfarge) 30%, #fff); }
.landing-nif h3 .ikon { color: var(--klubbfarge); }
.landing-nif p { margin: 0.5rem 0; font-size: 0.95rem; }
.landing-fordeler { grid-template-columns: repeat(4, 1fr); }
.landing-lenker { margin-top: 1.4rem; font-size: 0.9rem; opacity: 0.9; }
.landing-lenker a { color: #fff; }
@media (max-width: 800px) {
    .landing-fordeler { grid-template-columns: 1fr; }
    .medl-liste th:nth-child(3), .medl-liste td:nth-child(3) { display: none; }
    .medl-filter .medl-pille:nth-child(n+4) { display: none; }
}