/* /pricing styles. Layers on top of base.css, which holds the shared
   design system (palette, type, container, buttons, header, footer,
   accent rule, eyebrow, centered close).

   Two sections: the top (the headline across it; under it the subhead,
   the line into the steps and the steps on their line on the left, and
   the price card on the right, held in view as the steps scroll), then
   the audience pages' close. One picture, the market inside the price
   card. Every rule is scoped under .pr (the page's <main>) except the
   header block, which sits outside it. Use only base.css tokens.

   Picked on 2026-10-02 from three layouts compared side by side (git
   24b673b holds the other two). */

/* ── Header, on a phone ─────────────────────────────────────────── */

/* As on the audience pages: this hero carries no button, so on a phone
   the header keeps "Meet with our team" beside the menu button, compact.
   Below 360px there is no room, and the menu carries it. This sheet loads
   on /pricing only. */
@media (max-width: 900px) {
  .bar .bar-cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-left: auto;
    margin-right: -6px;
    padding: 0 14px;
    font-size: 14px;
  }
  .bar-inner { gap: 12px; }
  body.mobile-menu-open .bar .bar-cta { visibility: hidden; }
}
@media (max-width: 359px) {
  .bar .bar-cta { display: none; }
}

/* ── The top: headline, then the steps beside the price ────────── */

/* The headline spans the top, at Display section size (DESIGN.md: a page
   below the homepage), one sentence on two lines: "Together we make" /
   "great change possible." Under it, two columns: the subhead, the line
   into the steps and the steps (7 parts), and the price card (5 parts),
   which starts below the headline, so the headline is the first and
   largest thing on the page, and which stays in view while the steps
   scroll past wherever the screen is tall enough to hold all of it. On a
   phone the card comes straight after the headline, and the subhead, the
   line and the steps follow it unbroken. */
.pr .pr-top { padding: 72px 0 112px; }
.pr .pr-title { font-size: clamp(33px, 4.5vw, 57px); max-width: 12em; }
.pr .pr-title .line { display: block; }
.pr .pr-title .line + .line { margin-top: 0.1em; }
.pr .pr-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 72px;
  margin-top: 28px;
  align-items: start;
}
@media (min-width: 1041px) and (min-height: 820px) {
  .pr .pr-side { position: sticky; top: 92px; }
}
@media (max-width: 1040px) {
  .pr .pr-top { padding: 56px 0 80px; }
  .pr .pr-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .pr .pr-side { order: -1; }
}

/* Rex's "tall order" line, at the lede size every hero on this line
   uses. */
.pr .pr-sub {
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.52;
  color: var(--body);
  max-width: 24em;
}

/* "Here's how we make it a reality:", the line that turns the subhead
   into the steps: Ink and a step heavier, set in the body face, because
   it is the turn into the page rather than a headline of its own. It is
   the steps' heading (an h2), with each step's label an h3 under it. */
.pr .pr-lead {
  margin-top: 22px;
  font-family: var(--text);
  font-weight: 600;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.52;
  letter-spacing: 0;
  color: var(--ink);
}
.pr .pr-main .pr-rail { margin-top: 52px; }

/* ── The price card ─────────────────────────────────────────────── */

/* Rex's What does it cost? section as one white card: Surface, 1px Rule,
   14px radius, no shadow, the plate the audience pages put their
   pictures on. Its heading at Title card size, then his range set as a
   Figure in Ink (not Teal: a price is not a confirmed finding), then his
   three paragraphs at card body size, the second and third each under a
   hairline. The market picture sits under the first, which it explains. */
.pr .pr-price {
  container-type: inline-size;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 30px 30px 28px;
}
@media (max-width: 520px) {
  .pr .pr-price { padding: 24px 20px 22px; }
}
.pr .pr-price-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.pr .pr-price-figure {
  margin-top: 16px;
  font-family: var(--display);
  font-weight: 700;
  /* The Figure role, stepped down with the card where it cannot hold
     "$7,500 to $10,000" on one line (it is about 8.4em). */
  font-size: min(clamp(38px, 4.4vw, 54px), 11.6cqi);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.pr .pr-price-note {
  display: block;
  margin-top: 10px;
  font-family: var(--text);
  font-weight: 400;
  font-size: 15.5px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--muted);
}
.pr .pr-price-p {
  margin-top: 22px;
  font-size: 16.5px;
  line-height: 1.58;
  color: var(--body);
}
.pr .pr-price-p strong { font-weight: 600; color: var(--ink); }
.pr .pr-price-more {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}

/* ── The market picture ─────────────────────────────────────────── */

/* One dot is one company. The portion the reader chooses is outlined in
   Ink at 70%, 1.4px (a selection, as on the audience pages) and its dots
   carry the verdict colours, because it has been read; the later segment
   is the same outline dashed, and its dots, like the rest of the market,
   are hollow Slate rings, unread. Two drawings, one per width. */
.pr .pr-mkt { margin-top: 20px; }
.pr .pr-mkt svg { display: block; width: 100%; height: auto; margin-top: 10px; }
.pr .pr-mkt-narrow { display: none; }
@media (max-width: 520px) {
  .pr .pr-mkt-wide { display: none; }
  .pr .pr-mkt-narrow { display: block; }
}

.pr .pr-mkt-own { fill: none; stroke: rgba(17, 22, 27, 0.7); stroke-width: 1.4; }
.pr .pr-mkt-add { fill: none; stroke: rgba(17, 22, 27, 0.45); stroke-width: 1.4; stroke-dasharray: 4 3; }
.pr .pr-mkt circle.is-target { fill: rgba(0, 168, 138, 0.95); }
.pr .pr-mkt circle.is-monitor { fill: rgba(47, 99, 218, 0.55); }
.pr .pr-mkt circle.is-hold { fill: rgba(118, 127, 137, 0.45); }
.pr .pr-mkt circle.is-unread { fill: none; stroke: rgba(183, 190, 196, 0.95); stroke-width: 1.2; }

/* Wide, the portion's label sits above the dots at their left edge and
   the segment's below them at its region's left edge (set inline by the
   template), so neither wraps inside a region. Narrow, the two stack
   above the dots as a key, each with a swatch of its outline. */
.pr .pr-mkt-label {
  display: flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  max-width: 100%;
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink);
}
.pr .pr-mkt-wide .pr-mkt-label { padding-left: 2px; }
.pr .pr-mkt-wide svg { margin: 8px 0; }
.pr .pr-mkt-key {
  flex: none;
  width: 14px;
  height: 10px;
  border-radius: 3px;
  border: 1.4px solid rgba(17, 22, 27, 0.7);
}
.pr .pr-mkt-key.is-add { border-style: dashed; border-color: rgba(17, 22, 27, 0.45); }
.pr .pr-mkt-keys { display: grid; gap: 6px; }

/* ── The steps' line ────────────────────────────────────────────── */

/* The line. Each step draws its own segment, from under its node to the
   next step's node, so the line ends exactly on the last one whatever the
   heights. The node is an Ink square softened 3px, never a circle (a
   circle is an account), level with the label's cap height. Into Ongoing
   Processes the segment turns dashed and the node goes hollow, and past
   it the line keeps going, dashed, down its three points: the part that
   does not end. */
.pr .pr-rail {
  list-style: none;
  margin: 0;
  padding: 0 0 0 52px;
}
.pr .pr-step {
  position: relative;
  padding-bottom: 72px;
}
.pr .pr-step:last-child { padding-bottom: 0; }
.pr .pr-step::before {
  content: '';
  position: absolute;
  left: -52px;
  top: 5px;
  width: 13px;
  height: 13px;
  box-sizing: border-box;
  border-radius: 3px;
  background: var(--ink);
}
.pr .pr-step::after {
  content: '';
  position: absolute;
  left: calc(-52px + 6px);
  top: 26px;
  bottom: -1px;
  border-left: 1px solid rgba(17, 22, 27, 0.2);
}
.pr .pr-step:nth-last-child(2)::after { border-left-style: dashed; }
.pr .pr-step.is-ongoing::before {
  background: var(--tint);
  border: 1.5px solid var(--ink);
}
.pr .pr-step.is-ongoing::after {
  bottom: -28px;
  border-left-style: dashed;
}
@media (max-width: 1040px) {
  .pr .pr-step { padding-bottom: 60px; }
}
@media (max-width: 700px) {
  .pr .pr-rail { padding-left: 30px; }
  .pr .pr-step::before { left: -30px; width: 11px; height: 11px; top: 5px; }
  .pr .pr-step::after { left: calc(-30px + 5px); top: 23px; }
}

/* The step's label, "Step 1": its heading, set as the site's Label (the
   eyebrow role). Teal Deep is the ordinal clause of the Confirmed Teal
   Rule: these five have a real order. Ongoing Processes takes the same
   label, as Rex's document sets it at the same level as the steps. */
.pr .pr-label {
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  line-height: 22px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin: 0 0 12px;
}

/* A step's paragraphs at lede size, the audience pages' point size. Rex's
   bold clauses go Ink at 600, so they read as the sentence's subject
   rather than as a second heading. */
.pr .pr-p {
  font-size: 19px;
  line-height: 1.6;
  color: var(--body);
  max-width: 34em;
}
.pr .pr-p + .pr-p { margin-top: 16px; }
.pr .pr-p strong,
.pr .pr-list strong { font-weight: 600; color: var(--ink); }
@media (max-width: 700px) {
  .pr .pr-p { font-size: 18px; }
}

/* Step 2's four questions: numbered, each in Ink at a step under the
   paragraph, divided by hairlines, numerals in Teal Deep (ordinal). */
.pr .pr-questions {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  max-width: 32em;
  border-top: 1px solid var(--rule);
}
.pr .pr-questions li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.pr .pr-q-num {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  color: var(--teal-deep);
}
.pr .pr-q {
  font-size: 17.5px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--ink);
}

/* Ongoing Processes' three points, divided by hairlines like the
   questions, at the paragraphs' colour. */
.pr .pr-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 34em;
  border-top: 1px solid var(--rule);
}
.pr .pr-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--body);
}
@media (max-width: 700px) {
  .pr .pr-q, .pr .pr-list li { font-size: 17px; }
}

/* ── The close ──────────────────────────────────────────────────── */

/* The audience pages' close (copied from sales.css), with Rex's question
   as its eyebrow. */
.pr .mk-plan { padding: 104px 0 96px; }
.pr .mk-plan .accent-rule { margin-left: auto; margin-right: auto; }
.pr .pr-plan-eyebrow { margin-bottom: 14px; }
.pr .mk-plan h2 { font-size: clamp(33px, 4.5vw, 57px); }
.pr .mk-plan-body {
  margin: 22px auto 0;
  max-width: 31em;
  font-size: 16.5px;
  line-height: 1.58;
  color: var(--body);
}
.pr .mk-plan .actions { margin-top: 30px; }

.pr .mk-unread {
  margin: 56px auto 0;
  max-width: 760px;
}
.pr .mk-unread svg { display: block; width: 100%; height: auto; }
.pr .mk-unread-narrow { display: none !important; }
@media (max-width: 520px) {
  .pr .mk-unread-wide { display: none !important; }
  .pr .mk-unread-narrow { display: block !important; }
}
.pr .mk-unread-rings circle {
  fill: none;
  stroke: rgba(183, 190, 196, 0.95);
  stroke-width: 1.2;
}
.pr .mk-unread-line {
  fill: none;
  stroke: rgba(17, 22, 27, 0.35);
  stroke-width: 1.6;
}