/* Homepage hero (spec: docs/superpowers/specs/2026-09-10-homepage-hero-design.md). Loaded only on the homepage,
   after toc.css and header.css. Colour and type come from tokens.css; the only literals are #fff and rgba().
   The legacy theme's .page-template-default h1 / p / a / li / ul / span rules match by tag at (0,1,1), so every
   rule here carries the hero class plus an element or a second class.
   Full bleed is done in CSS against #content: width is 100cqw of #content (which excludes a classic
   scrollbar, so the hero and its 15px column line up with the header at every width), with a 100vw fallback
   for browsers without container query units, rather than the Visual Composer script the old banner used, so
   the hero is the right size from the first paint. The button row and proof list are capped at 760px, inside
   the 1140px column.
   Below 1200px the text column's side padding is 15px to match the mobile header's logo edge. Below 992px the
   video is gated off (see home-hero.html) and the poster becomes the permanent background, so the ::before
   scrim switches from the desktop horizontal gradient to a near-uniform vertical one, keeping full-width text
   lines above AA contrast over the bright glass in the poster. */
body.home #content{overflow-x:clip;container-type:inline-size;}
.pd-home-hero{position:relative;width:100vw;margin-left:calc(50% - 50vw);width:100cqw;margin-left:calc(50% - 50cqw);min-height:640px;overflow:hidden;background:var(--pd-ink);color:#fff;font-family:var(--pd-body);display:flex;align-items:center;}
.pd-home-hero-media{position:absolute;inset:0;z-index:0;}
.pd-home-hero-media img,.pd-home-hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%;display:block;margin:0;padding:0;}
.pd-home-hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(17,26,58,.9) 0%,rgba(17,26,58,.72) 45%,rgba(17,26,58,.3) 100%);}
.pd-home-hero-in{position:relative;z-index:2;width:100%;max-width:1140px;margin:0 auto;padding:172px 0 64px;}
.pd-home-hero .pd-eb{display:block;margin:0;padding:0;font:600 11.5px/1.5 var(--pd-label);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72);}
.pd-home-hero h1{font:400 54px/1.1 var(--pd-display);color:#fff;margin:22px 0 18px;padding:0;max-width:15ch;text-wrap:balance;letter-spacing:-.005em;}
.pd-home-hero .pd-home-hero-sub{font:400 19px/1.55 var(--pd-body);color:rgba(255,255,255,.88);max-width:44ch;margin:0;padding:0;letter-spacing:0;}
.pd-home-hero .pd-home-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;max-width:760px;}
.pd-home-hero .pd-btn{display:inline-block;font:600 14.5px/1 var(--pd-label);letter-spacing:.02em;padding:13px 20px;border-radius:4px;background:var(--pd-blue);color:#fff;text-decoration:none;white-space:nowrap;transition:background-color .15s ease;}
.pd-home-hero .pd-btn:hover,.pd-home-hero .pd-btn:focus{background:var(--pd-blue-deep);color:#fff;text-decoration:none;}
.pd-home-hero .pd-btn--ghost{background:transparent;border:1px solid rgba(255,255,255,.6);}
.pd-home-hero .pd-btn--ghost:hover,.pd-home-hero .pd-btn--ghost:focus{background:rgba(255,255,255,.14);color:#fff;}
.pd-home-hero .pd-home-hero-proof{list-style:none;margin:34px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 26px;font:600 12px/1.4 var(--pd-label);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72);max-width:760px;}
.pd-home-hero-proof li{list-style:none;margin:0;padding:0;}
.pd-home-hero-proof b{color:#fff;font-weight:600;}
.pd-home-hero-proof .pd-star{display:inline;color:var(--pd-gold);letter-spacing:.05em;}
.pd-home-hero-proof a{display:inline;padding:0;font:inherit;color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:3px;}
.pd-home-hero-proof a:hover,.pd-home-hero-proof a:focus{color:#fff;text-decoration:underline;}
.pd-home-hero a:focus-visible{outline:2px solid #fff;outline-offset:2px;}
@media (max-width:1199.98px){
  .pd-home-hero-in{padding:180px 15px 56px;}
}
@media (max-width:991.98px){
  /* No video below 992px: the poster is the permanent background, so the scrim goes vertical and
     nearly uniform to keep the full-width text lines above AA contrast over the bright glass. */
  .pd-home-hero::before{background:linear-gradient(180deg,rgba(17,26,58,.92) 0%,rgba(17,26,58,.84) 100%);}
}
@media (max-width:767.98px){
  .pd-home-hero{min-height:auto;}
  .pd-home-hero-in{padding:120px 15px 48px;}
  .pd-home-hero h1{font-size:36px;line-height:1.15;}
  .pd-home-hero .pd-home-hero-sub{font-size:17px;}
  .pd-home-hero .pd-home-hero-proof{flex-direction:column;gap:8px;}
}
@media (max-width:479.98px){
  .pd-home-hero .pd-home-hero-cta{flex-direction:column;}
  .pd-home-hero .pd-btn{text-align:center;}
}
@media (prefers-reduced-motion:reduce){
  .pd-home-hero .pd-btn{transition:none;}
}