/* ==========================================================================
   Mymiks, designsystem v2 «Pels og himmel»
   Felles stilark for alle sidene på mymiks.com.

   Kilden er designsystem-artefakten: https://claude.ai/artifact/WzEpaBovNZ1kZfzBPKUhyW
   (tokens, komponenter, sideforslag). Der de er uenige, vinner artefakten.

   To verdener: Pels (lys, det ekte) og Himmel (natt, spillet). En seksjon
   bytter verden med data-theme="himmel". Alle komponentene leser de samme
   tokenene, så de virker uendret i begge verdener.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root, [data-theme="pels"] {
  --flate:#F4F6F8; --flate-hevet:#FFFFFF; --flate-dyp:#E9EDF1;
  --blekk:#151A21; --blekk-2:#3E4650; --blekk-3:#5D6571;
  --linje:#DDE2E8; --som:#9AA3AE; --kant:#7C8591;
  --knapp:#1A1338; --paa-knapp:#FFF3D6; --lenke:#3B2F7A; --fokus:#3B2F7A;
  --glimt:#CBAA5E; --glimt-glod:#ffd98a26;
  --himmel-topp:#2A1F55; --himmel-bunn:#0E0B22; --stjernestov:#fff3d6b3; --foto:#F4F6F8;
  --fast-mork:#151A21; --fast-lys:#FFF3D6;
  --ravyn-pels:#C6C4C0; --ravyn-gull:#CBAA5E; --ravyn-sting:#9C7424; --ravyn-blekk:#7A5F1C;
  --shado-pels:#1D2228; --shado-petrol:#234D58; --shado-lys:#5FA8BC; --shado-blekk:#234D58;
  --zen-pels:#F4BEC6; --zen-sting:#C9616B; --zen-korall:#FF8674; --zen-blekk:#A8414D;
  --feil:#A14A50; --ok:#2E6B4A;
  /* Appens målere. En kontrakt med koden: brukes bare når spillet vises, endres aldri. */
  --vital-lav:#FF4D6D; --vital-middels:#FFD60A; --vital-hoy:#70E000;
  --skygge-hevet:0 12px 32px rgba(21,26,33,.08);
  --skygge-mynt:0 0 0 2px #ffd98a, 0 0 0 9px #ffd98a26, 0 24px 60px rgba(0,0,0,.4);
  --font-display:"Libre Caslon Text", Georgia, "Times New Roman", serif;
  --font-sans:Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --rom-1:4px; --rom-2:8px; --rom-3:12px; --rom-4:16px; --rom-5:24px;
  --rom-6:32px; --rom-7:48px; --rom-8:72px; --rom-9:112px;
  --radius-sm:8px; --radius:12px; --radius-kort:24px; --radius-pille:999px;
  --ease-soft:cubic-bezier(0.22,1,0.36,1);
  --sidemarg:var(--rom-6);
}
[data-theme="himmel"] {
  --flate:#1A1338; --flate-hevet:#2C2B5D; --flate-dyp:#0E0B22;
  --blekk:#FFF3D6; --blekk-2:#CFC8EA; --blekk-3:#ABA4D0;
  --linje:#3A3470; --som:#6E679A; --kant:#8A84B8;
  --knapp:#FFD98A; --paa-knapp:#1A1338; --lenke:#FFD98A; --fokus:#FFD98A;
  --glimt:#FFD98A; --ravyn-blekk:#CBAA5E; --shado-blekk:#5FA8BC; --zen-blekk:#FF8674;
  --feil:#FF9AA0; --ok:#86D9A3;
  --skygge-hevet:0 16px 40px rgba(0,0,0,.35);
}
@media (max-width: 720px) {
  /* Pels må med: den setter --sidemarg selv, og ellers får lyse seksjoner 32px marg på telefon */
  :root, [data-theme="pels"] { --sidemarg:var(--rom-4); }
}

/* ---------- Grunnlag ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--flate); color: var(--blekk);
  font: 400 16px/26px var(--font-sans); -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
h1, h2, h3, p { margin: 0; }
a { color: var(--lenke); }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }
[id] { scroll-margin-top: 88px; }
.mm-skjult { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mm-hopp { position: absolute; left: var(--rom-4); top: -100px; z-index: 100; padding: var(--rom-2) var(--rom-4); border-radius: var(--radius-pille); background: var(--knapp); color: var(--paa-knapp); font-weight: 500; text-decoration: none; }
.mm-hopp:focus { top: var(--rom-3); }

/* ---------- Verdener og seksjoner ---------- */
.mm-seksjon { background: var(--flate); color: var(--blekk); padding: var(--rom-8) var(--sidemarg); }
.mm-seksjon--dyp { background: var(--flate-dyp); }
[data-theme="himmel"].mm-seksjon,
[data-theme="himmel"].mm-himmelflate,
[data-theme="himmel"] .mm-himmelflate {
  background-color: var(--flate);
  background-image:
    radial-gradient(circle, var(--stjernestov) 0 1px, transparent 1.6px),
    radial-gradient(circle, var(--stjernestov) 0 0.7px, transparent 1.3px),
    linear-gradient(180deg, var(--himmel-topp), var(--flate) 55%, var(--himmel-bunn));
  background-size: 173px 173px, 97px 97px, 100% 100%;
  background-position: 11px 23px, 53px 7px, 0 0;
}
.mm-innhold { max-width: 1200px; margin: 0 auto; }
.mm-smal { max-width: 760px; margin: 0 auto; }
.mm-hode { display: grid; gap: var(--rom-3); margin-bottom: var(--rom-7); max-width: 760px; }
.mm-stabel { display: grid; gap: var(--rom-5); align-content: start; }
.mm-stabel--tett { gap: var(--rom-2); }
.mm-kol2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rom-9) var(--rom-8); align-items: center; }
.mm-kol2 > * { min-width: 0; }
.mm-tre { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--rom-5); }
.mm-fire { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--rom-4); }
.mm-rad { display: flex; flex-wrap: wrap; gap: var(--rom-3); align-items: center; }
@media (max-width: 1000px) {
  .mm-kol2 { grid-template-columns: 1fr; gap: var(--rom-7); }
  .mm-fire { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .mm-seksjon { padding-top: var(--rom-7); padding-bottom: var(--rom-7); }
  .mm-tre, .mm-fire { grid-template-columns: 1fr; }
  .mm-hode { margin-bottom: var(--rom-6); }
}

/* ---------- Typografi ---------- */
.mm-visning { font: 400 64px/68px var(--font-display); letter-spacing: -0.02em; text-wrap: balance; color: var(--blekk); }
.mm-h1 { font: 400 44px/50px var(--font-display); letter-spacing: -0.015em; text-wrap: balance; color: var(--blekk); }
.mm-h2 { font: 400 32px/40px var(--font-display); letter-spacing: -0.01em; text-wrap: balance; color: var(--blekk); }
.mm-h3 { font: 400 24px/32px var(--font-display); color: var(--blekk); }
.mm-stemme { font: italic 400 20px/30px var(--font-display); color: var(--blekk); }
.mm-ingress { font: 400 19px/30px var(--font-sans); color: var(--blekk-2); max-width: 34em; }
.mm-brod { font: 400 16px/26px var(--font-sans); color: var(--blekk-2); max-width: 65ch; }
.mm-liten { font: 400 14px/22px var(--font-sans); color: var(--blekk-3); max-width: 65ch; }
.mm-tall { font: 400 14px/20px var(--font-mono); font-variant-numeric: tabular-nums; }
.mm-ikon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mm-lenke { color: var(--lenke); text-decoration: underline; text-underline-offset: 3px; }
.mm-lenke:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; border-radius: 2px; }
@media (max-width: 720px) {
  .mm-visning { font-size: 40px; line-height: 44px; }
  .mm-h1 { font-size: 32px; line-height: 38px; }
  .mm-h2 { font-size: 26px; line-height: 32px; }
  .mm-ingress { font-size: 17px; line-height: 28px; }
}

/* ---------- Etikett ---------- */
.mm-etikett { display: inline-block; font: 500 12px/16px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--blekk-2); }
.mm-etikett--ravyn { color: var(--ravyn-blekk); }
.mm-etikett--shado { color: var(--shado-blekk); }
.mm-etikett--zen { color: var(--zen-blekk); }
[data-theme="himmel"] .mm-etikett--glimt { color: var(--glimt); }

/* ---------- Knapp ---------- */
.mm-knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--rom-2);
  min-height: 48px; padding: 0 var(--rom-5); border-radius: var(--radius-pille);
  border: 1px solid var(--knapp); background: var(--knapp); color: var(--paa-knapp);
  font: 500 15px/20px var(--font-sans); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 140ms var(--ease-soft), opacity 140ms var(--ease-soft);
}
.mm-knapp:hover { opacity: 0.9; }
.mm-knapp:active { transform: scale(0.97); }
.mm-knapp:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }
.mm-knapp--rolig { background: transparent; color: var(--blekk); border-color: var(--kant); }
.mm-knapp--liten { min-height: 40px; padding: 0 var(--rom-4); font-size: 14px; }
.mm-knapp--bred { width: 100%; }
.mm-knapp[disabled], .mm-knapp--av { opacity: 0.45; cursor: not-allowed; }
.mm-knapp__pris { font: 400 14px/20px var(--font-mono); font-variant-numeric: tabular-nums; opacity: 0.8; }
.mm-knapp__skille { width: 1px; height: 16px; background: currentColor; opacity: 0.35; }

/* ---------- Figurmerke ---------- */
.mm-figur {
  display: inline-flex; align-items: center; gap: var(--rom-2); height: 32px; padding: 0 var(--rom-4) 0 var(--rom-3);
  border-radius: var(--radius-pille); border: 1px solid transparent; font: 500 14px/1 var(--font-sans); text-decoration: none;
}
.mm-figur__sting { position: relative; width: 12px; height: 12px; flex: none; }
.mm-figur__sting::before, .mm-figur__sting::after {
  content: ""; position: absolute; left: -1px; top: 5px; width: 14px; height: 2.5px; border-radius: 2px; background: currentColor;
}
.mm-figur__sting::before { transform: rotate(45deg); }
.mm-figur__sting::after { transform: rotate(-45deg); }
.mm-figur--ravyn { background: var(--ravyn-pels); color: var(--fast-mork); }
.mm-figur--ravyn .mm-figur__sting { color: var(--ravyn-sting); }
.mm-figur--shado { background: var(--shado-pels); color: var(--fast-lys); }
.mm-figur--shado .mm-figur__sting { color: var(--shado-lys); }
[data-theme="himmel"] .mm-figur--shado { border-color: var(--kant); }
.mm-figur--zen { background: var(--zen-pels); color: var(--fast-mork); }
.mm-figur--zen .mm-figur__sting { color: var(--zen-sting); }

/* ---------- Valg (personlighet, figur) ---------- */
.mm-valg { position: relative; border: 0; margin: 0; padding: 0; display: grid; gap: var(--rom-3); min-width: 0; }
.mm-valg__tittel { font: 500 12px/16px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--blekk-2); padding: 0; }
.mm-valg__piller { display: flex; flex-wrap: wrap; gap: var(--rom-2); }
.mm-valg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mm-valg label {
  display: inline-flex; align-items: center; gap: var(--rom-2); min-height: 44px; padding: 0 var(--rom-5);
  border-radius: var(--radius-pille); border: 1px solid var(--kant); background: var(--flate-hevet); color: var(--blekk);
  font: 500 15px/20px var(--font-sans); cursor: pointer; transition: background 140ms, color 140ms;
}
.mm-valg input:checked + label { background: var(--blekk); color: var(--flate); border-color: var(--blekk); }
.mm-valg input:focus-visible + label { outline: 2px solid var(--fokus); outline-offset: 3px; }
.mm-valg__beskrivelse { font: 400 14px/22px var(--font-sans); color: var(--blekk-2); margin: 0; }
.mm-valg__beskrivelse b { color: var(--blekk); font-weight: 500; }

/* ---------- Myntramme ---------- */
.mm-mynt { aspect-ratio: 1; max-width: 100%; border-radius: 50%; overflow: hidden; background: var(--foto); box-shadow: var(--skygge-mynt); }
.mm-mynt img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12) translateY(3%); }

/* ---------- Produktkort ---------- */
.mm-kort { display: flex; flex-direction: column; gap: var(--rom-3); color: inherit; min-width: 0; }
.mm-kort__bilde { aspect-ratio: 1; border-radius: var(--radius-kort); overflow: hidden; background: var(--foto); }
.mm-kort__bilde img { width: 100%; height: 100%; object-fit: cover; transition: transform 420ms var(--ease-soft); }
.mm-kort:hover .mm-kort__bilde img { transform: scale(1.03); }
.mm-kort__topp { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rom-3); }
.mm-kort__pris { font: 400 14px/20px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--blekk-2); }
.mm-kort__tekst { font: 400 15px/24px var(--font-sans); color: var(--blekk-2); }
.mm-kort .mm-knapp { align-self: flex-start; margin-top: var(--rom-1); }

/* Et flatt kort uten bilde (grunnleggerne, skjemaet). Kort ligger flatt: ingen skygge. */
.mm-flate { background: var(--flate-hevet); border-radius: var(--radius-kort); padding: var(--rom-6); }
@media (max-width: 720px) { .mm-flate { padding: var(--rom-5); } }

/* ---------- Spillsteg ---------- */
.mm-steg { background: var(--flate-hevet); border-radius: var(--radius-kort); padding: var(--rom-5); display: flex; flex-direction: column; gap: var(--rom-3); min-width: 0; }
.mm-steg__bilde { height: 132px; border-radius: var(--radius-sm); display: grid; place-items: center; overflow: hidden; }
.mm-steg__tekst { font: 400 15px/24px var(--font-sans); color: var(--blekk-2); }
.mm-steg__nr { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--glimt); color: var(--glimt); font: 500 14px/1 var(--font-mono); }
.mm-maler { display: grid; gap: var(--rom-2); width: 100%; }
.mm-maler__rad { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: var(--rom-3); font: 500 11px/14px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--blekk-3); }
.mm-maler__spor { height: 8px; border-radius: var(--radius-pille); background: var(--linje); overflow: hidden; }
.mm-maler__fyll { height: 100%; border-radius: var(--radius-pille); }
.mm-maler__fyll--hoy { background: var(--vital-hoy); }
.mm-maler__fyll--middels { background: var(--vital-middels); }
.mm-maler__fyll--lav { background: var(--vital-lav); }

/* ---------- Trygghetsrad ---------- */
.mm-trygg { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--rom-5) var(--rom-6); }
.mm-trygg__punkt { display: grid; grid-template-columns: 24px 1fr; gap: var(--rom-3); align-items: start; }
.mm-trygg__punkt svg { width: 24px; height: 24px; stroke: currentColor; color: var(--blekk); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mm-trygg__tittel { font: 500 15px/22px var(--font-sans); color: var(--blekk); margin: 0 0 var(--rom-1); }
.mm-trygg__tekst { font: 400 14px/22px var(--font-sans); color: var(--blekk-2); }
@media (max-width: 560px) { .mm-trygg { grid-template-columns: 1fr; } }

/* ---------- Sømmen ---------- */
.mm-som { border: 0; height: 2px; margin: var(--rom-6) 0; background: repeating-linear-gradient(90deg, var(--som) 0 8px, transparent 8px 14px); }

/* ---------- Topptekst ---------- */
.mm-topp {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--rom-6); min-height: 72px; padding: 0 var(--sidemarg);
  background: var(--flate); border-bottom: 1px solid var(--linje);
}
.mm-topp__logo { display: flex; align-items: center; gap: var(--rom-3); text-decoration: none; color: var(--blekk); flex: none; }
.mm-topp__logo img { width: 36px; height: auto; }
.mm-topp__ordmerke { font: 400 24px/1 var(--font-display); letter-spacing: -0.01em; }
.mm-topp__meny { display: flex; align-items: center; gap: var(--rom-5); margin-left: auto; }
.mm-topp__meny a { font: 500 15px/20px var(--font-sans); color: var(--blekk-2); text-decoration: none; }
.mm-topp__meny a:hover { color: var(--blekk); text-decoration: underline; text-underline-offset: 6px; }
.mm-topp__meny a:focus-visible { outline: 2px solid var(--fokus); outline-offset: 4px; border-radius: 2px; }
.mm-topp__sprak { font: 500 14px/20px var(--font-sans); color: var(--blekk-3); text-decoration: none; }
.mm-topp__sprak:hover { color: var(--blekk); text-decoration: underline; text-underline-offset: 6px; }
.mm-topp__hoyre { display: flex; align-items: center; gap: var(--rom-4); flex: none; }
.mm-topp__menyknapp {
  display: none; width: 44px; height: 44px; place-items: center; padding: 0; border: 0; border-radius: var(--radius-pille);
  background: transparent; color: var(--blekk); cursor: pointer;
}
.mm-topp__menyknapp svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1000px) {
  .mm-topp { gap: var(--rom-3); min-height: 60px; }
  .mm-topp__logo img { width: 30px; }
  .mm-topp__ordmerke { font-size: 22px; }
  .mm-topp__hoyre { margin-left: auto; gap: var(--rom-2); }
  .mm-topp__menyknapp { display: grid; }
  .mm-topp__meny {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    padding: var(--rom-2) var(--sidemarg) var(--rom-5); background: var(--flate);
    border-bottom: 1px solid var(--linje); box-shadow: var(--skygge-hevet);
  }
  .mm-topp__meny.er-apen { display: flex; }
  .mm-topp__meny a { padding: var(--rom-3) 0; font-size: 17px; border-bottom: 1px solid var(--linje); }
  .mm-topp__meny a:last-child { border-bottom: 0; }
}
@media (max-width: 380px) {
  .mm-topp__sprak { display: none; }
  .mm-topp__meny .mm-topp__sprak-meny { display: block; }
}
.mm-topp__sprak-meny { display: none; }

/* ---------- Bunntekst ---------- */
.mm-bunn { background: var(--flate); color: var(--blekk-2); padding: var(--rom-8) var(--sidemarg) var(--rom-6); position: relative; }
.mm-bunn::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: repeating-linear-gradient(90deg, var(--som) 0 8px, transparent 8px 14px); }
.mm-bunn__rader { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: var(--rom-6); max-width: 1200px; margin: 0 auto; }
.mm-bunn__merke { display: flex; align-items: center; gap: var(--rom-3); margin-bottom: var(--rom-3); color: var(--blekk); }
.mm-bunn__merke img { width: 40px; height: auto; }
.mm-bunn__tittel { font: 500 12px/16px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--blekk); margin: 0 0 var(--rom-3); }
.mm-bunn ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--rom-2); }
.mm-bunn a { color: var(--blekk-2); text-decoration: none; font-size: 14px; }
.mm-bunn a:hover { color: var(--blekk); text-decoration: underline; }
.mm-bunn address { font-style: normal; font-size: 14px; line-height: 22px; }
.mm-bunn__sosial { display: flex; gap: var(--rom-2); margin-top: var(--rom-4); }
.mm-bunn__sosial a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--linje); border-radius: 50%; color: var(--blekk-2); }
.mm-bunn__sosial a:hover { color: var(--blekk); border-color: var(--kant); }
.mm-bunn__sosial svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mm-bunn__under { max-width: 1200px; margin: var(--rom-7) auto 0; padding-top: var(--rom-5); border-top: 1px solid var(--linje); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--rom-4); font: 400 13px/20px var(--font-sans); color: var(--blekk-3); }
.mm-bunn__under a { font-size: 13px; color: var(--blekk-3); }
.mm-bunn__under [aria-current] { color: var(--blekk); font-weight: 500; }
@media (max-width: 860px) {
  .mm-bunn { padding-top: var(--rom-7); }
  .mm-bunn__rader { grid-template-columns: 1fr 1fr; gap: var(--rom-6) var(--rom-4); }
  .mm-bunn__rader > div:first-child { grid-column: 1 / -1; }
  .mm-bunn__under { flex-direction: column; }
}

/* ---------- Fane (sammenleggbar, FAQ) ---------- */
.mm-fane { border-top: 2px dashed var(--som); }
.mm-fane:last-child { border-bottom: 2px dashed var(--som); }
.mm-fane summary { list-style: none; display: flex; align-items: center; gap: var(--rom-3); padding: var(--rom-4) 0; font: 500 16px/24px var(--font-sans); color: var(--blekk); cursor: pointer; }
.mm-fane summary::-webkit-details-marker { display: none; }
.mm-fane summary::after { content: "+"; margin-left: auto; padding-left: var(--rom-3); font: 400 20px/1 var(--font-mono); color: var(--blekk-2); }
.mm-fane[open] summary::after { content: "\2013"; }
.mm-fane p { margin: 0 0 var(--rom-4); font-size: 15px; line-height: 24px; color: var(--blekk-2); max-width: 65ch; }

/* ---------- Skjema ---------- */
.mm-skjema { display: grid; gap: var(--rom-6); }
.mm-skjema__rad { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rom-5); }
.mm-felt { display: grid; gap: var(--rom-2); }
.mm-felt__navn { font: 500 12px/16px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--blekk-2); }
.mm-felt input[type="text"], .mm-felt input[type="email"] {
  width: 100%; min-height: 48px; padding: 0 var(--rom-4); border: 1px solid var(--kant); border-radius: var(--radius);
  background: var(--flate-hevet); color: var(--blekk); font: 400 16px/24px var(--font-sans);
}
.mm-felt input::placeholder { color: var(--blekk-3); opacity: 1; }
.mm-felt input:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; border-color: var(--fokus); }
.mm-samtykke { display: grid; grid-template-columns: 20px 1fr; gap: var(--rom-3); align-items: start; cursor: pointer; font-size: 14px; line-height: 22px; color: var(--blekk-2); }
.mm-samtykke input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--knapp); }
.mm-melding { font: 500 15px/22px var(--font-sans); }
.mm-melding--ok { color: var(--ok); }
.mm-melding--feil { color: var(--feil); }
.mm-pris { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--rom-2) var(--rom-4); }
.mm-pris__tall { font: 400 32px/36px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--blekk); }
@media (max-width: 720px) { .mm-skjema__rad { grid-template-columns: 1fr; } }

/* ---------- Forsiden ---------- */
.mm-helt { padding-top: var(--rom-9); padding-bottom: var(--rom-9); }
.mm-helt__rutenett { grid-template-columns: 1.05fr 1fr; }
.mm-mynter { position: relative; width: 100%; max-width: 550px; aspect-ratio: 550 / 470; margin: 0 auto; }
.mm-mynter .mm-mynt, .mm-mynter .mm-stjerne { position: absolute; }
.mm-mynter .mm-mynt--shado { width: 36.4%; left: 0; top: 42.6%; }
.mm-mynter .mm-mynt--ravyn { width: 52.7%; left: 23.6%; top: 12.8%; z-index: 2; }
.mm-mynter .mm-mynt--zen { width: 36.4%; left: 63.6%; top: 46.8%; }
.mm-reir { position: relative; width: 300px; max-width: 100%; aspect-ratio: 300 / 264; margin: 0 auto; }
.mm-reir img:first-child { position: absolute; left: 0; bottom: 0; width: 100%; }
.mm-reir img:last-child { position: absolute; left: 31.3%; top: 13.6%; width: 37.3%; }
.mm-husker { grid-template-columns: 420px 1fr; }
.mm-husker__bilde { height: auto; }
.mm-venner { display: flex; align-items: center; gap: var(--rom-3); }
.mm-venner .mm-mynt { width: 72px; }
.mm-venner .mm-som { width: 44px; margin: 0; }
.mm-personlighet { display: grid; gap: var(--rom-1); }
.mm-foto { width: 100%; border-radius: var(--radius-kort); background: var(--foto); }
.mm-innhold-liste { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--rom-4) var(--rom-6); margin: 0; padding: 0; list-style: none; }
.mm-innhold-liste li { display: grid; gap: var(--rom-1); }
.mm-innhold-liste b { font: 500 15px/22px var(--font-sans); color: var(--blekk); }
.mm-innhold-liste span { font: 400 14px/22px var(--font-sans); color: var(--blekk-2); }
.mm-historie p + p { margin-top: var(--rom-4); }
.mm-historie-rutenett { grid-template-columns: 1fr 380px; }
.mm-trygghet-rutenett { grid-template-columns: 1fr 1.1fr; }
.mm-om-oss-rutenett { grid-template-columns: 1.1fr 0.9fr; }
.mm-illustrasjon { width: 100%; height: auto; border-radius: var(--radius-kort); }
@media (max-width: 1000px) {
  .mm-helt { padding-top: var(--rom-7); padding-bottom: var(--rom-8); }
  .mm-helt__rutenett, .mm-husker, .mm-historie-rutenett,
  .mm-trygghet-rutenett, .mm-om-oss-rutenett { grid-template-columns: 1fr; }
  .mm-illustrasjon { max-width: 360px; margin: 0 auto; }
  .mm-mynter { max-width: 420px; }
  /* I én kolonne: heltebildet først, og bildene etter teksten i «Husker du» og «Trygghet» */
  .mm-helt__rutenett .mm-mynter { order: -1; }
  .mm-husker__bilde, .mm-trygghet-rutenett .mm-foto { order: 1; }
  .mm-husker__bilde { justify-self: center; max-width: 280px; }
}
@media (max-width: 720px) {
  .mm-helt__rutenett { gap: var(--rom-6); }
  /* Turnstile-boksen er 300px fast, så skjemakortet får smalere innmarg på telefon */
  #reservasjon.mm-flate { padding-left: var(--rom-3); padding-right: var(--rom-3); }
}
@media (max-width: 560px) { .mm-innhold-liste { grid-template-columns: 1fr; } }

/* Nedtellingen til butikken åpner (heltebildet). Fjernes samme dag som «Reserver» blir «Kjøp nå». */
.mm-nedtelling { display: grid; gap: var(--rom-3); justify-items: start; }
.mm-nedtelling__ruter { display: flex; gap: var(--rom-2); }
.mm-nedtelling__ruter[hidden] { display: none; }
.mm-nedtelling__rute {
  display: grid; justify-items: center; gap: var(--rom-1); min-width: 76px; padding: var(--rom-3) var(--rom-2);
  border: 1px solid var(--linje); border-radius: var(--radius); background: var(--flate-hevet);
}
.mm-nedtelling__tall { font: 400 32px/36px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--blekk); }
.mm-nedtelling__navn { font: 500 11px/14px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--blekk-3); }
@media (max-width: 720px) {
  .mm-nedtelling { justify-items: stretch; }
  .mm-nedtelling__rute { flex: 1; min-width: 0; }
  .mm-nedtelling__tall { font-size: 26px; line-height: 30px; }
}

/* ---------- Dokumentsider (personvern, bruksanvisning) ---------- */
.dok { max-width: 760px; margin: 0 auto; }
.dok .mm-h1 { margin: var(--rom-4) 0 var(--rom-4); }
.dok-ingress { font: 400 17px/29px var(--font-sans); color: var(--blekk-2); margin-bottom: var(--rom-2) !important; }
.dok-liten { font-size: 14px !important; line-height: 22px !important; color: var(--blekk-3) !important; }
.dok-slutt { margin-top: var(--rom-6) !important; }
.dok h2 { font: 400 30px/38px var(--font-display); letter-spacing: -0.01em; color: var(--blekk); margin: var(--rom-8) 0 var(--rom-4); text-wrap: balance; }
.dok h3 { font: 400 21px/28px var(--font-display); color: var(--blekk); margin: var(--rom-6) 0 var(--rom-3); }
.dok p { font-size: 16px; line-height: 27px; color: var(--blekk-2); margin-bottom: var(--rom-4); }
.dok ul, .dok ol { font-size: 16px; line-height: 27px; color: var(--blekk-2); padding-left: 22px; margin: 0 0 var(--rom-4); }
.dok li { margin-bottom: var(--rom-2); }
.dok strong { color: var(--blekk); font-weight: 500; }
.dok a { color: var(--lenke); text-underline-offset: 3px; }
.dok code { font: 400 14px/1 var(--font-mono); background: var(--flate-dyp); padding: 2px 6px; border-radius: 4px; }
.dok .table-wrap { overflow-x: auto; margin-bottom: var(--rom-5); -webkit-overflow-scrolling: touch; }
.dok table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 15px; }
.dok th, .dok td { text-align: left; padding: var(--rom-3) var(--rom-4); border-bottom: 1px solid var(--linje); vertical-align: top; line-height: 23px; }
.dok th { font: 500 12px/18px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--blekk-2); }
.dok td { color: var(--blekk-2); }
.dok .callout { border-radius: var(--radius-kort); padding: var(--rom-5) var(--rom-6); margin-bottom: var(--rom-5); background: var(--flate-hevet); }
.dok .callout-quiet { background: var(--flate-dyp); }
.dok .callout p:last-child { margin-bottom: 0; }
.dok .toc { border-radius: var(--radius-kort); background: var(--flate-hevet); padding: var(--rom-5) var(--rom-6); margin: var(--rom-7) 0 var(--rom-2); }
.dok .toc ol { list-style: none; padding: 0; margin: 0; column-count: 2; column-gap: var(--rom-6); font-size: 15px; line-height: 24px; }
.dok .toc li { margin-bottom: var(--rom-2); break-inside: avoid; }
.dok .toc a { color: var(--blekk-2); text-decoration: none; }
.dok .toc a:hover { color: var(--blekk); text-decoration: underline; }
.dok .steps { list-style: none; padding: 0; margin: 0 0 var(--rom-5); counter-reset: steg; }
.dok .steps li { position: relative; padding-left: 48px; margin-bottom: var(--rom-4); counter-increment: steg; }
.dok .steps li::before {
  content: counter(steg); position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--knapp); color: var(--paa-knapp); font: 500 14px/1 var(--font-mono);
}
@media (max-width: 720px) {
  .dok h2 { font-size: 25px; line-height: 32px; margin-top: var(--rom-7); }
  .dok .toc ol { column-count: 1; }
  .dok .callout, .dok .toc { padding: var(--rom-4) var(--rom-5); }
}

/* ---------- Bevegelse ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mm-knapp, .mm-kort__bilde img, .mm-valg label { transition: none; }
  .mm-knapp:active { transform: none; }
  .mm-kort:hover .mm-kort__bilde img { transform: none; }
}