/* v2-book.css — /book-a-demo/ from the same handoff: the lead card in the Contact us composer style (ct-form),
   then the Cal.com step in its place (book-v3). Linked after v2-chrome.css on /book-a-demo/ only. */

/* ======== ct-form.css ======== */
/* ct-form.css — the Contact us form rules (.ct-*, .cp-b*) lifted from the contact page sheets, so Book a demo can share its look (change #17i). */
.cp-b{display:inline-flex;align-items:center;height:50px;padding:0 24px;border-radius:999px;font-size:15.5px;font-weight:500;text-decoration:none;transition:background .2s,border-color .2s,transform .2s}
.cp-b-p{background:#14120F;color:#FAF9F5}
.cp-b-p:hover{background:#000;transform:translateY(-1px)}
.cp-b-s{color:#14120F;border:1px solid rgba(26,24,21,.18)}
.cp-b-s:hover{border-color:#14120F}
.ct-card{display:flex;flex-direction:column;gap:24px;padding:clamp(24px,3vw,44px);border-radius:24px;background:radial-gradient(60% 70% at 100% 100%,rgba(217,188,114,.18),transparent 70%),linear-gradient(160deg,#FFFEFB,#F6F1E6);box-shadow:0 0 0 1px rgba(184,150,62,.22),0 2px 0 rgba(90,66,20,.05),0 40px 70px -40px rgba(90,66,20,.35)}
.ct-card-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid rgba(26,24,21,.08)}
.ct-eb{font-family:var(--serif);font-style:italic;font-size:20px;color:#8A6B24}
.ct-to{font-size:14px;color:rgba(26,24,21,.55)}
.ct-to b{font-weight:500;color:#14120F;display:inline-block}
.ct-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
.ct-f{display:flex;flex-direction:column;gap:10px}
.ct-f>span{font-size:14px;font-weight:500;color:rgba(26,24,21,.6)}
.ct-f input,.ct-f textarea{width:100%;min-width:0;box-sizing:border-box;font:inherit;font-size:17px;color:#14120F;background:transparent;border:0;border-bottom:1px solid rgba(26,24,21,.18);border-radius:0;padding:6px 0 10px;outline:none;resize:vertical;transition:border-color .2s,box-shadow .2s}
.ct-f input:focus,.ct-f textarea:focus{border-bottom-color:#8A6B24;box-shadow:0 1px 0 #8A6B24}
.ct-grow textarea{min-height:110px}
.ct-chips{display:flex;flex-wrap:wrap;gap:8px}
.ct-chip{appearance:none;border:0;cursor:pointer;height:38px;padding:0 15px;border-radius:999px;background:#fff;color:rgba(26,24,21,.7);font:inherit;font-size:14.5px;box-shadow:0 0 0 1px rgba(26,24,21,.1),0 2px 0 rgba(26,24,21,.04);transition:background .2s,color .2s,box-shadow .2s,transform .15s}
.ct-chip:hover{color:#14120F;transform:translateY(-1px)}
.ct-chip:active{transform:translateY(1px)}
.ct-chip.is-on{background:#14120F;color:#fff;box-shadow:0 0 0 1px #14120F,0 8px 16px -10px rgba(20,18,15,.6)}
.ct-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ct-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ct-note{margin:0;font-size:14px;color:rgba(26,24,21,.5)}
.ct-note.is-err{color:#A4372A}
.ct-send{display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer}
.ct-side{display:flex;flex-direction:column;gap:12px;padding:clamp(24px,3vw,40px);border-radius:24px;background:#fff;box-shadow:0 0 0 1px rgba(26,24,21,.08),0 30px 60px -44px rgba(26,24,21,.35)}
.ct-side h3{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.3vw,34px);letter-spacing:-.03em;line-height:1.05;color:#14120F}
.ct-side>p{margin:0;font-size:16px;color:rgba(58,47,20,.7)}
.ct-dl{margin:14px 0 0;display:flex;flex-direction:column}
.ct-dl>div{display:grid;grid-template-columns:80px minmax(0,1fr);gap:12px;padding:14px 0;border-top:1px solid rgba(26,24,21,.08)}
.ct-dl dt{font-size:14px;color:rgba(26,24,21,.5)}
.ct-dl dd{margin:0;font-size:16px;color:#14120F}
.ct-dl a{color:#14120F;text-decoration:none;border-bottom:1px solid rgba(26,24,21,.2)}
.ct-dl a:hover{color:#8A6B24;border-color:#8A6B24}
.ct-demo{margin-top:auto;align-self:flex-start}
@media (max-width:900px){.ct-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.ct-rt:nth-child(3n){border-right:1px solid rgba(26,24,21,.12)}
.ct-rt:nth-child(2n){border-right:0}
.ct-fx{grid-template-columns:1fr}
.ct-copy{opacity:1}}
@media (max-width:600px){.ct-grid{grid-template-columns:1fr}
.ct-rt{border-right:0!important;padding-left:0;padding-right:0}
.ct-rt:hover{background:none}
.ct-row{grid-template-columns:1fr}
.ct-card,.ct-side{border-radius:18px}
.ct-foot{flex-direction:column-reverse;align-items:stretch;text-align:center}
.ct-send{justify-content:center}
.ct-h2{font-size:clamp(30px,8vw,40px)!important}}
@media (prefers-reduced-motion:reduce){.ct-live{animation:none}}
@media (max-width:600px){.ct-copy{right:0}}
.ct-card{background:#fff!important;box-shadow:0 0 0 1px rgba(26,24,21,.08),0 2px 0 rgba(26,24,21,.03),0 30px 60px -44px rgba(26,24,21,.35)!important}
.ct-eb{color:#14120F!important}
.ct-chip{background:#F6F5F1!important;box-shadow:inset 0 0 0 1px rgba(26,24,21,.06)!important}
.ct-chip.is-on{background:#14120F!important;box-shadow:0 0 0 1px #14120F,0 8px 16px -10px rgba(20,18,15,.6)!important}
.ct-f input:focus,.ct-f textarea:focus{border-bottom-color:#14120F!important;box-shadow:0 1px 0 #14120F!important}
.ct-card .ct-f:has(input,textarea){position:relative;gap:0}
.ct-card .ct-f:has(input,textarea)>span{position:absolute;left:17px;top:19px;font-size:16px;font-weight:400;color:rgba(26,24,21,.5);pointer-events:none;transform-origin:left top;transition:transform .18s ease,color .18s ease}
.ct-card .ct-f input,.ct-card .ct-f textarea{height:60px;padding:26px 16px 8px!important;border:1px solid rgba(26,24,21,.14)!important;border-radius:12px!important;background:#FAFAF8!important;font-size:16.5px!important;box-shadow:none!important;transition:border-color .18s,box-shadow .18s,background .18s!important}
.ct-card .ct-f textarea{height:auto;min-height:150px;padding-top:30px!important;resize:none}
.ct-card .ct-f input:hover,.ct-card .ct-f textarea:hover{border-color:rgba(26,24,21,.28)!important}
.ct-card .ct-f input:focus,.ct-card .ct-f textarea:focus{background:#fff!important;border-color:#14120F!important;box-shadow:0 0 0 3px rgba(20,18,15,.08)!important}
.ct-card .ct-f:has(input:focus,textarea:focus)>span,.ct-card .ct-f:has(input:not(:placeholder-shown),textarea:not(:placeholder-shown))>span{transform:translateY(-10px) scale(.78)}
.ct-card .ct-f:has(input:focus,textarea:focus)>span{color:#14120F}
.ct-card .ct-f:has(input:user-invalid)>span{color:#A4372A}
.ct-card .ct-f input:user-invalid{border-color:#A4372A!important}
.ct-card .ct-row{gap:14px}
.ct-card{gap:18px!important}
.ct-side{position:relative;overflow:hidden;padding-bottom:0!important}
.ct-side .ct-demo{position:absolute;left:clamp(24px,3vw,40px);bottom:clamp(24px,3vw,40px);z-index:2;background:#fff}
@media (max-width:900px){.ct-char{width:min(70%,320px)}}
@media (max-width:600px){.ct-char{width:78%}
.ct-side .ct-demo{position:static;margin:4px 0 16px}
.ct-side{padding-bottom:0!important}}
.ct-card input[type="date"]{color:#14120F}
.ct-card .ct-f:has(input[type="date"])>span{transform:translateY(-10px) scale(.78)}
body .ct-side h3,body .rfp-col h3{font-family:var(--sans)!important;font-weight:500!important;font-size:18px!important;letter-spacing:0!important;line-height:1.3!important}
body .ct-eb{font-family:var(--sans)!important;font-style:normal!important;font-weight:500!important;font-size:16px!important}
body .ct-rt p,body .ct-side>p,body .faq-item p{font-size:17px!important;line-height:1.7!important;color:rgba(31,29,26,.72)!important}
@media (max-width:900px){body .ct-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:600px){body .ct-grid{grid-template-columns:1fr!important;gap:12px!important}}
/* forms: quiet cards, outlined chips */
body .ct-card,body .ct-side{border-radius:16px!important;background:#fff!important;box-shadow:none!important;border:1px solid rgba(26,24,21,.1)!important}
body .ct-card{padding:clamp(22px,2.6vw,36px)!important;gap:20px!important}
body .ct-card-top{padding-bottom:0!important;border-bottom:0!important}
body .ct-eb{font-size:17px!important;color:#1f1d1a!important}
body .ct-to{font-size:14px!important;color:rgba(31,29,26,.5)!important}
body .ct-to b{font-weight:400!important;color:rgba(31,29,26,.75)!important}
body .ct-card .ct-f input,body .ct-card .ct-f textarea{background:#fff!important;border:1px solid rgba(26,24,21,.14)!important;border-radius:10px!important;box-shadow:none!important}
body .ct-card .ct-f input:focus,body .ct-card .ct-f textarea:focus{border-color:rgba(26,24,21,.55)!important;box-shadow:0 0 0 3px rgba(26,24,21,.06)!important}
body .ct-f>span{font-size:14px!important;color:rgba(31,29,26,.55)!important}
body .ct-chips{gap:6px!important}
body .ct-chip{height:34px!important;padding:0 13px!important;font-size:14px!important;background:#fff!important;color:rgba(31,29,26,.7)!important;box-shadow:inset 0 0 0 1px rgba(26,24,21,.14)!important;transform:none!important}
body .ct-chip:hover{color:#1f1d1a!important;box-shadow:inset 0 0 0 1px rgba(26,24,21,.3)!important}
body .ct-chip.is-on{background:#F4F3EF!important;color:#1f1d1a!important;box-shadow:inset 0 0 0 1.5px #1f1d1a!important}
body .ct-send{height:44px!important;padding:0 20px!important;font-size:15px!important;box-shadow:none!important}
body .ct-note{font-size:14px!important;color:rgba(31,29,26,.5)!important}
@media (max-width:1180px){body .ct-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width:760px){body .ct-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:480px){body .ct-grid{grid-template-columns:1fr!important}}
@media (max-width:640px){.ct-peek{width:130px;right:2%}}
@media (max-width:600px){body .ct-char-anime{width:70%!important}}
@media (max-width:760px){.ct-hero-char{right:50%;transform:translateX(50%);width:200px}}
@media (max-width:820px){.ct-sit{width:190px;right:24px;bottom:calc(100% - 70px)}}
@media (max-width:520px){.ct-sit{width:160px;bottom:calc(100% - 58px)}}
@media (max-width:820px){.ct-sit-p{width:220px!important}}
@media (max-width:520px){.ct-sit-p{width:180px!important;right:8px!important}}
@media (max-width:1000px){.ct-sit-p{clip-path:inset(0 0 23% 0);right:84px!important;width:210px!important}}
@media (max-width:520px){.ct-sit-p{width:170px!important;right:76px!important}}
@media (max-width:520px){.ct-sit-p{right:50%!important;margin-right:-85px}}
/* compose-style forms */
body .ct-card{gap:0!important;padding:0!important;overflow:hidden}
body .ct-card>*{padding-left:clamp(18px,2.4vw,28px);padding-right:clamp(18px,2.4vw,28px)}
body .ct-card .ct-card-top{order:0;padding-top:16px!important;padding-bottom:16px!important;border-bottom:1px solid rgba(26,24,21,.08)!important;background:#FAF9F6}
body .ct-card .ct-f:not(:has(input,textarea)){order:1}
body .ct-card .ct-row{order:2}
body .ct-card .ct-grow{order:3}
body .ct-card .ct-foot{order:4}
body .ct-card .ct-row{display:grid!important;grid-template-columns:1fr!important;gap:0!important}
body .ct-card .ct-row>.ct-f,body .ct-card .ct-f:not(:has(input,textarea)){display:grid!important;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:12px!important;padding-top:14px;padding-bottom:14px;border-bottom:1px solid rgba(26,24,21,.08);position:static!important}
body .ct-card .ct-row>.ct-f{padding-top:4px;padding-bottom:4px}
body .ct-card .ct-f>span{position:static!important;transform:none!important;font-size:14px!important;font-weight:400!important;color:rgba(31,29,26,.5)!important}
body .ct-card .ct-f input{height:48px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;font-size:16px!important}
body .ct-card .ct-f input:focus{box-shadow:none!important}
body .ct-card .ct-row>.ct-f:focus-within{background:#FCFBF8}
body .ct-card .ct-row>.ct-f:focus-within>span{color:#1f1d1a!important}
body .ct-card .ct-f input::placeholder{color:transparent}
body .ct-card .ct-grow{display:block!important;position:static!important;padding-top:6px;padding-bottom:0}
body .ct-card .ct-grow>span{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
body .ct-card .ct-grow textarea{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;padding:14px 0!important;min-height:180px!important;font-size:16px!important;line-height:1.6!important}
body .ct-card .ct-grow textarea::placeholder{color:rgba(31,29,26,.4)}
body .ct-card .ct-foot{padding-top:14px;padding-bottom:16px;border-top:1px solid rgba(26,24,21,.08);background:#FAF9F6}
body .ct-card .ct-row>.ct-f:has(input:user-invalid)>span{color:#A4372A!important}
@media (max-width:520px){body .ct-card .ct-row>.ct-f,body .ct-card .ct-f:not(:has(input,textarea)){grid-template-columns:1fr;gap:6px!important}
body .ct-card .ct-row>.ct-f{padding-top:10px}
body .ct-card .ct-f input{height:36px!important}}
body .ct-card .ct-row{padding-left:0!important;padding-right:0!important}
body .ct-card .ct-row>.ct-f{padding-left:clamp(18px,2.4vw,28px);padding-right:clamp(18px,2.4vw,28px)}
body .ct-card .ct-f:not(:has(input,textarea)){align-items:start!important}
body .ct-card .ct-f:not(:has(input,textarea))>span{padding-top:8px}
body .ct-card .ct-grow textarea::placeholder{color:rgba(31,29,26,.4)!important;opacity:1}
body .ct-card .ct-f input,body .ct-card .ct-f textarea,body .ct-card .ct-f input:hover,body .ct-card .ct-f textarea:hover,body .ct-card .ct-f input:focus,body .ct-card .ct-f textarea:focus,body .ct-card .ct-f input:focus-visible,body .ct-card .ct-f textarea:focus-visible{outline:none!important;border:0!important;box-shadow:none!important;background:transparent!important}
body .ct-card .ct-row>.ct-f:focus-within,body .ct-card .ct-grow:focus-within{background:transparent!important}
body .ct-card .ct-row>.ct-f{transition:box-shadow .15s}
body .ct-card .ct-row>.ct-f:focus-within{box-shadow:inset 2px 0 0 #1f1d1a}
body .ct-card .ct-grow:focus-within{box-shadow:inset 2px 0 0 #1f1d1a}
@media (max-width:600px){body .ct-char-anime{width:52%!important}}
body .ct-side{padding-bottom:clamp(24px,3vw,40px)!important}
body .ct-side .ct-demo{position:static!important;margin-top:auto!important;align-self:flex-start}
body .or-form .ct-row{grid-template-columns:1fr!important}
.ct-note{font-size:15.5px;color:var(--muted)}
.ct-side{border-top:1px solid var(--line-2);padding-top:clamp(22px,2.4vw,30px);margin-top:clamp(26px,3vw,38px)}
.ct-side h3{font-family:var(--serif);font-weight:450;font-size:23px;line-height:1.2;color:var(--ink);margin:0}
.ct-side p{font-size:17px;line-height:1.5;color:var(--ink-soft);margin:12px 0 0;text-wrap:pretty}
.ct-side dl{margin:clamp(22px,2.4vw,30px) 0 0}
.ct-side .ct-item{padding:14px 0;border-top:1px solid var(--line-2)}
.ct-side dt{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ct-side dd{margin:7px 0 0;font-size:17px;color:var(--ink)}
.ct-side dd a{color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--terra);padding-bottom:1px}
.ct-side dd a:hover{opacity:.7}
@media (max-width:920px){.ct-grid{grid-template-columns:1fr}
.ct-routes{grid-template-columns:1fr}
.ct-route{border-left:0;padding-left:0}}

/* ======== book-v3.css ======== */
/* book-v3.css — Book a demo rebuilt in the chooser's language (change #17, HANDOFF-CLAUDE-CODE.md).
   Keys → colour bar (character per product) → three fields → Pick a time. Cal.com step untouched. */
html body .bk2 .bk2-in{max-width:760px!important;margin:0 auto!important}
html body .bk2 .bk3{position:relative;display:block!important;padding:32px 32px 26px!important;border-radius:24px!important;background:#FAF9F5!important;border:0!important;box-shadow:0 1px 2px rgba(20,17,13,.06),0 40px 90px -40px rgba(20,17,13,.35)!important}
.bk3 .bk2-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px}
.bk3 .bk2-step{font-size:11.5px!important;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(26,24,21,.55)!important;background:none!important;padding:0!important}
html body .bk3 .bk3-h{margin:0!important;font-family:"Newsreader",Georgia,serif!important;font-size:clamp(34px,4.6vw,48px)!important;font-weight:420!important;line-height:1.02!important;letter-spacing:-.024em!important;color:#1a1714}
.bk3-h em{font-style:italic}
html body .bk3 .bk3-lede{margin:10px 0 0!important;font-size:17px!important;line-height:1.45;color:#575046}

/* keys */
html body .bk3 .bk3-keys:not(#b-a){display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px 12px;margin-top:26px!important;padding:0!important;border:0!important;background:none!important}
.bk3-key{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;-webkit-tap-highlight-color:transparent}
.bk3-key .sm-cap{position:relative;display:block;width:100%;max-width:90px;isolation:isolate;transition:transform .16s cubic-bezier(.3,1.5,.5,1),filter .16s}
.bk3-key .sm-cap img{position:relative;z-index:1;display:block;width:100%;height:auto;filter:drop-shadow(0 2px 1px rgba(26,23,20,.3)) drop-shadow(0 12px 14px rgba(26,23,20,.22))}
.bk3-key .sm-cap::before{content:"";position:absolute;z-index:0;left:7%;right:7%;bottom:-3%;height:22%;border-radius:12px;background:linear-gradient(180deg,#3a342c,#1a1714);box-shadow:inset 0 2px 3px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.7);transition:transform .16s}
.bk3-key .sm-cap svg{position:absolute;z-index:2;left:50%;top:36%;width:28%;height:28%;transform:translate(-50%,-50%)}
.bk3-key.k-cream svg,.bk3-key.k-gold svg{color:rgba(58,44,28,.78)}
.bk3-key.k-ink svg,.bk3-key.k-orange svg{color:rgba(255,244,228,.94)}
html body .bk3 .bk3-key small{display:inline-block;max-width:100%;padding:4px 7px 3px;border-radius:6px;background:#fff;border:1px solid rgba(26,24,21,.12);box-shadow:0 1px 0 rgba(26,24,21,.18);font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.25;text-align:center;color:#1a1714;white-space:normal}
.bk3-key:hover .sm-cap{transform:translateY(-4px)}
.bk3-key[aria-checked="true"] .sm-cap{transform:translateY(6px) scaleY(.975);filter:brightness(.94)}
.bk3-key[aria-checked="true"] .sm-cap::before{transform:translateY(-5px)}
.bk3-key[aria-checked="true"] small{background:#1a1714;color:#FAF9F5;border-color:#1a1714}
.bk3-key:focus-visible .sm-cap{outline:2px solid #2F55FF;outline-offset:4px;border-radius:14px}
.bk3-keys.is-bad .bk3-key small{border-color:#C8321E;box-shadow:0 0 0 2px rgba(200,50,30,.18)}

/* colour bar */
.bk3-bar{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 180px;align-items:center;column-gap:12px;min-height:104px;margin-top:56px;padding:18px 16px 18px 22px;border-radius:18px;background:var(--bg,#E7E0D1);transition:background-color .3s ease,color .3s ease}
.bk3-bar[data-tone="light"]{color:#f3ede2}.bk3-bar[data-tone="dark"]{color:#1a1815}
.bk3-bar-t{display:grid;gap:3px;min-width:0}
.bk3-bar-k{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.72}
.bk3-bar-t b{font-size:20px;font-weight:600;line-height:1.2;letter-spacing:-.01em}
.bk3-bar-t small{font-size:14.5px;line-height:1.35;opacity:.8}
.bk3-char{position:relative;align-self:stretch;margin:-18px 0;clip-path:inset(-300px -300px 0 -300px)}
.bk3-char img{position:absolute;left:50%;bottom:-35px;height:calc(100% + 75px);width:auto;max-width:none;transform:translateX(-50%);filter:drop-shadow(0 8px 12px rgba(0,0,0,.22))}
.bk3-char img.is-in{animation:bkChar .45s cubic-bezier(.3,1.4,.5,1) both}
@keyframes bkChar{from{opacity:0;transform:translate(-50%,28px) scale(.96)}to{opacity:1;transform:translateX(-50%)}}

/* fields */
.bk3-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.bk3-f{display:grid;gap:6px}
.bk3-f-wide{grid-column:1/-1}
.bk3-f span{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(26,24,21,.55)}
html body .bk3 .bk3-f input{height:50px;padding:0 16px;border-radius:14px;border:1px solid rgba(26,24,21,.14);background:#fff;font:500 16px/1 "Hanken Grotesk",system-ui,sans-serif;color:#1a1714;box-shadow:0 1px 0 rgba(26,24,21,.04);transition:border-color .15s,box-shadow .15s;outline:0;width:100%;box-sizing:border-box}
html body .bk3 .bk3-f input:focus{border-color:#1a1714;box-shadow:0 0 0 3px rgba(26,23,20,.08)}
html body .bk3 .bk3-f input.is-bad{border-color:#C8321E;box-shadow:0 0 0 3px rgba(200,50,30,.12)}
.bk3 .bk-err{margin:12px 0 0!important;font-size:14px!important;color:#C8321E}
.bk3-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px}
html body .bk3 .bk3-go{display:inline-flex!important;align-items:center;gap:8px;height:48px!important;padding:0 24px!important;border-radius:999px!important;background:#1a1714!important;color:#FAF9F5!important;border:0!important;font:600 16px/1 "Hanken Grotesk",system-ui,sans-serif!important;cursor:pointer;box-shadow:none!important;transition:background-color .15s}
html body .bk3 .bk3-go:hover{background:#2c2823!important}
.bk3-go svg{transition:transform .15s}.bk3-go:hover svg{transform:translateX(2px)}
.bk3-foot p{margin:0!important;font-size:14px!important;color:#575046}

/* calendar step: hide the picker pieces once the sheet switches */
.bk3.is-cal .bk3-hd .bk3-lede{display:none}

@media (max-width:760px){
  html body .bk2 .bk3{padding:24px 18px 20px!important;border-radius:20px!important}
  html body .bk3 .bk3-keys:not(#b-a){grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px}
  .bk3-key .sm-cap{max-width:76px}
  html body .bk3 .bk3-key small{font-size:9.5px;letter-spacing:.03em;padding:3px 5px}
  .bk3-bar{grid-template-columns:minmax(0,1fr) 128px;margin-top:60px;padding:16px 12px 16px 18px}
  .bk3-bar-t b{font-size:18px}
  .bk3-char img{height:calc(100% + 60px);bottom:-20px}
  .bk3-fields{grid-template-columns:1fr}
  .bk3-go{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.bk3-char img.is-in{animation:none}.bk3-key .sm-cap,.bk3-bar{transition:none}}

/* neutralise the legacy .bk-chip pill styles on the key buttons */
html body .bk3 .bk3-keys:not(#b-a) .bk3-key.bk-chip:not(#b-b){height:auto!important;min-height:0!important;padding:0!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:inherit!important;font:inherit!important;width:auto!important}
html body .bk3 .bk3-keys:not(#b-a) .bk3-key.bk-chip.is-on:not(#b-b){background:none!important;color:inherit!important}

/* tighter keys → bar gap: just enough for the character's 40px rise */
html body .bk3 .bk3-form > .bk3-bar:not(#b-a){margin-top:46px!important}
@media (max-width:760px){html body .bk3 .bk3-form > .bk3-bar:not(#b-a){margin-top:50px!important}}

/* 17c — 8 keys: 4-up on every width; phones get smaller caps so the fields arrive sooner */
html body .bk3 .bk3-keys:not(#b-a){grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media (max-width:760px){
  html body .bk3 .bk3-keys:not(#b-a){gap:12px 8px!important;margin-top:20px!important}
  .bk3-key .sm-cap{max-width:62px!important}
  .bk3-key{gap:7px!important}
  html body .bk3 .bk3-key small{font-size:8.5px!important;letter-spacing:.02em!important;padding:3px 4px!important}
  html body .bk3 .bk3-form > .bk3-bar:not(#b-a){margin-top:46px!important;min-height:88px}
  .bk3-bar-t b{font-size:17px!important}
  .bk3-bar-t small{font-size:13.5px!important}
  html body .bk3 .bk3-lede{font-size:15.5px!important}
}

/* "Something else" shows the Carousel mark instead of a person — no character is reused */
.bk3-bar.is-mark .bk3-char{clip-path:none}
.bk3-bar.is-mark .bk3-char img{height:72px!important;bottom:50%!important;transform:translate(-50%,50%)!important;filter:none!important;animation:none!important}

/* 17e — pressing a key opens the details as a modal (bar + fields + Pick a time) */
.bk3-modal{position:fixed;inset:0;z-index:1000;display:none;place-items:center;padding:20px}
.bk3.bk3-open .bk3-modal{display:grid}
.bk3-scrim{position:absolute;inset:0;background:rgba(26,23,20,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:smFade .2s ease both}
.bk3-sheet{position:relative;width:min(600px,100%);max-height:calc(100dvh - 40px);overflow-y:auto;padding:64px 24px 22px;border-radius:24px;background:#FAF9F5;box-shadow:0 40px 90px -30px rgba(20,17,13,.45);animation:smUp .32s cubic-bezier(.2,.8,.2,1) both}
.bk3-x{position:absolute;top:14px;right:14px;z-index:4;width:36px;height:36px;border:0;border-radius:999px;background:transparent;color:#575046;display:grid;place-items:center;cursor:pointer}
.bk3-x:hover{background:rgba(26,23,20,.06);color:#1a1714}
html body .bk3 .bk3-sheet > .bk3-bar:not(#b-a){margin-top:0!important}
.bk3-sheet .bk3-foot{justify-content:flex-start}
@keyframes smFade{from{opacity:0}to{opacity:1}}
@keyframes smUp{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@media (max-width:560px){.bk3-modal{place-items:end center;padding:0}.bk3-sheet{width:100%;border-radius:22px 22px 0 0;padding:60px 16px calc(18px + env(safe-area-inset-bottom));max-height:94dvh}}

/* 17f — lead first, calendar second: fields at the top, industry as compact chips, then Pick a time */
html body .bk3 .bk3-lead > .bk3-fields:not(#b-a){margin-top:24px!important}
html body .bk3 .bk3-chips:not(#b-a){display:flex!important;flex-wrap:wrap;gap:8px;margin:0!important;padding:0!important;border:0!important;background:none!important}
html body .bk3 .bk3-chips .bk3-chip.bk-chip:not(#b-b){all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;background:#fff;border:1px solid rgba(26,24,21,.14);font:500 15px/1 "Hanken Grotesk",system-ui,sans-serif;color:#1a1714;transition:background-color .15s,color .15s,border-color .15s}
html body .bk3 .bk3-chips .bk3-chip.bk-chip:not(#b-b):hover{border-color:#1a1714}
html body .bk3 .bk3-chips .bk3-chip.bk-chip[aria-checked="true"]:not(#b-b),html body .bk3 .bk3-chips .bk3-chip.bk-chip.is-on:not(#b-b){background:#1a1714;border-color:#1a1714;color:#FAF9F5}
html body .bk3 .bk3-chips .bk3-chip.bk-chip:focus-visible{outline:2px solid #2F55FF;outline-offset:2px}
html body .bk3 .bk3-chips.is-bad .bk3-chip{border-color:#C8321E}
@media (max-width:760px){html body .bk3 .bk3-chips .bk3-chip.bk-chip:not(#b-b){height:40px;padding:0 14px;font-size:14.5px}}

/* 17g — placeholders read as hints; chips hit 40px */
html body .bk3 .bk3-f input::placeholder{color:rgba(26,24,21,.38)!important;opacity:1}
html body .bk3 .bk3-chips:not(#b-a) .bk3-chip.bk-chip:not(#b-b):not(#b-c){height:40px!important;min-height:40px!important;padding:0 16px!important;font-size:15px!important;font-weight:500!important;border-radius:999px!important}
@media (max-width:760px){html body .bk3 .bk3-chips:not(#b-a) .bk3-chip.bk-chip:not(#b-b):not(#b-c){height:44px!important;min-height:44px!important;padding:0 14px!important;font-size:14.5px!important}}
html body #bkpSheet.bk3 .bk3-f input:not(#b-a):not(#b-b)::placeholder{color:rgba(26,24,21,.38)!important;-webkit-text-fill-color:rgba(26,24,21,.38)!important;opacity:1!important}

/* 17h — a character leans out of the card's top-right and changes with "What do you run?" */
html body .bk2 .bk3{overflow:visible!important}
.bk3-hero{position:absolute;right:28px;top:-58px;width:230px;height:250px;pointer-events:none;z-index:2;clip-path:inset(-300px -300px 0 -300px)}
.bk3-hero img{position:absolute;left:50%;bottom:-20px;height:270px;width:auto;max-width:none;transform:translateX(-50%);filter:drop-shadow(0 10px 16px rgba(26,23,20,.18))}
.bk3-hero img.is-in{animation:bkHero .5s cubic-bezier(.3,1.4,.5,1) both}
@keyframes bkHero{from{opacity:0;transform:translate(-50%,24px) scale(.96)}to{opacity:1;transform:translateX(-50%)}}
.bk3-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40px;background:linear-gradient(180deg,rgba(250,249,245,0),#FAF9F5)}
html body .bk3 .bk3-hd{position:relative;z-index:3;max-width:calc(100% - 240px)}
@media (max-width:760px){
  .bk3-hero{right:4px;top:-40px;width:140px;height:160px}
  .bk3-hero img{height:176px;bottom:-16px}
  html body .bk3 .bk3-hd{max-width:calc(100% - 128px)}
}
@media (prefers-reduced-motion:reduce){.bk3-hero img.is-in{animation:none}}

/* 17i — the lead form now IS the Contact us card (.ct-card from ct-form.css): "New demo request · To sales@", same fields, chips, foot. Outer sheet steps back so the card carries the look. */
html body .bk2 .bk3{background:transparent!important;box-shadow:none!important;padding:24px 0 0!important}
html body .bk3 .bk3-ct.ct-card{margin-top:22px}
.bk3-hero::after{display:none}
.bk3-hero{top:-34px}

/* 17j — the character stands ON the card's top edge (right side), clipped there; never over the fields or the header */
html body .bk3 .bk3-ct.ct-card{position:relative;overflow:visible}
html body .bk3 .bk3-ct .bk3-hero{position:absolute!important;right:28px!important;left:auto!important;top:auto!important;bottom:100%!important;width:210px!important;height:176px!important;z-index:1;clip-path:inset(-300px -300px 0 -300px)!important}
html body .bk3 .bk3-ct .bk3-hero img{height:210px!important;bottom:-34px!important}
html body .bk3 .bk3-ct .bk3-hero::after{display:none!important}
html body .bk3 .bk3-hd{max-width:calc(100% - 250px)!important}
html body .bk2{padding-top:56px!important}
@media (max-width:760px){
  html body .bk3 .bk3-ct .bk3-hero{right:10px!important;width:130px!important;height:118px!important}
  html body .bk3 .bk3-ct .bk3-hero img{height:140px!important;bottom:-22px!important}
  html body .bk3 .bk3-hd{max-width:calc(100% - 140px)!important}
}


/* 17m — the card is the Contact us composer as-is (ct-form.css); only fix-ups: error line sits in the foot, chips row uses the same side inset as the field rows */
html body #bkpSheet .bk3-ct .ct-foot .bk-err{flex-basis:100%;margin:0}
html body #bkpSheet .bk3-ct > .ct-f:not(:has(input)){padding-left:clamp(18px,2.4vw,28px);padding-right:clamp(18px,2.4vw,28px)}
html body #bkpSheet .bk3-ct .ct-card-top,html body #bkpSheet .bk3-ct .ct-foot{padding-left:clamp(18px,2.4vw,28px)!important;padding-right:clamp(18px,2.4vw,28px)!important}
html body #bkpSheet .bk3-ct > .ct-card-top{border-radius:15px 15px 0 0}
html body #bkpSheet .bk3-ct > .ct-foot{border-radius:0 0 15px 15px}
/* 17n — grey example placeholders (Contact hides them; book shows them) */
html body #bkpSheet .bk3-ct .ct-f input:not(#b-a)::placeholder{color:rgba(31,29,26,.32)!important;opacity:1!important}
/* 17o — calendar step replaces the form card in place */
html body #bkpSheet.is-cal #bkpLead:not(#b-a){display:none!important}
html body #bkpSheet:not(.is-cal) #bd-cal-slot{display:none!important}
html body #bkpSheet.is-cal #bd-cal-slot{border-radius:16px;border:1px solid rgba(26,24,21,.1);background:#fff;overflow:hidden;min-height:460px}
html body #bkpSheet.is-cal .bk3-hero{display:none!important}
html body #bkpSheet #bkpChg{color:#1f1d1a!important;text-decoration:underline;text-underline-offset:3px}
html body #bkpSheet.is-cal #bd-cal-slot:not(#b-a){margin:20px 0 0!important;width:auto!important;max-width:100%!important;box-sizing:border-box}
html body #bkpSheet.is-cal .bk2-head{align-items:baseline}
html body #bkpSheet.is-cal .bk-cal:not(#b-a){margin:0!important}
/* 17p — step header: step label + Change on one row directly above the title */
html body #bkpSheet .bk2-head:not(#b-a){display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:14px!important;margin:0 0 8px!important;padding:0!important}
html body #bkpSheet .bk2-head #bkpChg{margin:0!important;padding:0!important;font-size:14px!important;background:none;border:0}
html body #bkpSheet .bk2-head #bkpChg::before{content:"·";margin-right:14px;color:rgba(31,29,26,.35);text-decoration:none;display:inline-block}
html body #bkpSheet.is-cal #bd-cal-slot:not(#b-a){min-height:0!important}