/* ============================================================================
   Bamboo Homepage — new design
   Ported from Claude Design "Bamboo Homepage.dc.html".

   CSP: this site has no build step and ships with a static CSP header that has
   no 'unsafe-inline'. Every style the design expressed as a style="" attribute
   lives here as a class instead. See scripts/check-csp.mjs.
   ========================================================================== */

:root {
  /* Palette — exactly the values used by the design */
  --bam-bg: #fcfdff;
  --bam-ink: #172c4a;
  --bam-ink-900: #0d1f2d;
  --bam-ink-950: #02182b;
  --bam-blue: #4d76ec;
  --bam-blue-hover: #3d63d4;
  --bam-lime: #c6f91f;
  --bam-lime-hover: #b6e814;
  --bam-cream: #fffbf5;
  --bam-hero-navy: #0b1220;

  /* Content column — the design canvas width, shared by all sections. */
  --bam-container: 1440px;

  /* The lime wash behind "How it works" and Compliance. In pixels, not the
     design's percentages, which scaled with section height and produced a huge
     clipped ellipse in the taller Compliance section. Note these are radii, so
     340px draws a 680px circle — big enough to read, small enough to clear both
     sections' edges. */
  --bam-lime-wash: radial-gradient(340px 340px at 26.25% 50%, rgba(198, 249, 31, 0.2) 0%, rgba(255, 251, 245, 0.2) 88.46%);

  /* Hero overlay strength — design prop `heroOverlay`, default 0.7 */
  --bam-hero-overlay: 0.7;
  /* Marquee duration — design prop `marqueeSeconds`, default 32 */
  --bam-marquee-duration: 32s;
}

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

body {
  margin: 0;
  background: var(--bam-bg);
  font-family: Inter, sans-serif;
  color: var(--bam-ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

/* ==========================================================================
   1. HERO  (nav + headline + call-me form)
   ========================================================================== */

.hero {
  position: relative;
  width: 100%;
  /* Fills the viewport whatever the screen height, rather than the design's flat
     800px, which left a gap on tall monitors and cropped on short laptops. Still
     a minimum, so the section grows if the copy ever needs more room.

     svh, not vh, and vh only as the fallback for browsers without it: on a phone
     100vh is measured with the browser's address bar retracted, so the section is
     taller than what you can actually see and the page shifts as the bar slides
     in and out. svh is the height with the bar showing — slightly shorter, but it
     never moves. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bam-hero-navy);
}

/* .jpeg, not .png: a 4096px photo as PNG is ~10MB, and CI only syncs *.jpeg
   (not *.jpg) to S3.

   `cover`, not the v2 export's `background-size: 127.885% 128.472%`. Two
   different percentages scale width and height independently, which stretches
   the photo out of proportion — barely visible on a wide desktop hero, obvious
   in the narrow, tall box on a phone. The position keeps v2's focal point. */
.hero-photo {
  position: absolute;
  inset: 0;
  background-image: url('/assets/hero-store.jpeg');
  background-size: cover;
  background-position: 9.43% 35.834%;
}

/* Flat scrim, then the directional radial that darkens the lower-left where
   the headline sits. Opacity is the design's `heroOverlay` prop. */
.hero-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
}

/* v2 reverses this: instead of darkening the edges, it lays a soft dark pool
   over the lower-left, exactly where the headline sits. */
.hero-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(89% 132% at 28.85% 68.87%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 65.52%);
  opacity: var(--bam-hero-overlay);
}

/* --- nav --- */

/* Overlays the hero photo without taking space in the flow. On mobile it stays
   absolute, so it scrolls away with the page; from 901px up it is fixed, so it
   rides along. */
.hero-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  padding: 0 clamp(20px, 3vw, 40px);
  background: rgba(77, 118, 236, 0.6);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

/* The bar stays full-bleed; its contents are capped at the same 1900px as the
   hero copy, so the logo and account icon do not drift to the screen edges. */
.hero-nav-inner {
  width: 100%;
  max-width: 1900px;
  margin: 0 auto;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

@media (min-width: 901px) {
  .hero-nav { position: fixed; }

  /* Anchor targets stop clear of the 72px fixed bar instead of landing under it */
  #product,
  #solutions,
  #compliance,
  #pricing { scroll-margin-top: 96px; }

  /* Once it leaves the hero photo it sits over light sections, where a
     half-transparent bar would be hard to read. */
  .hero-nav.is-scrolled {
    background: rgba(77, 118, 236, 0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 24px rgba(23, 44, 74, 0.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-nav { transition: none; }
  .hero-kicker,
  .hero-title { animation: none; }
}

.hero-nav-logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.hero-nav-logo svg { display: block; }

.hero-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

/* Secondary to the signup CTA - plain text, no pill, so it doesn't compete
   with the lime button next to it (index.html only, see js/bamboo-ui.js
   comment on why the CTA links live directly in the markup). */
.hero-nav-login {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 8px;
  color: var(--bam-cream);
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.hero-nav-login:hover { opacity: 0.8; }

/* Sits in the 72px bar, so 48px leaves 12px of breathing room above and
   below. Same lime/ink pill as the callback submits, one size up. */
.hero-nav-cta {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 24px;
  border-radius: 16px;
  background: var(--bam-lime);
  color: var(--bam-ink);
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.hero-nav-cta:hover {
  background: var(--bam-lime-hover);
  color: var(--bam-ink);
}

/* --- headline block --- */

/* Capped and centred so the copy stops tracking the screen edge on wide
   monitors. 1900px, wider than the 1440px content column, keeps the headline
   further out than the sections below it. */
.hero-body {
  position: relative;
  z-index: 2;
  flex: 1;
  width: 100%;
  max-width: 1900px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  padding: clamp(80px, 14vw, 200px) clamp(24px, 7vw, 100px) clamp(48px, 7vw, 100px);
}

/* v2 centres the column's children in its width: the kicker, the headline, the
   form block and its note. 780px so the headline fits on one line at its 70px
   maximum, rather than the design's 629px, where it wrapped. */
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 41px between the boxes reads as 50px to the eye: with line-height 1 the
     headline's box keeps ~9px of unused descender space below the letters, and
     "Never Miss a Call." has no descenders to fill it. */
  gap: 41px;
  width: 780px;
  max-width: 100%;
}

.hero-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* v2 values: line-height 1 and no negative tracking. */
.hero-title {
  margin: 0;
  animation: bamHeroIn 0.6s ease 0.28s both;
  font-size: clamp(40px, 5.2vw, 70px);
  font-weight: 800;
  line-height: 1;
  text-align: center;
  color: var(--bam-bg);
}

/* Entrance for the two hero lines: the kicker leads, the headline follows a
   fraction later. `both` holds the start state so nothing flashes at full
   opacity before the animation begins. */
@keyframes bamHeroIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* Sits above the headline, per Figma — the exported design HTML had it below. */
.hero-kicker {
  animation: bamHeroIn 0.6s ease 0.1s both;
  margin: 0 0 8px;
  font-family: Magra, serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.6;
  /* matters once it wraps on narrow screens: the block is centred but the text
     inside it would otherwise stay left */
  text-align: center;
  color: var(--bam-lime);
}

/* --- phone capture form --- */

.hero-form-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 400px;
  max-width: 100%;
}

/* v2 values: taller padding, a slightly more opaque field, fixed-width button */
.hero-form {
  width: 100%;
  padding: 8px 4px 8px 20px;
  background: rgba(252, 253, 255, 0.4);
}

.hero-submit { min-width: 180px; }

.hero-note { line-height: 1; }

.bam-phone-form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 400px;
  max-width: 100%;
  height: 56px;
  padding: 4px 4px 4px 20px;
  border-radius: 20px;
  background: rgba(252, 253, 255, 0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.bam-phone-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: Inter, sans-serif;
  font-size: 16px;
  line-height: 1.2;
  color: var(--bam-cream);
}

.bam-phone-input::placeholder { color: var(--bam-cream); opacity: 1; }

/* Country-code picker (index.html only, see js/bamboo-ui.js) - same option
   set/order as the app's own create-account form. Options are styled
   explicitly since the native dropdown popup can't inherit the glass
   form's translucent background on any platform. */
.bam-phone-prefix {
  flex: 0 0 58px;
  width: 58px;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  outline: 0;
  background: transparent;
  font-family: Inter, sans-serif;
  font-size: 13px;
  line-height: 1.2;
  color: var(--bam-cream);
  padding-right: 4px;
  cursor: pointer;
}

.bam-phone-prefix option { color: var(--bam-ink); background: var(--bam-cream); }

.bam-phone-submit {
  position: relative;
  flex: 0 0 auto;
  height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 16px;
  background: var(--bam-blue);
  color: var(--bam-bg);
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 600;
  /* labels stay on one line in every one of the three forms */
  white-space: nowrap;
  cursor: pointer;
}

.bam-phone-submit:hover { background: var(--bam-blue-hover); }
.bam-phone-submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* Scoped with :has() so it only kicks in for a form that actually has the
   prefix select (index.html) - homepage-new.html's identical .bam-phone-form
   markup (no select) keeps its original 20px/10px spacing untouched. */
.bam-phone-form:has(.bam-phone-prefix) {
  gap: 6px;
  padding-left: 14px;
}

.bam-phone-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.2;
  color: var(--bam-cream);
}

.bam-phone-note.is-error { color: #ff8577; }

/* ==========================================================================
   2. HOW IT WORKS  (copy block + numbered 01/02/03 timeline)
   ========================================================================== */

.steps {
  width: 100%;
  /* Both stops are semi-transparent, so the page background sits underneath as
     the second layer. */
  background: var(--bam-lime-wash), var(--bam-bg);
}

.steps-inner {
  max-width: var(--bam-container);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(48px, 11vw, 160px);
  padding: clamp(64px, 7vw, 100px) clamp(24px, 7vw, 100px);
}

.steps-copy {
  flex: 0 1 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* Lime pill, reused by the fear cards and the pricing badge */
.bam-pill {
  padding: 6px 16px;
  border-radius: 64px;
  background: var(--bam-lime);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--bam-ink);
}

.steps-headings {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}

.steps-heading {
  margin: 0;
  font-family: Magra, serif;
  font-weight: 700;
  font-size: clamp(36px, 4.2vw, 56px);
  line-height: 1.2;
  color: var(--bam-blue);
}

.steps-lede {
  margin: 0;
  max-width: 373px;
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
  color: var(--bam-ink);
}

.steps-list {
  flex: 0 1 526px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.steps-row {
  display: flex;
  /* stretch, not flex-start: the marker column has to span the row's full
     height or the connector line stops short of the next marker. */
  align-items: stretch;
  gap: 32px;
}

/* The lime spine. Drawn per row from the row's top edge down into the 48px
   gap, so it always meets the next marker whatever height the text takes —
   the design's fixed 264px only lined up at one viewport width. The markers
   are opaque and sit above it, so the visible line starts under marker 01
   and ends under the last one. */
.steps-marker-col {
  position: relative;
  flex: 0 0 64px;
  display: flex;
  justify-content: center;
  /* keeps the 64px marker at the top while the column itself stretches */
  align-items: flex-start;
}

.steps-row:not(:last-child) .steps-marker-col::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: -48px;
  left: 50%;
  width: 3px;
  margin-left: -1.5px;
  background: var(--bam-lime);
}

.steps-marker {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--bam-lime);
  border-radius: 32px;
  background: var(--bam-bg);
  box-shadow: 0 5px 15px rgba(23, 44, 74, 0.08);
  font-size: 32px;
  font-weight: 700;
  color: var(--bam-blue);
}

.steps-item {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 8px;
}

.steps-item-tight { gap: 8px; }

/* Only the leading word is bold ("Build" in "Build — 5 minutes"), so the base
   weight is regular and <strong> carries the emphasis. Magra ships 400 and 700,
   which is exactly the pair this needs. */
.steps-item h3 {
  margin: 0;
  font-family: Magra, serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--bam-ink);
}

.steps-item h3 strong { font-weight: 700; }

.steps-item p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--bam-ink);
}

/* ==========================================================================
   3. STATS MARQUEE
   Two identical groups scrolled by exactly -50%, so the loop is seamless.
   ========================================================================== */

.marquee {
  width: 100%;
  overflow: hidden;
  background: rgba(198, 249, 31, 0.8);
}

/* Fades the text into the lime at both ends, so items are not cut off mid-word
   at the screen edge. The mask lives here rather than on the track, because the
   track is animated and a mask on it would slide along with the text. The band
   itself keeps its solid background. */
.marquee-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}

.marquee-track {
  display: flex;
  width: max-content;
  padding: 48px 0;
  animation: bambooMarquee var(--bam-marquee-duration) linear infinite;
}

.marquee-group {
  display: flex;
  align-items: center;
  /* Wider than the design's 56px, and narrower on small screens so the items
     do not read as disconnected. The trailing padding has to match the gap, or
     the spacing breaks where the loop seam falls. */
  gap: clamp(56px, 7vw, 100px);
  padding-right: clamp(56px, 7vw, 100px);
  font-family: Magra, serif;
  /* Figure bold, label regular — same treatment as the step titles */
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  color: var(--bam-ink);
  white-space: nowrap;
}

.marquee-group strong { font-weight: 700; }

@keyframes bambooMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .industries-panel.is-active { animation: none; }
  .faq-item[open] .faq-a { animation: none; }
  .faq-chevron { transition: none; }
}

/* ==========================================================================
   4. INDUSTRIES  (tab strip + live-sample panel + copy column)
   ========================================================================== */

.industries { width: 100%; background: var(--bam-bg); }

.industries-inner {
  max-width: var(--bam-container);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Tightened from the design's clamp(40px, 4.5vw, 64px): the copy column needs
     560px to hold the heading on two lines, so the gap is where the panel gets
     its width back. */
  gap: clamp(32px, 3vw, 40px);
  padding: clamp(64px, 7vw, 100px) clamp(24px, 7vw, 100px);
}

/* Takes whatever the 425px copy column leaves — grows, never dictates. */
.industries-demo {
  flex: 1 1 480px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 759px is the width Figma gives the tab strip and the panel. The column itself
   works out to 775px (1240 content - 40 gap - 425 copy), so cap the pair rather
   than resize the copy column. */
.industries-demo-stack {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 759px;
}

/* --- tab strip --- */

/* One row that scrolls sideways instead of wrapping. The design wrapped onto a
   second line on narrow screens, which pushed the panel down and broke the tab
   strip's connection to its bottom border. Nothing scrolls on desktop, where
   all five fit. */
/* Tabs are sized to their label plus a fixed padding, spaced by a fixed gap and
   centred as a group. Equal-width tabs were tried and rejected: a short label
   like RETAIL left a lot of empty box around it while HOSPITALITY filled its
   own, so the active background sat at a different distance from the text on
   every tab. Sizing to content keeps that distance identical. */
.industries-tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  /* Each tab is as wide as its own label plus its padding, so the active
     background hugs the text identically on all five. */
  justify-content: center;
  gap: clamp(2px, 1.4vw, 5px);
  padding: 0 clamp(8px, 2.2vw, 32px);
  /* The line is an inset shadow, not a border: it then sits in the same 2px band
     as the active tab's own inset line, so that one covers it exactly. A border
     would sit outside the padding box, where a scroll container clips. */
  box-shadow: inset 0 -2px 0 #a4b6f3;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.industries-tabs::-webkit-scrollbar { display: none; }

.industries-tab {
  position: relative;
  flex: 0 0 auto;
  height: 48px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px clamp(8px, 2vw, 28px);
  font-family: Inter, sans-serif;
  font-size: clamp(14px, 1.15vw, 16px);
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 0;
  color: rgba(23, 44, 74, 0.7);
}

/* Weight stays at the base 500: bolding the active tab widens the text and
   nudges every tab after it sideways on each switch. */
.industries-tab[aria-selected="true"] {
  background: #d9e2fb;
  border-radius: 12px 12px 0 0;
  color: var(--bam-blue);
  box-shadow: inset 0 -2px 0 var(--bam-blue);
}


/* --- sample panel --- */

/* One panel per industry, stacked in source order; only the active one renders.
   Going from display:none to block restarts the animation, so the fade runs on
   every tab switch without any JavaScript. */
.industries-panel { display: none; }

@keyframes bamPanelIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.industries-panel.is-active {
  display: block;
  animation: bamPanelIn 0.35s ease both;
  position: relative;
  width: 100%;
  aspect-ratio: 759 / 479;
  border-radius: 14px;
  /* The design left this a flat #f40d0d placeholder; it now holds the
     industry photo, with ink showing only while that loads. */
  background: var(--bam-ink);
  overflow: hidden;
}

.industries-panel-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* v2 lays a light scrim over the photo so the white sample card reads cleanly */
.industries-panel-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}

.industries-sample {
  z-index: 1;
  position: absolute;
  left: 24px;
  bottom: 24px;
  width: 352px;
  max-width: calc(100% - 48px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.industries-sample-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 14px;
  background: var(--bam-bg);
}

.industries-sample-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.industries-sample-meta svg { color: var(--bam-blue); }

.industries-sample-meta span {
  font-size: 10px;
  line-height: 1.2;
  text-transform: uppercase;
  color: rgba(23, 44, 74, 0.75);
}

.industries-sample-who {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--bam-blue);
}

.industries-sample-quote {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--bam-ink);
}

.industries-sample-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bam-chip {
  padding: 6px 12px;
  border-radius: 64px;
  background: var(--bam-lime);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--bam-ink);
}

.industries-more {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--bam-ink);
}

/* --- copy column --- */

/* Fixed at 425px; the panel beside it absorbs all remaining width. */
.industries-copy {
  flex: 0 1 425px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.industries-copy h2 {
  margin: 0;
  font-family: Magra, serif;
  font-weight: 700;
  font-size: clamp(34px, 3.6vw, 48px);
  line-height: 1.2;
  color: var(--bam-ink);
  text-wrap: balance;
}

.industries-copy p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--bam-ink);
}

/* Centred in its column, overriding the shared button's flex-start */
.industries-copy .bam-btn { align-self: center; }

/* Solid blue pill button with trailing chevron — reused by the FAQ and
   pricing sections, hence the shared name. */
.bam-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 24px;
  border: 0;
  border-radius: 14px;
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

/* v2 turns the chevron a quarter turn so it points onward, not down */
.bam-btn-arrow { transform: rotate(-90deg); }

.bam-btn-blue { background: var(--bam-blue); color: var(--bam-bg); }
.bam-btn-blue:hover { background: var(--bam-blue-hover); color: var(--bam-bg); }

/* ==========================================================================
   4b. HOW SAGE WORKS  (four-step pipeline)
   Added from the v2 design. Self-contained under the sage- prefix so it can be
   pulled out again without touching anything else.
   ========================================================================== */

.sage { width: 100%; background: var(--bam-bg); }

.sage-inner {
  max-width: var(--bam-container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 0 clamp(24px, 7vw, 100px) clamp(64px, 7vw, 100px);
}

.sage-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 805px;
}

.sage-header h2 {
  margin: 0;
  font-family: Magra, serif;
  font-weight: 700;
  font-size: clamp(36px, 4.2vw, 56px);
  line-height: 1;
  color: var(--bam-ink);
}

.sage-lede {
  margin: 0;
  max-width: 769px;
  font-size: 20px;
  line-height: 1.6;
  color: var(--bam-ink);
}

.sage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 24px;
  align-items: stretch;
}

/* The number badge overhangs the card's square top edge */
.sage-card-wrap {
  position: relative;
  padding-top: 13.5px;
}

/* Only the top rule, no box: the lime line carries the number badge and the
   copy hangs beneath it. */
.sage-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 40px;
  min-height: 213px;
  padding: 28px 16px;
  border: 0;
  border-top: 3px solid var(--bam-lime);
}

.sage-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sage-card h3 {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 45px;
  color: var(--bam-ink);
}

.sage-card-kicker {
  margin: 0;
  font-family: Magra, serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--bam-blue);
}

.sage-card-text {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--bam-ink);
}

.sage-badge {
  position: absolute;
  top: 0;
  left: 0;
  line-height: 1;
}

/* ==========================================================================
   5. SHARED EYEBROW
   The "Built for the calls that scare you" section this block used to hold was
   dropped, as the v2 design has no equivalent. Only the eyebrow stayed, since
   pricing, FAQ and the owner card all use it.
   ========================================================================== */

/* Spaced-out Magra eyebrow, reused by pricing, FAQ and the owner card */
.bam-eyebrow {
  margin: 0;
  font-family: Magra, serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bam-blue);
}

/* ==========================================================================
   6. STATS BAND
   ========================================================================== */

.stats {
  width: 100%;
  /* Figma values; the rotation noted in the export cannot be expressed on a
     CSS radial-gradient. */
  background: radial-gradient(87.55% 412.14% at 50% 18.12%, var(--bam-blue) 0%, var(--bam-ink) 100%);
}

.stats-inner {
  max-width: var(--bam-container);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  /* 180px only once there is room for it — see the min-width rule below. Three
     columns need 627px, so 180px gaps demand ~987px of content and the section's
     13vw side padding does not leave that until about 1350px. */
  gap: 40px;
  padding: 56px clamp(24px, 13vw, 200px);
}

.stats-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* The design gives each column its own flex basis */
.stats-item-1 { flex: 1 1 200px; }
.stats-item-2 { flex: 1 1 175px; }
.stats-item-3 { flex: 1 1 252px; }

.stats-value {
  font-family: Magra, serif;
  font-size: clamp(48px, 4.8vw, 68px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--bam-bg);
}

/* The unit half of each figure is lime: the "ms", the percent sign, the "/mo" */
.stats-unit { color: var(--bam-lime); }

.stats-label {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--bam-bg);
}

/* ==========================================================================
   7. COUNTER BANNER  (v2 design)
   Single centred banner. The v1 two-slide carousel and its dots were dropped,
   as the v2 design has neither.
   ========================================================================== */

.counter {
  position: relative;
  width: 100%;
  min-height: 572px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(56px, 7vw, 100px) clamp(24px, 8.5vw, 120px) 56px;
  border-radius: 0 0 80px 80px;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url('/assets/counter-banner.jpeg');
  background-size: cover;
  background-position: center;
  background-color: var(--bam-hero-navy);
}

.counter-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  /* 1010px, not the design's 902px: "Sage will work the phone." needs ~990px at
     72px italic and would otherwise wrap. */
  width: 1010px;
  max-width: 100%;
}

.counter-titles {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* wider than the design's 4px */
  gap: 12px;
  width: 100%;
}

.counter-title {
  margin: 0;
  align-self: stretch;
  font-size: clamp(30px, 3.4vw, 48px);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: var(--bam-bg);
}

/* Inter italic 700 is loaded for this line specifically. */
.counter-title-accent {
  margin: 0;
  align-self: stretch;
  font-size: clamp(38px, 5vw, 72px);
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  text-align: center;
  color: var(--bam-lime);
}

.counter-form-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 380px;
  max-width: 100%;
}

.counter-form {
  width: 100%;
  padding: 8px 4px 8px 20px;
  background: rgba(252, 253, 255, 0.4);
}

.counter-form .bam-phone-input { color: var(--bam-bg); }
.counter-form .bam-phone-input::placeholder { color: var(--bam-bg); opacity: 1; }
.counter-form .bam-phone-prefix { color: var(--bam-bg); border-right-color: rgba(0, 0, 0, 0.15); }

/* The design gives this 180px flat, but at that width the label has only 132px
   of content box and breaks onto a second line. 180px as a floor keeps the look
   and lets it grow the few pixels it needs. */
.counter-submit {
  min-width: 180px;
  width: auto;
}

.counter-note {
  line-height: 1;
  color: var(--bam-bg);
}

/* ==========================================================================
   8. PRICING
   The cards are rendered by js/pricing-plans.js from /plans/public (shared
   with pricing.html, so that file is left untouched). Everything below
   restyles the class names it emits into the new design. Enterprise is the
   one static card, marked up with the same classes.
   ========================================================================== */

.pricing { width: 100%; background: var(--bam-bg); }

.pricing-inner {
  max-width: var(--bam-container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: clamp(56px, 7vw, 100px) clamp(24px, 7vw, 100px);
}

.pricing-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pricing-header h2 {
  margin: 0;
  font-size: clamp(34px, 3.6vw, 48px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--bam-ink);
}

.pricing-lede {
  margin: 0;
  max-width: 769px;
  font-size: 20px;
  line-height: 1.6;
  color: var(--bam-ink);
}

.pricing-body {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* stretch, not the design's start: equal-height cards are what let every button
   land on the same baseline. */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px;
  align-items: stretch;
}

/* pricing-plans.js wraps its cards in this single div; `contents` lets each
   card become a grid item of .pricing-grid alongside the static one. */
#dynamic-plans { display: contents; }

/* The grid's stretch has to travel down through both wrappers that
   pricing-plans.js emits before it reaches the card itself. */
.pricing-card-outer {
  display: flex;
  flex-direction: column;
}

.pricing-card-border {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pricing-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 386px;
  padding: 42px;
  border: 3px solid var(--bam-lime);
  border-radius: 16px;
  background: var(--bam-bg);
}

/* The design's cards carry no icon and no rule between price and features. */
.pricing-icon,
.pricing-divider { display: none; }

.pricing-tier {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--bam-ink);
}

.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.pricing-price-amount {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--bam-ink);
}

.pricing-price-period {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.2;
  color: var(--bam-ink);
}

.pricing-desc {
  margin: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--bam-ink);
}

.pricing-features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.2;
  color: var(--bam-ink);
}

.pricing-features li {
  display: flex;
  gap: 6px;
}

/* The design prefixes each feature with an em dash. The tick that
   pricing-plans.js emits is swapped for one here rather than editing that
   shared file. */
.pricing-features .check-badge {
  font-size: 0;
}

.pricing-features .check-badge::before {
  content: '—';
  font-size: 16px;
}

/* --- card buttons --- */

.pricing-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* Pins the button to the card's bottom edge, the way the design's
     space-between did before the fields between were made optional. */
  margin-top: auto;
  height: 56px;
  padding: 0 24px;
  border: 3px solid var(--bam-lime);
  border-radius: 14px;
  background: var(--bam-bg);
  color: var(--bam-ink);
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.pricing-btn:hover { background: #f6fde6; color: var(--bam-ink); }

/* Chevron, drawn rather than inlined so no SVG has to be injected from JS */
.pricing-btn::after {
  content: '';
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: -4px;
  border-right: 2.2px solid currentColor;
  border-bottom: 2.2px solid currentColor;
  transform: rotate(45deg);
}

/* --- featured card (the middle plan) --- */

/* Every card reserves the badge's 12px, so all three tops line up whether or
   not they carry one. */
.pricing-card-outer { padding-top: 12px; }

.pricing-card-outer.is-featured { position: relative; }

.is-featured .pricing-card {
  background: rgba(198, 249, 31, 0.15);
  box-shadow: 0 15px 20px rgba(23, 44, 74, 0.08);
}

.is-featured .pricing-btn {
  border: 0;
  background: var(--bam-blue);
  color: var(--bam-bg);
}

.is-featured .pricing-btn:hover { background: var(--bam-blue-hover); color: var(--bam-bg); }

.pricing-featured-badge {
  position: absolute;
  top: 0;
  left: 29px;
}

/* --- billing cycle toggle (rendered only when >1 cycle exists) --- */

.pricing-billing-toggle {
  display: none;
  gap: 8px;
}

.pricing-billing-toggle.is-visible { display: flex; }

.pricing-toggle-btn {
  padding: 10px 20px;
  border: 1px solid rgba(77, 118, 236, 0.5);
  border-radius: 64px;
  background: transparent;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: rgba(23, 44, 74, 0.7);
  cursor: pointer;
}

.pricing-toggle-btn.active {
  background: var(--bam-blue);
  border-color: var(--bam-blue);
  color: var(--bam-bg);
}

.pricing-footnote {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
  color: rgba(13, 31, 45, 0.7);
}

.pricing-footnote strong {
  font-weight: 700;
  color: var(--bam-ink);
}

/* ==========================================================================
   8b. COMPLIANCE  (added from the v2 design)
   Same marker-and-spine shape as "How it works", so the connector is drawn per
   row rather than with the design's fixed 346px height.
   ========================================================================== */

.compliance {
  width: 100%;
  /* Same wash as "How it works", per the client's call. The v2 export had a
     wider ellipse here: radial-gradient(76% 61% at 25.56% 55.93%, ...). */
  background: var(--bam-lime-wash), var(--bam-bg);
}

.compliance-inner {
  max-width: var(--bam-container);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(48px, 11vw, 160px);
  /* No top padding: pricing above already carries up to 100px of its own at the
     bottom, and stacked they left far too much white. */
  padding: 0 clamp(24px, 7vw, 100px) clamp(56px, 7vw, 100px);
}

.compliance-copy {
  flex: 0 1 514px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.compliance-headings {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.compliance-heading {
  margin: 0;
  font-family: Magra, serif;
  font-weight: 700;
  font-size: clamp(36px, 4.2vw, 56px);
  line-height: 1;
  text-align: center;
  color: var(--bam-blue);
}

.compliance-lede {
  margin: 0;
  max-width: 373px;
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
  color: var(--bam-ink);
}

.compliance-list {
  flex: 0 1 526px;
  display: flex;
  flex-direction: column;
  gap: 72px;
}

.compliance-row {
  display: flex;
  align-items: stretch;
  gap: 32px;
}

.compliance-marker-col {
  position: relative;
  flex: 0 0 64px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.compliance-row:not(:last-child) .compliance-marker-col::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: -72px;
  left: 50%;
  width: 3px;
  margin-left: -1.5px;
  background: var(--bam-lime);
}

/* The lime ring is an inset shadow here, not a border, so the icon keeps the
   full 64px circle to sit in. */
.compliance-marker {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 32px;
  background: var(--bam-bg);
  box-shadow: inset 0 0 0 3px var(--bam-lime), 0 5px 15px rgba(23, 44, 74, 0.08);
  color: var(--bam-blue);
}

/* Overrides the 36px the markup asks for, leaving the 64px circle untouched */
.compliance-marker svg {
  width: 28px;
  height: 28px;
}

.compliance-item {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 8px;
}

.compliance-item h3 {
  margin: 0;
  font-family: Magra, serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  color: var(--bam-ink);
}

.compliance-item p {
  margin: 0;
  max-width: 419px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--bam-ink);
}

/* Holds the reusable icon definition out of view */
.bam-svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ==========================================================================
   9. OWNER STORY
   ========================================================================== */

.owner { width: 100%; background: var(--bam-bg); }

.owner-inner {
  max-width: var(--bam-container);
  margin: 0 auto;
  padding: 0 clamp(24px, 7vw, 100px) clamp(56px, 7vw, 100px);
}

.owner-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(32px, 4vw, 56px);
  padding: clamp(32px, 4vw, 56px);
  border-radius: clamp(28px, 4vw, 60px);
  background: var(--bam-ink);
}

.owner-portrait {
  flex: 0 0 auto;
  width: 283px;
  height: 280px;
  max-width: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 14px;
}

.owner-copy {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Same eyebrow, lime instead of blue on the dark card */
.bam-eyebrow-lime { color: var(--bam-lime); }

.owner-quote {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--bam-bg);
  text-wrap: pretty;
}

.owner-attribution {
  margin: 0;
  font-size: 20px;
  line-height: 1.6;
  color: var(--bam-bg);
}

.owner-attribution strong { font-weight: 700; }

/* ==========================================================================
   9b. PERSONAL  (added from the v2 design)
   ========================================================================== */

.personal { width: 100%; background: var(--bam-bg); }

.personal-inner {
  max-width: var(--bam-container);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(40px, 4vw, 56px);
  /* No top padding: the owner card above already carries up to 100px of its
     own bottom padding, and the two stacked left ~200px of white. */
  padding: 0 clamp(24px, 7vw, 100px) clamp(56px, 7vw, 100px);
}

.personal-copy {
  flex: 1 1 480px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.personal-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.personal-head h2 {
  margin: 0;
  font-family: Magra, serif;
  font-weight: 700;
  font-size: clamp(34px, 3.6vw, 48px);
  line-height: 1;
  color: var(--bam-ink);
}

.personal-lede {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--bam-ink);
}

.personal-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.personal-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 26px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--bam-ink);
}

.personal-item svg {
  flex: 0 0 auto;
  color: var(--bam-blue);
}

/* Photo overlapping a lime panel: both are positioned inside a box whose
   aspect ratio comes from the design, so the pair scales as one unit. */
.personal-figure {
  position: relative;
  flex: 1 1 480px;
  min-width: 0;
  aspect-ratio: 592 / 511;
}

.personal-panel {
  position: absolute;
  right: 0;
  top: 0;
  width: 69.6%;
  height: 100%;
  border-radius: 20px;
  background: rgba(198, 249, 31, 0.25);
}

/* Centred rather than the design's top:15.9%, which left 15.6% underneath and
   made the panel's top overhang read as larger than its bottom one. */
.personal-photo {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 93.1%;
  height: 68.5%;
  object-fit: cover;
  border-radius: 20px;
}

/* ==========================================================================
   10. FAQ
   Built on <details>, so opening and closing needs no JavaScript at all.
   ========================================================================== */

.faq { width: 100%; background: rgba(77, 118, 236, 0.2); }

.faq-inner {
  max-width: var(--bam-container);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  /* The design writes clamp(40px, 4vw, 32px) here — max below min, which CSS
     resolves to a constant 40px. Written out so it reads as intentional. */
  gap: 40px;
  padding: clamp(56px, 7vw, 100px) clamp(24px, 7vw, 100px);
}

.faq-copy {
  flex: 1 1 400px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.faq-heading {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-heading h2 {
  margin: 0;
  font-size: clamp(34px, 3.6vw, 48px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--bam-ink);
}

.bam-btn-navy { background: var(--bam-ink); color: var(--bam-bg); }
.bam-btn-navy:hover { background: var(--bam-ink-900); color: var(--bam-bg); }

.faq-list {
  flex: 1 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.faq-item {
  padding: 24px;
  border: 1px solid var(--bam-blue);
  border-radius: 14px;
  background: var(--bam-bg);
}

/* The design draws the opened card with a heavier border */
.faq-item[open] { border-width: 3px; }

.faq-row,
.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
  cursor: pointer;
}

.faq-item > summary::-webkit-details-marker { display: none; }

.faq-q {
  margin: 0;
  font-size: 20px;
  font-weight: 300;
  line-height: 28px;
  letter-spacing: -0.02em;
  color: var(--bam-ink);
}

.faq-chevron {
  flex: 0 0 auto;
  transition: transform 0.25s ease;
}

.faq-item[open] .faq-chevron { transform: rotate(180deg); }

/* The question picks up the brand blue while its answer is showing */
.faq-item[open] .faq-q { color: var(--bam-blue); }

.faq-q { transition: color 0.2s ease; }

/* A details element renders its body instantly, so the entrance is an animation
   on the answer itself rather than a transition on the container's height. */
@keyframes bamFaqIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.faq-item[open] .faq-a { animation: bamFaqIn 0.3s ease both; }

.faq-a {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--bam-ink);
}

/* ==========================================================================
   11. FOOTER  (closing CTA + link columns + copyright bar)
   ========================================================================== */

.site-footer {
  width: 100%;
  /* Values taken from Figma. The export also mentions a rotation, which CSS
     radial-gradient cannot express; the shape below is the closest equivalent. */
  background: radial-gradient(59.6% 90.65% at 50% 50%, var(--bam-blue) 0%, var(--bam-ink) 100%);
}

.footer-stack {
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding-top: clamp(56px, 7vw, 100px);
}

.footer-inner {
  max-width: var(--bam-container);
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 7vw, 100px);
  padding: 0 clamp(24px, 7vw, 100px);
}

.footer-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.footer-logo { display: block; max-width: 100%; height: auto; }

.footer-cta h2 {
  margin: 0;
  max-width: 1098px;
  font-family: Magra, serif;
  font-weight: 700;
  font-size: clamp(38px, 4.6vw, 60px);
  line-height: 1.2;
  text-align: center;
  color: var(--bam-bg);
}

/* The width matters: without it this block shrink-wraps to the form's own
   400px, so the form's max-width:100% has nothing narrower to clamp against and
   it overflows the footer's side padding on a phone. */
.footer-form-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 400px;
  max-width: 100%;
}

/* The closing form is more opaque than the hero's and drops the blur */
.bam-phone-form-solid {
  background: rgba(252, 253, 255, 0.5);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.bam-phone-form-solid .bam-phone-input { color: var(--bam-bg); }
.bam-phone-form-solid .bam-phone-input::placeholder { color: var(--bam-bg); opacity: 1; }
.bam-phone-form-solid .bam-phone-prefix { color: var(--bam-bg); border-right-color: rgba(0, 0, 0, 0.15); }

.bam-phone-submit-lime {
  border-radius: 14px;
  background: var(--bam-lime);
  color: var(--bam-ink);
}

.bam-phone-submit-lime:hover { background: var(--bam-lime-hover); }

.footer-note { color: var(--bam-bg); }

/* --- copyright bar --- */

.footer-bottom {
  width: 100%;
  border-top: 1px solid rgba(13, 31, 45, 0.2);
}

.footer-bottom-inner {
  max-width: var(--bam-container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 67px;
  padding: 24px clamp(24px, 7vw, 100px);
}

.footer-bottom-inner p {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
  color: var(--bam-bg);
}

/* ==========================================================================
   Responsive
   The design is fluid by way of clamp(), so it holds down to tablet on its
   own. Below that the fixed 72px nav row can't fit five links plus the logo,
   so the nav is allowed to grow and centre itself.
   ========================================================================== */

@media (min-width: 1350px) {
  .stats-inner { gap: 180px; }
}

/* Below ~1100px the two columns stack, so the 759px cap and the 425px copy
   column would leave a band of white on the right. Both go full width. */
@media (max-width: 1100px) {
  .industries-demo-stack { max-width: none; }
  .industries-copy { flex-basis: 100%; }
}

@media (max-width: 1250px) {
  /* From here down the tabs can outgrow the strip. Centring a scroll container's
     content puts the first tab beyond the reachable area, so align left. */
  .industries-tabs { justify-content: flex-start; }
}

@media (max-width: 900px) {
  /* Shorter than the viewport on phones and tablets, so the section below peeks
     in and the page reads as scrollable. */
  .hero { min-height: 560px; }

  /* Shifts the photo left, so the narrow crop lands on the lit storefront
     instead of the buildings down the street. */
  .hero-photo { background-position: 30% 35.834%; }
  .counter { border-radius: 0 0 48px 48px; min-height: 460px; }

  .hero-nav { padding: 0 clamp(16px, 4vw, 24px); }

  /* Once the owner card stacks, the portrait would sit against the left edge */
  .owner-portrait { margin-left: auto; margin-right: auto; }
}

@media (max-width: 600px) {
  .counter { border-radius: 0 0 32px 32px; }

  /* 20px buttons are chunky on a phone */
  .bam-btn,
  .pricing-btn { font-size: 16px; }

  /* Pull the copy closer to the markers — 32px plus 8px of padding is a lot of
     dead space on a narrow screen. */
  .steps-row { gap: 16px; }
  .steps-item { padding-left: 0; }

  /* Taller than the design's 759/479: at phone width the sample card fills
     almost the whole panel and barely any photo shows. */
  .industries-panel.is-active { aspect-ratio: 4 / 5; }

  /* 80px top and bottom is a lot once the three figures stack vertically */
  .stats-inner { padding-top: 48px; padding-bottom: 48px; }

  /* Same tightening as the steps rows */
  .compliance-row { gap: 16px; }
  .compliance-item { padding: 0; }
}

/* ==========================================================================
   REVEAL ON SCROLL
   The hidden state is scoped to .bam-reveal-ready, a class only the script
   adds, so the page degrades to fully visible without JavaScript. Delays are
   by sibling position, which staggers each group without inline styles.
   ========================================================================== */

.bam-reveal-ready [data-bam-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.bam-reveal-ready [data-bam-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

.bam-reveal-ready [data-bam-reveal]:nth-child(2) { transition-delay: 0.08s; }
.bam-reveal-ready [data-bam-reveal]:nth-child(3) { transition-delay: 0.16s; }
.bam-reveal-ready [data-bam-reveal]:nth-child(4) { transition-delay: 0.24s; }
.bam-reveal-ready [data-bam-reveal]:nth-child(5) { transition-delay: 0.32s; }
.bam-reveal-ready [data-bam-reveal]:nth-child(6) { transition-delay: 0.40s; }
.bam-reveal-ready [data-bam-reveal]:nth-child(7) { transition-delay: 0.48s; }
.bam-reveal-ready [data-bam-reveal]:nth-child(8) { transition-delay: 0.56s; }