/* ── /priser och Plus-märket ──────────────────────────────────────────────────
   Prissidans egna delar (tabellen och exemplen) och märket som står vid Plus-sakerna i appen. Märket ligger
   här och inte i skalet så att allt som säljer Plus syns på ett ställe. Korten och frågorna delar
   startsidans stil i sida-start.css. */

/* Märket: samma mjuka sol som "Växer med huset" på Plus-kortet, så att det känns igen. Texten bär
   --on-soft på en -soft-yta i båda lägena. Ordet "Plus" står utskrivet: färgen säger ingenting ensam. */
.plus-merke {
  display: inline-flex; align-items: center; flex: none; padding: 1px 8px; border-radius: var(--r-pill);
  background: var(--sun-soft); color: var(--on-soft); border: var(--bw-thin) solid var(--line-soft);
  font: 700 11.5px/1.5 var(--f-body); letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
}
.plus-merke:hover { text-decoration: underline; text-underline-offset: 2px; }
.plus-merke-rad {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--space-2);
  margin: var(--space-2) 0; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2);
}
.plus-merke-rad > span { min-width: 0; flex: 1 1 16ch; }

/* ── Sidhuvudet ─────────────────────────────────────────────────────────── */
.priser .priser-dag { font-weight: 650; font-size: 17px; line-height: 1.5; max-width: 52ch; }
.priser-ingress { margin: 0; max-width: 62ch; line-height: 1.55; color: var(--ink-2); }
.start-band .priser-ingress { color: var(--on-soft); }

/* De korta korten: listan står i tabellen under. */
.start-pris-kort { margin: 0; line-height: 1.5; color: var(--ink); }
.start-pris-alla { justify-self: start; font-weight: 650; color: var(--ink); text-underline-offset: 4px; }

/* ── Tabellen ───────────────────────────────────────────────────────────── */
.priser-tabell-ram {
  border-radius: var(--r-l); background: var(--card); border: var(--bw-thin) solid var(--line);
  box-shadow: var(--lift); overflow: hidden;
}
.priser-tabell { width: 100%; border-collapse: collapse; color: var(--ink); font-size: 15.5px; }
.priser-tabell th, .priser-tabell td { padding: 12px 16px; text-align: left; vertical-align: top; }
.priser-tabell thead th {
  font: 650 18px/1.2 var(--f-display); padding-block: 18px 14px; border-bottom: var(--bw) solid var(--ink);
}
.priser-tabell thead td { border-bottom: var(--bw) solid var(--ink); }
/* Plus-kolumnen får en egen ton så att ögat hittar den. Bocken och ordet bär meningen, tonen bara riktningen. */
.priser-tabell .priser-tabell-plus { background: color-mix(in srgb, var(--sun-soft) 55%, var(--card)); width: 30%; }
.priser-tabell td:not(.priser-tabell-plus), .priser-tabell thead th:not(.priser-tabell-plus) { width: 26%; }
.priser-tabell tbody th[scope="row"] { font-weight: 500; }
.priser-tabell tbody th small { display: block; margin-top: 2px; font-size: var(--fs-small); color: var(--ink-2); font-weight: 400; line-height: 1.45; }
.priser-tabell tbody tr + tr > * { border-top: var(--bw-thin) solid var(--line-soft); }
.priser-grupp th {
  padding-top: 28px; background: var(--card); border-top: var(--bw-thin) solid var(--line);
}
.priser-tabell tbody:first-of-type .priser-grupp th { border-top: 0; padding-top: 20px; }
.priser-grupp-namn { display: block; font: 650 20px/1.2 var(--f-display); letter-spacing: -0.01em; }
.priser-grupp-varfor { display: block; margin-top: 4px; font-size: var(--fs-small); font-weight: 400; color: var(--ink-2); }
.priser-cell { display: inline-grid; grid-template-columns: 16px auto; gap: 8px; align-items: start; line-height: 1.4; }
.priser-cell-ikon { margin-top: 2px; }
.priser-cell.ja .priser-cell-ikon { color: var(--mint-ink); }
.priser-cell.nej { color: var(--ink-2); }

/* ── Exemplen ───────────────────────────────────────────────────────────── */
.priser-exempel { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.priser-ex { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-6); border-radius: var(--r-l); color: var(--ink); }
.priser-ex > * { margin: 0; }
.priser-ex p { line-height: 1.55; }
.guide .start .priser-ex h3 { font: 650 22px/1.2 var(--f-display); letter-spacing: -0.01em; }
.priser-ex-merke {
  justify-self: start; padding: 2px 10px; border-radius: var(--r-pill); border: var(--bw-thin) dashed var(--ink-2);
  font: 700 12px/1.4 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
}
.priser-ex-tal { display: grid; gap: 2px; margin-top: var(--space-2) !important; }
.priser-ex-tal .tabular { font: 650 clamp(32px, 4vw, 40px)/1.05 var(--f-display); letter-spacing: -0.03em; }
.priser-ex-tal small { font-size: var(--fs-small); color: var(--ink-2); }
.priser-ex-jamfor { padding-top: var(--space-2); border-top: var(--bw-thin) solid var(--line-soft); font-size: var(--fs-small); }

/* Andra knappen i avslutningen: kontur i papperets färg mot bläcket. */
.btn.priser-slut-plus, .btn.priser-slut-plus:hover {
  background: transparent; color: var(--paper); border: var(--bw) solid var(--paper);
}

@media (max-width: 760px) {
  .priser-tabell { font-size: 14.5px; }
  .priser-tabell th, .priser-tabell td { padding: 10px 8px; }
  .priser-tabell thead th { font-size: 16px; }
  .priser-tabell .priser-tabell-plus, .priser-tabell td:not(.priser-tabell-plus),
  .priser-tabell thead th:not(.priser-tabell-plus) { width: 27%; }
  .priser-cell { grid-template-columns: 14px auto; gap: 4px; }
  .priser-tabell-ram { margin-inline: -8px; }
  .priser-ex { padding: var(--space-4); }
}

/* Smalast: tre kolumner får inte plats med bocken bredvid ordet, och "Obegränsat" klipptes vid 360 px.
   Bocken ställs ovanför ordet, och ett långt ord får avstavas i stället för att skjuta ut tabellen. */
@media (max-width: 440px) {
  .priser-tabell { font-size: 14px; table-layout: fixed; }
  .priser-tabell th, .priser-tabell td { padding: 10px 6px; }
  .priser-tabell th[scope="row"], .priser-tabell thead td { width: 40%; padding-left: 12px; }
  .priser-tabell .priser-tabell-plus, .priser-tabell td:not(.priser-tabell-plus),
  .priser-tabell thead th:not(.priser-tabell-plus) { width: 30%; }
  .priser-grupp th { padding-left: 12px; }
  .priser-cell { grid-template-columns: 1fr; gap: 2px; }
  .priser-tabell th, .priser-cell { hyphens: auto; overflow-wrap: anywhere; }
}