/* Book a call: the month on the left, the day's times (then the form, the code, the booking) on the right, in
   one white card. Below 760px the two stack and the times scroll into view when a day is picked. */
.pg-hero > .ph.custom:has(> .cal) { height: auto; display: block; overflow: visible; background: none; text-align: left; color: var(--ink); }
.cal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); padding: clamp(20px, 3vw, 36px);
  font: 400 16px/1.5 'DM Sans', system-ui, sans-serif; letter-spacing: normal; text-transform: none;
  border: 1px solid var(--line); border-radius: clamp(20px, 2.4vw, 28px); background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(11, 15, 22, 0.04), 0 18px 48px rgba(11, 15, 22, 0.07); }
.cal button { font: inherit; color: inherit; }
/* When the times cannot load, the message has the whole card. */
.cal-down { grid-template-columns: minmax(0, 1fr); }
.cal-down .cal-month { display: none; }

.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-head strong { font: 800 clamp(1.15rem, 1rem + 0.5vw, 1.4rem) 'Poppins', sans-serif; letter-spacing: -0.02em; }
.cal-head span { display: flex; gap: 6px; }
.cal-nav { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #FFFFFF; font-size: 20px !important; line-height: 1; cursor: pointer; transition: background-color 0.2s ease; }
.cal-nav:hover:not(:disabled) { background: #F5F5F3; }
.cal-nav:disabled { opacity: 0.35; cursor: default; }

.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.cal-grid abbr { padding: 6px 0; font: 500 12px 'IBM Plex Mono', monospace; letter-spacing: 0.08em; color: var(--muted); text-decoration: none; }
.cal-grid > span, .cal-day { aspect-ratio: 1; max-height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 15px; }
.cal-off { color: #B8BCC6; }
.cal-day { border: 0; background: #EAF2FE; color: var(--blue) !important; font-weight: 700; cursor: pointer; transition: background-color 0.2s ease, scale 0.16s cubic-bezier(0.23, 1, 0.32, 1); }
.cal-day:hover { background: #D6E6FD; }
.cal-day:active { scale: 0.94; }
.cal-day[aria-pressed="true"] { background: linear-gradient(180deg, var(--blue2), var(--blue)); color: #FFFDF6 !important; box-shadow: 0 6px 16px rgba(2, 103, 227, 0.3); }
.cal-full { background: none; color: #B8BCC6 !important; font-weight: 500; text-decoration: line-through; cursor: default; }
.cal-key { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 13.5px; color: var(--muted); }
.cal-dot { width: 10px; height: 10px; border-radius: 50%; background: #D6E6FD; border: 1px solid var(--blue); }
.cal-dot-full { margin-left: 10px; background: none; border-color: #B8BCC6; }

.cal-side { min-width: 0; display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 96px; animation: cal-in 0.4s cubic-bezier(0.23, 1, 0.32, 1); }
.cal-side > *, .cal-form > * { margin: 0; }
@keyframes cal-in { from { opacity: 0; transform: translateY(8px); } }
.cal-step { font: 800 clamp(1.15rem, 1rem + 0.5vw, 1.4rem)/1.2 'Poppins', sans-serif; letter-spacing: -0.02em; }
.cal-zone, .cal-small, .cal-wait { font-size: 13.5px; color: var(--muted); }
.cal-note { color: #2A2F3A; }
.cal-note a, .cal-warn a { color: var(--blue); }
.cal-warn { min-height: 0; font-size: 14.5px; color: #B4232A; }
.cal-warn:empty { display: none; }

.cal-times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cal-time { min-height: 46px; border-radius: 14px; border: 1px solid #B9D3F8; background: #FFFFFF; color: var(--blue) !important; font-weight: 700 !important; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, scale 0.16s cubic-bezier(0.23, 1, 0.32, 1); }
.cal-time:hover:not(:disabled) { background: #EAF2FE; border-color: var(--blue); }
.cal-time:active:not(:disabled) { scale: 0.96; }
.cal-time:disabled { border-color: transparent; background: #F5F5F3; color: #A4A9B4 !important; font-weight: 500 !important; text-decoration: line-through; cursor: default; }

.cal-form { display: flex; flex-direction: column; gap: 12px; }
.cal-field { display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; font-weight: 700; }
.cal-field small { font-weight: 500; color: var(--muted); }
.cal-field input, .cal-field textarea { width: 100%; box-sizing: border-box; border-radius: 14px; border: 1px solid var(--line); background: #FFFFFF; font: 500 16px 'DM Sans', sans-serif; color: var(--ink); outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.cal-field input { height: 50px; padding: 0 16px; }
.cal-field textarea { padding: 12px 16px; resize: vertical; }
.cal-field input:focus, .cal-field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(2, 103, 227, 0.12); }
.cal-field input:user-invalid { border-color: #E5484D; }
.cal-code input { height: 60px; font: 700 26px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.3em; text-align: center; }
.cal-go { min-height: 52px; margin-top: 4px; border-radius: 999px; border: 1px solid rgba(0, 40, 110, 0.25); background: linear-gradient(180deg, var(--blue2), var(--blue)); color: #FFFDF6 !important; font-weight: 700 !important; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(2, 103, 227, 0.3), 0 8px 24px rgba(2, 103, 227, 0.28); transition: filter 0.25s ease, scale 0.16s cubic-bezier(0.23, 1, 0.32, 1); }
.cal-go:hover:not(:disabled) { filter: brightness(0.93); }
.cal-go:active:not(:disabled) { scale: 0.97; }
.cal-busy { opacity: 0.6; cursor: progress; }
.cal-link { align-self: flex-start; padding: 4px 0; border: 0; background: none; color: var(--blue) !important; font-weight: 700 !important; text-decoration: none; cursor: pointer; }
.cal-row { display: flex; flex-wrap: wrap; gap: 4px 20px; }

.cal-done { display: flex; flex-direction: column; gap: 10px; }
.cal-done > * { margin: 0; }
.cal-tick { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: #E3F5EA; color: #1F8F4E; font-size: 26px; font-weight: 700; }

/* What we will ask: the three questions as white cards on the tinted band, each with answers people give. */
.row > .ph.custom:has(> .qs) { height: auto; display: block; overflow: visible; background: none; text-align: left; color: var(--ink); }
/* The wireframe's placeholder stripes and dashed outline are for empty boxes, not these. */
.ph.custom:has(> .qs), .ph.custom:has(> .cal) { background-image: none !important; outline: none !important; }
.qs { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font: 400 16px/1.5 'DM Sans', system-ui, sans-serif; }
.qs li { display: flex; gap: 16px; align-items: flex-start; padding: clamp(16px, 2vw, 22px); border: 1px solid var(--line); border-radius: 20px; background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(11, 15, 22, 0.04), 0 10px 28px rgba(11, 15, 22, 0.06); }
.qs-n { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #EAF2FE; color: var(--blue); font: 500 13px 'IBM Plex Mono', monospace; letter-spacing: 0.04em; }
.qs strong { display: block; font: 800 clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem)/1.25 'Poppins', sans-serif; letter-spacing: -0.02em; }
.qs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.qs-chips span { padding: 5px 12px; border-radius: 999px; background: #F5F5F3; color: var(--muted); font-size: 14px; }

@media (max-width: 760px) {
  .cal { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .cal-side { padding-top: 18px; border-top: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  .cal-side { animation: none; }
}