/* Grizzly Beam — /services/care-plans/
   v2 content rebuild, 2026-09-21.
   Shared: .svc-hero*, .svc-plus, .svc-closer*, .svc-sec*, .svc-faq/.svc-fq → components.css
   Page-only below: the hero, the three plan cards, and the lock-in band. */

/* ---------- 1 · Hero ---------- */
.care-hero { display: flex; align-items: center; justify-content: center; }
/* ---------- 3 · Plans & pricing ----------
   The cards are the one boxed element on the page, because a plan has to read as a
   thing you pick, not as a paragraph. Paper on the gradient, radius 14 (§06), a
   hairline rather than elevation — the brand book keeps shadows for things that
   actually float.

   No amber anywhere in this grid. The brand book allows one high-intent amber element
   per view and the header already spends it on "Book a call"; three amber buttons in a
   row would blow past that, so the three CTAs are --ink, like every other body CTA.
   Amber stays on the ticks, where it carries meaning instead of weight. */
.care-price__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.4rem; margin-top: 4.6rem; align-items: stretch;
}
.care-plan {
  position: relative;
  background: var(--paper);
  border: 1px solid rgba(22, 24, 28, 0.14);
  border-radius: var(--r-14);
  padding: 3rem 2.6rem;
  display: flex; flex-direction: column;
}
.care-plan__name {
  font-family: var(--f-mono);
  font-size: 1.05rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 400;
  color: var(--amber-deep);
}
.care-plan__price { margin-top: 1.4rem; display: flex; align-items: baseline; gap: 0.4rem; }
.care-plan__amt {
  font-family: var(--f-disp);
  font-size: 4rem; line-height: 1; letter-spacing: -0.01em; font-weight: var(--w-display);
}
.care-plan__per { font-family: var(--f-body); font-size: 1.15rem; color: var(--tx-g); }
/* min-height so the three "for" lines, which run one or two lines, do not push the
   feature lists out of alignment with each other. */
.care-plan__for { color: var(--tx-g); margin-top: 1rem; min-height: 3.8rem; }

.care-plan__list { list-style: none; margin-top: 2rem; flex: 1; }
.care-plan__f {
  display: flex; align-items: flex-start; gap: 1rem;
  font-family: var(--f-body); font-size: 1.22rem; line-height: 1.4;
  color: var(--ink);
  padding-block: 0.85rem;
  border-top: 1px solid rgba(22, 24, 28, 0.1);
}
.care-plan__f:first-child { border-top: none; }
.care-plan__f svg { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; color: var(--amber-deep); }   /* §08: 16px inline */
/* Not in this plan. The cross is the signal, the color only reinforces it (WCAG 1.4.1);
   --tx-ph is the lightest shade on the site that still passes AA on paper. */
.care-plan__f--no { color: var(--tx-ph); }
/* --tx-ph, not --stone3: the cross is the signal a sighted reader actually goes by,
   and stone3 on paper measured 1.45 — all but invisible. It now matches the dimmed
   label beside it at 5.53. */
.care-plan__f--no svg { color: var(--tx-ph); }

.care-plan__cta { margin-top: 2.4rem; justify-content: center; }
.care-price__note { margin-top: 3.4rem; }

/* ---------- 4 · No lock-in (ink + beam field) ----------
   Backdrop: the same beam field as "Our services" on the home page. Markup is
   components/BeamField.astro, styles (.hs__bg/.hsbg*) live in core.css, so nothing is
   duplicated here — .svc-sec--beam in components.css only makes the section the
   positioning context and clips the beams, exactly like .hs does in home.css.

   One ink block between two light sections, so the field's hard bottom edge lands
   where the dark ends. */
.care-lock { padding-block: 10rem; }
.care-lock .svc-sec__body { max-width: 48rem; margin-top: 3.2rem; }

/* ---------- 6 · Closer ---------- */
.care-closer { padding-block: 9rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .care-price__grid { grid-template-columns: 1fr; gap: 2.8rem; margin-top: 3.8rem; max-width: 44rem; margin-inline: auto; }
  .care-plan__for { min-height: 0; }
  .care-lock { padding-block: 7rem; }
}
@media (max-width: 767px) {
  .care-hero__title { font-size: 3.1rem; }
  .care-plan { padding: 2.6rem 2rem; }
  .care-plan__amt { font-size: 3.4rem; }
  .care-lock { padding-block: 6rem; }
  .care-closer { padding-block: 6rem; }
}