/* PrimeStart - page styles: pricing
   The hero was rebuilt on 9 September 2026 (prx- prefix): the dark ground
   shared with the homepage, and the two plans as two panels with the larger
   figure drawn as a container holding the smaller one. It replaces the
   "two figures, one hairline" hero of 4 September, which is gone along with
   hero-pricing.js and every .pt- rule that drove it. Everything below the
   hero was rebuilt on 4 September to the About / Websites / SEO standard
   (pr- prefix). Shared rules live in primestart.css; only rules unique to
   this page are below, and this file must not set the hero's ground,
   padding or border - those belong to .hero-dark. */

details.q summary{list-style:none;cursor:pointer;padding:23px 46px 23px 0;position:relative;font-family:var(--fh);font-size:19px;font-weight:700;letter-spacing:-0.03em;line-height:1.35}
details.q summary::after{content:"";position:absolute;right:6px;top:31px;width:12px;height:12px;border-right:2px solid var(--orange);border-bottom:2px solid var(--orange);transform:rotate(45deg);transition:transform .18s ease}
.final p{color:#A3B5C4;font-size:19px;max-width:52ch;margin:0 auto 34px}
.dark{background:var(--ink);color:#E7EDF3}
.dark h2,.dark h3,.dark .as-h4{color:#fff}
.dark .lede{color:#A3B5C4}

/* ---------- hero: what the bigger figure contains ----------
   The page takes the standard page hero (template-parts/layout/page-hero.php;
   .hero-std in primestart.css), so it sets no hero size, padding, ground or
   type here and must never start. What belongs to this page is only the
   illustration in the standard frame: the two plans as two panels, the
   second drawn as a container holding the first - see the long comment above
   the markup in page-templates/pricing.php for why that containment is the
   design rather than a decoration.

   Built for ink first thing on 9 September 2026 and moved to paper the same
   day when the owner ruled the dark ground out for every hero but the
   homepage's. Only the colours changed: white panels on the warm paper, the
   ink hairlines the rest of the site uses, and the fuller plan carrying the
   wash and an amber edge so it still reads as the one that holds things. */
.prx{position:relative;max-width:470px;margin-left:auto}
.prx-in{display:flex;flex-direction:column}
.prx-card{
  position:relative;padding:26px 28px;border-radius:16px;
  background:var(--white);border:1px solid var(--line);
  box-shadow:0 24px 50px -38px rgba(18,33,47,.45);
}
/* the fuller plan: the wash, a warmer edge and a little more presence,
   because it is the one that holds things */
.prx-card-g{
  padding:26px 28px 22px;
  background:var(--wash);border-color:#EBD8BE;
  box-shadow:0 28px 56px -36px rgba(217,98,14,.34);
}
.prx-k{
  display:flex;align-items:baseline;gap:12px;margin:0 0 12px;
  font-family:var(--fh);font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
}
.prx-card-g .prx-k{color:var(--orange-dk)}
.prx-k em{
  font-style:normal;letter-spacing:.02em;text-transform:none;
  font-size:12.5px;font-weight:600;color:var(--muted);
}
.prx-fig{display:flex;align-items:baseline;gap:11px;margin:0;flex-wrap:wrap}
.prx-fig b{
  font-family:var(--fh);font-size:clamp(38px,3.5vw,46px);font-weight:800;
  letter-spacing:-0.05em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;
}
.prx-fig span{font-size:14.5px;color:var(--muted);letter-spacing:-0.01em}
.prx-note{margin:12px 0 0;font-size:14.5px;line-height:1.5;color:var(--muted)}

/* the join. A hairline through the middle with the label sitting in it, so
   the second panel reads as the first one continued rather than a rival.
   The label's background must match the hero's ground, not white, or it
   shows as a chip laid over the rule. */
.prx-join{
  position:relative;margin:0;padding:16px 0;text-align:center;
}
.prx-join::before{
  content:"";position:absolute;left:28px;right:28px;top:50%;height:1px;
  background:var(--line);
}
.prx-join span{
  position:relative;display:inline-block;padding:0 14px;background:var(--paper);
  font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);
}

/* what the total holds: two inset rows, visibly inside the panel above them */
.prx-holds{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.prx-holds li{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:12px 15px;border-radius:10px;
  background:var(--white);border:1px solid #EEE3D2;
}
.prx-holds b{font-family:var(--fh);font-size:14.5px;font-weight:700;letter-spacing:-0.02em;color:var(--ink)}
.prx-holds span{font-size:13px;line-height:1.4;color:var(--muted);text-align:right}
@media (max-width:1040px){
  .prx{margin-left:0;max-width:560px}
}
/* The phone composition for this page lives in one place: the "composed for
   the screen" block at the foot of this file, with the rest of the page's
   phone rules. Two ≤640 blocks for the same hero is how a mobile layout
   silently stops matching the one that was reviewed. */
@media (max-width:640px){
  .hero-ctas .btn,.final .btns .btn{width:100%}
}

/* ============================================================
   Below the hero: the pricing page (pr-)
   ============================================================ */

/* ---------- shared pieces ---------- */
.pr-statement{font-size:clamp(34px,4vw,52px);font-weight:800;line-height:1.04;letter-spacing:-0.045em;max-width:16ch}
.pr-hair{list-style:none;margin:0;padding:0}
.pr-hair li{padding:12px 0;border-top:1px solid var(--line);font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.pr-hair li:last-child{border-bottom:1px solid var(--line)}
.pr-statement,.pr-terms-head h2,.pr-which-copy h2,.pr-side-copy h2,.pr-faq-head h2,.pr-final h2{text-wrap:balance}

/* ---------- 1. the two plans ----------
   The head only. The panels themselves (.pr-decide / .pr-plan) are at the
   foot of this file with the 9 September 2026 rebuild; the "two sums" and
   the short-lived three-column rules they replaced are gone. */
.pr-plans{padding-bottom:104px}
.pr-plans-head{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:end;margin-bottom:64px}
.pr-plans-head .eyebrow{grid-column:1/-1;margin-bottom:0}
.pr-plans-head .lede{padding-bottom:6px;max-width:46ch}

/* ---------- 2. the terms, in one ledger (dark) ---------- */
.pr-terms{padding:112px 0}
.pr-terms-head{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:52px}
.pr-terms-head h2{max-width:14ch;margin-top:0}
.pr-terms-head .lede{padding-bottom:6px;max-width:46ch;color:var(--on-dark-muted)}
.pr-ledger{border-top:1px solid rgba(255,255,255,.35)}
.pr-ledger-row{display:grid;grid-template-columns:1.1fr 1fr 1.2fr;gap:36px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.12);align-items:start}
.pr-ledger-th{padding:14px 0 12px;border-bottom:1px solid rgba(255,255,255,.35)}
.pr-ledger-th span{font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.pr-ledger-row [role="rowheader"]{font-family:var(--fh);font-size:16px;font-weight:700;letter-spacing:-0.022em;color:#fff;line-height:1.35}
.pr-ledger-row [role="cell"]{font-size:15px;line-height:1.55;color:var(--on-dark)}
.pr-ledger-row [role="cell"] b{display:block;font-family:var(--fh);font-size:16.5px;font-weight:700;letter-spacing:-0.025em;color:#fff;line-height:1.3;font-variant-numeric:tabular-nums}
.pr-ledger-row [role="cell"] em{display:block;font-style:normal;font-size:14px;line-height:1.5;color:var(--on-dark-muted);margin-top:5px}
.pr-ledger-dash{color:rgba(255,255,255,.4)!important}
.pr-ledger-row.is-key [role="cell"] b{color:var(--amber)}
.pr-terms-foot{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.pr-today{margin:0;font-family:var(--fh);font-size:clamp(19px,1.8vw,23px);font-weight:600;letter-spacing:-0.03em;line-height:1.35;color:var(--on-dark)}
.pr-today b{display:block;color:var(--amber);font-weight:800;margin-bottom:6px}
.pr-terms-note{margin:0;font-size:14px;line-height:1.6;color:var(--on-dark-muted);max-width:48ch}
.pr-terms-note a{color:var(--amber);border-bottom:1px solid rgba(240,160,60,.4)}
/* Four columns: the row label and the three plans. Tighter gap and slightly
   smaller cells, because the Website + SEO column carries the longest cells on
   the page (the downgrade sentence) and must not be squeezed to a ribbon. */
.pr-ledger-3 .pr-ledger-row{grid-template-columns:1.15fr 1fr 1fr 1.25fr;gap:26px}
.pr-ledger-3 .pr-ledger-row [role="cell"]{font-size:14.5px}
.pr-ledger-3 .pr-ledger-row [role="cell"] b{font-size:16px}
.pr-ledger-3 .pr-ledger-row [role="rowheader"]{font-size:15.5px}

/* ---------- 3. which one ---------- */
.pr-which-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start}
.pr-which-copy{position:sticky;top:110px}
.pr-which-copy h2{max-width:13ch}
.pr-which-copy > p:not(.eyebrow):not(.pr-which-more){margin-top:20px;font-size:17px;line-height:1.65;color:var(--muted);max-width:40ch}
.pr-which-more{margin-top:24px}
.pr-which-pair{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.pr-which-trio{grid-template-columns:repeat(3,1fr);gap:34px}
.pr-which-k{margin:0 0 14px;min-height:40px;display:flex;align-items:flex-end;font-family:var(--fh);font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);line-height:1.45}
.pr-which-col-g .pr-which-k{color:var(--orange-dk)}
.pr-which-col-s .pr-which-k{color:var(--ink)}
.pr-which-trio .pr-which-col .pr-hair li{font-size:15.5px;padding:12px 0}
.pr-which-col .pr-hair li{font-family:var(--fh);font-size:16.5px;font-weight:600;letter-spacing:-0.022em;color:var(--ink);line-height:1.4;padding:14px 0}

/* ---------- 4. side by side ----------
   The two plans in one light ledger: a row per included service, the
   plan names as column headers, "Included" or a dash in each cell. One
   idea, no key. The single line beneath is the page's only mention of
   extras, and it carries no price. */
.pr-side-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:start}
.pr-side-copy{position:sticky;top:110px}
.pr-side-copy h2{max-width:15ch}
.pr-side-copy > p:not(.eyebrow){margin-top:20px;font-size:17px;line-height:1.65;color:var(--muted);max-width:40ch}
.pr-cmp{border-top:1px solid var(--ink)}
.pr-cmp-row{display:grid;grid-template-columns:1.2fr .7fr 1.1fr;gap:28px;padding:17px 0;border-bottom:1px solid var(--line);align-items:start}
.pr-cmp-th{padding:14px 0 12px}
.pr-cmp-th span{font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);line-height:1.3}
.pr-cmp-th span:last-child{color:var(--orange-dk)}
.pr-cmp-row [role="rowheader"]{font-family:var(--fh);font-size:16px;font-weight:700;letter-spacing:-0.022em;color:var(--ink);line-height:1.35}
.pr-cmp-row [role="cell"]{font-size:15.5px;line-height:1.5;color:var(--ink)}
.pr-cmp-row [role="cell"] b{display:block;font-family:var(--fh);font-weight:600;letter-spacing:-0.018em;line-height:1.4}
.pr-cmp-row [role="cell"] em{display:block;font-style:normal;font-size:14px;line-height:1.5;color:var(--muted);margin-top:4px}
.pr-cmp-row [role="cell"] em a{color:var(--ink);border-bottom:1px solid var(--line);white-space:nowrap}
.pr-cmp-row [role="cell"] em a:hover{color:var(--orange-dk);border-bottom-color:currentColor}
.pr-cmp-row .pr-cmp-no{color:var(--muted)}
/* Four columns. The "not included" cells carry an <em> reason on the SEO
   column ("Stays with your provider"), which is the point of the whole table:
   a dash alone would read as a missing feature rather than a deliberate one. */
.pr-cmp-3 .pr-cmp-row{grid-template-columns:1.3fr .9fr .95fr .9fr;gap:20px}
.pr-cmp-3 .pr-cmp-row [role="cell"]{font-size:15px}
.pr-cmp-3 .pr-cmp-row [role="rowheader"]{font-size:15.5px}
.pr-cmp-3 .pr-cmp-no em{color:var(--muted)}
/* the note sits under the ledger's closing hairline; it draws no rule of its own */
.pr-side-note{margin:26px 0 0;font-size:15.5px;line-height:1.6;color:var(--muted);max-width:58ch}
.pr-side-note b{color:var(--ink);font-family:var(--fh);font-weight:700;letter-spacing:-0.02em}

/* ---------- 4b. after you sign up (8 September 2026) ----------
   Four numbered steps in a row, the last one carrying the accent because
   approval is the moment the customer is actually being reassured about.
   Same hairline-and-numeral language as the home page's own four steps, so
   a reader meeting the journey twice meets it looking the same way. */
.pr-after-head{max-width:46rem;margin:0 0 40px}
.pr-after-head h2{margin:8px 0 0;max-width:22ch}
.pr-after-head .lede{margin:16px 0 0;max-width:56ch}

.pr-after-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.pr-after-steps li{display:flex;gap:14px;align-items:flex-start;border-top:2px solid var(--line);padding-top:20px}
.pr-after-steps li.is-key{border-top-color:var(--orange-dk)}
.pr-after-n{flex:0 0 auto;font-family:var(--fh);font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:2px}
.pr-after-steps li.is-key .pr-after-n{color:var(--orange-dk)}
.pr-after-steps b{display:block;font-family:var(--fh);font-size:16.5px;font-weight:700;letter-spacing:-0.025em;color:var(--ink);line-height:1.35}
.pr-after-steps p{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--ink-2)}
.pr-after-foot{margin:40px 0 0;font-size:16px;color:var(--muted)}

/* ---------- 5. questions ---------- */
.pr-faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:start}
.pr-faq-head{position:sticky;top:110px}
.pr-faq-head h2{max-width:13ch}
.pr-faq-head .lede{margin-top:18px;max-width:34ch}
.pr-faq-more{margin-top:22px}
.pr-faq .faq-list{border-top:1px solid var(--line)}

/* ---------- 6. final ---------- */
.pr-final h2{max-width:18ch}
.pr-final-alt a{color:#DDE6EE;border-bottom:1px solid rgba(255,255,255,.35)}
.pr-final-alt a:hover{color:#fff;border-bottom-color:#fff}

/* ============================================================
   Responsive: laptop and tablet
   ============================================================ */
@media (max-width:1180px){
  .pr-ledger-row{gap:24px}
  .pr-ledger-3 .pr-ledger-row{gap:18px}
  .pr-cmp-3 .pr-cmp-row{gap:14px}
}

/* Three columns run out of room sooner than two did. Between 1040px and
   820px the plan cards go to two-up with the third on its own row rather
   than to a single column: three full-width cards in a row is a very long
   scroll on a tablet, and the pairing keeps the two website plans together
   with standalone SEO beneath. The subgrid row span has to be released for
   that, or the third card is trapped in the first row band. */
@media (max-width:1040px){
  .pr-which-trio{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:1040px){
  .pr-after-steps{grid-template-columns:repeat(2,1fr);gap:34px 40px}
  .pr-plans-head,.pr-terms-head{grid-template-columns:1fr;gap:14px;margin-bottom:40px}
  .pr-which-grid,.pr-side-grid,.pr-faq-grid{grid-template-columns:1fr;gap:44px}
  .pr-which-copy,.pr-side-copy,.pr-faq-head{position:static}
  .pr-terms-foot{grid-template-columns:1fr;gap:26px}
  .pr-terms{padding:88px 0}
}

/* Tablet band (901-1040px): a heading stays beside its own lede.
   These splits are text next to text, so collapsing them at 1040 added
   height to every section for no gain. Restored to 900px, then genuinely
   stacked below. Placed here, not at the end of the file, so the phone
   rules further down still win at <=640px. Heroes are excluded: frozen. */
@media (max-width:1040px){
  .pr-plans-head,.pr-terms-head{grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;margin-bottom:40px}
}
@media (max-width:900px){
  .pr-plans-head,.pr-terms-head{grid-template-columns:1fr;gap:14px;align-items:start;margin-bottom:40px}
}
@media (max-width:820px){
  /* one column: the subgrid alignment is a desktop idea and would trap the
     second plan in the first row band. */
  .pr-which-pair{grid-template-columns:1fr;gap:36px}
  .pr-which-trio{grid-template-columns:1fr;gap:36px}
  .pr-ledger-row{grid-template-columns:1fr;gap:10px;padding:18px 0}
  .pr-ledger-3 .pr-ledger-row{grid-template-columns:1fr;gap:10px}
  .pr-ledger-th{display:none}
  .pr-ledger-row [role="cell"]{padding-left:18px;position:relative}
  .pr-ledger-row [role="cell"]::before{content:"Website";display:block;font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);margin-bottom:3px}
  .pr-ledger-row [role="cell"]:last-child::before{content:"Website + SEO"}
  /* The stacked ledger labels each value with the plan it belongs to, since
     the column header row is hidden here. With three plans the old
     first/last pair is not enough — the middle value would inherit
     "Managed Website" and attach standalone SEO's terms to the wrong
     product, which on this table means attaching an 18-month commitment to
     a plan that has none. Every cell is named explicitly by position. */
  .pr-ledger-3 .pr-ledger-row [role="cell"]:nth-child(2)::before{content:"Managed Website"}
  .pr-ledger-3 .pr-ledger-row [role="cell"]:nth-child(3)::before{content:"SEO"}
  .pr-ledger-3 .pr-ledger-row [role="cell"]:nth-child(4)::before{content:"Website + SEO"}
  .pr-ledger-row [role="cell"]::after{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;background:rgba(255,255,255,.14);border-radius:2px}
}

/* ============================================================
   Phone composition (<=640px): the same page, composed for a phone.
   The two sums stack, their included lists become accordions (first
   open), the terms ledger stacks label over the two values, the decision
   aid becomes a single hairline list, the side-by-side ledger keeps its
   two plan columns under each row label, the FAQ stays an accordion.
   Nothing is removed.
   ============================================================ */
@media (max-width:640px){
  .pr-plans{padding:60px 0 56px}
  .pr-plans-head{margin-bottom:26px}
  .pr-statement{font-size:clamp(27px,7.4vw,32px);max-width:none;letter-spacing:-0.04em}
  .pr-plans-head .lede{font-size:16.5px;max-width:none}
  /* the included lists fold behind their heading (site.js module 5): Website open, SEO closed */

  .pr-terms{padding:64px 0}
  .pr-terms-head{margin-bottom:26px}
  .pr-terms-head h2{font-size:clamp(27px,7.4vw,30px);max-width:none}
  .pr-terms-head .lede{font-size:16.5px;max-width:none}
  .pr-ledger-row{padding:16px 0;gap:8px}
  .pr-ledger-row [role="rowheader"]{font-size:15.5px}
  .pr-ledger-row [role="cell"]{font-size:14.5px}
  .pr-ledger-row [role="cell"] b{font-size:15.5px}
  .pr-ledger-row [role="cell"] em{font-size:13.5px}
  .pr-terms-foot{margin-top:28px;gap:20px}
  .pr-today{font-size:18px}
  .pr-terms-note{font-size:13.5px;max-width:none}

  .pr-which{padding:60px 0}
  .pr-which-grid{gap:30px}
  .pr-which-copy h2{font-size:clamp(27px,7.4vw,30px);max-width:none}
  .pr-which-copy > p:not(.eyebrow):not(.pr-which-more){font-size:16px;margin-top:14px;max-width:none}
  .pr-which-pair{gap:28px}
  .pr-which-col .pr-hair li{font-size:15.5px;padding:12px 0}

  .pr-side{padding:60px 0}
  .pr-side-grid{gap:30px}
  .pr-side-copy h2{font-size:clamp(27px,7.4vw,30px);max-width:none}
  .pr-side-copy > p:not(.eyebrow){font-size:16px;margin-top:14px;max-width:none}
  /* each row: the label across the top, then the two plans side by side */
  .pr-cmp-th{display:none}
  .pr-cmp-row{grid-template-columns:1fr 1fr;gap:8px 18px;padding:14px 0}
  .pr-cmp-row [role="rowheader"]{grid-column:1/-1;font-size:15.5px}
  .pr-cmp-row [role="cell"]{font-size:14.5px;padding-left:12px;position:relative}
  .pr-cmp-row [role="cell"]::before{content:"Website";display:block;font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
  .pr-cmp-row [role="cell"]:last-child::before{content:"Website + SEO";color:var(--orange-dk)}
  .pr-cmp-row [role="cell"]::after{content:"";position:absolute;left:0;top:3px;bottom:3px;width:2px;background:var(--line);border-radius:2px}
  .pr-cmp-row [role="cell"] em{font-size:13.5px}
  /* Three plans under each row label. The per-cell name is named by position
     for the same reason as the terms ledger: with the header row hidden, an
     unlabelled middle column silently attributes standalone SEO's answers to
     the Managed Website. */
  .pr-cmp-3 .pr-cmp-row{grid-template-columns:repeat(3,1fr);gap:8px 14px}
  .pr-cmp-3 .pr-cmp-row [role="cell"]{font-size:14px;padding-left:10px}
  .pr-cmp-3 .pr-cmp-row [role="cell"]:nth-child(2)::before{content:"Managed Website"}
  .pr-cmp-3 .pr-cmp-row [role="cell"]:nth-child(3)::before{content:"SEO";color:var(--ink)}
  .pr-cmp-3 .pr-cmp-row [role="cell"]:nth-child(4)::before{content:"Website + SEO";color:var(--orange-dk)}
  .pr-side-note{margin-top:20px;font-size:15px;max-width:none}

  .pr-faq{padding:60px 0}
  .pr-faq-grid{gap:20px}
  .pr-faq-head h2{font-size:clamp(27px,7.4vw,30px);max-width:none}
  .pr-faq-head .lede{font-size:16px;margin-top:12px;max-width:none}
  .pr-faq-more{margin-top:14px}
  details.q summary{font-size:17px;padding:18px 40px 18px 0}
  details.q summary::after{top:25px}

  .pr-final{padding:72px 0}
  .pr-final h2{font-size:clamp(28px,8vw,34px);max-width:none}
  .pr-final p{font-size:17px}
  .pr-final .btns .btn{width:100%}
}
@media (max-width:360px){
  .pr-statement{font-size:24px}
}

/* ============================================================
   Phone rebuild - 5 September 2026, measured not guessed
   ------------------------------------------------------------
   Before: 9,921px over seven sections at 390px, the plans section
   1,739px on its own, the H1 at 32.8px because the hero rule above
   overrode the global phone scale, and the SEO plan's contents
   folded away while the Website plan's stayed open.

   What changed, in shape rather than in copy:
     - the H1 takes the site's phone scale (three lines, balanced)
     - both plans are readable IN FULL, one complete plan after the
       other, so the phone reader never compares half-width columns
     - the terms ledger tightens and gains a visible break before
       "after month 18", so ownership arrives as its own moment
     - the side-by-side ledger drops nineteen repeated column labels
       for one sticky header, which is what a phone table wants
     - the decision aid and the questions lose desktop padding only
   Nothing is removed from the document.
   ============================================================ */
@media (max-width:640px){

  /* ---- type ----
     The hero's H1 is no longer set here: the standard hero owns its own
     phone scale, and a page rule at this specificity would beat it. */
  .pr-statement,
  .pr-terms-head h2,.pr-which-copy h2,.pr-side-copy h2,.pr-faq-head h2{font-size:clamp(23px,6.2vw,27px);line-height:1.15;letter-spacing:-0.032em;max-width:none}
  .pr-after-head h2{font-size:clamp(23px,6.2vw,27px);line-height:1.15;letter-spacing:-0.032em;max-width:none}

  /* ---- after you sign up: four steps, one under the other ---- */
  .pr-after-steps{grid-template-columns:1fr;gap:0}
  .pr-after-steps li{margin-top:22px;padding-top:16px}
  .pr-after-steps li:first-child{margin-top:0}
  .pr-after-head{margin-bottom:26px}
  .pr-after-foot{margin-top:30px;font-size:15px}

  /* ---- hero: the two panels, composed for the screen ----
     The phone ORDER - statement, sentence, panels, buttons, facts - is the
     standard hero's own and lives in primestart.css, along with the padding
     and the type scale. This page once repeated all of it here, which is how
     a shared component quietly stops being shared; what is left below is
     only the panels' own sizes. */
  .prx{max-width:none;margin-left:0}
  .prx-card{padding:20px 18px}
  .prx-card-g{padding:20px 18px 16px}
  .prx-k{margin-bottom:10px;font-size:11.5px}
  .prx-fig b{font-size:clamp(32px,9vw,40px)}
  .prx-fig span{font-size:14px}
  .prx-note{margin-top:10px;font-size:14.5px;line-height:1.45}
  .prx-join{padding:12px 0}
  .prx-join::before{left:16px;right:16px}
  /* the two halves of an inset row cannot share a line at any phone width -
     even at 430 there are only about 320px for them - so the note drops
     under the name and returns to the left margin rather than being
     squeezed into a two-word column on the right */
  .prx-holds{margin-top:14px;gap:7px}
  .prx-holds li{padding:10px 13px;flex-direction:column;align-items:flex-start;gap:2px}
  .prx-holds b{font-size:14px}
  .prx-holds span{font-size:12.5px;text-align:left}

  /* ---- 1. the two plans: each one complete, in full, in turn ---- */
  .pr-plans{padding:30px 0}
  .pr-plans-head{margin-bottom:16px}
  .pr-plans-head .lede{font-size:15.5px;line-height:1.38}

  /* ---- 2. the terms, with ownership set apart ---- */
  .pr-terms{padding:30px 0}
  .pr-terms-head{margin-bottom:16px}
  .pr-terms-head .lede{font-size:15.5px;line-height:1.42}
  .pr-ledger-row{padding:8px 0;gap:5px}
  .pr-ledger-row [role="rowheader"]{font-size:15.5px;line-height:1.25}
  /* the plan's name and its value share a line whenever both fit */
  .pr-ledger-row [role="cell"]{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;font-size:14.5px;line-height:1.4;padding-left:14px}
  .pr-ledger-row [role="cell"]::before{flex:0 0 auto;font-size:11px;margin-bottom:0}
  .pr-ledger-row [role="cell"] em{flex:1 0 100%}
  .pr-ledger-row [role="cell"] b{font-size:15.5px;line-height:1.25}
  .pr-ledger-row [role="cell"] em{margin-top:2px;font-size:14.5px;line-height:1.35}
  /* the page must not run straight into what happens at the end of the
     term: ownership gets air above it and a rule of its own */
  .pr-ledger-row.is-key{margin-top:18px;padding-top:17px;border-top:2px solid var(--amber)}
  .pr-terms-foot{margin-top:16px;gap:10px}
  .pr-today{font-size:16.5px;line-height:1.22}
  .pr-today b{margin-bottom:2px}
  .pr-terms-note{font-size:14.5px;line-height:1.42}

  /* ---- 3. which one: two decision lists, no desktop alignment ---- */
  .pr-which{padding:30px 0}
  .pr-which-grid{gap:18px}
  .pr-which-copy > p:not(.eyebrow):not(.pr-which-more){margin-top:9px;font-size:15.5px;line-height:1.45}
  .pr-which-more{margin-top:10px}
  .pr-which-pair{gap:16px}
  .pr-which-k{display:block;min-height:0;margin-bottom:3px;font-size:12px}
  .pr-which-col .pr-hair li{padding:6px 0;font-size:15px;line-height:1.32}

  /* ---- 4. side by side: one header that follows the reader ---- */
  .pr-side{padding:30px 0}
  .pr-side-grid{gap:18px}
  .pr-side-copy > p:not(.eyebrow){margin-top:9px;font-size:15.5px;line-height:1.45}
  .pr-cmp-th{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;padding:9px 0 8px;position:sticky;top:74px;z-index:2;background:var(--white);border-bottom:1px solid var(--ink)}
  .pr-cmp-th span:first-child{display:none}
  .pr-cmp-th span{font-size:11px;letter-spacing:.1em}
  /* At this width the per-cell labels give way to one sticky header that
     follows the reader. Three columns, and the per-cell names are dropped
     below along with the two-plan ones. */
  .pr-cmp-3 .pr-cmp-th{grid-template-columns:repeat(3,1fr);gap:0 14px}
  .pr-cmp-3 .pr-cmp-th span{font-size:10px;letter-spacing:.06em}
  .pr-cmp-3 .pr-cmp-row [role="cell"]::before{display:none}
  .pr-cmp-row{gap:4px 18px;padding:6px 0}
  .pr-cmp-row [role="rowheader"]{font-size:15.5px;line-height:1.22}
  .pr-cmp-row [role="cell"]{font-size:14.5px;line-height:1.32;padding-left:10px}
  .pr-cmp-row [role="cell"]::before{display:none}
  .pr-cmp-row [role="cell"] b{line-height:1.25}
  .pr-cmp-row [role="cell"] em{margin-top:2px;font-size:14.5px;line-height:1.32}
  .pr-side-note{margin-top:14px;font-size:14.5px;line-height:1.45}

  /* ---- 5. questions ---- */
  .pr-faq{padding:30px 0}
  .pr-faq-grid{gap:14px}
  .pr-faq-head .lede{margin-top:8px;font-size:15.5px;line-height:1.42}
  .pr-faq-more{margin-top:8px}
  details.q summary{font-size:15px;padding:10px 34px 10px 0;line-height:1.26}
  details.q summary::after{top:17px;width:10px;height:10px}
  .pr-faq .faq-list p,.pr-faq .faq-list li{font-size:15px;line-height:1.5}

  /* ---- 6. final ---- */
  .pr-final{padding:36px 0}
  .pr-final h2{font-size:clamp(25px,7vw,30px);line-height:1.12}
  .pr-final p{margin-bottom:18px;font-size:16px;line-height:1.42}
  .pr-which-more .link-u,.pr-faq-more .link-u,.pr-final-alt a{display:inline-block;padding:10px 0;min-height:44px;line-height:24px}
}

/* the narrowest phones: the display figures step down, nothing else moves */
@media (max-width:374px){
  .pr-statement{font-size:24px}
  .pr-cmp-th{gap:0 12px}
  .pr-cmp-row{gap:4px 12px}
}

/* ============================================================
   1. The two plans as two decision panels. REBUILT 9 September 2026 under
   the MASTER SPECIFICATION (screenshot 07, RED). Eighteen bullets across
   two columns became four per plan, a "who it is for" line, the price, the
   term and one button; the full lists live in the side-by-side table in
   section 4. The fuller plan stands on ink, as the two-products component
   does elsewhere, so the site says "this one holds the other" the same way
   everywhere it says it.
   ============================================================ */
.pr-decide{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}
.pr-plan{
  position:relative;display:flex;flex-direction:column;padding:34px 34px 32px;border-radius:18px;
  background:var(--white);border:1px solid var(--line);box-shadow:0 24px 50px -38px rgba(18,33,47,.35);
}
.pr-plan-who{margin:0 0 14px;font-size:14.5px;line-height:1.45;color:var(--muted);max-width:30ch}
.pr-plan-name{margin:0;font-size:26px;letter-spacing:-0.03em}
.pr-plan-price{display:flex;align-items:baseline;gap:10px;margin:10px 0 0;flex-wrap:wrap}
.pr-plan-price b{font-family:var(--fh);font-size:clamp(44px,4.4vw,58px);font-weight:800;letter-spacing:-0.055em;line-height:.95;color:var(--ink);font-variant-numeric:tabular-nums}
.pr-plan-price span{font-size:15px;color:var(--muted)}
.pr-plan-key{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--line)}
.pr-plan-key li{position:relative;padding:11px 0 11px 26px;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.pr-plan-key li::before{content:"";position:absolute;left:2px;top:19px;width:8px;height:8px;border-radius:50%;background:var(--orange)}
.pr-plan-term{margin:auto 0 0;padding-top:22px;font-size:14px;line-height:1.5;color:var(--muted)}
.pr-plan .btn{align-self:flex-start;margin-top:16px}
.pr-plan-flag{
  position:absolute;right:26px;top:26px;margin:0;padding:6px 11px;border-radius:100px;
  background:rgba(240,160,60,.16);border:1px solid rgba(240,160,60,.45);
  font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);
}
.pr-plan--full{background:var(--ink);border-color:var(--ink);color:var(--on-dark-2)}
.pr-plan--full .pr-plan-who{color:var(--on-dark-muted);padding-right:120px}
.pr-plan--full .pr-plan-name,.pr-plan--full .pr-plan-price b{color:#fff}
.pr-plan--full .pr-plan-price span,.pr-plan--full .pr-plan-term{color:var(--on-dark-muted)}
.pr-plan--full .pr-plan-key{border-top-color:rgba(255,255,255,.14)}
.pr-plan--full .pr-plan-key li{border-bottom-color:rgba(255,255,255,.12);color:var(--on-dark-2)}
.pr-plan--full .pr-plan-key li::before{background:var(--amber)}
.pr-plans-foot{margin:28px 0 0;max-width:72ch;font-size:15.5px;line-height:1.6;color:var(--muted)}
.pr-plans-foot .link-u{margin-left:2px}
@media (max-width:1040px){.pr-decide{gap:22px}}
@media (max-width:820px){.pr-decide{grid-template-columns:1fr}}
@media (max-width:640px){
  .pr-plan{padding:26px 22px 24px}
  .pr-plan .btn{width:100%}
  .pr-plan-flag{position:static;display:inline-block;margin-bottom:12px}
  .pr-plan--full .pr-plan-who{padding-right:0}
  .pr-plan-price b{font-size:44px}
}