/* ---- 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%; }
/* Decisions 332, 334 and 335 (122 items 6 and 7): /trades/, "Pick your craft". The wall: six groups, each its heading
   over its tiles. On a laptop the groups flow side by side, every tile the same width; on a phone two tiles a row, so
   every craft is in view without swiping. Each tile is one link: its craft's demo loop (the freshen card's stage and
   .mini-device), then its name. "On the way": quiet name tiles, no picture or motion, each opening the sign-up below
   them (hidden until a tile is chosen, or the page is opened at #tell-me). */
.otw-line { margin: 0 0 var(--s3); }
/* /trades/ (337, 124 item 5): the oxblood "On the way" band. Its muted name tiles read on the deep ground; the sign-up opens as a
   plain card of its own, so the form keeps its usual colours. */
.crafts-hero .lead { margin-bottom: 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); }
.crafts-close .close-actions { margin-top: var(--s2); }
@media (min-width: 1100px) {
.crafts-close > .wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: var(--s5); align-items: start; }
.crafts-close > .wrap > :not(.action-block) { grid-column: 1; }
.crafts-close > .wrap > .action-block { grid-column: 2; grid-row: 1 / span 6; margin-top: 0; }
}
/* l2-craft-trades:start (LOOK 2 phase 2, 125/G section 4). /trades/ as one wall of tall 4:5 tiles on each craft's own pale, the craft's
   name large, its group a small chip, the demo's phone standing large over the tile's lower edge; two bands (White, then Shell) so no
   ground runs long; the tiles fade up in view, staggered (the page's one movement; static with reduced motion or without script).
   "On the way": dashed ghost tiles, a tiny "Soon" badge, one tap to the sign-up. */
.wall-tile[data-craft="nails"], .wall-tile[data-craft="beauty"], .wall-tile[data-craft="spmu"] { --tp: var(--w-shell-pale); --td: var(--w-shell-deep); }
.wall-tile[data-craft="lashes"] { --tp: var(--w-lilac-pale); --td: var(--w-lilac-deep); }
.wall-tile[data-craft="hair"] { --tp: var(--w-caramel-pale); --td: var(--w-caramel-deep); }
.wall-tile[data-craft="barbers"] { --tp: var(--w-slate-pale); --td: var(--w-slate-deep); }
.wall-tile[data-craft="tattoo"] { --tp: var(--w-bone-pale); --td: var(--w-bone-deep); }
.wall-tile[data-craft="piercing"] { --tp: var(--w-sea-pale); --td: var(--w-sea-deep); }
.wall-tile[data-craft="massage"] { --tp: var(--w-mist-pale); --td: var(--w-mist-deep); }
.wall-tile[data-craft="dogs"] { --tp: var(--w-sky-pale); --td: var(--w-sky-deep); }
.wall-tile[data-craft="fitness"], .wall-tile[data-craft="coaching"] { --tp: var(--w-sage-pale); --td: var(--w-sage-deep); }
/* 352: the wall's tiles carry the home page's own laptop (the craft's website) and phone (its Studio). One column on a phone (up to 600px, each tile at most 440px wide and centred),
   two to 900px, three above. The gaps hold the phone's breakout: 32px between columns (the phone breaks out 6.8% of the tile, 24px at most) and 48px between rows (the one-column
   phone breaks out at the bottom by the same). */
.wall { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px 0; padding-bottom: 40px; }
.crafts-wall .cc-note { margin: 0 0 var(--s3); }
.wall-tile { margin: 0 auto; width: 100%; max-width: 440px; min-width: 0; aspect-ratio: 4 / 5; position: relative; container-type: inline-size; }
.wt-link { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; height: 100%; box-sizing: border-box; padding: 14px 14px 0; border-radius: var(--radius); background: var(--tp, var(--shell)); color: var(--ink); text-decoration: none; box-shadow: var(--card-shadow); }
.wt-chip { display: inline-block; padding: 3px 9px; border-radius: var(--r-pill); background: var(--ground); font: 600 11px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.wt-name { position: relative; z-index: 1; font-family: var(--serif); font-weight: var(--serif-weight); font-size: clamp(20px, 9.5cqw, 36px); line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; max-width: 100%; }
/* The laptop: 82% of the tile (a % of the tile's height for bottom: 5% is about 6.3% of its width), its lid and base the showcase's (--dku = its width over 560), fully inside the tile's lower half. */
.wt-laptop { position: absolute; left: 6%; bottom: 5%; width: 82%; container-type: inline-size; pointer-events: none; z-index: 1; }
.wt-laptop .md-laptop { --dku: calc(100cqw / 560); width: 100%; }
.wt-laptop .md-laptop .md-lid { box-shadow: 0 6px 14px rgba(42, 21, 18, .16); }
/* The phone: 34% of the tile, in front of the laptop over its right edge; on a laptop screen it breaks out past the tile's right edge, on a phone past its bottom edge, by a fifth of its width (6.8% of the tile's width, 5.4% of its height). */
.wt-phone { position: absolute; right: 5%; bottom: -5.4%; width: 34%; container-type: inline-size; pointer-events: none; z-index: 2; }
.wt-phone .md-phone { --dku: calc(100cqw / 224); width: 100%; filter: drop-shadow(0 14px 20px rgba(42, 21, 18, .24)); }
.wt-laptop .md-screen img, .wt-phone .md-screen img, .wt-phone .md-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.wt-phone .md-screen video { opacity: 0; transition: opacity .4s; }
.wt-phone .md-screen video.on { opacity: 1; }
.wt-link:hover .wt-name, .wt-link:focus-visible .wt-name { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.wt-link:hover { transform: translateY(-3px); }
.wt-link { transition: transform .25s var(--ease); }
@media (min-width: 601px) {
.wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; padding-bottom: 40px; }
.wall-tile { max-width: none; }
.wt-link { padding: 20px 20px 0; gap: 10px; }
.wt-chip { font-size: 12px; padding: 4px 11px; }
.wt-phone { right: -6.8%; bottom: 6%; }
}
@media (min-width: 901px) {
.wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 32px; }
.wt-link { padding: 22px 22px 0; gap: 12px; }
.wt-chip { font-size: 12.5px; padding: 4px 12px; }
}
/* The one movement: tiles fade up as they come into view, a beat apart (site.js adds .wall-js, then .is-in); static without script or with reduced motion. */
.wall-js .wall-tile { transition: opacity .3s var(--ease), transform .3s var(--ease); }
/* 358: .3s, was .7s; none at all on a laptop (site.js adds wall-js under 901px only) */
.wall-js .wall-tile:not(.is-in) { opacity: 0; transform: translateY(10px); }
@media (prefers-reduced-motion: reduce) {
.wall-js .wall-tile, .wall-js .wall-tile:not(.is-in) { opacity: 1; transform: none; transition: none; }
.wt-link { transition: none; }
.wt-link:hover { transform: none; }
}
/* 391 (142 item 5a): "On the way" as a plain grouped list beside one sign-up form. Four short groups in two columns (the group heading, then its crafts as plain lines: no boxes, badges or icons), the
   form beside them on a laptop and under them on a phone. The "Something else" words field shows only when script is on and that option is chosen (with no script it is always there, optional). */
.crafts-otw .otw-line { margin: 0 0 var(--s3); }
.otw { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); align-items: start; }
.otw-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); align-content: start; }
.otw-col-h { margin: 0 0 var(--s1); font: 600 var(--t5)/1.3 var(--sans); color: var(--ink); }
.otw-list { list-style: none; margin: 0; padding: 0; max-width: none; }
.otw-list li { margin: 0; padding: 3px 0; max-width: none; font-size: var(--t5); line-height: 1.4; color: var(--ink); }
.otw-form { max-width: 560px; }
.otw-form h3 { margin: 0 0 var(--s2); font-size: var(--t3); }
.otw-form .signup { max-width: none; }
main.banded .otw-form #later-form { grid-template-columns: minmax(0, 1fr); }
/* beats /coming-later/'s two-column form (the id rule above) */
@media (scripting: enabled) {
#later-form:not(.is-other) .otw-other { display: none; }
}
@media (min-width: 861px) {
.otw { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); }
.otw-cols { gap: var(--s4) var(--s3); }
.otw-list li { padding: 5px 0; }
}
.otw-promise { margin: var(--s3) 0 0; max-width: 34em; }
@media (min-width: 1000px) {
/* name and email side by side, so the form is about as tall as the list and its line (decision 380's two-thirds rule) */
main.banded .otw-form #later-form { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s2); align-items: start; }
main.banded .otw-form #later-form > label:has(select[name=trade]) { grid-column: 1 / -1; }
main.banded .otw-form #later-form > label:has(input[name=name]) { grid-column: 1; }
main.banded .otw-form #later-form > label:has(input[name=email]) { grid-column: 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); }
}
.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; }
/* 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 (B): /trades/ (142 item 17): the "No promise" line now sits in the form, not under the list, so on a laptop the list gets a little more room and the privacy line shares a row with its fold, which keeps the two sides within decision 380's two-thirds rule. */
@media (min-width: 1000px) {
main.banded .otw-cols { gap: var(--s5) var(--s4); }
main.banded .otw-list li { padding: 13px 0; }
main.banded .otw-form #later-form > .otw-promise { margin: 0; }
main.banded .otw-form #later-form > .form-privacy { grid-column: 1; margin: 0; }
main.banded .otw-form #later-form > .read-more { grid-column: 2; }
}
.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; }