/* ============================================================
   ORON — SEKSJON 11 · garanti
   Risikoen tas bort. Ett utsagn, en målestokk, en setning.
   Visualen er ikke et stempel — det er en skala: 60 hakk,
   ett for hver dag garantien varer. Dag 1 og hvert tiende hakk
   står dypere, dag 60 er det eneste oransje i seksjonen.
   Bredden (748px) deles med grunnlegger-seksjonen under, slik
   at venstrekanten er den samme gjennom hele avslutningen.
   ============================================================ */

.s-garanti {
  /* Delt måltakt med grunnlegger (.gr-wrap) — samme venstrekant */
  --gar-rail: 748px;
  /* Lesemål for brødteksten: bevisst smalere enn skalaen */
  --gar-mal: 30rem;

  /* Skalaens fire nivåer: dag · ti dager · måned · dag 60 */
  --gar-hakk:        clamp(8px,  0.80vw, 11px);
  --gar-hakk-ti:     clamp(14px, 1.40vw, 19px);
  --gar-hakk-maaned: clamp(20px, 2.00vw, 27px);
  --gar-hakk-sist:   clamp(24px, 2.40vw, 33px);

  /* 26 → 46. Taket er satt slik at utsagnet står på en linje og
     måler nøyaktig like bredt som skalaen under — tittelen ER
     målestokken. Gulvet er satt av den låste sammensetningen
     «pengene‑tilbake‑garanti», som må få plass på 320px. */
  --gar-tittel: clamp(1.625rem, 0.78rem + 2.96vw, 2.875rem);

  padding-block: clamp(88px, 4.4vw + 62px, 152px);
}

/* ---------- Båndet ---------- */
.garanti-band {
  max-width: var(--gar-rail);
  margin-inline: auto;
}

/* ---------- Utsagnet ---------- */
.garanti-tittel {
  font-size: var(--gar-tittel);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h2);
  color: var(--or-ink-900);
  text-wrap: balance;
}

/* Over 40px tåler displayet den stramme sperringen */
@media (min-width: 1024px) {
  .garanti-tittel { letter-spacing: var(--ls-display); }
}

/* ---------- Målestokken ---------- */
/* Skalaen hører til utsagnet og ligger tett under det; pausen ned
   til setningen er lang — de 60 dagene går før du bestemmer deg. */
.garanti-maal {
  margin-top: clamp(var(--s-6), 2.2vw, var(--s-10));
}

/* 60 like brede celler — ett hakk i slutten av hver dag. Dermed er
   alle seks tidagersbolkene nøyaktig like brede, månedsskillet
   lander på midten, og dag 60 lander på høyre kant. */
.garanti-maal__spor {
  position: relative;
  display: grid;
  grid-template-columns: repeat(60, 1fr);
  align-items: start;
  justify-items: end;
  height: var(--gar-hakk-sist);
  /* Skalaen måles opp fra venstre når seksjonen kommer i bildet */
  clip-path: inset(0 100% 0 0);
  transition: clip-path calc(var(--t-reveal) * 1.5) var(--e-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.garanti-maal.is-in .garanti-maal__spor { clip-path: inset(0 0 0 0); }

/* Grunnlinja skalaen henger fra — den er ryggraden, og skal være
   den mest tegnede streken i skalaen */
.garanti-maal__spor::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--or-ink-400);
}

.garanti-hakk {
  width: 1px;
  height: var(--gar-hakk);
  background: var(--or-ink-300);
}

/* Hver tiende dag */
.garanti-hakk--ti {
  height: var(--gar-hakk-ti);
  background: var(--or-ink-500);
}

/* Månedsskillet — dag 30, midt på skalaen */
.garanti-hakk--maaned {
  height: var(--gar-hakk-maaned);
  background: var(--or-ink-700);
}

/* Dag 60 — seksjonens eneste oransje */
.garanti-hakk--sist {
  width: 2px;
  height: var(--gar-hakk-sist);
  background: var(--or-orange);
}

/* ---------- Setningen ---------- */
.garanti-brod {
  margin-top: clamp(var(--s-12), 5vw, var(--s-20));
  max-width: var(--gar-mal);
  font-size: var(--fs-lead);
  line-height: 1.55;
  letter-spacing: var(--ls-body);
  color: var(--or-ink-700);
  text-wrap: pretty;
}

/* «e-post» skal aldri brekke på bindestreken */
.garanti-udelelig { white-space: nowrap; }

/* ---------- Redusert bevegelse: skalaen står ferdig oppmålt ---------- */
@media (prefers-reduced-motion: reduce) {
  .garanti-maal__spor { clip-path: none; }
}