/* =============================================================================
   henry_fc.css — SHARED component CSS for the FC-rebuild wave (2026-07-20 mockups).
   -----------------------------------------------------------------------------
   Loaded by www/product.php via $_META AFTER the per-page scoped sheet
   (product-<slug>.css) AND after henry_coolgray.css, gated on the curated flag
   `fc_v2 => true`. So the cascade order on an FC page is:
       product-<slug>.css  →  henry_coolgray.css  →  henry_fc.css  →  *_photos.css
   This sheet OWNS the redesign component look + typography so every FC page
   inherits it (owner doctrine: a shared component owns its own type; no external
   weight-override list). The per-page scoped sheet keeps ONLY page-unique CSS.

   Every rule here is verbatim/derived from the FC-01_foil.html v44 mockup
   (<style> blocks), with all site-chrome (nav, brand, footer, g3-footer selectors) and
   the configurator-mockup leftovers stripped (Gate 15). Do NOT add nav/topbar CSS.
   ============================================================================= */

/* ---- design tokens (mockup :root) ---------------------------------------- */
:root{
  /* --blue-dark unified 2026-08-14 (owner-directed): was #0099CC here, #008DBC in
     henry_common.css + 5 others, #008DBA in two scoped blocks, #008fbd in about.css — five
     values for one token. Settled on #008DBC: it is the base sheet's value and the majority
     (6 sheets), and it is also the best contrast of the four cool-family candidates
     (3.79:1 on white vs #0099CC's 3.27). ⚠️ ALL FOUR FAIL WCAG AA for normal text and this
     token colours LINKS — filed to BUG_INTAKE; unifying does not fix that, it just stops it
     being four different failures. --blue #00C2FF was already identical everywhere. */
  --blue:#00C2FF; --blue-dark:#008DBC; --soft-blue:#EAF9FF;
  --gold:#C9A96E; --gold-light:#E8C99A;
  --obsidian:#14181D; --charcoal:#1E242C; --charcoal-2:#262D36; --graphite:#2A313B;
  --ink:#14181D; --body:#424B55; --muted:#7A8590;
  --line:#E2E7EC; --soft:#EDF1F4; --cool-100:#F4F6F8; --cream:#F4F6F8; --white:#FFFFFF;
  --shadow:0 18px 50px rgba(0,0,0,.10); --shadow-deep:0 40px 110px rgba(0,0,0,.45);
  --radius-lg:28px; --radius-md:18px; --radius-sm:12px;
  --max:1240px; --font:Manrope,Helvetica,Arial,sans-serif;
}

/* ---- base typography / shared primitives ---------------------------------
   Unscoped, matching the mockup's own selectors and the established scoped-sheet
   pattern (product-<slug>.css). Loads after henry_coolgray.css so it wins; these
   are the FC body's typography (the shell nav/footer use henry_common.css classes,
   not these). product-<slug>.css must NOT redefine them. ---------------------- */
.section{max-width:var(--max);margin:0 auto;padding:84px 24px}
.section-tight{padding-top:50px}
.center{text-align:center}
.center h2,.center .lead{margin-left:auto;margin-right:auto}
.section h2 + .lead{margin-top:28px}
.eyebrow{color:var(--gold);font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;margin-bottom:18px}
.eyebrow.blue{color:var(--blue-dark)}
h2,h3{margin:0;line-height:1.06;letter-spacing:-.04em}
.section h2{font-size:clamp(32px,4vw,58px);max-width:850px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:15px 22px;border-radius:12px;font-weight:800;font-size:14px;border:1px solid transparent;transition:transform .2s ease,box-shadow .2s ease;text-decoration:none}
.btn:hover{transform:translateY(-2px)}
/* FC primary CTA — SOLID BLUE at rest, faithful to Henry's FC-01 mockup (.btn-primary line 263).
   Hover = the shared .btn:hover lift only (the mockup defines no separate .btn-primary:hover, and
   .btn-primary sits solid-blue on the dark .cta-band too — the mockup adds no cta-band override). */
.btn-primary{background:var(--blue);color:var(--obsidian);box-shadow:0 12px 30px rgba(0,194,255,.25)}
.btn-dark{background:var(--obsidian);color:var(--white)}
.btn-hero{background:transparent;border:1px solid rgba(255,255,255,.65);color:var(--white);box-shadow:none}
.btn-hero:hover,.btn-hero:focus-visible{background:var(--blue);color:var(--obsidian);border:2px solid var(--blue);transform:translateY(-3px);box-shadow:0 0 0 4px rgba(0,194,255,.30),0 0 26px rgba(0,194,255,.65)}
.btn-hero-ink{background:transparent;border:1px solid rgba(0,0,0,.55);color:var(--ink);box-shadow:none}
.btn-hero-ink:hover,.btn-hero-ink:focus-visible{background:var(--blue);color:var(--obsidian);border:2px solid var(--blue);transform:translateY(-3px);box-shadow:0 0 0 4px rgba(0,194,255,.30),0 0 26px rgba(0,194,255,.65)}
.btn-cyan-outline{background:var(--white);border:1px solid var(--blue);color:var(--blue-dark);box-shadow:none}
.btn-cyan-outline:hover{border-color:var(--blue);color:var(--blue-dark);transform:translateY(-2px);box-shadow:0 0 0 4px rgba(0,194,255,.25),0 0 26px rgba(0,194,255,.55)}
/* CTA GLASS (cg-cta) — the mockup's runtime cta-glass-apply system, baked in (the built page does not
   run that inline script). Body CTAs carry cg-cta + cg-dark (white ghost on dark sections) or cg-light
   (dark ghost on light sections); both hover to a cyan fill. Faithful to FC-01 mockup lines 1185-1210.
   !important wins over .btn-primary/.btn-hero-ink/.btn-cyan-outline literals. */
.cg-cta{border-radius:12px !important;-webkit-backdrop-filter:blur(10px) saturate(1.15);backdrop-filter:blur(10px) saturate(1.15);box-shadow:none !important;text-decoration:none}
.cg-cta.cg-dark{background:rgba(255,255,255,.14) !important;border:1.5px solid rgba(255,255,255,.85) !important;color:#FFFFFF !important}
.cg-cta.cg-light{background:rgba(20,24,29,.07) !important;border:1.5px solid rgba(20,24,29,.70) !important;color:#14181D !important}
.cg-cta:hover,.cg-cta:focus-visible{background:#00C2FF !important;border-color:#00C2FF !important;color:#0A0A0A !important;transform:translateY(-2px);box-shadow:0 0 0 4px rgba(0,194,255,.30),0 0 26px rgba(0,194,255,.65) !important;outline:none}
/* FC sticky/floating CTA — reverted to the mockup's gold tray: the base .sticky-cta /
   .sticky-cta-primary / -secondary (gold, mockup lines 1156-1158) live in henry_coolgray.css
   (loaded before this sheet) and are already faithful, so the FC sheet adds NO sticky override. */
.lead{font-size:clamp(17px,1.45vw,20px);color:#4A4A4A;max-width:600px;line-height:1.55}
.help-strip{background:linear-gradient(135deg,#EAF9FF,#FFFFFF);border:1px solid #CFEFFF;border-radius:var(--radius-md);padding:22px;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;margin-top:18px}
.help-strip h3{font-size:20px;letter-spacing:-.02em;margin:0 0 6px}
.dark-band{background:radial-gradient(circle at 8% 0%,rgba(0,194,255,.16),transparent 30%),radial-gradient(circle at 92% 20%,rgba(201,169,110,.20),transparent 26%),var(--obsidian);color:var(--white)}
.dark-band p{color:rgba(255,255,255,.68)}
.dark-band h2,.dark-band h3{color:var(--white)}
.fc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* =============================================================================
   FW-HERO — full-width tall hero (replaces .hero-center). Admin-driven gallery.
   ============================================================================= */
/* min-height uses svh (small viewport height) so iOS Safari doesn't size the hero to the
   toolbar-collapsed 100vh — that inflates the document and leaves white space you can scroll
   into BELOW the footer on iPad/iPhone (desktop has no dynamic toolbar, so 100vh is fine there).
   100vh kept first as the fallback for browsers without svh. (owner-caught iPad bug 2026-07-22) */
/* Hero backdrop is OWNER-SET and single-homed here: this one declaration paints the hero on every
   fc_v2 product page (34 curated files) + business-cards-by-industry. No per-page scoped sheet
   touches .fw-hero, and henry_ind.css overrides only the <em> colour — so this line IS the colour.
   #EBEEF1 -> #F8F9F9 (owner-directed 2026-08-05). Verified before changing: no competing .fw-hero
   rule exists in henry_common / henry_coolgray / henry_ind. */
.fw-hero.hero{position:relative;display:flex;flex-direction:column;align-items:center;min-height:calc(100vh - 84px);min-height:calc(100svh - 84px);background:#F8F9F9 !important;padding:26px clamp(16px,2.5vw,48px) 0 !important;margin:0 !important;max-width:none !important;border:0 !important;text-align:center;overflow:visible}
.fw-hero.hero::before,.fw-hero.hero::after{content:none !important}
.fw-hero .fwh-crumb{align-self:flex-start;color:var(--muted);font-size:12px;letter-spacing:.02em;margin:4px 0 clamp(34px,5.5vh,60px);text-align:left}
.fw-hero .fwh-inner{position:relative;z-index:1;max-width:940px;margin:0 auto}
/* WEIGHT 700, NOT the mockups' 800 — owner-decided 2026-07-25 (site-wide, all fc_v2 pages).
   ⚠️ ITS PREMISE EXPIRED 2026-08-14 WHEN THE SITE FACE BECAME MANROPE. Read before touching.
   THE ORIGINAL REASONING: the mockups declare a webfont but load ZERO faces of it, so every one
   renders in HELVETICA, and their 800 was chosen while looking at Helvetica. Montserrat was
   ~8-10% wider, so its 800 sat visibly heavier — copying the mockup's number reproduced the
   mockup's SPEC and not its LOOK. 700 was the correction that made Montserrat read as the
   mockup displays. (Measured then on the Square hero: Helvetica 935px vs Montserrat 1032px.)
   WHAT CHANGED: Manrope is THE SAME WIDTH AS HELVETICA. Measured 2026-08-14 across 4 strings at
   40px, with a nonsense-family fallback control proving nothing was falling back: Manrope 607px
   vs Helvetica 605px (within ~1%), where Montserrat sat at 674px. The width excess this 700 was
   compensating for NO LONGER EXISTS, so 700 is now an over-correction and the mockup's 800 is
   probably right again.
   DELIBERATELY NOT CHANGED IN THE FONT-SWAP COMMIT — it is a visible look change on every fc_v2
   page, so it belongs to the owner's look-sweep, not to a face swap. Do not restore it in either
   direction without measuring on the live page first. */
.fw-hero .fwh-h1{color:var(--ink);font-weight:700;font-size:clamp(30px,3.6vw,50px);line-height:1.09;letter-spacing:-.02em;margin:0 auto 26px;max-width:24ch}
.fw-hero .fwh-h1 em{color:#9A7B41;font-style:normal}
.fw-hero .fwh-sub{color:var(--body);font-size:clamp(14.5px,1.25vw,17.5px);line-height:1.65;max-width:62ch;margin:0 auto 38px}
.fw-hero .fwh-base-price{margin:14px auto 0;color:var(--muted);font-family:var(--font);font-size:13px;font-weight:600;line-height:1.4;letter-spacing:.025em;text-align:center}
.fw-hero .fwh-cta{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:clamp(40px,6.5vh,72px)}
.fwh-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;border-radius:12px;font-family:var(--font);font-weight:700;font-size:15px;text-decoration:none;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease,color .18s ease;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:rgba(20,24,29,.07);border:1.5px solid rgba(20,24,29,.8);color:#14181D}
.fwh-btn:hover,.fwh-btn:focus-visible{background:#00C2FF;border-color:#00C2FF;color:#0A0A0A;transform:translateY(-2px);box-shadow:0 0 0 4px rgba(0,194,255,.24),0 10px 28px rgba(0,194,255,.45);outline:none}
/* hero primary CTA ("Shop Foil Card") — SOLID BLUE at rest, faithful to the mockup (.fwh-btn.is-primary
   line 2614). No is-primary:hover in the mockup; the shared .fwh-btn:hover lift governs. */
.fwh-btn.is-primary{background:#00C2FF;border-color:#00C2FF;color:#081014;-webkit-backdrop-filter:none;backdrop-filter:none}
.fw-hero .fwh-gallery{position:relative;z-index:1;flex:1 1 auto;display:flex;gap:12px;justify-content:center;align-items:stretch;width:min(1200px,100%);margin:0 auto;min-height:360px;max-height:560px}
.fw-hero .fwh-thumbrail{display:flex;flex-direction:column;gap:10px;width:120px;flex:0 0 120px}
.fw-hero .fwh-thumb{flex:1 1 0;border-radius:12px;border:1.5px solid #D5DAE0;background:#DFE3E8 center/cover no-repeat;color:transparent;cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease,filter .28s ease;padding:0;position:relative;overflow:hidden}
.fw-hero .fwh-thumb::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.4);border-radius:inherit;pointer-events:none;transition:opacity .18s ease}
.fw-hero .fwh-thumb:hover::after,.fw-hero .fwh-thumb:focus-visible::after,.fw-hero .fwh-thumb.is-active::after{opacity:0}
.fw-hero .fwh-thumb:hover,.fw-hero .fwh-thumb:focus-visible{border-color:#00C2FF;box-shadow:0 0 0 2px rgba(0,194,255,.55),0 6px 18px rgba(0,194,255,.18);outline:none}
.fw-hero .fwh-thumb.is-active{border-color:#00C2FF;box-shadow:0 0 0 2px rgba(0,194,255,.85)}
.fw-hero .fwh-thumb.is-video{display:flex;align-items:center;justify-content:center}
.fw-hero .fwh-thumb.is-video::before{content:"";position:relative;z-index:1;width:0;height:0;border-left:14px solid var(--blue);border-top:10px solid transparent;border-bottom:10px solid transparent}
.fw-hero .fwh-stage{position:relative;flex:1 1 auto;max-width:1060px;border-radius:14px;border:1px solid #D5DAE0;background:linear-gradient(135deg,#E2E6EA,#D8DDE3) center/cover no-repeat;display:flex;align-items:center;justify-content:center;overflow:hidden}
.fw-hero .fwh-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1px solid rgba(20,24,29,.14);background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#14181D;font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding-bottom:4px;transition:background .16s ease,box-shadow .16s ease,color .16s ease,border-color .16s ease}
.fw-hero .fwh-nav.prev{left:14px}.fw-hero .fwh-nav.next{right:14px}
.fw-hero .fwh-nav:hover,.fw-hero .fwh-nav:focus-visible{background:#00C2FF;border-color:#00C2FF;color:#0A0A0A;box-shadow:0 0 0 4px rgba(0,194,255,.24),0 8px 22px rgba(0,194,255,.4);outline:none}
.fw-hero .fwh-strip{position:static;width:calc(100% + 2*clamp(16px,2.5vw,48px));margin:26px calc(-1*clamp(16px,2.5vw,48px)) 0;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;background:none;border-top:1px solid #DCE1E6;padding:16px 20px}
.fw-hero .fwh-strip .cell{color:var(--body);font-size:12.5px;letter-spacing:.03em;padding:3px 22px;border-right:1px solid #DCE1E6;line-height:1.3}
.fw-hero .fwh-strip .cell:last-child{border-right:none}
.fw-hero .fwh-strip .star{color:#9A7B41}
/* tall retrofit (Henry standard 2026-07-14) */
.fw-hero-tall.hero{min-height:auto}
.fw-hero-tall .fwh-stage,.fw-hero-tall .fwh-thumb{background-repeat:no-repeat;filter:contrast(1.04) saturate(1.02) brightness(1.01)}
/* thumbs FILL the rail: 5 thumbs span the full height of the stage image, each ≈ stageHeight/5
   minus gaps (owner gate 2026-07-21 — the earlier 104×78 cap was reverted; thumbs were not too large) */
.fw-hero-tall .fwh-thumb{flex:1 1 0;max-height:none}
.fw-hero-tall .fwh-stage{position:relative}
.fw-hero-tall .fwh-stage::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 90px rgba(20,24,29,.14)}
.fw-hero.fw-hero-tall .fwh-inner{max-width:none;width:auto;margin-bottom:0}
/* HEADLINE WRAPS — it does not spill (owner-directed sweep 2026-08-07).
   This declaration was `white-space:nowrap`. Combined with the `max-width:none;width:auto`
   that follows it, and `overflow:visible` on both the hero and the h1, a headline too wide
   for the hero did not break and was not clipped — it STRETCHED ITS OWN PARENT and pushed
   the whole document wider than the viewport. Measured at 1440px before this change:
   Plastic-Business-Cards gave the page +101px of horizontal scroll and Cotton-Business-Cards
   +54px. Both are live customer pages and neither reported an error; the h1's own
   width-minus-available reads 0 in that state, because the box it overflows grew with it —
   `document.documentElement.scrollWidth` is the only honest signal (GOTCHAS #251).
   It is also what forced two of Henry's ten industry headlines to be reworded on 2026-07-26/27,
   which the owner reversed on 2026-08-07.
   `normal` only ever engages when a line does not fit, so every headline that already fit is
   unchanged — verified across all 52 redesigned pages at 1440px, then at 1280 and 1000 on the
   pages that moved. The ≤760px rule below is now redundant but harmless; left in place so the
   mobile intent stays readable.
   ⚠️ This decides only THAT a long headline wraps, never WHERE it breaks. Today the window
   picks, and across 52 pages it leaves 168 headings ending on a single orphaned word. The
   author-controlled alternative (`<span class="ln">`, and/or `text-wrap:balance`) is Henry's
   open call — /for-henry/#H-03. Do not pre-empt it here. */
.fw-hero.fw-hero-tall .fwh-h1{white-space:normal;max-width:none;width:auto;font-size:clamp(20px,2.6vw,40px);line-height:1.1;margin:8px auto 22px;text-align:center}
.fw-hero.fw-hero-tall .fwh-crumb{margin-bottom:35px}
.fw-hero-tall .fwh-gallery{flex:0 0 auto;height:clamp(540px,63vw,940px);align-items:stretch}
.fw-hero-tall .fwh-thumbrail{width:120px;flex:0 0 120px;gap:10px}
.fw-hero-tall .fwh-thumb{background-size:cover !important;background-position:center !important}
.fw-hero-tall .fwh-below{width:min(940px,100%);margin:28px auto 0;text-align:center}
.fw-hero.fw-hero-tall .fwh-below .fwh-sub{margin:0 auto 60px;max-width:none}
.fw-hero.fw-hero-tall .fwh-below .fwh-cta{display:flex;gap:14px;justify-content:center;margin:0}
.fw-hero.fw-hero-tall .fwh-strip{margin-top:60px}
.fw-hero.fw-hero-tall .fwh-strip .cell{color:#14181D;font-weight:600}

/* ---- fw-hero: sub-top / single-image / freeline — the SVC (non-product) hero shape ---------
   Added 2026-08-06 (svc-ed wave) alongside fw-hero.php's `sub_top`, `single` and `freeline`
   params. Ported from the SVC-02 + SVC-01 `-fullwidth` locks, which style these identically.
   ⚠️ The locks write these with `!important` (they were overriding the base .fwh-gallery flex
   layout from inside a page's own <style>). Here they do NOT need it and must not have it:
   `.fw-hero .fwh-gallery.fwh-gallery-single` is (0,3,0) against the base rule's (0,2,0), so
   specificity already wins and the cascade stays debuggable — same call the tier3 sheet made.
   All three selectors ASSERT every property they need rather than inheriting one from the
   de-bold allowlist: a rule that does not declare a property cannot win it. */
.fw-hero .fwh-sub-top{color:#4A4A4A;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(17px,1.5vw,21px);line-height:1.5;max-width:56ch;margin:0 auto clamp(28px,4vh,44px)}
.fw-hero .fwh-gallery.fwh-gallery-single{display:block;height:auto;min-height:0;max-height:none;flex:0 0 auto;width:min(1200px,100%);margin:0 auto}
.fw-hero .fwh-gallery-single .fwh-stage{width:100%;max-width:none;min-height:0;background:#0F1216;display:block;aspect-ratio:1743/902}
.fw-hero .fwh-hero-img{display:block;width:100%;height:auto;border-radius:14px}
.fw-hero .fwh-freeline{color:var(--muted);font-size:13px;font-weight:700;letter-spacing:.03em;margin-top:14px}
/* Honest waiting state for `single` mode with no delivered photo — NOT a decorative
   placeholder: it says what is missing, in plain English, centred in the empty stage. */
.fw-hero .fwh-gallery-single .fwh-await{display:flex;align-items:center;justify-content:center;height:100%;margin:0;padding:24px;text-align:center;color:rgba(255,255,255,.66);font-size:14px;font-weight:600;line-height:1.5}
.fw-hero.fw-hero-tall .fwh-strip .cell .star{color:#14181D}
.fw-hero .hero-swap-layer{position:absolute;inset:0;z-index:6;border-radius:inherit;overflow:hidden;background-size:cover;background-position:center}
.fw-hero .hero-swap-layer video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
@media(max-width:860px){
  .fw-hero.hero{min-height:auto}
  .fw-hero .fwh-crumb{margin-bottom:26px}
  .fw-hero .fwh-gallery{flex-direction:column-reverse;min-height:0;max-height:none}
  .fw-hero .fwh-thumbrail{flex-direction:row;width:100%;flex:0 0 auto;height:64px}
  .fw-hero .fwh-stage{min-height:260px}
  .fw-hero .fwh-strip .cell{border-right:none;padding:4px 12px}
}
@media(max-width:760px){
  .fw-hero.fw-hero-tall .fwh-h1{white-space:normal;font-size:clamp(22px,6.4vw,30px)}
  .fw-hero-tall .fwh-gallery{height:auto;flex-direction:column-reverse}
  .fw-hero-tall .fwh-thumbrail{flex-direction:row;width:100%;flex:0 0 auto;height:64px}
  .fw-hero-tall .fwh-stage{min-height:320px}
}

/* =============================================================================
   SFC-BAND — Signature Combinations grid (+ base-price anchor rail)
   ============================================================================= */
.sfc-band{max-width:none !important;margin:0 !important;background:#fff;padding:clamp(58px,6vw,98px) clamp(16px,2.5vw,48px) clamp(58px,6vw,98px) !important}
.sfc-intro{padding:0 0 clamp(16px,1.8vw,26px);text-align:left}
.sfc-intro h2{font-size:clamp(21px,2.8vw,36px);line-height:1.06;letter-spacing:-.02em;font-weight:800;color:var(--ink);margin:0;text-align:left;max-width:none}
.sfc-grid{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1vw,16px)}
/* Tile text box is CAPPED, not a flat 30% — the band is full-bleed and the tile is square, so on a
   wide screen the 30% box grew without bound while the copy (clamp()-capped) did not, and the slack
   landed as a void between the description and .sfc-buyrow (margin-top:auto pins it to the bottom):
   measured 15px gap at 1440 vs 143px at 2560. 133px IS the 1440 height, so every width up to ~1450
   is unchanged and the cap only engages above it. A residual ~34px remains at 2560 because the
   description reflows 2 lines -> 1 on a wide tile, freeing height no fixed cap can reclaim; closing
   that needs .sfc-body to hug its content (flex column, photo flex:1) — a structural change to a
   component on ~25 pages, deliberately NOT done here. ASSUMES .sfc-photo bottom === .sfc-body
   height — both read the same var and must stay in lockstep or a white seam opens between them.

   The 108px FLOOR is the other half, added 2026-08-04 with the container query below. On the
   narrowest tile the band produces (299px, 2-col at 641) a stripped body still needs 14+20+6+53+12 =
   105px, because .sfc-buyrow itself WRAPS to two lines (53px) once the price and the cue cannot share
   the line. 30% of 299 is only 90px, so the cap alone kept clipping there. The floor binds under a
   360px tile and is inert at 1440 and above, so neither the 1440 baseline nor the 2560 cap changes. */
.sfc-tile{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:12px;border:1px solid var(--line);background:#fff;isolation:isolate;display:block;container-type:inline-size;--sfc-bodyh:clamp(108px,30%,133px)}
.sfc-photo{position:absolute;top:0;left:0;right:0;bottom:var(--sfc-bodyh);overflow:hidden;background:linear-gradient(150deg,#2b313a,#12161b 70%) center/cover no-repeat}
.sfc-tile:nth-child(2) .sfc-photo{background:linear-gradient(150deg,#332c25,#17130f 72%) center/cover no-repeat}
.sfc-tile:nth-child(3) .sfc-photo{background:linear-gradient(150deg,#2c2e31,#141517 72%) center/cover no-repeat}
.sfc-tile:nth-child(4) .sfc-photo{background:linear-gradient(150deg,#12202a,#0c1116 72%) center/cover no-repeat}
.sfc-tile:nth-child(5) .sfc-photo{background:linear-gradient(150deg,#20222a,#101115 72%) center/cover no-repeat}
.sfc-tile:nth-child(6) .sfc-photo{background:linear-gradient(150deg,#232a31,#12161b 72%) center/cover no-repeat}
.sfc-photo.has-photo{background-size:cover;background-position:center}
.sfc-photo::after{content:"";position:absolute;inset:0;z-index:2;background:rgba(11,15,20,.42);opacity:1;transition:opacity .55s ease}
.sfc-tile:hover .sfc-photo::after{opacity:0}
.sfc-body{position:absolute;left:0;right:0;bottom:0;height:var(--sfc-bodyh);display:flex;flex-direction:column;justify-content:flex-start;gap:6px;padding:14px clamp(16px,1.6vw,24px) 12px;background:#fff;border-top:1px solid var(--line)}
.sfc-body h3{margin:0;font-size:clamp(16px,1.35vw,20px);line-height:1.12;letter-spacing:-.02em;font-weight:800;color:var(--ink)}
.sfc-body p{margin:0;font-size:clamp(12.5px,.95vw,14px);line-height:1.45;color:var(--body)}
.sfc-body .sfc-titlerow{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.sfc-body .sfc-titlerow h3{margin:0}
.sfc-body .sfc-learn{position:relative;z-index:6;font-size:12px;font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap;transition:color .18s ease}
.sfc-body .sfc-learn:hover,.sfc-body .sfc-learn:focus-visible{color:var(--blue);outline:none}
.sfc-body .sfc-buyrow{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.sfc-body .sfc-price{font-size:12.5px;color:var(--muted);font-weight:600;white-space:nowrap}
.sfc-body .sfc-price strong{font-size:15px;color:var(--ink);font-weight:800}
.sfc-body .sfc-price em{font-style:normal}
.sfc-body .combo-cue{font-size:12.5px;font-weight:700;color:var(--muted);transition:color .2s ease}
.sfc-body a.combo-cue{position:relative;z-index:6;text-decoration:none;white-space:nowrap}
.sfc-tile:hover .combo-cue{color:var(--blue)}
.sfc-body a.combo-cue:hover,.sfc-body a.combo-cue:focus-visible{color:var(--blue);outline:none}
.sfc-cover-link{position:absolute;inset:0;z-index:5;display:block;font-size:0;color:transparent}
.sfc-photo .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}
.sfc-photo .customize-badge .cb-icon{flex:0 0 55px;width:55px;height:55px;display:grid;place-items:center}
.sfc-photo .customize-badge .cb-icon svg{width:37.5px;height:37.5px}
.sfc-photo .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}
.sfc-photo .customize-badge:hover{width:296px;color:var(--blue);box-shadow:0 10px 26px rgba(0,0,0,.32)}
.sfc-photo .customize-badge:hover .cb-text{opacity:1}
/* WAITING SLOT — a combination with no delivered photo yet. States plainly what it awaits
   (no-placeholder doctrine): the 70% photo area becomes a light panel with the message; the body
   keeps the title + learn link only (no buy row, no badge, no cover-link). */
.sfc-tile--waiting{cursor:default}
.sfc-tile--waiting .sfc-photo.sfc-waiting{background:#EEF1F4;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:22px clamp(18px,2vw,30px)}
.sfc-tile--waiting .sfc-photo.sfc-waiting::after{content:none}
.sfc-waiting-tag{align-self:flex-start;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 11px}
.sfc-waiting-msg{margin:0;font-size:clamp(13px,1vw,14.5px);line-height:1.5;color:var(--body)}
/* OPTION A (owner-directed 2026-08-04): the description is hidden once a tile is too narrow to hold
   it, which is what the phone layout has always done — this just keys the same rule to the TILE
   instead of the viewport, because tile width is the real driver and the grid goes 3->2->1 columns.
   A container query, not a media query: at 981px the 3-col tile is 304px and at 641px the 2-col tile
   is 299px, so the SAME tile width occurs at completely different viewport widths, and any viewport
   threshold is therefore wrong on one side of a column change.

   Why 440 and not the ~343px phone tile: the binding constraint is not the description alone, it is
   .sfc-buyrow WRAPPING. Measured at 1280 (397px tile), the price and the cue need 351px of a 354px
   line — five tiles fit by 3px and the "$102" tile misses by ONE pixel, wraps to 53px, and loses its
   button. That knife-edge tips per tile on the width of the price string, so a threshold set just
   below the phone tile would leave 1000-1440 still clipping tile-by-tile. 440 clears it with margin:
   the 1440 tile (446px) keeps its description exactly as today, and everything narrower drops it.

   Verify after ANY change here by measuring against the TILE edge (the overflow:hidden boundary),
   never the padded inner edge of .sfc-body — an inner-edge number reads as precise and reports the
   wrong element as clipped. */
/* ⚠️ The two bands below must ABUT with no gap. `max-width:379px` + `min-width:380px` leaves a 1px
   window (a tile really does land there — measured 379.44px at vw 1224) where NEITHER matches, so the
   description would render with the natural 30% box and clip. .99 makes them adjacent.
   ⚠️ And these numbers are CONTENT-box, not the width you read from getBoundingClientRect: an
   `inline-size` container queries its content box, and .sfc-tile carries a 1px border, so a query of
   379.99 fires at a ~382px rendered tile. Measure the content box before re-tuning either number. */
@container (max-width:391.99px){
  /* Both, exactly as the <=640 phone rule does — hiding only the description leaves .sfc-learn
     ("Learn about Foil →") in the title row, where it wraps BELOW the heading and takes the title
     from 20px to 47px. That silently ate 27px of the space this rule exists to free, and the tile
     kept clipping with the description already gone. */
  .sfc-body p{display:none}
  .sfc-body .sfc-learn{display:none}
}
/* 392-439px tiles KEEP the description (owner-directed 2026-08-04: "raise the threshold so 1280 and
   1366 keep their descriptions"), with the description CLAMPED TO 2 LINES so the box can be a single
   number that provably cannot clip.

   Why clamped rather than a taller box: the height a tile needs here is driven by its own copy, and
   it does NOT converge. Measured at 1280 with the description forced on: suede 147, foil 147, realtor
   142, silk 147, thick 166, cotton 166, edge-finishes 175 — the ceiling rose on almost every page
   sampled, and that was 7 of ~25. Any fixed box chosen from a sample is a guess that clips on the
   page nobody measured (the same mistake as reading tile 0 and calling the row healthy, GOTCHAS #199).
   Clamping bounds the input instead: title 20 + 2 lines 40 + a WRAPPED buyrow 53 + padding 26 +
   gaps 12 = 151px WORST CASE FOR ANY PAGE, so 158 cannot be beaten by copy. The cost is honest —
   a 3- or 4-line description shows two lines and an ellipsis in this band only.

   Do NOT "fix" the wrap by shrinking the buyrow gap: that leaves tiles fitting by ~1px, which is the
   sub-pixel knife edge that caused this bug in the first place (a longer price string on another page
   silently re-breaks it). A box that ABSORBS a wrap does not care how wide the price is.

   158 is uniform across the band, not per-tile, so the white bands still line up across a row —
   hugging would stagger them, the same reason it was rejected at 641-980.
   ⚠️ Set on the DESCENDANTS, not via --sfc-bodyh: a container query cannot style its own container,
   and that var lives on .sfc-tile. .sfc-body height and .sfc-photo bottom must stay identical here or
   a white seam opens between the photo and the text box. */
@container (min-width:392px) and (max-width:439.99px){
  .sfc-body p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}
/* Lower half of the band — the buyrow can still WRAP here (the price and cue need ~355px and the line
   is only ~361px at the bottom of this range), so the box carries the 53px two-line row. */
@container (min-width:392px) and (max-width:407.99px){
  .sfc-body{height:158px}
  .sfc-photo{bottom:158px}
}
/* Upper half — the line is clear of the ~355px the buyrow needs, so it cannot wrap and the box only
   has to hold a single 23px row: 20 + 40 + 23 + 26 + 12 = 121px.
   This split exists because ONE box for the whole band meant carrying the wrap allowance everywhere,
   which put a 42px void above the price at 1366 — the exact complaint that opened this work.
   408 is where the split sits because that is where wrapping stops with usable margin: measured on the
   worst page, the line clears the buyrow by 4px at content 400, 8px at 404 and 18px at 416, while the
   price strings on a single page already differ by ~4px. 408 buys ~12px, which is the smallest honest
   buffer; do not lower it to shave the residual gap without re-measuring `marginToWrap` per page.
   Sized at 136 (15px margin) rather than the natural 30% (127px, only 5px clear) for the same reason. */
@container (min-width:408px) and (max-width:439.99px){
  .sfc-body{height:136px}
  .sfc-photo{bottom:136px}
}
@media(max-width:980px){.sfc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.sfc-grid{grid-template-columns:1fr}.sfc-tile{aspect-ratio:4/3}.sfc-body p{display:none}.sfc-body .sfc-learn{display:none}.sfc-body .sfc-buyrow{gap:4px}}
/* PHONE (<=640, the SINGLE-column band): the text box HUGS its content instead of taking
   a flat 30% (owner-directed 2026-08-04). Measured at 375 before the fix: the box is 30%
   of a 4/3 tile = 77px, but .sfc-price (~175px) and .combo-cue (~166px) need 345px of line
   and only 309px exists, so .sfc-buyrow{flex-wrap:wrap} stacks them and the row doubles to
   47px -> content 97px in a 77px box -> .sfc-tile{overflow:hidden} CLIPPED the price row by
   21px. Fixed by laying the tile out as a column: the body sizes to what it actually holds
   and the photo absorbs the remainder. Chosen over shrinking the type or hiding the qty,
   which would trade a clipped price for a missing one.

   ⚠️ STOPS AT 640 ON PURPOSE, and the reason is the whole design of the fixed 30%.
   The SAME clip exists worse in the multi-column bands — measured -76px at 641 (2 col,
   299px tile) and -75px at 981 (3 col, 304px tile), both PRE-EXISTING (proved by forcing
   the original flat 30% in-page and getting the identical number). It happens there
   because the tile is NARROWER than the 343px phone tile while <p> is still shown, so the
   description wraps to ~4 lines. But hug cannot be the fix above 640: with 2-3 tiles side
   by side, per-tile body heights diverge and the white bands stop lining up — measured
   spread 46px at 768 and 27px at 981. The flat 30% exists precisely to keep them level.
   At <=640 there is one column and therefore no neighbour to misalign with, which is why
   hug is strictly correct here and only here. Fixing 641+ needs an owner decision (hide
   <p> on narrow tiles as this band already does / accept the misalignment / floor the
   body height) — do NOT just widen this media query.

   .sfc-cover-link is position:absolute so it stays out of flow and never becomes a flex
   item; .sfc-photo keeps its own positioning context for the badge and the ::after veil. */
@media(max-width:640px){
  .sfc-tile{display:flex;flex-direction:column}
  .sfc-photo{position:relative;inset:auto;flex:1 1 auto;min-height:0}
  .sfc-body{position:relative;inset:auto;height:auto;flex:0 0 auto}
}
/* base-price anchor rail */
#combos .base-anchor--rail{width:100%;margin:0 0 clamp(22px,2.2vw,34px);padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--cool-100);font-family:var(--font)}
#combos .base-anchor--rail .cba-layout{display:grid;grid-template-columns:minmax(260px,1fr) auto auto;align-items:center;gap:clamp(20px,3vw,52px);min-height:98px;padding:15px clamp(16px,2.4vw,34px)}
#combos .base-anchor--rail .cba-title{margin:0 0 6px;color:var(--ink);font-size:clamp(19px,1.55vw,25px);font-weight:800;line-height:1.08;letter-spacing:-.03em}
#combos .base-anchor--rail .cba-description{margin:0;color:var(--body);font-size:13.5px;line-height:1.5}
#combos .base-anchor--rail .cba-price{padding-left:clamp(22px,2.4vw,38px);border-left:1px solid #D7DDE2;white-space:nowrap}
#combos .base-anchor--rail .cba-price-label{display:block;margin-bottom:3px;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
#combos .base-anchor--rail .cba-price-line{display:flex;align-items:baseline;gap:8px}
#combos .base-anchor--rail .cba-amount{color:var(--ink);font-size:clamp(23px,2.08vw,32px);font-weight:800;line-height:1;letter-spacing:-.05em}
#combos .base-anchor--rail .cba-quantity{color:var(--body);font-size:13.65px;font-weight:600}
#combos .base-anchor--rail .cba-button{display:inline-flex;min-height:50px;padding:0 23px;align-items:center;justify-content:center;border:1.5px solid rgba(20,24,29,.68);border-radius:12px;background:rgba(255,255,255,.38);color:var(--ink);font-size:13.5px;font-weight:700;white-space:nowrap;text-decoration:none;transition:.18s ease}
#combos .base-anchor--rail .cba-button:hover,#combos .base-anchor--rail .cba-button:focus-visible{background:var(--blue);border-color:var(--blue);color:#081014;box-shadow:0 0 0 4px rgba(0,194,255,.20),0 10px 26px rgba(0,194,255,.24);outline:none;transform:translateY(-2px)}
@media(max-width:1040px){#combos .base-anchor--rail .cba-layout{grid-template-columns:minmax(240px,1fr) auto}#combos .base-anchor--rail .cba-action{grid-column:1/-1}}
@media(max-width:620px){#combos .base-anchor--rail{padding:8px}#combos .base-anchor--rail .cba-layout{grid-template-columns:1fr;gap:20px;padding:20px 17px 18px}#combos .base-anchor--rail .cba-price{padding:19px 0 0;border-top:1px solid #D7DDE2;border-left:0}#combos .base-anchor--rail .cba-action{grid-column:auto}#combos .base-anchor--rail .cba-button{width:100%}}

/* =============================================================================
   SECTION-TRUST — confidence strip (2x2)
   ============================================================================= */
.section-trust{padding:56px 24px 24px;margin-top:-40px !important;max-width:1320px;margin-left:auto;margin-right:auto}
.confidence-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.2vw,18px);align-items:stretch}
.confidence-card{background:rgba(255,255,255,.82);border:1px solid #DDE2E8;border-radius:16px;padding:26px 32px 28px;box-shadow:none;min-height:150px;display:flex;flex-direction:column;justify-content:flex-start}
.confidence-card .num{color:var(--gold);font-size:11px;font-weight:800;letter-spacing:.12em;margin-bottom:12px;text-transform:none}
.confidence-card h3{font-size:22px;line-height:1.12;letter-spacing:-.032em;margin-bottom:10px}
.confidence-card p{font-size:14.5px;line-height:1.65;color:#424B55;max-width:56ch}
@media(max-width:640px){.confidence-strip{grid-template-columns:1fr}}

/* =============================================================================
   G3-BAND — Gen-3 guidance cluster grammar (feat / choose / mini / plain / answers)
   ============================================================================= */
.g3-band{max-width:none;margin:0;padding:clamp(58px,6vw,98px) clamp(16px,2.5vw,48px);background:#fff}
.g3-tight{padding-top:40px}
.g3-head{text-align:left;margin:0 0 clamp(26px,3vw,40px)}
.g3-eyebrow{color:var(--gold);font-size:12px;font-weight:800;letter-spacing:.28em;text-transform:uppercase;margin-bottom:12px}
.g3-head h2{font-size:clamp(21px,2.8vw,36px);line-height:1.06;letter-spacing:-.02em;font-weight:800;color:var(--ink);margin:0 0 10px;max-width:900px}
.g3-lead{font-size:clamp(14.5px,1.15vw,16.5px);line-height:1.7;color:var(--body);max-width:780px;margin:0}
/* ADDITIVE 2026-07-26 (IND wave): g3-band.php's new `lead2` renders a SECOND p.g3-lead. The Tier-3
   #problem mockup spaced it with an inline style="margin-top:16px"; owning it here means the
   component supplies the rhythm and no page carries an inline style. No shipped consumer emits two
   g3-leads (lead2 is new), so this cannot change any existing page. */
.g3-lead + .g3-lead{margin-top:16px}
/* industry / best-with material link cards */
.g3-ind-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1vw,16px)}
.g3-ind-card{display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:clamp(18px,1.6vw,24px);text-decoration:none;transition:transform .22s ease,border-color .2s ease,box-shadow .22s ease}
.g3-ind-card:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:0 0 0 2px var(--blue),0 14px 30px rgba(0,194,255,.16)}
.g3-kicker{display:flex;align-items:center;gap:10px}
.g3-num{color:var(--gold);font-size:11px;font-weight:800;letter-spacing:.12em}
.g3-tag{color:var(--muted);font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.g3-ind-card h3{font-size:18px;line-height:1.25;letter-spacing:-.02em;color:var(--ink);margin:0}
.g3-card-blurb{font-size:14px;line-height:1.6;color:var(--body);margin:0}
.g3-link{margin-top:auto;color:var(--muted);font-size:13px;font-weight:700;transition:color .18s ease}
.g3-ind-card:hover .g3-link{color:var(--blue-dark)}
.g3-bw-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
/* feature cards */
.g3-feat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1vw,16px)}
/* ADDITIVE 2026-07-26 (IND wave): a caller with 2 or 3 feature cards states its own column count
   via g3-band.php's `cols` param, which emits these modifiers. NO existing consumer emits the
   class, so this cannot change any shipped page. Deliberately a class, not the mockup's inline
   style — an inline grid-template-columns beats the @media reflow below at any specificity. */
.g3-feat-grid.g3-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g3-feat-grid.g3-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3-feat{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:clamp(20px,1.8vw,26px)}
.g3-feat .g3-num{display:block;margin-bottom:14px}
.g3-feat h3{font-size:19px;letter-spacing:-.02em;color:var(--ink);margin:0 0 8px}
.g3-feat p{font-size:14.5px;line-height:1.7;color:var(--body);margin:0}
/* choose panels */
.g3-choose-wrap{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(12px,1.2vw,18px);align-items:stretch}
.g3-choose-dark{background:linear-gradient(135deg,#14181D,#222A33);border:1px solid #1E242C;border-radius:16px;padding:clamp(24px,2.2vw,32px);color:#fff}
.g3-choose-dark h3{color:#fff;font-size:20px;letter-spacing:-.02em;margin:0 0 4px}
.g3-panel-label{color:var(--gold-light);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.g3-panel-label-ink{color:var(--gold)}
.g3-checks{display:grid;gap:14px;margin-top:22px}
.g3-checks p{color:rgba(255,255,255,.74);font-size:14.5px;line-height:1.7;margin:0}
.g3-choose-soft{background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:clamp(24px,2.2vw,32px)}
.g3-choose-soft h3{font-size:20px;letter-spacing:-.02em;color:var(--ink);margin:0 0 4px}
.g3-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.g3-mini{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}
.g3-mini strong{display:block;margin-bottom:8px;color:var(--ink);font-size:14.5px}
.g3-mini p{font-size:13.5px;line-height:1.65;color:var(--body);margin:0}
/* mistakes */
.g3-mistake-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1vw,16px)}
.g3-mistake{background:#fff;border:1px solid var(--line);border-left:3px solid #C9CDD3;border-radius:14px;padding:20px 22px}
.g3-mistake strong{display:block;color:var(--ink);font-size:15px;letter-spacing:-.01em;margin-bottom:6px}
.g3-mistake p{font-size:14px;line-height:1.65;color:var(--body);margin:0}
.g3-fix{border-left-color:var(--blue)}
/* quick answers */
.g3-band .answer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1vw,16px)}
.g3-band .answer-card{background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:14px;padding:20px 22px;box-shadow:none}
.g3-band .answer-card strong{display:block;color:var(--ink);font-size:15px;letter-spacing:-.01em;margin-bottom:6px}
.g3-band .answer-card p{font-size:14px;line-height:1.65;color:var(--body);margin:0}
@media(max-width:1120px){.g3-ind-grid,.g3-feat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.g3-bw-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* the .g3-cols-* modifiers are one class more specific than the bare .g3-feat-grid rule above,
     so they must restate the reflow or they would out-specify it and never collapse. */
  .g3-feat-grid.g3-cols-3,.g3-feat-grid.g3-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:980px){.g3-choose-wrap{grid-template-columns:1fr}}
@media(max-width:900px){.g3-band .answer-grid{grid-template-columns:1fr}}
@media(max-width:640px){.g3-mini-grid{grid-template-columns:1fr}.g3-mistake-grid{grid-template-columns:1fr}}
@media(max-width:520px){.g3-ind-grid,.g3-feat-grid,.g3-bw-grid{grid-template-columns:1fr}
  .g3-feat-grid.g3-cols-3,.g3-feat-grid.g3-cols-2{grid-template-columns:1fr}}

/* =============================================================================
   COMPARE — g3-table variant
   ============================================================================= */
.g3-table-wrap{border:1px solid var(--line);border-radius:14px;overflow-x:auto;background:#fff}
.g3-table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.6;color:var(--body)}
.g3-table th{background:var(--soft);color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;text-align:left;padding:14px 18px;white-space:nowrap}
.g3-table td{padding:16px 18px;border-top:1px solid var(--line);vertical-align:top;min-width:150px}
.g3-table td strong{color:var(--ink)}
.g3-table-link{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(0,194,255,.45);text-underline-offset:3px;transition:color .18s ease,text-decoration-color .18s ease}
.g3-table-link:hover{color:var(--blue-dark);text-decoration-color:var(--blue)}

/* =============================================================================
   REVIEWS (variant G — g3-tight customer voice, vertical portrait proof)
   ============================================================================= */
#reviews.g3-band{max-width:1560px;margin:0 auto;padding-left:24px;padding-right:24px;padding-bottom:clamp(40px,4vw,60px)}
#reviews .g3-head{margin-bottom:22px}
#reviews .customer-proof-wrap{display:grid;grid-template-columns:1.7fr 1fr;gap:0;margin-top:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#FFFFFF;align-items:stretch}
#reviews .video-proof-panel{background:linear-gradient(135deg,#14181D,#222A33);border:none;border-radius:0;box-shadow:none;color:#fff}
#reviews .pv-panel{display:flex;flex-direction:column;padding:24px 24px 20px}
#reviews .video-proof-panel .num{color:var(--gold-light);font-size:13px;font-weight:700}
#reviews .video-proof-panel h3{color:#fff;font-size:clamp(23px,1.65vw,30px);letter-spacing:-.045em;line-height:1.08;max-width:430px;margin:0 0 8px}
#reviews .pv-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px;flex:1}
#reviews .pv-cell{position:relative;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.08)}
#reviews .pv-cell video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#reviews .pv-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:999px;border:0;cursor:pointer;background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.35);transition:background .18s ease,color .18s ease,transform .18s ease}
#reviews .pv-play svg{width:24px;height:24px;margin-left:3px}
#reviews .pv-play:hover{background:var(--blue);color:#06282F;transform:translate(-50%,-50%) scale(1.06)}
#reviews .pv-cell.playing .pv-play{display:none}
#reviews .review-proof-card{background:#F4F6F8;border:none;border-radius:0;box-shadow:none;padding:44px 40px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
/* decorative quote — Georgia serif renders the true 66-curl glyph; the sans face does not (measured on
   Montserrat, which showed two filled circles — NOT re-checked against Manrope after the 2026-08-14 swap,
   so treat that parenthetical as Montserrat-era). Keep Georgia regardless. Matches home .review-panel::before + GOTCHAS #77 */
#reviews .review-proof-card::before{content:"\201C";position:absolute;top:6px;right:28px;font-family:Georgia,'Times New Roman',serif;font-size:150px;line-height:1;color:rgba(201,169,110,.18);z-index:0;pointer-events:none}
/* samples cta-band button = mockup's cg-dark ghost (translucent white on the dark band) — shared, all FC pages */
.samples--kit .btn-row .btn{background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.85);color:#fff;box-shadow:none}
.samples--kit .btn-row .btn:hover{background:#00C2FF;border-color:#00C2FF;color:#14181D}
/* floating/sticky CTA = the site-standard dark tray (matches home .mobile-sticky), not the coolgray gold tray */
.sticky-cta{background:rgba(10,10,10,.94);border:1px solid rgba(255,255,255,.12);backdrop-filter:none;-webkit-backdrop-filter:none}
.sticky-cta-primary{background:var(--blue);border:1.5px solid #00C2FF;color:#081014;box-shadow:0 10px 24px rgba(0,194,255,.25)}
/* re-declare background on hover — henry_coolgray's .sticky-cta-btn:hover otherwise fills GOLD. Match
   the mockup's cyan primary: stays cyan, lifts, gains the cyan glow (mockup .fwh-btn:hover). */
.sticky-cta-primary:hover{background:var(--blue);border-color:#00C2FF;color:#081014;transform:translateY(-2px);box-shadow:0 0 0 4px rgba(0,194,255,.24),0 10px 28px rgba(0,194,255,.45)}
/* secondary = white ghost on the dark tray; HOVER fills cyan (mockup .hero-sticky-cta .fwh-btn:not(.is-primary):hover). */
.sticky-cta-secondary{background:rgba(255,255,255,.09);border:1.5px solid rgba(255,255,255,.55);color:#fff}
.sticky-cta-secondary:hover{background:#00C2FF;border-color:#00C2FF;color:#081014;transform:translateY(-2px);box-shadow:0 0 0 4px rgba(0,194,255,.24),0 10px 28px rgba(0,194,255,.45)}
/* ---- v2 (?version=2) ONLY — sticky CTA as a full-width bottom bar (mockup .hero-sticky-cta,
   FC-01_foil.html v44 lines ~2632-2634), instead of the v1 floating centered pill above. Scoped
   to .sticky-bar-full (wraps the shared sticky-cta.php include on the foil partial only when
   $_v2) so v1 + every other consumer of the shared component are untouched. Buttons/colors are
   NOT overridden here — .sticky-cta-primary/-secondary above already match the mockup's cyan
   primary + white-ghost secondary in both versions. */
.sticky-bar-full .sticky-cta-wrap{left:0;right:0;bottom:0;transform:translateY(110%)}
.sticky-bar-full .sticky-cta-wrap.is-visible{transform:translateY(0)}
.sticky-bar-full .sticky-cta{width:100%;justify-content:center;border-radius:0;gap:16px;padding:14px clamp(16px,2.5vw,48px) 18px;background:rgba(14,18,23,.82);border-width:1px 0 0 0;box-shadow:0 -12px 34px rgba(0,0,0,.32);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
@media (max-width:640px){.sticky-bar-full .sticky-cta-wrap{left:0;right:0;bottom:0}.sticky-bar-full .sticky-cta{gap:10px}.sticky-bar-full .sticky-cta-btn{flex:1 1 0;padding:0 12px;font-size:13.5px}}
#reviews .review-quote{font-size:clamp(17px,1.5vw,21px);line-height:1.5;color:#1E242C;position:relative;z-index:2}
#reviews .review-meta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:12px;position:relative;z-index:2}
#reviews .rating-proof-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px;position:relative;z-index:2}
#reviews .rating-proof-item{background:#FFFFFF;border:1px solid var(--line);border-radius:12px;padding:16px 18px}
#reviews .rating-proof-item span{display:block;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
#reviews .rating-proof-item strong{display:block;color:var(--ink);font-size:18px;line-height:1.15}
#reviews .badge{background:rgba(20,24,29,.06);border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--muted)}
#reviews .btn-row{margin-top:22px !important;justify-content:center}
@media(max-width:980px){#reviews .customer-proof-wrap{grid-template-columns:1fr}}
@media(max-width:640px){#reviews .pv-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}#reviews .pv-cell{flex:0 0 58vw;scroll-snap-align:start}}

/* =============================================================================
   BEST-FOR — interactive audience band
   ============================================================================= */
/* --blue-dark #008DBA -> #008DBC and --line #DDE4EC -> #E2E7EC, unified 2026-08-14; see :root */
.best-for-section{--blue:#00C2FF;--blue-dark:#008DBC;--gold:#C9A96E;--gold-light:#E8C99A;--ink:#11151A;--body:#4F5967;--muted:#7D8794;--line:#E2E7EC;--panel:#F1F4FA;--white:#FFFFFF;--black:#080A0D;--radius-xl:30px;--radius-lg:20px;--shadow:0 26px 80px rgba(17,25,40,.12);--font:Manrope,Helvetica,Arial,sans-serif;position:relative;overflow:hidden;background:radial-gradient(circle at 92% 12%,rgba(0,194,255,.10),transparent 24%),radial-gradient(circle at 8% 88%,rgba(201,169,110,.12),transparent 25%),var(--panel);padding:96px 28px 104px}
.best-for-section button,.best-for-section a{font:inherit}
.best-for-section::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(17,21,26,.055) .8px,transparent .8px);background-size:22px 22px;opacity:.24;pointer-events:none}
.best-for-section .best-for-wrap{position:relative;z-index:1;max-width:1440px;margin:0 auto}
.best-for-section .section-head{max-width:900px;margin-bottom:44px}
.best-for-section .eyebrow{color:var(--gold);font-size:12px;line-height:1;font-weight:900;letter-spacing:.24em;text-transform:uppercase;margin-bottom:16px}
.best-for-section h2{margin:0;max-width:920px;font-size:clamp(36px,4vw,62px);line-height:1.02;letter-spacing:-.052em}
.best-for-section .intro{max-width:790px;margin:22px 0 0;color:var(--body);font-size:clamp(17px,1.45vw,21px);line-height:1.6}
.best-for-section .experience{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(520px,.98fr);gap:24px;align-items:stretch}
.best-for-section .feature-stage{position:relative;min-height:650px;overflow:hidden;border-radius:var(--radius-xl);color:#fff;background:radial-gradient(circle at 78% 18%,rgba(201,169,110,.30),transparent 24%),radial-gradient(circle at 18% 82%,rgba(0,194,255,.20),transparent 27%),linear-gradient(145deg,#07090c 0%,#171b20 54%,#080a0d 100%);box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.08)}
.best-for-section .feature-stage::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.08) 46%,transparent 58%);background-size:220% 100%;animation:stageShine 7s ease-in-out infinite}
@keyframes stageShine{0%,22%{background-position:180% 0}75%,100%{background-position:-120% 0}}
.best-for-section .stage-topline{position:absolute;top:28px;left:30px;right:30px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:20px}
.best-for-section .stage-label{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.64);font-size:11px;font-weight:900;letter-spacing:.17em;text-transform:uppercase}
.best-for-section .stage-label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 18px rgba(0,194,255,.65)}
.best-for-section .stage-count{color:var(--gold-light);font-size:12px;font-weight:900;letter-spacing:.14em}
.best-for-section .visual-world{position:absolute;inset:0;transition:opacity .25s ease,transform .35s ease}
.best-for-section .visual-world.is-changing{opacity:.15;transform:scale(.985)}
.best-for-section .desk-plane{position:absolute;left:8%;right:8%;top:19%;bottom:28%;border-radius:28px;background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.015)),linear-gradient(135deg,#171b20,#0a0c0f);border:1px solid rgba(255,255,255,.08);transform:perspective(900px) rotateX(8deg) rotateZ(-2deg);box-shadow:0 42px 90px rgba(0,0,0,.34)}
/* PHOTO MODE (FC-01 pilot, 2026-07-25) — a real audience photograph replaces the
   illustrated card-stack. Only present when inc/page/best-for.php's item-0 'has-photo'
   gate fires; every rule above is untouched, so an FC page with no delivered audience
   photography renders exactly as before. The photo sits INSET inside the SAME desk-plane
   box, so it inherits that box's perspective tilt and every breakpoint's geometry — no
   separate per-photo breakpoints beyond the mobile inset below. Ported from the proven
   overview implementation (henry_overview_v2.css, live since 2026-07-23). */
.best-for-section .visual-world.has-photo .desk-plane{overflow:hidden}
.best-for-section .audience-photo{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);object-fit:cover;border-radius:20px;border:1px solid rgba(255,255,255,.16);box-shadow:0 18px 40px rgba(0,0,0,.38)}
@media(max-width:700px){.best-for-section .audience-photo{inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);border-radius:16px}}
.best-for-section .ambient-ring{position:absolute;width:360px;height:360px;right:-95px;top:95px;border-radius:50%;border:1px solid rgba(201,169,110,.22);box-shadow:inset 0 0 90px rgba(201,169,110,.05)}
.best-for-section .ambient-line{position:absolute;left:9%;top:28%;width:29%;height:1px;background:linear-gradient(90deg,var(--blue),transparent);opacity:.72}
.best-for-section .card-stack{position:absolute;width:58%;aspect-ratio:1.75/1;left:22%;top:26%;transform:rotate(-8deg);filter:drop-shadow(0 38px 42px rgba(0,0,0,.45))}
.best-for-section .silk-card{position:absolute;inset:0;border-radius:22px;background:linear-gradient(145deg,#fafafa,#dfe5ea 58%,#f9fafb);border:1px solid rgba(255,255,255,.8);overflow:hidden}
.best-for-section .silk-card.back-1{transform:translate(20px,22px);opacity:.32}
.best-for-section .silk-card.back-2{transform:translate(10px,11px);opacity:.58}
.best-for-section .silk-card.front{z-index:3}
.best-for-section .silk-card.front::before{content:"";position:absolute;inset:0;background:linear-gradient(116deg,transparent 26%,rgba(255,255,255,.92) 45%,transparent 62%);opacity:.55}
.best-for-section .card-mark{position:absolute;left:9%;top:18%;width:54px;height:54px;border:2px solid var(--accent,var(--gold-light));border-radius:50%;box-shadow:0 0 20px color-mix(in srgb,var(--accent,var(--gold-light)) 35%,transparent)}
.best-for-section .card-mark::before,.best-for-section .card-mark::after{content:"";position:absolute;background:var(--accent,var(--gold-light));opacity:.9}
.best-for-section .card-mark::before{width:26px;height:2px;left:12px;top:24px}
.best-for-section .card-mark::after{height:26px;width:2px;left:24px;top:12px}
.best-for-section .card-copy{position:absolute;left:9%;right:9%;bottom:17%}
.best-for-section .card-name{color:#101318;font-size:clamp(17px,1.65vw,27px);line-height:1;font-weight:900;letter-spacing:-.04em}
.best-for-section .card-role{color:#5d6874;margin-top:8px;font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.best-for-section .card-foil-line{position:absolute;left:9%;right:9%;bottom:9%;height:3px;border-radius:99px;background:linear-gradient(90deg,transparent,var(--accent,var(--gold-light)),#fff,var(--accent,var(--gold-light)),transparent)}
.best-for-section .stage-copy{position:absolute;z-index:6;left:34px;right:34px;bottom:34px;padding:28px 30px 27px;border-radius:22px;background:rgba(6,8,11,.72);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.11);box-shadow:0 20px 50px rgba(0,0,0,.20)}
.best-for-section .stage-kicker{color:var(--gold-light);font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px}
.best-for-section .stage-title{margin:0;color:#fff;font-size:clamp(28px,2.5vw,42px);line-height:1.03;letter-spacing:-.048em}
.best-for-section .stage-promise{margin:12px 0 0;max-width:650px;color:rgba(255,255,255,.70);font-size:15px;line-height:1.58}
.best-for-section .stage-link{display:inline-flex;align-items:center;gap:9px;margin-top:18px;color:var(--blue);text-decoration:none;font-size:13px;font-weight:900}
.best-for-section .stage-link span{transition:transform .2s ease}
.best-for-section .stage-link:hover span{transform:translateX(4px)}
.best-for-section .audience-panel{border-radius:var(--radius-xl);padding:18px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.86);box-shadow:0 22px 60px rgba(30,45,65,.08);backdrop-filter:blur(16px)}
.best-for-section .audience-grid{height:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:12px}
.best-for-section .audience-item{position:relative;min-height:136px;padding:19px 20px 18px;text-align:left;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.90);color:var(--ink);cursor:pointer;overflow:hidden;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease,color .22s ease}
.best-for-section .audience-item::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.best-for-section .audience-item:hover{transform:translateY(-3px);border-color:rgba(0,194,255,.48);box-shadow:0 16px 34px rgba(0,194,255,.10)}
.best-for-section .audience-item.active{color:#fff;background:linear-gradient(145deg,#0b0e12,#171c22);border-color:#131820;box-shadow:0 20px 44px rgba(12,18,28,.24)}
.best-for-section .audience-item.active::after{transform:scaleX(1)}
.best-for-section .item-meta{display:flex;align-items:center;gap:10px;margin-bottom:15px}
.best-for-section .item-number{color:var(--gold);font-size:11px;font-weight:900;letter-spacing:.12em}
.best-for-section .item-tag{color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.best-for-section .audience-item.active .item-number{color:var(--blue)}
.best-for-section .audience-item.active .item-tag{color:rgba(255,255,255,.48)}
.best-for-section .item-title{margin:0;font-size:17px;line-height:1.14;letter-spacing:-.035em;font-weight:900}
.best-for-section .item-outcome{margin:8px 0 0;color:#707b88;font-size:12px;line-height:1.45;font-weight:700}
.best-for-section .audience-item.active .item-outcome{color:rgba(255,255,255,.62)}
.best-for-section .item-arrow{position:absolute;top:18px;right:18px;color:#a6afb9;font-weight:900;transition:transform .2s ease,color .2s ease}
.best-for-section .audience-item:hover .item-arrow{transform:translateX(3px);color:var(--blue-dark)}
.best-for-section .audience-item.active .item-arrow{color:var(--blue)}
@media(max-width:1100px){.best-for-section .experience{grid-template-columns:1fr}.best-for-section .feature-stage{min-height:620px}.best-for-section .audience-grid{grid-template-rows:none}.best-for-section .audience-item{min-height:130px}}
@media(max-width:700px){.best-for-section{padding:74px 18px 82px}.best-for-section .section-head{margin-bottom:30px}.best-for-section .feature-stage{min-height:610px;border-radius:24px}.best-for-section .stage-topline{left:22px;right:22px;top:22px}.best-for-section .desk-plane{left:3%;right:3%;top:21%;bottom:35%}.best-for-section .card-stack{width:78%;left:11%;top:28%}.best-for-section .stage-copy{left:16px;right:16px;bottom:16px;padding:22px 20px}.best-for-section .audience-panel{padding:10px;border-radius:24px}.best-for-section .audience-grid{grid-template-columns:1fr;gap:10px}.best-for-section .audience-item{min-height:118px}}

/* =============================================================================
   SAMPLES (cta-band variant) + kit-gallery
   ============================================================================= */
.cta-band{width:100% !important;max-width:none !important;margin:0 !important;padding:0 !important;background:#14181D !important;border-radius:0 !important;overflow:hidden}
.cta-box{background:linear-gradient(135deg,var(--obsidian),#222A33);color:#fff;position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;width:100% !important;max-width:none !important;margin:0 !important;border-radius:0 !important;padding:79px clamp(28px,6vw,110px) !important;justify-items:center !important;text-align:center !important}
.cta-box::before{content:"";position:absolute;width:360px;height:360px;right:-120px;top:-120px;background:radial-gradient(circle,rgba(201,169,110,.34),transparent 65%);border-radius:50%}
.cta-box>*{position:relative;z-index:2}
.cta-box>div:first-child{width:100%;max-width:660px;margin:0 auto;text-align:center !important}
.cta-box .eyebrow{color:#C9A96E !important;font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;display:block;margin-bottom:18px}
.cta-box h2{color:#F2F2F2 !important;font-size:clamp(26px,3vw,38px);line-height:1.16;margin:0}
.cta-box h2 .ln{display:block;white-space:nowrap}
.cta-box p{color:rgba(255,255,255,.74) !important;margin-top:14px}
.cta-box .btn-row{margin-top:32px;justify-content:center !important}
.cta-photo{aspect-ratio:4/3;border-radius:16px;background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.01)),linear-gradient(145deg,#1E242C,#14181D);border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden;width:100%;max-width:620px;margin:0 auto}
.cta-photo-img{width:100%;height:100%;object-fit:cover;display:block}
.cta-photo-type{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.85);padding:5px 11px;border-radius:6px;font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.cta-photo-label{position:absolute;bottom:16px;left:20px;right:20px;color:rgba(255,255,255,.55);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
#samples .kit-gallery{display:flex;flex-direction:column;gap:12px;min-width:0;width:100%;justify-self:center}
#samples .kit-gallery .kit-stage{width:100%;margin:0 auto;aspect-ratio:4/3;border-radius:16px;background:#1E242C center/cover no-repeat;border:1px solid rgba(255,255,255,.08);transition:opacity .25s ease}
#samples .kit-gallery .kit-stage.is-fading{opacity:.25}
#samples .kit-thumbs{display:flex;gap:10px;justify-content:center}
#samples .kit-thumb{width:74px;height:52px;border-radius:10px;border:1.5px solid rgba(255,255,255,.28);background-size:cover;background-position:center;cursor:pointer;padding:0;opacity:.72;transition:opacity .2s ease,border-color .2s ease,transform .2s ease}
#samples .kit-thumb:hover{opacity:1;transform:translateY(-2px);border-color:#00C2FF}
#samples .kit-thumb.is-active{opacity:1;border-color:#00C2FF;box-shadow:0 0 0 3px rgba(0,194,255,.22)}
@media(max-width:860px){.cta-box{grid-template-columns:1fr;padding:34px !important}.cta-box h2 .ln{white-space:normal}}

/* =============================================================================
   ROUTE-BAND — design help
   ============================================================================= */
.route-band{width:100% !important;max-width:none !important;margin:0 !important;padding:56px 0 !important;background:linear-gradient(135deg,#F4F8FB 0%,#FFFFFF 50%,#EDF7F4 100%) !important;border-radius:0 !important;overflow:hidden}
.route-box{width:100% !important;max-width:none !important;margin:0 !important;padding:48px clamp(28px,6vw,110px) !important;border:1px solid var(--line);border-left:0 !important;border-right:0 !important;border-radius:0 !important;background:var(--white);display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;text-align:center !important;gap:26px !important}
.route-box>div:first-child{width:100%;max-width:720px;margin:0 auto;text-align:center}
.route-box .eyebrow{color:#C9A96E !important;font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;display:block;margin-bottom:18px}
.route-box h2{font-size:clamp(24px,2.4vw,32px);color:var(--ink);margin:0}
.route-box p{margin-top:10px;max-width:650px !important;margin-left:auto !important;margin-right:auto !important;color:var(--body)}
.route-box .btn-row{justify-content:center !important;margin-top:0 !important}

/* =============================================================================
   KEEP-EXPLORING — "you may also like" (STRUCTURE only; per-page card scenes
   live in the page's scoped sheet — component owns structure, page owns decoration)
   ============================================================================= */
.keep-exploring{--cyan:#00c2ff;--panel:#f5f5f7;padding:84px 24px 110px}
.keep-exploring .keep-inner{max-width:1280px;margin:0 auto}
.keep-exploring .eyebrow{margin:0 0 16px;color:var(--gold);font-size:13px;font-weight:800;letter-spacing:.22em;text-transform:uppercase}
.keep-exploring h2{margin:0 0 42px;font-size:clamp(32px,3.4vw,50px);line-height:1.04;letter-spacing:-.04em;color:var(--ink)}
.keep-exploring .explore-stage{min-height:640px;display:grid;grid-template-columns:360px minmax(0,1fr);gap:72px;align-items:center;padding:64px 72px;border-radius:28px;background:var(--panel);overflow:hidden}
.keep-exploring .explore-tabs{align-self:center}
.keep-exploring .explore-item{border-bottom:1px solid #d7d7dc}
.keep-exploring .explore-item:first-child{border-top:0}
.keep-exploring .explore-button{width:100%;display:grid;grid-template-columns:1fr 24px;gap:18px;align-items:center;padding:24px 0;border:0;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.keep-exploring .explore-button span:first-child{font-size:24px;font-weight:700;line-height:1.15;letter-spacing:-.035em}
.keep-exploring .chevron{position:relative;width:18px;height:18px;justify-self:end;transition:transform .28s ease}
.keep-exploring .chevron:before,.keep-exploring .chevron:after{content:"";position:absolute;top:8px;width:11px;height:2px;border-radius:10px;background:#7a7d82}
.keep-exploring .chevron:before{left:0;transform:rotate(45deg)}
.keep-exploring .chevron:after{right:0;transform:rotate(-45deg)}
.keep-exploring .explore-item.active .chevron{transform:rotate(180deg)}
.keep-exploring .explore-copy{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s ease}
.keep-exploring .explore-copy>div{overflow:hidden}
.keep-exploring .explore-copy p{margin:0;padding:0 0 25px;color:#34383e;font-size:16px;line-height:1.52}
.keep-exploring .explore-item.active .explore-copy{grid-template-rows:1fr}
.keep-exploring .explore-link{display:inline-flex;margin-bottom:26px;color:#007fa8;font-size:14px;font-weight:800;text-decoration:none}
.keep-exploring .explore-link:after{content:" →"}
.keep-exploring .visual-shell{position:relative;min-height:510px;display:grid;place-items:center}
.keep-exploring .visual-panel{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:translateY(14px) scale(.985);transition:opacity .38s ease,transform .38s ease;pointer-events:none}
.keep-exploring .visual-panel.active{opacity:1;transform:none;pointer-events:auto}
.keep-exploring .card-scene{position:relative;width:min(660px,100%);height:430px}
.keep-exploring .business-card{position:absolute;left:50%;top:50%;width:480px;height:275px;border-radius:21px;transform:translate(-50%,-50%) rotate(-4deg);box-shadow:0 30px 70px rgba(0,0,0,.25);overflow:hidden}
.keep-exploring .business-card:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 18%,rgba(255,255,255,.16) 42%,transparent 63%)}
.keep-exploring .stack-a,.keep-exploring .stack-b{position:absolute;left:50%;top:50%;width:480px;height:275px;border-radius:21px;background:#17181a;box-shadow:0 18px 45px rgba(0,0,0,.16)}
.keep-exploring .stack-a{transform:translate(-45%,-44%) rotate(5deg);opacity:.35}
.keep-exploring .stack-b{transform:translate(-53%,-55%) rotate(-10deg);opacity:.22}
/* PHOTO MODE (FC-01 pilot, 2026-07-25) — a delivered cross-sell photograph replaces
   this item's decorative CSS scene. Per-item, so a page may mix a real shot with a
   scene while its other shots are outstanding. Same footprint as .card-scene so the
   panel geometry (and every breakpoint below) is unchanged. */
.keep-exploring .photo-scene{position:relative;width:min(660px,100%);height:430px;margin:0}
.keep-exploring .explore-photo{width:100%;height:calc(100% - 26px);object-fit:cover;border-radius:22px;box-shadow:0 30px 70px rgba(0,0,0,.25);display:block}
@media(max-width:900px){.keep-exploring .photo-scene{height:330px}}
@media(max-width:560px){.keep-exploring .photo-scene{height:250px}}
.keep-exploring .visual-label{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);color:#777;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
@media(max-width:900px){.keep-exploring{padding:64px 18px 80px}.keep-exploring h2{margin-bottom:30px}.keep-exploring .explore-stage{grid-template-columns:1fr;gap:28px;padding:36px 28px;min-height:0}.keep-exploring .visual-shell{min-height:360px;order:-1}.keep-exploring .card-scene{height:330px}.keep-exploring .business-card,.keep-exploring .stack-a,.keep-exploring .stack-b{width:min(430px,84vw);height:auto;aspect-ratio:1.75/1}}
@media(max-width:560px){.keep-exploring .explore-stage{padding:24px 20px;border-radius:20px}.keep-exploring .visual-shell{min-height:270px}.keep-exploring .card-scene{height:250px}.keep-exploring .explore-button span:first-child{font-size:20px}}

/* =============================================================================
   DARK-AS-DESIGN — foil-as-design differentiator band (multifoil)
   ============================================================================= */
.multifoil-band{padding-top:clamp(58px,6vw,98px);padding-bottom:clamp(58px,6vw,98px)}
.multifoil-band .g3d-inner{max-width:none;margin:0;padding:0 clamp(16px,2.5vw,48px)}
.multifoil-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:center}
.multifoil-band .g3-eyebrow{color:var(--gold-light)}
.g3d-title{font-size:clamp(21px,2.8vw,36px);line-height:1.06;letter-spacing:-.02em;font-weight:800;color:#fff;margin:0 0 10px}
.g3d-lead{font-size:clamp(14.5px,1.15vw,16.5px);line-height:1.7;color:rgba(255,255,255,.74);max-width:640px;margin:0}
.g3d-diffs{margin-top:28px;display:grid;gap:20px}
.g3d-diff{padding-left:18px}
.g3d-diff-gold{border-left:2px solid var(--gold)}
.g3d-diff-cyan{border-left:2px solid var(--blue)}
.g3d-diff h3{font-size:19px;letter-spacing:-.02em;margin:0 0 8px;color:#fff}
.g3d-diff p{color:rgba(255,255,255,.66);font-size:14.5px;line-height:1.7;margin:0}
.multifoil-visual{height:clamp(320px,26vw,420px);border-radius:16px;border:1px solid rgba(255,255,255,.12);width:100%;object-fit:cover;object-position:center;display:block;background:conic-gradient(from 30deg at 50% 50%,rgba(232,201,154,.9),rgba(43,208,255,.7),rgba(161,107,255,.7),rgba(71,224,160,.7),rgba(232,201,154,.9))}
@media(max-width:860px){.multifoil-wrap{grid-template-columns:1fr;gap:30px}.multifoil-band .g3d-inner{padding:0 16px}}

/* =============================================================================
   FOIL-RANGE — foil system (FC-01 + FC-20 only). Chart figure + why-cards.
   ============================================================================= */
.foilsys-head{text-align:center}
.foilsys-eyebrow{display:inline-flex;align-items:center;justify-content:center;gap:14px;color:var(--gold);font-size:12px;font-weight:800;letter-spacing:.28em;text-transform:uppercase;margin-bottom:16px}
.foilsys-eyebrow::before,.foilsys-eyebrow::after{content:"";width:40px;height:1px;background:var(--gold);opacity:.55}
.foil-chart-figure{margin:clamp(28px,3vw,44px) auto 0;max-width:1080px}
.foil-chart-img{width:100%;height:auto;border-radius:16px;border:1px solid var(--line);display:block}
/* Foil System — functional 38-swatch filter wall (v44 mockup #fw38-wall, owner gate 2026-07-21) */
.foil-range .fw38-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px 28px;flex-wrap:wrap;max-width:none}
.foil-range .fw38-head-copy{text-align:left;max-width:640px}
.foil-range .fw38-head-copy .foilsys-eyebrow{justify-content:flex-start;margin-bottom:12px}
.foil-range .fw38-head-copy .foilsys-eyebrow::before{display:none}
.foil-range .fw38-head-copy h2{text-align:left;margin:0 0 8px}
.foil-range .fw38-head-copy .lead{text-align:left;margin:0}
.foil-range .fw38-tabs{display:inline-flex;flex-wrap:wrap;gap:4px;background:var(--soft);border-radius:12px;padding:5px}
.foil-range .fw38-tab{appearance:none;-webkit-appearance:none;border:0;background:transparent;font-family:inherit;font-size:13px;font-weight:700;color:var(--body);padding:8px 15px;border-radius:9px;cursor:pointer;transition:background .18s ease,color .18s ease,box-shadow .18s ease;white-space:nowrap}
.foil-range .fw38-tab:hover{color:var(--ink)}
.foil-range .fw38-tab.is-active{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--blue),0 1px 2px rgba(0,0,0,.06)}
.foil-range .fw38-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1vw,16px);margin-top:clamp(26px,3vw,40px)}
.foil-range .fw38-tile{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#0b0e12;isolation:isolate;transition:transform .25s ease,border-color .2s ease,box-shadow .25s ease}
.foil-range .fw38-media{position:absolute;inset:0;background-size:cover;background-position:center;transition:filter .3s ease,transform .35s ease}
.foil-range .fw38-tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:52%;background:linear-gradient(to top,rgba(6,9,12,.74),rgba(6,9,12,0));z-index:2;pointer-events:none}
.foil-range .fw38-name{position:absolute;left:12px;right:10px;bottom:9px;z-index:3;color:#fff;font-size:12.5px;font-weight:700;letter-spacing:-.01em;line-height:1.2;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.foil-range .fw38-tile:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:0 0 0 2px var(--blue),0 14px 30px rgba(0,194,255,.22)}
.foil-range .fw38-tile:hover .fw38-media{filter:brightness(1.12) saturate(1.05)}
@media(max-width:1120px){.foil-range .fw38-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:820px){.foil-range .fw38-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.foil-range .fw38-head{align-items:flex-start}}
@media(max-width:520px){.foil-range .fw38-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fw38-why{margin-top:clamp(40px,4.5vw,64px)}
.fw38-why h3{font-size:clamp(19px,2.2vw,28px);line-height:1.1;letter-spacing:-.02em;font-weight:800;color:var(--ink);margin:0 0 8px}
.fw38-why .g3-lead{max-width:820px}
.fw38-why-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1vw,16px);margin-top:22px}
.fw38-why-card{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:clamp(20px,1.8vw,26px)}
.fw38-why-card .g3-num{display:block;margin-bottom:12px}
.fw38-why-card h4{font-size:18px;letter-spacing:-.02em;color:var(--ink);margin:0 0 8px}
.fw38-why-card p{font-size:14.5px;line-height:1.7;color:var(--body);margin:0}
@media(max-width:900px){.fw38-why-cards{grid-template-columns:1fr}}

/* =============================================================================
   HUB-FAQ — admin-driven FAQ, 2-col accordion cards (JS toggles .is-open)
   ============================================================================= */
/* TOP MARGIN 40px, not 0 — owner-caught 2026-07-26 (the FAQ heading's descenders were
   landing on the first cards, on every fc_v2 page).
   WHY IT HAPPENED, and why a template change could not reach it: every other section wraps
   its heading in `.g3-head`, which carries `margin-bottom:40px`. The FAQ heading sits in a
   plain `.center` with no spacing rule at all, so its grid began at the heading's box edge —
   and at 58px the descenders of a word like "slim." overhang that edge. On top of that, the
   `margin` SHORTHAND below is `!important`, so it resets margin-top to 0 and beats anything a
   shared or per-page rule tries to add. That combination is why this survived a template pass:
   the section had no spacing to inherit AND was immune to receiving any.
   ⚠️ Keep the top value IN this shorthand. Adding a separate `margin-top` elsewhere will lose
   to this line, which is the trap that hid the bug. */
/* ⛔ align-items MUST stay `start`, not `stretch` (owner-caught 2026-08-16, from a screenshot).
   With `stretch`, the two cards in a grid row share the row's height — so opening ONE card also
   grows its CLOSED neighbour, which then renders as a tall box with a 2-line clamp and a pile of
   empty space under it. It reads exactly like a box that opened on its own.
   Measured on /print/30mil-plastic-cards AND /print/Suede-Laminated-Business-Cards at 1440px:
     stretch -> open card 123->195px, and the closed neighbour ALSO 123->195px  (the defect)
     start   -> open card 123->195px, closed neighbour stays 123px             (correct)
   This sheet is shared by every FC product page, so the defect was site-wide, not plastic-only —
   the right component was used, the component itself was wrong. Cards keep a uniform CLOSED
   height via .faq-item{min-height} below; only the opened one grows. */
#faq .hub-faq{max-width:1180px !important;display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:20px !important;margin:40px auto 0 !important;align-items:start !important}
#faq .hub-faq .faq-item{position:relative;display:block;min-height:118px;padding:20px 20px 18px !important;border:1px solid var(--line) !important;border-radius:18px !important;background:var(--white) !important;box-shadow:0 10px 28px rgba(20,24,29,.045);cursor:pointer;overflow:hidden;transition:min-height .28s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease}
#faq .hub-faq .faq-item:hover,#faq .hub-faq .faq-item:focus-visible{border-color:rgba(0,194,255,.7) !important;box-shadow:0 14px 34px rgba(0,194,255,.10);outline:none;transform:translateY(-1px)}
#faq .hub-faq .faq-item h3{margin:0 36px 12px 0 !important;font-size:18px !important;line-height:1.3 !important;letter-spacing:-.02em !important;color:var(--ink)}
#faq .hub-faq .faq-item p{margin:0 !important;font-size:15px !important;line-height:1.6 !important;color:var(--body) !important;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
#faq .hub-faq .faq-item::after{content:"+";position:absolute;top:18px;right:20px;width:26px;height:26px;display:grid;place-items:center;color:var(--blue-dark);font-size:22px;font-weight:700;line-height:1;transition:transform .22s ease}
#faq .hub-faq .faq-item.is-open{min-height:0;border-color:rgba(0,194,255,.75) !important;box-shadow:0 16px 38px rgba(0,194,255,.11)}
#faq .hub-faq .faq-item.is-open p{display:block;overflow:visible}
#faq .hub-faq .faq-item.is-open::after{content:"\2212";transform:rotate(180deg)}
@media(max-width:860px){#faq .hub-faq{grid-template-columns:1fr !important}#faq .hub-faq .faq-item{min-height:104px}}

/* =============================================================================
   WORTH-KNOWING — g3 refit (markup from inc/page/worth-knowing.php)
   ============================================================================= */
.worth-knowing{background:var(--cream);border-top:1px solid var(--line);padding:88px 24px}
.worth-knowing .wk-inner{max-width:var(--max);margin:0 auto}
.worth-knowing .wk-head-wrap{text-align:left;margin-bottom:clamp(22px,2.5vw,34px)}
.worth-knowing .eyebrow{display:block;color:var(--gold);letter-spacing:.28em;margin-bottom:12px}
.worth-knowing .wk-head{font-size:clamp(21px,2.8vw,36px);line-height:1.06;letter-spacing:-.02em;color:var(--ink);margin:0;max-width:none}
.worth-knowing .wk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.worth-knowing .wk-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:30px 28px;box-shadow:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.worth-knowing .wk-card:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:0 0 0 2px var(--blue),0 14px 30px rgba(0,194,255,.14)}
.worth-knowing .wk-card-title{font-size:18px;font-weight:800;line-height:1.28;letter-spacing:-.01em;color:var(--ink)}
.worth-knowing .wk-card-framing{margin-top:12px;font-size:15px;font-style:italic;line-height:1.55;color:var(--body);flex:1}
.worth-knowing .wk-card-cue{margin-top:22px;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--blue-dark)}
.worth-knowing .wk-card:hover .wk-card-cue{color:var(--blue)}
@media(max-width:900px){.worth-knowing{padding:64px 22px}.worth-knowing .wk-grid{grid-template-columns:1fr;gap:18px}}

/* ============================================================================
   CUT SYSTEM band (.cut-system) — inc/page/cut-system.php
   EXTRACTED 2026-07-25 (tier2-variant wave) from product-die-cut.css's
   #die-cut-system one-off, which was inline-only on FC-14 while DC2-05 square +
   DC2-06 slim need the identical band. Keyed on the CLASS, never on a page id,
   because each consumer uses its own anchor (#die-cut-system / #square-cut-system
   / #slim-cut-system) and an id-scoped rule would reach only one of them.
   THE COMPONENT OWNS THIS TREATMENT — do not restate/override these in a page
   sheet (see the families-component divergence, GOTCHAS #173).
   Vars carry fallbacks so the band survives a page that loads this sheet early.
   ========================================================================= */
.cut-system .dcs-eyebrow{color:var(--gold,#C9A96E);font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;margin:0 0 14px}
.cut-system .dcs-title{margin:0;color:var(--ink,#14181D);font-size:clamp(26px,3vw,38px);font-weight:800;letter-spacing:-.02em;line-height:1.08}
.cut-system .dcs-lead{margin:18px 0 0;max-width:72ch;color:var(--body,#424B55);font-size:15.5px;line-height:1.65}
.cut-system .dcs-lead strong{color:var(--ink,#14181D);font-weight:800}
.cut-system .dcs-grid{margin-top:clamp(30px,3.4vw,46px);display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,1.8vw,26px)}
.cut-system .dcs-card{display:flex;flex-direction:column;background:var(--white,#fff);border:1px solid var(--line,#E7EBEF);border-radius:var(--radius-md,18px);overflow:hidden;box-shadow:var(--shadow,0 18px 50px rgba(0,0,0,.10))}
.cut-system .dcs-photo{aspect-ratio:4/3;background-size:cover;background-position:center;background-color:#20262E}
.cut-system .dcs-body{padding:clamp(20px,2vw,28px);display:flex;flex-direction:column}
.cut-system .dcs-kicker{color:var(--gold,#C9A96E);font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:9px}
.cut-system .dcs-card h3{margin:0 0 9px;color:var(--ink,#14181D);font-size:clamp(19px,1.5vw,22px);font-weight:800;letter-spacing:-.02em}
.cut-system .dcs-card p{margin:0;color:var(--body,#424B55);font-size:14px;line-height:1.6}
.cut-system .dcs-rule{align-self:flex-start;margin-top:16px;display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:800;line-height:1;letter-spacing:.005em}
.cut-system .dcs-rule svg{width:13px;height:13px;flex:none}
.cut-system .dcs-rule.is-req{background:rgba(0,194,255,.12);color:#0A6E8C}
.cut-system .dcs-rule.is-req svg{color:var(--blue,#00C2FF)}
.cut-system .dcs-rule.is-any{background:var(--cool-100,#F4F6F8);color:var(--muted,#7A8590);font-weight:700}
/* Photo WAITING state — an undelivered slot must READ as undelivered. Never a placeholder image.
   16/9 rather than the delivered slot's 4/3 (owner-directed 2026-07-27, "make the tiles smaller if
   needed"): with no photo yet, the 4/3 block is the biggest thing on the page — measured 583x596
   per card at 1440px, of which 436px was empty dark rectangle, and Square shows four of them at
   once. An empty slot should not out-weigh a filled one. Scoped to the WAITING modifier so a
   delivered photo keeps the designed 4/3 crop.
   Rows stay even: Square and Slim are 4-of-4 waiting, die-cut is 0-of-4, so no consumer today
   mixes the two ratios in one row. If one ever does, the grid still equalises card heights —
   only the body slack differs. */
.cut-system .dcs-photo--waiting{display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,#1b2128,#2a323c);aspect-ratio:16/9}
.cut-system .dcs-waiting-tag{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 13px}
@media(max-width:820px){.cut-system .dcs-grid{grid-template-columns:1fr}}

/* Hero-stage play badge (2026-07-27, owner-directed): the gallery could only be started from the
   small thumbnail — on first paint the big stage is just the poster image with no control on it.
   Shown only when the ACTIVE slot has a video and no player is mounted; hidden the moment one is. */
.fw-hero .fwh-stage-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:76px;height:76px;border-radius:999px;border:1px solid rgba(255,255,255,.55);
  background:rgba(12,15,20,.55);backdrop-filter:blur(3px);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;transition:transform .15s,background .15s}
.fw-hero .fwh-stage-play svg{width:34px;height:34px;margin-left:4px}
.fw-hero .fwh-stage-play:hover{background:rgba(12,15,20,.72);transform:translate(-50%,-50%) scale(1.06)}
.fw-hero .fwh-stage-play:focus-visible{outline:3px solid #00C2FF;outline-offset:3px}
@media(max-width:640px){.fw-hero .fwh-stage-play{width:60px;height:60px}.fw-hero .fwh-stage-play svg{width:26px;height:26px}}

/* =============================================================================
   B&W AT REST — hoverable product photography (owner-directed 2026-08-04)
   A photo that has a hover state (and, on the thumb rail, a SELECTED state)
   sits desaturated until it is engaged. Three deliberate boundaries, all owner
   decisions — do not widen them without asking:
     • THUMBS AND TILES ONLY. The big .fwh-stage keeps full colour: it is the
       first thing a visitor sees on a page whose product IS the colour (gold
       foil, coloured edges), and it has no hover state that could restore it.
     • @media (hover:hover). Touch has no hover, so phones/tablets keep full
       colour rather than stranding a visitor on grey photos with no reveal.
     • STACKED on the existing veils (thumb white 40%, tile dark 42%), not a
       replacement for them.
   ⚠️ .fw-hero-tall sets its OWN filter chain on stage AND thumb (see the tall
   retrofit above). filter does NOT accumulate across rules — the winning
   declaration replaces the whole chain — so the tall-variant rules here repeat
   contrast/saturate/brightness in BOTH the resting and the restored state, and
   the restore is that explicit chain rather than `none`. Reset one of these to
   `filter:none` and the tall hero silently loses its colour grade.
   ========================================================================== */
@media (hover:hover){
  /* hero gallery — THUMB RAIL only; .fwh-stage deliberately absent */
  .fw-hero .fwh-thumb{filter:grayscale(1)}
  .fw-hero .fwh-thumb:hover,.fw-hero .fwh-thumb:focus-visible,.fw-hero .fwh-thumb.is-active{filter:grayscale(0)}
  .fw-hero-tall .fwh-thumb{filter:grayscale(1) contrast(1.04) saturate(1.02) brightness(1.01)}
  .fw-hero-tall .fwh-thumb:hover,.fw-hero-tall .fwh-thumb:focus-visible,.fw-hero-tall .fwh-thumb.is-active{filter:contrast(1.04) saturate(1.02) brightness(1.01)}

  /* combo tiles. ASSUMES the .customize-badge stays visually neutral at rest:
     a parent filter applies to its whole subtree, so the badge greys too — it is
     a white disc with an ink icon at rest, and its blue label only appears on
     BADGE hover, which implies TILE hover, by which point grayscale has already
     lifted. Give the badge colour at rest and it will render grey. */
  .sfc-photo{filter:grayscale(1);transition:filter .4s ease}
  .sfc-tile:hover .sfc-photo,.sfc-tile:focus-within .sfc-photo{filter:grayscale(0)}
}