/* Komponenter. Ägs av session 2. */

/* ---------- Sidhuvud ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 20, 32, .96); color: var(--on-ink);
  border-bottom: 1px solid var(--on-ink-line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 60px; gap: var(--s-5); }
.logo {
  font-family: var(--font-ui); font-weight: 600; font-size: .9375rem; letter-spacing: .22em;
  text-transform: uppercase; text-decoration: none; color: var(--on-ink);
  display: inline-flex; align-items: center; gap: 2px; min-height: var(--tap);
}
.logo:hover { color: var(--on-ink); }
.logo__tld { color: var(--on-ink-2); font-weight: 400; letter-spacing: .08em; }
.logo__dot { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; margin-left: 8px; }

.nav { display: none; }
.nav a { color: var(--on-ink-2); text-decoration: none; font-size: var(--fs-label); letter-spacing: .04em; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--on-ink); }
@media (min-width: 900px) {
  .nav { display: flex; align-items: center; gap: var(--s-6); }
  .menu { display: none; }
}

/* Mobilmeny utan JavaScript */
.menu { position: static; }
.menu > summary {
  list-style: none; cursor: pointer; min-height: var(--tap); min-width: var(--tap);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase; color: var(--on-ink); border: 1px solid rgba(245,242,235,.35); padding: 0 var(--s-4);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { background: var(--on-ink); color: var(--ink); }
.menu__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--ink); border-bottom: 1px solid var(--on-ink-line);
  padding: var(--s-2) var(--gutter) var(--s-5);
}
.menu__panel a {
  display: flex; align-items: center; min-height: 56px; color: var(--on-ink);
  text-decoration: none; font-family: var(--font-display); font-size: 1.375rem; font-weight: 300;
  border-bottom: 1px solid var(--on-ink-line);
}

/* ---------- Sidfot ---------- */
.site-footer { background: var(--ink); color: var(--on-ink-2); padding: var(--s-8) 0 var(--s-6); font-size: var(--fs-small); }
.site-footer a { color: var(--on-ink-2); }
.site-footer a:hover { color: var(--on-ink); }
.site-footer__grid { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 720px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; } }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--s-2); }
.site-footer .eyebrow { color: rgba(245,242,235,.5); margin-bottom: var(--s-4); }
.site-footer__legal { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--on-ink-line); }

/* ---------- Knappar ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: var(--tap); padding: 14px 28px;
  font-family: var(--font-ui); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: var(--tr-label); text-transform: uppercase; text-decoration: none;
  border: 1px solid var(--ink); border-radius: var(--radius); cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn--primary { background: var(--ink); color: var(--on-ink); }
.btn--primary:hover { background: var(--ink-2); border-color: var(--ink-2); color: var(--on-ink); }
.btn--secondary { background: transparent; color: var(--ink); }
.btn--secondary:hover { background: var(--ink); color: var(--on-ink); }
.btn--text { border-color: transparent; padding-inline: 0; background: none; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--paper-3); border-color: var(--line-strong); color: var(--text-3); cursor: not-allowed; }
.section--ink .btn--primary { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }
.section--ink .btn--primary:hover { background: var(--surface); }
.section--ink .btn--secondary { color: var(--on-ink); border-color: rgba(245,242,235,.4); }
.section--ink .btn--secondary:hover { background: rgba(245,242,235,.08); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ---------- Formulär ---------- */
.field { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); }
.field__label { font-size: var(--fs-label); font-weight: 500; letter-spacing: .02em; color: var(--text); }
.field__hint { font-size: var(--fs-small); color: var(--text-2); margin: 0; }
.input, .select, .textarea {
  width: 100%; min-height: var(--tap); padding: 12px 14px;
  font-family: var(--font-ui); font-size: 1rem; /* minst 16 px: ingen zoom i iOS */
  background: var(--surface); color: var(--text);
  border: var(--border-strong); border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-3); }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid var(--focus); outline-offset: -1px; border-color: var(--focus); }
.textarea { min-height: 128px; line-height: var(--lh-body); resize: vertical; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }

.input-affix { display: flex; align-items: stretch; }
.input-affix .input { border-right: 0; text-align: right; font-variant-numeric: tabular-nums; }
.input-affix__unit {
  display: inline-flex; align-items: center; padding: 0 14px; background: var(--paper-2);
  border: var(--border-strong); font-size: var(--fs-small); color: var(--text-2);
}
.field--error .input { border-color: var(--error); }
.field__error { font-size: var(--fs-small); color: var(--error); margin: 0; }

/* Valkort (radio/checkbox som stora ytor) */
.choices { display: grid; gap: var(--s-2); border: 0; padding: 0; margin: 0 0 var(--s-5); }
.choices legend { font-size: var(--fs-label); font-weight: 500; margin-bottom: var(--s-3); padding: 0; }
@media (min-width: 720px) { .choices--2 { grid-template-columns: 1fr 1fr; } }
.choice {
  position: relative; display: flex; gap: var(--s-3); align-items: flex-start;
  min-height: 56px; padding: 14px 16px; cursor: pointer;
  background: var(--surface); border: var(--border-strong);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.choice:hover { border-color: var(--text-3); }
.choice input { appearance: none; flex: none; width: 22px; height: 22px; margin: 1px 0 0; border: 1px solid var(--ink); background: var(--surface); display: grid; place-content: center; }
.choice input[type="radio"] { border-radius: 50%; }
.choice input[type="radio"]::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); transform: scale(0); transition: transform var(--dur-fast) var(--ease); }
.choice input[type="checkbox"]::after { content: ""; width: 12px; height: 7px; border: 2px solid var(--on-ink); border-top: 0; border-right: 0; transform: rotate(-45deg) scale(0); margin-top: -3px; }
.choice input:checked { background: var(--ink); }
.choice input[type="radio"]:checked { background: var(--surface); }
.choice input:checked::after { transform: scale(1); }
.choice input[type="checkbox"]:checked::after { transform: rotate(-45deg) scale(1); }
.choice:has(input:checked) { border-color: var(--ink); background: var(--paper-2); }
.choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.choice__title { display: block; font-weight: 500; }
.choice__desc { display: block; font-size: var(--fs-small); color: var(--text-2); }

/* ---------- Stegindikator ---------- */
.steps { display: flex; gap: 4px; margin: 0 0 var(--s-3); padding: 0; list-style: none; }
.steps li { flex: 1; height: 3px; background: var(--line); }
.steps li[data-state="done"], .steps li[data-state="current"] { background: var(--ink); }
.steps-label { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--text-3); }

/* ---------- Formulärpanel med fast knapprad i mobil ---------- */
.flow { background: var(--surface); border: var(--border); }
.flow__body { padding: var(--s-6) var(--s-5); }
.flow__actions {
  position: sticky; bottom: 0; display: flex; gap: var(--s-3); justify-content: space-between;
  padding: var(--s-3) var(--s-5) calc(var(--s-3) + env(safe-area-inset-bottom));
  background: var(--surface); border-top: var(--border);
}
.flow__actions .btn--primary { flex: 1; }
@media (min-width: 720px) { .flow__actions { position: static; } .flow__actions .btn--primary { flex: 0 1 auto; } }

/* ---------- Kort ---------- */
.card { background: var(--paper-2); border: var(--border); padding: var(--s-6) var(--s-5); }
.card--surface { background: var(--surface); }
.card h3 { margin-bottom: var(--s-3); }
.card__meta { display: flex; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-5); }

/* Avtalskort: vad avtalet används till / inte löser */
.use-list { list-style: none; margin: 0; padding: 0; border-top: var(--border); }
.use-list li { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: var(--border); font-size: var(--fs-small); }
.use-list dt, .use-list .k { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); padding-top: 2px; }

/* Paketkort */
.package { display: flex; flex-direction: column; background: var(--surface); border: var(--border); padding: var(--s-6) var(--s-5); }
.package--featured { border-color: var(--ink); box-shadow: inset 0 3px 0 var(--ink); }
.package__price { font-family: var(--font-display); font-size: 2.25rem; font-weight: 300; line-height: 1; margin: var(--s-4) 0 var(--s-2); }
.package__price small { font-family: var(--font-ui); font-size: var(--fs-small); color: var(--text-2); }
.includes { list-style: none; margin: var(--s-5) 0; padding: 0; flex: 1; }
.includes li { position: relative; padding: var(--s-2) 0 var(--s-2) 28px; border-top: var(--border); font-size: var(--fs-small); }
.includes li::before { content: ""; position: absolute; left: 2px; top: 14px; width: 12px; height: 6px; border: 2px solid var(--ok); border-top: 0; border-right: 0; transform: rotate(-45deg); }
.includes li.is-excluded { color: var(--text-3); }
.includes li.is-excluded::before { border: 0; width: 12px; height: 2px; background: var(--text-3); transform: none; top: 18px; }

/* Stoppkort: mallen räcker inte */
.stop { border: 1px solid var(--ink); border-left-width: 4px; background: var(--paper-2); padding: var(--s-5); }
.stop h3 { margin-bottom: var(--s-3); }
.stop .eyebrow { margin-bottom: var(--s-3); }

/* Info- och felrutor */
.notice { border-left: 3px solid var(--ink); background: var(--paper-2); padding: var(--s-4) var(--s-5); font-size: var(--fs-small); }
.notice--error { border-color: var(--error); background: var(--error-bg); }

/* Förtroenderad */
.trust { display: grid; gap: 0; grid-template-columns: 1fr; border-top: var(--border); border-bottom: var(--border); }
@media (min-width: 720px) { .trust { grid-template-columns: repeat(3, 1fr); } }
.trust__item { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4) 0; font-size: var(--fs-small); }
@media (min-width: 720px) { .trust__item + .trust__item { padding-left: var(--s-5); border-left: var(--border); } .trust__item { padding-right: var(--s-5); } }
.trust__icon { flex: none; width: 24px; height: 24px; color: var(--ink); }
.trust__item strong { display: block; font-weight: 500; }

/* Granskningsstämpel */
.stamp { display: inline-flex; flex-direction: column; gap: 2px; border: 1px solid var(--ink); padding: var(--s-2) var(--s-3); font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: .12em; text-transform: uppercase; }
.stamp--pending { border-style: dashed; color: var(--text-3); border-color: var(--line-strong); }

/* Förhandsgranskning: klausul med förklaring bredvid */
.clause { display: grid; gap: var(--s-4); grid-template-columns: 1fr; padding: var(--s-5) 0; border-top: var(--border); }
@media (min-width: 900px) { .clause { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-7); } }
.clause__text { font-family: var(--font-display); font-size: 1.125rem; line-height: 1.55; }
.clause__num { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: .12em; color: var(--text-3); display: block; margin-bottom: var(--s-2); }
.clause__why { font-size: var(--fs-small); color: var(--text-2); border-left: 2px solid var(--line-strong); padding-left: var(--s-4); }
.clause__text mark { background: none; border-bottom: 1px dashed var(--ink); color: inherit; }

/* Integritetsrad */
.privacy-line { display: flex; gap: var(--s-2); align-items: center; font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.privacy-line::before { content: ""; width: 7px; height: 7px; background: var(--ok); border-radius: 50%; flex: none; }

/* Nyckeltal (kalkylatorresultat) */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: var(--border); }
.figure { padding: var(--s-4) 0; border-bottom: var(--border); }
.figure__value { font-family: var(--font-display); font-weight: 300; font-size: 2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.figure__label { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }

/* Knapp i sidhuvudet */
.btn--nav { min-height: 40px; padding: 8px 16px; color: var(--on-ink); border-color: rgba(245,242,235,.35); background: transparent; }
.btn--nav:hover { background: rgba(245,242,235,.08); color: var(--on-ink); }

/* Sidfotslänkar: tillräckligt stora klickytor i mobil */
.site-footer li { margin-bottom: 0; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 44px; }

.clause:first-child { border-top: 0; padding-top: 0; }
.site-footer a { text-decoration: none; }

/* Fristående kort i rutnät (paket) */
.cards { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 720px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Startsida ---------- */
.section__title { max-width: 22ch; margin-bottom: var(--s-7); }

.hero { padding-block: clamp(56px, 9vw, 112px) clamp(48px, 7vw, 88px); }
.hero__title { max-width: 14ch; }
.hero__lead { margin-top: var(--s-5); max-width: 46ch; }
.hero__privacy { margin-top: var(--s-6); color: var(--on-ink-2); }

.doors { list-style: none; margin: var(--s-7) 0 0; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 900px) { .doors { grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--on-ink-line); } }
.door { display: flex; flex-direction: column; border: 1px solid var(--on-ink-line); }
@media (min-width: 900px) { .door { border: 0; } .door + .door { border-left: 1px solid var(--on-ink-line); } }
.door__main {
  position: relative; display: grid; grid-template-columns: 40px 1fr 24px; column-gap: var(--s-4); align-items: center;
  padding: var(--s-5); color: var(--on-ink); text-decoration: none;
  transition: background-color var(--dur) var(--ease);
}
.door__main:hover { background: rgba(245,242,235,.06); color: var(--on-ink); }
.door__icon { grid-row: span 2; width: 40px; height: 40px; color: var(--on-ink); }
.door__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 300; line-height: 1.2; }
.door__text { grid-column: 2; font-size: var(--fs-small); color: var(--on-ink-2); }
.door__arrow { grid-row: 1 / span 2; grid-column: 3; width: 24px; height: 24px; color: var(--on-ink-2); transition: transform var(--dur) var(--ease); }
.door__main:hover .door__arrow { transform: translateX(3px); color: var(--on-ink); }
@media (min-width: 900px) {
  .door__main { grid-template-columns: 1fr 24px; padding: var(--s-6) var(--s-5) var(--s-5); row-gap: var(--s-2); }
  .door__icon { grid-row: auto; grid-column: 1 / -1; margin-bottom: var(--s-5); width: 48px; height: 48px; }
  .door__title { grid-column: 1; }
  .door__text { grid-column: 1; }
  .door__arrow { grid-row: 2; grid-column: 2; }
}
.door__links { list-style: none; margin: 0; padding: 0 var(--s-5) var(--s-3); }
.door__links li { border-top: 1px solid var(--on-ink-line); }
.door__links a { display: flex; align-items: center; min-height: 44px; font-size: var(--fs-small); color: var(--on-ink-2); text-decoration: none; }
.door__links a::before { content: "→"; margin-right: var(--s-2); font-family: var(--font-mono); font-size: var(--fs-eyebrow); }
.door__links a:hover { color: var(--on-ink); }

.howto { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; border-top: var(--border); }
@media (min-width: 720px) { .howto { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .howto { grid-template-columns: repeat(4, 1fr); } }
.howto__step { padding: var(--s-5) var(--s-5) var(--s-5) 0; border-bottom: var(--border); }
@media (min-width: 720px) { .howto__step { padding-right: var(--s-6); } }
.howto__num { display: block; font-family: var(--font-display); font-weight: 300; font-size: 2.5rem; line-height: 1; color: var(--accent); margin-bottom: var(--s-4); }
.howto__step h3 { margin-bottom: var(--s-2); }
.howto__step p { font-size: var(--fs-small); margin: 0; max-width: 32ch; }

.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 620px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
.tile { background: var(--surface); border: var(--border); padding: var(--s-5); }
.tile__stamp { margin-bottom: var(--s-5); }
.tile h3 { margin-bottom: var(--s-2); }
.tile p { margin: 0; }

.guides { list-style: none; margin: 0; padding: 0; border-top: var(--border); display: grid; grid-template-columns: 1fr; column-gap: var(--s-7); }
@media (min-width: 900px) { .guides { grid-template-columns: repeat(2, 1fr); } }
.guides li { border-bottom: var(--border); }
.guide-link { display: grid; grid-template-columns: 2.5rem 1fr 24px; gap: var(--s-3); align-items: center; min-height: 72px; padding: var(--s-4) 0; text-decoration: none; color: var(--text); }
.guide-link:hover { color: var(--text); }
.guide-link__num { color: var(--text-3); font-size: var(--fs-eyebrow); letter-spacing: .12em; }
.guide-link__title { display: block; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.25; }
.guide-link__sub { display: block; font-size: var(--fs-small); color: var(--text-2); margin-top: 2px; }
.guide-link__arrow { width: 22px; height: 22px; color: var(--text-3); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.guide-link:hover .guide-link__arrow { transform: translateX(3px); color: var(--ink); }
.guide-link:hover .guide-link__title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

.trust__icon svg { width: 24px; height: 24px; }
@media (min-width: 900px) { .nav a:not(.btn) { padding-block: 12px; } }

/* Kalkylatorkort som länk: hela kortet klickbart */
.tile--link { position: relative; transition: border-color var(--dur) var(--ease); }
.tile--link:hover { border-color: var(--ink); }
.tile--link h3 a { text-decoration: none; color: inherit; }
.tile--link h3 a::after { content: ""; position: absolute; inset: 0; }
.tile--link h3 a:hover { color: inherit; }

/* ---------- Kalkylatorsidor ---------- */
.calc-hero { padding-block: clamp(48px, 7vw, 88px) clamp(40px, 5vw, 64px); }
.calc-hero__title { max-width: 18ch; }
.calc { padding-top: var(--s-6); }
.calc__grid { display: grid; gap: var(--s-6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .calc__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); } .calc__result { position: sticky; top: 84px; } }
.calc__h { font-family: var(--font-display); font-size: 1.375rem; font-weight: 400; margin: var(--s-6) 0 var(--s-4); padding-top: var(--s-5); border-top: var(--border); }
.calc__form .flow__body > .calc__h:first-of-type, .calc__form .flow__body > .steps + .steps-label + .calc__h { border-top: 0; padding-top: 0; margin-top: var(--s-5); }
.calc__actions { justify-content: flex-end; }
@media (min-width: 960px) { .calc__actions { display: none; } }
.field__optional { font-weight: 400; color: var(--text-3); font-size: var(--fs-small); margin-left: 4px; }
.party { border-left: 2px solid var(--line-strong); padding-left: var(--s-4); margin-bottom: var(--s-5); }
.party__title { font-family: var(--font-ui); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tr-label); text-transform: uppercase; margin-bottom: var(--s-4); }
.derived { display: grid; gap: var(--s-1); padding: var(--s-4); background: var(--paper-2); border: var(--border); margin-bottom: var(--s-5); }
.derived__value { font-family: var(--font-display); font-size: 1.5rem; font-weight: 300; }
.derived.field--error { border-color: var(--error); }

.more { border-top: var(--border); border-bottom: var(--border); margin: var(--s-5) 0; }
.more > summary { cursor: pointer; list-style: none; min-height: var(--tap); display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-label); font-weight: 500; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: "+"; font-family: var(--font-mono); font-size: 1rem; color: var(--text-2); }
.more[open] > summary::after { content: "−"; }
.more[open] > summary { margin-bottom: var(--s-4); }

.result { background: var(--surface); border: 1px solid var(--ink); padding: var(--s-5); }
.result__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); border-bottom: var(--border); padding-bottom: var(--s-3); margin-bottom: var(--s-5); }
.result__head .eyebrow { margin: 0; }
.result__share { min-height: 44px; font-size: var(--fs-eyebrow); }
.result__empty { color: var(--text-2); font-size: var(--fs-small); margin: 0; }
.result__headline { font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); line-height: 1.05; margin: 0 0 var(--s-2); font-variant-numeric: tabular-nums; }
.result__sentence { margin: 0 0 var(--s-5); color: var(--text-2); }
.result__notes { margin-top: var(--s-5); }
.result .figures { margin-bottom: var(--s-5); }
.result .stop { margin: 0; }
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li + li { margin-top: var(--s-2); }

.kv { width: 100%; border-collapse: collapse; font-size: var(--fs-small); margin-bottom: var(--s-5); font-variant-numeric: tabular-nums; }
.kv caption { text-align: left; font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); padding-bottom: var(--s-2); }
.kv th, .kv td { padding: 9px 0; border-bottom: var(--border); text-align: left; font-weight: 400; vertical-align: top; }
.kv td { text-align: right; white-space: nowrap; padding-left: var(--s-3); }
.kv thead th { font-weight: 500; text-align: right; }
.kv thead th:first-child { text-align: left; }
.kv__sum th, .kv__sum td { font-weight: 600; border-bottom-color: var(--ink); }

.jurist-flag { display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); border: 1px dashed var(--line-strong); padding: 0 4px; line-height: 1.6; vertical-align: 2px; white-space: nowrap; }

/* Fast resultatrad i mobil */
.sumbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
  min-height: 56px; padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom)); background: var(--ink); color: var(--on-ink); text-decoration: none; }
.sumbar:hover { color: var(--on-ink); }
.sumbar__label { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--on-ink-2); }
.sumbar__value { font-family: var(--font-display); font-size: 1.375rem; font-weight: 300; font-variant-numeric: tabular-nums; }
.sumbar__value small { font-family: var(--font-ui); font-size: var(--fs-small); color: var(--on-ink-2); }
@media (min-width: 960px) { .sumbar { display: none !important; } }
body:has(.sumbar:not([hidden])) .site-footer { padding-bottom: calc(var(--s-6) + 56px); }
@media (max-width: 959px) { body:has(.sumbar:not([hidden])) .calc__actions { position: static; } }

/* ---------- Guidesidor ---------- */
.guide-hero { padding-block: clamp(48px, 7vw, 88px) clamp(40px, 5vw, 64px); }
.guide-hero__title { max-width: 20ch; }
.guide-hero__sub { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 300; color: var(--on-ink-2); margin: var(--s-3) 0 0; }
.crumb { color: inherit; text-decoration: none; }
.crumb:hover { color: var(--on-ink); }
.guide__grid { display: grid; grid-template-columns: 1fr; gap: var(--s-7); }
@media (min-width: 1000px) { .guide__grid { grid-template-columns: minmax(0, 1fr) 300px; } .guide__aside { position: sticky; top: 84px; align-self: start; } }
.aside-links a { display: inline-flex; min-height: 44px; align-items: center; }

.md { font-size: 1.0625rem; }
.md h2 { font-size: clamp(1.5rem, 1.3rem + .8vw, 1.875rem); margin: var(--s-7) 0 var(--s-4); }
.md h3 { margin: var(--s-6) 0 var(--s-3); }
.md > :first-child { margin-top: 0; }
.md ul, .md ol { padding-left: 1.25em; margin: 0 0 var(--s-4); }
.md li { margin-bottom: var(--s-2); }
.md li::marker { color: var(--text-3); }
.md strong { font-weight: 600; }
.md blockquote { margin: var(--s-5) 0; padding: var(--s-2) 0 var(--s-2) var(--s-5); border-left: 2px solid var(--ink); font-family: var(--font-display); font-size: 1.25rem; }
.md a { overflow-wrap: anywhere; }
.table-wrap { overflow-x: auto; margin: var(--s-5) 0; border: var(--border); background: var(--surface); }
.md table { border-collapse: collapse; width: 100%; font-size: var(--fs-small); min-width: 480px; }
.md th, .md td { padding: 10px 12px; border-bottom: var(--border); text-align: left; vertical-align: top; }
.md thead th { font-weight: 600; background: var(--paper-2); }
.md tr:last-child td { border-bottom: 0; }
.guide__grid > *, .calc__grid > * { min-width: 0; }
.result .figures { grid-template-columns: 1fr 1fr; border-top: 0; }
.result .figure__value { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); }
.calc__form .flow__body > .calc__h:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

/* ---------- Ingångssidor ---------- */
.entry-hero { padding-block: clamp(48px, 7vw, 96px) clamp(40px, 5vw, 64px); }
.entry-hero__row { display: flex; align-items: center; gap: var(--s-4); }
.entry-hero__icon { flex: none; width: clamp(40px, 6vw, 56px); height: clamp(40px, 6vw, 56px); color: var(--on-ink); }
.entry-hero .lead { max-width: 56ch; }
.entry-toc { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--on-ink-line); }
.entry-toc a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-ink-2); text-decoration: none; font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; }
.entry-toc a:hover { color: var(--on-ink); }
@media (min-width: 620px) { .tiles--1 { grid-template-columns: minmax(0, 420px); } }
@media (min-width: 1100px) { .tiles--2 { grid-template-columns: repeat(2, 1fr); } }

.agreements { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 900px) { .agreements { grid-template-columns: repeat(2, 1fr); } }
.agreement { background: var(--surface); border: var(--border); padding: var(--s-5); }
.agreement .card__meta { align-items: center; margin-bottom: var(--s-4); }
.agreement h3 { margin-bottom: var(--s-4); }

.faq { border-top: var(--border); max-width: 820px; }
.faq__group { font-size: var(--fs-h3); font-weight: 400; margin: var(--s-7) 0 var(--s-4); }
.faq__group:first-of-type { margin-top: 0; }
.faq__item { border-bottom: var(--border); }
.faq__item > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  min-height: 56px; padding: var(--s-3) 0; font-family: var(--font-display); font-size: 1.1875rem; line-height: 1.35; }
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::after { content: "+"; flex: none; font-family: var(--font-mono); font-size: 1rem; color: var(--text-2); }
.faq__item[open] > summary::after { content: "−"; }
.faq__item > summary:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.faq__answer { padding: 0 0 var(--s-5); max-width: var(--measure); font-size: 1rem; }
.faq__answer > :last-child { margin-bottom: 0; }
@media (max-width: 519px) { .use-list li { grid-template-columns: 1fr; gap: var(--s-1); } }

/* Kontrolldatum för guider och frågor (B-055) */
.check-line { font-size: var(--fs-small); color: var(--text-2); border-top: var(--border); border-bottom: var(--border); padding: var(--s-3) 0; margin: var(--s-5) 0 var(--s-6); max-width: var(--measure); }
.check-line__date { display: block; font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s-1); }
.guide__body > .check-line:first-child { margin-top: 0; }
.faq + .check-line { border-top: 0; margin-top: 0; }
.check-line--draft { margin-bottom: var(--s-6); }