/* BrokerX — Figma tokens + minimal overrides (Bootstrap 5 handles layout) */

:root {
  --bx-black: #000000;
  --bx-hero-bg: #161616;
  --bx-hero-gradient-top: #1b1a18;
  --bx-white: #ffffff;
  --bx-blue: #0064ff;
  --bx-blue-alt: #0165ff;
  --bx-pill-dark: #333333;
  --bx-pill-dark-icon: #090909;
  --bx-pill-light: #efeff0;
  --bx-muted: #c4c4c4;
  --bx-rule: #484848;
  --bx-faq-border: #cdcdcd;
  /* FAQ toggle glyphs, ported verbatim from gx-website
     (wwwroot/css/gxhome2025.css, "FAQs Need to know css"). Inline data URIs
     rather than asset files so the two states can be swapped by CSS alone —
     the accordion is a plus when closed and a MINUS when open, never a rotated
     cross. Fill is #0064ff, matching --bx-blue. Used for the SECTION-level
     toggle only (.faq-bar__icon) — gx keeps that one blue too. */
  --bx-icon-plus: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='%230064ff'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 4.51a.5.5 0 000 1h3.5l.01 3.5a.5.5 0 001-.01V5.5l3.5-.01a.5.5 0 00-.01-1H5.5L5.49.99a.5.5 0 00-1 .01v3.5l-3.5.01H1z'/%3e%3c/svg%3e");
  --bx-icon-minus: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 2' fill='%230064ff'%3e%3cpath fill-rule='evenodd' d='M.5 1C.5.7.7.5 1 .5h8a.5.5 0 110 1H1A.5.5 0 01.5 1z'/%3e%3c/svg%3e");
  /* Row-level markers (the individual question toggles) are black on
     gx-website, not blue — same paths, fill #000000. */
  --bx-icon-plus-row: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='%23000000'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 4.51a.5.5 0 000 1h3.5l.01 3.5a.5.5 0 001-.01V5.5l3.5-.01a.5.5 0 00-.01-1H5.5L5.49.99a.5.5 0 00-1 .01v3.5l-3.5.01H1z'/%3e%3c/svg%3e");
  --bx-icon-minus-row: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 2' fill='%23000000'%3e%3cpath fill-rule='evenodd' d='M.5 1C.5.7.7.5 1 .5h8a.5.5 0 110 1H1A.5.5 0 01.5 1z'/%3e%3c/svg%3e");
  --bx-nav-shadow: rgba(0, 100, 255, 0.52);
  --bx-gradient-hero: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 66%);
  --bx-gradient-hero-bg: linear-gradient(180deg, rgba(27, 26, 24, 1) 0%, rgba(0, 0, 0, 1) 100%);
  --bx-gradient-speed: linear-gradient(0deg, #151515 1%, #151515 70%, #3e567c 100%);
  --bx-gradient-growth: linear-gradient(0deg, #151515 1%, #151515 70%, #52455d 100%);
  --bx-gradient-trust: linear-gradient(0deg, #151515 1%, #151515 70%, #4a4835 100%);
  --bx-gradient-cta: linear-gradient(
    -90deg,
    rgba(10, 10, 10, 0) 0%,
    rgba(255, 255, 255, 0.73) 36%,
    rgba(255, 255, 255, 1) 65%,
    rgba(255, 255, 255, 1) 100%
  );
  --bx-font-display: "roc-grotesk-condensed", "Roc Grotesk Condensed",sans-serif;
  --bx-font-serif: Georgia, "Times New Roman", serif;
  /* --bx-font-sans: "Inter", system-ui, -apple-system, sans-serif; */
  --bx-font-sans: "indivisible";
  /* --bx-page-max: 1920px; */
  --bx-page-max: 100%;
  --bx-section-py: clamp(4rem, 5.26vw, 6.3125rem);
  --bx-header-to-body: clamp(1.73rem, 3.11vw, 3.75rem);
  --bx-radius-card: 30px;
  --bx-radius-accordion: 25px;
  --bx-radius-pill: 48px;
  --bx-radius-pill-sm: 24px;
}

@import url("indivisible/indivisible_fontface.css");
@import url("rocGrotesk-Condensed/rocgrotestk-fontface.css");

body {
  font-family:"indivisible";
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.page {
  max-width: var(--bx-page-max);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  height: 66px;
  background: var(--bx-black);
  box-shadow: 0 9px 7.8px var(--bx-nav-shadow);
  z-index: 1030;
  /* Smooth slide up/down for auto-hide behaviour */
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Auto-hide: JS adds this class on scroll-down, removes on scroll-up */
.site-header.is-hidden {
  transform: translateY(-100%);
}

/* Inner bar. Was an inline style="max-width:1920px; padding:15px" until the
   CSP hardening (Aug 2026) stripped every style attribute from the markup.
   Only the block padding is reproduced here: the inline shorthand also set
   left/right, but .px-4/.px-xl-5 are Bootstrap utilities and carry
   !important, so they always won over it. Writing padding: 15px here would
   change the rendered result rather than preserve it. */
.site-header__bar {
  max-width: 1920px;
  padding-top: 15px;
  padding-bottom: 15px;
}

.site-logo {
  height: 31px;
  width: auto;
}

/* Smaller logo on mobile */
@media (max-width: 991.98px) {
  .site-logo {
    height: 24px;
  }
}

.menu-toggle__line {
  display: block;
  width: 32px;
  border-top: 1.5px solid var(--bx-white);
}

.menu-toggle__line {
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Buttons */
.btn-brokerx {
  --bs-btn-bg: var(--bx-blue);
  --bs-btn-border-color: var(--bx-blue);
  --bs-btn-color: var(--bx-white);
  --bs-btn-hover-bg: #0057e0;
  --bs-btn-hover-border-color: #0057e0;
  --bs-btn-hover-color: var(--bx-white);
  /* min-width: 200px; */
  /* height: 54px; */
  /* font-weight: 500;
  font-size: 1.125rem; */
  line-height: 1.2;
  /* letter-spacing: -0.02em;
  padding: 10px 30px; */

    font-size: 20px;
    font-weight: 500;
    padding: 16px 50px;
}
@media (max-width: 990px) {
.btn-brokerx {
    font-size: 16px;
    font-weight: 500;
    padding: 12px 40px;
}
}
.btn-brokerx--outline {
  --bs-btn-bg: var(--bx-blue);
  --bs-btn-border-color: var(--bx-blue);
  --bs-btn-color: var(--bx-white);
}

/* Hero */
.hero {
  min-height: calc(100vh - 66px);
  background: var(--bx-hero-bg);
}

.hero__bg {
  background: var(--bx-gradient-hero-bg);
  z-index: 0;
}

/* .hero__gradient {
  height: 31.1%;
  min-height: 180px;
  background: var(--bx-gradient-hero);
  z-index: 2;
  pointer-events: none;
} */

.hero__container {
  z-index: 3;
  max-width: var(--bx-page-max);
  min-height: clamp(480px, 44vw, 846px);
  display: flex;
  align-items: center;
  padding-top: clamp(2rem, 8vw, 9rem);
  padding-bottom: clamp(5rem, 10vw, 7.5rem);
}

.hero__title {
  font-family: var(--bx-font-display);
  font-weight: 600;
  font-size: clamp(3.5rem, 8.23vw, 9.875rem);
  line-height: 0.75;
  letter-spacing: 0.01em;
  color: var(--bx-white);
}

/* Phase-1 "Be the ONE" intro title is full-width/centred (not constrained
   to the col-lg-7 layout like phase-2), so it scales to a larger max —
   was a hardcoded 251px inline style that didn't shrink on mobile. */
.hero__title--phase1 {
  /* font-size: clamp(3rem, 13.07vw, 15.6875rem); */
  font-size: clamp(5.5rem, 13.07vw, 15.6875rem);
}

/* @media (max-width: 991.98px) {
  .hero__title--phase1 {
    font-size: 5.5rem;
  }
  .hero__title {
    font-size: 5rem;
  }
} */

.hero__subtitle-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.5rem;
  margin-top: clamp(1rem, 1.875vw, 2.25rem);
  font-family: var(--bx-font-serif);
  font-size: clamp(2rem, 3.18vw, 3.8125rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--bx-white);
}

.hero__subtitle-prefix {
  flex-shrink: 0;
}

/* ┌─────────────────────────────────────────────────────────────────────────┐
   │  SWITCHER — TUNING                                                      │
   │  All timing knobs live here as CSS custom properties.                   │
   │                                                                         │
   │  --switcher-phase-ms   TEXT WIPE SPEED + ICON TRACKING SPEED            │
   │                        Both use the same duration so the icon stays     │
   │                        perfectly flush with the wipe edge at all times. │
   │                        Increase to slow down, decrease to speed up.     │
   │                                                                         │
   │  --switcher-hold-ms    How long each message is displayed before        │
   │                        the next wipe begins.                            │
   │                                                                         │
   │  --switcher-ease       Shared easing curve for wipe + icon motion.      │
   └─────────────────────────────────────────────────────────────────────────┘ */
.hero__switcher {
  --switcher-phase-ms : 2000ms;                       /* ← TEXT WIPE SPEED  */
  --switcher-hold-ms  : 1000ms;                        /* ← HOLD DURATION    */
  --switcher-ease     : cubic-bezier(0.4, 0, 0.15, 1);
  display: inline-flex;
  align-items: center;
  gap: clamp(6px, 0.42vw, 8px);
  vertical-align: bottom;
}

/* Clip container — auto width so it matches the current text exactly,
   keeping the icon always flush with the last character. */
.hero__switcher-clip {
  display: inline-block;
  vertical-align: bottom;
  overflow: hidden;
  clip-path: inset(0 0 0 0);
  text-align: left;
}

.hero__switcher-line {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.hero__switcher-text {
  display: inline-block;
  white-space: nowrap;
}

/* ── Icon: sits OUTSIDE the clip so it is never clipped by the wipe ─────── */
.hero__switcher-icon {
  --icon-sz: clamp(40px, 3.39vw, 65px);  /* ← ICON SIZE (responsive)       */
  width: var(--icon-sz);
  height: var(--icon-sz);
  flex-shrink: 0;
  transform: translate3d(0, 0, 0) rotate(0deg);
  transform-origin: center center;
  backface-visibility: hidden;
  border-radius: 50%;
}

/* ── Exit: text wipes right → left; icon tracks the edge, spins anti-CW ── */
.hero__switcher-clip.is-exit {
  animation: switcher-sentence-hide var(--switcher-phase-ms) var(--switcher-ease) forwards;
}
.hero__switcher-clip.is-exit + .hero__switcher-icon {
  animation: switcher-icon-exit var(--switcher-phase-ms) var(--switcher-ease) forwards;
}

/* ── Enter: text reveals right → left; icon tracks the edge, spins CW ───── */
.hero__switcher-clip.is-enter {
  animation: switcher-sentence-show var(--switcher-phase-ms) var(--switcher-ease) forwards;
}
.hero__switcher-clip.is-enter + .hero__switcher-icon {
  animation: switcher-icon-enter var(--switcher-phase-ms) var(--switcher-ease) forwards;
}

/* Text wipe keyframes — right edge closes / opens */
@keyframes switcher-sentence-hide {
  from { clip-path: inset(0 0   0 0); }
  to   { clip-path: inset(0 100% 0 0); }
}
@keyframes switcher-sentence-show {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0   0 0); }
}

/* Icon exit: translateX(−track-width) keeps icon on the wipe edge.
   rotate(0 → −1080deg) = 3 anti-clockwise spins.                    ← SPINNING SPEED
   Increase the degree value for more spins (−1440 = 4×, etc.).                   */
@keyframes switcher-icon-exit {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(calc(var(--switcher-track-width, 200px) * -1), 0, 0) rotate(-1080deg); }
}

/* Icon enter: starts where clip edge began, spin back clockwise.
   rotate(−1080 → 0deg) = 3 clockwise spins.                         ← SPINNING SPEED
   Keep this matching the exit degree value.                                       */
@keyframes switcher-icon-enter {
  from { transform: translate3d(calc(var(--switcher-track-width, 200px) * -1), 0, 0) rotate(-1080deg); }
  to   { transform: translate3d(0, 0, 0) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__switcher-clip.is-exit,
  .hero__switcher-clip.is-enter,
  .hero__switcher-clip.is-exit  + .hero__switcher-icon,
  .hero__switcher-clip.is-enter + .hero__switcher-icon {
    animation: none !important;
  }
}

/* Was an inline style="max-width: 527px". The mobile block further down
   overrides it with !important, which beat the inline declaration too --
   so the rendered width is unchanged at every breakpoint. */
.hero__right {
  /* max-width: 527px; */
  padding-left:5rem
}

@media (min-width: 992px) {
  .hero__row {
    align-items: center;
  }

  .hero__left,
  .hero__right {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.hero__tagline {
  font-family: var(--bx-font-serif);
  font-size: clamp(1.75rem, 2.55vw, 3.0625rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--bx-white);
}

.hero__reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  animation: hero-reveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero__reveal--delay {
  animation-delay: 0.15s;
}

.hero__reveal--delay-2 {
  animation-delay: 0.3s;
}

@keyframes hero-reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__footnote {
  bottom: clamp(1.5rem, 2.6vw, 2.625rem);
  z-index: 4;
  max-width: 100%;
  font-size: clamp(0.875rem, 1.04vw, 1.25rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--bx-white);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.hero__footnote em {
  font-family: var(--bx-font-serif);
  font-style: italic;
}

/* ┌─────────────────────────────────────────────────────────────────────────┐
   │  SCROLL-DRIVEN HERO — TUNING                                            │
   │                                                                         │
   │  hero-scroll-driver height   Total scroll budget for both phases.       │
   │                              220vh = user scrolls 120 % of viewport     │
   │                              before the hero section is "done".         │
   │                              Increase for slower feel, decrease faster. │
   │                                                                         │
   │  hero-sticky top             Must equal the site header height (66px).  │
   │  hero-sticky height          calc(100vh − Npx) where N controls the     │
   │                              visible gap above the hero image.           │
   │                              Larger N = more gap + slight zoom-in.      │
   │                                                                         │
   │  Phase A / B timing is in hero.js → TUNE object.                        │
   │  Image crossfade timing  →  TUNE.imgX_start / imgX_end in hero.js.      │
   └─────────────────────────────────────────────────────────────────────────┘ */

/* Outer wrapper — tall enough to drive both scroll phases.
   z-index:0 creates a stacking context so sticky sections that follow
   paint on top rather than behind. */
.hero-scroll-driver {
  height: 220vh;                /* ← TOTAL SCROLL BUDGET          */
  position: relative;
  z-index: 0;
  /* background: var(--bx-gradient-hero-bg); */
}
.bg-gradient-heroBanner::before {
  opacity: 0;
  transition: opacity 0.3s ease;
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: var(--bx-gradient-hero-bg);
  pointer-events: none;
  z-index: 0;
}
.bg-gradient-heroBanner.gradient-active::before {
  opacity: 1;
}




/* Pinned viewport — sticks below the header for the full scroll budget.
   transition: top syncs with the header slide so there is never a gap. */
.hero-sticky {
  position: sticky;
  top: 66px;                    /* ← HEADER HEIGHT (keep in sync with .site-header) */
  height: calc(100vh - 30px);   /* ← TOP GAP: increase N to grow the gap above image */
  overflow: hidden;
  /* background: var(--bx-hero-bg); */
  transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  max-width:1920px;
  margin:auto
}

/* Hero images — horizontal offset controlled here, opacity driven by JS. */
.hero__model {
  /* width: min(47.3%, 909px); */
  /* max-width: 909px; */
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
  left: 50%;
}

/* Single-image mode (HERO_TWO_IMAGES = false) */
.hero-model-1 { transform: translateX(-50%); }
.hero-model-2 { display: none; }

/* Two-image mode: driver gets .hero-two-images class via JS.
   Subtle top / down offset creates a perceptible vertical shift
   during the crossfade, matching the desktop motion direction. */
.hero-two-images .hero-model-1 { transform: translate(-50%, -3%); } /* slightly up */
.hero-two-images .hero-model-2 {
  display: block;
  transform: translate(-50%, 3%);                                    /* slightly down */
  opacity: 0;
  will-change: opacity;
}

/* Phase 1 — centred "Be the ONE"; JS drives opacity + translateY. */
.hero-phase-1 {
  position: absolute;
  top: 64%;
  left: 0;
  right: 0;
  transform: translateY(-64%);
  z-index: 3;
  text-align: center;
  pointer-events: none;
  will-change: opacity, transform;
}

/* Phase 2 — full hero content; starts invisible, JS drives opacity + translateY. */
.hero-phase-2 {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateY(40px);
  z-index: 3;
  pointer-events: none;
  will-change: opacity, transform;
  justify-content: center;
}

.hero-phase-2.is-active { pointer-events: auto; }

/* Footnote — hidden until phase-2 fully appears. */
.hero__footnote--phase2 {
  opacity: 0;
  transition: opacity 0.6s ease 0.4s;
}
.hero-phase-2.is-active ~ .hero__footnote--phase2 { opacity: 1; }

/* hero__reveal elements inside phase-2 are frozen until is-active fires,
   then CSS stagger animations run in sequence. */
.hero-phase-2 .hero__reveal {
  animation: none;
  opacity: 0;
  transform: translateY(1.25rem);
}
.hero-phase-2.is-active .hero__reveal            { animation: hero-reveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.hero-phase-2.is-active .hero__reveal--delay     { animation-delay: 0.15s; }
.hero-phase-2.is-active .hero__reveal--delay-2   { animation-delay: 0.30s; }

/* Sections */
.section-block {
  padding-top: var(--bx-section-py);
  padding-bottom: var(--bx-section-py);
  /* position:relative ensures these sections stack above the hero-scroll-driver
     (which has z-index:0) based on DOM order — later elements paint on top */
  position: relative;
  z-index: 1;
}

.section-block {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.section-block__inner {
  max-width: var(--bx-page-max);
  /* height:100vh;  */
}

#highlights-desktop > .section-block__inner {
  height:100vh;
}


.section-block__inner.d-flex {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.section-block__header {
  max-width: 1578px;
}

.section-block__body {
  /* margin-top: var(--bx-header-to-body); */
  margin-top: 3rem;
  height: 100%;
  /* overflow: hidden; */
}

.section-block__body>div {
  height:calc(100% - 3rem)
}

.section-block__inner.d-flex > .section-block__header + .section-block__body,
.section-block__inner.d-flex .section-block__body {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 0;
}

.section-block__media {
  margin-top: var(--bx-header-to-body);
}

.section-eyebrow {
  font-weight: 600;
  font-size: clamp(1.125rem, 1.25vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--bx-blue);
}

.section-title {
  font-family: var(--bx-font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 2.92vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.section-title--tight {
  line-height: 1;
}

/* Highlight cards */
.highlights-grid {
  max-width: 1664px;
  margin-left: auto;
  margin-right: auto;
}

.highlight-card {
  position: relative;
  border-radius: var(--bx-radius-card);
  background: var(--bx-black);
   /* min-height: 34vw; */
  /* min-height: clamp(420px, 33vw, 634px); */
  overflow: hidden;
  color: var(--bx-white);
  padding:21px 30px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: outline 0.2s ease, transform 0.25s ease;
  text-align: center;
  height: 100%;
}
.highlights-grid {
    padding:2rem 0 
  }
@media screen and (min-width: 1921px) {
  .section-block__inner{
    height: auto;
  }
  .highlight-card {
    height: auto;
  }
}

.highlight-card:hover {
  transform: translateY(-2px);
}

.highlight-card__label {
  position: relative;
  z-index: 3;
  font-weight:600;
  font-size: 1.25rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #a8a8a8;       
}

.highlight-card__heading {
  position: relative;
  z-index: 3;
  margin-top: 10px;
  font-weight: 400;
  font-size: clamp(1.3rem, 1.56vw, 1.875rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.highlight-card__media {
  /* position: absolute; */
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* top: 8.2rem; */
  max-height: 100%;
  overflow: hidden;
}

.highlight-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.highlight-card--services .highlight-card__media img {
  object-fit: contain;
  object-position: center bottom;
  padding: 0 8%;
  /* height: 96.1%; */
}

/* Slider dots (grid becomes scroll-snap below xl breakpoint;
   dots stay hidden here so desktop is unaffected). */
.highlights-dots {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}

.highlights-dots__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--bx-rule, #d0d0d0);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.highlights-dots__dot.is-active {
  background: var(--bx-blue, #0064ff);
  transform: scale(1.15);
}

/* Comparison */
.section-block--comparison .section-block__header {
  margin-bottom: 0;
}

.comparison-banner {
  max-width: 100%;
  overflow: hidden;
  margin-top: var(--bx-header-to-body);
  margin-bottom: 0;
}

.comparison-banner img {
  display: block;
  object-fit: cover;
  object-position: center top;
  max-height: 343px;
}

.comparison-columns {
  /* 1200, not the 1413 that stood here before Aug 2026: the only element
     carrying this class had an inline max-width: 1200px overriding it, so
     1413 never rendered. Folding the inline value in keeps the layout
     identical. */
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Was an inline style="margin-top: 0" on an otherwise class-less div,
   cancelling the top margin the row would otherwise give it. */
.comparison-columns__cell {
  margin-top: 0;
}

.comparison-col__title {
  font-weight: 500;
  font-size: clamp(1.25rem, 2.4vw, 1.8rem);
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 15px;
}

.comparison-col__rule {
  border: none;
  border-top: 1px solid var(--bx-rule);
  opacity: 1;
  margin: 0 0 0px;
}

.comparison-col__body {
  font-size: 1.125rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--bx-muted);
}

/* max-width:100% (also given by img-fluid) caps the fixed 70vh height so it
   can't push the width past the viewport on short/wide desktops → no
   horizontal scroll; object-fit:contain letterboxes rather than distorts. */
.all-in-one-visual {
  height: 65vh !important;
  max-width: 100%;
  object-fit: contain;
}

/* Connectivity video — mobile video-card sizing is in the mobile
   @media block below (#connectivity .video-card). */

/* Connectivity */
.connectivity-visual {
  max-width: 998px;
}

.connectivity-visual img {
  width: 100%;
  height: auto;
}

@media (max-width: 991.98px) {
  .connectivity-visual img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }
}

/* FAQ bar */
.faq-bar {
  background: var(--bx-white);
  border-top: 2px solid var(--bx-faq-border);
  border-bottom: 1px solid var(--bx-faq-border);
  
}

.faq-bar__inner {
  max-width: var(--bx-page-max);
  /* padding-bottom: 1.6rem; */
  padding-bottom: 0;
  /* max-width: 1920px */
}

/* Padding moved here from .faq-bar__inner's old padding-top, and applied to
   BOTH top and bottom: gx puts its equivalent spacing directly on the header
   BUTTON (`py-4`, symmetric), not on an outer wrapper. Putting it only on
   the wrapper's top gave the trigger ~26px of air above its text but 0
   below (the divider sits flush under it), which read as the header being
   bottom-aligned. */
.faq-bar__trigger {
  border: none;
  background: transparent;
  padding: 1.6rem 0;
  gap: 1rem;
}

.faq-bar__title {
  font-weight: 500;
  /* font-size: clamp(2rem, 2.5vw, 4rem); */
  font-size: clamp(2rem, 2.0vw, 4rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--bx-blue-alt);
  text-align: left;
}

/* Section toggle: plus when collapsed, minus when open — same treatment as the
   rows below it. Deliberately NOT a rotated plus: gx shows a true minus, and a
   45deg rotation reads as a close/dismiss "x" rather than "collapse". */
.faq-bar__icon {
  flex-shrink: 0;
  width: clamp(40px, 3.23vw, 62px);
  height: clamp(40px, 3.23vw, 62px);
  background-image: var(--bx-icon-plus);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  /* Matches the rotation Bootstrap gives the accordion markers below, so the
     section toggle and the rows animate identically. A background-image swap
     cannot be transitioned on its own — the rotation is what makes the change
     read as movement rather than a jump. */
  transition: transform 0.2s ease-in-out;
}

.faq-bar__trigger[aria-expanded="true"] .faq-bar__icon {
  background-image: var(--bx-icon-minus);
  transform: rotate(-180deg);
}

/* This spacing is animated, so WHERE it sits and WHICH property it uses both
   matter. It must be PADDING, and it must be on the INNER element — the panel
   itself has to stay free of padding, margin and border. Three ways this goes
   wrong, all of which were actually hit:

     1. `margin` on .faq-panel — stays at full size while the height runs to 0,
        leaving a gap that vanishes only when `display:none` applies.
     2. `margin` on the child — while `.collapsing` applies `overflow: hidden`
        the margin counts toward scrollHeight, but once open the overflow returns
        to `visible` and the margin collapses back out through the parent. The
        panel then animates to a target 24px TALLER than its resting height and
        snaps at the end of opening.
     3. `padding` on .faq-panel — Bootstrap sets `box-sizing: border-box`, and a
        border box CANNOT shrink below its own padding: at `height: 0` the panel
        still renders 24px tall. The close therefore stops moving for the last
        24px and then jumps away when `display:none` lands — a visible stutter at
        the end of closing.

   Padding on the child is inside the clipped area: it is part of scrollHeight
   (so the open target matches the resting height), it does not collapse through
   the parent, and it leaves the animated box able to reach a true zero.

   Value is 0: gx-website's equivalent wrapper (the outer accordion-body) is
   `p-0` — the first question sits flush against the divider under the
   section title, no gap. Keep this a padding declaration (not removed
   outright) so the reasoning above still applies if a gap is ever wanted
   again. */
.faq-panel > .accordion {
  padding-top: 0;
}

/* Bootstrap 5.3 exposes the accordion marker through these custom properties,
   so the plus/minus swap needs no ::after override — Bootstrap keeps applying
   its own sizing and layout.

   These MUST be set on `.accordion` itself, not on an ancestor: Bootstrap
   declares them in its own `.accordion { ... }` rule, and a declaration on the
   element always beats a value inherited from a parent. Putting them on
   `.faq-panel` silently did nothing and the default chevron stayed.

   Bootstrap's default -180deg rotation is deliberately KEPT. An earlier version
   set it to `none`, reasoning that rotating a symmetric minus is pointless —
   but the rotation is exactly what animates the plus/minus change, since a
   background-image swap cannot be transitioned. Without it the marker just
   popped. gx-website keeps the default too, so this is also the parity choice.
   Bootstrap already supplies `transition: transform .2s ease-in-out`. */
.faq-panel .accordion {
  --bs-accordion-btn-icon: var(--bx-icon-plus-row);
  --bs-accordion-btn-active-icon: var(--bx-icon-minus-row);
  --bs-accordion-btn-icon-width: clamp(18px, 2.1vw, 32px);
  /* Matches gx's `px-3 px-lg-5 py-4` on both the question button and its
     answer body — 24px vertical always, 16px horizontal below the lg
     breakpoint widening to 48px at/above it (see the min-width: 992px
     override below). Applied here via the shared Bootstrap accordion
     custom properties so button and body stay in sync. */
  --bs-accordion-btn-padding-y: 1.5rem;
  --bs-accordion-btn-padding-x: 1rem;
  --bs-accordion-body-padding-y: 1.5rem;
  --bs-accordion-body-padding-x: 1rem;
}

@media (min-width: 992px) {
  .faq-panel .accordion {
    --bs-accordion-btn-padding-x: 3rem;
    --bs-accordion-body-padding-x: 3rem;
  }
}

.faq-panel .accordion-button {
  font-weight: 500;  
  /* font-size: clamp(1.5rem, 2.2vw, 1.8rem); */
  font-size: clamp(1.5rem, 2.2vw, 1.2rem);
  letter-spacing: -0.02em;
  gap:20px
}

/* Mobile: FAQ heading + question rows 2px smaller than the clamp mins
   (32→30, 24→22). Desktop clamp unchanged. */
@media (max-width: 991.98px) {
  .faq-bar__title {
    font-size: 1.875rem; /* 30px */
  }

  .faq-panel .accordion-button {
    font-size: 1.2rem; /* 22px */
  }
}

/* Bootstrap's own accordion-button::after only sets `background-size` to a
   single value (icon width; height scales to preserve aspect ratio) and
   never sets `background-position`, so it defaults to `0% 0%` (top-left).
   That's invisible for the square plus glyph (it fills its box completely),
   but the minus glyph is a thin 5:1 bar — at auto height it renders pinned
   to the TOP of the icon box instead of centered, which is the visible
   "icon not centered" gap on open rows. */
.faq-panel .accordion-button::after {
  background-position: center;
}

.accordion-body {
  /* font-size: clamp(0.9375rem, 1.6vw, 1.5rem); */
  font-size: clamp(0.9375rem, 1.6vw, 1.1rem);
  line-height: 1.5;
  letter-spacing: -0.02em;
  font-weight: 500;
  text-align: left;
}

.faq-panel .accordion-button:not(.collapsed) {
  color: #000;
  background: #f0f0f0;
  border-bottom: 1px solid #666;
}

.accordion-flush {
  border-top: 1px solid #666;
}

.accordion-button:focus {
  box-shadow: none;
}

.accordion-item {
  border: 1px solid #666;
}

/* Workhorse */
.workhorse {
  min-height: clamp(560px, 53vw, 1018px);
  background: var(--bx-black);
}

.workhorse__model {
  width: min(41.4%, 795px);
  height: auto;
  max-height: 1018px;
  object-fit: cover;
  object-position: top center;
  z-index: 1;
  pointer-events: none;
}

.workhorse__gradient {
  height: 33%;
  min-height: 200px;
  background: var(--bx-gradient-hero);
  z-index: 2;
}

.workhorse__content {
  z-index: 3;
  max-width: var(--bx-page-max);
  min-height: clamp(560px, 53vw, 1018px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: clamp(3rem, 8vw, 6rem);
  padding-top: clamp(12rem, 22vw, 27rem);
}

.workhorse__logo {
  width: min(100%, 785px);
  height: auto;
  margin-bottom: clamp(4rem, 14vw, 17rem);
}

.workhorse__title {
  font-family: var(--bx-font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 3.33vw, 4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bx-white);
  max-width: 785px;
}

/* Final CTA */
.cta-final {
  min-height: clamp(400px, 30.16vw, 579px);
  background: #000;
  /* max-width: 1920px; */
  margin-left: auto;
  margin-right: auto;
  padding:0 0rem; 
  /* border-top:1px solid #c4c4c4; */
      box-shadow: 0px -7px 8px rgba(196, 196, 196, 0.4);
    z-index: 9;

}




.cta-final__bg {
  /* width: min(79.7%, 1530px);
  object-fit: cover;
  object-position: center; */
  height:80%;
  width: auto;
  /* Pin the box to the stream's own ratio (the Vimeo manifest ships 16:9 at
     every rendition). Without this the <video> takes its intrinsic size from
     the poster while that is showing — ven-dig.png is 2097x1446, i.e. 1.45:1 —
     and then jumps to 16:9 the moment loadedmetadata fires, re-flowing the
     graphic mid-scroll. The poster is pre-letterboxed to 16:9 for the same
     reason, so object-fit (UA default: contain) has nothing to letterbox and
     poster and first frame occupy identical boxes. */
  aspect-ratio: 16 / 9;
  z-index: 0;
      top: 50%;
    transform: translateY(-50%);
    right:1rem;
}
.cta-wrapper {
  position:relative;
  max-width: 1920px;
  margin:0 auto;
}

.cta-final__overlay {
  /* background: var(--bx-gradient-cta); */
  z-index: 1;
}

.cta-final__content {
  z-index: 2;
  max-width: var(--bx-page-max);
  min-height: clamp(400px, 30.16vw, 579px);
  display: flex;
  align-items: center;
  padding-top: clamp(3rem, 7.24vw, 8.6875rem);
  padding-bottom: clamp(3rem, 7.19vw, 8.625rem);
}

/* Was an inline style="max-width: 956px". The class existed already but
   carried no rule of its own.

   The 956px is a 1920px-design measurement and only behaves at that width. The
   Venn graphic beside it is sized off the viewport — .cta-final__bg is 80% of a
   min-height of clamp(400px, 30.16vw, 579px), width auto — so its left edge
   travels from roughly 680px at 1920 down to 338px at 1200, while a fixed text
   box stays put. That is why the headline crossed further into the artwork the
   narrower the window got. The vw term keeps the copy in proportion with the
   graphic; 956px still wins at ~1840px and above, so the intended desktop
   composition is untouched.

   Those figures predate the swap from ven-dig.png to the Vimeo stream. The
   image was 1.45:1; the stream is 16:9, so at the same height:80% the graphic
   is about 23% wider and its left edge sits correspondingly further in. The
   headline therefore overlaps the artwork by roughly 33px at 1200px — accepted
   deliberately, not an oversight: the copy is z-index 2 over a z-index 0
   video, so it reads over the top and nothing is clipped, and the overlap is
   gone by ~1400px. Narrowing this box to clear it was considered and rejected;
   keep that in mind before "fixing" the overlap by shrinking the copy. */
.cta-final__copy {
  max-width: 956px;
}

/* Desktop only. Below 1200px the two blocks further down take over, and below
   992px the section restacks to the centred mobile layout — where this box has
   no auto margin and is only centred because 956px overflows the container.
   Capping it by vw there would shrink it and strand it against the left edge. */
@media (min-width: 1200px) {
  .cta-final__copy {
    max-width: min(956px, 52vw);
  }
}

.cta-final__lead {
  font-family: var(--bx-font-serif);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.875vw, 2.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 35px;
}

.cta-final__headline {
  font-weight: 600;
  font-size: clamp(2.5rem, 5vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: #fff;
  /* Even out the line lengths instead of filling each line to the edge and
     letting the remainder fall short. Left to itself the headline wraps to a
     full-width line plus a stub ("...that broker" / "is you."); balanced it
     splits nearer the middle ("BrokerX makes sure" / "that broker is you.").

     Measured no-op at >=992px — iPad landscape (which forces its own three
     lines via .cta-final__break) and desktop wrap identically with and
     without it, so this only takes effect in the range that needed it.

     This is presentation only. The guarantee that the last line is never a
     single word comes from the &nbsp; binding "is" to "you." in the markup,
     which still holds in browsers that don't support text-wrap: balance. */
  text-wrap: balance;
}

/* Inline Venn diagram is mobile-only (shown in the mobile @media block);
   desktop uses the .cta-final__bg background video instead.

   This display:none is why the markup carries no .cta-final__venn inside the
   desktop section — that section only renders at >=992px, where this rule is
   in force, so the element could never paint. Keep the two in step: adding a
   min-width block that shows this would silently do nothing. */
.cta-final__venn {
  display: none;
}

/* Manual line breaks inside .cta-final__headline. Inert at every width except
   iPad landscape, which switches them on — a display:none <br> produces no
   break, so the headline reads as one continuous string here and wraps on its
   own. See the comment beside the markup in index.html.

   Only the desktop section (#book-demo-desktop) carries these <br>s. The
   mobile section stops rendering at 992px, exactly where they start applying,
   so a copy there could never fire. */
.cta-final__break {
  display: none;
}

/* cta-final copy constraints apply to iPad landscape only; desktop (>=1200px)
   keeps the original centred layout.

   NOTE: a second @media block with these exact bounds appears further down this
   file and also sets .cta-final__copy / .cta-final__headline. That one is later
   in source order, so it wins — the two are kept in agreement deliberately.
   Change both or neither. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .cta-final__content {
    justify-content: flex-start;
  }

  .cta-final__copy {
    max-width: min(560px, 52vw);
  }

  .cta-final__lead {
    max-width: 24ch;
  }

  /* Line count is set by .cta-final__break, not by width. The copy box is only
     wide enough to let the longest of the three lines through unwrapped; the
     headline is allowed to overrun into the Venn graphic, matching desktop. */
  .cta-final__headline {
    max-width: none;
  }

  .cta-final__break {
    display: inline;
  }
}

/* Tablet */
@media (max-width: 1199.98px) {
  .hero__model {
    /* width: 55%; */
    opacity: 1;
  }
  .hero-two-images .hero-model-2 { opacity: 0; } /* keep JS-controlled */

  .hero-scroll-driver {
    height: 240vh;
  }

  .comparison-columns {
    row-gap: 2.5rem;
  }
}

/* iPad landscape (1024px - 1199px) - specific fixes */
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* .hero__model {
    width: 44%;
  } */

  .hero-phase-1 {
    top: 50%;
    transform: translateY(-50%);
  }

  .hero__title--phase1 {
    font-size: clamp(5.5rem, 10vw, 8rem);
  }

  /* Fix text overlap in hero - increase spacing between columns */
  .hero__row {
    gap: 0 !important;
    width: 100%;
    margin-inline: 0;
  }

  .hero-phase-2 .col-lg-7 {
    flex: 0 0 58%;
    max-width: 58%;
  }

  .hero-phase-2 .col-lg-5 {
    flex: 0 0 42%;
    max-width: 42%;
  }

  .hero__left {
    padding-right: 1rem;
  }

  .hero__subtitle-line {
    font-size: clamp(1.75rem, 2.8vw, 2.5rem);
  }

  /* Right column hugs its text (width: max-content) and is pushed flush to
     the column's content edge, so the gap on its right equals the gap on
     "Be the ONE"'s left (container px-4 = 24px + col gutter 12px = 36px).
     A fixed max-width left ~80px of dead space inside the box instead.
     max-content also guarantees the tagline stays on its two authored
     lines; max-width: 100% keeps it from ever spilling out of the column. */
  .hero__right {
    width: max-content;
    max-width: 100%;
    padding-left: 0;
    margin-left: auto;
    align-items: flex-start;
    text-align: left;
  }

  /* Increase font sizes for iPad readability */
  .hero__title {
    /* font-size: clamp(8.75rem, 18.75vw, 13.75rem); */
    font-size: clamp(3.5rem, 7.5vw, 5.5rem);
  }

  .hero__tagline {
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    max-width: none;
  }
  
  .section-title {
    font-size: clamp(2rem, 4vw, 3rem);
  }
  
  .section-eyebrow {
    font-size: 1.1rem;
  }
  
  /* Fix animation/video section heights */
  .video-section-wrap .video-card {
    max-height: 60vh;
  }

  section[aria-labelledby="connectivity-title"].d-none.d-lg-block .col-md-12 {
    width: min(100%, 900px) !important;
    margin-inline: auto;
    height: auto !important;
  }

  section[aria-labelledby="connectivity-title"].d-none.d-lg-block #video-connectivity {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    object-fit: contain !important;
    background: #000;
  }
  
  /* Ensure sections have proper spacing */
  .section-block {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  
  /* Center align text in appropriate sections */
  /* Kept in step with the earlier block of the same bounds near .cta-final__venn
     — this copy is the one that actually applies. */
  .cta-final__copy {
    text-align: left;
    max-width: min(560px, 52vw);
  }

  .cta-final__lead,
  .cta-final__headline {
    text-align: left;
  }

  .cta-final__lead {
    max-width: 22ch;
  }

  .cta-final__headline {
    max-width: none;
  }
  
  /* Comparison section - equal text lengths handled by layout */
  .comparison-columns__cell {
    padding: 1.5rem;
  }
  
  /* Feature detail cards - consistent sizing */
  .feature-detail .col-md-4 {
    min-height: 200px;
  }
}

/* Highlights slider on iPad Pro portrait (992–1024px).
   Standard iPads (768–834px portrait) are already covered by the main mobile
   block (≤991.98px); this extends the slider to the 12.9″/13″ Pro whose
   portrait viewport is 1024px.  Kept in sync with highlights-slider.js. */
/* iPad Pro portrait / small landscape. Targets #highlights-desktop: above
   992px the desktop copy of the section is the visible one (the mobile copy
   keeps the bare #highlights id and its rules live in the <=991.98 block). */
@media (min-width: 992px) and (max-width: 1024px) {
  #highlights-desktop.section-block {
    /* height: calc(100vh - 66px); */
    min-height: 500px;
    padding-top: 0.75rem;
    padding-bottom: 0.5rem;
    box-sizing: border-box;
    overflow: hidden;
  }


  #highlights-desktop .section-block__header {
    flex: 0 0 auto;
  }

  #highlights-desktop .highlights-grid {
    flex: 1 1 0;
    min-height: 0;
  }

  #highlights-desktop .highlights-grid > .col {
    margin-top: 1rem !important;
    margin-bottom: 0 !important;
  }

  .highlight-card {
    height: 100%;
  }

  .highlight-card__media {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
  }

  .highlights-grid {
    width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .highlights-grid::-webkit-scrollbar {
    display: none;
  }

  .highlights-grid > .col {
    flex: 0 0 100%;
    max-width: 100%;
    scroll-snap-align: center;
  }

  .highlights-dots {
    display: flex;
  }

  .highlight-card__label {
    display: block;
    text-align: center;
  }
  .highlight-card__heading {
    text-align: center;
  }
}

/* Mobile — breakpoint is 991.98px (not 767.98px) so iPad portrait
   (768–834px) gets the mobile layout while iPad landscape (1024px+) gets
   desktop. Kept in sync with the matchMedia() gates in hero.js, header.js and
   highlights-slider.js, and with the video-menu breakpoint (992). */
@media (max-width: 991.98px) {
  /* Mobile-only: also clip horizontal overflow on <html>, not just <body>.
     With it on body alone, html can still scroll horizontally, inflating the
     mobile layout viewport so the position:fixed header renders wider than the
     screen and pushes the hamburger off-edge. Scoped to mobile because on
     desktop the hero uses position:sticky, and overflow-x:hidden on html forces
     html to overflow-y:auto — that breaks the sticky scroll and spawns a nested
     scrollbar. On mobile the hero is position:fixed (below), so it's safe here. */
  /* clip, not hidden: hidden makes the element a scroll container (the other
     axis computes to auto), which is exactly the "ancestor whose overflow
     isn't plain visible" that the comments below blamed for the sticky
     first-frame jump - the reason the hero was moved to position:fixed. clip
     clips without creating a scroll container, so native sticky can be used
     again, pinned and released entirely by the compositor. body needs the
     same treatment; its global rule still says hidden. */
  html {
    overflow-x: clip;
  }
  body {
    overflow-x: clip;
  }

  .hero__model {
    /* width: 70%; */
    width: 100%;
    /* No !important: the scroll-driven animation below drives height where
       supported. The JS fallback writes an inline !important value, which
       overrides this rule either way. */
    height: 100%;                    /* starts full-height; shrinks to 58% across phase A */
    opacity: 1;
    transition: none;
  }
  .hero-two-images .hero-model-2 { opacity: 0; } /* keep JS-controlled */

  /* Phase-1 "Be the ONE" — true vertical centre on mobile (image is full-height) */
  .hero-phase-1 {
    top: 63%;
    transform: translateY(calc(-63% + 6px));
  }

  /* Scroll budget = height - 100vh, and it is ALSO exactly how long the hero
     stays pinned. Those being the same number is the point: at 150vh the
     budget was 50vh while the animation finished in the first 10vh of it, so
     the hero sat pinned and unchanging for ~40vh before releasing. That is
     what reads as the hero having its own scroll area and stalling at the
     end - the page stops responding while the sticky burns through leftover
     budget.

     115vh leaves ~15vh, and the ranges below now span nearly all of it, so
     the hero is pinned only while it is actually animating and releases as
     soon as it finishes. One ordinary swipe covers the whole thing and keeps
     going into section 2 without ever appearing to stop.

     History: 280vh (the original "too many scrolls" complaint) -> 180vh ->
     150vh -> 115vh. */
  .hero-scroll-driver {
    /* Black so the 66px strip revealed when the header slides away is the same
       colour as the header that was covering it - the hide reads as the menu
       leaving, not as a gap opening. */
    background: var(--bx-black);
    height: 115vh;
    /* No margin-top. It used to offset the driver by the header height so
       the hero cleared the fixed header, but .hero-sticky has top:66px and
       clamps there from the very first frame, so the hero already starts
       below the header without it. The margin was pure cost: the view
       timeline's contain range began 66px down the page, so the first 66px
       of every scroll moved nothing before the animation could start. */
  }

  /* position: sticky can visibly "jump" on the very first real (touch/
     compositor-driven) scroll frame — most reliably reproduced when an
     ancestor's overflow isn't plain `visible` (body has overflow-x:hidden,
     which per spec forces overflow-y to compute as auto, making body an
     unintended scrolling ancestor). position: fixed sidesteps the whole
     sticky-containing-block question — it's viewport-relative, period. */
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  /* Native position:sticky again (inherited from the base rule), now safe
     because html/body use overflow-x: clip above - no scroll-container
     ancestor, so none of the first-frame-jump behaviour that forced the old
     position:fixed + JS fixed->absolute handoff. The compositor pins AND
     releases this with no JS and no thresholds: release happens when the
     sticky box meets the driver's bottom edge, which is the same geometry
     the scroll-driven animation below ends on, so they cannot drift apart.

     100svh: always fits above a mobile URL bar and never resizes
     mid-gesture (unlike 100dvh). Older browsers use the vh line.

     header.js still toggles .hero-sticky--released below 992px; that class
     now matches no rule here, so the toggle is inert. */
  .hero-sticky {
    /* top is pinned with !important so header.js cannot move it. That script
       writes heroSticky.style.top = 0 / 66px whenever the header hides or
       shows, which coupled the hero's geometry to the header's state: hiding
       the menu mid-scroll resized and shifted the pinned hero by 66px, a
       layout change in the middle of a gesture. The strip the header vacates
       is black (driver background below) and so is the header itself, so the
       menu now slides away over matching black and the hero never moves.
       Inline styles lose to !important, so no JS change is needed for this.

       Full viewport rather than viewport-minus-header: the header is hidden
       by default below 992px (see js/header.js) and only slides in on a
       scroll up, so reserving 66px for it left a dead black band across the
       top on load. The hero takes the whole screen and the header, which is
       opaque black, simply overlays its top edge on the occasions it shows. */
    top: 0 !important;
    height: 100vh;
    height: 100svh;
    transition: none;
  }

  /* SCROLL-DRIVEN HERO, COMPOSITOR EDITION.
     Same functionality as the JS scroll handler - splash fades/drifts out,
     full hero fades/slides in, image shrinks 100% -> 58% - but declared as
     CSS scroll-driven animations on a view timeline of the driver. The
     compositor advances them in lockstep with the actual scroll position:

       - no per-frame JS style writes lagging the scroll thread
       - no scroll budget derived from innerHeight, so nothing shifts when
         the Android URL bar slides mid-gesture - the browser resolves the
         timeline's geometry natively, bar included
       - "contain 0% -> 100%" is by definition driver-top-at-viewport-top to
         driver-bottom-at-viewport-bottom: exactly the old JS progress map

     Where animation-timeline is unsupported these declarations are ignored
     and js/hero.js keeps driving the same properties from its scroll
     handler (it detects support and steps back where CSS has taken over).
     is-active - reveals stagger, footnote, pointer-events - stays
     JS-toggled in both paths, same as shipped.

     The whole sequence is packed into the first 20% of the budget (~90px):
     phase A across 0-10%, phase B across 10-20%. That is short enough that
     any real gesture finishes it - a brief touch-drag included - so the
     animation never needs a second scroll to complete. The remaining 80% is
     a hold on the finished hero, and at 0.4 screens it is under one swipe,
     so the same gesture that plays the sequence also carries on out of the
     hero. Percentages, so retuning the driver height rebalances nothing. */
  @supports (animation-timeline: view()) {
    .hero-scroll-driver.view-mobile {
      view-timeline-name: --bx-hero;
      view-timeline-axis: block;
    }

    /* The exit and the entrance OVERLAP (8% < 12%) so they crossfade instead
       of handing off at one point, where a single frame has to carry the whole
       switch. */
    .view-mobile .hero-phase-1 {
      animation: bx-hero-phase1-exit cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
      animation-timeline: --bx-hero;
      animation-range: contain 0% contain 55%;
    }

    .view-mobile .hero-phase-2 {
      animation: bx-hero-phase2-enter cubic-bezier(0.215, 0.61, 0.355, 1) both;
      animation-timeline: --bx-hero;
      animation-range: contain 40% contain 85%;
    }

    /* The footnote is a sibling of .hero-phase-2, so it cannot inherit that
       opacity. Put it on the same timeline and range instead of leaving it to
       its class-triggered CSS transition, so it moves with the content it
       belongs to at exactly the reader's scroll speed. */
    .view-mobile .hero__footnote--phase2 {
      animation: bx-hero-footnote-in cubic-bezier(0.215, 0.61, 0.355, 1) both;
      animation-timeline: --bx-hero;
      animation-range: contain 40% contain 85%;
      transition: none;
    }

    /* The image is LAID OUT at its final size and scaled up for the splash,
       rather than being resized as the scroll progresses.

       This is the difference between a smooth hero and a janky one. height is
       a layout property: animating it relayouts the element and repaints a
       full-screen photograph on every frame, on the main thread, which no
       amount of compositor-driven timing can rescue - it was the last piece
       of this animation still doing per-frame work off the GPU. transform is
       compositor-only: the scale is handed to the GPU once and every frame
       after that is free.

       transform-origin is the TOP edge, so scaling alone cannot open up space
       above the model - it pins the image's top edge and only makes her
       bigger. The 4svh translateY is what gives her head clearance from the
       blue bar under the header; .hero__bg (the hero gradient) sits behind
       and fills the strip it uncovers.

       1.7 rather than 1.724 (=100/58, the exact fill value): slightly less
       zoom so the framing matches production, where she reads smaller with
       more space around her. It still reaches the bottom of the viewport
       once shifted down - 0.58 x 1.7 = 0.986 of viewport height plus the
       0.07 offset = 1.056, so it covers at any screen height.

       translateX(-50%) is carried through both keyframes because
       .hero-model-1 uses it for horizontal centring, and a transform
       animation replaces the property wholesale.

       height !important outranks Bootstrap's h-100 on the img. The JS
       fallback writes an inline !important height, which beats this rule, so
       the no-support path is unchanged. */
    .view-mobile .hero__model {
      height: 58% !important;
      transform-origin: top center;
      will-change: transform;
      animation: bx-hero-image-zoom cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
      animation-timeline: --bx-hero;
      animation-range: contain 0% contain 55%;
    }
  }

  /* Keyframe from/to values match what the JS handler writes at progress 0/1
     (phase-1 translate uses this block's -60% centring). */
  @keyframes bx-hero-phase1-exit {
    from { opacity: 1; transform: translateY(calc(-63% + 6px)); }
    to   { opacity: 0; transform: translateY(calc(-63% - 134px)); }
  }

  @keyframes bx-hero-phase2-enter {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* No entrance stagger on mobile. It is a 0.9s time-based animation fired by
     a class the JS flips as scroll passes a threshold, so it plays at its own
     speed regardless of how fast the reader is scrolling - a visible mismatch
     against a hero that is otherwise scrubbed frame-for-frame with the finger,
     and it re-fires every time that threshold is crossed. These elements are
     inside .hero-phase-2 and so already fade in with it, on the timeline. */
  .hero-phase-2 .hero__reveal,
  .hero-phase-2.is-active .hero__reveal,
  .hero-phase-2.is-active .hero__reveal--delay,
  .hero-phase-2.is-active .hero__reveal--delay-2 {
    animation: none;
    opacity: 1;
    transform: none;
  }

  @keyframes bx-hero-footnote-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  @keyframes bx-hero-image-zoom {
    from { transform: translateX(-50%) translateY(7svh) scale(1.7); }
    to   { transform: translateX(-50%) translateY(9svh) scale(1); }
  }

  .hero__container {
    padding-top: 1.5rem;
    /* Base rule is align-items: center. On mobile the title/subtitle/
       tagline/button stack into one tall block instead of the desktop
       2-column row, and padding-top (1.5rem) is much smaller than
       padding-bottom (clamp(5rem, 10vw, 7.5rem)) — centering that block in
       an asymmetric box pulls it upward, onto the model's face. Anchoring
       to the bottom instead keeps it clear of the face regardless of how
       tall the stacked content gets. */
    align-items: flex-end;
  }

  .hero__row {
    margin-bottom: 23px;          /* extra breathing room above the footnote */
  }

  .hero__right {
    max-width: 100% !important;
    align-items: center !important;
    text-align: center !important;
    margin-inline: auto;
    padding-left: 0 !important;
  }

  .hero__left {
    text-align: center;
  }

  .hero__title--phase1 {
   font-size: clamp(4.5rem, 13.07vw, 15.6875rem)
  }

 .hero__tagline {
    font-size:clamp(1.3rem, 2.55vw, 3.0625rem)    
  }
  .hero__subtitle-line {
    justify-content: center;
    /* The base rule is clamp(2rem, 3.18vw, 3.8125rem); on a phone 3.18vw is
       ~12px so it pins to the 2rem floor, and the switcher text is
       white-space:nowrap — at 32px the longest phrase ("Supercharge Your
       Leads") measures 330px against a 257px budget at 375w, so it ran off
       both edges. It looked fine only because the mobile `html
       { overflow-x: hidden }` clipped it. Scale the floor with the viewport
       instead; the 2rem cap means anything above ~552px is unchanged, so
       tablet and desktop keep the original sizing. */
    /* font-size: clamp(1rem, 5.4vw, 2rem); */
    /* font-size:  1.7rem; */
    /* font-size: clamp(1.4rem, 6.5vw, 1.7rem); */
    font-size: clamp(1.0rem, 6.5vw, 1.7rem);
  }

 
  .hero__footnote {
    font-size:clamp(0.7rem, 1.04vw, 1.25rem)
  }

  /* Make the highlights section exactly one screen tall on mobile so the
     title + card + dots all fit without scrolling. The section inner is
     already a flex column, so the card grows to fill whatever the title
     and dots don't use. */
  #highlights.section-block {
    height: calc(100svh - 66px);   /* viewport minus fixed header */
    min-height: 500px;
    padding-top: 0.75rem;
    padding-bottom: 0.5rem;
    box-sizing: border-box;
    overflow: hidden;
  }

  #highlights .section-block__header {
    flex: 0 0 auto;
  }

  #highlights .highlights-grid {
    flex: 1 1 0;
    min-height: 0;
  }

  #highlights .highlights-grid > .col {
    margin-top: 1rem !important;
    margin-bottom: 0 !important;
  }

  .highlight-card {
    height: 100%;
  }

  /* Let the image area fill remaining card space */
  .highlight-card__media {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
  }

  /* Highlights grid becomes a swipeable, snap-scrolling slider on mobile;
     dots + autoplay/pause behavior are driven by js/highlights-slider.js. */
  .highlights-grid {
    /* The section inner is a flex column (.section-block__inner.d-flex), so the
       grid is a flex item and would otherwise be sized by its content — i.e. as
       wide as all four slides combined. Pin it to the container width so each
       slide is one viewport wide and scroll-snap has something to snap to. */
    width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .highlights-grid::-webkit-scrollbar {
    display: none;
  }

  .highlights-grid > .col {
    flex: 0 0 100%;
    max-width: 100%;
    scroll-snap-align: center;
  }

  .highlights-dots {
    display: flex;
  }

  /* Centre-align card titles in slider mode.
     .highlight-card__label is a <span> — needs display:block
     so text-align takes effect. */
  .highlight-card__label {
    display: block;
    text-align: center;
  }
  .highlight-card__heading {
    text-align: center;
  }

  .comparison-banner img {
    max-height: 200px;
  }

  /* All-in-One — fill one viewport on mobile so it reads as a
     single screen; image flexes to fill whatever space the header
     doesn't use. */
  #all-in-one.vh-100 {
    height: calc(85svh - 66px) !important; /* viewport minus fixed header, trimmed */
    min-height: 0 !important;
    padding-top: 2rem;
    padding-bottom: 2rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }

  #all-in-one .section-block__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  #all-in-one .section-block__body {
    flex: 1 1 0;
    min-height: 0;
    margin-top: 1rem;
  }

  .all-in-one-visual {
    height: 100% !important;
    max-height: 100%;
    width: auto;
    object-fit: contain;
  }

  /* Connectivity — fill one viewport on mobile; the black bg extends
     above/below the video naturally so the section reads as one screen. */
  #connectivity.section-block {
    height: calc(100svh - 66px);
    min-height: 480px;
    padding-top: 2rem;
    padding-bottom: 2rem;
    box-sizing: border-box;
  }

  #connectivity .section-block__body {
    flex: 1 1 0 !important;
    min-height: 0;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 0 !important;
    padding: 0 !important;
  }

  #connectivity .video-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
  }

  #connectivity .video-card video {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    object-fit: contain !important;
    border-radius: 0 !important;
    transform: scale(1.22);
  }

  .workhorse__model {
    width: 85%;
    opacity: 0.6;
  }

  .workhorse__logo {
    margin-bottom: 2rem;
  }

  /* Mobile last section matches the mockup: dark, centred, stacked
     (lead text → Venn diagram → headline → button). The desktop background
     video + overlay are dropped here in favour of an inline .cta-final__venn.

     Both selectors below are guards rather than live rules: the mobile section
     (#book-demo) carries neither a .cta-final__bg nor a .cta-final__overlay of
     its own, precisely because this rule would hide them. What they still act
     on is the desktop section (#book-demo-desktop), for the moment a resize
     crosses 992px before its own d-none takes over. Keep them — re-adding
     either element to the mobile markup is the mistake this catches. */
  .cta-final {
    padding-left: 0;
    padding-right: 0;
  }

  .cta-final__bg,
  .cta-final__overlay {
    display: none;
  }

  .cta-final__content {
    text-align: center;
  }

  .cta-final__venn {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    /* Same reason as .cta-final__bg: hold the stream's 16:9 so the element
       does not resize when the poster gives way to the first frame. The
       max-width rules further down only raise the cap, so they scale this
       box, they do not reshape it. */
    aspect-ratio: 16 / 9;
    margin: 1.5rem auto;
  }
}

/* Mobile + iPad, portrait only: the general mobile rule's 0.75rem top
   padding isn't enough to clear the 66px fixed header — with the section
   scrolled flush to the top, "See the Highlights" and part of the main
   heading render underneath it (the header is position:fixed and paints
   over the section's own top edge). Push the header block down past it.
   Landscape is excluded: a landscape phone/tablet has much less height to
   spare, so the full-height base rule fits it better than this trim. */
@media (max-width: 991.98px) and (orientation: portrait) {
  #highlights.section-block {
    padding-top: 2rem;
    height: calc(100svh - 5px);
  }
  #highlights.section-block {
    padding-top:4rem;
    padding-bottom:4rem;
  }


}

@media (min-width: 768px) and (max-width: 991.98px) {
  /* Connectivity diagram: drop the phone crop.
     The <=991.98 rule scales the video 1.22x to make the circle fill a narrow
     phone screen, and the overflow it produces is clipped by the mobile
     html { overflow-x: hidden }. On iPad portrait the section is ~820px wide,
     so 1.22x pushes ~90px off each side and takes the ring labels with it
     ("Lender Policy & Product Data Services" on the right, the BrokerX mark).
     At this width the video is already full-bleed, so it needs no scaling —
     the section is taller than the 16:9 frame and simply centres it. */
  #connectivity .video-card video {
    transform: none;
    max-width: 100%;
  }

  /* iPad portrait only: the general mobile rule (above) sizes this section to
     calc(100svh - 66px) — a full screen — which pushed the "All-in-One"
     heading right past the bottom edge. Trim more off the section so more of
     the next section (and its heading) shows without scrolling. This is a
     fixed px trim, not another svh-based cut, because the overflow being
     fixed is a fixed-height heading block, not something proportional to
     viewport height. */
  #connectivity.section-block {
    height: calc(100svh - 220px);
  }

  .hero__title--phase1 {
    font-size: clamp(4.25rem, 10vw, 6.5rem);
  }

  .hero__title {
    /* font-size: clamp(3rem, 7vw, 4.5rem); */
    font-size: clamp(8.75rem, 18.75vw, 13.75rem);
  }

  .hero__tagline {
    /* font-size: clamp(1.5rem, 2.8vw, 2rem); */
    font-size: clamp(2.25rem, 4.2vw, 3rem);
  }

  .section-title {
    font-size: clamp(2.25rem, 4.4vw, 3.25rem);
  }

  .video-section-wrap {
    width: min(88vw, 100%);
  }

  .cta-final__content {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .cta-final__venn {
    max-width: 360px;
    margin: 1.25rem auto;
  }

  .cta-final__headline {
    font-size: clamp(3rem, 6vw, 4rem);
    line-height: 0.95;
  }
}
/* ----- iPad portrait view GX -----*/
@media (min-width: 768px) and (max-width: 991.98px) and (orientation: portrait) {
  .hero__model {
    max-width:642px
  }
  .hero__subtitle-line {
   font-size: clamp(2.75rem, 4.37vw, 3.9rem);
  }
   
}




/* iPad portrait: the final CTA fills the screen.
   It is the last section before the footer, and at this width the stacked
   layout (lead → Venn → headline → button) leaves it floating in the middle of
   a tall viewport. Only the box's height changes here — nothing inside is
   stretched or rescaled, so the Venn graphic and the headline keep the exact
   proportions they have without this rule; the flex centring in
   .cta-final__content just distributes the extra room around them.

   svh (small viewport height) rather than vh: on iPad Safari 100vh is measured
   with the toolbars retracted, so with them shown the bottom of the section —
   the button — sits below the fold. svh is the toolbars-visible height, so the
   section is fully visible in both states. The plain vh line above it is the
   fallback for browsers without svh; declaration order does the switching.

   Scoped to portrait so a short landscape window in the same width range is
   not forced into a viewport-tall section it would have to scroll through.
   min-height, not height: if the stack ever outgrows the viewport (large text
   settings) the section grows with it instead of clipping. */
@media (min-width: 768px) and (max-width: 991.98px) and (orientation: portrait) {
  .cta-final,
  .cta-final__content {
    min-height: 100vh;
    min-height: 100vh;
  }

  /* Scale the stack up to match the room the section now has. The copy box was
     already the full container width (757px at 820) — what read as narrow was
     the content inside it: a 360px Venn and a headline whose longest line came
     to 443px, both sized for a phone. These are the same three elements at
     roughly 1.35x, which puts the longest headline line and the lead at ~591px
     of the 757px available.

     Every value keeps a deliberate margin below the container width, because
     the headline and lead are set in remote Typekit faces with no local
     fallback — a substituted face measures wider, and the slack is what stops
     it wrapping to an extra line before the webfont arrives. Verified at both
     768x1024 and 820x1180: lead stays on one line, headline on two.

     These override the phone values in the (max-width: 991.98px) block above;
     same specificity, so source order does it. Keep this block after it. */
  .cta-final__venn {
    /* Ratio is still held by the height:auto in the block above — this only
       raises the cap, so the graphic scales, it does not stretch. The vw term
       keeps it off the edges at 768, where 70vw (538px) wins over 560px. */
    max-width: min(560px, 70vw);
    margin: 1.75rem auto;
  }

  .cta-final__lead {
    /* font-size: clamp(1.375rem, 2.8vw, 1.5rem); */
    font-size: clamp(2.25rem, 4.4vw, 3.25rem);
  }

  .cta-final__headline {
    font-size: clamp(3.5rem, 8vw, 4.25rem);
  }

  /* The button is part of the same stack and looks undersized left at phone
     scale beside a 560px graphic. Padding grows with the text so the pill keeps
     its proportions; scoped to .cta-final so the shared .btn-brokerx is
     untouched elsewhere on the page. */
  .cta-final .get-early-access-btn {
    font-size: 1.125rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__reveal {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* Skip scroll sequence; show final state immediately */
  .hero-phase-1 {
    opacity: 0 !important;
  }

  .hero-phase-2 {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .hero-phase-2 .hero__reveal {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .hero__footnote--phase2 {
    opacity: 1;
    transition: none;
    font-size: 0.75rem;
  }

  .highlight-card:hover {
    transform: none;
  }
}


.bdr-1 {
  box-shadow: 0px 0px 6px #c4c4c4;
}

.custom-scroll{
    overflow:auto;
}

.custom-scroll::-webkit-scrollbar{
    width:8px;
}

.custom-scroll::-webkit-scrollbar-thumb{
    background:#666;
    border-radius:10px;
}


.mx-6{
    margin-left:6rem !important;
    margin-right:6rem !important;
}

.mx-7{
    margin-left:8rem !important;
    margin-right:8rem !important;
}

.px-6{
    padding-left:6rem !important;
    padding-right:6rem !important;
}

.px-7{
    padding-left:8rem !important;
    padding-right:8rem !important;
}


.py-6{
    padding-top:6rem !important;
    padding-bottom:6rem !important;
}

.py-7{
    padding-top:8rem !important;
    padding-bottom:8rem !important;
}


.max-w-auto{
    max-width:none;
}

.hide-scrollbar{
    scrollbar-width:none;          /* Firefox */
    -ms-overflow-style:none;       /* IE and Edge */
}

.hide-scrollbar::-webkit-scrollbar{
    display:none;                  /* Chrome, Safari */
}

.comparison-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Column widths are driven entirely from here (no inline widths in the
   markup): a fixed narrow middle gutter, and the two content columns split
   the rest evenly. max-width pulls the BrokerX / Traditional columns closer
   together instead of letting them spread across the full 1413px wrapper. */
.comparison-table {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  border-collapse: collapse;
  table-layout: fixed;
}

.comparison-gutter {
  width: 60px;
}

/* Device mockups: cap by HEIGHT (they have very different aspect ratios —
   phone 573x1155, monitor 574x455), and let width shrink to fit the column.
   Never set height:auto alone here: the phone's intrinsic width would then
   fill the column and blow the row up to ~900px tall. Both sit on a shared
   baseline, so the taller phone rises above the monitor. */
.comparison-table .comparison-row--images td {
  vertical-align: bottom;
  /* Was an inline style="padding-bottom: 15px" repeated on both cells. */
  padding-bottom: 15px;
}

.comparison-row--images img {
  display: block;
  margin: 0 auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 385px;
}
.comparison-table th,
.comparison-table td {
  vertical-align: top; padding: 8px 0rem; text-align: center;
}

.compa-text-heading {
  font-weight: 500;
  font-size: 20px;
}

.txt-color-light {
  color:#333
}

.padding-update td {
  padding:33px 0
}

.bdr-bottom-comp {
  /* border-bottom:1px solid var(--bx-rule); */
  padding-bottom:20px;
}

/* .hero-scroll-driver::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../assets/images/banner-bg.png') repeat-x left top;
  background-size: 100% 100%;
  z-index: -1;
} */

.yesTick {
  color:#0064ff;
  /* font-weight: 600; */
}
.noCross {
  color:#ff0000;
  /* font-weight: 600; */
}

.comp-text-width {
  width:243px;
  text-align: center;
  margin:0 auto;
      font-size: 14px;

}

.comp-text-width-mid {
  width:200px  ;
  text-align: center;
  margin:0 auto;
  font-weight: 600;
}

/* Each feature title sits on its own full-width row directly above the
   Yes/No row it labels (desktop and mobile), so drop the bottom padding
   .padding-update adds — otherwise the title floats away from its row. */
.comparison-heading-row td {
  padding: 33px 0 0;
  font-weight: 600;
  /* border-top: 1px solid #e0e0e0; */
}
@media (max-width: 991.98px) {
  .comparison-heading-row td {
    border-top: 1px solid #e0e0e0;
    padding: 1.5rem 0 0;
    
  }
  .padding-update td.bdr-bottom-comp {
    padding-bottom: 1.5rem;
  }
  .comparison-heading-row td {
    padding:1.5rem 0 0;
  }
}

.comp-icon-wrap {
  padding: 10px 0
}

/* Mobile-only side-by-side device mockups (see the mobile @media block).
   Hidden on desktop, where the mockups live in the table's first row. */
.comparison-devices {
  display: none;
}

/* Comparison table: show more / show less (both mobile and desktop) */
.comparison-row--extra {
  display: none;
}

.comparison-table.is-expanded .comparison-row--extra {
  display: table-row;
}

.comparison-toggle-wrap {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--bx-faq-border);
}
@media (max-width: 991.98px) {
  .comparison-toggle-wrap {
    margin-top: 0;
  }
}

.comparison-show-more {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  border: none;
  background: none;
  color: var(--bx-blue);
  font-weight: 500;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  cursor: pointer;
  padding: 0px 0;
}

.comparison-show-more__label {
  text-decoration: none;
}

.comparison-show-more__icon {
  transition: transform 0.2s ease-in-out;
}

.comparison-show-more[aria-expanded="true"] .comparison-show-more__icon {
  transform: rotate(180deg);
}

/* ── Comparison popup (desktop ≥ 1200 px only) ─────────────────────── */
.comparison-popup {
  display: none;                       /* hidden by default everywhere */
}

@media (min-width: 1200px) {
  /* On desktop, hide the inline expand chevron icon — the popup replaces it */
  .comparison-show-more__icon { display: none; }

  .comparison-popup {
    display: none;                     /* still hidden until .is-open */
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
  }

  .comparison-popup.is-open {
    display: flex;
  }

  .comparison-popup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  .comparison-popup__panel {
    position: relative;
    background: var(--bx-white);
    border-radius: var(--bx-radius-card);
    width: 90%;
    max-width: 960px;
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;               /* clip the body's scrollbar to the rounded corners */
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
    animation: compPopupIn 0.3s ease-out;
  }

  @keyframes compPopupIn {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
  }

  /* Close button floats over the scrollable content — it does NOT sit in a
     fixed header bar, so "Comparison" and the title scroll away underneath
     it, matching the reference design. */
  .comparison-popup__close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--bx-pill-light);
    color: var(--bx-black);
    cursor: pointer;
    transition: background 0.15s;
  }
  .comparison-popup__close:hover {
    background: var(--bx-faq-border);
  }

  /* The cloned table (js/main.js) only copies .comparison-table, not the
     .text-dark section that wraps it on the page — so anything inside it
     without its own explicit color (e.g. .compa-text-heading,
     .comparison-col__title, .comp-text-width) would otherwise fall through
     to body.text-white and render invisible on this white panel. */
  .comparison-popup__body {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 32px 24px;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    color: var(--bx-black);
  }

  .comparison-popup__body::-webkit-scrollbar-corner {
    background: transparent;
  }

  /* Hide the up/down arrow buttons Chromium/Edge draw at the ends of the
     scrollbar track — the panel only needs the thumb to drag. Hiding the
     buttons alone still left the track's own gray background square poking
     past the panel's rounded corners (overflow:hidden on the panel clips the
     body's content, but not the body's own native scrollbar chrome), so the
     track is made transparent too and only the thumb — narrow and rounded —
     is drawn. */
  .comparison-popup__body::-webkit-scrollbar-button {
    display: none;
  }

  .comparison-popup__body::-webkit-scrollbar {
    width: 8px;
  }

  .comparison-popup__body::-webkit-scrollbar-track {
    background: transparent;
  }

  .comparison-popup__body::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
  }

  /* Same styling as the section's own header (.section-eyebrow /
     .section-title--tight) so the popup heading reads identically to the
     non-popup "Comparison" section title. */
  .comparison-popup__eyebrow {
    font-weight: 600;
    font-size: clamp(1.125rem, 1.25vw, 1.5rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--bx-blue);
    margin: 0 0 8px;
    text-align: center;
  }

  .comparison-popup__title {
    font-family: var(--bx-font-serif);
    font-weight: 400;
    font-size: clamp(1.75rem, 2.4vw, 2.75rem);
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
    padding: 0 40px;                /* keep clear of the floating close button */
    color: var(--bx-black);
    text-align: center;
  }

  /* The cloned table inside the popup shows ALL rows (no hide / show-more) */
  .comparison-popup__body .comparison-row--extra {
    display: table-row !important;
  }

  /* Device mockups are shown much smaller inside the popup than on the full
     page. The popup has to open with the first TWO feature groups — "Built for
     Australian brokers" and "Artificial Intelligence", each being a heading
     row + a verdict row + a description row — fully in view before any
     scrolling, and everything above them eats into that budget.

     The mockups are the only elastic item in it, so rather than being pinned
     they take whatever the viewport has left once everything else is placed:

        94vh          the panel's own height cap
        - 630px       eyebrow + title + both groups + the body's own padding,
                      as measured in the browser
        = what the mockups may have

     317px is their size in the approved design and where they stop growing —
     reached at about a 1030px viewport. 56px is the floor. Note the design was
     drawn against a ~1130px viewport; below that the mockups CANNOT be 317px
     and still leave both groups above the fold, so they give way. */
  .comparison-popup__body .comparison-row--images img {
    max-height: clamp(56px, calc(94vh - 630px), 317px);
  }

  /* The generous 33px of air above each heading and verdict row is what the
     full-page section uses, where there is a whole viewport to spend. Inside
     the popup that air is worth more as mockup size, so it is traded down —
     the formula above spends every pixel this frees.

     Only padding-top is touched: the bottom of these cells is set by Bootstrap
     utilities in the markup (.pb-0, .pb-lg-2), which carry !important, and the
     description rows keep their own spacing because of them. */
  .comparison-popup__body .padding-update td,
  .comparison-popup__body .comparison-heading-row td {
    padding-top: 18px;
  }

  /* Keep the cloned table at full width inside the popup panel, and let it
     shrink below its 940px desktop max-width instead of opening a nested
     horizontal scrollbar (which produced a stray scrollbar-corner box). */
  .comparison-popup__body .comparison-table {
    width: 100%;
    max-width: 100%;
  }

  .comparison-popup__body .comparison-table-scroll {
    overflow-x: hidden;
  }
}

/* Short desktop screens — anything under 1000px of viewport. That is most
   real windows: a maximised browser on a 1080p monitor leaves roughly 910px
   once chrome and taskbar are taken out, and a 1366x768 laptop leaves ~660px.
   Same goal, tighter budget: the row icons shrink and the heading block gives
   up some of its air, so the "Artificial Intelligence" description still lands
   above the fold.

   Because this tier buys back roughly 90px, the mockups get their own, more
   generous budget here — same formula as above with a smaller constant. All of
   it is verified by measuring where the second group's description ends
   against the popup body's visible height. */
@media (min-width: 1200px) and (max-height: 999px) {
  .comparison-popup__body {
    padding-top: 12px;
  }

  /* The eyebrow and title keep their full responsive size here — shrinking
     them was the one compression that read as a downgrade rather than as a
     tighter layout, and on a wide desktop the title is the piece that carries
     the design. Only their margins give way. */
  .comparison-popup__eyebrow {
    margin-bottom: 6px;
  }

  .comparison-popup__title {
    margin-bottom: 6px;
  }

  .comparison-popup__body {
    padding-bottom: 16px;
  }

  /* "BrokerX" / "Traditional software" sit tight under the mockups. */
  .comparison-popup__body .comparison-table th {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .comparison-popup__body .comparison-row--images td {
    padding-top: 8px;
    padding-bottom: 10px;
  }

  .comparison-popup__body .padding-update td,
  .comparison-popup__body .comparison-heading-row td {
    padding-top: 12px;
  }

  .comparison-popup__body .comp-icon-wrap img {
    width: 40px;
    height: 40px;
  }

  /* 570px is everything in the popup that is NOT the mockups, measured in the
     browser at this tier's spacing. Re-measure it if any spacing in this block
     changes — it is the number that decides how big the mockups can be. */
  .comparison-popup__body .comparison-row--images img {
    max-height: clamp(56px, calc(94vh - 570px), 317px);
  }
}

/* Comparison table: the fixed pixel widths above (inline styles + width
   attributes in index.html) are tuned for desktop and force an oversized
   horizontal scroll on phones. Table stays horizontally scrollable
   (.comparison-table-scroll), but shrink the columns so more of it fits
   per swipe instead of every column staying desktop-width. */
@media (max-width: 991.98px) {
  /* Show the two device mockups as a fit-to-width side-by-side row, and hide
     the in-table image row (which is 846px wide and pushes the Traditional
     mockup off-screen). The feature-detail rows below still scroll. */
  /* Mirror the table's grid exactly — two equal columns split by the same
     14px gutter — so each mockup sits centred over its own column and lines
     up with the BrokerX / Traditional software heading beneath it. Bottom
     baseline shared, matching desktop. */
  .comparison-devices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    justify-items: center;
    align-items: end;
    margin-bottom: 12px;
  }

  .comparison-devices__img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 240px;
    object-fit: contain;
  }

  .comparison-row--images {
    display: none;
  }

  /* Fit the whole table inside the viewport: narrow gutter, and the two
     content columns share whatever is left. */
  .comparison-table {
    max-width: 100%;
  }

  .comparison-gutter {
    width: 14px;
  }

  .padding-update td {
    padding: 18px 0;
  }

  .comparison-heading-row td {
    padding: 18px 0 0;
  }

  /* Let the copy wrap to the column instead of holding a fixed 200px width
     (which is what pushed the table wider than the screen). Long words break
     rather than forcing a horizontal scroll. */
  .comp-text-width,
  .comp-text-width-mid {
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }

  .comparison-table th,
  .comparison-table td {
    padding-left: 2px;
    padding-right: 2px;
  }

  .comparison-col__title {
    overflow-wrap: break-word;
  }

  .compa-text-heading {
    font-size: 16px;
  }
}

/* On mobile browsers 100vh is the *maximum* viewport height (address bar
   collapsed) — on load the section renders taller than the visible area and
   jumps as the bar collapses. dvh tracks the actual visible viewport instead.
   Kept scoped to mobile + @supports so desktop and older browsers are
   untouched. */
@supports (height: 100dvh) {
  @media (max-width: 991.98px) {
    #all-in-one.vh-100 {
      height: calc(85dvh - 66px) !important;
    }
    #comparison.min-vh-100 {
      min-height: 100dvh !important;
    }
  }
}

.gradient-black {
  background: linear-gradient(180deg, rgb(28, 28, 28) 0%, rgb(28, 28, 28) 50%, rgba(0, 0, 0, 1) 100%);
}

.gradient-white {
  background:linear-gradient(180deg, rgb(240, 240, 240) 0%, rgb(240, 240, 240) 50%, rgba(255, 255, 255, 1) 100%);
   
}




.hero-model-1 {
  height: 100%;
  width:auto
}

/* iPad Portrait */
@media only screen 
  and (min-width: 768px) 
  and (max-width: 1366px) 
  and (orientation: portrait) {
    .hero__right {
      padding-left:0
    }
    .hero-phase-1 {
      top:60%;
    }
    .hero__title--phase1 {      
      font-size: clamp(8.75rem, 18.75vw, 13.75rem)
      /* font-size: clamp(5.5rem, 13.07vw, 15.6875rem); */
    }

    .hero-phase-2 .hero__title {
      font-size: clamp(5.5rem, 13.07vw, 15.6875rem);
    }

    .hero__subtitle-line {
      font-size:clamp(2.3rem, 4.37vw, 3.9rem)
    }

    .hero__tagline {
      font-size:clamp(2.0rem, 4.0vw, 3.9rem)
    }

    .gradient-black .video-section-wrap {
      background: transparent !important;
      padding: 0;
      border-radius: 0;
    }
    .comp-text-width, .comp-text-width-mid {
      width:243px
    }
    /* #highlights .highlights-grid > .col {
        display: flex;       
        justify-content: center;
    } */
    .highlights-grid{
      width:70vw
    }
    .section-eyebrow {
      font-size:1.5rem
    }
    .highlight-card__heading {
      font-size:1.875rem
    }

    #highlights-desktop {
      height: 100vh;
    }
    #highlights-desktop.section-block {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    .section-block__inner {
      height: 100%;
    }
    .highlights-grid {
      padding:0rem 0 
    }
    

  }



/* iPad Landscape */
@media only screen 
  and (min-width: 768px) 
  and (max-width: 1366px) 
  and (orientation: landscape) {
    .hero__title--phase1 {
      font-size: clamp(5.5rem, 13.07vw, 15.6875rem);
    }   
    .hero__tagline {
      font-size:clamp(1.3rem, 2.55vw, 3.0625rem)    
    }    
    .hero__model {
      width: 55%;
    }
    .highlight-card {
      height: 100%;
    }

    .section-block__inner {
      height: 100%;
    }
    .highlights-grid {
      padding:0rem 0 
    }
    #highlights-desktop > .section-block__inner {
      height: 100%;
    }

  }


  /* Mobile Portrait */
@media only screen and (max-width: 767.98px) and (orientation: portrait) {
  .hero__subtitle-line {
      justify-content: center;    
      font-size: clamp(1.0rem, 6.5vw, 1.7rem);
    }

    .hero__tagline {
      font-size:clamp(1.3rem, 2.55vw, 3.0625rem)    
    }
    
    /* .highlight-card--services .highlight-card__media img {
      object-fit: fill;
    } */
    #highlights.section-block {
      padding-top: 2rem;
      padding-bottom: 2rem;
    }
    .hero__row{
      margin-bottom: 0;
    }
    .section-title {
      font-size:clamp(1.5rem, 5vw, 2rem)
    }

    .highlight-card--services .highlight-card__media img {
      padding:0
    }
    .highlight-card__label {
        font-size:1.2rem
      }
    .highlight-card__heading{
        font-size:1.4rem
      }
      .section-block__inner {
        height: 100%
      }
      .highlights-dots {
        margin-top:0
      }
      .highlights-grid {
        padding:0rem 0 
      }

}


/* Mobile Landscape */
@media only screen and (max-width: 767.98px) and (orientation: landscape) {
.mobile-landscape-view-none {
  display:none!important;
}
.mobile-landscape-view-block {
  display:block!important;
}


}