/* ============================================================
   Jämförelsesidorna: /jamfor/, /jamfor/lakare-online/ och sidorna per
   vårdgivare (scripts/build-jamfor.py). Förut stod samma stilar inline i
   tolv sidor; nu en fil som laddas via partial:head-assets (13/10).
   Bygger på variablerna i info-page-v5.css.
   ============================================================ */

.jmf-hero { padding-top: 56px; padding-bottom: 24px; }
.jmf-hero h1 {
  font-size: var(--lp-text-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: var(--lp-leading-display);
  color: var(--text);
  margin: 0 0 18px;
}
.jmf-hero p.lead {
  font-size: var(--lp-text-lead);
  line-height: var(--lp-leading-lead);
  color: var(--text-dim);
  max-width: 62ch;
  margin: 0;
}
.jmf-note {
  max-width: 62ch;
  margin: 28px 0 0;
  padding: 18px 22px;
  background: var(--sage-soft);
  border: 1px solid var(--sage-tint);
  border-radius: var(--radius-card);
  font-size: var(--lp-text-body);
  line-height: var(--lp-leading-body);
  color: var(--text-dim);
}

/* ── Kort svar överst på /jamfor/ (13/10, beslut) ──
   För frågan "vilken digital viktklinik passar mig?": bara uppgifter som går
   att kontrollera (pris, bindning, vem som bedömer, när du betalar), med
   samma källor och datum som tabellen längre ned. Inga värderande omdömen. */
.jmf-svar {
  max-width: 68ch;
  margin: 0 0 24px;
  padding: 20px 24px 22px;
  border-radius: var(--lp-r-xl);
  /* Samma ruta som artiklarnas .kort-svar (kunskap/artikel-rik.css, 13/10). */
  background: #f2ece2;
  border: 1px solid #e2d5c1;
}
.jmf-svar::before { content: ""; display: block; width: 22px; height: 3px; margin-bottom: 10px; border-radius: 2px; background: var(--lp-campaign); }
.jmf-svar__etikett {
  margin: 0 0 8px;
  font-size: var(--lp-text-meta);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--lp-ink-muted);
}
.jmf-svar h2 {
  margin: 0 0 8px;
  font-size: var(--lp-text-title-sm);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: var(--lp-leading-title);
  color: var(--text);
}
.jmf-svar p,
.jmf-svar li {
  font-size: var(--lp-text-body);
  line-height: var(--lp-leading-body);
  color: var(--text);
}
.jmf-svar p { margin: 0; }
.jmf-svar ul { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.jmf-svar .jmf-svar__kalla { margin-top: 14px; font-size: var(--lp-text-small); line-height: var(--lp-leading-small); color: var(--text-mute); }

/* ── Frågorna ──
   Beslut 13/10: varje fråga var ett kort med svarsrader och avdelare, och
   /jamfor/ blev 12 000 px hög på mobil. Nu en lista med hårlinje mellan
   frågorna. Svaren står som rader med etikett och värde (Lipio, och på
   sidorna per vårdgivare den andra vårdgivaren), och texten om varför
   frågan spelar roll fälls ut i en details. */
.jmf-crit { padding-top: 48px; padding-bottom: 8px; }
.jmf-crit > h2 {
  font-size: clamp(var(--lp-text-title-lg), 1.5rem + 1.6vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 10px;
}
.jmf-crit > p.sub {
  font-size: var(--lp-text-body);
  line-height: var(--lp-leading-body);
  color: var(--text-dim);
  max-width: 60ch;
  margin: 0 0 28px;
}
.crit { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.crit__item { padding: 22px 0 10px; border-bottom: 1px solid var(--line); }
.crit__q {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  font-size: var(--lp-text-title-sm);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: var(--lp-leading-title);
  color: var(--text);
}
.crit__num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: -2px;
  border-radius: var(--radius-pill);
  background: var(--sage);
  color: #fff;
  font-size: var(--lp-text-small);
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.crit__svar { margin: 12px 0 0 40px; max-width: 74ch; }
.crit__rad { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 4px 16px; padding: 12px 0; }
.crit__rad + .crit__rad { border-top: 1px solid var(--line-soft); }
.crit__rad dt {
  padding-top: 3px;
  font-size: var(--lp-text-meta);
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: var(--lp-leading-meta);
  text-transform: uppercase;
  color: var(--muted);
}
.crit__rad--lipio dt { color: var(--sage); }
.crit__rad dd { margin: 0; font-size: var(--lp-text-body); line-height: var(--lp-leading-body); color: var(--text); }
.crit__rad dd a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.crit__src { white-space: nowrap; }
.crit__rad dd .crit__src { color: var(--muted); font-size: var(--lp-text-small); }
.crit__saknas { color: var(--muted); font-style: italic; }
.crit__varfor { margin: 0 0 0 40px; }
.crit__varfor > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-size: var(--lp-text-small);
  font-weight: 600;
  color: var(--sage);
  -webkit-tap-highlight-color: transparent;
}
.crit__varfor > summary::-webkit-details-marker { display: none; }
.crit__varfor > summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  background: linear-gradient(currentColor, currentColor) center / 10px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 10px no-repeat;
  transition: transform var(--lp-dur) var(--lp-ease);
}
.crit__varfor[open] > summary::after { transform: rotate(45deg); }
.crit__varfor > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.crit__varfor > summary:focus-visible { outline: none; box-shadow: var(--lp-focus); border-radius: var(--lp-r-sm); }
.crit__varfor p {
  margin: 0 0 12px;
  max-width: 68ch;
  font-size: var(--lp-text-body);
  line-height: var(--lp-leading-body);
  color: var(--text-dim);
}
@media (max-width: 560px) {
  .crit__svar, .crit__varfor { margin-left: 0; }
  .crit__rad { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .crit__varfor > summary::after { transition: none; }
}

/* ── Tabellerna ── */
.jmf-vs { margin-top: clamp(46px, 7vw, 78px); }
.vs-wrap { margin-top: 24px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vs { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--lp-text-body); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
.vs__cap { text-align: left; font-size: var(--lp-text-meta); color: var(--muted); padding: 14px clamp(14px, 2.4vw, 20px) 0; caption-side: top; }
.vs__datum { white-space: nowrap; }
.vs th, .vs td { text-align: left; padding: 14px clamp(12px, 2.2vw, 18px); border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.vs thead th { font-size: var(--lp-text-meta); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.vs tbody th { font-weight: 700; white-space: nowrap; }
.vs tbody tr:last-child th, .vs tbody tr:last-child td { border-bottom: 0; }
.vs__self th, .vs__self td { background: var(--sage-soft); }
.vs a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.vs__honest { max-width: 68ch; margin-top: 22px; }
.vs__h3 { margin-top: 30px; font-size: var(--lp-text-title-sm); line-height: var(--lp-leading-title); }
.vs__list { max-width: 68ch; margin-top: 14px; padding-left: 20px; display: grid; gap: 12px; }
.vs__src { margin-top: 26px; }
/* Data styr formen (13/10): tabellsiffror. I pristabellen på /jamfor/
   (.vs--pris) står summan för sex månader högerställd, och i tabellen över
   sex månader på sidorna per vårdgivare (.vs--belopp) alla belopp. */
.vs { font-variant-numeric: tabular-nums; }
.vs--pris thead th:last-child, .vs--pris td:last-child { text-align: right; }
.vs--pris td:last-child { white-space: nowrap; } /* "6 965 kr" bröts mellan tusental */
.vs--belopp thead th:not(:first-child), .vs--belopp td { text-align: right; }
.vs--belopp td { white-space: nowrap; }

/* Mobil (13/10, beslut): tabellen scrollade i sidled. Nu ett block per
   vårdgivare, med etiketten till vänster och värdet till höger. Etiketten
   kommer ur data-label; rubrikraden finns kvar för skärmläsare, och
   role-attributen i markupen behåller tabellens semantik. */
@media (max-width: 720px) {
  .vs-wrap { overflow: visible; }
  .vs--stack,
  .vs--stack caption,
  .vs--stack tbody,
  .vs--stack tr,
  .vs--stack th,
  .vs--stack td { display: block; }
  .vs--stack { min-width: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
  .vs--stack thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .vs--stack .vs__cap { padding: 0 0 2px; }
  .vs--stack tbody tr { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; }
  .vs--stack tbody th { padding: 14px 16px 12px; border-bottom: 1px solid var(--line-soft); font-size: var(--lp-text-lead); line-height: var(--lp-leading-title); white-space: normal; }
  .vs--stack td,
  .vs--pris td:last-child,
  .vs--belopp td {
    position: relative;
    padding: 9px 16px 9px 42%;
    text-align: right;
    white-space: normal;
    font-size: var(--lp-text-body);
    line-height: var(--lp-leading-body);
  }
  .vs--stack td::before {
    content: attr(data-label);
    position: absolute;
    left: 16px;
    top: 9px;
    width: calc(42% - 28px);
    text-align: left;
    font-size: var(--lp-text-small);
    line-height: var(--lp-leading-body);
    color: var(--muted);
  }
  .vs--stack tbody tr td:last-child { border-bottom: 0; }
}

/* ── En vårdgivare i taget (/jamfor/) ──
   Tio länkar som en kompakt lista i stället för tio kort (13/10). */
.jmf-lankar {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
  border-top: 1px solid var(--line);
}
.jmf-lankar a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 52px;
  height: 100%;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  line-height: var(--lp-leading-title);
  color: var(--text);
  text-decoration: none;
  transition: color var(--lp-dur-fast) var(--lp-ease);
}
.jmf-lankar a::after { content: "→"; flex: none; color: var(--sage); transition: transform var(--lp-dur-fast) var(--lp-ease); }
.jmf-lankar a:hover { color: var(--sage); text-decoration: none; }
.jmf-lankar a:hover::after { transform: translateX(3px); }
@media (min-width: 900px) { .jmf-lankar { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; } }

/* ── Lipios månadskostnad ── */
.jmf-total { padding-top: 52px; padding-bottom: 8px; }
.jmf-total h2 {
  font-size: clamp(var(--lp-text-title-lg), 1.5rem + 1.6vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 10px;
}
.jmf-total p {
  font-size: var(--lp-text-body);
  line-height: var(--lp-leading-body);
  color: var(--text-dim);
  max-width: 62ch;
  margin: 0 0 16px;
}
.costs {
  margin: 26px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface);
  max-width: 620px;
}
.costs__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 16px clamp(18px, 3vw, 26px);
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--lp-text-body);
  line-height: var(--lp-leading-body);
  font-variant-numeric: tabular-nums;
}
.costs__row:last-child { border-bottom: 0; }
.costs__row--sum { background: var(--bg-soft); font-weight: 700; color: var(--text); }
.costs__label { color: var(--text-dim); }
.costs__row--sum .costs__label { color: var(--text); }
.costs__val { flex: none; font-weight: 600; color: var(--text); white-space: nowrap; }

/* ── Avslutande knapp, juridik och frågor ── */
.jmf-cta {
  margin: 48px 0 8px;
  padding: clamp(28px, 4vw, 40px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-card);
  max-width: 720px;
}
.jmf-cta h2 {
  font-size: var(--lp-text-title);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 10px;
}
.jmf-cta p {
  font-size: var(--lp-text-body);
  line-height: var(--lp-leading-body);
  color: var(--text-dim);
  margin: 0 0 22px;
  max-width: 56ch;
}
.jmf-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--sage);
  color: #fff;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: var(--lp-text-body);
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
}
.jmf-cta__btn:hover { background: var(--sage-hover); transform: translateY(-1px); color: #fff; text-decoration: none; }
.jmf-cta__sub { font-size: var(--lp-text-small); color: var(--text-mute); margin: 14px 0 0; }

.jmf-legal {
  padding-top: 40px;
  padding-bottom: 8px;
  font-size: var(--lp-text-small);
  line-height: var(--lp-leading-small);
  color: var(--text-mute);
  max-width: 70ch;
}

/* Vanliga frågor på sidorna per vårdgivare: sajtens .lp-faq (site-chrome.css),
   mot sidans vänsterkant som resten av sidan (Kanter 13/10). */
.v3-faq .v3-faq__head { margin-left: 0; padding-left: 0; text-align: left; }
.jmf-faq { max-width: 820px; }

@media (max-width: 640px) {
  .jmf-hero { padding-top: 36px; }
  .jmf-svar { padding: 18px 16px 20px; }
  /* Etiketten till vänster och beloppet till höger; ett långt belopp bryts
     till egen rad, fortfarande högerställt. */
  .costs__row { flex-wrap: wrap; column-gap: 16px; row-gap: 2px; }
  .costs__val { margin-left: auto; text-align: right; }
}