/* ============================================================
   Privacy Scanner Website — Pricing (§7.8) styles

   Token substitutions:
     --fs-display-md → --fs-h1
     --font-display  → --font-sans
   ============================================================ */

.pricing {
  background: var(--bg-base);
  padding-block: var(--sp-10);
}
.pricing-inner {
  max-width: var(--maxw-wide);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
}
@media (min-width: 600px)  { .pricing-inner { padding-inline: var(--gutter-tablet); } }
@media (min-width: 1024px) { .pricing-inner { padding-inline: var(--gutter-desktop); } }


/* ============================================================
   Head
   ============================================================ */
.pricing-head {
  max-width: 56ch;
  margin-block-end: var(--sp-8);
}
.pricing-h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--text);
  text-wrap: balance;
}
.pricing-h2-accent {
  color: var(--teal);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
:lang(ja) .pricing-h2,
:lang(zh-Hans) .pricing-h2,
:lang(ko) .pricing-h2 {
  line-height: 1.3; letter-spacing: 0; text-wrap: auto;
}


/* ============================================================
   Grid — 7/5 desktop, single column tablet & mobile
   Spec §7.8.6: stack at 1024px down. Tablet 7/5 would crush.
   ============================================================ */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}
@media (min-width: 1024px) {
  .pricing-grid {
    grid-template-columns: 7fr 5fr;
    align-items: stretch;
  }
}


/* ============================================================
   Plan card
   ============================================================ */
.plan {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-7);
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.plan--free {
  border-color: var(--border-teal);    /* recommendation signal */
}
.plan--paid {
  background: var(--bg-2);             /* sub-weighted */
}
@media (max-width: 1023px) {
  .plan { padding: var(--sp-6); }
}

.plan-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}
.plan-price {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: var(--ls-heading);
  color: var(--text);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.plan-price-asterisk {
  font-size: 0.4em;
  vertical-align: super;
  color: var(--text-dim);
  margin-inline-start: 2px;
}
.plan-term {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-dim);
}


/* ============================================================
   Feature list (✓ prefix) + "no"s list (· prefix)
   ============================================================ */
.plan-features,
.plan-nots {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.plan-features li {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--text);
}
.plan-features li::before {
  content: "✓";
  color: var(--teal);
  margin-inline-end: var(--sp-2);
  font-weight: var(--fw-semibold);
}
.plan-nots {
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid var(--border-soft);
}
.plan-nots li {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  color: var(--text-soft);
}
.plan-nots li::before {
  content: "·";
  color: var(--text-dim);
  margin-inline-end: var(--sp-2);
}


/* ============================================================
   CTAs
   - Free plan: standard teal --lg
   - Paid plan: subtler — outline variant on the sub-weighted bg
   Both link to App Store; "Get on Mac App Store" copy on both
   for cross-page CTA consistency (prompt override from spec).
   ============================================================ */
.plan-cta {
  margin-block-start: auto;       /* pin to bottom of card */
  align-self: stretch;
  text-align: center;
}
.plan-cta--paid {
  background: transparent;
  color: var(--teal);
  border: 1px solid var(--border-teal);
  box-shadow: none;
}
.plan-cta--paid:hover {
  background: var(--teal-wash);
  color: var(--teal-hover);
  border-color: var(--teal);
  box-shadow: none;
}
.plan-cta--paid:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}


/* ============================================================
   Footnote — asterisk + regional-pricing prose
   Per spec §7.8.4: prose voice, not legal voice
   ============================================================ */
.pricing-footnote {
  display: flex;
  gap: var(--sp-2);
  align-items: baseline;
  margin: var(--sp-7) 0 0;
  max-width: 64ch;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--text-dim);
}
.pricing-footnote > span[aria-hidden="true"] {
  color: var(--text-faint);
  font-weight: var(--fw-bold);
}