/* Prices page (/solar-panels/cost/). Redesigned 13 Oct 2026; rebranded 15 Oct 2026 to match the home page's look
   (James: "match the branding of the homepage, but not copy the homepage design"). Loaded by that page only, after
   assets/solar-page.css, whose shared pieces it uses (icons, bars, homes). Markup: src/content/money/solar-panel-cost.mjs.

   The home page's brand, used here:
   - bright: daylight sky fading to white at the top, then white and pale blue sections taking turns, no dark bands;
   - the sun gradient (the logo's ring, coral to amber) for the good things: our price card's outline, the price scale,
     the payback years after the system has paid for itself, the 0% VAT window;
   - the sun ring round every icon and initial, and the faded sun arc behind the price card;
   - white cards with a soft shadow on pale blue, pale blue cards on white;
   - review cards, the ratings pill, orange ticks and "Get My Free Solar Quote".
   What's the page's own: the price card in the hero, the price scale (the one bold piece), the itemised "what you pay
   for" beside the scaffolding photo, the year-block payback line with the inverter marked. */

.page-cost { --cp-radius: 20px; --cp-shadow: 0 1px 2px rgba(38, 40, 42, .06), 0 18px 40px -28px rgba(38, 40, 42, .4);
  --cp-sun: linear-gradient(90deg, var(--sun-coral), var(--sun-amber)); }

/* ---------- Hero: the question, and our prices beside it ---------- */
.cp-hero { position: relative; overflow: hidden; padding: clamp(24px, 3.4vw, 44px) 0 clamp(40px, 5vw, 64px);
  background: linear-gradient(180deg, var(--sky) 0%, #f5f8fa 52%, var(--paper) 100%); }
.cp-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.cp-hero h1 { display: flex; flex-direction: column; gap: 12px; max-width: 40rem; }
.cp-hero h1 .kicker { font: 500 1.125rem/1.4 var(--text); color: var(--ink-soft); }
.cp-hero h1 .display { font-size: clamp(2.5rem, 1.5rem + 3.4vw, 4.25rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.025em; text-wrap: balance; }
.cp-hero .page-lede { max-width: 36rem; }
.cp-hero .crumbs ol { margin-bottom: 20px; }
.cp-hero .page-actions { margin-top: 0; }

/* The accreditation logos, quietly, under the button. Never recoloured (the schemes' rules). */
.cp-acc { list-style: none; margin: 30px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; max-width: 34rem; }
.cp-acc li { display: flex; align-items: center; }
.cp-acc img { display: block; width: auto; height: calc(var(--h) * .78); max-width: none; }

/* The card sits in the sun: the faded ring rising behind its top right corner. */
.cp-hero-card { position: relative; }
.cp-hero-card::before { content: ""; position: absolute; z-index: 0; width: 560px; height: 560px; right: -230px; top: -200px;
  background: url("sun-arc.svg") center / contain no-repeat; pointer-events: none; }

@media (min-width: 1000px) {
  .cp-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "text card" "act card";
    column-gap: clamp(48px, 6vw, 96px); row-gap: 30px; align-items: start; }
  .cp-hero-text { grid-area: text; }
  .cp-hero-card { grid-area: card; margin-top: 46px; }
  .cp-hero-act { grid-area: act; }
}
@media (max-width: 999px) {
  .cp-hero-card { max-width: 30rem; }
  .cp-hero-card::before { width: 380px; height: 380px; right: -170px; top: -150px; }
}
/* Phones: the arc clear of the words above the card, rising out of the screen's edge. */
@media (max-width: 700px) {
  .cp-hero-card::before { width: 300px; height: 300px; right: -200px; top: -40px; }
}

/* ---------- Our prices, as a card (the hero, and beside "Our prices") ---------- */
.cp-price { position: relative; z-index: 1; padding: clamp(24px, 3vw, 36px); border-radius: 22px; border: 3px solid transparent;
  background: linear-gradient(var(--paper), var(--paper)) padding-box, linear-gradient(135deg, var(--sun-coral), var(--sun-amber)) border-box;
  box-shadow: 0 1px 2px rgba(38, 40, 42, .06), 0 34px 64px -38px rgba(38, 40, 42, .55); }
.cp-price-head { margin: 0 0 16px; font: 600 .9375rem/1.3 var(--text); color: var(--star); }
.cp-price-what { font: 600 1.0625rem/1.35 var(--text); color: var(--ink); }
.cp-price-fig { margin: 6px 0 0; font: 500 clamp(3.25rem, 2.3rem + 3vw, 4.5rem)/1 var(--display); letter-spacing: -0.04em; color: var(--ink); white-space: nowrap; }
.cp-price-fig span { margin-right: 4px; font: 500 1.125rem/1 var(--text); letter-spacing: 0; color: var(--ink-soft); }
.cp-price-note { margin-top: 12px; font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.cp-price-alt { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.cp-price-fig--alt { margin: 0; font-size: clamp(1.75rem, 1.4rem + 1vw, 2.125rem); letter-spacing: -0.025em; }
.cp-price-fig--alt span { font-size: 1rem; }
.page-cost .cp-price-ticks { gap: 8px; margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.page-cost .cp-price-ticks li { font-size: 1rem; font-weight: 600; }
.cp-price-btn { width: 100%; margin-top: 24px; }

/* ---------- The short answer: four figures on one pale blue panel ---------- */
/* Straight after the hero, whose foot is already white: less space above it than a normal section. */
.page-cost .cp-hero + .section { padding-top: clamp(32px, 4vw, 56px); }
.page-cost .cp-short .key-figures { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: clamp(8px, 1.4vw, 14px) 0;
  border-radius: var(--cp-radius); background: var(--sky); }
.page-cost .cp-short .key-figure { border-top: 0; padding: clamp(18px, 2.2vw, 26px) clamp(18px, 2.4vw, 30px); }
.page-cost .cp-short .key-figure + .key-figure { border-left: 1px solid var(--line-strong); }
.page-cost .cp-short .key-figure strong { font-size: clamp(2rem, 1.5rem + 1.4vw, 2.75rem); letter-spacing: -0.03em; white-space: nowrap; }
/* Ours, second: in the sun gradient's ring, so it reads as SolarSave's figure among the national ones. */
.page-cost .cp-short .key-figure:nth-child(2) strong { display: inline-block; padding-bottom: 4px; background: var(--cp-sun) left bottom / 100% 4px no-repeat; }
@media (max-width: 899px) {
  .page-cost .cp-short .key-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-cost .cp-short .key-figure:nth-child(3) { border-left: 0; }
  .page-cost .cp-short .key-figure:nth-child(n+3) { border-top: 1px solid var(--line-strong); }
}
@media (max-width: 420px) {
  .page-cost .cp-short .key-figures { grid-template-columns: minmax(0, 1fr); padding: 4px 0; }
  .page-cost .cp-short .key-figure + .key-figure { border-left: 0; border-top: 1px solid var(--line-strong); }
}

/* ---------- Cost by system size: the price scale (the page's bold piece) ---------- */
.cp-size { padding: clamp(18px, 3vw, 40px) clamp(18px, 3vw, 40px) clamp(14px, 2.4vw, 28px); border-radius: 22px; background: var(--paper); box-shadow: var(--cp-shadow); }
.cp-size .data-table-wrap { margin-top: 0; }
.page-cost .cp-size .data-table th, .page-cost .cp-size .data-table td { border-bottom-color: var(--line); vertical-align: middle; padding-top: 18px; padding-bottom: 18px; }
.page-cost .cp-size .data-table thead th { border-bottom: 1px solid var(--line-strong); padding-top: 4px; padding-bottom: 12px; vertical-align: bottom; font-size: .9375rem; color: var(--ink-soft); }
.page-cost .cp-size .data-table tbody tr:last-child > * { border-bottom: 0; }
.page-cost .cp-size .data-table tbody th { font: 500 1.375rem/1.1 var(--display); letter-spacing: -0.01em; white-space: nowrap; }
.cp-size .data-table td:last-child, .cp-size .data-table th:last-child { width: 50%; padding-right: 0; }
.cp-price-range { display: block; font: 600 1.0625rem/1.3 var(--text); color: var(--ink); }
.cp-size + .table-note, .cp-size .table-note { max-width: 52rem; margin-top: 18px; font-size: .9375rem; color: var(--ink-soft); }

/* The scale's labels, over the bar column (wide screens only). */
.cp-axis { position: relative; display: block; height: 1.2em; margin-top: 10px; font-weight: 400; font-size: .8125rem; color: var(--ink-soft); }
.cp-axis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.cp-axis span:first-child { transform: none; }
.cp-axis span:last-child { transform: translateX(-100%); }

/* One track per row, in £500 blocks from £4,000 to £10,000. Each bar shows its own slice of one sun gradient that runs
   the whole scale, and is cut into the same blocks, so every row lines up: the slice's size and position come from
   --l and --w (its start and width, as percentages of the scale). */
.cp-spark { position: relative; display: block; height: 16px; margin-top: 10px;
  --blocks: repeating-linear-gradient(90deg, #000 0 calc(8.3333% - 3px), transparent calc(8.3333% - 3px) 8.3333%); }
.cp-spark::before { content: ""; position: absolute; inset: 0; background: var(--sky-deep); -webkit-mask: var(--blocks); mask: var(--blocks); }
.cp-spark-bar { position: absolute; top: 0; bottom: 0; left: calc(var(--l) * 1%); width: calc(var(--w) * 1%);
  --size: calc(10000% / var(--w)) 100%; --pos: calc(var(--l) / (100 - var(--w)) * 100%) 0;
  background: var(--cp-sun); background-size: var(--size); background-position: var(--pos);
  -webkit-mask: var(--blocks); -webkit-mask-size: var(--size); -webkit-mask-position: var(--pos);
  mask: var(--blocks); mask-size: var(--size); mask-position: var(--pos); }
/* The national average: the logo's ring. */
.cp-spark-ring { position: absolute; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; border: 5px solid transparent;
  background: linear-gradient(var(--paper), var(--paper)) padding-box, linear-gradient(225deg, var(--sun-coral), var(--sun-amber)) border-box;
  box-shadow: 0 2px 6px rgba(38, 40, 42, .25); }

/* Phones: this table fits the screen (the site's tables otherwise scroll sideways), so no price is hidden; the scale's
   labels go (the note under the table gives the scale). */
@media (max-width: 760px) {
  .cp-axis { display: none; }
}
@media (max-width: 640px) {
  .cp-size { padding: 8px 16px 12px; }
  .page-cost .cp-size .data-table { min-width: 0; font-size: .9375rem; }
  .cp-size .data-table td:last-child, .cp-size .data-table th:last-child { width: auto; min-width: 7.5rem; }
  .page-cost .cp-size .data-table th, .page-cost .cp-size .data-table td { padding-left: 6px; padding-right: 6px; }
  .page-cost .cp-size .data-table th:first-child, .page-cost .cp-size .data-table td:first-child { padding-left: 0; }
  .page-cost .cp-size .data-table th:last-child, .page-cost .cp-size .data-table td:last-child { padding-right: 0; }
  .page-cost .cp-size .data-table tbody th { font-size: 1.125rem; }
  .cp-price-range { font-size: .9375rem; }
}
@media (max-width: 400px) {
  .page-cost .cp-size .data-table { font-size: .875rem; }
  .cp-size .data-table td:last-child { min-width: 6rem; }
}

/* Use against generation, beside the scale. */
.cp-use { display: grid; gap: 24px 56px; margin-top: clamp(28px, 4vw, 40px); padding: clamp(22px, 3vw, 36px); border-radius: 22px; background: var(--paper); box-shadow: var(--cp-shadow); }
@media (min-width: 900px) { .cp-use { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; } }
.cp-use h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 10px; }
.cp-use-text p + p { margin-top: 10px; }
.cp-bars-kwh { --val: 8.4rem; }

.cp-homes { margin-top: clamp(48px, 6vw, 72px); }
.cp-homes-intro { max-width: 44rem; margin-bottom: 28px; }
.cp-homes-after { max-width: 44rem; margin-top: 30px; }

/* "Get My Free Solar Quote" between sections. */
.cp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: clamp(40px, 5vw, 56px); }
.cp-cta p { color: var(--ink-soft); }
.cp-cta a:not(.btn) { color: var(--ink); font-weight: 600; }

/* Bars on this page: the warm one in the sun gradient, the track pale blue. */
.page-cost .sp-bar-track { background: var(--sky); border-radius: 999px; }
.page-cost .section--sky .sp-bar-track, .page-cost .cp-panel .sp-bar-track { background: var(--sky-deep); }
.page-cost .cp-use .sp-bar-track { background: var(--sky); }
.page-cost .sp-bar { border-radius: 999px; }
.page-cost .sp-bar--warm { background: var(--cp-sun); }

/* ---------- What you pay for: the scaffolding photo beside the list ---------- */
.cp-ring { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 2.5px solid transparent;
  background: linear-gradient(var(--paper), var(--paper)) padding-box, linear-gradient(225deg, var(--sun-coral), var(--sun-amber)) border-box; }
.cp-ring .sp-icon { width: 28px; height: 28px; }

.cp-included { display: grid; gap: 28px clamp(40px, 5vw, 72px); }
@media (min-width: 900px) { .cp-included { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.cp-included-photo { margin: 0; }
.cp-included-img { width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; object-position: 30% 50%; border-radius: var(--cp-radius); }
.cp-included-photo figcaption { margin-top: 10px; font-size: .9375rem; line-height: 1.45; color: var(--ink-soft); }
@media (min-width: 900px) { .cp-included-photo { position: sticky; top: 108px; } }
@media (max-width: 899px) { .cp-included-photo { max-width: 34rem; } }
.cp-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.cp-items li { display: flex; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); line-height: 1.5; }
.cp-items li:first-child { padding-top: 0; }
.cp-items li:last-child { border-bottom: 0; }

.cp-labour { display: grid; gap: 20px 56px; margin-top: clamp(40px, 5vw, 60px); padding: clamp(22px, 3vw, 34px); border-radius: var(--cp-radius); background: var(--sky); }
@media (min-width: 900px) { .cp-labour { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; } }
.cp-labour-after { grid-column: 1 / -1; max-width: 44rem; color: var(--ink-soft); }
.cp-stack-bar { display: flex; gap: 3px; height: 28px; }
.cp-stack-bar span { border-radius: 6px; }
.cp-stack-a { background: var(--cp-sun); }
.cp-stack-b { background: var(--ink-soft); }
.cp-stack-key { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 12px; font-size: 1rem; }
.cp-stack-key span { display: inline-flex; align-items: center; gap: 8px; }
.cp-stack-key i { width: 14px; height: 14px; border-radius: 4px; }
.cp-key-a { background: var(--cp-sun); }
.cp-key-b { background: var(--ink-soft); }

/* ---------- Cards with a ring icon: what changes the cost (white on pale blue); comparing quotes (pale blue on white) ---------- */
.cp-cards { display: grid; gap: 16px; }
@media (min-width: 760px) { .cp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1100px) { .cp-cards--check { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cp-card { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 6px 20px; align-content: start; padding: clamp(22px, 2.6vw, 30px);
  border-radius: var(--cp-radius); background: var(--paper); box-shadow: var(--cp-shadow); }
.cp-card .cp-ring { grid-row: span 2; }
.cp-card h3 { align-self: center; font-size: 1.1875rem; font-weight: 600; line-height: 1.3; }
.cp-card p { grid-column: 2; color: var(--ink-soft); line-height: 1.6; }
@media (min-width: 760px) { .cp-cards--differ .cp-card:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* Comparing quotes: a checklist on white, so pale blue cards with the ring on top. */
.cp-cards--check .cp-card { grid-template-columns: minmax(0, 1fr); background: var(--sky); box-shadow: none; }
.cp-cards--check .cp-card .cp-ring { grid-row: auto; margin-bottom: 10px; }
.cp-cards--check .cp-card p { grid-column: 1; }
@media (max-width: 560px) {
  .cp-card { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 20px; }
  .cp-card .cp-ring { width: 44px; height: 44px; }
  .cp-card .cp-ring .sp-icon { width: 24px; height: 24px; }
  .cp-card p { grid-column: 1 / -1; }
  .cp-card .cp-ring { grid-row: auto; }
}

/* ---------- Panels with a heading: battery (pale blue on white); VAT, grants and loans (white on pale blue) ---------- */
.cp-two, .cp-three { display: grid; gap: 20px; }
@media (min-width: 900px) { .cp-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 1000px) { .cp-three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.cp-panel { position: relative; padding: clamp(22px, 3vw, 32px); border-radius: var(--cp-radius); background: var(--paper); box-shadow: var(--cp-shadow); }
.section:not(.section--sky) .cp-panel { background: var(--sky); box-shadow: none; }
.cp-panel h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 12px; line-height: 1.3; }
.cp-panel p { line-height: 1.6; }
.cp-panel p + p, .cp-panel .ticks + p { margin-top: 12px; }
.cp-panel .ticks { margin: 12px 0 0; }
.cp-panel > p:first-of-type + .sp-bars { margin-top: 18px; }
.cp-panel-after { margin-top: 18px; color: var(--ink-soft); }
.cp-bars-gbp { --val: 9.4rem; }
.cp-bars-gbp-s { --val: 4.4rem; }

/* 0% VAT: the window that closes, in the sun gradient. (No sun arc here: the card is narrow and the arc would sit
   behind the rate, and the site's rule is never behind a price.) */
.cp-vat-line { display: grid; grid-template-columns: 3fr 2fr; gap: 3px; margin: 4px 0 18px; }
.cp-vat-line span { display: flex; flex-direction: column; padding: 12px 14px; font-size: .9375rem; line-height: 1.3; border-radius: 10px; }
.cp-vat-line strong { font: 500 2rem/1 var(--display); letter-spacing: -0.02em; margin-bottom: 4px; }
.cp-vat-now { background: var(--cp-sun); color: var(--ink); }
.cp-vat-then { background: var(--sky); color: var(--ink-soft); }
.cp-loan { margin-bottom: 12px; }
.cp-loan strong { display: block; font: 500 2rem/1.1 var(--display); letter-spacing: -0.02em; }
.cp-plan { max-width: 44rem; margin-top: 32px; }
.cp-plan + .notice { margin-top: 22px; max-width: 44rem; }

/* ---------- Costs after installation: two figures on pale blue ---------- */
.page-cost .cp-running { margin-top: 0; gap: 20px; }
@media (min-width: 900px) { .page-cost .cp-running { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; } }
.page-cost .cp-running .key-figure { border-top: 0; padding: clamp(22px, 3vw, 32px); border-radius: var(--cp-radius); background: var(--sky); }
.page-cost .cp-running .key-figure span { color: var(--ink-soft); line-height: 1.6; }

/* ---------- Payback: the 25 years in blocks, dark until it's paid for, sunny after ---------- */
.cp-payback { padding: clamp(22px, 3.4vw, 44px); border-radius: 22px; background: var(--paper); box-shadow: var(--cp-shadow); }
.cp-timeline { position: relative; padding: 76px 0 0; margin-bottom: 40px; }
.cp-tl-track { position: relative; height: 22px; }
.cp-tl-life { position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--ink-soft) 0%, var(--ink-soft) 36%, var(--sun-coral) 44%, var(--sun-amber) 100%);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(4% - 3px), transparent calc(4% - 3px) 4%);
  mask: repeating-linear-gradient(90deg, #000 0 calc(4% - 3px), transparent calc(4% - 3px) 4%); }
/* The 9 to 11 year window, bracketed over the blocks. */
.cp-tl-band { position: absolute; top: -14px; height: 8px; border: 2px solid var(--ink); border-bottom: 0; border-radius: 3px 3px 0 0; }
.cp-tl-mark { position: absolute; top: -12px; bottom: -12px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); }
.cp-tl-labels { position: absolute; left: 0; right: 0; top: 0; height: 58px; }
.cp-tl-label { position: absolute; bottom: 0; display: flex; flex-direction: column; font-size: .9375rem; line-height: 1.3; color: var(--ink-soft); white-space: nowrap; }
.cp-tl-label strong { color: var(--ink); font-size: 1.0625rem; }
.cp-tl-label--band { transform: translateX(-50%); text-align: center; align-items: center; }
.cp-tl-label--mark { padding-left: 14px; }
.cp-tl-label--end { transform: translateX(-100%); text-align: right; align-items: flex-end; }
.cp-tl-axis { position: relative; height: 22px; margin-top: 18px; font-size: .875rem; color: var(--ink-soft); }
.cp-tl-axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.cp-tl-axis span:first-child { transform: none; }
/* Below 900px: the labels sit under the line, each with a key. */
@media (max-width: 899px) {
  .cp-timeline { display: flex; flex-direction: column; padding-top: 18px; }
  .cp-tl-track { order: 1; }
  .cp-tl-axis { order: 2; }
  .cp-tl-labels { position: static; height: auto; display: grid; gap: 12px; margin-top: 28px; order: 3; }
  .cp-tl-label, .cp-tl-label--band, .cp-tl-label--mark, .cp-tl-label--end { left: auto !important; transform: none; text-align: left; align-items: flex-start;
    padding: 0 0 0 30px; white-space: normal; position: relative; }
  .cp-tl-label::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 14px; border-radius: 3px; }
  .cp-tl-label--band::before { height: 7px; border: 2px solid var(--ink); border-bottom: 0; border-radius: 3px 3px 0 0; top: 6px; }
  .cp-tl-label--mark::before { background: var(--ink); width: 3px; left: 7px; height: 18px; top: 2px; }
  .cp-tl-label--end::before { background: var(--cp-sun); }
}
.cp-payback-table { max-width: 44rem; }
.cp-payback-table .data-table-wrap { margin-top: 0; }
/* Phones: the payback table fits inside its card rather than scrolling sideways. */
@media (max-width: 640px) {
  .page-cost .cp-payback-table .data-table { min-width: 0; font-size: .875rem; }
  .page-cost .cp-payback-table .data-table th, .page-cost .cp-payback-table .data-table td { padding: 10px 6px; }
  .page-cost .cp-payback-table .data-table th:first-child, .page-cost .cp-payback-table .data-table td:first-child { padding-left: 0; }
}

.cp-three--figs { margin-top: clamp(36px, 5vw, 52px); }
.cp-fig { padding-top: 20px; border-top: 1px solid var(--line-strong); }
.cp-fig h3 { font: 600 .9375rem/1.3 var(--text); color: var(--star); }
.cp-fig-n { margin: 8px 0 12px; font: 500 clamp(1.75rem, 1.35rem + 1.1vw, 2.25rem)/1.1 var(--display); letter-spacing: -0.025em; color: var(--ink); }
.cp-fig p:last-child { line-height: 1.6; }

/* ---------- Our prices: what we do, two customers' words, and the price card ---------- */
.cp-ours { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px clamp(40px, 6vw, 88px); }
@media (min-width: 1000px) { .cp-ours { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
.cp-ours .prose p + p { margin-top: 14px; }
.cp-reviews { display: grid; gap: 16px; margin-top: 28px; }
@media (min-width: 700px) { .cp-reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cp-review { position: relative; margin: 0; padding: 18px 22px 16px; border-radius: 16px; background: var(--paper); overflow: hidden;
  box-shadow: 0 1px 2px rgba(38, 40, 42, .06), 0 14px 30px -20px rgba(38, 40, 42, .35); }
.cp-review::before { content: ""; position: absolute; top: 14px; right: 16px; width: 40px; height: 40px; opacity: .2; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ec7a4a' transform='rotate(180 12 12)' d='M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z'/%3E%3C/svg%3E") center / contain no-repeat; }
.cp-review-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 10px; padding-right: 44px; font-size: .875rem; color: var(--ink-soft); }
.cp-review-top .stars { color: var(--star); letter-spacing: 2px; font-size: 1rem; }
.cp-review-src { font-weight: 600; color: var(--ink); }
.cp-review blockquote { margin: 0; padding: 0; border: 0; }
.cp-review blockquote p { font: 400 1.125rem/1.45 var(--display); color: var(--ink); }
.cp-review figcaption { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.cp-review-initial { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 600 .9375rem/1 var(--text); color: var(--ink);
  border: 2px solid transparent; background: linear-gradient(var(--paper), var(--paper)) padding-box, linear-gradient(225deg, var(--sun-coral), var(--sun-amber)) border-box; }
.cp-review-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: .9375rem; color: var(--ink-soft); }
.cp-review-who strong { font-weight: 600; color: var(--ink); }
@media (min-width: 1000px) { .cp-ours > .cp-price { position: sticky; top: 108px; } }
@media (max-width: 999px) { .cp-ours > .cp-price { max-width: 30rem; } }