/* =============================================================================
   BUAMS AI new-ui — LANDING / HOME PAGE
   Spec: /frontend_design.md §K

   Page-specific only. Anything that appears on a second page is promoted to
   components/ in the same change that introduces the second use (spec §L).
   ============================================================================= */

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.bui-hero {
  position: relative;
  padding-block: var(--bui-space-16) var(--bui-space-12);
  background:
    radial-gradient(ellipse 80% 60% at 72% -10%, var(--bui-primary-50), transparent 60%),
    var(--bui-surface);
  overflow: hidden;
}

.bui-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: var(--bui-space-12);
}

.bui-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  max-width: 100%;
  gap: var(--bui-space-2);
  margin-bottom: var(--bui-space-5);
  padding: var(--bui-space-1) var(--bui-space-3) var(--bui-space-1) var(--bui-space-1);
  background: var(--bui-surface);
  border: 1px solid var(--bui-primary-200);
  border-radius: var(--bui-radius-pill);
  box-shadow: var(--bui-shadow-xs);
  font-size: var(--bui-text-xs);
  font-weight: var(--bui-fw-semibold);
  color: var(--bui-ink-700);
}

.bui-hero-eyebrow-tag {
  padding: 2px var(--bui-space-2);
  background: var(--bui-primary-700);
  border-radius: var(--bui-radius-pill);
  font-size: var(--bui-text-overline);
  font-weight: var(--bui-fw-heavy);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
}

.bui-hero-title {
  font-size: clamp(2rem, 1.3rem + 2.9vw, 3.25rem);
  line-height: 1.08;
  font-weight: var(--bui-fw-heavy);
  letter-spacing: -.03em;
  color: var(--bui-ink-900);
}

.bui-hero-title em {
  font-style: normal;
  color: var(--bui-primary-700);
}

/* The hard break shapes the headline on wide screens ("…system and be" /
   "ready for audit day."). Below md the line is already wrapping, so the extra
   break only orphans a fragment — let the text wrap naturally instead. */
@media (max-width: 767.98px) {
  .bui-hero-title br { display: none; }
}

.bui-hero-lede {
  max-width: 560px;
  margin-top: var(--bui-space-5);
  font-size: 1.0625rem;
  line-height: var(--bui-lh-normal);
  color: var(--bui-ink-500);
}

.bui-hero-actions {
  display: flex;
  align-items: center;
  gap: var(--bui-space-3);
  flex-wrap: wrap;
  margin-top: var(--bui-space-8);
}

.bui-hero-note {
  display: flex;
  align-items: center;
  gap: var(--bui-space-4);
  flex-wrap: wrap;
  margin-top: var(--bui-space-5);
  font-size: var(--bui-text-xs);
  color: var(--bui-ink-500);
}

.bui-hero-note span {
  display: inline-flex;
  align-items: center;
  gap: var(--bui-space-1);
}

.bui-hero-note .bi {
  color: var(--bui-success);
}

/* ── Hero price anchor ────────────────────────────────────────────────────
   The entry price, above the fold. Solo leads: the pricing teaser used to
   render clinic plans only, so the first number on the site was the clinic
   floor of $186/month while the $48.99 solo tier was hidden behind a toggle
   on /pricing. */
.bui-hero-price {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bui-space-1) var(--bui-space-3);
  margin-top: var(--bui-space-4);
  padding-top: var(--bui-space-4);
  border-top: 1px solid var(--bui-line);
  font-size: var(--bui-text-sm);
  color: var(--bui-ink-700);
}

.bui-hero-price strong {
  font-weight: var(--bui-fw-heavy);
  color: var(--bui-ink-900);
}

.bui-hero-price-sep { color: var(--bui-ink-300); }

.bui-hero-price-link {
  font-size: var(--bui-text-xs);
  font-weight: var(--bui-fw-semibold);
}

/* ── Hero program chips ───────────────────────────────────────────────────
   Behavioral health buyers self-qualify by program type before they read
   anything else, and this used to sit six sections down the page. The chips
   are the three-second qualifier; §6 is still where the argument lives.

   Presentational only — §6 carries the same list as real content, so these
   are not the accessible source of that information. The full program name
   rides on each chip's title attribute. */
.bui-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bui-space-2);
  margin: var(--bui-space-5) 0 0;
  padding: 0;
  list-style: none;
}

.bui-hero-chip {
  padding: var(--bui-space-1) var(--bui-space-3);
  border: 1px solid var(--bui-line-strong);
  border-radius: var(--bui-radius-pill);
  background: var(--bui-surface);
  font-size: var(--bui-text-overline);
  font-weight: var(--bui-fw-heavy);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--bui-ink-700);
  cursor: default;
}

/* ── Stacked hero ─────────────────────────────────────────────────────────
   The product artwork is 1836x856 — 2.15:1, with six labelled callouts across
   it. Beside the copy in a .95fr column it rendered about 520px wide and those
   labels fell under 5px. An unreadable picture of a product proves less than
   no picture, so the copy takes the width above it and the shot takes the full
   container below.

   Applied as a modifier: remove .bui-hero-stacked from the markup and the
   two-column hero comes back unchanged. */
.bui-hero-grid.bui-hero-stacked {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bui-space-12);
  justify-items: center;
  text-align: center;
}

/* Centred, not full-bleed: a lede running the whole width of a desktop screen
   is hard to track, and centred text is harder still the longer the line. */
.bui-hero-stacked .bui-hero-copy {
  max-width: 800px;
}

/* These four are flex rows that were left-aligned in the two-column hero. */
.bui-hero-stacked .bui-hero-actions,
.bui-hero-stacked .bui-hero-note,
.bui-hero-stacked .bui-hero-price,
.bui-hero-stacked .bui-hero-chips {
  justify-content: center;
}

/* justify-items on the grid stretches the eyebrow's inline-flex box; this
   stops it and lets the parent centre it. */
.bui-hero-stacked .bui-hero-eyebrow {
  align-self: center;
}

.bui-hero-stacked .bui-hero-visual {
  width: 100%;
}

/* ── Hero product shot ────────────────────────────────────────────────────
   The corner and the shadow live here rather than in the file, so the artwork
   sits on the hero's gradient without carrying a background of its own and the
   shadow can be tuned without re-exporting. */
.bui-shot {
  position: relative;
  width: 100%;
  margin-inline: auto;
}

.bui-shot-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--bui-radius-lg);
  /* Two shadows: a tight contact shadow to seat it, and a wide soft one for
     lift. One shadow doing both jobs reads as a sticker. */
  box-shadow:
    0 1px 2px rgba(15, 26, 21, .06),
    0 24px 56px -12px rgba(15, 26, 21, .18);
}

/* ── Float ────────────────────────────────────────────────────────────────
   A slow vertical drift, 7s each way, 14s for a full cycle. Deliberately
   small: 8px reads as buoyant at this size, and much more starts to look like
   the page is loose. Transform only — animating top or margin would relayout
   the section on every frame.

   reset.css already collapses animation-duration under prefers-reduced-motion,
   but `alternate` would then park the element at the end of its travel instead
   of at rest. The rule below returns it to zero. */
@keyframes bui-float {
  from { transform: translate3d(0, -8px, 0); }
  to   { transform: translate3d(0,  8px, 0); }
}

.bui-shot-float {
  animation: bui-float 7s ease-in-out infinite alternate;
  /* Promotes the layer once instead of on every frame. Scoped to this one
     element: will-change applied broadly costs more memory than it saves. */
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .bui-shot-float {
    animation: none;
    transform: none;
    will-change: auto;
  }
}

/* ── Hero / AI illustrations ──────────────────────────────────────────────
   These replaced the mock "clinic dashboard" and "progress note" panels. The
   old rules (.bui-hero-panel / -row / -stat) were deleted with them rather
   than left behind as dead CSS (spec §L). */
.bui-hero-visual {
  position: relative;
}

.bui-hero-art,
.bui-ai-art {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
}

.bui-hero-art svg,
.bui-ai-art svg {
  display: block;
  width: 100%;
  height: auto;
}

/* The illustration is decorative reinforcement, not the message. Cap it so it
   never out-sizes the headline it sits beside. */
@media (min-width: 992px) {
  .bui-hero-art { max-width: 520px; }
  .bui-ai-art   { max-width: 480px; }
}

@media (max-width: 991.98px) {
  .bui-hero-art { max-width: 420px; }
  .bui-ai-art   { max-width: 420px; }
}

@media (max-width: 575.98px) {
  .bui-hero-art { max-width: 320px; }
  .bui-ai-art   { max-width: 320px; }
}

@media (max-width: 991.98px) {
  .bui-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--bui-space-10); }
  /* Headline first on small screens. The visual used to lead because it was a
     product screenshot carrying real information; a decorative illustration
     leading would only push the value proposition below the fold. */
  .bui-hero-visual { order: 1; }
  .bui-hero { padding-block: var(--bui-space-12) var(--bui-space-10); }
}

@media (max-width: 575.98px) {
  .bui-hero-actions .bui-btn { width: 100%; }
  .bui-hero-note { gap: var(--bui-space-2); }
  /* The anchor stacks rather than wrapping mid-clause, so "Clinics from $99/mo
     + $29 per clinician" never breaks across the separator. */
  .bui-hero-price { flex-direction: column; align-items: flex-start; }
  .bui-hero-price-sep { display: none; }
}

/* Below 380px the four program tiles read better stacked than as a 2-up grid
   with two words per line. */
@media (max-width: 379.98px) {
  .bui-program-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Accreditation marquee ────────────────────────────────────────────────── */
.bui-marquee {
  display: flex;
  align-items: center;
  gap: var(--bui-space-6);
  padding-block: var(--bui-space-5);
  background: var(--bui-primary-900);
  overflow: hidden;
}

.bui-marquee-label {
  flex-shrink: 0;
  padding-left: var(--bui-space-6);
  font-size: var(--bui-text-overline);
  font-weight: var(--bui-fw-heavy);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
  white-space: nowrap;
}

.bui-marquee-viewport {
  position: relative;
  display: flex;
  overflow: hidden;
  width: 100%;
}

.bui-marquee-track {
  display: flex;
  align-items: center;
  gap: var(--bui-space-12);
  flex-shrink: 0;
  padding-right: var(--bui-space-12);
  animation: bui-marquee 26s linear infinite;
}

.bui-marquee:hover .bui-marquee-track,
.bui-marquee:focus-within .bui-marquee-track {
  animation-play-state: paused;
}

.bui-marquee-track img {
  height: 42px;
  width: auto;
  border-radius: var(--bui-radius-sm);
  opacity: .9;
}

@keyframes bui-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* An infinite marquee is exactly the motion this media query exists for. */
@media (prefers-reduced-motion: reduce) {
  .bui-marquee-track { animation: none; }
  .bui-marquee-viewport { overflow-x: auto; }
}

@media (max-width: 767.98px) {
  .bui-marquee { flex-direction: column; align-items: flex-start; gap: var(--bui-space-3); }
  .bui-marquee-label { padding-left: var(--bui-space-4); }
}

/* ── Problem cards ────────────────────────────────────────────────────────── */
.bui-problem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bui-space-6);
}

.bui-problem {
  padding: var(--bui-space-6);
  background: var(--bui-surface);
  border: 1px solid var(--bui-line);
  border-left: 3px solid var(--bui-danger);
  border-radius: var(--bui-radius-lg);
}

.bui-problem-title {
  margin-bottom: var(--bui-space-2);
  font-size: var(--bui-text-h3);
  font-weight: var(--bui-fw-bold);
  color: var(--bui-ink-900);
}

.bui-problem-body {
  font-size: var(--bui-text-sm);
  line-height: var(--bui-lh-normal);
  color: var(--bui-ink-500);
}

/* ── Capability cards ─────────────────────────────────────────────────────── */
.bui-cap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bui-space-5);
}

.bui-cap {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--bui-space-6);
  background: var(--bui-surface);
  border: 1px solid var(--bui-line);
  border-radius: var(--bui-radius-lg);
  transition: border-color var(--bui-transition),
              box-shadow var(--bui-transition),
              transform var(--bui-transition);
}

a.bui-cap:hover {
  transform: translateY(-2px);
  border-color: var(--bui-primary-200);
  box-shadow: var(--bui-shadow-md);
  text-decoration: none;
}

.bui-cap-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--bui-space-4);
  background: var(--bui-primary-100);
  border-radius: var(--bui-radius-md);
  color: var(--bui-primary-700);
  font-size: 1.25rem;
}

.bui-cap-title {
  margin-bottom: var(--bui-space-2);
  font-size: var(--bui-text-h3);
  font-weight: var(--bui-fw-bold);
  color: var(--bui-ink-900);
}

.bui-cap-body {
  font-size: var(--bui-text-sm);
  line-height: var(--bui-lh-normal);
  color: var(--bui-ink-500);
}

.bui-cap-more {
  display: inline-flex;
  align-items: center;
  gap: var(--bui-space-1);
  margin-top: var(--bui-space-4);
  font-size: var(--bui-text-sm);
  font-weight: var(--bui-fw-semibold);
  color: var(--bui-primary-700);
}

@media (max-width: 991.98px) {
  .bui-cap-grid,
  .bui-problem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .bui-cap-grid,
  .bui-problem-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── AI split ─────────────────────────────────────────────────────────────── */
.bui-ai-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--bui-space-12);
}

.bui-ai-list {
  display: flex;
  flex-direction: column;
  gap: var(--bui-space-5);
  margin-top: var(--bui-space-8);
  list-style: none;
}

.bui-ai-item {
  display: flex;
  align-items: flex-start;
  gap: var(--bui-space-3);
}

.bui-ai-item-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--bui-radius-md);
  color: #fff;
}

.bui-ai-item-title {
  display: block;
  font-size: var(--bui-text-body);
  font-weight: var(--bui-fw-bold);
  color: #fff;
}

.bui-ai-item-sub {
  display: block;
  margin-top: 2px;
  font-size: var(--bui-text-sm);
  line-height: var(--bui-lh-normal);
  color: rgba(255, 255, 255, .70);
}

/* The clinician-in-control guardrail. Deliberately visually distinct — it is
   a safety statement, not a feature bullet. */
.bui-ai-guardrail {
  display: flex;
  align-items: flex-start;
  gap: var(--bui-space-3);
  margin-top: var(--bui-space-8);
  padding: var(--bui-space-4) var(--bui-space-5);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--bui-radius-lg);
  font-size: var(--bui-text-sm);
  line-height: var(--bui-lh-normal);
  color: rgba(255, 255, 255, .86);
}

.bui-ai-guardrail .bi {
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 1.1rem;
  color: #fff;
}

@media (max-width: 991.98px) {
  .bui-ai-grid { grid-template-columns: minmax(0, 1fr); gap: var(--bui-space-8); }
}

/* ── Program types ────────────────────────────────────────────────────────── */
.bui-program-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--bui-space-4);
}

.bui-program {
  padding: var(--bui-space-5);
  background: var(--bui-surface);
  border: 1px solid var(--bui-line);
  border-radius: var(--bui-radius-lg);
  text-align: center;
}

.bui-program-abbr {
  display: block;
  font-size: 1.25rem;
  font-weight: var(--bui-fw-heavy);
  color: var(--bui-primary-700);
}

.bui-program-name {
  display: block;
  margin-top: var(--bui-space-1);
  font-size: var(--bui-text-xs);
  line-height: var(--bui-lh-snug);
  color: var(--bui-ink-500);
}

@media (max-width: 767.98px) {
  .bui-program-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Testimonials ─────────────────────────────────────────────────────────── */
.bui-quote-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bui-space-5);
}

.bui-quote {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--bui-space-6);
  background: var(--bui-surface);
  border: 1px solid var(--bui-line);
  border-radius: var(--bui-radius-lg);
}

.bui-quote-mark {
  margin-bottom: var(--bui-space-3);
  font-size: 1.4rem;
  color: var(--bui-primary-200);
}

.bui-quote-body {
  flex: 1 1 auto;
  overflow-wrap: anywhere;
  font-size: var(--bui-text-sm);
  line-height: var(--bui-lh-normal);
  color: var(--bui-ink-700);
}

.bui-quote-person {
  display: flex;
  align-items: center;
  gap: var(--bui-space-3);
  margin-top: var(--bui-space-5);
  padding-top: var(--bui-space-4);
  border-top: 1px solid var(--bui-line);
}

.bui-quote-avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: var(--bui-primary-100);
  border-radius: 50%;
  object-fit: cover;
  font-size: var(--bui-text-sm);
  font-weight: var(--bui-fw-heavy);
  color: var(--bui-primary-700);
}

.bui-quote-name {
  display: block;
  font-size: var(--bui-text-sm);
  font-weight: var(--bui-fw-bold);
  color: var(--bui-ink-900);
}

.bui-quote-role {
  display: block;
  font-size: var(--bui-text-xs);
  color: var(--bui-ink-500);
}

@media (max-width: 991.98px) { .bui-quote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)    { .bui-quote-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── Pricing teaser ───────────────────────────────────────────────────────── */
.bui-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bui-space-5);
  align-items: stretch;
}

.bui-plan {
  display: flex;
  flex-direction: column;
  padding: var(--bui-space-6);
  background: var(--bui-surface);
  border: 1px solid var(--bui-line);
  border-radius: var(--bui-radius-lg);
}

.bui-plan-featured {
  border-color: var(--bui-primary-700);
  box-shadow: var(--bui-shadow-md);
}

.bui-plan-name {
  font-size: var(--bui-text-h3);
  font-weight: var(--bui-fw-bold);
  color: var(--bui-ink-900);
}

.bui-plan-price {
  display: flex;
  align-items: baseline;
  gap: var(--bui-space-1);
  margin-block: var(--bui-space-3);
}

.bui-plan-amount {
  font-size: 2rem;
  font-weight: var(--bui-fw-heavy);
  letter-spacing: -.02em;
  color: var(--bui-ink-900);
}

.bui-plan-cycle {
  font-size: var(--bui-text-sm);
  color: var(--bui-ink-500);
}

/* Per-seat line on the teaser card. Clinic pricing is base + seat, and the
   seat half is the part a reader most easily misses. */
.bui-plan-seatline {
  margin-bottom: var(--bui-space-4);
  padding: var(--bui-space-2) var(--bui-space-3);
  background: var(--bui-primary-50);
  border: 1px solid var(--bui-primary-200);
  border-radius: var(--bui-radius-md);
  font-size: var(--bui-text-sm);
  font-weight: var(--bui-fw-semibold);
  color: var(--bui-primary-800);
  font-variant-numeric: tabular-nums;
}

.bui-plan-desc {
  flex: 1 1 auto;
  margin-bottom: var(--bui-space-5);
  font-size: var(--bui-text-sm);
  line-height: var(--bui-lh-normal);
  color: var(--bui-ink-500);
}

@media (max-width: 991.98px) { .bui-plan-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── Clinic switch strip ──────────────────────────────────────────────────
   Sits under the solo cards in the pricing teaser. Deliberately a single
   horizontal strip rather than a second card grid: a clinic buyer reaching
   this point is checking the shape of the pricing model before booking a
   demo, not comparing tiers on a landing page. Making it a card grid would
   also put the $186 floor back in front of every visitor, which is the leak
   the solo-first ordering closes. */
.bui-plan-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--bui-space-5);
  margin-top: var(--bui-space-8);
  padding: var(--bui-space-6);
  border: 1px solid var(--bui-line);
  border-radius: var(--bui-radius-lg);
  background: var(--bui-surface);
}

.bui-plan-switch-copy { flex: 1 1 320px; }

.bui-plan-switch-title {
  margin: 0 0 var(--bui-space-1);
  font-size: var(--bui-text-h3);
  font-weight: var(--bui-fw-heavy);
  color: var(--bui-ink-900);
}

.bui-plan-switch-body {
  margin: 0;
  max-width: 62ch;
  font-size: var(--bui-text-sm);
  line-height: var(--bui-lh-normal);
  color: var(--bui-ink-500);
}

.bui-plan-switch-body strong {
  font-weight: var(--bui-fw-heavy);
  color: var(--bui-ink-900);
}

.bui-plan-switch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bui-space-2);
}

@media (max-width: 575.98px) {
  .bui-plan-switch { padding: var(--bui-space-5); }
  .bui-plan-switch-actions { width: 100%; }
  .bui-plan-switch-actions .bui-btn { flex: 1 1 140px; }
}

/* ── Sticky mobile action bar ─────────────────────────────────────────────
   Phone visitors used to lose every call to action the moment the hero
   scrolled: the buttons stacked, scrolled away, and the only copies left were
   behind the hamburger. Nine sections with nothing to tap.

   Revealed by landing.js once the hero has left the viewport, so it never
   sits on top of the hero's own buttons. Desktop keeps it hidden — the sticky
   header already carries both actions there. */
.bui-sticky-cta {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 1020;
  display: none;
  gap: var(--bui-space-2);
  padding: var(--bui-space-3);
  /* The iOS home indicator overlaps the bottom of the viewport. */
  padding-bottom: calc(var(--bui-space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--bui-surface);
  border-top: 1px solid var(--bui-line);
  box-shadow: 0 -4px 16px rgba(15, 26, 21, .08);
  transform: translateY(100%);
  transition: transform var(--bui-transition-slow);
}

.bui-sticky-cta .bui-btn { flex: 1 1 0; margin: 0; }

.bui-sticky-cta.is-visible { transform: translateY(0); }

@media (max-width: 767.98px) {
  /* [hidden] is !important in reset.css, so landing.js clears the attribute
     rather than relying on this rule to beat it. */
  .bui-sticky-cta:not([hidden]) { display: flex; }

  /* Stop the footer's last element from sitting under the bar. */
  .bui-site-footer { padding-bottom: calc(var(--bui-space-16) + env(safe-area-inset-bottom, 0px)); }
}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.bui-faq {
  border-top: 1px solid var(--bui-line);
}

.bui-faq-item {
  border-bottom: 1px solid var(--bui-line);
}

.bui-faq-trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bui-space-4);
  width: 100%;
  padding: var(--bui-space-5) 0;
  background: none;
  border: 0;
  text-align: left;
  font-size: var(--bui-text-h3);
  font-weight: var(--bui-fw-semibold);
  color: var(--bui-ink-900);
  cursor: pointer;
}

.bui-faq-trigger:hover { color: var(--bui-primary-700); }

.bui-faq-trigger:focus-visible {
  outline: 2px solid var(--bui-primary-700);
  outline-offset: -2px;
  border-radius: var(--bui-radius-sm);
}

.bui-faq-icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--bui-primary-700);
  transition: transform var(--bui-transition);
}

.bui-faq-trigger[aria-expanded='true'] .bui-faq-icon {
  transform: rotate(45deg);
}

.bui-faq-panel {
  padding-bottom: var(--bui-space-5);
  font-size: var(--bui-text-body);
  line-height: var(--bui-lh-normal);
  color: var(--bui-ink-500);
}

/* ── Closing CTA ──────────────────────────────────────────────────────────── */
.bui-cta {
  padding: var(--bui-space-12);
  background: linear-gradient(160deg, var(--bui-primary-900), var(--bui-primary-700) 60%, var(--bui-primary-600));
  border-radius: var(--bui-radius-xl);
  text-align: center;
  color: #fff;
}

.bui-cta-title {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);
  line-height: var(--bui-lh-tight);
  font-weight: var(--bui-fw-heavy);
  letter-spacing: -.02em;
  color: #fff;
}

.bui-cta-lede {
  max-width: 560px;
  margin: var(--bui-space-4) auto 0;
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, .80);
}

.bui-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--bui-space-3);
  flex-wrap: wrap;
  margin-top: var(--bui-space-8);
}

/* On the dark CTA the primary button must not be brand-on-brand */
.bui-cta .bui-btn-primary {
  background: #fff;
  border-color: #fff;
  color: var(--bui-primary-800);
}

.bui-cta .bui-btn-primary:hover:not(:disabled) {
  background: var(--bui-primary-50);
  border-color: var(--bui-primary-50);
  color: var(--bui-primary-900);
}

.bui-cta .bui-btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
}

.bui-cta .bui-btn-outline:hover:not(:disabled) {
  background: rgba(255, 255, 255, .10);
  border-color: #fff;
  color: #fff;
}

@media (max-width: 575.98px) {
  .bui-cta { padding: var(--bui-space-8) var(--bui-space-5); }
  .bui-cta-actions .bui-btn { width: 100%; }
}