/* NAQEL Typography System — V16
   Central type scale for the whole site. Keep this file separate during active development. */
:root{
  --type-body:1.0625rem;          /* 17px */
  --type-body-sm:1rem;            /* 16px */
  --type-meta:.9375rem;           /* 15px */
  --type-button:1rem;             /* 16px */
  --type-h4:clamp(1.0625rem,1rem + .25vw,1.25rem);
  --type-h3:clamp(1.25rem,1.12rem + .55vw,1.55rem);
  --type-h2:clamp(1.8rem,1.45rem + 1.35vw,2.55rem);
  --type-h1:clamp(2.25rem,1.65rem + 2.6vw,3.7rem);
  --type-hero:clamp(2.5rem,1.7rem + 3.45vw,4.35rem);
  --leading-body:1.75;
  --leading-compact:1.55;
  --leading-heading:1.22;
  --tracking-heading:-.018em;
}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-size:var(--type-body);line-height:var(--leading-body)}

h1,h2,h3,h4,h5,h6{
  line-height:var(--leading-heading);
  letter-spacing:var(--tracking-heading);
  text-wrap:balance;
}
h1{font-size:var(--type-h1)}
h2{font-size:var(--type-h2)}
h3{font-size:var(--type-h3)}
h4{font-size:var(--type-h4)}
p{line-height:var(--leading-body);text-wrap:pretty}

/* UI text */
.nav-links a,.btn,.submit-btn,.menu-btn{font-size:var(--type-button)}
.field label,.field>span,.form-card label>span,.contact-form label>span,fieldset legend{font-size:var(--type-body-sm)}
input,textarea,select,button{font:inherit}
input,textarea,select{font-size:1rem;line-height:1.5}

/* Small text remains readable, never decorative dust. */
.eyebrow,.section-title>small,.section-title small,.store-platform,.app-version-card dt,
.contact-method strong,.story-badge,.faq-tabs span,.app-phone-shell>small,
.app-store-panel>small,.footer-grid li,.download-strip p{font-size:var(--type-meta)}

.section-title h2,.about-copy h2,.story-cta h2,.big-cta h2{font-size:var(--type-h2)}
.inner-hero h1,.contact-head h1{font-size:var(--type-h1)}
.home-hero h1,.app-hero-copy h1{font-size:var(--type-hero)}

.section-title p,.inner-hero p,.contact-head p,.app-hero-copy p,.app-version-card p,
.app-feature-grid p,.why-card p,.faq-group details p{font-size:var(--type-body)}

/* Legal and long-form pages: comfortable measure for Arabic reading. */
.legal-content p,.legal-content li,.prose p,.prose li,.policy-content p,.policy-content li{max-width:78ch}

/* Footer should stay calm rather than compete with page content. */
.site-footer{font-size:1rem}
.site-footer h4{font-size:1.0625rem}
.site-footer .foot-bottom{font-size:.875rem}
.store-copy small{font-size:.68rem;line-height:1.1}
.store-copy strong{font-size:.95rem;line-height:1.1}

@media (max-width:900px){
  :root{--type-body:1.03125rem;--type-h1:clamp(2.15rem,1.75rem + 2.2vw,3rem);--type-hero:clamp(2.3rem,1.75rem + 3vw,3.35rem)}
}
@media (max-width:620px){
  :root{--type-body:1rem;--type-body-sm:1rem;--type-meta:.9375rem;--leading-body:1.7}
  .nav-links a{font-size:1rem}
}

/* Legacy cascade overrides: V16 is the single typography authority. */
body{font-size:var(--type-body)!important;line-height:var(--leading-body)!important}
.home-hero h1{font-size:var(--type-hero)!important;line-height:1.16!important}
.home-hero p{font-size:1.125rem!important}
.section-title h2{font-size:var(--type-h2)!important;line-height:var(--leading-heading)!important}
.section-title p{font-size:var(--type-body)!important}
.card h3,.step-card h3{font-size:var(--type-h3)!important}
.card p,.step-card p{font-size:var(--type-body-sm)!important}

/* Contact UI */
.contact-form label>span,.contact-form legend{font-size:var(--type-body-sm)!important}
.choice-grid label span{font-size:.9375rem!important;line-height:1.55!important}
.contact-method small,.hours small,.contact-method-box small,.contact-hours small{font-size:.875rem!important}
.contact-method strong,.hours strong,.contact-method-box strong,.contact-hours strong{font-size:1rem!important}
.form-head h2{font-size:clamp(1.75rem,1.4rem + 1.1vw,2.25rem)!important}
.form-head p{font-size:var(--type-body-sm)}

/* Legal/policy pages */
.policy-page .article-wrap h2{font-size:clamp(1.5rem,1.28rem + .75vw,1.9rem)!important;line-height:1.45!important}
.policy-page .article-wrap h3{font-size:clamp(1.15rem,1.06rem + .35vw,1.35rem)!important;line-height:1.5!important}
.policy-page .article-wrap p,.policy-page .article-wrap li{font-size:var(--type-body)!important;line-height:1.9!important}
.policy-page .inner-visual-hero .inner-hero-copy p{font-size:var(--type-body)!important}

/* Footer balance and readability */
.site-footer .download-copy h3{font-size:1.45rem!important;line-height:1.4!important}
.site-footer .download-copy p{font-size:.9375rem!important;line-height:1.75!important}
.site-footer h4{font-size:1.0625rem!important;line-height:1.45!important}
.site-footer li a,.site-footer .brand-foot p{font-size:.9375rem!important;line-height:1.75!important}

@media (max-width:620px){
  .home-hero p{font-size:1rem!important}
  .policy-page .article-wrap p,.policy-page .article-wrap li{font-size:1rem!important}
  .choice-grid label span{font-size:.9375rem!important}
}

/* V17.4 content-only legal typography */
.policy-content .article-wrap h2{font-size:clamp(1.5rem,1.28rem + .75vw,1.9rem)!important;line-height:1.45!important}
.policy-content .article-wrap h3{font-size:clamp(1.15rem,1.06rem + .35vw,1.35rem)!important;line-height:1.5!important}
.policy-content .article-wrap p,.policy-content .article-wrap li{font-size:var(--type-body)!important;line-height:1.9!important}
.policy-content .inner-visual-hero .inner-hero-copy p{font-size:var(--type-body)!important}
@media(max-width:700px){.policy-content .article-wrap p,.policy-content .article-wrap li{font-size:1rem!important}}