/* Public-page visual companion to the approved homepage.
   Import after each page's legacy styles. Content and interaction states stay in HTML. */
:root {
  --public-navy: #142f4f;
  --public-slate: #213c5b;
  --public-accent: #806329;
  --public-gold: #b69350;
  --public-paper: #ffffff;
  --public-surface: #f2f5f7;
  --public-line: #dce3e9;
  --public-ink: #21364d;
  --public-muted: #516273;
  --public-font: Arial, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --public-gutter: clamp(1.25rem, 4.45vw, 4rem);
}

body {
  background: var(--public-paper);
  color: var(--public-ink);
  font-family: var(--public-font);
  line-height: 1.6;
  overflow-x: visible;
}

/* Keep every existing navigation label available on desktop and mobile. */
body > header {
  padding: 1.45rem var(--public-gutter) 1.2rem;
  background: var(--public-paper);
  color: var(--public-navy);
  border-bottom: 1px solid var(--public-line);
}
header .brand-row { gap: 1rem; min-width: 0; }
header .brand-row > a { flex-shrink: 0; }
header .brand-row > div { min-width: 0; }
header .site-logo { width: 4.5rem; height: 4.5rem; }
header .brand {
  color: var(--public-navy);
  font-family: var(--public-font);
  font-size: clamp(1.35rem, 1.9vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
}
header .tagline, header .tagline-top {
  margin-top: 0.45rem;
  color: var(--public-muted);
  font-family: var(--public-font);
  font-size: 1rem;
  font-style: normal;
  line-height: 1.4;
}
header nav {
  gap: 0.65rem clamp(1rem, 2.15vw, 2rem);
  margin-top: 1.35rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--public-line);
  font-size: 1rem;
  line-height: 1.4;
}
header nav a {
  margin: 0;
  padding: 0.65rem 0;
  color: var(--public-navy);
  text-decoration: none;
}
header nav a:hover {
  color: var(--public-accent);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
header nav .nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 3rem;
  margin-left: auto;
  padding: 0.8rem 1.4rem;
  border-radius: 7px;
  background: var(--public-navy);
  color: #ffffff;
  font-weight: 700;
  text-align: center;
  white-space: normal;
}
header nav .nav-cta:hover {
  background: var(--public-slate);
  color: #ffffff;
  text-decoration: none;
}

/* Legacy viewport-breakout margins added duplicate gutters and clipped narrow screens. */
body > .hero, body > .hub {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(3rem, 5vw, 5rem) var(--public-gutter);
  background: var(--public-surface);
  color: var(--public-ink);
  border-bottom: 1px solid var(--public-line);
}
.hero h1 {
  max-width: 58rem;
  margin: 0 auto 1.4rem;
  color: var(--public-navy);
  font-family: var(--public-font);
  font-size: clamp(2.4rem, 4.1vw, 3.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.035em;
}
.hero .sub {
  max-width: 48rem;
  margin: 0 auto 1.5rem;
  color: var(--public-accent);
  font-family: var(--public-font);
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  font-style: normal;
  line-height: 1.5;
}
.hero p { color: var(--public-muted); font-size: 1.1rem; line-height: 1.65; }
.hero .eyebrow {
  color: var(--public-accent);
  font-family: var(--public-font);
  font-size: 0.9rem;
  line-height: 1.5;
}
.hero .caption-subline, .hero .referral-note { color: var(--public-muted); }
.hero .referral-note strong { color: var(--public-accent); }
.hero .check, .price-tag {
  background: var(--public-navy);
  color: #ffffff;
}

body > section {
  max-width: 82rem;
  padding: clamp(3rem, 5vw, 4.5rem) var(--public-gutter);
}
/* Sections with their own inner container receive one set of gutters. */
body > section:has(> .inner) { max-width: none; padding: 0; }
body > section > .inner {
  max-width: 76rem;
  margin-inline: auto;
  padding: clamp(3rem, 5vw, 4.5rem) var(--public-gutter);
}
body > main {
  max-width: 60rem;
  padding: clamp(3rem, 5vw, 4.5rem) var(--public-gutter);
}
h1, h2, h3, h4, summary {
  color: var(--public-navy);
  font-family: var(--public-font);
  font-weight: 700;
}
main > h1 { font-size: clamp(2.2rem, 4.1vw, 3.4rem); line-height: 1.16; letter-spacing: -0.03em; }
body > section h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.2; letter-spacing: -0.025em; }
.lede, .closer p { color: var(--public-muted); line-height: 1.65; }
/* Email addresses remain complete and can wrap inside narrow text columns. */
body a[href^="mailto:"] { overflow-wrap: anywhere; }
h2 + .sub-h2 {
  color: var(--public-accent);
  font-family: var(--public-font);
  font-style: normal;
  line-height: 1.5;
}
main > h2 { border-color: var(--public-gold); }
main a, main .answer a { color: var(--public-navy); }
.dignity h2 { color: var(--public-navy); }
.crumb {
  padding-inline: var(--public-gutter);
  background: var(--public-surface);
  color: var(--public-muted);
  border-bottom: 1px solid var(--public-line);
}
.crumb a { color: var(--public-accent); }

.what, .how, .compose, .grabbar, .why, .why-local, .devices,
.installed, .partof, .fit, .managed, .portal-preview, .segment,
.visit-fee, .book, .help, .schedule, .dignity, .scope {
  border-color: var(--public-line);
}
.what, .compose, .why-local, .devices, .partof, .fit, .portal-preview,
.segment, .book, .help, .schedule { background: var(--public-paper); }
.how, .grabbar, .why, .installed, .managed, .segment.alt, .visit-fee,
.visit, .reassure, .dignity, .scope, .check, section.steps, section.tiers {
  background: var(--public-surface);
}
.what p, .how p, .compose p, .grabbar p, .why p, .why-local p,
.installed p, .partof p, .fit p, .managed p, .segment p, .visit-fee p,
.help p, .schedule p, .check p { color: var(--public-muted); }

.card, .tier, .tier-cell, .service-card, .area-card, .device, .visit-step,
.step-card, .reassure-item, .why-item, .ex, .dignity .promise, .cta-box,
.sms-box, .book .pay-card {
  min-width: 0;
  border-color: var(--public-line);
  border-radius: 12px;
  background: var(--public-paper);
  box-shadow: none;
  overflow-wrap: anywhere;
}
.card h3, .service-card h3, .device h3, .step-card h3, .tier h3,
.tier-cell h4, .pillar h4, .visit-step h4, .why-item h4, .reassure-item h4,
.dignity .promise h4, .book .pay-card h4, .book .referral-waiver h4,
.devices .group-label, .ex strong {
  color: var(--public-navy);
  font-family: var(--public-font);
  font-weight: 700;
  line-height: 1.35;
}
.card h3, .service-card h3 { border-color: var(--public-gold); }
.card p, .service-card p, .device p, .tier p, .tier-cell p, .visit-step p,
.step-card p, .why-item p, .reassure-item p, .dignity .promise p,
.area-card li, .area-card .note, .book .pay-card p { color: var(--public-muted); }
.service-card .num, .visit-step .step-num, .step-card .num,
.tier .pitch, .tier .price, .tier-cell .price, .pillar .num,
.area-card .county, .devices .group-label span {
  font-family: var(--public-font);
  color: var(--public-accent);
  font-style: normal;
}
.tier.featured { border-color: var(--public-gold); }
.tier .badge, .area-card .tag { background: var(--public-accent); color: #ffffff; }
.area-card.secondary .tag { background: var(--public-navy); }
.tier .price { color: var(--public-navy); }
.tier .price small, .card .model, .device .model { color: var(--public-muted); }
.tier .result, .tier-list li, .feat li, .portal-preview .feat li, .pillar,
.grabbar .offer, .installed .pledge, .managed .pledge, .visit-fee .pledge,
.why .credentials, .price-box, .book .referral-waiver {
  background: var(--public-surface);
  border-color: var(--public-line);
  color: var(--public-muted);
  border-radius: 8px;
}
.segment.alt .feat li { background: #ffffff; border-color: var(--public-line); }
.ex, .reassure-item, .why-item, .dignity .promise, .feat li,
.portal-preview .feat li, .segment.alt .feat li, .grabbar .offer,
.installed .pledge, .managed .pledge, .visit-fee .pledge,
.why .credentials, .book .referral-waiver, .sms-box { border-left-color: var(--public-gold); }
.feat strong, .portal-preview .feat strong, .tier-list .name,
.how li strong, .price-box .price, .scope strong { color: var(--public-navy); font-family: var(--public-font); }
.tier-list .price, .book .price-summary strong, .book .req,
.how li::before, .tier li::before, .area-card li::before, .sms-box li::before,
.device .pillar { color: var(--public-accent); }
.device .pillar { background: transparent; border: 0; border-radius: 0; }
.book .price-summary { color: var(--public-navy); font-family: var(--public-font); }
.service-card a, .fit .more a, .partof .links a,
.book .fallback a, .book .referral-waiver a, .grabbar .gb-book {
  color: var(--public-accent);
  text-underline-offset: 0.25em;
}

/* Fit the existing grids to their available space, including narrow phone screens. */
.services-grid, .coverage, .three-up, .devices .grid, .contact-grid,
.reassure-grid, .book .pay-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.tiers:has(> .tier) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.tier-grid, .why-grid, .steps:has(> .step-card), .dignity .promise-grid,
.book .grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.pillars-grid, .visit-steps, .examples {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.cta, .cta-dark, .check-cta, .help-cta, .anchor-cta,
.tier .tier-cta, .tier.featured .tier-cta,
.tiers .all-plans a, .compose a.plans-cta, .grabbar .gb-call,
.installed .more a, .book .intake-submit, .book .pay-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 3.5rem;
  padding: 1rem 1.35rem;
  border-radius: 8px;
  background: var(--public-navy);
  color: #ffffff;
  font-family: var(--public-font);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  transition: background-color 0.2s ease;
}
.cta:hover, .cta-dark:hover, .check-cta:hover, .help-cta:hover,
.anchor-cta:hover, .tier .tier-cta:hover, .tier.featured .tier-cta:hover,
.tiers .all-plans a:hover, .compose a.plans-cta:hover, .grabbar .gb-call:hover,
.installed .more a:hover, .book .intake-submit:hover, .book .pay-cta:hover,
header nav .nav-cta:hover {
  background: var(--public-slate);
  color: #ffffff;
  transform: none;
  box-shadow: none;
}
.cta-secondary, .hero .cta-secondary { color: var(--public-navy); text-underline-offset: 0.25em; }

/* Frame the existing screenshots without changing the dashboard's status colors. */
.portal-preview .dashboard-mockup {
  padding: 1.5rem;
  border: 1px solid var(--public-line);
  border-radius: 16px;
  background: var(--public-surface);
  box-shadow: none;
}
.portal-preview .dashboard-mockup .illustrative-label { color: var(--public-muted); }
.portal-preview .dashboard-mockup img { border: 1px solid var(--public-line); border-radius: 6px; }
.portal-preview .dashboard-mockup figcaption { color: var(--public-navy); }
.portal-preview .dashboard-mockup figcaption strong { font-family: var(--public-font); }
.portal-preview .dashboard-mockup figcaption small { color: var(--public-muted); }
body .portal-preview .portal-image-hint { color: var(--public-navy); font-family: var(--public-font); }
.portal-preview figcaption, .portal-preview .closing { color: var(--public-muted); }

/* Preserve hidden steps, validation colors, honeypot hiding, and embed dimensions. */
.book .intake-form fieldset { min-width: 0; background: var(--public-surface); border-color: var(--public-line); }
.book .intake-form legend, .book .step-heading, .book .fee-note,
.book .step-tab { font-family: var(--public-font); }
.book .step-tab { color: var(--public-accent); background: #ffffff; border-color: var(--public-line); }
.book .step-tab.is-active { color: #ffffff; background: var(--public-navy); border-color: var(--public-navy); }
.book .step-tab.is-done { color: var(--public-navy); background: #e8eef4; border-color: #b8c7d6; }
.book .embed-wrapper { background: var(--public-surface); border-color: var(--public-line); }
main details { border-color: var(--public-line); border-radius: 10px; }
main summary { color: var(--public-navy); font-family: var(--public-font); }
main summary::after { color: var(--public-accent); }
main details[open] summary { border-color: var(--public-line); }
main .answer { color: var(--public-muted); }

body > footer {
  padding: 3rem var(--public-gutter);
  background: var(--public-navy);
  color: #ffffff;
  text-align: left;
  overflow-wrap: anywhere;
}
footer p { color: #e0e7ee; font-size: 1rem; }
footer a { color: #e0c48d; text-underline-offset: 0.25em; }
footer .legal { max-width: 72rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #526b84; color: #e0e7ee; font-size: 0.95rem; }
footer .legal-disclosure { max-width: 72rem; color: #e0e7ee; font-size: 0.95rem; }

body a:focus-visible, body button:focus-visible, body input:focus-visible,
body select:focus-visible, body textarea:focus-visible, body summary:focus-visible {
  outline: 3px solid var(--public-accent);
  outline-offset: 4px;
}
body footer a:focus-visible { outline-color: #e0c48d; }

@media (min-width: 1580px) {
  body > header, body > footer { padding-inline: max(var(--public-gutter), calc((100% - 82rem) / 2)); }
}

@media (max-width: 700px) {
  body > header { padding-block: 1.1rem; }
  header .brand-row { gap: 0.65rem; }
  header .site-logo { width: 3rem; height: 3rem; }
  header .brand { font-size: 1.15rem; line-height: 1.25; }
  header .tagline, header .tagline-top { font-size: 0.85rem; }
  header nav { gap: 0.2rem 1rem; margin-top: 1rem; padding-top: 0.75rem; font-size: 0.95rem; }
  header nav .nav-cta { width: 100%; margin: 0.5rem 0 0; }
  .hero h1 { font-size: clamp(2.05rem, 8.8vw, 3rem); }
  .hero p { font-size: 1.05rem; }
  .cta-secondary { margin-left: 0; }
  .cta-box { padding: 2rem 1.25rem; }
  .portal-preview .dashboard-mockup { padding: 1rem; }
  .book .intake-form fieldset { padding: 1rem; }
  footer a { margin-left: 0; margin-right: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cta, .cta-dark, .check-cta, .help-cta, .anchor-cta,
  .tier .tier-cta, .tiers .all-plans a, .compose a.plans-cta,
  .grabbar .gb-call, .installed .more a, .book .intake-submit,
  .book .pay-cta, header nav .nav-cta, .card, .moment, .pillar,
  .tier-mini, .tier, .tier-cell, .service-card, .area-card, .why-item,
  .difference-item, .value, .visit-step, .reassure-item, .ex {
    transition: none;
  }
  .card:hover, .moment:hover, .pillar:hover, .tier-mini:hover,
  .tier:hover, .tier-cell:hover, .service-card:hover, .area-card:hover,
  .why-item:hover, .difference-item:hover, .value:hover,
  .visit-step:hover, .reassure-item:hover, .ex:hover { transform: none; }
}