/* wire3-shared — components/plan-features.css
   The "pick your plan" intro that sits above a plan selector: a centred section head
   (.plan-head) + a clean, boxless 3-up row of always-on essentials (.plan-feats, icon +
   label). Token-themed (outward tokens); pairs with components/speed-carousel.css. OPT-IN:
   <link> per page (not auto-imported by layouts/outward.css). The app supplies the copy +
   inline SVG icons; this file is the styling. Uses the shared `rise` keyframe (core/reset). */

.plan-head { text-align:center; max-width:660px; margin:6px auto 16px; animation:rise .5s var(--ease) both; }
.plan-head h1 { font-size:2.2em; line-height:1.1; margin:0 0 10px; color:var(--navy); }
.plan-head p { color:var(--grey-dk); font-size:1.05em; max-width:600px; margin:0 auto; }

.plan-feats { list-style:none; margin:0 auto 6px; padding:0; max-width:760px; display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center; gap:10px 36px; }
.plan-feats li { display:flex; align-items:center; gap:9px; font-family:var(--font-head); font-weight:700; font-size:.95em; color:var(--navy); }
.plan-feats li svg { width:19px; height:19px; flex-shrink:0; color:var(--green-dk); }

@media (max-width:560px){
  .plan-head h1 { font-size:1.72em; }
  .plan-head p { font-size:.98em; }
  .plan-feats { gap:11px 22px; }
  .plan-feats li { font-size:.9em; }
}