/* Pricing — new-design page styles (docs/DESIGN_SYSTEM.md). Layout only;
   components come from ds.css, values from theme.css tokens. Row helpers
   (.ds-ctas / .ds-chips) are DS utilities in ds.css. */

.pricing { padding-top: 124px; padding-bottom: 88px; }

.pricing__free-note {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--muted-foreground);
  margin: 14px 0 0;
}

/* ── Plan cards ── */

.pricing__plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 48px;
}

.pricing-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 30px;
  background: var(--background);
}

.pricing-plan--featured { border-color: var(--foreground); }

.pricing-plan__flag { position: absolute; top: -11px; left: 30px; }

.pricing-plan__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-sans);
}

.pricing-plan__name { font-size: 17px; font-weight: 600; color: var(--foreground); }

.pricing-plan__tag { font-size: 10.5px; color: var(--muted-foreground); }

.pricing-plan__price {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 44px;
  color: var(--foreground);
  margin-top: 20px;
}

.pricing-plan__price span { font-size: 18px; color: var(--muted-foreground); }

.pricing-plan__desc {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--body-foreground);
  margin: 14px 0 22px;
}

.pricing-plan__features {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  align-content: start;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--foreground);
  flex: 1;
}

.pricing-plan__features li { display: flex; gap: 10px; align-items: baseline; }

.pricing-check {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--accent);
  align-self: center;
}

.pricing-plan__cta { width: 100%; }

/* ── Facts + policy ── */

.pricing__facts { margin-top: 40px; }

.pricing__policy {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--muted-foreground);
  margin: 18px 0 0;
}

.pricing__policy a { color: var(--accent); text-decoration: none; }

.pricing__policy a:hover { text-decoration: underline; }

/* ── Compare ── */

.pricing__compare-title {
  margin: 72px 0 24px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}

.pricing__compare-el th { text-transform: none; font-size: 15px; letter-spacing: 0; color: var(--foreground); }

/* First header cell = the "Feature" label-of-labels. */
.pricing__compare-el th:first-child {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  font-weight: 400;
}

.pricing__table-label { color: var(--body-foreground); }

.pricing-check--cell { width: 16px; height: 16px; }

/* ── Responsive ── */

@media (max-width: 960px) {
  .pricing { padding-top: 108px; }
  .pricing__plans { grid-template-columns: minmax(0, 1fr); }
}

/* Phones: the compare table must FIT, not just scroll — mobile Chrome counts
   an inner-scrolling table's full width into the root scroll area, so the
   whole page pans sideways (rule 6). Compact cells + wrapped values bring the
   4-column table under 375px. */
/* Phone readability floor. Keyed at 768px to match ds.css — a page rule at
   640 would win at equal specificity (page stylesheets load AFTER ds.css) and
   silently reopen the 641-768 band that the DS floor closes. */
@media (max-width: 768px) {
  /* On the TABLE class: `.ds-table-wrap .table td` in ds.css is (0,2,1), so a
     `.pricing__compare td` rule on the wrapper never applied and the "compact
     cells" half of this fix was inert at every width. */
  .pricing__compare-el th,
  .pricing__compare-el td {
    padding: 10px 8px;
    white-space: normal;
  }
  /* 12px everywhere — the phone readability floor (rule 6). `th:first-child`
     is listed because it carries its own smaller size above; `pricing-plan__tag`
     renders plan.subtitle, which is real copy, not decoration. */
  .pricing__compare-el th,
  .pricing__compare-el td,
  .pricing__compare-el th:first-child,
  .pricing-plan__tag { font-size: 12px; }
}

/* The canvas's pricing h1 runs at the 68px step. That step is
   `.ds-display--xl-plus` in ds.css and the template passes size="xl-plus",
   so there is no page override here. */