/* ============================================================
   pages/payment-method.css — individual payment-method page
   (also used as base for special-feature.css)
   ============================================================ */

/* ---- Detail hero ---- */
.detail-hero{position:relative;overflow:hidden;padding-block:var(--s7) var(--s7)}
.detail-hero::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:radial-gradient(680px 320px at 90% -20%,var(--primary-soft),transparent 60%)}
.detail-hero__in{position:relative;max-width:760px}
.detail-hero .dh-ico{width:64px;height:64px;border-radius:var(--r-lg);background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;margin-bottom:var(--s5)}
.detail-hero .dh-ico svg{width:34px;height:34px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.detail-hero h1{font-size:clamp(2.1rem,4.4vw,var(--t-5xl));letter-spacing:-.03em}
.detail-hero .tagline{font-size:var(--t-xl);color:var(--text-muted);margin-top:var(--s4);max-width:54ch}
.detail-hero .hero-badges{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s5)}

/* ---- Prose / explanation ---- */
.prose-block{max-width:var(--maxw-prose)}
.prose-block h2{font-size:var(--t-2xl);margin-bottom:var(--s4)}
.prose-block h2:not(:first-child){margin-top:var(--s7)}
.prose-block p{color:var(--text-muted);font-size:var(--t-lg)}
.prose-block p + p{margin-top:var(--s4)}

/* ---- Step flow ---- */
.steps{list-style:none;padding:0;counter-reset:step;display:grid;gap:var(--s4);margin-top:var(--s5)}
.steps li{display:flex;gap:var(--s4);align-items:flex-start;counter-increment:step}
.steps li::before{content:counter(step);flex:0 0 auto;width:34px;height:34px;border-radius:var(--r-full);background:var(--primary-soft);color:var(--primary);font-family:var(--font-mono);font-weight:var(--fw-semibold);display:grid;place-items:center;font-size:var(--t-sm)}
.steps li span{padding-top:5px;color:var(--text);font-size:var(--t-base)}

/* ---- Benefits two-column ---- */
.benefits-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
@media (max-width:760px){.benefits-split{grid-template-columns:1fr}}
.benefit-col{padding:var(--s6)}
.benefit-col h3{font-size:var(--t-lg);display:flex;align-items:center;gap:10px;margin-bottom:var(--s4)}
.benefit-col h3 svg{width:22px;height:22px;color:var(--primary);stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.benefit-col ul{list-style:none;padding:0;display:grid;gap:12px}
.benefit-col li{display:flex;gap:10px;font-size:var(--t-sm);color:var(--text-muted);align-items:flex-start}
.benefit-col li svg{width:18px;height:18px;flex:0 0 auto;color:var(--accent);stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}

/* ---- Availability ---- */
.availability .data-table td:first-child{font-weight:var(--fw-semibold);color:var(--text)}

/* ---- Key features chips ---- */
.keylist{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px var(--s5)}
@media (max-width:640px){.keylist{grid-template-columns:1fr}}
.keylist li{display:flex;gap:10px;font-size:var(--t-sm);color:var(--text-muted);align-items:flex-start}
.keylist li svg{width:18px;height:18px;flex:0 0 auto;color:var(--accent);stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}

/* ---- Related ---- */
.related-grid{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.related-grid{grid-template-columns:1fr}}

/* index page grids */
.index-grid{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.index-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.index-grid{grid-template-columns:1fr}}