/* ==========================================================================
   JD AUXO
   Tokens taken from Brand Identity v2. Radii held to the 8–12px spec.
   ========================================================================== */

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

:root {
  /* Brand palette */
  --navy:      #0B0F1A;   /* Deep Navy — primary background */
  --navy-2:    #0D1221;   /* Alternating section band */
  --indigo:    #5B5FFF;   /* Gradient start — strategy */
  --blue:      #00C2FF;   /* Gradient end — execution */
  --purple:    #7C3AED;   /* Accent, used sparingly */
  --gray:      #A1A1AA;   /* Secondary text — 8.0:1 on navy, passes AA */
  --text:      #F3F4F6;
  --grad:      linear-gradient(135deg, var(--indigo), var(--blue));

  --border:    rgba(255, 255, 255, 0.08);
  --surface:   rgba(255, 255, 255, 0.02);

  --r:         8px;
  --r-lg:      12px;

  --pad:       clamp(64px, 9vw, 104px);
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
}

html {
  color-scheme: dark;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--navy);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ===== Typography ===== */
h1, h2, h3 {
  font-family: 'Satoshi', 'Inter', system-ui, sans-serif;
  letter-spacing: -0.03em;
  text-wrap: balance;
  line-height: 1.1;
}

h1 {
  font-size: clamp(2.1rem, 5.4vw, 3.9rem);
  font-weight: 800;
  letter-spacing: -0.04em;
}

h1 .grad, .grad {
  display: block;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

h2 {
  font-size: clamp(1.6rem, 3.6vw, 2.5rem);
  font-weight: 700;
}

h3 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; }

p { color: var(--gray); }

strong { color: var(--text); font-weight: 600; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--text); }

.eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  background: rgba(0, 194, 255, 0.08);
  border: 1px solid rgba(0, 194, 255, 0.2);
  padding: 7px 16px;
  border-radius: 100px;
  margin-bottom: 22px;
}

.lede {
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  line-height: 1.6;
  max-width: 46ch;
}

.micro { font-size: 0.8125rem; color: var(--gray); margin-top: 16px; }

.footnote {
  font-size: 0.875rem;
  color: var(--gray);
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  max-width: 56ch;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ===== Layout ===== */
.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 32px);
}
.container--narrow { max-width: 780px; }

.section { padding: var(--pad) 0; position: relative; }
.section--alt { background: var(--navy-2); }

.glow {
  position: absolute;
  top: 40%; left: 50%;
  width: min(760px, 120vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(91, 95, 255, 0.13) 0%, transparent 62%);
  pointer-events: none;
  z-index: 0;
}

/* ===== Buttons — one visual language, one action ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease),
              background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.btn-primary {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 4px 20px rgba(91, 95, 255, 0.28);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(91, 95, 255, 0.42);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover { border-color: rgba(91, 95, 255, 0.5); background: var(--surface); }

.btn-lg { padding: 16px 34px; font-size: 1rem; border-radius: var(--r-lg); }

/* Visible focus for every interactive element. */
:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: var(--r);
}

/* ===== Nav ===== */
#navbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 900;
  padding-top: env(safe-area-inset-top);
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
  border-bottom: 1px solid transparent;
}
#navbar.scrolled {
  background: rgba(11, 15, 26, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
}
.nav-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 32px);
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.logo-img { width: 36px; height: 36px; object-fit: contain; }
.logo-text {
  font-family: 'Satoshi', 'Inter', sans-serif;
  font-size: 1.1875rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.03em;
}
.logo-text em {
  font-style: normal;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nav-cta { padding: 12px 18px; font-size: 0.875rem; min-height: 44px; }

@media (max-width: 560px) {
  .nav-cta { font-size: 0.8125rem; padding: 11px 14px; }
  .logo-text { display: none; }
}

/* ===== Hero ===== */
.hero {
  position: relative;
  padding: calc(68px + var(--pad)) 0 var(--pad);
  overflow: hidden;
}
.hero-inner { position: relative; z-index: 1; max-width: 780px; }
.hero h1 { margin-bottom: 22px; }
.hero .lede { margin-bottom: 34px; }

/* ===== Video ===== */
.video-section { padding-top: 0; }

.video {
  position: relative;
  /* The video carries most of the trust on this page, so let it run wider
     than the reading column on desktop rather than sitting at 716px. */
  max-width: 960px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: #060912 var(--poster, none) center / cover no-repeat;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: grid;
  place-items: center;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
}
.video iframe { width: 100%; height: 100%; border: 0; display: block; }

.video-play {
  width: 76px; height: 76px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(11, 15, 26, 0.55);
  backdrop-filter: blur(8px);
  cursor: pointer;
  display: grid;
  place-items: center;
  touch-action: manipulation;
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease);
}
.video-play:hover { transform: scale(1.07); background: rgba(91, 95, 255, 0.35); }

/* Autoplay is muted by browser rule, so the invitation to unmute has to be
   unmissable without covering the picture. */
.video-unmute {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  min-height: 44px;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  background: rgba(11, 15, 26, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 100px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  animation: unmuteNudge 2.6s ease-in-out 1.2s 3;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.video-unmute:hover {
  background: rgba(91, 95, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.4);
}
.video-unmute[hidden] { display: none; }
.video-unmute-icon { font-size: 1rem; line-height: 1; }

@keyframes unmuteNudge {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .video-unmute { animation: none; }
}

/* The player takes a beat to boot even with the connection already open —
   show that the tap landed rather than leaving a dead poster. */
.video.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 46px;
  height: 46px;
  border: 3px solid rgba(255, 255, 255, 0.22);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: videoSpin 0.7s linear infinite;
}
@keyframes videoSpin { to { transform: rotate(360deg); } }
.video-play-icon {
  width: 0; height: 0;
  margin-left: 5px;
  border-left: 17px solid #fff;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}
.video-caption {
  font-size: 0.875rem;
  text-align: center;
  margin: 18px 0 30px;
}
.video-section .btn { display: flex; margin: 0 auto; width: fit-content; }

/* ===== Problem ===== */
.interrupt {
  font-family: 'Satoshi', 'Inter', sans-serif;
  font-size: clamp(1.0625rem, 2vw, 1.3125rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--text);
  border-left: 3px solid var(--indigo);
  background: rgba(91, 95, 255, 0.06);
  padding: 24px 28px;
  border-radius: 0 var(--r) var(--r) 0;
  margin: 30px 0 38px;
}

.plainlist { list-style: none; display: grid; gap: 16px; }
.plainlist li {
  color: var(--gray);
  padding-left: 20px;
  position: relative;
  line-height: 1.6;
}
.plainlist li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--grad);
}

.money {
  margin-top: 38px;
  padding: 26px 28px;
  background: linear-gradient(135deg, rgba(91, 95, 255, 0.08), rgba(0, 194, 255, 0.04));
  border: 1px solid rgba(91, 95, 255, 0.22);
  border-radius: var(--r-lg);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
}
.money strong { color: var(--text); }

/* ===== Steps ===== */
.steps { list-style: none; counter-reset: s; display: grid; gap: 4px; margin-top: 34px; }
.steps li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid var(--border);
}
.steps li:last-child { border-bottom: 1px solid var(--border); }
.step-n {
  /* Span both rows, otherwise the paragraph auto-places into this 56px
     column on row 2 and wraps one word per line. */
  grid-row: span 2;
  font-family: 'Satoshi', 'Inter', sans-serif;
  font-size: 1.125rem;
  font-weight: 900;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.steps h3 { margin-bottom: 6px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.step-t {
  font-family: 'Inter', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  background: rgba(0, 194, 255, 0.08);
  border: 1px solid rgba(0, 194, 255, 0.2);
  padding: 3px 10px;
  border-radius: 100px;
}
.steps p { font-size: 0.9375rem; }

/* On a 375px screen the 56px number column was taking a fifth of the width
   and squeezing the text to 259px. */
@media (max-width: 560px) {
  .steps li { grid-template-columns: 34px 1fr; gap: 14px; }
  .step-n { font-size: 1rem; }
}

/* ===== Proof ===== */
.credential {
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  line-height: 1.7;
  max-width: 58ch;
}

/* ===== Fit ===== */
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 34px; }
.fit-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px 24px;
}
.fit-col--yes { border-color: rgba(34, 211, 165, 0.22); }
.fit-col--no  { border-color: rgba(255, 95, 87, 0.18); }
.fit-col h3 {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.fit-col--yes h3 { color: #22D3A5; }
.fit-col--no  h3 { color: #FF7B73; }
.fit-col ul { list-style: none; display: grid; gap: 12px; }
.fit-col li {
  font-size: 0.9rem;
  color: var(--gray);
  line-height: 1.5;
  padding-left: 20px;
  position: relative;
}
.fit-col--yes li::before { content: '\2713'; color: #22D3A5; position: absolute; left: 0; }
.fit-col--no  li::before { content: '\2717'; color: #FF7B73; position: absolute; left: 0; }

@media (max-width: 640px) { .fit { grid-template-columns: 1fr; } }

/* ===== FAQ ===== */
.faq { margin-top: 34px; border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 44px 20px 0;
  position: relative;
  font-family: 'Satoshi', 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  transition: color 0.2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--indigo);
  transition: transform 0.25s var(--ease);
}
.faq details[open] summary { color: var(--blue); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 0 22px; font-size: 0.9375rem; max-width: 62ch; }

/* ===== Close ===== */
.close { text-align: center; overflow: hidden; }
.close .container { position: relative; z-index: 1; }
.close h2 { margin-bottom: 16px; }
.close .lede { margin: 0 auto 30px; }

/* ===== Footer ===== */
footer {
  background: var(--navy-2);
  border-top: 1px solid var(--border);
  /* Extra room at the foot so the sticky bar can never sit on top of the last
     line of content. Inside the footer's own background, so it reads as
     breathing space rather than a gap. */
  padding: 52px 0 calc(96px + env(safe-area-inset-bottom));
  text-align: center;
}
.footer-inner { display: grid; gap: 16px; justify-items: center; }
.footer-links { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.footer-links a {
  font-size: 0.9rem;
  color: var(--gray);
  /* Padded to a 44px tap target — bare text links were 24px tall. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--r);
}
.footer-links a:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }

/* Icon-only contact links. aria-label carries the name for screen readers. */
.icon-link {
  width: 44px;
  padding: 0;
  justify-content: center;
  border: 1px solid var(--border);
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease),
              background-color 0.18s var(--ease);
}
.icon-link svg { width: 20px; height: 20px; display: block; }
.icon-link:hover {
  color: var(--text);
  border-color: rgba(91, 95, 255, 0.5);
  background: rgba(255, 255, 255, 0.05);
}
.footer-tag {
  font-family: 'Satoshi', 'Inter', sans-serif;
  font-weight: 700;
  color: var(--text);
  font-size: 0.9375rem;
}
.footer-legal { font-size: 0.8125rem; }

/* ==========================================================================
   STICKY CTA
   Sits below the modal (z 1000) and above the page. Hidden until the hero
   CTA scrolls away, and again once the closing CTA is on screen — no point
   shouting the same action twice in one viewport.
   ========================================================================== */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 800;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(11, 15, 26, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateY(120%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.32s var(--ease), visibility 0.32s;
}

/* Fade the page out above the bar. Without this, text is guillotined
   mid-sentence at the bar's edge and it reads as a button dropped on top of
   the content rather than a deliberate strip. */
.sticky-cta::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: 48px;
  background: linear-gradient(to top, rgba(11, 15, 26, 0.97), transparent);
  pointer-events: none;
}
.sticky-cta.show {
  transform: none;
  visibility: visible;
  pointer-events: auto;
}

.sticky-cta-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.sticky-cta-text {
  font-size: 0.9375rem;
  color: var(--text);
  font-weight: 500;
}
.sticky-cta .btn { white-space: nowrap; }

/* On phones the supporting line just steals thumb space. */
@media (max-width: 700px) {
  .sticky-cta { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
  .sticky-cta-text { display: none; }
  .sticky-cta .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
}

/* ==========================================================================
   BOOKING MODAL
   ========================================================================== */
.bm-overlay {
  position: fixed;
  inset: 0;
  /* On phones, `vh` measures the viewport as if the browser chrome were not
     there, so the foot of the dialog — and the submit button — ends up behind
     the address bar. `dvh` measures what is actually visible. */
  height: 100vh;
  height: 100dvh;
  z-index: 1000;
  background: rgba(7, 10, 20, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease), visibility 0.25s;
}
.bm-overlay.open { opacity: 1; visibility: visible; }

.bm-container {
  position: relative;
  width: 100%;
  max-width: 660px;
  margin: auto;
  background: var(--navy-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 36px;
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.bm-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--gray);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
  z-index: 2;
}
.bm-close:hover { background: rgba(255, 255, 255, 0.07); color: var(--text); }

.bm-steps { display: flex; align-items: center; margin-bottom: 30px; padding-right: 44px; }
.bm-step { display: flex; align-items: center; gap: 9px; opacity: 0.35; transition: opacity 0.25s var(--ease); }
.bm-step.active { opacity: 1; }
.bm-step.done { opacity: 0.6; }
.bm-step-num {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gray);
  flex-shrink: 0;
}
.bm-step.active .bm-step-num { background: var(--grad); border-color: transparent; color: #fff; }
.bm-step.done  .bm-step-num { background: rgba(34, 211, 165, 0.15); border-color: rgba(34, 211, 165, 0.3); color: #22D3A5; }
.bm-step-label { font-size: 0.78rem; font-weight: 600; color: var(--gray); white-space: nowrap; }
.bm-step.active .bm-step-label { color: var(--text); }
.bm-step-line { flex: 1; height: 1px; background: var(--border); margin: 0 12px; min-width: 16px; }

.bm-panel { display: none; }
.bm-panel.active { display: block; }
.bm-panel-header { margin-bottom: 26px; }
.bm-panel-header h3 { font-size: clamp(1.25rem, 3vw, 1.5rem); font-weight: 800; margin-bottom: 8px; }
.bm-panel-header p { font-size: 0.9375rem; }

/* Calendly renders its own light UI unless you are on a paid plan, so give it
   a deliberate white card rather than letting it look like a broken embed.
   Explicit height — a min-height alone collapses and double-scrolls. */
.calendly-inline-widget {
  height: 680px;
  background: #fff;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.calendly-inline-widget iframe { display: block; width: 100%; height: 100%; border: 0; }

@media (max-width: 600px) {
  .calendly-inline-widget { height: 620px; }
}

.bm-form { display: grid; gap: 18px; }

/* Section heading inside the form — breaks 13 fields into readable groups. */
.bm-group {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-top: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.bm-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bm-field { display: grid; gap: 7px; min-width: 0; border: 0; }
.bm-field label, .bm-field legend {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray);
  padding: 0;
}
.bm-field legend { margin-bottom: 9px; }

.bm-field input, .bm-field select, .bm-field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 14px;
  transition: border-color 0.18s var(--ease);
}
.bm-field input::placeholder, .bm-field textarea::placeholder { color: #6E7480; }
.bm-field select { appearance: none; cursor: pointer; }
/* Windows dark mode renders unstyled options unreadably. */
.bm-field select option { background: var(--navy-2); color: var(--text); }
.bm-field textarea { resize: vertical; min-height: 88px; line-height: 1.55; }
.bm-field :is(input, select, textarea):focus { border-color: var(--indigo); }
.bm-field :is(input, select, textarea):user-invalid { border-color: #FF7B73; }

.bm-radio-group { display: grid; gap: 9px; }
.bm-radio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color 0.18s var(--ease);
}
.bm-radio:hover { border-color: rgba(91, 95, 255, 0.4); }
.bm-radio input { width: 16px; height: 16px; margin-top: 3px; accent-color: var(--indigo); flex-shrink: 0; }
.bm-radio span { font-size: 0.875rem; color: var(--gray); line-height: 1.5; }

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.bm-field-error { font-size: 0.8125rem; color: #FF7B73; min-height: 1.2em; }
.bm-submit { width: 100%; margin-top: 4px; }

.bm-confirmation { text-align: center; padding: 12px 0; }
.bm-confirm-icon {
  width: 60px; height: 60px;
  margin: 0 auto 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(34, 211, 165, 0.1);
  border: 1px solid rgba(34, 211, 165, 0.3);
  color: #22D3A5;
  font-size: 1.5rem;
}
.bm-confirmation h3 { font-size: clamp(1.3rem, 3vw, 1.6rem); font-weight: 800; margin-bottom: 12px; }
.bm-confirmation p { max-width: 44ch; margin: 0 auto 28px; font-size: 0.9375rem; }

@media (max-width: 600px) {
  /* Extra foot padding so the submit button clears the address bar even while
     it is animating in and out on scroll. */
  .bm-container {
    padding: 24px 18px calc(40px + env(safe-area-inset-bottom));
    max-height: 95vh;
    max-height: 95dvh;
  }
  .bm-field-row { grid-template-columns: 1fr; }
  .bm-step-label { display: none; }
  .bm-steps { justify-content: center; padding-right: 44px; }
}

/* ==========================================================================
   MOTION
   ========================================================================== */
[data-animate] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
[data-animate].in-view { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-animate] { opacity: 1; transform: none; }
}