/*
 * design-help-cool.css — Design Help (SVC-02), FULL-WIDTH re-port.
 * Source: docs/henry_updates/to-build/SVC-ED-2026-08/
 *         silkcards_design_help_page_LOCKED-v1.0-fullwidth.html  (locked 2026-07-25)
 * Supersedes the v1.1 cool-gray port that this file previously carried.
 *
 * PORTED VERBATIM from the mockup's style blocks, with four things deliberately NOT ported:
 *   1. SITE CHROME  — nav / nav-inner / nav-links / brand / footer.site-footer / footer-*
 *                     and the html scroll-behavior rule. header-v2 + footer-v2 + henry_common
 *                     own those (GOTCHAS 76).
 *   2. THE HERO     — every .fw-hero / .fwh-* rule. The hero is the SHARED component
 *                     inc/page/fw-hero.php, whose CSS home is www/css/henry_fc.css (loaded
 *                     after this sheet). Restating it here is exactly the per-page divergence
 *                     the wave exists to stop. Where the mockup's hero differs from the
 *                     component, that is a REPORT item for central, not an override here.
 *   3. THE FAQ      — .faq-list / .faq-item. The FAQ is the shared component inc/page/faq.php,
 *                     styled by the FLAT FAQ standard in www/css/henry_coolgray.css.
 *   4. .hero-ph     — the mockup's decorative hero placeholder. No decorative stand-ins: the
 *                     missing hero photograph is stated in plain English on the page instead.
 *
 * NOTE: never put a slash-asterisk glob inside this header — it closes the CSS comment and
 * drops :root with it (GOTCHAS 93).
 *
 * MOVED OUT 2026-08-11 — this sheet is now PAGE-UNIQUE ONLY.
 * The 83 rules it shared byte-for-byte with www/css/sample-kit-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, so a fix lands on both SVC pages at once. Some comments below still
 * introduce those rules; the rules themselves are in the cohort sheet.
 * Deliberately NOT moved: .review-grid and the four media blocks — same selector in both sheets
 * with DIFFERENT bodies, i.e. real per-page divergence.
 *
 * LOAD ORDER (www/design-help.php):
 *   henry_common.css -> henry_fc.css -> svc-cohort.css -> THIS SHEET -> henry_coolgray.css
 * The cohort sheet is the CHASSIS and loads BEFORE this one, so this sheet overrides it.
 * henry_coolgray.css loads AFTER, so its house standards win on the properties it claims
 * (h1,h2,h3 weight 600; .eyebrow 800; .btn 700; the whole FAQ skin). Any bare element rule
 * added below must therefore ASSERT its own font-weight or it does not own it.
 */

  
  
  
  
  
  
  
  
  
  
  
  

  /* GENERIC BUTTONS */
  
  
  
  
  
  
  
  

  /* SECTION SCAFFOLDING */
  
  
  
  
  
  
  
  

  /* SIGNATURE HAMBURGER MENU (REQUIRED on every public page — doctrine).
     Markup is the shared partial inc/page/page-menu.php; its CSS is per-page by that
     partial's own contract ("CSS: stays per-page"), so these rules stay here. */
  .page-menu { position:fixed; top:84px; right:24px; z-index:70; opacity:0; pointer-events:none; transition:opacity .24s ease, transform .24s ease; transform:translateY(-6px); }
  .page-menu.is-visible { opacity:1; pointer-events:auto; transform:translateY(0); }
  .page-menu-toggle { width:48px; height:48px; border-radius:14px; border:1px solid rgba(0,0,0,.08); background:var(--blue); color:var(--obsidian); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 14px 32px rgba(0,194,255,.32); transition:transform .22s ease, box-shadow .22s ease; padding:0; }
  .page-menu-toggle:hover { transform:translateY(-2px); box-shadow:0 18px 38px rgba(0,194,255,.4); }
  .page-menu-toggle span, .page-menu-toggle span::before, .page-menu-toggle span::after { content:""; display:block; width:20px; height:2px; border-radius:99px; background:currentColor; position:relative; }
  .page-menu-toggle span::before { position:absolute; top:-7px; left:0; }
  .page-menu-toggle span::after { position:absolute; top:7px; left:0; }
  .page-menu-panel { display:none; position:absolute; top:calc(100% + 12px); right:0; width:min(300px, calc(100vw - 48px)); background:rgba(20,24,29,.97); border:1px solid rgba(255,255,255,.12); border-radius:18px; box-shadow:0 28px 70px rgba(0,0,0,.42); padding:12px; }
  .page-menu.is-open .page-menu-panel { display:block; }
  .page-menu-panel a { display:block; color:rgba(255,255,255,.82); font-size:13px; font-weight:800; padding:12px 14px; border-radius:10px; letter-spacing:.01em; transition:background .18s ease, color .18s ease; }
  .page-menu-panel a:hover { background:rgba(255,255,255,.08); color:var(--blue); }
  @media (max-width: 640px) {
    .page-menu { top:auto; bottom:22px; right:18px; }
    .page-menu-panel { top:auto; bottom:calc(100% + 12px); }
  }

  /* ============= GENERIC DARK BAND (#posture) ============= */
  
  
  
  
  
  
  
  
  
  
  

  /* ============= SOFT BAND + CARD GRID (#start, #cost, #how, #before-after) ============= */
  
  
  
  
  
  
  
  
  
  
  

  /* ============= WHITE BAND + CARD GRID (#time, #ease, #pairing, #send) ============= */
  
  
  
  
  
  

  /* ============= CUSTOMER VOICE (#reviews) ============= */
  .reviews { background:var(--cream); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .review-grid { margin-top:18px; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
  
  
  
  
  
  

  /* ============= GEO / PANEL BAND (#door) ============= */
  
  
  
  
  

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

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

  /* ============================================================
     DESIGN HELP — section components (mockup block "design-help-components")
     ============================================================ */

  /* —— S02 TIME: contrast ledger —— */
  .ledger{margin-top:52px;display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
  .ledger-col{border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--white);padding:32px 30px 34px}
  .ledger-col.is-alone{background:var(--soft)}
  .ledger-col.is-helped{background:linear-gradient(160deg,#14181D,#232A33);border-color:rgba(255,255,255,.12);color:var(--white);box-shadow:var(--shadow-deep)}
  .ledger-head{display:flex;align-items:baseline;gap:12px;margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--line)}
  .ledger-col.is-helped .ledger-head{border-bottom-color:rgba(255,255,255,.16)}
  .ledger-head h3{font-size:21px;letter-spacing:-.03em;color:var(--ink)}
  .ledger-col.is-helped .ledger-head h3{color:var(--white)}
  .ledger-tag{font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .ledger-col.is-helped .ledger-tag{color:var(--gold-light)}
  .ledger-list{list-style:none;padding:0;margin:0;display:grid;gap:13px}
  .ledger-list li{position:relative;padding-left:28px;font-size:14.5px;line-height:1.6;color:var(--body)}
  .ledger-col.is-helped .ledger-list li{color:rgba(255,255,255,.80)}
  .ledger-list li::before{position:absolute;left:0;top:-1px;font-size:15px;font-weight:900}
  .ledger-col.is-alone .ledger-list li::before{content:"\00b7\00b7";letter-spacing:-1px;color:#B9C0C7}
  .ledger-col.is-helped .ledger-list li::before{content:"\2713";color:var(--blue)}
  .ledger-foot{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--muted)}
  .ledger-col.is-helped .ledger-foot{border-top-color:rgba(255,255,255,.16);color:var(--gold-light)}
  .time-close{margin:44px auto 0;max-width:720px;text-align:center;font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.9vw,24px);line-height:1.5;color:var(--ink)}

  /* —— S03 COST: value stack —— */
  .cost-wrap{margin-top:50px;display:grid;grid-template-columns:.92fr 1.08fr;gap:44px;align-items:center}
  .cost-figure{border-radius:var(--radius-xl);background:linear-gradient(150deg,#14181D,#242B34);color:var(--white);padding:42px 38px;box-shadow:var(--shadow-deep);border:1px solid rgba(255,255,255,.10)}
  .cost-figure .cf-amount{font-size:clamp(58px,6.4vw,92px);font-weight:900;letter-spacing:-.06em;line-height:1;color:var(--white)}
  .cost-figure .cf-amount span{color:var(--gold-light)}
  .cost-figure .cf-label{margin-top:10px;font-size:12px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55)}
  .cost-figure .cf-line{margin-top:22px;font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.5;color:var(--gold-light)}
  .cost-list{list-style:none;padding:0;margin:0;display:grid;gap:0}
  .cost-list li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;padding:17px 0;border-bottom:1px solid var(--line)}
  .cost-list li:last-child{border-bottom:0}
  .cost-list .ci-mark{width:22px;height:22px;border-radius:50%;background:var(--blue-soft);color:var(--blue-dark);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;margin-top:1px}
  .cost-list h4{font-size:15.5px;letter-spacing:-.02em;color:var(--ink);margin-bottom:4px}
  .cost-list p{font-size:13.5px;line-height:1.6}

  /* —— S04 FIT: the tailor —— */
  .fit-band{background:var(--obsidian);color:var(--white);position:relative;overflow:hidden}
  .fit-band::before{content:"";position:absolute;right:-8%;top:-24%;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(201,169,110,.16),transparent 65%);pointer-events:none}
  .fit-band h2{color:var(--white)}
  .fit-band .eyebrow{color:var(--gold-light)}
  .fit-lead{max-width:760px;margin:26px auto 0;text-align:center;color:rgba(255,255,255,.78);font-size:clamp(16px,1.5vw,18.5px);line-height:1.75}
  .fit-lead + .fit-lead{margin-top:18px}
  .tailor-line{max-width:820px;margin:0 auto;text-align:center;font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.5vw,32px);line-height:1.4;letter-spacing:-.02em;color:var(--gold-light)}
  .fit-grid{margin-top:52px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  .fit-card{padding:28px 24px 30px;border-radius:var(--radius-lg);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;transition:transform .25s ease,border-color .25s ease}
  .fit-card:hover{transform:translateY(-3px);border-color:rgba(201,169,110,.45)}
  .fit-card .fc-want{font-family:var(--serif);font-style:italic;font-size:16.5px;line-height:1.45;color:var(--white);margin-bottom:16px}
  .fit-card .fc-arrow{width:26px;height:2px;background:var(--gold);margin-bottom:16px}
  .fit-card .fc-answer{color:var(--gold-light);font-size:13px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}
  .fit-card p{color:rgba(255,255,255,.66);font-size:13.5px;line-height:1.62}
  .fit-close{margin:50px auto 0;max-width:740px;text-align:center;color:rgba(255,255,255,.82);font-size:16px;line-height:1.75}
  .fit-close strong{color:var(--white)}

  /* —— S05 EASE: worry -> answer —— */
  .ease-grid{margin-top:50px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .ease-card{padding:28px 30px 30px;border-radius:var(--radius-lg);background:var(--white);border:1px solid var(--line);box-shadow:0 12px 34px rgba(0,0,0,.04)}
  .ease-worry{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px}
  .ease-worry .ew-q{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--soft);color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900}
  .ease-worry p{font-family:var(--serif);font-style:italic;font-size:16px;line-height:1.5;color:#3D3D3D}
  .ease-answer{padding-left:34px;position:relative;font-size:14.5px;line-height:1.68;color:var(--body)}
  .ease-answer::before{content:"";position:absolute;left:10px;top:6px;bottom:2px;width:2px;border-radius:2px;background:var(--blue)}
  .ease-answer strong{color:var(--ink);font-weight:800}
  .ease-close{margin:44px auto 0;max-width:700px;text-align:center;font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.9vw,23px);line-height:1.5;color:var(--ink)}

  /* —— pairing (two-human) —— */
  .pair-grid{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .pair-card{padding:32px 28px;border-radius:var(--radius-lg);background:var(--soft);border:1px solid var(--line);display:flex;flex-direction:column}
  .pair-card .pc-role{color:var(--gold);font-size:11px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;margin-bottom:16px}
  .pair-card h3{color:var(--ink);font-size:20px;margin-bottom:12px}
  .pair-card p{font-size:14px;line-height:1.7}
  .pair-quote{margin:52px auto 0;max-width:820px;text-align:center;font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.2vw,28px);line-height:1.45;letter-spacing:-.02em;color:var(--ink)}

  /* —— process steps —— */
  .steps{margin-top:50px;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;counter-reset:step}
  .step{position:relative;padding:28px 22px 26px;border-radius:var(--radius-lg);background:var(--white);border:1px solid var(--line);box-shadow:0 12px 34px rgba(0,0,0,.04)}
  .step::before{counter-increment:step;content:"0" counter(step);display:block;color:var(--blue-dark);font-size:12px;font-weight:900;letter-spacing:.14em;margin-bottom:14px}
  .step h3{font-size:17px;line-height:1.25;color:var(--ink);margin-bottom:10px;letter-spacing:-.02em}
  .step p{font-size:13.5px;line-height:1.62}

  /* —— the $99 door —— */
  .door-panel{max-width:940px;margin:0 auto;padding:46px;border-radius:var(--radius-xl);background:linear-gradient(135deg,var(--obsidian),#232A33);color:var(--white);box-shadow:var(--shadow-deep);border:1px solid rgba(255,255,255,.10);text-align:center}
  .door-panel .dp-amount{font-size:clamp(56px,6vw,84px);font-weight:900;letter-spacing:-.06em;line-height:1;color:var(--white)}
  .door-panel h2{color:var(--white);margin-top:14px}
  .door-panel .dp-doctrine{margin:20px auto 0;max-width:620px;font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.9vw,23px);color:var(--gold-light);line-height:1.45}
  .door-terms{margin:30px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 0}
  .door-terms span{padding:0 22px;border-right:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.82);font-size:13px;font-weight:800}
  .door-terms span:last-child{border-right:0}
  .door-fine{margin:26px auto 0;max-width:640px;color:rgba(255,255,255,.60);font-size:12.5px;line-height:1.7}

  /* —— send-us list —— */
  .send-grid{margin-top:46px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .send-card{padding:26px 24px;border-radius:var(--radius-md);background:var(--white);border:1px solid var(--line)}
  .send-card h4{font-size:15px;color:var(--ink);margin-bottom:8px;letter-spacing:-.02em}
  .send-card p{font-size:13.5px;line-height:1.6}
  .send-note{margin:30px auto 0;text-align:center;color:var(--muted);font-size:13.5px;font-weight:700}

  /* —— before/after —— */
  .ba-grid{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .ba-card{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);background:var(--white);box-shadow:var(--shadow-soft)}
  .ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
  .ba-half{aspect-ratio:4/3;background:linear-gradient(150deg,#E2E6EA,#D2D8DE);display:flex;align-items:center;justify-content:center;text-align:center;padding:14px;color:#8A939E;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
  .ba-half.is-after{background:linear-gradient(150deg,#1B2128,#0F1216);color:rgba(255,255,255,.55)}
  .ba-body{padding:24px}
  .ba-body h3{font-size:18px;color:var(--ink);margin-bottom:10px}
  .ba-body p{font-size:13.5px;line-height:1.65}
  .ba-note{margin:26px auto 0;text-align:center;color:var(--muted);font-size:12.5px;font-weight:700}

  @media (max-width:1040px){
    .ledger,.cost-wrap,.ease-grid{grid-template-columns:1fr}
    .fit-grid{grid-template-columns:1fr 1fr}
    .steps{grid-template-columns:1fr 1fr 1fr}
    .pair-grid,.send-grid,.ba-grid{grid-template-columns:1fr}
    .door-panel{padding:34px 26px}
  }
  @media (max-width:640px){
    .fit-grid{grid-template-columns:1fr}
    .steps{grid-template-columns:1fr}
    .door-terms span{border-right:0;padding:4px 0;flex:1 1 100%;text-align:center}
  }

  @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; }
    .review-grid { grid-template-columns:1fr 1fr; }
  }
  @media (max-width: 640px) {
    .section { padding:72px 20px; }
    .kit-grid { grid-template-columns:1fr; }
    .subtract-row { grid-template-columns:1fr; }
    .review-grid { grid-template-columns:1fr; }
  }

/* ============================================================================
   APPENDIX — rules that are NOT in the mockup. Each states why it exists so the
   next editor can tell a deliberate addition from drift.
   ============================================================================ */

  /* (1) REAL BEFORE/AFTER PHOTOGRAPHY.
     The mockup ships all six .ba-half tiles as empty placeholder frames. Three real
     delivered pairs exist (Alicia, "SVC-02 design help/2. From What You Send. To What
     You Hand Over."), so the tiles carry <img> instead. A delivered photo is never
     replaced by a mockup placeholder.
     BEFORE tiles are brand LOGO files -> object-fit:contain on white, so no part of a
     customer's mark is cropped away. AFTER tiles are card photography -> cover. */
  .ba-half.has-photo { padding:0; position:relative; overflow:hidden; }
  .ba-half.has-photo img { position:absolute; inset:0; width:100%; height:100%; display:block; }
  .ba-half.has-photo:not(.is-after) { background:#FFFFFF; }
  .ba-half.has-photo:not(.is-after) img { object-fit:contain; padding:10px; }
  .ba-half.has-photo.is-after img { object-fit:cover; }

  /* (2) WAITING SLOTS — stated in plain English, never a decorative stand-in.
     Used by the hero (no photograph delivered yet) and by any before/after tile whose
     photo has not arrived. Reads as a note, not as content. */
  .await-note { margin:0 auto; max-width:760px; padding:16px 20px; border:1px dashed var(--line);
    border-radius:var(--radius-sm); background:var(--soft); color:var(--muted);
    font-size:13px; font-weight:700; line-height:1.6; text-align:center; }
  .hero-await { margin:0 auto 0; max-width:1200px; }
  .hero-await-band { background:var(--white); padding:20px 24px 0; }
  .ba-half .await-note { border:0; background:none; padding:0; font-size:10px; letter-spacing:.06em; }

  /* (3) HERO GALLERY SUPPRESSION — TEMPORARY, remove when the photograph lands.
     inc/page/fw-hero.php always emits .fwh-gallery (thumb rail + stage + prev/next).
     This page has no hero photograph yet, so that region would render as an empty grey
     stage with working arrows and an empty 120px rail. Suppressing an EMPTY shell is not
     hiding data — the gap itself is stated on the page by .hero-await directly below.
     TO REMOVE: pass 'media' to $fw_hero (see www/design-help.php) and delete this rule
     together with the .hero-await block in the page. */
  .fw-hero .fwh-gallery { display:none; }

  /* (4) FROSTED STICKY CTA — carried forward from the outgoing v1.1 sheet.
     Markup is the shared component inc/page/sticky-cta.php. The mockup's chassis defines a
     .hero-sticky-cta but its body never emits one; the live page has had this tray since the
     cool-gray reskin, so it is kept rather than silently dropped (flagged in SVC-02-REPORT). */
  .sticky-cta-wrap{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(14px);z-index:9999;pointer-events:none;opacity:0;transition:opacity .26s ease, transform .26s ease}
  .sticky-cta-wrap.is-visible{opacity:1;transform:translateX(-50%) translateY(0)}
  .sticky-cta{display:flex;align-items:center;gap:8px;padding:8px;border-radius:18px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.40);box-shadow:0 22px 64px rgba(0,0,0,.16);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);pointer-events:auto}
  .sticky-cta-btn{min-height:48px;padding:0 24px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;font-family:Manrope,Helvetica,Arial,sans-serif;font-size:13px;font-weight:900;text-decoration:none;white-space:nowrap;transition:transform .2s ease, background .2s ease, box-shadow .2s ease}
  .sticky-cta-primary{background:rgba(201,169,110,.5);border:1.5px solid #C9A96E;color:#0A0A0A;box-shadow:0 10px 24px rgba(201,169,110,.22)}
  .sticky-cta-secondary{background:rgba(201,169,110,.5);border:1.5px solid #C9A96E;color:#0A0A0A}
  .sticky-cta-btn:hover{transform:translateY(-2px);background:rgba(201,169,110,.72);border-color:#B8924E}
  @media (max-width:640px){.sticky-cta-wrap{left:16px;right:16px;bottom:16px;transform:translateY(14px)}.sticky-cta-wrap.is-visible{transform:translateY(0)}.sticky-cta{width:100%}.sticky-cta-btn{flex:1;padding:0 12px;font-size:12px}}