/**
 * Branch Writing hero — trust strip + two-column desktop layout.
 *
 * Mirrors /ai (.ai-hero-grid / .ai-hero-trust) in structure, retinted to the
 * Royal Lux palette. Two things happen here:
 *
 *   1. .bw-hero-trust — avatar cluster + social-proof line above the h1.
 *   2. .bw-hero-shell — at 1024px+ the hero splits into copy (left) and
 *      media (right). Below that it stays the single centred column it was.
 *
 * DOM order is copy → CTA → video → author (two column wrappers). On mobile the
 * wrappers collapse with display:contents and `order` restores the original
 * reading order: copy → video → author → CTA. Because display:contents drops
 * the wrappers' own boxes, bw-vertical-rhythm's `.flex.flex-col > * + *` rule no
 * longer has anything to bite on, so the part margins are set here instead.
 *
 * Loaded after bw-royal-lux.css so these rules win on order where specificity ties.
 */

/* ---------- 1. Trust strip ---------- */

html.bw-sales-page-branch-writing #__next .bw-hero-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem 0.875rem;
  margin: 0 0 1.25rem !important;
}

html.bw-sales-page-branch-writing #__next .bw-hero-trust-avatars {
  display: flex;
  flex: 0 0 auto;
  line-height: 0;
}

/* Two shared rules in sales-shared/css/page-inline-map.css have to be beaten here,
   both with !important:
     - `img { box-shadow: 0 0 24px/48px accent }` (the "global image glow"), which put
       a purple halo behind this flat PNG of faces and made it look pasted on.
     - under `max-width: 767px`, `img { height: auto !important }`, which threw away the
       height below and let the avatars render at their natural 399px — wider than the
       hero column on a phone.
   Height is in px, not rem: the page root font-size is bumped on mobile and again at
   768px, so a rem height quietly scaled this cluster up with the type. */
html.bw-sales-page-branch-writing #__next .bw-hero-trust-image {
  display: block;
  width: auto !important;
  height: 24px !important;
  max-width: 100% !important;
  border-radius: 9999px;
  filter: none !important;
  box-shadow: none !important;
}

html.bw-sales-page-branch-writing #__next .bw-hero-trust-copy {
  display: flex;
  flex: 1 1 14rem;
  min-width: 0;
  justify-content: center;
  text-align: center;
  width: auto;
}

html.bw-sales-page-branch-writing.sales-page-font-scale #__next .bw-hero-trust-text {
  margin: 0 !important;
  max-width: 24rem;
  color: var(--color-text-muted) !important;
  /* Matches the reassurance line under the CTA, which the page-wide
     `#__next * { font-size: inherit }` rule leaves at the body size. */
  font-size: var(--bw-font-normal) !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
}

html.bw-sales-page-branch-writing.sales-page-font-scale #__next .bw-hero-trust-text strong {
  color: var(--color-accent) !important;
  font-weight: 700 !important;
}

/* Below the two-column breakpoint the strip stacks into two centred rows instead of
   sitting side by side: the social-proof line first, the avatar cluster under it.
   Side by side it read as a left-hung image next to a ragged block of text. */
@media (max-width: 1023px) {
  html.bw-sales-page-branch-writing #__next .bw-hero-trust-copy {
    order: 1;
    flex: 0 0 100%;
    justify-content: center;
  }

  html.bw-sales-page-branch-writing #__next .bw-hero-trust-avatars {
    order: 2;
    flex: 0 0 100%;
    justify-content: center;
  }
}

@media (min-width: 640px) {
  html.bw-sales-page-branch-writing #__next .bw-hero-trust-image {
    height: 32px !important;
  }
}

@media (min-width: 1024px) {
  html.bw-sales-page-branch-writing #__next .bw-hero-trust-image {
    height: 36px !important;
  }
}

/* ---------- 2. Hero shell: mobile / tablet ---------- */

html.bw-sales-page-branch-writing #__next .bw-hero-col {
  display: contents;
}

html.bw-sales-page-branch-writing #__next .bw-hero-part {
  margin-top: 2.5rem !important;
  margin-bottom: 0 !important;
}

html.bw-sales-page-branch-writing #__next .bw-hero-part--copy {
  order: 1;
  margin-top: 0 !important;
}

html.bw-sales-page-branch-writing #__next .bw-hero-part--media {
  order: 2;
}

html.bw-sales-page-branch-writing #__next .bw-hero-part--author {
  order: 3;
}

html.bw-sales-page-branch-writing #__next .bw-hero-part--cta {
  order: 4;
}

/* ---------- 3. Hero shell: two columns from 1024px ---------- */

@media (min-width: 1024px) {
  /* Break the hero row out past the 64rem body measure so the video keeps a
     usable size beside the copy. Content below the hero stays at 64rem. */
  html.bw-sales-page-branch-writing #__next .bw-hero-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
    column-gap: 3rem;
    align-items: center;
    width: min(74rem, calc(100vw - 5rem));
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
  }

  html.bw-sales-page-branch-writing #__next .bw-hero-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  html.bw-sales-page-branch-writing #__next .bw-hero-col--copy {
    align-items: flex-start;
    text-align: left;
  }

  html.bw-sales-page-branch-writing #__next .bw-hero-col--media {
    align-items: center;
  }

  html.bw-sales-page-branch-writing #__next .bw-hero-part {
    order: 0;
    width: 100%;
    margin-top: 1.75rem !important;
  }

  html.bw-sales-page-branch-writing #__next .bw-hero-part--copy,
  html.bw-sales-page-branch-writing #__next .bw-hero-part--media {
    margin-top: 0 !important;
  }

  /* Left column reads left-aligned; the shared hero type is centred by default. */
  html.bw-sales-page-branch-writing #__next .bw-hero-col--copy .sales-hero-title,
  html.bw-sales-page-branch-writing.sales-page-font-scale #__next .bw-hero-col--copy .bw-subtitle-text,
  html.bw-sales-page-branch-writing.sales-page-font-scale #__next .bw-hero-col--copy .bw-hero-support-copy,
  html.bw-sales-page-branch-writing #__next .bw-hero-col--copy .bw-hero-guarantee,
  html.bw-sales-page-branch-writing #__next .bw-hero-col--copy .bw-hero-part--copy {
    text-align: left !important;
  }

  html.bw-sales-page-branch-writing #__next .bw-hero-col--copy .bw-hero-trust {
    justify-content: flex-start;
    margin-bottom: 1.5rem !important;
  }

  html.bw-sales-page-branch-writing #__next .bw-hero-col--copy .bw-hero-trust-copy {
    justify-content: flex-start;
    text-align: left;
  }

  html.bw-sales-page-branch-writing.sales-page-font-scale #__next .bw-hero-col--copy .bw-hero-trust-text {
    max-width: 20rem;
  }

  /* CTA stays a comfortable button width rather than stretching the column. */
  html.bw-sales-page-branch-writing #__next .bw-hero-part--cta {
    max-width: 26rem !important;
  }

  /* The button's own label is centred in its box, so the reassurance line under it is
     centred too — the two read as one stacked unit rather than as a centred button with
     a left-hung caption. The block itself stays at the left edge of the copy column. */
  html.bw-sales-page-branch-writing #__next .bw-hero-part--cta .text-center {
    text-align: center !important;
  }

  /* Media column: video fills its half, author card sits under it as on /ai. */
  html.bw-sales-page-branch-writing #__next .bw-hero-part--media,
  html.bw-sales-page-branch-writing #__next .bw-hero-part--author {
    max-width: none !important;
  }

  html.bw-sales-page-branch-writing #__next .bw-hero-part--media > .max-w-xl {
    max-width: none !important;
    width: 100%;
  }
}

@media (min-width: 1280px) {
  html.bw-sales-page-branch-writing #__next .bw-hero-shell {
    column-gap: 4rem;
  }
}

/* ---------- 4. Breathing room above the hero ----------
 *
 * page-inline-map.css is shared across every sales page, so the hero's own top gap is
 * set here instead. The header floats bare over the opening block (see the hero gate in
 * bw-countdown.js / bwx-expired.js), which means the trust strip would otherwise start
 * almost against the brand. */

html.bw-sales-page-branch-writing #__next .bw-section-hero {
  padding-top: 1.75rem;
}

@media (min-width: 640px) {
  html.bw-sales-page-branch-writing #__next .bw-section-hero {
    padding-top: 2.25rem;
  }
}

@media (min-width: 1024px) {
  html.bw-sales-page-branch-writing #__next .bw-section-hero {
    padding-top: 3rem;
  }
}