/* Loan Programs page: clean card grid (2026-10-08). Warm off-white, thin borders, large radius, pill buttons.
   MyDealLoan evergreen #0B1C3E + yellow #FFC72C (tailwind.config.js). */
.mdl-programs { background: #fbfaf7; padding: 56px 16px 72px; }
.mdl-programs-inner { max-width: 1080px; margin: 0 auto; }
.mdl-programs-head { max-width: 640px; margin: 0 0 32px; }
.mdl-eyebrow { font: 600 12px/1 ui-monospace, Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; color: #8a6a2c; margin: 0 0 12px; }
.mdl-programs-head h2 { font-family: "Sora", system-ui, sans-serif; font-weight: 800; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.15; color: #0B1C3E; margin: 0 0 10px; text-wrap: balance; }
.mdl-programs-head p { color: #5b6474; font-size: 16px; line-height: 1.6; margin: 0; }

.mdl-prog-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 768px) { .mdl-prog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }

.mdl-prog { background: #fff; border: 1px solid #ebe7dd; border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 2px 10px -4px rgba(11, 28, 62, .08); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; min-width: 0; }
.mdl-prog:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -14px rgba(11, 28, 62, .22); border-color: #e0d3b5; }
.mdl-prog-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mdl-stage { font: 600 11px/1 ui-monospace, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; color: #8a6a2c;
  background: #f8f2e6; border-radius: 99px; padding: 7px 11px; }
.mdl-new { font: 700 11px/1 "Hanken Grotesk", system-ui, sans-serif; color: #0B1C3E; border: 1px solid #FFC72C; border-radius: 99px; padding: 5px 9px; }
.mdl-prog h3 { font-family: "Sora", system-ui, sans-serif; font-weight: 800; font-size: 22px; line-height: 1.2; color: #0B1C3E; margin: 0; }
.mdl-prog > p { color: #5b6474; font-size: 15px; line-height: 1.6; margin: 0; }
.mdl-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mdl-points li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; font-size: 14px; color: #1f2937; line-height: 1.45; }
.mdl-points li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #FFC72C; margin-top: 7px; }
.mdl-prog-cta { margin-top: auto; padding-top: 6px; }
.mdl-pill { display: inline-flex; align-items: center; gap: 8px; border-radius: 99px; padding: 11px 20px; font: 700 14px/1 "Sora", system-ui, sans-serif;
  background: #0B1C3E; color: #fff; border: 0; cursor: pointer; text-decoration: none; transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 6px 18px -8px rgba(11, 28, 62, .55); }
.mdl-pill::after { content: "→"; transition: transform .2s ease; }
.mdl-pill:hover { background: #071229; transform: translateY(-1px); }
.mdl-pill:hover::after { transform: translateX(3px); }
.mdl-pill.gold { background: #FFC72C; color: #0B1C3E; box-shadow: 0 6px 18px -8px rgba(197, 160, 89, .7); }
.mdl-pill.gold:hover { background: #d4b06a; }
.mdl-pill:focus-visible { outline: 2px solid #FFC72C; outline-offset: 3px; }
.mdl-prog-note { margin: 28px 0 0; font-size: 13px; color: #6b7280; }
@media (prefers-reduced-motion: reduce) { .mdl-prog, .mdl-pill, .mdl-pill::after { transition: none; } .mdl-prog:hover { transform: none; } }

/* Mobile (Paul, 2026-10-08): more room around the cards so they sit a little smaller on phones.
   Desktop and the cards' inner padding are unchanged. */
@media (max-width: 767px) {
  .mdl-programs { padding-inline: 28px; }
  .mdl-prog-grid { gap: 24px; }
}