/* ============================================================
   pages/special-feature.css — special-feature page extras.
   Feature pages link payment-method.css (shared detail styles)
   plus this file for feature-specific blocks.
   ============================================================ */

/* Use-cases / configuration cards */
.usecase-grid{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.usecase-grid{grid-template-columns:1fr}}
.usecase{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.usecase .uc-ico{width:40px;height:40px;border-radius:var(--r-md);background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.usecase .uc-ico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.usecase h3{font-size:var(--t-base);font-family:var(--font-body);font-weight:var(--fw-semibold)}
.usecase p{font-size:var(--t-sm);color:var(--text-muted)}

/* Highlight / "only plugin with" banner */
.highlight-band{display:flex;gap:var(--s4);align-items:center;padding:var(--s6);border-radius:var(--r-xl);
  background:linear-gradient(120deg,var(--primary-soft),var(--accent-soft));border:1px solid var(--border)}
.highlight-band .hb-ico{width:48px;height:48px;flex:0 0 auto;border-radius:var(--r-md);background:var(--surface);color:var(--primary);display:grid;place-items:center;box-shadow:var(--sh-sm)}
.highlight-band .hb-ico svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.highlight-band b{display:block;color:var(--text);font-family:var(--font-display);font-size:var(--t-lg)}
.highlight-band p{color:var(--text-muted);font-size:var(--t-sm);margin-top:2px}