/**
 * Branch Writing design refinement — ports the lessons from /personalized-ai.
 * Loads last so it wins over the shared sales-page stack.
 *
 * 1. The page reads "zoomed in" because sales-page-font-scale.css sets the ROOT
 *    font-size to 20px. Every rem on the page — gutters, max-widths, card
 *    padding, radii, icon boxes — is therefore multiplied by 1.25 before it is
 *    ever drawn. /personalized-ai leaves the root at 16px and puts the body size
 *    on its own root element instead, so type is set without inflating layout.
 *    That is what this file does, and it is the single biggest change here.
 * 2. Four type tiers, same proportions as /personalized-ai:
 *    18 / 20 / clamp(24,3.2vw,34) / clamp(32,5vw,46).
 * 3. Measure caps at 64rem (= --pz-container). At 20px root the old 72rem was
 *    a 1440px line length; nothing on a sales page should be that wide.
 * 4. Glow dialled back. /personalized-ai carries the same dark canvas + accent
 *    rule without a neon headline or a blurred accent field behind every h2 —
 *    the restraint is what makes it read as current rather than 2021.
 */

/* ---------- 1. Un-zoom: root back to 16px, body size on #__next ---------- */

html.bw-sales-page-branch-writing.sales-page-font-scale {
  font-size: 16px !important;

  /* Shared tokens still drive the footer, cookie banner and testimonial cards,
     so they are retuned here rather than left at the 20/24/34 desktop set. */
  --sales-font-size-normal: 18px;
  --sales-font-size-heading: 20px;
  --sales-font-size-hero: 32px;
}

html.bw-sales-page-branch-writing.sales-page-font-scale #__next {
  font-size: var(--bw-font-normal) !important;
}

@media screen and (min-width: 768px) {
  html.bw-sales-page-branch-writing.sales-page-font-scale {
    --sales-font-size-normal: 18px;
    --sales-font-size-heading: 20px;
    --sales-font-size-hero: 40px;
  }
}

/* ---------- 2. Type tiers ---------- */

html.bw-sales-page-branch-writing {
  --bw-font-normal: 18px;
  --bw-font-emphasis: 20px;
  --bw-font-section: clamp(24px, 3.2vw, 34px);
  --bw-font-hero: clamp(32px, 5vw, 46px);
}

/* bw-font-size.css hardcodes its own mobile clamps; bring those down too. */
@media (max-width: 767px) {
  html.bw-sales-page-branch-writing #__next .sales-hero-title,
  html.bw-sales-page-branch-writing #__next .bw-hero-title {
    font-size: clamp(27px, 7.4vw, 32px) !important;
  }

  html.bw-sales-page-branch-writing #__next .section__title,
  html.bw-sales-page-branch-writing #__next h2.section__title,
  html.bw-sales-page-branch-writing #__next h2.branch-writing_h2__13kuK {
    font-size: clamp(21px, 5vw, 26px) !important;
  }
}

/* The hero accent line sits just under the section tier so the h1 → accent line
   → support copy reads as three steps down rather than two headlines. */
html.bw-sales-page-branch-writing.sales-page-font-scale #__next .bw-subtitle-text {
  font-size: clamp(20px, 2.6vw, 26px) !important;
}

html.bw-sales-page-branch-writing.sales-page-font-scale #__next .bw-hero-support-copy {
  font-size: var(--bw-font-emphasis) !important;
}

/* ---------- 3. Measure ---------- */

html.bw-sales-page-branch-writing #__next .max-w-6xl,
html.bw-sales-page-branch-writing #__next .bw-content-wide {
  max-width: 64rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html.bw-sales-page-branch-writing #__next .max-w-xl {
  max-width: 40rem !important;
}

/* Gutters follow the /personalized-ai container: a real edge margin on phones,
   capped so it does not eat the measure on desktop. */
html.bw-sales-page-branch-writing #__next .bw-page-gutter {
  padding-left: max(clamp(1rem, 4vw, 2rem), env(safe-area-inset-left, 0px)) !important;
  padding-right: max(clamp(1rem, 4vw, 2rem), env(safe-area-inset-right, 0px)) !important;
}

/* ---------- 4. Vertical rhythm ---------- */

/* Type shrank ~20%, so the section gaps are re-set in absolute terms instead of
   shrinking with it — otherwise the page reads dense rather than calm. Matches
   --pz-space-section / --pz-space-block. */
html.bw-sales-page-branch-writing #__next {
  --bw-space-section: clamp(3rem, 5.5vw, 5rem);
  --bw-space-block: clamp(2.5rem, 5vw, 3.75rem);
  --bw-space-testimonial: clamp(2.5rem, 4.5vw, 3.5rem);
}

@media (max-width: 767px) {
  html.bw-sales-page-branch-writing #__next {
    --bw-space-section: clamp(2.5rem, 8vw, 3.25rem);
    --bw-space-block: clamp(2rem, 6vw, 2.75rem);
    --bw-space-testimonial: clamp(2.25rem, 6vw, 3rem);
  }
}

html.bw-sales-page-branch-writing #__next .bw-section-band,
html.bw-sales-page-branch-writing #__next .bw-section-band-md,
html.bw-sales-page-branch-writing #__next .bw-section-band-lg,
html.bw-sales-page-branch-writing #__next .bw-section-band-xl {
  padding-top: var(--bw-space-section) !important;
  padding-bottom: var(--bw-space-section) !important;
}

html.bw-sales-page-branch-writing #__next .bw-stack-relaxed > * + * {
  margin-top: var(--bw-space-section) !important;
}

/* ---------- 5. Section headings ---------- */

/* Tight leading + negative tracking is what makes a large heading look set
   rather than typed. 1.4em on a 34px heading left the two lines of every h2
   floating apart. */
/* The glow — radial field, neon text-shadow, wide accent rule — is the page's
   look and stays exactly as it was. Only the metrics change here: tight leading
   and negative tracking are what make a large heading read as set rather than
   typed, and 1.4em left the two lines of every h2 floating apart. */
html.bw-sales-page-branch-writing #__next .section__title {
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  padding-bottom: 1.1rem !important;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem) !important;
  text-wrap: balance;
}

/* The glow field was sized against a 20px root, so at 16px it would shrink with
   everything else. Restated so it covers the heading exactly as before. */
html.bw-sales-page-branch-writing #__next .section__title::before {
  left: clamp(-2.5rem, -9vw, -5rem);
  right: clamp(-2.5rem, -9vw, -5rem);
  top: clamp(-3.5rem, -6vw, -2rem);
  bottom: clamp(-5.25rem, -11vw, -3rem);
}

html.bw-sales-page-branch-writing #__next .section__title.bw-h2-more-top-margin {
  margin-top: var(--bw-space-section) !important;
}

/* ---------- 6. Hero headline ---------- */

/* Neon stack and drop-shadow left untouched (bw-hero-title.css) — metrics only. */
html.bw-sales-page-branch-writing #__next .sales-hero-title,
html.bw-sales-page-branch-writing #__next .bw-hero-title {
  line-height: 1.14 !important;
  letter-spacing: -0.02em !important;
  text-wrap: balance;
}

/* ---------- 7. Body copy ---------- */

/* Long-form sales copy, so it is set looser than a UI would be — the same call
   --pz-line-body makes at 1.8. */
html.bw-sales-page-branch-writing #__next .bw-feature-card-body p,
html.bw-sales-page-branch-writing #__next .use-case-card p,
html.bw-sales-page-branch-writing #__next .bw-content-wide p {
  line-height: 1.72 !important;
}

/* ---------- 8. Cards ---------- */

/* Card padding was authored in rem against a 20px root, so it is restated here
   at the size it was actually designed to look like. */
html.bw-sales-page-branch-writing #__next .use-case-card {
  padding: 1.75rem 1.5rem !important;
  text-wrap: pretty;
}

html.bw-sales-page-branch-writing #__next .use-case-icon {
  width: 3rem !important;
  height: 3rem !important;
  margin-bottom: 1.15rem !important;
}

/* ---------- 9. Hero mini cards ---------- */

/* These were misaligned: bw-vertical-rhythm.css puts `margin-top: 1.5rem` on
   `.grid.sm\:gap-6 > * + *`, which outranks the `.bw-hero-mini-grid > * + *`
   reset sitting a few lines below it (three classes to two), so it survived past
   640px. Cards 2 and 3 were pushed down inside their own grid row while card 1
   stayed put, and the row grew to absorb the offset. Own the row outright rather
   than adding another reset that has to win a specificity race. */
html.bw-sales-page-branch-writing #__next .bw-hero-mini-grid.grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch !important;
  gap: 1rem !important;
}

html.bw-sales-page-branch-writing #__next .bw-hero-mini-grid.grid > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

@media (min-width: 640px) {
  html.bw-sales-page-branch-writing #__next .bw-hero-mini-grid.grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem !important;
  }
}

/* Desktop had the flat rgba(255,255,255,0.03) box while mobile already got the
   glass + accent-border treatment. Same card everywhere, and the same language
   as .use-case-card further down the page. */
html.bw-sales-page-branch-writing #__next .bw-hero-mini-card {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 1.5rem 1.25rem !important;
  border-radius: 0.875rem !important;
  text-align: center;
  background: linear-gradient(
    145deg,
    rgba(var(--color-primary-bg-rgb), 0.72) 0%,
    rgba(255, 255, 255, 0.045) 100%
  ) !important;
  border: 1px solid rgba(var(--color-accent-rgb), 0.16) !important;
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

html.bw-sales-page-branch-writing #__next .bw-hero-mini-card:hover {
  border-color: rgba(var(--color-accent-rgb), 0.35) !important;
  transform: translateY(-2px);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* Fixed icon-row height so the three titles sit on one line across the row
   whatever each glyph's own bounding box does. */
html.bw-sales-page-branch-writing #__next .bw-hero-mini-card-icon-row {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  margin-bottom: 0.65rem !important;
  color: var(--color-accent);
}

html.bw-sales-page-branch-writing #__next .bw-hero-mini-card-icon-row svg {
  width: 26px !important;
  height: 26px !important;
}

html.bw-sales-page-branch-writing #__next .bw-hero-mini-card-title {
  margin: 0 !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  text-wrap: balance;
}

@media (max-width: 639px) {
  html.bw-sales-page-branch-writing #__next .bw-hero-mini-card {
    padding: 1.1rem 1.05rem !important;
  }

  html.bw-sales-page-branch-writing #__next .bw-hero-mini-card-icon-row {
    height: 2.1rem;
    margin-bottom: 0.55rem !important;
  }
}