/* pricing.css — the home page pricing section: plan cards, the
   monthly/yearly toggle and the comparison table. Loaded after site.css so
   it refines the shared .price-card styles; the comparison table's .pc-*
   rules live in billing.css (loaded later), so those overrides are scoped
   under .pricing to win on specificity and never touch the in-app page.

   Design: one bold moment — the featured "Popular" card, lifted and
   grape-lit — with everything around it quiet and roomy. All motion is
   gated by html[data-motion="on"] and prefers-reduced-motion, matching
   site.css. No price or copy is set here; numbers come from the API. */

/* ---------- layout: a calmer, roomier grid ---------- */
.pricing .site-head { margin-bottom: var(--space-12); }
.pricing .site-head--row { gap: var(--space-6); flex-wrap: wrap; }
.pricing .site-lead { max-width: 56ch; }

.price-grid {
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  align-items: stretch;
  padding-top: var(--space-2); /* room for the Popular flag to overhang */
}

/* ---------- plan cards ---------- */
.price-card {
  gap: var(--space-4);
  padding: var(--space-8) var(--space-6) var(--space-6);
  border-radius: var(--radius-lg);
  transition: border-color 160ms var(--ease-out, ease-out),
    box-shadow 160ms var(--ease-out, ease-out),
    transform 160ms var(--ease-out, ease-out);
}

.price-card__head { display: flex; flex-direction: column; gap: var(--space-2); }
.price-card__name {
  font: 600 13px/18px var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.price-card__desc {
  flex: none;
  margin: 0;
  font: 400 14px/21px var(--font-sans);
  color: var(--ink-muted);
  min-height: 42px; /* keeps prices across cards on one baseline */
}

/* price is the hero of each card */
.price-card__price {
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 6px;
  font: 800 40px/44px var(--font-display);
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.price-card__per { font: 500 14px/20px var(--font-sans); color: var(--ink-muted); letter-spacing: 0; }
.price-card__from {
  font: 600 12px/16px var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  width: 100%;
  margin-bottom: 2px;
}

/* savings / status pills */
.price-card__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); min-height: 26px; }
.price-card__save {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--patched-wash);
  color: var(--patched);
  font: 600 12px/18px var(--font-sans);
}
.price-card__save--muted { background: var(--surface-raised); color: var(--ink-muted); }

/* the one included detail we have per plan: the credit line */
.price-card__credit {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  font: 400 13px/19px var(--font-sans);
  color: var(--ink);
}
.price-card__credit i { margin-top: 2px; color: var(--fizz-text); font-size: 13px; }

/* CTA pinned to the foot so buttons align across cards of any height */
.price-card .mc-btn.price-card__cta { margin-top: auto; width: 100%; min-height: 44px; }

/* ---------- the one bold card: Popular ---------- */
.price-card--featured {
  border-color: var(--grape);
  background:
    radial-gradient(120% 60% at 50% -10%, var(--grape-wash), transparent 70%),
    var(--surface);
  box-shadow: var(--shadow-pop);
}
.price-card--featured .price-card__price { color: var(--ink); }

.price-card__flag {
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  background: var(--grape);
  color: var(--bg);
  font: 700 11px/16px var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* team card reads as the "scale up" option */
.price-card--team { border-style: dashed; }

/* ---------- hover (gated below for motion) ---------- */
.price-card:hover { border-color: var(--border-strong); }
.price-card--featured:hover { border-color: var(--grape); }

/* ---------- loading skeletons ---------- */
.price-card--skeleton {
  min-height: 340px;
  gap: var(--space-4);
  justify-content: flex-start;
}
.price-skel {
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
}
.price-skel--title { width: 38%; height: 14px; }
.price-skel--desc { width: 80%; height: 12px; }
.price-skel--price { width: 55%; height: 40px; border-radius: var(--radius-md); margin: var(--space-2) 0; }
.price-skel--badge { width: 42%; height: 24px; border-radius: var(--radius-pill); }
.price-skel--line { width: 100%; height: 52px; border-radius: var(--radius-md); }
.price-skel--cta { margin-top: auto; width: 100%; height: 44px; border-radius: var(--radius-md); }

/* ---------- fallback ---------- */
.price-fallback {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink-muted);
  text-align: left;
}
.price-fallback__text { display: flex; flex-direction: column; gap: var(--space-2); }
.price-fallback__title { margin: 0; font: 700 18px/26px var(--font-display); color: var(--ink); }
.price-fallback__body { margin: 0; max-width: 52ch; font: 400 14px/22px var(--font-sans); }

/* ---------- monthly / yearly toggle ---------- */
.pricing .bl-toggle {
  padding: 3px;
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-card);
}
.pricing .bl-toggle__opt {
  padding: 6px 18px;
  font: 600 14px/20px var(--font-sans);
  color: var(--ink-muted);
  transition: color 140ms var(--ease-out, ease-out), background-color 140ms var(--ease-out, ease-out);
}
.pricing .bl-toggle__opt[aria-checked="true"] {
  background: var(--grape-wash);
  color: var(--ink);
}
.pricing .bl-toggle__opt:hover { color: var(--ink); }

/* ---------- compare + estimate ---------- */
.price-compare { margin-top: var(--space-12); gap: var(--space-6); }
.price-compare__btn { min-height: 40px; }
.price-estimate {
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.price-estimate .site-h3 { margin-top: 0; margin-bottom: var(--space-4); }

/* ---------- comparison table (scoped: in-app billing page untouched) ---------- */
.pricing .pc { width: 100%; }
.pricing .pc-scroll {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.pricing .pc-table { min-width: 680px; }
.pricing .pc-table thead th {
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-strong);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
.pricing .pc-table thead th.pc-corner { background: var(--surface-raised); }
.pricing .pc-name { font: 700 15px/22px var(--font-display); color: var(--ink); }
.pricing .pc-label { background: var(--surface); }

/* readability: a quiet row highlight on hover */
.pricing .pc-row:hover > th,
.pricing .pc-row:hover > td { background: var(--surface-raised); }
.pricing .pc-row:hover .pc-col--current { background: var(--grape-wash); }

/* clearer check / cross marks */
.pricing .pc-yes { color: var(--patched); font-size: 15px; }
.pricing .pc-no { color: var(--ink-muted); opacity: 0.6; font-size: 15px; }

/* feature-group header rows stand apart */
.pricing .pc-group__btn {
  font: 600 13px/18px var(--font-sans);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.pricing .pc-group__title { color: var(--ink); }

@media (max-width: 560px) {
  .price-card { padding: var(--space-6) var(--space-4) var(--space-4); }
  .price-card__price { font-size: 34px; line-height: 38px; }
  .pricing .bl-toggle__opt { padding: 6px 14px; }
}

/* ---------- motion: one gentle, orchestrated entrance + hover lift ---------- */
@media (prefers-reduced-motion: no-preference) {
  html[data-motion="on"] .price-grid.reveal .price-card {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s var(--ease-out, ease-out), transform 0.5s var(--ease-out, ease-out);
  }
  html[data-motion="on"] .price-grid.reveal.is-in .price-card { opacity: 1; transform: none; }
  html[data-motion="on"] .price-grid.reveal.is-in .price-card:nth-child(1) { transition-delay: 60ms; }
  html[data-motion="on"] .price-grid.reveal.is-in .price-card:nth-child(2) { transition-delay: 140ms; }
  html[data-motion="on"] .price-grid.reveal.is-in .price-card:nth-child(3) { transition-delay: 220ms; }
  html[data-motion="on"] .price-grid.reveal.is-in .price-card:nth-child(4) { transition-delay: 300ms; }
  html[data-motion="on"] .price-grid.reveal.is-in .price-card:nth-child(n + 5) { transition-delay: 360ms; }

  .price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); }
  .price-card--featured:hover { transform: translateY(-4px); }

  .price-skel { animation: price-shimmer 1.4s ease-in-out infinite; }
  @keyframes price-shimmer { 50% { opacity: 0.45; } }
}

@media (prefers-reduced-motion: reduce) {
  html[data-motion="on"] .price-grid.reveal .price-card { opacity: 1; transform: none; }
}