/* ==========================================================================
   Dödsbohjälp – gemensam stilmall
   Lugn, varm och läsbar. Kontrastnivåer kontrollerade mot WCAG 2.2 AA.
   ========================================================================== */

/* --- Typsnitt (självhostade, inga externa anrop) ------------------------- */
@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/dm-sans-latin.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('/assets/fonts/source-serif-4-latin.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Designtokens -------------------------------------------------------- */
/* Palett från varumärkesarket: skogsgrön, sage, mossa, sand, sten, jord.
   Gold-variablerna behåller sina namn men bär numera jordtonen. */
:root {
  --cream: #faf7f1;
  --warm: #f1ebe0;
  --warm-deep: #e6ded1;
  --ink: #232823;
  --ink-2: #39433a;
  --muted: #5a6156;
  --border: #dfd8c9;
  --border-strong: #c3bcac;
  --forest: #2f4a3b;
  --sage: #47664d;
  --sage-soft: #e4eae0;
  --gold: #a48f7a;
  --gold-ink: #6c5a49;
  --gold-soft: #ede6da;
  --danger: #9c3626;
  --danger-soft: #fbeae6;
  --on-dark: #f7f5ee;
  --on-dark-muted: #c7d0c2;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-sm: 10px;
  --shadow: 0 14px 40px rgba(30, 27, 22, 0.07);
  --focus: #1e1b16;
  --maxw: 1080px;
  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}

/* --- Bas ----------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Sidhuvudet är 67px i mobilläge och 76px på skrivbord. */
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
}
@media (min-width: 901px) {
  html { scroll-padding-top: 6rem; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: hidden;
  /* Skyddsnät för långa ord och adresser på smala skärmar. Bryter bara
     när ordet inte får plats, aldrig annars. */
  overflow-wrap: break-word;
}

/* Avstavning bara där spalten är som smalast, så att långa svenska
   sammansättningar bryts snyggt i stället för att spilla över. */
@media (max-width: 560px) {
  h1, h2, h3, .citat p { hyphens: auto; }
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
  color: var(--forest);
  text-wrap: balance;
  /* Svenska sammansättningar som Integritetsskyddsmyndigheten är längre
     än en telefonspalt. Utan det här spiller rubriken utanför sin
     behållare i stället för att brytas. */
  overflow-wrap: break-word;
}

h1 { font-size: clamp(2.1rem, 4.6vw, 3.15rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.3rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--sage); text-underline-offset: 0.18em; }
a:hover { color: var(--ink); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }
li { margin-bottom: 0.4rem; }
/* En länk som ensam utgör sitt listobjekt är en navigeringsyta, inte en
   länk i löpande text, och omfattas därför inte av undantaget för
   inline-mål i WCAG 2.5.8. Den behöver en tryckbar höjd. */
main li > a:only-child { display: inline-block; padding: 0.4rem 0; }

hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--gold-soft); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 500;
  background: var(--ink);
  color: var(--on-dark);
  padding: 0.85rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
  font-weight: 500;
  transition: top 0.15s;
}
.skip-link:focus { top: 0; color: var(--on-dark); }

/* --- Layout -------------------------------------------------------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }
/* Smal textspalt, men med samma vänsterkant som de breda sektionerna
   så att sidan får en lugn vertikal linje hela vägen ned. */
.wrap-narrow { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }
/* ch är bredden på siffran noll, inte på ett medeltecken. I DM Sans är
   ett ch 11,6px, så den gamla spärren på 68ch landade på 790px och gav
   90 tecken per rad vid 768px. 48ch ger 558px och cirka 70 tecken, vilket
   är inom det läsbara spannet. Rubriker har större ch och begränsas
   därför naturligt senare. */
.wrap-narrow > * { max-width: 48ch; }
/* Bilder, dragspel och boxade element får vara bredare än textspalten.
   Radlängden inuti dem styrs av deras egen padding. */
.wrap-narrow > figure,
.wrap-narrow > .faq { max-width: 68ch; }
.wrap-narrow > .note,
.wrap-narrow > .checklist,
.wrap-narrow > dl { max-width: 58ch; }

.section { padding: 4rem 0; }
.section--tight { padding: 3rem 0; }
.section--warm { background: var(--warm); border-block: 1px solid var(--border); }
.section--dark { background: var(--forest); color: var(--on-dark); }
.section--dark h2, .section--dark h3 { color: var(--on-dark); }
.section--dark p { color: var(--on-dark-muted); }
.section--dark a { color: #cbd8c5; }
.section--dark { --focus: var(--on-dark); }

@media (min-width: 768px) {
  .section { padding: 5.5rem 0; }
}
/* Liggande telefon är bred men låg. Full sektionspadding lade 176px
   tomrum på en skärm som är 375px hög. */
@media (max-height: 500px) and (orientation: landscape) {
  .section { padding: 2.5rem 0; }
  .hero { padding: 2rem 0 2.5rem; }
  .launch-banner { padding: 0.55rem 0; font-size: 0.85rem; }
}

.eyebrow {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 0.7rem;
}
.section--dark .eyebrow { color: #b9c9b3; }

.lede {
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 46ch;
}
.section--dark .lede { color: var(--on-dark-muted); }

/* --- Sidhuvud ------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 247, 241, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.site-header__bar {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0.7rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
  min-height: 44px;
}
.brand__mark {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
}
.brand__text {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.7rem;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.93rem;
  border-radius: var(--radius-sm);
}
.site-nav a:hover { background: var(--warm); color: var(--ink); }
.site-nav a[aria-current='page'] {
  color: var(--forest);
  box-shadow: inset 0 -2px 0 var(--forest);
}
.site-nav .nav-cta {
  background: var(--forest);
  color: var(--on-dark);
  padding: 0.55rem 1.15rem;
  margin-left: 0.4rem;
  border-radius: 999px;
}
.site-nav .nav-cta:hover { background: var(--sage); color: var(--on-dark); }

@media (max-width: 560px) {
  .brand__text { font-size: 1.1rem; }
}

@media (max-width: 900px) {
  .site-nav {
    display: none;
    width: 100%;
    padding: 0 1.25rem 1rem;
  }
  /* Menyn sitter i det klistrade sidhuvudet. I liggande läge på telefon
     är den högre än skärmen, och eftersom sidhuvudet är fastnålat gick
     den sista posten inte att nå genom att scrolla sidan. Därför får
     menyn en egen höjdgräns och egen scroll. */
  .site-nav.is-open {
    display: block;
    max-height: calc(100vh - 4.5rem);
    max-height: calc(100dvh - 4.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0.15rem; }
  .site-nav a { justify-content: flex-start; padding: 0.75rem 0.9rem; font-size: 1rem; }
  .site-nav .nav-cta { margin: 0.5rem 0 0; justify-content: center; }
  .site-header__bar { flex-wrap: wrap; }
}
@media (min-width: 900.02px) {
  .nav-toggle { display: none; }
  .site-nav { display: block !important; }
}

/* --- Uppstartsbanner ----------------------------------------------------- */
/* Syns på varje sida tills servern bekräftar att tjänsten är i drift. */
.launch-banner {
  background: var(--gold-soft);
  border-bottom: 1px solid #dccfb9;
  color: var(--ink-2);
  font-size: 0.93rem;
  padding: 0.85rem 0;
}
.launch-banner[hidden] { display: none; }
.launch-banner p { margin: 0; max-width: 78ch; }
.launch-banner strong { color: var(--ink); }
/* Bannern tog nästan en tredjedel av första skärmen på en liten telefon.
   Tätare sats gör den läsbar utan att tränga undan innehållet. */
@media (max-width: 560px) {
  .launch-banner { font-size: 0.87rem; padding: 0.7rem 0; }
  .launch-banner p { line-height: 1.45; }
}

/* --- Knappar ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font: inherit;
  font-size: 0.98rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s, color 0.18s, border-color 0.18s;
}
.btn--primary { background: var(--forest); color: var(--on-dark); }
.btn--primary:hover { background: var(--sage); color: var(--on-dark); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn--secondary:hover { border-color: var(--ink); background: var(--warm); color: var(--ink); }
.btn--gold { background: var(--gold-soft); color: var(--gold-ink); border-color: #d4c6b2; }
.btn--gold:hover { background: #e3d7c6; color: var(--ink); }
.btn[disabled], .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; }
.btn--block { width: 100%; }
.section--dark .btn--secondary { color: var(--on-dark); border-color: rgba(252, 249, 244, 0.35); }
.section--dark .btn--secondary:hover { background: rgba(252, 249, 244, 0.1); color: var(--on-dark); }
.section--dark .btn--primary { background: var(--on-dark); color: var(--forest); }
.section--dark .btn--primary:hover { background: var(--on-dark-muted); color: var(--forest); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* --- Hero ---------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(ellipse 60% 55% at 88% 8%, rgba(164, 143, 122, 0.16), transparent 62%),
    radial-gradient(ellipse 50% 50% at 4% 92%, rgba(47, 74, 59, 0.08), transparent 60%),
    var(--cream);
  padding: 3.25rem 0 3.5rem;
  border-bottom: 1px solid var(--border);
}
.hero__grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 940px) {
  .hero { padding: 5rem 0 5.25rem; }
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.8fr); gap: 3.5rem; }
}
.hero h1 { margin-bottom: 1rem; }
.hero__lede { font-size: 1.13rem; color: var(--muted); max-width: 56ch; }

.tag {
  display: inline-block;
  background: var(--gold-soft);
  color: var(--gold-ink);
  border: 1px solid #e2d0ab;
  border-radius: 999px;
  padding: 0.35rem 0.95rem;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.assurances {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.assurances li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.95rem;
  color: var(--muted);
  margin: 0;
}
.assurances svg { flex: 0 0 auto; color: var(--sage); margin-top: 0.2rem; }

.hero__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background: var(--warm);
}
.hero__media img { width: 100%; aspect-ratio: 8 / 7; object-fit: cover; }
/* Mellan 620 och 939px är hero enspaltig men bred, och bilden blev
   högre än en liggande telefonskärm. */
@media (min-width: 620px) and (max-width: 939px) {
  .hero__media img { aspect-ratio: 16 / 9; }
  .foto img { max-height: 46vh; object-fit: cover; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .hero__media img { aspect-ratio: 21 / 9; }
  .foto img { max-height: 60vh; object-fit: cover; }
}

/* --- Foton --------------------------------------------------------------- */
/* Alla foton körs genom tools/bildbehandling.py och bär paletten.
   Ingen mörk gradient och ingen text ovanpå bilden. */
.foto {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--warm);
}
.foto img { width: 100%; height: auto; display: block; }
.foto figcaption {
  padding: 0.7rem 1rem;
  font-size: 0.82rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
  background: var(--cream);
}

.prose .foto { margin: 2rem 0; }

/* --- Citatblock ---------------------------------------------------------- */
.citat-block { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 880px) {
  .citat-block { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
}
.citat {
  margin: 0;
  max-width: 34ch;
}
.citat p {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1.35;
  color: var(--forest);
  margin-bottom: 1.1rem;
  text-wrap: balance;
}
.citat footer {
  font-size: 0.9rem;
  color: var(--muted);
}
.citat cite { font-style: italic; }

/* --- Kort och rutnät ----------------------------------------------------- */
.grid { display: grid; gap: 1.25rem; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 620px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Formulärsektionen delas först när båda spalterna får riktig bredd.
   Vid 620px blev formulärkortet 304px och fältraden inuti spillde
   59px utanför kortet på liggande telefon. */
@media (min-width: 940px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 880px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.section--warm .card { background: var(--cream); }
.card h2, .card h3 { margin-bottom: 0.5rem; }
/* En rubrik som i sin helhet är en länk står inte i löpande text, så den
   behöver ingen understrykning för att skiljas ut. Den får en på hover
   och fokus. */
.card h2 a, .card h3 a { text-decoration: none; color: var(--forest); }
.card h2 a:hover, .card h3 a:hover,
.card h2 a:focus-visible, .card h3 a:focus-visible { text-decoration: underline; }
.card p { font-size: 0.95rem; color: var(--muted); }
.card__note {
  display: block;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--muted);
}
.card__icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: var(--sage-soft);
  color: var(--sage);
  margin-bottom: 1rem;
}

.step { position: relative; }
.step__num {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--on-dark);
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 0.9rem;
}

.checklist { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 0.85rem; }
.checklist li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin: 0;
  font-size: 0.98rem;
}
.checklist svg { flex: 0 0 auto; color: var(--sage); margin-top: 0.28rem; }

.note {
  background: var(--warm);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.25rem;
  font-size: 0.95rem;
  color: var(--ink-2);
  margin: 1.75rem 0 0;
}
.note strong { color: var(--ink); }

/* --- FAQ ----------------------------------------------------------------- */
.faq { margin-top: 2rem; border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  padding: 1.15rem 0.25rem;
  background: none;
  border: 0;
  font: inherit;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.faq__q:hover { color: var(--gold-ink); }
.faq__icon { flex: 0 0 auto; color: var(--gold-ink); transition: transform 0.2s; }
.faq__q[aria-expanded='true'] .faq__icon { transform: rotate(45deg); }
.faq__a { padding: 0 0.25rem 1.4rem; color: var(--muted); font-size: 0.98rem; max-width: 68ch; }
.faq__a[hidden] { display: none; }

/* --- Formulär ------------------------------------------------------------ */
/* Kortet är mätpunkten för sina egna spalter. Fönstrets bredd säger
   ingenting om hur brett kortet faktiskt blev. */
.form-card { container-type: inline-size; }
@container (min-width: 430px) {
  .field-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .choice-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.form-card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}
@media (min-width: 620px) { .form-card { padding: 2rem; } }
/* På de smalaste telefonerna kapade rullgardinen sitt längsta
   alternativ, Förråd eller del av bostad. Tätare kant på kortet och på
   selecten ger tillbaka de pixlar texten behöver. */
@media (max-width: 400px) {
  .wrap, .wrap-narrow { padding: 0 1rem; }
  .form-card { padding: 1.15rem; }
  select { padding-right: 2.1rem; background-position: right 0.8rem center; }
}

/* Formulärkortet är ljust även när det ligger i en mörk sektion. Utan de
   här återställningarna ärver etiketter, länkar och knappar den ljusa
   texten från .section--dark och blir oläsbara mot kortets bakgrund. */
.section--dark .form-card,
.section--dark .form-card p,
.section--dark .form-card label,
.section--dark .form-card legend,
.section--dark .form-card strong { color: var(--ink); }
.section--dark .form-card .hint,
.section--dark .form-card .optional,
.section--dark .form-card .form-foot { color: var(--muted); }
.section--dark .form-card a { color: var(--sage); }
.section--dark .form-card a:hover { color: var(--ink); }
.section--dark .form-card .btn--primary { background: var(--forest); color: var(--on-dark); }
.section--dark .form-card .btn--primary:hover { background: var(--sage); color: var(--on-dark); }
.section--dark .form-card .form-alert--error,
.section--dark .form-card .form-alert--error p { color: #7d2a1c; }
.section--dark .form-card .form-alert--success,
.section--dark .form-card .form-alert--success p { color: #2f4531; }
.section--dark .form-card .form-alert--info,
.section--dark .form-card .form-alert--info p { color: var(--ink-2); }
.section--dark .form-card .field__error { color: var(--danger); }
.section--dark .form-card { --focus: var(--ink); }

.field { margin-bottom: 1.15rem; }
.field > label,
.fieldset__legend {
  display: block;
  font-size: 0.93rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
  color: var(--ink);
}
.hint {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 0.5rem;
}
.field .optional { font-weight: 400; color: var(--muted); }

input[type='text'],
input[type='tel'],
input[type='email'],
input[type='url'],
select,
textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}
textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%235c5648' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--ink); }
input[aria-invalid='true'], select[aria-invalid='true'], textarea[aria-invalid='true'] {
  border-color: var(--danger);
  /* background-color, inte background: kortformen tog bort selectens
     nedåtpil exakt i det läge där fältet ska rättas. */
  background-color: var(--danger-soft);
}
/* :disabled matchar även fält som stängts av via en förälder-fieldset.
   Attributselektorn [disabled] gör inte det, så i prelaunchläge såg
   textfälten aktiva ut medan kryssrutor och knapp var dämpade. */
input:disabled, select:disabled, textarea:disabled {
  /* background-color, inte background: kortformen nollställer
     background-image och tar bort selectens nedåtpil. */
  background-color: var(--warm);
  color: var(--muted);
  cursor: not-allowed;
  -webkit-text-fill-color: var(--muted);
  opacity: 1;
}

/* Avstängt formulär ska fortfarande gå att läsa. Kontrollerna dämpas,
   men ledtexterna behåller läsbar kontrast. */
fieldset[disabled] .choice,
fieldset[disabled] .consent {
  background: var(--warm);
  border-color: var(--border);
  color: var(--muted);
  cursor: not-allowed;
}
fieldset[disabled] .choice:hover { border-color: var(--border); }
fieldset[disabled] .btn { background: var(--border); color: var(--muted); border-color: var(--border-strong); }
.section--dark .form-card fieldset[disabled] .btn--primary { background: var(--border); color: var(--muted); }

.field__error {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.87rem;
  color: var(--danger);
  font-weight: 500;
}
.field__error:empty { display: none; }

.field-row { display: grid; gap: 1.15rem; }

/* min-width: 0 upphäver webbläsarens min-inline-size: min-content.
   Utan den kan fieldsetet inte krympa med formulärkortet, och vid
   förstorad text spiller det utanför kortet på smala telefoner. */
fieldset { border: 0; margin: 0 0 1.15rem; padding: 0; min-width: 0; }
[data-require-group][data-invalid] .fieldset__legend { color: var(--danger); }
[data-require-group][data-invalid] .choice { border-color: var(--danger); }
.choice-grid { display: grid; gap: 0.5rem; }

.choice {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  font-size: 0.95rem;
}
.choice:hover { border-color: var(--ink); }
.choice input { margin: 0.2rem 0 0; width: 18px; height: 18px; accent-color: var(--sage); flex: 0 0 auto; }
.choice:has(input:checked) { border-color: var(--sage); background: var(--sage-soft); }
.choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 1rem;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--warm);
  font-size: 0.93rem;
  margin-bottom: 1.15rem;
}
.consent input { margin: 0.25rem 0 0; width: 20px; height: 20px; accent-color: var(--sage); flex: 0 0 auto; }
/* Länken till integritetspolicyn stod tidigare inne i etiketten. Ett
   tryck som skulle kryssa i rutan kunde då navigera bort från ett
   halvifyllt formulär. Nu står den som egen rad under rutan. */
.consent-lank { margin: 0.5rem 0 1.15rem; }
.consent-lank a { display: inline-block; padding: 0.45rem 0; }
.consent:has(input[aria-invalid='true']) { border-color: var(--danger); background: var(--danger-soft); }

.form-alert {
  border-radius: var(--radius-sm);
  padding: 1rem 1.15rem;
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
  border: 1.5px solid transparent;
}
.form-alert[hidden] { display: none; }
.form-alert--error { background: var(--danger-soft); border-color: #e2b8ad; color: #7d2a1c; }
.form-alert--error a, .form-alert--error strong { color: #7d2a1c; }
.form-alert--error ul { margin: 0.5rem 0 0; padding-left: 1.2rem; }
/* Fellänkarna var 20px höga. De ska gå att träffa med tummen. */
.form-alert--error li { margin-bottom: 0; }
.form-alert--error li a { display: inline-block; padding: 0.35rem 0; }
@media (max-width: 900px) {
  .form-alert--error li a { padding: 0.55rem 0; }
}
.form-alert--success { background: var(--sage-soft); border-color: #b9c9b7; color: #2f4531; }
.form-alert--info { background: var(--warm); border-color: var(--border-strong); color: var(--ink-2); }

.honeypot {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-foot { font-size: 0.87rem; color: var(--muted); margin-top: 1rem; }

.is-busy { position: relative; }
.spinner {
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Prislogik / faktorer ------------------------------------------------ */
.factor-list { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 0.9rem; }
@media (min-width: 760px) { .factor-list { grid-template-columns: 1fr 1fr; } }
.factor-list li {
  margin: 0;
  padding: 1.1rem 1.25rem;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.factor-list strong { display: block; margin-bottom: 0.25rem; }
.factor-list span { font-size: 0.92rem; color: var(--muted); }

/* --- Tabell -------------------------------------------------------------- */
.table-scroll { overflow-x: auto; margin: 1.5rem 0; }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-weight: 600; background: var(--warm); }

/* --- Innehållssidor ------------------------------------------------------ */
.prose h2 { margin-top: 2.5rem; }
.prose h3 { margin-top: 1.75rem; }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { color: var(--ink-2); }
.prose .faq { margin-bottom: 1rem; }

dl { margin: 1.25rem 0; }
dt {
  font-weight: 500;
  font-size: 0.87rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 1rem;
}
dt:first-child { margin-top: 0; }
dd { margin: 0.15rem 0 0; padding: 0; color: var(--ink); }
[data-operator-pending] { color: var(--muted); font-style: italic; }
.page-head { padding: 2.75rem 0 1.5rem; border-bottom: 1px solid var(--border); background: var(--warm); }
.page-head .lede { margin-top: 0.5rem; }
.meta { font-size: 0.87rem; color: var(--muted); }

.breadcrumbs { font-size: 0.87rem; color: var(--muted); margin-bottom: 0.6rem; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; padding: 0; margin: 0; }
.breadcrumbs li { margin: 0; display: flex; align-items: center; }
.breadcrumbs li + li::before { content: '/'; margin-right: 0.4rem; color: var(--border-strong); }
/* Brödsmulan var 18px hög, under minimimåttet för en touchyta. */
.breadcrumbs a { display: inline-block; padding: 0.4rem 0; }

/* --- Sidfot -------------------------------------------------------------- */
.site-footer {
  background: var(--warm);
  border-top: 1px solid var(--border);
  padding: 3rem 0 2rem;
  font-size: 0.92rem;
}
.site-footer__grid { display: grid; gap: 2rem; }
@media (min-width: 720px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer h2 { font-size: 0.85rem; font-family: var(--sans); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.75rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.4rem; }
.site-footer li a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; padding: 0.15rem 0; }
/* På pekskärm blir sidfotens länkar fulla touchytor. På desktop räcker
   32px, där finns en muspekare. */
@media (max-width: 900px) {
  .site-footer li a { min-height: 44px; }
  .site-footer li { margin-bottom: 0; }
}
.site-footer li a:hover { color: var(--gold-ink); text-decoration: underline; }
/* Länkar mitt i löptext måste vara understrukna. Färg ensam räcker inte
   för att skilja dem från omgivande text (WCAG 1.4.1). */
.site-footer p a { color: var(--sage); text-decoration: underline; }
.site-footer p a:hover { color: var(--ink); }
.site-footer__legal {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.85rem;
}
.site-footer__legal p { margin-bottom: 0.4rem; }
.site-footer__disclaimer { max-width: 68ch; }

/* --- 404 ----------------------------------------------------------------- */
.error-page { padding: 4rem 0 5rem; }
.error-page h2 { margin-top: 3rem; font-size: 1.3rem; }

/* --- Rörelse ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}