/* ===========================================================================
   bidlead design tokens. Source of truth for every bidlead property.

   The static site (bidlead.io) and the Next.js app (onboarding.bidlead.io,
   connect.bidlead.io) are separate codebases on purpose, so this file is
   COPIED into each, not imported across them:
     funnel-b/assets/bl.css            (top of file)
     onboarding-form/app/globals.css   (top of file)
   Change a value here, then copy it to both.

   Orange: #FE5C05 is sampled from the approved logo artwork, not the brief's
   starting #FF6500 - the brief says the artwork wins where they differ.

   Contrast, measured:
     white on --bl-orange      3.11:1  large text and icons only
     --bl-ink on --bl-orange   5.76:1
     white on --bl-ink        17.9:1
     --bl-muted on white       5.33:1
   Which is why marketing CTAs are orange with large bold labels, and app-UI
   submit buttons are ink.
=========================================================================== */
:root {
  /* brand */
  --bl-orange: #FE5C05;
  --bl-orange-hover: #E85200;
  --bl-orange-press: #D04800;
  --bl-orange-50: #FFF1E9;
  --bl-orange-100: #FFE2D1;
  --bl-orange-ring: rgba(254, 92, 5, 0.28);

  /* neutrals - about 90% of every screen */
  --bl-ink: #171717;
  --bl-ink-2: #3A3A38;
  --bl-muted: #6B6B6B;
  --bl-muted-2: #9A9A96;
  --bl-bg: #FFFFFF;
  --bl-bg-soft: #F8F8F7;
  --bl-bg-sunk: #F2F2F0;
  --bl-line: #E8E8E6;
  --bl-line-strong: #D6D6D2;

  /* semantic - kept clear of the brand orange so an error never reads as a CTA */
  --bl-success: #137A55;
  --bl-success-50: #E8F5EF;
  --bl-warning: #A35F00;
  --bl-warning-50: #FDF3E3;
  --bl-error: #C42B1C;
  --bl-error-50: #FCEDEB;

  /* type */
  --bl-font: "IBM Plex Sans", "Helvetica Neue", Arial, ui-sans-serif, system-ui, sans-serif;
  --bl-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --bl-t-hero: clamp(38px, 5.6vw, 66px);
  --bl-t-h2: clamp(28px, 3.4vw, 42px);
  --bl-t-h3: clamp(21px, 2.2vw, 28px);
  --bl-t-card: 18px;
  --bl-t-body-lg: 18px;
  --bl-t-body: 16px;
  --bl-t-sm: 14px;
  --bl-t-xs: 12.5px;
  --bl-t-label: 11.5px;

  /* space - 4px base */
  --bl-s1: 4px;  --bl-s2: 8px;  --bl-s3: 12px; --bl-s4: 16px;
  --bl-s5: 20px; --bl-s6: 24px; --bl-s8: 32px; --bl-s10: 40px;
  --bl-s12: 48px; --bl-s16: 64px; --bl-s20: 80px; --bl-s24: 96px;

  /* shape - small and medium radii, crisp edges */
  --bl-r-xs: 4px;
  --bl-r-sm: 6px;
  --bl-r-md: 8px;
  --bl-r-lg: 12px;

  --bl-shadow-xs: 0 1px 2px rgba(23, 23, 23, 0.05);
  --bl-shadow-sm: 0 1px 2px rgba(23, 23, 23, 0.04), 0 4px 12px rgba(23, 23, 23, 0.04);
  --bl-shadow-md: 0 2px 4px rgba(23, 23, 23, 0.04), 0 12px 32px rgba(23, 23, 23, 0.07);

  --bl-focus: 0 0 0 3px var(--bl-orange-ring);

  /* motion - short and functional */
  --bl-ease: cubic-bezier(0.2, 0, 0, 1);
  --bl-fast: 120ms;
  --bl-med: 200ms;

  --bl-max: 1160px;
  --bl-gutter: clamp(16px, 4vw, 32px);
}

@media (prefers-reduced-motion: reduce) {
  :root { --bl-fast: 0ms; --bl-med: 0ms; }
}

/* ===========================================================================
   Shared components for the bidlead static site. Every page links this file;
   page <style> blocks only add layout that is unique to that page.
=========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bl-bg); color: var(--bl-ink);
  font-family: var(--bl-font); font-size: var(--bl-t-body); line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: none; box-shadow: var(--bl-focus); border-radius: var(--bl-r-sm); }
::selection { background: var(--bl-orange-100); }

.bl-wrap { width: 100%; max-width: var(--bl-max); margin: 0 auto; padding: 0 var(--bl-gutter); }
.bl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- type ---------------------------------------------------------------- */
.bl-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--bl-t-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bl-muted);
}
.bl-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 1.5px; background: var(--bl-orange); }
.bl-h1 { font-size: var(--bl-t-hero); line-height: 1.02; letter-spacing: -0.035em; font-weight: 650; }
.bl-h2 { font-size: var(--bl-t-h2); line-height: 1.08; letter-spacing: -0.028em; font-weight: 650; }
.bl-h1, .bl-h2, .bl-h3 { text-wrap: balance; }
.bl-h3 { font-size: var(--bl-t-h3); line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; }
.bl-lead { font-size: var(--bl-t-body-lg); line-height: 1.55; color: var(--bl-ink-2); }
.bl-muted { color: var(--bl-muted); }
.bl-num { font-variant-numeric: tabular-nums; }

/* ---- buttons -------------------------------------------------------------
   .bl-btn          orange, the one primary marketing action on a screen
   .bl-btn--ink     near-black, primary action inside app and form UI
   .bl-btn--ghost   bordered, secondary
-------------------------------------------------------------------------- */
.bl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 20px; border-radius: var(--bl-r-md);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  font-size: 15.5px; font-weight: 600; letter-spacing: -0.005em; line-height: 1;
  background: var(--bl-orange); color: #fff;
  transition: background var(--bl-fast) var(--bl-ease), border-color var(--bl-fast) var(--bl-ease),
              transform var(--bl-fast) var(--bl-ease), box-shadow var(--bl-fast) var(--bl-ease);
}
.bl-btn:hover { background: var(--bl-orange-hover); }
.bl-btn:active { background: var(--bl-orange-press); transform: translateY(1px); }
.bl-btn:disabled, .bl-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.bl-btn--lg { min-height: 52px; padding: 0 24px; font-size: 16.5px; }
.bl-btn--sm { min-height: 38px; padding: 0 14px; font-size: 14px; }
.bl-btn--ink { background: var(--bl-ink); }
.bl-btn--ink:hover { background: #2B2B2A; }
.bl-btn--ink:active { background: #000; }
.bl-btn--ghost { background: var(--bl-bg); color: var(--bl-ink); border-color: var(--bl-line-strong); }
.bl-btn--ghost:hover { background: var(--bl-bg-soft); border-color: var(--bl-muted-2); }
.bl-btn--ghost:active { background: var(--bl-bg-sunk); }
.bl-btn--block { width: 100%; }
.bl-btn .bl-arrow { transition: transform var(--bl-fast) var(--bl-ease); }
.bl-btn:hover .bl-arrow { transform: translateX(2px); }

.bl-link { color: var(--bl-ink); text-decoration: underline; text-decoration-color: var(--bl-line-strong); text-underline-offset: 3px; }
.bl-link:hover { text-decoration-color: var(--bl-ink); }

/* ---- header -------------------------------------------------------------- */
.bl-header {
  position: sticky; top: 0; z-index: 40; background: var(--bl-bg);
  border-bottom: 1px solid transparent; transition: border-color var(--bl-med) var(--bl-ease);
}
.bl-header.is-scrolled { border-bottom-color: var(--bl-line); }
.bl-header__in { display: flex; align-items: center; gap: 28px; height: 64px; }
.bl-logo { display: inline-flex; align-items: center; flex: none; }
.bl-logo img { height: 25px; width: auto; }
.bl-nav { display: flex; gap: 26px; margin-left: auto; }
.bl-nav a { font-size: 14px; font-weight: 500; color: var(--bl-ink-2); transition: color var(--bl-fast); }
.bl-nav a:hover { color: var(--bl-ink); }
.bl-header .bl-btn { margin-left: 4px; }
@media (max-width: 860px) { .bl-nav { display: none; } .bl-header .bl-btn { margin-left: auto; } }

/* ---- surfaces ------------------------------------------------------------ */
.bl-card { background: var(--bl-bg); border: 1px solid var(--bl-line); border-radius: var(--bl-r-lg); }
.bl-band { background: var(--bl-bg-soft); border-top: 1px solid var(--bl-line); border-bottom: 1px solid var(--bl-line); }
.bl-section { padding: clamp(56px, 7vw, 88px) 0; }
.bl-section--tight { padding: clamp(48px, 6vw, 72px) 0; }
.bl-badge {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px;
  border-radius: var(--bl-r-sm); font-size: 12px; font-weight: 600; letter-spacing: .005em;
  background: var(--bl-bg-soft); color: var(--bl-ink-2); border: 1px solid var(--bl-line);
}
.bl-badge--orange { background: var(--bl-orange-50); color: #A93B00; border-color: var(--bl-orange-100); }
.bl-badge--success { background: var(--bl-success-50); color: var(--bl-success); border-color: #CDE9DC; }

/* ---- forms --------------------------------------------------------------- */
.bl-field { display: flex; flex-direction: column; gap: 6px; }
.bl-label { font-size: 13px; font-weight: 600; color: var(--bl-ink); }
.bl-input, .bl-select {
  width: 100%; min-height: 46px; padding: 0 13px; border-radius: var(--bl-r-md);
  border: 1px solid var(--bl-line-strong); background: var(--bl-bg); color: var(--bl-ink);
  font-size: 16px; /* 16px stops iOS zooming on focus */
  transition: border-color var(--bl-fast), box-shadow var(--bl-fast);
}
.bl-input::placeholder { color: var(--bl-muted-2); }
.bl-input:hover, .bl-select:hover { border-color: var(--bl-muted-2); }
.bl-input:focus, .bl-select:focus { outline: none; border-color: var(--bl-orange); box-shadow: var(--bl-focus); }
.bl-input[aria-invalid="true"] { border-color: var(--bl-error); }
.bl-error-text { font-size: 13px; color: var(--bl-error); }

/* ---- footer -------------------------------------------------------------- */
.bl-footer { border-top: 1px solid var(--bl-line); padding: 40px 0 36px; }
.bl-footer__in { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 24px 40px; }
.bl-footer__brand p { margin-top: 10px; font-size: 13.5px; color: var(--bl-muted); }
.bl-footer__links { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.bl-footer__links a { font-size: 13.5px; color: var(--bl-ink-2); }
.bl-footer__links a:hover { color: var(--bl-ink); }
.bl-footer__legal { width: 100%; padding-top: 24px; margin-top: 4px; border-top: 1px solid var(--bl-line);
  font-size: 12.5px; color: var(--bl-muted); }

/* ---- scroll reveal, presentation only ------------------------------------ */
.bl-reveal { opacity: 0; transform: translateY(10px); transition: opacity 500ms var(--bl-ease), transform 500ms var(--bl-ease); }
.bl-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .bl-reveal { opacity: 1; transform: none; transition: none; } }
.no-js .bl-reveal { opacity: 1; transform: none; }

/* ---- video player (shared) -------------------------------------------------------------- */
.bl-video__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.bl-video__player { position: relative; aspect-ratio: 16 / 9; border-radius: var(--bl-r-lg); overflow: hidden; background: #0E0E0E; border: 1px solid var(--bl-line); }
.bl-video__player video { width: 100%; height: 100%; object-fit: cover; }
.bl-video__play {
  position: absolute; inset: 0; display: grid; place-items: center; border: 0; padding: 0; cursor: pointer;
  background: linear-gradient(to top, rgba(0,0,0,.28), rgba(0,0,0,0) 55%);
}
.bl-video__play span {
  width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.22); transition: transform var(--bl-med) var(--bl-ease);
}
.bl-video__play svg { width: 24px; height: 24px; margin-left: 4px; fill: var(--bl-ink); }
.bl-video__play:hover span { transform: scale(1.05); }
.bl-video__player.playing .bl-video__play { display: none; }
.bl-video__copy .bl-h2 { margin: 14px 0 16px; }
.bl-video__copy .bl-lead { margin-bottom: 26px; }
@media (max-width: 900px) { .bl-video__grid { grid-template-columns: 1fr; } }

/* ---- screening ---------------------------------------------------------- */
.sec-head { max-width: 640px; margin-bottom: clamp(32px, 4vw, 48px); }
.sec-head .bl-h2 { margin: 14px 0 14px; }
.screen-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--bl-line); border-radius: var(--bl-r-lg); overflow: hidden; background: var(--bl-bg); }
.screen-grid li { padding: 22px 22px 24px; border-right: 1px solid var(--bl-line); border-bottom: 1px solid var(--bl-line); }
.screen-grid li:nth-child(4n) { border-right: 0; }
.screen-grid li:nth-child(n+5) { border-bottom: 0; }
.screen-grid .n { font-family: var(--bl-mono); font-size: 12px; color: var(--bl-orange); }
.screen-grid .k { display: block; margin-top: 14px; font-size: var(--bl-t-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bl-muted); }
.screen-grid b { display: block; margin-top: 4px; font-size: 16px; font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; }
.screen-grid p { margin-top: 8px; font-size: 13.5px; color: var(--bl-muted); line-height: 1.5; }
.screen-grid .sum { background: var(--bl-ink); color: #fff; display: flex; flex-direction: column; justify-content: space-between; }
.screen-grid .sum b { font-size: 18px; margin: 0; }
.screen-grid .sum p { color: rgba(255,255,255,.68); }
@media (max-width: 960px) {
  .screen-grid { grid-template-columns: 1fr 1fr; }
  .screen-grid li { border-right: 1px solid var(--bl-line) !important; border-bottom: 1px solid var(--bl-line) !important; }
  .screen-grid li:nth-child(2n) { border-right: 0 !important; }
  .screen-grid li:nth-child(n+7) { border-bottom: 0 !important; }
}
@media (max-width: 520px) {
  .screen-grid { grid-template-columns: 1fr; }
  .screen-grid li { border-right: 0 !important; }
  .screen-grid li:nth-child(7) { border-bottom: 1px solid var(--bl-line) !important; }
}

/* ---- paper trail -------------------------------------------------------- */
.trail__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.trail__copy .bl-h2 { margin: 14px 0 16px; }
.trail__list { border: 1px solid var(--bl-line); border-radius: var(--bl-r-lg); background: var(--bl-bg); }
.trail__list li { display: flex; align-items: center; gap: 12px; padding: 15px 18px; font-size: 15px; font-weight: 500; }
.trail__list li + li { border-top: 1px solid var(--bl-line); }
.trail__list .chk { width: 22px; height: 22px; flex: none; border-radius: 6px; background: var(--bl-orange-50); display: grid; place-items: center; }
.trail__list .chk svg { width: 13px; height: 13px; stroke: var(--bl-orange-press); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 860px) { .trail__grid { grid-template-columns: 1fr; } }

/* ---- page intro, used by booking, thank-you and the content pages --------- */
.bl-page { padding: clamp(36px, 6vw, 64px) 0 clamp(56px, 7vw, 88px); }
.bl-page__head { max-width: 680px; margin-bottom: 28px; }
.bl-page__head .bl-h1 { font-size: clamp(32px, 4.2vw, 48px); margin: 14px 0 14px; }
.bl-page__head .bl-lead { color: var(--bl-ink-2); }
.bl-page--center .bl-page__head { margin-left: auto; margin-right: auto; text-align: center; }

/* ---- booking card and slot picker (/booking and /book) -------------------- */
.book-card { max-width: 640px; margin: 0 auto; background: var(--bl-bg); border: 1px solid var(--bl-line);
  border-radius: var(--bl-r-lg); box-shadow: var(--bl-shadow-sm); padding: clamp(18px, 3vw, 28px); }
.book-card label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.book-card input[type="text"], .book-card input[type="email"], .book-card input[type="tel"] {
  width: 100%; min-height: 46px; padding: 0 13px; border: 1px solid var(--bl-line-strong); border-radius: var(--bl-r-md);
  background: var(--bl-bg); font-size: 16px; transition: border-color var(--bl-fast), box-shadow var(--bl-fast); }
.book-card input::placeholder { color: var(--bl-muted-2); }
.book-card input:focus { outline: none; border-color: var(--bl-orange); box-shadow: var(--bl-focus); }
.lead-fields { display: grid; gap: 14px; margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--bl-line); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .row2 { grid-template-columns: 1fr; } }
.err { font-size: 13px; color: var(--bl-error); }

.confirm { display: flex; gap: 10px; align-items: flex-start; padding: 14px; margin-bottom: 20px;
  border: 1px solid var(--bl-line); border-radius: var(--bl-r-md); background: var(--bl-bg-soft); }
.confirm input[type="checkbox"] { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--bl-orange); }
.confirm label { margin: 0 !important; font-size: 13.5px !important; font-weight: 500 !important; color: var(--bl-ink-2); line-height: 1.5; }
.gateable { transition: opacity var(--bl-med) var(--bl-ease); }
.gateable.locked { opacity: .4; pointer-events: none; user-select: none; }

.tz-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.picker-note { margin: 0 !important; font-size: var(--bl-t-label) !important; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bl-muted); }
.tz-select { min-height: 36px; padding: 0 30px 0 10px; border: 1px solid var(--bl-line-strong); border-radius: var(--bl-r-sm);
  background: var(--bl-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B6B6B' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  -webkit-appearance: none; appearance: none; font-size: 14px; color: var(--bl-ink); cursor: pointer; }
.tz-select:hover { border-color: var(--bl-muted-2); }
.tz-select:focus { outline: none; border-color: var(--bl-orange); box-shadow: var(--bl-focus); }

.slot-days { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.day-chip { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 8px 12px; cursor: pointer;
  border: 1px solid var(--bl-line-strong); border-radius: var(--bl-r-md); background: var(--bl-bg); color: var(--bl-ink);
  transition: border-color var(--bl-fast), background var(--bl-fast); }
.day-chip:hover { border-color: var(--bl-muted-2); }
.day-chip .dow { font-size: 13px; font-weight: 600; }
.day-chip .dom { font-size: 12px; color: var(--bl-muted); margin-top: 1px; }
.day-chip.selected { border-color: var(--bl-orange); background: var(--bl-orange-50); }
.day-chip.selected .dom { color: #A93B00; }

.slot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
@media (max-width: 480px) { .slot-grid { grid-template-columns: repeat(3, 1fr); } }
.slot-pill { min-height: 42px; padding: 0 6px; cursor: pointer; border: 1px solid var(--bl-line-strong); border-radius: var(--bl-r-md);
  background: var(--bl-bg); font-size: 14px; font-weight: 500; color: var(--bl-ink); font-variant-numeric: tabular-nums;
  transition: border-color var(--bl-fast), background var(--bl-fast); }
.slot-pill:hover { border-color: var(--bl-muted-2); background: var(--bl-bg-soft); }
.slot-pill.selected { border-color: var(--bl-orange); background: var(--bl-orange); color: #fff; font-weight: 600; }
.picker-status { min-height: 20px; margin: 14px 0 4px; font-size: 13.5px; color: var(--bl-muted); }
.picker-status.error { color: var(--bl-error); }
.picker .btn, .book-card .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px;
  margin-top: 6px; border: 0; border-radius: var(--bl-r-md); background: var(--bl-ink); color: #fff;
  font-size: 15.5px; font-weight: 600; cursor: pointer; text-decoration: none; transition: background var(--bl-fast); }
.picker .btn:hover, .book-card .btn:hover { background: #2B2B2A; }
.picker .btn:disabled { opacity: .35; cursor: not-allowed; }
.book-card .btn-ghost { background: var(--bl-bg); color: var(--bl-ink); border: 1px solid var(--bl-line-strong); }
.book-card .btn-ghost:hover { background: var(--bl-bg-soft); }
.calendar-wrap { border-radius: var(--bl-r-md); overflow: hidden; }

.booked { text-align: center; padding: 8px 0; }
.booked h2 { font-size: 26px; font-weight: 650; letter-spacing: -0.022em; }
.booked .when { margin-top: 8px; font-size: 16px; font-weight: 600; }
.booked .note { margin: 8px auto 20px; max-width: 42ch; font-size: 14px; color: var(--bl-muted); }
.booked .cals { display: grid; gap: 8px; }