/* ===========================================================================
   PRICING PAGE — /pricing/  (9/15, second pass)
   ---------------------------------------------------------------------------
   Built by scripts/build-pricing.py from Alie's locked copy. Loaded last,
   scoped to .page-pricing and the page's own pr-* classes. Tokens only:
   verify.js rejects hex colours, ramped fills, backdrop effects and forced
   priority flags in this sheet, and it reads comments, so they are described
   here rather than written out.

   Second pass, Brees 9/15:
     - the H1 uses the shared .hero__headline size (it was far larger);
     - only titles are in All Round Gothic — the prices are Altivo now;
     - the fine print is an indigo strip that slides in from the left;
     - the closing CTA is the shared .final-cta, as on every other page;
     - the hero is option B, BRAND SHAPES, picked from three trials (a blue,
       b shapes, c price tiles), and its shapes overlap the table section
       instead of being cut by it.

   Sections and grounds: 1 hero (white + the pattern disc and petal/lime pair) ·
   2 table (white, top-right corner) · 3 fine print (an indigo strip on white) ·
   4 why we publish (white, top-right) · 5 closing CTA (shared sky, top-left).
   Contrast: ink on white 13.3 · ink on sky 9.83 · ink on oat 11.5 · ink on
   lime 8.95 · ink on petal 7.8 · ink-muted on white/oat above 5 ·
   white on indigo 8.09 · oat on indigo 7.01.
   =========================================================================== */

/* 🔴 CORNERS = THE SMART INTAKE SCALE (page-sections.css, loaded first): 3x everywhere, with the single corner
   for the section 1 -> 2 join only (Brees 9/15 standing rule). Was a single 80px corner on every section. */
.page-pricing .pr-hero,
.page-pricing .pr-prices { --corner: var(--corner-1); }

/* -------------------------------------------------------------- 1. hero */
/* ✅ OPTION B, BRAND SHAPES (Brees 9/15). White, carried by the same device as
   the SEO & Content and Call Insights heroes: the line-pattern disc up and
   right, the petal + lime pair crossing by multiply below it.

   🔴 THE SHAPES OVERLAP SECTION 2 — THEY ARE NOT CUT BY IT. Brees: "I don't
   like how the shapes get cut off because of section 2 ... The only place it
   could be cut off is if it's going off of the right side of the screen or if
   it's getting cut off by the header." Three things make that true:
     1. overflow-x: clip, overflow-y: visible — the hero still stops the shapes
        at the screen's edge sideways (no horizontal scroll), but no longer at
        its own top and bottom.
     2. z-index 1 on the hero lifts it, shapes included, over .pr-prices'
        white ground (which comes later in the page and used to paint over them).
     3. .pr-prices .container is z-index 2, so the TABLE itself still sits on
        top of the shapes — they run under the prices, never over them.
   The header is sticky at z-index 40 with its own white ground, so anything
   that rises above the hero is cut there, as allowed. */
.pr-hero {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow-x: clip;
  overflow-y: visible;
  padding-block: calc(var(--section-pad) * 0.75) calc(var(--section-pad) + var(--corner));
  background-color: var(--white);
}
.pr-hero__grid { position: relative; z-index: 1; }
/* Size comes from the shared .hero__headline; only the measure and spacing here. */
.pr-hero__h1 { max-width: 20ch; margin: 0 0 var(--s-3); }
.pr-hero__intro { max-width: 60ch; margin: 0; }

.pr-hero__pattern {
  z-index: 0;
  width: clamp(280px, 30vw, 560px);
  aspect-ratio: 1;
  top: -16%;
  right: -6%;
}
.pr-hero__disc {
  position: absolute;
  z-index: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  mix-blend-mode: multiply;
}
.pr-hero__disc--petal { width: clamp(120px, 11vw, 200px); right: 25%; bottom: 10%; background-color: var(--petal); }
.pr-hero__disc--lime { width: clamp(150px, 13vw, 240px); right: 17%; bottom: -8%; background-color: var(--lime); }
@media (max-width: 899px) {
  .pr-hero__pattern { width: 240px; top: -60px; right: -90px; }
  .pr-hero__disc { display: none; }
}

/* ------------------------------------------------------------- 2. table */
/* The container lifts over the hero's overlapping shapes (see 1. hero). */
.pr-prices .container { position: relative; z-index: 2; }
.pr-prices {
  position: relative;
  margin-top: calc(-1 * var(--corner));
  /* Section 2: its own corner is single (1 -> 2), but the fine print pulls up by the 3x corner. */
  padding-block: var(--section-pad) calc(var(--section-pad) + var(--corner-3x));
  border-top-right-radius: var(--corner);
  background-color: var(--white);
}
.pr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.0625rem;
  line-height: 1.5;
}
.pr-table thead th {
  padding: 0 var(--s-3) var(--s-2) 0;
  border-bottom: 2px solid var(--ink);
  color: var(--ink-muted);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}
.pr-table tbody th,
.pr-table tbody td {
  padding: var(--s-3) var(--s-3) var(--s-3) 0;
  border-bottom: 1px solid var(--ink-12);
  text-align: left;
  vertical-align: top;
}
.pr-table tbody th { width: 26%; font-weight: 500; }
.pr-table tbody th a { color: var(--ink); text-decoration: none; }
.pr-table tbody th a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
.pr-table a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
/* 🔁 Altivo, not the display face — Brees 9/15: only titles are Gothic. */
.pr-table .pr-price {
  width: 24%;
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
}
.pr-table .pr-incl { color: var(--ink-muted); }

/* The two free rows: a flat lime band behind the word, ink on it. */
.pr-free {
  box-shadow: inset 0 -0.38em 0 var(--lime);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Phones: each row becomes a small card with its own labels. The header row
   stays in the document for screen readers; the explicit ARIA roles in the
   markup keep the table semantics when display changes. */
@media (max-width: 719px) {
  .pr-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .pr-table,
  .pr-table tbody,
  .pr-table tr,
  .pr-table tbody th,
  .pr-table tbody td { display: block; width: auto; }
  .pr-table tr { padding: var(--s-3) 0; border-bottom: 1px solid var(--ink-12); }
  .pr-table tbody th,
  .pr-table tbody td { padding: 0; border-bottom: 0; }
  .pr-table tbody th { font-size: 1.125rem; }
  .pr-table tbody td { margin-top: 8px; }
  .pr-table tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--ink-muted);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
}

/* -------------------------------------------------------- 3. fine print */
/* ✅ THE STRIP — Brees 9/15, option 5 ("I really like option 5"). An indigo strip
   that bleeds off the LEFT edge of the screen and ends in a pill cap on the
   right (the homepage trust bar's shape), sitting between the white table and
   the white Why section so the page stops reading as back-to-back text blocks.

   🔁 LESS SQUISHED ("I feel like it's a little bit squished"): the trial strip
   was 313px tall at 1920 with 48px inside it and points three lines deep. Now:
   more padding inside the strip, a bigger heading-to-points gap, wider columns
   gutters, more white above and below, and a wider allowance for the cap so the
   last column never crowds the curve.

   The strip itself is a ::before under the content, so the text needs no box of
   its own. overflow-x: clip on the section stops the left bleed from scrolling
   the page sideways. On indigo: white heading 8.09 · oat text 7.01. */
.pr-fine {
  position: relative;
  overflow-x: clip;
  margin-top: calc(-1 * var(--corner));
  padding-block: var(--s-6) calc(var(--s-6) + var(--corner));
  background-color: var(--white);
}
.pr-fine > .container {
  position: relative;
  isolation: isolate;
  padding-block: clamp(56px, 6vw, 104px);
  /* 🔁 96px cap allowance, not 160. Measured 9/15 at 1920: the wider allowance
     plus the column gutters narrowed each column to ~230px and every point
     wrapped to FOUR lines — squished sideways instead of vertically. */
  padding-right: calc(var(--container-pad) + clamp(56px, 5vw, 96px));
}
.pr-fine > .container::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  border-radius: 0 999px 999px 0;
  background-color: var(--indigo);
}
.pr-fine__h { margin: 0; color: var(--white); }
.pr-fine__list {
  display: grid;
  gap: var(--s-4);
  margin: var(--s-5) 0 0;
  padding: 0;
  list-style: none;
}
.pr-fine__item { display: block; }
/* 19px, full column width: the 21px lead size under a 32ch cap is what wrapped
   the points to four lines in columns this wide (9/15). */
.pr-fine__item p { margin: 0; color: var(--oat); font-size: 1.1875rem; line-height: 1.55; }
@media (min-width: 900px) {
  .pr-fine__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .pr-fine__item { padding: 0 var(--s-4); border-left: 1px solid var(--oat-14); }
  .pr-fine__item:first-child { padding-left: 0; border-left: 0; }
}
@media (max-width: 899px) {
  .pr-fine > .container { padding-right: var(--container-pad); }
  .pr-fine > .container::before { border-radius: 0 40px 40px 0; }
}

/* THE ENTRANCE — not on the page until it starts entering the viewport, then
   it just comes in: the shared .reveal observer (shared-v3.js) adds .is-visible
   once, at ~15% visible. Not scroll-linked.
     1. the strip slides in from off the left edge (the ::before, 900ms);
     2. the heading, then the points, fade and drift in just behind it.
   ⚠️ .reveal's own base state (fade + drift up on the WHOLE container) is
   overridden to nothing here — the strip and its content animate separately.
   Under reduced motion shared-v3.js marks it visible at once and base-v3.css
   zeroes durations; the block below also pins the end state. No JS: the
   html[data-js="on"] gate means everything simply shows. */
html[data-js="on"] .pr-fine > .container.reveal { opacity: 1; transform: none; }
html[data-js="on"] .pr-fine > .container.reveal::before {
  transform: translateX(-100%);
  transition: transform 900ms var(--ease-out);
}
html[data-js="on"] .pr-fine > .container.reveal > * {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 550ms var(--ease-out) 520ms, transform 550ms var(--ease-out) 520ms;
}
html[data-js="on"] .pr-fine > .container.reveal > .pr-fine__list { transition-delay: 700ms, 700ms; }
html[data-js="on"] .pr-fine > .container.reveal.is-visible::before,
html[data-js="on"] .pr-fine > .container.reveal.is-visible > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html[data-js="on"] .pr-fine > .container.reveal::before,
  html[data-js="on"] .pr-fine > .container.reveal > * { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------- 4. why we publish */
/* White. Ink on white 13.3.
   🔁 NO 60vh MINIMUM, AND A SHORTER TOP — Brees 9/15: "lessen the view height ...
   It just feels like there's a lot more padding on top than on the bottom." Two
   causes, both measured: the 60vh min-height added centring slack on both sides,
   and the white the fine print strip leaves under itself (--s-6) stacked on top of
   this section's own top padding. The section now fits its content, and the top
   padding gives back exactly that --s-6, so the air above the heading matches the
   air below the paragraph. (The 60vh ask from earlier the same day is superseded.) */
.pr-why {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: calc(-1 * var(--corner));
  /* 🔁 MORE AIR, STILL EVEN — Brees 9/15, after the trim: "not enough breathing
     room". Each side gains --s-6: the top keeps a full --section-pad (plus the
     --s-6 of white the strip leaves above it), and the bottom adds --s-6 to match,
     so above and below stay equal. */
  padding-block: var(--section-pad) calc(var(--section-pad) + var(--s-6) + var(--corner));
  border-top-right-radius: var(--corner);
  background-color: var(--white);
  color: var(--ink);
}
.pr-why > .container { width: 100%; }
.pr-why__grid { display: grid; gap: var(--s-4); }
@media (min-width: 900px) {
  .pr-why__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--s-6);
    align-items: start;
  }
}
.pr-why__h { margin: 0; color: var(--ink); }
.pr-why__p { max-width: 56ch; margin: 0; color: var(--ink); font-size: 1.25rem; line-height: 1.6; }

/* ------------------------------------------ 5. closing CTA (shared .final-cta) */
/* Only the corner is page-local; ground, circles, headline and button are the
   shared block, like .gads-cta on Google Ads. */
.page-pricing .pr-cta {
  margin-top: calc(-1 * var(--corner));
  border-top-left-radius: var(--corner);
}

/* RESPONSIVE PASS (9/16). `.pr-table .pr-price { width: 24% }` is (0,2,0) and
   beat the phone rule's `.pr-table tbody td { width: auto }` at (0,1,2), so on
   a phone every price was set in a quarter of the card: "$399 per / month, /
   per / location" down four lines. */
@media (max-width: 719px) {
  .pr-table td.pr-price { width: auto; }
}

/* RESPONSIVE PASS (9/16) — the hero's top matches the product-page family.
   `.pr-hero` used `--section-pad * 0.75` on top while the five product pages use
   `--section-pad * 0.5 + 43px` (direction-d-v3.css .hero), so the gap under the
   header changed from page to page, and on phones it was ~40px against ~70px.
   Same expression now; the bottom (corner pull-up) is untouched. */
.pr-hero { padding-top: calc(var(--section-pad) * 0.5 + 43px); }
@media (max-width: 599px) {
  /* The line-art disc sat behind the end of every headline line at 390. */
  .pr-hero__pattern { width: 200px; top: -96px; right: -118px; }
}