/* ============================================================
   khyzr.com — the booking page, /book/ (19 Oct 2026). The
   homepage's close turned to the call: the ink ground with a
   low green light, the ask in white at the left (its full stop
   the close's green light), and where the close's pill stood,
   Google Calendar's booking form as a white sheet. On the legal
   pages' chrome (legal.css: the bar, the skip link, the footer's
   base row), all of it in the dark here. Nothing moves; one line
   of script hides the sheet's waiting line once Google's page is in.
   ============================================================ */
.bk-page{background:var(--ink);color:var(--on-dark-body)}
.bk-page ::selection{background:var(--green-300);color:var(--ink)}

/* the bar in the dark, carrying no ask (it would open this page) */
.bk-bar{background:var(--ink)}
.bk-bar .in{border-bottom-color:var(--on-dark-divider)}
.bk-bar a:focus-visible{outline-color:var(--green-300)}

/* ---- the band: the pitch beside the calendar ---- */
.bk{--bk-pad:clamp(2.5rem,5.6*var(--u),5.5rem);--cal-h:1280px;
  position:relative;isolation:isolate;padding:var(--bk-pad) var(--gx) calc(var(--bk-pad) * 1.25);
  /* the close's light, low at the left, under the words */
  background:
    radial-gradient(70% 60% at -6% 108%,color-mix(in oklab,var(--green-500) 34%,transparent) 0%,color-mix(in oklab,var(--green-700) 14%,transparent) 48%,transparent 78%),
    radial-gradient(48% 38% at 100% -4%,color-mix(in oklab,var(--green-800) 22%,transparent) 0%,transparent 72%),
    var(--ink)}
.bk .in{max-width:var(--container);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(740px,2.06fr);grid-template-areas:"aside cal";
  column-gap:clamp(1.75rem,4.4*var(--u),4.5rem);align-items:start}
.bk :focus-visible{outline:2px solid var(--green-300);outline-offset:3px}

/* the pitch: it rides down beside the calendar, so the words stay with the form the whole way */
.bk-aside{grid-area:aside;min-width:0;position:sticky;top:var(--bk-pad);display:grid;gap:clamp(2.25rem,3.6*var(--u),3.25rem)}
/* the heading is sized by its own column, so "conversation." (about six of its ems) never runs into the calendar */
.bk-pitch{display:grid;justify-items:start;gap:clamp(1.125rem,1.8*var(--u),1.625rem);container-type:inline-size}
.bk-head{max-width:7.5em;font:var(--fw-display) clamp(2.5rem,15cqi,5rem)/.98 var(--font-display);letter-spacing:-.035em;color:var(--on-dark-heading);text-wrap:balance}
.bk-stop{color:var(--green-300)}
.bk-lede{max-width:24ch;font:var(--fw-text) max(clamp(1.125rem,1.6*var(--u),1.375rem),18px)/1.42 var(--font-text);letter-spacing:-.008em;color:var(--on-dark-body);text-wrap:pretty}

/* the steps, ruled as the footer's columns are, each number in a small tile of the light */
.bk-steps{list-style:none;display:grid;grid-template-columns:minmax(0,1fr)}
.bk-step{display:flex;align-items:flex-start;gap:1rem;padding-top:1.125rem;border-top:1px solid var(--on-dark-divider)}
.bk-step + .bk-step{margin-top:1.125rem}
.bk-step .n{flex:none;display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:var(--radius-s);
  background:color-mix(in oklab,var(--green-500) 22%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--green-300) 30%,transparent);
  font:var(--fw-ui) 1rem/1 var(--font-text);font-variant-numeric:tabular-nums;color:var(--green-300)}
.bk-step h2{font:var(--fw-ui) max(1.125rem,17px)/1.3 var(--font-text);color:var(--on-dark-heading)}
.bk-step p{margin-top:.1875rem;max-width:36ch;font-size:max(.9375rem,15px);line-height:1.45;color:var(--on-dark-body);text-wrap:pretty}

/* the other way in: the Sales Team's inbox, behind the same calendar */
.bk-write{font-size:max(.9375rem,15px);line-height:1.45;color:var(--on-dark-muted)}
.bk-write a,.bk-alt a{color:var(--on-dark-heading);font-weight:var(--fw-ui);text-decoration:underline 1px;text-decoration-color:color-mix(in oklab,var(--green-300) 55%,transparent);
  text-underline-offset:.22em;border-radius:3px;transition:text-decoration-color .2s ease}
@media (hover:hover){.bk-write a:hover,.bk-alt a:hover{text-decoration-color:var(--green-300)}}

/* ---- the calendar ----
   Google's page in a white sheet. The sheet is Google's own white, so nothing changes colour when the page inside
   paints. From about 740px of width Google sets three days or more beside the month and stands 1,205 to 1,260px tall
   whatever is picked, so the frame is that tall and the page scrolls, never the frame. Narrower, it shows two days or
   stacks the month over the day (up to 1,860px), so the frame is the screen and scrolls inside. Until Google's page
   has loaded, a quiet line in the sheet says what is coming. (The same measures as khyzr.studio's, 17 Oct 2026.) */
.bk-cal{grid-area:cal;min-width:0;display:grid;gap:1.125rem;container:bk-cal/inline-size}
.bk-sheet{position:relative;overflow:hidden;border-radius:var(--radius-l);background:#fff;   /* Google's page, not a site value */
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 40px 80px -40px rgba(0,0,0,.9),0 0 120px -30px color-mix(in oklab,var(--green-500) 40%,transparent)}
.bk-frame{position:relative;z-index:1;display:block;width:100%;height:var(--cal-h);border:0}
/* forced colours: the sheet's white is taken away and Google's page draws without a ground, so the frame takes the
   theme's ground over the waiting line */
@media (forced-colors:active){.bk-frame{background:Canvas}}
.bk-wait{display:none;position:absolute;inset:0 0 auto;padding:7.5rem 1.5rem 0;text-align:center;font-size:.9375rem;line-height:1.45;color:var(--muted)}
/* Google's page has no ground of its own, so the line would show through it: it stands only until the frame has loaded */
.bk-js .bk-sheet:not(.is-in) .bk-wait{display:block}
@container bk-cal (max-width:739px){.bk-frame{height:clamp(560px,calc(100svh - 2rem),1860px)}}
.bk-alt{text-align:center;font-size:max(.9375rem,15px);line-height:1.45;color:var(--on-dark-muted)}

/* ---- 1180 and under, one column: the pitch, the calendar, then the steps ----
   Beside the pitch the calendar would come under the 740px where Google sets its week */
@media (max-width:1180px){
  .bk .in{grid-template-columns:minmax(0,1fr);grid-template-areas:"pitch" "cal" "steps" "write";row-gap:clamp(1.75rem,5vw,2.5rem)}
  .bk-aside{display:contents}
  .bk-pitch{grid-area:pitch}
  .bk-lede{max-width:32ch}
  .bk-steps{grid-area:steps;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--space-4)}
  .bk-step + .bk-step{margin-top:0}
  .bk-write{grid-area:write}
}
@media (max-width:720px){
  .bk-steps{grid-template-columns:minmax(0,1fr)}
  .bk-step + .bk-step{margin-top:1.125rem}
  .bk-sheet{border-radius:var(--radius-m)}
}
@media (pointer:coarse){.bk-write a,.bk-alt a{position:relative}.bk-write a::after,.bk-alt a::after{content:"";position:absolute;inset:-.75rem -.375rem}}

/* the footer follows on the same ink, a hairline between */
.bk-foot.hs-footer{border-top:1px solid var(--on-dark-divider)}