/* ═══════ LEAD — landing page + email-gated report (loads AFTER hybrid-summary.css) ═══════
   Adds: marketing landing (page 0), the email gate card, and the locked-report zone.
   Reuses all wizard + editorial-summary styling from dirA.css / hybrid-summary.css. */

/* ───── chrome visibility per phase ───── */
.hdr-actions .act-report { display: none; }
body.is-unlocked .hdr-actions .act-report { display: inline-flex; }
body.is-landing .act-reset { display: none; }
body.is-landing .stepper { display: none; }

/* ════════ LANDING (page 0) ════════ */
.landing { display: grid; grid-template-columns: 1.12fr .88fr; gap: 60px; align-items: center; padding: 28px 0 36px; min-height: calc(100vh - 150px); }
.land-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--peel-700); font-weight: 700; margin-bottom: 22px; }
.land-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--peel); box-shadow: 0 0 0 4px var(--peel-tint); }
.land-h1 { font-size: clamp(2.5rem, 5.2vw, 3.85rem); line-height: 1.03; letter-spacing: -.035em; color: var(--ink); max-width: 14ch; }
.land-h1 .peel { color: var(--peel-700); }
.land-sub { font-size: clamp(1.15rem, 2vw, 1.42rem); font-family: var(--display); font-weight: 500; color: var(--ink); margin-top: 22px; letter-spacing: -.01em; line-height: 1.3; }
.land-body { font-size: 1.04rem; color: var(--ink-2); margin-top: 18px; line-height: 1.62; max-width: 52ch; }
.land-actions { display: flex; align-items: center; gap: 18px; margin-top: 34px; flex-wrap: wrap; }
.btn-lg { font-size: 1.02rem; font-weight: 700; padding: 16px 26px; border-radius: 13px; }
.btn-lg svg { width: 20px; height: 20px; transition: transform .18s; }
.btn-lg:hover svg { transform: translateX(3px); }
.land-reassure { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .78rem; color: var(--ink-3); }
.land-reassure svg { width: 15px; height: 15px; color: var(--peel-600); }

/* how-it-works panel */
.howto { background: var(--peel-tint-2); border: 1px solid var(--peel-tint); border-radius: var(--r-lg); padding: 30px 32px; box-shadow: var(--shadow-sm); }
.howto-h { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--peel-700); font-weight: 700; margin-bottom: 22px; }
.howto-step { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; border-top: 1px solid var(--peel-tint); }
.howto-step:first-of-type { border-top: none; padding-top: 0; }
.howto-step:last-of-type { padding-bottom: 0; }
.howto-num { width: 34px; height: 34px; border-radius: 10px; background: var(--surface); border: 1px solid var(--peel-tint); color: var(--peel-700); font-family: var(--display); font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: var(--shadow-sm); }
.howto-step .t { font-size: 1rem; font-weight: 600; color: var(--ink); }
.howto-step .d { font-size: .86rem; color: var(--ink-2); margin-top: 3px; line-height: 1.5; }
.howto-step.last .howto-num { background: var(--peel); border-color: var(--peel); color: var(--peel-ink); }

@media (max-width: 920px) {
  .landing { grid-template-columns: 1fr; gap: 36px; min-height: 0; padding-top: 8px; }
  .land-h1 { max-width: none; }
}

/* ════════ EMAIL GATE ════════ */
.gate { margin: 4px 0 8px; border: 1.5px solid var(--peel); border-radius: var(--r-lg); background:
  linear-gradient(180deg, var(--peel-tint-2), var(--surface)); box-shadow: var(--shadow); padding: 34px 36px; position: relative; overflow: hidden; }
.gate::after { content: ''; position: absolute; right: -70px; top: -70px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(46,196,182,.18), transparent 70%); pointer-events: none; }
.gate-tag { display: inline-flex; align-items: center; gap: 8px; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--peel-700); font-weight: 700; margin-bottom: 14px; }
.gate-tag svg { width: 15px; height: 15px; }
.gate h2 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.02em; color: var(--ink); line-height: 1.1; max-width: 20ch; }
.gate .gate-sub { font-size: 1.02rem; color: var(--ink-2); margin-top: 12px; max-width: 56ch; line-height: 1.58; position: relative; }

.gate-includes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 26px; margin: 24px 0 28px; position: relative; }
.gate-inc { display: flex; align-items: center; gap: 10px; font-size: .92rem; color: var(--ink-2); font-weight: 500; }
.gate-inc .ic { width: 26px; height: 26px; border-radius: 8px; background: var(--peel-tint); color: var(--peel-700); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gate-inc .ic svg { width: 15px; height: 15px; }

.gate-form { display: flex; gap: 12px; align-items: stretch; position: relative; max-width: 620px; }
.gate-input { flex: 1; display: flex; align-items: center; gap: 11px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 13px; padding: 0 18px; transition: .16s; }
.gate-input:focus-within { border-color: var(--peel); box-shadow: 0 0 0 4px var(--peel-tint); }
.gate-input svg { width: 19px; height: 19px; color: var(--ink-3); flex-shrink: 0; }
.gate-input input { flex: 1; border: none; outline: none; background: transparent; font-family: var(--sans); font-size: 1.02rem; color: var(--ink); padding: 16px 0; min-width: 0; }
.gate-input input::placeholder { color: var(--ink-4); }
.gate-form .btn-lg { white-space: nowrap; padding: 0 26px; }
.gate-err { font-size: .82rem; color: var(--neg); margin-top: 10px; font-weight: 600; display: none; position: relative; }
.gate-err.show { display: block; }
.gate-fine { font-size: .78rem; color: var(--ink-4); margin-top: 14px; position: relative; line-height: 1.5; }
.gate-fine a { color: var(--peel-700); }

@media (max-width: 620px) {
  .gate { padding: 26px 22px; }
  .gate-includes { grid-template-columns: 1fr; }
  .gate-form { flex-direction: column; }
  .gate-form .btn-lg { padding: 15px; justify-content: center; }
}

/* ── confirmation (after submit) ── */
.gate.done { border-color: var(--pos); background: linear-gradient(180deg, var(--pos-tint), var(--surface)); }
.gate.done::after { background: radial-gradient(circle, rgba(14,158,114,.16), transparent 70%); }
.gate-confirm { display: none; position: relative; }
.gate.done .gate-body { display: none; }
.gate.done .gate-confirm { display: flex; align-items: flex-start; gap: 20px; }
.gate-check { width: 52px; height: 52px; border-radius: 14px; background: var(--pos); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 8px 22px -6px rgba(14,158,114,.5); }
.gate-check svg { width: 28px; height: 28px; }
.gate-confirm .ct { font-size: 1.5rem; font-family: var(--display); font-weight: 600; letter-spacing: -.02em; color: var(--ink); line-height: 1.15; }
.gate-confirm .cd { font-size: 1rem; color: var(--ink-2); margin-top: 8px; line-height: 1.55; max-width: 56ch; }
.gate-confirm .cd b { color: var(--pos); }
.gate-confirm .cnote { font-size: .82rem; color: var(--ink-3); margin-top: 14px; font-family: var(--mono); }

/* ════════ LOCKED ZONE ════════ */
.locked-zone { position: relative; transition: filter .5s ease, opacity .5s ease; }
.locked-zone.locked { filter: blur(7px) saturate(.85); opacity: .5; pointer-events: none; user-select: none; max-height: 620px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 38%, transparent 96%); mask-image: linear-gradient(180deg, #000 38%, transparent 96%); }
.lock-peek { display: none; }
.locked-zone.locked + .lock-peek { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: -18px; font-size: .82rem; font-weight: 600; color: var(--ink-3); font-family: var(--mono); }
.locked-zone.locked + .lock-peek svg { width: 15px; height: 15px; color: var(--ink-4); }

/* ───── on-screen value gating (figures stay in the downloadable PDF report) ─────
   Hide the € amount on each ranked value driver (Drivers page + Results page)
   and the on-screen "Total annual savings (base case)". These numbers remain in
   the emailed PDF, so users download (and leave an email) to see the detail. */
.drv-val { display: none; }                          /* Drivers input page: per-driver €/yr (always hidden) */
body:not(.is-unlocked) .drow2 .val { display: none; }  /* Results: per-driver €/yr — revealed once the report is unlocked */
body:not(.is-unlocked) .dtotal { display: none; }      /* Results: Total annual savings — revealed once unlocked */