/* ---------------------------------------------------------------
   Grundskal — tokens och komponenter.

   ÄNDRA IDENTITET HÄR: färger, typsnitt, radie och rytm ligger som
   variabler i :root. Byt dem, så följer hela sajten med. Reglerna under
   är komponenter som redan är formgivna — bygg sidor genom att KOMBINERA
   dem, inte genom att skriva nya varianter av samma sak.
   --------------------------------------------------------------- */

:root {
  --paper: #f6f1ea;
  --panel: #ede5d8;
  --ink: #2a2520;
  --muted: #7a6f5f;
  --accent: #a8763e;
  --accent-dark: #8a5e2e;
  --accent-soft: rgba(168, 118, 62, 0.13);
  --line: rgba(42, 37, 32, 0.12);
  --radius: 10px;
  --font-display: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  /* Rytm. En sida ser genomtänkt ut när avstånden kommer ur en skala i
     stället för ur en gissning per sektion. */
  --steg-1: 8px;
  --steg-2: 16px;
  --steg-3: 28px;
  --steg-4: 48px;
  --steg-5: clamp(56px, 9vw, 104px);

  /* Radbredd. Löptext bredare än så här blir tröttsam att läsa — det var
     det som gjorde den första kundsidan svårläst vid 1160 pixlar. */
  --text-bredd: 68ch;
  --sid-bredd: 1120px;
}

/* MÖRKT LÄGE — sajten följer besökarens systeminställning.
 *
 * Har du en dator inställd på mörkt läge ser DU de här färgerna, inte
 * de ovanför. Det förvånar de flesta: man ber om en ljus, beige sajt,
 * tittar på den, och ser en mörk. Båda paletterna är sajtens.
 *
 * VILL DU ATT SAJTEN ALLTID SER LIKADAN UT: ta bort hela blocket nedan
 * och byt "color-scheme: light dark" till "color-scheme: light" i :root.
 * Inget annat behöver ändras. Be gärna byggassistenten göra det.
 */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1e1a15;
    --panel: #2a241e;
    --ink: #ede5d8;
    --muted: #a89b88;
    --accent: #d4a464;
    --accent-dark: #e0b878;
    --accent-soft: rgba(212, 164, 100, 0.16);
    --line: rgba(237, 229, 216, 0.14);
  }
  /* Platshållarbilden är ljus och skulle lysa som en lampa i en mörk
     sida. Regeln träffar BARA platshållaren (dess src är en inbäddad
     svg) — riktiga foton som byts in här rörs inte. */
  .media[src^="data:image/svg+xml"] { filter: brightness(0.32) saturate(0.7); }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--steg-2);
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 var(--steg-2); max-width: var(--text-bredd); }
a { color: inherit; }

img, svg { max-width: 100%; display: block; }

.lead { font-size: 1.12rem; color: var(--muted); }

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--steg-2);
}

/* ---- sidhuvud ---- */
.topbar {
  display: flex;
  align-items: center;
  gap: var(--steg-3);
  padding: var(--steg-2) clamp(20px, 5vw, 56px);
  border-bottom: 1px solid var(--line);
  /* Genomskinlig och suddad: innehållet under skiner igenom när man
     rullar, i stället för att möta en tvärt avklippt platta. */
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.14rem;
  text-decoration: none;
}

/* Menyn. Två lägen ur EN uppmärkning: en rad på skärmar som har plats,
   en hopfällbar panel på dem som inte har det.

   Kryssrutan är växeln. Den låter konstigt, men den är det enda sättet
   att fälla ut en panel UTAN JavaScript som fungerar i alla webbläsare:
   <details> döljer sitt innehåll så länge den är stängd — även med
   display: contents — så på bred skärm försvann hela menyn. (Verifierat,
   inte gissat: första versionen renderade ett sidhuvud med enbart
   logotypen.) Rutan är fokuserbar och styrbar med tangentbord; etiketten
   är den synliga knappen.

   Den vanliga 90-talsfällan är att låta länkarna radbryta till en
   vänsterställd hög under logotypen när bredden tar slut. Därför blir de
   en panel i stället, aldrig en trasig rad. */
.meny-vaxel {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}

.meny-knapp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding: 8px 14px 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  cursor: pointer;
  user-select: none;
}
.meny-knapp:hover { border-color: var(--ink); }
.meny-vaxel:focus-visible + .meny-knapp { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Ikonen är tre streck som viks till ett kryss när menyn är öppen —
   ritad i CSS, så den ärver färgen och behöver ingen bildfil. */
.meny-ikon,
.meny-ikon::before,
.meny-ikon::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.18s ease, background 0.18s ease;
}
.meny-ikon { position: relative; }
.meny-ikon::before,
.meny-ikon::after { content: ""; position: absolute; left: 0; }
.meny-ikon::before { top: -6px; }
.meny-ikon::after { top: 6px; }
.meny-vaxel:checked + .meny-knapp .meny-ikon { background: transparent; }
.meny-vaxel:checked + .meny-knapp .meny-ikon::before { transform: translateY(6px) rotate(45deg); }
.meny-vaxel:checked + .meny-knapp .meny-ikon::after { transform: translateY(-6px) rotate(-45deg); }

.meny-ord { font-weight: 500; }

.topnav {
  display: none;
  position: absolute;
  right: clamp(20px, 5vw, 56px);
  top: calc(100% - 6px);
  gap: var(--steg-1);
  min-width: 220px;
  padding: var(--steg-2);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.13);
}
.meny-vaxel:checked ~ .topnav { display: grid; }

/* :not(.topnav-cta) — knappen i menyn är en KNAPP, inte en länk i raden.
   Utan undantaget vinner .topnav a över .btn-primary på specificitet och
   ger grön text på grön botten, med länkens padding i stället för
   knappens. (Sågs i renderingen innan det här skrevs.) */
.topnav a:not(.topnav-cta) {
  text-decoration: none;
  color: var(--muted);
  padding: 8px 10px;
  border-radius: calc(var(--radius) - 8px);
}
.topnav a:not(.topnav-cta):hover { color: var(--ink); background: var(--panel); }
.topnav a[aria-current="page"] { color: var(--ink); background: var(--accent-soft); }
.topnav-cta { margin-top: var(--steg-1); text-align: center; }

/* Från och med här finns plats för en rad. Då upphör panelen att vara en
   panel: växeln och knappen göms, och länkarna lägger sig som en rad i
   sidhuvudet — oavsett om kryssrutan råkar vara ikryssad. */
@media (min-width: 760px) {
  .meny-vaxel,
  .meny-knapp { display: none; }

  .topnav,
  .meny-vaxel:checked ~ .topnav {
    display: flex;
    align-items: center;
    position: static;
    gap: var(--steg-3);
    min-width: 0;
    padding: 0;
    margin-left: auto;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .topnav a:not(.topnav-cta) {
    padding: 4px 0;
    border-radius: 0;
    border-bottom: 2px solid transparent;
  }
  .topnav a:not(.topnav-cta):hover { background: none; }
  .topnav a[aria-current="page"]:not(.topnav-cta) {
    background: none;
    border-bottom-color: var(--accent);
  }
  .topnav-cta {
    margin-top: 0;
    margin-left: var(--steg-2);
  }
  .topnav-cta:hover { background: var(--accent-dark); }
}

/* ---- knappar ---- */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.98rem;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.btn + .btn { margin-left: var(--steg-1); }
.btn-primary { background: var(--accent); color: var(--paper); }
.btn-primary:hover { background: var(--accent-dark); }
.btn-ghost { border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-small { padding: 8px 16px; font-size: 0.9rem; }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- sektioner ---- */
.hero {
  padding: var(--steg-5) clamp(20px, 5vw, 56px);
  border-bottom: 1px solid var(--line);
}
.hero-inner { max-width: var(--sid-bredd); margin: 0 auto; }
.hero-actions { margin-top: var(--steg-3); max-width: none; }

.page-head {
  padding: var(--steg-5) clamp(20px, 5vw, 56px) var(--steg-4);
  max-width: var(--sid-bredd);
  margin: 0 auto;
}

.section {
  padding: var(--steg-5) clamp(20px, 5vw, 56px);
  max-width: var(--sid-bredd);
  margin: 0 auto;
}
.section-tinted {
  background: var(--panel);
  max-width: none;
}
.section-tinted > * { max-width: var(--sid-bredd); margin-left: auto; margin-right: auto; }
.section-head { margin-bottom: var(--steg-4); }

/* ---- rutnät och kort ---- */
.grid { display: grid; gap: var(--steg-3); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--steg-3);
}
.card-title { margin-bottom: var(--steg-1); }
.card-text { color: var(--muted); margin: 0; }

/* ---- text bredvid bild ---- */
.split {
  display: grid;
  gap: var(--steg-4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: center;
}
.split-text > :last-child { margin-bottom: 0; }

.media {
  display: block;
  width: 100%;
  border-radius: var(--radius);
  background: var(--panel);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ---- fakta, frågor, citat ---- */
.fakta { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--steg-1) var(--steg-3); }
.fakta dt { font-family: var(--font-display); font-weight: 500; color: var(--muted); }
.fakta dd { margin: 0; }

.faq { display: grid; gap: var(--steg-2); }
.faq-item { border-top: 1px solid var(--line); padding-top: var(--steg-2); }
.faq-fraga { margin-bottom: var(--steg-1); }
.faq-svar { color: var(--muted); margin: 0; }

.quote {
  margin: 0;
  border-left: 3px solid var(--accent);
  padding-left: var(--steg-3);
  font-size: 1.2rem;
}
.quote-author { font-size: 0.95rem; color: var(--muted); margin: 0; }

/* ---- uppmaning ---- */
.cta {
  background: var(--accent);
  color: var(--paper);
  text-align: center;
  padding: var(--steg-5) clamp(20px, 5vw, 56px);
}
.cta p { margin-left: auto; margin-right: auto; }
.cta .lead { color: var(--paper); opacity: 0.85; }
.cta .btn-primary { background: var(--paper); color: var(--accent); }
.cta .btn-primary:hover { background: var(--panel); }

/* ---- formulär ---- */
.formular { max-width: 520px; }
.falt { margin-bottom: var(--steg-2); max-width: none; }
.falt-etikett { display: block; margin-bottom: var(--steg-1); font-family: var(--font-display); font-size: 0.92rem; }
.falt-input {
  width: 100%;
  font: inherit;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 6px);
  padding: 11px 13px;
}
.falt-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.falt-textarea { resize: vertical; }

/* ---- sidfot ---- */
.footer {
  border-top: 1px solid var(--line);
  padding: var(--steg-4) clamp(20px, 5vw, 56px);
  text-align: center;
}
.footer p { max-width: none; }
.footer-mark { font-family: var(--font-display); font-weight: 600; margin-bottom: var(--steg-2); }
.footer-nav { display: flex; gap: var(--steg-3); justify-content: center; flex-wrap: wrap; margin-bottom: var(--steg-2); }
.footer-nav a { color: var(--muted); text-decoration: none; }
.footer-nav a:hover { color: var(--ink); }
.footer-line { color: var(--muted); font-size: 0.95rem; }
.footer-small { color: var(--muted); font-size: 0.85rem; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ================================================================
   v2-tillägg — exklusivt grundskal.
   Allt nedan LÄGGS TILL; inget ovanför är ändrat. Tre delar:
   1. Typografisk röst: Instrument Serif som accentstämma.
   2. Manuell ljus/mörk-växel (samma treskiktsmönster som övriga mallar).
   3. Nya byggklossar: siffror, förtroenderad, processteg, uppgraderat citat.
   ================================================================ */

:root { --font-accent: "Instrument Serif", Georgia, serif; }

/* Accentordet: kursiv serif i accentfärgen. Ett ord per rubrik räcker —
   det är kontrasten mot grotesken som ger det exklusiva, inte mängden. */
.accent-ord {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: 0;
}

/* Större scen: rubriken bär sidan. */
.hero h1 {
  font-size: clamp(2.6rem, 6.5vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  max-width: 16ch;
}
.hero .lead { font-size: 1.2rem; max-width: 46ch; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--accent); }

/* Siffror under scenen — byt mot verksamhetens egna. */
.stats {
  display: grid;
  gap: var(--steg-3);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: var(--steg-4);
  padding-top: var(--steg-3);
  border-top: 1px solid var(--line);
}
.stat-tal {
  margin: 0;
  font-family: var(--font-accent);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat-ord { margin: 4px 0 0; color: var(--muted); font-size: 0.95rem; }

/* Förtroenderaden: uppdragsgivare eller omnämnanden i en tunn list. */
.fortroende {
  border-block: 1px solid var(--line);
  padding: 18px clamp(20px, 5vw, 56px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 36px;
  align-items: baseline;
  justify-content: center;
  color: var(--muted);
}
.fortroende-etikett { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; }
.fortroende span:not(.fortroende-etikett) { font-family: var(--font-accent); font-size: 1.08rem; }

/* Processteg med serifnumrering. */
.steg-rad {
  display: grid;
  gap: var(--steg-3);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  counter-reset: steg;
}
.steg { border-top: 2px solid var(--ink); padding-top: var(--steg-2); counter-increment: steg; }
.steg::before {
  content: counter(steg, decimal-leading-zero);
  display: block;
  margin-bottom: var(--steg-1);
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--accent);
}
.steg h3 { margin-bottom: var(--steg-1); }

/* Citatet sätts som ett menyblad: centrerad serif i stället för
   vänsterkant med streck. */
.quote { border-left: 0; padding-left: 0; text-align: center; max-width: 760px; margin-inline: auto; }
.quote p:first-child {
  font-family: var(--font-accent);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.35;
  max-width: none;
}
.quote-author { margin-top: var(--steg-2); }
.quote-author::before { content: "— "; color: var(--accent); }

/* Kort och sidfot: små lyft. */
.card { transition: border-color 0.18s ease, transform 0.18s ease; }
.card:hover { border-color: var(--accent); transform: translateY(-2px); }
.footer-mark { font-family: var(--font-accent); font-size: 1.5rem; font-weight: 400; }
.cta h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.cta .accent-ord { color: inherit; }

/* MANUELL LJUS/MÖRK-VÄXEL. Mörkt läge fanns men följde bara systemet.
   Tre lager: sparat val (tema.js) > växeln (ren CSS via :has(), fungerar
   utan skript) > systemet. Kryssrutan VÄNDER på systemets läge. */
:root[data-tema="mork"] {
    color-scheme: dark;
    --paper: #1e1a15;
    --panel: #2a241e;
    --ink: #ede5d8;
    --muted: #a89b88;
    --accent: #d4a464;
    --accent-dark: #e0b878;
    --accent-soft: rgba(212, 164, 100, 0.16);
    --line: rgba(237, 229, 216, 0.14);
}
:root[data-tema="mork"] .media[src^="data:image/svg+xml"] { filter: brightness(0.32) saturate(0.7); }
:root[data-tema="ljus"] {
    color-scheme: light;
    --paper: #f6f1ea;
    --panel: #ede5d8;
    --ink: #2a2520;
    --muted: #7a6f5f;
    --accent: #a8763e;
    --accent-dark: #8a5e2e;
    --accent-soft: rgba(168, 118, 62, 0.13);
    --line: rgba(42, 37, 32, 0.12);
}
:root[data-tema="ljus"] .media[src^="data:image/svg+xml"] { filter: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]):has(.tema-input:checked) {
    color-scheme: light;
    --paper: #f6f1ea;
    --panel: #ede5d8;
    --ink: #2a2520;
    --muted: #7a6f5f;
    --accent: #a8763e;
    --accent-dark: #8a5e2e;
    --accent-soft: rgba(168, 118, 62, 0.13);
    --line: rgba(42, 37, 32, 0.12);
  }
  :root:not([data-tema]):has(.tema-input:checked) .media[src^="data:image/svg+xml"] { filter: none; }
}
@media (prefers-color-scheme: light) {
  :root:not([data-tema]):has(.tema-input:checked) {
    color-scheme: dark;
    --paper: #1e1a15;
    --panel: #2a241e;
    --ink: #ede5d8;
    --muted: #a89b88;
    --accent: #d4a464;
    --accent-dark: #e0b878;
    --accent-soft: rgba(212, 164, 100, 0.16);
    --line: rgba(237, 229, 216, 0.14);
  }
  :root:not([data-tema]):has(.tema-input:checked) .media[src^="data:image/svg+xml"] { filter: brightness(0.32) saturate(0.7); }
}

.tema {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
  flex: none;
}
.tema:hover { border-color: var(--accent); color: var(--accent); }
.tema:has(.tema-input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.tema-input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.tema-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tema-mane { display: block; }
.tema-sol { display: none; }
:root[data-tema="mork"] .tema-mane { display: none; }
:root[data-tema="mork"] .tema-sol { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]):not(:has(.tema-input:checked)) .tema-mane { display: none; }
  :root:not([data-tema]):not(:has(.tema-input:checked)) .tema-sol { display: block; }
}
@media (prefers-color-scheme: light) {
  :root:not([data-tema]):has(.tema-input:checked) .tema-mane { display: none; }
  :root:not([data-tema]):has(.tema-input:checked) .tema-sol { display: block; }
}

/* ================================================================
   BASH2 — bastuklubb för driftfolk.
   Tillägg: logotyp, hero-tema, pristabell, kvitto-detajl.
   ================================================================ */

/* Logotyp: BASH2 — teknisk, robust, industriell. */
.brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.22rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
}
.brand-siffra {
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: 1.28rem;
  color: var(--accent);
}
.footer-mark {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.06em;
}
.footer-mark .footer-siffra {
  font-family: var(--font-accent);
  font-weight: 400;
  color: var(--accent);
}

/* Hero med varm, ångig atmosfär. */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 70% 20%, var(--accent-soft), transparent 70%),
    var(--paper);
}
.hero h1 { max-width: 18ch; }
.hero-grid {
  display: grid;
  gap: var(--steg-4);
  grid-template-columns: 1fr;
  align-items: center;
}
.hero-text { max-width: none; }
.hero-bild {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  order: -1;
}
@media (min-width: 880px) {
  .hero-grid {
    grid-template-columns: 1.2fr 1fr;
  }
  .hero-bild { order: 0; }
}

/* Förtroenderaden — bastuklubbens "kunder" är tekniska miljöer. */
.fortroende span:not(.fortroende-etikett) {
  font-family: var(--font-display);
  font-size: 0.98rem;
  letter-spacing: 0.02em;
}

/* Pristabell. */
.priser {
  display: grid;
  gap: var(--steg-3);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.pris-kort {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--steg-3);
  display: flex;
  flex-direction: column;
  gap: var(--steg-2);
}
.pris-kort-ursval {
  border-color: var(--accent);
  border-width: 2px;
  position: relative;
}
.pris-etikett {
  position: absolute;
  top: -12px;
  left: var(--steg-3);
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
}
.pris-namn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  margin: 0;
}
.pris-belopp {
  font-family: var(--font-accent);
  font-size: 2.4rem;
  line-height: 1;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.pris-belopp-enhet {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--muted);
  margin: 0;
}
.pris-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--steg-1);
}
.pris-lista li {
  color: var(--muted);
  font-size: 0.96rem;
  padding-left: 22px;
  position: relative;
}
.pris-lista li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 600;
}

/* "Kvitto" — detalj som en sysadmin ler åt. */
.kvitto {
  background: var(--panel);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: var(--steg-3);
  font-family: var(--font-display);
  font-size: 0.92rem;
  line-height: 1.8;
  max-width: 380px;
  margin: 0;
}
.kvitto-rubrik {
  font-family: var(--font-accent);
  font-size: 1.3rem;
  margin: 0 0 var(--steg-1);
}
.kvitto-rad {
  display: flex;
  justify-content: space-between;
  gap: var(--steg-2);
  color: var(--muted);
}
.kvitto-streck {
  border: none;
  border-top: 1px dashed var(--line);
  margin: var(--steg-1) 0;
}

/* Bild — varm ångig atmosfär, används som <img> med objekt-cover. */
.hero-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--line);
  object-fit: cover;
}

/* FAQ utfällbar. */
.faq-fraga { cursor: pointer; list-style: none; }
.faq-item { padding-bottom: var(--steg-2); }