/**
 * bli-medlem.css – Medlemsinnmelding-side
 * Bibliotekarforbundet 2026
 *
 * Gjenbruker .bf-hero, .bf-btn, .bf-verdi__check og tokens fra
 * designsystemet. Nye prefiks: .bm-* for sidespesifikke elementer.
 */

/* Sosialt bevis under subtittel – samme signatur som bullet-punktene
 * i fordels-clusterne: liten cut-corner-firkant som marker, lav-mælt
 * tekst. Plasseringen rett før CTA-ene gir validering i beslutnings-
 * øyeblikket uten å rope. */
/* Strammes inn mot ingressen og gis mer luft ned mot knappene.
 * Overskriver .bf-hero__subtitle sin margin-bottom bare i denne
 * konteksten (ikke globalt — index.html skal beholde sin spacing). */
.bm-hero .bf-hero__subtitle {
  margin-bottom: var(--bf-space-4);
}

.bm-hero__social {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-sm);
  line-height: 1.5;
  color: var(--bf-sort);
  margin-bottom: var(--bf-space-8);
  max-width: none;
}

/* Bullet flyter inline med teksten – ikke absolutt-posisjonert ved
 * venstre kant. Hvis teksten wrapper, vises bullet kun foran første
 * tegn på første linje; linje 2 begynner ved viewport-venstre uten
 * tomrom under bullet. */
.bm-hero__social::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 9px;
  height: 9px;
  margin-right: var(--bf-space-2);
  /* Visuell finjustering – sentrerer bullet mot tekstens x-høyde,
   * ikke baseline. */
  transform: translateY(-1px);
  background: var(--bf-sort);
  clip-path: polygon(0 0, 100% 0, 100% 60%, 60% 100%, 0 100%);
}

.bm-hero__social strong {
  font-weight: var(--bf-weight-bold);
}

/* ── Skjema-seksjon (Flyt-krem bakgrunn) ──────── */

.bm-skjema {
  background: var(--bf-flyt);
  padding: var(--bf-space-20) 0;
  scroll-margin-top: var(--bf-header-height);
}

.bm-skjema__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--bf-space-12);
}

.bm-skjema__kicker {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-regular);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bf-sort);
  /* Base-reglen p { max-width: 68ch } hindrer ellers sentrering – gjør
   * bredden auto og lar margin: 0 auto sentrere blokken. */
  max-width: none;
  margin: 0 auto var(--bf-space-3);
}

.bm-skjema__heading {
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-40);
  font-weight: var(--bf-weight-medium);
  line-height: 1.1;
  margin-bottom: var(--bf-space-4);
}

.bm-skjema__lead {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-lg);
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.7);
  margin: 0 auto;
  max-width: 48ch;
}

/* ── Progress-indikator (3 steg) ────────────────
 * Horisontal stripe med nummererte sirkler koblet med tynn linje.
 * Aktiv og fullført: Energi-gul bunn, sort tall. Inaktiv: hvit bunn
 * med grå kant. Linje mellom sirklene fargelegges opp til aktivt steg.
 */

.bm-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0 auto var(--bf-space-12);
  max-width: 640px;
  padding: 0;
  list-style: none;
  counter-reset: bm-step;
}

.bm-step {
  display: flex;
  align-items: center;
  gap: var(--bf-space-3);
  flex: 0 0 auto;
  position: relative;
  color: rgba(0, 0, 0, 0.5);
  transition: color var(--bf-transition-fast);
}

/* Linje mellom stegene – pseudo-element som strekker seg fra sirkelens
 * høyre kant til neste steg. Fargelegges når bm-step.is-done settes. */
.bm-step:not(:last-child)::after {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background: rgba(0, 0, 0, 0.15);
  margin: 0 var(--bf-space-3);
  transition: background var(--bf-transition-fast);
}

.bm-step.is-done:not(:last-child)::after {
  background: var(--bf-sort);
}

/* Nummersirkel: cut corner ved BR. 2-lags outline slik at kanten følger
 * diagonalen (border kuttes av clip-path – samme teknikk som
 * .bf-btn--outline). Ytre lag = kantfarge, ::before = innerfyll med
 * 0.88 px mindre kutt for uniform 1,5 px kanttykkelse.
 */
.bm-step__num {
  --cut: var(--bf-corner-cut);
  /* Min 50% sort: under det forsvinner diagonalkanten i anti-aliasing
   * selv om de rette kantene fortsatt er synlige (jf. designsystem § 5b). */
  --outer: rgba(0, 0, 0, 0.5);
  --inner: var(--bf-hvit);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--outer);
  color: rgba(0, 0, 0, 0.5);
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-base);
  font-weight: var(--bf-weight-bold);
  flex-shrink: 0;
  position: relative;
  isolation: isolate;
  clip-path: polygon(
    0 1px,
    1px 0,
    calc(100% - 1px) 0,
    100% 1px,
    100% calc(100% - var(--cut) - 1px),
    calc(100% - 0.71px) calc(100% - var(--cut) + 0.71px),
    calc(100% - var(--cut) + 0.71px) calc(100% - 0.71px),
    calc(100% - var(--cut) - 1px) 100%,
    1px 100%,
    0 calc(100% - 1px)
  );
  transition: background var(--bf-transition-fast),
              color var(--bf-transition-fast);
}

.bm-step__num::before {
  content: '';
  position: absolute;
  inset: 1.5px;
  background: var(--inner);
  z-index: -1;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - (var(--cut) - 0.88px) - 1px),
    calc(100% - 0.71px) calc(100% - (var(--cut) - 0.88px) + 0.71px),
    calc(100% - (var(--cut) - 0.88px) + 0.71px) calc(100% - 0.71px),
    calc(100% - (var(--cut) - 0.88px) - 1px) 100%,
    0 100%
  );
  transition: background var(--bf-transition-fast);
}

.bm-step.is-active .bm-step__num {
  --outer: var(--bf-sort);
  --inner: var(--bf-energi);
  color: var(--bf-sort);
}

.bm-step.is-active {
  color: var(--bf-sort);
}

.bm-step.is-done .bm-step__num {
  --outer: var(--bf-sort);
  --inner: var(--bf-sort);
  color: var(--bf-energi);
}

.bm-step.is-done {
  color: var(--bf-sort);
}

.bm-step__label {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-medium);
  white-space: nowrap;
}

@media (max-width: 480px) {
  .bm-step__label {
    display: none;
  }

  .bm-step:not(:last-child)::after {
    width: 40px;
  }
}

/* ── Rolle-indikator (vedvarende på tvers av skjema-stegene) ──
 * Liten chip øverst i skjemaet som hele veien minner brukeren om
 * hvilket medlemskaps-spor de er i (svaret fra steg 1). Vises fra
 * steg 2 og ut; JS i bli-medlem.js styrer synlighet + tekst. Leken-gul
 * knytter den til Medlemskap-sporet; 1 px-avrundet cut corner følger
 * BF-signaturen (samme polygon som .sm-pillar__media m.fl.). */
.bm-rolle {
  --cut: var(--bf-corner-cut);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--bf-space-2) var(--bf-space-4);
  margin: 0 0 var(--bf-space-8);
  padding: var(--bf-space-3) var(--bf-space-5);
  background: var(--bf-leken);
  font-family: var(--bf-font-body);
  clip-path: polygon(
    0 1px,
    1px 0,
    calc(100% - 1px) 0,
    100% 1px,
    100% calc(100% - var(--cut) - 1px),
    calc(100% - 0.71px) calc(100% - var(--cut) + 0.71px),
    calc(100% - var(--cut) + 0.71px) calc(100% - 0.71px),
    calc(100% - var(--cut) - 1px) 100%,
    1px 100%,
    0 calc(100% - 1px)
  );
}

.bm-rolle__label {
  font-size: var(--bf-text-sm);
  color: rgba(0, 0, 0, 0.62);
}

.bm-rolle__value {
  font-size: var(--bf-text-base);
  font-weight: var(--bf-weight-bold);
  color: var(--bf-sort);
}

/* «Endre» – tekstlenke-knapp, skyves til høyre kant av chipen. */
.bm-rolle__edit {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-bold);
  color: var(--bf-sort);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.bm-rolle__edit:hover {
  color: var(--bf-levende);
}


/* ── Skjema-container ──────────────────────────── */

.bm-form {
  max-width: 720px;
  margin: 0 auto;
  background: var(--bf-hvit);
  padding: var(--bf-space-12);
  border-radius: 1px;
  position: relative;
  /* Cut corner BR + 1 px avrunding på alle frie hjørner */
  --cut: var(--bf-corner-cut-lg);
  clip-path: polygon(
    0 1px,
    1px 0,
    calc(100% - 1px) 0,
    100% 1px,
    100% calc(100% - var(--cut) - 1px),
    calc(100% - 0.71px) calc(100% - var(--cut) + 0.71px),
    calc(100% - var(--cut) + 0.71px) calc(100% - 0.71px),
    calc(100% - var(--cut) - 1px) 100%,
    1px 100%,
    0 calc(100% - 1px)
  );
}

@media (max-width: 480px) {
  .bm-form {
    padding: var(--bf-space-8) var(--bf-space-5) var(--bf-space-10);
  }
}

/* Fjern standard fieldset-styling */
.bm-panel {
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: auto;
}

.bm-panel[hidden] {
  display: none;
}

.bm-panel.is-active {
  display: block;
}

.bm-panel__legend {
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-28);
  font-weight: var(--bf-weight-medium);
  line-height: 1.15;
  color: var(--bf-sort);
  margin-bottom: var(--bf-space-2);
  padding: 0;
}

.bm-panel__help {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-base);
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.7);
  margin-bottom: var(--bf-space-8);
  max-width: 52ch;
}

/* ── Radiogrid (steg 1) ─────────────────────────
 * Store klikkbare kort med tydelig hover/aktiv-state. Hver rad er
 * en <label> som wrapper input + visuell boks + tekst.
 */

.bm-radiogrid {
  display: grid;
  gap: var(--bf-space-3);
  margin-bottom: var(--bf-space-8);
}

.bm-radio {
  --cut: var(--bf-corner-cut-md);
  display: flex;
  align-items: flex-start;
  gap: var(--bf-space-4);
  padding: var(--bf-space-5) var(--bf-space-6);
  background: var(--bf-flyt);
  cursor: pointer;
  transition: background var(--bf-transition-fast),
              clip-path var(--bf-transition-fast);
  position: relative;
  border-radius: 1px;
}

.bm-radio:hover {
  background: var(--bf-leken);
  clip-path: polygon(
    0 1px,
    1px 0,
    calc(100% - 1px) 0,
    100% 1px,
    100% calc(100% - var(--cut) - 1px),
    calc(100% - 0.71px) calc(100% - var(--cut) + 0.71px),
    calc(100% - var(--cut) + 0.71px) calc(100% - 0.71px),
    calc(100% - var(--cut) - 1px) 100%,
    1px 100%,
    0 calc(100% - 1px)
  );
}

.bm-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Visuell radio-boks: kvadratisk med avkuttet hjørne BR (matcher sjekkboks
 * fra designsystemet). Kan virke ukonvensjonelt at radio ser firkantet ut,
 * men det er bevisst valg – vi bruker BF-formsignaturen konsekvent på
 * alle custom input-elementer. Tilgjengelighets-semantikk er intakt via
 * <input type="radio">.
 *
 * 2-lags outline (samme teknikk som .bf-btn--outline): ytre sort lag +
 * ::before med hvit eller gul innfyll. Gir kant som følger diagonalen. */
.bm-radio__box {
  --cut: 7px;
  --outer: var(--bf-sort);
  --inner: var(--bf-hvit);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--outer);
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
  isolation: isolate;
  clip-path: polygon(
    0 1px,
    1px 0,
    calc(100% - 1px) 0,
    100% 1px,
    100% calc(100% - var(--cut) - 1px),
    calc(100% - 0.71px) calc(100% - var(--cut) + 0.71px),
    calc(100% - var(--cut) + 0.71px) calc(100% - 0.71px),
    calc(100% - var(--cut) - 1px) 100%,
    1px 100%,
    0 calc(100% - 1px)
  );
  transition: background var(--bf-transition-fast);
}

.bm-radio__box::before {
  content: '';
  position: absolute;
  inset: 1.5px;
  background: var(--inner);
  z-index: -1;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - (var(--cut) - 0.88px) - 1px),
    calc(100% - 0.71px) calc(100% - (var(--cut) - 0.88px) + 0.71px),
    calc(100% - (var(--cut) - 0.88px) + 0.71px) calc(100% - 0.71px),
    calc(100% - (var(--cut) - 0.88px) - 1px) 100%,
    0 100%
  );
  transition: background var(--bf-transition-fast);
}

.bm-radio__check {
  width: 10px;
  height: 10px;
  background: var(--bf-sort);
  opacity: 0;
  transition: opacity var(--bf-transition-fast);
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - 3px),
    calc(100% - 3px) 100%,
    0 100%
  );
}

.bm-radio input[type="radio"]:checked ~ .bm-radio__box .bm-radio__check {
  opacity: 1;
}

.bm-radio input[type="radio"]:checked ~ .bm-radio__box {
  --inner: var(--bf-energi);
}

/* Fokus-outline rundt hele kortet når radio-input er fokusert.
 * Plassert her og ikke på .bm-radio__box for å matche klikktarget. */
.bm-radio:has(input[type="radio"]:focus-visible) {
  outline: 3px solid var(--bf-pulserende);
  outline-offset: 2px;
}

.bm-radio__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bm-radio__text strong {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-lg);
  font-weight: var(--bf-weight-medium);
  color: var(--bf-sort);
}

.bm-radio__text span {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-sm);
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.7);
}

/* ── Felt-grid (steg 2) ──────────────────────── */

.bm-fieldgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bf-space-5) var(--bf-space-5);
  margin-bottom: var(--bf-space-8);
}

.bm-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bm-field--wide {
  grid-column: 1 / -1;
}

@media (max-width: 480px) {
  .bm-fieldgrid {
    grid-template-columns: 1fr;
  }
}

.bm-label {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-medium);
  color: var(--bf-sort);
}

.bm-req {
  color: var(--bf-pulserende);
  margin-left: 2px;
}

/* Input shell – 2-lags outline-mønster (jf. designsystem § 5b).
 * border kan ikke følge clip-path, så vi pakker input-elementet i en
 * shell som har clip-path + ytre kantfarge, og en ::before med inset
 * og redusert clip som rendres som indre bakgrunn. Input-elementet
 * selv er gjennomsiktig og uten kant. */
.bm-input-shell {
  --cut: var(--bf-corner-cut);
  display: block;
  position: relative;
  isolation: isolate;
  background: rgba(0, 0, 0, 0.15);
  transition: background var(--bf-transition-fast);
  clip-path: polygon(
    0 1px,
    1px 0,
    calc(100% - 1px) 0,
    100% 1px,
    100% calc(100% - var(--cut) - 1px),
    calc(100% - 0.71px) calc(100% - var(--cut) + 0.71px),
    calc(100% - var(--cut) + 0.71px) calc(100% - 0.71px),
    calc(100% - var(--cut) - 1px) 100%,
    1px 100%,
    0 calc(100% - 1px)
  );
}

.bm-input-shell::before {
  content: '';
  position: absolute;
  inset: 1.5px;
  background: var(--bf-flyt);
  z-index: -1;
  transition: background var(--bf-transition-fast);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - (var(--cut) - 0.88px) - 1px),
    calc(100% - 0.71px) calc(100% - (var(--cut) - 0.88px) + 0.71px),
    calc(100% - (var(--cut) - 0.88px) + 0.71px) calc(100% - 0.71px),
    calc(100% - (var(--cut) - 0.88px) - 1px) 100%,
    0 100%
  );
}

.bm-input-shell:hover {
  background: rgba(0, 0, 0, 0.3);
}

.bm-input-shell:focus-within {
  background: var(--bf-sort);
}

.bm-input-shell:focus-within::before {
  background: var(--bf-hvit);
}

.bm-input-shell:has(.bm-input.is-invalid) {
  background: var(--bf-pulserende);
}

.bm-input {
  width: 100%;
  min-height: 44px;  /* Touch target – WCAG 2.5.5 */
  padding: 10px var(--bf-space-4);
  background: transparent;
  border: none;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-base);
  color: var(--bf-sort);
  outline: none;
  position: relative;  /* Sikrer at input rendres over shell::before. */
  z-index: 0;
}

/* Skjul nettleser-default spinnere på type=number – de bryter
 * cut-corner-shapen og kjøres uansett ikke i designet. */
.bm-input[type="number"]::-webkit-inner-spin-button,
.bm-input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.bm-input[type="number"] {
  -moz-appearance: textfield;
}

.bm-hint {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-xs);
  color: rgba(0, 0, 0, 0.6);
  margin: 0;
}

.bm-err {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-medium);
  color: var(--bf-pulserende);
  margin: 0;
  min-height: 1em;
}

.bm-err:empty {
  display: none;
}

/* ── Steg 3: Oppsummering ─────────────────────── */

.bm-oppsummering {
  background: var(--bf-flyt);
  padding: var(--bf-space-6);
  border-radius: 1px;
  margin-bottom: var(--bf-space-6);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--bf-space-3) var(--bf-space-5);
}

.bm-oppsummering dt {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-regular);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.6);
  align-self: center;
  white-space: nowrap;
}

.bm-oppsummering dd {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-base);
  font-weight: var(--bf-weight-medium);
  color: var(--bf-sort);
  margin: 0;
  word-break: break-word;
}

.bm-pris-oppsum {
  background: var(--bf-leken);
  padding: var(--bf-space-5) var(--bf-space-6);
  margin-bottom: var(--bf-space-6);
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-base);
  line-height: 1.45;
  color: var(--bf-sort);
  border-radius: 1px;
  --cut: var(--bf-corner-cut-md);
  clip-path: polygon(
    0 1px,
    1px 0,
    calc(100% - 1px) 0,
    100% 1px,
    100% calc(100% - var(--cut) - 1px),
    calc(100% - 0.71px) calc(100% - var(--cut) + 0.71px),
    calc(100% - var(--cut) + 0.71px) calc(100% - 0.71px),
    calc(100% - var(--cut) - 1px) 100%,
    1px 100%,
    0 calc(100% - 1px)
  );
}

.bm-pris-oppsum:empty {
  display: none;
}

.bm-pris-oppsum strong {
  font-weight: var(--bf-weight-bold);
}

/* ── Sjekkboks (samtykke) ────────────────────── */

.bm-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--bf-space-3);
  margin-bottom: var(--bf-space-5);
  cursor: pointer;
}

.bm-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Sjekkboks-signatur: 2-lags outline som radio-boksen. Ytre sort,
 * innre hvit (eller gul når checked). SVG-hakem blir synlig via color-
 * bytte på parent (currentColor). */
.bm-checkbox__box {
  --cut: 7px;
  --outer: var(--bf-sort);
  --inner: var(--bf-hvit);
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--outer);
  color: transparent;
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
  isolation: isolate;
  transition: background var(--bf-transition-fast),
              color var(--bf-transition-fast);
  clip-path: polygon(
    0 1px,
    1px 0,
    calc(100% - 1px) 0,
    100% 1px,
    100% calc(100% - var(--cut) - 1px),
    calc(100% - 0.71px) calc(100% - var(--cut) + 0.71px),
    calc(100% - var(--cut) + 0.71px) calc(100% - 0.71px),
    calc(100% - var(--cut) - 1px) 100%,
    1px 100%,
    0 calc(100% - 1px)
  );
}

.bm-checkbox__box::before {
  content: '';
  position: absolute;
  inset: 1.5px;
  background: var(--inner);
  z-index: -1;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - (var(--cut) - 0.88px) - 1px),
    calc(100% - 0.71px) calc(100% - (var(--cut) - 0.88px) + 0.71px),
    calc(100% - (var(--cut) - 0.88px) + 0.71px) calc(100% - 0.71px),
    calc(100% - (var(--cut) - 0.88px) - 1px) 100%,
    0 100%
  );
  transition: background var(--bf-transition-fast);
}

.bm-checkbox__box svg {
  width: 14px;
  height: 14px;
}

.bm-checkbox input[type="checkbox"]:checked ~ .bm-checkbox__box {
  --inner: var(--bf-energi);
  color: var(--bf-sort);
}

.bm-checkbox:has(input[type="checkbox"]:focus-visible) .bm-checkbox__box {
  outline: 3px solid var(--bf-pulserende);
  outline-offset: 2px;
}

.bm-checkbox__text {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-sm);
  line-height: 1.5;
  color: var(--bf-sort);
}

.bm-checkbox__text a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bm-checkbox__text a:hover {
  color: var(--bf-levende);
}

/* ── Panel-navigering (Tilbake / Neste) ────────── */

.bm-panel__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--bf-space-3);
  margin-top: var(--bf-space-4);
}

@media (max-width: 480px) {
  /* Stegnavigasjon i skjema: behold knappenes naturlige bredde og la
   * flex-wrap håndtere trange viewports (§ 11b). Tidligere full-bredde
   * + column-reverse er fjernet for å følge mobil-CTA-regelen. */
  .bm-panel__nav {
    /* row default + justify-content: space-between fra :nth-parent.
     * gap håndterer mellomrom hvis knappene wrapper til ny linje. */
    row-gap: var(--bf-space-3);
  }
}

/* ── Takk-skjerm ─────────────────────────────── */

.bm-takk {
  text-align: center;
  padding: var(--bf-space-6) 0;
}

.bm-takk[hidden] {
  display: none;
}

.bm-takk__ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background: var(--bf-levende);
  color: var(--bf-hvit);
  margin-bottom: var(--bf-space-5);
  --cut: var(--bf-corner-cut-md);
  clip-path: polygon(
    0 1px,
    1px 0,
    calc(100% - 1px) 0,
    100% 1px,
    100% calc(100% - var(--cut) - 1px),
    calc(100% - 0.71px) calc(100% - var(--cut) + 0.71px),
    calc(100% - var(--cut) + 0.71px) calc(100% - 0.71px),
    calc(100% - var(--cut) - 1px) 100%,
    1px 100%,
    0 calc(100% - 1px)
  );
}

.bm-takk__ikon svg {
  width: 40px;
  height: 40px;
}

.bm-takk__heading {
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-40);
  font-weight: var(--bf-weight-medium);
  line-height: 1.1;
  margin-bottom: var(--bf-space-3);
}

.bm-takk__lead {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-lg);
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.7);
  margin: 0 auto var(--bf-space-6);
  max-width: 48ch;
}

/* ── Pris-kalkulator ──────────────────────────── */

.bm-pris {
  background: var(--bf-hvit);
  padding: var(--bf-space-20) 0;
}

.bm-pris__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--bf-space-12);
}

.bm-pris__kicker {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-regular);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bf-sort);
  max-width: none;
  margin: 0 auto var(--bf-space-3);
}

.bm-pris__heading {
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-40);
  font-weight: var(--bf-weight-medium);
  line-height: 1.1;
  margin-bottom: var(--bf-space-4);
}

.bm-pris__lead {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-lg);
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.7);
  margin: 0 auto;
  max-width: 56ch;
}

.bm-pris__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--bf-space-10);
  align-items: start;
}

@media (max-width: 900px) {
  .bm-pris__grid {
    grid-template-columns: 1fr;
    gap: var(--bf-space-8);
  }
}

/* Kalkulator-boks: Energi-gul (Medlemskap-seksjonsfarge). */
.bm-pris__kalk {
  --cut: var(--bf-corner-cut-lg);
  background: var(--bf-energi);
  padding: var(--bf-space-8);
  border-radius: 1px;
  clip-path: polygon(
    0 1px,
    1px 0,
    calc(100% - 1px) 0,
    100% 1px,
    100% calc(100% - var(--cut) - 1px),
    calc(100% - 0.71px) calc(100% - var(--cut) + 0.71px),
    calc(100% - var(--cut) + 0.71px) calc(100% - 0.71px),
    calc(100% - var(--cut) - 1px) 100%,
    1px 100%,
    0 calc(100% - 1px)
  );
}

.bm-pris__kalk-label {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-medium);
  color: var(--bf-sort);
  display: block;
  margin-bottom: var(--bf-space-3);
}

.bm-pris__kalk-row {
  display: flex;
  align-items: center;
  gap: var(--bf-space-4);
  margin-bottom: var(--bf-space-8);
}

.bm-pris__slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 24px;
  cursor: pointer;
}

/* Track: sort linje */
.bm-pris__slider::-webkit-slider-runnable-track {
  height: 4px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}
.bm-pris__slider::-moz-range-track {
  height: 4px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}

/* Thumb: sort sirkel */
.bm-pris__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background: var(--bf-sort);
  border-radius: 50%;
  margin-top: -9px;
  cursor: pointer;
  border: none;
}
.bm-pris__slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: var(--bf-sort);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

.bm-pris__slider:focus-visible {
  outline: 3px solid var(--bf-pulserende);
  outline-offset: 4px;
  border-radius: 4px;
}

.bm-pris__lonn-val {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-base);
  font-weight: var(--bf-weight-bold);
  color: var(--bf-sort);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  min-width: 12ch;
  text-align: right;
}

.bm-pris__resultat {
  border-top: 1.5px solid rgba(0, 0, 0, 0.15);
  padding-top: var(--bf-space-5);
}

.bm-pris__resultat-label {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-medium);
  color: rgba(0, 0, 0, 0.7);
  margin: 0 0 var(--bf-space-1);
}

.bm-pris__resultat-tall {
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-5xl);
  font-weight: var(--bf-weight-medium);
  line-height: 1;
  color: var(--bf-sort);
  margin: 0 0 var(--bf-space-5);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: var(--bf-space-2);
}

.bm-pris__enhet {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-lg);
  font-weight: var(--bf-weight-regular);
  color: rgba(0, 0, 0, 0.7);
}

.bm-pris__breakdown {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--bf-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-2);
}

.bm-pris__breakdown li {
  display: flex;
  justify-content: space-between;
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-sm);
  color: var(--bf-sort);
  font-variant-numeric: tabular-nums;
}

.bm-pris__note {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-xs);
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.7);
  margin: 0;
  max-width: none;
}

/* Andre kategorier – liste */
.bm-pris__andre-heading {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-xl);
  font-weight: var(--bf-weight-bold);
  margin-bottom: var(--bf-space-5);
}

.bm-pris__liste {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--bf-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-4);
}

.bm-pris__liste li {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "kat tall"
    "note note";
  column-gap: var(--bf-space-5);
  row-gap: 4px;
  padding-bottom: var(--bf-space-4);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.bm-pris__liste li:last-child {
  border-bottom: none;
}

.bm-pris__liste-kat {
  grid-area: kat;
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-base);
  font-weight: var(--bf-weight-medium);
  color: var(--bf-sort);
}

.bm-pris__liste-tall {
  grid-area: tall;
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-base);
  font-weight: var(--bf-weight-bold);
  color: var(--bf-sort);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bm-pris__liste-note {
  grid-area: note;
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-xs);
  color: rgba(0, 0, 0, 0.6);
}

.bm-pris__bakgrunn {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-xs);
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.55);
  margin: 0;
}

/* ── Fordeler (4 clustere) ────────────────────── */

.bm-fordeler {
  background: var(--bf-flyt);
  padding: var(--bf-space-20) 0;
  scroll-margin-top: var(--bf-header-height);
}

.bm-fordeler__header {
  max-width: 640px;
  margin-bottom: var(--bf-space-12);
}

.bm-fordeler__kicker {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-regular);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bf-sort);
  margin-bottom: var(--bf-space-3);
}

.bm-fordeler__heading {
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-40);
  font-weight: var(--bf-weight-medium);
  line-height: 1.1;
  margin-bottom: var(--bf-space-4);
  max-width: 20ch;
}

.bm-fordeler__lead {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-lg);
  line-height: 1.45;
  color: var(--bf-sort);
  max-width: 56ch;
  margin: 0;
}

.bm-fordeler__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--bf-space-6);
  margin-bottom: var(--bf-space-10);
}

@media (max-width: 768px) {
  .bm-fordeler__grid {
    grid-template-columns: 1fr;
  }
}

.bm-cluster {
  --cut: var(--bf-corner-cut-lg);
  padding: var(--bf-space-8);
  border-radius: 1px;
  clip-path: polygon(
    0 1px,
    1px 0,
    calc(100% - 1px) 0,
    100% 1px,
    100% calc(100% - var(--cut) - 1px),
    calc(100% - 0.71px) calc(100% - var(--cut) + 0.71px),
    calc(100% - var(--cut) + 0.71px) calc(100% - 0.71px),
    calc(100% - var(--cut) - 1px) 100%,
    1px 100%,
    0 calc(100% - 1px)
  );
}

/* Hver cluster får sin egen dempede seksjonsfarge – gir visuell struktur
 * uten at noen tema dominerer. Ingen direkte mapping til nav-seksjonene,
 * men paletten er konsistent med designsystemet. */
.bm-cluster--trygghet { background: var(--bf-harmoni);  /* lys grønn */ }
.bm-cluster--vekst    { background: var(--bf-leken);    /* lys gul */ }
.bm-cluster--pavirk   { background: var(--bf-likevekt); /* lys rosa */ }
.bm-cluster--fordel   { background: var(--bf-balanse);  /* lys grå */ }

.bm-cluster__heading {
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-28);
  font-weight: var(--bf-weight-medium);
  line-height: 1.1;
  color: var(--bf-sort);
  margin-bottom: var(--bf-space-3);
}

.bm-cluster__intro {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-base);
  line-height: 1.5;
  color: var(--bf-sort);
  margin-bottom: var(--bf-space-5);
  max-width: 42ch;
}

.bm-cluster__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-3);
}

.bm-cluster__list li {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-sm);
  line-height: 1.5;
  color: var(--bf-sort);
  padding-left: var(--bf-space-5);
  position: relative;
}

/* Cut corner-mini som punkt-markør. Beholder 45°-signaturen
 * selv på den minste byggeklossen. top: 0.4em sentrerer markøren
 * optisk med første tekstlinje ved font-size sm og line-height 1.5. */
.bm-cluster__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 9px;
  height: 9px;
  background: var(--bf-sort);
  clip-path: polygon(0 0, 100% 0, 100% 60%, 60% 100%, 0 100%);
}

.bm-cluster__list strong {
  font-weight: var(--bf-weight-bold);
}

/* Venstrejustert – dette er en supplerende «dig deeper»-note, ikke en
 * primær CTA. Sentrering ville få den til å konkurrere visuelt med
 * hoved-CTA-en i hero og skjema-knappene. */
.bm-fordeler__les-mer {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-base);
  color: rgba(0, 0, 0, 0.7);
  margin: 0;
}

.bm-fordeler__les-mer a {
  color: var(--bf-sort);
  font-weight: var(--bf-weight-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bm-fordeler__les-mer a:hover {
  color: var(--bf-levende);
}

/* ── Student-callout ──────────────────────────────
 * Egen seksjon mellom fordeler og hvem-kan-bli-medlem. Energi gul
 * (Medlemskap-seksjonsfarge) signaliserer tydelig CTA-energi for en
 * egen målgruppe. 2-kolonners grid på desktop: tekst + stat-linje.
 */

.bm-student {
  background: var(--bf-hvit);
  padding: var(--bf-space-16) 0;
}

.bm-student__boks {
  --cut: var(--bf-corner-cut-lg);
  background: var(--bf-energi);
  padding: var(--bf-space-12);
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--bf-space-10);
  align-items: center;
  border-radius: 1px;
  clip-path: polygon(
    0 1px,
    1px 0,
    calc(100% - 1px) 0,
    100% 1px,
    100% calc(100% - var(--cut) - 1px),
    calc(100% - 0.71px) calc(100% - var(--cut) + 0.71px),
    calc(100% - var(--cut) + 0.71px) calc(100% - 0.71px),
    calc(100% - var(--cut) - 1px) 100%,
    1px 100%,
    0 calc(100% - 1px)
  );
}

@media (max-width: 768px) {
  .bm-student__boks {
    grid-template-columns: 1fr;
    gap: var(--bf-space-6);
    padding: var(--bf-space-8);
  }
}

.bm-student__kicker {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-regular);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bf-sort);
  margin-bottom: var(--bf-space-3);
}

.bm-student__heading {
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-32);
  font-weight: var(--bf-weight-medium);
  line-height: 1.1;
  color: var(--bf-sort);
  margin-bottom: var(--bf-space-4);
  max-width: 16ch;
}

.bm-student__lead {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-base);
  line-height: 1.5;
  color: var(--bf-sort);
  margin-bottom: var(--bf-space-6);
  max-width: 50ch;
}

/* Stikkordsliste med studentfordeler – løpende tekst over 1-2 linjer.
 * Hvert hake-+-tekst-par er pakket i .bm-student__benefit med nowrap
 * så ikonet ikke blir adskilt fra teksten ved linjeskift. */
.bm-student__inkludert {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-sm);
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.75);
  margin: 0 0 var(--bf-space-6);
}

.bm-student__inkludert-label {
  font-weight: var(--bf-weight-bold);
  color: var(--bf-sort);
  margin-right: var(--bf-space-1);
}

.bm-student__benefit {
  white-space: nowrap;
  margin-right: var(--bf-space-3);
}

.bm-student__check-mini {
  display: inline-block;
  width: 12px;
  height: 12px;
  color: var(--bf-sort);
  vertical-align: -1px;
}

.bm-student__ctas {
  display: flex;
  gap: var(--bf-space-3);
  flex-wrap: wrap;
}

.bm-student__stat {
  text-align: center;
  margin: 0;
  padding: var(--bf-space-6);
  border-left: 2px solid var(--bf-sort);
}

@media (max-width: 768px) {
  .bm-student__stat {
    border-left: none;
    border-top: 2px solid var(--bf-sort);
    padding: var(--bf-space-5) 0 0;
    text-align: left;
  }
}

.bm-student__stat strong {
  display: block;
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-6xl);
  font-weight: var(--bf-weight-medium);
  line-height: 1;
  color: var(--bf-sort);
  margin-bottom: var(--bf-space-2);
}

.bm-student__stat span {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-sm);
  letter-spacing: 0.04em;
  color: var(--bf-sort);
}

/* ── Hvem kan bli medlem ──────────────────────── */

.bm-hvem {
  background: var(--bf-hvit);
  padding: var(--bf-space-20) 0;
}

.bm-hvem__grid {
  max-width: 720px;
  margin: 0 auto;
}

.bm-hvem__kicker {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-regular);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bf-sort);
  margin-bottom: var(--bf-space-3);
}

.bm-hvem__heading {
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-40);
  font-weight: var(--bf-weight-medium);
  line-height: 1.1;
  margin-bottom: var(--bf-space-4);
}

.bm-hvem__lead {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-lg);
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.7);
  margin-bottom: var(--bf-space-6);
  max-width: 60ch;
}

.bm-hvem__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--bf-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-4);
}

.bm-hvem__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--bf-space-4);
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-base);
  line-height: 1.5;
  color: var(--bf-sort);
}

/* Gjenbruker sjekkboks-signaturen fra .bf-verdi__check. */
.bm-hvem__check {
  --cut: var(--bf-corner-cut);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bf-energi);
  color: var(--bf-sort);
  flex-shrink: 0;
  margin-top: 2px;
  clip-path: polygon(
    0 1px,
    1px 0,
    calc(100% - 1px) 0,
    100% 1px,
    100% calc(100% - var(--cut) - 1px),
    calc(100% - 0.71px) calc(100% - var(--cut) + 0.71px),
    calc(100% - var(--cut) + 0.71px) calc(100% - 0.71px),
    calc(100% - var(--cut) - 1px) 100%,
    1px 100%,
    0 calc(100% - 1px)
  );
}

.bm-hvem__check svg {
  width: 18px;
  height: 18px;
  transform: rotate(7.5deg);
}

.bm-hvem__note {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-sm);
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.7);
  margin: 0;
  max-width: 60ch;
}

.bm-hvem__note a {
  color: var(--bf-sort);
  font-weight: var(--bf-weight-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bm-hvem__note a:hover {
  color: var(--bf-levende);
}

/* ── FAQ ──────────────────────────────────────── */

.bm-faq {
  background: var(--bf-balanse);
  padding: var(--bf-space-20) 0;
}

.bm-faq__header {
  text-align: center;
  margin-bottom: var(--bf-space-10);
}

.bm-faq__kicker {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-regular);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bf-sort);
  max-width: none;
  margin: 0 auto var(--bf-space-3);
}

.bm-faq__heading {
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-40);
  font-weight: var(--bf-weight-medium);
  line-height: 1.1;
  margin: 0;
}

.bm-faq__list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-3);
}

.bm-faq__item {
  background: var(--bf-hvit);
  border-radius: 1px;
  --cut: var(--bf-corner-cut-md);
  transition: clip-path var(--bf-transition-fast);
}

/* Cut corner både ved hover/fokus og når item er åpen. Matcher
 * interaktivitets-språket fra qbox og portal: flat i hvile, får
 * signatur-signal når brukeren engasjerer seg. */
.bm-faq__item:hover,
.bm-faq__item:focus-within,
.bm-faq__item[open] {
  clip-path: polygon(
    0 1px,
    1px 0,
    calc(100% - 1px) 0,
    100% 1px,
    100% calc(100% - var(--cut) - 1px),
    calc(100% - 0.71px) calc(100% - var(--cut) + 0.71px),
    calc(100% - var(--cut) + 0.71px) calc(100% - 0.71px),
    calc(100% - var(--cut) - 1px) 100%,
    1px 100%,
    0 calc(100% - 1px)
  );
}

.bm-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bf-space-4);
  padding: var(--bf-space-5) var(--bf-space-6);
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-lg);
  font-weight: var(--bf-weight-medium);
  color: var(--bf-sort);
  cursor: pointer;
  list-style: none;
  min-height: 56px;
}

.bm-faq__q::-webkit-details-marker {
  display: none;
}

.bm-faq__item:hover .bm-faq__q,
.bm-faq__item[open] .bm-faq__q {
  background: var(--bf-leken);
}

/* Pluss/minus-ikon bygget med to pseudo-streker – ingen SVG nødvendig. */
.bm-faq__ikon {
  width: 20px;
  height: 20px;
  position: relative;
  flex-shrink: 0;
}

.bm-faq__ikon::before,
.bm-faq__ikon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--bf-sort);
  transition: transform var(--bf-transition-fast);
}

.bm-faq__ikon::before {
  width: 14px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}

.bm-faq__ikon::after {
  width: 1.5px;
  height: 14px;
  transform: translate(-50%, -50%);
}

.bm-faq__item[open] .bm-faq__ikon::after {
  transform: translate(-50%, -50%) scaleY(0);
}

.bm-faq__a {
  padding: var(--bf-space-3) var(--bf-space-6) var(--bf-space-6);
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-base);
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.75);
  max-width: 60ch;
}

.bm-faq__a a {
  color: var(--bf-sort);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bm-faq__a a:hover {
  color: var(--bf-levende);
}

/* ── Kontakt-boks ─────────────────────────────── */

.bf-kontaktboks {
  background: var(--bf-hvit);
  padding: var(--bf-space-16) 0 var(--bf-space-20);
}

.bf-kontaktboks__boks {
  --cut: var(--bf-corner-cut-lg);
  background: var(--bf-aerlig);
  /* Samme luft som .bf-lenkekort (32 px all-sides) – kontaktboksen leser
   * som «en av familien» med segment-kortene i samme spor. */
  padding: var(--bf-space-8);
  display: grid;
  grid-template-columns: auto 1.3fr 1fr;
  gap: var(--bf-space-8) var(--bf-space-10);
  align-items: center;
  border-radius: 1px;
  clip-path: polygon(
    0 1px,
    1px 0,
    calc(100% - 1px) 0,
    100% 1px,
    100% calc(100% - var(--cut) - 1px),
    calc(100% - 0.71px) calc(100% - var(--cut) + 0.71px),
    calc(100% - var(--cut) + 0.71px) calc(100% - 0.71px),
    calc(100% - var(--cut) - 1px) 100%,
    1px 100%,
    0 calc(100% - 1px)
  );
}

/* Kvadratisk portrett til venstre – gir menneskelig ansikt til
 * den ellers tekstungetunge «Usikker?»-boksen. Bilder bruker
 * ikke cut corner – rent rektangel med 1 px-rounding, slik at
 * motivet aldri blir beskåret av designsignaturen. */
.bf-kontaktboks__bilde {
  margin: 0;
  width: 220px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 1px;
}

.bf-kontaktboks__bilde img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Alle viewports under desktop (≤ 900 px) — 1-spaltet stabel:
 *   Rad 1: kicker
 *   Rad 2: heading
 *   Rad 3: lead (ingen bilde – det forsvinner på mobil)
 *   Rad 4: to kontakt-lenker side om side
 *
 * Tidligere viste vi bildet i venstre kolonne med lead til høyre, men
 * 120 px-bilde + 156 px-lead på 360 px-viewport ga begge for trange
 * spalter; lead-teksten ble klemt mot høyre kant. På mobil løser vi
 * dette ved å droppe bildet helt – kontaktboksen leses som en ren
 * tekst-CTA. Designet er fortsatt visuelt rikt via boksens rosa
 * bakgrunn + cut corner.
 *
 * Vi bruker `display: contents` på .bf-kontaktboks__innhold for å løfte
 * kicker/heading/lead opp i grid-konteksten til __boks. Da kan grid-
 * template-areas styre hele layouten. Gjelder også Tillitsvalgt-siden
 * (som gjenbruker .bf-kontaktboks-mønstret). */
@media (max-width: 900px) {
  .bf-kontaktboks__boks {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "kicker"
      "heading"
      "lead"
      "lenker";
    /* 32 px all-sides matcher .bf-lenkekort på samme side (konsistent
     * boks-luft). Tidligere 24 px føltes trangere enn nabokortene. */
    padding: var(--bf-space-8);
    gap: var(--bf-space-3);
    align-items: start;
    justify-items: stretch;
    text-align: left;
  }

  .bf-kontaktboks__innhold { display: contents; }

  .bf-kontaktboks__kicker   { grid-area: kicker;  margin: 0; }
  .bf-kontaktboks__heading  { grid-area: heading; margin: 0; max-width: none; }
  .bf-kontaktboks__bilde    { display: none; }
  .bf-kontaktboks__lead     { grid-area: lead;    max-width: none; }
  .bf-kontaktboks__lenker   { grid-area: lenker; }

  /* To kontakt-lenker side om side, hver tar halve bredden. */
  .bf-kontaktboks__lenker {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--bf-space-3);
    margin-top: var(--bf-space-3);
  }

  /* Stram padding inni lenkene så de ikke blir gigantiske ved smale
   * 1/2-bredder. Lead + verdi stables fortsatt vertikalt. */
  .bf-kontaktboks__lenke {
    padding: var(--bf-space-3) var(--bf-space-4);
  }

  .bf-kontaktboks__lenke-verdi {
    font-size: var(--bf-text-base);
  }
}

.bf-kontaktboks__kicker {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-regular);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bf-sort);
  /* margin-bottom: 16 px gir samme visuelle «god avstand» som
   * .fh-type__label har via sin flex-gap-3. Hvorfor 16 og ikke 12?
   * Gopher (display-font for H2) har større tom plass over cap-toppen
   * i sin line-box enn Akzidenz, så 12 px geometrisk margin gav for
   * tett visuell binding her. 16 px kompenserer. Konsistent verdi på
   * .sm-cta__kicker og .mv-tv__kicker. */
  margin: 0 0 var(--bf-space-4);
}

.bf-kontaktboks__heading {
  font-family: var(--bf-font-display);
  /* --bf-text-40 (clamp 30→40) matcher andre konverterings-bokser som
   * .sm-cta__heading og .tv-hovedtv__heading. line-height 1.2 gir luft
   * over 2-3 linjer. */
  font-size: var(--bf-text-40);
  font-weight: var(--bf-weight-medium);
  line-height: 1.2;
  margin-bottom: var(--bf-space-3);
  max-width: 18ch;
}

.bf-kontaktboks__lead {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-base);
  line-height: 1.5;
  color: var(--bf-sort);
  margin: 0;
  /* Bred kjøreplate (64ch) lar brødteksten strekke seg ut og fylle
   * mer av boksen i stedet for å klippes inn mot venstre. */
  max-width: 64ch;
}

.bf-kontaktboks__lenker {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-4);
}

.bf-kontaktboks__lenke {
  --cut: var(--bf-corner-cut-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--bf-space-4) var(--bf-space-5);
  background: var(--bf-hvit);
  color: var(--bf-sort);
  text-decoration: none;
  transition: background var(--bf-transition-fast),
              clip-path var(--bf-transition-fast);
  border-radius: 1px;
}

.bf-kontaktboks__lenke:hover,
.bf-kontaktboks__lenke:focus-visible {
  background: var(--bf-energi);
  clip-path: polygon(
    0 1px,
    1px 0,
    calc(100% - 1px) 0,
    100% 1px,
    100% calc(100% - var(--cut) - 1px),
    calc(100% - 0.71px) calc(100% - var(--cut) + 0.71px),
    calc(100% - var(--cut) + 0.71px) calc(100% - 0.71px),
    calc(100% - var(--cut) - 1px) 100%,
    1px 100%,
    0 calc(100% - 1px)
  );
}

.bf-kontaktboks__lenke-label {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-regular);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.7);
}

.bf-kontaktboks__lenke-verdi {
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-lg);
  font-weight: var(--bf-weight-bold);
  color: var(--bf-sort);
}

/* ── Globale responsive justeringer ──────────── */

@media (max-width: 900px) {
  .bm-skjema,
  .bm-pris,
  .bm-fordeler,
  .bm-hvem,
  .bm-faq {
    padding: var(--bf-space-12) 0;
  }

  .bm-form {
    padding: var(--bf-space-8) var(--bf-space-6);
  }

  .bm-panel__legend {
    font-size: var(--bf-text-26);
  }

  .bm-skjema__heading,
  .bm-pris__heading,
  .bm-fordeler__heading,
  .bm-hvem__heading,
  .bm-faq__heading {
    font-size: var(--bf-text-3xl);
  }
}