/* What opens when someone presses "Book a conversation" (booking-sheet.mjs): a sand sheet over the page, grown from the
   pressed button in its own colour. Left, what the conversation is, as a picture (the bar or the road); right, pick a time.
   Nothing under 18 px; on a laptop (1366 x 700) it fits without scrolling. */
html.bs-locked { overflow: hidden; }
.dm-page .bs-sheet { position: fixed; inset: 0; z-index: 60; overflow-y: auto; background: var(--bs-from, var(--rd-ink)); color: var(--rd-ink);
  transition: clip-path .62s cubic-bezier(.22, .8, .2, 1), background-color .3s ease .28s; }      /* the button's colour holds while the circle grows, then turns: no long muddy middle */
.dm-page .bs-sheet[hidden] { display: none; }
.dm-page .bk-sheet { z-index: 61; }                     /* the booking can be opened from another sheet (the package), so it lies above them */
.dm-page .bs-sheet[data-state="open"] { background: var(--pr-open-sand, #f8dfb4); }        /* the button's colour opens into sand */
.dm-page .bs-inner { position: relative; box-sizing: border-box; min-height: 100%; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 90px); align-items: center; padding-block: clamp(30px, 5vh, 56px);
  opacity: 0; transition: opacity .16s ease; }
.dm-page .bs-sheet[data-state="open"] .bs-inner { opacity: 1; transition: opacity .3s ease .3s; }
.dm-page .bs-sheet h2, .dm-page .bs-sheet h3, .dm-page .bs-sheet p, .dm-page .bs-sheet ol, .dm-page .bs-sheet ul { margin: 0; }
.dm-page .bs-close { position: absolute; top: clamp(16px, 3vh, 28px); right: 0; border: 2px solid var(--rd-ink); border-radius: 999px; background: none; padding: 11px 22px; min-height: 48px; font: 600 18px/1 var(--rd-display); color: var(--rd-ink); cursor: pointer; }
.dm-page .bs-close::before { content: "\00d7\00a0"; }
.dm-page .bs-heading { max-width: 12em; font: 600 clamp(32px, 3.3vw, 50px)/1.02 var(--rd-display); letter-spacing: -.045em; outline: none; }
.dm-page .bs-fact { margin-top: 12px !important; font-size: clamp(20px, 1.7vw, 24px); font-weight: 600; line-height: 1.3; }
.dm-page .bs-terms { margin-top: clamp(16px, 2vw, 26px) !important; font-size: 19px; font-weight: 600; color: var(--rd-quiet); }

/* ------------------------------------------------------------------ look A: the conversation as one bar in its three parts */
.dm-page .bs-bar { list-style: none; margin-top: clamp(20px, 2.4vw, 34px) !important; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.dm-page .bs-part { display: grid; align-content: start; gap: 12px; }
.dm-page .bs-part-name { display: flex; align-items: center; min-height: 68px; padding: 0 18px; border-radius: 16px; background: var(--bs-part); text-wrap: balance; font: 600 clamp(19px, 1.6vw, 23px)/1.1 var(--rd-display); letter-spacing: -.02em; }
.dm-page .bs-part:first-child .bs-part-name { border-radius: 34px 16px 16px 34px; }
.dm-page .bs-part:last-child .bs-part-name { border-radius: 16px 34px 34px 16px; }
.dm-page .bs-part-text { padding: 0 6px; font-size: 19px; line-height: 1.35; }
.dm-page .bs-leave { margin-top: clamp(20px, 2.4vw, 32px); }
.dm-page .bs-leave-title, .dm-page .bs-end .bs-stop-name { font-family: var(--rd-hand); font-weight: 400; font-size: 34px; line-height: 1; letter-spacing: 0; color: var(--rd-red); rotate: -2deg; transform-origin: left center; -webkit-text-stroke: .6px var(--rd-red); }
.dm-page .bs-sheet .bs-leave ul, .dm-page .bs-sheet .bs-end ul { list-style: none; margin-top: 10px; padding: 0; display: grid; gap: 6px; }
.dm-page .bs-leave li, .dm-page .bs-end li { position: relative; padding-left: 26px; font: 600 clamp(20px, 1.7vw, 24px)/1.3 var(--rd-display); letter-spacing: -.02em; color: var(--rd-ink); }
.dm-page .bs-leave li::before, .dm-page .bs-end li::before { content: ""; position: absolute; left: 1px; top: .62em; width: 14px; height: 3px; border-radius: 2px; background: var(--rd-red); rotate: -8deg; }

/* ------------------------------------------------------------------ look B: the conversation as a short painted road */
.dm-page .bs-road { list-style: none; margin-top: clamp(18px, 2.2vw, 30px) !important; padding: 0; display: grid; }
.dm-page .bs-stop { position: relative; min-height: 50px; padding: 0 0 20px 64px; }
.dm-page .bs-stop::before { content: ""; position: absolute; left: 13px; top: 21px; bottom: -21px; width: 30px; background: linear-gradient(90deg, var(--rd-ink) 0 4px, var(--dm-road) 4px 26px, var(--rd-ink) 26px); }
.dm-page .bs-stop:last-child::before { display: none; }
.dm-page .bs-stop::after { content: ""; position: absolute; left: 7px; top: 0; z-index: 1; width: 42px; height: 42px; box-sizing: border-box; border: 5px solid var(--rd-ink); border-radius: 50%; background: var(--rd-sheet); }
.dm-page .bs-end::after { background: var(--rd-red); }                                       /* where the road ends: what you leave with */
.dm-page .bs-stop-name { display: block; padding-top: 6px; font: 600 clamp(21px, 1.8vw, 26px)/1.1 var(--rd-display); letter-spacing: -.03em; }
.dm-page .bs-stop-text { margin-top: 5px !important; font-size: 19px; line-height: 1.35; }

/* ------------------------------------------------------------------ continue to the live Cal.com calendar */
.dm-page .bs-pick-title { font: 600 clamp(24px, 2.2vw, 32px)/1.1 var(--rd-display); letter-spacing: -.035em; }
.dm-page .bs-pick-lead { margin-top: 12px !important; font-size: 19px; line-height: 1.45; }
.dm-page .bs-field { display: grid; gap: 6px; font-size: 18px; font-weight: 600; }
.dm-page .bs-book { display: inline-flex; margin-top: 22px; align-items: center; box-sizing: border-box; font-size: 18px; min-height: 56px; padding: 16px 30px; text-decoration: none; cursor: pointer; }
.dm-page .bs-note { margin-top: 14px !important; font-size: 18px; line-height: 1.4; color: var(--rd-quiet); }
.dm-page .bs-sheet :is(button, input, textarea, a):focus-visible { outline: 3px solid var(--rd-red); outline-offset: 3px; }

/* ------------------------------------------------------------------ the idea (idea-sheet.mjs, 2026-09-25): the call, with a few optional lines written first */
.dm-page .bs-extra { margin-top: 14px; }
.dm-page .bs-field textarea { box-sizing: border-box; min-height: 84px; padding: 10px 16px; border: 2.5px solid var(--rd-ink); border-radius: 16px; background: var(--rd-paper); font: inherit; font-size: 19px; line-height: 1.4; color: var(--rd-ink); resize: vertical; }
.dm-page .is-mail a { color: var(--rd-ink); text-decoration-color: var(--rd-red); text-decoration-thickness: 2px; text-underline-offset: 4px; }

@media (max-width: 900px) {
  .dm-page .bs-inner { grid-template-columns: minmax(0, 1fr); align-items: start; padding-top: 88px; }
  .dm-page .bs-bar { grid-template-columns: minmax(0, 1fr); }
  .dm-page .bs-part:first-child .bs-part-name, .dm-page .bs-part:last-child .bs-part-name { border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) { .dm-page .bs-sheet, .dm-page .bs-inner { transition: none !important; } }