/* Startsidan. Bara för /, gästsidan på /e/{slug} använder inte den här filen.

   Två lägen:
   1. Grundläget, utan animationer. Allt syns och går att läsa, även i iOS 15, i webbläsare utan
      scrolldrivna animationer och vid reducerad rörelse. Lösningen visas som fem steg under
      varandra, varje steg med sin egen telefon.
   2. Scrolldrivet läge, längst ner i filen, bara när webbläsaren stöder animation-timeline OCH
      användaren inte bett om reducerad rörelse. Då står telefonen still och skärmen byts när man
      scrollar. Animationerna följer scrollen och körs utanför huvudtråden.
   Inga animationer finns utanför det blocket, bara korta övergångar för tryck och hovring. */

:root {
  --bg: #fbfaf8;
  --bg-tint: #f2eee8;
  --ink: #1b1a18;
  --muted: #6b6660;
  --line: rgba(27, 26, 24, 0.12);
  --accent: #8a6a47;
  --dark: #0e0d0c;
  --dark-ink: #f4f1ec;
  --dark-muted: #aaa39a;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --topp: 52px;
}

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

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

section[id] {
  scroll-margin-top: var(--topp);
}

.bredd {
  width: min(100% - max(20px, env(safe-area-inset-left)) - max(20px, env(safe-area-inset-right)), 1080px);
  margin-inline: auto;
}

.rubrik {
  max-width: 17ch;
  font-size: clamp(34px, 6.4vw, 68px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.ingress {
  max-width: 34ch;
  margin-top: 18px;
  font-size: clamp(19px, 2.3vw, 23px);
  line-height: 1.4;
  color: var(--muted);
}

.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.knapp-stor {
  min-height: 64px;
  padding: 0 40px;
  font-size: 20px;
}

/* ---------- Toppen ---------- */

.topp {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--topp);
  padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
  background: rgba(251, 250, 248, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(27, 26, 24, 0.06);
  font-size: 15px;
}

.topp-namn {
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.topp-lank {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  /* Mörkare än --muted, så att kontrasten räcker även när toppraden ligger över den mörka sektionen. */
  color: #58534e;
  text-decoration: none;
}

/* ---------- 1. Hero ---------- */

.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: calc(100vh - var(--topp));
  min-height: calc(100svh - var(--topp));
  padding: 64px 20px 96px;
  text-align: center;
  overflow: hidden;
}

.hero-namn {
  margin-bottom: 14px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--accent);
}

.hero-rubrik {
  max-width: 11ch;
  margin-inline: auto;
  font-size: clamp(48px, 11vw, 116px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.048em;
  text-wrap: balance;
}

.hero-text {
  max-width: 32ch;
  margin: 26px auto 36px;
  font-size: clamp(19px, 2.4vw, 23px);
  line-height: 1.4;
  color: var(--muted);
  text-wrap: pretty;
}

.hero-scrolla {
  display: none;
}

/* ---------- 2. Problemet ---------- */

.problem {
  padding-block: clamp(96px, 16vw, 180px);
  background: var(--bg-tint);
}

.problem-rader {
  display: grid;
  gap: 48px;
  margin-top: 48px;
}

.bubblor {
  position: relative;
  height: 300px;
  max-width: 420px;
}

.bubbla {
  position: absolute;
  max-width: 76%;
  padding: 10px 14px;
  border-radius: 20px 20px 20px 6px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(27, 26, 24, 0.08);
  font-size: 15px;
  line-height: 1.35;
}

.bubbla.egen {
  border-radius: 20px 20px 6px 20px;
  background: #e2f1d6;
}

.b1 { top: 0; left: 0; }
.b2 { top: 58px; right: 0; }
.b3 { top: 118px; left: 6%; }
.b4 { top: 180px; right: 8%; }
.b5 { top: 240px; left: 14%; }

.problem-lista li {
  padding-block: 18px;
  border-top: 1px solid var(--line);
  font-size: clamp(24px, 3.4vw, 36px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.problem-lista li:last-child {
  border-bottom: 1px solid var(--line);
}

.problem-slut {
  max-width: 30ch;
  margin-top: 48px;
  font-size: clamp(20px, 2.5vw, 25px);
  line-height: 1.4;
  color: var(--muted);
}

@media (min-width: 860px) {
  .problem-rader {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: 72px;
  }
}

/* ---------- 3. Lösningen ---------- */

.losning {
  padding-top: clamp(96px, 14vw, 160px);
  background: var(--dark);
  color: var(--dark-ink);
}

.losning .ingress {
  color: var(--dark-muted);
}

.steg {
  display: grid;
  gap: 104px;
  width: min(100% - max(20px, env(safe-area-inset-left)) - max(20px, env(safe-area-inset-right)), 1080px);
  margin: 72px auto 0;
  padding-bottom: clamp(96px, 14vw, 160px);
}

.steg-kort {
  display: grid;
  justify-items: center;
  gap: 32px;
  text-align: center;
}

.steg-telefon {
  width: min(280px, 72vw);
}

.steg-text {
  max-width: 32ch;
}

.steg-nummer {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dark-muted);
}

.steg-text h3 {
  margin: 8px 0 12px;
  font-size: clamp(32px, 4.6vw, 50px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.steg-text p:last-child {
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.45;
  color: var(--dark-muted);
}

@media (min-width: 860px) {
  .steg-kort {
    grid-template-columns: 340px minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    gap: 88px;
    text-align: left;
  }

  .steg-telefon {
    width: 300px;
  }
}

/* Telefonen */

.telefon {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 19.5;
  border-radius: 46px;
  background: #1d1d1f;
  box-shadow: inset 0 0 0 1.5px #3a3a3c, 0 50px 90px -40px rgba(0, 0, 0, 0.8);
}

.telefon::before {
  content: '';
  position: absolute;
  top: 22px;
  left: 50%;
  z-index: 2;
  width: 31%;
  height: 24px;
  border-radius: 20px;
  background: #000;
  transform: translateX(-50%);
}

.skarm {
  position: absolute;
  inset: 11px;
  display: flex;
  flex-direction: column;
  gap: 0.769em;
  overflow: hidden;
  padding: 4.769em 1.385em 1.538em;
  border-radius: 36px;
  background: #fffdf9;
  color: #2b2622;
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
}

.s-liten {
  font-size: 0.808em;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.s-rubrik {
  margin-bottom: 0.133em;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.308em;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
}

.s-schema li {
  display: grid;
  grid-template-columns: 3.385em minmax(0, 1fr);
  padding-block: 0.769em;
  border-top: 1px solid #efe7dc;
}

.s-schema span {
  grid-row: span 2;
  font-weight: 600;
  color: var(--accent);
}

.s-schema strong {
  font-weight: 600;
}

.s-schema em {
  font-size: 0.923em;
  font-style: normal;
  color: #8b8177;
}

.s-val {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.462em;
}

.s-val span {
  padding: 0.692em 0.462em;
  border: 1px solid #e6ddd1;
  border-radius: 0.769em;
  font-weight: 600;
  text-align: center;
}

.s-val .vald {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.s-falt {
  display: grid;
  gap: 0.308em;
}

.s-etikett {
  font-size: 0.769em;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8b8177;
}

.s-input,
.s-stegare {
  padding: 0.692em 0.923em;
  border: 1px solid #e6ddd1;
  border-radius: 0.769em;
  background: #fff;
}

.s-stegare {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.385em;
}

.s-stegare span {
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  border: 1px solid #e6ddd1;
  border-radius: 50%;
  color: var(--accent);
}

.s-knapp {
  margin-top: auto;
  padding: 0.923em;
  border-radius: 0.923em;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  text-align: center;
}

.s-lista {
  display: grid;
  gap: 0.615em;
}

.s-lista li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.615em;
  padding: 0.923em;
  border: 1px solid #efe7dc;
  border-radius: 0.923em;
  background: #fff;
}

.s-tagen {
  font-size: 0.846em;
  color: #8b8177;
}

.s-ledig {
  font-size: 0.846em;
  font-weight: 600;
  color: var(--accent);
}

.skarm-mork {
  justify-content: center;
  align-items: center;
  background: #2a2420;
  color: #fbf6ef;
  text-align: center;
}

.skarm-mork .s-liten {
  color: #d9b88f;
}

.s-nedrakning {
  display: grid;
  gap: 1.077em;
  margin-block: 0.923em;
}

.s-nedrakning strong {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 4.462em;
  font-weight: 600;
  line-height: 0.9;
}

.s-nedrakning span {
  font-size: 0.846em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #bfb2a3;
}

.s-under {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.538em;
}

.skarm-karta {
  gap: 0;
  padding: 0;
}

.s-karta {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: #e8eee4;
}

.s-vag {
  position: absolute;
  height: 0.769em;
  border-radius: 0.385em;
  background: #fff;
}

.v1 { top: 38%; left: -10%; width: 130%; transform: rotate(-14deg); }
.v2 { top: 10%; left: 42%; width: 90%; transform: rotate(72deg); transform-origin: 0 0; }
.v3 { top: 66%; left: -20%; width: 80%; transform: rotate(24deg); }

.s-sjo {
  position: absolute;
  right: -18%;
  bottom: 8%;
  width: 70%;
  height: 34%;
  border-radius: 50%;
  background: #cfe0ea;
}

.s-nal {
  position: absolute;
  top: 44%;
  left: 50%;
  width: 2em;
  height: 2em;
  border: 0.462em solid #fff;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0.462em 1.231em rgba(0, 0, 0, 0.25);
  transform: translate(-50%, -50%);
}

.s-plats {
  position: relative;
  display: grid;
  gap: 0.462em;
  margin-top: -1.692em;
  padding: 1.385em 1.385em 1.538em;
  border-radius: 1.692em 1.692em 0 0;
  background: #fffdf9;
}

.s-adress {
  color: #8b8177;
}

.s-plats .s-knapp {
  margin-top: 0.615em;
}

/* ---------- 4. Exempel ----------
   Färger och typsnitt från temana i public/examples, så att korten liknar sidorna. */

.exempel {
  padding-block: clamp(96px, 14vw, 160px);
}

.exempel-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 20px;
  margin-top: 48px;
}

.exempel-kort a {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 380px;
  padding: 20px 20px 24px;
  border-radius: 28px;
  background: var(--kort-bg);
  color: var(--kort-ink);
  text-decoration: none;
}

.mini {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px 18px;
  border-radius: 18px;
  background: var(--kort-yta);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.mini-rubrik {
  margin-bottom: 6px;
  text-align: center;
  font-family: var(--kort-font);
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  color: var(--kort-accent);
}

.mini-rad {
  width: 72%;
  height: 8px;
  border-radius: 4px;
  background: currentColor;
  opacity: 0.12;
}

.mini-rad.kort {
  width: 46%;
}

.mini-knapp {
  width: 58%;
  height: 32px;
  margin-top: 10px;
  border-radius: 999px;
  background: var(--kort-accent);
}

.exempel-typ {
  margin-top: 20px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.exempel-namn {
  opacity: 0.72;
}

.exempel-lank {
  margin-top: 10px;
  color: var(--kort-lank, var(--kort-accent));
  font-weight: 600;
}

.exempel-lank::after {
  content: ' \203A';
}

.tema-brollop {
  --kort-bg: #e6e9df;
  --kort-yta: #f7f5ef;
  --kort-ink: #26302a;
  --kort-accent: #5f7a5c;
  --kort-lank: #4a6247;
  --kort-font: 'Cormorant Garamond', Georgia, serif;
}

.tema-babyshower {
  --kort-bg: #f6e2d8;
  --kort-yta: #fff6f0;
  --kort-ink: #4a2f2a;
  --kort-accent: #a95b46;
  --kort-lank: #8f4633;
  --kort-font: 'Playfair Display', Georgia, serif;
}

.tema-student {
  --kort-bg: #0e1628;
  --kort-yta: #15213a;
  --kort-ink: #eef1f6;
  --kort-accent: #f2b84b;
  --kort-font: 'Archivo', ui-sans-serif, system-ui, sans-serif;
}

/* ---------- 5. Så funkar det ---------- */

.satt {
  padding-block: clamp(96px, 14vw, 160px);
  background: var(--bg-tint);
}

.satt-lista {
  display: grid;
  gap: 40px;
  margin-top: 56px;
}

.satt-lista li {
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.satt-nummer {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 20px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  font-weight: 700;
}

.satt-lista h3 {
  font-size: clamp(24px, 2.6vw, 28px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.satt-lista p {
  max-width: 32ch;
  margin-top: 10px;
  color: var(--muted);
}

@media (min-width: 860px) {
  .satt-lista {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
}

/* ---------- 6. Pris ---------- */

.pris {
  padding-block: clamp(96px, 14vw, 160px);
}

.pris-kort {
  max-width: 460px;
  margin-top: 40px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: #fff;
}

.pris-belopp {
  font-size: clamp(34px, 5vw, 48px);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.pris-ingar {
  margin-top: 12px;
  color: var(--muted);
}

/* ---------- 7. Avslut ---------- */

.avslut {
  padding-block: clamp(120px, 18vw, 220px);
  text-align: center;
}

.avslut .rubrik {
  max-width: 14ch;
  margin-inline: auto;
}

.avslut .knapp-stor {
  margin-top: 40px;
}

.kontaktvag {
  margin-top: 14px;
  color: var(--muted);
}

.logga-in {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 72px;
  font-size: 14px;
  color: var(--muted);
  text-underline-offset: 3px;
}

.fot {
  display: grid;
  gap: 4px;
  padding: 32px max(20px, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}

.fot p:first-child {
  font-weight: 600;
  color: var(--ink);
}

/* ---------- Tryck och hovring, bara utan reducerad rörelse ---------- */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .knapp {
    transition: transform 160ms var(--ease-out), background-color 160ms ease;
  }

  .knapp:active {
    transform: scale(0.97);
  }

  .exempel-kort a {
    transition: transform 300ms var(--ease-out);
  }

  .exempel-kort a:active {
    transform: scale(0.98);
  }
}

@media (hover: hover) and (pointer: fine) {
  .knapp:hover {
    background: #34312d;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .exempel-kort a:hover {
    transform: translateY(-4px);
  }
}

/* ================================================================================================
   Scrolldrivet läge. Allt nedan gäller bara med stöd för animation-timeline och utan reducerad
   rörelse. Utan stöd hoppas hela blocket över och sidan står stilla.
   ================================================================================================ */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Hero: rubriken drar sig undan när man börjar scrolla. */
    .hero-inre {
      animation: hero-ut linear both;
      animation-timeline: scroll(root);
      animation-range: 0 85vh;
    }

    .hero-scrolla {
      position: absolute;
      bottom: 28px;
      left: 50%;
      display: block;
      width: 1.5px;
      height: 44px;
      overflow: hidden;
      background: var(--line);
      transform: translateX(-50%);
      animation: tona-ut linear both;
      animation-timeline: scroll(root);
      animation-range: 0 30vh;
    }

    .hero-scrolla span {
      display: block;
      width: 100%;
      height: 40%;
      background: var(--ink);
      animation: scrolla 1.8s var(--ease-out) infinite;
    }

    /* Rubriker, rader och kort glider in när de kommer in i bild. */
    .avslojas {
      animation: avslojas linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 28%;
    }

    /* Problemet: meddelandena flyter isär medan man scrollar förbi. */
    .bubbla {
      animation: bubbla linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    .b1 { --dx: -14px; --dy: 28px; --r: -3deg; }
    .b2 { --dx: 18px; --dy: 18px; --r: 2deg; }
    .b3 { --dx: -8px; --dy: 40px; --r: 4deg; }
    .b4 { --dx: 22px; --dy: 12px; --r: -2deg; }
    .b5 { --dx: -18px; --dy: 32px; --r: 3deg; }

    /* ---- Lösningen: telefonen står still, skärm och text byts ----
       Alla fem telefoner och texter läggs i samma rutnätscell och står fast med sticky.
       .steg är 5 skärmhöjder hög och har en egen tidslinje. Varje skärm syns i sin femtedel.
       Marginalerna gör att allt fastnar och släpper på samma gång: varje element slutar
       en skärmhöjd under sin plats, så att texten aldrig glider över telefonen.
       --tb är telefonens bredd, --tt avståndet från toppen. Telefonen är 2,1667 gånger så hög som bred. */
    .steg {
      --tb: min(270px, calc((100svh - var(--topp)) * 0.26));
      --tt: calc(var(--topp) + 2svh);
      --text-top: calc(var(--tt) + var(--tb) * 2.1667 + 2.5svh);
      --text-h: calc(100svh - var(--text-top));
      --text-justify: flex-start;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: repeat(5, 100svh);
      gap: 0;
      margin-top: 0;
      padding-bottom: 0;
      view-timeline: --steg block;
    }

    .steg-kort {
      display: contents;
    }

    .steg::before,
    .steg::after,
    .steg-telefon {
      position: sticky;
      top: var(--tt);
      grid-column: 1;
      grid-row: 1 / -1;
      align-self: start;
      justify-self: center;
      width: var(--tb);
      margin-bottom: calc(100svh - var(--tt) - var(--tb) * 2.1667);
    }

    /* Ramen och kameran ritas en gång, telefonerna ovanpå är genomskinliga. */
    .steg::before {
      content: '';
      aspect-ratio: 9 / 19.5;
      border-radius: calc(var(--tb) * 0.164);
      background: #1d1d1f;
      box-shadow: inset 0 0 0 1.5px #3a3a3c, 0 50px 90px -40px rgba(0, 0, 0, 0.8);
    }

    .steg::after {
      content: '';
      z-index: 3;
      width: calc(var(--tb) * 0.31);
      height: calc(var(--tb) * 0.086);
      top: calc(var(--tt) + var(--tb) * 0.079);
      margin-top: calc(var(--tb) * 0.079);
      margin-bottom: calc(100svh - var(--tt) - var(--tb) * 0.165);
      border-radius: 20px;
      background: #000;
    }

    .steg-telefon .telefon {
      background: transparent;
      box-shadow: none;
    }

    /* Skärmens innehåll är i em och följer telefonens bredd, 13px vid 280px. */
    .steg .skarm {
      inset: calc(var(--tb) * 0.039);
      border-radius: calc(var(--tb) * 0.128);
      font-size: calc(var(--tb) * 0.0464);
    }

    .steg-telefon .telefon::before {
      content: none;
    }

    .steg-text {
      position: sticky;
      top: var(--text-top);
      grid-column: 1;
      grid-row: 1 / -1;
      align-self: start;
      justify-self: center;
      display: flex;
      flex-direction: column;
      justify-content: var(--text-justify);
      height: var(--text-h);
      max-width: 34ch;
      margin-top: calc(var(--text-top) - var(--tt));
      margin-bottom: calc(100svh - var(--text-top) - var(--text-h));
      padding-inline: 4px;
    }

    .steg-text h3 {
      font-size: clamp(28px, 4.6vw, 50px);
      margin-block: 4px 8px;
    }

    .steg-kort:nth-child(1) :is(.skarm, .steg-text) { animation-name: steg-1; }
    .steg-kort:nth-child(2) :is(.skarm, .steg-text) { animation-name: steg-2; }
    .steg-kort:nth-child(3) :is(.skarm, .steg-text) { animation-name: steg-3; }
    .steg-kort:nth-child(4) :is(.skarm, .steg-text) { animation-name: steg-4; }
    .steg-kort:nth-child(5) :is(.skarm, .steg-text) { animation-name: steg-5; }

    .steg .skarm,
    .steg .steg-text {
      animation-duration: 1ms;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --steg;
      animation-range: contain 0% contain 100%;
    }

    /* Bredd, eller liggande läge med låg höjd: telefon och text sida vid sida, så att texten får plats. */
    @media (min-width: 860px), (orientation: landscape) and (max-height: 500px) {
      .steg {
        --tb: min(330px, calc((100svh - var(--topp)) * 0.38));
        --tt: calc(var(--topp) + (100svh - var(--topp)) / 2 - var(--tb) * 1.0833);
        --text-top: var(--tt);
        --text-h: calc(var(--tb) * 2.1667);
        --text-justify: center;
        grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
        column-gap: clamp(48px, 8vw, 120px);
        width: min(100% - 80px, 1080px);
      }

      .steg-text {
        grid-column: 2;
        justify-self: start;
        text-align: left;
      }
    }

    @media (orientation: landscape) and (max-height: 500px) {
      .steg {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        column-gap: 32px;
        width: min(100% - max(20px, env(safe-area-inset-left)) - max(20px, env(safe-area-inset-right)), 1080px);
      }

      .steg-text h3 {
        font-size: 26px;
      }

      .steg-text p:last-child {
        font-size: 16px;
      }
    }

    /* Så funkar det: stegen kommer in ett i taget. */
    .satt-lista li:nth-child(2) {
      animation-range: entry 10% cover 34%;
    }

    .satt-lista li:nth-child(3) {
      animation-range: entry 20% cover 40%;
    }

    @keyframes hero-ut {
      to { opacity: 0; transform: translateY(-5vh) scale(0.94); }
    }

    @keyframes tona-ut {
      to { opacity: 0; }
    }

    @keyframes scrolla {
      from { transform: translateY(-100%); }
      to { transform: translateY(250%); }
    }

    @keyframes avslojas {
      from { opacity: 0; transform: translateY(32px); }
    }

    @keyframes bubbla {
      from { opacity: 0; transform: translate(calc(var(--dx) * -1), calc(var(--dy) * -1)) rotate(calc(var(--r) * -1)); }
      30% { opacity: 1; }
      to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); }
    }

    /* Varje steg äger en femtedel av tidslinjen. Bytet sker mitt emellan två steg. */
    @keyframes steg-1 {
      0%, 10% { opacity: 1; transform: none; }
      15%, 100% { opacity: 0; transform: translateY(-14px) scale(0.985); }
    }

    @keyframes steg-2 {
      0%, 10% { opacity: 0; transform: translateY(14px) scale(0.985); }
      15%, 35% { opacity: 1; transform: none; }
      40%, 100% { opacity: 0; transform: translateY(-14px) scale(0.985); }
    }

    @keyframes steg-3 {
      0%, 35% { opacity: 0; transform: translateY(14px) scale(0.985); }
      40%, 60% { opacity: 1; transform: none; }
      65%, 100% { opacity: 0; transform: translateY(-14px) scale(0.985); }
    }

    @keyframes steg-4 {
      0%, 60% { opacity: 0; transform: translateY(14px) scale(0.985); }
      65%, 85% { opacity: 1; transform: none; }
      90%, 100% { opacity: 0; transform: translateY(-14px) scale(0.985); }
    }

    @keyframes steg-5 {
      0%, 85% { opacity: 0; transform: translateY(14px) scale(0.985); }
      90%, 100% { opacity: 1; transform: none; }
    }
  }
}