/* build-phase — ported from build-phase-standalone.css, scoped under #bt-root. Font from theme.css. */
#bt-root {
  /* Brand */
  --c-blue:        #00517D;
  --c-blue-2:      #1B3E70;
  --c-blue-3:      #203C86;
  --c-navy:        #0A142F;
  --c-black:       #000000;
  --c-white:       #FFFFFF;

  /* Surfaces */
  --c-bg:          #FFFFFF;
  --c-bg-soft:     #F6F6F6;
  --c-bg-soft-2:   #F2F2F2;

  /* Text */
  --c-text:        #0A142F;
  --c-text-muted:  #656464;
  --c-text-faint:  #A9A9A9;

  /* Lines */
  --c-border:      #E4E3E3;
  --c-border-2:    #E7E7E7;

  /* Accents */
  --c-star:        #FBBC04;
  --c-link:        #0081FE;

  /* Layout */
  --maxw: 1320px;          /* content max-width (1512 canvas - ~96px gutters) */
  --gutter: 24px;
  --radius-pill: 50px;
  --radius-card: 16px;

  /* Type */
  --font: 'Mulish', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* --- componenti da base.css --- */
#bt-root .bp-container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* Layout helper */
#bt-root .container {
  width: 100%;
  /* max-width: var(--maxw); */
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Reusable pill button */
#bt-root .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 30px;
  padding: 16px 28px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
#bt-root .btn--dark { background: var(--c-black); color: #fff; }
#bt-root .btn--ghost { background: #fff; color: var(--c-black); border: 1px solid var(--c-black); }
#bt-root .btn--blue { background: var(--c-blue);  color: #fff; }

#bt-root .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Back-to-top button (shown after scrolling) */
#bt-root .back-to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--c-blue); color: #fff; border: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(10,20,47,.25);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
#bt-root .back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* ==========================================================================
   Build Phase page  (values from Figma Dev Mode MCP)
   ========================================================================== */

/* ---------- Overlay header (nav over hero image) ---------- */
#bt-root .site-header--overlay {
  position: absolute; top: 0; left: 0; right: 0; z-index: 100;
}
/* hero image/overlay must never intercept clicks meant for the nav */
#bt-root .bp-hero__bg, #bt-root .bp-hero__overlay { pointer-events: none; }
#bt-root .site-header--overlay .nav a, #bt-root .site-header--overlay .nav button { position: relative; z-index: 2; }
/* Figma: logo left=114, instant-quote right edge ~54 from frame. The hero card is inset 24px
   with a 40px radius, so push nav contents inward to clear the rounded corners. */
#bt-root .site-header--overlay .nav { padding-inline: 80px; padding-top: 47px; }
#bt-root .site-header--overlay .nav__logo img { filter: brightness(0) invert(1); }      /* white logo */
#bt-root .site-header--overlay .nav__pill { background: rgba(200,200,200,.30); }
#bt-root .site-header--overlay .nav__pill a { color: #fff; }
#bt-root .site-header--overlay .nav__pill a.is-active { background: rgba(255,255,255,.25); color: #fff; }
#bt-root .site-header--overlay .nav__phone {
  background: transparent; color: #fff; border-color: rgba(255,255,255,.7);
}
#bt-root .site-header--overlay .nav__phone img { filter: brightness(0) invert(1); }
#bt-root .site-header--overlay .nav__quote { background: #fff; color: #000; }
#bt-root .site-header--overlay .nav__burger span { background: #fff; }

/* ---------- Hero ---------- */
/* Figma frame: 1464 x 846 inside a 1512 page (24px side margins).
   Lock the aspect ratio so it scales down proportionally instead of stretching tall. */
#bt-root .bp-hero-wrap {
  /* max-width: 1512px; */
  padding-top: 24px;
  padding-inline: 24px;
}
#bt-root .bp-hero {
  position: relative;
  border-radius: 40px;
  overflow: hidden;
  aspect-ratio: 1464 / 846;
  display: flex;
  align-items: flex-end;
}
#bt-root .bp-hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* navy gradient on the left for text legibility (Figma: from rgba(27,62,112,.04) to rgba(69,69,69,.8)) */
#bt-root .bp-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right,
    rgba(10,20,47,.78) 0%,
    rgba(27,62,112,.35) 38%,
    rgba(27,62,112,0) 62%);
}
#bt-root .bp-hero__content {
  position: relative;
  /* Figma: title left=128 from page edge → ~104 from the 24px-inset hero; bottom ~249 from frame top */
  padding: 0 0 16% 7%;
  max-width: 46%;
}
/* on very wide viewports (>1500px) give the title a bit more bottom space */
@media (min-width: 1501px) {
  #bt-root .bp-hero__content { padding: 0 0 20% 7%; }
}
/* Scale type with the hero width so 130px holds at the 1512 design width and shrinks proportionally.
   130/1512 ≈ 8.6vw, capped at 130px. */
#bt-root .bp-hero__title {
  font-size: clamp(56px, 8.6vw, 130px);
  font-weight: 500;
  line-height: .96;
  color: #fff;
  margin-bottom: 1.8%;
}
#bt-root .bp-hero__sub {
  font-size: clamp(16px, 1.65vw, 25px);
  line-height: 1.36;
  color: #e7e7e7;
  max-width: 30ch;
}
#bt-root .bp-hero__sub b { font-weight: 600; color: #fff; }

/* mobile-only title/sub block below the hero image (hidden on desktop) */
#bt-root .bp-hero__below { display: none; }

/* ---------- Summary ---------- */
#bt-root .bp-summary { padding-top: 64px; padding-inline: 5%; }
#bt-root .bp-summary__label {
  font-size: 35px; font-weight: 500; color: rgba(0,0,0,.8); margin-bottom: 14px;
}
#bt-root .bp-summary__text {
  font-size: 20px; line-height: 1.65; color: rgba(0,0,0,.5); max-width: 1266px;
}

/* ---------- Split CTA cards ---------- */
#bt-root .bp-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  padding-top: 48px;
  padding-inline: 5%;
}
#bt-root .bp-cta-card {
  background: rgba(0,81,125,.15);     /* Figma: #00517D @ 15% */
  border-radius: 35px;
  padding: 30px 40px 34px;
  display: flex; flex-direction: column;
}
#bt-root .bp-cta-card__title { font-size: 23px; font-weight: 600; color: #000; margin-bottom: 10px; }
#bt-root .bp-cta-card__body { font-size: 18px; line-height: 1.5; color: rgba(0,0,0,.5); margin-bottom: 22px; }
#bt-root .bp-cta-card__btn {
  display: block; width: 100%; text-align: center; margin-top: auto;
  background: #000; color: #fff; border-radius: 40px;
  padding: 16px; font-size: 18px; font-weight: 500;
}

/* ---------- How much does it cost ---------- */
#bt-root .bp-cost-wrap { position: relative; margin-top: 48px; overflow: hidden; }
/* soft diffuse blue glow behind the cards.
   Figma: rgba(0,81,125,.70) on a huge frame, masked by a blurred ellipse → soft blob.
   Recreate with a blurred radial gradient (no hard edges). */
#bt-root .bp-cost__glow {
  position: absolute;
  left: 50%; top: 54%;
  width: 108%; height: 640px;
  transform: translate(-50%, -50%);
  /* soft #00517D wash, centred so it tints the cards evenly (no lower-left pooling)
     and fades smoothly before the titles above/below. */
  background: radial-gradient(ellipse 92% 82% at 50% 48%,
              rgba(0,81,125,.24) 0%,
              rgba(0,81,125,.17) 30%,
              rgba(0,81,125,.10) 52%,
              rgba(0,81,125,.04) 74%,
              rgba(0,81,125,0) 92%);
  filter: blur(80px);
  pointer-events: none; z-index: 0;
}
#bt-root .bp-cost { position: relative; z-index: 1; padding-block: 64px; padding-inline: 5%; }
#bt-root .bp-cost__title {
  font-size: 55px; font-weight: 500; color: #000; line-height: 1.27; margin-bottom: 36px;
}
#bt-root .bp-cost__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
#bt-root .cost-card {
  /* translucent cool-white fill so the blue glow behind tints the card surface
     (densest lower-left, lightest upper-right), matching Figma */
  background: rgba(255,255,255,.55);
  border-radius: 30px; padding: 36px;
  min-height: 305px; display: flex; flex-direction: column;
}
#bt-root .cost-card__arrow { width: 18px; height: 18px; margin-bottom: 32px; }
#bt-root .cost-card__title { font-size: 24px; font-weight: 500; color: #000; line-height: 1.33; margin-bottom: 14px; }
#bt-root .cost-card__body { font-size: 18px; line-height: 1.45; color: rgba(0,0,0,.5); }
#bt-root .cost-card__body.is-tbc { color: rgba(0,0,0,.6); font-style: italic; }

/* ---------- Comparison table ---------- */
#bt-root .bp-compare { padding-block: 64px; padding-inline: 5%; }
#bt-root .bp-compare__title {
  font-size: 50px; font-weight: 500; color: #000; line-height: 1.15; margin-bottom: 36px;
}
#bt-root .bp-compare__title span { color: rgba(0,0,0,.45); }
/* forced break that only applies on desktop (removed on mobile so the title flows naturally) */
#bt-root .br-desktop { display: inline; }
/* NB: no overflow:hidden here — it would stop the header sticking to the viewport.
   Corners are rounded on the header (top) and the container itself (bottom). */
#bt-root .bp-compare__table {
  background: #F9F9F9; border-radius: 30px;
}
#bt-root .cmp-row {
  display: grid; grid-template-columns: 1fr 1.3fr 1.3fr;
  border-bottom: 1px solid var(--c-border-2);
}
#bt-root .cmp-row:last-child { border-bottom: 0; }
#bt-root .cmp-cell { padding: 22px 28px; font-size: 18px; }
#bt-root .cmp-cell--label { color: rgba(0,0,0,.7); }
#bt-root .cmp-cell--us { color: #000; font-weight: 500; }
#bt-root .cmp-cell--them { color: rgba(0,0,0,.7); }
/* blue header that stays pinned while you scroll through the table (like searchland) */
#bt-root .cmp-row--head {
  position: sticky; top: 0; z-index: 5;
  background: var(--c-blue);
  border-bottom: 0;
  border-top-left-radius: 30px; border-top-right-radius: 30px;
}
#bt-root .cmp-row--head .cmp-cell { font-weight: 600; color: #fff; padding-block: 26px; }
.cmp-row--head .cmp-cell--label,
.cmp-row--head .cmp-cell--us,
#bt-root .cmp-row--head .cmp-cell--them { color: #fff; }

/* ---------- The ten stages ---------- */
#bt-root .bp-stages-wrap { padding-top: 0px; }
#bt-root .bp-stages {
  position: relative;
  background: #fff;
  border-radius: 40px;
  overflow: hidden;
}
#bt-root .bp-stages__glow {
  position: absolute; left: 50%; top: 52%;
  width: 1400px; height: 740px; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
              rgba(0,81,125,.16) 0%, rgba(0,81,125,.06) 40%, rgba(0,81,125,0) 70%);
  filter: blur(60px); pointer-events: none;
}
#bt-root .bp-stages__inner { position: relative; padding: 4%; }
#bt-root .bp-stages__title {
  font-size: 55px; font-weight: 500; color: #000; line-height: 1.27; margin-bottom: 48px;
}
#bt-root .bp-stages__title span { color: rgba(0,0,0,.5); }
#bt-root .bp-stages__grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 40px 28px;
}
#bt-root .stage__num { display: block; font-size: 80px; font-weight: 500; color: rgba(0,0,0,.5); line-height: .94; margin-bottom: 12px; }
#bt-root .stage__title { font-size: 18px; color: rgba(0,0,0,.5); line-height: 1.4; min-height: 75px; margin-bottom: 8px; }
#bt-root .stage__weeks { font-size: 23px; font-weight: 500; color: var(--c-blue); }

/* ---------- What can go wrong ---------- */
#bt-root .bp-wrong { padding-block: 64px; padding-inline: 5%; }
#bt-root .bp-wrong__title {
  font-size: 55px; font-weight: 500; color: #000; line-height: 1.27; margin-bottom: 36px;
}
#bt-root .bp-wrong__title span { color: rgba(0,0,0,.5); }
/* forced break that only applies on desktop (removed on mobile) */
#bt-root .br-desktop { display: inline; }
#bt-root .bp-wrong__list { display: flex; flex-direction: column; gap: 20px; }
#bt-root .wrong-card {
  background: rgba(246,246,246,.7); border-radius: 30px; padding: 26px 52px;
}
#bt-root .wrong-card__q {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font-size: 23px; font-weight: 600; color: #000; margin-bottom: 12px;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
}
#bt-root .wrong-card__q::-webkit-details-marker { display: none; }
#bt-root .wrong-card__chev { display: none; }   /* desktop: static cards, no chevron */
#bt-root .wrong-card__a { font-size: 16px; line-height: 1.6; color: rgba(0,0,0,.6); max-width: 1210px; }

/* ---------- Our Build Managers ---------- */
#bt-root .bp-managers-wrap { position: relative; padding-block: 45px; padding-inline: 5%; overflow: hidden; }
/* soft blue wash behind the whole section (Figma: #00517D @ 70%, group opacity 40%,
   full-width 1512×885 → diffuse glow weighted toward the top). */
/* compact soft blue blob (same treatment as the bundles-table glow), placed in
   the open upper-right of the section so it reads as a gentle localised glow. */
#bt-root .bp-managers__glow {
  position: absolute; left: 68%; top: 34%;
  width: 950px; height: 720px; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 56% 56% at 50% 50%,
              rgba(0,81,125,.30) 0%,
              rgba(0,81,125,.18) 30%,
              rgba(0,81,125,.09) 52%,
              rgba(0,81,125,.02) 70%,
              rgba(0,81,125,0) 82%);
  filter: blur(90px); pointer-events: none;
}
#bt-root .bp-managers { position: relative; }
#bt-root .bp-managers__title { font-size: 55px; font-weight: 500; color: #000; line-height: 1.1; margin-bottom: 12px; }
#bt-root .bp-managers__sub { font-size: 22px; color: rgba(0,0,0,.7); margin-bottom: 36px; max-width: 660px; }
/* static 4-up grid — the roster is fixed (4 managers) so there's nothing to
   scroll; no slider/drag affordance needed. */
#bt-root .bp-managers__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
#bt-root .mgr-card { min-width: 0; }
/* glassy white card with a soft blue base glow; the transparent cutout sits on top */
#bt-root .mgr-card__photo {
  position: relative; width: 100%; aspect-ratio: 408 / 464;
  border-radius: 20px; margin-bottom: 16px; overflow: hidden;
  background:
    radial-gradient(ellipse 125% 95% at 50% 120%, rgba(0,81,125,.22) 0%, rgba(0,81,125,.07) 45%, rgba(0,81,125,0) 68%),
    linear-gradient(180deg, #ffffff 0%, #eef3f6 55%, #dbe6ee 100%);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 12px 30px rgba(0,81,125,.07);
}
#bt-root .mgr-card__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
}
#bt-root .mgr-card__name { font-size: 20px; font-weight: 500; color: #000; line-height: 1.15; margin-bottom: 5px; }
#bt-root .mgr-card__role { font-size: 16px; color: rgba(0,0,0,.6); }

/* ---------- Recent builds ---------- */
#bt-root .bp-recent { padding-block: 64px; padding-inline: 5%; }
#bt-root .bp-recent__title { font-size: 55px; font-weight: 500; color: #000; line-height: 1.1; margin-bottom: 36px; }
#bt-root .bp-recent__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  /* fixed row height → all cards share the SAME height despite differing widths */
  grid-auto-rows: 540px; align-items: stretch;
}
#bt-root .proj-card {
  position: relative; height: 100%; border-radius: 30px; overflow: hidden;
}
#bt-root .proj-card__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#bt-root .proj-card__overlay {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 35px;
  min-height: 55%;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(to top,
    rgba(0,0,0,.85) 0%,
    rgba(0,0,0,.55) 30%,
    rgba(0,0,0,0) 100%);
}
#bt-root .proj-card__place { font-size: 23px; font-weight: 600; color: #e7e7e7; margin-bottom: 6px; }
#bt-root .proj-card__meta { font-size: 18px; color: #e7e7e7; margin-bottom: 16px; }
#bt-root .proj-card__btn {
  align-self: flex-start;        /* hug the label, don't stretch full-width */
  display: inline-block; border: 1.5px solid #fff; color: #fff;
  border-radius: 30px; padding: 9px 16px; font-size: 13px; font-weight: 500;
}

/* ---------- FAQ ---------- */
#bt-root .bp-faq-wrap { padding-bottom: 64px; }
#bt-root .bp-faq {
  background: #F6F6F6; border-radius: 50px; padding: 48px; padding-inline: 4%;
}
#bt-root .bp-faq__title { font-size: 55px; font-weight: 500; color: #000; margin-bottom: 36px; }
#bt-root .bp-faq__list { display: flex; flex-direction: column; gap: 20px; }
#bt-root .faq-item {
  background: #fff; border-radius: 30px; overflow: hidden;
}
#bt-root .faq-item__q {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 30px 32px; cursor: pointer; list-style: none;
  font-size: 22px; color: #000;
  /* no blue tap-highlight or text-selection when tapping to expand */
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
}
#bt-root .faq-item__q::-webkit-details-marker { display: none; }
#bt-root .faq-item__icon {
  flex: 0 0 auto; width: 50px; height: 50px; border-radius: 50%;
  background: var(--c-blue); display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease;
}
#bt-root .faq-item[open] .faq-item__icon { transform: rotate(45deg); }
#bt-root .faq-item__a { padding: 0 32px 28px; font-size: 17px; color: rgba(0,0,0,.6); line-height: 1.6; }
#bt-root .bp-faq__cta { text-align: center; margin-top: 56px; }
#bt-root .bp-faq__cta-title { font-size: 40px; font-weight: 500; color: #000; margin-bottom: 28px; }
#bt-root .bp-faq__buttons { display: flex; gap: 20px; justify-content: center; }
#bt-root .bp-faq__buttons .btn { padding: 22px 40px; }

/* ==========================================================================
   Mobile (≤900px)
   ========================================================================== */
@media (max-width: 900px) {
  /* --- nav: drop the overlay treatment, render as a normal white-bg bar --- */
  #bt-root .site-header--overlay { position: static; }
  #bt-root .site-header--overlay .nav { padding-inline: 0px; padding-top: 20px; }
  #bt-root .site-header--overlay .nav__logo img { filter: none; }           /* colored logo on white */
  #bt-root .site-header--overlay .nav__burger span { background: #000; }
  /* black phone pill with white text/icon */
  #bt-root .site-header--overlay .nav__phone { background: #000; color: #fff; border: 0; }
  #bt-root .site-header--overlay .nav__phone img { filter: brightness(0) invert(1); }

  /* --- hero image card: no title inside; fixed 350px tall image --- */
  #bt-root .bp-hero {
    aspect-ratio: auto; height: 350px; min-height: 0; border-radius: 24px;
  }
  #bt-root .bp-hero__content { position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; padding:0!important; } /* v0.26: keep the H1 for screen readers */     /* title/sub move below the image */

  /* --- title + sub below the image (blue title on white) --- */
  #bt-root .bp-hero__below { display: block; text-align: center; padding: 28px 24px 4px; }
  #bt-root .bp-hero__below-title { font-size: 56px; font-weight: 500; line-height: 1; color: var(--c-blue); }
  #bt-root .bp-hero__below-sub {
    font-size: 17px; line-height: 1.4; color: rgba(0,0,0,.55);
    margin: 16px auto 0; max-width: 360px;
  }
  #bt-root .bp-hero__below-sub b { font-weight: 600; color: rgba(0,0,0,.7); }

  /* SUMMARY section is hidden on mobile (per design) */
  #bt-root .bp-summary { display: none; }

  #bt-root .bp-split { grid-template-columns: 1fr; gap: 16px; padding-top: 28px; }
  #bt-root .bp-cta-card { padding: 24px 24px 28px; border-radius: 24px; }
  /* smaller text on mobile */
  #bt-root .bp-cta-card__title { font-size: 19px; margin-bottom: 8px; }
  #bt-root .bp-cta-card__body { font-size: 15px; margin-bottom: 18px; }
  #bt-root .bp-cta-card__btn { padding: 14px; font-size: 15px; }

  #bt-root .bp-cost { padding-block: 40px; }
  #bt-root .bp-cost__title { font-size: 30px; margin-bottom: 24px; }
  #bt-root .bp-cost__grid { grid-template-columns: 1fr; gap: 16px; }
  /* smaller arrow icon + text on mobile */
  #bt-root .cost-card { min-height: auto; padding: 24px; }
  #bt-root .cost-card__arrow { width: 26px; height: 26px; margin-bottom: 18px; }
  #bt-root .cost-card__title { font-size: 19px; margin-bottom: 10px; }
  #bt-root .cost-card__body { font-size: 15px; }

  #bt-root .bp-compare { padding-block: 24px; }
  #bt-root .bp-compare__title { font-size: 30px; margin-bottom: 24px; }
  #bt-root .br-desktop { display: none; }   /* let the title wrap naturally on mobile */
  /* stack each comparison row into a labelled block */
  #bt-root .cmp-row { grid-template-columns: 1fr; gap: 4px; padding: 18px 20px; }
  #bt-root .cmp-cell { padding: 2px 0; font-size: 16px; }
  #bt-root .cmp-cell--label { font-weight: 600; color: #000; font-size: 17px; margin-bottom: 4px; }
  #bt-root .cmp-cell--us::before { content: "BuildTeam: "; color: rgba(0,0,0,.4); font-weight: 400; }
  #bt-root .cmp-cell--them::before { content: "Design-only: "; color: rgba(0,0,0,.4); }
  #bt-root .cmp-row--head { display: none; }   /* header redundant once stacked */

  #bt-root .bp-stages-wrap { padding-top: 40px; padding-inline: 5%; }
  /* no white card — soft glow bleeds onto the page (overflow:visible) and the radial
     falloff completes well before any edge, so there is NO hard rectangular boundary */
  #bt-root .bp-stages { background: transparent; border-radius: 0; overflow: visible; }
  #bt-root .bp-stages__glow {
    display: block;
    left: 50%; top: 48%;
    width: 100%; height: 70%; max-width: none;
    background: radial-gradient(ellipse 50% 50% at 50% 50%,
                rgba(0,81,125,.13) 0%,
                rgba(0,81,125,.06) 38%,
                rgba(0,81,125,.015) 58%,
                rgba(0,81,125,0) 74%);
    filter: blur(60px);
  }
  #bt-root .bp-stages__inner { padding: 0; }
  #bt-root .bp-stages__title { font-size: 28px; margin-bottom: 28px; }
  #bt-root .bp-stages__grid { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  #bt-root .stage__num { font-size: 48px; margin-bottom: 8px; }
  #bt-root .stage__title { font-size: 14px; min-height: 0; margin-bottom: 6px; }
  #bt-root .stage__weeks { font-size: 16px; }

  #bt-root .bp-wrong { padding-block: 40px; }
  #bt-root .bp-wrong__title { font-size: 28px; margin-bottom: 24px; }
  #bt-root .br-desktop { display: none; }   /* let the title wrap naturally on mobile */
  /* mobile: collapsible accordion — closed by default, chevron on the right */
  #bt-root .wrong-card { padding: 0; border-radius: 22px; overflow: hidden; }
  #bt-root .wrong-card__q { font-size: 16px; margin-bottom: 0; cursor: pointer; padding: 20px 22px; }
  #bt-root .wrong-card__chev {
    display: inline-flex; flex: 0 0 auto; color: rgba(0,0,0,.5);
    transition: transform .2s ease;
  }
  #bt-root .wrong-card[open] .wrong-card__chev { transform: rotate(180deg); }
  #bt-root .wrong-card:not([open]) > .wrong-card__a { display: none; }
  #bt-root .wrong-card__a { padding: 0 22px 22px; font-size: 15px; }

  #bt-root .bp-managers-wrap { padding-block: 40px; }
  #bt-root .bp-managers__title { font-size: 30px; }
  #bt-root .bp-managers__sub { font-size: 17px; margin-bottom: 24px; }
  /* phone: 4 cards won't fit, so fall back to a swipe row (~1.4 cards).
     data-slider adds mouse/trackpad drag; touch uses native scroll. */
  #bt-root .bp-managers__grid {
    display: flex; gap: 16px; overflow-x: auto; cursor: grab;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  #bt-root .bp-managers__grid::-webkit-scrollbar { display: none; }
  #bt-root .bp-managers__grid.is-dragging { cursor: grabbing; scroll-behavior: auto; }
  #bt-root .bp-managers__grid.is-dragging .mgr-card { pointer-events: none; }
  #bt-root .mgr-card { flex: 0 0 72%; }
  #bt-root .mgr-card__name { font-size: 18px; }
  #bt-root .mgr-card__role { font-size: 15px; }

  #bt-root .bp-recent { padding-block: 40px; }
  #bt-root .bp-recent__title { font-size: 30px; margin-bottom: 24px; }
  #bt-root .bp-recent__grid { grid-template-columns: 1fr; gap: 16px; grid-auto-rows: auto; }
  #bt-root .proj-card { height: auto; aspect-ratio: 4 / 3; }
  #bt-root .proj-card__overlay { padding: 24px; min-height: 0; }

  #bt-root .bp-faq { padding: 28px 20px; border-radius: 28px; }
  #bt-root .bp-faq__title { font-size: 30px; margin-bottom: 24px; }
  #bt-root .faq-item__q { font-size: 16px; padding: 22px 20px; }
  /* smaller plus icon on mobile (matches Design Phase / Design Bundles) */
  #bt-root .faq-item__icon { width: 26px; height: 26px; flex: 0 0 auto; }
  #bt-root .faq-item__icon img { width: 13px; height: 13px; }
  #bt-root .faq-item__a { font-size: 15px; padding: 0 20px 20px; }
  #bt-root .bp-faq__cta-title { font-size: 28px; }
  #bt-root .bp-faq__buttons { flex-direction: column; }
  #bt-root .bp-faq__buttons .btn { justify-content: center; }
}

/* --- override: batte site.css riga 68 (h1 {font-size:30px !important}) --- */
#bt-root h1.bp-hero__title { font-size: clamp(56px, 8.6vw, 130px) !important; line-height: 1.02 !important; }
@media (max-width: 900px) { h1.bp-hero__title { font-size: clamp(40px, 11vw, 64px) !important; } }

/* --- contenimento: elementi che sbordano dal parent --- */
#bt-root .bp-cost-wrap .bp-cost { max-width: 100%; }
#bt-root .bp-cost__glow, #bt-root .bp-stages__glow { max-width: 100%; overflow: hidden; }

/* --- neutralizza site.css righe 67-72 (h1 con Arimo, 30px, padding/margin forzati) --- */
#bt-root .bp-hero-wrap h1, #bt-root .bp-container h1, #bt-root section[class^="bp-"] h1 {
  font-family: 'Mulish', sans-serif !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  font-weight: inherit;
}
#bt-root .bp-hero__title { color: #fff !important; }

/* --- reset scoped: recupera base.css righe 42-72 solo per il contenuto pagina --- */
section[class*="bp-"], section[class*="bp-"] *,
#bt-root .bp-container, #bt-root .bp-container * { box-sizing: border-box; }

#bt-root section[class*="bp-"] img, #bt-root section[class*="bp-"] svg { display: block; max-width: 100%; }
section[class*="bp-"] h1, section[class*="bp-"] h2,
section[class*="bp-"] h3, section[class*="bp-"] h4,
#bt-root section[class*="bp-"] p { margin: 0; }
#bt-root section[class*="bp-"] ul { margin: 0; padding: 0; list-style: none; }
#bt-root section[class*="bp-"] a { text-decoration: none; }

/* --- batte new_design.css riga 12 (section {display:flow-root !important}) --- */
#bt-root section.bp-split { display: grid !important; }
@media (max-width: 900px) { section.bp-split { grid-template-columns: 1fr !important; } }

/* --- solo la griglia, senza toccare max-width delle section --- */
#bt-root section.bp-split { display: grid !important; }

/* --- contiene la tabella compare dentro la section (max-width 1140px del sito) --- */
#bt-root .bp-compare__table { max-width: 100%; }
#bt-root .cmp-row { min-width: 0; }
#bt-root .cmp-cell { min-width: 0; overflow-wrap: break-word; }


/* ============================================================
   OVERRIDE LEGACY — mappati da audit 23 lug 2026
   Conflitti: new_design.css riga 9-12, site.css riga 67-68
   ============================================================ */

/* 1. bp-cost-wrap non ha .bp-container, quindi eredita max-width:1140px
      da new_design.css mentre il contenuto interno e' disegnato per 1320px */
#bt-root section.bp-cost-wrap { max-width: 1320px !important; }
#bt-root .bp-cost { max-width: 100%; }

/* 2. secondo H1 dell'hero: site.css lo schiaccia a 30px */
#bt-root .bp-hero__below-title { margin:0;  font-size: clamp(28px, 3vw, 44px) !important; color: #fff !important; }

/* 3. bottoni delle CTA card che sbordano di 32px */
#bt-root .bp-cta-card__btn { max-width: 100%; box-sizing: border-box; }

/* 4. foto build manager, 2px oltre il contenitore */
#bt-root .mgr-card__photo { max-width: 100%; }

/* --- ripristina lo spazio sotto i titoli, azzerato dall'override h1 --- */
#bt-root .bp-compare__title { margin-bottom: 36px !important; }
#bt-root .bp-stages__title { margin-bottom: 48px !important; }
#bt-root .bp-wrong__title { margin-bottom: 36px !important; }
#bt-root .bp-cost__title { margin-bottom: 36px !important; }
#bt-root .bp-recent__title { margin-bottom: 36px !important; }
#bt-root .bp-faq__title { margin-bottom: 36px !important; }
#bt-root .bp-managers__title { margin-bottom: 12px !important; }
#bt-root .bp-summary__label { margin-bottom: 14px !important; }

/* style.css riga 1311: * {box-sizing: inherit !important} batte il nostro border-box */
section[class*="bp-"], section[class*="bp-"] *,
#bt-root .bp-container, #bt-root .bp-container * { box-sizing: border-box !important; }

/* glow decorativi: non devono generare scroll a viewport stretti */
#bt-root .bp-managers__glow, #bt-root .bp-cost__glow, #bt-root .bp-stages__glow { max-width: 100%; }
#bt-root section[class*="bp-"] { overflow-x: clip; }