/* HIMS plans page: 4 plan cards rendered by hims-plans.js into #hims-plans-root. */
.hims-plans4{--hp4-c:#1f7a86;--hp4-c2:#2a9aa6;font-family:Montserrat,sans-serif;max-width:1360px;margin:0 auto;padding:0 16px;color:#33404d;text-align:left}
.hims-plans4 .hp4-grid{display:grid;grid-template-columns:1fr;gap:24px;align-items:stretch}
@media (min-width:768px){.hims-plans4 .hp4-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.hims-plans4 .hp4-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.hp4-head p{min-height:4.35em}}

.hp4-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid #dbe7ee;border-radius:24px;box-shadow:0 10px 30px rgba(15,147,199,.10);overflow:hidden;transition:transform .2s,box-shadow .2s}
.hp4-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(15,147,199,.18)}
.hp4-basic{--hp4-c:#1f7a86;--hp4-c2:#2f9aa4}
.hp4-standard{--hp4-c:#136f8c;--hp4-c2:#1f8aa8}
.hp4-professional{--hp4-c:#0a6aa1;--hp4-c2:#0f86c0}
.hp4-enterprise{--hp4-c:#1b3f7a;--hp4-c2:#2a5a9e}
.hp4-rec{border:3px solid #0f93c7;box-shadow:0 14px 38px rgba(15,147,199,.25)}

/* Curved header, echoing the old Lite/Pro card artwork */
.hp4-head{position:relative;padding:30px 22px 46px;text-align:center;color:#fff;background:linear-gradient(135deg,var(--hp4-c),var(--hp4-c2))}
.hp4-head::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-34px;height:60px;background:#fff;border-radius:50% 50% 0 0/100% 100% 0 0}
.hp4-head h3{margin:0 0 8px;font-size:1.75rem;font-weight:700;color:#fff;line-height:1.2}
.hp4-head p{margin:0;font-size:.9rem;font-weight:500;line-height:1.45;color:#fff}

.hp4-body{display:flex;flex-direction:column;flex:1;padding:4px 22px 22px;position:relative}
.hp4-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none;margin:0 0 14px;padding:0}
.hp4-chips li{background:#eef7fb;color:#0b5f86;border-radius:999px;padding:4px 12px;font-size:.78rem;font-weight:600}
.hp4-total{text-align:center;margin:0 0 16px;font-size:.95rem;color:#5b6b7a}
.hp4-total b{display:block;font-size:2.1rem;line-height:1.1;color:var(--hp4-c)}
.hp4-lead{margin:0 0 8px;font-weight:600;font-size:.9rem;color:#33404d}
.hp4-list,.hp4-all ul{list-style:none;margin:0;padding:0}
.hp4-list li,.hp4-all li,.hp4-addon-line{display:flex;align-items:flex-start;gap:8px;margin:0 0 9px;font-size:.9rem;line-height:1.4}
.hp4-list small{color:#5b6b7a;font-size:.8rem;white-space:nowrap}
.hp4-ico{flex:none;width:18px;height:18px;margin-top:1px;color:#0ccb6c}
.hp4-addon-line{color:#5b6b7a;margin-top:4px}
.hp4-addon-line .hp4-ico,.hp4-addons .hp4-ico{color:#0f93c7}

.hp4-more{margin:10px 0 0;border-top:1px dashed #d3e2ea;padding-top:10px}
.hp4-more summary{cursor:pointer;font-weight:600;font-size:.9rem;color:#0a6aa1;padding:4px 0;list-style-position:inside}
.hp4-more summary:focus-visible,.hp4-btn:focus-visible{outline:3px solid #ffc94d;outline-offset:2px;border-radius:6px}
.hp4-all{max-height:340px;overflow:auto;margin-top:8px;padding-right:4px}
.hp4-all h4{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--hp4-c);margin:12px 0 6px}
.hp4-all li{font-size:.85rem;margin-bottom:6px}

.hp4-cta{margin-top:auto;padding-top:18px;display:flex;flex-direction:column;gap:10px}
.hp4-btn{display:block;text-align:center;border-radius:999px;padding:11px 16px;font-weight:600;font-size:.92rem;text-decoration:none!important;border:2px solid var(--hp4-c);color:var(--hp4-c);background:#fff;transition:background .2s,color .2s}
.hp4-btn:hover{background:#eef7fb;color:var(--hp4-c)}
.hp4-btn.hp4-primary{background:var(--hp4-c);color:#fff}
.hp4-btn.hp4-primary:hover{background:var(--hp4-c2);border-color:var(--hp4-c2);color:#fff}

.hp4-status{text-align:center;padding:40px 16px;font-size:1rem;color:#5b6b7a}

@media (max-width:767px){
  .hp4-head{padding:24px 18px 42px}
  .hp4-head h3{font-size:1.5rem}
  .hp4-body{padding:4px 18px 20px}
  .hp4-card:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){.hp4-card,.hp4-btn{transition:none}.hp4-card:hover{transform:none}}
