:root {
  /* Brand */
  --bb-navy: #082448;
  --bb-blue: #0865A8;
  --bb-green: #238B45;
  --bb-lime: #8EDB32;
  --bb-mint: #EAF7ED;

  /* Backgrounds */
  --bb-background: #F7F9FC;
  --bb-surface: #FFFFFF;
  --bb-sidebar: #082448;

  /* Typography */
  --bb-text: #142D49;
  --bb-text-muted: #536477;
  --bb-text-inverse: #FFFFFF;

  /* Borders */
  --bb-border: #E2E8F0;

  /* Semantic colors */
  --bb-success: #238B45;
  --bb-warning: #B45309;
  --bb-danger: #C62828;
  --bb-info: #0865A8;

  /* Components */
  --bb-primary: var(--bb-green);
  --bb-primary-hover: #196C35;
  --bb-focus: #0865A8;

  --bb-radius: 10px;
  --bb-shadow: 0 4px 18px rgba(8, 36, 72, .08);
}

body {
  background: var(--bb-background);
  color: var(--bb-text);
  font-family: Inter, system-ui, sans-serif;
}

.btn-primary {
  background: var(--bb-primary);
  color: white;
  border: none;
  border-radius: var(--bb-radius);
  padding: 12px 20px;
  font-weight: 600;
}

.btn-primary:hover {
  background: var(--bb-primary-hover);
}

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

.card {
  background: var(--bb-surface);
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius);
  box-shadow: var(--bb-shadow);
}

.sidebar {
  background: var(--bb-sidebar);
  color: var(--bb-text-inverse);
}

.sidebar .active {
  color: var(--bb-lime);
}

.brand-logo {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
}

/* Public website and customer workspace */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, summary { cursor: pointer; }
[hidden] { display: none !important; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--bb-focus); outline-offset: 4px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.04em; }
em { font-style: normal; color: var(--bb-green); }
.wrap { width: min(1240px, calc(100% - 96px)); margin-inline: auto; }
.site-header { height: 112px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.wordmark { display: block; width: 224px; flex-shrink: 0; }
.wordmark img { display: block; width: 100%; }
.site-header nav { display: flex; gap: 32px; font-size: 14px; font-weight: 600; }
.site-header nav a:hover, .text-link:hover { color: var(--bb-green); }
.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 20px; font-size: 14px; min-height: 48px; text-decoration: none; }
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 66px; align-items: center; padding-block: 75px 100px; }
.eyebrow { font-size: 11px; font-weight: 750; letter-spacing: .15em; color: var(--bb-text-muted); margin-bottom: 22px; }
.status-dot { display: inline-block; width: 7px; height: 7px; background: var(--bb-green); border-radius: 50%; margin-right: 7px; }
.hero h1 { font-size: clamp(42px, 4.2vw, 64px); font-weight: 750; line-height: 1.09; margin-bottom: 26px; letter-spacing: -.055em; }
.lead { font-size: 17px; color: var(--bb-text-muted); max-width: 470px; }
.hero-actions { display: flex; align-items: center; gap: 26px; margin-top: 30px; }
.text-link { font-size: 14px; font-weight: 650; }
.small-muted { font-size: 12px; color: var(--bb-text-muted); margin-top: 15px; }
.trade-list { font-size: 9px; font-weight: 700; letter-spacing: .08em; margin-top: 40px; color: var(--bb-text-muted); }
.trade-list span { padding-inline: 9px; color: var(--bb-green); }
.hero-preview { background: white; border: 1px solid var(--bb-border); border-radius: 18px; padding: 26px; box-shadow: 0 22px 70px #08244810; position: relative; }
.hero-preview::before { content: ''; position: absolute; width: 80%; height: 90%; top: 12%; left: 14%; background: #e5efdf; border-radius: 22px; transform: rotate(5deg); z-index: -1; }
.preview-top { display: flex; align-items: center; gap: 12px; padding-bottom: 23px; border-bottom: 1px solid var(--bb-border); font-size: 9px; letter-spacing: .1em; font-weight: 700; }
.preview-brand { font-size: 24px; color: var(--bb-navy); letter-spacing: -.1em; }.preview-brand span { color: var(--bb-green); }
.demo-pill { display: inline-block; background: var(--bb-mint); color: #196C35; font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 20px; white-space: nowrap; }
.preview-top .demo-pill { margin-left: auto; }
.preview-heading { display: flex; justify-content: space-between; align-items: center; padding: 26px 0 22px; gap: 10px; }
.preview-heading .eyebrow { margin-bottom: 10px; font-size: 9px; }.preview-heading h2 { font-size: 24px; margin-bottom: 0; }
.quote-amount { font-size: 25px; font-weight: 750; text-align: right; letter-spacing: -.04em; }.quote-amount span { display: block; font-size: 10px; font-weight: 400; letter-spacing: 0; color: var(--bb-text-muted); }
.customer-line { display: flex; align-items: center; gap: 12px; padding: 18px 0; border-block: 1px solid var(--bb-border); font-size: 12px; }
.avatar { background: #eef2f7; padding: 9px; border-radius: 50%; font-size: 11px; font-weight: 700; }.customer-line small { display: block; color: var(--bb-text-muted); font-size: 10px; }.customer-line .badge { margin-left: auto; }
.badge { padding: 4px 9px; color: var(--bb-blue); background: #edf5fc; border-radius: 6px; font-size: 10px; font-weight: 650; white-space: nowrap; }
.badge.neutral { color: var(--bb-text-muted); background: #f0f3f7; }.badge.success { color: #196C35; background: var(--bb-mint); }
.timeline { padding-block: 14px; }.timeline>div { display: flex; align-items: start; gap: 14px; padding: 13px 0; }.timeline i { font-style: normal; display: grid; place-items: center; border: 1px solid #c9e1c6; border-radius: 50%; width: 27px; height: 27px; color: var(--bb-green); font-size: 11px; flex-shrink: 0; }.timeline>div:first-child i { color: white; background: var(--bb-green); }.timeline strong { font-size: 12px; }.timeline p { font-size: 10px; color: var(--bb-text-muted); margin: 3px 0 0; }.timeline small { margin-left: auto; font-size: 8px; color: var(--bb-text-muted); padding-top: 6px; white-space: nowrap; }
.preview-note { display: flex; gap: 12px; align-items: center; background: var(--bb-mint); border-radius: 8px; padding: 12px; }.preview-note span { color: var(--bb-green); }.preview-note p { margin: 0; font-size: 11px; color: #196C35; }
.promise-strip { background: var(--bb-navy); color: white; }.promise-strip>.wrap { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding-block: 30px; font-size: 12px; }.promise-strip p { margin: 0; font-size: 16px; font-weight: 650; }.promise-strip span::before { content: '✓'; color: var(--bb-lime); margin-right: 12px; }
.section { padding-block: 100px; }.section-heading { max-width: 520px; }.section-heading h2, .faq h2, .closing h2 { font-size: 44px; }.section-heading>p:last-child { color: var(--bb-text-muted); font-size: 15px; }
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 50px; margin-top: 55px; }.steps article { border-top: 1px solid #c9d7c9; padding-top: 24px; }.steps span { font-size: 10px; font-weight: 750; letter-spacing: .12em; color: var(--bb-green); }.steps h3 { font-size: 24px; margin: 22px 0 16px; max-width: 240px; }.steps p { font-size: 14px; color: var(--bb-text-muted); }
.pricing-section { background: #edf2ef; padding-block: 85px; }.price-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 40px; }.price-grid article { padding: 35px; position: relative; box-shadow: none; }.price-grid h3 { font-size: 24px; }.price-grid p { font-size: 13px; color: var(--bb-text-muted); }.price { font-size: 44px; font-weight: 700; letter-spacing: -.04em; margin-top: 35px; }.price span { font-size: 13px; font-weight: 400; letter-spacing: 0; }.price-grid .featured { border-color: var(--bb-green); }.plan-label { position: absolute; top: -13px; left: 26px; font-size: 9px; letter-spacing: .08em; padding: 5px 12px; background: var(--bb-green); color: white; border-radius: 5px; }
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; }.faq details { border-bottom: 1px solid var(--bb-border); padding: 22px 0; }.faq summary { font-weight: 650; font-size: 15px; }.faq details p { font-size: 14px; color: var(--bb-text-muted); margin: 18px 0 0; }
.closing { background: var(--bb-mint); padding: 50px; border-radius: 18px; display: flex; justify-content: space-between; align-items: center; gap: 25px; }.closing h2 { margin: 0; }.closing .eyebrow { color: var(--bb-green); }.site-footer { padding-block: 45px; display: flex; align-items: center; gap: 25px; font-size: 12px; color: var(--bb-text-muted); }.site-footer strong { color: var(--bb-navy); font-size: 18px; }.site-footer a { margin-left: auto; }
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: linear-gradient(145deg,#eaf7ed,#f7f9fc 65%); }.auth-card { width: min(100%,450px); padding: 40px; }.auth-card .brand-logo { margin-bottom: 24px; }.auth-card h1 { font-size: 32px; }.auth-card p:not(.eyebrow) { color: var(--bb-text-muted); font-size: 14px; }.auth-card form { display: grid; gap: 20px; margin-block: 26px; }.auth-card label { font-size: 13px; font-weight: 600; }.auth-card input { display: block; width: 100%; padding: 12px; margin-top: 7px; border: 1px solid var(--bb-border); border-radius: 7px; }.auth-card .eyebrow { margin-bottom: 12px; }
.workspace { display: flex; min-height: 100vh; }.app-sidebar { width: 240px; flex-shrink: 0; padding: 30px 24px; display: flex; flex-direction: column; }.app-brand { display: flex; gap: 10px; align-items: center; font-weight: 750; font-size: 24px; letter-spacing: -.04em; }.app-brand img { width: 38px; background: white; border-radius: 8px; }.sidebar-label { font-size: 9px; letter-spacing: .15em; color: #a8b9cc; margin-top: 55px; }.app-sidebar nav { display: grid; gap: 10px; }.app-sidebar nav a { font-size: 13px; padding: 12px; border-radius: 7px; }.app-sidebar nav .active { background: #ffffff0d; }.sidebar-bottom { margin-top: auto; padding-top: 50px; font-size: 12px; display: grid; gap: 18px; }.signout { border: none; background: none; padding: 0; color: #becbd9; font-size: 12px; }
.dashboard { flex: 1; min-width: 0; padding: 0 45px 40px; }.dashboard-header { padding-block: 26px; border-bottom: 1px solid var(--bb-border); display: flex; justify-content: space-between; gap: 15px; font-size: 11px; color: var(--bb-text-muted); }.dashboard-title { margin-top: 46px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }.dashboard-title h1 { font-size: 36px; margin-bottom: 12px; }.dashboard-title .eyebrow { font-size: 9px; margin-bottom: 15px; }.dashboard-title p { color: var(--bb-text-muted); font-size: 13px; }.sample-notice { padding: 13px 18px; border: 1px solid #cce3cc; background: var(--bb-mint); border-radius: 8px; display: flex; gap: 16px; font-size: 11px; margin: 20px 0 26px; }.sample-notice strong { color: #196C35; white-space: nowrap; }.metric-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }.metric-grid article { padding: 24px; box-shadow: none; }.metric-grid p { font-size: 12px; color: var(--bb-text-muted); }.metric-grid strong { display: block; font-size: 32px; letter-spacing: -.04em; }.metric-grid span { font-size: 10px; color: var(--bb-text-muted); }
.quote-table { margin-top: 30px; box-shadow: none; }.quote-table header { display: flex; justify-content: space-between; align-items: center; padding: 25px; }.quote-table h2 { font-size: 19px; margin-bottom: 8px; }.quote-table p { font-size: 11px; color: var(--bb-text-muted); margin: 0; }.table-scroll { overflow-x: auto; }table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; }th { font-weight: 500; color: var(--bb-text-muted); background: #f8fafc; font-size: 10px; }td,th { padding: 17px 24px; border-top: 1px solid var(--bb-border); }td small { display: block; color: var(--bb-text-muted); font-size: 10px; margin-top: 3px; }.preview-details { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 30px 0; }.preview-details h2 { font-size: 18px; }.preview-details p { max-width: 600px; color: var(--bb-text-muted); font-size: 12px; }.preview-details a { white-space: nowrap; font-size: 12px; }
@media(max-width:1000px) { .wrap { width: calc(100% - 48px); }.hero { gap: 30px; }.hero h1 { font-size: 44px; }.hero-actions { flex-wrap: wrap; gap: 15px; }.site-header nav { gap: 16px; }.wordmark { width: 180px; }.hero-preview { padding: 18px; }.preview-heading h2 { font-size: 20px; }.quote-amount { font-size: 22px; }.app-sidebar { width: 200px; padding: 26px 16px; }.dashboard { padding-inline: 24px; }.dashboard-title h1 { font-size: 28px; }.metric-grid article { padding: 18px; } }
@media(max-width:760px) { .site-header { height: 90px; }.site-header>.btn-primary { display: none; }.site-header nav a:not(:last-child) { display: none; }.hero { grid-template-columns: 1fr; padding-block: 35px 65px; gap: 45px; }.hero h1 { font-size: 46px; }.lead { max-width: none; }.hero-preview { max-width: 540px; width: 100%; margin-inline: auto; }.promise-strip>.wrap { flex-wrap: wrap; gap: 18px; }.promise-strip p { width: 100%; }.promise-strip span { font-size: 11px; }.section { padding-block: 65px; }.section-heading h2,.faq h2,.closing h2 { font-size: 34px; }.steps,.price-grid,.faq { grid-template-columns: 1fr; gap: 25px; }.steps h3 { max-width: none; }.price-grid article { padding: 28px; }.price { margin-top: 18px; }.closing { padding: 30px; flex-direction: column; align-items: start; }.site-footer { flex-wrap: wrap; gap: 10px; }.site-footer span { width: 100%; order: 3; }.workspace { display: block; }.app-sidebar { width: 100%; padding: 16px 24px; }.app-sidebar nav { display: flex; flex-wrap: wrap; gap: 0; }.sidebar-label { display: none; }.app-brand { margin-bottom: 12px; }.sidebar-bottom { margin-top: 14px; padding-top: 0; display: flex; justify-content: space-between; }.dashboard { padding-inline: 20px; }.dashboard-header { flex-wrap: wrap; padding-block: 18px; }.dashboard-title { margin-top: 28px; }.dashboard-title h1 { font-size: 30px; }.metric-grid { grid-template-columns: 1fr; gap: 12px; }.metric-grid article { padding: 18px; }.metric-grid strong { font-size: 28px; }.sample-notice { flex-direction: column; gap: 5px; }.preview-details { flex-direction: column; align-items: start; gap: 10px; }.auth-card { padding: 28px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } }

.auth-card label, .auth-card p:not(.eyebrow), .auth-card .text-link, .auth-card .btn-primary { font-size: 18px; }
.auth-card .form-error { color: var(--bb-danger); border-left: 4px solid var(--bb-danger); padding-left: 14px; }
.auth-card #password-help { margin: 0; font-size: 16px; }

.bid-review-page { padding: 32px 16px; }
.bid-review { max-width: 720px; margin: 0 auto; padding: 32px; }
.bid-review .brand-logo { max-width: 300px; margin-bottom: 24px; }
.bid-review .eyebrow { font-size: 16px; letter-spacing: .04em; color: var(--bb-green); }
.bid-review h1 { font-size: 36px; }
.bid-items table { font-size: 18px; }
.bid-items caption { text-align: left; font-size: 22px; font-weight: 700; padding: 12px 0 20px; }
.bid-items th { font-size: 16px; }
.bid-items td,.bid-items th { padding: 16px 8px; }
.bid-items td:last-child,.bid-items th:last-child { text-align: right; white-space: nowrap; }
.bid-total { background: var(--bb-navy); color: white; padding: 24px; margin-top: 20px; }
.bid-total span { display: block; font-size: 18px; }
.bid-total strong { color: var(--bb-lime); font-size: 36px; }
.bid-sample-notice,.bid-accepted,.bid-expired { background: var(--bb-mint); padding: 20px; font-size: 18px; line-height: 1.6; }
.bid-accepted h2,.bid-expired h2 { font-size: 26px; }
.bid-accepted { border-left: 5px solid var(--bb-green); }
.bid-accept-form { display: grid; gap: 20px; margin-block: 24px; font-size: 18px; }
.bid-accept-form label { display: flex; align-items: start; gap: 12px; }
.bid-accept-form input { width: 22px; height: 22px; flex-shrink: 0; margin-top: 4px; }
.bid-accept-form button { font-size: 20px; min-height: 56px; }
.bid-accept-form p,.bid-review>.text-link { font-size: 16px; }
@media(max-width:500px) { .bid-review { padding: 20px; }.bid-review h1 { font-size: 30px; }.bid-items table { font-size: 16px; } }

.bid-decline-form { margin: -6px 0 28px; }
.btn-decline { display: inline-block; min-height: 44px; padding: 9px 16px; border: 1px solid var(--bb-text-muted); border-radius: 6px; background: transparent; color: var(--bb-text-muted); font-size: 16px; font-weight: 600; }
.btn-decline:hover { color: var(--bb-danger); border-color: var(--bb-danger); background: #fff5f5; }
.bid-declined { padding: 20px; margin-bottom: 24px; background: #f3f6fa; border-left: 4px solid var(--bb-text-muted); font-size: 18px; }
.bid-declined h2 { font-size: 26px; }

/* Customer workspace and bid checkout */
.commerce-page { font-size:18px; }
.commerce-nav { background:var(--bb-navy); color:white; padding:24px 5%; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.commerce-nav>a { font-size:30px; font-weight:850; text-decoration:none; color:white; }
.commerce-nav>a span { color:var(--bb-lime); }
.commerce-nav nav { display:flex; gap:24px; flex-wrap:wrap; }
.commerce-nav nav a { color:white; font-weight:600; }
.commerce-main { max-width:1180px; margin:auto; padding:40px 24px 80px; }
.commerce-hero { background:var(--bb-navy); color:white; padding:40px; border-radius:10px; margin-bottom:28px; }
.commerce-hero h1 { color:white; font-size:clamp(32px,5vw,52px); line-height:1.1; }
.commerce-hero p { color:white; font-size:20px; }
.commerce-hero .eyebrow { color:var(--bb-lime); }
.commerce-section { padding:28px; margin-bottom:28px; scroll-margin-top:20px; }
.commerce-columns { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.commerce-main h2 { font-size:28px; }
.commerce-main label { display:block; margin:16px 0; font-weight:650; }
.commerce-main input,.commerce-main select { display:block; box-sizing:border-box; width:100%; border:1px solid #9aa9b9; background:white; border-radius:6px; padding:12px; font:inherit; min-height:48px; margin-top:7px; }
.commerce-main input[type=checkbox] { width:24px; min-height:24px; display:inline-block; vertical-align:middle; margin-right:8px; }
.commerce-main table { width:100%; border-collapse:collapse; text-align:left; }
.commerce-main td,.commerce-main th { padding:14px 10px; border-bottom:1px solid var(--bb-border); font-size:18px; }
.commerce-main td input { min-width:90px; }
.commerce-main td:first-child input { min-width:220px; }
.commerce-main form+form { margin-top:18px; }
.commerce-main .btn-primary { display:inline-block; font-size:18px; text-decoration:none; margin:10px 0; }
.commerce-error { padding:18px; border-left:5px solid #B45309; background:#fff4df; color:#713900; margin:16px 0; }
@media(max-width:760px) { .commerce-columns { grid-template-columns:1fr; } .commerce-section,.commerce-hero { padding:20px; } .commerce-main { padding:24px 12px; } }

/* Business identity and customer-facing bid branding */
.profile-editor { max-width: 780px; }
.profile-editor form { display:grid; gap:22px; }
.profile-editor label { display:grid; gap:8px; font-size:20px; font-weight:650; }
.profile-editor label span, .profile-editor p { font-size:18px; font-weight:400; line-height:1.55; }
.profile-editor input, .profile-editor select { width:100%; box-sizing:border-box; font:inherit; padding:14px; border:1px solid var(--bb-border); border-radius:8px; background:white; color:var(--bb-text); }
.profile-editor .bid-confirm { display:flex; }
.profile-editor input[type=checkbox] { width:auto; }
.profile-logo-preview, .bid-business-brand { background:white; border-radius:10px; padding:24px; margin-bottom:24px; }
.profile-logo-preview img, .bid-business-brand img { max-width:240px; max-height:160px; object-fit:contain; }
.bid-business-brand h2 { margin:12px 0; }