pricing-renderer 0.1.0 → 0.2.0

package/dist/styles/base.css

@@ -5,10 +5,24 @@
     min-inline-size: 0;
     color: var(--pr-color-text);
     font: inherit;
-    line-height: 1.5;
+    /* unset, the token is invalid at computed-value time and the
+       inherited property inherits, like font: inherit */
+    font-family: var(--pr-font-family);
+    line-height: var(--pr-line-height, 1.5);
     text-rendering: optimizeLegibility;
   }
 
+  /* opt-in compact spacing; comfortable adds no rule */
+  pricing-renderer[density='compact'] {
+    --pr-space-1: 0.2rem;
+    --pr-space-2: 0.4rem;
+    --pr-space-3: 0.55rem;
+    --pr-space-4: 0.75rem;
+    --pr-space-5: 1.1rem;
+    --pr-space-section: clamp(2rem, 5cqi, 4rem);
+    --pr-shell-padding: clamp(0.75rem, 3cqi, 2rem);
+  }
+
   pricing-renderer[data-pr-root],
   pricing-renderer[data-pr-root] *,
   pricing-renderer[data-pr-root] *::before,
@@ -26,6 +40,39 @@
     outline-offset: 3px;
   }
 
+  /* rows and cards take focus after "show more" */
+  pricing-renderer[data-pr-root]
+    :where([data-pr-part='comparison-row'], [data-pr-part='add-on-card']):focus-visible {
+    outline: 2px solid var(--pr-color-focus);
+    outline-offset: 3px;
+  }
+
+  /* A focused table row sits inside the scroll container and under the opaque sticky first cell,
+     so the ring is drawn inside the row and again as an inset shadow on its cells. */
+  pricing-renderer[data-pr-root] tr[data-pr-part='comparison-row']:focus-visible {
+    outline-offset: -2px;
+  }
+
+  pricing-renderer[data-pr-root] tr[data-pr-part='comparison-row']:focus-visible > :where(th, td) {
+    box-shadow:
+      inset 0 2px 0 var(--pr-color-focus),
+      inset 0 -2px 0 var(--pr-color-focus);
+  }
+
+  pricing-renderer[data-pr-root] tr[data-pr-part='comparison-row']:focus-visible > :first-child {
+    box-shadow:
+      inset 0 2px 0 var(--pr-color-focus),
+      inset 0 -2px 0 var(--pr-color-focus),
+      inset 2px 0 0 var(--pr-color-focus);
+  }
+
+  pricing-renderer[data-pr-root] tr[data-pr-part='comparison-row']:focus-visible > :last-child {
+    box-shadow:
+      inset 0 2px 0 var(--pr-color-focus),
+      inset 0 -2px 0 var(--pr-color-focus),
+      inset -2px 0 0 var(--pr-color-focus);
+  }
+
   pricing-renderer[data-pr-root] :where(a) {
     color: var(--pr-color-link);
     text-underline-offset: 0.18em;
@@ -48,44 +95,56 @@
     isolation: isolate;
     inline-size: 100%;
     min-inline-size: 0;
-    overflow-wrap: anywhere;
+    /* Break a word only when it does not fit on a line of its own: short words are never split,
+       and the min-content width of a text keeps its longest word. */
+    overflow-wrap: break-word;
   }
 
   pricing-renderer[data-pr-root] .pr-content {
     display: grid;
+    grid-template-columns: minmax(0, 1fr);
     gap: var(--pr-space-section);
     padding: var(--pr-shell-padding);
   }
 
+  /* The hero and its items never get wider than the content box: a title with a word longer than
+     the line still wraps (break-word) instead of widening the hero past the renderer. */
   pricing-renderer[data-pr-root] .pr-hero {
     display: grid;
+    grid-template-columns: minmax(0, 1fr);
     justify-items: center;
-    max-inline-size: 760px;
+    min-inline-size: 0;
+    max-inline-size: min(760px, 100%);
     margin-inline: auto;
     text-align: center;
   }
 
+  pricing-renderer[data-pr-root] .pr-hero > * {
+    max-inline-size: 100%;
+  }
+
   pricing-renderer[data-pr-root] .pr-hero__eyebrow,
   pricing-renderer[data-pr-root] .pr-section__eyebrow {
     margin: 0 0 var(--pr-space-2);
     color: var(--pr-color-accent);
     font-size: var(--pr-font-size-sm);
-    font-weight: 750;
+    font-weight: var(--pr-font-weight-bold, 750);
     letter-spacing: 0.09em;
     text-transform: uppercase;
   }
 
   pricing-renderer[data-pr-root] .pr-hero__title {
     margin: 0;
+    font-family: var(--pr-font-family-display, var(--pr-font-family));
     font-size: clamp(2rem, 8cqi, 4rem);
-    font-weight: 780;
+    font-weight: var(--pr-font-weight-bold, 780);
     letter-spacing: -0.045em;
     line-height: 1.02;
     text-wrap: balance;
   }
 
   pricing-renderer[data-pr-root] .pr-hero__subtitle {
-    max-inline-size: 62ch;
+    max-inline-size: min(62ch, 100%);
     margin: var(--pr-space-4) 0 0;
     color: var(--pr-color-muted);
     font-size: var(--pr-font-size-lg);
@@ -106,6 +165,11 @@
   pricing-renderer[data-pr-root] .pr-badge {
     display: inline-flex;
     align-items: center;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    /* The text is an anonymous flex item whose min-content width stays that of the longest word
+       with break-word; anywhere lets it shrink, and still breaks only a word that does not fit. */
+    overflow-wrap: anywhere;
     min-block-size: 28px;
     padding: 0.2rem 0.65rem;
     border: 1px solid var(--pr-color-border);
@@ -113,7 +177,7 @@
     background: var(--pr-color-surface-raised);
     color: var(--pr-color-muted);
     font-size: var(--pr-font-size-xs);
-    font-weight: 700;
+    font-weight: var(--pr-font-weight-bold, 700);
   }
 
   pricing-renderer[data-pr-root] .pr-badge[data-tone='accent'] {
@@ -134,6 +198,17 @@
     color: var(--pr-color-warning);
   }
 
+  /* The current plan and the current add-ons get a success-toned border and badge. The badge also
+     names the state in text, so colour is not the only cue. */
+  pricing-renderer[data-pr-root] .pr-plan-card[data-current='true'],
+  pricing-renderer[data-pr-root] .pr-addon-card[data-current='true'] {
+    border-color: color-mix(in srgb, var(--pr-color-success) 55%, var(--pr-color-border));
+  }
+
+  pricing-renderer[data-pr-root] .pr-addon-card__heading [data-pr-part='current-add-on-badge'] {
+    margin-block-end: var(--pr-space-2);
+  }
+
   pricing-renderer[data-pr-root] .pr-section,
   pricing-renderer[data-pr-root] .pr-configurator,
   pricing-renderer[data-pr-root] .pr-metadata {
@@ -150,7 +225,9 @@
 
   pricing-renderer[data-pr-root] :where(.pr-section__heading, .pr-configurator, .pr-metadata) h3 {
     margin: 0;
+    font-family: var(--pr-font-family-display, var(--pr-font-family));
     font-size: var(--pr-font-size-2xl);
+    font-weight: var(--pr-font-weight-bold, 700);
     letter-spacing: -0.025em;
   }
 
@@ -166,7 +243,7 @@
     margin: 0 auto var(--pr-space-2);
     color: var(--pr-color-muted);
     font-size: var(--pr-font-size-sm);
-    font-weight: 700;
+    font-weight: var(--pr-font-weight-bold, 700);
     text-align: center;
   }
 
@@ -207,10 +284,17 @@
   pricing-renderer[data-pr-root] .pr-segmented__option small {
     color: var(--pr-color-success);
     font-size: var(--pr-font-size-xs);
-    font-weight: 750;
+    font-weight: var(--pr-font-weight-bold, 750);
+  }
+
+  /* the plan grid takes the token; the add-on and variable grids
+     keep their own columns */
+  pricing-renderer[data-pr-root] .pr-plan-grid {
+    display: grid;
+    grid-template-columns: var(--pr-plan-columns, minmax(0, 1fr));
+    gap: var(--pr-space-4);
   }
 
-  pricing-renderer[data-pr-root] .pr-plan-grid,
   pricing-renderer[data-pr-root] .pr-addon-grid,
   pricing-renderer[data-pr-root] .pr-variable-grid {
     display: grid;
@@ -283,6 +367,8 @@
     display: flex;
     flex-wrap: wrap;
     gap: var(--pr-space-2);
+    min-inline-size: 0;
+    max-inline-size: 100%;
   }
 
   pricing-renderer[data-pr-root] .pr-selection-control {
@@ -299,7 +385,7 @@
     background: var(--pr-color-surface-raised);
     color: var(--pr-color-muted);
     font-size: var(--pr-font-size-sm);
-    font-weight: 750;
+    font-weight: var(--pr-font-weight-bold, 750);
     line-height: 1;
     cursor: pointer;
     transition:
@@ -336,7 +422,7 @@
   pricing-renderer[data-pr-root] .pr-selection-control__icon::after {
     color: var(--pr-color-on-accent);
     font-size: 0.75rem;
-    font-weight: 900;
+    font-weight: var(--pr-font-weight-heavy, 900);
     line-height: 1;
     content: '✓';
     opacity: 0;
@@ -383,12 +469,35 @@
     letter-spacing: -0.02em;
   }
 
+  /* the plan name only */
+  pricing-renderer[data-pr-root] .pr-plan-card__top h4 {
+    font-family: var(--pr-font-family-display, var(--pr-font-family));
+    font-weight: var(--pr-font-weight-bold, 700);
+  }
+
+  /* the add-on name: the user-agent bold, now explicit */
+  pricing-renderer[data-pr-root] .pr-addon-card h4 {
+    font-weight: var(--pr-font-weight-bold, 700);
+  }
+
   pricing-renderer[data-pr-root] .pr-plan-card__top p,
   pricing-renderer[data-pr-root] .pr-addon-card p {
     margin: var(--pr-space-2) 0 0;
     color: var(--pr-color-muted);
   }
 
+  /* The action slot of the plan already held: same height and alignment as a button, without
+     pretending to be one. */
+  pricing-renderer[data-pr-root] .pr-plan-card__current {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-block-size: 2.75rem;
+    margin: 0;
+    color: var(--pr-color-muted);
+    font-size: var(--pr-font-size-sm);
+  }
+
   pricing-renderer[data-pr-root] .pr-price {
     display: flex;
     flex-wrap: wrap;
@@ -400,12 +509,17 @@
 
   pricing-renderer[data-pr-root] .pr-price__amount,
   pricing-renderer[data-pr-root] .pr-price__quote {
-    font-size: clamp(2rem, 8cqi, 3rem);
-    font-weight: 790;
-    letter-spacing: -0.05em;
+    font-size: var(--pr-price-size, clamp(2rem, 8cqi, 3rem));
+    font-weight: var(--pr-price-weight, var(--pr-font-weight-bold, 790));
+    letter-spacing: var(--pr-price-tracking, -0.05em);
     line-height: 1;
   }
 
+  /* the amount only, not the quote */
+  pricing-renderer[data-pr-root] .pr-price__amount {
+    font-family: var(--pr-font-family-display, var(--pr-font-family));
+  }
+
   pricing-renderer[data-pr-root] .pr-price__quote {
     font-size: var(--pr-font-size-2xl);
     letter-spacing: -0.02em;
@@ -418,6 +532,7 @@
 
   pricing-renderer[data-pr-root] .pr-highlight-list {
     display: grid;
+    grid-template-columns: minmax(0, 1fr);
     gap: var(--pr-space-3);
     padding: 0;
     margin: 0 0 var(--pr-space-5);
@@ -429,22 +544,32 @@
     margin: 0 0 var(--pr-space-3);
     color: var(--pr-color-text);
     font-size: var(--pr-font-size-sm);
-    font-weight: 750;
+    font-weight: var(--pr-font-weight-bold, 750);
   }
 
+  /* Name and value share a line when both fit; otherwise the value moves to the next line. The
+     name never gets narrower than its longest word (or the whole row), so short words are not
+     split, and a string longer than the row still wraps. */
   pricing-renderer[data-pr-root] .pr-highlight-list li {
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr) auto;
+    display: flex;
+    flex-wrap: wrap;
     align-items: start;
-    gap: var(--pr-space-2);
+    gap: var(--pr-space-1) var(--pr-space-2);
+  }
+
+  pricing-renderer[data-pr-root] .pr-highlight-list li > :not([class]) {
+    flex: 1 1 0;
+    max-inline-size: 100%;
   }
 
   pricing-renderer[data-pr-root] .pr-highlight-list__icon {
     color: var(--pr-color-success);
-    font-weight: 800;
+    font-weight: var(--pr-font-weight-heavy, 800);
   }
 
   pricing-renderer[data-pr-root] .pr-highlight-list__value {
+    min-inline-size: 0;
+    margin-inline-start: auto;
     color: var(--pr-color-muted);
     font-size: var(--pr-font-size-sm);
   }
@@ -457,7 +582,7 @@
     padding: 0.65rem 1rem;
     border: 1px solid transparent;
     border-radius: var(--pr-radius-md);
-    font-weight: 750;
+    font-weight: var(--pr-font-weight-bold, 750);
     line-height: 1.2;
     text-align: center;
     text-decoration: none;
@@ -487,6 +612,50 @@
     padding-inline: 0.8rem;
   }
 
+  /* The current plan's CTA and a summary action without a
+     change are disabled controls, so they read as inactive in the light and dark themes. */
+  pricing-renderer[data-pr-root] .pr-button:disabled {
+    border-color: var(--pr-color-border);
+    background: var(--pr-color-surface-subtle);
+    color: var(--pr-color-muted);
+    cursor: default;
+  }
+
+  /* A pending host action keeps every CTA in place (aria-disabled,
+     not disabled, so focus stays) and marks the busy control with a spinner. */
+  pricing-renderer[data-pr-root] .pr-button[aria-disabled='true'] {
+    cursor: progress;
+  }
+
+  pricing-renderer[data-pr-root] .pr-button[data-pending='true'] {
+    gap: var(--pr-space-2);
+  }
+
+  pricing-renderer[data-pr-root] [data-pr-part='cta-pending']::before {
+    content: '';
+    display: inline-block;
+    box-sizing: border-box;
+    inline-size: 1em;
+    block-size: 1em;
+    margin-inline-end: var(--pr-space-2);
+    vertical-align: -0.125em;
+    border: 2px solid currentcolor;
+    border-inline-end-color: transparent;
+    border-radius: 50%;
+    animation: pr-spin 0.8s linear infinite;
+  }
+
+  @keyframes pr-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  /* The summary action takes its own row under the total. */
+  pricing-renderer[data-pr-root] .pr-summary > [data-pr-part='summary-action'] {
+    inline-size: 100%;
+  }
+
   pricing-renderer[data-pr-root] .pr-configurator,
   pricing-renderer[data-pr-root] .pr-metadata {
     padding: var(--pr-space-5);
@@ -494,6 +663,7 @@
 
   pricing-renderer[data-pr-root] .pr-field {
     display: grid;
+    grid-template-columns: minmax(0, 1fr);
     align-content: start;
     gap: var(--pr-space-2);
   }
@@ -501,7 +671,7 @@
   pricing-renderer[data-pr-root] .pr-field > label,
   pricing-renderer[data-pr-root] .pr-stepper > span {
     font-size: var(--pr-font-size-sm);
-    font-weight: 750;
+    font-weight: var(--pr-font-weight-bold, 750);
   }
 
   pricing-renderer[data-pr-root] .pr-field p {
@@ -516,7 +686,7 @@
 
   pricing-renderer[data-pr-root] .pr-field .pr-field__error {
     color: var(--pr-color-warning);
-    font-weight: 650;
+    font-weight: var(--pr-font-weight-medium, 650);
   }
 
   pricing-renderer[data-pr-root]
@@ -589,7 +759,8 @@
   pricing-renderer[data-pr-root] .pr-comparison-toolbar {
     position: sticky;
     z-index: 3;
-    inset-block-start: 0;
+    /* measured against the page */
+    inset-block-start: var(--pr-sticky-top, 0px);
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -631,12 +802,13 @@
     padding: 0.5rem 0.7rem;
     border: 0;
     background: transparent;
-    font-weight: 750;
+    font-weight: var(--pr-font-weight-bold, 750);
     cursor: pointer;
   }
 
   pricing-renderer[data-pr-root] .pr-compact-comparison {
     display: grid;
+    grid-template-columns: minmax(0, 1fr);
     gap: var(--pr-space-3);
   }
 
@@ -658,6 +830,7 @@
 
   pricing-renderer[data-pr-root] .pr-feature-card {
     display: grid;
+    grid-template-columns: minmax(0, 1fr);
     gap: var(--pr-space-4);
     padding: var(--pr-space-4);
     margin-block-end: var(--pr-space-3);
@@ -675,14 +848,17 @@
 
   pricing-renderer[data-pr-root] .pr-feature-card dl {
     display: grid;
+    grid-template-columns: minmax(0, 1fr);
     gap: var(--pr-space-2);
     margin: 0;
   }
 
+  /* Plan name and value share a line when both fit, else the value moves to the next line: the
+     name keeps its longest word (at most the whole row) and is never split inside a short word. */
   pricing-renderer[data-pr-root] .pr-feature-card dl div {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) auto;
-    gap: var(--pr-space-3);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--pr-space-1) var(--pr-space-3);
     padding-block: var(--pr-space-2);
     border-block-start: 1px solid var(--pr-color-border);
   }
@@ -691,12 +867,34 @@
     margin: 0;
   }
 
+  pricing-renderer[data-pr-root] .pr-feature-card dd {
+    min-inline-size: 0;
+    margin-inline-start: auto;
+  }
+
   pricing-renderer[data-pr-root] .pr-feature-card dt {
+    flex: 1 1 0;
+    max-inline-size: 100%;
     color: var(--pr-color-muted);
   }
 
+  /* The height limit makes the box scroll vertically, so the
+     sticky header cells pin to it. 80vh is the fallback for browsers without dvh. */
+  pricing-renderer[data-pr-root] .pr-flow {
+    display: flex;
+    flex-direction: column;
+    gap: var(--pr-space-section);
+    min-inline-size: 0;
+  }
+
+  /* An empty flow (no summary, comparison or add-ons) takes no space and no gap. */
+  pricing-renderer[data-pr-root] .pr-flow:empty {
+    display: none;
+  }
+
   pricing-renderer[data-pr-root] .pr-table-scroll {
     max-inline-size: 100%;
+    max-block-size: 80vh;
     overflow: auto;
     border: 1px solid var(--pr-color-border);
     border-radius: var(--pr-radius-lg);
@@ -704,9 +902,17 @@
     overscroll-behavior-inline: contain;
   }
 
+  /* a var() declaration is valid when parsed, so it sits behind a
+     dvh guard, after the 80vh rule it replaces where dvh is supported. */
+  @supports (max-block-size: 1dvh) {
+    pricing-renderer[data-pr-root] .pr-table-scroll {
+      max-block-size: var(--pr-table-max-height, 80dvh);
+    }
+  }
+
   pricing-renderer[data-pr-root] .pr-comparison-table {
     width: 100%;
-    min-width: 720px;
+    min-width: var(--pr-table-min-width, 720px);
     border-collapse: separate;
     border-spacing: 0;
   }
@@ -744,7 +950,7 @@
     display: block;
     margin-block-start: var(--pr-space-1);
     color: var(--pr-color-muted);
-    font-weight: 400;
+    font-weight: var(--pr-font-weight-regular, 400);
   }
 
   pricing-renderer[data-pr-root] .pr-row-metadata {
@@ -752,7 +958,7 @@
     margin-block-start: var(--pr-space-1);
     color: var(--pr-color-muted);
     font-size: var(--pr-font-size-xs);
-    font-weight: 500;
+    font-weight: var(--pr-font-weight-medium, 500);
   }
 
   pricing-renderer[data-pr-root] .pr-category-row th {
@@ -769,19 +975,33 @@
 
   pricing-renderer[data-pr-root] .pr-value--included {
     color: var(--pr-color-success);
-    font-weight: 800;
+    font-weight: var(--pr-font-weight-heavy, 800);
   }
 
   pricing-renderer[data-pr-root] .pr-value--excluded {
     color: var(--pr-color-muted);
   }
 
+  pricing-renderer[data-pr-root] .pr-value--addon {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.1rem 0.5rem;
+    border: 1px solid color-mix(in srgb, var(--pr-color-accent) 45%, var(--pr-color-border));
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--pr-color-accent) 11%, var(--pr-color-surface-raised));
+    color: var(--pr-color-link);
+    font-size: var(--pr-font-size-xs);
+    font-weight: var(--pr-font-weight-bold, 700);
+    white-space: nowrap;
+  }
+
   pricing-renderer[data-pr-root] .pr-value--code {
     white-space: pre-wrap;
   }
 
   pricing-renderer[data-pr-root] .pr-addon-layout {
     display: grid;
+    grid-template-columns: minmax(0, 1fr);
     gap: var(--pr-space-5);
   }
 
@@ -830,6 +1050,7 @@
 
   pricing-renderer[data-pr-root] .pr-addon-card__details {
     display: grid;
+    grid-template-columns: minmax(0, 1fr);
     gap: var(--pr-space-1);
     font-size: var(--pr-font-size-sm);
   }
@@ -841,27 +1062,37 @@
 
   pricing-renderer[data-pr-root] .pr-addon-effects summary {
     font-size: var(--pr-font-size-sm);
-    font-weight: 750;
+    font-weight: var(--pr-font-weight-bold, 750);
     cursor: pointer;
   }
 
   pricing-renderer[data-pr-root] .pr-addon-effects dl {
     display: grid;
+    grid-template-columns: minmax(0, 1fr);
     gap: var(--pr-space-2);
     margin: var(--pr-space-3) 0 0;
   }
 
   pricing-renderer[data-pr-root] .pr-addon-effects dl div {
     display: flex;
+    flex-wrap: wrap;
     justify-content: space-between;
     gap: var(--pr-space-3);
   }
 
   pricing-renderer[data-pr-root] .pr-addon-effects :where(dt, dd) {
+    min-inline-size: 0;
     margin: 0;
     font-size: var(--pr-font-size-sm);
   }
 
+  /* Flex items holding names or values may shrink below a long unbroken string, which wraps. */
+  pricing-renderer[data-pr-root] .pr-price > *,
+  pricing-renderer[data-pr-root] .pr-breakdown__line > *,
+  pricing-renderer[data-pr-root] .pr-breakdown__totals :where(dt, dd) {
+    min-inline-size: 0;
+  }
+
   pricing-renderer[data-pr-root] .pr-stepper {
     display: flex;
     flex-wrap: wrap;
@@ -897,30 +1128,162 @@
     z-index: 4;
     inset-block-end: max(0px, env(safe-area-inset-bottom));
     display: grid;
-    grid-template-columns: minmax(0, 1fr) auto;
-    align-items: center;
+    grid-template-columns: minmax(0, 1fr);
     gap: var(--pr-space-2) var(--pr-space-4);
     padding: var(--pr-space-4);
+    /* room for the breakdown toggle, which is
+       positioned and so never changes the block size */
+    padding-inline-end: calc(var(--pr-space-4) + 24px + var(--pr-space-2));
     background: color-mix(in srgb, var(--pr-color-surface) 95%, transparent);
     backdrop-filter: blur(16px);
   }
 
+  pricing-renderer[data-pr-root] .pr-summary__live {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+    gap: var(--pr-space-2) var(--pr-space-4);
+  }
+
   pricing-renderer[data-pr-root] .pr-summary :where(p, strong, span) {
     margin: 0;
   }
 
-  pricing-renderer[data-pr-root] .pr-summary strong {
+  pricing-renderer[data-pr-root] .pr-summary__live strong {
     font-size: var(--pr-font-size-xl);
   }
 
-  pricing-renderer[data-pr-root] .pr-summary span {
+  pricing-renderer[data-pr-root] .pr-summary__live > span {
     grid-column: 1 / -1;
     color: var(--pr-color-warning);
     font-size: var(--pr-font-size-sm);
   }
 
+  /* 24px visual box; the ::after layer extends the
+     pointer target to 44px without layout effect. An absolute layer is placed against the 22px
+     padding box (24px minus the 1px border on each side), so inset -11px gives 22 + 2 * 11 = 44px
+     centered on the toggle.
+     the icon uses --pr-color-muted, 5.9:1 on the
+     light and 7.5:1 on the dark surface.
+     the only transition is shortened by the
+     prefers-reduced-motion rule below. */
+  pricing-renderer[data-pr-root] .pr-breakdown-toggle {
+    position: absolute;
+    inset-block-start: calc(var(--pr-space-4) + 4px);
+    inset-inline-end: var(--pr-space-4);
+    display: grid;
+    place-items: center;
+    inline-size: 24px;
+    block-size: 24px;
+    padding: 0;
+    border: 1px solid currentcolor;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--pr-color-muted);
+    cursor: pointer;
+    transition: background-color var(--pr-motion-fast);
+  }
+
+  pricing-renderer[data-pr-root] .pr-breakdown-toggle::before {
+    content: 'i';
+    font-size: var(--pr-font-size-sm);
+    font-style: italic;
+    font-weight: var(--pr-font-weight-bold, 700);
+    line-height: 1;
+  }
+
+  pricing-renderer[data-pr-root] .pr-breakdown-toggle::after {
+    position: absolute;
+    inset: -11px;
+    content: '';
+  }
+
+  pricing-renderer[data-pr-root] .pr-breakdown-toggle[aria-expanded='true'] {
+    background: var(--pr-color-surface-subtle);
+    color: var(--pr-color-text);
+  }
+
+  @media (hover: hover) {
+    pricing-renderer[data-pr-root] .pr-breakdown-toggle:hover {
+      background: var(--pr-color-surface-subtle);
+    }
+  }
+
+  pricing-renderer[data-pr-root] .pr-breakdown {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--pr-space-3);
+    padding-block-start: var(--pr-space-3);
+    border-block-start: 1px solid var(--pr-color-border);
+    font-size: var(--pr-font-size-sm);
+  }
+
+  pricing-renderer[data-pr-root] .pr-breakdown__title {
+    font-weight: var(--pr-font-weight-bold, 750);
+  }
+
+  pricing-renderer[data-pr-root] .pr-breakdown__lines {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--pr-space-2);
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  pricing-renderer[data-pr-root] .pr-breakdown__line {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: var(--pr-space-1) var(--pr-space-3);
+  }
+
+  pricing-renderer[data-pr-root] .pr-breakdown__name {
+    font-weight: var(--pr-font-weight-medium, 650);
+  }
+
+  pricing-renderer[data-pr-root] .pr-breakdown__detail {
+    color: var(--pr-color-muted);
+    font-variant-numeric: tabular-nums;
+  }
+
+  pricing-renderer[data-pr-root] .pr-breakdown__totals {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--pr-space-1);
+    padding-block-start: var(--pr-space-3);
+    margin: 0;
+    border-block-start: 1px solid var(--pr-color-border);
+  }
+
+  pricing-renderer[data-pr-root] .pr-breakdown__totals > div {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: var(--pr-space-3);
+  }
+
+  pricing-renderer[data-pr-root] .pr-breakdown__totals dt {
+    color: var(--pr-color-muted);
+  }
+
+  pricing-renderer[data-pr-root] .pr-breakdown__totals dd {
+    margin: 0;
+    font-weight: var(--pr-font-weight-medium, 650);
+  }
+
+  pricing-renderer[data-pr-root] .pr-breakdown__total :where(dt, dd) {
+    color: var(--pr-color-text);
+    font-weight: var(--pr-font-weight-bold, 750);
+  }
+
+  pricing-renderer[data-pr-root] .pr-breakdown__quote {
+    color: var(--pr-color-warning);
+  }
+
   pricing-renderer[data-pr-root] .pr-metadata dl {
     display: grid;
+    grid-template-columns: minmax(0, 1fr);
     gap: var(--pr-space-2);
     margin: var(--pr-space-4) 0 0;
   }
@@ -949,8 +1312,14 @@
     background: var(--pr-color-warning-surface);
   }
 
+  pricing-renderer[data-pr-root] .pr-error .pr-diagnostics {
+    padding: 0;
+    border: 0;
+    background: none;
+  }
+
   pricing-renderer[data-pr-root] .pr-diagnostics summary {
-    font-weight: 750;
+    font-weight: var(--pr-font-weight-bold, 750);
     cursor: pointer;
   }
 
@@ -961,7 +1330,7 @@
 
   pricing-renderer[data-pr-root] .pr-dialog-backdrop {
     position: fixed;
-    z-index: 1000;
+    z-index: var(--pr-z-dialog, 1000);
     inset: 0;
     display: grid;
     place-items: end center;
@@ -981,6 +1350,7 @@
 
   pricing-renderer[data-pr-root] .pr-dialog h3 {
     margin-block-start: 0;
+    font-weight: var(--pr-font-weight-bold, 700);
   }
 
   pricing-renderer[data-pr-root] .pr-dialog__actions {
@@ -1019,8 +1389,7 @@
 
   @container pricing-renderer (min-width: 600px) {
     pricing-renderer[data-pr-root] .pr-plan-grid {
-      grid-template-columns: repeat(2, minmax(0, 320px));
-      justify-content: center;
+      grid-template-columns: var(--pr-plan-columns, repeat(2, minmax(0, 1fr)));
     }
 
     pricing-renderer[data-pr-root] .pr-addon-grid,
@@ -1028,11 +1397,19 @@
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
 
+    /* One or two plans (no third child) keep the centered cards of at most 320px they had before:
+       this selector is more specific than the plan count rules, which use :where(). */
+    pricing-renderer[data-pr-root] .pr-plan-grid:not(:has(> :nth-child(3))) {
+      grid-template-columns: var(--pr-plan-columns, repeat(2, minmax(0, 320px)));
+      justify-content: center;
+    }
+
     pricing-renderer[data-pr-root] .pr-feature-card {
       grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
     }
 
-    pricing-renderer[data-pr-root] .pr-dialog-backdrop {
+    /* :where(*) adds no specificity; it keeps the base rule the only one with this exact selector */
+    pricing-renderer[data-pr-root] .pr-dialog-backdrop:where(*) {
       place-items: center;
       padding: var(--pr-space-5);
     }
@@ -1044,60 +1421,198 @@
     }
   }
 
-  @container pricing-renderer (min-width: 840px) {
-    pricing-renderer[data-pr-root] .pr-plan-grid {
-      grid-template-columns: repeat(auto-fit, minmax(220px, 320px));
+  /* Below 840px the space above the plans gets the same caps it already has from 840px (UX-3), so
+     the first plan price fits in the first screen of a phone. Smaller host tokens still win
+     through min(); the space after the plans is unchanged. */
+  @container pricing-renderer (max-width: 839.98px) {
+    pricing-renderer[data-pr-root] .pr-content {
+      gap: min(var(--pr-space-section), var(--pr-space-5));
+      padding-block-start: min(var(--pr-shell-padding), var(--pr-space-4));
     }
 
-    pricing-renderer[data-pr-root] .pr-addon-layout {
-      grid-template-columns: minmax(0, 1fr) 288px;
-      align-items: start;
+    pricing-renderer[data-pr-root] .pr-content > [data-pr-part='plans'] ~ * {
+      margin-block-start: calc(
+        var(--pr-space-section) - min(var(--pr-space-section), var(--pr-space-5))
+      );
     }
 
-    pricing-renderer[data-pr-root] .pr-summary {
-      inset-block-start: var(--pr-space-4);
-      inset-block-end: auto;
-      grid-template-columns: 1fr;
+    pricing-renderer[data-pr-root] [data-pr-part='plans'] > .pr-section__heading {
+      margin-block-end: var(--pr-space-3);
     }
   }
 
-  @container pricing-renderer (min-width: 1200px) {
+  @container pricing-renderer (min-width: 840px) {
+    /* Plan columns by plan count (table in tests/fixtures/layout/plan-grid-spec.md). The
+       generic rule sets the band maximum; the :where() rules after it keep the same specificity
+       and set the counts that need fewer columns, so the later rule wins. A grid whose N-th child
+       is its last child has exactly N plans. The generic rule of a wider band comes later in the
+       file and overrides the count rules of the narrower ones. */
     pricing-renderer[data-pr-root] .pr-plan-grid {
-      grid-template-columns: repeat(auto-fit, minmax(220px, 320px));
+      grid-template-columns: var(--pr-plan-columns, repeat(3, minmax(0, 1fr)));
     }
 
-    pricing-renderer[data-pr-root] .pr-addon-grid {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
+    pricing-renderer[data-pr-root] .pr-plan-grid:where(:has(> :nth-child(4):last-child)),
+    pricing-renderer[data-pr-root] .pr-plan-grid:where(:has(> :nth-child(10):last-child)),
+    pricing-renderer[data-pr-root] .pr-plan-grid:where(:has(> :nth-child(16):last-child)) {
+      grid-template-columns: var(--pr-plan-columns, repeat(2, minmax(0, 1fr)));
     }
 
-    pricing-renderer[data-pr-root] .pr-addon-layout {
-      grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
+    pricing-renderer[data-pr-root] .pr-plan-grid:not(:has(> :nth-child(3))) {
+      grid-template-columns: var(--pr-plan-columns, repeat(auto-fit, minmax(220px, 320px)));
     }
 
-    pricing-renderer[data-pr-root] .pr-dialog {
-      width: min(960px, 100%);
+    /* Tighter plan cards and less space above the plans bring the first CTA into the first
+       screen (savings per lever in tests/fixtures/layout/plan-grid-spec.md); the space after
+       the plans stays var(--pr-space-section). */
+    pricing-renderer[data-pr-root] .pr-plan-card {
+      padding: var(--pr-space-4);
     }
-  }
 
-  @media (prefers-reduced-motion: reduce) {
-    pricing-renderer[data-pr-root] *,
-    pricing-renderer[data-pr-root] *::before,
-    pricing-renderer[data-pr-root] *::after {
-      scroll-behavior: auto !important;
-      animation-duration: 0.01ms !important;
-      animation-iteration-count: 1 !important;
-      transition-duration: 0.01ms !important;
+    pricing-renderer[data-pr-root] .pr-plan-card__top h4 {
+      margin-block-start: var(--pr-space-2);
     }
-  }
 
-  @media (forced-colors: active) {
-    pricing-renderer[data-pr-root] .pr-plan-card.is-selected,
-    pricing-renderer[data-pr-root] .pr-addon-card.is-selected {
-      outline: 3px solid Highlight;
+    pricing-renderer[data-pr-root] .pr-plan-card .pr-price {
+      min-block-size: 4rem;
+      padding-block: var(--pr-space-2);
     }
 
-    pricing-renderer[data-pr-root] .pr-selection-control:has(input:checked) {
-      border-color: Highlight;
+    pricing-renderer[data-pr-root] .pr-highlight-list {
+      gap: var(--pr-space-2);
+      margin-block-end: var(--pr-space-3);
+    }
+
+    pricing-renderer[data-pr-root] .pr-hero__title {
+      font-size: clamp(2rem, 8cqi, 3rem);
+    }
+
+    pricing-renderer[data-pr-root] [data-pr-part='plans'] > .pr-section__heading {
+      margin-block-end: var(--pr-space-3);
+    }
+
+    /* The top padding and the row gap (every row above the plans: diagnostics, hero, metadata,
+       billing, variables) are capped, so smaller --pr-shell-padding and --pr-space-section values
+       still apply. The margin after the plans adds back what the cap removes. */
+    pricing-renderer[data-pr-root] .pr-content {
+      gap: min(var(--pr-space-section), var(--pr-space-5));
+      padding-block-start: min(var(--pr-shell-padding), var(--pr-space-4));
+    }
+
+    pricing-renderer[data-pr-root] .pr-content > [data-pr-part='plans'] ~ * {
+      margin-block-start: calc(
+        var(--pr-space-section) - min(var(--pr-space-section), var(--pr-space-5))
+      );
+    }
+
+    pricing-renderer[data-pr-root] .pr-addon-layout {
+      grid-template-columns: minmax(0, 1fr) 288px;
+      align-items: start;
+    }
+
+    /* The summary is not in here any more, so its column would be 288px of nothing. */
+    pricing-renderer[data-pr-root] .pr-addon-layout[data-pr-summary='outside'] {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    pricing-renderer[data-pr-root] .pr-summary {
+      inset-block-start: calc(var(--pr-sticky-top, 0px) + var(--pr-space-4));
+      inset-block-end: auto;
+    }
+
+    pricing-renderer[data-pr-root] .pr-summary__live {
+      grid-template-columns: 1fr;
+    }
+
+    /* The summary docked after the plans is one compact
+       line (label and total side by side). It is not sticky, so it never covers the toolbar. */
+    pricing-renderer[data-pr-root] .pr-flow > .pr-summary {
+      position: relative;
+      inset-block-start: auto;
+      padding-block: var(--pr-space-3);
+    }
+
+    pricing-renderer[data-pr-root] .pr-flow > .pr-summary:empty {
+      display: none;
+    }
+
+    pricing-renderer[data-pr-root] .pr-flow > .pr-summary .pr-summary__live {
+      grid-template-columns: minmax(0, 1fr) auto;
+    }
+
+    pricing-renderer[data-pr-root] .pr-flow > .pr-summary .pr-breakdown-toggle {
+      inset-block-start: var(--pr-space-3);
+    }
+
+    pricing-renderer[data-pr-root] .pr-breakdown-toggle {
+      inset-block-start: var(--pr-space-4);
+    }
+  }
+
+  @container pricing-renderer (min-width: 1040px) {
+    pricing-renderer[data-pr-root] .pr-plan-grid {
+      grid-template-columns: var(--pr-plan-columns, repeat(4, minmax(0, 1fr)));
+    }
+
+    pricing-renderer[data-pr-root] .pr-plan-grid:where(:has(> :nth-child(3):last-child)),
+    pricing-renderer[data-pr-root] .pr-plan-grid:where(:has(> :nth-child(5):last-child)),
+    pricing-renderer[data-pr-root] .pr-plan-grid:where(:has(> :nth-child(6):last-child)),
+    pricing-renderer[data-pr-root] .pr-plan-grid:where(:has(> :nth-child(9):last-child)) {
+      grid-template-columns: var(--pr-plan-columns, repeat(3, minmax(0, 1fr)));
+    }
+  }
+
+  @container pricing-renderer (min-width: 1200px) {
+    pricing-renderer[data-pr-root] .pr-addon-grid {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    pricing-renderer[data-pr-root] .pr-addon-layout {
+      grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
+    }
+
+    pricing-renderer[data-pr-root] .pr-addon-layout[data-pr-summary='outside'] {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    pricing-renderer[data-pr-root] .pr-dialog {
+      width: min(960px, 100%);
+    }
+  }
+
+  /* At most 4 columns from 1280px too: 5 columns would make the cards about 243px wide at 1440,
+     taller than today, and push the first CTA below the first screen. */
+  @container pricing-renderer (min-width: 1280px) {
+    pricing-renderer[data-pr-root] .pr-plan-grid {
+      grid-template-columns: var(--pr-plan-columns, repeat(4, minmax(0, 1fr)));
+    }
+
+    pricing-renderer[data-pr-root] .pr-plan-grid:where(:has(> :nth-child(3):last-child)),
+    pricing-renderer[data-pr-root] .pr-plan-grid:where(:has(> :nth-child(5):last-child)),
+    pricing-renderer[data-pr-root] .pr-plan-grid:where(:has(> :nth-child(6):last-child)),
+    pricing-renderer[data-pr-root] .pr-plan-grid:where(:has(> :nth-child(9):last-child)) {
+      grid-template-columns: var(--pr-plan-columns, repeat(3, minmax(0, 1fr)));
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    pricing-renderer[data-pr-root] *,
+    pricing-renderer[data-pr-root] *::before,
+    pricing-renderer[data-pr-root] *::after {
+      scroll-behavior: auto !important;
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+
+  @media (forced-colors: active) {
+    pricing-renderer[data-pr-root] .pr-plan-card.is-selected,
+    pricing-renderer[data-pr-root] .pr-addon-card.is-selected {
+      outline: 3px solid Highlight;
+    }
+
+    pricing-renderer[data-pr-root] .pr-selection-control:has(input:checked) {
+      border-color: Highlight;
       background: Highlight;
       color: HighlightText;
       forced-color-adjust: none;
@@ -1106,5 +1621,444 @@
     pricing-renderer[data-pr-root] .pr-button--primary {
       border-color: ButtonText;
     }
+
+    /* the current badge and the pending spinner keep system colours; the text names the state */
+    pricing-renderer[data-pr-root] .pr-plan-card[data-current='true'],
+    pricing-renderer[data-pr-root] .pr-addon-card[data-current='true'] {
+      border-color: CanvasText;
+    }
+
+    pricing-renderer[data-pr-root] .pr-button:disabled {
+      border-color: GrayText;
+      color: GrayText;
+    }
+  }
+
+  /* Dense add-on grid: cards in a row share a height, and the disclosure and the stepper sit at the
+     bottom of each card. */
+  pricing-renderer[data-pr-root] .pr-addon-grid--dense {
+    align-items: stretch;
+  }
+
+  pricing-renderer[data-pr-root] .pr-addon-card--dense .pr-addon-card__details {
+    flex: 1 1 auto;
+  }
+
+  /* Filter mode: the toolbar and the grid share the left column of the layout. */
+  pricing-renderer[data-pr-root] .pr-addon-layout > .pr-addon-main {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--pr-space-4);
+    min-inline-size: 0;
+  }
+
+  pricing-renderer[data-pr-root] .pr-addon-main > .pr-button {
+    justify-self: start;
+  }
+
+  pricing-renderer[data-pr-root] .pr-addon-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--pr-space-3);
+    padding: var(--pr-space-3);
+    margin-block-end: 0;
+    border: 1px solid var(--pr-color-border);
+    border-radius: var(--pr-radius-md);
+    background: color-mix(in srgb, var(--pr-color-surface) 94%, transparent);
+    position: static;
+  }
+
+  pricing-renderer[data-pr-root] .pr-addon-effects .pr-addon-notes {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--pr-space-2);
+    margin: var(--pr-space-3) 0 0;
+  }
+
+  pricing-renderer[data-pr-root] .pr-addon-effects .pr-addon-notes p {
+    margin: 0;
+    font-size: var(--pr-font-size-sm);
+  }
+
+  /* <pricing-change-review>, after the approved review mock. The review is its own element. Its tokens
+     and theme switches (theme attribute, data-theme ancestor, theme="auto") live in theme.css,
+     which must be loaded, as for the renderer. The host overrides a token with an unlayered rule
+     on pricing-change-review. */
+  pricing-change-review {
+    display: block;
+    container: change-review / inline-size;
+    min-inline-size: 0;
+    color: var(--pr-color-text);
+    font: inherit;
+    /* as on the renderer root */
+    font-family: var(--pr-font-family);
+    line-height: var(--pr-line-height, 1.5);
+    text-rendering: optimizeLegibility;
+  }
+
+  pricing-change-review,
+  pricing-change-review *,
+  pricing-change-review *::before,
+  pricing-change-review *::after {
+    box-sizing: border-box;
+  }
+
+  pricing-change-review :where(button) {
+    color: inherit;
+    font: inherit;
+  }
+
+  pricing-change-review :where(button, h2):focus-visible {
+    outline: 2px solid var(--pr-color-focus);
+    outline-offset: 3px;
+  }
+
+  pricing-change-review [data-pr-part='change-review'] {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--pr-space-4);
+    min-inline-size: 0;
+    overflow-wrap: break-word;
+  }
+
+  pricing-change-review :where(h2, h3, p, ul, dl, dd) {
+    margin: 0;
+  }
+
+  pricing-change-review ul {
+    padding: 0;
+    list-style: none;
+  }
+
+  pricing-change-review .pr-cr-header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--pr-space-2) var(--pr-space-3);
+  }
+
+  pricing-change-review .pr-cr-header h2 {
+    font-size: var(--pr-font-size-2xl);
+    font-weight: var(--pr-font-weight-bold, 700);
+    letter-spacing: -0.025em;
+  }
+
+  pricing-change-review [data-pr-part='change-review'] > section {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--pr-space-3);
+    min-inline-size: 0;
+    padding: var(--pr-space-4);
+    border: 1px solid var(--pr-color-border);
+    border-radius: var(--pr-radius-lg);
+    background: var(--pr-color-surface);
+    box-shadow: var(--pr-shadow-sm);
+  }
+
+  pricing-change-review [data-pr-part='change-review'] > section > h3 {
+    font-size: var(--pr-font-size-lg);
+    font-weight: var(--pr-font-weight-bold, 700);
+    letter-spacing: -0.02em;
+  }
+
+  pricing-change-review [data-pr-part='change-row'] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--pr-space-1) var(--pr-space-3);
+    padding-block: var(--pr-space-2);
+  }
+
+  pricing-change-review [data-pr-part='change-row'] + [data-pr-part='change-row'] {
+    border-block-start: 1px solid var(--pr-color-border);
+  }
+
+  pricing-change-review .pr-cr-row__name {
+    flex: 1 1 10rem;
+    min-inline-size: 0;
+    font-weight: var(--pr-font-weight-medium, 650);
+  }
+
+  pricing-change-review .pr-cr-row__detail {
+    min-inline-size: 0;
+    color: var(--pr-color-muted);
+    font-size: var(--pr-font-size-sm);
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* A limit that grows is a gain, one that shrinks is what the visitor gives up. There is no
+     red in this theme and inventing one for a downgrade would overstate it: warning is the tone
+     already used a few lines below for a limit that falls under current usage. */
+  pricing-change-review .pr-cr-row__delta {
+    font-variant-numeric: tabular-nums;
+  }
+
+  pricing-change-review .pr-cr-row__delta[data-direction='increase'] {
+    color: var(--pr-color-success);
+  }
+
+  pricing-change-review .pr-cr-row__delta[data-direction='decrease'] {
+    color: var(--pr-color-warning);
+  }
+
+  pricing-change-review .pr-cr-row__reason {
+    flex-basis: 100%;
+    color: var(--pr-color-muted);
+    font-size: var(--pr-font-size-sm);
+  }
+
+  pricing-change-review [data-pr-part='change-badge'] {
+    display: inline-flex;
+    align-items: center;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    min-block-size: 28px;
+    padding: 0.2rem 0.65rem;
+    border: 1px solid var(--pr-color-border);
+    border-radius: 999px;
+    background: var(--pr-color-surface-raised);
+    color: var(--pr-color-muted);
+    font-size: var(--pr-font-size-xs);
+    font-weight: var(--pr-font-weight-bold, 700);
+    overflow-wrap: anywhere;
+  }
+
+  pricing-change-review [data-pr-part='change-badge'][data-tone='accent'] {
+    border-color: color-mix(in srgb, var(--pr-color-accent) 45%, var(--pr-color-border));
+    background: color-mix(in srgb, var(--pr-color-accent) 11%, var(--pr-color-surface-raised));
+    color: var(--pr-color-link);
+  }
+
+  pricing-change-review [data-pr-part='change-badge'][data-tone='success'] {
+    border-color: color-mix(in srgb, var(--pr-color-success) 42%, var(--pr-color-border));
+    background: color-mix(in srgb, var(--pr-color-success) 10%, var(--pr-color-surface-raised));
+    /* the text is darkened (lightened in the dark theme) to keep 4.5:1 on the tinted background */
+    color: color-mix(in srgb, var(--pr-color-success) 78%, var(--pr-color-text));
+  }
+
+  pricing-change-review [data-pr-part='change-badge'][data-tone='warning'] {
+    border-color: color-mix(in srgb, var(--pr-color-warning) 42%, var(--pr-color-border));
+    background: var(--pr-color-warning-surface);
+    color: var(--pr-color-warning);
+  }
+
+  pricing-change-review .pr-cr-banner,
+  pricing-change-review .pr-cr-notice,
+  pricing-change-review .pr-cr-error {
+    padding: var(--pr-space-3) var(--pr-space-4);
+    border: 1px solid var(--pr-color-border);
+    border-radius: var(--pr-radius-md);
+    background: var(--pr-color-surface-subtle);
+  }
+
+  pricing-change-review .pr-cr-banner {
+    border-color: color-mix(in srgb, var(--pr-color-accent) 45%, var(--pr-color-border));
+    background: color-mix(in srgb, var(--pr-color-accent) 8%, var(--pr-color-surface));
+  }
+
+  pricing-change-review .pr-cr-notice + .pr-cr-notice {
+    margin-block-start: var(--pr-space-2);
+  }
+
+  pricing-change-review .pr-cr-error,
+  pricing-change-review .pr-cr-warning {
+    border-color: var(--pr-color-warning);
+    background: var(--pr-color-warning-surface);
+  }
+
+  pricing-change-review .pr-cr-warning {
+    flex-basis: 100%;
+    padding: var(--pr-space-2) var(--pr-space-3);
+    border: 1px solid var(--pr-color-warning);
+    border-radius: var(--pr-radius-sm);
+    color: var(--pr-color-warning);
+    font-weight: var(--pr-font-weight-medium, 650);
+  }
+
+  pricing-change-review .pr-cr-error {
+    color: var(--pr-color-text);
+  }
+
+  pricing-change-review .pr-cr-error strong {
+    display: block;
+  }
+
+  pricing-change-review .pr-cr-price {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--pr-space-3);
+  }
+
+  pricing-change-review .pr-cr-price > div {
+    min-inline-size: 0;
+  }
+
+  pricing-change-review .pr-cr-price dt {
+    color: var(--pr-color-muted);
+    font-size: var(--pr-font-size-sm);
+  }
+
+  pricing-change-review .pr-cr-price dd {
+    font-size: var(--pr-font-size-xl);
+    font-weight: var(--pr-font-weight-bold, 790);
+    letter-spacing: -0.03em;
+    font-variant-numeric: tabular-nums;
+  }
+
+  pricing-change-review .pr-cr-price dd small {
+    color: var(--pr-color-muted);
+    font-size: var(--pr-font-size-sm);
+    font-weight: var(--pr-font-weight-regular, 400);
+    letter-spacing: 0;
+  }
+
+  /* The difference is the number the screen exists for, so it outranks the two it is derived
+     from. A decrease is the pleasant exception and gets the success tone; an increase is not an
+     error (the visitor asked for it), so it takes the accent rather than a warning colour. */
+  pricing-change-review [data-pr-part='price-difference'] dd {
+    font-size: var(--pr-font-size-2xl);
+    line-height: 1.1;
+  }
+
+  pricing-change-review [data-pr-part='price-difference'][data-direction='decrease'] dd {
+    color: var(--pr-color-success);
+  }
+
+  pricing-change-review [data-pr-part='price-difference'][data-direction='increase'] dd {
+    color: var(--pr-color-accent);
+  }
+
+  pricing-change-review .pr-cr-note {
+    color: var(--pr-color-muted);
+    font-size: var(--pr-font-size-sm);
+  }
+
+  /* Confirm and Back stay reachable however tall the diff is. This used to apply only below a
+     600px container, so on a wider one the buttons scrolled out of a long comparison and the
+     reader had to hunt for them. The background is fully opaque: at 95% the rows behind it
+     showed through and the bar read as broken. */
+  pricing-change-review [data-pr-part='change-actions'] {
+    position: sticky;
+    z-index: 4;
+    inset-block-end: 0;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--pr-space-3);
+    padding-block: var(--pr-space-3);
+    border-block-start: 1px solid var(--pr-color-border);
+    background: var(--pr-color-surface);
+  }
+
+  pricing-change-review .pr-cr-status {
+    margin-inline-end: auto;
+    color: var(--pr-color-muted);
+    font-size: var(--pr-font-size-sm);
+  }
+
+  pricing-change-review .pr-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-block-size: 44px;
+    padding: 0.65rem 1rem;
+    border: 1px solid transparent;
+    border-radius: var(--pr-radius-md);
+    font-weight: var(--pr-font-weight-bold, 750);
+    line-height: 1.2;
+    text-align: center;
+    /* Unlike a plan CTA, which is a word, confirming names what is being confirmed. In a narrow
+       dialog that sentence has to wrap rather than be cut off, so min-block-size sets the floor
+       and the box grows with the text. */
+    white-space: normal;
+    text-wrap: balance;
+    cursor: pointer;
+    transition: background-color var(--pr-motion-fast);
+  }
+
+  pricing-change-review .pr-button--primary {
+    border-color: var(--pr-color-accent);
+    background: var(--pr-color-accent);
+    color: var(--pr-color-on-accent);
+  }
+
+  pricing-change-review .pr-button--secondary {
+    border-color: var(--pr-color-border);
+    background: var(--pr-color-surface);
+    color: var(--pr-color-text);
+  }
+
+  /* Confirm while pending or with nothing to confirm is aria-disabled, so focus stays on it. */
+  pricing-change-review .pr-button[aria-disabled='true'] {
+    border-color: var(--pr-color-border);
+    background: var(--pr-color-surface-subtle);
+    color: var(--pr-color-muted);
+    cursor: not-allowed;
+  }
+
+  pricing-change-review .pr-button[aria-busy='true'] {
+    cursor: progress;
+  }
+
+  /* Wide: the price in columns (two or three) and roomier sections. */
+  @container change-review (min-width: 600px) {
+    pricing-change-review .pr-cr-price {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    pricing-change-review .pr-cr-price:where(:not(:has(> :nth-child(3)))) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    pricing-change-review [data-pr-part='change-review'] > section {
+      padding: var(--pr-space-5);
+    }
+  }
+
+  /* Narrow: the actions stay in view at the bottom of the container. */
+  @container change-review (max-width: 599.98px) {
+    pricing-change-review [data-pr-part='change-actions'] .pr-button {
+      flex: 1 1 8rem;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    pricing-change-review *,
+    pricing-change-review *::before,
+    pricing-change-review *::after {
+      scroll-behavior: auto !important;
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+
+  /* The root, every section and every button keep a visible
+     border of system colours. The changes are named in text, so no meaning is left to colour. */
+  @media (forced-colors: active) {
+    pricing-change-review [data-pr-part='change-review'] {
+      padding: var(--pr-space-3);
+      border: 1px solid CanvasText;
+    }
+
+    pricing-change-review [data-pr-part='change-review'] > section {
+      border: 1px solid CanvasText;
+    }
+
+    pricing-change-review [data-pr-part='change-actions'] {
+      background: Canvas;
+    }
+
+    pricing-change-review .pr-button {
+      border: 1px solid ButtonText;
+    }
+
+    pricing-change-review .pr-button[aria-disabled='true'] {
+      border-color: GrayText;
+      color: GrayText;
+    }
   }
 }