/* ============================================================
   Onboarding-prototype - KOMPONENTER
   ------------------------------------------------------------
   ARBEJDSDELING, som skal holdes:
     prototype.css   ejer RYTMEN - afstande, tekstskala, kortets
                     gap og padding, bundens opbygning.
     komponenter.css ejer kun NYE KOMPONENTER, som ikke findes
                     i prototype.css eller i designsystemet.

   Denne fil maa ALDRIG erklaere sin egen rytme. Goer den det,
   er lagkage-problemet bygget om igen, bare fordelt paa to filer.

   Tre bevidste undtagelser staar til sidst, hver med begrundelse.
   ============================================================ */

/* ============================================================
   Segmentkontrol - ét sammenhaengende valg
   ============================================================ */
.ob-seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: var(--color-lavender-50);
  border: 1.5px solid var(--color-lavender-700);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 3px;
}
.ob-seg__item {
  position: relative;
  display: grid;
  place-items: center;
  min-height: var(--space-10);
  padding: var(--space-2) var(--space-3);
  border-radius: calc(var(--radius-sm) - 4px);
  cursor: pointer;
  font-size: var(--text-base);
  color: var(--color-navy-400);
  text-align: center;
  line-height: var(--lh-snug);
  transition: background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
}
.ob-seg__item input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.ob-seg__item:hover { color: var(--color-navy-900); }
.ob-seg__item:has(input:checked) {
  background: var(--color-white);
  color: var(--color-navy-900);
  font-weight: 500;
  box-shadow: var(--shadow-xs);
}
.ob-seg__item:has(input:focus-visible) { box-shadow: var(--shadow-focus-ring); }
.ob-seg__item span { pointer-events: none; }
@media (max-width: 480px) {
  .ob-seg { grid-auto-flow: row; grid-auto-columns: auto; }
}

/* ============================================================
   Egen dropdown - browserens kan ikke styles
   ============================================================ */
.ob-vaelg { position: relative; }
.ob-vaelg__knap {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--color-lavender-50);
  border: 1.5px solid var(--color-lavender-700);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-family: inherit;
  line-height: var(--lh-snug);
  color: var(--color-navy-900);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.ob-vaelg__knap.is-tom { color: var(--color-periwinkle-700); }
.ob-vaelg__knap::after {
  content: '';
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  background: var(--color-navy-400);
  clip-path: polygon(50% 78%, 4% 22%, 16% 12%, 50% 56%, 84% 12%, 96% 22%);
  transition: transform var(--dur-fast);
}
.ob-vaelg__knap[aria-expanded="true"]::after { transform: rotate(180deg); }
.ob-vaelg__knap:hover { border-color: var(--color-periwinkle-500); }
.ob-vaelg__knap:focus-visible,
.ob-vaelg__knap[aria-expanded="true"] {
  outline: none;
  background: var(--color-white);
  border-color: var(--color-periwinkle-900);
  box-shadow: var(--shadow-focus-ring);
}
.ob-vaelg__liste {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + var(--space-1));
  z-index: 20;
  margin: 0;
  padding: var(--space-2);
  list-style: none;
  background: var(--color-white);
  border: 1.5px solid var(--color-lavender-700);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-dropdown);
  max-height: 340px;
  overflow-y: auto;
}
.ob-vaelg__liste--op { top: auto; bottom: calc(100% + var(--space-1)); }
.ob-vaelg__hoved {
  padding: var(--space-2) var(--space-4) var(--space-3);
  margin-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-lavender-300);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--color-periwinkle-700);
  font-weight: 500;
  cursor: default;
}
.ob-vaelg__punkt {
  padding: var(--space-2) var(--space-4);
  border-radius: calc(var(--radius-sm) - 6px);
  color: var(--color-navy-700);
  cursor: pointer;
  line-height: var(--lh-snug);
}
.ob-vaelg__punkt:hover { background: var(--color-lavender-50); color: var(--color-navy-900); }
.ob-vaelg__punkt:focus-visible {
  outline: none;
  background: var(--color-lavender-100);
  color: var(--color-navy-900);
}
.ob-vaelg__punkt.is-valgt { color: var(--color-navy-900); font-weight: 500; }

/* ============================================================
   Partnerkode - manuel eller hentet fra linket
   ============================================================ */
.ob-partnerkode.is-bekraeftet {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: color-mix(in srgb, var(--color-success) 8%, var(--color-white));
  border: 1.5px solid color-mix(in srgb, var(--color-success) 45%, var(--color-white));
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
}
.ob-partnerkode__mark {
  width: var(--space-6);
  height: var(--space-6);
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--color-success);
  position: relative;
}
.ob-partnerkode__mark::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-white);
  clip-path: polygon(20% 52%, 32% 40%, 42% 50%, 68% 24%, 80% 36%, 42% 74%);
}
.ob-partnerkode__body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.ob-partnerkode__kode {
  font-weight: 500;
  color: var(--color-navy-900);
  letter-spacing: var(--track-wide);
}
.ob-partnerkode__navn { font-size: var(--text-sm); color: var(--color-navy-400); }
.ob-partnerkode__fjern {
  flex: 0 0 auto;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--color-navy-400);
  text-decoration: underline;
}
.ob-partnerkode__fjern:hover { color: var(--color-navy-900); }
.ob-f__hint--fejl { color: var(--color-danger); }

/* ============================================================
   Invitationsraekker - én pr. ledig plads
   ============================================================ */
.ob-invite { display: flex; align-items: center; gap: var(--space-2); }
.ob-invite .ob-field { flex: 1; }
.ob-invite__fjern {
  flex: 0 0 auto;
  width: var(--space-10);
  height: var(--space-10);
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--color-navy-400);
  font-family: inherit;
  font-size: var(--text-lg);
  border-radius: var(--radius-pill);
  line-height: 1;
}
.ob-invite__fjern:hover { background: var(--color-lavender-100); color: var(--color-navy-900); }

/* ============================================================
   Pladsstatus og tilvalg
   ============================================================ */
.ob-pladsblok {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--color-lavender-50);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
}
.ob-pladsblok .ob-linje { color: var(--color-navy-900); }
/* Tilvalgsgruppe - samme formsprog som .ob-pladsblok */
.ob-tilvalg {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--color-lavender-50);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
}
.ob-tilvalg .ob-consent { padding: var(--space-1) 0; }

/* ============================================================
   Rabatmaerke og proevelinje
   ============================================================ */
.ob-choice__titelraekke { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.ob-spar {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--color-periwinkle-900);
  border-radius: var(--radius-pill);
  padding: 2px var(--space-2);
  white-space: nowrap;
}
.ob-proeve {
  text-align: center;
  line-height: var(--lh-prose);
  color: var(--color-navy-400);
  background: var(--color-lavender-50);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
}
.ob-proeve strong { color: var(--color-navy-900); font-weight: 500; display: block; }

/* ============================================================
   Links i loebende tekst
   ============================================================ */
.ob-link { color: var(--color-periwinkle-900); text-decoration: underline; }
.ob-link:hover { color: var(--color-navy-900); }

/* ============================================================
   Overleveringsskaerm
   ============================================================ */
.ob-handoff { text-align: center; align-items: center; }
.ob-handoff h1 {
  font-size: var(--text-h4);
  font-weight: 500;
  color: var(--color-navy-900);
  letter-spacing: var(--track-tight);
}
.ob-handoff__lead { color: var(--color-navy-400); }
.ob-handoff__puls {
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-lavender-300);
  border-top-color: var(--color-periwinkle-900);
  animation: ob-spin 900ms linear infinite;
}
.ob-handoff__puls.is-faerdig {
  animation: ob-pop 400ms var(--ease-out);
  border-color: var(--color-success);
  background: var(--color-success);
  position: relative;
}
.ob-handoff__puls.is-faerdig::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-white);
  clip-path: polygon(20% 52%, 32% 40%, 42% 50%, 68% 24%, 80% 36%, 42% 74%);
}
@keyframes ob-spin { to { transform: rotate(360deg); } }
@keyframes ob-pop {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.ob-handoff__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  max-width: 320px;
}
.ob-handoff__list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-lavender-50);
  color: var(--color-periwinkle-700);
  text-align: left;
  opacity: 0;
  transform: translateY(6px);
  animation: ob-ind 400ms var(--ease-out) forwards;
  transition: color var(--dur-slower), background var(--dur-slower);
}
.ob-handoff__list li:nth-child(1) { animation-delay: 80ms; }
.ob-handoff__list li:nth-child(2) { animation-delay: 200ms; }
.ob-handoff__list li:nth-child(3) { animation-delay: 320ms; }
@keyframes ob-ind { to { opacity: 1; transform: none; } }
.ob-handoff__list li.is-done { color: var(--color-navy-900); background: var(--color-white); }
.ob-handoff__dot {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-lavender-700);
  position: relative;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.ob-handoff__list li.is-done .ob-handoff__dot {
  background: var(--color-success);
  border-color: var(--color-success);
  animation: ob-pop 320ms var(--ease-out);
}
.ob-handoff__list li.is-done .ob-handoff__dot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-white);
  clip-path: polygon(20% 52%, 32% 40%, 42% 50%, 68% 24%, 80% 36%, 42% 74%);
}
@media (prefers-reduced-motion: reduce) {
  .ob-handoff__list li { animation: none; opacity: 1; transform: none; }
  .ob-handoff__puls, .ob-handoff__dot { animation: none; }
}

/* ============================================================
   Kvittering - lys, ikke moerk
   ============================================================ */
.ob-receipt {
  background: var(--color-white);
  border: 1.5px solid var(--color-lavender-700);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  color: var(--color-navy-700);
  position: relative;
}
.ob-receipt h2 {
  color: var(--color-navy-900);
  font-size: var(--text-md);
  font-weight: 500;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-lavender-300);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.ob-receipt h2::before {
  content: '';
  flex: 0 0 auto;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--color-success);
}
.ob-receipt h2::after {
  content: '';
  position: absolute;
  width: var(--space-6);
  height: var(--space-6);
  background: var(--color-white);
  clip-path: polygon(20% 52%, 32% 40%, 42% 50%, 68% 24%, 80% 36%, 42% 74%);
  pointer-events: none;
}
.ob-receipt dt { color: var(--color-navy-400); }
.ob-receipt dd { color: var(--color-navy-900); font-weight: 500; }

/* ============================================================
   MitID-trinnet
   ------------------------------------------------------------
   Knappen er i MitID-familiens formsprog, men BEVIDST uden
   deres logo eller varemaerke. En attrap der ligner et rigtigt
   login er phishing-adfaerd.
   ============================================================ */
.ob-mitid {
  background: var(--color-white);
  border: 1.5px solid var(--color-lavender-700);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}
.ob-mitid__label {
  font-size: var(--text-xs);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--color-periwinkle-900);
  font-weight: 500;
}
.ob-mitid__tekst { color: var(--color-navy-700); line-height: var(--lh-prose); }
.ob-mitid__demo { font-size: var(--text-xs); color: var(--color-periwinkle-700); }

.ob-mitidknap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--space-12);
  padding: var(--space-3) var(--space-6);
  background: var(--color-navy-900);
  color: var(--color-white);
  border: 0;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--text-md);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.ob-mitidknap:hover { background: var(--color-navy-700); }
.ob-mitidknap:active { transform: translateY(1px); }
.ob-mitidknap:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }
.ob-mitidknap__mark {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 5px;
  background: var(--color-white);
  position: relative;
}
.ob-mitidknap__mark::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 2px;
  background: var(--color-navy-900);
  clip-path: polygon(0 40%, 30% 40%, 30% 0, 70% 0, 70% 40%, 100% 40%, 100% 100%, 0 100%);
}

/* ============================================================
   TRE BEVIDSTE UNDTAGELSER
   Alt andet rytme-relateret hoerer hjemme i prototype.css.
   ============================================================ */

/* 1. Stoerre overskrift paa trin-skaermene. Oensket eksplicit. */
.ob-shell h1 { font-size: calc(var(--text-h3) + 10px); }

/* 2. Felttekst paa mindst 16 px. Under det zoomer iOS Safari ind
      ved fokus, og skaermen hopper for brugeren. */
.ob-flow .form-card .form-card__field.ob-f input,
.ob-flow .form-card .form-card__field.ob-f textarea,
.ob-vaelg__knap,
.ob-vaelg__punkt { font-size: 16px; }

/* 3. Tomme beskedbeholdere maa ikke reservere plads i rytmen. */
#cvr-besked:empty,
#mail-fejl:empty,
#partnerkode-besked:empty,
.ob-actions:empty { display: none; }

/* 4. Fremdriftslinjen traekkes 10 px ind i hver side, saa den staar
      inden for kortets kant i stedet for at flugte med den. */
.ob-progress--bund .ob-progress__inner { padding-inline: 10px; }

/* 5. Luft under "hent"-knappen, saa den ikke klaeber til feltet under. */
.ob-actions--inline { padding-bottom: 10px; }

/* 7. Den lille hjaelpeknap ved siden af et felt undtages fra
      44 px-reglen. 36 px er stadig langt over WCAG 2.2's minimum
      paa 24 px, og reglen gaelder fortsat alle primaere knapper. */
.ob-actions--inline .btn--xs {
  min-height: 36px;
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-xs);
  box-shadow: none;
}

/* ============================================================
   Overleveringsskaerm i prisboksens formsprog
   ------------------------------------------------------------
   Samme opbygning som .pricing-card paa prissiden: 4 px ramme,
   stor radius, xl-skygge - og de RIGTIGE flueben fra
   designsystemets ikonmappe, ikke egne clip-paths.
   ============================================================ */
.ob-flow .form-card.ob-handoff {
  border: 4px solid var(--color-lavender-700);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  background: var(--grad-pro-card);
  /* Mere luft i top og bund, mindre i siderne */
  padding: var(--space-12) var(--space-7);
  gap: var(--space-4);
}
.ob-handoff h1 { font-size: var(--text-h3); }

.ob-handoff__puls {
  width: var(--space-14);
  height: var(--space-14);
  border-width: 3px;
}
.ob-handoff__puls.is-faerdig {
  background: none;
  border-color: transparent;
  background-image: url('/assets/icons/check-blue.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.ob-handoff__puls.is-faerdig::after { content: none; }

.ob-handoff__list { max-width: none; gap: var(--space-3); }
.ob-handoff__list li {
  background: none;
  padding: 0;
  gap: var(--space-3);
  justify-content: center;
}
.ob-handoff__list li.is-done { background: none; }
.ob-handoff__dot {
  width: 18px;
  height: 18px;
  border: 0;
  background: no-repeat center / contain;
  background-image: url('/assets/icons/check-blue-light.svg');
  opacity: 0.45;
  transition: opacity var(--dur-slower);
}
.ob-handoff__list li.is-done .ob-handoff__dot {
  background-image: url('/assets/icons/check-blue.svg');
  opacity: 1;
}
.ob-handoff__list li.is-done .ob-handoff__dot::after { content: none; }

/* 8. MitID-knappen i deres egen blaa. Farven findes ikke som token,
      og der er ingen People's-farve, der maa bruges til en anden
      parts login-knap. Logo og varemaerke bruges fortsat IKKE. */
.ob-mitidknap {
  --mitid-blaa: #0060E6;
  --mitid-blaa-moerk: #0052C4;
  background: var(--mitid-blaa);
}
.ob-mitidknap:hover { background: var(--mitid-blaa-moerk); }
.ob-mitidknap__mark::after { background: var(--mitid-blaa); }

/* ============================================================
   Kvittering - 0 kr. er hovedbudskabet
   Samme formsprog som prisboksene: 4 px ramme, xl-skygge.
   Rigtigt flueben fra designsystemets ikonmappe.
   ============================================================ */
.ob-receipt {
  border: 4px solid var(--color-lavender-700);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  background: var(--grad-pro-card);
  padding: var(--space-10) var(--space-7) var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-align: center;
}
.ob-receipt__mark {
  width: var(--space-12);
  height: var(--space-12);
  background: no-repeat center / contain;
  background-image: url('/assets/icons/check-blue.svg');
  margin-bottom: var(--space-3);
}
.ob-receipt__eyebrow {
  font-size: var(--text-xs);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--color-periwinkle-900);
  font-weight: 500;
  margin: 0;
}
.ob-receipt__tal {
  font-size: var(--text-h2-tight);
  line-height: var(--lh-tight);
  font-weight: 500;
  color: var(--color-navy-900);
  letter-spacing: var(--track-tight);
  margin: 0;
}
.ob-receipt__forsikring {
  font-size: var(--text-md);
  color: var(--color-navy-400);
  line-height: var(--lh-prose);
  margin: var(--space-1) 0 var(--space-5);
  max-width: 34ch;
}
.ob-receipt dl {
  width: 100%;
  margin: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-lavender-700);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  text-align: left;
}
.ob-receipt h2 { display: none; }
.ob-receipt h2::before, .ob-receipt h2::after { content: none; }

/* ============================================================
   RETTELSE: overleveringsskaerm
   - groen cirkel BAG ikonet fjernes helt
   - raekker venstrestilles i en centreret blok, ikke hver for sig
   - lysere baggrund
   ============================================================ */
.ob-flow .form-card.ob-handoff {
  background: var(--color-white);
  border-color: var(--color-lavender-300);
}
.ob-handoff__list {
  align-self: center;
  width: auto;
  max-width: none;
}
.ob-handoff__list li {
  justify-content: flex-start;
  background: none;
}
.ob-handoff__list li.is-done .ob-handoff__dot,
.ob-handoff__dot {
  background-color: transparent;
  border: 0;
  animation: none;
}
.ob-handoff__puls.is-faerdig {
  background-color: transparent;
  border-color: transparent;
}

/* RETTELSE: afkrydsningsraekker klaebede sammen. Fast raekkehoejde
   og luft imellem, saa de laeses som to selvstaendige valg. */
.ob-tilvalg { gap: var(--space-3); padding: var(--space-4); }
.ob-tilvalg .ob-consent {
  padding: 0;
  min-height: var(--space-6);
  align-items: center;
}
.ob-tilvalg .ob-consent__text { line-height: var(--lh-snug); }

/* RETTELSE: pladsblokken skal have samme lette baggrund som de
   oevrige samlede blokke, saa status og tilvalg laeses som ét. */
.ob-pladsblok {
  background: var(--color-lavender-50);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  gap: var(--space-3);
}
.ob-pladsblok .ob-consent { min-height: var(--space-6); align-items: center; }

/* Trinvisningen taettere paa kortet */
.ob-progress--bund { padding-block: 0 var(--space-10); }
.ob-main { padding-bottom: var(--space-4); }

/* Diskret demoknap: udfylder en gyldig partnerkode */
.ob-partnerkode__raekke { display: flex; align-items: center; gap: var(--space-2); }
.ob-partnerkode__raekke .ob-f { flex: 1; min-width: 0; }
.ob-autofyld {
  flex: 0 0 auto;
  background: none;
  border: 1px solid var(--color-lavender-700);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  font-family: inherit;
  font-size: var(--text-xs);
  color: var(--color-periwinkle-700);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.ob-autofyld:hover { border-color: var(--color-periwinkle-500); color: var(--color-navy-900); }
.ob-autofyld:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }
body.ob-hide-notes .ob-autofyld { display: none; }

/* Manuel vej: lys blaa, ved siden af hent-knappen */
.ob-manuel {
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--color-periwinkle-700);
  cursor: pointer;
  text-decoration: underline;
}
.ob-manuel:hover { color: var(--color-periwinkle-900); }
.ob-manuel:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); border-radius: var(--radius-sm); }

/* RETTELSE: auto-udfyld ligger INDE i partnerkode-feltet, ikke ved siden af */
.ob-partnerkode__raekke { position: relative; display: block; }
.ob-partnerkode__raekke .ob-f { flex: none; }
.ob-partnerkode__raekke .ob-f input { padding-right: 122px; }
.ob-autofyld {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-periwinkle-700);
  background: none;
}
.ob-autofyld:hover { color: var(--color-periwinkle-900); text-decoration: underline; }

/* RETTELSE: raekkerne i en tilvalgsblok skal have luft, ogsaa naar
   teksten bryder til to linjer. Skillelinje goer parret laesbart. */
.ob-tilvalg { gap: 0; padding: var(--space-2) var(--space-4); }
.ob-tilvalg .ob-consent {
  padding: var(--space-3) 0;
  min-height: 0;
  align-items: flex-start;
}
.ob-tilvalg .ob-consent input { margin-top: 1px; }
.ob-tilvalg .ob-consent__text { line-height: var(--lh-prose); }

/* 9. Konsekvent 5 px mindre luft under skaermoverskriften. */
.ob-shell h1 { margin-bottom: calc(var(--space-4) - 5px); }
.ob-shell__lead { margin-top: 0; }

/* ============================================================
   Indlejret betaling - Stripes formsprog, ingen Stripe
   ============================================================ */
.ob-betaling__top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-navy-400);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-lavender-300);
}
.ob-betaling__laas {
  width: 14px; height: 16px; flex: 0 0 auto;
  background: var(--color-navy-400);
  clip-path: polygon(15% 45%, 15% 30%, 25% 18%, 50% 12%, 75% 18%, 85% 30%, 85% 45%,
                     72% 45%, 72% 32%, 65% 25%, 50% 22%, 35% 25%, 28% 32%, 28% 45%);
  position: relative;
}
.ob-betaling__laas::after {
  content: ''; position: absolute; inset: 45% 5% 0;
  background: var(--color-navy-400);
  border-radius: 2px;
  clip-path: none;
}
.ob-betaling__demo {
  margin-left: auto;
  font-size: var(--text-xs);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--color-periwinkle-900);
  background: var(--color-lavender-50);
  border-radius: var(--radius-pill);
  padding: 2px var(--space-3);
}
.ob-3ds {
  border: 1.5px solid var(--color-periwinkle-500);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: center;
}
.ob-3ds__label {
  font-size: var(--text-xs);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--color-periwinkle-900);
  font-weight: 500;
  margin: 0;
}
.ob-3ds p { font-size: var(--text-sm); color: var(--color-navy-400); margin: 0; }
.ob-testkort {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-lavender-300);
  font-size: var(--text-xs);
  color: var(--color-periwinkle-700);
}
.ob-testkort__knap {
  background: none;
  border: 1px solid var(--color-lavender-700);
  border-radius: var(--radius-pill);
  padding: 2px var(--space-3);
  font-family: inherit;
  font-size: var(--text-xs);
  color: var(--color-periwinkle-700);
  cursor: pointer;
}
.ob-testkort__knap:hover { border-color: var(--color-periwinkle-500); color: var(--color-navy-900); }
body.ob-hide-notes .ob-testkort { display: none; }

/* ============================================================
   Platformen som underlag - genopbygget, ikke et skaermbillede
   ============================================================ */
.ob-shell:has(.pf) { max-width: none; }
.pf {
  position: fixed;
  inset: 0;
  background: var(--color-lavender-50);
  overflow: hidden;
  filter: blur(2px);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.pf__top {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-lavender-300);
  padding: var(--space-4) var(--space-8);
  display: flex; align-items: center; gap: var(--space-6);
}
.pf__logo {
  font-size: var(--text-md); font-weight: 500;
  color: var(--color-navy-900); letter-spacing: var(--track-tight);
}
.pf__klinik {
  margin-left: auto; font-size: var(--text-sm); color: var(--color-navy-400);
  background: var(--color-lavender-50);
  border: 1px solid var(--color-lavender-300);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-5);
}
.pf__klinik strong { color: var(--color-navy-900); font-weight: 500; }
.pf__bruger { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.pf__avatar {
  width: var(--space-8); height: var(--space-8);
  border-radius: var(--radius-pill);
  background: var(--color-navy-900); color: var(--color-white);
  display: grid; place-items: center; font-size: var(--text-sm);
}
.pf__krop {
  display: grid; grid-template-columns: 240px 1fr 1fr;
  gap: var(--space-8); padding: var(--space-8);
}
.pf__rail { display: flex; flex-direction: column; gap: var(--space-3); }
.pf__navpunkt {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  font-size: var(--text-sm); color: var(--color-navy-700);
}
.pf__navpunkt.is-aktiv { background: var(--color-navy-900); color: var(--color-white); }
.pf__railbund {
  margin-top: var(--space-16);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-4);
  font-size: var(--text-sm); color: var(--color-navy-700);
}
.pf__midt h2, .pf__hoejre h2 {
  font-size: var(--text-h4); font-weight: 500;
  color: var(--color-navy-900); margin: 0 0 var(--space-5);
}
.pf__kort {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.pf__felt {
  border: 1.5px solid var(--color-lavender-300);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm); color: var(--color-periwinkle-700);
}
.pf__felt--hoej { min-height: var(--space-16); }
.pf__upload {
  border: 1.5px dashed var(--color-lavender-700);
  border-radius: var(--radius-sm);
  padding: var(--space-5); text-align: center;
  font-size: var(--text-sm); color: var(--color-navy-400);
}
.pf__label { font-size: var(--text-sm); color: var(--color-navy-700); }
.pf__knap {
  background-image: var(--grad-btn-primary);
  color: var(--color-white);
  border-radius: var(--radius-pill);
  padding: var(--space-4);
  text-align: center;
  font-size: var(--text-sm); font-weight: 700;
  letter-spacing: var(--track-wide);
}
.pf__tabel { background: var(--color-white); border-radius: var(--radius-lg); padding: var(--space-5); }
.pf__tr {
  display: grid; grid-template-columns: 1fr auto 1.4fr;
  gap: var(--space-4); align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-lavender-50);
  font-size: var(--text-sm); color: var(--color-navy-700);
}
.pf__tr--hoved { color: var(--color-navy-400); font-size: var(--text-xs); text-transform: uppercase; }
.pf__badge {
  font-size: var(--text-xs); border-radius: var(--radius-pill);
  padding: 2px var(--space-3); text-align: center;
}
.pf__badge--venter { background: #FDF0DC; color: #8A5A12; }
.pf__badge--igang { background: var(--color-lavender-100); color: var(--color-periwinkle-900); }
.pf__badge--tom { background: none; color: var(--color-navy-400); padding-left: 0; text-align: left; }

/* ---------- Velkomstmodal ---------- */
.pf-modal {
  position: fixed; inset: 0; z-index: 10;
  display: grid; place-items: center;
  padding: var(--space-6);
  background: color-mix(in srgb, var(--color-navy-900) 22%, transparent);
}
.pf-modal__kort {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-10) var(--space-8) var(--space-8);
  max-width: 460px; width: 100%;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-3); text-align: center;
  animation: ob-modal-ind 320ms var(--ease-out);
}
@keyframes ob-modal-ind {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.pf-modal__mark {
  width: var(--space-12); height: var(--space-12);
  background: no-repeat center / contain;
  background-image: url('/assets/icons/check-blue.svg');
  margin-bottom: var(--space-1);
}
.pf-modal__kort h1 {
  font-size: var(--text-h4); font-weight: 500;
  color: var(--color-navy-900); margin: 0;
  letter-spacing: var(--track-tight);
}
.pf-modal__lead {
  font-size: var(--text-md); color: var(--color-navy-400);
  margin: 0 0 var(--space-3); line-height: var(--lh-prose);
}
.pf-modal__opgave {
  width: 100%;
  background: var(--color-lavender-50);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.pf-modal__opgave-titel {
  font-size: var(--text-md); font-weight: 500;
  color: var(--color-navy-900); margin: 0;
}
.pf-modal__opgave p { font-size: var(--text-sm); color: var(--color-navy-400); margin: 0; }
.pf-modal__opgave .btn { margin-top: var(--space-2); }
.pf-modal__hjaelp {
  width: 100%;
  display: flex; align-items: center; gap: var(--space-3);
  border: 1px solid var(--color-lavender-300);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  text-align: left;
}
.pf-modal__hjaelp-ikon {
  width: var(--space-8); height: var(--space-8); flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--color-lavender-100);
  position: relative;
}
.pf-modal__hjaelp-ikon::after {
  content: '?';
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--color-periwinkle-900);
  font-weight: 500; font-size: var(--text-md);
}
.pf-modal__hjaelp-tekst { flex: 1; display: flex; flex-direction: column; }
.pf-modal__hjaelp-tekst strong {
  font-size: var(--text-sm); font-weight: 500; color: var(--color-navy-900);
}
.pf-modal__hjaelp-tekst span { font-size: var(--text-xs); color: var(--color-navy-400); }
.pf-modal__hjaelp .btn { flex: 0 0 auto; }

@media (max-width: 900px) {
  .pf__krop { grid-template-columns: 1fr; }
  .pf__rail, .pf__hoejre { display: none; }
}

/* ============================================================
   Velkomst-splash - ingen felter, ingen partnerkode
   ============================================================ */


/* Splash-punkter: hvad man faar, ikke hvad man skal huske */


/* RETTELSE: fed og almindelig tekst blev til to flex-kolonner.
   Grid med ikon i foerste kolonne og teksten samlet i anden. */


/* Overdragelse: kollega skal administrere */
.ob-overdrag {
  display: flex; flex-direction: column; gap: var(--space-4);
  background: var(--color-lavender-50);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
}


/* RETTELSE: splashens padding blev nulstillet. Hoejere specificitet
   og fast kolonnebredde, saa kortet ikke flyder ud. */


/* 10. 2 px ekstra luft under ledeteksten. */
.ob-legend { padding-bottom: 6px; }

/* ============================================================
   Kontaktside - varm, menneskelig, ikke en blindgyde
   ============================================================ */
.ob-hotline {
  background: var(--color-white);
  border: 4px solid var(--color-lavender-300);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-10) var(--space-8) var(--space-8);
  max-width: 520px;
  margin-inline: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}
.ob-hotline__folk { display: flex; gap: var(--space-6); margin-bottom: var(--space-1); }
.ob-hotline__person { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.ob-hotline__person img {
  width: var(--space-20);
  height: var(--space-20);
  border-radius: var(--radius-pill);
  object-fit: cover;
  border: 3px solid var(--color-white);
  box-shadow: var(--shadow-md);
}
.ob-hotline__person figcaption { display: flex; flex-direction: column; }
.ob-hotline__person strong {
  font-size: var(--text-sm); font-weight: 500; color: var(--color-navy-900);
}
.ob-hotline__person span { font-size: var(--text-xs); color: var(--color-navy-400); }

.ob-hotline h1 {
  font-size: calc(var(--text-h3) + 6px);
  font-weight: 500; color: var(--color-navy-900);
  letter-spacing: var(--track-tight); line-height: var(--lh-heading);
  margin: 0;
}
.ob-hotline__lead {
  font-size: var(--text-md); color: var(--color-navy-400);
  line-height: var(--lh-prose); margin: 0 0 var(--space-2);
}
.ob-hotline__nummer {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-5);
  background-image: var(--grad-btn-primary);
  color: var(--color-white);
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-size: var(--text-h4);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  box-shadow: var(--shadow-btn-primary);
  transition: transform var(--dur-fast);
}
.ob-hotline__nummer:hover { transform: translateY(-1px); }
.ob-hotline__ikon {
  width: 22px; height: 22px; flex: 0 0 auto;
  background: var(--color-white);
  clip-path: polygon(22% 8%, 40% 8%, 48% 30%, 38% 42%, 58% 62%, 70% 52%, 92% 60%, 92% 78%,
                     78% 92%, 46% 80%, 20% 54%, 8% 22%);
}
.ob-hotline__tid { font-size: var(--text-sm); color: var(--color-navy-400); margin: 0; }
.ob-hotline__eller {
  font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: var(--track-wider); color: var(--color-periwinkle-700);
  display: flex; align-items: center; gap: var(--space-4);
  width: 100%; margin: var(--space-2) 0;
}
.ob-hotline__eller::before, .ob-hotline__eller::after {
  content: ''; flex: 1; height: 1px; background: var(--color-lavender-300);
}
.ob-hotline__alt {
  width: 100%;
  background: var(--color-lavender-50);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.ob-hotline__alt p { font-size: var(--text-sm); color: var(--color-navy-400); margin: 0; }

/* ============================================================
   Splash: stoerre, roligere, mere luft omkring det vigtige
   ============================================================ */


/* ============================================================
   Stripe-simulering - tydeligt maerket
   Navnet bruges beskrivende for at fortaelle, hvad der efterlignes.
   Der er ingen integration, ingen noegler og intet netvaerk.
   ============================================================ */
.ob-stripebanner {
  --stripe-lilla: #635BFF;
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  background: color-mix(in srgb, var(--stripe-lilla) 7%, var(--color-white));
  border: 1px solid color-mix(in srgb, var(--stripe-lilla) 25%, var(--color-white));
  border-radius: var(--radius-sm);
  padding: var(--space-4);
}
.ob-stripebanner__ord {
  flex: 0 0 auto;
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--stripe-lilla);
  line-height: 1.2;
}
.ob-stripebanner__tekst { display: flex; flex-direction: column; gap: 2px; }
.ob-stripebanner__tekst strong {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-navy-900);
}
.ob-stripebanner__tekst span {
  font-size: var(--text-xs);
  color: var(--color-navy-400);
  line-height: var(--lh-prose);
}

/* Initialer, hvor der ikke findes et portraet */
.ob-hotline__initialer {
  width: var(--space-20);
  height: var(--space-20);
  border-radius: var(--radius-pill);
  background: var(--grad-btn-primary);
  color: var(--color-white);
  display: grid;
  place-items: center;
  font-size: var(--text-h4);
  font-weight: 500;
  border: 3px solid var(--color-white);
  box-shadow: var(--shadow-md);
}
.ob-hotline__folk { flex-wrap: wrap; justify-content: center; gap: var(--space-5); }

/* ============================================================
   Velkomstmodal - enkel, punchy, uden demo-baelte
   ============================================================ */
body.ob-fuldskaerm .ob-demobar,
body.ob-fuldskaerm .ob-top { display: none; }
body.ob-fuldskaerm .ob-main { padding: 0; }

.pf-modal {
  position: fixed; inset: 0; z-index: 20;
  display: grid; place-items: center;
  padding: var(--space-6);
  background: color-mix(in srgb, var(--color-navy-900) 30%, transparent);
  backdrop-filter: blur(3px);
}
.pf-modal__kort {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(19, 25, 44, 0.22);
  padding: var(--space-12) var(--space-10) var(--space-8);
  max-width: 440px; width: 100%;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-4); text-align: center;
  animation: ob-modal-ind 420ms var(--ease-out);
}
.pf-modal__mark {
  width: var(--space-16); height: var(--space-16);
  background: no-repeat center / contain;
  background-image: url('/assets/icons/check-blue.svg');
  animation: ob-pop 500ms var(--ease-out) 120ms backwards;
}
.pf-modal__kort h1 {
  font-size: clamp(30px, 5vw, 38px);
  font-weight: 500; color: var(--color-navy-900);
  letter-spacing: -0.02em; line-height: 1.1; margin: 0;
}
/* Hilsenen brydes ikke. Skriftstoerrelsen giver efter i stedet, saa
   "Velkommen til People's Clinic" bliver staaende paa én linje. */
.pf-modal__hilsen {
  white-space: nowrap;
  font-size: clamp(16px, 5vw, 28px);
}
.pf-modal__lead {
  font-size: var(--text-md); color: var(--color-navy-400);
  margin: 0 0 var(--space-3); line-height: var(--lh-prose);
}
.pf-modal__lead strong { color: var(--color-navy-900); font-weight: 500; }

.pf-modal__opgave {
  width: 100%;
  background: var(--color-lavender-50);
  border-radius: var(--radius-sm);
  padding: var(--space-6) var(--space-5) var(--space-5);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
}
.pf-modal__tal {
  font-size: 44px; line-height: 1; font-weight: 500;
  color: var(--color-periwinkle-900); letter-spacing: -0.03em;
}
.pf-modal__opgave-titel {
  font-size: var(--text-sm); color: var(--color-navy-400);
  margin: 0 0 var(--space-3);
}
.pf-modal__opgave .btn { width: 100%; }

.pf-modal__hjaelp {
  width: 100%;
  display: flex; align-items: center; gap: var(--space-3);
  border: 1px solid var(--color-lavender-300);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  text-align: left; text-decoration: none;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.pf-modal__hjaelp:hover {
  border-color: var(--color-periwinkle-500);
  background: var(--color-lavender-50);
}
/* Ikoner: samme opsaetning som designsystemets .icon. */
.ob-ikon {
  width: 1em; height: 1em;
  display: block; flex-shrink: 0;
  fill: none; stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.pf-modal__pil {
  margin-left: auto; flex: 0 0 auto;
  font-size: var(--space-5);
  color: var(--color-periwinkle-900);
}

/* Splash: partnerlogo og korte punkter */


/* Hjaelpestribe under splash-kortet */


/* ============================================================
   Splash med produktbillede - kortet viser, hvad man faar
   ============================================================ */


/* ============================================================
   Splash: roligt farvebaand i stedet for et stoejende billede
   ============================================================ */



/* ============================================================
   VELKOMST-SKAERM
   Bygget som prisboksen paa /priser (.pricing-card.card-pro):
   4 px ramme, 30 px radius, tonet gradient og badge paa kanten.
   Alle vaerdier er tokens. Én blok - ingen lag ovenpaa lag.
   ============================================================ */
body.ob-body:has(.ob-velkomst) {
  background: var(--grad-hero-light), var(--color-lavender-50);
}

.ob-velkomst {
  max-width: 520px;
  margin-inline: auto;
  animation: ob-ind 520ms var(--ease-out) both;
}
@keyframes ob-ind {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Kortet ---- */
.ob-kort {
  position: relative;
  border: 4px solid var(--color-lavender-700);
  border-radius: 30px;
  background-image: var(--grad-pro-card);
  box-shadow: var(--shadow-xl);
  padding: var(--space-12) var(--space-10) var(--space-10);
  display: flex;
  flex-direction: column;
  text-align: left;
}

/* Badge paa kortets overkant - som .plans-badge */
.ob-kort__badge {
  position: absolute;
  top: calc(var(--space-4) * -1);
  left: 50%;
  transform: translateX(-50%);
  background: var(--grad-btn-primary);
  color: var(--color-white);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

/* Partner-lockup */
.ob-kort__partner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
}
.ob-kort__partner span {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--color-navy-400);
}
.ob-kort__partner img { height: var(--space-6); width: auto; }

.ob-kort h1 {
  font-size: clamp(28px, 4.5vw, 38px);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: var(--track-tight);
  color: var(--color-navy-900);
  margin: 0;
}
.ob-kort__lead {
  font-size: var(--text-md);
  line-height: var(--lh-prose);
  color: var(--color-navy-400);
  margin: var(--space-2) 0 0;
}

/* Punkter - samme rytme som .card-features */
.ob-kort__punkter {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.ob-kort__punkter li {
  position: relative;
  padding-left: var(--space-7);
  font-size: var(--text-base);
  line-height: var(--lh-prose);
  color: var(--color-navy-500);
}
.ob-kort__punkter li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: var(--space-4);
  height: var(--space-4);
  background: url('/assets/icons/check-blue.svg') no-repeat center / contain;
}

.ob-kort .btn { width: 100%; justify-content: center; }
.ob-kort__under {
  display: block;
  margin-top: var(--space-3);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-navy-400);
}

/* ---- Hjaelpestribe under kortet ---- */
.ob-hjaelp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  max-width: var(--ob-kolonne, 520px);
  margin: var(--space-6) auto 0;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background var(--dur-fast);
}
.ob-hjaelp:hover { background: var(--color-lavender-100); }
.ob-hjaelp__folk { display: flex; flex: 0 0 auto; }
.ob-hjaelp__folk img,
.ob-hjaelp__folk span {
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-pill);
  object-fit: cover;
  border: 2px solid var(--color-lavender-50);
  margin-left: calc(var(--space-3) * -1);
  flex: 0 0 auto;
}
.ob-hjaelp__folk > :first-child { margin-left: 0; }
.ob-hjaelp__folk span {
  background: var(--grad-btn-primary);
  color: var(--color-white);
  display: grid;
  place-items: center;
  font-size: var(--text-sm);
  font-weight: 500;
}
.ob-hjaelp__tekst {
  font-size: var(--text-sm);
  color: var(--color-navy-400);
}
.ob-hjaelp__tekst strong {
  font-weight: 500;
  color: var(--color-navy-900);
}

/* ---- Kvitteringsskaerm (linket sendt) - samme kort, uden gradient ---- */
.ob-kort--ren {
  background-image: none;
  background-color: var(--color-white);
  align-items: center;
  text-align: center;
}
.ob-kort--ren .ob-kort__mark {
  width: var(--space-12);
  height: var(--space-12);
  margin-bottom: var(--space-4);
  background: url('/assets/icons/check-blue.svg') no-repeat center / contain;
}
.ob-kort--ren .ob-kort__lead { max-width: 34ch; }

@media (max-width: 640px) {
  .ob-kort { padding: var(--space-10) var(--space-6) var(--space-8); border-radius: var(--radius-lg); }
  .ob-hjaelp { flex-direction: column; gap: var(--space-2); text-align: center; }
}

/* ============================================================
   SCROLLBARE FLADER - det skal kunne ses, at listen fortsaetter
   To signaler, begge uden JavaScript:
   1. En synlig, smal scrollbar i stedet for macOS' overlay, der er skjult
      indtil man ruller.
   2. Klassisk scroll-shadow: gradient-lag med background-attachment local
      ligger oven paa lag med scroll. Naar man er i toppen eller bunden,
      daekker local-laget skyggen. Ellers ses den. Ingen maerkat, ingen pil -
      bare kanten, der viser at der er mere.
   ============================================================ */
.ob-rul,
.ob-vaelg__liste,
.ob-agreement,
.ob-panel,
.ob-data {
  scrollbar-width: thin;
  scrollbar-color: var(--color-periwinkle-500) transparent;
  overscroll-behavior: contain;
}
.ob-rul::-webkit-scrollbar,
.ob-vaelg__liste::-webkit-scrollbar,
.ob-agreement::-webkit-scrollbar,
.ob-panel::-webkit-scrollbar,
.ob-data::-webkit-scrollbar { width: var(--space-2); }

.ob-rul::-webkit-scrollbar-track,
.ob-vaelg__liste::-webkit-scrollbar-track,
.ob-agreement::-webkit-scrollbar-track,
.ob-panel::-webkit-scrollbar-track,
.ob-data::-webkit-scrollbar-track { background: transparent; }

.ob-rul::-webkit-scrollbar-thumb,
.ob-vaelg__liste::-webkit-scrollbar-thumb,
.ob-agreement::-webkit-scrollbar-thumb,
.ob-panel::-webkit-scrollbar-thumb,
.ob-data::-webkit-scrollbar-thumb {
  background: var(--color-periwinkle-500);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}
.ob-rul::-webkit-scrollbar-thumb:hover,
.ob-vaelg__liste::-webkit-scrollbar-thumb:hover,
.ob-agreement::-webkit-scrollbar-thumb:hover {
  background: var(--color-periwinkle-900);
  background-clip: padding-box;
}

/* Skyggerne. Kraever en ugennemsigtig baggrundsfarve paa fladen. */
.ob-vaelg__liste,
.ob-agreement {
  background-image:
    linear-gradient(var(--color-white) 40%, transparent),
    linear-gradient(transparent, var(--color-white) 60%),
    radial-gradient(farthest-side at 50% 0, var(--alpha-navy-08), transparent),
    radial-gradient(farthest-side at 50% 100%, var(--alpha-navy-08), transparent);
  background-position: 0 0, 0 100%, 0 0, 0 100%;
  background-size: 100% var(--space-6), 100% var(--space-6), 100% var(--space-3), 100% var(--space-3);
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}

/* ============================================================
   DÆMPET BEKRÆFTELSE
   Designsystemets --color-success (#22C55E) er en trafiklys-groen. Den
   raaber i et flow, hvor bekraeftelsen bare skal bekraefte. Her blandes den
   ned mod navy, saa den bliver en rolig, dyb groen i familie med paletten.
   Overskrivningen er lokal for prototypen - designsystemet roeres ikke - og
   rammer hvert sted paa én gang: partnerkode, handoff-prikker, kvittering.
   ============================================================ */
:root { --ob-success-raa: var(--color-success); }
.ob-body {
  --color-success: color-mix(in srgb, var(--ob-success-raa) 48%, var(--color-navy-900));
}

/* Partnerkode-boksen: naesten hvid flade, kant i lavender i stedet for groen. */
.ob-partnerkode.is-bekraeftet {
  background: color-mix(in srgb, var(--color-success) 5%, var(--color-white));
  border-color: var(--color-lavender-700);
}

/* ============================================================
   RULLE-INDIKATOR
   En hvid bjaelke med en lille pil nederst i fladen. Den siger, at der er
   mere at se. Sticky, saa den bliver liggende paa kanten mens man ruller,
   og skjules af klassen kan-rulle, som JS fjerner, naar bunden er naaet.
   ============================================================ */
.ob-rulmere { display: none; }
.kan-rulle > .ob-rulmere {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: sticky;
  bottom: calc(var(--space-2) * -1);
  z-index: 2;
  height: var(--space-10);
  margin: calc(var(--space-10) * -1) calc(var(--space-2) * -1) calc(var(--space-2) * -1);
  padding-bottom: var(--space-2);
  background: linear-gradient(to bottom,
    transparent 0%,
    color-mix(in srgb, var(--color-white) 85%, transparent) 45%,
    var(--color-white) 100%);
  border-radius: 0 0 calc(var(--radius-sm) - 2px) calc(var(--radius-sm) - 2px);
  cursor: pointer;
  pointer-events: auto;
}
.kan-rulle > .ob-rulmere .ob-ikon {
  color: var(--color-periwinkle-900);
  animation: ob-rulnik 1.8s var(--ease-out) 3;
  pointer-events: none;
}
.kan-rulle > .ob-rulmere:hover .ob-ikon { color: var(--color-navy-900); }

@keyframes ob-rulnik {
  0%, 60%, 100% { transform: none; }
  75% { transform: translateY(3px); }
}

/* Fladen faar plads, saa bjaelken ikke daekker det sidste punkt. */
.ob-vaelg__liste.kan-rulle { padding-bottom: var(--space-8); }
.ob-agreement.kan-rulle { padding-bottom: var(--space-10); }

/* ============================================================
   INVITER-MODALEN
   Velkomstkortet er en fejring: centreret, stor overskrift, ét element ad
   gangen. Denne er en formular. Den arver kortet, men skifter til fuld
   bredde og en fast rytme - ellers stod feltet indsnaevret i midten, mens
   knappen fyldte hele bredden, og "Tilfoej endnu en" hang i venstre kant.
   ============================================================ */
.pf-modal__kort--bred {
  align-items: stretch;
  text-align: left;
  gap: 0;
  padding: var(--space-10);
}
.pf-modal__kort--bred h1 {
  font-size: clamp(22px, 4vw, 28px);
  text-align: center;
}
.pf-modal__kort--bred .pf-modal__lead {
  text-align: center;
  margin: var(--space-2) 0 var(--space-6);
}

/* Felterne fylder kortet ud. */
.pf-modal__kort--bred .ob-invites {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.pf-modal__kort--bred .ob-invite { width: 100%; }
.pf-modal__kort--bred .ob-invite .ob-field { width: 100%; }
.pf-modal__kort--bred .form-card__field { width: 100%; }
.pf-modal__kort--bred input { width: 100%; }

.pf-modal__kort--bred .ob-tilfoej {
  align-self: flex-start;
  margin-top: var(--space-3);
}
.pf-modal__kort--bred .form-card__msg { margin: var(--space-3) 0 0; }

.pf-modal__kort--bred .btn { margin-top: var(--space-6); }
.pf-modal__kort--bred .ob-back { margin-top: var(--space-3); }

/* Kvitteringen: adresserne som en rolig liste, ikke punkttegn. */
.pf-modal__liste {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: var(--space-4) var(--space-5);
  background: var(--color-lavender-50);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: left;
  font-size: var(--text-sm);
  color: var(--color-navy-700);
  width: 100%;
}


/* ============================================================
   IKONER
   Symbolerne er hentet ordret fra designsystemets sprite. <use> arver ikke
   sprite-rodens praesentationsattributter, saa fill og stroke skal saettes
   her - ellers tegner browseren stregen som en fyldt flade. Farven styres
   med color, saa ikonet foelger teksten omkring sig.
   ============================================================ */
.ob-ikon {
  width: var(--space-5);
  height: var(--space-5);
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ob-ikon--lille { width: var(--space-4); height: var(--space-4); }

/* Felter, der ligger paa en tonet flade, skal staa hvide - ellers gaar de i
   ét med panelet under sig. Grundreglen er tre klasser dyb, saa den maa
   matches for at kunne overskrives. */
.ob-flow .form-card .ob-overdrag .form-card__field.ob-f input,
.ob-flow .form-card .ob-pladsblok .form-card__field.ob-f input,
.pf-modal .form-card__field.ob-f input {
  background: var(--color-white);
}

/* ============================================================
   CVR-FELT MED FUSIONERET KNAP
   Feltet og "Hent oplysninger" hoerer sammen - de er nu ét kontrolelement
   i stedet for et felt med en knap under. Delt kant, ingen mellemrum.
   ============================================================ */
.ob-cvrfelt {
  position: relative;
}
.ob-cvrfelt__f {
  display: block;
  width: 100%;
}
.ob-flow .form-card .ob-cvrfelt .form-card__field.ob-f input {
  width: 100%;
  min-height: 48px;
  padding-right: 156px;
}

/* Knappen henter udseendet fra designsystemet (.btn--secondary: periwinkle
   gradient, hvid tekst, 700 + versaler). Kun stoerrelsen saettes her.
   Designsystemets 44 px touch-maal (WCAG 2.5.5) holdes af ::after, der
   udvider det klikbare omraade usynligt. Maalet er intakt, kun det
   synlige er mindre. */
.ob-cvrfelt__knap.btn {
  position: absolute;
  top: 50%;
  right: var(--space-2);
  transform: translateY(-50%);
  z-index: 1;
  min-height: 0;
  height: 30px;
  padding: 0 var(--space-3);
  font-size: 11px;
}
/* Usynlig udvidelse til 44 px klikomraade (WCAG 2.5.5). */
.ob-cvrfelt__knap.btn::after {
  content: '';
  position: absolute;
  inset: -7px -6px;
}

/* Smalle skaerme: kort etiket, saa der er plads til otte cifre ved siden af. */
@media (max-width: 560px) {
  .ob-flow .form-card .ob-cvrfelt .form-card__field.ob-f input { padding-right: 84px; }
  .ob-cvrfelt__lang { display: none; }
}

/* ============================================================
   BUNDLOGO
   Bittelille lockup i bunden af flowet - People's Clinic, og naar en
   partner er sat, deres logo ved siden af. Samme moenster som splash-
   kortets partner-linje, bare i footer-skala.
   ============================================================ */
.ob-bundlogo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin: var(--space-8) 0 var(--space-6);
  opacity: 0.8;
}
.ob-bundlogo__logo {
  /* Bundlogo 2026-09-01: den aegte on-dark-SVG, ingen filter-invertering
     (den gjorde brandfarverne graa). 54px = 15% mindre end 64. */
  height: 54px !important;
  width: auto !important;
  height: var(--space-4);
  width: auto;
  opacity: 0.85;
}
.ob-bundlogo__kryds {
  width: 1px;
  height: var(--space-7);
  background: var(--color-lavender-700);
}
.ob-bundlogo__partner {
  /* Hvid udgave paa den moerke flade, skaleret op 2026-09-03 saa den
     laeses som ligevaerdig med People's Clinic-lockup'et. */
  height: var(--space-8);
  width: auto;
}


/* ============================================================
   LICENSVAELGER (2026-09-01)
   Én stram raekke pr. pakke: navn, info-ikon, pris, antal.
   Hvem pakken anbefales til ligger i tooltip'et paa ikonet, saa
   raekken kan afkodes paa ét blik.
   ============================================================ */
.ob-licens {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-lavender-100);
}
.ob-licens:last-of-type { border-bottom: 0; }

.ob-holdtag {
  flex: 0 0 auto;
  font-size: 12px; font-weight: 500; letter-spacing: 0.01em;
  padding: 4px 11px; border-radius: 999px;
  background: var(--color-lavender-50); color: var(--color-periwinkle-900);
}
.ob-holdtag--pro { background: var(--color-navy-900); color: var(--color-white); }

/* Info-ikon med tooltip */
.ob-licens__info {
  position: relative; flex: 0 0 auto; cursor: help;
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-lavender-100); color: var(--color-periwinkle-900);
  font-size: 11px; font-weight: 500; font-style: normal; line-height: 1;
}
.ob-licens__info:focus-visible { outline: 2px solid var(--color-periwinkle-900); outline-offset: 2px; }
.ob-tip {
  position: absolute; left: 50%; bottom: calc(100% + 9px);
  transform: translateX(-50%) translateY(4px);
  width: max-content; max-width: 240px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--color-navy-900); color: var(--color-white);
  font-size: 12px; line-height: 1.45; font-weight: 400; text-align: left;
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 20;
  transition: opacity 140ms ease, transform 140ms ease;
  box-shadow: 0 12px 28px -10px rgba(19, 25, 44, 0.45);
}
.ob-tip strong { display: block; margin-bottom: 3px; font-weight: 500; color: var(--color-periwinkle-500); }
.ob-tip::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--color-navy-900);
}
.ob-licens__info:hover .ob-tip,
.ob-licens__info:focus-visible .ob-tip {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

.ob-licens__dig {
  flex: 0 0 auto; font-size: 12px; color: var(--color-periwinkle-900);
}
.ob-licens__pris {
  margin-left: auto; flex: 0 0 auto;
  font-size: 13px; color: var(--color-navy-500); white-space: nowrap;
}
/* Basis-stepperen er et grid bygget til et <input>. Her er tallet et
   <span>, saa den lille variant koeres som flex med lodret centrering -
   ellers staar tallet hoejere end plus og minus. */
.ob-stepper--lille {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 0;
  grid-template-columns: none;
}
.ob-stepper--lille button {
  width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center;
  font-size: 15px; line-height: 1;
}
.ob-stepper--lille .ob-holdraekke__tal {
  display: grid; place-items: center;
  height: 34px; min-width: 34px;
  font-size: 16px; font-weight: 500; line-height: 1;
  color: var(--color-navy-900);
}

@media (max-width: 560px) {
  .ob-licens { flex-wrap: wrap; row-gap: 8px; }
  .ob-licens__pris { margin-left: 0; }
  .ob-stepper--lille { margin-left: auto; }
}


/* Licensraekkerne i ét grid, saa kolonnerne flugter mellem raekkerne.
   Pillerne faar samme bredde - ellers staar pris og stepper forskudt. */
.ob-licens {
  display: grid;
  grid-template-columns: auto 18px 1fr auto;
  align-items: center;
  column-gap: 14px;
  padding: 16px 0;
}
.ob-holdtag {
  min-width: 106px;
  text-align: center;
}
.ob-licens__pris { margin: 0; text-align: right; }

@media (max-width: 560px) {
  .ob-licens { grid-template-columns: auto 18px 1fr; row-gap: 10px; }
  .ob-licens .ob-stepper--lille { grid-column: 1 / -1; justify-self: end; }
}

/* ============================================================
   RETTELSER 2026-09-01 - laesbarhed paa den moerke flade.
   Ligger i komponenter.css, fordi den indlaeses SIDST og dermed
   vinder over prototype.css ved samme specificitet.
   ============================================================ */

/* Bundlogoet: den aegte on-dark-SVG skal staa rent. Filteret malede
   brandfarverne graa, og to lag opacity (0.85 x 0.8) gjorde det utydeligt. */
.ob-bundlogo { opacity: 1; }
.ob-bundlogo__logo {
  filter: none;
  opacity: 1;
  height: 54px;
  width: auto;
}
@media (max-width: 560px) { .ob-bundlogo__logo { height: 42px; } }

/* Hjaelpelinjen under kortet - fuld hvid, ingen gennemsigtighed. */
.ob-hjaelp,
.ob-hjaelp__tekst,
.ob-hjaelp__tekst strong { color: var(--color-white); opacity: 1; }

/* Skallen maa aldrig staa gennemsigtig. Trin-animationen koeres paa
   kortet og overskriften, ikke paa den wrapper der holder dem. */
.ob-shell { opacity: 1 !important; animation: none !important; }

/* Hover giver hjaelpelinjen en lys pille-baggrund, saa teksten skal
   vende tilbage til moerk. Den ubetingede hvide farve ovenfor gjaldt
   kun den moerke flade. */
.ob-hjaelp:hover,
.ob-hjaelp:focus-visible,
.ob-hjaelp:hover .ob-hjaelp__tekst,
.ob-hjaelp:focus-visible .ob-hjaelp__tekst,
.ob-hjaelp:hover .ob-hjaelp__tekst strong,
.ob-hjaelp:focus-visible .ob-hjaelp__tekst strong {
  color: var(--color-navy-900);
}

/* Trin-overgang. Ligger paa .ob-shells BOERN - overskrift og kort - i
   stedet for paa wrapperen. Wrapperen selv holdes paa opacity 1, saa en
   animation aldrig kan efterlade en hel skaerm usynlig.
   'forwards' frem for 'both': elementet er synligt indtil animationen
   starter. Med 'both' stod indholdet paa opacity 0 FOER start, og hvis
   animationen aldrig kom i gang - fx i en baggrundsfane - blev hele
   skaermen staaende usynlig. Robusthed slaar de faa millisekunder. */
@keyframes ob-trin-ind {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
/* Kun naar trinnet skifter - app.js saetter .ob-shell--ind.
   'backwards' holder from-tilstanden under forsinkelsen og lader
   elementet ende i sin naturlige, synlige tilstand bagefter. Det giver
   hverken blink ved start eller risiko for at blive staaende usynlig. */
.ob-shell--ind > * {
  animation: ob-trin-ind 420ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.ob-shell--ind > *:nth-child(2) { animation-delay: 70ms; }
.ob-shell--ind > *:nth-child(3) { animation-delay: 120ms; }

@media (prefers-reduced-motion: reduce) {
  .ob-shell--ind > * { animation: none; }
}

/* 20px mere luft over overskrift og kort - gaelder alle trin. */
.ob-main { padding-top: calc(var(--ob-blok, 32px) + 20px); }