/* ---------------------------------------------------------------------------
   pages.css: the two explainer pages that sit beside Pricing, loaded after
   site.css. /how-it-works (the path a shop owner takes, one white panel per
   step) and /plan (what your site will include: a checklist that names the
   package, over a plain list of all four). Everything else (tokens, header,
   actions, close band, footer, .estimate-form) comes from site.css.
   --------------------------------------------------------------------------- */

/* --- how it works: an ordered list of white panels, the step's heading on the
   left, what happens and who does what on the right. The order is carried by
   the <ol> and the reading order, not by printed numbers. --- */

.path { display:grid; gap:12px; }
.path-step {
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:18px clamp(28px,4.5vw,80px);
  padding:clamp(26px,3vw,40px) clamp(22px,3vw,44px);
  background:var(--white); border-radius:var(--radius);
  scroll-margin-top:100px;
}
.path-step h2 { max-width:18ch; font-size:clamp(1.55rem,2.3vw,2.2rem); font-weight:700; letter-spacing:-.035em; line-height:1.08; text-wrap:balance; }
.path-body { font-size:clamp(1rem,1.15vw,1.0625rem); line-height:1.6; text-wrap:pretty; }
.path-body > p + p { margin-top:.9em; }
.path-body a { color:var(--blue); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.who { display:grid; gap:10px; margin:22px 0 0; }
.who > div { display:grid; grid-template-columns:7.5em minmax(0,1fr); gap:4px 16px; }
.who dt { font-weight:600; }
.who dd { margin:0; color:#3d4759; }

/* --- plan: the checklist (reuses Pricing's .estimate-form box and result) --- */

.plan-tool > h2 { margin-bottom:12px; }
.plan-tool[hidden] { display:none; }
.plan-checks { display:grid; gap:26px; align-content:start; }
.plan-choice legend { float:left; width:100%; margin:0 0 4px; font-size:14.5px; font-weight:700; }
.plan-choice > label { clear:both; display:flex; align-items:flex-start; gap:12px; padding:9px 0; font-size:15px; font-weight:500; line-height:1.4; cursor:pointer; }
.plan-choice input[type="checkbox"] { flex:none; width:18px; height:18px; margin:1px 0 0; accent-color:var(--blue); }

.plan-name { display:block; font-size:19px; font-weight:600; letter-spacing:-.03em; line-height:1.2; }
.plan-result .estimate-total { margin-top:10px; }
.plan-result h3 { margin-top:26px; font-size:15px; font-weight:700; letter-spacing:-.01em; line-height:1.3; }
.plan-list { margin-top:10px; padding-left:1.15em; list-style:disc; font-size:15px; line-height:1.45; }
.plan-list li + li { margin-top:6px; }
.plan-list li::marker { color:var(--blue); }
.plan-why { color:#3d4759; }
.plan-result .estimate-note a { color:var(--blue); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* --- plan: the four packages, always on the page, and the whole page without
   JavaScript. Pricing's .package box with the contents listed in it. --- */

.all-packages > h2 { margin-bottom:12px; }
.all-packages .package-grid { margin-top:clamp(24px,3vw,36px); }
.package .plan-facts { flex-grow:0; margin-top:12px; color:var(--muted); font-size:15px; }
.package .plan-list { flex-grow:1; margin-top:16px; }
.package .plan-list .plan-carry { color:var(--muted); }
.package.is-match { outline:3px solid var(--blue); outline-offset:-3px; }

@media (max-width:1080px) {
  .path-step { gap:14px 36px; }
}

@media (max-width:760px) {
  .path { gap:10px; }
  .path-step { grid-template-columns:1fr; gap:12px; padding:22px 18px 24px; }
  .path-step h2 { max-width:none; font-size:1.5rem; }
  .who > div { grid-template-columns:1fr; gap:0; }
  .who { gap:12px; margin-top:18px; }
  .all-packages .package-grid { grid-template-columns:1fr; }
  .package .plan-list { font-size:14.5px; }
  .package .plan-facts { font-size:14px; }
}