/*
  ASPF TYPOGRAPHY LOCK — OWNER APPROVED REFERENCE
  ------------------------------------------------
  Permanent editorial hierarchy derived from the approved ASPF visual reference.
  DO NOT change font family or the three approved content sizes without explicit
  approval from Dr. Anwar Shaqar.

  H1 / Main title : IBM Plex Sans Arabic Bold — 43.2px
  H2 / Subtitle   : IBM Plex Sans Arabic Bold — 24px
  Body / Copy     : IBM Plex Sans Arabic Regular — 14.4px
*/

@font-face{
  font-family:"ASPF Arabic";
  src:url("/assets/assets/fonts/IBMPlexSansArabic-Regular.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"ASPF Arabic";
  src:url("/assets/assets/fonts/IBMPlexSansArabic-Bold.ttf") format("truetype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

:root{
  --aspf-font-family:"ASPF Arabic","IBM Plex Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif;
  --aspf-type-title:43.2px;
  --aspf-type-subtitle:24px;
  --aspf-type-body:14.4px;
  --aspf-leading-title:1.24;
  --aspf-leading-subtitle:1.42;
  --aspf-leading-body:1.82;
  --aspf-navy:#0B1F3A;
  --aspf-navy-deep:#07192F;
  --aspf-navy-mid:#0D3158;
  --aspf-gold:#C79232;
  --aspf-gold-soft:#E2BE68;
  --aspf-ivory:#F7F4ED;
}

html,body,button,a,input,select,textarea,label{
  font-family:var(--aspf-font-family)!important;
  letter-spacing:0!important;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

body{
  background:var(--aspf-ivory)!important;
}
.shell{
  max-width:1180px!important;
  margin:0 auto!important;
  padding:24px 18px 58px!important;
}

/* Premium brand header: visually connected to the hero. */
.brand{
  position:relative!important;
  z-index:3!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:24px!important;
  margin:0!important;
  padding:26px 52px 14px!important;
  background:linear-gradient(135deg,var(--aspf-navy-deep),var(--aspf-navy-mid))!important;
  border-bottom:1px solid rgba(226,190,104,.16)!important;
}
.brand img{
  width:215px!important;
  max-width:44vw!important;
  height:auto!important;
}
.brand-note{
  color:#E8D3A1!important;
  font-family:var(--aspf-font-family)!important;
  font-size:var(--aspf-type-body)!important;
  font-weight:400!important;
  line-height:1.7!important;
}

/* Approved hierarchy order: MAIN TITLE → SUBTITLE → BODY. */
.hero{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  text-align:center!important;
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  padding:54px 64px 50px!important;
  background:
    radial-gradient(circle at 12% -10%,rgba(226,190,104,.10),transparent 26%),
    radial-gradient(circle at 96% 78%,rgba(87,124,167,.18),transparent 30%),
    linear-gradient(140deg,var(--aspf-navy-deep) 0%,var(--aspf-navy-mid) 48%,#081D35 100%)!important;
  box-shadow:0 24px 60px rgba(7,25,47,.10)!important;
}
.hero::before{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  width:460px!important;
  height:460px!important;
  border:1px solid rgba(226,190,104,.22)!important;
  border-radius:50%!important;
  left:-250px!important;
  top:-280px!important;
  box-shadow:0 0 0 52px rgba(226,190,104,.025)!important;
}
.hero::after{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  width:380px!important;
  height:380px!important;
  border:1px solid rgba(140,170,202,.18)!important;
  border-radius:46% 54% 0 0!important;
  right:-230px!important;
  bottom:-120px!important;
  transform:rotate(-7deg)!important;
}
.hero>*{
  position:relative!important;
  z-index:2!important;
}
.hero h1{order:1!important;}
.hero .hook,.hero .eyebrow{order:2!important;}
.hero .lead,.hero>p:not(.hook):not(.eyebrow):not(.question){order:3!important;}
.hero .question{order:4!important;}
.hero .facts{order:5!important;}

/* 1. MAIN TITLE — LOCKED */
.hero h1{
  font-family:var(--aspf-font-family)!important;
  font-size:var(--aspf-type-title)!important;
  font-weight:700!important;
  line-height:var(--aspf-leading-title)!important;
  letter-spacing:0!important;
  margin:0 auto!important;
  width:100%!important;
  max-width:930px!important;
  text-align:center!important;
  color:#FFFFFF!important;
  text-wrap:balance!important;
}
.hero h1 span{display:inline!important;}
.hero h1 span:first-child::after{content:" ";}

/* 2. SUBTITLE — LOCKED */
.hero .hook,
.hero .eyebrow,
.intro-title,
.section-title,
.result-head h2,
.question-card h2,
.cta h3{
  font-family:var(--aspf-font-family)!important;
  font-size:var(--aspf-type-subtitle)!important;
  font-weight:700!important;
  line-height:var(--aspf-leading-subtitle)!important;
  letter-spacing:0!important;
}
.hero .hook,.hero .eyebrow{
  color:var(--aspf-gold-soft)!important;
  margin:24px auto 0!important;
  max-width:900px!important;
  text-align:center!important;
}

/* 3. BODY COPY — LOCKED */
.hero .lead,
.hero .question,
.hero>p:not(.hook):not(.eyebrow),
.intro-copy,
.section-copy,
.privacy,
.notice,
.result-head p,
.priority-card p,
.action p,
.diagnosis,
.cta p,
.opt-label,
.area span,
label,
input,
select,
textarea,
.consent label{
  font-family:var(--aspf-font-family)!important;
  font-size:var(--aspf-type-body)!important;
  font-weight:400!important;
  line-height:var(--aspf-leading-body)!important;
  letter-spacing:0!important;
}
.hero .lead,.hero>p:not(.hook):not(.eyebrow):not(.question){
  margin:18px auto 0!important;
  max-width:790px!important;
  text-align:center!important;
  color:#E2E8F0!important;
}
.hero .question{
  margin:26px auto 0!important;
  max-width:860px!important;
  text-align:center!important;
  color:#FFFFFF!important;
  font-weight:700!important;
}
.hero .question::before{
  content:""!important;
  display:block!important;
  width:300px!important;
  max-width:58vw!important;
  height:1px!important;
  margin:0 auto 20px!important;
  background:linear-gradient(90deg,transparent,var(--aspf-gold-soft),transparent)!important;
  box-shadow:0 0 10px rgba(226,190,104,.40)!important;
}

/* Owner-approved removals from the diagnostic landing page. */
.hero .facts,
.panel > .privacy{
  display:none!important;
}
.panel{margin-top:0!important;}

/* Elegant transition into the diagnostic content. */
.intro{
  margin-top:0!important;
  padding:42px 34px 0!important;
  text-align:center!important;
}
.intro-title{
  color:var(--aspf-navy)!important;
  margin:0 0 10px!important;
}
.intro-copy{
  max-width:760px!important;
  margin:0 auto!important;
  color:#69717D!important;
}
.stats{
  gap:12px!important;
  margin-top:28px!important;
}
.stat{
  background:#FFFFFF!important;
  border:1px solid rgba(11,31,58,.10)!important;
  border-top:2px solid rgba(199,146,50,.72)!important;
  padding:18px!important;
  box-shadow:0 10px 30px rgba(11,31,58,.045)!important;
}
.stat strong{
  color:var(--aspf-navy)!important;
}
.domains{
  gap:10px!important;
  margin-top:12px!important;
}
.domain-preview{
  background:#FFFFFF!important;
  border:1px solid rgba(11,31,58,.10)!important;
  padding:15px 16px!important;
  box-shadow:0 8px 24px rgba(11,31,58,.035)!important;
}
.domain-preview .n{
  color:var(--aspf-gold)!important;
}
.start-row{
  justify-content:center!important;
  margin-top:24px!important;
}
.btn-primary{
  background:var(--aspf-gold)!important;
  color:var(--aspf-navy-deep)!important;
  border-radius:0!important;
  padding:13px 24px!important;
  min-width:185px!important;
  box-shadow:0 8px 24px rgba(199,146,50,.16)!important;
}

/* Strong body content keeps body size; emphasis is weight only. */
.privacy strong,.notice strong,.diagnosis strong,
.priority-card h3,.action b,.domain-preview b,.head-main p{
  font-family:var(--aspf-font-family)!important;
  font-size:var(--aspf-type-body)!important;
  font-weight:700!important;
  line-height:1.65!important;
}

/* Fixed interface microcopy — not part of the editorial 3-level hierarchy. */
.brand span,
.facts span,
.domain-preview .n,
.head-main small,
.progress-meta,
.indicator-line,
.question-help,
.answer-state,
.priority-card .rank,
.matrix th,.matrix td,
.pill,.footer,.error,.success,
.btn-primary,.btn-back,.submit,.back,.cta a{
  font-family:var(--aspf-font-family)!important;
  font-size:16px!important;
  letter-spacing:0!important;
}

.intro-title,.section-title,.result-head h2,.question-card h2,.cta h3{margin-bottom:16px!important;}

/* No responsive font-size changes. Mobile adapts through wrapping and spacing only. */
@media(max-width:780px){
  .shell{padding:12px 10px 40px!important;}
  .brand{padding:20px 22px 12px!important;}
  .brand-note{display:none!important;}
  .hero{padding:38px 24px 40px!important;}
  .hero h1,.hero .lead,.hero>p{max-width:100%!important;}
  .intro{padding:32px 10px 0!important;}
  .options,.stats,.domains,.top-three,.actions,.grid,.areas{grid-template-columns:1fr!important;}
}