/* The design's Montserrat-* family names render as DM Sans, exactly as the
   web app aliases them in 2/app/index.php. */
@font-face {
    font-family: 'Montserrat-Regular';
    src: url('https://d2w998roo7cij6.cloudfront.net/cf-cdn/assets/fonts/DMSans-Regular.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat-Medium';
    src: url('https://d2w998roo7cij6.cloudfront.net/cf-cdn/assets/fonts/DMSans-Medium.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat-SemiBold';
    src: url('https://d2w998roo7cij6.cloudfront.net/cf-cdn/assets/fonts/DMSans-SemiBold.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat-Bold';
    src: url('https://d2w998roo7cij6.cloudfront.net/cf-cdn/assets/fonts/DMSans-Bold.ttf') format('truetype');
    font-display: swap;
}

/* Blended Rate calculator - ported from ONE-Web BlendedRateCalc/blendedrate.scss.
   Tokens from the Figma design (Brand/Gray scales):
   brand-500 #278AE5 | gray-900 #181D27 | gray-800 #252B37 | gray-700 #414651
   gray-500 #717680 | gray-400 #A4A7AE | gray-300 #D5D7DA | gray-200 #E9EAEB
   Montserrat-SemiBold/Bold faces come from fonts.css.php. */

.BR_Viewport {
  width: 100%;
  padding: 18px;
  border-radius: 14px;
  max-width: 440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  margin-bottom: 40px;
  background-color: #FFFFFF;
}

.BR_Viewport *,
.BR_ResultsPane * {
  box-sizing: border-box;
}

/* Outer wrapper. The wizard and the Results screen are independent containers -
   on the Results step they sit side by side, otherwise the wizard stands alone. */
.BR_Layout {
  display: flex;
  justify-content: center;
  width: 100%;
}

.BR_LayoutSplit {
  align-items: flex-start;
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Header */
.BR_Header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  margin-bottom: 15px;
  padding: 0 0;
  flex-shrink: 0;
}

.BR_HeaderLeft,
.BR_HeaderRight {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.BR_HeaderRight {
  justify-content: flex-end;
}

.BR_HeaderIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}

.BR_HeaderTitle {
  font-family: 'Montserrat-Medium';
  font-size: 22px;
  color: #000000;
  text-align: center;
  white-space: nowrap;
}

/* The two ways out of the wizard, worded rather than drawn: what the page is,
   and starting again. */
.BR_HeaderPill {
  padding: 6px 11px;
  background: none;
  border: 1px solid #D5D7DA;
  border-radius: 999px;
  font-family: 'Montserrat-SemiBold';
  font-size: 12px;
  line-height: 18px;
  color: #717680;
  white-space: nowrap;
  cursor: pointer;
}

/* Progress */
.BR_Progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 12px 8px;
  background-color: #FFFFFF;
  flex-shrink: 0;
}

.BR_Progress .BR_ProgressTrack {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background-color: #D5D7DA;
}

.BR_Progress .BR_ProgressFill {
  height: 100%;
  border-radius: 4px;
  background-color: #278AE5;
  -webkit-transition: width 0.35s ease;
  transition: width 0.35s ease;
}

.BR_Progress .BR_ProgressSteps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.BR_Progress .BR_ProgressStep {
  flex: 1 0 0;
  min-width: 0;
  text-align: center;
  font-family: 'Montserrat-SemiBold';
  font-size: 12px;
  line-height: 18px;
  color: #D5D7DA;
}

.BR_Progress .BR_ProgressStepActive {
  color: #181D27;
}

/* Screen content */
.BR_Content {
  flex: 1 0 auto;
  padding: 0 14px;
}

/* The Results screen's own container, sitting beside the wizard. */
.BR_ResultsPane {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 14px;
}

/* Below the two-column breakpoint the two containers stack. On the Results
   step the phone layout follows the app design: the wizard collapses to its
   header + step bar and the results follow directly - the scenario form only
   stays on screen in the two-column desktop split. */
@media (max-width: 900px) {
  .BR_LayoutSplit {
    display: block;
    max-width: 440px;
  }

  /* Only the Results step itself collapses the wizard to header + step bar;
     with the results pane kept on screen from an earlier visit, the active
     step's form must stay usable. */
  .BR_LayoutSplit.BR_OnResults .BR_Content {
    display: none;
  }

  /* A phone only shows the pane on the Results step itself; desktop keeps
     it side by side throughout. */
  .BR_LayoutSplit:not(.BR_OnResults) .BR_ResultsPane {
    display: none;
  }

  .BR_LayoutSplit .BR_Viewport {
    margin-bottom: 0;
  }

  .BR_ResultsPane {
    padding: 0;
  }
}

/* Preview keeps the one-column reading of the app on every width: the results
   are a single card the client scrolls, rather than a pane beside the form. */
.BR_LayoutOne.BR_LayoutSplit {
  display: block;
  max-width: 520px;
}

.BR_LayoutOne .BR_Viewport {
  max-width: 520px;
}

/* A phone gives the wizard the whole screen, the way the app's page does: the
   card's own 18px inset stacks on top of every screen's 14px and leaves the
   content reading narrower than it needs to. Each part keeps that 14px. */
@media screen and (max-width: 767px) {
  .BR_LayoutOne .BR_Viewport {
    padding-left: 0;
    padding-right: 0;
  }

  .BR_LayoutOne .BR_Header {
    padding: 0 14px;
  }

  .BR_LayoutOne .BR_Progress {
    padding: 0 14px 8px;
  }
}

/* The app's own chrome is the only chrome in preview. The shared header and
   the footer bar belong to the page around the calculator, and the client
   meets the agent on the results screen instead. */
.BR_PreviewPage .HeaderContainer,
.BR_PreviewPage .extrapayfooter {
  display: none;
}

/* On a window wider than the column, the chrome and the footer belong to the
   window rather than to the card: sticky inside a 520px card draws its hairline
   across the middle of the screen. Fixed spans it, with the rows inside brought
   back to the column's own width, and the card carries padding for the height
   each bar takes (measured, since both grow with their content). */
@media screen and (min-width: 768px) {
  .BR_PreviewPage .BR_LayoutOne .BR_Chrome,
  .BR_PreviewPage .BR_LayoutOne .BR_Footer {
    position: fixed;
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
  }

  .BR_PreviewPage .BR_LayoutOne .BR_Chrome {
    top: var(--br-sticky-top, 0px);
    padding-left: 0;
    padding-right: 0;
  }

  .BR_PreviewPage .BR_LayoutOne .BR_Footer {
    bottom: 0;
  }

  .BR_PreviewPage .BR_LayoutOne .BR_Chrome > *,
  .BR_PreviewPage .BR_LayoutOne .BR_Footer > * {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }

  .BR_PreviewPage .BR_LayoutOne .BR_Footer > * {
    padding-left: 14px;
    padding-right: 14px;
  }

  /* The title row and the step bar keep the insets they carry on a phone -
     the row they sit in is the window's now, but the column inside it is the
     same one. */
  .BR_PreviewPage .BR_LayoutOne .BR_Chrome > .BR_Header {
    padding-left: 16px;
    padding-right: 16px;
  }

  .BR_PreviewPage .BR_LayoutOne .BR_Chrome > .BR_Progress {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* On a wide window the row is the results screen's footer, so it spans the
     window as the wizard's does, with the buttons held to the column. */
  .BR_PreviewPage .BR_LayoutOne .BR_ResultsActions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding-left: calc(50% - 246px);
    padding-right: calc(50% - 246px);
    background-color: #FFFFFF;
  }

  .BR_PreviewPage .BR_LayoutOne .BR_ResultsPane {
    padding-bottom: var(--br-actions-height, 0px);
  }

  /* On the results step the wizard collapses to its chrome, and the chrome is
     out of the flow - so the pane starts under it and the line introducing the
     trade is the part that disappears. The pane holds that room itself. */
  .BR_PreviewPage .BR_LayoutOne.BR_OnResults .BR_ResultsPane {
    padding-top: var(--br-chrome-height, 0px);
  }

  .BR_PreviewPage .BR_LayoutOne:not(.BR_OnResults) .BR_Viewport {
    padding-top: var(--br-chrome-height, 0px);
    padding-bottom: var(--br-footer-height, 0px);
  }
}

/* A short step would otherwise leave the footer floating halfway up the
   screen. The card fills the screen instead, and its content - already the one
   part that grows - carries the footer down to the bottom edge. The results
   step is exempt: the wizard collapses to its chrome there and the results
   follow directly beneath it. */
.BR_LayoutOne:not(.BR_OnResults) .BR_Viewport {
  min-height: 100vh;
  min-height: 100dvh;
}

/* The chrome reads as the app's own: the name of the calculator at label size
   rather than as a page title, a hairline step bar under it, and the step names
   in the weight the app gives them. */
/* The chrome holds the inset for both rows, so the restart sits in from the
   edge rather than against it. */
.BR_LayoutOne .BR_Chrome .BR_Header {
  height: auto;
  padding: 0 16px;
}

.BR_LayoutOne .BR_Chrome .BR_HeaderRight {
  gap: 6px;
}

/* Back is the footer's job, and the results screen's own - a second one in the
   chrome only asks the same question twice. */
.BR_LayoutOne .BR_Chrome #br_back {
  display: none;
}

.BR_LayoutOne .BR_Chrome .BR_Progress {
  padding-left: 12px;
  padding-right: 12px;
}

.BR_LayoutOne .BR_Chrome .BR_HeaderTitle {
  font-family: 'Montserrat-Bold';
  font-size: 16px;
  letter-spacing: -0.2px;
  color: #181D27;
}

.BR_LayoutOne .BR_Chrome .BR_Progress {
  padding-bottom: 8px;
}

.BR_LayoutOne .BR_Chrome .BR_ProgressTrack {
  height: 3px;
  border-radius: 99px;
  background-color: #E9EAEB;
}

.BR_LayoutOne .BR_Chrome .BR_ProgressFill {
  border-radius: 99px;
  background-color: #0B2545;
}

.BR_LayoutOne .BR_Chrome .BR_ProgressSteps {
  margin-top: 8px;
}

.BR_LayoutOne .BR_Chrome .BR_ProgressStep {
  padding: 4px 0;
  font-size: 12px;
  line-height: 18px;
  color: #D5D7DA;
}

.BR_LayoutOne .BR_Chrome .BR_ProgressStepActive {
  color: #181D27;
}

/* The wizard's chrome stays with the client the way the app's does: the step
   they are on and the bar above it at the top, the tally and the button that
   moves them on at the bottom, whatever the screen's length. --br-sticky-top
   is measured from the shared header, which is fixed on a phone. */
.BR_LayoutOne .BR_Chrome {
  position: -webkit-sticky;
  position: sticky;
  top: var(--br-sticky-top, 0px);
  z-index: 20;
  /* The card's own top padding would sit above this, and the chrome would jump
     that distance the moment it stuck. It carries the inset itself instead, so
     sticking changes nothing about where it sits. */
  padding-top: 14px;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E9EAEB;
}

.BR_LayoutOne .BR_Viewport {
  /* The card's own inset would stack on top of every screen's, leaving the
     forms narrower than the tally and the buttons under them. One inset for
     the column, carried by the rows themselves. */
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  /* Same reason at the foot of the card: padding and margin below the footer
     are the distance it drops through when the page bottom is reached and it
     stops sticking. The footer carries its own inset instead. */
  padding-bottom: 0;
  margin-bottom: 0;
}

.BR_LayoutOne .BR_Chrome .BR_Header {
  margin-bottom: 10px;
}

.BR_LayoutOne .BR_Footer {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  z-index: 20;
  background-color: #FFFFFF;
  border-top: 1px solid #E9EAEB;
  padding-bottom: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

/* The running total belongs to the footer it sits in rather than being a card
   laid on top of it: no plate, no title pill, each figure under a label at the
   size the rest of the chrome uses. */
.BR_LayoutOne .BR_Tally {
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: none;
}

.BR_LayoutOne .BR_TallyPill {
  display: none;
}

.BR_LayoutOne .BR_TallyCell {
  flex: 1 1 0;
  gap: 0;
}

.BR_LayoutOne .BR_TallyLabel {
  font-family: 'Montserrat-SemiBold';
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #717680;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.BR_LayoutOne .BR_TallyValue {
  font-size: 18px;
  line-height: 24px;
  color: #181D27;
}

/* Both columns are sized from the payments they stand for rather than filling
   the box, so the heights carry the comparison. The stack grows from its bars
   and the new mortgage is set alongside them. */
.BR_LayoutOne .BR_Stack {
  height: auto;
  /* A hairline between the bricks, so a stack of payments reads as several
     rather than as one block with lines drawn on it. */
  gap: 2px;
}

.BR_LayoutOne .BR_NewMortgage {
  align-self: flex-end;
  overflow: hidden;
}

/* A new payment small enough - nothing at all, on a scenario that needs no
   mortgage - leaves a block too short for a title above a figure. It reads as
   one of the bricks opposite instead, which is the height it has. */
.BR_LayoutOne .BR_NewMortgage.BR_NewMortgageTight {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 14px;
}

.BR_LayoutOne .BR_NewMortgageTight .BR_NewMortgageTitle,
.BR_LayoutOne .BR_NewMortgageTight .BR_NewMortgageValue {
  width: auto;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

/* The two columns are drawn at a fixed 152px and never give any of it back, so
   on a narrow phone the chart runs past the card holding it, and on a wide one
   it sits in the middle of a mostly empty card. They take half the card each
   instead, with the arrow between them keeping its own width. */
.BR_LayoutOne .BR_CompareGrid {
  /* Two equal columns with the arrow between them, so neither side's own
     content decides how much of the card it gets. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  max-width: none;
  gap: 8px;
}

.BR_LayoutOne .BR_Stack,
.BR_LayoutOne .BR_NewMortgage {
  width: auto;
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
}

.BR_LayoutOne .BR_CompareConnector {
  flex: 0 0 auto;
}

/* Long enough to wrap onto a second line on a narrow phone, which reads as two
   buttons rather than one. The row gives back some of its side padding too, so
   the line holds on the narrowest screens rather than only on the roomy ones. */
.BR_LayoutOne .BR_ShareLabel {
  font-size: 14px;
  white-space: nowrap;
}

.BR_LayoutOne .BR_ShareRow {
  padding-left: 12px;
  padding-right: 12px;
}

/* Notices. Red is something that stops the move working, amber is something
   that changes what it costs, and the blue block is where a figure came from
   rather than a caution at all. */
.BR_Notices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.BR_Notices:empty {
  display: none;
}

.BR_Warn,
.BR_WarnSoft,
.BR_Source {
  border-radius: 12px;
  padding: 14px;
  font-family: 'Montserrat-Regular';
  font-size: 13px;
  line-height: 19px;
}

.BR_Warn {
  background-color: #FEF3F2;
  border: 1px solid #FDA29B;
  color: #7A271A;
}

.BR_WarnSoft {
  background-color: #FFFAEB;
  border: 1px solid #FEDF89;
  color: #93370D;
}

/* Each line the records raised, inside the one card holding them all. */
.BR_WarnLine + .BR_WarnLine {
  margin-top: 10px;
}

.BR_WarnStrong {
  font-family: 'Montserrat-Bold';
}

.BR_Source {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px 12px;
  background-color: #F5F8FC;
  border: 1px solid #D7E3F0;
  border-radius: 10px;
  font-size: 12px;
  line-height: 18px;
  color: #414651;
}

.BR_SourceHeading {
  font-family: 'Montserrat-Bold';
  font-size: 12px;
  letter-spacing: 0.2px;
  color: #0B2545;
}

/* Nothing owed yet: a placeholder where the cards will stack, so the step
   reads as waiting on the client rather than as a blank screen. */
.BR_DebtEmpty {
  padding: 24px 16px;
  border: 1px dashed #D5D7DA;
  border-radius: 16px;
  text-align: center;
  font-family: 'Montserrat-Regular';
  font-size: 14px;
  line-height: 20px;
  color: #717680;
}

/* The cards are stacked straight into their container, which carries no
   spacing of its own - they would otherwise sit edge to edge. */
.BR_LayoutOne #br_debt_cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* The line that introduces the trade, above the card carrying it. */
.BR_TradeIntro {
  order: -2;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.BR_TradeTitle {
  font-family: 'Montserrat-Bold';
  font-size: 24px;
  line-height: 32px;
  color: #181D27;
}

.BR_TradeBody {
  font-family: 'Montserrat-Regular';
  font-size: 14px;
  line-height: 20px;
  color: #414651;
}

/* Savings rather than a trade: the eyebrow says so, in the sage the app uses
   for the good side of the comparison. Scoped past the amber above it. */
.BR_LayoutOne .BR_ScreenResults .BR_IncreaseCardGood .BR_IncreaseLabel {
  color: #9BC7A8;
}

/* The chip dots in the same tones, so a chip and the bar it stands for read as
   the one debt. */
.BR_LayoutOne .BR_Dot--car { background-color: rgb(44, 74, 110); }
.BR_LayoutOne .BR_Dot--student { background-color: rgb(62, 99, 137); }
.BR_LayoutOne .BR_Dot--medical { background-color: rgb(92, 127, 163); }
.BR_LayoutOne .BR_Dot--credit { background-color: rgb(138, 75, 68); }
.BR_LayoutOne .BR_Dot--personal { background-color: rgb(109, 106, 124); }
.BR_LayoutOne .BR_Dot--other { background-color: rgb(136, 146, 160); }

/* The comparison bars in the tones the app draws them in, against the navy the
   rest of the preview screen is built from. */
.BR_LayoutOne .BR_StackItem--car { background-color: rgb(44, 74, 110); }
.BR_LayoutOne .BR_StackItem--student { background-color: rgb(62, 99, 137); }
.BR_LayoutOne .BR_StackItem--medical { background-color: rgb(92, 127, 163); }
.BR_LayoutOne .BR_StackItem--credit { background-color: rgb(138, 75, 68); }
.BR_LayoutOne .BR_StackItem--personal { background-color: rgb(109, 106, 124); }
.BR_LayoutOne .BR_StackItem--other { background-color: rgb(136, 146, 160); }

.BR_LayoutOne.BR_LayoutSplit.BR_OnResults .BR_Content {
  display: none;
}

.BR_LayoutOne.BR_LayoutSplit:not(.BR_OnResults) .BR_ResultsPane {
  display: none;
}

.BR_LayoutOne.BR_LayoutSplit .BR_Viewport {
  margin-bottom: 0;
}

/* A phone reads the results as a page of its own, inset from both edges the
   way the app's is; the centred column needs no inset of its own. */
.BR_LayoutOne .BR_ResultsPane {
  padding: 0 14px;
}

@media screen and (min-width: 768px) {
  .BR_LayoutOne .BR_ResultsPane {
    padding: 0;
  }
}

/* The trade is the headline of the results, so preview reads it first and the
   chart backing it up second - the order the app's own screen uses, in the
   same navy the first-year card is drawn in. */
.BR_LayoutOne .BR_ScreenResults .BR_IncreaseCard {
  order: -1;
  position: relative;
  padding: 22px;
  border-radius: 18px;
  background-image: radial-gradient(135% 115% at 12% -15%, #2A5F92 0%, #153E6B 38%, #0B2545 70%, #061529 100%);
  box-shadow: 0 6px 14px -10px rgba(6, 21, 41, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* The plate the figure sits on reads as lit from above rather than as a flat
   white wash, which is all the amber card needed. */
.BR_LayoutOne .BR_ScreenResults .BR_IncreaseInner {
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.05) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.BR_LayoutOne .BR_ScreenResults .BR_IncreaseLabel {
  font-family: 'Montserrat-SemiBold';
  font-size: 12px;
  letter-spacing: 0.7px;
  color: #F5C97B;
}

.BR_LayoutOne .BR_ScreenResults .BR_IncreaseInfo {
  font-size: 13px;
  line-height: 19px;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
}

.BR_LayoutOne .BR_ScreenResults .BR_IncreaseInfoStrong {
  color: #FFFFFF;
}

.BR_Screen {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px 0;
}

.BR_ScreenIntro {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.BR_ScreenTitle {
  font-family: 'Montserrat-Bold';
  font-size: 24px;
  line-height: 32px;
  color: #181D27;
}

.BR_ScreenSubtitle {
  font-family: 'Montserrat-Regular';
  font-size: 14px;
  line-height: 20px;
  color: #414651;
}

.BR_Card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background-color: #FFFFFF;
  border: 1px solid #E9EAEB;
  border-radius: 16px;
  box-shadow: 0px 1px 1.5px rgba(10, 13, 18, 0.1), 0px 1px 1px rgba(10, 13, 18, 0.1);
}

.BR_CardHelper {
  font-family: 'Montserrat-Regular';
  font-size: 12px;
  line-height: 18px;
  color: #717680;
}

/* Fields. The reference renders these through ONE-Web's Inputfields partial;
   here the input group is our own markup, styled to the same design. */
.BR_Field {
  width: 100%;
  min-width: 0;
}

.BR_FieldLabel {
  font-family: 'Montserrat-Medium';
  font-size: 14px;
  line-height: 20px;
  color: #717680;
  margin-bottom: 6px;
}

.BR_InputWrap {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  padding: 0 12px 0 0;
  background-color: #FFFFFF;
  border: 1px solid #D5D7DA;
  border-radius: 8px;
}

.BR_InputWrap:focus-within {
  border-color: #278AE5;
}

/* No addon on the address field, so the text needs its own left inset. */
.BR_AddressField .BR_InputWrap {
  padding-left: 12px;
}

/* The $ / % marker is the app's blue addon segment - input_blue in ONE-Web.
   It fills the field's full height, flush with the left edge. */
.BR_InputAddon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  align-self: stretch;
  border-radius: 7px 0 0 7px;
  background-color: #E5F3FF;
  flex-shrink: 0;
}

.BR_InputAddon img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.BR_Input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Montserrat-Medium';
  font-size: 16px;
  color: #181D27;
  padding: 0;
}

.BR_FieldRow {
  display: flex;
  gap: 12px;
  width: 100%;
}

.BR_FieldRow .BR_Field {
  flex: 1 0 0;
}

.BR_FieldHelper {
  font-family: 'Montserrat-Regular';
  font-size: 12px;
  line-height: 18px;
  color: #717680;
  margin-top: 6px;
}

.BR_AddressField {
  width: 100%;
}

.BR_FieldOptional {
  font-family: 'Montserrat-Regular';
  font-size: 12px;
  line-height: 18px;
  color: #A4A7AE;
}

/* The add-a-debt bar sits under the cards, within thumb reach of the CTA. */
.BR_AddBar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid #E9EAEB;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 1.5px rgba(10, 13, 18, 0.1);
}

.BR_AddBarLabel {
  font-family: 'Montserrat-Regular';
  font-size: 14px;
  line-height: 20px;
  color: #717680;
}

/* Footer */
.BR_Footer {
  padding: 12px 14px;
  flex-shrink: 0;
}

.BR_FooterActions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.BR_Button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 44px;
  padding: 12px;
  background-color: #278AE5;
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
}

/* Sharing the row with Back: the primary button takes what is left of it. */
.BR_FooterActions .BR_Button {
  flex: 1 1 auto;
}

.BR_FooterActions .BR_ButtonSecondary {
  flex: 0 0 auto;
}

.BR_ButtonSecondary {
  padding: 12px 20px;
  background-color: #FFFFFF;
  border: 1px solid #D5D7DA;
}

/* Brand/300 is the lighter blue the button component carries for its inactive state. */
.BR_ButtonDisabled {
  background-color: #6BB4F8;
  cursor: default;
}

.BR_ButtonText {
  font-family: 'Montserrat-SemiBold';
  font-size: 14px;
  line-height: 20px;
  color: #FFFFFF;
  padding: 0 2px;
}

.BR_ButtonTextSecondary {
  color: #414651;
}

/* Debts step ----------------------------------------------------------------- */

/* Debt type dots. Solid 8px circles, exact fills from the exported assets. */
.BR_Dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.BR_Dot--car { background-color: #2F80ED; }
.BR_Dot--student { background-color: #9B51E0; }
.BR_Dot--medical { background-color: #2D9CDB; }
.BR_Dot--credit { background-color: #F2C94C; }
.BR_Dot--personal { background-color: #EB5757; }
.BR_Dot--other { background-color: #4F4F4F; }

.BR_ChipRow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

.BR_Chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px;
  background-color: #FFFFFF;
  border: 1px solid #E9EAEB;
  border-radius: 100px;
  cursor: pointer;
  flex-shrink: 0;
}

.BR_ChipLabel {
  font-family: 'Montserrat-Medium';
  font-size: 14px;
  line-height: 20px;
  color: #181D27;
  white-space: nowrap;
}

.BR_ChipPlus {
  font-family: 'Montserrat-Medium';
  font-size: 15px;
  line-height: 1;
  color: #A4A7AE;
}

/* How many of this type are already on the board, so a second card reads as a
   deliberate add rather than the first one having been replaced. */
.BR_ChipCount {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 100px;
  background-color: #E9EAEB;
  font-family: 'Montserrat-SemiBold';
  font-size: 11px;
  line-height: 16px;
  color: #717680;
  text-align: center;
}

.BR_DebtHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 0;
}

.BR_DebtName {
  display: flex;
  align-items: center;
  gap: 8px;
}

.BR_DebtLabel {
  font-family: 'Montserrat-Medium';
  font-size: 14px;
  line-height: 20px;
  color: #181D27;
}

.BR_DebtRemove {
  font-family: 'Montserrat-Medium';
  font-size: 12px;
  line-height: 18px;
  color: #717680;
  cursor: pointer;
}

/* Segmented control */
.BR_SegmentedLabel {
  font-family: 'Montserrat-Medium';
  font-size: 14px;
  line-height: 20px;
  color: #717680;
  margin-bottom: 6px;
}

.BR_Segmented {
  display: flex;
  align-items: center;
  height: 44px;
  width: 100%;
  padding: 4px;
  background-color: #E9EAEB;
  border-radius: 1000px;
}

.BR_SegmentedItem {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 1000px;
  overflow: hidden;
  cursor: pointer;
  font-family: 'Montserrat-Medium';
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: #A4A7AE;
  white-space: nowrap;
}

.BR_SegmentedItemActive {
  background-color: #252B37;
  color: #FFFFFF;
}

/* Blended rate tally */
.BR_Tally {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 16px;
  background-color: #181D27;
  background-image: url('https://d2w998roo7cij6.cloudfront.net/cf-cdn/assets/images/app_images/br_tally_bg.png');
  background-size: cover;
  background-position: center;
}

.BR_TallyPill {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.1);
  font-family: 'Montserrat-Medium';
  font-size: 14px;
  line-height: 20px;
  color: #FFFFFF;
  white-space: nowrap;
}

.BR_TallyRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.BR_TallyCell {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 10px;
}

.BR_TallyLabel {
  font-family: 'Montserrat-Medium';
  font-size: 12px;
  line-height: 18px;
  color: #C1E1FF;
}

.BR_TallyValue {
  font-family: 'Montserrat-Bold';
  font-size: 20px;
  line-height: 1.15;
  color: #FFFFFF;
}

/* Scenario step -------------------------------------------------------------- */

.BR_RateGroup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
}

/* Quick-pick rate pills - individual pills, unlike the segmented control's track. */
.BR_PillRow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}

.BR_Pill {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border: 0.653px solid #D5D7DA;
  border-radius: 1000px;
  overflow: hidden;
  cursor: pointer;
  font-family: 'Montserrat-Medium';
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: #A4A7AE;
  white-space: nowrap;
  flex-shrink: 0;
}

.BR_PillActive {
  background-color: #252B37;
  border-color: #252B37;
  color: #FFFFFF;
}

/* Lender buydown promo - hidden, but the engine still applies its -1 buydown
   to the computed payments. */
.BR_Buydown {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border-radius: 16px;
  background-color: #252B37;
  overflow: hidden;
}

.BR_BuydownHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.BR_BuydownTitle {
  flex: 1 0 0;
  min-width: 0;
  font-family: 'Montserrat-Medium';
  font-size: 13px;
  line-height: 20px;
  color: #FFFFFF;
}

.BR_BuydownLogo {
  width: 36px;
  height: 36px;
  border-radius: 6.264px;
  object-fit: cover;
  flex-shrink: 0;
}

.BR_BuydownRates {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.12);
}

.BR_BuydownOld {
  position: relative;
  font-family: 'Montserrat-SemiBold';
  font-size: 30px;
  line-height: 38px;
  color: #5C6775;
  white-space: nowrap;
}

.BR_BuydownStrike {
  position: absolute;
  left: -11px;
  top: 50%;
  width: 112px;
  height: 1px;
  background-color: #FF6B6B;
  -webkit-transform: rotate(-4deg);
  transform: rotate(-4deg);
}

.BR_BuydownArrow {
  font-family: 'Montserrat-Regular';
  font-size: 28px;
  line-height: 36px;
  color: #252B37;
  white-space: nowrap;
}

.BR_BuydownNew {
  font-family: 'Montserrat-Bold';
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -0.72px;
  color: #17B26A;
  white-space: nowrap;
}

/* Which debts get paid off */
.BR_PayoffRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.BR_PayoffChip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background-color: #FFFFFF;
  border: 1px solid #E9EAEB;
  border-radius: 100px;
  cursor: pointer;
  flex-shrink: 0;
}

.BR_PayoffChipOff {
  opacity: 0.45;
}

.BR_PayoffLabel {
  font-family: 'Montserrat-Medium';
  font-size: 14px;
  line-height: 20px;
  color: #181D27;
  white-space: nowrap;
}

.BR_PayoffAmount {
  font-family: 'Montserrat-Medium';
  font-size: 14px;
  line-height: 20px;
  color: #717680;
  white-space: nowrap;
}

/* Results step --------------------------------------------------------------- */

.BR_ScreenResults {
  gap: 12px;
}

.BR_CompareCard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 24px;
  background-color: #FFFFFF;
  border: 1px solid #E9EAEB;
  border-radius: 16px;
  box-shadow: 0px 1px 1.5px rgba(10, 13, 18, 0.1), 0px 1px 1px rgba(10, 13, 18, 0.1);
}

.BR_CompareHeading {
  width: 100%;
  text-align: center;
  font-family: 'Montserrat-SemiBold';
  font-size: 14px;
  line-height: 20px;
  color: #717680;
}

/* The design draws the comparison at a fixed 152 / 28 / 152 across the card's
   364px of inner width; the block is capped at that width and centred. */
.BR_CompareGrid {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  max-width: 364px;
  margin: 0 auto;
}

.BR_Stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 152px;
  height: 382px;
  flex-shrink: 0;
}

.BR_StackItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 4px 14px;
  border-radius: 12px;
  font-family: 'Montserrat-SemiBold';
  font-size: 12px;
  line-height: 18px;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
}

.BR_StackItemDark {
  color: #181D27;
}

/* The bars carry the same colours as the chips, so a debt keeps one identity
   from the moment it is added through to the comparison. */
.BR_StackItem--car { background-color: #4A90E2; }
.BR_StackItem--student { background-color: #7B61FF; }
.BR_StackItem--medical { background-color: #2D9CDB; }
.BR_StackItem--credit { background-color: #F2C94C; }
.BR_StackItem--personal { background-color: #EB5757; }
.BR_StackItem--other { background-color: #4F4F4F; }
.BR_StackItem--mortgage { background-color: #13203F; }
.BR_StackItem--secondary { background-color: #13203F; }

.BR_StackLabel,
.BR_StackAmount {
  overflow: hidden;
  text-overflow: ellipsis;
}

.BR_CompareConnector {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  flex-shrink: 0;
  align-self: stretch;
}

.BR_NewMortgage {
  display: flex;
  width: 152px;
  flex-shrink: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  align-self: stretch;
  padding: 16px;
  border-radius: 16px;
  background-color: #15906B;
}

.BR_NewMortgageTitle,
.BR_NewMortgageValue {
  width: 100%;
  font-family: 'Montserrat-SemiBold';
  font-size: 16px;
  line-height: 24px;
  color: #FFFFFF;
}

/* Sits under the comparison on the same track, so each total lines up with the
   column it belongs to. */
.BR_TotalsRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  max-width: 364px;
  margin: 0 auto;
}

.BR_TotalGroup {
  display: flex;
  width: 152px;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.BR_TotalsSpacer {
  width: 28px;
  flex-shrink: 0;
}

.BR_TotalValue {
  font-family: 'Montserrat-Bold';
  font-size: 24px;
  line-height: 32px;
  color: #181D27;
  white-space: nowrap;
}

.BR_TotalValueAfter {
  color: #056A36;
}

.BR_TotalCaption {
  font-family: 'Montserrat-Medium';
  font-size: 12px;
  line-height: 18px;
  color: #717680;
  white-space: nowrap;
}

/* Estimated monthly increase */
.BR_IncreaseCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 24px;
  border-radius: 16px;
  overflow: hidden;
  background-image: linear-gradient(152.77deg, #FFB900 0%, #FF8904 50%, #FF6900 100%);
  box-shadow: 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03), 0px 2px 2px -1px rgba(10, 13, 18, 0.04);
}

.BR_IncreaseInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 24px;
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.2);
}

.BR_IncreaseLabel {
  font-family: 'Montserrat-Regular';
  font-size: 14px;
  line-height: 20px;
  color: #FAFAFA;
  text-align: center;
  white-space: nowrap;
}

.BR_IncreaseValue {
  font-family: 'Montserrat-Bold';
  font-size: 48px;
  line-height: 60px;
  letter-spacing: -0.96px;
  color: #FFFFFF;
  text-align: center;
  white-space: nowrap;
}

.BR_IncreaseUnit {
  font-family: 'Montserrat-Medium';
  font-size: 20px;
  line-height: 30px;
  margin-left: 4px;
}

.BR_IncreaseInfo {
  width: 100%;
  font-family: 'Montserrat-Regular';
  font-size: 14px;
  line-height: 20px;
  color: #252B37;
}

.BR_IncreaseInfoStrong {
  font-family: 'Montserrat-Bold';
}

/* Estimated first-year benefit card. Dark treatment from the prototype, where
   it separates the projected figures from the measured ones above it. */
.BR_AnnualCard {
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-radius: 18px;
  color: #FFFFFF;
  background: radial-gradient(135% 115% at 88% -15%, #3A6B5C 0%, #1A4A55 32%, #0D2C4B 68%, #061529 100%);
  box-shadow: 0 6px 14px -10px rgba(6, 21, 41, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.BR_AnnualEyebrow {
  font-family: 'Montserrat-SemiBold';
  font-size: 12px;
  letter-spacing: 0.7px;
  color: #9BC7A8;
}

/* A first-year cost rather than a benefit. */
.BR_AnnualCardCost .BR_AnnualEyebrow {
  color: #F5C97B;
}

.BR_AnnualValue {
  font-family: 'Montserrat-Bold';
  font-size: 42px;
  line-height: 52px;
  letter-spacing: -1px;
}

.BR_AnnualRows {
  display: flex;
  flex-direction: column;
  margin-top: 6px;
}

.BR_AnnualRow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  font-family: 'Montserrat-Regular';
  font-size: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.BR_AnnualRow span:first-child {
  color: rgba(255, 255, 255, 0.72);
}

.BR_AnnualRow span:last-child {
  font-family: 'Montserrat-SemiBold';
}

.BR_AnnualToggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  padding: 11px;
  border-radius: 9px;
  font-family: 'Montserrat-SemiBold';
  font-size: 13px;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.06) 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.BR_AnnualCaret {
  display: inline-block;
  -webkit-transition: transform 0.2s;
  transition: transform 0.2s;
}

.BR_AnnualCaretOpen {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.BR_AnnualDetail {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 14px;
}

.BR_DetailBlock {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.BR_DetailHeading {
  font-family: 'Montserrat-Bold';
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.BR_DetailField {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.BR_DetailLabel {
  font-family: 'Montserrat-Medium';
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

.BR_Range {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

.BR_Range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FFFFFF;
  cursor: pointer;
}

.BR_Range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: #FFFFFF;
  cursor: pointer;
}

.BR_Segment {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
}

.BR_SegmentBtn {
  flex: 1 0 0;
  padding: 7px 12px;
  border-radius: 6px;
  text-align: center;
  font-family: 'Montserrat-SemiBold';
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}

.BR_SegmentBtnOn {
  background: #FFFFFF;
  color: #0D2C4B;
}

.BR_Pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Scoped to the bracket row: these sit on the dark card, and the rate pills on
   the scenario step share the .BR_Pill class over a white one. */
.BR_Pills .BR_Pill {
  padding: 7px 12px;
  border-radius: 999px;
  font-family: 'Montserrat-SemiBold';
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.22);
  cursor: pointer;
}

.BR_Pills .BR_PillOn {
  background: #FFFFFF;
  color: #0D2C4B;
  border-color: #FFFFFF;
}

.BR_MiniTable {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Montserrat-Regular';
  font-size: 12px;
}

.BR_MiniTable td {
  padding: 6px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.75);
}

.BR_MiniTable td + td {
  text-align: right;
  font-family: 'Montserrat-SemiBold';
  color: #FFFFFF;
}

.BR_MiniTable tr.BR_MiniStrong td {
  font-family: 'Montserrat-Bold';
  color: #FFFFFF;
}

.BR_DetailNote {
  margin: 0;
  font-family: 'Montserrat-Regular';
  font-size: 11px;
  line-height: 17px;
  color: rgba(255, 255, 255, 0.6);
}

/* Today / After the move summary cards */
.BR_SummaryCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 24px;
  background-color: #FFFFFF;
  border: 1px solid #E9EAEB;
  border-radius: 16px;
  box-shadow: 0px 1px 1.5px rgba(10, 13, 18, 0.1), 0px 1px 1px rgba(10, 13, 18, 0.1);
}

.BR_SummaryTitle {
  width: 100%;
  font-family: 'Montserrat-Regular';
  font-size: 14px;
  line-height: 20px;
  color: #181D27;
}

.BR_SummaryTitleAfter {
  color: #079455;
}

.BR_SummaryHeadline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
}

.BR_SummaryRate {
  width: 100%;
  font-family: 'Montserrat-Bold';
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -0.72px;
  color: #181D27;
}

.BR_SummaryRateAfter {
  color: #079455;
}

.BR_SummaryCaption {
  width: 100%;
  font-family: 'Montserrat-Regular';
  font-size: 12px;
  line-height: 18px;
  color: #717680;
}

.BR_SummaryRows {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.BR_SummaryRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 0;
  border-top: 1px solid #D5D7DA;
  font-family: 'Montserrat-Medium';
  font-size: 14px;
  line-height: 20px;
  color: #181D27;
}

/* Download PDF row - the web app's share row, carrying the one action here */
/* "Take it with you" - the printout card that closes the results pane. */
.BR_TakeCard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 16px;
  background-color: #FFFFFF;
  border: 1px solid #E9EAEB;
  border-radius: 16px;
  box-shadow: 0px 1px 1.5px rgba(10, 13, 18, 0.1), 0px 1px 1px rgba(10, 13, 18, 0.1);
}

.BR_TakeEyebrow {
  font-family: 'Montserrat-SemiBold';
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.4px;
  color: #717680;
}

.BR_ShareRow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 24px;
  background-color: #0B2545;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.BR_ShareLabel {
  font-family: 'Montserrat-SemiBold';
  font-size: 15px;
  line-height: 20px;
  color: #FFFFFF;
}

.BR_ShareIcon {
  width: 10px;
  height: auto;
}

/* Hands the scenario to the agent who shared the link. */
/* Back sits beside the agent CTA on the results screen; the CTA keeps the
   row's remaining width. */
.BR_ResultsActions {
  margin-top: 16px;
}

/* The results screen has no wizard footer of its own, so this row is it: the
   client can hand the estimate over from wherever they have read to, the same
   way the steps before it always had their button to hand. */
.BR_LayoutOne .BR_ResultsActions {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  z-index: 20;
  margin-top: 16px;
  /* Out to the edges of the pane: a card's shadow is wider than the card, and
     anything the row does not cover shows up beside the buttons. */
  margin-left: -14px;
  margin-right: -14px;
  padding: 12px 14px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  /* The page's own white, so the row reads as part of it rather than as a band
     laid over it - and opaque, so the card's shadow ends underneath rather
     than bleeding across the buttons. */
  background-color: #FFFFFF;
  border-top: 1px solid #E9EAEB;
}

.BR_ResultsActions .BR_AgentCta {
  flex: 1 1 auto;
  margin-top: 0;
}

.BR_AgentCta {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 14px 16px;
  border: none;
  border-radius: 8px;
  background-color: #278AE5;
  font-family: 'Montserrat-SemiBold';
  font-size: 15px;
  line-height: 20px;
  color: #FFFFFF;
  cursor: pointer;
}

/* The converter takes a few seconds; the row says so and stops taking clicks
   rather than leaving the tap looking dropped. */
.BR_ShareRowBusy {
  cursor: default;
  opacity: 0.6;
  pointer-events: none;
}

/* Start-over confirmation modal */
.BR_ModalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  background-color: rgba(74, 81, 93, 0.71);
}

.BR_Modal {
  max-width: 380px;
  width: calc(100% - 32px);
  margin: 200px auto;
  padding: 20px;
  background: #fafafa;
  border-radius: 6px;
  box-shadow: 0px 0px 12px 3px #5F5F5F;
}

.BR_ModalClose {
  display: flex;
  justify-content: flex-end;
}

.BR_ModalClose img {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

/* Confirmation that replaces the lead sheet once the enquiry is away. */
.BR_SentModal {
  max-width: 420px;
  margin: 120px auto;
  background: #FFFFFF;
  border-radius: 14px;
  padding: 10px 20px 20px;
}

.BR_SentGrab {
  width: 36px;
  height: 4px;
  margin: 2px auto 14px;
  border-radius: 99px;
  background-color: #D5D7DA;
}

.BR_SentTitle {
  font-family: 'Montserrat-Bold';
  font-size: 20px;
  line-height: 28px;
  color: #181D27;
}

.BR_SentBody {
  font-family: 'Montserrat-Regular';
  font-size: 13px;
  line-height: 19px;
  color: #717680;
  margin: 6px 0 18px;
}

/* Lead sheet - hands the finished scenario to the agent who shared the link. */
.BR_LeadModal {
  max-width: 420px;
  margin: 40px auto;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  background: #FFFFFF;
  border-radius: 14px;
  padding: 18px 20px 20px;
}

.BR_LeadTitle {
  font-family: 'Montserrat-Bold';
  font-size: 22px;
  line-height: 30px;
  color: #181D27;
}

.BR_LeadIntro {
  font-family: 'Montserrat-Regular';
  font-size: 13px;
  line-height: 19px;
  color: #717680;
  margin: 6px 0 16px;
}

.BR_LeadModal .BR_Field {
  margin-bottom: 12px;
}

.BR_LeadInputWrap {
  padding-left: 12px;
}

/* The consent gate is a real switch: unchecked sends no scenario figures. */
.BR_LeadConsent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  margin: 4px 0 16px;
  border: 1px solid #E9EAEB;
  border-radius: 12px;
  background-color: #FAFAFA;
  cursor: pointer;
}

.BR_LeadConsentOn {
  border-color: #0B2545;
  background-color: #F5F8FC;
}

.BR_LeadCheck {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  border: 1px solid #D5D7DA;
  border-radius: 5px;
  background-color: #FFFFFF;
  font-size: 12px;
  line-height: 1;
  color: transparent;
}

.BR_LeadConsentOn .BR_LeadCheck {
  border-color: #0B2545;
  background-color: #0B2545;
  color: #FFFFFF;
}

.BR_LeadConsentText {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.BR_LeadConsentTitle {
  font-family: 'Montserrat-SemiBold';
  font-size: 14px;
  line-height: 20px;
  color: #181D27;
}

.BR_LeadConsentDetail {
  font-family: 'Montserrat-Regular';
  font-size: 12px;
  line-height: 17px;
  color: #717680;
}

.BR_LeadSend,
.BR_LeadDismiss {
  display: block;
  width: 100%;
  padding: 13px 16px;
  border-radius: 8px;
  font-family: 'Montserrat-SemiBold';
  font-size: 15px;
  line-height: 20px;
  cursor: pointer;
}

.BR_LeadSend {
  border: none;
  background-color: #278AE5;
  color: #FFFFFF;
}

.BR_LeadSend:disabled {
  background-color: #E9EAEB;
  color: #A4A7AE;
  cursor: default;
}

.BR_LeadDismiss {
  margin-top: 10px;
  border: 1px solid #D5D7DA;
  background-color: #FFFFFF;
  color: #414651;
}

.BR_LeadFine {
  font-family: 'Montserrat-Regular';
  font-size: 11px;
  line-height: 16px;
  color: #717680;
  margin-top: 14px;
}

/* On a phone the lead sheet and the confirmation that replaces it both rise from
   the bottom edge instead of floating mid screen: they are the only thing on
   screen while open, and docked low their fields and buttons sit within thumb
   reach. The two are one flow - a sheet that sent, then a card mid-screen would
   read as the answer having moved.
   Anchored with position rather than by making the overlay a flex container -
   the overlay is hidden by a `displaynone` class, and any `display` set here
   would have to out-specify it and would pin the sheet open. */
@media screen and (max-width: 767px) {
  #br_lead_modal .BR_LeadModal,
  #br_sent_modal .BR_SentModal,
  #br_legal_modal .BR_LegalModal {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    /* A strip of the estimate stays visible above, so a sheet reads as a layer
       over the answer rather than a page that replaced it. */
    max-height: 88vh;
    overflow-y: auto;
    border-radius: 16px 16px 0 0;
    /* Clear of the home indicator on a notched phone. */
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    animation: brSheetRise 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  }

  /* The grab bar every sheet carries. Drawn here for the lead sheet rather than
     added to its markup; the confirmation already has a real one (.BR_SentGrab),
     so it keeps its own and only needs the room above it trimmed to match. */
  #br_lead_modal .BR_LeadModal {
    padding-top: 8px;
  }

  #br_lead_modal .BR_LeadModal::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    margin: 0 auto 6px;
    border-radius: 99px;
    background-color: #D5D7DA;
  }
}

/* While a sheet is open the page under it holds still: scrolling the estimate
   behind it is what makes the sheet look like it has swallowed the screen. */
body.BR_SheetOpen {
  overflow: hidden;
}

/* The sheet follows the thumb as it is dragged down, and springs back when it
   is let go short of the distance that dismisses it. */
#br_lead_modal .BR_LeadModal,
#br_sent_modal .BR_SentModal,
#br_legal_modal .BR_LegalModal {
  touch-action: pan-y;
}

@keyframes brSheetRise {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.BR_ModalBrief {
  font-family: 'Montserrat-Medium';
  font-size: 16px;
  line-height: 24px;
  color: #181D27;
  text-align: center;
  margin: 12px 0 20px;
}

.BR_ModalButton {
  display: block;
  width: 100%;
  height: 44px;
  margin-bottom: 10px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Montserrat-SemiBold';
  font-size: 14px;
}

.BR_ModalButtonYes {
  background-color: #278AE5;
  color: #FFFFFF;
}

.BR_ModalButtonNo {
  background-color: #E9EAEB;
  color: #181D27;
}

/* ------------------------------------------------ add-a-debt (scenario) */

.BR_PayoffAdd {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  padding: 12px 0;
  background-color: #FFFFFF;
  border: 1px solid #E9EAEB;
  border-radius: 100px;
  cursor: pointer;
  flex-shrink: 0;
  color: #508AFF;
  font-family: 'Montserrat-SemiBold';
  font-size: 18px;
  line-height: 20px;
}

.BR_AddDebtModal {
  text-align: left;
  max-width: 420px;
}

.BR_AddDebtTitle {
  font-family: 'Montserrat-Bold';
  font-size: 20px;
  line-height: 28px;
  color: #171B26;
}

.BR_AddDebtSubtitle {
  font-family: 'Montserrat-Regular';
  font-size: 13px;
  line-height: 20px;
  color: #6B7280;
  margin-bottom: 16px;
}

.BR_AddDebtModal .BR_Field {
  margin-top: 16px;
}

.BR_ChipSelected {
  border: 1.5px solid #508AFF;
}

.BR_AddDebtSubmit {
  width: 100%;
  margin-top: 20px;
  padding: 14px 0;
  border: none;
  border-radius: 8px;
  background-color: #508AFF;
  opacity: 0.45;
  color: #FFFFFF;
  font-family: 'Montserrat-SemiBold';
  font-size: 14px;
  letter-spacing: 0.4px;
  cursor: default;
}

.BR_AddDebtSubmitReady {
  opacity: 1;
  cursor: pointer;
}

#br_add_debt_modal {
  overflow-y: auto;
}

.BR_AddDebtModal {
  margin: 48px auto;
}

.BR_ProgressStep {
  cursor: pointer;
}

/* The lead-capture bar is the shared mobile-only fixed footer; on this calc it
   belongs to the Results step alone, not the Scenario step's kept results. */
.BR_Layout:not(.BR_OnResults) .extrapayyesxs {
  display: none;
}

/* The shared bar paints .btntext navy with !important - on its own navy
   background the prompt disappears without an equally weighted override. */
.BR_ResultsPane .extrapayyesxs .btntext {
  color: #fff !important;
}
.BR_ResultsPane .extrapayyesxs {
  gap: 16px;
}

/* The shared stylesheet keeps the lead bar mobile-only (fixed to the viewport
   bottom). On this calc it also closes the desktop results column, so above
   the shared breakpoint it renders in-flow as a card instead. */
@media screen and (min-width: 768px) {
  .BR_Layout.BR_OnResults .BR_ResultsPane .extrapayyesxs {
    display: flex;
    position: static;
    border-radius: 16px;
    margin-top: 16px;
  }
}

/* ---------------------------------------------------------------- landing */

.BR_Landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 92vh;
  width: 100%;
  padding: 12px 14px 24px;
  background: #FAFAFA;
  font-family: 'DM Sans', 'Montserrat-Regular', sans-serif;
}

.BR_LandingBody {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 412px;
}

.BR_LandingHeadline {
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  color: #181D27;
}

.BR_LandingBlend {
  font-weight: 800;
  font-style: italic;
  color: #278AE5;
}

.BR_LandingSub {
  font-size: 14px;
  line-height: 20px;
  color: #414651;
  margin-top: -8px;
}

.BR_LandingCard {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  width: 100%;
  padding: 36px 24px;
  background: #fff;
  border: 1px solid #E9EAEB;
  border-radius: 24px;
  box-shadow: 0px 4px 6px -1px rgba(10, 13, 18, 0.1), 0px 2px 4px -2px rgba(10, 13, 18, 0.06);
}

/* One row that overflows its box into the card padding, per the design
   (the Figma row is 364px wide holding 385px of pills, centered). */
.BR_LandingPills {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: nowrap;
}

.BR_LandingPill {
  padding: 10px 16px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 420px) {
  .BR_LandingPills { gap: 6px; }
  .BR_LandingPill { padding: 10px 12px; font-size: 13px; }
}

@media (max-width: 374px) {
  .BR_LandingPill { font-size: 12px; }
}

.BR_LandingPillNavy { background: #111C35; }
.BR_LandingPillBlue { background: #4D85E6; }
.BR_LandingPillYellow { background: #ECD06F; color: #111C35; }

.BR_LandingArrow {
  width: 16px;
  height: 16px;
  margin: 4px 0;
}

.BR_LandingRate {
  font-weight: 700;
  font-size: 56px;
  line-height: 64px;
  letter-spacing: -1.5px;
  color: #111C35;
  text-align: center;
}

.BR_LandingRateCaption {
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
  color: #717680;
  text-align: center;
  margin-top: -16px;
}

.BR_LandingCopy {
  font-size: 14px;
  line-height: 20px;
  color: #414651;
}

.BR_LandingSteps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 21px 17px;
  background: #fff;
  border: 1px solid #E9EAEB;
  border-radius: 12px;
  box-shadow: 0px 4px 6px -1px rgba(10, 13, 18, 0.1), 0px 2px 4px -2px rgba(10, 13, 18, 0.06);
}

.BR_LandingStep {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding-bottom: 10px;
  border-bottom: 1px solid #E4E7EC;
}

.BR_LandingStep:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.BR_LandingStepBadge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #101828;
  color: #fff;
  font-weight: 700;
  font-size: 8px;
}

.BR_LandingStepText {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.BR_LandingStepTitle {
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: #101828;
}

.BR_LandingStepDesc {
  font-size: 14px;
  line-height: 20px;
  color: #475467;
}

.BR_LandingStart {
  width: 100%;
  max-width: 412px;
  margin-top: auto;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: #278AE5;
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}

.BR_Landing .BR_LandingBody + .BR_LandingStart {
  margin-top: 24px;
}

/* The button carries the wizard's own arrow, so the label needs to sit beside
   it rather than fill the button on its own. */
.BR_PreviewPage .BR_LandingStart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.BR_LandingStartArrow {
  width: 16px;
  height: auto;
}

.BR_LandingPrivacy {
  width: 100%;
  max-width: 412px;
  margin-top: 14px;
  font-family: 'Montserrat-Regular';
  font-size: 12px;
  line-height: 18px;
  color: #717680;
}

.BR_LandingPrivacy strong {
  font-family: 'Montserrat-SemiBold';
  font-weight: 600;
  color: #414651;
}

@media (min-height: 700px) {
  .BR_Landing .BR_LandingBody + .BR_LandingStart {
    margin-top: auto;
  }
}

/* The shared HeaderContainer goes position:fixed below 1024px and its height
   varies with how the tagline wraps - the clearance is measured in JS
   (clearSharedHeader) instead of hardcoded here. */

/* index.css reserves 75px under the footer for the fixed bottom bar - the one
   asking what the house is worth. This calculator carries that bar, so the room
   stays; taking it back is what crops the footer under it. Preview is the
   exception: neither the bar nor the footer is drawn there. */
@media screen and (max-width: 767px) {
  /* The bar asking what the house is worth is fixed to the bottom of the
     screen, but it only rides the results pane - so the room index.css keeps
     under the footer for it is only room worth keeping there. Anywhere else it
     reads as blank space below the page, and preview draws neither. */
  .extrapayfooter,
  .BR_PreviewPage .extrapayfooter {
    margin-bottom: 0;
  }

  #br_layout.BR_OnResults ~ .extrapayfooter {
    margin-bottom: 75px;
  }
}

/* index.css outlines the "what's your house worth" bar in white. Across the
   foot of a phone that outline reads as a gap down each edge rather than as a
   card's edge, so this calculator drops it. */
.extrapayyesxs {
  border: 0;
}

/* index.css draws an inset bottom shadow on every focused text input -
   the field border already signals focus here. */
input.BR_Input:focus {
  box-shadow: none;
}

/* Chrome's autofill tint, painted over with the inset-fill trick. */
input.BR_Input:-webkit-autofill,
input.BR_Input:-webkit-autofill:hover,
input.BR_Input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset;
  box-shadow: 0 0 0 1000px #FFFFFF inset;
  -webkit-text-fill-color: #181D27;
}

/* Landing card intro loop, exported from the Figma prototype (node 498:5670):
   pills drop in staggered with a spring, the arrow pops, the caption rises,
   and the rate drops in and pops - one 5s cycle, looping. */
.BR_Landing .BR_LandingPillNavy {
  animation: brPillDrop1 5s linear infinite;
}

.BR_Landing .BR_LandingPillBlue {
  animation: brPillDrop2 5s linear infinite;
}

.BR_Landing .BR_LandingPillYellow {
  animation: brPillDrop3 5s linear infinite;
}

.BR_Landing .BR_LandingArrow {
  animation: brArrowPop 5s linear infinite;
}

.BR_Landing .BR_LandingRateCaption {
  animation: brCaptionRise 5s linear infinite;
}

.BR_Landing .BR_LandingRate {
  animation: brRateDrop 5s linear infinite;
}

@keyframes brPillDrop1 {
  0% { opacity: 0; translate: 0 -60px; animation-timing-function: linear(0, 0.078, 0.2737, 0.5283, 0.7893, 1.0162, 1.1837, 1.2818, 1.3134, 1.2904, 1.23, 1.1505, 1.0685, 0.9969, 0.9438, 0.9123, 0.9018, 0.9085, 0.9272, 0.952, 0.9777, 1.0003, 1.0172, 1.0273, 1.0308, 1.0288, 1.023, 1.0153, 1.0072, 1.0001, 0.9947, 0.9915, 0.9904, 0.9909, 0.9927, 0.9951, 0.9977, 0.9999, 1.0016, 1.0026, 1.003, 1.0029, 1.0023, 1.0016, 1.0008, 1, 0.9995, 0.9992, 0.9991, 0.9991, 0.9993); }
  1.75% { opacity: 1; }
  14% { translate: 0 0; }
  100% { opacity: 1; translate: 0 0; }
}

@keyframes brPillDrop2 {
  0%, 9.98% { opacity: 0; translate: 0 -60px; animation-timing-function: linear(0, 0.078, 0.2737, 0.5283, 0.7893, 1.0162, 1.1837, 1.2818, 1.3134, 1.2904, 1.23, 1.1505, 1.0685, 0.9969, 0.9438, 0.9123, 0.9018, 0.9085, 0.9272, 0.952, 0.9777, 1.0003, 1.0172, 1.0273, 1.0308, 1.0288, 1.023, 1.0153, 1.0072, 1.0001, 0.9947, 0.9915, 0.9904, 0.9909, 0.9927, 0.9951, 0.9977, 0.9999, 1.0016, 1.0026, 1.003, 1.0029, 1.0023, 1.0016, 1.0008, 1, 0.9995, 0.9992, 0.9991, 0.9991, 0.9993); }
  11.73% { opacity: 1; }
  24% { translate: 0 0; }
  100% { opacity: 1; translate: 0 0; }
}

@keyframes brPillDrop3 {
  0%, 19.97% { opacity: 0; translate: 0 -60px; animation-timing-function: linear(0, 0.078, 0.2737, 0.5283, 0.7893, 1.0162, 1.1837, 1.2818, 1.3134, 1.2904, 1.23, 1.1505, 1.0685, 0.9969, 0.9438, 0.9123, 0.9018, 0.9085, 0.9272, 0.952, 0.9777, 1.0003, 1.0172, 1.0273, 1.0308, 1.0288, 1.023, 1.0153, 1.0072, 1.0001, 0.9947, 0.9915, 0.9904, 0.9909, 0.9927, 0.9951, 0.9977, 0.9999, 1.0016, 1.0026, 1.003, 1.0029, 1.0023, 1.0016, 1.0008, 1, 0.9995, 0.9992, 0.9991, 0.9991, 0.9993); }
  21.72% { opacity: 1; }
  34% { translate: 0 0; }
  100% { opacity: 1; translate: 0 0; }
}

@keyframes brArrowPop {
  0%, 31.72% { opacity: 0; translate: 0 -20px; scale: 0.6; animation-timing-function: cubic-bezier(0.3, -1.2, 0.45, 1); }
  39.72% { opacity: 1; }
  47.32% { scale: 1; }
  51.72% { translate: 0 0; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes brCaptionRise {
  0%, 39.32% { opacity: 0; translate: 0 -84px; animation-timing-function: cubic-bezier(0.05, 0.4, 0.5, 1); }
  47.59% { opacity: 1; }
  51.72% { translate: 0 0; }
  100% { opacity: 1; translate: 0 0; }
}

@keyframes brRateDrop {
  0%, 63.1% { opacity: 0; translate: 0 -120px; scale: 0.25; animation-timing-function: cubic-bezier(0.58, 0.26, 1, 1); }
  66.47% { translate: 0 0; scale: 0.25; animation-timing-function: cubic-bezier(0.15, 0.85, 0.3, 1); }
  67.47% { translate: 0 -4px; scale: 1; }
  71.38% { opacity: 1; }
  100% { opacity: 1; translate: 0 -4px; scale: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .BR_Landing .BR_LandingPillNavy,
  .BR_Landing .BR_LandingPillBlue,
  .BR_Landing .BR_LandingPillYellow,
  .BR_Landing .BR_LandingArrow,
  .BR_Landing .BR_LandingRateCaption,
  .BR_Landing .BR_LandingRate,
  #br_lead_modal .BR_LeadModal,
  #br_sent_modal .BR_SentModal,
  #br_legal_modal .BR_LegalModal {
    animation: none;
  }
}

/* Preview reads the opening screen at the same column as every screen after it
   - 520px counting the page inset, widening to a full 520px of text once the
   window has room for it. The app's own landing keeps its narrower body. */
.BR_PreviewPage .BR_Landing {
  padding-top: 32px;
}

.BR_PreviewPage .BR_LandingBody {
  gap: 18px;
}

.BR_PreviewPage .BR_LandingBody,
.BR_PreviewPage .BR_Landing .BR_LandingStart,
.BR_PreviewPage .BR_LandingPrivacy,
.BR_PreviewPage .BR_Landing .BR_PageDisclaimer {
  max-width: 492px;
}

/* The prototype reads the three debts as one family - a mortgage, then two
   steps away from it - rather than as three unrelated brand colours. */
.BR_PreviewPage .BR_LandingPillNavy {
  background: #0B2545;
}

.BR_PreviewPage .BR_LandingPillBlue {
  background: #2C4A6E;
}

.BR_PreviewPage .BR_LandingPillYellow {
  background: #8A4B44;
  color: #FFFFFF;
}

/* The card's contents each arrive on a delay, and every one of them starts at
   opacity 0. Looping means the rate - the point of the card - is missing for
   three seconds out of every five, and anything that suspends animation (an
   inactive tab, a phone in low-power mode) holds the card at that first frame
   with nothing on it. One pass, holding the end, leaves the card readable
   whether or not the motion ever plays. */
.BR_PreviewPage .BR_Landing .BR_LandingPillNavy,
.BR_PreviewPage .BR_Landing .BR_LandingPillBlue,
.BR_PreviewPage .BR_Landing .BR_LandingPillYellow,
.BR_PreviewPage .BR_Landing .BR_LandingArrow,
.BR_PreviewPage .BR_Landing .BR_LandingRateCaption,
.BR_PreviewPage .BR_Landing .BR_LandingRate {
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

.BR_LandingEyebrow {
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #278AE5;
}

/* The opening line is the page's own headline rather than a card's, so it is
   set at display size and grows once the window is past a phone's width.
   The sizes are the prototype's scaled by 0.92: the DM Sans this app carries
   (assets/fonts/DMSans, no optical-size axis) sets about 12% wider than the one
   the prototype pulls from Google, so the prototype's own 32/38px would break
   "You pay" onto the second line. Scaled, the headline holds the same lines. */
.BR_PreviewPage .BR_LandingHeadline {
  font-size: 29px;
  line-height: 37px;
  letter-spacing: -0.8px;
}

.BR_PreviewPage .BR_LandingSub {
  margin-top: 0;
  font-size: 15px;
  line-height: 23px;
}

@media screen and (min-width: 560px) {
  .BR_PreviewPage .BR_Landing {
    padding: 44px 14px 32px;
  }

  .BR_PreviewPage .BR_LandingBody,
  .BR_PreviewPage .BR_Landing .BR_LandingStart,
  .BR_PreviewPage .BR_LandingPrivacy,
  .BR_PreviewPage .BR_Landing .BR_PageDisclaimer {
    max-width: 520px;
  }

  .BR_PreviewPage .BR_LandingHeadline {
    font-size: 35px;
    line-height: 41px;
  }
}

/* Narrower than a modern phone the headline runs to four lines and crowds the
   card under it, so it steps down with the screen. */
@media screen and (max-width: 359px) {
  .BR_PreviewPage .BR_LandingHeadline {
    font-size: 26px;
    line-height: 34px;
  }
}

/* The line every screen ends on, and the sheet behind its link. */
.BR_PageDisclaimer {
  width: 100%;
  margin: 4px 0 0;
  font-family: 'Montserrat-Regular';
  font-size: 11px;
  line-height: 16px;
  color: #A4A7AE;
}

.BR_LegalLink {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: #278AE5;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* The wizard's line sits under the step it belongs to, clear of the footer bar
   that follows it; the results screen carries its own inset already. */
.BR_LayoutOne .BR_Viewport > .BR_PageDisclaimer {
  padding: 0 14px 4px;
}

/* The steps empty out on the results screen but their chrome stays, so the
   wizard's line would be left sitting under the progress bar at the top of the
   answer. The results screen ends on its own copy instead. */
.BR_LayoutOne.BR_OnResults .BR_Viewport > .BR_PageDisclaimer {
  display: none;
}

.BR_LegalModal {
  max-width: 520px;
  margin: 40px auto;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  background: #FFFFFF;
  border-radius: 14px;
  padding: 10px 20px 20px;
}

.BR_LegalTitle {
  font-family: 'Montserrat-Bold';
  font-size: 20px;
  line-height: 28px;
  color: #181D27;
}

/* The legal text scrolls inside the sheet, so the Close button stays in reach
   however long the disclaimer runs. */
.BR_Legal {
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-height: 52vh;
  overflow-y: auto;
  margin: 12px 0 16px;
  padding-right: 2px;
}

.BR_Legal p {
  margin: 0;
  font-family: 'Montserrat-Regular';
  font-size: 12px;
  line-height: 18px;
  color: #414651;
}

.BR_Legal strong {
  font-family: 'Montserrat-SemiBold';
  font-weight: 600;
  color: #181D27;
}

.BR_LegalModal .BR_LeadDismiss {
  margin-top: 0;
}

/* ------------------------------------------------- Debt to Dreamhome build */

/* The equity chapter opens the answer: what selling leaves them, split between
   the debts it clears and the deposit it becomes. The bar's two colours are the
   ones the debt stack and the new mortgage already carry further down, so it
   reads without a legend. */
.BR_DreamPage .BR_EquityValue {
  font-family: 'Montserrat-Bold';
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -0.7px;
  color: #181D27;
}

.BR_DreamPage .BR_Split {
  display: flex;
  height: 34px;
  margin-top: 4px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #E9EAEB;
}

.BR_DreamPage .BR_SplitDebts {
  background-color: #8A4B44;
}

.BR_DreamPage .BR_SplitDown {
  background-color: #1B5E4A;
}

.BR_DreamPage .BR_SplitKeys {
  display: flex;
  gap: 14px;
  margin-top: 10px;
}

.BR_DreamPage .BR_SplitKey {
  display: flex;
  gap: 8px;
}

.BR_DreamPage .BR_SplitDot {
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 2px;
}

.BR_DreamPage .BR_SplitDotDebts {
  background-color: #8A4B44;
}

.BR_DreamPage .BR_SplitDotDown {
  background-color: #1B5E4A;
}

.BR_DreamPage .BR_SplitValue {
  font-family: 'Montserrat-SemiBold';
  font-size: 14px;
  line-height: 20px;
  color: #181D27;
}

.BR_DreamPage .BR_SplitLabel {
  font-size: 12px;
  line-height: 18px;
  color: #717680;
}

.BR_DreamPage .BR_Disclose {
  width: 100%;
  margin-top: 14px;
  padding: 10px;
  border: 1px solid #E9EAEB;
  border-radius: 9px;
  background-color: #FAFAFA;
  font-family: 'Montserrat-SemiBold';
  font-size: 13px;
  line-height: 18px;
  color: #414651;
  cursor: pointer;
}

.BR_DreamPage .BR_Waterfall {
  margin-top: 12px;
}

.BR_DreamPage .BR_WaterfallRow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid #E9EAEB;
  font-family: 'Montserrat-Medium';
  font-size: 14px;
  line-height: 20px;
  color: #181D27;
}

.BR_DreamPage .BR_WaterfallMinus span:last-child {
  color: #717680;
}

.BR_DreamPage .BR_WaterfallSub,
.BR_DreamPage .BR_WaterfallTotal {
  font-family: 'Montserrat-Bold';
}

/* Neither column is a payment, so the card carries no headline figure - the two
   of them side by side are the comparison. */
.BR_DreamPage .BR_AdjustedGrid {
  display: flex;
  gap: 10px;
}

.BR_DreamPage .BR_AdjustedColumn {
  flex: 1 1 0;
  min-width: 0;
}

.BR_DreamPage .BR_AdjustedHeading {
  font-family: 'Montserrat-SemiBold';
  font-size: 13px;
  line-height: 18px;
  color: #414651;
  padding-bottom: 6px;
  border-bottom: 1px solid #E9EAEB;
}

.BR_DreamPage .BR_AdjustedRow {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  font-size: 13px;
  line-height: 18px;
  color: #414651;
}

.BR_DreamPage .BR_AdjustedTotal {
  border-top: 1px solid #E9EAEB;
  font-family: 'Montserrat-Bold';
  color: #181D27;
}

.BR_DreamPage .BR_CardEyebrow {
  font-family: 'Montserrat-SemiBold';
  font-size: 12px;
  letter-spacing: 0.4px;
  color: #717680;
}

.BR_DreamPage .BR_CardTitle {
  font-family: 'Montserrat-Bold';
  font-size: 18px;
  line-height: 26px;
  color: #181D27;
}

/* The payment is principal and interest on both sides, which the figure alone
   does not say - it reads implausibly low without it. */
.BR_DreamPage .BR_TotalUnit {
  margin-left: 4px;
  font-size: 11px;
  line-height: 16px;
  color: #717680;
}

/* The figure and its unit read as one line, with the caption on its own
   beneath - so the row wraps rather than stacking all three. */
.BR_DreamPage .BR_TotalGroup {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0;
  /* The caption fills the row on its own line, so centring the group's boxes
     is not enough - the text inside that full-width box centres too. */
  text-align: center;
}

.BR_DreamPage .BR_TotalCaption {
  flex-basis: 100%;
}

/* The block's own title fits the column at the prototype's size; a notch
   larger and "New mortgage" takes two lines of it. */
.BR_DreamPage .BR_NewMortgage {
  padding: 14px 12px;
}

.BR_DreamPage .BR_NewMortgageTitle,
.BR_DreamPage .BR_NewMortgageValue {
  font-size: 15px;
  line-height: 22px;
}

.BR_DreamPage .BR_CompareNote {
  margin-bottom: 4px;
}

/* The derivation sits inside the dark first-year card, so its closing line is
   drawn the way every other total on that card is - not in the ink a white
   card would use. */
.BR_DreamPage .BR_ApprSplitTotal td {
  font-family: 'Montserrat-Bold';
  color: #FFFFFF;
}

.BR_DreamPage .BR_DetailHeadingSub {
  margin-top: 14px;
}

/* Measured against the prototype: the card the two columns sit in, the columns
   themselves, and every line inside them. */
.BR_DreamPage .BR_AdjustedLede {
  margin-bottom: 2px;
}

.BR_DreamPage .BR_AdjustedColumn {
  padding: 10px 11px;
  border: 1px solid #E9EAEB;
  border-radius: 10px;
  background-color: #FAFAFA;
}

.BR_DreamPage .BR_AdjustedHeading {
  padding-bottom: 4px;
  border-bottom: 0;
  font-family: 'Montserrat-Bold';
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.2px;
  color: #717680;
}

.BR_DreamPage .BR_AdjustedRow {
  gap: 6px;
  padding: 3px 0;
  font-size: 12px;
  line-height: 17px;
  color: #181D27;
}

.BR_DreamPage .BR_AdjustedTotal {
  margin-top: 3px;
  padding-top: 6px;
  border-top: 1px solid #E9EAEB;
}

.BR_DreamPage .BR_AdjustedCard .BR_DetailNote {
  font-size: 12px;
  line-height: 18px;
  color: #717680;
}

/* The two figures under the split bar, at the prototype's size. */
.BR_DreamPage .BR_SplitValue {
  font-family: 'Montserrat-Bold';
  font-size: 17px;
  line-height: 22px;
}

.BR_DreamPage .BR_SplitLabel {
  font-size: 12px;
  line-height: 16px;
}

.BR_DreamPage .BR_Disclose {
  font-family: 'Montserrat-Regular';
  font-size: 16px;
  line-height: 22px;
}

.BR_DreamPage .BR_EquityCard,
.BR_DreamPage .BR_AdjustedCard {
  padding: 14px;
}

/* The last build read the trade first and the chart second, and pulled both out
   of the flow to do it. This one is written in the order it reads - the equity
   chapter, then what it costs, then the chart - so the source is the order. */
.BR_DreamPage .BR_ScreenResults .BR_TradeIntro,
.BR_DreamPage .BR_LayoutOne .BR_ScreenResults .BR_IncreaseCard {
  order: 0;
}

/* The line that reads the waterfall back to them, under the last row. */
.BR_DreamPage .BR_WaterfallNote {
  margin-top: 10px;
  font-size: 12px;
  line-height: 18px;
  color: #717680;
}

/* The bar's forest share and the new mortgage block are the same green on
   purpose: that is what lets the split read without a legend. */
.BR_DreamPage .BR_NewMortgage {
  background-color: #1B5E4A;
}

/* The two totals belong under the two columns, so the row that carries them is
   laid out on the same track as the chart: equal columns with the arrow's width
   between them. Left to its own fixed widths it centres each figure on the row
   instead, which sits them a couple of dozen pixels inside their own columns. */
.BR_DreamPage .BR_TotalsRow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  width: 100%;
  max-width: none;
}

.BR_DreamPage .BR_TotalsSpacer {
  width: 28px;
}

.BR_DreamPage .BR_TotalGroup {
  width: auto;
}

/* Measured off the prototype: the labels sit a shade lighter than the figures
   beside them, and the gain being taken off is quieter still - it is the
   subtraction, not the answer. */
.BR_DreamPage .BR_AdjustedRow > span:first-child {
  font-family: 'Montserrat-Regular';
  color: #414651;
}

.BR_DreamPage .BR_AdjustedRow > span:last-child {
  font-family: 'Montserrat-SemiBold';
  color: #181D27;
}

.BR_DreamPage .BR_AdjustedMinus > span:last-child {
  color: #717680;
}

.BR_DreamPage .BR_AdjustedTotal > span:first-child {
  font-family: 'Montserrat-Bold';
  color: #181D27;
}

/* The two keys under the split bar take half the row each, so the second sits
   under the share it names rather than trailing the first. */
.BR_DreamPage .BR_SplitKey {
  flex: 1 1 0;
  min-width: 0;
}

/* The after side is a column now: the new mortgage, and under it every payment
   the move leaves running. It sits on the chart's own track, so the wrapper
   takes the column the block used to. */
.BR_DreamPage .BR_CompareGrid > .BR_AfterColumn {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  min-width: 0;
}

.BR_DreamPage .BR_KeptStack {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Inside that column the block is no longer the grid item, so it stops sharing
   the row's width and takes the height the chart gives it. */
.BR_DreamPage .BR_AfterColumn > .BR_NewMortgage {
  flex: 0 0 auto;
  align-self: stretch;
  width: auto;
  max-width: none;
}