/* ============ components.css (cards, grids, packages, pricing tables) ============ */

/* benefit cards */
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.bcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;transition:transform .18s ease,box-shadow .18s ease}
.bcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.bico{width:46px;height:46px;border-radius:12px;background:var(--navy);color:#fff;display:grid;place-items:center;margin-bottom:16px}
.bico svg{width:22px;height:22px}
.bcard h3{font-size:1.08rem;color:var(--navy);margin-bottom:6px}
.bcard p{font-size:.92rem;color:var(--muted)}

/* module grid (home) */
.mods{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.modcard{display:flex;gap:16px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;transition:border-color .15s,box-shadow .15s,transform .15s}
.modcard:hover{border-color:var(--green);box-shadow:0 8px 20px rgba(36,46,61,.07);transform:translateY(-2px)}
.mico{width:44px;height:44px;flex:0 0 auto;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center}
.mico svg{width:21px;height:21px}
.modcard b{display:block;color:var(--navy);font-size:1rem}
.modcard span{font-size:.86rem;color:var(--muted)}
.modcard .go{margin-left:auto;color:var(--green-dk);flex:0 0 auto}
.modcard .go svg{width:18px;height:18px}

/* packages */
.packs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
.pack{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px 22px 26px;display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease}
.pack:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(36,46,61,.12)}
.pack.pop{border:2px solid var(--green);box-shadow:0 22px 50px rgba(140,191,68,.18)}
.pop-tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--green);color:var(--navy);font-size:.72rem;font-weight:800;letter-spacing:.06em;padding:5px 13px;border-radius:999px}
.pack .picon{width:46px;height:46px;border-radius:12px;background:var(--green);display:grid;place-items:center;margin-bottom:14px}
.pack .picon svg{width:23px;height:23px;color:#fff}
.pack .ptag{font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--green-dk)}
.pack h3{font-size:1.45rem;font-weight:800;color:var(--navy);margin:3px 0 14px}
.price{display:flex;align-items:baseline;gap:6px;margin-bottom:2px}
.price b{font-size:2.1rem;font-weight:800;color:var(--navy);line-height:1}
.price .cur{font-weight:700;color:var(--navy)}
.price.small b{font-size:1.5rem}
.per{font-size:.82rem;color:var(--muted);margin-bottom:18px}
.pack ul{list-style:none;display:grid;gap:10px;margin-bottom:20px}
.pack li{display:flex;gap:9px;font-size:.9rem;color:var(--ink)}
.pack li svg{width:17px;height:17px;color:var(--green-dk);flex:0 0 auto;margin-top:3px}
.pack .ideal{margin-top:auto;font-size:.82rem;color:var(--muted);background:var(--greent);border-radius:9px;padding:10px 12px}
.pack .ideal b{color:var(--green-dk)}
.pack .btn{margin-top:16px;justify-content:center;width:100%}

/* pricing tables */
.price-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.ptable{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.ptable h4{background:var(--navy);color:#fff;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;padding:13px 18px;display:flex;justify-content:space-between}
.ptable h4 span{color:var(--green)}
.prow{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 18px;border-top:1px solid var(--line)}
.prow:nth-child(even){background:var(--soft)}
.prow .lbl{font-size:.92rem;color:var(--navy);font-weight:500}
.prow .val{font-weight:700;color:var(--green-dk);white-space:nowrap;font-size:.95rem}
.note{margin-top:22px;font-size:.85rem;color:var(--muted);font-style:italic}
.star{color:var(--green-dk);font-weight:700}

@media (max-width:920px){
  .cards4{grid-template-columns:1fr 1fr}
  .packs{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .cards4,.mods,.packs,.price-cols{grid-template-columns:1fr}
}