/* §4 feature cards — "Benefit Wells" (same instrument family as §2, deliberately re-keyed) */
    .rsg-page .hf2-card { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 2px 10px rgba(17,17,17,0.05); padding: 20px; display: flex; flex-direction: column; position: relative; overflow: hidden; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
    .rsg-page .hf2-card:hover { transform: translateY(-3px); border-color: rgba(44,122,75,0.45); box-shadow: 0 16px 36px rgba(17,17,17,0.10); }
    .rsg-page .hf2-card::after { content: ""; position: absolute; top: -20px; left: -20px; width: 120px; height: 120px; background: radial-gradient(circle, rgba(44,122,75,0.07), transparent 70%); pointer-events: none; z-index: 0; }
    .rsg-page .hf2-head, .rsg-page .hf2-well, .rsg-page .hf2-title, .rsg-page .hf2-desc { position: relative; z-index: 1; }
    .rsg-page .hf2-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .rsg-page .hf2-chip { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--green-500), var(--green-700)); box-shadow: 0 6px 14px rgba(44,122,75,0.24); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .rsg-page .hf2-chip svg { width: 18px !important; height: 18px !important; }
    .rsg-page .hf2-cap { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-700); }
    .rsg-page .hf2-well { position: relative; height: 92px; border-radius: 10px; overflow: hidden; padding: 12px; display: flex; align-items: center; justify-content: center; margin-top: 14px; background: linear-gradient(160deg, #FFF 0%, var(--green-50) 100%); border: 1px solid rgba(44,122,75,0.12); }
    .rsg-page .hf2-well::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--green-500), var(--green-700)); }
    .rsg-page .hf2-well svg { max-width: 100%; height: auto; }
    .rsg-page .hf2-card svg { flex-shrink: 0; }
    .rsg-page .hf2-title { font-family: var(--font-display); font-size: 15.5px; font-weight: 700; line-height: 1.3; color: var(--ink-900); margin: 14px 0 0; }
    .rsg-page .hf2-desc { font-family: var(--font-body); font-size: 13px; line-height: 1.58; color: var(--ink-500); margin: 6px 0 0; }
    /* highlight card #8 */
    .rsg-page .hf2-highlight { background: linear-gradient(135deg, var(--green-50), #FFF); border-color: rgba(44,122,75,0.28); border-left: 4px solid var(--green-500); padding-left: 18px; }
    .rsg-page .hf2-highlight .hf2-cap { background: linear-gradient(135deg, var(--green-500), var(--green-700)); color: #fff; padding: 3px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; }
    .rsg-page .hf2-highlight .hf2-cap::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #fff; }
    .rsg-page .hf2-highlight .hf2-well { background: linear-gradient(135deg, var(--green-50) 0%, #FFF 90%); }
    /* viz helpers */
    .rsg-page .hf2-cachewrap { display: flex; flex-direction: column; align-items: center; gap: 7px; }
    .rsg-page .hf2-pageMini { position: relative; width: 46px; height: 33px; background: #fff; border: 1px solid var(--line); border-radius: 5px; padding: 5px; display: flex; flex-direction: column; gap: 4px; }
    .rsg-page .hf2-skel { height: 3px; border-radius: 2px; background: var(--line-2); }
    .rsg-page .hf2-bolt { position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, var(--green-500), var(--green-700)); display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 7px rgba(44,122,75,0.35); }
    .rsg-page .hf2-bolt svg { width: 9px !important; height: 9px !important; }
    .rsg-page .hf2-track { width: 58px; height: 5px; background: var(--line-2); border-radius: 4px; overflow: hidden; }
    .rsg-page .hf2-fill { height: 100%; width: 92%; border-radius: 4px; background: linear-gradient(90deg, var(--green-500), var(--green-700)); }
    .rsg-page .hf2-imgrow { display: flex; align-items: center; gap: 9px; }
    .rsg-page .hf2-imgcol { display: flex; flex-direction: column; align-items: center; gap: 4px; }
    .rsg-page .hf2-imgTile { width: 30px; height: 30px; background: #fff; border: 1px solid var(--line); border-radius: 5px; display: flex; align-items: center; justify-content: center; }
    .rsg-page .hf2-imgTile.green { background: var(--green-50); border-color: rgba(44,122,75,0.25); }
    .rsg-page .hf2-imgTile svg { width: 15px !important; height: 15px !important; }
    .rsg-page .hf2-tag { font-family: var(--font-mono); font-size: 8px; font-weight: 700; color: var(--ink-500); letter-spacing: 0.04em; }
    .rsg-page .hf2-badge { font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; background: var(--green-50); color: var(--green-700); border-radius: 5px; padding: 1px 5px; letter-spacing: 0.02em; }
    .rsg-page .hf2-gate { display: flex; align-items: center; gap: 11px; }
    .rsg-page .hf2-reqs { display: flex; flex-direction: column; gap: 7px; }
    .rsg-page .hf2-req { display: inline-flex; align-items: center; gap: 3px; }
    .rsg-page .hf2-req svg { width: 13px !important; height: 13px !important; }
    .rsg-page .hf2-wall { width: 3px; height: 46px; border-radius: 2px; background: linear-gradient(180deg, var(--green-500), var(--green-700)); }
    .rsg-page .hf2-sitemini { width: 30px; height: 23px; background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 4px; display: flex; flex-direction: column; gap: 3px; }
    .rsg-page .hf2-sitemini span { height: 3px; border-radius: 2px; background: var(--green-50); }
    .rsg-page .hf2-up { font-family: var(--font-mono); font-size: 8px; font-weight: 700; text-transform: uppercase; background: var(--green-50); color: var(--green-700); border-radius: 4px; padding: 1px 5px; }
    .rsg-page .hf2-sslwrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
    .rsg-page .hf2-addr { width: 100px; height: 22px; background: #fff; border: 1px solid var(--line); border-radius: 999px; display: flex; align-items: center; gap: 5px; padding: 0 9px; }
    .rsg-page .hf2-addr svg { flex-shrink: 0; }
    .rsg-page .hf2-https { font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; color: var(--green-700); }
    .rsg-page .hf2-urlskel { flex: 1; height: 4px; background: var(--line-2); border-radius: 2px; }
    .rsg-page .hf2-cipher { display: flex; gap: 3px; }
    .rsg-page .hf2-cipher span { width: 6px; height: 6px; border-radius: 1px; }
    .rsg-page .hf2-chat { display: flex; flex-direction: column; gap: 5px; width: 108px; }
    .rsg-page .hf2-bub { padding: 6px 7px; border: 1px solid var(--line); }
    .rsg-page .hf2-bub.in { align-self: flex-start; background: #fff; border-radius: 10px 10px 10px 2px; }
    .rsg-page .hf2-bub.in span { display: block; height: 3px; width: 46px; border-radius: 2px; background: var(--line-2); }
    .rsg-page .hf2-bub.out { align-self: flex-end; background: var(--green-50); border-color: rgba(44,122,75,0.22); border-radius: 10px 10px 2px 10px; display: inline-flex; align-items: center; gap: 7px; }
    .rsg-page .hf2-avatar { width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, var(--green-500), var(--green-700)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .rsg-page .hf2-avatar svg { width: 9px !important; height: 9px !important; }
    .rsg-page .hf2-typing { display: inline-flex; gap: 3px; }
    .rsg-page .hf2-typing i { width: 3.5px; height: 3.5px; border-radius: 50%; background: var(--green-500); }
    .rsg-page .hf2-team { display: flex; flex-direction: column; align-items: center; gap: 6px; }
    .rsg-page .hf2-eye { color: var(--green-700); line-height: 0; }
    .rsg-page .hf2-eye svg { width: 18px !important; height: 18px !important; }
    .rsg-page .hf2-avstack { display: inline-flex; }
    .rsg-page .hf2-avstack .hf2-avatar { width: 19px; height: 19px; border: 1.5px solid #fff; margin-left: -5px; }
    .rsg-page .hf2-avstack .hf2-avatar:first-child { margin-left: 0; }
    .rsg-page .hf2-nodes { display: inline-flex; gap: 6px; align-items: center; }
    .rsg-page .hf2-nodes i { width: 5px; height: 5px; border-radius: 50%; background: rgba(44,122,75,0.32); }
    .rsg-page .hf2-stage { display: flex; align-items: center; gap: 9px; }
    @media (max-width: 600px) { .rsg-page .hf2-card { padding: 18px; } .rsg-page .hf2-highlight { padding-left: 16px; } }