/* BidClarity brand v1.0.2 — site primitives for the marketing pages (Track B, F1). Loads after brand.css on a page whose
   <body> (or main region) carries class="bc-scope" data-bc-theme="light". Component contract: brand-system §4, §6, §8.
   Pages keep their own content CSS; these are the shared frame pieces: skip link, navigation, section rhythm, navy chapter,
   the coverage statistic, the contrast span and the "on the way" card. The footer is the shared footer source (F4). */

/* skip link: visible only on focus, above everything (z-skip) */
.bc-skip { position: absolute; left: 20px; top: -100px; z-index: var(--bc-z-skip); padding: 12px 16px; background: var(--bc-surface); color: var(--bc-text); border: 1.5px solid var(--bc-border-control); border-radius: var(--bc-radius); font: 600 1rem/1.5 var(--bc-font-sans); }
.bc-skip:focus-visible { top: 20px; }

/* navigation: 84px desktop / 68px phone, base surface, ink labels in the existing case, no tracking (§4, §8 Navigation) */
.bc-nav { position: relative; z-index: var(--bc-z-header); background: var(--bc-bg); border-bottom: 1px solid var(--bc-border); }
/* gaps 24px (were 40 / 32) since the Contact link joined the actions (c1220, B 334): with 40 / 32 the row no longer fit the 1320px container
   and every label wrapped; with 24 / 24 it fits on one line from 1280px up, as it did before. Below 1200px the labels wrap as they did before (pre-existing). */
.bc-nav__row { display: flex; align-items: center; gap: 16px; min-height: var(--bc-nav-height); }
.bc-nav__main { display: contents; }
.bc-nav__links { display: flex; gap: 16px; list-style: none; margin: 0 auto 0 24px; padding: 0; font: 500 1.0625rem/1.5 var(--bc-font-sans); }
.bc-nav__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--bc-text-secondary); text-decoration: none; border-bottom: 3px solid transparent; }
.bc-nav__links a:hover { color: var(--bc-text); }
.bc-nav__links a[aria-current="page"] { color: var(--bc-text); border-bottom-color: var(--bc-brand); }
.bc-nav__phone { display: none; }   /* Resources: the phone menu only (B 359; the Founder, c1327) */
.bc-nav__actions { display: flex; align-items: center; gap: 10px; }
.bc-nav__actions .bc-button { min-height: 44px; padding: 8px 18px; font-size: 1rem; }
.bc-nav__signin { display: inline-flex; align-items: center; min-height: 44px; margin-right: 10px; color: var(--bc-text-secondary); text-decoration: none; font: 500 1.0625rem/1.5 var(--bc-font-sans); }
.bc-nav__signin:hover { color: var(--bc-text); text-decoration: underline; }
.bc-nav__toggle { display: none; min-width: 44px; min-height: 44px; margin-left: auto; padding: 0 10px; background: transparent; border: 1.5px solid var(--bc-border-strong); border-radius: var(--bc-radius); color: var(--bc-text); font: 600 1rem/1.5 var(--bc-font-sans); }
/* below 1280px the full nav no longer fits on one line (content-fit, §4; with Fulfill and Contact it needs 1264px, measured on
   DISPATCH B 340 / W-334-2): the menu trigger takes over from 1279px down; the header stays 84px until the phone height at 760 */
@media (max-width: 79.9375rem) {
  .bc-nav__row { gap: 10px; flex-wrap: wrap; }
  .bc-nav__row > .bc-brand { margin-right: auto; }
  .bc-nav__demo { padding: 8px 14px; font-size: .9375rem; min-height: 44px; }
  .bc-nav__toggle { margin-left: auto; min-width: 123px; justify-content: center; }   /* under Book a Demo, right-aligned, same width (c1455 §D 3) */
  .bc-nav__toggle { display: inline-flex; align-items: center; }
  .bc-nav__links, .bc-nav__actions { display: none; }
  .bc-nav[data-open="true"] .bc-nav__links { display: flex; flex-direction: column; gap: 0; width: 100%; margin: 0; padding: 8px 0 0; border-top: 1px solid var(--bc-border); }
  .bc-nav[data-open="true"] .bc-nav__links a { width: 100%; min-height: 48px; }
  .bc-nav[data-open="true"] .bc-nav__phone { display: block; }
  .bc-nav[data-open="true"] .bc-nav__actions { display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: 10px; padding: 12px 0 20px; }
  .bc-nav[data-open="true"] .bc-nav__signin { margin: 0; min-height: 48px; }
}
/* Signed-in visitors see no Book a Demo anywhere (the Founder c1498; DISPATCH B 421 item 1): one rule for the shared header
   (.bc-nav__demo), the shared footer (the Company group's entry, data-bc-demo) and the hand-written legacy navs (.nav-demo).
   The shared header's and footer's scripts put data-bc-signed-in="true" on <html> when the saved sign-in token (localStorage
   bc_token, the portal pages' own session) is present and not expired; sign-in itself is unchanged. !important beats the legacy
   pages' own phone-width .nav-demo rules. Signed-out pages are untouched: no attribute, no rule.
   DISPATCH B 422 (the Founder c1501): the same rule also hides every in-page "Book a demo" / "Book a call" link, which all point at
   /contact?intent=demo (Home hero, How it works, How scoring works, Fulfill, Pricing's Enterprise card and close, /contact's route
   line), with no per-page edit. */
html[data-bc-signed-in="true"] .bc-nav__demo, html[data-bc-signed-in="true"] .nav-demo, html[data-bc-signed-in="true"] [data-bc-demo], html[data-bc-signed-in="true"] a[href="/contact?intent=demo"] { display: none !important; }
/* /contact's route line ("Want to see the product? Book a demo.") goes with its link rather than leaving "Want to see the product? ."
   Its own rule, so a browser without :has() still applies the line above. */
html[data-bc-signed-in="true"] p:has(> a[href="/contact?intent=demo"]:only-child) { display: none !important; }
@media (max-width: 47.5rem) {
  .bc-nav__row { min-height: var(--bc-nav-height-mobile); }
  .bc-nav__row .bc-brand img { height: 28px; }
}

/* section rhythm (§4): 112px desktop / 64px phone; hero starts 56px / 28px below the nav */
.bc-section { padding-block: var(--bc-section-padding); }
.bc-section--hero { padding-block: 56px 0; }
@media (max-width: 47.5rem) { .bc-section { padding-block: var(--bc-section-padding-mobile); } .bc-section--hero { padding-block: 28px 0; } }

/* navy chapter: full-bleed, inherits the navy roles (tokens.css [data-bc-surface="navy"]) */
.bc-chapter { background: var(--bc-bg); color: var(--bc-text); }
.bc-chapter .bc-type-chapter { max-width: 16ch; margin: 0; }

/* coverage statistic: metric figure over a rule and its label (Home sample .cov) */
.bc-stat { border-top: 2px solid var(--bc-text); padding-top: 12px; min-width: 0; container-type: inline-size; }
.bc-stat__n { display: block; font-size: var(--bc-type-metric); line-height: var(--bc-leading-metric); font-weight: var(--bc-weight-metric); letter-spacing: var(--bc-tracking-metric); font-variant-numeric: tabular-nums; }
.bc-stat__label { display: block; margin-top: 6px; font-size: 1.1875rem; color: var(--bc-text-secondary); }
.bc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
@media (max-width: 47.5rem) { .bc-stats { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
/* W-P1-3: in one column a figure never grows wider than the column at large text sizes (17.3cqi fits it from 320 px, so the default size is unchanged) */
@media (max-width: 47.5rem) { .bc-stat__n { font-size: min(var(--bc-type-metric), 17.3cqi); } }

/* the "ask" link: ink underline link style used by Ask about my market (Home sample .ask) */
.bc-ask { display: inline-block; margin-top: 26px; font-weight: 600; color: var(--bc-link); text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.bc-ask:hover { color: var(--bc-link-hover); }

/* assurance line with the check mark in the brand colour, never colour alone (the text carries the meaning) */
.bc-assure { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 22px; font-size: 1rem; color: var(--bc-text-secondary); }
.bc-assure span::before { content: "✓ "; color: var(--bc-brand); font-weight: 700; }

/* eyebrow: normal case, 600, no tracking (§3: no letter-spaced uppercase eyebrows) */
.bc-eyebrow { display: block; font: 600 1rem/1.5 var(--bc-font-sans); color: var(--bc-text-secondary); margin-bottom: 8px; }

/* the shared footer (D8; brand-system §8): navy, the dark logo, five groups, the two legal lines; one source, assets/brand/footer.html */
.bc-footer { background: var(--bc-bg); color: var(--bc-text-secondary); font-size: 1rem; line-height: 1.5; }
.bc-footer .bc-footer-grid { padding-block: 72px 48px; }
.bc-footer-brand .bc-brand { color: var(--bc-text); }
.bc-footer-tag { max-width: 17em; margin: 16px 0 0; font-size: 1.125rem; color: var(--bc-text-secondary); }
.bc-footer-group { min-width: 0; }
.bc-footer-group summary { list-style: none; display: flex; align-items: center; justify-content: space-between; color: var(--bc-text); }
.bc-footer-group summary::-webkit-details-marker { display: none; }
.bc-footer-group summary::after { content: ""; width: 10px; height: 10px; border: solid var(--bc-text-muted); border-width: 0 2px 2px 0; transform: rotate(45deg); margin: 0 6px 4px 0; display: none; }
.bc-footer-group[open] summary::after { transform: rotate(225deg); margin-bottom: -4px; }
.bc-footer-group ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.bc-footer-group a { text-decoration: none; }
.bc-footer-group a:hover { color: var(--bc-text); text-decoration: underline; }
.bc-footer-legal p { margin: 0; }
.bc-footer-legal p + p { margin-top: 4px; }
@media (max-width: 71.25rem) { .bc-footer-brand { grid-column: 1 / -1; } }
@media (max-width: 47.9375rem) {
  .bc-footer .bc-footer-grid { gap: 0; padding-block: 48px 24px; }
  .bc-footer-brand { padding-bottom: 24px; }
  .bc-footer-group { border-top: 1px solid var(--bc-border); }
  .bc-footer-group:last-child { border-bottom: 1px solid var(--bc-border); }
  .bc-footer-group summary { cursor: pointer; }
  .bc-footer-group summary::after { display: inline-block; }
  .bc-footer-group ul { padding: 0 0 16px; }
  .bc-footer-group a { width: 100%; }
}