/* owned by WP3 — see docs/design-system.md */
/* usecases, proof, steps, cta, text / page-header */

/* ── page header (default.html.twig) ── */
.page-header{padding-top:calc(var(--nav-offset) + var(--space-8));padding-bottom:var(--space-8)}

/* .section-head (components.css) sets max-width:var(--measure) but no auto-centering,
   which is fine for the left-aligned reference use (engines_compact). steps/usecases/proof/cta
   are .section--center blocks, so without this the now-capped-width .section-head box would
   hug the left edge instead of centering, breaking the centered heading layout. */
.section--center .section-head{margin-inline:auto}

/* ── usecases ── */
.usecases::after{content:'';position:absolute;bottom:0;left:0;right:0;height:40%;background:linear-gradient(to bottom,rgba(255,255,255,0),var(--color-white));z-index:0;pointer-events:none}
.usecase{padding:var(--space-11) var(--space-8) var(--space-9);text-align:center}

/* ── proof / stats / testimonial ── */
.proof-stats{margin:0 0 var(--space-14)}
.stat{padding:var(--space-10) var(--space-8);text-align:center}
.stat-icon{width:64px;height:64px;border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-6);border:var(--border-w) solid color-mix(in srgb,var(--accent) 15%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.stat-icon svg{width:32px;height:32px;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;fill:none}
.stat:nth-child(1){--accent:var(--color-cyan)}
.stat:nth-child(2){--accent:var(--color-coral)}
.stat:nth-child(3){--accent:var(--color-green)}
.stat-value{font-size:var(--fs-stat);font-weight:var(--fw-black);color:var(--fg-strong);margin-bottom:var(--space-1-5);letter-spacing:var(--ls-tight)}
.stat-label{font-size:.9rem;color:var(--fg-strong);font-weight:var(--fw-regular)}

.testimonial-wrap{position:relative;z-index:var(--z-raised);max-width:100%;margin:var(--space-14) auto 0;text-align:center}
.testimonial-card{padding:var(--space-12) var(--space-14) var(--space-10);position:relative}
.testimonial-card::before{content:'';position:absolute;top:-1px;left:3rem;right:3rem;height:3px;border-radius:0 0 3px 3px;background:var(--color-cyan)}
.quote-mark{font-size:4rem;color:var(--color-cyan);line-height:.8;margin-bottom:var(--space-4);font-family:var(--font-serif);opacity:.6}
.quote{font-family:var(--font-heading);font-size:clamp(1.15rem,2vw,1.45rem);color:var(--fg-strong);line-height:1.7;margin-bottom:var(--space-8);font-weight:var(--fw-regular);font-style:italic;letter-spacing:var(--ls-snug)}
.quote-attribution{display:flex;flex-direction:column;align-items:center;gap:.25rem}
.quote-author{font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--fg-strong);letter-spacing:.01em}
.quote-role{font-size:var(--fs-xs);color:var(--fg-strong);margin-top:0;font-weight:var(--fw-regular)}
.quote-company-logo{margin-top:var(--space-5);display:inline-block;padding:var(--space-2) var(--space-5);border-radius:var(--radius-lg);background:rgba(0,0,0,.35);border:var(--border-w) solid rgba(255,255,255,.08)}
.quote-company-logo img{height:20px;width:auto;display:block}

/* ── steps ── */
/* Side padding (24px) was notably tighter than sibling cards using the same rhythm
   (.usecase, .stat: 32px sides) — brought in line; top/bottom were already consistent. */
.step{text-align:center;padding:var(--space-11) var(--space-8) var(--space-8)}
.step:nth-child(1) .step-number{--accent:var(--color-cyan)}
.step:nth-child(2) .step-number{--accent:var(--color-coral)}
.step:nth-child(3) .step-number{--accent:var(--color-green)}
.step:nth-child(4) .step-number{--accent:var(--color-purple)}

/* ── final CTA ── */
.final-cta{padding-bottom:var(--space-20)}
.final-cta .section-lead{max-width:580px}
.cta-actions{max-width:var(--container-md);margin-inline:auto}
.cta-option-card{gap:var(--space-4);justify-content:space-between;text-align:left;padding:var(--space-8) var(--space-7)}
.cta-option-card .btn{align-self:flex-start}
.cta-option-copy{max-width:28rem}

@media(max-width:1024px){
  .usecases-grid,.steps{gap:var(--space-8)}
}
@media(max-width:640px){
  .usecase{padding:var(--space-9) var(--space-6) var(--space-7)}
  .stat:not(:last-child)::after{display:none}
  .testimonial-card{padding:var(--space-8) var(--space-6) var(--space-7)}
  .testimonial-card::before{left:1.5rem;right:1.5rem}
  .cta-option-card{padding:1.6rem 1.4rem}
  .cta-option-card .card-title--lg{font-size:1.25rem}
}

/* ── error pages (error/error404, error/error) ── */
.error-page{padding-bottom:var(--space-20)}
.error-code{display:block;margin-bottom:var(--space-3);font-family:var(--font-heading);font-size:var(--fs-stat);line-height:1;color:var(--color-gray-300)}
.error-text{max-width:38rem;margin-inline:auto}
.error-actions{display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:center;margin-top:var(--space-10)}