/* The "compare" and "payTabs" prose layouts (the Unit Trust FAQs, 2026-09-28),
   loaded only by them (ProseCompare, ProsePayTabs in cms/src/frontend/blocks).
   Every selector starts with `html`: this file loads before site.css and must
   not lose ties. */
html .cmp-intro{max-width:72ch;margin:-4px 0 24px;color:var(--copy);line-height:1.65}

/* The comparison: the funds across the top, the attributes down the side. */
html .cmp-scroll{overflow-x:auto;border:1px solid var(--hair);border-radius:22px;background:#fff;box-shadow:0 14px 34px rgba(53,0,79,.06)}
html .cmp-table{width:100%;min-width:900px;border-collapse:collapse;font-size:var(--fs-small);line-height:1.5}
html .cmp-table th,html .cmp-table td{padding:14px 18px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(53,0,79,.08)}
html .cmp-table thead th{position:sticky;top:0;padding-top:20px;padding-bottom:16px;background:var(--plum);color:#fff;font-family:var(--font-head);font-size:var(--fs-h3);font-weight:700}
html .cmp-table thead td{background:var(--plum)}
html .cmp-table tbody th{width:170px;color:var(--plum);font-weight:700;font-size:.82rem;letter-spacing:.02em;background:#faf7fb}
html .cmp-table tbody td{color:var(--copy)}
html .cmp-table tbody tr:nth-child(even) td{background:#fcfbfd}
html .cmp-table tbody tr:last-child th,html .cmp-table tbody tr:last-child td{border-bottom:0}
html .cmp-cards{display:none}

/* The deposit details: one fund at a time, its M-Pesa and bank cards side by side. */
html .pay-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
html .pay-bar [role="tab"]{min-height:44px;padding:0 20px;border:1px solid rgba(53,0,79,.2);border-radius:999px;background:#fff;font-weight:700;font-size:var(--fs-small);color:var(--plum);cursor:pointer}
html .pay-bar [role="tab"][aria-selected="true"]{border-color:var(--plum);background:var(--plum);color:#fff}
html .pay-section.is-tabbed .pay-panel > .doctabs-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
html .pay-panel > .doctabs-label{margin:24px 0 12px;font-family:var(--font-head);font-size:var(--fs-h3);color:var(--plum)}
html .pay-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
html .pay-card{padding:22px 24px;border:1px solid var(--hair);border-radius:20px;background:#fff;box-shadow:0 14px 34px rgba(53,0,79,.06)}
html .pay-card-title{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-family:var(--font-head);font-size:var(--fs-h3);color:var(--plum)}
html .pay-card dl,html .cmp-card dl{margin:0;display:grid}
html .pay-card dl > div,html .cmp-card dl > div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid rgba(53,0,79,.08)}
html .pay-card dt,html .cmp-card dt{font-size:.8rem;font-weight:700;letter-spacing:.02em;color:var(--plum)}
html .pay-card dd,html .cmp-card dd{margin:0;font-size:var(--fs-small);line-height:1.5;color:var(--copy);overflow-wrap:anywhere}
html .pay-card dd{font-variant-numeric:tabular-nums;color:var(--plum-dark)}

@media (max-width:900px){
  html .cmp-scroll{display:none}
  html .cmp-cards{display:grid;gap:16px}
  html .cmp-card{padding:20px;border:1px solid var(--hair);border-radius:20px;background:#fff}
  html .cmp-card h3{margin:0 0 10px;color:var(--plum)}
}
@media (max-width:560px){
  html .pay-card dl > div,html .cmp-card dl > div{grid-template-columns:minmax(0,1fr);gap:2px}
  html .pay-bar{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
  html .pay-bar [role="tab"]{flex:0 0 auto}
}