/* /book/: two ways in (a time on the calendar, or a written proposal) and what to expect.
   Layout only; every color, size, radius and shadow comes from ka.css tokens.

   One hero holds the whole page: the title, then the booking card and the side column (Tyler, the
   steps, email). From 1120px the side column sits on the left and stays in view while the card
   scrolls; narrower screens stack title, card, side. The flow field runs in the hero's top part
   only: scattered points gather into lanes and run down into the booking card (book.js sizes the
   field and draws its path from the card's position).

   Cal.com's booker shows the month and the day's times side by side only when its frame is wider
   than 768px; narrower, it stacks square day cells over a long list of times. Its side-by-side
   content is about 680px wide and centered, so once the embed's box is 680px or wider the frame is
   drawn 776px wide and centered: its empty edges run under the card's clipped sides. */

/* ---------- hero and grid ---------- */
.hero.page.book-hero{padding:116px 0 clamp(64px,8vw,104px)}
.book-hero>.gridbg{bottom:auto;height:640px}
/* the title block's two lines are placed on their own (display: contents keeps h1 + .sub as siblings
   for the title intro): on wide screens the subtitle opens the left column and the card starts
   right under the title, so the whole month shows on a 768px-tall laptop screen */
.book-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "sub" "card" "side"}
.book-head{display:contents}
.book-hero h1{grid-area:head;margin-bottom:14px}
.book-hero .sub{grid-area:sub;max-width:46ch;margin-bottom:28px}
.book-card{grid-area:card;min-width:0;align-self:start}
.book-side{grid-area:side;min-width:0;margin-top:44px}
@media (min-width:1120px){
  .book-grid{grid-template-columns:minmax(0,1fr) minmax(0,724px);grid-template-areas:"head head" "sub card" "side card";grid-template-rows:auto auto 1fr;column-gap:48px}
  .book-hero h1{margin-bottom:30px}
  .book-hero .sub{margin:-4px 0 30px;font-size:var(--fs-lg)}
  .book-side{align-self:start;margin-top:0}
}
/* the side column stays in view beside a long card (the note form, Cal's booking step) when the
   screen is tall enough to show all of it */
@media (min-width:1120px) and (min-height:760px){.book-side{position:sticky;top:calc(var(--hdr-h) + 20px)}}
@media (max-width:640px){
  .hero.page.book-hero{padding:100px 0 56px}
  .book-hero .sub{margin-bottom:24px}
  .book-side{margin-top:40px}
}

/* the field covers the hero's top part only (book.js sets its height): fade it at its own bottom
   edge, and on stacked layouts keep it whole down to the card instead of ka.css's top-only fade */
.book-hero>.ka-field{bottom:auto;height:min(100%,560px)}
@media (max-width:960px){
  .book-hero>.ka-field{-webkit-mask-image:linear-gradient(90deg,rgb(0 0 0/.55),#000 45%),linear-gradient(#000 calc(100% - 90px),transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,rgb(0 0 0/.55),#000 45%),linear-gradient(#000 calc(100% - 90px),transparent);mask-composite:intersect}
}
/* the pause toggle sits where the motion is: top right, under the header */
.hero.book-hero>.ka-pause{top:calc(var(--hdr-h) + 12px);bottom:auto}

/* ---------- the booking card ---------- */
.book-card{padding:10px;overflow:clip;border-radius:var(--r-lg)}
/* solid, never frosted: the field's lanes slide under it, and nothing moves behind the calendar */
@media (min-width:961px){.hero.book-hero>.ka-field~.wrap .book-card{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* two ways to book: a segmented control (tabs); the white thumb slides to the chosen one */
.bk-tabs{position:relative;overflow:clip;display:grid;grid-template-columns:1fr 1fr;padding:4px;border:1px solid var(--tint-line);border-radius:14px;background:var(--tint-2)}
.bk-tab{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:none;color:var(--body);font:600 var(--fs-ui)/1.15 var(--sans);cursor:pointer;transition:color var(--dur-hover) var(--ease-ui);-webkit-tap-highlight-color:transparent}
.bk-tab svg{flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bk-tab:hover{color:var(--ink)}
.bk-tab[aria-selected=true],.bk-tab[aria-selected=true]:hover{color:var(--blue)}
.bk-tab:focus-visible{outline-offset:-2px}
.bk-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:10px;background:var(--surface);box-shadow:var(--sh);pointer-events:none;transition:translate var(--dur-enter) var(--ease-out)}
.bk-tabs[data-sel=proposal] .bk-thumb{translate:100% 0}
/* the page opened on a tab (book.js): the thumb starts there */
.bk-tabs.no-anim .bk-thumb{transition:none}
html:not(.js) .bk-tabs{display:none}
/* the second tab's label: in full where it fits, "Written proposal" on narrow phones (the full name stays for screen readers) */
.bk-ts{display:none}
@media (max-width:420px){.bk-tab{gap:7px;padding:0 8px}.bk-tab svg{display:none}.bk-tab .bk-tl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.bk-ts{display:inline}}

.bk-panel{padding-top:10px}
#panel-proposal{padding:18px clamp(6px,2vw,18px) 10px}
/* without JS the tabs are hidden and both panels show: the calendar's note, then the whole form. With
   JS the form panel waits out of view until book.js has chosen the tab (.bk-ready), then its hidden
   attribute decides */
html.js .book-card:not(.bk-ready) #panel-proposal{display:none}
html:not(.js) #panel-proposal{margin-top:8px;border-top:1px solid var(--line)}
.pf-title{margin:4px 0 8px;font-size:var(--fs-2xl)}
html.js .pf-title{display:none}

/* ---------- calendar: placeholder until the embed is ready, then the embed fades in ---------- */
.cal-stage{position:relative;container:cal/inline-size}
.cal-inline{position:relative;width:100%}
@container cal (min-width:680px){.cal-inline{width:max(100%,776px);margin-inline:min(0px,(100% - 776px) / 2)}}
/* waiting, the frame stays laid out but unseen (and inert): Cal holds its ready events while its
   frame is display:none, so only a hard failure (script blocked, link failed) removes it */
html.js .cal-stage:not(.is-ready) .cal-inline{position:absolute;top:0;left:0;opacity:0;pointer-events:none}
.cal-stage.is-ready .cal-inline{opacity:1;transition:opacity 520ms var(--ease-out)}
.cal-stage.is-ready .cal-skel{position:absolute;top:0;left:0;right:0;opacity:0;pointer-events:none;transition:opacity 280ms var(--ease-ui)}
.cal-stage.is-failed .cal-inline{display:none}
html:not(.js) .cal-skel,html:not(.js) .cal-alt{display:none}
.cal-frame{display:block;width:100%;min-height:820px;border:0;background:var(--surface)}

/* the placeholder copies Cal's two layouts: stacked (narrow) and month beside times (680px and up) */
.cal-skel{position:relative;overflow:hidden;padding:16px 20px 20px}
.cal-skel i{display:block}
.sk-head{display:flex;align-items:center;gap:10px;height:30px}
.sk-bar{width:118px;height:12px;border-radius:6px;background:var(--line)}
.sk-dot{flex:none;width:22px;height:22px;border-radius:50%;background:var(--tint)}
.sk-bar+.sk-dot{margin-left:auto}
.sk-pill{flex:none;width:76px;height:26px;margin-left:auto;border-radius:8px;background:var(--tint)}
.sk-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;align-items:center;height:50px;margin:6px 0 8px;border-block:1px solid var(--line)}
.sk-week i{height:9px;margin:0 32%;border-radius:5px;background:var(--line)}
.sk-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.sk-days i{position:relative;aspect-ratio:1;border-radius:9px}
.sk-days i:not(.on)::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:8px;margin:-4px 0 0 -6px;border-radius:4px;background:var(--line)}
.sk-days i.on{background:var(--tint-2)}
.sk-slots{margin-top:65px}
.sk-slots .sk-head{margin-bottom:5px}
.sk-slot{height:36px;margin:8px 4px 0;border:1px solid var(--line);border-radius:8px}
/* the stacked placeholder runs as long as a full day of times (24), so the card keeps its height when
   the calendar comes in; side by side, the box clips the list as Cal's column does */
@container cal (min-width:680px){
  .cal-skel{display:grid;grid-template-columns:440px 200px;justify-content:center;column-gap:41px;height:570px;padding:16px 0 0}
  .sk-cal{position:relative}
  .sk-cal::after{content:"";position:absolute;top:-16px;bottom:44px;right:-21px;width:1px;background:var(--line)}
  .sk-week{height:auto;margin:27px 0 19px;border:0}
  .sk-days i{aspect-ratio:auto;height:59px}
  .sk-slots{margin:0}
  .sk-slots .sk-head{margin-bottom:3px}
  .sk-slot{margin-inline:0}
}
/* a gentle sheen crosses the placeholder while it waits (never under reduced motion) */
@media (prefers-reduced-motion:no-preference){
  .cal-skel::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 25%,color-mix(in srgb,var(--surface) 72%,transparent) 50%,transparent 75%);translate:-100% 0;animation:bk-sheen 1.6s var(--ease-io) .3s infinite;pointer-events:none}
}
@keyframes bk-sheen{to{translate:100% 0}}

/* still waiting: two ways around it, over the placeholder (no layout moves when it shows or goes) */
.cal-slow{display:none}
.cal-stage.is-slow .cal-slow{display:block;position:absolute;z-index:2;top:150px;left:50%;translate:-50% 0;width:max-content;max-width:calc(100% - 32px);margin:0;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--sh);font-size:var(--fs-sm);line-height:1.5;color:var(--body);text-align:center}
.cal-slow b{color:var(--ink)}
@container cal (max-width:679.98px){.cal-slow b{display:block}}
@container cal (min-width:680px){.cal-stage.is-slow .cal-slow{top:230px}}
@media (prefers-reduced-motion:no-preference){.cal-stage.is-slow .cal-slow{animation:bk-rise 520ms var(--ease-out)}}
@keyframes bk-rise{from{opacity:0;translate:-50% 10px}}

.cal-alt{margin:10px 10px 6px;max-width:none;font-size:var(--fs-sm);color:var(--mut)}
.cal-alt #bk-tz:not(:empty)::after{content:" "}
/* before the calendar shows: the way around it; after: the full page, which has Cal's time zone menu */
.cal-stage:not(.is-ready)~.cal-alt .alt-ready,.cal-stage:is(.is-ready,.is-slow)~.cal-alt .alt-wait{display:none}
.cal-stage:is(.is-failed,.is-stalled)~.cal-alt{display:none}
.cal-nojs{margin:8px 10px 0;padding:24px 8px;max-width:none;font-size:var(--fs-ui);color:var(--body)}
.cal-fail{padding:36px clamp(12px,3vw,28px)}
.cal-fail p{max-width:52ch;font-size:var(--fs-ui);color:var(--body)}
.cal-fail b{display:block;margin-bottom:4px;font:700 var(--fs-lg)/1.3 var(--disp);color:var(--ink)}

/* ---------- booked, and note sent: one confirmation style ---------- */
.bk-done{display:flex;align-items:flex-start;gap:14px;margin:4px 0 12px;padding:16px 18px;border:1px solid var(--tint-line);border-radius:var(--r);background:var(--tint)}
/* focused only to keep the keyboard's place when the form gives way to it; not a control */
.bk-done:focus{outline:none}
.bk-done-ico{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--grad-btn)}
.bk-done-ico svg{fill:none;stroke:var(--surface);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bk-done-t{min-width:0;padding-top:2px}
.bk-done-h{margin-bottom:4px;font:700 var(--fs-lg)/1.3 var(--disp);letter-spacing:-.01em;color:var(--ink)}
.bk-done p:not(.bk-done-h){font-size:var(--fs-ui);line-height:1.55}
.bk-ok{margin:0}

/* ---------- the written-proposal form ----------
   Four steps with JS (book.js shows one fieldset at a time under a four-part progress bar); without JS
   every fieldset shows and Send mails the fields. */
.pf-lede{max-width:60ch}
.pf{gap:16px}
.pf-carry{margin:0;max-width:none;padding:10px 14px;border-radius:var(--r-sm);background:var(--tint);border:1px solid var(--tint-line);font-size:var(--fs-sm);color:var(--body)}
.pf-prog{display:grid;gap:9px}
.pf-prog[hidden]{display:none}
.pf-count{margin:0;font:600 var(--fs-xs)/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.pf-count b{color:var(--blue);font-weight:700}
.pf-bar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.pf-bar li{position:relative;height:5px;overflow:hidden;border-radius:3px;background:var(--line)}
.pf-bar li::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--grad);scale:0 1;transform-origin:0 50%;transition:scale var(--dur-sig) var(--ease-out)}
.pf-bar li.now::after{scale:.34 1}
.pf-bar li.on::after{scale:1 1}
@media (prefers-reduced-motion:reduce){.pf-bar li::after{transition:none}}
.pf-step{display:grid;gap:14px;min-width:0;margin:0;padding:0;border:0}
.pf-step[hidden]{display:none}
.pf-legend{display:block;float:left;width:100%;margin:0 0 2px;padding:0;font:700 var(--fs-xl)/1.25 var(--disp);letter-spacing:-.02em;color:var(--ink)}
.pf-legend+*{clear:both}
.pf-legend:focus{outline:none}
html.js .pf-sn{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pf-sn{font:600 var(--fs-xs)/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);display:block;margin-bottom:4px}
.fld{min-width:0}
.form .opt-l{margin-left:6px;font-weight:500;letter-spacing:.04em;text-transform:none;color:var(--mut)}
.form .hint{margin:6px 0 0;max-width:none;font-size:13.5px;line-height:1.45;color:var(--mut)}
.fld-err{margin:6px 0 0;max-width:none;font-size:13.5px;font-weight:600;line-height:1.4;color:var(--ink)}
.fld-err::before{content:"";display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:var(--error);vertical-align:1px}
.form [aria-invalid=true]{border-color:var(--error)}
.pf textarea{min-height:96px}
#pf-problem{min-height:132px}
.pf .opts-set>.hint{margin-top:8px}
/* the quiz's picks and note, at the top of the problem step */
.pf-from{display:grid;gap:12px;padding:14px;border:1px solid var(--tint-line);border-radius:var(--r-sm);background:var(--tint)}
.pf-from[hidden]{display:none}
.pf-from .opt{background:var(--surface)}
@media (max-width:560px){.form .pf-from .opts{grid-template-columns:minmax(0,1fr)}}
.pf-note{display:grid;gap:4px}
.pf-note[hidden]{display:none}
.pf-note .label{margin:0}
.pf-note-t{margin:0;max-width:none;font-size:var(--fs-sm);line-height:1.5;color:var(--body)}
.pf-x{justify-self:start;min-height:36px;padding:0;border:0;background:none;color:var(--blue);font:600 var(--fs-sm)/1.2 var(--sans);cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
/* review */
.pf-review{gap:16px}
.pf-sum{display:grid;gap:12px}
.pf-g{padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.pf-gh{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.pf-gh h4{margin:0;font:700 var(--fs-ui)/1.3 var(--disp);color:var(--ink)}
.pf-edit{min-height:40px;padding:0 10px;margin-right:-10px;border:0;border-radius:8px;background:none;color:var(--blue);font:600 var(--fs-sm)/1 var(--sans);cursor:pointer}
.pf-edit:hover{background:var(--tint)}
.pf-g dl{display:grid;grid-template-columns:minmax(0,1fr);gap:2px 16px;margin:0}
.pf-g dt{margin-top:6px;font:600 12px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.pf-g dd{margin:0;font-size:var(--fs-sm);line-height:1.5;color:var(--ink);white-space:pre-line;overflow-wrap:anywhere}
@media (min-width:640px){.pf-g dl{grid-template-columns:minmax(0,11em) minmax(0,1fr)}.pf-g dt{margin-top:0;padding-top:3px}}
.pf-none{margin:0;font-size:var(--fs-sm);color:var(--mut)}
.pf-what{padding:14px 16px;border-radius:var(--r-sm);background:var(--tint)}
.pf-what .label{margin:0 0 8px}
.pf-what ol{margin:0;padding-left:20px;display:grid;gap:6px;font-size:var(--fs-sm);line-height:1.5;color:var(--body)}
/* the buttons: Back on the left, Next or Send on the right */
.pf-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:4px}
.pf-foot [hidden]{display:none}
.pf-next,.pf-send{margin-left:auto}
.pf-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 10px;margin-left:-10px;border:0;border-radius:10px;background:none;color:var(--blue);font:600 var(--fs-ui)/1 var(--sans);cursor:pointer}
.pf-back:hover{background:var(--tint)}
html:not(.js) .pf-send{margin-left:0}
.pf-nojs{margin:0;max-width:none;font-size:var(--fs-sm);color:var(--body)}
@media (max-width:480px){.pf-foot .btn{flex:1 1 auto;justify-content:center}}
/* the send's progress in words ("Sending in about 18 seconds."), on its own line under the buttons. A
   live region, so it is never display:none; empty, it leaves the flex row and takes no space */
.pf-status{flex:1 0 100%;margin:0;max-width:none;font-size:var(--fs-sm);line-height:1.5;color:var(--body)}
.pf-status:empty{position:absolute}
/* Send stays focusable while a request is out (aria-disabled), so focus keeps its place */
.pf-send[aria-disabled=true]{opacity:.72;cursor:progress}
.pf-back:disabled{opacity:.5;cursor:default}
.pf-edit:disabled{color:var(--mut);cursor:default}
.form-err:focus{outline:none}
/* answers are kept in this browser until sent; one tap clears them (shared computers) */
.pf .pf-keep{margin:0;max-width:none;font-size:13.5px;line-height:1.5;color:var(--mut)}
/* a 34px tall target that doesn't make its line taller */
.pf-clear{display:inline-block;margin:-8px 0 -8px 2px;padding:8px 2px;border:0;background:none;color:var(--blue);font:600 13.5px/1.2 var(--sans);cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.bk-quiz{grid-area:quiz;margin:22px 0 0;font-size:var(--fs-sm);color:var(--body)}

/* ---------- the note form (older markup, kept for the chips) ---------- */
.bk-lede{margin:0 0 18px;font-size:var(--fs-ui);color:var(--body)}
.opts-set{border:0;padding:0;margin:0;min-width:0}
.opts-set legend{padding:0;margin-bottom:8px}
.opts .opt{min-height:44px}
/* .form input is full width in ka.css; checkboxes inside the chips keep their own size */
.form .opts input[type=checkbox]{flex:none;width:auto;padding:0}
@media (max-width:560px){
  .form .opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .form .opts label.opt{min-width:0;justify-content:flex-start;white-space:normal;line-height:1.25;border-radius:12px;padding:8px 10px}
}
/* a field left wrong shows it: book.js marks it (aria-invalid) with a message under it; without JS the
   browser's own check does (:user-invalid). With JS :user-invalid stays off, because Chrome applies it to
   every empty required field once Enter has submitted an earlier step */
html:not(.js) .form :is(input,textarea):user-invalid{border-color:var(--error)}
.form-go{margin-top:6px}
.form-note{margin-top:12px;max-width:none}
.form-err{background:var(--tint);border:1px solid var(--tint-line);border-left:3px solid var(--error);border-radius:var(--r-sm);padding:14px 16px;font-size:var(--fs-ui);color:var(--body)}
.form-err b{color:var(--ink)}
@media (max-width:480px){.form-go .btn{display:flex;width:100%}}

/* ---------- the side: Tyler, what to expect, email ---------- */
.book-side{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"who" "seq" "quiz" "mail";align-content:start}
.bk-who{grid-area:who;display:flex;align-items:center;gap:14px;margin-bottom:24px}
.bk-who img{flex:none;width:56px;height:56px;border:3px solid var(--surface);border-radius:50%;object-fit:cover;background:var(--tint);box-shadow:var(--sh)}
.bk-who p{margin:0;font-size:var(--fs-sm);line-height:1.5;color:var(--body);text-wrap:pretty}
.bk-who b{display:block;font:700 var(--fs-ui)/1.3 var(--disp);letter-spacing:-.01em;color:var(--ink)}
.bk-seq{grid-area:seq}
.bk-label{margin:0 0 16px;font:700 var(--fs-xs)/1.25 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.bk-steps{--tl-node:32px;--tl-gap:14px;margin:0;max-width:none}
.bk-steps .tl-step{padding-bottom:22px}
.bk-steps .tl-step:last-child{padding-bottom:0}
.bk-steps .tl-n{border-radius:10px;font-size:14px}
.bk-steps .tl-n svg{display:block;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.bk-steps .tl-body{padding-top:5px}
.bk-steps .tl-when{margin-bottom:4px}
.bk-steps .tl-body h3{margin-bottom:3px;font-size:var(--fs-ui);line-height:1.35;letter-spacing:-.01em}
.bk-steps .tl-body>p:not(.tl-when){font-size:var(--fs-sm);line-height:1.5;color:var(--body)}
.bk-steps .bk-last .tl-body{padding-top:0}
.bk-mail{grid-area:mail;margin:24px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--body)}
@media (min-width:761px) and (max-width:1119px){
  .book-side{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-areas:"who seq" "quiz seq" "mail seq";column-gap:56px;margin-top:20px}
  .bk-mail{align-self:start}
}

/* "Other" on Type, Timeline and Budget: the visitor names it in a short box under the choice (13 Oct 2026) */
.pf-other{margin-top:10px}
.opts-set .pf-other{margin-top:12px}