/* Weapp UI — lager L1 (element) och L2 (komponenter) som .w-*-klasser.
   Bara var(--w-*) från tokens.css; inga egna färger, tider, radier.
   Laddas av SiteStyles.astro efter semplice-base-post.css på alla Astro-sidor
   (aldrig på legacy-spegeln). Regler som konkurrerar med Semplices
   #content-holder h1 / input{…} prefixas med #content-holder (1,1,0 slår 1,0,1).
   Levande prover: /styleguide. Regelverk: docs/design-system/07-regelverk.md. */

/* ============================================================ 0. Sida */
.w-page { background: var(--w-bg); color: var(--w-ink); font-family: var(--w-font-body); }
#content-holder.w-page, #content-holder.w-page td, #content-holder.w-page th, #content-holder.w-page nav, #content-holder.w-page summary, #content-holder.w-page label, #content-holder.w-page a { font-family: var(--w-font-body); }
#content-holder.w-page h1 { font-family: var(--w-font-h1); }
/* Avstavning bara där långa ord annars bryts mitt itu (Semplice: overflow-wrap) — inte på desktop där rubriker ska brytas mellan ord */
@media screen and (max-width: 767.98px) { #content-holder.w-page h1, #content-holder.w-page h2 { hyphens: auto; } }
#content-holder.w-page h2, #content-holder.w-page h3 { font-family: var(--w-font-h2); }
/* Baslinje mot WP-/Semplice-globaler: länkar ärver färg (a{color:#42b16b}), fält och kod får tokens,
   hr får linjefärg. Specifika .w-*-regler nedan sätter sedan sina egna värden. */
#content-holder.w-page a { color: inherit; }
#content-holder.w-page input, #content-holder.w-page textarea, #content-holder.w-page select, #content-holder.w-page button {
  color: var(--w-ink); border-color: var(--w-line); border-radius: var(--w-radius); box-shadow: var(--w-shadow); font-family: var(--w-font-body);
}
#content-holder.w-page code, #content-holder.w-page pre, #content-holder.w-page kbd {
  color: var(--w-ink); background: var(--w-white); border: var(--w-border) solid var(--w-line); border-radius: var(--w-radius); padding: 0 var(--w-space-4);
}
#content-holder.w-page hr { color: var(--w-line); border-color: var(--w-line); }
.w-page :focus-visible, header.semplice-navbar a:focus-visible, #overlay-menu a:focus-visible { outline: var(--w-focus); outline-offset: var(--w-focus-offset); }
.w-page img { max-width: 100%; height: auto; }

/* ============================================================ 1. Typografi
   Basskalan (h1/h2/h3/p) sätts av semplice-base-post.css. Roll-klasserna
   nedan används när ett element ska ha ett annat steg än sin tagg. */
#content-holder .w-display { font-family: var(--w-font-h1); font-size: var(--w-display-size); line-height: var(--w-display-lh); letter-spacing: var(--w-h1-ls); }
#content-holder .w-h1 { font-family: var(--w-font-h1); font-size: var(--w-h1-size); line-height: var(--w-h1-lh); letter-spacing: var(--w-h1-ls); }
#content-holder .w-h2 { font-family: var(--w-font-h2); font-size: var(--w-h2-size); line-height: var(--w-h2-lh); letter-spacing: var(--w-h2-ls); }
#content-holder .w-h3 { font-family: var(--w-font-h2); font-size: var(--w-h3-size); line-height: var(--w-h3-lh); letter-spacing: var(--w-h3-ls); }
/* Artikelrubrik: h1-snittet i h2-steget (104px i en 736px-kolumn är oläsbart). */
#content-holder .w-article-title { font-family: var(--w-font-h1); font-size: var(--w-h2-size); line-height: var(--w-h2-lh); letter-spacing: var(--w-h2-ls); }
#content-holder .w-lead, #content-holder p.w-lead { font-family: var(--w-font-body); font-size: var(--w-lead-size); line-height: var(--w-lead-lh); color: var(--w-muted); }
/* Kicker = legacyns h2 i brödtextstorlek, sentence case, dämpad. Aldrig versaler. */
#content-holder .w-kicker, #content-holder p.w-kicker { font-family: var(--w-font-body); font-size: var(--w-kicker-size); line-height: var(--w-kicker-lh); letter-spacing: 0; color: var(--w-muted); margin: 0 0 var(--w-space-24); }
#content-holder .w-small, .w-small { font-size: var(--w-small-size); line-height: var(--w-small-lh); }
.w-muted { color: var(--w-muted); }
.w-accent { color: var(--w-green); }
.w-semibold { font-family: var(--w-font-semibold); }

/* Löptext (artiklar): marginaler, listor, länkar med 1px-underline. */
#content-holder .w-prose h2 { font-size: var(--w-h3-size); line-height: var(--w-h3-lh); letter-spacing: var(--w-h3-ls); margin: var(--w-space-64) 0 var(--w-space-24); }
#content-holder .w-prose h3 { font-family: var(--w-font-h2); font-size: var(--w-lead-size); line-height: var(--w-lead-lh); letter-spacing: 0; margin: var(--w-space-40) 0 var(--w-space-16); }
#content-holder .w-prose p, #content-holder .w-prose ul, #content-holder .w-prose ol { margin: 0 0 var(--w-body-mb); }
#content-holder .w-prose ul, #content-holder .w-prose ol { padding-left: var(--w-space-24); }
#content-holder .w-prose li { margin-bottom: var(--w-space-8); }
#content-holder .w-prose strong { font-family: var(--w-font-semibold); font-weight: 400; }
#content-holder .w-prose ul.w-quotes { padding-left: 0; margin: 0 0 var(--w-space-24); }
#content-holder .w-prose a { color: var(--w-ink); text-decoration: none; border-bottom: var(--w-border) solid var(--w-line); transition: color var(--w-dur-hover) var(--w-ease), border-color var(--w-dur-hover) var(--w-ease); }
#content-holder .w-prose a:hover { color: var(--w-green); border-color: var(--w-green); }
/* Punktlista utanför löptext (kort, kolumner) */
#content-holder .w-list { list-style: disc; margin: 0 0 var(--w-space-24); padding: 0 0 0 var(--w-space-24); }
#content-holder .w-list li { margin: 0 0 var(--w-space-8); padding: 0; }
/* Länkar i små texter (samtycke, finstilt, notis) — annars WP-globalens gröna */
#content-holder .w-check a, #content-holder .w-fine a, #content-holder .w-notice a, #content-holder .w-card p a:not(.w-link):not(.w-btn) { color: inherit; text-decoration: none; border-bottom: var(--w-border) solid currentColor; transition: color var(--w-dur-hover) var(--w-ease); }
#content-holder .w-check a:hover, #content-holder .w-fine a:hover, #content-holder .w-notice a:hover, #content-holder .w-card p a:not(.w-link):not(.w-btn):hover { color: var(--w-green); }

/* ============================================================ 2. Layout */
.w-wrap { max-width: var(--w-wrap); margin: 0 auto; padding: 0 var(--w-page-x); box-sizing: content-box; }
.w-measure { max-width: var(--w-measure); box-sizing: border-box; }
/* Ljus hero: samma nav-kompensation som teal-heron, sidans bakgrund */
.w-hero { padding: calc(var(--w-nav-h) + var(--w-space-120)) 0 var(--w-space-80); }
@media screen and (max-width: 767.98px) { .w-hero { padding-top: calc(var(--w-nav-h) + var(--w-space-80)); padding-bottom: var(--w-space-80); } }
.w-page [id] { scroll-margin-top: calc(var(--w-nav-h) + var(--w-space-24)); }
.w-section { padding: var(--w-section-y) 0; }
.w-section--white { background: var(--w-white); }
.w-section--tall { padding: var(--w-space-120) 0; }
.w-grid-2, .w-grid-3, .w-grid-4, .w-media { display: grid; gap: var(--w-space-40) var(--w-gutter); }
/* Teamgrid (about_us): två per rad på mobil, fyra från 768 */
.w-grid-4 { grid-template-columns: 1fr 1fr; }
/* Bild + text (case-sidorna): bild 6/12, text 4/12, bottenjusterat; staplas bild → text under 768 */
.w-media { align-items: end; }
#content-holder .w-grid-2 h3, #content-holder .w-grid-3 h3, #content-holder .w-grid-4 h3, #content-holder .w-media h3 { margin: 0 0 var(--w-space-8); }
#content-holder .w-grid-2 p + p, #content-holder .w-grid-3 p + p, #content-holder .w-grid-4 p + p, #content-holder .w-media p + p { margin-top: var(--w-space-16); }
/* Taggrad: flera pills */
.w-pills { display: flex; flex-wrap: wrap; gap: var(--w-space-8); list-style: none; margin: 0; padding: 0; }
.w-actions { display: flex; flex-wrap: wrap; gap: var(--w-space-24); align-items: center; }
.w-divider { border: 0; border-top: var(--w-border) solid var(--w-line); height: 0; margin: var(--w-space-40) 0; }
@media screen and (min-width: 768px) {
  .w-grid-2 { grid-template-columns: 1fr 1fr; }
  .w-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .w-grid-4 { grid-template-columns: repeat(4, 1fr); }
  .w-media { grid-template-columns: 3fr 2fr; }
  .w-media--flip { grid-template-columns: 2fr 3fr; } /* texten först i markupen */
}
/* Case-grid som på home: två lika kolumner från 768, växlande 5/12 + 7/12 från 1170, toppjusterat
   (olika höjd i raden är sajtens uttryck, inte ett fel) */
@media screen and (min-width: 1170px) {
  .w-grid-2--case { grid-template-columns: repeat(12, 1fr); align-items: start; }
  .w-grid-2--case > :nth-child(4n + 1), .w-grid-2--case > :nth-child(4n + 4) { grid-column: span 5; }
  .w-grid-2--case > :nth-child(4n + 2), .w-grid-2--case > :nth-child(4n + 3) { grid-column: span 7; }
}

/* ============================================================ 3. Band (mörka/gröna ytor)
   Max två teal-band per sida: hero + footer. Ett grönt CTA-band är tillåtet. */
.w-band { padding: var(--w-band-y) 0; }
.w-band--teal { background: var(--w-teal); color: var(--w-text-on-dark); }
.w-band--footer { background: var(--w-teal); color: var(--w-text-on-dark); padding: var(--w-footer-top) 0 var(--w-footer-bottom); }
#content-holder .w-band--teal h1, #content-holder .w-band--teal h2, #content-holder .w-band--teal h3,
#content-holder .w-band--footer h1, #content-holder .w-band--footer h2, #content-holder .w-band--footer h3,
/* Grön h1 på mörk hero (/ai) och grön andra rad i footer-rubriken (home) */
.w-band--teal .w-accent, .w-band--footer .w-accent { color: var(--w-green); }
#content-holder .w-band--teal p, #content-holder .w-band--footer p{ color: var(--w-text-on-dark); }
#content-holder .w-band--teal .w-kicker, #content-holder .w-band--footer .w-kicker,
#content-holder .w-band--teal .w-lead{ color: var(--w-bg); }
.w-band--teal .w-divider, .w-band--footer .w-divider { border-color: var(--w-line-on-dark); }

/* Vertikal rytm inuti sektioner, band och heron (Semplice nollar h1–h3/p):
   h1 → 24 · h2 → 40 · ingress → 40 · stycke → 24 · handlingar ↑ 40 */
#content-holder .w-hero h1, #content-holder .w-section h1 { margin: 0 0 var(--w-space-24); }
#content-holder .w-section h2, #content-holder .w-band h2, #content-holder .w-hero h2{ margin: 0 0 var(--w-space-40); }
#content-holder .w-section p, #content-holder .w-band p, #content-holder .w-hero p{ margin: 0 0 var(--w-space-24); }
#content-holder .w-section .w-lead, #content-holder .w-band .w-lead, #content-holder .w-hero .w-lead{ margin: 0 0 var(--w-space-40); }
#content-holder .w-section .w-kicker, #content-holder .w-band .w-kicker, #content-holder .w-hero .w-kicker{ margin: 0 0 var(--w-space-24); }
#content-holder .w-section .w-actions, #content-holder .w-band .w-actions, #content-holder .w-hero .w-actions{ margin-top: var(--w-space-40); }
#content-holder .w-section .w-actions p, #content-holder .w-band .w-actions p { margin: 0; }
#content-holder .w-section > .w-wrap > :last-child, #content-holder .w-band > .w-wrap > :last-child,
#content-holder .w-hero > .w-wrap > :last-child{ margin-bottom: 0; }
/* Sista barnet i en kolumn/rad/kort/prose lämnar ingen extra luft */
#content-holder .w-grid-2 > * > :last-child, #content-holder .w-grid-3 > * > :last-child, #content-holder .w-grid-4 > * > :last-child, #content-holder .w-media > * > :last-child, #content-holder .w-prose > :last-child,
#content-holder .w-step > :last-child, #content-holder .w-rows > li > :last-child, #content-holder .w-card > :last-child { margin-bottom: 0; }
/* Fotnot eller stycke efter ett block: 40 ovanför. Avsändare efter citat: 8. */
#content-holder .w-grid-2 + p, #content-holder .w-grid-3 + p, #content-holder .w-grid-4 + p, #content-holder .w-media + p, #content-holder .w-figure + p, #content-holder .w-steps + p, #content-holder .w-logos + p, #content-holder .w-rows + p,
#content-holder .w-linklist + p, #content-holder .w-table-wrap + p, #content-holder .w-faq + p, #content-holder .w-pills + p, #content-holder .w-card + p { margin-top: var(--w-space-40); }
#content-holder .w-quotes + p { margin-top: var(--w-space-8); }
/* Nyckeltal: siffra → etikett 8 */
#content-holder .w-grid-2 > * > .w-h1, #content-holder .w-grid-3 > * > .w-h1, #content-holder .w-grid-2 > * > .w-h2, #content-holder .w-grid-3 > * > .w-h2 { margin-bottom: var(--w-space-8); }

/* ============================================================ 4. Knappar
   A: outline ink som fylls med ink (ljust). B: outline ljus som fylls med ljus (teal).
   C: textlänk. D: pill. Inga andra. All knapptext i Regular. */
#content-holder .w-btn {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  font-family: var(--w-font-body); font-weight: 400; font-size: var(--w-ui-size); line-height: 1;
  letter-spacing: 0; text-decoration: none; cursor: pointer; appearance: none;
  color: var(--w-ink); border: var(--w-border) solid var(--w-ink); border-radius: var(--w-radius);
  padding: var(--w-btn-a-pad); box-shadow: var(--w-shadow);
  background-color: transparent; background-image: linear-gradient(var(--w-ink), var(--w-ink));
  background-repeat: no-repeat; background-size: 0% 100%; background-position: 0 0;
  transition: color var(--w-dur-fill) var(--w-ease), background-size var(--w-dur-fill) var(--w-ease), border-color var(--w-dur-fill) var(--w-ease);
}
#content-holder .w-btn:hover, #content-holder .w-btn:focus-visible { background-size: 100% 100%; color: var(--w-bg); border-color: transparent; }
#content-holder .w-btn:disabled { opacity: 0.5; cursor: default; }
#content-holder .w-btn--b {
  color: var(--w-white); border-color: var(--w-bg); padding: var(--w-btn-b-pad);
  background-image: linear-gradient(var(--w-bg), var(--w-bg));
  transition: color var(--w-dur-fill-b) var(--w-ease-in-out), background-size var(--w-dur-fill-b) var(--w-ease-in-out), border-color var(--w-dur-fill-b) var(--w-ease-in-out);
}
#content-holder .w-btn--b:hover, #content-holder .w-btn--b:focus-visible { color: var(--w-teal); border-color: transparent; }
#content-holder .w-btn--pill, #content-holder .w-pill { border-radius: var(--w-radius-pill); padding: var(--w-pill-pad); }
#content-holder .w-pill { display: inline-flex; font-family: var(--w-font-body); font-size: var(--w-ui-size); line-height: 1; color: var(--w-ink); border: var(--w-border) solid var(--w-ink); }
#content-holder .w-band--teal .w-pill, #content-holder .w-band--footer .w-pill { color: var(--w-bg); border-color: var(--w-bg); }
#content-holder .w-card .w-pill { color: var(--w-ink); border-color: var(--w-ink); } /* kort är alltid vitt, även i teal-hero */
#content-holder .w-band--teal .w-card .w-kicker { color: var(--w-muted); } /* kicker i kort på teal: dämpad, inte ljus (fynd från presentationen 2026-09-08) */
#content-holder .w-pill.w-pill--small { font-size: var(--w-body-size); padding: var(--w-space-4) var(--w-space-16); }
#content-holder p.w-pills, #content-holder ul.w-pills { margin: 0; }
.w-btn-block { width: 100%; }
#content-holder .w-btn-block { padding-left: var(--w-space-24); padding-right: var(--w-space-24); } /* bredden kommer från behållaren */
@media screen and (max-width: 543.98px) { .w-card { padding: var(--w-space-24); } #content-holder .w-btn { padding-left: var(--w-space-40); padding-right: var(--w-space-40); } }

/* Textlänk C: grönt + spärrning vid hover, layouten står still (margin-komp). */
.w-link { color: inherit; text-decoration: none; letter-spacing: 0; transition: color var(--w-dur-hover) var(--w-ease), letter-spacing var(--w-dur-hover) var(--w-ease), margin-right var(--w-dur-hover) var(--w-ease); }
.w-link:hover { color: var(--w-green); letter-spacing: var(--w-hover-ls); margin-right: calc(-1 * var(--w-hover-ls)); }
.w-link--big { font-size: var(--w-h3-size); line-height: var(--w-h3-lh); }

/* ============================================================ 5. Formulär (beslut 2026-09-05: "Yta och pills")
   Fält = fylld yta utan kant i vila (grå på vitt/i kort, vit på grå), kanten tänds i bläck vid fokus.
   Val = pills: radio/kryssrutor i .w-radios/.w-checks renderas som pill, vald pill fylls med bläck.
   Ensam .w-check (samtycke) är en nativ kryssruta. Sektionsvariant .w-form-steps = numrerade frågor.
   Semplice sätter input{height:40px;font-size:14px;border-radius:4px;width:100%!important}
   och :focus{outline:0!important} — därav specificitet och två !important. */
#content-holder .w-field { display: block; margin: 0 0 var(--w-space-24); }
#content-holder .w-field label, #content-holder .w-label, #content-holder p.w-label { display: block; font-family: var(--w-font-body); font-weight: 400; font-size: var(--w-body-size); line-height: var(--w-body-lh); color: var(--w-ink); margin: 0 0 var(--w-space-8); }
#content-holder .w-field input, #content-holder .w-field textarea, #content-holder .w-field select, #content-holder .w-input {
  display: block; width: 100%; height: auto; box-sizing: border-box; appearance: none;
  font-family: var(--w-font-body); font-size: var(--w-body-size); line-height: var(--w-body-lh); color: var(--w-ink);
  background: var(--w-bg); border: var(--w-border) solid transparent; border-radius: var(--w-radius); box-shadow: var(--w-shadow);
  padding: var(--w-space-16) var(--w-space-24); margin: 0;
  transition: border-color var(--w-dur-hover) var(--w-ease), background-color var(--w-dur-hover) var(--w-ease);
}
/* På grå sektion utan kort: vita fält. I kort (alltid vitt): grå fält. */
#content-holder .w-section .w-field input, #content-holder .w-section .w-field textarea, #content-holder .w-section .w-field select { background: var(--w-white); }
#content-holder .w-section--white .w-field input, #content-holder .w-section--white .w-field textarea, #content-holder .w-section--white .w-field select,
#content-holder .w-card .w-field input, #content-holder .w-card .w-field textarea, #content-holder .w-card .w-field select { background: var(--w-bg); }
#content-holder .w-field select { appearance: auto; }
#content-holder .w-field textarea { min-height: 160px; resize: vertical; }
#content-holder .w-field input:hover, #content-holder .w-field textarea:hover, #content-holder .w-field select:hover { border-color: var(--w-line); }
#content-holder .w-field input:focus, #content-holder .w-field textarea:focus, #content-holder .w-field select:focus {
  outline: var(--w-focus) !important; /* semplice: input:focus{outline:0!important} */
  outline-offset: var(--w-focus-offset); border-color: var(--w-ink); background: var(--w-white);
}
#content-holder .w-field input::placeholder, #content-holder .w-field textarea::placeholder { color: var(--w-muted); }

/* Ensam kryssruta (samtycke): nativ kontroll i varumärkets gröna */
#content-holder .w-check { display: flex; gap: var(--w-space-16); align-items: flex-start; font-size: var(--w-small-size); line-height: var(--w-small-lh); color: var(--w-ink); margin: 0 0 var(--w-space-24); cursor: pointer; }
#content-holder .w-check input[type='checkbox'], #content-holder .w-check input[type='radio'] {
  appearance: auto; -webkit-appearance: auto; width: 20px; height: 20px; flex: 0 0 20px; margin: 0;
  accent-color: var(--w-ink); border-radius: var(--w-radius); cursor: pointer;
}
#content-holder .w-check input[type='radio'] { border-radius: var(--w-radius-pill); }
#content-holder .w-check input:focus-visible { outline: var(--w-focus) !important; /* semplice: input:focus{outline:0!important} */ outline-offset: var(--w-focus-offset); }

/* Val som pills: gruppen är en rad, varje .w-check är en pill, vald = bläck */
#content-holder .w-radios, #content-holder .w-checks { display: flex; flex-wrap: wrap; gap: var(--w-space-8); margin: 0 0 var(--w-space-24); }
#content-holder .w-radios .w-check, #content-holder .w-checks .w-check {
  position: relative; display: inline-flex; align-items: center; gap: 0; margin: 0;
  font-size: var(--w-body-size); line-height: var(--w-body-lh); color: var(--w-ink);
  border: var(--w-border) solid var(--w-ink); border-radius: var(--w-radius-pill); padding: var(--w-space-8) var(--w-space-24);
  background-color: transparent; transition: background-color var(--w-dur-hover) var(--w-ease), color var(--w-dur-hover) var(--w-ease);
}
#content-holder .w-radios .w-check input, #content-holder .w-checks .w-check input { position: absolute; opacity: 0; width: 1px; height: 1px; flex: none; margin: 0; }
#content-holder .w-radios .w-check:hover, #content-holder .w-checks .w-check:hover { background-color: var(--w-bg); }
#content-holder .w-radios .w-check:has(input:checked), #content-holder .w-checks .w-check:has(input:checked) { background-color: var(--w-ink); color: var(--w-bg); }
#content-holder .w-radios .w-check:has(input:focus-visible), #content-holder .w-checks .w-check:has(input:focus-visible) { outline: var(--w-focus); outline-offset: var(--w-focus-offset); }
.w-band--teal .w-radios .w-check, .w-band--teal .w-checks .w-check{ color: var(--w-bg); border-color: var(--w-bg); }
#content-holder .w-card .w-radios .w-check, #content-holder .w-card .w-checks .w-check { color: var(--w-ink); border-color: var(--w-ink); }
#content-holder .w-card .w-radios .w-check:has(input:checked), #content-holder .w-card .w-checks .w-check:has(input:checked) { color: var(--w-bg); }

/* Fel, finstilt, honeypot, notis */
#content-holder .w-error, #content-holder p.w-error { color: var(--w-error); font-family: var(--w-font-body); font-size: var(--w-small-size); line-height: var(--w-small-lh); margin: var(--w-space-8) 0 0; }
#content-holder .w-error:empty, #content-holder p.w-error:empty { display: none; }
#content-holder .w-fine, #content-holder p.w-fine { font-size: var(--w-small-size); line-height: var(--w-small-lh); color: var(--w-muted); margin: var(--w-space-16) 0 0; }
.w-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#content-holder .w-notice, #content-holder p.w-notice { border-top: var(--w-border) solid var(--w-line); border-bottom: var(--w-border) solid var(--w-line); padding: var(--w-space-24) 0; margin: var(--w-space-24) 0 0; color: var(--w-ink); }
/* Tack-notis vid lead-formulär: mcp-lead.js växlar .mcp-thanks (klassnamnet är JS-beroende, gäller alla sidor) */
.mcp-thanks { display: none; }
.mcp-thanks.is-shown { display: block; }

/* Sektionsvariant "numrerat samtal": en fråga per rad, 01 02 03, frågan i rubriksnitt, linjefält */
#content-holder .w-form-steps { counter-reset: w-q; }
#content-holder .w-form-steps .w-q { counter-increment: w-q; border-top: var(--w-border) solid var(--w-line); padding: var(--w-space-40) 0; display: grid; grid-template-columns: var(--w-space-80) 1fr; gap: var(--w-gutter); align-items: start; }
#content-holder .w-form-steps .w-q::before { content: counter(w-q, decimal-leading-zero); font-family: var(--w-font-h2); font-size: var(--w-h3-size); line-height: var(--w-h3-lh); color: var(--w-green); }
#content-holder .w-form-steps .w-q > div { min-width: 0; }
#content-holder .w-form-steps .w-q label, #content-holder .w-form-steps .w-q .w-label { font-family: var(--w-font-h2); font-size: var(--w-h3-size); line-height: var(--w-h3-lh); letter-spacing: var(--w-h3-ls); margin: 0 0 var(--w-space-16); }
#content-holder .w-form-steps .w-q .w-field { margin: 0; }
#content-holder .w-form-steps .w-q input, #content-holder .w-form-steps .w-q textarea, #content-holder .w-form-steps .w-q select {
  background: transparent; border: 0; border-bottom: var(--w-border) solid var(--w-line); padding: var(--w-space-8) 0 var(--w-space-16); font-size: var(--w-lead-size); line-height: var(--w-lead-lh);
}
#content-holder .w-form-steps .w-q input:focus, #content-holder .w-form-steps .w-q textarea:focus, #content-holder .w-form-steps .w-q select:focus { border-bottom-color: var(--w-green); background: transparent; }
#content-holder .w-form-steps .w-q .w-radios, #content-holder .w-form-steps .w-q .w-checks { margin: 0; }
#content-holder .w-form-steps .w-q-end { border-top: var(--w-border) solid var(--w-line); padding-top: var(--w-space-40); display: grid; grid-template-columns: var(--w-space-80) 1fr; gap: var(--w-gutter); }
@media screen and (max-width: 767.98px) {
  #content-holder .w-form-steps .w-q, #content-holder .w-form-steps .w-q-end { grid-template-columns: var(--w-space-40) 1fr; }
}

/* ============================================================ 6. Kort och rader */
.w-card { background: var(--w-white); color: var(--w-ink); border: var(--w-border) solid var(--w-line); border-radius: var(--w-radius); box-shadow: var(--w-shadow); padding: var(--w-space-40); }
.w-band--teal .w-card { border-color: var(--w-line-on-dark); }
#content-holder .w-card h2, #content-holder .w-card h3 { font-family: var(--w-font-h2); font-size: var(--w-h3-size); line-height: var(--w-h3-lh); letter-spacing: var(--w-h3-ls); color: var(--w-ink); margin: 0 0 var(--w-space-8); }
#content-holder .w-card .w-pill { margin: 0 0 var(--w-space-16); }
#content-holder .w-card > img, #content-holder .w-card .w-figure { display: block; width: 100%; height: auto; margin: 0 0 var(--w-space-24); }
#content-holder .w-card > .w-btn, #content-holder .w-card > .w-actions { margin-top: var(--w-space-24); }
#content-holder .w-card .w-lead, #content-holder .w-card p.w-lead { color: var(--w-muted); margin: 0 0 var(--w-space-24); }
#content-holder .w-card .w-list { margin-bottom: var(--w-space-24); }
#content-holder .w-card > p.w-notice, #content-holder .w-card > .w-notice { margin-top: var(--w-space-24); }
/* Kort i grid: kolumn så att knappen sist hamnar på samma höjd i alla kort */
#content-holder .w-grid-2 > .w-card, #content-holder .w-grid-3 > .w-card { display: flex; flex-direction: column; align-items: flex-start; }
#content-holder .w-grid-2 > .w-card > .w-btn:last-child, #content-holder .w-grid-3 > .w-card > .w-btn:last-child { margin-top: auto; }
#content-holder .w-grid-2 > .w-card > :nth-last-child(2), #content-holder .w-grid-3 > .w-card > :nth-last-child(2) { margin-bottom: var(--w-space-24); }
#content-holder .w-grid-2 > .w-card > .w-btn-block, #content-holder .w-grid-3 > .w-card > .w-btn-block { align-self: stretch; }
#content-holder .w-card p { color: var(--w-ink); }
#content-holder .w-card > p { margin: 0 0 var(--w-space-24); }
#content-holder .w-card .w-muted, #content-holder .w-card .w-fine { color: var(--w-muted); }
.w-rows { list-style: none; margin: 0; padding: 0; }
.w-rows > li { border-top: var(--w-border) solid var(--w-line); padding: var(--w-space-40) 0; }
.w-rows > li:last-child { border-bottom: var(--w-border) solid var(--w-line); }
.w-rows--tight > li { padding: var(--w-space-24) 0; }
.w-band--teal .w-rows > li, .w-band--footer .w-rows > li { border-color: var(--w-line-on-dark); }
#content-holder .w-rows h3 { margin: 0 0 var(--w-space-8); }
#content-holder .w-rows p { margin: 0; }
#content-holder .w-rows p + p { margin-top: var(--w-space-8); }

/* ============================================================ 7. Komponenter */
/* Brödsmulor och metarad */
#content-holder .w-breadcrumb, #content-holder p.w-meta, .w-breadcrumb, .w-meta { font-size: var(--w-small-size); line-height: var(--w-small-lh); color: var(--w-muted); margin: 0 0 var(--w-space-16); }
.w-breadcrumb a, .w-meta a { color: inherit; text-decoration: none; transition: color var(--w-dur-hover) var(--w-ease); }
.w-breadcrumb a:hover, .w-meta a:hover { color: var(--w-green); }
#content-holder .w-prose .w-breadcrumb a, #content-holder .w-prose .w-meta a { border-bottom: 0; }

/* Citerbart kortsvar (GEO-snippet) */
#content-holder .w-answer { font-family: var(--w-font-body); font-size: var(--w-lead-size); line-height: var(--w-lead-lh); color: var(--w-ink); border-top: var(--w-border) solid var(--w-line); border-bottom: var(--w-border) solid var(--w-line); padding: var(--w-space-24) 0; margin: var(--w-space-40) 0; }
#content-holder .w-answer p { margin: 0; }

/* FAQ — nativ <details>, plus/minus som textglyfer */
.w-faq { margin: var(--w-space-40) 0 0; }
#content-holder .w-prose .w-faq { margin-top: var(--w-space-80); }
.w-faq details { border-top: var(--w-border) solid var(--w-line); }
.w-faq details:last-of-type { border-bottom: var(--w-border) solid var(--w-line); }
#content-holder .w-faq summary { list-style: none; cursor: pointer; position: relative; font-family: var(--w-font-body); font-size: var(--w-body-size); line-height: var(--w-body-lh); color: var(--w-ink); padding: var(--w-space-24) var(--w-space-40) var(--w-space-24) 0; }
.w-faq summary::-webkit-details-marker { display: none; }
.w-faq summary::after { content: '+'; position: absolute; right: 0; top: var(--w-space-24); font-family: var(--w-font-h2); font-size: var(--w-h3-size); line-height: var(--w-body-lh); color: var(--w-green); }
.w-faq details[open] summary::after { content: '–'; }
#content-holder .w-faq details > p { margin: 0 0 var(--w-space-24); }
.w-faq-static .w-rows > li h3 { margin-bottom: var(--w-space-8); }

/* Läs vidare / länklistor */
.w-related { margin: var(--w-space-80) 0 0; }
#content-holder .w-related h2 { margin: 0 0 var(--w-space-24); }
.w-linklist { list-style: none; margin: 0; padding: 0; }
.w-linklist li { border-top: var(--w-border) solid var(--w-line); }
.w-linklist li:last-child { border-bottom: var(--w-border) solid var(--w-line); }
.w-linklist a { display: block; padding: var(--w-space-16) 0; color: var(--w-ink); text-decoration: none; transition: color var(--w-dur-hover) var(--w-ease), letter-spacing var(--w-dur-hover) var(--w-ease); }
.w-linklist a:hover { color: var(--w-green); letter-spacing: var(--w-hover-ls); }
.w-linklist li > span { display: block; padding: var(--w-space-16) 0; color: var(--w-ink); }
.w-band--teal .w-linklist li, .w-band--footer .w-linklist li { border-color: var(--w-line-on-dark); }
.w-band--teal .w-linklist a, .w-band--footer .w-linklist a { color: var(--w-text-on-dark); }

/* Tabell */
.w-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 var(--w-space-40); }
.w-table-wrap:last-child { margin-bottom: 0; }
#content-holder .w-table, #content-holder .w-prose table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--w-body-size); line-height: var(--w-body-lh); margin: 0; }
#content-holder .w-table th, #content-holder .w-prose th { text-align: left; font-family: var(--w-font-semibold); font-weight: 400; letter-spacing: 0; color: var(--w-ink); border-bottom: var(--w-border) solid var(--w-line); padding: var(--w-space-16) var(--w-space-24) var(--w-space-16) 0; vertical-align: bottom; }
#content-holder .w-table td, #content-holder .w-prose td { border-bottom: var(--w-border) solid var(--w-line); padding: var(--w-space-16) var(--w-space-24) var(--w-space-16) 0; vertical-align: top; }
#content-holder .w-table td:first-child, #content-holder .w-prose td:first-child { font-family: var(--w-font-semibold); }

/* Steg 01 02 03 (/ai2-mönstret) */
.w-steps { display: grid; gap: var(--w-space-40) var(--w-gutter); counter-reset: w-step; list-style: none; margin: 0; padding: 0; }
.w-step { counter-increment: w-step; }
.w-step::before { content: counter(w-step, decimal-leading-zero); display: block; font-family: var(--w-font-h2); font-size: var(--w-h2-size); line-height: var(--w-h2-lh); letter-spacing: var(--w-h2-ls); color: var(--w-green); margin: 0 0 var(--w-space-16); }
/* text-wrap: balance jämnar ut raderna i stegrubrikerna. Utan den fyller rad 1
   nästan hela spalten (mätt: 499 av 520 px vid 1680) och sista ordet hamnar
   så nära grannkolumnen att rubrikerna läser ihop (David 2026-09-14).
   Radantalet är oförändrat — bara brytpunkten flyttas. */
#content-holder .w-step h3 { margin: 0 0 var(--w-space-8); text-wrap: balance; }
#content-holder .w-step p { margin: 0; }
@media screen and (min-width: 768px) { .w-steps { grid-template-columns: repeat(3, 1fr); } .w-steps--2 { grid-template-columns: repeat(2, 1fr); } .w-steps--4 { grid-template-columns: repeat(2, 1fr); } }
@media screen and (min-width: 1170px) { .w-steps--4 { grid-template-columns: repeat(4, 1fr); } }

/* Citatrader — exempelfrågor, kundcitat */
.w-quotes { list-style: none; margin: 0; padding: 0; }
#content-holder .w-quotes li { font-family: var(--w-font-h2); font-size: var(--w-h3-size); line-height: var(--w-h3-lh); letter-spacing: var(--w-h3-ls); color: var(--w-ink); border-left: var(--w-border) solid var(--w-ink); padding: var(--w-space-8) 0 var(--w-space-8) var(--w-space-24); margin: 0 0 var(--w-space-24); }
.w-band--teal .w-quotes li{ color: var(--w-bg); border-color: var(--w-bg); }

/* Figur: stillastående bild utan hover (fullbredd, appskärm, porträtt utan länk).
   Bildtext = brödtext i dämpad färg, 16 under bilden (about_us-galleriet, case-sidornas "Video by …"). */
.w-figure { display: block; margin: 0; }
.w-figure img { display: block; width: 100%; height: auto; border-radius: var(--w-radius); }
#content-holder .w-figure figcaption { font-size: var(--w-body-size); line-height: var(--w-body-lh); color: var(--w-muted); margin: var(--w-space-16) 0 0; }
/* Bildformat — samma ratio i hela gridet. Fem, avlästa ur legacy (10-bilder.md):
   3:2 foto/case-thumb · 5:7 porträtt · 1:1 appskärm/detalj · 2:1 banner/galleri · 16:9 video.
   Utan ratio-klass visas bilden i sitt eget format. */
.w-ratio-16x9 img { aspect-ratio: 16 / 9; object-fit: cover; }
.w-ratio-3x2 img { aspect-ratio: 3 / 2; object-fit: cover; }
.w-ratio-2x1 img { aspect-ratio: 2 / 1; object-fit: cover; }
.w-ratio-1x1 img { aspect-ratio: 1 / 1; object-fit: cover; }
.w-ratio-5x7 img { aspect-ratio: 5 / 7; object-fit: cover; }
/* Video (case-sidornas .ce-video): fullbredd 16:9 med poster. Ljud → controls, ingen autoplay.
   Ljudlös loop → autoplay muted loop playsinline utan controls. Hero-video är legacy-only (06). */
.w-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--w-teal); }

/* Case-thumb: zoom + ink-slöja vid hover, inga rundade hörn */
.w-thumb { display: block; position: relative; overflow: hidden; border-radius: var(--w-radius); }
.w-thumb img { display: block; width: 100%; height: auto; transition: transform var(--w-dur-image) var(--w-ease-image); }
.w-thumb::after { content: ''; position: absolute; inset: 0; background: var(--w-veil); opacity: 0; transition: opacity var(--w-dur-veil) var(--w-ease-image); }
.w-thumb:hover img, .w-thumb:focus-visible img { transform: scale(var(--w-thumb-scale)); }
.w-thumb:hover::after, .w-thumb:focus-visible::after { opacity: 1; }
.w-thumb-meta { margin: var(--w-space-16) 0 0; }
#content-holder .w-thumb-meta p { margin: 0; }
#content-holder .w-thumb-meta p + p { margin-top: var(--w-space-4); }

/* Logotypvägg */
.w-logos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--w-space-40) var(--w-gutter); align-items: center; list-style: none; margin: 0; padding: 0; }
.w-logos img { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto; }
@media screen and (min-width: 768px) { .w-logos { grid-template-columns: repeat(4, 1fr); } }

/* Kategorifilter — sajtens tabbar-ersättare (masonry-filtret på personsidorna) */
.w-filter { display: flex; flex-wrap: wrap; gap: var(--w-space-8) var(--w-space-40); list-style: none; margin: 0 0 var(--w-space-40); padding: 0; }
/* #content-holder-prefix: slår formulär-reseten (#content-holder.w-page button) som annars ger alla knappar en synlig underkant — fynd av David 2026-09-10 */
#content-holder .w-filter a, #content-holder .w-filter button { font-family: var(--w-font-body); font-size: var(--w-body-size); line-height: var(--w-body-lh); color: var(--w-ink); background: none; border: 0; border-bottom: var(--w-border) solid transparent; padding: 0 0 var(--w-space-4); cursor: pointer; text-decoration: none; transition: border-color var(--w-dur-nav) var(--w-ease), color var(--w-dur-hover) var(--w-ease); }
#content-holder .w-filter a:hover, #content-holder .w-filter button:hover { color: var(--w-green); }
#content-holder .w-filter .is-active a, #content-holder .w-filter .is-active button, #content-holder .w-filter [aria-current] { border-bottom-color: var(--w-ink); }

/* Marquee-ordband (statisk stil; rörelsen är legacy-JS och kräver eget beslut) */
#content-holder .w-marquee { font-family: var(--w-font-h2); font-size: var(--w-h2-size); line-height: var(--w-h2-lh); letter-spacing: var(--w-h2-ls); color: var(--w-green); white-space: nowrap; overflow: hidden; }

/* Sticky CTA (kampanjsidor) = pill-knapp fast i underkant */
.w-sticky { position: fixed; left: 50%; bottom: var(--w-space-24); transform: translateX(-50%) translateY(200%); z-index: var(--w-z-sticky); transition: transform var(--w-dur-hover) var(--w-ease); }
#content-holder .w-sticky.w-btn { background-color: var(--w-bg); transition: transform var(--w-dur-hover) var(--w-ease), color var(--w-dur-fill) var(--w-ease), background-size var(--w-dur-fill) var(--w-ease), border-color var(--w-dur-fill) var(--w-ease); }
.w-sticky.is-shown, #content-holder .w-sticky.w-btn.is-shown { transform: translateX(-50%) translateY(0); }

/* Ikon (.w-icon) — systemets fasta uppsättning på fem, avläst ur legacy-/services.
   Renderas av SiteIcon.astro: statisk SVG i markupen, animerad av
   /scripts/w-lottie.js när den syns. Färgen bor här, aldrig i ikonfilen. */
.w-icon { display: block; width: var(--w-icon-size); height: var(--w-icon-size); color: var(--w-green); }
.w-icon svg { display: block; width: 100%; height: 100%; }
#content-holder .w-icon { margin: 0 0 var(--w-space-16); }

/* Init-fade (legacyns .hide-on-init → opacity 1 på 0.4 s) */
.w-fade { animation: w-fade var(--w-dur-init) var(--w-ease-init) both; }
@keyframes w-fade { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================ 8. Rörelsepreferens */
@media (prefers-reduced-motion: reduce) {
  #content-holder [class*='w-'], .w-page [class*='w-'], .w-page [class*='w-']::before, .w-page [class*='w-']::after {
    transition-duration: var(--w-dur-none); animation-duration: var(--w-dur-none); animation-iteration-count: 1;
  }
}