/* ==========================================================================
   When could you begin? — the availability calendar as a public page
   (inc/when-begin-shortcodes.php; design "Availability calendar, round 1",
   2026-10-30, refined the same day). Namespace sp-wb-*; theme-only.
   Tokens: the site's --font-ui / --font-display / --font-body from style.css;
   colors are the hub-top set (ink #2a2520, body #4f4a44, editorial #7f6045,
   hairline #ece7e0, card border #e8e0d8, muted #8e979b, action #fb9000).
   ========================================================================== */

/* The page is all white (Brad, 2026-10-30): a data-forward page reads better
   on white than on the Context Page template's cream. The shell is outside the
   shortcode, so the rule reaches up to it. */
body:has(.sp-when-begin),
.cp-page:has(.sp-when-begin) {
  background: #fff;
}

.sp-when-begin {
  font-family: var(--font-ui);
  color: #2a2520;
  max-width: 900px;
  margin: 0 auto;
  padding: 44px 20px 40px;
  box-sizing: border-box;
}
.sp-when-begin *,
.sp-when-begin *::before,
.sp-when-begin *::after {
  box-sizing: border-box;
}

/* ── Head ───────────────────────────────────────────────────────────────── */
.sp-wb-rainbow {
  width: 50px;
  height: 3px;
  background: linear-gradient(90deg, #fb9000 0%, #e8724a 20%, #d94f6e 40%, #9b59b6 60%, #6cc8d7 80%, #4aae8c 100%);
}
.sp-wb-eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #7f6045;
  margin: 14px 0 0;
}
.sp-when-begin h1.sp-wb-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 42px;
  line-height: 1.15;
  color: #2a2520;
  margin: 10px 0 12px;
  text-wrap: pretty;
}
.sp-when-begin p.sp-wb-support {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: #4f4a44;
  margin: 0 0 6px;
  max-width: 640px;
  text-wrap: pretty;
}
.sp-when-begin p.sp-wb-updated {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: #8e979b;
  margin: 0 0 24px;
}
.sp-wb-head + .sp-wb-cal {
  margin-top: 24px;
}
.sp-wb-head:has(.sp-wb-updated) + .sp-wb-cal {
  margin-top: 0;
}

/* ── The calendar box ───────────────────────────────────────────────────── */
.sp-wb-cal {
  background: #fff;
  border: 1px solid #e8e0d8;
  border-radius: 10px;
  padding: 18px 20px 20px;
}
.sp-wb-ask {
  display: flex;
  align-items: center;
  gap: 8px 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.sp-wb-ask__q {
  font-size: 13.5px;
  font-weight: 600;
  color: #2a2520;
  margin-right: 2px;
}
.sp-wb-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.sp-when-begin button.sp-wb-chip {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 9px 13px;
  border-radius: 999px;
  border: 1px solid #c5bfb8;
  background: #fff;
  color: #4f4a44;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.sp-when-begin button.sp-wb-chip:hover {
  border-color: #7f6045;
}
.sp-when-begin button.sp-wb-chip:focus-visible,
.sp-when-begin button.sp-wb-any:focus-visible {
  outline: 2px solid #7f6045;
  outline-offset: 2px;
}
.sp-when-begin button.sp-wb-chip[aria-pressed="true"] {
  background: #fb9000;
  border-color: #fb9000;
  color: #fff;
}
.sp-wb-chip__check {
  font-size: 11px;
  display: none;
}
.sp-when-begin button.sp-wb-chip[aria-pressed="true"] .sp-wb-chip__check {
  display: inline;
}
.sp-when-begin button.sp-wb-any {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 9px 6px;
  border: 0;
  background: transparent;
  color: #a39b8e;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(127, 96, 69, 0.35);
}
.sp-when-begin button.sp-wb-any.is-on {
  color: #7f6045;
}
.sp-when-begin button.sp-wb-chip[disabled],
.sp-when-begin button.sp-wb-any[disabled] {
  opacity: 0.5;
  cursor: default;
}

/* The two weeks as a wall calendar, read as a matrix (Brad, 2026-11-05:
   "data-forward, but easier to read"). Sunday-to-Saturday columns, whole
   weeks (sp_when_begin_weeks()); weekday names once over the columns; the
   three dayparts once per week down the left; each count a tile shaded by
   how many clinicians could start (the brand's green, light to dark: 1, 2, 3–4,
   5+), so the open stretches show before any number is read. Weekend
   columns are narrower because they are closed; a weekend with a real
   count still fits its tiles. */
.sp-when-begin .sp-wb-dows,
.sp-when-begin ol.sp-wb-days {
  display: grid;
  grid-template-columns: 78px minmax(0, 0.72fr) repeat(5, minmax(0, 1fr)) minmax(0, 0.72fr);
  column-gap: 6px;
}
.sp-when-begin .sp-wb-dows {
  margin: 4px 0 4px;
}
.sp-wb-dows span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #2a2520;
  padding: 0 2px;
}
.sp-when-begin ol.sp-wb-days {
  list-style: none;
  margin: 0;
  padding: 0;
  row-gap: 14px;
}
.sp-when-begin li.sp-wb-gutter {
  list-style: none;
  margin: 0;
  padding: 24px 6px 0 0;
  display: grid;
  row-gap: 4px;
  align-content: start;
}
.sp-wb-gutter span {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 12px;
  font-weight: 600;
  color: #4f4a44;
}
.sp-when-begin li.sp-wb-day {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.sp-wb-day__head {
  height: 24px;
  padding: 0 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* The column names the day; the cell names the date. */
.sp-wb-day__dow {
  display: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #2a2520;
}
.sp-wb-day__date {
  font-size: 12px;
  font-weight: 600;
  color: #4f4a44;
}
.sp-when-begin ul.sp-wb-parts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  row-gap: 4px;
}
/* style.css gives every ul a clearfix ::before/::after; inside a grid each
   becomes an empty row plus a gap, pushing the tiles 4px off the labels. */
.sp-when-begin ul.sp-wb-parts::before,
.sp-when-begin ul.sp-wb-parts::after {
  content: none;
  display: none;
}
.sp-when-begin li.sp-wb-part {
  position: relative;
  height: 34px;
  margin: 0;
  padding: 0 8px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: inset 0 0 0 1px #ece7e0;
  transition: opacity 0.2s;
}
/* Desktop: the left column names the daypart; the label stays for screen
   readers (and shows again on a phone). */
.sp-wb-part__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  color: #6e787c;
}
.sp-wb-part__n {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #2a2520;
}
.sp-wb-part.is-zero .sp-wb-part__n {
  font-weight: 400;
  color: #c9c1b6;
}
/* The shade steps (sp_when_begin_bin()), all from the brand's --rainbow-green
   #4aae8c (Brad, 2026-11-05: green reads as "open", and the hub rows already
   mark openings in it): 14% and 45% tints on white, the token itself, and 60%
   green with 40% ink. Lightness falls 95 → 84 → 65 → 46 (L*); ink numbers on
   the first three (5.6:1 on the token), white on the last (5.2:1). */
.sp-when-begin li.sp-wb-part.is-b1,
.sp-when-begin .sp-wb-key__sw.is-b1 { background: #e6f4ef; box-shadow: none; }
.sp-when-begin li.sp-wb-part.is-b2,
.sp-when-begin .sp-wb-key__sw.is-b2 { background: #aedbcb; box-shadow: none; }
.sp-when-begin li.sp-wb-part.is-b3,
.sp-when-begin .sp-wb-key__sw.is-b3 { background: #4aae8c; box-shadow: none; }
.sp-when-begin li.sp-wb-part.is-b4,
.sp-when-begin .sp-wb-key__sw.is-b4 { background: #3d7761; box-shadow: none; }
.sp-when-begin li.sp-wb-part.is-b4 .sp-wb-part__n,
.sp-when-begin .sp-wb-key__sw.is-b4 {
  color: #fff;
}
/* The key under the grid: what the shades mean. */
.sp-when-begin .sp-wb-key {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 14px 0 0;
}
.sp-wb-key__label {
  font-size: 12px;
  font-weight: 600;
  color: #4f4a44;
  margin-right: 6px;
}
.sp-wb-key__sw {
  min-width: 38px;
  height: 22px;
  padding: 0 7px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #2a2520;
}
/* A closed day (no weekend hours today): one quiet panel where the three
   tiles would be. Driven by sp_when_begin_closed_days() AND an empty feed
   day, so a weekend with a real count draws exactly like a weekday. Today,
   when the window starts tomorrow, is the same panel with its own line. */
.sp-wb-day__closed {
  height: 110px;
  border-radius: 6px;
  background: #f6f3ef;
  padding: 9px 8px;
  font-size: 11px;
  line-height: 1.4;
  color: #a39b8e;
}
.sp-wb-day.is-closed .sp-wb-day__date {
  color: #b5ada3;
}
.sp-wb-day.is-today .sp-wb-day__dow {
  display: inline;
}
.sp-wb-day.is-today .sp-wb-day__date {
  color: #8e979b;
  font-weight: 400;
}
.sp-wb-day.is-today .sp-wb-day__closed {
  color: #6e787c;
}
/* Outside the window: earlier this week, or past the two weeks. A faint
   date and nothing else, so the eye goes straight to the window. */
.sp-wb-day.is-past .sp-wb-day__date,
.sp-wb-day.is-out .sp-wb-day__date {
  color: #cdc6bc;
  font-weight: 400;
}

/* A preference: the matching daypart keeps its shade; the others fade back
   but stay readable. */
.sp-when-begin.has-prefs .sp-wb-part {
  opacity: 0.25;
}
.sp-when-begin.has-prefs .sp-wb-part.is-on {
  opacity: 1;
}

.sp-when-begin p.sp-wb-legend {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.55;
  color: #6e787c;
  margin: 12px 0 0;
  text-wrap: pretty;
}

/* Loading: a skeleton, never dashes. */
.sp-wb-skel {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.sp-wb-skel__cell {
  border: 1px solid #ece7e0;
  border-radius: 8px;
  padding: 8px 9px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.sp-wb-skel__cell span {
  display: block;
  height: 12px;
  border-radius: 3px;
  background: #f0ebe4;
  animation: sp-wb-pulse 1.4s ease-in-out infinite;
}
.sp-wb-skel__cell span:first-child {
  height: 9px;
  width: 60%;
  background: #e8e0d8;
}
.sp-wb-skel__cell span:nth-child(3) { animation-delay: 0.2s; }
.sp-wb-skel__cell span:nth-child(4) { animation-delay: 0.4s; }
.sp-when-begin p.sp-wb-loading__text {
  margin: 10px 0 0;
  font-size: 13px;
  color: #6e787c;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sp-wb-loading__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7f6045;
  animation: sp-wb-pulse 1.2s ease-in-out infinite;
}
@keyframes sp-wb-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.9; }
}

/* Empty and stale: a quiet panel in place of the grid. */
.sp-wb-notice {
  background: linear-gradient(135deg, #faf8f5 0%, #f5f0eb 100%);
  border-radius: 8px;
  padding: 20px 22px;
}
.sp-wb-notice__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  color: #2a2520;
}
.sp-when-begin p.sp-wb-notice__text {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: #4f4a44;
  margin: 6px 0 0;
  text-wrap: pretty;
}

/* Foot of the box: the reason, then the one button. */
.sp-wb-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #ece7e0;
}
.sp-when-begin p.sp-wb-reason {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: #4f4a44;
  margin: 0;
  flex: 1 1 320px;
  text-wrap: pretty;
}
.sp-when-begin a.sp-wb-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fb9000;
  color: #fff;
  border-radius: 6px;
  padding: 13px 20px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s;
}
.sp-when-begin a.sp-wb-btn:hover {
  background: #db7a05;
  color: #fff;
  text-decoration: none;
}
.sp-when-begin a.sp-wb-btn--ready {
  padding: 14px 24px;
  font-size: 13px;
}

/* ── How to read this · What this covers ────────────────────────────────── */
.sp-wb-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 32px;
  margin-top: 40px;
}
.sp-when-begin h2.sp-wb-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.3;
  color: #7f6045;
  margin: 0 0 10px;
}
.sp-when-begin .sp-wb-read p {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.75;
  color: #4f4a44;
  margin: 0 0 12px;
  text-wrap: pretty;
}
.sp-when-begin .sp-wb-read p:last-child {
  margin-bottom: 0;
}

/* ── Live refresh: the Updated line pulses when a refresh lands, a cell when its number changes ── */
@keyframes sp-wb-fresh {
  0%   { color: #a35a00; }
  100% { color: inherit; }
}
@keyframes sp-wb-changed {
  0%   { outline-color: #fb9000; }
  100% { outline-color: rgba(251, 144, 0, 0); }
}
.sp-when-begin .sp-wb-updated.is-fresh {
  animation: sp-wb-fresh 1.6s ease-out;
}
.sp-when-begin .sp-wb-part.is-changed {
  outline: 2px solid rgba(251, 144, 0, 0);
  outline-offset: 1px;
  animation: sp-wb-changed 1.6s ease-out;
}
.sp-when-begin.is-live-stale .sp-wb-days,
.sp-when-begin.is-live-stale .sp-wb-text__list {
  opacity: .45;
}
@media (prefers-reduced-motion: reduce) {
  .sp-when-begin .sp-wb-updated.is-fresh,
  .sp-when-begin .sp-wb-part.is-changed {
    animation: none;
  }
}

/* ── Questions people ask ───────────────────────────────────────────────── */
.sp-wb-faq {
  margin-top: 36px;
  max-width: 720px;
}
.sp-when-begin p.sp-wb-faq__intro {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.75;
  color: #4f4a44;
  margin: 0 0 18px;
  text-wrap: pretty;
}
/* Each question is a native <details>: the heading sits in the <summary>, a plus/minus mark
   at the right, the answer below. No script; the first two start open. */
.sp-when-begin details.sp-wb-faq__item {
  border-top: 1px solid #e8e2d8;
  padding: 12px 0;
  margin: 0;
}
.sp-when-begin details.sp-wb-faq__item:last-of-type {
  border-bottom: 1px solid #e8e2d8;
}
.sp-when-begin summary.sp-wb-faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.sp-when-begin summary.sp-wb-faq__q::-webkit-details-marker {
  display: none;
}
.sp-when-begin summary.sp-wb-faq__q h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.35;
  color: #2a2520;
  margin: 0;
}
.sp-when-begin summary.sp-wb-faq__q:hover h3 {
  color: #7f6045;
}
.sp-when-begin .sp-wb-faq__mark {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  position: relative;
  top: 2px;
  color: #a35a00;
}
.sp-when-begin .sp-wb-faq__mark::before,
.sp-when-begin .sp-wb-faq__mark::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 8px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}
.sp-when-begin .sp-wb-faq__mark::after {
  transform: rotate(90deg);
  transition: transform .2s ease;
}
.sp-when-begin details[open] .sp-wb-faq__mark::after {
  transform: rotate(0deg);
}
.sp-when-begin .sp-wb-faq__a {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.75;
  color: #4f4a44;
  margin: 10px 0 2px;
  padding-right: 34px;
  text-wrap: pretty;
}
.sp-when-begin .sp-wb-faq__a p {
  margin: 0 0 10px;
}
.sp-when-begin .sp-wb-faq__a p:last-child,
.sp-when-begin .sp-wb-faq__a ul:last-child {
  margin-bottom: 0;
}
.sp-when-begin .sp-wb-faq__a strong {
  font-weight: 600;
  color: #2a2520;
}
.sp-when-begin .sp-wb-faq__a ul {
  list-style: disc outside;
  margin: 0 0 10px;
  padding-left: 22px;
}
.sp-when-begin .sp-wb-faq__a li {
  display: list-item;
  margin: 0 0 4px;
}
.sp-when-begin summary.sp-wb-faq__q:focus-visible {
  outline: 2px solid #a35a00;
  outline-offset: 4px;
  border-radius: 4px;
}
.sp-when-begin dl.sp-wb-covers__list {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: #4f4a44;
  border-bottom: 1px solid #ece7e0;
}
.sp-wb-covers__row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 4px 14px;
  padding: 8px 0;
  border-top: 1px solid #ece7e0;
}
.sp-when-begin .sp-wb-covers__row dt {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #8e979b;
  padding-top: 5px;
  margin: 0;
}
.sp-when-begin .sp-wb-covers__row dd {
  margin: 0;
}
.sp-when-begin .sp-wb-covers__row dd a {
  color: #7f6045;
  text-decoration: none;
}
.sp-when-begin .sp-wb-covers__row dd a:hover {
  text-decoration: underline;
}

/* ── The faces ──────────────────────────────────────────────────────────── */
.sp-wb-faces {
  margin-top: 40px;
  padding: 26px 0 28px;
  border-top: 1px solid #ece7e0;
  border-bottom: 1px solid #ece7e0;
}
/* The row fills the 860px line and centers: the markup sets --sp-wb-n (faces per row, two even
   rows past twelve), and each face takes an equal share of the width between 56px and 128px.
   Six faces come out large (couples), ten about 78px (individual), fourteen as two rows of seven;
   the count can change without the row looking designed for a different number. */
.sp-wb-faces__row {
  --sp-wb-n: 10;
  --sp-wb-gap: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-wb-gap);
  align-items: center;
  margin-bottom: 18px;
}
.sp-wb-face {
  position: relative;
  display: block;
  width: clamp(56px, calc((100% - (var(--sp-wb-n) - 1) * var(--sp-wb-gap)) / var(--sp-wb-n)), 128px);
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(170deg, #f5f0eb 0%, #ebe5de 100%);
}
/* The directory's own framing (therapist-listing.css .tl-card__photo): the
   photo fills the box from the top, --tp-x is the horizontal focal point,
   --tp-y / --tp-zoom shift and crop it. The per-clinician values below are
   COPIES of the directory's, keyed the same way (by headshot filename), so
   the faces here, on /therapist-near-me-dc/ and on the homepage read as one
   set. A new headshot gets its numbers there first, then here. */
.sp-wb-face__img {
  --tp-x: 50%;
  --tp-y: 0%;
  --tp-zoom: 1;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: var(--tp-x) top;
  transform: translateY(var(--tp-y)) scale(var(--tp-zoom));
  filter: saturate(0.92) brightness(1.02);
}
.sp-wb-face__img[src*="Keith-Clemson-Profile2"]         { --tp-x: 38.9%; --tp-y: -2.72%; --tp-zoom: 1.054; }
.sp-wb-face__img[src*="Regan-Mayo-Profile"]             { --tp-x: 44.9%; --tp-y: 4.29%;  --tp-zoom: 1.086; }
.sp-wb-face__img[src*="Dominique-Harrington-Edit"]      { --tp-x: 52.7%; --tp-y: 10.11%; --tp-zoom: 1.202; }
.sp-wb-face__img[src*="Jessica-Hilbert-Profile"]        { --tp-x: 60.8%; --tp-y: 2.78%;  --tp-zoom: 1.128; }
.sp-wb-face__img[src*="Kevin-Malley-Profile"]           { --tp-x: 46.7%; --tp-y: 6.71%;  --tp-zoom: 1.141; }
.sp-wb-face__img[src*="Paul-Rizzo-Profile"]             { --tp-x: 36.3%; --tp-y: 5.42%;  --tp-zoom: 1.138; }
.sp-wb-face__img[src*="Ela-Perra-Profile-v2"]           { --tp-x: 41.3%; --tp-y: 5.88%;  --tp-zoom: 1.2; }
.sp-wb-face__img[src*="tgdc-michael-burrows-profile"]   { --tp-x: 34.1%; --tp-y: 8.19%;  --tp-zoom: 1.199; }
.sp-wb-face__img[src*="Manon-Pesme-Profile"]            { --tp-x: 41.0%; --tp-y: 7.12%;  --tp-zoom: 1.266; }
.sp-wb-face__img[src*="Angelyn-Wollen-Profile-v2"]      { --tp-x: 51.2%; --tp-y: 2.04%;  --tp-zoom: 1.065; }
.sp-wb-face__img[src*="Kevin-Isserman-Profile"]         { --tp-x: 60.7%; --tp-y: 6.77%;  --tp-zoom: 1.136; }
.sp-wb-face__img[src*="Rob-Drinkwater-Profile"]         { --tp-x: 66.7%; --tp-y: 7.13%;  --tp-zoom: 1.143; }
.sp-wb-face__img[src*="Dana-Treistman-Profile"]         { --tp-x: 52.4%; --tp-y: -0.74%; --tp-zoom: 1.015; }
.sp-wb-face::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(180, 130, 70, 0.08), rgba(180, 130, 70, 0.08)),
    radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.08) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}
.sp-wb-faces {
  text-align: center;
}
.sp-when-begin p.sp-wb-faces__text {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.65;
  color: #4f4a44;
  margin: 0 auto 6px;
  max-width: 640px;
  text-wrap: pretty;
}
.sp-when-begin a.sp-wb-faces__link {
  font-size: 13.5px;
  font-weight: 600;
  color: #7f6045;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(127, 96, 69, 0.35);
}

/* ── From Our Practice: the site's callout, white on this page ──────────── */
.sp-when-begin .tgdc-practice-insight.sp-wb-insight {
  background: #fff;
  border-color: #ece7e0;
  margin: 32px 0 0;
}

/* ── The same facts as text ─────────────────────────────────────────────── */
/* A closed <details>: the heading is the summary, with the same plus/minus mark as the questions. */
.sp-wb-text {
  margin-top: 40px;
  border-top: 1px solid #e8e2d8;
  border-bottom: 1px solid #e8e2d8;
  padding: 14px 0;
}
.sp-when-begin summary.sp-wb-text__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.sp-when-begin summary.sp-wb-text__summary::-webkit-details-marker {
  display: none;
}
.sp-when-begin summary.sp-wb-text__summary h2.sp-wb-h2 {
  margin: 0;
}
.sp-when-begin summary.sp-wb-text__summary:hover h2.sp-wb-h2 {
  color: #a35a00;
}
.sp-when-begin summary.sp-wb-text__summary:focus-visible {
  outline: 2px solid #a35a00;
  outline-offset: 4px;
  border-radius: 4px;
}
.sp-when-begin p.sp-wb-text__sub {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: #8e979b;
  margin: 12px 0 12px;
}
.sp-when-begin ol.sp-wb-text__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: #4f4a44;
  columns: 2;
  column-gap: 40px;
}
.sp-when-begin ol.sp-wb-text__list li {
  break-inside: avoid;
  padding: 6px 0;
  margin: 0;
  border-bottom: 1px solid #ece7e0;
}
.sp-when-begin ol.sp-wb-text__list strong {
  font-weight: 600;
  color: #2a2520;
}

/* ── Ready to begin? ────────────────────────────────────────────────────── */
.sp-wb-ready {
  margin-top: 40px;
  background: linear-gradient(135deg, #faf8f5 0%, #f5f0eb 100%);
  border-radius: 10px;
  padding: 26px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.sp-wb-ready__body {
  flex: 1 1 360px;
}
.sp-wb-ready__h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  color: #2a2520;
}
.sp-when-begin p.sp-wb-ready__p {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: #4f4a44;
  margin: 4px 0 0;
  text-wrap: pretty;
}

/* ── Phone: fourteen readable day rows, one column of prose ─────────────── */
@media (max-width: 624px) {
  .sp-when-begin {
    padding: 28px 16px 36px;
  }
  .sp-when-begin h1.sp-wb-title {
    font-size: 32px;
  }
  .sp-wb-cal {
    padding: 16px 14px 18px;
  }
  .sp-when-begin .sp-wb-dows {
    display: none;
  }
  /* Phone: the same matrix, turned. Each week opens with its label and the
     three column names once; each day is a row of three shaded tiles under
     them, so a column (all the evenings) reads straight down. */
  .sp-when-begin li.sp-wb-gutter {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 6px;
    row-gap: 0;
    padding: 0 0 6px 74px;
    border-bottom: 1px solid #ece7e0;
  }
  .sp-when-begin li.sp-wb-gutter[data-week]::before {
    content: attr(data-week);
    grid-column: 1 / -1;
    margin: 18px 0 8px -74px;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #2a2520;
  }
  .sp-when-begin li.sp-wb-gutter:first-child[data-week]::before {
    margin-top: 4px;
  }
  .sp-wb-gutter span {
    height: auto;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: #6e787c;
  }
  .sp-when-begin ol.sp-wb-days {
    display: block;
    border-top: 1px solid #ece7e0;
  }
  .sp-when-begin li.sp-wb-day {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 9px 0;
    border: 0;
    border-bottom: 1px solid #ece7e0;
    border-radius: 0;
    overflow: visible;
  }
  .sp-wb-day__head {
    display: block;
    height: auto;
    padding: 0;
    border: 0;
  }
  .sp-wb-day__dow {
    display: block;
    font-size: 12px;
  }
  .sp-wb-day__date {
    display: block;
    font-size: 12px;
  }
  .sp-when-begin ul.sp-wb-parts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 6px;
  }
  .sp-when-begin li.sp-wb-part {
    height: 38px;
    padding: 0;
  }
  .sp-wb-part__n {
    font-size: 16px;
  }
  .sp-when-begin li.sp-wb-day.is-closed,
  .sp-when-begin li.sp-wb-day.is-today {
    background: transparent;
    border-bottom-color: #ece7e0;
    padding: 7px 0;
  }
  /* A list needs no padding cells; it keeps today (it says why the list
     starts tomorrow) and labels each week where it begins. */
  .sp-when-begin li.sp-wb-day.is-past,
  .sp-when-begin li.sp-wb-day.is-out {
    display: none;
  }
  .sp-when-begin ol.sp-wb-days {
    border-top: 0;
  }
  .sp-wb-day__closed {
    height: auto;
    padding: 0;
    background: transparent;
    font-size: 12px;
    color: #a39b8e;
  }
  .sp-wb-skel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sp-when-begin button.sp-wb-chip,
  .sp-when-begin button.sp-wb-any {
    min-height: 36px;
  }
  .sp-wb-cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    margin-top: 32px;
  }
  .sp-wb-faces__row {
    --sp-wb-gap: 8px;
  }
  .sp-wb-face {
    width: clamp(48px, calc((100% - (var(--sp-wb-n) - 1) * var(--sp-wb-gap)) / var(--sp-wb-n)), 96px);
  }
  .sp-when-begin ol.sp-wb-text__list {
    columns: 1;
  }
  .sp-when-begin a.sp-wb-btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
  .sp-wb-ready {
    padding: 22px 18px;
  }
}