/* /app — hero med demofilm, fordypninger og integrasjoner.
   Alt fra appen er ekte skjermbilder. Chrome fra tokens.css og components.css (§1). */

/* ---------- Skala for salgssiden: det gylne snitt ----------
   Tekst: grunnlinje 16px, hvert hele trinn × 1,618 (φ), halve trinn × 1,272 (√φ).
     16 brødtekst · 20 ingress/kapittel · 26 påstand · 33 seksjonstittel · 42 hovedtittel · 68 hero
   Luft: Fibonacci, rundet til håndbokens 4px-rutenett. Jo mer ting hører sammen, jo tettere.
     8 kapittel→tittel · 12 tittel→ingress · 20 ingress→innhold · 32 mellom blokker · 56 tittel→seksjonsinnhold · 88 seksjonspadding
   Appen beholder håndbokens tettere skala; dette gjelder bare /app. */
.bv-app-site {
  --bv-lp-type-body: 1rem;
  --bv-lp-type-lead: clamp(1.125rem, 1.6vw, 1.25rem);
  --bv-lp-type-statement: clamp(1.375rem, 2.2vw, 1.625rem);
  --bv-lp-heading-sub-size: clamp(1.75rem, 2.9vw, 2.0625rem);
  --bv-lp-heading-main-size: clamp(2.125rem, 3.8vw, 2.625rem);
  --bv-lp-heading-hero-size: clamp(2.625rem, 5vw, 4.25rem);

  --bv-lp-gap-chapter: var(--space-2);
  --bv-lp-gap-tight: var(--space-3);
  --bv-lp-gap-near: var(--space-5);
  --bv-lp-gap-block: var(--space-8);
  --bv-lp-gap-group: calc(var(--space-10) + var(--space-4));
  --bv-lp-section-pad: clamp(3.5rem, 7.8vw, 5.5rem);
}

/* ---------- Hero ---------- */

/* Ren bakgrunn: ingen foto bak enhetene. */
body.bv-homepage main > .bv-lp-hero::before {
  content: none;
}

/* Tittel og knapper øverst, demofilmen kant i kant under. */
body.bv-homepage.bv-app-site main > #bv-app-hero.bv-lp-hero {
  min-height: 0;
  flex-direction: column;
  align-items: stretch;
  /* Ingress → film. Filmen har selv 2–12 % tom bakgrunn øverst, så den synlige avstanden blir
     minst ~43px (scenene der innholdet går helt opp) og ~100px i de fleste scener. */
  gap: var(--bv-lp-gap-block);
  margin-top: 0;
  /* Seksjonspadding (88) over tittelen. Menyens høyde ligger allerede som padding på body
     (homepage.css bruker --bv-home-nav-offset). */
  padding-top: var(--bv-lp-section-pad);
  /* Film → kundelogoer: 56 (gruppe). Logoene hører til heroen, så de står tettere på filmen
     enn på neste seksjon (88). */
  padding-bottom: var(--bv-lp-gap-group);
}

.bv-lp-hero__grid {
  /* bredere enn sidens innhold (1120 px), så den store tittelen holder seg på to linjer */
  max-width: 1360px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bv-lp-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  min-width: 0;
  text-align: center;
}

.bv-lp-hero__copy > p,
.bv-lp-hero__copy .bv-app-hero__actions {
  margin: 0;
}

.bv-lp-hero__copy .bv-hero__kicker {
  padding: 0;
}

/* ---------- To overskriftsnivåer ----------
   Hovedtittel: heroen og de store seksjonene (moderne byggfirma, priser, spørsmål, avslutning).
   Seksjonstittel: seksjonene med tekst og bilde side om side (salg, tilbud, prosjekt, ansatte,
   integrasjoner). Samme vekt og font, tydelig forskjell i størrelse. */
body.bv-app-site main > #bv-app-hero.bv-lp-hero #bv-app-hero-title,
body.bv-app-site main h2.heading-section.bv-lp-heading--main {
  font-size: var(--bv-lp-heading-main-size);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

/* Hovedtitler står alltid midtstilt, med ingressen rett under midtstilt. */
body.bv-app-site main h2.heading-section.bv-lp-heading--main {
  margin-inline: auto;
  max-width: 18em;
  text-align: center;
  text-wrap: balance;
}

body.bv-app-site main .bv-lp-heading--main + .bv-lp-section__lead,
body.bv-app-site main .bv-lp-heading--main + .bv-app-band__lead {
  margin-inline: auto;
  max-width: 40rem;
  text-align: center;
}

body.bv-app-site main h2.heading-section.bv-lp-heading--sub {
  font-size: var(--bv-lp-heading-sub-size);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  max-width: 16em;
}

/* Heroens tittel er et hakk større enn hovedtitlene ellers på siden. */
body.bv-app-site main > #bv-app-hero.bv-lp-hero #bv-app-hero-title {
  margin: 0 auto;
  padding: 0;
  /* Smal nok til to balanserte linjer innenfor filmens innhold. */
  max-width: 15em;
  font-size: var(--bv-lp-heading-hero-size);
  line-height: 1;
  text-align: center;
  text-wrap: balance;
}

body.bv-app-site main > #bv-app-hero.bv-lp-hero #bv-app-hero-subheading {
  margin: calc(var(--space-8) + var(--space-1)) auto 0;
  /* Tittel / φ² i størrelse, og to like lange linjer (bredde ≈ tittelbredde / φ). */
  max-width: 36rem;
  font-size: clamp(1.125rem, 1.9vw, 1.375rem);
  text-wrap: balance;
  line-height: 1.5;
  text-align: center;
}

.bv-lp-hero__copy .bv-app-hero__actions {
  justify-content: center;
}

/* To knapper under ingressen: 32 (blokk) ned fra ingressen. Store CTA-er (§8), bare så brede som teksten. */
.bv-lp-hero__copy .bv-lp-hero__actions {
  /* Knapp + tekstlenke på én rad. Hver er bare så bred som teksten. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--bv-lp-gap-block);
}

/* «Se hvordan det funker»: tekstlenke med understrek, samme høyde som knappen ved siden av. */
.bv-app-site .bv-lp-hero__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--page-header-control-height, 34px);
  padding: 0 var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.bv-app-site .bv-lp-hero__link:hover {
  color: var(--color-primary-text);
}

.bv-app-site .bv-lp-hero__link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Demofilmen ligger direkte i seksjonen (utenfor .bv-container) og fyller hele bredden. */
.bv-lp-hero__media {
  margin: 0;
  width: 100%;
}

.bv-lp-hero__media img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  body.bv-homepage.bv-app-site main > #bv-app-hero.bv-lp-hero {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }

  body.bv-homepage.bv-app-site main > #bv-app-hero.bv-lp-hero {
    gap: var(--space-4);
  }

  .bv-lp-hero__copy {
    gap: 0;
  }
}

/* ---------- Felles seksjon ---------- */

.bv-lp-section {
  padding: var(--bv-lp-section-pad) 0 0;
  scroll-margin-top: calc(var(--bv-home-nav-offset) + var(--space-3));
  background: var(--color-bg);
}

.bv-lp-section + .bv-app-band {
  margin-top: var(--bv-lp-section-pad);
}

.bv-lp-section__head .heading-section {
  margin: var(--space-2) 0 0;
  max-width: 18em;
}

/* Ingress = .text-body, samme som ingressene under priser og FAQ. */
.bv-app-site .bv-lp-section__lead {
  margin: var(--bv-lp-gap-tight) 0 0;
  max-width: 36rem;
}

/* ---------- Ingen meny ---------- */
/* Menyen er en flytende boks øverst. Ankere stopper under den. */
html.bv-home.bv-app-site {
  /* 12px luft over + 64px boks + 2px kant + 12px luft under = 90px. */
  --bv-lp-bar-h: 90px;
  --bv-home-nav-offset: var(--bv-lp-bar-h);
}

/* ---------- Kundelogoer ---------- */
/* Sporet har 6 like rader, og animasjonen flytter -50 % (3 rader). Da er halvparten alltid
   bredere enn skjermen, og sløyfa går rundt uten tomrom eller hopp. Varigheten er ganget
   med 3 så farten er den samme som før (42 s per rad). */
.bv-app-proof .bv-hero-logos__track {
  animation-duration: 126s;
}

/* Fast høyde og bredde fra bildets egne mål, så raden ikke endrer lengde når logoene lastes. */
.bv-app-proof .bv-hero-logos__img {
  max-width: none;
}

/* Liten overskrift over logoene: dempet og midtstilt, 20 (nær) ned til logoene. */
.bv-app-site .bv-lp-proof__title {
  margin: 0 0 var(--bv-lp-gap-near);
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
  text-align: center;
  color: var(--color-text-tertiary);
}

/* Luft mellom logoene: 56 (≈ logohøyde 44 × √φ). Høyre padding = samme luft, så skjøten i sløyfa
   er like bred som de andre mellomrommene. Lik luft over og under logoene i raden. */
.bv-app-proof .bv-hero-logos__row {
  gap: var(--bv-lp-gap-group);
  padding: var(--space-2) var(--bv-lp-gap-group) var(--space-2) 0;
}

/* ---------- Demofilm (loop uten lyd) ---------- */

/* Filmen ligger rett på sidebakgrunnen, uten kort, kant eller skygge.
   Plakaten ligger under filmen, så rammen aldri står tom: ikke før filmen er lastet,
   ikke hvis nettleseren kaster videobildet, og ikke hvis filmen ikke kan spilles. */
/* Filmen har ingen tekst. Teksten står ved siden av (bred skjerm) eller under filmen (smal skjerm),
   og byttes i takt med filmen (app.js). Filmen er akkurat så bred som appvinduet i den (1680 x 1080),
   så den får mest mulig bredde på mobil. */
.bv-lp-demo {
  display: grid;
  gap: var(--space-6);
  margin: 0 auto;
  max-width: 1440px;
}

/* Bred skjerm: nøyaktig som i filmen. Filmen (byggvekst-film-bred, 1920 x 1080) har produktet til høyre,
   og teksten legges oppå til venstre med filmens egne mål, regnet i forhold til filmens bredde (cqw):
   1920 px bred film = 100cqw. Tekst inn 240 px, overskrift 84 px, linjeavstand 92 px, tekst 36 px / 52 px,
   logo 80 px høy, toning over den venstre halvdelen (98 % / 95 % ved 70 % / 60 % ved 86 % / 0).
   Dermed står tekst og produkt likt på alle bredder, som i filmen. */
@media (min-width: 1024px) {
  .bv-lp-demo {
    position: relative;
    display: block;
    max-width: none;
    container-type: inline-size;
  }

  .bv-lp-demo .bv-lp-demo__frame {
    width: 100%;
    background-image: url('/assets/images/app-landing/byggvekst-film-bred-poster.webp?v=2');
  }

  /* 1920 x 960: filmen er laget lav nok til at det ikke er mye tom flate over og under innholdet */
  .bv-lp-demo .bv-lp-demo__video {
    aspect-ratio: 2 / 1;
  }

  .bv-lp-demo .bv-lp-demo__captions {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 2;
    /* Toningen står fast og dekker teksten, ikke mye mer: innrykket, den bredeste teksten («Hele bedriften.»,
       cirka 30cqw, de siste bokstavene ligger i starten av overgangen) og en myk overgang på 6cqw ut mot filmen. Overgangen følger en S-kurve (smoothstep) i mange
       små trinn: rette trinn gir en synlig strek der helningen skifter, særlig over den mørke menyen i vinduet. */
    width: calc(12.5cqw + 28cqw + 6cqw);
    align-content: center;
    padding: 0 0 5cqw 12.5cqw;
    text-align: left;
    /* Heldekkende sidegrå over innrykket og den første delen av teksten (til 32cqw), så en lang, jevn S-kurve
       som blir gradvis svakere ut mot filmen. Ingen knekk, så ingen strek. */
    background: linear-gradient(to right,
      var(--color-bg) 0%,
      var(--color-bg) 32cqw,
      color-mix(in srgb, var(--color-bg) 98.0%, transparent) calc(32cqw + (100% - 32cqw) * 0.083),
      color-mix(in srgb, var(--color-bg) 92.6%, transparent) calc(32cqw + (100% - 32cqw) * 0.167),
      color-mix(in srgb, var(--color-bg) 84.4%, transparent) calc(32cqw + (100% - 32cqw) * 0.250),
      color-mix(in srgb, var(--color-bg) 74.1%, transparent) calc(32cqw + (100% - 32cqw) * 0.333),
      color-mix(in srgb, var(--color-bg) 62.4%, transparent) calc(32cqw + (100% - 32cqw) * 0.417),
      color-mix(in srgb, var(--color-bg) 50.0%, transparent) calc(32cqw + (100% - 32cqw) * 0.500),
      color-mix(in srgb, var(--color-bg) 37.6%, transparent) calc(32cqw + (100% - 32cqw) * 0.583),
      color-mix(in srgb, var(--color-bg) 25.9%, transparent) calc(32cqw + (100% - 32cqw) * 0.667),
      color-mix(in srgb, var(--color-bg) 15.6%, transparent) calc(32cqw + (100% - 32cqw) * 0.750),
      color-mix(in srgb, var(--color-bg) 7.4%, transparent) calc(32cqw + (100% - 32cqw) * 0.833),
      color-mix(in srgb, var(--color-bg) 2.0%, transparent) calc(32cqw + (100% - 32cqw) * 0.917),
      transparent 100%);
  }

  .bv-lp-demo .bv-lp-demo__captions .bv-lp-demo__cue-title {
    font-size: var(--bv-lp-heading-sub-size);
    line-height: 1.1;
  }

  .bv-lp-demo .bv-lp-demo__captions .bv-lp-demo__cue-text {
    margin-top: var(--bv-lp-gap-tight);
    /* Samme som ingressene i produktseksjonene, så toppen og resten av siden har samme tetthet. */
    font-size: var(--bv-lp-type-lead);
    line-height: 1.5;
  }

  .bv-app-site .bv-lp-demo .bv-lp-demo__captions a.bv-lp-demo__cta.btn {
    margin-top: 1.6cqw;
  }
}

.bv-lp-demo__frame {
  position: relative;
  margin: 0;
  background: url('/assets/images/app-landing/byggvekst-film-uten-tekst-poster.webp?v=2') center / cover no-repeat;
}

.bv-lp-demo__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1680 / 1080;
  object-fit: cover;
  /* Ingen myk kant: skjermene i filmen skal ha harde kanter. Videoen er sRGB-merket, så gråtonen er lik sidens. */
}

/* Alle tekstene ligger i samme rute, så høyden settes av den lengste og siden ikke hopper. */
.bv-lp-demo__captions {
  display: grid;
  margin: 0;
}

.bv-lp-demo__cue {
  grid-area: 1 / 1;
  align-self: center;
  visibility: hidden;
}

.bv-lp-demo__cue.is-active,
.bv-lp-demo__cue.is-leaving {
  visibility: visible;
}

/* Teksten som i filmen: faste linjeskift (app.js deler teksten på \n), og hver linje glir opp bak sin
   egen maske. --bv-in / --bv-out er hver linjes forsinkelse (satt av app.js). */
.bv-lp-demo__cue-title,
.bv-lp-demo__cue-text {
  margin: 0;
}

/* Overskriftene i filmteksten er seksjonstitler (nivå 2), ikke hovedtitler. */
.bv-app-site .bv-lp-demo .bv-lp-demo__cue-title {
  font-size: var(--bv-lp-heading-sub-size);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.bv-app-site .bv-lp-demo__cue-text {
  margin-top: var(--bv-lp-gap-tight);
  /* Samme som ingressene i produktseksjonene (lead-trinnet i skalaen). */
  font-size: var(--bv-lp-type-lead);
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.bv-lp-demo__line {
  display: block;
  overflow: hidden;
  /* luft til underlengder (g, j, p), uten å endre linjeavstanden */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
  white-space: nowrap;
}

.bv-lp-demo__line > span {
  display: inline-block;
  transform: translateY(110%);
}

.bv-lp-demo__cue.is-active .bv-lp-demo__line > span {
  transform: none;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--bv-in, 0s);
}

.bv-lp-demo__cue.is-leaving .bv-lp-demo__line > span {
  transform: translateY(-110%);
  transition: transform 0.5s cubic-bezier(0.55, 0, 0.75, 0.2) var(--bv-out, 0s);
}

/* Smal skjerm (filmen og teksten over hverandre): overskriften over filmen, teksten under.
   Bildeteksten og hver tekst løses opp (display: contents) så overskrifter og tekster kan legges i hver
   sin rad i filmens rutenett: overskrifter i rad 1, filmen i rad 2, tekster i rad 3, knappen og
   «Ingen kredittkort» under. Alle overskriftene deler samme rute (og alle tekstene sin), så siden ikke
   hopper når teksten byttes. Teksten får vanlig bredde og brytes fritt (ikke filmens faste linjeskift),
   og toner inn i stedet for å gli opp linje for linje. */
@media (max-width: 1023px) {
  .bv-lp-demo {
    gap: 0;
  }

  .bv-lp-demo__captions,
  .bv-lp-demo__cue {
    display: contents;
  }

  .bv-lp-demo {
    grid-template-columns: minmax(0, 1fr);
  }

  .bv-lp-demo .bv-lp-demo__frame {
    grid-row: 2;
    grid-column: 1;
  }

  .bv-lp-demo__cue-title,
  .bv-lp-demo__cue-text {
    grid-column: 1;
    padding-inline: var(--space-5);
    text-align: center;
  }

  .bv-lp-demo__cue-title {
    grid-row: 1;
    align-self: end;
    margin-bottom: 0;
  }

  .bv-app-site .bv-lp-demo__cue-text {
    grid-row: 3;
    align-self: start;
    justify-self: center;
    max-width: 36rem;
    margin-top: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .bv-lp-demo__cue.is-active .bv-lp-demo__cue-text {
    opacity: 1;
    transition: opacity 0.6s ease 0.25s;
  }

  .bv-lp-demo__cue-text .bv-lp-demo__line {
    display: inline;
    overflow: visible;
    padding: 0;
    margin: 0;
    white-space: normal;
  }

  /* linjene står etter hverandre: mellomrom mellom dem, så ordene ikke smelter sammen */
  .bv-lp-demo__cue-text .bv-lp-demo__line::after {
    content: ' ';
  }

  .bv-lp-demo__cue-text .bv-lp-demo__line > span,
  .bv-lp-demo__cue.is-active .bv-lp-demo__cue-text .bv-lp-demo__line > span,
  .bv-lp-demo__cue.is-leaving .bv-lp-demo__cue-text .bv-lp-demo__line > span {
    display: inline;
    transform: none;
    transition: none;
  }

  .bv-app-site .bv-lp-demo a.btn.btn-cta.bv-lp-demo__cta {
    grid-row: 4;
    align-self: start;
    grid-column: 1;
    margin-top: var(--bv-lp-gap-block);
  }

  .bv-lp-demo .bv-lp-demo__captions .bv-app-trust.bv-lp-demo__trust {
    grid-row: 5;
    grid-column: 1;
  }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .bv-app-site .bv-lp-demo__cue-text,
  .bv-lp-demo__cue.is-active .bv-lp-demo__cue-text {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bv-lp-demo__line > span,
  .bv-lp-demo__cue.is-active .bv-lp-demo__line > span,
  .bv-lp-demo__cue.is-leaving .bv-lp-demo__line > span {
    transform: none;
    transition: none;
  }
}

/* Prøve-knappen står under teksten til filmen (ikke oppå filmen, der den ville dekket produktet).
   Stor CTA (§8 .btn-cta), men bare så bred som teksten. Løftes som flytende flate (§6: --shadow-card).
   Hover-effekten kommer fra primærknappene på /app. Heroen har ingen egne knapper, så dette er
   den første prøve-knappen på siden, også på mobil. */
.bv-app-site a.btn.btn-cta.bv-lp-demo__cta {
  grid-row: 2;
  justify-self: start;
  margin-top: var(--space-4);
  width: auto;
  padding-inline: var(--space-6);
  white-space: nowrap;
  box-shadow: var(--shadow-card);
}

/* Avslutningens prøve-knapp er like stor som den under filmen. */
.bv-app-site #oversikt a.btn.btn-cta {
  width: auto;
  padding-inline: var(--space-6);
  white-space: nowrap;
  box-shadow: var(--shadow-card);
}

/* «Ingen kredittkort / Ingen bindingstid» rett under prøve-knappen, samme kant som knappen. */
.bv-lp-demo__captions .bv-app-trust.bv-lp-demo__trust {
  grid-row: 3;
  justify-self: start;
  justify-content: flex-start;
  margin: var(--space-3) 0 0;
}

@media (max-width: 1023px) {
  .bv-app-site a.btn.btn-cta.bv-lp-demo__cta,
  .bv-lp-demo__captions .bv-app-trust.bv-lp-demo__trust {
    justify-self: center;
  }

  .bv-lp-demo__captions .bv-app-trust.bv-lp-demo__trust {
    justify-content: center;
  }
}

/* Vises bare når filmen ikke spilles av seg selv (redusert bevegelse). */
.bv-lp-demo__play {
  position: absolute;
  inset: 50% auto auto 50%;
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-lg);
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.bv-lp-demo__play[hidden] {
  display: none;
}

.bv-lp-demo__play:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.bv-lp-demo__play svg,
.bv-lp-demo__play i {
  width: 24px;
  height: 26px;
}

/* ---------- Fordypninger ---------- */

/* To like kolonner i en smalere ramme. Tekst og film skyves inn mot midten, så de står som ett par
   i stedet for ute ved hver sin kant. */
.bv-container.bv-lp-deep {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--bv-lp-gap-group);
  max-width: 66rem;
  margin-inline: auto;
}

.bv-lp-deep__copy {
  justify-self: end;
  width: 100%;
  max-width: 28rem;
}

.bv-lp-deep.bv-lp-flip .bv-lp-deep__copy {
  justify-self: start;
}

.bv-lp-deep__copy .heading-section {
  margin: var(--bv-lp-gap-chapter) 0 0;
}

.bv-lp-deep__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--bv-lp-gap-near) 0 0;
  padding: 0;
  list-style: none;
}

.bv-app-site .bv-lp-deep__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  /* Brødtekst-trinnet i skalaen (16), ikke .text-body sine 14,4. */
  font-size: var(--bv-lp-type-body);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* Hvert punkt: kort fet innledning i tekstfarge, forklaring i dempet farge etter. */
.bv-app-site .bv-lp-deep__term {
  font-weight: 600;
  color: var(--color-text);
}

.bv-lp-deep__list svg,
.bv-lp-deep__list i {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  color: var(--color-primary-text);
}

.bv-lp-deep__media {
  margin: 0;
  padding: var(--space-2);
  min-width: 0;
}

/* Seksjonsfilm: uten kort rundt. Filmens bakgrunn er sidens egen #f0f0f0, så vinduet i filmen står rett på siden. */
.bv-lp-deep__media--video {
  padding: 0;
}

@media (min-width: 901px) {
  /* på PC inntil teksten, ikke midt i kolonnen */
  .bv-lp-deep__media--video {
    justify-self: start;
    width: 100%;
    max-width: 520px;
  }

  .bv-lp-deep.bv-lp-flip .bv-lp-deep__media--video {
    justify-self: end;
  }
}

.bv-lp-deep__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  background: #f0f0f0;
}

/* Ingen blink fra bilde til film (iPhone tømmer videoflaten et øyeblikk når filmen starter):
   plakatbildet ligger som bakgrunn bak filmen (app.js setter det på seksjonsfilmene; demofilmens
   ramme har det fra før), og filmen er usynlig til det første bildet faktisk er tegnet. */
.bv-lp-deep__media--video {
  background: center / 100% 100% no-repeat;
}

.bv-lp-deep__video,
.bv-lp-demo__video {
  transition: opacity 0.2s ease;
}

.bv-lp-deep__video.bv-video-wait,
.bv-lp-demo__video.bv-video-wait {
  opacity: 0;
}

@media (max-width: 900px) {
  .bv-container.bv-lp-deep,
  .bv-container.bv-lp-deep.bv-lp-flip {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .bv-lp-deep__copy,
  .bv-lp-deep.bv-lp-flip .bv-lp-deep__copy {
    justify-self: stretch;
    max-width: none;
  }

  .bv-lp-deep__media--video,
  .bv-lp-deep.bv-lp-flip .bv-lp-deep__media--video {
    justify-self: center;
  }

  /* Som filmen øverst: kapittel og tittel over filmen, ingress, punkter og knapp under.
     Tekstdelen løses opp (display: contents) så filmen kan stå mellom tittelen og ingressen. */
  .bv-container.bv-lp-deep,
  .bv-container.bv-lp-deep.bv-lp-flip {
    gap: 0;
  }

  .bv-lp-deep__copy,
  .bv-lp-deep.bv-lp-flip .bv-lp-deep__copy {
    display: contents;
  }

  .bv-lp-deep__copy > * {
    order: 2;
  }

  .bv-lp-deep__copy > .bv-lp-chapter,
  .bv-lp-deep__copy > .heading-section {
    order: 0;
  }

  .bv-lp-deep .bv-lp-deep__media,
  .bv-lp-deep.bv-lp-flip .bv-lp-deep__media {
    order: 1;
    margin-block: 0;
  }

  /* tittelen står helt inntil filmen; ingressen under beholder sin vanlige avstand */
  .bv-app-site .bv-lp-deep__copy > .heading-section {
    margin-bottom: 0;
  }
}

/* ---------- Integrasjoner ---------- */

.bv-lp-integ {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-8);
}

.bv-app-site .bv-lp-integ__title {
  margin: 0;
}

.bv-lp-flip > :first-child {
  order: 2;
}

.bv-lp-integ__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bv-lp-integ__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  font-weight: 500;
}

.bv-lp-integ__item svg,
.bv-lp-integ__item i {
  width: 16px;
  height: 16px;
  color: var(--color-text-secondary);
}

@media (max-width: 900px) {
  .bv-lp-integ {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .bv-lp-flip > :first-child {
    order: 0;
  }
}

/* ---------- Hovedtittel over produktseksjonene ----------
   «Hele jobben i ett system.» samler de fire kapitlene under (salg, tilbud, prosjekt, ansatte).
   Hovedtittel → første kapittel: 88 (seksjonspadding), litt tettere enn mellom kapitlene (112). */
.bv-lp-chapters-head + .bv-lp-section {
  padding-top: var(--bv-lp-section-pad);
}

/* Mellom kapitlene: et halvt trinn mer enn seksjonspaddingen (88 × √φ ≈ 112), så hvert kapittel
   får luft rundt seg. */
.bv-lp-section:has(> .bv-lp-deep) + .bv-lp-section:has(> .bv-lp-deep) {
  padding-top: calc(var(--bv-lp-section-pad) * 1.272);
}

/* ---------- Kapittelnavn og ingress i produktseksjonene ----------
   Som Apple: et lite kapittelnavn i farge, så en kort påstand (seksjonstittel), så én setning,
   så detaljene. Kapittelnavnet erstatter den grå etiketten i store bokstaver. */
.bv-app-site .bv-lp-chapter {
  margin: 0;
  font-size: var(--bv-lp-type-lead);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--color-primary-text);
}

.bv-app-site .bv-lp-deep__copy .heading-section {
  margin-top: var(--bv-lp-gap-chapter);
}

.bv-app-site .bv-lp-deep__lead {
  margin: var(--bv-lp-gap-tight) 0 0;
  font-size: var(--bv-lp-type-lead);
  line-height: 1.5;
  color: var(--color-text);
}

.bv-app-site .bv-lp-deep__lead + .bv-lp-deep__list {
  margin-top: var(--bv-lp-gap-near);
}

/* ---------- Bånd ----------
   Siden er grå (--color-bg). Kapitler som skal skille seg ut får et hvitt bånd (--color-surface).
   Kort inni et hvitt bånd blir grå brønner med kant og uten skygge (§6: lag + border, ikke skygge). */
.bv-lp-section.bv-lp-band--white {
  margin-top: var(--bv-lp-section-pad);
  padding: var(--bv-lp-section-pad) 0;
  background: var(--color-surface);
}

.bv-lp-band--white + .bv-app-band,
.bv-lp-band--white + .bv-lp-section:not(.bv-lp-band--white) {
  margin-top: 0;
}

/* ---------- Sammenligning ----------
   En tabell: egenskapene i første kolonne, ett system per kolonne, så samme egenskap leses rett bortover.
   Åpen og lett på hvit flate: ingen boks rundt, bare tynne skillelinjer mellom radene. Byggvekst-kolonnen
   står som et eget kort (primærramme, svak primærflate, runde hjørner) som går fra hodet og helt ned.
   Svarene vises som små runde merker: fylt primær = ja, grå = nei/delvis. Smal skjerm: tabellen ruller
   sidelengs, egenskapene står fast. */
.bv-lp-compare__head {
  text-align: center;
}

.bv-lp-compare__head .heading-section,
.bv-lp-compare__head .bv-lp-section__lead {
  margin-inline: auto;
}

.bv-lp-compare {
  margin-top: var(--bv-lp-gap-group);
  overflow-x: auto;
  /* hele tabellen i en boks etter håndboken (§6 hovedboks) */
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

@media (max-width: 720px) {
  .bv-lp-compare {
    padding: var(--space-4) var(--space-3) var(--space-4) 0;
  }
}

.bv-lp-compare:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}

.bv-lp-compare__table {
  width: 100%;
  min-width: 46rem;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.bv-lp-compare__table th,
.bv-lp-compare__table td {
  padding: var(--space-3) var(--space-5);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border);
}

.bv-lp-compare__table tbody tr:last-child > *,
.bv-lp-compare__table tfoot > tr > * {
  border-bottom: 0;
}

/* raden du peker på lyses svakt opp, så det er lett å lese bortover */
.bv-lp-compare__table tbody tr > * {
  transition: background-color var(--duration-fast, 150ms) ease;
}

.bv-lp-compare__table tbody tr:hover > :not(.is-us) {
  background: var(--color-surface-muted);
}

.bv-lp-compare__table tbody tr:hover > th[scope="row"] {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.bv-lp-compare__table thead th {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  vertical-align: top;
}

/* første kolonne: egenskapene */
.bv-lp-compare__table th[scope="row"],
.bv-lp-compare__table thead th:first-child {
  /* bare så bred som den lengste egenskapen, så alternativene står tett på */
  width: 14.5rem;
  position: sticky;
  left: 0;
  z-index: 1;
  padding-left: var(--space-4);
  background: var(--color-surface);
}

.bv-app-site .bv-lp-compare__table th[scope="row"] {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--color-text);
}

/* kolonnehodene: navn, pris, «pr. bruker», tillegg */
.bv-lp-compare__table thead th > span {
  display: block;
}

.bv-app-site .bv-lp-compare__name {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
}

.bv-app-site .bv-lp-compare__price {
  margin-top: var(--space-2);
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.bv-app-site .bv-lp-compare__per,
.bv-app-site .bv-lp-compare__note {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: 400;
  color: var(--color-text-tertiary);
}

/* cellene: rundt merke + tekst */
.bv-lp-compare__table td {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

.bv-lp-compare__table td > i {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: var(--space-2);
  border-radius: 50%;
  font-size: 10px;
  vertical-align: middle;
  background: var(--color-surface-muted);
  color: var(--color-text-tertiary);
}

.bv-lp-compare__table td > span {
  display: inline-block;
  vertical-align: middle;
}

.bv-lp-compare__table td small {
  display: block;
  margin-top: 2px;
  font-size: var(--font-size-xs);
  font-weight: 400;
  color: var(--color-text-tertiary);
}

.bv-lp-compare__table td[data-state="yes"] {
  color: var(--color-text);
}

.bv-lp-compare__table td[data-state="yes"] > i {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

.bv-app-site .bv-lp-compare__table td.bv-lp-compare__num {
  font-size: var(--font-size-md);
  font-weight: 600;
}

/* Byggvekst: eget kort som går fra hodet og helt ned */
.bv-lp-compare__table .is-us {
  position: relative;
  background: var(--color-primary-muted);
  border-left: 1.5px solid var(--color-primary);
  border-right: 1.5px solid var(--color-primary);
  border-bottom-color: color-mix(in srgb, var(--color-primary) 14%, transparent);
}

.bv-lp-compare__table thead .is-us {
  padding-top: var(--space-5);
  border-top: 1.5px solid var(--color-primary);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.bv-lp-compare__table tfoot .is-us {
  padding-top: var(--space-2);
  padding-bottom: var(--space-5);
  border-bottom: 1.5px solid var(--color-primary);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.bv-lp-compare__table tfoot .is-us .btn {
  width: 100%;
  justify-content: center;
  white-space: nowrap;
}

.bv-lp-compare__table tfoot td:not(.is-us),
.bv-lp-compare__table tfoot th {
  padding-block: 0;
}

.bv-app-site .bv-lp-compare__table td.is-us {
  color: var(--color-text);
  font-weight: 600;
}

.bv-lp-compare__table td.is-us > i {
  background: var(--color-primary);
  color: var(--color-text-on-primary, #fff);
}

@media (max-width: 720px) {
  .bv-lp-compare__table {
    min-width: 33rem;
  }

  .bv-lp-compare__table th,
  .bv-lp-compare__table td {
    padding: var(--space-3) var(--space-2);
  }

  .bv-lp-compare__table th[scope="row"],
  .bv-lp-compare__table thead th:first-child {
    width: 7rem;
    padding-left: var(--space-3);
  }

  /* telefon: mindre tekst, merker og luft, så mer av tabellen får plass */
  .bv-app-site .bv-lp-compare__table th[scope="row"] {
    font-size: 0.8125rem;
    line-height: 1.35;
  }

  .bv-lp-compare__table td {
    font-size: 0.8125rem;
    line-height: 1.35;
  }

  .bv-lp-compare__table thead th {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }

  .bv-lp-compare__table thead .is-us {
    padding-top: var(--space-4);
  }

  .bv-app-site .bv-lp-compare__name {
    font-size: 0.8125rem;
  }

  .bv-app-site .bv-lp-compare__price {
    margin-top: var(--space-1);
    font-size: 1.125rem;
  }

  .bv-app-site .bv-lp-compare__per,
  .bv-app-site .bv-lp-compare__note {
    font-size: 0.6875rem;
    line-height: 1.35;
  }

  .bv-app-site .bv-lp-compare__table td.bv-lp-compare__num {
    font-size: 0.9375rem;
  }

  .bv-lp-compare__table td small {
    font-size: 0.6875rem;
  }

  .bv-lp-compare__table td > i {
    width: 18px;
    height: 18px;
    margin-right: 6px;
    font-size: 8px;
  }

  /* Prøve-knappen står under boksen på telefon (bunnraden i tabellen skjules), og kortet
     slutter med siste rad. */
  .bv-lp-compare__table tfoot {
    display: none;
  }

  .bv-lp-compare__table tbody tr:last-child > .is-us {
    border-bottom: 1.5px solid var(--color-primary);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }

  /* teksten brytes ved siden av merket, ikke under det */
  .bv-lp-compare__table td > i + span {
    max-width: calc(100% - 24px);
  }
}

.bv-lp-compare__cta {
  display: none;
}

@media (max-width: 720px) {
  .bv-lp-compare__cta {
    display: flex;
    justify-content: center;
    margin-top: var(--bv-lp-gap-near);
  }
}

.bv-app-site .bv-lp-compare__foot {
  margin: var(--space-5) auto 0;
  max-width: 48rem;
  text-align: center;
  color: var(--color-text-tertiary);
}

/* ---------- Meny (alltid synlig) ----------
   En flytende boks etter håndboken (§6 hovedboks): hvit flate, 1px --color-border, --radius-md og
   --shadow-card. Like bred som produktseksjonene (66rem) og sentrert, 12px under toppen. Logo til venstre, seksjonslenkene høyrestilt før prøve-knappen.
   Lenken til seksjonen du står i får aria-current og grå bakgrunn.
   Ankerne og heroen tar høyde for boksen via --bv-lp-bar-h. Lenkene skjules på smal skjerm. */
.bv-lp-stickybar {
  position: fixed;
  inset: var(--space-3) 0 auto;
  z-index: 90;
  pointer-events: none;
}

.bv-container.bv-lp-stickybar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 64px;
  /* Like bred som produktseksjonene (66rem), sentrert, og alltid minst 16px fra skjermkanten. */
  width: min(66rem, calc(100% - 2 * var(--space-4)));
  margin-inline: auto;
  padding-inline: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  pointer-events: auto;
}

.bv-lp-stickybar__brand {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
}

.bv-lp-stickybar__brand img {
  display: block;
  width: auto;
  height: 24px;
}

.bv-lp-stickybar__nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Samme størrelse som prøve-knappen (§8 trinn A: 34px høy, 12px sidepadding, --radius-sm),
   så den grå hover-flaten har samme form som knappen. */
.bv-app-site .bv-lp-stickybar__nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: var(--page-header-control-height, 34px);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.bv-app-site .bv-lp-stickybar__nav a:hover,
.bv-app-site .bv-lp-stickybar__nav a[aria-current="true"] {
  color: var(--color-text);
}

/* Hover og aktiv seksjon: sidens grå (--color-surface-muted) på den hvite menyboksen,
   som muted hover ellers i appen. Ingen strek under. */
.bv-app-site .bv-lp-stickybar__nav a:hover,
.bv-app-site .bv-lp-stickybar__nav a[aria-current="true"] {
  background: var(--color-surface-muted);
}

.bv-app-site .bv-lp-stickybar__nav a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

@media (max-width: 860px) {
  .bv-lp-stickybar__nav {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bv-lp-stickybar,
  .bv-app-site .bv-lp-stickybar__nav a {
    transition: none;
  }
}

/* ---------- Skalaen på de eldre seksjonene (app.css) ----------
   Priser, spørsmål og avslutning bruker .bv-app-band fra app.css. Her får de samme luft som resten:
   88 seksjonspadding, 12 tittel → ingress, 56 til innholdet, 32 til knapper, 12 knapp → småtekst. */
.bv-app-site .bv-app-band {
  padding: var(--bv-lp-section-pad) 0;
}

/* Avslutningen står i et hvitt bånd, som de andre kapitlene som skal skille seg ut.
   Siste oppfordring på siden: mer luft rundt (144, neste Fibonacci-trinn), ingress på lead-trinnet
   med to like linjer, 20 fra tittel til ingress, 32 til knappen, 12 til småteksten. */
.bv-app-site .bv-app-band.bv-app-close {
  padding: calc(var(--bv-lp-section-pad) * 1.618) 0;
  background: var(--color-surface);
}

body.bv-app-site main .bv-app-close .bv-lp-heading--main + .bv-app-band__lead {
  margin-top: var(--bv-lp-gap-near);
  max-width: 46rem;
  font-size: var(--bv-lp-type-lead);
  line-height: 1.5;
  text-wrap: balance;
}

/* telefon: vanlig brødtekst, som ingressene ellers på siden */
@media (max-width: 720px) {
  body.bv-app-site main .bv-app-close .bv-lp-heading--main + .bv-app-band__lead {
    margin-top: var(--bv-lp-gap-tight);
    font-size: var(--bv-lp-type-body);
  }
}

.bv-app-site .bv-app-proof {
  padding-top: 0;
  padding-bottom: 0;
}

body.bv-app-site main .bv-app-band h2.heading-section.bv-lp-heading--main {
  margin-bottom: 0;
}

body.bv-app-site main .bv-lp-heading--main + .bv-app-band__lead {
  margin-top: var(--bv-lp-gap-tight);
  margin-bottom: 0;
}

.bv-app-site .bv-app-band__lead + .bv-app-prices,
.bv-app-site .bv-lp-heading--main + .bv-app-faq {
  margin-top: var(--bv-lp-gap-group);
}

.bv-app-site .bv-app-band__lead + .bv-app-close__actions {
  margin-top: var(--bv-lp-gap-block);
}

.bv-app-site .bv-app-close .bv-app-trust {
  margin-top: var(--bv-lp-gap-tight);
}

.bv-app-site .bv-app-prices + .bv-app-prices__note {
  margin-top: var(--bv-lp-gap-near);
}

/* ---------- Priser på hvit bakgrunn ----------
   Seksjonen er hvit. Priskortene blir grå brønner med kant og uten skygge (§6: på hvit flate skilles
   innhold med lag + kant, ikke skygge). Årlig beholder markeringen som anbefalt plan. */
.bv-app-site .bv-app-band.bv-lp-price-band {
  background: var(--color-surface);
}

/* Prisene og sammenligningen er begge hvite: ingen grå stripe (marg) mellom dem, og bare én
   seksjonspadding (88) fra prisene ned til sammenligningens tittel. */
.bv-lp-price-band + .bv-lp-band--white {
  display: flow-root;
  margin-top: 0;
  padding-top: 0;
}

.bv-lp-price-band .bv-app-price-card {
  background: var(--color-surface-muted);
  box-shadow: none;
}

/* Sekundærknapp på grå brønn: hvit flate med 1px kant (§8 on-page sekundær), ikke grå på grå. */
.bv-app-site .bv-lp-price-band .bv-app-price-card .btn.btn-secondary {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.bv-app-site .bv-lp-price-band .bv-app-price-card .btn.btn-secondary:hover {
  background: color-mix(in srgb, var(--color-text) 4%, var(--color-surface));
}

.bv-lp-price-band .bv-app-price-card--featured {
  background: var(--color-primary-muted);
}

/* ---------- Ofte stilte spørsmål ----------
   Ingress med e-post under tittelen, 56 ned til listen. Listen står i en hvit hovedboks, med
   tynne streker mellom spørsmålene. Pluss-ikonet er tegnet med to
   streker i primærfarge og roterer til et kryss når spørsmålet er åpent. */
body.bv-app-site main .bv-lp-heading--main + .bv-app-band__lead + .bv-app-faq {
  margin-top: var(--bv-lp-gap-group);
}

.bv-app-site .bv-app-faq .bv-app-band__lead a,
.bv-app-site #faq .bv-app-band__lead a {
  color: var(--color-primary-text);
  text-underline-offset: 3px;
}

.bv-app-site .bv-app-faq {
  max-width: 48rem;
  /* listen i en boks etter håndboken (§6 hovedboks), som sammenligningen */
  padding: var(--space-2) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

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

.bv-app-site .bv-app-faq details:last-child {
  border-bottom: 0;
}

@media (max-width: 560px) {
  .bv-app-site .bv-app-faq {
    padding: var(--space-1) var(--space-4);
  }
}

.bv-app-site .bv-app-faq summary {
  position: relative;
  padding: var(--bv-lp-gap-near) var(--bv-lp-gap-block) var(--bv-lp-gap-near) 0;
  font-size: var(--font-size-md);
  font-weight: 600;
  line-height: 1.4;
  transition: color 0.2s ease;
}

.bv-app-site .bv-app-faq summary:hover {
  color: var(--color-primary-text);
}

.bv-app-site .bv-app-faq summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.bv-app-site .bv-app-faq summary::after {
  content: '';
  float: none;
  position: absolute;
  top: 50%;
  right: 2px;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background:
    linear-gradient(var(--color-primary-text), var(--color-primary-text)) center / 14px 2px no-repeat,
    linear-gradient(var(--color-primary-text), var(--color-primary-text)) center / 2px 14px no-repeat;
  border-radius: 1px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.bv-app-site .bv-app-faq details[open] summary::after {
  content: '';
  transform: rotate(45deg);
}

.bv-app-site .bv-app-faq details p {
  max-width: 40em;
  padding: 0 var(--bv-lp-gap-block) var(--bv-lp-gap-near) 0;
  font-size: var(--font-size-md);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .bv-app-site .bv-app-faq summary::after {
    transition: none;
  }
}

/* ---------- Primærknapper: glød og forstørring ved hover ---------- */
/* Samme effekt som «Oppdater betalingskort» i sidemenyen (sidebar.css, .sidebar-trial-banner):
   roterende konisk kant, glød og scale(1.04). Gjelder alle primærknapper på /app. */
@property --bv-cta-glow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes bv-cta-glow-rotate {
  to { --bv-cta-glow-angle: 360deg; }
}

.bv-app-site .btn.btn-primary {
  --bv-cta-glow-deep: var(--color-primary);
  --bv-cta-glow-mid: color-mix(in srgb, var(--color-primary) 72%, #fff);
  --bv-cta-glow-soft: color-mix(in srgb, var(--color-primary) 52%, #fff);
  --bv-cta-glow-pale: color-mix(in srgb, var(--color-primary) 18%, #fff);
  position: relative;
  isolation: isolate;
  overflow: visible;
  transition:
    background 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Kanten: konisk gradient maskert til en 2px ring. */
.bv-app-site .btn.btn-primary::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  z-index: -1;
  padding: 2px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  animation: bv-cta-glow-rotate 3.6s linear infinite;
  background: conic-gradient(
    from var(--bv-cta-glow-angle),
    var(--bv-cta-glow-deep),
    var(--bv-cta-glow-mid),
    var(--bv-cta-glow-pale),
    var(--bv-cta-glow-soft),
    var(--bv-cta-glow-deep)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Fyllet: svak konisk tone over primærfargen, under teksten. */
.bv-app-site .btn.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  animation: bv-cta-glow-rotate 3.6s linear infinite;
  background: conic-gradient(
    from var(--bv-cta-glow-angle),
    color-mix(in srgb, var(--bv-cta-glow-deep) 28%, var(--color-primary)),
    color-mix(in srgb, var(--bv-cta-glow-mid) 18%, var(--color-primary)),
    color-mix(in srgb, var(--bv-cta-glow-pale) 14%, var(--color-primary)),
    color-mix(in srgb, var(--bv-cta-glow-soft) 20%, var(--color-primary)),
    color-mix(in srgb, var(--bv-cta-glow-deep) 28%, var(--color-primary))
  );
}

@media (hover: hover) {
  .bv-app-site .btn.btn-primary:is(:hover, :focus-visible) {
    background: var(--color-primary);
    box-shadow:
      var(--shadow-lg),
      0 0 14px color-mix(in srgb, var(--bv-cta-glow-mid) 28%, transparent),
      0 0 26px color-mix(in srgb, var(--bv-cta-glow-deep) 16%, transparent);
    transform: scale(1.04);
  }

  .bv-app-site .btn.btn-primary:is(:hover, :focus-visible)::before {
    opacity: 0.85;
  }

  .bv-app-site .btn.btn-primary:is(:hover, :focus-visible)::after {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bv-app-site .btn.btn-primary::before,
  .bv-app-site .btn.btn-primary::after {
    animation: none;
    transition-duration: 0.2s;
  }

  .bv-app-site .btn.btn-primary:is(:hover, :focus-visible) {
    transform: none;
  }
}

/* ---------- Knapp i hver funksjonsseksjon ---------- */
/* Teksten på knappen sier hva seksjonen hjelper med (ikke bare «Prøv gratis»). */
.bv-lp-deep__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--bv-lp-gap-block);
}