/* =============================
   File: /assets/speed-roi.css  (v3.6 – light/orange)
   ============================= */

/* Core theme vars (LIGHT) */
.speed-roi :where(*){ box-sizing:border-box; }
.speed-roi{
  /* Light palette */
  --bg:#ffffff; 
  --panel:#ffffff; 
  --panel-soft:#fafafa; 
  --border:#eef2f7; 
  --text:#0f172a;

  --muted:#64748b; 
  --muted-2:#475569; 
  --accent:#ff7a00;   /* ORANGE brand */
  --blue:#2563eb; 
  --green:#22c55e;

  /* Tooltip (light) */
  --tooltip-bg:#fff; 
  --tooltip-border:#fed7aa; 
  --tooltip-text:#0f172a;

  /* Charts */
  --grid:#f1f5f9; 
  --axis:#334155; 
  --series-1:#22c55e; 
  --series-2:#60a5fa; 
  --series-3:#ef4444; 
  --series-4:#f59e0b; 
  --series-5:#a78bfa;

  /* CTA states (desktop mapped to ORANGE) */
  --brand-yellow:#F5D90A;  /* Mobile */
  --brand-blue:#ff7a00;    /* Desktop → brand orange */
  --brand-green:#22C55E;   /* Done */

  color:var(--text);
  background:transparent;
}
.speed-roi .visually-hidden{ position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0 0 1px 1px) !important; white-space:nowrap !important; border:0 !important; }
.speed-roi [hidden]{ display:none !important; }

/* Typography */
.speed-roi h1, .speed-roi h2, .speed-roi h3 { margin:0; font-weight:600; }
.speed-roi h2 { font-size:clamp(16px,2vw,18px); margin:20px 0 12px; border-bottom:2px solid var(--accent); padding-bottom:6px; }
.speed-roi h3 { font-size:clamp(15px,1.1vw,19px); margin-bottom:6px; font-weight:400; }
.speed-roi h4 { font-size:clamp(15px,1.4vw,19px); margin-bottom:6px; }
.speed-roi p  { margin:0 0 10px; font-size:14px; line-height:1.55; color:var(--text); }
.speed-roi a  { color:var(--accent); text-decoration:none; }
.speed-roi a:hover { text-decoration:underline; }
.speed-roi .note{ color:#475569; font-size:13px; display:block; margin-top:6px; }

/* Panels & layout */
.speed-roi .section{ background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:18px; box-shadow:0 10px 30px rgba(0,0,0,.06); margin-bottom:16px; }
.speed-roi .row{ display:flex; flex-wrap:wrap; gap:10px; }
.speed-roi .field{ flex:1; min-width:260px; }
.speed-roi .card{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:16px; margin-bottom:16px; position:relative; z-index:1; }

/* Labels + inputs */
.speed-roi label{ font-size:12.5px; display:block; margin-bottom:6px; color:#0f172a; transition:color .2s ease; }
.speed-roi .field:hover label, .speed-roi .field:focus-within label{ color:#111827; }
.speed-roi input, .speed-roi select{
  width:100%; padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; color:#0f172a; font-size:14px;
  outline:none; transition:border-color .15s ease, box-shadow .15s ease;
}
.speed-roi input:focus, .speed-roi select:focus{ border-color:#c7d2fe; box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.speed-roi input[aria-invalid="true"], .speed-roi .is-invalid{ border-color:#ef4444 !important; box-shadow:0 0 0 3px rgba(239,68,68,.15) !important; }
.speed-roi input[type=range]{ width:100%; }
.speed-roi select { position: relative; z-index: 2; }

/* Plot areas (light) */
.speed-roi .mini-plot{
  border:1px solid var(--border); border-radius:14px;
  background:linear-gradient(180deg,#ffffff 0%, #f8fafc 100%);
  width:100%; height:300px; min-height:300px; padding:0;
}
.speed-roi .mini-plot .plot-container,
.speed-roi .mini-plot .svg-container{ width:100% !important; }
.speed-roi .modebar{ display:none !important; }
.speed-roi .xtick text, .speed-roi .ytick text, .speed-roi .xaxislayer-above text, .speed-roi .yaxislayer-above text{ fill:var(--axis) !important; }
.speed-roi .gridlayer .xgrid, .speed-roi .gridlayer .ygrid{ stroke:var(--grid) !important; opacity:.8 !important; }
.speed-roi canvas{ background:transparent; }

/* Info & grid cards */
.speed-roi .info-list{ margin:8px 0 0; padding-left:18px; }
.speed-roi .info-list li{ margin-bottom:6px; }
.speed-roi .puff-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1100px; margin:0 auto; }
@media (max-width:900px){ .speed-roi .puff-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .speed-roi .puff-grid{ grid-template-columns:1fr; } }
.speed-roi .puff{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:15px; }
.speed-roi .puff-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.speed-roi .puff-title{ font-size:18px; margin:0; color:#0f172a; }

/* Metrics */
.speed-roi .puff-metrics{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; width:100%; }
@media (max-width:900px){ .speed-roi .puff-metrics{ grid-template-columns:1fr; } }
.speed-roi .metric .row2{ display:flex; flex-direction:column; gap:8px; }
.speed-roi .metric .chip{ flex:1 1 100%; }

/* Badges */
.speed-roi .badge{ font-size:12px; padding:5px 10px; border-radius:999px; border:1px solid; white-space:nowrap; }
.speed-roi .b-good{ color:#166534; background:#ecfdf5; border-color:#a7f3d0; }
.speed-roi .b-warn{ color:#9a3412; background:#fff7ed; border-color:#fed7aa; }
.speed-roi .b-bad { color:#991b1b; background:#fef2f2; border-color:#fecaca; }

/* Responsive rows */
.speed-roi .row.stack-on-mobile{ display:flex; flex-wrap:wrap; gap:12px; }
@media (max-width:768px){
  .speed-roi .row.stack-on-mobile{ flex-direction:column; }
  .speed-roi .row.stack-on-mobile > *{ flex:1 1 100% !important; min-width:100% !important; }
}

/* PSI form layout */
.speed-roi .psi-grid{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-auto-rows: auto;
  column-gap:12px;
  row-gap:10px;
  align-items:end;
}
.speed-roi .psi-grid .field{ grid-column:1 / 2; }
.speed-roi .psi-grid .actions{ grid-column:2 / 3; align-self:end; }
.speed-roi .psi-grid .status-wrap{ grid-column:1 / 2; }

/* Stacka på mobil */
@media (max-width:780px){
  .speed-roi .psi-grid{ grid-template-columns:1fr; }
  .speed-roi .psi-grid .actions,
  .speed-roi .psi-grid .status-wrap,
  .speed-roi .psi-grid .field{ grid-column:1 / -1; }
}

/* Statuspill (light) */
.speed-roi #status{
  display:inline-block; min-width:120px; padding:6px 12px;
  border-radius:999px; border:1px solid; text-align:center;
  font-size:13px; font-weight:600; line-height:1.25; white-space:nowrap;
  background:#fff7ed; border-color:#fed7aa; color:#9a3412;
}
.speed-roi #status.s-ok{ background:#ecfdf5; border-color:#a7f3d0; color:#065f46; }
.speed-roi #status.s-error{ background:#fef2f2; border-color:#fecaca; color:#991b1b; }
.speed-roi #status.s-mobile,
.speed-roi #status.s-desktop{ background:#fff1e6; border-color:#ffc999; color:#7a3410; }

/* Lead details – kompakt */
.speed-roi .lead-details .field { margin-top:0; }
.speed-roi #leadConsentWrap { margin-top:5px; text-align:left; }
.speed-roi #leadConsentWrap .check-wrap{ display:flex; gap:6px; align-items:center; }
.speed-roi #leadConsentWrap input[type="checkbox"]{ width:18px; height:18px; accent-color:var(--accent); cursor:pointer; }
.speed-roi #leadConsentWrap label{ font-size:13px; line-height:1.4; display:flex; align-items:center; gap:6px; }

/* Lead form – single column */
.speed-roi .lead-row{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:5px !important;
}
.speed-roi .lead-row .field{ min-width:100% !important; }
.speed-roi .lead-row select,
.speed-roi .lead-row input[type="text"],
.speed-roi .lead-row input[type="email"]{
  height:42px !important;
  line-height:1.2 !important;
  padding:8px 10px !important;
}
.speed-roi #leadForm .row.lead-row{ gap:5px; margin-top:0; }
.speed-roi #leadForm label{ margin-bottom:2px; font-size:12.5px; }

/* Tooltip (light) */
.speed-roi .sec-tip{
  position:fixed; left:-9999px; top:-9999px; z-index:99999;
  background:var(--tooltip-bg); border:1px solid var(--tooltip-border); border-radius:10px; padding:10px 12px;
  max-width:min(360px, 92vw); box-shadow:0 10px 30px rgba(0,0,0,.15); color:var(--tooltip-text);
  pointer-events:none; transition:opacity .12s ease, transform .12s ease; opacity:0; transform:translateY(4px);
}
.speed-roi .sec-tip.show{ opacity:1; transform:translateY(0); }
.speed-roi .sec-tip .tip-short{ font-weight:700; margin-bottom:4px; color:#111827; }
.speed-roi .sec-tip .tip-long{ font-size:13px; line-height:1.4; opacity:.95; }

/* Sekund-knappar (indikatorer 1..8) */
.speed-roi .sec-steps{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.speed-roi .sec-steps .sec{
  min-width:44px; padding:8px 12px; border-radius:28px; border:1px solid #fde68a;
  color:#7a3410; font-weight:800; background:#fff7ed; cursor:pointer;
  transition:transform .08s ease, box-shadow .12s ease, background .12s ease, outline-color .12s ease;
}
.speed-roi .sec-steps .sec:focus-visible{ outline:2px solid #fed7aa; outline-offset:2px; }
.speed-roi .sec-steps .sec.active{ box-shadow:0 0 0 2px rgba(0,0,0,.06) inset; transform:translateY(-1px); }
/* färger per steg (nyanserade men kvar) */
.speed-roi .sec-steps .sec[data-s="1"]{ background:#ecfdf5; color:#166534; border-color:#bbf7d0; }
.speed-roi .sec-steps .sec[data-s="2"]{ background:#d1fae5; color:#166534; border-color:#a7f3d0; }
.speed-roi .sec-steps .sec[data-s="3"]{ background:#fef9c3; color:#854d0e; border-color:#fde68a; }
.speed-roi .sec-steps .sec[data-s="4"]{ background:#ffedd5; color:#9a3412; border-color:#fed7aa; }
.speed-roi .sec-steps .sec[data-s="5"]{ background:#fee2e2; color:#991b1b; border-color:#fecaca; }
.speed-roi .sec-steps .sec[data-s="6"]{ background:#fecaca; color:#7f1d1d; border-color:#fca5a5; }
.speed-roi .sec-steps .sec[data-s="7"]{ background:#fca5a5; color:#7f1d1d; border-color:#f87171; }
.speed-roi .sec-steps .sec[data-s="8"]{ background:#ef4444; color:#fff; border-color:#ef4444; }

/* Z-index säkerhet för select/overlays */
.speed-roi .card { position: relative; z-index: 1; }
.speed-roi select { position: relative; z-index: 2; }
.speed-roi .lead-details { position: relative; z-index: 3; overflow: visible; }

/* URL fullbredd */
.speed-roi #psiUrl{ width:100% !important; box-sizing:border-box; }

/* === Knappsektion (ny layout) === */
.actions-row{
  display:flex;
  align-items:center;
  gap:12px;
}
.secondary-group{
  margin-left:auto;
  display:inline-flex;
  gap:10px;
}

/* Primärknapp (grund) */
.btn-primary{
  background:#fff;
  color:#111;
  border:none;
  font-weight:600;
  border-radius:9999px;
  padding:12px 24px;
  cursor:pointer;
  transition:transform .12s ease, filter .2s ease, background-color .2s ease, color .2s ease;
  text-shadow:0 1px 2px rgba(0,0,0,.12);
}
.btn-primary:hover{ filter:brightness(0.97); }
.btn-primary:focus-visible{ outline:2px solid #e5e7eb; outline-offset:2px; }
.btn-primary.is-running{ cursor:not-allowed; opacity:.9; }
.btn-primary[disabled]{ opacity:1 !important; filter:none !important; }

/* CTA-varianter (starka kontraster) */
.speed-roi .btn-primary.state-mobile  { background:var(--brand-yellow) !important; color:#000 !important; }
.speed-roi .btn-primary.state-desktop { background:var(--brand-blue)   !important; color:#fff !important; } /* orange */
.speed-roi .btn-primary.state-done    { background:var(--brand-green)  !important; color:#fff !important; }
.speed-roi .btn-primary.state-error   { background:#d32f2f             !important; color:#fff !important; }

/* Sekundära knappar */
.btn-ghost{
  background:#f1f5f9;
  color:#0f172a;
  border:none;
  border-radius:9999px;
  padding:10px 20px;
}
.btn-ghost:hover{ background:#e2e8f0; }

.btn-outline{
  background:transparent;
  color:#0f172a;
  border:1px solid #cbd5e1;
  border-radius:9999px;
  padding:10px 20px;
}
.btn-outline:hover{ border-color:#94a3b8; }

/* Endast primärknappen får extra luft */
#runTest{ margin-top:12px; }

/* === EMERGENCY CTA OVERRIDES – lägg detta sist i filen === */

/* === CTA BULLETPROOF PATCH for id="runTest" — lägg sist i filen === */
:root{
  --brand-yellow:#F5D90A;
  --brand-blue:#ff7a00;  /* desktop state = ORANGE */
  --brand-green:#22C55E;
}

/* Slå ut ev. gråning/filters i knappraden */
.speed-roi .actions-row,
.speed-roi .actions-row *{
  opacity:1 !important;
  filter:none !important;
  mix-blend-mode:normal !important;
}

/* Träffa knappen oavsett elementtyp/ramverk */
#runTest.btn-primary,
button#runTest,
a#runTest,
input#runTest[type=button],
input#runTest[type=submit]{
  -webkit-appearance:none !important;
  appearance:none !important;
  background-image:none !important;

  border:2px solid #fff !important;
  text-shadow:0 1px 2px rgba(0,0,0,.12) !important;
  box-shadow:0 4px 12px rgba(0,0,0,.10) !important;

  opacity:1 !important;
  filter:none !important;
  mix-blend-mode:normal !important;

  /* default (om ingen state-klass) = desktop ORANGE */
  background-color:var(--brand-blue) !important;
  color:#fff !important;
}

/* Tydliga tillstånd (överskriver default) */
#runTest.btn-primary.state-mobile{  background-color:var(--brand-yellow) !important; color:#000 !important; }
#runTest.btn-primary.state-desktop{ background-color:var(--brand-blue)   !important; color:#fff !important; }
#runTest.btn-primary.state-done{    background-color:var(--brand-green)  !important; color:#fff !important; }
#runTest.btn-primary.state-error{   background-color:#d32f2f             !important; color:#fff !important; }

/* “disabled”/is-running får inte gråa ut knappen */
#runTest.btn-primary[disabled],
#runTest.btn-primary.is-running{
  opacity:1 !important;
  filter:none !important;
  cursor:pointer !important; /* byt till progress om du vill */
}

/* Hover/active – lite glow & lyft */
#runTest.btn-primary:hover{
  box-shadow:0 0 12px rgba(255,122,0,.25), 0 6px 16px rgba(0,0,0,.12) !important;
  transform:translateY(-1px);
}
#runTest.btn-primary:active{ transform:translateY(0); }

/* Om något lagt mörkt överlägg via pseudo-element */
#runTest.btn-primary::before,
#runTest.btn-primary::after{ content:none !important; }

/* === CTA POLISH for #runTest === */
#runTest.btn-primary{
  min-height:48px;
  line-height:1.2;
  padding:12px 28px;
  font-size:16px;
  font-weight:600;
  border-radius:9999px;
  white-space:nowrap;
  transition: all .2s ease;
}

/* När text byts ut (done/error etc) ska storleken hålla sig stabil */
#runTest.btn-primary.state-mobile,
#runTest.btn-primary.state-desktop,
#runTest.btn-primary.state-done,
#runTest.btn-primary.state-error{
  min-width:160px;
  text-align:center;
}

/* === Lead details: toggla säkert (matchar JS) === */
.speed-roi .lead-details{ 
  display:none;
  margin-top:8px;
}
.speed-roi .lead-details.open{ 
  display:block;
  animation: leadFade .18s ease-out;
}
@keyframes leadFade{ from{ opacity:.0; transform:translateY(-2px);} to{ opacity:1; transform:translateY(0);} }

/* Radio/checkbox-row – snygg radbrytning */
.speed-roi #leadConsentWrap .check-wrap{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}

/* Inputs i lead: fokus (light) */
.speed-roi .lead-row input,
.speed-roi .lead-row select,
.speed-roi .lead-row textarea{
  background:#fff;
  border:1px solid #e5e7eb;
  color:#0f172a;
  border-radius:10px;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.speed-roi .lead-row input:focus,
.speed-roi .lead-row select:focus,
.speed-roi .lead-row textarea:focus{
  border-color:#c7d2fe;
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

/* Validering – enkel röd highlight */
.speed-roi .lead-row .is-invalid,
.speed-roi .lead-row input[aria-invalid="true"],
.speed-roi .lead-row select[aria-invalid="true"],
.speed-roi .lead-row textarea[aria-invalid="true"]{
  border-color:#ef4444 !important;
  box-shadow:0 0 0 3px rgba(239,68,68,.15) !important;
}

/* Hjälpklass – dölja snabbt via JS */
.speed-roi .is-hidden{ display:none !important; }

/* Sekund-knappar (1..8) – centrerade + 40% transparens */
.speed-roi .sec-steps{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}
.speed-roi .sec-steps .sec{
  min-width:44px;
  padding:8px 12px;
  border-radius:28px;
  border:1px solid #fde68a;
  color:#7a3410;
  font-weight:800;
  background:#fff7ed;
  cursor:pointer;
  opacity:.85;
  transition:opacity .2s ease, transform .08s ease, box-shadow .12s ease;
}
.speed-roi .sec-steps .sec:hover,
.speed-roi .sec-steps .sec.active{
  opacity:1;
}

/* Återställ-knappen under grafer */
.speed-roi .sec-controls {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}
#resetBoth {
  background: #f1f5f9;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  border-radius: 9999px;
  padding: 8px 18px;
  cursor: pointer;
  transition: background .2s ease, transform .1s ease;
}
#resetBoth:hover {
  background: #e2e8f0;
  transform: translateY(-1px);
}

/* Dölj ev. legacy-resetknappar */
#restoreM, #restoreD,
.sec-steps .ghost { display:none !important; }

/* Center the step buttons + 40% transparency baseline */
.speed-roi .step-controls{ display:flex; justify-content:center; gap:8px; margin-top:8px; }
.speed-roi .step-controls button{ opacity:.6; transition:opacity .2s ease-in-out; }
.speed-roi .step-controls button:hover,
.speed-roi .step-controls button.active{ opacity:1; }

/* ===== Light section (orange accent) kept for compatibility ===== */
.s4p-audit, .s4p-audit * { box-sizing:border-box; }
.s4p-audit{
  --green:#18a44c; --orange:#ff7a00; --ink:#0f172a; --slate:#64748b;
  --bg:#ffffff; --muted:#f8fafc; --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.08);
  --line:#eef2f7; --ring:#94a3b8; --red:#ef4444; --blue:#2563eb;
  color:var(--ink); background:var(--bg);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
/* container widths */
.s4p-audit .hero-inner,.s4p-audit .section,.s4p-audit #roi-results{max-width:1100px;margin:0 auto;padding:0 16px}
.s4p-audit h1,.s4p-audit h2,.s4p-audit h3{line-height:1.25;margin:0 0 .5rem}
.s4p-audit h2{font-size:clamp(22px,3.5vw,32px)}
.s4p-audit h3{font-size:clamp(18px,2.5vw,22px)}
.s4p-audit h4{margin:.25rem 0 .5rem;font-size:16px}
.s4p-audit p{margin:.75rem 0}
.s4p-audit a{color:inherit;text-decoration:none}
.s4p-audit a:hover{text-decoration:underline}
.s4p-audit .muted{color:var(--slate)}
.s4p-audit section{padding:32px 0}

/* buttons */
.s4p-audit .btn{display:inline-block;background:var(--orange);color:#fff;border:0;border-radius:999px;padding:12px 18px;font-weight:700;box-shadow:var(--shadow);white-space:nowrap;cursor:pointer;text-decoration:none}
.s4p-audit .btn:hover{filter:brightness(.95)}
.s4p-audit .btn:focus-visible{outline:2px solid var(--ring);outline-offset:2px}

/* cards / panels */
.s4p-audit .panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow)}
.s4p-audit .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.s4p-audit .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

/* inputs */
.s4p-audit #psiUrl{width:100%;height:48px;padding:0 14px;border-radius:12px;border:1px solid var(--line);font:inherit;outline:none;background:#fff}
.s4p-audit #psiUrl:focus{border-color:var(--ring);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.s4p-audit .form-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;align-items:center}
.s4p-audit #runTest{height:48px;line-height:48px;padding:0 20px}

/* status pill */
.s4p-audit #status.pill{display:inline-block;padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px;border:1px solid var(--line)}
.s4p-audit #status.info{background:#fff7ed;color:#9a3412;border-color:#fed7aa}
.s4p-audit #status.ok{background:#ecfdf5;color:#065f46;border-color:#a7f3d0}
.s4p-audit #status.err{background:#fef2f2;color:#991b1b;border-color:#fecaca}
.s4p-audit .is-hidden{display:none !important}

/* hero */
.s4p-audit .hero-wrap{padding:48px 0;background:linear-gradient(180deg,#ffffff 0%,#ffff 100%)}
.s4p-audit .hero-grid{display:grid;gap:28px;align-items:start;grid-template-columns:minmax(0,0.62fr) minmax(320px,0.38fr)}
.s4p-audit .hero-grid>*{min-width:0}

/* puffs */
.s4p-audit .puffs2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.s4p-audit .puff{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column;gap:12px}
.s4p-audit .puff .head{display:flex;align-items:center;gap:10px}
.s4p-audit .puff .emoji{width:32px;height:32px;border-radius:10px;background:var(--muted);display:grid;place-items:center}

/* ROI cards */
.s4p-audit .card.roi{border:1px solid var(--line);border-radius:12px;padding:14px;background:#fff;box-shadow:var(--shadow)}
.s4p-audit .card.roi .big{font-size:22px;font-weight:800;margin:0}
.s4p-audit .card.roi.good .big{color:var(--green)}
.s4p-audit .card.roi.warn .big{color:#f59e0b}

/* metric bars */
.s4p-audit .bars{display:grid;gap:6px}
.s4p-audit .bar-row{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center}
.s4p-audit .bar-label{font-size:12px;color:#475569;min-width:100px}
.s4p-audit .bar-wrap{height:10px;background:#f1f5f9;border-radius:999px;overflow:hidden}
.s4p-audit .bar{height:100%;width:0;border-radius:999px;transition:width .9s ease}
.s4p-audit .bar--ok{background:#22c55e}
.s4p-audit .bar--mid{background:#f59e0b}
.s4p-audit .bar--bad{background:#ef4444}
.s4p-audit .bar-value{font-size:12px;min-width:56px;text-align:right}

/* results block */
.s4p-audit #roi-results .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.s4p-audit #roi-results .card.lite{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.s4p-audit #roi-results .big{font-size:28px;font-weight:800;margin:6px 0}
.s4p-audit #roi-results .big.warn{color:#f59e0b}
.s4p-audit #roi-results .kv.compact{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 12px}
.s4p-audit #roi-results .kv.compact li{display:flex;align-items:center;justify-content:space-between;gap:12px}
.s4p-audit #roi-results .kv.compact span{color:var(--slate)}
.s4p-audit .charts-md{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;margin-top:16px}
.s4p-audit canvas{display:block;width:100%;max-width:100%}

/* responsive */
@media (max-width:1200px){ .s4p-audit .hero-grid{grid-template-columns:1fr} }
@media (max-width:1100px){ .s4p-audit #roi-results .kv.compact{grid-template-columns:1fr} .s4p-audit .grid3{grid-template-columns:1fr 1fr} }
@media (max-width:900px){ .s4p-audit .puffs2, .s4p-audit .grid3, .s4p-audit .charts-md{grid-template-columns:1fr} }
@media (max-width:640px){
  .s4p-audit .bar-row{grid-template-columns:1fr;gap:6px;align-items:start}
  .s4p-audit .bar-label{order:1;min-width:0;font-size:13px;line-height:1.3}
  .s4p-audit .bar-wrap{order:2;height:12px}
  .s4p-audit .bar-value{order:3;text-align:left;font-size:12px;opacity:.9}
  .s4p-audit #roi-results .kv.compact{grid-template-columns:1fr}
  .s4p-audit .hero-grid,.s4p-audit .puffs2,.s4p-audit .grid3,.s4p-audit .charts-md{grid-template-columns:1fr}
  .s4p-audit .puff{padding:16px}
}

/* Mer luft runt sektionerna som i skissen */
.s4p-audit section { padding: 36px 0; }

/* Hero-panelen något “vitare” och med tydlig skugga */
.s4p-audit .panel{
  border-radius:18px;
  padding:24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* Vinst/Förlust-kort: större siffror och jämn höjd */
.s4p-audit .card.lite { min-height: 160px; }
.s4p-audit .big { font-size: 26px; }

/* Sektionen med KPI + histogram: separera lite extra */
.s4p-audit #roi-results .charts-md { gap: 22px; }
.s4p-audit #roi-results .kv.compact { margin-top: 18px; }

/* Mailkort sida vid sida med “Vad du vinner” (som i bilden) */
@media (min-width:900px){
  .s4p-audit .two-col {
    display:grid; grid-template-columns:1fr 1fr; gap:18px;
  }
}

/* === PATCH: Run-knapp centrerad + hero-inner bakgrund borttagen === */

/* Ta bort bakgrund ENDAST på detta element */
.s4p-audit .hero-inner{
  background: transparent !important;
  box-shadow: none !important;
}

/* Gör run-knappen "bulletproof" centrerad vertikalt & horisontellt */
.s4p-audit #runTest{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: 48px !important;
  padding: 0 24px !important;
  line-height: 1 !important;          /* undvik dubbel centrering via line-height */
  text-align: center !important;
  white-space: nowrap !important;

  /* behåll styling från tidigare (rund + fet) */
  border-radius: 9999px !important;
  font-weight: 700 !important;
}

/* Behåll state-färger du redan använder; dessa gör inget med centreringen */
.s4p-audit #runTest.state-desktop{ background: var(--orange) !important; color:#fff !important; }
.s4p-audit #runTest.state-mobile { background: var(--brand-yellow, #F5D90A) !important; color:#000 !important; }
.s4p-audit #runTest.state-done   { background: var(--brand-green,  #22C55E) !important; color:#fff !important; }
.s4p-audit #runTest.state-error  { background: #d32f2f !important; color:#fff !important; }
/* KPI-färger i Förklaring */
.s4p-audit .kv-colored li b{
  padding:2px 8px; border-radius:8px; font-variant-numeric: tabular-nums;
}
.s4p-audit .kv-colored li b.ok  { background:#ecfdf5; color:#065f46; }  /* grön */
.s4p-audit .kv-colored li b.mid { background:#fff7ed; color:#9a3412; }  /* orange */
.s4p-audit .kv-colored li b.bad { background:#fef2f2; color:#991b1b; }  /* röd */

/* Färg på KPI-värdena inne i Förklaring-kortet */
.kv-colored b.ok  { color:#16a34a; }  /* grön */
.kv-colored b.mid { color:#f59e0b; }  /* gul/orange */
.kv-colored b.bad { color:#ef4444; }  /* röd */

@media (max-width: 768px) {
  .s4p-audit .grid3 {
    grid-template-columns: 1fr !important;
    gap: 16px; /* luft mellan korten */
  }
}