/* ============================================================
   BORROWER CONNECT — PAGE STYLES
   ============================================================
   Load AFTER tokens.css and website.css:
     <link rel="stylesheet" href="https://borrower-connect-assets.pages.dev/website-pages.css">

   Covers the pages that are not the home page:
     · Compact page hero (legal pages, confirmation, partner form)
     · Long-form legal prose
     · On-page contents list
     · Confirmation panel
     · Callouts
     · Extra form controls (select, checkbox, fieldset, hints, errors)

   Every value is a token from tokens.css. Nothing is hardcoded, so
   light and dark themes both work without further changes.
   ============================================================ */


/* ── Focus ring: two layers ─────────────────────────────────
   A single teal ring is 2.88:1 on a navy button and fails
   WCAG 2.4.11. The second layer restores contrast on any
   background. */
.bc-site a:focus-visible,
.bc-site button:focus-visible,
.bc-site input:focus-visible,
.bc-site select:focus-visible,
.bc-site textarea:focus-visible,
.bc-site summary:focus-visible,
.bc-site [tabindex]:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-contrast);
  border-radius: var(--radius-xs);
}


/* ── Scroll reveal: never hide content waiting for JavaScript ──
   website.css sets .bc-reveal to opacity 0 and waits for bc-shell.js
   to add .visible. Until the script arrives, every section below the
   hero is blank. If the script never arrives, the page is empty.

   Inverted here: .bc-reveal is visible by default, and bc-shell.js
   arms only the elements that are still BELOW the fold when it runs.
   Arming something off-screen cannot cause a visible flicker, so the
   animation still works without ever hiding anything the reader can
   already see. */
.bc-reveal {
  opacity: 1;
  transform: none;
}

.bc-reveal.bc-armed {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.bc-reveal.bc-armed.visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .bc-reveal.bc-armed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ── Skip link ──────────────────────────────────────────────
   First tab stop on the page. Keyboard and screen reader users would
   otherwise tab the logo, four nav links, the CTA, the theme toggle
   and the hamburger before reaching content, on every page.
   (WCAG 2.4.1 Bypass Blocks, Level A.)

   Hidden by clipping to a 1px box, NOT by moving it off-screen with a
   negative offset. Negative positioning depends on which ancestor is
   positioned; inside a page builder that is not knowable, and the link
   can surface on top of the navigation. Clipping cannot escape.

   On focus it switches to position: fixed so it is placed against the
   viewport rather than whatever container happens to enclose it. */
.bc-skip {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.bc-skip:focus,
.bc-skip:focus-visible {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 1000;
  width: auto;
  height: auto;
  min-height: var(--min-touch-target);
  margin: 0;
  padding: var(--space-2) var(--space-4);
  overflow: visible;
  clip: auto;
  clip-path: none;
  display: inline-flex;
  align-items: center;
  background: var(--brand-primary);
  color: var(--text-inverse);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  box-shadow: var(--elevation-3);
}


/* ── Compact page hero ──────────────────────────────────────
   Used where the page is informational rather than persuasive. */
.bc-page-hero {
  background: var(--bg-secondary);
  border-bottom: var(--border-width) solid var(--border-subtle);
  padding: var(--space-8) var(--container-pad) var(--space-6);
}

.bc-page-hero__inner {
  /* container-max, not container-narrow: the prose below sits at
     --measure (~70ch), so a 600px hero read as a cramped band
     narrower than its own page body. */
  max-width: var(--container-max);
  margin-inline: auto;
}

.bc-page-hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--brand-primary);
  margin: 0 0 var(--space-3);
}

.bc-page-hero__sub {
  font-size: var(--text-lg);
  line-height: var(--line-height-body);
  color: var(--text-body);
  max-width: var(--measure);
  margin: 0;
}

.bc-page-hero__meta {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-muted);
}


/* ── Long-form prose ────────────────────────────────────────
   No fixed heights anywhere: text must reflow under the WCAG
   1.4.12 text-spacing overrides. */
.bc-prose {
  max-width: var(--measure);
  margin-inline: auto;
  color: var(--text-body);
  font-size: var(--text-md);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
}

.bc-prose > * + * {
  margin-top: var(--paragraph-spacing);
}

.bc-prose h2 {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  color: var(--brand-primary);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--border-subtle);
  scroll-margin-top: var(--space-8);
}

.bc-prose h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.bc-prose h3 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  color: var(--text-color);
  margin-top: var(--space-5);
}

.bc-prose p {
  margin: 0;
}

.bc-prose ul {
  margin: 0;
  padding-left: var(--space-5);
  list-style: disc;
}

.bc-prose li + li {
  margin-top: var(--space-2);
}

.bc-prose strong {
  font-weight: var(--font-weight-semibold);
  color: var(--text-color);
}

.bc-prose a {
  color: var(--brand-accent-text);
  text-decoration: underline;
  text-underline-offset: var(--focus-ring-offset);
}

.bc-prose a:hover {
  color: var(--brand-accent-text-hover);
}


/* ── On-page contents ───────────────────────────────────────
   Static list, always visible. No auto-expanding panels. */
.bc-toc {
  max-width: var(--measure);
  margin: 0 auto var(--space-8);
  padding: var(--space-5);
  background: var(--bg-secondary);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--card-radius);
}

.bc-toc__title {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-color);
  margin: 0 0 var(--space-3);
}

.bc-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--space-2) var(--space-4);
}

.bc-toc__list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--min-touch-target);
  color: var(--brand-accent-text);
  text-decoration: underline;
  text-underline-offset: var(--focus-ring-offset);
  font-size: var(--text-sm);
}

.bc-toc__list a:hover {
  color: var(--brand-accent-text-hover);
}


/* ── Confirmation panel ─────────────────────────────────────*/
.bc-confirm {
  max-width: var(--container-narrow);
  margin-inline: auto;
  text-align: center;
}

.bc-confirm__icon {
  width: calc(var(--min-touch-target) * 1.6);
  height: calc(var(--min-touch-target) * 1.6);
  margin: 0 auto var(--space-5);
  display: grid;
  place-items: center;
  border-radius: var(--radius-round);
  background: var(--bg-success);
  color: var(--brand-success-text);
  border: var(--border-width) solid var(--brand-success);
}

.bc-confirm__icon svg {
  width: 50%;
  height: 50%;
}


/* ── Callout ────────────────────────────────────────────────*/
.bc-callout {
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--card-radius);
  border: var(--border-width) solid var(--border-default);
  border-left-width: var(--focus-ring-width);
  background: var(--bg-info);
  color: var(--text-body);
  font-size: var(--text-base);
  line-height: var(--line-height-body);
}

.bc-callout > * + * {
  margin-top: var(--space-2);
}

.bc-callout p {
  margin: 0;
}

.bc-callout__title {
  font-weight: var(--font-weight-semibold);
  color: var(--text-color);
}

.bc-callout--info    { background: var(--bg-info);    border-left-color: var(--brand-accent); }
.bc-callout--success { background: var(--bg-success); border-left-color: var(--brand-success); }
.bc-callout--warning { background: var(--bg-warning); border-left-color: var(--brand-warning); }
.bc-callout--error   { background: var(--bg-error);   border-left-color: var(--brand-error); }


/* ── Form additions ─────────────────────────────────────────*/

/* Card wrapper for a standalone form page. */
.bc-form-card {
  max-width: var(--container-narrow);
  margin-inline: auto;
  background: var(--bg-primary);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--card-radius);
  padding: var(--space-6);
  box-shadow: var(--elevation-2);
}

.bc-fieldset {
  border: 0;
  margin: 0 0 var(--space-6);
  padding: 0;
}

.bc-fieldset__legend {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--brand-primary);
  line-height: var(--line-height-heading);
  padding: 0;
  margin-bottom: var(--space-2);
}

.bc-fieldset__intro {
  font-size: var(--text-base);
  color: var(--text-muted);
  line-height: var(--line-height-body);
  margin: 0 0 var(--space-4);
  max-width: var(--measure);
}

/* Selects, matching the existing input styling. */
.bc-form-group select {
  width: 100%;
  min-height: var(--input-height);
  padding: var(--input-padding-y) var(--input-padding-x);
  border: var(--input-border-width) solid var(--input-border-color);
  border-radius: var(--input-border-radius);
  background: var(--bg-secondary);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--input-font-size);
  line-height: var(--line-height-body);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* 16px minimum stops iOS zooming the page on focus. */
.bc-form-group input,
.bc-form-group textarea,
.bc-form-group select {
  font-size: var(--input-font-size);
  min-height: var(--input-height);
}

.bc-form-group textarea {
  min-height: calc(var(--input-height) * 3);
}

.bc-hint {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--line-height-body);
}

.bc-required {
  color: var(--brand-error-text);
  font-weight: var(--font-weight-semibold);
}

.bc-optional {
  color: var(--text-muted);
  font-weight: var(--font-weight-regular);
}

/* Error message: says what to do, not just what broke. */
.bc-field-error {
  display: none;
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-error);
  color: var(--brand-error-text);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: var(--line-height-body);
}

.bc-form-group.has-error .bc-field-error {
  display: block;
}

.bc-form-group.has-error input,
.bc-form-group.has-error select,
.bc-form-group.has-error textarea {
  border-color: var(--brand-error);
}

/* Checkbox rows. */
.bc-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}

.bc-check + .bc-check {
  margin-top: var(--space-3);
}

.bc-check input[type="checkbox"] {
  width: var(--space-5);
  height: var(--space-5);
  margin: 0;
  accent-color: var(--brand-accent);
  flex-shrink: 0;
}

.bc-check label {
  font-size: var(--text-base);
  line-height: var(--line-height-body);
  color: var(--text-body);
  font-weight: var(--font-weight-regular);
  margin: 0;
}

.bc-check a {
  color: var(--brand-accent-text);
  text-decoration: underline;
  text-underline-offset: var(--focus-ring-offset);
}

/* Full-width submit. */
.bc-btn--block {
  display: flex;
  width: 100%;
  justify-content: center;
}

/* Status region for form feedback. */
.bc-form-status {
  margin-top: var(--space-4);
}

.bc-form-status:empty {
  margin-top: 0;
}


/* ── Small screens ──────────────────────────────────────────*/
@media (max-width: 640px) {
  .bc-page-hero { padding: var(--space-6) var(--container-pad) var(--space-5); }
  .bc-form-card { padding: var(--space-5); }
  .bc-toc__list { grid-template-columns: 1fr; }
}


/* ============================================================
   MOBILE HARDENING
   ============================================================
   website.css sets desktop padding on .bc-hero and .bc-section
   with no small-screen override, so both eat a large share of a
   phone screen. These rules load after it and correct that,
   along with the wrapping and tap-target issues that only show
   up under about 480px.

   Loads unlayered and last, so equal-specificity rules here win
   without needing !important.
   ============================================================ */

/* Nothing may push the page sideways. */
.bc-site,
.bc-site img,
.bc-site svg,
.bc-site iframe,
.bc-site table {
  max-width: 100%;
}

/* Long email addresses, URLs and reference numbers must break
   rather than force a horizontal scrollbar. */
.bc-prose,
.bc-callout,
.bc-footer__legal,
.bc-footer__abn,
.bc-check label,
.bc-contact__method {
  overflow-wrap: anywhere;
}

/* iOS gives date inputs an intrinsic width that overflows a
   narrow column. Force them to behave like every other field. */
.bc-form-group input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  max-width: 100%;
  min-width: 0;
}

/* Review rows: label beside value on desktop, stacked on phones. */
.bc-review__row {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: var(--border-width) solid var(--border-subtle);
}

.bc-review__label {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.bc-review__value {
  margin: 0;
  color: var(--text-body);
}

/* Mobile menu links need a 44px target (WCAG 2.5.5 AAA).
   website.css gives them 12px padding at 16px type, which is 40px. */
.bc-nav__mobile a {
  min-height: var(--min-touch-target);
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {

  /* Two-column form rows are too narrow for an email address
     on a phone. website.css only stacks these at 480px. */
  .bc-form-row {
    grid-template-columns: 1fr;
  }

  .bc-review__row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .bc-review__label {
    font-weight: var(--font-weight-semibold);
  }
}

@media (max-width: 640px) {

  /* 96px of vertical padding per section is roughly a seventh of
     a phone screen, repeated on every section. */
  .bc-section,
  .bc-survey-section {
    padding-block: var(--space-8);
    padding-inline: var(--container-pad);
  }

  /* 156px of hero top padding leaves very little above the fold.
     The nav is about 68px, so 96px keeps clearance with room to spare. */
  .bc-hero {
    padding: var(--space-8) var(--container-pad) var(--space-8);
    padding-top: calc(var(--space-8) * 2);
  }

  .bc-cta-banner {
    padding-block: var(--space-8);
    padding-inline: var(--container-pad);
  }

  /* Section headers carry 64px of bottom margin by default. */
  .bc-section__header {
    margin-bottom: var(--space-6);
  }

  /* Stacked buttons, full width, so neither is a small target. */
  .bc-hero__actions,
  .bc-cta-banner__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .bc-hero__actions .bc-btn,
  .bc-cta-banner__actions .bc-btn {
    width: 100%;
    justify-content: center;
  }

  /* Trust badges wrap into a readable column instead of three
     cramped items across. */
  .bc-hero__trust {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .bc-toc {
    padding: var(--space-4);
  }

  .bc-form-card {
    padding: var(--space-4);
    border-radius: var(--radius-md);
  }
}

@media (max-width: 400px) {

  /* At this width the card border and page padding together leave
     too little room for the content. Let the card go edge to edge. */
  .bc-form-card,
  .bc-toc {
    border-radius: 0;
    border-inline: 0;
    margin-inline: calc(var(--container-pad) * -1);
  }
}


/* ── Scroll reveal must not depend on JavaScript ────────────
   website.css sets .bc-reveal to opacity: 0 and relies on an
   IntersectionObserver to reveal it. That makes the entire page
   below the hero invisible until the script loads — and permanently
   invisible if it never does.

   Inverting it: content is visible by default, and only armed for
   animation once the script is running AND the element is below the
   fold. Nothing above the fold is ever hidden, so there is no
   hide-then-show flicker when the script arrives late. */
.bc-reveal {
  opacity: 1;
  transform: none;
}

html.bc-js .bc-reveal.bc-armed {
  opacity: 0;
  transform: translateY(20px);
}

html.bc-js .bc-reveal.bc-armed.visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.bc-js .bc-reveal.bc-armed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ── Survey embed height ────────────────────────────────────
   form_embed.js sets an explicit inline height on the iframe once
   the survey reports its size. website.css sets min-height: 600px,
   which wins whenever the reported height is smaller — so short
   slides sit in a tall box with dead space below them.

   Lowering it to a placeholder value: enough that the frame is not
   collapsed before the first resize message arrives, low enough that
   it never overrides the real height afterwards. */
.bc-survey-embed iframe {
  min-height: 24rem;
  width: 100%;
  border: 0;
  display: block;
}

/* No rounded corners fighting the frame's own background. */
.bc-survey-embed {
  overflow: hidden;
}


/* ── Logo lockup ────────────────────────────────────────────
   The mark is an SVG; the wordmark is real text.

   It used to be one SVG containing both. Scaled to fit a 56px nav
   that put "borrower connect" at roughly 7px — illegible — and the
   type was specified as Gill Sans MT, which almost nobody has
   installed, so browsers silently substituted a serif that was not
   the brand font at any size.

   Real text is crisp at every size, follows the theme, is read
   correctly by screen readers, and costs nothing to change.

   The SVG carries aria-hidden. The link's own label already says
   "Borrower Connect home page" and the wordmark says it again in
   text; a third announcement from the SVG would be noise.

   ---- Optical alignment ----
   Centring the two boxes against each other looks wrong, because
   neither one's visual weight sits at its centre.

   Measured from the artwork: the mark's x-height band runs y 554 to
   1429 inside a viewBox of 150 to 1437, so its optical centre is
   65.4% of the way down — not 50%. Inter's x-height centre sits at
   roughly 59.8% of the font size. Reconciling the two at these sizes
   works out to about 0.19em of downward nudge on the wordmark.

   Exposed as a variable. If it still reads high or low to you, change
   this one number rather than anything else. */
.bc-nav__logo,
.bc-footer__logo {
  --bc-logo-nudge: 0.19em;

  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}

.bc-logo-mark {
  height: 2rem;
  width: auto;
  flex-shrink: 0;
  display: block;
}

.bc-logo-word {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: var(--font-weight-semibold);

  /* Slightly open tracking. The token is 0.3px, which does not scale
     with the type, and a tight lowercase wordmark is harder to read
     for anyone with a reading difficulty. Positive and em-based. */
  letter-spacing: 0.015em;

  line-height: 1;
  white-space: nowrap;
  color: var(--brand-primary);
  transform: translateY(var(--bc-logo-nudge));
}

/* ── The footer logo, on navy ────────────────────────────────
   The footer is navy in BOTH themes, so it cannot use the normal
   logo colours. --logo-b is #1C2E4A in the light theme, which is the
   footer background — the "b" was navy on navy and invisible. Only
   the teal "c" ever showed.

   tokens.css already provides the on-navy pair, measured:
     --on-navy        #FFFFFF  13.64:1
     --accent-on-navy #7FD5CB   8.01:1
   Redefining the logo variables on this element is enough, because
   custom properties inherit into the inline SVG below.

   --text-inverse would be the obvious choice for the wordmark and is
   wrong: it flips to #1E2228 in the dark theme, which is near-black
   on navy. --on-navy is fixed to the surface, not to the theme. */
.bc-footer__logo {
  --logo-b: var(--on-navy);
  --logo-c: var(--accent-on-navy);
  --logo-text: var(--on-navy);
}

.bc-footer__logo .bc-logo-word {
  color: var(--on-navy);
}

.bc-footer__logo .bc-logo-mark {
  height: 1.75rem;
}

.bc-footer__logo .bc-logo-word {
  font-size: 1rem;
}

/* Narrow phones: the mark alone still reads as the brand, and the
   space is better spent on the menu button. */
/* Narrow phones: the mark alone still reads as the brand, and the
   space is better spent on the menu button. */
@media (max-width: 400px) {
  .bc-nav__logo .bc-logo-word { display: none; }
}


/* ── Page canvas ────────────────────────────────────────────
   website.css gives body a font and a text colour but no
   background, so every dark surface on the site comes from an
   individual section. Anywhere a section does not reach falls
   through to the builder's white page — most visibly the rubber-band
   overscroll at the top and bottom of a phone screen, which flashes
   white in dark mode.

   The background goes on html, not just body. The root element
   paints the canvas, and the canvas covers the entire viewport
   including the overscroll area. body alone stops at the content.

   !important because the builder sets its own page background and
   that rule is more specific than a bare element selector. */
/* The page veil, defined once and painted by every surface.

   Set as a page background in the builder it lands on an element only
   as tall as the viewport, so it runs out partway down. Moving it to
   html fixed that, but only for surfaces that are transparent — an
   opaque section paints straight over it and you get a hard edge
   where that section begins.

   The trick is background-attachment: fixed. A fixed background is
   positioned against the VIEWPORT, not the element, so the same
   gradient painted on twelve different elements lines up exactly.
   Every surface paints the veil over its own colour and the result
   reads as one continuous wash with no seams at all.

   Built from --brand-accent with color-mix, so it tints correctly in
   both themes instead of being a frozen hex. The two percentages are
   deliberately faint — raise them together to strengthen it. */
:root {
  --bc-veil:
    radial-gradient(70rem 45rem at 88% -8%,
      color-mix(in srgb, var(--brand-accent) 7%, transparent) 0%, transparent 62%),
    radial-gradient(55rem 40rem at 4% 104%,
      color-mix(in srgb, var(--brand-accent) 5%, transparent) 0%, transparent 62%);
}

html {
  background-color: var(--bg-primary) !important;
  background-image: var(--bc-veil);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* body must not paint over the canvas. */
body {
  background-color: transparent !important;
  background-image: none !important;
}

/* Opaque surfaces keep their own colour and paint the veil on top.
   Because the veil is viewport-fixed, it registers exactly with the
   canvas behind them. Listed explicitly rather than applied broadly:
   the navy footer and call-to-action banner are meant to be solid
   blocks, and the survey iframe supplies its own background. */
.bc-site,
.bc-site .bc-hero,
.bc-site .bc-section--alt,
.bc-site .bc-survey-section,
.bc-site .bc-page-hero {
  background-image: var(--bc-veil);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* website.css sets .bc-site { background: var(--bg-primary) }, which is
   opaque and covers the canvas across the whole page. It has to keep a
   colour so nothing shows through from the builder, but it now paints
   the veil on top like every other surface. */

/* website.css gives the hero a linear-gradient via the background
   shorthand, which would replace the veil. Re-declared as a colour so
   the rule above owns background-image outright. */
.bc-site .bc-hero {
  background-color: var(--bg-secondary);
}

/* ── Full-bleed section ─────────────────────────────────────
   The builder's section is already full width, but the content
   wrapper inside it caps at 1170px with auto margins, and the row and
   column each add 5px of side padding. The result is a navy footer
   and a hero gradient floating in a 1170px column with white gutters,
   which reads as a card rather than as the page.

   Our own CSS already does the containing that wrapper was doing:
   .bc-footer__inner is 1200px, .bc-hero__inner is 760px,
   .bc-section__inner has its own limit. Two containers fighting over
   the same job is why the decorative shapes at hero right: -80px were
   being clipped 80px early.

   Scoped with :has(.bc-site) so only sections holding our markup are
   affected. Nothing else in the funnel changes.

   If you would rather fix this in the builder, the setting is the
   section's content width — set it to full. This rule then does
   nothing, and can stay as insurance. */
.c-section:has(.bc-site) > .inner,
.fullSection:has(.bc-site) > .inner {
  max-width: none !important;
  margin-inline: 0 !important;
}

.c-row:has(.bc-site),
.c-column:has(.bc-site),
.c-custom-code:has(.bc-site),
.custom-code-container:has(.bc-site) {
  padding-inline: 0 !important;
  max-width: none !important;
}

/* The builder wraps every Custom HTML block in section, row and
   column containers, each of which can carry its own background.
   Left opaque they cover the canvas and the problem comes back.
   Scoped to containers that actually hold our markup. */
.fullSection:has(.bc-site),
.c-section:has(.bc-site),
.c-row:has(.bc-site),
.c-column:has(.bc-site),
.c-wrapper:has(.bc-site) {
  background-color: transparent !important;
}

/* Stops the overscroll area from being painted by the browser's own
   default rather than the canvas, on the engines that honour it. */
html {
  overscroll-behavior-y: none;
}


/* ── Font swap ──────────────────────────────────────────────
   Inter is fetched from Google with display=swap, so the browser
   paints the fallback immediately and swaps when Inter arrives. That
   is the right trade — text is never invisible — but Arial and Inter
   have different metrics, so the swap moves every line on the page.

   Rather than hide the swap, make it invisible: this declares the
   fallback as a font whose metrics are adjusted to match Inter's. The
   fallback then occupies the same space Inter will, and the swap
   changes the letterforms without moving anything.

   The four override values are the standard metric match for Inter
   against Arial. They are not guesses, but they are also not sacred —
   if you self-host a different weight or subset, they change.

   The durable fix is to stop fetching from Google at all: put
   Inter's woff2 files on the same Pages domain as this stylesheet and
   preload them. Same origin as the CSS, one fewer DNS lookup and TLS
   handshake, and you can preload the exact file. See the note at the
   end of this block. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107.12%;
  ascent-override: 90.49%;
  descent-override: 22.56%;
  line-gap-override: 0%;
}

:root {
  --font-body: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, sans-serif;
  --font-heading: var(--font-body);
}

/* To self-host instead, download the Inter woff2 files, put them
   beside this stylesheet, and add to the funnel head — BEFORE the
   stylesheet links:

     <link rel="preload" as="font" type="font/woff2" crossorigin
           href="https://borrower-connect-assets.pages.dev/inter-400.woff2">
     <link rel="preload" as="font" type="font/woff2" crossorigin
           href="https://borrower-connect-assets.pages.dev/inter-600.woff2">

   then replace the Google Fonts link with @font-face rules pointing at
   them, using font-display: swap. The crossorigin attribute is not
   optional on a font preload — without it the file is fetched twice. */