/* ============================================================
   redesign.css — prototype overrides (layered on top of styles.css)
   Two things only:
     #6  A tighter, calmer visual system (consistent surfaces,
         spacing rhythm, restrained accents).
     #2  Styling for the guided multi-step form.
   Stays 100% inside the EnergiValg green palette and Inter type.
   ============================================================ */

:root {
  --radius:     0.9rem;   /* one card radius everywhere */
  --radius-sm:  0.6rem;   /* inputs, small controls     */
  --shadow-sm:  0 1px 2px rgba(20, 32, 19, 0.05);
  --shadow-md:  0 8px 28px rgba(20, 32, 19, 0.07);
  --ring:       0 0 0 3px rgba(27, 106, 66, 0.14);
}

/* ── 1. Calmer canvas ─────────────────────────────────────────
   The decorative side-waves competed with the content. Quiet them
   right down so the page reads as "precise", not "busy". */
.side-banner { opacity: 0.45; }

/* ── 2. One consistent card language ──────────────────────────
   Only genuine cards get the unified treatment. Timeline steps
   (.step) and divider lists (.report-value-item) are intentionally
   NOT boxed — they're connected layouts by design. */
.sys-card,
.trust-article,
.calc-stat-v2,
.elov-widget,
.founder-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm);
}

/* ── 3. Consistent, slightly quieter section rhythm ───────────*/
main > section {
  border-radius: var(--radius);
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
section h2 {
  letter-spacing: -0.01em;
}

/* ── 4. Buttons: one shape, one motion ────────────────────────*/
.cta {
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  letter-spacing: 0.01em;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}
.cta:hover { box-shadow: var(--shadow-md); }
.cta-secondary { box-shadow: none; }

/* ── 5. Inputs: consistent radius + a calm green focus ring ───*/
.customer-form input,
.customer-form select {
  border-radius: var(--radius-sm);
}
.customer-form input:focus-visible,
.customer-form select:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--ring);
}

/* ── 6. Hero: a touch more air and a calmer eyebrow ───────────*/
.hero-content h1 { letter-spacing: -0.015em; }
.eyebrow { letter-spacing: 0.12em; }

/* ============================================================
   Guided multi-step form (#2)
   ============================================================ */

/* The form becomes a single calm card instead of a long scroll */
.customer-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.6rem 1.5rem 1.5rem;
}

/* Only the active step is shown */
.step-hidden { display: none !important; }

/* Active step shouldn't look like a nested box — flatten it */
.customer-form .form-section {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Progress header */
.stepper { margin-bottom: 1.4rem; }
.stepper-count {
  margin: 0 0 0.55rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
}
.stepper-bar {
  height: 6px;
  border-radius: 999px;
  background: #dce7dc;
  overflow: hidden;
}
.stepper-bar-fill {
  height: 100%;
  width: 25%;
  border-radius: 999px;
  background: var(--primary);
  transition: width 0.35s ease;
}

/* Give each step a calm, readable heading */
.form-section-title {
  font-size: 1.15rem;
  margin-bottom: 1rem;
}

/* Navigation row: Back on the left, primary action on the right */
.stepper-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.6rem;
}
.stepper-btn--back {
  margin-right: auto;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--primary-strong);
  font: inherit;
  font-weight: 600;
  min-height: 44px;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.stepper-btn--back:hover { border-color: var(--primary); background: #f1f6f1; }
.stepper-btn--back:focus-visible {
  outline: 2px solid var(--primary-strong);
  outline-offset: 2px;
}

/* The Next button reuses .cta; remove its default top margin in the row */
.stepper-nav .cta { margin-top: 0; }

@media (max-width: 480px) {
  .stepper-nav { flex-wrap: wrap; }
  .stepper-nav .cta,
  .stepper-nav button[type="submit"] { flex: 1; }
}

/* ============================================================
   Beregneren — væk med den ydre hvide boks.
   Overskrift, tekst og de indre kort (system-valg + resultater)
   står nu direkte på den grønne baggrund, så det ikke føles som
   "kasse i kasse". Samme rolige look som "Sådan virker det".
   ============================================================ */
/* Ét roligt, sammenhængende felt frem for løse kort. Et blødt, lyst
   panel (ikke den gamle hårde hvide boks) samler det, de indre kort
   er fladet ud, og luften er strammet, så blokken fylder mindre. */
.calculator {
  background: #f3f8f3;
  border: 1px solid #dde8dd;
  border-radius: var(--radius);
  padding: 1.15rem 1.2rem 1.2rem;
}

/* Strammere luft, så blokken fylder mindre */
.calculator h2 { margin-bottom: 0.3rem; }
.calc-intro { margin: 0 0 0.85rem; }
.calc-system-label { margin: 0 0 0.4rem; }
.sys-cards { gap: 0.5rem; margin-bottom: 0.7rem; }
.calc-inputs { gap: 0.6rem; margin-bottom: 0.75rem; }
.calc-disclaimer { margin: 0.45rem 0 0; }
.calc-nudge { margin: 0.5rem 0 0; }
.calc-cta { margin-top: 0.8rem; }

/* Fladere system-kort, så de føles som dele af ét panel */
.calculator .sys-card {
  border-width: 1px;
  box-shadow: none;
  padding: 0.55rem 0.8rem;
}
.calculator .sys-card:hover,
.calculator .sys-card.selected { box-shadow: none; }

/* Resultater: ingen grøn ramme om de to tal; flade hvide kort */
.calc-results-v2 {
  background: transparent;
  border: 0;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.calculator .calc-stat-v2 {
  box-shadow: none;
  padding: 0.85rem 1.1rem;
}

/* ============================================================
   "Sådan adskiller vi os" — blødt grønt felt (ikke et voldsomt
   mørkt bånd). De hvide celler beholder deres oprindelige look og
   står nu på en rolig grøn baggrund, så blokken sætter sig nænsomt
   fra de øvrige sektioner uden at råbe.
   ============================================================ */
.differentiator {
  background: #eaf3ec;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem 1.3rem 1.5rem;
}