/* The booking pages (book.thesystemsdoula.com; plans/google-calendar-booking-plan.md 4; design .claude/design/booking.md
   and the approved pictures in .claude/design/mockups/booking/). The signing page's family: linen with grain, the LM
   lockup, the tracked amber label, Cormorant 300 title with one teal italic phrase, DM Sans body, the amber button with
   aubergine text, the outlined button, hairline rows, 3px corners, no pills, no red. Modules never import each other,
   so the shapes booking needs from billing-frontend/sign.css are copied here; the booking parts follow the mockup's
   own stylesheet (.claude/design/mockups/booking/src/booking.css). */
:root {
  --linen: #F8F4EF; --linen-warm: #FBF8F3; --sand: #E8E0D6; --ink: #3D2B4A; --ink-deep: #2A1D34; --ink-soft: #5E4B6C;
  --teal: #5B9E8F; --teal-text: #3F7568; --amber: #C4956A; --amber-text: #7E5A38; --btn: #B5875C;
  --hair: rgba(61, 43, 74, .14);
  --f-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --f-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --col: 40rem; --gut: clamp(1.25rem, 5vw, 2.5rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--ink-deep); font: 400 1.0625rem/1.75 var(--f-body); -webkit-font-smoothing: antialiased;
  background: var(--linen) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='512' height='512'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='5' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/></svg>");
  background-size: 512px;
}
p, h1, h2, dl, dd, fieldset { margin: 0; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
[hidden] { display: none !important; }

/* ── Frame: header lockup, column, footer ── */
.top { background: var(--linen); border-bottom: 1px solid var(--hair); }
.top__in, .main, .foot { max-width: calc(var(--col) + 2 * var(--gut)); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }
.bk-wide .top__in, .bk-wide .main, .bk-wide .foot { max-width: calc(66rem + 2 * var(--gut)); }
.top__in { padding-top: .8rem; padding-bottom: .8rem; display: flex; align-items: center; }
.lockup { display: inline-flex; align-items: center; gap: .75rem; }
.lockup__mark { width: 28px; height: 28px; flex: none; }
.lockup__frame { fill: none; stroke: var(--ink); stroke-width: 11; }
.lockup__m { fill: none; stroke: var(--teal); stroke-width: 8; stroke-linejoin: miter; }
.lockup__rule { width: 1px; height: 1.7rem; background: var(--amber); opacity: .6; }
.lockup__name { display: flex; flex-direction: column; line-height: 1.15; }
.lockup__line { display: flex; align-items: baseline; gap: .3rem; }
.lockup__first { font: 400 1rem var(--f-display); color: var(--ink); }
.lockup__last { font: 700 .78rem var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--teal-text); }
.lockup__desc { font: 500 .62rem var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--amber-text); }
.main { padding-top: clamp(1.75rem, 6vw, 3.5rem); padding-bottom: 3rem; outline: none; }
.main > * + *, .screen > * + * { margin-top: 1.1rem; }
.foot { padding-top: 1.4rem; padding-bottom: 2.2rem; border-top: 1px solid var(--hair); font-size: .875rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; }
.foot a { color: inherit; text-decoration-color: var(--amber); text-underline-offset: .2em; overflow-wrap: anywhere; }
/* Her email once per page: when the page's own message already links it (paused, link no longer active, email me to
   change), the footer keeps only the business name (her answer, 2026-10-21). */
body:has(.main a[href^="mailto:"]) .foot a { display: none; }

/* ── Type ── */
.label { margin: 0; font: 600 .72rem var(--f-body); letter-spacing: .26em; text-transform: uppercase; color: var(--amber-text); }
.title { margin: .5rem 0 0; font: 300 clamp(2.1rem, 9vw, 3rem)/1.08 var(--f-display); color: var(--ink); letter-spacing: -.005em; font-variant-numeric: lining-nums; outline: none; }
.title em { font-style: italic; font-weight: 400; color: var(--teal-text); white-space: nowrap; }
.lead { font-size: 1.125rem; color: var(--ink-soft); }
.note { margin: .6rem 0 0; font-size: .9375rem; color: var(--ink-soft); }
.mail, .bk-mail { font-weight: 600; color: var(--ink-deep); text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: .2em; overflow-wrap: anywhere; }

/* ── Buttons, links, fields ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: .8rem 1.6rem; border: 0;
  border-radius: 3px; background: var(--btn); color: var(--ink-deep); font: 700 .9rem var(--f-body); letter-spacing: .12em;
  text-transform: uppercase; cursor: pointer; text-decoration: none; transition: background .2s ease;
}
.btn:hover { background: #A97B51; }
.btn:disabled { background: var(--sand); color: var(--ink-soft); cursor: not-allowed; }
.btn-line {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .5rem 1.4rem;
  border: 1px solid var(--ink); border-radius: 3px; background: transparent; font: 700 .78rem var(--f-body); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink); cursor: pointer; text-decoration: none; transition: background .2s ease;
}
.btn-line:hover { background: var(--sand); }
.link {
  background: none; border: 0; padding: .55rem 0; min-height: 2.75rem; font: 600 .9375rem var(--f-body); color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: .25em; text-decoration-thickness: 1px; cursor: pointer;
}
.link--icon { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; }
.link--icon svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: var(--amber-text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.form { margin-top: 1.8rem; }
.form > * + * { margin-top: 1.2rem; }
.form__error { color: var(--ink-deep); background: rgba(196, 149, 106, .18); border-left: 3px solid var(--amber); padding: .6rem .8rem; border-radius: 0 3px 3px 0; font-weight: 500; }
.field { display: block; }
.field__label { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: .35rem; color: var(--ink-deep); }
.field__input { width: 100%; min-height: 3rem; padding: .6rem .8rem; font: 400 1.0625rem var(--f-body); color: var(--ink-deep); background: var(--linen-warm); border: 1px solid rgba(61, 43, 74, .35); border-radius: 3px; }
.field__input:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.field__hint { display: block; margin-top: .35rem; font-size: .875rem; color: var(--ink-soft); }
.field__opt { font-weight: 400; color: var(--ink-soft); }
textarea.field__input { min-height: 6rem; line-height: 1.55; resize: vertical; }
.bk-select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E5A38' stroke-width='1.6'><path d='M7 10l5 5 5-5'/></svg>"); background-repeat: no-repeat; background-position: right .7rem center; background-size: 1.1rem; padding-right: 2.4rem; }
.bk-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ── The picker: intro left and calendar right on a laptop ── */
.bk-pick { display: grid; gap: 1.6rem; }
.bk-pick__intro > * + * { margin-top: 1rem; }
.bk-pick__intro .bk-facts { margin-top: 1.5rem; }
.bk-pick__cal > * + * { margin-top: .9rem; }
@media (min-width: 900px) {
  .bk-pick { grid-template-columns: 22rem 1fr; gap: 4rem; align-items: start; }
  .bk-pick__intro .title { font-size: 2.6rem; }
  .bk-pick__intro { position: sticky; top: 6rem; }
}
.bk-sub { margin: 0; font: 600 .78rem var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--amber-text); }
.bk-sub b { font-weight: 600; color: var(--ink-deep); letter-spacing: .02em; text-transform: none; font-size: .9375rem; }
.screen > .title + .bk-facts, .screen > .title + .bk-wait { margin-top: 1.6rem; }
.bk-sub + .bk-facts { margin-top: .6rem; }
.bk-facts { margin: 0; border-top: 1px solid var(--hair); }
.bk-facts > div { display: grid; grid-template-columns: 6.2rem 1fr; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid var(--hair); }
.bk-facts dt { font-size: .9375rem; color: var(--ink-soft); }
.bk-facts dd { font-weight: 500; color: var(--ink-deep); line-height: 1.5; overflow-wrap: anywhere; }
.bk-facts dd small { display: block; font-weight: 400; font-size: .9375rem; color: var(--ink-soft); }
.bk-facts--tight > div { padding: .5rem 0; }
.bk-tz { display: flex; align-items: center; flex-wrap: wrap; gap: .1rem .5rem; font-size: .9375rem; color: var(--ink-soft); }
.bk-tz svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: var(--amber-text); stroke-width: 1.6; stroke-linecap: round; flex: none; }
.bk-tz b { font-weight: 600; color: var(--ink-deep); }
.bk-tz .link { padding: .3rem 0; }
.bk-tzpick { display: flex; flex-wrap: wrap; align-items: end; gap: .6rem 1rem; padding: .9rem 1rem; background: var(--linen-warm); border: 1px solid var(--hair); border-radius: 4px; }
.bk-tzpick .field { flex: 1 1 14rem; }

/* Next available: the soonest open times by day */
.bk-next { display: grid; gap: 1.2rem; }
.bk-group__day { margin: 0 0 .6rem; padding-bottom: .35rem; border-bottom: 1px solid var(--hair); font: 400 1.4rem/1.2 var(--f-display); color: var(--ink); font-variant-numeric: lining-nums; }
.bk-soonest { font-size: .9375rem; color: var(--ink-deep); border-left: 2px solid var(--amber); padding-left: .7rem; }
.bk-other { width: 100%; min-height: 3rem; gap: .6rem; }
.bk-other svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: var(--amber-text); stroke-width: 1.6; stroke-linecap: round; flex: none; }
.bk-back { margin-left: -.2rem; padding: .3rem 0; }
.bk-back + .bk-sub { margin-top: .5rem; }
.bk-hint { font-size: .9375rem; color: var(--ink-soft); }
.bk-sub.bk-gap { margin-top: 1.6rem; }

/* Day tiles: the brand's Cormorant numerals; four across on a phone, five on a laptop */
.bk-days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
@media (min-width: 600px) { .bk-days { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.bk-day {
  display: flex; flex-direction: column; align-items: center; gap: .05rem; padding: .55rem .2rem .5rem; min-height: 4.6rem;
  background: var(--linen-warm); border: 1px solid rgba(61, 43, 74, .2); border-radius: 3px; color: var(--ink-deep); cursor: pointer;
}
.bk-day__wd { font: 600 .68rem var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.bk-day__n { font: 400 1.75rem/1.05 var(--f-display); font-variant-numeric: lining-nums; color: var(--ink); }
.bk-day__m { font-size: .75rem; color: var(--ink-soft); line-height: 1.2; }
.bk-day[aria-pressed="true"] { background: rgba(91, 158, 143, .12); border-color: var(--teal-text); box-shadow: inset 0 0 0 1px var(--teal-text); }
.bk-day[aria-pressed="true"] .bk-day__wd, .bk-day[aria-pressed="true"] .bk-day__m { color: var(--teal-text); }
.bk-more { justify-self: start; }

/* Time buttons: hairline 3px boxes; three across on a phone, four on a laptop */
.bk-times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
@media (min-width: 900px) { .bk-times { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bk-time {
  min-height: 3rem; padding: .4rem .3rem; background: var(--linen-warm); border: 1px solid rgba(61, 43, 74, .28); border-radius: 3px;
  font: 600 1rem var(--f-body); color: var(--ink-deep); font-variant-numeric: tabular-nums; cursor: pointer;
}
.bk-time:hover, .bk-day:hover { border-color: var(--teal-text); }
/* A move selects a time before acting (picture 4-manage-pick-new-time): deep teal, linen text. */
.bk-time[aria-pressed="true"] { background: var(--teal-text); border-color: var(--teal-text); color: var(--linen); }

/* The chosen time on Your details (the signing page's teal-ruled box) */
.next-pay { margin-top: 1.6rem; padding: 1.1rem 1.2rem; background: var(--linen-warm); border-left: 3px solid var(--teal); border-radius: 0 4px 4px 0; }
.next-pay__label { font: 600 .72rem var(--f-body); letter-spacing: .26em; text-transform: uppercase; color: var(--amber-text); }
.next-pay__amt { font: 300 2.2rem/1.1 var(--f-display); color: var(--ink); font-variant-numeric: lining-nums; margin-top: .3rem; }
.next-pay__text { font-size: .9375rem; color: var(--ink-soft); margin-top: .35rem; }
.bk-chosen { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 1rem; }
.bk-chosen .next-pay__amt, .bk-chosen .next-pay__text { grid-column: 1 / -1; }
.bk-chosen .next-pay__amt { font-size: 1.75rem; margin-top: .1rem; }
.bk-chosen .link { grid-row: 1; grid-column: 2; padding: 0; margin: -.7rem 0; }

/* Video or phone */
.bk-choice { border: 0; padding: 0; min-width: 0; }
.bk-choice legend { padding: 0; font-weight: 600; font-size: .9375rem; color: var(--ink-deep); margin-bottom: .45rem; }
.bk-choice__rows { display: grid; gap: .5rem; }
@media (min-width: 600px) { .bk-choice__rows { grid-template-columns: 1fr 1fr; } }
.bk-opt { position: relative; display: grid; grid-template-columns: 1.4rem 1fr; gap: .7rem; align-items: start; padding: .8rem .9rem; background: var(--linen-warm); border: 1px solid rgba(61, 43, 74, .28); border-radius: 3px; cursor: pointer; }
.bk-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bk-opt__dot { width: 1.25rem; height: 1.25rem; margin-top: .15rem; border: 1.5px solid var(--ink); border-radius: 50%; display: grid; place-items: center; }
.bk-opt b { display: block; font-weight: 600; color: var(--ink-deep); line-height: 1.4; }
.bk-opt small { display: block; font-size: .875rem; color: var(--ink-soft); line-height: 1.45; }
.bk-opt:has(input:checked) { border-color: var(--teal-text); box-shadow: inset 0 0 0 1px var(--teal-text); background: rgba(91, 158, 143, .1); }
.bk-opt:has(input:checked) .bk-opt__dot { border-color: var(--teal-text); }
.bk-opt:has(input:checked) .bk-opt__dot::after { content: ''; width: .62rem; height: .62rem; border-radius: 50%; background: var(--teal-text); }
.bk-opt:has(input:focus-visible) { outline: 2px solid var(--teal); outline-offset: 2px; }
.bk-ts { min-height: 65px; }

/* Waiting and notices */
.bk-wait { display: flex; align-items: center; gap: .75rem; font-weight: 500; color: var(--ink-deep); padding: .2rem 0; }
.bk-wait::before { content: ''; flex: none; width: .65rem; height: .65rem; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 5px rgba(196, 149, 106, .2); margin-left: 5px; }
.bk-wait + .bk-facts { margin-top: 1.4rem; }
.bk-notice { background: rgba(196, 149, 106, .16); border-left: 3px solid var(--amber); border-radius: 0 3px 3px 0; padding: .8rem 1rem; color: var(--ink-deep); }
.bk-notice b { display: block; font-weight: 600; }
.bk-notice + .bk-sub { margin-top: 1.4rem; }
.bk-notice a { color: var(--ink-deep); font-weight: 600; text-decoration-color: var(--amber); text-underline-offset: .2em; }
.screen > .title + .bk-notice, .screen > .bk-notice + .bk-facts, .screen > .bk-notice + .bk-wait { margin-top: 1.6rem; }

/* The move bar under the times: a hairline above, the one amber button and Keep my current time. */
.bk-dock { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--hair); }

/* The cancel confirm (the accept-sign-pay dialog: linen, 3px amber top rule, Cormorant title). */
/* (margin 0: the column's spacing rule would otherwise push the fixed backdrop down and leave a strip uncovered) */
.screen > .bk-backdrop { margin: 0; }
.bk-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(42, 29, 52, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.bk-dialog { width: 100%; max-width: 28rem; background: var(--linen-warm); border-top: 3px solid var(--amber); border-radius: 4px; padding: 1.6rem 1.5rem 1.4rem; box-shadow: 0 18px 48px rgba(42, 29, 52, .25); }
.bk-dialog > * + * { margin-top: .9rem; }
.bk-dialog .title { margin-top: .4rem; font-size: 2rem; }
.bk-dialog .acts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.4rem; margin-top: 1.3rem; }
.bk-dialog .btn-line { min-height: 3rem; }

/* Actions */
.bk-acts { display: grid; gap: .6rem; justify-items: start; }
.bk-acts .btn, .bk-acts .btn-line { min-width: 15rem; }
.bk-acts .btn-line { min-height: 3rem; }
.bk-acts + .note { margin-top: 1rem; }
@media (max-width: 40rem) {
  .bk-acts { justify-items: stretch; }
  .bk-acts .btn, .bk-acts .btn-line, .bk-book { width: 100%; }
}