/* ==========================================================================
   Backcountry Signal — shared design system (see DESIGN.md)
   Dark "night/off-grid" surfaces for brand moments; warm paper surfaces for
   reading and tasks. Signal orange is the only attention color — rationed.
   ========================================================================== */

:root {
  /* Dark surfaces */
  --bs-ink-deep:   #020907;  /* hero image underlay */
  --bs-ink:        #06110E;  /* primary dark background */
  --bs-ink-band:   #0B1C17;  /* gradient partner for dark CTA bands */
  --bs-card-dark:  #0F221C;  /* dark card on any surface */
  --bs-input-dark: #0A1411;  /* dark inputs and phone screens */

  /* Light surfaces */
  --bs-paper:      #FAF5EB;
  --bs-paper-alt:  #F3ECDD;
  --bs-card-light: #FFFDF7;

  /* Text on dark */
  --bs-td-primary:   #F7F3EA;
  --bs-td-body:      #C9D3CC;
  --bs-td-secondary: #A9B5AE;
  --bs-td-muted:     #8C9B94;
  --bs-td-faint:     #5E6E66;

  /* Text on light */
  --bs-tl-primary:   #22312B;
  --bs-tl-body:      #3A4A43;
  --bs-tl-secondary: #66746C;
  --bs-tl-faint:     #8B958D;

  /* Accent + semantic */
  --bs-accent:      #FF7A00;
  --bs-accent-deep: #D96206;
  --bs-green:       #1F8A5B;
  --bs-err:         #FF9B4D;

  /* Status text, split by the surface it sits on. One green cannot pass WCAG
     AA on both the cream cards and the dark provider card: #1F8A5B is 4.26:1
     on cream (fails 4.5:1 for small text) and 3.83:1 on the dark card. These
     four are all >=5:1 on their intended surface — use the *-light pair on
     cream/paper and the *-dark pair inside .bs-card--dark/--featured. */
  --bs-ok-light:    #187449;  /* 5.3:1+ on cream */
  --bs-warn-light:  #A64A00;  /* 5.4:1+ on cream */
  --bs-ok-dark:     #4CC38A;  /* 7.5:1 on the dark card */
  --bs-err-dark:    #FF8A70;  /* 7.2:1 on the dark card */
  --bs-warn-dark:   #FF9B4D;  /* 7.9:1 on the dark card (same as --bs-err) */

  /* Borders */
  --bs-line-light:  rgba(34, 49, 43, 0.14);
  --bs-line-dark:   rgba(140, 155, 148, 0.16);
  --bs-line-dark-strong: rgba(140, 155, 148, 0.4);
  --bs-line-accent: rgba(255, 122, 0, 0.45);

  /* Type — one clean family everywhere. --bs-font-mono is kept as an alias so
     existing rules keep working, but it now renders Manrope (the old IBM Plex
     Mono terminal look is retired); numbers stay aligned via tabular-nums. */
  --bs-font-display: 'Space Grotesk', 'Segoe UI', -apple-system, sans-serif;
  --bs-font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bs-font-mono: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Semantic red for true error states (admin health, failed sends) */
  --bs-red: #B83C26;

  /* Layout */
  --bs-wrap-marketing: 1160px;
  --bs-wrap-app: 1080px;
  --bs-pad-x: clamp(20px, 5vw, 56px);
  --bs-pad-section: clamp(76px, 8.5vw, 120px);
  --bs-card-pad: clamp(22px, 2.4vw, 30px);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Nothing may widen the page: one overflowing element otherwise lets mobile
   Safari pinch-zoom out to a broken canvas beyond the layout. (hidden is the
   fallback where clip is unsupported; clip avoids creating a scroll box.) */
html { overflow-x: hidden; overflow-x: clip; }

body {
  font-family: var(--bs-font-body);
  background: var(--bs-ink);
  color: var(--bs-td-body);
  font-size: 16px;
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Text selection: solid dark green with light text (8.2:1). The old pale
   translucent orange left white text nearly unreadable, and its blended
   background changed per surface. A universal rule also covers links, table
   cells and inputs, so no nested element keeps its own low-contrast color
   while selected. */
::selection { background: #16543A; color: #FAF5EB; }
::-moz-selection { background: #16543A; color: #FAF5EB; }

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--bs-font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
p { text-wrap: pretty; }

a { color: var(--bs-accent); text-decoration: none; transition: color 0.18s ease; }
a:hover { color: var(--bs-td-primary); }

/* ── Surfaces ─────────────────────────────────────────────────────────── */
.bs-dark  { background: var(--bs-ink); color: var(--bs-td-body); }
.bs-dark h1, .bs-dark h2, .bs-dark h3, .bs-dark h4 { color: var(--bs-td-primary); }

.bs-light { background: var(--bs-paper); color: var(--bs-tl-body); }
.bs-light h1, .bs-light h2, .bs-light h3, .bs-light h4 { color: var(--bs-tl-primary); }
.bs-light a:hover { color: var(--bs-tl-primary); }

.bs-band-alt { background: var(--bs-paper-alt); }

/* Topo texture for light surfaces — !important beats inline background: */
.bs-topo {
  background-image: url('/static/img/topo-light.png') !important;
  background-size: 800px 800px !important;
}

/* Dark CTA band */
.bs-cta-band { background: linear-gradient(180deg, var(--bs-ink-band), var(--bs-ink)); }

/* ── Wraps & sections ─────────────────────────────────────────────────── */
.bs-wrap { max-width: var(--bs-wrap-marketing); margin: 0 auto; padding-left: var(--bs-pad-x); padding-right: var(--bs-pad-x); }
.bs-wrap-app { max-width: var(--bs-wrap-app); margin: 0 auto; padding-left: var(--bs-pad-x); padding-right: var(--bs-pad-x); }
.bs-section { padding-top: var(--bs-pad-section); padding-bottom: var(--bs-pad-section); }

/* ── Eyebrow / kicker — Space Grotesk, never mono ─────────────────────── */
.bs-eyebrow {
  display: block;
  font-family: var(--bs-font-display);
  font-weight: 600;
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--bs-accent);
  margin-bottom: 14px;
}
.bs-light .bs-eyebrow, .bs-band-alt .bs-eyebrow { color: var(--bs-accent-deep); }

.bs-h2 { font-size: clamp(28px, 3.4vw, 44px); }
.bs-mono { font-family: var(--bs-font-mono); }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.bs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--bs-font-body);
  font-weight: 700;
  font-size: 15.5px;
  padding: 15px 26px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.bs-btn-primary { background: var(--bs-accent); color: var(--bs-ink); }
.bs-btn-primary:hover { background: var(--bs-td-primary); color: var(--bs-ink); }

.bs-btn-secondary { background: transparent; border-color: var(--bs-line-dark-strong); color: var(--bs-td-body); }
.bs-btn-secondary:hover { border-color: var(--bs-accent); color: var(--bs-accent); }
.bs-light .bs-btn-secondary, .bs-band-alt .bs-btn-secondary {
  border-color: rgba(34, 49, 43, 0.25); color: var(--bs-tl-primary);
}
.bs-light .bs-btn-secondary:hover, .bs-band-alt .bs-btn-secondary:hover {
  border-color: var(--bs-accent-deep); color: var(--bs-accent-deep);
}
/* dark cards sit on light surfaces too — dark-card context wins */
.bs-card--dark .bs-btn-secondary, .bs-card--featured .bs-btn-secondary {
  border-color: var(--bs-line-dark-strong); color: var(--bs-td-body);
}
.bs-card--dark .bs-btn-secondary:hover, .bs-card--featured .bs-btn-secondary:hover {
  border-color: var(--bs-accent); color: var(--bs-accent);
}
.bs-btn-block { width: 100%; }

/* Signal-bars ornament on primary CTAs: uneven "searching" bars at rest that
   lock into a rising full-signal pattern on hover (v3 spec) */
.bs-sig-bars { display: inline-flex; align-items: flex-end; gap: 2.5px; height: 17px; }
.bs-sig-bars i {
  width: 3px; border-radius: 1px; background: rgba(6, 17, 14, 0.5);
  transition: height 0.28s cubic-bezier(.34, 1.56, .64, 1), background 0.28s;
}
.bs-sig-bars i:nth-child(1) { height: 5px; }
.bs-sig-bars i:nth-child(2) { height: 9px; }
.bs-sig-bars i:nth-child(3) { height: 6px; background: rgba(6, 17, 14, 0.35); }
.bs-sig-bars i:nth-child(4) { height: 8px; background: rgba(6, 17, 14, 0.35); }
.bs-btn:hover .bs-sig-bars i { background: var(--bs-ink); }
.bs-btn:hover .bs-sig-bars i:nth-child(1) { height: 5px; }
.bs-btn:hover .bs-sig-bars i:nth-child(2) { height: 9px; }
.bs-btn:hover .bs-sig-bars i:nth-child(3) { height: 13px; }
.bs-btn:hover .bs-sig-bars i:nth-child(4) { height: 17px; }

/* ── Cards ────────────────────────────────────────────────────────────── */
.bs-card {
  background: var(--bs-card-light);
  border: 1px solid var(--bs-line-light);
  border-radius: 16px;
  padding: var(--bs-card-pad);
}
.bs-card-title {
  font-family: var(--bs-font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--bs-tl-primary);
}
.bs-card--dark {
  background: var(--bs-card-dark);
  border-color: var(--bs-line-dark);
  color: var(--bs-td-body);
}
.bs-card--dark .bs-card-title, .bs-card--dark h1, .bs-card--dark h2, .bs-card--dark h3 { color: var(--bs-td-primary); }
.bs-card--featured {
  position: relative;
  background: var(--bs-card-dark);
  border-color: var(--bs-line-accent);
  box-shadow: 0 12px 44px -18px rgba(255, 122, 0, 0.35);
  color: var(--bs-td-body);
}
.bs-card--featured .bs-card-title { color: var(--bs-td-primary); }

/* Floating badge pill on a featured card */
.bs-badge {
  position: absolute; top: 0; left: 24px; transform: translateY(-50%);
  font-family: var(--bs-font-mono);
  font-weight: 600; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap;
  padding: 5px 12px; border-radius: 999px;
  background: var(--bs-accent); color: var(--bs-ink);
}
.bs-badge--neutral { background: var(--bs-paper); color: var(--bs-tl-primary); }

.bs-lift { transition: transform 0.28s cubic-bezier(.22, 1, .36, 1), box-shadow 0.28s ease; }
.bs-lift:hover { transform: translateY(-4px); box-shadow: 0 18px 44px -22px rgba(34, 49, 43, 0.35); }

/* ── Feature bullets: mono — in accent ────────────────────────────────── */
.bs-features { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.bs-features li { display: flex; gap: 10px; font-size: 14.5px; }
.bs-features li::before {
  content: '—';
  font-family: var(--bs-font-mono);
  color: var(--bs-accent);
  flex-shrink: 0;
}
.bs-light .bs-features li::before, .bs-band-alt .bs-features li::before { color: var(--bs-accent-deep); }

/* ── Pills / status chips ─────────────────────────────────────────────── */
.bs-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--bs-font-mono);
  font-weight: 600; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--bs-line-light);
  background: var(--bs-paper-alt); color: var(--bs-tl-primary);
}
.bs-pill::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--bs-accent);
}
.bs-pill--ok { color: var(--bs-green); }
.bs-pill--ok::before { background: var(--bs-green); }
.bs-pill--err { color: var(--bs-accent-deep); }
.bs-pill--err::before { background: var(--bs-err); }
.bs-dark .bs-pill, .bs-card--dark .bs-pill, .bs-cta-band .bs-pill {
  background: rgba(140, 155, 148, 0.08); border-color: var(--bs-line-dark); color: var(--bs-td-body);
}
.bs-band-alt .bs-pill { background: var(--bs-card-light); }

/* ── Hairline rows (lists, steps, activity) ───────────────────────────── */
.bs-rows { list-style: none; }
.bs-rows > * { border-top: 1px solid var(--bs-line-light); padding: 14px 0; }
.bs-rows > *:first-child { border-top: none; }
.bs-card--dark .bs-rows > *, .bs-dark .bs-rows > * { border-top-color: var(--bs-line-dark); }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.bs-faq details { border-top: 1px solid var(--bs-line-light); }
.bs-faq details:last-child { border-bottom: 1px solid var(--bs-line-light); }
.bs-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--bs-font-display); font-weight: 600; font-size: 17px;
  color: var(--bs-tl-primary);
  padding: 18px 0; cursor: pointer; list-style: none;
}
.bs-faq summary::-webkit-details-marker { display: none; }
.bs-faq summary::after {
  content: '+';
  color: var(--bs-accent-deep);
  font-family: var(--bs-font-display); font-weight: 500; font-size: 22px; line-height: 1;
  transition: transform 0.25s cubic-bezier(.22, 1, .36, 1);
  flex-shrink: 0;
}
.bs-faq details[open] summary::after { transform: rotate(45deg); }
.bs-faq details > p { padding: 0 0 18px; font-size: 15px; max-width: 62ch; }

/* ── Forms ────────────────────────────────────────────────────────────── */
.bs-form label {
  display: block;
  font-family: var(--bs-font-body);
  font-weight: 700; font-size: 11.5px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--bs-td-muted);
  margin: 18px 0 7px;
}
.bs-form input[type=text], .bs-form input[type=email], .bs-form input[type=password],
.bs-form input[type=tel], .bs-form input[type=number] {
  width: 100%;
  font-family: var(--bs-font-body);
  /* 16px is the iOS Safari auto-zoom threshold: any focused input below it
     makes Safari force-zoom the whole page in (e.g. on a failed native
     validation focusing this field), leaving the page pannable until the
     user manually zooms back out. Keep this at 16px, never smaller. */
  font-size: 16px;
  color: var(--bs-td-primary);
  background: var(--bs-input-dark);
  border: 1px solid var(--bs-line-dark);
  border-radius: 10px;
  padding: 13px 15px;
  outline: none;
  transition: border-color 0.18s ease;
}
.bs-form input::placeholder { color: var(--bs-td-faint); }
.bs-form input:focus { border-color: var(--bs-accent); }
/* Small helper line under a field (e.g. the US-only phone note). */
.bs-field-hint {
  margin: 7px 1px 0;
  font-family: var(--bs-font-body);
  font-size: 12.5px; line-height: 1.5;
  color: var(--bs-td-muted);
}

.bs-error {
  font-family: var(--bs-font-body);
  font-size: 13.5px; font-weight: 600;
  color: var(--bs-err);
  border: 1px solid rgba(255, 155, 77, 0.35);
  border-radius: 10px;
  background: rgba(255, 122, 0, 0.06);
  padding: 11px 14px;
  margin-bottom: 6px;
}

.bs-consent,
.bs-form label.bs-consent {
  display: flex; gap: 10px; align-items: flex-start;
  font-family: var(--bs-font-body);
  font-weight: 400; font-size: 11.5px; line-height: 1.55;
  letter-spacing: 0; text-transform: none;
  color: var(--bs-td-faint);
  margin: 18px 0 0;
}
.bs-consent input { margin-top: 3px; accent-color: var(--bs-accent); width: auto; flex-shrink: 0; }
.bs-consent a { color: var(--bs-td-secondary); text-decoration: underline; }
.bs-consent a:hover { color: var(--bs-td-primary); }

.bs-microcopy {
  font-family: var(--bs-font-mono);
  font-size: 11.5px; letter-spacing: 0.02em;
  color: var(--bs-td-faint);
  text-align: center;
  margin-top: 14px;
}

/* ── Dark nav strip (marketing) ───────────────────────────────────────── */
.bs-nav {
  background: rgba(6, 17, 14, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bs-line-dark);
  position: sticky; top: 0; z-index: 100;
}
.bs-nav-inner {
  max-width: var(--bs-wrap-marketing); margin: 0 auto;
  padding: 0 var(--bs-pad-x);
  height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.bs-logo {
  font-family: var(--bs-font-display);
  font-weight: 700; font-size: 18px; letter-spacing: -0.01em;
  color: var(--bs-td-primary);
  display: inline-flex; align-items: center; gap: 9px;
  white-space: nowrap;
}
.bs-logo:hover { color: var(--bs-td-primary); }
.bs-logo svg { width: 26px; height: 26px; flex-shrink: 0; }
/* Primary horizontal logo (icon + wordmark baked into one image) — sized by
   height, width follows its own aspect ratio. */
.bs-logo img { height: 30px; width: auto; flex-shrink: 0; }
.bs-logo-footer img { height: 20px; }
.bs-logo .accent { color: var(--bs-accent); }
/* Compact emblem-only mark — shown in place of the wide wordmark on narrow
   screens where the full horizontal logo gets squished against the nav meta. */
.bs-logo-mark { display: none; height: 30px; width: auto; flex-shrink: 0; }
.bs-nav-links { display: flex; align-items: center; gap: 26px; }
.bs-nav-links a { color: var(--bs-td-muted); font-weight: 600; font-size: 14px; }
.bs-nav-links a:hover { color: var(--bs-td-primary); }
.bs-nav .bs-btn { padding: 10px 18px; font-size: 14px; }
.bs-nav-links a.bs-btn-primary { color: var(--bs-ink); }
.bs-nav-links a.bs-btn-primary:hover { color: var(--bs-ink); background: var(--bs-td-primary); }

/* Hamburger + dropdown menu (mobile only) */
.bs-nav-toggle {
  display: none;
  flex-direction: column; justify-content: center; gap: 4.5px;
  width: 42px; height: 42px; padding: 0 10px;
  background: transparent; border: 1px solid var(--bs-line-dark-strong);
  border-radius: 10px; cursor: pointer;
}
.bs-nav-toggle span {
  display: block; height: 2px; border-radius: 2px;
  background: var(--bs-td-primary);
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.menu-open .bs-nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-open .bs-nav-toggle span:nth-child(2) { opacity: 0; }
.menu-open .bs-nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.bs-nav-menu {
  position: absolute; top: 100%; left: 0; right: 0;
  display: flex; flex-direction: column;
}
.bs-nav-menu[hidden] { display: none; }
.bs-nav-menu {
  background: var(--bs-ink);
  border-bottom: 1px solid var(--bs-line-dark);
  padding: 6px var(--bs-pad-x) 14px;
  box-shadow: 0 24px 48px -18px rgba(0, 0, 0, 0.6);
}
.bs-nav-menu a {
  padding: 13px 2px; font-weight: 600; font-size: 15.5px;
  color: var(--bs-td-body);
  border-top: 1px solid var(--bs-line-dark);
}
.bs-nav-menu a:first-child { border-top: none; }
.bs-nav-menu a:hover { color: var(--bs-td-primary); }
.bs-nav-menu a.menu-cta {
  margin-top: 12px; border-top: none;
  padding: 14px 20px; border-radius: 10px;
  color: var(--bs-ink); text-align: center;
}

/* ── Slim app top bar ─────────────────────────────────────────────────── */
.bs-appbar {
  background: var(--bs-ink);
  border-bottom: 1px solid var(--bs-line-dark);
  position: sticky; top: 0; z-index: 100;
}
.bs-appbar-inner {
  max-width: var(--bs-wrap-app); margin: 0 auto;
  padding: 0 var(--bs-pad-x);
  height: 54px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.bs-appbar-meta {
  display: flex; align-items: center; gap: 18px;
  font-family: var(--bs-font-body); font-size: 13px; font-weight: 500;
  color: var(--bs-td-muted);
}
.bs-appbar-meta a { color: var(--bs-td-secondary); font-family: var(--bs-font-body); font-weight: 600; font-size: 13px; }
.bs-appbar-meta a:hover { color: var(--bs-td-primary); }

/* ── Footer ───────────────────────────────────────────────────────────── */
.bs-footer {
  background: var(--bs-ink);
  border-top: 1px solid var(--bs-line-dark);
  margin-top: auto;
  padding: 44px 0 34px;
}
.bs-footer-inner {
  max-width: var(--bs-wrap-marketing); margin: 0 auto;
  padding: 0 var(--bs-pad-x);
  display: flex; flex-direction: column; gap: 22px;
}
.bs-footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; flex-wrap: wrap; }
.bs-footer-blurb { max-width: 34ch; font-size: 14px; color: var(--bs-td-muted); margin-top: 10px; }
.bs-footer-links {
  display: flex; gap: 8px 22px; flex-wrap: wrap;
  font-family: var(--bs-font-mono); font-size: 12px; letter-spacing: 0.02em;
}
.bs-footer-links a { color: var(--bs-td-muted); }
.bs-footer-links a:hover { color: var(--bs-td-primary); }
.bs-footer-legal {
  border-top: 1px solid var(--bs-line-dark);
  padding-top: 20px;
  font-family: var(--bs-font-mono);
  font-size: 11.5px; line-height: 1.9;
  color: var(--bs-td-faint);
}

/* ── Flow screens (onboarding / auth) ─────────────────────────────────── */
.bs-flow {
  min-height: 100vh;
  display: flex; flex-direction: column;
  /* A soft green glow at the top AND the bottom keeps the page from sinking
     into flat black at the fold — the mid-section stays dark, both ends lift. */
  background:
    radial-gradient(ellipse 120% 62% at 50% -16%, rgba(26, 52, 43, 0.95) 0%, transparent 60%),
    radial-gradient(ellipse 120% 58% at 50% 116%, rgba(21, 44, 36, 0.8) 0%, transparent 62%),
    linear-gradient(180deg, #0C1E18 0%, var(--bs-ink) 44%, var(--bs-ink) 58%, #0B1B16 100%);
}
.bs-flow-main {
  flex: 1;
  width: min(480px, 100%);
  margin: 0 auto;
  padding: clamp(28px, 6vh, 64px) 20px 48px;
  display: flex; flex-direction: column; justify-content: center;
}
.bs-flow h1 {
  font-size: clamp(26px, 4.5vw, 36px);
  color: var(--bs-td-primary);
  margin-bottom: 10px;
}
.bs-flow .bs-sub { font-size: 15px; color: var(--bs-td-muted); margin-bottom: 26px; }
.bs-flow .bs-sub strong { color: var(--bs-td-body); font-weight: 600; }

/* Numbered progress dots */
.bs-steps {
  display: flex; align-items: center; justify-content: center; gap: 0;
  margin-bottom: clamp(28px, 5vh, 44px);
}
.bs-step { display: flex; align-items: center; gap: 10px; }
.bs-step .dot {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--bs-font-mono); font-size: 11.5px; font-weight: 600;
  border: 1px solid var(--bs-line-dark-strong);
  color: var(--bs-td-muted);
  flex-shrink: 0;
}
.bs-step .lbl {
  font-family: var(--bs-font-display); font-weight: 600; font-size: 12.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bs-td-muted);
}
.bs-step.is-active .dot { background: var(--bs-accent); border-color: var(--bs-accent); color: var(--bs-ink); }
.bs-step.is-active .lbl { color: var(--bs-td-primary); }
.bs-step.is-done .dot { background: var(--bs-accent); border-color: var(--bs-accent); color: var(--bs-ink); }
.bs-step-rule { width: clamp(18px, 4vw, 38px); height: 1px; background: var(--bs-line-dark-strong); margin: 0 12px; }

.bs-flow-footer {
  padding: 22px 20px calc(24px + env(safe-area-inset-bottom));
  text-align: center;
  font-family: var(--bs-font-mono);
  font-size: 11.5px; line-height: 1.9; letter-spacing: 0.02em;
  color: var(--bs-td-faint);
}
.bs-flow-footer b { color: var(--bs-td-muted); font-weight: 600; }
.bs-flow-footer a { color: var(--bs-td-muted); }

/* ── Simulated phone — signature element ──────────────────────────────── */
.bs-phone {
  width: 290px; aspect-ratio: 290 / 625;
  border-radius: 54px;
  background: linear-gradient(155deg, #39423f, #1a211f 50%, #242c2a);
  padding: 11px;
  box-shadow:
    0 40px 90px -30px rgba(0, 0, 0, 0.85),
    inset 0 1px 1px rgba(247, 243, 234, 0.18);
  position: relative;
}
.bs-phone-screen {
  background: var(--bs-input-dark);
  border-radius: 44px;
  height: 100%;
  overflow: hidden;
  display: flex; flex-direction: column;
  position: relative;
}
.bs-phone-notch {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 86px; height: 22px; border-radius: 12px;
  background: #050b09;
  z-index: 3;
}
.bs-phone-status {
  display: flex; justify-content: space-between; align-items: center;
  padding: 46px 20px 10px;
  font-family: var(--bs-font-mono); font-size: 10px; letter-spacing: 0.06em;
  color: var(--bs-td-muted);
  border-bottom: 1px solid var(--bs-line-dark);
}
.bs-phone-status .sat { display: inline-flex; align-items: center; gap: 5px; color: var(--bs-td-secondary); }
.bs-phone-thread {
  flex: 1;
  padding: 14px 12px 18px;
  display: flex; flex-direction: column; gap: 8px;
  overflow: hidden;
}
.bs-bubble {
  max-width: 84%;
  padding: 9px 13px;
  border-radius: 15px;
  font-size: 13px; line-height: 1.45;
  color: var(--bs-td-primary);
  animation: bsBubble 0.45s cubic-bezier(.22, 1, .36, 1) both;
}
.bs-bubble--user {
  align-self: flex-end;
  background: linear-gradient(160deg, #2E5A46, #264A3A);
  border-bottom-right-radius: 5px;
}
.bs-bubble--assistant {
  align-self: flex-start;
  background: #182B24;
  border-bottom-left-radius: 5px;
  box-shadow: 0 0 22px -4px rgba(255, 122, 0, 0.18);
}
.bs-bubble--stamp {
  align-self: center;
  background: none; padding: 2px 0;
  font-family: var(--bs-font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bs-td-faint);
}
.bs-typing { display: inline-flex; gap: 4px; align-items: center; padding: 12px 14px; }
.bs-typing i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--bs-td-muted); opacity: 0.4;
  animation: bsTyping 1.1s infinite;
}
.bs-typing i:nth-child(2) { animation-delay: 0.18s; }
.bs-typing i:nth-child(3) { animation-delay: 0.36s; }

@keyframes bsBubble {
  from { opacity: 0; transform: translateY(11px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bsTyping {
  0%, 100% { opacity: 0.35; transform: none; }
  45%      { opacity: 1; transform: translateY(-3px); }
}
@keyframes bsIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.bs-in { animation: bsIn 0.45s cubic-bezier(.22, 1, .36, 1) both; }

/* ── Photography ──────────────────────────────────────────────────────── */
.bs-photo {
  border-radius: 16px;
  border: 1px solid var(--bs-line-light);
  overflow: hidden;
}
.bs-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ── Tables (app data) ────────────────────────────────────────────────── */
.bs-table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.bs-table { width: 100%; border-collapse: collapse; }
.bs-table th {
  text-align: left; padding: 10px 10px 10px 0;
  font-family: var(--bs-font-display); font-weight: 600;
  font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bs-tl-secondary);
  border-bottom: 1px solid var(--bs-line-light);
}
.bs-table td {
  padding: 11px 10px 11px 0;
  border-top: 1px solid var(--bs-line-light);
  font-family: var(--bs-font-body); font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  color: var(--bs-tl-body);
}
.bs-table tr:first-child td { border-top: none; }

/* ── Motion opt-out ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bs-lift, .bs-lift:hover { transform: none; transition: none; box-shadow: none; }
  .bs-sig-bars i { transition: none; }
  .bs-bubble, .bs-in { animation: none; }
  .bs-typing i { animation: none; }
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .bs-nav-links a:not(.bs-btn) { display: none; }
  .bs-nav-toggle { display: flex; }
  .bs-nav-links { gap: 10px; }
}
@media (min-width: 861px) {
  .bs-nav-menu { display: none !important; }
}
/* Phones: the top bar is logo + hamburger only. The CTA lives in the hero
   and the menu — a pill in the bar collides with the wordmark on iOS. */
@media (max-width: 640px) {
  .bs-nav-links a.bs-btn { display: none; }
  .bs-eyebrow { font-size: 11px; letter-spacing: 0.08em; margin-bottom: 10px; }
}
/* Small screens: keep the logo + CTA on one row without overflow */
@media (max-width: 520px) {
  .bs-logo { font-size: 14px; gap: 7px; }
  .bs-logo img { height: 24px; }
  .bs-nav-inner { gap: 10px; }
  .bs-nav .bs-btn { padding: 9px 13px; font-size: 12.5px; }
}
/* On phones the wide wordmark gets crushed against the email/nav on the right,
   so swap it for the compact emblem mark. */
@media (max-width: 600px) {
  .bs-logo-full { display: none; }
  .bs-logo-mark { display: block; }
}
/* The app bar (member app + admin console) is ONE row on a phone. It is a
   fixed 54px, so a nav that wraps does not grow it — it spills out of it, which
   is what put "My account" on two lines over the admin console's content. The
   links keep their size and scroll sideways if they ever outgrow the bar; the
   identity label truncates first, because it is the only thing in there that
   is not a control. */
@media (max-width: 640px) {
  .bs-appbar-inner { gap: 10px; }
  .bs-appbar-meta {
    gap: 14px; min-width: 0; font-size: 12.5px;
    overflow-x: auto; scrollbar-width: none;
  }
  .bs-appbar-meta::-webkit-scrollbar { display: none; }
  .bs-appbar-meta a { font-size: 12.5px; white-space: nowrap; }
  .bs-appbar-meta > span {
    max-width: 30vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}
@media (max-width: 430px) {
  .bs-appbar-meta > span { display: none; }
}
@media (max-width: 620px) {
  .bs-step .lbl { display: none; }
  .bs-step-rule { margin: 0 8px; }
}
@media (max-width: 640px) {
  table.bs-responsive thead { display: none; }
  table.bs-responsive, table.bs-responsive tbody,
  table.bs-responsive tr, table.bs-responsive td { display: block; width: 100%; }
  table.bs-responsive tr {
    border: 1px solid var(--bs-line-light);
    border-radius: 14px;
    background: var(--bs-card-light);
    padding: 4px 14px;
    margin-bottom: 10px;
  }
  table.bs-responsive td {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    padding: 8px 0; border: none;
    border-bottom: 1px solid var(--bs-line-light);
    text-align: right;
  }
  table.bs-responsive tr td:last-child { border-bottom: none; }
  table.bs-responsive td::before {
    content: attr(data-label);
    font-family: var(--bs-font-display); font-weight: 600;
    font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--bs-tl-secondary);
    text-align: left; flex-shrink: 0;
  }
  /* A long unbreakable value (e.g. a URL or key in a failure reason) must wrap
     instead of forcing the stacked card wider than the screen — which zoomed
     the layout out and let the page scroll left/right on phones. */
  table.bs-responsive td {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* Free-text cells (a failure reason) read far better stacked: label on top,
     the full-width wrapping value below — not squeezed into a right-aligned
     flex row a long token can't break out of. */
  table.bs-responsive td.wrap-cell {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: 4px;
  }
}