:root {
  color-scheme: dark;
  --book-bg: #050a12;
  --book-ink: #f4f7ff;
  --book-muted: #aab7ce;
  --book-accent: #779bff;
  --book-line: #253044;
  --book-font: Manrope, Arial, sans-serif;
  --book-mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: auto; }
body { margin: 0; background: var(--book-bg); color: var(--book-ink); font-family: var(--book-font); }
a { color: inherit; text-underline-offset: .25em; }
a:hover { color: var(--book-accent); }
a:focus-visible, [tabindex]:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--book-accent); outline-offset: 4px; }
.skip-link { position: absolute; left: 1rem; top: -5rem; z-index: 10; padding: .75rem 1rem; background: var(--book-ink); color: var(--book-bg); }
.skip-link:focus { top: 1rem; }
.book-shell { width: min(1240px, calc(100% - 6rem)); margin-inline: auto; }
.book-header { min-height: 100px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--book-line); gap: 1.5rem; }
.book-brand { display: grid; grid-template-columns: 40px auto; column-gap: .75rem; row-gap: .375rem; align-items: center; width: max-content; text-decoration: none; }
.book-brand img { grid-row: 1 / 3; filter: drop-shadow(0 0 12px rgb(77 119 255 / 55%)); }
.book-brand-name { font-size: 1.25rem; letter-spacing: .34em; font-weight: 600; line-height: 1; }
.book-brand-line { color: var(--book-muted); font: .5rem/1.4 var(--book-mono); letter-spacing: .1em; text-transform: uppercase; }
.book-brand-line b { color: var(--book-accent); margin-right: .25rem; }
.book-header-note { color: var(--book-muted); font: .625rem/1.5 var(--book-mono); letter-spacing: .12em; }
.book-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); align-items: start; gap: 5rem; padding-block: 4rem 5rem; }
.book-intro { padding-top: 1.5rem; }
.book-eyebrow { margin: 0; color: var(--book-muted); font: .625rem/1.8 var(--book-mono); letter-spacing: .1em; }
.book-intro > .book-eyebrow { display: flex; align-items: center; gap: .625rem; }
.book-eyebrow > span { width: .375rem; height: .375rem; background: var(--book-accent); border-radius: 50%; flex: 0 0 auto; }
h1 { font-size: clamp(2.75rem, 4vw, 4rem); line-height: 1.1; letter-spacing: -.055em; font-weight: 600; margin: 1.5rem 0; }
h1 em { color: var(--book-accent); font-style: normal; }
.book-lead { color: var(--book-muted); font-size: 1rem; line-height: 1.8; max-width: 24rem; margin: 0 0 2rem; }
.book-details { display: flex; flex-direction: column; gap: .875rem; list-style: none; margin: 0; padding: 0; font-size: .8125rem; }
.book-details li { display: flex; align-items: center; gap: .75rem; }
.book-details svg { width: 18px; height: 18px; fill: none; stroke: var(--book-accent); stroke-width: 1.5; flex: 0 0 auto; }
.book-host { display: flex; align-items: center; gap: 1rem; padding-block: 2rem; margin-top: 2rem; border-top: 1px solid var(--book-line); }
.book-host img { border-radius: 50%; object-fit: cover; object-position: 50% 25%; }
.book-host strong { display: block; font-size: .875rem; font-weight: 600; }
.book-host span { display: block; margin-top: .375rem; color: var(--book-muted); font-size: .75rem; }
.book-next { border-top: 1px solid var(--book-line); padding-top: 1.5rem; }
.book-next h2 { font-size: .875rem; margin: 0 0 1rem; font-weight: 600; }
.book-next ol { padding-left: 1.25rem; margin: 0; color: var(--book-muted); font-size: .8125rem; line-height: 1.9; }
.book-next li { padding-left: .25rem; margin-block: .375rem; }
.book-next > p { color: var(--book-muted); font-size: .6875rem; line-height: 1.8; margin: 1.5rem 0 0; }
.book-calendar { min-width: 0; border: 1px solid var(--book-line); border-radius: .5rem; overflow: hidden; scroll-margin-top: 1rem; background: #0b1423; }
.book-calendar-heading { padding: 1.75rem 2rem; background: #0b1423; color: var(--book-ink); border-bottom: 1px solid var(--book-line); }
.book-calendar-heading h2 { font-size: 1.5rem; letter-spacing: -.035em; margin: .5rem 0; font-weight: 600; }
.book-calendar-heading > p:last-child { margin: 0; font-size: .75rem; line-height: 1.7; color: var(--book-muted); }
.book-picker { padding: 1.75rem 2rem 2rem; min-height: 480px; }
.book-field { display: flex; flex-direction: column; gap: .625rem; color: #c1cce0; font-size: .75rem; min-width: 0; }
.book-field input, .book-field select { width: 100%; min-height: 48px; border: 1px solid #35425a; border-radius: .25rem; padding: .75rem; background: #080f1d; color: var(--book-ink); font: .8125rem var(--book-font); }
.book-field input::placeholder { color: #8b9ab3; }
.book-timezone { margin-bottom: 1.75rem; }
.book-step-label { font: .625rem/1.8 var(--book-mono); letter-spacing: .1em; color: var(--book-muted); margin: 0 0 1rem; }
.book-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.book-day { display: flex; flex-direction: column; gap: .375rem; padding: 1rem .5rem; background: #0c1728; border: 1px solid #30415d; border-radius: .375rem; color: var(--book-muted); font: .6875rem var(--book-mono); cursor: pointer; }
.book-day span:nth-child(2) { color: var(--book-ink); font: 600 1.75rem var(--book-font); }
.book-day[aria-pressed="true"] { border-color: var(--book-accent); background: #152747; color: #bcd0ff; }
.book-time-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 1.75rem 0 1rem; }
.book-time-heading h3 { font-size: .875rem; font-weight: 500; margin: 0; }
.book-time-heading > span { color: var(--book-muted); font: .625rem var(--book-mono); white-space: nowrap; }
.book-times { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .625rem; }
.book-time { min-height: 46px; padding: .75rem .5rem; border: 1px solid #35425a; border-radius: .25rem; background: #0b1423; color: #d5def0; font: .8125rem var(--book-font); cursor: pointer; }
.book-time:hover, .book-day:hover { border-color: var(--book-accent); }
.book-time[aria-pressed="true"] { background: #233e71; color: #fff; border-color: var(--book-accent); }
.book-selection { margin: 1.5rem 0 1rem; min-height: 1.5rem; color: #aabbd8; font-size: .75rem; line-height: 1.8; overflow-wrap: anywhere; }
.book-button { width: 100%; min-height: 52px; display: flex; justify-content: space-between; align-items: center; gap: 1rem; border: 1px solid #527dff; border-radius: .25rem; background: #3f6af4; color: #fff; padding: 1rem 1.25rem; font: 600 .8125rem var(--book-font); cursor: pointer; }
.book-button:hover:not(:disabled) { background: #527af9; }
.book-button:disabled { opacity: .4; cursor: not-allowed; }
.book-button-quiet { width: auto; background: transparent; }
.book-time-note { margin: 1rem 0 0; font-size: .6875rem; line-height: 1.7; text-align: center; color: var(--book-muted); }
.book-loading { min-height: 320px; color: var(--book-muted); font-size: .8125rem; }
.book-skeleton { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: 1.5rem; }
.book-skeleton span { height: 96px; border-radius: .375rem; background: #152137; }
.book-error { padding-block: 1rem; min-height: 320px; font-size: .875rem; line-height: 1.8; color: var(--book-muted); }
.book-calendar-help { margin: 0; padding: 1rem 2rem; font-size: .6875rem; line-height: 1.8; color: var(--book-muted); background: #080f1c; border-top: 1px solid var(--book-line); }
.book-calendar-help a { color: #b7cbff; }
.book-back { border: 0; padding: 0; margin: 0 0 1.75rem; background: none; color: #b7cbff; font: .75rem var(--book-font); cursor: pointer; }
.book-form-title { margin: 0; font-size: 1.5rem; letter-spacing: -.035em; font-weight: 500; }
.book-chosen-time { margin: 1rem 0 1.75rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--book-line); color: #bcd0ff; font-size: .8125rem; line-height: 1.8; }
.book-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; }
.book-field-wide { grid-column: 1 / -1; }
.book-consent { display: flex; align-items: start; gap: .75rem; color: var(--book-muted); font-size: .6875rem; line-height: 1.8; margin-block: 1.5rem; }
.book-consent input { width: 16px; height: 16px; margin: .125rem 0 0; flex: 0 0 auto; accent-color: var(--book-accent); }
.book-preview-note { padding: .75rem; margin: 1rem 0 0; border: 1px solid #57472c; background: #211d16; color: #dfc99c; font-size: .6875rem; line-height: 1.8; text-align: center; }
.book-footer { border-top: 1px solid var(--book-line); padding-block: 2rem; }
.book-footer-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem 2rem; color: var(--book-muted); font-size: .625rem; line-height: 1.8; }
.book-footer nav { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }
.book-footer > p { color: #91a0ba; font-size: .625rem; line-height: 1.9; max-width: 70rem; margin: 1.5rem 0 0; }

@media (max-width: 1100px) {
  .book-shell { width: calc(100% - 4rem); }
  .book-layout { gap: 2.5rem; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); }
}

@media (max-width: 820px) {
  .book-header { min-height: 88px; }
  .book-layout { grid-template-columns: minmax(0, 1fr); padding-block: 2.5rem 3rem; gap: 2rem; }
  .book-intro { padding-top: 0; }
  h1 { font-size: 3rem; margin-block: 1rem; }
  h1 br { display: none; }
  .book-lead { max-width: 36rem; margin-bottom: 1.5rem; }
  .book-details { flex-direction: row; flex-wrap: wrap; gap: 1rem 1.5rem; }
  .book-host { margin-top: 1.5rem; padding-block: 1.5rem 0; }
  .book-next { display: none; }
}

@media (max-width: 480px) {
  .book-shell { width: calc(100% - 2rem); }
  .book-header { min-height: 80px; }
  .book-header-note { display: none; }
  .book-layout { padding-top: 2rem; }
  h1 { font-size: clamp(2.5rem, 11vw, 3rem); max-width: 20rem; }
  .book-lead { font-size: .875rem; }
  .book-details { gap: .875rem 1rem; font-size: .75rem; }
  .book-calendar-heading { padding: 1.5rem; }
  .book-calendar-heading h2 { font-size: 1.375rem; }
  .book-picker { padding: 1.5rem 1.25rem; }
  .book-days { gap: .5rem; }
  .book-times { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .book-time-heading h3 { font-size: .8125rem; }
  .book-form-grid { grid-template-columns: minmax(0, 1fr); }
  .book-calendar-help { padding: 1rem; }
  .book-footer { padding-block: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.book-form-fields { padding: 0; margin: 0 0 1.25rem; border: 0; min-width: 0; }
.book-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.book-confirm-actions { display: grid; gap: .75rem; margin-top: 1rem; }
.book-privacy-button { border: 0; background: none; color: inherit; font: inherit; padding: 0; cursor: pointer; text-decoration: underline; }
.book-cookie-banner { position: fixed; z-index: 100; inset: auto 1rem 1rem auto; width: min(540px,calc(100% - 2rem)); padding: 1.25rem; border: 1px solid #35425a; border-radius: .375rem; background: #101a2c; color: #c0cde4; box-shadow: 0 12px 40px #0008; font-size: .75rem; line-height: 1.8; }
.book-cookie-banner p { margin: 0 0 1rem; }
.book-cookie-banner > div { display: flex; gap: .75rem; }
.book-cookie-banner .book-button { width: auto; flex: 1; min-height: 44px; padding: .75rem; font-size: .7rem; justify-content: center; }
@media(max-width:400px) { .book-cookie-banner > div { flex-direction: column; } }
