/* pages:start (decision 291). Everything below is for the pages other than the craft pages: the build cuts it per page (css split, lib/pages-css.mjs) into assets/pages.*.css, only the rules that page can use.
   A selector is kept for a page when every class, id, attribute and tag in it can be on that page, so name what a rule styles; a class a script adds must be a whole string in the script. */
/* 382 (140): /questions/ in four groups, each heading clear of the list above it. */
#faq .faq + h2 { margin-top: var(--s4); }
/* ---- Decision 291, page by page (the shared band rules are near the top). */
/* With a mouse a control needs 24 pixels, not a touch screen's 44 (the hit-area rule at the top). */
@media (pointer: fine) {
.disclose > summary { min-height: 36px; }
}
main.pricing-page.banded .extras .credit-line { margin: var(--s2) 0 0; }
@media (min-width: 1000px) {
main.banded > .page { padding-top: var(--s4); }
}
/* /pricing/ (337, 124 step 1): the launch offer, when it closes and the month after, one aligned block under the
   packages, on one lacquer rule (they sat in a two-column grid that put them above the cards, out of line). */
main.pricing-page .price-packages .wrap > :where(.founding, .founding + .more-shown, .founding + .read-more, .cost-next) { margin: 0; padding: 0 0 var(--s1) var(--s3); border: 0; border-left: var(--bw) solid var(--accent); border-radius: 0; background: none; max-width: 46rem; }
main.pricing-page .price-packages .wrap > .founding { margin-top: var(--s4); padding-top: 2px; }
main.pricing-page .price-packages .wrap > :is(.founding + .more-shown, .founding + .read-more) > :last-child { margin-bottom: 0; }
/* /order/ (291 with 275): the form a little wider on a laptop, its choices two side by side, so the page stays in
   three screens with the bands around it. */
@media (min-width: 1000px) {
main.banded .order-form { display: grid; max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s4); align-items: start; grid-auto-flow: row dense; }
main.banded .order-form > * { grid-column: 1 / -1; }
main.banded .order-form > fieldset:has(input[name=package]) { grid-column: 1; grid-row: span 2; }
main.banded .order-form > label:has(select[name=craft]), main.banded .order-form > fieldset:has(input[name=extras]) { grid-column: 2; }
main.banded .order-form > fieldset:has(input[name=domain]) { grid-column: 1; }
main.banded .order-form > fieldset:has(input[name=balance]) { grid-column: 2; }
}
/* /coming-later/ (291 with 275): the form's fields two side by side on a laptop. */
@media (min-width: 1000px) {
main.banded #later-form { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s3); align-items: end; }
main.banded #later-form > * { grid-column: 1 / -1; }
main.banded #later-form > label:has(select[name=trade]), main.banded #later-form > label:has(input[name=email]) { grid-column: 1; }
main.banded #later-form > label:has(textarea) { grid-column: 2; grid-row: 2; }
main.banded #later-form textarea { min-height: 44px; height: 44px; }
}
main.banded #later-form > :is(.read-more, .more-shown) { margin: 0; }
main.banded #later-form > p.small { margin: 0; }
@media (max-width: 999px) {
main.banded form.signup { grid-template-columns: minmax(0, 1fr); }
}
main.banded form.signup > *, main.banded .order-form fieldset { min-width: 0; }
main.banded form.signup select { width: 100%; }
/* 274 and 275 (candidate 3): on a laptop the last band of /pricing/ ("Who this isn't for") and the closing craft band
   of /compare/ and /what-you-get/ set the action block beside what it follows, using the width instead of stacking. */
@media (min-width: 1100px) {
#not-for > .wrap, .demo-close > .wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: var(--s5); align-items: start; }
#not-for > .wrap > :not(.action-block), .demo-close > .wrap > :not(.action-block) { grid-column: 1; }
#not-for > .wrap > .action-block, .demo-close > .wrap > .action-block { grid-column: 2; grid-row: 1 / span 6; margin-top: 0; }
main.pricing-page #not-for > .wrap { display: block; }
}
/* 351: the sign-up card on the deep band is a card in any build and either scheme. The band re-points --ink, --text, --muted, --card and the rest at cream, so a bare
   var(--ink) inside it was cream on the card's own ground (pale on pale: the old [data-freshen] copies here set colour: var(--ink) and so changed nothing). The card
   takes the page's own ground and puts the ground's tokens back (--pn-*, light and dark below), so every label, field, sentence, fold and link inside reads as it does
   on any white band; links lacquer and underlined, the submit a lacquer .btn, a soft shadow and no border (342). */
:root { --pn-ink: #1D1D1B; --pn-muted: #4D4A45; --pn-line: #DEDBD4; --pn-link: #A23B2A; --pn-btn-ink: #FFFFFF; --pn-shadow: 0 10px 30px rgba(0, 0, 0, .28), 0 1px 2px rgba(0, 0, 0, .2); }
@media screen {
#hc-sheet { display: none; }
}
@media print {
html:not(.print-costs) #hc-sheet { display: none; }
html.print-costs body > :not(#hc-sheet) { display: none !important; }
html.print-costs #hc-sheet { display: block !important; font-size: 12pt; color: #000; }
}
/* SITE for decision 326 (118): with the calculator line, the link row and step 1's sentence, home keeps inside 321's
   heights by a slightly tighter band spacing, the same for every home band (the rhythm stays even): 42px above and
   below on a laptop (was 48), 20px on a phone (was 24). Other pages keep 48 and 24. */
main.home { --band-pad: 42px; }
@media (max-width: 700px) {
main.home { --band-pad: 20px; }
}
/* /pricing/'s opening price (a lacquer band: the figure, three facts, the launch line under them). */
.price-decision { padding: var(--s5) 0; }
@media (max-width: 700px) {
.price-decision { padding: var(--s4) 0; }
}
/* home:start (LOOK 2, decisions 339, 342, 345; 125/C section 3), polished by 374 (139 items 1 to 12). Ten bands, class names hm-* (the hero's stage hx-*); the closer on light. */
main.home { --band-pad: 48px; }
@media (max-width: 700px) {
main.home { --band-pad: 32px; }
}
@media (max-width: 700px) {
main.home { font-size: var(--t5); }
}
/* 374 (139 item 7): flat, the card keeps its tint */
/* home:end */
/* l2-money:start (LOOK 2 phase 2; decisions 339, 342, 345; 125/F money pages and 125/B 4.1, 4.3, 4.4, 4.5). /pricing/, /compare/, /order/,
   /order/done/, /features/, /how-it-works/ and /what-you-get/. Components come from lib/l2.mjs and lib/l2-money.mjs; nothing here
   names a light hex, so dark mode follows the tokens. */
/* ---- The one launch-price presentation (pricing band, package cards, order cards). */
.lp { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 var(--s2); max-width: none; }
.lp .lp-fig { font: 400 var(--t0)/.95 var(--serif); letter-spacing: -.025em; font-variant-numeric: lining-nums; color: var(--lacquer); }
.lp .lp-then { font: var(--t6)/1.3 var(--sans); color: var(--graphite); }
.lp .lp-then s { text-decoration-thickness: 1.5px; }
.lp .lp-tag { font: 600 var(--t7)/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--r-pill); background: var(--coral-pale); color: #5A2A1E; align-self: center; }
.lp-card .lp-fig { font-size: 56px; }
.eyebrow-h, .m2-eyebrow { font: 600 var(--t7)/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); margin: 0 0 var(--s2); }
.m2-lead { font-size: var(--t5); max-width: 52ch; margin: 0 0 var(--s3); }
/* ---- /pricing/ */
.m2-price { padding: var(--s6) 0; overflow-x: clip; }
.m2-price .big-figure { color: var(--lacquer); margin: 0 0 var(--s3); }
@media (max-width: 1100px) {
.m2-price .big-figure { font-size: clamp(64px, 11vw, 110px); }
}
@media (max-width: 700px) {
.m2-price { padding: var(--s5) 0; }
.m2-price .big-figure { font-size: 68px; }
}
.m2-price .bf-facts { list-style: none; margin: 0 0 var(--s3); padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: none; }
.m2-price .bf-facts li { margin: 0; max-width: none; padding: 10px 16px; border-radius: var(--r-pill); background: var(--card); box-shadow: var(--card-shadow); font-size: var(--t6); }
.pkg-cards { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; gap: var(--s3); grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
.pkg-cards > li { margin: 0; max-width: none; background: var(--card); box-shadow: var(--card-shadow); border-radius: var(--radius); padding: var(--s3); display: flex; flex-direction: column; gap: var(--s1); }
.pkg-cards > li.main { border-top: 4px solid var(--lacquer); }
.pkg-cards h3 { margin: 0; font: var(--serif-weight) var(--t3)/1.2 var(--serif); }
.pkg-cards .lp-fig { font-size: 52px; }
.pkg-cards p { margin: 0; max-width: none; }
.pkg-cards .btn { width: 100%; justify-content: center; min-height: 48px; }
.pkg-cards li > p:last-child { margin-top: auto; padding-top: var(--s1); }
.price-packages .founding { max-width: 60ch; }
@media (max-width: 900px) {
.pkg-cards { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
.pkg-cards > li { padding: 20px; gap: 6px; }
.pkg-cards .lp { margin-bottom: 4px; }
.pkg-cards .lp-fig { font-size: 48px; }
}
.m2-pay .p-pull { margin: var(--s3) 0; }
.m2-pay .pay-more { margin-top: var(--s2); }
@media (max-width: 700px) {
.m2-pay .p-pull, .m2-pay .p-pull.pf-2 { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.m2-pay .p-pull .pf-fig { font-size: 64px; }
}
.m2-after { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
.after-rows { list-style: none; margin: 0; padding: 0; max-width: none; }
.after-rows > li { margin: 0; max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s2); align-items: baseline; padding: var(--s2) 0; border-top: var(--bw) solid var(--line); }
.after-rows > li:first-child { border-top: 0; padding-top: 0; }
.after-rows .ar-name { font: var(--serif-weight) var(--t3)/1.2 var(--serif); }
.after-rows .ar-sub { display: block; font: 600 var(--t7)/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--graphite); margin-top: 2px; }
.after-rows .ar-fig { font: 400 40px/1 var(--serif); font-variant-numeric: lining-nums; color: var(--lacquer); text-align: right; }
.after-rows .ar-note { grid-column: 1 / -1; font-size: var(--t6); color: var(--graphite); }
@media (max-width: 860px) {
.m2-after { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
}
.price-running .p-receipt { margin-top: var(--s3); }
.price-years .p-pull { margin: var(--s3) 0; }
.price-years .p-pull .pf-fig { color: var(--coral-deep); }
@media (max-width: 700px) {
.price-years .p-pull, .price-years .p-pull.pf-2 { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.price-years .p-pull .pf-fig { font-size: 64px; }
}
/* 367 (135 5d): the design guarantee at full contrast, not grey */
.price-years .years-how { max-width: 52ch; margin: 0 0 var(--s2); }
/* 367 (135 5c) */
/* ---- Receipts: a long value wraps under its label on a phone, a row with details gets a plus. */
.p-receipt details > summary::after { content: "+"; margin-left: 8px; color: var(--graphite); font-weight: 600; }
/* Panel, 26 October (mobile): the "+" in one fixed column at the right edge, however the row wraps. */
.p-receipt .pr-row > details { flex: 1 1 100%; min-width: 0; }
.p-receipt details > summary { position: relative; padding-right: 36px; }
.p-receipt details > summary::after { position: absolute; right: 4px; top: 8px; margin: 0; }
.p-receipt details[open] > summary::after { content: "\2212"; }
@media (max-width: 700px) {
.p-receipt .pr-row.pr-wrap summary { flex-wrap: wrap; }
.p-receipt .pr-row.pr-wrap summary .pr-lead { display: none; }
.p-receipt .pr-row.pr-wrap summary .pr-val { flex-basis: 100%; text-align: left; color: var(--graphite); order: 3; }
.p-receipt .pr-row.pr-wrap summary::after { order: 2; margin-left: auto; }
}
.order-form input[type="text"], .order-form input[type="email"], .order-form input[type="tel"], .order-form select { min-height: 48px; }
.order-form .radios label { display: flex; align-items: center; gap: 10px; min-height: 48px; }
:root:root:root :is(.band-deep, .band-stage) .p-receipt a:not(.btn), :root:root:root :is(.band-deep, .band-stage) .p-receipt .pr-total .pr-val { color: #F5F4F0; }
/* l2-money:end */
/* SITE, LOOK 2 sweep: /pricing/'s price as on home: "From" small above, the figure, "Once." on its own line; the three facts as
   ruled rows (the pills read as uneven outlines). */
.m2-price .pd-pre { font: 600 15px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 var(--s1); color: var(--ink); }
.m2-price .big-figure { margin: 0; }
.m2-price .pd-once { font: var(--serif-weight) var(--t2)/1.1 var(--serif); margin: var(--s1) 0 var(--s3); }
.m2-price .bf-facts { display: block; max-width: 40rem; }
.m2-price .bf-facts li { background: none; box-shadow: none; border-radius: 0; padding: 12px 0; border-bottom: var(--bw) dotted var(--line); }
/* L2 fix 10: at desktop the price figure sits left and the three fact rows and the launch line right (no empty half). */
@media (min-width: 861px) {
.m2-price > .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: var(--s5); align-items: center; }
.m2-price > .wrap > :is(.pd-pre, .big-figure, .pd-once) { grid-column: 1; }
.m2-price > .wrap > .pd-pre { grid-row: 1; align-self: end; }
.m2-price > .wrap > .big-figure { grid-row: 2; }
.m2-price > .wrap > .pd-once { grid-row: 3; align-self: start; margin-bottom: 0; }
.m2-price > .wrap > .bf-facts { grid-column: 2; grid-row: 1 / span 2; margin: 0; max-width: none; }
}
.founding-note { margin-top: 0; margin-bottom: var(--s3); }
/* first in the "How paying works" band */
.pay-band .founding-note { grid-column: 1 / -1; margin: 0 0 var(--s4); max-width: 60ch; }
.pay-band .founding-note .founding { margin: 0; max-width: none; background: var(--card); color: var(--deep-ink); border-left-color: var(--numeral); }
.pay-band .founding-note .founding b { color: var(--deep-ink); }
.pay-band .founding-note .founding-rule { color: var(--deep-muted); }
/* 367 (135 s1 to s4): the /features/ rework. Showcase rows with the real phone screens, the 3 x 2 grid, "What your clients see", and the small fixes further down. */
:root { --f-band: #F5F4F0; --f-bezel-line: transparent; --f-bezel-w: 1px; }
/* 367 (135 s6): the computer as well as the phone. A browser window (a light bar, three dots) behind and to the right of the first phone (the text is on the left), which overlaps its bottom-left corner and leaves the Accept buttons showing; a touch smaller than the phone and with a lighter shadow so it supports. Everything is a share of the pair's width, so it scales down whole. */
:root { --f-win-line: rgba(42, 21, 18, .14); --f-win-bar: #ECEAE6; --f-win-dot: #C9C5BE; }
main.features :is(.way-cards, .extra-cards) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) {
main.features :is(.way-cards, .extra-cards) { grid-template-columns: minmax(0, 1fr); }
}
main.features > section.closing > .wrap { display: block; }
@media (min-width: 1100px) {
main.features > section.closing > .wrap > .action-block { grid-column: auto; grid-row: auto; margin: var(--s4) 0 var(--s3); }
}
/* 394, 395 and 396 (142 item 1a): questions that don't jump. Each group's questions in one column, in reading order, on every accordion (the craft pages' two columns and the old /faq/ grid go); an answer opens in place and pushes down only what is below it. */
@media (min-width: 1100px) {
/* 395 (142 1a): /questions/ (the one banded page with #faq besides home), each group heading to the side of its questions on a laptop; above them on a phone as before. */
main.banded:not(.home) > #faq > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--s5); row-gap: var(--s3); align-items: start; }
/* 428 integration (401 ceiling): rows 24 apart, as 443 and 444 added a question */
main.banded:not(.home) > #faq > .wrap > * { grid-column: 2; min-width: 0; }
main.banded:not(.home) > #faq > .wrap > h2 { grid-column: 1; margin: 0; }
main.banded:not(.home) > #faq > .wrap > .faq { margin-top: 0; }
}
/* pricing-139:start: 374 (139 items 1 to 12; 380) on /pricing/. One light ground and the one Shell tint, flat; no glow, bloom or disc; labels in sentence case;
   on a phone four text sizes (16 body, 22 leads and small headings, 32 headings and figures, 52 the H1 and the one big number, £1,450), and each repeat hidden there only. */
main.pricing-page [data-ground="shell"], main.pricing-page > .band-shell { background-image: none; }
/* 374 (139 items 1 and 7): the Shell flat, no grain or gradient */
main.pricing-page .kicker, main.pricing-page .m2-price .pd-pre, main.pricing-page .m2-eyebrow, main.pricing-page .p-receipt .pr-head, main.pricing-page .after-rows .ar-sub { font: 600 var(--t5)/1.3 var(--sans); letter-spacing: 0; text-transform: none; }
/* 374 (139 item 3): sentence case, no shouting labels */
main.pricing-page .lp .lp-tag { font: 600 var(--t5)/1.3 var(--sans); letter-spacing: 0; text-transform: none; padding: 0; border-radius: 0; background: none; color: var(--lacquer); }
/* 374 (139 items 3 and 7): "Launch offer" as plain words, not a pill */
main.pricing-page .m2-price .bf-facts li, main.pricing-page .e358-list li { border-top: 0; border-bottom: var(--bw) solid var(--line-strong); }
/* 374 (139 item 7): lists divided by thin lines */
main.pricing-page .m2-price .bf-facts { border-top: var(--bw) solid var(--line-strong); }
/* 374 (139 item 7): flat, a hairline not a card: the packages, the receipts, the launch note and the disclosure buttons */
main.pricing-page .pkg-cards > li { background: none; box-shadow: none; border-radius: 0; border-top: var(--bw) solid var(--line-strong); padding: var(--s2) 0 0; }
main.pricing-page .pkg-cards > li.main { border-top: 2px solid var(--lacquer); }
main.pricing-page .p-receipt { background: none; box-shadow: none; border-radius: 0; padding: var(--s2) 0 0; border-top: var(--bw) solid var(--line-strong); }
:root main.pricing-page .disclose > summary { box-shadow: none; }
/* glow-up, 26 October: the shell bar, as everywhere */
main.pricing-page .pay-band .founding-note .founding { background: none; color: var(--ink); border-left: 2px solid var(--lacquer); border-radius: 0; padding: 0 0 0 var(--s2); }
main.pricing-page .pay-band .founding-note .founding b { color: var(--ink); }
main.pricing-page .pay-band .founding-note .founding-rule { color: var(--graphite); }
main.pricing-page .m2-pay .p-pull .pf-fig, main.pricing-page .price-years .p-pull .pf-fig { color: var(--lacquer); }
/* the pay band is light now: its figures in lacquer, as the address's (345: coral only at 48px and over) */
main.pricing-page .pr-close .action-block { margin-bottom: 0; }
main.pricing-page .pr-close .ab-row + .ab-chat { margin-top: var(--s3); }
/* 374 (139 review 8): 24px between the comparison link and "Not sure it's right for you?" */
main.pricing-page :is(.p-pull .pf-fig, .p-bigline .pb-line) { font-size: var(--t2); line-height: 1.1; }
/* 374 (139 item 12, 380): the extras run across the width, not a half column under the price with an empty half beside it */
@media (max-width: 700px) {
main.pricing-page { font-size: var(--t5); }
/* 374 (139 item 9): body text 16 on a phone, as home's */
main.pricing-page :is(.crumbs, .small, .bf-facts li, .lp .lp-then, .launch-line, .ar-note, .pb-support, .pf-line, .founding, .founding-rule, p, li) { font-size: var(--t5); }
main.pricing-page > .page .kicker { display: none; }
/* 374 (139 item 5): "Pricing" is the breadcrumb just above; hidden on a phone only */
main.pricing-page > .page h1 { font-size: clamp(50px, 13.4vw, 80px); line-height: .95; }
main.pricing-page > .page .lead, main.pricing-page .price-extras .band-lead, main.pricing-page .pkg-cards h3, main.pricing-page .after-rows .ar-name, main.pricing-page .risk h3, main.pricing-page .chat-card-h, main.pricing-page .price-extras .addon h4, main.pricing-page .own-rent .own-col h3 { font: var(--serif-weight) 22px/1.3 var(--serif); }
/* 428 integration: M's renting and owning headings join the 22 step */
main.pricing-page .m2-price .big-figure { font-size: clamp(50px, 13.4vw, 68px); }
/* 374 (139 item 4): the page's one big number, at the H1's size */
main.pricing-page :is(h2, .pd-once, .lp .lp-fig, .after-rows .ar-fig, .p-pull .pf-fig, .p-bigline .pb-line) { font-size: var(--t2); line-height: 1.1; }
/* 374 (139 item 4): every other figure at heading size */
main.pricing-page.pricing-page h2.m2-eyebrow.m2-eyebrow { font: 600 var(--t5)/1.3 var(--sans); }
/* 374 (139 item 5): the four built extras, names and prices, are the extras band's own list below; the logo row stays */
/* 399 (C, point 29): Signature's own price is shown on a phone now (374 hid it, as the big figure and launch line sit just above); the rule is gone */
main.pricing-page .pkg-cards { gap: var(--s3); }
main.pricing-page .pkg-cards > li { padding: var(--s2) 0 0; gap: var(--s1); }
/* 374 (139 items 4 and 8): the figures as rows, the figure beside its line at heading size */
main.pricing-page :is(.m2-pay, .price-years) .p-pull { gap: 0; margin: var(--s2) 0; border-top: var(--bw) solid var(--line-strong); }
main.pricing-page :is(.m2-pay, .price-years) .p-pull > li { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: var(--s2); align-items: baseline; padding: 12px 0; border-bottom: var(--bw) solid var(--line-strong); }
main.pricing-page :is(.m2-pay, .price-years) .p-pull .pf-fig { margin: 0; }
/* 374 (139 review 4): no boxes on the tint, thin lines between, each item its own height */
main.pricing-page .price-years .p-pull > li:first-child { display: none; }
/* 374 (139 item 5): £650 a year is the line above the figures; hidden on a phone only. The founding rule stays (review 2: its terms are said nowhere else) */
main.pricing-page .pkg-cards { gap: var(--s2); }
main.pricing-page .pkg-cards li > p:last-child { padding-top: 4px; }
main.pricing-page .after-rows > li { padding: 12px 0; }
main.pricing-page .after-rows .ar-fig { font: var(--serif-weight) 22px/1.3 var(--serif); }
main.pricing-page :is(.m2-lead, .not-for-line, .m2-price .bf-facts, .m2-price .pd-once) { margin-bottom: var(--s2); }
main.pricing-page :is(.credit-line, .disappear, .pr-close .action-block, .price-running .p-receipt, .m2-price .launch-line) { margin-top: var(--s2); }
main.pricing-page { line-height: 1.5; }
main.pricing-page :is(p, li, .small) { line-height: 1.5; }
/* 374 (139 item 8): a little tighter, nothing cut */
main.pricing-page .m2-price .bf-facts li:is(:nth-child(2), :nth-child(3)) { display: none; }
/* 374 (139 item 5): the care plan and the payment terms are said in full in "What you pay after launch" and "How paying works"; hidden on a phone only */
main.pricing-page .pay-band .founding-note { margin-bottom: var(--s3); }
main.pricing-page :is(.m2-pay, .price-years) .p-pull > li { grid-template-columns: 56px minmax(0, 1fr); }
main.pricing-page .pkg-cards > li:not(.main) .btn { display: inline; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--lacquer); font: 600 var(--t5)/1.5 var(--sans); text-decoration: underline; text-underline-offset: 3px; width: auto; }
main.pricing-page .pkg-cards > li:not(.main) .btn::after { content: " \2192"; }
main.pricing-page .after-rows > li + li + li .ar-sub { display: none; }
/* 374 (139 item 5): "Without the care plan" is the row above's; hidden on a phone only */
/* 374 (139 item 5): the launch offer note (£1,450 again) after "How paying works" on a phone, so £1,450 shows once in the first two screens; order only, words unchanged */
main.pricing-page .m2-pay > .wrap { display: flex; flex-direction: column; }
main.pricing-page .m2-pay > .wrap > * { margin-top: 0; }
main.pricing-page section.m2-pay > .wrap > .founding-note { order: 9; margin: var(--s4) 0 0; padding-top: var(--s3); border-top: var(--bw) solid var(--line-strong); }
/* 374 (139 review 5): the launch offer apart from "Pay over time", not read as its content */
main.pricing-page :is(.addon, .disclose-body, .guarantee) h3 { font: var(--serif-weight) 22px/1.3 var(--serif); }
}
/* pricing-139:end */
/* pages-380:start: 387 (142.5; 139 items 1 to 12 and 380) on /features/, /how-it-works/ and /compare/, as pricing-139: the Shell flat; labels in sentence case; flat hairlines, no cards on tints;
   at 1440 no lopsided columns (the shorter at least two thirds of the taller) and no empty half screens; on a phone 16px body, 22 leads, the kicker hidden (the breadcrumb says it). */
:is(main.features, main.how, main.compare-draft) :is([data-ground="shell"], .band-shell), :is(main.features, main.how, main.compare-draft) > .page { background-image: none; }
/* 387 (139 items 1 and 7): the Shell flat, no grain or gradient */
:is(main.features, main.how, main.compare-draft) :is(.kicker, .jump-h, .f-label-grey, .flow-steps .who, .p-time .pt-phase, .p-pull .pf-label, .p-ba .ba-label, .p-3way thead th, .p-3way td::before, .p-receipt .pr-group, .sc-cap, .hc-against .ha-l) { font: 600 var(--t5)/1.3 var(--sans); letter-spacing: 0; text-transform: none; }
/* 387 (139 item 3): sentence case, no shouting labels */
:root :is(main.features, main.how, main.compare-draft) .disclose > summary { box-shadow: none; }
/* 387 (139 item 2): no disc behind the devices */
:root main.features :is(.way-cards, .extra-cards) > li { background: none; box-shadow: none; border: 0; border-top: var(--bw) solid var(--line-strong); border-radius: 0; padding: var(--s2) 0 0; }
@media (min-width: 1000px) {
main.features :is(.way-cards, .extra-cards) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
:is(main.features, main.how, main.compare-draft) { font-size: var(--t5); line-height: 1.5; }
/* 387 (139 item 9): body text 16 on a phone */
:is(main.features, main.how, main.compare-draft) :is(.crumbs, .small, p, li, .f-grid p, .way-cards p, .extra-cards p, .flow-steps li, .pt-line, .pf-line, .f-lock, .f-pair-line, .hc-against .ha-t) { font-size: var(--t5); }
:is(main.features, main.how, main.compare-draft) > .page .kicker { display: none; }
/* 387 (139 item 5): the breadcrumb above says it; hidden on a phone only */
:is(main.features, main.how, main.compare-draft) > .page h1 { font-size: clamp(50px, 13.4vw, 80px); line-height: .95; }
:is(main.features, main.how, main.compare-draft) > .page .lead { font: var(--serif-weight) 22px/1.3 var(--serif); }
:is(main.features, main.how, main.compare-draft) :is(h3, .f-text h3, .p-hub .hub-name, .p-time .pt-title, .cmp-parts, .cmp-whole, .p-ba .ba-after, .p-3way tbody th) { font: var(--serif-weight) 22px/1.3 var(--serif); }
:is(main.features, main.how, main.compare-draft) :is(h2, .p-time > li:last-child .pt-title, .extra-cards p.fig, .p-pull .pf-fig, .hc-against .ha-f, .p-receipt .pr-total .pr-val) { font-size: var(--t2); line-height: 1.1; }
}
/* 387 (139 item 2): the source tables' heads and the "New" tag in sentence case */
@media (max-width: 700px) {
:is(main.features, main.how, main.compare-draft) :is(.jump a, .jump-links a, .tag-new, .p-pill, .calc-hint, .craft-tile span, .p-time summary, .acct-job, label.check span, .p-3way td, .p-3way th, a.src, .stack-table td, .stack-table th) { font-size: var(--t5); }
}
/* 427: "Founding price: 9 places left", beside the price on home, pricing and the order page. A plain line, no clock. */
.founding-left { font-size: var(--t5); margin: 0 0 var(--s3); max-width: 46ch; }
.founding-left b { color: var(--lacquer); }
/* 425 A */
/* Buy, don't rent (home and /pricing/), the short three-year sum and "We move you over". Two plain columns, a small table. */
.own-lead { font-size: var(--t5); max-width: 56ch; margin: 0 0 var(--s4); }
.own-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); max-width: 60ch; }
.own-list li { margin: 0; padding-left: 18px; position: relative; }
.own-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.own-list.own-yes li::before, .move-list li::before { background: var(--lacquer); }
.move-links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: var(--s4) 0 0; }
.own-line { max-width: 56ch; margin: var(--s3) 0 0; }
/* 428 M: one short line, tucked under the lead (the page within its height ceiling) */
.lead:has(+ .move-line) { margin-bottom: 6px; }
/* Ian, 25 October: /pricing/'s detail folds on a phone; the summary is the section's heading with one line under it. */
details.pr-phone-fold > summary { list-style: none; cursor: pointer; position: relative; padding-right: 36px; }
details.pr-phone-fold > summary::-webkit-details-marker { display: none; }
details.pr-phone-fold > summary .pr-open-h { margin-bottom: 4px; }
details.pr-phone-fold > summary .pf-line { display: block; color: var(--muted); font-size: var(--t5); }
details.pr-phone-fold > summary::after { content: ''; position: absolute; right: 6px; top: 10px; width: 10px; height: 10px; border-right: 2px solid var(--lacquer); border-bottom: 2px solid var(--lacquer); transform: rotate(45deg); transition: transform .2s; }
details.pr-phone-fold[open] > summary::after { transform: rotate(-135deg); top: 16px; }
details.pr-phone-fold:not([open]) { padding-bottom: var(--s2); border-bottom: 1px solid var(--line); }
@media (min-width: 701px) {
details.pr-phone-fold > summary { cursor: default; pointer-events: none; padding-right: 0; }
details.pr-phone-fold > summary::after, details.pr-phone-fold > summary .pf-line { display: none; }
}
/* 425 C, item 4: the design guarantee keeps its full ink inside the risk fold on /pricing/. */
.risk-more .guarantee { color: var(--ink); }
.risk-more .guarantee .fold-h, .price-more .fold-h { margin: var(--s3) 0 4px; }
/* 425 C, item 4: the extras moved into a fold, so their card headings keep the phone pricing scale (374: four text sizes at most at 390). */
@media (max-width: 700px) {
main.pricing-page .extras-more .addon h4 { font: var(--serif-weight) 22px/1.3 var(--serif); }
}
.care-need { margin: var(--s3) 0 0; max-width: 760px; }
:root main.pricing-page .care-need > details { box-shadow: none; }
/* 428 integration (401 ceilings): with 445's general line and 441's lead, /see-yours/ takes body text 16 on a phone, as home and /pricing/ do, and its two bands sit tighter. */
@media (max-width: 699px) {
:is(.see-what, .see-ask) { padding-top: var(--s3); padding-bottom: var(--s3); }
.page:has(.see-general) :is(.see-general, .lead), .see-what :is(.see-get li, .see-terms li) { font-size: var(--t5); }
:is(.see-get, .see-terms) { margin-top: var(--s2); }
}
/* 455: the rented set's fold sits inside the calculator with no extra gap, to keep /compare/'s run within RUN_ALLOW */
.calc-hint:has(+ .rs-fold) { margin: 0 0 8px; }
/* Ian, 26 October: /pricing/'s web address as three short points, side by side from tablet width. */
.addr-points { list-style: none; padding: 0; margin: var(--s3) 0; display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); max-width: none; }
.addr-points > li { margin: 0; padding: var(--s3); border: var(--bw) solid var(--line); border-radius: var(--radius); background: var(--white); }
.addr-points > li b { display: block; margin: 0 0 4px; }
/* Panel, 26 October: the plan we suggest stands out by fill, not shadow (no shadows on a money page): a white card with a
   lacquer edge on the shell ground; the other two stay open on the ground. */
:root main.pricing-page .pkg-cards > li.main { background: var(--white); border: var(--bw) solid var(--lacquer); border-top-width: 4px; border-radius: var(--radius); padding: var(--s3); box-shadow: none; }
@media (max-width: 900px) {
:root main.pricing-page .pkg-cards > li.main { padding: 20px; }
}
/* Panel, 26 October (design): /pricing/'s lower half was four look-alike pale boxes. The extras sit five in a row on a
   wide screen; "Your risk, and the design guarantee" is the page's one dark band (oxblood, its grain), the guarantee a
   lacquer card in it; "Who this isn't for" drops its box, so its four cards sit on the ground. Flat: no shadows. */
@media (min-width: 1100px) {
main.pricing-page .price-more .addons:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s2); }
}
:root main.pricing-page .pr-open.risk-more { background-color: var(--oxblood); background-image: var(--grain-light); border-color: var(--oxblood); color: var(--deep-ink); --ink: var(--deep-ink); --text: var(--deep-ink); --graphite: var(--deep-muted); --muted: var(--deep-muted); --line: rgba(245, 244, 240, .22); --line-strong: rgba(245, 244, 240, .4); --tick-ink: var(--numeral); }
:root main.pricing-page .pr-open.risk-more :is(h2, h3, p, li, b, strong) { color: inherit; }
:root main.pricing-page .pr-open.risk-more a:not(.btn) { color: var(--numeral); }
:root main.pricing-page .pr-open.risk-more .guarantee { margin-top: var(--s3); padding: var(--s3); border: 0; border-radius: var(--radius); background: var(--lacquer); color: #FFFCFA; }
:root main.pricing-page .pr-open.risk-more .guarantee :is(p, b, .fold-h) { color: #FFFCFA; }
:root main.pricing-page .pr-open.notfor-more { background: none; border: 0; padding-left: 0; padding-right: 0; }