/* ------------------------------------------------------------------
   care-plans.css - the Care & Growth Plans page, pricing first.

   Loads after base.css, modern.css and components.css. The header, buttons,
   eyebrows, the closing panel and the footer come from modern.css; the short
   hero, plan cards, steps and FAQ list from components.css. This file is the
   sections around the plan cards.
   ------------------------------------------------------------------ */

/* --- plans ---------------------------------------------------------- */
.plans{padding:29px 0 64px}
.plans-head{margin-bottom:23px}
.plans h2,.how h2,.faq-section h2{margin:8px 0;color:#261f31;font-size:clamp(24px,2.2vw,29px);font-weight:720;line-height:1.16;letter-spacing:-.042em}

/* The way to the build packages and the hour pack, side by side under the plans.
   Both are .callout-row from base.css, so only the look is changed here. */
.alternatives{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:25px}
.alternatives .callout-row{display:flex;align-items:center;justify-content:space-between;gap:22px;margin:0;padding:24px 27px;border:1px solid #e6dfe9;border-radius:17px;background:#fff;box-shadow:0 8px 25px #56406308}
.alternatives .callout-row:nth-child(2){background:#f4ebfb}
.alternatives .callout-row strong{margin-bottom:6px;color:#7c5590;font-size:10px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase}
.alternatives .callout-row span{margin:0;color:#625b6a;font-size:12px;line-height:1.75}
.alternatives .callout-row .btn{width:auto;padding:0 0 3px;gap:6px;border:0;border-bottom:1px solid #a782b3;border-radius:0;background:none;box-shadow:none;color:#83589c;font-size:12px;font-weight:800;white-space:nowrap}
.alternatives .callout-row .btn:hover{transform:none;color:#5f3a78;border-color:#5f3a78}

/* --- what every plan includes --------------------------------------- */
.benefits{border-block:1px solid #e9e1f0;background:#f1ebf5}
.benefits-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 25px;padding:19px 0 8px}
.benefits-left{color:#4e3957;font-size:11px;font-weight:750;white-space:nowrap}
.benefits-left span{color:#6b5d76;font-weight:500}
.benefits-items{display:flex;flex-wrap:wrap;align-items:center;gap:11px 23px}
.benefits-items span{display:inline-flex;align-items:center;gap:8px;color:#675a71;font-size:11px;font-weight:600}
.benefits-items i{display:inline-grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#e7d2ed;color:#89539a;font-size:11px;font-style:normal}
.benefits-context{padding-bottom:18px;color:#6a6076;font-size:12px;line-height:1.7}
.benefits-context p{margin:0}
.benefits-context .benefits-pricing-note{margin-bottom:8px;color:#65536d;font-size:11px;font-weight:650}

/* --- how a month runs ----------------------------------------------- */
.how{padding:73px 0 78px;border-bottom:1px solid #e8deed;background:#f1edf5}
.how-head{margin-bottom:30px}

/* --- questions ------------------------------------------------------ */
.faq-section{padding:82px 0 90px}
.faq-wrapper{display:grid;grid-template-columns:270px 1fr;gap:90px}

/* --- closing panel (the panel is in modern.css, its row layout in components.css) --- */
.modern-care-plans .section{padding-block:0 82px}

/* --- smaller screens ------------------------------------------------ */
@media(max-width:1100px){
  .faq-wrapper{gap:45px}
  .alternatives{grid-template-columns:1fr}
}
@media(max-width:830px){
  .benefits-inner{align-items:flex-start}
  .benefits-items{gap:8px 16px}
  .faq-wrapper{grid-template-columns:1fr;gap:20px}
}
@media(max-width:570px){
  .plans{padding:23px 0 46px}
  .plans-head{margin-bottom:18px}
  .benefits-inner{gap:8px;padding-top:15px}
  .benefits-left{font-size:10px}
  .benefits-items{gap:6px 12px}
  .benefits-items span{font-size:10px}
  .benefits-context{padding-bottom:14px}
  .alternatives .callout-row{flex-direction:column;align-items:flex-start;gap:13px;padding:21px}
  .how{padding:54px 0}
  .faq-section{padding:56px 0}
  .modern-care-plans .section{padding-bottom:55px}
}