/* Bookings (M257 to M261, M267): the sessions, the booker (details, the month, the day's times, the form),
   a booking's own page. Drawn in the site's tokens, so it follows the theme, light and dark. Class prefix bk-. */
.bk-page{min-height:62vh;padding:38px 20px 56px;background:var(--surface);color:var(--ink);font-family:var(--font-body,inherit)}
.bk-page *{box-sizing:border-box}
.bk-page h1,.bk-page h2,.bk-page p{margin:0}
.bk-page svg{width:16px;height:16px;flex:none}
.bk-hide{display:none!important}

/* ── The sessions ── */
.bk-intro{max-width:720px;margin:0 auto 24px;text-align:center}
.bk-intro h1{font:800 clamp(26px,3.4vw,32px)/1.15 var(--font-display,inherit);margin-bottom:8px}
.bk-intro p{color:var(--muted);font-size:15.5px}
.bk-types{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.bk-type{display:grid;grid-template-columns:46px minmax(0,1fr) 18px;gap:16px;align-items:center;padding:18px 20px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-card,14px);color:var(--ink);text-decoration:none;box-shadow:var(--lift);transition:border-color .15s,transform .15s}
.bk-type:hover{border-color:color-mix(in oklab,var(--ink) 35%,var(--border));transform:translateY(-1px)}
.bk-type__ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--surface);color:var(--ink)}
.bk-type__ic svg{width:21px;height:21px}
.bk-type__b>b{display:block;font:800 17px/1.25 var(--font-display,inherit)}
.bk-type__b>small{display:block;color:var(--muted);font-size:14px;margin:3px 0 9px}
.bk-type__m{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px;font-weight:700;color:var(--muted)}
.bk-type__m>span{display:inline-flex;align-items:center;gap:5px}
.bk-type__m svg{width:14px;height:14px}
.bk-price{color:var(--ink)!important;background:var(--surface);padding:1px 10px;border-radius:99px;border:1px solid var(--border)}
.bk-price--free{color:var(--ok)!important}
.bk-type__go{width:18px!important;height:18px!important;color:var(--muted)}
.bk-none{max-width:560px;margin:0 auto;padding:28px;text-align:center;color:var(--muted);background:var(--card);border:1px solid var(--border);border-radius:var(--r-card,14px)}

/* ── The booker ── */
.bk-booker{display:grid;margin:0 auto;background:var(--card);border:1px solid var(--border);border-radius:var(--r-card,14px);box-shadow:var(--lift-hi);overflow:hidden;text-align:left;color:var(--ink)}
.bk-booker.is-day{grid-template-columns:280px minmax(0,1fr);max-width:740px}
.bk-booker.is-time{grid-template-columns:280px minmax(0,1fr) 250px;max-width:990px}
.bk-booker.is-form,.bk-booker.is-code{grid-template-columns:280px minmax(0,1fr);max-width:780px}
.bk-booker.is-day .bk-times,.bk-booker.is-form .bk-cal,.bk-booker.is-form .bk-times,.bk-booker.is-code .bk-cal,.bk-booker.is-code .bk-times{display:none}
.bk-booker:not(.is-form) .bk-form,.bk-booker:not(.is-code) .bk-code,.bk-booker:not(.is-form):not(.is-code) .bk-picked{display:none}
.bk-meta{padding:24px;border-right:1px solid var(--border)}
.bk-host{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--muted)}
.bk-host svg{width:18px;height:18px;flex:none;color:var(--blue)}
.bk-host img{width:22px;height:22px;border-radius:6px;object-fit:cover}
.bk-meta h1{font:800 23px/1.2 var(--font-display,inherit);margin:12px 0 6px}
.bk-meta p{color:var(--muted);font-size:14px;margin-bottom:18px}
.bk-facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:14px;font-weight:700}
.bk-facts li{display:flex;gap:10px;align-items:flex-start}
.bk-facts li>svg{margin-top:2px;color:var(--muted)}
.bk-free{color:var(--ok)}
.bk-tz{position:relative;display:inline-flex;align-items:center;gap:4px;font-weight:600}
.bk-tz select{appearance:none;border:0;background:transparent;color:inherit;font:inherit;padding:0 18px 0 0;cursor:pointer;max-width:220px}
.bk-tz svg{position:absolute;right:0;width:13px;height:13px;color:var(--muted);pointer-events:none}
/* The zone picker: a button, then a search and a list that scrolls inside the panel. */
.bk-tz.is-picker select{display:none}
.bk-tzb{appearance:none;border:0;background:transparent;color:inherit;font:inherit;padding:0 18px 0 0;cursor:pointer;text-align:left;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-facts li:has(.bk-tzp){position:relative}
.bk-tzp{position:absolute;left:-10px;bottom:calc(100% + 8px);z-index:20;width:min(270px,calc(100vw - 40px));padding:10px;border:1px solid var(--border);border-radius:14px;background:var(--card);box-shadow:0 24px 50px -18px rgba(5,20,60,.4);font-weight:400;animation:bk-pop .14s ease-out}
.bk-tzp[hidden]{display:none}
@keyframes bk-pop{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.bk-tzp{animation:none}}
.bk-tzp__q{width:100%;height:40px;margin-bottom:8px}
.bk-tzp__list{max-height:220px;overflow:auto;display:flex;flex-direction:column;gap:2px}
.bk-tzp__list button{display:flex;justify-content:space-between;align-items:baseline;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:var(--ink);font:600 14px var(--font-body,inherit);text-align:left;cursor:pointer}
.bk-tzp__list button small{font-weight:500;font-size:12px;color:var(--muted)}
.bk-tzp__list button:hover,.bk-tzp__list button:focus-visible{background:color-mix(in oklab,var(--blue) 9%,var(--card));outline:none}
.bk-tzp__list button[aria-selected="true"]{background:var(--blue);color:#fff}
.bk-tzp__list button[aria-selected="true"] small{color:rgba(255,255,255,.8)}
.bk-tzp__none{margin:6px 10px;font-size:13.5px;color:var(--muted)}
.bk-lens{display:flex;flex-wrap:wrap;gap:6px}
.bk-lens button{padding:3px 10px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--ink);font:700 12.5px var(--font-body,inherit);cursor:pointer}
.bk-lens button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.bk-cal{padding:22px 24px 24px;min-width:0}
.bk-cal__h{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.bk-cal__h b{font:800 20px var(--font-display,inherit)}
.bk-cal__h b span{color:var(--muted);font-weight:600}
.bk-cal__nav{display:flex;gap:6px}
/* The month name opens the months that can be booked. */
.bk-cal__h{position:relative}
.bk-mon{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;margin-left:-8px;border:0;border-radius:8px;background:transparent;color:var(--ink);cursor:pointer}
.bk-mon:hover,.bk-mon[aria-expanded="true"]{background:color-mix(in oklab,var(--blue) 9%,var(--card))}
.bk-mon svg{width:15px;height:15px;color:var(--muted)}
.bk-mons{position:absolute;top:calc(100% + 6px);left:-8px;z-index:20;display:grid;grid-template-columns:repeat(4,64px);gap:6px;padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--card);box-shadow:0 24px 50px -18px rgba(5,20,60,.4);animation:bk-pop .14s ease-out}
.bk-mons[hidden]{display:none}
.bk-mons__y{grid-column:1/-1;font-size:11px;font-weight:800;letter-spacing:.13em;color:var(--muted)}
.bk-mons button{height:38px;border:1px solid var(--border);border-radius:9px;background:var(--card);color:var(--ink);font:700 14px var(--font-body,inherit);cursor:pointer}
.bk-mons button:hover{border-color:var(--blue);color:var(--blue)}
.bk-mons button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.bk-cal__nav button{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--ink);cursor:pointer}
.bk-cal__nav button:disabled{opacity:.4;cursor:default}
.bk-wk{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-bottom:8px;text-align:center;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.bk-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.bk-grid.is-loading{opacity:.55}
.bk-d{position:relative;aspect-ratio:1/1;display:grid;place-items:center;border:1.5px solid transparent;border-radius:9px;background:transparent;color:var(--muted);font:500 14px var(--font-body,inherit);opacity:.6;padding:0}
.bk-d.is-on{background:color-mix(in oklab,var(--blue) 9%,var(--card));color:var(--blue);font-weight:800;opacity:1;cursor:pointer}
.bk-d.is-on:hover,.bk-d.is-on:focus-visible{border-color:var(--blue);outline:none}
.bk-d.is-sel{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 10px 22px -10px var(--blue)}
.bk-d.is-on:not(.is-sel)::after{content:"";position:absolute;bottom:6px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--blue)}
.bk-d.is-today{border-color:var(--gold);border-radius:999px}
.bk-d--x{visibility:hidden}
.bk-cal__none{margin-top:14px;font-size:13.5px;color:var(--muted);text-align:center}
.bk-times{display:flex;flex-direction:column;padding:22px 18px;border-left:1px solid var(--border);min-width:0}
.bk-times__h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.bk-times__h b{font:800 16px var(--font-display,inherit)}
.bk-times__h b span{color:var(--muted);font-weight:600}
.bk-seg{display:inline-flex;padding:2px;border:1px solid var(--border);border-radius:8px;background:var(--surface)}
.bk-seg button{padding:3px 8px;border:0;border-radius:6px;background:transparent;color:var(--muted);font:700 12px var(--font-body,inherit);cursor:pointer}
.bk-seg button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.bk-slots{display:flex;flex-direction:column;gap:8px;margin-top:14px;max-height:400px;overflow:auto;padding:0 2px 18px 0}
.bk-slot{display:flex;align-items:center;justify-content:center;gap:8px;min-height:42px;border:1px solid var(--border);border-radius:var(--r-btn,10px);background:var(--card);color:var(--ink);font:700 14px var(--font-body,inherit);cursor:pointer}
.bk-slot i{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.bk-slot:hover,.bk-slot:focus-visible,.bk-slot.is-sel{border-color:var(--ink);outline:none}
.bk-under{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:16px!important;font-size:12.5px;color:var(--muted);text-align:center}
.bk-under svg{width:13px;height:13px}
/* The session's tile, its badge and what it includes (M305). */
.bk-tile{display:flex;align-items:center;justify-content:space-between;margin:16px 0 4px}
.bk-tile__ic{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:color-mix(in oklab,var(--blue) 12%,var(--card));color:var(--blue)}
.bk-tile__ic svg{width:24px;height:24px}
.bk-badge{padding:5px 12px;border-radius:999px;background:color-mix(in oklab,var(--blue) 12%,var(--card));color:var(--blue);font-size:12px;font-weight:800;letter-spacing:.04em}
.bk-badge--free{background:color-mix(in oklab,var(--ok) 14%,var(--card));color:var(--ok);text-transform:uppercase;letter-spacing:.06em}
.bk-pts{list-style:none;margin:0 0 18px;padding:16px 0 0;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:9px;font-size:14px;color:var(--ink)}
.bk-pts li{position:relative;padding-left:27px;line-height:1.45}
.bk-pts li::before{content:"";position:absolute;left:0;top:.05em;width:18px;height:18px;border-radius:50%;background:var(--blue)}
.bk-pts li::after{content:"";position:absolute;left:6.5px;top:calc(.05em + 4px);width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
/* Times grouped, the chosen one with Next beside it (M307). */
.bk-gh{display:block;margin:8px 0 2px;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.bk-gh:first-child{margin-top:0}
.bk-pick{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.bk-pick__t{display:grid;place-items:center;min-height:42px;border-radius:var(--r-btn,10px);background:var(--ink);color:var(--card);font-weight:700;font-size:14px}
.bk-pick__go{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;border:0;border-radius:var(--r-btn,10px);background:var(--blue);color:#fff;font:800 14px var(--font-body,inherit);cursor:pointer}
.bk-pick__go svg{width:15px;height:15px}
/* The session page around the booker (M304, M308, M309): the band with the path and the steps, the booker over it,
   a line of reassurance and the other sessions. */
.bk-page:has(.bq-band){padding-top:0}
.bq-band{position:relative;overflow:hidden;margin:0 -20px;padding:34px 20px 150px;background:var(--band);color:#fff}
.bq-band::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 54% 58% at 88% 6%,color-mix(in srgb,var(--gold) 20%,transparent),transparent 58%),radial-gradient(ellipse 60% 56% at 2% 92%,color-mix(in srgb,var(--cyan) 16%,transparent),transparent 56%)}
.bq-band__in{position:relative;z-index:1;max-width:1000px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.bq-crumb{display:flex;gap:10px;font-size:14px;font-weight:600}
.bq-crumb a{color:rgba(255,255,255,.8);text-decoration:none}
.bq-crumb a:hover{color:#fff}
.bq-crumb span{opacity:.6}
.bq-prog{display:flex;gap:8px;margin:0;padding:0;list-style:none}
.bq-prog li{display:flex;align-items:center;gap:8px;padding:7px 14px 7px 7px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);font-size:13.5px;font-weight:700;color:rgba(255,255,255,.8)}
.bq-prog i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.18);font:800 12px var(--font-body,inherit);font-style:normal}
.bq-prog li.is-on{background:#fff;color:#12224a}
.bq-prog li.is-on i{background:var(--gold-grad,var(--gold));color:var(--on-gold,#3b2a00)}
.bq-prog li.is-done i{background:var(--ok);color:#fff}
.bk-page:has(.bq-band) .bk-booker{position:relative;z-index:2;margin-top:-120px;box-shadow:0 30px 70px -28px rgba(5,20,60,.45)}
.bq-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;max-width:1000px;margin:22px auto 0;padding:16px 20px;border-radius:14px;background:var(--card);border:1px solid var(--border);font-size:14px;font-weight:600;color:var(--ink)}
.bq-trust span{display:inline-flex;align-items:center;gap:8px}
.bq-trust svg{width:17px;height:17px;color:var(--blue)}
.bq-other{max-width:1000px;margin:26px auto 0}
.bq-other__h{display:block;margin-bottom:10px;font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);text-align:center}
.bq-other__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.bq-other__row a{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:14px;background:var(--card);border:1px solid var(--border);color:var(--ink);text-decoration:none}
.bq-other__row a:hover{border-color:color-mix(in oklab,var(--blue) 40%,var(--border))}
.bq-other__row a>svg{width:16px;height:16px;margin-left:auto;color:var(--muted)}
.bq-other__ic{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:color-mix(in oklab,var(--blue) 12%,var(--card));color:var(--blue)}
.bq-other__ic svg{width:19px;height:19px}
.bq-other__row b{display:block;font-size:15px}
.bq-other__row small{display:block;margin-top:2px;font-size:13px;color:var(--muted)}
.bk-banner{max-width:990px;margin:0 auto 14px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px 16px;border-radius:12px;background:color-mix(in oklab,var(--gold) 16%,var(--card));border:1px solid color-mix(in oklab,var(--gold) 45%,transparent);font-size:14px;color:var(--ink)}
.bk-banner .bk-link{margin-left:auto}

/* ── Your details, the code ── */
.bk-form,.bk-code{display:flex;flex-direction:column;gap:14px;padding:24px 28px;min-width:0}
.bk-form h2,.bk-code h2{font:800 19px var(--font-display,inherit)}
.bk-f{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:700}
.bk-f>span i{color:var(--bad);font-style:normal}
.bk-f small{font-weight:500;color:var(--muted)}
.bk-f .bk-f__h{font-size:12.5px}
.bk-in{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-field,8px);background:var(--card);color:var(--ink);font:15px/1.4 var(--font-body,inherit);resize:vertical}
.bk-in::placeholder{color:var(--muted)}
.bk-in:focus{outline:2px solid color-mix(in oklab,var(--ink) 30%,transparent);outline-offset:1px}
.bk-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.bk-add{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;color:var(--ink);font:700 13.5px var(--font-body,inherit);cursor:pointer}
.bk-add svg{width:14px;height:14px}
.bk-guests{display:flex;flex-direction:column;gap:8px}
.bk-hold{display:flex;gap:9px;align-items:flex-start;padding:11px 13px;border-radius:10px;background:color-mix(in oklab,var(--gold) 14%,var(--card));border:1px solid color-mix(in oklab,var(--gold) 35%,transparent);font-size:13.5px}
.bk-hold svg{margin-top:2px}
.bk-err{padding:10px 12px;border-radius:10px;background:color-mix(in oklab,var(--bad) 12%,var(--card));color:var(--bad);font-size:13.5px;font-weight:600}
.bk-acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.bk-acts--l{justify-content:flex-start;margin-top:20px}
.bk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid transparent;border-radius:var(--r-btn,10px);background:var(--gold-grad,var(--gold));color:var(--on-gold,#111);font:800 14px var(--font-body,inherit);text-decoration:none;cursor:pointer}
.bk-btn:disabled{opacity:.6;cursor:default}
.bk-btn--line{background:transparent;border-color:var(--border);color:var(--ink);font-weight:700}
.bk-btn--bad{background:var(--bad);color:#fff}
.bk-btn--line.bk-btn--bad{background:transparent;color:var(--bad);border-color:color-mix(in oklab,var(--bad) 40%,transparent)}
.bk-fine{font-size:12.5px;color:var(--muted)}
.bk-fine a,.bk-link{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere;background:none;border:0;padding:0;font-size:inherit;cursor:pointer}
.bk-code{align-items:flex-start}
.bk-code p{color:var(--muted);font-size:14.5px}
.bk-code p b{color:var(--ink)}
.bk-code__ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--surface)}
.bk-code__ic svg{width:21px;height:21px}
.bk-code input.bk-in{max-width:220px;font:800 24px/1 var(--font-display,inherit);letter-spacing:8px;text-align:center}
.bk-code .bk-acts{align-self:stretch}

/* ── Booked, a booking's own page ── */
.bk-done{max-width:620px;margin:0 auto;padding:34px 36px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-card,14px);box-shadow:var(--lift-hi);text-align:center;color:var(--ink)}
.bk-done--l{text-align:left}
.bk-done h1{font:800 25px/1.2 var(--font-display,inherit);margin:14px 0 8px}
.bk-done>p{color:var(--muted);font-size:15px}
.bk-done>p b{color:var(--ink)}
.bk-done__ic{width:54px;height:54px;border-radius:50%;display:inline-grid;place-items:center;background:color-mix(in oklab,var(--ok) 16%,var(--card));color:var(--ok)}
.bk-done__ic svg{width:25px;height:25px}
.bk-done__ic--neu{background:var(--surface);color:var(--muted)}
.bk-done .bk-acts{justify-content:center;margin-top:20px}
.bk-done--l .bk-acts{justify-content:flex-start}
.bk-state{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:99px;background:color-mix(in oklab,var(--ok) 15%,var(--card));color:var(--ok);font-size:12.5px;font-weight:800}
.bk-state--warn{background:color-mix(in oklab,var(--warn) 16%,var(--card));color:var(--warn)}
.bk-state--neu{background:var(--surface);color:var(--muted)}
.bk-state svg{width:13px;height:13px}
.bk-done--l h1{margin-top:12px}
.bk-dl{margin-top:22px;border-top:1px solid var(--border);text-align:left}
.bk-dl__r{display:grid;grid-template-columns:100px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--border);font-size:14.5px}
.bk-dl__r>span{font-weight:800}
.bk-dl__r small{color:var(--muted);font-size:13px}
.bk-meet{display:flex;align-items:center;gap:6px;font-weight:800}
.bk-cal-add{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin-top:20px;font-size:13px}
.bk-cal-add span{color:var(--muted);font-weight:600}
.bk-cal-add a{padding:6px 13px;border:1px solid var(--border);border-radius:99px;color:var(--ink);font-weight:700;text-decoration:none}
.bk-change{margin-top:16px!important;font-size:14px;color:var(--muted)}
.bk-cancel{display:flex;flex-direction:column;gap:12px;margin-top:22px;padding-top:20px;border-top:1px solid var(--border)}
.bk-cancel h2{font:800 18px var(--font-display,inherit)}
.bk-cancel .bk-acts--l{margin-top:4px}
.bk-late{display:flex;gap:9px;margin-top:20px;padding:12px 14px;border-radius:10px;background:var(--surface);font-size:14px}
.bk-late svg{margin-top:2px;color:var(--muted)}

/* ── A Booking section on a builder page (M267): the same booker, at the section's width ── */
.cms-sec .bk-booker{margin-top:18px}
.cms-sec .bk-types{margin-top:18px}

@media (max-width:760px){
  .bk-page{padding:16px 12px 28px}
  .bk-booker.is-day,.bk-booker.is-time,.bk-booker.is-form,.bk-booker.is-code{grid-template-columns:minmax(0,1fr);max-width:none}
  .bk-meta{padding:18px;border-right:0;border-bottom:1px solid var(--border)}
  .bq-band{margin:0 -12px;padding:22px 16px 120px}
  .bq-prog li{font-size:0;padding:4px}
  .bq-prog li.is-on{font-size:12.5px;padding:4px 12px 4px 4px}
  .bk-meta h1{font-size:20px}
  .bk-facts{flex-direction:row;flex-wrap:wrap;gap:8px 16px;font-size:13px}
  .bk-cal{padding:16px 12px}
  .bk-grid,.bk-wk{gap:4px}
  .bk-times{border-left:0;border-top:1px solid var(--border);padding:16px 12px}
  .bk-slots{display:grid;grid-template-columns:1fr 1fr;max-height:none}
  /* Each group's heading and the chosen time with its Next take the whole row, so the times line up in pairs. */
  .bk-slots .bk-gh,.bk-slots .bk-pick{grid-column:1/-1}
  /* The time zone list opens across the card, never past the screen's edge. */
  .bk-facts{position:relative}
  .bk-facts li:has(.bk-tzp){position:static}
  .bk-tzp{left:0;right:0;width:auto}
  /* The form's buttons stack, the main one first and full width, so a price never squeezes its words. */
  .bk-form .bk-acts,.bk-code .bk-acts{flex-direction:column-reverse;align-items:stretch}
  .bk-form .bk-acts .bk-btn,.bk-code .bk-acts .bk-btn{flex:none;width:100%}
  .bk-form,.bk-code{padding:18px 16px}
  .bk-acts .bk-btn{flex:1}
  .bk-done{padding:24px 18px}
  .bk-dl__r{grid-template-columns:minmax(0,1fr);gap:2px}
  .bk-type{grid-template-columns:40px minmax(0,1fr);padding:14px}
  .bk-type__ic{width:40px;height:40px}
  .bk-type__go{display:none}
  .bk-banner .bk-link{margin-left:0}
}

/* ── Book a session (M302): a hero, the sessions as cards, how it works, questions and a last call. ── */
.bq { display: block; color: var(--ink); font-family: var(--font-body, inherit); }
.bq *, .bq *::before, .bq *::after { box-sizing: border-box; }
.bq-in { max-width: 1136px; margin: 0 auto; padding: 0 22px; }
.bq-in--narrow { max-width: 780px; }
.bq-hero { position: relative; overflow: hidden; padding: 92px 0 96px; background: var(--band); color: #fff; text-align: center; }
.bq-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 54% 58% at 88% 6%, color-mix(in srgb,var(--gold) 20%,transparent), transparent 58%), radial-gradient(ellipse 60% 56% at 2% 92%, color-mix(in srgb,var(--cyan) 16%,transparent), transparent 56%); }
.bq-hero .bq-in { position: relative; z-index: 1; }
.bq-kick { display: block; margin-bottom: 12px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.bq-hero h1 { margin: 0 auto; max-width: 18ch; font: 800 clamp(34px, 5vw, 58px)/1.08 var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
.bq-uw { padding-bottom: 4px; background: linear-gradient(var(--gold), var(--gold)) 0 92% / 100% 7px no-repeat; }
.bq-lede { margin: 20px auto 0; max-width: 56ch; font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, .84); }
.bq-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.bq-chips span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); font-size: 14px; font-weight: 600; }
.bq-chips svg { width: 16px; height: 16px; color: var(--gold); }
.bq-sec { padding: 84px 0; }
.bq-sec--soft { background: var(--surface); }
.bq-head { margin-bottom: 40px; text-align: center; }
.bq-head h2, .bq-cta h2 { margin: 0; font: 800 clamp(28px, 3.4vw, 40px)/1.15 var(--font-display); letter-spacing: -.015em; color: var(--ink); }
.bq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.bq-grid--1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
.bq-grid--2 { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }
.bq-card { position: relative; display: flex; flex-direction: column; padding: 30px 28px 26px; border-radius: 20px; background: var(--card); border: 1px solid var(--border); box-shadow: var(--lift); color: var(--ink); text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
.bq-card:hover { transform: translateY(-4px); box-shadow: var(--lift-hi); border-color: color-mix(in oklab, var(--blue) 40%, var(--border)); }
.bq-card.is-top { border: 2px solid var(--blue); box-shadow: 0 24px 50px -22px color-mix(in oklab, var(--blue) 60%, transparent); }
.bq-flag { position: absolute; top: -13px; left: 28px; padding: 5px 12px; border-radius: 999px; background: var(--gold-grad); color: var(--on-gold); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.bq-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: color-mix(in oklab, var(--blue) 12%, var(--card)); color: var(--blue); }
.bq-ic svg { width: 24px; height: 24px; }
.bq-top { display: flex; align-items: center; gap: 14px; }
.bq-ic { flex: none; }
.bq-n { font: 800 21px/1.25 var(--font-display); }
.bq-l { margin: 14px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.bq-pts { list-style: none; margin: 20px 0 0; padding: 20px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
.bq-pts li { position: relative; padding-left: 28px; }
.bq-pts li::before { content: ""; position: absolute; left: 0; top: .05em; width: 19px; height: 19px; border-radius: 50%; background: var(--blue); }
.bq-pts li::after { content: ""; position: absolute; left: 6.5px; top: calc(.05em + 4.5px); width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.bq-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 26px; }
.bq-price { font: 800 30px/1 var(--font-display); }
.bq-price small { display: block; margin-top: 6px; font: 600 13px var(--font-body); color: var(--muted); }
.bq-go { display: inline-flex; align-items: center; gap: 7px; padding: 11px 18px; border-radius: var(--r-btn, 10px); background: var(--blue); color: #fff; font-size: 14px; font-weight: 700; }
.bq-go svg, .bq-btn svg { width: 15px; height: 15px; }
.bq-card.is-top .bq-go { background: var(--gold-grad); color: var(--on-gold); }
.bq-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.bq-step { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 22px; padding: 28px; border-radius: 18px; background: var(--card); border: 1px solid var(--border); }
.bq-step__n { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--blue); color: #fff; }
.bq-step__n svg { width: 22px; height: 22px; }
.bq-step__n i { position: absolute; top: -6px; right: -8px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--gold-grad); color: var(--on-gold); font: 800 12px var(--font-body); font-style: normal; box-shadow: 0 0 0 3px var(--card); }
.bq-step b { display: block; font: 800 18px var(--font-display); color: var(--ink); }
.bq-step p { grid-column: 1 / -1; margin: 16px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.bq-q { margin-bottom: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); }
.bq-q summary { display: flex; justify-content: space-between; gap: 12px; padding: 18px 22px; cursor: pointer; list-style: none; font: 700 16px var(--font-body); color: var(--ink); }
.bq-q summary::-webkit-details-marker { display: none; }
.bq-q summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--blue); }
.bq-q[open] summary::after { content: "\2013"; }
.bq-q p { margin: 0; padding: 0 22px 20px; font-size: 15px; line-height: 1.65; color: var(--muted); }
.bq-cta { padding: 76px 0; background: var(--band); color: #fff; text-align: center; }
.bq-cta h2 { color: #fff; }
.bq-cta p { margin: 14px auto 0; max-width: 52ch; font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, .84); }
.bq-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; padding: 14px 24px; border-radius: var(--r-btn, 10px); background: var(--gold-grad); color: var(--on-gold); font-weight: 800; text-decoration: none; }
@media (max-width: 900px) {
    .bq-grid, .bq-grid--2, .bq-steps { grid-template-columns: minmax(0, 1fr); }
    .bq-grid { gap: 30px; }
    .bq-sec { padding: 60px 0; }
    .bq-hero { padding: 64px 0 70px; }
    .bq-chips span { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .bq-card { transition: none; } }
.bk-page:has(.bq-band) .bk-under{display:none}