/* ==========================================================================
   Skyflow – webbplats
   Ljus företagssajt. Petrolgrönt som enda profilfärg, kalla neutraler,
   och färgen i övrigt reserverad för produktvyerna där den betyder något.
   ========================================================================== */

/* --- Tokens: ljust tema, komplett i bara :root -------------------------- */
:root {
  --ground:      #F4F6F7;
  --ground-2:    #EAEEEF;
  --surface:     #FFFFFF;
  --surface-2:   #F0F3F4;
  --line:        #DCE3E4;
  --line-soft:   #E8EDEE;
  --ink:         #0F2220;
  --ink-2:       #354846;
  --ink-muted:   #5B6C6A;
  --brand:       #0E5350;
  --brand-2:     #0A403E;
  --brand-ink:   #FFFFFF;
  --brand-soft:  #E3EFED;
  --brand-line:  #B9D4D0;
  --ok:          #2B7355;
  --ok-soft:     #E2F1EA;
  --warn:        #8A5D15;
  --warn-soft:   #F8EEDC;
  --crit:        #B23A2E;
  --crit-soft:   #FAE7E4;
  --shadow-sm:   0 1px 2px rgba(15, 34, 32, .07);
  --shadow-md:   0 4px 14px -4px rgba(15, 34, 32, .12);
  --shadow-lg:   0 28px 60px -28px rgba(15, 34, 32, .32), 0 4px 14px -6px rgba(15, 34, 32, .1);
  --graph-node:  #0E5350;
  --graph-link:  #B9D4D0;

  --font-display: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, Consolas, monospace;

  /* Typskala. Rubrikerna skalar med vyporten, löptext och gränssnitt går i
     fasta steg. Sätt aldrig en font-size i px direkt i en regel — värdena
     drev isär till 28 olika storlekar en gång, och den drift som inte syns
     i en enskild regel är precis den som gör helheten spretig. */
  --display-hero: clamp(38px, 5.2vw, 60px);
  --display-page: clamp(31px, 3.9vw, 44px);
  --display-sec:  clamp(28px, 3.3vw, 39px);
  --display-cta:  clamp(26px, 3vw, 35px);
  --display-sub:  clamp(24px, 2.6vw, 31px);

  --text-3xs:  11.5px;
  --text-2xs:  12.5px;
  --text-xs:   13.5px;
  --text-sm:   14.5px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  22px;
  --text-3xl:  25px;
  --text-4xl:  30px;

  /* Radavstånd. Samma sak här: 1.5, 1.55, 1.6, 1.62 och 1.65 gjorde alla
     samma jobb. Skillnaden som betyder något är att läsa mot att skumma. */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;

  --measure: 1180px;
  --radius: 12px;
  --radius-sm: 8px;
}

/* Sajten är medvetet enbart ljus. Alla färger sätts explicit ovan, så sidan
   håller sig oavsett vilket tema besökarens klient kör. */

/* --- Grund -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.022em;
  text-wrap: balance;
  margin: 0;
  line-height: var(--leading-tight);
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: 24px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--surface); color: var(--ink);
  padding: 10px 16px; z-index: 100;
}
.skip:focus { left: 0; }

/* hidden-attributet måste vinna över komponenternas display-regler, annars
   döljer appfiltret och sökningen ingenting. */
[hidden] { display: none !important; }

/* --- Typografi ---------------------------------------------------------- */
.eyebrow {
  display: block;
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--brand);
}

.lede {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--ink-2);
  max-width: 60ch;
}

/* --- Topbar ------------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.topbar-in { display: flex; align-items: center; gap: 32px; height: 70px; position: relative; }

.brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand-mark { width: 28px; height: 28px; display: block; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 800; font-size: var(--text-xl); letter-spacing: -.03em;
}

.nav { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.nav a {
  padding: 9px 13px; border-radius: var(--radius-sm);
  font-size: var(--text-base); font-weight: 500; color: var(--ink-2);
  transition: color .15s, background .15s;
}
.nav a:hover { color: var(--ink); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--brand); }
.nav .btn { margin-left: 10px; }
.nav a.btn-primary { color: var(--brand-ink); }
.nav a.btn-primary:hover { background: var(--brand-2); color: var(--brand-ink); }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: var(--text-base); font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn-primary {
  background: var(--brand); color: var(--brand-ink);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--brand-2); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: var(--surface); }
.btn-ghost:hover { border-color: var(--brand-line); color: var(--brand); }
.btn-text { padding: 0; color: var(--brand); font-weight: 600; background: none; }
.btn svg, .btn-text svg { width: 18px; height: 18px; flex: 0 0 auto; }
.btn-text:hover { color: var(--brand-2); }
.btn-sm { padding: 9px 15px; font-size: var(--text-sm); }

.nav-toggle { display: none; }

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 500px at 86% -6%, var(--brand-soft), transparent 62%),
    linear-gradient(180deg, var(--surface), var(--ground) 76%);
  border-bottom: 1px solid var(--line-soft);
}
.hero-in {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 56px; align-items: center;
  padding-block: 74px 86px;
}
.hero h1 {
  font-size: var(--display-hero);
  font-weight: 800;
  letter-spacing: -.035em;
  margin-block: 16px 20px;
}
.hero h1 em { font-style: normal; color: var(--brand); }
.hero .lede { font-size: var(--text-lg); max-width: 52ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-note { margin-top: 18px; font-size: var(--text-sm); color: var(--ink-muted); }

.hero-stage { position: relative; }
.hero-stage .shot { box-shadow: var(--shadow-lg); }


/* --- Produktvyer (skärmbilder byggda i markup) -------------------------- */
.shot {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.shot-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-soft);
}
.shot-app {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700;
}
.shot-find {
  display: flex; align-items: center; gap: 8px;
  flex: 1; max-width: 330px;
  padding: 6px 12px; border-radius: 100px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: var(--text-2xs); color: var(--ink-muted);
}
.shot-find svg { width: 14px; height: 14px; flex: 0 0 auto; }
.shot-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: 0 0 auto; }
.dot-alert { position: relative; color: var(--ink-muted); display: grid; place-items: center; }
.dot-alert svg { width: 17px; height: 17px; }
.dot-alert::after {
  content: ""; position: absolute; top: -1px; right: -1px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--crit); border: 1.5px solid var(--surface-2);
}
.shot-dots { display: flex; gap: 5px; }
.shot-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); display: block; }
.shot-title {
  font-size: var(--text-2xs); font-weight: 600; color: var(--ink-muted);
  letter-spacing: .01em;
}
.shot-scroll { overflow-x: auto; scrollbar-width: none; }
.shot-scroll::-webkit-scrollbar { display: none; }

/* Ärendevy */

.app-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 16px; border-bottom: 1px solid var(--line-soft);
}
.app-head b { font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; }
.app-head .spacer { flex: 1; }
.tag {
  font-size: var(--text-3xs); font-weight: 600; padding: 3px 9px;
  border-radius: 100px; border: 1px solid var(--line); color: var(--ink-muted);
  white-space: nowrap;
}
.tag-on { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); }


.pill {
  display: inline-block; font-size: var(--text-3xs); font-weight: 600;
  padding: 2px 9px; border-radius: 100px; white-space: nowrap;
}
.pill-crit { background: var(--crit-soft); color: var(--crit); }
.pill-warn { background: var(--warn-soft); color: var(--warn); }
.pill-ok   { background: var(--ok-soft); color: var(--ok); }
.pill-flat { background: var(--surface-2); color: var(--ink-muted); }

.who {
  width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand);
  display: grid; place-items: center;
  font-size: var(--text-3xs); font-weight: 700; letter-spacing: .02em;
}

/* Dashboardvy */
.tiles {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line-soft);
}
.tile { padding: 15px 16px; border-left: 1px solid var(--line-soft); }
.tile:first-child { border-left: 0; }
.tile-l { font-size: var(--text-3xs); color: var(--ink-muted); font-weight: 500; }
.tile-v {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-3xl); letter-spacing: -.03em; line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums; margin-top: 3px;
}
.tile-d { font-size: var(--text-3xs); font-weight: 600; margin-top: 3px; }
.d-ok { color: var(--ok); }
.d-warn { color: var(--warn); }
.d-crit { color: var(--crit); }

.bars { padding: 16px; display: grid; gap: 11px; min-width: 420px; }
/* En ensam stapel i en turvy behöver inte dashboardens minsta bredd — den är
   satt för fem kundnamn bredvid varandra, inte för etiketten "/data". Utan
   undantaget trycker stapeln ut vyn förbi skärmkanten på en telefon. */
.bars-one { min-width: 0; }
.bars-one .bar-row { grid-template-columns: 58px minmax(0, 1fr) 30px; }
.bar-row { display: grid; grid-template-columns: 148px minmax(0, 1fr) 44px; gap: 12px; align-items: center; font-size: var(--text-2xs); }
.bar-row span { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Staplarna är SVG med bredden som attribut, så mallarna klarar sig utan
   style-attribut och CSP:n utan 'unsafe-inline'. */
.bar-track { display: block; width: 100%; height: 8px; border-radius: 100px; background: var(--surface-2); }
.bar-fill { fill: var(--brand); }
.bar-fill.w { fill: var(--warn); }
.bar-fill.c { fill: var(--crit); }
.bar-row b { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); }

/* Relationsvy. Texten och färgerna sitter i klasser i stället för attribut:
   presentationsattribut med var() är inte lika pålitliga, och en SVG med
   tolv font-attribut per rad är inget att underhålla. */
/* Prickrastret ligger i panelen och inte i SVG:n, så det fyller ytan även
   när ritningen slutat växa vid sitt maxmått. */
.graph-shot {
  padding: 18px 16px;
  background-image: radial-gradient(var(--line) 1px, transparent 1px);
  background-size: 19px 19px; background-position: 9px 9px;
}
/* Taket är viktigt: en SVG skalar all sin text med bredden, till skillnad
   från de andra vyerna där texten ligger kvar på sin storlek. Utan max-width
   blir etiketterna dubbelt så stora som i stapelvyn så fort plattan går om
   en spalt, och vyerna ser ut att komma från olika produkter. */
.graph-shot svg {
  display: block; width: 100%; max-width: 470px; height: auto;
  margin-inline: auto;
}
.graph-shot .g-link { fill: none; stroke: var(--graph-link); stroke-width: 1.5; }
.graph-shot .g-halo { fill: var(--brand-soft); opacity: .45; }
.graph-shot .g-hub { fill: var(--brand-soft); stroke: var(--graph-node); stroke-width: 1.6; }
.graph-shot .g-hub-name {
  font-family: var(--font-display); font-size: var(--text-xl);
  font-weight: 800; letter-spacing: -.02em; fill: var(--brand);
}
.graph-shot .g-hub-sub {
  font-family: var(--font-body); font-size: var(--text-3xs); fill: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.graph-shot .g-chip { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.graph-shot .g-badge { fill: var(--brand-soft); }
.graph-shot .g-ico { color: var(--brand); }
.graph-shot .g-name {
  font-family: var(--font-body); font-size: var(--text-xs);
  font-weight: 600; fill: var(--ink);
}
.graph-shot .g-meta {
  font-family: var(--font-body); font-size: var(--text-3xs);
  fill: var(--ink-muted); font-variant-numeric: tabular-nums;
}

/* På smal skärm krymper hela ritytan, och då blir siffrorna till höger
   oläsliga långt innan namnen gör det. Bättre att ta bort dem och låta
   namnen växa än att visa två rader text som ingen kan läsa. */
@media (max-width: 520px) {
  .graph-shot .g-meta { display: none; }
  .graph-shot .g-name { font-size: 16px; }
  .graph-shot .g-hub-name { font-size: 24px; }
  .graph-shot .g-hub-sub { font-size: 14px; }
}

/* --- Integrationsremsa -------------------------------------------------- */
.strip { background: transparent; }
.strip-in { padding-block: 26px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.strip-l {
  font-size: var(--text-2xs); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-muted); flex: 0 0 auto;
}
.strip-items { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.strip-items span { font-size: var(--text-base); font-weight: 600; color: var(--ink-2); }

/* --- Sektioner ---------------------------------------------------------- */
.sec { padding-block: 96px; }
.sec-tight-top { padding-top: 30px; }
.sec-alt { background: var(--surface); border-block: 1px solid var(--line-soft); }
/* 60 % av containern, inte 60ch. ch är bredden på siffran 0 och gav bara
   576 px av 1132 — drygt halva ytan. Procent följer containern i stället. */
.sec-head { max-width: 60%; margin-bottom: 46px; }
.sec-head h2 { font-size: var(--display-sec); margin-block: 14px 14px; }
/* .lede bär en egen 60ch (648 px) som annars kapar ingressen innanför de
   60 %. Heroernas .lede har egna spärrar och rörs inte. */
.sec-head .lede { max-width: none; }
/* På smal skärm vore 60 % en pelare på ett par hundra pixlar. */
@media (max-width: 760px) {
  .sec-head { max-width: none; }
}
.sec-head.mid { margin-inline: auto; text-align: center; }
.sec-head.mid .lede { margin-inline: auto; }

/* --- Funktionsrader (text + produktvy) ---------------------------------- */
.feature {
  display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: 60px; align-items: center;
}
.feature + .feature { margin-top: 96px; }
.feature.flip .feature-text { order: 2; }
.feature h2, .feature h3 { font-size: var(--display-sub); margin-block: 14px 16px; }
.feature p { font-size: var(--text-base); color: var(--ink-2); line-height: var(--leading-relaxed); }
.ticks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 11px; }
.ticks li {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 11px;
  font-size: var(--text-base); color: var(--ink-2); align-items: start;
}
.ticks svg { width: 20px; height: 20px; color: var(--brand); margin-top: 1px; }
.feature .btn-text { margin-top: 24px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }

/* --- Områdeskort -------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
a.card { position: relative; }
a.card::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow .18s;
}
a.card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
a.card:hover::after { box-shadow: inset 0 0 0 1.5px var(--brand-line); }
a.card:hover .card-ico { background: var(--brand); color: var(--brand-ink); }
.card-ico { transition: background .18s, color .18s; }
.card-ico {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--brand-soft); color: var(--brand);
  display: grid; place-items: center; margin-bottom: 2px;
}
.card-ico svg { width: 21px; height: 21px; }
.card h2, .card h3 { font-size: var(--text-lg); }
.card p { font-size: var(--text-sm); color: var(--ink-muted); line-height: var(--leading-relaxed); }
.card-apps { font-size: var(--text-xs); color: var(--ink-2); margin-top: auto; padding-top: 6px; }
.card-more { font-size: var(--text-sm); font-weight: 600; color: var(--brand); display: flex; align-items: center; gap: 6px; }
.card-more svg { width: 16px; height: 16px; flex: 0 0 auto; }

.sec-alt .card { background: var(--ground); }

/* --- Paket -------------------------------------------------------------- */
.packs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.pack {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 32px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: var(--shadow-sm);
}
.sec-alt .pack { background: var(--ground); border-color: var(--line); }
.pack h3 { font-size: var(--text-xl); line-height: var(--leading-snug); }
.pack p { font-size: var(--text-base); color: var(--ink-2); }
.pack-apps { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 4px; }
/* Ett udda sista paket får hela bredden i stället för att stå ensamt. */
.pack:last-child:nth-child(odd) { grid-column: 1 / -1; }

.chip {
  display: inline-flex; align-items: center;
  font-size: var(--text-xs); font-weight: 500;
  padding: 5px 11px; border-radius: 100px;
  border: 1px solid var(--line); color: var(--ink-2);
  background: var(--surface);
}
.sec-alt .chip { background: var(--surface); }
a.chip:hover { border-color: var(--brand-line); color: var(--brand); }

/* --- Katalog ------------------------------------------------------------ */
/* Enkelt sidhuvud. Listsidorna har lämnat det för .list-hero, men 404-sidan
   och integritetspolicyn använder det fortfarande. */
.page-head { padding-block: 60px 36px; }
.page-head h1 { font-size: var(--display-page); margin-block: 14px 16px; }

.filters {
  display: flex; flex-wrap: wrap; gap: 9px; align-items: center;
  padding-block: 20px; border-block: 1px solid var(--line-soft);
  position: sticky; top: 70px; z-index: 20;
  background: color-mix(in srgb, var(--ground) 93%, transparent);
  backdrop-filter: blur(12px);
}
.filter-btn {
  border: 1px solid var(--line); background: var(--surface);
  border-radius: 100px; padding: 7px 15px; font-size: var(--text-sm); font-weight: 500;
  cursor: pointer; color: var(--ink-2);
  transition: background .15s, border-color .15s, color .15s;
}
.filter-btn:hover { border-color: var(--brand-line); color: var(--brand); }
.filter-btn[aria-pressed="true"] {
  background: var(--brand); border-color: var(--brand); color: var(--brand-ink); font-weight: 600;
}

.search { margin-left: auto; position: relative; display: flex; align-items: center; }
.search input {
  font: inherit; font-size: var(--text-base); padding: 9px 14px 9px 36px; width: 250px;
  border-radius: 100px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
}
.search input::placeholder { color: var(--ink-muted); }
.search svg {
  position: absolute; left: 13px; width: 16px; height: 16px;
  color: var(--ink-muted); pointer-events: none;
}
.count-line { font-size: var(--text-xs); color: var(--ink-muted); padding-block: 22px 14px; }

.app-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  padding-bottom: 80px;
}
.app-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.app-card:hover { border-color: var(--brand-line); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.app-card .card-ico { width: 34px; height: 34px; border-radius: 9px; margin-bottom: 4px; }
.app-card .card-ico svg { width: 18px; height: 18px; }
.app-card h2, .app-card h3 { font-size: var(--text-lg); }
.app-card .area-of { font-size: var(--text-2xs); color: var(--ink-muted); font-weight: 500; }
.app-card p { font-size: var(--text-sm); color: var(--ink-2); line-height: var(--leading-relaxed); }
.app-card .card-more { margin-top: auto; padding-top: 8px; font-size: var(--text-xs); }
.empty { padding: 60px 4px; color: var(--ink-muted); font-size: var(--text-base); }

/* --- Appsida ------------------------------------------------------------ */
.detail-head { padding-block: 44px 34px; }
.back {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 22px;
  font-size: var(--text-sm); font-weight: 600; color: var(--brand);
}
.detail-top { display: flex; align-items: center; gap: 16px; }
.detail-top .card-ico { width: 48px; height: 48px; border-radius: 12px; margin: 0; flex: 0 0 auto; }
.detail-top .card-ico svg { width: 25px; height: 25px; }
.detail-head h1 { font-size: var(--display-page); }
.detail-head .lede { margin-top: 18px; }

.detail-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 310px;
  gap: 56px; padding-block: 12px 80px; align-items: start;
}
.detail-block + .detail-block { margin-top: 42px; }
.detail-block h2 { font-size: var(--text-2xl); margin-bottom: 20px; }

.feat-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.feat-list li {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px;
  font-size: var(--text-base); color: var(--ink-2); line-height: var(--leading-relaxed); align-items: start;
}
.feat-list svg { width: 20px; height: 20px; color: var(--brand); margin-top: 1px; }


.rail { position: sticky; top: 100px; display: grid; gap: 14px; }
.rail-block {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 22px;
}
.rail-block h3 {
  font-size: var(--text-2xs); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: 13px;
}
/* Upplysning om kostnad som annars överraskar: markerad, men inte som ett larm. */
.rail-note { background: var(--warn-soft); border-color: var(--warn); }
.rail-note h3 { color: var(--warn); }
.rail-block p { font-size: var(--text-sm); color: var(--ink-2); }
.rail-list { display: flex; flex-wrap: wrap; gap: 7px; }
.rail-block .btn { margin-top: 14px; }

.related { padding-block: 40px 80px; border-top: 1px solid var(--line-soft); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }

/* --- Roller ------------------------------------------------------------- */
.roles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.role {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.role h2 { font-size: var(--text-xl); }
.role p { font-size: var(--text-base); color: var(--ink-2); }

.steps { display: grid; gap: 0; border-top: 1px solid var(--line); }
.step {
  display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 22px;
  padding: 17px 4px; border-bottom: 1px solid var(--line-soft);
  font-size: var(--text-base);
}
.step b { font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; }
.step span { color: var(--ink-2); }

/* --- Kontakt ------------------------------------------------------------ */
.contact-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 56px; padding-block: 20px 90px; align-items: start;
}
.form {
  display: grid; gap: 18px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-sm);
}
.field { display: grid; gap: 7px; }
.field label { font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); }
.field input, .field select, .field textarea {
  font: inherit; font-size: var(--text-base); padding: 12px 14px; width: 100%;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--brand); outline: none;
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.field textarea { min-height: 120px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-note { font-size: var(--text-xs); color: var(--ink-muted); }
.form-done {
  border: 1px solid var(--brand-line); background: var(--brand-soft);
  border-radius: var(--radius); padding: 20px 22px; font-size: var(--text-base); color: var(--brand-2);
}

.contact-side { display: grid; gap: 16px; }
.contact-side .card h2 { font-size: var(--text-lg); }
.contact-side .card p { font-size: var(--text-sm); color: var(--ink-2); }

/* --- CTA ---------------------------------------------------------------- */
.cta { background: var(--brand); color: var(--brand-ink); padding-block: 66px; }
.cta-in { display: flex; gap: 40px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cta h2 { font-size: var(--display-cta); max-width: 20ch; color: var(--brand-ink); }
.cta p { font-size: var(--text-base); max-width: 46ch; margin-top: 12px; opacity: .82; }
.cta .btn-primary { background: var(--surface); color: var(--brand); }
.cta .btn-primary:hover { background: var(--brand-soft); }
.cta .btn-ghost { background: transparent; border-color: color-mix(in srgb, var(--brand-ink) 40%, transparent); color: var(--brand-ink); }
.cta .btn-ghost:hover { background: color-mix(in srgb, var(--brand-ink) 12%, transparent); border-color: var(--brand-ink); color: var(--brand-ink); }
.cta .hero-actions { margin-top: 0; }

/* --- Om Skyflow ---------------------------------------------------------- */
.about-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.about-fact {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 24px;
}
.about-fact b {
  display: block; font-family: var(--font-display); font-size: var(--text-base); font-weight: 700;
  letter-spacing: -.015em; margin-bottom: 6px;
}
.about-fact span { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--ink-2); }
.about .btn-text { margin-top: 26px; display: inline-flex; align-items: center; gap: 8px; }

/* --- Footer ------------------------------------------------------------- */
.foot { background: var(--surface); border-top: 1px solid var(--line-soft); padding-block: 52px 34px; }
.foot-in { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 36px; }
.foot h4 {
  font-size: var(--text-2xs); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: 14px;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot li a { font-size: var(--text-sm); color: var(--ink-2); }
.foot li a:hover { color: var(--brand); }
.foot-blurb { font-size: var(--text-sm); color: var(--ink-muted); max-width: 34ch; margin-top: 14px; }
.foot-base {
  margin-top: 42px; padding-top: 22px; border-top: 1px solid var(--line-soft);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: var(--text-xs); color: var(--ink-muted);
}
.foot-base a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.foot-base a:hover { color: var(--brand); }

/* --- Rörelse ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* --- Responsivt --------------------------------------------------------- */
/* Kolumnerna sätts som minmax(0, 1fr), inte 1fr. Ett rent 1fr har min-content
   som minsta bredd, så en produktvy med fast minsta bredd hade tvingat hela
   sidan bredare än skärmen på mobil. */
@media (max-width: 1020px) {
  .hero-in { grid-template-columns: minmax(0, 1fr); gap: 44px; padding-block: 56px 64px; }
  .feature, .feature.flip { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .feature.flip .feature-text { order: 0; }
  .feature + .feature { margin-top: 64px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .rail { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .foot-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related-grid { grid-template-columns: minmax(0, 1fr); }
  .about-facts { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .nav { display: none; }
  /* Menyn läggs kant i kant med wrap-elementets padding-box, alltså hela
     skärmbredden. Negativa värden hade stuckit ut utanför skärmen. */
  .nav-open .nav {
    display: grid; position: absolute; top: 70px; left: 0; right: 0;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 12px 24px 18px; gap: 2px; box-shadow: var(--shadow-md);
  }
  .nav .btn { margin-left: 0; margin-top: 6px; justify-content: center; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; width: 42px; height: 38px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); cursor: pointer;
  }
  .sec { padding-block: 58px; }
  .cards, .app-grid, .packs, .roles, .foot-in, .field-row { grid-template-columns: minmax(0, 1fr); }
  .rail { grid-template-columns: minmax(0, 1fr); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile:nth-child(3) { border-left: 0; }
  .tile:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
  .filters { position: static; }
  .search { margin-left: 0; width: 100%; }
  .search input { width: 100%; }
  .step { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .form { padding: 22px; }
  .detail-top { gap: 13px; }
  .hero-in { padding-block: 48px 56px; }
  .shot-find, .shot-right { display: none; }
}


/* --- Startvyn i heron --------------------------------------------------- */
.launch { padding: 20px; display: grid; gap: 18px; }

.launch-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.launch-head b {
  display: block; font-family: var(--font-display);
  font-size: var(--text-base); font-weight: 700; letter-spacing: -.02em;
}
.launch-head > div span { font-size: var(--text-2xs); color: var(--ink-muted); }

.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.app-tile {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 13px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface);
}
.app-tile .card-ico { width: 30px; height: 30px; border-radius: 8px; margin: 0; flex: 0 0 auto; }
.app-tile .card-ico svg { width: 16px; height: 16px; }
.app-tile b {
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.badge-n {
  position: absolute; top: 7px; right: 9px;
  min-width: 17px; height: 17px; padding: 0 5px;
  border-radius: 100px; background: var(--brand); color: var(--brand-ink);
  /* Radhöjden är brickans höjd, inte typografi: den centrerar siffran. */
  font-style: normal; font-size: var(--text-3xs); font-weight: 700; line-height: 17px;
  text-align: center; font-variant-numeric: tabular-nums;
}
.app-tile.more {
  justify-content: center; gap: 7px;
  border-style: dashed; background: transparent;
  color: var(--brand); font-family: var(--font-display);
  font-size: var(--text-xs); font-weight: 700;
}
.app-tile.more svg { width: 15px; height: 15px; }

.todo { border-top: 1px solid var(--line-soft); padding-top: 16px; display: grid; gap: 11px; }
.todo > b {
  font-size: var(--text-3xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-muted);
}
.todo-row {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 11px; align-items: center;
}
.todo-row .card-ico { width: 30px; height: 30px; border-radius: 8px; margin: 0; }
.todo-row .card-ico svg { width: 16px; height: 16px; }
.todo-row > div { min-width: 0; }
.todo-row b {
  display: block; font-size: var(--text-xs); font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Bara metatexten under rubriken — inte ikonrutan, som också är en span och
   behöver behålla sitt grid för att centrera ikonen. */
.todo-row > div span { display: block; font-size: var(--text-3xs); color: var(--ink-muted); margin-top: 1px; }
.todo-row .pill { flex: 0 0 auto; }

@media (max-width: 420px) {
  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Bandet: fyra påståenden, avdelade med hårfina linjer ---------------- */
.band { background: var(--surface); border-block: 1px solid var(--line-soft); }
.band-in {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-block: 44px;
}
.band-item { padding-inline: 30px; border-left: 1px solid var(--line-soft); }
.band-item:first-child { padding-left: 0; border-left: 0; }
.band-item:last-child { padding-right: 0; }
.band-ico { display: block; color: var(--brand); }
.band-ico svg { width: 22px; height: 22px; }
.band-item b {
  display: block; margin: 13px 0 7px;
  font-family: var(--font-display); font-size: var(--text-base); font-weight: 700;
  letter-spacing: -.015em;
}
.band-item p { font-size: var(--text-xs); line-height: var(--leading-relaxed); color: var(--ink-muted); }

/* --- Platta under produktvyerna ---------------------------------------- */
.plate {
  padding: 26px;
  border-radius: 20px;
  background:
    radial-gradient(120% 90% at 12% 0%, var(--brand-soft), transparent 62%),
    var(--surface-2);
}
.plate .shot { box-shadow: var(--shadow-lg); }

/* --- Nyttan: en sammanhållen panel, inte sex lösa kort ------------------ */
.panel {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.panel-cell {
  background: var(--surface); padding: 30px 28px;
  display: grid; gap: 10px; align-content: start;
}
.cell-ico { color: var(--brand); }
.cell-ico svg { width: 22px; height: 22px; }
.panel-cell h3 { font-size: var(--text-lg); margin-top: 3px; }
.panel-cell p { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--ink-muted); }

@media (max-width: 1020px) {
  .band-in { grid-template-columns: repeat(2, 1fr); gap: 32px 0; padding-block: 38px; }
  .band-item:nth-child(odd) { padding-left: 0; border-left: 0; }
  .band-item:nth-child(even) { padding-right: 0; }
  .panel { grid-template-columns: repeat(2, 1fr); }
  .plate { padding: 18px; border-radius: 16px; }
}

@media (max-width: 760px) {
  .band-in { grid-template-columns: 1fr; gap: 28px; }
  .band-item { padding-inline: 0; border-left: 0; }
  .panel { grid-template-columns: 1fr; }
  .sec { padding-block: 64px; }
  .plate { padding: 12px; }
}

/* --- Formulärtillägg ----------------------------------------------------- */
.field-opt { font-weight: 400; color: var(--ink-muted); }

.field-check {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 11px;
  align-items: start; font-size: var(--text-sm); color: var(--ink-2); line-height: var(--leading-normal);
}
.field-check input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--brand); }
.field-check a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

/* Honungsfällan ska varken synas eller nås med tangentbord. */
.field-trap {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.form-note.is-error { color: var(--crit); }
.form button[disabled] { opacity: .6; cursor: progress; }

/* --- Juridisk text ------------------------------------------------------- */
.legal { max-width: 68ch; }
.legal h2 {
  font-size: var(--text-lg); margin-block: 34px 12px;
  padding-top: 22px; border-top: 1px solid var(--line-soft);
}
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal p { font-size: var(--text-base); color: var(--ink-2); line-height: var(--leading-relaxed); }
.legal a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.legal-updated { margin-top: 34px; font-size: var(--text-xs); color: var(--ink-muted); }

/* --- Märket ------------------------------------------------------------- */
.brand-mark { width: 30px; height: 30px; color: #000; }
.shot-app .brand-mark { width: 18px; height: 18px; }

/* --- Rollkort på översikten --------------------------------------------- */
.role-link { transition: border-color .18s, box-shadow .18s, transform .18s; }
.role-link:hover { border-color: var(--brand-line); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.role-link:hover .card-ico { background: var(--brand); color: var(--brand-ink); }
.role .card-ico { transition: background .18s, color .18s; }
.role-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.role-points li {
  display: grid; grid-template-columns: 17px minmax(0, 1fr); gap: 10px;
  align-items: start; font-size: var(--text-sm); color: var(--ink-muted); line-height: var(--leading-normal);
}
.role-points svg { color: var(--brand); margin-top: 2px; }
.role .card-more { margin-top: auto; padding-top: 6px; }

/* --- Prissidans hero -----------------------------------------------------
   Prisborden håller, men sidan öppnade med .page-head: rubrik och grå rad.
   Heron ger den samma ingång som resten av sajten, med tre fakta som svarar
   på det man undrar innan man läser en prislapp. */
/* Blocket behåller sidans vanliga bredd så dess vänsterkant linjerar med
   headern och allt innehåll under. Tidigare stod här max-width: 78ch, men
   elementet bär också klassen .wrap med margin-inline: auto — ett smalare
   block med auto-marginal centreras i fönstret i stället för att ligga kvar
   vid innehållskolumnen, och heron hamnade 216 px längre in än logotypen.
   Läsbredden styrs i stället av rubrikens och ingressens egna max-width. */
.price-hero-in { padding-block: 62px 56px; }
.price-hero h1,
.contact-hero h1 { font-size: var(--display-page); margin-block: 14px 16px; }
.price-hero .lede,
.contact-hero .lede { max-width: 62ch; }
/* Kontaktsidans rutnät börjar direkt under heron, utan luftgap. */
.contact-hero + .contact-grid { padding-top: 46px; }

/* Listsidorna — /appar, /losningar och områdessidorna — öppnade med samma
   platta .page-head som resten av sajten lämnat. Heron är smalare här: det
   finns ingen produktvy att ställa bredvid, bara rubrik och ingress. */
.list-hero .price-hero-in { padding-block: 54px 46px; }
.list-hero h1 { font-size: var(--display-page); margin-block: 14px 16px; }
.list-hero .lede { max-width: 66ch; }
.list-hero .back { margin-bottom: 20px; }
.price-facts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
  margin-top: 38px; padding-top: 30px; border-top: 1px solid var(--line);
}
.price-fact { display: grid; gap: 6px; align-content: start; }
.price-fact b {
  font-family: var(--font-display); font-size: var(--text-xl);
  font-weight: 800; letter-spacing: -.02em; color: var(--brand);
}
.price-fact span { font-size: var(--text-sm); color: var(--ink-muted); line-height: var(--leading-relaxed); }

/* --- Appsidans hero och nyttoband ---------------------------------------
   Appsidan öppnade med en rubrik i mellangrad och gick rakt in i en lista på
   tio funktionspunkter. Nyttan — det som faktiskt säljer appen — låg under
   listan och lästes av ingen. */
.app-hero h1 { font-size: clamp(33px, 4.3vw, 51px); letter-spacing: -.035em; margin-block: 4px 0; }
.app-hero .back { margin-bottom: 26px; }
.app-hero .lede { font-size: var(--text-lg); margin-top: 20px; max-width: 48ch; }
.app-hero .hero-stage .rf { margin-bottom: 0; box-shadow: var(--shadow-lg); }

/* --- Appfigurer ----------------------------------------------------------
   Produktbeskrivningen ritad i stället för skriven. Klasserna ligger under
   .rf-body, alltså inuti samma figurram som rollfigurerna, och ärver därför
   ram, rubrik och bildtext utan att upprepa dem. */
.rf-body .av-node { fill: var(--surface); stroke-width: 1.4; }
.rf-body .av-node-off { stroke: var(--line); }
.rf-body .av-node-on { stroke: var(--brand-line); }
.rf-body .av-node-ok { stroke: var(--ok); }
.rf-body .av-node-warn { stroke: var(--warn); }
.rf-body .av-node-crit { stroke: var(--crit); }
.rf-body .av-node-t { font-family: var(--font-body); font-size: 13px; font-weight: 700; fill: var(--ink); }
.rf-body .av-node-m { font-family: var(--font-body); font-size: 11px; fill: var(--ink-muted); }

.rf-body .av-hub { fill: var(--brand-soft); stroke: var(--brand); stroke-width: 1.6; }
.rf-body .av-hub-crit { fill: var(--crit-soft); stroke: var(--crit); }
.rf-body .av-hub-t { font-family: var(--font-display); font-size: 14px; font-weight: 800; fill: var(--brand); }
.rf-body .av-hub-t-crit { fill: var(--crit); }
.rf-body .av-hub-m { font-family: var(--font-body); font-size: 11px; fill: var(--ink-2); }

.rf-body .av-edge { fill: none; stroke: var(--brand-line); stroke-width: 1.8; }
.rf-body .av-note { font-family: var(--font-body); font-size: 12px; font-weight: 600; fill: var(--ink-muted); }

/* Tidsaxel och spår. */
.rf-body .av-axis, .rf-body .av-tick { stroke: var(--line); stroke-width: 1.2; }
.rf-body .av-axis-t { font-family: var(--font-body); font-size: 11px; fill: var(--ink-muted); }
.rf-body .av-track-l { font-family: var(--font-body); font-size: 12px; font-weight: 700; fill: var(--ink-2); }
.rf-body .av-bar { stroke-width: 1.2; }
.rf-body .av-bar-ok { fill: var(--ok-soft); stroke: var(--ok); }
.rf-body .av-bar-crit { fill: var(--crit-soft); stroke: var(--crit); }
.rf-body .av-rest { fill: var(--surface-2); stroke: none; }
.rf-body .av-rest-t { font-family: var(--font-body); font-size: 11px; fill: var(--ink-muted); }
.rf-body .av-deadline { stroke: var(--crit); stroke-width: 2; }
.rf-body .av-deadline-ok { stroke: var(--ok); }
.rf-body .av-flag { font-family: var(--font-body); font-size: 11.5px; font-weight: 700; }
.rf-body .av-flag-crit { fill: var(--crit); }
.rf-body .av-flag-ok { fill: var(--ok); }
.rf-body .av-pause { stroke: var(--ink-muted); stroke-width: 1.4; stroke-dasharray: 3 5; }
.rf-body .av-pause-t { font-family: var(--font-body); font-size: 11px; fill: var(--ink-muted); }

/* Jourkedjan. */
.rf-body .av-step-time { font-family: var(--font-display); font-size: 12px; font-weight: 800; fill: var(--ink-muted); font-variant-numeric: tabular-nums; }
.rf-body .av-span, .rf-body .av-span-cap { stroke: var(--warn); stroke-width: 1.4; fill: none; }
.rf-body .av-span { stroke-dasharray: 4 4; }
.rf-body .av-span-t { font-family: var(--font-body); font-size: 11px; font-weight: 600; fill: var(--warn); }

/* Störningen. */
.rf-body .av-many { fill: var(--crit); opacity: .34; }
.rf-body .av-many-t { font-family: var(--font-display); font-size: 13px; font-weight: 800; fill: var(--crit); }
.rf-body .av-many-m { font-family: var(--font-body); font-size: 11px; fill: var(--ink-muted); }

/* Tid och debitering. */
.rf-body .av-bar-l { font-family: var(--font-body); font-size: 11.5px; font-weight: 600; fill: var(--ink-2); }
.rf-body .av-bar-v { font-family: var(--font-display); font-size: 13px; font-weight: 800; fill: var(--ink); font-variant-numeric: tabular-nums; }
.rf-body .av-bar2 { stroke-width: 1; }
.rf-body .av-bar2-mid { fill: var(--brand-soft); stroke: var(--brand-line); }
.rf-body .av-bar2-off { fill: var(--surface-2); stroke: var(--line); }
.rf-body .av-gate { fill: var(--surface); stroke: var(--brand); stroke-width: 1.6; stroke-dasharray: 5 4; }
.rf-body .av-gate-t { font-family: var(--font-display); font-size: 13px; font-weight: 800; fill: var(--brand); }

/* Tratten och rutnätet — de två typer som inte fanns i Tickets figurer. */
.rf-body .av-bar-s { font-family: var(--font-body); font-size: 11px; fill: var(--ink-muted); }
.rf-body .av-fnl { stroke: var(--line); stroke-width: 1.4; fill: none; }
.rf-body .av-bar2-warn { fill: var(--warn-soft); stroke: var(--warn); }
.rf-body .av-bar2-crit { fill: var(--crit-soft); stroke: var(--crit); }
.rf-body .av-bar2-ok { fill: var(--ok-soft); stroke: var(--ok); }

.rf-body .av-grid-c { font-family: var(--font-body); font-size: 11px; font-weight: 700; fill: var(--ink-muted); }
.rf-body .av-grid-r { font-family: var(--font-body); font-size: 12.5px; font-weight: 600; fill: var(--ink); }
.rf-body .av-cell { stroke-width: 1.2; }
.rf-body .av-cell-on { fill: var(--ok-soft); stroke: var(--ok); }
.rf-body .av-cell-gap { fill: var(--crit-soft); stroke: var(--crit); }
.rf-body .av-cell-na { fill: var(--surface-2); stroke: var(--line); }
.rf-body .av-cell-t { font-family: var(--font-body); font-size: 10.5px; font-weight: 700; fill: var(--crit); }
.rf-body .av-tickmark { fill: none; stroke: var(--ok); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Rörelsen. Strecken flyter åt det håll flödet går, så riktningen syns utan
   pilhuvuden, och prickarna andas så att "många" läses som pågående. Båda
   tystnar av prefers-reduced-motion-spärren längre upp i filen. */
.rf-body .av-flow { stroke-dasharray: 7 9; animation: av-dash 1.7s linear infinite; }
.rf-body .av-many { animation: av-breathe 3.2s ease-in-out infinite; }
.rf-body .av-d0 { animation-delay: 0s; }
.rf-body .av-d1 { animation-delay: -.55s; }
.rf-body .av-d2 { animation-delay: -1.1s; }
@keyframes av-dash { to { stroke-dashoffset: -32; } }
@keyframes av-breathe { 0%, 100% { opacity: .22; } 50% { opacity: .55; } }

.band-in.app-gains { grid-template-columns: repeat(3, 1fr); }
.app-gain { display: grid; gap: 12px; align-content: start; }
.gain-no {
  font-family: var(--font-display); font-size: 22px; font-weight: 800;
  line-height: 1; color: var(--brand-line); font-variant-numeric: tabular-nums;
}
.app-gain p { font-size: var(--text-base); color: var(--ink-2); line-height: var(--leading-relaxed); }

/* Funktionerna i två spalter i stället för en enda lång remsa. */
.feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 34px; }

/* Figursektionerna i huvudspalten. Figuren bär argumentet, ingressen under
   den fångar upp det som inte ritas. Radlängden hålls kort eftersom texten
   ska läsas som bildtext och inte som brödtext. */
.av-block .av-intro { font-size: var(--text-lg); color: var(--ink); line-height: 1.62; max-width: 62ch; }
.av-block .av-intro + .av-intro { margin-top: 14px; }
.av-sec { margin-top: 34px; }
.av-sec .rf { margin-bottom: 0; }
.av-lead {
  font-size: var(--text-sm); color: var(--ink-2); line-height: var(--leading-relaxed);
  max-width: 68ch; margin-top: 14px; padding-left: 15px; border-left: 2px solid var(--brand-line);
}

/* Delarna i en modulgatad app. */
.parts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.part {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px 22px 22px;
  display: grid; gap: 10px; align-content: start;
}
.part-no {
  font-family: var(--font-display); font-size: 20px; font-weight: 800;
  line-height: 1; color: var(--brand-line); font-variant-numeric: tabular-nums;
}
.part b { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; }
.part p { font-size: var(--text-sm); color: var(--ink-2); line-height: var(--leading-relaxed); }

/* --- Rollsidans hero -----------------------------------------------------
   Rollsidan använde .detail-head, alltså en rubrik i mellangrad och en grå
   rad. Första skärmen sålde ingenting. Nu lånar den startsidans hero: samma
   gradient, samma grad på rubriken, och rollens figur i stället för
   produktvyn — det finns något att titta på direkt. */
.role-hero .back { margin-bottom: 26px; }
.role-hero .detail-top { margin-bottom: 4px; }
/* Något mindre än startsidans hero: "Säkerhetsansvarig" är sjutton tecken och
   skars av mot spaltkanten vid --display-hero. */
.role-hero h1 {
  font-size: clamp(33px, 4.3vw, 51px); font-weight: 800;
  letter-spacing: -.035em; margin-block: 4px 0;
  overflow-wrap: break-word;
}
.role-hero .lede { font-size: var(--text-lg); margin-top: 20px; max-width: 46ch; }

/* --- Rollens nyckeltal, som band direkt under heron --------------------- */
.role-stat { display: grid; gap: 8px; align-content: start; }
.role-stat b {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--display-sub); line-height: 1.05;
  letter-spacing: -.025em; color: var(--brand);
}
.role-stat span {
  font-size: var(--text-sm); color: var(--ink-muted);
  line-height: var(--leading-relaxed);
}
/* Bandet är byggt för fyra celler på startsidan; rollsidan har tre. */
.band-in.role-stats { grid-template-columns: repeat(3, 1fr); }

/* --- Före och efter ------------------------------------------------------
   Två spalter som ska läsas som ett påstående och dess svar. Pilen i mitten
   bär riktningen; utan den blir raden två lösryckta meningar. */
.ba {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
}
.ba-head {
  display: grid; grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr);
  padding: 14px 24px; border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  font-size: var(--text-2xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.ba-head .ba-l { color: var(--ink-muted); }
.ba-head .ba-r { grid-column: 3; color: var(--brand); }
.ba-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr);
  align-items: center; gap: 0;
  padding: 18px 24px; border-bottom: 1px solid var(--line-soft);
  font-size: var(--text-base); line-height: var(--leading-relaxed);
}
.ba-row:last-child { border-bottom: 0; }
.ba-before { color: var(--ink-muted); }
.ba-arrow { display: grid; place-items: center; color: var(--line); }
.ba-after {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 11px;
  align-items: start; color: var(--ink);
}
.ba-after svg { color: var(--brand); margin-top: 4px; }

/* --- Det ni kanske inte visste ------------------------------------------
   Sidans tyngdpunkt. Korten är avsiktligt stora och få: fyra påståenden med
   plats att förklara sig, inte tolv punkter att skumma. */
.insights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.insight {
  background: var(--ground); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px 28px 24px;
  display: grid; gap: 18px; align-content: start;
}
/* Siffran är ett grafiskt element och inte en punktmarkör — den var tidigare
   en liten prick, och fyra kort med samma vikt gav ingen läsordning alls. */
.insight-no {
  font-family: var(--font-display); font-size: 27px; font-weight: 800;
  line-height: 1; letter-spacing: -.02em;
  color: var(--brand-line); font-variant-numeric: tabular-nums;
}
.insight-text { display: grid; gap: 13px; justify-items: start; }
.insight h3 { font-size: var(--text-lg); line-height: var(--leading-snug); }
.insight p { font-size: var(--text-sm); color: var(--ink-2); line-height: var(--leading-relaxed); }
/* Beviset är en märkning och inte en fotnot: det är raden som gör påståendet
   kontrollerbart, och den låg tidigare som grå minitext under en linje. */
.insight-proof {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px 7px 10px; border-radius: 100px;
  background: var(--brand-soft); color: var(--brand);
  font-size: var(--text-3xs); font-weight: 600; line-height: 1.35;
}
.insight-proof svg { flex: 0 0 auto; }

/* Den tyngsta insikten bär hela raden, med siffran som ankare till vänster. */
.insight-lead {
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 36px; align-items: start;
  padding: 38px 40px 34px;
  background:
    radial-gradient(720px 320px at 0% 0%, var(--brand-soft), transparent 68%),
    var(--surface);
  border-color: var(--brand-line);
}
.insight-lead .insight-no { font-size: 60px; color: var(--brand); }
.insight-lead h3 { font-size: var(--display-sub); letter-spacing: -.02em; }
.insight-lead p { font-size: var(--text-base); max-width: 64ch; }

/* --- Rollens egen kedja -------------------------------------------------- */
.flow { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 0; }
.flow-step {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 16px;
  padding-block: 15px; border-top: 1px solid var(--line-soft);
}
.flow-step:first-child { border-top: 0; padding-top: 0; }
.flow-no {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-2); color: var(--ink-muted);
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: 800;
}
.flow-step b {
  display: block; font-family: var(--font-display);
  font-size: var(--text-base); font-weight: 700;
}
.flow-step > div > span {
  display: block; margin-top: 3px;
  font-size: var(--text-sm); color: var(--ink-2);
  line-height: var(--leading-relaxed);
}

/* --- Rollfigurerna -------------------------------------------------------
   Ett diagram per roll. Färg och typsnitt sitter i klasser och inte i
   style-attribut, så CSP:n kan hålla style-src till 'self'. */
.rf {
  margin: 0 0 42px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface);
  overflow: hidden;
}
.rf-head {
  padding: 16px 24px; border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2);
}
.rf-head b { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; }
.rf-body {
  padding: 22px 20px;
  background-image: radial-gradient(var(--line-soft) 1px, transparent 1px);
  background-size: 19px 19px; background-position: 9px 9px;
}
/* Taket gör att figuren inte skalas upp förbi sin avsedda storlek — texten i
   en SVG växer med ritytan, och vid full sidbredd blir 11 px till 19 px. */
.rf-body svg { display: block; width: 100%; max-width: 720px; height: auto; margin-inline: auto; }
.rf-cap {
  padding: 15px 24px; border-top: 1px solid var(--line-soft);
  font-size: var(--text-sm); color: var(--ink-muted);
  line-height: var(--leading-relaxed);
}

/* Gemensamma delar */
.rf-body .rf-mini { font-family: var(--font-body); font-size: 11px; font-weight: 700; fill: var(--ink-muted); }
.rf-body .rf-mini-on { fill: var(--brand); }
.rf-body .rf-side { font-family: var(--font-display); font-size: 15px; font-weight: 800; fill: var(--ink-2); }
.rf-body .rf-side-on { fill: var(--brand); }
.rf-body .rf-side-sub { font-family: var(--font-body); font-size: 11px; fill: var(--ink-muted); }

/* Konsolideringen */
.rf-body .rf-mesh { stroke: var(--crit); stroke-width: 1; opacity: .3; }
.rf-body .rf-spoke { stroke: var(--brand-line); stroke-width: 1.6; }
.rf-body .rf-dot-off { fill: var(--surface); stroke: var(--line); stroke-width: 1.4; }
.rf-body .rf-dot-on { fill: var(--surface); stroke: var(--brand-line); stroke-width: 1.6; }
.rf-body .rf-hub { fill: var(--brand-soft); stroke: var(--brand); stroke-width: 1.6; }
.rf-body .rf-hub-t { font-family: var(--font-display); font-size: 13px; font-weight: 800; fill: var(--brand); }

/* Konsekvenskartan */
.rf-body .rf-edge { fill: none; stroke-width: 1.8; }
.rf-body .rf-edge-crit { stroke: var(--crit); }
.rf-body .rf-edge-warn { stroke: var(--warn); }
.rf-body .rf-edge-ok   { stroke: var(--line); }
.rf-body .rf-srv { fill: var(--brand-soft); stroke: var(--brand); stroke-width: 1.5; }
.rf-body .rf-srv-t { font-family: var(--font-display); font-size: 16px; font-weight: 800; fill: var(--brand); }
.rf-body .rf-srv-m { font-family: var(--font-body); font-size: 11px; fill: var(--ink-2); }
.rf-body .rf-svc { fill: var(--surface); stroke-width: 1.4; }
.rf-body .rf-svc-crit { stroke: var(--crit); }
.rf-body .rf-svc-warn { stroke: var(--warn); }
.rf-body .rf-svc-ok   { stroke: var(--line); }
.rf-body .rf-svc-t { font-family: var(--font-body); font-size: 13px; font-weight: 700; fill: var(--ink); }
.rf-body .rf-svc-m { font-family: var(--font-body); font-size: 11px; font-weight: 600; }
.rf-body .rf-svc-m-crit { fill: var(--crit); }
.rf-body .rf-svc-m-warn { fill: var(--warn); }
.rf-body .rf-svc-m-ok   { fill: var(--ok); }
.rf-body .rf-grp { fill: var(--ground); stroke: var(--line); stroke-width: 1; }
.rf-body .rf-grp-t { font-family: var(--font-body); font-size: 12px; font-weight: 600; fill: var(--ink); }
.rf-body .rf-grp-m { font-family: var(--font-body); font-size: 10.5px; fill: var(--ink-muted); }
.rf-body .rf-sum { font-family: var(--font-body); font-size: 11.5px; font-weight: 600; fill: var(--ink-muted); }

/* Brusfiltret */
.rf-body .rf-bar-off  { fill: var(--surface-2); stroke: var(--line); stroke-width: 1; }
.rf-body .rf-bar-mid  { fill: var(--brand-soft); stroke: var(--brand-line); stroke-width: 1; }
.rf-body .rf-bar-warn { fill: var(--warn-soft); stroke: var(--warn); stroke-width: 1; }
.rf-body .rf-bar-crit { fill: var(--crit-soft); stroke: var(--crit); stroke-width: 1; }
.rf-body .rf-bar-v { font-family: var(--font-display); font-size: 19px; font-weight: 800; fill: var(--ink); font-variant-numeric: tabular-nums; }
.rf-body .rf-bar-l { font-family: var(--font-body); font-size: 12.5px; font-weight: 600; fill: var(--ink); }
.rf-body .rf-bar-s { font-family: var(--font-body); font-size: 10.5px; fill: var(--ink-muted); }

.rf-body .rf-fnl { stroke: var(--line); stroke-width: 1.5; fill: none; }

/* Tidslinjen */
.rf-body .rf-axis { stroke: var(--line); stroke-width: 2; }
.rf-body .rf-mark-off { fill: var(--surface); stroke: var(--line); stroke-width: 2; }
.rf-body .rf-mark-mid { fill: var(--surface); stroke: var(--brand-line); stroke-width: 2; }
.rf-body .rf-mark-on  { fill: var(--brand); stroke: var(--brand); stroke-width: 2; }
.rf-body .rf-day { font-family: var(--font-display); font-size: 12px; font-weight: 800; fill: var(--ink-muted); }
.rf-body .rf-day-on { font-size: 14px; fill: var(--brand); }
.rf-body .rf-what { font-family: var(--font-body); font-size: 11.5px; fill: var(--ink-2); }
.rf-body .rf-where { font-family: var(--font-body); font-size: 10px; fill: var(--ink-muted); }
.rf-body .rf-zone { fill: var(--brand-soft); }
.rf-body .rf-zone-t { font-family: var(--font-body); font-size: 11px; font-weight: 600; fill: var(--brand); }

/* Avtalsåret */
.rf-body .rf-grid { stroke: var(--line-soft); stroke-width: 1; }
.rf-body .rf-month { font-family: var(--font-body); font-size: 10px; fill: var(--ink-muted); }
.rf-body .rf-deal { fill: var(--surface-2); stroke: var(--line); stroke-width: 1; }
.rf-body .rf-win-crit { fill: var(--crit-soft); stroke: var(--crit); stroke-width: 1; }
.rf-body .rf-win-warn { fill: var(--warn-soft); stroke: var(--warn); stroke-width: 1; }
.rf-body .rf-win-ok   { fill: var(--ok-soft); stroke: var(--ok); stroke-width: 1; }
.rf-body .rf-deal-t { font-family: var(--font-body); font-size: 11.5px; font-weight: 600; fill: var(--ink-2); }
.rf-body .rf-key-t { font-family: var(--font-body); font-size: 10px; fill: var(--ink-muted); }

/* Konsolen */
.rf-body .rf-console { fill: var(--surface); stroke: var(--line); stroke-width: 1.4; }
.rf-body .rf-console-t { font-family: var(--font-body); font-size: 11px; font-weight: 600; fill: var(--ink-muted); }
.rf-body .rf-tenant { fill: var(--ground); stroke: var(--line); stroke-width: 1; }
.rf-body .rf-led-ok   { fill: var(--ok); }
.rf-body .rf-led-warn { fill: var(--warn); }
.rf-body .rf-led-crit { fill: var(--crit); }
.rf-body .rf-tenant-t { font-family: var(--font-body); font-size: 12px; font-weight: 600; fill: var(--ink); }
.rf-body .rf-tenant-m { font-family: var(--font-body); font-size: 10.5px; fill: var(--ink-muted); }

/* Ramverkskopplingen */
.rf-body .rf-cross { fill: none; stroke: var(--brand-line); stroke-width: 1.6; }
.rf-body .rf-src { fill: var(--brand-soft); stroke: var(--brand); stroke-width: 1.4; }
.rf-body .rf-src-t { font-family: var(--font-display); font-size: 15px; font-weight: 800; fill: var(--brand); }
.rf-body .rf-src-m { font-family: var(--font-body); font-size: 11px; fill: var(--ink-2); }
.rf-body .rf-fw { fill: var(--surface); stroke: var(--line); stroke-width: 1.2; }
.rf-body .rf-fw-app { fill: var(--brand-soft); stroke: var(--brand-line); }
.rf-body .rf-cross-ext { stroke: var(--line); }
.rf-body .rf-fw-t { font-family: var(--font-display); font-size: 14px; font-weight: 700; fill: var(--ink); }
.rf-body .rf-fw-m { font-family: var(--font-body); font-size: 10.5px; fill: var(--ink-muted); }

/* Rollsidans brytpunkter ligger här och inte i de gemensamma blocken längre
   upp i filen: de blocken står före reglerna ovan, och vid samma specificitet
   vinner den regel som kommer sist. Lades de där slog de aldrig igenom. */
@media (max-width: 1020px) {
  .insights { grid-template-columns: minmax(0, 1fr); }
  .feat-grid { grid-template-columns: minmax(0, 1fr); }
  .av-block .av-intro, .av-lead { max-width: none; }
  .parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Den ledande insikten staplar siffran ovanför texten i stället för
     bredvid, annars äter 60-punktssiffran halva spaltbredden. */
  .insight-lead { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 30px 28px 26px; }
  .insight-lead .insight-no { font-size: 40px; }
}

@media (max-width: 700px) {
  /* Figurerna krymper inte ned till oläslighet. En SVG skalar sin text med
     ritytan, så vid 285 px blir 10 px till 4,5 px. I stället behåller figuren
     en minsta bredd och kortet scrollar i sidled — samma lösning som
     .shot-scroll använder för stapeldiagrammet i produktvyn. */
  .rf-body { overflow-x: auto; scrollbar-width: none; }
  .rf-body::-webkit-scrollbar { display: none; }
  .rf-body svg { min-width: 580px; }
  .rf-head, .rf-cap { padding-inline: 18px; }
}

@media (max-width: 760px) {
  /* Två klasser, inte en: .band-in.role-stats sätter tre spalter och vinner
     annars över den här regeln oavsett var i filen den står. */
  .band-in.role-stats,
  .band-in.app-gains { grid-template-columns: minmax(0, 1fr); }
  .price-facts { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .parts { grid-template-columns: minmax(0, 1fr); }
  .role-stat, .app-gain { padding: 20px 0 22px; }
  /* Före/efter blir två rader, med pilen vriden ett kvarts varv så
     riktningen fortfarande går att läsa uppifrån och ned. */
  .ba-head { display: none; }
  .ba-row { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 18px; }
  .ba-arrow { justify-items: start; transform: rotate(90deg); margin-left: 4px; }
  .insight { padding: 24px 22px 22px; }
}

/* --- Appar med motivering ----------------------------------------------- */
.app-reasons { display: grid; gap: 12px; }
.app-reason {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 24px;
  gap: 18px; align-items: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 22px;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.app-reason:hover { border-color: var(--brand-line); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.app-reason .card-ico { width: 44px; height: 44px; border-radius: 11px; margin: 0; }
.app-reason b { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; }
.app-reason-area {
  font-size: var(--text-2xs); color: var(--ink-muted); margin-left: 10px;
}
.app-reason p { font-size: var(--text-sm); color: var(--ink-2); margin-top: 4px; line-height: var(--leading-relaxed); }
.app-reason-arrow { color: var(--brand); display: grid; place-items: center; }
.app-reason:hover .card-ico { background: var(--brand); color: var(--brand-ink); }

/* --- Första steget ------------------------------------------------------ */
.start-pack {
  background: var(--surface); border: 1px solid var(--brand-line);
  border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow-sm);
}
.start-pack h3 { font-size: var(--text-2xl); margin-block: 10px 12px; line-height: var(--leading-snug); }
.start-pack p { font-size: var(--text-base); color: var(--ink-2); max-width: 68ch; }

/* --- Prisnivåer --------------------------------------------------------- */
/* Korten sträcks till radens höjd så knapparna linjerar — utan det faller
   varje kort till sin egen höjd och margin-top:auto på knappen får ingen
   effekt. Den utmärkta nivån är högre på grund av badgen och får därför en
   egen utjämning i toppen i stället. */
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
/* Alla kort har samma toppadding — även de utan badge. Annars startar den
   utmärkta nivåns innehåll lägre än grannarnas och varken rubrik, pris eller
   specrader linjerar på tvären. Badgen tillåts i stället hänga över kanten. */
.tier {
  position: relative;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 34px 24px 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.tier-featured { border-color: var(--brand); box-shadow: var(--shadow-md); }
.tier-badge {
  position: absolute; top: -11px; left: 24px;
  background: var(--brand); color: var(--brand-ink);
  font-size: var(--text-3xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 100px;
}
/* Namn och målgrupp hör ihop och sitter i en egen header, så radavståndet
   mellan dem styrs där i stället för med negativ marginal mot flex-gapet. */
.tier-head { display: grid; gap: 3px; }
.tier h2 { font-size: var(--text-xl); letter-spacing: -.01em; }
.tier-audience { font-size: var(--text-xs); color: var(--ink-muted); }
.tier-price {
  font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 800;
  letter-spacing: -.03em; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1.05;
  display: flex; align-items: baseline; gap: 4px;
}
.tier-price span { font-size: var(--text-sm); font-weight: 600; color: var(--ink-muted); }
/* Taken sitter ihop med priset — de tre talen är tillsammans vad nivån är.
   Därför flyttas linjen under specen i stället för att ligga under priset. */
/* Taken läses som ett datablad: egen ram, hårfina radlinjer, etikett mot
   värde. Neutral ton i stället för märkesfärg — märkesfärgen är reserverad
   för det som är valbart (badge, knapp), och tre fyllda gröna block i rad
   gjorde korten tyngre än de behöver vara. */
.tier-limits {
  margin: 0; padding: 4px 14px;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: calc(var(--radius) - 6px);
  display: grid;
}
.tier-limits div {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px;
  align-items: baseline; padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}
.tier-limits div:last-child { border-bottom: 0; }
.tier-limits dt {
  font-size: var(--text-3xs); font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-muted);
}
.tier-limits dd {
  margin: 0; font-size: var(--text-sm); font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
/* Ärvningsraden ("Allt i Team") är ingen funktion utan en hänvisning uppåt,
   och sätts därför som ingress till listan i stället för som en bock. */
.tier-inherits {
  font-size: var(--text-xs); font-weight: 700; color: var(--ink);
  margin-bottom: -4px;
}
.tier-inherits span { font-weight: 500; color: var(--ink-muted); }
.tier-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.tier-list li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px;
  align-items: start; font-size: var(--text-sm); color: var(--ink-2); line-height: var(--leading-normal);
}
.tier-list svg { color: var(--brand); margin-top: 2px; }
.tier .btn { margin-top: auto; justify-content: center; }
/* Ingen max-width: noten går hela containerbredden. Den är finstilt och läses
   svepande, inte mening för mening, och en smal spärr gjorde den till en hög
   vägg av text under korten. Bredden håller ned den till några få rader. */
.tier-note {
  margin-top: 26px; font-size: var(--text-sm); color: var(--ink-muted);
  line-height: var(--leading-relaxed);
}

/* --- Jämförelsetabellen --------------------------------------------------
   Prisnivåernas kort bär bara varje nivås egna punkter, och raderna "Allt i
   X" går inte att jämföra på tvären. Tabellen gör det, och markerar samma
   nivå som korten badgar. */
.cmp-scroll { overflow-x: auto; scrollbar-width: thin; }
.cmp-scroll:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: var(--radius); }
.cmp {
  position: relative;            /* fångar caption-elementets .sr-only */
  width: 100%; min-width: 640px; border-collapse: collapse;
  background: var(--ground); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.cmp th, .cmp td {
  /* Positionerad så att .sr-only inuti cellen håller sig kvar i den. Utan
     detta löses absolutpositioneringen mot sidan i stället för mot den
     vågrätt scrollande tabellen, och de dolda "Ingår"-texterna sköt ut
     dokumentet 241 px på mobil trots att tabellen själv var inkapslad. */
  position: relative;
  padding: 14px 18px; text-align: left; vertical-align: middle;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--text-sm); color: var(--ink-2);
}
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp thead th {
  background: var(--surface-2); border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-size: var(--text-base);
  font-weight: 700; color: var(--ink); white-space: nowrap;
}
.cmp thead th span {
  display: block; margin-top: 2px;
  font-family: var(--font-body); font-size: var(--text-2xs);
  font-weight: 600; color: var(--ink-muted); font-variant-numeric: tabular-nums;
}
.cmp tbody th { font-weight: 600; color: var(--ink); }
.cmp td { text-align: center; }
/* Kolumnrubrikerna centreras som värdena under dem. Första cellen hör till
   radrubrikernas spalt och står kvar vänsterställd. */
.cmp thead th:not(:first-child) { text-align: center; }
.cmp td svg { color: var(--brand); vertical-align: middle; }
.cmp-no { color: var(--line); font-size: var(--text-lg); }
/* Den badgade nivån får en egen spalt hela vägen ned. */
.cmp .cmp-on { background: var(--brand-soft); }
.cmp thead th.cmp-on { color: var(--brand); }

/* --- Prismatrisen -------------------------------------------------------
   Samma ram och rytm som jämförelsetabellen, men cellerna bär tal och inte
   bockar. Priserna är tabulära så kolumnen linjerar siffra mot siffra. */
.mx {
  position: relative;
  width: 100%; min-width: 640px; border-collapse: collapse;
  background: var(--ground); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.mx th, .mx td {
  position: relative;
  padding: 14px 18px; text-align: center; vertical-align: middle;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--text-sm); color: var(--ink-2);
}
.mx tbody tr:last-child th, .mx tbody tr:last-child td { border-bottom: 0; }
.mx thead th, .mx-corner {
  background: var(--surface-2); border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-size: var(--text-base);
  font-weight: 700; color: var(--ink); white-space: nowrap;
}
/* Radrubrikerna är korta spann och behöver inte en tredjedel av bredden —
   utan taket tar spalten 339 px och priskolumnerna trängs ihop. */
.mx-corner, .mx tbody th { width: 20%; }
.mx tbody th {
  text-align: left; font-weight: 600; color: var(--ink);
  background: var(--surface-2); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mx td b {
  display: block; font-size: var(--text-base); font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Cellerna som motsvarar ett namngivet paket märks ut, så matrisen och
   korten ovan går att koppla ihop utan att räkna. */
.mx .mx-mark { background: var(--brand-soft); }
.mx-tag {
  display: inline-block; margin-top: 5px;
  font-size: var(--text-3xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--brand);
}
.mx-quote td { font-weight: 600; color: var(--ink); text-align: left; }

/* Dold för ögat, läst av skärmläsare. Fanns inte i stilmallen tidigare. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- Faktabladet: gränsvärden bakom en länk ------------------------------
   Taken hör inte hemma i skyltfönstret. Ett tak är svaret på en fråga och
   inte ett säljargument, så länken är avsiktligt liten och innehållet ligger
   i en <dialog> — den ger fokusfälla, Escape och bakgrund utan eget skript.

   Utan JavaScript gör länken i stället elementet till :target, och då visas
   samma innehåll som en vanlig panel i flödet. Uppgifterna blir alltså
   aldrig oåtkomliga, och de två tillstånden krockar inte: [open] sätts bara
   av showModal(), :target bara av adressraden. */
.tier-more { margin: 14px 0 0; }
.lnk-sheet {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--text-sm); font-weight: 600; color: var(--brand);
  text-decoration-color: var(--brand-line); text-underline-offset: 3px;
}
.lnk-sheet:hover { text-decoration-color: currentColor; }
.lnk-sheet svg { flex: none; }

.sheet {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  padding: 0; overflow: hidden;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.sheet::backdrop { background: rgba(15, 34, 32, .45); }

/* Den öppnade modalen är en kolumn — huvudet håller sin höjd, kroppen tar
   resten och rullar. Regeln måste hängas på [open]: en stängd <dialog> är
   display: none, och ett ovillkorligt display: flex hade visat faktabladet
   hela tiden. Det gör också att :target-läget slipper undantag, eftersom det
   aldrig har attributet satt. */
.sheet[open] { display: flex; flex-direction: column; }

/* Reservläget utan skript: panelen ligger kvar i flödet under korten. */
.sheet:target {
  display: block; position: static;
  width: auto; max-height: none; margin: 22px 0 0;
  box-shadow: var(--shadow-md);
}

.sheet-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px; align-items: start;
  padding: 22px 26px; border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.sheet-head h2 { margin: 0; font-size: var(--text-3xl); line-height: var(--leading-snug); }
.sheet-x {
  display: grid; place-items: center; width: 36px; height: 36px;
  color: var(--ink-muted); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.sheet-x:hover { color: var(--ink); border-color: var(--ink-muted); }

/* Rullningen ligger på kroppen och inte på dialogen, så sidhuvudet med
   stängkrysset står kvar när innehållet är längre än rutan. */
.sheet-body { padding: 24px 26px 28px; overflow-y: auto; }
.sheet[open] .sheet-body { flex: 1 1 auto; min-height: 0; }
.sheet-body > *:first-child { margin-top: 0; }
.sheet-body > *:last-child { margin-bottom: 0; }
.sheet-body h3 {
  margin: 30px 0 12px; font-size: var(--text-xl); line-height: var(--leading-snug);
}
.sheet-lede { margin: 0 0 20px; font-size: var(--text-base); color: var(--ink-2); }
.sheet-small { margin: 14px 0 0; font-size: var(--text-sm); color: var(--ink-muted); }

/* Talen i faktabladet är tabulära på samma villkor som i prismatrisen, men
   utan <b>: strängar som "Dimensioneras" står i samma spalt som "100 GB",
   och matrisens nowrap på fet text hade brutit kolumnbredden. */
.sheet .mx { min-width: 560px; }
.sheet .mx th, .sheet .mx td { padding: 12px 10px; }
/* Cellerna bryter aldrig rad. "100 GB" på två rader såg ut som två värden,
   och att spara bredd genom radbrytning är meningslöst i en spalt som ändå
   rullar i sidled. */
.sheet .mx td { font-variant-numeric: tabular-nums; white-space: nowrap; }

.sheet-facts { margin: 0; display: grid; gap: 14px; }
.sheet-facts div {
  padding-left: 14px; border-left: 2px solid var(--brand-line);
}
.sheet-facts dt { font-weight: 700; font-size: var(--text-sm); color: var(--ink); }
.sheet-facts dd {
  margin: 3px 0 0; font-size: var(--text-sm); color: var(--ink-2);
  line-height: var(--leading-normal);
}

/* Löftet gäller samtliga tak och står därför som egen ruta, inte som en
   punkt bland de andra. */
.sheet-promise {
  margin: 16px 0 0; padding: 13px 16px;
  background: var(--brand-soft); border: 1px solid var(--brand-line);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: 600; color: var(--brand-2);
}
.sheet-list { gap: 9px; }

@media (max-width: 760px) {
  /* Hela skärmen på mobil. Innehållet är för långt för en centrerad ruta, och
     de 18 px bakgrund som blev kvar över och under såg ut som ett fel när
     ramen och hörnen samtidigt togs bort. dvh och inte vh, så adressfältet
     inte skär av slutet. [open] håller reservpanelen utanför regeln. */
  .sheet[open] {
    width: 100vw; max-width: 100vw;
    height: 100dvh; max-height: 100dvh;
    margin: 0; border: 0; border-radius: 0;
  }
  .sheet-head { padding: 18px 20px; }
  .sheet-head h2 { font-size: var(--text-2xl); }
  .sheet-body { padding: 20px 20px 24px; }
}

/* --- Kom igång ----------------------------------------------------------
   Uppstart är ett val mellan två spår, inte en avgift. Korten står därför
   jämsides och lika stora; veckorna under dem beskriver bara det köpta. */
.setup-paths { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.setup-path {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px;
  display: grid; gap: 8px; align-content: start;
}
.setup-path b { font-family: var(--font-display); font-size: var(--text-lg); color: var(--ink); }
.setup-path .setup-price {
  font-size: var(--text-sm); font-weight: 700; color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.setup-path p { font-size: var(--text-sm); color: var(--ink-2); line-height: var(--leading-relaxed); }
.weeks-lede {
  margin: 30px 0 16px; font-size: var(--text-sm); color: var(--ink-muted);
  line-height: var(--leading-relaxed);
}
.weeks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.week {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px;
  display: grid; gap: 6px; align-content: start;
}
.week-no {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: 800;
  margin-bottom: 6px;
}
.week-label {
  font-size: var(--text-3xs); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-muted);
}
.week b { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; }
.week p { font-size: var(--text-sm); color: var(--ink-muted); line-height: var(--leading-relaxed); margin-top: 2px; }

/* --- Frågor och svar ---------------------------------------------------- */
.faq { display: grid; gap: 10px; }
.faq-item {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px 22px; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: var(--text-base); font-weight: 700;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; color: var(--brand); font-size: var(--text-2xl); font-weight: 600;
  /* Glyfen ska sitta på sin egen baslinje, därför 1 och inte ett steg. */
  line-height: 1; flex: 0 0 auto;
}
.faq-item[open] summary::after { content: "–"; }
.faq-body {
  padding: 0 22px 20px; font-size: var(--text-base); color: var(--ink-2); line-height: var(--leading-relaxed);
}

@media (max-width: 1020px) {
  .tiers { grid-template-columns: repeat(2, 1fr); }
  .weeks { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .tiers, .weeks, .setup-paths { grid-template-columns: 1fr; }
  .app-reason { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
  .app-reason-arrow { display: none; }
  .app-reason-area { display: block; margin-left: 0; }
  .start-pack { padding: 24px; }
  .situation { padding-inline: 18px; }
}

/* --- Turen: stegen till vänster, vyn till höger ------------------------- */
.tour {
  display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  gap: 44px; align-items: start;
}

.tour-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tour-step {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px;
  padding: 16px 18px; align-items: start;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .18s, box-shadow .18s;
}
.tour-step:hover { border-color: var(--brand-line); }
.tour-step b {
  display: block; font-family: var(--font-display);
  font-size: var(--text-base); font-weight: 700; letter-spacing: -.015em;
}
.tour-note {
  display: block; margin-top: 4px;
  font-size: var(--text-sm); color: var(--ink-muted);
  line-height: var(--leading-relaxed);
}
.tour-no {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-2); color: var(--ink-muted);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: 800;
  transition: background .18s, color .18s;
}

/* Markerat steg. Utan JavaScript sätts aldrig aria-selected, och då står
   alla steg omarkerade medan alla fyra panelerna syns under varandra. */
.tour-step[aria-selected="true"] { border-color: var(--brand); box-shadow: var(--shadow-md); }
.tour-step[aria-selected="true"] .tour-no { background: var(--brand); color: var(--brand-ink); }

/* Raden som pekar ut att turen bara är ett exempel på mönstret. */
.chain-more {
  margin: 54px 0 16px; font-size: var(--text-sm); color: var(--ink-muted);
}

/* Samma skäl som för .tour: utan minmax(0, …) sätter panelens min-content
   spaltens bredd, och vyn trycker ut scenen förbi skärmkanten på mobil. */
.tour-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.tour-stage .shot { box-shadow: var(--shadow-lg); }
.tour-panel:focus-visible { outline: 2px solid var(--brand); outline-offset: 6px; border-radius: var(--radius); }

/* --- Delar som vyerna i turen delar ------------------------------------- */

/* Rader med etikett och värde. */
.rec-row {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px;
  padding: 10px 16px; border-bottom: 1px solid var(--line-soft);
  font-size: var(--text-xs);
}
.rec-row:last-child { border-bottom: 0; }
.rec-row > span:first-child { color: var(--ink-muted); }
.rec-row > span:last-child { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rec-row b { font-weight: 700; }

/* Hänvisning till en post i en annan app. Motivet går igen i alla fyra
   vyerna — det är återkomsten som visar att apparna läser varandra. */
.xref {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 7px; border-radius: 100px;
  background: var(--brand-soft); color: var(--brand);
  font-size: var(--text-3xs); font-weight: 600; white-space: nowrap;
}
.xref svg { width: 13px; height: 13px; flex: 0 0 auto; }

/* Foten: vad som händer med posten härnäst. */
.shot-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1px solid var(--line-soft);
  background: var(--surface-2);
  font-size: var(--text-2xs); color: var(--ink-muted);
}

/* Rader i listorna. Linjerna ligger mellan raderna och aldrig i ytterkant,
   annars möter den sista raden fotens egen linje och de blir två. */
.lines .line + .line { border-top: 1px solid var(--line-soft); }
.line {
  display: grid; align-items: center; gap: 12px;
  padding: 11px 16px;
  font-size: var(--text-xs); color: var(--ink-2);
}
.line .card-ico { width: 28px; height: 28px; border-radius: 8px; margin: 0; }
.line b { font-weight: 700; font-variant-numeric: tabular-nums; }
.line-log  { grid-template-columns: 46px minmax(0, 1fr) auto; }
.line-log > span:first-child { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.line-dep  { grid-template-columns: 28px minmax(0, 1fr) auto; }
/* Ikon, namn, ett värde och en status. Värdet är antingen en dämpad
   upplysning — leverantör, kurslängd, regeln som gällde — eller ett tal i
   fetstil. Därför ligger dämpningen på .m och inte på kolumnen. */
.line-item { grid-template-columns: 28px minmax(0, 1fr) auto auto; }
.line-item .m { color: var(--ink-muted); }
.line-time { grid-template-columns: 52px 24px auto minmax(0, 1fr) auto; }
.line-time > span:first-child { color: var(--ink-muted); }
.line-time b { text-align: right; }
.line-sum {
  grid-template-columns: minmax(0, 1fr) auto;
  background: var(--surface-2);
  font-weight: 600; color: var(--ink);
}

@media (max-width: 1020px) {
  /* minmax(0, 1fr) och inte 1fr: annars sätts spaltens minsta bredd av
     innehållets min-content, och de bredaste raderna i vyerna trycker ut
     turen förbi skärmkanten. Det gav vågrät scroll på hela sidan. */
  .tour { grid-template-columns: minmax(0, 1fr); gap: 26px; }

  /* Stegen blir en remsa ovanför vyn. Beskrivningen ryms inte, men
     rubriken och numret räcker för att visa var i kedjan man är. */
  .tour-steps {
    display: flex; gap: 8px;
    overflow-x: auto; scrollbar-width: none;
    padding-bottom: 2px;
  }
  .tour-steps::-webkit-scrollbar { display: none; }
  .tour-step { flex: 0 0 auto; max-width: 260px; padding: 12px 15px; align-items: center; }
  .tour-note { display: none; }
}

@media (max-width: 760px) {
  .rec-row { grid-template-columns: 88px minmax(0, 1fr); padding-inline: 14px; }
  .line { padding-inline: 14px; }
  .line-time { grid-template-columns: 46px 24px minmax(0, 1fr) auto; }
  .line-time .xref { display: none; }
  .tour-stage .shot { box-shadow: var(--shadow-md); }
}

/* --- Plattformssidan -----------------------------------------------------
   Sidan har två egna komponenter — de tre vägarna in och tyngdklasserna —
   plus figuren som ritar upp dem. Resten lånas av sidor som redan finns:
   heron, remsan, panelen, före/efter-raderna, veckorna och frågorna.

   Blocket ligger sist i filen av samma skäl som rollsidans brytpunkter: vid
   samma specificitet vinner den regel som står sist, och undantagen för
   .sec-alt nedan måste slå igenom mot komponenternas egna bakgrunder. */

/* Kundens egna appar i appväljaren. Markeringen är hela poängen med vyn, så
   den är en fylld bricka och inte en liten prick i hörnet — den ska synas i
   samma ögonkast som rutnätet. */
.app-tile.own { background: var(--brand-soft); border-color: var(--brand-line); }
.app-tile.own .card-ico { background: var(--brand); color: var(--brand-ink); }

.launch-legend {
  display: flex; align-items: center; gap: 9px; margin-top: -6px;
  font-size: var(--text-3xs); color: var(--ink-muted); line-height: var(--leading-normal);
}
.launch-swatch {
  width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto;
  background: var(--brand-soft); border: 1px solid var(--brand-line);
}

/* --- Figuren: tre vägar in ---------------------------------------------- */
/* Samma ram som rollfigurerna, men ritytan är bredare: figuren är tre spalter
   bredvid varandra och inte ett enskilt diagram. */
.pw {
  margin: 0; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface);
  overflow: hidden;
}
.pw-head {
  padding: 16px 24px; border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2);
}
.pw-head b { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; }
.pw-body {
  padding: 24px 20px;
  background-image: radial-gradient(var(--line-soft) 1px, transparent 1px);
  background-size: 19px 19px; background-position: 9px 9px;
}
/* Taket har samma skäl som rollfigurernas: en SVG skalar sin text med
   ritytan, och utan tak blir 12 px till 19 px vid full sidbredd. */
.pw-body svg { display: block; width: 100%; max-width: 940px; height: auto; margin-inline: auto; }
.pw-cap {
  padding: 15px 24px; border-top: 1px solid var(--line-soft);
  font-size: var(--text-sm); color: var(--ink-muted);
  line-height: var(--leading-relaxed);
}

/* Figurens delar. Modifierarna står efter sina grundklasser — de bärs på
   samma element och avgörs därför av ordningen här. */
.pw-body .pw-no-bg { fill: var(--brand); }
.pw-body .pw-no { font-family: var(--font-display); font-size: 13px; font-weight: 800; fill: var(--brand-ink); }
.pw-body .pw-name { font-family: var(--font-display); font-size: 16px; font-weight: 800; fill: var(--ink); letter-spacing: -.02em; }

.pw-body .pw-tile { fill: var(--surface); stroke: var(--line); stroke-width: 1.2; }
.pw-body .pw-tile-on { fill: var(--brand-soft); stroke: var(--brand); stroke-width: 1.6; }
.pw-body .pw-chip { fill: var(--brand-soft); }
.pw-body .pw-chip-on { fill: var(--brand); }
.pw-body .pw-tile-t { font-family: var(--font-body); font-size: 12.5px; font-weight: 600; fill: var(--ink); }
.pw-body .pw-on-t { fill: var(--brand); }

.pw-body .pw-panel { fill: var(--surface); stroke: var(--line); stroke-width: 1.2; }
.pw-body .pw-div { stroke: var(--line-soft); stroke-width: 1; }
.pw-body .pw-field { font-family: var(--font-body); font-size: 11.5px; fill: var(--ink-muted); }
.pw-body .pw-pill { fill: var(--brand-soft); stroke: var(--brand-line); stroke-width: 1; }
.pw-body .pw-pill-t { font-family: var(--font-body); font-size: 11px; font-weight: 600; fill: var(--brand); }

.pw-body .pw-sketch { fill: var(--surface); stroke: var(--brand-line); stroke-width: 1.4; stroke-dasharray: 5 4; }
.pw-body .pw-wire { fill: var(--line); }
.pw-body .pw-sketch-t { font-family: var(--font-body); font-size: 11px; font-weight: 600; fill: var(--ink-muted); }
.pw-body .pw-arrow { stroke: var(--brand-line); stroke-width: 2; fill: none; }
.pw-body .pw-arrow-head { fill: var(--brand-line); }
.pw-body .pw-own-t { font-family: var(--font-body); font-size: 10px; font-weight: 700; fill: var(--brand); letter-spacing: .09em; }

.pw-body .pw-colcap { font-family: var(--font-body); font-size: 12px; fill: var(--ink-muted); }
.pw-body .pw-flow { stroke: var(--brand-line); stroke-width: 2; fill: none; }
.pw-body .pw-flow-head { fill: var(--brand-line); }

.pw-body .pw-base { fill: var(--brand-soft); stroke: var(--brand-line); stroke-width: 1.4; }
.pw-body .pw-base-l { font-family: var(--font-body); font-size: 11px; font-weight: 700; fill: var(--brand); letter-spacing: .1em; }
.pw-body .pw-base-chip { fill: var(--surface); stroke: var(--brand-line); stroke-width: 1; }
.pw-body .pw-base-chip-t { font-family: var(--font-body); font-size: 12px; font-weight: 600; fill: var(--ink); }

/* --- De tre vägarna som kort -------------------------------------------- */
.ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; }
.way {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px 28px 26px;
  display: flex; flex-direction: column; gap: 13px;
}
/* Den byggda vägen är sidans poäng och bär därför samma markering som den
   utmärkta prisnivån: brandram, skugga och en anstrykning av färg uppifrån. */
.way-on {
  border-color: var(--brand); box-shadow: var(--shadow-md);
  background:
    radial-gradient(560px 260px at 100% 0%, var(--brand-soft), transparent 70%),
    var(--surface);
}
.way-top { display: flex; align-items: center; gap: 11px; }
.way-no {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
  background: var(--brand-soft); color: var(--brand);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: 800;
}
.way-on .way-no { background: var(--brand); color: var(--brand-ink); }
.way-name {
  font-size: var(--text-2xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand);
}
.way h3 { font-size: var(--text-xl); line-height: var(--leading-snug); }
.way > p { font-size: var(--text-sm); color: var(--ink-2); line-height: var(--leading-relaxed); }
/* Löftet är kortets rubrikrad nummer två och sätts efter brödtextregeln
   ovan, som annars vinner på samma specificitet och krymper den. */
.way > p.way-promise {
  font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: 700; letter-spacing: -.02em; color: var(--brand);
}

/* Tre rader som svarar på samma tre frågor i varje kort, så de går att läsa
   på tvären. Etiketten står över värdet och inte bredvid: prisraden på det
   byggda kortet är för lång för en spalt på halva kortbredden. */
.way-meta { margin: 2px 0 0; display: grid; border-top: 1px solid var(--line-soft); }
.way-meta div { display: grid; gap: 2px; padding-block: 9px; border-bottom: 1px solid var(--line-soft); }
.way-meta div:last-child { border-bottom: 0; }
.way-meta dt { font-size: var(--text-2xs); color: var(--ink-muted); line-height: var(--leading-normal); }
.way-meta dd { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--ink); line-height: var(--leading-snug); }
.way .btn-text { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 8px; }

/* --- Tyngdklasserna ------------------------------------------------------ */
/* Korten ligger bara i en .sec-alt och har därför ljus botten direkt, samma
   lösning som insikterna på rollsidan. */
.klasses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.klass {
  background: var(--ground); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.klass-top { display: flex; align-items: center; gap: 13px; }
.klass-top b { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; }
.klass p { font-size: var(--text-sm); color: var(--ink-2); line-height: var(--leading-relaxed); }
.klass-cases { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 4px; }

/* Mätaren gör skillnaden mellan Enkel, Mellan och Tung läsbar innan texten
   är läst — tre likadana kort med var sitt ord säger ingenting. */
.weight { display: block; flex: 0 0 auto; }
.weight-on { fill: var(--brand); }
.weight-off { fill: var(--line); }

/* Panelen och frågorna bär ljus botten som standard och försvinner därför i
   en .sec-alt. Samma undantag som .sec-alt .card och .sec-alt .pack. */
.sec-alt .panel-cell { background: var(--ground); }
.sec-alt .faq-item { background: var(--ground); }

@media (max-width: 1020px) {
  /* Vägkorten är höga och blir oläsbart smala i två spalter — de går rakt
     till en. Klasskorten är korta och klarar två, med ett ensamt sista kort
     över hela bredden på samma sätt som paketen. */
  .ways { grid-template-columns: minmax(0, 1fr); }
  .klasses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .klass:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .klasses { grid-template-columns: minmax(0, 1fr); }
  .way { padding: 26px 22px 22px; }
  .klass { padding: 24px 22px; }
}

@media (max-width: 700px) {
  /* Figuren krymper inte ned till oläslighet. Samma lösning som
     rollfigurerna: behåll en minsta bredd och låt kortet scrolla i sidled. */
  .pw-body { overflow-x: auto; scrollbar-width: none; }
  .pw-body::-webkit-scrollbar { display: none; }
  .pw-body svg { min-width: 720px; }
  .pw-head, .pw-cap { padding-inline: 18px; }
}

/* --- Menyn med fem poster ------------------------------------------------
   "Plattformen" gjorde menyn bredare än den var byggd för. Raden behöver
   787 px för att rymmas — brand 115, menyn 592, mellanrummet 32 och
   wrap-elementets 48 i sidled — men hamburgaren tog vid först vid 760.
   Däremellan fick knappen "Boka en visning" krympa och bröt sig i två rader.

   Två åtgärder: en knapptext bryter aldrig rad, och menyn fälls ihop redan
   vid 860 px i stället för 760. Reglerna nedan är desamma som i blocket för
   760 px längre upp i filen — de står här i en egen brytpunkt eftersom det
   blocket också bär orelaterade regler (korten, rutnäten, formuläret) som
   inte ska slå till en bit tidigare. Under 760 px sätter båda blocken samma
   värden, så de kan inte gå isär. */
.btn { white-space: nowrap; }

@media (max-width: 860px) {
  .nav { display: none; }
  .nav-open .nav {
    display: grid; position: absolute; top: 70px; left: 0; right: 0;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 12px 24px 18px; gap: 2px; box-shadow: var(--shadow-md);
  }
  .nav .btn { margin-left: 0; margin-top: 6px; justify-content: center; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; width: 42px; height: 38px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); cursor: pointer;
  }
}

/* --- Sjunde rollen -------------------------------------------------------
   Verksamhetsutveckling: rollen som äger en process inget system stödjer.
   Figuren behöver fyra delar som de tidigare rollfigurerna inte har — det
   som saknas, bocken för det som finns, pilen mellan halvorna och märkningen
   av kundens egen app. */
.rf-body .rf-miss { fill: var(--warn); }
.rf-body .rf-check { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rf-body .rf-go { stroke: var(--brand-line); stroke-width: 2; fill: none; }
.rf-body .rf-go-head { fill: var(--brand-line); }
.rf-body .rf-line { stroke: var(--line-soft); stroke-width: 1; }
.rf-body .rf-own { font-family: var(--font-body); font-size: 10px; font-weight: 700; fill: var(--brand); letter-spacing: .09em; }

/* Sju roller i två spalter lämnar den sista ensam med ett hål bredvid sig.
   Samma lösning som paketen: den får hela raden i stället. */
.role:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Länken i heroanteckningen. Noten är dämpad text, och utan den här regeln
   ärver länken samma grå och syns inte som en länk. */
.hero-note a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.hero-note a:hover { color: var(--brand-2); }