/*
 * sample-kit-cool.css — Free Sample Kit page, Cool-Gray wave (SVC-01, mockup DRAFT v0.2).
 * Extracted VERBATIM from SVC-01_sample-kit.html style, with shell CHROME stripped
 * (site-nav, nav-inner, nav-links, brand, brand-mark, nav-cta, footer.site-footer + footer-*,
 *  the html scroll-behavior rule) — header-v2/footer-v2/henry_common own those (GOTCHAS 76).
 * NOTE: never put a slash-asterisk glob in this header — it closes the CSS comment + drops :root (GOTCHAS 93).
 * KEPT: .page-menu (page-level floating menu; shell does NOT own it), ALL section CSS, and the
 * .request-form styles that skin the sample form (the form left the hero on 2026-08-11).
 *
 * MOVED OUT 2026-08-11 — this sheet is now PAGE-UNIQUE ONLY.
 * The 83 rules it shared byte-for-byte with design-help-cool.css (:root cool tokens, the global
 * element rules, the .btn variants, .section/.eyebrow/.lead/.center, .kit-*, .understand-*,
 * .review-card, .geo-*, .final-cta, .worth-knowing/.wk-*) now live in www/css/svc-cohort.css.
 * Some comments below still introduce those rules; the rules themselves are in the cohort sheet.
 *
 * LOAD ORDER (www/sample-request.php) — updated 2026-08-11 to match design-help.php exactly:
 *   henry_common -> henry_fc -> svc-cohort -> THIS SHEET -> henry_coolgray -> henry_sample-request_photos
 * henry_fc.css moved to the FRONT ($page_css) because the page's hero is now the shared fw-hero
 * component, whose CSS lives there; it must load BEFORE this sheet or it would restyle every band.
 * (svc-cohort.css's own header still records the pre-2026-08-11 order — it is a shared file, so
 *  correcting it is central's, not this page's. Flagged in SVC-01-REPORT.md.)
 * So this sheet overrides the cohort, and henry_coolgray's house standards still override both.
 * Put page-unique CSS here; anything that should hold on BOTH SVC pages goes in the cohort sheet.
 * Cool chrome gated ?nav=cool (header-v2).
 */

  
  
  
  
  
  
  
  
  
  
  
  

  
  
  
  
  
  
  
  

  /* SECTION SCAFFOLDING */
  
  
  
  
  
  
  
  

  /* NOTE: .page-menu / .reviews / FAQ chrome now come from the shared www/css/henry_coolgray.css
     (loaded after this sheet) — see the reviews.php + faq.php components. Not re-declared here. */

  /* ============= S01b REQUEST BAND — the merge's own section =============
     ⛔ THE OLD .hero / .hero-grid / .hero-form-card BLOCK WAS DELETED HERE ON 2026-08-11 AND MUST
     NOT COME BACK. The hero is now the shared fw-hero component (inc/page/fw-hero.php), which
     renders <header class="hero fw-hero fw-hero-tall"> and is styled by henry_fc.css. A bare
     `.hero{}` rule in THIS sheet matches that same element, so every property fw-hero does not
     itself declare would leak onto it — the old dark gradient and its ::after dot grid did exactly
     that. The form moved out of the hero into the #request band below.

     WHY A BAND AND NOT THE HERO: the lock's hero is a single full-bleed photograph with a CTA and
     carries no form at all. Keeping that hero intact and giving the form the first section under
     it preserves the lock's design while keeping the form one scroll (or one CTA click) away. */
  .request-band { background:var(--soft); border-bottom:1px solid var(--line); }
  .request-band .section { padding-top:76px; padding-bottom:76px; }
  .request-card { max-width:720px; margin:0 auto; background:var(--white); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius-lg); padding:38px clamp(20px,3.4vw,42px); box-shadow:var(--shadow-soft); }
  .rc-head { text-align:center; margin-bottom:26px; }
  .rc-head h2 { font-size:clamp(26px,2.6vw,34px); margin-bottom:10px; }
  .rc-sub { color:var(--body); font-size:14px; line-height:1.6; max-width:44ch; margin:0 auto; }

  /* ---- FLOW B: one tap. Google + Facebook only — Apple needs a Composer package we do not have. ---- */
  .onetap { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .onetap-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 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; }
  .onetap-btn:hover, .onetap-btn:focus-visible { border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,194,255,.18); transform:translateY(-2px); outline:none; }
  .onetap-mark { display:inline-flex; width:18px; height:18px; flex:0 0 18px; }
  .onetap-mark svg { width:100%; height:100%; display:block; }
  .onetap-note { margin-top:12px; text-align:center; color:var(--muted); font-size:12px; line-height:1.5; }
  .or-divider { display:flex; align-items:center; gap:14px; margin:24px 0 22px; color:var(--muted); font-size:11px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
  .or-divider::before, .or-divider::after { content:""; flex:1 1 auto; height:1px; background:var(--line); }
  .signedin-note { margin-bottom:22px; padding:14px 16px; border-radius:12px; background:var(--blue-soft); color:var(--ink); font-size:13.5px; line-height:1.55; }
  .signedin-note .si-check { color:var(--blue-dark); font-weight:900; margin-right:6px; }
  /* Below ~560px the two buttons are ~140px each and "Continue with Facebook" wraps to two lines
     (measured at 375: 141x67 boxes, not clipped but cramped). One per row instead. */
  @media (max-width:560px){ .onetap { grid-template-columns:1fr; } }

  /* ---- MOVE 1: the address detail fields, present but read back as one confirmed line ----
     ⛔ CLIPPED, NEVER display:none, AND THAT IS LOAD-BEARING. initAddrAutoComplete() is handed the
     SELECTOR STRING "#sampleform .select_state:visible" and resolves it inside its own callback
     (www/js/addr-autocomplete.src.js), so the matching state control must still have layout boxes
     at that moment. Under a display:none ancestor jQuery :visible is false, the selector matches
     nothing, and the state is silently never set — which reaches the printed shipping label. The
     clip technique leaves offsetWidth at 1px, so :visible stays true. */
  .addr-detail { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  .addr-detail.is-open { position:static; width:auto; height:auto; margin:0; overflow:visible; clip:auto; white-space:normal; }
  .addr-confirm { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; margin:0 0 12px; padding:12px 14px; border-radius:12px; background:var(--soft); border:1px solid var(--line); font-size:13.5px; }
  /* ⛔ LOAD-BEARING, and the reason is not obvious. The markup ships this element as
     <p class="addr-confirm" hidden> and the JS toggles .prop("hidden", …). But the UA rule is
     [hidden]{display:none} at specificity (0,1,0) — the SAME as .addr-confirm — so the author
     rule above wins on document order and the `hidden` attribute does NOTHING on its own.
     Without the rule below, an empty "DELIVERING TO" bar renders to every visitor who has no
     detected address (owner-caught 2026-08-11). Any element styled with an explicit `display`
     needs this companion rule if it is toggled via `hidden`. */
  .addr-confirm[hidden] { display:none; }

  /* ---- FLOW A: the controls the approved card does not carry (owner-directed 2026-08-11) ----
     Both are HIDDEN, never deleted, and each for its own reason.

     `notice` is the bot tripwire as well as a notes box -- request-samples-thanks.php returns a
     hard HTTP 400 when the field is ABSENT from the POST, so removing the markup would break
     every submission. Hidden, it still posts an empty string. It is optional, so an off-screen
     empty value can never block validation.

     Shipping is hidden only for the USA (.svc01-ship-hidden is applied by svc01ShipVisibility()),
     because the five options are USA/Canada-specific and the default is "Free Shipping (USA)" --
     hiding it from a Canadian visitor would silently ship them a US-only method. The USA case is
     safe to hide because that default is valid AND free, so this `required` select can never be
     invalid and can never dead-end a submit the way an empty city/ZIP could.
     ⚠️ #totalprice_section is deliberately OUTSIDE this rule -- it lives in the same wrapper and
     still needs to surface a pricing error.

     ⛔ BOTH NEED `!important`, AND IT IS NOT LAZINESS -- IT IS THE ONLY THING THAT WINS HERE.
     The legacy pricing engine (www/js/product.js) calls jQuery `.show()` on these wrappers, which
     writes an INLINE `display:block`, and an inline declaration beats any normal stylesheet rule
     however specific. Measured: the rule below resolved to `none` in the sheet while the element
     computed `block`, and stripping the inline style by hand made it obey immediately. A
     stylesheet `!important` outranks a non-important inline declaration, so it wins -- and keeps
     winning every time the engine re-runs (it fires again on each sample-pack change). */
  /* ---- WHY EVERY IN-PAGE JUMP FELT LIKE A JUMP (owner-caught 2026-08-11) -------------------
     "make the scroll of Get My Free Sample Kit cta smoother instead of a jump."
     ⛔ IT WAS NOT THE ANIMATION. `html` already carries scroll-behavior:smooth, and the CTA
     handler already called scrollIntoView({behavior:'smooth'}). The problem was WHERE it landed:
     this page has 137px of sticky chrome — NAV.site-nav (sticky, 84px) plus DIV.page-menu (fixed
     at top:84px, 53px) — and EVERY linked section had scroll-margin-top:0. Measured: 8 of 8 ids
     that something links to. So each jump parked the section's top edge at the viewport top,
     UNDERNEATH the navigation, hiding its first 137px. That reads as "landed wrong", and no
     amount of easing fixes it.
     152px = the 137px of chrome plus 15px of breathing room so the heading is not flush against
     the menu. Applied to the ids, so the page menu's own jumps get it too — one rule, every
     target, and a new section inherits it by being listed here. */
  #request, #kit, #why, #understand, #reviews, #comparison, #what-is, #faq, #final-cta, #worth-knowing {
    scroll-margin-top: 152px;
  }

  .svc01-hidden-field { display:none !important; }

  /* ---- FIELD WIDTHS (owner-caught 2026-08-11: "Mailing address field is too short,
     Apt / Suite / Unit is too long") ----------------------------------------------------------
     ⛔ THE ADDRESS FIELD WAS NEVER STYLED SHORT -- twitter-typeahead WRAPS the input at runtime
     in <span class="twitter-typeahead">, and that span is display:inline-block, so it shrink-wraps
     to content while every other field is a block at the form's full width. Measured: address
     187px against 634px for name/email/suite/pack. So this is not a width to tune, it is a wrapper
     to un-shrink -- which is why no width rule on #address alone would ever have fixed it.
     Both children need the width: .tt-input is the real field and .tt-hint is the ghost overlay
     that draws the inline completion, and they must stay exactly congruent or the hint text sits
     offset from what the visitor is typing. */
  .request-form .twitter-typeahead { display:block !important; width:100%; }
  .request-form .twitter-typeahead .tt-input,
  .request-form .twitter-typeahead .tt-hint { width:100% !important; }

  /* A unit number is "4B", not a sentence. Full width made it read as the more important of the
     two address lines when it is the optional one. Its label and hint stay full width. */
  .request-form #suite { max-width:260px; }
  .option_select_wrap.svc01-ship-hidden > div[id^="option_content_"],
  .option_select_wrap.svc01-ship-hidden > div[id^="option_title_"] { display:none !important; }

  /* ---- BUTTON-FIRST reveal (owner-directed 2026-08-11) -------------------------------------
     The page shows a button; the form opens in place. Both halves use a CLASS, never the
     `hidden` attribute, because these elements carry an explicit `display` and [hidden] loses
     to it on document order — the exact bug fixed directly above. .request-open is the one
     element that legitimately uses [hidden]: it is the JS-off fallback, and it has NO display
     rule of its own, so the UA's [hidden]{display:none} is unopposed and works. */
  .request-open { text-align:center; padding:8px 0 4px; }
  .request-open .btn-request-open { min-width:min(320px, 100%); font-size:15px; padding:16px 34px; }
  .request-open .ro-note { margin:12px 0 0; color:var(--muted); font-size:12.5px; }
  .request-reveal { display:none; }
  .request-reveal.is-open { display:block; }

  /* The kit-spread photo is 3:2 (2400x1600). The cohort's .kp-img box is 16/7 (2.286) with
     object-fit:cover, so ~34% of the photo's height was cropped — and the card fan sits LOW in
     the frame, so what got cut was the business cards themselves (owner-caught 2026-08-11).
     That 16/7 came from the lock's "Photo pending" PLACEHOLDER, not from this photograph, so
     matching the box to the real image is the faithful move rather than a deviation.
     Page-scoped on purpose: .kit-photo is a cohort rule, but design-help has zero .kit-photo
     markup, so this belongs here and the shared default stays untouched. */
  .kit-photo .kp-img { aspect-ratio:3/2; }
  .kit-photo .kp-img img { object-fit:contain; }
  .addr-confirm .ac-label { color:var(--muted); font-size:10px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
  .addr-confirm .ac-value { color:var(--ink); font-weight:700; }
  .addr-confirm .ac-edit { margin-left:auto; padding:0; border:0; background:none; color:var(--blue-dark); font-family:var(--font); font-size:12px; font-weight:800; cursor:pointer; text-decoration:underline; }
  .addr-confirm .ac-edit:hover { color:var(--ink); }
  .request-form .opt { color:#ACB1B7; font-weight:700; letter-spacing:0; text-transform:none; }
  .request-form .field-hint { margin-top:6px; color:var(--muted); font-size:11.5px; line-height:1.5; }
  .request-form .pw-oauth-hint { margin-top:8px; color:var(--muted); font-size:11.5px; line-height:1.5; }
  .request-form .form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .request-form .form-field { margin-bottom:12px; }
  .request-form .form-field.full { grid-column:1 / -1; }
  .request-form label { display:block; font-size:10px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
  .request-form input, .request-form textarea, .request-form select { width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--soft); color:var(--ink); font-family:var(--font); font-size:14px; transition:border-color .2s ease, background .2s ease; }
  .request-form input::placeholder, .request-form textarea::placeholder { color:#9CA1A7; }
  .request-form input:focus, .request-form textarea:focus, .request-form select:focus { outline:none; border-color:var(--blue); background:var(--white); }
  .request-form textarea { min-height:66px; resize:vertical; }
  .request-form .form-submit { width:100%; margin-top:6px; }
  .hfc-fine { margin-top:14px; color:var(--muted); font-size:11px; line-height:1.55; text-align:center; }
  /* honeypot — bot trap field, kept from the functional form, visually removed */
  .request-form .fog { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
  /* price readout carried from the functional form */
  .request-form #totalprice_section { margin-top:4px; font-size:18px; font-weight:900; color:var(--blue-dark); text-align:right; }
  .request-form .option_select_wrap { margin-top:4px; }

  /* ============= GENERIC DARK BAND ============= */
  
  
  
  
  
  
  
  
  
  
  

  /* ============= WHAT'S IN THE KIT ============= */
  
  
  
  
  
  
  
  
  
  
  
  /* 38-foil swatch highlight */
  .swatch-panel { margin-top:22px; padding:38px; border-radius:var(--radius-xl); background:linear-gradient(135deg,var(--obsidian),#1E242C); color:var(--white); display:grid; grid-template-columns:minmax(250px,.72fr) minmax(0,1.65fr); gap:40px; align-items:center; box-shadow:var(--shadow-deep); }
  .swatch-copy .eyebrow { color:var(--gold-light); }
  .swatch-copy h3 { color:var(--white); font-size:clamp(24px,2.4vw,32px); margin-bottom:14px; }
  .swatch-copy p { color:rgba(255,255,255,.72); font-size:15px; line-height:1.7; }
  /* The lock replaces the previous macro photo + 38 synthetic .swatch-chip gradients with Henry's
     own foil-range CHART, which names every foil and whose group counts sum to 38 — the number the
     copy beside it claims. .swatch-grid / .swatch-chip / .swatch-note are therefore GONE from this
     page's markup, and their rules were removed here with them (2026-08-11). The dead overlay rules
     in henry_sample-request_photos.css went at the same time. */
  .swatch-visual { margin:0; min-width:0; border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 18px 46px rgba(0,0,0,.3); }
  .swatch-visual img { display:block; width:100%; height:auto; aspect-ratio:1448/1086; object-fit:contain; }
  @media (max-width:880px){ .swatch-panel{ grid-template-columns:1fr; gap:28px; padding:28px; } }
  @media (max-width:520px){ .swatch-panel{ padding:20px; } .swatch-visual{ border-radius:10px; } }

  /* ============= WHAT YOU'LL UNDERSTAND ============= */
  
  
  
  
  
  

  /* CUSTOMER VOICE — video component is the shared reviews.php (.reviews--D in henry_coolgray.css).
     Below it, the curated static review wall + trust-context strip (owner-restored 2026-07-02). */
  .reviews-wall { padding-top:0; }
  .review-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
  
  
  
  
  
  
  @media (max-width:1040px){ .review-grid { grid-template-columns:1fr 1fr; } }
  @media (max-width:640px){ .review-grid { grid-template-columns:1fr; } }

  /* ============= INDEPENDENT COMPARISON (YouTube facade) ============= */
  .comparison { background:var(--obsidian); color:var(--white); }
  .comparison h2 { color:var(--white); }
  .comparison .lead { color:rgba(255,255,255,.74); }
  .yt-frame { margin-top:42px; position:relative; max-width:960px; margin-left:auto; margin-right:auto; aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden; border:1px solid rgba(255,255,255,.14); box-shadow:var(--shadow-deep); background:linear-gradient(135deg,#14181D,#262D36); cursor:pointer; }
  .yt-frame iframe { width:100%; height:100%; border:0; display:block; }
  .yt-facade { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; text-align:center; padding:24px; }
  .yt-facade .yt-play { width:84px; height:84px; border-radius:50%; background:rgba(255,255,255,.95); display:flex; align-items:center; justify-content:center; box-shadow:0 18px 44px rgba(0,0,0,.5); transition:transform .2s ease; }
  .yt-frame:hover .yt-play { transform:scale(1.06); }
  .yt-facade .yt-play::before { content:""; border-left:26px solid #CC0000; border-top:16px solid transparent; border-bottom:16px solid transparent; margin-left:6px; }
  .yt-facade .yt-cap { color:rgba(255,255,255,.82); font-size:14px; font-weight:800; letter-spacing:.02em; max-width:520px; }
  .yt-meta { margin-top:22px; text-align:center; color:rgba(255,255,255,.55); font-size:12px; font-weight:700; letter-spacing:.04em; }
  .yt-disclaimer { margin-top:8px; font-style:italic; }

  /* ============= GEO ANSWER BLOCK ============= */
  
  
  
  
  

  /* FAQ — the shared faq.php component (flat FAQ standard in henry_coolgray.css).
     The 36px head↔grid gap that used to live here moved INTO that shared standard
     (`#faq .center + .faq-grid`) on 2026-08-17, single-homed, so every default-variant
     consumer inherits it instead of re-declaring it. Nothing FAQ-specific remains here. */

  /* ============= FINAL CTA ============= */
  
  
  
  

  /* ============= WORTH KNOWING ============= */
  
  
  
  
  
  
  
  
  
  
  
  

  /* The .hero-grid / .hero-form-card entries that used to sit in these two blocks went with the
     hero rewrite above — the form is no longer inside the hero, and fw-hero brings its own
     responsive rules from henry_fc.css. Removed rather than left dead. */
  @media (max-width: 1040px) {
    .kit-grid { grid-template-columns:1fr 1fr 1fr; }
    .subtract-row { grid-template-columns:1fr 1fr; }
    .understand-grid { grid-template-columns:1fr; }
  }
  @media (max-width: 640px) {
    .section { padding:72px 20px; }
    .request-card { padding:26px 20px; }
    .request-form .form-row { grid-template-columns:1fr; }
    .kit-grid { grid-template-columns:1fr; }
    .subtract-row { grid-template-columns:1fr; }
  }

  /* Neutralize henry_common's generic .section max-width cap so full-bleed bands stay full-bleed. */
  .kit .section, .why-band .section, .understand .section,
  .comparison .section, .geo-answer .section, .final-cta .section,
  .worth-knowing .section { max-width:var(--max); }