/* Meedsy hub pages: /pay-later/ and /lease-to-own/ (loaded by hubs.php). */

body.md-hub-page #main, body.md-hub-page #wrap { background: var(--surface); }

/* Hero */
.md-hub-hero { position: relative; overflow: hidden; padding: 64px 0 var(--space-8); background:
  radial-gradient(900px 420px at 95% -20%, rgba(215,32,177,.10), transparent 60%),
  radial-gradient(640px 340px at -10% 120%, rgba(255,210,63,.20), transparent 60%),
  var(--surface); border-bottom: 1px solid var(--line); }
.md-hub-hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-8); align-items: center; }
.md-hub-hero__copy { display: grid; gap: var(--space-5); }
.md-hub .md-display { font-size: 64px !important; }
.md-crumbs { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--ink-muted); }
.md-crumbs a { color: var(--ink-muted) !important; }
.md-crumbs a:hover { color: var(--brand-strong) !important; }
.md-hub-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
body.meedsy-brand .md-btn--ghost { background: var(--surface-raised) !important; color: var(--ink) !important; border-color: var(--line-strong) !important; }
.md-btn--ghost:hover { border-color: var(--brand-strong) !important; color: var(--brand-strong) !important; }
.md-hub-hero__actions .md-btn { padding: 14px 22px; font-size: 16px; }

/* How it works card */
.md-hub-how { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-6); }
.md-hub-how__title { font: 700 13px/16px var(--font-sans) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-4) !important; }
.md-hub-how__steps { position: relative; display: grid; gap: var(--space-4); }
.md-hub-how__steps::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; background: linear-gradient(var(--brand-strong), var(--accent)); border-radius: 2px; }
.md-hub-how__steps li { position: relative; display: grid; grid-template-columns: 36px auto 1fr; grid-template-rows: auto auto; column-gap: var(--space-3); align-items: baseline; }
.md-hub-how__dot { grid-row: 1 / 3; align-self: start; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-raised); border: 2px solid var(--brand-strong); color: var(--brand-strong); font: 800 15px/1 var(--font-display); z-index: 1; }
.md-hub-how__steps li:last-child .md-hub-how__dot { background: var(--brand-strong); color: #fff; }
.md-hub-how__when { font: 600 13px/18px var(--font-sans); color: var(--ink-muted); text-transform: uppercase; letter-spacing: .06em; }
.md-hub-how__big { grid-column: 2 / 4; font: 800 24px/30px var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.md-hub-how__what { grid-column: 2 / 4; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.md-hub--lease-to-own .md-hub-how__big { font-size: 20px; line-height: 26px; }
.md-hub--pay-later .md-hub-how__steps li { grid-template-columns: 36px 1fr auto; }
.md-hub--pay-later .md-hub-how__big { grid-column: 3; grid-row: 1 / 3; align-self: center; }
.md-hub--pay-later .md-hub-how__what { grid-column: 2; }
.md-hub-how__note { margin-top: var(--space-5) !important; padding-top: var(--space-4); border-top: 1px solid var(--line); font-size: 14px !important; line-height: 21px !important; color: var(--ink-muted); }

/* Good for / watch out */
.md-fit { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.md-fit__col { padding: var(--space-6); border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface-raised); }
.md-fit__col h3 { display: flex; align-items: center; gap: 10px; font: 700 22px/28px var(--font-display) !important; margin-bottom: var(--space-4) !important; }
.md-fit__col--good h3 { color: var(--success) !important; }
.md-fit__col--watch { background: #fffaf0; border-color: rgba(154,91,0,.25); }
.md-fit__col--watch h3 { color: var(--warning) !important; }
.md-fit__col ul { display: grid; gap: var(--space-3); }
.md-fit__col li { position: relative; padding-left: 22px; font-size: 17px; line-height: 26px; color: var(--ink); }
.md-fit__col li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .35; }
.md-fit__col--good li::before { background: var(--success); opacity: 1; }
.md-fit__col--watch li::before { background: var(--warning); opacity: 1; }

/* Compare */
.md-hub-compare-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-5); max-width: none !important; }
.md-filter { display: flex; flex-wrap: wrap; gap: 8px; }
body.meedsy-brand .md-filter__btn { height: 40px; padding: 0 16px !important; border-radius: var(--radius-pill) !important; border: 1px solid var(--line) !important; background: var(--surface-raised) !important; color: var(--ink) !important; font: 600 15px/20px var(--font-sans) !important; cursor: pointer; transition: background .15s, color .15s, border-color .15s; box-shadow: none !important; text-transform: none !important; letter-spacing: 0 !important; }
body.meedsy-brand .md-filter__btn:hover { border-color: var(--brand-strong) !important; color: var(--brand-strong) !important; }
body.meedsy-brand .md-filter__btn.is-active { background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; }
.md-recheck { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 var(--space-5) !important; padding: 12px 16px; border-radius: var(--radius-md); background: var(--surface-sunk); border: 1px dashed var(--line-strong); font-size: 14px !important; line-height: 21px !important; color: var(--ink-muted); }
.md-recheck .md-icon { flex: 0 0 auto; margin-top: 1px; color: var(--ink-muted); }

.md-providers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.md-provider { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); transition: border-color .15s, box-shadow .2s, transform .2s; }
.md-provider:hover { border-color: rgba(180,18,143,.35); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.md-provider[hidden] { display: none !important; }
.md-provider__head { display: flex; align-items: center; gap: var(--space-3); }
.md-provider__avatar { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand-strong); font: 800 22px/1 var(--font-display); }
.md-provider__name { font: 700 20px/26px var(--font-display) !important; letter-spacing: -0.01em; }
.md-provider__tags { font-size: 13px !important; line-height: 18px !important; color: var(--ink-muted); margin-top: 2px !important; }
.md-provider__terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.md-provider__terms div { padding: 10px; border-radius: var(--radius-sm); background: var(--surface-sunk); min-width: 0; }
.md-provider__terms dt { font: 700 11px/14px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.md-provider__terms dd { margin: 4px 0 0; font: 700 15px/20px var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.md-provider__about { font-size: 15px !important; line-height: 23px !important; color: var(--ink); }
.md-provider__watch { display: flex; gap: 8px; align-items: flex-start; font-size: 14px !important; line-height: 21px !important; color: #7a4800; }
.md-provider__watch .md-icon { flex: 0 0 auto; margin-top: 2px; color: var(--warning); }
.md-provider__link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; padding-top: var(--space-3); border-top: 1px solid var(--line); font: 700 15px/20px var(--font-sans); color: var(--brand-strong) !important; }
.md-provider__link .md-icon { transition: transform .15s; }
.md-provider__link:hover .md-icon { transform: translateX(3px); }

/* FAQ */
.md-faq-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-6); align-items: start; }
.md-faq-wrap .md-section-head { margin: 0; }
.md-faq { display: grid; gap: var(--space-3); }
.md-faq__item { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); transition: border-color .15s; }
.md-faq__item[open] { border-color: rgba(180,18,143,.35); }
.md-faq__item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: 18px 20px; cursor: pointer; font: 700 18px/26px var(--font-display); color: var(--ink); }
.md-faq__item summary::-webkit-details-marker { display: none; }
.md-faq__icon { position: relative; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-tint); }
.md-faq__icon::before, .md-faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--brand-strong); border-radius: 2px; transition: transform .2s; }
.md-faq__icon::after { transform: rotate(90deg); }
.md-faq__item[open] .md-faq__icon::after { transform: rotate(0deg); }
.md-faq__item p { padding: 0 20px 20px; font-size: 16px !important; line-height: 26px !important; color: var(--ink-muted); }

/* Cross-link + disclosure */
.md-hub-other { padding: var(--space-7) 0 !important; }
.md-hub-other__card { display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--ink); color: #fff !important; transition: transform .2s, box-shadow .2s; }
.md-hub-other__card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.md-hub-other__card > span:first-child { display: grid; gap: 4px; }
.md-hub-other__kicker { font: 700 12px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.md-hub-other__title { font: 800 30px/36px var(--font-display); letter-spacing: -0.02em; }
.md-hub-other__text { font-size: 16px; line-height: 24px; color: #cfc5d7; }
.md-hub-other__go { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--ink); transition: transform .2s; }
.md-hub-other__card:hover .md-hub-other__go { transform: translateX(4px); }
.md-hub-disclosure { margin-top: var(--space-5) !important; max-width: 860px; }
.md-hub-disclosure a { color: var(--ink-muted) !important; text-decoration: underline !important; }

/* Responsive */
@media (max-width: 1023px) {
  .md-hub-hero__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .md-providers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-hub-compare-head { flex-direction: column; align-items: flex-start; }
  .md-faq-wrap { grid-template-columns: 1fr; gap: 0; }
  .md-faq-wrap .md-section-head { margin-bottom: var(--space-5); }
}
@media (max-width: 767px) {
  .md-hub-hero { padding: var(--space-6) 0 var(--space-7); }
  .md-hub .md-display { font-size: 44px !important; }
  .md-hub-hero__actions .md-btn { flex: 1 1 auto; }
  .md-hub-how { padding: var(--space-5); }
  .md-fit { grid-template-columns: 1fr; }
  .md-fit__col { padding: var(--space-5); }
  .md-providers { grid-template-columns: 1fr; }
  .md-filter { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 4px; }
  body.meedsy-brand .md-filter__btn { flex: 0 0 auto; }
  .md-hub-other__card { padding: var(--space-5); }
  .md-hub-other__title { font-size: 24px; line-height: 30px; }
  .md-hub-other__go { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .md-provider, .md-hub-other__card, .md-hub-other__go, .md-provider__link .md-icon { transition: none !important; }
}