/* ---- P11 quote slot. One real sentence, italic, with a large opening mark. */
.p-quote { position: relative; margin: 0; padding: var(--s5) 0 0; max-width: 40rem; }
.p-quote::before { content: "\201C"; position: absolute; left: -4px; top: -6px; font: 400 var(--t0)/1 var(--serif); color: var(--lacquer); opacity: .4; }
.p-quote blockquote { margin: 0; }
.p-quote blockquote p { font: italic 400 var(--t2)/1.15 var(--serif); letter-spacing: -.01em; margin: 0 0 var(--s2); max-width: none; color: inherit; }
.p-quote figcaption { font: var(--t6)/1.4 var(--sans); color: var(--graphite); }
/* ---- 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; }
}
@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; }
@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%; }
/* 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; }
}
/* 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; }
}
/* 374 (139 item 12): home's bands as every page's, 48px on a laptop and 32 on a phone (were 56 and 22) */
/* 374 (139 items 1, 2, 7): one warm light ground (White) and one soft tint (Shell, flat: no grain or gradient), alternating down the page (339 rule 1: no two the same touch, no hairlines); no glows, blooms or discs. */
main.home > section.band-shell { background-image: none; }
@media (max-width: 700px) {
main.home { font-size: var(--t5); }
}
/* 1. Hero (374, 139 section 3): the words, then the stage of a laptop and two phones on the plain light ground. */
.hm-hero { overflow-x: clip; padding: var(--s3) 0 var(--s4); background-color: var(--ground); background-image: none; }
/* 374 (139 item 2): the coral and Shell blooms went */
.hm-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); align-items: center; }
.hm-kicker { color: var(--lacquer); margin: 0 0 var(--s2); }
.hm-hero .hm-kicker { font-size: var(--t5); letter-spacing: .08em; }
/* 374 (139 items 3 and 9): the one uppercase label left on home, at 16 so home keeps four sizes */
.hm-hero h1 { font-size: clamp(50px, 13.4vw, 80px); line-height: .95; margin: 0 0 var(--s3); max-width: none; }
.hm-buttons { display: flex; flex-wrap: wrap; gap: var(--s2); }
.hm-hero-pic { width: 100%; max-width: 600px; justify-self: center; min-width: 0; }
/* 416 (doc 144): the hero's picture, a drawn laptop (the Studio's Thursday) and phone (that business's booking page) that home.js cycles through ten crafts. Everything is sized from --u, 1/600 of the
   figure's width (container units), so it scales as one picture and its box is reserved by aspect ratio: nothing moves as the craft changes. It is decoration (aria-hidden); the caption, dots and Pause are real text and buttons. */
.hm-sub { font-size: var(--t5); line-height: 1.55; color: var(--graphite); max-width: 46ch; margin: 0 0 var(--s3); }
.hm-points { list-style: none; margin: 0 0 var(--s3); padding: var(--s2) 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); max-width: none; }
.hm-points li { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; min-width: 0; }
.hm-points strong { font: 600 var(--t5)/1.3 var(--sans); color: var(--ink); }
.hm-points li > span { font: var(--t5)/1.45 var(--sans); color: var(--graphite); }
.hm-hero-pic.hpic { margin: 0; container-type: inline-size; max-width: 640px; }
.hp-stage { --u: calc(100cqw / 600); --pu: var(--u); position: relative; aspect-ratio: 600 / 388; font-size: calc(11 * var(--u)); line-height: 1.3; color: var(--ink); }
.hp-lap { position: absolute; right: calc(22 * var(--u)); top: 0; width: calc(520 * var(--u)); }
.hp-lid { background: var(--device); border-radius: calc(14 * var(--u)) calc(14 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)); padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(18 * var(--u)); box-shadow: 0 calc(24 * var(--u)) calc(50 * var(--u)) rgba(29, 29, 27, .18); }
.hp-scr { height: calc(326 * var(--u)); background: var(--white); border-radius: calc(3 * var(--u)); overflow: hidden; display: flex; }
.hp-base { height: calc(14 * var(--u)); margin: 0 calc(-20 * var(--u)); background: linear-gradient(var(--device-base), var(--device-base-2)); border-radius: calc(2 * var(--u)) calc(2 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)); }
.hp-side { width: calc(104 * var(--u)); flex: none; background: var(--cream); border-right: 1px solid var(--line); padding: calc(14 * var(--u)) calc(12 * var(--u)); box-sizing: border-box; display: flex; flex-direction: column; gap: calc(9 * var(--u)); color: var(--graphite); }
.hp-side b { font: var(--serif-weight) calc(14 * var(--u))/1.2 var(--serif); color: var(--ink); }
.hp-side > span { padding: 0 calc(7 * var(--u)); }
.hp-side > span.on { background: var(--white); border-radius: calc(6 * var(--u)); padding: calc(5 * var(--u)) calc(7 * var(--u)); font-weight: 600; color: var(--ink); }
.hp-main { flex: 1; min-width: 0; padding: calc(16 * var(--u)) calc(18 * var(--u)); box-sizing: border-box; display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.hp-day { display: flex; justify-content: space-between; align-items: baseline; color: var(--graphite); }
.hp-day b { font: var(--serif-weight) calc(18 * var(--u))/1.2 var(--serif); color: var(--ink); }
.hp-new { border: calc(1.5 * var(--u)) solid var(--lacquer); border-radius: calc(8 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); display: flex; flex-direction: column; gap: calc(6 * var(--u)); background: color-mix(in srgb, var(--lacquer) 6%, var(--white)); }
.hp-newtop { display: flex; justify-content: space-between; gap: calc(8 * var(--u)); }
.hp-newtop span { font-weight: 600; color: var(--lacquer); text-transform: uppercase; letter-spacing: .08em; font-size: calc(9.5 * var(--u)); }
.hp-client { font-size: calc(13 * var(--u)); }
.hp-what { color: var(--graphite); }
.hp-tags { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); }
.hp-tags span { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-pill); padding: calc(3 * var(--u)) calc(8 * var(--u)); }
.hp-other { border: 1px solid var(--line); border-radius: calc(8 * var(--u)); padding: calc(9 * var(--u)) calc(12 * var(--u)); display: flex; justify-content: space-between; gap: calc(8 * var(--u)); }
.hp-done { margin-top: auto; color: var(--graphite); }
.hp-ph { position: absolute; left: 0; bottom: 0; width: calc(186 * var(--pu)); }
.hp-body { background: var(--device); border-radius: calc(30 * var(--pu)); padding: calc(9 * var(--pu)); box-shadow: 0 calc(24 * var(--u)) calc(50 * var(--u)) rgba(29, 29, 27, .24); }
.hp-pscr { height: calc(362 * var(--pu)); background: var(--white); border-radius: calc(22 * var(--pu)); overflow: hidden; display: flex; flex-direction: column; font-size: calc(10 * var(--pu)); }
.hp-who2 { padding: calc(16 * var(--pu)) calc(14 * var(--pu)) calc(10 * var(--pu)); display: flex; flex-direction: column; gap: 2px; color: var(--graphite); }
.hp-who2 b { font: var(--serif-weight) calc(16 * var(--pu))/1.2 var(--serif); color: var(--ink); }
.hp-pic { height: calc(70 * var(--pu)); margin: 0 calc(14 * var(--pu)); border-radius: calc(8 * var(--pu)); background: var(--mist); overflow: hidden; }
.hp-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hp-book { padding: calc(12 * var(--pu)) calc(14 * var(--pu)); display: flex; flex-direction: column; gap: calc(8 * var(--pu)); }
.hp-book > b { font-size: calc(11 * var(--pu)); }
.hp-svc { border: calc(1.5 * var(--pu)) solid var(--ink); border-radius: calc(8 * var(--pu)); padding: calc(7 * var(--pu)) calc(9 * var(--pu)); display: flex; flex-direction: column; gap: 2px; }
.hp-svc > span { color: var(--graphite); }
.hp-chips { display: flex; gap: calc(5 * var(--pu)); }
.hp-chips span { border: 1px solid var(--line); border-radius: calc(6 * var(--pu)); padding: calc(4 * var(--pu)) calc(6 * var(--pu)); }
.hp-chips span.on { background: var(--ink); border-color: var(--ink); color: var(--white); }
.hp-go { background: var(--lacquer); color: var(--white); text-align: center; border-radius: var(--r-pill); padding: calc(8 * var(--pu)); font-weight: 600; }
.hp-cap { margin: var(--s2) 0 0; border-top: 1px solid var(--line); padding-top: var(--s2); display: flex; flex-direction: column; gap: 4px; }
.hp-cap > strong { font: 600 var(--t5)/1.3 var(--sans); color: var(--ink); min-height: 1.3em; }
.hp-cap > span { font: var(--t5)/1.45 var(--sans); color: var(--graphite); }
.hp-ctl { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; min-height: 44px; }
@media (scripting: none) {
.hp-ctl { display: none; }
}
.hp-dots { display: flex; gap: 0; flex-wrap: wrap; }
.hp-dot { width: 24px; height: 44px; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
.hp-dot::before { content: ""; box-sizing: border-box; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--graphite); background: none; }
.hp-dot[aria-current="true"]::before { border-color: var(--lacquer); background: var(--lacquer); }
.hp-dot:focus-visible { outline: 2px solid var(--lacquer); outline-offset: -2px; border-radius: var(--r1); }
.hp-pause { border: 1px solid var(--line-strong); background: var(--white); border-radius: var(--r-pill); padding: 0 16px; }
.hpic.is-paused .hx-pi { width: 0; height: 0; border-left: 11px solid currentColor; border-right: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
@media (max-width: 860px) {
.hm-hero-grid { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
.hm-hero-text { display: contents; }
.hm-hero-text > .kicker { order: 1; }
.hm-hero-text > h1 { order: 2; }
.hm-hero-text > .hm-sub { order: 3; }
.hm-hero-text > .hm-buttons { order: 4; margin-bottom: var(--s2); }
.hm-hero-text > .hm-see-line { order: 4; }
/* audit 25 Oct */
.hm-hero-grid > .hm-hero-pic { order: 5; margin: 0 auto var(--s2); width: 100%; }
.hm-hero-text > .hm-points { order: 6; margin: 0; gap: 10px; }
.hp-cap { margin-top: var(--s1); padding-top: var(--s1); }
}
@media (min-width: 861px) {
main.banded > section.hm-hero { padding-top: var(--s3); }
.hm-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: var(--s4); align-items: start; }
.hm-points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.hp-stage { aspect-ratio: 600 / 470; --pu: var(--u); }
}
@media (min-width: 861px) and (max-width: 1100px) {
.hm-points { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
.hp-stage * { transition: none; }
}
/* 386 (142 item 4; WCAG 2.2.2): the hero's Pause / Play button, a text button under the stage with a 44px target. Drawn only with script and motion allowed (nothing to press otherwise);
   shown once home.js has made the stage live. Pausing also freezes a drift part way. */
.hx-pause { display: inline-flex; align-items: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 8px; margin: 0; border: 0; border-radius: var(--r1); background: none; color: var(--ink); font: 600 var(--t5)/1.2 var(--sans); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hx-pause:hover .hx-pt { text-decoration: underline; text-underline-offset: 3px; }
.hx-pi { flex: none; box-sizing: border-box; width: 12px; height: 12px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
/* the price's "From", in sentence case (374, 139 item 3) */
/* 3. The story (357): the eyebrow and headline, three real phone screens each under a time and a line, the line under them, the week row with today's dot.
   374 (139): the eyebrow in sentence case (item 3); 10pm and the times at heading size, in lacquer (item 4; coral only at 48px and over, 345); flat phones (item 7);
   on a phone a sideways swipe with the times as tabs (item 8, home.js). */
.hm-story { --story-coral: var(--lacquer); overflow-x: clip; }
.hm-story .hm-kicker { margin: 0 0 var(--s2); font-size: var(--t5); letter-spacing: 0; text-transform: none; }
.hm-story h2 { font: var(--serif-weight) var(--t2)/1.1 var(--serif); letter-spacing: -.02em; margin: 0 0 var(--s3); max-width: 17em; }
.hm-story .hm-t10 { color: var(--story-coral); font-size: 1em; line-height: inherit; }
.hm-nothing { margin: var(--s3) 0 var(--s2); text-align: center; font: var(--serif-weight) clamp(22px, 2vw, 26px)/1.25 var(--serif); color: var(--ink); max-width: none; }
.hm-weekrow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s1) var(--s3); }
.hm-weekrow .week-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; margin: 0; padding: 0; list-style: none; max-width: none; }
.hm-weekrow .week-tiles .day { display: block; margin: 0; padding: 0; border: 0; background: none; max-width: none; }
.hm-weekrow .week-tiles .day-label { font: 600 var(--t5)/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: var(--graphite); }
/* 374 (139 item 3): sentence case */
.hm-weekrow .week-tiles .day.lit { background: none; padding: 0; border-radius: 0; color: inherit; }
.hm-weekrow .week-tiles .day.lit .day-label { color: var(--lacquer); }
.hm-weekrow .week-tiles .day.lit .day-label::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--lacquer); vertical-align: 1px; }
.hm-weekrow .week-note { margin: 0; }
.hm-weekrow .week-note .more-link { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t5); }
.hm-ttabs { display: none; }
@media (max-width: 700px) {
/* 374 (139 item 8): home under 6,500px at 390 */
.hm-ttabs { display: flex; flex-wrap: wrap; gap: var(--s1); margin: 0 0 var(--s2); }
.hm-ttab { min-height: 44px; padding: 0 16px; border: var(--bw) solid var(--line-strong); border-radius: var(--r-pill); background: transparent; color: var(--ink); font: 600 var(--t5)/1 var(--sans); cursor: pointer; }
.hm-ttab[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
}
/* 4. The demo, on the light ground (374, 139 item 1): the devices, the "Show" switch under them, the tour as small numbered dots with its caption and Replay (379), one caption, "Open the full demo:" (381). */
.hm-demo > .wrap > h2 { text-align: center; margin-bottom: var(--s3); }
.hm-stage { max-width: 960px; margin: 0 auto; }
.hm-demo .showcase { display: flex; flex-direction: column; }
.hm-demo .stage { order: 1; }
.hm-demo .demo-bar { order: 2; margin: var(--s3) 0 0; }
.hm-demo .tour { order: 3; margin-top: var(--s2); }
.hm-demo .demo-pointer { order: 4; text-align: center; font-size: var(--t5); }
.hm-demo .demo-full { order: 5; }
.hm-demo .early-over { order: 6; }
.hm-demo .hint-cap { display: none; }
/* the one caption is "Every name is invented ..." (125/C band 4); the tour and the switch carry the invitation */
.hm-demo :is(.seg-one button small, .tour-steps button) { font-size: var(--t5); }
/* four sizes on home at 390 (139 item 9) */
.hm-demo .device .lid, .hm-demo .device .body { box-shadow: none; }
/* flat (139 item 7) */
/* 353, 355, 356: "Made for your craft." (the strip after the hero). Each tile is one link on its craft's world: the pale (-dk in dark) as ground, the crop of the demo's website hero on the LIGHT pale (the paper)
   in both modes, the name in the serif, "See it for ..." in the deep (the numeral in dark). Two across on a phone, three on a tablet, six on a laptop. 355: twelve crafts' worlds; the six slots turn
   one at a time (site.js): the new picture fades in over the old, the ground eases to the new craft's pale, the words fade out and in. The name and the line each keep two lines (one on a phone 390 to 639 wide, where all twelve fit on one) so no craft changes the tile's height. */
.hm-tile[data-w="shell"] { --hp: var(--w-shell-pale); --hk: var(--w-shell-pale-dk); --hd: var(--w-shell-deep); --hn: var(--w-shell-numeral); }
.hm-tile[data-w="lilac"] { --hp: var(--w-lilac-pale); --hk: var(--w-lilac-pale-dk); --hd: var(--w-lilac-deep); --hn: var(--w-lilac-numeral); }
.hm-tile[data-w="caramel"] { --hp: var(--w-caramel-pale); --hk: var(--w-caramel-pale-dk); --hd: var(--w-caramel-deep); --hn: var(--w-caramel-numeral); }
.hm-tile[data-w="bone"] { --hp: var(--w-bone-pale); --hk: var(--w-bone-pale-dk); --hd: var(--w-bone-deep); --hn: var(--w-bone-numeral); }
.hm-tile[data-w="mist"] { --hp: var(--w-mist-pale); --hk: var(--w-mist-pale-dk); --hd: var(--w-mist-deep); --hn: var(--w-mist-numeral); }
.hm-tile[data-w="sky"] { --hp: var(--w-sky-pale); --hk: var(--w-sky-pale-dk); --hd: var(--w-sky-deep); --hn: var(--w-sky-numeral); }
.hm-tile[data-w="slate"] { --hp: var(--w-slate-pale); --hk: var(--w-slate-pale-dk); --hd: var(--w-slate-deep); --hn: var(--w-slate-numeral); }
.hm-tile[data-w="sea"] { --hp: var(--w-sea-pale); --hk: var(--w-sea-pale-dk); --hd: var(--w-sea-deep); --hn: var(--w-sea-numeral); }
.hm-tile[data-w="sage"] { --hp: var(--w-sage-pale); --hk: var(--w-sage-pale-dk); --hd: var(--w-sage-deep); --hn: var(--w-sage-numeral); }
.hm-tile[data-w="peach"] { --hp: var(--w-peach-pale); --hk: var(--w-peach-pale-dk); --hd: var(--w-peach-deep); --hn: var(--w-peach-numeral); }
.hm-tile[data-w="rose"] { --hp: var(--w-rose-pale); --hk: var(--w-rose-pale-dk); --hd: var(--w-rose-deep); --hn: var(--w-rose-numeral); }
.hm-tile[data-w="skygrey"] { --hp: var(--w-skygrey-pale); --hk: var(--w-skygrey-pale-dk); --hd: var(--w-skygrey-deep); --hn: var(--w-skygrey-numeral); }
.hm-tile { --g: var(--hp); --lk: var(--hd); }
.hm-strip-line { margin: var(--s1) 0 var(--s3); max-width: none; }
.hm-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s2); }
.hm-tile { margin: 0; max-width: none; min-width: 0; }
.hm-tile a { display: flex; flex-direction: column; gap: var(--s1); height: 100%; box-sizing: border-box; padding: 0; border-radius: 0; background: none; color: var(--ink); text-decoration: none; box-shadow: none; }
/* 374 (139 item 7): no card on the tinted band, the picture and its words straight on it */
.ht-pic { position: relative; display: block; border-radius: var(--r2); background: var(--hp); aspect-ratio: 4 / 3; overflow: hidden; }
/* the paper: the light pale in both modes; 4 by 3 is the crop's own shape */
.ht-pic img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; z-index: 1; transition: opacity .7s var(--ease); }
.ht-pic img.is-on { opacity: 1; }
.ht-pic img.is-up { z-index: 2; }
.ht-txt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; transition: opacity .3s var(--ease); }
.hm-tile.is-out .ht-txt { opacity: 0; }
.ht-name { min-height: 2.4em; font: var(--serif-weight) var(--t5)/1.2 var(--serif); text-wrap: balance; }
/* two lines kept, whichever craft is shown */
.ht-go { margin-top: auto; min-height: 2.5em; font: 600 var(--t5)/1.25 var(--sans); color: var(--lk); }
.hm-tile a:hover .ht-go, .hm-tile a:focus-visible .ht-go { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 390px) and (max-width: 639px) {
.hm-tiles .ht-name { min-height: 1.2em; }
.hm-tiles .ht-go { min-height: 1.25em; }
}
/* two across, 390 or wider: every name and line fits on one (the checks try all twelve at 390) */
.hm-tile.is-kf a { outline: 2px solid var(--focus); outline-offset: 3px; }
/* 355: the tile showing the craft a keyboard user is on in the hidden list */
@media (min-width: 640px) {
.hm-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
.hm-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ht-name { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
.ht-pic img, .ht-txt { transition: none; }
}
.hm-seen { margin: var(--s3) 0 0; display: flex; flex-wrap: wrap; gap: 0 var(--s3); }
.hm-seen .more-link { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t5); }
/* 355: both links under the strip the same: ink, underlined, one size, 44px to hit */
.hm-strip > .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); }
.hm-strip > .wrap > :is(h2, .hm-strip-line, .hm-rotor) { flex: 0 0 100%; }
.hm-strip .hm-seen { margin: var(--s2) 0 0; }
/* 5. Ian's line (380, 139 item 12): about 24px, signed, on the tint; no headline, no giant quote mark, no drawn table. */
.hm-origin > .wrap { text-align: center; }
.hm-origin .p-quote { padding: 0; max-width: 40rem; margin: 0 auto; }
.hm-origin .p-quote::before { content: none; }
.hm-origin .p-quote blockquote { border: 0; padding: 0; }
.hm-origin .p-quote blockquote p { font-size: clamp(22px, 1.7vw, 24px); line-height: 1.35; margin-bottom: var(--s1); }
.hm-origin .p-quote figcaption { color: var(--ink); font-size: var(--t5); font-weight: 600; }
.hm-origin-link { margin: var(--s2) auto 0; max-width: none; }
/* 10. The closer, on light (139 items 1 and 2: no oxblood, no half circle); one main button, the chat beside it as an outline (item 10). */
.hm-close .hm-actions { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: start; gap: var(--s1) var(--s3); margin: var(--s3) 0 0; }
.hm-close .hm-actions > .btn:first-child { grid-column: 1; grid-row: 1; justify-self: start; }
.hm-close .hm-actions > .ab-row { grid-column: 2; grid-row: 1; margin: 0; }
@media (max-width: 520px) {
.hm-close .hm-actions { grid-template-columns: minmax(0, 1fr); }
.hm-close .hm-actions > .ab-row { grid-column: 1; grid-row: 2; margin-top: 0; }
}
.hm-close-link { margin: var(--s2) 0 0; font-size: var(--t5); }
.hm-demo .seg-one button, .hm-calc .link-card .lc-arrow { font-size: var(--t5); }
/* 374 (139 item 9): four sizes at 390 (16, 22, 32, 52) */
@media (max-width: 700px) {
.hm-demo .phone.front { max-width: 236px; }
main.banded > section.hm-hero { padding-bottom: var(--band-pad); }
}
.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; }
/* 353: the guarantee steps and the questions a little tighter on a phone (nothing cut), with the band padding above. */
@media (max-width: 700px) {
.hm-tiles { gap: 10px; }
.ht-name { font-size: var(--t5); }
.hm-strip .hm-seen { margin-top: var(--s1); }
.hm-strip-line { margin-bottom: var(--s2); }
.hm-origin .p-quote { padding-top: 0; }
}
/* 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); }
}
/* 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); }
}
/* 399 (C): the home craft strip's Pause / Play button (point 24; WCAG 2.2.2), made by home.js (only with script and motion allowed), in the hero button's look (.hx-pause). It sits at the top right of the band, level with the heading, taking no height. */
.hm-strip > .wrap { position: relative; }
.hm-ctl { position: absolute; top: 0; right: calc(var(--s3) - 8px); z-index: 3; }
.hm-strip.is-paused .hx-pi { width: 0; height: 0; border-left: 11px solid currentColor; border-right: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
/* 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); }
.own-cols { display: grid; gap: var(--s4); margin: 0 0 var(--s4); }
@media (min-width: 900px) {
.own-cols { grid-template-columns: 1fr 1fr; gap: var(--s5); }
}
.own-col h3 { font-size: var(--t4); margin: 0 0 var(--s2); }
.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); }
.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; }
/* 425 C */
/* 425 (item 2): home opens on her worries, in her words, then the answers (four, one to each worry) and the safe-payment line. */
/* 428 M (19:22): the worries are one quiet paragraph of questions in the body sans, smaller than the sub, muted, no rule. */
.hm-hero .hm-worries { margin: 0 0 var(--s2); font: var(--t6)/1.45 var(--sans); color: var(--muted); max-width: 46ch; }
.hm-hero .hm-sub { max-width: 40ch; }
.hm-safe { margin: 0 0 var(--s3); padding: var(--s2) 0 0; border-top: 1px solid var(--line); font: var(--t5)/1.45 var(--sans); color: var(--ink); max-width: 60ch; }
.hm-safe a { white-space: nowrap; }
.hm-answers { padding-top: var(--s2); }
@media (max-width: 860px) {
.hm-hero-text > .hm-worries { order: 0; }
.hm-hero-text > .hm-buttons { order: 6; }
.hm-hero-text > .hm-see-line { order: 6; }
.hm-hero-grid > .hm-hero-pic { order: 7; }
}
/* Audit 25 Oct: the line under the preview button (what happens next). */
.hm-see-line { margin: var(--s2) 0 var(--s3); color: var(--graphite); max-width: 46ch; }
@media (max-width: 860px) {
.hm-see-line { margin-top: 0; }
}
@media (min-width: 861px) {
.hm-answers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) var(--s3); }
}
@media (min-width: 861px) and (max-width: 1100px) {
.hm-answers { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 861px) {
.hm-hero h1 { margin-bottom: var(--s2); }
}
@media (max-width: 860px) {
.hm-answers li { display: block; }
.hm-answers strong { display: inline; }
}
/* 425 C: the answers and the safe line as the hero's second band: four across on a laptop, two on a tablet, one on a phone. */
.hm-answer { padding: var(--s4) 0; }
.hm-answer .hm-answers { margin: 0 0 var(--s3); padding-top: 0; border-top: 0; gap: var(--s2); }
.hm-answer .hm-safe { margin: 0; }
@media (min-width: 761px) {
.hm-answer .hm-answers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
}
@media (min-width: 1101px) {
.hm-answer .hm-answers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* 428 M */
/* 431, 438: the dark kit band, straight after the hero on home and on every craft page: the existing ink ground, generous space,
   the question at the hero headline's size, one line, a text link. Its shared rules sit just above pages:start, written short, as
   the craft pages carry no pages.css and each of their bytes counts towards the 500 KB budget. Home's heading size is here.
   On the craft pages the question is the hero headline's size on a laptop (60px, both); on a phone it keeps the craft pages' h2
   size (32px against the headline's 52px), as the craft pages are over their height ceilings (listed in M's report). */
.own-kit h2 { font-size: clamp(50px, 13.4vw, 80px); line-height: .95; letter-spacing: -.02em; margin: 0 0 var(--s3); max-width: 16ch; }
/* 432: renting and owning, always shown: two columns on a laptop (renting first on a phone), renting in muted grey dots, owning in the brand red. */
.own-rent .own-cols { margin: 0 0 var(--s3); }
.own-rent .own-col h3 { font-size: var(--t3); margin: 0 0 var(--s2); }
.own-rent .own-col-yes h3 { color: var(--lacquer); }
.own-rent .own-list li::before { background: var(--muted); opacity: .45; }
.own-rent .own-list.own-yes li::before { background: var(--lacquer); opacity: 1; }
.own-rent .own-list { gap: 12px; }
.own-rent .source-line { margin: 0; }
/* 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); }
}
/* 433 K:start (428 agent K, decision 433): the day story as three picture cards ("Booked at 10pm", "On the day", "Afterwards") on
   /how-it-works/ and home (lib/craft-433.mjs). Laptop: three side by side, each a small cropped screen, the card's name, a bold
   outcome and up to three short lines. Phone: stacked, the picture a small square beside the card's name and outcome, the lines full width under them, so nothing scrolls sideways.
   A chip says who acts only where that changes; the two sides are two tints. No border on four sides (337: not the old card). */
.c433 { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); max-width: none; }
.c433-card { margin: 0; padding: 0; max-width: none; text-align: left; }
.c433-pic { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r1); background: var(--white); box-shadow: 0 0 0 1px var(--line); margin: 0 0 var(--s2); }
.c433-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.c433-pic.c433-p3 img { object-position: 50% 4%; }
.c433-pic.is-owner img { width: 160%; max-width: none; height: auto; object-fit: fill; }
.c433-h { font: 600 var(--t5)/1.3 var(--sans); color: var(--graphite); margin: 0 0 4px; letter-spacing: 0; text-transform: none; max-width: none; }
.c433-out { font: 700 var(--t4)/1.3 var(--sans); color: var(--ink); margin: 0 0 var(--s1); max-width: none; }
.c433-lines { list-style: none; margin: 0; padding: 0; max-width: none; }
.c433-lines li { margin: 0 0 6px; padding: 0; font-size: var(--t5); line-height: 1.4; color: var(--graphite); max-width: none; }
.c433-who { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: var(--r-pill); font: 600 var(--t6)/1.4 var(--sans); color: var(--ink); background: var(--white); box-shadow: inset 0 0 0 1px var(--line-strong); }
.c433-who.c433-owner { background: var(--ink); color: var(--white); }
/* Panel, 26 October (mobile): the who-label sits on its own line above its sentence, so a wrapped line never runs back under it. */
.c433-lines .c433-who { display: table; margin: 0 0 3px; }
.hm-story .c433 { margin-top: var(--s3); }
@media (max-width: 700px) {
.c433 { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.c433-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: var(--s2); align-items: start; }
.c433-card > * { grid-column: 2; }
.c433-pic { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: 1 / 1; margin: 0; }
.c433-lines { grid-column: 1 / -1; margin-top: var(--s1); }
.c433-out { font-size: var(--t5); margin-bottom: 4px; }
.c433-lines li { margin-bottom: 4px; }
/* Home: the story was already the page's one sideways swipe on a phone (139 item 8); the cards keep that, the next card showing. */
.hm-story .c433 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; gap: var(--s2); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-bottom: var(--s1); }
.hm-story .c433-card { display: block; scroll-snap-align: start; }
.hm-story .c433:focus-visible { outline: 2px solid var(--lacquer); outline-offset: 4px; border-radius: var(--r1); }
/* audit 25 Oct */
.hm-story .c433-pic { aspect-ratio: 2 / 1; margin: 0 0 var(--s1); }
.hm-story .c433-lines { margin-top: 0; }
}
/* 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; }
/* Audit 25 Oct: home's "What you can check before you buy": six short points, two columns on a laptop, one on a phone. */
.hm-proof { margin: 0 0 var(--s4); }
.hm-proof h2 { margin: 0 0 var(--s3); }
.hm-proof-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s4); max-width: none; }
.hm-proof-list li { margin: 0; padding: var(--s2) 0 0; border-top: 1px solid var(--line); max-width: none; }
.hm-proof-list h3 { font: 600 var(--t4)/1.3 var(--sans); color: var(--ink); margin: 0 0 6px; letter-spacing: 0; }
.hm-proof-list p { margin: 0; font-size: var(--t5); line-height: 1.5; color: var(--graphite); }
@media (max-width: 700px) {
.hm-proof-list { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
}
/* Ian, 25 October: renting and owning end on their statement, at display size. */
.own-rent .own-close { font-family: var(--serif); font-weight: var(--serif-weight); font-size: clamp(30px, 3.6vw, 48px); line-height: 1.12; letter-spacing: -.01em; color: var(--ink); max-width: 30ch; margin: var(--s5) 0 var(--s3); }
.own-rent .own-close span { display: block; text-wrap: balance; }
.own-rent .own-close .oc-2 { color: var(--lacquer); }
@media (max-width: 600px) {
.own-rent .own-close { margin-top: var(--s4); }
}
/* Glow-up, 26 October: what you can check, as three shell cards in a row, each with its own coral disc (studio, Ian, the manual). */
.hm-proof-list { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s2); }
.hm-proof-list li { position: relative; padding: calc(var(--s3) + 52px) var(--s3) var(--s3); border: var(--bw) solid var(--panel-line); border-radius: var(--radius); background: var(--panel); text-align: left; }
.hm-proof-list li::before { content: ""; position: absolute; top: var(--s3); left: var(--s3); width: 40px; height: 40px; border-radius: 50%; background: var(--lacquer) center / 20px no-repeat; }
.hm-proof-list li:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFCFA' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 4l9 6.5'/%3E%3Cpath d='M5 9.5V20h14V9.5'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E"); }
.hm-proof-list li:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFCFA' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20c.8-3.6 3.6-5.5 7-5.5s6.2 1.9 7 5.5'/%3E%3C/svg%3E"); }
.hm-proof-list li:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFCFA' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5C6.5 4.5 9.5 4.5 12 6c2.5-1.5 5.5-1.5 8-.5V19c-2.5-1-5.5-1-8 .5-2.5-1.5-5.5-1.5-8-.5z'/%3E%3Cpath d='M12 6v13.5'/%3E%3C/svg%3E"); }
@media (max-width: 700px) {
.hm-proof-list li { padding: var(--s3) var(--s3) var(--s3) 72px; }
.hm-proof-list li::before { left: var(--s2); width: 36px; height: 36px; }
}