/* ============================================================
   PRICING PAGE — /pricing/
   Colour, spacing, buttons, rules and the reveal come from /styles.css,
   so both themes work unchanged. The one deliberate difference from the
   rest of the site: headings are sentence-case IBM Plex Sans
   (`.display-soft` in styles.css), not uppercase mono — a pricing page
   should read commercial, not technical. Mono is kept for eyebrow
   labels, diagram labels and numerals.

   No numbers, ranges, currencies or discounts appear on this page, on
   purpose: the model is a platform fee per connected workspace plus
   usage, and the figure is agreed with each team.
   ============================================================ */

.pr-hero h1 { max-width: 19ch; }
.pr-hero .lede { max-width: 52ch; }

/* ---------- the model: one wide diagram, a stacked one for phones ---------- */
.pr-graphic { margin-top: 44px; }
.pr-graphic .g-narrow { max-width: 360px; }
.pr-caption {
  margin: clamp(10px, 1.6vw, 18px) 0 4px; padding-left: 16px; border-left: 2px solid var(--accent);
  max-width: 76ch; font-size: 15.5px; line-height: 1.6; color: var(--ink-2);
}
.pr-caption b { color: var(--ink); font-weight: 600; }

/* ---------- where it runs: three cards of equal weight ---------- */
.pr-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 44px; }
/* flex column, not grid: the card's link is pushed to the bottom with
   `margin-top: auto`, so three cards of different length still line up. */
.pr-plan {
  border: 1px solid var(--rule); background: var(--surface); border-radius: 12px;
  padding: 26px 26px 24px; min-width: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.pr-plan .s-n {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent-hover);
}
.pr-plan h3 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.018em; line-height: 1.2; }
.pr-plan .pr-sub { color: var(--ink-2); font-size: 15px; margin-top: -4px; }
.pr-plan .btn-link {
  margin-top: auto; padding: 16px 0 0; width: 100%; justify-content: space-between;
  border: 0; border-top: 1px solid var(--rule);
}
.pr-plan .btn-link:hover { border-top-color: var(--ink); }
@media (max-width: 1000px) { .pr-plans { grid-template-columns: 1fr; gap: 18px; margin-top: 32px; } }

/* a tight list with a check per line — the site's house list */
.pr-points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.pr-points li { position: relative; padding-left: 24px; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.pr-points li::before {
  content: ''; position: absolute; left: 2px; top: .5em; width: 9px; height: 5px;
  border-left: 1.8px solid var(--accent); border-bottom: 1.8px solid var(--accent); transform: rotate(-45deg);
}
.pr-points b { color: var(--ink); font-weight: 600; }

.pr-beta {
  margin-top: 22px; padding: 14px 18px; border: 1px dashed var(--rule-strong); border-radius: 8px;
  font-size: 15px; color: var(--ink-2); text-align: center;
}
.pr-beta b { color: var(--ink); font-weight: 600; }

/* ---------- charged / not charged: two ruled columns ---------- */
.pr-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); margin-top: 44px; }
.pr-cols > div { border-top: 1px solid var(--ink); padding-top: 22px; min-width: 0; }
.pr-cols h3 {
  margin: 0 0 16px; font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
}
.pr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pr-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; align-items: start; font-size: 15.5px; color: var(--ink-2); }
.pr-list li b { color: var(--ink); font-weight: 600; }
.pr-list svg { width: 20px; height: 20px; margin-top: 2px; color: var(--accent); }
.pr-cols .no svg { color: var(--ink-2); }
@media (max-width: 820px) { .pr-cols { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- closing band: the brand dark surface, as everywhere else ---------- */
.pr-closer { background: var(--panel); color: var(--panel-ink); padding: clamp(56px, 7vw, 92px) 0; }
.pr-closer-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 56px; align-items: end; }
.pr-closer .tag { color: var(--panel-ink-2); }
.pr-closer h2 { color: var(--panel-ink); margin-top: 16px; max-width: 18ch; }
.pr-closer p { color: var(--panel-ink-2); font-size: 16.5px; margin-top: 18px; max-width: 54ch; }
.pr-closer .btn-ghost { color: var(--panel-ink); border-color: var(--panel-rule); }
.pr-closer .btn-ghost:hover { color: var(--violet-300); border-color: var(--violet-300); }
@media (max-width: 900px) { .pr-closer-in { grid-template-columns: 1fr; align-items: start; } }
@media (max-width: 420px) { .pr-closer .btn { white-space: normal; } }