/* ==========================================================================
   PatriFlux — pages d’atterrissage SEO (leads-cgp, leads-assurance-vie-luxembourgeoise…)
   Dépend de styles.css.
   ========================================================================== */

.nav-actions-always { display: flex !important; }

.landing-hero { position: relative; overflow: hidden; padding: calc(var(--nav-h) + 80px) 0 80px; border-bottom: 1px solid var(--frost); }
.landing-hero .hero-bg {
  -webkit-mask-image: radial-gradient(ellipse 55% 70% at 78% 45%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse 55% 70% at 78% 45%, #000 0%, transparent 70%);
}
.landing-hero-inner { position: relative; display: flex; flex-direction: column; gap: 28px; max-width: 880px; }
.landing-hero-inner .display { font-size: clamp(38px, 5.4vw, 66px); max-width: 18ch; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.two-col .h2 { margin-top: 24px; }
.two-col-top .h2 { max-width: 16ch; }
.prose { font-size: 18px; line-height: 1.6; color: var(--steel); max-width: 60ch; }
.prose p + p { margin-top: 18px; }
.prose strong { font-weight: 400; color: var(--ink); }

.crit-grid .card { min-height: 0; gap: 10px; }
.crit-k { font-size: 12px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.crit-card h3 { font-size: 24px; }
.crit-card p:not(.card-num):not(.crit-k) { font-size: 15px; }

.two-col-top .checklist { margin-top: 32px; }
.two-col-top .checklist span:not(.check) { font-size: 14px; }
.landing-timeline { margin-top: 32px; }
.landing-timeline .step { padding-bottom: 40px; }
.landing-timeline .step h3 { font-size: clamp(20px, 2vw, 26px); }
.landing-timeline .step p:not(.step-num) { font-size: 15px; }

.cta.cta-simple { grid-template-columns: 1fr; max-width: 980px; }
.btn-outline-light { border: 1px solid rgba(255, 255, 255, .45); color: #fff; }
.btn-outline-light::before { background: rgba(255, 255, 255, .12); transform: scaleY(0); transform-origin: bottom; transition: transform .4s var(--ease); }
.btn-outline-light:hover { border-color: #fff; }
.btn-outline-light:hover::before { transform: scaleY(1); }

.related { margin-top: 32px; display: flex; flex-direction: column; gap: 14px; }

@media (max-width: 960px) {
  .two-col { grid-template-columns: 1fr; gap: 40px; }
  .landing-hero { padding-top: calc(var(--nav-h) + 48px); }
  .crit-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .crit-grid { grid-template-columns: 1fr; }
}