/* kundsidor.css – laddas bara av /sv|ar/kom-igang/ och /sv|ar/byt-byra/ (Session J, sajt/kundsidor.py).
   Bygger på site.css: samma variabler, .steps, .checks, .sect, .note och tabeller. Ingen egen färg. */

.kundsida [id] { scroll-margin-top: 96px; }

/* BankID-märkning på stegen */
.kund-bankid {
  display: inline-block; margin-inline-start: 6px; padding: 1px 8px; border: 1px solid var(--navy);
  border-radius: var(--radius-field); font-size: 14px; font-weight: 700; line-height: 1.5; white-space: nowrap;
  vertical-align: middle;
}

/* videomanus som text */
.kund-video h3 { margin-top: 1.6em; }
.sect.kund-video h2 { max-width: 40ch; }
.kund-film {
  display: flex; align-items: center; justify-content: center; max-width: 480px; aspect-ratio: 16 / 9;
  margin: 12px 0 16px; border: 2px dashed var(--line); border-radius: var(--radius-card); background: var(--white);
  color: var(--text-700); font-weight: 700;
}
.kund-film-lank { margin: 12px 0 16px; }

/* mejlmallen till föregående byrå (fält i hakparentes är avsiktliga) */
.kund-mall-etikett { font-weight: 700; margin-bottom: 8px; }
blockquote.kund-mejlmall {
  margin: 0; max-width: 70ch; padding: 16px; background: var(--white); border: 1px solid var(--line);
  border-inline-start: 4px solid var(--navy); border-radius: var(--radius-field);
}
blockquote.kund-mejlmall p { margin: 0; }

/* tabellen per program: steg-kolumnen får plats på mobil */
.kundsida .ledger td { min-width: 16ch; }

@media (min-width: 900px) {
  .kundsida [id] { scroll-margin-top: 140px; }
}