/* ==========================================================================
   Book your free session — builds on the tokens and components in styles.css
   ========================================================================== */

html:not(.js) .book-layout, html:not(.js) .book-steps, html:not(.js) .book-loading { display: none; }
[hidden] { display: none !important; }

.book { padding: calc(var(--header-h) + 1.25rem) 0 clamp(3rem, 6vw, 5rem); }

svg { flex: none; }
.book svg:not(.brand-mark) { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Progress */
.book-steps { margin-bottom: 1.5rem; }
.book-steps ol { display: flex; flex-wrap: wrap; gap: .625rem 1.75rem; font-size: .9375rem; color: var(--ink-soft); }
.book-steps li { display: flex; align-items: center; gap: .625rem; }
.book-steps .mark { width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1.5px solid var(--muted-blue); display: inline-flex; align-items: center; justify-content: center; font-size: .8125rem; }
.book-steps .mark svg { display: none; width: .875rem; height: .875rem; stroke-width: 2.4; }
.book-steps li[aria-current] { color: var(--ink); font-weight: 600; }
.book-steps li[aria-current] .mark { background: var(--deep); border-color: var(--deep); color: var(--surface); }
.book-steps li.is-done { color: #4d4d4d; }
.book-steps li.is-done .mark { background: var(--soft-blue); border-color: var(--soft-blue); color: var(--deep); }
.book-steps li.is-done .num { display: none; }
.book-steps li.is-done .mark svg { display: block; }

/* Layout */
.book-layout { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; }
.book-summary { flex: 1 1 18.75rem; min-width: 0; padding: .875rem; }
.book-panel { flex: 999 1 35rem; min-width: 0; }
.book-layout[data-current="3"] .book-summary { display: none; }
.book-layout[data-current="3"] .book-panel { max-width: 47.5rem; margin-inline: auto; }
.book-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); }

/* Summary card */
.summary-image { width: 100%; height: 11.25rem; object-fit: cover; object-position: 60% 40%; border-radius: 1rem; }
.summary-body { display: flex; flex-direction: column; gap: 1rem; padding: 1.125rem .75rem .75rem; }
.summary-title { font-family: var(--display); font-weight: 340; font-size: 1.875rem; line-height: 1.1; letter-spacing: -.015em; }
.summary-meta { margin-top: .375rem; font-weight: 500; }
.summary-text { color: #4d4d4d; }
.host { display: flex; align-items: center; gap: .75rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.host img { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; }
.host div { display: flex; flex-direction: column; }
.host-name { font-weight: 600; }
.host-title { font-size: .875rem; color: var(--ink-soft); }
.facts { display: flex; flex-direction: column; gap: .625rem; font-size: .9375rem; }
.facts li { display: flex; align-items: center; gap: .625rem; }
.facts svg { width: 1.25rem; height: 1.25rem; color: var(--steel); }
.chosen { margin-top: .25rem; padding: 1rem 1.125rem; border-radius: 1rem; background: var(--soft-blue); }
.chosen-label { font-size: .8125rem; color: #3d4a54; }
.chosen-date { margin-top: .125rem; font-weight: 600; }
.chosen-time { font-size: .9375rem; }
.text-button { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0; color: var(--deep); font-weight: 500; text-decoration: underline; text-underline-offset: .3em; }

/* Steps */
.book-step { padding: clamp(1.25rem, 3vw, 1.75rem); }
.js-anim-in { animation: step-in .45s var(--ease) both; }
@keyframes step-in { from { opacity: 0; transform: translateY(.75rem); } }
.step-title { font-family: var(--display); font-weight: 330; font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1.05; letter-spacing: -.02em; outline: none; }
.step-intro { margin-top: .5rem; color: #4d4d4d; }
.tz { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .625rem; margin-top: 1rem; font-size: .875rem; color: #4d4d4d; }
.tz svg { width: 1.125rem; height: 1.125rem; color: var(--steel); }
.tz strong { font-weight: 600; color: var(--ink); }

/* Picker */
.picker { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-top: 1.25rem; }
.calendar { flex: 1 1 18.75rem; min-width: 0; }
.times { flex: 1 1 13.75rem; min-width: 0; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .625rem; }
.cal-month, .times-title { font-family: var(--display); font-weight: 400; font-size: 1.375rem; line-height: 1.2; }
.times-title { margin-bottom: .75rem; }
.cal-nav { display: flex; gap: .25rem; }
.round-button { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--muted-blue); background: var(--surface); color: var(--deep); display: inline-flex; align-items: center; justify-content: center; transition: background-color .2s var(--ease); }
.round-button:hover:not(:disabled) { background: var(--soft-blue); }
.round-button:disabled { border-color: var(--line); color: #a9aeb2; cursor: default; }
.round-button svg { width: 1.125rem; height: 1.125rem; stroke-width: 1.8; }
.cal-weekdays, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25rem; }
.cal-weekdays { margin-bottom: .25rem; font-size: .8125rem; color: var(--ink-soft); text-align: center; }
.day { height: 2.75rem; border-radius: 999px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
button.day { background: var(--soft-blue); color: var(--deep); transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
button.day:hover { background: var(--muted-blue); }
button.day[aria-pressed="true"] { background: var(--deep); color: var(--surface); }
span.day { font-weight: 400; color: #767676; }
span.day.is-today { color: var(--ink); text-decoration: underline; text-underline-offset: .25em; }
.cal-key { display: flex; flex-wrap: wrap; gap: .375rem 1.125rem; margin-top: .875rem; font-size: .8125rem; color: var(--ink-soft); }
.cal-key span { display: inline-flex; align-items: center; gap: .5rem; }
.cal-key i { width: .75rem; height: .75rem; border-radius: 50%; }
.key-open { background: var(--soft-blue); }
.key-sel { background: var(--deep); }

.times-list { display: flex; flex-direction: column; gap: .5rem; }
.slot { min-height: 3rem; border-radius: 999px; border: 1.5px solid var(--muted-blue); background: var(--surface); color: var(--deep); font-weight: 500; display: flex; align-items: center; justify-content: center; gap: .5rem; transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease); }
.slot:hover { border-color: var(--deep); }
.slot[aria-pressed="true"] { background: var(--deep); border-color: var(--deep); color: var(--surface); font-weight: 600; }
.slot svg { display: none; width: 1.125rem; height: 1.125rem; stroke-width: 2; }
.slot[aria-pressed="true"] svg { display: block; }
.times-empty { color: #4d4d4d; }

.step-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .875rem 1.25rem; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.foot-summary { font-size: .9375rem; color: #4d4d4d; }
.btn:disabled { background: var(--line); color: var(--ink-soft); cursor: default; transform: none; box-shadow: none; }
.btn[aria-busy="true"] { background: var(--deep); color: var(--surface); }
.spinner { width: 1.125rem; height: 1.125rem; border-radius: 50%; border: 2px solid rgb(255 255 255 / .35); border-top-color: var(--surface); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Form */
.details-form { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 1.75rem; }
.details-form .step-foot { justify-content: flex-start; }
.field-row { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.field-row .field { flex: 1 1 15rem; min-width: 0; }
.field { display: flex; flex-direction: column; gap: .5rem; }
.field label { font-weight: 600; font-size: .9375rem; }
.optional { font-weight: 400; color: var(--ink-soft); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea { width: 100%; box-sizing: border-box; padding: 0 1rem; border-radius: .875rem; border: 1.5px solid var(--muted-blue); background: var(--surface); font: inherit; color: var(--ink); transition: border-color .2s var(--ease); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select { height: 3.25rem; }
.field select { appearance: none; padding-right: 2.75rem; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2327323b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.125rem; }
.field textarea { padding-block: .875rem; resize: vertical; min-height: 7.5rem; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #a6b4bf; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--deep); outline-offset: 1px; border-color: var(--deep); }
.field-narrow input { max-width: 22.5rem; }
.field-hint { font-size: .8125rem; color: var(--ink-soft); }
.field-error { display: none; align-items: center; gap: .375rem; font-size: .875rem; color: #a23b2a; }
.field.has-error .field-error { display: flex; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border: 2px solid #a23b2a; }
.check { display: flex !important; align-items: flex-start; gap: .75rem; font-weight: 400 !important; cursor: pointer; }
.check input { width: 1.375rem; height: 1.375rem; margin: .125rem 0 0; accent-color: var(--deep); flex: none; }
.check a { color: var(--deep); text-underline-offset: .25em; text-decoration: underline; }
.form-alert { padding: .875rem 1rem; border-radius: var(--r-md); background: var(--warm); color: var(--deep); line-height: 1.5; }
.form-alert[hidden] { display: none; }
.form-alert a { text-decoration: underline; text-underline-offset: .3em; }
.form-alert .text-button { min-height: 0; }
/* Hidden from people; bots that fill every field are ignored by the server. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Confirmation */
.confirm { padding: 0; overflow: hidden; }
.confirm-head { display: flex; flex-direction: column; align-items: flex-start; gap: 1.125rem; padding: 2.5rem 2rem 2rem; background: var(--soft-blue); }
.confirm-mark { width: 4rem; height: 4rem; }
.book .confirm-mark circle { fill: var(--surface); stroke: var(--deep); stroke-width: 1.5; }
.book .confirm-mark path { stroke: var(--deep); stroke-width: 2.5; }
.confirm .step-title { font-size: clamp(2.125rem, 4vw, 3rem); }
.confirm-email { font-size: 1.0625rem; color: #3d4a54; }
.confirm-email strong { color: var(--deep); font-weight: 600; }
.confirm-body { display: flex; flex-direction: column; gap: 1.625rem; padding: 1.75rem 2rem 2rem; }
.confirm-list { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.125rem 1.5rem; }
.confirm-list div { display: flex; flex-direction: column; gap: .125rem; }
.confirm-list dt { font-size: .8125rem; color: var(--ink-soft); }
.confirm-list dd { margin: 0; font-weight: 600; }
.confirm-block { display: flex; flex-direction: column; gap: .75rem; padding-top: 1.375rem; border-top: 1px solid var(--line); }
.confirm-block h2 { font-size: .9375rem; font-weight: 600; }
.confirm-block ul { display: flex; flex-direction: column; gap: .5rem; padding-left: 1.25rem; list-style: disc; color: #3d4a54; }
.confirm-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .875rem; padding-top: 1.375rem; border-top: 1px solid var(--line); font-size: .9375rem; color: #4d4d4d; }

.noscript { padding: 1.5rem; }
.noscript a { color: var(--deep); text-decoration: underline; }

/* Loading and the backup (Google appointment page) */
.book-loading { display: flex; align-items: center; gap: .75rem; padding: 1.5rem; color: var(--ink-soft); }
.book-loading .spinner { border-color: var(--line); border-top-color: var(--deep); }
.book-fallback { margin-top: clamp(2rem, 4vw, 3rem); }
.book-embed { border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.book-embed iframe { display: block; width: 100%; height: 760px; border: 0; }
.book-embed-note { padding: .875rem 1.25rem; border-top: 1px solid var(--line); font-size: .875rem; color: var(--ink-soft); }
.book-embed-note a { text-decoration: underline; text-underline-offset: .3em; }

/* Phones */
@media (max-width: 39.99rem) {
  .book { padding-top: calc(var(--header-h) + .75rem); }
  .book-steps ol { gap: .5rem 1rem; font-size: .875rem; }
  .book-steps .mark { width: 1.5rem; height: 1.5rem; font-size: .75rem; }
  .book-layout { gap: 1rem; }
  .book-summary { padding: .5rem; }
  .summary-image { display: none; }
  .summary-body { padding: .75rem; gap: .875rem; }
  .summary-title { font-size: 1.5rem; }
  .summary-text { font-size: .9375rem; }
  .book-layout[data-current="2"] .summary-text, .book-layout[data-current="2"] .facts { display: none; }
  .step-foot .btn { width: 100%; }
  .confirm-head { padding: 1.75rem 1.25rem 1.5rem; }
  .confirm-body { padding: 1.25rem 1.25rem 1.5rem; }
  .confirm-list { grid-template-columns: 1fr; }
  .confirm-foot .btn { width: 100%; }
  .book-embed iframe { height: 980px; }
}

@media (prefers-reduced-motion: reduce) {
  .js-anim-in, .spinner { animation: none; }
}
.book-head { max-width: 40rem; }
.book-head .lede { margin-top: 1rem; }

/* ---------- Step 0: what would you like to talk about? ---------- */
.has-topic .book-topic { display: none; }
.book-topic { padding-top: clamp(1rem, 3vw, 2rem); }
.topic-head { max-width: 40rem; }
.topic-title { margin-top: .75rem; font-family: var(--display); font-weight: 330; font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.topic-lede { margin-top: .875rem; font-size: 1.125rem; color: var(--ink-soft); }
.topic-grid { display: grid; gap: 1rem; margin-top: 2rem; }
.topic-card { position: relative; display: flex; flex-direction: column; gap: .375rem; padding: 1.5rem 1.5rem 1.625rem; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); border: 1.5px solid transparent; transition: border-color .2s var(--ease), transform .2s var(--ease); }
.topic-card:hover { border-color: var(--deep); transform: translateY(-2px); }
.topic-card:focus-visible { outline: 2px solid var(--deep); outline-offset: 3px; }
.topic-card::after { content: "→"; position: absolute; right: 1.5rem; top: 1.5rem; font-size: 1.125rem; color: var(--ink-soft); }
.topic-name { font-family: var(--display); font-size: 1.5rem; line-height: 1.15; color: var(--ink); padding-right: 2rem; }
.topic-meta { font-size: .875rem; font-weight: 600; color: var(--deep); }
.topic-text { font-size: 1rem; line-height: 1.5; color: #4a4a4a; }
.summary-topic { margin-top: .5rem; font-size: .9375rem; color: var(--ink-soft); }
.summary-topic strong { color: var(--ink); font-weight: 600; }
.summary-topic a { color: var(--deep); text-decoration: underline; text-underline-offset: .2em; }
@media (min-width: 48rem) { .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .topic-card, .topic-card:hover { transition: none; transform: none; } }