/* Frog Fitness, ny stil (v5, 2026-10-30/31).
   Efter en extern designers koncept som Marcus valde: mörkt sidhuvud, rubriker
   i Kanit Black Italic i versaler (designerns typsnitt), mörka rubrikband med suddigt gym, vita
   sektioner med riktiga skärmbilder och kort som lyser upp i grönt.

   Bygget lägger in filen och klassen v5 på body på varje sida utom de
   juridiska dokumenten (injectDesignLayer i scripts/build-website.mjs).
   Startsidan, appsidan och PT-sidan har dessutom body.landing och egna
   block med klassprefixet lp-. Filen laddas sist, efter site.css och
   frog.css, och varje regel börjar med .v5 så att den vinner över dem.

   Medvetet utelämnat, efter genomgången av andra apparnas sidor: glödande
   blobbar, parallax, siffror som räknas upp och etiketter ovanför rubrikerna. */
.v5 {
  --lp-ink: #0d0f0e;
  --lp-paper: #ffffff;
  --lp-soft: #f4f6f5;
  --lp-text: #111413;
  --lp-muted: #5c6560;
  --lp-hero-text: #f3f6f4;
  --lp-hero-muted: #c9d2cc;
  --lp-green: #22c96b;
  --lp-green-ink: #062814;
  --lp-line: #e6eae8;
  --lp-line-dark: rgba(255, 255, 255, 0.28);
  --lp-head: "Kanit", "Arial Black", Arial, sans-serif;
  background: var(--lp-paper);
}

/* ---------- Sidhuvudet blir mörkt på de här sidorna ---------- */
.v5 .header {
  background: var(--lp-ink);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.v5 .header.scrolled { background: rgba(13, 15, 14, 0.97); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35); }
.v5 .header .brand,
.v5 .header .brand-name { color: var(--lp-hero-text); }
.v5 .header .nav-quiet,
.v5 .header .lang-opt { color: var(--lp-hero-muted); }
.v5 .header .lang-opt.active,
.v5 .header a.lang-opt:hover,
.v5 .header .nav-quiet:hover { color: #fff; }
.v5 .header .lang-sep { color: rgba(255, 255, 255, 0.3); }
.v5 .header .nav-actions .btn.login {
  color: var(--lp-hero-text);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  padding: 0 20px;
  min-height: 42px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.v5 .header .nav-actions .btn.login:hover { color: var(--lp-hero-text); background: rgba(255, 255, 255, 0.1); }
.v5 .header .nav-actions .btn.primary {
  background: var(--lp-green);
  border-color: var(--lp-green);
  color: var(--lp-green-ink);
  border-radius: 999px;
  padding: 0 22px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.v5 .header .nav-actions .btn.primary:hover { background: #3ad97f; border-color: #3ad97f; }
.v5 .header .menu-btn { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.3); }
/* Bara på dator: under 861 px är menyn en vit panel med mörk text, som förut. */
@media (min-width: 861px) {
  .v5 .header .navlinks,
  .v5 .header .navlinks > a,
  .v5 .header .nav-dropdown > summary {
    color: var(--lp-hero-text);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .v5 .header .navlinks > a:hover,
  .v5 .header .navlinks > a.active,
  .v5 .header .nav-dropdown[open] > summary,
  .v5 .header .nav-dropdown > summary.active { color: var(--lp-green); }
  /* Panelen under Utforska är vit, så texten där är mörk som förut. */
  .v5 .header .nav-dropdown-menu a { text-transform: none; letter-spacing: 0; font-size: 15px; }
}

/* ---------- Typografi ---------- */
/* Rubrikerna i den nya stilen. Inte i artiklarnas brödtext (article-body)
   och inte i h2[data-h3], som bygget gör av kortrubriker på sidor utan h2. */
.v5 main h1,
.v5 main h2:not(.article-body h2):not([data-h3]),
.v5 main .lp-card h3 {
  font-family: var(--lp-head);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1;
  text-wrap: balance;
}
.landing main h1,
.landing main h2,
.landing main .lp-card h3 { margin: 0; }
.v5 .lp-hl { color: var(--lp-green); }

/* ---------- Hjälten ---------- */
/* Bilden blir högst 1920 px bred (Marcus 2026-10-31). På större skärmar
   ligger den i mitten och resten är svart, med en mjuk övergång i kanterna. */
.v5 .lp-hero {
  position: relative;
  overflow: hidden;
  color: var(--lp-hero-text);
  background: #000;
}
.v5 .lp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  width: min(100%, 1920px);
  margin-inline: auto;
  background:
    linear-gradient(90deg, rgba(8, 10, 9, 0.72) 0%, rgba(8, 10, 9, 0.3) 45%, rgba(8, 10, 9, 0) 100%),
    url("/assets/img/photos/hero-gym-floor.jpg") center 70% / cover no-repeat;
}
@media (min-width: 1921px) {
  .v5 .lp-hero::before {
    background:
      linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 0) 88%, #000 100%),
      linear-gradient(90deg, rgba(8, 10, 9, 0.72) 0%, rgba(8, 10, 9, 0.3) 45%, rgba(8, 10, 9, 0) 100%),
      url("/assets/img/photos/hero-gym-floor.jpg") center 70% / cover no-repeat;
  }
}
.v5 .lp-hero > .wrap { position: relative; }
.v5 .lp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: end;
  gap: 24px;
  min-height: 760px;
  padding-top: 40px;
}
.v5 .lp-hero-copy { align-self: center; padding-bottom: 60px; }
.v5 .lp-hero h1 { font-size: clamp(40px, 5.3vw, 76px); color: var(--lp-hero-text); }
.v5 .lp-lead { margin: 26px 0 0; max-width: 34em; font-size: 17px; line-height: 1.55; color: var(--lp-hero-text); }
.v5 .lp-badges { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.v5 .lp-badges img { height: 50px; width: auto; }
.v5 .lp-fine { margin: 22px 0 0; font-size: 13px; color: var(--lp-hero-muted); }
.v5 .lp-fine span + span::before { content: "·"; margin: 0 8px; }

/* Telefonen står på golvet: skugga och en svag spegling under */
.v5 .lp-phone { position: relative; justify-self: center; width: min(340px, 100%); padding-bottom: 120px; }
.v5 .lp-phone .lp-phone-img { position: relative; z-index: 2; width: 100%; height: auto; }
.v5 .lp-phone .lp-phone-refl {
  position: absolute;
  left: 0;
  top: calc(100% - 120px);
  width: 100%;
  height: auto;
  transform: scaleY(-1);
  opacity: 0.22;
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent 22%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent 22%);
  pointer-events: none;
}
.v5 .lp-phone::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 104px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.75), transparent 70%);
  z-index: 1;
}

/* PT-sidan: skärmbild i stället för telefon */
.v5 .lp-hero-grid.lp-wide {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 56px;
  min-height: 620px;
  padding-block: 40px 96px;
}
.v5 .lp-hero-grid.lp-wide .lp-hero-copy { padding-bottom: 0; }
.v5 .lp-shot {
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid #e3e7e5;
  box-shadow: 0 30px 60px -36px rgba(13, 15, 14, 0.35);
}
.v5 .lp-hero .lp-shot { border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9); }

/* Knappar som piller */
.v5 .lp-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.v5 .lp-btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
}
.v5 .lp-btn.lp-solid { background: var(--lp-green); color: var(--lp-green-ink); }
.v5 .lp-btn.lp-solid:hover { background: #3ad97f; }
.v5 .lp-btn.lp-ghost { border: 1.5px solid rgba(255, 255, 255, 0.85); color: var(--lp-hero-text); }
.v5 .lp-btn.lp-ghost:hover { background: rgba(255, 255, 255, 0.1); }

/* ---------- Valet: två fotokort ---------- */
.v5 .lp-choose { padding-block: 110px 120px; text-align: center; color: var(--lp-text); }
.v5 .lp-choose h2 { font-size: clamp(40px, 4.2vw, 58px); }
.v5 .lp-sub { margin: 24px auto 0; max-width: 32em; font-size: 17px; line-height: 1.6; color: var(--lp-muted); }
.v5 .lp-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 400px));
  justify-content: center;
  gap: 16px;
  margin-top: 64px;
  text-align: left;
}
.v5 .lp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 490px;
  padding: 26px;
  border-radius: 20px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background: #1a1d1b center / cover no-repeat;
  isolation: isolate;
}
.v5 .lp-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.55) 40%, rgba(0, 0, 0, 0.05) 75%);
}
.v5 .lp-card.lp-train { background-image: url("/assets/img/photos/woman-barbell.jpg"); }
.v5 .lp-card.lp-coach { background-image: url("/assets/img/photos/pt-coaching.jpg"); }
.v5 .lp-card.lp-wide { min-height: 380px; }
.v5 .lp-tag {
  position: absolute;
  top: 22px;
  left: 22px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--lp-green);
  color: var(--lp-green-ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.v5 main .lp-card h3 { font-size: clamp(30px, 2.8vw, 38px); color: #fff; }
.v5 .lp-card p { margin: 14px 0 0; max-width: 34em; font-size: 14px; color: #d9dfdb; }
.v5 .lp-more {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--lp-line-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.v5 .lp-more svg { width: 18px; height: 18px; }
.v5 .lp-card:hover .lp-more { color: var(--lp-green); }

/* ---------- Faktarad: bara sanna uppgifter ---------- */
.v5 .lp-facts { border-bottom: 1px solid var(--lp-line); }
.v5 .lp-facts ul {
  list-style: none;
  margin: 0 auto;
  padding-block: 36px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.v5 .lp-facts li { border-left: 3px solid var(--lp-green); padding-left: 16px; }
.v5 .lp-facts strong { display: block; font-size: 16px; font-weight: 700; color: var(--lp-text); }
.v5 .lp-facts span { display: block; margin-top: 4px; font-size: 14px; color: var(--lp-muted); }

/* ---------- Funktionsrader ---------- */
.v5 .lp-feature { padding-block: 96px; color: var(--lp-text); }
.v5 .lp-feature + .lp-feature { border-top: 1px solid #eef1ef; }
.v5 .lp-feature.lp-tint { background: var(--lp-soft); }
.v5 .lp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.v5 .lp-feature.lp-flip .lp-media { order: -1; }
.v5 .lp-feature h2,
.v5 .lp-also h2,
.v5 .lp-prices h2,
.v5 .lp-video h2 { font-size: clamp(32px, 3.2vw, 46px); }
.v5 .lp-body { margin: 20px 0 0; max-width: 32em; font-size: 17px; color: var(--lp-muted); }
.v5 .lp-checks { list-style: none; display: grid; gap: 14px; margin: 28px 0 0; padding: 0; }
.v5 .lp-checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; }
.v5 .lp-checks li::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--lp-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23062814' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.v5 .lp-media { display: flex; justify-content: center; }
.v5 .lp-media .lp-device { width: min(320px, 100%); height: auto; }
.v5 .lp-media .lp-laptop { width: 100%; height: auto; }
.v5 .lp-note { margin: 18px 0 0; font-size: 14px; color: var(--lp-muted); }
.v5 .lp-link { display: inline-block; margin-top: 24px; font-weight: 700; color: var(--lp-text); text-decoration: none; border-bottom: 2px solid var(--lp-green); padding-bottom: 2px; }
.v5 .lp-link:hover { color: #0b8f59; }

/* Film (visas bara på språk där filmen finns, se localizeVideos i bygget) */
.v5 .lp-video { padding-block: 96px; background: var(--lp-soft); text-align: center; color: var(--lp-text); }
.v5 .lp-video video { margin-top: 40px; width: 100%; height: auto; display: block; border-radius: 14px; }

/* ---------- Ingår också ---------- */
.v5 .lp-also { padding-block: 96px; text-align: center; border-top: 1px solid #eef1ef; color: var(--lp-text); }
.v5 .lp-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 28px;
  margin-top: 48px;
  text-align: left;
  border-top: 1px solid var(--lp-line);
}
.v5 .lp-list div { padding-block: 22px; border-bottom: 1px solid var(--lp-line); }
.v5 .lp-list strong { display: block; font-weight: 700; }
.v5 .lp-list span { display: block; margin-top: 4px; font-size: 14px; color: var(--lp-muted); }

/* ---------- Priser ---------- */
.v5 .lp-prices { padding-block: 96px; background: var(--lp-soft); text-align: center; color: var(--lp-text); }
.v5 .lp-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 48px; text-align: left; }
.v5 .lp-plan { padding: 30px 28px; border: 1px solid #e3e7e5; border-radius: 20px; background: #fff; }
.v5 .lp-plan h3 { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lp-muted); }
.v5 .lp-plan .lp-price { margin-top: 12px; font-family: var(--lp-head); font-size: 40px; font-style: italic; font-weight: 900; line-height: 1; }
.v5 .lp-plan p { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid #eef1ef; font-size: 15px; }

/* ---------- Övningsbiblioteket och artiklarna på startsidan ---------- */
.v5 .lp-library { padding-block: 72px; background: var(--lp-soft); color: var(--lp-text); }
.v5 .lp-articles { padding-block: 96px; color: var(--lp-text); }
.v5 .lp-head-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px 40px;
  margin-bottom: 40px;
}
.v5 .lp-head-row h2 { font-size: clamp(32px, 3.2vw, 46px); }
.v5 .lp-head-row .lp-link { margin-top: 0; }
.v5 .lp-library .lp-head-row { margin-bottom: 28px; }

/* ---------- Övningskort, på alla sidor ----------
   Små kort (Marcus 2026-10-31) som slutar med ett streck och "Se mer" och
   lyser upp i grönt när man pekar på dem eller tabbar dit. Texten ligger i
   CSS eftersom kortens markup delas av bygget och exercises.js
   (MARKUP-CONTRACT.md); den är dekor, hela kortet är länken. */
html.motion-ready .v5 [data-stagger] > * { opacity: 1; transform: none; }
.v5 .exercise-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.v5 .exercise-list.home-exercises { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.v5 .exercise-list .exercise-card {
  display: flex;
  flex-direction: column;
  padding: 14px 14px 12px;
  border: 1px solid #e3e7e5;
  border-radius: 14px;
  background: #fff;
  color: var(--lp-text);
  text-decoration: none;
  transform: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.v5 .exercise-list .exercise-card .badge { align-self: flex-start; }
.v5 .exercise-list .exercise-card h3 { margin: 8px 0 4px; font-size: 16px; line-height: 1.25; }
.v5 .exercise-list .exercise-card p { flex: 1; margin: 0; font-size: 12.5px; line-height: 1.4; }
.v5 .exercise-list .exercise-card::after {
  content: "See more \2192";
  display: block;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e3e7e5;
  background: linear-gradient(var(--lp-green), var(--lp-green)) left top / 0 2px no-repeat;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-text);
  transition: background-size 0.25s ease, color 0.2s ease;
}
html[lang="sv"] .v5 .exercise-list .exercise-card::after { content: "Se mer \2192"; }
.v5 .exercise-list .exercise-card:hover,
.v5 .exercise-list .exercise-card:focus-visible {
  transform: none;
  background: #effaf3;
  border-color: var(--lp-green);
  box-shadow: 0 0 0 3px rgba(34, 201, 107, 0.18), 0 14px 30px -18px rgba(34, 201, 107, 0.6);
  outline: none;
}
.v5 .exercise-list .exercise-card:hover::after,
.v5 .exercise-list .exercise-card:focus-visible::after { background-size: 100% 2px; color: #0b8f59; }
@media (max-width: 1100px) {
  .v5 .exercise-list,
  .v5 .exercise-list.home-exercises { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .v5 .exercise-list,
  .v5 .exercise-list.home-exercises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Artikelkort, på alla sidor ----------
   Texten ligger ovanpå bilden (Marcus 2026-10-31), med en mörk toning nedifrån
   som på fotokorten för de två målgrupperna. Rubrikens länk sträcks över hela
   kortet, så hela kortet går att klicka på utan att bygget ändras. */
.v5 .editorial-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.v5 .editorial-grid .story {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 360px;
  padding: 18px;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--lp-ink);
  color: #fff;
  isolation: isolate;
  transform: none;
  transition: box-shadow 0.2s ease;
}
.v5 .editorial-grid .story.featured { grid-row: auto; }
.v5 .editorial-grid .story .thumb {
  position: absolute;
  inset: 0;
  z-index: -2;
  margin: 0;
  border-radius: 0;
  aspect-ratio: auto;
  background: var(--lp-ink);
}
.v5 .editorial-grid .story .thumb img { width: 100%; height: 100%; object-fit: cover; transform: none; }
.v5 .editorial-grid .story::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.62) 45%, rgba(0, 0, 0, 0.08) 82%);
}
.v5 .editorial-grid .story .meta { color: #8be3b2; }
.v5 .editorial-grid .story h3 { margin: 8px 0 6px; font-size: 19px; line-height: 1.2; color: #fff; }
.v5 .editorial-grid .story h3 a,
.v5 .editorial-grid .story h3 a:hover { color: #fff; }
.v5 .editorial-grid .story h3 a::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.v5 .editorial-grid .story h3 a:focus-visible { outline: none; }
.v5 .editorial-grid .story p { margin: 0; font-size: 13.5px; color: #d9dfdb; }
.v5 .editorial-grid .story-link { display: contents; color: inherit; }
.v5 .editorial-grid .story::after {
  content: "See more \2192";
  display: block;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  background: linear-gradient(var(--lp-green), var(--lp-green)) left top / 0 2px no-repeat;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  transition: background-size 0.25s ease, color 0.2s ease;
}
html[lang="sv"] .v5 .editorial-grid .story::after { content: "Se mer \2192"; }
.v5 .editorial-grid .story:hover,
.v5 .editorial-grid .story:focus-within {
  box-shadow: 0 0 0 3px var(--lp-green), 0 18px 40px -20px rgba(34, 201, 107, 0.7);
}
.v5 .editorial-grid .story:hover::after,
.v5 .editorial-grid .story:focus-within::after { background-size: 100% 2px; color: var(--lp-green); }
@media (max-width: 980px) { .v5 .editorial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .v5 .editorial-grid { grid-template-columns: 1fr; }
  .v5 .editorial-grid .story { min-height: 280px; }
}

/* ---------- Övriga sidor: rubrikband, sektioner, knappar och sidfot ----------
   Samma byggstenar som de vanliga sidorna redan har (page-hero, section,
   info-card, btn, field, cta, footer), i den nya stilen. */
.v5 .page-hero {
  position: relative;
  padding-block: 72px 64px;
  color: var(--lp-hero-text);
  background: var(--lp-ink) url("/assets/img/photos/hero-gym-blur.jpg") center 60% / cover no-repeat;
  isolation: isolate;
  overflow: hidden;
}
.v5 .page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(8, 10, 9, 0.86) 0%, rgba(8, 10, 9, 0.6) 60%, rgba(8, 10, 9, 0.4) 100%);
}
.v5 .page-hero h1 { color: #fff; font-size: clamp(36px, 4.4vw, 60px); hyphens: auto; overflow-wrap: anywhere; }
/* Långa svenska ord (TRÄNINGSMJUKVARA) får inte plats i versaler på en telefon. */
@media (max-width: 480px) { .v5 .page-hero h1 { font-size: 30px; } }
.v5 .page-hero p,
.v5 .page-hero .lead,
.v5 .page-hero .article-meta { color: var(--lp-hero-muted); }
.v5 .page-hero .eyebrow { color: var(--lp-green); }
.v5 .page-hero a:not(.btn):not(.store-badge):not(.exercise-card) { color: #fff; }
.v5 .page-hero .btn:not(.primary) { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.85); }

.v5 .section.soft { background: var(--lp-soft); }

.v5 main .btn {
  border-radius: 999px;
  min-height: 46px;
  padding: 10px 24px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}
.v5 main .btn:hover { transform: none; }
.v5 main .btn.primary { background: var(--lp-green); border-color: var(--lp-green); color: var(--lp-green-ink); }
.v5 main .btn.primary:hover { background: #3ad97f; border-color: #3ad97f; }

.v5 main .text-link {
  color: var(--lp-text);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--lp-green);
  padding-bottom: 2px;
}
.v5 main .text-link:hover { color: #0b8f59; }

.v5 main .info-card { border-color: #e3e7e5; border-radius: 14px; box-shadow: none; }
.v5 main a.info-card { transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.v5 main a.info-card:hover,
.v5 main a.info-card:focus-visible {
  background: #effaf3;
  border-color: var(--lp-green);
  box-shadow: 0 0 0 3px rgba(34, 201, 107, 0.18);
  outline: none;
}

.v5 main .field { border-radius: 10px; border-color: #d9dfdb; }
.v5 main .field:focus { border-color: var(--lp-green); box-shadow: 0 0 0 3px rgba(34, 201, 107, 0.2); }

/* Avslutningsbandet på kalkylatorn och integrationssidan: samma mörka band
   som avslutningen på startsidans undersidor. */
.v5 .cta {
  position: relative;
  color: var(--lp-hero-text);
  background: var(--lp-ink) url("/assets/img/photos/hero-gym-blur.jpg") center / cover no-repeat;
  isolation: isolate;
}
.v5 .cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(8, 10, 9, 0.66); }
.v5 .cta h2 { color: #fff; }
.v5 .cta p { color: var(--lp-hero-muted); }
.v5 .cta .btn:not(.primary) { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.85); }
.v5 .cta .text-link { color: #fff; }

.v5 .footer { background: var(--lp-ink); }

/* ---------- Korsväg till den andra målgruppen ---------- */
.v5 .lp-cross { padding-block: 0 96px; }
.v5 .lp-prices + .lp-cross { background: var(--lp-soft); }

/* ---------- Avslutning ---------- */
.v5 .lp-final {
  position: relative;
  padding-block: 120px;
  text-align: center;
  color: var(--lp-hero-text);
  background: var(--lp-ink) url("/assets/img/photos/hero-gym-blur.jpg") center / cover no-repeat;
}
.v5 .lp-final::before { content: ""; position: absolute; inset: 0; background: rgba(8, 10, 9, 0.62); }
.v5 .lp-final > .wrap { position: relative; }
.v5 .lp-final h2 { font-size: clamp(40px, 4.2vw, 60px); color: var(--lp-hero-text); }
.v5 .lp-final p { margin: 20px auto 0; max-width: 32em; font-size: 17px; color: var(--lp-hero-muted); }
.v5 .lp-final .lp-badges,
.v5 .lp-final .lp-btns { justify-content: center; }

/* ---------- Mindre skärmar ---------- */
@media (max-width: 980px) {
  /* Stående gymgolv när hjälten staplas: texten över hyllorna, telefonen på golvet. */
  .v5 .lp-hero::before {
    background:
      linear-gradient(180deg, rgba(8, 10, 9, 0.55) 0%, rgba(8, 10, 9, 0.2) 40%, rgba(8, 10, 9, 0) 70%),
      url("/assets/img/photos/hero-gym-floor-mobile.jpg") center bottom / cover no-repeat;
  }
  .v5 .lp-hero-grid { grid-template-columns: 1fr; min-height: 0; padding-top: 32px; }
  .v5 .lp-hero-copy { padding-bottom: 8px; }
  .v5 .lp-phone { width: min(260px, 70%); padding-bottom: 90px; }
  .v5 .lp-phone .lp-phone-refl { top: calc(100% - 90px); }
  .v5 .lp-phone::after { bottom: 76px; }
  .v5 .lp-hero-grid.lp-wide { grid-template-columns: 1fr; gap: 40px; padding-block: 32px 64px; min-height: 0; }
  .v5 .lp-facts ul,
  .v5 .lp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v5 .lp-row { grid-template-columns: 1fr; gap: 44px; }
  .v5 .lp-feature.lp-flip .lp-media { order: 0; }
  .v5 .lp-plans { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .v5 .lp-badges img { height: 44px; }
  .v5 .lp-choose { padding-block: 72px 80px; }
  .v5 .lp-pair { grid-template-columns: minmax(0, 1fr); }
  .v5 .lp-card { min-height: 430px; }
  .v5 .lp-facts ul,
  .v5 .lp-list { grid-template-columns: 1fr; }
  .v5 .lp-feature,
  .v5 .lp-also,
  .v5 .lp-prices,
  .v5 .lp-video { padding-block: 64px; }
  .v5 .lp-cross { padding-block: 0 64px; }
  .v5 .lp-final { padding-block: 80px; }
}