/* ESPFlight final visual system — typography, rhythm and non-structural production polish. */

/* Improve small supporting-text contrast in light mode without changing hierarchy. */
:root{
  --dim:#606B78;
  --accent:#247653;
  --headingAccentA:#27825C;
  --headingAccentB:#329A6E;
  --rhythm-section-title-gap:44px;
  --rhythm-card-gap:18px;
  --rhythm-page-hero-top:84px;
  --rhythm-page-hero-bottom:80px;
}
html[data-theme="dark"]{
  --accent:#42D392;
  --headingAccentA:#42D392;
  --headingAccentB:#42B883;
}

/* Keep the bright brand green for logo/decoration, but use an accessible gradient for text. */
.accentText,
.hero h1 em{
  background:linear-gradient(100deg,var(--headingAccentA),var(--headingAccentB));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.logoWord span{color:var(--accent)}
.legalHeroCard small,.boardLabel small{font-size:11px}
.docsV2CalloutLabel,.docsV3NavGroup>summary,.docsV3SearchResults span{font-size:11px}

/* Shared visual rhythm. Similar page families use the same spacing contract. */
.sectionTitle{margin-bottom:var(--rhythm-section-title-gap)}
.sectionTitle p{margin-top:18px}
.pageHero,
.partnerHero,
.aboutHero{padding:var(--rhythm-page-hero-top) 0 var(--rhythm-page-hero-bottom)}
.platformCards,
.audienceGrid,
.principleGrid,
.specGrid,
.firmwareGrid,
.appFeatureGrid,
.stageGrid{gap:var(--rhythm-card-gap)}

/* Canonical English typography roles. */
html[lang="en"] .hero h1:not(.heroSlogan){
  font-size:clamp(50px,5vw,68px);
  line-height:1.12;
  letter-spacing:-.044em;
}
html[lang="en"] .hero h1.heroSlogan{
  font-size:clamp(48px,4.7vw,64px);
  line-height:1.15;
  letter-spacing:-.042em;
}
html[lang="en"] .pageHero h1,
html[lang="en"] .partnerHero h1,
html[lang="en"] .aboutHero h1{
  font-size:clamp(44px,4.6vw,62px);
  line-height:1.16;
  letter-spacing:-.04em;
}
html[lang="en"] .sectionTitle h2,
html[lang="en"] .philosophyCopy h2,
html[lang="en"] .offerCopy h2,
html[lang="en"] .foundingHomeGrid h2{
  font-size:clamp(32px,3.2vw,46px);
  line-height:1.22;
  letter-spacing:-.034em;
}
html[lang="en"] .openSection h2,
html[lang="en"] .poweredInner h2{
  font-size:clamp(36px,3.6vw,50px);
  line-height:1.18;
  letter-spacing:-.036em;
}
html[lang="en"] .centerCta h2{
  font-size:clamp(30px,2.7vw,38px);
  line-height:1.24;
  letter-spacing:-.03em;
}
html[lang="en"] .foundingPanel h2{
  font-size:clamp(32px,3.1vw,44px);
  line-height:1.18;
  letter-spacing:-.032em;
}
html[lang="en"] .partnerTeaser h2{
  font-size:clamp(28px,2.9vw,38px);
  line-height:1.22;
  letter-spacing:-.03em;
}
html[lang="en"] .legalDocumentHeader h2{
  font-size:clamp(30px,3vw,42px);
  line-height:1.22;
  letter-spacing:-.032em;
}
html[lang="en"] .platformCard h3,
html[lang="en"] .audienceCard h3{
  font-size:24px;
  line-height:1.30;
  letter-spacing:-.025em;
}
html[lang="en"] .stageCard h3{font-size:23px;line-height:1.32}
html[lang="en"] .applyCard h3{font-size:26px;line-height:1.30}
html[lang="en"] .principleGrid h3,
html[lang="en"] .specGrid h3,
html[lang="en"] .firmwareGrid h3,
html[lang="en"] .appFeatureGrid h3,
html[lang="en"] .architectureLayer h3{line-height:1.34}
html[lang="en"] .policyDocument h2{line-height:1.42}
html[lang="en"] .docsV2ArticleHeader h1{
  font-size:clamp(36px,3.4vw,42px);
  line-height:1.18;
  letter-spacing:-.034em;
}
html[lang="en"] .docsV2Section h2{line-height:1.34}

/* Canonical Persian typography roles. Persian keeps a more open vertical rhythm. */
html[lang="fa"] .hero h1.heroSlogan{
  font-size:clamp(40px,4.4vw,50px);
  line-height:1.38;
  letter-spacing:0;
}
html[lang="fa"] .pageHero h1,
html[lang="fa"] .partnerHero h1,
html[lang="fa"] .aboutHero h1{
  font-size:clamp(36px,4vw,44px);
  line-height:1.45;
  letter-spacing:0;
}
html[lang="fa"] .sectionTitle h2,
html[lang="fa"] .philosophyCopy h2,
html[lang="fa"] .offerCopy h2,
html[lang="fa"] .foundingHomeGrid h2,
html[lang="fa"] .openSection h2,
html[lang="fa"] .poweredInner h2,
html[lang="fa"] .centerCta h2,
html[lang="fa"] .foundingPanel h2,
html[lang="fa"] .partnerTeaser h2,
html[lang="fa"] .legalDocumentHeader h2{
  font-size:clamp(28px,3vw,36px);
  line-height:1.58;
  letter-spacing:0;
}
html[lang="fa"] .platformCard h3,
html[lang="fa"] .audienceCard h3,
html[lang="fa"] .stageCard h3,
html[lang="fa"] .applyCard h3,
html[lang="fa"] .principleGrid h3,
html[lang="fa"] .specGrid h3,
html[lang="fa"] .firmwareGrid h3,
html[lang="fa"] .appFeatureGrid h3,
html[lang="fa"] .architectureLayer h3{line-height:1.62}
html[lang="fa"] .policyDocument h2{font-size:24px;line-height:1.65}
html[lang="fa"] .docsV2ArticleHeader h1{
  font-size:clamp(34px,3.5vw,42px);
  line-height:1.42;
  letter-spacing:0;
}
html[lang="fa"] .docsV2Section h2{
  font-size:clamp(24px,2.4vw,30px);
  line-height:1.62;
}

/* Functional microcopy stays readable without making decorative mockups heavier. */
.docsV2NavGroup strong,
.docsV2Toc>strong{font-size:11px}
.docsV2Toc a{font-size:12px}
.docsV2Meta{font-size:12px}
.docsV2Version{font-size:11px}
.docsV2Pager span{font-size:11px}
.foundingSignals small,
.foundingSeal small,
.stageCard small,
.offerNotes span,
.partnerStagePills span,
.applicationChecklist b{font-size:11px}

/* Bring the desktop language control onto the same 40–44 px utility rhythm as its neighbors. */
.languagePicker>summary{
  height:40px;
  min-width:62px;
  padding-inline:10px;
  border-radius:10px;
  font-size:11.5px;
}
.languagePicker>summary svg{width:16px;height:16px;flex-basis:16px}
.languageMenu{top:48px}

/* Mobile table discoverability. Does not alter table, cell or RTL display semantics. */
.docsTableScrollHint{
  display:none;
  margin:0 0 8px;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
  font-weight:600;
}
.docsTableScrollHint .scrollHintIcon{
  display:inline-block;
  margin-inline-end:6px;
  color:var(--accent);
  font-size:14px;
  line-height:1;
}
.docsV3TableWrap{
  scrollbar-width:thin;
  scrollbar-color:rgba(107,116,130,.55) transparent;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
}
.docsV3TableWrap::-webkit-scrollbar{height:6px}
.docsV3TableWrap::-webkit-scrollbar-thumb{background:rgba(107,116,130,.45);border-radius:99px}
.docsV3TableWrap::-webkit-scrollbar-track{background:transparent}
.docsV3Code,
.docsProtocolExample pre{
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
}

@media(max-width:700px){
  :root{
    --rhythm-section-title-gap:32px;
    --rhythm-card-gap:14px;
    --rhythm-page-hero-top:62px;
    --rhythm-page-hero-bottom:66px;
  }
  .sectionTitle p{margin-top:14px}

  html[lang="en"] .hero h1:not(.heroSlogan){
    font-size:clamp(40px,10.8vw,48px);
    line-height:1.16;
    letter-spacing:-.038em;
  }
  html[lang="en"] .hero h1.heroSlogan{
    font-size:clamp(36px,10.2vw,44px);
    line-height:1.18;
    letter-spacing:-.036em;
  }
  html[lang="en"] .pageHero h1,
  html[lang="en"] .partnerHero h1,
  html[lang="en"] .aboutHero h1{
    font-size:clamp(34px,9.2vw,40px);
    line-height:1.20;
    letter-spacing:-.034em;
  }
  html[lang="en"] .sectionTitle h2,
  html[lang="en"] .philosophyCopy h2,
  html[lang="en"] .offerCopy h2,
  html[lang="en"] .foundingHomeGrid h2{
    font-size:clamp(28px,7.4vw,34px);
    line-height:1.26;
    letter-spacing:-.03em;
  }
  html[lang="en"] .openSection h2,
  html[lang="en"] .poweredInner h2{
    font-size:clamp(30px,8vw,36px);
    line-height:1.24;
  }
  html[lang="en"] .centerCta h2,
  html[lang="en"] .foundingPanel h2,
  html[lang="en"] .partnerTeaser h2,
  html[lang="en"] .legalDocumentHeader h2{
    font-size:clamp(28px,7.4vw,32px);
    line-height:1.28;
  }
  html[lang="en"] .platformCard h3,
  html[lang="en"] .audienceCard h3{font-size:22px;line-height:1.34}
  html[lang="en"] .stageCard h3{font-size:22px;line-height:1.34}
  html[lang="en"] .applyCard h3{font-size:24px;line-height:1.34}
  html[lang="en"] .docsV2ArticleHeader h1{
    font-size:clamp(32px,8.4vw,36px);
    line-height:1.22;
    letter-spacing:-.03em;
  }

  html[lang="fa"] .hero h1.heroSlogan{
    font-size:clamp(32px,8.8vw,36px);
    line-height:1.42;
  }
  html[lang="fa"] .pageHero h1,
  html[lang="fa"] .partnerHero h1,
  html[lang="fa"] .aboutHero h1{
    font-size:clamp(30px,8.2vw,34px);
    line-height:1.55;
  }
  html[lang="fa"] .sectionTitle h2,
  html[lang="fa"] .philosophyCopy h2,
  html[lang="fa"] .offerCopy h2,
  html[lang="fa"] .foundingHomeGrid h2,
  html[lang="fa"] .openSection h2,
  html[lang="fa"] .poweredInner h2,
  html[lang="fa"] .centerCta h2,
  html[lang="fa"] .foundingPanel h2,
  html[lang="fa"] .partnerTeaser h2,
  html[lang="fa"] .legalDocumentHeader h2{
    font-size:clamp(25px,7vw,28px);
    line-height:1.68;
  }
  html[lang="fa"] .docsV2ArticleHeader h1{
    font-size:clamp(30px,8vw,32px);
    line-height:1.50;
  }
  html[lang="fa"] .docsV2Section h2{
    font-size:clamp(23px,6.1vw,24px);
    line-height:1.70;
  }

  /* Table hint remains hidden at widths where the full table can still fit. */
  .docsTableScrollHint{display:none}
  .docsTableScrollable{
    box-shadow:
      inset 18px 0 18px -22px rgba(33,53,71,.42),
      inset -18px 0 18px -22px rgba(33,53,71,.42),
      0 1px 2px rgba(24,39,75,.025);
  }
  html[data-theme="dark"] .docsTableScrollable{
    box-shadow:
      inset 18px 0 18px -22px rgba(231,231,236,.34),
      inset -18px 0 18px -22px rgba(231,231,236,.34),
      0 1px 2px rgba(0,0,0,.10);
  }
}

@media(min-width:641px) and (max-width:700px){
  .docsTableScrollable{box-shadow:0 1px 2px rgba(24,39,75,.025)}
  html[data-theme="dark"] .docsTableScrollable{box-shadow:0 1px 2px rgba(0,0,0,.10)}
}
@media(max-width:640px){
  .docsTableScrollHint{display:block}
}


/* 2026-09-18 requested polish: shared section rhythm + professional trust strip. */
:root{
  --rhythm-content-section-space:104px;
  --trust-strip-gap:10px;
}

/* Same vertical breathing room for standard content containers across marketing/product pages. */
.section,
.poweredSection,
.partnerTeaserSection{
  padding-block:var(--rhythm-content-section-space);
}

/* Trust strip: compact glass information rail on desktop, balanced 2x2 grid on mobile. */
.trustStrip{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:stretch;
  gap:var(--trust-strip-gap);
  height:auto;
  margin-top:56px;
  padding:10px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  background:
    linear-gradient(135deg,rgba(66,184,131,.075),transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.72),rgba(246,246,247,.78));
  box-shadow:0 18px 50px rgba(33,53,71,.08),inset 0 1px 0 rgba(255,255,255,.72);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  color:var(--muted)!important;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.105em;
}
.trustStrip::before{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(circle at 50% 0,rgba(66,211,146,.13),transparent 46%);
}
.trustStrip>span{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-width:0;
  min-height:52px;
  padding:12px 14px;
  text-align:center;
  border:1px solid color-mix(in srgb,var(--line) 82%,transparent);
  border-radius:12px;
  background:rgba(255,255,255,.52);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.trustStrip>span::before{
  content:"";
  flex:0 0 auto;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(66,184,131,.09),0 0 16px rgba(66,184,131,.28);
}
.trustStrip>i{display:none}
html[lang="fa"] .trustStrip{letter-spacing:0}

html[data-theme="dark"] .trustStrip{
  background:
    linear-gradient(135deg,rgba(66,211,146,.08),transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));
  box-shadow:0 22px 60px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.04);
}
html[data-theme="dark"] .trustStrip>span{
  background:rgba(255,255,255,.025);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

@media(max-width:1020px){
  .trustStrip{
    grid-template-columns:repeat(2,minmax(0,1fr));
    font-size:10px;
  }
}

@media(max-width:700px){
  :root{
    --rhythm-content-section-space:72px;
    --trust-strip-gap:8px;
  }
  .trustStrip{
    grid-template-columns:repeat(2,minmax(0,1fr));
    margin-top:38px;
    padding:8px;
    border-radius:16px;
    overflow:hidden;
    white-space:normal;
    font-size:9.5px;
    line-height:1.45;
    letter-spacing:.075em;
  }
  .trustStrip>span{
    min-height:54px;
    padding:10px 8px;
    gap:7px;
    border-radius:10px;
  }
  .trustStrip>span::before{
    width:6px;
    height:6px;
    box-shadow:0 0 0 3px rgba(66,184,131,.08),0 0 12px rgba(66,184,131,.22);
  }
}

@media(max-width:360px){
  .trustStrip{
    grid-template-columns:1fr;
    font-size:9.5px;
  }
  .trustStrip>span{min-height:44px}
}