/* "Talk to Jonah. Or get it on paper." ported from the approved site (aeo-medspas polish/design-pass-1:
   app/v2/components/booking/booking-block.css, the clear glass of styles/sd/clear-glass.css). Layout, sizes and states are
   the approved ones; the card material is the .sd-sky__card glass of site.css; the approved mauve is this site's navy and teal (2026-11-05: no green; the olive version is in archive/olive-2026-11-05/).
   Loaded after site.css and before blue.css. Own prefix (bk-, book) so nothing here touches another section. */

.book {
  --ol: #3D6672; --ol-fill: #0E3543; --ol-label: #F6F3EC; --navy: #0E3543; --word: #0b1f2a;
  --bk-cell: clamp(32px, 4.7svh, 44px);
  --bk-sans: 'Jost', 'Futura', 'Avenir Next', system-ui, sans-serif;
  --bk-serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  position: relative; isolation: isolate; overflow: hidden;
  padding: calc(var(--nav-h) + 2svh) var(--pad) clamp(40px, 8svh, 90px);
  background: var(--paper) var(--paper-tex); background-size: 512px; color: var(--word);
  font-family: var(--bk-serif); font-size: 16px; line-height: 1.5;
}
.book::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(168deg, rgb(255 251 243 / .34), rgb(255 251 243 / 0) 34%, rgb(70 52 30 / .1)); }
/* a soft wash of the dove blue behind the two cards, so the glass has something to bend */
.book::after { content: ""; position: absolute; z-index: -1; left: 4%; right: 4%; top: 22%; bottom: 14%; pointer-events: none;
  background: radial-gradient(60% 70% at 50% 50%, rgb(150 190 205 / .55), rgb(150 190 205 / 0) 72%); }
.book__wrap { position: relative; max-width: 1422px; margin: 0 auto; }
.book :is(h2, h3, p, ul) { margin: 0; }
.book__eyebrow { display: none; font: 500 .8125rem/1.2 var(--bk-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ol); margin-bottom: 14px; }
.book__title { font-family: var(--bk-serif); font-weight: 400; font-size: clamp(1.75rem, 1rem + 3svh, 3rem); line-height: 1.06; letter-spacing: -.02em; color: var(--navy); }
.book__brk { display: none; }
.book__sub { margin-top: 2px; font-size: 1rem; color: var(--word); }
.book__skip { display: none; }

.book__grid { display: grid; grid-template-columns: minmax(0, 1.58fr) minmax(0, 1fr); gap: clamp(10px, 1.6svh, 20px) 20px; margin: clamp(10px, 1.6svh, 24px) -36px 0; align-items: stretch; }
@media (max-width: 1500px) { .book__grid { margin-inline: 0; } }

/* the card: Jonah's clear liquid glass, the recipe of .sd-sky__card */
.bk-card { position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; border-radius: 24px; padding: clamp(14px, 2.2svh, 24px) 24px; color: var(--word); text-shadow: none;
  background: none; box-shadow: 0 30px 56px -28px rgb(10 40 58 / 0.5), 0 8px 20px -12px rgb(10 40 58 / 0.25); }
.bk-card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(155deg, rgb(258 255 252 / 0.42), rgb(258 255 252 / 0.22) 42%, rgb(258 255 252 / 0.3));
  -webkit-backdrop-filter: blur(16px) saturate(1.25) brightness(1.1); backdrop-filter: blur(16px) saturate(1.25) brightness(1.1);
  filter: url(#sd-lens-m); clip-path: inset(0 round 24px); }
.bk-card::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: none;
  box-shadow: inset 1px 1px 0 rgb(258 255 252 / 0.9), inset -1px -1px 0 rgb(258 255 252 / 0.45), inset 0 0 0 1px rgb(258 255 252 / 0.22), inset 0 0 7px rgb(258 255 252 / 0.28), inset 0 16px 28px -22px rgb(258 255 252 / 0.65); }
.bk-card h3 { font-family: var(--bk-serif); font-weight: 400; font-size: 1.375rem; line-height: 1.12; letter-spacing: -.01em; color: var(--navy); }
.bk-lede { margin-top: 3px !important; font-size: .9375rem; line-height: 1.4; }
.bk-facts { margin-top: 3px !important; font-size: .875rem; }

.bk-callhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.bk-who { display: flex; align-items: center; gap: 13px; flex: none; }
.bk-avatar { width: 44px; height: 44px; flex: none; border-radius: 50%; padding: 2px; background: rgb(258 255 252 / .75); box-shadow: 0 1px 4px rgb(10 40 58 / .25); }
.bk-avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.bk-who__name { font-size: 1rem; font-weight: 500; line-height: 1.25; }
.bk-who__place { font-size: .875rem; }

.bk-cal { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 32px; margin-top: clamp(8px, 1.4svh, 18px); padding: clamp(8px, 1.4svh, 16px) 0 0; border-top: 1px solid rgb(11 31 42 / .16); flex: 1 1 auto; align-content: start; }
.bk-cal__head { display: flex; align-items: center; justify-content: space-between; min-height: 32px; }
.bk-month { font-size: 1.125rem; font-weight: 500; color: var(--word); }
.bk-month span { font-weight: 400; }
.bk-arrows { display: flex; gap: 8px; }
.bk-arrow { width: 32px; height: 32px; padding: 0 0 3px; border: 0; border-radius: 50%; background: rgb(246 250 252 / .55); color: var(--word); font: 400 20px/1 var(--bk-sans); cursor: pointer; }
.bk-arrow:hover:not(:disabled) { background: rgb(246 250 252 / .95); }
.bk-arrow:disabled { opacity: .35; cursor: default; }
.bk-dow, .bk-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px 5px; justify-items: center; }
.bk-dow { margin-top: 2px; }
.bk-dow span { padding: 4px 0; font: 400 .75rem/1.2 var(--bk-sans); letter-spacing: .06em; text-transform: uppercase; text-align: center; color: var(--word); }
.bk-days { margin-top: 4px; }
.bk-day { position: relative; display: flex; align-items: center; justify-content: center; width: var(--bk-cell); height: var(--bk-cell); padding: 0; border: 0; border-radius: 50%; background: transparent; font: 400 14px/1 var(--bk-sans); color: var(--word); }
.bk-day[aria-hidden="true"] { color: rgb(11 31 42 / .6); }
button.bk-day { cursor: pointer; background: rgb(246 250 252 / .9); color: #0e2531; transition: transform .2s var(--ease), background-color .2s var(--ease); }
button.bk-day:hover { transform: translateY(-2px); background: #fff; }
button.bk-day[aria-pressed="true"] { background: var(--ol-fill); color: var(--ol-label); font-weight: 600; }
.bk-day[data-today="true"]::after { content: ""; position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.bk-days[data-state="loading"] .bk-day, .bk-days[data-state="idle"] .bk-day { opacity: .4; }

.bk-pick { display: flex; flex-direction: column; min-width: 0; }
.bk-pick__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-height: 32px; font-size: 1rem; font-weight: 500; }
.bk-zone { font: 400 .75rem/1.2 var(--bk-sans); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.bk-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.bk-slot { padding: clamp(5px, 1.05svh, 10px) 0; border: 0; border-radius: 12px; background: rgb(246 250 252 / .9); font: 400 .9375rem/1.3 var(--bk-sans); text-align: center; color: #0e2531; cursor: pointer; transition: transform .2s var(--ease), background-color .2s var(--ease); }
.bk-slot:hover { transform: translateY(-1px); background: #fff; }
.bk-slot[aria-pressed="true"] { background: var(--ol-fill); color: var(--ol-label); font-weight: 500; }
.bk-slot--ghost { display: block; height: clamp(28px, 4.4svh, 39px); cursor: default; opacity: .5; }
a.bk-slot--more { display: block; text-decoration: underline; text-underline-offset: 3px; }
.bk-status { margin-top: 12px; font-size: .9375rem; line-height: 1.45; }
.bk-status:empty { margin: 0; }
.bk-retry { align-self: flex-start; margin-top: 4px; padding: 10px 0; border: 0; background: none; font: 400 .9375rem var(--bk-sans); color: var(--ol); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bk-retry[hidden] { display: none; }
.bk-cta { display: block; margin-top: 8px; padding-block: clamp(8px, 1.5svh, 14px); padding-inline: 18px; border-radius: 999px; background: var(--ol-fill); color: var(--ol-label); font: 600 .9375rem/1.3 var(--bk-sans); letter-spacing: -.005em; text-align: center; text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgb(258 255 252 / .22), inset 0 -2px 0 rgb(0 0 0 / .25), 0 10px 22px -10px rgb(30 50 5 / .55); transition: transform .2s var(--ease); }
.bk-cta:hover { transform: translateY(-1px); }
.bk-next { margin-top: 5px !important; font-size: .8125rem; text-align: center; }

.bk-promises { list-style: none; padding: clamp(8px, 1.4svh, 14px) 0 0; margin-top: auto !important; border-top: 1px solid rgb(11 31 42 / .16); display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bk-promises li { display: grid; grid-template-columns: 18px 1fr; gap: 11px; align-items: start; font-size: .875rem; line-height: 1.35; }
.bk-promises b { font-weight: 500; font-size: .9375rem; color: var(--navy); }
.bk-tick { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-top: 2px; border-radius: 3px; background: var(--navy); }
.bk-tick::after { content: ""; width: 9px; height: 4.5px; border-left: 2px solid #F6F3EC; border-bottom: 2px solid #F6F3EC; transform: rotate(-45deg) translate(1px, -1px); }

/* the paper card: the printed audit and its three steps */
.bk-keep { margin-top: 4px !important; font-size: .875rem; line-height: 1.38; }
.bk-fold { margin-top: clamp(6px, 1.2svh, 16px); padding-top: clamp(6px, 1.2svh, 16px); }
.bk-foldbtn { display: none; }
.bk-foldbody:focus { outline: none; }
.bk-wiz { display: flex; flex-direction: column; gap: clamp(6px, 1.2svh, 14px); }
.bk-wiz__head { display: grid; gap: 6px; }
.bk-wiz__count { font: 500 .75rem/1.2 var(--bk-sans); letter-spacing: .17em; text-transform: uppercase; }
.bk-wiz__bar { display: block; height: 3px; border-radius: 2px; background: rgb(11 31 42 / .22); }
.bk-wiz__bar i { display: block; height: 100%; border-radius: 2px; background: var(--ol); transition: width .3s var(--ease); }
.bk-wiz__title { font: 400 clamp(1.25rem, .8rem + 1.6svh, 1.75rem)/1.15 var(--bk-serif) !important; color: var(--navy); }
.bk-wiz__title:focus { outline: none; }
.bk-wiz__step { display: flex; flex-direction: column; gap: clamp(6px, 1.2svh, 16px); }
.bk-tiles { display: flex; flex-direction: column; gap: clamp(5px, 1svh, 10px); margin: 0; padding: 0; border: 0; min-width: 0; }
.bk-tile { display: block; width: 100%; text-align: left; padding: clamp(5px, 1svh, 11px) 16px; border: 1px solid transparent; border-radius: 16px; background: rgb(246 250 252 / .92); color: #0e2531; font: inherit; cursor: pointer; transition: transform .2s var(--ease); }
.bk-tile:hover { transform: translateY(-1px); }
.bk-tile b { display: block; font: 500 .9375rem/1.3 var(--bk-sans); }
.bk-tile span { display: block; font: 400 .8125rem/1.25 var(--bk-sans); }
.bk-tile[aria-pressed="true"] { border-color: var(--ol); box-shadow: inset 0 0 0 1px var(--ol); }
.bk-wiz__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bk-wiz__nav p { font-size: .9375rem; }
.bk-skip, .bk-back { padding: 10px 0; border: 0; background: none; font: 400 .9375rem var(--bk-sans); color: var(--word); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bk-next-btn { padding: 12px 26px; border: 0; border-radius: 999px; background: var(--ol-fill); color: var(--ol-label); font: 600 .9375rem/1.2 var(--bk-sans); cursor: pointer; box-shadow: inset 0 1px 0 rgb(258 255 252 / .22), inset 0 -2px 0 rgb(0 0 0 / .25), 0 10px 22px -10px rgb(30 50 5 / .55); }
.bk-next-btn:disabled { opacity: .55; cursor: default; }
.bk-field { display: grid; gap: clamp(3px, .6svh, 7px); }
.bk-field label { font: 400 .875rem/1.3 var(--bk-sans); }
.bk-field input, .bk-field select { width: 100%; height: clamp(34px, 5.4svh, 46px); padding: 0 14px; border: 0; border-radius: 12px; background: rgb(246 250 252 / .92); color: #0e2531; font: 400 .9375rem var(--bk-sans); }
.bk-field input::placeholder { color: rgb(11 31 42 / .55); }
.bk-field input[aria-invalid="true"] { box-shadow: 0 0 0 2px #A33A3A; }
.bk-err { font: 400 .875rem/1.3 var(--bk-sans); color: #8E2B2B; }
.bk-consent { font: 400 .8125rem/1.35 var(--bk-sans); }
.bk-done p:first-child { font: 500 .75rem/1.2 var(--bk-sans); letter-spacing: .17em; text-transform: uppercase; color: var(--ol); }
.bk-done p + p { margin-top: 6px; font: 400 clamp(1.25rem, .8rem + 1.6svh, 1.75rem)/1.2 var(--bk-serif); color: var(--navy); }
.bk-paper:has([data-step="2"], [data-step="3"]) :is(.bk-lede, .bk-keep) { display: none; }
.bk-paper:has(.bk-done) :is(.bk-lede, .bk-keep) { display: none; }

.bk-look { display: grid; grid-template-columns: .78fr 2.22fr; gap: 40px; align-items: start; margin-top: clamp(16px, 3svh, 36px); padding-top: clamp(14px, 2.4svh, 26px); border-top: 1px solid rgb(11 31 42 / .16); }
.bk-look h3 { font: 500 1.125rem/1.3 var(--bk-sans); color: var(--navy); }
.bk-look__note { margin-top: 4px !important; font-size: .875rem; }
.bk-look__q { margin-top: 6px !important; font-size: 1rem; }
.bk-look__q b { font-weight: 400; color: var(--navy); }
.bk-cells { display: grid; grid-template-columns: 1fr 1fr 1.25fr 1.3fr 1fr; padding: 0; list-style: none; }
.bk-cell { padding: 2px 0 2px 20px; border-left: 1px solid rgb(11 31 42 / .22); }
.bk-cell__name { display: block; font: 400 .875rem/1.3 var(--bk-sans); white-space: nowrap; }
.bk-cell__result { display: block; margin-top: 6px; font-size: 1.0625rem; white-space: nowrap; color: var(--navy); }
.bk-cell[data-hit="true"] { border-left-color: var(--ol); }
.bk-cell[data-hit="true"] .bk-cell__result { color: var(--ol); }
.bk-cell[data-hit="true"] .bk-cell__result::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--ol); vertical-align: 2px; }
.bk-look__after { margin-top: 14px !important; font-size: .875rem; }
.bk-neither { margin-top: clamp(16px, 3.4svh, 40px) !important; font-size: 1rem; text-align: center; }
.bk-neither a { font-weight: 500; color: var(--navy); text-decoration: none; }
.bk-neither a:hover { text-decoration: underline; text-underline-offset: 3px; }

.book :is(a, button, select, input):focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .book * { transition: none !important; animation: none !important; } }
@media (prefers-reduced-motion: no-preference) {
  @keyframes bkDayIn { from { opacity: .4; transform: scale(.92); } to { opacity: 1; transform: none; } }
  .bk-days.is-new[data-state="ready"] .bk-day { animation: bkDayIn .35s var(--ease) both; animation-delay: calc(var(--i, 0) * 14ms); }
}

@media (max-width: 1180px) {
  .book__brk { display: inline; }
  .book__grid { grid-template-columns: minmax(0, 1fr); margin-inline: 0; }
  .bk-look { grid-template-columns: 1fr; gap: 20px; }
  .bk-arrow { width: 44px; height: 44px; }
  .bk-dow, .bk-days { gap: 3px; }
  .bk-neither a { display: inline-block; padding: 12px 4px; }
}
@media (max-width: 900px) {
  .bk-cells { grid-template-columns: 1fr; }
  .bk-cell { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-left: 0; border-top: 1px solid rgb(11 31 42 / .16); }
  .bk-cell:first-child { padding-top: 4px; border-top: 0; }
  .bk-cell__name { font-size: .97rem; }
  .bk-cell__result { margin-top: 0; font-size: .97rem; }
}
@media (max-width: 760px) {
  .book { --bk-cell: 44px; padding: calc(var(--nav-h) + 12px) var(--pad) 48px; }
  .book__eyebrow { display: block; }
  .book__title { font-size: 2.5rem; line-height: 1.08; }
  .book__sub { margin-top: 14px; font-size: 1.0625rem; }
  .book__skip { display: inline-block; margin-top: 6px; padding: 12px 0; font-size: .97rem; color: var(--word); text-decoration: underline; text-underline-offset: 3px; }
  .book__grid { margin: 14px -8px 0; gap: 16px; }
  .bk-card { padding: 22px 16px; border-radius: 22px; }
  .bk-card h3 { font-size: 1.6875rem; }
  .bk-callhead { flex-direction: column-reverse; gap: 16px; }
  .bk-avatar { width: 56px; height: 56px; }
  .bk-cal { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 20px; padding: 18px 0 22px; }
  .bk-dow, .bk-days { gap: 3px 2px; }
  .bk-slots { grid-template-columns: 1fr 1fr 1fr; }
  .bk-slot { padding: 14px 0; }
  .bk-cta { padding: 17px 18px; font-size: 1rem; }
  .bk-promises { grid-template-columns: 1fr; gap: 11px; padding-top: 20px; }
  .bk-promises li { font-size: .97rem; }
  .bk-promises b { display: inline; font-size: .97rem; }
  .bk-lede, .bk-keep { font-size: 1rem; }
  .bk-fold { margin-top: 18px; padding-top: 0; }
  .bk-foldbtn { display: block; width: 100%; padding: 15px 18px; border: 1.5px solid rgb(11 31 42 / .45); border-radius: 999px; background: transparent; color: #0b1f2a; font: 600 .97rem var(--bk-sans); text-align: center; cursor: pointer; }
  .bk-fold[data-open="true"] .bk-foldbtn { display: none; }
  .bk-fold[data-open="false"] .bk-foldbody { display: none; }
  .bk-tile { padding: 12px 16px; min-height: 44px; }
  .bk-field input, .bk-field select { height: 46px; font-size: 1rem; }
  .bk-look { margin-top: 32px; padding-top: 26px; }
  .bk-neither { margin-top: 32px !important; }
}

/* Jonah 2026-11-04 23:11, "Yes, blue band": the section becomes a band of the dove's dusty blue, so the glass has blue
   behind it, as on the approved site, and reads the same instead of near white on cream. It is lighter than the approved
   sky so the small words keep their readability: #0b1f2a is 7.1:1 and the navy 5.5:1 on its darkest blue (#8FAFB8). Olive
   words that sit on the band itself (not on a card) take the navy (5.5:1). */
.book { background: linear-gradient(180deg, #A9C3CA 0%, #9AB8C0 45%, #8FAFB8 100%); }
.book::before { background: var(--paper-tex) 0 0 / 512px; mix-blend-mode: multiply; opacity: .2; }
.book::after { background: radial-gradient(60% 70% at 50% 50%, rgb(235 244 247 / .32), rgb(235 244 247 / 0) 72%); }
.book__eyebrow, .bk-cell[data-hit="true"] .bk-cell__result { color: #0E3543; }
.bk-cell[data-hit="true"] { border-left-color: #0E3543; }
.bk-cell[data-hit="true"] .bk-cell__result::before { background: #0E3543; }