/* Buying Costs redesign: page-specific rules transferred from the accepted prototype. */
.buying-costs-redesign .buying-costs {
      --navy: #102942;
      --navy-soft: #173b5b;
      --blue: #30619f;
      --ink: #17263a;
      --body: #445569;
      --mist: #eef3f6;
      --mist-deep: #e5ecef;
      --warm: #b98a45;
      --warm-dark: #8d6735;
      --warm-soft: #e6d6bc;
      --line: #dce3e8;
      --line-dark: #c6d1d8;
      --error: #9e302f;
      --white: #fff;
      --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
      --sans: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
      --shell: 1480px;
      --gutter: clamp(1.25rem, 4.4vw, 4rem);
    }

.buying-costs-redesign .buying-costs *,
.buying-costs-redesign .buying-costs *::before,
.buying-costs-redesign .buying-costs *::after {
      box-sizing: border-box;
    }

.buying-costs-redesign .buying-costs {
      scroll-behavior: smooth;
    }

.buying-costs-redesign .buying-costs {
      margin: 0;
      background: var(--white);
      color: var(--body);
      font: 1rem/1.6 var(--sans);
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }

.buying-costs-redesign .buying-costs ::selection {
      background: var(--warm-soft);
      color: var(--navy);
    }

.buying-costs-redesign .buying-costs img {
      display: block;
      max-width: 100%;
    }

.buying-costs-redesign .buying-costs a {
      color: inherit;
      text-decoration-thickness: 1px;
      text-underline-offset: .22em;
    }

.buying-costs-redesign .buying-costs button,
.buying-costs-redesign .buying-costs input {
      font: inherit;
    }

.buying-costs-redesign .buying-costs button {
      cursor: pointer;
    }

.buying-costs-redesign .buying-costs a:focus-visible,
.buying-costs-redesign .buying-costs button:focus-visible,
.buying-costs-redesign .buying-costs input:focus-visible,
.buying-costs-redesign .buying-costs summary:focus-visible {
      outline: 3px solid #9a6b2f;
      outline-offset: 4px;
    }

.buying-costs-redesign .buying-costs input:focus-visible {
      outline-offset: 1px;
    }

.buying-costs-redesign .buying-costs .shell {
      width: min(var(--shell), calc(100% - (2 * var(--gutter))));
      margin-inline: auto;
    }

.buying-costs-redesign .buying-costs .visually-hidden {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }

/* Compact page opening */
.buying-costs-redesign .buying-costs .page-opening {
      border-bottom: 1px solid var(--line);
      background: var(--white);
    }

.buying-costs-redesign .buying-costs .page-opening__grid {
      position: relative;
      min-height: 22rem;
      overflow: hidden;
    }

.buying-costs-redesign .buying-costs .page-opening__copy {
      position: relative;
      z-index: 4;
      display: flex;
      width: min(64%, 58rem);
      min-height: 22rem;
      flex-direction: column;
      justify-content: center;
      padding: clamp(3rem, 6vw, 5.5rem) clamp(1.5rem, 3vw, 3rem) clamp(3rem, 6vw, 5.5rem) 0;
    }

.buying-costs-redesign .buying-costs .page-opening h1 {
      margin: 0;
      color: var(--navy);
      font: 400 clamp(2.65rem, 4.4vw, 4.55rem)/1.02 var(--serif);
      letter-spacing: -.025em;
    }

.buying-costs-redesign .buying-costs .page-title__line {
      display: inline;
    }

.buying-costs-redesign .buying-costs .page-opening__rule {
      width: 5rem;
      height: 1px;
      margin-top: 1.6rem;
      background: var(--warm);
    }

.buying-costs-redesign .buying-costs .page-opening__image {
      --redesign-hero-fade-secondary: linear-gradient(0deg, rgba(16,41,66,.035), transparent 28%);
      position: absolute;
      z-index: 0;
      inset: 0 0 0 25%;
      min-height: 22rem;
      margin: 0;
      overflow: hidden;
      background: #e9eef1;
    }

.buying-costs-redesign .buying-costs .page-opening__image picture,
.buying-costs-redesign .buying-costs .page-opening__image img {
      display: block;
      width: 100%;
      height: 100%;
    }

.buying-costs-redesign .buying-costs .page-opening__image img {
      min-height: 22rem;
      object-fit: cover;
      object-position: center 63%;
      filter: saturate(.97) contrast(1.018) brightness(1.01);
    }

.buying-costs-redesign .buying-costs .page-opening__image::after {
      content: "";
      position: absolute;
      z-index: 3;
      right: 0;
      bottom: 0;
      left: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--warm) 0 10%, rgba(180,134,69,.13) 10% 100%);
      pointer-events: none;
    }

.buying-costs-redesign .buying-costs .page-opening__image-fade {
      display: none;
      position: absolute;
      z-index: 2;
      inset: 0;
      pointer-events: none;
    }

@media (min-width: 1181px) {
  .buying-costs-redesign .buying-costs .page-title__line {
          display: block;
          white-space: nowrap;
        }
}

/* Page-level shortcuts, derived from the accepted homepage fast paths. */
.buying-costs-redesign .buying-costs .page-shortcuts {
      position: relative;
      border-bottom: 1px solid var(--line);
      background: var(--white);
    }

.buying-costs-redesign .buying-costs .page-shortcuts__viewport {
      overflow-x: auto;
      scrollbar-width: none;
      scroll-snap-type: x proximity;
      -webkit-overflow-scrolling: touch;
    }

.buying-costs-redesign .buying-costs .page-shortcuts__viewport::-webkit-scrollbar {
      display: none;
    }

.buying-costs-redesign .buying-costs .page-shortcuts__grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

.buying-costs-redesign .buying-costs .page-shortcut {
      position: relative;
      display: block;
      min-height: 5.25rem;
      margin-right: 1.25rem;
      padding: 1.05rem 1.5rem 1rem .8rem;
      background: var(--white);
      text-decoration: none;
      scroll-snap-align: start;
    }

.buying-costs-redesign .buying-costs .page-shortcut:not(:last-child)::after {
      content: "";
      position: absolute;
      top: 1rem;
      right: 0;
      bottom: 1rem;
      width: 1px;
      background: var(--line);
    }

.buying-costs-redesign .buying-costs .page-shortcut__number {
      display: block;
      margin-bottom: .18rem;
      color: #8c98a2;
      font: 400 .88rem/1.35 var(--serif);
    }

.buying-costs-redesign .buying-costs .page-shortcut__title {
      display: block;
      color: var(--navy);
      font-size: .9rem;
      font-weight: 750;
      letter-spacing: -.01em;
      line-height: 1.3;
    }

.buying-costs-redesign .buying-costs .page-shortcut:hover,
.buying-costs-redesign .buying-costs .page-shortcut:focus-visible {
      background: #faf8f4;
      box-shadow: inset 1px 0 0 rgba(180,134,69,.55);
    }

.buying-costs-redesign .buying-costs .page-shortcut:hover .page-shortcut__title,
.buying-costs-redesign .buying-costs .page-shortcut:focus-visible .page-shortcut__title {
      color: #755735;
    }

.buying-costs-redesign .buying-costs .shortcut-scroll-hint {
      display: none;
    }

/* Calculator workspace */
.buying-costs-redesign .buying-costs .calculator-section {
      padding: clamp(2.25rem, 4vw, 4rem) 0 0;
      background: var(--white);
    }

.buying-costs-redesign .buying-costs .calculator-frame {
      border-top: 3px solid var(--navy);
      border-bottom: 3px solid var(--navy);
      background: var(--mist);
    }

.buying-costs-redesign .buying-costs .calculator-panel {
      scroll-margin-top: 1rem;
      padding: clamp(1.5rem, 3.5vw, 3rem);
    }

.buying-costs-redesign .buying-costs .calculator-panel + .calculator-panel {
      border-top: 1px solid var(--line-dark);
      background: rgba(255, 255, 255, .3);
    }

.buying-costs-redesign .buying-costs .calculator-panel__heading {
      margin: 0 0 .7rem;
      color: var(--navy);
      font: 400 clamp(1.75rem, 2.8vw, 2.7rem)/1.08 var(--serif);
      letter-spacing: -.015em;
    }

.buying-costs-redesign .buying-costs .calculator-panel__intro {
      max-width: 54ch;
      margin: 0 0 clamp(1.6rem, 3vw, 2.6rem);
      color: var(--body);
    }

.buying-costs-redesign .buying-costs .calculator-grid {
      display: grid;
      grid-template-columns: minmax(22rem, .9fr) minmax(27rem, 1.1fr);
      gap: clamp(1.5rem, 3.5vw, 3.6rem);
      align-items: start;
    }

.buying-costs-redesign .buying-costs #cash-purchase .calculator-grid {
      grid-template-columns: minmax(19rem, .66fr) minmax(28rem, 1.34fr);
    }

.buying-costs-redesign .buying-costs .calculator-inputs {
      min-width: 0;
      display: flex;
      flex-direction: column;
    }

.buying-costs-redesign .buying-costs .calculator-working-stack {
      display: contents;
    }

.buying-costs-redesign .buying-costs .calculator-inputs > .calculator-panel__intro {
      order: 1;
    }

.buying-costs-redesign .buying-costs .calculator-working-stack > .field-grid {
      order: 2;
    }

.buying-costs-redesign .buying-costs .calculator-results__title {
      margin: 0 0 1.15rem;
      color: var(--warm-dark);
      font-size: .72rem;
      font-weight: 800;
      letter-spacing: .13em;
      text-transform: uppercase;
    }

.buying-costs-redesign .buying-costs .field-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.15rem 1.2rem;
    }

.buying-costs-redesign .buying-costs .field-grid--cash {
      grid-template-columns: minmax(0, 1fr);
    }

.buying-costs-redesign .buying-costs .field {
      min-width: 0;
    }

.buying-costs-redesign .buying-costs .field--wide {
      grid-column: 1 / -1;
    }

.buying-costs-redesign .buying-costs .field label,
.buying-costs-redesign .buying-costs .derived-label {
      display: block;
      margin-bottom: .45rem;
      color: var(--navy);
      font-size: .88rem;
      font-weight: 750;
    }

.buying-costs-redesign .buying-costs .stepper {
      display: grid;
      min-height: 3.45rem;
      grid-template-columns: 3.45rem minmax(0, 1fr) 3.45rem;
      border: 1px solid #71818d;
      background: var(--white);
    }

.buying-costs-redesign .buying-costs .stepper:focus-within {
      border-color: var(--warm-dark);
      box-shadow: 0 0 0 2px rgba(185, 138, 69, .16);
    }

.buying-costs-redesign .buying-costs .stepper button {
      display: grid;
      min-width: 3.45rem;
      min-height: 3.45rem;
      place-items: center;
      border: 0;
      background: transparent;
      color: var(--navy);
    }

.buying-costs-redesign .buying-costs .stepper button:first-child {
      border-right: 1px solid var(--line);
    }

.buying-costs-redesign .buying-costs .stepper button:last-child {
      border-left: 1px solid var(--line);
    }

.buying-costs-redesign .buying-costs .stepper button:hover {
      background: var(--mist);
      color: var(--blue);
    }

.buying-costs-redesign .buying-costs .stepper input {
      width: 100%;
      min-width: 0;
      border: 0;
      outline: 0;
      background: var(--white);
      color: var(--ink);
      font-variant-numeric: tabular-nums;
      font-weight: 700;
      text-align: center;
      caret-color: var(--warm-dark);
    }

.buying-costs-redesign .buying-costs .field-error {
      min-height: 1.25rem;
      margin: .35rem 0 0;
      color: var(--error);
      font-size: .78rem;
    }

.buying-costs-redesign .buying-costs .field-error:empty {
      min-height: 0;
      margin-top: 0;
    }

.buying-costs-redesign .buying-costs .cash-primary-field label {
      margin-bottom: .7rem;
      font-size: clamp(1.05rem, 1.35vw, 1.25rem);
      letter-spacing: -.01em;
    }

.buying-costs-redesign .buying-costs .cash-primary-field .stepper {
      min-height: 4.15rem;
      grid-template-columns: 4.15rem minmax(0, 1fr) 4.15rem;
    }

.buying-costs-redesign .buying-costs .cash-primary-field .stepper button {
      min-width: 4.15rem;
      min-height: 4.15rem;
    }

.buying-costs-redesign .buying-costs .cash-primary-field .stepper input {
      font: 400 clamp(1.5rem, 2vw, 1.9rem)/1 var(--serif);
      letter-spacing: -.015em;
    }

.buying-costs-redesign .buying-costs .calculator-results {
      min-width: 0;
      padding: clamp(1.4rem, 2.8vw, 2.4rem);
      border: 1px solid var(--line-dark);
      background: var(--white);
    }

.buying-costs-redesign .buying-costs .primary-result {
      padding-bottom: 1.45rem;
      border-bottom: 1px solid var(--line);
    }

.buying-costs-redesign .buying-costs .cash-primary-results {
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
      border-bottom: 1px solid var(--line);
    }

.buying-costs-redesign .buying-costs .cash-primary-results .primary-result {
      min-width: 0;
      padding: .15rem 1.35rem 1.45rem 0;
      border-bottom: 0;
    }

.buying-costs-redesign .buying-costs .cash-primary-results .primary-result + .primary-result {
      padding-right: 0;
      padding-left: 1.35rem;
      border-left: 1px solid var(--line);
    }

.buying-costs-redesign .buying-costs .primary-result__label {
      max-width: 42ch;
      margin: 0 0 .35rem;
      color: var(--body);
      font-size: .92rem;
    }

.buying-costs-redesign .buying-costs .primary-result__value {
      display: block;
      color: var(--navy);
      font: 400 clamp(2.35rem, 4.3vw, 4.5rem)/1 var(--serif);
      font-variant-numeric: tabular-nums;
      letter-spacing: -.025em;
    }

.buying-costs-redesign .buying-costs .cash-primary-result--fees .primary-result__value {
      font-size: clamp(2.05rem, 3.4vw, 3.45rem);
    }

.buying-costs-redesign .buying-costs .mortgage-primary-results,
.buying-costs-redesign .buying-costs .mortgage-borrowing-results {
      display: grid;
      margin: 0;
    }

.buying-costs-redesign .buying-costs .mortgage-primary-results {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      border-bottom: 1px solid var(--line);
    }

.buying-costs-redesign .buying-costs .mortgage-primary-results > div {
      min-width: 0;
      padding: .15rem 1.35rem 1.5rem 0;
    }

.buying-costs-redesign .buying-costs .mortgage-primary-results > div + div {
      padding-right: 0;
      padding-left: 1.35rem;
      border-left: 1px solid var(--line);
    }

.buying-costs-redesign .buying-costs .mortgage-primary-results dt {
      margin-bottom: .4rem;
      color: var(--body);
      font-size: .84rem;
      font-weight: 750;
    }

.buying-costs-redesign .buying-costs .mortgage-primary-results dd {
      margin: 0;
      color: var(--navy);
      font: 400 clamp(2.05rem, 3.25vw, 3.35rem)/1 var(--serif);
      font-variant-numeric: tabular-nums;
      letter-spacing: -.025em;
    }

.buying-costs-redesign .buying-costs .mortgage-borrowing-results {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      border-bottom: 1px solid var(--line);
    }

.buying-costs-redesign .buying-costs .mortgage-borrowing-results > div {
      min-width: 0;
      padding: 1.2rem .9rem 1.25rem 0;
    }

.buying-costs-redesign .buying-costs .mortgage-borrowing-results > div + div {
      padding-left: .9rem;
      border-left: 1px solid var(--line);
    }

.buying-costs-redesign .buying-costs .mortgage-borrowing-results dt {
      color: var(--body);
      font-size: .76rem;
    }

.buying-costs-redesign .buying-costs .mortgage-borrowing-results dd {
      margin: .15rem 0 0;
      color: var(--navy);
      font: 400 clamp(1.2rem, 1.75vw, 1.6rem)/1.2 var(--serif);
      font-variant-numeric: tabular-nums;
    }

@media (min-width: 821px) {
  .buying-costs-redesign .buying-costs .calculator-inputs {
          padding-top: clamp(1.4rem, 2.8vw, 2.4rem);
        }
}

.buying-costs-redesign .buying-costs .breakdown-list dt {
      color: var(--body);
      font-size: .8rem;
    }

.buying-costs-redesign .buying-costs .breakdown-list dd {
      margin: .15rem 0 0;
      color: var(--navy);
      font-variant-numeric: tabular-nums;
      font-weight: 750;
    }

.buying-costs-redesign .buying-costs .breakdown {
      padding-top: 1.25rem;
    }

.buying-costs-redesign .buying-costs .breakdown__heading {
      margin: 0 0 .85rem;
      color: var(--navy);
      font: 400 1.18rem/1.25 var(--serif);
    }

.buying-costs-redesign .buying-costs .breakdown-list {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: .55rem 1rem;
      margin: 0;
    }

.buying-costs-redesign .buying-costs .breakdown-list div {
      display: contents;
    }

.buying-costs-redesign .buying-costs .breakdown-list dt,
.buying-costs-redesign .buying-costs .breakdown-list dd {
      padding-bottom: .5rem;
      border-bottom: 1px solid #edf1f3;
    }

.buying-costs-redesign .buying-costs .breakdown-list dd {
      text-align: right;
    }

.buying-costs-redesign .buying-costs .breakdown-list .breakdown-list__total dt,
.buying-costs-redesign .buying-costs .breakdown-list .breakdown-list__total dd {
      padding-top: .35rem;
      border-bottom: 0;
      color: var(--navy);
      font-weight: 800;
    }

/* Editorial continuation */
.buying-costs-redesign .buying-costs .article-resume {
      background: var(--white);
    }

.buying-costs-redesign .buying-costs .article-resume__inner {
      padding-top: clamp(3.5rem, 4.5vw, 4.5rem);
    }

.buying-costs-redesign .buying-costs .article-flow {
      max-width: none;
    }

.buying-costs-redesign .buying-costs .article-section {
      display: grid;
      grid-template-columns: minmax(11rem, .62fr) minmax(30rem, 2fr) minmax(12rem, .72fr);
      gap: 0 clamp(2rem, 4vw, 4.5rem);
      scroll-margin-top: 2rem;
      padding-bottom: clamp(3.5rem, 6vw, 6.25rem);
    }

.buying-costs-redesign .buying-costs .article-section + .article-section {
      padding-top: clamp(3.5rem, 6vw, 6.25rem);
      border-top: 1px solid var(--line);
    }

.buying-costs-redesign .buying-costs .article-section h2 {
      grid-column: 1;
      grid-row: 1 / span 20;
      align-self: start;
      margin: 0;
      color: var(--navy);
      font: 400 clamp(2.2rem, 3.4vw, 3.55rem)/1.05 var(--serif);
      letter-spacing: -.02em;
    }

.buying-costs-redesign .buying-costs .article-section p {
      grid-column: 2;
      max-width: 70ch;
      margin: 0 0 1.25rem;
    }

.buying-costs-redesign .buying-costs .context-link {
      grid-column: 3;
      grid-row: 1;
      align-self: start;
      margin: .35rem 0 0;
      padding-top: 1.05rem;
      border-top: 1px solid var(--warm-soft);
    }

.buying-costs-redesign .buying-costs .context-link__label {
      display: block;
      margin-bottom: .3rem;
      color: var(--warm-dark);
      font-size: .7rem;
      font-weight: 800;
      letter-spacing: .13em;
      text-transform: uppercase;
    }

.buying-costs-redesign .buying-costs .context-link a {
      color: var(--blue);
      font: 400 clamp(1.18rem, 1.7vw, 1.45rem)/1.35 var(--serif);
      text-decoration-line: underline;
      text-decoration-color: rgba(48, 97, 159, .42);
    }

.buying-costs-redesign .buying-costs .context-link a:hover,
.buying-costs-redesign .buying-costs .context-link a:focus-visible {
      color: #755735;
      text-decoration-color: currentColor;
    }

@media (max-width: 1200px) {
  .buying-costs-redesign .buying-costs .calculator-grid {
          grid-template-columns: minmax(24rem, .98fr) minmax(24rem, 1.02fr);
          gap: 1.6rem;
        }
}

@media (max-width: 1100px) {
  .buying-costs-redesign .buying-costs .article-section {
          grid-template-columns: minmax(10rem, .42fr) minmax(0, 1.58fr);
          gap: 0 clamp(2rem, 5vw, 4rem);
        }

  .buying-costs-redesign .buying-costs .article-section p {
          grid-column: 2;
          max-width: 68ch;
        }

  .buying-costs-redesign .buying-costs .context-link {
          grid-column: 2;
          grid-row: auto;
          width: min(100%, 30rem);
          margin-top: 1rem;
        }
}

@media (max-width: 1080px) {
}

@media (max-width: 980px) {
  .buying-costs-redesign .buying-costs .calculator-grid,
  .buying-costs-redesign .buying-costs #cash-purchase .calculator-grid {
          grid-template-columns: minmax(17rem, .86fr) minmax(21rem, 1.14fr);
          gap: 1.25rem;
        }

  .buying-costs-redesign .buying-costs .field-grid {
          grid-template-columns: 1fr;
        }

  .buying-costs-redesign .buying-costs .field--wide {
          grid-column: auto;
        }

}

/* The accepted homepage releases its forced image overlap into a stacked picture here. */
@media (max-width: 900px) {
  .buying-costs-redesign .buying-costs .page-opening__grid {
          min-height: 0;
          overflow: visible;
        }

  .buying-costs-redesign .buying-costs .page-opening__copy {
          width: 100%;
          min-height: 0;
          padding: 3rem 0 2.6rem;
          background: var(--white);
        }

  .buying-costs-redesign .buying-costs .page-opening h1 {
          max-width: 18ch;
        }

  .buying-costs-redesign .buying-costs .page-opening__image {
          position: relative;
          inset: auto;
          height: auto;
          min-height: 0;
        }

  .buying-costs-redesign .buying-costs .page-opening__image picture,
  .buying-costs-redesign .buying-costs .page-opening__image img {
          height: auto;
          min-height: 0;
          aspect-ratio: 2 / 1;
        }

  .buying-costs-redesign .buying-costs .page-opening__image::before {
          background-image: linear-gradient(0deg, rgba(16,41,66,.055), transparent 30%);
          content: "";
        }

  .buying-costs-redesign .buying-costs .page-shortcuts::before,
  .buying-costs-redesign .buying-costs .page-shortcuts::after {
          content: "";
          position: absolute;
          z-index: 2;
          top: 0;
          width: 1.75rem;
          height: 4.75rem;
          pointer-events: none;
        }

  .buying-costs-redesign .buying-costs .page-shortcuts::before {
          left: 0;
          background: linear-gradient(90deg, var(--white), rgba(255,255,255,0));
          opacity: 0;
        }

  .buying-costs-redesign .buying-costs .page-shortcuts::after {
          right: 0;
          background: linear-gradient(90deg, rgba(255,255,255,0), var(--white));
        }

  .buying-costs-redesign .buying-costs .page-shortcuts[data-scroll-edge="end"]::before {
          opacity: 1;
        }

  .buying-costs-redesign .buying-costs .page-shortcuts[data-scroll-edge="end"]::after,
  .buying-costs-redesign .buying-costs .page-shortcuts[data-scroll-edge="none"]::before,
  .buying-costs-redesign .buying-costs .page-shortcuts[data-scroll-edge="none"]::after {
          opacity: 0;
        }

  .buying-costs-redesign .buying-costs .page-shortcuts__grid {
          display: flex;
          width: max-content;
          min-width: 100%;
          padding-inline: var(--gutter);
        }

  .buying-costs-redesign .buying-costs .page-shortcut {
          flex: 0 0 10.75rem;
          min-height: 4.75rem;
          margin-right: 1rem;
          padding: .9rem 1.15rem .85rem .35rem;
        }

  .buying-costs-redesign .buying-costs .page-shortcut:last-child {
          margin-right: 0;
        }

  .buying-costs-redesign .buying-costs .shortcut-scroll-hint {
          display: block;
          width: min(var(--shell), calc(100% - (2 * var(--gutter))));
          margin: .28rem auto .42rem;
          color: #657483;
          font-size: .72rem;
          font-weight: 650;
          line-height: 1.35;
          letter-spacing: .015em;
          text-align: right;
        }

  .buying-costs-redesign .buying-costs .page-shortcuts[data-scroll-edge="end"] .shortcut-scroll-hint {
          text-align: left;
        }

  .buying-costs-redesign .buying-costs .page-shortcuts[data-scroll-edge="none"] .shortcut-scroll-hint {
          display: none;
        }
}

@media (max-width: 820px) {
  .buying-costs-redesign .buying-costs .calculator-grid,
  .buying-costs-redesign .buying-costs #cash-purchase .calculator-grid {
          grid-template-columns: 1fr;
        }

  .buying-costs-redesign .buying-costs .calculator-results {
          margin-top: .4rem;
        }

  .buying-costs-redesign .buying-costs .article-section {
          grid-template-columns: 1fr;
          gap: 0;
        }

  .buying-costs-redesign .buying-costs .article-section h2 {
          grid-column: 1;
          grid-row: auto;
          margin-bottom: 1.5rem;
        }

  .buying-costs-redesign .buying-costs .article-section p,
  .buying-costs-redesign .buying-costs .context-link {
          grid-column: 1;
        }

  .buying-costs-redesign .buying-costs .context-link {
          width: min(100%, 30rem);
        }
}

/* Accepted homepage landscape fade: separate overlay prevents stacking artefacts. */
@media (max-width: 950px) and (max-height: 430px) and (orientation: landscape) {
  .buying-costs-redesign .buying-costs .page-opening__copy {
          background: transparent;
        }

  .buying-costs-redesign .buying-costs .page-opening__image {
          isolation: isolate;
          background: #fff;
        }

  .buying-costs-redesign .buying-costs .page-opening__image picture {
          position: relative;
          z-index: 0;
        }

  .buying-costs-redesign .buying-costs .page-opening__image::before {
          content: none;
        }

  .buying-costs-redesign .buying-costs .page-opening__image-fade {
          display: block;
          background-image: var(--redesign-hero-fade-gradient);
        }
}

/* Mobile landscape: use width only when both calculator columns remain comfortable. */
@media (min-width: 700px) and (max-width: 900px) and (max-height: 430px) and (orientation: landscape) {
  .buying-costs-redesign .buying-costs .page-shortcut {
          min-height: 4.5rem;
          padding-block: .65rem;
        }

  .buying-costs-redesign .buying-costs .page-shortcuts::before,
  .buying-costs-redesign .buying-costs .page-shortcuts::after {
          height: 4.5rem;
        }

  .buying-costs-redesign .buying-costs .shortcut-scroll-hint {
          margin-block: .3rem .35rem;
        }

  .buying-costs-redesign .buying-costs .page-opening__grid {
          min-height: 17.5rem;
          overflow: hidden;
        }

  .buying-costs-redesign .buying-costs .page-opening__copy {
          width: min(55%, 34rem);
          min-height: 17.5rem;
          padding: 1.5rem 1.75rem 1.5rem 0;
        }

  .buying-costs-redesign .buying-costs .page-opening h1 {
          font-size: clamp(2.2rem, 5vw, 3rem);
        }

  .buying-costs-redesign .buying-costs .page-opening__image {
          position: absolute;
          inset: 0 0 0 25%;
          min-height: 17.5rem;
        }

  .buying-costs-redesign .buying-costs .page-opening__image picture,
  .buying-costs-redesign .buying-costs .page-opening__image img {
          height: 100%;
          min-height: 17.5rem;
          aspect-ratio: auto;
        }

  .buying-costs-redesign .buying-costs .calculator-panel {
          padding: 1.4rem;
        }

  .buying-costs-redesign .buying-costs .calculator-inputs {
          display: contents;
        }

  .buying-costs-redesign .buying-costs .calculator-grid,
  .buying-costs-redesign .buying-costs #cash-purchase .calculator-grid {
          grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
          grid-template-rows: auto auto;
          column-gap: 1rem;
          row-gap: 1.4rem;
          align-content: start;
        }

  .buying-costs-redesign .buying-costs .calculator-working-stack {
          display: grid;
          min-width: 0;
          grid-column: 1;
          grid-row: 1;
          grid-template-columns: minmax(0, 1fr);
          grid-template-rows: max-content max-content;
          row-gap: 1.25rem;
          align-self: start;
          align-content: start;
          justify-content: start;
        }

  .buying-costs-redesign .buying-costs .calculator-panel__heading {
          grid-column: 1;
          grid-row: 1;
          align-self: start;
          margin: 0;
          padding: 0;
        }

  .buying-costs-redesign .buying-costs .field-grid {
          grid-column: 1;
          grid-row: 2;
        }

  .buying-costs-redesign .buying-costs .calculator-panel__intro {
          grid-column: 1 / -1;
          grid-row: 2;
          max-width: 70ch;
          margin: 0;
        }

  .buying-costs-redesign .buying-costs .calculator-results {
          grid-column: 2;
          grid-row: 1;
          align-self: start;
          margin-top: 0;
          padding: 1.2rem;
        }

  .buying-costs-redesign .buying-costs .primary-result__value {
          font-size: clamp(2rem, 5vw, 3rem);
        }

  .buying-costs-redesign .buying-costs .cash-primary-results .primary-result {
          padding-right: .75rem;
        }

  .buying-costs-redesign .buying-costs .cash-primary-results .primary-result + .primary-result {
          padding-right: 0;
          padding-left: .75rem;
        }

  .buying-costs-redesign .buying-costs .cash-primary-results .primary-result__value {
          font-size: clamp(1.65rem, 4.2vw, 2.2rem);
        }

  .buying-costs-redesign .buying-costs .cash-primary-results .cash-primary-result--fees .primary-result__value {
          font-size: clamp(1.55rem, 3.9vw, 2.05rem);
        }

  .buying-costs-redesign .buying-costs .mortgage-primary-results dd {
          font-size: clamp(1.75rem, 4vw, 2.35rem);
        }

  .buying-costs-redesign .buying-costs .mortgage-borrowing-results {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

  .buying-costs-redesign .buying-costs .mortgage-borrowing-results > div:first-child {
          grid-column: 1 / -1;
          border-bottom: 1px solid var(--line);
        }

  .buying-costs-redesign .buying-costs .mortgage-borrowing-results > div:nth-child(2) {
          padding-left: 0;
          border-left: 0;
        }

  .buying-costs-redesign .buying-costs .stepper,
  .buying-costs-redesign .buying-costs .stepper button {
          min-height: 3rem;
        }

  .buying-costs-redesign .buying-costs .stepper {
          grid-template-columns: 3rem minmax(0, 1fr) 3rem;
        }
}

@media (max-width: 780px) {
}

@media (max-width: 620px) {
  .buying-costs-redesign .buying-costs {
          --gutter: 1.125rem;
        }

  .buying-costs-redesign .buying-costs .page-opening__copy {
          padding-block: 2.6rem 2.25rem;
        }

  .buying-costs-redesign .buying-costs .page-opening h1 {
          font-size: clamp(2.25rem, 11vw, 3rem);
        }

  .buying-costs-redesign .buying-costs .calculator-section {
          padding-top: 1.6rem;
        }

  .buying-costs-redesign .buying-costs .calculator-panel {
          padding: 1.3rem 1rem 1.5rem;
        }

  .buying-costs-redesign .buying-costs .calculator-panel__heading {
          font-size: 2rem;
        }

  .buying-costs-redesign .buying-costs .calculator-panel__intro {
          margin-bottom: 1.45rem;
          font-size: .94rem;
        }

  .buying-costs-redesign .buying-costs .calculator-results__title {
          margin-bottom: .8rem;
        }

  .buying-costs-redesign .buying-costs .stepper {
          min-height: 3.25rem;
          grid-template-columns: 3.25rem minmax(0, 1fr) 3.25rem;
        }

  .buying-costs-redesign .buying-costs .stepper button {
          min-width: 3.25rem;
          min-height: 3.25rem;
        }

  .buying-costs-redesign .buying-costs .calculator-results {
          padding: 1.25rem 1rem;
        }

  .buying-costs-redesign .buying-costs .primary-result__value {
          font-size: clamp(2.25rem, 12vw, 3.15rem);
        }

  .buying-costs-redesign .buying-costs .cash-primary-results {
          grid-template-columns: 1fr;
        }

  .buying-costs-redesign .buying-costs .cash-primary-results .primary-result {
          padding: .15rem 0 1.2rem;
        }

  .buying-costs-redesign .buying-costs .cash-primary-results .primary-result + .primary-result {
          padding: 1.2rem 0;
          border-top: 1px solid var(--line);
          border-left: 0;
        }

  .buying-costs-redesign .buying-costs .mortgage-primary-results {
          grid-template-columns: 1fr;
        }

  .buying-costs-redesign .buying-costs .mortgage-primary-results > div {
          padding: .15rem 0 1.2rem;
        }

  .buying-costs-redesign .buying-costs .mortgage-primary-results > div + div {
          padding: 1.2rem 0;
          border-top: 1px solid var(--line);
          border-left: 0;
        }

  .buying-costs-redesign .buying-costs .mortgage-primary-results dd {
          font-size: clamp(2.15rem, 10vw, 3rem);
        }

  .buying-costs-redesign .buying-costs .mortgage-borrowing-results {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

  .buying-costs-redesign .buying-costs .mortgage-borrowing-results > div:first-child {
          grid-column: 1 / -1;
          border-bottom: 1px solid var(--line);
        }

  .buying-costs-redesign .buying-costs .mortgage-borrowing-results > div:nth-child(2) {
          padding-left: 0;
          border-left: 0;
        }

  .buying-costs-redesign .buying-costs .cash-primary-field label {
          font-size: 1.08rem;
        }

  .buying-costs-redesign .buying-costs .cash-primary-field .stepper {
          min-height: 3.85rem;
          grid-template-columns: 3.85rem minmax(0, 1fr) 3.85rem;
        }

  .buying-costs-redesign .buying-costs .cash-primary-field .stepper button {
          min-width: 3.85rem;
          min-height: 3.85rem;
        }

  .buying-costs-redesign .buying-costs .cash-primary-field .stepper input {
          font-size: clamp(1.45rem, 7.5vw, 1.8rem);
        }

  .buying-costs-redesign .buying-costs .article-resume__inner {
          padding-top: 3.6rem;
        }

  .buying-costs-redesign .buying-costs .article-section {
          padding-bottom: 3.75rem;
        }

  .buying-costs-redesign .buying-costs .article-section + .article-section {
          padding-top: 3.75rem;
        }

  .buying-costs-redesign .buying-costs .article-section h2 {
          font-size: 2.35rem;
        }

}

@media (max-width: 600px) {
}

@media (max-width: 480px) {
  .buying-costs-redesign .buying-costs .page-shortcut {
          flex-basis: max(9.5rem, calc((100vw - 4.875rem) / 2));
        }
}

@media (max-width: 380px) {
  .buying-costs-redesign .buying-costs .breakdown-list {
          gap: .5rem;
        }

  .buying-costs-redesign .buying-costs .breakdown-list dt {
          max-width: 12rem;
        }
}

@media (prefers-reduced-motion: reduce) {
  .buying-costs-redesign .buying-costs {
          scroll-behavior: auto;
        }

  .buying-costs-redesign .buying-costs *,
  .buying-costs-redesign .buying-costs *::before,
  .buying-costs-redesign .buying-costs *::after {
          transition-duration: .01ms !important;
          animation-duration: .01ms !important;
          animation-iteration-count: 1 !important;
        }
}