:root {
  --refi-deep: #123c47;
  --refi-deep-2: #1c5960;
  --refi-cyan: #54b9bd;
  --refi-mint: #38c99a;
  --refi-sage: #dbe8e1;
  --refi-paper: #fffdf8;
  --refi-cream: #f3efe3;
  --refi-gold: #d4a54c;
  --refi-line: #bccdc7;
  --refi-ink: #102f31;
}

body.refi-page {
  --mrp-ink: var(--refi-ink);
  --mrp-ink-soft: #496762;
  --mrp-deep: var(--refi-deep);
  --mrp-deep-2: var(--refi-deep-2);
  --mrp-mint: var(--refi-mint);
  --mrp-mint-soft: #dcf1e9;
  --mrp-sage: var(--refi-sage);
  --mrp-sage-2: #cadfd6;
  --mrp-ivory: var(--refi-cream);
  --mrp-paper: var(--refi-paper);
  --mrp-gold: var(--refi-gold);
  --mrp-line: var(--refi-line);
  background: #edf2ef;
}

.refi-page .mrp-header {
  background: rgba(249,251,248,.95);
}

.refi-page .mrp-header-cta,
.refi-page .mrp-btn--primary {
  background: linear-gradient(118deg, #123c47 0%, #17606a 56%, #32b98e 100%);
}

.refi-hero {
  min-height: 650px;
  display: grid;
  align-items: center;
  background:
    linear-gradient(rgba(72,109,103,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(72,109,103,.045) 1px, transparent 1px),
    radial-gradient(circle at 10% 20%, rgba(62,199,154,.17), transparent 29%),
    radial-gradient(circle at 87% 26%, rgba(85,177,184,.16), transparent 27%),
    radial-gradient(circle at 79% 82%, rgba(212,165,76,.14), transparent 23%),
    #edf3ef;
  background-size: 36px 36px, 36px 36px, auto, auto, auto, auto;
}

.refi-hero .mrp-hero__grid {
  grid-template-columns: minmax(0, 1.03fr) minmax(450px, .97fr);
  gap: 58px;
}

.refi-hero .mrp-hero__copy h1 {
  max-width: 720px;
  font-size: clamp(50px, 5.25vw, 78px);
  line-height: .98;
}

.refi-hero .mrp-lead {
  max-width: 680px;
}

.refi-hero__visual {
  min-height: 516px;
  overflow: hidden;
  padding: 24px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 34px;
  background:
    radial-gradient(circle at 82% 16%, rgba(97,215,190,.28), transparent 28%),
    radial-gradient(circle at 8% 86%, rgba(212,165,76,.26), transparent 30%),
    linear-gradient(145deg, #0f3340 0%, #164f5a 52%, #1d6a61 100%);
  box-shadow: 0 32px 70px rgba(18,60,71,.22);
}

.refi-hero__visual::before {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  top: -170px;
  right: -100px;
  border: 44px solid rgba(255,255,255,.05);
  border-radius: 50%;
}

.refi-board__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  color: #d8eee8;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.refi-board__head strong {
  color: #f4d99b;
  font-size: 12px;
  letter-spacing: .11em;
}

.refi-offers {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr);
  align-items: center;
}

.refi-offer {
  position: relative;
  min-height: 206px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 22px;
  color: var(--refi-ink);
  background: #f8faf6;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 24px;
  box-shadow: 0 18px 34px rgba(4,31,38,.16);
}

.refi-offer--old {
  transform: rotate(-2deg);
  background: #edf0ea;
}

.refi-offer--new {
  transform: rotate(2deg);
  background: linear-gradient(150deg, #fffdf7, #e3f1e9);
}

.refi-offer span {
  color: #5a7470;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.refi-offer strong {
  margin: 10px 0 3px;
  color: #123c47;
  font-size: clamp(42px, 4vw, 58px);
  line-height: 1;
}

.refi-offer small {
  color: #58716d;
  font-weight: 800;
}

.refi-offer i {
  height: 9px;
  margin-top: 25px;
  overflow: hidden;
  background: #d2ddd7;
  border-radius: 99px;
}

.refi-offer i::after {
  content: "";
  display: block;
  width: 72%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4fb8bd, #d5a64b);
}

.refi-offer--new i::after {
  width: 54%;
  background: linear-gradient(90deg, #2fc997, #53b4bc);
}

.refi-switch {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 5px;
  margin-inline: -12px;
}

.refi-switch span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  color: #123c47;
  background: #f2d588;
  border: 7px solid #15505a;
  border-radius: 50%;
  font-size: 25px;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(0,0,0,.18);
}

.refi-switch small {
  width: 92px;
  color: #d4e9e5;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.refi-hero-verdict {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 20px;
  margin-top: 23px;
  padding: 18px 20px;
  color: #e5f3ef;
  background: rgba(3,36,43,.4);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 20px;
}

.refi-hero-verdict span {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.refi-hero-verdict strong {
  grid-row: span 2;
  color: #fff;
  font-size: 27px;
}

.refi-hero-verdict small {
  color: #c6dbd6;
}

.refi-timeline {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  color: #c8ddd8;
  font-size: 10px;
  font-weight: 900;
}

.refi-timeline i {
  height: 5px;
  background: rgba(255,255,255,.18);
  border-radius: 99px;
}

.refi-timeline b {
  display: block;
  width: 74%;
  height: 100%;
  background: linear-gradient(90deg, #37c99a, #55b9bd, #d4a54c);
  border-radius: inherit;
}

.refi-page .mrp-section-nav {
  background: rgba(242,247,244,.95);
}

.refi-page .mrp-calc-section {
  background:
    radial-gradient(circle at 7% 18%, rgba(56,201,154,.1), transparent 24%),
    radial-gradient(circle at 95% 12%, rgba(84,185,189,.1), transparent 24%),
    #edf3ef;
}

.refi-page .mrp-mode__button.is-active {
  border-color: rgba(42,167,138,.45);
  background: linear-gradient(145deg, #fffdf8, #e9f3ed);
}

.refi-page .mrp-panel::before,
.refi-page .mrp-result::before {
  background: linear-gradient(90deg, #35c998, #55b8be, #d4a54c);
}

.refi-page .mrp-result {
  background: linear-gradient(155deg, #113744 0%, #154d58 53%, #1d675f 100%);
}

.refi-page .mrp-result__main {
  background:
    radial-gradient(circle at 90% 12%, rgba(212,165,76,.28), transparent 35%),
    linear-gradient(140deg, rgba(28,83,96,.98), rgba(22,104,91,.9));
}

.refi-page .mrp-result__main output {
  font-size: clamp(50px, 5.2vw, 74px);
}

.refi-page .mrp-bars b {
  background: linear-gradient(90deg, #39cb9a, #58b9bd, #d4a54c);
}

.refi-term-check.is-warning {
  border-color: rgba(237,188,91,.48);
  background: rgba(212,165,76,.12);
}

.refi-term-check.is-positive {
  border-color: rgba(77,215,169,.44);
  background: rgba(52,198,149,.11);
}

.refi-page .mrp-overview {
  background: #f5f1e7;
}

.refi-page .mrp-stat-grid article {
  background: rgba(255,253,248,.84);
}

.refi-page .mrp-detail {
  background: #dce8e2;
}

.refi-page .mrp-check-card {
  background:
    radial-gradient(circle at 90% 92%, rgba(212,165,76,.26), transparent 36%),
    linear-gradient(155deg, #123d49, #1b6262);
}

.refi-page .mrp-method {
  background: #f5f2e9;
}

.refi-page .mrp-method__grid article {
  background: rgba(255,253,248,.92);
}

.refi-page .mrp-legal {
  background: #d9e7e1;
}

.refi-page .mrp-legal__grid article {
  background: rgba(255,253,248,.83);
}

.refi-page .mrp-decision {
  background:
    radial-gradient(circle at 86% 16%, rgba(80,188,181,.18), transparent 25%),
    radial-gradient(circle at 12% 88%, rgba(212,165,76,.15), transparent 27%),
    #153f48;
}

.refi-steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.refi-page .mrp-guide {
  background: #f6f2e8;
}

.refi-choice-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.refi-choice-grid article {
  min-width: 0;
}

.refi-page .mrp-examples {
  background: #dce8e2;
}

.refi-page .mrp-example-grid article {
  background: rgba(255,253,248,.88);
}

.refi-negotiation {
  background: #f5f1e7;
}

.refi-prep-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 34px;
}

.refi-prep-grid article {
  min-width: 0;
  padding: 28px;
  background: rgba(255,253,248,.9);
  border: 1px solid var(--mrp-line);
  border-radius: 24px;
  box-shadow: var(--mrp-shadow-soft);
}

.refi-prep-grid article > span {
  color: #247c73;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.refi-prep-grid h3 {
  margin: 13px 0 15px;
  font-size: 24px;
  line-height: 1.12;
}

.refi-prep-grid p {
  color: var(--mrp-ink-soft);
}

.refi-prep-grid p:last-child {
  margin-bottom: 0;
}

.refi-prep-note {
  margin-top: 20px;
}

.refi-risk {
  background: #f4f0e6;
}

.refi-risk .mrp-tax__grid {
  align-items: stretch;
  padding: clamp(30px, 4vw, 52px);
  overflow: hidden;
  border: 1px solid #bdcdc6;
  border-radius: 32px;
  background:
    radial-gradient(circle at 76% 0, rgba(111,201,177,.13), transparent 34%),
    linear-gradient(145deg, #fffdf8, #f8f6ee);
  box-shadow: 0 24px 56px rgba(25,56,54,.10);
}

.refi-risk .mrp-tax__grid > div {
  align-self: center;
  min-width: 0;
}

.refi-risk .mrp-tax__grid > div > p:last-child {
  margin-bottom: 0;
}

.refi-risk aside {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  background:
    radial-gradient(circle at 90% 90%, rgba(212,165,76,.24), transparent 38%),
    linear-gradient(150deg, #123d49, #1c6261);
}

.refi-glossary {
  background: #e1ebe6;
}

.refi-glossary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 34px 0 0;
}

.refi-glossary-grid div {
  min-width: 0;
  padding: 24px;
  background: rgba(255,253,248,.86);
  border: 1px solid var(--mrp-line);
  border-radius: 20px;
}

.refi-glossary-grid dt {
  margin-bottom: 10px;
  color: var(--refi-deep);
  font-size: 20px;
  font-weight: 900;
}

.refi-glossary-grid dd {
  margin: 0;
  color: var(--mrp-ink-soft);
  font-size: 14px;
  line-height: 1.58;
}

.refi-page .mrp-errors {
  background: #163f48;
}

.refi-page .mrp-error-grid article {
  background: rgba(255,255,255,.07);
}

.refi-page .mrp-sources,
.refi-page .mrp-faq {
  background: #edf2ef;
}

.refi-page .mrp-source-grid a,
.refi-page .mrp-faq details {
  background: #fffdf8;
}

.refi-page .mrp-faq .mrp-heading .mrp-kicker {
  margin-bottom: 22px;
}

.refi-page .mrp-faq .mrp-heading h2 {
  margin-top: 0;
  line-height: 1.08;
}

.refi-page .mrp-related {
  background: linear-gradient(155deg, #123a45, #174d56);
}

.refi-page .mrp-related__grid a {
  background: rgba(255,255,255,.08);
}

.refi-page .mrp-footer {
  background: #0d3039;
}

@media (max-width: 1100px) {
  .refi-hero .mrp-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(390px, .92fr);
    gap: 34px;
  }

  .refi-hero__visual {
    min-height: 470px;
    padding: 20px;
  }

  .refi-offer {
    min-height: 185px;
    padding: 20px 17px;
  }

  .refi-offers {
    grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr);
  }

  .refi-switch span {
    width: 50px;
    height: 50px;
  }

  .refi-choice-grid,
  .refi-steps,
  .refi-prep-grid,
  .refi-glossary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .refi-hero {
    min-height: auto;
  }

  .refi-hero .mrp-hero__grid {
    grid-template-columns: 1fr;
  }

  .refi-hero__visual {
    width: min(100%, 620px);
    min-height: 500px;
    margin-inline: auto;
  }

  .refi-page .mrp-stage {
    grid-template-columns: 1fr;
  }

  .refi-page .mrp-result {
    position: static;
  }
}

@media (max-width: 680px) {
  .refi-hero {
    padding-top: 34px;
    padding-bottom: 42px;
  }

  .refi-hero::after {
    display: none;
  }

  .refi-hero .mrp-hero__copy h1 {
    font-size: clamp(42px, 13vw, 58px);
  }

  .refi-hero__visual {
    min-height: auto;
    padding: 16px;
    border-radius: 26px;
  }

  .refi-board__head {
    margin-bottom: 15px;
  }

  .refi-offers {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .refi-offer {
    min-height: 132px;
    padding: 17px 19px;
    transform: none;
  }

  .refi-offer strong {
    font-size: 42px;
  }

  .refi-offer i {
    margin-top: 14px;
  }

  .refi-switch {
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    margin: -2px 0;
  }

  .refi-switch span {
    width: 42px;
    height: 42px;
    border-width: 5px;
    transform: rotate(90deg);
  }

  .refi-switch small {
    width: auto;
  }

  .refi-hero-verdict {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .refi-hero-verdict strong {
    grid-row: auto;
    margin-top: 4px;
  }

  .refi-choice-grid,
  .refi-steps,
  .refi-prep-grid,
  .refi-glossary-grid {
    grid-template-columns: 1fr;
  }

  .refi-risk .mrp-tax__grid {
    gap: 24px;
    padding: 22px;
    border-radius: 24px;
  }

  .refi-risk aside {
    padding: 24px;
    border-radius: 20px;
  }

  .refi-page .mrp-faq .mrp-heading .mrp-kicker {
    margin-bottom: 18px;
  }

  .refi-page .mrp-faq .mrp-heading h2 {
    font-size: clamp(36px, 11vw, 46px);
    line-height: 1.08;
  }

  .refi-page .mrp-result__main output {
    font-size: clamp(34px, 10.8vw, 44px);
    white-space: nowrap;
  }
}

@media (max-width: 420px) {
  .refi-board__head strong {
    display: none;
  }

  .refi-offer {
    min-height: 122px;
  }
}