/* =============================================================================
   henry_ind.css — SHARED component CSS for the Tier-3 INDUSTRY family (IND wave).
   -----------------------------------------------------------------------------
   Loaded by www/product.php via $_META AFTER henry_coolgray.css AND henry_fc.css,
   gated on the curated flag `ind_v1 => true`. Cascade on an IND page:
       henry_common.css -> product-<slug>.css -> henry_coolgray.css
                        -> henry_fc.css -> henry_ind.css -> henry_<slug>_photos.css

   SOURCE: the <style id="ind-components-v01"> block of the 10 locked IND mockups
   (docs/henry_updates/to-build/tier3-industry-2026-07-26/) — byte-identical on all
   ten, plus CL-04's 4 extra `.rec.rec-dir` rules. There is ZERO per-page CSS in this
   wave: no page gets a scoped sheet's worth of IND rules, and nothing IND-shaped may
   be re-authored in a product-<slug>.css.

   ⚠️ THIS SHEET LOADS ONLY ON IND PAGES. A few selectors here are intentionally
   unprefixed and would reach other pages if that gate were ever widened:
   ASSUMES: henry_ind.css is loaded ONLY for products in the Tier-3 industry family
   (curated `ind_v1`). If false, `.fw-hero.fw-hero-tall .fwh-h1 em` (cyan instead of
   the FC gold) and the `#faq .faq.ind-faq` block would change other pages' look.

   FOUR DELIBERATE DEPARTURES FROM THE MOCKUP BLOCK, all recorded in
   docs/Handoffs/build-wave/IND-01-REPORT.md:

   1. DEAD CSS DROPPED — zero matching markup on any of the 11 pages:
      .vid-grid/.vid/.vid-media/.vid-media video/.vid-media .vlabel/.vid figcaption
      (+ strong), .btn-ink (+:hover/:focus-visible), .ind-btn-row.
      The "Customer Voice" videos render through reviews.php variant G (.pv-*), and
      body CTAs use the shared .btn family.

   2. PLACEHOLDER SCAFFOLDING DROPPED — it exists only because the mockups carry no
      photography: .fwh-stage.ind-ph, .ind-stage-note, .fwh-thumb .t-lab, .t-play,
      .sw-suede/.sw-foil/.sw-edge/.sw-onyx, .fwh-thumb.is-video, .sfc-photo
      .sfc-ph-note. The hero gallery is ADMIN-DRIVEN (fw-hero.php builds it from the
      product's own Main Picture / Product Pictures / video), and combo tiles show
      real photos or sfc-band's honest "Photo coming soon" waiting slot.

   3. HARDCODED HEX NORMALIZED to the :root tokens henry_fc.css already declares
      (the mockup's own header admits "colors hardcoded"):
        #F4F6F8 -> var(--cool-100)   #C9A96E -> var(--gold)
        #14181D -> var(--ink)        #424B55 -> var(--body)
        #00C2FF -> var(--blue)       #fff    -> var(--white)      1240px -> var(--max)
      NO TOKEN EXISTS for these, so they stay literal (do not "fix" them):
        #DADFE5 (IND border — --line is #E2E7EC, a different value)
        #008DBA (IND link/cue — --blue-dark is #0099CC, a different value)
        #7A7A7A (--muted is #7A8590)   #EAF0F4 / #0F1216 (table head)
        the .inc/.avo rgba() tints and the .m-* decorative gradients.

   4. NO `!important` — the mockup carried 7 on the FAQ and 3 on section-trust.
      Both are resolved structurally instead (see the two blocks below), because a
      component must own its own type rather than out-shout a shared standard.

   ⚠️ 5. THE UNCLAIMED-PROPERTY RULE (added 2026-07-26 after the pilot gate caught it twice)
      A rule that does not DECLARE a property cannot win it, however specific the
      selector is. So any BARE ELEMENT selector here that the shared de-bold in
      henry_coolgray.css can reach (`h1,h2,h3{font-weight:600}`, plus that sheet's
      long de-bold selector LIST which includes a bare `th`) silently loses its
      weight to the shared value — even though every CLASS-based heading in this
      sheet asserts 800 and matches.
      It happened twice on the pilot: `.ind-final h2` shipped at 600 against the
      mockup's 700 (caught at the geometry diff), and `.ia h3` did the same (caught
      by measuring the rest of the class rather than only the reported instance).
      **So: every h1/h2/h3/th/b/strong selector in this sheet now ASSERTS its
      font-weight, including the ones that already computed correctly** — because
      arriving at the right value via an external allowlist is not owning it, and an
      unclaimed property is exactly where the next page drifts.
      When adding a rule here, ask: does it target a bare element, and does it
      declare every property the shared sheets set on that element?
   ============================================================================= */

/* ---- section chassis (ind-section.php) ----------------------------------- */
.ind-sec{padding:clamp(58px,6vw,92px) 0}
.ind-sec.section-soft{background:var(--cool-100)}
.ind-wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(16px,2.5vw,48px)}
.ind-wrap.narrow{max-width:880px}

/* ---- ONE LEFT EDGE DOWN THE PAGE (owner-directed 2026-07-27) --------------
   #problem / #what-card / #reviews are `.g3-band` — a shared FC component that is deliberately
   FULL-BLEED with no max-width. Every section below them is an `.ind-sec` whose `.ind-wrap` is a
   1240px centred box. Measured live at 1900px: the g3-band headings started at x=48 and the
   .ind-sec headings at x=378 — a 330px step down the page, which is what the owner flagged
   ("it is currently too far left"). It grows with viewport width, so it is worst on the widest
   screens and nearly invisible at 1280 (32 vs 52).

   TWO separate things were true and neither was carried:
   1. our build DROPPED the mockup's own second `.g3-band` rule
      (`max-width:1560px;margin:0 auto;padding:0 24px`) — it only ever carried henry_fc.css's
      full-bleed first rule;
   2. even that 1560px box does not line up with `.ind-wrap`'s 1240px box (194 vs 378 at 1900px),
      so restoring the mockup faithfully would NOT have satisfied the ask.
   Owner's instruction settles it: keep it left-aligned, do not centre it, align it with the
   section below. So the BAND stays full-bleed (its white background IS the band) and its CONTENT
   takes the `.ind-wrap` box exactly. henry_ind.css loads after henry_fc.css, so no !important.
   Applies to every page that loads this sheet: the 10 IND pages + CL-04. */
.g3-band{padding-left:0;padding-right:0}
.g3-band > *{max-width:var(--max);margin-left:auto;margin-right:auto;
             padding-left:clamp(16px,2.5vw,48px);padding-right:clamp(16px,2.5vw,48px)}
.kicker{font-size:12px;color:var(--gold);margin:0 0 12px;text-transform:uppercase;letter-spacing:.22em;font-weight:800}
.ind-h2{font-size:clamp(24px,2.8vw,36px);line-height:1.1;letter-spacing:-.02em;font-weight:800;color:var(--ink);margin:0 0 14px;max-width:820px}
.ind-lead{font-size:clamp(15px,1.2vw,17px);line-height:1.7;color:var(--body);max-width:760px;margin:0}
/* the mockup's two-paragraph rhythm. NOTE the #problem band is a g3-band, not an .ind-sec — its
   twin rule is `.g3-lead + .g3-lead` in henry_fc.css (that component owns its own spacing). */
.ind-lead + .ind-lead{margin-top:16px}
/* the mockup carried this gap as an inline style on the #recommended lead; a class keeps the
   markup clean and lets any page opt in (ind-section.php 'lead_gap' => true). */
.ind-lead.ind-lead-gap{margin-bottom:28px}

/* ---- hero accent --------------------------------------------------------- */
/* The IND family's hero <em> is CYAN where the FC family's is gold
   (henry_fc.css:96 `.fw-hero .fwh-h1 em{color:#9A7B41}`). `.fw-hero.fw-hero-tall …`
   is one class more specific, so no !important is needed. */
.fw-hero.fw-hero-tall .fwh-h1 em{color:var(--blue);font-style:normal}

/* ---- hero headline wrapping: NOT declared here, on purpose ------------------
   An IND-scoped `.fw-hero.fw-hero-tall .fwh-h1{white-space:normal}` lived here for
   part of 2026-08-07, added so Henry's restored IND-04/IND-13 headlines could take a
   second line instead of spilling. The owner then swept the rest of the site, so the
   rule moved UP to henry_fc.css (`.fw-hero.fw-hero-tall .fwh-h1`) — the sheet that set `nowrap` in the first place
   and therefore the one that owns the property. Two sheets asserting the same thing is
   how they drift apart, so this family deliberately asserts nothing and inherits.
   If you are here because an IND headline wraps oddly, the rule is in henry_fc.css and
   WHERE it breaks is Henry's open call at /for-henry/#H-03. */

/* ---- trust band geometry (confidence-strip.php, section_class='section ind-trust') ----
   RESOLUTION of the mockup's 3 `!important` rules on `section.section-trust`. henry_fc.css:226
   sets `.section-trust{margin-top:-40px !important}` — an !important that NO amount of
   specificity can beat — which is exactly why Henry's mockup had to shout back. The IND design
   deliberately differs ("generous symmetric vertical rhythm (kills Silk -40px pull) so it
   breathes under the hero strip; single bottom divider"), so instead of duelling !importants the
   page passes confidence-strip.php's EXISTING `section_class` param (the same escape hatch
   plastic already uses) and the geometry is owned here, cleanly. `.confidence-strip` /
   `.confidence-card` in henry_fc.css still supply the card look, untouched. */
.section.ind-trust{max-width:1320px;margin:0 auto;background:transparent;border:0;border-bottom:1px solid #DADFE5;padding:clamp(58px,5.5vw,84px) 24px}

/* ---- Find-Your-Fit routing cards (ind-recommended.php) -------------------- */
.rec{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:8px}
@media(max-width:760px){.rec{grid-template-columns:1fr}}
.rec .r{display:flex;flex-direction:column;background:var(--white);border:1px solid #DADFE5;border-radius:22px;overflow:hidden;text-decoration:none;color:inherit;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.rec .r:hover,.rec .r:focus-visible{transform:translateY(-4px);border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,194,255,.22),0 20px 46px rgba(0,194,255,.20);outline:none}
.rec .r .r-media{aspect-ratio:4/3;position:relative;background:linear-gradient(135deg,rgba(0,194,255,.10),transparent 60%),linear-gradient(145deg,var(--charcoal),var(--obsidian))}
.rec .r .r-media.m-suede{background:linear-gradient(135deg,rgba(0,194,255,.06),transparent 55%),linear-gradient(145deg,#3a3f46,#20242a)}
.rec .r .r-media.m-silk{background:linear-gradient(135deg,rgba(0,194,255,.14),transparent 60%),linear-gradient(145deg,#20303a,var(--obsidian))}
.rec .r .r-media.m-edge{background:linear-gradient(180deg,var(--charcoal) 0 62%,var(--blue) 62%)}
.rec .r .r-media.m-onyx{background:linear-gradient(145deg,#23272b,#050505 70%)}
.rec .r .r-media .slot-tag{position:absolute;bottom:12px;left:14px;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.rec .r .r-body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.rec .r .r-tag{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#7A7A7A;margin-bottom:8px}
.rec .r .combo{font-size:21px;letter-spacing:-.02em;font-weight:800;color:var(--ink);margin-bottom:10px}
.rec .r .why{font-size:14.5px;line-height:1.55;color:var(--body);flex:1}
.rec .r .r-cue{margin-top:18px;color:#008DBA;font-size:13px;font-weight:900;letter-spacing:.02em}
.rec .r:hover .r-cue{color:var(--blue)}
.rec-help{margin-top:24px;font-size:15px;color:var(--body)}
.rec-help a{font-weight:800;color:#008DBA}
/* A real photo overrides the decorative gradient (ind-recommended.php sets the background-image
   inline, so this only needs to stop a .m-* skin from painting over it). */
.rec .r .r-media.has-photo{background-color:var(--obsidian);background-repeat:no-repeat}
/* DIRECTORY mode (CL-04 only): 3 columns, 16:9 media, 11 cards, no help line. */
.rec.rec-dir{grid-template-columns:repeat(3,1fr)}
.rec.rec-dir .r .r-media{aspect-ratio:16/9}
@media(max-width:980px){.rec.rec-dir{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.rec.rec-dir{grid-template-columns:1fr}}

/* ---- finish-guidance table (compare-table.php style=>'fin') --------------- */
table.fin{width:100%;border-collapse:collapse;margin-top:24px;font-size:14px}
table.fin th,table.fin td{text-align:left;padding:13px 15px;border-bottom:1px solid #DADFE5;vertical-align:top}
/* font-weight ASSERTED (700) though it already computes to 700: it was arriving from the bare `th`
   entry in henry_coolgray.css's de-bold selector LIST — an external allowlist, so pruning that one
   token would silently drop this header to 400. Claiming it here is what makes the component own
   its own type. Same reason for `.compliance b` below. */
table.fin th{background:#0F1216;color:#EAF0F4;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
table.fin tr:nth-child(even) td{background:var(--white)}
/* LINK TREATMENT — the shared compare-table's, NOT the mockup's (owner-caught 2026-07-26:
   "blue doesn't make you think it is a link and then no change on hover is odd").
   The mockup shipped `table.fin a{color:#008DBA;font-weight:700}` with NO hover rule at all, so
   the links read as plain blue text and stayed inert on hover — the only compare-table skin in
   the catalog that behaves that way. `fin` is the THIRD skin of compare-table.php, whose other
   two already agree: `.g3-table-link` (henry_fc.css:315) and `.compare-link`
   (henry_coolgray.css:110) both use ink text + a cyan affordance + a blue-dark hover.
   Per §5B gate 17 (compare and ask, don't auto-normalize): a block that is a SHARED COMPONENT
   used on other pages resolves in favour of the COMPONENT, because cross-page consistency is the
   whole point of a component — so the mockup loses this one and it is recorded, not silent.
   Matched to `.g3-table-link` specifically (the sibling skin that also lives inside a g3/ind
   band): underline is the stronger link affordance, which is exactly the signal the owner said
   the flat blue was missing. */
table.fin a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:rgba(0,194,255,.45);text-underline-offset:3px;transition:color .18s ease,text-decoration-color .18s ease}
table.fin a:hover,table.fin a:focus-visible{color:var(--blue-dark);text-decoration-color:var(--blue)}
/* compare-table.php always wraps column 1 in <strong> (a STRUCTURAL property of the shared
   component — it is the label column on all 16 consumers). The mockup's bare <a> already renders
   at weight 700 via `table.fin a`, so the two are visually identical; this keeps them so if the
   <strong> default ever changes. */
table.fin td strong{font-weight:700}

/* ---- include / avoid + compliance (ind-include-avoid.php) ----------------- */
.ia{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px}
@media(max-width:820px){.ia{grid-template-columns:1fr}}
.ia .col{border-radius:16px;padding:24px;border:1px solid #DADFE5}
.ia .inc{background:rgba(31,169,113,.06);border-color:rgba(31,169,113,.25)}
.ia .avo{background:rgba(201,89,79,.05);border-color:rgba(201,89,79,.22)}
/* WEIGHT ASSERTED — see the "unclaimed weight" note at the foot of this sheet. The mockup sets no
   weight here, so it renders the UA default bold (700); on our page the shared de-bold in
   henry_coolgray.css (`h1,h2,h3{font-weight:600}`) reaches this bare h3 and wins, because a rule
   that does not DECLARE font-weight cannot win it however specific it is. Measured live at 600
   before this line, 700 after. */
.ia h3{margin:0 0 12px;font-size:16px;color:var(--ink);font-weight:700}
.ia ul{margin:0;padding-left:18px;color:var(--body);font-size:14px}
.ia li{margin:6px 0}
.compliance{margin-top:20px;background:var(--white);border:1px solid #DADFE5;border-left:3px solid var(--gold);border-radius:12px;padding:18px 20px;font-size:14px;color:var(--body)}
.compliance b{color:var(--ink);font-weight:700}

/* ---- "when it matters" chips (ind-moments.php) ---------------------------- */
.moments{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.moments .m{background:var(--white);border:1px solid #DADFE5;border-radius:24px;padding:11px 20px;font-size:14px;font-weight:700;color:var(--body)}

/* ---- FAQ (faq.php variant 'ind') ----------------------------------------------
   RESOLUTION of the mockup's 7 `!important` rules. The collision is with the shared FLAT-FAQ
   standard in henry_coolgray.css (`#faq details:not(.faq-feature-card)`, GOTCHAS #82/#87), which
   exists so ONE edit fixes every page — so the fix is for this variant to OWN its geometry, not
   to shout over the standard from 11 pages.
   The mechanism: faq.php's 'ind' variant stamps its own `ind-faq` scoping class (the same
   variant-scoping trick reviews--G / samples--kit already use), giving `#faq .faq.ind-faq details`
   specificity (1,2,1) against the standard's (1,1,1). It therefore wins on SPECIFICITY ALONE and
   does not depend on this sheet loading after henry_coolgray.css.
   DELIBERATELY INHERITED from the shared standard (not restated here): the cyan hover-lift +
   hover summary colour, and the [open] marker glyph "\2212" (the mockup writes an en dash "–";
   the difference is invisible and the shared glyph is the cross-page standard). Recorded as an
   INTENTIONAL divergence in the REPORT.
   `--faq-marker` is the standard's own designed extension point for the +/- colour, so the IND
   accent is set through it rather than by overriding the ::after colour. */
#faq .faq.ind-faq{--faq-marker:#008DBA;margin-top:8px}
#faq .faq.ind-faq details{background:var(--white);border:1px solid #DADFE5;border-radius:16px;padding:22px 28px;margin-bottom:14px;box-shadow:0 6px 18px rgba(20,24,29,.045)}
#faq .faq.ind-faq details[open]{border-color:rgba(0,194,255,.5)}
#faq .faq.ind-faq summary{position:relative;display:block;font-weight:800;cursor:pointer;font-size:16px;line-height:1.45;list-style:none;color:var(--ink);padding:0 38px 0 0}
#faq .faq.ind-faq summary::-webkit-details-marker{display:none}
#faq .faq.ind-faq summary::after{content:"+";position:absolute;top:0;right:0;font-size:22px;font-weight:800;line-height:1.2}
#faq .faq.ind-faq details > p{color:var(--body);font-size:14.5px;line-height:1.6;margin:14px 0 0}
.faq-more{margin-top:28px;font-size:14px;color:var(--body)}
.faq-more a{color:#008DBA;font-weight:700}

/* ---- final band (ind-section.php mode='final') ---------------------------- */
/* h2 needs max-width + auto margins to beat the base `h2{max-width:850px;margin:0}`, which was
   left-anchoring it (the mockup's own note). */
.ind-final{background:var(--cool-100);text-align:center;padding:clamp(64px,7vw,96px) 0}
/* font-weight is asserted HERE, not inherited. Without it the shared de-bold in
   henry_coolgray.css (h1,h2,h3 -> 600) reaches this bare h2 and renders it 600, while every
   OTHER heading on the page sits at 800 from its own component rule — making the closing band
   the one heading on the page that matches nothing. Caught by the mockup-vs-built geometry diff
   (central, IND-01 pilot gate 2026-07-26): mockup 700, built 600, everything else identical.
   700 is the mockup's own value for this element AND the weight the owner moved the fc_v2 hero
   to on 2026-07-25 after comparing both live, so it is a weight already endorsed for this
   family. The mockup's lighter-than-siblings hierarchy (800 sections / 700 closing band) is
   preserved. A shared component owns its own type — an external override list never closes. */
.ind-final h2{font-size:clamp(26px,3vw,38px);font-weight:700;color:var(--ink);max-width:820px;margin:0 auto 14px;text-align:center}
.ind-final .ind-lead{max-width:620px;margin:0 auto;text-align:center}

/* ---- #what-card feature grid --------------------------------------------------
   g3-band.php body='feat' defaults to a 4-column grid (henry_fc.css:256) because every FC
   consumer passes 4 items. The IND mockup passes 3 and carried an inline
   `grid-template-columns:repeat(3,minmax(0,1fr))` to compensate. g3-band gained an additive
   `cols` param so the caller states its own column count instead of the page carrying an inline
   style; nothing here is needed for it — this comment is the pointer, since "why does #what-card
   have 3 columns" is the question a later reader will ask. */