/* ============================================================================
   henry_other-overview_v2.css — PAGE-SPECIFIC sheet for Other Products Overview
   (T0-03, locked mockup v02, Tier-0 overview v2 wave, 2026-07-18)

   Loads AFTER www/css/henry_overview_v2.css (the shared design system — 28
   blocks byte-identical across all 5 Tier-0 overview mockups). This file
   carries ONLY the 2 <style> blocks from the T0-03 mockup that are NOT
   already in the shared sheet (verified by diffing all 37 of the mockup's
   <style> blocks against the shared sheet — the other 35 either matched
   verbatim or matched after accounting for central's chrome-strip reformat).

   Source blocks (mockup line numbers, LOCKED v02):
     - id="families-3x3-v58"  (lines 3843-3922) — full-bleed 3x3 signature-
       families grid + the CTA-glass build/sample button skins + the hero
       CTA sticky bar. Overrides the shared sheet's generic .family-* rules
       via #families ID-selector specificity.
     - id="t003-v72-adapt"    (lines 4065-4070) — T0-03-specific: the 5th
       audience-item (of 5) spans full width in the by-industry grid; the
       "coming soon" family-card badge (unused today, ready if a family
       needs it later).

   ASSUMES: if a future re-lock changes the family/audience-item COUNT on
   this page, re-check the nth-child selectors below against the new count.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500&display=swap');

/* ===== Hero (headline HARD-LOCKED to 2 lines) ===== */
.fw-hero{ padding:clamp(46px,6.5vw,100px) clamp(16px,4vw,44px) clamp(24px,3vw,42px); text-align:center; background:var(--white); }
.fw-hero-inner{ max-width:1100px; margin:0 auto; }
.fw-hero-title{ font-size:clamp(22px,3.1vw,46px); line-height:1.12; letter-spacing:-.03em; font-weight:800; color:var(--ink); margin:0 auto; max-width:none; }
.fw-hero-sub{ font-size:clamp(15px,1.5vw,20px); line-height:1.55; color:var(--muted); margin:20px auto 0; max-width:62ch; }
/* Hero CTA row + button skins: shared block in henry_overview_v2.css
   (inc/page/overview/hero-cta.php). Mockup's cyan-fill Build My Card
   (Henry 2026-07-12) superseded by owner rule 2026-07-18: no blue at rest. */

/* ===== Signature Families — FULL-WIDTH 3x3 grid ===== */
#families{ max-width:none !important; margin:0 !important; padding-inline:clamp(16px,2.5vw,48px) !important; padding-top:clamp(20px,3vw,46px) !important; }
#families .families-intro{ max-width:none; margin:0; padding:0 0 clamp(16px,1.8vw,26px); text-align:left; }
#families .families-intro h2{ font-size:clamp(21px,2.8vw,36px) !important; line-height:1.06 !important; letter-spacing:-.02em; font-weight:800 !important; color:var(--ink); margin:0 !important; text-align:left !important; max-width:none !important; }
#families .family-grid{ width:100%; max-width:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(10px,1vw,16px); margin:0; }
#families .family-card{ position:relative; aspect-ratio:1/1; min-height:0; overflow:hidden; display:block; padding:0; border:0; border-radius:12px; background:#12161b; box-shadow:none; isolation:isolate; transition:none; }
#families .family-card:hover{ transform:none; box-shadow:none; border-color:transparent; }
#families .family-card .family-media{ position:absolute; inset:0; width:100%; height:100%; min-height:0; margin:0; overflow:hidden; background:transparent; display:block; }
/* .family-photo / .family-product-image render is single-homed in henry_overview_v2.css (2026-07-24). */
#families .family-card .family-media::after{ content:""; position:absolute; inset:0; z-index:2; background:rgba(11,15,20,.42); opacity:1; transition:opacity .55s ease; }
#families .family-card:hover .family-media::after{ opacity:0; }
#families .family-card .family-media::before{ content:""; position:absolute; left:0; right:0; top:0; height:52%; z-index:3; background:linear-gradient(to bottom,rgba(8,11,15,.82) 0%,rgba(8,11,15,.34) 55%,rgba(8,11,15,0) 100%); pointer-events:none; }
#families .family-card .family-body{ position:absolute; top:40px; left:0; right:0; z-index:4; max-width:none; margin:0; padding:0 clamp(16px,2vw,26px); text-align:center; background:transparent; pointer-events:none; }
#families .family-card h3{ margin:0 0 8px; font-size:clamp(18px,1.5vw,24px); line-height:1.14; letter-spacing:-.02em; font-weight:750; color:#fff; text-shadow:0 1px 18px rgba(0,0,0,.5); }
#families .family-card .fam-emo{ max-width:34ch; margin:0 auto; font-size:clamp(12.5px,.95vw,14.5px); line-height:1.42; color:rgba(255,255,255,.85); text-shadow:0 1px 14px rgba(0,0,0,.45); }
#families .family-card .fam-spec{ display:none; }
#families .family-card .family-media .photo-slot-hint{ position:absolute !important; left:50% !important; top:50% !important; right:auto !important; bottom:auto !important; width:auto !important; height:auto !important; transform:translate(-50%,-50%) !important; z-index:4 !important; display:inline-block !important; color:rgba(255,255,255,.55) !important; background:rgba(255,255,255,.05) !important; border:1px dashed rgba(255,255,255,.3) !important; border-radius:100px !important; padding:7px 14px !important; font-size:10.5px !important; letter-spacing:.18em !important; text-transform:uppercase !important; font-weight:700 !important; backdrop-filter:none !important; white-space:nowrap !important; }

/* ===== Customize-this-Style badge (lower-left; circle → expands to capsule on hover) ===== */
#families .family-card .customize-badge{ position:absolute; left:16px; bottom:16px; z-index:6; display:inline-flex; align-items:center; height:55px; width:55px; padding:0; background:#fff; color:var(--ink); border-radius:999px; box-shadow:0 6px 20px rgba(0,0,0,.30); overflow:hidden; white-space:nowrap; text-decoration:none; pointer-events:auto; transition:width .4s cubic-bezier(.2,.8,.2,1), color .25s ease, box-shadow .25s ease; }
#families .family-card .customize-badge .cb-icon{ flex:0 0 55px; width:55px; height:55px; display:grid; place-items:center; }
#families .family-card .customize-badge .cb-icon svg{ width:37.5px; height:37.5px; }
#families .family-card .customize-badge .cb-text{ font-size:14px; font-weight:700; letter-spacing:.01em; color:var(--blue); opacity:0; padding-right:22px; transition:opacity .22s ease .06s; }
#families .family-card .customize-badge:hover{ width:252px; color:var(--blue); box-shadow:0 10px 26px rgba(0,0,0,.32); }
#families .family-card .customize-badge:hover .cb-text{ opacity:1; }
#families .family-card .card-cover-link{ position:absolute; inset:0; z-index:5; display:block; font-size:0; color:transparent; }

#families .family-card:nth-child(1) .family-media{ background:linear-gradient(150deg,#2b313a,#12161b 70%); }
#families .family-card:nth-child(2) .family-media{ background:linear-gradient(150deg,#332c25,#17130f 72%); }
#families .family-card:nth-child(3) .family-media{ background:linear-gradient(150deg,#2c2e31,#141517 72%); }
#families .family-card:nth-child(4) .family-media{ background:linear-gradient(150deg,#12202a,#0c1116 72%); }
#families .family-card:nth-child(5) .family-media{ background:linear-gradient(150deg,#20222a,#101115 72%); }
#families .family-card:nth-child(6) .family-media{ background:linear-gradient(150deg,#232a31,#12161b 72%); }
#families .family-card:nth-child(7) .family-media{ background:linear-gradient(150deg,#2a2330,#141018 72%); }
#families .family-card:nth-child(8) .family-media{ background:linear-gradient(150deg,#2a2926,#151412 72%); }
#families .family-card:nth-child(9) .family-media{ background:linear-gradient(150deg,#2b3036,#14171b 72%); }
@media (max-width:900px){ #families .family-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ #families .family-grid{ grid-template-columns:1fr; } #families .family-card{ aspect-ratio:4/3; } }

/* Hero CTA sticky bottom bar: shared block in henry_overview_v2.css. */

/* ===== T0-03 adaptation — 5-item audience grid (of 5) + unused-today badge ===== */
.best-for-section .audience-item:nth-child(5){grid-column:1 / -1}
@media(max-width:1100px){.best-for-section .audience-item:nth-child(5){grid-column:auto}}
.family-card.is-soon{opacity:.78}
.family-card .soon-badge{display:inline-block;margin-left:8px;padding:3px 9px;border-radius:999px;background:rgba(201,169,110,.18);color:#9A7B41;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;vertical-align:middle}