/* Agrepto Klarhet – öppen startsida (index.php för den som inte är inloggad). Ny design 0.89.0 efter användarens
   skisser (oktober 2026): ljus hjälte med demons nyckeltal och graf, plattformarna, ett mörkt band med uträkningen
   och länderna, tre perspektiv, tre steg, vanliga frågor och en mintgrön avslutning med avsändaren.
   Inga plattformsloggor. Inga style-attribut i sidan (CSP). */
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: light;
  --st-ink: #0a1733;
  --st-ink-2: #3a4a63;
  --st-muted: #6b7a90;
  --st-navy: #0b1530;
  --st-navy-2: #14204a;
  --st-blue: #1f5fd6;
  --st-blue-dark: #1648a8;
  --st-blue-soft: #eaf1fd;
  --st-mint: #5ee3b0;
  --st-mint-dark: #2fc78f;
  --st-mint-soft: #e8faf2;
  --st-violet-soft: #efeafd;
  --st-violet: #6a4fd8;
  --st-line: #e3e8f0;
  --st-line-2: #eef2f7;
  --st-bg: #ffffff;
  --st-bg-soft: #f4f7fc;
  --st-green: #178a4c;
  --st-font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --st-gutter: clamp(16px, 4.5vw, 56px);
  --st-max: 1200px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.st { margin: 0; background: var(--st-bg); color: var(--st-ink-2); font-family: var(--st-font); font-size: 17px; line-height: 1.55; overflow-x: hidden; }
.st a { color: var(--st-blue); }
.st h1, .st h2, .st h3 { color: var(--st-ink); margin: 0; letter-spacing: -.025em; }
.st p { margin: 0; }
.st-icon { width: 1em; height: 1em; flex: none; }
.st-skip { position: absolute; left: -9999px; top: 8px; z-index: 30; background: #fff; padding: 8px 12px; border-radius: 8px; }
.st-skip:focus { left: 8px; }
.st :focus-visible { outline: 3px solid var(--st-blue); outline-offset: 2px; }
.st-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.st-wrap { max-width: var(--st-max); margin: 0 auto; padding: 0 var(--st-gutter); }
.st-dot { color: var(--st-blue); }
.st-blue { color: var(--st-blue); }
.st h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.06; font-weight: 800; letter-spacing: -.035em; }
.st-section-lead { margin-top: 12px !important; max-width: 46em; font-size: clamp(16px, 1.4vw, 18.5px); color: var(--st-ink-2); }

/* ---------- Knappar och länkar ---------- */
.st-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 26px; border-radius: 12px;
  font: 700 16px/1 var(--st-font); text-decoration: none; border: 2px solid transparent; white-space: nowrap; }
.st-btn-sm { min-height: 42px; padding: 0 20px; font-size: 14.5px; }
.st-btn-lg { min-height: 58px; padding: 0 30px; font-size: 17px; }
.st-btn-mint { background: var(--st-mint); color: var(--st-navy) !important; box-shadow: 0 10px 24px rgba(47, 199, 143, .28); }
.st-btn-mint:hover { background: #7aeac0; }
.st-btn-outline { border-color: rgba(255, 255, 255, .55); color: #fff !important; background: transparent; }
.st-btn-outline:hover { background: rgba(255, 255, 255, .08); }
.st-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; text-decoration: none; }
.st-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.st-link.is-light { color: #8fb4ff; }
.st-note { font-size: 13.5px; color: var(--st-muted); }

/* ---------- Lanseringserbjudandet överst (0.60.1), samma som prissidans banner ---------- */
.st-banner { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px 18px; padding: 12px var(--st-gutter); background: linear-gradient(90deg, #1f5fd6, #1648a8); color: #fff; font-size: 15.5px; line-height: 1.45; }
.st-banner strong { color: #fff; }
.st-banner-tag { padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, .2); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.st-banner a { padding: 7px 15px; border-radius: 10px; background: #fff; color: #1648a8; font-weight: 700; text-decoration: none; white-space: nowrap; }
.st-banner a:hover { background: #eef3fd; }
.st-banner-mob { display: none; }

/* ---------- Sidhuvud ---------- */
.st-top { position: relative; z-index: 20; background: rgba(255, 255, 255, .92); border-bottom: 1px solid var(--st-line-2); }
.st-top-in { max-width: var(--st-max); margin: 0 auto; padding: 14px var(--st-gutter); display: flex; align-items: center; gap: 28px; }
.st-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--st-ink) !important; text-decoration: none; line-height: 1; }
.st-logo img { width: 40px; height: auto; }
.st-logo span { display: flex; flex-direction: column; }
.st-logo b { font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.st-logo small { font-size: 9.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--st-muted); margin-top: 3px; }
.st-nav { display: flex; align-items: center; gap: 30px; margin-left: 24px; }
.st-nav a, .st-login { color: var(--st-ink); text-decoration: none; font-size: 15px; font-weight: 600; }
.st-nav a:hover, .st-login:hover { color: var(--st-blue); }
.st-top-actions { margin-left: auto; display: flex; align-items: center; gap: 22px; }

/* Mobilmenyn: panel under sidhuvudet */
.st-menu { display: none; margin-left: auto; }
.st-menu summary { list-style: none; cursor: pointer; color: var(--st-ink); font-size: 28px; display: flex; padding: 4px; }
.st-menu summary::-webkit-details-marker { display: none; }
.st-menu-close, .st-menu[open] .st-menu-open { display: none; }
.st-menu[open] .st-menu-close, .st-menu-open { display: flex; }
.st-menu-panel { position: absolute; left: 0; right: 0; top: 100%; padding: 4px var(--st-gutter) 24px; background: var(--st-navy-2); border-radius: 0 0 20px 20px; box-shadow: 0 24px 40px rgba(0, 0, 0, .35); }
.st-menu-links a { display: flex; justify-content: space-between; align-items: center; min-height: 56px; border-bottom: 1px solid rgba(255, 255, 255, .1); color: #fff; font-size: 18px; font-weight: 600; text-decoration: none; }
.st-menu-links a::after { content: "→"; color: var(--st-mint); }
.st-menu-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.st-menu-actions .st-btn { width: 100%; white-space: normal; text-align: center; }
.st-menu-actions .st-note { color: #c9d3ea; text-align: center; margin-top: 4px; }

/* ---------- Kort (produktvyer med demons siffror) ---------- */
.st-card { background: #fff; border: 1px solid var(--st-line); border-radius: 20px; padding: 22px; box-shadow: 0 24px 60px rgba(11, 21, 48, .12); color: var(--st-ink-2); }
.st-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 14px; }
.st-card-head b { font-size: 17px; font-weight: 800; color: var(--st-ink); letter-spacing: -.01em; }
.st-card-head span { font-size: 12.5px; color: var(--st-muted); }
.st-card-head i { font-style: normal; margin-right: 6px; padding: 2px 8px; border-radius: 999px; background: #fff1e0; color: #b25b00; font-weight: 700; font-size: 11.5px; }

/* ---------- Hjälten ---------- */
.st-hero { background: radial-gradient(1100px 520px at 80% 0%, #eaf1fd 0%, rgba(234, 241, 253, 0) 70%), #fff; padding: clamp(36px, 5vw, 64px) 0 clamp(48px, 6vw, 80px); }
.st-hero-in { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.st-eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--st-blue); margin-bottom: 16px !important; }
.st-hero h1 { font-size: clamp(38px, 4vw, 56px); line-height: 1.02; font-weight: 800; letter-spacing: -.04em; }
.st-hero h1 .st-blue { display: block; }
.st-lead { margin-top: 20px !important; font-size: clamp(16.5px, 1.4vw, 18.5px); max-width: 32em; color: var(--st-ink-2); }
.st-hero-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 28px; }
.st-hero-cta .st-note { padding-left: 4px; }
.st-hero-cta .st-link { margin-top: 12px; }

.st-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.st-kpi { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 13px; border: 1px solid var(--st-line); border-radius: 14px; background: #fff; }
.st-kpi small { font-size: 12.5px; color: var(--st-ink-2); padding-right: 32px; }
.st-kpi b { font-size: clamp(16px, 1.45vw, 21px); font-weight: 800; color: var(--st-ink); letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.st-kpi em { font-style: normal; font-size: 11.5px; color: #c9d3ea; }
.st-kpi-icon { position: absolute; top: 11px; right: 11px; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--st-blue-soft); color: var(--st-blue); font-size: 14px; }
.st-kpi.is-dark { background: var(--st-navy); border-color: var(--st-navy); box-shadow: 0 10px 24px rgba(11, 21, 48, .25); }
.st-kpi.is-dark small { color: #c9d3ea; }
.st-kpi.is-dark b { color: #fff; }
.st-kpi.is-dark .st-kpi-icon { background: rgba(255, 255, 255, .1); color: #9fc0ff; }

/* Grafen: Månad/Vecka växlas med radioknapparna (inget skript). */
.st-chart { margin-top: 14px; padding: 14px 16px 8px; border: 1px solid var(--st-line); border-radius: 14px; }
.st-chart-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.st-chart-head p { font-size: 15px; font-weight: 800; color: var(--st-ink); }
.st-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--st-bg-soft); border: 1px solid var(--st-line); }
.st-seg label { padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--st-ink-2); cursor: pointer; }
#st-gran-m:checked ~ .st-chart-head label[for="st-gran-m"], #st-gran-v:checked ~ .st-chart-head label[for="st-gran-v"] { background: var(--st-blue); color: #fff; }
#st-gran-m:focus-visible ~ .st-chart-head label[for="st-gran-m"], #st-gran-v:focus-visible ~ .st-chart-head label[for="st-gran-v"] { outline: 3px solid var(--st-blue); outline-offset: 2px; }
.st-chart-week, #st-gran-v:checked ~ .st-chart-month { display: none; }
#st-gran-v:checked ~ .st-chart-week { display: block; }
.st-chart-svg { display: block; width: 100%; height: auto; margin-top: 6px; }
.st-grid { stroke: var(--st-line-2); stroke-width: 1; }
.st-grid.is-zero { stroke: #cfd7e4; }
.st-axis { font: 500 12px var(--st-font); fill: var(--st-muted); }
.st-line { fill: none; stroke: var(--st-blue); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.st-point { fill: var(--st-blue); stroke: #fff; stroke-width: 2; }
.st-point.is-small { stroke-width: 1; }

/* ---------- Passar dina system? ---------- */
.st-systems { background: var(--st-bg-soft); padding: clamp(40px, 5vw, 60px) 0; }
.st-systems h2 { font-size: clamp(26px, 2.8vw, 36px); }
.st-system-list { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.st-system-list li { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border: 1px solid var(--st-line); border-radius: 999px; background: #fff; color: var(--st-ink); font-size: 15.5px; font-weight: 700; white-space: nowrap; }
.st-system-list li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--st-mint-dark); flex: none; }
/* Fyra rutor i samma grupper som Integrationer (0.107.0). */
.st-system-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.st-system-group { background: #fff; border: 1px solid var(--st-line); border-radius: 16px; padding: 22px 24px 24px; }
.st-system-group h3 { font-size: 17px; font-weight: 800; color: var(--st-ink); }
.st-system-group .st-system-list { margin-top: 14px; }
.st-system-group .st-system-list li { background: var(--st-bg-soft); }
.st-system-list li.is-soon { color: var(--st-muted); font-weight: 600; }
.st-system-list li.is-soon::before { background: var(--st-line); }
.st-system-list li.is-soon small { font-size: 12.5px; font-weight: 600; }
/* Shopifys märke: minst 30 px högt, fritt utrymme runt om minst halva höjden. */
.st-system-badge { display: inline-block; margin-top: 20px; }
.st-system-badge img { display: block; height: 40px; width: auto; }
.st-system-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin-top: 18px !important; }
.st-system-foot span { font-size: 13.5px; color: var(--st-muted); }

/* ---------- Mörkt band: uträkningen och länderna ---------- */
.st-dark { background: radial-gradient(900px 420px at 100% 0%, rgba(31, 95, 214, .28), rgba(31, 95, 214, 0) 70%), var(--st-navy); color: #dfe6f5; padding: clamp(56px, 7vw, 96px) 0; }
.st-dark h2 { color: #fff; }
.st-dark .st-dot { color: #8fb4ff; }
.st-dark-lead { margin-top: 12px !important; max-width: 44em; font-size: clamp(16px, 1.4vw, 18.5px); color: #c9d3ea; }
.st-result { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; margin-top: 32px; }
.st-calc table, .st-markets table { width: 100%; border-collapse: collapse; margin-top: 12px; font-variant-numeric: tabular-nums; }
.st-calc th, .st-calc td { padding: 6px 0; border-bottom: 1px solid var(--st-line-2); font-size: 14px; }
.st-calc th { text-align: left; font-weight: 500; color: var(--st-ink-2); }
.st-calc td { text-align: right; color: var(--st-ink); white-space: nowrap; padding-left: 12px; }
.st-calc tr.is-subtotal th, .st-calc tr.is-subtotal td { font-weight: 700; color: var(--st-ink); border-top: 1px solid var(--st-ink); }
.st-calc tr.is-result th, .st-calc tr.is-result td { font-weight: 800; font-size: 17px; color: var(--st-ink); border-bottom: 0; padding: 12px 10px; background: var(--st-blue-soft); }
.st-calc tr.is-result th { border-radius: 10px 0 0 10px; }
.st-calc tr.is-result td { border-radius: 0 10px 10px 0; }
.st-points ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.st-points li { display: flex; gap: 16px; align-items: flex-start; }
.st-points b { display: block; color: #fff; font-size: 17px; }
.st-points li p { margin-top: 3px !important; font-size: 15.5px; color: #c9d3ea; }
.st-point-icon { width: 48px; height: 48px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(143, 180, 255, .12); color: #8fb4ff; font-size: 21px; }
.st-points-foot { margin-top: 26px !important; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .15); font-size: 15px; color: #c9d3ea; }
.st-points .st-link { margin-top: 10px; }
.st-markets-title { margin-top: clamp(56px, 7vw, 88px) !important; }
.st-markets { margin-top: 26px; }
.st-markets thead th { padding: 0 0 10px; font-size: 12.5px; font-weight: 600; color: var(--st-muted); text-align: left; border-bottom: 1px solid var(--st-line); }
.st-markets thead th + th { text-align: right; }
.st-markets thead th:last-child { text-align: left; padding-left: 40px; }
.st-markets tbody th, .st-markets tbody td { padding: 14px 0; border-bottom: 1px solid var(--st-line-2); font-size: 16px; }
.st-markets tbody th { text-align: left; font-weight: 700; color: var(--st-ink); }
.st-markets tbody td { text-align: right; font-weight: 700; color: var(--st-ink); white-space: nowrap; }
.st-markets tbody td:last-child { text-align: left; padding-left: 40px; width: 42%; }
.st-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 12px; vertical-align: -1px; }
.st-swatch.is-c1 { background: var(--st-navy); }
.st-swatch.is-c2 { background: #f07c1b; }
.st-swatch.is-c3 { background: var(--st-mint); }
.st-margin { display: flex; align-items: center; gap: 16px; font-weight: 600; }
.st-bar { width: 100%; max-width: 160px; height: 8px; }
.st-bar-bg { fill: var(--st-blue-soft); }
.st-bar-fg { fill: var(--st-blue); }
.st-markets-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 16px !important; font-size: 14px; color: var(--st-ink-2); }
.st-markets-sum b { color: var(--st-ink); margin-left: 4px; white-space: nowrap; }
.st-dark-note { margin-top: 16px !important; font-size: 14px; color: #a9b6d6; }

/* ---------- Tre perspektiv ---------- */
.st-perspectives { padding: clamp(56px, 7vw, 96px) 0 0; }
.st-persp { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-persp li { display: flex; flex-direction: column; gap: 16px; padding: 0 28px; }
.st-persp li:first-child { padding-left: 0; }
.st-persp li:last-child { padding-right: 0; }
.st-persp li + li { border-left: 1px solid var(--st-line); }
.st-persp h3 { font-size: 20px; font-weight: 800; }
.st-persp p { margin-top: 6px !important; font-size: 15.5px; color: var(--st-ink-2); }
.st-persp small { display: block; margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--st-ink); }
.st-persp-icon { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; }
.st-persp-icon.is-mint { background: var(--st-mint-soft); color: var(--st-mint-dark); }
.st-persp-icon.is-blue { background: var(--st-blue-soft); color: var(--st-blue); }
.st-persp-icon.is-violet { background: var(--st-violet-soft); color: var(--st-violet); }
.st-persp-note { margin-top: 30px !important; padding: 16px 20px; border-radius: 14px; background: var(--st-bg-soft); font-size: 15px; color: var(--st-ink-2); }

/* ---------- Tre steg ---------- */
.st-steps-section { padding: clamp(56px, 7vw, 96px) 0 0; }
.st-steps { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-steps li { display: flex; gap: 16px; align-items: flex-start; padding: 0 28px; }
.st-steps li:first-child { padding-left: 0; }
.st-steps li:last-child { padding-right: 0; }
.st-steps li + li { border-left: 1px solid var(--st-line); }
.st-steps b { display: block; color: var(--st-ink); font-size: 17px; line-height: 1.3; }
.st-steps p { margin-top: 6px !important; font-size: 15.5px; color: var(--st-ink-2); }
.st-num { width: 44px; height: 44px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--st-blue-soft); color: var(--st-blue); font-weight: 800; font-size: 17px; }

/* ---------- Vanliga frågor ---------- */
.st-faq { padding: clamp(56px, 7vw, 96px) 0; }
.st-faq-list { margin-top: 26px; border-top: 1px solid var(--st-line); max-width: 860px; }
.st-faq details { border-bottom: 1px solid var(--st-line); }
.st-faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 2px; cursor: pointer; color: var(--st-ink); font-size: 17px; font-weight: 700; }
.st-faq summary::-webkit-details-marker { display: none; }
.st-faq summary .st-icon { color: var(--st-blue); font-size: 20px; transition: transform .2s; }
.st-faq details[open] summary .st-icon { transform: rotate(180deg); }
.st-faq details p { padding: 0 2px 20px; max-width: 46em; font-size: 16px; color: var(--st-ink-2); }

/* ---------- Avslutningen (mintgrön) med avsändaren ---------- */
.st-cta { padding: 0 0 clamp(40px, 5vw, 64px); }
.st-cta-box { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 48px); align-items: center; padding: clamp(28px, 4vw, 52px); border-radius: 24px; background: var(--st-mint-soft); }
.st-cta h2 { font-size: clamp(30px, 3.6vw, 46px); }
.st-cta-lead { margin-top: 10px !important; font-size: clamp(17px, 1.5vw, 20px); color: var(--st-ink); }
.st-cta-price { margin-top: 18px !important; font-size: 15.5px; color: var(--st-ink-2); }
.st-cta-prices { margin-top: 12px; text-decoration: underline; text-underline-offset: 4px; }
.st-cta-main .st-btn { display: flex; width: max-content; margin-top: 24px; }
.st-cta-main .st-note { margin-top: 12px !important; }
.st-founder { display: flex; flex-direction: column; gap: 18px; padding-left: clamp(24px, 3vw, 40px); border-left: 1px solid #bfe9d4; }
.st-founder img { width: 150px; height: 150px; border-radius: 50%; }
.st-founder b { display: block; font-size: 19px; color: var(--st-ink); }
.st-founder p { margin-top: 6px !important; font-size: 15.5px; color: var(--st-ink-2); }
.st-founder .st-link { margin-top: 12px; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Sidfot ---------- */
.st-foot { padding: 10px 0 30px; font-size: 14.5px; }
.st-foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.st-foot nav { display: flex; flex-wrap: wrap; gap: 24px; }
.st-foot nav a { color: var(--st-ink); text-decoration: none; }
.st-foot nav a:hover { color: var(--st-blue); }
.st-foot-legal { max-width: var(--st-max); margin: 16px auto 0 !important; padding: 14px var(--st-gutter) 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 13px; color: var(--st-muted); }
.st-foot-legal span { white-space: nowrap; }
.st-foot-legal span + span::before { content: "·"; margin: 0 8px; }

/* ---------- Surfplatta ---------- */
@media (max-width: 1080px) {
  .st-nav { gap: 20px; margin-left: 8px; }
  .st-hero-in, .st-result { grid-template-columns: 1fr; }
  .st-hero-card { max-width: 680px; }
}
@media (max-width: 900px) {
  .st-persp, .st-steps { grid-template-columns: 1fr; gap: 14px; }
  .st-persp li, .st-persp li:first-child, .st-persp li:last-child,
  .st-steps li, .st-steps li:first-child, .st-steps li:last-child { padding: 18px 20px; border: 1px solid var(--st-line); border-radius: 16px; }
  .st-persp li + li, .st-steps li + li { border-left: 1px solid var(--st-line); }
  .st-persp li { flex-direction: row; align-items: center; gap: 18px; }
  .st-steps li { align-items: center; }
  .st-cta-box { grid-template-columns: 1fr; }
  .st-founder { padding: 22px 0 0; border-left: 0; border-top: 1px solid #bfe9d4; flex-direction: row; align-items: center; }
  .st-founder img { width: 110px; height: 110px; flex: none; }
}

/* ---------- Mobil ---------- */
@media (max-width: 760px) {
  body.st { font-size: 16px; }
  .st-nav, .st-top-actions { display: none; }
  .st-menu { display: block; }
  .st-banner { justify-content: center; flex-wrap: nowrap; padding: 9px 16px; font-size: 13px; gap: 10px; }
  .st-banner-tag, .st-banner-desk { display: none; }
  .st-banner-mob { display: inline; }
  .st-banner a { padding: 0; background: none; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
  .st-hero { padding-top: 26px; }
  .st-hero h1 { font-size: clamp(34px, 10vw, 44px); }
  .st-hero h1 br { display: none; }
  .st-hero-cta { align-items: stretch; text-align: center; }
  .st-hero-cta .st-btn { width: 100%; }
  .st-hero-cta .st-note { padding-left: 0; }
  .st-hero-cta .st-link { justify-content: center; margin-top: 4px; }
  .st-card { padding: 16px; border-radius: 18px; }
  .st-card-head b { font-size: 16px; }
  .st-kpis { grid-template-columns: 1fr; gap: 0; border: 1px solid var(--st-line); border-radius: 14px; overflow: hidden; }
  .st-kpi { flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0 10px; padding: 12px 14px; border: 0; border-radius: 0; }
  .st-kpi + .st-kpi { border-top: 1px solid var(--st-line); }
  .st-kpi small { font-size: 14px; padding-right: 0; }
  .st-kpi b { font-size: 19px; }
  .st-kpi em { flex-basis: 100%; }
  .st-kpi-icon { display: none; }
  .st-kpi.is-dark { box-shadow: none; }
  .st-chart { padding: 12px 10px 6px; }
  .st-chart-head p { font-size: 14px; }
  .st-seg label { padding: 5px 11px; }
  .st-axis { font-size: 15px; }
  .st-system-list { gap: 8px; }
  .st-system-list li { padding: 8px 13px; font-size: 14.5px; }
  .st-system-groups { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .st-system-group { padding: 18px 18px 20px; }
  .st-calc th, .st-calc td { font-size: 13.5px; }
  .st-markets thead { display: none; }
  .st-markets tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--st-line-2); }
  .st-markets tbody th, .st-markets tbody td { padding: 0; border: 0; }
  .st-markets tbody th { grid-row: span 2; align-self: center; }
  .st-markets tbody td:last-child { width: auto; padding-left: 0; }
  .st-margin { justify-content: flex-end; font-size: 14px; gap: 10px; }
  .st-bar { max-width: 80px; }
  .st-markets-sum { flex-direction: column; gap: 2px; }
  .st-markets-sum span[aria-hidden] { display: none; }
  .st-persp li { align-items: flex-start; }
  .st-persp-icon { width: 52px; height: 52px; font-size: 22px; }
  .st-steps li { align-items: flex-start; }
  .st-faq summary { font-size: 16px; padding: 16px 0; }
  .st-cta-box { padding: 26px 20px; border-radius: 20px; }
  .st-cta-main .st-btn { width: 100%; }
  .st-founder { flex-direction: column; align-items: flex-start; gap: 12px; }
  .st-founder img { width: 96px; height: 96px; }
  .st-foot-in { gap: 10px; }
  .st-foot nav { gap: 14px; font-size: 13px; }
  .st-foot-legal { flex-direction: column; }
  .st-foot-legal span + span::before { content: none; }
}
/* Finjustering efter skärmbilden: etiketterna på en rad, läsbar axel. */
.st-kpi small { font-size: 12px; padding-right: 24px; white-space: nowrap; }
.st-kpi-icon { width: 22px; height: 22px; top: 10px; right: 10px; font-size: 12px; }
.st-axis { font-size: 14px; }
@media (max-width: 760px) { .st-axis { font-size: 17px; } }
@media (max-width: 760px) {
  .st-axis { font-size: 16px; }
  .st-kpi small { font-size: 13px; }
  .st-kpi b { font-size: 17.5px; }
}
.st-persp-icon { flex: none; }
.st-kpi-icon { display: none; } .st-kpi small { padding-right: 0; }

/* Landningssidan för Spiris (spiris.php, 0.102.8): prisrutor och Om Spiris. */
.st-dark .sp-points { margin-top: 32px; }
/* Hela verksamheten (0.102.9): mer luft mot sektionen ovanför och det mörka bandet nedanför. */
.sp-whole { padding: clamp(72px, 9vw, 120px) 0 clamp(64px, 8vw, 104px); }
.sp-price { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.sp-price li { background: #fff; border: 1px solid #e3e8f2; border-radius: 16px; padding: 22px 24px; }
.sp-price b { display: block; font-size: 17px; margin-bottom: 6px; }
.sp-price p { margin: 0; }
.sp-about-section { padding: clamp(56px, 7vw, 96px) 0 72px; }
.sp-about { display: grid; grid-template-columns: 160px 1fr; gap: 28px; align-items: center; }
.sp-about img { width: 160px; height: 160px; border-radius: 16px; display: block; }
.sp-about p { margin: 0 0 10px; }
@media (max-width: 720px) {
  .sp-price, .sp-about { grid-template-columns: 1fr; }
}