/* 2k Web Developments — plans.css
   The recurring-subscription pricing component, defined ONCE and linked by both
   signup pages (services/local-seo, services/care-hosting). Mobile-first:
   a stacked accordion + a sticky bottom action bar on phones; a 3-up grid with
   always-open cards + inline CTAs on >=880px. Reuses styles.css tokens (--purple,
   --cyan, --ink*, --bd-l, --r-lg, --grad, Sora/Manrope/JetBrains Mono). Scoped
   under .plans / .plans-bar so it never collides with the page's .card etc.

   Static-content contract: JS only toggles the .is-open collapse class; every
   feature <li> is always in the DOM (crawlers must see them), only visually hidden. */

.plans{margin-top:8px}

/* ---- grid / stack ---------------------------------------------------------- */
.plans-grid{display:flex;flex-direction:column;gap:16px;list-style:none;margin:0;padding:0}

.ptier{position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--bd-l);border-radius:var(--r-lg);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.ptier.is-selected{border-color:var(--purple);box-shadow:0 14px 40px -26px rgba(164,53,239,.55)}
.ptier.is-popular{border:2px solid var(--purple);box-shadow:0 18px 50px -28px rgba(164,53,239,.5)}

.ptier-tag{position:absolute;top:14px;right:14px;background:var(--grad);color:#fff;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;padding:5px 11px;border-radius:999px;z-index:1}

/* ---- accordion head (always visible: name, blurb, price) ------------------- */
.ptier-head{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:6px 14px;
  width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:22px 22px;
  font-family:inherit;color:inherit}
.ptier-name{grid-column:1;grid-row:1;font-family:'Sora','Sora Fallback',system-ui,sans-serif;font-size:20px;font-weight:600;color:var(--ink)}
.ptier-blurb{grid-column:1;grid-row:2;color:var(--ink-soft);font-size:14px;margin-top:2px}
.ptier-price{grid-column:2;grid-row:1 / span 2;display:flex;align-items:baseline;gap:4px}
.ptier-amt{font-family:'Sora','Sora Fallback',system-ui,sans-serif;font-weight:800;font-size:34px;letter-spacing:-.02em;color:var(--ink)}
.ptier-per{color:var(--ink-soft);font-size:13px}
.ptier-chev{grid-column:3;grid-row:1 / span 2;justify-self:end;align-self:center;display:none;
  width:20px;height:20px;color:var(--ink-soft);transition:transform .25s;flex:none}
.ptier.is-open .ptier-chev{transform:rotate(180deg)}
/* .ptier is overflow:hidden below 880px, which clips a positive-offset outline
   completely. Draw the ring inside the button instead. */
.ptier-head:focus-visible{outline-offset:-3px}

/* ---- collapsible body (features + CTA) ------------------------------------- */
.ptier-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.ptier.is-open .ptier-body{grid-template-rows:1fr}
.ptier-body-inner{overflow:hidden;min-height:0}
.ptier-feats{list-style:none;margin:0;padding:2px 22px 8px;display:flex;flex-direction:column;gap:11px}
.ptier-feats li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--ink-soft)}
.ptier-feats svg{width:16px;height:16px;margin-top:4px;flex:none;color:var(--purple)}
.ptier-feats li.is-muted{color:var(--ink-faint)}
.ptier-feats li.is-muted svg{color:var(--ink-faint)}
.ptier-cta{padding:6px 22px 24px}
.ptier-cta .btn{justify-content:center;width:100%}

/* ---- consent (care only) --------------------------------------------------- */
.plans-consent{max-width:580px;margin:26px auto 0;display:flex;gap:11px;align-items:flex-start;
  font-size:14.5px;color:var(--ink-soft);line-height:1.5;border-radius:12px;padding:10px 12px;transition:background .2s}
.plans-consent input{margin-top:3px;flex:none;width:18px;height:18px;accent-color:var(--purple)}
.plans-consent a{color:var(--purple);font-weight:600}
.plans-consent.nudge{background:rgba(164,53,239,.08);animation:plans-shake .5s}
.plans-consent .consent-hint{display:block;color:var(--violet);font-weight:600;font-size:13px;margin-top:4px;opacity:0;height:0;overflow:hidden;transition:opacity .2s}
.plans-consent.nudge .consent-hint{opacity:1;height:auto}
@keyframes plans-shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.plans-consent.nudge{animation:none}}

.plans-note{text-align:center;color:var(--ink-soft);font-size:15px;margin-top:26px}
.plans-note a{color:var(--purple);font-weight:600}

/* ---- sticky action bar (mobile) ------------------------------------------- */
.plans-bar{position:fixed;left:0;right:0;bottom:0;z-index:140;
  background:rgba(255,255,255,.97);backdrop-filter:blur(12px);
  border-top:1px solid var(--bd-l);box-shadow:0 -10px 30px -18px rgba(26,18,40,.5);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
.plans-bar-consent{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.4;
  color:var(--ink-soft);margin-bottom:10px}
.plans-bar-consent input{margin-top:2px;flex:none;width:17px;height:17px;accent-color:var(--purple)}
.plans-bar-consent a{color:var(--purple);font-weight:600}
.plans-bar-row{display:flex;align-items:center;gap:14px}
.plans-bar-info{display:flex;flex-direction:column;line-height:1.15}
.plans-bar-label{font-size:12px;color:var(--ink-soft)}
.plans-bar-price{font-family:'Sora','Sora Fallback',system-ui,sans-serif;font-weight:800;font-size:20px;color:var(--ink)}
.plans-bar-price .per{font-family:'Manrope','Manrope Fallback',system-ui,sans-serif;font-weight:500;font-size:12px;color:var(--ink-soft)}
.plans-bar .btn{flex:1;justify-content:center;white-space:nowrap}

/* ============================================================================
   >= 880px: relax to a 3-up grid, all cards open, inline CTAs, no sticky bar.
   ========================================================================== */
@media (min-width:880px){
  /* extra top room so the featured card's overhanging "Most popular" badge
     (.ptier-tag top:-13px, below) has clean breathing space above the grid */
  .plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;margin-top:26px}
  /* the badge overhangs the card's top edge on desktop, so the card must NOT clip
     it. overflow:hidden stays on <880 (base rule) where the badge sits inside the
     card; the accordion collapse never relied on .ptier overflow (it uses
     .ptier-body-inner{overflow:hidden}), and bodies are force-open here anyway. */
  .ptier{padding-bottom:4px;overflow:visible}
  .ptier.is-popular{order:0}
  .ptier-head{cursor:default;padding:30px 26px 8px}
  .ptier-chev{display:none!important}
  /* force every body open on desktop regardless of JS accordion state */
  .ptier-body{grid-template-rows:1fr!important}
  .ptier-feats{flex:1;padding:16px 26px 8px}
  .ptier-cta{margin-top:auto;padding:10px 26px 28px}
  .ptier-tag{top:-13px;left:26px;right:auto}
  .plans-bar{display:none!important}
  .ptier:hover{transform:translateY(-4px)}
  .ptier{transition:transform .3s,border-color .2s,box-shadow .2s}
}

/* On phones the chevron affordance shows and the popular card keeps its top spot. */
@media (max-width:879.98px){
  .ptier-chev{display:block}
  .ptier.is-popular{order:-1}
  .ptier-tag{top:14px}
}

/* Out-of-scope hourly rate, under the plan cards on /services/care-hosting.
   Copy lives in plans.CARE['out_of_scope_note'] and interpolates
   facts.PRICES['out_of_scope_hourly'] so the figure can't drift from
   maintenance-terms.html. */
.out-of-scope{max-width:760px;margin:22px auto 0;font-size:15px;
  color:var(--ink-soft);text-align:center}
.out-of-scope a{color:inherit;text-decoration:underline}