/* styles.css för foretagsportratt/index.html
   ─────────────────────────────────────────────────────────────
   Landningssida för marknadsansvariga. Tokens, typografi och
   komponenter följer designsystemet i docs/DESIGNBRIEF.md.

   Designbriefens fem hårda regler:
     1. Färgerna kommer ur tokens. Aldrig #000, aldrig #fff.
     2. Fyra röster: Schibsted 900 påstående, Schibsted 400
        förklaring, JetBrains Mono etikett, Caveat person.
     3. Ingen em-dash, inga superlativer, inga fråge- eller
        utropstecken i displayrader.
     4. Ingen skugga, ingen gradient, en accent max en gång per vy.
     5. Mini-Adam gör jobbet när han syns. Aldrig dekoration.

   Innehåll
     01  Tokens och fonter
     02  Reset och bas
     03  Etiketter och typografi
     04  Knappar
     05  Hero
     06  Porträttband
     07  Systemet, portalen och stegen
     08  Fördelar
     09  Jämförelse
     10  Kontakt
     11  Sidfot
     12  Reveal
     13  Responsivt
   ───────────────────────────────────────────────────────────── */

/* ─── 01  TOKENS OCH FONTER ────────────────────────────────────── */

/* Fonter laddas lokalt så sidan fungerar utan internet. */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/schibsted-grotesk-normal-400-900-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/inter-normal-400-700-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('fonts/jetbrains-mono-normal-400-500-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/caveat-normal-400-700-latin.woff2') format('woff2');
}

:root {
  /* Varm-tintade neutrals. Aldrig #000. Aldrig #fff. */
  --ink:   #0d0c0a;
  --bg:    #f8f7f4;
  --soft:  #6b6964;
  --line:  #d4d2cd;
  --cream: #f0ebe2;

  /* Inverterat läge för mörka ytor. Fortfarande monokromt. */
  --ink-inv:  #f8f7f4;
  --bg-inv:   #0d0c0a;
  --soft-inv: #9a978f;
  --line-inv: #33312d;

  /* En accent. En enda. Används restriktivt. */
  --accent: #EACC59;

  /* Typografi */
  --font-display: 'Schibsted Grotesk', 'Archivo Black', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --font-hand:    'Caveat', cursive;

  /* Rytm */
  --gap-xs: 8px;
  --gap-sm: 14px;
  --gap-md: 22px;
  --gap-lg: 40px;
  --gap-xl: clamp(56px, 9vw, 120px);

  /* Yttre marginal */
  --pad: clamp(16px, 4.5vw, 48px);

  /* Rörelse */
  --ease: cubic-bezier(.16, 1, .3, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; height: auto; background: var(--cream); }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
p, h1, h2, h3, h4, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--ink); color: var(--bg); }

/* Fokus är alltid synlig. Aldrig borttagen. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ─── 02  RESET OCH BAS ────────────────────────────────────────── */

.pad { padding-inline: var(--pad); }

/* Dolt för synsyn, men läst av skärmläsare. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ─── 03  ETIKETTER OCH TYPOGRAFI ───────────────────────────────── */

/* Etikett: monospace, små, versaler, spärrad. */
.meta {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--soft);
}

/* Display: Schibsted 900 i versaler. Deklarativt. Inga frågor,
   inga utrop, inga em-dash. */
.display {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.045em;
  text-transform: uppercase;
  hyphens: manual;
  overflow-wrap: break-word;
}

/* Förklaring: Schibsted 400 i lätt vikt. Aldrig Inter i ett kort
   eller i en post. */
.fine {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.01em;
}

/* Personlig anmärkning. Max en per vy. */
.hand {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: clamp(19px, 2.4vw, 25px);
  line-height: 1.3;
  color: var(--soft);
  transform: rotate(-1.5deg);
  transform-origin: left center;
}

/* ─── 04  KNAPPAR ───────────────────────────────────────────────── */

/* Pillformen är reserverad för CTA:er. */
.btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin-top: clamp(20px, 3vw, 30px);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.01em;
  transition: background .2s ease, color .2s ease;
}
.btn__arrow { margin-left: 12px; font-weight: 400; }

/* Fylld knapp på papper. */
.btn--solid { background: var(--ink); color: var(--bg); }
.btn--solid:hover { background: transparent; color: var(--ink); }

/* Ghost: text med understrykning, ingen ram. */
.btn--ghost {
  border-color: transparent;
  padding-inline: 6px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.btn--ghost:hover { background: transparent; color: var(--soft); }

/* Knappar i mörk hero. Samma form, inverterad färg. */
.btn--light {
  background: var(--ink-inv);
  border-color: var(--ink-inv);
  color: var(--bg-inv);
}
.btn--light:hover { background: transparent; color: var(--ink-inv); }
.btn--ghost-light {
  border-color: transparent;
  padding-inline: 6px;
  color: var(--ink-inv);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.btn--ghost-light:hover { background: transparent; color: var(--soft-inv); }

/* ─── 05  HERO ──────────────────────────────────────────────────── */

/* Mörkt uppslag. Typen står till vänster, porträttet blöder ut i
   höger kant. Porträttet bär färgen, ytan är monokrom. */
.hero {
  background: var(--bg-inv);
  color: var(--ink-inv);
  padding-bottom: clamp(28px, 5vw, 60px);
}

/* Toppraden. Sticky på mobil, där den annars scrollar bort
   innan läsaren hinner scrolla till portalen. */
.hero__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 12px;
  border-bottom: 1px solid var(--line-inv);
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--bg-inv);
}
.hero__logo {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  flex: 0 0 auto;
}
.hero__logo img {
  height: clamp(34px, 8vw, 44px);
  width: auto;
  background: transparent;
}

/* Navigationen syns när det finns plats. På mobil visas bara
   logotypen och knappen. */
.hero__nav { display: none; }
@media (min-width: 900px) {
  .hero__nav { display: flex; align-items: center; gap: 24px; }
  .hero__nav a {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--soft-inv);
    transition: color .2s ease;
  }
  .hero__nav a:hover { color: var(--ink-inv); }
  .hero__nav a[aria-current="page"] {
    color: var(--ink-inv);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
  }
}

/* CTA i toppen. Pillformen är reserverad för CTA:er. */
.hero__cta {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 20px;
  border: 1.5px solid var(--ink-inv);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.hero__cta:hover { background: var(--ink-inv); color: var(--bg-inv); }

/* Spalten mäts, så rubriken kan skalas efter sin egen bredd. */
.hero__wrap { container-type: inline-size; }

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 48px);
  align-items: end;
  padding-top: clamp(30px, 5vw, 64px);
}
.hero__type { min-width: 0; }

/* Brödsmulor. */
.hero__crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--soft-inv);
}
.hero__crumb a { color: var(--soft-inv); }
.hero__crumb a:hover { color: var(--ink-inv); }

/* Rubriken. "KRÄNGEL." är 8 tecken, alltså det längsta ordet.
   Delar spaltens bredd med 14, så bryts raden aldrig mitt i ett
   ord, oavsett skärmbredd. */
.hero__head {
  font-size: clamp(34px, calc((100cqw - 2 * var(--pad)) / 14), 92px);
  margin-top: clamp(14px, 2vw, 24px);
}

/* Den handritade markeringen under rubriken. Accenten används
   en gång i hero, och detta är den gången. */
.hero__mark {
  display: block;
  width: clamp(110px, 42%, 190px);
  height: auto;
  margin-top: -6px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero__lead {
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.5;
  max-width: 42ch;
  margin-top: clamp(18px, 2.4vw, 26px);
  color: var(--ink-inv);
}

/* Porträttet. Det blöder ut i höger kant på stor skärm.
   Källan är 400 x 600, så den visas nästan i naturlig storlek.
   Hellre en skarp bild i rätt storlek än en suddig bild i fel. */
.hero__figure {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 380px;
}
.hero__figure img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--bg-inv);
}

/* Handnoten pekar ner mot portalen. Den extra paddingen ger den
   snedda handskriften utrymme, så att den inte sticker ut i
   porträttbandet under. */
.hero__note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: clamp(22px, 3vw, 34px);
  padding-bottom: 22px;
  max-width: 34ch;
}
.hero__note .hand {
  color: var(--soft-inv);
  transform: rotate(-1.5deg);
  transform-origin: left top;
}
.hero__arrow {
  flex: 0 0 auto;
  width: 52px;
  height: 34px;
  margin-top: 6px;
  fill: none;
  stroke: var(--soft-inv);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 40%);
    gap: clamp(30px, 4vw, 64px);
  }
  /* Porträttet går rakt ut i höger kant. */
  .hero__wrap { padding-right: 0; }
  .hero__figure {
    justify-self: end;
    max-width: 440px;
    width: 100%;
  }
  .hero__note { padding-right: var(--pad); }
}

/* ─── 06  PORTRÄTTBAND ─────────────────────────────────────────── */

/* Tre porträtt i en rad, direkt under hero. Bandet bryter upp
   den mörka ytan och visar resultat tidigt. Cropen tar ansiktet,
   inte hela kroppen. */
.band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-inv);
  border-top: 1px solid var(--line-inv);
}
.band img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 22%;
  background: var(--bg-inv);
}

/* ─── 07  SYSTEMET, PORTALEN OCH STEGEN ────────────────────────── */

/* Varm yta. Systemet är den stora förklaringen, och den får en
   egen ton så att den skiljer sig från pappersytan. */
.screen--cream {
  background: var(--cream);
  padding-block: clamp(40px, 7vw, 96px);
}

/* Rubriken och förklaringen står sida vid sida på stor skärm.
   Spåren är minmax(0, 1fr), så att portalens flikar inte tvingar
   spåret att växa på mobil. */
.system {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 3.4vw, 44px);
}
.system__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 2vw, 34px);
  container-type: inline-size;
}
/* På stor skärm står rubriken och förklaringen sida vid sida. */
@media (min-width: 900px) {
  .system {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
    gap: clamp(30px, 4vw, 60px);
    align-items: start;
  }
  .system__intro {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
  .laptop { grid-column: 1; }
  .steps { grid-column: 2; grid-row: 2; }
}
.system__head {
  font-size: clamp(32px, calc((100cqw - 34px) / 13), 64px);
  margin: 0;
}
.system__copy { min-width: 0; }
.system__lead {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.55;
  max-width: 46ch;
}
.system__note {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--soft);
  margin-top: 14px;
  max-width: 42ch;
}

/* ─── Laptopmocken ──────────────────────────────────────────────── */

/* Portalen är en mörk låda, som en skärm i ett mörkt rum.
   Ingen skugga. Djupet kommer från kontrasten. */
.laptop { max-width: 1000px; min-width: 0; }
.laptop__screen {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px;
  min-width: 0;
}
.laptop__base {
  height: 12px;
  background: var(--line);
  clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
}

.portal {
  background: var(--bg-inv);
  color: var(--ink-inv);
  border: 1px solid var(--line-inv);
  border-radius: 4px;
  overflow: hidden;
  min-width: 0;
}

.portal__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px clamp(14px, 2vw, 22px);
  border-bottom: 1px solid var(--line-inv);
}
.portal__id { display: flex; align-items: center; gap: 12px; }
/* Avataren är ett monogram, inte ett foto. Fiktivt bolag. */
.portal__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .02em;
  flex: 0 0 auto;
}
.portal__company {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
}
.portal__sub { display: block; }
.portal__demo { color: var(--soft-inv); }

/* Flikar. */
.portal__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 0 clamp(8px, 1.4vw, 16px);
  min-width: 0;
  border-bottom: 1px solid var(--line-inv);
}
.portal__tab {
  position: relative;
  padding: 13px 11px 12px;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--soft-inv);
  transition: color .2s ease;
}
.portal__tab:hover { color: var(--ink-inv); }
.portal__tab.is-on { color: var(--ink-inv); }
/* Den aktiva fliken markeras med en hårlinje, inte en bakgrund.
   Här är den neutral: accenten i portalen reserveras för siffran
   som väntar. En accent per vy. */
.portal__tab.is-on::after {
  content: '';
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: -1px;
  height: 2px;
  background: var(--ink-inv);
}

.portal__panel {
  padding: clamp(16px, 2.2vw, 26px);
  outline: none;
}
.portal__panel[hidden] { display: none; }

.portal__sum {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 14px;
}
.portal__hint {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--soft-inv);
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--line-inv);
}

/* Siffrorna. */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-inv);
  border: 1px solid var(--line-inv);
}
.stat {
  background: var(--bg-inv);
  padding: clamp(13px, 1.8vw, 18px);
}
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.stat__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--soft-inv);
  margin-top: 9px;
}
/* Accenten markerar en enda sak i vyn: siffran som väntar. */
.stat--accent .stat__num { color: var(--accent); }

@media (min-width: 620px) {
  .stats { grid-template-columns: repeat(5, 1fr); }
}

/* Händelseflöde, förloppsrad och levererade bilder. */
.portal__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2.4vw, 28px);
  margin-top: clamp(18px, 2.4vw, 26px);
  padding-top: clamp(18px, 2.4vw, 24px);
  border-top: 1px solid var(--line-inv);
}
@media (min-width: 780px) {
  .portal__cols { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .shots { grid-column: 1 / -1; }
}

.feed__head { color: var(--soft-inv); margin-bottom: 11px; }
.feed__list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-inv);
}
.feed__list li:first-child { border-top: 1px solid var(--line-inv); }
.feed__what {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15px;
}
.feed__when { flex: 0 0 auto; color: var(--soft-inv); }

.prog__row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.prog__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.prog__bar {
  flex: 1 1 auto;
  height: 6px;
  background: var(--line-inv);
  overflow: hidden;
}
.prog__fill {
  display: block;
  height: 100%;
  background: var(--ink-inv);
}
.prog__of { flex: 0 0 auto; color: var(--soft-inv); }
.prog__text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--soft-inv);
  margin-top: 12px;
}

.shots__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.shots__list img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--line-inv);
}

/* Listrader i de övriga vyerna. */
.rows { border-top: 1px solid var(--line-inv); }
.row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 4px 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-inv);
}
.row__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
}
.row__meta {
  grid-column: 1;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;
  color: var(--soft-inv);
}
.row__state {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--soft-inv);
  white-space: nowrap;
}
.row__state--wait { color: var(--ink-inv); font-weight: 500; }

@media (min-width: 620px) {
  .row {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) auto;
  }
  .row__meta { grid-column: 2; }
  .row__state { grid-column: 3; grid-row: 1; }
}

.demo__foot {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--soft);
  margin-top: 16px;
  max-width: 60ch;
}
.demo__foot .meta { display: block; margin-bottom: 6px; }

/* ─── Så går det till ───────────────────────────────────────────── */

/* Sidokolumnen bredvid portalen. Ett steg per rad, med en markering
   som visar vad som är gjort och vad som väntar. */
.steps { align-self: start; min-width: 0; }
.steps__head { color: var(--soft); margin-bottom: 14px; }

.steps__list { counter-reset: step; }
.step {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 14px;
  padding-bottom: 20px;
}
/* Linjen mellan markeringarna. */
.step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 28px;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
.step__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
}
.step__mark svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Sista steget är inte gjort än. Markeringen är därför tom. */
.step--todo .step__mark { border-color: var(--line); background: transparent; }
/* På mobil visas siffrorna i stället för kryssen. */
.step__mark::after {
  counter-increment: step;
  content: counter(step);
  display: none;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
}

.step__body { display: block; }
.step__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
}
.step__text {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--soft);
  margin-top: 5px;
}

@media (max-width: 899px) {
  .step__mark svg { display: none; }
  .step__mark::after { display: block; }
}

/* ─── 08  FÖRDELAR ──────────────────────────────────────────────── */

/* Fyra fördelar i en rad, med knappen bredvid. */
.screen--paper { padding-block: clamp(34px, 5vw, 72px); }

.fordel {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 34px);
  align-items: start;
}
.fordel__item { min-width: 0; }
.fordel__icon {
  display: block;
  width: 26px;
  height: 26px;
  margin-bottom: 14px;
}
.fordel__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fordel__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: 0;
}
.fordel__body {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--soft);
  margin-top: 8px;
}
.fordel__cta { align-self: center; }

@media (min-width: 700px) {
  .fordel {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .fordel__cta { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .fordel {
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(180px, auto);
    align-items: start;
  }
  .fordel__cta {
    grid-column: auto;
    justify-self: end;
    align-self: center;
  }
}

/* ─── 09  JÄMFÖRELSE ────────────────────────────────────────────── */

/* Mörk rad. Utan mig, med mig. */
.compare {
  background: var(--bg-inv);
  color: var(--ink-inv);
  padding-block: clamp(38px, 6vw, 80px);
}
.compare__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line-inv);
  border: 1px solid var(--line-inv);
}
@media (min-width: 760px) {
  .compare__grid { grid-template-columns: repeat(2, 1fr); }
}
.compare__col {
  background: var(--bg-inv);
  padding: clamp(22px, 3vw, 40px);
}
.compare__label { color: var(--soft-inv); margin-bottom: 16px; }
.compare__big {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, calc((100vw - 2 * var(--pad)) / 17), 62px);
  line-height: 1.02;
  letter-spacing: -.04em;
  text-transform: uppercase;
}
.compare__text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: var(--soft-inv);
  margin-top: 14px;
}
/* Accenten i den här vyn: den enda gången. */
.compare__big--accent { color: var(--accent); }

/* ─── 10  KONTAKT ───────────────────────────────────────────────── */

.contact { padding-block: clamp(38px, 6vw, 84px); }
.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 60px);
  container-type: inline-size;
}
.contact__head {
  font-size: clamp(30px, calc((100cqw - 40px) / 12.5), 64px);
  margin-top: 0;
}
.contact__lead {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.55;
  max-width: 42ch;
  margin-top: clamp(16px, 2vw, 22px);
}

.contact__ways {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  align-self: start;
}
.contact__way {
  display: block;
  background: var(--bg);
  padding: clamp(16px, 2vw, 22px);
  transition: background .2s ease;
}
.contact__way:hover { background: var(--cream); }
.contact__value {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  margin-top: 7px;
}

@media (min-width: 860px) {
  .contact__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: start;
  }
}

/* ─── 11  SIDFOT ────────────────────────────────────────────────── */

.foot {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2.4vw, 28px);
  align-items: center;
  padding-block: clamp(24px, 3.4vw, 38px);
  background: var(--bg-inv);
  color: var(--ink-inv);
  border-top: 1px solid var(--line-inv);
}
.foot__logo {
  width: auto;
  height: clamp(34px, 6vw, 44px);
  background: transparent;
}
.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}
.foot__links a {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--soft-inv);
  transition: color .2s ease;
}
.foot__links a:hover { color: var(--ink-inv); }
.foot__meta { color: var(--soft-inv); }

@media (min-width: 900px) {
  .foot {
    grid-template-columns: auto 1fr auto;
    gap: 28px;
  }
  .foot__links { justify-content: center; }
}

/* ─── 12  REVEAL ────────────────────────────────────────────────── */

/* Rörelse förtydligar. Elementet lyfter sig till sitt läge.
   Döljs bara om JavaScript finns, annars ska innehållet syns. */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity .7s var(--ease),
    transform .7s var(--ease);
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ─── 13  RESPONSIVT ───────────────────────────────────────────── */

@media (max-width: 899px) {
  /* På mobil går portalens flikar i en egen scrollrad, så att
     de inte bryter layouten. */
  .portal__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .portal__tabs::-webkit-scrollbar { display: none; }
  .portal__tab { white-space: nowrap; }
}

@media (max-width: 619px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  /* Fem siffror i två kolumner lämnar en tom ruta. Den sista
     siffran tar därför hela bredden. */
  .stat--accent { grid-column: 1 / -1; }
  .shots__list { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}