/**
 * Branch Writing canvas grid — same pattern as /ai (#ai-prototype-root::before).
 * Accent line grid at 5% opacity; nested sections stay transparent so the grid shows through.
 */

html.bw-sales-page-branch-writing {
  --bw-canvas-grid-size: 22px;
}

html.bw-sales-page-branch-writing body {
  background-color: var(--color-primary-bg) !important;
  background-image: none !important;
}

html.bw-sales-page-branch-writing #__next {
  position: relative;
  isolation: isolate;
  background-color: var(--color-primary-bg) !important;
  background-image: none !important;
  overflow-x: hidden;
  overflow-x: clip;
  min-height: 100dvh;
}

html.bw-sales-page-branch-writing #__next::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(var(--color-accent) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-accent) 1px, transparent 1px);
  background-size: var(--bw-canvas-grid-size) var(--bw-canvas-grid-size);
  background-position: 0 0;
  opacity: 0.05;
}

html.bw-sales-page-branch-writing #__next > * {
  position: relative;
  z-index: 1;
}

/* Keep section shells transparent so only the canvas + grid show through. */
html.bw-sales-page-branch-writing #__next .bw-inline-012,
html.bw-sales-page-branch-writing #__next section,
html.bw-sales-page-branch-writing #__next .bw-page-gutter,
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 {
  background-color: transparent !important;
  background-image: none !important;
}

@media (max-width: 767px) {
  html.bw-sales-page-branch-writing {
    --bw-canvas-grid-size: 18px;
  }
}