/* Start a project, redesigned 2026-10-11 in home's Powder language.
   The page stands on the dusk scene the way the client login does, the sky,
   far and near hills and the shrub band, with a two tone head in the scene's
   light ink in both themes. The two ways in are glass cards in home's card in
   card shell. Book a call makes the booking picker (the outreach server's
   /a/booking.js) the hero, a glass card on the hills with what the call is
   beside it, and the confirm step takes the whole width. The brief keeps its
   question by question flow on a shorter band, its tiles and buttons in the
   same glass and pills. Markup from startArt and startHub in build.mjs.
   Without script every section shows, one after another. */

/* the colours, Powder's dark glass, and a light frosted glass for the light theme over the same dusk */
.sb {
  --sb-tx: #fff3f0; --sb-mid: rgba(255, 255, 255, .8); --sb-dim: rgba(255, 255, 255, .6); --sb-line: rgba(255, 255, 255, .1); --sb-edge: rgba(255, 255, 255, .16);
  --sb-sec: rgba(255, 255, 255, .08); --sb-sec-h: rgba(255, 255, 255, .16); --sb-pri: #fff3f0; --sb-pri-tx: #0b0b0b;
  --sb-card: rgba(23, 23, 23, .86); --sb-card-h: rgba(30, 30, 30, .9); --sb-solid: #171717; --sb-shell: rgba(0, 0, 0, .3); --sb-shell-edge: rgba(255, 255, 255, .07); --sb-hl: .55;
  --sb-ease: cubic-bezier(.22, 1, .36, 1);
}
:root[data-theme="light"] .sb {
  --sb-tx: #17140f; --sb-mid: rgba(0, 0, 0, .74); --sb-dim: rgba(0, 0, 0, .55); --sb-line: rgba(0, 0, 0, .09); --sb-edge: rgba(0, 0, 0, .15);
  --sb-sec: rgba(0, 0, 0, .045); --sb-sec-h: rgba(0, 0, 0, .09); --sb-pri: #17140f; --sb-pri-tx: #fff3f0;
  --sb-card: rgba(250, 249, 246, .9); --sb-card-h: rgba(255, 255, 255, .96); --sb-solid: #faf9f6; --sb-shell: rgba(255, 255, 255, .18); --sb-shell-edge: rgba(255, 255, 255, .32); --sb-hl: 1;
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .sb {
  --sb-tx: #17140f; --sb-mid: rgba(0, 0, 0, .74); --sb-dim: rgba(0, 0, 0, .55); --sb-line: rgba(0, 0, 0, .09); --sb-edge: rgba(0, 0, 0, .15);
  --sb-sec: rgba(0, 0, 0, .045); --sb-sec-h: rgba(0, 0, 0, .09); --sb-pri: #17140f; --sb-pri-tx: #fff3f0;
  --sb-card: rgba(250, 249, 246, .9); --sb-card-h: rgba(255, 255, 255, .96); --sb-solid: #faf9f6; --sb-shell: rgba(255, 255, 255, .18); --sb-shell-edge: rgba(255, 255, 255, .32); --sb-hl: 1;
} }

/* the page, one column on the scene. The old start layout (a narrowed article, a flex column) steps aside */
body[data-page="start"] .art-wrap { width: auto !important; }
body[data-page="start"] .art.sb { position: relative; isolation: isolate; display: block; max-width: none; min-height: 100vh; min-height: 100svh; margin: 0; padding: 152px var(--gutter, 24px) 96px; }
body[data-page="start"] .art.sb > .st { flex: none; width: 100%; max-width: var(--pd-w, 1080px); margin: 0 auto; }
body[data-page="start"] .sb .st > section { display: block; flex: none; min-width: 0; }

/* the scene, still (a page to act on, not to scroll through), dissolving into the page at its foot */
.sb-scene { position: absolute; top: 0; left: 0; right: 0; z-index: -1; height: max(100vh, 860px); height: max(100svh, 860px); overflow: hidden; pointer-events: none; background: #010101;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 200px), rgb(0 0 0 / .7) calc(100% - 120px), rgb(0 0 0 / .25) calc(100% - 50px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 200px), rgb(0 0 0 / .7) calc(100% - 120px), rgb(0 0 0 / .25) calc(100% - 50px), transparent);
  transition: height .6s var(--sb-ease); }
.sb-sky { position: absolute; inset: 0; background: radial-gradient(200% 83% at 50% 0, #1b2228 0%, #353f44 42%, #d39794 100%); }
.sb-l { position: absolute; left: 50%; bottom: 0; width: max(100vw, 1000px); translate: -50% 0; }
.sb-l img { display: block; width: 100%; height: auto; }
.sb-near { bottom: -5%; }
.sb-shrubs { bottom: -2%; }
@media (prefers-reduced-motion: no-preference) {
  .sb-far { animation: sb-rise 1.2s var(--sb-ease) backwards; }
  .sb-near { animation: sb-rise 1.2s var(--sb-ease) .08s backwards; }
  .sb-shrubs { animation: sb-rise 1.2s var(--sb-ease) .16s backwards; }
}
@keyframes sb-rise { from { opacity: 0; transform: translateY(40px); } }
/* the brief reads on the page, so its scene is a band behind the head */
.sb:has(.st[data-at="brief"]) .sb-scene { height: 400px; }
.sb:has(.st[data-at="brief"]) :is(.sb-near, .sb-shrubs) { display: none; }

/* the head, in the scene's light ink in both themes */
.sb-head { --pd-tx: #fff3f0; --pd-mid: rgba(255, 255, 255, .86); --pd-dim: rgba(255, 255, 255, .58); --pd-chip: rgba(255, 255, 255, .07); --pd-edge: rgba(255, 255, 255, .16);
  display: grid; justify-items: center; text-align: center; color: var(--pd-mid); }
.sb-h1 { margin: 24px 0 0; max-width: 14em; color: var(--pd-tx); font: 500 clamp(38px, 4.6vw, 58px)/1.1 var(--disp); letter-spacing: -.045em; text-wrap: balance; outline: none; }
.sb-lede { margin: 18px 0 0; max-width: 34em; color: var(--pd-mid); font-size: 16px; line-height: 1.55; text-wrap: balance; }
.sb-h2 { margin: 22px 0 0; max-width: 18em; color: var(--pd-tx); font: 500 clamp(30px, 3.4vw, 44px)/1.15 var(--disp); letter-spacing: -.04em; text-wrap: balance; outline: none; }
.sb-h2s { font-size: clamp(26px, 2.6vw, 34px); }
.sb-back { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px 0 11px; border-radius: 99px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .86); font: 400 14px/1 var(--sans); letter-spacing: -.01em; text-decoration: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color 250ms var(--sb-ease), color 250ms var(--sb-ease); }
.sb-back:hover { background: rgba(255, 255, 255, .14); color: #fff3f0; }
.sb-back .chev { width: 16px; height: 16px; }
.sb-back:active { scale: .97; }
.sb :is(a, button):focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* a section shows with a short rise, on the choice and on Back */
@media (prefers-reduced-motion: no-preference) {
  html.js .st[data-at="call"] > .st-call > *, html.js .st[data-at="brief"] > .st-brief > * { animation: sb-in .6s var(--sb-ease) backwards; }
  html.js .st[data-at] > section > :nth-child(2) { animation-delay: .07s; }
  html.js .st[data-at] > section > :nth-child(3) { animation-delay: .14s; }
}
@keyframes sb-in { from { opacity: 0; transform: translateY(14px); } }

/* the glass, a shell and a card in it, as the client login */
.sb-shell, .sb-opt { position: relative; padding: 8px; border-radius: 32px; background: var(--sb-shell); box-shadow: inset 0 0 0 1px var(--sb-shell-edge); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.sb-card, .sb-oc { position: relative; border-radius: 24px; background: var(--sb-card); box-shadow: inset 0 0 0 1px var(--sb-line); color: var(--sb-mid); }
.sb-card::before, .sb-oc::before { content: ''; position: absolute; top: 0; left: 32px; right: 32px; height: 1px; background: #fff3f0; opacity: var(--sb-hl); -webkit-mask-image: linear-gradient(90deg, transparent, #000 50%, transparent); mask-image: linear-gradient(90deg, transparent, #000 50%, transparent); pointer-events: none; }

/* the choice, two equal cards */
.sb-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 404px)); justify-content: center; gap: 24px; margin-top: 64px; }
.sb-opt { display: block; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform 350ms var(--sb-ease); }
.sb-oc { display: grid; grid-template-rows: auto 1fr auto; gap: 24px; min-height: 252px; padding: 28px 28px 22px; transition: background-color 250ms var(--sb-ease); }
.sb-oi { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 99px; background: var(--sb-sec); box-shadow: inset 0 0 0 1px var(--sb-line); color: var(--sb-tx); }
.sb-oi .ic { width: 22px; height: 22px; }
.sb-ot { display: grid; align-content: start; gap: 8px; }
.sb-ot b { color: var(--sb-tx); font: 500 23px/1.2 var(--disp); letter-spacing: -.035em; }
.sb-ot span { color: var(--sb-mid); font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.sb-of { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--sb-line); }
.sb-meta { display: inline-flex; align-items: center; gap: 8px; color: var(--sb-dim); font-size: 14px; }
.sb-meta .ic { width: 16px; height: 16px; }
.sb-go { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--sb-edge); color: var(--sb-tx); transition: background-color 250ms var(--sb-ease), color 250ms var(--sb-ease), box-shadow 250ms var(--sb-ease); }
.sb-go .chev { width: 16px; height: 16px; transition: transform 350ms var(--sb-ease); }
.sb-opt:hover .sb-oc { background: var(--sb-card-h); }
.sb-opt:hover .sb-go { background: var(--sb-pri); color: var(--sb-pri-tx); box-shadow: none; }
.sb-opt:hover .sb-go .chev { transform: translateX(2px); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .sb-opt:hover { transform: translateY(-3px); } }
.sb-opt:active { transform: scale(.985); transition-duration: 120ms; }
.sb-opt:focus-visible { outline: 2px solid #fff3f0; outline-offset: 4px; }
.sb-or { margin: 40px 0 0; color: rgba(255, 255, 255, .62); font-size: 14px; text-align: center; }
.sb-or a { color: rgba(255, 255, 255, .88); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .3); transition: color 200ms ease-out, text-decoration-color 200ms ease-out; }
.sb-or a:hover { color: #fff3f0; text-decoration-color: currentColor; }

/* Book a call, the picker as the hero with what the call is beside it */
.sb-call { display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: 20px; align-items: start; margin-top: 48px; }
.sb-bk { --wb-bg: var(--sb-solid); --wb-tx: var(--sb-tx); --wb-mid: var(--sb-mid); --wb-dim: var(--sb-dim); --wb-edge: var(--sb-line); --wb-edge2: var(--sb-edge); --wb-on: var(--sb-pri); --wb-on-tx: var(--sb-pri-tx);
  padding: 28px 28px 24px; background: var(--sb-solid); min-height: 420px; }
.sb-aw { position: sticky; top: 96px; }
.sb-about { padding: 26px 24px 24px; }
.sb .sb-ah { margin: 0 0 18px; color: var(--sb-tx); font: 500 16px/1.3 var(--disp); letter-spacing: -.02em; }
.sb-al { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.sb-al li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: start; }
.sb-ai { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 99px; background: var(--sb-sec); box-shadow: inset 0 0 0 1px var(--sb-line); color: var(--sb-tx); }
.sb-ai .ic { width: 18px; height: 18px; }
.sb-al b { display: block; margin-top: 1px; color: var(--sb-tx); font: 500 14.5px/1.35 var(--sans); letter-spacing: -.01em; }
.sb-al li > span:last-child > span { display: block; margin-top: 3px; color: var(--sb-dim); font-size: 13.5px; line-height: 1.5; text-wrap: pretty; }
.sb-alt { margin: 32px 0 0; color: var(--pd-dim); font-size: 14px; text-align: center; }
.sb-alt a { color: var(--pd-mid); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--pd-edge-2); }
.sb-alt a:hover { color: var(--pd-tx); text-decoration-color: currentColor; }
/* confirming takes the whole width, so Calendly lays its form out beside its details with Schedule in view */
.sb-call:has(.bk-mount[data-step="confirm"]) { grid-template-columns: minmax(0, 1fr); }
.sb-call:has(.bk-mount[data-step="confirm"]) .sb-aw { display: none; }
/* the picker's fallbacks keep its card */
.sb .bk-fail { margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--sb-sec); color: var(--sb-mid); font-size: 14.5px; }
.sb .bk-fail[hidden] { display: none; }
.sb .bk-fail a { color: var(--sb-tx); text-decoration: underline; text-underline-offset: 3px; }
.sb .bk-nojs { margin: 0; }

/* Tell us about the project, the flow on the page under a shorter band */
.sb .st-brief { min-height: calc(100vh - 220px); }
@media (min-width: 901px) { .sb .st-brief { display: flex !important; flex-direction: column; } .sb .st-brief > .bf { flex: 1; } html:not(.js) .sb .st-brief { display: block !important; } html.js .sb .st:not([data-at="brief"]) > .st-brief { display: none !important; } }
.sb-head-b { margin-bottom: 104px; }

/* ---------- the brief, rebuilt 2026-10-11 (old-components item 4) ----------
   home's pieces on the page. Powder's tab progress line, home's chips for
   the answers so far, the tiles of a question in one card in card shell,
   the client login's fields, a glass bar floating at the foot, Powder's
   pricing rows for the review and home's launch timeline on the sent
   screen. The buttons are the site's .pill and .ghost as they are, nothing
   here restyles them. The fl- classes are site.js hooks (flowForm), and the
   v18 rules still on them in site.css are overridden here until that
   stylesheet's cleanup. Markup from startForm() in build.mjs. */
.st-brief {
  --bf-ease: cubic-bezier(.22, 1, .36, 1);
  --bf-field: rgba(255, 255, 255, .04); --bf-edge: rgba(255, 255, 255, .12); --bf-edge-h: rgba(255, 255, 255, .24); --bf-focus: rgba(255, 243, 240, .75); --bf-ring: rgba(255, 243, 240, .14); --bf-af: #222;
  --bf-err: #ffb4a6; --bf-err-edge: rgba(255, 150, 130, .7); --bf-err-ring: rgba(255, 140, 120, .18); --bf-ink: #171717;
  --bf-line: rgba(255, 255, 255, .14); --bf-fill: rgba(255, 255, 255, .65);
  --bf-on: #262626; --bf-on-edge: rgba(255, 255, 255, .3); --bf-on-tx: #fff3f0; --bf-tk: #fff3f0; --bf-tk-tx: #000;
  --bf-glass: rgba(23, 23, 23, .78); --bf-glass-edge: rgba(255, 255, 255, .14); --bf-glass-hl: rgba(255, 255, 255, .2); --bf-glass-tx: rgba(255, 255, 255, .8); --bf-glass-sh: rgba(0, 0, 0, .4);
  --bf-tc: rgba(255, 255, 255, .1); --bf-tc-edge: rgba(255, 255, 255, .1);
}
:root[data-theme="light"] .st-brief {
  --bf-field: #fff; --bf-edge: rgba(0, 0, 0, .14); --bf-edge-h: rgba(0, 0, 0, .28); --bf-focus: #17140f; --bf-ring: rgba(23, 20, 15, .12); --bf-af: #fff;
  --bf-err: #b42318; --bf-err-edge: #d4452f; --bf-err-ring: rgba(212, 69, 47, .14); --bf-ink: #faf9f6;
  --bf-line: rgba(0, 0, 0, .12); --bf-fill: rgba(0, 0, 0, .45);
  --bf-on: #17140f; --bf-on-edge: #17140f; --bf-on-tx: #fff3f0; --bf-tk: #fff3f0; --bf-tk-tx: #17140f;
  --bf-glass: rgba(250, 249, 246, .82); --bf-glass-edge: rgba(0, 0, 0, .1); --bf-glass-hl: rgba(255, 255, 255, .9); --bf-glass-tx: rgba(0, 0, 0, .7); --bf-glass-sh: rgba(0, 0, 0, .1);
  --bf-tc: rgba(0, 0, 0, .05); --bf-tc-edge: rgba(0, 0, 0, .1);
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .st-brief {
  --bf-field: #fff; --bf-edge: rgba(0, 0, 0, .14); --bf-edge-h: rgba(0, 0, 0, .28); --bf-focus: #17140f; --bf-ring: rgba(23, 20, 15, .12); --bf-af: #fff;
  --bf-err: #b42318; --bf-err-edge: #d4452f; --bf-err-ring: rgba(212, 69, 47, .14); --bf-ink: #faf9f6;
  --bf-line: rgba(0, 0, 0, .12); --bf-fill: rgba(0, 0, 0, .45);
  --bf-on: #17140f; --bf-on-edge: #17140f; --bf-on-tx: #fff3f0; --bf-tk: #fff3f0; --bf-tk-tx: #17140f;
  --bf-glass: rgba(250, 249, 246, .82); --bf-glass-edge: rgba(0, 0, 0, .1); --bf-glass-hl: rgba(255, 255, 255, .9); --bf-glass-tx: rgba(0, 0, 0, .7); --bf-glass-sh: rgba(0, 0, 0, .1);
  --bf-tc: rgba(0, 0, 0, .05); --bf-tc-edge: rgba(0, 0, 0, .1);
} }

.bf { container: bf / inline-size; display: block; width: 100%; max-width: var(--pd-w, 1080px); margin: 0 auto; color: var(--pd-tx); font-family: var(--sans); letter-spacing: -.01em; }
.bf[hidden], .bf-done[hidden], .bf-after[hidden], .bf-when[hidden] { display: none !important; }
.bf .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.st-brief :is(button, a, input, textarea):focus-visible { outline: 2px solid var(--pd-tx); outline-offset: 2px; }

/* progress, Powder's tab line. Six joined segments on a hairline, each fills as its step opens, so the line grows step by step */
.bf-top { display: grid; gap: 20px; margin-bottom: 56px; }
.bf-progrow { display: flex; align-items: center; gap: 24px; min-height: 30px; }
.bf .fl-prog { position: relative; flex: 1; display: flex; gap: 0; height: 2px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.bf .fl-prog::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--bf-line); }
.bf .fl-prog i { position: relative; flex: 1; height: 2px; border-radius: 0; background: none; overflow: visible; }
.bf .fl-prog b { display: block; height: 2px; border-radius: 0; background: var(--bf-fill); transform: scaleX(0); transform-origin: left center; transition: transform 600ms var(--bf-ease); }
.bf .fl-prog i.on b { transform: none; }
.bf-count { margin: 0; color: var(--pd-dim); font-size: 14px; line-height: 21px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bf-tog { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 13px; border: 0; border-radius: 99px; background: var(--pd-chip); box-shadow: inset 0 0 0 1px var(--pd-edge); color: var(--pd-mid); font: 400 14px/1 var(--sans); white-space: nowrap; cursor: pointer; transition: box-shadow 250ms var(--bf-ease), color 250ms var(--bf-ease); }
.bf-tog::before { content: ''; position: absolute; inset: -7px -2px; }
.bf-tog:hover { color: var(--pd-tx); box-shadow: inset 0 0 0 1px var(--pd-edge-2); }
.bf-tog svg { width: 14px; height: 14px; transition: transform 400ms var(--bf-ease); }
.bf-tog[aria-expanded="true"] svg { transform: rotate(180deg); }
.bf-tog[hidden] { display: none; }

/* the answers so far, home's chips, each one edits its step */
.bf-sum { min-height: 30px; }
.bf-sum ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bf-sum li[hidden] { display: none; }
.bf-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; max-width: 340px; height: 30px; padding: 0 14px 0 13px; border: 0; border-radius: 99px; background: var(--pd-chip); box-shadow: inset 0 0 0 1px var(--pd-edge); color: var(--pd-tx); font: 400 14px/1 var(--sans); letter-spacing: -.01em; cursor: pointer; transition: box-shadow 250ms var(--bf-ease); }
.bf-chip::before { content: ''; position: absolute; inset: -7px -2px; }
.bf-chip:hover { box-shadow: inset 0 0 0 1px var(--pd-edge-2); }
.bf-chip i { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--pd-tx); }
.bf-chip small { flex: none; color: var(--pd-dim); font-size: 14px; }
.bf-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) { .bf-sum li:not([hidden]) { animation: bf-rise 600ms var(--bf-ease) backwards; } }
.bf.at-review .bf-sum { visibility: hidden; }
@container bf (min-width: 560px) { .bf-tog { display: none !important; } }
@container bf (max-width: 559.98px) {
  .bf-top { margin-bottom: 40px; }
  .bf-sum { min-height: 0; display: none; }
  .bf.sum-open .bf-sum { display: block; }
  .bf-sum ul { display: grid; gap: 0; padding: 4px 18px; border-radius: 16px; background: var(--pd-card); box-shadow: inset 0 0 0 1px var(--pd-edge); }
  .bf-sum li + li .bf-chip { border-top: 1px solid var(--pd-edge); }
  .bf-chip { display: grid; grid-template-columns: 5px 76px minmax(0, 1fr); gap: 12px; width: 100%; max-width: none; height: auto; min-height: 48px; padding: 12px 0; border-radius: 0; background: none; box-shadow: none; text-align: left; line-height: 1.4; }
  .bf-chip:hover { box-shadow: none; }
  .bf-chip::before { display: none; }
  .bf-chip span { white-space: normal; overflow-wrap: anywhere; }
}

/* the stage, one question at a time. Steps share one cell, so it is as tall as the tallest and the bar never jumps */
.bf-stage { position: relative; display: grid; min-width: 0; overflow-x: clip; overflow-clip-margin: 12px; }
.bf .fl-step { min-width: 0; align-self: start; }
html.js .bf .fl-step { grid-area: 1 / 1; opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(var(--x, 36px), 0, 0);
  transition: opacity 260ms var(--bf-ease), transform 600ms var(--bf-ease), visibility 0s linear 600ms; }
html.js .bf .fl-step.on { opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity 600ms var(--bf-ease) 90ms, transform 600ms var(--bf-ease) 60ms, visibility 0s; }
@container bf (max-width: 699.98px) { html.js .bf .fl-step:not(.on) { position: absolute; inset: 0 0 auto 0; } }
@media (prefers-reduced-motion: no-preference) {
  html.js .bf .fl-step.on :is(.fl-card, .bf-fields > *, .bf-notes, .bf-rshell) { animation: bf-rise 600ms var(--bf-ease) backwards; animation-delay: calc(120ms + var(--i, 0) * 60ms); }
  html.js .bf .fl-step.on .bf-fields > :nth-child(2) { --i: 1; }
  html.js .bf .fl-step.on .bf-notes { --i: 2; }
}
html.js .bf.first .fl-step { transition: none !important; }
html.js .bf.first .fl-step.on * { animation: none !important; }
@keyframes bf-rise { from { opacity: 0; transform: translateY(12px); } }

/* the question, a section heading, centred */
.bf-qh { margin: 0 auto 40px; text-align: center; }
body[data-page="start"] .bf .fl-q { margin: 0 !important; color: var(--pd-tx); font: 500 clamp(28px, 3vw, 40px)/1.35 var(--disp) !important; letter-spacing: -.04em !important; text-wrap: balance; outline: none; }
.bf-sub { margin: 10px 0 0; color: var(--pd-dim); font-size: 16px; line-height: 24px; }
.bf-tz { display: inline-flex; align-items: center; gap: 8px; }
.bf-tz .ic { width: 16px; height: 16px; }

/* the tiles of a question share one shell, home's card in card */
.bf-shell { margin: 0 auto; padding: 8px; border-radius: 24px; background: var(--pd-well); box-shadow: inset 0 0 0 1px var(--pd-edge); transition: box-shadow 250ms var(--bf-ease); }
.bf-shell:has([aria-invalid="true"]) { box-shadow: inset 0 0 0 1px var(--bf-err-edge); }
.bf-n2 { max-width: 640px; }
.bf-tiles { display: grid; gap: 8px; }
.bf-n5 .bf-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bf-n4 .bf-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bf-n2 .bf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-brief .bf .fl-card { position: relative; display: grid; grid-template-rows: auto auto; align-content: space-between; justify-items: start; gap: 32px; min-height: 140px; padding: 20px; border: 0; border-radius: 16px; background: var(--pd-card); box-shadow: inset 0 0 0 1px var(--pd-edge); color: var(--pd-tx); text-align: left; cursor: pointer; transform: none; -webkit-tap-highlight-color: transparent;
  transition: background-color 250ms var(--bf-ease), box-shadow 250ms var(--bf-ease), color 250ms var(--bf-ease); }
.st-brief .bf .fl-card:is(:hover, :active) { transform: none; background: var(--pd-card); }
.st-brief .bf .fl-card input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.bf-ic { display: block; width: 24px; height: 24px; color: var(--pd-mid); transition: color 250ms var(--bf-ease); }
.bf-ic .ic { display: block; width: 24px; height: 24px; }
.st-brief .bf .fl-tx { color: inherit; font: 400 16px/24px var(--sans); letter-spacing: -.16px; text-wrap: balance; }
.bf-tick { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--pd-edge-2); color: var(--bf-tk-tx); transition: background-color 250ms var(--bf-ease), box-shadow 250ms var(--bf-ease); }
.bf-tick .tk { width: 12px; height: 12px; opacity: 0; transform: scale(.5); transition: opacity 250ms var(--bf-ease), transform 400ms var(--bf-ease); }
.st-brief .bf .fl-card:has(input:checked) { background: var(--bf-on); box-shadow: inset 0 0 0 1px var(--bf-on-edge), inset 0 1px 0 rgba(255, 255, 255, .08); color: var(--bf-on-tx); }
.st-brief .bf .fl-card:has(input:checked) .bf-ic { color: var(--bf-on-tx); }
.st-brief .bf .fl-card:has(input:checked) .bf-tick { background: var(--bf-tk); box-shadow: none; }
.st-brief .bf .fl-card:has(input:checked) .bf-tick .tk { opacity: 1; transform: none; }
.st-brief .bf .fl-card:has(input:focus-visible) { outline: 2px solid var(--pd-tx); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .st-brief .bf .fl-card.pop .bf-tick { animation: bf-pop 400ms var(--bf-ease); } }
@keyframes bf-pop { 0% { transform: scale(.8); } 60% { transform: scale(1.08); } }
/* under 900 across the tiles become rows, two columns, then one */
@container bf (max-width: 899.98px) {
  .bf-n5 .bf-tiles, .bf-n4 .bf-tiles, .bf-n2 .bf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bf-n5 .bf-tiles > :last-child { grid-column: 1 / -1; }
  .st-brief .bf .fl-card { grid-template-columns: 24px minmax(0, 1fr) 22px; grid-template-rows: none; align-content: center; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; border-radius: 14px; }
  .bf-tick { position: static; }
  .bf-shell { padding: 6px; border-radius: 20px; }
  .bf-tiles { gap: 6px; }
}
@container bf (max-width: 519.98px) {
  .bf-n5 .bf-tiles, .bf-n4 .bf-tiles, .bf-n2 .bf-tiles { grid-template-columns: minmax(0, 1fr); }
  .bf-n5 .bf-tiles > :last-child { grid-column: auto; }
  .bf-qh { margin-bottom: 28px; }
}

/* the fields, the client login's */
.bf-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 640px; margin: 0 auto; }
.bf-notes { max-width: 640px; margin: 16px auto 0; }
@container bf (max-width: 559.98px) { .bf-fields { grid-template-columns: minmax(0, 1fr); } }
.bf-field { display: grid; gap: 8px; min-width: 0; }
.bf-label { display: flex; align-items: baseline; gap: 8px; color: var(--pd-mid); font: 500 14px/21px var(--sans); }
.bf-opt { color: var(--pd-dim); font: 500 12px/18px var(--sans); font-style: normal; letter-spacing: -.24px; text-transform: uppercase; }
.bf-field :is(input, textarea) { display: block; width: 100%; height: 48px; margin: 0; padding: 0 16px; border: 1px solid var(--bf-edge); border-radius: 12px; background: var(--bf-field); color: var(--pd-tx); font: 400 16px/1.5 var(--sans); letter-spacing: -.01em; caret-color: var(--pd-tx); outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--bf-af-sh, 0 0 #0000), var(--bf-ring-sh, 0 0 #0000); -webkit-appearance: none; appearance: none;
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out; }
.bf-field textarea { height: auto; min-height: 112px; padding: 12px 16px; resize: vertical; }
.bf-field :is(input, textarea)::placeholder { color: var(--pd-dim); opacity: .7; }
.bf-field :is(input, textarea):hover { border-color: var(--bf-edge-h); }
.st-brief .bf-field :is(input, textarea):focus { border-color: var(--bf-focus); outline: 2px solid transparent; --bf-ring-sh: 0 0 0 4px var(--bf-ring); }
.bf-field :is(input, textarea)[aria-invalid="true"] { border-color: var(--bf-err-edge); }
.bf-field :is(input, textarea)[aria-invalid="true"]:focus { border-color: var(--bf-err-edge); --bf-ring-sh: 0 0 0 4px var(--bf-err-ring); }
.bf-field input:-webkit-autofill { -webkit-text-fill-color: var(--pd-tx); --bf-af-sh: inset 0 0 0 100px var(--bf-af); transition: border-color 200ms ease-out, box-shadow 200ms ease-out, background-color 9999s; }
/* one error per step, under it, the login's mark beside it */
body[data-page="start"] .bf .fl-err { display: none; }
body[data-page="start"] .bf .fl-err:not(:empty) { display: flex; justify-content: center; align-items: flex-start; gap: 8px; max-width: 640px; margin: 20px auto 0 !important; color: var(--bf-err); font-size: 14px !important; line-height: 21px; }
.bf .fl-err::before { content: '!'; flex: none; display: grid; place-items: center; width: 16px; height: 16px; margin-top: 2.5px; border-radius: 50%; background: var(--bf-err); color: var(--bf-ink); font: 700 10px/1 var(--sans); }
@media (prefers-reduced-motion: no-preference) { .bf .fl-err:not(:empty) { animation: bf-rise 400ms var(--bf-ease); } }

/* the call times, only when there is no booking link */
.bf-sched { display: grid; gap: 24px; width: 100%; max-width: 820px; margin: 0 auto; }
@container bf (min-width: 680px) { .bf-sched { grid-template-columns: 332px minmax(0, 1fr); align-items: start; } }
.bf-sched fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.bf-mon, .bf-sl { margin: 0 0 12px; padding: 0; color: var(--pd-tx); font: 500 16px/24px var(--sans); }
.bf-wk, .bf-days { display: grid; grid-template-columns: repeat(7, minmax(40px, 1fr)); gap: 4px; }
.bf-wk span { padding-bottom: 6px; color: var(--pd-dim); font-size: 12px; text-align: center; }
.st-brief .bf .fl-day { position: relative; display: grid; place-items: center; height: 44px; border: 0; border-radius: 12px; background: none; color: var(--pd-faint); font: 400 14px/1 var(--sans); font-variant-numeric: tabular-nums; }
.st-brief .bf label.fl-day { background: var(--pd-card); box-shadow: inset 0 0 0 1px var(--pd-edge); color: var(--pd-tx); cursor: pointer; transform: none; }
.st-brief .bf label.fl-day:has(input:checked), .st-brief .bf .fl-slot:has(input:checked) { background: var(--bf-on); box-shadow: inset 0 0 0 1px var(--bf-on-edge); color: var(--bf-on-tx); }
.st-brief .bf .fl-slot:has(input:checked) :is(b, small) { color: var(--bf-on-tx); }
.st-brief .bf :is(label.fl-day, .fl-slot):has(input:focus-visible) { outline: 2px solid var(--pd-tx); outline-offset: 2px; }
.bf-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.st-brief .bf .fl-slot { position: relative; display: grid; align-content: center; gap: 2px; min-height: 52px; padding: 8px 14px; border: 0; border-radius: 12px; background: var(--pd-card); box-shadow: inset 0 0 0 1px var(--pd-edge); cursor: pointer; transform: none; }
.st-brief .bf .fl-slot b { color: var(--pd-tx); font: 400 16px/1.3 var(--sans); }
.st-brief .bf .fl-slot small { color: var(--pd-dim); font-size: 12px; }

/* the review, Powder's pricing rows in home's shell */
.bf-rshell { max-width: 720px; margin: 0 auto; padding: 8px; border-radius: 24px; background: var(--pd-well); box-shadow: inset 0 0 0 1px var(--pd-edge); }
.bf-review { margin: 0; padding: 4px 32px; border-radius: 16px; background: var(--pd-card); box-shadow: inset 0 0 0 1px var(--pd-edge); }
.bf-review > div { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; column-gap: 16px; min-height: 61px; padding: 8px 0; border-bottom: 1px solid var(--pd-edge); }
.bf-review > div:last-child { border-bottom: 0; }
.bf-review dt { color: var(--pd-mid); font: 500 14px/21px var(--sans); }
.bf-review dd { margin: 0; color: var(--pd-tx); font-size: 16px; line-height: 24px; overflow-wrap: anywhere; }
.bf-review button { min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--pd-mid); font: 400 14px/1 var(--sans); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; cursor: pointer; transition: color 250ms var(--bf-ease), text-decoration-color 250ms var(--bf-ease); }
.bf-review button:hover { color: var(--pd-tx); text-decoration-color: currentColor; }
@container bf (max-width: 559.98px) {
  .bf-review { padding: 4px 18px; }
  .bf-review > div { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 0; }
  .bf-review dt { grid-column: 1; }
  .bf-review dd { grid-column: 1; }
  .bf-review dd.fl-ed { grid-column: 2; grid-row: 1 / span 2; }
}

/* the bar, a glass pill that floats at the foot while the step runs past the screen */
.bf-bar { position: sticky; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 3; display: flex; align-items: center; gap: 16px; max-width: 960px; margin: 56px auto 0; padding: 8px; border-radius: 768px; background: var(--bf-glass); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: inset 0 0 0 1px var(--bf-glass-edge), inset 0 1px 0 var(--bf-glass-hl), 0 18px 40px var(--bf-glass-sh); }
.bf-bar [hidden] { display: none !important; }
/* a button keeps the browser's grey fill until a class sets one, this resets it at no specificity so .ghost's own fill always wins */
:where(.st-brief) :where(button.ghost) { background: transparent; }
.bf-bar :is(.bf-back, .bf-next) { gap: 6px; cursor: pointer; }
.bf-bar .chev { width: 16px; height: 16px; flex: none; }
.bf-next .chev { transition: transform 250ms var(--bf-ease); }
.bf-next:hover .chev { transform: translateX(2px); }
.bf-g { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; margin: 0; color: var(--bf-glass-tx); font-size: 14px; line-height: 21px; }
.bf-g .ic { flex: none; width: 18px; height: 18px; }
.bf-g2 { display: none; color: var(--pd-dim); }
.bf-hint { display: none; align-items: center; gap: 6px; padding-right: 8px; color: var(--pd-dim); font-size: 13px; white-space: nowrap; }
.bf-hint kbd { display: inline-grid; place-items: center; height: 22px; padding: 0 7px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--pd-edge-2); color: var(--pd-mid); font: 500 12px/1 var(--sans); }
@media (hover: hover) and (pointer: fine) { @container bf (min-width: 1000px) { .bf-hint { display: inline-flex; } } }
@container bf (max-width: 639.98px) {
  .bf-bar { justify-content: space-between; margin-top: 40px; }
  .bf-bar .bf-g { display: none; }
  .bf-g2 { display: flex; margin-top: 20px; }
  .bf-next { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: no-preference) { .bf.leaving { opacity: 0; transform: translateY(-8px); transition: opacity 260ms var(--bf-ease), transform 600ms var(--bf-ease); } }

/* the sent screen, Powder's trust circle, the heading, home's launch timeline and the buttons */
.bf-done { display: grid; justify-items: center; width: 100%; max-width: 680px; margin: 0 auto; padding-bottom: 24px; text-align: center; }
.bf-done-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--bf-tc); box-shadow: inset 0 0 0 1px var(--bf-tc-edge); color: var(--pd-tx); }
.bf-done-ic .tk { width: 24px; height: 24px; }
body[data-page="start"] .sb .bf-done h2 { margin: 28px 0 0 !important; color: var(--pd-tx); font: 500 clamp(28px, 3vw, 40px)/1.35 var(--disp) !important; letter-spacing: -.04em; text-wrap: balance; outline: none; }
.bf-done-p { max-width: 32em; margin: 12px 0 0; color: var(--pd-mid); font-size: 16px; line-height: 24px; text-wrap: pretty; }
.bf-when { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 16px; width: 100%; margin-top: 40px; padding: 16px 16px 16px 20px; border-radius: 16px; background: var(--pd-card); box-shadow: inset 0 0 0 1px var(--pd-edge); text-align: left; }
.bf-when-t { display: grid; gap: 2px; min-width: 0; }
.bf-when-t b { color: var(--pd-tx); font: 500 16px/24px var(--sans); }
.bf-when-t small { color: var(--pd-dim); font-size: 14px; }
.bf-after { width: 100%; margin-top: 56px; }
.bf-log { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 32px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--bf-line); text-align: left; }
.bf-log li { position: relative; display: grid; align-content: start; gap: 6px; padding: 28px 24px 0 0; }
.bf-log-dot { position: absolute; top: -3px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--pd-mid); }
.bf-log b { color: var(--pd-tx); font-size: 16px; font-weight: 400; line-height: 24px; }
.bf-log span { color: var(--pd-dim); font-size: 14px; line-height: 21px; text-wrap: pretty; }
.bf-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 48px; }
.bf-btns > * { gap: 8px; cursor: pointer; }
.bf-btns .ic { width: 18px; height: 18px; flex: none; }
.bf-done-note { margin: 20px 0 0; color: var(--pd-dim); font-size: 14px; line-height: 21px; }
.bf-done-note a { color: var(--pd-mid); text-decoration: underline; text-decoration-color: var(--pd-edge-2); text-underline-offset: 3px; transition: color 250ms var(--bf-ease), text-decoration-color 250ms var(--bf-ease); }
.bf-done-note a:hover { color: var(--pd-tx); text-decoration-color: currentColor; }
@media (max-width: 640px) {
  .bf-log { grid-template-columns: minmax(0, 1fr); border-top: 0; border-left: 1px solid var(--bf-line); margin-left: 3px; }
  .bf-log li { padding: 0 0 24px 24px; }
  .bf-log li:last-child { padding-bottom: 0; }
  .bf-log-dot { top: 9px; left: -3px; }
  .bf-when { grid-template-columns: 24px minmax(0, 1fr); }
  .bf-when .pill { grid-column: 1 / -1; justify-content: center; }
}
@media (prefers-reduced-motion: no-preference) {
  .bf-done:not([hidden]) > * { animation: bf-rise 600ms var(--bf-ease) backwards; }
  .bf-done:not([hidden]) > :nth-child(2) { animation-delay: 100ms; }
  .bf-done:not([hidden]) > :nth-child(3) { animation-delay: 200ms; }
  .bf-done:not([hidden]) > :nth-child(n+4) { animation-delay: 300ms; }
  .bf-done:not([hidden]) .bf-done-ic { animation: bf-mark 600ms var(--bf-ease) backwards; }
}
@keyframes bf-mark { from { opacity: 0; transform: scale(.6); } }
@media (prefers-reduced-motion: reduce) { html.js .bf .fl-step, html.js .bf .fl-step.on, .bf .fl-prog b, .bf-tick, .bf-tick .tk { transition: none !important; } }

/* without script every step shows in turn and the button sends, the parts that need the script stay out */
html:not(.js) .bf :is(.bf-top, .bf-back, .bf-hint, [data-step="time"], [data-step="review"]) { display: none !important; }
html:not(.js) .bf .fl-step + .fl-step { margin-top: 72px; }
html:not(.js) .bf-bar { position: static; }

/* without script, every section in turn */
html:not(.js) .sb .st > section + section { margin-top: 96px; padding-top: 0; border-top: 0; }
html:not(.js) .sb-back, html:not(.js) .sb-alt { display: none !important; }

/* tablets, the card about the call goes under the picker */
@media (max-width: 1080px) {
  .sb-call { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-left: auto; margin-right: auto; }
  .sb-aw { position: static; }
  .sb-al { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
}
@media (max-width: 900px) {
  body[data-page="start"] .art.sb { padding: 112px 16px 64px; }
  .sb-h1 { font-size: 36px; line-height: 1.15; }
  .sb-h2 { font-size: 30px; }
  .sb-h2s { font-size: 26px; }
  .sb-lede { font-size: 15px; }
  .sb-opts { margin-top: 44px; }
  .sb-call { margin-top: 32px; }
  .sb-head-b { margin-bottom: 96px; }
  .sb .st-brief { min-height: 0; }
  .sb:has(.st[data-at="brief"]) .sb-scene { height: 300px; }
}
@media (max-width: 700px) {
  .sb-opts { grid-template-columns: minmax(0, 480px); gap: 16px; }
  .sb-opt, .sb-shell { padding: 6px; border-radius: 26px; }
  .sb-oc, .sb-card { border-radius: 20px; }
  .sb-oc { grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: none; column-gap: 14px; row-gap: 14px; min-height: 0; padding: 18px 18px 14px; }
  .sb-oi { width: 44px; height: 44px; }
  .sb-ot b { font-size: 19px; }
  .sb-ot span { font-size: 14.5px; }
  .sb-of { grid-column: 1 / -1; padding-top: 12px; }
  .sb-bk { padding: 18px 14px 16px; min-height: 0; }
  .sb-about { padding: 22px 18px 20px; }
  .sb-al { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sb-or, .sb-alt { margin-top: 28px; }
}
/* the call panel uses the page column, not the old narrower card */
body[data-page="start"] .sb .st-call { max-width: none; margin: 0; padding: 0; }
/* without script the later heads sit on the page, so they take the page's ink */
html:not(.js) .sb :is(.st-call, .st-brief) .sb-head { --pd-tx: inherit; --pd-mid: inherit; --pd-dim: inherit; }
html:not(.js) .sb-bk { min-height: 0; }