/* Book a demo page — loaded after styles.css, only on demo.html */
.book{position:relative;background:var(--violet);color:#fff;padding:clamp(130px,12vw,170px) 0 clamp(90px,10vw,140px);overflow:hidden}
.book .wrap{position:relative;z-index:1}
.book .tag{color:#fff}
.book .tag::before{background:#fff}
.book-head{text-align:center}
.book-head h1{font-size:clamp(44px,5.6vw,84px);line-height:.98;letter-spacing:-.045em;margin-top:22px}
.book-head h1 i>span{color:#b1aaff}
.book-head p{max-width:470px;margin:22px auto 0;font-size:16px;line-height:1.5;color:rgba(255,255,255,.85)}
.book-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:16px;max-width:1000px;margin:56px auto 0;align-items:start}

/* left: what the call covers */
.b-info{background:#fff;color:var(--text);padding:clamp(24px,3vw,34px)}
.b-info .faces{margin:34px 0 18px}
.b-info .faces span{width:44px;height:44px;font-size:14px;background:#ececec;color:#333}
.b-info .faces span:first-child{background:var(--violet);color:#fff}
.b-info h2{font-size:28px;line-height:1.08}
.b-info>p{margin-top:12px;font-size:15px;line-height:1.5;color:#555}
.b-meta{display:flex;gap:18px;margin-top:18px;color:#5f5f5f}
.b-meta span{display:inline-flex;align-items:center;gap:7px}
.b-meta svg{width:15px;height:15px}
.agenda{list-style:none;margin-top:24px;border-top:1px solid var(--line)}
.agenda li{display:grid;grid-template-columns:44px 1fr;padding:13px 0;border-bottom:1px solid var(--line);font-size:15px}
.agenda li span{font:400 13px var(--mono);color:#7a7a7a}
.quote{margin-top:24px;border:1px solid var(--line);padding:18px 20px;font-size:14.5px;line-height:1.55;color:#555}
.quote b{display:block;margin-top:12px;font:500 14px var(--display);color:var(--text)}
.quote small{font-size:13px;color:#7a7a7a}
.b-mail{margin-top:20px;font-size:14px;color:#5f5f5f}
.b-mail a{color:var(--text);border-bottom:1px solid currentColor}
.b-mail a:hover{color:var(--violet)}

/* right: the booking widget (three steps) */
.b-cal{position:relative;background:#121212;color:#fff;padding:clamp(20px,2.4vw,26px);min-height:650px;overflow:hidden}
.step{display:none}
.step.on{display:block;animation:stepIn .6s var(--ease)}
@keyframes stepIn{from{opacity:0;transform:translateX(18px)}}
.cal-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:16px;border-bottom:1px solid #262626}
.cal-head b{font:500 18px var(--display);letter-spacing:-.02em}
.cal-head b span{color:#8a8a8a;font-weight:400}
.cal-nav{display:flex;gap:6px}
.icon-btn{all:unset;cursor:pointer;width:32px;height:32px;display:grid;place-items:center;border:1px solid #2c2c2c;transition:border-color .25s,background .25s}
.icon-btn:hover:not(:disabled){border-color:var(--violet);background:#1c1c2e}
.icon-btn:disabled{opacity:.3;cursor:default}
.icon-btn:focus-visible{outline:2px solid var(--violet)}
.icon-btn svg{width:14px;height:14px}
.dow,.days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.dow{padding:14px 0 10px;font:500 11px var(--mono);text-transform:uppercase;color:#8a8a8a;text-align:center}
.days.swap{animation:stepIn .45s var(--ease)}
.days button{all:unset;box-sizing:border-box;position:relative;aspect-ratio:1/.86;display:grid;place-items:center;font:500 14px var(--body);color:#5c5c5c;cursor:default}
.days button.open{background:#262626;color:#fff;cursor:pointer;transition:background .2s,box-shadow .2s,transform .3s var(--ease)}
.days button.open:hover{box-shadow:inset 0 0 0 1px var(--violet);transform:translateY(-1px)}
.days button.today::after{content:"";position:absolute;bottom:6px;width:4px;height:4px;background:var(--violet)}
.days button[aria-pressed="true"]{background:#fff;color:#000}
.days button:focus-visible{outline:2px solid var(--violet)}
.slots-head{display:flex;justify-content:space-between;align-items:center;margin:20px 0 12px}
.slots-head b{font:500 15px var(--display)}
.slots-head small{display:block;font:400 11px var(--mono);color:#8a8a8a;text-transform:uppercase;margin-top:4px}
.fmt{display:flex;background:#1d1d1d;padding:3px}
.fmt button{all:unset;cursor:pointer;font:500 12px var(--mono);padding:5px 8px;color:#8a8a8a}
.fmt button[aria-pressed="true"]{background:#333;color:#fff}
.fmt button:focus-visible{outline:2px solid var(--violet)}
.slots{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:196px;overflow:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:#333 transparent}
.slots button{all:unset;box-sizing:border-box;position:relative;isolation:isolate;overflow:hidden;cursor:pointer;text-align:center;font:500 13px var(--mono);padding:11px 0;border:1px solid #2c2c2c;transition:border-color .25s}
.slots button::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--violet);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.slots button:hover,.slots button:focus-visible{border-color:var(--violet)}
.slots button:hover::before,.slots button:focus-visible::before{transform:scaleX(1)}
.slots button:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.slots .none{grid-column:1/-1;color:#8a8a8a;font-size:14px;padding:12px 0}

.picked{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;background:#1d1d1d;margin-bottom:22px}
.picked span{font:500 13px var(--mono);text-transform:uppercase}
.back{all:unset;cursor:pointer;font:500 12px var(--mono);text-transform:uppercase;color:#a9a9a9;display:inline-flex;gap:6px;align-items:center;white-space:nowrap}
.back:hover{color:#fff}
.back:focus-visible{outline:2px solid var(--violet)}
.form{display:grid;gap:14px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form label{display:grid;gap:7px;font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.02em;color:#a9a9a9}
.form input,.form select,.form textarea{font:400 15px var(--body);color:#fff;background:#1b1b1b;border:1px solid #2e2e2e;padding:11px 12px;outline:none;border-radius:0;transition:border-color .25s;width:100%}
.form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#8a8a8a 50%),linear-gradient(135deg,#8a8a8a 50%,transparent 50%);background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:32px}
.form select option{background:#1b1b1b}
.form textarea{resize:vertical;min-height:84px}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--violet)}
.form input:user-invalid{border-color:#ff6b6b}
.form .btn{justify-content:center;margin-top:6px}
.fine-print{font-size:12.5px;color:#8a8a8a;line-height:1.5}

.done{display:grid;justify-items:start;gap:14px;padding-top:30px}
.done .tick{width:54px;height:54px;background:var(--violet);display:grid;place-items:center}
.done .tick svg{width:26px;height:26px}
.done .tick path{stroke-dasharray:1;stroke-dashoffset:1}
.step.on .tick path{animation:draw .7s var(--ease) .25s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.done h2{font-size:34px;line-height:1.05}
.done p{font-size:15px;line-height:1.55;color:#a9a9a9;max-width:380px}
.done dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;padding:16px 0;border-top:1px solid #262626;border-bottom:1px solid #262626;width:100%;font-size:14px}
.done dt{font:500 11px var(--mono);text-transform:uppercase;color:#8a8a8a;padding-top:2px}
.done .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.b-cal .btn-ghost{--fill:#fff;--grain:rgba(75,59,255,.14);background:transparent;color:#fff;border-color:#3a3a3a}
.b-cal .btn-ghost::before{background:#fff}
.b-cal .btn-ghost:hover,.b-cal .btn-ghost:focus-visible{color:var(--violet);border-color:#fff}
.b-cal .btn-ghost:hover::before,.b-cal .btn-ghost:focus-visible::before{background:var(--violet)}

/* what happens next */
.next{background:#fff;border-top:1px solid var(--line);padding:clamp(80px,9vw,120px) 0}
.next ol{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);margin-top:40px;border-top:1px solid #d9d9d9}
.next li{padding:26px clamp(18px,2vw,28px) 10px 0}
.next li+li{border-left:1px solid var(--line);padding-left:clamp(18px,2vw,28px)}
.next h3{font-size:24px;margin:16px 0 10px}
.next p{font-size:15px;line-height:1.5;color:#5a5a5a;max-width:320px}

.nav .btn[aria-current="page"]{border-color:var(--violet)}
@media (max-width:860px){
  .book-grid{grid-template-columns:1fr}
  .b-cal{min-height:0}
  .next ol{grid-template-columns:1fr}
  .next li+li{border-left:0;padding-left:0;border-top:1px solid var(--line)}
  .form .two{grid-template-columns:1fr}
}

/* nav sits on violet until it condenses on scroll */
.page-demo .nav:not(.scrolled){color:#fff}
.page-demo .nav:not(.scrolled) .wordmark svg{color:#fff}
.page-demo .nav:not(.scrolled) .links a::before{background:#fff}
.page-demo .nav:not(.scrolled) .signin:hover{color:#d9d6ff}
.page-demo .nav.open{color:var(--text)}
.page-demo .nav.open .wordmark svg{color:var(--violet)}
.page-demo .nav.open .links a::before{background:var(--text)}