/* ============================================================
   BILTEORI — teoriprøven klasse B
   Design system: Gist (Primary Studio) — Gen-Z maximalism,
   disciplined spine. Eight named colours, one superfamily.
   Mobile-first. Every state is a step, never a fade.
   ============================================================ */

:root{
  /* colour — Gist tokens, unchanged */
  --ink:#121212;
  --paper:#FFFFFF;
  --corn:#E7E9FF;
  --suds:#B8DFFF;
  --blue:#3448FB;
  --teal:#7CE1D3;
  --hi:#DFFF82;
  --pink:#F673FE;

  /* roles */
  --ground:var(--ink);
  --on-ground:var(--paper);
  --dim:rgba(255,255,255,.58);
  --hair:rgba(255,255,255,.16);

  /* type */
  --serif:"Instrument Serif",Georgia,serif;
  --sans:"Instrument Sans",-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,monospace;

  /* rhythm */
  --gut:18px;
  --r-lg:22px;
  --r-md:16px;
  --r-sm:12px;

  --ease:cubic-bezier(.16,1,.3,1);   /* exponential ease-out */
  --pop:cubic-bezier(.22,1,.36,1);   /* faster ease-out for tap feedback */
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ground);color:var(--on-ground);font-family:var(--sans);
  min-height:100dvh;overscroll-behavior-y:none;
  font-synthesis-weight:none;
}
/* The rotated bands and the ticker deliberately run past the page edge.
   `clip` contains that bleed without breaking the exam bar's position:sticky,
   which `overflow:hidden` would. */
html,body{overflow-x:clip;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit}
:focus-visible{outline:3px solid var(--hi);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------- shell ---------- */
.screen{display:none;min-height:100dvh;flex-direction:column}
.screen.on{display:flex}
.wrap{width:100%;max-width:560px;margin:0 auto;padding:0 var(--gut)}

/* ---------- wordmark ---------- */
.mark{font:700 .95rem/1 var(--sans);letter-spacing:.06em;display:inline-flex;align-items:center}
.mark s{text-decoration:none;display:inline-block;transform:rotate(-7deg);position:relative;color:var(--hi)}
.mark s::after{content:"";position:absolute;left:-14%;right:-14%;top:52%;height:2px;background:currentColor;
  mix-blend-mode:normal}
.mark.on-light s{color:var(--blue)}
/* På de lyse kortfargene forsvinner lime-kuttet — der bærer elektrisk blått
   kontrasten i stedet. Kun blått kort beholder lime. */
.f-teal .mark s,.f-hi .mark s,.f-corn .mark s,.f-suds .mark s{color:var(--blue)}

/* ---------- generic bits ---------- */
.pill{display:inline-flex;align-items:center;gap:7px;border:1.5px solid currentColor;border-radius:999px;
  padding:5px 11px;font:700 .64rem/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}
.meta-line{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font:700 .64rem/1 var(--mono);letter-spacing:.13em;text-transform:uppercase}
.meta-line .n{opacity:.62}

.band{background:var(--paper);color:var(--ink);transform:rotate(-2.4deg);
  padding:6px 30px;margin-left:-30px;margin-right:-30px;
  font:700 .64rem/1.5 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  display:flex;justify-content:space-between;gap:14px;white-space:nowrap;overflow:hidden}
.band b{color:var(--blue)}

.btn{display:block;width:100%;border-radius:var(--r-lg);padding:17px 20px;text-align:left;
  position:relative;transition:transform .1s var(--ease)}
.btn:active{transform:scale(.975)}
.btn-primary{background:var(--blue);color:var(--paper);box-shadow:0 12px 34px rgba(52,72,251,.42);
  padding-right:62px}
.btn-primary b{font:400 1.6rem/1 var(--serif);font-style:italic;display:block}
.btn-primary span{display:block;margin-top:7px;font:700 .68rem/1 var(--mono);letter-spacing:.09em;opacity:.88}
.btn-primary .arw{position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;background:var(--hi);border-radius:50%;
  display:flex;align-items:center;justify-content:center}
.btn-primary .arw svg{width:15px;height:15px;stroke:var(--ink);fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.btn-ghost{border:2px solid var(--hair);text-align:center;font:600 .95rem var(--sans);padding:14px 18px}
.btn-ghost:hover{border-color:var(--dim)}
.btn-hi{background:var(--hi);color:var(--ink);text-align:center;font:700 .98rem var(--sans);
  box-shadow:0 10px 28px rgba(223,255,130,.24)}

/* =========================================================
   FEED — full-bleed question cards (entry + practice)
   ========================================================= */
#s-feed{padding:0}
.feed{height:100dvh;overflow-y:scroll;scroll-snap-type:y mandatory;scrollbar-width:none;
  overscroll-behavior-y:contain;
  /* Bevegelsen låses til vertikal akse: ingen pinch-zoom, ingen sidelengs drag. */
  touch-action:pan-y;
  -webkit-user-select:none;user-select:none}
.feed::-webkit-scrollbar{display:none}

.qcard{min-height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;
  touch-action:pan-y;
  /* Den roterte .band-stripen skal blø ut over kanten, men ikke skape
     sidelengs scroll. clip (ikke hidden) lager ingen ny scroll-container
     og rører derfor ikke scroll-snap. */
  overflow-x:clip;
  display:flex;flex-direction:column;
  padding:calc(14px + env(safe-area-inset-top)) var(--gut) calc(20px + env(safe-area-inset-bottom));
  transition:background-color .1s steps(2),color .1s steps(2)}
.f-blue{background:var(--blue);color:var(--paper)}
.f-teal{background:var(--teal);color:var(--ink)}
.f-hi{background:var(--hi);color:var(--ink)}
.f-corn{background:var(--corn);color:var(--ink)}
.f-suds{background:var(--suds);color:var(--ink)}

.qcard .rail{display:flex;align-items:center;gap:14px}
.dots{display:flex;gap:5px;flex:1}
.dots i{height:4px;flex:1;border-radius:2px;background:currentColor;opacity:.22;transition:opacity .1s steps(2)}
.dots i.done{opacity:1}

/* The question sits in the free space between the rail and the thumb zone,
   optically a third down rather than pinned to the top. */
.q-stage{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end;
  padding:20px 0 26px;min-height:0}
.q-text{font:400 clamp(1.85rem,7.6vw,2.6rem)/1.14 var(--serif);font-style:italic;
  letter-spacing:-.005em;max-width:19ch;text-wrap:balance}
/* Scene og spørsmål. Én skrift, én skala — skillet ligger i tone og strek.
   Instrument Serif har bare vekt 400, så tyngden er optisk, ikke ekte bold. */
.q-text .scene{display:block;opacity:.68}
.q-text .ask{display:block;
  -webkit-text-stroke:.03em currentColor;paint-order:stroke fill}
.q-text .scene + .ask{margin-top:.35em}
/* Sluttkortet setter innerHTML direkte, uten scene/ask-spans — det skal
   likevel ha samme optiske tyngde som et spørsmål. */
#slutt-h{-webkit-text-stroke:.028em currentColor;paint-order:stroke fill}

.answers{display:flex;flex-direction:column;gap:9px}
.ans{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:rgba(255,255,255,.15);border:2px solid currentColor;border-radius:var(--r-md);
  padding:15px 16px;font:600 1rem/1.3 var(--sans);
  transition:transform .1s var(--pop),background-color .1s steps(2),opacity .1s steps(2)}
.f-teal .ans,.f-hi .ans,.f-corn .ans,.f-suds .ans{background:rgba(18,18,18,.06)}
.ans:active{transform:scale(.975)}
.ans .key{flex:0 0 26px;height:26px;border-radius:50%;border:2px solid currentColor;
  display:flex;align-items:center;justify-content:center;font:700 .72rem/1 var(--mono)}
.answers.locked .ans{cursor:default}
.ans.is-right{background:var(--ink);color:var(--hi);border-color:var(--ink)}
.ans.is-picked-wrong{background:var(--ink);color:var(--pink);border-color:var(--ink)}
/* Gjennomstreking kun på svarteksten — over bokstavmerket gjorde den C til e. */
.ans.is-muted{opacity:.42}
.ans.is-muted span:not(.key){text-decoration:line-through}
/* exam mode: chosen but unrevealed */
.ans.is-chosen{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.f-teal .ans.is-chosen,.f-hi .ans.is-chosen,.f-corn .ans.is-chosen,.f-suds .ans.is-chosen{color:var(--paper)}

/* verdict sheet */
.sheet{margin-top:11px;border-radius:var(--r-md);background:var(--ink);color:var(--paper);
  padding:15px 16px;display:none}
.sheet.on{display:block;animation:rise .24s var(--ease)}
@keyframes rise{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
.sheet .verdict{display:flex;align-items:center;gap:8px;font:700 .95rem var(--sans);margin-bottom:6px}
.sheet .verdict i{width:9px;height:9px;border-radius:50%;flex:0 0 9px}
.sheet p{font:400 .92rem/1.52 var(--sans);color:rgba(255,255,255,.87)}
.sheet .srcrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:11px}
.sheet .src{font:700 .6rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  background:var(--hi);color:var(--ink);border-radius:999px;padding:5px 11px}
.sheet .flag{font:400 .68rem var(--sans);color:rgba(255,255,255,.42);text-decoration:none;white-space:nowrap}
.sheet .flag:hover{color:var(--pink)}

/* Ekte knapp, ikke bare et hint: web view og desktop har ingen sveipegest,
   så uten denne finnes det ingen vei videre der. */
.swipe-hint{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:13px;
  width:100%;padding:13px 16px;border-radius:999px;
  border:2px solid currentColor;background:transparent;color:inherit;
  font:700 .68rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  opacity:0;pointer-events:none;
  transition:opacity .22s var(--ease),transform .12s var(--pop),background .16s}
.swipe-hint.on{opacity:1;pointer-events:auto}
.swipe-hint.on svg{animation:bob 1.6s ease-in-out infinite}
.swipe-hint:active{transform:scale(.97)}
.f-blue .swipe-hint:hover{background:rgba(255,255,255,.14)}
.f-teal .swipe-hint:hover,.f-hi .swipe-hint:hover,
.f-corn .swipe-hint:hover,.f-suds .swipe-hint:hover{background:rgba(18,18,18,.08)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.swipe-hint svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.5;
  stroke-linecap:round;stroke-linejoin:round}

/* =========================================================
   EXAM — the real thing: 45 / 90 min / free navigation
   ========================================================= */
#s-exam{background:var(--ink)}
.exam-bar{position:sticky;top:0;z-index:5;background:var(--ink);
  padding:calc(10px + env(safe-area-inset-top)) var(--gut) 10px;border-bottom:1px solid var(--hair)}
.exam-bar .row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  max-width:560px;margin:0 auto}
.clock{font:700 1rem/1 var(--mono);font-variant-numeric:tabular-nums;
  background:var(--paper);color:var(--ink);border-radius:8px;padding:7px 11px}
.clock.warn{background:var(--pink)}
.clock.crit{background:var(--pink);animation:pulse .9s steps(2) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
/* ---------- variant B: det stiplede sporet ----------
   Linjen ER de 45 oppgavene. Én strek per spørsmål, hver med sin egen
   tilstand, så oversikten alltid er synlig og ingen knapp trengs. */
.track45-wrap{display:block;width:100%;max-width:560px;margin:9px auto 0;padding:2px 0 0;
  text-align:left}
.track45{display:flex;gap:2px;align-items:flex-end;height:14px}
.track45 i{flex:1;min-width:1px;height:6px;border-radius:1px;background:rgba(255,255,255,.2);
  transition:height .22s var(--ease),background .22s var(--ease)}
.track45 i.answered{background:var(--hi);height:9px}
.track45 i.flagged{background:var(--suds);height:11px}
.track45 i.current{background:var(--paper);height:14px}
.track45-legend{display:flex;justify-content:space-between;gap:10px;margin-top:7px;
  font:700 .58rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}


.exam-body{flex:1;padding:22px 0 30px}
.exam-q{font:400 clamp(1.5rem,5.8vw,2rem)/1.2 var(--serif);font-style:italic;margin:14px 0 20px;
  text-wrap:balance}
.exam-q .scene{display:block;opacity:.68}
.exam-q .ask{display:block;
  -webkit-text-stroke:.028em currentColor;paint-order:stroke fill}
.exam-q .scene + .ask{margin-top:.3em}
.exam-answers{display:flex;flex-direction:column;gap:9px}
.exam-answers .ans{background:rgba(255,255,255,.07);border-color:var(--hair);color:var(--paper)}
.exam-answers .ans.is-chosen{background:var(--paper);color:var(--ink);border-color:var(--paper)}

.exam-nav{position:sticky;bottom:0;background:var(--ink);border-top:1px solid var(--hair);
  padding:12px var(--gut) calc(12px + env(safe-area-inset-bottom))}
.exam-nav .row{display:flex;gap:9px;max-width:560px;margin:0 auto}
.nav-btn{flex:0 0 auto;width:52px;height:48px;border:2px solid var(--hair);border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;transition:border-color .1s}
.nav-btn:disabled{opacity:.3;cursor:default}
.nav-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.nav-next{flex:1;background:var(--paper);color:var(--ink);border-radius:var(--r-sm);
  font:700 .95rem var(--sans);height:48px;display:flex;align-items:center;justify-content:center;gap:8px}
.nav-next.finish{background:var(--hi)}
.flagbtn{flex:0 0 auto;width:52px;height:48px;border:2px solid var(--hair);border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center}
.flagbtn.on{background:var(--suds);border-color:var(--suds);color:var(--ink)}
.flagbtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}


/* =========================================================
   HOME / KLAR-O-METER  (returning user)
   ========================================================= */
#s-home{background:var(--ink);padding-bottom:40px}
.home-top{display:flex;align-items:center;justify-content:space-between;
  padding:calc(14px + env(safe-area-inset-top)) 0 4px}
.streak{display:inline-flex;align-items:center;gap:6px;background:var(--hi);color:var(--ink);
  border-radius:999px;padding:6px 12px;font:700 .76rem/1 var(--sans);transform:rotate(2deg)}
.streak svg{width:13px;height:13px;fill:none;stroke:var(--ink);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}

.gauge-q{font:400 clamp(1.6rem,7vw,2.3rem)/1.08 var(--serif);font-style:italic;margin-top:22px}
.gauge-q em{color:var(--suds);font-style:italic}
/* The number is the one datum that must stay legible; the rotated band is
   connective tissue underneath it, never a slice across the digits. */
.gauge{margin:6px 0 0}
.gauge .num{font:400 clamp(7rem,38vw,11rem)/.86 var(--serif);font-style:italic;color:var(--hi);
  letter-spacing:-.045em;display:flex;align-items:baseline;gap:.04em}
.gauge .num small{font-size:.28em;color:var(--paper);font-style:italic}
.gauge .band{margin-top:6px}

.verdict-sticker{display:inline-block;background:var(--pink);color:var(--ink);border-radius:999px;
  padding:9px 16px;font:700 .84rem/1.3 var(--sans);transform:rotate(-1.5deg);margin-top:22px;
  box-shadow:0 8px 22px rgba(246,115,254,.26)}
.verdict-sticker.ready{background:var(--teal);box-shadow:0 8px 22px rgba(124,225,211,.26)}

.weak{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.weak .lbl{width:100%;font:700 .64rem/1 var(--mono);letter-spacing:.14em;color:var(--suds);
  text-transform:uppercase;margin-bottom:3px}
.weakpill{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--paper);border-radius:999px;
  padding:9px 14px;font:600 .82rem/1 var(--sans);transition:transform .12s var(--pop)}
.weakpill:active{transform:scale(.94)}
.weakpill .pct{font:700 .7rem/1 var(--mono);color:var(--pink)}
.weakpill:nth-of-type(2){transform:rotate(-1.4deg)}
.weakpill:nth-of-type(3){transform:rotate(1.6deg)}
.weakpill:nth-of-type(4){transform:rotate(-.8deg)}

.ticker{margin:26px -30px 0;background:var(--hi);color:var(--ink);transform:rotate(-1.6deg);
  padding:9px 0;overflow:hidden;white-space:nowrap;position:relative}
.ticker .rail{display:inline-block;animation:tick 26s linear infinite;
  font:700 .76rem/1 var(--mono);letter-spacing:.12em}
.ticker span{margin:0 16px}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.sec-h{font:400 1.6rem/1.1 var(--serif);font-style:italic;margin:30px 0 14px}
.sec-h em{color:var(--teal);font-style:italic}

/* Vertikal liste, ikke rutenett: full bredde gir større trykkflate,
   plass til hele temanavnet og én kolonne å skanne på mobil. */
.tgrid{display:flex;flex-direction:column;gap:9px}
.topic{border-radius:16px;padding:14px 16px 15px;position:relative;
  display:flex;flex-direction:column;gap:11px;text-align:left;width:100%;
  transition:transform .12s var(--pop)}
.topic:active{transform:scale(.985)}
.topic .top{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.topic b{font:700 1.02rem/1.15 var(--sans)}
.topic .m{display:block;font:700 .62rem/1 var(--mono);letter-spacing:.09em;
  text-transform:uppercase;opacity:.72;margin-top:5px}
.topic .pct{flex:0 0 auto;font:700 1rem/1 var(--mono);letter-spacing:.02em;
  font-variant-numeric:tabular-nums}
.topic .fill{height:5px;border-radius:3px;background:rgba(18,18,18,.16)}
.topic .fill i{display:block;height:100%;width:100%;border-radius:3px;background:var(--ink);
  transform-origin:left center;transform:scaleX(0);transition:transform .55s var(--ease)}
.t-corn{background:var(--corn);color:var(--ink)}
.t-suds{background:var(--suds);color:var(--ink)}
.t-teal{background:var(--teal);color:var(--ink)}
.t-hi{background:var(--hi);color:var(--ink)}
.t-pink{background:var(--pink);color:var(--ink)}
.t-blue{background:var(--blue);color:var(--paper)}
.t-blue .fill{background:rgba(255,255,255,.24)}
.t-blue .fill i{background:var(--paper)}
/* Låsen sitter nå i radens høyrekolonne, der prosenten ellers står. */
.topic .lock{flex:0 0 auto;width:18px;height:18px;opacity:.62;align-self:center;
  fill:none;stroke:currentColor;stroke-width:2}

/* =========================================================
   RESULT
   ========================================================= */
#s-result{background:var(--ink);padding-bottom:44px}
.res-hero{padding:calc(30px + env(safe-area-inset-top)) 0 0;text-align:left}
.res-score{font:400 clamp(7rem,38vw,12rem)/.82 var(--serif);font-style:italic;letter-spacing:-.045em;
  display:flex;align-items:baseline;gap:.12em}
.res-score small{font-size:.17em;font-style:normal;color:var(--dim);letter-spacing:.02em;
  font-family:var(--mono);font-weight:700}
.res-pass .res-score{color:var(--teal)}
.res-fail .res-score{color:var(--pink)}
.res-dom{font:400 clamp(1.9rem,8vw,2.6rem)/1 var(--serif);font-style:italic;margin-top:2px}
.res-note{color:var(--dim);font:400 .92rem/1.55 var(--sans);margin-top:14px}
.tstat{margin-top:26px}
.tstat .row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--hair)}
.tstat .row .nm{flex:1;font:600 .9rem var(--sans)}
.tstat .row .bar{flex:0 0 62px;height:5px;border-radius:3px;background:var(--hair);overflow:hidden}
.tstat .row .bar i{display:block;height:100%;border-radius:3px}
.tstat .row .v{flex:0 0 44px;text-align:right;font:700 .8rem/1 var(--mono)}

.review{margin-top:34px}
.rev-card{background:rgba(255,255,255,.05);border:1px solid var(--hair);border-radius:var(--r-md);
  padding:16px;margin-bottom:11px}
.rev-card .q{font:400 1.15rem/1.3 var(--serif);font-style:italic;margin-bottom:12px}
.rev-card .opt{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;border-radius:10px;
  font:500 .88rem/1.35 var(--sans);margin-bottom:6px;border:1.5px solid transparent}
.rev-card .opt.right{background:rgba(124,225,211,.14);border-color:var(--teal);color:var(--teal)}
.rev-card .opt.wrong{background:rgba(246,115,254,.12);border-color:var(--pink);color:var(--pink)}
.rev-card .opt.plain{color:var(--dim)}
.rev-card .exp{font:400 .88rem/1.5 var(--sans);color:rgba(255,255,255,.8);margin-top:10px}
.rev-card .src{display:inline-block;margin-top:10px;font:700 .58rem/1.4 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;background:var(--hi);color:var(--ink);border-radius:999px;padding:4px 10px}

/* =========================================================
   PAYWALL
   ========================================================= */
#s-pay{background:var(--ink);padding-bottom:44px}
.pay-hero{padding:calc(34px + env(safe-area-inset-top)) 0 0}
.pay-h{font:400 clamp(2rem,8.6vw,2.9rem)/1.06 var(--serif);font-style:italic;text-wrap:balance}
.pay-h em{color:var(--hi);font-style:italic}
.pricecard{background:var(--paper);color:var(--ink);border-radius:24px;padding:24px;margin-top:24px;
  position:relative;overflow:hidden}
.pricecard .tagsticker{position:absolute;top:16px;right:-34px;background:var(--pink);color:var(--ink);
  font:700 .62rem/1 var(--mono);letter-spacing:.12em;padding:7px 40px;transform:rotate(34deg);
  text-transform:uppercase}
.price{font:400 3.4rem/1 var(--serif);font-style:italic;letter-spacing:-.03em;display:flex;align-items:baseline;gap:8px}
.price span{font:700 .8rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.price-sub{font:600 .85rem/1.4 var(--sans);color:#555;margin-top:8px}
.paylist{list-style:none;margin:20px 0 22px;display:flex;flex-direction:column;gap:11px}
.paylist li{display:flex;gap:10px;align-items:flex-start;font:500 .95rem/1.35 var(--sans)}
.paylist svg{flex:0 0 18px;width:18px;height:18px;margin-top:1px;fill:none;stroke:var(--blue);
  stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.compare{margin-top:26px;border-top:1px solid var(--hair);padding-top:20px}
.compare .row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;
  font:500 .88rem/1.35 var(--sans);color:var(--dim);border-bottom:1px solid var(--hair)}
.compare .row b{color:var(--paper);font:700 .82rem/1 var(--mono);white-space:nowrap}
.compare .row.us{color:var(--paper)}
.compare .row.us b{color:var(--hi)}

/* =========================================================
   footer / honesty
   ========================================================= */
.honest{margin-top:32px;border-top:2px solid var(--hair);padding:16px 0 6px;
  color:var(--dim);font:400 .74rem/1.6 var(--sans)}
.honest b{color:var(--suds);font-weight:600}
.foot{padding:8px 0 34px;color:rgba(255,255,255,.34);font:400 .7rem/1.6 var(--sans);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.foot a{text-decoration:none}
.foot a:hover{color:var(--suds)}

/* =========================================================
   toast + loading
   ========================================================= */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);
  background:var(--paper);color:var(--ink);border-radius:999px;padding:11px 20px;
  font:700 .84rem/1 var(--sans);opacity:0;pointer-events:none;transition:.24s var(--ease);z-index:50;
  box-shadow:0 10px 30px rgba(0,0,0,.4);max-width:calc(100vw - 32px);text-align:center}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

.boot{position:fixed;inset:0;background:var(--ink);display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:16px;z-index:100;transition:opacity .3s}
.boot.gone{opacity:0;pointer-events:none}
.boot .mark{font-size:1.6rem}
.boot .bar{width:120px;height:3px;background:var(--hair);border-radius:2px;overflow:hidden}
.boot .bar i{display:block;height:100%;width:40%;background:var(--hi);border-radius:2px;
  animation:slide 1s ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}}
.boot .err{color:var(--pink);font:600 .9rem/1.5 var(--sans);text-align:center;max-width:280px;padding:0 20px}

/* Larger screens keep the phone feel rather than stretching: the colour field
   fills the viewport, the content column stays phone-width. The question anchors
   above the thumb zone on a phone; on a desktop there is no thumb, so it centres. */
@media(min-width:620px){
  .qcard{padding-left:0;padding-right:0}
  .qcard > *{width:100%;max-width:560px;margin-left:auto;margin-right:auto}
  .q-stage{justify-content:center}
  .band{margin-left:-40px;margin-right:-40px}
}

/* ---------- checkout, kvittering og dev (MVP-flyt) ---------- */
.simbanner{border:1.5px solid var(--hi);border-radius:14px;padding:13px 15px;margin:16px 0 4px;
  font:400 .8rem/1.5 var(--sans);color:var(--paper);background:rgba(223,255,130,.07);text-align:left}
.simbanner b{color:var(--hi);font-weight:700}
.simbanner.ok{border-color:var(--teal);background:rgba(124,225,211,.08)}
.simbanner.ok b{color:var(--teal)}
.simbanner.dev{border-color:var(--pink);background:rgba(246,115,254,.08)}
.simbanner.dev b{color:var(--pink)}

.ordre{text-align:left;margin-bottom:18px}
.ordre .row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.13);font:400 .9rem var(--sans)}
.ordre .row b{font-weight:700;white-space:nowrap}
.ordre .row.n{color:var(--tx2);font-size:.8rem}
.ordre .row.sum{border-bottom:0;padding-top:13px;font-weight:700;font-size:1.02rem}

.paymethods{display:flex;gap:9px;margin-bottom:16px}
/* Ligger på hvit .pricecard — derfor mørk blekk, ikke papirfarge. */
.paym{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  background:transparent;color:var(--ink);border:1.5px solid rgba(18,18,18,.26);border-radius:13px;
  padding:13px 10px;font:700 .86rem var(--sans);transition:.14s}
.paym:hover{border-color:rgba(18,18,18,.5)}
.paym .dot{width:11px;height:11px;border-radius:50%;border:2px solid rgba(18,18,18,.4)}
.paym.on{border-color:var(--blue);color:var(--blue);background:rgba(52,72,251,.06)}
.paym.on .dot{border-color:var(--blue);background:var(--blue)}
.paym:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.donemark{width:64px;height:64px;border-radius:50%;background:var(--teal);display:flex;
  align-items:center;justify-content:center;margin:0 auto 20px}
.donemark svg{width:32px;height:32px;fill:none;stroke:var(--ink);stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}

.devlabel{display:block;text-align:left;font:700 .64rem/1 var(--mono);letter-spacing:.13em;
  text-transform:uppercase;color:#555;margin-bottom:8px}
.devinput{width:100%;background:rgba(18,18,18,.04);border:1.5px solid rgba(18,18,18,.26);
  border-radius:13px;padding:14px 15px;color:var(--ink);font:400 1rem var(--mono);margin-bottom:14px}
.devinput:focus{outline:0;border-color:var(--blue);background:#fff}
.devinput::placeholder{color:rgba(18,18,18,.4)}

.err{color:var(--pink);font:600 .84rem/1.5 var(--sans);margin-top:12px;text-align:left}
.pricecard .err{color:#c2185b}
.btn[disabled]{opacity:.55;pointer-events:none}
.btn .spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.35);
  border-top-color:var(--paper);border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}


/* ---------- gestelås: vertikal bevegelse, ingen zoom ----------
   iOS Safari ignorerer user-scalable=no, så aksen låses her i stedet.
   Svartekst og forklaring er fortsatt markerbar — låsen gjelder flatene
   man sveiper på, ikke innholdet man vil kopiere. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{touch-action:pan-y}
.screen{touch-action:pan-y}
/* Knapper og lenker: fjerner dobbelttrykk-zoom og 300 ms-forsinkelsen. */
button,.btn,.ans,.paym,a,.temakort,.topic{touch-action:manipulation}
/* Tekst man faktisk vil kunne merke og kopiere. */
.sheet,.forklaring,.qtekst,.kilde{-webkit-user-select:text;user-select:text}

/* ---------- pakkevalg i paywallen ---------- */
.pakke{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  background:rgba(255,255,255,.06);border:2px solid var(--hair);border-radius:16px;
  padding:15px 17px;margin-bottom:9px;cursor:pointer;text-align:left;
  transition:border-color .14s,background .14s}
.pakke.valgt{border-color:var(--hi);background:rgba(223,255,130,.09)}
.pk-navn{font:700 1.02rem/1.2 var(--sans)}
.pk-navn small{display:block;margin-top:4px;font:700 .58rem/1.3 var(--mono);
  letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.pk-pris{font:400 1.6rem/1 var(--serif);font-style:italic;white-space:nowrap;
  -webkit-text-stroke:.02em currentColor;paint-order:stroke fill}
.pakke.valgt .pk-pris{color:var(--hi)}

/* ---------- gavekode, innlogging og konto ---------- */
.micro{margin-top:12px;color:var(--dim);font:400 .78rem/1.55 var(--sans)}
.micro a{color:var(--suds);text-decoration:none;border-bottom:1.5px solid rgba(184,223,255,.4)}
.micro a:hover{color:var(--hi);border-color:currentColor}
.devinput.sans{font-family:var(--sans)}
.steg-info{text-align:left;font:400 .88rem/1.5 var(--sans);color:#3a3a46;margin-bottom:14px}
.pricecard .simbanner{color:var(--ink);background:rgba(246,115,254,.1)}
.pricecard .simbanner b{color:#9c27b0}
.lenke{display:block;margin-top:14px;font:600 .82rem var(--sans);color:var(--blue);text-align:left;
  text-decoration:underline;text-underline-offset:3px}
.konto-liste{margin-top:18px;display:flex;flex-direction:column;gap:9px}
.konto-rad{display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:rgba(255,255,255,.06);border:2px solid var(--hair);border-radius:16px;padding:15px 17px}
.konto-rad b{font:700 1.02rem/1.2 var(--sans)}
.konto-rad small{display:block;margin-top:4px;font:700 .58rem/1.3 var(--mono);letter-spacing:.09em;
  text-transform:uppercase;color:var(--dim)}
.konto-rad .til{font:700 .72rem/1.3 var(--mono);color:var(--hi);text-align:right}
.konto-rad.ute{opacity:.5}
.konto-rad.ute .til{color:var(--pink)}