/* home-unify.css (FIX186): one design system for the homepage.
   Loaded only on the homepage (body.home) via $PAGE_HEAD in index.html. Overrides spacing, heading scale and
   card shape so every section reads as one site. Delete the <link> in index.html to undo it completely. */

body.home{
  --u-sec-y:84px;            /* vertical rhythm for every section */
  --u-sec-y-sm:56px;         /* on phones */
  --u-h2:clamp(2.1rem,3.6vw,3rem);
  --u-radius:14px;
  --u-line:#DDE3ED;
  --u-shadow:0 1px 2px rgba(0,26,74,.05),0 10px 28px rgba(0,26,74,.07);
}

/* 1. Same vertical rhythm everywhere */
body.home .sec,
body.home .ha-sec,
body.home .tz,
body.home .ao-sec{padding-top:var(--u-sec-y);padding-bottom:var(--u-sec-y)}
body.home .ha{padding-top:calc(var(--u-sec-y) - 8px);padding-bottom:var(--u-sec-y)}
body.home .ha-svc{padding-top:36px;padding-bottom:36px}
body.home .ao-sec{border-top:0;border-bottom:0}

/* 2. One heading scale: every section h2 is the same font, size and tracking */
body.home .sec-hd h2,
body.home .ha-h2,
body.home .tz-head h2,
body.home .ao-sec h2,
body.home .sec h2.h,
body.home .hx-faq h2,
body.home .cta h2{
  font-family:var(--font-d)!important;
  font-weight:400;
  font-size:var(--u-h2);
  line-height:1.04;
  letter-spacing:1.2px;
  margin-top:0;
  margin-bottom:14px;
  text-wrap:balance;
}
body.home .ao-sec .ao-h{font-family:var(--font-d)!important;font-weight:400;font-size:var(--u-h2);letter-spacing:1.2px;line-height:1.04}
/* same accent rule everywhere: red on light backgrounds, gold on dark ones */
body.home .sec-hd h2 em,body.home .tz-head h2 em{font-style:normal;color:var(--red)}
body.home .sec-dark .sec-hd h2 em,body.home .sec-navy .sec-hd h2 em,body.home .tz-head h2 em,body.home .hx-sec h2 em{color:var(--gold-lt)}

body.home .sec h2[style]{font-size:var(--u-h2)!important;letter-spacing:1.2px!important;line-height:1.04!important}

/* 3. One section-intro width and size */
body.home .sec-hd{margin-bottom:40px;max-width:720px}
body.home .sec-hd.center{margin-left:auto;margin-right:auto}
body.home .sec-hd p,body.home .ha-sub,body.home .tz-head p{font-size:16.5px;line-height:1.65}

/* 4. One card shape: same radius, border and shadow on every light card */
body.home .ha-field,
body.home .ha-get li,
body.home .ha-steps li,
body.home .ao-card,
body.home .card,
body.home .eq-card,
body.home .rev-card,
body.home .review,
body.home .hx-math{border-radius:var(--u-radius)}
body.home .ha-field,body.home .ha-get li,body.home .ha-steps li{border-color:var(--u-line);box-shadow:var(--u-shadow)}
body.home .ha-field{transition:transform .15s,border-color .15s,box-shadow .15s}
body.home .ha-field:hover{transform:translateY(-2px)}

/* 5. Same wrapper width for the academy blocks and the older sections */
body.home .ha-w{max-width:var(--wrap,1180px)}

/* 6. Buttons: one shape and height */
body.home .btn{border-radius:10px}
body.home .btn-lg{min-height:52px}

/* 7. Phones */
@media (max-width:820px){
  body.home .sec,body.home .ha-sec,body.home .tz,body.home .ao-sec{padding-top:var(--u-sec-y-sm);padding-bottom:var(--u-sec-y-sm)}
  body.home .ha{padding-top:44px;padding-bottom:var(--u-sec-y-sm)}
  body.home .sec-hd{margin-bottom:28px}
}
@media (prefers-reduced-motion:reduce){body.home .ha-field{transition:none}body.home .ha-field:hover{transform:none}}