/* nanoflow.io/book/ (2026-10-10): the homepage hero band (aurora, Nano, .btn, .cap card look) holding a booking card.
   Tokens and components come from home.css; only the picker and form are new here. */
.bk{padding:150px 0 110px;min-height:100vh}
.bk .wrap{position:relative;z-index:1;grid-template-columns:minmax(0,40fr) minmax(0,60fr);gap:64px;align-items:start}
.bk-intro{padding-top:24px}
.bk .hero-sub{margin-bottom:28px}
.bk-facts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 22px;font-weight:700;font-size:16px}
.bk-facts li{display:flex;align-items:center;gap:10px}
.cap-tile{width:40px;height:40px;border-radius:12px;background:rgba(109,40,217,.09);display:inline-flex;align-items:center;justify-content:center;flex:none;color:var(--violet)}
.cap-tile svg{width:20px;height:20px}

.bk-stage{position:relative;justify-self:stretch;min-width:0;width:auto}
.bk-nano{width:116px;left:40px;right:auto;top:-92px;bottom:auto;--r:-4deg;z-index:3}
.bk-card{
  position:relative;z-index:2;background:var(--card);border:1px solid rgba(33,29,43,.10);border-radius:24px;
  box-shadow:var(--shadow);padding:32px 34px 34px;
}
.bk-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.bk-head h2{font-size:28px;font-weight:700}
.bk-head h2:focus{outline:none}
.bk-tz{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--body-c)}
.bk select,.bk input,.bk textarea{
  font:inherit;font-size:16px;color:var(--ink);background:var(--paper);
  border:1.5px solid rgba(33,29,43,.18);border-radius:12px;padding:10px 14px;width:100%;
  transition:border-color .3s ease-out,box-shadow .3s ease-out;
}
.bk select{width:auto;max-width:230px;padding:8px 34px 8px 12px;font-size:14px;font-weight:600;appearance:none;cursor:pointer;
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d28d9' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center/16px}
.bk input:focus,.bk textarea:focus,.bk select:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(109,40,217,.16)}

/* day picker: the homepage trade chips, as a scrolling row */
.bk-days{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 10px;margin:0 -2px;scroll-snap-type:x proximity;scrollbar-width:thin}
.bk-day{
  flex:none;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:2px;
  min-width:76px;padding:10px 12px;border-radius:16px;border:1.5px solid rgba(33,29,43,.18);background:var(--card);
  font:inherit;color:var(--ink);cursor:pointer;transition:border-color .3s ease-out,color .3s ease-out,background .3s ease-out;
}
.bk-day small{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--body-c)}
.bk-day b{font-family:'DM Sans','Nunito',sans-serif;font-size:24px;line-height:1.1}
.bk-day span{font-size:13px;font-weight:600;color:var(--body-c)}
.bk-day:hover{border-color:var(--violet);color:var(--violet-deep)}
.bk-day[aria-pressed="true"]{background:var(--violet);border-color:var(--violet);color:#fdfdfd}
.bk-day[aria-pressed="true"] small,.bk-day[aria-pressed="true"] span{color:rgba(253,253,253,.85)}
.bk-day-label{margin:14px 0 12px;font-weight:700;font-size:16px}
.bk-times{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.bk-time{
  height:48px;border-radius:999px;border:1.5px solid rgba(33,29,43,.18);background:var(--card);
  font:inherit;font-size:16px;font-weight:600;color:var(--ink);cursor:pointer;
  transition:border-color .3s ease-out,color .3s ease-out,background .3s ease-out;
}
.bk-time:hover{border-color:var(--violet);color:var(--violet-deep)}
.bk-time[aria-pressed="true"]{background:var(--violet);border-color:var(--violet);color:#fdfdfd}
.bk-msg{margin-top:14px;font-size:16px;color:var(--body-c)}
.bk-msg:empty{display:none}
.bk-msg--err{color:#b3261e;font-weight:600}
.bk-skel{height:48px;border-radius:999px;background:linear-gradient(90deg,rgba(33,29,43,.05),rgba(33,29,43,.10),rgba(33,29,43,.05));background-size:200% 100%;animation:bkShimmer 1.4s linear infinite}
@keyframes bkShimmer{to{background-position:-200% 0}}

/* form */
.bk-chosen{display:flex;align-items:center;gap:14px;background:rgba(109,40,217,.06);border:1px solid rgba(109,40,217,.22);border-left:3px solid var(--violet);border-radius:14px;padding:12px 16px;margin-bottom:22px}
.bk-chosen>span:last-child{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.bk-chosen b{font-size:17px}
.bk-link{background:none;border:0;padding:0;font:inherit;font-weight:600;font-size:16px;color:var(--violet);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.bk-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.bk-field label{display:block;font-weight:700;font-size:15px;margin-bottom:6px}
.bk-field--wide{grid-column:1/-1}
.bk-opt{font-weight:600;color:var(--body-c);font-size:13px;margin-left:4px}
.bk-hint{font-size:13px;color:var(--body-c);margin-top:5px}
.bk-err{font-size:13.5px;color:#b3261e;font-weight:600;margin-top:5px}
.bk-err:empty{display:none}
.bk-field input[aria-invalid="true"]{border-color:#b3261e}
.bk textarea{resize:vertical;min-height:84px}
.bk-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bk-submit{margin-top:22px;width:100%}
.bk-submit[disabled]{opacity:.7;cursor:progress;transform:none}

/* booked */
.bk-done .bk-when{font-family:'DM Sans','Nunito',sans-serif;font-size:26px;font-weight:700;line-height:1.2}
.bk-done .bk-when span{display:block;font-family:'Nunito',sans-serif;font-size:16px;font-weight:600;color:var(--body-c);margin-top:6px}
.bk-meet{margin-top:18px}
.bk-meet:empty{display:none}
.bk-meet a{font-weight:700;color:var(--violet);word-break:break-all;text-decoration:underline;text-underline-offset:3px}
.bk-note-sent{margin:16px 0 26px;color:var(--body-c)}
.bk-note-sent a{color:var(--violet);font-weight:600}

@media (max-width:1300px){.bk-nano{width:104px;top:-84px}}
@media (max-width:960px){
  .bk{padding:120px 0 72px}
  .bk .wrap{grid-template-columns:1fr;gap:40px}
  .bk-intro{padding-top:0}
  .bk-nano{width:92px;left:auto;right:4px;top:-70px;bottom:auto}
}
@media (max-width:620px){
  .bk .wrap{padding:0 16px}
  .bk-card{padding:24px 18px 24px;border-radius:20px}
  .bk-head h2{font-size:24px}
  .bk-times{grid-template-columns:repeat(3,1fr)}
  .bk-fields{grid-template-columns:1fr}
  .bk-tz{width:100%}
  .bk select{flex:1;max-width:none}
}
@media (max-width:360px){.bk-times{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion:reduce){.bk-skel{animation:none}}

.bk h1{font-size:54px}
@media (max-width:1300px){.bk h1{font-size:46px}}
@media (max-width:960px){.bk h1{font-size:40px}}
@media (max-width:480px){.bk h1{font-size:34px}}
/* the day row scrolls sideways: fade the right edge so the next days read as "more" */
.bk-days{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);padding-right:40px}