/* Harris Thermal — V1 product page family (5 pages)
   EXTRACTED VERBATIM from V1: the inline <style> block of the V1 product pages
   Wave 1 migration. Rules are byte-identical to V1 apart from the changes
   noted below; no design decision was taken here. */
/* ONE change from V1: the per-page hero image URL in `.px-hero .bg` is now
   --px-hero-bg, set per page from front-matter (plan S4.2). Everything else
   is byte-identical. */
/* APPROVED V2 SITEWIDE HERO ALIGNMENT (2026-08-24): .px-hero is a flex
   container, which made its .ht-wrap a shrink-to-fit flex item - the wrap
   collapsed to its content width and auto margins centered THAT box, leaving
   the hero content group 236px right of the shared 1200px content grid at
   1440px (a V1 quirk on every page). width:100% restores normal container
   behaviour so the eyebrow/h1/lead/CTAs start at the same grid edge as the
   header - the same approved fix the homepage carries. Content width, type,
   line breaks, hero height and mobile padding unchanged; below ~1250px the
   wrap was already full-width. */
.px-hero .ht-wrap{width:100%}

/* Photo hero */
.px-hero{position:relative;min-height:520px;display:flex;align-items:center;color:#fff;overflow:hidden;isolation:isolate}
.px-hero .bg{position:absolute;inset:0;background:var(--px-hero-bg) center/cover no-repeat;z-index:-2;transform:scale(1.04);animation:px-kb 16s ease-in-out infinite alternate}
@keyframes px-kb{from{transform:scale(1.04)}to{transform:scale(1.1)}}
.px-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(2,26,71,.93) 0%,rgba(2,26,71,.74) 45%,rgba(2,26,71,.28) 100%);z-index:-1}
.px-hero-inner{padding:96px 0;max-width:680px}
.px-eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#9dc1f5;background:rgba(29,111,209,.18);border:1px solid rgba(157,193,245,.35);padding:7px 16px;border-radius:999px;margin-bottom:22px}
.px-hero h1{font-size:clamp(2.1rem,4.2vw,3.2rem);line-height:1.12;font-weight:800;letter-spacing:-.02em;margin-bottom:18px}
.px-hero h1 em{font-style:normal;color:#7db4f7}
.px-hero p.lead{font-size:1.12rem;color:#d5e0f2;max-width:560px;margin-bottom:32px}
.px-ctas{display:flex;gap:14px;flex-wrap:wrap}
.px-btn{display:inline-block;font-weight:700;padding:15px 30px;border-radius:9px;font-size:1rem;transition:transform .15s,background .15s;text-decoration:none}
.px-btn-primary{background:var(--ht-blue-bright);color:#fff!important;box-shadow:0 6px 20px rgba(29,111,209,.45)}
.px-btn-primary:hover{background:#2b7fe3;transform:translateY(-2px)}
.px-btn-ghost{background:rgba(255,255,255,.1);color:#fff!important;border:1px solid rgba(255,255,255,.35)}
.px-btn-ghost:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}

/* Sections */
section.px-block{padding:92px 0}
section.px-block.soft{background:var(--ht-bg-soft)}
.px-sec-head{max-width:760px;margin:0 auto 52px;text-align:center}
.px-kicker{font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ht-blue-bright);margin-bottom:12px}
.px-sec-head h2{font-size:clamp(1.8rem,3.2vw,2.4rem);font-weight:800;letter-spacing:-.02em;color:var(--ht-navy);line-height:1.18;margin-bottom:14px}
.px-sec-head p{color:var(--ht-muted);font-size:1.04rem}

/* Split intro */
.px-split{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.px-split h2{font-size:clamp(1.8rem,3vw,2.3rem);font-weight:800;letter-spacing:-.02em;color:var(--ht-navy);line-height:1.18;margin-bottom:18px}
.px-split p{color:var(--ht-muted);margin-bottom:16px}
.px-checks{list-style:none;margin:22px 0 8px;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.px-checks li{position:relative;padding-left:30px;font-weight:600;font-size:.95rem;color:var(--ht-ink)}
.px-checks li::before{content:"";position:absolute;left:0;top:3px;width:19px;height:19px;border-radius:50%;background:var(--ht-blue-bright);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.4-4-4 1.6-1.6 2.4 2.4 5.2-5.2 1.6 1.6-6.8 6.8z"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.4-4-4 1.6-1.6 2.4 2.4 5.2-5.2 1.6 1.6-6.8 6.8z"/></svg>') center/contain no-repeat}
.px-photo{position:relative}
.px-photo img{border-radius:var(--ht-radius);box-shadow:var(--ht-shadow-lg);width:100%;height:440px;object-fit:cover}
.px-photo .px-badge{position:absolute;left:-26px;bottom:32px;background:var(--ht-navy);color:#fff;border-radius:12px;padding:18px 24px;box-shadow:var(--ht-shadow-lg)}
.px-photo .px-badge .n{font-size:1.6rem;font-weight:800;color:#7db4f7}
.px-photo .px-badge .l{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#c8d4ea}
@media(max-width:920px){.px-split{grid-template-columns:1fr;gap:44px}.px-photo .px-badge{left:16px}}

/* Product type cards */
.px-types{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.px-type{background:#fff;border:1px solid var(--ht-line);border-radius:var(--ht-radius);padding:30px 28px;box-shadow:0 10px 30px rgba(2,26,71,.08);transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
.px-type:hover{transform:translateY(-5px);box-shadow:var(--ht-shadow-lg)}
.px-type .ico{width:46px;height:46px;border-radius:11px;background:linear-gradient(135deg,var(--ht-blue) 0%,var(--ht-blue-bright) 100%);display:flex;align-items:center;justify-content:center;margin-bottom:18px;box-shadow:0 6px 16px rgba(29,111,209,.3)}
.px-type .ico svg{width:24px;height:24px;fill:#fff}
.px-type h3{font-size:1.15rem;font-weight:800;color:var(--ht-navy);margin-bottom:10px;letter-spacing:-.01em}
.px-type p{color:var(--ht-muted);font-size:.93rem;flex:1}
@media(max-width:920px){.px-types{grid-template-columns:1fr}}

/* Highlight callout */
.px-callout{background:linear-gradient(115deg,var(--ht-navy) 0%,var(--ht-blue) 100%);border-radius:var(--ht-radius);color:#fff;padding:46px 48px;display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center;box-shadow:var(--ht-shadow-lg);position:relative;overflow:hidden}
.px-callout::before{content:"";position:absolute;right:-100px;top:-100px;width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,.07)}
.px-callout h3{font-size:1.5rem;font-weight:800;letter-spacing:-.01em;margin-bottom:10px;position:relative}
.px-callout p{color:#c8d8f2;position:relative}
.px-callout .facts{display:grid;gap:14px;position:relative}
.px-callout .fact .n{font-size:1.5rem;font-weight:800;color:#7db4f7}
.px-callout .fact .l{font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:#c8d4ea}
@media(max-width:820px){.px-callout{grid-template-columns:1fr;padding:36px 28px}}

/* Gallery */
.px-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.px-gitem{position:relative;border-radius:var(--ht-radius);overflow:hidden;box-shadow:0 10px 30px rgba(2,26,71,.10);aspect-ratio:7/4;display:block}
.px-gitem img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.px-gitem:hover img{transform:scale(1.07)}
.px-gitem .cap{position:absolute;inset:auto 0 0 0;padding:36px 18px 14px;background:linear-gradient(transparent,rgba(2,26,71,.9));color:#fff;font-size:.86rem;font-weight:600;opacity:0;transform:translateY(8px);transition:all .25s}
.px-gitem:hover .cap{opacity:1;transform:translateY(0)}
@media(max-width:920px){.px-gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.px-gallery{grid-template-columns:1fr}}

/* Scroll reveal */
.px-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.px-reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .px-reveal{opacity:1;transform:none;transition:none}
  .px-hero .bg{animation:none}
}

/* FAQ accordion */
.px-faq{max-width:860px;margin:0 auto}
.px-faq details{background:#fff;border:1px solid var(--ht-line);border-radius:12px;margin-bottom:14px;box-shadow:0 4px 14px rgba(2,26,71,.05);overflow:hidden}
.px-faq summary{padding:20px 24px;font-weight:700;color:var(--ht-navy);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:1.02rem}
.px-faq summary::-webkit-details-marker{display:none}
.px-faq summary::after{content:"+";font-size:1.5rem;color:var(--ht-blue-bright);flex-shrink:0;line-height:1}
.px-faq details[open] summary::after{content:"–"}
.px-faq .a{padding:0 24px 22px;color:var(--ht-muted);font-size:.96rem}
.px-faq .a p{margin:0 0 12px}