/* ⛔ [hidden] MUST WIN, EVERYWHERE — one rule, not a list (added 2026-08-31,
   legacy-pages-sample-history-and-pro-dashboard).

   The UA stylesheet gives [hidden] `display:none`, but ANY author rule that sets a display beats
   it, silently. The element's own `.hidden` property stays true the whole time, so a DOM check
   reads "hidden" while the thing is on screen — you can only catch it by measuring the box.

   THIS HAS NOW BITTEN THREE TIMES AND THE FIRST TWO FIXES WERE AN ALLOWLIST:
     · .app-alert          (display:flex)  — an empty alert bar on a fresh form
     · .addr-confirm       (display:flex)  — an empty "Delivering to" bar, patched one-off
     · .app-gal-modal                      — patched one-off
     · .app-tile-grid      (display:grid)  — the Pro dashboard's product tabs: TWO hidden panels
                                             rendered under the visible one, so three tabs' worth
                                             of content showed at once and every toggle "passed"
   A per-class patch can never close (PRIME_DIRECTIVES, Positive-Primary Encoding): the next class
   that authors a display re-opens it. This one rule does, for every element on every v2 page —
   and only v2 pages, since header-v2.php is the sole loader of this sheet.

   ⚠️ VERIFY VISIBILITY BY GEOMETRY, NEVER BY THE FLAG YOU SET: getBoundingClientRect().height,
   not element.hidden. That is the check that found this one. */
[hidden] { display: none !important; }

:root {
  --blue: #00C2FF;
  --blue-dark: #008dbc;
  --blue-soft: #E9F9FE;
  --blue-glow: rgba(0, 194, 255, .28);
  --gold: #C9A96E;
  --gold-light: #E8C99A;
  --gold-soft: #F8F1E3;
  --gold-glow: rgba(201, 169, 110, .28);
  --obsidian: #0A0A0A;
  --black: #050505;
  --charcoal: #181818;
  --charcoal-2: #242424;
  --ink: #111111;
  --body: #555555;
  --muted: #777777;
  --line: #E7E2D8;
  --soft: #F7F6F2;
  --cream: #FBF7EF;
  --white: #FFFFFF;
  --max: 1240px;
  --radius-xl: 44px;
  --radius-lg: 30px;
  --radius-md: 22px;
  --radius-sm: 14px;
  --shadow-soft: 0 18px 54px rgba(0,0,0,.08);
  --shadow-deep: 0 46px 120px rgba(0,0,0,.46);
  --font: Manrope, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
p { margin: 0; color: var(--body); }
h1, h2, h3, h4 { margin: 0; letter-spacing: -.055em; line-height: 1.02; }
h1 { font-size: clamp(38px, 4.8vw, 66px); max-width: 870px; }
h2 { font-size: clamp(34px, 4.55vw, 68px); max-width: 900px; }
h3 { font-size: clamp(22px, 2.1vw, 30px); letter-spacing: -.04em; }
h4 { font-size: 17px; letter-spacing: -.025em; }

@keyframes shimmer {
  0% { background-position: -180% 0; }
  100% { background-position: 180% 0; }
}
@keyframes floatOne {
  0%,100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-13px) rotate(-6deg); }
}
@keyframes floatTwo {
  0%,100% { transform: translateY(0) rotate(7deg); }
  50% { transform: translateY(-10px) rotate(9deg); }
}
@keyframes slowSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes lineDraw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.topbar {
  background: #050505;
  color: rgba(255,255,255,.76);
  text-align: center;
  font-size: 13px;
  padding: 10px 22px;
  letter-spacing: .01em;
  position: relative;   /* establish a stacking context... */
  z-index: 90;          /* ...above .site-nav (80) so the over-pulled hero tucks BEHIND the black bar */
}
.topbar strong { color: var(--gold-light); }

.site-nav {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-bottom: 1px solid rgba(0,0,0,.07);
  transition: background .25s ease, backdrop-filter .25s ease, border-color .25s ease;
}
/* Home page ONLY (body.nav-over-hero): nav is transparent while at the very top so the hero
   image shows through, then turns solid white once scrolled (.scrolled, added by nav.js) OR when
   a mega menu opens (.mega-open). Every other page keeps the solid base above. */
/* ── Home hero nav: two A/B SKINS chosen in header-v2.php (body.nav-skin-glass | .nav-skin-white).
   Flip live with ?nav=white / ?nav=glass. Default = glass.
   • glass  : bar transparent over the hero (white logo/text); goes solid white when scrolled, when a
              mega panel opens, OR when ANY dropdown (mega or simple) is hovered — so hovering between
              Business Cards and Plastic Cards no longer flickers white↔transparent.
   • white  : solid opaque white bar always, hero sits below it (no overlap), dark logo/text. ── */

/* GLASS — transparent at the very top */
body.nav-over-hero.nav-skin-glass .site-nav {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
}
/* GLASS — solid white whenever scrolled, a mega panel is open, or any dropdown is hovered (kills the flicker) */
body.nav-over-hero.nav-skin-glass .site-nav.scrolled,
body.nav-over-hero.nav-skin-glass .site-nav.mega-open,
body.nav-over-hero.nav-skin-glass .site-nav:has(.nav-item.has-dropdown:hover) {
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
body.nav-over-hero.nav-skin-glass .site-nav.scrolled { border-bottom: 1px solid rgba(0,0,0,.07); }
body.nav-over-hero.nav-skin-glass .site-nav.mega-open { border-bottom: none; }
/* GLASS, desktop — white logo/text ONLY while the bar is truly transparent (nothing open). The
   extra :not(:has(...)) flips text back to dark the instant a dropdown is hovered and the bar goes
   white, so we never get white-on-white. */
@media (min-width: 1041px) {
  body.nav-over-hero.nav-skin-glass .site-nav:not(.scrolled):not(.mega-open):not(:has(.nav-item.has-dropdown:hover)) .nav-links { color: #fff; }
  body.nav-over-hero.nav-skin-glass .site-nav:not(.scrolled):not(.mega-open):not(:has(.nav-item.has-dropdown:hover)) .nav-links a:hover { color: rgba(255,255,255,.72); }
  body.nav-over-hero.nav-skin-glass .site-nav:not(.scrolled):not(.mega-open):not(:has(.nav-item.has-dropdown:hover)) .nav-icon { color: #fff; }
  body.nav-over-hero.nav-skin-glass .site-nav:not(.scrolled):not(.mega-open):not(:has(.nav-item.has-dropdown:hover)) .brand-logo { filter: brightness(0) invert(1); }
  body.nav-over-hero.nav-skin-glass .site-nav:not(.scrolled):not(.mega-open):not(:has(.nav-item.has-dropdown:hover)) .nav-cta:not(:hover):not(:focus-visible) { color: var(--white); border-color: rgba(255,255,255,.6); }
}
/* GLASS, desktop — pull the hero up behind the transparent bar so the nav overlays the photo.
   -86px over-pulls past the ~74px nav so the z-90 topbar covers the excess (no white gap). */
@media (min-width: 1041px) {
  body.nav-over-hero.nav-skin-glass .hero {
    margin-top: -86px;
  }
}

/* ── COOL over-hero (home, ?nav=cool) — mirror the GLASS skin so the cool-gray nav also starts
   transparent over the hero and only goes solid (cool-gray) on scroll / mega-open / dropdown-hover.
   The base `body.nav-skin-cool .site-nav` (solid from the top) is correct for non-over-hero pages
   (e.g. product pages); this only overrides it on the home, where nav-over-hero is set. ── */
body.nav-over-hero.nav-skin-cool .site-nav {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
}
body.nav-over-hero.nav-skin-cool .site-nav.scrolled,
body.nav-over-hero.nav-skin-cool .site-nav.mega-open,
body.nav-over-hero.nav-skin-cool .site-nav:has(.nav-item.has-dropdown:hover) {
  background: rgba(218,231,238,.95);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
body.nav-over-hero.nav-skin-cool .site-nav.scrolled { border-bottom: 1px solid #BCD2DB; }
body.nav-over-hero.nav-skin-cool .site-nav.mega-open { border-bottom: none; }
@media (min-width: 1041px) {
  /* white logo/text while transparent over the dark hero; dark text returns (base cool rule) once solid */
  body.nav-over-hero.nav-skin-cool .site-nav:not(.scrolled):not(.mega-open):not(:has(.nav-item.has-dropdown:hover)) .nav-links,
  body.nav-over-hero.nav-skin-cool .site-nav:not(.scrolled):not(.mega-open):not(:has(.nav-item.has-dropdown:hover)) .nav-links a { color: #fff; }
  body.nav-over-hero.nav-skin-cool .site-nav:not(.scrolled):not(.mega-open):not(:has(.nav-item.has-dropdown:hover)) .nav-links a:hover { color: rgba(255,255,255,.72); }
  body.nav-over-hero.nav-skin-cool .site-nav:not(.scrolled):not(.mega-open):not(:has(.nav-item.has-dropdown:hover)) .nav-icon { color: #fff; }
  body.nav-over-hero.nav-skin-cool .site-nav:not(.scrolled):not(.mega-open):not(:has(.nav-item.has-dropdown:hover)) .brand-logo { filter: brightness(0) invert(1); }
  body.nav-over-hero.nav-skin-cool .site-nav:not(.scrolled):not(.mega-open):not(:has(.nav-item.has-dropdown:hover)) .nav-cta:not(:hover):not(:focus-visible) { color: var(--white); border-color: rgba(255,255,255,.6); }
  /* pull the hero up behind the transparent bar, same as glass */
  body.nav-over-hero.nav-skin-cool .hero { margin-top: -86px; }
}

/* WHITE — solid opaque white bar always; dark logo/text from the base; hero stays below (no pull-up). */
body.nav-over-hero.nav-skin-white .site-nav {
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 17px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 26px;
}
.brand {
  display: inline-flex;
  align-items: center;
}
.brand-logo {
  display: block;
  height: 30px;
  width: auto;
}
.nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  color: #272727;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.nav-links a { transition: color .2s ease; }
.nav-links a:hover { color: var(--blue); }
.nav-icons {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-left: 4px;
}
.nav-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #111;
}
.nav-icon:hover { color: var(--blue); }
.nav-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-icon-badge {
  position: absolute;
  top: -7px;
  right: -9px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--blue);
  color: var(--obsidian);
  font-size: 10px;
  font-weight: 900;
  line-height: 16px;
  text-align: center;
}
/* An empty badge is a zero count, not a blue dot. header-v2.php renders the cart badge
   unconditionally so js/cart.js has a target to update after a removal (bugfix-2026-09-04);
   without this rule the min-width:16px pill would show on every page with an empty cart. */
.nav-icon-badge:empty { display: none; }

.nav-cta,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 15px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 900;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary {
  background: var(--blue);
  color: var(--obsidian);
  box-shadow: 0 16px 34px rgba(0,194,255,.24);
}
.btn:hover { transform: translateY(-3px); }
.btn-primary:hover { box-shadow: 0 20px 44px rgba(0,194,255,.32); }
/* Nav CTA = Henry's FC mockup outline pill (transparent at rest, dark outline + dark text) that
   fills cyan on hover (mockup `.nav .nav-cta`, FC-01_foil.html lines 2884-2885). SITE-WIDE chrome —
   applies on home + every v2 page. The over-hero (glass/cool, not-scrolled) states force a WHITE
   outline so the button stays visible on the dark hero image (see the nav-skin rules above). */
.nav-cta {
  min-height: 0;
  padding: 13px 22px;
  border-radius: 999px;
  background: transparent;
  border: 1.5px solid rgba(17,17,17,.5);
  color: #111;
  box-shadow: none;
  font-size: 13px;
  font-weight: 800;
}
.nav-cta:hover,
.nav-cta:focus-visible {
  background: #00C2FF;
  border: 2px solid #00C2FF;
  color: #070707;
  box-shadow: 0 0 0 4px rgba(0,194,255,.30), 0 0 26px rgba(0,194,255,.7);
}
.btn-dark { background: var(--obsidian); color: var(--white); }
.btn-light { background: var(--white); color: var(--ink); border-color: rgba(0,0,0,.08); }
.btn-glass {
  background: rgba(255,255,255,.06);
  color: var(--white);
  border-color: rgba(255,255,255,.18);
}
/* Hero CTA — default = glass outline, hover = cyan capsule + halo.
   Both Hero buttons share this style so they read as twin pathways. */
.btn-hero {
  background: rgba(255,255,255,.06);
  color: var(--white);
  border-color: rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn-hero:hover {
  background: var(--blue);
  color: var(--obsidian);
  border-color: transparent;
  box-shadow: 0 20px 44px rgba(0,194,255,.36);
}
.btn-outline-dark {
  background: transparent;
  border-color: rgba(0,0,0,.16);
  color: var(--ink);
}
.text-link {
  color: var(--blue-dark);
  font-weight: 900;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}
.text-link::after { content: "→"; transition: transform .2s ease; }
.text-link:hover::after { transform: translateX(4px); }

.section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 104px 24px;
  position: relative;
}
.section-tight { padding-top: 74px; padding-bottom: 74px; }
.eyebrow {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .23em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.eyebrow.blue { color: var(--blue); }
.lead {
  color: #353535;
  font-size: clamp(17px, 1.65vw, 22px);
  line-height: 1.62;
  max-width: 780px;
  margin-top: 24px;
}
.center { text-align: center; }
.center h2, .center .lead { margin-left: auto; margin-right: auto; }
.btn-row { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 32px; align-items: center; }

.footer {
  background: #050505;
  color: rgba(255,255,255,.58);
  padding: 44px 24px;
  font-size: 14px;
}
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
/* Dark footer: render the (black) brand logo in white via filter. */
.footer-logo {
  display: block;
  height: 30px;
  width: auto;
  margin-bottom: 14px;
  filter: brightness(0) invert(1);
}

/* ============================================================
   NAV DROPDOWNS — added for Henry redesign (site-chrome-about)
   .nav-item wraps a top-level nav link that has a dropdown.
   Dropdown opens on :hover (CSS-primary, JS-optional).
   Top-level link remains navigable (no-JS/touch safe).
   ============================================================ */
.nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
}
/* Invisible hover bridge: spans the gap between the nav item and the dropdown
   panel (which sits at top: calc(100% + 10px)) so moving the mouse down into
   the menu doesn't drop :hover and close it before you arrive. */
.nav-item.has-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 14px;
}
.nav-item > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
/* Chevron indicator for items that have a dropdown */
.nav-item.has-dropdown > a::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
  opacity: .65;
  flex-shrink: 0;
}
.nav-item.has-dropdown:hover > a::after,
.nav-item.has-dropdown.is-open > a::after {
  transform: rotate(-135deg) translateY(-2px);
}
.nav-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 190px;
  background: #e8e8e8;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,.13);
  padding: 8px;
  display: none;
  z-index: 200;
  white-space: nowrap;
}
/* Open via :hover (primary, no-JS safe) */
.nav-item.has-dropdown:hover .nav-dropdown,
.nav-item.has-dropdown.is-open .nav-dropdown {
  display: block;
}
.nav-dropdown a {
  display: block;
  padding: 10px 14px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 800;
  color: #272727;
  transition: background .15s ease, color .15s ease;
}
.nav-dropdown a:hover {
  background: var(--soft);
  color: var(--blue-dark);
}

/* ============================================================
   NEW 4-COLUMN SITE FOOTER (site-chrome-about thread)
   Class names intentionally distinct from legacy .footer/.footer-inner/.footer-logo
   which are retained below and used by main.css/henry_home.css/henry_product.css.
   ============================================================ */
footer.site-footer {
  background: var(--obsidian);
  color: rgba(255,255,255,.62);
  padding: 64px 24px 32px;
  font-size: 13px;
}
.footer-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-brand .footer-logo-img {
  display: block;
  width: 150px;
  height: auto;
  margin-bottom: 36px;
  /* real SilkCards wordmark is dark-filled; render white on the obsidian footer */
  filter: brightness(0) invert(1);
}
.footer-address {
  font-style: normal;
  line-height: 1.7;
  color: rgba(255,255,255,.7);
}
/* Separate the three blocks: street/city · phone · tagline+BBB */
.footer-address .footer-addr-group + .footer-addr-group {
  margin-top: 16px;
}
.footer-address .footer-addr-meta {
  color: rgba(255,255,255,.5);
}
.footer-col h5 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--white);
  margin-bottom: 18px;
  font-weight: 800;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-col li { margin-bottom: 10px; }
.footer-col a {
  color: rgba(255,255,255,.62);
  transition: color .2s ease;
}
.footer-col a:hover { color: var(--gold-light); }
.footer-bottom {
  max-width: var(--max);
  margin: 0 auto;
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: rgba(255,255,255,.42);
}
.footer-bottom em {
  color: var(--gold-light);
  font-style: italic;
}
@media (max-width: 1040px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; }
}

/* Sticky CTA — always visible, centered floating pill at bottom */
.mobile-sticky {
  display: flex;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 22px;
  z-index: 90;
  background: rgba(10,10,10,.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 9px;
  gap: 8px;
  box-shadow: 0 18px 50px rgba(0,0,0,.42);
}
.mobile-sticky a {
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  display: grid;
  place-items: center;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  white-space: nowrap;
}
.mobile-sticky a:hover { transform: translateY(-2px); }
.mobile-sticky .start {
  background: var(--blue);
  color: #050505;
  box-shadow: 0 10px 24px rgba(0,194,255,.30);
}
.mobile-sticky .start:hover { box-shadow: 0 14px 32px rgba(0,194,255,.40); }
.mobile-sticky .samples {
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
}
.mobile-sticky .samples:hover {
  background: var(--blue);
  color: #050505;
  border-color: transparent;
  box-shadow: 0 14px 32px rgba(0,194,255,.40);
}

/* ============================================================
   MEGA-MENU PANELS — added for nav-overhaul thread
   Panels are siblings of .nav-inner, full-width under the bar.
   Bound by data-mega-panel / data-mega-trigger via nav.js.
   ============================================================ */
.nav-mega-panel {
  /* Always in the DOM on desktop (mobile hides it via display:none !important below).
     Shown/hidden via opacity+visibility so it can FADE instead of popping. JS adds .is-open. */
  position: absolute;
  left: 0;
  right: 0;
  background: #e8e8e8;
  border-bottom: 1px solid rgba(0,0,0,.07);
  box-shadow: 0 24px 56px rgba(0,0,0,.12);
  z-index: 70;              /* below .site-nav (z-index:80) so it slides under */
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  /* GROW to the panel's REAL content height via grid rows (0fr → 1fr) — a genuine expand with no
     guessed max-height cap, so the animation uses its full duration no matter how tall the panel is.
     (The old max-height:600 reached the true ~300px height at the midpoint, then animated empty
     space — which read as an instant "appear".) */
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .42s ease, opacity .2s ease, visibility 0s linear .42s;
}
.nav-mega-panel.is-open {
  visibility: visible;
  opacity: 1;
  grid-template-rows: 1fr;
  transition: grid-template-rows .42s ease, opacity .2s ease, visibility 0s;
}
/* The animating grid row must be allowed to collapse to 0 and clip its content during the grow. */
.nav-mega-panel > .nav-mega-inner {
  min-height: 0;
  overflow: hidden;
  /* WIDTH — owner-picked option C, 2026-08-05 ("fill the screen"), chosen off the
     /nav-menu-sizing comparison. Two things are happening on this one line:

     1. width:100% is LOAD-BEARING, not cosmetic. .nav-mega-panel is display:grid (it
        animates open via grid-template-rows 0fr->1fr), and this element's own
        `margin:0 auto` CANCELS a grid item's default justify-self:stretch. So without
        an explicit width it shrink-wraps to its content — it measured 1019px and never
        reached even the 1240px max-width above, on ANY screen size. That is the whole
        reason the featured cards looked small. (GOTCHAS #195.)
     2. max-width then lets the panel grow WITH the monitor instead of stopping at the
        1240px site width: 94vw keeps a breathing margin either side, 1720px is the
        ceiling. Measured cards: 255px at 1280 wide, 328px at 1512, 428px at 2560
        (was a flat 194px everywhere).

     ⚠️ The featured card images are each product's admin "Main Picture". Business Cards'
     are 1140px wide and stay crisp throughout. Three products behind the Plastic Cards
     and Other Products panels have only 570x320 pictures, so their cards go soft above a
     ~285px card — the fix is re-uploading a larger Main Picture in admin, NOT capping
     this width (owner-decided 2026-08-05, trade-off stated and accepted).

     Desktop only by construction: this selector is the child of .nav-mega-panel, which
     is display:none below 1040px. The mobile copy (.nav-mega-mobile > .nav-mega-inner)
     is a different element and is untouched. */
  width: 100%;
  max-width: min(1720px, 94vw);
}
@media (prefers-reduced-motion: reduce) {
  .nav-mega-panel,
  .nav-mega-panel.is-open { transition: none; }
}
/* .site-nav already has position:sticky + z-index:80 defined above.
   Adding overflow:visible here (default) confirms mega panels can escape the bar. */

.nav-mega-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 26px 24px;
  display: flex;
  gap: 0;
  align-items: flex-start;
}
.nav-mega-col {
  flex: 1;
  min-width: 0;
}
.nav-mega-styles {
  /* widened from 280px so the heading ("Trending Business Card Styles") stays on ONE line, matching test/ */
  flex: 0 0 320px;
  max-width: 320px;
}
.nav-mega-featured {
  flex: 1;
}
.nav-mega-divider {
  flex: 0 0 1px;
  align-self: stretch;
  background: rgba(0,0,0,.08);
  margin: 0 20px;
}
.nav-mega-heading {
  /* Restyled toward the test.silkcards.com reference: larger, title-case, ink.
     Was: 11px / 900 / uppercase / .16em / --muted / 16px bottom. */
  font-size: 18px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 14px;
}
.nav-mega-style-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}
.nav-mega-style-list li {
  margin-bottom: 0;
}
.nav-mega-style-list a {
  display: block;
  padding: 5px 10px;          /* tighter vertical rhythm, closer to test/ */
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  color: #575a6f;             /* slate gray, matching test/ */
  transition: background .14s ease, color .14s ease;
}
.nav-mega-style-list a:hover {
  background: var(--soft);
  color: var(--blue-dark);   /* match the simple-dropdown hover so both menus behave identically */
}
.nav-mega-browse-all {
  display: inline-flex;
  align-items: center;
  padding: 11px 18px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  background: var(--blue);
  color: #fff;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 8px 20px rgba(0,194,255,.22);
  white-space: nowrap;
}
.nav-mega-browse-all:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,194,255,.32);
}
/* Secondary panel entry point (Business Cards -> Shop by Industry). Same pill,
   outlined instead of filled, so it reads as the second option rather than
   competing with Browse All for the primary action. */
.nav-mega-browse-all--secondary {
  margin-top: 8px;   /* it wraps below Browse All — keep both pills flush-left */
  background: transparent;
  color: var(--blue-dark);
  border: 1px solid rgba(0,0,0,.14);
  box-shadow: none;
}
.nav-mega-browse-all--secondary:hover {
  background: var(--soft);
  box-shadow: none;
}

/* Featured product card grid */
.nav-mega-cards {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.nav-mega-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* flex-fill the featured column so the 3 cards are as large as the space allows (was fixed 250px) */
  flex: 1;
  min-width: 0;
}
.nav-mega-card-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.07);
}
.nav-mega-card-name {
  font-size: 14px;
  font-weight: 700;
  color: #575a6f;   /* gray, matching the "selections" style-list links (headers stay black) */
  line-height: 1.35;
  text-align: center;
}
.nav-mega-card:hover .nav-mega-card-name {
  color: var(--blue);
}

/* Invisible hover-bridge for .has-mega items (GOTCHA #16):
   Covers the gap between the nav-item and the mega panel below
   so the panel doesn't close when moving the mouse down into it. */
.nav-item.has-mega::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -20px;
  right: -20px;
  height: 18px;    /* covers the sticky nav border + any sub-pixel gap */
}

/* .nav-mega-mobile is the inline mobile accordion copy of the panel content.
   It lives INSIDE .nav-links > .nav-item.has-mega so it can be revealed by
   the accordion toggle. On desktop it must stay hidden (the sibling .nav-mega-panel
   is the desktop flyout). On mobile (≤1040px) it is shown by the rules below. */
.nav-mega-mobile {
  display: none;
}

/* ============================================================
   MOBILE / TABLET NAV (≤1040px)
   Replaces the bare `.nav-links{display:none}` that left the
   nav unreachable on phones/tablets.
   ============================================================ */

/* Hamburger button — hidden on desktop */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  color: var(--ink);
  padding: 6px;
  line-height: 1;
  border-radius: 6px;
  transition: background .15s ease;
}
.nav-toggle:hover { background: var(--soft); }

@media (max-width: 1040px) {
  /* Show hamburger; hide desktop CTA (kept at ≤720px already) */
  .nav-toggle { display: block; }
  .nav-cta { display: none; }

  /* Desktop mega panels are hidden at mobile breakpoint */
  .nav-mega-panel { display: none !important; }

  /* .nav-links becomes a slide-down mobile drawer */
  .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;     /* directly below the sticky nav bar */
    left: 0;
    right: 0;
    background: #e8e8e8;
    border-top: 1px solid rgba(0,0,0,.07);
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
    padding: 12px 16px 20px;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: transform .25s ease, opacity .25s ease, visibility .25s ease;
    z-index: 75;
    white-space: normal;
    /* Drawer can be taller than the screen (mega panels expand) — let it scroll
       instead of running off the bottom. dvh accounts for the mobile URL bar. */
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .nav-links.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  /* Top-level plain links and .nav-item labels inside mobile nav.
     Flex + space-between puts the label on the left and the chevron hard right,
     so the arrow never crowds the text. */
  /* The drawer stacks: label row, then its expanded panel UNDER it.
     .nav-item is a row-flex on desktop (label + absolutely-positioned flyout, which
     is out of flow so the row never shows). On mobile the panels go position:static
     and re-enter the flow, so a row-flex .nav-item parks them BESIDE the label — the
     drawer rendered a narrow label column with the links floated to its right. All
     three panel types (both mega accordions + every simple dropdown) had it; this is
     the single place that fixes them. Column + stretch, so the label keeps its own
     space-between chevron layout below. */
  .nav-links .nav-item {
    flex-direction: column;
    align-items: stretch;
  }

  .nav-links > a,
  .nav-links .nav-item > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 8px;
    font-size: 15px;
    font-weight: 800;
    border-bottom: 1px solid rgba(0,0,0,.05);
    color: var(--ink);
  }
  .nav-links > a:last-of-type { border-bottom: none; }

  /* Accordion chevron for mobile mega/dropdown items — sits at the flex end. */
  .nav-links .nav-item.has-dropdown > a::after,
  .nav-links .nav-item.has-mega > a::after {
    margin-left: 12px;
    flex-shrink: 0;
    transform: rotate(45deg) translateY(-2px);
  }
  .nav-links .nav-item.has-dropdown.is-open > a::after,
  .nav-links .nav-item.has-mega.is-open > a::after {
    transform: rotate(-135deg) translateY(-2px);
  }

  /* Mobile: show simple dropdown inline when .is-open */
  .nav-links .nav-item.has-dropdown.is-open .nav-dropdown {
    display: block;
    position: static;
    transform: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 4px 0 4px 16px;
    margin-bottom: 4px;
  }

  /* Mobile: mega panel inline accordion.
     .nav-mega-mobile is rendered INSIDE each .has-mega .nav-item (inside .nav-links)
     so it slides into view when the parent gets .is-open. Hidden by default; the parent
     item's .is-open reveals it. */
  .nav-links .nav-mega-mobile {
    display: none;
    padding: 8px 0 12px 0;
  }
  .nav-links .nav-item.has-mega.is-open .nav-mega-mobile {
    display: block;
  }
  /* Override the desktop panel flex layout for mobile: stack columns vertically */
  .nav-links .nav-mega-mobile .nav-mega-inner {
    flex-direction: column;
    padding: 0;
    gap: 12px;
    max-width: 100%;
  }
  .nav-links .nav-mega-mobile .nav-mega-styles {
    flex: none;
    max-width: 100%;
  }
  .nav-links .nav-mega-mobile .nav-mega-featured {
    flex: none;
  }
  .nav-links .nav-mega-mobile .nav-mega-divider {
    flex: none;
    align-self: auto;
    height: 1px;
    margin: 0;
    width: 100%;
  }
  /* Featured cards: allow wrap + smaller width on narrow screens */
  .nav-links .nav-mega-mobile .nav-mega-cards {
    gap: 10px;
  }
  .nav-links .nav-mega-mobile .nav-mega-card {
    flex: none;        /* override desktop flex:1 so mobile cards stay fixed-width */
    width: 130px;
  }

  /* Nav icons row at bottom of mobile nav */
  .nav-links .nav-icons {
    margin-top: 12px;
    margin-left: 0;
    justify-content: flex-start;
    gap: 16px;
    padding: 10px 8px 0;
    border-top: 1px solid rgba(0,0,0,.06);
  }
}

@media (max-width: 720px) {
  body { padding-bottom: 84px; }  /* clearance for sticky CTA on mobile */
  .nav-inner { justify-content: space-between; }
  .section { padding: 78px 20px; }
  .btn-row .btn { width: 100%; }
}

/* item11: choose-path component — level all card CTAs at the bottom regardless of body length */
.choose-path .answer-card{display:flex;flex-direction:column}
.choose-path .answer-card .btn-row{margin-top:auto}

/* ── Cool-Gray re-sandbox chrome skin — OPT-IN via ?nav=cool (header-v2.php sets body.nav-skin-cool).
      Old chrome stays the default; this only restyles when the skin class is present (zero default blast radius).
      Mockup values: frosted cool-gray nav rgba(218,231,238,.95) + #BCD2DB border (topbar/footer already obsidian). ── */
body.nav-skin-cool .site-nav {
  background: rgba(218,231,238,.95);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid #BCD2DB;
}
body.nav-skin-cool .site-nav .nav-links,
body.nav-skin-cool .site-nav .nav-links a { color: #1E242C; }

/* Footer "Back to top" block: REMOVED from footer-v2 2026-07-20 (owner-directed —
   the footer is the last thing on every page). Its .sc-scroll-anchor rules lived
   here from 2026-06-27 until then. */

/* ── Legacy Bootstrap utility classes (v2 pages do NOT load bootstrap.min.css/main.css) ──
   header-v2's lean CSS bundle has no Bootstrap, so a legacy form snippet ported into v2
   chrome (e.g. sample-request.php's conditional "how did you hear about us" text field,
   the "Email registered!" badge) silently renders wrong: a "d-none" element shows up
   visible-by-default instead of hidden. Values copied verbatim from main.css so legacy
   and v2 pages match. Add more here only as a v2 page actually needs them (Rule 4f). */
.d-none{display:none !important}
.text-success{color:#28a745}
.text-danger{color:#dc3545}

/* ── Photo-decision "await note" contrast guard (single-homed; central-fixed 2026-07-18) ──
   An await-note is the plain-English "waiting on a photo of X" panel that stands in for an
   empty photo slot (never a placeholder image). It paints its own LIGHT panel (#EDF1F4), but
   the slots it fills usually sit inside a page's DARK section — and those sections set light
   body text with a descendant selector (`.suv-dark p`, `.dark-band p` = specificity 0-1-1)
   that out-ranks a bare `.await-note` (0-1-0) NO MATTER which sheet loads later. Result:
   near-white text on a near-white panel, measured at 1.14:1 (WCAG AA wants 4.5:1) — the note
   is effectively invisible exactly where it matters most.
   Doubling the class (0-2-0) wins on specificity, so this holds wherever the pattern is used.
   Covers both spellings currently in the wild — see the naming ORCH row. Owner-caught on
   FC-11/FC-13; the same defect had shipped silently on T0-04 hang-tags since Wave 1.
   Anything scoping its OWN await-note colour must beat 0-2-0 deliberately. */
.await-note.await-note,
.combo-await-note.combo-await-note{color:#5B6470}
.await-note.await-note strong,
.combo-await-note.combo-await-note strong{color:#14181D}

/* ===================================================================================
 * SOCIAL SIGN-IN BUTTONS — Google / Facebook
 * Markup is single-homed at inc/page/social-login.php; require it, never re-author.
 *
 * ⛔ LIVES HERE, NOT IN henry_app.css, and that is the whole point. The two pages that
 * offer social sign-in load DIFFERENT second sheets (login.php -> henry_app.css;
 * sample-request.php -> sample-kit-cool.css) and henry_common.css is the only sheet
 * header-v2.php gives both. When these rules sat in henry_app.css, sample-request.php
 * could not reach them and grew a private copy (.onetap-*), then login.php's 2026-08-27
 * rebuild could not reach THAT and fell back to the vendors' PNGs — which are complete
 * styled buttons, so the page rendered a button inside a button. Owner-caught.
 *
 * The mark is an inline SVG in a fixed 18px box, so the label sets the button's height
 * and the two buttons cannot disagree about it.
 * =================================================================================== */
.app-social { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.app-social-btn {
  display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:12px 18px; border-radius:12px;
  border:1.5px solid var(--line); background:var(--white);
  color:var(--ink); font-family:var(--font); font-size:14px; font-weight:700;
  text-decoration:none; cursor:pointer;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.app-social-btn:hover, .app-social-btn:focus-visible {
  border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,194,255,.18);
  transform:translateY(-2px); outline:none;
}
.app-social-mark { display:inline-flex; width:18px; height:18px; flex:0 0 18px; }
.app-social-mark svg { width:100%; height:100%; display:block; }

@media (max-width:560px) { .app-social { grid-template-columns:1fr; } }

/* ── .bright — the customer's OWN custom value, not one of our standard options ──────────────
   It is not a page class: inc/silkcards.php's parsevalue() emits <u class="bright">…</u>
   whenever a quantity, size or paper stock was typed in rather than picked, so ANY v2 page
   that renders a basket line inherits it. It lives here, in the sheet header-v2.php gives
   every page, rather than in henry_app.css — the same reasoning that moved .app-social* here
   on 2026-08-27, and for the same measured reason: the moment a second consumer appears on a
   page loading a different second sheet, a page-scoped copy is what gets re-invented.
   ⚠️ main.css declares `.bright{color:#F00}` and ONLY the legacy chrome loads main.css, so
   until now a v2 page rendered these as plain underlined text with no marker at all. Pure red
   is not carried over deliberately: a value the customer chose to type is not an error, and
   nothing else in this design system says "look here" in #F00. Amber is this system's own
   attention tone (henry_app.css --warn), restated literally because henry_common.css is
   loaded without it. First v2 consumer: www/quotationhistory.php (2026-08-28). */
u.bright, .bright { color:#9A6B12; font-weight:700; text-decoration-color:#9A6B12; }

/* =====================================================================
   THE SITE'S POP-UP ALERT (umbox / umconfirm → Alertify), branded — moved here from
   henry_configure.css on 2026-09-02 (round-13 restyle, owner-directed) because
   header-v2.php now loads the library on EVERY v2 page; this sheet is the one they all
   load, so one treatment covers the configurator's Add-to-Cart gates, the cart's
   remove-line confirm, the account pages' notices — all of them.
   SPACING (owner-caught 2026-09-02: "the button and the logo are too close to the edge"):
   the theme (js/alertify/css/um.min.css) pads the dialog 24px and pulls the header and
   footer back out by -24px; the restyle had cut the dialog padding to 6px and left those
   -24px margins, so the header and footer overhung the box by 18px each side and the logo
   and OK sat on the edge. The header/footer margins now match the dialog padding, and the
   content, header and footer each carry their own 24px inset.
   ===================================================================== */
body .alertify .ajs-dimmer { background: #0A0E12; opacity: .58; }
body .alertify .ajs-dialog {
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(10,14,18,.38);
  font-family: Manrope, Helvetica, Arial, sans-serif;
  max-width: 480px;
  padding: 8px 8px 8px;
}
body .alertify .ajs-header {
  margin: -8px -8px 0;
  padding: 20px 56px 12px 24px;        /* right inset clears the × button */
  font-family: Manrope, Helvetica, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: .02em;
  color: #11151A;
  background: transparent;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
}
body .alertify .ajs-header img { vertical-align: -3px; margin-right: 10px; }
body .alertify .ajs-commands { right: 20px; top: 16px; }
body .alertify .ajs-body { margin: 0; }
body .alertify .ajs-body .ajs-content { padding: 8px 24px 20px 24px; color: #3A434D; font-size: 14.5px; line-height: 1.6; }
body .alertify .ajs-content .ajs-text.ajs-umbox { font-family: Manrope, Helvetica, Arial, sans-serif; }
body .alertify .ajs-footer {
  margin: 0 -8px -8px;
  padding: 12px 24px 20px;
  background: transparent;
  border-top: 1px solid #EDF1F4;
  border-radius: 0 0 18px 18px;
}
body .alertify .ajs-footer .ajs-buttons.ajs-primary .ajs-button { margin: 0 0 0 8px; }
.alertify .ajs-footer .ajs-buttons .ajs-button {
  border-radius: 999px;
  font-family: Manrope, Helvetica, Arial, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  min-height: 40px;
  padding: 9px 24px;
  cursor: pointer;
  border: 1px solid #D7DEE5;
  background: #fff;
  color: #11151A;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.alertify .ajs-footer .ajs-buttons .ajs-button.ajs-ok,
.alertify .ajs-footer .ajs-buttons.ajs-primary .ajs-button:last-child {
  background: #00C2FF;
  border-color: #00C2FF;
  color: #fff;
}
.alertify .ajs-footer .ajs-buttons .ajs-button.ajs-ok:hover,
.alertify .ajs-footer .ajs-buttons.ajs-primary .ajs-button:last-child:hover { background: #008EBB; border-color: #008EBB; }
.alertify .ajs-footer .ajs-buttons .ajs-button.ajs-cancel:hover { border-color: #11151A; }
.alertify .ajs-commands button.ajs-close { border-radius: 50%; }