/* ESPFlight homepage: content-driven hero, consistent rhythm, readable content.
   Scoped to the home page so Docs, API, admin, and other sections stay untouched.
   Revision 2026-10-18. */
.homePage{
  --home-section-space:clamp(68px,6vw,92px);
  --home-grid-gap:clamp(24px,3vw,38px);
}
/* Wider content on very large monitors, while preserving one alignment edge
   across header, hero, cards, and footer. Never expand individual sections alone. */
@media(min-width:1700px){.homePage{--contentMax:1340px}}
@media(min-width:2400px){.homePage{--contentMax:1440px}}

/* Remove viewport-height dependence: at small browser zoom the CSS viewport
   can be thousands of pixels tall, even though the hero content isn't. */
.homePage .hero{
  min-height:0;
  padding-block:clamp(48px,5vw,76px) clamp(48px,4vw,64px);
}
.homePage .heroGrid{
  grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  align-items:center;
  gap:clamp(36px,4.5vw,68px);
}
.homePage .heroGrid>*{min-width:0}
.homePage .heroCopy{padding-bottom:0}
.homePage .heroBadge{font-size:11px;line-height:1.4;letter-spacing:.105em;padding:9px 12px}
html[lang="en"] .homePage .hero h1.heroSlogan{
  font-size:clamp(45px,3.45vw,58px);
  line-height:1.12;
  letter-spacing:-.037em;
  margin:24px 0 20px;
  max-width:none;
}
.homePage .heroSlogan>span,.homePage .heroSlogan>em{display:block}
.homePage .heroSlogan>em{font-size:.88em;white-space:normal;margin-top:.08em}
.homePage .heroLead{max-width:570px;font-size:16.5px;line-height:1.72;margin:0;color:var(--muted)}
.homePage .heroButtons{margin-top:26px;gap:12px;flex-wrap:wrap}
.homePage .heroButtons .button{min-height:48px}
.homePage .hardwarePhotoVisual{
  height:clamp(410px,31.5vw,520px);
  min-height:0;
  border-radius:24px;
}
.homePage .heroHardwareImage{object-position:center 57%}
.homePage .realBuildBadge{font-size:10px;letter-spacing:.1em}
.homePage .realBuildCaption strong{font-size:16px}
.homePage .realBuildCaption small{font-size:10px;line-height:1.5;letter-spacing:.04em}
.homePage .trustStrip{margin-top:clamp(32px,3.5vw,48px)}
.homePage .trustStrip>span{font-size:11px;line-height:1.45;letter-spacing:.06em}

/* Reading rhythm: avoid tall empty panels and inconsistent section headings. */
.homePage .section,
.homePage .poweredSection,
.homePage .partnerTeaserSection{padding-block:var(--home-section-space)}
.homePage .sectionTitle{margin-bottom:36px}
.homePage .sectionTitle p{margin-top:16px;max-width:680px;line-height:1.72}
.homePage .platformCards,.homePage .audienceGrid{gap:var(--home-grid-gap)}
.homePage .platformCard{min-height:315px;padding:28px}
.homePage .platformCard h3{margin:34px 0 14px}
.homePage .platformCard p{font-size:14.5px;line-height:1.7}
.homePage .cardLink{padding-top:22px}
.homePage .audienceCard{min-height:290px}
.homePage .philosophyGrid,.homePage .splitSection,.homePage .appSplit{gap:clamp(34px,5vw,72px)}
.homePage .manifestoCard{padding:clamp(24px,3vw,34px)}
.homePage .philosophyNote{margin-top:30px;max-width:1200px;line-height:1.7}
.homePage .appSection .sectionTitle h2{line-height:1.22}
.homePage .poweredInner{gap:clamp(34px,5vw,72px)}
.homePage .partnerTeaser{gap:24px}

@media(min-width:1700px){
  .homePage .hero h1.heroSlogan{font-size:clamp(50px,3vw,60px)}
  .homePage .hardwarePhotoVisual{height:clamp(460px,30vw,548px)}
}
@media(max-width:1020px){
  .homePage .hero{min-height:0;padding-block:52px 56px}
  .homePage .heroGrid{grid-template-columns:minmax(0,1fr);max-width:780px;gap:30px}
  .homePage .heroCopy{padding:0}
  .homePage .hardwarePhotoVisual{height:auto;min-height:0;aspect-ratio:16/10}
  .homePage .trustStrip{margin-top:34px}
  .homePage .platformCard{min-height:260px}
  .homePage .audienceCard{min-height:260px}
}
@media(max-width:700px){
  .homePage{--home-section-space:64px;--home-grid-gap:14px}
  .homePage .hero{padding-block:34px 48px}
  .homePage .heroGrid{gap:26px}
  .homePage .heroBadge{font-size:10px;letter-spacing:.07em;padding:8px 11px}
  html[lang="en"] .homePage .hero h1.heroSlogan{
    font-size:clamp(35px,9.6vw,44px);
    line-height:1.16;
    letter-spacing:-.033em;
    margin:20px 0;
  }
  .homePage .heroSlogan>em{font-size:.86em}
  .homePage .heroLead{font-size:15.5px;line-height:1.72}
  .homePage .heroButtons{margin-top:22px;gap:10px}
  .homePage .heroButtons .button{min-height:48px;white-space:normal}
  .homePage .hardwarePhotoVisual{aspect-ratio:1.23;min-height:0;border-radius:20px}
  .homePage .heroHardwareImage{object-position:center 57%}
  .homePage .realBuildCaption strong{font-size:14px}
  .homePage .realBuildCaption small{font-size:9px}
  .homePage .trustStrip{margin-top:26px;gap:8px;padding:8px}
  .homePage .trustStrip>span{min-height:54px;font-size:10px;letter-spacing:.02em;padding:10px 7px}
  .homePage .sectionTitle{margin-bottom:28px}
  .homePage .platformCard{min-height:245px;padding:24px}
  .homePage .platformCard h3{margin-top:24px}
  .homePage .audienceCard{min-height:0}
  .homePage .philosophyNote{margin-top:26px}
}
@media(max-width:380px){
  html[lang="en"] .homePage .hero h1.heroSlogan{font-size:clamp(33px,9.35vw,36px)}
  .homePage .trustStrip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .homePage .heroBadge{font-size:9px}
}
/* RTL copy needs more line height and normal letter spacing. */
html[lang="fa"] .homePage .hero h1.heroSlogan{
  font-size:clamp(39px,3.5vw,51px);
  line-height:1.43;
  letter-spacing:0;
  margin:20px 0;
}
html[lang="fa"] .homePage .heroLead{font-size:16.5px;line-height:1.96}
html[lang="fa"] .homePage .trustStrip>span{letter-spacing:0;line-height:1.7}
@media(max-width:700px){
  html[lang="fa"] .homePage .hero h1.heroSlogan{font-size:clamp(31px,8vw,37px);line-height:1.5}
  html[lang="fa"] .homePage .heroLead{font-size:15px;line-height:1.94}
}