/* ==========================================================================
   Booking calendar.

   Its own file so the landing page can use the component without pulling in
   the whole demo theme — demo.css sets :root, body and the type scale, and
   loading that on a page with its own design would fight it.

   Depends only on the brand tokens both pages already define.
   ========================================================================== */

/* Booking calendar ------------------------------------------------------- */

.cal {
    --cal-muted: #5C5347;
    --cal-control: #F4F2EA;
    --cal-error: #943B32;
    background: var(--bg-color);
    color: var(--text-main);
    border-radius: 16px;
    padding: 0;
    min-width: 0;
    text-align: left;
}
.cal .hidden { display: none; }
.cal-header { padding: 20px 24px 16px; }
.cal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--cal-muted);
}
.cal-step-title { margin: 12px 0 0; font-size: 20px; font-weight: 500; line-height: 1.35; }
.cal-status { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--cal-muted); }
.cal-status:empty { margin: 0; }
/* Announce the transition without repeating the visible step heading. */
.cal[data-state="choosing"] .cal-status,
.cal[data-state="details"] .cal-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.cal-body { padding: 0 24px 24px; min-width: 0; }
.cal-label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; line-height: 1.5; }
.cal-note { font-size: 14px; color: #5C5347; line-height: 1.6; }
.cal-error, .cal-field-error { font-size: 14px; color: #943B32; line-height: 1.6; }
.cal-error { margin: 16px 0; }

.cal-days {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 5px 5px 12px;
    margin-inline: -5px;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
    overscroll-behavior-inline: contain;
}
.cal-day-option {
    flex: 0 0 auto;
    min-width: 92px;
    min-height: 64px;
    max-width: 144px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.65);
    color: var(--text-main);
    font: inherit;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-line;
    cursor: pointer;
}
.cal-day-option[aria-pressed="true"] {
    background: var(--accent-light);
    border-color: var(--text-main);
    box-shadow: inset 0 0 0 1px var(--text-main);
    font-weight: 500;
}
.cal-times { margin-top: 20px; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.slot {
    min-height: 46px;
    font: inherit;
    font-size: 14px;
    padding: 10px 8px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.7);
    color: var(--text-main);
    cursor: pointer;
    transition: background 180ms var(--ease), border-color 180ms var(--ease);
}
.slot:hover:not(:disabled), .cal-day-option:hover:not(:disabled) { border-color: var(--text-main); }
.slot[aria-pressed="true"] { background: var(--text-main); border-color: var(--text-main); color: var(--bg-color); }

.cal-selection {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--accent-light);
}
.cal-selection > div { min-width: 0; }
.cal-selection .cal-label { margin-bottom: 4px; color: var(--cal-muted); font-size: 14px; }
.cal-summary { font-size: 15px; font-weight: 500; line-height: 1.6; overflow-wrap: anywhere; }
.cal .cal-link { min-height: 44px; padding: 8px 4px; color: var(--cal-muted); font-size: 14px; flex: none; }
.cal-fields { display: grid; gap: 16px; min-width: 0; padding: 0; border: 0; }
.cal-call-type { min-width: 0; padding: 0; border: 0; }
.cal-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cal-choice {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 50px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
}
.cal-choice input { flex: none; width: 16px; height: 16px; accent-color: var(--text-main); }
.cal-choice:has(input:checked) { border-color: var(--text-main); background: var(--accent-light); }
.cal-field-group { min-width: 0; }
.cal-contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cal-field {
    width: 100%;
    min-height: 48px;
    font: inherit;
    font-size: 16px;
    line-height: 1.5;
    padding: 11px 14px;
    border-radius: 12px;
    border: 1px solid var(--accent);
    background: var(--cal-control, #F4F2EA);
    color: var(--text-main);
    outline: none;
    transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.cal-field::placeholder { color: #6F6757; opacity: 1; }
.cal-field:focus { border-color: var(--text-main); box-shadow: 0 0 0 2px rgba(139, 126, 102, 0.25); }
.cal-field[aria-invalid="true"] { border-color: #943B32; }
textarea.cal-field { resize: vertical; min-height: 100px; }
.cal-field-group .cal-note, .cal-field-error { margin-top: 6px; }
.cal-optional { font-size: 14px; font-weight: 400; color: var(--cal-muted); }
.cal-note-disclosure summary { min-height: 44px; padding-block: 12px; font-size: 14px; line-height: 1.5; cursor: pointer; }
.cal-note-disclosure[open] summary { margin-bottom: 8px; }
.cal-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 24px;
    border: 1px solid var(--text-main);
    border-radius: 999px;
    background: var(--text-main);
    color: var(--bg-color);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.cal-button-secondary { background: transparent; color: var(--text-main); border-color: rgba(139, 126, 102, 0.55); }
.cal-button:hover:not(:disabled) { box-shadow: 0 8px 20px -12px rgba(139, 126, 102, 0.65); }
.cal-button:active:not(:disabled) { transform: scale(0.98); }
.cal button:disabled, .cal-fields:disabled { opacity: 0.65; cursor: not-allowed; }
.cal :is(button, a, input, textarea, summary):focus-visible { outline: 2px solid #5C5347; outline-offset: 3px; }
.cal-submit-row { display: none; flex: none; justify-items: stretch; gap: 8px; padding: 14px 24px 20px; border-top: 1px solid var(--border); background: var(--bg-color); text-align: center; }
.cal[data-state="details"] .cal-submit-row,
.cal[data-state="submitting"] .cal-submit-row { display: grid; }
.cal-submit-row .cal-button { width: 100%; }
.cal-state { padding: 20px 0; text-align: center; }
.cal-state > p { margin: 0 auto 16px; max-width: 44ch; font-size: 14px; line-height: 1.7; }
.cal-state > p:empty { display: none; }
.cal-state .cal-button { margin: 4px auto 12px; }
.cal-reference { overflow-wrap: anywhere; }
.cal-skeleton { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
.cal-skeleton span { height: 48px; border-radius: 12px; background: var(--accent-light); animation: cal-loading 1.4s ease-in-out infinite alternate; }
@keyframes cal-loading { to { opacity: 0.35; } }

@media (max-width: 479px) {
    .cal-header { padding: 20px 18px 16px; }
    .cal-body { padding: 0 18px 20px; }
    .cal-contact-fields { grid-template-columns: 1fr; }
    .cal-selection { align-items: flex-start; padding: 12px; }
    .cal-choices { gap: 8px; }
    .cal-choice { padding: 10px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .cal-skeleton span { animation: none; }
    .cal button, .cal a, .cal input, .cal textarea { transition: none; }
}

/* ==========================================================================
   Cost comparison.

   THE EXCHANGE had no image after the duplicate was removed, and the only
   candidates were already used elsewhere. Its argument is a comparison, so
   the graphic makes that argument rather than decorating around it.
   ========================================================================== */

.vs { display: grid; gap: 18px; }

.vs-row { display: grid; grid-template-columns: 1fr; gap: 6px; }

.vs-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
}
.vs-head b { font-size: 15px; letter-spacing: -0.01em; color: var(--text-main); font-weight: 500; }

.vs-track {
    height: 10px;
    border-radius: 999px;
    background: rgba(139, 126, 102, 0.14);
    overflow: hidden;
}
.vs-fill {
    height: 100%;
    border-radius: 999px;
    /* Widths are set inline and are proportional to the figures quoted. */
    background: rgba(139, 126, 102, 0.55);
    transform-origin: left;
    animation: vs-grow 1.1s cubic-bezier(0.32, 0.72, 0, 1) both;
}
.vs-row.ours .vs-fill { background: var(--text-main); }
@keyframes vs-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.vs-note { font-size: 11px; color: var(--accent); line-height: 1.5; }

@media (prefers-reduced-motion: reduce) { .vs-fill { animation: none; } }

/* An action that reads as a link. A real <a href="#"> would be picked up by
   smooth-scroll anchor handlers, which is how this threw. */
.cal-link {
    font: inherit;
    color: var(--accent);
    background: none;
    border: 0;
    padding: 0;
    text-decoration: underline;
    cursor: pointer;
}
.cal-link:hover { color: var(--text-main); }

/* Shared build presentation. This token-only file also serves /demo/. */
.hero-eyebrow { display: inline-block; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: #5C5347; }
.build-view { padding: 24px; }
.build-details > summary { min-height: 44px; padding: 12px 0; cursor: pointer; font-size: 14px; color: #5C5347; }
.build-details > summary:focus-visible { outline: 2px solid #5C5347; outline-offset: 3px; }
#stage-build .build-details > summary { display: none; }
.build-group + .build-group { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.build-group h2, .build-group h3 { font-size: 16px; font-weight: 500; line-height: 1.5; margin-bottom: 12px; }
.build-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
#dna-status { font-size: 14px; color: #5C5347; }
.dna-line { display: grid; grid-template-columns: minmax(100px, 0.3fr) minmax(0, 1fr); gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.dna-line:last-child { border-bottom: 0; }
.dna-key { color: #5C5347; font-size: 14px; line-height: 1.6; }
.dna-val { color: var(--text-main); font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
.tag { display: inline-block; margin: 0 8px 4px 0; padding: 2px 8px; background: #EDEAE1; border-radius: 6px; font-size: 14px; }
.hero-rules { list-style: none; font-size: 14px; line-height: 1.7; }
.hero-rules li { display: flex; gap: 12px; padding: 6px 0; }
.hero-rules .mark { color: #5C5347; flex: none; }
.trace { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.7; padding: 5px 0; color: #5C5347; overflow-wrap: anywhere; }
.trace .mark { flex: none; }
.spin { width: 12px; height: 12px; margin-top: 5px; flex: none; border: 1.5px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: hero-spin 800ms linear infinite; }
@keyframes hero-spin { to { transform: rotate(360deg); } }
.rise { animation: hero-rise 220ms var(--ease) both; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ready-identity { max-width: 52rem; padding: 12px 0 24px; }
.ready-identity h2, .ready-identity h3 { margin: 16px 0 12px; font-size: clamp(24px, 3vw, 36px); line-height: 1.2; letter-spacing: -0.035em; overflow-wrap: anywhere; }
#ready-summary { font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; }
.ready-note { margin-top: 20px; font-size: 14px; line-height: 1.65; color: #5C5347; }
#stage-ready .build-details { border-top: 1px solid var(--border); }
#stage-ready .build-log { padding-top: 16px; }
@media (max-width: 639px) {
    .build-view { padding: 16px; }
    .dna-line { grid-template-columns: 1fr; gap: 4px; }
    .ready-identity { padding-top: 4px; }
}

/* The image has to give up height to the form, not overlap the headlines.
   `h-auto` keeps its intrinsic size while the flex track shrinks, so without
   this it renders straight over "HUMAN TIRED." and "COMPUTER NOT." — measured
   at 2px and 6px of clearance against 39px and 47px before the form existed.
   Driving it from max-height and letting the frame shrink-wrap restores it. */
/* The ratio lives on the frame, not the image.
   The frame is given the scene's aspect plus max-height and max-width of the
   space it sits in, so the browser solves for whichever axis binds and the
   image never distorts or gets cropped. Driving it from the image instead
   needs a percentage height against an auto-height parent, which resolves to
   nothing, and the overflow-hidden frame then clips the top of the scene. */
.hero-art { overflow: hidden; }
.hero-art > div { height: 100%; display: flex; align-items: center; justify-content: center; }
.hero-art > div > div {
    /* The ratio is the scene's, so it has to apply to the content box. On the
       default border-box the frame's 4px border is counted in and the image
       comes out about 1% wide. */
    box-sizing: content-box;
    aspect-ratio: 1792 / 977;
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    margin: 0 auto;
}
.hero-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The image used to be hidden on a phone, because the hero briefly held the
   demo form and the two would not both fit. The form moved into its own
   section two changes ago and the rule stayed, so the hero rendered with no
   image at all on a 390x844 or 375x667 screen: every common phone. The image
   scales to fit now, at every size. */

@media (prefers-reduced-motion: reduce) {
    .rise { animation: none; }
    .spin { animation: none; }
}

/* Booking overlay -------------------------------------------------------- */

/* Native dialog owns focus containment and makes the page behind it inert. */
.book-overlay:not([open]) { display: none; }
.book-overlay {
    position: fixed;
    inset: auto;
    top: calc(var(--book-viewport-top, 0px) + var(--book-viewport-height, 100dvh) / 2);
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(44rem, calc(100vw - 32px));
    max-width: none;
    max-height: calc(var(--book-viewport-height, 100dvh) - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    margin: 0;
    padding: 0;
    border: 1px solid rgba(139, 126, 102, 0.28);
    border-radius: 16px;
    background: var(--bg-color);
    color: var(--text-main);
    overflow: hidden;
    box-shadow: 0 24px 72px -24px rgba(28, 28, 30, 0.3);
}
.book-overlay[open] { display: flex; flex-direction: column; }
.book-overlay::backdrop {
    background: rgba(28, 28, 30, 0.35);
    backdrop-filter: blur(4px);
    animation: book-fade 180ms var(--ease);
}
.book-sheet {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    max-height: inherit;
    animation: book-rise 220ms var(--ease);
}
.book-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex: none;
    padding: 20px 24px 18px;
    border-bottom: 1px solid var(--border);
    background: #F4F2EA;
}
.book-eyebrow { margin-bottom: 8px; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: #5C5347; }
.book-heading h2 { font-size: 26px; font-weight: 500; line-height: 1.2; letter-spacing: -0.03em; }
.book-intro { margin-top: 8px; font-size: 14px; line-height: 1.6; color: #5C5347; }
.book-close {
    flex: none;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--text-main);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}
.book-close:hover { border-color: var(--text-main); }
.book-close:focus-visible { outline: 2px solid #5C5347; outline-offset: 3px; }
.book-sheet .cal { display: flex; flex: 1; flex-direction: column; min-height: 0; border: 0; box-shadow: none; padding: 0; background: transparent; }
.book-sheet .cal-header { flex: none; }
.book-sheet .cal-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; }

/* The page's custom cursor is below the dialog's native top layer. */
.book-overlay, .book-overlay * { cursor: auto !important; }
.book-overlay button, .book-overlay a, .book-overlay label, .book-overlay summary { cursor: pointer !important; }
.book-overlay input, .book-overlay textarea { cursor: text !important; }
.book-overlay input[type="radio"] { cursor: pointer !important; }
.book-overlay button:disabled, .book-overlay input:disabled { cursor: not-allowed !important; }
html:has(.book-overlay[open]) .cursor-dot,
html:has(.book-overlay[open]) .cursor-outline { visibility: hidden; }

@keyframes book-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes book-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 479px) {
    .book-overlay { width: calc(100vw - 32px); border-radius: 16px; }
    .book-heading { padding: 20px 18px; gap: 12px; }
    .book-heading h2 { font-size: 23px; }
}
.book-overlay.is-compact .book-heading { padding-block: 12px; }
.book-overlay.is-compact .book-intro,
.book-overlay.is-compact .book-eyebrow { display: none; }
.book-overlay.is-compact .cal-header { padding-block: 12px; }
.book-overlay.is-compact .cal[data-state="details"] .cal-meta { display: none; }
.book-overlay.is-compact .cal-step-title { margin-top: 4px; font-size: 18px; }
/* High zoom or a small keyboard viewport: let the entire sheet scroll so
   fixed chrome cannot leave less room than the height of a single input. */
.book-overlay.is-short .book-sheet { display: block; overflow-y: auto; overscroll-behavior-y: contain; }
.book-overlay.is-short .cal { display: block; }
.book-overlay.is-short .cal-body { overflow: visible; }
@media (prefers-reduced-motion: reduce) {
    .book-overlay::backdrop, .book-sheet { animation: none; }
}

/* Marketing containers: image and plain capability rows, not nested cards. */
#brains .reveal-on-scroll, #help .reveal-on-scroll { transform: translateY(8px); transition: opacity 300ms var(--ease), transform 300ms var(--ease); }
#brains .reveal-visible, #help .reveal-visible { transform: none; }
@media (prefers-reduced-motion: reduce) {
    #brains .reveal-on-scroll, #help .reveal-on-scroll { opacity: 1; transform: none; transition: none; }
}
.brains-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; max-width: 72rem; margin-inline: auto; }
.brains-image { overflow: hidden; border-radius: 16px; background: #EDEAE1; }
.brains-image img { display: block; width: 100%; height: auto; }
.brains-capabilities { margin-bottom: 28px; }
.brains-capabilities > div { padding: 20px 0; border-bottom: 1px solid var(--border); }
.brains-capabilities > div:first-child { padding-top: 0; }
.brains-capabilities h3 { margin: 8px 0; font-size: 20px; font-weight: 500; line-height: 1.4; }
.brains-capabilities p { font-size: 15px; color: #5C5347; line-height: 1.7; }
.faq-rows > div { padding: 24px 0; border-bottom: 1px solid var(--border); }
.faq-rows > div:first-child { border-top: 1px solid var(--border); }
@media (max-width: 767px) {
    .brains-layout { grid-template-columns: 1fr; gap: 28px; }
    .brains-image { max-width: 32rem; margin-inline: auto; }
    .brains-capabilities h3 { font-size: 18px; }
}