.vprocess,.jsec,.lj,.resa,.results,.journey,.bento{
  /* Ytor och text */
  --lp-bg-page: #f3f8f5;
  --lp-bg-surface: #fafcfa;
  --lp-bg-raised: #ffffff;
  --lp-bg-sunken: #edf1ee;
  --lp-line: #dbe2dd;
  --lp-line-strong: #c1cac3;
  --lp-ink: #171e1a;        /* rubriker 17:1 */
  --lp-ink-soft: #434a44;   /* brödtext 9:1 */
  --lp-ink-muted: #5a625c;  /* stödtext, minst 4,9:1 även på ljusa tonade ytor */
  --lp-ink-subtle: #6c736d; /* metadata, bara på vitt */

  /* Handling */
  --lp-brand: #2d5a3f;
  --lp-brand-hover: #275037;
  --lp-brand-deep: #204130;
  --lp-brand-press: #1b3d2a;
  --lp-brand-quiet: #b9ebc8;
  --lp-brand-tint: #eef6f0;
  --lp-on-brand: #ffffff;

  /* Status */
  --lp-success: #2f7d52;
  --lp-success-bg: #e8f4ec;
  --lp-warning: #8a5a12;
  --lp-warning-bg: #fdf4e3;
  --lp-danger: #b04545;
  --lp-danger-bg: #fbeeee;
  --lp-badge: #dc2626;      /* olästa, vit text 4,8:1 */
  --lp-campaign: #cf6244;   /* bara dekor/ytor */
  --lp-campaign-strong: #ad4f35; /* kampanjtext, 4,7:1 på campaign-bg */
  --lp-campaign-bg: #fbeee8;
  --lp-dot: #cf6244;        /* punkten i ordmärket */

  /* Typografi (2026-09-25). Hierarki skapas med storlek + vikt + färg
     (ink > ink-soft > ink-muted > ink-subtle) + avstånd, inte med små
     storlekar. Få steg, alltid i rem så att användarens textstorlek följer
     med. Bas: 16 (patienter, marknad) eller 14 (täta personalvyer), ±2 vid
     behov, sedan rubriksteg. Inget under 12 px. Rubriker Cabinet 700,
     brödtext en familj (Inter Tight på systersajterna, Inter i app.lipio.se).
     Siffror som ändras: font-variant-numeric: tabular-nums. */
  --lp-font-display: "Cabinet Grotesk", "Inter Tight", "Inter", system-ui, sans-serif; /* rubriker, 700 */
  --lp-font-body: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lp-text-meta: 0.75rem;      /* 12: etiketter, metadata, juridisk finstil */
  --lp-leading-meta: 1rem;
  --lp-text-small: 0.875rem;    /* 14: sekundärtext, täta listor, personalvyernas bas */
  --lp-leading-small: 1.25rem;
  --lp-text-body: 1rem;         /* 16: brödtext, patienternas bas */
  --lp-leading-body: 1.55;
  --lp-text-lead: 1.125rem;     /* 18: ingress */
  --lp-leading-lead: 1.6;
  --lp-text-title-sm: 1.25rem;  /* 20: kort- och sektionsrubrik */
  --lp-text-title: 1.5rem;      /* 24: sidrubrik i appar */
  --lp-text-title-lg: 1.875rem; /* 30: stor rubrik */
  --lp-leading-title: 1.2;
  --lp-text-display: clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem); /* hero, 36-56 */
  --lp-leading-display: 1.05;
  /* Redaktionell jätterubrik, bara för enstaka avsiktliga ögonblick
     (Kunskap-heron, kapitelrubriker, prissiffran, "0 kr"). 56-96. */
  --lp-text-mega: clamp(3.5rem, 1rem + 7vw, 6rem);
  --lp-leading-mega: 0.95;
  /* Äldre namn, behålls tills sajterna migrerat */
  --lp-text-xs: var(--lp-text-meta);
  --lp-text-sm: var(--lp-text-small);
  --lp-text-md: var(--lp-text-body);
  --lp-text-lg: var(--lp-text-lead);
  --lp-leading: 1.55;
  --lp-measure: 65ch;

  /* Avstånd och hörn */
  --lp-space-1: 4px;
  --lp-space-2: 8px;   /* inom grupp */
  --lp-space-3: 12px;
  --lp-space-4: 16px;  /* utfyllnad */
  --lp-space-6: 24px;  /* mellan grupper */
  --lp-space-8: 32px;  /* mellan sektioner */
  --lp-space-12: 48px;
  --lp-space-16: 64px;
  --lp-r-sm: 8px;
  --lp-r-md: 12px;
  --lp-r-lg: 16px;
  --lp-r-xl: 20px;
  --lp-r-2xl: 24px;
  --lp-r-pill: 999px;

  /* Djup: ljuset kommer uppifrån */
  --lp-elev-1: inset 0 1px 0 rgba(255,255,255,.75), 0 1px 2px rgba(22,41,29,.06), 0 2px 6px -2px rgba(22,41,29,.08);
  --lp-elev-2: inset 0 1px 0 rgba(255,255,255,.75), 0 2px 4px rgba(22,41,29,.06), 0 12px 28px -12px rgba(22,41,29,.22);
  --lp-elev-3: inset 0 1px 0 rgba(255,255,255,.8), 0 4px 8px rgba(22,41,29,.06), 0 24px 48px -20px rgba(22,41,29,.30);
  --lp-inset: inset 0 1px 2px rgba(22,41,29,.10), inset 0 -1px 0 rgba(255,255,255,.7);

  /* Rörelse */
  --lp-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --lp-dur-fast: 150ms;
  --lp-dur: 220ms;
  --lp-dur-slow: 400ms;

  --lp-focus: 0 0 0 3px rgba(45, 90, 63, 0.35);
  color-scheme: light;

  --paper: #faf8f4;
  --paper-tint: #f1ede4;
  --ink: #16291d;
  --pine: var(--lp-brand);
  --sage: #b8c5b4;
  --sage-soft: #dce5d9;
  --sage-mist: #e9efe6;
  --terra: var(--lp-campaign);
  /* Fargregel (2026-09-24): gron = handling, terrakotta = bara accent och
     kampanj. Terrakotta ger 3,6:1 mot papper, for lite for knapptext.
     --campaign-strong for kampanjpiller och kampanjtext (5,0:1 mot papper),
     --danger for fel (5,2:1 mot papper). */
  --campaign-strong: var(--lp-campaign-strong);
  --danger: var(--lp-danger);
  --font-display: "Cabinet Grotesk", "Cabinet Grotesk Fallback", "Inter Tight", "Inter Tight Fallback", system-ui, sans-serif;
  --font-body: "Inter Tight", "Inter Tight Fallback", system-ui, sans-serif;
}
.lj,.jsec,.vprocess{background:transparent;color:var(--ink);font-family:"Inter Tight",sans-serif}
.lj .h2,.jsec .h2{font-family:"Cabinet Grotesk",sans-serif;font-weight:800;letter-spacing:-.03em;margin:0}
/* Vikt-kortets rubrik är en H2 och har .h2-skalan sedan 12/10. */
.hero__title { margin-top: 16px; max-width: 22ch; }
/* ── Sektionsrubriker ────────────────────────────────────── */
.eyebrow { font-size: var(--lp-text-meta); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; }
/* Sektionsrubriker använder .h2 (30-36 px). Displaystorleken är bara för
   sidans H1 och slut-CTA:n (12/10: tre H2 var lika stora som H1:an). */
.h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(var(--lp-text-title-lg), 1.5rem + 1.6vw, 2.25rem); line-height: var(--lp-leading-title); letter-spacing: -0.02em; }
@media (min-width: 1024px) { .h2 { font-size: clamp(var(--lp-text-title-lg), 1.5rem + 1.6vw, 2.25rem); } }
/* ── Journey ─────────────────────────────────────────────── */
.journey { max-width: 1400px; margin: 0 auto; padding: 56px 20px; }
.journey__grid { display: grid; grid-template-columns: 1fr; }
.journey__rail { padding-bottom: 32px; }
.journey__rail .eyebrow { color: var(--terra); }
.journey__rail .h2 { margin-top: 12px; }
.journey__numeral {
  display: none; pointer-events: none; margin: 8px 0 0 -8px;
  font-family: var(--font-display); font-weight: 700; font-size: var(--lp-text-display); line-height: 1;
  color: var(--sage-soft); transition: opacity 0.3s;
}
.journey__steps { display: none; list-style: none; margin-top: 16px; }
.journey__steps li { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.journey__steps .num {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 999px;
  background: var(--sage-mist); color: var(--lp-ink-muted);
  font-size: var(--lp-text-small); font-weight: 700; transition: background 0.3s, color 0.3s;
}
.journey__steps .label { font-size: var(--lp-text-body); font-weight: 500; color: var(--lp-ink-muted); transition: color 0.3s; }
.journey__steps li.active .num { background: var(--ink); color: var(--paper); }
.journey__steps li.active .label { color: var(--ink); font-weight: 600; }
.journey__cards { display: flex; flex-direction: column; gap: 24px; }
.jcard {
  position: sticky; overflow: hidden; border-radius: 22px; background: var(--lp-bg-raised);
  border: 1px solid var(--lp-line); /* betoning 13/10: bilden, inte en tonad yta */
  box-shadow: 0 30px 70px -40px rgba(22, 41, 29, 0.4);
}
.jcard__grid { display: grid; grid-template-columns: 1fr; }
.jcard__img { width: 100%; height: 200px; object-fit: cover; }
.jcard__body { display: flex; flex-direction: column; justify-content: center; padding: 24px; }
.jcard__step { font-size: var(--lp-text-small); font-weight: 600; color: var(--lp-ink-muted); }
.jcard__title { margin-top: 8px; font-family: var(--font-display); font-weight: 700; font-size: var(--lp-text-title); letter-spacing: -0.01em; line-height: var(--lp-leading-title); }
.jcard__text { margin-top: 12px; max-width: 42ch; font-size: var(--lp-text-body); line-height: var(--lp-leading-body); color: rgba(22, 41, 29, 0.7); }
@media (min-width: 1024px) {
  .journey { padding: 80px 32px; }
  .journey__grid { grid-template-columns: minmax(300px, 380px) 1fr; column-gap: 80px; }
  .journey__rail { position: sticky; top: 96px; align-self: start; height: fit-content; padding-bottom: 40px; }
  /* Den dekorativa jättesiffran (168 px) visas inte längre: den låg utanför
     typskalan och upprepade stegmarkeringen i listan under (typskalan 2026-09-25). */
  .journey__steps { display: block; }
  .journey__cards { gap: 40px; }
  .jcard { border-radius: 28px; }
  .jcard__grid { grid-template-columns: 1fr 1.1fr; min-height: 420px; }
  .jcard__img { order: 2; height: 100%; }
  .jcard__body { order: 1; padding: 40px 32px 40px 40px; }
  .jcard__title { margin-top: 12px; font-size: var(--lp-text-title-lg); }
  .jcard__text { margin-top: 16px; font-size: var(--lp-text-body); }
}
/* ── Bento ───────────────────────────────────────────────── */
.bento { max-width: 1400px; margin: 0 auto; padding: 56px 20px; }
.bento__head { max-width: 620px; margin: 0 auto; text-align: center; }
.bento__head p { margin-top: 16px; font-size: var(--lp-text-lead); line-height: var(--lp-leading-lead); color: rgba(22, 41, 29, 0.7); }
.bento__grid { margin-top: 40px; display: grid; grid-template-columns: 1fr; gap: 16px; }
.bcell { border-radius: 24px; }
.bcell--photo { position: relative; overflow: hidden; min-height: 320px; }
.bcell--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bcell--photo figcaption {
  position: absolute; bottom: 20px; left: 20px; right: 20px;
  background: rgba(250, 248, 244, 0.95); border-radius: 16px; padding: 16px 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.bcell--photo figcaption b { display: block; font-size: var(--lp-text-body); font-weight: 600; }
.bcell--photo figcaption span { display: block; margin-top: 2px; font-size: var(--lp-text-small); color: var(--lp-ink-muted); }
/* Kurvan (96 px) ligger i botten; på mobil korsade den texten. Luften under
   texten är kurvans höjd (13/10). */
.bcell--sage { position: relative; overflow: hidden; background: var(--lp-bg-raised); border: 1px solid var(--lp-line); padding: 28px 28px 104px; }
/* betoning 13/10: fotot */
.bcell--sage svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 96px; }
.bcell--sage b { position: relative; display: block; font-size: var(--lp-text-title-sm); font-weight: 600; line-height: var(--lp-leading-title); }
.bcell--sage p { position: relative; margin-top: 8px; max-width: 30ch; font-size: var(--lp-text-small); line-height: var(--lp-leading-small); color: var(--lp-ink-muted); }
.bcell--stat { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; background: var(--lp-bg-raised); border: 1px solid var(--lp-line); padding: 28px; }
.bcell--stat .zero { font-family: var(--font-display); font-weight: 700; font-size: var(--lp-text-display); line-height: 1; letter-spacing: -0.02em; }
.bcell--stat .zero small { margin-left: 4px; font-size: var(--lp-text-title); font-weight: 600; color: rgba(22, 41, 29, 0.7); }
.bcell--stat b { display: block; font-size: var(--lp-text-title-sm); font-weight: 600; line-height: var(--lp-leading-title); }
.bcell--stat p { margin-top: 8px; font-size: var(--lp-text-small); line-height: var(--lp-leading-small); color: var(--lp-ink-muted); }
.bcell--quiet { border: 1px solid rgba(22, 41, 29, 0.1); padding: 24px; }
.bcell--quiet b { display: block; font-size: var(--lp-text-body); font-weight: 600; }
.bcell--quiet p { margin-top: 6px; font-size: var(--lp-text-small); line-height: var(--lp-leading-small); color: var(--lp-ink-muted); }
@media (min-width: 1024px) {
  .bento { padding: 80px 32px; }
  .bento__grid { margin-top: 48px; grid-template-columns: repeat(12, 1fr); gap: 20px; }
  .bcell--photo { grid-column: span 5; grid-row: span 2; min-height: 480px; }
  .bcell--sage { grid-column: span 4; grid-row: span 2; }
  .bcell--stat { grid-column: span 3; grid-row: span 2; }
  .bcell--stat .zero { font-size: var(--lp-text-mega); }
  .bcell--quiet { grid-column: span 2; }
}
.bmi__intro .eyebrow { color: var(--pine); }
.bmi__intro .h2 { margin-top: 12px; }
.pricing__head .eyebrow { color: var(--pine); }
.pricing__head .h2 { margin-top: 12px; }
/* ═══ Resultat / social proof ═══ */
/* Kompakta resultatkort (29/9 valdes "A. Korten" bland tre varianter,
   "går att bygga vidare på"): en låg rad per patient med bild, namn, siffra
   och en minikurva. Fler patienter = fler rader i samma rutnät. Bilderna är
   frilagda (bakgrunden borttagen), personerna orörda. Rörelsen (kurvan ritas,
   siffran räknas upp) sätts i redesign.js; utan JS syns slutläget. */
.results { --results-falt: #c9d3c5; max-width: 1160px; margin: 0 auto; padding-top: 8px; padding-bottom: 32px; padding-left: 20px; padding-right: 20px; }
.results__head { margin-bottom: 18px; }
.results .eyebrow { color: var(--terra); display: block; margin-bottom: 8px; }
.results__h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--lp-text-title-lg); line-height: var(--lp-leading-title); letter-spacing: -0.02em; }
.results__grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.rk { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding-top: 14px; padding-bottom: 14px; padding-left: 14px; padding-right: 18px; background: #fff; border-radius: 22px; border: 1px solid rgba(22, 41, 29, 0.07); box-shadow: 0 16px 36px -28px rgba(22, 41, 29, 0.35); }
.rk__bilder { display: flex; }
.rk__bild { position: relative; width: 52px; height: 52px; border-radius: 14px; overflow: hidden; background: var(--results-falt); }
.rk__bild + .rk__bild { margin-left: -10px; box-shadow: 0 0 0 2px #fff; }
.rk__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; transform: scale(1.45); transform-origin: 50% 0%; }
.rk__vem { display: flex; flex-direction: column; min-width: 0; }
.rk__namn { font-family: var(--font-display); font-weight: 700; font-size: var(--lp-text-title-sm); line-height: 1.15; }
.rk__roll { font-size: var(--lp-text-small); color: var(--lp-ink-muted); }
.rk__res { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.rk__varde { font-family: var(--font-display); font-weight: 700; font-size: var(--lp-text-title-lg); line-height: 1; letter-spacing: -0.03em; color: var(--pine); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rk__varde small { margin-left: 4px; font-size: 0.5em; letter-spacing: 0; color: var(--lp-ink-muted); }
.rk__spark { width: 72px; height: 24px; overflow: visible; }
.rk__linje { fill: none; stroke: var(--pine); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.rk__p0 { fill: #fff; stroke: var(--pine); stroke-width: 1.8; }
.rk__p1 { fill: var(--terra); }
.results__fine { margin-top: 14px; font-size: var(--lp-text-meta); line-height: var(--lp-leading-meta); color: var(--lp-ink-muted); }
@media (min-width: 900px) {
  .results { padding-top: 16px; padding-bottom: 40px; }
  .results__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .rk { gap: 18px; padding-top: 18px; padding-bottom: 18px; padding-left: 18px; padding-right: 24px; border-radius: 24px; }
  .rk__bild { width: 64px; height: 64px; border-radius: 16px; }
  .rk__varde { font-size: clamp(2.25rem, 1.4rem + 1.4vw, 2.75rem); }
  .rk__spark { width: 96px; height: 30px; }
}
/* ═══ Följ Jennys viktresa (2026-08-25): egen sektion, Instagram-länk ═══ */
.resa { max-width: 1400px; margin: 0 auto; padding-top: 24px; padding-bottom: 40px; padding-left: 20px; padding-right: 20px; }
.resa__card { display: grid; grid-template-columns: 1fr; align-items: center; gap: 28px; }
/* betoning 13/10: fotot, ingen tonad yta */
.resa__figure { position: relative; margin: 0; min-width: 0; }
.resa__img { display: block; width: 100%; max-width: 420px; margin-left: auto; margin-right: auto; height: auto; aspect-ratio: 1122 / 1402; object-fit: cover; border-radius: 20px; box-shadow: 0 30px 70px -36px rgba(22, 41, 29, 0.45); }
.resa__chip { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); background: var(--paper); border-radius: 16px; padding-top: 10px; padding-bottom: 10px; padding-left: 16px; padding-right: 16px; box-shadow: 0 18px 40px -18px rgba(22, 41, 29, 0.4); white-space: nowrap; text-align: center; }
.resa__chip span { display: block; font-size: var(--lp-text-meta); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--lp-ink-muted); }
.resa__chip b { display: block; font-family: var(--font-display); font-size: var(--lp-text-title); font-weight: 700; line-height: var(--lp-leading-title); color: var(--pine); }
.resa__copy { max-width: 500px; min-width: 0; padding-top: 12px; }
.resa .eyebrow { color: var(--terra); display: block; margin-bottom: 11px; }
.resa__copy > p { margin-top: 18px; font-size: var(--lp-text-lead); line-height: var(--lp-leading-lead); color: rgba(22, 41, 29, 0.72); }
.resa__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 28px; }
.resa__titlelink { color: inherit; text-decoration: none; }
.resa__titlelink:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: rgba(45, 90, 63, 0.35); }
.resa__start { display: inline-flex; align-items: center; gap: 8px; font-size: var(--lp-text-body); font-weight: 600; color: var(--pine); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(45, 90, 63, 0.35); }
.resa__start:hover { text-decoration-color: var(--pine); }
.resa__fine { margin-top: 22px; font-size: var(--lp-text-meta); color: var(--lp-ink-muted); }
@media (min-width: 1024px) {
  .resa { padding-top: 32px; padding-bottom: 56px; padding-left: 32px; padding-right: 32px; }
  .resa__card { grid-template-columns: 0.9fr 1.1fr; gap: 64px; }
  .resa__img { max-width: 460px; }
  .resa__chip { left: auto; right: 8px; bottom: 28px; transform: none; text-align: left; }
  .resa__copy { padding-top: 24px; padding-bottom: 24px; padding-right: 16px; }
}
/* storleken är .h2 (12/10) */
.sokgrid__title b { color: var(--terra); }
/* ── Sa gar det till (varden) ── */
/* Betoning (13/10): nästan varje sektion hade en egen tonad yta. Nu har
   varje sektion ett betonat element och resten är neutralt: här filmen.
   Heron och slut-CTA:n är fortsatt egna mörka ytor. */
.vprocess { background: var(--paper); }
.vprocess__grid { max-width: 1120px; margin: 0 auto; padding-top: 96px; padding-bottom: 96px; padding-left: 24px; padding-right: 24px; display: grid; gap: 56px; }
.vprocess__title { margin-top: 14px; }
/* storleken är .h2 (12/10) */
.vprocess__title b { color: var(--terra); }
.vprocess__steps { margin-top: 44px; list-style: none; position: relative; padding-left: 0; }
.vprocess__steps::before { content: ""; position: absolute; left: 13px; top: 12px; bottom: 12px; width: 1px; background: var(--sage-soft); }
.vprocess__steps li { position: relative; display: flex; align-items: flex-start; gap: 18px; padding-left: 44px; }
.vprocess__steps li + li { margin-top: 40px; }
.vprocess__num { position: absolute; left: 0; top: 2px; display: flex; align-items: center; justify-content: center; width: 27px; height: 27px; border: 1px solid var(--pine); border-radius: 50%; background: var(--paper); font-size: var(--lp-text-meta); font-weight: 700; color: var(--pine); }
.vprocess__icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; background: var(--sage-mist); }
.vprocess__icon img { width: 34px; height: 34px; mix-blend-mode: multiply; }
.vprocess__steps h3 { font-family: "Cabinet Grotesk", "Cabinet Grotesk Fallback", sans-serif; font-weight: 700; font-size: var(--lp-text-title-sm); letter-spacing: -0.01em; }
.vprocess__steps li p { margin-top: 8px; max-width: 42ch; font-size: var(--lp-text-body); line-height: var(--lp-leading-body); color: rgba(22, 41, 29, 0.7); }
.vprocess__cta { margin-top: 44px; }
/* Texten och prisspannet är två flexbarn: avståndet ska se ut som ett mellanslag. */
.btn.vprocess__cta { gap: 0.25em; }
.vprocess__media { position: relative; display: flex; flex-direction: column; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; }
.vprocess__media video { position: relative; align-self: center; width: 100%; max-width: 360px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 28px; box-shadow: 0 30px 70px -40px rgba(22, 41, 29, 0.45); }
.vprocess__media figcaption { margin-top: 16px; align-self: flex-end; max-width: 24ch; border-top: 2px solid var(--pine); padding-top: 12px; font-size: var(--lp-text-small); line-height: var(--lp-leading-small); color: rgba(22, 41, 29, 0.7); }
@media (min-width: 900px) { .vprocess__grid { grid-template-columns: 1.1fr 1fr; } }
/* Resans linje genom "Så går det till" (27/9, js/resans-linje.js). Den
   statiska linjen döljs bara när skriptet har tagit över. */
.vprocess__resa { position: relative; }
.vprocess__resa > *:not(.resa-svg) { position: relative; z-index: 1; }
.har-resa .vprocess__steps::before { display: none; }
.resa-svg { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; }
.resa-spar { fill: none; stroke: rgba(22, 41, 29, 0.16); stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; }
.resa-linje { fill: none; stroke: var(--terra); stroke-width: 2.5; stroke-dasharray: 2 8; stroke-linecap: round; }
.resa-mask { fill: none; stroke: #fff; stroke-width: 10; }
.resa-prick { fill: var(--terra); transition: opacity 0.2s; }
.resa-glod { fill: var(--terra); opacity: 0.18; transition: opacity 0.2s; }
.vprocess__num { z-index: 2; transition: background-color 0.3s var(--lp-ease), border-color 0.3s var(--lp-ease), color 0.3s var(--lp-ease); }
.vprocess__num.is-passerad { background: var(--lp-campaign-strong); border-color: var(--lp-campaign-strong); color: #fff; }
.resa-anteckning { display: none; }
.vprocess__steps li > div { position: relative; }
.har-resa .resa-anteckning {
  display: block; position: absolute; left: 6px; top: -30px; margin: 0; white-space: nowrap; pointer-events: none;
  font-family: "Cabinet Grotesk", "Cabinet Grotesk Fallback", sans-serif; font-weight: 700; font-size: var(--lp-text-small);
  color: var(--lp-campaign-strong); transform: rotate(-3deg); transform-origin: left bottom;
}
.resa-anteckning svg { position: absolute; left: -50px; top: 6px; width: 46px; height: 30px; overflow: visible; }
.resa-anteckning path { fill: none; stroke: var(--lp-campaign-strong); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Små överraskningar, en gång var (utan loopar): annoteringen tonar in och
   ritar sin pil när linjen når steg 02, ikonerna studsar när de passeras och
   knappen pulserar med några gnistor när punkten landar i den. */
.har-resa .resa-anteckning { opacity: 0; transform: translate3d(0, 8px, 0) rotate(-3deg); transition: opacity 0.4s var(--lp-ease), transform 0.4s var(--lp-ease); }
.har-resa li.is-passerad .resa-anteckning { opacity: 1; transform: rotate(-3deg); transition-delay: 0.15s; }
.har-resa .resa-anteckning path { stroke-dasharray: 80; stroke-dashoffset: 80; transition: stroke-dashoffset 0.5s var(--lp-ease) 0.35s; }
.har-resa li.is-passerad .resa-anteckning path { stroke-dashoffset: 0; }
.har-resa li.is-passerad .vprocess__icon { animation: resa-studs 0.5s var(--lp-ease) 1 both; }
@keyframes resa-studs { 0% { transform: scale(1); } 45% { transform: scale(1.12) rotate(-4deg); } 100% { transform: scale(1); } }
.vprocess__cta { position: relative; }
.vprocess__cta.is-framme { animation: resa-puls 0.7s var(--lp-ease) 1 both; }
@keyframes resa-puls { 0% { box-shadow: inset 0 1px 0 rgba(250,248,244,.22), 0 0 0 0 rgba(207, 98, 68, 0.45); } 100% { box-shadow: inset 0 1px 0 rgba(250,248,244,.22), 0 0 0 18px rgba(207, 98, 68, 0); } }
.resa-gnista { position: absolute; left: 22px; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; pointer-events: none; animation: resa-gnista 0.7s var(--lp-ease) 1 both; }
@keyframes resa-gnista { 0% { transform: translate(0, 0) scale(0.4); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(var(--gx), var(--gy)) scale(1); opacity: 0; } }
/* Resans linje i "Så fungerar viktbehandlingen" (stegläge): passerade steg i
   terrakotta, aktivt steg mörkt som förut, annotering vid sista steget. */
.journey__steps.har-resa { position: relative; }
.journey__steps.har-resa li { position: relative; z-index: 1; }
.journey__steps .num { position: relative; }
.journey__steps li.is-passerad:not(.active) .num { background: var(--lp-campaign-strong); color: #fff; }
.journey__steps .resa-gnista { left: 50%; }
.journey__steps .num.is-framme { animation: resa-puls-rund 0.7s var(--lp-ease) 1 both; }
@keyframes resa-puls-rund { 0% { box-shadow: 0 0 0 0 rgba(207, 98, 68, 0.45); } 100% { box-shadow: 0 0 0 16px rgba(207, 98, 68, 0); } }
.journey__steps.har-resa .resa-anteckning { left: 52px; top: auto; bottom: -26px; }
.journey__steps .resa-anteckning svg { left: -44px; top: -22px; }
.journey__steps li:last-child { margin-bottom: 30px; }
@media (prefers-reduced-motion: reduce) {
  .har-resa .resa-anteckning { opacity: 1; transform: rotate(-3deg); transition: none; }
  .har-resa .resa-anteckning path { stroke-dashoffset: 0; transition: none; }
  .har-resa li.is-passerad .vprocess__icon, .vprocess__cta.is-framme, .journey__steps .num.is-framme { animation: none; }
}
/* Siffror som räknas upp, ändras eller jämförs står still i bredd. */
.pcard__price, .bmi__value, .bmi__input input, .rcard__kg, .resa__chip b, .bcell--stat .zero, .journey__steps .num, .vprocess__num { font-variant-numeric: tabular-nums; }
.resa__start { padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px; }
/* ── Löptext på mobil (28/9) ──
   Text i flera meningar i brödtextstorlek (16 px). Enradig meta får vara 14.
   Omdömeskorten (.okort) står kvar på 14: de är ett kollage av absolut
   placerade kort, och i 16 px täcker korten varandras text. */
@media (max-width: 767px) {
  .bcell--stat p:not(.zero), .pricing__notes p { font-size: var(--lp-text-body); line-height: var(--lp-leading-body); }
  .hero-bevis li { font-size: var(--lp-text-body); }
}

/* från live-sidans inbäddade stilar */
/* knappar och dold text från live-sidans delade stilar (förenklade) */
.jsec .btn--sekundar{display:inline-flex;align-items:center;padding:15px 28px;border-radius:999px;background:linear-gradient(180deg,#366b4c 0%,#2d5a3f 52%,#275138 100%);color:#faf8f4;font:700 16px/1 "Cabinet Grotesk",sans-serif;text-decoration:none;margin:0;transition:transform .25s,filter .25s}
.jsec .btn--sekundar:hover{transform:translateY(-2px);filter:brightness(1.06)}
.lp-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.vprocess__cta{display:inline-flex;align-items:center;margin-top:44px;padding:17px 30px;border-radius:999px;background:linear-gradient(180deg,#366b4c 0%,#2d5a3f 52%,#275138 100%);color:#faf8f4;font:700 17px/1 "Cabinet Grotesk",sans-serif;text-decoration:none;box-shadow:inset 0 1px 0 rgba(250,248,244,.22),0 14px 30px -16px rgba(18,41,28,.6);transition:transform .25s,filter .25s}
.vprocess__cta:hover{transform:translateY(-2px);filter:brightness(1.06)}
.vprocess__cta:visited{color:#faf8f4}
.vprocess a,.vprocess a:visited{color:inherit}
.vprocess a.vprocess__cta,.vprocess a.vprocess__cta:visited{color:#faf8f4}

/* BMI, omdömen, FAQ, byt: live */
/* Knapparna på startsidan är .btn.btn--primar/--sekundar/--ljus i
   site-chrome.css (12/10). .cta-hero står kvar i markupen som krok för den
   fasta mobilknappen i redesign.js; .cta-pricing, .cta-final, .bmi__cta osv.
   bär bara marginaler här. */

/* HeroSecondary-garment: waypoint-prick glider langs hairline-rutten */
.cta-sec { display: inline-flex; flex-direction: column; gap: 6px; padding: 0 4px; font-size: var(--lp-text-body); font-weight: 600; }
/* ── BMI ─────────────────────────────────────────────────── */
.bmi { max-width: 1400px; margin: 0 auto; padding: 56px 20px; }
.bmi__card {
  display: grid; grid-template-columns: 1fr; gap: 32px;
  background: var(--lp-bg-raised); border: 1px solid var(--lp-line); border-radius: 24px; padding: 28px; /* betoning 13/10: neutral yta */
}
/* min-width 0: utan den växte kolumnen till mejlradens minsta bredd när
   resultatet visades, och kortet sköt ut 14 px utanför kanten på 390 px. */
.bmi__intro, .bmi__form { min-width: 0; }
.bmi__intro .eyebrow { color: var(--pine); }
.bmi__intro .h2 { margin-top: 12px; }
.bmi__intro p { margin-top: 16px; max-width: 44ch; font-size: var(--lp-text-body); line-height: var(--lp-leading-body); color: rgba(22, 41, 29, 0.7); }
/* Inget kort i kortet (13/10): formuläret var ett vitt kort med skugga inne
   i det salviagröna kortet. Nu står fälten direkt på salvian; fälten är
   papper, så de syns tydligare än förut. */
.bmi__form { padding: 0; }
.bmi__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bmi__field label { display: block; font-size: var(--lp-text-small); font-weight: 600; margin-bottom: 6px; }
.bmi__input { position: relative; }
.bmi__input input {
  width: 100%; border: 1px solid rgba(22, 41, 29, 0.15); border-radius: 12px;
  background: var(--paper); padding: 13px 44px 13px 14px; font: inherit; font-size: var(--lp-text-body); color: var(--ink);
}
.bmi__input input:focus { outline: 2px solid var(--pine); outline-offset: 1px; }
.bmi__input span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: var(--lp-text-small); color: var(--lp-ink-muted); }
/* Räkna-knappen är sekundär (.btn--sekundar) så att "Starta din bedömning"
   i resultatet är den enda gröna knappen i kortet. */
.bmi__btn { width: 100%; margin-top: 16px; }
.bmi__result { display: none; margin-top: 18px; border-top: 1px dashed rgba(22, 41, 29, 0.2); padding-top: 18px; }
.bmi__result.show { display: block; }
.bmi__value { font-family: var(--font-display); font-weight: 700; font-size: var(--lp-text-display); line-height: 1; }
.bmi__value small { font-size: var(--lp-text-body); font-weight: 600; color: var(--lp-ink-muted); margin-left: 6px; }
.bmi__cat { margin-top: 6px; font-size: var(--lp-text-body); font-weight: 600; color: var(--pine); }
.bmi__note { margin-top: 8px; font-size: var(--lp-text-small); line-height: var(--lp-leading-small); color: var(--lp-ink-muted); }
/* Fel per fält (12/10, redesign.js). Regionen står kvar tom i DOM:en så att
   role="alert" läses upp när texten skrivs in; tom tar den ingen plats. */
.bmi__input input[aria-invalid="true"] { border-color: var(--lp-danger); box-shadow: 0 0 0 1px var(--lp-danger); }
.bmi__fel { margin: 0; font-size: var(--lp-text-small); line-height: var(--lp-leading-small); font-weight: 500; color: var(--lp-danger); }
.bmi__fel:not(:empty) { margin-top: 6px; }
.bmi__cta { margin-top: 16px; }
.bmimail { margin-top: 20px; border-top: 1px dashed rgba(22, 41, 29, 0.2); padding-top: 16px; }
.bmimail__label { font-size: var(--lp-text-small); font-weight: 500; color: rgba(22, 41, 29, 0.7); }
.bmimail__row { display: flex; gap: 8px; margin-top: 10px; }
.bmimail__row input[type="email"] {
  flex: 1; min-width: 0; padding: 11px 14px; font-size: var(--lp-text-body); font-family: inherit;
  color: var(--ink); background: var(--paper); border: 1px solid rgba(22, 41, 29, 0.18); border-radius: 12px;
}
.bmimail__row input[type="email"]:focus { outline: 2px solid var(--pine); outline-offset: 1px; }
.bmimail__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* Skicka är .btn.btn--sekundar (12/10), i fältets höjd. */
.bmimail__row .bmimail__send { min-height: 46px; padding: 0 20px; }
.bmimail__status { display: none; margin-top: 8px; font-size: var(--lp-text-small); font-weight: 500; }
.bmimail__status.is-ok { display: block; color: var(--pine); }
.bmimail__status.is-err { display: block; color: var(--danger); }
.bmimail__consent { margin-top: 8px; font-size: var(--lp-text-meta); line-height: var(--lp-leading-meta); color: rgba(22, 41, 29, 0.72); }
.bmimail__consent a { color: inherit; text-decoration: underline; }
@media (min-width: 1024px) {
  .bmi { padding: 80px 32px; }
  .bmi__card { grid-template-columns: 1.1fr 1fr; align-items: center; gap: 64px; border-radius: 36px; padding: 56px; }
}
/* ── FAQ ─────────────────────────────────────────────────── */
/* Sektionen (.faq) står kvar. Raderna på startsidan och /byt/ är sajtens
   gemensamma .lp-faq (site-chrome.css, 13/10). .faq__list, .faq__item och
   .faq__q nedan är den gamla knappvarianten med skript i redesign.js, kvar
   för BMI-kalkylatorn och viktprognosen tills de görs om. */
.faq { max-width: 860px; margin: 0 auto; padding: 56px 20px; }
.faq > p { margin-top: 16px; max-width: 52ch; font-size: var(--lp-text-body); line-height: var(--lp-leading-body); color: var(--lp-ink-muted); }
.faq__list { margin-top: 40px; border-top: 1px solid rgba(22, 41, 29, 0.1); border-bottom: 1px solid rgba(22, 41, 29, 0.1); }
.faq__item { border-top: 1px solid rgba(22, 41, 29, 0.1); }
.faq__item:first-child { border-top: 0; }
.faq__q { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; text-align: left; }
.faq__q span { font-size: var(--lp-text-body); font-weight: 600; }
.faq__q svg { flex-shrink: 0; color: rgba(22, 41, 29, 0.5); transition: transform 0.3s, color 0.3s; }
.faq__item.open .faq__q svg { transform: rotate(45deg); color: var(--lp-dot); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease-out; }
.faq__item.open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
/* Svaret står direkt under frågan (13/10): den salviagröna rutan låg som en
   yta inne i den avdelade listan. Hover på frågan ger kvittens med musen. */
.faq__a p { margin-bottom: 20px; max-width: 68ch; font-size: var(--lp-text-body); line-height: var(--lp-leading-body); color: var(--lp-ink-soft); }
.faq__q:hover span, .faq__q:hover svg { color: var(--pine); }
@media (min-width: 1024px) { .faq { padding: 80px 32px; } .faq__q span { font-size: var(--lp-text-lead); } }
/* Slut-CTA:n är .btn--ljus: samma knapp som de andra, mint på den mörka ytan. */
.cta-final { margin-top: 40px; }
/* Sökknappen är .btn.btn--primar (12/10); här bara måtten i fältet. */
.vsok .vsok__btn { flex-shrink: 0; min-height: 46px; padding: 0 20px; }
/* Texten och prisspannet är två flexbarn: avståndet ska se ut som ett mellanslag. */
.btn.vprocess__cta { gap: 0.25em; }
/* ── Byt till Lipio (startsidan, före omdömena) ──
   Flyttat från inline-stilar (12/10) så att knappen får hover och fokus.
   Betoning (13/10): bandet var en tredje mörkgrön yta mellan heron och
   slut-CTA:n. Nu en neutral ruta med hårlinje; knappen är betoningen. */
.bytband { padding-top: 8px; padding-bottom: 64px; }
.bytband__inner { max-width: 1080px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.bytband__kort { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; background: var(--lp-bg-raised); border: 1px solid var(--lp-line); border-radius: 24px; padding: 36px 32px; }
.bytband__text { max-width: 600px; }
.bytband__eyebrow { margin-bottom: 8px; font-size: var(--lp-text-meta); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pine); }
.bytband__titel { margin-bottom: 10px; font-size: var(--lp-text-title); line-height: var(--lp-leading-title); color: var(--ink); }
.bytband__brod { font-size: var(--lp-text-body); line-height: var(--lp-leading-body); color: var(--lp-ink-soft); }
.bytband__cta { white-space: nowrap; }
/* .btn--primar, bandets enda betoning (13/10) */

/* ── Omdomen: stort citat + lagda kort ── */
.omdome { background: var(--paper); }
.omdome__grid { max-width: 1040px; margin: 0 auto; padding-top: 88px; padding-bottom: 88px; padding-left: 24px; padding-right: 24px; display: grid; gap: 48px; align-items: center; }
.omdome__citat { margin-top: 24px; font-family: "Cabinet Grotesk", "Cabinet Grotesk Fallback", sans-serif; font-weight: 700; font-size: clamp(var(--lp-text-title-lg), 1.5rem + 1.6vw, 2.25rem); line-height: var(--lp-leading-title); letter-spacing: -0.02em; color: var(--ink); }
.omdome__vem { margin-top: 18px; font-size: var(--lp-text-small); color: var(--lp-ink-muted); }
.omdome__lank { display: inline-block; margin-top: 26px; font-size: var(--lp-text-body); font-weight: 600; color: var(--pine); text-decoration: underline; text-decoration-color: var(--sage); text-underline-offset: 4px; }
.omdome__lank:hover { text-decoration-color: var(--pine); }
.omdome__kort { position: relative; height: 420px; max-width: 440px; width: 100%; margin-left: auto; margin-right: auto; }
@media (min-width: 900px) { .omdome__grid { grid-template-columns: 1fr 0.9fr; } }
@media (max-width: 480px) { .omdome__kort { height: 470px; } .okort { width: 200px; } }
/* ── FAQ i tva spalter ── */
.faq--dubbel { max-width: 1180px; }
.faq__cols { display: grid; gap: 8px; }
.faq__colrubrik { margin-top: 40px; font-family: "Cabinet Grotesk", "Cabinet Grotesk Fallback", sans-serif; font-weight: 700; font-size: var(--lp-text-title-sm); letter-spacing: -0.01em; color: var(--pine); }
.faq__col .faq__list, .faq__col .lp-faq { margin-top: 16px; }
@media (min-width: 1024px) {
  .faq__cols { grid-template-columns: 1fr 1fr; column-gap: 64px; align-items: start; }
}
/* Siffror som räknas upp, ändras eller jämförs står still i bredd. */
.pcard__price, .bmi__value, .bmi__input input, .rcard__kg, .resa__chip b, .bcell--stat .zero, .journey__steps .num, .vprocess__num { font-variant-numeric: tabular-nums; }
.omdome__lank { padding-top: 10px; padding-bottom: 10px; margin-top: 16px; margin-bottom: -10px; }

.bytsec,.bmisec,.omdsec,.faqsec{--ink:#16291d;--paper:#faf8f4;--paper-tint:#f1ede4;--sage-mist:#e9efe6;--sage-soft:#E6EFE9;--pine:#2d5a3f;--lp-brand:#2d5a3f;--terra:#cf6244;--lp-campaign:#cf6244;--lp-campaign-strong:#ad4f35;--lp-ease:cubic-bezier(.2,.8,.2,1);--font-display:"Cabinet Grotesk",sans-serif;--font-body:"Inter Tight",sans-serif;--lp-ink-muted:#5a625c;--lp-text-body:1rem;--lp-leading-body:1.55;--lp-text-small:.875rem;--lp-leading-small:1.25rem;--lp-text-meta:.75rem;--lp-text-lead:1.125rem;--lp-leading-lead:1.6;--lp-text-title-sm:1.25rem;--lp-text-title:1.5rem;--lp-text-title-lg:1.875rem;--lp-leading-title:1.2;--lp-text-display:clamp(2.25rem,1.5rem + 3.2vw,3.5rem);font-family:"Inter Tight",sans-serif;color:var(--ink);position:relative;z-index:1}
.bytsec .h2,.bmisec .h2,.omdsec .h2,.faqsec .h2,.bytsec h2,.omdsec h2,.faqsec h2{font-family:"Cabinet Grotesk",sans-serif;font-weight:800;letter-spacing:-.03em}
.bmisec .eyebrow{display:block;font:700 .75rem/1 "Inter Tight";letter-spacing:.14em;text-transform:uppercase;color:#ad4f35}
.btn{text-decoration:none}

/* knappar från site-chrome.css */
/* ============================================================
   Lipio sidhuvud, sidfot och knappar, gemensamt för alla sidor.
   Markupen kommer ur partials/lipio/site-header.html och
   site-footer.html (scripts/build-lipio-partials.py). Designen är
   startsidans (tidigare i redesign.css). Laddas efter sajtens egen
   stilmall via partial:head-assets, och förutsätter lipio-tokens.css.
   Knappsystemet (.btn) ligger sist i filen.

   Variablerna är scopade på .nav/.footer: undersidornas stilmallar
   använder samma namn med andra värden (--sage är t.ex. mörkgrön i
   info-page-v5.css men ljus salvia i redesign.css).
   ============================================================ */

.nav,
.footer {
  --c-ink: #16291d;
  --c-paper: #faf8f4;
  --c-brand: var(--lp-brand);
  --c-dot: var(--lp-dot);
  --c-display: "Cabinet Grotesk", "Cabinet Grotesk Fallback", "Inter Tight", "Inter Tight Fallback", system-ui, sans-serif;
  --c-body: "Inter Tight", "Inter Tight Fallback", system-ui, sans-serif;
  font-family: var(--c-body);
  font-size: var(--lp-text-body);
  line-height: var(--lp-leading-body);
  -webkit-font-smoothing: antialiased;
}
/* ── Knappar (12/10) ──────────────────────────────────────────
   Ett knappsystem för marknadssidorna. Startsidan hade åtta primärknappar
   (pine, ink, papper och mint, rundade 999 eller 12 px, Cabinet 700 eller
   Inter 600, olika hover). Mönstret är /klimakteriet/:s .klim-btn: samma
   höjd, hörn, typsnitt och rörelse överallt, bara färgen skiljer.
     .btn.btn--primar    grön: sidans huvudhandling ("Starta din bedömning")
     .btn.btn--sekundar  vit med kant: andra val på ljus yta
     .btn.btn--ljus      mint: huvudhandlingen på mörk yta (slut-CTA, mörka
                         band). Grönt på nästan svart ger 1,9:1 och försvinner.
   Ikon: <svg class="btn__pil">, pilen glider 3 px vid hover.
   En klass i specificitet och filen laddas efter sidornas stilmallar, så
   knappen vinner över äldre klasser på samma element. Sidans egna
   justeringar (bredd, marginal, storlek i ett fält) skrivs som .sektion .x
   eller .btn.x. Gamla klassnamn står kvar som krokar för JS och mått. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 24px;
  border: 1px solid transparent; border-radius: var(--lp-r-pill);
  font-family: "Cabinet Grotesk", "Cabinet Grotesk Fallback", "Inter Tight", "Inter Tight Fallback", system-ui, sans-serif;
  font-weight: 700; font-size: var(--lp-text-body); line-height: 1.2; letter-spacing: 0;
  text-align: center; text-decoration: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform var(--lp-dur-fast) var(--lp-ease), background-color var(--lp-dur-fast) var(--lp-ease), border-color var(--lp-dur-fast) var(--lp-ease), box-shadow var(--lp-dur-fast) var(--lp-ease);
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn:active { transform: translateY(0) scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--lp-brand); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn[aria-disabled="true"] { pointer-events: none; }
.btn svg { flex: none; }
.btn__pil { transition: transform var(--lp-dur) var(--lp-ease); }
.btn:hover .btn__pil { transform: translateX(3px); }
.btn--primar { background: var(--lp-brand); color: var(--lp-on-brand); box-shadow: 0 10px 24px -12px rgba(18, 41, 28, 0.55); }
.btn--primar:hover { background: var(--lp-brand-hover); color: var(--lp-on-brand); }
.btn--primar:active { background: var(--lp-brand-press); }
.btn--sekundar { background: var(--lp-bg-raised); color: var(--lp-brand-deep); border-color: var(--lp-line-strong); }
.btn--sekundar:hover { background: var(--lp-brand-tint); color: var(--lp-brand-deep); }
.btn--sekundar:active { background: var(--lp-brand-tint); border-color: var(--lp-brand); }
.btn--ljus { background: var(--lp-brand-quiet); color: var(--lp-brand-deep); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.45); }
.btn--ljus:hover { background: #cdf2d8; color: var(--lp-brand-deep); }
.btn--ljus:active { background: #a6e2b8; }
.btn--ljus:focus-visible { outline-color: #faf8f4; }

/* okort, lp-faq m.m. */
.okort { position: absolute; width: 225px; background: var(--paper); border: 1px solid rgba(22, 41, 29, 0.1); border-radius: 18px; padding: 16px; box-shadow: 0 24px 60px -30px rgba(22, 41, 29, 0.45); animation: okortsvav 7.5s ease-in-out infinite; }
.okort p { margin-top: 10px; font-size: var(--lp-text-small); font-weight: 600; line-height: var(--lp-leading-small); color: var(--ink); }
.okort small { display: block; margin-top: 8px; font-size: var(--lp-text-meta); color: rgba(22, 41, 29, 0.68); }
/* Stjärnraden i em, så rutorna följer textstorleken: 12 px stjärna (inget under 12),
   samma 14,4 px delning som förut (stjärnans bredd 1em + 0,2em spärrning). */
.okort__stjarnor { display: block; font-size: var(--lp-text-meta); width: 6.8333em; height: 1.1667em; background-image: linear-gradient(#00B67A, #00B67A); background-size: 1.1667em 1.1667em; background-repeat: repeat-x; background-position: left center; position: relative; }
.okort__stjarnor::after { content: "★★★★★"; position: absolute; left: 0; top: 0; width: 6.8333em; line-height: 1.1667em; letter-spacing: 0.2em; color: #FAF8F4; }
.okort--1 { left: 0; top: 0; transform: rotate(-3deg); animation-duration: 6.8s; }
.okort--2 { right: 0; top: 76px; transform: rotate(2deg); animation-duration: 8.1s; animation-delay: 1.2s; }
.okort--3 { left: 14px; bottom: 64px; transform: rotate(1deg); animation-duration: 7.4s; animation-delay: 2.1s; }
.okort--4 { right: 10px; bottom: 0; width: 200px; transform: rotate(-2deg); animation-duration: 8.8s; animation-delay: 0.6s; }
@keyframes okortsvav {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -10px; }
}
@media (prefers-reduced-motion: reduce) { .okort { animation: none; } }
/* ── Vanliga frågor (13/10) ───────────────────────────────────
   En komponent för hela sajten i stället för fem varianter (.faq, .v3-faq,
   .rik-faq, .klim-faq, .st-faq). Mönstret är /klimakteriet/:s: details och
   summary utan skript, minst 56 px höga rader med hårlinje emellan, plus
   som blir kryss, kvittens vid hover och fokus.
     <div class="lp-faq">
       <details class="lp-faq__rad">
         <summary>Fråga</summary>
         <div class="lp-faq__svar"><p>Svar</p></div>
       </details>
     </div>
   De gamla klassnamnen står med i selektorerna som alias, så att sidor som
   inte är omgjorda får samma rader utan ny markup (.v3-faq på artiklarna och
   /vanliga-fragor/; .klim-faq och .st-faq för säkerhets skull). Två varianter
   står kvar orörda tills deras sidor görs om: .rik-faq har egna regler med
   högre specificitet i kunskap/artikel-rik.css (ett alias här blandades med
   dem till kryss plus chevron), och startsidans gamla knappvariant
   (.faq__item och .faq__q med skript) ligger i redesign.css för
   BMI-kalkylatorn och viktprognosen. Byt markupen till .lp-faq där. */
.lp-faq, .klim-faq, .v3-faq__list { border-top: 1px solid var(--lp-line); }
.lp-faq__rad, .klim-faq__rad, .st-faq, .v3-faq__item { border-bottom: 1px solid var(--lp-line); }
:is(.lp-faq__rad, .klim-faq__rad, .st-faq, .v3-faq__item) > summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 56px; padding: 12px 0;
  font-family: var(--lp-font-display); font-weight: 700; font-size: var(--lp-text-body); line-height: var(--lp-leading-title);
  color: var(--lp-ink); -webkit-tap-highlight-color: transparent;
  transition: color var(--lp-dur-fast) var(--lp-ease);
}
:is(.lp-faq__rad, .klim-faq__rad, .st-faq, .v3-faq__item) > summary::-webkit-details-marker { display: none; }
:is(.lp-faq__rad, .klim-faq__rad, .st-faq, .v3-faq__item) > summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
  color: var(--lp-ink-muted); transition: transform var(--lp-dur) var(--lp-ease), color var(--lp-dur) var(--lp-ease);
}
:is(.lp-faq__rad, .klim-faq__rad, .st-faq, .v3-faq__item)[open] > summary::after { transform: rotate(45deg); color: var(--lp-dot); }
:is(.lp-faq__rad, .klim-faq__rad, .st-faq, .v3-faq__item) > summary:hover { color: var(--lp-brand); }
:is(.lp-faq__rad, .klim-faq__rad, .st-faq, .v3-faq__item) > summary:hover::after { color: var(--lp-brand); }
:is(.lp-faq__rad, .klim-faq__rad, .st-faq, .v3-faq__item) > summary:focus-visible { outline: none; box-shadow: var(--lp-focus); border-radius: var(--lp-r-sm); }
.lp-faq__svar, .v3-faq__answer, :is(.klim-faq__rad, .st-faq) > p {
  margin: 0; padding: 0 0 18px; max-width: 68ch;
  font-size: var(--lp-text-body); line-height: var(--lp-leading-body); color: var(--lp-ink-soft);
}
.lp-faq__svar p, .v3-faq__answer p { margin: 0 0 12px; font-size: inherit; line-height: inherit; color: inherit; }
.lp-faq__svar p:last-child, .v3-faq__answer p:last-child { margin-bottom: 0; }
.lp-faq__svar a, .v3-faq__answer a { color: var(--lp-brand); text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  :is(.lp-faq__rad, .klim-faq__rad, .st-faq, .v3-faq__item) > summary::after { transition: none; }
}
/* prototypen: bildtexten i linje med videons kanter */
.vprocess__media{align-items:center}
.vprocess__media figcaption{align-self:center;width:100%;max-width:360px;max-width:min(360px,100%)}