/* ============================================================
   page.css — landing-page specific styles (hero directions +
   sections) layered on app.css. Tokens from colors_and_type.css.
   ============================================================ */

/* ---------- shared hero scaffolding ---------- */
.hero{position:relative;display:flex;align-items:center;min-height:100svh;
  padding:140px 0 90px;overflow:hidden}
.hero-head{margin:0 0 22px}
.hero-lead{max-width:600px;margin:0 0 34px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero-actions.center-actions{justify-content:center}

.hero-cred{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin:40px 0 0;padding:0}
.hero-cred li{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;
  letter-spacing:0.02em;color:var(--fg-3)}
.hero-cred li svg{color:var(--sky-cyan)}
.hero-cred.compact{gap:8px 0;flex-direction:column}

.hero-scroll-hint{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--fg-4);
  font-size:11px;letter-spacing:0.22em;text-transform:uppercase;animation:floaty 2.8s ease-in-out infinite;
  transition:opacity .25s linear}
@keyframes floaty{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}

/* ---------- A · stage (centred wordmark) ---------- */
.hero-stage-inner{max-width:860px}
.hero-stage .hero-head{font-size:clamp(2.9rem,1.5rem+6vw,6rem)}

/* ---------- B · photography (full-bleed) ---------- */
.hero-photo{align-items:flex-end;min-height:100svh;padding-bottom:96px}
.hero-photo-bg{position:absolute;inset:0;z-index:0}
.hero-photo-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) brightness(0.82)}
.hero-photo-wash{position:absolute;inset:0;background:
  linear-gradient(180deg, rgba(5,7,13,0.55) 0%, rgba(5,7,13,0.12) 32%, rgba(5,7,13,0.62) 78%, var(--void) 100%),
  linear-gradient(90deg, rgba(5,7,13,0.78) 0%, rgba(5,7,13,0.18) 56%, transparent 100%)}
.hero-photo-inner{max-width:720px;position:relative;z-index:2}
.hero-photo .hero-head{font-size:clamp(2.9rem,1.5rem+6vw,6rem);margin-top:22px}
.hero-photo .dot-pill{margin-bottom:6px}

/* ---------- C · editorial (split) ---------- */
.hero-editorial-inner{display:grid;grid-template-columns:1.05fr 0.95fr;gap:64px;align-items:center}
.hero-editorial .hero-head{font-size:clamp(2.6rem,1.4rem+4vw,4.4rem)}
.hero-editorial .hero-lead{margin-bottom:30px}
.hero-editorial-media{position:relative}

/* photographic plate (shared by editorial hero + safety) */
.hero-plate{position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--hairline);
  box-shadow:var(--shadow-lg);aspect-ratio:4/5}
.hero-plate img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) brightness(0.9)}
.hero-plate-wash{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(5,7,13,0.75) 100%)}
.hero-plate-stat{position:absolute;left:26px;bottom:24px}
.hero-plate-stat .stat-num{font-size:clamp(2.4rem,1.6rem+2vw,3.2rem)}
.plate-tag{position:absolute;left:18px;bottom:16px;font-size:11px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--fg-2);display:inline-flex;align-items:center;gap:8px}

/* ---------- section heads ---------- */
.section-head{max-width:680px;margin:0 0 var(--space-7)}
.section-head .h2{margin:0}
.section-lead{margin:18px 0 0}

/* ---------- specs band ---------- */
.specs-band{padding-top:var(--space-7)}
.specs-band .grid-4{gap:24px}
.specs-band .stat-num{text-align:left}

/* ---------- safety ---------- */
.safety-grid{align-items:center;gap:56px}
.safety-media .hero-plate{aspect-ratio:5/6}
.check-list{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.check-list li{display:flex;gap:13px;align-items:flex-start;color:var(--fg-2);font-size:15.5px;line-height:1.5}
.check-list li svg{flex:none;margin-top:2px;color:var(--glow-mint)}

/* ---------- coverage ---------- */
.coverage-body{max-width:620px;margin:24px 0 0;color:var(--fg-2)}
.coverage-note{display:inline-flex;align-items:center;gap:9px;margin-top:24px}
.coverage-note svg{color:var(--sky-cyan)}

/* ---------- faq ---------- */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:38px 56px}
.faq-item{padding-top:22px;border-top:1px solid var(--hairline)}
.faq-n{font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:0.06em;
  background:var(--aurora);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:13px}
.faq-q{font-family:var(--font-display);font-weight:700;font-size:17.5px;letter-spacing:-0.005em;
  color:var(--fg-1);line-height:1.3;margin:0 0 11px}
.faq-a{font-size:14.5px;color:var(--fg-2)}

/* ---------- process ---------- */
.step-grid{gap:28px}
.step{position:relative;padding-top:22px;border-top:1px solid var(--hairline)}
.step-n{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:0.06em;
  background:var(--aurora);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:16px}
.step-title{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-0.005em;color:var(--fg-1);margin:0 0 10px}
.step-body{font-size:14.5px;color:var(--fg-2)}

/* ---------- quote CTA ---------- */
.quote-cta{padding-bottom:var(--space-10)}
.quote-card{position:relative;text-align:center;max-width:760px;margin:0 auto;
  background:rgba(11,16,28,0.66);border:1px solid var(--hairline);border-radius:var(--r-xl);
  padding:64px 48px;backdrop-filter:blur(10px);box-shadow:var(--shadow-lg);overflow:hidden}
.quote-card .eyebrow-line{justify-content:center}
.quote-aurora{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--aurora)}
.quote-card::before{content:"";position:absolute;left:50%;top:-30%;width:80%;height:80%;transform:translateX(-50%);
  background:var(--aurora-glow);filter:blur(20px);pointer-events:none;opacity:.8}
.quote-head{position:relative;font-size:clamp(2rem,1.3rem+2.6vw,3.2rem);margin:0 0 18px}
.quote-lead{position:relative;max-width:520px;margin:0 auto 34px}

.foot-note{display:block;padding:6px 0;color:var(--fg-3)}

/* Operations column = credentials, not nav. Cyan check + fact text so it
   reads unmistakably as proof, never as a (greyed-out) link list. */
.foot-cred{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.foot-cred li{display:flex;align-items:flex-start;gap:9px;font-size:14px;line-height:1.45;color:var(--fg-2)}
.foot-cred li svg{flex:none;margin-top:1px;color:var(--sky-cyan)}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .hero{min-height:auto;padding:128px 0 72px}
  .hero-editorial-inner{grid-template-columns:1fr;gap:40px}
  .hero-editorial-media{max-width:420px}
  .hero-cred.compact{margin-top:30px}
  .safety-grid{grid-template-columns:1fr}
  .specs-band .grid-4{grid-template-columns:1fr 1fr;gap:32px 24px}
  .step-grid{grid-template-columns:1fr 1fr}
  .faq-grid{grid-template-columns:1fr;gap:30px}
  .hero-scroll-hint{display:none}
  .quote-card{padding:48px 28px}
}
@media (max-width:520px){
  .specs-band .grid-4,.step-grid{grid-template-columns:1fr}
}