/* ============================================================
   Svarsbot — landningssida

   Ett rutnät: fyra spår, --inslag som enda indrag, hårfina
   linjer i stället för fyllda kort. Paletten och skalan bor
   i base.css — här finns bara komposition.
   ============================================================ */

body { background: var(--bg); }

/* ------------------------------------------------------------
   Navigering
   ------------------------------------------------------------ */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid transparent;
  transition: background .35s var(--ease), border-color .35s var(--ease);
}
.nav.klistrad {
  background-color: var(--nav-bg);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--s5);
  height: 66px;
}

.brand { display: inline-flex; align-items: center; gap: 9px; flex: none; }

.brand-mark {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--brand-fill);
  color: var(--brand-ink);
}
.brand-mark svg { --ico: 14; width: calc(var(--ico) * 1px); height: calc(var(--ico) * 1px); }

.brand-namn {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.05em;
}

.nav-lankar {
  display: flex;
  gap: 2px;
  margin-inline: auto;
}
.nav-lankar a {
  position: relative;
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: var(--mono-xs);
  text-transform: uppercase;
  letter-spacing: -.02em;
  white-space: nowrap;
  color: var(--muted);
  transition: color .18s;
}
.nav-lankar a::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav-lankar a:hover { color: var(--text); }
.nav-lankar a:hover::after { transform: scaleX(1); }

/* Länkar som bara finns i hamburgermenyn */
.endast-meny { display: none; }

.nav-cta { display: flex; align-items: center; gap: var(--s1); flex: none; }
.nav-cta .btn-quiet {
  font-family: var(--mono);
  font-size: var(--mono-xs);
  text-transform: uppercase;
  letter-spacing: -.02em;
}

.nav-meny { display: none; width: 38px; height: 38px; place-items: center; }
.nav-meny span {
  display: block; width: 17px; height: 1px;
  background: var(--text);
  transition: transform .25s var(--ease), opacity .2s;
}
.nav-meny span + span { margin-top: 5px; }
.nav-meny[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.nav-meny[aria-expanded="true"] span:last-child  { transform: translateY(-3px) rotate(-45deg); }

/* ------------------------------------------------------------
   Hero — typografi först. Ingen split, ingen skugga.
   ------------------------------------------------------------ */

.hero { position: relative; padding: var(--s9) 0 0; }

.hero-inner { display: block; padding-bottom: var(--s9); }

.hero-pill {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 5px 13px 6px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  font-family: var(--mono);
  font-size: var(--mono-xs);
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--muted);
}

.hero-rubrik {
  margin-top: var(--s5);
  font-family: var(--display);
  font-size: clamp(46px, 8.6vw, 112px);
  font-weight: 400;
  letter-spacing: -.062em;
  line-height: .88;
}
.hero-rubrik .serif { display: block; color: var(--faint-deco); }

.hero-lead    { margin-top: var(--s5); max-width: var(--matt-lead); }
.hero-knappar { display: flex; flex-wrap: wrap; gap: 9px; margin-top: var(--s6); }

.hero-trust {
  display: flex; flex-wrap: wrap; gap: 10px var(--s5);
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--border);
}
.hero-trust li {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono);
  font-size: var(--mono-sm);
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--faint);
}
.hero-trust .ico { --ico: 12; color: var(--text); }

/* ------------------------------------------------------------
   Hero-widget — eget band under rubriken, förskjutet åt höger.
   Asymmetri i stället för spegling.
   ------------------------------------------------------------ */

.hero-widget {
  position: relative;
  max-width: 720px;
  margin: var(--s9) 0 0 auto;
  padding-top: var(--s7);
  border-top: 1px solid var(--border);
}

.hw-fonster {
  border-radius: var(--r);
  background: var(--bg-2);
  border: 1px solid var(--border);
  overflow: hidden;
}

.hw-topp {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
}
.hw-punkt { display: none; }   /* mac-prickarna bär ingen information */
.hw-titel {
  font-family: var(--mono);
  font-size: var(--mono-xs);
  letter-spacing: -.02em;
  color: var(--faint);
}
.hw-status { margin-left: auto; padding: 3px 9px 4px; }

.hw-kropp { padding: var(--s4); display: grid; gap: var(--s3); }

.hw-mail {
  padding: var(--s3) var(--s4);
  border-radius: var(--r-sm);
  background: var(--bg);
  border: 1px solid var(--border);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.hw-mail.in { opacity: 1; transform: none; }

.hw-mail-topp { display: flex; align-items: flex-start; gap: 11px; }

.hw-avatar {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--brand-fill);
  color: var(--brand-ink);
  font-family: var(--mono);
  font-size: var(--mono-xs);
}

.hw-fran { font-size: 13px; font-weight: 500; letter-spacing: -.01em; }
.hw-amne { font-size: 12px; color: var(--muted); margin-top: 1px; }
.hw-tid  {
  font-family: var(--mono);
  font-size: var(--mono-xs); color: var(--faint); flex: none;
  text-transform: uppercase; letter-spacing: -.02em;
}

.hw-utdrag {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--faint);
}

/* Pipeline — determinat förlopp, ingen obestämd snurr.
   Väntande steg är läsbara: opacitet bär inte längre tillståndet. */
.hw-pipeline { display: grid; gap: 1px; }

.hw-steg {
  display: flex; align-items: center; gap: 11px;
  padding: 6px var(--s2);
  border-radius: var(--r-sm);
  font-family: var(--mono);
  font-size: var(--mono-xs);
  text-transform: uppercase;
  letter-spacing: -.02em;
  opacity: 1;
  color: var(--faint);
  transition: color .3s, background .3s;
}
.hw-steg.aktiv { color: var(--text); background: var(--surface-2); }
.hw-steg.klar  { color: var(--muted); }

.hw-ring {
  width: 10px; height: 10px; flex: none;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-control);
  position: relative;
  overflow: hidden;
  transition: border-color .3s, background .3s;
}
.hw-steg.aktiv .hw-ring { border-color: var(--text); }
.hw-steg.aktiv .hw-ring::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--text);
  transform: scaleX(0);
  transform-origin: left;
  animation: fyll var(--steg-tid, 400ms) linear forwards;
}
@keyframes fyll { to { transform: scaleX(1); } }

.hw-steg.klar .hw-ring {
  border-color: var(--text);
  background: var(--text);
}

/* Resultat */
.hw-resultat {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.hw-resultat.in { opacity: 1; transform: none; }

.hw-brickor { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 11px; }

.hw-utkast {
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg);
  padding: var(--s3);
}
.hw-utkast-topp {
  display: flex; align-items: center; gap: var(--s2);
  font-family: var(--mono);
  font-size: var(--mono-xs);
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--text);
}
.hw-utkast-topp .ico { --ico: 12; }
.hw-klocka {
  margin-left: auto;
  font-family: var(--mono);
  font-size: var(--mono-xs);
  color: var(--faint);
}
.hw-skriv {
  margin-top: 9px;
  font-size: 12.5px;
  line-height: 1.62;
  color: var(--text);
  min-height: 5.2em;
}
.hw-skriv::after {
  content: "▍";
  color: var(--text);
  animation: blink 1s steps(2) infinite;
}
.hw-skriv.klar::after { display: none; }
@keyframes blink { 50% { opacity: 0; } }

.hw-fot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  margin-top: var(--s3);
  font-family: var(--mono);
  font-size: var(--mono-xs);
  color: var(--faint);
}
.hw-fot-txt { display: flex; align-items: center; gap: var(--s2); }
.hw-fot .ico { --ico: 11; }

/* Av-knapp för den oändliga uppspelningen (WCAG 2.2.2) */
.hw-paus {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 24px;
  padding: 4px 10px;
  border: 1px solid var(--border-control);
  border-radius: var(--r);
  font: inherit;
  color: var(--faint);
  transition: color .16s, border-color .16s;
}
.hw-paus:hover { color: var(--text); border-color: var(--text); }
.hw-paus::before {
  content: "";
  width: 7px; height: 8px;
  border-left: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.hw-paus[aria-pressed="true"]::before {
  border: 0;
  width: 0; height: 0;
  border-left: 7px solid currentColor;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
}

/* ------------------------------------------------------------
   Löpande band — får en etikett så att det betyder något
   ------------------------------------------------------------ */

.band {
  display: flex;
  align-items: center;
  gap: var(--s6);
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  position: relative;
  --band-fade: var(--bg);
}
.band::before,
.band::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 90px;
  z-index: 2;
  pointer-events: none;
}
.band::before { left: 0;  background: linear-gradient(90deg, var(--band-fade), transparent); }
.band::after  { right: 0; background: linear-gradient(270deg, var(--band-fade), transparent); }

.band-etikett {
  flex: none;
  position: relative;
  z-index: 3;
  /* Bandet är fullbredd men etiketten ska starta på samma vertikal
     som allt annat, alltså på wrappens vänsterkant. */
  padding-left: max(var(--sidpad), calc((100vw - var(--maxw)) / 2 + var(--sidpad)));
  font-family: var(--mono);
  font-size: var(--mono-xs);
  text-transform: uppercase;
  letter-spacing: -.03em;
  color: var(--faint);
}

/* flex: none är inte kosmetik: .band är display:flex, och utan den
   krymper spåret under sin max-content-bredd. @keyframes rulla flyttar
   -50% av den FAKTISKA bredden, så en krympt bredd lägger loopens
   skarv på fel ställe och bandet hoppar en gång per varv. */
.band-spar {
  display: flex;
  flex: none;
  width: max-content;
  animation: rulla 58s linear infinite;
}
.band:hover .band-spar,
.band:focus-within .band-spar,
.band.pausad .band-spar { animation-play-state: paused; }

/* Rörelse som pågår mer än fem sekunder måste gå att stoppa (WCAG 2.2.2).
   Hover räcker inte — den finns inte på pekskärm. */
.band-paus {
  flex: none;
  position: relative;
  z-index: 3;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 1px solid var(--border-control);
  border-radius: var(--r);
  color: var(--faint);
  transition: color .16s, border-color .16s;
}
.band-paus:hover { color: var(--text); border-color: var(--text); }
.band-paus::before {
  content: "";
  width: 6px; height: 7px;
  border-left: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.band.pausad .band-paus::before {
  border: 0;
  width: 0; height: 0;
  border-left: 7px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

.band-grupp {
  display: flex;
  align-items: center;
  gap: var(--s8);
  padding-right: var(--s8);
}
.band-grupp span {
  font-family: var(--mono);
  font-size: var(--mono-sm);
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--faint);
  white-space: nowrap;
}

@keyframes rulla {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ------------------------------------------------------------
   Sektioner — rytm efter tyngd, inte efter mall
   ------------------------------------------------------------ */

.sektion      { padding: var(--s9) 0; }
.sektion-tung { padding: var(--s11) 0; }   /* sidans bevis: demot och kalkylatorn */
.sektion-latt { padding: var(--s8) 0; }    /* stödmaterial */

/* Gråbandet får en början och ett slut: fast 128px ramp i båda ändar */
.sektion-band {
  background: linear-gradient(180deg,
    var(--bg)   0,
    var(--bg-3) var(--s10),
    var(--bg-3) calc(100% - var(--s10)),
    var(--bg)   100%);
  border-top:    1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
/* Sista grå sektionen tonar inte tillbaka — den matar in i det svarta */
#fragor.sektion-band {
  background: linear-gradient(180deg, var(--bg) 0, var(--bg-3) var(--s10), var(--bg-3) 100%);
  border-bottom: 0;
}

.sekt-topp   { max-width: 912px; margin-bottom: var(--s7); }
.sekt-rubrik {
  margin-top: var(--s4);
  font-family: var(--display);
  font-size: clamp(28px, 3.6vw, 46px);
  font-weight: 400;
  letter-spacing: -.048em;
  line-height: .98;
}
.sekt-rubrik .serif { display: block; color: var(--faint-deco); }
.sekt-lead { margin-top: var(--s5); max-width: var(--matt-lead); }
.dampad { color: var(--faint-deco); }

/* Tre huvudnummer i stället för åtta jämnstora */
#problem .sekt-rubrik,
#demo .sekt-rubrik,
#rakna .sekt-rubrik {
  font-size: clamp(36px, 6.2vw, 84px);
  letter-spacing: -.058em;
  line-height: .9;
  text-wrap: balance;
}
#problem .sekt-topp,
#demo .sekt-topp,
#rakna .sekt-topp {
  max-width: none;
  margin-bottom: var(--s8);
}

.fotnot {
  margin-top: var(--s6);
  max-width: var(--matt-lead);
  font-family: var(--mono);
  font-size: var(--mono-sm);
  color: var(--faint);
  line-height: 1.7;
}
.fotnot a { color: var(--text); border-bottom: 1px solid var(--border-strong); }

/* ------------------------------------------------------------
   RUTNÄTET — ett spårantal, ett cellspråk, en vänsterlinje.
   Allt på sidan startar på samma vertikal och kolumnlinjerna
   löper obrutna genom hela dokumentet.
   ------------------------------------------------------------ */

.statband, .tidslinje, .problemkort, .citat-rad,
.fgrid, .steg-rad, .prisfot {
  display: grid;
  grid-template-columns: var(--kol);
  gap: 0;
}

.statband {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.problemkort, .citat-rad, .fgrid, .steg-rad, .prisfot {
  border-top: 1px solid var(--border-strong);
}

/* Ett cellspråk: ingen fyllning, ingen radie, ingen skugga, ingen lyfthover */
.stat, .tl-punkt, .pkort, .citat, .steg, .fkort, .prisfot li {
  border-left: 1px solid var(--border);
  padding-inline: var(--inslag);
  background: none;
  border-radius: 0;
  transform: none;
}
.stat       { padding-block: var(--s6) var(--s7); }
.tl-punkt   { padding-block: var(--s5) var(--s6); }
.pkort      { padding-block: var(--s6) var(--s2); }
.citat      { padding-block: var(--s6) 0; }
.steg       { padding-block: var(--s6) var(--s7); }
.fkort      { padding-block: var(--s6) var(--s7); }
.prisfot li { padding-block: var(--s5); }

/* Tre poster i fyra spår: första cellen tar två, så linjerna landar
   på samma vertikaler som fyrkolumnsraderna. */
.pkort:first-child,
.citat:first-child,
.steg:first-child,
.fkort-bred { grid-column: span 2; }

.stat:first-child, .tl-punkt:first-child, .pkort:first-child,
.citat:first-child, .steg:first-child, .fkort:first-child,
.fkort:nth-child(4), .prisfot li:first-child {
  border-left: 0;
  padding-left: 0;
}
.fkort:nth-child(n+4) { border-top: 1px solid var(--border); }

/* ------------------------------------------------------------
   Sifferband
   ------------------------------------------------------------ */

.statband-fot {
  font-family: var(--mono);
  font-size: var(--mono-sm);
  line-height: 1.8;
  color: var(--faint);
  margin-top: var(--s4);
  max-width: 72ch;
}

.stat { display: grid; gap: 10px; align-content: start; }
.stat-tal {
  font-family: var(--display);
  font-size: clamp(34px, 3.4vw, 48px);
  font-weight: 400;
  letter-spacing: -.05em;
  line-height: .95;
  color: var(--text);
  font-style: normal;
}
.stat-txt {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
  max-width: 22ch;
}

/* ------------------------------------------------------------
   Tidslinje — sidans enda rörelse som bär innehåll
   ------------------------------------------------------------ */

.tidslinje { position: relative; margin-bottom: var(--s8); }
.tidslinje::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--border-strong);
}
.tl-punkt { position: relative; }
.tl-punkt::before {
  content: "";
  position: absolute;
  top: -3px; left: 0;
  width: 5px; height: 5px;
  background: var(--text);
}
.tl-punkt:not(:first-child)::before { left: -3px; }
.tl-forlorad::before { background: var(--danger); }

.tl-klocka {
  font-family: var(--mono);
  font-size: var(--mono-sm);
  text-transform: uppercase;
  color: var(--faint);
  letter-spacing: -.02em;
}
.tl-punkt h3 {
  font-family: var(--display);
  font-size: 21px;
  margin-top: 10px;
  font-weight: 400;
  letter-spacing: -.04em;
}
.tl-punkt p { font-size: 13px; color: var(--muted); margin-top: var(--s2); line-height: 1.5; max-width: 26ch; }
.tl-forlorad h3 { color: var(--danger); }

/* Linjen ritas medan man scrollar. Firefox får den statiska varianten. */
@supports (animation-timeline: view()) {
  .tidslinje { view-timeline: --tl block; }
  .tidslinje::before {
    transform: scaleX(0);
    transform-origin: left;
    animation: dra-linje linear both;
    animation-timeline: --tl;
    animation-range: entry 60% cover 55%;
  }
  @keyframes dra-linje { to { transform: scaleX(1); } }

  .tl-punkt::before {
    opacity: 0;
    animation: tand-punkt steps(1) both;
    animation-timeline: --tl;
  }
  .tl-punkt:nth-child(1)::before { animation-range: entry 65% cover 20%; }
  .tl-punkt:nth-child(2)::before { animation-range: entry 80% cover 30%; }
  .tl-punkt:nth-child(3)::before { animation-range: cover 12% cover 40%; }
  .tl-punkt:nth-child(4)::before { animation-range: cover 24% cover 52%; }
  @keyframes tand-punkt { to { opacity: 1; } }

  /* Fadet får inte tävla med scrolldraget kring samma position */
  .js-reveal .tidslinje.reveal { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------------
   Problemkort
   ------------------------------------------------------------ */

.pkort-tal {
  display: block;
  font-family: var(--display);
  font-size: clamp(48px, 5.4vw, 76px);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .9;
  font-style: normal;
  color: var(--text);
}
.pkort h3 {
  font-family: var(--sans);
  font-size: 13px;
  margin-top: var(--s3);
  font-weight: 500;
  letter-spacing: -.01em;
}
.pkort p { font-size: 13px; color: var(--muted); margin-top: 10px; line-height: 1.55; max-width: var(--matt-kort); }

/* ------------------------------------------------------------
   Steg
   ------------------------------------------------------------ */

.steg { position: relative; }
.steg-nr {
  position: absolute;
  top: var(--s6); right: var(--inslag);
  font-family: var(--mono);
  font-size: var(--mono-sm);
  color: var(--faint);
}
.steg-ikon {
  display: block;
  width: auto; height: auto;
  border: 0; border-radius: 0;
  color: var(--text);
  margin-bottom: var(--s5);
}
.steg-ikon svg { --ico: 20; width: 20px; height: 20px; }
.steg h3 {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -.04em;
}
.steg p { font-size: 13.5px; color: var(--muted); margin-top: var(--s3); line-height: 1.6; max-width: var(--matt-kort); }
.steg code {
  font-family: var(--mono);
  font-size: .8em;
  padding: 0 1px;
  background: none;
  border-radius: 0;
  border-bottom: 1px solid var(--border-strong);
  color: var(--text);
}
.steg-tid {
  display: inline-block;
  margin-top: var(--s5);
  font-family: var(--mono);
  font-size: var(--mono-sm);
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--muted);
  padding: 4px 11px 5px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
}

/* ------------------------------------------------------------
   Demo — ligger på sidans rutnät, inte i ett kort
   ------------------------------------------------------------ */

.demo { padding: 0; background: none; border: 0; }

.demo-topp {
  display: flex; align-items: center; gap: var(--s3);
  padding-bottom: var(--s5);
  margin-bottom: var(--s5);
  border-bottom: 1px solid var(--border);
}
.demo-flikar { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; }

.demo-flik {
  padding: var(--s2) 13px 9px;
  border-radius: var(--r);
  border: 1px solid var(--border-control);
  background: transparent;
  text-align: left;
  transition: border-color .18s, background .18s, color .18s;
}
.demo-flik:hover { border-color: var(--text); }
.demo-flik[aria-pressed="true"] {
  border-color: var(--text);
  background: var(--text);
  color: var(--bg);
}
.demo-flik b {
  display: block;
  font-family: var(--mono);
  font-size: var(--mono-sm);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -.02em;
}
.demo-flik span { display: block; font-size: 11.5px; color: var(--faint); margin-top: 2px; }
.demo-flik[aria-pressed="true"] b { color: var(--bg); }
.demo-flik[aria-pressed="true"] span { color: color-mix(in srgb, var(--bg) 62%, transparent); }

.demo-grid {
  display: grid;
  grid-template-columns: var(--kol);
  gap: 0;
}
.demo-in { grid-column: span 2; padding-right: var(--inslag); }
.demo-ut {
  grid-column: span 2;
  padding-left: var(--inslag);
  border-left: 1px solid var(--border);
}

/* base.css har textarea.field (0,1,1) — en ren klass här förlorar,
   så höjd och radavstånd måste sättas med minst samma specificitet. */
.demo-textarea {
  font-family: var(--mono);
  font-size: var(--mono-sm);
  background: var(--bg-2);
}
.field.demo-textarea { min-height: 320px; line-height: 1.7; }

.demo-verktyg { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s3); flex-wrap: wrap; }
.demo-hint {
  font-family: var(--mono);
  font-size: var(--mono-sm);
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--faint);
}

/* Pipeline i demot — okänd varaktighet, alltså svepning och inte falsk mätare */
.demo-pipeline {
  margin-top: var(--s4);
  display: grid;
  gap: 1px;
  padding: 10px;
  border-radius: var(--r);
  background: var(--bg-2);
  border: 1px solid var(--border);
}
.dp-steg {
  display: flex; align-items: center; gap: 11px;
  padding: 6px 7px;
  border-radius: var(--r-sm);
  font-family: var(--mono);
  font-size: var(--mono-xs);
  text-transform: uppercase;
  letter-spacing: -.02em;
  opacity: 1;
  color: var(--faint);
  transition: background .25s, color .25s;
}
.dp-steg.aktiv { color: var(--text); background: var(--surface-2); }
.dp-steg.klar  { color: var(--muted); }
.dp-steg small { margin-left: auto; font-family: var(--mono); font-size: var(--mono-xs); opacity: 1; color: var(--faint); }

.dp-steg .hw-ring { border-color: var(--border-control); }
.dp-steg.aktiv .hw-ring { border-color: var(--text); }
.dp-steg.aktiv .hw-ring::before {
  content: "";
  position: absolute; inset: 0;
  background-color: transparent;
  background-image: linear-gradient(90deg, transparent, var(--text), transparent);
  background-size: 60% 100%;
  background-repeat: no-repeat;
  animation: shimmer 1.1s linear infinite;
  transform: none;
}
.dp-steg.klar .hw-ring { border-color: var(--text); background: var(--text); }

/* Tomt läge */
/* Författarens display slår ut UA-stilens [hidden] — JS styr båda
   dessa enbart via hidden-attributet. */
.demo-tomt[hidden], .demo-pipeline[hidden], .hw-paus[hidden] { display: none; }

.demo-tomt {
  height: 100%;
  min-height: 420px;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  padding: var(--s7) var(--s6);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r);
  background: var(--surface);
}
.demo-tomt-ikon {
  width: auto; height: auto;
  border: 0; border-radius: 0;
  display: block;
  color: var(--faint);
  margin-bottom: var(--s5);
}
.demo-tomt-ikon svg { --ico: 20; width: 20px; height: 20px; }
.demo-tomt h3 { font-family: var(--display); font-size: 22px; font-weight: 400; letter-spacing: -.04em; }
.demo-tomt p { font-size: 13px; color: var(--muted); margin-top: 9px; max-width: 30ch; }

/* Resultat */
.dr-huvud { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s4); }
.dr-brickor { display: flex; flex-wrap: wrap; gap: 5px; }

.dr-konfidens { position: relative; width: auto; min-width: 62px; flex: none; text-align: center; }
.kring { width: 46px; height: 46px; margin-inline: auto; transform: rotate(-90deg); }
.kring circle { fill: none; stroke-width: 2; stroke-linecap: butt; }
.kring-bak { stroke: var(--border); }
.kring-fram {
  stroke: var(--text);
  stroke-dasharray: 119.4;
  stroke-dashoffset: 119.4;
  transition: stroke-dashoffset .9s var(--ease), stroke .4s;
}
.dr-konf-tal {
  position: absolute;
  top: 14px; left: 0; right: 0;
  font-family: var(--mono);
  font-size: 11px; font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.dr-konf-txt {
  display: block;
  font-family: var(--mono);
  font-size: var(--mono-xs);
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--faint);
  margin-top: 3px;
}

.dr-analys { display: grid; gap: 6px; margin-bottom: var(--s4); }

.dr-block {
  padding: 13px 14px;
  border-radius: var(--r);
  background: var(--bg-2);
  border: 1px solid var(--border);
}
.dr-block h4 {
  font-family: var(--mono);
  font-size: var(--mono-xs); font-weight: 400;
  letter-spacing: -.02em; text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 10px;
}
.dr-rad {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 12.5px;
  padding: 3px 0;
}
.dr-rad span:first-child { color: var(--muted); min-width: 116px; flex: none; }
.dr-rad span:last-child { color: var(--text); font-weight: 500; }

.dr-poster { display: grid; gap: 3px; }
.dr-post {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 12px;
  padding: 6px var(--s2);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.dr-post-antal {
  font-family: var(--mono);
  font-size: var(--mono-xs);
  color: var(--faint);
  min-width: 54px; flex: none;
}
.dr-post-namn { color: var(--muted); }
.dr-post-summa { margin-left: auto; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }

.dr-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 10px; padding-top: 11px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
}
.dr-total strong { font-family: var(--display); font-size: 22px; font-weight: 400; letter-spacing: -.04em; color: var(--text); }

.dr-fragor { display: grid; gap: 5px; }
.dr-fraga {
  display: flex; gap: var(--s2);
  font-size: 12.5px; color: var(--warn);
  line-height: 1.5;
}
.dr-fraga::before { content: "?"; font-weight: 600; flex: none; }

.dr-flagga {
  display: flex; gap: 9px;
  padding: 10px 13px;
  border-radius: var(--r);
  font-size: 12.5px;
  line-height: 1.55;
  background: var(--warn-soft);
  border: 1px solid var(--warn-line);
  color: var(--warn);
}

.dr-vaxel {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: space-between;
  margin-bottom: var(--s3);
}

.dr-forhandsvisning {
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: #ffffff;
  overflow: hidden;
  height: 520px;
  height: clamp(240px, 64svh, 520px);
}
#drRam { width: 100%; height: 100%; border: 0; background: #ffffff; }

.dr-pre {
  margin: 0;
  height: 100%;
  overflow: auto;
  padding: var(--s4);
  background: var(--bg-2);
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--mono-xs);
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
}

.dr-fot {
  margin-top: var(--s3);
  font-family: var(--mono);
  font-size: var(--mono-sm);
  color: var(--faint);
  line-height: 1.7;
  max-width: var(--matt-brod);
}

/* ------------------------------------------------------------
   Funktionsrutnät
   ------------------------------------------------------------ */

.fkort-ikon {
  display: block;
  width: auto; height: auto;
  border: 0; border-radius: 0;
  color: var(--text);
  margin-bottom: var(--s5);
}
.fkort-ikon svg { --ico: 20; width: 20px; height: 20px; }
.fkort h3 {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -.04em;
}
.fkort p { font-size: 13.5px; color: var(--muted); margin-top: 11px; line-height: 1.6; max-width: var(--matt-kort); }
.fkort-bred p { max-width: var(--matt-brod); }

/* ------------------------------------------------------------
   ROI
   ------------------------------------------------------------ */

.roi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: 0;
  overflow: hidden;
}
.roi-in { padding: var(--s7); display: grid; gap: var(--s5); align-content: start; }
.roi-falt { display: grid; gap: var(--s3); }
.roi-falt .label { margin-bottom: 0; }
/* Reglagets 44px träffyta får inte lägga sig över talet */
.roi-falt .row-between { position: relative; z-index: 1; }
.roi-varde {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
  white-space: nowrap;
}

.roi-antaganden {
  margin-top: var(--s1);
  border-top: 1px solid var(--border);
  padding-top: var(--s5);
}
.roi-antaganden summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: var(--mono-sm);
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--muted);
  list-style: none;
  display: flex; align-items: center; gap: var(--s2);
}
.roi-antaganden summary::-webkit-details-marker { display: none; }
.roi-antaganden summary::before {
  content: "+";
  width: 15px; height: 15px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  font-size: 11px; line-height: 1;
  flex: none;
}
.roi-antaganden[open] summary::before { content: "−"; }
.roi-antaganden ul { margin-top: var(--s3); display: grid; gap: 7px; }
.roi-antaganden li {
  font-size: 12.5px; color: var(--faint); line-height: 1.55;
  padding-left: var(--s3); position: relative;
}
.roi-antaganden li::before {
  content: "—"; position: absolute; left: 0; color: var(--faint); font-size: 9px; top: 5px;
}
.roi-antaganden p { font-size: 12.5px; color: var(--faint); margin-top: var(--s3); line-height: 1.55; }

.roi-ut {
  padding: var(--s7);
  display: grid;
  align-content: start;
  gap: var(--s5);
}
.roi-huvudtal { display: grid; gap: var(--s2); }
.roi-etikett {
  font-family: var(--mono);
  font-size: var(--mono-sm);
  letter-spacing: -.02em; text-transform: uppercase;
  color: var(--faint);
}
.roi-stor {
  font-family: var(--display);
  font-size: clamp(42px, 5.4vw, 68px);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .92;
  font-style: normal;
  color: var(--text);
}
.roi-stor.roi-negativ { color: var(--danger); }
.roi-under { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

.roi-uträkning {
  display: grid;
  gap: 1px;
  padding: var(--s4);
  border-radius: var(--r);
  border: 1px solid var(--border);
}
.roi-uträkning li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  padding: 6px 0;
  font-size: 12.5px;
  color: var(--muted);
}
.roi-uträkning b { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 500; white-space: nowrap; }
.roi-uträkning b.minus { color: var(--danger); }
.roi-uträkning .summa {
  margin-top: 6px; padding-top: 11px;
  border-top: 1px solid var(--border);
  font-weight: 500; color: var(--text);
}
.roi-uträkning .summa b { font-size: 15px; }

.roi-rutor { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); }
.roi-ruta { padding: var(--s4); background: var(--bg); }
.roi-ruta-tal {
  display: block;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -.045em;
}
.roi-ruta-txt {
  display: block;
  font-family: var(--mono);
  font-size: var(--mono-sm);
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--faint);
  margin-top: 6px;
  line-height: 1.5;
}
.roi-ruta-txt b { color: var(--muted); font-weight: 400; }

.roi-cta { justify-self: start; }

/* ------------------------------------------------------------
   Priser
   MEDVETET UNDANTAG: efter rutnätsomläggningen är priskorten
   sidans enda fyllda ytor. Det är också det enda man faktiskt
   väljer mellan — fyllningen bär valet. Städa inte bort den.
   ------------------------------------------------------------ */

.pris-vaxel { margin-top: var(--s6); }
.pris-rabatt { margin-left: 6px; font-size: var(--mono-xs); }

.prisgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
  align-items: start;
}

.plan {
  position: relative;
  padding: var(--s6) var(--inslag) var(--s6);
  border-radius: var(--r-lg);
  background: var(--bg-2);
  border: 1px solid var(--border);
  display: grid;
  gap: var(--s5);
  align-content: start;
}
.plan-popular { border-color: var(--text); }
.plan-flagga {
  position: absolute;
  top: -1px; right: -1px;
  padding: 5px var(--s3) 6px;
  border-radius: 0 var(--r-lg) 0 var(--r-lg);
  background: var(--text);
  color: var(--bg);
  font-family: var(--mono);
  font-size: var(--mono-xs);
  text-transform: uppercase;
  letter-spacing: -.02em;
}
.plan h3 {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -.045em;
}
.plan-for { font-size: 13px; color: var(--muted); margin-top: 9px; line-height: 1.5; max-width: var(--matt-kort); }

.plan-pris { display: flex; align-items: baseline; gap: 9px; }
.plan-tal {
  font-family: var(--display);
  font-size: 54px;
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .9;
}
.plan-enhet {
  font-family: var(--mono);
  font-size: var(--mono-sm);
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--muted);
  line-height: 1.5;
}
.plan-enhet small { font-size: var(--mono-xs); color: var(--faint); }

.plan-cta { width: 100%; }

.plan-punkter { display: grid; gap: 11px; }
.plan-punkter li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.plan-punkter .ico { --ico: 13; color: var(--text); margin-top: 3px; }
.plan-punkter strong { color: var(--text); font-weight: 500; }

/* ------------------------------------------------------------
   Planerat — funktioner som säljs men inte är byggda ännu.
   Märkningen är lågmäld men läsbar. Att sälja en riktning är
   hederligt så länge riktningen är utmärkt som riktning, och
   den som bokar ett möte ska veta vad som finns på dag ett.
   ------------------------------------------------------------ */

.planerad {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px 2px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm);
  font-family: var(--mono);
  font-size: var(--mono-xs);
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--faint);
  white-space: nowrap;
}
.ar-planerad { color: var(--faint); }
.ar-planerad .ico { opacity: .4; }
.band-grupp span.ar-planerad { opacity: .55; }

.enterprise {
  margin-top: var(--s3);
  margin-bottom: var(--s7);   /* två hårstreck 14px isär läser som ett fel */
  padding: var(--s6);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--s6); flex-wrap: wrap;
}
.enterprise h3 { font-family: var(--display); font-size: 26px; font-weight: 400; letter-spacing: -.045em; }
.enterprise p { font-size: 13px; color: var(--muted); margin-top: 10px; max-width: var(--matt-brod); line-height: 1.6; }

.prisfot li {
  display: flex; align-items: flex-start; gap: var(--s2);
  font-family: var(--mono);
  font-size: var(--mono-sm);
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--muted);
  line-height: 1.5;
}
.prisfot .ico { --ico: 13; color: var(--text); margin-top: 1px; }

/* ------------------------------------------------------------
   Citat
   ------------------------------------------------------------ */

.citat { display: grid; gap: var(--s5); align-content: space-between; }
.citat blockquote {
  font-family: var(--display);
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.28;
  letter-spacing: -.035em;
  font-weight: 400;
  color: var(--text);
}
.citat figcaption { display: grid; gap: 3px; }
.citat figcaption strong {
  font-family: var(--mono);
  font-size: var(--mono-sm);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -.02em;
}
.citat figcaption span { font-size: 12px; color: var(--faint); }

/* ------------------------------------------------------------
   FAQ — redaktionell lista på sidans vänsterlinje
   ------------------------------------------------------------ */

.faq { display: grid; border-top: 1px solid var(--border-strong); max-width: 912px; }

.faq details { border-bottom: 1px solid var(--border); }

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--s5) var(--s1);
  font-family: var(--display);
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 400;
  letter-spacing: -.04em;
  display: flex; align-items: center; gap: var(--s4);
  transition: color .2s;
}
.faq summary:hover { color: var(--muted); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico {
  --ico: 16;
  margin-left: auto;
  color: var(--faint);
  transition: transform .3s var(--ease);
}
.faq details[open] summary .ico { transform: rotate(180deg); color: var(--text); }
.faq p {
  padding: 0 var(--s1) var(--s5);
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
  max-width: var(--matt-brod);
}

/* ------------------------------------------------------------
   Avslutande CTA — nedgången i svart är en händelse
   ------------------------------------------------------------ */

.slutcta { position: relative; padding: var(--s11) 0; }
/* .slutcta.inverterad (0,2,0) slår .inverterad's background (0,1,0) */
/* Rampen måste vara kortare än sektionens minsta toppadding (--s8 = 64px
   i liggande läge), annars hamnar etikett och rubrik mitt i den grå tonen. */
.slutcta.inverterad {
  background: linear-gradient(180deg, var(--sida-band) 0, var(--sida-botten) var(--s7));
}

.slutcta .wrap { position: relative; }
.slutcta-rubrik {
  margin-top: var(--s5);
  font-family: var(--display);
  font-size: clamp(38px, 6.4vw, 92px);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .92;
}
.slutcta-rubrik .serif { display: block; color: var(--muted); }
.slutcta .lead { margin: var(--s5) auto 0; max-width: 46ch; }
.slutcta-knappar { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin-top: var(--s7); }
.slutcta-fot {
  margin-top: var(--s5);
  font-family: var(--mono);
  font-size: var(--mono-sm);
  color: var(--faint);
}

/* ------------------------------------------------------------
   Sidfot
   ------------------------------------------------------------ */

.fot { border-top: 1px solid var(--border); padding-top: var(--s8); }

.fot-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr);
  gap: var(--s7);
  padding-bottom: var(--s7);
}
.fot-brand p { font-size: 13px; color: var(--muted); margin-top: var(--s4); max-width: var(--matt-kort); line-height: 1.55; }
.fot-brand p.fot-demo {
  font-family: var(--mono);
  font-size: var(--mono-sm);
  color: var(--faint);
  margin-top: var(--s5);
  padding: var(--s3);
  border: 1px dashed var(--border-strong);
  line-height: 1.8;
  max-width: 46ch;
}
.fot-demo strong { color: var(--text); font-weight: 400; }

.fot-lankar { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.fot-lankar h4 {
  font-family: var(--mono);
  font-size: var(--mono-xs); font-weight: 400;
  letter-spacing: -.02em; text-transform: uppercase;
  color: var(--faint);
  margin-bottom: var(--s4);
}
.fot-lankar a {
  display: block;
  font-size: 13px;
  color: var(--muted);
  padding: 5px 0;
  transition: color .16s;
}
.fot-lankar a:hover { color: var(--text); }

.fot-botten {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding-block: var(--s5) var(--s6);
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: var(--mono-sm);
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--faint);
}

/* ------------------------------------------------------------
   Rörelse — sektionshuvudet komponerar sig internt
   ------------------------------------------------------------ */

.js-reveal .sekt-topp.reveal { opacity: 1; transform: none; transition: none; }
.js-reveal .sekt-topp.reveal > * {
  opacity: 0;
  transform: translateY(12px);
}
.js-reveal-pa .sekt-topp.reveal > * {
  transition: opacity .5s var(--ease) var(--d, 0ms), transform .6s var(--ease) var(--d, 0ms);
}
.js-reveal .sekt-topp.reveal.in > * { opacity: 1; transform: none; }
.sekt-topp.reveal > :nth-child(2) { --d: 80ms; }
.sekt-topp.reveal > :nth-child(3) { --d: 170ms; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .sekt-topp.reveal > * { opacity: 1 !important; transform: none !important; }
  .tidslinje::before { animation: none; transform: scaleX(1); }
  .tl-punkt::before  { animation: none; opacity: 1; }
}

/* ============================================================
   Responsivt
   ============================================================ */

@media (max-width: 1080px) {
  .hero-widget { max-width: none; margin-left: 0; }
  .demo-grid { grid-template-columns: 1fr; }
  .demo-in { grid-column: auto; padding-right: 0; }
  .demo-ut {
    grid-column: auto;
    padding-left: 0;
    border-left: 0;
    margin-top: var(--s6);
  }
  .field.demo-textarea { min-height: 220px; }
  .demo-tomt { min-height: 260px; }
  .roi { grid-template-columns: 1fr; }
  .roi-ut { border-top: 1px solid var(--border); }
}

/* Navigeringen kollapsar innan länkarna hinner bryta till två rader */
@media (max-width: 980px) {
  .nav-lankar { display: none; }
  .nav-meny { display: grid; }
  .nav-cta .btn-quiet { display: none; }

  .nav.oppen .nav-lankar {
    display: flex;
    position: absolute;
    top: 66px; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: var(--s2) var(--sidpad) var(--s5);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }
  .nav.oppen .nav-lankar a { padding: 13px 0; font-size: var(--mono-sm); border-bottom: 1px solid var(--border); }
  .nav.oppen .nav-lankar a::after { display: none; }
  .nav.oppen .endast-meny { display: block; }
  /* :first-of-type räknar elementtyp — alla syskon är <a>, så den
     matchade aldrig. Syskonkombinatorn träffar första kontolänken. */
  .nav.oppen a:not(.endast-meny) + .endast-meny {
    margin-top: 10px;
    padding-top: 15px;
    border-top: 1px solid var(--border-strong);
  }
}

@media (max-width: 900px) {
  .sektion      { padding: var(--s8) 0; }
  .sektion-tung { padding: var(--s9) 0; }
  .sektion-latt { padding: var(--s7) 0; }
  .slutcta      { padding: var(--s9) 0; }

  .sektion-band {
    background: linear-gradient(180deg,
      var(--bg) 0, var(--bg-3) var(--s9), var(--bg-3) calc(100% - var(--s9)), var(--bg) 100%);
  }
  #fragor.sektion-band {
    background: linear-gradient(180deg, var(--bg) 0, var(--bg-3) var(--s9), var(--bg-3) 100%);
  }

  .statband { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--border); }

  .tidslinje { grid-template-columns: 1fr 1fr; }
  .tl-punkt:nth-child(odd) { border-left: 0; padding-left: 0; }
  .tl-punkt:nth-child(odd)::before { left: 0; }
  .tl-punkt:nth-child(n+3) { border-top: 1px solid var(--border); padding-top: var(--s5); }

  /* Surfplattan får ett riktigt tvåkolumnsläge i stället för en meterlång remsa.
     Den breda cellen tar två spår och förskjuter pariteten: kolumn 1 är
     barn 1, 2, 4, 6 — alltså det första plus de jämna. */
  .fgrid { grid-template-columns: 1fr 1fr; }
  .fkort-bred { grid-column: span 2; }
  .fkort:first-child,
  .fkort:nth-child(even) { border-left: 0; padding-left: 0; }
  .fkort:nth-child(odd):not(:first-child) {
    border-left: 1px solid var(--border);
    padding-left: var(--inslag);
  }
  .fkort:nth-child(n+2) { border-top: 1px solid var(--border); }

  /* Tre poster: den första tar hela bredden, de två andra delar raden.
     Ingen föräldralös cell, och ingen 207px-spalt. */
  .problemkort, .citat-rad { grid-template-columns: 1fr 1fr; }
  .pkort:first-child, .citat:first-child { grid-column: span 2; }
  .pkort:nth-child(2), .citat:nth-child(2) { border-left: 0; padding-left: 0; }
  .pkort:nth-child(n+2), .citat:nth-child(n+2) { border-top: 1px solid var(--border); }
  /* Rad 2 får en överlinje — utan bottenluft läser den som en
     understrykning av föregående korts brödtext. */
  .pkort { padding-bottom: var(--s6); }
  .citat { padding-bottom: var(--s6); }

  .steg-rad, .prisgrid { grid-template-columns: 1fr; }
  .steg { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); }
  .steg:first-child { border-top: 0; grid-column: auto; }

  .prisfot { grid-template-columns: 1fr 1fr; }
  .prisfot li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .prisfot li:nth-child(n+3) { border-top: 1px solid var(--border); }

  .plan-popular { order: -1; }
  .fot-inner { grid-template-columns: 1fr; gap: var(--s6); }
}

/* Under 760px räcker inte två spår för den här texten — en kolumn.
   :first-child-reglerna ovan har högre specificitet än .pkort, så
   spannet måste nollställas med samma specificitet. Annars skapar
   `span 2` ett implicit andra spår i ett enkolumnsraster. */
@media (max-width: 760px) {
  .problemkort, .citat-rad { grid-template-columns: 1fr; }
  .pkort, .citat {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--border);
  }
  .pkort:first-child, .citat:first-child {
    grid-column: auto;
    border-top: 0;
  }
  .pkort:nth-child(2), .citat:nth-child(2) { border-left: 0; padding-left: 0; }
  .citat { padding-bottom: var(--s6); }
}

@media (max-width: 620px) {
  .hero { padding-top: var(--s7); }
  .hero-inner { padding-bottom: var(--s8); }
  .hero-widget { margin-top: var(--s8); padding-top: var(--s6); }
  .brytning { display: none; }
  .band::before, .band::after { width: 40px; }

  .statband { grid-template-columns: 1fr; }
  .stat { border-left: 0; padding-left: 0; }
  .stat:nth-child(n+2) { border-top: 1px solid var(--border); }

  .tidslinje { grid-template-columns: 1fr; }
  .tl-punkt {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--border);
    padding-top: var(--s5);
  }
  .tl-punkt::before, .tl-punkt:not(:first-child)::before { left: 0; }
  .tl-punkt:first-child { border-top: 0; }

  .fgrid, .prisfot { grid-template-columns: 1fr; }
  .fkort, .prisfot li { border-left: 0; padding-left: 0; }
  /* Måste matcha specificiteten i 900px-blocket, annars överlever
     vänsterlinjen ner i enkolumnsläget. */
  .fkort:nth-child(odd):not(:first-child) { border-left: 0; padding-left: 0; }
  .fkort-bred { grid-column: auto; }
  .prisfot li:nth-child(n+2) { border-top: 1px solid var(--border); }

  .roi-rutor { grid-template-columns: 1fr; }
  .roi-in, .roi-ut { padding: var(--s5) var(--inslag) var(--s6); }
  .dr-huvud { flex-direction: column; align-items: flex-start; }
  .hero-knappar .btn, .slutcta-knappar .btn { width: 100%; }
  .fot-lankar { grid-template-columns: 1fr 1fr; }
}

/* Tummen — 44px träffytor utan att desktop ändras en pixel */
@media (pointer: coarse) and (hover: none) {
  .nav-meny { width: 44px; height: 44px; margin-right: -6px; }
  .fot-lankar a { padding: 11px 0; }
  .nav-lankar a { padding: 12px; }
  .demo-flik { padding: 11px 14px 12px; }
}

/* Liggande telefon — fyller idag skärmen med luft */
@media (orientation: landscape) and (max-height: 560px) and (pointer: coarse) {
  .sektion      { padding: var(--s7) 0; }
  .sektion-tung { padding: var(--s8) 0; }
  .sektion-latt { padding: var(--s6) 0; }
  .hero         { padding-top: var(--s6); }
  .hero-inner   { padding-bottom: var(--s7); }
  .hero-widget  { margin-top: var(--s7); }
  .slutcta      { padding: var(--s8) 0; }
  .sekt-topp    { margin-bottom: var(--s7); }
  .dr-forhandsvisning { height: clamp(200px, 58svh, 400px); }
}