* {
      margin: 0;
      padding: 0;
      box-sizing: border-box
  }

  body {
      font-family: 'Poppins', sans-serif;
      color: #0C0A62;
      background: #fff;
      line-height: 1.5;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased
  }

  a {
      color: #0C0A62;
      text-decoration: none
  }

  #loan-amount::placeholder {
      color: #757575;
      opacity: 1
  }

  a:hover {
      color: #FF571C
  }

  img {
      display: block;
      max-width: 100%
  }

  /* Targets the svg itself so both <path> and <polyline> ticks inherit it. */
  .result-icon svg {
      stroke: #fff
  }

  @keyframes floatY {

      0%,
      100% {
          transform: translateY(0) var(--r, rotate(0))
      }

      50% {
          transform: translateY(-14px) var(--r, rotate(0))
      }
  }

  @media (max-width:768px) {
      /* Stack the demo toolbar: freqs left, arrows on their own line aligned
         right for right-thumb reach. */
      .nav-arrows {
          width: 100%;
          justify-content: flex-end
      }
  }

  @media (max-width:820px) {
      .offer-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
          gap: 28px 32px !important
      }
  }

  @media (max-width:460px) {
      .offer-grid {
          grid-template-columns: 1fr !important
      }
  }

  @media (max-width:900px) {
      .process-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important
      }
  }

  @media (max-width:768px) {
      .elig-grid {
          grid-template-columns: 1fr !important
      }

      .elig-img {
          display: none !important
      }

      .tagline {
          display: none
      }

      .site-header img {
          height: 30px !important
      }

      .process-grid {
          grid-template-columns: 1fr !important
      }

      .elig-cta {
          display: flex !important;
          width: fit-content;
          margin-inline: auto
      }

      .soft-check {
          display: none !important
      }

      .rail-divider {
          display: none !important
      }
  }

  .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .6s cubic-bezier(.22, .61, .36, 1), transform .6s cubic-bezier(.22, .61, .36, 1)
  }

  .reveal.in {
      opacity: 1;
      transform: none
  }

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

  /* CTA hover states (previously the DC runtime's style-hover attribute). */
  .cta-primary {
      transition: background .12s ease, transform .12s ease
  }

  .cta-primary:hover {
      background: #E5440F;
      transform: translateY(-2px);
      color: #fff
  }

  .card-cta {
      transition: filter .12s ease
  }

  .card-cta:hover {
      filter: brightness(.94);
      color: #fff
  }

  .nav-arrow {
      transition: background .12s ease
  }

  .nav-arrow:hover {
      background: #E5440F
  }

  /* ===== Hero floating background icons (ported from facebook-personal-pink) ===== */
  @keyframes float {
      0%, 100% { transform: translateY(0) }
      50% { transform: translateY(-15px) }
  }
  @keyframes float-rotated {
      0%, 100% { transform: translateY(0) rotate(10deg) }
      50% { transform: translateY(-15px) rotate(10deg) }
  }
  @keyframes float-rotated-anti {
      0%, 100% { transform: translateY(0) rotate(-20deg) }
      50% { transform: translateY(-15px) rotate(-20deg) }
  }
  @keyframes float-rotated-right-anti {
      0%, 100% { transform: translateY(0) rotate(-50deg) }
      50% { transform: translateY(-15px) rotate(-50deg) }
  }
  @keyframes float-rotated-180 {
      0%, 100% { transform: translateY(0) rotate(180deg) scaleX(-1) }
      50% { transform: translateY(-15px) rotate(180deg) scaleX(-1) }
  }

  /* Soft blue radial blur behind the hero (ported from the old page's .background::before). */
  .hero-bg::before {
      content: "";
      position: absolute;
      width: 520px;
      height: 520px;
      right: clamp(140px, 14vw, 220px);
      top: clamp(360px, 46%, 520px);
      transform: translate(50%, -50%);
      border-radius: 50%;
      pointer-events: none;
      z-index: 0;
      background: radial-gradient(circle,
              rgba(12, 10, 98, 0.2) 0%,
              rgba(12, 10, 98, 0.12) 36%,
              rgba(12, 10, 98, 0.04) 72%,
              rgba(12, 10, 98, 0) 100%);
      filter: blur(52px)
  }

  @media (min-width: 993px) {
      .hero-bg::before {
          right: clamp(260px, 24vw, 420px)
      }
  }

  .hero-bg .bg-patterns {
      position: absolute;
      inset: 0;
      pointer-events: none
  }

  .hero-bg .bg-item {
      position: absolute;
      opacity: 1;
      user-select: none;
      animation: float 4.6s ease-in-out infinite
  }

  .hero-bg .left-patterns .bg-dollar { width: 124px; top: 90px; left: 40px; transform: rotate(10deg); animation: float-rotated 5.1s ease-in-out infinite; animation-delay: 0s }
  .hero-bg .left-patterns .bg-percent { width: 142px; top: 210px; left: 170px; animation-delay: .6s }
  .hero-bg .left-patterns .bg-dash { width: 80px; top: 330px; left: 20px; animation-delay: 1.2s }
  .hero-bg .left-patterns .bg-slash { width: 100px; top: 430px; left: 200px; animation-delay: 1.8s }
  .hero-bg .left-patterns .bg-hash { width: 100px; top: 470px; left: 10px; animation-delay: 2.1s }
  .hero-bg .left-patterns .bg-plus { width: 122px; top: 620px; left: 104px; transform: rotate(-20deg); animation: float-rotated-anti 4.4s ease-in-out infinite; animation-delay: 2.4s }

  .hero-bg .right-patterns .bg-plus { width: 120px; top: 580px; right: 0; animation-delay: .3s }
  .hero-bg .right-patterns .bg-slash { width: 80px; top: 700px; right: 115px; transform: rotate(180deg) scaleX(-1); animation: float-rotated-180 4.5s ease-in-out infinite; animation-delay: .9s }
  .hero-bg .right-patterns .bg-percent { width: 146px; top: 305px; right: 30px; animation-delay: 1.5s }
  .hero-bg .right-patterns .bg-dash { width: 80px; top: 290px; right: 255px; animation-delay: .6s }
  .hero-bg .right-patterns .bg-hash { width: 120px; top: 470px; right: 205px; animation-delay: 1.8s }
  .hero-bg .right-patterns .bg-dollar { width: 128px; top: 90px; right: 120px; transform: rotate(-50deg); animation: float-rotated-right-anti 5.4s ease-in-out infinite; animation-delay: 2.1s }

  @media (max-width: 992px) {
      .hero-bg .right-patterns { display: none }

      /* Push the form down so the "Get a quick quote" callout (now top-right)
         doesn't overlap the "How much would you like to borrow?" text. */
      .hero-form {
          margin-top: 70px !important
      }
  }

  @media (max-width: 576px) {
      .hero-bg .left-patterns .bg-dollar { width: 112px; top: 90px; left: 0 }
      .hero-bg .left-patterns .bg-percent { width: 128px; top: 210px; left: 90px }
      .hero-bg .left-patterns .bg-dash { width: 80px; top: 320px; left: 20px }
      .hero-bg .left-patterns .bg-slash { width: 80px; top: 420px; left: 100px }
      .hero-bg .left-patterns .bg-hash { width: 88px; top: 450px; left: 0 }
      .hero-bg .left-patterns .bg-plus { width: 88px; top: 610px; left: 46px }
  }

  @media (prefers-reduced-motion: reduce) {
      .hero-bg .bg-item { animation: none !important }
  }

  /* ===== "Get a quick quote" callout (ported from facebook-personal-pink) ===== */
  .hero-callout {
      position: absolute;
      left: -80px;
      top: 220px;
      pointer-events: none;
      z-index: 3
  }

  .hero-callout img {
      max-width: 220px;
      height: auto;
      display: block
  }

  @media (max-width: 992px) {
      .hero-callout { top: 100px; right: -24px; left: auto; transform: none; margin: 0 }
      .hero-callout img { max-width: 170px }
  }

  @media (max-width: 768px) {
      .hero-callout img { max-width: 168px }
  }

  @media (max-width: 576px) {
      .hero-callout { top: 125px; right: -20px; left: auto; transform: none; margin: 0 }
      .hero-callout img { max-width: 150px }
  }

  /* ===== Our 4 step process ===== */
  .process-section {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      gap: 56px;
      max-width: 1100px;
      margin: 0 auto;
      align-items: start
  }

  /* Decorative floating symbols + gradient circle behind the process cards.
     Kept in its own overflow-clipped layer so the sticky cards are unaffected. */
  .process-bg {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      z-index: 0
  }

  .process-bg::before {
      content: "";
      position: absolute;
      width: 480px;
      height: 480px;
      left: clamp(-120px, 4vw, 80px);
      top: 44%;
      border-radius: 50%;
      background: radial-gradient(circle,
              rgba(12, 10, 98, .18) 0%,
              rgba(12, 10, 98, .10) 40%,
              rgba(12, 10, 98, 0) 72%);
      filter: blur(50px)
  }

  .process-bg .bg-item {
      position: absolute;
      user-select: none;
      animation: float 4.6s ease-in-out infinite
  }

  .process-bg .bg-dollar  { width: 110px; top: 430px;  left: 24px;  transform: rotate(10deg);  animation: float-rotated 5.1s ease-in-out infinite }
  .process-bg .bg-percent { width: 118px; top: 560px;  left: 190px; animation-delay: .6s }
  .process-bg .bg-dash    { width: 74px;  top: 720px;  left: 60px;  animation-delay: 1.2s }
  .process-bg .bg-plus    { width: 104px; top: 812px;  left: 210px; transform: rotate(-20deg); animation: float-rotated-anti 4.4s ease-in-out infinite; animation-delay: 1.8s }
  .process-bg .bg-hash    { width: 94px;  top: 980px;  left: 34px;  animation-delay: 2.1s }
  .process-bg .bg-slash   { width: 88px;  top: 1080px; left: 196px; animation-delay: 1.5s }

  .process-intro {
      position: sticky;
      top: 110px;
      align-self: start;
      min-width: 0
  }

  .process-cards {
      display: flex;
      flex-direction: column;
      gap: 28px;
      min-width: 0
  }

  .process-card {
      position: sticky;
      background: #fff;
      border-radius: 24px;
      overflow: hidden;
      display: grid;
      grid-template-columns: 1fr minmax(190px, 240px);
      gap: 24px;
      height: 300px;
      box-shadow: 0 10px 40px rgba(12, 10, 98, .16)
  }

  /* Cascading sticky offsets so each card pins on top of the previous one */
  .process-card:nth-child(1) { top: 100px }
  .process-card:nth-child(2) { top: 118px }
  .process-card:nth-child(3) { top: 136px }
  .process-card:nth-child(4) { top: 154px }

  .process-card-text {
      padding: 36px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 12px;
      min-width: 0
  }

  .pc-step {
      margin: 0;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: #0C0A62
  }

  .pc-title {
      margin: 0;
      font-size: 26px;
      font-weight: 600;
      line-height: 1.2;
      color: #0C0A62
  }

  .pc-desc {
      margin: 0;
      font-size: 18px;
      line-height: 1.55;
      color: #0C0A62
  }

  .process-card-media {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      /* keep the phone off the card's right edge */
      padding-right: 30px
  }

  .process-card-media img {
      display: block;
      width: 100%;
      max-width: 200px;
      height: auto
  }

  @media (max-width: 900px) {
      .process-section { grid-template-columns: 1fr; gap: 36px }
      .process-intro { position: static }
      /* single column leaves no empty gutter for the symbols to live in */
      .process-bg { display: none }
  }

  @media (prefers-reduced-motion: reduce) {
      .process-bg .bg-item { animation: none !important }
  }

  @media (max-width: 520px) {
      .process-card {
          grid-template-columns: 1fr;
          height: auto;
          box-shadow: 0 12px 30px rgba(12, 10, 98, .16)
      }
      /* Smaller sticky offsets so cards still stack within a phone viewport */
      .process-card:nth-child(1) { top: 70px }
      .process-card:nth-child(2) { top: 86px }
      .process-card:nth-child(3) { top: 102px }
      .process-card:nth-child(4) { top: 118px }
      .process-card-text { padding: 30px 30px 0 }
      .pc-title { font-size: 21px }
      .pc-desc { font-size: 16px }
      .pc-step { font-size: 14px }
      .process-card-media { padding: 0 30px }
      .process-card-media img { max-width: 200px; margin: 0 auto }
  }

  /* ===== "You're in control" priority picker ===== */
  .picker {
      padding: 44px 40px;
      border-radius: 18px;
      background: #0C0A62;
      color: #fff
  }

  .picker-head {
      max-width: 62ch;
      margin-bottom: 26px
  }

  .picker-eyebrow {
      font-size: 14px;
      font-weight: 600;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: #EBD1C5;
      margin-bottom: 12px
  }

  .picker h2 {
      font-size: clamp(24px, 3.4vw, 34px);
      font-weight: 600;
      line-height: 1.18;
      margin-bottom: 10px
  }

  .picker-sub {
      font-size: 16px;
      line-height: 1.6;
      color: rgba(255, 255, 255, .72)
  }

  .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 26px
  }

  .chip {
      font-family: 'Poppins', sans-serif;
      font-size: 15px;
      font-weight: 600;
      padding: 11px 20px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, .28);
      background: transparent;
      color: #fff;
      cursor: pointer;
      transition: background .15s ease, border-color .15s ease, color .15s ease
  }

  .chip:hover {
      border-color: rgba(255, 255, 255, .6)
  }

  .chip[aria-pressed="true"] {
      background: #EBD1C5;
      border-color: #EBD1C5;
      color: #0C0A62
  }

  .result {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 20px 22px;
      border-radius: 12px;
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .14)
  }

  .result-icon {
      flex: 0 0 auto;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: #FF571C;
      display: flex;
      align-items: center;
      justify-content: center
  }

  .result-text {
      font-size: 15px;
      line-height: 1.55
  }

  .result-text b {
      display: block;
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 2px
  }

  .result-text span {
      color: rgba(255, 255, 255, .72)
  }

  /* ===== "Inside your portal" slider demo ===== */
  /* minmax(0,1fr) — not 1fr — or the carousel's min-content size blows the
     column (and the page) far wider than the viewport. */
  .portal {
      margin-top: 24px;
      padding: 40px;
      border-radius: 18px;
      border: 1px solid rgba(12, 10, 98, .12);
      background: #fff;
      box-shadow: 0 18px 48px rgba(18, 22, 84, .06);
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 44px;
      align-items: center
  }

  .portal-info,
  .portal-demo {
      min-width: 0
  }

  /* Light-blue pill with a leading dot, per the reference design. */
  .portal-eyebrow,
  .cmp-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #8EC6F5;
      background: rgba(142, 198, 245, .22);
      padding: 6px 12px;
      border-radius: 999px;
      margin-bottom: 18px
  }

  .portal-eyebrow::before,
  .cmp-eyebrow::before {
      content: "";
      flex: 0 0 auto;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #8EC6F5
  }

  .portal-info h2 {
      font-size: clamp(24px, 3.4vw, 34px);
      font-weight: 600;
      line-height: 1.18;
      color: #0C0A62;
      margin-bottom: 10px
  }

  .portal-info p {
      font-size: 16px;
      line-height: 1.6;
      color: rgba(12, 10, 98, .78);
      max-width: 46ch
  }

  .portal-demo {
      background: #F7F6F6;
      border: 1px solid rgba(12, 10, 98, .1);
      border-radius: 16px;
      padding: 26px 24px 22px
  }

  .slider-row {
      margin-bottom: 18px
  }

  .slider-label {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 12px;
      font-size: 14px;
      font-weight: 600;
      color: #0C0A62;
      margin-bottom: 10px
  }

  .slider-label span {
      font-size: 14px;
      font-weight: 700;
      color: #0C0A62;
      background: #fff;
      border: 1px solid rgba(12, 10, 98, .12);
      padding: 3px 12px;
      border-radius: 999px
  }

  .ll-range {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 6px;
      border-radius: 999px;
      background: rgba(12, 10, 98, .14);
      outline: none;
      margin: 0;
      cursor: pointer
  }

  .ll-range::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #0C0A62;
      border: 3px solid #fff;
      box-shadow: 0 0 0 1.5px #0C0A62;
      cursor: pointer
  }

  .ll-range::-moz-range-thumb {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #0C0A62;
      border: 3px solid #fff;
      box-shadow: 0 0 0 1.5px #0C0A62;
      cursor: pointer
  }

  .ll-range:focus-visible::-webkit-slider-thumb {
      box-shadow: 0 0 0 1.5px #0C0A62, 0 0 0 5px rgba(255, 87, 28, .35)
  }

  .ll-range:focus-visible::-moz-range-thumb {
      box-shadow: 0 0 0 1.5px #0C0A62, 0 0 0 5px rgba(255, 87, 28, .35)
  }

  .range-ticks {
      display: flex;
      justify-content: space-between;
      margin-top: 8px;
      font-size: 12px;
      color: #6E6E6D
  }

  .range-tick.on {
      color: #0C0A62;
      font-weight: 600
  }

  .demo-controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin: 22px 0 16px
  }

  .freq-group {
      display: inline-flex;
      background: #fff;
      border: 1px solid rgba(12, 10, 98, .12);
      border-radius: 999px;
      padding: 4px;
      gap: 2px
  }

  .pl-freq {
      border: 0;
      cursor: pointer;
      padding: 8px 15px;
      border-radius: 999px;
      font-family: 'Poppins', sans-serif;
      font-size: 13px;
      font-weight: 600;
      background: transparent;
      color: #0C0A62;
      transition: background .2s ease, color .2s ease
  }

  .pl-freq[aria-pressed="true"] {
      background: #0C0A62;
      color: #fff
  }

  /* One "Best option for" card per slide. Nothing here beyond overflow +
     snapping: this is the original card row's setup, which the browser scrolls
     on its own (on iOS, on the compositor, with momentum). Do not add
     touch-action, and do not drive scrollLeft from pointer events — both hand
     the gesture to the main thread and it stutters on a phone.
     The vertical padding keeps the card's shadow from being clipped. */
  .cards-scroll {
      display: flex;
      gap: 16px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      padding: 4px 2px 16px;
      min-width: 0;
      max-width: 100%
  }

  /* Slim scrollbar, as the original row had — it doubles as the "there's more
     to the right" hint on desktop. iOS overlays its own and hides it at rest. */
  .cards-scroll::-webkit-scrollbar {
      height: 6px
  }

  .cards-scroll::-webkit-scrollbar-thumb {
      background: rgba(12, 10, 98, .16);
      border-radius: 999px
  }

  .cards-scroll::-webkit-scrollbar-track {
      background: transparent
  }

  @media (prefers-reduced-motion: reduce) {
      .cards-scroll {
          scroll-behavior: auto
      }
  }

  .pl-slide {
      flex: 0 0 100%;
      scroll-snap-align: start;
      display: flex
  }

  /* Padding and price size live here, not inline, so they can shrink on narrow
     screens — this card is three boxes deep (portal → demo panel → card). */
  .pl-slide .pl-card {
      width: 100%;
      padding: 28px 26px;
      box-shadow: 0 10px 26px rgba(18, 22, 84, .08)
  }

  .pl-card-price {
      font-size: 34px
  }

  .demo-footnote {
      margin-top: 14px;
      font-size: 11.5px;
      line-height: 1.5;
      color: rgba(12, 10, 98, .6);
      text-align: center
  }

  @media (max-width: 900px) {
      .portal {
          grid-template-columns: 1fr;
          gap: 26px;
          padding: 30px 20px
      }

      .picker {
          padding: 32px 22px
      }
  }

  /* Phones: every nested box gives up horizontal padding so the card content
     (rate rows, price) isn't squeezed into a ~190px column. */
  @media (max-width: 576px) {
      .picker {
          padding: 26px 16px
      }

      .portal {
          padding: 22px 12px
      }

      .portal-demo {
          padding: 16px 12px 14px
      }

      .pl-slide .pl-card {
          padding: 22px 16px
      }

      .pl-card-price {
          font-size: 30px
      }

      .demo-controls {
          margin: 18px 0 12px
      }

      /* Fill the row and shrink the pills rather than overflowing the panel. */
      .freq-group {
          display: flex;
          width: 100%;
          justify-content: space-between
      }

      .pl-freq {
          flex: 1 1 auto;
          padding: 8px 6px;
          font-size: 12.5px;
          white-space: nowrap
      }
  }

  /* ===== "Compare your options" ===== */
  .cmp-title {
      font-size: clamp(30px, 4.4vw, 48px);
      font-weight: 700;
      line-height: 1.06;
      color: #0C0A62;
      margin-bottom: 16px;
      max-width: 18ch
  }

  .cmp-sub {
      font-size: 18px;
      line-height: 1.55;
      color: rgba(12, 10, 98, .72);
      max-width: 58ch;
      margin-bottom: 40px
  }

  .cmp-stats {
      display: flex;
      align-items: center;
      gap: 36px;
      padding: 26px 30px;
      margin-bottom: 26px;
      border: 1px solid rgba(12, 10, 98, .12);
      border-radius: 14px;
      background: #fff
  }

  .cmp-stat {
      flex: 1
  }

  .cmp-stat-num {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 24px;
      font-weight: 700;
      color: #0C0A62;
      margin-bottom: 4px
  }

  .cmp-stat-label {
      font-size: 14px;
      color: rgba(12, 10, 98, .66)
  }

  .cmp-divider {
      width: 1px;
      align-self: stretch;
      background: rgba(12, 10, 98, .12)
  }

  /* Live "checked right now" dot on the lendlab column. */
  .pulse {
      position: relative;
      flex: 0 0 auto;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #FF571C
  }

  .pulse::after {
      content: "";
      position: absolute;
      inset: -6px;
      border-radius: 50%;
      border: 1.5px solid #FF571C;
      animation: ping 2.2s cubic-bezier(.3, .6, .4, 1) infinite
  }

  .cmp-card.featured .pulse {
      background: #EBD1C5
  }

  .cmp-card.featured .pulse::after {
      border-color: #EBD1C5
  }

  @keyframes ping {
      0% { transform: scale(.6); opacity: .9 }
      75% { transform: scale(1.9); opacity: 0 }
      100% { transform: scale(1.9); opacity: 0 }
  }

  @media (prefers-reduced-motion: reduce) {
      .pulse::after {
          animation: none;
          display: none
      }
  }

  .cmp-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1.2fr);
      gap: 20px;
      align-items: stretch
  }

  .cmp-card {
      display: flex;
      flex-direction: column;
      padding: 28px 26px 30px;
      border: 1px solid rgba(12, 10, 98, .12);
      border-radius: 16px;
      background: #fff
  }

  .cmp-card.featured {
      background: #0C0A62;
      border-color: #0C0A62;
      color: #fff;
      box-shadow: 0 24px 48px -20px rgba(12, 10, 98, .45);
      transform: translateY(-10px)
  }

  .cmp-tag {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: rgba(12, 10, 98, .6);
      margin-bottom: 10px
  }

  .cmp-card.featured .cmp-tag {
      color: rgba(255, 255, 255, .65)
  }

  .cmp-card-title {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 23px;
      font-weight: 600;
      color: #0C0A62;
      margin-bottom: 22px
  }

  .cmp-card.featured .cmp-card-title {
      color: #fff
  }

  .cmp-row {
      padding: 16px 0;
      border-top: 1px solid rgba(12, 10, 98, .12)
  }

  .cmp-card.featured .cmp-row {
      border-top-color: rgba(255, 255, 255, .14)
  }

  .cmp-row:first-child {
      border-top: 0;
      padding-top: 0
  }

  .cmp-row-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: rgba(12, 10, 98, .6);
      margin-bottom: 6px
  }

  .cmp-card.featured .cmp-row-label {
      color: rgba(255, 255, 255, .65)
  }

  .cmp-row-value {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: 14.5px;
      line-height: 1.45;
      font-weight: 500
  }

  .cmp-icon {
      flex: 0 0 auto;
      width: 16px;
      height: 16px;
      margin-top: 2px
  }

  .cmp-icon.check path {
      stroke: #16BE24
  }

  .cmp-icon.cross path {
      stroke: #D64532
  }

  .cmp-cta-row {
      margin-top: auto;
      padding-top: 22px
  }

  .cmp-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 14px 18px;
      border-radius: 10px;
      border: 1px solid rgba(12, 10, 98, .12);
      background: transparent;
      color: rgba(12, 10, 98, .7);
      font-size: 14.5px;
      font-weight: 600;
      text-align: center
  }

  .cmp-btn-cta {
      background: #EBD1C5;
      border-color: #EBD1C5;
      color: #0C0A62;
      font-weight: 700;
      transition: background .12s ease, transform .12s ease
  }

  .cmp-btn-cta:hover {
      background: #E0BFAF;
      border-color: #E0BFAF;
      color: #0C0A62;
      transform: translateY(-2px)
  }

  .cmp-footnote {
      margin-top: 34px;
      font-size: 13px;
      color: rgba(12, 10, 98, .6);
      text-align: center
  }

  /* Short cell copy only exists in the mobile matrix. */
  .v-mini {
      display: none
  }

  /* ===== Mobile: one matrix instead of three stacked cards =====
     The cards, their .cmp-rows and each .cmp-row collapse to display:contents so
     every label/value becomes a direct child of .cmp-grid, then each cell is
     placed explicitly: column 1 = attribute, columns 2-4 = bank / broker / lendlab. */
  @media (max-width: 920px) {
      .cmp-grid {
          grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr));
          column-gap: 4px;
          row-gap: 0;
          padding: 16px 14px 18px;
          border: 1px solid rgba(12, 10, 98, .12);
          border-radius: 16px;
          background: #fff
      }

      .cmp-card,
      .cmp-rows,
      .cmp-row {
          display: contents
      }

      .cmp-card.featured {
          transform: none
      }

      /* The card-level chrome has nowhere to live in a matrix. */
      .cmp-tag,
      .cmp-card:not(.featured) .cmp-cta-row,
      .cmp-card:not(:first-child) .cmp-row-label {
          display: none
      }

      .v-full {
          display: none
      }

      .v-mini {
          display: inline
      }

      /* Column headers */
      .cmp-card-title {
          grid-row: 1;
          justify-content: center;
          gap: 4px;
          padding: 10px 2px;
          font-size: clamp(12px, 3vw, 16px);
          font-weight: 700;
          text-align: center;
          margin-bottom: 0
      }

      .cmp-card:nth-child(1) .cmp-card-title { grid-column: 2 }
      .cmp-card:nth-child(2) .cmp-card-title { grid-column: 3 }
      .cmp-card:nth-child(3) .cmp-card-title { grid-column: 4 }

      /* One grid row per attribute, in source order. */
      .cmp-rows > .cmp-row:nth-child(1) > * { grid-row: 2 }
      .cmp-rows > .cmp-row:nth-child(2) > * { grid-row: 3 }
      .cmp-rows > .cmp-row:nth-child(3) > * { grid-row: 4 }
      .cmp-rows > .cmp-row:nth-child(4) > * { grid-row: 5 }
      .cmp-rows > .cmp-row:nth-child(5) > * { grid-row: 6 }
      .cmp-rows > .cmp-row:nth-child(6) > * { grid-row: 7 }
      .cmp-rows > .cmp-row:nth-child(7) > * { grid-row: 8 }

      /* Sentence case, not uppercase — "Pre-qualification" has to fit a ~70px column. */
      .cmp-row-label {
          grid-column: 1;
          display: flex;
          align-items: center;
          padding: 12px 8px 12px 2px;
          font-size: clamp(10.5px, 2.8vw, 13px);
          text-transform: none;
          letter-spacing: 0;
          line-height: 1.25;
          overflow-wrap: anywhere;
          margin-bottom: 0
      }

      .cmp-card:nth-child(1) .cmp-row-value { grid-column: 2 }
      .cmp-card:nth-child(2) .cmp-row-value { grid-column: 3 }
      .cmp-card:nth-child(3) .cmp-row-value { grid-column: 4 }

      .cmp-row-value {
          flex-direction: column;
          align-items: center;
          justify-content: flex-start;
          gap: 4px;
          padding: 12px 4px;
          font-size: clamp(10.5px, 2.7vw, 13px);
          line-height: 1.3;
          text-align: center;
          color: rgba(12, 10, 98, .78)
      }

      /* .cmp-row lost its box, so separators move onto the cells. */
      .cmp-rows > .cmp-row:not(:first-child) > * {
          border-top: 1px solid rgba(12, 10, 98, .1)
      }

      .cmp-icon {
          width: 15px;
          height: 15px;
          margin-top: 0
      }

      /* lendlab column reads as one solid block down the matrix. */
      .cmp-card.featured .cmp-card-title,
      .cmp-card.featured .cmp-row-value {
          background: #0C0A62;
          color: #fff
      }

      .cmp-card.featured .cmp-card-title {
          border-radius: 10px 10px 0 0
      }

      .cmp-card.featured .cmp-rows > .cmp-row:last-child .cmp-row-value {
          border-radius: 0 0 10px 10px;
          padding-bottom: 14px
      }

      .cmp-card.featured .cmp-rows > .cmp-row:not(:first-child) .cmp-row-value {
          border-top-color: rgba(255, 255, 255, .16)
      }

      .cmp-card.featured .cmp-icon.check path {
          stroke: #7BE884
      }

      /* Single CTA under the whole matrix. */
      .cmp-card.featured .cmp-cta-row {
          grid-row: 9;
          grid-column: 1 / -1;
          padding-top: 18px
      }
  }

  @media (max-width: 640px) {
      .cmp-stats {
          flex-direction: column;
          align-items: flex-start;
          gap: 18px
      }

      .cmp-divider {
          display: none
      }

      .cmp-title {
          max-width: none
      }
  }

  /* ===== FAQs (mirrors the portal's "Commonly asked questions" sheet) ===== */
  .faq-list {
      display: flex;
      flex-direction: column;
      gap: 10px
  }

  .faq-item {
      background: #fff;
      border: 1px solid rgba(12, 10, 98, .1);
      border-radius: 14px;
      box-shadow: 0 8px 24px rgba(12, 10, 98, .05);
      transition: border-color .18s ease, box-shadow .18s ease
  }

  .faq-item[open] {
      border-color: rgba(255, 87, 28, .45);
      box-shadow: 0 14px 34px rgba(12, 10, 98, .1)
  }

  .faq-item > summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 20px 24px;
      font-size: 18px;
      font-weight: 500;
      color: #0C0A62;
      transition: color .15s ease
  }

  .faq-item > summary::-webkit-details-marker {
      display: none
  }

  /* Orange is reserved for the open row. A collapsed row stays navy even while
     hovered, focused or active, so a just-closed row doesn't still look open
     (the pointer sits on the row you clicked, and touch devices keep :hover). */
  .faq-item[open] > summary {
      color: #FF571C
  }

  /* Hover affordance without touching the title colour. */
  .faq-item:not([open]):hover {
      border-color: rgba(12, 10, 98, .24)
  }

  .faq-item > summary:focus-visible {
      outline: 2px solid #FF571C;
      outline-offset: 3px;
      border-radius: 14px
  }

  .faq-chevron {
      flex: 0 0 auto;
      transition: transform .2s ease
  }

  .faq-item[open] .faq-chevron {
      transform: rotate(180deg)
  }

  .faq-answer {
      padding: 0 24px 22px;
      font-size: 16px;
      line-height: 1.7;
      color: rgba(12, 10, 98, .82)
  }

  .faq-answer p + p {
      margin-top: 12px
  }

  .faq-answer strong {
      font-weight: 600;
      color: #0C0A62
  }

  .faq-answer a {
      text-decoration: underline
  }

  /* Smooth expand/collapse where the browser supports it; elsewhere the
     native details toggle still works, just without the height animation. */
  @supports selector(details::details-content) {
      .faq-item {
          interpolate-size: allow-keywords
      }

      .faq-item::details-content {
          block-size: 0;
          overflow: clip;
          transition: block-size .28s ease, content-visibility .28s allow-discrete
      }

      .faq-item[open]::details-content {
          block-size: auto
      }
  }

  @media (prefers-reduced-motion: reduce) {
      .faq-item::details-content {
          transition: none !important
      }

      .faq-chevron {
          transition: none
      }
  }

  @media (max-width: 576px) {
      /* Phones stack the chips full-width. In a column flex container the width
         is the cross axis, so `align-items: stretch` is what fills the row —
         flex-grow would only stretch them vertically. */
      .chips {
          flex-direction: column;
          align-items: stretch;
          justify-content: center
      }

      .faq-item > summary {
          padding: 16px 18px;
          gap: 12px;
          font-size: 16px
      }

      .faq-answer {
          padding: 0 18px 18px;
          font-size: 15px
      }
  }