/* ==========================================================================
   Pricing components (Preston system)

   Canonical pricing UI for new pages. Hand-written; depends on ir-tokens.css.
   Layout follows the approved comparison design: hero -> plan cards ->
   "What's included" table with an inverted header -> dark CTA band.

   Not the legacy blocks:
     blocks/intelligent-relations-pricing-plans.css
     blocks/intelligent-relations-pricing-plans-white.css   (byte-identical)
     blocks/intelligent-relations-pricing-plans-comparison-table.css
   Those are database-driven, legacy-styled and frozen. See DESIGN-SYSTEM.md.

   The comparison is a real <table>: it is tabular data with row headers, and
   a screen reader should announce it as one. A CSS grid renders the same
   picture while throwing that away.

   Everything is scoped under .ir-pricing, so no rule leaks out and legacy
   selectors on bare elements do not reach in.
   ========================================================================== */

.ir-pricing {
  font-family: var(--ir-font);
  color: var(--ir-ink);
  background: var(--ir-white);
}

.ir-pricing *,
.ir-pricing *::before,
.ir-pricing *::after { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   Scoped reset — REQUIRED, not defensive politeness.

   The theme styles bare elements globally, and those rules reach inside any
   markup that uses them:

     header { position: fixed; ... }        critical CSS in header.php
     table  { margin-bottom: 150px; ... }   main.css:328
     table tbody tr:nth-child(even) { ... } main.css:360  (zebra striping)
     table th, table td { padding: 31px 20px }
     table th { text-transform: capitalize; background: #f5f5f7;
                font-family: "primary-bold" }

   A class selector outranks them, but only for properties it actually
   declares. Anything left undeclared silently inherits the legacy value —
   which is how the page masthead ended up position:fixed and the row labels
   arrived grey and title-cased.
   -------------------------------------------------------------------------- */
/* `section` is deliberately NOT in this list. The theme has no bare `section`
   rule to defend against (its rules are `.hero-section` and `section.normal`),
   and including it made the reset — at specificity 0,1,1 — outrank every
   section skin below it (0,1,0), flattening the hero gradient, the compare
   band and the dark CTA to plain white. */
.ir-pricing header,
.ir-pricing footer {
  position: static;
  inset: auto;
  background: none;
  color: inherit;
  z-index: auto;
  transition: none;
}

.ir-pricing table { margin: 0; border-collapse: collapse; }

.ir-pricing table tbody tr:nth-child(odd),
.ir-pricing table tbody tr:nth-child(even) { background-color: transparent; }

.ir-pricing table th {
  background-color: transparent;
  text-transform: none;
  font-family: inherit;
  font-size: inherit;
}

.ir-pricing table caption { max-width: none; margin: 0; }

.ir-pricing ul { margin: 0; padding: 0; list-style: none; }
.ir-pricing li { margin: 0; padding-left: 0; list-style: none; }
.ir-pricing li::before { content: none; }
.ir-pricing a { text-decoration: none; }
.ir-pricing img { display: block; max-width: 100%; height: auto; }

/* The theme does not define this, and WordPress does not add it. */
.ir-pricing .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ir-pricing__wrap {
  max-width: 1180px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.ir-pricing__hero {
  padding: 80px var(--ir-gutter) 56px;
  background: linear-gradient(180deg, var(--ir-wash) 0%, var(--ir-white) 100%);
}

.ir-pricing__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ir-brand);
}
.ir-pricing__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ir-brand);
}

.ir-pricing__title {
  max-width: 18ch;
  margin: 18px 0 0;
  font-size: clamp(36px, 5.2vw, 56px);
  line-height: 1.06;
  letter-spacing: -.035em;
  font-weight: 600;
  color: var(--ir-ink);
  text-wrap: balance;
}

.ir-pricing__lede {
  max-width: 64ch;
  margin: 18px 0 0;
  font-size: 19px;
  line-height: 1.6;
  color: var(--ir-text);
  text-wrap: pretty;
}

.ir-pricing__chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.ir-pricing__chip {
  padding: 6px 13px;
  border-radius: var(--ir-radius-pill);
  border: 1px solid #E8E5F6;
  background: var(--ir-wash-2);
  font-size: 13px;
  color: var(--ir-muted);
}

/* --------------------------------------------------------------------------
   Plan cards

   One card carries .is-featured. Exactly one — the emphasis is the point,
   and two emphasised cards is none.
   -------------------------------------------------------------------------- */
.ir-plans {
  padding: 0 var(--ir-gutter) 72px;
}

.ir-plans__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.ir-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 30px 26px;
  border: 1px solid #E8E5F6;
  border-radius: 18px;
  background: var(--ir-white);
}
.ir-plan.is-featured {
  border-color: var(--ir-brand);
  box-shadow: 0 10px 40px rgba(74, 53, 240, .10);
}

.ir-plan__badge {
  position: absolute;
  top: -12px;
  left: 26px;
  padding: 5px 12px;
  border-radius: var(--ir-radius-pill);
  background: var(--ir-brand);
  color: var(--ir-white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}

.ir-plan__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ir-muted);
}

.ir-plan__price {
  margin-top: 10px;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--ir-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.ir-plan__per {
  font-size: 15px;
  font-weight: 500;
  color: var(--ir-faint);
  letter-spacing: 0;
}

.ir-plan__desc {
  margin: 14px 0 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ir-text);
  text-wrap: pretty;
}

.ir-plan__cta {
  margin-top: auto;
  display: block;
  text-align: center;
  padding: 13px 20px;
  border-radius: var(--ir-radius-md);
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.ir-plan__cta--outline {
  border-color: var(--ir-line-btn);
  background: var(--ir-white);
  color: var(--ir-ink);
}
.ir-plan__cta--outline:hover { border-color: var(--ir-brand); color: var(--ir-brand); }
.ir-plan__cta--solid {
  background: var(--ir-brand);
  color: var(--ir-white);
}
.ir-plan__cta--solid:hover { background: var(--ir-brand-hover); color: var(--ir-white); }

/* --------------------------------------------------------------------------
   "What's included" comparison
   -------------------------------------------------------------------------- */
.ir-compare {
  padding: 72px var(--ir-gutter);
  background: var(--ir-wash);
  border-top: 1px solid var(--ir-line);
  border-bottom: 1px solid var(--ir-line);
}

.ir-compare__title {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 36px);
  letter-spacing: -.03em;
  font-weight: 600;
  color: var(--ir-ink);
  text-wrap: balance;
}
.ir-compare__sub {
  margin: 8px 0 0;
  font-size: 17px;
  color: var(--ir-muted);
}

/* Wide content scrolls inside its own container rather than pushing the page
   sideways — the design system's rule for tables, code and diagrams. */
.ir-compare__scroll {
  margin-top: 28px;
  border: 1px solid #E8E5F6;
  border-radius: 18px;
  overflow: hidden;
  background: var(--ir-white);
}
.ir-compare__scrollinner { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.ir-matrix {
  width: 100%;
  min-width: 900px;
  table-layout: fixed;
  border-collapse: collapse;
}
.ir-matrix col.ir-matrix__col-label { width: 21%; }

.ir-matrix th,
.ir-matrix td { text-align: left; vertical-align: top; }

/* --- inverted header --- */
.ir-matrix thead th {
  padding: 18px 20px;
  background: var(--ir-ink);
  color: var(--ir-white);
  font-size: 14px;
  font-weight: 600;
}
.ir-matrix thead th.ir-matrix__col-label {
  padding: 18px 22px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ir-on-dark);
}
.ir-matrix__headprice {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  color: var(--ir-on-dark);
}

/* --- rows --- */
.ir-matrix tbody th {
  padding: 20px 22px;
  background: var(--ir-wash-2);
  font-size: 15px;
  font-weight: 600;
  color: var(--ir-ink);
  line-height: 1.45;
}
.ir-matrix tbody td {
  padding: 20px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ir-text);
  background: var(--ir-white);
  text-wrap: pretty;
}
.ir-matrix tbody tr { border-top: 1px solid var(--ir-line); }

/* An absence is not a value — it recedes. */
.ir-matrix td.is-none { color: var(--ir-faint); }
.ir-matrix .ir-matrix__qual { color: var(--ir-faint); }

.ir-compare__note {
  margin: 16px 0 0;
  max-width: 80ch;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ir-faint);
}

.ir-compare__hint {
  display: none;
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--ir-faint);
}

/* --------------------------------------------------------------------------
   Dark CTA band
   -------------------------------------------------------------------------- */
.ir-cta {
  padding: 80px var(--ir-gutter);
  text-align: center;
  background: var(--ir-ink);
  color: var(--ir-white);
}
.ir-cta__inner { max-width: 720px; margin: 0 auto; }
.ir-cta h2 {
  margin: 0;
  font-size: clamp(28px, 3.8vw, 38px);
  line-height: 1.12;
  letter-spacing: -.03em;
  font-weight: 600;
  color: var(--ir-white);
  text-wrap: balance;
}
.ir-cta p {
  margin: 14px auto 0;
  max-width: 60ch;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ir-on-dark);
  text-wrap: pretty;
}
.ir-cta__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 28px;
}
.ir-btn {
  display: inline-block;
  padding: 14px 24px;
  border-radius: var(--ir-radius-md);
  font-size: 16px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.ir-btn--primary { background: var(--ir-brand); color: var(--ir-white); }
.ir-btn--primary:hover { background: var(--ir-brand-hover); color: var(--ir-white); }
.ir-btn--ghost { border-color: rgba(255, 255, 255, .28); color: var(--ir-white); }
.ir-btn--ghost:hover { border-color: var(--ir-white); color: var(--ir-white); }

.ir-pricing a:focus-visible {
  outline: 2px solid var(--ir-brand);
  outline-offset: 3px;
  border-radius: var(--ir-radius-sm);
}
.ir-cta a:focus-visible { outline-color: var(--ir-white); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .ir-plans__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .ir-pricing__hero { padding-top: 64px; }
}

@media (max-width: 940px) {
  .ir-compare__hint { display: block; }
}

@media (max-width: 620px) {
  .ir-plans__grid { grid-template-columns: minmax(0, 1fr); }
  .ir-pricing__hero { padding: 48px var(--ir-gutter) 40px; }
  .ir-plans { padding-bottom: 52px; }
  .ir-compare { padding: 52px var(--ir-gutter); }
  .ir-cta { padding: 56px var(--ir-gutter); }
  .ir-plan { padding: 26px 22px; }
  .ir-pricing__title { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ir-pricing * { transition: none !important; }
}

/* --------------------------------------------------------------------------
   Fixed-header clearance that no longer applies.

   partials.css:522 and main.css:2023 both set

     .header-disabled main section:first-child { margin-top: 96px !important }

   That is clearance for the OLD position:fixed header, applied to pages whose
   `_ir_disable_header` meta is "yes" — pages with no .page-heading hero to
   provide the gap themselves. The header is sticky now, so it sits in normal
   flow and the 96px is pure additive whitespace above the fold.

   !important is required here: the declaration it fights is itself !important,
   so out-scoping alone cannot win (DESIGN-SYSTEM.md §6 forbids !important for
   ordinary fights — this is the documented exception). The selector is also
   deliberately narrower than the one it overrides, so it only ever touches
   this template's own hero.
   -------------------------------------------------------------------------- */
.header-disabled main .ir-pricing .ir-pricing__hero { margin-top: 0 !important; }