/* ===========================================================================
   RECEPTA /r2/ — étsides rejsningsforløb i Apple-stil        (15/9-26, runde 91)
   ===========================================================================
   Adams beslutninger 15/9-26:
   · Alt på én side, ét trin ad gangen. Kommende trin står dæmpet (opacity .32,
     kan ikke trykkes), som på Apples købsside. Besvarede quiztrin folder sammen
     til én linje med "Ret". Forløbstrinnet bliver stående åbent.
   · Neutral flade (hvid + lys kølig grå), Recepta-blå KUN til valg, knapper og
     pris. Ingen skygger, 1 px kanter, 12 px hjørner på kort, 18 px på ark.
   · Skrift tættere på SF Pro: systemskriften først (SF på iPhone/Mac), Inter
     som selvhostet fald-tilbage på Windows/Android.
   · Desktop: klæbende venstrepanel, der skifter med trinnet, og klæbende
     topbjælke med behandling + pris. Telefon: bundbjælke med pris + Fortsæt.
   Tilstandsklasser uden bindestreg (active, locked, done, vis, valgt, aktiv)
   røres ikke af kopiværnet; designklasser med bindestreg omdøbes ens i HTML,
   CSS og JS, så JS'en refererer dem KUN som hele, citerede strenge.
   =========================================================================== */
:root {
  --ink: #1A1D2E;
  --ink-2: #5A6079;
  --ink-3: #8A90A6;
  --bg: #FFFFFF;
  --bg-2: #F5F7FB;
  --bg-3: #EDF4FD;
  --line: #E1E5EF;
  --line-2: #9EA6BD;   /* runde 8 (Adams besked): kanter på knapper og felter mørkere, den lyse grå var for svag */
  --accent: #5C6CDD;
  --accent-dark: #3C45B2;
  --accent-ink: #4E5BC6;
  --accent-light: #E4EEFC;
  --ok: #2E9E6B;
  --err: #B3261E;
  --r-card: 12px;
  --r-sheet: 18px;
  --r-btn: 12px;
  --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; overscroll-behavior-x: none; }
body {
  font-family: var(--font); font-size: 17px; line-height: 1.47; color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a { color: var(--accent-ink); }
button { font: inherit; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
a, button, label, summary, input, select { touch-action: manipulation; }
.lock-ic { display: inline-block; width: 12px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Crect x='1' y='6' width='10' height='7' rx='1.5'/%3E%3Cpath d='M3.5 6V4.5a2.5 2.5 0 015 0V6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Crect x='1' y='6' width='10' height='7' rx='1.5'/%3E%3Cpath d='M3.5 6V4.5a2.5 2.5 0 015 0V6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ---------- Annoncebjælke (kun man-fre 8-16) ---------- */
/* runde 15 (Adams besked): Recepta-blå som topkanten, hvid tekst, grøn prik med hvid ring der pulserer */
.ann-bar { background: var(--accent); color: #fff; text-align: center; padding: 8px 16px; font-size: 13.5px; }
.ann-bar a { color: #fff; text-decoration: none; font-weight: 500; display: inline-flex; align-items: center; gap: 9px; }
.ann-dot { width: 9px; height: 9px; border-radius: 50%; background: #2ECC71; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(255, 255, 255, .28); animation: ann-pulse 2.2s ease-in-out infinite; }
@keyframes ann-pulse { 0%, 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(255, 255, 255, .28); } 50% { box-shadow: 0 0 0 2px #fff, 0 0 0 8px rgba(255, 255, 255, 0); } }

/* ---------- Header ---------- */
.site-head { display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 6px 20px 0; max-width: 1280px; margin: 0 auto; }   /* runde 44 (Adams besked): logo og Log ind 3 px lavere i bjælken */
.site-logo { display: flex; align-items: center; }   /* runde 8: logoet uden tagline, lodret centreret i headeren */
.site-logo img { width: 112px; height: auto; display: block; transform: translateY(.5px); }   /* runde 32 (Adams besked): p'ets underlængde trækker boksen ned; bogstavkroppene står nu midt i bjælken */
.pill-ghost { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; background: #fff; }
.pill-ghost:hover { border-color: var(--ink-3); }

/* ---------- Klæbende topbjælke (desktop) ---------- */
.top-bar { display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line); transform: translateY(-100%); transition: transform .5s ease-in-out; }
.top-bar.vis { transform: none; }
.top-bar-in { max-width: 1280px; margin: 0 auto; padding: 0 40px; height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.top-bar-title { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.top-bar-price { font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap; }

/* ---------- Layout ---------- */
.flow-grid { padding: 0 20px; max-width: 640px; margin: 0 auto; }
.side-panel { display: none; }

/* ---------- Quiz-zonen (15/9-26, Adams besked) ----------
   Telefon: fotoet i fuld bredde, hvis nederste tredjedel toner over i Recepta-blåt via en
   maske, så overgangen er sømløs, og blokken bag er en blå gradient, lidt lysere øverst end
   nederst. Zonen rummer titel, perks og de tre quiztrin og slutter med afrundede hjørner, så
   det blå kendes som quizzen. Desktop: samme blå som afrundet panel; fotoet står i sidepanelet. */
.quiz-zone { margin: 0 -20px; padding: 0 20px 30px; border-radius: 0 0 16px 16px;   /* runde 31 (Adams besked): mindre hjørner, så de matcher kortene */ background: linear-gradient(180deg, #6D7CE9 0%, #5C6CDD 38%, #4753C6 100%); color: #fff; }
/* 15/9-26 (runde 5, Adams besked): ubeskåret foto igen; titlen står på væggen øverst, chippen lige
   under, og perks nederst i det blå. Titlen er blæk på den lyse væg, halen i Recepta-blåt. */
.hero-foto { position: relative; margin: 0 -20px; aspect-ratio: 5 / 6; overflow: hidden; }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; -webkit-mask-image: linear-gradient(to bottom, #000 34%, rgba(0, 0, 0, 0) 84%); mask-image: linear-gradient(to bottom, #000 34%, rgba(0, 0, 0, 0) 84%); }
/* Blød lys slør øverst i fotoet, så titlen også kan læses hen over håret */
.hero-foto::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%; z-index: 1; background: linear-gradient(to bottom, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .6) 45%, rgba(255, 255, 255, 0) 100%); pointer-events: none; }
.hero-top { position: absolute; top: 14px; left: 20px; right: 20px; z-index: 2; }
h1 { font-size: clamp(26px, 7.4vw, 31px); line-height: 1.08; letter-spacing: -.02em; font-weight: 600; margin: 0 0 9px; color: var(--ink); text-wrap: balance; }
h1 em { font-style: normal; color: var(--accent); }
.hero-chip { display: inline-block; font-size: 13px; font-weight: 600; color: var(--accent-dark); background: #fff; border-radius: 999px; padding: 6px 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, .16); }
.hero-text { position: relative; margin-top: -122px; }
.sec-h em { font-style: normal; color: var(--accent); }
/* runde 6 (Adams besked): tre perks på én linje hver; skriften skalerer ned på smalle telefoner */
.trust-list { list-style: none; margin: 0 0 30px; display: grid; gap: 9px; }
.trust-list li { position: relative; padding-left: 26px; font-size: clamp(11px, 3.55vw, 14px);   /* runde 43: de længere perks holder én linje ned til 320 px */ color: #fff; line-height: 1.4; white-space: nowrap; }
.trust-list li::before, .check-list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 17px; height: 17px; border-radius: 50%; background: var(--accent-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233C45B2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat; }
/* runde 5: kraftigere hvide flueben, hvid cirkel med blåt hak */
.trust-list li::before { background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233C45B2' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); }
/* Quiztrinene på det blå: hvid tekst, gennemsigtige kort, hvidt kort når valgt */
.quiz-zone .step { margin-bottom: 64px; }
.quiz-zone .step:last-child { margin-bottom: 0; }
.quiz-zone .step.folded { margin-bottom: 8px; }
.quiz-zone .step-h, .quiz-zone .step.locked .step-h { color: #fff; }
/* runde 10 (Adams besked): første spørgsmål i titlens størrelse, og "?" popper op efter 2 s */
.step-h-stor { font-size: clamp(26px, 7.4vw, 31px); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.qm-ord { white-space: nowrap; }
.qm { display: inline-block; opacity: 0; transform: scale(.3) rotate(-14deg); transform-origin: 60% 75%; }
.qm.vis { opacity: 1; transform: none; animation: qm-pop .7s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes qm-pop { 0% { opacity: 0; transform: scale(.3) rotate(-14deg); } 60% { opacity: 1; transform: scale(1.3) rotate(8deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
.quiz-zone .step-h span:not(.qm-ord):not(.qm):not(.step-nr) { color: rgba(255, 255, 255, .78); }
/* 28/9-26 (Adams besked: svarknapperne i en lysere farve, så de står i kontrast til det blå): svarene var
   gennemsigtige (12 % hvid) og gik i ét med det blå. Nu er de massivt hvide med mørkeblå tekst (#3C45B2 på
   hvid = 7,8:1) og en blød skygge, samme look som /r's hvide svar på telefon (27/9). Valgt svar = lyseblå
   flade + mørkeblå kant, så det stadig skiller sig ud fra de hvide naboer. */
.quiz-zone .opt { background: #fff; border-color: #fff; color: var(--accent-dark); box-shadow: 0 2px 8px rgba(26, 29, 46, .16); }
.quiz-zone .opt small { color: var(--ink-2); }
.quiz-zone .opt:hover { border-color: #fff; }
/* runde 7 (Adams besked): "Nej, ingen af disse" står lidt kraftigere, så det er let at se og ramme */
.quiz-zone .opt[data-val="ingen"] { font-weight: 600; }
.quiz-zone .opt[aria-checked="true"] { background: var(--accent-light); color: var(--ink); border-color: var(--accent-dark); }
.quiz-zone .opt[aria-checked="true"] small { color: var(--ink-2); }
.quiz-zone .opt:focus-visible, .quiz-zone .btn-ghost:focus-visible { outline-color: #fff; }
.quiz-zone .step-sum { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: #fff; }
.quiz-zone .step-sum-q { color: rgba(255, 255, 255, .75); }
.quiz-zone .step-edit { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.quiz-zone .afvist { background: rgba(255, 255, 255, .12); }
.quiz-zone .afvist p { color: rgba(255, 255, 255, .86); }
.quiz-zone .btn-ghost { background: #fff; color: var(--ink); border-color: #fff; }

/* ---------- Knapper ---------- */
.btn-primary { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 50px; padding: 10px 22px; border: 0; border-radius: var(--r-btn); background: var(--accent); color: #fff; font-size: 17px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background .15s, transform .1s ease-out; -webkit-appearance: none; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-primary:active { transform: scale(.985); }
.btn-primary:disabled { opacity: .5; cursor: default; transform: none; }
.btn-primary small { display: block; font-size: 12.5px; font-weight: 500; opacity: .85; margin-top: 2px; }
.btn-primary:focus-visible, .btn-ghost:focus-visible, .opt:focus-visible, .tid-knap:focus-visible, .dag-fane:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn-ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 8px 20px; border: 1px solid var(--line-2); border-radius: var(--r-btn); background: #fff; color: var(--ink); font-size: 16px; font-weight: 600; cursor: pointer; transition: border-color .15s, transform .1s ease-out; }
.btn-ghost:hover { border-color: var(--ink-3); }
.btn-ghost:active { transform: scale(.985); }
.link-more { display: inline-flex; align-items: center; gap: 3px; background: none; border: 0; padding: 0; color: var(--accent-ink); font-size: 15px; font-weight: 500; cursor: pointer; text-decoration: none; }
.link-more::after { content: "\203A"; font-size: 18px; line-height: 1; position: relative; top: -1px; }
.link-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-inline { background: none; border: 0; padding: 0; color: var(--accent-ink); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* ---------- Trin ---------- */
.steps { list-style: none; }
.step { margin: 0 0 44px; }
.step-gate { padding-top: 40px; }
/* runde 42 (Adams besked): hjælpekortene over betalingen, mellem det blå og "Færdiggør din bestilling" */
.pay-info { display: grid; gap: 14px; padding-top: 28px; }
.pay-info .help-box { margin-top: 0; }
/* 15/9-26 (runde 16, Adams besked): venteboks under det blå, mens quizzen besvares. Mindstehøjden
   giver plads til, at spørgsmål 2 og 3 kan rulles op, når alt herunder er skjult. */
.quiz-vent { min-height: 46vh; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 44px 20px 20px; text-align: center; }
.quiz-vent p { font-size: 15px; color: var(--ink-2); max-width: 300px; line-height: 1.4; text-wrap: balance; }
.vent-ring { width: 24px; height: 24px; border-radius: 50%; border: 2.5px solid var(--line); border-top-color: var(--accent); animation: vent-spin .9s linear infinite; }
@keyframes vent-spin { to { transform: rotate(360deg); } }
.step-h { font-size: 21px; line-height: 1.19; letter-spacing: -.01em; font-weight: 600; margin: 0 0 14px; outline: none; }
.step-h span:not(.qm-ord):not(.qm):not(.step-nr) { display: block; color: var(--ink-2); font-weight: 400; font-size: 15px; line-height: 1.4; letter-spacing: 0; margin-top: 6px; }
.step-body { border: 0; min-width: 0; transition: opacity .25s; }
.step.locked .step-body { opacity: .32; pointer-events: none; }
.step.locked .step-h { opacity: .32; }   /* runde 11 (Adams besked): titlen dæmpes som svarene, til trinnet nås */
/* runde 11: "1/3" til højre for hvert quizspørgsmål */
.step-nr { float: right; margin: .3em 0 0 14px; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: rgba(255, 255, 255, .75); }
/* 15/9-26 (Adams besked): besvarede trin står tæt, som én linje hver, stadig med "Ret".
   Runde 6: men det næste, åbne trin får luft efter den sidste foldede række. */
.step.folded { margin-bottom: 8px; }
.step.folded + .step:not(.folded) { margin-top: 30px; }
.step-sum { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); font-size: 14px; line-height: 1.3; }
.step-sum-q { color: var(--ink-2); font-weight: 500; flex: 0 0 auto; }
.step-sum-a { font-weight: 600; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step-edit { margin-left: auto; flex: 0 0 auto; background: none; border: 0; color: var(--accent-ink); font-weight: 600; font-size: 14px; cursor: pointer; padding: 2px 4px; }
.step-edit:hover { text-decoration: underline; text-underline-offset: 3px; }
/* runde 9 (Adams besked): grønt flueben til højre i den foldede resultat-række */
.step-sum-inline { margin: 14px 0 0; }
.sum-ok + .step-edit { margin-left: 0; }   /* runde 19 (Adams besked): grønt flueben foran Ret på alle foldede rækker */
.sum-ok { margin-left: auto; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat; }

/* ---------- Valgkort (Apples .form-selector-label) ---------- */
.opts { display: grid; gap: 12px; }
.opt { display: block; width: 100%; text-align: left; padding: 15px; border: 1px solid var(--line-2); border-radius: var(--r-card); background: rgba(255, 255, 255, .8); font-size: 17px; font-weight: 400; line-height: 1.3; cursor: pointer; position: relative; -webkit-appearance: none; transition: border-color .15s, transform .1s ease-out; }
.opt small { display: block; font-size: 14px; color: var(--ink-2); margin-top: 3px; line-height: 1.35; font-weight: 400; }
.opt:hover { border-color: #8f8f94; }
.opt:active { transform: scale(.985); }
.opt[aria-checked="true"] { border: 2px solid var(--accent); padding: 14px; font-weight: 600; }
/* 16/10-26 (Adams besked: "make the selection more visible, right now the slight blue border around the
   selected option is slightly too inconspicous"): uden for det blå (type og forløb) får det valgte kort
   lyseblå flade, mørkeblå kant og en blød blå ring udenom, samme sprog som det valgte svar i det blå.
   Forløbspillen og grafens skinne får hvid bund, så de stadig ses på det lyseblå. */
.step-gate .opt[aria-checked="true"] { background: var(--accent-light); border-color: var(--accent-dark); box-shadow: 0 0 0 3px rgba(92, 108, 221, .24); }
.step-gate .opt[aria-checked="true"] .plan-tag { background: #fff; }
.opt-note { display: block; margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: #FFF4E5; color: #7A4B00; font-size: 14px; font-weight: 400; line-height: 1.4; }
.opt-note b { font-weight: 600; }
.afvist { margin-top: 16px; padding: 18px; border-radius: var(--r-card); background: var(--bg-2); }
.afvist h3 { font-size: 18px; line-height: 1.25; letter-spacing: -.01em; margin-bottom: 8px; }
.afvist p { font-size: 15px; color: var(--ink-2); margin-bottom: 14px; line-height: 1.45; }
.afvist .btn-ghost { width: 100%; }

/* Skillelinje før enkeltkøbet (Apples "Or choose from more options.") */
.opts-divider { margin: 10px 0 0; padding-top: 18px; border-top: 1px solid var(--line-2); }
.opts-divider b { display: block; font-size: 17px; font-weight: 600; margin-bottom: 3px; }
.opts-divider span { display: block; font-size: 14px; color: var(--ink-2); line-height: 1.45; }

/* Forløbskort */
.plan-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.plan-name { font-weight: 600; }
.plan-tag { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--accent-dark); background: var(--accent-light); border-radius: 999px; padding: 3px 9px; }
.plan-rate { margin-top: 3px; font-size: 16px; font-weight: 400; }
.plan-bind { font-size: 14px; color: var(--ink-2); margin-top: 2px; font-weight: 400; }
.plan-rows { display: none; margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; font-size: 14px; font-weight: 400; }
.opt[aria-checked="true"] .plan-rows { display: block; }
.plan-row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; color: var(--ink-2); }
.plan-row b { color: var(--ink); font-weight: 600; white-space: nowrap; }
.plan-row.is-rabat b { color: var(--ok); }
.plan-row.is-total { color: var(--ink); font-weight: 600; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; }
.plan-row.is-note { font-size: 13px; color: var(--ink-3); }

/* Infobokse (Apples beslutningsboks) og kort */
.info-box { margin-top: 16px; padding: 14px 16px; border-radius: var(--r-card); background: #EAF0FE; font-size: 14px; line-height: 1.45; }
.info-box b { display: block; font-weight: 600; margin-bottom: 3px; color: var(--ink); }
.info-box p { color: var(--ink-2); }
/* runde 6 (Adams besked): bokse, der ikke er knapper, er grå; knapper er hvide */
.info-card { margin-top: 16px; padding: 16px; border: 0; border-radius: var(--r-card); background: var(--bg-2); }
.info-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 10px; line-height: 1.3; }
.info-card .link-more { margin-top: 10px; }
.check-list { list-style: none; display: grid; gap: 8px; }
.check-list li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.4; }
.check-list li b { font-weight: 600; }
.dot-list { padding-left: 18px; font-size: 14px; color: var(--ink-2); display: grid; gap: 8px; line-height: 1.45; }
.dot-list strong { color: var(--ink); font-weight: 600; }
.fine { margin-top: 14px; font-size: 13px; color: var(--ink-3); line-height: 1.45; }

/* Resultat */
.ok-ic { width: 44px; height: 44px; border-radius: 50%; background: var(--ok); display: grid; place-items: center; margin-bottom: 12px; }
.ok-ic svg { width: 22px; height: 22px; }
/* 15/9-26 (runde 4): resultatet mere kompakt; runde 6: nøgletallet bor i samme grå boks */
.is-result .info-card { margin-top: 10px; padding: 14px 16px; }
.stat-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.stat-row b { font-size: 28px; font-weight: 700; color: var(--accent-dark); letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
.stat-row span { font-size: 15px; font-weight: 500; line-height: 1.3; }
.stat-logo { display: inline-block; height: .92em; width: auto; vertical-align: -.17em; margin-left: 1px; }
/* runde 18 (Adams besked): nøgletallet står alene og centreret, effektlinjen under, og det lange
   "Læs mere" løber som almindelig tekst, så pilen følger sidste ord. */
.is-result .info-card { text-align: center; padding: 18px 16px 16px; }
.is-result .stat-row { flex-direction: column; gap: 6px; margin-top: 0; padding-top: 0; border-top: 0; }
.is-result .stat-row b { font-size: 34px; }
.is-result .stat-row span { max-width: 300px; text-wrap: balance; }
.is-result .link-more { display: inline; margin-top: 12px; line-height: 1.35; }
.is-result .link-more::after { top: 0; margin-left: 3px; }
.is-result .btn-primary { margin-top: 14px; }
.is-result .ok-ic { margin: 0 auto 10px; }
.is-result .step-h { text-align: center; }

/* Medicinens tidslinje (skematisk) */
/* 15/9-26 (Adams besked): grafen er trykket ca. 20 % sammen i højden. */
.mtid { display: grid; gap: 11px; padding: 2px 0 0; }
.mtid-inline { margin-bottom: 12px; }
.mtid-row { display: grid; }
.mtid-lab b { display: block; font-size: 14px; font-weight: 600; line-height: 1.2; }
.mtid-lab span { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 0; }
.mtid-track { position: relative; height: 16px; border-radius: 99px; background: #DCE1EC; margin-top: 26px; }   /* runde 11: tydeligere grå */
/* Runde 9 (Adams besked): alle tre søjler toner ud mod højre, varigheden står i den solide start, og
   søjlerne tegnes fra venstre mod højre (clip-path, ingen layout-animation), når trinnet nås. */
.mtid-bar { position: absolute; top: 0; bottom: 0; left: var(--s); width: var(--l); border-radius: 99px 0 0 99px; background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 74%, rgba(92, 108, 221, 0) 100%); display: flex; align-items: center; justify-content: flex-start; overflow: hidden; clip-path: inset(0 100% 0 0); transition: clip-path .9s cubic-bezier(.32, .72, 0, 1); }
.mtid-bar em { font-style: normal; color: #fff; font-size: 12.5px; font-weight: 600; padding-left: 10px; white-space: nowrap; }
.vis .mtid-bar { clip-path: inset(0 0 0 0); }
.opt-mtid:nth-child(2) .mtid-bar { transition-delay: .15s; }
.opt-mtid:nth-child(3) .mtid-bar { transition-delay: .3s; }
.mtid-tag { position: absolute; left: 0; bottom: calc(100% + 5px); font-size: 13.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; line-height: 1.2; }
.mtid-tag::after { content: ""; position: absolute; left: 1px; top: calc(100% + 1px); width: 1px; height: 4px; background: var(--line-2); }
.mtid-axis { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); text-align: right; margin-top: -4px; }

/* Graferne som valgkort (15/9-26, runde 5, Adams besked): navn og virkestof øverst, sporet med
   virkningsstart og varighed nedenunder. Større skrift end den gamle graf. */
.opt-mtid { display: block; padding-bottom: 17px; }
.om-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.om-name { font-size: 17px; font-weight: 600; }
.om-gen { font-size: 14px; font-weight: 400; color: var(--ink-2); text-align: right; }
.opt .mtid-track { display: block; }
.opt[aria-checked="true"] .mtid-track { background: #fff; }   /* 16/10-26: hvid skinne, da kortet selv er lyseblåt nu */

/* Apples "Need help choosing?"-boks: lys blågrå kasse, fed overskrift, én linje og ⊕ øverst til højre.
   Hele boksen er en knap, der åbner arket. */
.help-box { display: block; width: 100%; position: relative; margin-top: 14px; padding: 14px 16px; border: 0; border-radius: var(--r-card); background: #EAF0FE; color: var(--ink); text-align: left; font: inherit; line-height: 1.4; cursor: pointer; -webkit-appearance: none; transition: background .15s, transform .1s ease-out; }
.help-box:hover { background: #E1E9FC; }
.help-box:active { transform: scale(.99); }
.help-box:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.help-box b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 2px; color: #000; }   /* runde 30 (Adams besked): titlen helt sort */
.help-box span { display: block; font-size: 14px; color: var(--ink-2); }
/* runde 27 (Adams besked): i stedet for pillen "Læs mere" står en stor Recepta-blå pil (›) til højre,
   lodret centreret i tekstdelen, på alle kort, der åbner et vindue. Den glider lidt mod højre ved hover. */
.help-foto .help-txt::after, .laege-kort::after { content: ""; position: absolute; right: 14px; top: 50%; width: 30px; height: 30px; margin-top: -15px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6CDD' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat; transition: transform .2s ease-out; }
.help-box:hover .help-txt::after, .laege-kort:hover::after { transform: translateX(3px); }
/* Fotovarianten (Apples "Not sure how much storage?"): foto øverst, tekst nedenunder */
.help-foto { padding: 0; overflow: hidden; }
/* runde 14 (Adams besked): fotoet sidder i sin egen klippede ramme, så et zoomet foto aldrig lægger
   sig ind over teksten nedenunder; energi-kortets ramme er lidt lavere. */
.help-img-wrap { display: block; width: 100%; aspect-ratio: 7 / 2; overflow: hidden; }
.help-img-wrap.is-kort { aspect-ratio: 4 / 1; }
.help-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }   /* runde 8: lige så lavt som Apples */
.help-img.is-energi { object-position: 50% 28%; transform: scale(1.4); transform-origin: 70% 34%; }   /* runde 30 (Adams besked): mindre luft over hovederne, så man ser dem holde i hånd */
.help-img.is-kajak { object-position: 50% 50%; }   /* 16/10-26 (Adams besked): manden i kajakken i stedet for parret på bjerget; filen er beskåret 4:1 om hans ansigt (assets/mand-kajak-r2.jpg fra Marketing/Rejsning/Gemini_Generated_Image_w4xu01w4xu01w4xu.jpeg), så ingen transform */
.help-foto .help-txt { display: block; position: relative; padding: 14px 54px 14px 16px; }
.help-foto .help-txt > span { display: block; font-size: 14px; color: var(--ink-2); }
/* "Derfor er Recepta billigst": den dybblå boks med graf fra den gamle /r/ (5/9-26), porteret 15/9-26 */
.rw { display: inline-block; height: .8em; aspect-ratio: 2757 / 622; background: currentColor; vertical-align: -.15em; -webkit-mask: url('/assets/recepta-wordmark.svg') center / contain no-repeat; mask: url('/assets/recepta-wordmark.svg') center / contain no-repeat; }
.billigst { margin: 16px 0 18px; text-align: left; background: radial-gradient(130% 85% at 88% -6%, rgba(136, 150, 255, .38), transparent 52%), linear-gradient(175deg, #4149BE 0%, #3A43B4 45%, #262E97 100%); border-radius: 16px; padding: 18px 16px; color: #fff; }
.bl-graf { display: grid; grid-template-columns: auto 1fr 1fr; gap: 14px; align-items: stretch; }
/* Apples tavle-rækker i vinduet: fed term til venstre, forklaring til højre, hårstreg imellem */
.def-list { margin: 8px 0 0; }
.def-list div { display: grid; grid-template-columns: 118px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.def-list dt { font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.def-list dd { font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.bg-akse { display: flex; align-items: stretch; gap: 6px; color: #fff; padding-bottom: 30px; }
.bg-akse .ak-linje { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bg-akse svg { width: 10px; height: auto; flex: 1; min-height: 0; }
.bg-akse .ak-pris { writing-mode: vertical-rl; transform: rotate(180deg); align-self: center; font-size: 13px; font-weight: 700; letter-spacing: .05em; }
.bg-akse .ak-ende { font-size: 12px; font-weight: 700; letter-spacing: .04em; line-height: 1; }
.bg-row { display: flex; flex-direction: column; width: 100%; }
/* runde 9 (Adams besked): begge mærkater fylder præcis det samme, så de to søjler starter i samme højde */
.bg-lab { order: 2; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: #C9D2F8; line-height: 1; text-align: center; margin-top: 8px; }
.bg-lab .rw { height: 15px; vertical-align: 0; color: #fff; }
.bg-bar { display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; width: 100%; flex: 1; }
.bg-bar i { border-radius: 6px; font-style: normal; font-size: 14px; font-weight: 600; display: flex; align-items: center; padding: 7px 10px; line-height: 1.3; text-align: left; }
.bg-bar .ov { background: rgba(255, 255, 255, .20); color: #E3E8FC; }
.bg-bar .spar { flex: 1; background: none; border: none; position: relative; color: #C9D2F8; justify-content: center; text-align: center; }
.spar-ramme { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.spar-ramme rect { x: 1px; y: 1px; width: calc(100% - 2px); height: calc(100% - 2px); fill: none; stroke: rgba(255, 255, 255, .40); stroke-width: 2; stroke-dasharray: 7 6; animation: spar-snake 12s linear infinite; }
@keyframes spar-snake { to { stroke-dashoffset: -130; } }
.bg-bar .beh { background: #fff; color: var(--accent-dark); font-weight: 700; font-size: 16.5px; min-height: 56px; justify-content: center; text-align: center; }

/* Tider */
.tid-panel { margin-top: 14px; }
.dag-faner { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.dag-faner::-webkit-scrollbar { display: none; }
.dag-fane { flex: 0 0 auto; min-width: 66px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; text-align: center; cursor: pointer; line-height: 1.2; -webkit-appearance: none; }
.dag-fane .ugedag { display: block; font-size: 12px; color: var(--ink-2); text-transform: capitalize; }
.dag-fane .dato { display: block; font-size: 14px; font-weight: 600; margin-top: 2px; }
.dag-fane.valgt { border: 2px solid var(--accent); padding: 7px 9px; }
.tid-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 12px; }
.tid-knap { padding: 10px 6px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; font-size: 15px; font-weight: 500; cursor: pointer; -webkit-appearance: none; }
.tid-knap:hover { border-color: #8f8f94; }
.tid-knap.valgt { border: 2px solid var(--accent); padding: 9px 5px; font-weight: 600; }
.tid-tom { grid-column: 1 / -1; padding: 16px 8px; text-align: center; color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.tid-tom p { margin-bottom: 8px; }
.tid-tom .btn-ghost { margin-top: 8px; }
.fejl { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: #FDECEC; color: #8A1C13; font-size: 14px; line-height: 1.4; }

/* Felter */
.felter { display: grid; gap: 6px; }
.felt-lbl { font-size: 14px; font-weight: 500; margin-top: 10px; }
.felt-lbl:first-child { margin-top: 0; }
.felt { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 10px; font-size: 17px; font-family: inherit; background: #fff; color: var(--ink); -webkit-appearance: none; }
.felt:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.felt.is-ugyldig { border-color: var(--err); }
.note { font-size: 13px; color: var(--ink-3); line-height: 1.4; }
.tlf-felt { display: flex; gap: 8px; }
.tlf-land { flex: 0 0 112px; min-height: 48px; border: 1px solid var(--line-2); border-radius: 10px; padding: 0 10px; font-size: 15px; font-family: inherit; background: #fff; color: var(--ink); }
.consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: 14px; color: var(--ink-2); line-height: 1.4; cursor: pointer; }
.consent input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--accent); flex: 0 0 auto; }
.felter .btn-primary { margin-top: 14px; }

/* ---------- Under flowet ---------- */
.below { max-width: 640px; margin: 0 auto; padding: 44px 20px; }
.below-alt { background: var(--bg-2); box-shadow: 0 0 0 100vmax var(--bg-2); clip-path: inset(0 -100vmax); }
.sec-h { font-size: 28px; line-height: 1.1; letter-spacing: -.02em; font-weight: 600; margin-bottom: 22px; }
.qa-list { list-style: none; display: grid; gap: 16px; }
.qa-q { font-weight: 600; font-size: 16px; line-height: 1.3; }
.qa-a { font-size: 15px; color: var(--ink-2); line-height: 1.45; margin-top: 3px; }
.qa-a b { color: var(--ink); font-weight: 600; }
/* 15/9-26 (runde 17, Adams besked): lægekortet er en knap, der åbner et vindue; ramme, plus-ikon,
   hover og tryk gør det tydeligt, at man kan trykke. */
.laege-kort { width: 100%; position: relative; margin-top: 26px; display: flex; gap: 16px; padding: 18px 54px 18px 18px; border: 1px solid var(--line-2); border-radius: 16px; background: #fff; color: var(--ink); text-align: left; font: inherit; cursor: pointer; box-shadow: 0 1px 2px rgba(26, 29, 46, .06); transition: border-color .2s, box-shadow .2s, background .2s; }
.laege-kort:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(26, 29, 46, .1); }
.laege-kort:active { transform: scale(.99); }
.laege-kort:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.laege-linje { display: block; font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.4; }
.laege-foto { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.laege-txt { display: block; min-width: 0; }
.laege-navn { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; }
.laege-om { display: block; font-size: 14px; color: var(--ink-2); line-height: 1.45; margin: 4px 0 8px; }

/* FAQ */
.faq-group { border-top: 1px solid var(--line); }
.faq-group:last-of-type { border-bottom: 1px solid var(--line); }
.faq-group > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 16px 0; cursor: pointer; }
.faq-group > summary::-webkit-details-marker, .faq-item > summary::-webkit-details-marker { display: none; }
.faq-group > summary h3 { font-size: 17px; font-weight: 600; }
.faq-plus { position: relative; width: 20px; height: 20px; flex: 0 0 auto; }
.faq-plus::before, .faq-plus::after { content: ""; position: absolute; background: var(--ink); left: 4px; right: 4px; top: 9px; height: 2px; border-radius: 2px; transition: transform .25s; }
.faq-plus::after { transform: rotate(90deg); }
.faq-group[open] > summary .faq-plus::after { transform: rotate(0); }
.faq-item { border-top: 1px solid var(--line); }
.faq-item > summary { list-style: none; padding: 12px 28px 12px 0; font-size: 15px; font-weight: 500; cursor: pointer; position: relative; line-height: 1.4; }
.faq-item > summary::after { content: ""; position: absolute; right: 6px; top: 16px; width: 8px; height: 8px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); transition: transform .25s; }
.faq-item[open] > summary::after { transform: rotate(-135deg); top: 20px; }
.faq-a { padding: 0 0 14px; font-size: 15px; color: var(--ink-2); line-height: 1.5; }

/* ---------- Footer ---------- */
.site-foot { background: var(--ink); color: #C9CFE3; padding: 40px 20px 40px; }
.foot-in { max-width: 980px; margin: 0 auto; }
.foot-about { margin: 14px 0 26px; font-size: 14px; max-width: 48ch; line-height: 1.5; }
.foot-cols { display: grid; gap: 22px; }
.foot-cols div { display: grid; gap: 8px; align-content: start; }
.foot-k { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #8A92B8; margin-bottom: 4px; font-weight: 600; }
.foot-cols a { color: #E4E8F5; text-decoration: none; font-size: 14px; }
.foot-cols a:hover { text-decoration: underline; }
.foot-legal { margin-top: 28px; font-size: 12.5px; color: #8A92B8; line-height: 1.5; }

/* 15/9-26 (runde 5, Adams besked): bundbjælken på telefon er fjernet. */

/* ---------- Fremdriftsskinne (desktop) ---------- */
.rail-dots { display: none; }

/* ---------- Ark ("Læs mere") ---------- */
/* Runde 8: siden låses ikke længere med overflow:hidden (det gav et hop på iPhone); bagtæppet
   sluger touch i stedet, og arket ruller selv. */
/* Runde 9: højden er 100vh (den STORE viewport, stabil på iPhone), ikke 100 %, som ændrer sig, når
   Safaris værktøjslinje folder ind og ud. Det var det, der fik arket til at hoppe op og ned ved åbning. */
/* Runde 13 (Adams fund): ikke længere <dialog>/showModal, som flytter tastaturfokus ind i vinduet og
   får iPhone Safari til at rulle siden (og trække det faste panel med). Nu et almindeligt fast lag,
   der dækker skærmen uanset hvor på siden man er; bagtæppet er lagets egen baggrund. */
.sheet { position: fixed; inset: 0; z-index: 100; width: 100%; height: 100vh; margin: 0; padding: 0; border: 0; background: rgba(0, 0, 0, 0); transition: background .35s ease; color: inherit; touch-action: none; outline: none; }
.sheet.vis { background: rgba(0, 0, 0, .48); }
/* Runde 12 (Adams fund, arket hoppede stadig på iPhone): panelet, der glider, RULLER IKKE selv. iOS
   Safari tegner forkert, når et rullende element samtidig animeres med transform. Panelet er en
   flex-kolonne med eget lag (will-change), og kun .sheet-body ruller. Overskrift og kryds står fast. */
.sheet-in { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: var(--r-sheet) var(--r-sheet) 0 0; max-height: 88vh; overflow: hidden; display: flex; flex-direction: column; touch-action: pan-y; padding: 10px 20px 0; transform: translate3d(0, 100%, 0); transition: transform .5s cubic-bezier(.32, .72, 0, 1); will-change: transform; overscroll-behavior: contain; }
.sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
/* Apples store vindue (memory/storage-forklaringen): næsten hele skærmen, lukkekryds øverst til højre */
.sheet-tall .sheet-in { top: 36px; max-height: none; padding-top: 22px; }
.sheet-tall .sheet-body { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
.sheet.vis .sheet-in { transform: translate3d(0, 0, 0); }
.sheet.is-drag .sheet-in { transition: none; }
.sheet-grab { width: 36px; height: 5px; border-radius: 99px; background: var(--line-2); margin: 0 auto 14px; }
.sheet-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--bg-2); cursor: pointer; }
.sheet-close::before, .sheet-close::after { content: ""; position: absolute; left: 9px; right: 9px; top: 15px; height: 2px; background: var(--ink); border-radius: 2px; transform: rotate(45deg); }
.sheet-close::after { transform: rotate(-45deg); }
.sheet h2 { font-size: 24px; line-height: 1.15; letter-spacing: -.015em; font-weight: 600; margin: 6px 44px 14px 0; }
.sheet-body { font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.sheet-body h3 { font-size: 16px; font-weight: 600; color: var(--ink); margin: 16px 0 4px; }
.sheet-body p { margin-bottom: 10px; }
.sheet-body b { color: var(--ink); font-weight: 600; }
.sheet-body .check-list { margin-bottom: 14px; }
.sheet-src { font-size: 13px; color: var(--ink-3); margin-top: 16px; }
.sheet-src a { color: inherit; }
.tal-liste { display: grid; gap: 10px; margin: 14px 0; }
.tal-liste div { display: flex; gap: 12px; align-items: baseline; }
.tal-liste dt { flex: 0 0 104px; font-size: 20px; font-weight: 700; color: var(--accent); letter-spacing: -.02em; }
.tal-liste dd { font-size: 15px; }

/* ---------- Betaling: dæmpet forbillede, mens trinnet er låst (runde 9) ---------- */
.pay-skelet { display: grid; gap: 10px; }
.pay-mp { height: 48px; border-radius: 8px; background: #5A78FF; color: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 16px; }
.pay-mp-ikon { width: auto; height: 26px; fill: #fff; }   /* runde 17: MobilePays eget ikon */
.pay-wallet .pay-logo { height: 20px; width: auto; fill: #fff; }   /* runde 17: Apple Pay- og Google Pay-mærkerne */
.pay-wallet { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pay-wallet span { height: 44px; border-radius: 8px; background: #111; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 15px; }
.pay-kort { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 8px; font-size: 15px; }
.pay-kort b { font-weight: 600; }
.pay-kort span { font-size: 12px; color: var(--ink-3); letter-spacing: .04em; }

/* ---------- Betaling (forhåndsvisning) ---------- */
.pay-mock { border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px; background: #fff; }
.pay-mock-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.pay-mock-h b { font-weight: 600; }
.pay-mock-btn { margin-top: 14px; min-height: 48px; border-radius: 8px; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 600; opacity: .55; }
.pay-mock-note { margin-top: 10px; font-size: 13px; color: var(--ink-3); line-height: 1.45; }

/* ---------- Reduceret bevægelse ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .spar-ramme rect { animation: none; }
  .mtid-bar { clip-path: none; }
  .qm { opacity: 1; transform: none; }
}

/* ===========================================================================
   DESKTOP (Apples store brudpunkt: 1069 px)
   =========================================================================== */
/* 12/10-26 (Adams besked): på telefonen fylder hvert åbent quizspørgsmål hele skærmen. Foldede svarrækker
   står tæt som før. Efter bookingen er tid og oplysninger frosset (klassen frosset), men stadig fuldt synlige.
   16/10-26 (Adams besked: "the title is all the way in the top but the quiz response items are at the
   bottom. can we center it, and make the spacing between each of the three quiz questions at a size where
   we cant see the following question ... the spacing between the question title and answers should go
   back to normal"): titel og svar står nu samlet midt i kassen med den normale afstand (14 px) imellem,
   ikke titel øverst og svar nederst. Kassen måler den STORE viewport (100lvh, skærmen når adresselinjen
   er gledet væk), ikke den lille (100svh): forskellen på de to (ca. 80 px på iPhone) lod næste spørgsmåls
   dæmpede titel kigge op i bunden. Dertil 16vh luft mellem spørgsmålene, så et lille ekstra rul heller
   ikke afslører det næste. rejsning-2.js ruller stadig trinnets top til 16 px under skærmkanten, så
   kassen fylder netop skærmen. Undtagelse: spørgsmål 1 nås ved at rulle ned fra fotoet, ikke ved
   sidens egen rulning, så dets titel og svar bliver stående lige under de tre perks (centreret ville
   lægge ca. 240 px tomt blåt mellem perks og titel, og på en iPhone med adresselinjen fremme ville
   intet af spørgsmålet ses på første skærm). Kassen er stadig en hel skærm, så spørgsmål 2 ligger
   under folden. Kun under 1069 px; desktop (/r) er urørt. */
@media (max-width: 1068px) {
  .quiz-zone .step { margin-bottom: 16vh; }
  .quiz-zone .step:last-child { margin-bottom: 0; }
  .quiz-zone .step:not(.folded) { display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh - 16px); min-height: calc(100lvh - 16px); padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .quiz-zone .step:not(.folded):first-child { justify-content: flex-start; }
  .quiz-zone .step.folded { margin-bottom: 8px; min-height: 0; }
  .step.frosset .step-body { pointer-events: none; }
  .step.frosset .step-sum { margin-bottom: 14px; }
}
@media (min-width: 1069px) {
  body { padding-bottom: 0; }
  .site-head { height: 72px; padding: 6px 40px 0; }
  .site-logo img { width: 132px; transform: translateY(.7px); }
  .top-bar { display: block; }
  .flow-grid { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 72px; max-width: 1280px; padding: 0 40px; align-items: start; }
  .side-panel { display: block; position: sticky; top: 84px; height: calc(100vh - 108px); min-height: 520px; }
  .side-visual { height: 100%; border-radius: 20px; overflow: hidden; background: var(--bg-2); position: relative; }
  .side-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
  .side-card { padding: 36px; height: 100%; display: flex; flex-direction: column; justify-content: center; }
  .side-kicker { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-bottom: 14px; }
  .side-note { font-size: 13px; color: var(--ink-3); margin-top: 18px; line-height: 1.45; }
  .side-card .mtid-row { grid-template-columns: 170px 1fr; gap: 0 16px; align-items: end; }
  .side-card .mtid-track { margin-top: 0; }
  .side-card .mtid-lab { padding-bottom: 0; }
  .ordre-liste { display: grid; }
  .ordre-liste div { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .ordre-liste dt { color: var(--ink-2); }
  .ordre-liste dd { font-weight: 600; text-align: right; }
  .ordre-liste div.is-total dd { font-size: 20px; letter-spacing: -.01em; }
  .quiz-zone { margin: 0; padding: 30px 30px 34px; border-radius: 16px; }
  .hero-foto { display: none; }
  .hero-text { margin-top: 0; }
  .side-visual .hero-top { top: 26px; left: 26px; right: 26px; }
  .side-visual h1 { font-size: 40px; line-height: 1.06; max-width: 13ch; margin-bottom: 12px; }
  .side-visual .hero-chip { font-size: 14px; padding: 7px 14px; }
  .step-gate { padding-top: 56px; }
  .step { margin-bottom: 96px; }
  .quiz-zone .step { margin-bottom: 80px; }
  .step.folded { margin-bottom: 10px; }
  .step.folded + .step:not(.folded) { margin-top: 40px; }
  .step-h { font-size: 24px; line-height: 1.17; letter-spacing: -.009em; margin-bottom: 16px; }
  .step-h-stor { font-size: 40px; line-height: 1.06; letter-spacing: -.02em; }
  .step-h span { font-size: 17px; }
  .mtid-inline .mtid-row { grid-template-columns: 190px 1fr; gap: 0 18px; align-items: end; }
  .mtid-inline .mtid-track { margin-top: 0; }
  .below { max-width: 980px; padding: 72px 40px; }
  .sec-h { font-size: 36px; margin-bottom: 30px; }
  .qa-list { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .laege-kort { margin-top: 36px; align-items: center; padding: 24px; }
  .laege-foto { width: 96px; height: 96px; }
  .foot-cols { grid-template-columns: repeat(3, 1fr); }
  .bottom-bar { display: none; }
  .rail-dots { display: flex; flex-direction: column; gap: 14px; position: fixed; right: 30px; top: 50%; transform: translateY(-50%); z-index: 40; }
  .rail-dot { width: 4px; height: 4px; border-radius: 2px; background: rgba(26, 29, 46, .16); border: 0; padding: 0; cursor: pointer; transition: height .3s ease-in-out, background .3s; }
  .rail-dot.aktiv { height: 22px; background: var(--ink); }
  .sheet-in { left: 50%; top: 50%; right: auto; bottom: auto; width: min(640px, calc(100vw - 80px)); max-height: calc(100vh - 80px); border-radius: var(--r-sheet); padding: 30px 40px 0; transform: translate(-50%, -50%) scale(.96); opacity: 0; transition: transform .25s ease-out, opacity .25s ease-out; }
  .sheet-body { padding-bottom: 34px; }
  .sheet-tall .sheet-in { top: 50%; width: min(760px, calc(100vw - 80px)); padding-top: 30px; }
  .sheet-tall .sheet-body { padding-bottom: 34px; }
  .sheet.vis .sheet-in { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  .sheet-grab { display: none; }
  .sheet-close { top: 18px; right: 18px; }
}
@media (min-width: 1069px) and (max-width: 1339px) {
  .rail-dots { right: 12px; }
}