/* ============================================================
   ORON — SEKSJON: siste-cta
   Sluttkortet. Full bredde, merkevareoransje, midtstilt stabel:
   merke → overskrift → ledetekst → knapp → mikrolinje.

   Feltet er lys: en hvit glorie rett bak merket, og et fall mot
   dyp brent oransje nedover. Fallet er ikke pynt — det er det som
   gir de små linjene nederst nok kontrast (hvitt på ren #F25533
   er 3,43:1, som bare holder for stor, fet display-type), og det
   er det som leverer seksjonen inn i den svarte footeren under.
   ============================================================ */

.s-siste-cta {
  /* Lokal palett — alt avledet av tokens */
  --cta-ink:   var(--or-white);
  --cta-quiet: color-mix(in srgb, var(--or-white) 88%, transparent);

  /* Loddrett takt. Merket sitter høyt, mikrolinjen dypt — det er
     det som lar fargefallet gjøre kontrastjobben. */
  --cta-pad:   clamp(68px, 2.0vw + 42px, 72px);

  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: var(--cta-pad);
  color: var(--cta-ink);

  background-color: var(--or-orange);
  background-image:
    /* 2 — skyggen helt nede. Ligger øverst i stabelen og gjør de siste
       hundre pikslene mørke nok til at kanten mot den svarte footeren
       blir en overgang, ikke en strek. */
    linear-gradient(180deg,
      transparent 62%,
      color-mix(in srgb, var(--or-black) 12%, transparent) 84%,
      color-mix(in srgb, var(--or-black) 30%, transparent) 100%),
    /* 1 — fargefallet. Stoppene er satt etter måling, ikke etter følelse:
       ledeteksten lander på ~59 % og mikrolinjen på ~85 % av
       seksjonshøyden, og begge må klare 4,5:1 mot hvit tekst. */
    linear-gradient(180deg,
      transparent 0%,
      transparent 15%,
      color-mix(in srgb, var(--or-orange-deep) 66%, transparent) 50%,
      color-mix(in srgb, var(--or-orange-deep) 90%, transparent) 74%,
      var(--or-orange-deep) 94%,
      var(--or-orange-deep) 100%);
}

.s-siste-cta > .container {
  position: relative;
  z-index: var(--z-base);
}

/* ---------- Stabelen ---------- */

.s-siste-cta .cta-end {
  max-width: 980px;
  margin-inline: auto;
  text-align: center;
}

/* ---------- Merket og lyset bak det ---------- */

.s-siste-cta .cta-end__mark {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: clamp(26px, 1.6vw + 16px, 38px);
}

.s-siste-cta .cta-mark {
  position: relative;
  z-index: var(--z-base);
  width: clamp(46px, 1.6vw + 30px, 56px);
  height: auto;
  color: var(--cta-ink);
}

/* Glorien er en ring, ikke en flekk: bare 2,5 % hvitt der merket står
   (ellers spiser lyset opp kontrasten mot det hvite merket), topp
   7,5 % litt utenfor, og helt borte igjen før ledeteksten. */
.s-siste-cta .cta-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(1040px, 168vw);
  aspect-ratio: 13 / 9;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(ellipse closest-side at 50% 50%,
    color-mix(in srgb, var(--or-white) 2.5%, transparent) 0%,
    color-mix(in srgb, var(--or-white) 6%, transparent) 17%,
    color-mix(in srgb, var(--or-white) 7.5%, transparent) 29%,
    color-mix(in srgb, var(--or-white) 5%, transparent) 46%,
    color-mix(in srgb, var(--or-white) 2.5%, transparent) 61%,
    transparent 84%);
}

/* ---------- Type ---------- */

/* Bruddet er styrt, ikke balansert: 21ch er akkurat bredt nok til
   «Konkurrenten din publiserte» og for smalt til «ingenting» på
   samme linje. Da lander slaget — «ingenting i går.» — alene.
   Målet skalerer med skriftstørrelsen, så bruddet holder fra
   1920 ned til 600 px. */
.s-siste-cta .cta-end__title {
  max-width: 21ch;
  margin-inline: auto;
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: -0.034em;
  font-weight: var(--fw-bold);
  color: var(--cta-ink);
  text-wrap: wrap;
}

/* Ren hvit, ikke tonet: en tonet ledetekst faller under 4,5:1 på
   dette feltet. Hierarkiet ligger i størrelsen, ikke i fargen. */
.s-siste-cta .cta-end__lead {
  max-width: 46ch;
  margin: clamp(18px, 1vw + 10px, 24px) auto 0;
  font-size: var(--fs-lead);
  line-height: 1.5;
  letter-spacing: -0.014em;
  color: var(--cta-ink);
  text-wrap: pretty;
}

.s-siste-cta .cta-end__action {
  margin-top: clamp(30px, 1.8vw + 18px, 44px);
}

/* Hvit knapp på oransje: skyggen må være varm og dyp. De nøytrale
   --sh-* forsvinner mot dette feltet. */
.s-siste-cta .cta-end__btn {
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--or-white) 60%, transparent) inset,
    0 2px 5px color-mix(in srgb, var(--or-orange-deep) 42%, transparent),
    0 18px 38px -16px color-mix(in srgb, var(--or-black) 62%, transparent);
}

.s-siste-cta .cta-end__btn:hover {
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--or-white) 60%, transparent) inset,
    0 3px 9px color-mix(in srgb, var(--or-orange-deep) 48%, transparent),
    0 24px 48px -16px color-mix(in srgb, var(--or-black) 66%, transparent);
}

.s-siste-cta .cta-end__micro {
  max-width: 48ch;
  margin: clamp(18px, 0.8vw + 12px, 22px) auto 0;
  font-size: var(--fs-small);
  line-height: 1.55;
  letter-spacing: -0.004em;
  color: var(--cta-quiet);
  text-wrap: pretty;
}

/* Litt luft rundt punktet, som i footerens bunnlinje */
.s-siste-cta .cta-end__sep { padding-inline: var(--s-1); opacity: .55; }

/* «pengene-tilbake-garanti» skal aldri knekke på bindestrekene sine */
.s-siste-cta .cta-end__bit { white-space: nowrap; }

/* ---------- Responsivt ---------- */

/* Under ~600 px er linjen for smal til å styre bruddet med bredde.
   Da overtar balansering, som gir tre jevne linjer. */
@media (max-width: 600px) {
  .s-siste-cta {
    --cta-pad: clamp(62px, 11vw, 72px);
  }
  .s-siste-cta .cta-end__title {
    max-width: 100%;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }
  .s-siste-cta .cta-end__lead { max-width: 32ch; }
  .s-siste-cta .cta-end__btn { width: 100%; padding-inline: var(--s-5); }

  /* Tre korte linjer i stedet for en lang som knekker midt i et
     skilletegn. Punktene forsvinner — linjeskiftet skiller nå. */
  .s-siste-cta .cta-end__micro {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 3px;
  }
  .s-siste-cta .cta-end__sep { display: none; }
}

/* Uten JavaScript legger app.js aldri på .is-in. Sluttkortet er det
   siste brukeren skal se — det skal stå der uansett. */
@media (scripting: none) {
  .s-siste-cta [data-reveal] { opacity: 1; transform: none; }
}