/* Public site: wayfinding layer. Loads after site.css and design-refinements.css.
   Re-points the old palette and fonts at the shared system (signs.css), then
   restyles the components. Markup and script hooks are unchanged. */

:root {
  --paper: var(--bs-paper);
  --paper2: #e6ece1;
  --ink: var(--bs-ink);
  --ink2: var(--bs-stone);
  --forest: var(--bs-sign);
  --leaf: var(--bs-leaf);
  --leafdeep: var(--bs-leaf-ink);
  --line: var(--bs-line);
  --ivory: #ffffff;
  --sans: var(--bs-font);
  --serif: var(--bs-font);
  --disp: var(--bs-font);
  --mono: var(--bs-font);
}

body {
  font-family: var(--bs-font);
  font-size: 17px;
  line-height: 1.6;
  background: var(--bs-paper);
  color: var(--bs-ink);
}
p {
  color: var(--bs-stone);
}
:focus-visible {
  outline: 3px solid var(--bs-sign);
  outline-offset: 3px;
}

/* Small labels were monospaced capitals; now plain sentence case. */
.tlink, .nav-links a, .nav-phone, .nav-phone small, .hero-tag, .hero-note,
.proof-item span, .ticker-set span, .about-facts dt, .about-card .meta,
.step .go, .agent-card .role, .house-rules b, .tool-tab, .cipc-chip, .cal-q,
.cal-block h4, .quote-band .attrib, .ledger-row dt, .field label, .form-note,
footer h5, .foot-bottom, .agent-head small, .agent-session, .action-btn, .chip,
.mem-toggle, .agent-note, .hc-progress, .hc-band small, .price-flag,
.mobile-menu .mm-meta, .btn, .label, .agent-lang {
  font-family: var(--bs-font);
  text-transform: none;
  letter-spacing: 0;
}

/* ——— Headings: heavy signage type, no italic accents ——— */
h1, h2, h3 {
  font-family: var(--bs-font);
  font-weight: 800;
  letter-spacing: -0.022em;
  color: var(--bs-ink);
}
h2 {
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.04;
}
h3 {
  font-size: 21px;
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
h1 em, h2 em, h3 em, .foot-sign em {
  font: inherit;
  font-style: normal;
  color: inherit;
}

/* Section names read like area signs. */
.label {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px 3px;
  border: 0;
  border-radius: 5px;
  background: var(--bs-sign);
  color: #fff;
  font-weight: 800;
  font-size: 13.5px;
  line-height: 1.3;
}
.quote-band .label {
  background: var(--bs-leaf);
  color: var(--bs-sign);
}

/* ——— Buttons and links ——— */
.btn {
  min-height: 48px;
  padding: 0 22px;
  border-width: 2px;
  border-radius: var(--bs-r-field);
  font-weight: 750;
  font-size: 15.5px;
  line-height: 1;
}
.btn-solid {
  background: var(--bs-sign);
  border-color: var(--bs-sign);
  color: #fff;
}
.btn-solid:hover {
  background: var(--bs-sign-deep);
  border-color: var(--bs-sign-deep);
}
.btn-leaf {
  background: var(--bs-leaf);
  border-color: var(--bs-leaf);
  color: var(--bs-sign);
}
.btn-leaf:hover {
  background: #a3cc83;
  border-color: #a3cc83;
}
.btn-ghost {
  border-color: var(--bs-line-strong);
  background: #fff;
  color: var(--bs-ink);
}
.btn-ghost:hover {
  border-color: var(--bs-sign);
  background: var(--bs-sign);
  color: #fff;
}
.tlink,
.step .go {
  font-weight: 750;
  font-size: 15.5px;
  color: var(--bs-sign);
  border-bottom: 2px solid var(--bs-leaf);
  padding-bottom: 2px;
}
.tlink:hover,
.step .go:hover {
  color: var(--bs-sign-deep);
  border-bottom-color: var(--bs-sign);
}

/* ——— Header ——— */
header {
  background: rgba(243, 245, 240, 0.95);
}
.nav-links a {
  font-weight: 650;
  font-size: 15.5px;
  color: var(--bs-ink);
  border-bottom-width: 3px;
}
.nav-links a:hover {
  border-bottom-color: var(--bs-leaf);
}
.nav-phone {
  font-weight: 800;
  font-size: 16px;
}
.nav-phone small {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--bs-stone);
  margin-bottom: 2px;
}
.nav .btn {
  min-height: 44px;
}

/* ——— Hero: the direction sign ——— */
.hero.hero-sign {
  padding: 56px 0 72px;
  overflow: visible;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 56px;
  align-items: center;
}
.sign-board {
  padding: 40px 44px 26px;
}
.hero .sign-board h1 {
  margin: 0 0 26px;
  color: #fff;
  font-size: clamp(42px, 5.4vw, 82px);
  line-height: 0.96;
  letter-spacing: -0.028em;
}
.sign-board ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sign-board li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 0;
  border-top: 2.5px solid rgba(255, 255, 255, 0.9);
  color: #fff;
  font-weight: 750;
  font-size: clamp(18px, 1.7vw, 23px);
  line-height: 1.2;
}
.sign-board li a .bs-arrow {
  width: 32px;
  height: 32px;
}
.sign-board li a:hover span {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.sign-board a:focus-visible {
  outline-color: var(--bs-route);
}
.hero .hero-copy .lead {
  font-size: 20px;
  line-height: 1.55;
  color: var(--bs-ink);
  max-width: 36ch;
  margin-bottom: 0;
}
.hero-copy .hero-ctas {
  margin: 28px 0 36px;
  gap: 24px;
}
.hero-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  border-top: 3px solid var(--bs-ink);
}
.hero-facts div {
  padding: 12px 16px 0 0;
}
.hero-facts dt {
  font-weight: 650;
  font-size: 14px;
  color: var(--bs-stone);
}
.hero-facts dd {
  margin: 0;
  font-weight: 800;
  font-size: 18px;
}
.hero-facts a {
  color: var(--bs-sign);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.landing-trust {
  font-size: 15.5px;
  color: var(--bs-stone);
}

/* One orchestrated moment is enough: sections no longer fade in one by one. */
.reveal,
.reveal.in {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ——— Services: stops along the road ——— */
.svc-intro h2,
.health-intro h2,
.contact-copy h2,
.about-copy h2,
.how-head h2 {
  margin: 16px 0 14px;
}
.journey::before {
  left: 19px;
  top: 20px;
  bottom: 20px;
  border-left: 4px solid var(--bs-leaf);
}
.node {
  width: 42px;
  height: 42px;
  border: 4px solid var(--bs-leaf);
  background: #fff;
  color: var(--bs-sign);
  font-weight: 800;
  font-size: 14px;
}
.step:first-child .node {
  background: #fff;
  border-color: var(--bs-leaf);
  color: var(--bs-sign);
}
.step h3 {
  font-size: 24px;
  margin-bottom: 6px;
}
.step p {
  font-size: 17px;
}
.service-details summary,
.more-tools summary,
.background-details > details > summary {
  font-weight: 700;
  font-size: 16px;
  color: var(--bs-sign);
}

/* ——— Free tools ——— */
.health-card {
  border-radius: var(--bs-r-sign);
  border: 1px solid var(--bs-line);
}
.tool-tab {
  padding: 9px 12px;
  border: 1.5px solid var(--bs-line-strong);
  border-radius: var(--bs-r-plate);
  background: #fff;
  color: var(--bs-ink);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
}
.tool-tab:hover {
  border-color: var(--bs-sign);
  color: var(--bs-sign);
}
.tool-tab.active {
  background: var(--bs-sign);
  border-color: var(--bs-sign);
  color: #fff;
}
.hc-progress {
  font-weight: 700;
  font-size: 14px;
  color: var(--bs-stone);
}
.hc-q {
  font-weight: 800;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.15;
}
.hc-opt,
.cal-yn {
  border: 1.5px solid var(--bs-line-strong);
  border-radius: var(--bs-r-field);
  font-weight: 650;
  font-size: 16px;
}
.hc-opt:hover,
.cal-yn:hover {
  border-color: var(--bs-sign);
  background: #fff;
}
.cal-yn.on {
  background: var(--bs-sign);
  border-color: var(--bs-sign);
}
.hc-band {
  font-weight: 800;
  font-size: 36px;
}
.hc-band small,
.cal-q,
.cal-block h4 {
  font-weight: 700;
  font-size: 14px;
  color: var(--bs-leaf-ink);
}
.cipc-input,
.cal-select,
.tcs-drop {
  border: 1.5px solid var(--bs-line-strong);
  border-radius: var(--bs-r-field);
  background: #fff;
}
.cipc-chip {
  border-radius: 4px;
  font-weight: 800;
  font-size: 12.5px;
}
.hc-human,
.scan-avenues {
  border-left-width: 5px;
  border-left-color: var(--bs-sign);
}

/* ——— Pricing: flat columns; the featured plan is the sign ——— */
.sec-head.center {
  text-align: left;
}
.sec-head.center p {
  margin-inline: 0 !important;
}
.price-grid {
  gap: 24px;
  align-items: stretch;
}
.price-card {
  background: transparent;
  border: 0;
  border-top: 4px solid var(--bs-ink);
  border-radius: 0;
  padding: 20px 4px 4px;
}
.price-card h3 {
  font-size: 22px;
}
.price {
  font-weight: 800;
  font-size: clamp(30px, 2.7vw, 40px);
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.price small {
  font-weight: 650;
  font-size: 14px;
}
.price-card.featured {
  background: var(--bs-sign);
  border: 0;
  border-radius: var(--bs-r-sign);
  box-shadow: var(--bs-keyline);
  padding: 28px 24px 24px;
}
.price-card.featured h3,
.price-card.featured .price {
  color: #fff;
}
.price-card.featured .price small,
.price-card.featured .price-per {
  color: var(--bs-sign-mist);
}
.price-card.featured .btn-ghost,
.price-card.featured .btn {
  background: #fff;
  border-color: #fff;
  color: var(--bs-sign);
}
.price-flag {
  top: -12px;
  left: 20px;
  padding: 4px 9px 3px;
  border-radius: 4px;
  background: var(--bs-leaf);
  color: var(--bs-sign);
  font-weight: 800;
  font-size: 13px;
}
.price-card ul li::before {
  width: 7px;
  height: 7px;
  border-radius: 2px;
}

/* ——— Rescue, FAQ, contact ——— */
.rescue-card,
.form-panel {
  border-radius: var(--bs-r-sign);
  border: 1px solid var(--bs-line);
  background: #fff;
}
.rescue-process li {
  border-top: 4px solid var(--bs-sign);
}
.faq-list details {
  border-radius: var(--bs-r-field);
}
.faq-list details[open] {
  border-color: var(--bs-sign);
}
.faq-list summary {
  font-weight: 700;
  font-size: 17px;
}
.faq-list summary .plus {
  font-weight: 800;
  color: var(--bs-sign);
}
.ledger {
  border-top: 3px solid var(--bs-ink);
}
.ledger-row dt {
  font-weight: 650;
  font-size: 14px;
  color: var(--bs-stone);
}
.ledger-row dd {
  font-weight: 650;
  font-size: 17px;
}
.ledger-row dd a {
  border-bottom: 2px solid var(--bs-leaf);
}
.field label {
  font-weight: 700;
  font-size: 15px;
  color: var(--bs-ink);
  margin-bottom: 6px;
}
.field input,
.field select,
.field textarea,
.rescue-result textarea {
  border: 1.5px solid var(--bs-line-strong);
  border-radius: var(--bs-r-field);
  background: #fff;
  font-size: 16px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--bs-sign);
  outline: 3px solid var(--bs-leaf-wash);
  outline-offset: 0;
}
.seg {
  border: 1.5px solid var(--bs-line-strong);
  border-radius: var(--bs-r-field);
}
.seg span {
  font-weight: 650;
}
.seg input:checked + span {
  background: var(--bs-sign);
}
.form-note {
  font-size: 13.5px;
  color: var(--bs-stone);
}
.consent input {
  accent-color: var(--bs-sign);
}

/* ——— Footer ——— */
footer {
  background: var(--bs-sign-deep);
  color: var(--bs-sign-mist);
}
.foot-grid p {
  color: var(--bs-sign-mist);
}
footer h5,
footer .foot-heading {
  font-weight: 800;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0;
  color: #fff;
  margin-bottom: 1.2rem;
}
footer a:hover {
  color: var(--bs-leaf);
}
.foot-sign {
  font-weight: 800;
  font-size: clamp(48px, 8vw, 108px);
  letter-spacing: -0.035em;
  line-height: 0.95;
  color: #fff;
}
.foot-sign em {
  color: inherit;
}
.foot-bottom,
.foot-fine {
  font-size: 13.5px;
  color: #a9bba8;
}

/* ——— Consultant panel ——— */
.fab-agent {
  background: var(--bs-sign);
}
.agent-panel {
  border: 2px solid var(--bs-sign);
  border-radius: var(--bs-r-sign);
}
.agent-head {
  background: var(--bs-sign);
  border-bottom: 0;
}
.agent-head b {
  font-weight: 800;
  font-size: 18px;
  color: #fff;
}
.agent-head small {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--bs-sign-mist);
}
.agent-close,
.agent-reset,
.agent-head .agent-speak {
  color: #fff;
}
.agent-session {
  font-weight: 650;
  font-size: 12.5px;
}
.msg {
  font-size: 15.5px;
  border-radius: 10px;
}
.msg.user {
  background: var(--bs-sign);
}
.action-btn,
.chip {
  border-radius: var(--bs-r-plate);
  font-weight: 700;
  font-size: 13.5px;
}
.action-btn {
  border: 1.5px solid var(--bs-sign);
}
.mem-toggle,
.agent-note {
  font-size: 12.5px;
}
.agent-input input {
  border: 1.5px solid var(--bs-line-strong);
  border-radius: var(--bs-r-field);
  font-size: 16px;
}

/* ——— Mobile menu ——— */
.mobile-menu a.big {
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.02em;
}

@media (max-width: 1020px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .hero .hero-copy .lead {
    max-width: 44ch;
  }
}
@media (max-width: 820px) {
  /* The logo lockup was taller than the header and lost its top edge. */
  .nav {
    height: auto;
    min-height: 72px;
    padding: 8px 0;
  }
  .bs-logo-anim {
    height: 54px;
    align-self: center;
    margin-bottom: 0;
  }
}
@media (max-width: 650px) {
  .hero.hero-sign {
    padding: 24px 0 48px;
  }
  .sign-board {
    padding: 26px 24px 14px;
  }
  .hero .sign-board h1 {
    font-size: 44px;
  }
  .sign-board li a .bs-arrow {
    width: 26px;
    height: 26px;
  }
  .hero .hero-copy .lead {
    font-size: 18px;
  }
  .price-card.featured {
    margin-top: 12px;
  }
  /* site.css sets two columns at 1020px after its 640px rule, so phones got two. */
  .price-grid {
    grid-template-columns: 1fr;
  }
}