/* =====================================================================
   DR CORY DUGAN  ·  SHARED SITE COMPONENTS  ·  v3 "AUTHORITY"
   Chrome (nav + footer + buttons) and the common component layer used
   across every page. Inherits ALL tokens from brand.css (loaded first).
   Do NOT hand-pick colours here; reference the --grape-* / --ink-* tokens.
   Page-specific layout stays inline in each page's own <style>.
   ===================================================================== */

:root { --nav-h: 68px; }
* { box-sizing: border-box; }
body { margin: 0; }

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--gutter); }

/* Skip link (a11y) */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--space-4); top: var(--space-4); background: var(--grape-800); color: #fff; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); z-index: var(--z-toast); }

/* ---------------------------------------------------------------------
   NAV
   --------------------------------------------------------------------- */
header.nav { position: sticky; top: 0; z-index: var(--z-nav); background: rgba(255,255,255,.9); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--color-rule); }
.nav-in { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; border: 0; }
.brand .wm { font-family: var(--font-serif); font-size: 21px; color: var(--grape-800); line-height: 1; }
.nav-links { display: flex; align-items: center; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.nav-links a { font-family: var(--font-sans); font-size: var(--fs-body-sm); color: var(--color-fg-muted); text-decoration: none; border: 0; }
.nav-links a:hover { color: var(--grape-800); }
.nav-links a[aria-current="page"] { color: var(--grape-800); font-weight: var(--fw-medium); }

.btn { font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--fs-body-sm); padding: 10px 20px; border-radius: var(--radius-pill); border: 1px solid transparent; text-decoration: none; display: inline-block; cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.btn-primary { background: var(--grape-800); color: #fff; }
.btn-primary:hover { background: var(--grape-700); color: #fff; }
.btn-ghost { background: transparent; color: var(--grape-800); border: 1px solid var(--grape-800); }
.btn-ghost:hover { border-color: var(--grape-700); color: var(--grape-700); }
/* nav <a> colour rule would otherwise override the button's white text */
.nav-links a.btn-primary, .nav-links a.btn-primary:hover { color: #fff; }
.btn:focus-visible { outline: 2px solid var(--grape-800); outline-offset: 2px; }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: var(--space-2); }
.nav-toggle span { display: block; width: 22px; height: 1.5px; background: var(--grape-800); margin: 5px 0; }

/* ---------------------------------------------------------------------
   LAYOUT PRIMITIVES
   --------------------------------------------------------------------- */
.hero { padding: var(--section-y) 0 var(--section-y-tight); }
.hero .eyebrow { display: block; margin-bottom: var(--space-5); }
.hero h1{max-width:36ch;font-size:clamp(1.9rem,3.3vw,2.75rem);line-height:1.16;text-wrap:balance}
.hero p.lead { margin-top: var(--space-6); }
.hero .cta-row { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-8); }

section { padding: var(--section-y) 0; }
section.tight { padding: var(--section-y-tight) 0; }
.lede { max-width: 62ch; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; }

/* Byline strip under a hero */
.byline-strip { font-size: var(--fs-body-sm); color: var(--color-fg-subtle); margin-top: var(--space-6); }

/* Offer list: grape-ruled items */
.offer-list { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-5); }
.offer-list li { border-left: 2px solid var(--grape-800); padding: 2px 0 2px var(--space-5); }
.offer-list b { font-family: var(--font-sans); color: var(--color-fg); }

/* Numbered steps (3-up) */
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-8); margin-top: var(--space-10); }
.step .numeral { display: block; margin-bottom: var(--space-3); }
.step h3 { font-family: var(--font-sans); font-size: var(--fs-heading-md); margin: 0 0 var(--space-2); }

/* Numbered stages (rows) */
.stages { margin-top: var(--space-10); border-top: 1px solid var(--color-rule); }
.stage { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-8); padding: var(--space-10) 0; border-bottom: 1px solid var(--color-rule); }
.stage .numeral { line-height: 1.1; }
.stage h3 { font-family: var(--font-sans); font-size: var(--fs-heading-lg); font-weight: var(--fw-medium); margin: 0 0 var(--space-3); }
.stage p { max-width: 62ch; margin: 0; }
.stage p + p { margin-top: var(--space-3); }

/* Stat band */
.statband { border-top: 2px solid var(--ink-1000); border-bottom: 1px solid var(--color-rule); padding: var(--space-10) 0; margin-top: var(--space-6); }
.statband .row { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-8); }
.statband .method-label { display: block; margin-bottom: var(--space-3); }
.statband .stat { display: block; }
.statband .cap { display: block; margin-top: var(--space-3); color: var(--color-fg-muted); font-size: var(--fs-body-sm); max-width: 30ch; }

/* Tool / offer cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: var(--space-6); }
.tool-card { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); background: var(--paper); text-decoration: none; transition: border-color var(--dur-fast) var(--ease-out); }
.tool-card:hover { border-color: var(--grape-800); }
.tool-card .tag { font-family: var(--font-sans); font-size: var(--fs-micro); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--grape-800); margin-bottom: var(--space-4); }
.tool-card h3 { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-heading-lg); margin: 0 0 var(--space-3); color: var(--ink-1000); }
.tool-card p { margin: 0; color: var(--color-fg-muted); font-size: var(--fs-body-sm); line-height: var(--lh-body); flex: 1; }
.tool-card .go { margin-top: var(--space-6); font-family: var(--font-sans); font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--grape-800); }

/* FAQ */
.faq-list { margin-top: var(--space-10); border-top: 1px solid var(--color-rule); }
.faq-item { padding: var(--space-8) 0; border-bottom: 1px solid var(--color-rule); }
.faq-item h3 { font-family: var(--font-sans); font-size: var(--fs-heading-md); font-weight: var(--fw-medium); margin: 0 0 var(--space-3); color: var(--color-fg); }
.faq-item p { max-width: 62ch; margin: 0; }

/* Soft-surface section */
.soft { background: var(--ink-050); }

/* CTA band: grape hairline rules top and bottom */
.ctaband { background: var(--paper); border-top: 2px solid var(--grape-800); border-bottom: 2px solid var(--grape-800); }
.ctaband h2 { color: var(--grape-800); }
.ctaband p { color: var(--color-fg-muted); }
.ctaband .btn-on { background: var(--grape-800); color: #fff; }
.ctaband .btn-on:hover { background: var(--grape-700); color: #fff; }

/* ---------------------------------------------------------------------
   CALLOUT TREATMENTS  (box-emphasis tiers)
   wash = quiet tint · accent = white card + top rule · tint = grape wash ·
   solid = grape fill (the ONE high-emphasis box per page).
   The `html:root` prefix bumps specificity (0,2,1) so a treatment beats a
   page's own inline base-box rule (e.g. .form-card{background:#fff},
   .rpack .buy{background:paper}, .who .cell{border-top:...}), which would
   otherwise win by loading after site.css. Property values are unchanged.
   --------------------------------------------------------------------- */
html:root .callout--wash{background:var(--grape-050);border:1px solid var(--grape-100);border-left:3px solid var(--grape-800);border-radius:var(--radius-lg);padding:var(--space-8)}
html:root .callout--wash h3,html:root .callout--wash h4{color:var(--grape-800)}
html:root .callout--accent{background:var(--paper);border:1px solid var(--color-border);border-top:4px solid var(--grape-800);border-radius:var(--radius-lg);padding:var(--space-8);box-shadow:var(--shadow-sm)}
html:root .callout--accent h3,html:root .callout--accent h4{color:var(--grape-800)}
html:root .callout--tint{background:var(--grape-100);border:1px solid var(--grape-200);border-radius:var(--radius-lg);padding:var(--space-8)}
html:root .callout--tint h3,html:root .callout--tint h4,html:root .callout--tint .price{color:var(--grape-800)}
html:root .callout--solid{background:var(--grape-800);border:1px solid var(--grape-900);border-radius:var(--radius-lg);padding:var(--space-8);box-shadow:var(--shadow-md);color:#fff}
html:root .callout--solid h3,html:root .callout--solid h4,html:root .callout--solid .price{color:#fff}
html:root .callout--solid p{color:var(--grape-100)}
html:root .callout--solid label,html:root .callout--solid .fine,html:root .callout--solid small{color:var(--grape-100)}
html:root .callout--solid .btn-primary,html:root .callout--solid .btn-on{background:#fff;color:var(--grape-800)}
html:root .callout--solid .btn-primary:hover,html:root .callout--solid .btn-on:hover{background:var(--grape-050)}
html:root .callout--solid input{border-color:var(--grape-600)}

/* ---------------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------------- */
footer.site { background: var(--ink-1000); color: var(--ink-300); padding: var(--space-16) 0 var(--space-10); font-size: var(--fs-body-sm); }
footer.site a { color: var(--ink-300); text-decoration: none; border: 0; }
footer.site a:hover { color: #fff; }
footer.site a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.foot-top { display: flex; justify-content: space-between; gap: var(--space-16); flex-wrap: wrap; }
.foot-brand .wm { font-family: var(--font-serif); font-size: 20px; color: #fff; }
.foot-brand p { color: var(--ink-300); max-width: 40ch; margin-top: var(--space-3); }
.foot-cols { display: flex; gap: var(--space-16); flex-wrap: wrap; }
.foot-col .foot-h { font-family: var(--font-sans); font-size: var(--fs-meta); font-weight: var(--fw-semibold); line-height: var(--lh-heading); text-transform: uppercase; letter-spacing: var(--tracking-tag); color: var(--ink-400); margin: 0 0 var(--space-3); }
.foot-col a { display: block; margin-bottom: var(--space-2); }
.foot-fine { margin-top: var(--space-12); padding-top: var(--space-5); border-top: 1px solid rgba(255,255,255,.1); color: var(--ink-400); }
.foot-fine a { color: var(--ink-400); }
.foot-fine a:hover { color: #fff; }

/* ---------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width: 1000px) { .nav-links { gap: var(--space-4); } }
@media (max-width: 900px) {
  .nav-links { display: none; position: absolute; top: var(--nav-h); left: 0; right: 0; flex-direction: column; align-items: flex-start; background: #fff; border-bottom: 1px solid var(--color-rule); padding: var(--space-5) var(--gutter); gap: var(--space-5); }
  .nav-links.show { display: flex; }
  .nav-toggle { display: block; }
}
@media (max-width: 760px) {
  .statband .row { grid-template-columns: 1fr; gap: var(--space-8); }
  .two { grid-template-columns: 1fr; gap: var(--space-8); }
  .steps { grid-template-columns: 1fr; }
  .stage { grid-template-columns: 1fr; gap: var(--space-3); }
  .hero h1 { font-size: clamp(1.8rem, 7vw, 2.5rem); }
  .foot-top { gap: var(--space-8); }
  .foot-cols { gap: var(--space-8); }
}