/* 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) {
.demo-chips a { min-height: 36px; }
.disclose > summary { min-height: 36px; }
}
/* /compare/: the line by line is the band's one box, so it needs no card of its own on the band. */
main.compare-draft.banded .lbl-card { background: none; border: 0; padding: 0; border-radius: 0; }
main.compare-draft.banded .q-faq { margin: var(--s2) 0; }
main.compare-draft .better { margin: var(--s3) 0 var(--s2); }
main.compare-draft .better h3 { margin-bottom: var(--s1); }
@media (min-width: 1000px) {
main.banded > .page { padding-top: var(--s4); }
}
/* /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; }
main.compare-draft.banded > .page .lead { margin-bottom: var(--s1); }
main.compare-draft.banded > .page .approve-line { margin: 0 0 var(--s2); }
main.compare-draft.banded > .page .action-block { margin: var(--s3) 0 var(--s2); }
@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; }
}
/* 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); }
.seg-radios { display: flex; flex-wrap: wrap; gap: 8px; }
.seg-radios label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; border: var(--bw) solid var(--line); border-radius: var(--r2); background: var(--white); cursor: pointer; font-size: var(--t5); }
.seg-radios label:has(input:checked) { border-color: var(--lacquer); box-shadow: inset 0 0 0 1px var(--lacquer); }
.seg-radios input { margin: 0; accent-color: var(--lacquer); }
.hc-boxes { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: end; }
.hc-in { display: grid; gap: 2px; font-size: var(--t5); }
.hc-l { color: var(--graphite); font-size: var(--t5); }
.hiddencalc .calc-in { position: relative; margin-top: 0; }
.hiddencalc .calc-in input { width: 7.5rem; }
.hiddencalc .calc-in .cur { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--graphite); pointer-events: none; font-weight: 500; }
.hiddencalc .calc-in.money input { padding-left: 26px; }
.hc-share { display: grid; gap: 6px; margin-top: var(--s2); }
.hc-rows { display: grid; }
.hc-row { display: grid; gap: 6px; padding: 14px 0; border-bottom: var(--bw) solid var(--line); }
.hc-row h3 { margin: 0; font-size: var(--t4); }
.hc-row p { margin: 0; }
.hc-n { color: var(--graphite); }
.hc-ours { font-size: var(--t5); color: var(--graphite); border-left: var(--bw) solid var(--lacquer); padding-left: 10px; }
.hc-o { font-weight: 600; }
.hc-extras { margin-top: var(--s3); }
.hc-result .stack-table caption, .hc-years caption { text-align: left; font-weight: 600; padding-bottom: var(--s1); }
.hc-result .hc-in { margin: 0 0 var(--s1); }
.hc-be { margin: var(--s3) 0 var(--s2); padding: var(--s2) var(--s3); border-radius: var(--r2); background: color-mix(in srgb, var(--lacquer) 7%, transparent); }
.hc-be p { margin: 0 0 6px; }
.hc-be ul { margin: 0 0 6px; padding-left: 1.2em; }
.hc-promise { font-weight: 600; margin-bottom: 0; }
.hc-share-out { margin-top: var(--s4); display: grid; gap: var(--s2); justify-items: start; }
.hc-share-out h3 { margin: 0; }
.hc-share-out form { width: 100%; }
.hc-box { border: 0; border-top: var(--bw) solid var(--ink); border-radius: 0; background: none; box-shadow: none; padding: var(--s3) 0 0; margin: var(--s4) 0 var(--s3); }
.hc-box h3 { margin: 0 0 6px; }
.hc-box p { margin: 0; }
.hc-sources, .hc-tools { padding-left: 1.2em; font-size: var(--t5); }
.hc-sources li, .hc-tools li { margin-bottom: 6px; }
.hc-tools-h { margin: var(--s2) 0 var(--s1); font-weight: 600; }
/* 326 (C6.1): the tool lists, in the fold only */
.hon-table th[scope=row] { font-weight: 600; }
@media (min-width: 800px) {
.hc-row { grid-template-columns: 1fr 13rem; column-gap: var(--s3); }
.hc-row > * { grid-column: 1; }
.hc-row > .hc-o { grid-column: 2; grid-row: 1 / span 4; align-self: center; text-align: right; }
}
@media (max-width: 700px) {
.seg-radios label { flex: 1 1 auto; }
.hc-eg, .hc-result-t, .hc-years { display: table; }
}
@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; }
html.print-costs #hc-sheet .hc-be { background: none; padding: 0; }
}
/* 326 (118, C6.1): /compare/ within 6.5 laptop screens as it loads: the hidden-costs band's heading sits left of its two
   intro lines, as the page's other bands do; everything below runs full width. */
@media (min-width: 1000px) {
main.compare-draft .hiddencalc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--s5); align-items: start; }
main.compare-draft .hiddencalc > * { grid-column: 1 / -1; min-width: 0; }
main.compare-draft .hiddencalc > h2 { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
main.compare-draft .hiddencalc > h2 ~ p { grid-column: 2; }
}
/* 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; }
}
/* /compare/: the pairs under the one movement are plain rows, the finished one marked by a lacquer rule, not a box. */
.pairs .pair .after { border: 0; border-left: 3px solid var(--accent); border-radius: 0; padding: 2px 0 2px var(--s2); }
.pairs .pair .before { padding-left: 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); }
}
.hc-against { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s2); margin: var(--s2) 0; padding: var(--s3); border-radius: var(--radius); background: var(--lacquer); color: #FFFFFF; max-width: 560px; }
.hc-against .ha-l { font: 600 var(--t7)/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.hc-against .ha-f { font: 400 40px/1 var(--serif); }
.hc-against .ha-t { flex-basis: 100%; font-size: var(--t6); }
.hc-sticky { display: none; }
@media (max-width: 700px) {
.hc-sticky.on { display: flex; position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 30; align-items: baseline; justify-content: space-between; gap: 6px; padding: 10px 16px; border-radius: var(--r-pill); background: var(--oxblood); color: var(--deep-ink, #F5F4F0); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); font-size: var(--t6); }
.hc-sticky .hs-f { font: 400 22px/1 var(--serif); color: var(--coral); }
}
.hc-calc .hc-rows { display: grid; gap: var(--s2); }
.p-3way.hon-table .tw-us { box-shadow: 0 14px 30px rgba(42, 21, 18, .12); border: 0; background: var(--card); }
.p-3way.hon-table thead .tw-us { background: var(--lacquer); color: #FFFFFF; border-radius: var(--r2) var(--r2) 0 0; }
.p-3way.hon-table tbody tr:last-child .tw-us { border: 0; }
@media (max-width: 700px) {
.p-3way.hon-table tr.tw-long { grid-template-columns: minmax(0, 1fr); }
.p-3way.hon-table td::before { content: attr(data-col); }
}
/* A phone's table captions stay a line, not a word to a line; the worked example's slip is tight. */
.hc-result caption { display: block; width: 100%; text-align: left; caption-side: top; }
.hc-against { margin: var(--s1) 0 0; padding: var(--s2); }
.honest-2 .p-3way thead { }
.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; }
.hc-sticky .hs-f { color: var(--cream); }
@media (max-width: 700px) {
:root:root:root .p-3way.hon-table td.tw-us { color: var(--ink); background: var(--card); }
:root:root:root .p-3way.hon-table td.tw-us::before { color: var(--graphite); }
.mess .p-ba { gap: var(--s1); }
.mess .p-ba .ba-after, .mess .p-ba .ba-before { padding-top: 10px; padding-bottom: 10px; }
.hc-result .stack-table th, .hc-result .stack-table td { padding-top: 1px; padding-bottom: 1px; }
main .calc-sec.hc-sec { padding-top: 44px; padding-bottom: 36px; }
}
/* L2 fix 8: the three-way table on a phone is one consistent layout, a stacked block per row, every cell inside the gutters (Finisher's cell marked by a lacquer edge, no overhanging lift). */
@media (max-width: 700px) {
.p-3way tbody tr, .p-3way.hon-table tbody tr, .p-3way.hon-table tr.tw-long { grid-template-columns: minmax(0, 1fr); }
.p-3way td, .p-3way.hon-table td { min-width: 0; margin: 0; overflow-wrap: anywhere; padding: 7px 12px; }
.p-3way td, .p-3way.hon-table td { display: grid; grid-template-columns: minmax(0, 7.2em) minmax(0, 1fr); column-gap: 10px; align-items: baseline; }
.p-3way td::before, .p-3way.hon-table td::before { margin: 0; }
.p-3way tbody tr, .p-3way.hon-table tbody tr { gap: 4px; padding: var(--s2) 0; }
.p-3way tbody tr td.tw-us, .p-3way.hon-table tbody tr td.tw-us, .p-3way.hon-table tbody tr:last-child td.tw-us { box-shadow: none; border: 0; border-left: 4px solid var(--lacquer); padding: 7px 12px 7px 8px; }
}
/* 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: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 7): a link between hairlines, not a card */
:is(main.features, main.how, main.compare-draft) .demo-chips { display: flex; flex-wrap: wrap; gap: 0 var(--s3); }
/* 387 (139 item 6): the chips as a plain list of links */
:is(main.features, main.how, main.compare-draft) .demo-chips a { min-height: 44px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--lacquer); text-decoration: underline; text-underline-offset: 3px; }
/* 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)); }
}
/* /compare/ */
main.compare-draft .cmp-parts { margin: var(--s3) 0 var(--s1); font: var(--serif-weight) var(--t3)/1.35 var(--serif); color: var(--graphite); }
/* 387 (380): the five tools as one line, as home's .hm-parts */
main.compare-draft .cmp-whole { margin: 0 0 var(--s3); font: var(--serif-weight) var(--t3)/1.35 var(--serif); color: var(--ink); }
/* 387 (139 item 7): the Office line as text, not a card */
main.compare-draft .p-ba .ba-glyph { display: none; }
/* 387 (139 item 6): no drawn arrow between before and after */
main.compare-draft .p-ba > li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s4); border-top: var(--bw) solid var(--line-strong); padding-top: var(--s2); }
main.compare-draft .p-ba .ba-before { padding: 0; }
main.compare-draft .p-ba .ba-after { background: none; box-shadow: none; border-radius: 0; padding: 0; }
/* 387 (139 item 7): flat */
:root main.compare-draft .cost-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; }
/* 387 (139 item 7) */
@media (min-width: 1000px) {
main.compare-draft .cost-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 701px) {
main.compare-draft .whole-stack .wrap { display: block; }
/* 387 (380): one column now the picture beside it is gone */
main.compare-draft .hiddencalc { display: block; }
main.compare-draft .hiddencalc > h2 { margin: 0 0 var(--s1); }
}
main.compare-draft .hc-against { max-width: none; background: none; color: var(--ink); border-radius: 0; border-left: 2px solid var(--lacquer); padding: 0 0 0 var(--s2); margin-top: var(--s3); }
main.compare-draft .hc-against .ha-f { font-size: var(--t2); color: var(--lacquer); }
/* 387 (139 item 7): the comparison as a ruled line, not a lacquer card */
main.compare-draft > section.hc-calc[data-costs-part] { padding-top: 0; }
/* 387 (380, 139 item 12): the calculator's parts follow on, not 96px apart on one ground */
main.compare-draft :is(.hc-be, .hc-box) { background: none; box-shadow: none; border-radius: 0; border-top: var(--bw) solid var(--line-strong); padding-left: 0; padding-right: 0; }
/* 387 (139 item 7) */
main.compare-draft > section.honest { background-image: none; }
main.compare-draft .p-3way.hon-table .tw-us { background: none; box-shadow: none; border-left: 0; border-right: 0; }
main.compare-draft .p-3way.hon-table thead .tw-us { background: none; color: var(--lacquer); border-top: 0; border-radius: 0; border-bottom: var(--bw) solid var(--ink); }
main.compare-draft .p-3way.hon-table tbody tr:last-child .tw-us { border-bottom: var(--bw) solid var(--line); border-radius: 0; }
/* 387 (139 item 7): the Finisher column marked by its lacquer heading only */
main.compare-draft .p-3way tbody .tw-us { font-weight: 600; }
/* 387 (139 item 4): heading size, not display */
main.compare-draft .lbl-card { background: none; box-shadow: none; }
:root main.compare-draft .faq > details { background: none; box-shadow: none; border: 0; border-top: var(--bw) solid var(--line-strong); border-bottom: var(--bw) solid var(--line-strong); border-radius: 0; }
/* 387 (139 item 7): the question row flat; its words unchanged */
main.compare-draft .demo-close h2 { font-size: var(--t2); }
@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 items 4 and 9): headings and figures at the one 32 step */
main.compare-draft .p-ba > li { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
:root:root:root main.compare-draft .p-3way.hon-table td { background: none; border-radius: 0; border-top: var(--bw) solid var(--line); padding: 4px 0; }
/* 4px: keeps the honest band under 339's 1,200px phone run with 16px cells */
:root:root:root main.compare-draft .p-3way.hon-table td.tw-us { background: none; color: var(--ink); font-weight: 600; }
}
/* 387 (380 columns): the phone screens in the alternating rows show their top part, so each phone is about as tall as the text beside it (was 0.57 to 0.6 of it) */
main.compare-draft .hc-years thead th { font: 600 var(--t5)/1.3 var(--sans); letter-spacing: 0; text-transform: none; }
/* 387 (139 item 2): the years table's column heads in sentence case, as the other labels */
main.compare-draft :is(.stack-table, .grid-table) thead th, main.features .tag-new { font: 600 var(--t5)/1.3 var(--sans); letter-spacing: 0; text-transform: none; }
/* 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); }
}
.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; }
/* 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; }
.calc-hint + .rs-fold { margin: 0; }
.rs-fold + .hc-be { margin-top: 0; }
/* Ian, 25 October: the cost calculator answers first. Three questions beside one answer card on oxblood: the yearly cost in
   coral at display size, renting against the one payment as two bars over five years (renting's three-year mark a notch on
   its bar), the verdict and the admin a week that pays for the difference. Every other number is folded below. */
.hc-lead .kicker { margin-bottom: var(--s1); }
.hc-lead .hc-top { margin: 0 0 var(--s1); max-width: 18ch; }
.hc-sub { font-size: var(--t4); color: var(--graphite); margin: 0 0 var(--s4); max-width: var(--measure); }
.hc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); align-items: start; }
@media (min-width: 960px) {
.hc-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s5); }
.hc-answer { position: sticky; top: 96px; }
}
.hc-ask .sc-craft { display: grid; gap: 6px; font-weight: 600; margin: 0 0 var(--s3); }
.hc-ask .sc-craft select { min-height: 48px; font-size: var(--t5); }
.hc-ask .hc-start { margin: 0 0 var(--s3); }
.hc-ask .hc-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); margin: 0 0 var(--s2); }
.hc-ask .hc-eg-line { margin: 0; }
.hc-answer { background: var(--deep); color: var(--deep-ink); border-radius: var(--radius); padding: var(--s4); }
/* 374 and 387: no shadow on the money pages */
.hc-answer p { margin: 0; }
.hca-l { font-size: var(--t5); color: var(--deep-muted); }
.hca-big { font-family: var(--serif); font-weight: var(--serif-weight); line-height: 1; margin: 6px 0 var(--s2) !important; }
.hca-big [data-a="total"] { font-size: clamp(52px, 7vw, 88px); color: var(--numeral); letter-spacing: -.01em; }
.hca-unit { font-size: var(--t3); color: var(--deep-ink); }
.hca-line { font-size: var(--t4); line-height: 1.45; }
.hca-line b { color: var(--deep-ink); }
.hca-note { font-size: var(--t6); color: var(--deep-muted); margin-top: 6px !important; }
.hca-bars { margin: var(--s3) 0 !important; padding: var(--s3) 0; border-top: 1px solid rgba(245, 244, 240, .2); border-bottom: 1px solid rgba(245, 244, 240, .2); display: grid; gap: var(--s2); }
.hca-h { font-size: var(--t6); color: var(--deep-muted); }
.hca-bar { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 4px var(--s2); align-items: center; }
.hb-name { font-weight: 600; font-size: var(--t5); }
.hb-track { position: relative; height: 14px; border-radius: 999px; background: rgba(245, 244, 240, .12); }
.hb-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--deep-muted); transition: width .3s ease; }
.hb-us .hb-track i { background: var(--numeral); }
.hb-track s { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--deep-ink); transition: left .3s ease; }
.hb-fig { grid-column: 2; font-size: var(--t6); color: var(--deep-muted); }
.hb-fig b { color: var(--deep-ink); font-size: var(--t5); }
.hca-verdict { font-size: var(--t5); line-height: 1.5; }
.hca-payback { font-family: var(--serif); font-size: var(--t3); line-height: 1.25; margin-top: var(--s2) !important; color: var(--deep-ink); }
.hca-promise { font-size: var(--t6); color: var(--deep-muted); margin-top: var(--s2) !important; }
.hca-act { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; margin-top: var(--s3); }
.hc-answer .arrow-link { color: var(--deep-ink); }
.hc-answer .btn { background: var(--numeral); color: var(--oxblood); border-color: var(--numeral); }
.hc-answer .btn:hover { background: var(--deep-ink); border-color: var(--deep-ink); color: var(--oxblood); }
.hc-adds-l { margin: 0 0 var(--s2); color: var(--graphite); }
@media (max-width: 600px) {
.hc-answer { padding: var(--s3); }
.hca-bar { grid-template-columns: minmax(0, 1fr); }
.hb-fig { grid-column: 1; }
.hc-ask .hc-quick { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
.hb-track i, .hb-track s { transition: none; }
}
.hc-start .seg-radios { display: flex; flex-wrap: wrap; gap: var(--s1); }
.hc-start .seg-radios label { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 14px; }
.hc-start .seg-radios label span b { display: block; }
@media (max-width: 600px) {
.hc-start .seg-radios label { padding: 10px; }
}
@media (min-width: 960px) {
.hc-grid > .hc-ask { grid-column: 1; grid-row: 1; }
.hc-grid > .hc-answer { grid-column: 2; grid-row: 1 / span 2; }
.hc-grid > .hc-counts-box { grid-column: 1; grid-row: 2; }
}
.hc-counts-h { margin-top: 0 !important; }
.hc-counts-h { margin: var(--s3) 0 var(--s1); font-weight: 600; }
.hc-counts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hc-counts li { position: relative; padding-left: 22px; margin: 0; color: var(--graphite); }
.hc-counts li::before { content: ''; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.hb-rent .hb-track i::after { content: ''; position: absolute; right: -10px; top: 50%; width: 0; height: 0; margin-top: -6px; border-left: 9px solid var(--deep-muted); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.hc-start-line { margin: 0; }
@media (min-width: 960px) {
.hc-grid { row-gap: var(--s3); }
}
@media (min-width: 960px) {
.hc-grid { row-gap: var(--s3); }
}
.hca-fig { display: grid; gap: 6px; }
.hca-big { display: block; margin: 0 0 var(--s2); }
.hca-promise { display: block; }
.hca-bars .hca-verdict { margin-top: var(--s1); }
/* 387: body text 16 or more on a phone; the answer card's small print at 16 there. */
@media (max-width: 700px) {
.hca-note, .hca-h, .hb-fig, .hca-promise, .hc-start .seg-radios label { font-size: var(--t5); }
}
.hc-fine-l { margin: 0 0 var(--s2); color: var(--graphite); }
/* ---- Glow-up, 26 October (Ian: "All the white space and simple text looks really boring"). The calculator's questions and
   what it counts sit on the shell panel, so the left column reads as one block beside the dark answer; the counts are chips
   with a tick, two to a row; the empty gap under the questions is gone (row 2 takes the answer's extra height). */
.hc-ask { background: var(--panel); border: var(--bw) solid var(--panel-line); border-radius: var(--radius); padding: var(--s4); }
.hc-ask .calc-step.hc-start { border: 0; margin: 0 0 var(--s3); padding: 0; }
.hc-ask .calc-step.hc-start legend { font: 600 var(--t5)/1.3 var(--sans); margin: 0 0 8px; }
.hc-ask .seg-radios label, .hc-ask input, .hc-ask select { background-color: var(--white); }
.hc-ask .hc-quick { align-items: end; }
.hc-ask .seg-radios label:has(input:checked) { border-color: var(--lacquer); box-shadow: inset 0 0 0 1px var(--lacquer); }
.hc-counts-box { padding: var(--s3) var(--s4) var(--s4); border: var(--bw) solid var(--panel-line); border-radius: var(--radius); }
.hc-counts { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.hc-counts li { padding: 10px 12px 10px 40px; background: var(--panel); border-radius: var(--radius); color: var(--ink); line-height: 1.35; }
.hc-counts li::before { left: 12px; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: var(--coral-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A23B2A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
@media (min-width: 960px) {
.hc-grid { grid-template-rows: auto 1fr; }
}
@media (max-width: 600px) {
.hc-ask { padding: var(--s3); }
.hc-counts-box { padding: var(--s3); }
}
/* Glow-up, 26 October: print or email your numbers as one shell panel, the print button beside the email form from tablet width. */
.hc-share-out { background: var(--panel); border: var(--bw) solid var(--panel-line); border-radius: var(--radius); padding: var(--s4); }
@media (min-width: 760px) {
.hc-share-out { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s4); align-items: start; }
.hc-share-out h3 { grid-column: 1 / -1; }
.hc-share-out form { margin: 0; }
}
.hc-share-out input[type="email"] { background-color: var(--white); }
/* Glow-up, 26 October: the calculator's sticky strip shows more often now; no shadow on a money page and body-size words (387). */
@media (max-width: 700px) {
.hc-sticky.on { box-shadow: none; font-size: var(--t5); }
}
/* Panel, 26 October (all four): The Finisher's column on the compare table, tinted for its full height under a lacquer bar,
   so the eye runs down it (flat: no shadow on a money page). On a phone its row in each block is the tinted one, and the
   column names are in sentence case. */
:root:root:root main.compare-draft .p-3way :is(th, td).tw-us { background: var(--panel); box-shadow: none; border: 0; }
:root:root:root main.compare-draft .p-3way thead th.tw-us { border-top: 4px solid var(--lacquer); color: var(--lacquer); }
@media (max-width: 700px) {
:root:root:root main.compare-draft .p-3way tbody tr td.tw-us { background: var(--panel); border-left: 4px solid var(--lacquer); color: var(--ink); }
:root main.compare-draft .p-3way td::before { text-transform: none; letter-spacing: 0; }
}