/*
 * getbillabee.com public site styles: landing page, privacy notice, 404 and
 * the unsubscribe pages rendered by functions/api/unsubscribe.js.
 *
 * The public site follows site/DESIGN.md (decision of 10 October 2026), not
 * the app's canvas tokens: full-bleed tiles that alternate light and dark,
 * the system font, one interactive colour and no decorative shadows or
 * gradients. The look is fixed; it does not follow the visitor's dark mode.
 * Token names below match the keys in site/DESIGN.md.
 *
 * Two values go beyond that document, which leaves form errors undefined:
 * --bb-danger, and --bb-ink-muted-48 as the text-field border (the documented
 * 8% hairline does not reach 3:1 against white).
 */

:root {
  color-scheme: light;
  --bb-primary: #0066cc;
  --bb-primary-focus: #0071e3;
  --bb-primary-on-dark: #2997ff;
  --bb-ink: #1d1d1f;
  --bb-on-dark: #ffffff;
  --bb-body-muted: #cccccc;
  --bb-ink-muted-80: #333333;
  --bb-ink-muted-48: #7a7a7a;
  --bb-hairline: #e0e0e0;
  --bb-canvas: #ffffff;
  --bb-parchment: #f5f5f7;
  --bb-tile-1: #272729;
  --bb-tile-3: #252527;
  --bb-black: #000000;
  --bb-danger: #b3261e;

  /* Text roles. Dark tiles redefine these three, so components need no dark variants. */
  --bb-text: var(--bb-ink);
  --bb-text-soft: var(--bb-ink-muted-80);
  --bb-link: var(--bb-primary);

  --bb-radius-sm: 8px;
  --bb-radius-lg: 18px;
  --bb-radius-pill: 9999px;
  --bb-space-xxs: 4px;
  --bb-space-xs: 8px;
  --bb-space-sm: 12px;
  --bb-space-md: 17px;
  --bb-space-lg: 24px;
  --bb-space-xl: 32px;
  --bb-space-xxl: 48px;
  --bb-space-section: 80px;
  --bb-target: 44px;
  --bb-content-max: 980px;
  --bb-subnav-height: 52px;

  /* Resolves to SF Pro on Apple devices and the platform face elsewhere; no web font is loaded. */
  --bb-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

/* Component display rules must not defeat the hidden attribute. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bb-canvas);
  color: var(--bb-text);
  font: 400 17px/1.47 var(--bb-font);
  letter-spacing: -0.374px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0 0 var(--bb-space-md); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--bb-link); text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--bb-primary-focus);
  outline-offset: 2px;
}

/* In-page links land below the sticky sub-nav. */
[id] { scroll-margin-top: calc(var(--bb-subnav-height) + var(--bb-space-md)); }

.bb-skip {
  position: absolute;
  left: var(--bb-space-md);
  top: -100px;
  z-index: 10;
  padding: var(--bb-space-sm) var(--bb-space-md);
  background: var(--bb-canvas);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-radius-sm);
}
.bb-skip:focus { top: var(--bb-space-md); }

.bb-wrap {
  width: 100%;
  max-width: var(--bb-content-max);
  margin: 0 auto;
  padding: 0 var(--bb-space-lg);
}
/* Keeps the form card at least 300 px wide on a 390 px phone, the minimum for the full-width Turnstile check. */
@media (max-width: 640px) { .bb-wrap { padding: 0 16px; } }

/* ---------- Buttons ---------- */

.bb-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--bb-target);
  padding: 10px 21px;
  border: 1px solid var(--bb-primary);
  border-radius: var(--bb-radius-pill);
  background: var(--bb-primary);
  color: var(--bb-on-dark);
  font: 400 17px/22px var(--bb-font);
  letter-spacing: -0.374px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .1s ease-out;
}
.bb-button:active { transform: scale(.95); }
@media (prefers-reduced-motion: reduce) { .bb-button { transition: none; } }
.bb-button[disabled] {
  background: var(--bb-hairline);
  border-color: var(--bb-hairline);
  color: var(--bb-ink-muted-48);
  cursor: not-allowed;
  transform: none;
}
.bb-button--secondary { background: transparent; border-color: var(--bb-link); color: var(--bb-link); }
.bb-button--utility { min-height: 32px; padding: 5px 14px; font-size: 14px; line-height: 18px; letter-spacing: -0.224px; }
@media (max-width: 833px) { .bb-button--utility { min-height: var(--bb-target); } }
.bb-button--block { width: 100%; }

/* ---------- Navigation ---------- */

.bb-globalnav { background: var(--bb-black); color: var(--bb-on-dark); }
.bb-globalnav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-space-md);
  height: 44px;
}
.bb-logo { display: inline-flex; align-items: center; min-height: var(--bb-target); color: inherit; }
.bb-logo svg { display: block; width: 92px; height: auto; }
.bb-globalnav__links { display: none; gap: var(--bb-space-lg); }
.bb-globalnav__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--bb-target);
  color: var(--bb-on-dark);
  font-size: 12px;
  line-height: 1;
  letter-spacing: -0.12px;
  text-decoration: none;
}
@media (min-width: 834px) { .bb-globalnav__links { display: flex; } }

.bb-subnav {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(245, 245, 247, .8);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.bb-subnav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-space-sm);
  height: var(--bb-subnav-height);
}
.bb-subnav__title { margin: 0; font-size: 21px; font-weight: 600; line-height: 1.19; letter-spacing: 0.231px; }
@media (max-width: 640px) { .bb-subnav__title { font-size: 17px; letter-spacing: -0.374px; } }
@media (max-width: 419px) { .bb-wide-only { display: none; } }

/* ---------- Tiles ---------- */

/* Full-bleed sections. The change of surface is the divider: no borders, no radius. */
.bb-tile { padding: var(--bb-space-section) 0; background: var(--bb-canvas); color: var(--bb-text); text-align: center; }
.bb-tile--parchment { background: var(--bb-parchment); }
.bb-tile--dark, .bb-tile--dark-3 {
  --bb-text: var(--bb-on-dark);
  --bb-text-soft: var(--bb-body-muted);
  --bb-link: var(--bb-primary-on-dark);
  background: var(--bb-tile-1);
}
.bb-tile--dark-3 { background: var(--bb-tile-3); }
@media (max-width: 640px) { .bb-tile { padding: var(--bb-space-xxl) 0; } }

.bb-tile h1 { font-size: 56px; font-weight: 600; line-height: 1.07; letter-spacing: -0.28px; }
.bb-tile h2 { font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: 0; }
@media (max-width: 1068px) { .bb-tile h1 { font-size: 40px; line-height: 1.1; letter-spacing: 0; } }
@media (max-width: 640px) { .bb-tile h1, .bb-tile h2 { font-size: 34px; } }
@media (max-width: 419px) { .bb-tile h1, .bb-tile h2 { font-size: 28px; line-height: 1.14; } }

.bb-lead {
  max-width: 30em;
  margin: var(--bb-space-md) auto 0;
  color: var(--bb-text-soft);
  font-size: 24px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0;
}
@media (max-width: 640px) { .bb-lead { font-size: 21px; font-weight: 400; line-height: 1.38; } }

.bb-tile__head { margin-bottom: var(--bb-space-xxl); }
.bb-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--bb-space-md); margin-top: var(--bb-space-xl); }

/* The life-of-an-invoice strip: text-first chips, the last one marked as the destination. */
.bb-journey { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--bb-space-sm); margin-top: var(--bb-space-xxl); }
.bb-journey li {
  padding: 10px 16px;
  border: 2px solid var(--bb-hairline);
  border-radius: var(--bb-radius-pill);
  background: var(--bb-canvas);
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: -0.224px;
}
.bb-journey li:last-child { border-color: var(--bb-primary-focus); }

.bb-grid-2, .bb-grid-3 { display: grid; gap: var(--bb-space-xxl); text-align: left; }
@media (min-width: 834px) {
  .bb-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bb-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bb-space-xl); }
}

/* ---------- Cards and forms ---------- */

.bb-card {
  background: var(--bb-canvas);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-radius-lg);
  padding: var(--bb-space-lg);
  text-align: left;
}

.bb-join { align-items: start; }
.bb-join .bb-lead { margin-left: 0; }

.bb-ticks { display: grid; gap: var(--bb-space-sm); margin-top: var(--bb-space-lg); }
.bb-ticks li { display: flex; gap: var(--bb-space-sm); align-items: flex-start; }
.bb-ticks svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--bb-text-soft); }

.bb-card form { display: grid; gap: var(--bb-space-lg); }
.bb-field { display: grid; gap: var(--bb-space-xs); }
.bb-label, .bb-legend { font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: -0.224px; }
.bb-input {
  width: 100%;
  height: var(--bb-target);
  padding: 0 20px;
  border: 1px solid var(--bb-ink-muted-48);
  border-radius: var(--bb-radius-pill);
  background: var(--bb-canvas);
  color: var(--bb-ink);
  font: 400 17px/1.47 var(--bb-font);
  letter-spacing: -0.374px;
}
.bb-input[aria-invalid="true"] { border-color: var(--bb-danger); }

.bb-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.bb-legend { padding: 0; margin-bottom: var(--bb-space-xs); }
.bb-choices { display: grid; gap: var(--bb-space-xs); }
.bb-choice {
  display: flex;
  align-items: center;
  gap: var(--bb-space-sm);
  min-height: var(--bb-target);
  padding: 8px 16px;
  border: 2px solid var(--bb-hairline);
  border-radius: var(--bb-radius-pill);
  background: var(--bb-canvas);
  cursor: pointer;
}
.bb-choice:has(input:checked) { border-color: var(--bb-primary-focus); }
.bb-choice input { width: 20px; height: 20px; margin: 0; accent-color: var(--bb-primary); flex: none; }
.bb-fieldset[aria-invalid="true"] .bb-choice { border-color: var(--bb-danger); }

.bb-error { color: var(--bb-danger); font-size: 14px; line-height: 1.43; letter-spacing: -0.224px; }
.bb-error:empty { display: none; }
.bb-help { color: var(--bb-ink-muted-80); font-size: 14px; line-height: 1.43; letter-spacing: -0.224px; }

.bb-turnstile { min-height: 65px; }

/* Honeypot: off-screen for people, still in the DOM for naive bots. */
.bb-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.bb-callout {
  padding: var(--bb-space-sm) var(--bb-space-md);
  border-radius: var(--bb-radius-sm);
  background: var(--bb-parchment);
  color: var(--bb-danger);
  font-weight: 600;
}
.bb-callout--info { color: var(--bb-ink); font-weight: 400; }
.bb-callout:empty { display: none; }
noscript .bb-callout { margin-top: var(--bb-space-lg); }

.bb-success { padding: var(--bb-space-lg); border-radius: var(--bb-radius-sm); background: var(--bb-parchment); }
.bb-success h3 { margin-bottom: var(--bb-space-xs); font-size: 21px; font-weight: 600; line-height: 1.19; letter-spacing: 0.231px; }
.bb-success h3:focus { outline: none; }
.bb-success h3:focus-visible { outline: 2px solid var(--bb-primary-focus); outline-offset: 2px; }

/* ---------- Section content ---------- */

.bb-audience h3, .bb-pillar h3 { font-size: 21px; font-weight: 600; line-height: 1.19; letter-spacing: 0.231px; }
.bb-audience__tag {
  margin: 0 0 var(--bb-space-xs);
  color: var(--bb-text-soft);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.29;
  letter-spacing: -0.224px;
}

.bb-pillar { text-align: center; }
.bb-pillar svg { display: block; width: 44px; height: 44px; margin: 0 auto var(--bb-space-md); }
.bb-pillar p { margin-top: var(--bb-space-xs); color: var(--bb-text-soft); }

.bb-not { display: grid; gap: var(--bb-space-lg); }
@media (min-width: 834px) { .bb-not { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bb-not strong { display: block; margin-bottom: var(--bb-space-xxs); font-weight: 600; line-height: 1.24; }

/* ---------- Questions ---------- */

.bb-faq { max-width: 44em; margin: 0 auto; text-align: left; border-top: 1px solid var(--bb-hairline); }
.bb-faq details { border-bottom: 1px solid var(--bb-hairline); }
.bb-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-space-sm);
  min-height: 60px;
  padding: var(--bb-space-md) 0;
  font-weight: 600;
  line-height: 1.24;
  cursor: pointer;
  list-style: none;
}
.bb-faq summary::-webkit-details-marker { display: none; }
.bb-faq summary::after {
  content: "+";
  flex: none;
  color: var(--bb-text-soft);
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
}
.bb-faq details[open] summary::after { content: "\2212"; }
.bb-faq details > div { padding: 0 var(--bb-space-xl) var(--bb-space-lg) 0; color: var(--bb-text-soft); }

/* ---------- Footer ---------- */

.bb-footer { padding: 64px 0; background: var(--bb-parchment); color: var(--bb-ink-muted-80); font-size: 12px; line-height: 1.33; letter-spacing: -0.12px; }
@media (max-width: 640px) { .bb-footer { padding: var(--bb-space-xxl) 0; } }
.bb-footer__inner { display: grid; gap: var(--bb-space-md); }
@media (min-width: 834px) { .bb-footer__inner { grid-template-columns: 1fr auto; align-items: start; } }
.bb-footer p { margin-bottom: var(--bb-space-xs); }
.bb-footer__links { display: flex; flex-wrap: wrap; gap: var(--bb-space-xs) var(--bb-space-md); }
.bb-footer__links a { display: inline-flex; align-items: center; min-height: var(--bb-target); }
@media (min-width: 834px) { .bb-footer__links a { min-height: 0; } }

/* ---------- Long-form pages (privacy notice) ---------- */

.bb-prose { max-width: 44em; margin: 0 auto; padding: var(--bb-space-section) 0; }
@media (max-width: 640px) { .bb-prose { padding: var(--bb-space-xxl) 0; } }
.bb-prose h1 { margin-bottom: var(--bb-space-sm); font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: 0; }
@media (max-width: 640px) { .bb-prose h1 { font-size: 34px; } }
.bb-prose h2 { margin: var(--bb-space-xxl) 0 var(--bb-space-sm); font-size: 21px; font-weight: 600; line-height: 1.19; letter-spacing: 0.231px; }
.bb-prose ul { list-style: disc; padding-left: var(--bb-space-lg); margin-bottom: var(--bb-space-md); }
.bb-prose li { margin-bottom: var(--bb-space-xs); }
.bb-prose strong { font-weight: 600; }
.bb-prose__meta { color: var(--bb-ink-muted-80); }

/* ---------- Small standalone pages (404, unsubscribe) ---------- */

.bb-simple { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: var(--bb-space-md); background: var(--bb-parchment); }
.bb-simple__card {
  width: 100%;
  max-width: 480px;
  padding: var(--bb-space-xl);
  background: var(--bb-canvas);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-radius-lg);
}
.bb-simple__brand { font-size: 21px; font-weight: 600; line-height: 1.19; letter-spacing: 0.231px; }
.bb-simple__brand a { color: var(--bb-ink); text-decoration: none; }
.bb-simple h1 { margin: var(--bb-space-md) 0; font-size: 34px; font-weight: 600; line-height: 1.1; letter-spacing: 0; }
.bb-simple form { margin: var(--bb-space-lg) 0; }