/* ============================================================
   QUIZ: HVILKEN GRÜNDERTYPE ER DU?
   Delt stilark for alle seks sidene i /quiz-grunder/.

   Brand: Hege Christine — samme håndverk som /innsiden/.
   Brand Board v1.0-palett, rutenett-tekstur, harde forskyvnings-
   skygger, fargeblokkering, Archivo + Newsreader + JetBrains Mono.

   Regelen fra innsiden.css gjelder her også:
   innholdsblokker er grafiske (harde skygger, rammer, fargeflater),
   kontroller er kontroller (myk elevasjon, ingen mørk kant).
   ============================================================ */

:root {
  --cream: #EFE6D4;
  --cream-hi: #F7F1E4;
  --ink: #2E3230;
  --rust: #C5522C;
  --rust-mork: #A8421F;
  --olive: #5E5F4C;
  --sage: #AFBEA0;
  --sand: #F0D9A8;
  /* de to rolige tonene i resultatrutenettet — cream-lys mot sage-tint.
     Begge holder AA mot rust-mørk kicker og ink brødtekst. */
  --kort-lys: #F7F1E4;
  --kort-tint: #E1E2D0;

  --display: 'Archivo', system-ui, sans-serif;
  --display-vekt: 800;
  --display-sperring: -0.032em;
  --redaksjonell: 'Newsreader', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

/* Bunnen skal alltid ligge i bunnkanten: på høye skjermer ville cream-flaten
   ellers stukket fram under den mørke footeren. */
body {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 17px; line-height: 1.6;
  color: var(--ink); background: var(--cream);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
}
body > main { flex: 1 0 auto; }
body > .topp, body > .foot { flex: none; }
img, svg { display: block; max-width: 100%; }

/* ---------- Bredde ----------
   ÉN kolonnebredde på hele funnelen, så alt flukter loddrett fra topp
   til bunn: header, hero, tekstblokker, kort, skjema og footer ligger
   på nøyaktig samme venstre- og høyrekant. Heroen puster i høyden i
   stedet for i bredden. */
.container { width: min(720px, calc(100% - 80px)); margin: 0 auto; }
@media (max-width: 640px) { .container { width: calc(100% - 48px); } }

/* Bred kolonne — samme mål som .container på /innsiden/, slik at sidemargene
   er identiske når man går mellom flatene. Brukes på topp, hero, opt-in,
   resultatseksjonen og bunnen. */
.container--bred { width: min(1080px, calc(100% - 80px)); margin: 0 auto; }
@media (max-width: 640px) { .container--bred { width: calc(100% - 48px); } }

/* ---------- Flater og rutenett ---------- */
.flate { position: relative; isolation: isolate; }
.flate::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--rutefarge) 1px, transparent 1px),
    linear-gradient(90deg, var(--rutefarge) 1px, transparent 1px);
  /* modul = kolonnen/9, sentrert: en linje lander nøyaktig på kolonnens
     venstre og høyre kant, så teksturen flukter med innholdet */
  background-size: calc(min(720px, 100% - 80px) / 9) calc(min(720px, 100% - 80px) / 9);
  background-position: 50% 0;
  z-index: -1; pointer-events: none;
}
/* Rutenett for den brede kolonnen. Antall moduler MÅ være et oddetall — da
   lander en linje nøyaktig på kolonnens venstre og høyre kant ved enhver
   skjermbredde (samme grunn som /9 i regelen over). */
.flate--bred::before {
  background-size: calc(min(1080px, 100% - 80px) / 13) calc(min(1080px, 100% - 80px) / 13);
}
.pa-cream { background: var(--cream); --rutefarge: rgba(46, 50, 48, 0.06); }
.pa-lys   { background: var(--cream-hi); --rutefarge: rgba(46, 50, 48, 0.05); }

/* ---------- Typografi ---------- */
h1, h2, h3 {
  font-family: var(--display); font-weight: var(--display-vekt);
  letter-spacing: var(--display-sperring); line-height: 1.04; color: var(--ink);
}
h1 { font-size: clamp(35px, 6vw, 58px); text-wrap: balance; }
h2 { font-size: clamp(31px, 4vw, 52px); text-wrap: balance; }
h3 { font-size: 21px; line-height: 1.2; letter-spacing: -0.022em; }
p { text-wrap: pretty; }
p + p { margin-top: 16px; }
.lead { font-size: clamp(17px, 1.35vw, 19.5px); line-height: 1.6; max-width: 56ch; }
.dempet { color: var(--olive); }
.liten { font-size: 15px; line-height: 1.55; color: var(--olive); }

a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: var(--rust); }
:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }

/* Mono-etikett: «Spørsmål 4 av 12», seksjonsmerkelapper */
.kicker {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--olive);
}

/* Sand-lapp — identiske verdier som .hero__lapp på /innsiden/ */
.lapp {
  display: inline-block; background: var(--sand);
  border: 1.5px solid var(--ink); border-radius: 6px;
  padding: 8px 14px;
  font-weight: 700; font-size: 13.5px;
  letter-spacing: 0.02em; color: var(--ink);
}

/* ---------- Seksjoner — samme skala som /innsiden/ ---------- */
.seksjon { padding: 104px 0; border-top: 1.5px solid var(--ink); }
.seksjon--tett { padding: 72px 0; }
@media (max-width: 1040px) {
  .seksjon { padding: 78px 0; }
  .seksjon--tett { padding: 62px 0; }
}
@media (max-width: 640px) {
  .seksjon, .seksjon--tett { padding: 62px 0; }
  /* uanket rutenett på mobil — den ankrede varianten legger en linje
     nøyaktig på kolonnekanten, som leser som en ramme */
  .flate::before { background-size: 64px 64px; background-position: 0 0; }
  .flate--bred::before { background-size: 64px 64px; background-position: 0 0; }
}

/* ---------- Topp ---------- */
.topp { background: var(--cream); border-bottom: 1.5px solid var(--ink); }
.topp__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 0;
}
/* Merket: monogram + signatur, samme mønster som på podcast-siten og
   /innsiden-salg/. Rent statisk — ingen lenke, ingen hover. */
.merke { display: inline-flex; align-items: center; gap: 12px; }
/* HC-monogrammet — samme merke som på de andre flatene til Hege Christine */
.hc-merke {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  background: var(--ink); color: var(--cream);
  border: 1.5px solid var(--ink); border-radius: 2px;
  font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 15px;
  letter-spacing: -0.04em; line-height: 1; padding-top: .05em;
}
/* Ordmerket: «Hege» i Archivo 900 ink, «Christine» i Newsreader kursiv rust.
   Mellomrommet i kilden gir opplest «Hege Christine»; gapet gir avstanden. */
.ordmerke {
  font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 21px;
  letter-spacing: -0.03em; line-height: 1; color: var(--ink);
  display: inline-flex; gap: .22em; align-items: baseline;
}
.ordmerke em {
  font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 500;
  color: var(--rust); letter-spacing: -0.01em;
}
/* Smale skjermer: navnet skal aldri brekke — «Hege» vike før forkortelser */
@media (max-width: 400px) {
  .merke { gap: 9px; }
  .ordmerke { font-size: 18px; }
}

/* ---------- Bunn ---------- */
.foot {
  background: var(--ink); color: rgba(239, 230, 212, 0.86);
  padding: 26px 0; font-size: 14.5px;
  /* hårstrek i cream — mot ink-seksjonen over ville en ink-kant vært usynlig */
  border-top: 1px solid rgba(239, 230, 212, 0.25);
}
.foot__inner {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px 20px; flex-wrap: wrap;
}
.foot a { color: rgba(239, 230, 212, 0.86); text-decoration: none; margin-left: 26px; }
.foot a:first-child { margin-left: 0; }
.foot a:hover { color: var(--sand); text-decoration: underline; }
@media (max-width: 640px) { .foot a { margin-left: 0; margin-right: 22px; } }

/* ---------- Knapper — kontroller, ikke grafikk ----------
   Rust-mørk (5,75:1), ingen ramme. Skyggen ligger RUNDT knappen. */
.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15px;
  text-transform: uppercase; letter-spacing: .035em;
  line-height: 1; text-decoration: none; cursor: pointer;
  min-height: 52px; padding: 16px 30px; border-radius: 6px;
  background: var(--rust-mork); color: #FFF8EE; border: 0;
  box-shadow: 0 2px 4px rgba(46, 50, 48, .30),
              0 8px 22px rgba(46, 50, 48, .34);
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.knapp:hover {
  background: #B84A26; color: #FFF8EE; transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(46, 50, 48, .28),
              0 13px 28px rgba(46, 50, 48, .36);
}
.knapp:active {
  transform: translateY(2px); background: var(--rust-mork);
  box-shadow: 0 1px 2px rgba(46, 50, 48, .32),
              0 3px 8px rgba(46, 50, 48, .26);
}
.knapp:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.knapp[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
/* på den mørke sluttflaten ville en ink-fokusring vært usynlig */
.slutt .knapp:focus-visible { outline-color: var(--sand); }

/* ---------- Kort — grafisk blokk med hard skygge ---------- */
.kort {
  background: var(--cream-hi); color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 3px;
  padding: 32px 30px; box-shadow: 8px 8px 0 var(--ink);
}
/* kortet er en lys flate — overskrifter og tekst inni skal alltid være ink,
   også når kortet står på en ink-seksjon */
.kort h2, .kort h3, .kort p, .kort label { color: var(--ink); }
/* kort-overskrifter er alltid mindre enn seksjonsoverskriftene */
.kort h2 { font-size: clamp(23px, 2.6vw, 30px); }
.kort--sage { background: var(--sage); }
.kort__hode { margin-bottom: 20px; }
.kort h3 { margin-bottom: 11px; }
@media (max-width: 640px) {
  .kort { padding: 24px 20px; box-shadow: 5px 5px 0 var(--ink); }
}

/* ---------- Typefigurer: størrelseslogikken ----------
   .figur styrer bare mål og plassering. Selve tegningen ligger i
   .karakter-blokken under (gründerkarakterene). De gamle geometriske
   symbolene bruker de samme målene og lever videre i figurer.html. */
.figur { width: 112px; height: 112px; flex: none; }
.figur--stor { width: clamp(96px, 26vw, 136px); height: clamp(96px, 26vw, 136px); }
.figur--liten { width: 64px; height: 64px; }
.figur .fig-skygge { fill: var(--ink); }
.figur .fig-plate { fill: var(--sand); stroke: var(--ink); stroke-width: 1.5; }
.figur .lin {
  fill: none; stroke: var(--ink); stroke-width: 2;
  stroke-linecap: square; stroke-linejoin: miter;
}
.figur .lin-stiplet {
  fill: none; stroke: var(--ink); stroke-width: 1.5;
  stroke-dasharray: 4 3.5; opacity: .55;
}
.figur .aks { fill: none; stroke: var(--rust); stroke-width: 2.4; stroke-linecap: butt; }
.figur .aks-fyll { fill: var(--rust); stroke: none; }

.figurrad {
  display: flex; gap: clamp(12px, 4vw, 26px);
  align-items: center; flex-wrap: wrap;
}
@media (max-width: 400px) { .figur--liten { width: 56px; height: 56px; } }

/* ---------- Gründerkarakterene ----------
   Fire vennlige maskoter i ÉN familie, bygget som søsken av chat-boten på
   /innsiden/: samme utklipp-estetikk (tykk lys sticker-kant rundt hele
   figuren), samme 3D-gradient i rust på kroppen, sand på antenne, armer og
   føtter, cream skjerm med ink ansikt. Alle deler samme 100×100-rutenett,
   samme strøkvekt og samme harde skygge (5 px ned, 6 px høyre).

   Lagdeling i hver SVG:
     1. .kar-skygge  — silhuetten i skyggefarge, forskjøvet (ligger stille)
     2. .kar-figur   — sticker-kanten + detaljene (sveve-animasjonen bor her)
     3. .kar-attributt — typens redskap, med eget mikrogrep

   Alle karakterene er rent dekorative og skal alltid ha aria-hidden="true". */
.karakter { overflow: visible; }

.karakter .kar-skygge { fill: var(--ink); stroke: var(--ink); stroke-width: 7; stroke-linejoin: round; }
/* mot den mørke plakat-heroen er ink usynlig — der er skyggen rust */
.figur--plakat.karakter .kar-skygge { fill: var(--rust); stroke: var(--rust); }
/* sticker-kanten: samme lyse tone som boten på /innsiden/ */
.karakter .kar-kant { fill: #FFF8EE; stroke: #FFF8EE; stroke-width: 7; stroke-linejoin: round; }

/* Konturvekten er felles for alle fire — det er den som binder familien
   sammen. Selve fyllet settes per form (style="fill:var(--…)"), for hver
   karakter har sin egen hovedfarge: rust, sage, sand og ink. */
.karakter .kar-skall { stroke: var(--ink); stroke-width: 2.2; }
.karakter .kar-del { stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.karakter .kar-verktoy { stroke: var(--ink); stroke-width: 2.1; stroke-linejoin: round; }
.karakter .kar-flat { stroke: none; }
.karakter .kar-stang { fill: var(--ink); }
.karakter .kar-skjerm { fill: var(--cream-hi); }
.karakter .kar-glans { fill: rgba(255, 255, 255, .40); }
.karakter .kar-pupill { fill: var(--ink); }
.karakter .kar-glimt { fill: var(--cream-hi); }
.karakter .kar-strek { fill: none; stroke: var(--ink); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.karakter .kar-ring { fill: none; stroke: var(--ink); stroke-width: 1.6; opacity: .45; }
.karakter .kar-glimtstrek { fill: none; stroke: #FFF8EE; stroke-width: 2.4; stroke-linecap: round; }

/* ---- Idle: pust, blunk og ett typespesifikt mikrogrep ----
   Rolige tempoer og forskjøvet start, så de fire aldri marsjerer i takt.
   px i en SVG-transform = brukerenheter, altså 1 % av figurhøyden. */
.karakter .kar-figur { animation: kar-sveve 4.6s ease-in-out infinite; }
@keyframes kar-sveve {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

.karakter .kar-oye { transform-box: fill-box; transform-origin: center; animation: kar-blunk 5.6s ease-in-out infinite; }
@keyframes kar-blunk {
  0%, 91%, 100% { transform: scaleY(1); }
  94%           { transform: scaleY(.1); }
  97%           { transform: scaleY(1); }
}

.karakter .kar-attributt { transform-box: view-box; }

/* Skaperen banker lett med klossen */
.kar--skaper .kar-figur { animation-duration: 4.4s; }
.kar--skaper .kar-oye { animation-delay: -.4s; }
.kar--skaper .kar-attributt {
  transform-origin: 84px 41px;
  animation: kar-bank 3.6s ease-in-out infinite;
}
@keyframes kar-bank {
  0%, 58%, 100% { transform: translateY(0) rotate(0); }
  67%           { transform: translateY(2.4px) rotate(3.5deg); }
  76%           { transform: translateY(0) rotate(0); }
  83%           { transform: translateY(1.5px) rotate(2deg); }
  90%           { transform: translateY(0) rotate(0); }
}

/* Utforskerens lupe vipper sakte fram og tilbake */
.kar--utforsker .kar-figur { animation-duration: 5.2s; animation-delay: -1.3s; }
.kar--utforsker .kar-oye { animation-delay: -2.1s; }
.kar--utforsker .kar-attributt {
  transform-origin: 82px 51px;
  animation: kar-vipp 4.8s ease-in-out infinite;
}
@keyframes kar-vipp {
  0%, 100% { transform: rotate(-5deg); }
  50%      { transform: rotate(5deg); }
}

/* Kommersialistens prislapp dingler */
.kar--kommersialist .kar-figur { animation-duration: 5s; animation-delay: -2.6s; }
.kar--kommersialist .kar-oye { animation-delay: -3.4s; }
.kar--kommersialist .kar-attributt {
  transform-origin: 80px 46px;
  animation: kar-dingle 3.9s ease-in-out infinite;
}
@keyframes kar-dingle {
  0%, 100% { transform: rotate(-4.5deg); }
  50%      { transform: rotate(4.5deg); }
}

/* Visjonæren hever kikkerten et kort øyeblikk, og senker den igjen */
.kar--visjonar .kar-figur { animation-duration: 5.6s; animation-delay: -3.9s; }
.kar--visjonar .kar-oye { animation-delay: -1.1s; }
.kar--visjonar .kar-attributt {
  transform-origin: 82px 47px;
  animation: kar-loft 6.4s ease-in-out infinite;
}
@keyframes kar-loft {
  0%, 62%, 100% { transform: translateY(0) rotate(0); }
  72%, 84%      { transform: translateY(-2.8px) rotate(-4deg); }
  93%           { transform: translateY(0) rotate(0); }
}

/* ============================================================
   OPT-IN-SIDEN
   ============================================================ */
/* Prinsipp: man skal alltid kunne starte over folden. Skjemakortet ligger
   derfor i høyre spalte av heroen, ikke i en egen seksjon lenger nede. */
.opt-hero { padding: 54px 0 62px; border-top: 0; }
.opt-hero .lapp { margin-bottom: 22px; }
.opt-hero h1 { margin-bottom: 20px; }
.opt-hero .lead { margin-bottom: 0; max-width: 44ch; }
/* microcopyen i skjemakortet: vanlig skrift, kursiven er reservert
   disclaimeren under knappen */
.opt-hero .kort__hode .skjemanote { margin-top: 7px; font-style: normal; font-family: inherit; font-size: 13.5px; }
.opt-hero__skjema { margin-top: 32px; }
/* Opt-in-kortet skal være kompakt: mindre polstring, tettere felter og
   disclaimeren rett under knappen. */
.opt-hero__skjema .kort { padding: 26px 26px 22px; }
.opt-hero__skjema .kort__hode { margin-bottom: 16px; }
.opt-hero__skjema .kort h2 { font-size: clamp(26px, 2.4vw, 32px); }
.opt-hero__skjema .skjema { gap: 14px; }
.opt-hero__skjema .skjema label { gap: 5px; }
.opt-hero__skjema .skjema input { padding: 11px 13px; }
/* Karakterraden åpner heroen: den står over overskriften, venstrestilt på
   felles grunnlinje, som et hint om de fire typene. */
.opt-hero__figurer {
  margin: 0 0 26px;
  display: flex; flex-wrap: wrap;
  gap: clamp(8px, 1.4vw, 18px); align-items: end;
}
.opt-hero__figurer .figur--liten { width: clamp(88px, 9.5vw, 124px); height: auto; }

@media (min-width: 900px) {
  .opt-hero__inner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    /* rad 2 tar opp overskuddshøyden fra kortet, så figurene ikke blir
       dyttet nedover av at kortet er høyere enn teksten */
    grid-template-rows: auto 1fr;
    gap: 28px 56px;
    /* venstre spalte sentreres mot skjemakortet, så heroen ikke slutter
       høyt oppe med tomrom under teksten */
    align-items: center;
  }
  /* Kortet spenner begge radene og starter i topp — da ligger knappen så
     høyt som mulig, og figurene får plass under teksten uten å skyve. */
  .opt-hero__tekst   { grid-column: 1; grid-row: 1 / span 2; }
  .opt-hero__skjema  { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
/* Lave laptop-skjermer (1280 × 800 og lavere): stram heroen så hele kortet
   inkludert knappen holder seg over folden. */
@media (min-width: 900px) and (max-height: 850px) {
  .opt-hero { padding: 36px 0 44px; }
  .opt-hero h1 { font-size: clamp(34px, 3.4vw, 46px); margin-bottom: 16px; }
  .opt-hero__figurer { margin-bottom: 20px; }
  .opt-hero__figurer .figur--liten { width: clamp(64px, 6.4vw, 84px); }
}
/* Mobil: skjemaet skal nås uten å lete. Punktene flyttes UNDER kortet, og
   figurrad, overskrift og ingress strammes, så knappen ligger like under
   folden i stedet for langt nede. display:contents løfter barna i
   tekstblokken opp i kolonnen, så de kan sorteres fritt. */
@media (max-width: 640px) {
  /* Heroen fyller skjermen: luft over og under innholdet, og footeren
     havner under folden i stedet for å ligge og lure i kanten. */
  .opt-hero {
    padding: 40px 0; min-height: calc(100dvh - 66px);
    display: flex; align-items: center;
  }
  /* IKKE width: 100% her — det overstyrer .container--bred og spiser
     sidemargene. Flex-elementet skal beholde kolonnebredden sin. */
  .opt-hero__inner { display: flex; flex-direction: column; }
  .opt-hero__tekst { display: contents; }
  /* Én figur av gangen: alle ligger i samme rute og veksler i sløyfe, så
     raden ikke krymper fire figurer ned til frimerker på liten skjerm. */
  .opt-hero__figurer {
    order: 1; margin-bottom: 16px; gap: 0;
    display: grid; grid-template-columns: 1fr; justify-items: center;
    min-height: min(205px, 54vw);
  }
  .opt-hero__figurer .figur--liten {
    grid-area: 1 / 1; width: min(200px, 52vw);
    opacity: 0; animation: figurrotasjon 12s linear infinite;
  }
  .opt-hero__figurer .figur--liten:nth-child(1) { animation-delay: 0s; }
  .opt-hero__figurer .figur--liten:nth-child(2) { animation-delay: 3s; }
  .opt-hero__figurer .figur--liten:nth-child(3) { animation-delay: 6s; }
  .opt-hero__figurer .figur--liten:nth-child(4) { animation-delay: 9s; }
  .opt-hero h1 { order: 2; font-size: clamp(30px, 8.4vw, 38px); margin-bottom: 12px; }
  .opt-hero .lead { order: 3; font-size: 15.5px; line-height: 1.5; }
  .opt-hero__skjema { order: 4; margin-top: 20px; }
  .opt-hero__skjema .kort { padding: 22px 20px 20px; }
  .opt-hero__skjema .kort h2 { font-size: 24px; }
  .opt-hero .kort__hode { margin-bottom: 14px; }
}

/* ---------- Skjema ---------- */
/* Skjemaet skal være lett: tynn kant, luft mellom feltene og en label som
   hvisker i stedet for å rope. Feltene får høyde fra polstringen, ikke fra
   en min-height, så kortet ikke blir massivt. */
.skjema { display: grid; gap: 18px; }
.skjema label {
  display: grid; gap: 7px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--olive);
}
.skjema input {
  font-family: 'Archivo', sans-serif; font-size: 16.5px;
  padding: 12px 14px;
  border: 1px solid rgba(46, 50, 48, 0.34); border-radius: 4px;
  background: #fff; color: var(--ink); width: 100%;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.skjema input:hover { border-color: rgba(46, 50, 48, 0.55); }
.skjema input:focus { border-color: var(--rust); box-shadow: 0 0 0 3px rgba(197, 82, 44, 0.14); }
.skjema input:focus-visible { outline: none; }
@media (max-width: 640px) { .skjema input { padding: 14px; } }
.skjema .knapp { width: 100%; margin-top: 6px; }
/* Disclaimeren hører til knappen, ikke til bunnen av kortet: kursiv og tett
   under, så den leses som en fotnote til handlingen. */
.skjemanote {
  font-size: 12.5px; line-height: 1.5; color: var(--olive);
  font-family: var(--redaksjonell); font-style: italic;
}
.skjema > .skjemanote { margin-top: -4px; }
/* meldingsfeltet er tomt til det brukes, og skal ikke skyve noe ned */
.skjema > .skjemanote[data-skjemamelding]:empty { display: none; }
/* lenken i noten skal være tydelig lesbar, som lenker ellers på siden */
.skjemanote a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.skjemanote a:hover { color: var(--rust); }
.skjemanote[data-state="error"] { color: var(--rust-mork); font-weight: 600; }

/* Inline bekreftelse — haken tegner seg én gang (1,4 s), så ro */
.suksess { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 12px 0 4px; }
.suksess strong {
  font-family: var(--display); font-weight: var(--display-vekt);
  font-size: 28px; letter-spacing: -0.03em; line-height: 1.2;
}
.suksess span { font-size: 16.5px; color: var(--olive); max-width: 34ch; }
.suksess__hake { width: 74px; height: 74px; color: var(--rust); margin-bottom: 4px; }
.suksess__hake path { stroke: currentColor; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.suksess__hake .h-ring { stroke-dasharray: 110; stroke-dashoffset: 110; animation: tegn 0.8s ease-out forwards; }
.suksess__hake .h-hake { stroke: var(--ink); stroke-dasharray: 40; stroke-dashoffset: 40; animation: tegn 0.6s ease-out 0.7s forwards; }
@keyframes tegn { to { stroke-dashoffset: 0; } }

/* Kajabi-embed og svar-iframe skal aldri synes */
.kajabi-skjult { position: absolute; left: -9999px; top: -9999px; visibility: hidden; pointer-events: none; }
.kajabi-ramme { display: none; }

/* ============================================================
   QUIZEN
   ============================================================ */
/* body-regelen øverst gir allerede kolonneflyt og full høyde */
.quiz-hoved {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 30px 0 36px; border-top: 0;
}
@media (max-width: 640px) { .quiz-hoved { padding: 10px 0 14px; } }

.fremdrift { margin-bottom: 26px; }
.fremdrift__topp { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.fremdrift__spor { height: 6px; background: transparent; border: 1.5px solid var(--ink); border-radius: 2px; overflow: hidden; }
.fremdrift__fyll { height: 100%; width: 0; background: var(--rust); transition: width .3s cubic-bezier(0.22, 1, 0.36, 1); }

.sporsmal { border: 0; min-width: 0; }
.sporsmal:focus { outline: none; }
.sporsmal legend {
  display: block; float: none; width: 100%;
  font-family: var(--display); font-weight: var(--display-vekt);
  font-size: clamp(24px, 5vw, 36px); line-height: 1.1;
  letter-spacing: var(--display-sperring); color: var(--ink);
  text-wrap: pretty; padding: 0; margin-bottom: 22px;
}

.valg { display: grid; gap: 11px; }
.valg__alt {
  position: relative; display: block;
  padding: 15px 18px 15px 46px;
  background: var(--cream-hi);
  border: 1.5px solid var(--ink); border-radius: 3px;
  font-size: 15.5px; line-height: 1.5;
  cursor: pointer; min-height: 56px;
  transition: box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.valg__alt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
/* Markøren til venstre — kvadrat, samme geometri som resten av siden */
.valg__alt::before {
  content: ''; position: absolute; left: 17px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px;
  border: 1.5px solid var(--ink); background: transparent;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.valg__alt:hover { background: #FFFDF7; box-shadow: 4px 4px 0 rgba(46, 50, 48, .22); }
.valg__alt.er-valgt {
  border-color: var(--rust); background: var(--cream-hi);
  box-shadow: 5px 5px 0 var(--rust);
}
.valg__alt.er-valgt::before { background: var(--rust); border-color: var(--rust); }
/* Radioknappen er visuelt skjult, så fokusringen må ligge på hele alternativet.
   :focus-within gjør det uten JS — piltastene i radiogruppen flytter fokus,
   og markeringen følger med. */
.valg__alt:focus-within { outline: 3px solid var(--ink); outline-offset: 2px; }
.valg__alt.er-valgt:focus-within { outline-color: var(--rust); }

.quiz-bunn { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.quiz-bunn [data-neste] { margin-left: auto; }
.tilbake {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 6px 2px;
  font-family: 'Archivo', sans-serif; font-size: 15px; font-weight: 600;
  color: var(--olive); background: none; border: 0; cursor: pointer;
}
.tilbake::before { content: '←'; color: var(--rust); }
.tilbake:hover { color: var(--ink); }

@media (max-width: 640px) {
  /* Målet er ett spørsmål per skjerm uten scrolling. Hver piksel her er
     målt mot det lengste spørsmålet på 375 × 812. */
  .fremdrift { margin-bottom: 16px; }
  .sporsmal legend { margin-bottom: 14px; }
  .valg { gap: 8px; }
  .valg__alt { padding: 12px 15px 12px 42px; font-size: 14.5px; line-height: 1.45; min-height: 52px; }
  .valg__alt::before { left: 14px; width: 14px; height: 14px; }
  .valg__alt.er-valgt { box-shadow: 4px 4px 0 var(--rust); }
  .quiz-bunn { margin-top: 16px; }
  .quiz-bunn .knapp { min-height: 50px; padding: 14px 24px; }
  .quiz-side .foot { padding: 18px 0; }
}

/* ============================================================
   RESULTATSIDENE
   Fire flater, ikke flere: mørk plakat-hero → hele resultatet samlet i
   ÉN cream-seksjon → stram handlingsstripe → Innsiden som sluttpunkt.
   Hele resultatet skal kunne leses med ett–to rolige sveip.
   Alle harde skygger går samme vei (ned/høyre), 8 px / 5 px på mobil.
   ============================================================ */

/* ---------- Hero som plakat ---------- */
.res-hero {
  background: var(--ink); color: var(--cream);
  padding: 82px 0 60px; border-top: 0;
  position: relative; z-index: 2;
  --rutefarge: rgba(239, 230, 212, 0.07);
}
.res-tittel { margin: 0; }
/* «Din gründertype» er øyenbrynet, setningen under er plakaten */
.res-tittel__for {
  display: block; color: var(--sand); margin-bottom: 16px;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
}
/* samme skala som h1 på /innsiden/ — plass til «Alexandra, du er en …» */
.res-tittel__setning {
  display: block; color: var(--cream);
  font-size: clamp(38px, 5.8vw, 76px); line-height: 1.04;
  text-wrap: balance;
}
/* selve typen er svaret, og får den ene fargeaksenten i overskriften */
.res-tittel__type { color: var(--sand); }
.res-hero__tagline {
  font-family: var(--redaksjonell); font-style: italic; font-weight: 500;
  font-size: clamp(21px, 3vw, 31px); line-height: 1.26;
  color: var(--sand); max-width: 34ch; margin-top: 26px;
}
/* Figuren er hovedgrafikken: cream plate med rust hardskygge mot den mørke
   flaten. Den ligger HELT inne i heroen — ingen overheng over seksjonsgrensen. */
.figur--plakat .fig-plate { fill: var(--cream-hi); }
.figur--plakat .fig-skygge { fill: var(--rust); }
.res-hero__figur .figur { width: clamp(124px, 34vw, 152px); height: auto; }
.res-hero__figur { margin-bottom: 24px; }

@media (min-width: 900px) {
  /* Ekte to-spalters hero: teksten får hele venstre spalte, figuren står i
     høyre og er vertikalt sentrert mot den. Ingen absoluttplassering, så
     spalten aldri etterlater et tomrom mellom tekst og figur. */
  .res-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(210px, 25vw, 320px);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
  }
  /* figuren står først i kilden (den er sidens bilde), men skal stå til
     høyre for teksten — derfor eksplisitte spalter, ikke kilderekkefølge */
  .res-hero__tekst { padding-right: 0; grid-column: 1; grid-row: 1; }
  .res-hero__figur { margin: 0; justify-self: center; width: 100%; grid-column: 2; grid-row: 1; }
  .res-hero__figur .figur { width: 100%; height: auto; }
}
@media (max-width: 899px) { .res-hero { padding: 40px 0 38px; } }
.res-hero + .seksjon { border-top: 0; }

/* ---------- Resultatet: ÉN samlet seksjon ----------
   Seksjonshode → fire deler i kortrutenett → spørsmålet som sage-kort i
   full kolonnebredde → sekundærlinjen diskret til slutt.
   Kortgeometri, luft og skygger er hentet rett fra /innsiden/. */

/* seksjonshodet har samme mål og luft som .hode på /innsiden/ */
.res__innledning { max-width: 780px; }
.res__innledning h2 { margin-bottom: 18px; }
.res-etikett { display: block; margin-bottom: 12px; }

/* Fire LIKE deler i 2×2. Samme boks, samme padding, samme kant og skygge —
   forskjellen er bare tonen, som legges diagonalt som et sjakkmønster:
   1 og 4 i cream-lys, 2 og 3 i en dempet sage-tint. To rolige toner tett på
   hverandre, så seksjonen leses som ett hele i stedet for fire utrop.
   Rad-høyden er felles, så underkantene flukter. */
.res__rutenett { display: grid; gap: 24px; margin-top: 52px; }
@media (min-width: 900px) {
  .res__rutenett { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.res-del {
  background: var(--kort-lys); color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 3px;
  padding: 30px 28px; box-shadow: 6px 6px 0 var(--ink);
}
/* Stablet (mobil): annenhver kort tar den andre tonen — 2 og 4. */
.res-del:nth-child(even) { background: var(--kort-tint); }
/* I 2×2 blir det samme mønsteret en diagonal: 2 og 3 er den andre tonen,
   så tonene møtes på tvers i stedet for å ligge i kolonner. */
@media (min-width: 900px) {
  .res-del:nth-child(3) { background: var(--kort-tint); }
  .res-del:nth-child(4) { background: var(--kort-lys); }
}
.res-del > .kicker { display: block; margin-bottom: 7px; color: var(--rust-mork); }
.res-del h3 { margin-bottom: 11px; }
/* kortstørrelsen fra /innsiden/, men ink-tekst: dette ER innholdet,
   ikke en støttetekst — og da må alle fire delene ha samme vekt */
.res-del p { font-size: 15.5px; line-height: 1.55; }

/* Styrken beholder punktlisten sin — resten er avsnitt */
.punkter { list-style: none; display: grid; gap: 12px; }
.punkter li { position: relative; padding-left: 26px; font-size: 15.5px; line-height: 1.55; }
.punkter li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 9px; height: 9px; background: var(--rust);
}

/* Spørsmålet — sage kort i full kolonnebredde, sidens anker.
   Spørsmålstegnet står som en sticker i venstre felt, i samme formspråk
   som karakterene: hard skygge, tykk lys kant, rust tegn med ink-kontur. */
.res-sporsmal {
  margin-top: 28px;
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 30px; align-items: center;
}
.sportegn {
  width: clamp(58px, 7vw, 82px); height: auto; flex: none; overflow: visible;
  animation: sportegn-vipp 5.2s ease-in-out infinite;
  transform-box: view-box; transform-origin: 34px 79px;
}
.sportegn .sp-skygge { fill: none; stroke: var(--ink); stroke-width: 23; stroke-linecap: round; stroke-linejoin: round; }
.sportegn .sp-kant   { fill: none; stroke: #FFF8EE; stroke-width: 23; stroke-linecap: round; stroke-linejoin: round; }
.sportegn .sp-kontur { fill: none; stroke: var(--ink); stroke-width: 17; stroke-linecap: round; stroke-linejoin: round; }
.sportegn .sp-tegn   { fill: none; stroke: var(--rust); stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; }
@keyframes sportegn-vipp {
  0%, 100% { transform: rotate(-7deg); }
  50%      { transform: rotate(7deg); }
}
@media (max-width: 700px) {
  /* på smale skjermer skal sitatet ha hele bredden — tegnet legger seg over */
  .res-sporsmal { grid-template-columns: minmax(0, 1fr); gap: 16px; justify-items: start; }
  .sportegn { width: 50px; }
}
.res-sporsmal__tekst { min-width: 0; }
.res-sporsmal__hode {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.4;
  color: var(--ink); margin-bottom: 16px;
}
.res-sporsmal__sitat p {
  font-family: var(--redaksjonell); font-style: italic; font-weight: 500;
  font-size: clamp(24px, 3.2vw, 38px); line-height: 1.15;
  color: var(--ink); max-width: 34ch;
}

/* Sekundærtype — diskret linje nederst, vises kun med ?sekundar= */
/* streken går helt ut til kolonnekanten som resten av seksjonen,
   teksten holder lesebredden */
.sekundar {
  margin-top: 40px; padding-top: 22px;
  border-top: 1.5px solid var(--ink);
}
.sekundar .kicker { display: block; margin-bottom: 10px; }
.sekundar p { font-size: 15.5px; line-height: 1.55; max-width: 64ch; }
.sekundar p + p { margin-top: 10px; color: var(--olive); }

/* ---------- Innsiden: sluttpunktet ----------
   Tekstspalte til venstre, ventelisteskjemaet som lyst kort til høyre.
   Kortet får rust hardskygge — ink ville forsvunnet i flaten. */
.slutt { background: var(--ink); color: var(--cream); --rutefarge: rgba(239, 230, 212, 0.07); }
.slutt .kicker { display: block; color: var(--sand); margin-bottom: 18px; }
/* samme sand-lapp som på /innsiden/ og på opt-in-siden */
.slutt .lapp { margin-bottom: 20px; }
.slutt__overgang {
  font-family: var(--redaksjonell); font-style: italic; font-weight: 500;
  font-size: clamp(25px, 4vw, 40px); line-height: 1.2;
  color: var(--cream); max-width: 20ch;
}
.slutt p:not(.slutt__overgang) {
  color: rgba(239, 230, 212, 0.88); max-width: 54ch; margin-top: 20px;
}
.slutt__inner { display: grid; gap: 34px; }
@media (min-width: 900px) {
  .slutt__inner { grid-template-columns: 1.05fr 0.95fr; gap: 30px 56px; align-items: start; }
}
.venteliste { box-shadow: 8px 8px 0 var(--rust); }
.venteliste .kort__hode { margin-bottom: 18px; }
/* .slutt-reglene over farger all brødtekst cream — inne i det lyse kortet
   skal teksten være ink igjen, og notene beholde sin dempede olive. */
.slutt .venteliste p { color: var(--ink); max-width: none; margin-top: 0; }
.slutt .venteliste .skjemanote { color: var(--olive); }
.slutt .venteliste .skjemanote[data-state="error"] { color: var(--rust-mork); }
.slutt .venteliste .suksess span { color: var(--olive); }
.slutt .venteliste .knapp:focus-visible { outline-color: var(--ink); }
/* sekundærlenken skal lede videre, ikke konkurrere med knappen */
.slutt__videre {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
  font-size: 15.5px; font-weight: 600; color: var(--sand);
  text-decoration: underline; text-underline-offset: 3px;
}
.slutt__videre:hover { color: #FFF8EE; }
/* episoden er konteksten bak typene: en linje, ikke en egen seksjon */
.slutt__episode { margin-top: 22px; font-size: 15.5px; color: rgba(239, 230, 212, 0.8); }
/* nederst i seksjonen: midtstilt fotnote i kursiv, på ÉN linje */
.slutt__episode--bunn {
  margin: 92px auto 0; text-align: center; max-width: none;
  font-family: var(--redaksjonell); font-style: italic;
  font-size: 15px; color: rgba(239, 230, 212, 0.55);
  white-space: nowrap; overflow-wrap: normal;
}
.slutt__episode--bunn a { font-weight: 500; font-style: italic; }
@media (max-width: 720px) {
  .slutt__episode--bunn {
    margin-top: 56px; white-space: normal;
    font-size: 14px; max-width: 34ch;
  }
}
.slutt__episode a {
  color: var(--sand); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
.slutt__episode a:hover { color: #FFF8EE; }
@media (max-width: 640px) {
  .venteliste { box-shadow: 5px 5px 0 var(--rust); }
}

/* ---------- Venteliste på mobil: én knapp + popup ----------
   Kortet blir høyt og tungt når feltene stables, så under 720 px vises
   bare knappen, og skjemaet ligger i en dialog. */
.slutt__mobilknapp, .opt-hero__mobilknapp { display: none; }
.dialogboks { display: none; }

@media (max-width: 720px) {
  .slutt .kort.venteliste, .opt-hero__skjema { display: none; }
  .slutt__mobilknapp, .opt-hero__mobilknapp {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; margin-top: 26px; text-decoration: none;
  }
  /* opt-in: knappen er sidens handling og skal stå rett under ingressen */
  .opt-hero__mobilknapp { order: 4; margin-top: 22px; }
  /* dialogen finnes bare i mobilvisning; [open] styrer synligheten */
  .dialogboks[open] {
    display: block; margin: auto;
    width: min(460px, calc(100vw - 32px));
    background: var(--cream-hi); color: var(--ink);
    border: 1.5px solid var(--ink); border-radius: 3px;
    box-shadow: 8px 8px 0 var(--ink);
    padding: 30px 24px 26px;
  }
  .dialogboks::backdrop { background: rgba(46, 50, 48, 0.62); }
  /* plass til krysset, så det aldri legger seg oppå overskriften */
  .dialogboks h2 { font-size: 25px; margin-bottom: 8px; padding-right: 40px; }
  .dialogboks__ingress { font-size: 15.5px; color: var(--olive); margin-bottom: 20px; }
  .dialogboks__lukk {
    position: absolute; top: 8px; right: 10px;
    background: none; border: 0; cursor: pointer;
    font-size: 30px; line-height: 1; color: var(--olive);
    width: 44px; height: 44px;   /* trykkflate */
  }
  .dialogboks__lukk:hover { color: var(--ink); }
}

@media (max-width: 640px) {
  .res__rutenett { margin-top: 38px; }
  .res-del { padding: 24px 20px; box-shadow: 5px 5px 0 var(--ink); }
  .sekundar { margin-top: 32px; }
}

/* ---------- Bevegelse av ----------
   Stjerneregelen slår av alt, også karakterenes sveve, blunk og mikrogrep.
   De er listet eksplisitt under så det er synlig at de er dekket. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .karakter .kar-figur,
  .karakter .kar-oye,
  .karakter .kar-attributt,
  .sportegn { animation: none !important; transform: none !important; }
  .suksess__hake path { stroke-dashoffset: 0 !important; }
  /* uten rotasjon ville alle fire ligget usynlige oppå hverandre */
  .opt-hero__figurer .figur--liten { opacity: 1 !important; }
  .opt-hero__figurer .figur--liten:nth-child(n+2) { display: none; }
}

/* Figurrotasjonen på mobil: hver figur er synlig et kvart omløp, med et
   kort inn- og utglid i kantene. */
@keyframes figurrotasjon {
  0%    { opacity: 0; transform: translateY(7px) scale(.96); }
  4%    { opacity: 1; transform: none; }
  21%   { opacity: 1; transform: none; }
  25%   { opacity: 0; transform: translateY(-7px) scale(.96); }
  100%  { opacity: 0; transform: translateY(7px) scale(.96); }
}