/* ============================================================
   Pricing - page-specific layout.
   Section-by-section translation of the approved Claude Design
   prototype (project/Pricing.dc.html), reusing css/components.css
   and the shared shell rules in css/page.css / css/vault.css (.hero,
   .hero--sub, .section, .section-header--left, .split, .tick-list,
   .faq-layout, .accordion, .cta, .cta--tight) wherever the visual is
   identical to an existing page. Only what's new to this page lives
   here.
   ============================================================ */

/* .billing-toggle and .plan-panel (+ their sub-parts) live in
   components.css now - Home's own pricing section reuses them too, see
   that file's own comment for why. */
/* #pricing's own gap is a flat inline 48px (style="gap:48px", see the
   CLAUDE.md note on why that can't be overridden by a class rule) at
   every width, so one unconditional value covers every breakpoint:
   pulls both the header-to-toggle gap and the toggle-to-plan-panel gap
   down to the same 32px convention used elsewhere on the site (the
   toggle-to-panel side was reported too large on mobile - 26 Sep 2026 -
   but it's the same flat 48px at every width, so equally true on
   desktop, just less noticeable against a wider layout). Stays here,
   not in components.css, since Home's own #pricing section has a
   different inline gap (64px) and needs its own differently-tuned
   version of this same fix (see page.css). */
#pricing .billing-toggle { margin-top: -16px; margin-bottom: -16px; }
/* Same idea, opposite side: the gap below .plan-panel, above the
   trailing "Marketing freelancer..." note, was the same unreduced
   48px - too much air between the table and a single trailing line
   right under it. Pulled down to ~20px. Adjacent-sibling selector
   (not just .tools-note) so this only ever targets the note that
   actually follows the pricing table, not .tools-note's unrelated use
   on the Vault page. Same fix as page.css's own version of this rule,
   just tuned against this page's 48px gap instead of Home's 64px one. */
#pricing .plan-panel + .tools-note { margin-top: -28px; }

/* ---- Feature list grid (border-top items, no card box) --------------- */
.feature-list-grid { width: 100%; max-width: var(--container-lg); display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.feature-list-item { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: var(--border-width) solid var(--border-default); }
.feature-list-item h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  overflow-wrap: break-word;
}
.feature-list-item p { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--text-primary); text-wrap: pretty; }

/* .rule-list (the add-ons text list) lives in components.css - this page
   was its first use, About's Philosophy section reuses it. */

/* ---- Responsive --------------------------------------------------------- */
/* .plan-panel/.billing-toggle/.plan-price responsive rules live in
   components.css now, alongside their base rules. */
@media (max-width: 1080px) {
  .feature-list-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .feature-list-grid { grid-template-columns: 1fr; }
}