/* Pricing page · pages/pricing.css
   --------------------------------------------------------------------------
   Shared base — tokens, reset, layout primitives, brand components, chrome —
   in /brand.css. Page-specific styles below.

   Section structure:
     §1 Hero               .pricing-hero
     §2 Proof bar          .proof-bar  (duplicated from index.css for now;
                            promote to brand.css site-wide at next refactor)
     §3 Every plan         .every-plan
     §4 Price ladder       .tier-section
     §5 Commitments        .commitments
     §6 FAQ                .faq
     §7 CTA                .cta-section
   -------------------------------------------------------------------------- */


/* ============================================================ */
/* §1 · HERO — two-column at desktop, stacked at narrow          */
/*       Mirrors index.css .hero pattern                          */
/* ============================================================ */
.pricing-hero {
  padding: var(--space-section-standard) 0;
}
.pricing-hero .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-48);
  align-items: center;
}
@media (min-width: 1024px) {
  .pricing-hero .container {
    grid-template-columns: 1.35fr 1fr;
    gap: var(--space-64);
  }
}

.pricing-hero .hero-text .label-s {
  display: inline-block;
  margin-bottom: var(--space-16);
}
.pricing-hero h1 {
  max-width: 14ch;
  margin: 0;
}
.pricing-hero .descriptor {
  margin-top: var(--space-24);
  max-width: 44ch;
}
.pricing-hero .cta-row {
  display: flex; align-items: center; gap: var(--space-24);
  margin-top: var(--space-48);
  flex-wrap: wrap;
}
.pricing-hero .cta-note {
  margin-top: var(--space-12);
  color: var(--color-stone-60);
}


/* ============================================================ */
/* §1 · HERO VISUAL — Insights card (every-plan equality)        */
/*       Checklist of the features shared by all ten plans, with */
/*       a kicker naming the single variable that scales: volume. */
/* ============================================================ */
.insights-card {
  background: var(--color-paper);
  border: 1px solid var(--color-stone-20);
  border-radius: var(--radius-default);
  padding: var(--space-24);
  box-shadow: var(--shadow-card-hero);
}
.insights-card .card-meta {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--color-mist);
  gap: var(--space-12);
}
.insights-card .card-meta .meta-left {
  display: inline-flex; align-items: center; gap: var(--space-8);
}
.insights-card .card-meta .label-s { color: var(--color-stone-60); }
.insights-card .card-meta .brand-mark {
  width: 32px; height: 32px; color: var(--color-navy);
  display: block; flex-shrink: 0;
}
.insights-card .card-meta .timeframe {
  font-family: var(--font-mono);
  font-size: var(--type-label-s);
  color: var(--color-stone-60);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.insights-card .card-features {
  list-style: none;
  margin: 0;
  padding: var(--space-24) 0 var(--space-20);
}
.insights-card .card-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  color: var(--color-midnight);
  line-height: 1.4;
}
.insights-card .card-features li + li {
  margin-top: var(--space-16);
}
.insights-card .card-features .feat-icon {
  width: 22px;
  height: 22px;
  color: var(--color-navy);
  flex-shrink: 0;
  margin-top: -1px;
}
.insights-card .card-kicker {
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-mist);
  color: var(--color-midnight);
  font-weight: 600;
  line-height: 1.4;
}


/* ============================================================ */
/* §2 · PROOF BAR — first-class compliance badges                */
/*       Duplicated from index.css. Promote to brand.css at      */
/*       next site-wide refactor.                                 */
/* ============================================================ */
/* ============================================================ */
/* §3 · EVERY PLAN — equality, ahead of the ladder               */
/* ============================================================ */
.every-plan { background: var(--color-paper-dark); }
.every-plan .heading-block {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.every-plan h2 {
  max-width: 18ch;
  margin: 0 auto;
}
.every-plan .lead {
  margin-top: var(--space-20);
}
.every-plan .features {
  margin-top: var(--space-48);
  max-width: var(--container-content);
  margin-left: auto; margin-right: auto;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-16) var(--space-48);
  padding: var(--space-32);
  background: var(--color-paper);
  border: 1px solid var(--color-stone-20);
  border-radius: var(--radius-default);
}
@media (max-width: 640px) {
  .every-plan .features { grid-template-columns: 1fr; }
}
.every-plan .features li {
  color: var(--color-midnight);
  display: flex;
  gap: var(--space-12);
  align-items: baseline;
  line-height: 1.45;
}
.every-plan .features li::before {
  content: "✓";
  color: var(--color-success-600);
  font-weight: 600;
  flex-shrink: 0;
}


/* ============================================================ */
/* §4 · TIER SECTION — heading + shape cards (with CTAs) + table */
/* ============================================================ */
.tier-section .heading-block {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
/* When the heading-block sits between cards and table, push it down to
   create a clear visual break between the tier-cards group and the
   full ladder. */
.tier-section .heading-block.table-heading {
  margin-top: var(--space-96);
}
.tier-section h2 {
  max-width: 22ch;
  margin: var(--space-16) auto 0;
}
.tier-section .heading-block.table-heading h2 {
  margin-top: 0;
}

/* "Common sizes" eyebrow — sits above the three shape cards. Labels the
   curated highlight as distinct from the full ladder below. */
.tier-section .tier-cards-eyebrow {
  text-align: center;
  margin: 0 0 var(--space-32);
}

/* Shape cards — wayfinding by customer shape. Each carries a CTA. */
.tier-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-32);
  margin: 0 auto;
  max-width: var(--container-standard);
  align-items: stretch;
}
@media (max-width: 860px) {
  .tier-cards {
    grid-template-columns: 1fr;
    gap: var(--space-24);
    max-width: 520px;
  }
}
.tier-card {
  background: var(--color-paper);
  border: 1px solid var(--color-stone-20);
  border-radius: var(--radius-default);
  padding: var(--space-32);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
/* Card unit = card + caption stacked. Caption sits below the card as
   wayfinding context (the "useful for" line), not as part of the card. */
.tier-card-unit {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.tier-card-caption {
  text-align: center;
  color: var(--color-stone-60);
  line-height: 1.5;
  max-width: 30ch;
  margin-inline: auto;
  padding: 0 var(--space-8);
}
.tier-card-caption .caption-label {
  display: block;
  margin-bottom: var(--space-8);
}
/* Tier number eyebrow — small navy label at top of card, connects the
   card visually to the matching row in the full table. */
.tier-card-tier {
  color: var(--color-navy);
}
.tier-card-meta {
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-stone-60);
  margin-top: auto;
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-mist);
}
.tier-card-meta .tier-name { color: var(--color-navy); }
/* Price in JetBrains Mono — tabular figures for data. */
.tier-card-price {
  font-family: var(--font-mono);
  font-size: clamp(1.75rem, 2vw + 0.75rem, 2.25rem);
  color: var(--color-midnight);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: 0;
}
.tier-card-price .per {
  font-size: 0.9375rem;
  color: var(--color-stone-60);
  font-family: var(--font-sans);
  margin-left: 2px;
}
/* Per-card CTA — new in this rebuild. */
.tier-card-cta {
  margin-top: var(--space-16);
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-mist);
}
/* Link visual + arrow come from .link-arrow (brand.css). */

/* Full 10-row table */
.tier-section .table-frame {
  margin: var(--space-48) auto 0;
  max-width: var(--container-standard);
  background: var(--color-paper);
  border: 1px solid var(--color-stone-20);
  border-radius: var(--radius-default);
  overflow: hidden;
}
.tier-section .table-scroll { overflow-x: auto; }
.tier-table {
  width: 100%;
  border-collapse: collapse;
}
.tier-table thead th {
  text-align: left;
  padding: var(--space-20) var(--space-24);
  background: var(--color-stone-05);
  border-bottom: 1px solid var(--color-stone-20);
  white-space: nowrap;
}
.tier-table thead th.num { text-align: right; }
.tier-table tbody tr {
  transition: background var(--duration-instant) var(--ease-standard);
}
.tier-table tbody tr + tr td { border-top: 1px solid var(--color-stone-20); }
.tier-table tbody tr:hover { background: var(--color-mist); }
.tier-table tbody td {
  padding: var(--space-20) var(--space-24);
  vertical-align: baseline;
}
.tier-table tbody td.num { text-align: right; }
.tier-table .plan-name {
  font-weight: 500;
  color: var(--color-stone-60);
  letter-spacing: 0.02em;
}
.tier-table .requests {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--color-midnight);
  font-weight: 500;
}
.tier-table .price {
  font-family: var(--font-mono);
  font-size: 17px;
  color: var(--color-midnight);
  font-weight: 500;
  line-height: 1.2;
  display: block;
}
.tier-table .price-sub {
  display: block;
  margin-top: 2px;
  color: var(--color-stone-60);
}
.tier-table .th-sub {
  display: block;
  margin-top: 2px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--color-stone-60);
}
@media (max-width: 720px) {
  .tier-table thead th,
  .tier-table tbody td {
    padding: var(--space-16);
    font-size: var(--type-body-s);
  }
  .tier-table .price { font-size: 15px; }
}

/* Annual plans card — Mist feature card with click-to-expand table.
   Peer to the custom-plan-card below (same visual register, broader
   audience). Presentation block on the summary; the annual table
   reveals inside the same Mist card on click. Native <details>; zero JS. */
.annual-plans-card {
  margin: var(--space-48) auto 0;
  max-width: var(--container-standard);
  background: var(--color-mist);
  border: 1px solid var(--color-stone-20);
  border-radius: var(--radius-soft);
  overflow: hidden;
}
.annual-plans-card[open] {
  padding-bottom: var(--space-32);
}
.annual-plans-card summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-48) var(--space-32);
  text-align: center;
}
.annual-plans-card summary::-webkit-details-marker { display: none; }

.annual-plans-card .annual-icon {
  display: inline-flex;
  width: 36px;
  height: 36px;
  color: var(--color-navy);
  margin-bottom: var(--space-20);
}
.annual-plans-card .annual-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.annual-plans-card .annual-title {
  display: block;
  font-size: clamp(1.5rem, 2vw + 0.75rem, 2rem);
  font-weight: 600;
  color: var(--color-midnight);
  line-height: 1.25;
  margin: 0;
}
.annual-plans-card .annual-body {
  display: block;
  margin-top: var(--space-16);
  max-width: 44ch;
  margin-inline: auto;
}
.annual-plans-card .reveal-action {
  margin-top: var(--space-24);
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-weight: 500;
  color: var(--color-royal);
  transition: color var(--duration-instant) var(--ease-standard);
}
.annual-plans-card summary:hover .reveal-action {
  color: var(--color-navy);
}
.annual-plans-card .reveal-icon {
  width: 18px;
  height: 18px;
  transition: transform var(--duration-short) var(--ease-standard);
}
.annual-plans-card .reveal-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.annual-plans-card[open] .reveal-icon {
  transform: rotate(180deg);
}
.annual-plans-card .table-frame {
  margin: 0 var(--space-24);
  max-width: none;
}
/* Annual price column highlighted navy to mark the discount tier */
.tier-table-annual tbody td:last-child .price {
  color: var(--color-navy);
}

/* "Let's find what works." card — invitation register, not notification.
   Routes to the booking link (same as homepage Book a demo).
   Center-aligned, narrower than the tables. Paper background with the
   standard card border (matches the tier and data cards), so it reads as
   the quiet CTA while the annual card above keeps the single Mist feature
   treatment, rather than two Mist blocks stacked in a row. 24px radius
   (canon's "larger feature card" size); calendar icon connects to the CTA. */
.custom-plan-card {
  margin: var(--space-64) auto 0;
  max-width: 640px;
  padding: var(--space-48) var(--space-32);
  background: var(--color-paper);
  border: 1px solid var(--color-stone-20);
  border-radius: var(--radius-soft);
  text-align: center;
}
.custom-plan-card .custom-plan-icon {
  display: inline-flex;
  width: 36px;
  height: 36px;
  color: var(--color-navy);
  margin-bottom: var(--space-20);
}
.custom-plan-card .custom-plan-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.custom-plan-card .custom-plan-title {
  font-size: clamp(1.5rem, 2vw + 0.75rem, 2rem);  /* 24 → 32px, slightly bigger feature register */
  font-weight: 600;
  color: var(--color-midnight);
  line-height: 1.25;
}
.custom-plan-card .custom-plan-body {
  margin-top: var(--space-16);
  max-width: 44ch;
  margin-inline: auto;
}
.custom-plan-card .custom-plan-cta {
  margin-top: var(--space-24);
}
/* .button-secondary inherits brand.css — text-link with arrow */

.tier-section .tier-footnote {
  margin: var(--space-32) auto 0;
  max-width: var(--container-standard);
  text-align: center;
}


/* ============================================================ */
/* §5 · COMMITMENTS — pillar-named transparency section          */
/*       Folds Equality + Transparency stamp + Commitments       */
/* ============================================================ */
.commitments .heading-block {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.commitments h2 {
  max-width: 22ch;
  margin: var(--space-16) auto 0;
}
.commitments .lead {
  margin-top: var(--space-20);
}
.commitments .grid {
  margin-top: var(--space-48);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-32);
}
@media (max-width: 880px) {
  .commitments .grid { grid-template-columns: 1fr; }
}
.commitments .card {
  padding: var(--space-32);
  background: var(--color-paper);
  border: 1px solid var(--color-stone-20);
  border-radius: var(--radius-default);
}
.commitments .card h3 {
  color: var(--color-midnight);
  line-height: 1.35;
}
.commitments .card p {
  margin-top: var(--space-16);
}

/* ============================================================ */
/* §6 · FAQ                                                       */
/* ============================================================ */
.faq .heading-block {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.faq h2 {
  max-width: 18ch;
  margin: var(--space-16) auto 0;
}
.faq .list {
  margin-top: var(--space-48);
  max-width: var(--container-reading);
  margin-left: auto;
  margin-right: auto;
}
.faq details { border-top: 1px solid var(--color-stone-20); }
.faq details:last-child { border-bottom: 1px solid var(--color-stone-20); }
.faq summary {
  padding: var(--space-24) 0;
  font-weight: 500;
  color: var(--color-midnight);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-16);
  transition: color var(--duration-instant) var(--ease-standard);
}
.faq summary:hover { color: var(--color-royal); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: var(--type-title-m);
  color: var(--color-stone-40);
  transition: transform var(--duration-short) var(--ease-standard);
  flex-shrink: 0;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer {
  padding: 0 0 var(--space-24);
  line-height: 1.6;
  max-width: 60ch;
}
.faq .answer + .answer { margin-top: var(--space-12); }
/* .faq .answer links underline via the shared .copy rule (.faq carries .copy). */
.faq .answer a:hover { color: var(--color-navy); }


/* ============================================================ */
/* §7 · CTA SECTION                                              */
/* ============================================================ */
.cta-section {
  background: var(--color-mist);
  text-align: center;
}
.cta-section h2 {
  max-width: 18ch;
  margin: 0 auto;
}
.cta-section .cta-lede {
  margin-top: var(--space-20);
  line-height: 1.6;
  max-width: 52ch;
  margin-inline: auto;
}
.cta-section .cta-options {
  margin-top: var(--space-32);
  display: flex;
  gap: var(--space-32);
  justify-content: center;
  flex-wrap: wrap;
}