/* page/pricing.css — page-scoped styling for pricing.html only.
   Composes tokens + classes from components/styles.css and home/home-flagship.css
   (R-04/R-05). Loads LAST. The platform toggle mirrors faq.css's segmented pill
   so both pages read as one system; per R-02 the gradient is never used on a
   plan card — the recommended plan is set apart by border, elevation and a
   solid black badge. */

/* ---------------- Masthead ---------------- */
.pr-mast { padding-top: clamp(48px, 7vw, 84px); padding-bottom: clamp(32px, 5vw, 56px); }
.pr-mast__inner { max-width: var(--content); text-align: center; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.pr-mast .kicker { justify-content: center; }
.pr-mast__title {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(32px, 5vw, 52px); line-height: 1.08; color: var(--primary);
  margin: 10px 0 18px; text-wrap: balance;
}
.pr-mast__sub { font-size: clamp(15px, 1.6vw, 17px); line-height: 1.6; color: var(--text); max-width: 62ch; margin: 0 auto; }
.pr-mast__cta { display: flex; gap: 14px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }

/* ---------------- How it works — three pillars ---------------- */
.pr-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pr-pillar {
  padding: 28px 26px 30px; border: 1px solid var(--line); border-radius: var(--r-frame);
  background: var(--white);
}
.pr-pillar__icon {
  width: 44px; height: 44px; border-radius: var(--r-card);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2, #f4f1f3); color: var(--primary); margin-bottom: 16px;
}
.pr-pillar__icon svg { width: 21px; height: 21px; }
.pr-pillar__title { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: var(--primary); margin: 0 0 8px; }
.pr-pillar__body { font-size: 14.5px; line-height: 1.6; color: var(--text); margin: 0; }

@media (max-width: 860px) { .pr-pillars { grid-template-columns: 1fr; } }

/* ---------------- Pricing questions: accordions (mirrors faq.css's
   .faq-item mechanics — grid-rows 0fr->1fr for a smooth, layout-safe
   height transition — under this page's own .pr-qa__* names) ---------------- */
.pr-qa { border-top: 1px solid var(--line); }
.pr-qa__row { border-bottom: 1px solid var(--line); }

/* --- Appear: the ten rows cascade in rather than all landing at once
   (directed 2026-09-01). home-flagship.css only ships data-d delays 1-4, so
   the last six rows had no offset at all; these cover the full set. Each row
   still carries its own .reveal, so a row scrolled to on its own animates on
   its own — the stagger only reads as a cascade for the rows that enter
   together, which is the group the visitor is actually looking at. --- */
.pr-qa__row:nth-child(1)  { transition-delay: 0ms; }
.pr-qa__row:nth-child(2)  { transition-delay: 45ms; }
.pr-qa__row:nth-child(3)  { transition-delay: 90ms; }
.pr-qa__row:nth-child(4)  { transition-delay: 135ms; }
.pr-qa__row:nth-child(5)  { transition-delay: 180ms; }
.pr-qa__row:nth-child(6)  { transition-delay: 225ms; }
.pr-qa__row:nth-child(7)  { transition-delay: 260ms; }
.pr-qa__row:nth-child(8)  { transition-delay: 290ms; }
.pr-qa__row:nth-child(9)  { transition-delay: 315ms; }
.pr-qa__row:nth-child(10) { transition-delay: 335ms; }

.pr-qa__q { margin: 0; font-weight: normal; }
.pr-qa__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 0; border: 0; background: transparent; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.35;
  letter-spacing: -0.01em; color: var(--primary);
}
.pr-qa__btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

/* --- The control: a bordered disc that inks solid black when the row opens,
   so open/closed is carried by shape AND fill, never by colour alone (R-07).
   The plus rotates a half-turn into a minus as it goes. --- */
.pr-qa__icon {
  position: relative; width: 30px; height: 30px; flex: none;
  border: 1px solid var(--line); border-radius: 50%; background: var(--white);
  transition: background-color 0.3s var(--ease-standard), border-color 0.3s var(--ease-standard),
              transform 0.3s var(--ease-out);
}
.pr-qa__icon::before, .pr-qa__icon::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: var(--primary);
  border-radius: 1px;
  transform: translate(-50%, -50%);
  transition: transform 0.36s var(--ease-out), opacity 0.22s var(--ease-standard),
              background-color 0.3s var(--ease-standard);
}
.pr-qa__icon::before { width: 12px; height: 1.6px; }
.pr-qa__icon::after { width: 1.6px; height: 12px; }
@media (hover: hover) and (pointer: fine) {
  .pr-qa__btn:hover .pr-qa__icon { border-color: var(--primary); transform: scale(1.06); }
}
.pr-qa__row.is-open .pr-qa__icon { background: #0b0b0b; border-color: #0b0b0b; }
.pr-qa__row.is-open .pr-qa__icon::before { background: var(--white); transform: translate(-50%, -50%) rotate(180deg); }
.pr-qa__row.is-open .pr-qa__icon::after { background: var(--white); transform: translate(-50%, -50%) rotate(180deg); opacity: 0; }

/* --- The panel: the grid-rows 0fr->1fr trick opens the box; the answer
   itself fades and lifts in just behind it, so the text arrives as the space
   finishes making room instead of being dragged along by the clip. --- */
.pr-qa__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.42s var(--ease-out); }
.pr-qa__panel > div { overflow: hidden; }
.pr-qa__row.is-open .pr-qa__panel { grid-template-rows: 1fr; }
.pr-qa__a {
  font-size: 14.5px; line-height: 1.7; color: var(--text); margin: 0 0 20px; max-width: 62ch;
  opacity: 0; transform: translateY(-6px);
  transition: opacity 0.24s var(--ease-standard), transform 0.34s var(--ease-out);
}
.pr-qa__row.is-open .pr-qa__a { opacity: 1; transform: none; transition-delay: 0.1s; }
.pr-qa__more { margin: 24px 0 0; font-size: 14.5px; }
.pr-qa__link { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .pr-qa__row { transition-delay: 0ms !important; }
  .pr-qa__icon, .pr-qa__icon::before, .pr-qa__icon::after, .pr-qa__panel { transition: none; }
  /* the answer still crossfades — it is the only cue that the panel changed */
  .pr-qa__a { transform: none; transition: opacity 0.15s linear; }
  .pr-qa__row.is-open .pr-qa__a { transition-delay: 0s; }
}

/* ---------------- Plan comparison (PR-02) ----------------
   Growth is the recommended plan (source note) — set apart by border,
   elevation and a solid badge, never by the accent gradient (R-02: the
   gradient is never a wash). The price is the largest element in each
   column, minimum directly beneath it (per the source note: the minimum
   is what tells a buyer which column is theirs). */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; overflow: visible; }
.plan-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-frame, 18px);
  padding: clamp(24px, 3vw, 32px); display: flex; flex-direction: column; text-align: left;
  box-shadow: 0 1px 2px rgba(11, 11, 11, 0.04);
  transition: transform 0.3s var(--ease-out, ease), box-shadow 0.3s var(--ease-out, ease), border-color 0.3s ease;
}
.plan-card--featured {
  border-color: #0b0b0b; border-width: 2px; box-shadow: 0 20px 48px rgba(0, 0, 0, 0.1);
  position: relative; overflow: visible; margin-top: 10px;
  padding-top: calc(clamp(24px, 3vw, 32px) + 8px);
}
@media (hover: hover) and (pointer: fine) {
  .plan-card:hover { transform: translateY(-5px); border-color: #0b0b0b; box-shadow: 0 20px 40px -20px rgba(11, 11, 11, 0.22); }
  .plan-card--featured:hover { transform: translateY(-5px); box-shadow: 0 26px 54px rgba(0, 0, 0, 0.14); }
  .plan-card:hover .plan-card__icon { transform: translateY(-2px) scale(1.06); }
}
.plan-card__icon {
  width: 44px; height: 44px; border-radius: var(--r-card); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2, #f4f1f3); color: var(--primary); margin-bottom: 18px;
  transition: transform 0.3s var(--ease-out, ease);
}
.plan-card__icon svg { width: 21px; height: 21px; }
.plan-card__icon--featured { background: #0b0b0b; color: var(--white); }
.plan-card__badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: #0b0b0b; color: var(--white); font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em; padding: 6px 16px; border-radius: 999px;
  z-index: 10; white-space: nowrap;
  box-shadow: 0 12px 28px rgba(11, 11, 11, 0.18), 0 2px 6px rgba(11, 11, 11, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
@media (hover: hover) and (pointer: fine) {
  .plan-card--featured:hover .plan-card__badge {
    box-shadow: 0 16px 36px rgba(11, 11, 11, 0.22), 0 4px 10px rgba(11, 11, 11, 0.12);
    transform: translateX(-50%) translateY(-2px);
  }
}
.plan-card__name { font-family: var(--font-display); font-weight: 800; font-size: 20px; margin: 4px 0 4px; }
.plan-card__subtitle { font-size: 13.5px; color: var(--text); margin: 0 0 22px; }
.plan-card__price {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(28px, 3vw, 38px); color: var(--primary); margin: 0 0 8px; line-height: 1.1;
}
/* Body hierarchy, reworked 2026-09-02 (directed) — four steps down from the
   price, each one visibly quieter than the last, so a buyer reads the card
   in the order the decision is actually made:
     price   the number, largest thing in the column
     unit    what the number is OF — hung directly under it, no gap
     min     the commitment that qualifies it — the line that tells a buyer
             whether this column is theirs, so it keeps real body weight
     meta    plan-level facts as label/value rows below a rule
   The cards are equal-height flex columns and the meta block takes the
   slack (margin-top:auto), so meta + CTA sit on one baseline across all
   three regardless of how much copy each card's price block carries —
   Growth's, with its unit line dropped, included. That replaces the old
   min-height:3.4em fudge on .plan-card__min. */
.plan-card__unit {
  font-size: 12.5px; line-height: 1.45; color: var(--text); opacity: 0.7;
  margin: 0 0 14px;
}
/* Two stacked unit lines read as one block, not two steps. */
.plan-card__unit--stack { margin-bottom: 4px; }
.plan-card__min {
  font-size: 13.5px; line-height: 1.55; color: var(--text); margin: 0 0 18px;
}
/* Affiliate marketing as a real label/value row instead of an em-dashed
   sentence. `is-off` is the not-available state — dimmed AND worded, never
   colour alone (R-07). */
.plan-card__meta {
  margin: auto 0 20px; padding-top: 12px; border-top: 1px solid var(--line);
  display: grid; gap: 6px;
}
.plan-card__meta-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.plan-card__meta dt { font-size: 12.5px; color: var(--text); opacity: 0.7; }
.plan-card__meta dd {
  margin: 0; font-size: 12.5px; font-weight: 600; color: var(--primary);
  text-align: right;
}
.plan-card__meta dd.is-off { font-weight: 500; color: var(--text); opacity: 0.5; }
/* meta owns the auto margin, so it is the single item that absorbs the
   column's slack. The CTA used to carry margin-top:auto too, which split the
   free space between the two and left the three affiliate rows on three
   different baselines. */
.plan-card__cta { margin-top: 0; width: 100%; }
@media (max-width: 900px) {
  .plan-grid { grid-template-columns: 1fr; }
  .plan-card--featured { order: -1; }
  /* Masthead's self-serve "Build a campaign free" stays desktop-only, same
     rule as every other ai.influeri.com CTA (home-flagship.css); "Book an
     intro" is the sibling left standing. Not touched: Starter's
     .plan-card__cta below, which is that card's only button. */
  .pr-mast__cta a[href*="ai.influeri.com"] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .plan-card, .plan-card__icon { transition: none; }
}

/* ---------------- Feature matrix (PR-03) ----------------
   .matrix-scroll keeps the horizontal overflow inside the table, never on
   the page (R-07 craft floor). Sticky header offsets by the nav's own
   76px height so it never slides under the site nav. Framed as a card so it
   reads as one designed surface rather than a bare spreadsheet; the Growth
   column carries a soft spotlight tint the whole way down so the plan
   selected above stays the visual anchor while comparing every row. */
/* No internal scroll (directed 2026-09-01) — every one of the 46 rows is on
   the page as one continuous list. The panel used to be a max-height:640px
   scroll box; a comparison table you have to scroll inside hides exactly the
   rows a buyer came to compare, and it nested a scrollport inside the page.

   `overflow: clip` on the frame rounds the table's corners against the panel
   border WITHOUT making the panel a scroll container, so the thead's
   position:sticky still resolves against the viewport — it pins under the
   76px site nav for the full height of the table and disappears with the
   panel, which is what makes a page-length table readable at row 40.
   Horizontal scrolling is handed to .matrix-scroll only below 900px, where
   the table's 640px minimum genuinely cannot fit. */
.matrix-panel {
  position: relative; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-frame);
  box-shadow: 0 1px 2px rgba(11, 11, 11, 0.04), 0 32px 56px -36px rgba(11, 11, 11, 0.16);
}
/* table-layout:fixed is what actually holds the three plan columns equal —
   under auto layout the browser sizes each column to its own longest cell,
   so Starter (which carries the longest values) ballooned past the other
   two. Widths are declared once on the <colgroup>. */
.matrix-table { width: 100%; min-width: 640px; border-collapse: collapse; table-layout: fixed; }
.matrix-table__col--feature { width: 34%; }
.matrix-table colgroup col:not(.matrix-table__col--feature) { width: 22%; }
.matrix-table th, .matrix-table td { padding: 14px 18px; font-size: 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: normal; }
.matrix-table thead th {
  /* 76px = the site nav's own height, so the pinned header lands just under
     it rather than sliding beneath it. */
  position: sticky; top: 76px; z-index: 5; background: var(--white);
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  border-bottom: 2px solid var(--primary);
}
.matrix-table .matrix-table__feature, .matrix-table td:first-child { width: 34%; color: var(--primary); font-weight: 600; }
/* sticky first column so the feature name stays put while the plan columns
   scroll horizontally on narrow viewports */
.matrix-table thead th:first-child { left: 0; z-index: 7; }
.matrix-table tbody tr:not(.matrix-band) td:first-child {
  position: sticky; left: 0; z-index: 3; background: var(--white);
  box-shadow: 4px 0 8px -6px rgba(11, 11, 11, 0.12);
}
.matrix-band th {
  background: var(--surface-2, #fafafa); font-family: var(--font-display); font-weight: 700;
  font-size: 12.5px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text);
  padding: 18px 18px 8px 22px; border-bottom: 1px solid var(--line); position: relative;
}
.matrix-band th::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 13px; border-radius: 2px; background: var(--grad);
}
.matrix-table tbody tr:not(.matrix-band):hover { background: rgba(11, 11, 11, 0.018); }
.matrix-table tbody tr:not(.matrix-band):hover td:first-child { background: #fbfafa; }

/* ---- Recommended column: the black badge in the header is now the whole
   signal. The pink column wash (a #fef4f8 header and a 46-row
   rgba(237,61,127,.045) tint down the body) was removed 2026-09-02 as
   directed — it was the one full-column colour field on the page, which is
   exactly what R-01 rules out and what R-02 means by "never a wash". A
   solid black pill on a white table says "recommended" without tinting a
   quarter of the comparison. ---- */
.matrix-table__featured-col { position: relative; }
.matrix-table__badge {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--white); background: #0b0b0b; padding: 3px 10px; border-radius: 999px;
  margin-left: 8px; vertical-align: middle; text-transform: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 8px rgba(11, 11, 11, 0.15);
}
/* The badge sits on its own line by design rather than wrapping there by
   accident: at 22% column width "Growth Recommended" doesn't fit on one
   line at any viewport, so stacking it deliberately is the honest layout.
   The badge is set to display:block rather than the cell to display:flex —
   a flex <th> drops out of the table box model and takes its column's width
   with it. */
.matrix-table thead th.matrix-table__featured-col .matrix-table__badge {
  display: block; width: fit-content; margin: 6px 0 0;
}

/* ---- Yes / No indicators: a check-mark glyph reads faster than a
   repeated "Yes" 40+ times down the page. "Yes" stays real text in the DOM
   (still announced to assistive tech) — only its visual glyph is swapped. ---- */
.matrix-table td.is-yes {
  color: transparent; font-size: 0; position: relative;
}
.matrix-table td.is-yes::before {
  content: ""; position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; background: #0b0b0b;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.5 2.5L16 9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.5 2.5L16 9'/%3E%3C/svg%3E") center / contain no-repeat;
}
.matrix-table td.is-no { color: var(--text); opacity: 0.35; }

/* ---- Mobile plan switch (<=900px) ----
   A horizontally-scrolled 3-plan table doesn't work on a phone: the sticky
   feature column already eats most of the viewport, so the visible sliver of
   the first plan column gives no hint that swiping reveals two more — a
   buyer can land on Starter and never discover Growth/Enterprise exist.
   Below 900px this switches to a Starter/Growth/Enterprise segmented control
   (mirrors faq.html's .faq-toggle) and the table is filtered with nth-child
   to Feature + the active plan only, so it's a plain two-column list at full
   width with no scrolling in either direction. Hidden above 900px, where all
   three plans read fine side by side. */
.matrix-toggle {
  display: none; position: relative; width: 100%;
  background: var(--surface-2, #f4f1f3); border-radius: var(--r-pill); padding: 4px;
  margin: 0 0 16px;
}
.matrix-toggle__btn {
  position: relative; z-index: 1; flex: 1; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: -0.01em;
  padding: 10px 4px; border-radius: var(--r-pill); color: var(--text);
  transition: color 0.25s ease;
}
.matrix-toggle__btn.is-active { color: var(--white); }
.matrix-toggle__btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.matrix-toggle__thumb {
  position: absolute; top: 4px; left: 4px; width: calc(33.333% - 4px); height: calc(100% - 8px);
  background: var(--primary); border-radius: var(--r-pill);
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.matrix-toggle[data-active-plan="growth"] .matrix-toggle__thumb { transform: translateX(100%); }
.matrix-toggle[data-active-plan="enterprise"] .matrix-toggle__thumb { transform: translateX(200%); }

@media (max-width: 900px) {
  .matrix-toggle { display: flex; }
  /* The table no longer overflows once only two columns render, so the
     scrollport is dropped in favour of a plain block — sticky positioning
     and the fade/scrollbar treatment were only ever in service of the
     3-column scroll this replaces. */
  .matrix-scroll { overflow-x: visible; }
  .matrix-table { min-width: 0; table-layout: auto; }
  .matrix-table thead th { position: static; }
  .matrix-table tbody tr:not(.matrix-band) td:first-child { position: static; box-shadow: none; background: transparent; }
  /* The desktop 34/22/22/22 <col> widths are a table-layout:fixed contract —
     under auto layout a hidden column's declared width still reserves that
     space (Chromium keeps colgroup width as a strong hint even with no
     visible cells in it), leaving a dead gap where the other two plans used
     to sit. Both the cells AND their <col> need hiding, and the two that
     remain need explicit widths — auto layout won't stretch them to fill
     the gap on its own once a fixed-width hint exists on every column. */
  .matrix-table__col--feature { width: 56%; }
  .matrix-table colgroup col:not(.matrix-table__col--feature) { width: 44%; }

  /* Feature + the active plan only. Column order is fixed by the markup —
     1 = Feature, 2 = Starter, 3 = Growth, 4 = Enterprise — so nth-child maps
     directly to a plan without needing a data-plan attribute on every cell. */
  .matrix-panel[data-active-plan="starter"] .matrix-table colgroup col:nth-child(3),
  .matrix-panel[data-active-plan="starter"] .matrix-table th:nth-child(3),
  .matrix-panel[data-active-plan="starter"] .matrix-table td:nth-child(3),
  .matrix-panel[data-active-plan="starter"] .matrix-table colgroup col:nth-child(4),
  .matrix-panel[data-active-plan="starter"] .matrix-table th:nth-child(4),
  .matrix-panel[data-active-plan="starter"] .matrix-table td:nth-child(4) { display: none; }
  .matrix-panel[data-active-plan="growth"] .matrix-table colgroup col:nth-child(2),
  .matrix-panel[data-active-plan="growth"] .matrix-table th:nth-child(2),
  .matrix-panel[data-active-plan="growth"] .matrix-table td:nth-child(2),
  .matrix-panel[data-active-plan="growth"] .matrix-table colgroup col:nth-child(4),
  .matrix-panel[data-active-plan="growth"] .matrix-table th:nth-child(4),
  .matrix-panel[data-active-plan="growth"] .matrix-table td:nth-child(4) { display: none; }
  .matrix-panel[data-active-plan="enterprise"] .matrix-table colgroup col:nth-child(2),
  .matrix-panel[data-active-plan="enterprise"] .matrix-table th:nth-child(2),
  .matrix-panel[data-active-plan="enterprise"] .matrix-table td:nth-child(2),
  .matrix-panel[data-active-plan="enterprise"] .matrix-table colgroup col:nth-child(3),
  .matrix-panel[data-active-plan="enterprise"] .matrix-table th:nth-child(3),
  .matrix-panel[data-active-plan="enterprise"] .matrix-table td:nth-child(3) { display: none; }
}
@media (max-width: 640px) {
  .matrix-table th, .matrix-table td { padding: 11px 12px; font-size: 13px; }
  .matrix-table td.is-yes::before { left: 12px; }
}

/* ---------------- Savings calculator (PR-04) ----------------
   Moved to components/savings-calc.css — shared with index.html's ROI
   section, which used to run a different, older formula (see LP-12 unify). */

/* ================ Split editorial layout ================
   Shared by "Versus an agency" and "Included on every plan" (directed
   2026-09-01 / 2026-09-02) — the two reading sections on this page. Before,
   one was a 920px centred column and the other put a flush-left head over a
   760px centred list, so neither shared a left edge with anything. They are
   now the same two-column grid: head in the narrow column, content in the
   wide one, both hanging off the same pair of baselines.

   It also does the job R-19 asks — the page runs head-over-content for
   plans, matrix and savings, so switching axis for the two prose sections
   varies the rhythm without adding another card grid (R-13). No shared
   component is edited (R-04); this block lives entirely in the page sheet. */
.pr-split {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.pr-split__head { max-width: 34ch; }
.pr-split__head .sec-title { font-size: clamp(23px, 2.5vw, 31px); }
.pr-split__body > :first-child { margin-top: 0; }
.pr-split__body > :last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .pr-split { grid-template-columns: 1fr; gap: 20px; }
  .pr-split__head { max-width: none; }
}

/* ---------------- Agency comparison (PR-05) ----------------
   The 900k vs 450k figure. Two neutral bars — light fill for the agency,
   solid black for ours — each labelled with its own value, so the comparison
   never rests on colour (R-02, R-07). The fills grow from the left as the
   figure reveals: the motion IS the claim (ours is half the fee), which is
   the only thing that earns it a transition at all (R-03). */
.pr-agency__body { font-size: clamp(15px, 1.6vw, 17px); line-height: 1.6; color: var(--text); margin: 0 0 22px; }
.pr-agency__fig {
  margin: 0; padding: clamp(20px, 2.4vw, 26px);
  border: 1px solid var(--line); border-radius: var(--r-frame); background: var(--white);
  box-shadow: 0 1px 2px rgba(11, 11, 11, 0.04);
}
.pr-agency__fig-cap {
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 18px;
}
/* Explicit placement, not auto-flow: the track is the second source child
   but has to render on the row BELOW the label/value pair, and a
   `grid-column: 1 / -1` item left to auto-placement takes the next free row
   instead — which dropped the value under its own bar. */
.pr-agency__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline; column-gap: 16px; margin-bottom: 20px;
}
.pr-agency__bar:last-of-type { margin-bottom: 0; }
.pr-agency__bar-label { grid-area: 1 / 1; font-size: 13.5px; color: var(--text); }
.pr-agency__bar-val {
  grid-area: 1 / 2;
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(20px, 2vw, 25px); line-height: 1.1; color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.pr-agency__bar--agency .pr-agency__bar-val { opacity: 0.5; }
.pr-agency__bar-track {
  grid-area: 2 / 1 / 3 / -1; margin-top: 10px; height: 8px; border-radius: 999px;
  background: var(--surface-2, #fafafa); box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}
.pr-agency__bar-fill {
  display: block; height: 100%; border-radius: inherit;
  transform-origin: left center; transform: scaleX(0);
  transition: transform 0.9s var(--ease-out);
}
.pr-agency__bar--agency .pr-agency__bar-fill { background: #d8d5d6; }
.pr-agency__bar--ours .pr-agency__bar-fill { background: #0b0b0b; }
.pr-agency__fig.is-in .pr-agency__bar--agency .pr-agency__bar-fill { transform: scaleX(1); transition-delay: 0.1s; }
.pr-agency__fig.is-in .pr-agency__bar--ours .pr-agency__bar-fill { transform: scaleX(0.5); transition-delay: 0.3s; }
.pr-agency__fig-note {
  margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.6; color: var(--text);
}
.pr-agency__fig-note strong { color: var(--primary); font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  /* the bars still carry the ratio, they just arrive already drawn */
  .pr-agency__bar-fill { transition: none; }
  .pr-agency__bar--agency .pr-agency__bar-fill { transform: scaleX(1); }
  .pr-agency__bar--ours .pr-agency__bar-fill { transform: scaleX(0.5); }
}

/* ---------------- What every plan includes (PR-07) ----------------
   A ruled list, not a card grid — the page already spends a card grid on
   the plans and a panel on the agency figure, and five checkmarks do not
   need five boxes (R-13). Each row is a 3-cell subgrid: tick, title, body —
   so every title starts on one x-position and every body on another, which
   is the alignment that was missing when this was a flowing strong-led
   paragraph with a hanging text glyph.
   The tick reuses the feature matrix's own Yes indicator (filled black disc,
   light check) so the two "included" languages on the page match. */
.pr-included { list-style: none; margin: 0; padding: 0; }
.pr-included li {
  display: grid; grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 14px; row-gap: 3px; align-items: start;
  padding: 15px 0; border-top: 1px solid var(--line);
}
.pr-included li:first-child { border-top: 0; padding-top: 0; }
.pr-included li:last-child { padding-bottom: 0; }
.pr-included__tick {
  grid-column: 1; grid-row: 1 / span 2; width: 24px; height: 24px; margin-top: 1px;
  border-radius: 50%; background: #0b0b0b; color: var(--white);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.pr-included__tick svg { width: 13px; height: 13px; }
.pr-included__t {
  grid-column: 2; font-family: var(--font-display); font-weight: 700;
  font-size: 15.5px; line-height: 1.3; letter-spacing: -0.01em; color: var(--primary);
}
.pr-included__b { grid-column: 2; font-size: 14.5px; line-height: 1.55; color: var(--text); }

@media (max-width: 420px) {
  .pr-included li { grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; }
  .pr-included__tick { width: 22px; height: 22px; }
  .pr-included__tick svg { width: 12px; height: 12px; }
}

/* Compact #get-started band removed 2026-09-02 (directed) — the closing CTA is a .ctx-cta strip now. */