/* Vevsmia — Pakkar og prisar (/prisar/)
   Frosen implementering av den godkjende designen.
   Fargar, avstandar og typografi er identiske med designutkastet. */

:root{
  --mork:#302F2D;
  --kort:#3A3835;
  --kort-vekst:#3E3B37;
  --lys:#F1EFE8;
  --lys-tint:#EDEAE2;
  --sand:#E4E1D8;
  --dempa-lys:#C7C1B5;
  --dempa-mork:#5F5B54;
  --tekst-tint:#4A4640;
  --aksent-lys:#D2A277;
  --aksent-mork:#8A5731;
  --strek:#B87A4B;
  --hair-lys:rgba(241,239,232,.16);
  --hair-lys-svak:rgba(241,239,232,.12);
  --hair-mork:#C9C4B7;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Work Sans',system-ui,-apple-system,sans-serif;
  --ord:'Hanken Grotesk',var(--sans);
  --rad:1120px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}

/* Same modell som framsida: native mjuk scrolling berre når brukaren ikkje
   har bedt om redusert rørsle. Ingen JS, inga eigendefinert easing. */
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth;}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}}
body{margin:0;background:var(--mork);color:var(--lys);font-family:var(--sans);font-weight:400;line-height:1.5;}
img,svg{display:block;max-width:100%;}
p{margin:0;text-wrap:pretty;}
ul,ol,dl{margin:0;padding:0;list-style:none;}
h1,h2,h3{margin:0;}
a{color:var(--aksent-mork);text-decoration:none;}
a:hover{color:var(--mork);}
table{border-collapse:collapse;}

/* Skjult for auge, lesbart for skjermlesar */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

.hopp{position:absolute;left:-9999px;top:0;}
.hopp:focus{position:fixed;left:20px;top:20px;z-index:40;background:var(--lys);color:var(--mork);padding:12px 18px;border-radius:6px;font-weight:500;}

.rad{max-width:var(--rad);margin-inline:auto;padding-inline:20px;}
.rad--stabel{display:flex;flex-direction:column;gap:clamp(32px,4vw,44px);}

/* ── Augebryn og typografi ───────────────────────── */
.augebryn{font-size:.78rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;margin:0 0 .9rem;}
.augebryn--liten{font-size:.75rem;letter-spacing:.14em;}
.augebryn--lys{color:var(--aksent-lys);}
.augebryn--mork{color:var(--aksent-mork);}
.augebryn--dempa{color:var(--dempa-lys);}

.t-stor{font-family:var(--serif);font-weight:700;font-variation-settings:'wght' 700,'opsz' 72,'SOFT' 30,'WONK' 0;font-size:clamp(2rem,5vw,2.85rem);line-height:1.07;letter-spacing:-.025em;margin:0 0 1rem;max-width:22ch;}
.t-mellom{font-family:var(--serif);font-weight:700;font-variation-settings:'wght' 700,'opsz' 72,'SOFT' 30,'WONK' 0;font-size:clamp(1.85rem,4vw,2.6rem);line-height:1.08;letter-spacing:-.025em;margin:0 0 1rem;}
.t-mellom--mork{color:var(--mork);max-width:24ch;}

.seksjon__intro{max-width:60ch;font-size:1.02rem;line-height:1.65;margin:0 0 clamp(28px,3.5vw,44px);}
.seksjon__intro--lys{color:var(--dempa-lys);}
.seksjon__intro--mork{color:var(--dempa-mork);max-width:62ch;}

/* ── Knappar ─────────────────────────────────────── */
.knapp{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:13px 26px;border-radius:6px;font-weight:500;border:1px solid transparent;transition:background-color .18s ease,border-color .18s ease,color .18s ease;}
.knapp--hairline{border-color:rgba(241,239,232,.28);color:var(--lys);padding-inline:24px;}
.knapp--hairline:hover{border-color:var(--strek);color:var(--lys);}
.knapp--lys{background:var(--lys);border-color:var(--lys);color:var(--mork);padding-inline:24px;}
.knapp--lys:hover{background:var(--sand);border-color:var(--sand);color:var(--mork);}
.knapp--mork{border-color:var(--mork);color:var(--mork);}
.knapp--mork:hover{background:var(--mork);color:var(--lys);}

/* ── Mva.-vising ──────────────────────────────────
   Prisgrunnlaget er alltid oppgitt eks. mva., og skal alltid synast.
   Inkl.-mva.-beløpa blir fyrst relevante når Vevsmia er registrert i
   Meirverdiavgiftsregisteret: legg klassen «vis-mva» på <body> då. */
.mva-eks{display:inline;}
.mva-inkl{display:none;}
body.vis-mva .mva-inkl{display:block;}

/* ── Toppmeny ────────────────────────────────────── */
.topp{background:var(--mork);}
.rad--topp{display:flex;align-items:center;gap:20px;min-height:72px;}
.merke{display:inline-flex;align-items:center;gap:13px;color:var(--lys);flex:none;}
.merke img{width:clamp(28px,7vw,40px);height:auto;flex:none;}
.merke__ord{font-family:var(--ord);font-weight:700;font-size:clamp(1.05rem,3.6vw,1.5rem);letter-spacing:.035em;line-height:1;color:var(--lys);white-space:nowrap;}

.nav{display:flex;align-items:center;gap:32px;margin-left:auto;font-size:.97rem;}
.nav__liste{display:flex;gap:24px;}
.nav__liste a{color:var(--dempa-lys);}
.nav__liste a:hover{color:var(--lys);}
.nav__liste a.er-aktiv{color:var(--lys);font-weight:500;border-bottom:1px solid var(--strek);padding-bottom:2px;}
/* Språkveljar: [flagg] NN · NB   [flagg] EN. Ytre gap skil flagg-gruppene,
   indre gap held flagg og kodar saman. Flagga er dekorative; tekstkoden er
   den funksjonelle språkidentiteten. .sprak__fullt er fullt språknamn for
   skjermlesar. */
.sprak{display:flex;align-items:center;gap:13px;font-size:.78rem;color:var(--dempa-lys);}
.sprak__gruppe{display:flex;align-items:center;gap:7px;}
.sprak__gruppe>span:not(.sprak__valt){opacity:.45;}
.sprak__valt{color:var(--lys);font-weight:500;}
.sprak__flagg{width:18px;height:auto;flex:none;border-radius:1px;box-shadow:0 0 0 1px rgba(241,239,232,.22);}
.sprak__fullt{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}
/* Lenkja til det andre språket. Negativ margin motverkar paddinga, slik at
   trykkflata blir 24 px høg utan at veljaren flyttar seg visuelt. */
.sprak__lenkje{padding:6px 5px;margin:-6px -5px;opacity:.68;text-decoration:none;transition:opacity .15s ease,color .15s ease;}
.sprak__lenkje:hover,.sprak__lenkje:focus-visible{opacity:1;color:var(--lys);text-decoration:underline;text-underline-offset:3px;}

.menyknapp{display:none;margin-left:auto;align-items:center;gap:8px;min-height:44px;padding:0 4px;background:none;border:0;color:var(--lys);font-family:var(--sans);font-size:.9rem;font-weight:500;cursor:pointer;}
.menyknapp__strekar{width:18px;}
.menyknapp__strekar span{display:block;height:1.5px;background:var(--lys);margin:4px 0;}
.menypanel{border-top:1px solid var(--hair-lys);padding:12px 20px 22px;}
.menypanel[hidden]{display:none;}
.menypanel__liste{display:flex;flex-direction:column;}
.menypanel__liste a{display:flex;align-items:center;min-height:48px;color:var(--dempa-lys);border-bottom:1px solid var(--hair-lys-svak);}
.menypanel__liste li:last-child a{border-bottom:0;}
.menypanel__liste a.er-aktiv{color:var(--lys);font-weight:500;}
.menypanel .sprak{font-size:.8rem;margin-top:14px;}

/* ── Hero ────────────────────────────────────────── */
.hero{background:var(--mork);border-top:1px solid var(--hair-lys);padding-block:clamp(48px,6vw,78px);}
.hero__intro{max-width:62ch;color:var(--dempa-lys);font-size:1.06rem;line-height:1.65;}

/* ── Pakkekort ───────────────────────────────────── */
.pakkar{background:var(--lys);color:var(--mork);padding-block:clamp(56px,7vw,92px);}
.kortgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px;align-items:stretch;}
.kort{display:flex;flex-direction:column;gap:1.5rem;background:var(--kort);border:1px solid var(--hair-lys);border-top:3px solid rgba(184,122,75,.45);border-radius:6px;padding:30px;}
.kort--vekst{background:var(--kort-vekst);border-color:rgba(241,239,232,.22);border-top-color:var(--strek);}
.kort__merkelapp{font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--aksent-lys);margin:0 0 .7rem;}
.kort__namn{font-family:var(--serif);font-weight:700;font-size:1.42rem;letter-spacing:-.01em;color:var(--lys);margin:0 0 .5rem;}
.kort__pris{font-family:var(--serif);font-weight:700;font-size:1.95rem;letter-spacing:-.015em;color:var(--lys);margin:0 0 .35rem;}
.kort__pris .mva-eks{font-family:var(--sans);font-weight:400;font-size:.44em;letter-spacing:0;color:var(--dempa-lys);}
.kort__mva{font-size:.88rem;color:var(--dempa-lys);margin:0 0 .35rem;}
.kort__skildring{color:var(--dempa-lys);line-height:1.6;margin:.75rem 0 0;}
.kort__inkludert{flex:1;border-top:1px solid var(--hair-lys);padding-top:1.4rem;}
.strekliste{display:grid;gap:.6rem;font-size:.97rem;color:var(--dempa-lys);line-height:1.5;}
.strekliste li{display:flex;gap:10px;}
.strekliste li>span{color:var(--aksent-lys);}

.felles{border:1px solid var(--hair-mork);border-radius:6px;background:var(--lys-tint);padding:24px 26px;}
.felles__liste{display:flex;flex-wrap:wrap;gap:10px 28px;color:var(--tekst-tint);font-size:.97rem;}
.felles__liste li{display:flex;gap:10px;}
.felles__liste li>span{color:var(--aksent-mork);}

.pakkar__botn{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;}
.pakkar__note{max-width:56ch;color:var(--dempa-mork);font-size:.93rem;line-height:1.6;}

/* ── Samanlikning ────────────────────────────────── */
.samanlikning{background:var(--mork);padding-block:clamp(56px,7vw,92px);}
.tabell{width:100%;font-size:.97rem;}
.tabell__innhald{text-align:left;vertical-align:bottom;padding:0 18px 18px 0;width:31%;font-size:.75rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--dempa-lys);}
.tabell thead th:not(.tabell__innhald){text-align:center;vertical-align:bottom;padding:0 14px 18px;width:23%;}
.tabell__namn{display:block;font-family:var(--serif);font-weight:700;font-size:1.15rem;color:var(--lys);}
.tabell__pris{display:block;font-size:.88rem;font-weight:400;color:var(--dempa-lys);margin-top:4px;}
.tabell__mva{font-size:.82rem;font-weight:400;color:var(--dempa-lys);margin-top:3px;}
.tabell tbody th{text-align:left;font-weight:400;color:var(--lys);padding:16px 18px 16px 0;border-top:1px solid var(--hair-lys);}
.tabell tbody td{text-align:center;color:var(--dempa-lys);padding:16px 14px;border-top:1px solid var(--hair-lys);}
.tabell__midt{border-inline:1px solid rgba(241,239,232,.1);}
.prikk{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--aksent-lys);}
.strek-nei{color:rgba(241,239,232,.34);}
.tabell__prisrad th,.tabell__prisrad td{padding-bottom:0;}
.tabell__prisetikett{color:var(--dempa-lys)!important;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;padding-top:22px!important;}
.tabell__prisrad td{padding-top:22px;}
.tabell__lenkje{font-family:var(--serif);font-weight:700;font-size:1.2rem;color:var(--lys);border-bottom:1px solid rgba(184,122,75,.6);padding-bottom:2px;}
.tabell__lenkje:hover{border-color:var(--strek);color:var(--lys);}
.tabell__prisrad .tabell__mva{margin-top:8px;}

.samanlikn-mobil{display:none;flex-direction:column;gap:20px;}
.samanlikn-mobil__liste{display:flex;flex-direction:column;gap:20px;}
.sblokk{border:1px solid var(--hair-lys);border-radius:6px;padding:22px;}
.sblokk--vekst{background:var(--kort-vekst);border-color:rgba(241,239,232,.22);border-top:3px solid var(--strek);}
.sblokk__namn{font-family:var(--serif);font-weight:700;font-size:1.25rem;color:var(--lys);margin:0 0 .2rem;}
.sblokk__pris{margin:0 0 1.1rem;font-size:.92rem;color:var(--dempa-lys);}
.sblokk__mva{font-size:.86rem;color:var(--dempa-lys);margin-top:.25rem;}
.sblokk__liste{display:flex;flex-direction:column;}
.sblokk__liste>div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--hair-lys-svak);}
.sblokk__liste dt{color:var(--dempa-lys);font-size:.93rem;}
.sblokk__liste dd{margin:0;text-align:right;color:var(--lys);font-size:.93rem;}
.sblokk__liste dd.er-nei{color:rgba(241,239,232,.5);}
.samanlikn-mobil__note{color:var(--dempa-lys);font-size:.93rem;line-height:1.6;border-top:1px solid var(--hair-lys);padding-top:18px;}

/* ── Eigarskap ───────────────────────────────────── */
.eigarskap{background:var(--lys);color:var(--mork);padding-block:clamp(56px,7vw,92px);}
.eig{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:0 56px;}
.eig li{border-top:1px solid var(--hair-mork);padding:18px 0;display:flex;gap:14px;font-size:1.01rem;}
.eig li>span{color:var(--aksent-mork);}
.eig__siste{border-bottom:1px solid var(--hair-mork);}

/* ── Vevsmia Drift ───────────────────────────────── */
.drift{background:var(--mork);padding-block:clamp(52px,6vw,80px);}

.drift__intro{max-width:68ch;}
.drift__tagline{font-family:var(--serif);font-weight:700;font-variation-settings:'wght' 700,'opsz' 48,'SOFT' 30,'WONK' 0;font-size:1.3rem;line-height:1.35;color:var(--lys);margin:0 0 1.2rem;max-width:36ch;}
.drift__lede{max-width:62ch;color:var(--dempa-lys);font-size:1.02rem;line-height:1.65;margin:0 0 1rem;}
.drift__lede:last-child{margin-bottom:0;}

/* Driftskorta bruker same .mva-eks som nettsidepakkane, so alle seks prisane
   blir styrte av éin mekanisme. Nowrap held «eks. mva.» samla, og mellomrommet
   ligg utanfor spanet so linja kan bryte mellom pris og tillegg paa smal skjerm. */
.kort__pris .mva-eks{white-space:nowrap;}

.driftfelles{display:flex;flex-direction:column;gap:1.6rem;max-width:74ch;}
.driftsitat{margin:0;border-left:3px solid var(--strek);padding-left:20px;display:flex;flex-direction:column;gap:.9rem;color:var(--dempa-lys);line-height:1.65;}
.driftsitat p{margin:0;}
.driftsitat strong{color:var(--lys);}
.driftfelles__vilkar{max-width:none;}

.driftfaq{border-top:1px solid var(--hair-lys);padding-top:clamp(32px,4vw,44px);}
.drift__faq-tittel{font-family:var(--serif);font-weight:700;font-size:clamp(1.5rem,3vw,1.9rem);line-height:1.1;letter-spacing:-.02em;color:var(--lys);margin:0 0 1.4rem;}
.faq{border-top:1px solid var(--hair-lys);}
.faq__punkt{border-bottom:1px solid var(--hair-lys);}
.faq__punkt summary{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:18px 0;font-family:var(--serif);font-weight:700;font-size:1.08rem;line-height:1.35;color:var(--lys);cursor:pointer;list-style:none;}
.faq__punkt summary::-webkit-details-marker{display:none;}
.faq__punkt summary::after{content:"+";flex:none;color:var(--aksent-lys);font-family:var(--sans);font-size:1.3rem;font-weight:400;line-height:1;}
.faq__punkt[open] summary::after{content:"–";}
.faq__svar{padding:0 0 20px;max-width:66ch;color:var(--dempa-lys);line-height:1.6;}
.faq__svar p{margin:0;}

/* ── Skreddarsydd ────────────────────────────────── */
.skreddar{background:var(--lys);color:var(--mork);padding-block:clamp(52px,6vw,80px);}
.rad--skreddar{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:32px 56px;align-items:center;}
.skreddar__tittel{font-family:var(--serif);font-weight:700;font-variation-settings:'wght' 700,'opsz' 60,'SOFT' 30,'WONK' 0;font-size:clamp(1.6rem,3.2vw,2.15rem);line-height:1.12;letter-spacing:-.02em;max-width:24ch;}
.skreddar__hogre{display:flex;flex-direction:column;align-items:flex-start;gap:1.6rem;}
.skreddar__tekst{max-width:52ch;color:var(--dempa-mork);font-size:1.02rem;line-height:1.65;}

/* ── Avsluttande CTA ─────────────────────────────── */
.cta{background:var(--mork);padding-block:clamp(64px,8vw,104px);border-top:1px solid var(--hair-lys);}
.rad--cta{display:flex;flex-direction:column;align-items:flex-start;gap:1.4rem;}
.rad--cta .augebryn{margin:0;}
.t-stor--cta{font-size:clamp(1.9rem,4.2vw,2.75rem);line-height:1.08;margin:0;max-width:24ch;}
.cta__tekst{max-width:60ch;color:var(--dempa-lys);font-size:1.06rem;line-height:1.65;}
.cta__knapp{margin-top:.6rem;}
.cta__epost{color:var(--dempa-lys);font-size:.95rem;margin:.4rem 0 0;}
.cta__epost a{color:var(--dempa-lys);border-bottom:1px solid rgba(184,122,75,.6);padding-bottom:1px;}
.cta__epost a:hover{color:var(--lys);}

/* ── Footer ──────────────────────────────────────── */
.botn{background:var(--mork);border-top:1px solid var(--hair-lys);padding-block:clamp(48px,5vw,68px);}
.rad--botn{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:40px 56px;}
.botn__merke{display:flex;flex-direction:column;gap:1.1rem;max-width:36ch;}
.botn__merke p{color:var(--dempa-lys);font-size:.95rem;line-height:1.6;}
/* align-self: start held klikkflata rundt sjølve merket. Utan denne blir
   lenkja strekt over heile footerkolonna, av di .botn__merke er flex. */
.merke--botn{gap:11px;align-self:start;}
.merke--botn img{width:32px;}
.merke--botn .merke__ord{font-size:1.2rem;}
/* Merket er ei lenkje til toppen av sida — same fokusring som framsida. */
.merke--botn:focus-visible{outline:2px solid var(--strek);outline-offset:3px;border-radius:3px;}
.botn__liste{display:grid;gap:.7rem;font-size:.95rem;}
.botn__liste a,.botn__vilkar a{color:var(--dempa-lys);}
.botn__liste a:hover,.botn__vilkar a:hover{color:var(--lys);}
.botn__nedst{margin-top:clamp(32px,4vw,48px);padding-top:22px;border-top:1px solid var(--hair-lys);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 28px;font-size:.88rem;color:var(--dempa-lys);}
.botn__vilkar{display:flex;flex-wrap:wrap;gap:12px 24px;}
.botn__nedst>p{opacity:.8;}

/* ── Mobil: same brytepunkt som i designutkastet (860 px) ── */
@media (max-width: 859px) {
  .nav { display: none; }
  .menyknapp { display: inline-flex; }
  .tabell { display: none; }
  .samanlikn-mobil { display: flex; }
}

/* Stabil overgang mellom sider */
body {
  animation: side-inn 400ms ease-out both;
}

body.side-ut {
  opacity: 0;
  transition: opacity 300ms ease-in;
}

@keyframes side-inn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}