/* ==========================================================================
   Book a Call — the scheduling panel

   A port of the tim-schedule component the client supplied as the quality
   bar. Its structure, sizing, spacing, radii, states and timing are kept
   exactly; the colour and the type are re-tokenized to this brand.

   TWO THINGS TO KNOW BEFORE EDITING

   1. The reference is written in rem against a 62.5% root, so 1rem there is
      10px. This site runs a normal 16px root, so every measurement below is
      the reference's number multiplied by ten and written in px. Carrying a
      rem value straight across would silently scale the whole card by 1.6.

   2. LOAD ORDER, and what it does and does not buy. Divi's style-static.min
      and its cached customizer <style> are BOTH earlier in the document than
      this file, so source order is already ours. What source order cannot do
      is beat a higher specificity or an author !important, and Divi has
      plenty of both:

        input[type=email|password|tel|text], select, textarea   (0,1,1)
        input[type=text]:focus                                  (0,2,1)
        button:focus { border: none }                           (0,1,1)
        .entry-content ul { padding: 0 0 23px 1em }             (0,1,1)
        p { padding-bottom: 1em }                               (0,0,1)
        h1..h6, p { letter-spacing: 0 !important }              author !important

      So every rule below that owns a border, a padding, a colour or a
      tracking on an input, a button, a ul or a heading is scoped
      `.schedule <class>` or `.schedule-call <class>` to reach (0,2,0), and
      the two tracked serif moments carry !important because nothing but
      !important beats !important. typography.css also sets
      `font-family: var(--yp-serif) !important` on p, li, label, input,
      textarea and button; everything the visitor operates in this card is
      sans on purpose, so those declarations carry !important too.

   PALETTE. The reference runs neutral greys plus a green accent. This brand
   has four tokens and no accent hue, so the accent role is played by the warm
   ramp the brand already owns:

     reference              here                      role
     --color-white          --yp-white                the card, and reversed ink
     --color-black          --yp-ink                  committed / actionable
     --color-grey           ink 62%                   supporting text
     --color-grey-inactive  ink 32%                   present, not usable
     --color-grey-light     ink 14%                   every hairline, all seven
     green at 14%           ink 6% over sand          a bookable day
     green at 30%           ink 14% over sand         a bookable day, hovered
     green at 100%          --yp-ink                  the chosen day, the chosen slot
     #b4453c                ink at double width       the error state, see below

   The green does four jobs over there: it washes every bookable day, deepens
   on hover, fills the chosen one, and marks focus. Sand is the only wash this
   palette has and ink is the only fill it has, so the accent becomes one warm
   ramp at three strengths instead of one hue at three opacities. What matters
   is preserved: the month still shows its availability from across the room
   without being read, which is the entire reason the reference has an accent.

   No red exists in the palette either, so the error state follows the
   precedent contact.css already set on this site: the hairline goes to full
   ink and doubles in width. Weight carries what hue cannot.

   TYPE. Three roles, as in the reference. The serif carries the two display
   moments (the meeting name and the confirmation title); the sans carries
   everything the visitor operates: day numbers, weekday headers, the month,
   slot times, field labels, inputs and buttons. A serif at 12px inside a
   dense numeric grid is precisely what the reference avoids, and setting the
   whole card in one is what made the earlier attempt read as a footnote.
   ========================================================================== */

.schedule-call {
  /* One name for the hairline, used for all seven of its jobs: the panel
     border, the rail divider, the readout rule, the month-nav circles, the
     slot borders, the times divider, the footer rule and the input borders.
     Two near-identical alphas for one role is how a card starts to look
     hand-assembled. */
  --yp-bk-line:     rgb(var(--yp-ink-rgb) / 0.14);
  --yp-bk-muted:    rgb(var(--yp-ink-rgb) / 0.62);
  --yp-bk-inactive: rgb(var(--yp-ink-rgb) / 0.32);

  /* The availability wash and its hover. Plain sand is 1.17:1 on the white
     card with essentially no hue difference, which is a lightness event a
     reader does not register peripherally: the wash exists so the month shows
     its availability without being read, and at 1.17:1 it does not. Both
     steps are deepened along the warm ramp instead, to 1.34:1 and 1.58:1, and
     the resting step stays the quieter of the two so the information the
     grid carries at rest is the stronger signal.

     The fallback pair below is for a browser with no color-mix. It loses the
     warmth on hover, which is the right thing to lose: what must survive is
     that hover is DARKER than rest, and an ink tint at 0.16 is. */
  --yp-bk-wash:        var(--yp-sand);
  --yp-bk-wash-strong: rgb(var(--yp-ink-rgb) / 0.16);

  --yp-bk-radius: 8px;   /* the house surface radius, the reference's --border-radius */

  /* The day chip, and the only measurement in the card that is not a fixed
     px. The reference's 36px is held from 450px of viewport up. Below that,
     seven chips plus their six 2px gaps (264px) no longer fit the calendar
     column, and .schedule is overflow:hidden, so the Saturday column would be
     silently CUT OFF rather than scrolled to. Scaling the chip keeps the
     whole week reachable down to 320px and keeps the circles circular, which
     a fourth breakpoint dropping the day type to 14px did not. */
  --yp-bk-chip: clamp(28px, 8vw, 36px);

  /* Deliberately sans, and deliberately the same stack the header nav uses,
     so the site has one sans rather than two. Inter is the family Divi
     actually loads; Montserrat leads in case it is ever added. */
  --yp-bk-sans: "Montserrat", "Inter", "Helvetica Neue", Arial, sans-serif;

  /* One easing curve for the whole component, graded by the size of the thing
     that moves: 0.25s for a day or a slot, 0.3s for the month nav, 0.4s for
     the button. */
  --yp-bk-ease: cubic-bezier(0.25, 1, 0.5, 1);
}

@supports (color: color-mix(in srgb, currentColor 10%, transparent)) {
  .schedule-call {
    --yp-bk-wash:        color-mix(in srgb, var(--yp-ink) 6%, var(--yp-sand));
    --yp-bk-wash-strong: color-mix(in srgb, var(--yp-ink) 14%, var(--yp-sand));
  }
}

/* The step regions and the readout lines are swapped with the hidden
   attribute. Divi sets display on plenty of generic elements, and a display
   rule beats the UA's [hidden] rule, so it is pinned here once. */
.schedule-call [hidden] { display: none !important; }

/* Divi ships `p { padding-bottom: 1em }` and rescues only the last <p> of each
   parent with `p:not(.has-background):last-of-type`. Every paragraph in this
   card sets its own margin and none of them set padding, so specificity was
   never the problem: an undeclared property cannot be won. Four paragraphs
   were silently carrying 14 to 32px of extra bottom padding, which is what
   turned the done panel's 16px gap into 48px. Declared once, here. */
.schedule-call p { padding-bottom: 0; }

/* ---- section ------------------------------------------------------------- */

/* Full bleed ground, content on the same 1460px measure as every other
   section, so the panel's left edge stacks with the heading above it and with
   the header logo above that. */
.schedule-call__content {
  width: 100%;
  max-width: 1460px;
  margin: 0 auto;
}

.schedule-call__intro {
  max-width: 760px;
  margin-bottom: 56px;
}

/* The section heading, ported rather than substituted.

   The shared .yp-shead component was used here first and it was the wrong
   call: its label tops out at 60px, which is where the reference STARTS, and
   the reference doubles to 120px from 768px up. That is not a near-enough
   equivalent, it is half the display weight in the one section the reference
   deliberately gives full section scale to, so the reference's numbers are
   taken directly: 60 / 120 / 52, 0.83 line-height, -0.01em, 700.

   Two consequences of porting it, both deliberate. The face is Newsreader,
   not Coluna, because the palette and the type are the only two things being
   re-tokenized. And it stays title case at a negative track: -0.01em is drawn
   for a lowercase display setting, and the house uppercase treatment
   (+0.14em) is drawn for the 60px cap it replaces. Setting it in tracked caps
   at 120px would be neither this brand's heading nor the reference's.

   Every !important below is answering a specific Divi or typography.css rule,
   named beside it. */
.schedule-call__heading {
  margin: 0 0 32px;
  padding: 0 !important;                /* Divi: padding-bottom on every h1-h6 */
  font-family: var(--yp-serif);
  font-size: 60px;
  font-weight: 700 !important;          /* typography.css: h2 { font-weight: var(--yp-w-section) !important } */
  line-height: 0.83;
  letter-spacing: -0.01em !important;   /* Divi customizer: h1..h6,p { letter-spacing: 0 !important } */
  text-transform: none;                 /* typography.css sets caps on every heading */
  color: var(--yp-ink);
}

@media (min-width: 768px) {
  .schedule-call__heading { font-size: 120px; }
}

/* A lead, not body copy: the reference sets this at display size and drops
   the last line to grey as a soft close. */
.schedule-call__text p {
  margin: 0 0 16px;
  font-family: var(--yp-serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.005em;
  color: var(--yp-ink);
}

@media (min-width: 1024px) {
  .schedule-call__text p { font-size: 28px; }
}

.schedule-call__text p:last-child {
  margin-bottom: 0;
  color: var(--yp-bk-muted);
}

/* ---- panel --------------------------------------------------------------- */

/* A solid white card on the sand ground. The border and the radius are the
   card; the ground behind it is what makes a dense grid legible. The panel is
   a section-scale object at the full content width, never a shrink-wrapped
   widget floating at the left edge.

   min-height is the reference's 46rem skeleton, moved onto the panel itself.
   There is no hydration boundary on a static page, but the day grid is still
   date dependent and cannot ship in the HTML, so the panel reserves the
   height it will measure once booking.js paints the month and nothing below
   it moves. */
.schedule {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 460px;
  background-color: var(--yp-white);
  border: 1px solid var(--yp-bk-line);
  border-radius: var(--yp-bk-radius);
  overflow: hidden;
}

@media (min-width: 1024px) {
  .schedule { grid-template-columns: 340px 1fr; }
}

/* ---- summary rail -------------------------------------------------------- */

/* Outside the step switch on purpose: the receipt stays on screen through the
   form and through the confirmation, so what was chosen is never scrolled
   away from the person filling it in. */
.schedule__summary {
  /* Grid items default to min-width:auto, so they refuse to shrink below their
     min-content width. The long unbroken strings in here (the address, the
     mail link) made that 302px, which pushed the 1fr track past the card and
     dragged every sibling out with it: at 320px the whole panel overhung by
     16px. Its siblings already carried min-width:0; this one was missed. */
  min-width: 0;
  overflow-wrap: anywhere;

  padding: 32px;
  border-bottom: 1px solid var(--yp-bk-line);
}

/* The divider rotates with the layout, so the rail is always separated on
   whichever edge is its trailing one. */
@media (min-width: 1024px) {
  .schedule__summary {
    border-bottom: 0;
    border-right: 1px solid var(--yp-bk-line);
  }
}

/* The largest type in the card, and one of only two serif moments in it. The
   reference sets its display face at 700 with almost no tracking; Newsreader
   in caps needs the house tracking and the house display weight instead, or
   it sits heavier and tighter than every other uppercase serif on the page. */
.schedule__meeting {
  margin: 0 0 24px;
  font-family: var(--yp-serif) !important;
  font-size: 28px;
  font-weight: var(--yp-w-section, 540);
  line-height: 1;
  /* !important, and not for tidiness: Divi's cached customizer block carries
     `h1,h2,h3,h4,h5,h6,p { letter-spacing: 0px !important }` and this is a
     <p>. An author !important beats any specificity, so without one the 0.09em
     that is the entire justification for using house tracking here instead of
     the reference's 0.01em never arrives, and the caps sit exactly as tight
     and heavy as the deviation was written to avoid. */
  letter-spacing: var(--yp-track-sub, 0.09em) !important;
  text-transform: uppercase;
  color: var(--yp-ink);
}

/* (0,2,0). Divi's `.entry-content ul` is (0,1,1) and sets
   `padding: 0 0 23px 1em` alongside the list marker. The !important on
   list-style was winning and the padding was not, so both lists were sitting
   16px right of the thing they belong to, with 23px of stray air under them.
   line-height comes from the same Divi rule and inherits into the children. */
.schedule .schedule__facts,
.schedule .schedule__slots {
  padding: 0;
  line-height: inherit;
}

.schedule__facts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 32px;
  list-style: none !important;   /* Divi forces a marker back onto every ul; padding above */
}

.schedule__fact {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--yp-bk-sans) !important;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--yp-bk-muted);
}

/* 18px glyph, and it must never shrink when the label wraps. */
.schedule__fact-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/* A hairline separates the live selection from the static facts above it. */
.schedule__readout {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 24px;
  border-top: 1px solid var(--yp-bk-line);
  font-family: var(--yp-bk-sans);
}

.schedule__readout-date {
  font-family: var(--yp-bk-sans);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--yp-ink);
}

/* The reference marks the committed time with the only green text in the
   component: plain text at 18px, no box. Ink is already the primary text
   colour here, so the distinction is carried by weight instead, against the
   700 date directly above it. An earlier pass boxed this in a 4px-radius
   beige chip, which read well on its own and quietly made the component's
   radius vocabulary four shapes instead of three: 50% for the calendar, 8px
   for surfaces, 26px for the pill. Three shapes, three meanings, and a chip
   that appears exactly once is not a meaning. */
.schedule__readout-time {
  font-family: var(--yp-bk-sans);
  font-size: 18px;
  line-height: 1.3;
  color: var(--yp-ink);
}

.schedule__readout-zone,
.schedule__readout-empty {
  font-family: var(--yp-bk-sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--yp-bk-muted);
}

/* ---- picker -------------------------------------------------------------- */

/* Flexible calendar, fixed 240px times column. 240 minus two 32px pads leaves
   176px of slot, which is what the slot sizes below are drawn against. */
.schedule__picker {
  display: grid;
  grid-template-columns: 1fr;
  min-width: 0;
}

@media (min-width: 768px) {
  .schedule__picker { grid-template-columns: 1fr 240px; }
}

.schedule__calendar {
  padding: 32px;
  min-width: 0;   /* a 1fr track defaults to min-content; without this it can push the times column out */
}

.schedule__month {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

/* A header, not a caption. The month is the grid's title. */
.schedule__month-label {
  font-family: var(--yp-bk-sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--yp-ink);
}

/* A visible hairline circle. The circle is the calendar's signature shape and
   the day cells repeat it; an 18px glyph inside a 36px circle is exactly
   half. Normal flow inside the flex row, never absolutely positioned off the
   ends of the caption. */
/* Scoped to (0,2,0): Divi's cached customizer writes `button:focus { border:
   none; outline: none }` at (0,1,1), so a bare class lost its border the
   moment the circle was clicked or tabbed to, deleting the shape this comment
   defends. The outline half of that rule is already answered by the
   focus-visible ring further down, which computes to (0,2,1). */
.schedule .schedule__month-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--yp-bk-line);
  border-radius: 50%;
  background: none;
  color: var(--yp-bk-muted);
  cursor: pointer;
  transition: color 0.3s var(--yp-bk-ease),
              border-color 0.3s var(--yp-bk-ease);
}

/* The whole circle darkens. No fill is introduced: the fill is reserved for
   the chosen day and the chosen slot. */
.schedule .schedule__month-nav:hover:not(:disabled) {
  color: var(--yp-ink);
  border-color: var(--yp-ink);
}

/* Genuinely disabled at the current month, rather than letting anyone page
   back into a month where every single day is unbookable. */
.schedule .schedule__month-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.schedule__month-icon {
  width: 18px;
  height: 18px;
}

.schedule__weekdays,
.schedule__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

/* Tracked small caps, so the header band reads as a header rather than as
   more data. Three letters, not two. Same label language as the form labels
   further down: one label voice across the component. */
.schedule__weekday {
  padding: 4px 0;
  text-align: center;
  font-family: var(--yp-bk-sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--yp-bk-muted);
}

/* Fixed size, centred in a fractional column. The reference notes that
   aspect-ratio:1 was tried and rejected: it made each cell as tall as the
   column was wide, so on a wide panel the rows grew to about 90px and the
   grid became enormous. The chip size is independent of panel width. */
.schedule__day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--yp-bk-chip, 36px);
  height: var(--yp-bk-chip, 36px);
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  font-family: var(--yp-bk-sans) !important;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--yp-bk-inactive);
  cursor: default;
  transition: background-color 0.25s var(--yp-bk-ease),
              color 0.25s var(--yp-bk-ease);
}

/* Blanks hold their grid position rather than being omitted, so the columns
   stay aligned under the weekday band. */
.schedule__day--empty { visibility: hidden; }

/* THE defining mark of the whole component: every bookable day carries the
   wash, so the month shows its availability at a glance without being read.
   An unavailable day has no modifier at all — the base rule above is the
   unavailable state. It is not struck through: a Saturday was never offered,
   it was not withdrawn, and a strikethrough shreds the grid. */
.schedule__day--available {
  background-color: var(--yp-bk-wash);
  color: var(--yp-ink);
  cursor: pointer;
}

.schedule__day--available:hover {
  background-color: var(--yp-bk-wash-strong);
}

/* Solid fill and a weight change. The hover is pinned to the same values so
   the selection can never lighten under the cursor. */
.schedule__day--selected,
.schedule__day--selected:hover {
  background-color: var(--yp-ink);
  color: var(--yp-white);
  font-weight: 700;
}

/* Stated twice, here and in the rail. A booking with no timezone is ambiguous
   for the out-of-state and overseas buyers this page is written for. */
.schedule__zone {
  margin: 24px 0 0;
  font-family: var(--yp-bk-sans) !important;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--yp-bk-muted);
}

/* Shown until booking.js takes over, then hidden. The direction matters: real
   content is visible by default and the script only ever takes it away, so a
   failed or blocked script leaves a working instruction rather than an empty
   box. */
.schedule__fallback {
  margin: 24px 0 0;
  font-family: var(--yp-bk-sans) !important;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--yp-bk-muted);
}

.schedule.is-ready .schedule__fallback { display: none; }

/* ---- times --------------------------------------------------------------- */

.schedule__times {
  padding: 32px;
  border-top: 1px solid var(--yp-bk-line);
  min-width: 0;
}

/* The 460px ceiling and the nested scroller exist only on desktop. On a phone
   the list runs its natural length inside the page scroll, because a short
   scroll region inside a page that already scrolls is a trap. */
@media (min-width: 768px) {
  .schedule__times {
    border-top: 0;
    border-left: 1px solid var(--yp-bk-line);
    max-height: 460px;
    overflow-y: auto;
  }
}

/* The full summary string, month included, so the label stays unambiguous
   after paging forward. No fixed height: a long weekday name would clip its
   descenders against one. */
.schedule__times-label {
  margin: 0 0 16px;
  font-family: var(--yp-bk-sans) !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--yp-ink);
}

.schedule__times-empty {
  margin: 0;
  font-family: var(--yp-bk-sans) !important;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--yp-bk-muted);
}

.schedule__slots {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  list-style: none !important;   /* Divi again; the padding is taken back at (0,2,0) above */
}

/* 12px of padding around 14px type gives a 43px target, comfortably
   clickable, in a single full-width column rather than a cramped two-up grid.
   That arithmetic only holds because the line-height is declared: the
   reference leaves it unset, but here the button sits inside an <li> inside
   an <ul> that Divi has already given `line-height: 26px`, which inherits
   straight through and adds 9px to every one of the twelve.

   (0,2,0) again, for the border: `button:focus { border: none }` was
   collapsing the 1px hairline the instant a slot was clicked, so the whole
   column reflowed by 2px under the cursor. */
.schedule .schedule__slot {
  display: block;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--yp-bk-line);
  border-radius: var(--yp-bk-radius);
  background: none;
  font-family: var(--yp-bk-sans) !important;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--yp-ink);
  cursor: pointer;
  transition: border-color 0.25s var(--yp-bk-ease),
              background-color 0.25s var(--yp-bk-ease),
              color 0.25s var(--yp-bk-ease);
}

/* Border only. Quiet and precise, and it keeps the fill exclusively for the
   chosen slot so hover and selection never blur into each other. */
.schedule .schedule__slot:hover { border-color: var(--yp-ink); }

.schedule .schedule__slot--selected {
  background-color: var(--yp-ink);
  border-color: var(--yp-ink);
  color: var(--yp-white);
}

/* ---- footer -------------------------------------------------------------- */

/* A hairline-topped bar across the whole picker grid: the visual full stop of
   step one, and the thing the earlier attempt was missing entirely. */
.schedule__footer {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  padding: 24px 32px;
  border-top: 1px solid var(--yp-bk-line);
}

/* A 50px pill with a 2px outline, mirroring the site's own buttons so it
   reads as a site button rather than as a component button.

   One rule, scoped to (0,2,0), because three separate Divi and typography.css
   rules all reach this element and each needs a different answer:

     button:focus { border: none }          (0,1,1)  took the 2px outline away
                                                     on click, collapsing the
                                                     pill to floating text on
                                                     the one control that
                                                     closes step one
     button[type="submit"]                  (0,1,1)  serif, caps, nav tracking
                                                     and weight 400 !important,
                                                     so step two's button was
                                                     arriving as a different
                                                     object from step one's
                                                     although both wear
                                                     .schedule__confirm

   letter-spacing is 0 rather than absent: typography.css puts 0.005em on
   everything inside .entry-content, and the reference sets none. */
.schedule .schedule__confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 24px;
  border: 2px solid var(--yp-ink);
  border-radius: 26px;
  background-color: transparent;
  font-family: var(--yp-bk-sans) !important;
  font-size: 16px;
  font-weight: 500 !important;
  letter-spacing: 0;
  text-transform: none;
  color: var(--yp-ink);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.4s var(--yp-bk-ease),
              background-color 0.4s var(--yp-bk-ease),
              border-color 0.4s var(--yp-bk-ease);
}

.schedule .schedule__confirm:hover:not(:disabled) {
  background-color: var(--yp-ink);
  border-color: var(--yp-ink);
  color: var(--yp-white);
}

/* Says plainly that both choices are still owed, rather than looking broken. */
.schedule .schedule__confirm:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* A defined home for the caveat, flexing beside the button inside the action
   bar instead of floating loose under the card at caption size. */
.schedule__notice {
  flex: 1 1 240px;
  margin: 0;
  font-family: var(--yp-bk-sans) !important;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--yp-bk-muted);
}

/* ---- proportion at full width -------------------------------------------
   The section is full bleed and the panel takes the whole content measure, as
   asked. Left alone, the seven fractional columns open to about 116px each on
   a 1460px card and the 36px chips float in the middle of them, which is the
   card being stretched rather than scaled.

   560px holds the columns at 80px, which is the ratio of chip to column the
   reference itself lands on, and centres the block in its own column so the
   air falls either side of the calendar rather than collecting in one gap
   between the calendar and the slot list. */
@media (min-width: 1200px) {
  .schedule__month,
  .schedule__weekdays,
  .schedule__days,
  .schedule__zone,
  .schedule__fallback {
    width: 100%;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---- details and end state ----------------------------------------------
   Steps two and three occupy the slot the picker had. Only this side of the
   panel swaps; the rail on the left persists across all three. */

.schedule__panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.schedule__form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* Padded on the title rather than on the panel, so the field grid below can
   carry its own asymmetric padding. */
.schedule__form-title {
  margin: 0;
  padding: 32px 32px 0;
  font-family: var(--yp-bk-sans) !important;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--yp-ink);
}

.schedule__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 24px 32px 32px;
}

@media (min-width: 768px) {
  .schedule__fields { grid-template-columns: 1fr 1fr; }
}

.schedule__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;   /* stops a long value from blowing the grid track out */
}

.schedule__field--wide { grid-column: 1 / -1; }

/* The same tracked caps as the weekday header. One label language. Weight is
   left where the reference leaves it, at the inherited 400: a 500 here was
   undisclosed drift, and 13px caps at 0.06em already read as a label. */
.schedule__label {
  font-family: var(--yp-bk-sans) !important;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--yp-bk-muted);
}

/* (0,2,0), and this is the rule the whole specificity note at the top of the
   file exists for. Divi ships
   `input[type=email],input[type=password],input[type=tel],input[type=text],
    select,textarea { background:#fff; border:1px solid #bbb; padding:2px;
    color:#4e4e4e }` at (0,1,1). A bare `.schedule__input` is (0,1,0) and lost
   on every one of the four <input> elements while the <textarea>, matched
   only by the (0,0,1) `textarea` half, kept these values: four 28px slivers
   in a cold #bbb above a correctly drawn 116px textarea. */
.schedule .schedule__input {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--yp-bk-line);
  border-radius: var(--yp-bk-radius);
  background-color: var(--yp-white);
  font-family: var(--yp-bk-sans) !important;
  /* 16px is a floor, not a taste call: iOS Safari zooms the page on focus for
     anything smaller, and this form sits inside a horizontal card. */
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--yp-ink);
  appearance: none;
  transition: border-color 0.25s var(--yp-bk-ease);
}

/* The same grey as an unavailable day: one inert tone across the component. */
.schedule .schedule__input::placeholder { color: var(--yp-bk-inactive); }

/* (0,3,0), because Divi's `input[type=text]:focus { border-color:#2d3940;
   color:#3e3e3e }` is (0,2,1). Focusing Full name or Company was painting a
   cold blue-grey border and grey type: the only two off-palette colours in a
   card whose premise is that the brand has exactly four. */
.schedule .schedule__input:focus {
  border-color: var(--yp-ink);
  color: var(--yp-ink);
}

/* The reference deletes the ring and marks focus with the accent border
   alone. A 1px border change is thin for a keyboard user, so the site's own
   ring is kept on top of it, exactly as contact.css draws it. */
.schedule :is(button, input, textarea, a):focus-visible {
  outline: 1px solid var(--yp-ink);
  outline-offset: 3px;
}

/* No red in the palette, so weight carries it: the hairline goes to full ink
   and doubles. box-sizing keeps the field the same size, so nothing shifts
   when the message appears. Set on submit only, cleared on the next keystroke
   in that field.

   (0,2,0) for the same reason as the base rule: at (0,1,0) this was fully
   overridden by Divi's (0,1,1) input rule, so the substitute for the
   reference's #b4453c did nothing at all on the four fields that can error.
   The rule sits after the focus rule on purpose, so an errored field that is
   also focused still reads as errored rather than as merely focused.

   The padding gives back exactly the 1px the border takes on each side. The
   field's height is content-driven, so border-box does not pin it on its own
   and every errored field was growing 2px, nudging its row of the two-up grid
   at the moment the visitor is least able to absorb a layout shift. */
.schedule .schedule__input--error {
  padding: 11px 13px;
  border-color: var(--yp-ink);
  border-width: 2px;
}

/* Vertical only, so the two-up grid cannot be broken by dragging. */
.schedule__textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.4;
}

.schedule__error {
  font-family: var(--yp-bk-sans) !important;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--yp-ink);
}

/* Back on the left, submit on the right, pinned to the bottom of the panel. */
.schedule__footer--form {
  margin-top: auto;
  justify-content: space-between;
}

/* A text link, not a second button. The 4px underline offset is what keeps it
   from reading as a default anchor. */
.schedule__back {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--yp-bk-sans) !important;
  font-size: 15px;
  letter-spacing: 0;
  color: var(--yp-bk-muted);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: color 0.3s var(--yp-bk-ease);
}

.schedule__back:hover { color: var(--yp-ink); }

/* The most generous padding in the card, because the panel is nearly empty. */
.schedule__done {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 40px 32px;
}

.schedule__done-title {
  margin: 0;
  font-family: var(--yp-serif) !important;
  font-size: 32px;
  font-weight: var(--yp-w-section, 540);
  line-height: 1;
  /* !important for the same reason as .schedule__meeting: Divi's cached
     customizer zeroes letter-spacing on every p with an author !important,
     and this is a <p>. */
  letter-spacing: var(--yp-track-sub, 0.09em) !important;
  text-transform: uppercase;
  color: var(--yp-ink);
}

/* 52ch, because this paragraph is the one that has to be read rather than
   scanned: it says what has and has not happened. */
.schedule__done-text {
  margin: 0;
  max-width: 52ch;
  font-family: var(--yp-bk-sans) !important;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--yp-bk-muted);
}

/* Two-class scope on purpose: Divi's cached customizer block paints every
   bare `a` on the page, and a link inside a white card has to stay ink. */
.schedule .schedule__link {
  color: var(--yp-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- secondary route ------------------------------------------------------
   For the visitor who will not book from a page. Same pill as the confirm
   button, because the component only has one button shape. */

.schedule-call__links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
}

.schedule-call__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  height: 50px;
  padding: 0 24px;
  border: 2px solid var(--yp-ink);
  border-radius: 26px;
  background-color: transparent;
  font-family: var(--yp-bk-sans) !important;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--yp-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.4s var(--yp-bk-ease),
              background-color 0.4s var(--yp-bk-ease),
              border-color 0.4s var(--yp-bk-ease);
}

.schedule-call__link:hover {
  background-color: var(--yp-ink);
  border-color: var(--yp-ink);
  color: var(--yp-white);
}

/* These pills are siblings of .schedule, not descendants, so the ring rule
   above does not reach them, and buttons.css does not list them either. Two
   visually identical pills where only one rings is worse than neither. */
.schedule-call__link:focus-visible {
  outline: 1px solid var(--yp-ink);
  outline-offset: 3px;
}

/* ---- narrow -------------------------------------------------------------- */

/* The reference's one padding compression: 32px becomes 24px everywhere. */
@media (max-width: 620px) {
  .schedule__summary,
  .schedule__calendar,
  .schedule__times,
  .schedule__footer,
  .schedule__done { padding: 24px; }

  .schedule__form-title { padding: 24px 24px 0; }
  .schedule__fields { padding: 20px 24px 24px; }

  .schedule-call__heading { font-size: 52px; }
  .schedule-call__intro { margin-bottom: 40px; }
  .schedule-call__link { min-width: 100%; }
}

/* ---- reduced motion ------------------------------------------------------
   Every state in this component is legible without its transition: the fills,
   the borders and the weights all still change. Only the tween goes. */
@media (prefers-reduced-motion: reduce) {
  /* Scoped to match the rules that declare the transitions. Four of these are
     now (0,2,0) so that Divi cannot take their borders; a bare class here
     would lose to them and the tween would survive the preference. */
  .schedule .schedule__month-nav,
  .schedule .schedule__slot,
  .schedule .schedule__confirm,
  .schedule .schedule__input,
  .schedule__day,
  .schedule__back,
  .schedule-call__link { transition: none; }
}