/* ── Freebie hero ──────────────────────────────────────────────────────────
   Shared photo hero for the free-resource pages (calculator, readiness
   check). Matches the Claude playbook hero: the glass-cube photo pinned to
   the right with its left edge faded into white and ink text on white on
   desktop; on phones and tablets the whole photo sits as a band under the
   nav with the text below it.
   Usage: add class "fh" to the hero element, put
   <img class="fh-photo" ...> as its first child, and wrap the text in an
   element with class "fh-text". */

html body .fh{position:relative;overflow:hidden;padding-left:0 !important;padding-right:0 !important;background:#fff !important;color:#14110D;text-align:left !important}
html body .fh > :not(.fh-photo){position:relative;z-index:1}
html body .fh .fh-photo{display:block;pointer-events:none;user-select:none;object-fit:cover;z-index:0}

/* text on white: ink, whatever the page's own hero colours were */
html body .fh h1{color:#14110D !important;text-align:left !important;margin-left:0 !important;margin-right:0 !important}
html body .fh h1 em{color:rgba(20,17,13,.55) !important}
html body .fh p,html body .fh .hero-sub,html body .fh .article-meta{color:rgba(20,17,13,.74) !important;text-align:left !important;margin-left:0 !important;margin-right:0 !important}
html body .fh .hero-sub strong,html body .fh .article-meta strong{color:#14110D !important}
html body .fh .article-tag,html body .fh .article-tag a{color:rgba(20,17,13,.64) !important}

/* nav over a light hero keeps its dark text */
body:has(.fh) #nav.on-hero{background:rgba(255,255,255,.55) !important;box-shadow:inset 0 0 0 1px rgba(17,17,22,.07),0 12px 34px rgba(17,17,22,.08) !important}
body:has(.fh) #nav.on-hero .wordmark,body:has(.fh) #nav.on-hero .wm-word,body:has(.fh) #nav.on-hero .nav-links > li > a,body:has(.fh) #nav.on-hero .nav-drop-btn{color:#14110D !important}
body:has(.fh) #nav.on-hero .hamburger span{background:#14110D !important}
body:has(.fh) #nav.on-hero .btn-pill{background:#14110D !important;color:#fff !important}

/* desktop: photo on the right 58%, text in the left half */
@media (min-width:1024px){
  html body .fh{min-height:560px;display:flex;flex-direction:column;justify-content:center;padding-top:120px !important;padding-bottom:64px !important}
  html body .fh .fh-photo{position:absolute;top:0;right:0;width:58%;height:100%;object-position:50% 55%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 32%);mask-image:linear-gradient(90deg,transparent 0%,#000 32%)}
  html body .fh .fh-text{width:100%;max-width:1180px;margin:0 auto;padding-left:28px;padding-right:28px;box-sizing:border-box}
  html body .fh .fh-text > *{max-width:min(540px,44vw)}
}

/* phones + tablets: full photo as a band under the nav, text below */
@media (max-width:1023px){
  html body .fh{padding-top:68px !important;padding-bottom:40px !important}
  html body .fh .fh-photo{position:relative;width:100%;height:auto;aspect-ratio:1448/1086;max-height:440px;object-position:50% 50%;margin-bottom:12px;
    -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,#000 82%,transparent 100%)}
  html body .fh .fh-text{padding-left:20px;padding-right:20px;max-width:720px;margin:0 auto}
}